/* /stylesheets/lib/reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* modern css reset */

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
	box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
	margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
	height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
	font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root, #__next {
	isolation: isolate;
}
/* /vendor/flag-icon-css/css/flag-icons.css */
.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.flag-icon:before {
  content: '\00a0';
}
.flag-icon.flag-icon-squared {
  width: 1em;
}
.flag-icon-ad {
  background-image: url(../flags/4x3/ad.svg);
}
.flag-icon-ad.flag-icon-squared {
  background-image: url(../flags/1x1/ad.svg);
}
.flag-icon-ae {
  background-image: url(../flags/4x3/ae.svg);
}
.flag-icon-ae.flag-icon-squared {
  background-image: url(../flags/1x1/ae.svg);
}
.flag-icon-af {
  background-image: url(../flags/4x3/af.svg);
}
.flag-icon-af.flag-icon-squared {
  background-image: url(../flags/1x1/af.svg);
}
.flag-icon-ag {
  background-image: url(../flags/4x3/ag.svg);
}
.flag-icon-ag.flag-icon-squared {
  background-image: url(../flags/1x1/ag.svg);
}
.flag-icon-ai {
  background-image: url(../flags/4x3/ai.svg);
}
.flag-icon-ai.flag-icon-squared {
  background-image: url(../flags/1x1/ai.svg);
}
.flag-icon-al {
  background-image: url(../flags/4x3/al.svg);
}
.flag-icon-al.flag-icon-squared {
  background-image: url(../flags/1x1/al.svg);
}
.flag-icon-am {
  background-image: url(../flags/4x3/am.svg);
}
.flag-icon-am.flag-icon-squared {
  background-image: url(../flags/1x1/am.svg);
}
.flag-icon-ao {
  background-image: url(../flags/4x3/ao.svg);
}
.flag-icon-ao.flag-icon-squared {
  background-image: url(../flags/1x1/ao.svg);
}
.flag-icon-aq {
  background-image: url(../flags/4x3/aq.svg);
}
.flag-icon-aq.flag-icon-squared {
  background-image: url(../flags/1x1/aq.svg);
}
.flag-icon-ar {
  background-image: url(../flags/4x3/ar.svg);
}
.flag-icon-ar.flag-icon-squared {
  background-image: url(../flags/1x1/ar.svg);
}
.flag-icon-as {
  background-image: url(../flags/4x3/as.svg);
}
.flag-icon-as.flag-icon-squared {
  background-image: url(../flags/1x1/as.svg);
}
.flag-icon-at {
  background-image: url(../flags/4x3/at.svg);
}
.flag-icon-at.flag-icon-squared {
  background-image: url(../flags/1x1/at.svg);
}
.flag-icon-au {
  background-image: url(../flags/4x3/au.svg);
}
.flag-icon-au.flag-icon-squared {
  background-image: url(../flags/1x1/au.svg);
}
.flag-icon-aw {
  background-image: url(../flags/4x3/aw.svg);
}
.flag-icon-aw.flag-icon-squared {
  background-image: url(../flags/1x1/aw.svg);
}
.flag-icon-ax {
  background-image: url(../flags/4x3/ax.svg);
}
.flag-icon-ax.flag-icon-squared {
  background-image: url(../flags/1x1/ax.svg);
}
.flag-icon-az {
  background-image: url(../flags/4x3/az.svg);
}
.flag-icon-az.flag-icon-squared {
  background-image: url(../flags/1x1/az.svg);
}
.flag-icon-ba {
  background-image: url(../flags/4x3/ba.svg);
}
.flag-icon-ba.flag-icon-squared {
  background-image: url(../flags/1x1/ba.svg);
}
.flag-icon-bb {
  background-image: url(../flags/4x3/bb.svg);
}
.flag-icon-bb.flag-icon-squared {
  background-image: url(../flags/1x1/bb.svg);
}
.flag-icon-bd {
  background-image: url(../flags/4x3/bd.svg);
}
.flag-icon-bd.flag-icon-squared {
  background-image: url(../flags/1x1/bd.svg);
}
.flag-icon-be {
  background-image: url(../flags/4x3/be.svg);
}
.flag-icon-be.flag-icon-squared {
  background-image: url(../flags/1x1/be.svg);
}
.flag-icon-bf {
  background-image: url(../flags/4x3/bf.svg);
}
.flag-icon-bf.flag-icon-squared {
  background-image: url(../flags/1x1/bf.svg);
}
.flag-icon-bg {
  background-image: url(../flags/4x3/bg.svg);
}
.flag-icon-bg.flag-icon-squared {
  background-image: url(../flags/1x1/bg.svg);
}
.flag-icon-bh {
  background-image: url(../flags/4x3/bh.svg);
}
.flag-icon-bh.flag-icon-squared {
  background-image: url(../flags/1x1/bh.svg);
}
.flag-icon-bi {
  background-image: url(../flags/4x3/bi.svg);
}
.flag-icon-bi.flag-icon-squared {
  background-image: url(../flags/1x1/bi.svg);
}
.flag-icon-bj {
  background-image: url(../flags/4x3/bj.svg);
}
.flag-icon-bj.flag-icon-squared {
  background-image: url(../flags/1x1/bj.svg);
}
.flag-icon-bl {
  background-image: url(../flags/4x3/bl.svg);
}
.flag-icon-bl.flag-icon-squared {
  background-image: url(../flags/1x1/bl.svg);
}
.flag-icon-bm {
  background-image: url(../flags/4x3/bm.svg);
}
.flag-icon-bm.flag-icon-squared {
  background-image: url(../flags/1x1/bm.svg);
}
.flag-icon-bn {
  background-image: url(../flags/4x3/bn.svg);
}
.flag-icon-bn.flag-icon-squared {
  background-image: url(../flags/1x1/bn.svg);
}
.flag-icon-bo {
  background-image: url(../flags/4x3/bo.svg);
}
.flag-icon-bo.flag-icon-squared {
  background-image: url(../flags/1x1/bo.svg);
}
.flag-icon-bq {
  background-image: url(../flags/4x3/bq.svg);
}
.flag-icon-bq.flag-icon-squared {
  background-image: url(../flags/1x1/bq.svg);
}
.flag-icon-br {
  background-image: url(../flags/4x3/br.svg);
}
.flag-icon-br.flag-icon-squared {
  background-image: url(../flags/1x1/br.svg);
}
.flag-icon-bs {
  background-image: url(../flags/4x3/bs.svg);
}
.flag-icon-bs.flag-icon-squared {
  background-image: url(../flags/1x1/bs.svg);
}
.flag-icon-bt {
  background-image: url(../flags/4x3/bt.svg);
}
.flag-icon-bt.flag-icon-squared {
  background-image: url(../flags/1x1/bt.svg);
}
.flag-icon-bv {
  background-image: url(../flags/4x3/bv.svg);
}
.flag-icon-bv.flag-icon-squared {
  background-image: url(../flags/1x1/bv.svg);
}
.flag-icon-bw {
  background-image: url(../flags/4x3/bw.svg);
}
.flag-icon-bw.flag-icon-squared {
  background-image: url(../flags/1x1/bw.svg);
}
.flag-icon-by {
  background-image: url(../flags/4x3/by.svg);
}
.flag-icon-by.flag-icon-squared {
  background-image: url(../flags/1x1/by.svg);
}
.flag-icon-bz {
  background-image: url(../flags/4x3/bz.svg);
}
.flag-icon-bz.flag-icon-squared {
  background-image: url(../flags/1x1/bz.svg);
}
.flag-icon-ca {
  background-image: url(../flags/4x3/ca.svg);
}
.flag-icon-ca.flag-icon-squared {
  background-image: url(../flags/1x1/ca.svg);
}
.flag-icon-cc {
  background-image: url(../flags/4x3/cc.svg);
}
.flag-icon-cc.flag-icon-squared {
  background-image: url(../flags/1x1/cc.svg);
}
.flag-icon-cd {
  background-image: url(../flags/4x3/cd.svg);
}
.flag-icon-cd.flag-icon-squared {
  background-image: url(../flags/1x1/cd.svg);
}
.flag-icon-cf {
  background-image: url(../flags/4x3/cf.svg);
}
.flag-icon-cf.flag-icon-squared {
  background-image: url(../flags/1x1/cf.svg);
}
.flag-icon-cg {
  background-image: url(../flags/4x3/cg.svg);
}
.flag-icon-cg.flag-icon-squared {
  background-image: url(../flags/1x1/cg.svg);
}
.flag-icon-ch {
  background-image: url(../flags/4x3/ch.svg);
}
.flag-icon-ch.flag-icon-squared {
  background-image: url(../flags/1x1/ch.svg);
}
.flag-icon-ci {
  background-image: url(../flags/4x3/ci.svg);
}
.flag-icon-ci.flag-icon-squared {
  background-image: url(../flags/1x1/ci.svg);
}
.flag-icon-ck {
  background-image: url(../flags/4x3/ck.svg);
}
.flag-icon-ck.flag-icon-squared {
  background-image: url(../flags/1x1/ck.svg);
}
.flag-icon-cl {
  background-image: url(../flags/4x3/cl.svg);
}
.flag-icon-cl.flag-icon-squared {
  background-image: url(../flags/1x1/cl.svg);
}
.flag-icon-cm {
  background-image: url(../flags/4x3/cm.svg);
}
.flag-icon-cm.flag-icon-squared {
  background-image: url(../flags/1x1/cm.svg);
}
.flag-icon-cn {
  background-image: url(../flags/4x3/cn.svg);
}
.flag-icon-cn.flag-icon-squared {
  background-image: url(../flags/1x1/cn.svg);
}
.flag-icon-co {
  background-image: url(../flags/4x3/co.svg);
}
.flag-icon-co.flag-icon-squared {
  background-image: url(../flags/1x1/co.svg);
}
.flag-icon-cr {
  background-image: url(../flags/4x3/cr.svg);
}
.flag-icon-cr.flag-icon-squared {
  background-image: url(../flags/1x1/cr.svg);
}
.flag-icon-cu {
  background-image: url(../flags/4x3/cu.svg);
}
.flag-icon-cu.flag-icon-squared {
  background-image: url(../flags/1x1/cu.svg);
}
.flag-icon-cv {
  background-image: url(../flags/4x3/cv.svg);
}
.flag-icon-cv.flag-icon-squared {
  background-image: url(../flags/1x1/cv.svg);
}
.flag-icon-cw {
  background-image: url(../flags/4x3/cw.svg);
}
.flag-icon-cw.flag-icon-squared {
  background-image: url(../flags/1x1/cw.svg);
}
.flag-icon-cx {
  background-image: url(../flags/4x3/cx.svg);
}
.flag-icon-cx.flag-icon-squared {
  background-image: url(../flags/1x1/cx.svg);
}
.flag-icon-cy {
  background-image: url(../flags/4x3/cy.svg);
}
.flag-icon-cy.flag-icon-squared {
  background-image: url(../flags/1x1/cy.svg);
}
.flag-icon-cz {
  background-image: url(../flags/4x3/cz.svg);
}
.flag-icon-cz.flag-icon-squared {
  background-image: url(../flags/1x1/cz.svg);
}
.flag-icon-de {
  background-image: url(../flags/4x3/de.svg);
}
.flag-icon-de.flag-icon-squared {
  background-image: url(../flags/1x1/de.svg);
}
.flag-icon-dj {
  background-image: url(../flags/4x3/dj.svg);
}
.flag-icon-dj.flag-icon-squared {
  background-image: url(../flags/1x1/dj.svg);
}
.flag-icon-dk {
  background-image: url(../flags/4x3/dk.svg);
}
.flag-icon-dk.flag-icon-squared {
  background-image: url(../flags/1x1/dk.svg);
}
.flag-icon-dm {
  background-image: url(../flags/4x3/dm.svg);
}
.flag-icon-dm.flag-icon-squared {
  background-image: url(../flags/1x1/dm.svg);
}
.flag-icon-do {
  background-image: url(../flags/4x3/do.svg);
}
.flag-icon-do.flag-icon-squared {
  background-image: url(../flags/1x1/do.svg);
}
.flag-icon-dz {
  background-image: url(../flags/4x3/dz.svg);
}
.flag-icon-dz.flag-icon-squared {
  background-image: url(../flags/1x1/dz.svg);
}
.flag-icon-ec {
  background-image: url(../flags/4x3/ec.svg);
}
.flag-icon-ec.flag-icon-squared {
  background-image: url(../flags/1x1/ec.svg);
}
.flag-icon-ee {
  background-image: url(../flags/4x3/ee.svg);
}
.flag-icon-ee.flag-icon-squared {
  background-image: url(../flags/1x1/ee.svg);
}
.flag-icon-eg {
  background-image: url(../flags/4x3/eg.svg);
}
.flag-icon-eg.flag-icon-squared {
  background-image: url(../flags/1x1/eg.svg);
}
.flag-icon-eh {
  background-image: url(../flags/4x3/eh.svg);
}
.flag-icon-eh.flag-icon-squared {
  background-image: url(../flags/1x1/eh.svg);
}
.flag-icon-er {
  background-image: url(../flags/4x3/er.svg);
}
.flag-icon-er.flag-icon-squared {
  background-image: url(../flags/1x1/er.svg);
}
.flag-icon-es {
  background-image: url(../flags/4x3/es.svg);
}
.flag-icon-es.flag-icon-squared {
  background-image: url(../flags/1x1/es.svg);
}
.flag-icon-et {
  background-image: url(../flags/4x3/et.svg);
}
.flag-icon-et.flag-icon-squared {
  background-image: url(../flags/1x1/et.svg);
}
.flag-icon-fi {
  background-image: url(../flags/4x3/fi.svg);
}
.flag-icon-fi.flag-icon-squared {
  background-image: url(../flags/1x1/fi.svg);
}
.flag-icon-fj {
  background-image: url(../flags/4x3/fj.svg);
}
.flag-icon-fj.flag-icon-squared {
  background-image: url(../flags/1x1/fj.svg);
}
.flag-icon-fk {
  background-image: url(../flags/4x3/fk.svg);
}
.flag-icon-fk.flag-icon-squared {
  background-image: url(../flags/1x1/fk.svg);
}
.flag-icon-fm {
  background-image: url(../flags/4x3/fm.svg);
}
.flag-icon-fm.flag-icon-squared {
  background-image: url(../flags/1x1/fm.svg);
}
.flag-icon-fo {
  background-image: url(../flags/4x3/fo.svg);
}
.flag-icon-fo.flag-icon-squared {
  background-image: url(../flags/1x1/fo.svg);
}
.flag-icon-fr {
  background-image: url(../flags/4x3/fr.svg);
}
.flag-icon-fr.flag-icon-squared {
  background-image: url(../flags/1x1/fr.svg);
}
.flag-icon-ga {
  background-image: url(../flags/4x3/ga.svg);
}
.flag-icon-ga.flag-icon-squared {
  background-image: url(../flags/1x1/ga.svg);
}
.flag-icon-gb {
  background-image: url(../flags/4x3/gb.svg);
}
.flag-icon-gb.flag-icon-squared {
  background-image: url(../flags/1x1/gb.svg);
}
.flag-icon-gd {
  background-image: url(../flags/4x3/gd.svg);
}
.flag-icon-gd.flag-icon-squared {
  background-image: url(../flags/1x1/gd.svg);
}
.flag-icon-ge {
  background-image: url(../flags/4x3/ge.svg);
}
.flag-icon-ge.flag-icon-squared {
  background-image: url(../flags/1x1/ge.svg);
}
.flag-icon-gf {
  background-image: url(../flags/4x3/gf.svg);
}
.flag-icon-gf.flag-icon-squared {
  background-image: url(../flags/1x1/gf.svg);
}
.flag-icon-gg {
  background-image: url(../flags/4x3/gg.svg);
}
.flag-icon-gg.flag-icon-squared {
  background-image: url(../flags/1x1/gg.svg);
}
.flag-icon-gh {
  background-image: url(../flags/4x3/gh.svg);
}
.flag-icon-gh.flag-icon-squared {
  background-image: url(../flags/1x1/gh.svg);
}
.flag-icon-gi {
  background-image: url(../flags/4x3/gi.svg);
}
.flag-icon-gi.flag-icon-squared {
  background-image: url(../flags/1x1/gi.svg);
}
.flag-icon-gl {
  background-image: url(../flags/4x3/gl.svg);
}
.flag-icon-gl.flag-icon-squared {
  background-image: url(../flags/1x1/gl.svg);
}
.flag-icon-gm {
  background-image: url(../flags/4x3/gm.svg);
}
.flag-icon-gm.flag-icon-squared {
  background-image: url(../flags/1x1/gm.svg);
}
.flag-icon-gn {
  background-image: url(../flags/4x3/gn.svg);
}
.flag-icon-gn.flag-icon-squared {
  background-image: url(../flags/1x1/gn.svg);
}
.flag-icon-gp {
  background-image: url(../flags/4x3/gp.svg);
}
.flag-icon-gp.flag-icon-squared {
  background-image: url(../flags/1x1/gp.svg);
}
.flag-icon-gq {
  background-image: url(../flags/4x3/gq.svg);
}
.flag-icon-gq.flag-icon-squared {
  background-image: url(../flags/1x1/gq.svg);
}
.flag-icon-gr {
  background-image: url(../flags/4x3/gr.svg);
}
.flag-icon-gr.flag-icon-squared {
  background-image: url(../flags/1x1/gr.svg);
}
.flag-icon-gs {
  background-image: url(../flags/4x3/gs.svg);
}
.flag-icon-gs.flag-icon-squared {
  background-image: url(../flags/1x1/gs.svg);
}
.flag-icon-gt {
  background-image: url(../flags/4x3/gt.svg);
}
.flag-icon-gt.flag-icon-squared {
  background-image: url(../flags/1x1/gt.svg);
}
.flag-icon-gu {
  background-image: url(../flags/4x3/gu.svg);
}
.flag-icon-gu.flag-icon-squared {
  background-image: url(../flags/1x1/gu.svg);
}
.flag-icon-gw {
  background-image: url(../flags/4x3/gw.svg);
}
.flag-icon-gw.flag-icon-squared {
  background-image: url(../flags/1x1/gw.svg);
}
.flag-icon-gy {
  background-image: url(../flags/4x3/gy.svg);
}
.flag-icon-gy.flag-icon-squared {
  background-image: url(../flags/1x1/gy.svg);
}
.flag-icon-hk {
  background-image: url(../flags/4x3/hk.svg);
}
.flag-icon-hk.flag-icon-squared {
  background-image: url(../flags/1x1/hk.svg);
}
.flag-icon-hm {
  background-image: url(../flags/4x3/hm.svg);
}
.flag-icon-hm.flag-icon-squared {
  background-image: url(../flags/1x1/hm.svg);
}
.flag-icon-hn {
  background-image: url(../flags/4x3/hn.svg);
}
.flag-icon-hn.flag-icon-squared {
  background-image: url(../flags/1x1/hn.svg);
}
.flag-icon-hr {
  background-image: url(../flags/4x3/hr.svg);
}
.flag-icon-hr.flag-icon-squared {
  background-image: url(../flags/1x1/hr.svg);
}
.flag-icon-ht {
  background-image: url(../flags/4x3/ht.svg);
}
.flag-icon-ht.flag-icon-squared {
  background-image: url(../flags/1x1/ht.svg);
}
.flag-icon-hu {
  background-image: url(../flags/4x3/hu.svg);
}
.flag-icon-hu.flag-icon-squared {
  background-image: url(../flags/1x1/hu.svg);
}
.flag-icon-id {
  background-image: url(../flags/4x3/id.svg);
}
.flag-icon-id.flag-icon-squared {
  background-image: url(../flags/1x1/id.svg);
}
.flag-icon-ie {
  background-image: url(../flags/4x3/ie.svg);
}
.flag-icon-ie.flag-icon-squared {
  background-image: url(../flags/1x1/ie.svg);
}
.flag-icon-il {
  background-image: url(../flags/4x3/il.svg);
}
.flag-icon-il.flag-icon-squared {
  background-image: url(../flags/1x1/il.svg);
}
.flag-icon-im {
  background-image: url(../flags/4x3/im.svg);
}
.flag-icon-im.flag-icon-squared {
  background-image: url(../flags/1x1/im.svg);
}
.flag-icon-in {
  background-image: url(../flags/4x3/in.svg);
}
.flag-icon-in.flag-icon-squared {
  background-image: url(../flags/1x1/in.svg);
}
.flag-icon-io {
  background-image: url(../flags/4x3/io.svg);
}
.flag-icon-io.flag-icon-squared {
  background-image: url(../flags/1x1/io.svg);
}
.flag-icon-iq {
  background-image: url(../flags/4x3/iq.svg);
}
.flag-icon-iq.flag-icon-squared {
  background-image: url(../flags/1x1/iq.svg);
}
.flag-icon-ir {
  background-image: url(../flags/4x3/ir.svg);
}
.flag-icon-ir.flag-icon-squared {
  background-image: url(../flags/1x1/ir.svg);
}
.flag-icon-is {
  background-image: url(../flags/4x3/is.svg);
}
.flag-icon-is.flag-icon-squared {
  background-image: url(../flags/1x1/is.svg);
}
.flag-icon-it {
  background-image: url(../flags/4x3/it.svg);
}
.flag-icon-it.flag-icon-squared {
  background-image: url(../flags/1x1/it.svg);
}
.flag-icon-je {
  background-image: url(../flags/4x3/je.svg);
}
.flag-icon-je.flag-icon-squared {
  background-image: url(../flags/1x1/je.svg);
}
.flag-icon-jm {
  background-image: url(../flags/4x3/jm.svg);
}
.flag-icon-jm.flag-icon-squared {
  background-image: url(../flags/1x1/jm.svg);
}
.flag-icon-jo {
  background-image: url(../flags/4x3/jo.svg);
}
.flag-icon-jo.flag-icon-squared {
  background-image: url(../flags/1x1/jo.svg);
}
.flag-icon-jp {
  background-image: url(../flags/4x3/jp.svg);
}
.flag-icon-jp.flag-icon-squared {
  background-image: url(../flags/1x1/jp.svg);
}
.flag-icon-ke {
  background-image: url(../flags/4x3/ke.svg);
}
.flag-icon-ke.flag-icon-squared {
  background-image: url(../flags/1x1/ke.svg);
}
.flag-icon-kg {
  background-image: url(../flags/4x3/kg.svg);
}
.flag-icon-kg.flag-icon-squared {
  background-image: url(../flags/1x1/kg.svg);
}
.flag-icon-kh {
  background-image: url(../flags/4x3/kh.svg);
}
.flag-icon-kh.flag-icon-squared {
  background-image: url(../flags/1x1/kh.svg);
}
.flag-icon-ki {
  background-image: url(../flags/4x3/ki.svg);
}
.flag-icon-ki.flag-icon-squared {
  background-image: url(../flags/1x1/ki.svg);
}
.flag-icon-km {
  background-image: url(../flags/4x3/km.svg);
}
.flag-icon-km.flag-icon-squared {
  background-image: url(../flags/1x1/km.svg);
}
.flag-icon-kn {
  background-image: url(../flags/4x3/kn.svg);
}
.flag-icon-kn.flag-icon-squared {
  background-image: url(../flags/1x1/kn.svg);
}
.flag-icon-kp {
  background-image: url(../flags/4x3/kp.svg);
}
.flag-icon-kp.flag-icon-squared {
  background-image: url(../flags/1x1/kp.svg);
}
.flag-icon-kr {
  background-image: url(../flags/4x3/kr.svg);
}
.flag-icon-kr.flag-icon-squared {
  background-image: url(../flags/1x1/kr.svg);
}
.flag-icon-kw {
  background-image: url(../flags/4x3/kw.svg);
}
.flag-icon-kw.flag-icon-squared {
  background-image: url(../flags/1x1/kw.svg);
}
.flag-icon-ky {
  background-image: url(../flags/4x3/ky.svg);
}
.flag-icon-ky.flag-icon-squared {
  background-image: url(../flags/1x1/ky.svg);
}
.flag-icon-kz {
  background-image: url(../flags/4x3/kz.svg);
}
.flag-icon-kz.flag-icon-squared {
  background-image: url(../flags/1x1/kz.svg);
}
.flag-icon-la {
  background-image: url(../flags/4x3/la.svg);
}
.flag-icon-la.flag-icon-squared {
  background-image: url(../flags/1x1/la.svg);
}
.flag-icon-lb {
  background-image: url(../flags/4x3/lb.svg);
}
.flag-icon-lb.flag-icon-squared {
  background-image: url(../flags/1x1/lb.svg);
}
.flag-icon-lc {
  background-image: url(../flags/4x3/lc.svg);
}
.flag-icon-lc.flag-icon-squared {
  background-image: url(../flags/1x1/lc.svg);
}
.flag-icon-li {
  background-image: url(../flags/4x3/li.svg);
}
.flag-icon-li.flag-icon-squared {
  background-image: url(../flags/1x1/li.svg);
}
.flag-icon-lk {
  background-image: url(../flags/4x3/lk.svg);
}
.flag-icon-lk.flag-icon-squared {
  background-image: url(../flags/1x1/lk.svg);
}
.flag-icon-lr {
  background-image: url(../flags/4x3/lr.svg);
}
.flag-icon-lr.flag-icon-squared {
  background-image: url(../flags/1x1/lr.svg);
}
.flag-icon-ls {
  background-image: url(../flags/4x3/ls.svg);
}
.flag-icon-ls.flag-icon-squared {
  background-image: url(../flags/1x1/ls.svg);
}
.flag-icon-lt {
  background-image: url(../flags/4x3/lt.svg);
}
.flag-icon-lt.flag-icon-squared {
  background-image: url(../flags/1x1/lt.svg);
}
.flag-icon-lu {
  background-image: url(../flags/4x3/lu.svg);
}
.flag-icon-lu.flag-icon-squared {
  background-image: url(../flags/1x1/lu.svg);
}
.flag-icon-lv {
  background-image: url(../flags/4x3/lv.svg);
}
.flag-icon-lv.flag-icon-squared {
  background-image: url(../flags/1x1/lv.svg);
}
.flag-icon-ly {
  background-image: url(../flags/4x3/ly.svg);
}
.flag-icon-ly.flag-icon-squared {
  background-image: url(../flags/1x1/ly.svg);
}
.flag-icon-ma {
  background-image: url(../flags/4x3/ma.svg);
}
.flag-icon-ma.flag-icon-squared {
  background-image: url(../flags/1x1/ma.svg);
}
.flag-icon-mc {
  background-image: url(../flags/4x3/mc.svg);
}
.flag-icon-mc.flag-icon-squared {
  background-image: url(../flags/1x1/mc.svg);
}
.flag-icon-md {
  background-image: url(../flags/4x3/md.svg);
}
.flag-icon-md.flag-icon-squared {
  background-image: url(../flags/1x1/md.svg);
}
.flag-icon-me {
  background-image: url(../flags/4x3/me.svg);
}
.flag-icon-me.flag-icon-squared {
  background-image: url(../flags/1x1/me.svg);
}
.flag-icon-mf {
  background-image: url(../flags/4x3/mf.svg);
}
.flag-icon-mf.flag-icon-squared {
  background-image: url(../flags/1x1/mf.svg);
}
.flag-icon-mg {
  background-image: url(../flags/4x3/mg.svg);
}
.flag-icon-mg.flag-icon-squared {
  background-image: url(../flags/1x1/mg.svg);
}
.flag-icon-mh {
  background-image: url(../flags/4x3/mh.svg);
}
.flag-icon-mh.flag-icon-squared {
  background-image: url(../flags/1x1/mh.svg);
}
.flag-icon-mk {
  background-image: url(../flags/4x3/mk.svg);
}
.flag-icon-mk.flag-icon-squared {
  background-image: url(../flags/1x1/mk.svg);
}
.flag-icon-ml {
  background-image: url(../flags/4x3/ml.svg);
}
.flag-icon-ml.flag-icon-squared {
  background-image: url(../flags/1x1/ml.svg);
}
.flag-icon-mm {
  background-image: url(../flags/4x3/mm.svg);
}
.flag-icon-mm.flag-icon-squared {
  background-image: url(../flags/1x1/mm.svg);
}
.flag-icon-mn {
  background-image: url(../flags/4x3/mn.svg);
}
.flag-icon-mn.flag-icon-squared {
  background-image: url(../flags/1x1/mn.svg);
}
.flag-icon-mo {
  background-image: url(../flags/4x3/mo.svg);
}
.flag-icon-mo.flag-icon-squared {
  background-image: url(../flags/1x1/mo.svg);
}
.flag-icon-mp {
  background-image: url(../flags/4x3/mp.svg);
}
.flag-icon-mp.flag-icon-squared {
  background-image: url(../flags/1x1/mp.svg);
}
.flag-icon-mq {
  background-image: url(../flags/4x3/mq.svg);
}
.flag-icon-mq.flag-icon-squared {
  background-image: url(../flags/1x1/mq.svg);
}
.flag-icon-mr {
  background-image: url(../flags/4x3/mr.svg);
}
.flag-icon-mr.flag-icon-squared {
  background-image: url(../flags/1x1/mr.svg);
}
.flag-icon-ms {
  background-image: url(../flags/4x3/ms.svg);
}
.flag-icon-ms.flag-icon-squared {
  background-image: url(../flags/1x1/ms.svg);
}
.flag-icon-mt {
  background-image: url(../flags/4x3/mt.svg);
}
.flag-icon-mt.flag-icon-squared {
  background-image: url(../flags/1x1/mt.svg);
}
.flag-icon-mu {
  background-image: url(../flags/4x3/mu.svg);
}
.flag-icon-mu.flag-icon-squared {
  background-image: url(../flags/1x1/mu.svg);
}
.flag-icon-mv {
  background-image: url(../flags/4x3/mv.svg);
}
.flag-icon-mv.flag-icon-squared {
  background-image: url(../flags/1x1/mv.svg);
}
.flag-icon-mw {
  background-image: url(../flags/4x3/mw.svg);
}
.flag-icon-mw.flag-icon-squared {
  background-image: url(../flags/1x1/mw.svg);
}
.flag-icon-mx {
  background-image: url(../flags/4x3/mx.svg);
}
.flag-icon-mx.flag-icon-squared {
  background-image: url(../flags/1x1/mx.svg);
}
.flag-icon-my {
  background-image: url(../flags/4x3/my.svg);
}
.flag-icon-my.flag-icon-squared {
  background-image: url(../flags/1x1/my.svg);
}
.flag-icon-mz {
  background-image: url(../flags/4x3/mz.svg);
}
.flag-icon-mz.flag-icon-squared {
  background-image: url(../flags/1x1/mz.svg);
}
.flag-icon-na {
  background-image: url(../flags/4x3/na.svg);
}
.flag-icon-na.flag-icon-squared {
  background-image: url(../flags/1x1/na.svg);
}
.flag-icon-nc {
  background-image: url(../flags/4x3/nc.svg);
}
.flag-icon-nc.flag-icon-squared {
  background-image: url(../flags/1x1/nc.svg);
}
.flag-icon-ne {
  background-image: url(../flags/4x3/ne.svg);
}
.flag-icon-ne.flag-icon-squared {
  background-image: url(../flags/1x1/ne.svg);
}
.flag-icon-nf {
  background-image: url(../flags/4x3/nf.svg);
}
.flag-icon-nf.flag-icon-squared {
  background-image: url(../flags/1x1/nf.svg);
}
.flag-icon-ng {
  background-image: url(../flags/4x3/ng.svg);
}
.flag-icon-ng.flag-icon-squared {
  background-image: url(../flags/1x1/ng.svg);
}
.flag-icon-ni {
  background-image: url(../flags/4x3/ni.svg);
}
.flag-icon-ni.flag-icon-squared {
  background-image: url(../flags/1x1/ni.svg);
}
.flag-icon-nl {
  background-image: url(../flags/4x3/nl.svg);
}
.flag-icon-nl.flag-icon-squared {
  background-image: url(../flags/1x1/nl.svg);
}
.flag-icon-no {
  background-image: url(../flags/4x3/no.svg);
}
.flag-icon-no.flag-icon-squared {
  background-image: url(../flags/1x1/no.svg);
}
.flag-icon-np {
  background-image: url(../flags/4x3/np.svg);
}
.flag-icon-np.flag-icon-squared {
  background-image: url(../flags/1x1/np.svg);
}
.flag-icon-nr {
  background-image: url(../flags/4x3/nr.svg);
}
.flag-icon-nr.flag-icon-squared {
  background-image: url(../flags/1x1/nr.svg);
}
.flag-icon-nu {
  background-image: url(../flags/4x3/nu.svg);
}
.flag-icon-nu.flag-icon-squared {
  background-image: url(../flags/1x1/nu.svg);
}
.flag-icon-nz {
  background-image: url(../flags/4x3/nz.svg);
}
.flag-icon-nz.flag-icon-squared {
  background-image: url(../flags/1x1/nz.svg);
}
.flag-icon-om {
  background-image: url(../flags/4x3/om.svg);
}
.flag-icon-om.flag-icon-squared {
  background-image: url(../flags/1x1/om.svg);
}
.flag-icon-pa {
  background-image: url(../flags/4x3/pa.svg);
}
.flag-icon-pa.flag-icon-squared {
  background-image: url(../flags/1x1/pa.svg);
}
.flag-icon-pe {
  background-image: url(../flags/4x3/pe.svg);
}
.flag-icon-pe.flag-icon-squared {
  background-image: url(../flags/1x1/pe.svg);
}
.flag-icon-pf {
  background-image: url(../flags/4x3/pf.svg);
}
.flag-icon-pf.flag-icon-squared {
  background-image: url(../flags/1x1/pf.svg);
}
.flag-icon-pg {
  background-image: url(../flags/4x3/pg.svg);
}
.flag-icon-pg.flag-icon-squared {
  background-image: url(../flags/1x1/pg.svg);
}
.flag-icon-ph {
  background-image: url(../flags/4x3/ph.svg);
}
.flag-icon-ph.flag-icon-squared {
  background-image: url(../flags/1x1/ph.svg);
}
.flag-icon-pk {
  background-image: url(../flags/4x3/pk.svg);
}
.flag-icon-pk.flag-icon-squared {
  background-image: url(../flags/1x1/pk.svg);
}
.flag-icon-pl {
  background-image: url(../flags/4x3/pl.svg);
}
.flag-icon-pl.flag-icon-squared {
  background-image: url(../flags/1x1/pl.svg);
}
.flag-icon-pm {
  background-image: url(../flags/4x3/pm.svg);
}
.flag-icon-pm.flag-icon-squared {
  background-image: url(../flags/1x1/pm.svg);
}
.flag-icon-pn {
  background-image: url(../flags/4x3/pn.svg);
}
.flag-icon-pn.flag-icon-squared {
  background-image: url(../flags/1x1/pn.svg);
}
.flag-icon-pr {
  background-image: url(../flags/4x3/pr.svg);
}
.flag-icon-pr.flag-icon-squared {
  background-image: url(../flags/1x1/pr.svg);
}
.flag-icon-ps {
  background-image: url(../flags/4x3/ps.svg);
}
.flag-icon-ps.flag-icon-squared {
  background-image: url(../flags/1x1/ps.svg);
}
.flag-icon-pt {
  background-image: url(../flags/4x3/pt.svg);
}
.flag-icon-pt.flag-icon-squared {
  background-image: url(../flags/1x1/pt.svg);
}
.flag-icon-pw {
  background-image: url(../flags/4x3/pw.svg);
}
.flag-icon-pw.flag-icon-squared {
  background-image: url(../flags/1x1/pw.svg);
}
.flag-icon-py {
  background-image: url(../flags/4x3/py.svg);
}
.flag-icon-py.flag-icon-squared {
  background-image: url(../flags/1x1/py.svg);
}
.flag-icon-qa {
  background-image: url(../flags/4x3/qa.svg);
}
.flag-icon-qa.flag-icon-squared {
  background-image: url(../flags/1x1/qa.svg);
}
.flag-icon-re {
  background-image: url(../flags/4x3/re.svg);
}
.flag-icon-re.flag-icon-squared {
  background-image: url(../flags/1x1/re.svg);
}
.flag-icon-ro {
  background-image: url(../flags/4x3/ro.svg);
}
.flag-icon-ro.flag-icon-squared {
  background-image: url(../flags/1x1/ro.svg);
}
.flag-icon-rs {
  background-image: url(../flags/4x3/rs.svg);
}
.flag-icon-rs.flag-icon-squared {
  background-image: url(../flags/1x1/rs.svg);
}
.flag-icon-ru {
  background-image: url(../flags/4x3/ru.svg);
}
.flag-icon-ru.flag-icon-squared {
  background-image: url(../flags/1x1/ru.svg);
}
.flag-icon-rw {
  background-image: url(../flags/4x3/rw.svg);
}
.flag-icon-rw.flag-icon-squared {
  background-image: url(../flags/1x1/rw.svg);
}
.flag-icon-sa {
  background-image: url(../flags/4x3/sa.svg);
}
.flag-icon-sa.flag-icon-squared {
  background-image: url(../flags/1x1/sa.svg);
}
.flag-icon-sb {
  background-image: url(../flags/4x3/sb.svg);
}
.flag-icon-sb.flag-icon-squared {
  background-image: url(../flags/1x1/sb.svg);
}
.flag-icon-sc {
  background-image: url(../flags/4x3/sc.svg);
}
.flag-icon-sc.flag-icon-squared {
  background-image: url(../flags/1x1/sc.svg);
}
.flag-icon-sd {
  background-image: url(../flags/4x3/sd.svg);
}
.flag-icon-sd.flag-icon-squared {
  background-image: url(../flags/1x1/sd.svg);
}
.flag-icon-se {
  background-image: url(../flags/4x3/se.svg);
}
.flag-icon-se.flag-icon-squared {
  background-image: url(../flags/1x1/se.svg);
}
.flag-icon-sg {
  background-image: url(../flags/4x3/sg.svg);
}
.flag-icon-sg.flag-icon-squared {
  background-image: url(../flags/1x1/sg.svg);
}
.flag-icon-sh {
  background-image: url(../flags/4x3/sh.svg);
}
.flag-icon-sh.flag-icon-squared {
  background-image: url(../flags/1x1/sh.svg);
}
.flag-icon-si {
  background-image: url(../flags/4x3/si.svg);
}
.flag-icon-si.flag-icon-squared {
  background-image: url(../flags/1x1/si.svg);
}
.flag-icon-sj {
  background-image: url(../flags/4x3/sj.svg);
}
.flag-icon-sj.flag-icon-squared {
  background-image: url(../flags/1x1/sj.svg);
}
.flag-icon-sk {
  background-image: url(../flags/4x3/sk.svg);
}
.flag-icon-sk.flag-icon-squared {
  background-image: url(../flags/1x1/sk.svg);
}
.flag-icon-sl {
  background-image: url(../flags/4x3/sl.svg);
}
.flag-icon-sl.flag-icon-squared {
  background-image: url(../flags/1x1/sl.svg);
}
.flag-icon-sm {
  background-image: url(../flags/4x3/sm.svg);
}
.flag-icon-sm.flag-icon-squared {
  background-image: url(../flags/1x1/sm.svg);
}
.flag-icon-sn {
  background-image: url(../flags/4x3/sn.svg);
}
.flag-icon-sn.flag-icon-squared {
  background-image: url(../flags/1x1/sn.svg);
}
.flag-icon-so {
  background-image: url(../flags/4x3/so.svg);
}
.flag-icon-so.flag-icon-squared {
  background-image: url(../flags/1x1/so.svg);
}
.flag-icon-sr {
  background-image: url(../flags/4x3/sr.svg);
}
.flag-icon-sr.flag-icon-squared {
  background-image: url(../flags/1x1/sr.svg);
}
.flag-icon-ss {
  background-image: url(../flags/4x3/ss.svg);
}
.flag-icon-ss.flag-icon-squared {
  background-image: url(../flags/1x1/ss.svg);
}
.flag-icon-st {
  background-image: url(../flags/4x3/st.svg);
}
.flag-icon-st.flag-icon-squared {
  background-image: url(../flags/1x1/st.svg);
}
.flag-icon-sv {
  background-image: url(../flags/4x3/sv.svg);
}
.flag-icon-sv.flag-icon-squared {
  background-image: url(../flags/1x1/sv.svg);
}
.flag-icon-sx {
  background-image: url(../flags/4x3/sx.svg);
}
.flag-icon-sx.flag-icon-squared {
  background-image: url(../flags/1x1/sx.svg);
}
.flag-icon-sy {
  background-image: url(../flags/4x3/sy.svg);
}
.flag-icon-sy.flag-icon-squared {
  background-image: url(../flags/1x1/sy.svg);
}
.flag-icon-sz {
  background-image: url(../flags/4x3/sz.svg);
}
.flag-icon-sz.flag-icon-squared {
  background-image: url(../flags/1x1/sz.svg);
}
.flag-icon-tc {
  background-image: url(../flags/4x3/tc.svg);
}
.flag-icon-tc.flag-icon-squared {
  background-image: url(../flags/1x1/tc.svg);
}
.flag-icon-td {
  background-image: url(../flags/4x3/td.svg);
}
.flag-icon-td.flag-icon-squared {
  background-image: url(../flags/1x1/td.svg);
}
.flag-icon-tf {
  background-image: url(../flags/4x3/tf.svg);
}
.flag-icon-tf.flag-icon-squared {
  background-image: url(../flags/1x1/tf.svg);
}
.flag-icon-tg {
  background-image: url(../flags/4x3/tg.svg);
}
.flag-icon-tg.flag-icon-squared {
  background-image: url(../flags/1x1/tg.svg);
}
.flag-icon-th {
  background-image: url(../flags/4x3/th.svg);
}
.flag-icon-th.flag-icon-squared {
  background-image: url(../flags/1x1/th.svg);
}
.flag-icon-tj {
  background-image: url(../flags/4x3/tj.svg);
}
.flag-icon-tj.flag-icon-squared {
  background-image: url(../flags/1x1/tj.svg);
}
.flag-icon-tk {
  background-image: url(../flags/4x3/tk.svg);
}
.flag-icon-tk.flag-icon-squared {
  background-image: url(../flags/1x1/tk.svg);
}
.flag-icon-tl {
  background-image: url(../flags/4x3/tl.svg);
}
.flag-icon-tl.flag-icon-squared {
  background-image: url(../flags/1x1/tl.svg);
}
.flag-icon-tm {
  background-image: url(../flags/4x3/tm.svg);
}
.flag-icon-tm.flag-icon-squared {
  background-image: url(../flags/1x1/tm.svg);
}
.flag-icon-tn {
  background-image: url(../flags/4x3/tn.svg);
}
.flag-icon-tn.flag-icon-squared {
  background-image: url(../flags/1x1/tn.svg);
}
.flag-icon-to {
  background-image: url(../flags/4x3/to.svg);
}
.flag-icon-to.flag-icon-squared {
  background-image: url(../flags/1x1/to.svg);
}
.flag-icon-tr {
  background-image: url(../flags/4x3/tr.svg);
}
.flag-icon-tr.flag-icon-squared {
  background-image: url(../flags/1x1/tr.svg);
}
.flag-icon-tt {
  background-image: url(../flags/4x3/tt.svg);
}
.flag-icon-tt.flag-icon-squared {
  background-image: url(../flags/1x1/tt.svg);
}
.flag-icon-tv {
  background-image: url(../flags/4x3/tv.svg);
}
.flag-icon-tv.flag-icon-squared {
  background-image: url(../flags/1x1/tv.svg);
}
.flag-icon-tw {
  background-image: url(../flags/4x3/tw.svg);
}
.flag-icon-tw.flag-icon-squared {
  background-image: url(../flags/1x1/tw.svg);
}
.flag-icon-tz {
  background-image: url(../flags/4x3/tz.svg);
}
.flag-icon-tz.flag-icon-squared {
  background-image: url(../flags/1x1/tz.svg);
}
.flag-icon-ua {
  background-image: url(../flags/4x3/ua.svg);
}
.flag-icon-ua.flag-icon-squared {
  background-image: url(../flags/1x1/ua.svg);
}
.flag-icon-ug {
  background-image: url(../flags/4x3/ug.svg);
}
.flag-icon-ug.flag-icon-squared {
  background-image: url(../flags/1x1/ug.svg);
}
.flag-icon-um {
  background-image: url(../flags/4x3/um.svg);
}
.flag-icon-um.flag-icon-squared {
  background-image: url(../flags/1x1/um.svg);
}
.flag-icon-us {
  background-image: url(../flags/4x3/us.svg);
}
.flag-icon-us.flag-icon-squared {
  background-image: url(../flags/1x1/us.svg);
}
.flag-icon-uy {
  background-image: url(../flags/4x3/uy.svg);
}
.flag-icon-uy.flag-icon-squared {
  background-image: url(../flags/1x1/uy.svg);
}
.flag-icon-uz {
  background-image: url(../flags/4x3/uz.svg);
}
.flag-icon-uz.flag-icon-squared {
  background-image: url(../flags/1x1/uz.svg);
}
.flag-icon-va {
  background-image: url(../flags/4x3/va.svg);
}
.flag-icon-va.flag-icon-squared {
  background-image: url(../flags/1x1/va.svg);
}
.flag-icon-vc {
  background-image: url(../flags/4x3/vc.svg);
}
.flag-icon-vc.flag-icon-squared {
  background-image: url(../flags/1x1/vc.svg);
}
.flag-icon-ve {
  background-image: url(../flags/4x3/ve.svg);
}
.flag-icon-ve.flag-icon-squared {
  background-image: url(../flags/1x1/ve.svg);
}
.flag-icon-vg {
  background-image: url(../flags/4x3/vg.svg);
}
.flag-icon-vg.flag-icon-squared {
  background-image: url(../flags/1x1/vg.svg);
}
.flag-icon-vi {
  background-image: url(../flags/4x3/vi.svg);
}
.flag-icon-vi.flag-icon-squared {
  background-image: url(../flags/1x1/vi.svg);
}
.flag-icon-vn {
  background-image: url(../flags/4x3/vn.svg);
}
.flag-icon-vn.flag-icon-squared {
  background-image: url(../flags/1x1/vn.svg);
}
.flag-icon-vu {
  background-image: url(../flags/4x3/vu.svg);
}
.flag-icon-vu.flag-icon-squared {
  background-image: url(../flags/1x1/vu.svg);
}
.flag-icon-wf {
  background-image: url(../flags/4x3/wf.svg);
}
.flag-icon-wf.flag-icon-squared {
  background-image: url(../flags/1x1/wf.svg);
}
.flag-icon-ws {
  background-image: url(../flags/4x3/ws.svg);
}
.flag-icon-ws.flag-icon-squared {
  background-image: url(../flags/1x1/ws.svg);
}
.flag-icon-ye {
  background-image: url(../flags/4x3/ye.svg);
}
.flag-icon-ye.flag-icon-squared {
  background-image: url(../flags/1x1/ye.svg);
}
.flag-icon-yt {
  background-image: url(../flags/4x3/yt.svg);
}
.flag-icon-yt.flag-icon-squared {
  background-image: url(../flags/1x1/yt.svg);
}
.flag-icon-za {
  background-image: url(../flags/4x3/za.svg);
}
.flag-icon-za.flag-icon-squared {
  background-image: url(../flags/1x1/za.svg);
}
.flag-icon-zm {
  background-image: url(../flags/4x3/zm.svg);
}
.flag-icon-zm.flag-icon-squared {
  background-image: url(../flags/1x1/zm.svg);
}
.flag-icon-zw {
  background-image: url(../flags/4x3/zw.svg);
}
.flag-icon-zw.flag-icon-squared {
  background-image: url(../flags/1x1/zw.svg);
}
.flag-icon-ac {
  background-image: url(../flags/4x3/ac.svg);
}
.flag-icon-ac.flag-icon-squared {
  background-image: url(../flags/1x1/ac.svg);
}
.flag-icon-cp {
  background-image: url(../flags/4x3/cp.svg);
}
.flag-icon-cp.flag-icon-squared {
  background-image: url(../flags/1x1/cp.svg);
}
.flag-icon-dg {
  background-image: url(../flags/4x3/dg.svg);
}
.flag-icon-dg.flag-icon-squared {
  background-image: url(../flags/1x1/dg.svg);
}
.flag-icon-ea {
  background-image: url(../flags/4x3/ea.svg);
}
.flag-icon-ea.flag-icon-squared {
  background-image: url(../flags/1x1/ea.svg);
}
.flag-icon-es-ct {
  background-image: url(../flags/4x3/es-ct.svg);
}
.flag-icon-es-ct.flag-icon-squared {
  background-image: url(../flags/1x1/es-ct.svg);
}
.flag-icon-es-ga {
  background-image: url(../flags/4x3/es-ga.svg);
}
.flag-icon-es-ga.flag-icon-squared {
  background-image: url(../flags/1x1/es-ga.svg);
}
.flag-icon-eu {
  background-image: url(../flags/4x3/eu.svg);
}
.flag-icon-eu.flag-icon-squared {
  background-image: url(../flags/1x1/eu.svg);
}
.flag-icon-gb-eng {
  background-image: url(../flags/4x3/gb-eng.svg);
}
.flag-icon-gb-eng.flag-icon-squared {
  background-image: url(../flags/1x1/gb-eng.svg);
}
.flag-icon-gb-nir {
  background-image: url(../flags/4x3/gb-nir.svg);
}
.flag-icon-gb-nir.flag-icon-squared {
  background-image: url(../flags/1x1/gb-nir.svg);
}
.flag-icon-gb-sct {
  background-image: url(../flags/4x3/gb-sct.svg);
}
.flag-icon-gb-sct.flag-icon-squared {
  background-image: url(../flags/1x1/gb-sct.svg);
}
.flag-icon-gb-wls {
  background-image: url(../flags/4x3/gb-wls.svg);
}
.flag-icon-gb-wls.flag-icon-squared {
  background-image: url(../flags/1x1/gb-wls.svg);
}
.flag-icon-ic {
  background-image: url(../flags/4x3/ic.svg);
}
.flag-icon-ic.flag-icon-squared {
  background-image: url(../flags/1x1/ic.svg);
}
.flag-icon-ta {
  background-image: url(../flags/4x3/ta.svg);
}
.flag-icon-ta.flag-icon-squared {
  background-image: url(../flags/1x1/ta.svg);
}
.flag-icon-un {
  background-image: url(../flags/4x3/un.svg);
}
.flag-icon-un.flag-icon-squared {
  background-image: url(../flags/1x1/un.svg);
}
.flag-icon-xk {
  background-image: url(../flags/4x3/xk.svg);
}
.flag-icon-xk.flag-icon-squared {
  background-image: url(../flags/1x1/xk.svg);
}
.flag-icon-xx {
  background-image: url(../flags/4x3/xx.svg);
}
.flag-icon-xx.flag-icon-squared {
  background-image: url(../flags/1x1/xx.svg);
}

/* /vendor/normalize-css/normalize.css */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* /vendor/bootstrap/dist/css/bootstrap.min.css */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-asterisk:before{content:"\002a"}.glyphicon-plus:before{content:"\002b"}.glyphicon-eur:before,.glyphicon-euro:before{content:"\20ac"}.glyphicon-minus:before{content:"\2212"}.glyphicon-cloud:before{content:"\2601"}.glyphicon-envelope:before{content:"\2709"}.glyphicon-pencil:before{content:"\270f"}.glyphicon-glass:before{content:"\e001"}.glyphicon-music:before{content:"\e002"}.glyphicon-search:before{content:"\e003"}.glyphicon-heart:before{content:"\e005"}.glyphicon-star:before{content:"\e006"}.glyphicon-star-empty:before{content:"\e007"}.glyphicon-user:before{content:"\e008"}.glyphicon-film:before{content:"\e009"}.glyphicon-th-large:before{content:"\e010"}.glyphicon-th:before{content:"\e011"}.glyphicon-th-list:before{content:"\e012"}.glyphicon-ok:before{content:"\e013"}.glyphicon-remove:before{content:"\e014"}.glyphicon-zoom-in:before{content:"\e015"}.glyphicon-zoom-out:before{content:"\e016"}.glyphicon-off:before{content:"\e017"}.glyphicon-signal:before{content:"\e018"}.glyphicon-cog:before{content:"\e019"}.glyphicon-trash:before{content:"\e020"}.glyphicon-home:before{content:"\e021"}.glyphicon-file:before{content:"\e022"}.glyphicon-time:before{content:"\e023"}.glyphicon-road:before{content:"\e024"}.glyphicon-download-alt:before{content:"\e025"}.glyphicon-download:before{content:"\e026"}.glyphicon-upload:before{content:"\e027"}.glyphicon-inbox:before{content:"\e028"}.glyphicon-play-circle:before{content:"\e029"}.glyphicon-repeat:before{content:"\e030"}.glyphicon-refresh:before{content:"\e031"}.glyphicon-list-alt:before{content:"\e032"}.glyphicon-lock:before{content:"\e033"}.glyphicon-flag:before{content:"\e034"}.glyphicon-headphones:before{content:"\e035"}.glyphicon-volume-off:before{content:"\e036"}.glyphicon-volume-down:before{content:"\e037"}.glyphicon-volume-up:before{content:"\e038"}.glyphicon-qrcode:before{content:"\e039"}.glyphicon-barcode:before{content:"\e040"}.glyphicon-tag:before{content:"\e041"}.glyphicon-tags:before{content:"\e042"}.glyphicon-book:before{content:"\e043"}.glyphicon-bookmark:before{content:"\e044"}.glyphicon-print:before{content:"\e045"}.glyphicon-camera:before{content:"\e046"}.glyphicon-font:before{content:"\e047"}.glyphicon-bold:before{content:"\e048"}.glyphicon-italic:before{content:"\e049"}.glyphicon-text-height:before{content:"\e050"}.glyphicon-text-width:before{content:"\e051"}.glyphicon-align-left:before{content:"\e052"}.glyphicon-align-center:before{content:"\e053"}.glyphicon-align-right:before{content:"\e054"}.glyphicon-align-justify:before{content:"\e055"}.glyphicon-list:before{content:"\e056"}.glyphicon-indent-left:before{content:"\e057"}.glyphicon-indent-right:before{content:"\e058"}.glyphicon-facetime-video:before{content:"\e059"}.glyphicon-picture:before{content:"\e060"}.glyphicon-map-marker:before{content:"\e062"}.glyphicon-adjust:before{content:"\e063"}.glyphicon-tint:before{content:"\e064"}.glyphicon-edit:before{content:"\e065"}.glyphicon-share:before{content:"\e066"}.glyphicon-check:before{content:"\e067"}.glyphicon-move:before{content:"\e068"}.glyphicon-step-backward:before{content:"\e069"}.glyphicon-fast-backward:before{content:"\e070"}.glyphicon-backward:before{content:"\e071"}.glyphicon-play:before{content:"\e072"}.glyphicon-pause:before{content:"\e073"}.glyphicon-stop:before{content:"\e074"}.glyphicon-forward:before{content:"\e075"}.glyphicon-fast-forward:before{content:"\e076"}.glyphicon-step-forward:before{content:"\e077"}.glyphicon-eject:before{content:"\e078"}.glyphicon-chevron-left:before{content:"\e079"}.glyphicon-chevron-right:before{content:"\e080"}.glyphicon-plus-sign:before{content:"\e081"}.glyphicon-minus-sign:before{content:"\e082"}.glyphicon-remove-sign:before{content:"\e083"}.glyphicon-ok-sign:before{content:"\e084"}.glyphicon-question-sign:before{content:"\e085"}.glyphicon-info-sign:before{content:"\e086"}.glyphicon-screenshot:before{content:"\e087"}.glyphicon-remove-circle:before{content:"\e088"}.glyphicon-ok-circle:before{content:"\e089"}.glyphicon-ban-circle:before{content:"\e090"}.glyphicon-arrow-left:before{content:"\e091"}.glyphicon-arrow-right:before{content:"\e092"}.glyphicon-arrow-up:before{content:"\e093"}.glyphicon-arrow-down:before{content:"\e094"}.glyphicon-share-alt:before{content:"\e095"}.glyphicon-resize-full:before{content:"\e096"}.glyphicon-resize-small:before{content:"\e097"}.glyphicon-exclamation-sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{content:"\e109"}.glyphicon-random:before{content:"\e110"}.glyphicon-comment:before{content:"\e111"}.glyphicon-magnet:before{content:"\e112"}.glyphicon-chevron-up:before{content:"\e113"}.glyphicon-chevron-down:before{content:"\e114"}.glyphicon-retweet:before{content:"\e115"}.glyphicon-shopping-cart:before{content:"\e116"}.glyphicon-folder-close:before{content:"\e117"}.glyphicon-folder-open:before{content:"\e118"}.glyphicon-resize-vertical:before{content:"\e119"}.glyphicon-resize-horizontal:before{content:"\e120"}.glyphicon-hdd:before{content:"\e121"}.glyphicon-bullhorn:before{content:"\e122"}.glyphicon-bell:before{content:"\e123"}.glyphicon-certificate:before{content:"\e124"}.glyphicon-thumbs-up:before{content:"\e125"}.glyphicon-thumbs-down:before{content:"\e126"}.glyphicon-hand-right:before{content:"\e127"}.glyphicon-hand-left:before{content:"\e128"}.glyphicon-hand-up:before{content:"\e129"}.glyphicon-hand-down:before{content:"\e130"}.glyphicon-circle-arrow-right:before{content:"\e131"}.glyphicon-circle-arrow-left:before{content:"\e132"}.glyphicon-circle-arrow-up:before{content:"\e133"}.glyphicon-circle-arrow-down:before{content:"\e134"}.glyphicon-globe:before{content:"\e135"}.glyphicon-wrench:before{content:"\e136"}.glyphicon-tasks:before{content:"\e137"}.glyphicon-filter:before{content:"\e138"}.glyphicon-briefcase:before{content:"\e139"}.glyphicon-fullscreen:before{content:"\e140"}.glyphicon-dashboard:before{content:"\e141"}.glyphicon-paperclip:before{content:"\e142"}.glyphicon-heart-empty:before{content:"\e143"}.glyphicon-link:before{content:"\e144"}.glyphicon-phone:before{content:"\e145"}.glyphicon-pushpin:before{content:"\e146"}.glyphicon-usd:before{content:"\e148"}.glyphicon-gbp:before{content:"\e149"}.glyphicon-sort:before{content:"\e150"}.glyphicon-sort-by-alphabet:before{content:"\e151"}.glyphicon-sort-by-alphabet-alt:before{content:"\e152"}.glyphicon-sort-by-order:before{content:"\e153"}.glyphicon-sort-by-order-alt:before{content:"\e154"}.glyphicon-sort-by-attributes:before{content:"\e155"}.glyphicon-sort-by-attributes-alt:before{content:"\e156"}.glyphicon-unchecked:before{content:"\e157"}.glyphicon-expand:before{content:"\e158"}.glyphicon-collapse-down:before{content:"\e159"}.glyphicon-collapse-up:before{content:"\e160"}.glyphicon-log-in:before{content:"\e161"}.glyphicon-flash:before{content:"\e162"}.glyphicon-log-out:before{content:"\e163"}.glyphicon-new-window:before{content:"\e164"}.glyphicon-record:before{content:"\e165"}.glyphicon-save:before{content:"\e166"}.glyphicon-open:before{content:"\e167"}.glyphicon-saved:before{content:"\e168"}.glyphicon-import:before{content:"\e169"}.glyphicon-export:before{content:"\e170"}.glyphicon-send:before{content:"\e171"}.glyphicon-floppy-disk:before{content:"\e172"}.glyphicon-floppy-saved:before{content:"\e173"}.glyphicon-floppy-remove:before{content:"\e174"}.glyphicon-floppy-save:before{content:"\e175"}.glyphicon-floppy-open:before{content:"\e176"}.glyphicon-credit-card:before{content:"\e177"}.glyphicon-transfer:before{content:"\e178"}.glyphicon-cutlery:before{content:"\e179"}.glyphicon-header:before{content:"\e180"}.glyphicon-compressed:before{content:"\e181"}.glyphicon-earphone:before{content:"\e182"}.glyphicon-phone-alt:before{content:"\e183"}.glyphicon-tower:before{content:"\e184"}.glyphicon-stats:before{content:"\e185"}.glyphicon-sd-video:before{content:"\e186"}.glyphicon-hd-video:before{content:"\e187"}.glyphicon-subtitles:before{content:"\e188"}.glyphicon-sound-stereo:before{content:"\e189"}.glyphicon-sound-dolby:before{content:"\e190"}.glyphicon-sound-5-1:before{content:"\e191"}.glyphicon-sound-6-1:before{content:"\e192"}.glyphicon-sound-7-1:before{content:"\e193"}.glyphicon-copyright-mark:before{content:"\e194"}.glyphicon-registration-mark:before{content:"\e195"}.glyphicon-cloud-download:before{content:"\e197"}.glyphicon-cloud-upload:before{content:"\e198"}.glyphicon-tree-conifer:before{content:"\e199"}.glyphicon-tree-deciduous:before{content:"\e200"}.glyphicon-cd:before{content:"\e201"}.glyphicon-save-file:before{content:"\e202"}.glyphicon-open-file:before{content:"\e203"}.glyphicon-level-up:before{content:"\e204"}.glyphicon-copy:before{content:"\e205"}.glyphicon-paste:before{content:"\e206"}.glyphicon-alert:before{content:"\e209"}.glyphicon-equalizer:before{content:"\e210"}.glyphicon-king:before{content:"\e211"}.glyphicon-queen:before{content:"\e212"}.glyphicon-pawn:before{content:"\e213"}.glyphicon-bishop:before{content:"\e214"}.glyphicon-knight:before{content:"\e215"}.glyphicon-baby-formula:before{content:"\e216"}.glyphicon-tent:before{content:"\26fa"}.glyphicon-blackboard:before{content:"\e218"}.glyphicon-bed:before{content:"\e219"}.glyphicon-apple:before{content:"\f8ff"}.glyphicon-erase:before{content:"\e221"}.glyphicon-hourglass:before{content:"\231b"}.glyphicon-lamp:before{content:"\e223"}.glyphicon-duplicate:before{content:"\e224"}.glyphicon-piggy-bank:before{content:"\e225"}.glyphicon-scissors:before{content:"\e226"}.glyphicon-bitcoin:before{content:"\e227"}.glyphicon-btc:before{content:"\e227"}.glyphicon-xbt:before{content:"\e227"}.glyphicon-yen:before{content:"\00a5"}.glyphicon-jpy:before{content:"\00a5"}.glyphicon-ruble:before{content:"\20bd"}.glyphicon-rub:before{content:"\20bd"}.glyphicon-scale:before{content:"\e230"}.glyphicon-ice-lolly:before{content:"\e231"}.glyphicon-ice-lolly-tasted:before{content:"\e232"}.glyphicon-education:before{content:"\e233"}.glyphicon-option-horizontal:before{content:"\e234"}.glyphicon-option-vertical:before{content:"\e235"}.glyphicon-menu-hamburger:before{content:"\e236"}.glyphicon-modal-window:before{content:"\e237"}.glyphicon-oil:before{content:"\e238"}.glyphicon-grain:before{content:"\e239"}.glyphicon-sunglasses:before{content:"\e240"}.glyphicon-text-size:before{content:"\e241"}.glyphicon-text-color:before{content:"\e242"}.glyphicon-text-background:before{content:"\e243"}.glyphicon-object-align-top:before{content:"\e244"}.glyphicon-object-align-bottom:before{content:"\e245"}.glyphicon-object-align-horizontal:before{content:"\e246"}.glyphicon-object-align-left:before{content:"\e247"}.glyphicon-object-align-vertical:before{content:"\e248"}.glyphicon-object-align-right:before{content:"\e249"}.glyphicon-triangle-right:before{content:"\e250"}.glyphicon-triangle-left:before{content:"\e251"}.glyphicon-triangle-bottom:before{content:"\e252"}.glyphicon-triangle-top:before{content:"\e253"}.glyphicon-console:before{content:"\e254"}.glyphicon-superscript:before{content:"\e255"}.glyphicon-subscript:before{content:"\e256"}.glyphicon-menu-left:before{content:"\e257"}.glyphicon-menu-right:before{content:"\e258"}.glyphicon-menu-down:before{content:"\e259"}.glyphicon-menu-up:before{content:"\e260"}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.carousel-inner>.item>a>img,.carousel-inner>.item>img,.img-responsive,.thumbnail a>img,.thumbnail>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}@media (min-width:768px){.lead{font-size:21px}}.small,small{font-size:85%}.mark,mark{padding:.2em;background-color:#fcf8e3}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-nowrap{white-space:nowrap}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-muted{color:#777}.text-primary{color:#337ab7}a.text-primary:focus,a.text-primary:hover{color:#286090}.text-success{color:#3c763d}a.text-success:focus,a.text-success:hover{color:#2b542c}.text-info{color:#31708f}a.text-info:focus,a.text-info:hover{color:#245269}.text-warning{color:#8a6d3b}a.text-warning:focus,a.text-warning:hover{color:#66512c}.text-danger{color:#a94442}a.text-danger:focus,a.text-danger:hover{color:#843534}.bg-primary{color:#fff;background-color:#337ab7}a.bg-primary:focus,a.bg-primary:hover{background-color:#286090}.bg-success{background-color:#dff0d8}a.bg-success:focus,a.bg-success:hover{background-color:#c1e2b3}.bg-info{background-color:#d9edf7}a.bg-info:focus,a.bg-info:hover{background-color:#afd9ee}.bg-warning{background-color:#fcf8e3}a.bg-warning:focus,a.bg-warning:hover{background-color:#f7ecb5}.bg-danger{background-color:#f2dede}a.bg-danger:focus,a.bg-danger:hover{background-color:#e4b9b9}.page-header{padding-bottom:9px;margin:40px 0 20px;border-bottom:1px solid #eee}ol,ul{margin-top:0;margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;margin-left:-5px;list-style:none}.list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}dl{margin-top:0;margin-bottom:20px}dd,dt{line-height:1.42857143}dt{font-weight:700}dd{margin-left:0}@media (min-width:768px){.dl-horizontal dt{float:left;width:160px;overflow:hidden;clear:left;text-align:right;text-overflow:ellipsis;white-space:nowrap}.dl-horizontal dd{margin-left:180px}}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #777}.initialism{font-size:90%;text-transform:uppercase}blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border-left:5px solid #eee}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child{margin-bottom:0}blockquote .small,blockquote footer,blockquote small{display:block;font-size:80%;line-height:1.42857143;color:#777}blockquote .small:before,blockquote footer:before,blockquote small:before{content:'\2014 \00A0'}.blockquote-reverse,blockquote.pull-right{padding-right:15px;padding-left:0;text-align:right;border-right:5px solid #eee;border-left:0}.blockquote-reverse .small:before,.blockquote-reverse footer:before,.blockquote-reverse small:before,blockquote.pull-right .small:before,blockquote.pull-right footer:before,blockquote.pull-right small:before{content:''}.blockquote-reverse .small:after,.blockquote-reverse footer:after,.blockquote-reverse small:after,blockquote.pull-right .small:after,blockquote.pull-right footer:after,blockquote.pull-right small:after{content:'\00A0 \2014'}address{margin-bottom:20px;font-style:normal;line-height:1.42857143}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Courier New",monospace}code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;border-radius:3px;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.25);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}kbd kbd{padding:0;font-size:100%;font-weight:700;-webkit-box-shadow:none;box-shadow:none}pre{display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;color:#333;word-break:break-all;word-wrap:break-word;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px}pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}table{background-color:transparent}caption{padding-top:8px;padding-bottom:8px;color:#777;text-align:left}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border:1px solid #ddd}.table-bordered>thead>tr>td,.table-bordered>thead>tr>th{border-bottom-width:2px}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}.table-hover>tbody>tr:hover{background-color:#f5f5f5}table col[class*=col-]{position:static;display:table-column;float:none}table td[class*=col-],table th[class*=col-]{position:static;display:table-cell;float:none}.table>tbody>tr.active>td,.table>tbody>tr.active>th,.table>tbody>tr>td.active,.table>tbody>tr>th.active,.table>tfoot>tr.active>td,.table>tfoot>tr.active>th,.table>tfoot>tr>td.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>thead>tr.active>th,.table>thead>tr>td.active,.table>thead>tr>th.active{background-color:#f5f5f5}.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr.active:hover>th,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover{background-color:#e8e8e8}.table>tbody>tr.success>td,.table>tbody>tr.success>th,.table>tbody>tr>td.success,.table>tbody>tr>th.success,.table>tfoot>tr.success>td,.table>tfoot>tr.success>th,.table>tfoot>tr>td.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>thead>tr.success>th,.table>thead>tr>td.success,.table>thead>tr>th.success{background-color:#dff0d8}.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr.success:hover>th,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover{background-color:#d0e9c6}.table>tbody>tr.info>td,.table>tbody>tr.info>th,.table>tbody>tr>td.info,.table>tbody>tr>th.info,.table>tfoot>tr.info>td,.table>tfoot>tr.info>th,.table>tfoot>tr>td.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>thead>tr.info>th,.table>thead>tr>td.info,.table>thead>tr>th.info{background-color:#d9edf7}.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr.info:hover>th,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover{background-color:#c4e3f3}.table>tbody>tr.warning>td,.table>tbody>tr.warning>th,.table>tbody>tr>td.warning,.table>tbody>tr>th.warning,.table>tfoot>tr.warning>td,.table>tfoot>tr.warning>th,.table>tfoot>tr>td.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>thead>tr.warning>th,.table>thead>tr>td.warning,.table>thead>tr>th.warning{background-color:#fcf8e3}.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr.warning:hover>th,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover{background-color:#faf2cc}.table>tbody>tr.danger>td,.table>tbody>tr.danger>th,.table>tbody>tr>td.danger,.table>tbody>tr>th.danger,.table>tfoot>tr.danger>td,.table>tfoot>tr.danger>th,.table>tfoot>tr>td.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>thead>tr.danger>th,.table>thead>tr>td.danger,.table>thead>tr>th.danger{background-color:#f2dede}.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr.danger:hover>th,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover{background-color:#ebcccc}.table-responsive{min-height:.01%;overflow-x:auto}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color:#333;border:0;border-bottom:1px solid #e5e5e5}label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px\9;line-height:normal}input[type=file]{display:block}input[type=range]{display:block;width:100%}select[multiple],select[size]{height:auto}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}output{display:block;padding-top:7px;font-size:14px;line-height:1.42857143;color:#555}.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.focus,.btn-default:focus{color:#333;background-color:#e6e6e6;border-color:#8c8c8c}.btn-default:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}.btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover{color:#333;background-color:#d4d4d4;border-color:#8c8c8c}.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default{background-image:none}.btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#337ab7;border-color:#2e6da4}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40}.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{color:#fff;background-color:#286090;border-color:#204d74}.btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover{color:#fff;background-color:#204d74;border-color:#122b40}.btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#337ab7;border-color:#2e6da4}.btn-primary .badge{color:#337ab7;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#449d44;border-color:#398439}.btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover{color:#fff;background-color:#398439;border-color:#255625}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{color:#fff;background-color:#31b0d5;border-color:#269abc}.btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover{color:#fff;background-color:#269abc;border-color:#1b6d85}.btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info{background-image:none}.btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#ec971f;border-color:#985f0d}.btn-warning:hover{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{color:#fff;background-color:#ec971f;border-color:#d58512}.btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover{color:#fff;background-color:#d58512;border-color:#985f0d}.btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{color:#fff;background-color:#c9302c;border-color:#ac2925}.btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover{color:#fff;background-color:#ac2925;border-color:#761c19}.btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{font-weight:400;color:#337ab7;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#23527c;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#777;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:5px}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1}.collapse{display:none}.collapse.in{display:block}tr.collapse.in{display:table-row}tbody.collapse.in{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-duration:.35s;-o-transition-duration:.35s;transition-duration:.35s;-webkit-transition-property:height,visibility;-o-transition-property:height,visibility;transition-property:height,visibility}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}.dropdown,.dropup{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#333;white-space:nowrap}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{color:#262626;text-decoration:none;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{color:#fff;text-decoration:none;background-color:#337ab7;outline:0}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{color:#777}.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover{text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{right:0;left:auto}.dropdown-menu-left{right:auto;left:0}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{content:"";border-top:0;border-bottom:4px dashed;border-bottom:4px solid\9}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{right:0;left:auto}.navbar-right .dropdown-menu-left{right:auto;left:0}}.btn-group,.btn-group-vertical{position:relative;display:inline-block;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;float:left}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{margin-left:-5px}.btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group{float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{outline:0}.btn-group>.btn+.dropdown-toggle{padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle{padding-right:12px;padding-left:12px}.btn-group.open .dropdown-toggle{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-group.open .dropdown-toggle.btn-link{-webkit-box-shadow:none;box-shadow:none}.btn .caret{margin-left:0}.btn-lg .caret{border-width:5px 5px 0;border-bottom-width:0}.dropup .btn-lg .caret{border-width:0 5px 5px}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group>.btn{float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}.btn-group-justified{display:table;width:100%;table-layout:fixed;border-collapse:separate}.btn-group-justified>.btn,.btn-group-justified>.btn-group{display:table-cell;float:none;width:1%}.btn-group-justified>.btn-group .btn{width:100%}.btn-group-justified>.btn-group .dropdown-menu{left:auto}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:table;border-collapse:separate}.input-group[class*=col-]{float:none;padding-right:0;padding-left:0}.input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.input-group .form-control:focus{z-index:3}.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-group-lg>.form-control,select.input-group-lg>.input-group-addon,select.input-group-lg>.input-group-btn>.btn{height:46px;line-height:46px}select[multiple].input-group-lg>.form-control,select[multiple].input-group-lg>.input-group-addon,select[multiple].input-group-lg>.input-group-btn>.btn,textarea.input-group-lg>.form-control,textarea.input-group-lg>.input-group-addon,textarea.input-group-lg>.input-group-btn>.btn{height:auto}.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-group-sm>.form-control,select.input-group-sm>.input-group-addon,select.input-group-sm>.input-group-btn>.btn{height:30px;line-height:30px}select[multiple].input-group-sm>.form-control,select[multiple].input-group-sm>.input-group-addon,select[multiple].input-group-sm>.input-group-btn>.btn,textarea.input-group-sm>.form-control,textarea.input-group-sm>.input-group-addon,textarea.input-group-sm>.input-group-btn>.btn{height:auto}.input-group .form-control,.input-group-addon,.input-group-btn{display:table-cell}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{width:1%;white-space:nowrap;vertical-align:middle}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc;border-radius:4px}.input-group-addon.input-sm{padding:5px 10px;font-size:12px;border-radius:3px}.input-group-addon.input-lg{padding:10px 16px;font-size:18px;border-radius:6px}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:first-child{border-right:0}.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-addon:last-child{border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:2}.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group{margin-right:-1px}.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group{z-index:2;margin-left:-1px}.nav{padding-left:0;margin-bottom:0;list-style:none}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee}.nav>li.disabled>a{color:#777}.nav>li.disabled>a:focus,.nav>li.disabled>a:hover{color:#777;text-decoration:none;cursor:not-allowed;background-color:transparent}.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{background-color:#eee;border-color:#337ab7}.nav .nav-divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.nav>li>a>img{max-width:none}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{float:left;margin-bottom:-1px}.nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover{border-color:#eee #eee #ddd}.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent}.nav-tabs.nav-justified{width:100%;border-bottom:0}.nav-tabs.nav-justified>li{float:none}.nav-tabs.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-tabs.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-tabs.nav-justified>li{display:table-cell;width:1%}.nav-tabs.nav-justified>li>a{margin-bottom:0}}.nav-tabs.nav-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs.nav-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover{border-bottom-color:#fff}}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover{color:#fff;background-color:#337ab7}.nav-stacked>li{float:none}.nav-stacked>li+li{margin-top:2px;margin-left:0}.nav-justified{width:100%}.nav-justified>li{float:none}.nav-justified>li>a{margin-bottom:5px;text-align:center}.nav-justified>.dropdown .dropdown-menu{top:auto;left:auto}@media (min-width:768px){.nav-justified>li{display:table-cell;width:1%}.nav-justified>li>a{margin-bottom:0}}.nav-tabs-justified{border-bottom:0}.nav-tabs-justified>li>a{margin-right:0;border-radius:4px}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border:1px solid #ddd}@media (min-width:768px){.nav-tabs-justified>li>a{border-bottom:1px solid #ddd;border-radius:4px 4px 0 0}.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover{border-bottom-color:#fff}}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}@media (min-width:768px){.navbar{border-radius:4px}}@media (min-width:768px){.navbar-header{float:left}}.navbar-collapse{padding-right:15px;padding-left:15px;overflow-x:visible;-webkit-overflow-scrolling:touch;border-top:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.navbar-collapse.in{overflow-y:auto}@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;-webkit-box-shadow:none;box-shadow:none}.navbar-collapse.collapse{display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important}.navbar-collapse.in{overflow-y:visible}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse{padding-right:0;padding-left:0}}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:340px}@media (max-device-width:480px) and (orientation:landscape){.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse{max-height:200px}}.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.container-fluid>.navbar-collapse,.container-fluid>.navbar-header,.container>.navbar-collapse,.container>.navbar-header{margin-right:0;margin-left:0}}.navbar-static-top{z-index:1000;border-width:0 0 1px}@media (min-width:768px){.navbar-static-top{border-radius:0}}.navbar-fixed-bottom,.navbar-fixed-top{position:fixed;right:0;left:0;z-index:1030}@media (min-width:768px){.navbar-fixed-bottom,.navbar-fixed-top{border-radius:0}}.navbar-fixed-top{top:0;border-width:0 0 1px}.navbar-fixed-bottom{bottom:0;margin-bottom:0;border-width:1px 0 0}.navbar-brand{float:left;height:50px;padding:15px 15px;font-size:18px;line-height:20px}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-brand>img{display:block}@media (min-width:768px){.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand{margin-left:-15px}}.navbar-toggle{position:relative;float:right;padding:9px 10px;margin-top:8px;margin-right:15px;margin-bottom:8px;background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px}.navbar-toggle:focus{outline:0}.navbar-toggle .icon-bar{display:block;width:22px;height:2px;border-radius:1px}.navbar-toggle .icon-bar+.icon-bar{margin-top:4px}@media (min-width:768px){.navbar-toggle{display:none}}.navbar-nav{margin:7.5px -15px}.navbar-nav>li>a{padding-top:10px;padding-bottom:10px;line-height:20px}@media (max-width:767px){.navbar-nav .open .dropdown-menu{position:static;float:none;width:auto;margin-top:0;background-color:transparent;border:0;-webkit-box-shadow:none;box-shadow:none}.navbar-nav .open .dropdown-menu .dropdown-header,.navbar-nav .open .dropdown-menu>li>a{padding:5px 15px 5px 25px}.navbar-nav .open .dropdown-menu>li>a{line-height:20px}.navbar-nav .open .dropdown-menu>li>a:focus,.navbar-nav .open .dropdown-menu>li>a:hover{background-image:none}}@media (min-width:768px){.navbar-nav{float:left;margin:0}.navbar-nav>li{float:left}.navbar-nav>li>a{padding-top:15px;padding-bottom:15px}}.navbar-form{padding:10px 15px;margin-top:8px;margin-right:-15px;margin-bottom:8px;margin-left:-15px;border-top:1px solid transparent;border-bottom:1px solid transparent;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1)}@media (min-width:768px){.navbar-form .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.navbar-form .form-control{display:inline-block;width:auto;vertical-align:middle}.navbar-form .form-control-static{display:inline-block}.navbar-form .input-group{display:inline-table;vertical-align:middle}.navbar-form .input-group .form-control,.navbar-form .input-group .input-group-addon,.navbar-form .input-group .input-group-btn{width:auto}.navbar-form .input-group>.form-control{width:100%}.navbar-form .control-label{margin-bottom:0;vertical-align:middle}.navbar-form .checkbox,.navbar-form .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.navbar-form .checkbox label,.navbar-form .radio label{padding-left:0}.navbar-form .checkbox input[type=checkbox],.navbar-form .radio input[type=radio]{position:relative;margin-left:0}.navbar-form .has-feedback .form-control-feedback{top:0}}@media (max-width:767px){.navbar-form .form-group{margin-bottom:5px}.navbar-form .form-group:last-child{margin-bottom:0}}@media (min-width:768px){.navbar-form{width:auto;padding-top:0;padding-bottom:0;margin-right:0;margin-left:0;border:0;-webkit-box-shadow:none;box-shadow:none}}.navbar-nav>li>.dropdown-menu{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu{margin-bottom:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}.navbar-btn{margin-top:8px;margin-bottom:8px}.navbar-btn.btn-sm{margin-top:10px;margin-bottom:10px}.navbar-btn.btn-xs{margin-top:14px;margin-bottom:14px}.navbar-text{margin-top:15px;margin-bottom:15px}@media (min-width:768px){.navbar-text{float:left;margin-right:15px;margin-left:15px}}@media (min-width:768px){.navbar-left{float:left!important}.navbar-right{float:right!important;margin-right:-15px}.navbar-right~.navbar-right{margin-right:0}}.navbar-default{background-color:#f8f8f8;border-color:#e7e7e7}.navbar-default .navbar-brand{color:#777}.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover{color:#5e5e5e;background-color:transparent}.navbar-default .navbar-text{color:#777}.navbar-default .navbar-nav>li>a{color:#777}.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav>.disabled>a,.navbar-default .navbar-nav>.disabled>a:focus,.navbar-default .navbar-nav>.disabled>a:hover{color:#ccc;background-color:transparent}.navbar-default .navbar-toggle{border-color:#ddd}.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover{background-color:#ddd}.navbar-default .navbar-toggle .icon-bar{background-color:#888}.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:#e7e7e7}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.open>a:hover{color:#555;background-color:#e7e7e7}@media (max-width:767px){.navbar-default .navbar-nav .open .dropdown-menu>li>a{color:#777}.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{color:#333;background-color:transparent}.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{color:#555;background-color:#e7e7e7}.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#ccc;background-color:transparent}}.navbar-default .navbar-link{color:#777}.navbar-default .navbar-link:hover{color:#333}.navbar-default .btn-link{color:#777}.navbar-default .btn-link:focus,.navbar-default .btn-link:hover{color:#333}.navbar-default .btn-link[disabled]:focus,.navbar-default .btn-link[disabled]:hover,fieldset[disabled] .navbar-default .btn-link:focus,fieldset[disabled] .navbar-default .btn-link:hover{color:#ccc}.navbar-inverse{background-color:#222;border-color:#080808}.navbar-inverse .navbar-brand{color:#9d9d9d}.navbar-inverse .navbar-brand:focus,.navbar-inverse .navbar-brand:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-text{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav>li>a:focus,.navbar-inverse .navbar-nav>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav>.disabled>a,.navbar-inverse .navbar-nav>.disabled>a:focus,.navbar-inverse .navbar-nav>.disabled>a:hover{color:#444;background-color:transparent}.navbar-inverse .navbar-toggle{border-color:#333}.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover{background-color:#333}.navbar-inverse .navbar-toggle .icon-bar{background-color:#fff}.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form{border-color:#101010}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:focus,.navbar-inverse .navbar-nav>.open>a:hover{color:#fff;background-color:#080808}@media (max-width:767px){.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header{border-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu .divider{background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a{color:#9d9d9d}.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{color:#fff;background-color:transparent}.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-color:#080808}.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus,.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover{color:#444;background-color:transparent}}.navbar-inverse .navbar-link{color:#9d9d9d}.navbar-inverse .navbar-link:hover{color:#fff}.navbar-inverse .btn-link{color:#9d9d9d}.navbar-inverse .btn-link:focus,.navbar-inverse .btn-link:hover{color:#fff}.navbar-inverse .btn-link[disabled]:focus,.navbar-inverse .btn-link[disabled]:hover,fieldset[disabled] .navbar-inverse .btn-link:focus,fieldset[disabled] .navbar-inverse .btn-link:hover{color:#444}.breadcrumb{padding:8px 15px;margin-bottom:20px;list-style:none;background-color:#f5f5f5;border-radius:4px}.breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}.breadcrumb>.active{color:#777}.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}.label-default{background-color:#777}.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}.label-primary{background-color:#337ab7}.label-primary[href]:focus,.label-primary[href]:hover{background-color:#286090}.label-success{background-color:#5cb85c}.label-success[href]:focus,.label-success[href]:hover{background-color:#449d44}.label-info{background-color:#5bc0de}.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}.label-warning{background-color:#f0ad4e}.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}.label-danger{background-color:#d9534f}.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#777;border-radius:10px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.btn-group-xs>.btn .badge,.btn-xs .badge{top:0;padding:1px 5px}a.badge:focus,a.badge:hover{color:#fff;text-decoration:none;cursor:pointer}.list-group-item.active>.badge,.nav-pills>.active>a>.badge{color:#337ab7;background-color:#fff}.list-group-item>.badge{float:right}.list-group-item>.badge+.badge{margin-right:5px}.nav-pills>li>a>.badge{margin-left:3px}.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}.jumbotron .h1,.jumbotron h1{color:inherit}.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotron>hr{border-top-color:#d5d5d5}.container .jumbotron,.container-fluid .jumbotron{padding-right:15px;padding-left:15px;border-radius:6px}.jumbotron .container{max-width:100%}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron,.container-fluid .jumbotron{padding-right:60px;padding-left:60px}.jumbotron .h1,.jumbotron h1{font-size:63px}}.thumbnail{display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}.thumbnail a>img,.thumbnail>img{margin-right:auto;margin-left:auto}a.thumbnail.active,a.thumbnail:focus,a.thumbnail:hover{border-color:#337ab7}.thumbnail .caption{padding:9px;color:#333}.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#337ab7;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;-o-transition:width .6s ease;transition:width .6s ease}.progress-bar-striped,.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:40px 40px;background-size:40px 40px}.progress-bar.active,.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;-o-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}.progress-bar-success{background-color:#5cb85c}.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-info{background-color:#5bc0de}.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-warning{background-color:#f0ad4e}.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.progress-bar-danger{background-color:#d9534f}.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.media{margin-top:15px}.media:first-child{margin-top:0}.media,.media-body{overflow:hidden;zoom:1}.media-body{width:10000px}.media-object{display:block}.media-object.img-thumbnail{max-width:none}.media-right,.media>.pull-right{padding-left:10px}.media-left,.media>.pull-left{padding-right:10px}.media-body,.media-left,.media-right{display:table-cell;vertical-align:top}.media-middle{vertical-align:middle}.media-bottom{vertical-align:bottom}.media-heading{margin-top:0;margin-bottom:5px}.media-list{padding-left:0;list-style:none}.list-group{padding-left:0;margin-bottom:20px}.list-group-item{position:relative;display:block;padding:10px 15px;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{border-top-left-radius:4px;border-top-right-radius:4px}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:4px;border-bottom-left-radius:4px}a.list-group-item,button.list-group-item{color:#555}a.list-group-item .list-group-item-heading,button.list-group-item .list-group-item-heading{color:#333}a.list-group-item:focus,a.list-group-item:hover,button.list-group-item:focus,button.list-group-item:hover{color:#555;text-decoration:none;background-color:#f5f5f5}button.list-group-item{width:100%;text-align:left}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{color:#777;cursor:not-allowed;background-color:#eee}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{color:#777}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{z-index:2;color:#fff;background-color:#337ab7;border-color:#337ab7}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading>small{color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{color:#c7ddef}.list-group-item-success{color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{margin-top:0;margin-bottom:5px}.list-group-item-text{margin-bottom:0;line-height:1.3}.panel{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panel-body{padding:15px}.panel-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panel-heading>.dropdown .dropdown-toggle{color:inherit}.panel-title{margin-top:0;margin-bottom:0;font-size:16px;color:inherit}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit}.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.list-group,.panel>.panel-collapse>.list-group{margin-bottom:0}.panel>.list-group .list-group-item,.panel>.panel-collapse>.list-group .list-group-item{border-width:1px 0;border-radius:0}.panel>.list-group:first-child .list-group-item:first-child,.panel>.panel-collapse>.list-group:first-child .list-group-item:first-child{border-top:0;border-top-left-radius:3px;border-top-right-radius:3px}.panel>.list-group:last-child .list-group-item:last-child,.panel>.panel-collapse>.list-group:last-child .list-group-item:last-child{border-bottom:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.panel-heading+.panel-collapse>.list-group .list-group-item:first-child{border-top-left-radius:0;border-top-right-radius:0}.panel-heading+.list-group .list-group-item:first-child{border-top-width:0}.list-group+.panel-footer{border-top-width:0}.panel>.panel-collapse>.table,.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}.panel>.panel-collapse>.table caption,.panel>.table caption,.panel>.table-responsive>.table caption{padding-right:15px;padding-left:15px}.panel>.table-responsive:first-child>.table:first-child,.panel>.table:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child,.panel>.table:first-child>thead:first-child>tr:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:first-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:first-child,.panel>.table:first-child>thead:first-child>tr:first-child td:first-child,.panel>.table:first-child>thead:first-child>tr:first-child th:first-child{border-top-left-radius:3px}.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table-responsive:first-child>.table:first-child>thead:first-child>tr:first-child th:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child td:last-child,.panel>.table:first-child>tbody:first-child>tr:first-child th:last-child,.panel>.table:first-child>thead:first-child>tr:first-child td:last-child,.panel>.table:first-child>thead:first-child>tr:first-child th:last-child{border-top-right-radius:3px}.panel>.table-responsive:last-child>.table:last-child,.panel>.table:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:first-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:first-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:first-child{border-bottom-left-radius:3px}.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table-responsive:last-child>.table:last-child>tfoot:last-child>tr:last-child th:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child td:last-child,.panel>.table:last-child>tbody:last-child>tr:last-child th:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child td:last-child,.panel>.table:last-child>tfoot:last-child>tr:last-child th:last-child{border-bottom-right-radius:3px}.panel>.panel-body+.table,.panel>.panel-body+.table-responsive,.panel>.table+.panel-body,.panel>.table-responsive+.panel-body{border-top:1px solid #ddd}.panel>.table>tbody:first-child>tr:first-child td,.panel>.table>tbody:first-child>tr:first-child th{border-top:0}.panel>.table-bordered,.panel>.table-responsive>.table-bordered{border:0}.panel>.table-bordered>tbody>tr>td:first-child,.panel>.table-bordered>tbody>tr>th:first-child,.panel>.table-bordered>tfoot>tr>td:first-child,.panel>.table-bordered>tfoot>tr>th:first-child,.panel>.table-bordered>thead>tr>td:first-child,.panel>.table-bordered>thead>tr>th:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:first-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:first-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:first-child,.panel>.table-responsive>.table-bordered>thead>tr>td:first-child,.panel>.table-responsive>.table-bordered>thead>tr>th:first-child{border-left:0}.panel>.table-bordered>tbody>tr>td:last-child,.panel>.table-bordered>tbody>tr>th:last-child,.panel>.table-bordered>tfoot>tr>td:last-child,.panel>.table-bordered>tfoot>tr>th:last-child,.panel>.table-bordered>thead>tr>td:last-child,.panel>.table-bordered>thead>tr>th:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>td:last-child,.panel>.table-responsive>.table-bordered>tbody>tr>th:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>td:last-child,.panel>.table-responsive>.table-bordered>tfoot>tr>th:last-child,.panel>.table-responsive>.table-bordered>thead>tr>td:last-child,.panel>.table-responsive>.table-bordered>thead>tr>th:last-child{border-right:0}.panel>.table-bordered>tbody>tr:first-child>td,.panel>.table-bordered>tbody>tr:first-child>th,.panel>.table-bordered>thead>tr:first-child>td,.panel>.table-bordered>thead>tr:first-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:first-child>th,.panel>.table-responsive>.table-bordered>thead>tr:first-child>td,.panel>.table-responsive>.table-bordered>thead>tr:first-child>th{border-bottom:0}.panel>.table-bordered>tbody>tr:last-child>td,.panel>.table-bordered>tbody>tr:last-child>th,.panel>.table-bordered>tfoot>tr:last-child>td,.panel>.table-bordered>tfoot>tr:last-child>th,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>td,.panel>.table-responsive>.table-bordered>tbody>tr:last-child>th,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>td,.panel>.table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom:0}.panel>.table-responsive{margin-bottom:0;border:0}.panel-group{margin-bottom:20px}.panel-group .panel{margin-bottom:0;border-radius:4px}.panel-group .panel+.panel{margin-top:5px}.panel-group .panel-heading{border-bottom:0}.panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #ddd}.panel-group .panel-footer{border-top:0}.panel-group .panel-footer+.panel-collapse .panel-body{border-bottom:1px solid #ddd}.panel-default{border-color:#ddd}.panel-default>.panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panel-default>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ddd}.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}.panel-default>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ddd}.panel-primary{border-color:#337ab7}.panel-primary>.panel-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panel-primary>.panel-heading+.panel-collapse>.panel-body{border-top-color:#337ab7}.panel-primary>.panel-heading .badge{color:#337ab7;background-color:#fff}.panel-primary>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#337ab7}.panel-success{border-color:#d6e9c6}.panel-success>.panel-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panel-success>.panel-heading+.panel-collapse>.panel-body{border-top-color:#d6e9c6}.panel-success>.panel-heading .badge{color:#dff0d8;background-color:#3c763d}.panel-success>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#d6e9c6}.panel-info{border-color:#bce8f1}.panel-info>.panel-heading{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.panel-info>.panel-heading+.panel-collapse>.panel-body{border-top-color:#bce8f1}.panel-info>.panel-heading .badge{color:#d9edf7;background-color:#31708f}.panel-info>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#bce8f1}.panel-warning{border-color:#faebcc}.panel-warning>.panel-heading{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.panel-warning>.panel-heading+.panel-collapse>.panel-body{border-top-color:#faebcc}.panel-warning>.panel-heading .badge{color:#fcf8e3;background-color:#8a6d3b}.panel-warning>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#faebcc}.panel-danger{border-color:#ebccd1}.panel-danger>.panel-heading{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.panel-danger>.panel-heading+.panel-collapse>.panel-body{border-top-color:#ebccd1}.panel-danger>.panel-heading .badge{color:#f2dede;background-color:#a94442}.panel-danger>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#ebccd1}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0}.modal-backdrop.in{filter:alpha(opacity=50);opacity:.5}.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}.modal-footer .btn-group .btn+.btn{margin-left:-1px}.modal-footer .btn-block+.btn-block{margin-left:0}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto}.popover.top{margin-top:-10px}.popover.right{margin-left:10px}.popover.bottom{margin-top:10px}.popover.left{margin-left:-10px}.popover-title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{content:"";border-width:10px}.popover.top>.arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.top>.arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover.right>.arrow{top:50%;left:-11px;margin-top:-11px;border-right-color:#999;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.right>.arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover.bottom>.arrow{top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25)}.popover.bottom>.arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover.left>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.popover.left>.arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner>.item{position:relative;display:none;-webkit-transition:.6s ease-in-out left;-o-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}@media all and (transform-3d),(-webkit-transform-3d){.carousel-inner>.item{-webkit-transition:-webkit-transform .6s ease-in-out;-o-transition:-o-transform .6s ease-in-out;transition:transform .6s ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-inner>.item.active.right,.carousel-inner>.item.next{left:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.carousel-inner>.item.active.left,.carousel-inner>.item.prev{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);background-color:rgba(0,0,0,0);filter:alpha(opacity=50);opacity:.5}.carousel-control.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);background-repeat:repeat-x}.carousel-control.right{right:0;left:auto;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);background-repeat:repeat-x}.carousel-control:focus,.carousel-control:hover{color:#fff;text-decoration:none;filter:alpha(opacity=90);outline:0;opacity:.9}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block;margin-top:-10px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%;margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%;margin-right:-10px}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;font-family:serif;line-height:1}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:#000\9;background-color:rgba(0,0,0,0);border:1px solid #fff;border-radius:10px}.carousel-indicators .active{width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-10px;font-size:30px}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{margin-left:-10px}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{margin-right:-10px}.carousel-caption{right:20%;left:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" "}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both}.center-block{display:block;margin-right:auto;margin-left:auto}.pull-right{float:right!important}.pull-left{float:left!important}.hide{display:none!important}.show{display:block!important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none!important}.affix{position:fixed}@-ms-viewport{width:device-width}.visible-lg,.visible-md,.visible-sm,.visible-xs{display:none!important}.visible-lg-block,.visible-lg-inline,.visible-lg-inline-block,.visible-md-block,.visible-md-inline,.visible-md-inline-block,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block,.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block{display:none!important}@media (max-width:767px){.visible-xs{display:block!important}table.visible-xs{display:table!important}tr.visible-xs{display:table-row!important}td.visible-xs,th.visible-xs{display:table-cell!important}}@media (max-width:767px){.visible-xs-block{display:block!important}}@media (max-width:767px){.visible-xs-inline{display:inline!important}}@media (max-width:767px){.visible-xs-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm{display:block!important}table.visible-sm{display:table!important}tr.visible-sm{display:table-row!important}td.visible-sm,th.visible-sm{display:table-cell!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-block{display:block!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline{display:inline!important}}@media (min-width:768px) and (max-width:991px){.visible-sm-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md{display:block!important}table.visible-md{display:table!important}tr.visible-md{display:table-row!important}td.visible-md,th.visible-md{display:table-cell!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-block{display:block!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline{display:inline!important}}@media (min-width:992px) and (max-width:1199px){.visible-md-inline-block{display:inline-block!important}}@media (min-width:1200px){.visible-lg{display:block!important}table.visible-lg{display:table!important}tr.visible-lg{display:table-row!important}td.visible-lg,th.visible-lg{display:table-cell!important}}@media (min-width:1200px){.visible-lg-block{display:block!important}}@media (min-width:1200px){.visible-lg-inline{display:inline!important}}@media (min-width:1200px){.visible-lg-inline-block{display:inline-block!important}}@media (max-width:767px){.hidden-xs{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-sm{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-md{display:none!important}}@media (min-width:1200px){.hidden-lg{display:none!important}}.visible-print{display:none!important}@media print{.visible-print{display:block!important}table.visible-print{display:table!important}tr.visible-print{display:table-row!important}td.visible-print,th.visible-print{display:table-cell!important}}.visible-print-block{display:none!important}@media print{.visible-print-block{display:block!important}}.visible-print-inline{display:none!important}@media print{.visible-print-inline{display:inline!important}}.visible-print-inline-block{display:none!important}@media print{.visible-print-inline-block{display:inline-block!important}}@media print{.hidden-print{display:none!important}}
/*# sourceMappingURL=bootstrap.min.css.map */
/* /vendor/bootstrap/dist/css/bootstrap-theme.min.css */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.btn-warning.active,.btn-warning:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-danger.disabled,.btn-danger[disabled],.btn-default.disabled,.btn-default[disabled],.btn-info.disabled,.btn-info[disabled],.btn-primary.disabled,.btn-primary[disabled],.btn-success.disabled,.btn-success[disabled],.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-danger,fieldset[disabled] .btn-default,fieldset[disabled] .btn-info,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-warning{-webkit-box-shadow:none;box-shadow:none}.btn-danger .badge,.btn-default .badge,.btn-info .badge,.btn-primary .badge,.btn-success .badge,.btn-warning .badge{text-shadow:none}.btn.active,.btn:active{background-image:none}.btn-default{text-shadow:0 1px 0 #fff;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;border-color:#ccc}.btn-default:focus,.btn-default:hover{background-color:#e0e0e0;background-position:0 -15px}.btn-default.active,.btn-default:active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-o-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));background-image:linear-gradient(to bottom,#337ab7 0,#265a88 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#245580}.btn-primary:focus,.btn-primary:hover{background-color:#265a88;background-position:0 -15px}.btn-primary.active,.btn-primary:active{background-color:#265a88;border-color:#245580}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#265a88;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:focus,.btn-success:hover{background-color:#419641;background-position:0 -15px}.btn-success.active,.btn-success:active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:focus,.btn-info:hover{background-color:#2aabd2;background-position:0 -15px}.btn-info.active,.btn-info:active{background-color:#2aabd2;border-color:#28a4c9}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:focus,.btn-warning:hover{background-color:#eb9316;background-position:0 -15px}.btn-warning.active,.btn-warning:active{background-color:#eb9316;border-color:#e38d13}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a));background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:focus,.btn-danger:hover{background-color:#c12e2a;background-position:0 -15px}.btn-danger.active,.btn-danger:active{background-color:#c12e2a;border-color:#b92c28}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#c12e2a;background-image:none}.img-thumbnail,.thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{background-color:#e8e8e8;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{background-color:#2e6da4;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-o-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f8f8f8));background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-o-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dbdbdb),to(#e2e2e2));background-image:linear-gradient(to bottom,#dbdbdb 0,#e2e2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-o-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f));background-image:linear-gradient(to bottom,#080808 0,#0f0f0f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top{border-radius:0}@media (max-width:767px){.navbar .navbar-nav .open .dropdown-menu>.active>a,.navbar .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);background-repeat:repeat-x;border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);background-repeat:repeat-x;border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#f8efc0));background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);background-repeat:repeat-x;border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5));background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x}.progress-bar{background-image:-webkit-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-o-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#286090));background-image:linear-gradient(to bottom,#337ab7 0,#286090 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);background-repeat:repeat-x}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);background-repeat:repeat-x}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#31b0d5));background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);background-repeat:repeat-x}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#ec971f));background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);background-repeat:repeat-x}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c9302c));background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);background-repeat:repeat-x}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{text-shadow:0 -1px 0 #286090;background-image:-webkit-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2b669a));background-image:linear-gradient(to bottom,#337ab7 0,#2b669a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);background-repeat:repeat-x;border-color:#2b669a}.list-group-item.active .badge,.list-group-item.active:focus .badge,.list-group-item.active:hover .badge{text-shadow:none}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#d0e9c6));background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);background-repeat:repeat-x}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#c4e3f3));background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);background-repeat:repeat-x}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#faf2cc));background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);background-repeat:repeat-x}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-o-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#ebcccc));background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);background-repeat:repeat-x}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x;border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)}
/*# sourceMappingURL=bootstrap-theme.min.css.map */
/* vendor/chosen/chosen.min.css */
/* Chosen v1.3.0 | (c) 2011-2014 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */

.chosen-container{position:relative;display:inline-block;vertical-align:middle;font-size:13px;zoom:1;*display:inline;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chosen-container *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.chosen-container .chosen-drop{position:absolute;top:100%;left:-9999px;z-index:1010;width:100%;border:1px solid #aaa;border-top:0;background:#fff;box-shadow:0 4px 5px rgba(0,0,0,.15)}.chosen-container.chosen-with-drop .chosen-drop{left:0}.chosen-container a{cursor:pointer}.chosen-container-single .chosen-single{position:relative;display:block;overflow:hidden;padding:0 0 0 8px;height:25px;border:1px solid #aaa;border-radius:5px;background-color:#fff;background:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#fff),color-stop(50%,#f6f6f6),color-stop(52%,#eee),color-stop(100%,#f4f4f4));background:-webkit-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-moz-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:-o-linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background:linear-gradient(top,#fff 20%,#f6f6f6 50%,#eee 52%,#f4f4f4 100%);background-clip:padding-box;box-shadow:0 0 3px #fff inset,0 1px 1px rgba(0,0,0,.1);color:#444;text-decoration:none;white-space:nowrap;line-height:24px}.chosen-container-single .chosen-default{color:#999}.chosen-container-single .chosen-single span{display:block;overflow:hidden;margin-right:26px;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single-with-deselect span{margin-right:38px}.chosen-container-single .chosen-single abbr{position:absolute;top:6px;right:26px;display:block;width:12px;height:12px;background:url(chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-single .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single.chosen-disabled .chosen-single abbr:hover{background-position:-42px -10px}.chosen-container-single .chosen-single div{position:absolute;top:0;right:0;display:block;width:18px;height:100%}.chosen-container-single .chosen-single div b{display:block;width:100%;height:100%;background:url(chosen-sprite.png) no-repeat 0 2px}.chosen-container-single .chosen-search{position:relative;z-index:1010;margin:0;padding:3px 4px;white-space:nowrap}.chosen-container-single .chosen-search input[type=text]{margin:1px 0;padding:4px 20px 4px 5px;width:100%;height:auto;outline:0;border:1px solid #aaa;background:#fff url(chosen-sprite.png) no-repeat 100% -20px;background:url(chosen-sprite.png) no-repeat 100% -20px;font-size:1em;font-family:sans-serif;line-height:normal;border-radius:0}.chosen-container-single .chosen-drop{margin-top:-1px;border-radius:0 0 4px 4px;background-clip:padding-box}.chosen-container-single.chosen-container-single-nosearch .chosen-search{position:absolute;left:-9999px}.chosen-container .chosen-results{color:#444;position:relative;overflow-x:hidden;overflow-y:auto;margin:0 4px 4px 0;padding:0 0 0 4px;max-height:240px;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;margin:0;padding:5px 6px;list-style:none;line-height:15px;word-wrap:break-word;-webkit-touch-callout:none}.chosen-container .chosen-results li.active-result{display:list-item;cursor:pointer}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ccc;cursor:default}.chosen-container .chosen-results li.highlighted{background-color:#3875d7;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#3875d7),color-stop(90%,#2a62bc));background-image:-webkit-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-moz-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:-o-linear-gradient(#3875d7 20%,#2a62bc 90%);background-image:linear-gradient(#3875d7 20%,#2a62bc 90%);color:#fff}.chosen-container .chosen-results li.no-results{color:#777;display:list-item;background:#f4f4f4}.chosen-container .chosen-results li.group-result{display:list-item;font-weight:700;cursor:default}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li em{font-style:normal;text-decoration:underline}.chosen-container-multi .chosen-choices{position:relative;overflow:hidden;margin:0;padding:0 5px;width:100%;height:auto!important;height:1%;border:1px solid #aaa;background-color:#fff;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(1%,#eee),color-stop(15%,#fff));background-image:-webkit-linear-gradient(#eee 1%,#fff 15%);background-image:-moz-linear-gradient(#eee 1%,#fff 15%);background-image:-o-linear-gradient(#eee 1%,#fff 15%);background-image:linear-gradient(#eee 1%,#fff 15%);cursor:text}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices li.search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices li.search-field input[type=text]{margin:1px 0;padding:0;height:25px;outline:0;border:0!important;background:transparent!important;box-shadow:none;color:#999;font-size:100%;font-family:sans-serif;line-height:normal;border-radius:0}.chosen-container-multi .chosen-choices li.search-choice{position:relative;margin:3px 5px 3px 0;padding:3px 20px 3px 5px;border:1px solid #aaa;max-width:100%;border-radius:3px;background-color:#eee;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-size:100% 19px;background-repeat:repeat-x;background-clip:padding-box;box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);color:#333;line-height:13px;cursor:default}.chosen-container-multi .chosen-choices li.search-choice span{word-wrap:break-word}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close{position:absolute;top:4px;right:3px;display:block;width:12px;height:12px;background:url(chosen-sprite.png) -42px 1px no-repeat;font-size:1px}.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover{background-position:-42px -10px}.chosen-container-multi .chosen-choices li.search-choice-disabled{padding-right:5px;border:1px solid #ccc;background-color:#e4e4e4;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-o-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);color:#666}.chosen-container-multi .chosen-choices li.search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close{background-position:-42px -10px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:list-item;color:#ccc;cursor:default}.chosen-container-active .chosen-single{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #aaa;-moz-border-radius-bottomright:0;border-bottom-right-radius:0;-moz-border-radius-bottomleft:0;border-bottom-left-radius:0;background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(20%,#eee),color-stop(80%,#fff));background-image:-webkit-linear-gradient(#eee 20%,#fff 80%);background-image:-moz-linear-gradient(#eee 20%,#fff 80%);background-image:-o-linear-gradient(#eee 20%,#fff 80%);background-image:linear-gradient(#eee 20%,#fff 80%);box-shadow:0 1px 0 #fff inset}.chosen-container-active.chosen-with-drop .chosen-single div{border-left:0;background:transparent}.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 2px}.chosen-container-active .chosen-choices{border:1px solid #5897fb;box-shadow:0 0 5px rgba(0,0,0,.3)}.chosen-container-active .chosen-choices li.search-field input[type=text]{color:#222!important}.chosen-disabled{opacity:.5!important;cursor:default}.chosen-disabled .chosen-single{cursor:default}.chosen-disabled .chosen-choices .search-choice .search-choice-close{cursor:default}.chosen-rtl{text-align:right}.chosen-rtl .chosen-single{overflow:visible;padding:0 8px 0 0}.chosen-rtl .chosen-single span{margin-right:0;margin-left:26px;direction:rtl}.chosen-rtl .chosen-single-with-deselect span{margin-left:38px}.chosen-rtl .chosen-single div{right:auto;left:3px}.chosen-rtl .chosen-single abbr{right:auto;left:26px}.chosen-rtl .chosen-choices li{float:right}.chosen-rtl .chosen-choices li.search-field input[type=text]{direction:rtl}.chosen-rtl .chosen-choices li.search-choice{margin:3px 5px 3px 0;padding:3px 5px 3px 19px}.chosen-rtl .chosen-choices li.search-choice .search-choice-close{right:auto;left:4px}.chosen-rtl.chosen-container-single-nosearch .chosen-search,.chosen-rtl .chosen-drop{left:9999px}.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}.chosen-rtl .chosen-results li.group-option{padding-right:15px;padding-left:0}.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:0}.chosen-rtl .chosen-search input[type=text]{padding:4px 5px 4px 20px;background:#fff url(chosen-sprite.png) no-repeat -30px -20px;background:url(chosen-sprite.png) no-repeat -30px -20px;direction:rtl}.chosen-rtl.chosen-container-single .chosen-single div b{background-position:6px 2px}.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b{background-position:-12px 2px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:144dpi){.chosen-rtl .chosen-search input[type=text],.chosen-container-single .chosen-single abbr,.chosen-container-single .chosen-single div b,.chosen-container-single .chosen-search input[type=text],.chosen-container-multi .chosen-choices .search-choice .search-choice-close,.chosen-container .chosen-results-scroll-down span,.chosen-container .chosen-results-scroll-up span{background-image:url(chosen-sprite@2x.png)!important;background-size:52px 37px!important;background-repeat:no-repeat!important}}
/* /vendor/jquery-scrolltabs/css/scrolltabs.css */
/******************* BASIC STYLING **********************/
.scroll_tabs_container {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: left;
  height: 40px;
  margin-bottom: 10px;
}

ul.scroll_tabs_container {
  list-style: none;
}

.scroll_tabs_container div.scroll_tab_inner {
  height: 40px;
}

.scroll_tabs_container div.scroll_tab_inner span, .scroll_tabs_container div.scroll_tab_inner li {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  font-size: 14px;
  background-color: #CCCCCC;
  color: #333333;
  cursor: pointer;
}

.scroll_tabs_container div.scroll_tab_inner li {
  display: -moz-inline-stack;
  display: inline-block;
  *display: inline;
  list-style-type: none;
}

.scroll_tabs_container div.scroll_tab_inner span.scroll_tab_left_finisher {
  padding: 0px;
  width: 0px;
}

.scroll_tabs_container div.scroll_tab_inner span.scroll_tab_right_finisher {
  padding: 0px;
  width: 0px;
}

.scroll_tabs_container .scroll_tab_left_button {
  height: 40px;
  background-color: #CCCCCC;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_container .scroll_tab_left_button::before {
  content: "\25C0";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_container .scroll_tab_left_button_over {
  background-color: #999999;
}

.scroll_tabs_container .scroll_tab_left_button_disabled {
  color: #AAAAAA;
  background-color: #CCCCCC;
}

.scroll_tabs_container .scroll_tab_right_button {
  height: 40px;
  background-color: #CCCCCC;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_container .scroll_tab_right_button::before {
  content: "\25B6";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_container .scroll_tab_right_button_over {
  background-color: #999999;
}

.scroll_tabs_container .scroll_tab_right_button_disabled{
  color: #AAAAAA;
  background-color: #CCCCCC;
}

/****************** LIGHT THEME **************************/
.scroll_tabs_theme_light {
  height: 42px;
}

.scroll_tabs_theme_light div.scroll_tab_inner {
  height: 42px;
}

.scroll_tabs_theme_light div.scroll_tab_inner span, .scroll_tabs_theme_light div.scroll_tab_inner li {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  font-size: 14px;
  background-color: #CCCCCC;
  border-left: 1px solid #999999;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  color: #333333;
  cursor: pointer;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_first, .scroll_tabs_theme_light div.scroll_tab_inner li.scroll_tab_first {
  border-left: 0px;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_left_finisher {
  padding: 0px;
  width: 10px;
  background-color: #CCCCCC;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_right_finisher {
  padding: 0px;
  width: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #CCCCCC;
  border-left: 0px;
  border-right: 1px solid #999999;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_over, .scroll_tabs_theme_light div.scroll_tab_inner li.scroll_tab_over {
  background-color: #999999;
}

/*.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_first_over {
  background-color: #999999;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_left_finisher_over {
  background-color: #999999;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_right_finisher_over {
  background-color: #999999;
}*/

/*.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_left_finisher_selected {
  background-color: #AAAAAA;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_right_finisher_selected {
  background-color: #AAAAAA;
}*/


.scroll_tabs_theme_light .scroll_tab_left_button {
  height: 42px;
  background-color: #CCCCCC;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #999999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_theme_light .scroll_tab_left_button::before {
  content: "\25C0";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_theme_light .scroll_tab_left_button_over {
  background-color: #999999;
}

.scroll_tabs_theme_light .scroll_tab_left_button_disabled {
  color: #AAAAAA;
  background-color: #CCCCCC;
}

.scroll_tabs_theme_light .scroll_tab_right_button {
  height: 42px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #CCCCCC;
  border: 1px solid #999999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_theme_light .scroll_tab_right_button::before {
  content: "\25B6";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_theme_light .scroll_tab_right_button_over {
  background-color: #999999;
}

.scroll_tabs_theme_light .scroll_tab_right_button_disabled{
  color: #AAAAAA;
  background-color: #CCCCCC;
}

.scroll_tabs_theme_light div.scroll_tab_inner span.tab_selected, .scroll_tabs_theme_light div.scroll_tab_inner li.tab_selected {
  background-color: #AAAAAA;
}

/*.scroll_tabs_theme_light div.scroll_tab_inner span.scroll_tab_first_selected {
  background-color: #AAAAAA;
}*/

/****************** DARK THEME **************************/
.scroll_tabs_theme_dark {
  height: 42px;
}

.scroll_tabs_theme_dark div.scroll_tab_inner {
  height: 42px;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span, .scroll_tabs_theme_dark div.scroll_tab_inner li {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 40px;
  font-size: 14px;
  background-color: #333333;
  border-left: 1px solid #222222;
  border-top: 1px solid #222222;
  border-bottom: 1px solid #222222;
  color: #FFFFFF;
  cursor: pointer;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span.scroll_tab_first, .scroll_tabs_theme_dark div.scroll_tab_inner li.scroll_tab_first {
  border-left: 0px;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span.scroll_tab_left_finisher {
  padding: 0px;
  width: 10px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span.scroll_tab_right_finisher {
  padding: 0px;
  width: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0px;
  border-right: 1px solid #222222;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span.scroll_tab_over, .scroll_tabs_theme_dark div.scroll_tab_inner li.scroll_tab_over {
  background-color: #555555;
}

.scroll_tabs_theme_dark .scroll_tab_left_button {
  height: 42px;
  background-color: #333333;
  color: #FFFFFF;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border: 1px solid #222222;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_theme_dark .scroll_tab_left_button::before {
  content: "\25C0";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_theme_dark .scroll_tab_left_button_over {
  background-color: #666666;
}

.scroll_tabs_theme_dark .scroll_tab_left_button_disabled {
  color: #444444;
  background-color: #333333;
}

.scroll_tabs_theme_dark .scroll_tab_right_button {
  height: 42px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #333333;
  border: 1px solid #222222;
  color: #FFFFFF;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.scroll_tabs_theme_dark .scroll_tab_right_button::before {
  content: "\25B6";
  line-height: 40px;
  padding-left: 5px;
}

.scroll_tabs_theme_dark .scroll_tab_right_button_over {
  background-color: #666666;
}

.scroll_tabs_theme_dark .scroll_tab_right_button_disabled{
  color: #444444;
  background-color: #333333;
}

.scroll_tabs_theme_dark div.scroll_tab_inner span.tab_selected, .scroll_tabs_theme_dark div.scroll_tab_inner li.tab_selected {
  background-color: #666666;
}

/* /vendor/animate.css/animate.min.css */
@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2013 Daniel Eden
*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0,0,1,45deg);-ms-transform:rotate(0,0,1,45deg);transform:rotate(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}
/* /vendor/colorbrewer/colorbrewer.css */
/* This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/). */
.YlGn .q0-3{fill:rgb(247,252,185)}
.YlGn .q1-3{fill:rgb(173,221,142)}
.YlGn .q2-3{fill:rgb(49,163,84)}
.YlGn .q0-4{fill:rgb(255,255,204)}
.YlGn .q1-4{fill:rgb(194,230,153)}
.YlGn .q2-4{fill:rgb(120,198,121)}
.YlGn .q3-4{fill:rgb(35,132,67)}
.YlGn .q0-5{fill:rgb(255,255,204)}
.YlGn .q1-5{fill:rgb(194,230,153)}
.YlGn .q2-5{fill:rgb(120,198,121)}
.YlGn .q3-5{fill:rgb(49,163,84)}
.YlGn .q4-5{fill:rgb(0,104,55)}
.YlGn .q0-6{fill:rgb(255,255,204)}
.YlGn .q1-6{fill:rgb(217,240,163)}
.YlGn .q2-6{fill:rgb(173,221,142)}
.YlGn .q3-6{fill:rgb(120,198,121)}
.YlGn .q4-6{fill:rgb(49,163,84)}
.YlGn .q5-6{fill:rgb(0,104,55)}
.YlGn .q0-7{fill:rgb(255,255,204)}
.YlGn .q1-7{fill:rgb(217,240,163)}
.YlGn .q2-7{fill:rgb(173,221,142)}
.YlGn .q3-7{fill:rgb(120,198,121)}
.YlGn .q4-7{fill:rgb(65,171,93)}
.YlGn .q5-7{fill:rgb(35,132,67)}
.YlGn .q6-7{fill:rgb(0,90,50)}
.YlGn .q0-8{fill:rgb(255,255,229)}
.YlGn .q1-8{fill:rgb(247,252,185)}
.YlGn .q2-8{fill:rgb(217,240,163)}
.YlGn .q3-8{fill:rgb(173,221,142)}
.YlGn .q4-8{fill:rgb(120,198,121)}
.YlGn .q5-8{fill:rgb(65,171,93)}
.YlGn .q6-8{fill:rgb(35,132,67)}
.YlGn .q7-8{fill:rgb(0,90,50)}
.YlGn .q0-9{fill:rgb(255,255,229)}
.YlGn .q1-9{fill:rgb(247,252,185)}
.YlGn .q2-9{fill:rgb(217,240,163)}
.YlGn .q3-9{fill:rgb(173,221,142)}
.YlGn .q4-9{fill:rgb(120,198,121)}
.YlGn .q5-9{fill:rgb(65,171,93)}
.YlGn .q6-9{fill:rgb(35,132,67)}
.YlGn .q7-9{fill:rgb(0,104,55)}
.YlGn .q8-9{fill:rgb(0,69,41)}
.YlGnBu .q0-3{fill:rgb(237,248,177)}
.YlGnBu .q1-3{fill:rgb(127,205,187)}
.YlGnBu .q2-3{fill:rgb(44,127,184)}
.YlGnBu .q0-4{fill:rgb(255,255,204)}
.YlGnBu .q1-4{fill:rgb(161,218,180)}
.YlGnBu .q2-4{fill:rgb(65,182,196)}
.YlGnBu .q3-4{fill:rgb(34,94,168)}
.YlGnBu .q0-5{fill:rgb(255,255,204)}
.YlGnBu .q1-5{fill:rgb(161,218,180)}
.YlGnBu .q2-5{fill:rgb(65,182,196)}
.YlGnBu .q3-5{fill:rgb(44,127,184)}
.YlGnBu .q4-5{fill:rgb(37,52,148)}
.YlGnBu .q0-6{fill:rgb(255,255,204)}
.YlGnBu .q1-6{fill:rgb(199,233,180)}
.YlGnBu .q2-6{fill:rgb(127,205,187)}
.YlGnBu .q3-6{fill:rgb(65,182,196)}
.YlGnBu .q4-6{fill:rgb(44,127,184)}
.YlGnBu .q5-6{fill:rgb(37,52,148)}
.YlGnBu .q0-7{fill:rgb(255,255,204)}
.YlGnBu .q1-7{fill:rgb(199,233,180)}
.YlGnBu .q2-7{fill:rgb(127,205,187)}
.YlGnBu .q3-7{fill:rgb(65,182,196)}
.YlGnBu .q4-7{fill:rgb(29,145,192)}
.YlGnBu .q5-7{fill:rgb(34,94,168)}
.YlGnBu .q6-7{fill:rgb(12,44,132)}
.YlGnBu .q0-8{fill:rgb(255,255,217)}
.YlGnBu .q1-8{fill:rgb(237,248,177)}
.YlGnBu .q2-8{fill:rgb(199,233,180)}
.YlGnBu .q3-8{fill:rgb(127,205,187)}
.YlGnBu .q4-8{fill:rgb(65,182,196)}
.YlGnBu .q5-8{fill:rgb(29,145,192)}
.YlGnBu .q6-8{fill:rgb(34,94,168)}
.YlGnBu .q7-8{fill:rgb(12,44,132)}
.YlGnBu .q0-9{fill:rgb(255,255,217)}
.YlGnBu .q1-9{fill:rgb(237,248,177)}
.YlGnBu .q2-9{fill:rgb(199,233,180)}
.YlGnBu .q3-9{fill:rgb(127,205,187)}
.YlGnBu .q4-9{fill:rgb(65,182,196)}
.YlGnBu .q5-9{fill:rgb(29,145,192)}
.YlGnBu .q6-9{fill:rgb(34,94,168)}
.YlGnBu .q7-9{fill:rgb(37,52,148)}
.YlGnBu .q8-9{fill:rgb(8,29,88)}
.GnBu .q0-3{fill:rgb(224,243,219)}
.GnBu .q1-3{fill:rgb(168,221,181)}
.GnBu .q2-3{fill:rgb(67,162,202)}
.GnBu .q0-4{fill:rgb(240,249,232)}
.GnBu .q1-4{fill:rgb(186,228,188)}
.GnBu .q2-4{fill:rgb(123,204,196)}
.GnBu .q3-4{fill:rgb(43,140,190)}
.GnBu .q0-5{fill:rgb(240,249,232)}
.GnBu .q1-5{fill:rgb(186,228,188)}
.GnBu .q2-5{fill:rgb(123,204,196)}
.GnBu .q3-5{fill:rgb(67,162,202)}
.GnBu .q4-5{fill:rgb(8,104,172)}
.GnBu .q0-6{fill:rgb(240,249,232)}
.GnBu .q1-6{fill:rgb(204,235,197)}
.GnBu .q2-6{fill:rgb(168,221,181)}
.GnBu .q3-6{fill:rgb(123,204,196)}
.GnBu .q4-6{fill:rgb(67,162,202)}
.GnBu .q5-6{fill:rgb(8,104,172)}
.GnBu .q0-7{fill:rgb(240,249,232)}
.GnBu .q1-7{fill:rgb(204,235,197)}
.GnBu .q2-7{fill:rgb(168,221,181)}
.GnBu .q3-7{fill:rgb(123,204,196)}
.GnBu .q4-7{fill:rgb(78,179,211)}
.GnBu .q5-7{fill:rgb(43,140,190)}
.GnBu .q6-7{fill:rgb(8,88,158)}
.GnBu .q0-8{fill:rgb(247,252,240)}
.GnBu .q1-8{fill:rgb(224,243,219)}
.GnBu .q2-8{fill:rgb(204,235,197)}
.GnBu .q3-8{fill:rgb(168,221,181)}
.GnBu .q4-8{fill:rgb(123,204,196)}
.GnBu .q5-8{fill:rgb(78,179,211)}
.GnBu .q6-8{fill:rgb(43,140,190)}
.GnBu .q7-8{fill:rgb(8,88,158)}
.GnBu .q0-9{fill:rgb(247,252,240)}
.GnBu .q1-9{fill:rgb(224,243,219)}
.GnBu .q2-9{fill:rgb(204,235,197)}
.GnBu .q3-9{fill:rgb(168,221,181)}
.GnBu .q4-9{fill:rgb(123,204,196)}
.GnBu .q5-9{fill:rgb(78,179,211)}
.GnBu .q6-9{fill:rgb(43,140,190)}
.GnBu .q7-9{fill:rgb(8,104,172)}
.GnBu .q8-9{fill:rgb(8,64,129)}
.BuGn .q0-3{fill:rgb(229,245,249)}
.BuGn .q1-3{fill:rgb(153,216,201)}
.BuGn .q2-3{fill:rgb(44,162,95)}
.BuGn .q0-4{fill:rgb(237,248,251)}
.BuGn .q1-4{fill:rgb(178,226,226)}
.BuGn .q2-4{fill:rgb(102,194,164)}
.BuGn .q3-4{fill:rgb(35,139,69)}
.BuGn .q0-5{fill:rgb(237,248,251)}
.BuGn .q1-5{fill:rgb(178,226,226)}
.BuGn .q2-5{fill:rgb(102,194,164)}
.BuGn .q3-5{fill:rgb(44,162,95)}
.BuGn .q4-5{fill:rgb(0,109,44)}
.BuGn .q0-6{fill:rgb(237,248,251)}
.BuGn .q1-6{fill:rgb(204,236,230)}
.BuGn .q2-6{fill:rgb(153,216,201)}
.BuGn .q3-6{fill:rgb(102,194,164)}
.BuGn .q4-6{fill:rgb(44,162,95)}
.BuGn .q5-6{fill:rgb(0,109,44)}
.BuGn .q0-7{fill:rgb(237,248,251)}
.BuGn .q1-7{fill:rgb(204,236,230)}
.BuGn .q2-7{fill:rgb(153,216,201)}
.BuGn .q3-7{fill:rgb(102,194,164)}
.BuGn .q4-7{fill:rgb(65,174,118)}
.BuGn .q5-7{fill:rgb(35,139,69)}
.BuGn .q6-7{fill:rgb(0,88,36)}
.BuGn .q0-8{fill:rgb(247,252,253)}
.BuGn .q1-8{fill:rgb(229,245,249)}
.BuGn .q2-8{fill:rgb(204,236,230)}
.BuGn .q3-8{fill:rgb(153,216,201)}
.BuGn .q4-8{fill:rgb(102,194,164)}
.BuGn .q5-8{fill:rgb(65,174,118)}
.BuGn .q6-8{fill:rgb(35,139,69)}
.BuGn .q7-8{fill:rgb(0,88,36)}
.BuGn .q0-9{fill:rgb(247,252,253)}
.BuGn .q1-9{fill:rgb(229,245,249)}
.BuGn .q2-9{fill:rgb(204,236,230)}
.BuGn .q3-9{fill:rgb(153,216,201)}
.BuGn .q4-9{fill:rgb(102,194,164)}
.BuGn .q5-9{fill:rgb(65,174,118)}
.BuGn .q6-9{fill:rgb(35,139,69)}
.BuGn .q7-9{fill:rgb(0,109,44)}
.BuGn .q8-9{fill:rgb(0,68,27)}
.PuBuGn .q0-3{fill:rgb(236,226,240)}
.PuBuGn .q1-3{fill:rgb(166,189,219)}
.PuBuGn .q2-3{fill:rgb(28,144,153)}
.PuBuGn .q0-4{fill:rgb(246,239,247)}
.PuBuGn .q1-4{fill:rgb(189,201,225)}
.PuBuGn .q2-4{fill:rgb(103,169,207)}
.PuBuGn .q3-4{fill:rgb(2,129,138)}
.PuBuGn .q0-5{fill:rgb(246,239,247)}
.PuBuGn .q1-5{fill:rgb(189,201,225)}
.PuBuGn .q2-5{fill:rgb(103,169,207)}
.PuBuGn .q3-5{fill:rgb(28,144,153)}
.PuBuGn .q4-5{fill:rgb(1,108,89)}
.PuBuGn .q0-6{fill:rgb(246,239,247)}
.PuBuGn .q1-6{fill:rgb(208,209,230)}
.PuBuGn .q2-6{fill:rgb(166,189,219)}
.PuBuGn .q3-6{fill:rgb(103,169,207)}
.PuBuGn .q4-6{fill:rgb(28,144,153)}
.PuBuGn .q5-6{fill:rgb(1,108,89)}
.PuBuGn .q0-7{fill:rgb(246,239,247)}
.PuBuGn .q1-7{fill:rgb(208,209,230)}
.PuBuGn .q2-7{fill:rgb(166,189,219)}
.PuBuGn .q3-7{fill:rgb(103,169,207)}
.PuBuGn .q4-7{fill:rgb(54,144,192)}
.PuBuGn .q5-7{fill:rgb(2,129,138)}
.PuBuGn .q6-7{fill:rgb(1,100,80)}
.PuBuGn .q0-8{fill:rgb(255,247,251)}
.PuBuGn .q1-8{fill:rgb(236,226,240)}
.PuBuGn .q2-8{fill:rgb(208,209,230)}
.PuBuGn .q3-8{fill:rgb(166,189,219)}
.PuBuGn .q4-8{fill:rgb(103,169,207)}
.PuBuGn .q5-8{fill:rgb(54,144,192)}
.PuBuGn .q6-8{fill:rgb(2,129,138)}
.PuBuGn .q7-8{fill:rgb(1,100,80)}
.PuBuGn .q0-9{fill:rgb(255,247,251)}
.PuBuGn .q1-9{fill:rgb(236,226,240)}
.PuBuGn .q2-9{fill:rgb(208,209,230)}
.PuBuGn .q3-9{fill:rgb(166,189,219)}
.PuBuGn .q4-9{fill:rgb(103,169,207)}
.PuBuGn .q5-9{fill:rgb(54,144,192)}
.PuBuGn .q6-9{fill:rgb(2,129,138)}
.PuBuGn .q7-9{fill:rgb(1,108,89)}
.PuBuGn .q8-9{fill:rgb(1,70,54)}
.PuBu .q0-3{fill:rgb(236,231,242)}
.PuBu .q1-3{fill:rgb(166,189,219)}
.PuBu .q2-3{fill:rgb(43,140,190)}
.PuBu .q0-4{fill:rgb(241,238,246)}
.PuBu .q1-4{fill:rgb(189,201,225)}
.PuBu .q2-4{fill:rgb(116,169,207)}
.PuBu .q3-4{fill:rgb(5,112,176)}
.PuBu .q0-5{fill:rgb(241,238,246)}
.PuBu .q1-5{fill:rgb(189,201,225)}
.PuBu .q2-5{fill:rgb(116,169,207)}
.PuBu .q3-5{fill:rgb(43,140,190)}
.PuBu .q4-5{fill:rgb(4,90,141)}
.PuBu .q0-6{fill:rgb(241,238,246)}
.PuBu .q1-6{fill:rgb(208,209,230)}
.PuBu .q2-6{fill:rgb(166,189,219)}
.PuBu .q3-6{fill:rgb(116,169,207)}
.PuBu .q4-6{fill:rgb(43,140,190)}
.PuBu .q5-6{fill:rgb(4,90,141)}
.PuBu .q0-7{fill:rgb(241,238,246)}
.PuBu .q1-7{fill:rgb(208,209,230)}
.PuBu .q2-7{fill:rgb(166,189,219)}
.PuBu .q3-7{fill:rgb(116,169,207)}
.PuBu .q4-7{fill:rgb(54,144,192)}
.PuBu .q5-7{fill:rgb(5,112,176)}
.PuBu .q6-7{fill:rgb(3,78,123)}
.PuBu .q0-8{fill:rgb(255,247,251)}
.PuBu .q1-8{fill:rgb(236,231,242)}
.PuBu .q2-8{fill:rgb(208,209,230)}
.PuBu .q3-8{fill:rgb(166,189,219)}
.PuBu .q4-8{fill:rgb(116,169,207)}
.PuBu .q5-8{fill:rgb(54,144,192)}
.PuBu .q6-8{fill:rgb(5,112,176)}
.PuBu .q7-8{fill:rgb(3,78,123)}
.PuBu .q0-9{fill:rgb(255,247,251)}
.PuBu .q1-9{fill:rgb(236,231,242)}
.PuBu .q2-9{fill:rgb(208,209,230)}
.PuBu .q3-9{fill:rgb(166,189,219)}
.PuBu .q4-9{fill:rgb(116,169,207)}
.PuBu .q5-9{fill:rgb(54,144,192)}
.PuBu .q6-9{fill:rgb(5,112,176)}
.PuBu .q7-9{fill:rgb(4,90,141)}
.PuBu .q8-9{fill:rgb(2,56,88)}
.BuPu .q0-3{fill:rgb(224,236,244)}
.BuPu .q1-3{fill:rgb(158,188,218)}
.BuPu .q2-3{fill:rgb(136,86,167)}
.BuPu .q0-4{fill:rgb(237,248,251)}
.BuPu .q1-4{fill:rgb(179,205,227)}
.BuPu .q2-4{fill:rgb(140,150,198)}
.BuPu .q3-4{fill:rgb(136,65,157)}
.BuPu .q0-5{fill:rgb(237,248,251)}
.BuPu .q1-5{fill:rgb(179,205,227)}
.BuPu .q2-5{fill:rgb(140,150,198)}
.BuPu .q3-5{fill:rgb(136,86,167)}
.BuPu .q4-5{fill:rgb(129,15,124)}
.BuPu .q0-6{fill:rgb(237,248,251)}
.BuPu .q1-6{fill:rgb(191,211,230)}
.BuPu .q2-6{fill:rgb(158,188,218)}
.BuPu .q3-6{fill:rgb(140,150,198)}
.BuPu .q4-6{fill:rgb(136,86,167)}
.BuPu .q5-6{fill:rgb(129,15,124)}
.BuPu .q0-7{fill:rgb(237,248,251)}
.BuPu .q1-7{fill:rgb(191,211,230)}
.BuPu .q2-7{fill:rgb(158,188,218)}
.BuPu .q3-7{fill:rgb(140,150,198)}
.BuPu .q4-7{fill:rgb(140,107,177)}
.BuPu .q5-7{fill:rgb(136,65,157)}
.BuPu .q6-7{fill:rgb(110,1,107)}
.BuPu .q0-8{fill:rgb(247,252,253)}
.BuPu .q1-8{fill:rgb(224,236,244)}
.BuPu .q2-8{fill:rgb(191,211,230)}
.BuPu .q3-8{fill:rgb(158,188,218)}
.BuPu .q4-8{fill:rgb(140,150,198)}
.BuPu .q5-8{fill:rgb(140,107,177)}
.BuPu .q6-8{fill:rgb(136,65,157)}
.BuPu .q7-8{fill:rgb(110,1,107)}
.BuPu .q0-9{fill:rgb(247,252,253)}
.BuPu .q1-9{fill:rgb(224,236,244)}
.BuPu .q2-9{fill:rgb(191,211,230)}
.BuPu .q3-9{fill:rgb(158,188,218)}
.BuPu .q4-9{fill:rgb(140,150,198)}
.BuPu .q5-9{fill:rgb(140,107,177)}
.BuPu .q6-9{fill:rgb(136,65,157)}
.BuPu .q7-9{fill:rgb(129,15,124)}
.BuPu .q8-9{fill:rgb(77,0,75)}
.RdPu .q0-3{fill:rgb(253,224,221)}
.RdPu .q1-3{fill:rgb(250,159,181)}
.RdPu .q2-3{fill:rgb(197,27,138)}
.RdPu .q0-4{fill:rgb(254,235,226)}
.RdPu .q1-4{fill:rgb(251,180,185)}
.RdPu .q2-4{fill:rgb(247,104,161)}
.RdPu .q3-4{fill:rgb(174,1,126)}
.RdPu .q0-5{fill:rgb(254,235,226)}
.RdPu .q1-5{fill:rgb(251,180,185)}
.RdPu .q2-5{fill:rgb(247,104,161)}
.RdPu .q3-5{fill:rgb(197,27,138)}
.RdPu .q4-5{fill:rgb(122,1,119)}
.RdPu .q0-6{fill:rgb(254,235,226)}
.RdPu .q1-6{fill:rgb(252,197,192)}
.RdPu .q2-6{fill:rgb(250,159,181)}
.RdPu .q3-6{fill:rgb(247,104,161)}
.RdPu .q4-6{fill:rgb(197,27,138)}
.RdPu .q5-6{fill:rgb(122,1,119)}
.RdPu .q0-7{fill:rgb(254,235,226)}
.RdPu .q1-7{fill:rgb(252,197,192)}
.RdPu .q2-7{fill:rgb(250,159,181)}
.RdPu .q3-7{fill:rgb(247,104,161)}
.RdPu .q4-7{fill:rgb(221,52,151)}
.RdPu .q5-7{fill:rgb(174,1,126)}
.RdPu .q6-7{fill:rgb(122,1,119)}
.RdPu .q0-8{fill:rgb(255,247,243)}
.RdPu .q1-8{fill:rgb(253,224,221)}
.RdPu .q2-8{fill:rgb(252,197,192)}
.RdPu .q3-8{fill:rgb(250,159,181)}
.RdPu .q4-8{fill:rgb(247,104,161)}
.RdPu .q5-8{fill:rgb(221,52,151)}
.RdPu .q6-8{fill:rgb(174,1,126)}
.RdPu .q7-8{fill:rgb(122,1,119)}
.RdPu .q0-9{fill:rgb(255,247,243)}
.RdPu .q1-9{fill:rgb(253,224,221)}
.RdPu .q2-9{fill:rgb(252,197,192)}
.RdPu .q3-9{fill:rgb(250,159,181)}
.RdPu .q4-9{fill:rgb(247,104,161)}
.RdPu .q5-9{fill:rgb(221,52,151)}
.RdPu .q6-9{fill:rgb(174,1,126)}
.RdPu .q7-9{fill:rgb(122,1,119)}
.RdPu .q8-9{fill:rgb(73,0,106)}
.PuRd .q0-3{fill:rgb(231,225,239)}
.PuRd .q1-3{fill:rgb(201,148,199)}
.PuRd .q2-3{fill:rgb(221,28,119)}
.PuRd .q0-4{fill:rgb(241,238,246)}
.PuRd .q1-4{fill:rgb(215,181,216)}
.PuRd .q2-4{fill:rgb(223,101,176)}
.PuRd .q3-4{fill:rgb(206,18,86)}
.PuRd .q0-5{fill:rgb(241,238,246)}
.PuRd .q1-5{fill:rgb(215,181,216)}
.PuRd .q2-5{fill:rgb(223,101,176)}
.PuRd .q3-5{fill:rgb(221,28,119)}
.PuRd .q4-5{fill:rgb(152,0,67)}
.PuRd .q0-6{fill:rgb(241,238,246)}
.PuRd .q1-6{fill:rgb(212,185,218)}
.PuRd .q2-6{fill:rgb(201,148,199)}
.PuRd .q3-6{fill:rgb(223,101,176)}
.PuRd .q4-6{fill:rgb(221,28,119)}
.PuRd .q5-6{fill:rgb(152,0,67)}
.PuRd .q0-7{fill:rgb(241,238,246)}
.PuRd .q1-7{fill:rgb(212,185,218)}
.PuRd .q2-7{fill:rgb(201,148,199)}
.PuRd .q3-7{fill:rgb(223,101,176)}
.PuRd .q4-7{fill:rgb(231,41,138)}
.PuRd .q5-7{fill:rgb(206,18,86)}
.PuRd .q6-7{fill:rgb(145,0,63)}
.PuRd .q0-8{fill:rgb(247,244,249)}
.PuRd .q1-8{fill:rgb(231,225,239)}
.PuRd .q2-8{fill:rgb(212,185,218)}
.PuRd .q3-8{fill:rgb(201,148,199)}
.PuRd .q4-8{fill:rgb(223,101,176)}
.PuRd .q5-8{fill:rgb(231,41,138)}
.PuRd .q6-8{fill:rgb(206,18,86)}
.PuRd .q7-8{fill:rgb(145,0,63)}
.PuRd .q0-9{fill:rgb(247,244,249)}
.PuRd .q1-9{fill:rgb(231,225,239)}
.PuRd .q2-9{fill:rgb(212,185,218)}
.PuRd .q3-9{fill:rgb(201,148,199)}
.PuRd .q4-9{fill:rgb(223,101,176)}
.PuRd .q5-9{fill:rgb(231,41,138)}
.PuRd .q6-9{fill:rgb(206,18,86)}
.PuRd .q7-9{fill:rgb(152,0,67)}
.PuRd .q8-9{fill:rgb(103,0,31)}
.OrRd .q0-3{fill:rgb(254,232,200)}
.OrRd .q1-3{fill:rgb(253,187,132)}
.OrRd .q2-3{fill:rgb(227,74,51)}
.OrRd .q0-4{fill:rgb(254,240,217)}
.OrRd .q1-4{fill:rgb(253,204,138)}
.OrRd .q2-4{fill:rgb(252,141,89)}
.OrRd .q3-4{fill:rgb(215,48,31)}
.OrRd .q0-5{fill:rgb(254,240,217)}
.OrRd .q1-5{fill:rgb(253,204,138)}
.OrRd .q2-5{fill:rgb(252,141,89)}
.OrRd .q3-5{fill:rgb(227,74,51)}
.OrRd .q4-5{fill:rgb(179,0,0)}
.OrRd .q0-6{fill:rgb(254,240,217)}
.OrRd .q1-6{fill:rgb(253,212,158)}
.OrRd .q2-6{fill:rgb(253,187,132)}
.OrRd .q3-6{fill:rgb(252,141,89)}
.OrRd .q4-6{fill:rgb(227,74,51)}
.OrRd .q5-6{fill:rgb(179,0,0)}
.OrRd .q0-7{fill:rgb(254,240,217)}
.OrRd .q1-7{fill:rgb(253,212,158)}
.OrRd .q2-7{fill:rgb(253,187,132)}
.OrRd .q3-7{fill:rgb(252,141,89)}
.OrRd .q4-7{fill:rgb(239,101,72)}
.OrRd .q5-7{fill:rgb(215,48,31)}
.OrRd .q6-7{fill:rgb(153,0,0)}
.OrRd .q0-8{fill:rgb(255,247,236)}
.OrRd .q1-8{fill:rgb(254,232,200)}
.OrRd .q2-8{fill:rgb(253,212,158)}
.OrRd .q3-8{fill:rgb(253,187,132)}
.OrRd .q4-8{fill:rgb(252,141,89)}
.OrRd .q5-8{fill:rgb(239,101,72)}
.OrRd .q6-8{fill:rgb(215,48,31)}
.OrRd .q7-8{fill:rgb(153,0,0)}
.OrRd .q0-9{fill:rgb(255,247,236)}
.OrRd .q1-9{fill:rgb(254,232,200)}
.OrRd .q2-9{fill:rgb(253,212,158)}
.OrRd .q3-9{fill:rgb(253,187,132)}
.OrRd .q4-9{fill:rgb(252,141,89)}
.OrRd .q5-9{fill:rgb(239,101,72)}
.OrRd .q6-9{fill:rgb(215,48,31)}
.OrRd .q7-9{fill:rgb(179,0,0)}
.OrRd .q8-9{fill:rgb(127,0,0)}
.YlOrRd .q0-3{fill:rgb(255,237,160)}
.YlOrRd .q1-3{fill:rgb(254,178,76)}
.YlOrRd .q2-3{fill:rgb(240,59,32)}
.YlOrRd .q0-4{fill:rgb(255,255,178)}
.YlOrRd .q1-4{fill:rgb(254,204,92)}
.YlOrRd .q2-4{fill:rgb(253,141,60)}
.YlOrRd .q3-4{fill:rgb(227,26,28)}
.YlOrRd .q0-5{fill:rgb(255,255,178)}
.YlOrRd .q1-5{fill:rgb(254,204,92)}
.YlOrRd .q2-5{fill:rgb(253,141,60)}
.YlOrRd .q3-5{fill:rgb(240,59,32)}
.YlOrRd .q4-5{fill:rgb(189,0,38)}
.YlOrRd .q0-6{fill:rgb(255,255,178)}
.YlOrRd .q1-6{fill:rgb(254,217,118)}
.YlOrRd .q2-6{fill:rgb(254,178,76)}
.YlOrRd .q3-6{fill:rgb(253,141,60)}
.YlOrRd .q4-6{fill:rgb(240,59,32)}
.YlOrRd .q5-6{fill:rgb(189,0,38)}
.YlOrRd .q0-7{fill:rgb(255,255,178)}
.YlOrRd .q1-7{fill:rgb(254,217,118)}
.YlOrRd .q2-7{fill:rgb(254,178,76)}
.YlOrRd .q3-7{fill:rgb(253,141,60)}
.YlOrRd .q4-7{fill:rgb(252,78,42)}
.YlOrRd .q5-7{fill:rgb(227,26,28)}
.YlOrRd .q6-7{fill:rgb(177,0,38)}
.YlOrRd .q0-8{fill:rgb(255,255,204)}
.YlOrRd .q1-8{fill:rgb(255,237,160)}
.YlOrRd .q2-8{fill:rgb(254,217,118)}
.YlOrRd .q3-8{fill:rgb(254,178,76)}
.YlOrRd .q4-8{fill:rgb(253,141,60)}
.YlOrRd .q5-8{fill:rgb(252,78,42)}
.YlOrRd .q6-8{fill:rgb(227,26,28)}
.YlOrRd .q7-8{fill:rgb(177,0,38)}
.YlOrRd .q0-9{fill:rgb(255,255,204)}
.YlOrRd .q1-9{fill:rgb(255,237,160)}
.YlOrRd .q2-9{fill:rgb(254,217,118)}
.YlOrRd .q3-9{fill:rgb(254,178,76)}
.YlOrRd .q4-9{fill:rgb(253,141,60)}
.YlOrRd .q5-9{fill:rgb(252,78,42)}
.YlOrRd .q6-9{fill:rgb(227,26,28)}
.YlOrRd .q7-9{fill:rgb(189,0,38)}
.YlOrRd .q8-9{fill:rgb(128,0,38)}
.YlOrBr .q0-3{fill:rgb(255,247,188)}
.YlOrBr .q1-3{fill:rgb(254,196,79)}
.YlOrBr .q2-3{fill:rgb(217,95,14)}
.YlOrBr .q0-4{fill:rgb(255,255,212)}
.YlOrBr .q1-4{fill:rgb(254,217,142)}
.YlOrBr .q2-4{fill:rgb(254,153,41)}
.YlOrBr .q3-4{fill:rgb(204,76,2)}
.YlOrBr .q0-5{fill:rgb(255,255,212)}
.YlOrBr .q1-5{fill:rgb(254,217,142)}
.YlOrBr .q2-5{fill:rgb(254,153,41)}
.YlOrBr .q3-5{fill:rgb(217,95,14)}
.YlOrBr .q4-5{fill:rgb(153,52,4)}
.YlOrBr .q0-6{fill:rgb(255,255,212)}
.YlOrBr .q1-6{fill:rgb(254,227,145)}
.YlOrBr .q2-6{fill:rgb(254,196,79)}
.YlOrBr .q3-6{fill:rgb(254,153,41)}
.YlOrBr .q4-6{fill:rgb(217,95,14)}
.YlOrBr .q5-6{fill:rgb(153,52,4)}
.YlOrBr .q0-7{fill:rgb(255,255,212)}
.YlOrBr .q1-7{fill:rgb(254,227,145)}
.YlOrBr .q2-7{fill:rgb(254,196,79)}
.YlOrBr .q3-7{fill:rgb(254,153,41)}
.YlOrBr .q4-7{fill:rgb(236,112,20)}
.YlOrBr .q5-7{fill:rgb(204,76,2)}
.YlOrBr .q6-7{fill:rgb(140,45,4)}
.YlOrBr .q0-8{fill:rgb(255,255,229)}
.YlOrBr .q1-8{fill:rgb(255,247,188)}
.YlOrBr .q2-8{fill:rgb(254,227,145)}
.YlOrBr .q3-8{fill:rgb(254,196,79)}
.YlOrBr .q4-8{fill:rgb(254,153,41)}
.YlOrBr .q5-8{fill:rgb(236,112,20)}
.YlOrBr .q6-8{fill:rgb(204,76,2)}
.YlOrBr .q7-8{fill:rgb(140,45,4)}
.YlOrBr .q0-9{fill:rgb(255,255,229)}
.YlOrBr .q1-9{fill:rgb(255,247,188)}
.YlOrBr .q2-9{fill:rgb(254,227,145)}
.YlOrBr .q3-9{fill:rgb(254,196,79)}
.YlOrBr .q4-9{fill:rgb(254,153,41)}
.YlOrBr .q5-9{fill:rgb(236,112,20)}
.YlOrBr .q6-9{fill:rgb(204,76,2)}
.YlOrBr .q7-9{fill:rgb(153,52,4)}
.YlOrBr .q8-9{fill:rgb(102,37,6)}
.Purples .q0-3{fill:rgb(239,237,245)}
.Purples .q1-3{fill:rgb(188,189,220)}
.Purples .q2-3{fill:rgb(117,107,177)}
.Purples .q0-4{fill:rgb(242,240,247)}
.Purples .q1-4{fill:rgb(203,201,226)}
.Purples .q2-4{fill:rgb(158,154,200)}
.Purples .q3-4{fill:rgb(106,81,163)}
.Purples .q0-5{fill:rgb(242,240,247)}
.Purples .q1-5{fill:rgb(203,201,226)}
.Purples .q2-5{fill:rgb(158,154,200)}
.Purples .q3-5{fill:rgb(117,107,177)}
.Purples .q4-5{fill:rgb(84,39,143)}
.Purples .q0-6{fill:rgb(242,240,247)}
.Purples .q1-6{fill:rgb(218,218,235)}
.Purples .q2-6{fill:rgb(188,189,220)}
.Purples .q3-6{fill:rgb(158,154,200)}
.Purples .q4-6{fill:rgb(117,107,177)}
.Purples .q5-6{fill:rgb(84,39,143)}
.Purples .q0-7{fill:rgb(242,240,247)}
.Purples .q1-7{fill:rgb(218,218,235)}
.Purples .q2-7{fill:rgb(188,189,220)}
.Purples .q3-7{fill:rgb(158,154,200)}
.Purples .q4-7{fill:rgb(128,125,186)}
.Purples .q5-7{fill:rgb(106,81,163)}
.Purples .q6-7{fill:rgb(74,20,134)}
.Purples .q0-8{fill:rgb(252,251,253)}
.Purples .q1-8{fill:rgb(239,237,245)}
.Purples .q2-8{fill:rgb(218,218,235)}
.Purples .q3-8{fill:rgb(188,189,220)}
.Purples .q4-8{fill:rgb(158,154,200)}
.Purples .q5-8{fill:rgb(128,125,186)}
.Purples .q6-8{fill:rgb(106,81,163)}
.Purples .q7-8{fill:rgb(74,20,134)}
.Purples .q0-9{fill:rgb(252,251,253)}
.Purples .q1-9{fill:rgb(239,237,245)}
.Purples .q2-9{fill:rgb(218,218,235)}
.Purples .q3-9{fill:rgb(188,189,220)}
.Purples .q4-9{fill:rgb(158,154,200)}
.Purples .q5-9{fill:rgb(128,125,186)}
.Purples .q6-9{fill:rgb(106,81,163)}
.Purples .q7-9{fill:rgb(84,39,143)}
.Purples .q8-9{fill:rgb(63,0,125)}
.Blues .q0-3{fill:rgb(222,235,247)}
.Blues .q1-3{fill:rgb(158,202,225)}
.Blues .q2-3{fill:rgb(49,130,189)}
.Blues .q0-4{fill:rgb(239,243,255)}
.Blues .q1-4{fill:rgb(189,215,231)}
.Blues .q2-4{fill:rgb(107,174,214)}
.Blues .q3-4{fill:rgb(33,113,181)}
.Blues .q0-5{fill:rgb(239,243,255)}
.Blues .q1-5{fill:rgb(189,215,231)}
.Blues .q2-5{fill:rgb(107,174,214)}
.Blues .q3-5{fill:rgb(49,130,189)}
.Blues .q4-5{fill:rgb(8,81,156)}
.Blues .q0-6{fill:rgb(239,243,255)}
.Blues .q1-6{fill:rgb(198,219,239)}
.Blues .q2-6{fill:rgb(158,202,225)}
.Blues .q3-6{fill:rgb(107,174,214)}
.Blues .q4-6{fill:rgb(49,130,189)}
.Blues .q5-6{fill:rgb(8,81,156)}
.Blues .q0-7{fill:rgb(239,243,255)}
.Blues .q1-7{fill:rgb(198,219,239)}
.Blues .q2-7{fill:rgb(158,202,225)}
.Blues .q3-7{fill:rgb(107,174,214)}
.Blues .q4-7{fill:rgb(66,146,198)}
.Blues .q5-7{fill:rgb(33,113,181)}
.Blues .q6-7{fill:rgb(8,69,148)}
.Blues .q0-8{fill:rgb(247,251,255)}
.Blues .q1-8{fill:rgb(222,235,247)}
.Blues .q2-8{fill:rgb(198,219,239)}
.Blues .q3-8{fill:rgb(158,202,225)}
.Blues .q4-8{fill:rgb(107,174,214)}
.Blues .q5-8{fill:rgb(66,146,198)}
.Blues .q6-8{fill:rgb(33,113,181)}
.Blues .q7-8{fill:rgb(8,69,148)}
.Blues .q0-9{fill:rgb(247,251,255)}
.Blues .q1-9{fill:rgb(222,235,247)}
.Blues .q2-9{fill:rgb(198,219,239)}
.Blues .q3-9{fill:rgb(158,202,225)}
.Blues .q4-9{fill:rgb(107,174,214)}
.Blues .q5-9{fill:rgb(66,146,198)}
.Blues .q6-9{fill:rgb(33,113,181)}
.Blues .q7-9{fill:rgb(8,81,156)}
.Blues .q8-9{fill:rgb(8,48,107)}
.Greens .q0-3{fill:rgb(229,245,224)}
.Greens .q1-3{fill:rgb(161,217,155)}
.Greens .q2-3{fill:rgb(49,163,84)}
.Greens .q0-4{fill:rgb(237,248,233)}
.Greens .q1-4{fill:rgb(186,228,179)}
.Greens .q2-4{fill:rgb(116,196,118)}
.Greens .q3-4{fill:rgb(35,139,69)}
.Greens .q0-5{fill:rgb(237,248,233)}
.Greens .q1-5{fill:rgb(186,228,179)}
.Greens .q2-5{fill:rgb(116,196,118)}
.Greens .q3-5{fill:rgb(49,163,84)}
.Greens .q4-5{fill:rgb(0,109,44)}
.Greens .q0-6{fill:rgb(237,248,233)}
.Greens .q1-6{fill:rgb(199,233,192)}
.Greens .q2-6{fill:rgb(161,217,155)}
.Greens .q3-6{fill:rgb(116,196,118)}
.Greens .q4-6{fill:rgb(49,163,84)}
.Greens .q5-6{fill:rgb(0,109,44)}
.Greens .q0-7{fill:rgb(237,248,233)}
.Greens .q1-7{fill:rgb(199,233,192)}
.Greens .q2-7{fill:rgb(161,217,155)}
.Greens .q3-7{fill:rgb(116,196,118)}
.Greens .q4-7{fill:rgb(65,171,93)}
.Greens .q5-7{fill:rgb(35,139,69)}
.Greens .q6-7{fill:rgb(0,90,50)}
.Greens .q0-8{fill:rgb(247,252,245)}
.Greens .q1-8{fill:rgb(229,245,224)}
.Greens .q2-8{fill:rgb(199,233,192)}
.Greens .q3-8{fill:rgb(161,217,155)}
.Greens .q4-8{fill:rgb(116,196,118)}
.Greens .q5-8{fill:rgb(65,171,93)}
.Greens .q6-8{fill:rgb(35,139,69)}
.Greens .q7-8{fill:rgb(0,90,50)}
.Greens .q0-9{fill:rgb(247,252,245)}
.Greens .q1-9{fill:rgb(229,245,224)}
.Greens .q2-9{fill:rgb(199,233,192)}
.Greens .q3-9{fill:rgb(161,217,155)}
.Greens .q4-9{fill:rgb(116,196,118)}
.Greens .q5-9{fill:rgb(65,171,93)}
.Greens .q6-9{fill:rgb(35,139,69)}
.Greens .q7-9{fill:rgb(0,109,44)}
.Greens .q8-9{fill:rgb(0,68,27)}
.Oranges .q0-3{fill:rgb(254,230,206)}
.Oranges .q1-3{fill:rgb(253,174,107)}
.Oranges .q2-3{fill:rgb(230,85,13)}
.Oranges .q0-4{fill:rgb(254,237,222)}
.Oranges .q1-4{fill:rgb(253,190,133)}
.Oranges .q2-4{fill:rgb(253,141,60)}
.Oranges .q3-4{fill:rgb(217,71,1)}
.Oranges .q0-5{fill:rgb(254,237,222)}
.Oranges .q1-5{fill:rgb(253,190,133)}
.Oranges .q2-5{fill:rgb(253,141,60)}
.Oranges .q3-5{fill:rgb(230,85,13)}
.Oranges .q4-5{fill:rgb(166,54,3)}
.Oranges .q0-6{fill:rgb(254,237,222)}
.Oranges .q1-6{fill:rgb(253,208,162)}
.Oranges .q2-6{fill:rgb(253,174,107)}
.Oranges .q3-6{fill:rgb(253,141,60)}
.Oranges .q4-6{fill:rgb(230,85,13)}
.Oranges .q5-6{fill:rgb(166,54,3)}
.Oranges .q0-7{fill:rgb(254,237,222)}
.Oranges .q1-7{fill:rgb(253,208,162)}
.Oranges .q2-7{fill:rgb(253,174,107)}
.Oranges .q3-7{fill:rgb(253,141,60)}
.Oranges .q4-7{fill:rgb(241,105,19)}
.Oranges .q5-7{fill:rgb(217,72,1)}
.Oranges .q6-7{fill:rgb(140,45,4)}
.Oranges .q0-8{fill:rgb(255,245,235)}
.Oranges .q1-8{fill:rgb(254,230,206)}
.Oranges .q2-8{fill:rgb(253,208,162)}
.Oranges .q3-8{fill:rgb(253,174,107)}
.Oranges .q4-8{fill:rgb(253,141,60)}
.Oranges .q5-8{fill:rgb(241,105,19)}
.Oranges .q6-8{fill:rgb(217,72,1)}
.Oranges .q7-8{fill:rgb(140,45,4)}
.Oranges .q0-9{fill:rgb(255,245,235)}
.Oranges .q1-9{fill:rgb(254,230,206)}
.Oranges .q2-9{fill:rgb(253,208,162)}
.Oranges .q3-9{fill:rgb(253,174,107)}
.Oranges .q4-9{fill:rgb(253,141,60)}
.Oranges .q5-9{fill:rgb(241,105,19)}
.Oranges .q6-9{fill:rgb(217,72,1)}
.Oranges .q7-9{fill:rgb(166,54,3)}
.Oranges .q8-9{fill:rgb(127,39,4)}
.Reds .q0-3{fill:rgb(254,224,210)}
.Reds .q1-3{fill:rgb(252,146,114)}
.Reds .q2-3{fill:rgb(222,45,38)}
.Reds .q0-4{fill:rgb(254,229,217)}
.Reds .q1-4{fill:rgb(252,174,145)}
.Reds .q2-4{fill:rgb(251,106,74)}
.Reds .q3-4{fill:rgb(203,24,29)}
.Reds .q0-5{fill:rgb(254,229,217)}
.Reds .q1-5{fill:rgb(252,174,145)}
.Reds .q2-5{fill:rgb(251,106,74)}
.Reds .q3-5{fill:rgb(222,45,38)}
.Reds .q4-5{fill:rgb(165,15,21)}
.Reds .q0-6{fill:rgb(254,229,217)}
.Reds .q1-6{fill:rgb(252,187,161)}
.Reds .q2-6{fill:rgb(252,146,114)}
.Reds .q3-6{fill:rgb(251,106,74)}
.Reds .q4-6{fill:rgb(222,45,38)}
.Reds .q5-6{fill:rgb(165,15,21)}
.Reds .q0-7{fill:rgb(254,229,217)}
.Reds .q1-7{fill:rgb(252,187,161)}
.Reds .q2-7{fill:rgb(252,146,114)}
.Reds .q3-7{fill:rgb(251,106,74)}
.Reds .q4-7{fill:rgb(239,59,44)}
.Reds .q5-7{fill:rgb(203,24,29)}
.Reds .q6-7{fill:rgb(153,0,13)}
.Reds .q0-8{fill:rgb(255,245,240)}
.Reds .q1-8{fill:rgb(254,224,210)}
.Reds .q2-8{fill:rgb(252,187,161)}
.Reds .q3-8{fill:rgb(252,146,114)}
.Reds .q4-8{fill:rgb(251,106,74)}
.Reds .q5-8{fill:rgb(239,59,44)}
.Reds .q6-8{fill:rgb(203,24,29)}
.Reds .q7-8{fill:rgb(153,0,13)}
.Reds .q0-9{fill:rgb(255,245,240)}
.Reds .q1-9{fill:rgb(254,224,210)}
.Reds .q2-9{fill:rgb(252,187,161)}
.Reds .q3-9{fill:rgb(252,146,114)}
.Reds .q4-9{fill:rgb(251,106,74)}
.Reds .q5-9{fill:rgb(239,59,44)}
.Reds .q6-9{fill:rgb(203,24,29)}
.Reds .q7-9{fill:rgb(165,15,21)}
.Reds .q8-9{fill:rgb(103,0,13)}
.Greys .q0-3{fill:rgb(240,240,240)}
.Greys .q1-3{fill:rgb(189,189,189)}
.Greys .q2-3{fill:rgb(99,99,99)}
.Greys .q0-4{fill:rgb(247,247,247)}
.Greys .q1-4{fill:rgb(204,204,204)}
.Greys .q2-4{fill:rgb(150,150,150)}
.Greys .q3-4{fill:rgb(82,82,82)}
.Greys .q0-5{fill:rgb(247,247,247)}
.Greys .q1-5{fill:rgb(204,204,204)}
.Greys .q2-5{fill:rgb(150,150,150)}
.Greys .q3-5{fill:rgb(99,99,99)}
.Greys .q4-5{fill:rgb(37,37,37)}
.Greys .q0-6{fill:rgb(247,247,247)}
.Greys .q1-6{fill:rgb(217,217,217)}
.Greys .q2-6{fill:rgb(189,189,189)}
.Greys .q3-6{fill:rgb(150,150,150)}
.Greys .q4-6{fill:rgb(99,99,99)}
.Greys .q5-6{fill:rgb(37,37,37)}
.Greys .q0-7{fill:rgb(247,247,247)}
.Greys .q1-7{fill:rgb(217,217,217)}
.Greys .q2-7{fill:rgb(189,189,189)}
.Greys .q3-7{fill:rgb(150,150,150)}
.Greys .q4-7{fill:rgb(115,115,115)}
.Greys .q5-7{fill:rgb(82,82,82)}
.Greys .q6-7{fill:rgb(37,37,37)}
.Greys .q0-8{fill:rgb(255,255,255)}
.Greys .q1-8{fill:rgb(240,240,240)}
.Greys .q2-8{fill:rgb(217,217,217)}
.Greys .q3-8{fill:rgb(189,189,189)}
.Greys .q4-8{fill:rgb(150,150,150)}
.Greys .q5-8{fill:rgb(115,115,115)}
.Greys .q6-8{fill:rgb(82,82,82)}
.Greys .q7-8{fill:rgb(37,37,37)}
.Greys .q0-9{fill:rgb(255,255,255)}
.Greys .q1-9{fill:rgb(240,240,240)}
.Greys .q2-9{fill:rgb(217,217,217)}
.Greys .q3-9{fill:rgb(189,189,189)}
.Greys .q4-9{fill:rgb(150,150,150)}
.Greys .q5-9{fill:rgb(115,115,115)}
.Greys .q6-9{fill:rgb(82,82,82)}
.Greys .q7-9{fill:rgb(37,37,37)}
.Greys .q8-9{fill:rgb(0,0,0)}
.PuOr .q0-3{fill:rgb(241,163,64)}
.PuOr .q1-3{fill:rgb(247,247,247)}
.PuOr .q2-3{fill:rgb(153,142,195)}
.PuOr .q0-4{fill:rgb(230,97,1)}
.PuOr .q1-4{fill:rgb(253,184,99)}
.PuOr .q2-4{fill:rgb(178,171,210)}
.PuOr .q3-4{fill:rgb(94,60,153)}
.PuOr .q0-5{fill:rgb(230,97,1)}
.PuOr .q1-5{fill:rgb(253,184,99)}
.PuOr .q2-5{fill:rgb(247,247,247)}
.PuOr .q3-5{fill:rgb(178,171,210)}
.PuOr .q4-5{fill:rgb(94,60,153)}
.PuOr .q0-6{fill:rgb(179,88,6)}
.PuOr .q1-6{fill:rgb(241,163,64)}
.PuOr .q2-6{fill:rgb(254,224,182)}
.PuOr .q3-6{fill:rgb(216,218,235)}
.PuOr .q4-6{fill:rgb(153,142,195)}
.PuOr .q5-6{fill:rgb(84,39,136)}
.PuOr .q0-7{fill:rgb(179,88,6)}
.PuOr .q1-7{fill:rgb(241,163,64)}
.PuOr .q2-7{fill:rgb(254,224,182)}
.PuOr .q3-7{fill:rgb(247,247,247)}
.PuOr .q4-7{fill:rgb(216,218,235)}
.PuOr .q5-7{fill:rgb(153,142,195)}
.PuOr .q6-7{fill:rgb(84,39,136)}
.PuOr .q0-8{fill:rgb(179,88,6)}
.PuOr .q1-8{fill:rgb(224,130,20)}
.PuOr .q2-8{fill:rgb(253,184,99)}
.PuOr .q3-8{fill:rgb(254,224,182)}
.PuOr .q4-8{fill:rgb(216,218,235)}
.PuOr .q5-8{fill:rgb(178,171,210)}
.PuOr .q6-8{fill:rgb(128,115,172)}
.PuOr .q7-8{fill:rgb(84,39,136)}
.PuOr .q0-9{fill:rgb(179,88,6)}
.PuOr .q1-9{fill:rgb(224,130,20)}
.PuOr .q2-9{fill:rgb(253,184,99)}
.PuOr .q3-9{fill:rgb(254,224,182)}
.PuOr .q4-9{fill:rgb(247,247,247)}
.PuOr .q5-9{fill:rgb(216,218,235)}
.PuOr .q6-9{fill:rgb(178,171,210)}
.PuOr .q7-9{fill:rgb(128,115,172)}
.PuOr .q8-9{fill:rgb(84,39,136)}
.PuOr .q0-10{fill:rgb(127,59,8)}
.PuOr .q1-10{fill:rgb(179,88,6)}
.PuOr .q2-10{fill:rgb(224,130,20)}
.PuOr .q3-10{fill:rgb(253,184,99)}
.PuOr .q4-10{fill:rgb(254,224,182)}
.PuOr .q5-10{fill:rgb(216,218,235)}
.PuOr .q6-10{fill:rgb(178,171,210)}
.PuOr .q7-10{fill:rgb(128,115,172)}
.PuOr .q8-10{fill:rgb(84,39,136)}
.PuOr .q9-10{fill:rgb(45,0,75)}
.PuOr .q0-11{fill:rgb(127,59,8)}
.PuOr .q1-11{fill:rgb(179,88,6)}
.PuOr .q2-11{fill:rgb(224,130,20)}
.PuOr .q3-11{fill:rgb(253,184,99)}
.PuOr .q4-11{fill:rgb(254,224,182)}
.PuOr .q5-11{fill:rgb(247,247,247)}
.PuOr .q6-11{fill:rgb(216,218,235)}
.PuOr .q7-11{fill:rgb(178,171,210)}
.PuOr .q8-11{fill:rgb(128,115,172)}
.PuOr .q9-11{fill:rgb(84,39,136)}
.PuOr .q10-11{fill:rgb(45,0,75)}
.BrBG .q0-3{fill:rgb(216,179,101)}
.BrBG .q1-3{fill:rgb(245,245,245)}
.BrBG .q2-3{fill:rgb(90,180,172)}
.BrBG .q0-4{fill:rgb(166,97,26)}
.BrBG .q1-4{fill:rgb(223,194,125)}
.BrBG .q2-4{fill:rgb(128,205,193)}
.BrBG .q3-4{fill:rgb(1,133,113)}
.BrBG .q0-5{fill:rgb(166,97,26)}
.BrBG .q1-5{fill:rgb(223,194,125)}
.BrBG .q2-5{fill:rgb(245,245,245)}
.BrBG .q3-5{fill:rgb(128,205,193)}
.BrBG .q4-5{fill:rgb(1,133,113)}
.BrBG .q0-6{fill:rgb(140,81,10)}
.BrBG .q1-6{fill:rgb(216,179,101)}
.BrBG .q2-6{fill:rgb(246,232,195)}
.BrBG .q3-6{fill:rgb(199,234,229)}
.BrBG .q4-6{fill:rgb(90,180,172)}
.BrBG .q5-6{fill:rgb(1,102,94)}
.BrBG .q0-7{fill:rgb(140,81,10)}
.BrBG .q1-7{fill:rgb(216,179,101)}
.BrBG .q2-7{fill:rgb(246,232,195)}
.BrBG .q3-7{fill:rgb(245,245,245)}
.BrBG .q4-7{fill:rgb(199,234,229)}
.BrBG .q5-7{fill:rgb(90,180,172)}
.BrBG .q6-7{fill:rgb(1,102,94)}
.BrBG .q0-8{fill:rgb(140,81,10)}
.BrBG .q1-8{fill:rgb(191,129,45)}
.BrBG .q2-8{fill:rgb(223,194,125)}
.BrBG .q3-8{fill:rgb(246,232,195)}
.BrBG .q4-8{fill:rgb(199,234,229)}
.BrBG .q5-8{fill:rgb(128,205,193)}
.BrBG .q6-8{fill:rgb(53,151,143)}
.BrBG .q7-8{fill:rgb(1,102,94)}
.BrBG .q0-9{fill:rgb(140,81,10)}
.BrBG .q1-9{fill:rgb(191,129,45)}
.BrBG .q2-9{fill:rgb(223,194,125)}
.BrBG .q3-9{fill:rgb(246,232,195)}
.BrBG .q4-9{fill:rgb(245,245,245)}
.BrBG .q5-9{fill:rgb(199,234,229)}
.BrBG .q6-9{fill:rgb(128,205,193)}
.BrBG .q7-9{fill:rgb(53,151,143)}
.BrBG .q8-9{fill:rgb(1,102,94)}
.BrBG .q0-10{fill:rgb(84,48,5)}
.BrBG .q1-10{fill:rgb(140,81,10)}
.BrBG .q2-10{fill:rgb(191,129,45)}
.BrBG .q3-10{fill:rgb(223,194,125)}
.BrBG .q4-10{fill:rgb(246,232,195)}
.BrBG .q5-10{fill:rgb(199,234,229)}
.BrBG .q6-10{fill:rgb(128,205,193)}
.BrBG .q7-10{fill:rgb(53,151,143)}
.BrBG .q8-10{fill:rgb(1,102,94)}
.BrBG .q9-10{fill:rgb(0,60,48)}
.BrBG .q0-11{fill:rgb(84,48,5)}
.BrBG .q1-11{fill:rgb(140,81,10)}
.BrBG .q2-11{fill:rgb(191,129,45)}
.BrBG .q3-11{fill:rgb(223,194,125)}
.BrBG .q4-11{fill:rgb(246,232,195)}
.BrBG .q5-11{fill:rgb(245,245,245)}
.BrBG .q6-11{fill:rgb(199,234,229)}
.BrBG .q7-11{fill:rgb(128,205,193)}
.BrBG .q8-11{fill:rgb(53,151,143)}
.BrBG .q9-11{fill:rgb(1,102,94)}
.BrBG .q10-11{fill:rgb(0,60,48)}
.PRGn .q0-3{fill:rgb(175,141,195)}
.PRGn .q1-3{fill:rgb(247,247,247)}
.PRGn .q2-3{fill:rgb(127,191,123)}
.PRGn .q0-4{fill:rgb(123,50,148)}
.PRGn .q1-4{fill:rgb(194,165,207)}
.PRGn .q2-4{fill:rgb(166,219,160)}
.PRGn .q3-4{fill:rgb(0,136,55)}
.PRGn .q0-5{fill:rgb(123,50,148)}
.PRGn .q1-5{fill:rgb(194,165,207)}
.PRGn .q2-5{fill:rgb(247,247,247)}
.PRGn .q3-5{fill:rgb(166,219,160)}
.PRGn .q4-5{fill:rgb(0,136,55)}
.PRGn .q0-6{fill:rgb(118,42,131)}
.PRGn .q1-6{fill:rgb(175,141,195)}
.PRGn .q2-6{fill:rgb(231,212,232)}
.PRGn .q3-6{fill:rgb(217,240,211)}
.PRGn .q4-6{fill:rgb(127,191,123)}
.PRGn .q5-6{fill:rgb(27,120,55)}
.PRGn .q0-7{fill:rgb(118,42,131)}
.PRGn .q1-7{fill:rgb(175,141,195)}
.PRGn .q2-7{fill:rgb(231,212,232)}
.PRGn .q3-7{fill:rgb(247,247,247)}
.PRGn .q4-7{fill:rgb(217,240,211)}
.PRGn .q5-7{fill:rgb(127,191,123)}
.PRGn .q6-7{fill:rgb(27,120,55)}
.PRGn .q0-8{fill:rgb(118,42,131)}
.PRGn .q1-8{fill:rgb(153,112,171)}
.PRGn .q2-8{fill:rgb(194,165,207)}
.PRGn .q3-8{fill:rgb(231,212,232)}
.PRGn .q4-8{fill:rgb(217,240,211)}
.PRGn .q5-8{fill:rgb(166,219,160)}
.PRGn .q6-8{fill:rgb(90,174,97)}
.PRGn .q7-8{fill:rgb(27,120,55)}
.PRGn .q0-9{fill:rgb(118,42,131)}
.PRGn .q1-9{fill:rgb(153,112,171)}
.PRGn .q2-9{fill:rgb(194,165,207)}
.PRGn .q3-9{fill:rgb(231,212,232)}
.PRGn .q4-9{fill:rgb(247,247,247)}
.PRGn .q5-9{fill:rgb(217,240,211)}
.PRGn .q6-9{fill:rgb(166,219,160)}
.PRGn .q7-9{fill:rgb(90,174,97)}
.PRGn .q8-9{fill:rgb(27,120,55)}
.PRGn .q0-10{fill:rgb(64,0,75)}
.PRGn .q1-10{fill:rgb(118,42,131)}
.PRGn .q2-10{fill:rgb(153,112,171)}
.PRGn .q3-10{fill:rgb(194,165,207)}
.PRGn .q4-10{fill:rgb(231,212,232)}
.PRGn .q5-10{fill:rgb(217,240,211)}
.PRGn .q6-10{fill:rgb(166,219,160)}
.PRGn .q7-10{fill:rgb(90,174,97)}
.PRGn .q8-10{fill:rgb(27,120,55)}
.PRGn .q9-10{fill:rgb(0,68,27)}
.PRGn .q0-11{fill:rgb(64,0,75)}
.PRGn .q1-11{fill:rgb(118,42,131)}
.PRGn .q2-11{fill:rgb(153,112,171)}
.PRGn .q3-11{fill:rgb(194,165,207)}
.PRGn .q4-11{fill:rgb(231,212,232)}
.PRGn .q5-11{fill:rgb(247,247,247)}
.PRGn .q6-11{fill:rgb(217,240,211)}
.PRGn .q7-11{fill:rgb(166,219,160)}
.PRGn .q8-11{fill:rgb(90,174,97)}
.PRGn .q9-11{fill:rgb(27,120,55)}
.PRGn .q10-11{fill:rgb(0,68,27)}
.PiYG .q0-3{fill:rgb(233,163,201)}
.PiYG .q1-3{fill:rgb(247,247,247)}
.PiYG .q2-3{fill:rgb(161,215,106)}
.PiYG .q0-4{fill:rgb(208,28,139)}
.PiYG .q1-4{fill:rgb(241,182,218)}
.PiYG .q2-4{fill:rgb(184,225,134)}
.PiYG .q3-4{fill:rgb(77,172,38)}
.PiYG .q0-5{fill:rgb(208,28,139)}
.PiYG .q1-5{fill:rgb(241,182,218)}
.PiYG .q2-5{fill:rgb(247,247,247)}
.PiYG .q3-5{fill:rgb(184,225,134)}
.PiYG .q4-5{fill:rgb(77,172,38)}
.PiYG .q0-6{fill:rgb(197,27,125)}
.PiYG .q1-6{fill:rgb(233,163,201)}
.PiYG .q2-6{fill:rgb(253,224,239)}
.PiYG .q3-6{fill:rgb(230,245,208)}
.PiYG .q4-6{fill:rgb(161,215,106)}
.PiYG .q5-6{fill:rgb(77,146,33)}
.PiYG .q0-7{fill:rgb(197,27,125)}
.PiYG .q1-7{fill:rgb(233,163,201)}
.PiYG .q2-7{fill:rgb(253,224,239)}
.PiYG .q3-7{fill:rgb(247,247,247)}
.PiYG .q4-7{fill:rgb(230,245,208)}
.PiYG .q5-7{fill:rgb(161,215,106)}
.PiYG .q6-7{fill:rgb(77,146,33)}
.PiYG .q0-8{fill:rgb(197,27,125)}
.PiYG .q1-8{fill:rgb(222,119,174)}
.PiYG .q2-8{fill:rgb(241,182,218)}
.PiYG .q3-8{fill:rgb(253,224,239)}
.PiYG .q4-8{fill:rgb(230,245,208)}
.PiYG .q5-8{fill:rgb(184,225,134)}
.PiYG .q6-8{fill:rgb(127,188,65)}
.PiYG .q7-8{fill:rgb(77,146,33)}
.PiYG .q0-9{fill:rgb(197,27,125)}
.PiYG .q1-9{fill:rgb(222,119,174)}
.PiYG .q2-9{fill:rgb(241,182,218)}
.PiYG .q3-9{fill:rgb(253,224,239)}
.PiYG .q4-9{fill:rgb(247,247,247)}
.PiYG .q5-9{fill:rgb(230,245,208)}
.PiYG .q6-9{fill:rgb(184,225,134)}
.PiYG .q7-9{fill:rgb(127,188,65)}
.PiYG .q8-9{fill:rgb(77,146,33)}
.PiYG .q0-10{fill:rgb(142,1,82)}
.PiYG .q1-10{fill:rgb(197,27,125)}
.PiYG .q2-10{fill:rgb(222,119,174)}
.PiYG .q3-10{fill:rgb(241,182,218)}
.PiYG .q4-10{fill:rgb(253,224,239)}
.PiYG .q5-10{fill:rgb(230,245,208)}
.PiYG .q6-10{fill:rgb(184,225,134)}
.PiYG .q7-10{fill:rgb(127,188,65)}
.PiYG .q8-10{fill:rgb(77,146,33)}
.PiYG .q9-10{fill:rgb(39,100,25)}
.PiYG .q0-11{fill:rgb(142,1,82)}
.PiYG .q1-11{fill:rgb(197,27,125)}
.PiYG .q2-11{fill:rgb(222,119,174)}
.PiYG .q3-11{fill:rgb(241,182,218)}
.PiYG .q4-11{fill:rgb(253,224,239)}
.PiYG .q5-11{fill:rgb(247,247,247)}
.PiYG .q6-11{fill:rgb(230,245,208)}
.PiYG .q7-11{fill:rgb(184,225,134)}
.PiYG .q8-11{fill:rgb(127,188,65)}
.PiYG .q9-11{fill:rgb(77,146,33)}
.PiYG .q10-11{fill:rgb(39,100,25)}
.RdBu .q0-3{fill:rgb(239,138,98)}
.RdBu .q1-3{fill:rgb(247,247,247)}
.RdBu .q2-3{fill:rgb(103,169,207)}
.RdBu .q0-4{fill:rgb(202,0,32)}
.RdBu .q1-4{fill:rgb(244,165,130)}
.RdBu .q2-4{fill:rgb(146,197,222)}
.RdBu .q3-4{fill:rgb(5,113,176)}
.RdBu .q0-5{fill:rgb(202,0,32)}
.RdBu .q1-5{fill:rgb(244,165,130)}
.RdBu .q2-5{fill:rgb(247,247,247)}
.RdBu .q3-5{fill:rgb(146,197,222)}
.RdBu .q4-5{fill:rgb(5,113,176)}
.RdBu .q0-6{fill:rgb(178,24,43)}
.RdBu .q1-6{fill:rgb(239,138,98)}
.RdBu .q2-6{fill:rgb(253,219,199)}
.RdBu .q3-6{fill:rgb(209,229,240)}
.RdBu .q4-6{fill:rgb(103,169,207)}
.RdBu .q5-6{fill:rgb(33,102,172)}
.RdBu .q0-7{fill:rgb(178,24,43)}
.RdBu .q1-7{fill:rgb(239,138,98)}
.RdBu .q2-7{fill:rgb(253,219,199)}
.RdBu .q3-7{fill:rgb(247,247,247)}
.RdBu .q4-7{fill:rgb(209,229,240)}
.RdBu .q5-7{fill:rgb(103,169,207)}
.RdBu .q6-7{fill:rgb(33,102,172)}
.RdBu .q0-8{fill:rgb(178,24,43)}
.RdBu .q1-8{fill:rgb(214,96,77)}
.RdBu .q2-8{fill:rgb(244,165,130)}
.RdBu .q3-8{fill:rgb(253,219,199)}
.RdBu .q4-8{fill:rgb(209,229,240)}
.RdBu .q5-8{fill:rgb(146,197,222)}
.RdBu .q6-8{fill:rgb(67,147,195)}
.RdBu .q7-8{fill:rgb(33,102,172)}
.RdBu .q0-9{fill:rgb(178,24,43)}
.RdBu .q1-9{fill:rgb(214,96,77)}
.RdBu .q2-9{fill:rgb(244,165,130)}
.RdBu .q3-9{fill:rgb(253,219,199)}
.RdBu .q4-9{fill:rgb(247,247,247)}
.RdBu .q5-9{fill:rgb(209,229,240)}
.RdBu .q6-9{fill:rgb(146,197,222)}
.RdBu .q7-9{fill:rgb(67,147,195)}
.RdBu .q8-9{fill:rgb(33,102,172)}
.RdBu .q0-10{fill:rgb(103,0,31)}
.RdBu .q1-10{fill:rgb(178,24,43)}
.RdBu .q2-10{fill:rgb(214,96,77)}
.RdBu .q3-10{fill:rgb(244,165,130)}
.RdBu .q4-10{fill:rgb(253,219,199)}
.RdBu .q5-10{fill:rgb(209,229,240)}
.RdBu .q6-10{fill:rgb(146,197,222)}
.RdBu .q7-10{fill:rgb(67,147,195)}
.RdBu .q8-10{fill:rgb(33,102,172)}
.RdBu .q9-10{fill:rgb(5,48,97)}
.RdBu .q0-11{fill:rgb(103,0,31)}
.RdBu .q1-11{fill:rgb(178,24,43)}
.RdBu .q2-11{fill:rgb(214,96,77)}
.RdBu .q3-11{fill:rgb(244,165,130)}
.RdBu .q4-11{fill:rgb(253,219,199)}
.RdBu .q5-11{fill:rgb(247,247,247)}
.RdBu .q6-11{fill:rgb(209,229,240)}
.RdBu .q7-11{fill:rgb(146,197,222)}
.RdBu .q8-11{fill:rgb(67,147,195)}
.RdBu .q9-11{fill:rgb(33,102,172)}
.RdBu .q10-11{fill:rgb(5,48,97)}
.RdGy .q0-3{fill:rgb(239,138,98)}
.RdGy .q1-3{fill:rgb(255,255,255)}
.RdGy .q2-3{fill:rgb(153,153,153)}
.RdGy .q0-4{fill:rgb(202,0,32)}
.RdGy .q1-4{fill:rgb(244,165,130)}
.RdGy .q2-4{fill:rgb(186,186,186)}
.RdGy .q3-4{fill:rgb(64,64,64)}
.RdGy .q0-5{fill:rgb(202,0,32)}
.RdGy .q1-5{fill:rgb(244,165,130)}
.RdGy .q2-5{fill:rgb(255,255,255)}
.RdGy .q3-5{fill:rgb(186,186,186)}
.RdGy .q4-5{fill:rgb(64,64,64)}
.RdGy .q0-6{fill:rgb(178,24,43)}
.RdGy .q1-6{fill:rgb(239,138,98)}
.RdGy .q2-6{fill:rgb(253,219,199)}
.RdGy .q3-6{fill:rgb(224,224,224)}
.RdGy .q4-6{fill:rgb(153,153,153)}
.RdGy .q5-6{fill:rgb(77,77,77)}
.RdGy .q0-7{fill:rgb(178,24,43)}
.RdGy .q1-7{fill:rgb(239,138,98)}
.RdGy .q2-7{fill:rgb(253,219,199)}
.RdGy .q3-7{fill:rgb(255,255,255)}
.RdGy .q4-7{fill:rgb(224,224,224)}
.RdGy .q5-7{fill:rgb(153,153,153)}
.RdGy .q6-7{fill:rgb(77,77,77)}
.RdGy .q0-8{fill:rgb(178,24,43)}
.RdGy .q1-8{fill:rgb(214,96,77)}
.RdGy .q2-8{fill:rgb(244,165,130)}
.RdGy .q3-8{fill:rgb(253,219,199)}
.RdGy .q4-8{fill:rgb(224,224,224)}
.RdGy .q5-8{fill:rgb(186,186,186)}
.RdGy .q6-8{fill:rgb(135,135,135)}
.RdGy .q7-8{fill:rgb(77,77,77)}
.RdGy .q0-9{fill:rgb(178,24,43)}
.RdGy .q1-9{fill:rgb(214,96,77)}
.RdGy .q2-9{fill:rgb(244,165,130)}
.RdGy .q3-9{fill:rgb(253,219,199)}
.RdGy .q4-9{fill:rgb(255,255,255)}
.RdGy .q5-9{fill:rgb(224,224,224)}
.RdGy .q6-9{fill:rgb(186,186,186)}
.RdGy .q7-9{fill:rgb(135,135,135)}
.RdGy .q8-9{fill:rgb(77,77,77)}
.RdGy .q0-10{fill:rgb(103,0,31)}
.RdGy .q1-10{fill:rgb(178,24,43)}
.RdGy .q2-10{fill:rgb(214,96,77)}
.RdGy .q3-10{fill:rgb(244,165,130)}
.RdGy .q4-10{fill:rgb(253,219,199)}
.RdGy .q5-10{fill:rgb(224,224,224)}
.RdGy .q6-10{fill:rgb(186,186,186)}
.RdGy .q7-10{fill:rgb(135,135,135)}
.RdGy .q8-10{fill:rgb(77,77,77)}
.RdGy .q9-10{fill:rgb(26,26,26)}
.RdGy .q0-11{fill:rgb(103,0,31)}
.RdGy .q1-11{fill:rgb(178,24,43)}
.RdGy .q2-11{fill:rgb(214,96,77)}
.RdGy .q3-11{fill:rgb(244,165,130)}
.RdGy .q4-11{fill:rgb(253,219,199)}
.RdGy .q5-11{fill:rgb(255,255,255)}
.RdGy .q6-11{fill:rgb(224,224,224)}
.RdGy .q7-11{fill:rgb(186,186,186)}
.RdGy .q8-11{fill:rgb(135,135,135)}
.RdGy .q9-11{fill:rgb(77,77,77)}
.RdGy .q10-11{fill:rgb(26,26,26)}
.RdYlBu .q0-3{fill:rgb(252,141,89)}
.RdYlBu .q1-3{fill:rgb(255,255,191)}
.RdYlBu .q2-3{fill:rgb(145,191,219)}
.RdYlBu .q0-4{fill:rgb(215,25,28)}
.RdYlBu .q1-4{fill:rgb(253,174,97)}
.RdYlBu .q2-4{fill:rgb(171,217,233)}
.RdYlBu .q3-4{fill:rgb(44,123,182)}
.RdYlBu .q0-5{fill:rgb(215,25,28)}
.RdYlBu .q1-5{fill:rgb(253,174,97)}
.RdYlBu .q2-5{fill:rgb(255,255,191)}
.RdYlBu .q3-5{fill:rgb(171,217,233)}
.RdYlBu .q4-5{fill:rgb(44,123,182)}
.RdYlBu .q0-6{fill:rgb(215,48,39)}
.RdYlBu .q1-6{fill:rgb(252,141,89)}
.RdYlBu .q2-6{fill:rgb(254,224,144)}
.RdYlBu .q3-6{fill:rgb(224,243,248)}
.RdYlBu .q4-6{fill:rgb(145,191,219)}
.RdYlBu .q5-6{fill:rgb(69,117,180)}
.RdYlBu .q0-7{fill:rgb(215,48,39)}
.RdYlBu .q1-7{fill:rgb(252,141,89)}
.RdYlBu .q2-7{fill:rgb(254,224,144)}
.RdYlBu .q3-7{fill:rgb(255,255,191)}
.RdYlBu .q4-7{fill:rgb(224,243,248)}
.RdYlBu .q5-7{fill:rgb(145,191,219)}
.RdYlBu .q6-7{fill:rgb(69,117,180)}
.RdYlBu .q0-8{fill:rgb(215,48,39)}
.RdYlBu .q1-8{fill:rgb(244,109,67)}
.RdYlBu .q2-8{fill:rgb(253,174,97)}
.RdYlBu .q3-8{fill:rgb(254,224,144)}
.RdYlBu .q4-8{fill:rgb(224,243,248)}
.RdYlBu .q5-8{fill:rgb(171,217,233)}
.RdYlBu .q6-8{fill:rgb(116,173,209)}
.RdYlBu .q7-8{fill:rgb(69,117,180)}
.RdYlBu .q0-9{fill:rgb(215,48,39)}
.RdYlBu .q1-9{fill:rgb(244,109,67)}
.RdYlBu .q2-9{fill:rgb(253,174,97)}
.RdYlBu .q3-9{fill:rgb(254,224,144)}
.RdYlBu .q4-9{fill:rgb(255,255,191)}
.RdYlBu .q5-9{fill:rgb(224,243,248)}
.RdYlBu .q6-9{fill:rgb(171,217,233)}
.RdYlBu .q7-9{fill:rgb(116,173,209)}
.RdYlBu .q8-9{fill:rgb(69,117,180)}
.RdYlBu .q0-10{fill:rgb(165,0,38)}
.RdYlBu .q1-10{fill:rgb(215,48,39)}
.RdYlBu .q2-10{fill:rgb(244,109,67)}
.RdYlBu .q3-10{fill:rgb(253,174,97)}
.RdYlBu .q4-10{fill:rgb(254,224,144)}
.RdYlBu .q5-10{fill:rgb(224,243,248)}
.RdYlBu .q6-10{fill:rgb(171,217,233)}
.RdYlBu .q7-10{fill:rgb(116,173,209)}
.RdYlBu .q8-10{fill:rgb(69,117,180)}
.RdYlBu .q9-10{fill:rgb(49,54,149)}
.RdYlBu .q0-11{fill:rgb(165,0,38)}
.RdYlBu .q1-11{fill:rgb(215,48,39)}
.RdYlBu .q2-11{fill:rgb(244,109,67)}
.RdYlBu .q3-11{fill:rgb(253,174,97)}
.RdYlBu .q4-11{fill:rgb(254,224,144)}
.RdYlBu .q5-11{fill:rgb(255,255,191)}
.RdYlBu .q6-11{fill:rgb(224,243,248)}
.RdYlBu .q7-11{fill:rgb(171,217,233)}
.RdYlBu .q8-11{fill:rgb(116,173,209)}
.RdYlBu .q9-11{fill:rgb(69,117,180)}
.RdYlBu .q10-11{fill:rgb(49,54,149)}
.Spectral .q0-3{fill:rgb(252,141,89)}
.Spectral .q1-3{fill:rgb(255,255,191)}
.Spectral .q2-3{fill:rgb(153,213,148)}
.Spectral .q0-4{fill:rgb(215,25,28)}
.Spectral .q1-4{fill:rgb(253,174,97)}
.Spectral .q2-4{fill:rgb(171,221,164)}
.Spectral .q3-4{fill:rgb(43,131,186)}
.Spectral .q0-5{fill:rgb(215,25,28)}
.Spectral .q1-5{fill:rgb(253,174,97)}
.Spectral .q2-5{fill:rgb(255,255,191)}
.Spectral .q3-5{fill:rgb(171,221,164)}
.Spectral .q4-5{fill:rgb(43,131,186)}
.Spectral .q0-6{fill:rgb(213,62,79)}
.Spectral .q1-6{fill:rgb(252,141,89)}
.Spectral .q2-6{fill:rgb(254,224,139)}
.Spectral .q3-6{fill:rgb(230,245,152)}
.Spectral .q4-6{fill:rgb(153,213,148)}
.Spectral .q5-6{fill:rgb(50,136,189)}
.Spectral .q0-7{fill:rgb(213,62,79)}
.Spectral .q1-7{fill:rgb(252,141,89)}
.Spectral .q2-7{fill:rgb(254,224,139)}
.Spectral .q3-7{fill:rgb(255,255,191)}
.Spectral .q4-7{fill:rgb(230,245,152)}
.Spectral .q5-7{fill:rgb(153,213,148)}
.Spectral .q6-7{fill:rgb(50,136,189)}
.Spectral .q0-8{fill:rgb(213,62,79)}
.Spectral .q1-8{fill:rgb(244,109,67)}
.Spectral .q2-8{fill:rgb(253,174,97)}
.Spectral .q3-8{fill:rgb(254,224,139)}
.Spectral .q4-8{fill:rgb(230,245,152)}
.Spectral .q5-8{fill:rgb(171,221,164)}
.Spectral .q6-8{fill:rgb(102,194,165)}
.Spectral .q7-8{fill:rgb(50,136,189)}
.Spectral .q0-9{fill:rgb(213,62,79)}
.Spectral .q1-9{fill:rgb(244,109,67)}
.Spectral .q2-9{fill:rgb(253,174,97)}
.Spectral .q3-9{fill:rgb(254,224,139)}
.Spectral .q4-9{fill:rgb(255,255,191)}
.Spectral .q5-9{fill:rgb(230,245,152)}
.Spectral .q6-9{fill:rgb(171,221,164)}
.Spectral .q7-9{fill:rgb(102,194,165)}
.Spectral .q8-9{fill:rgb(50,136,189)}
.Spectral .q0-10{fill:rgb(158,1,66)}
.Spectral .q1-10{fill:rgb(213,62,79)}
.Spectral .q2-10{fill:rgb(244,109,67)}
.Spectral .q3-10{fill:rgb(253,174,97)}
.Spectral .q4-10{fill:rgb(254,224,139)}
.Spectral .q5-10{fill:rgb(230,245,152)}
.Spectral .q6-10{fill:rgb(171,221,164)}
.Spectral .q7-10{fill:rgb(102,194,165)}
.Spectral .q8-10{fill:rgb(50,136,189)}
.Spectral .q9-10{fill:rgb(94,79,162)}
.Spectral .q0-11{fill:rgb(158,1,66)}
.Spectral .q1-11{fill:rgb(213,62,79)}
.Spectral .q2-11{fill:rgb(244,109,67)}
.Spectral .q3-11{fill:rgb(253,174,97)}
.Spectral .q4-11{fill:rgb(254,224,139)}
.Spectral .q5-11{fill:rgb(255,255,191)}
.Spectral .q6-11{fill:rgb(230,245,152)}
.Spectral .q7-11{fill:rgb(171,221,164)}
.Spectral .q8-11{fill:rgb(102,194,165)}
.Spectral .q9-11{fill:rgb(50,136,189)}
.Spectral .q10-11{fill:rgb(94,79,162)}
.RdYlGn .q0-3{fill:rgb(252,141,89)}
.RdYlGn .q1-3{fill:rgb(255,255,191)}
.RdYlGn .q2-3{fill:rgb(145,207,96)}
.RdYlGn .q0-4{fill:rgb(215,25,28)}
.RdYlGn .q1-4{fill:rgb(253,174,97)}
.RdYlGn .q2-4{fill:rgb(166,217,106)}
.RdYlGn .q3-4{fill:rgb(26,150,65)}
.RdYlGn .q0-5{fill:rgb(215,25,28)}
.RdYlGn .q1-5{fill:rgb(253,174,97)}
.RdYlGn .q2-5{fill:rgb(255,255,191)}
.RdYlGn .q3-5{fill:rgb(166,217,106)}
.RdYlGn .q4-5{fill:rgb(26,150,65)}
.RdYlGn .q0-6{fill:rgb(215,48,39)}
.RdYlGn .q1-6{fill:rgb(252,141,89)}
.RdYlGn .q2-6{fill:rgb(254,224,139)}
.RdYlGn .q3-6{fill:rgb(217,239,139)}
.RdYlGn .q4-6{fill:rgb(145,207,96)}
.RdYlGn .q5-6{fill:rgb(26,152,80)}
.RdYlGn .q0-7{fill:rgb(215,48,39)}
.RdYlGn .q1-7{fill:rgb(252,141,89)}
.RdYlGn .q2-7{fill:rgb(254,224,139)}
.RdYlGn .q3-7{fill:rgb(255,255,191)}
.RdYlGn .q4-7{fill:rgb(217,239,139)}
.RdYlGn .q5-7{fill:rgb(145,207,96)}
.RdYlGn .q6-7{fill:rgb(26,152,80)}
.RdYlGn .q0-8{fill:rgb(215,48,39)}
.RdYlGn .q1-8{fill:rgb(244,109,67)}
.RdYlGn .q2-8{fill:rgb(253,174,97)}
.RdYlGn .q3-8{fill:rgb(254,224,139)}
.RdYlGn .q4-8{fill:rgb(217,239,139)}
.RdYlGn .q5-8{fill:rgb(166,217,106)}
.RdYlGn .q6-8{fill:rgb(102,189,99)}
.RdYlGn .q7-8{fill:rgb(26,152,80)}
.RdYlGn .q0-9{fill:rgb(215,48,39)}
.RdYlGn .q1-9{fill:rgb(244,109,67)}
.RdYlGn .q2-9{fill:rgb(253,174,97)}
.RdYlGn .q3-9{fill:rgb(254,224,139)}
.RdYlGn .q4-9{fill:rgb(255,255,191)}
.RdYlGn .q5-9{fill:rgb(217,239,139)}
.RdYlGn .q6-9{fill:rgb(166,217,106)}
.RdYlGn .q7-9{fill:rgb(102,189,99)}
.RdYlGn .q8-9{fill:rgb(26,152,80)}
.RdYlGn .q0-10{fill:rgb(165,0,38)}
.RdYlGn .q1-10{fill:rgb(215,48,39)}
.RdYlGn .q2-10{fill:rgb(244,109,67)}
.RdYlGn .q3-10{fill:rgb(253,174,97)}
.RdYlGn .q4-10{fill:rgb(254,224,139)}
.RdYlGn .q5-10{fill:rgb(217,239,139)}
.RdYlGn .q6-10{fill:rgb(166,217,106)}
.RdYlGn .q7-10{fill:rgb(102,189,99)}
.RdYlGn .q8-10{fill:rgb(26,152,80)}
.RdYlGn .q9-10{fill:rgb(0,104,55)}
.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
.Accent .q0-3{fill:rgb(127,201,127)}
.Accent .q1-3{fill:rgb(190,174,212)}
.Accent .q2-3{fill:rgb(253,192,134)}
.Accent .q0-4{fill:rgb(127,201,127)}
.Accent .q1-4{fill:rgb(190,174,212)}
.Accent .q2-4{fill:rgb(253,192,134)}
.Accent .q3-4{fill:rgb(255,255,153)}
.Accent .q0-5{fill:rgb(127,201,127)}
.Accent .q1-5{fill:rgb(190,174,212)}
.Accent .q2-5{fill:rgb(253,192,134)}
.Accent .q3-5{fill:rgb(255,255,153)}
.Accent .q4-5{fill:rgb(56,108,176)}
.Accent .q0-6{fill:rgb(127,201,127)}
.Accent .q1-6{fill:rgb(190,174,212)}
.Accent .q2-6{fill:rgb(253,192,134)}
.Accent .q3-6{fill:rgb(255,255,153)}
.Accent .q4-6{fill:rgb(56,108,176)}
.Accent .q5-6{fill:rgb(240,2,127)}
.Accent .q0-7{fill:rgb(127,201,127)}
.Accent .q1-7{fill:rgb(190,174,212)}
.Accent .q2-7{fill:rgb(253,192,134)}
.Accent .q3-7{fill:rgb(255,255,153)}
.Accent .q4-7{fill:rgb(56,108,176)}
.Accent .q5-7{fill:rgb(240,2,127)}
.Accent .q6-7{fill:rgb(191,91,23)}
.Accent .q0-8{fill:rgb(127,201,127)}
.Accent .q1-8{fill:rgb(190,174,212)}
.Accent .q2-8{fill:rgb(253,192,134)}
.Accent .q3-8{fill:rgb(255,255,153)}
.Accent .q4-8{fill:rgb(56,108,176)}
.Accent .q5-8{fill:rgb(240,2,127)}
.Accent .q6-8{fill:rgb(191,91,23)}
.Accent .q7-8{fill:rgb(102,102,102)}
.Dark2 .q0-3{fill:rgb(27,158,119)}
.Dark2 .q1-3{fill:rgb(217,95,2)}
.Dark2 .q2-3{fill:rgb(117,112,179)}
.Dark2 .q0-4{fill:rgb(27,158,119)}
.Dark2 .q1-4{fill:rgb(217,95,2)}
.Dark2 .q2-4{fill:rgb(117,112,179)}
.Dark2 .q3-4{fill:rgb(231,41,138)}
.Dark2 .q0-5{fill:rgb(27,158,119)}
.Dark2 .q1-5{fill:rgb(217,95,2)}
.Dark2 .q2-5{fill:rgb(117,112,179)}
.Dark2 .q3-5{fill:rgb(231,41,138)}
.Dark2 .q4-5{fill:rgb(102,166,30)}
.Dark2 .q0-6{fill:rgb(27,158,119)}
.Dark2 .q1-6{fill:rgb(217,95,2)}
.Dark2 .q2-6{fill:rgb(117,112,179)}
.Dark2 .q3-6{fill:rgb(231,41,138)}
.Dark2 .q4-6{fill:rgb(102,166,30)}
.Dark2 .q5-6{fill:rgb(230,171,2)}
.Dark2 .q0-7{fill:rgb(27,158,119)}
.Dark2 .q1-7{fill:rgb(217,95,2)}
.Dark2 .q2-7{fill:rgb(117,112,179)}
.Dark2 .q3-7{fill:rgb(231,41,138)}
.Dark2 .q4-7{fill:rgb(102,166,30)}
.Dark2 .q5-7{fill:rgb(230,171,2)}
.Dark2 .q6-7{fill:rgb(166,118,29)}
.Dark2 .q0-8{fill:rgb(27,158,119)}
.Dark2 .q1-8{fill:rgb(217,95,2)}
.Dark2 .q2-8{fill:rgb(117,112,179)}
.Dark2 .q3-8{fill:rgb(231,41,138)}
.Dark2 .q4-8{fill:rgb(102,166,30)}
.Dark2 .q5-8{fill:rgb(230,171,2)}
.Dark2 .q6-8{fill:rgb(166,118,29)}
.Dark2 .q7-8{fill:rgb(102,102,102)}
.Paired .q0-3{fill:rgb(166,206,227)}
.Paired .q1-3{fill:rgb(31,120,180)}
.Paired .q2-3{fill:rgb(178,223,138)}
.Paired .q0-4{fill:rgb(166,206,227)}
.Paired .q1-4{fill:rgb(31,120,180)}
.Paired .q2-4{fill:rgb(178,223,138)}
.Paired .q3-4{fill:rgb(51,160,44)}
.Paired .q0-5{fill:rgb(166,206,227)}
.Paired .q1-5{fill:rgb(31,120,180)}
.Paired .q2-5{fill:rgb(178,223,138)}
.Paired .q3-5{fill:rgb(51,160,44)}
.Paired .q4-5{fill:rgb(251,154,153)}
.Paired .q0-6{fill:rgb(166,206,227)}
.Paired .q1-6{fill:rgb(31,120,180)}
.Paired .q2-6{fill:rgb(178,223,138)}
.Paired .q3-6{fill:rgb(51,160,44)}
.Paired .q4-6{fill:rgb(251,154,153)}
.Paired .q5-6{fill:rgb(227,26,28)}
.Paired .q0-7{fill:rgb(166,206,227)}
.Paired .q1-7{fill:rgb(31,120,180)}
.Paired .q2-7{fill:rgb(178,223,138)}
.Paired .q3-7{fill:rgb(51,160,44)}
.Paired .q4-7{fill:rgb(251,154,153)}
.Paired .q5-7{fill:rgb(227,26,28)}
.Paired .q6-7{fill:rgb(253,191,111)}
.Paired .q0-8{fill:rgb(166,206,227)}
.Paired .q1-8{fill:rgb(31,120,180)}
.Paired .q2-8{fill:rgb(178,223,138)}
.Paired .q3-8{fill:rgb(51,160,44)}
.Paired .q4-8{fill:rgb(251,154,153)}
.Paired .q5-8{fill:rgb(227,26,28)}
.Paired .q6-8{fill:rgb(253,191,111)}
.Paired .q7-8{fill:rgb(255,127,0)}
.Paired .q0-9{fill:rgb(166,206,227)}
.Paired .q1-9{fill:rgb(31,120,180)}
.Paired .q2-9{fill:rgb(178,223,138)}
.Paired .q3-9{fill:rgb(51,160,44)}
.Paired .q4-9{fill:rgb(251,154,153)}
.Paired .q5-9{fill:rgb(227,26,28)}
.Paired .q6-9{fill:rgb(253,191,111)}
.Paired .q7-9{fill:rgb(255,127,0)}
.Paired .q8-9{fill:rgb(202,178,214)}
.Paired .q0-10{fill:rgb(166,206,227)}
.Paired .q1-10{fill:rgb(31,120,180)}
.Paired .q2-10{fill:rgb(178,223,138)}
.Paired .q3-10{fill:rgb(51,160,44)}
.Paired .q4-10{fill:rgb(251,154,153)}
.Paired .q5-10{fill:rgb(227,26,28)}
.Paired .q6-10{fill:rgb(253,191,111)}
.Paired .q7-10{fill:rgb(255,127,0)}
.Paired .q8-10{fill:rgb(202,178,214)}
.Paired .q9-10{fill:rgb(106,61,154)}
.Paired .q0-11{fill:rgb(166,206,227)}
.Paired .q1-11{fill:rgb(31,120,180)}
.Paired .q2-11{fill:rgb(178,223,138)}
.Paired .q3-11{fill:rgb(51,160,44)}
.Paired .q4-11{fill:rgb(251,154,153)}
.Paired .q5-11{fill:rgb(227,26,28)}
.Paired .q6-11{fill:rgb(253,191,111)}
.Paired .q7-11{fill:rgb(255,127,0)}
.Paired .q8-11{fill:rgb(202,178,214)}
.Paired .q9-11{fill:rgb(106,61,154)}
.Paired .q10-11{fill:rgb(255,255,153)}
.Paired .q0-12{fill:rgb(166,206,227)}
.Paired .q1-12{fill:rgb(31,120,180)}
.Paired .q2-12{fill:rgb(178,223,138)}
.Paired .q3-12{fill:rgb(51,160,44)}
.Paired .q4-12{fill:rgb(251,154,153)}
.Paired .q5-12{fill:rgb(227,26,28)}
.Paired .q6-12{fill:rgb(253,191,111)}
.Paired .q7-12{fill:rgb(255,127,0)}
.Paired .q8-12{fill:rgb(202,178,214)}
.Paired .q9-12{fill:rgb(106,61,154)}
.Paired .q10-12{fill:rgb(255,255,153)}
.Paired .q11-12{fill:rgb(177,89,40)}
.Pastel1 .q0-3{fill:rgb(251,180,174)}
.Pastel1 .q1-3{fill:rgb(179,205,227)}
.Pastel1 .q2-3{fill:rgb(204,235,197)}
.Pastel1 .q0-4{fill:rgb(251,180,174)}
.Pastel1 .q1-4{fill:rgb(179,205,227)}
.Pastel1 .q2-4{fill:rgb(204,235,197)}
.Pastel1 .q3-4{fill:rgb(222,203,228)}
.Pastel1 .q0-5{fill:rgb(251,180,174)}
.Pastel1 .q1-5{fill:rgb(179,205,227)}
.Pastel1 .q2-5{fill:rgb(204,235,197)}
.Pastel1 .q3-5{fill:rgb(222,203,228)}
.Pastel1 .q4-5{fill:rgb(254,217,166)}
.Pastel1 .q0-6{fill:rgb(251,180,174)}
.Pastel1 .q1-6{fill:rgb(179,205,227)}
.Pastel1 .q2-6{fill:rgb(204,235,197)}
.Pastel1 .q3-6{fill:rgb(222,203,228)}
.Pastel1 .q4-6{fill:rgb(254,217,166)}
.Pastel1 .q5-6{fill:rgb(255,255,204)}
.Pastel1 .q0-7{fill:rgb(251,180,174)}
.Pastel1 .q1-7{fill:rgb(179,205,227)}
.Pastel1 .q2-7{fill:rgb(204,235,197)}
.Pastel1 .q3-7{fill:rgb(222,203,228)}
.Pastel1 .q4-7{fill:rgb(254,217,166)}
.Pastel1 .q5-7{fill:rgb(255,255,204)}
.Pastel1 .q6-7{fill:rgb(229,216,189)}
.Pastel1 .q0-8{fill:rgb(251,180,174)}
.Pastel1 .q1-8{fill:rgb(179,205,227)}
.Pastel1 .q2-8{fill:rgb(204,235,197)}
.Pastel1 .q3-8{fill:rgb(222,203,228)}
.Pastel1 .q4-8{fill:rgb(254,217,166)}
.Pastel1 .q5-8{fill:rgb(255,255,204)}
.Pastel1 .q6-8{fill:rgb(229,216,189)}
.Pastel1 .q7-8{fill:rgb(253,218,236)}
.Pastel1 .q0-9{fill:rgb(251,180,174)}
.Pastel1 .q1-9{fill:rgb(179,205,227)}
.Pastel1 .q2-9{fill:rgb(204,235,197)}
.Pastel1 .q3-9{fill:rgb(222,203,228)}
.Pastel1 .q4-9{fill:rgb(254,217,166)}
.Pastel1 .q5-9{fill:rgb(255,255,204)}
.Pastel1 .q6-9{fill:rgb(229,216,189)}
.Pastel1 .q7-9{fill:rgb(253,218,236)}
.Pastel1 .q8-9{fill:rgb(242,242,242)}
.Pastel2 .q0-3{fill:rgb(179,226,205)}
.Pastel2 .q1-3{fill:rgb(253,205,172)}
.Pastel2 .q2-3{fill:rgb(203,213,232)}
.Pastel2 .q0-4{fill:rgb(179,226,205)}
.Pastel2 .q1-4{fill:rgb(253,205,172)}
.Pastel2 .q2-4{fill:rgb(203,213,232)}
.Pastel2 .q3-4{fill:rgb(244,202,228)}
.Pastel2 .q0-5{fill:rgb(179,226,205)}
.Pastel2 .q1-5{fill:rgb(253,205,172)}
.Pastel2 .q2-5{fill:rgb(203,213,232)}
.Pastel2 .q3-5{fill:rgb(244,202,228)}
.Pastel2 .q4-5{fill:rgb(230,245,201)}
.Pastel2 .q0-6{fill:rgb(179,226,205)}
.Pastel2 .q1-6{fill:rgb(253,205,172)}
.Pastel2 .q2-6{fill:rgb(203,213,232)}
.Pastel2 .q3-6{fill:rgb(244,202,228)}
.Pastel2 .q4-6{fill:rgb(230,245,201)}
.Pastel2 .q5-6{fill:rgb(255,242,174)}
.Pastel2 .q0-7{fill:rgb(179,226,205)}
.Pastel2 .q1-7{fill:rgb(253,205,172)}
.Pastel2 .q2-7{fill:rgb(203,213,232)}
.Pastel2 .q3-7{fill:rgb(244,202,228)}
.Pastel2 .q4-7{fill:rgb(230,245,201)}
.Pastel2 .q5-7{fill:rgb(255,242,174)}
.Pastel2 .q6-7{fill:rgb(241,226,204)}
.Pastel2 .q0-8{fill:rgb(179,226,205)}
.Pastel2 .q1-8{fill:rgb(253,205,172)}
.Pastel2 .q2-8{fill:rgb(203,213,232)}
.Pastel2 .q3-8{fill:rgb(244,202,228)}
.Pastel2 .q4-8{fill:rgb(230,245,201)}
.Pastel2 .q5-8{fill:rgb(255,242,174)}
.Pastel2 .q6-8{fill:rgb(241,226,204)}
.Pastel2 .q7-8{fill:rgb(204,204,204)}
.Set1 .q0-3{fill:rgb(228,26,28)}
.Set1 .q1-3{fill:rgb(55,126,184)}
.Set1 .q2-3{fill:rgb(77,175,74)}
.Set1 .q0-4{fill:rgb(228,26,28)}
.Set1 .q1-4{fill:rgb(55,126,184)}
.Set1 .q2-4{fill:rgb(77,175,74)}
.Set1 .q3-4{fill:rgb(152,78,163)}
.Set1 .q0-5{fill:rgb(228,26,28)}
.Set1 .q1-5{fill:rgb(55,126,184)}
.Set1 .q2-5{fill:rgb(77,175,74)}
.Set1 .q3-5{fill:rgb(152,78,163)}
.Set1 .q4-5{fill:rgb(255,127,0)}
.Set1 .q0-6{fill:rgb(228,26,28)}
.Set1 .q1-6{fill:rgb(55,126,184)}
.Set1 .q2-6{fill:rgb(77,175,74)}
.Set1 .q3-6{fill:rgb(152,78,163)}
.Set1 .q4-6{fill:rgb(255,127,0)}
.Set1 .q5-6{fill:rgb(255,255,51)}
.Set1 .q0-7{fill:rgb(228,26,28)}
.Set1 .q1-7{fill:rgb(55,126,184)}
.Set1 .q2-7{fill:rgb(77,175,74)}
.Set1 .q3-7{fill:rgb(152,78,163)}
.Set1 .q4-7{fill:rgb(255,127,0)}
.Set1 .q5-7{fill:rgb(255,255,51)}
.Set1 .q6-7{fill:rgb(166,86,40)}
.Set1 .q0-8{fill:rgb(228,26,28)}
.Set1 .q1-8{fill:rgb(55,126,184)}
.Set1 .q2-8{fill:rgb(77,175,74)}
.Set1 .q3-8{fill:rgb(152,78,163)}
.Set1 .q4-8{fill:rgb(255,127,0)}
.Set1 .q5-8{fill:rgb(255,255,51)}
.Set1 .q6-8{fill:rgb(166,86,40)}
.Set1 .q7-8{fill:rgb(247,129,191)}
.Set1 .q0-9{fill:rgb(228,26,28)}
.Set1 .q1-9{fill:rgb(55,126,184)}
.Set1 .q2-9{fill:rgb(77,175,74)}
.Set1 .q3-9{fill:rgb(152,78,163)}
.Set1 .q4-9{fill:rgb(255,127,0)}
.Set1 .q5-9{fill:rgb(255,255,51)}
.Set1 .q6-9{fill:rgb(166,86,40)}
.Set1 .q7-9{fill:rgb(247,129,191)}
.Set1 .q8-9{fill:rgb(153,153,153)}
.Set2 .q0-3{fill:rgb(102,194,165)}
.Set2 .q1-3{fill:rgb(252,141,98)}
.Set2 .q2-3{fill:rgb(141,160,203)}
.Set2 .q0-4{fill:rgb(102,194,165)}
.Set2 .q1-4{fill:rgb(252,141,98)}
.Set2 .q2-4{fill:rgb(141,160,203)}
.Set2 .q3-4{fill:rgb(231,138,195)}
.Set2 .q0-5{fill:rgb(102,194,165)}
.Set2 .q1-5{fill:rgb(252,141,98)}
.Set2 .q2-5{fill:rgb(141,160,203)}
.Set2 .q3-5{fill:rgb(231,138,195)}
.Set2 .q4-5{fill:rgb(166,216,84)}
.Set2 .q0-6{fill:rgb(102,194,165)}
.Set2 .q1-6{fill:rgb(252,141,98)}
.Set2 .q2-6{fill:rgb(141,160,203)}
.Set2 .q3-6{fill:rgb(231,138,195)}
.Set2 .q4-6{fill:rgb(166,216,84)}
.Set2 .q5-6{fill:rgb(255,217,47)}
.Set2 .q0-7{fill:rgb(102,194,165)}
.Set2 .q1-7{fill:rgb(252,141,98)}
.Set2 .q2-7{fill:rgb(141,160,203)}
.Set2 .q3-7{fill:rgb(231,138,195)}
.Set2 .q4-7{fill:rgb(166,216,84)}
.Set2 .q5-7{fill:rgb(255,217,47)}
.Set2 .q6-7{fill:rgb(229,196,148)}
.Set2 .q0-8{fill:rgb(102,194,165)}
.Set2 .q1-8{fill:rgb(252,141,98)}
.Set2 .q2-8{fill:rgb(141,160,203)}
.Set2 .q3-8{fill:rgb(231,138,195)}
.Set2 .q4-8{fill:rgb(166,216,84)}
.Set2 .q5-8{fill:rgb(255,217,47)}
.Set2 .q6-8{fill:rgb(229,196,148)}
.Set2 .q7-8{fill:rgb(179,179,179)}
.Set3 .q0-3{fill:rgb(141,211,199)}
.Set3 .q1-3{fill:rgb(255,255,179)}
.Set3 .q2-3{fill:rgb(190,186,218)}
.Set3 .q0-4{fill:rgb(141,211,199)}
.Set3 .q1-4{fill:rgb(255,255,179)}
.Set3 .q2-4{fill:rgb(190,186,218)}
.Set3 .q3-4{fill:rgb(251,128,114)}
.Set3 .q0-5{fill:rgb(141,211,199)}
.Set3 .q1-5{fill:rgb(255,255,179)}
.Set3 .q2-5{fill:rgb(190,186,218)}
.Set3 .q3-5{fill:rgb(251,128,114)}
.Set3 .q4-5{fill:rgb(128,177,211)}
.Set3 .q0-6{fill:rgb(141,211,199)}
.Set3 .q1-6{fill:rgb(255,255,179)}
.Set3 .q2-6{fill:rgb(190,186,218)}
.Set3 .q3-6{fill:rgb(251,128,114)}
.Set3 .q4-6{fill:rgb(128,177,211)}
.Set3 .q5-6{fill:rgb(253,180,98)}
.Set3 .q0-7{fill:rgb(141,211,199)}
.Set3 .q1-7{fill:rgb(255,255,179)}
.Set3 .q2-7{fill:rgb(190,186,218)}
.Set3 .q3-7{fill:rgb(251,128,114)}
.Set3 .q4-7{fill:rgb(128,177,211)}
.Set3 .q5-7{fill:rgb(253,180,98)}
.Set3 .q6-7{fill:rgb(179,222,105)}
.Set3 .q0-8{fill:rgb(141,211,199)}
.Set3 .q1-8{fill:rgb(255,255,179)}
.Set3 .q2-8{fill:rgb(190,186,218)}
.Set3 .q3-8{fill:rgb(251,128,114)}
.Set3 .q4-8{fill:rgb(128,177,211)}
.Set3 .q5-8{fill:rgb(253,180,98)}
.Set3 .q6-8{fill:rgb(179,222,105)}
.Set3 .q7-8{fill:rgb(252,205,229)}
.Set3 .q0-9{fill:rgb(141,211,199)}
.Set3 .q1-9{fill:rgb(255,255,179)}
.Set3 .q2-9{fill:rgb(190,186,218)}
.Set3 .q3-9{fill:rgb(251,128,114)}
.Set3 .q4-9{fill:rgb(128,177,211)}
.Set3 .q5-9{fill:rgb(253,180,98)}
.Set3 .q6-9{fill:rgb(179,222,105)}
.Set3 .q7-9{fill:rgb(252,205,229)}
.Set3 .q8-9{fill:rgb(217,217,217)}
.Set3 .q0-10{fill:rgb(141,211,199)}
.Set3 .q1-10{fill:rgb(255,255,179)}
.Set3 .q2-10{fill:rgb(190,186,218)}
.Set3 .q3-10{fill:rgb(251,128,114)}
.Set3 .q4-10{fill:rgb(128,177,211)}
.Set3 .q5-10{fill:rgb(253,180,98)}
.Set3 .q6-10{fill:rgb(179,222,105)}
.Set3 .q7-10{fill:rgb(252,205,229)}
.Set3 .q8-10{fill:rgb(217,217,217)}
.Set3 .q9-10{fill:rgb(188,128,189)}
.Set3 .q0-11{fill:rgb(141,211,199)}
.Set3 .q1-11{fill:rgb(255,255,179)}
.Set3 .q2-11{fill:rgb(190,186,218)}
.Set3 .q3-11{fill:rgb(251,128,114)}
.Set3 .q4-11{fill:rgb(128,177,211)}
.Set3 .q5-11{fill:rgb(253,180,98)}
.Set3 .q6-11{fill:rgb(179,222,105)}
.Set3 .q7-11{fill:rgb(252,205,229)}
.Set3 .q8-11{fill:rgb(217,217,217)}
.Set3 .q9-11{fill:rgb(188,128,189)}
.Set3 .q10-11{fill:rgb(204,235,197)}
.Set3 .q0-12{fill:rgb(141,211,199)}
.Set3 .q1-12{fill:rgb(255,255,179)}
.Set3 .q2-12{fill:rgb(190,186,218)}
.Set3 .q3-12{fill:rgb(251,128,114)}
.Set3 .q4-12{fill:rgb(128,177,211)}
.Set3 .q5-12{fill:rgb(253,180,98)}
.Set3 .q6-12{fill:rgb(179,222,105)}
.Set3 .q7-12{fill:rgb(252,205,229)}
.Set3 .q8-12{fill:rgb(217,217,217)}
.Set3 .q9-12{fill:rgb(188,128,189)}
.Set3 .q10-12{fill:rgb(204,235,197)}
.Set3 .q11-12{fill:rgb(255,237,111)}

/* /vendor/jquery-layout/demos/css/jquery-ui.css */
/*! jQuery UI - v1.11.0 - 2014-07-01
* http://jqueryui.com
* Includes: core.css, draggable.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, menu.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
	font-size: 100%;
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	position: relative;
	margin: 0;
	padding: 3px 1em 3px .4em;
	cursor: pointer;
	min-height: 0; /* support: IE7 */
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("images/animated-overlay.gif");
	height: 100%;
	filter: alpha(opacity=25);
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	/* Support: IE7 */
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-button {
	display: inline-block;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
	right: 0.5em;
	left: auto;
	margin-top: -8px;
	position: absolute;
	top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
	text-align: left;
	padding: 0.4em 2.1em 0.4em 1em;
	display: block;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
}
/* vertically center icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}

/* /vendor/jquery-ui/themes/base/base.css */
/*!
 * jQuery UI CSS Framework 1.11.4
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 */
@import url("core.css");

@import url("accordion.css");
@import url("autocomplete.css");
@import url("button.css");
@import url("datepicker.css");
@import url("dialog.css");
@import url("draggable.css");
@import url("menu.css");
@import url("progressbar.css");
@import url("resizable.css");
@import url("selectable.css");
@import url("selectmenu.css");
@import url("sortable.css");
@import url("slider.css");
@import url("spinner.css");
@import url("tabs.css");
@import url("tooltip.css");

/* /vendor/jquery-ui/themes/base/theme.css */
/*!
 * jQuery UI CSS Framework 1.11.4
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */


/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
	font-size: 1.1em/*{fsDefault}*/;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
	font-size: 1em;
}
.ui-widget-content {
	border: 1px solid #aaaaaa/*{borderColorContent}*/;
	background: #ffffff/*{bgColorContent}*/ url("images/ui-bg_flat_75_ffffff_40x100.png")/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
	color: #222222/*{fcContent}*/;
}
.ui-widget-content a {
	color: #222222/*{fcContent}*/;
}
.ui-widget-header {
	border: 1px solid #aaaaaa/*{borderColorHeader}*/;
	background: #cccccc/*{bgColorHeader}*/ url("images/ui-bg_highlight-soft_75_cccccc_1x100.png")/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
	color: #222222/*{fcHeader}*/;
	font-weight: bold;
}
.ui-widget-header a {
	color: #222222/*{fcHeader}*/;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3/*{borderColorDefault}*/;
	background: #e6e6e6/*{bgColorDefault}*/ url("images/ui-bg_glass_75_e6e6e6_1x400.png")/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #555555/*{fcDefault}*/;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #555555/*{fcDefault}*/;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999/*{borderColorHover}*/;
	background: #dadada/*{bgColorHover}*/ url("images/ui-bg_glass_75_dadada_1x400.png")/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #212121/*{fcHover}*/;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
	color: #212121/*{fcHover}*/;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa/*{borderColorActive}*/;
	background: #ffffff/*{bgColorActive}*/ url("images/ui-bg_glass_65_ffffff_1x400.png")/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
	font-weight: normal/*{fwDefault}*/;
	color: #212121/*{fcActive}*/;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121/*{fcActive}*/;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fcefa1/*{borderColorHighlight}*/;
	background: #fbf9ee/*{bgColorHighlight}*/ url("images/ui-bg_glass_55_fbf9ee_1x400.png")/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/;
	color: #363636/*{fcHighlight}*/;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636/*{fcHighlight}*/;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a/*{borderColorError}*/;
	background: #fef1ec/*{bgColorError}*/ url("images/ui-bg_glass_95_fef1ec_1x400.png")/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/;
	color: #cd0a0a/*{fcError}*/;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a/*{fcError}*/;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a/*{fcError}*/;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("images/ui-icons_222222_256x240.png")/*{iconsContent}*/;
}
.ui-widget-header .ui-icon {
	background-image: url("images/ui-icons_222222_256x240.png")/*{iconsHeader}*/;
}
.ui-state-default .ui-icon {
	background-image: url("images/ui-icons_888888_256x240.png")/*{iconsDefault}*/;
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url("images/ui-icons_454545_256x240.png")/*{iconsHover}*/;
}
.ui-state-active .ui-icon {
	background-image: url("images/ui-icons_454545_256x240.png")/*{iconsActive}*/;
}
.ui-state-highlight .ui-icon {
	background-image: url("images/ui-icons_2e83ff_256x240.png")/*{iconsHighlight}*/;
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("images/ui-icons_cd0a0a_256x240.png")/*{iconsError}*/;
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px/*{cornerRadius}*/;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa/*{bgColorOverlay}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
	opacity: .3/*{opacityOverlay}*/;
	filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/; /* support: IE8 */
}
.ui-widget-shadow {
	margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
	padding: 8px/*{thicknessShadow}*/;
	background: #aaaaaa/*{bgColorShadow}*/ url("images/ui-bg_flat_0_aaaaaa_40x100.png")/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
	opacity: .3/*{opacityShadow}*/;
	filter: Alpha(Opacity=30)/*{opacityFilterShadow}*/; /* support: IE8 */
	border-radius: 8px/*{cornerRadiusShadow}*/;
}

/* /vendor/bootstrap-select/dist/css/bootstrap-select.min.css */
/*!
 * Bootstrap-select v1.11.2 (http://silviomoreto.github.io/bootstrap-select)
 *
 * Copyright 2013-2016 bootstrap-select
 * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
 */select.bs-select-hidden,select.selectpicker{display:none!important}.bootstrap-select{width:220px\9}.bootstrap-select>.dropdown-toggle{width:100%;padding-right:25px;z-index:1}.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:#999}.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none}.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2}.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle{border-color:#b94a48}.bootstrap-select.fit-width{width:auto!important}.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.bootstrap-select .dropdown-toggle:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:none}.bootstrap-select.form-control:not([class*=col-]){width:100%}.bootstrap-select.form-control.input-group-btn{z-index:auto}.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child)>.btn{border-radius:0}.bootstrap-select.btn-group:not(.input-group-btn),.bootstrap-select.btn-group[class*=col-]{float:none;display:inline-block;margin-left:0}.bootstrap-select.btn-group.dropdown-menu-right,.bootstrap-select.btn-group[class*=col-].dropdown-menu-right,.row .bootstrap-select.btn-group[class*=col-].dropdown-menu-right{float:right}.form-group .bootstrap-select.btn-group,.form-horizontal .bootstrap-select.btn-group,.form-inline .bootstrap-select.btn-group{margin-bottom:0}.form-group-lg .bootstrap-select.btn-group.form-control,.form-group-sm .bootstrap-select.btn-group.form-control{padding:0}.form-inline .bootstrap-select.btn-group .form-control{width:100%}.bootstrap-select.btn-group.disabled,.bootstrap-select.btn-group>.disabled{cursor:not-allowed}.bootstrap-select.btn-group.disabled:focus,.bootstrap-select.btn-group>.disabled:focus{outline:0!important}.bootstrap-select.btn-group.bs-container{position:absolute;height:0!important;padding:0!important}.bootstrap-select.btn-group.bs-container .dropdown-menu{z-index:1060}.bootstrap-select.btn-group .dropdown-toggle .filter-option{display:inline-block;overflow:hidden;width:100%;text-align:left}.bootstrap-select.btn-group .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.bootstrap-select.btn-group[class*=col-] .dropdown-toggle{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.bootstrap-select.btn-group .dropdown-menu li{position:relative}.bootstrap-select.btn-group .dropdown-menu li.active small{color:#fff}.bootstrap-select.btn-group .dropdown-menu li.disabled a{cursor:not-allowed}.bootstrap-select.btn-group .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bootstrap-select.btn-group .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{display:none}.bootstrap-select.btn-group .dropdown-menu li a span.text{display:inline-block}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option{position:static}.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark{position:absolute;display:inline-block;right:15px;margin-top:5px}.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle{z-index:1061}.bootstrap-select.show-menu-arrow .dropdown-toggle:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before{bottom:auto;top:-3px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after{bottom:auto;top:-3px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:before{display:block}.bs-actionsbox,.bs-donebutton,.bs-searchbox{padding:4px 8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}
/* /vendor/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css */
/* ========================================================================
 * bootstrap-switch - v3.3.2
 * http://www.bootstrap-switch.org
 * ========================================================================
 * Copyright 2012-2013 Mattia Larentis
 *
 * ========================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================================
 */

.bootstrap-switch{display:inline-block;direction:ltr;cursor:pointer;border-radius:4px;border:1px solid;border-color:#ccc;position:relative;text-align:left;overflow:hidden;line-height:8px;z-index:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.bootstrap-switch .bootstrap-switch-container{display:inline-block;top:0;border-radius:4px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-handle-off,.bootstrap-switch .bootstrap-switch-label{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:inline-block !important;height:100%;padding:6px 12px;font-size:14px;line-height:20px}.bootstrap-switch .bootstrap-switch-handle-on,.bootstrap-switch .bootstrap-switch-handle-off{text-align:center;z-index:1}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary{color:#fff;background:#428bca}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info{color:#fff;background:#5bc0de}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success{color:#fff;background:#5cb85c}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning{background:#f0ad4e;color:#fff}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger{color:#fff;background:#d9534f}.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{color:#000;background:#eee}.bootstrap-switch .bootstrap-switch-label{text-align:center;margin-top:-1px;margin-bottom:-1px;z-index:100;color:#333;background:#fff}.bootstrap-switch .bootstrap-switch-handle-on{border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch .bootstrap-switch-handle-off{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch input[type='radio'],.bootstrap-switch input[type='checkbox']{position:absolute !important;top:0;left:0;opacity:0;filter:alpha(opacity=0);z-index:-1}.bootstrap-switch input[type='radio'].form-control,.bootstrap-switch input[type='checkbox'].form-control{height:auto}.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label{padding:1px 5px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label{padding:5px 10px;font-size:12px;line-height:1.5}.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label{padding:6px 16px;font-size:18px;line-height:1.33}.bootstrap-switch.bootstrap-switch-disabled,.bootstrap-switch.bootstrap-switch-readonly,.bootstrap-switch.bootstrap-switch-indeterminate{cursor:default !important}.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label{opacity:.5;filter:alpha(opacity=50);cursor:default !important}.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container{-webkit-transition:margin-left .5s;transition:margin-left .5s}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on{border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off{border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-left-radius:3px;border-top-left-radius:3px}.bootstrap-switch.bootstrap-switch-focused{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label{border-bottom-right-radius:3px;border-top-right-radius:3px}.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label{border-bottom-left-radius:3px;border-top-left-radius:3px}
/* /vendor/bootstrap-datepicker/css/datepicker3.css */
/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
  padding: 4px;
  border-radius: 4px;
  direction: ltr;
}
.datepicker-inline {
  width: 220px;
}
.datepicker.datepicker-rtl {
  direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
  float: right;
}
.datepicker-dropdown {
  top: 0;
  left: 0;
}
.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-top: 0;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}
.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
  position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}
.datepicker-dropdown.datepicker-orient-top:before {
  top: -7px;
}
.datepicker-dropdown.datepicker-orient-top:after {
  top: -6px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid #999;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}
.datepicker > div {
  display: none;
}
.datepicker.days div.datepicker-days {
  display: block;
}
.datepicker.months div.datepicker-months {
  display: block;
}
.datepicker.years div.datepicker-years {
  display: block;
}
.datepicker table {
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.datepicker table tr td,
.datepicker table tr th {
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: #eeeeee;
  cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  color: #000000;
  background-color: #ffdb99;
  border-color: #ffb733;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:focus,
.datepicker table tr td.today:hover:focus,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today.disabled:hover:focus,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.today,
.open .dropdown-toggle.datepicker table tr td.today:hover,
.open .dropdown-toggle.datepicker table tr td.today.disabled,
.open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
  color: #000000;
  background-color: #ffcd70;
  border-color: #f59e00;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.today,
.open .dropdown-toggle.datepicker table tr td.today:hover,
.open .dropdown-toggle.datepicker table tr td.today.disabled,
.open .dropdown-toggle.datepicker table tr td.today.disabled:hover {
  background-image: none;
}
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled],
fieldset[disabled] .datepicker table tr td.today,
fieldset[disabled] .datepicker table tr td.today:hover,
fieldset[disabled] .datepicker table tr td.today.disabled,
fieldset[disabled] .datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover.disabled:hover,
.datepicker table tr td.today.disabled.disabled:hover,
.datepicker table tr td.today.disabled:hover.disabled:hover,
.datepicker table tr td.today[disabled]:hover,
.datepicker table tr td.today:hover[disabled]:hover,
.datepicker table tr td.today.disabled[disabled]:hover,
.datepicker table tr td.today.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td.today:hover,
fieldset[disabled] .datepicker table tr td.today:hover:hover,
fieldset[disabled] .datepicker table tr td.today.disabled:hover,
fieldset[disabled] .datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today:hover.disabled:focus,
.datepicker table tr td.today.disabled.disabled:focus,
.datepicker table tr td.today.disabled:hover.disabled:focus,
.datepicker table tr td.today[disabled]:focus,
.datepicker table tr td.today:hover[disabled]:focus,
.datepicker table tr td.today.disabled[disabled]:focus,
.datepicker table tr td.today.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td.today:focus,
fieldset[disabled] .datepicker table tr td.today:hover:focus,
fieldset[disabled] .datepicker table tr td.today.disabled:focus,
fieldset[disabled] .datepicker table tr td.today.disabled:hover:focus,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today:hover.disabled:active,
.datepicker table tr td.today.disabled.disabled:active,
.datepicker table tr td.today.disabled:hover.disabled:active,
.datepicker table tr td.today[disabled]:active,
.datepicker table tr td.today:hover[disabled]:active,
.datepicker table tr td.today.disabled[disabled]:active,
.datepicker table tr td.today.disabled:hover[disabled]:active,
fieldset[disabled] .datepicker table tr td.today:active,
fieldset[disabled] .datepicker table tr td.today:hover:active,
fieldset[disabled] .datepicker table tr td.today.disabled:active,
fieldset[disabled] .datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today:hover.disabled.active,
.datepicker table tr td.today.disabled.disabled.active,
.datepicker table tr td.today.disabled:hover.disabled.active,
.datepicker table tr td.today[disabled].active,
.datepicker table tr td.today:hover[disabled].active,
.datepicker table tr td.today.disabled[disabled].active,
.datepicker table tr td.today.disabled:hover[disabled].active,
fieldset[disabled] .datepicker table tr td.today.active,
fieldset[disabled] .datepicker table tr td.today:hover.active,
fieldset[disabled] .datepicker table tr td.today.disabled.active,
fieldset[disabled] .datepicker table tr td.today.disabled:hover.active {
  background-color: #ffdb99;
  border-color: #ffb733;
}
.datepicker table tr td.today:hover:hover {
  color: #000;
}
.datepicker table tr td.today.active:hover {
  color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
  background: #eeeeee;
  border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
  color: #000000;
  background-color: #f7ca77;
  border-color: #f1a417;
  border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today:hover:focus,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today.disabled:hover:focus,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.range.today,
.open .dropdown-toggle.datepicker table tr td.range.today:hover,
.open .dropdown-toggle.datepicker table tr td.range.today.disabled,
.open .dropdown-toggle.datepicker table tr td.range.today.disabled:hover {
  color: #000000;
  background-color: #f4bb51;
  border-color: #bf800c;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.range.today,
.open .dropdown-toggle.datepicker table tr td.range.today:hover,
.open .dropdown-toggle.datepicker table tr td.range.today.disabled,
.open .dropdown-toggle.datepicker table tr td.range.today.disabled:hover {
  background-image: none;
}
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled],
fieldset[disabled] .datepicker table tr td.range.today,
fieldset[disabled] .datepicker table tr td.range.today:hover,
fieldset[disabled] .datepicker table tr td.range.today.disabled,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today:hover.disabled:hover,
.datepicker table tr td.range.today.disabled.disabled:hover,
.datepicker table tr td.range.today.disabled:hover.disabled:hover,
.datepicker table tr td.range.today[disabled]:hover,
.datepicker table tr td.range.today:hover[disabled]:hover,
.datepicker table tr td.range.today.disabled[disabled]:hover,
.datepicker table tr td.range.today.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover:hover,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today:hover.disabled:focus,
.datepicker table tr td.range.today.disabled.disabled:focus,
.datepicker table tr td.range.today.disabled:hover.disabled:focus,
.datepicker table tr td.range.today[disabled]:focus,
.datepicker table tr td.range.today:hover[disabled]:focus,
.datepicker table tr td.range.today.disabled[disabled]:focus,
.datepicker table tr td.range.today.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.today:focus,
fieldset[disabled] .datepicker table tr td.range.today:hover:focus,
fieldset[disabled] .datepicker table tr td.range.today.disabled:focus,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:focus,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today:hover.disabled:active,
.datepicker table tr td.range.today.disabled.disabled:active,
.datepicker table tr td.range.today.disabled:hover.disabled:active,
.datepicker table tr td.range.today[disabled]:active,
.datepicker table tr td.range.today:hover[disabled]:active,
.datepicker table tr td.range.today.disabled[disabled]:active,
.datepicker table tr td.range.today.disabled:hover[disabled]:active,
fieldset[disabled] .datepicker table tr td.range.today:active,
fieldset[disabled] .datepicker table tr td.range.today:hover:active,
fieldset[disabled] .datepicker table tr td.range.today.disabled:active,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today:hover.disabled.active,
.datepicker table tr td.range.today.disabled.disabled.active,
.datepicker table tr td.range.today.disabled:hover.disabled.active,
.datepicker table tr td.range.today[disabled].active,
.datepicker table tr td.range.today:hover[disabled].active,
.datepicker table tr td.range.today.disabled[disabled].active,
.datepicker table tr td.range.today.disabled:hover[disabled].active,
fieldset[disabled] .datepicker table tr td.range.today.active,
fieldset[disabled] .datepicker table tr td.range.today:hover.active,
fieldset[disabled] .datepicker table tr td.range.today.disabled.active,
fieldset[disabled] .datepicker table tr td.range.today.disabled:hover.active {
  background-color: #f7ca77;
  border-color: #f1a417;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  color: #ffffff;
  background-color: #999999;
  border-color: #555555;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:focus,
.datepicker table tr td.selected:hover:focus,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected.disabled:hover:focus,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.selected,
.open .dropdown-toggle.datepicker table tr td.selected:hover,
.open .dropdown-toggle.datepicker table tr td.selected.disabled,
.open .dropdown-toggle.datepicker table tr td.selected.disabled:hover {
  color: #ffffff;
  background-color: #858585;
  border-color: #373737;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.selected,
.open .dropdown-toggle.datepicker table tr td.selected:hover,
.open .dropdown-toggle.datepicker table tr td.selected.disabled,
.open .dropdown-toggle.datepicker table tr td.selected.disabled:hover {
  background-image: none;
}
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled],
fieldset[disabled] .datepicker table tr td.selected,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected.disabled,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover.disabled:hover,
.datepicker table tr td.selected.disabled.disabled:hover,
.datepicker table tr td.selected.disabled:hover.disabled:hover,
.datepicker table tr td.selected[disabled]:hover,
.datepicker table tr td.selected:hover[disabled]:hover,
.datepicker table tr td.selected.disabled[disabled]:hover,
.datepicker table tr td.selected.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected:hover:hover,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected:hover.disabled:focus,
.datepicker table tr td.selected.disabled.disabled:focus,
.datepicker table tr td.selected.disabled:hover.disabled:focus,
.datepicker table tr td.selected[disabled]:focus,
.datepicker table tr td.selected:hover[disabled]:focus,
.datepicker table tr td.selected.disabled[disabled]:focus,
.datepicker table tr td.selected.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected:hover:focus,
fieldset[disabled] .datepicker table tr td.selected.disabled:focus,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover:focus,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected:hover.disabled:active,
.datepicker table tr td.selected.disabled.disabled:active,
.datepicker table tr td.selected.disabled:hover.disabled:active,
.datepicker table tr td.selected[disabled]:active,
.datepicker table tr td.selected:hover[disabled]:active,
.datepicker table tr td.selected.disabled[disabled]:active,
.datepicker table tr td.selected.disabled:hover[disabled]:active,
fieldset[disabled] .datepicker table tr td.selected:active,
fieldset[disabled] .datepicker table tr td.selected:hover:active,
fieldset[disabled] .datepicker table tr td.selected.disabled:active,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected:hover.disabled.active,
.datepicker table tr td.selected.disabled.disabled.active,
.datepicker table tr td.selected.disabled:hover.disabled.active,
.datepicker table tr td.selected[disabled].active,
.datepicker table tr td.selected:hover[disabled].active,
.datepicker table tr td.selected.disabled[disabled].active,
.datepicker table tr td.selected.disabled:hover[disabled].active,
fieldset[disabled] .datepicker table tr td.selected.active,
fieldset[disabled] .datepicker table tr td.selected:hover.active,
fieldset[disabled] .datepicker table tr td.selected.disabled.active,
fieldset[disabled] .datepicker table tr td.selected.disabled:hover.active {
  background-color: #999999;
  border-color: #555555;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:focus,
.datepicker table tr td.active:hover:focus,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.disabled:hover:focus,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.active,
.open .dropdown-toggle.datepicker table tr td.active:hover,
.open .dropdown-toggle.datepicker table tr td.active.disabled,
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td.active,
.open .dropdown-toggle.datepicker table tr td.active:hover,
.open .dropdown-toggle.datepicker table tr td.active.disabled,
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
  background-image: none;
}
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled],
fieldset[disabled] .datepicker table tr td.active,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active.disabled,
fieldset[disabled] .datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover.disabled:hover,
.datepicker table tr td.active.disabled.disabled:hover,
.datepicker table tr td.active.disabled:hover.disabled:hover,
.datepicker table tr td.active[disabled]:hover,
.datepicker table tr td.active:hover[disabled]:hover,
.datepicker table tr td.active.disabled[disabled]:hover,
.datepicker table tr td.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active:hover:hover,
fieldset[disabled] .datepicker table tr td.active.disabled:hover,
fieldset[disabled] .datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active:hover.disabled:focus,
.datepicker table tr td.active.disabled.disabled:focus,
.datepicker table tr td.active.disabled:hover.disabled:focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active:hover[disabled]:focus,
.datepicker table tr td.active.disabled[disabled]:focus,
.datepicker table tr td.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active:hover:focus,
fieldset[disabled] .datepicker table tr td.active.disabled:focus,
fieldset[disabled] .datepicker table tr td.active.disabled:hover:focus,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active:hover.disabled:active,
.datepicker table tr td.active.disabled.disabled:active,
.datepicker table tr td.active.disabled:hover.disabled:active,
.datepicker table tr td.active[disabled]:active,
.datepicker table tr td.active:hover[disabled]:active,
.datepicker table tr td.active.disabled[disabled]:active,
.datepicker table tr td.active.disabled:hover[disabled]:active,
fieldset[disabled] .datepicker table tr td.active:active,
fieldset[disabled] .datepicker table tr td.active:hover:active,
fieldset[disabled] .datepicker table tr td.active.disabled:active,
fieldset[disabled] .datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active:hover.disabled.active,
.datepicker table tr td.active.disabled.disabled.active,
.datepicker table tr td.active.disabled:hover.disabled.active,
.datepicker table tr td.active[disabled].active,
.datepicker table tr td.active:hover[disabled].active,
.datepicker table tr td.active.disabled[disabled].active,
.datepicker table tr td.active.disabled:hover[disabled].active,
fieldset[disabled] .datepicker table tr td.active.active,
fieldset[disabled] .datepicker table tr td.active:hover.active,
fieldset[disabled] .datepicker table tr td.active.disabled.active,
fieldset[disabled] .datepicker table tr td.active.disabled:hover.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  border-radius: 4px;
}
.datepicker table tr td span:hover {
  background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:focus,
.datepicker table tr td span.active:hover:focus,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td span.active,
.open .dropdown-toggle.datepicker table tr td span.active:hover,
.open .dropdown-toggle.datepicker table tr td span.active.disabled,
.open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.open .dropdown-toggle.datepicker table tr td span.active,
.open .dropdown-toggle.datepicker table tr td span.active:hover,
.open .dropdown-toggle.datepicker table tr td span.active.disabled,
.open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
  background-image: none;
}
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled],
fieldset[disabled] .datepicker table tr td span.active,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active[disabled]:hover,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active:hover.disabled:active,
.datepicker table tr td span.active.disabled.disabled:active,
.datepicker table tr td span.active.disabled:hover.disabled:active,
.datepicker table tr td span.active[disabled]:active,
.datepicker table tr td span.active:hover[disabled]:active,
.datepicker table tr td span.active.disabled[disabled]:active,
.datepicker table tr td span.active.disabled:hover[disabled]:active,
fieldset[disabled] .datepicker table tr td span.active:active,
fieldset[disabled] .datepicker table tr td span.active:hover:active,
fieldset[disabled] .datepicker table tr td span.active.disabled:active,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active:hover.disabled.active,
.datepicker table tr td span.active.disabled.disabled.active,
.datepicker table tr td span.active.disabled:hover.disabled.active,
.datepicker table tr td span.active[disabled].active,
.datepicker table tr td span.active:hover[disabled].active,
.datepicker table tr td span.active.disabled[disabled].active,
.datepicker table tr td span.active.disabled:hover[disabled].active,
fieldset[disabled] .datepicker table tr td span.active.active,
fieldset[disabled] .datepicker table tr td span.active:hover.active,
fieldset[disabled] .datepicker table tr td span.active.disabled.active,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999999;
}
.datepicker th.datepicker-switch {
  width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
  cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}
.input-group.date .input-group-addon i {
  cursor: pointer;
}
.input-daterange input {
  text-align: center;
}
.input-daterange input:first-child {
  border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
  border-radius: 0 3px 3px 0;
}
.input-daterange .input-group-addon {
  width: auto;
  min-width: 16px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: solid #cccccc;
  border-width: 1px 0;
  margin-left: -5px;
  margin-right: -5px;
}
.datepicker.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  display: none;
  min-width: 160px;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  color: #333333;
  font-size: 13px;
  line-height: 1.42857143;
}
.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
  padding: 0px 5px;
}

/* /vendor/nouislider/distribute/jquery.nouislider.min.css */
/*! noUiSlider - 7.0.10 - 2014-12-27 14:50:47 */


.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-user-select:none;-ms-touch-action:none;-ms-user-select:none;-moz-user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base{width:100%;height:100%;position:relative}.noUi-origin{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-handle{position:relative;z-index:1}.noUi-stacking .noUi-handle{z-index:10}.noUi-state-tap .noUi-origin{-webkit-transition:left .3s,top .3s;transition:left .3s,top .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-background{background:#FAFAFA;box-shadow:inset 0 1px 1px #f0f0f0}.noUi-connect{background:#3FB8AF;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-origin{border-radius:2px}.noUi-target{border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-target.noUi-connect{box-shadow:inset 0 0 3px rgba(51,51,51,.45),0 3px 6px -5px #BBB}.noUi-dragable{cursor:w-resize}.noUi-vertical .noUi-dragable{cursor:n-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect,[disabled].noUi-connect{background:#B8B8B8}[disabled] .noUi-handle{cursor:not-allowed}
/* /vendor/dropzone/dist/min/dropzone.min.css */
@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,0.3);background:white;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:0.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:white}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-ms-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,0.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,0.8);background-color:rgba(255,255,255,0.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,0.4);padding:0 0.4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{-webkit-transform:scale(1.05, 1.05);-moz-transform:scale(1.05, 1.05);-ms-transform:scale(1.05, 1.05);-o-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);-webkit-filter:blur(8px);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;-moz-animation:pulse 6s ease infinite;-ms-animation:pulse 6s ease infinite;-o-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:rgba(255,255,255,0.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(to bottom, #666, #444);position:absolute;top:0;left:0;bottom:0;width:0;-webkit-transition:width 300ms ease-in-out;-moz-transition:width 300ms ease-in-out;-ms-transition:width 300ms ease-in-out;-o-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-ms-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(to bottom, #be2626, #a92222);padding:0.5em 1.2em;color:white}.dropzone .dz-preview .dz-error-message:after{content:'';position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}

/* /vendor/perfect-scrollbar/min/perfect-scrollbar.min.css */
/*! perfect-scrollbar - v0.5.8
* http://noraesae.github.com/perfect-scrollbar/
* Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */

.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail.in-scrolling,.ps-container:hover>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
/* /vendor/datetimepicker/jquery.datetimepicker.css */
.xdsoft_datetimepicker{
	box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
	background: #FFFFFF;
	border-bottom: 1px solid #BBBBBB;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	color: #333333;
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	padding: 8px;
	padding-left: 0;
	padding-top: 2px;
	position: absolute;
	z-index: 9999;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:none;
}

.xdsoft_datetimepicker iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 210px;
    background: transparent;
    border:none;
}
/*For IE8 or lower*/
.xdsoft_datetimepicker button {
    border:none !important;
}

.xdsoft_noselect{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.xdsoft_noselect::selection { background: transparent; }
.xdsoft_noselect::-moz-selection { background: transparent; }
.xdsoft_datetimepicker.xdsoft_inline{
	display: inline-block;
	position: static;
	box-shadow: none;
}
.xdsoft_datetimepicker *{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker  .xdsoft_timepicker{
	display:none;
}
.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker  .xdsoft_timepicker.active{
	display:block;
}
.xdsoft_datetimepicker .xdsoft_datepicker{
	width: 224px;
	float:left;
	margin-left:8px;
}
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker{
	width: 256px;
}
.xdsoft_datetimepicker  .xdsoft_timepicker{
	width: 58px;
	float:left;
	text-align:center;
	margin-left:8px;
	margin-top: 0;
}
.xdsoft_datetimepicker  .xdsoft_datepicker.active+.xdsoft_timepicker{
	margin-top:8px;
	margin-bottom:3px
}
.xdsoft_datetimepicker  .xdsoft_mounthpicker{
	position: relative;
	text-align: center;
}

.xdsoft_datetimepicker .xdsoft_label i,
.xdsoft_datetimepicker  .xdsoft_prev, 
.xdsoft_datetimepicker  .xdsoft_next,
.xdsoft_datetimepicker  .xdsoft_today_button{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);
}

.xdsoft_datetimepicker .xdsoft_label i{
	opacity:0.5;
	background-position:-92px -19px;
	display: inline-block;
	width: 9px;
	height: 20px;
	vertical-align: middle;
}

.xdsoft_datetimepicker  .xdsoft_prev{
    float: left;
	background-position:-20px 0;
}
.xdsoft_datetimepicker  .xdsoft_today_button{
    float: left;
	background-position:-70px 0;
	margin-left:5px;
}

.xdsoft_datetimepicker  .xdsoft_next{
    float: right;
	background-position: 0 0;
}

.xdsoft_datetimepicker  .xdsoft_next,
.xdsoft_datetimepicker  .xdsoft_prev ,
.xdsoft_datetimepicker  .xdsoft_today_button{
	background-color: transparent;
	background-repeat: no-repeat;
	border: 0 none currentColor;
	cursor: pointer;
	display: block;
	height: 30px;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	outline: medium none currentColor;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-indent: 100%;
	white-space: nowrap;
	width: 20px;
}
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_next{
	float:none;
	background-position:-40px -15px;
	height: 15px;
	width: 30px;
	display: block;
	margin-left:14px;
	margin-top:7px;
}
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_prev{
	background-position:-40px 0;
	margin-bottom:7px;
	margin-top: 0;
}
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box{
	height:151px;
	overflow:hidden;
	border-bottom:1px solid #DDDDDD;
}
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box >div >div{
	background: #F5F5F5;
	border-top:1px solid #DDDDDD;
	color: #666666;
	font-size: 12px;
	text-align: center;
	border-collapse:collapse;
	cursor:pointer;
	border-bottom-width: 0;
	height:25px;
	line-height:25px;
}

.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box >div > div:first-child{
 border-top-width: 0;
}
.xdsoft_datetimepicker  .xdsoft_today_button:hover,
.xdsoft_datetimepicker  .xdsoft_next:hover,
.xdsoft_datetimepicker  .xdsoft_prev:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.xdsoft_datetimepicker  .xdsoft_label{
	display: inline;
    position: relative;
    z-index: 9999;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
	float:left;
	width:182px;
	text-align:center;
	cursor:pointer;
}
.xdsoft_datetimepicker  .xdsoft_label:hover>span{
	text-decoration:underline;
}
.xdsoft_datetimepicker  .xdsoft_label:hover i{
	opacity:1.0;
}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select{
	border:1px solid #ccc;
	position:absolute;
	right: 0;
	top:30px;
	z-index:101;
	display:none;
	background:#fff;
	max-height:160px;
	overflow-y:hidden;
}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select.xdsoft_monthselect{right:-7px;}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select.xdsoft_yearselect{right:2px;}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover{
	color: #fff;
    background: #ff8000;
}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select > div > .xdsoft_option{
	padding:2px 10px 2px 5px;
	text-decoration:none !important;
}
.xdsoft_datetimepicker  .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current{
	background: #33AAFF;
	box-shadow: #178FE5 0 1px 3px 0 inset;
	color:#fff;
	font-weight: 700;
}
.xdsoft_datetimepicker  .xdsoft_month{
	width:100px;
	text-align:right;
}
.xdsoft_datetimepicker  .xdsoft_calendar{
	clear:both;
}
.xdsoft_datetimepicker  .xdsoft_year{
	width: 48px;
	margin-left: 5px;
}
.xdsoft_datetimepicker  .xdsoft_calendar table{
	border-collapse:collapse;
	width:100%;
	
}
.xdsoft_datetimepicker  .xdsoft_calendar td > div{
	padding-right:5px;
}
.xdsoft_datetimepicker  .xdsoft_calendar th{
	height: 25px;
}
.xdsoft_datetimepicker  .xdsoft_calendar td,.xdsoft_datetimepicker  .xdsoft_calendar th{
	width:14.2857142%;
	background: #F5F5F5;
	border:1px solid #DDDDDD;
	color: #666666;
	font-size: 12px;
	text-align: right;
	vertical-align: middle;
	padding: 0;
	border-collapse:collapse;
	cursor:pointer;
	height: 25px;
}
.xdsoft_datetimepicker.xdsoft_showweeks  .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks  .xdsoft_calendar th{
	width:12.5%;
}
.xdsoft_datetimepicker  .xdsoft_calendar th{
	background: #F1F1F1;
}
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_today{
	color:#33AAFF;
}
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{
	background: #33AAFF;
	box-shadow: #178FE5 0 1px 3px 0 inset;
	color:#fff;
	font-weight: 700;
}
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker  .xdsoft_time_box >div >div.xdsoft_disabled{
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled{
	opacity:0.2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
.xdsoft_datetimepicker  .xdsoft_calendar td:hover,
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box >div >div:hover{
	color: #fff !important;
    background: #ff8000 !important;
    box-shadow: none !important;
}
.xdsoft_datetimepicker  .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover{
	color: inherit	!important;
    background: inherit !important;
    box-shadow: inherit !important;
}
.xdsoft_datetimepicker  .xdsoft_calendar th{
	font-weight: 700;
	text-align: center;
	color: #999;
	cursor:default;
}
.xdsoft_datetimepicker  .xdsoft_copyright{ color:#ccc !important; font-size:10px;clear:both;float:none;margin-left:8px;}
.xdsoft_datetimepicker  .xdsoft_copyright a{ color:#eee !important;}
.xdsoft_datetimepicker  .xdsoft_copyright a:hover{ color:#aaa !important;}


.xdsoft_time_box{
	position:relative;
	border:1px solid #ccc;
}
.xdsoft_scrollbar >.xdsoft_scroller{
	background:#ccc !important;
	height:20px;
	border-radius:3px;
}
.xdsoft_scrollbar{
	position:absolute;
	width:7px;
	right: 0;
	top: 0;
	bottom: 0;
	cursor:pointer;
}
.xdsoft_scroller_box{
position:relative;
}


.xdsoft_datetimepicker.xdsoft_dark{
	box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
	background: #000000;
	border-bottom: 1px solid #444444;
	border-left: 1px solid #333333;
	border-right: 1px solid #333333;
	border-top: 1px solid #333333;
	color: #cccccc;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_timepicker .xdsoft_time_box{
	border-bottom:1px solid #222222;
}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_timepicker .xdsoft_time_box >div >div{
	background: #0a0a0a;
	border-top:1px solid #222222;
	color: #999999;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_label{
    background-color: #000;
}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_label > .xdsoft_select{
	border:1px solid #333;
	background:#000;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover{
	color: #000;
    background: #007fff;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current{
	background: #cc5500;
	box-shadow: #b03e00 0 1px 3px 0 inset;
	color:#000;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_label i,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_prev, 
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_today_button{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==);
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar th{
	background: #0a0a0a;
	border:1px solid #222222;
	color: #999999;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar th{
	background: #0e0e0e;
}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar td.xdsoft_today{
	color:#cc5500;
}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{
	background: #cc5500;
	box-shadow: #b03e00 0 1px 3px 0 inset;
	color:#000;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_timepicker .xdsoft_time_box >div >div:hover{
	color: #000 !important;
    background: #007fff !important;
}

.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_calendar th{
	color: #666;
}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_copyright{ color:#333 !important;}
.xdsoft_datetimepicker.xdsoft_dark  .xdsoft_copyright a{ color:#111 !important;}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover{ color:#555 !important;}


.xdsoft_dark .xdsoft_time_box{
	border:1px solid #333;
}
.xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller{
	background:#333 !important;
}

/* /vendor/tablesorter/dist/css/theme.bootstrap.min.css */
.tablesorter-bootstrap{width:100%}.tablesorter-bootstrap tfoot td,.tablesorter-bootstrap tfoot th,.tablesorter-bootstrap thead td,.tablesorter-bootstrap thead th{font:14px/20px Arial,Sans-serif;font-weight:700;padding:4px;margin:0 0 18px;background-color:#eee}.tablesorter-bootstrap .tablesorter-header{cursor:pointer}.tablesorter-bootstrap .sorter-false{cursor:default}.tablesorter-bootstrap .tablesorter-header.sorter-false i.tablesorter-icon{display:none}.tablesorter-bootstrap .tablesorter-header-inner{position:relative;padding:4px 18px 4px 4px}.tablesorter-bootstrap .sorter-false .tablesorter-header-inner{padding:4px}.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon{font-size:11px;position:absolute;right:2px;top:50%;margin-top:-7px;width:14px;height:14px;background-repeat:no-repeat;line-height:14px;display:inline-block}.tablesorter-bootstrap .bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAA20lEQVR4AWJABpKSkoxALCstLb0aUAsZaCAMhVEY6B0amx8YZWDDEDSBa2AGe7XeIiAAClYwVGBvsAcIllsf/mvcC9DgOOd8h90fxWvngVEUbZIkuWRZZlE8eQjcisgZMM9zi+LJ6ZfwegmWZflZDugdHMfxTcGqql7TNBlUB/QObtv2VBSFrev6OY7jngzFk9OT/fn73fWYpqnlXNyXDMWT0zuYx/Bvel9ej+LJ6R08DMOu67q7DkTkrSA5vYPneV71fX/QASdTkJwezhs0TfMARn0wMDDGXEPgF4oijqwM5YjNAAAAAElFTkSuQmCC)}.tablesorter-bootstrap .bootstrap-icon-white.bootstrap-icon-unsorted{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAe0lEQVR4AbXQoRWDMBiF0Sh2QLAAQ8SxJGugWSA6A2STW1PxTsnB9cnkfuYvv8OGC1t5G3Y0QMP+Bm857keAdQIzWBP3+Bw4MADQE18B6/etRnCV/w9nnGuLezfAmXhABGtAGIkruvk6auIFRwQJDywllsEAjCecB20GP59BQQ+gtlRLAAAAAElFTkSuQmCC)}.tablesorter-bootstrap>tbody>tr.odd>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~tr.tablesorter-hasChildRow.odd~.tablesorter-childRow.odd>td{background-color:#f9f9f9}.tablesorter-bootstrap>tbody>tr.even:hover>td,.tablesorter-bootstrap>tbody>tr.hover>td,.tablesorter-bootstrap>tbody>tr.odd:hover>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~.tablesorter-childRow.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.odd:hover~.tablesorter-childRow.odd>td{background-color:#f5f5f5}.tablesorter-bootstrap>tbody>tr.even>td,.tablesorter-bootstrap>tbody>tr.tablesorter-hasChildRow.even:hover~tr.tablesorter-hasChildRow.even~.tablesorter-childRow.even>td{background-color:#fff}.tablesorter-bootstrap .tablesorter-processing{background-image:url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=);background-position:center center!important;background-repeat:no-repeat!important}.tablesorter-bootstrap>tbody>tr.odd td.primary{background-color:#bfbfbf}.tablesorter-bootstrap>tbody>tr td.primary,.tablesorter-bootstrap>tbody>tr.even td.primary{background-color:#d9d9d9}.tablesorter-bootstrap>tbody>tr.odd td.secondary{background-color:#d9d9d9}.tablesorter-bootstrap>tbody>tr td.secondary,.tablesorter-bootstrap>tbody>tr.even td.secondary{background-color:#e6e6e6}.tablesorter-bootstrap>tbody>tr.odd td.tertiary{background-color:#e6e6e6}.tablesorter-bootstrap>tbody>tr td.tertiary,.tablesorter-bootstrap>tbody>tr.even td.tertiary{background-color:#f2f2f2}.tablesorter-bootstrap>.caption{background-color:#fff}.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter{width:98%;margin:0;padding:4px 6px;color:#333;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:height .1s ease;-moz-transition:height .1s ease;-o-transition:height .1s ease;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled{background-color:#eee;color:#555;cursor:not-allowed;border:1px solid #ccc;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.075) inset;box-sizing:border-box;transition:height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row{background-color:#efefef}.tablesorter-bootstrap .tablesorter-filter-row td{background-color:#efefef;line-height:normal;text-align:center;padding:4px 6px;vertical-align:middle;-webkit-transition:line-height .1s ease;-moz-transition:line-height .1s ease;-o-transition:line-height .1s ease;transition:line-height .1s ease}.tablesorter-bootstrap .tablesorter-filter-row.hideme td{padding:2px;margin:0;line-height:0}.tablesorter-bootstrap .tablesorter-filter-row.hideme *{height:1px;min-height:0;border:0;padding:0;margin:0;opacity:0}.tablesorter .filtered{display:none}.tablesorter-bootstrap .tablesorter-pager select{padding:4px 6px}.tablesorter-bootstrap .tablesorter-pager .pagedisplay{border:0}.tablesorter-bootstrap tfoot i{font-size:11px}.tablesorter .tablesorter-errorRow td{text-align:center;cursor:pointer;background-color:#e6bf99}
/* /vendor/select2/select2.css */
/*
Version: 3.5.2 Timestamp: Sat Nov  1 14:43:36 EDT 2014
*/
.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;
}

.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
  /*
    Force border-box so that % widths fit the parent
    container without overlap because of margin/padding.
    More Info : http://www.quirksmode.org/css/box.html
  */
  -webkit-box-sizing: border-box; /* webkit */
     -moz-box-sizing: border-box; /* firefox */
          box-sizing: border-box; /* css3 */
}

.select2-container .select2-choice {
    display: block;
    height: 26px;
    padding: 0 0 0 8px;
    overflow: hidden;
    position: relative;

    border: 1px solid #aaa;
    white-space: nowrap;
    line-height: 26px;
    color: #444;
    text-decoration: none;

    border-radius: 4px;

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #fff;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
    background-image: linear-gradient(to top, #eee 0%, #fff 50%);
}

html[dir="rtl"] .select2-container .select2-choice {
    padding: 0 8px 0 0;
}

.select2-container.select2-drop-above .select2-choice {
    border-bottom-color: #aaa;

    border-radius: 0 0 4px 4px;

    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
    background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
    background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
    background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
}

.select2-container.select2-allowclear .select2-choice .select2-chosen {
    margin-right: 42px;
}

.select2-container .select2-choice > .select2-chosen {
    margin-right: 26px;
    display: block;
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
    float: none;
    width: auto;
}

html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
    margin-left: 26px;
    margin-right: 0;
}

.select2-container .select2-choice abbr {
    display: none;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 24px;
    top: 8px;

    font-size: 1px;
    text-decoration: none;

    border: 0;
    background: url('select2.png') right top no-repeat;
    cursor: pointer;
    outline: 0;
}

.select2-container.select2-allowclear .select2-choice abbr {
    display: inline-block;
}

.select2-container .select2-choice abbr:hover {
    background-position: right -11px;
    cursor: pointer;
}

.select2-drop-mask {
    border: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 9998;
    /* styles required for IE to work */
    background-color: #fff;
    filter: alpha(opacity=0);
}

.select2-drop {
    width: 100%;
    margin-top: -1px;
    position: absolute;
    z-index: 9999;
    top: 100%;

    background: #fff;
    color: #000;
    border: 1px solid #aaa;
    border-top: 0;

    border-radius: 0 0 4px 4px;

    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}

.select2-drop.select2-drop-above {
    margin-top: 1px;
    border-top: 1px solid #aaa;
    border-bottom: 0;

    border-radius: 4px 4px 0 0;

    -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
            box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}

.select2-drop-active {
    border: 1px solid #5897fb;
    border-top: none;
}

.select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid #5897fb;
}

.select2-drop-auto-width {
    border-top: 1px solid #aaa;
    width: auto;
}

.select2-drop-auto-width .select2-search {
    padding-top: 4px;
}

.select2-container .select2-choice .select2-arrow {
    display: inline-block;
    width: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;

    border-left: 1px solid #aaa;
    border-radius: 0 4px 4px 0;

    background-clip: padding-box;

    background: #ccc;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
    background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
}

html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
    left: 0;
    right: auto;

    border-left: none;
    border-right: 1px solid #aaa;
    border-radius: 4px 0 0 4px;
}

.select2-container .select2-choice .select2-arrow b {
    display: block;
    width: 100%;
    height: 100%;
    background: url('select2.png') no-repeat 0 1px;
}

html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
    background-position: 2px 1px;
}

.select2-search {
    display: inline-block;
    width: 100%;
    min-height: 26px;
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;

    position: relative;
    z-index: 10000;

    white-space: nowrap;
}

.select2-search input {
    width: 100%;
    height: auto !important;
    min-height: 26px;
    padding: 4px 20px 4px 5px;
    margin: 0;

    outline: 0;
    font-family: sans-serif;
    font-size: 1em;

    border: 1px solid #aaa;
    border-radius: 0;

    -webkit-box-shadow: none;
            box-shadow: none;

    background: #fff url('select2.png') no-repeat 100% -22px;
    background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

html[dir="rtl"] .select2-search input {
    padding: 4px 5px 4px 20px;

    background: #fff url('select2.png') no-repeat -37px -22px;
    background: url('select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

.select2-drop.select2-drop-above .select2-search input {
    margin-top: 4px;
}

.select2-search input.select2-active {
    background: #fff url('select2-spinner.gif') no-repeat 100%;
    background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

.select2-dropdown-open .select2-choice {
    border-bottom-color: transparent;
    -webkit-box-shadow: 0 1px 0 #fff inset;
            box-shadow: 0 1px 0 #fff inset;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    background-color: #eee;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
    background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
    background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
    background-image: linear-gradient(to top, #fff 0%, #eee 50%);
}

.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    border: 1px solid #5897fb;
    border-top-color: transparent;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
    background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
    background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
    background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
}

.select2-dropdown-open .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
    filter: none;
}
html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
    border-right: none;
}

.select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -18px 1px;
}

html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
    background-position: -16px 1px;
}

.select2-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* results */
.select2-results {
    max-height: 200px;
    padding: 0 0 0 4px;
    margin: 4px 4px 4px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html[dir="rtl"] .select2-results {
    padding: 0 4px 0 0;
    margin: 4px 0 4px 4px;
}

.select2-results ul.select2-result-sub {
    margin: 0;
    padding-left: 0;
}

.select2-results li {
    list-style: none;
    display: list-item;
    background-image: none;
}

.select2-results li.select2-result-with-children > .select2-result-label {
    font-weight: bold;
}

.select2-results .select2-result-label {
    padding: 3px 7px 4px;
    margin: 0;
    cursor: pointer;

    min-height: 1em;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

.select2-results-dept-1 .select2-result-label { padding-left: 20px }
.select2-results-dept-2 .select2-result-label { padding-left: 40px }
.select2-results-dept-3 .select2-result-label { padding-left: 60px }
.select2-results-dept-4 .select2-result-label { padding-left: 80px }
.select2-results-dept-5 .select2-result-label { padding-left: 100px }
.select2-results-dept-6 .select2-result-label { padding-left: 110px }
.select2-results-dept-7 .select2-result-label { padding-left: 120px }

.select2-results .select2-highlighted {
    background: #3875d7;
    color: #fff;
}

.select2-results li em {
    background: #feffde;
    font-style: normal;
}

.select2-results .select2-highlighted em {
    background: transparent;
}

.select2-results .select2-highlighted ul {
    background: #fff;
    color: #000;
}

.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-ajax-error,
.select2-results .select2-selection-limit {
    background: #f4f4f4;
    display: list-item;
    padding-left: 5px;
}

/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
    color: #666;
    background: #f4f4f4;
    display: list-item;
    cursor: default;
}
.select2-results .select2-disabled {
  background: #f4f4f4;
  display: list-item;
  cursor: default;
}

.select2-results .select2-selected {
    display: none;
}

.select2-more-results.select2-active {
    background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
}

.select2-results .select2-ajax-error {
    background: rgba(255, 50, 50, .2);
}

.select2-more-results {
    background: #f4f4f4;
    display: list-item;
}

/* disabled styles */

.select2-container.select2-container-disabled .select2-choice {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container.select2-container-disabled .select2-choice .select2-arrow {
    background-color: #f4f4f4;
    background-image: none;
    border-left: 0;
}

.select2-container.select2-container-disabled .select2-choice abbr {
    display: none;
}


/* multiselect */

.select2-container-multi .select2-choices {
    height: auto !important;
    height: 1%;
    margin: 0;
    padding: 0 5px 0 0;
    position: relative;

    border: 1px solid #aaa;
    cursor: text;
    overflow: hidden;

    background-color: #fff;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
    background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
    background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
    background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
}

html[dir="rtl"] .select2-container-multi .select2-choices {
    padding: 0 0 0 5px;
}

.select2-locked {
  padding: 3px 5px 3px 5px !important;
}

.select2-container-multi .select2-choices {
    min-height: 26px;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #5897fb;
    outline: none;

    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}
.select2-container-multi .select2-choices li {
    float: left;
    list-style: none;
}
html[dir="rtl"] .select2-container-multi .select2-choices li
{
    float: right;
}
.select2-container-multi .select2-choices .select2-search-field {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.select2-container-multi .select2-choices .select2-search-field input {
    padding: 5px;
    margin: 1px 0;

    font-family: sans-serif;
    font-size: 100%;
    color: #666;
    outline: 0;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: transparent !important;
}

.select2-container-multi .select2-choices .select2-search-field input.select2-active {
    background: #fff url('select2-spinner.gif') no-repeat 100% !important;
}

.select2-default {
    color: #999 !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
    padding: 3px 5px 3px 18px;
    margin: 3px 0 3px 5px;
    position: relative;

    line-height: 13px;
    color: #333;
    cursor: default;
    border: 1px solid #aaaaaa;

    border-radius: 3px;

    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

    background-clip: padding-box;

    -webkit-touch-callout: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;

    background-color: #e4e4e4;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
{
    margin: 3px 5px 3px 0;
    padding: 3px 18px 3px 5px;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
    cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
    background: #d4d4d4;
}

.select2-search-choice-close {
    display: block;
    width: 12px;
    height: 13px;
    position: absolute;
    right: 3px;
    top: 4px;

    font-size: 1px;
    outline: none;
    background: url('select2.png') right top no-repeat;
}
html[dir="rtl"] .select2-search-choice-close {
    right: auto;
    left: 3px;
}

.select2-container-multi .select2-search-choice-close {
    left: 3px;
}

html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
    left: auto;
    right: 2px;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
  background-position: right -11px;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
    background-position: right -11px;
}

/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ddd;
    cursor: default;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
    padding: 3px 5px 3px 5px;
    border: 1px solid #ddd;
    background-image: none;
    background-color: #f4f4f4;
}

.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
    background: none;
}
/* end multiselect */


.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

.select2-offscreen, .select2-offscreen:focus {
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    outline: 0 !important;
    left: 0px !important;
    top: 0px !important;
}

.select2-display-none {
    display: none;
}

.select2-measure-scrollbar {
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 100px;
    height: 100px;
    overflow: scroll;
}

/* Retina-ize icons */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
    .select2-search input,
    .select2-search-choice-close,
    .select2-container .select2-choice abbr,
    .select2-container .select2-choice .select2-arrow b {
        background-image: url('select2x2.png') !important;
        background-repeat: no-repeat !important;
        background-size: 60px 40px !important;
    }

    .select2-search input {
        background-position: 100% -21px !important;
    }
}

/* /vendor/handsontable/dist/handsontable.full.min.css */
/*!
 * Handsontable 0.13.1
 * Handsontable is a JavaScript library for editable tables with basic copy-paste compatibility with Excel and Google Docs
 *
 * Copyright (c) 2012-2014 Marcin Warpechowski
 * Copyright (c) 2015 Handsoncode sp. z o.o. <hello@handsontable.com>
 * Licensed under the MIT license.
 * http://handsontable.com/
 *
 * Date: Thu Mar 19 2015 15:05:12 GMT+0100 (CET)
 */.handsontable{position:relative}.handsontable .hide{display:none}.handsontable .relative{position:relative}.handsontable.htAutoColumnSize{visibility:hidden;left:0;position:absolute;top:0}.handsontable .wtHider{width:0}.handsontable .wtSpreader{position:relative;width:0;height:auto}.handsontable div,.handsontable input,.handsontable table,.handsontable tbody,.handsontable td,.handsontable textarea,.handsontable th,.handsontable thead{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.handsontable input,.handsontable textarea{min-height:initial}.handsontable table.htCore{border-collapse:separate;border-spacing:0;margin:0;border-width:0;table-layout:fixed;width:0;outline-width:0;max-width:none;max-height:none}.handsontable col,.handsontable col.rowHeader{width:50px}.handsontable td,.handsontable th{border-right:1px solid #CCC;border-bottom:1px solid #CCC;height:22px;empty-cells:show;line-height:21px;padding:0 4px;background-color:#FFF;vertical-align:top;overflow:hidden;outline-width:0;white-space:pre-line}.handsontable td.htInvalid{background-color:#ff4c42!important}.handsontable td.htNoWrap{white-space:nowrap}.handsontable th:last-child{border-right:1px solid #CCC;border-bottom:1px solid #CCC}.handsontable th.htNoFrame,.handsontable th:first-child.htNoFrame,.handsontable tr:first-child th.htNoFrame{border-left-width:0;background-color:#fff;border-color:#FFF}.handsontable .htNoFrame+td,.handsontable .htNoFrame+th,.handsontable td:first-child,.handsontable th:first-child{border-left:1px solid #CCC}.handsontable tr:first-child td,.handsontable tr:first-child th{border-top:1px solid #CCC}.handsontable thead tr.lastChild th,.handsontable thead tr:last-child th{border-bottom-width:0}.handsontable th{background-color:#EEE;color:#222;text-align:center;font-weight:400;white-space:nowrap}.handsontable thead th{padding:0}.handsontable th.active{background-color:#CCC}.handsontable thead th .relative{padding:2px 4px}.handsontable .manualColumnMover{position:fixed;left:0;top:0;background-color:transparent;width:5px;height:25px;z-index:999;cursor:move}.handsontable .manualRowMover{position:fixed;left:-4px;top:0;background-color:transparent;height:5px;width:50px;z-index:999;cursor:move}.handsontable .manualColumnMoverGuide,.handsontable .manualRowMoverGuide{position:fixed;left:0;top:0;background-color:#CCC;width:25px;height:25px;opacity:.7;display:none}.handsontable .manualColumnMoverGuide.active,.handsontable .manualRowMoverGuide.active{display:block}.handsontable .manualColumnMover.active,.handsontable .manualColumnMover:hover,.handsontable .manualRowMover.active,.handsontable .manualRowMover:hover{background-color:#88F}.handsontable .manualColumnResizer{position:fixed;top:0;cursor:col-resize;z-index:110;width:5px;height:25px}.handsontable .manualRowResizer{position:fixed;left:0;cursor:row-resize;z-index:110;height:5px;width:50px}.handsontable .manualColumnResizer.active,.handsontable .manualColumnResizer:hover,.handsontable .manualRowResizer.active,.handsontable .manualRowResizer:hover{background-color:#AAB}.handsontable .manualColumnResizerGuide{position:fixed;right:0;top:0;background-color:#AAB;display:none;width:0;border-right:1px dashed #777;margin-left:5px}.handsontable .manualRowResizerGuide{position:fixed;left:0;bottom:0;background-color:#AAB;display:none;height:0;border-bottom:1px dashed #777;margin-top:5px}.handsontable .manualColumnResizerGuide.active,.handsontable .manualRowResizerGuide.active{display:block}.handsontable .columnSorting:hover{text-decoration:underline;cursor:pointer}.handsontable .wtBorder{position:absolute;font-size:0}.handsontable .wtBorder.hidden{display:none!important}.handsontable td.area{background:-moz-linear-gradient(top,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(181,209,255,.34)),color-stop(100%,rgba(181,209,255,.34))) #fff;background:-webkit-linear-gradient(top,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;background:-o-linear-gradient(top,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;background:-ms-linear-gradient(top,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;background:linear-gradient(to bottom,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#57b5d1ff', endColorstr='#57b5d1ff', GradientType=0)}.handsontable .wtBorder.corner{font-size:0;cursor:crosshair}.handsontable .htBorder.htFillBorder{background:red;width:1px;height:1px}.handsontableInput{border:none;outline-width:0;margin:0;padding:1px 5px 0;font-family:inherit;line-height:21px;font-size:inherit;box-shadow:0 0 0 2px #5292F7 inset;resize:none;display:inline-block;color:#000;border-radius:0;background-color:#FFF}.handsontableInputHolder{position:absolute;top:0;left:0;z-index:100}.htSelectEditor{-webkit-appearance:menulist-button!important;position:absolute;width:auto}.handsontable .htDimmed{color:#777}.handsontable .htSubmenu{position:relative}.handsontable .htSubmenu :after{content:'▶';color:#777;position:absolute;right:5px}.handsontable .htLeft{text-align:left}.handsontable .htCenter{text-align:center}.handsontable .htRight{text-align:right}.handsontable .htJustify{text-align:justify}.handsontable .htTop{vertical-align:top}.handsontable .htMiddle{vertical-align:middle}.handsontable .htBottom{vertical-align:bottom}.handsontable .htPlaceholder{color:#999}.handsontable .htAutocompleteArrow{float:right;font-size:10px;color:#EEE;cursor:default;width:16px;text-align:center}.handsontable td .htAutocompleteArrow:hover{color:#777}.handsontable td.area .htAutocompleteArrow{color:#d3d3d3}.handsontable .htCheckboxRendererInput.noValue{opacity:.5}.handsontable .htNumeric{text-align:right}.htCommentCell{position:relative}.htCommentCell:after{content:'';position:absolute;top:0;right:0;border-left:6px solid transparent;border-top:6px solid red}@-webkit-keyframes opacity-hide{from{opacity:1}to{opacity:0}}@keyframes opacity-hide{from{opacity:1}to{opacity:0}}@-webkit-keyframes opacity-show{from{opacity:0}to{opacity:1}}@keyframes opacity-show{from{opacity:0}to{opacity:1}}.handsontable .handsontable .wtHider{padding:0 0 5px}.handsontable .handsontable table{-webkit-box-shadow:1px 2px 5px rgba(0,0,0,.4);box-shadow:1px 2px 5px rgba(0,0,0,.4)}.handsontable .autocompleteEditor.handsontable{padding-right:17px}.handsontable .autocompleteEditor.handsontable.htMacScroll{padding-right:15px}.handsontable.listbox{margin:0}.handsontable.listbox .ht_master table{border:1px solid #ccc;border-collapse:separate;background:#fff}.handsontable.listbox td,.handsontable.listbox th,.handsontable.listbox tr:first-child td,.handsontable.listbox tr:first-child th,.handsontable.listbox tr:last-child th{border-width:0}.handsontable.listbox td,.handsontable.listbox th{white-space:nowrap;text-overflow:ellipsis}.handsontable.listbox td.htDimmed{cursor:default;color:inherit;font-style:inherit}.handsontable.listbox .wtBorder{visibility:hidden}.handsontable.listbox tr td.current,.handsontable.listbox tr:hover td{background:#eee}.htContextMenu{display:none;position:absolute;z-index:1060}.htContextMenu .ht_clone_corner,.htContextMenu .ht_clone_debug,.htContextMenu .ht_clone_left,.htContextMenu .ht_clone_top{display:none}.ht_clone_top{z-index:101}.ht_clone_left{z-index:102}.ht_clone_corner,.ht_clone_debug{z-index:103}.htContextMenu table.htCore{outline:#bbb solid 1px}.htContextMenu .wtBorder{visibility:hidden}.htContextMenu table tbody tr td{background:#fff;border-width:0;padding:4px 6px 0;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.htContextMenu table tbody tr td:first-child{border:0}.htContextMenu table tbody tr td.htDimmed{font-style:normal;color:#323232}.htContextMenu table tbody tr td.current,.htContextMenu table tbody tr td.zeroclipboard-is-hover{background:#e9e9e9}.htContextMenu table tbody tr td.htSeparator{border-top:1px solid #bbb;height:0;padding:0}.htContextMenu table tbody tr td.htDisabled{color:#999}.htContextMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htContextMenu table tbody tr td div{padding-left:10px}.htContextMenu table tbody tr td div span.selected{margin-top:-2px;position:absolute;left:4px}.handsontable td.htSearchResult{background:#fcedd9;color:#583707}.htBordered{border-width:1px}.htBordered.htTopBorderSolid{border-top-style:solid;border-top-color:#000}.htBordered.htRightBorderSolid{border-right-style:solid;border-right-color:#000}.htBordered.htBottomBorderSolid{border-bottom-style:solid;border-bottom-color:#000}.htBordered.htLeftBorderSolid{border-left-style:solid;border-left-color:#000}.htCommentTextArea{background-color:#FFFACD;box-shadow:1px 1px 2px #bbb;font-family:Arial;-webkit-box-shadow:1px 1px 2px #bbb;-moz-box-shadow:1px 1px 2px #bbb}.handsontable colgroup col.rowHeader.htGroupCol{width:25px!important}.handsontable colgroup col.rowHeader.htGroupColClosest{width:30px!important}.handsontable .htGroupIndicatorContainer{background:#fff;border:0;padding-bottom:0;vertical-align:bottom;position:relative}.handsontable thead .htGroupIndicatorContainer{vertical-align:top;border-bottom:0}.handsontable tbody tr th:nth-last-child(2){border-right:1px solid #CCC}.handsontable thead tr:nth-last-child(2) th{border-bottom:1px solid #CCC;padding-bottom:5px}.ht_clone_corner thead tr th:nth-last-child(2){border-right:1px solid #CCC}.htVerticalGroup{height:100%}.htHorizontalGroup{width:100%;height:100%}.htVerticalGroup:not(.htCollapseButton):after{content:"";height:100%;width:1px;display:block;background:#ccc;margin-left:5px}.htHorizontalGroup:not(.htCollapseButton):after{content:"";width:100%;height:1px;display:block;background:#ccc;margin-top:20%}.htCollapseButton{width:10px;height:10px;line-height:10px;text-align:center;border-radius:5px;border:1px solid #f3f3f3;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);cursor:pointer;margin-bottom:3px;position:relative}.htCollapseButton:after{content:"";height:300%;width:1px;display:block;background:#ccc;margin-left:4px;position:absolute;bottom:10px}thead .htCollapseButton{right:5px;position:absolute;top:5px;background:#fff}thead .htCollapseButton:after{height:1px;width:700%;right:10px;top:4px}.handsontable tr th .htGroupStart:after{background:0 0;border-left:1px solid #ccc;border-top:1px solid #ccc;width:5px;position:relative;top:50%}.handsontable thead tr th .htGroupStart:after{background:0 0;border-left:1px solid #ccc;border-top:1px solid #ccc;height:5px;width:50%;position:relative;top:0;left:50%}.handsontable .htGroupLevelTrigger{-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);width:15px;height:15px;margin:4px auto;padding:0;line-height:15px;cursor:pointer}.handsontable tr th .htExpandButton{position:absolute;width:10px;height:10px;line-height:10px;text-align:center;border-radius:5px;border:1px solid #f3f3f3;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.4);box-shadow:1px 1px 3px rgba(0,0,0,.4);cursor:pointer;top:0;display:none}.handsontable thead tr th .htExpandButton{top:5px}.handsontable tr th .htExpandButton.clickable{display:block}.handsontable col.hidden{width:0!important}.handsontable tr.hidden,.handsontable tr.hidden td,.handsontable tr.hidden th,.wtDebugHidden{display:none}.wtDebugVisible{display:block;-webkit-animation-duration:.5s;-webkit-animation-name:wtFadeInFromNone;animation-duration:.5s;animation-name:wtFadeInFromNone}@keyframes wtFadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@-webkit-keyframes wtFadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}.handsontable.mobile{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch}.htMobileEditorContainer{display:none;position:absolute;top:0;width:70%;height:54pt;background:#f8f8f8;border-radius:20px;border:1px solid #ebebeb;z-index:999;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-text-size-adjust:none}.topLeftSelectionHandle-HitArea:not(.ht_master .topLeftSelectionHandle-HitArea),.topLeftSelectionHandle:not(.ht_master .topLeftSelectionHandle){z-index:9999}.bottomRightSelectionHandle,.bottomRightSelectionHandle-HitArea,.topLeftSelectionHandle,.topLeftSelectionHandle-HitArea{left:-10000px;top:-10000px}.htMobileEditorContainer.active{display:block}.htMobileEditorContainer .inputs{position:absolute;right:210pt;bottom:10pt;top:10pt;left:14px;height:34pt}.htMobileEditorContainer .inputs textarea{font-size:13pt;border:1px solid #a1a1a1;-webkit-appearance:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;position:absolute;left:14px;right:14px;top:0;bottom:0;padding:7pt}.htMobileEditorContainer .cellPointer{position:absolute;top:-13pt;height:0;width:0;left:30px;border-left:13pt solid transparent;border-right:13pt solid transparent;border-bottom:13pt solid #ebebeb}.htMobileEditorContainer .cellPointer.hidden{display:none}.htMobileEditorContainer .cellPointer:before{content:'';display:block;position:absolute;top:2px;height:0;width:0;left:-13pt;border-left:13pt solid transparent;border-right:13pt solid transparent;border-bottom:13pt solid #f8f8f8}.htMobileEditorContainer .moveHandle{position:absolute;top:10pt;left:5px;width:30px;bottom:0;cursor:move;z-index:9999}.htMobileEditorContainer .moveHandle:after{content:"..\a..\a..\a..";white-space:pre;line-height:10px;font-size:20pt;display:inline-block;margin-top:-8px;color:#ebebeb}.htMobileEditorContainer .positionControls{width:205pt;position:absolute;right:5pt;top:0;bottom:0}.htMobileEditorContainer .positionControls>div{width:50pt;height:100%;float:left}.htMobileEditorContainer .positionControls>div:after{content:" ";display:block;width:15pt;height:15pt;text-align:center;line-height:50pt}.htMobileEditorContainer .downButton:after,.htMobileEditorContainer .leftButton:after,.htMobileEditorContainer .rightButton:after,.htMobileEditorContainer .upButton:after{transform-origin:5pt 5pt;-webkit-transform-origin:5pt 5pt;margin:21pt 0 0 21pt}.htMobileEditorContainer .leftButton:after{border-top:2px solid #288ffe;border-left:2px solid #288ffe;-webkit-transform:rotate(-45deg)}.htMobileEditorContainer .leftButton:active:after{border-color:#cfcfcf}.htMobileEditorContainer .rightButton:after{border-top:2px solid #288ffe;border-left:2px solid #288ffe;-webkit-transform:rotate(135deg)}.htMobileEditorContainer .rightButton:active:after{border-color:#cfcfcf}.htMobileEditorContainer .upButton:after{border-top:2px solid #288ffe;border-left:2px solid #288ffe;-webkit-transform:rotate(45deg)}.htMobileEditorContainer .upButton:active:after{border-color:#cfcfcf}.htMobileEditorContainer .downButton:after{border-top:2px solid #288ffe;border-left:2px solid #288ffe;-webkit-transform:rotate(225deg)}.htMobileEditorContainer .downButton:active:after{border-color:#cfcfcf}.handsontable.hide-tween{-webkit-animation:opacity-hide .3s;animation:opacity-hide .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.handsontable.show-tween{-webkit-animation:opacity-show .3s;animation:opacity-show .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
/* /vendor/font-awesome/css/font-awesome.min.css */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}

/* /stylesheets/fonts/fa-6.1.1/all.css */
/*!
 * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900); }

.fa,
.fas,
.fa-solid,
.far,
.fa-regular,
.fal,
.fa-light,
.fat,
.fa-thin,
.fad,
.fa-duotone,
.fab,
.fa-brands {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }

.fa-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }

.fa-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: calc(var(--fa-li-width, 2em) * -1);
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit; }

.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em); }

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em); }

.fa-beat {
  -webkit-animation-name: fa-beat;
          animation-name: fa-beat;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-bounce {
  -webkit-animation-name: fa-bounce;
          animation-name: fa-bounce;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }

.fa-fade {
  -webkit-animation-name: fa-fade;
          animation-name: fa-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-beat-fade {
  -webkit-animation-name: fa-beat-fade;
          animation-name: fa-beat-fade;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-flip {
  -webkit-animation-name: fa-flip;
          animation-name: fa-flip;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
          animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-shake {
  -webkit-animation-name: fa-shake;
          animation-name: fa-shake;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-delay: var(--fa-animation-delay, 0);
          animation-delay: var(--fa-animation-delay, 0);
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 2s);
          animation-duration: var(--fa-animation-duration, 2s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, linear);
          animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin-reverse {
  --fa-animation-direction: reverse; }

.fa-pulse,
.fa-spin-pulse {
  -webkit-animation-name: fa-spin;
          animation-name: fa-spin;
  -webkit-animation-direction: var(--fa-animation-direction, normal);
          animation-direction: var(--fa-animation-direction, normal);
  -webkit-animation-duration: var(--fa-animation-duration, 1s);
          animation-duration: var(--fa-animation-duration, 1s);
  -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
          animation-timing-function: var(--fa-animation-timing, steps(8)); }

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    -webkit-animation-delay: -1ms;
            animation-delay: -1ms;
    -webkit-animation-duration: 1ms;
            animation-duration: 1ms;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s; } }

@-webkit-keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }

@keyframes fa-beat {
  0%, 90% {
    -webkit-transform: scale(1);
            transform: scale(1); }
  45% {
    -webkit-transform: scale(var(--fa-beat-scale, 1.25));
            transform: scale(var(--fa-beat-scale, 1.25)); } }

@-webkit-keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }

@keyframes fa-bounce {
  0% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  10% {
    -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); }
  100% {
    -webkit-transform: scale(1, 1) translateY(0);
            transform: scale(1, 1) translateY(0); } }

@-webkit-keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@-webkit-keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    -webkit-transform: scale(1);
            transform: scale(1); }
  50% {
    opacity: 1;
    -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@-webkit-keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@keyframes fa-flip {
  50% {
    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@-webkit-keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes fa-shake {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg); }
  4% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg); }
  8%, 24% {
    -webkit-transform: rotate(-18deg);
            transform: rotate(-18deg); }
  12%, 28% {
    -webkit-transform: rotate(18deg);
            transform: rotate(18deg); }
  16% {
    -webkit-transform: rotate(-22deg);
            transform: rotate(-22deg); }
  20% {
    -webkit-transform: rotate(22deg);
            transform: rotate(22deg); }
  32% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg); }
  36% {
    -webkit-transform: rotate(12deg);
            transform: rotate(12deg); }
  40%, 100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.fa-rotate-90 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.fa-rotate-180 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

.fa-rotate-270 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg); }

.fa-flip-horizontal {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1); }

.fa-flip-vertical {
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1); }

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1); }

.fa-rotate-by {
  -webkit-transform: rotate(var(--fa-rotate-angle, none));
          transform: rotate(var(--fa-rotate-angle, none)); }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: var(--fa-stack-z-index, auto); }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: var(--fa-inverse, #fff); }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-0::before {
  content: "\30"; }

.fa-1::before {
  content: "\31"; }

.fa-2::before {
  content: "\32"; }

.fa-3::before {
  content: "\33"; }

.fa-4::before {
  content: "\34"; }

.fa-5::before {
  content: "\35"; }

.fa-6::before {
  content: "\36"; }

.fa-7::before {
  content: "\37"; }

.fa-8::before {
  content: "\38"; }

.fa-9::before {
  content: "\39"; }

.fa-a::before {
  content: "\41"; }

.fa-address-book::before {
  content: "\f2b9"; }

.fa-contact-book::before {
  content: "\f2b9"; }

.fa-address-card::before {
  content: "\f2bb"; }

.fa-contact-card::before {
  content: "\f2bb"; }

.fa-vcard::before {
  content: "\f2bb"; }

.fa-align-center::before {
  content: "\f037"; }

.fa-align-justify::before {
  content: "\f039"; }

.fa-align-left::before {
  content: "\f036"; }

.fa-align-right::before {
  content: "\f038"; }

.fa-anchor::before {
  content: "\f13d"; }

.fa-anchor-circle-check::before {
  content: "\e4aa"; }

.fa-anchor-circle-exclamation::before {
  content: "\e4ab"; }

.fa-anchor-circle-xmark::before {
  content: "\e4ac"; }

.fa-anchor-lock::before {
  content: "\e4ad"; }

.fa-angle-down::before {
  content: "\f107"; }

.fa-angle-left::before {
  content: "\f104"; }

.fa-angle-right::before {
  content: "\f105"; }

.fa-angle-up::before {
  content: "\f106"; }

.fa-angles-down::before {
  content: "\f103"; }

.fa-angle-double-down::before {
  content: "\f103"; }

.fa-angles-left::before {
  content: "\f100"; }

.fa-angle-double-left::before {
  content: "\f100"; }

.fa-angles-right::before {
  content: "\f101"; }

.fa-angle-double-right::before {
  content: "\f101"; }

.fa-angles-up::before {
  content: "\f102"; }

.fa-angle-double-up::before {
  content: "\f102"; }

.fa-ankh::before {
  content: "\f644"; }

.fa-apple-whole::before {
  content: "\f5d1"; }

.fa-apple-alt::before {
  content: "\f5d1"; }

.fa-archway::before {
  content: "\f557"; }

.fa-arrow-down::before {
  content: "\f063"; }

.fa-arrow-down-1-9::before {
  content: "\f162"; }

.fa-sort-numeric-asc::before {
  content: "\f162"; }

.fa-sort-numeric-down::before {
  content: "\f162"; }

.fa-arrow-down-9-1::before {
  content: "\f886"; }

.fa-sort-numeric-desc::before {
  content: "\f886"; }

.fa-sort-numeric-down-alt::before {
  content: "\f886"; }

.fa-arrow-down-a-z::before {
  content: "\f15d"; }

.fa-sort-alpha-asc::before {
  content: "\f15d"; }

.fa-sort-alpha-down::before {
  content: "\f15d"; }

.fa-arrow-down-long::before {
  content: "\f175"; }

.fa-long-arrow-down::before {
  content: "\f175"; }

.fa-arrow-down-short-wide::before {
  content: "\f884"; }

.fa-sort-amount-desc::before {
  content: "\f884"; }

.fa-sort-amount-down-alt::before {
  content: "\f884"; }

.fa-arrow-down-up-across-line::before {
  content: "\e4af"; }

.fa-arrow-down-up-lock::before {
  content: "\e4b0"; }

.fa-arrow-down-wide-short::before {
  content: "\f160"; }

.fa-sort-amount-asc::before {
  content: "\f160"; }

.fa-sort-amount-down::before {
  content: "\f160"; }

.fa-arrow-down-z-a::before {
  content: "\f881"; }

.fa-sort-alpha-desc::before {
  content: "\f881"; }

.fa-sort-alpha-down-alt::before {
  content: "\f881"; }

.fa-arrow-left::before {
  content: "\f060"; }

.fa-arrow-left-long::before {
  content: "\f177"; }

.fa-long-arrow-left::before {
  content: "\f177"; }

.fa-arrow-pointer::before {
  content: "\f245"; }

.fa-mouse-pointer::before {
  content: "\f245"; }

.fa-arrow-right::before {
  content: "\f061"; }

.fa-arrow-right-arrow-left::before {
  content: "\f0ec"; }

.fa-exchange::before {
  content: "\f0ec"; }

.fa-arrow-right-from-bracket::before {
  content: "\f08b"; }

.fa-sign-out::before {
  content: "\f08b"; }

.fa-arrow-right-long::before {
  content: "\f178"; }

.fa-long-arrow-right::before {
  content: "\f178"; }

.fa-arrow-right-to-bracket::before {
  content: "\f090"; }

.fa-sign-in::before {
  content: "\f090"; }

.fa-arrow-right-to-city::before {
  content: "\e4b3"; }

.fa-arrow-rotate-left::before {
  content: "\f0e2"; }

.fa-arrow-left-rotate::before {
  content: "\f0e2"; }

.fa-arrow-rotate-back::before {
  content: "\f0e2"; }

.fa-arrow-rotate-backward::before {
  content: "\f0e2"; }

.fa-undo::before {
  content: "\f0e2"; }

.fa-arrow-rotate-right::before {
  content: "\f01e"; }

.fa-arrow-right-rotate::before {
  content: "\f01e"; }

.fa-arrow-rotate-forward::before {
  content: "\f01e"; }

.fa-redo::before {
  content: "\f01e"; }

.fa-arrow-trend-down::before {
  content: "\e097"; }

.fa-arrow-trend-up::before {
  content: "\e098"; }

.fa-arrow-turn-down::before {
  content: "\f149"; }

.fa-level-down::before {
  content: "\f149"; }

.fa-arrow-turn-up::before {
  content: "\f148"; }

.fa-level-up::before {
  content: "\f148"; }

.fa-arrow-up::before {
  content: "\f062"; }

.fa-arrow-up-1-9::before {
  content: "\f163"; }

.fa-sort-numeric-up::before {
  content: "\f163"; }

.fa-arrow-up-9-1::before {
  content: "\f887"; }

.fa-sort-numeric-up-alt::before {
  content: "\f887"; }

.fa-arrow-up-a-z::before {
  content: "\f15e"; }

.fa-sort-alpha-up::before {
  content: "\f15e"; }

.fa-arrow-up-from-bracket::before {
  content: "\e09a"; }

.fa-arrow-up-from-ground-water::before {
  content: "\e4b5"; }

.fa-arrow-up-from-water-pump::before {
  content: "\e4b6"; }

.fa-arrow-up-long::before {
  content: "\f176"; }

.fa-long-arrow-up::before {
  content: "\f176"; }

.fa-arrow-up-right-dots::before {
  content: "\e4b7"; }

.fa-arrow-up-right-from-square::before {
  content: "\f08e"; }

.fa-external-link::before {
  content: "\f08e"; }

.fa-arrow-up-short-wide::before {
  content: "\f885"; }

.fa-sort-amount-up-alt::before {
  content: "\f885"; }

.fa-arrow-up-wide-short::before {
  content: "\f161"; }

.fa-sort-amount-up::before {
  content: "\f161"; }

.fa-arrow-up-z-a::before {
  content: "\f882"; }

.fa-sort-alpha-up-alt::before {
  content: "\f882"; }

.fa-arrows-down-to-line::before {
  content: "\e4b8"; }

.fa-arrows-down-to-people::before {
  content: "\e4b9"; }

.fa-arrows-left-right::before {
  content: "\f07e"; }

.fa-arrows-h::before {
  content: "\f07e"; }

.fa-arrows-left-right-to-line::before {
  content: "\e4ba"; }

.fa-arrows-rotate::before {
  content: "\f021"; }

.fa-refresh::before {
  content: "\f021"; }

.fa-sync::before {
  content: "\f021"; }

.fa-arrows-spin::before {
  content: "\e4bb"; }

.fa-arrows-split-up-and-left::before {
  content: "\e4bc"; }

.fa-arrows-to-circle::before {
  content: "\e4bd"; }

.fa-arrows-to-dot::before {
  content: "\e4be"; }

.fa-arrows-to-eye::before {
  content: "\e4bf"; }

.fa-arrows-turn-right::before {
  content: "\e4c0"; }

.fa-arrows-turn-to-dots::before {
  content: "\e4c1"; }

.fa-arrows-up-down::before {
  content: "\f07d"; }

.fa-arrows-v::before {
  content: "\f07d"; }

.fa-arrows-up-down-left-right::before {
  content: "\f047"; }

.fa-arrows::before {
  content: "\f047"; }

.fa-arrows-up-to-line::before {
  content: "\e4c2"; }

.fa-asterisk::before {
  content: "\2a"; }

.fa-at::before {
  content: "\40"; }

.fa-atom::before {
  content: "\f5d2"; }

.fa-audio-description::before {
  content: "\f29e"; }

.fa-austral-sign::before {
  content: "\e0a9"; }

.fa-award::before {
  content: "\f559"; }

.fa-b::before {
  content: "\42"; }

.fa-baby::before {
  content: "\f77c"; }

.fa-baby-carriage::before {
  content: "\f77d"; }

.fa-carriage-baby::before {
  content: "\f77d"; }

.fa-backward::before {
  content: "\f04a"; }

.fa-backward-fast::before {
  content: "\f049"; }

.fa-fast-backward::before {
  content: "\f049"; }

.fa-backward-step::before {
  content: "\f048"; }

.fa-step-backward::before {
  content: "\f048"; }

.fa-bacon::before {
  content: "\f7e5"; }

.fa-bacteria::before {
  content: "\e059"; }

.fa-bacterium::before {
  content: "\e05a"; }

.fa-bag-shopping::before {
  content: "\f290"; }

.fa-shopping-bag::before {
  content: "\f290"; }

.fa-bahai::before {
  content: "\f666"; }

.fa-baht-sign::before {
  content: "\e0ac"; }

.fa-ban::before {
  content: "\f05e"; }

.fa-cancel::before {
  content: "\f05e"; }

.fa-ban-smoking::before {
  content: "\f54d"; }

.fa-smoking-ban::before {
  content: "\f54d"; }

.fa-bandage::before {
  content: "\f462"; }

.fa-band-aid::before {
  content: "\f462"; }

.fa-barcode::before {
  content: "\f02a"; }

.fa-bars::before {
  content: "\f0c9"; }

.fa-navicon::before {
  content: "\f0c9"; }

.fa-bars-progress::before {
  content: "\f828"; }

.fa-tasks-alt::before {
  content: "\f828"; }

.fa-bars-staggered::before {
  content: "\f550"; }

.fa-reorder::before {
  content: "\f550"; }

.fa-stream::before {
  content: "\f550"; }

.fa-baseball::before {
  content: "\f433"; }

.fa-baseball-ball::before {
  content: "\f433"; }

.fa-baseball-bat-ball::before {
  content: "\f432"; }

.fa-basket-shopping::before {
  content: "\f291"; }

.fa-shopping-basket::before {
  content: "\f291"; }

.fa-basketball::before {
  content: "\f434"; }

.fa-basketball-ball::before {
  content: "\f434"; }

.fa-bath::before {
  content: "\f2cd"; }

.fa-bathtub::before {
  content: "\f2cd"; }

.fa-battery-empty::before {
  content: "\f244"; }

.fa-battery-0::before {
  content: "\f244"; }

.fa-battery-full::before {
  content: "\f240"; }

.fa-battery::before {
  content: "\f240"; }

.fa-battery-5::before {
  content: "\f240"; }

.fa-battery-half::before {
  content: "\f242"; }

.fa-battery-3::before {
  content: "\f242"; }

.fa-battery-quarter::before {
  content: "\f243"; }

.fa-battery-2::before {
  content: "\f243"; }

.fa-battery-three-quarters::before {
  content: "\f241"; }

.fa-battery-4::before {
  content: "\f241"; }

.fa-bed::before {
  content: "\f236"; }

.fa-bed-pulse::before {
  content: "\f487"; }

.fa-procedures::before {
  content: "\f487"; }

.fa-beer-mug-empty::before {
  content: "\f0fc"; }

.fa-beer::before {
  content: "\f0fc"; }

.fa-bell::before {
  content: "\f0f3"; }

.fa-bell-concierge::before {
  content: "\f562"; }

.fa-concierge-bell::before {
  content: "\f562"; }

.fa-bell-slash::before {
  content: "\f1f6"; }

.fa-bezier-curve::before {
  content: "\f55b"; }

.fa-bicycle::before {
  content: "\f206"; }

.fa-binoculars::before {
  content: "\f1e5"; }

.fa-biohazard::before {
  content: "\f780"; }

.fa-bitcoin-sign::before {
  content: "\e0b4"; }

.fa-blender::before {
  content: "\f517"; }

.fa-blender-phone::before {
  content: "\f6b6"; }

.fa-blog::before {
  content: "\f781"; }

.fa-bold::before {
  content: "\f032"; }

.fa-bolt::before {
  content: "\f0e7"; }

.fa-zap::before {
  content: "\f0e7"; }

.fa-bolt-lightning::before {
  content: "\e0b7"; }

.fa-bomb::before {
  content: "\f1e2"; }

.fa-bone::before {
  content: "\f5d7"; }

.fa-bong::before {
  content: "\f55c"; }

.fa-book::before {
  content: "\f02d"; }

.fa-book-atlas::before {
  content: "\f558"; }

.fa-atlas::before {
  content: "\f558"; }

.fa-book-bible::before {
  content: "\f647"; }

.fa-bible::before {
  content: "\f647"; }

.fa-book-bookmark::before {
  content: "\e0bb"; }

.fa-book-journal-whills::before {
  content: "\f66a"; }

.fa-journal-whills::before {
  content: "\f66a"; }

.fa-book-medical::before {
  content: "\f7e6"; }

.fa-book-open::before {
  content: "\f518"; }

.fa-book-open-reader::before {
  content: "\f5da"; }

.fa-book-reader::before {
  content: "\f5da"; }

.fa-book-quran::before {
  content: "\f687"; }

.fa-quran::before {
  content: "\f687"; }

.fa-book-skull::before {
  content: "\f6b7"; }

.fa-book-dead::before {
  content: "\f6b7"; }

.fa-bookmark::before {
  content: "\f02e"; }

.fa-border-all::before {
  content: "\f84c"; }

.fa-border-none::before {
  content: "\f850"; }

.fa-border-top-left::before {
  content: "\f853"; }

.fa-border-style::before {
  content: "\f853"; }

.fa-bore-hole::before {
  content: "\e4c3"; }

.fa-bottle-droplet::before {
  content: "\e4c4"; }

.fa-bottle-water::before {
  content: "\e4c5"; }

.fa-bowl-food::before {
  content: "\e4c6"; }

.fa-bowl-rice::before {
  content: "\e2eb"; }

.fa-bowling-ball::before {
  content: "\f436"; }

.fa-box::before {
  content: "\f466"; }

.fa-box-archive::before {
  content: "\f187"; }

.fa-archive::before {
  content: "\f187"; }

.fa-box-open::before {
  content: "\f49e"; }

.fa-box-tissue::before {
  content: "\e05b"; }

.fa-boxes-packing::before {
  content: "\e4c7"; }

.fa-boxes-stacked::before {
  content: "\f468"; }

.fa-boxes::before {
  content: "\f468"; }

.fa-boxes-alt::before {
  content: "\f468"; }

.fa-braille::before {
  content: "\f2a1"; }

.fa-brain::before {
  content: "\f5dc"; }

.fa-brazilian-real-sign::before {
  content: "\e46c"; }

.fa-bread-slice::before {
  content: "\f7ec"; }

.fa-bridge::before {
  content: "\e4c8"; }

.fa-bridge-circle-check::before {
  content: "\e4c9"; }

.fa-bridge-circle-exclamation::before {
  content: "\e4ca"; }

.fa-bridge-circle-xmark::before {
  content: "\e4cb"; }

.fa-bridge-lock::before {
  content: "\e4cc"; }

.fa-bridge-water::before {
  content: "\e4ce"; }

.fa-briefcase::before {
  content: "\f0b1"; }

.fa-briefcase-medical::before {
  content: "\f469"; }

.fa-broom::before {
  content: "\f51a"; }

.fa-broom-ball::before {
  content: "\f458"; }

.fa-quidditch::before {
  content: "\f458"; }

.fa-quidditch-broom-ball::before {
  content: "\f458"; }

.fa-brush::before {
  content: "\f55d"; }

.fa-bucket::before {
  content: "\e4cf"; }

.fa-bug::before {
  content: "\f188"; }

.fa-bug-slash::before {
  content: "\e490"; }

.fa-bugs::before {
  content: "\e4d0"; }

.fa-building::before {
  content: "\f1ad"; }

.fa-building-circle-arrow-right::before {
  content: "\e4d1"; }

.fa-building-circle-check::before {
  content: "\e4d2"; }

.fa-building-circle-exclamation::before {
  content: "\e4d3"; }

.fa-building-circle-xmark::before {
  content: "\e4d4"; }

.fa-building-columns::before {
  content: "\f19c"; }

.fa-bank::before {
  content: "\f19c"; }

.fa-institution::before {
  content: "\f19c"; }

.fa-museum::before {
  content: "\f19c"; }

.fa-university::before {
  content: "\f19c"; }

.fa-building-flag::before {
  content: "\e4d5"; }

.fa-building-lock::before {
  content: "\e4d6"; }

.fa-building-ngo::before {
  content: "\e4d7"; }

.fa-building-shield::before {
  content: "\e4d8"; }

.fa-building-un::before {
  content: "\e4d9"; }

.fa-building-user::before {
  content: "\e4da"; }

.fa-building-wheat::before {
  content: "\e4db"; }

.fa-bullhorn::before {
  content: "\f0a1"; }

.fa-bullseye::before {
  content: "\f140"; }

.fa-burger::before {
  content: "\f805"; }

.fa-hamburger::before {
  content: "\f805"; }

.fa-burst::before {
  content: "\e4dc"; }

.fa-bus::before {
  content: "\f207"; }

.fa-bus-simple::before {
  content: "\f55e"; }

.fa-bus-alt::before {
  content: "\f55e"; }

.fa-business-time::before {
  content: "\f64a"; }

.fa-briefcase-clock::before {
  content: "\f64a"; }

.fa-c::before {
  content: "\43"; }

.fa-cake-candles::before {
  content: "\f1fd"; }

.fa-birthday-cake::before {
  content: "\f1fd"; }

.fa-cake::before {
  content: "\f1fd"; }

.fa-calculator::before {
  content: "\f1ec"; }

.fa-calendar::before {
  content: "\f133"; }

.fa-calendar-check::before {
  content: "\f274"; }

.fa-calendar-day::before {
  content: "\f783"; }

.fa-calendar-days::before {
  content: "\f073"; }

.fa-calendar-alt::before {
  content: "\f073"; }

.fa-calendar-minus::before {
  content: "\f272"; }

.fa-calendar-plus::before {
  content: "\f271"; }

.fa-calendar-week::before {
  content: "\f784"; }

.fa-calendar-xmark::before {
  content: "\f273"; }

.fa-calendar-times::before {
  content: "\f273"; }

.fa-camera::before {
  content: "\f030"; }

.fa-camera-alt::before {
  content: "\f030"; }

.fa-camera-retro::before {
  content: "\f083"; }

.fa-camera-rotate::before {
  content: "\e0d8"; }

.fa-campground::before {
  content: "\f6bb"; }

.fa-candy-cane::before {
  content: "\f786"; }

.fa-cannabis::before {
  content: "\f55f"; }

.fa-capsules::before {
  content: "\f46b"; }

.fa-car::before {
  content: "\f1b9"; }

.fa-automobile::before {
  content: "\f1b9"; }

.fa-car-battery::before {
  content: "\f5df"; }

.fa-battery-car::before {
  content: "\f5df"; }

.fa-car-burst::before {
  content: "\f5e1"; }

.fa-car-crash::before {
  content: "\f5e1"; }

.fa-car-on::before {
  content: "\e4dd"; }

.fa-car-rear::before {
  content: "\f5de"; }

.fa-car-alt::before {
  content: "\f5de"; }

.fa-car-side::before {
  content: "\f5e4"; }

.fa-car-tunnel::before {
  content: "\e4de"; }

.fa-caravan::before {
  content: "\f8ff"; }

.fa-caret-down::before {
  content: "\f0d7"; }

.fa-caret-left::before {
  content: "\f0d9"; }

.fa-caret-right::before {
  content: "\f0da"; }

.fa-caret-up::before {
  content: "\f0d8"; }

.fa-carrot::before {
  content: "\f787"; }

.fa-cart-arrow-down::before {
  content: "\f218"; }

.fa-cart-flatbed::before {
  content: "\f474"; }

.fa-dolly-flatbed::before {
  content: "\f474"; }

.fa-cart-flatbed-suitcase::before {
  content: "\f59d"; }

.fa-luggage-cart::before {
  content: "\f59d"; }

.fa-cart-plus::before {
  content: "\f217"; }

.fa-cart-shopping::before {
  content: "\f07a"; }

.fa-shopping-cart::before {
  content: "\f07a"; }

.fa-cash-register::before {
  content: "\f788"; }

.fa-cat::before {
  content: "\f6be"; }

.fa-cedi-sign::before {
  content: "\e0df"; }

.fa-cent-sign::before {
  content: "\e3f5"; }

.fa-certificate::before {
  content: "\f0a3"; }

.fa-chair::before {
  content: "\f6c0"; }

.fa-chalkboard::before {
  content: "\f51b"; }

.fa-blackboard::before {
  content: "\f51b"; }

.fa-chalkboard-user::before {
  content: "\f51c"; }

.fa-chalkboard-teacher::before {
  content: "\f51c"; }

.fa-champagne-glasses::before {
  content: "\f79f"; }

.fa-glass-cheers::before {
  content: "\f79f"; }

.fa-charging-station::before {
  content: "\f5e7"; }

.fa-chart-area::before {
  content: "\f1fe"; }

.fa-area-chart::before {
  content: "\f1fe"; }

.fa-chart-bar::before {
  content: "\f080"; }

.fa-bar-chart::before {
  content: "\f080"; }

.fa-chart-column::before {
  content: "\e0e3"; }

.fa-chart-gantt::before {
  content: "\e0e4"; }

.fa-chart-line::before {
  content: "\f201"; }

.fa-line-chart::before {
  content: "\f201"; }

.fa-chart-pie::before {
  content: "\f200"; }

.fa-pie-chart::before {
  content: "\f200"; }

.fa-chart-simple::before {
  content: "\e473"; }

.fa-check::before {
  content: "\f00c"; }

.fa-check-double::before {
  content: "\f560"; }

.fa-check-to-slot::before {
  content: "\f772"; }

.fa-vote-yea::before {
  content: "\f772"; }

.fa-cheese::before {
  content: "\f7ef"; }

.fa-chess::before {
  content: "\f439"; }

.fa-chess-bishop::before {
  content: "\f43a"; }

.fa-chess-board::before {
  content: "\f43c"; }

.fa-chess-king::before {
  content: "\f43f"; }

.fa-chess-knight::before {
  content: "\f441"; }

.fa-chess-pawn::before {
  content: "\f443"; }

.fa-chess-queen::before {
  content: "\f445"; }

.fa-chess-rook::before {
  content: "\f447"; }

.fa-chevron-down::before {
  content: "\f078"; }

.fa-chevron-left::before {
  content: "\f053"; }

.fa-chevron-right::before {
  content: "\f054"; }

.fa-chevron-up::before {
  content: "\f077"; }

.fa-child::before {
  content: "\f1ae"; }

.fa-child-dress::before {
  content: "\e59c"; }

.fa-child-reaching::before {
  content: "\e59d"; }

.fa-child-rifle::before {
  content: "\e4e0"; }

.fa-children::before {
  content: "\e4e1"; }

.fa-church::before {
  content: "\f51d"; }

.fa-circle::before {
  content: "\f111"; }

.fa-circle-arrow-down::before {
  content: "\f0ab"; }

.fa-arrow-circle-down::before {
  content: "\f0ab"; }

.fa-circle-arrow-left::before {
  content: "\f0a8"; }

.fa-arrow-circle-left::before {
  content: "\f0a8"; }

.fa-circle-arrow-right::before {
  content: "\f0a9"; }

.fa-arrow-circle-right::before {
  content: "\f0a9"; }

.fa-circle-arrow-up::before {
  content: "\f0aa"; }

.fa-arrow-circle-up::before {
  content: "\f0aa"; }

.fa-circle-check::before {
  content: "\f058"; }

.fa-check-circle::before {
  content: "\f058"; }

.fa-circle-chevron-down::before {
  content: "\f13a"; }

.fa-chevron-circle-down::before {
  content: "\f13a"; }

.fa-circle-chevron-left::before {
  content: "\f137"; }

.fa-chevron-circle-left::before {
  content: "\f137"; }

.fa-circle-chevron-right::before {
  content: "\f138"; }

.fa-chevron-circle-right::before {
  content: "\f138"; }

.fa-circle-chevron-up::before {
  content: "\f139"; }

.fa-chevron-circle-up::before {
  content: "\f139"; }

.fa-circle-dollar-to-slot::before {
  content: "\f4b9"; }

.fa-donate::before {
  content: "\f4b9"; }

.fa-circle-dot::before {
  content: "\f192"; }

.fa-dot-circle::before {
  content: "\f192"; }

.fa-circle-down::before {
  content: "\f358"; }

.fa-arrow-alt-circle-down::before {
  content: "\f358"; }

.fa-circle-exclamation::before {
  content: "\f06a"; }

.fa-exclamation-circle::before {
  content: "\f06a"; }

.fa-circle-h::before {
  content: "\f47e"; }

.fa-hospital-symbol::before {
  content: "\f47e"; }

.fa-circle-half-stroke::before {
  content: "\f042"; }

.fa-adjust::before {
  content: "\f042"; }

.fa-circle-info::before {
  content: "\f05a"; }

.fa-info-circle::before {
  content: "\f05a"; }

.fa-circle-left::before {
  content: "\f359"; }

.fa-arrow-alt-circle-left::before {
  content: "\f359"; }

.fa-circle-minus::before {
  content: "\f056"; }

.fa-minus-circle::before {
  content: "\f056"; }

.fa-circle-nodes::before {
  content: "\e4e2"; }

.fa-circle-notch::before {
  content: "\f1ce"; }

.fa-circle-pause::before {
  content: "\f28b"; }

.fa-pause-circle::before {
  content: "\f28b"; }

.fa-circle-play::before {
  content: "\f144"; }

.fa-play-circle::before {
  content: "\f144"; }

.fa-circle-plus::before {
  content: "\f055"; }

.fa-plus-circle::before {
  content: "\f055"; }

.fa-circle-question::before {
  content: "\f059"; }

.fa-question-circle::before {
  content: "\f059"; }

.fa-circle-radiation::before {
  content: "\f7ba"; }

.fa-radiation-alt::before {
  content: "\f7ba"; }

.fa-circle-right::before {
  content: "\f35a"; }

.fa-arrow-alt-circle-right::before {
  content: "\f35a"; }

.fa-circle-stop::before {
  content: "\f28d"; }

.fa-stop-circle::before {
  content: "\f28d"; }

.fa-circle-up::before {
  content: "\f35b"; }

.fa-arrow-alt-circle-up::before {
  content: "\f35b"; }

.fa-circle-user::before {
  content: "\f2bd"; }

.fa-user-circle::before {
  content: "\f2bd"; }

.fa-circle-xmark::before {
  content: "\f057"; }

.fa-times-circle::before {
  content: "\f057"; }

.fa-xmark-circle::before {
  content: "\f057"; }

.fa-city::before {
  content: "\f64f"; }

.fa-clapperboard::before {
  content: "\e131"; }

.fa-clipboard::before {
  content: "\f328"; }

.fa-clipboard-check::before {
  content: "\f46c"; }

.fa-clipboard-list::before {
  content: "\f46d"; }

.fa-clipboard-question::before {
  content: "\e4e3"; }

.fa-clipboard-user::before {
  content: "\f7f3"; }

.fa-clock::before {
  content: "\f017"; }

.fa-clock-four::before {
  content: "\f017"; }

.fa-clock-rotate-left::before {
  content: "\f1da"; }

.fa-history::before {
  content: "\f1da"; }

.fa-clone::before {
  content: "\f24d"; }

.fa-closed-captioning::before {
  content: "\f20a"; }

.fa-cloud::before {
  content: "\f0c2"; }

.fa-cloud-arrow-down::before {
  content: "\f0ed"; }

.fa-cloud-download::before {
  content: "\f0ed"; }

.fa-cloud-download-alt::before {
  content: "\f0ed"; }

.fa-cloud-arrow-up::before {
  content: "\f0ee"; }

.fa-cloud-upload::before {
  content: "\f0ee"; }

.fa-cloud-upload-alt::before {
  content: "\f0ee"; }

.fa-cloud-bolt::before {
  content: "\f76c"; }

.fa-thunderstorm::before {
  content: "\f76c"; }

.fa-cloud-meatball::before {
  content: "\f73b"; }

.fa-cloud-moon::before {
  content: "\f6c3"; }

.fa-cloud-moon-rain::before {
  content: "\f73c"; }

.fa-cloud-rain::before {
  content: "\f73d"; }

.fa-cloud-showers-heavy::before {
  content: "\f740"; }

.fa-cloud-showers-water::before {
  content: "\e4e4"; }

.fa-cloud-sun::before {
  content: "\f6c4"; }

.fa-cloud-sun-rain::before {
  content: "\f743"; }

.fa-clover::before {
  content: "\e139"; }

.fa-code::before {
  content: "\f121"; }

.fa-code-branch::before {
  content: "\f126"; }

.fa-code-commit::before {
  content: "\f386"; }

.fa-code-compare::before {
  content: "\e13a"; }

.fa-code-fork::before {
  content: "\e13b"; }

.fa-code-merge::before {
  content: "\f387"; }

.fa-code-pull-request::before {
  content: "\e13c"; }

.fa-coins::before {
  content: "\f51e"; }

.fa-colon-sign::before {
  content: "\e140"; }

.fa-comment::before {
  content: "\f075"; }

.fa-comment-dollar::before {
  content: "\f651"; }

.fa-comment-dots::before {
  content: "\f4ad"; }

.fa-commenting::before {
  content: "\f4ad"; }

.fa-comment-medical::before {
  content: "\f7f5"; }

.fa-comment-slash::before {
  content: "\f4b3"; }

.fa-comment-sms::before {
  content: "\f7cd"; }

.fa-sms::before {
  content: "\f7cd"; }

.fa-comments::before {
  content: "\f086"; }

.fa-comments-dollar::before {
  content: "\f653"; }

.fa-compact-disc::before {
  content: "\f51f"; }

.fa-compass::before {
  content: "\f14e"; }

.fa-compass-drafting::before {
  content: "\f568"; }

.fa-drafting-compass::before {
  content: "\f568"; }

.fa-compress::before {
  content: "\f066"; }

.fa-computer::before {
  content: "\e4e5"; }

.fa-computer-mouse::before {
  content: "\f8cc"; }

.fa-mouse::before {
  content: "\f8cc"; }

.fa-cookie::before {
  content: "\f563"; }

.fa-cookie-bite::before {
  content: "\f564"; }

.fa-copy::before {
  content: "\f0c5"; }

.fa-copyright::before {
  content: "\f1f9"; }

.fa-couch::before {
  content: "\f4b8"; }

.fa-cow::before {
  content: "\f6c8"; }

.fa-credit-card::before {
  content: "\f09d"; }

.fa-credit-card-alt::before {
  content: "\f09d"; }

.fa-crop::before {
  content: "\f125"; }

.fa-crop-simple::before {
  content: "\f565"; }

.fa-crop-alt::before {
  content: "\f565"; }

.fa-cross::before {
  content: "\f654"; }

.fa-crosshairs::before {
  content: "\f05b"; }

.fa-crow::before {
  content: "\f520"; }

.fa-crown::before {
  content: "\f521"; }

.fa-crutch::before {
  content: "\f7f7"; }

.fa-cruzeiro-sign::before {
  content: "\e152"; }

.fa-cube::before {
  content: "\f1b2"; }

.fa-cubes::before {
  content: "\f1b3"; }

.fa-cubes-stacked::before {
  content: "\e4e6"; }

.fa-d::before {
  content: "\44"; }

.fa-database::before {
  content: "\f1c0"; }

.fa-delete-left::before {
  content: "\f55a"; }

.fa-backspace::before {
  content: "\f55a"; }

.fa-democrat::before {
  content: "\f747"; }

.fa-desktop::before {
  content: "\f390"; }

.fa-desktop-alt::before {
  content: "\f390"; }

.fa-dharmachakra::before {
  content: "\f655"; }

.fa-diagram-next::before {
  content: "\e476"; }

.fa-diagram-predecessor::before {
  content: "\e477"; }

.fa-diagram-project::before {
  content: "\f542"; }

.fa-project-diagram::before {
  content: "\f542"; }

.fa-diagram-successor::before {
  content: "\e47a"; }

.fa-diamond::before {
  content: "\f219"; }

.fa-diamond-turn-right::before {
  content: "\f5eb"; }

.fa-directions::before {
  content: "\f5eb"; }

.fa-dice::before {
  content: "\f522"; }

.fa-dice-d20::before {
  content: "\f6cf"; }

.fa-dice-d6::before {
  content: "\f6d1"; }

.fa-dice-five::before {
  content: "\f523"; }

.fa-dice-four::before {
  content: "\f524"; }

.fa-dice-one::before {
  content: "\f525"; }

.fa-dice-six::before {
  content: "\f526"; }

.fa-dice-three::before {
  content: "\f527"; }

.fa-dice-two::before {
  content: "\f528"; }

.fa-disease::before {
  content: "\f7fa"; }

.fa-display::before {
  content: "\e163"; }

.fa-divide::before {
  content: "\f529"; }

.fa-dna::before {
  content: "\f471"; }

.fa-dog::before {
  content: "\f6d3"; }

.fa-dollar-sign::before {
  content: "\24"; }

.fa-dollar::before {
  content: "\24"; }

.fa-usd::before {
  content: "\24"; }

.fa-dolly::before {
  content: "\f472"; }

.fa-dolly-box::before {
  content: "\f472"; }

.fa-dong-sign::before {
  content: "\e169"; }

.fa-door-closed::before {
  content: "\f52a"; }

.fa-door-open::before {
  content: "\f52b"; }

.fa-dove::before {
  content: "\f4ba"; }

.fa-down-left-and-up-right-to-center::before {
  content: "\f422"; }

.fa-compress-alt::before {
  content: "\f422"; }

.fa-down-long::before {
  content: "\f309"; }

.fa-long-arrow-alt-down::before {
  content: "\f309"; }

.fa-download::before {
  content: "\f019"; }

.fa-dragon::before {
  content: "\f6d5"; }

.fa-draw-polygon::before {
  content: "\f5ee"; }

.fa-droplet::before {
  content: "\f043"; }

.fa-tint::before {
  content: "\f043"; }

.fa-droplet-slash::before {
  content: "\f5c7"; }

.fa-tint-slash::before {
  content: "\f5c7"; }

.fa-drum::before {
  content: "\f569"; }

.fa-drum-steelpan::before {
  content: "\f56a"; }

.fa-drumstick-bite::before {
  content: "\f6d7"; }

.fa-dumbbell::before {
  content: "\f44b"; }

.fa-dumpster::before {
  content: "\f793"; }

.fa-dumpster-fire::before {
  content: "\f794"; }

.fa-dungeon::before {
  content: "\f6d9"; }

.fa-e::before {
  content: "\45"; }

.fa-ear-deaf::before {
  content: "\f2a4"; }

.fa-deaf::before {
  content: "\f2a4"; }

.fa-deafness::before {
  content: "\f2a4"; }

.fa-hard-of-hearing::before {
  content: "\f2a4"; }

.fa-ear-listen::before {
  content: "\f2a2"; }

.fa-assistive-listening-systems::before {
  content: "\f2a2"; }

.fa-earth-africa::before {
  content: "\f57c"; }

.fa-globe-africa::before {
  content: "\f57c"; }

.fa-earth-americas::before {
  content: "\f57d"; }

.fa-earth::before {
  content: "\f57d"; }

.fa-earth-america::before {
  content: "\f57d"; }

.fa-globe-americas::before {
  content: "\f57d"; }

.fa-earth-asia::before {
  content: "\f57e"; }

.fa-globe-asia::before {
  content: "\f57e"; }

.fa-earth-europe::before {
  content: "\f7a2"; }

.fa-globe-europe::before {
  content: "\f7a2"; }

.fa-earth-oceania::before {
  content: "\e47b"; }

.fa-globe-oceania::before {
  content: "\e47b"; }

.fa-egg::before {
  content: "\f7fb"; }

.fa-eject::before {
  content: "\f052"; }

.fa-elevator::before {
  content: "\e16d"; }

.fa-ellipsis::before {
  content: "\f141"; }

.fa-ellipsis-h::before {
  content: "\f141"; }

.fa-ellipsis-vertical::before {
  content: "\f142"; }

.fa-ellipsis-v::before {
  content: "\f142"; }

.fa-envelope::before {
  content: "\f0e0"; }

.fa-envelope-circle-check::before {
  content: "\e4e8"; }

.fa-envelope-open::before {
  content: "\f2b6"; }

.fa-envelope-open-text::before {
  content: "\f658"; }

.fa-envelopes-bulk::before {
  content: "\f674"; }

.fa-mail-bulk::before {
  content: "\f674"; }

.fa-equals::before {
  content: "\3d"; }

.fa-eraser::before {
  content: "\f12d"; }

.fa-ethernet::before {
  content: "\f796"; }

.fa-euro-sign::before {
  content: "\f153"; }

.fa-eur::before {
  content: "\f153"; }

.fa-euro::before {
  content: "\f153"; }

.fa-exclamation::before {
  content: "\21"; }

.fa-expand::before {
  content: "\f065"; }

.fa-explosion::before {
  content: "\e4e9"; }

.fa-eye::before {
  content: "\f06e"; }

.fa-eye-dropper::before {
  content: "\f1fb"; }

.fa-eye-dropper-empty::before {
  content: "\f1fb"; }

.fa-eyedropper::before {
  content: "\f1fb"; }

.fa-eye-low-vision::before {
  content: "\f2a8"; }

.fa-low-vision::before {
  content: "\f2a8"; }

.fa-eye-slash::before {
  content: "\f070"; }

.fa-f::before {
  content: "\46"; }

.fa-face-angry::before {
  content: "\f556"; }

.fa-angry::before {
  content: "\f556"; }

.fa-face-dizzy::before {
  content: "\f567"; }

.fa-dizzy::before {
  content: "\f567"; }

.fa-face-flushed::before {
  content: "\f579"; }

.fa-flushed::before {
  content: "\f579"; }

.fa-face-frown::before {
  content: "\f119"; }

.fa-frown::before {
  content: "\f119"; }

.fa-face-frown-open::before {
  content: "\f57a"; }

.fa-frown-open::before {
  content: "\f57a"; }

.fa-face-grimace::before {
  content: "\f57f"; }

.fa-grimace::before {
  content: "\f57f"; }

.fa-face-grin::before {
  content: "\f580"; }

.fa-grin::before {
  content: "\f580"; }

.fa-face-grin-beam::before {
  content: "\f582"; }

.fa-grin-beam::before {
  content: "\f582"; }

.fa-face-grin-beam-sweat::before {
  content: "\f583"; }

.fa-grin-beam-sweat::before {
  content: "\f583"; }

.fa-face-grin-hearts::before {
  content: "\f584"; }

.fa-grin-hearts::before {
  content: "\f584"; }

.fa-face-grin-squint::before {
  content: "\f585"; }

.fa-grin-squint::before {
  content: "\f585"; }

.fa-face-grin-squint-tears::before {
  content: "\f586"; }

.fa-grin-squint-tears::before {
  content: "\f586"; }

.fa-face-grin-stars::before {
  content: "\f587"; }

.fa-grin-stars::before {
  content: "\f587"; }

.fa-face-grin-tears::before {
  content: "\f588"; }

.fa-grin-tears::before {
  content: "\f588"; }

.fa-face-grin-tongue::before {
  content: "\f589"; }

.fa-grin-tongue::before {
  content: "\f589"; }

.fa-face-grin-tongue-squint::before {
  content: "\f58a"; }

.fa-grin-tongue-squint::before {
  content: "\f58a"; }

.fa-face-grin-tongue-wink::before {
  content: "\f58b"; }

.fa-grin-tongue-wink::before {
  content: "\f58b"; }

.fa-face-grin-wide::before {
  content: "\f581"; }

.fa-grin-alt::before {
  content: "\f581"; }

.fa-face-grin-wink::before {
  content: "\f58c"; }

.fa-grin-wink::before {
  content: "\f58c"; }

.fa-face-kiss::before {
  content: "\f596"; }

.fa-kiss::before {
  content: "\f596"; }

.fa-face-kiss-beam::before {
  content: "\f597"; }

.fa-kiss-beam::before {
  content: "\f597"; }

.fa-face-kiss-wink-heart::before {
  content: "\f598"; }

.fa-kiss-wink-heart::before {
  content: "\f598"; }

.fa-face-laugh::before {
  content: "\f599"; }

.fa-laugh::before {
  content: "\f599"; }

.fa-face-laugh-beam::before {
  content: "\f59a"; }

.fa-laugh-beam::before {
  content: "\f59a"; }

.fa-face-laugh-squint::before {
  content: "\f59b"; }

.fa-laugh-squint::before {
  content: "\f59b"; }

.fa-face-laugh-wink::before {
  content: "\f59c"; }

.fa-laugh-wink::before {
  content: "\f59c"; }

.fa-face-meh::before {
  content: "\f11a"; }

.fa-meh::before {
  content: "\f11a"; }

.fa-face-meh-blank::before {
  content: "\f5a4"; }

.fa-meh-blank::before {
  content: "\f5a4"; }

.fa-face-rolling-eyes::before {
  content: "\f5a5"; }

.fa-meh-rolling-eyes::before {
  content: "\f5a5"; }

.fa-face-sad-cry::before {
  content: "\f5b3"; }

.fa-sad-cry::before {
  content: "\f5b3"; }

.fa-face-sad-tear::before {
  content: "\f5b4"; }

.fa-sad-tear::before {
  content: "\f5b4"; }

.fa-face-smile::before {
  content: "\f118"; }

.fa-smile::before {
  content: "\f118"; }

.fa-face-smile-beam::before {
  content: "\f5b8"; }

.fa-smile-beam::before {
  content: "\f5b8"; }

.fa-face-smile-wink::before {
  content: "\f4da"; }

.fa-smile-wink::before {
  content: "\f4da"; }

.fa-face-surprise::before {
  content: "\f5c2"; }

.fa-surprise::before {
  content: "\f5c2"; }

.fa-face-tired::before {
  content: "\f5c8"; }

.fa-tired::before {
  content: "\f5c8"; }

.fa-fan::before {
  content: "\f863"; }

.fa-faucet::before {
  content: "\e005"; }

.fa-faucet-drip::before {
  content: "\e006"; }

.fa-fax::before {
  content: "\f1ac"; }

.fa-feather::before {
  content: "\f52d"; }

.fa-feather-pointed::before {
  content: "\f56b"; }

.fa-feather-alt::before {
  content: "\f56b"; }

.fa-ferry::before {
  content: "\e4ea"; }

.fa-file::before {
  content: "\f15b"; }

.fa-file-arrow-down::before {
  content: "\f56d"; }

.fa-file-download::before {
  content: "\f56d"; }

.fa-file-arrow-up::before {
  content: "\f574"; }

.fa-file-upload::before {
  content: "\f574"; }

.fa-file-audio::before {
  content: "\f1c7"; }

.fa-file-circle-check::before {
  content: "\e493"; }

.fa-file-circle-exclamation::before {
  content: "\e4eb"; }

.fa-file-circle-minus::before {
  content: "\e4ed"; }

.fa-file-circle-plus::before {
  content: "\e4ee"; }

.fa-file-circle-question::before {
  content: "\e4ef"; }

.fa-file-circle-xmark::before {
  content: "\e494"; }

.fa-file-code::before {
  content: "\f1c9"; }

.fa-file-contract::before {
  content: "\f56c"; }

.fa-file-csv::before {
  content: "\f6dd"; }

.fa-file-excel::before {
  content: "\f1c3"; }

.fa-file-export::before {
  content: "\f56e"; }

.fa-arrow-right-from-file::before {
  content: "\f56e"; }

.fa-file-image::before {
  content: "\f1c5"; }

.fa-file-import::before {
  content: "\f56f"; }

.fa-arrow-right-to-file::before {
  content: "\f56f"; }

.fa-file-invoice::before {
  content: "\f570"; }

.fa-file-invoice-dollar::before {
  content: "\f571"; }

.fa-file-lines::before {
  content: "\f15c"; }

.fa-file-alt::before {
  content: "\f15c"; }

.fa-file-text::before {
  content: "\f15c"; }

.fa-file-medical::before {
  content: "\f477"; }

.fa-file-pdf::before {
  content: "\f1c1"; }

.fa-file-pen::before {
  content: "\f31c"; }

.fa-file-edit::before {
  content: "\f31c"; }

.fa-file-powerpoint::before {
  content: "\f1c4"; }

.fa-file-prescription::before {
  content: "\f572"; }

.fa-file-shield::before {
  content: "\e4f0"; }

.fa-file-signature::before {
  content: "\f573"; }

.fa-file-video::before {
  content: "\f1c8"; }

.fa-file-waveform::before {
  content: "\f478"; }

.fa-file-medical-alt::before {
  content: "\f478"; }

.fa-file-word::before {
  content: "\f1c2"; }

.fa-file-zipper::before {
  content: "\f1c6"; }

.fa-file-archive::before {
  content: "\f1c6"; }

.fa-fill::before {
  content: "\f575"; }

.fa-fill-drip::before {
  content: "\f576"; }

.fa-film::before {
  content: "\f008"; }

.fa-filter::before {
  content: "\f0b0"; }

.fa-filter-circle-dollar::before {
  content: "\f662"; }

.fa-funnel-dollar::before {
  content: "\f662"; }

.fa-filter-circle-xmark::before {
  content: "\e17b"; }

.fa-fingerprint::before {
  content: "\f577"; }

.fa-fire::before {
  content: "\f06d"; }

.fa-fire-burner::before {
  content: "\e4f1"; }

.fa-fire-extinguisher::before {
  content: "\f134"; }

.fa-fire-flame-curved::before {
  content: "\f7e4"; }

.fa-fire-alt::before {
  content: "\f7e4"; }

.fa-fire-flame-simple::before {
  content: "\f46a"; }

.fa-burn::before {
  content: "\f46a"; }

.fa-fish::before {
  content: "\f578"; }

.fa-fish-fins::before {
  content: "\e4f2"; }

.fa-flag::before {
  content: "\f024"; }

.fa-flag-checkered::before {
  content: "\f11e"; }

.fa-flag-usa::before {
  content: "\f74d"; }

.fa-flask::before {
  content: "\f0c3"; }

.fa-flask-vial::before {
  content: "\e4f3"; }

.fa-floppy-disk::before {
  content: "\f0c7"; }

.fa-save::before {
  content: "\f0c7"; }

.fa-florin-sign::before {
  content: "\e184"; }

.fa-folder::before {
  content: "\f07b"; }

.fa-folder-blank::before {
  content: "\f07b"; }

.fa-folder-closed::before {
  content: "\e185"; }

.fa-folder-minus::before {
  content: "\f65d"; }

.fa-folder-open::before {
  content: "\f07c"; }

.fa-folder-plus::before {
  content: "\f65e"; }

.fa-folder-tree::before {
  content: "\f802"; }

.fa-font::before {
  content: "\f031"; }

.fa-football::before {
  content: "\f44e"; }

.fa-football-ball::before {
  content: "\f44e"; }

.fa-forward::before {
  content: "\f04e"; }

.fa-forward-fast::before {
  content: "\f050"; }

.fa-fast-forward::before {
  content: "\f050"; }

.fa-forward-step::before {
  content: "\f051"; }

.fa-step-forward::before {
  content: "\f051"; }

.fa-franc-sign::before {
  content: "\e18f"; }

.fa-frog::before {
  content: "\f52e"; }

.fa-futbol::before {
  content: "\f1e3"; }

.fa-futbol-ball::before {
  content: "\f1e3"; }

.fa-soccer-ball::before {
  content: "\f1e3"; }

.fa-g::before {
  content: "\47"; }

.fa-gamepad::before {
  content: "\f11b"; }

.fa-gas-pump::before {
  content: "\f52f"; }

.fa-gauge::before {
  content: "\f624"; }

.fa-dashboard::before {
  content: "\f624"; }

.fa-gauge-med::before {
  content: "\f624"; }

.fa-tachometer-alt-average::before {
  content: "\f624"; }

.fa-gauge-high::before {
  content: "\f625"; }

.fa-tachometer-alt::before {
  content: "\f625"; }

.fa-tachometer-alt-fast::before {
  content: "\f625"; }

.fa-gauge-simple::before {
  content: "\f629"; }

.fa-gauge-simple-med::before {
  content: "\f629"; }

.fa-tachometer-average::before {
  content: "\f629"; }

.fa-gauge-simple-high::before {
  content: "\f62a"; }

.fa-tachometer::before {
  content: "\f62a"; }

.fa-tachometer-fast::before {
  content: "\f62a"; }

.fa-gavel::before {
  content: "\f0e3"; }

.fa-legal::before {
  content: "\f0e3"; }

.fa-gear::before {
  content: "\f013"; }

.fa-cog::before {
  content: "\f013"; }

.fa-gears::before {
  content: "\f085"; }

.fa-cogs::before {
  content: "\f085"; }

.fa-gem::before {
  content: "\f3a5"; }

.fa-genderless::before {
  content: "\f22d"; }

.fa-ghost::before {
  content: "\f6e2"; }

.fa-gift::before {
  content: "\f06b"; }

.fa-gifts::before {
  content: "\f79c"; }

.fa-glass-water::before {
  content: "\e4f4"; }

.fa-glass-water-droplet::before {
  content: "\e4f5"; }

.fa-glasses::before {
  content: "\f530"; }

.fa-globe::before {
  content: "\f0ac"; }

.fa-golf-ball-tee::before {
  content: "\f450"; }

.fa-golf-ball::before {
  content: "\f450"; }

.fa-gopuram::before {
  content: "\f664"; }

.fa-graduation-cap::before {
  content: "\f19d"; }

.fa-mortar-board::before {
  content: "\f19d"; }

.fa-greater-than::before {
  content: "\3e"; }

.fa-greater-than-equal::before {
  content: "\f532"; }

.fa-grip::before {
  content: "\f58d"; }

.fa-grip-horizontal::before {
  content: "\f58d"; }

.fa-grip-lines::before {
  content: "\f7a4"; }

.fa-grip-lines-vertical::before {
  content: "\f7a5"; }

.fa-grip-vertical::before {
  content: "\f58e"; }

.fa-group-arrows-rotate::before {
  content: "\e4f6"; }

.fa-guarani-sign::before {
  content: "\e19a"; }

.fa-guitar::before {
  content: "\f7a6"; }

.fa-gun::before {
  content: "\e19b"; }

.fa-h::before {
  content: "\48"; }

.fa-hammer::before {
  content: "\f6e3"; }

.fa-hamsa::before {
  content: "\f665"; }

.fa-hand::before {
  content: "\f256"; }

.fa-hand-paper::before {
  content: "\f256"; }

.fa-hand-back-fist::before {
  content: "\f255"; }

.fa-hand-rock::before {
  content: "\f255"; }

.fa-hand-dots::before {
  content: "\f461"; }

.fa-allergies::before {
  content: "\f461"; }

.fa-hand-fist::before {
  content: "\f6de"; }

.fa-fist-raised::before {
  content: "\f6de"; }

.fa-hand-holding::before {
  content: "\f4bd"; }

.fa-hand-holding-dollar::before {
  content: "\f4c0"; }

.fa-hand-holding-usd::before {
  content: "\f4c0"; }

.fa-hand-holding-droplet::before {
  content: "\f4c1"; }

.fa-hand-holding-water::before {
  content: "\f4c1"; }

.fa-hand-holding-hand::before {
  content: "\e4f7"; }

.fa-hand-holding-heart::before {
  content: "\f4be"; }

.fa-hand-holding-medical::before {
  content: "\e05c"; }

.fa-hand-lizard::before {
  content: "\f258"; }

.fa-hand-middle-finger::before {
  content: "\f806"; }

.fa-hand-peace::before {
  content: "\f25b"; }

.fa-hand-point-down::before {
  content: "\f0a7"; }

.fa-hand-point-left::before {
  content: "\f0a5"; }

.fa-hand-point-right::before {
  content: "\f0a4"; }

.fa-hand-point-up::before {
  content: "\f0a6"; }

.fa-hand-pointer::before {
  content: "\f25a"; }

.fa-hand-scissors::before {
  content: "\f257"; }

.fa-hand-sparkles::before {
  content: "\e05d"; }

.fa-hand-spock::before {
  content: "\f259"; }

.fa-handcuffs::before {
  content: "\e4f8"; }

.fa-hands::before {
  content: "\f2a7"; }

.fa-sign-language::before {
  content: "\f2a7"; }

.fa-signing::before {
  content: "\f2a7"; }

.fa-hands-asl-interpreting::before {
  content: "\f2a3"; }

.fa-american-sign-language-interpreting::before {
  content: "\f2a3"; }

.fa-asl-interpreting::before {
  content: "\f2a3"; }

.fa-hands-american-sign-language-interpreting::before {
  content: "\f2a3"; }

.fa-hands-bound::before {
  content: "\e4f9"; }

.fa-hands-bubbles::before {
  content: "\e05e"; }

.fa-hands-wash::before {
  content: "\e05e"; }

.fa-hands-clapping::before {
  content: "\e1a8"; }

.fa-hands-holding::before {
  content: "\f4c2"; }

.fa-hands-holding-child::before {
  content: "\e4fa"; }

.fa-hands-holding-circle::before {
  content: "\e4fb"; }

.fa-hands-praying::before {
  content: "\f684"; }

.fa-praying-hands::before {
  content: "\f684"; }

.fa-handshake::before {
  content: "\f2b5"; }

.fa-handshake-angle::before {
  content: "\f4c4"; }

.fa-hands-helping::before {
  content: "\f4c4"; }

.fa-handshake-simple::before {
  content: "\f4c6"; }

.fa-handshake-alt::before {
  content: "\f4c6"; }

.fa-handshake-simple-slash::before {
  content: "\e05f"; }

.fa-handshake-alt-slash::before {
  content: "\e05f"; }

.fa-handshake-slash::before {
  content: "\e060"; }

.fa-hanukiah::before {
  content: "\f6e6"; }

.fa-hard-drive::before {
  content: "\f0a0"; }

.fa-hdd::before {
  content: "\f0a0"; }

.fa-hashtag::before {
  content: "\23"; }

.fa-hat-cowboy::before {
  content: "\f8c0"; }

.fa-hat-cowboy-side::before {
  content: "\f8c1"; }

.fa-hat-wizard::before {
  content: "\f6e8"; }

.fa-head-side-cough::before {
  content: "\e061"; }

.fa-head-side-cough-slash::before {
  content: "\e062"; }

.fa-head-side-mask::before {
  content: "\e063"; }

.fa-head-side-virus::before {
  content: "\e064"; }

.fa-heading::before {
  content: "\f1dc"; }

.fa-header::before {
  content: "\f1dc"; }

.fa-headphones::before {
  content: "\f025"; }

.fa-headphones-simple::before {
  content: "\f58f"; }

.fa-headphones-alt::before {
  content: "\f58f"; }

.fa-headset::before {
  content: "\f590"; }

.fa-heart::before {
  content: "\f004"; }

.fa-heart-circle-bolt::before {
  content: "\e4fc"; }

.fa-heart-circle-check::before {
  content: "\e4fd"; }

.fa-heart-circle-exclamation::before {
  content: "\e4fe"; }

.fa-heart-circle-minus::before {
  content: "\e4ff"; }

.fa-heart-circle-plus::before {
  content: "\e500"; }

.fa-heart-circle-xmark::before {
  content: "\e501"; }

.fa-heart-crack::before {
  content: "\f7a9"; }

.fa-heart-broken::before {
  content: "\f7a9"; }

.fa-heart-pulse::before {
  content: "\f21e"; }

.fa-heartbeat::before {
  content: "\f21e"; }

.fa-helicopter::before {
  content: "\f533"; }

.fa-helicopter-symbol::before {
  content: "\e502"; }

.fa-helmet-safety::before {
  content: "\f807"; }

.fa-hard-hat::before {
  content: "\f807"; }

.fa-hat-hard::before {
  content: "\f807"; }

.fa-helmet-un::before {
  content: "\e503"; }

.fa-highlighter::before {
  content: "\f591"; }

.fa-hill-avalanche::before {
  content: "\e507"; }

.fa-hill-rockslide::before {
  content: "\e508"; }

.fa-hippo::before {
  content: "\f6ed"; }

.fa-hockey-puck::before {
  content: "\f453"; }

.fa-holly-berry::before {
  content: "\f7aa"; }

.fa-horse::before {
  content: "\f6f0"; }

.fa-horse-head::before {
  content: "\f7ab"; }

.fa-hospital::before {
  content: "\f0f8"; }

.fa-hospital-alt::before {
  content: "\f0f8"; }

.fa-hospital-wide::before {
  content: "\f0f8"; }

.fa-hospital-user::before {
  content: "\f80d"; }

.fa-hot-tub-person::before {
  content: "\f593"; }

.fa-hot-tub::before {
  content: "\f593"; }

.fa-hotdog::before {
  content: "\f80f"; }

.fa-hotel::before {
  content: "\f594"; }

.fa-hourglass::before {
  content: "\f254"; }

.fa-hourglass-2::before {
  content: "\f254"; }

.fa-hourglass-half::before {
  content: "\f254"; }

.fa-hourglass-empty::before {
  content: "\f252"; }

.fa-hourglass-end::before {
  content: "\f253"; }

.fa-hourglass-3::before {
  content: "\f253"; }

.fa-hourglass-start::before {
  content: "\f251"; }

.fa-hourglass-1::before {
  content: "\f251"; }

.fa-house::before {
  content: "\f015"; }

.fa-home::before {
  content: "\f015"; }

.fa-home-alt::before {
  content: "\f015"; }

.fa-home-lg-alt::before {
  content: "\f015"; }

.fa-house-chimney::before {
  content: "\e3af"; }

.fa-home-lg::before {
  content: "\e3af"; }

.fa-house-chimney-crack::before {
  content: "\f6f1"; }

.fa-house-damage::before {
  content: "\f6f1"; }

.fa-house-chimney-medical::before {
  content: "\f7f2"; }

.fa-clinic-medical::before {
  content: "\f7f2"; }

.fa-house-chimney-user::before {
  content: "\e065"; }

.fa-house-chimney-window::before {
  content: "\e00d"; }

.fa-house-circle-check::before {
  content: "\e509"; }

.fa-house-circle-exclamation::before {
  content: "\e50a"; }

.fa-house-circle-xmark::before {
  content: "\e50b"; }

.fa-house-crack::before {
  content: "\e3b1"; }

.fa-house-fire::before {
  content: "\e50c"; }

.fa-house-flag::before {
  content: "\e50d"; }

.fa-house-flood-water::before {
  content: "\e50e"; }

.fa-house-flood-water-circle-arrow-right::before {
  content: "\e50f"; }

.fa-house-laptop::before {
  content: "\e066"; }

.fa-laptop-house::before {
  content: "\e066"; }

.fa-house-lock::before {
  content: "\e510"; }

.fa-house-medical::before {
  content: "\e3b2"; }

.fa-house-medical-circle-check::before {
  content: "\e511"; }

.fa-house-medical-circle-exclamation::before {
  content: "\e512"; }

.fa-house-medical-circle-xmark::before {
  content: "\e513"; }

.fa-house-medical-flag::before {
  content: "\e514"; }

.fa-house-signal::before {
  content: "\e012"; }

.fa-house-tsunami::before {
  content: "\e515"; }

.fa-house-user::before {
  content: "\e1b0"; }

.fa-home-user::before {
  content: "\e1b0"; }

.fa-hryvnia-sign::before {
  content: "\f6f2"; }

.fa-hryvnia::before {
  content: "\f6f2"; }

.fa-hurricane::before {
  content: "\f751"; }

.fa-i::before {
  content: "\49"; }

.fa-i-cursor::before {
  content: "\f246"; }

.fa-ice-cream::before {
  content: "\f810"; }

.fa-icicles::before {
  content: "\f7ad"; }

.fa-icons::before {
  content: "\f86d"; }

.fa-heart-music-camera-bolt::before {
  content: "\f86d"; }

.fa-id-badge::before {
  content: "\f2c1"; }

.fa-id-card::before {
  content: "\f2c2"; }

.fa-drivers-license::before {
  content: "\f2c2"; }

.fa-id-card-clip::before {
  content: "\f47f"; }

.fa-id-card-alt::before {
  content: "\f47f"; }

.fa-igloo::before {
  content: "\f7ae"; }

.fa-image::before {
  content: "\f03e"; }

.fa-image-portrait::before {
  content: "\f3e0"; }

.fa-portrait::before {
  content: "\f3e0"; }

.fa-images::before {
  content: "\f302"; }

.fa-inbox::before {
  content: "\f01c"; }

.fa-indent::before {
  content: "\f03c"; }

.fa-indian-rupee-sign::before {
  content: "\e1bc"; }

.fa-indian-rupee::before {
  content: "\e1bc"; }

.fa-inr::before {
  content: "\e1bc"; }

.fa-industry::before {
  content: "\f275"; }

.fa-infinity::before {
  content: "\f534"; }

.fa-info::before {
  content: "\f129"; }

.fa-italic::before {
  content: "\f033"; }

.fa-j::before {
  content: "\4a"; }

.fa-jar::before {
  content: "\e516"; }

.fa-jar-wheat::before {
  content: "\e517"; }

.fa-jedi::before {
  content: "\f669"; }

.fa-jet-fighter::before {
  content: "\f0fb"; }

.fa-fighter-jet::before {
  content: "\f0fb"; }

.fa-jet-fighter-up::before {
  content: "\e518"; }

.fa-joint::before {
  content: "\f595"; }

.fa-jug-detergent::before {
  content: "\e519"; }

.fa-k::before {
  content: "\4b"; }

.fa-kaaba::before {
  content: "\f66b"; }

.fa-key::before {
  content: "\f084"; }

.fa-keyboard::before {
  content: "\f11c"; }

.fa-khanda::before {
  content: "\f66d"; }

.fa-kip-sign::before {
  content: "\e1c4"; }

.fa-kit-medical::before {
  content: "\f479"; }

.fa-first-aid::before {
  content: "\f479"; }

.fa-kitchen-set::before {
  content: "\e51a"; }

.fa-kiwi-bird::before {
  content: "\f535"; }

.fa-l::before {
  content: "\4c"; }

.fa-land-mine-on::before {
  content: "\e51b"; }

.fa-landmark::before {
  content: "\f66f"; }

.fa-landmark-dome::before {
  content: "\f752"; }

.fa-landmark-alt::before {
  content: "\f752"; }

.fa-landmark-flag::before {
  content: "\e51c"; }

.fa-language::before {
  content: "\f1ab"; }

.fa-laptop::before {
  content: "\f109"; }

.fa-laptop-code::before {
  content: "\f5fc"; }

.fa-laptop-file::before {
  content: "\e51d"; }

.fa-laptop-medical::before {
  content: "\f812"; }

.fa-lari-sign::before {
  content: "\e1c8"; }

.fa-layer-group::before {
  content: "\f5fd"; }

.fa-leaf::before {
  content: "\f06c"; }

.fa-left-long::before {
  content: "\f30a"; }

.fa-long-arrow-alt-left::before {
  content: "\f30a"; }

.fa-left-right::before {
  content: "\f337"; }

.fa-arrows-alt-h::before {
  content: "\f337"; }

.fa-lemon::before {
  content: "\f094"; }

.fa-less-than::before {
  content: "\3c"; }

.fa-less-than-equal::before {
  content: "\f537"; }

.fa-life-ring::before {
  content: "\f1cd"; }

.fa-lightbulb::before {
  content: "\f0eb"; }

.fa-lines-leaning::before {
  content: "\e51e"; }

.fa-link::before {
  content: "\f0c1"; }

.fa-chain::before {
  content: "\f0c1"; }

.fa-link-slash::before {
  content: "\f127"; }

.fa-chain-broken::before {
  content: "\f127"; }

.fa-chain-slash::before {
  content: "\f127"; }

.fa-unlink::before {
  content: "\f127"; }

.fa-lira-sign::before {
  content: "\f195"; }

.fa-list::before {
  content: "\f03a"; }

.fa-list-squares::before {
  content: "\f03a"; }

.fa-list-check::before {
  content: "\f0ae"; }

.fa-tasks::before {
  content: "\f0ae"; }

.fa-list-ol::before {
  content: "\f0cb"; }

.fa-list-1-2::before {
  content: "\f0cb"; }

.fa-list-numeric::before {
  content: "\f0cb"; }

.fa-list-ul::before {
  content: "\f0ca"; }

.fa-list-dots::before {
  content: "\f0ca"; }

.fa-litecoin-sign::before {
  content: "\e1d3"; }

.fa-location-arrow::before {
  content: "\f124"; }

.fa-location-crosshairs::before {
  content: "\f601"; }

.fa-location::before {
  content: "\f601"; }

.fa-location-dot::before {
  content: "\f3c5"; }

.fa-map-marker-alt::before {
  content: "\f3c5"; }

.fa-location-pin::before {
  content: "\f041"; }

.fa-map-marker::before {
  content: "\f041"; }

.fa-location-pin-lock::before {
  content: "\e51f"; }

.fa-lock::before {
  content: "\f023"; }

.fa-lock-open::before {
  content: "\f3c1"; }

.fa-locust::before {
  content: "\e520"; }

.fa-lungs::before {
  content: "\f604"; }

.fa-lungs-virus::before {
  content: "\e067"; }

.fa-m::before {
  content: "\4d"; }

.fa-magnet::before {
  content: "\f076"; }

.fa-magnifying-glass::before {
  content: "\f002"; }

.fa-search::before {
  content: "\f002"; }

.fa-magnifying-glass-arrow-right::before {
  content: "\e521"; }

.fa-magnifying-glass-chart::before {
  content: "\e522"; }

.fa-magnifying-glass-dollar::before {
  content: "\f688"; }

.fa-search-dollar::before {
  content: "\f688"; }

.fa-magnifying-glass-location::before {
  content: "\f689"; }

.fa-search-location::before {
  content: "\f689"; }

.fa-magnifying-glass-minus::before {
  content: "\f010"; }

.fa-search-minus::before {
  content: "\f010"; }

.fa-magnifying-glass-plus::before {
  content: "\f00e"; }

.fa-search-plus::before {
  content: "\f00e"; }

.fa-manat-sign::before {
  content: "\e1d5"; }

.fa-map::before {
  content: "\f279"; }

.fa-map-location::before {
  content: "\f59f"; }

.fa-map-marked::before {
  content: "\f59f"; }

.fa-map-location-dot::before {
  content: "\f5a0"; }

.fa-map-marked-alt::before {
  content: "\f5a0"; }

.fa-map-pin::before {
  content: "\f276"; }

.fa-marker::before {
  content: "\f5a1"; }

.fa-mars::before {
  content: "\f222"; }

.fa-mars-and-venus::before {
  content: "\f224"; }

.fa-mars-and-venus-burst::before {
  content: "\e523"; }

.fa-mars-double::before {
  content: "\f227"; }

.fa-mars-stroke::before {
  content: "\f229"; }

.fa-mars-stroke-right::before {
  content: "\f22b"; }

.fa-mars-stroke-h::before {
  content: "\f22b"; }

.fa-mars-stroke-up::before {
  content: "\f22a"; }

.fa-mars-stroke-v::before {
  content: "\f22a"; }

.fa-martini-glass::before {
  content: "\f57b"; }

.fa-glass-martini-alt::before {
  content: "\f57b"; }

.fa-martini-glass-citrus::before {
  content: "\f561"; }

.fa-cocktail::before {
  content: "\f561"; }

.fa-martini-glass-empty::before {
  content: "\f000"; }

.fa-glass-martini::before {
  content: "\f000"; }

.fa-mask::before {
  content: "\f6fa"; }

.fa-mask-face::before {
  content: "\e1d7"; }

.fa-mask-ventilator::before {
  content: "\e524"; }

.fa-masks-theater::before {
  content: "\f630"; }

.fa-theater-masks::before {
  content: "\f630"; }

.fa-mattress-pillow::before {
  content: "\e525"; }

.fa-maximize::before {
  content: "\f31e"; }

.fa-expand-arrows-alt::before {
  content: "\f31e"; }

.fa-medal::before {
  content: "\f5a2"; }

.fa-memory::before {
  content: "\f538"; }

.fa-menorah::before {
  content: "\f676"; }

.fa-mercury::before {
  content: "\f223"; }

.fa-message::before {
  content: "\f27a"; }

.fa-comment-alt::before {
  content: "\f27a"; }

.fa-meteor::before {
  content: "\f753"; }

.fa-microchip::before {
  content: "\f2db"; }

.fa-microphone::before {
  content: "\f130"; }

.fa-microphone-lines::before {
  content: "\f3c9"; }

.fa-microphone-alt::before {
  content: "\f3c9"; }

.fa-microphone-lines-slash::before {
  content: "\f539"; }

.fa-microphone-alt-slash::before {
  content: "\f539"; }

.fa-microphone-slash::before {
  content: "\f131"; }

.fa-microscope::before {
  content: "\f610"; }

.fa-mill-sign::before {
  content: "\e1ed"; }

.fa-minimize::before {
  content: "\f78c"; }

.fa-compress-arrows-alt::before {
  content: "\f78c"; }

.fa-minus::before {
  content: "\f068"; }

.fa-subtract::before {
  content: "\f068"; }

.fa-mitten::before {
  content: "\f7b5"; }

.fa-mobile::before {
  content: "\f3ce"; }

.fa-mobile-android::before {
  content: "\f3ce"; }

.fa-mobile-phone::before {
  content: "\f3ce"; }

.fa-mobile-button::before {
  content: "\f10b"; }

.fa-mobile-retro::before {
  content: "\e527"; }

.fa-mobile-screen::before {
  content: "\f3cf"; }

.fa-mobile-android-alt::before {
  content: "\f3cf"; }

.fa-mobile-screen-button::before {
  content: "\f3cd"; }

.fa-mobile-alt::before {
  content: "\f3cd"; }

.fa-money-bill::before {
  content: "\f0d6"; }

.fa-money-bill-1::before {
  content: "\f3d1"; }

.fa-money-bill-alt::before {
  content: "\f3d1"; }

.fa-money-bill-1-wave::before {
  content: "\f53b"; }

.fa-money-bill-wave-alt::before {
  content: "\f53b"; }

.fa-money-bill-transfer::before {
  content: "\e528"; }

.fa-money-bill-trend-up::before {
  content: "\e529"; }

.fa-money-bill-wave::before {
  content: "\f53a"; }

.fa-money-bill-wheat::before {
  content: "\e52a"; }

.fa-money-bills::before {
  content: "\e1f3"; }

.fa-money-check::before {
  content: "\f53c"; }

.fa-money-check-dollar::before {
  content: "\f53d"; }

.fa-money-check-alt::before {
  content: "\f53d"; }

.fa-monument::before {
  content: "\f5a6"; }

.fa-moon::before {
  content: "\f186"; }

.fa-mortar-pestle::before {
  content: "\f5a7"; }

.fa-mosque::before {
  content: "\f678"; }

.fa-mosquito::before {
  content: "\e52b"; }

.fa-mosquito-net::before {
  content: "\e52c"; }

.fa-motorcycle::before {
  content: "\f21c"; }

.fa-mound::before {
  content: "\e52d"; }

.fa-mountain::before {
  content: "\f6fc"; }

.fa-mountain-city::before {
  content: "\e52e"; }

.fa-mountain-sun::before {
  content: "\e52f"; }

.fa-mug-hot::before {
  content: "\f7b6"; }

.fa-mug-saucer::before {
  content: "\f0f4"; }

.fa-coffee::before {
  content: "\f0f4"; }

.fa-music::before {
  content: "\f001"; }

.fa-n::before {
  content: "\4e"; }

.fa-naira-sign::before {
  content: "\e1f6"; }

.fa-network-wired::before {
  content: "\f6ff"; }

.fa-neuter::before {
  content: "\f22c"; }

.fa-newspaper::before {
  content: "\f1ea"; }

.fa-not-equal::before {
  content: "\f53e"; }

.fa-note-sticky::before {
  content: "\f249"; }

.fa-sticky-note::before {
  content: "\f249"; }

.fa-notes-medical::before {
  content: "\f481"; }

.fa-o::before {
  content: "\4f"; }

.fa-object-group::before {
  content: "\f247"; }

.fa-object-ungroup::before {
  content: "\f248"; }

.fa-oil-can::before {
  content: "\f613"; }

.fa-oil-well::before {
  content: "\e532"; }

.fa-om::before {
  content: "\f679"; }

.fa-otter::before {
  content: "\f700"; }

.fa-outdent::before {
  content: "\f03b"; }

.fa-dedent::before {
  content: "\f03b"; }

.fa-p::before {
  content: "\50"; }

.fa-pager::before {
  content: "\f815"; }

.fa-paint-roller::before {
  content: "\f5aa"; }

.fa-paintbrush::before {
  content: "\f1fc"; }

.fa-paint-brush::before {
  content: "\f1fc"; }

.fa-palette::before {
  content: "\f53f"; }

.fa-pallet::before {
  content: "\f482"; }

.fa-panorama::before {
  content: "\e209"; }

.fa-paper-plane::before {
  content: "\f1d8"; }

.fa-paperclip::before {
  content: "\f0c6"; }

.fa-parachute-box::before {
  content: "\f4cd"; }

.fa-paragraph::before {
  content: "\f1dd"; }

.fa-passport::before {
  content: "\f5ab"; }

.fa-paste::before {
  content: "\f0ea"; }

.fa-file-clipboard::before {
  content: "\f0ea"; }

.fa-pause::before {
  content: "\f04c"; }

.fa-paw::before {
  content: "\f1b0"; }

.fa-peace::before {
  content: "\f67c"; }

.fa-pen::before {
  content: "\f304"; }

.fa-pen-clip::before {
  content: "\f305"; }

.fa-pen-alt::before {
  content: "\f305"; }

.fa-pen-fancy::before {
  content: "\f5ac"; }

.fa-pen-nib::before {
  content: "\f5ad"; }

.fa-pen-ruler::before {
  content: "\f5ae"; }

.fa-pencil-ruler::before {
  content: "\f5ae"; }

.fa-pen-to-square::before {
  content: "\f044"; }

.fa-edit::before {
  content: "\f044"; }

.fa-pencil::before {
  content: "\f303"; }

.fa-pencil-alt::before {
  content: "\f303"; }

.fa-people-arrows-left-right::before {
  content: "\e068"; }

.fa-people-arrows::before {
  content: "\e068"; }

.fa-people-carry-box::before {
  content: "\f4ce"; }

.fa-people-carry::before {
  content: "\f4ce"; }

.fa-people-group::before {
  content: "\e533"; }

.fa-people-line::before {
  content: "\e534"; }

.fa-people-pulling::before {
  content: "\e535"; }

.fa-people-robbery::before {
  content: "\e536"; }

.fa-people-roof::before {
  content: "\e537"; }

.fa-pepper-hot::before {
  content: "\f816"; }

.fa-percent::before {
  content: "\25"; }

.fa-percentage::before {
  content: "\25"; }

.fa-person::before {
  content: "\f183"; }

.fa-male::before {
  content: "\f183"; }

.fa-person-arrow-down-to-line::before {
  content: "\e538"; }

.fa-person-arrow-up-from-line::before {
  content: "\e539"; }

.fa-person-biking::before {
  content: "\f84a"; }

.fa-biking::before {
  content: "\f84a"; }

.fa-person-booth::before {
  content: "\f756"; }

.fa-person-breastfeeding::before {
  content: "\e53a"; }

.fa-person-burst::before {
  content: "\e53b"; }

.fa-person-cane::before {
  content: "\e53c"; }

.fa-person-chalkboard::before {
  content: "\e53d"; }

.fa-person-circle-check::before {
  content: "\e53e"; }

.fa-person-circle-exclamation::before {
  content: "\e53f"; }

.fa-person-circle-minus::before {
  content: "\e540"; }

.fa-person-circle-plus::before {
  content: "\e541"; }

.fa-person-circle-question::before {
  content: "\e542"; }

.fa-person-circle-xmark::before {
  content: "\e543"; }

.fa-person-digging::before {
  content: "\f85e"; }

.fa-digging::before {
  content: "\f85e"; }

.fa-person-dots-from-line::before {
  content: "\f470"; }

.fa-diagnoses::before {
  content: "\f470"; }

.fa-person-dress::before {
  content: "\f182"; }

.fa-female::before {
  content: "\f182"; }

.fa-person-dress-burst::before {
  content: "\e544"; }

.fa-person-drowning::before {
  content: "\e545"; }

.fa-person-falling::before {
  content: "\e546"; }

.fa-person-falling-burst::before {
  content: "\e547"; }

.fa-person-half-dress::before {
  content: "\e548"; }

.fa-person-harassing::before {
  content: "\e549"; }

.fa-person-hiking::before {
  content: "\f6ec"; }

.fa-hiking::before {
  content: "\f6ec"; }

.fa-person-military-pointing::before {
  content: "\e54a"; }

.fa-person-military-rifle::before {
  content: "\e54b"; }

.fa-person-military-to-person::before {
  content: "\e54c"; }

.fa-person-praying::before {
  content: "\f683"; }

.fa-pray::before {
  content: "\f683"; }

.fa-person-pregnant::before {
  content: "\e31e"; }

.fa-person-rays::before {
  content: "\e54d"; }

.fa-person-rifle::before {
  content: "\e54e"; }

.fa-person-running::before {
  content: "\f70c"; }

.fa-running::before {
  content: "\f70c"; }

.fa-person-shelter::before {
  content: "\e54f"; }

.fa-person-skating::before {
  content: "\f7c5"; }

.fa-skating::before {
  content: "\f7c5"; }

.fa-person-skiing::before {
  content: "\f7c9"; }

.fa-skiing::before {
  content: "\f7c9"; }

.fa-person-skiing-nordic::before {
  content: "\f7ca"; }

.fa-skiing-nordic::before {
  content: "\f7ca"; }

.fa-person-snowboarding::before {
  content: "\f7ce"; }

.fa-snowboarding::before {
  content: "\f7ce"; }

.fa-person-swimming::before {
  content: "\f5c4"; }

.fa-swimmer::before {
  content: "\f5c4"; }

.fa-person-through-window::before {
  content: "\e433"; }

.fa-person-walking::before {
  content: "\f554"; }

.fa-walking::before {
  content: "\f554"; }

.fa-person-walking-arrow-loop-left::before {
  content: "\e551"; }

.fa-person-walking-arrow-right::before {
  content: "\e552"; }

.fa-person-walking-dashed-line-arrow-right::before {
  content: "\e553"; }

.fa-person-walking-luggage::before {
  content: "\e554"; }

.fa-person-walking-with-cane::before {
  content: "\f29d"; }

.fa-blind::before {
  content: "\f29d"; }

.fa-peseta-sign::before {
  content: "\e221"; }

.fa-peso-sign::before {
  content: "\e222"; }

.fa-phone::before {
  content: "\f095"; }

.fa-phone-flip::before {
  content: "\f879"; }

.fa-phone-alt::before {
  content: "\f879"; }

.fa-phone-slash::before {
  content: "\f3dd"; }

.fa-phone-volume::before {
  content: "\f2a0"; }

.fa-volume-control-phone::before {
  content: "\f2a0"; }

.fa-photo-film::before {
  content: "\f87c"; }

.fa-photo-video::before {
  content: "\f87c"; }

.fa-piggy-bank::before {
  content: "\f4d3"; }

.fa-pills::before {
  content: "\f484"; }

.fa-pizza-slice::before {
  content: "\f818"; }

.fa-place-of-worship::before {
  content: "\f67f"; }

.fa-plane::before {
  content: "\f072"; }

.fa-plane-arrival::before {
  content: "\f5af"; }

.fa-plane-circle-check::before {
  content: "\e555"; }

.fa-plane-circle-exclamation::before {
  content: "\e556"; }

.fa-plane-circle-xmark::before {
  content: "\e557"; }

.fa-plane-departure::before {
  content: "\f5b0"; }

.fa-plane-lock::before {
  content: "\e558"; }

.fa-plane-slash::before {
  content: "\e069"; }

.fa-plane-up::before {
  content: "\e22d"; }

.fa-plant-wilt::before {
  content: "\e43b"; }

.fa-plate-wheat::before {
  content: "\e55a"; }

.fa-play::before {
  content: "\f04b"; }

.fa-plug::before {
  content: "\f1e6"; }

.fa-plug-circle-bolt::before {
  content: "\e55b"; }

.fa-plug-circle-check::before {
  content: "\e55c"; }

.fa-plug-circle-exclamation::before {
  content: "\e55d"; }

.fa-plug-circle-minus::before {
  content: "\e55e"; }

.fa-plug-circle-plus::before {
  content: "\e55f"; }

.fa-plug-circle-xmark::before {
  content: "\e560"; }

.fa-plus::before {
  content: "\2b"; }

.fa-add::before {
  content: "\2b"; }

.fa-plus-minus::before {
  content: "\e43c"; }

.fa-podcast::before {
  content: "\f2ce"; }

.fa-poo::before {
  content: "\f2fe"; }

.fa-poo-storm::before {
  content: "\f75a"; }

.fa-poo-bolt::before {
  content: "\f75a"; }

.fa-poop::before {
  content: "\f619"; }

.fa-power-off::before {
  content: "\f011"; }

.fa-prescription::before {
  content: "\f5b1"; }

.fa-prescription-bottle::before {
  content: "\f485"; }

.fa-prescription-bottle-medical::before {
  content: "\f486"; }

.fa-prescription-bottle-alt::before {
  content: "\f486"; }

.fa-print::before {
  content: "\f02f"; }

.fa-pump-medical::before {
  content: "\e06a"; }

.fa-pump-soap::before {
  content: "\e06b"; }

.fa-puzzle-piece::before {
  content: "\f12e"; }

.fa-q::before {
  content: "\51"; }

.fa-qrcode::before {
  content: "\f029"; }

.fa-question::before {
  content: "\3f"; }

.fa-quote-left::before {
  content: "\f10d"; }

.fa-quote-left-alt::before {
  content: "\f10d"; }

.fa-quote-right::before {
  content: "\f10e"; }

.fa-quote-right-alt::before {
  content: "\f10e"; }

.fa-r::before {
  content: "\52"; }

.fa-radiation::before {
  content: "\f7b9"; }

.fa-radio::before {
  content: "\f8d7"; }

.fa-rainbow::before {
  content: "\f75b"; }

.fa-ranking-star::before {
  content: "\e561"; }

.fa-receipt::before {
  content: "\f543"; }

.fa-record-vinyl::before {
  content: "\f8d9"; }

.fa-rectangle-ad::before {
  content: "\f641"; }

.fa-ad::before {
  content: "\f641"; }

.fa-rectangle-list::before {
  content: "\f022"; }

.fa-list-alt::before {
  content: "\f022"; }

.fa-rectangle-xmark::before {
  content: "\f410"; }

.fa-rectangle-times::before {
  content: "\f410"; }

.fa-times-rectangle::before {
  content: "\f410"; }

.fa-window-close::before {
  content: "\f410"; }

.fa-recycle::before {
  content: "\f1b8"; }

.fa-registered::before {
  content: "\f25d"; }

.fa-repeat::before {
  content: "\f363"; }

.fa-reply::before {
  content: "\f3e5"; }

.fa-mail-reply::before {
  content: "\f3e5"; }

.fa-reply-all::before {
  content: "\f122"; }

.fa-mail-reply-all::before {
  content: "\f122"; }

.fa-republican::before {
  content: "\f75e"; }

.fa-restroom::before {
  content: "\f7bd"; }

.fa-retweet::before {
  content: "\f079"; }

.fa-ribbon::before {
  content: "\f4d6"; }

.fa-right-from-bracket::before {
  content: "\f2f5"; }

.fa-sign-out-alt::before {
  content: "\f2f5"; }

.fa-right-left::before {
  content: "\f362"; }

.fa-exchange-alt::before {
  content: "\f362"; }

.fa-right-long::before {
  content: "\f30b"; }

.fa-long-arrow-alt-right::before {
  content: "\f30b"; }

.fa-right-to-bracket::before {
  content: "\f2f6"; }

.fa-sign-in-alt::before {
  content: "\f2f6"; }

.fa-ring::before {
  content: "\f70b"; }

.fa-road::before {
  content: "\f018"; }

.fa-road-barrier::before {
  content: "\e562"; }

.fa-road-bridge::before {
  content: "\e563"; }

.fa-road-circle-check::before {
  content: "\e564"; }

.fa-road-circle-exclamation::before {
  content: "\e565"; }

.fa-road-circle-xmark::before {
  content: "\e566"; }

.fa-road-lock::before {
  content: "\e567"; }

.fa-road-spikes::before {
  content: "\e568"; }

.fa-robot::before {
  content: "\f544"; }

.fa-rocket::before {
  content: "\f135"; }

.fa-rotate::before {
  content: "\f2f1"; }

.fa-sync-alt::before {
  content: "\f2f1"; }

.fa-rotate-left::before {
  content: "\f2ea"; }

.fa-rotate-back::before {
  content: "\f2ea"; }

.fa-rotate-backward::before {
  content: "\f2ea"; }

.fa-undo-alt::before {
  content: "\f2ea"; }

.fa-rotate-right::before {
  content: "\f2f9"; }

.fa-redo-alt::before {
  content: "\f2f9"; }

.fa-rotate-forward::before {
  content: "\f2f9"; }

.fa-route::before {
  content: "\f4d7"; }

.fa-rss::before {
  content: "\f09e"; }

.fa-feed::before {
  content: "\f09e"; }

.fa-ruble-sign::before {
  content: "\f158"; }

.fa-rouble::before {
  content: "\f158"; }

.fa-rub::before {
  content: "\f158"; }

.fa-ruble::before {
  content: "\f158"; }

.fa-rug::before {
  content: "\e569"; }

.fa-ruler::before {
  content: "\f545"; }

.fa-ruler-combined::before {
  content: "\f546"; }

.fa-ruler-horizontal::before {
  content: "\f547"; }

.fa-ruler-vertical::before {
  content: "\f548"; }

.fa-rupee-sign::before {
  content: "\f156"; }

.fa-rupee::before {
  content: "\f156"; }

.fa-rupiah-sign::before {
  content: "\e23d"; }

.fa-s::before {
  content: "\53"; }

.fa-sack-dollar::before {
  content: "\f81d"; }

.fa-sack-xmark::before {
  content: "\e56a"; }

.fa-sailboat::before {
  content: "\e445"; }

.fa-satellite::before {
  content: "\f7bf"; }

.fa-satellite-dish::before {
  content: "\f7c0"; }

.fa-scale-balanced::before {
  content: "\f24e"; }

.fa-balance-scale::before {
  content: "\f24e"; }

.fa-scale-unbalanced::before {
  content: "\f515"; }

.fa-balance-scale-left::before {
  content: "\f515"; }

.fa-scale-unbalanced-flip::before {
  content: "\f516"; }

.fa-balance-scale-right::before {
  content: "\f516"; }

.fa-school::before {
  content: "\f549"; }

.fa-school-circle-check::before {
  content: "\e56b"; }

.fa-school-circle-exclamation::before {
  content: "\e56c"; }

.fa-school-circle-xmark::before {
  content: "\e56d"; }

.fa-school-flag::before {
  content: "\e56e"; }

.fa-school-lock::before {
  content: "\e56f"; }

.fa-scissors::before {
  content: "\f0c4"; }

.fa-cut::before {
  content: "\f0c4"; }

.fa-screwdriver::before {
  content: "\f54a"; }

.fa-screwdriver-wrench::before {
  content: "\f7d9"; }

.fa-tools::before {
  content: "\f7d9"; }

.fa-scroll::before {
  content: "\f70e"; }

.fa-scroll-torah::before {
  content: "\f6a0"; }

.fa-torah::before {
  content: "\f6a0"; }

.fa-sd-card::before {
  content: "\f7c2"; }

.fa-section::before {
  content: "\e447"; }

.fa-seedling::before {
  content: "\f4d8"; }

.fa-sprout::before {
  content: "\f4d8"; }

.fa-server::before {
  content: "\f233"; }

.fa-shapes::before {
  content: "\f61f"; }

.fa-triangle-circle-square::before {
  content: "\f61f"; }

.fa-share::before {
  content: "\f064"; }

.fa-arrow-turn-right::before {
  content: "\f064"; }

.fa-mail-forward::before {
  content: "\f064"; }

.fa-share-from-square::before {
  content: "\f14d"; }

.fa-share-square::before {
  content: "\f14d"; }

.fa-share-nodes::before {
  content: "\f1e0"; }

.fa-share-alt::before {
  content: "\f1e0"; }

.fa-sheet-plastic::before {
  content: "\e571"; }

.fa-shekel-sign::before {
  content: "\f20b"; }

.fa-ils::before {
  content: "\f20b"; }

.fa-shekel::before {
  content: "\f20b"; }

.fa-sheqel::before {
  content: "\f20b"; }

.fa-sheqel-sign::before {
  content: "\f20b"; }

.fa-shield::before {
  content: "\f132"; }

.fa-shield-blank::before {
  content: "\f132"; }

.fa-shield-cat::before {
  content: "\e572"; }

.fa-shield-dog::before {
  content: "\e573"; }

.fa-shield-halved::before {
  content: "\f3ed"; }

.fa-shield-alt::before {
  content: "\f3ed"; }

.fa-shield-heart::before {
  content: "\e574"; }

.fa-shield-virus::before {
  content: "\e06c"; }

.fa-ship::before {
  content: "\f21a"; }

.fa-shirt::before {
  content: "\f553"; }

.fa-t-shirt::before {
  content: "\f553"; }

.fa-tshirt::before {
  content: "\f553"; }

.fa-shoe-prints::before {
  content: "\f54b"; }

.fa-shop::before {
  content: "\f54f"; }

.fa-store-alt::before {
  content: "\f54f"; }

.fa-shop-lock::before {
  content: "\e4a5"; }

.fa-shop-slash::before {
  content: "\e070"; }

.fa-store-alt-slash::before {
  content: "\e070"; }

.fa-shower::before {
  content: "\f2cc"; }

.fa-shrimp::before {
  content: "\e448"; }

.fa-shuffle::before {
  content: "\f074"; }

.fa-random::before {
  content: "\f074"; }

.fa-shuttle-space::before {
  content: "\f197"; }

.fa-space-shuttle::before {
  content: "\f197"; }

.fa-sign-hanging::before {
  content: "\f4d9"; }

.fa-sign::before {
  content: "\f4d9"; }

.fa-signal::before {
  content: "\f012"; }

.fa-signal-5::before {
  content: "\f012"; }

.fa-signal-perfect::before {
  content: "\f012"; }

.fa-signature::before {
  content: "\f5b7"; }

.fa-signs-post::before {
  content: "\f277"; }

.fa-map-signs::before {
  content: "\f277"; }

.fa-sim-card::before {
  content: "\f7c4"; }

.fa-sink::before {
  content: "\e06d"; }

.fa-sitemap::before {
  content: "\f0e8"; }

.fa-skull::before {
  content: "\f54c"; }

.fa-skull-crossbones::before {
  content: "\f714"; }

.fa-slash::before {
  content: "\f715"; }

.fa-sleigh::before {
  content: "\f7cc"; }

.fa-sliders::before {
  content: "\f1de"; }

.fa-sliders-h::before {
  content: "\f1de"; }

.fa-smog::before {
  content: "\f75f"; }

.fa-smoking::before {
  content: "\f48d"; }

.fa-snowflake::before {
  content: "\f2dc"; }

.fa-snowman::before {
  content: "\f7d0"; }

.fa-snowplow::before {
  content: "\f7d2"; }

.fa-soap::before {
  content: "\e06e"; }

.fa-socks::before {
  content: "\f696"; }

.fa-solar-panel::before {
  content: "\f5ba"; }

.fa-sort::before {
  content: "\f0dc"; }

.fa-unsorted::before {
  content: "\f0dc"; }

.fa-sort-down::before {
  content: "\f0dd"; }

.fa-sort-desc::before {
  content: "\f0dd"; }

.fa-sort-up::before {
  content: "\f0de"; }

.fa-sort-asc::before {
  content: "\f0de"; }

.fa-spa::before {
  content: "\f5bb"; }

.fa-spaghetti-monster-flying::before {
  content: "\f67b"; }

.fa-pastafarianism::before {
  content: "\f67b"; }

.fa-spell-check::before {
  content: "\f891"; }

.fa-spider::before {
  content: "\f717"; }

.fa-spinner::before {
  content: "\f110"; }

.fa-splotch::before {
  content: "\f5bc"; }

.fa-spoon::before {
  content: "\f2e5"; }

.fa-utensil-spoon::before {
  content: "\f2e5"; }

.fa-spray-can::before {
  content: "\f5bd"; }

.fa-spray-can-sparkles::before {
  content: "\f5d0"; }

.fa-air-freshener::before {
  content: "\f5d0"; }

.fa-square::before {
  content: "\f0c8"; }

.fa-square-arrow-up-right::before {
  content: "\f14c"; }

.fa-external-link-square::before {
  content: "\f14c"; }

.fa-square-caret-down::before {
  content: "\f150"; }

.fa-caret-square-down::before {
  content: "\f150"; }

.fa-square-caret-left::before {
  content: "\f191"; }

.fa-caret-square-left::before {
  content: "\f191"; }

.fa-square-caret-right::before {
  content: "\f152"; }

.fa-caret-square-right::before {
  content: "\f152"; }

.fa-square-caret-up::before {
  content: "\f151"; }

.fa-caret-square-up::before {
  content: "\f151"; }

.fa-square-check::before {
  content: "\f14a"; }

.fa-check-square::before {
  content: "\f14a"; }

.fa-square-envelope::before {
  content: "\f199"; }

.fa-envelope-square::before {
  content: "\f199"; }

.fa-square-full::before {
  content: "\f45c"; }

.fa-square-h::before {
  content: "\f0fd"; }

.fa-h-square::before {
  content: "\f0fd"; }

.fa-square-minus::before {
  content: "\f146"; }

.fa-minus-square::before {
  content: "\f146"; }

.fa-square-nfi::before {
  content: "\e576"; }

.fa-square-parking::before {
  content: "\f540"; }

.fa-parking::before {
  content: "\f540"; }

.fa-square-pen::before {
  content: "\f14b"; }

.fa-pen-square::before {
  content: "\f14b"; }

.fa-pencil-square::before {
  content: "\f14b"; }

.fa-square-person-confined::before {
  content: "\e577"; }

.fa-square-phone::before {
  content: "\f098"; }

.fa-phone-square::before {
  content: "\f098"; }

.fa-square-phone-flip::before {
  content: "\f87b"; }

.fa-phone-square-alt::before {
  content: "\f87b"; }

.fa-square-plus::before {
  content: "\f0fe"; }

.fa-plus-square::before {
  content: "\f0fe"; }

.fa-square-poll-horizontal::before {
  content: "\f682"; }

.fa-poll-h::before {
  content: "\f682"; }

.fa-square-poll-vertical::before {
  content: "\f681"; }

.fa-poll::before {
  content: "\f681"; }

.fa-square-root-variable::before {
  content: "\f698"; }

.fa-square-root-alt::before {
  content: "\f698"; }

.fa-square-rss::before {
  content: "\f143"; }

.fa-rss-square::before {
  content: "\f143"; }

.fa-square-share-nodes::before {
  content: "\f1e1"; }

.fa-share-alt-square::before {
  content: "\f1e1"; }

.fa-square-up-right::before {
  content: "\f360"; }

.fa-external-link-square-alt::before {
  content: "\f360"; }

.fa-square-virus::before {
  content: "\e578"; }

.fa-square-xmark::before {
  content: "\f2d3"; }

.fa-times-square::before {
  content: "\f2d3"; }

.fa-xmark-square::before {
  content: "\f2d3"; }

.fa-staff-aesculapius::before {
  content: "\e579"; }

.fa-rod-asclepius::before {
  content: "\e579"; }

.fa-rod-snake::before {
  content: "\e579"; }

.fa-staff-snake::before {
  content: "\e579"; }

.fa-stairs::before {
  content: "\e289"; }

.fa-stamp::before {
  content: "\f5bf"; }

.fa-star::before {
  content: "\f005"; }

.fa-star-and-crescent::before {
  content: "\f699"; }

.fa-star-half::before {
  content: "\f089"; }

.fa-star-half-stroke::before {
  content: "\f5c0"; }

.fa-star-half-alt::before {
  content: "\f5c0"; }

.fa-star-of-david::before {
  content: "\f69a"; }

.fa-star-of-life::before {
  content: "\f621"; }

.fa-sterling-sign::before {
  content: "\f154"; }

.fa-gbp::before {
  content: "\f154"; }

.fa-pound-sign::before {
  content: "\f154"; }

.fa-stethoscope::before {
  content: "\f0f1"; }

.fa-stop::before {
  content: "\f04d"; }

.fa-stopwatch::before {
  content: "\f2f2"; }

.fa-stopwatch-20::before {
  content: "\e06f"; }

.fa-store::before {
  content: "\f54e"; }

.fa-store-slash::before {
  content: "\e071"; }

.fa-street-view::before {
  content: "\f21d"; }

.fa-strikethrough::before {
  content: "\f0cc"; }

.fa-stroopwafel::before {
  content: "\f551"; }

.fa-subscript::before {
  content: "\f12c"; }

.fa-suitcase::before {
  content: "\f0f2"; }

.fa-suitcase-medical::before {
  content: "\f0fa"; }

.fa-medkit::before {
  content: "\f0fa"; }

.fa-suitcase-rolling::before {
  content: "\f5c1"; }

.fa-sun::before {
  content: "\f185"; }

.fa-sun-plant-wilt::before {
  content: "\e57a"; }

.fa-superscript::before {
  content: "\f12b"; }

.fa-swatchbook::before {
  content: "\f5c3"; }

.fa-synagogue::before {
  content: "\f69b"; }

.fa-syringe::before {
  content: "\f48e"; }

.fa-t::before {
  content: "\54"; }

.fa-table::before {
  content: "\f0ce"; }

.fa-table-cells::before {
  content: "\f00a"; }

.fa-th::before {
  content: "\f00a"; }

.fa-table-cells-large::before {
  content: "\f009"; }

.fa-th-large::before {
  content: "\f009"; }

.fa-table-columns::before {
  content: "\f0db"; }

.fa-columns::before {
  content: "\f0db"; }

.fa-table-list::before {
  content: "\f00b"; }

.fa-th-list::before {
  content: "\f00b"; }

.fa-table-tennis-paddle-ball::before {
  content: "\f45d"; }

.fa-ping-pong-paddle-ball::before {
  content: "\f45d"; }

.fa-table-tennis::before {
  content: "\f45d"; }

.fa-tablet::before {
  content: "\f3fb"; }

.fa-tablet-android::before {
  content: "\f3fb"; }

.fa-tablet-button::before {
  content: "\f10a"; }

.fa-tablet-screen-button::before {
  content: "\f3fa"; }

.fa-tablet-alt::before {
  content: "\f3fa"; }

.fa-tablets::before {
  content: "\f490"; }

.fa-tachograph-digital::before {
  content: "\f566"; }

.fa-digital-tachograph::before {
  content: "\f566"; }

.fa-tag::before {
  content: "\f02b"; }

.fa-tags::before {
  content: "\f02c"; }

.fa-tape::before {
  content: "\f4db"; }

.fa-tarp::before {
  content: "\e57b"; }

.fa-tarp-droplet::before {
  content: "\e57c"; }

.fa-taxi::before {
  content: "\f1ba"; }

.fa-cab::before {
  content: "\f1ba"; }

.fa-teeth::before {
  content: "\f62e"; }

.fa-teeth-open::before {
  content: "\f62f"; }

.fa-temperature-arrow-down::before {
  content: "\e03f"; }

.fa-temperature-down::before {
  content: "\e03f"; }

.fa-temperature-arrow-up::before {
  content: "\e040"; }

.fa-temperature-up::before {
  content: "\e040"; }

.fa-temperature-empty::before {
  content: "\f2cb"; }

.fa-temperature-0::before {
  content: "\f2cb"; }

.fa-thermometer-0::before {
  content: "\f2cb"; }

.fa-thermometer-empty::before {
  content: "\f2cb"; }

.fa-temperature-full::before {
  content: "\f2c7"; }

.fa-temperature-4::before {
  content: "\f2c7"; }

.fa-thermometer-4::before {
  content: "\f2c7"; }

.fa-thermometer-full::before {
  content: "\f2c7"; }

.fa-temperature-half::before {
  content: "\f2c9"; }

.fa-temperature-2::before {
  content: "\f2c9"; }

.fa-thermometer-2::before {
  content: "\f2c9"; }

.fa-thermometer-half::before {
  content: "\f2c9"; }

.fa-temperature-high::before {
  content: "\f769"; }

.fa-temperature-low::before {
  content: "\f76b"; }

.fa-temperature-quarter::before {
  content: "\f2ca"; }

.fa-temperature-1::before {
  content: "\f2ca"; }

.fa-thermometer-1::before {
  content: "\f2ca"; }

.fa-thermometer-quarter::before {
  content: "\f2ca"; }

.fa-temperature-three-quarters::before {
  content: "\f2c8"; }

.fa-temperature-3::before {
  content: "\f2c8"; }

.fa-thermometer-3::before {
  content: "\f2c8"; }

.fa-thermometer-three-quarters::before {
  content: "\f2c8"; }

.fa-tenge-sign::before {
  content: "\f7d7"; }

.fa-tenge::before {
  content: "\f7d7"; }

.fa-tent::before {
  content: "\e57d"; }

.fa-tent-arrow-down-to-line::before {
  content: "\e57e"; }

.fa-tent-arrow-left-right::before {
  content: "\e57f"; }

.fa-tent-arrow-turn-left::before {
  content: "\e580"; }

.fa-tent-arrows-down::before {
  content: "\e581"; }

.fa-tents::before {
  content: "\e582"; }

.fa-terminal::before {
  content: "\f120"; }

.fa-text-height::before {
  content: "\f034"; }

.fa-text-slash::before {
  content: "\f87d"; }

.fa-remove-format::before {
  content: "\f87d"; }

.fa-text-width::before {
  content: "\f035"; }

.fa-thermometer::before {
  content: "\f491"; }

.fa-thumbs-down::before {
  content: "\f165"; }

.fa-thumbs-up::before {
  content: "\f164"; }

.fa-thumbtack::before {
  content: "\f08d"; }

.fa-thumb-tack::before {
  content: "\f08d"; }

.fa-ticket::before {
  content: "\f145"; }

.fa-ticket-simple::before {
  content: "\f3ff"; }

.fa-ticket-alt::before {
  content: "\f3ff"; }

.fa-timeline::before {
  content: "\e29c"; }

.fa-toggle-off::before {
  content: "\f204"; }

.fa-toggle-on::before {
  content: "\f205"; }

.fa-toilet::before {
  content: "\f7d8"; }

.fa-toilet-paper::before {
  content: "\f71e"; }

.fa-toilet-paper-slash::before {
  content: "\e072"; }

.fa-toilet-portable::before {
  content: "\e583"; }

.fa-toilets-portable::before {
  content: "\e584"; }

.fa-toolbox::before {
  content: "\f552"; }

.fa-tooth::before {
  content: "\f5c9"; }

.fa-torii-gate::before {
  content: "\f6a1"; }

.fa-tornado::before {
  content: "\f76f"; }

.fa-tower-broadcast::before {
  content: "\f519"; }

.fa-broadcast-tower::before {
  content: "\f519"; }

.fa-tower-cell::before {
  content: "\e585"; }

.fa-tower-observation::before {
  content: "\e586"; }

.fa-tractor::before {
  content: "\f722"; }

.fa-trademark::before {
  content: "\f25c"; }

.fa-traffic-light::before {
  content: "\f637"; }

.fa-trailer::before {
  content: "\e041"; }

.fa-train::before {
  content: "\f238"; }

.fa-train-subway::before {
  content: "\f239"; }

.fa-subway::before {
  content: "\f239"; }

.fa-train-tram::before {
  content: "\f7da"; }

.fa-tram::before {
  content: "\f7da"; }

.fa-transgender::before {
  content: "\f225"; }

.fa-transgender-alt::before {
  content: "\f225"; }

.fa-trash::before {
  content: "\f1f8"; }

.fa-trash-arrow-up::before {
  content: "\f829"; }

.fa-trash-restore::before {
  content: "\f829"; }

.fa-trash-can::before {
  content: "\f2ed"; }

.fa-trash-alt::before {
  content: "\f2ed"; }

.fa-trash-can-arrow-up::before {
  content: "\f82a"; }

.fa-trash-restore-alt::before {
  content: "\f82a"; }

.fa-tree::before {
  content: "\f1bb"; }

.fa-tree-city::before {
  content: "\e587"; }

.fa-triangle-exclamation::before {
  content: "\f071"; }

.fa-exclamation-triangle::before {
  content: "\f071"; }

.fa-warning::before {
  content: "\f071"; }

.fa-trophy::before {
  content: "\f091"; }

.fa-trowel::before {
  content: "\e589"; }

.fa-trowel-bricks::before {
  content: "\e58a"; }

.fa-truck::before {
  content: "\f0d1"; }

.fa-truck-arrow-right::before {
  content: "\e58b"; }

.fa-truck-droplet::before {
  content: "\e58c"; }

.fa-truck-fast::before {
  content: "\f48b"; }

.fa-shipping-fast::before {
  content: "\f48b"; }

.fa-truck-field::before {
  content: "\e58d"; }

.fa-truck-field-un::before {
  content: "\e58e"; }

.fa-truck-front::before {
  content: "\e2b7"; }

.fa-truck-medical::before {
  content: "\f0f9"; }

.fa-ambulance::before {
  content: "\f0f9"; }

.fa-truck-monster::before {
  content: "\f63b"; }

.fa-truck-moving::before {
  content: "\f4df"; }

.fa-truck-pickup::before {
  content: "\f63c"; }

.fa-truck-plane::before {
  content: "\e58f"; }

.fa-truck-ramp-box::before {
  content: "\f4de"; }

.fa-truck-loading::before {
  content: "\f4de"; }

.fa-tty::before {
  content: "\f1e4"; }

.fa-teletype::before {
  content: "\f1e4"; }

.fa-turkish-lira-sign::before {
  content: "\e2bb"; }

.fa-try::before {
  content: "\e2bb"; }

.fa-turkish-lira::before {
  content: "\e2bb"; }

.fa-turn-down::before {
  content: "\f3be"; }

.fa-level-down-alt::before {
  content: "\f3be"; }

.fa-turn-up::before {
  content: "\f3bf"; }

.fa-level-up-alt::before {
  content: "\f3bf"; }

.fa-tv::before {
  content: "\f26c"; }

.fa-television::before {
  content: "\f26c"; }

.fa-tv-alt::before {
  content: "\f26c"; }

.fa-u::before {
  content: "\55"; }

.fa-umbrella::before {
  content: "\f0e9"; }

.fa-umbrella-beach::before {
  content: "\f5ca"; }

.fa-underline::before {
  content: "\f0cd"; }

.fa-universal-access::before {
  content: "\f29a"; }

.fa-unlock::before {
  content: "\f09c"; }

.fa-unlock-keyhole::before {
  content: "\f13e"; }

.fa-unlock-alt::before {
  content: "\f13e"; }

.fa-up-down::before {
  content: "\f338"; }

.fa-arrows-alt-v::before {
  content: "\f338"; }

.fa-up-down-left-right::before {
  content: "\f0b2"; }

.fa-arrows-alt::before {
  content: "\f0b2"; }

.fa-up-long::before {
  content: "\f30c"; }

.fa-long-arrow-alt-up::before {
  content: "\f30c"; }

.fa-up-right-and-down-left-from-center::before {
  content: "\f424"; }

.fa-expand-alt::before {
  content: "\f424"; }

.fa-up-right-from-square::before {
  content: "\f35d"; }

.fa-external-link-alt::before {
  content: "\f35d"; }

.fa-upload::before {
  content: "\f093"; }

.fa-user::before {
  content: "\f007"; }

.fa-user-astronaut::before {
  content: "\f4fb"; }

.fa-user-check::before {
  content: "\f4fc"; }

.fa-user-clock::before {
  content: "\f4fd"; }

.fa-user-doctor::before {
  content: "\f0f0"; }

.fa-user-md::before {
  content: "\f0f0"; }

.fa-user-gear::before {
  content: "\f4fe"; }

.fa-user-cog::before {
  content: "\f4fe"; }

.fa-user-graduate::before {
  content: "\f501"; }

.fa-user-group::before {
  content: "\f500"; }

.fa-user-friends::before {
  content: "\f500"; }

.fa-user-injured::before {
  content: "\f728"; }

.fa-user-large::before {
  content: "\f406"; }

.fa-user-alt::before {
  content: "\f406"; }

.fa-user-large-slash::before {
  content: "\f4fa"; }

.fa-user-alt-slash::before {
  content: "\f4fa"; }

.fa-user-lock::before {
  content: "\f502"; }

.fa-user-minus::before {
  content: "\f503"; }

.fa-user-ninja::before {
  content: "\f504"; }

.fa-user-nurse::before {
  content: "\f82f"; }

.fa-user-pen::before {
  content: "\f4ff"; }

.fa-user-edit::before {
  content: "\f4ff"; }

.fa-user-plus::before {
  content: "\f234"; }

.fa-user-secret::before {
  content: "\f21b"; }

.fa-user-shield::before {
  content: "\f505"; }

.fa-user-slash::before {
  content: "\f506"; }

.fa-user-tag::before {
  content: "\f507"; }

.fa-user-tie::before {
  content: "\f508"; }

.fa-user-xmark::before {
  content: "\f235"; }

.fa-user-times::before {
  content: "\f235"; }

.fa-users::before {
  content: "\f0c0"; }

.fa-users-between-lines::before {
  content: "\e591"; }

.fa-users-gear::before {
  content: "\f509"; }

.fa-users-cog::before {
  content: "\f509"; }

.fa-users-line::before {
  content: "\e592"; }

.fa-users-rays::before {
  content: "\e593"; }

.fa-users-rectangle::before {
  content: "\e594"; }

.fa-users-slash::before {
  content: "\e073"; }

.fa-users-viewfinder::before {
  content: "\e595"; }

.fa-utensils::before {
  content: "\f2e7"; }

.fa-cutlery::before {
  content: "\f2e7"; }

.fa-v::before {
  content: "\56"; }

.fa-van-shuttle::before {
  content: "\f5b6"; }

.fa-shuttle-van::before {
  content: "\f5b6"; }

.fa-vault::before {
  content: "\e2c5"; }

.fa-vector-square::before {
  content: "\f5cb"; }

.fa-venus::before {
  content: "\f221"; }

.fa-venus-double::before {
  content: "\f226"; }

.fa-venus-mars::before {
  content: "\f228"; }

.fa-vest::before {
  content: "\e085"; }

.fa-vest-patches::before {
  content: "\e086"; }

.fa-vial::before {
  content: "\f492"; }

.fa-vial-circle-check::before {
  content: "\e596"; }

.fa-vial-virus::before {
  content: "\e597"; }

.fa-vials::before {
  content: "\f493"; }

.fa-video::before {
  content: "\f03d"; }

.fa-video-camera::before {
  content: "\f03d"; }

.fa-video-slash::before {
  content: "\f4e2"; }

.fa-vihara::before {
  content: "\f6a7"; }

.fa-virus::before {
  content: "\e074"; }

.fa-virus-covid::before {
  content: "\e4a8"; }

.fa-virus-covid-slash::before {
  content: "\e4a9"; }

.fa-virus-slash::before {
  content: "\e075"; }

.fa-viruses::before {
  content: "\e076"; }

.fa-voicemail::before {
  content: "\f897"; }

.fa-volcano::before {
  content: "\f770"; }

.fa-volleyball::before {
  content: "\f45f"; }

.fa-volleyball-ball::before {
  content: "\f45f"; }

.fa-volume-high::before {
  content: "\f028"; }

.fa-volume-up::before {
  content: "\f028"; }

.fa-volume-low::before {
  content: "\f027"; }

.fa-volume-down::before {
  content: "\f027"; }

.fa-volume-off::before {
  content: "\f026"; }

.fa-volume-xmark::before {
  content: "\f6a9"; }

.fa-volume-mute::before {
  content: "\f6a9"; }

.fa-volume-times::before {
  content: "\f6a9"; }

.fa-vr-cardboard::before {
  content: "\f729"; }

.fa-w::before {
  content: "\57"; }

.fa-walkie-talkie::before {
  content: "\f8ef"; }

.fa-wallet::before {
  content: "\f555"; }

.fa-wand-magic::before {
  content: "\f0d0"; }

.fa-magic::before {
  content: "\f0d0"; }

.fa-wand-magic-sparkles::before {
  content: "\e2ca"; }

.fa-magic-wand-sparkles::before {
  content: "\e2ca"; }

.fa-wand-sparkles::before {
  content: "\f72b"; }

.fa-warehouse::before {
  content: "\f494"; }

.fa-water::before {
  content: "\f773"; }

.fa-water-ladder::before {
  content: "\f5c5"; }

.fa-ladder-water::before {
  content: "\f5c5"; }

.fa-swimming-pool::before {
  content: "\f5c5"; }

.fa-wave-square::before {
  content: "\f83e"; }

.fa-weight-hanging::before {
  content: "\f5cd"; }

.fa-weight-scale::before {
  content: "\f496"; }

.fa-weight::before {
  content: "\f496"; }

.fa-wheat-awn::before {
  content: "\e2cd"; }

.fa-wheat-alt::before {
  content: "\e2cd"; }

.fa-wheat-awn-circle-exclamation::before {
  content: "\e598"; }

.fa-wheelchair::before {
  content: "\f193"; }

.fa-wheelchair-move::before {
  content: "\e2ce"; }

.fa-wheelchair-alt::before {
  content: "\e2ce"; }

.fa-whiskey-glass::before {
  content: "\f7a0"; }

.fa-glass-whiskey::before {
  content: "\f7a0"; }

.fa-wifi::before {
  content: "\f1eb"; }

.fa-wifi-3::before {
  content: "\f1eb"; }

.fa-wifi-strong::before {
  content: "\f1eb"; }

.fa-wind::before {
  content: "\f72e"; }

.fa-window-maximize::before {
  content: "\f2d0"; }

.fa-window-minimize::before {
  content: "\f2d1"; }

.fa-window-restore::before {
  content: "\f2d2"; }

.fa-wine-bottle::before {
  content: "\f72f"; }

.fa-wine-glass::before {
  content: "\f4e3"; }

.fa-wine-glass-empty::before {
  content: "\f5ce"; }

.fa-wine-glass-alt::before {
  content: "\f5ce"; }

.fa-won-sign::before {
  content: "\f159"; }

.fa-krw::before {
  content: "\f159"; }

.fa-won::before {
  content: "\f159"; }

.fa-worm::before {
  content: "\e599"; }

.fa-wrench::before {
  content: "\f0ad"; }

.fa-x::before {
  content: "\58"; }

.fa-x-ray::before {
  content: "\f497"; }

.fa-xmark::before {
  content: "\f00d"; }

.fa-close::before {
  content: "\f00d"; }

.fa-multiply::before {
  content: "\f00d"; }

.fa-remove::before {
  content: "\f00d"; }

.fa-times::before {
  content: "\f00d"; }

.fa-xmarks-lines::before {
  content: "\e59a"; }

.fa-y::before {
  content: "\59"; }

.fa-yen-sign::before {
  content: "\f157"; }

.fa-cny::before {
  content: "\f157"; }

.fa-jpy::before {
  content: "\f157"; }

.fa-rmb::before {
  content: "\f157"; }

.fa-yen::before {
  content: "\f157"; }

.fa-yin-yang::before {
  content: "\f6ad"; }

.fa-z::before {
  content: "\5a"; }

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }
:root, :host {
  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"; }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-brands-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-brands-400.ttf") format("truetype"); }

.fab,
.fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400; }

.fa-42-group:before {
  content: "\e080"; }

.fa-innosoft:before {
  content: "\e080"; }

.fa-500px:before {
  content: "\f26e"; }

.fa-accessible-icon:before {
  content: "\f368"; }

.fa-accusoft:before {
  content: "\f369"; }

.fa-adn:before {
  content: "\f170"; }

.fa-adversal:before {
  content: "\f36a"; }

.fa-affiliatetheme:before {
  content: "\f36b"; }

.fa-airbnb:before {
  content: "\f834"; }

.fa-algolia:before {
  content: "\f36c"; }

.fa-alipay:before {
  content: "\f642"; }

.fa-amazon:before {
  content: "\f270"; }

.fa-amazon-pay:before {
  content: "\f42c"; }

.fa-amilia:before {
  content: "\f36d"; }

.fa-android:before {
  content: "\f17b"; }

.fa-angellist:before {
  content: "\f209"; }

.fa-angrycreative:before {
  content: "\f36e"; }

.fa-angular:before {
  content: "\f420"; }

.fa-app-store:before {
  content: "\f36f"; }

.fa-app-store-ios:before {
  content: "\f370"; }

.fa-apper:before {
  content: "\f371"; }

.fa-apple:before {
  content: "\f179"; }

.fa-apple-pay:before {
  content: "\f415"; }

.fa-artstation:before {
  content: "\f77a"; }

.fa-asymmetrik:before {
  content: "\f372"; }

.fa-atlassian:before {
  content: "\f77b"; }

.fa-audible:before {
  content: "\f373"; }

.fa-autoprefixer:before {
  content: "\f41c"; }

.fa-avianex:before {
  content: "\f374"; }

.fa-aviato:before {
  content: "\f421"; }

.fa-aws:before {
  content: "\f375"; }

.fa-bandcamp:before {
  content: "\f2d5"; }

.fa-battle-net:before {
  content: "\f835"; }

.fa-behance:before {
  content: "\f1b4"; }

.fa-behance-square:before {
  content: "\f1b5"; }

.fa-bilibili:before {
  content: "\e3d9"; }

.fa-bimobject:before {
  content: "\f378"; }

.fa-bitbucket:before {
  content: "\f171"; }

.fa-bitcoin:before {
  content: "\f379"; }

.fa-bity:before {
  content: "\f37a"; }

.fa-black-tie:before {
  content: "\f27e"; }

.fa-blackberry:before {
  content: "\f37b"; }

.fa-blogger:before {
  content: "\f37c"; }

.fa-blogger-b:before {
  content: "\f37d"; }

.fa-bluetooth:before {
  content: "\f293"; }

.fa-bluetooth-b:before {
  content: "\f294"; }

.fa-bootstrap:before {
  content: "\f836"; }

.fa-bots:before {
  content: "\e340"; }

.fa-btc:before {
  content: "\f15a"; }

.fa-buffer:before {
  content: "\f837"; }

.fa-buromobelexperte:before {
  content: "\f37f"; }

.fa-buy-n-large:before {
  content: "\f8a6"; }

.fa-buysellads:before {
  content: "\f20d"; }

.fa-canadian-maple-leaf:before {
  content: "\f785"; }

.fa-cc-amazon-pay:before {
  content: "\f42d"; }

.fa-cc-amex:before {
  content: "\f1f3"; }

.fa-cc-apple-pay:before {
  content: "\f416"; }

.fa-cc-diners-club:before {
  content: "\f24c"; }

.fa-cc-discover:before {
  content: "\f1f2"; }

.fa-cc-jcb:before {
  content: "\f24b"; }

.fa-cc-mastercard:before {
  content: "\f1f1"; }

.fa-cc-paypal:before {
  content: "\f1f4"; }

.fa-cc-stripe:before {
  content: "\f1f5"; }

.fa-cc-visa:before {
  content: "\f1f0"; }

.fa-centercode:before {
  content: "\f380"; }

.fa-centos:before {
  content: "\f789"; }

.fa-chrome:before {
  content: "\f268"; }

.fa-chromecast:before {
  content: "\f838"; }

.fa-cloudflare:before {
  content: "\e07d"; }

.fa-cloudscale:before {
  content: "\f383"; }

.fa-cloudsmith:before {
  content: "\f384"; }

.fa-cloudversify:before {
  content: "\f385"; }

.fa-cmplid:before {
  content: "\e360"; }

.fa-codepen:before {
  content: "\f1cb"; }

.fa-codiepie:before {
  content: "\f284"; }

.fa-confluence:before {
  content: "\f78d"; }

.fa-connectdevelop:before {
  content: "\f20e"; }

.fa-contao:before {
  content: "\f26d"; }

.fa-cotton-bureau:before {
  content: "\f89e"; }

.fa-cpanel:before {
  content: "\f388"; }

.fa-creative-commons:before {
  content: "\f25e"; }

.fa-creative-commons-by:before {
  content: "\f4e7"; }

.fa-creative-commons-nc:before {
  content: "\f4e8"; }

.fa-creative-commons-nc-eu:before {
  content: "\f4e9"; }

.fa-creative-commons-nc-jp:before {
  content: "\f4ea"; }

.fa-creative-commons-nd:before {
  content: "\f4eb"; }

.fa-creative-commons-pd:before {
  content: "\f4ec"; }

.fa-creative-commons-pd-alt:before {
  content: "\f4ed"; }

.fa-creative-commons-remix:before {
  content: "\f4ee"; }

.fa-creative-commons-sa:before {
  content: "\f4ef"; }

.fa-creative-commons-sampling:before {
  content: "\f4f0"; }

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1"; }

.fa-creative-commons-share:before {
  content: "\f4f2"; }

.fa-creative-commons-zero:before {
  content: "\f4f3"; }

.fa-critical-role:before {
  content: "\f6c9"; }

.fa-css3:before {
  content: "\f13c"; }

.fa-css3-alt:before {
  content: "\f38b"; }

.fa-cuttlefish:before {
  content: "\f38c"; }

.fa-d-and-d:before {
  content: "\f38d"; }

.fa-d-and-d-beyond:before {
  content: "\f6ca"; }

.fa-dailymotion:before {
  content: "\e052"; }

.fa-dashcube:before {
  content: "\f210"; }

.fa-deezer:before {
  content: "\e077"; }

.fa-delicious:before {
  content: "\f1a5"; }

.fa-deploydog:before {
  content: "\f38e"; }

.fa-deskpro:before {
  content: "\f38f"; }

.fa-dev:before {
  content: "\f6cc"; }

.fa-deviantart:before {
  content: "\f1bd"; }

.fa-dhl:before {
  content: "\f790"; }

.fa-diaspora:before {
  content: "\f791"; }

.fa-digg:before {
  content: "\f1a6"; }

.fa-digital-ocean:before {
  content: "\f391"; }

.fa-discord:before {
  content: "\f392"; }

.fa-discourse:before {
  content: "\f393"; }

.fa-dochub:before {
  content: "\f394"; }

.fa-docker:before {
  content: "\f395"; }

.fa-draft2digital:before {
  content: "\f396"; }

.fa-dribbble:before {
  content: "\f17d"; }

.fa-dribbble-square:before {
  content: "\f397"; }

.fa-dropbox:before {
  content: "\f16b"; }

.fa-drupal:before {
  content: "\f1a9"; }

.fa-dyalog:before {
  content: "\f399"; }

.fa-earlybirds:before {
  content: "\f39a"; }

.fa-ebay:before {
  content: "\f4f4"; }

.fa-edge:before {
  content: "\f282"; }

.fa-edge-legacy:before {
  content: "\e078"; }

.fa-elementor:before {
  content: "\f430"; }

.fa-ello:before {
  content: "\f5f1"; }

.fa-ember:before {
  content: "\f423"; }

.fa-empire:before {
  content: "\f1d1"; }

.fa-envira:before {
  content: "\f299"; }

.fa-erlang:before {
  content: "\f39d"; }

.fa-ethereum:before {
  content: "\f42e"; }

.fa-etsy:before {
  content: "\f2d7"; }

.fa-evernote:before {
  content: "\f839"; }

.fa-expeditedssl:before {
  content: "\f23e"; }

.fa-facebook:before {
  content: "\f09a"; }

.fa-facebook-f:before {
  content: "\f39e"; }

.fa-facebook-messenger:before {
  content: "\f39f"; }

.fa-facebook-square:before {
  content: "\f082"; }

.fa-fantasy-flight-games:before {
  content: "\f6dc"; }

.fa-fedex:before {
  content: "\f797"; }

.fa-fedora:before {
  content: "\f798"; }

.fa-figma:before {
  content: "\f799"; }

.fa-firefox:before {
  content: "\f269"; }

.fa-firefox-browser:before {
  content: "\e007"; }

.fa-first-order:before {
  content: "\f2b0"; }

.fa-first-order-alt:before {
  content: "\f50a"; }

.fa-firstdraft:before {
  content: "\f3a1"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.fa-fly:before {
  content: "\f417"; }

.fa-font-awesome:before {
  content: "\f2b4"; }

.fa-font-awesome-flag:before {
  content: "\f2b4"; }

.fa-font-awesome-logo-full:before {
  content: "\f2b4"; }

.fa-fonticons:before {
  content: "\f280"; }

.fa-fonticons-fi:before {
  content: "\f3a2"; }

.fa-fort-awesome:before {
  content: "\f286"; }

.fa-fort-awesome-alt:before {
  content: "\f3a3"; }

.fa-forumbee:before {
  content: "\f211"; }

.fa-foursquare:before {
  content: "\f180"; }

.fa-free-code-camp:before {
  content: "\f2c5"; }

.fa-freebsd:before {
  content: "\f3a4"; }

.fa-fulcrum:before {
  content: "\f50b"; }

.fa-galactic-republic:before {
  content: "\f50c"; }

.fa-galactic-senate:before {
  content: "\f50d"; }

.fa-get-pocket:before {
  content: "\f265"; }

.fa-gg:before {
  content: "\f260"; }

.fa-gg-circle:before {
  content: "\f261"; }

.fa-git:before {
  content: "\f1d3"; }

.fa-git-alt:before {
  content: "\f841"; }

.fa-git-square:before {
  content: "\f1d2"; }

.fa-github:before {
  content: "\f09b"; }

.fa-github-alt:before {
  content: "\f113"; }

.fa-github-square:before {
  content: "\f092"; }

.fa-gitkraken:before {
  content: "\f3a6"; }

.fa-gitlab:before {
  content: "\f296"; }

.fa-gitter:before {
  content: "\f426"; }

.fa-glide:before {
  content: "\f2a5"; }

.fa-glide-g:before {
  content: "\f2a6"; }

.fa-gofore:before {
  content: "\f3a7"; }

.fa-golang:before {
  content: "\e40f"; }

.fa-goodreads:before {
  content: "\f3a8"; }

.fa-goodreads-g:before {
  content: "\f3a9"; }

.fa-google:before {
  content: "\f1a0"; }

.fa-google-drive:before {
  content: "\f3aa"; }

.fa-google-pay:before {
  content: "\e079"; }

.fa-google-play:before {
  content: "\f3ab"; }

.fa-google-plus:before {
  content: "\f2b3"; }

.fa-google-plus-g:before {
  content: "\f0d5"; }

.fa-google-plus-square:before {
  content: "\f0d4"; }

.fa-google-wallet:before {
  content: "\f1ee"; }

.fa-gratipay:before {
  content: "\f184"; }

.fa-grav:before {
  content: "\f2d6"; }

.fa-gripfire:before {
  content: "\f3ac"; }

.fa-grunt:before {
  content: "\f3ad"; }

.fa-guilded:before {
  content: "\e07e"; }

.fa-gulp:before {
  content: "\f3ae"; }

.fa-hacker-news:before {
  content: "\f1d4"; }

.fa-hacker-news-square:before {
  content: "\f3af"; }

.fa-hackerrank:before {
  content: "\f5f7"; }

.fa-hashnode:before {
  content: "\e499"; }

.fa-hips:before {
  content: "\f452"; }

.fa-hire-a-helper:before {
  content: "\f3b0"; }

.fa-hive:before {
  content: "\e07f"; }

.fa-hooli:before {
  content: "\f427"; }

.fa-hornbill:before {
  content: "\f592"; }

.fa-hotjar:before {
  content: "\f3b1"; }

.fa-houzz:before {
  content: "\f27c"; }

.fa-html5:before {
  content: "\f13b"; }

.fa-hubspot:before {
  content: "\f3b2"; }

.fa-ideal:before {
  content: "\e013"; }

.fa-imdb:before {
  content: "\f2d8"; }

.fa-instagram:before {
  content: "\f16d"; }

.fa-instagram-square:before {
  content: "\e055"; }

.fa-instalod:before {
  content: "\e081"; }

.fa-intercom:before {
  content: "\f7af"; }

.fa-internet-explorer:before {
  content: "\f26b"; }

.fa-invision:before {
  content: "\f7b0"; }

.fa-ioxhost:before {
  content: "\f208"; }

.fa-itch-io:before {
  content: "\f83a"; }

.fa-itunes:before {
  content: "\f3b4"; }

.fa-itunes-note:before {
  content: "\f3b5"; }

.fa-java:before {
  content: "\f4e4"; }

.fa-jedi-order:before {
  content: "\f50e"; }

.fa-jenkins:before {
  content: "\f3b6"; }

.fa-jira:before {
  content: "\f7b1"; }

.fa-joget:before {
  content: "\f3b7"; }

.fa-joomla:before {
  content: "\f1aa"; }

.fa-js:before {
  content: "\f3b8"; }

.fa-js-square:before {
  content: "\f3b9"; }

.fa-jsfiddle:before {
  content: "\f1cc"; }

.fa-kaggle:before {
  content: "\f5fa"; }

.fa-keybase:before {
  content: "\f4f5"; }

.fa-keycdn:before {
  content: "\f3ba"; }

.fa-kickstarter:before {
  content: "\f3bb"; }

.fa-kickstarter-k:before {
  content: "\f3bc"; }

.fa-korvue:before {
  content: "\f42f"; }

.fa-laravel:before {
  content: "\f3bd"; }

.fa-lastfm:before {
  content: "\f202"; }

.fa-lastfm-square:before {
  content: "\f203"; }

.fa-leanpub:before {
  content: "\f212"; }

.fa-less:before {
  content: "\f41d"; }

.fa-line:before {
  content: "\f3c0"; }

.fa-linkedin:before {
  content: "\f08c"; }

.fa-linkedin-in:before {
  content: "\f0e1"; }

.fa-linode:before {
  content: "\f2b8"; }

.fa-linux:before {
  content: "\f17c"; }

.fa-lyft:before {
  content: "\f3c3"; }

.fa-magento:before {
  content: "\f3c4"; }

.fa-mailchimp:before {
  content: "\f59e"; }

.fa-mandalorian:before {
  content: "\f50f"; }

.fa-markdown:before {
  content: "\f60f"; }

.fa-mastodon:before {
  content: "\f4f6"; }

.fa-maxcdn:before {
  content: "\f136"; }

.fa-mdb:before {
  content: "\f8ca"; }

.fa-medapps:before {
  content: "\f3c6"; }

.fa-medium:before {
  content: "\f23a"; }

.fa-medium-m:before {
  content: "\f23a"; }

.fa-medrt:before {
  content: "\f3c8"; }

.fa-meetup:before {
  content: "\f2e0"; }

.fa-megaport:before {
  content: "\f5a3"; }

.fa-mendeley:before {
  content: "\f7b3"; }

.fa-microblog:before {
  content: "\e01a"; }

.fa-microsoft:before {
  content: "\f3ca"; }

.fa-mix:before {
  content: "\f3cb"; }

.fa-mixcloud:before {
  content: "\f289"; }

.fa-mixer:before {
  content: "\e056"; }

.fa-mizuni:before {
  content: "\f3cc"; }

.fa-modx:before {
  content: "\f285"; }

.fa-monero:before {
  content: "\f3d0"; }

.fa-napster:before {
  content: "\f3d2"; }

.fa-neos:before {
  content: "\f612"; }

.fa-nfc-directional:before {
  content: "\e530"; }

.fa-nfc-symbol:before {
  content: "\e531"; }

.fa-nimblr:before {
  content: "\f5a8"; }

.fa-node:before {
  content: "\f419"; }

.fa-node-js:before {
  content: "\f3d3"; }

.fa-npm:before {
  content: "\f3d4"; }

.fa-ns8:before {
  content: "\f3d5"; }

.fa-nutritionix:before {
  content: "\f3d6"; }

.fa-octopus-deploy:before {
  content: "\e082"; }

.fa-odnoklassniki:before {
  content: "\f263"; }

.fa-odnoklassniki-square:before {
  content: "\f264"; }

.fa-old-republic:before {
  content: "\f510"; }

.fa-opencart:before {
  content: "\f23d"; }

.fa-openid:before {
  content: "\f19b"; }

.fa-opera:before {
  content: "\f26a"; }

.fa-optin-monster:before {
  content: "\f23c"; }

.fa-orcid:before {
  content: "\f8d2"; }

.fa-osi:before {
  content: "\f41a"; }

.fa-padlet:before {
  content: "\e4a0"; }

.fa-page4:before {
  content: "\f3d7"; }

.fa-pagelines:before {
  content: "\f18c"; }

.fa-palfed:before {
  content: "\f3d8"; }

.fa-patreon:before {
  content: "\f3d9"; }

.fa-paypal:before {
  content: "\f1ed"; }

.fa-perbyte:before {
  content: "\e083"; }

.fa-periscope:before {
  content: "\f3da"; }

.fa-phabricator:before {
  content: "\f3db"; }

.fa-phoenix-framework:before {
  content: "\f3dc"; }

.fa-phoenix-squadron:before {
  content: "\f511"; }

.fa-php:before {
  content: "\f457"; }

.fa-pied-piper:before {
  content: "\f2ae"; }

.fa-pied-piper-alt:before {
  content: "\f1a8"; }

.fa-pied-piper-hat:before {
  content: "\f4e5"; }

.fa-pied-piper-pp:before {
  content: "\f1a7"; }

.fa-pied-piper-square:before {
  content: "\e01e"; }

.fa-pinterest:before {
  content: "\f0d2"; }

.fa-pinterest-p:before {
  content: "\f231"; }

.fa-pinterest-square:before {
  content: "\f0d3"; }

.fa-pix:before {
  content: "\e43a"; }

.fa-playstation:before {
  content: "\f3df"; }

.fa-product-hunt:before {
  content: "\f288"; }

.fa-pushed:before {
  content: "\f3e1"; }

.fa-python:before {
  content: "\f3e2"; }

.fa-qq:before {
  content: "\f1d6"; }

.fa-quinscape:before {
  content: "\f459"; }

.fa-quora:before {
  content: "\f2c4"; }

.fa-r-project:before {
  content: "\f4f7"; }

.fa-raspberry-pi:before {
  content: "\f7bb"; }

.fa-ravelry:before {
  content: "\f2d9"; }

.fa-react:before {
  content: "\f41b"; }

.fa-reacteurope:before {
  content: "\f75d"; }

.fa-readme:before {
  content: "\f4d5"; }

.fa-rebel:before {
  content: "\f1d0"; }

.fa-red-river:before {
  content: "\f3e3"; }

.fa-reddit:before {
  content: "\f1a1"; }

.fa-reddit-alien:before {
  content: "\f281"; }

.fa-reddit-square:before {
  content: "\f1a2"; }

.fa-redhat:before {
  content: "\f7bc"; }

.fa-renren:before {
  content: "\f18b"; }

.fa-replyd:before {
  content: "\f3e6"; }

.fa-researchgate:before {
  content: "\f4f8"; }

.fa-resolving:before {
  content: "\f3e7"; }

.fa-rev:before {
  content: "\f5b2"; }

.fa-rocketchat:before {
  content: "\f3e8"; }

.fa-rockrms:before {
  content: "\f3e9"; }

.fa-rust:before {
  content: "\e07a"; }

.fa-safari:before {
  content: "\f267"; }

.fa-salesforce:before {
  content: "\f83b"; }

.fa-sass:before {
  content: "\f41e"; }

.fa-schlix:before {
  content: "\f3ea"; }

.fa-screenpal:before {
  content: "\e570"; }

.fa-scribd:before {
  content: "\f28a"; }

.fa-searchengin:before {
  content: "\f3eb"; }

.fa-sellcast:before {
  content: "\f2da"; }

.fa-sellsy:before {
  content: "\f213"; }

.fa-servicestack:before {
  content: "\f3ec"; }

.fa-shirtsinbulk:before {
  content: "\f214"; }

.fa-shopify:before {
  content: "\e057"; }

.fa-shopware:before {
  content: "\f5b5"; }

.fa-simplybuilt:before {
  content: "\f215"; }

.fa-sistrix:before {
  content: "\f3ee"; }

.fa-sith:before {
  content: "\f512"; }

.fa-sitrox:before {
  content: "\e44a"; }

.fa-sketch:before {
  content: "\f7c6"; }

.fa-skyatlas:before {
  content: "\f216"; }

.fa-skype:before {
  content: "\f17e"; }

.fa-slack:before {
  content: "\f198"; }

.fa-slack-hash:before {
  content: "\f198"; }

.fa-slideshare:before {
  content: "\f1e7"; }

.fa-snapchat:before {
  content: "\f2ab"; }

.fa-snapchat-ghost:before {
  content: "\f2ab"; }

.fa-snapchat-square:before {
  content: "\f2ad"; }

.fa-soundcloud:before {
  content: "\f1be"; }

.fa-sourcetree:before {
  content: "\f7d3"; }

.fa-speakap:before {
  content: "\f3f3"; }

.fa-speaker-deck:before {
  content: "\f83c"; }

.fa-spotify:before {
  content: "\f1bc"; }

.fa-square-font-awesome:before {
  content: "\f425"; }

.fa-square-font-awesome-stroke:before {
  content: "\f35c"; }

.fa-font-awesome-alt:before {
  content: "\f35c"; }

.fa-squarespace:before {
  content: "\f5be"; }

.fa-stack-exchange:before {
  content: "\f18d"; }

.fa-stack-overflow:before {
  content: "\f16c"; }

.fa-stackpath:before {
  content: "\f842"; }

.fa-staylinked:before {
  content: "\f3f5"; }

.fa-steam:before {
  content: "\f1b6"; }

.fa-steam-square:before {
  content: "\f1b7"; }

.fa-steam-symbol:before {
  content: "\f3f6"; }

.fa-sticker-mule:before {
  content: "\f3f7"; }

.fa-strava:before {
  content: "\f428"; }

.fa-stripe:before {
  content: "\f429"; }

.fa-stripe-s:before {
  content: "\f42a"; }

.fa-studiovinari:before {
  content: "\f3f8"; }

.fa-stumbleupon:before {
  content: "\f1a4"; }

.fa-stumbleupon-circle:before {
  content: "\f1a3"; }

.fa-superpowers:before {
  content: "\f2dd"; }

.fa-supple:before {
  content: "\f3f9"; }

.fa-suse:before {
  content: "\f7d6"; }

.fa-swift:before {
  content: "\f8e1"; }

.fa-symfony:before {
  content: "\f83d"; }

.fa-teamspeak:before {
  content: "\f4f9"; }

.fa-telegram:before {
  content: "\f2c6"; }

.fa-telegram-plane:before {
  content: "\f2c6"; }

.fa-tencent-weibo:before {
  content: "\f1d5"; }

.fa-the-red-yeti:before {
  content: "\f69d"; }

.fa-themeco:before {
  content: "\f5c6"; }

.fa-themeisle:before {
  content: "\f2b2"; }

.fa-think-peaks:before {
  content: "\f731"; }

.fa-tiktok:before {
  content: "\e07b"; }

.fa-trade-federation:before {
  content: "\f513"; }

.fa-trello:before {
  content: "\f181"; }

.fa-tumblr:before {
  content: "\f173"; }

.fa-tumblr-square:before {
  content: "\f174"; }

.fa-twitch:before {
  content: "\f1e8"; }

.fa-twitter:before {
  content: "\f099"; }

.fa-twitter-square:before {
  content: "\f081"; }

.fa-typo3:before {
  content: "\f42b"; }

.fa-uber:before {
  content: "\f402"; }

.fa-ubuntu:before {
  content: "\f7df"; }

.fa-uikit:before {
  content: "\f403"; }

.fa-umbraco:before {
  content: "\f8e8"; }

.fa-uncharted:before {
  content: "\e084"; }

.fa-uniregistry:before {
  content: "\f404"; }

.fa-unity:before {
  content: "\e049"; }

.fa-unsplash:before {
  content: "\e07c"; }

.fa-untappd:before {
  content: "\f405"; }

.fa-ups:before {
  content: "\f7e0"; }

.fa-usb:before {
  content: "\f287"; }

.fa-usps:before {
  content: "\f7e1"; }

.fa-ussunnah:before {
  content: "\f407"; }

.fa-vaadin:before {
  content: "\f408"; }

.fa-viacoin:before {
  content: "\f237"; }

.fa-viadeo:before {
  content: "\f2a9"; }

.fa-viadeo-square:before {
  content: "\f2aa"; }

.fa-viber:before {
  content: "\f409"; }

.fa-vimeo:before {
  content: "\f40a"; }

.fa-vimeo-square:before {
  content: "\f194"; }

.fa-vimeo-v:before {
  content: "\f27d"; }

.fa-vine:before {
  content: "\f1ca"; }

.fa-vk:before {
  content: "\f189"; }

.fa-vnv:before {
  content: "\f40b"; }

.fa-vuejs:before {
  content: "\f41f"; }

.fa-watchman-monitoring:before {
  content: "\e087"; }

.fa-waze:before {
  content: "\f83f"; }

.fa-weebly:before {
  content: "\f5cc"; }

.fa-weibo:before {
  content: "\f18a"; }

.fa-weixin:before {
  content: "\f1d7"; }

.fa-whatsapp:before {
  content: "\f232"; }

.fa-whatsapp-square:before {
  content: "\f40c"; }

.fa-whmcs:before {
  content: "\f40d"; }

.fa-wikipedia-w:before {
  content: "\f266"; }

.fa-windows:before {
  content: "\f17a"; }

.fa-wirsindhandwerk:before {
  content: "\e2d0"; }

.fa-wsh:before {
  content: "\e2d0"; }

.fa-wix:before {
  content: "\f5cf"; }

.fa-wizards-of-the-coast:before {
  content: "\f730"; }

.fa-wodu:before {
  content: "\e088"; }

.fa-wolf-pack-battalion:before {
  content: "\f514"; }

.fa-wordpress:before {
  content: "\f19a"; }

.fa-wordpress-simple:before {
  content: "\f411"; }

.fa-wpbeginner:before {
  content: "\f297"; }

.fa-wpexplorer:before {
  content: "\f2de"; }

.fa-wpforms:before {
  content: "\f298"; }

.fa-wpressr:before {
  content: "\f3e4"; }

.fa-xbox:before {
  content: "\f412"; }

.fa-xing:before {
  content: "\f168"; }

.fa-xing-square:before {
  content: "\f169"; }

.fa-y-combinator:before {
  content: "\f23b"; }

.fa-yahoo:before {
  content: "\f19e"; }

.fa-yammer:before {
  content: "\f840"; }

.fa-yandex:before {
  content: "\f413"; }

.fa-yandex-international:before {
  content: "\f414"; }

.fa-yarn:before {
  content: "\f7e3"; }

.fa-yelp:before {
  content: "\f1e9"; }

.fa-yoast:before {
  content: "\f2b1"; }

.fa-youtube:before {
  content: "\f167"; }

.fa-youtube-square:before {
  content: "\f431"; }

.fa-zhihu:before {
  content: "\f63f"; }
:root, :host {
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-regular-400.ttf") format("truetype"); }

.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400; }
:root, :host {
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-solid-900.ttf") format("truetype"); }

.fas,
.fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; }
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: block;
  font-weight: 400;
  src: url("/fonts/fa-6.1.1/fa-brands-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 900;
  src: url("/fonts/fa-6.1.1/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-solid-900.ttf") format("truetype"); }

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 400;
  src: url("/fonts/fa-6.1.1/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-regular-400.ttf") format("truetype"); }
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-solid-900.ttf") format("truetype"); }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-brands-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-regular-400.ttf") format("truetype");
  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("/fonts/fa-6.1.1/fa-v4compatibility.woff2") format("woff2"), url("/fonts/fa-6.1.1/fa-v4compatibility.ttf") format("truetype");
  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F250,U+F252,U+F27A; }

/* /vendor/d3-context-menu/css/d3-context-menu.css */
.d3-context-menu {
	position: absolute;
	display: none;
	background-color: #f2f2f2;
	border-radius: 4px;

	font-family: Arial, sans-serif;
	font-size: 14px;
	min-width: 150px;
	border: 1px solid #d4d4d4;

	z-index:1200;
}

.d3-context-menu ul {
	list-style-type: none;
	margin: 4px 0px;
	padding: 0px;
	cursor: default;
}

.d3-context-menu ul li {
	padding: 4px 16px;

	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Chrome/Safari/Opera */
	-khtml-user-select: none;    /* Konqueror */
	-moz-user-select: none;      /* Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;
}

.d3-context-menu ul li:hover {
	background-color: #4677f8;
	color: #fefefe;
}

/*
	Header
*/

.d3-context-menu ul li.is-header,
.d3-context-menu ul li.is-header:hover {
	background-color: #f2f2f2;
	color: #444;
	font-weight: bold;
	font-style: italic;
}

/*
	Disabled
*/

.d3-context-menu ul li.is-disabled,
.d3-context-menu ul li.is-disabled:hover {
	background-color: #f2f2f2;
	color: #888;
	cursor: not-allowed;
}

/*
	Divider
*/

.d3-context-menu ul li.is-divider {
	padding: 0px 0px;
}

.d3-context-menu ul li.is-divider:hover {
	background-color: #f2f2f2;
}

.d3-context-menu ul hr {
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
/* /vendor/slickgrid/slick.grid.css */
/*
IMPORTANT:
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
classes should alter those!
*/

.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
  width: 100%;
  overflow: hidden;
  border-left: 0px;
}

.slick-header-columns, .slick-headerrow-columns {
  position: relative;
  white-space: nowrap;
  cursor: default;
  overflow: hidden;
}

.slick-header-column.ui-state-default {
  position: relative;
  display: inline-block;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  height: 16px;
  line-height: 16px;
  margin: 0;
  padding: 4px;
  border-right: 1px solid silver;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  float: left;
}

.slick-headerrow-column.ui-state-default {
  padding: 4px;
}

.slick-header-column-sorted {
  font-style: italic;
}

.slick-sort-indicator {
  display: inline-block;
  width: 8px;
  height: 5px;
  margin-left: 4px;
  margin-top: 6px;
  float: left;
}

.slick-sort-indicator-desc {
  background: url(images/sort-desc.gif);
}

.slick-sort-indicator-asc {
  background: url(images/sort-asc.gif);
}

.slick-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  cursor: col-resize;
  width: 4px;
  right: 0px;
  top: 0;
  height: 100%;
}

.slick-sortable-placeholder {
  background: silver;
}

.grid-canvas {
  position: relative;
  outline: 0;
}

.slick-row.ui-widget-content, .slick-row.ui-state-active {
  position: absolute;
  border: 0px;
  width: 100%;
}

.slick-cell, .slick-headerrow-column {
  position: absolute;
  border: 1px solid transparent;
  border-right: 1px dotted silver;
  border-bottom-color: silver;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  vertical-align: middle;
  z-index: 1;
  padding: 1px 2px 2px 1px;
  margin: 0;
  white-space: nowrap;
  cursor: default;
}

.slick-group {
}

.slick-group-toggle {
  display: inline-block;
}

.slick-cell.highlighted {
  background: lightskyblue;
  background: rgba(0, 0, 255, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.slick-cell.flashing {
  border: 1px solid red !important;
}

.slick-cell.editable {
  z-index: 11;
  overflow: visible;
  background: white;
  border-color: black;
  border-style: solid;
}

.slick-cell:focus {
  outline: none;
}

.slick-reorder-proxy {
  display: inline-block;
  background: blue;
  opacity: 0.15;
  filter: alpha(opacity = 15);
  cursor: move;
}

.slick-reorder-guide {
  display: inline-block;
  height: 2px;
  background: blue;
  opacity: 0.7;
  filter: alpha(opacity = 70);
}

.slick-selection {
  z-index: 10;
  position: absolute;
  border: 2px dashed black;
}

/* /vendor/slickgrid/controls/slick.columnpicker.css */
.slick-columnpicker {
  border: 1px solid #718BB7;
  background: #f0f0f0;
  padding: 6px;
  -moz-box-shadow: 2px 2px 2px silver;
  -webkit-box-shadow: 2px 2px 2px silver;
  box-shadow: 2px 2px 2px silver;
  min-width: 100px;
  cursor: default;
}

.slick-columnpicker li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
}

.slick-columnpicker input {
  margin: 4px;
}

.slick-columnpicker li a {
  display: block;
  padding: 4px;
  font-weight: bold;
}

.slick-columnpicker li a:hover {
  background: white;
}

/* /vendor/slickgrid/controls/slick.pager.css */
.slick-pager {
  width: 100%;
  height: 26px;
  border: 1px solid gray;
  border-top: 0;
  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
  vertical-align: middle;
}

.slick-pager .slick-pager-status {
  display: inline-block;
  padding: 6px;
  font-size: 0.9em;
}

.slick-pager .ui-icon-container {
  display: inline-block;
  margin: 2px;
  border-color: gray;
}

.slick-pager .slick-pager-nav {
  display: inline-block;
  float: left;
  padding: 2px;
}

.slick-pager .slick-pager-settings {
  display: block;
  float: right;
  padding: 2px;
}

.slick-pager .slick-pager-settings * {
  vertical-align: middle;
}

.slick-pager .slick-pager-settings a {
  padding: 2px;
  text-decoration: underline;
  cursor: pointer;
}

/* /vendor/bootstrap-daterangepicker/daterangepicker.css */
.daterangepicker {
  position: absolute;
  color: inherit;
  background: #fff;
  border-radius: 4px;
  width: 278px;
  padding: 4px;
  margin-top: 1px;
  top: 100px;
  left: 20px;
  /* Calendars */ }
  .daterangepicker:before, .daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: ''; }
  .daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc; }
  .daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent; }
  .daterangepicker.opensleft:before {
    right: 9px; }
  .daterangepicker.opensleft:after {
    right: 10px; }
  .daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto; }
  .daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto; }
  .daterangepicker.opensright:before {
    left: 9px; }
  .daterangepicker.opensright:after {
    left: 10px; }
  .daterangepicker.dropup {
    margin-top: -5px; }
    .daterangepicker.dropup:before {
      top: initial;
      bottom: -7px;
      border-bottom: initial;
      border-top: 7px solid #ccc; }
    .daterangepicker.dropup:after {
      top: initial;
      bottom: -6px;
      border-bottom: initial;
      border-top: 6px solid #fff; }
  .daterangepicker.dropdown-menu {
    max-width: none;
    z-index: 3001; }
  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
    float: none; }
  .daterangepicker.show-calendar .calendar {
    display: block; }
  .daterangepicker .calendar {
    display: none;
    max-width: 270px;
    margin: 4px; }
    .daterangepicker .calendar.single .calendar-table {
      border: none; }
    .daterangepicker .calendar th, .daterangepicker .calendar td {
      white-space: nowrap;
      text-align: center;
      min-width: 32px; }
  .daterangepicker .calendar-table {
    border: 1px solid #fff;
    padding: 4px;
    border-radius: 4px;
    background: #fff; }
  .daterangepicker table {
    width: 100%;
    margin: 0; }
  .daterangepicker td, .daterangepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer; }
    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
      background-color: #eee;
      border-color: transparent;
      color: inherit; }
    .daterangepicker td.week, .daterangepicker th.week {
      font-size: 80%;
      color: #ccc; }
  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: #fff;
    border-color: transparent;
    color: #999; }
  .daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0; }
  .daterangepicker td.start-date {
    border-radius: 4px 0 0 4px; }
  .daterangepicker td.end-date {
    border-radius: 0 4px 4px 0; }
  .daterangepicker td.start-date.end-date {
    border-radius: 4px; }
  .daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff; }
  .daterangepicker th.month {
    width: auto; }
  .daterangepicker td.disabled, .daterangepicker option.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through; }
  .daterangepicker select.monthselect, .daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default; }
  .daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%; }
  .daterangepicker select.yearselect {
    width: 40%; }
  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    width: 50px;
    margin-bottom: 0; }
  .daterangepicker .input-mini {
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    height: 30px;
    line-height: 30px;
    display: block;
    vertical-align: middle;
    margin: 0 0 5px 0;
    padding: 0 6px 0 28px;
    width: 100%; }
    .daterangepicker .input-mini.active {
      border: 1px solid #08c;
      border-radius: 4px; }
  .daterangepicker .daterangepicker_input {
    position: relative; }
    .daterangepicker .daterangepicker_input i {
      position: absolute;
      left: 8px;
      top: 8px; }
  .daterangepicker.rtl .input-mini {
    padding-right: 28px;
    padding-left: 6px; }
  .daterangepicker.rtl .daterangepicker_input i {
    left: auto;
    right: 8px; }
  .daterangepicker .calendar-time {
    text-align: center;
    margin: 5px auto;
    line-height: 30px;
    position: relative;
    padding-left: 28px; }
    .daterangepicker .calendar-time select.disabled {
      color: #ccc;
      cursor: not-allowed; }

.ranges {
  font-size: 11px;
  float: none;
  margin: 4px;
  text-align: left; }
  .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%; }
  .ranges li {
    font-size: 13px;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    color: #08c;
    padding: 3px 12px;
    margin-bottom: 8px;
    cursor: pointer; }
    .ranges li:hover {
      background: #08c;
      border: 1px solid #08c;
      color: #fff; }
    .ranges li.active {
      background: #08c;
      border: 1px solid #08c;
      color: #fff; }

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto; }
    .daterangepicker .ranges ul {
      width: 160px; }
    .daterangepicker.single .ranges ul {
      width: 100%; }
    .daterangepicker.single .calendar.left {
      clear: none; }
    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
      float: left; }
    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
      float: right; }
    .daterangepicker.ltr {
      direction: ltr;
      text-align: left; }
      .daterangepicker.ltr .calendar.left {
        clear: left;
        margin-right: 0; }
        .daterangepicker.ltr .calendar.left .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.ltr .calendar.right {
        margin-left: 0; }
        .daterangepicker.ltr .calendar.right .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.ltr .left .daterangepicker_input {
        padding-right: 12px; }
      .daterangepicker.ltr .calendar.left .calendar-table {
        padding-right: 12px; }
      .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
        float: left; }
    .daterangepicker.rtl {
      direction: rtl;
      text-align: right; }
      .daterangepicker.rtl .calendar.left {
        clear: right;
        margin-left: 0; }
        .daterangepicker.rtl .calendar.left .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.rtl .calendar.right {
        margin-right: 0; }
        .daterangepicker.rtl .calendar.right .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.rtl .left .daterangepicker_input {
        padding-left: 12px; }
      .daterangepicker.rtl .calendar.left .calendar-table {
        padding-left: 12px; }
      .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
        text-align: right;
        float: right; } }
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto; }
  .daterangepicker.ltr .ranges {
    float: left; }
  .daterangepicker.rtl .ranges {
    float: right; }
  .daterangepicker .calendar.left {
    clear: none !important; } }

/* /vendor/custom/bootstrap-colorpicker/bootstrap-colorpicker.min.css */
/*!
 * Bootstrap Colorpicker v2.3.6
 * https:/itsjavi.com/bootstrap-colorpicker/
 *
 * Originally written by (c) 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http:/www.apache.org/licenses/LICENSE-2.0.txt
 *
 */.colorpicker-saturation{width:100px;height:100px;background-image:url(/images/bootstrap-colorpicker/saturation.png);cursor:crosshair;float:left}.colorpicker-saturation i{display:block;height:5px;width:5px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;top:0;left:0;margin:-4px 0 0 -4px}.colorpicker-saturation i b{display:block;height:5px;width:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{width:15px;height:100px;float:left;cursor:row-resize;margin-left:4px;margin-bottom:4px}.colorpicker-alpha i,.colorpicker-hue i{display:block;height:1px;background:#000;border-top:1px solid #fff;position:absolute;top:0;left:0;width:100%;margin-top:-1px}.colorpicker-hue{background-image:url(/images/bootstrap-colorpicker/hue.png)}.colorpicker-alpha{background-image:url(/images/bootstrap-colorpicker/alpha.png);display:none}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{padding:4px;min-width:130px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;z-index:2500}.colorpicker:after,.colorpicker:before{display:table;content:"";line-height:0}.colorpicker:after{clear:both}.colorpicker:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,.2);position:absolute;top:-7px;left:6px}.colorpicker:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-image:url(/images/bootstrap-colorpicker/alpha.png);background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{cursor:pointer;float:left;height:10px;width:10px}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;cursor:pointer;height:16px;vertical-align:text-top;width:16px}.colorpicker.colorpicker-inline{position:relative;display:inline-block;float:none;z-index:auto}.colorpicker.colorpicker-horizontal{width:110px;min-width:110px;height:auto}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{width:100px;height:15px;float:left;cursor:col-resize;margin-left:0;margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{display:block;height:15px;background:#fff;position:absolute;top:0;left:0;width:1px;border:none;margin-top:0}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(/images/bootstrap-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(/images/bootstrap-colorpicker/alpha-horizontal.png)}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker-right:before{left:auto;right:6px}.colorpicker-right:after{left:auto;right:7px}.colorpicker-no-arrow:before{border-right:0;border-left:0}.colorpicker-no-arrow:after{border-right:0;border-left:0}
/*# sourceMappingURL=bootstrap-colorpicker.min.css.map */

/* /vendor/magnify/dist/css/magnify.css */
html.magnifying > body {
  overflow-x: hidden !important;
}
.magnify,
.magnify > .magnify-lens,
.magnify-mobile,
.lens-mobile { /* Reset */
  min-width: 0;
  min-height: 0;
  animation: none;
  border: none;
  float: none;
  margin: 0;
  opacity: 1;
  outline: none;
  overflow: visible;
  padding: 0;
  text-indent: 0;
  transform: none;
  transition: none;
}
.magnify {
  position: relative;
  width: auto;
  height: auto;
  box-shadow: none;
  display: inline-block;
  z-index: inherit;
}
.magnify > .magnify-lens { /* Magnifying lens */
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  /* Multiple box shadows to achieve the glass lens effect */
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  cursor: none;
  display: none;
  z-index: 99;
}
.magnify > .magnify-lens.loading {
  background: #333 !important;
  opacity: 0.8;
}
.magnify > .magnify-lens.loading:after { /* Loading text */
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  color: #fff;
  content: 'Loading...';
  font: italic normal 16px/1 Calibri, sans-serif;
  letter-spacing: 1px;
  margin-top: -8px;
  text-align: center;
  text-shadow: 0 0 2px rgba(51, 51, 51, 0.8);
  text-transform: none;
}

/* /vendor/cropper/dist/cropper.css */
/*!
 * Cropper v4.0.0
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright (c) 2014-2018 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2018-04-01T06:26:32.417Z
 */

.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cropper-container img {/*Avoid margin top issue (Occur only when margin-top <= -height)
 */
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
  overflow: hidden;
}

.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  opacity: .5;
}

.cropper-view-box {
  display: block;
  height: 100%;
  outline-color: rgba(51, 153, 255, 0.75);
  outline: 1px solid #39f;
  overflow: hidden;
  width: 100%;
}

.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: .5;
  position: absolute;
}

.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}

.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}

.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: .75;
  position: absolute;
  top: 50%;
  width: 0;
}

.cropper-center:before,
.cropper-center:after {
  background-color: #eee;
  content: ' ';
  display: block;
  position: absolute;
}

.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}

.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: .1;
  position: absolute;
  width: 100%;
}

.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}

.cropper-line {
  background-color: #39f;
}

.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}

.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}

.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}

.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: .75;
  width: 5px;
}

.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}

.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}

.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}

.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}

.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}

.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}

.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}

.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: .75;
    width: 5px;
  }
}

.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: ' ';
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

/* /vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css */
/*! X-editable - v1.5.1 
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
    margin-bottom: 0; /* overwrites bootstrap margin */
}

.editableform .control-group {
    margin-bottom: 0; /* overwrites bootstrap margin */
    white-space: nowrap; /* prevent wrapping buttons on new line */
    line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}

/* 
  BS3 width:1005 for inputs breaks editable form in popup 
  See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
    width: auto;
}

.editable-buttons {
   display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
   vertical-align: top;
   margin-left: 7px;
   /* inline-block emulation for IE7*/
   zoom: 1; 
   *display: inline;
}

.editable-buttons.editable-buttons-bottom {
   display: block; 
   margin-top: 7px;
   margin-left: 0;
}

.editable-input {
    vertical-align: top; 
    display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
    width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
    white-space: normal; /* reset white-space decalred in parent*/
   /* display-inline emulation for IE7*/
   zoom: 1; 
   *display: inline;   
}

.editable-buttons .editable-cancel {
   margin-left: 7px; 
}

/*for jquery-ui buttons need set height to look more pretty*/
.editable-buttons button.ui-button-icon-only {
   height: 24px; 
   width: 30px;
}

.editableform-loading {
    background: url('../img/loading.gif') center center no-repeat;  
    height: 25px;
    width: auto; 
    min-width: 25px; 
}

.editable-inline .editableform-loading {
    background-position: left 5px;      
}

 .editable-error-block {
    max-width: 300px;
    margin: 5px 0 0 0;
    width: auto;
    white-space: normal;
}

/*add padding for jquery ui*/
.editable-error-block.ui-state-error {
    padding: 3px;  
}  

.editable-error {
   color: red;  
}

/* ---- For specific types ---- */

.editableform .editable-date {
    padding: 0; 
    margin: 0;
    float: left;
}

/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
.editable-inline .add-on .icon-th {
   margin-top: 3px;
   margin-left: 1px; 
}


/* checklist vertical alignment */
.editable-checklist label input[type="checkbox"], 
.editable-checklist label span {
    vertical-align: middle;
    margin: 0;
}

.editable-checklist label {
    white-space: nowrap; 
}

/* set exact width of textarea to fit buttons toolbar */
.editable-wysihtml5 {
    width: 566px; 
    height: 250px; 
}

/* clear button shown as link in date inputs */
.editable-clear {
   clear: both;
   font-size: 0.9em;
   text-decoration: none;
   text-align: right;
}

/* IOS-style clear button for text inputs */
.editable-clear-x {
   background: url('../img/clear.png') center center no-repeat;
   display: block;
   width: 13px;    
   height: 13px;
   position: absolute;
   opacity: 0.6;
   z-index: 100;
   
   top: 50%;
   right: 6px;
   margin-top: -6px;
   
}

.editable-clear-x:hover {
   opacity: 1;
}

.editable-pre-wrapped {
   white-space: pre-wrap;
}
.editable-container.editable-popup {
    max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}  

.editable-container.popover {
    width: auto; /* without this rule popover does not stretch */
}

.editable-container.editable-inline {
    display: inline-block; 
    vertical-align: middle;
    width: auto;
    /* inline-block emulation for IE7*/
    zoom: 1; 
    *display: inline;    
}

.editable-container.ui-widget {
   font-size: inherit;  /* jqueryui widget font 1.1em too big, overwrite it */
   z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
.editable-click, 
a.editable-click, 
a.editable-click:hover {
    text-decoration: none;
    border-bottom: dashed 1px #0088cc;
}

.editable-click.editable-disabled, 
a.editable-click.editable-disabled, 
a.editable-click.editable-disabled:hover {
   color: #585858;  
   cursor: default;
   border-bottom: none;
}

.editable-empty, .editable-empty:hover, .editable-empty:focus{
  font-style: italic; 
  color: #DD1144;  
  /* border-bottom: none; */
  text-decoration: none;
}

.editable-unsaved {
  font-weight: bold; 
}

.editable-unsaved:after {
/*    content: '*'*/
}

.editable-bg-transition {
  -webkit-transition: background-color 1400ms ease-out;
  -moz-transition: background-color 1400ms ease-out;
  -o-transition: background-color 1400ms ease-out;
  -ms-transition: background-color 1400ms ease-out;
  transition: background-color 1400ms ease-out;  
}

/*see https://github.com/vitalets/x-editable/issues/139 */
.form-horizontal .editable
{ 
    padding-top: 5px;
    display:inline-block;
}


/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  direction: ltr;
  /*.dow {
		border-top: 1px solid #ddd !important;
	}*/

}
.datepicker-inline {
  width: 220px;
}
.datepicker.datepicker-rtl {
  direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
  float: right;
}
.datepicker-dropdown {
  top: 0;
  left: 0;
}
.datepicker-dropdown:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -7px;
  left: 6px;
}
.datepicker-dropdown:after {
  content: '';
  display: inline-block;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  position: absolute;
  top: -6px;
  left: 7px;
}
.datepicker > div {
  display: none;
}
.datepicker.days div.datepicker-days {
  display: block;
}
.datepicker.months div.datepicker-months {
  display: block;
}
.datepicker.years div.datepicker-years {
  display: block;
}
.datepicker table {
  margin: 0;
}
.datepicker td,
.datepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}
.datepicker table tr td.day:hover {
  background: #eeeeee;
  cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: #fde19a;
  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
  background-image: linear-gradient(top, #fdd49a, #fdf59a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
  border-color: #fdf59a #fdf59a #fbed50;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
  background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
  background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
  color: #000;
}
.datepicker table tr td.today.active:hover {
  color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
  background: #eeeeee;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
  background-color: #f3d17a;
  background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
  background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
  background-image: linear-gradient(top, #f3c17a, #f3e97a);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
  border-color: #f3e97a #f3e97a #edde34;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
  background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
  background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
  background-color: #9e9e9e;
  background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
  background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
  background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
  background-image: -o-linear-gradient(top, #b3b3b3, #808080);
  background-image: linear-gradient(top, #b3b3b3, #808080);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
  border-color: #808080 #808080 #595959;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
  background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
  background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: #003399 \9;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.datepicker table tr td span:hover {
  background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: #999999;
}
.datepicker th.datepicker-switch {
  width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
  cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
  background: #eeeeee;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
  cursor: default;
  background-color: transparent;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
  display: block;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.input-daterange input {
  text-align: center;
}
.input-daterange input:first-child {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
  display: inline-block;
  width: auto;
  min-width: 16px;
  height: 18px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  margin-left: -5px;
  margin-right: -5px;
}

/* /vendor/datatables.net-bs/css/dataTables.bootstrap.css */
table.dataTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
}
table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  text-align: center;
}
table.dataTable.nowrap th,
table.dataTable.nowrap td {
  white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_length label {
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_length select {
  width: 75px;
  display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
  text-align: right;
}
div.dataTables_wrapper div.dataTables_filter label {
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em;
  display: inline-block;
  width: auto;
}
div.dataTables_wrapper div.dataTables_info {
  padding-top: 8px;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
  padding-right: 30px;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  position: relative;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: block;
  font-family: 'Glyphicons Halflings';
  opacity: 0.5;
}
table.dataTable thead .sorting:after {
  opacity: 0.2;
  content: "\e150";
  /* sort */
}
table.dataTable thead .sorting_asc:after {
  content: "\e155";
  /* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
  content: "\e156";
  /* sort-by-attributes-alt */
}
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  color: #eee;
}

div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}

div.dataTables_scrollBody table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody table thead .sorting:after,
div.dataTables_scrollBody table thead .sorting_asc:after,
div.dataTables_scrollBody table thead .sorting_desc:after {
  display: none;
}
div.dataTables_scrollBody table tbody tr:first-child th,
div.dataTables_scrollBody table tbody tr:first-child td {
  border-top: none;
}

div.dataTables_scrollFoot table {
  margin-top: 0 !important;
  border-top: none;
}

@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
}
table.dataTable.table-condensed > thead > tr > th {
  padding-right: 20px;
}
table.dataTable.table-condensed .sorting:after,
table.dataTable.table-condensed .sorting_asc:after,
table.dataTable.table-condensed .sorting_desc:after {
  top: 6px;
  right: 6px;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-left-width: 0;
}
table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right-width: 0;
}
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border-bottom-width: 0;
}

div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 0;
}

div.table-responsive > div.dataTables_wrapper > div.row {
  margin: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child {
  padding-left: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child {
  padding-right: 0;
}

/* /vendor/datatables.net-colreorder-bs/css/colReorder.bootstrap.css */
table.DTCR_clonedTable.dataTable {
  position: absolute !important;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 202;
}

div.DTCR_pointer {
  width: 1px;
  background-color: #337ab7;
  z-index: 201;
}

/* /vendor/colorbrewer2/colorbrewer.css */
/*
This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
This was copied from https://github.com/mbostock/d3/tree/master/lib/colorbrewer
*/
.YlGn .q0-3{fill:rgb(247,252,185)}
.YlGn .q1-3{fill:rgb(173,221,142)}
.YlGn .q2-3{fill:rgb(49,163,84)}
.YlGn .q0-4{fill:rgb(255,255,204)}
.YlGn .q1-4{fill:rgb(194,230,153)}
.YlGn .q2-4{fill:rgb(120,198,121)}
.YlGn .q3-4{fill:rgb(35,132,67)}
.YlGn .q0-5{fill:rgb(255,255,204)}
.YlGn .q1-5{fill:rgb(194,230,153)}
.YlGn .q2-5{fill:rgb(120,198,121)}
.YlGn .q3-5{fill:rgb(49,163,84)}
.YlGn .q4-5{fill:rgb(0,104,55)}
.YlGn .q0-6{fill:rgb(255,255,204)}
.YlGn .q1-6{fill:rgb(217,240,163)}
.YlGn .q2-6{fill:rgb(173,221,142)}
.YlGn .q3-6{fill:rgb(120,198,121)}
.YlGn .q4-6{fill:rgb(49,163,84)}
.YlGn .q5-6{fill:rgb(0,104,55)}
.YlGn .q0-7{fill:rgb(255,255,204)}
.YlGn .q1-7{fill:rgb(217,240,163)}
.YlGn .q2-7{fill:rgb(173,221,142)}
.YlGn .q3-7{fill:rgb(120,198,121)}
.YlGn .q4-7{fill:rgb(65,171,93)}
.YlGn .q5-7{fill:rgb(35,132,67)}
.YlGn .q6-7{fill:rgb(0,90,50)}
.YlGn .q0-8{fill:rgb(255,255,229)}
.YlGn .q1-8{fill:rgb(247,252,185)}
.YlGn .q2-8{fill:rgb(217,240,163)}
.YlGn .q3-8{fill:rgb(173,221,142)}
.YlGn .q4-8{fill:rgb(120,198,121)}
.YlGn .q5-8{fill:rgb(65,171,93)}
.YlGn .q6-8{fill:rgb(35,132,67)}
.YlGn .q7-8{fill:rgb(0,90,50)}
.YlGn .q0-9{fill:rgb(255,255,229)}
.YlGn .q1-9{fill:rgb(247,252,185)}
.YlGn .q2-9{fill:rgb(217,240,163)}
.YlGn .q3-9{fill:rgb(173,221,142)}
.YlGn .q4-9{fill:rgb(120,198,121)}
.YlGn .q5-9{fill:rgb(65,171,93)}
.YlGn .q6-9{fill:rgb(35,132,67)}
.YlGn .q7-9{fill:rgb(0,104,55)}
.YlGn .q8-9{fill:rgb(0,69,41)}
.YlGnBu .q0-3{fill:rgb(237,248,177)}
.YlGnBu .q1-3{fill:rgb(127,205,187)}
.YlGnBu .q2-3{fill:rgb(44,127,184)}
.YlGnBu .q0-4{fill:rgb(255,255,204)}
.YlGnBu .q1-4{fill:rgb(161,218,180)}
.YlGnBu .q2-4{fill:rgb(65,182,196)}
.YlGnBu .q3-4{fill:rgb(34,94,168)}
.YlGnBu .q0-5{fill:rgb(255,255,204)}
.YlGnBu .q1-5{fill:rgb(161,218,180)}
.YlGnBu .q2-5{fill:rgb(65,182,196)}
.YlGnBu .q3-5{fill:rgb(44,127,184)}
.YlGnBu .q4-5{fill:rgb(37,52,148)}
.YlGnBu .q0-6{fill:rgb(255,255,204)}
.YlGnBu .q1-6{fill:rgb(199,233,180)}
.YlGnBu .q2-6{fill:rgb(127,205,187)}
.YlGnBu .q3-6{fill:rgb(65,182,196)}
.YlGnBu .q4-6{fill:rgb(44,127,184)}
.YlGnBu .q5-6{fill:rgb(37,52,148)}
.YlGnBu .q0-7{fill:rgb(255,255,204)}
.YlGnBu .q1-7{fill:rgb(199,233,180)}
.YlGnBu .q2-7{fill:rgb(127,205,187)}
.YlGnBu .q3-7{fill:rgb(65,182,196)}
.YlGnBu .q4-7{fill:rgb(29,145,192)}
.YlGnBu .q5-7{fill:rgb(34,94,168)}
.YlGnBu .q6-7{fill:rgb(12,44,132)}
.YlGnBu .q0-8{fill:rgb(255,255,217)}
.YlGnBu .q1-8{fill:rgb(237,248,177)}
.YlGnBu .q2-8{fill:rgb(199,233,180)}
.YlGnBu .q3-8{fill:rgb(127,205,187)}
.YlGnBu .q4-8{fill:rgb(65,182,196)}
.YlGnBu .q5-8{fill:rgb(29,145,192)}
.YlGnBu .q6-8{fill:rgb(34,94,168)}
.YlGnBu .q7-8{fill:rgb(12,44,132)}
.YlGnBu .q0-9{fill:rgb(255,255,217)}
.YlGnBu .q1-9{fill:rgb(237,248,177)}
.YlGnBu .q2-9{fill:rgb(199,233,180)}
.YlGnBu .q3-9{fill:rgb(127,205,187)}
.YlGnBu .q4-9{fill:rgb(65,182,196)}
.YlGnBu .q5-9{fill:rgb(29,145,192)}
.YlGnBu .q6-9{fill:rgb(34,94,168)}
.YlGnBu .q7-9{fill:rgb(37,52,148)}
.YlGnBu .q8-9{fill:rgb(8,29,88)}
.GnBu .q0-3{fill:rgb(224,243,219)}
.GnBu .q1-3{fill:rgb(168,221,181)}
.GnBu .q2-3{fill:rgb(67,162,202)}
.GnBu .q0-4{fill:rgb(240,249,232)}
.GnBu .q1-4{fill:rgb(186,228,188)}
.GnBu .q2-4{fill:rgb(123,204,196)}
.GnBu .q3-4{fill:rgb(43,140,190)}
.GnBu .q0-5{fill:rgb(240,249,232)}
.GnBu .q1-5{fill:rgb(186,228,188)}
.GnBu .q2-5{fill:rgb(123,204,196)}
.GnBu .q3-5{fill:rgb(67,162,202)}
.GnBu .q4-5{fill:rgb(8,104,172)}
.GnBu .q0-6{fill:rgb(240,249,232)}
.GnBu .q1-6{fill:rgb(204,235,197)}
.GnBu .q2-6{fill:rgb(168,221,181)}
.GnBu .q3-6{fill:rgb(123,204,196)}
.GnBu .q4-6{fill:rgb(67,162,202)}
.GnBu .q5-6{fill:rgb(8,104,172)}
.GnBu .q0-7{fill:rgb(240,249,232)}
.GnBu .q1-7{fill:rgb(204,235,197)}
.GnBu .q2-7{fill:rgb(168,221,181)}
.GnBu .q3-7{fill:rgb(123,204,196)}
.GnBu .q4-7{fill:rgb(78,179,211)}
.GnBu .q5-7{fill:rgb(43,140,190)}
.GnBu .q6-7{fill:rgb(8,88,158)}
.GnBu .q0-8{fill:rgb(247,252,240)}
.GnBu .q1-8{fill:rgb(224,243,219)}
.GnBu .q2-8{fill:rgb(204,235,197)}
.GnBu .q3-8{fill:rgb(168,221,181)}
.GnBu .q4-8{fill:rgb(123,204,196)}
.GnBu .q5-8{fill:rgb(78,179,211)}
.GnBu .q6-8{fill:rgb(43,140,190)}
.GnBu .q7-8{fill:rgb(8,88,158)}
.GnBu .q0-9{fill:rgb(247,252,240)}
.GnBu .q1-9{fill:rgb(224,243,219)}
.GnBu .q2-9{fill:rgb(204,235,197)}
.GnBu .q3-9{fill:rgb(168,221,181)}
.GnBu .q4-9{fill:rgb(123,204,196)}
.GnBu .q5-9{fill:rgb(78,179,211)}
.GnBu .q6-9{fill:rgb(43,140,190)}
.GnBu .q7-9{fill:rgb(8,104,172)}
.GnBu .q8-9{fill:rgb(8,64,129)}
.BuGn .q0-3{fill:rgb(229,245,249)}
.BuGn .q1-3{fill:rgb(153,216,201)}
.BuGn .q2-3{fill:rgb(44,162,95)}
.BuGn .q0-4{fill:rgb(237,248,251)}
.BuGn .q1-4{fill:rgb(178,226,226)}
.BuGn .q2-4{fill:rgb(102,194,164)}
.BuGn .q3-4{fill:rgb(35,139,69)}
.BuGn .q0-5{fill:rgb(237,248,251)}
.BuGn .q1-5{fill:rgb(178,226,226)}
.BuGn .q2-5{fill:rgb(102,194,164)}
.BuGn .q3-5{fill:rgb(44,162,95)}
.BuGn .q4-5{fill:rgb(0,109,44)}
.BuGn .q0-6{fill:rgb(237,248,251)}
.BuGn .q1-6{fill:rgb(204,236,230)}
.BuGn .q2-6{fill:rgb(153,216,201)}
.BuGn .q3-6{fill:rgb(102,194,164)}
.BuGn .q4-6{fill:rgb(44,162,95)}
.BuGn .q5-6{fill:rgb(0,109,44)}
.BuGn .q0-7{fill:rgb(237,248,251)}
.BuGn .q1-7{fill:rgb(204,236,230)}
.BuGn .q2-7{fill:rgb(153,216,201)}
.BuGn .q3-7{fill:rgb(102,194,164)}
.BuGn .q4-7{fill:rgb(65,174,118)}
.BuGn .q5-7{fill:rgb(35,139,69)}
.BuGn .q6-7{fill:rgb(0,88,36)}
.BuGn .q0-8{fill:rgb(247,252,253)}
.BuGn .q1-8{fill:rgb(229,245,249)}
.BuGn .q2-8{fill:rgb(204,236,230)}
.BuGn .q3-8{fill:rgb(153,216,201)}
.BuGn .q4-8{fill:rgb(102,194,164)}
.BuGn .q5-8{fill:rgb(65,174,118)}
.BuGn .q6-8{fill:rgb(35,139,69)}
.BuGn .q7-8{fill:rgb(0,88,36)}
.BuGn .q0-9{fill:rgb(247,252,253)}
.BuGn .q1-9{fill:rgb(229,245,249)}
.BuGn .q2-9{fill:rgb(204,236,230)}
.BuGn .q3-9{fill:rgb(153,216,201)}
.BuGn .q4-9{fill:rgb(102,194,164)}
.BuGn .q5-9{fill:rgb(65,174,118)}
.BuGn .q6-9{fill:rgb(35,139,69)}
.BuGn .q7-9{fill:rgb(0,109,44)}
.BuGn .q8-9{fill:rgb(0,68,27)}
.PuBuGn .q0-3{fill:rgb(236,226,240)}
.PuBuGn .q1-3{fill:rgb(166,189,219)}
.PuBuGn .q2-3{fill:rgb(28,144,153)}
.PuBuGn .q0-4{fill:rgb(246,239,247)}
.PuBuGn .q1-4{fill:rgb(189,201,225)}
.PuBuGn .q2-4{fill:rgb(103,169,207)}
.PuBuGn .q3-4{fill:rgb(2,129,138)}
.PuBuGn .q0-5{fill:rgb(246,239,247)}
.PuBuGn .q1-5{fill:rgb(189,201,225)}
.PuBuGn .q2-5{fill:rgb(103,169,207)}
.PuBuGn .q3-5{fill:rgb(28,144,153)}
.PuBuGn .q4-5{fill:rgb(1,108,89)}
.PuBuGn .q0-6{fill:rgb(246,239,247)}
.PuBuGn .q1-6{fill:rgb(208,209,230)}
.PuBuGn .q2-6{fill:rgb(166,189,219)}
.PuBuGn .q3-6{fill:rgb(103,169,207)}
.PuBuGn .q4-6{fill:rgb(28,144,153)}
.PuBuGn .q5-6{fill:rgb(1,108,89)}
.PuBuGn .q0-7{fill:rgb(246,239,247)}
.PuBuGn .q1-7{fill:rgb(208,209,230)}
.PuBuGn .q2-7{fill:rgb(166,189,219)}
.PuBuGn .q3-7{fill:rgb(103,169,207)}
.PuBuGn .q4-7{fill:rgb(54,144,192)}
.PuBuGn .q5-7{fill:rgb(2,129,138)}
.PuBuGn .q6-7{fill:rgb(1,100,80)}
.PuBuGn .q0-8{fill:rgb(255,247,251)}
.PuBuGn .q1-8{fill:rgb(236,226,240)}
.PuBuGn .q2-8{fill:rgb(208,209,230)}
.PuBuGn .q3-8{fill:rgb(166,189,219)}
.PuBuGn .q4-8{fill:rgb(103,169,207)}
.PuBuGn .q5-8{fill:rgb(54,144,192)}
.PuBuGn .q6-8{fill:rgb(2,129,138)}
.PuBuGn .q7-8{fill:rgb(1,100,80)}
.PuBuGn .q0-9{fill:rgb(255,247,251)}
.PuBuGn .q1-9{fill:rgb(236,226,240)}
.PuBuGn .q2-9{fill:rgb(208,209,230)}
.PuBuGn .q3-9{fill:rgb(166,189,219)}
.PuBuGn .q4-9{fill:rgb(103,169,207)}
.PuBuGn .q5-9{fill:rgb(54,144,192)}
.PuBuGn .q6-9{fill:rgb(2,129,138)}
.PuBuGn .q7-9{fill:rgb(1,108,89)}
.PuBuGn .q8-9{fill:rgb(1,70,54)}
.PuBu .q0-3{fill:rgb(236,231,242)}
.PuBu .q1-3{fill:rgb(166,189,219)}
.PuBu .q2-3{fill:rgb(43,140,190)}
.PuBu .q0-4{fill:rgb(241,238,246)}
.PuBu .q1-4{fill:rgb(189,201,225)}
.PuBu .q2-4{fill:rgb(116,169,207)}
.PuBu .q3-4{fill:rgb(5,112,176)}
.PuBu .q0-5{fill:rgb(241,238,246)}
.PuBu .q1-5{fill:rgb(189,201,225)}
.PuBu .q2-5{fill:rgb(116,169,207)}
.PuBu .q3-5{fill:rgb(43,140,190)}
.PuBu .q4-5{fill:rgb(4,90,141)}
.PuBu .q0-6{fill:rgb(241,238,246)}
.PuBu .q1-6{fill:rgb(208,209,230)}
.PuBu .q2-6{fill:rgb(166,189,219)}
.PuBu .q3-6{fill:rgb(116,169,207)}
.PuBu .q4-6{fill:rgb(43,140,190)}
.PuBu .q5-6{fill:rgb(4,90,141)}
.PuBu .q0-7{fill:rgb(241,238,246)}
.PuBu .q1-7{fill:rgb(208,209,230)}
.PuBu .q2-7{fill:rgb(166,189,219)}
.PuBu .q3-7{fill:rgb(116,169,207)}
.PuBu .q4-7{fill:rgb(54,144,192)}
.PuBu .q5-7{fill:rgb(5,112,176)}
.PuBu .q6-7{fill:rgb(3,78,123)}
.PuBu .q0-8{fill:rgb(255,247,251)}
.PuBu .q1-8{fill:rgb(236,231,242)}
.PuBu .q2-8{fill:rgb(208,209,230)}
.PuBu .q3-8{fill:rgb(166,189,219)}
.PuBu .q4-8{fill:rgb(116,169,207)}
.PuBu .q5-8{fill:rgb(54,144,192)}
.PuBu .q6-8{fill:rgb(5,112,176)}
.PuBu .q7-8{fill:rgb(3,78,123)}
.PuBu .q0-9{fill:rgb(255,247,251)}
.PuBu .q1-9{fill:rgb(236,231,242)}
.PuBu .q2-9{fill:rgb(208,209,230)}
.PuBu .q3-9{fill:rgb(166,189,219)}
.PuBu .q4-9{fill:rgb(116,169,207)}
.PuBu .q5-9{fill:rgb(54,144,192)}
.PuBu .q6-9{fill:rgb(5,112,176)}
.PuBu .q7-9{fill:rgb(4,90,141)}
.PuBu .q8-9{fill:rgb(2,56,88)}
.BuPu .q0-3{fill:rgb(224,236,244)}
.BuPu .q1-3{fill:rgb(158,188,218)}
.BuPu .q2-3{fill:rgb(136,86,167)}
.BuPu .q0-4{fill:rgb(237,248,251)}
.BuPu .q1-4{fill:rgb(179,205,227)}
.BuPu .q2-4{fill:rgb(140,150,198)}
.BuPu .q3-4{fill:rgb(136,65,157)}
.BuPu .q0-5{fill:rgb(237,248,251)}
.BuPu .q1-5{fill:rgb(179,205,227)}
.BuPu .q2-5{fill:rgb(140,150,198)}
.BuPu .q3-5{fill:rgb(136,86,167)}
.BuPu .q4-5{fill:rgb(129,15,124)}
.BuPu .q0-6{fill:rgb(237,248,251)}
.BuPu .q1-6{fill:rgb(191,211,230)}
.BuPu .q2-6{fill:rgb(158,188,218)}
.BuPu .q3-6{fill:rgb(140,150,198)}
.BuPu .q4-6{fill:rgb(136,86,167)}
.BuPu .q5-6{fill:rgb(129,15,124)}
.BuPu .q0-7{fill:rgb(237,248,251)}
.BuPu .q1-7{fill:rgb(191,211,230)}
.BuPu .q2-7{fill:rgb(158,188,218)}
.BuPu .q3-7{fill:rgb(140,150,198)}
.BuPu .q4-7{fill:rgb(140,107,177)}
.BuPu .q5-7{fill:rgb(136,65,157)}
.BuPu .q6-7{fill:rgb(110,1,107)}
.BuPu .q0-8{fill:rgb(247,252,253)}
.BuPu .q1-8{fill:rgb(224,236,244)}
.BuPu .q2-8{fill:rgb(191,211,230)}
.BuPu .q3-8{fill:rgb(158,188,218)}
.BuPu .q4-8{fill:rgb(140,150,198)}
.BuPu .q5-8{fill:rgb(140,107,177)}
.BuPu .q6-8{fill:rgb(136,65,157)}
.BuPu .q7-8{fill:rgb(110,1,107)}
.BuPu .q0-9{fill:rgb(247,252,253)}
.BuPu .q1-9{fill:rgb(224,236,244)}
.BuPu .q2-9{fill:rgb(191,211,230)}
.BuPu .q3-9{fill:rgb(158,188,218)}
.BuPu .q4-9{fill:rgb(140,150,198)}
.BuPu .q5-9{fill:rgb(140,107,177)}
.BuPu .q6-9{fill:rgb(136,65,157)}
.BuPu .q7-9{fill:rgb(129,15,124)}
.BuPu .q8-9{fill:rgb(77,0,75)}
.RdPu .q0-3{fill:rgb(253,224,221)}
.RdPu .q1-3{fill:rgb(250,159,181)}
.RdPu .q2-3{fill:rgb(197,27,138)}
.RdPu .q0-4{fill:rgb(254,235,226)}
.RdPu .q1-4{fill:rgb(251,180,185)}
.RdPu .q2-4{fill:rgb(247,104,161)}
.RdPu .q3-4{fill:rgb(174,1,126)}
.RdPu .q0-5{fill:rgb(254,235,226)}
.RdPu .q1-5{fill:rgb(251,180,185)}
.RdPu .q2-5{fill:rgb(247,104,161)}
.RdPu .q3-5{fill:rgb(197,27,138)}
.RdPu .q4-5{fill:rgb(122,1,119)}
.RdPu .q0-6{fill:rgb(254,235,226)}
.RdPu .q1-6{fill:rgb(252,197,192)}
.RdPu .q2-6{fill:rgb(250,159,181)}
.RdPu .q3-6{fill:rgb(247,104,161)}
.RdPu .q4-6{fill:rgb(197,27,138)}
.RdPu .q5-6{fill:rgb(122,1,119)}
.RdPu .q0-7{fill:rgb(254,235,226)}
.RdPu .q1-7{fill:rgb(252,197,192)}
.RdPu .q2-7{fill:rgb(250,159,181)}
.RdPu .q3-7{fill:rgb(247,104,161)}
.RdPu .q4-7{fill:rgb(221,52,151)}
.RdPu .q5-7{fill:rgb(174,1,126)}
.RdPu .q6-7{fill:rgb(122,1,119)}
.RdPu .q0-8{fill:rgb(255,247,243)}
.RdPu .q1-8{fill:rgb(253,224,221)}
.RdPu .q2-8{fill:rgb(252,197,192)}
.RdPu .q3-8{fill:rgb(250,159,181)}
.RdPu .q4-8{fill:rgb(247,104,161)}
.RdPu .q5-8{fill:rgb(221,52,151)}
.RdPu .q6-8{fill:rgb(174,1,126)}
.RdPu .q7-8{fill:rgb(122,1,119)}
.RdPu .q0-9{fill:rgb(255,247,243)}
.RdPu .q1-9{fill:rgb(253,224,221)}
.RdPu .q2-9{fill:rgb(252,197,192)}
.RdPu .q3-9{fill:rgb(250,159,181)}
.RdPu .q4-9{fill:rgb(247,104,161)}
.RdPu .q5-9{fill:rgb(221,52,151)}
.RdPu .q6-9{fill:rgb(174,1,126)}
.RdPu .q7-9{fill:rgb(122,1,119)}
.RdPu .q8-9{fill:rgb(73,0,106)}
.PuRd .q0-3{fill:rgb(231,225,239)}
.PuRd .q1-3{fill:rgb(201,148,199)}
.PuRd .q2-3{fill:rgb(221,28,119)}
.PuRd .q0-4{fill:rgb(241,238,246)}
.PuRd .q1-4{fill:rgb(215,181,216)}
.PuRd .q2-4{fill:rgb(223,101,176)}
.PuRd .q3-4{fill:rgb(206,18,86)}
.PuRd .q0-5{fill:rgb(241,238,246)}
.PuRd .q1-5{fill:rgb(215,181,216)}
.PuRd .q2-5{fill:rgb(223,101,176)}
.PuRd .q3-5{fill:rgb(221,28,119)}
.PuRd .q4-5{fill:rgb(152,0,67)}
.PuRd .q0-6{fill:rgb(241,238,246)}
.PuRd .q1-6{fill:rgb(212,185,218)}
.PuRd .q2-6{fill:rgb(201,148,199)}
.PuRd .q3-6{fill:rgb(223,101,176)}
.PuRd .q4-6{fill:rgb(221,28,119)}
.PuRd .q5-6{fill:rgb(152,0,67)}
.PuRd .q0-7{fill:rgb(241,238,246)}
.PuRd .q1-7{fill:rgb(212,185,218)}
.PuRd .q2-7{fill:rgb(201,148,199)}
.PuRd .q3-7{fill:rgb(223,101,176)}
.PuRd .q4-7{fill:rgb(231,41,138)}
.PuRd .q5-7{fill:rgb(206,18,86)}
.PuRd .q6-7{fill:rgb(145,0,63)}
.PuRd .q0-8{fill:rgb(247,244,249)}
.PuRd .q1-8{fill:rgb(231,225,239)}
.PuRd .q2-8{fill:rgb(212,185,218)}
.PuRd .q3-8{fill:rgb(201,148,199)}
.PuRd .q4-8{fill:rgb(223,101,176)}
.PuRd .q5-8{fill:rgb(231,41,138)}
.PuRd .q6-8{fill:rgb(206,18,86)}
.PuRd .q7-8{fill:rgb(145,0,63)}
.PuRd .q0-9{fill:rgb(247,244,249)}
.PuRd .q1-9{fill:rgb(231,225,239)}
.PuRd .q2-9{fill:rgb(212,185,218)}
.PuRd .q3-9{fill:rgb(201,148,199)}
.PuRd .q4-9{fill:rgb(223,101,176)}
.PuRd .q5-9{fill:rgb(231,41,138)}
.PuRd .q6-9{fill:rgb(206,18,86)}
.PuRd .q7-9{fill:rgb(152,0,67)}
.PuRd .q8-9{fill:rgb(103,0,31)}
.OrRd .q0-3{fill:rgb(254,232,200)}
.OrRd .q1-3{fill:rgb(253,187,132)}
.OrRd .q2-3{fill:rgb(227,74,51)}
.OrRd .q0-4{fill:rgb(254,240,217)}
.OrRd .q1-4{fill:rgb(253,204,138)}
.OrRd .q2-4{fill:rgb(252,141,89)}
.OrRd .q3-4{fill:rgb(215,48,31)}
.OrRd .q0-5{fill:rgb(254,240,217)}
.OrRd .q1-5{fill:rgb(253,204,138)}
.OrRd .q2-5{fill:rgb(252,141,89)}
.OrRd .q3-5{fill:rgb(227,74,51)}
.OrRd .q4-5{fill:rgb(179,0,0)}
.OrRd .q0-6{fill:rgb(254,240,217)}
.OrRd .q1-6{fill:rgb(253,212,158)}
.OrRd .q2-6{fill:rgb(253,187,132)}
.OrRd .q3-6{fill:rgb(252,141,89)}
.OrRd .q4-6{fill:rgb(227,74,51)}
.OrRd .q5-6{fill:rgb(179,0,0)}
.OrRd .q0-7{fill:rgb(254,240,217)}
.OrRd .q1-7{fill:rgb(253,212,158)}
.OrRd .q2-7{fill:rgb(253,187,132)}
.OrRd .q3-7{fill:rgb(252,141,89)}
.OrRd .q4-7{fill:rgb(239,101,72)}
.OrRd .q5-7{fill:rgb(215,48,31)}
.OrRd .q6-7{fill:rgb(153,0,0)}
.OrRd .q0-8{fill:rgb(255,247,236)}
.OrRd .q1-8{fill:rgb(254,232,200)}
.OrRd .q2-8{fill:rgb(253,212,158)}
.OrRd .q3-8{fill:rgb(253,187,132)}
.OrRd .q4-8{fill:rgb(252,141,89)}
.OrRd .q5-8{fill:rgb(239,101,72)}
.OrRd .q6-8{fill:rgb(215,48,31)}
.OrRd .q7-8{fill:rgb(153,0,0)}
.OrRd .q0-9{fill:rgb(255,247,236)}
.OrRd .q1-9{fill:rgb(254,232,200)}
.OrRd .q2-9{fill:rgb(253,212,158)}
.OrRd .q3-9{fill:rgb(253,187,132)}
.OrRd .q4-9{fill:rgb(252,141,89)}
.OrRd .q5-9{fill:rgb(239,101,72)}
.OrRd .q6-9{fill:rgb(215,48,31)}
.OrRd .q7-9{fill:rgb(179,0,0)}
.OrRd .q8-9{fill:rgb(127,0,0)}
.YlOrRd .q0-3{fill:rgb(255,237,160)}
.YlOrRd .q1-3{fill:rgb(254,178,76)}
.YlOrRd .q2-3{fill:rgb(240,59,32)}
.YlOrRd .q0-4{fill:rgb(255,255,178)}
.YlOrRd .q1-4{fill:rgb(254,204,92)}
.YlOrRd .q2-4{fill:rgb(253,141,60)}
.YlOrRd .q3-4{fill:rgb(227,26,28)}
.YlOrRd .q0-5{fill:rgb(255,255,178)}
.YlOrRd .q1-5{fill:rgb(254,204,92)}
.YlOrRd .q2-5{fill:rgb(253,141,60)}
.YlOrRd .q3-5{fill:rgb(240,59,32)}
.YlOrRd .q4-5{fill:rgb(189,0,38)}
.YlOrRd .q0-6{fill:rgb(255,255,178)}
.YlOrRd .q1-6{fill:rgb(254,217,118)}
.YlOrRd .q2-6{fill:rgb(254,178,76)}
.YlOrRd .q3-6{fill:rgb(253,141,60)}
.YlOrRd .q4-6{fill:rgb(240,59,32)}
.YlOrRd .q5-6{fill:rgb(189,0,38)}
.YlOrRd .q0-7{fill:rgb(255,255,178)}
.YlOrRd .q1-7{fill:rgb(254,217,118)}
.YlOrRd .q2-7{fill:rgb(254,178,76)}
.YlOrRd .q3-7{fill:rgb(253,141,60)}
.YlOrRd .q4-7{fill:rgb(252,78,42)}
.YlOrRd .q5-7{fill:rgb(227,26,28)}
.YlOrRd .q6-7{fill:rgb(177,0,38)}
.YlOrRd .q0-8{fill:rgb(255,255,204)}
.YlOrRd .q1-8{fill:rgb(255,237,160)}
.YlOrRd .q2-8{fill:rgb(254,217,118)}
.YlOrRd .q3-8{fill:rgb(254,178,76)}
.YlOrRd .q4-8{fill:rgb(253,141,60)}
.YlOrRd .q5-8{fill:rgb(252,78,42)}
.YlOrRd .q6-8{fill:rgb(227,26,28)}
.YlOrRd .q7-8{fill:rgb(177,0,38)}
.YlOrRd .q0-9{fill:rgb(255,255,204)}
.YlOrRd .q1-9{fill:rgb(255,237,160)}
.YlOrRd .q2-9{fill:rgb(254,217,118)}
.YlOrRd .q3-9{fill:rgb(254,178,76)}
.YlOrRd .q4-9{fill:rgb(253,141,60)}
.YlOrRd .q5-9{fill:rgb(252,78,42)}
.YlOrRd .q6-9{fill:rgb(227,26,28)}
.YlOrRd .q7-9{fill:rgb(189,0,38)}
.YlOrRd .q8-9{fill:rgb(128,0,38)}
.YlOrBr .q0-3{fill:rgb(255,247,188)}
.YlOrBr .q1-3{fill:rgb(254,196,79)}
.YlOrBr .q2-3{fill:rgb(217,95,14)}
.YlOrBr .q0-4{fill:rgb(255,255,212)}
.YlOrBr .q1-4{fill:rgb(254,217,142)}
.YlOrBr .q2-4{fill:rgb(254,153,41)}
.YlOrBr .q3-4{fill:rgb(204,76,2)}
.YlOrBr .q0-5{fill:rgb(255,255,212)}
.YlOrBr .q1-5{fill:rgb(254,217,142)}
.YlOrBr .q2-5{fill:rgb(254,153,41)}
.YlOrBr .q3-5{fill:rgb(217,95,14)}
.YlOrBr .q4-5{fill:rgb(153,52,4)}
.YlOrBr .q0-6{fill:rgb(255,255,212)}
.YlOrBr .q1-6{fill:rgb(254,227,145)}
.YlOrBr .q2-6{fill:rgb(254,196,79)}
.YlOrBr .q3-6{fill:rgb(254,153,41)}
.YlOrBr .q4-6{fill:rgb(217,95,14)}
.YlOrBr .q5-6{fill:rgb(153,52,4)}
.YlOrBr .q0-7{fill:rgb(255,255,212)}
.YlOrBr .q1-7{fill:rgb(254,227,145)}
.YlOrBr .q2-7{fill:rgb(254,196,79)}
.YlOrBr .q3-7{fill:rgb(254,153,41)}
.YlOrBr .q4-7{fill:rgb(236,112,20)}
.YlOrBr .q5-7{fill:rgb(204,76,2)}
.YlOrBr .q6-7{fill:rgb(140,45,4)}
.YlOrBr .q0-8{fill:rgb(255,255,229)}
.YlOrBr .q1-8{fill:rgb(255,247,188)}
.YlOrBr .q2-8{fill:rgb(254,227,145)}
.YlOrBr .q3-8{fill:rgb(254,196,79)}
.YlOrBr .q4-8{fill:rgb(254,153,41)}
.YlOrBr .q5-8{fill:rgb(236,112,20)}
.YlOrBr .q6-8{fill:rgb(204,76,2)}
.YlOrBr .q7-8{fill:rgb(140,45,4)}
.YlOrBr .q0-9{fill:rgb(255,255,229)}
.YlOrBr .q1-9{fill:rgb(255,247,188)}
.YlOrBr .q2-9{fill:rgb(254,227,145)}
.YlOrBr .q3-9{fill:rgb(254,196,79)}
.YlOrBr .q4-9{fill:rgb(254,153,41)}
.YlOrBr .q5-9{fill:rgb(236,112,20)}
.YlOrBr .q6-9{fill:rgb(204,76,2)}
.YlOrBr .q7-9{fill:rgb(153,52,4)}
.YlOrBr .q8-9{fill:rgb(102,37,6)}
.Purples .q0-3{fill:rgb(239,237,245)}
.Purples .q1-3{fill:rgb(188,189,220)}
.Purples .q2-3{fill:rgb(117,107,177)}
.Purples .q0-4{fill:rgb(242,240,247)}
.Purples .q1-4{fill:rgb(203,201,226)}
.Purples .q2-4{fill:rgb(158,154,200)}
.Purples .q3-4{fill:rgb(106,81,163)}
.Purples .q0-5{fill:rgb(242,240,247)}
.Purples .q1-5{fill:rgb(203,201,226)}
.Purples .q2-5{fill:rgb(158,154,200)}
.Purples .q3-5{fill:rgb(117,107,177)}
.Purples .q4-5{fill:rgb(84,39,143)}
.Purples .q0-6{fill:rgb(242,240,247)}
.Purples .q1-6{fill:rgb(218,218,235)}
.Purples .q2-6{fill:rgb(188,189,220)}
.Purples .q3-6{fill:rgb(158,154,200)}
.Purples .q4-6{fill:rgb(117,107,177)}
.Purples .q5-6{fill:rgb(84,39,143)}
.Purples .q0-7{fill:rgb(242,240,247)}
.Purples .q1-7{fill:rgb(218,218,235)}
.Purples .q2-7{fill:rgb(188,189,220)}
.Purples .q3-7{fill:rgb(158,154,200)}
.Purples .q4-7{fill:rgb(128,125,186)}
.Purples .q5-7{fill:rgb(106,81,163)}
.Purples .q6-7{fill:rgb(74,20,134)}
.Purples .q0-8{fill:rgb(252,251,253)}
.Purples .q1-8{fill:rgb(239,237,245)}
.Purples .q2-8{fill:rgb(218,218,235)}
.Purples .q3-8{fill:rgb(188,189,220)}
.Purples .q4-8{fill:rgb(158,154,200)}
.Purples .q5-8{fill:rgb(128,125,186)}
.Purples .q6-8{fill:rgb(106,81,163)}
.Purples .q7-8{fill:rgb(74,20,134)}
.Purples .q0-9{fill:rgb(252,251,253)}
.Purples .q1-9{fill:rgb(239,237,245)}
.Purples .q2-9{fill:rgb(218,218,235)}
.Purples .q3-9{fill:rgb(188,189,220)}
.Purples .q4-9{fill:rgb(158,154,200)}
.Purples .q5-9{fill:rgb(128,125,186)}
.Purples .q6-9{fill:rgb(106,81,163)}
.Purples .q7-9{fill:rgb(84,39,143)}
.Purples .q8-9{fill:rgb(63,0,125)}
.Blues .q0-3{fill:rgb(222,235,247)}
.Blues .q1-3{fill:rgb(158,202,225)}
.Blues .q2-3{fill:rgb(49,130,189)}
.Blues .q0-4{fill:rgb(239,243,255)}
.Blues .q1-4{fill:rgb(189,215,231)}
.Blues .q2-4{fill:rgb(107,174,214)}
.Blues .q3-4{fill:rgb(33,113,181)}
.Blues .q0-5{fill:rgb(239,243,255)}
.Blues .q1-5{fill:rgb(189,215,231)}
.Blues .q2-5{fill:rgb(107,174,214)}
.Blues .q3-5{fill:rgb(49,130,189)}
.Blues .q4-5{fill:rgb(8,81,156)}
.Blues .q0-6{fill:rgb(239,243,255)}
.Blues .q1-6{fill:rgb(198,219,239)}
.Blues .q2-6{fill:rgb(158,202,225)}
.Blues .q3-6{fill:rgb(107,174,214)}
.Blues .q4-6{fill:rgb(49,130,189)}
.Blues .q5-6{fill:rgb(8,81,156)}
.Blues .q0-7{fill:rgb(239,243,255)}
.Blues .q1-7{fill:rgb(198,219,239)}
.Blues .q2-7{fill:rgb(158,202,225)}
.Blues .q3-7{fill:rgb(107,174,214)}
.Blues .q4-7{fill:rgb(66,146,198)}
.Blues .q5-7{fill:rgb(33,113,181)}
.Blues .q6-7{fill:rgb(8,69,148)}
.Blues .q0-8{fill:rgb(247,251,255)}
.Blues .q1-8{fill:rgb(222,235,247)}
.Blues .q2-8{fill:rgb(198,219,239)}
.Blues .q3-8{fill:rgb(158,202,225)}
.Blues .q4-8{fill:rgb(107,174,214)}
.Blues .q5-8{fill:rgb(66,146,198)}
.Blues .q6-8{fill:rgb(33,113,181)}
.Blues .q7-8{fill:rgb(8,69,148)}
.Blues .q0-9{fill:rgb(247,251,255)}
.Blues .q1-9{fill:rgb(222,235,247)}
.Blues .q2-9{fill:rgb(198,219,239)}
.Blues .q3-9{fill:rgb(158,202,225)}
.Blues .q4-9{fill:rgb(107,174,214)}
.Blues .q5-9{fill:rgb(66,146,198)}
.Blues .q6-9{fill:rgb(33,113,181)}
.Blues .q7-9{fill:rgb(8,81,156)}
.Blues .q8-9{fill:rgb(8,48,107)}
.Greens .q0-3{fill:rgb(229,245,224)}
.Greens .q1-3{fill:rgb(161,217,155)}
.Greens .q2-3{fill:rgb(49,163,84)}
.Greens .q0-4{fill:rgb(237,248,233)}
.Greens .q1-4{fill:rgb(186,228,179)}
.Greens .q2-4{fill:rgb(116,196,118)}
.Greens .q3-4{fill:rgb(35,139,69)}
.Greens .q0-5{fill:rgb(237,248,233)}
.Greens .q1-5{fill:rgb(186,228,179)}
.Greens .q2-5{fill:rgb(116,196,118)}
.Greens .q3-5{fill:rgb(49,163,84)}
.Greens .q4-5{fill:rgb(0,109,44)}
.Greens .q0-6{fill:rgb(237,248,233)}
.Greens .q1-6{fill:rgb(199,233,192)}
.Greens .q2-6{fill:rgb(161,217,155)}
.Greens .q3-6{fill:rgb(116,196,118)}
.Greens .q4-6{fill:rgb(49,163,84)}
.Greens .q5-6{fill:rgb(0,109,44)}
.Greens .q0-7{fill:rgb(237,248,233)}
.Greens .q1-7{fill:rgb(199,233,192)}
.Greens .q2-7{fill:rgb(161,217,155)}
.Greens .q3-7{fill:rgb(116,196,118)}
.Greens .q4-7{fill:rgb(65,171,93)}
.Greens .q5-7{fill:rgb(35,139,69)}
.Greens .q6-7{fill:rgb(0,90,50)}
.Greens .q0-8{fill:rgb(247,252,245)}
.Greens .q1-8{fill:rgb(229,245,224)}
.Greens .q2-8{fill:rgb(199,233,192)}
.Greens .q3-8{fill:rgb(161,217,155)}
.Greens .q4-8{fill:rgb(116,196,118)}
.Greens .q5-8{fill:rgb(65,171,93)}
.Greens .q6-8{fill:rgb(35,139,69)}
.Greens .q7-8{fill:rgb(0,90,50)}
.Greens .q0-9{fill:rgb(247,252,245)}
.Greens .q1-9{fill:rgb(229,245,224)}
.Greens .q2-9{fill:rgb(199,233,192)}
.Greens .q3-9{fill:rgb(161,217,155)}
.Greens .q4-9{fill:rgb(116,196,118)}
.Greens .q5-9{fill:rgb(65,171,93)}
.Greens .q6-9{fill:rgb(35,139,69)}
.Greens .q7-9{fill:rgb(0,109,44)}
.Greens .q8-9{fill:rgb(0,68,27)}
.Oranges .q0-3{fill:rgb(254,230,206)}
.Oranges .q1-3{fill:rgb(253,174,107)}
.Oranges .q2-3{fill:rgb(230,85,13)}
.Oranges .q0-4{fill:rgb(254,237,222)}
.Oranges .q1-4{fill:rgb(253,190,133)}
.Oranges .q2-4{fill:rgb(253,141,60)}
.Oranges .q3-4{fill:rgb(217,71,1)}
.Oranges .q0-5{fill:rgb(254,237,222)}
.Oranges .q1-5{fill:rgb(253,190,133)}
.Oranges .q2-5{fill:rgb(253,141,60)}
.Oranges .q3-5{fill:rgb(230,85,13)}
.Oranges .q4-5{fill:rgb(166,54,3)}
.Oranges .q0-6{fill:rgb(254,237,222)}
.Oranges .q1-6{fill:rgb(253,208,162)}
.Oranges .q2-6{fill:rgb(253,174,107)}
.Oranges .q3-6{fill:rgb(253,141,60)}
.Oranges .q4-6{fill:rgb(230,85,13)}
.Oranges .q5-6{fill:rgb(166,54,3)}
.Oranges .q0-7{fill:rgb(254,237,222)}
.Oranges .q1-7{fill:rgb(253,208,162)}
.Oranges .q2-7{fill:rgb(253,174,107)}
.Oranges .q3-7{fill:rgb(253,141,60)}
.Oranges .q4-7{fill:rgb(241,105,19)}
.Oranges .q5-7{fill:rgb(217,72,1)}
.Oranges .q6-7{fill:rgb(140,45,4)}
.Oranges .q0-8{fill:rgb(255,245,235)}
.Oranges .q1-8{fill:rgb(254,230,206)}
.Oranges .q2-8{fill:rgb(253,208,162)}
.Oranges .q3-8{fill:rgb(253,174,107)}
.Oranges .q4-8{fill:rgb(253,141,60)}
.Oranges .q5-8{fill:rgb(241,105,19)}
.Oranges .q6-8{fill:rgb(217,72,1)}
.Oranges .q7-8{fill:rgb(140,45,4)}
.Oranges .q0-9{fill:rgb(255,245,235)}
.Oranges .q1-9{fill:rgb(254,230,206)}
.Oranges .q2-9{fill:rgb(253,208,162)}
.Oranges .q3-9{fill:rgb(253,174,107)}
.Oranges .q4-9{fill:rgb(253,141,60)}
.Oranges .q5-9{fill:rgb(241,105,19)}
.Oranges .q6-9{fill:rgb(217,72,1)}
.Oranges .q7-9{fill:rgb(166,54,3)}
.Oranges .q8-9{fill:rgb(127,39,4)}
.Reds .q0-3{fill:rgb(254,224,210)}
.Reds .q1-3{fill:rgb(252,146,114)}
.Reds .q2-3{fill:rgb(222,45,38)}
.Reds .q0-4{fill:rgb(254,229,217)}
.Reds .q1-4{fill:rgb(252,174,145)}
.Reds .q2-4{fill:rgb(251,106,74)}
.Reds .q3-4{fill:rgb(203,24,29)}
.Reds .q0-5{fill:rgb(254,229,217)}
.Reds .q1-5{fill:rgb(252,174,145)}
.Reds .q2-5{fill:rgb(251,106,74)}
.Reds .q3-5{fill:rgb(222,45,38)}
.Reds .q4-5{fill:rgb(165,15,21)}
.Reds .q0-6{fill:rgb(254,229,217)}
.Reds .q1-6{fill:rgb(252,187,161)}
.Reds .q2-6{fill:rgb(252,146,114)}
.Reds .q3-6{fill:rgb(251,106,74)}
.Reds .q4-6{fill:rgb(222,45,38)}
.Reds .q5-6{fill:rgb(165,15,21)}
.Reds .q0-7{fill:rgb(254,229,217)}
.Reds .q1-7{fill:rgb(252,187,161)}
.Reds .q2-7{fill:rgb(252,146,114)}
.Reds .q3-7{fill:rgb(251,106,74)}
.Reds .q4-7{fill:rgb(239,59,44)}
.Reds .q5-7{fill:rgb(203,24,29)}
.Reds .q6-7{fill:rgb(153,0,13)}
.Reds .q0-8{fill:rgb(255,245,240)}
.Reds .q1-8{fill:rgb(254,224,210)}
.Reds .q2-8{fill:rgb(252,187,161)}
.Reds .q3-8{fill:rgb(252,146,114)}
.Reds .q4-8{fill:rgb(251,106,74)}
.Reds .q5-8{fill:rgb(239,59,44)}
.Reds .q6-8{fill:rgb(203,24,29)}
.Reds .q7-8{fill:rgb(153,0,13)}
.Reds .q0-9{fill:rgb(255,245,240)}
.Reds .q1-9{fill:rgb(254,224,210)}
.Reds .q2-9{fill:rgb(252,187,161)}
.Reds .q3-9{fill:rgb(252,146,114)}
.Reds .q4-9{fill:rgb(251,106,74)}
.Reds .q5-9{fill:rgb(239,59,44)}
.Reds .q6-9{fill:rgb(203,24,29)}
.Reds .q7-9{fill:rgb(165,15,21)}
.Reds .q8-9{fill:rgb(103,0,13)}
.Greys .q0-3{fill:rgb(240,240,240)}
.Greys .q1-3{fill:rgb(189,189,189)}
.Greys .q2-3{fill:rgb(99,99,99)}
.Greys .q0-4{fill:rgb(247,247,247)}
.Greys .q1-4{fill:rgb(204,204,204)}
.Greys .q2-4{fill:rgb(150,150,150)}
.Greys .q3-4{fill:rgb(82,82,82)}
.Greys .q0-5{fill:rgb(247,247,247)}
.Greys .q1-5{fill:rgb(204,204,204)}
.Greys .q2-5{fill:rgb(150,150,150)}
.Greys .q3-5{fill:rgb(99,99,99)}
.Greys .q4-5{fill:rgb(37,37,37)}
.Greys .q0-6{fill:rgb(247,247,247)}
.Greys .q1-6{fill:rgb(217,217,217)}
.Greys .q2-6{fill:rgb(189,189,189)}
.Greys .q3-6{fill:rgb(150,150,150)}
.Greys .q4-6{fill:rgb(99,99,99)}
.Greys .q5-6{fill:rgb(37,37,37)}
.Greys .q0-7{fill:rgb(247,247,247)}
.Greys .q1-7{fill:rgb(217,217,217)}
.Greys .q2-7{fill:rgb(189,189,189)}
.Greys .q3-7{fill:rgb(150,150,150)}
.Greys .q4-7{fill:rgb(115,115,115)}
.Greys .q5-7{fill:rgb(82,82,82)}
.Greys .q6-7{fill:rgb(37,37,37)}
.Greys .q0-8{fill:rgb(255,255,255)}
.Greys .q1-8{fill:rgb(240,240,240)}
.Greys .q2-8{fill:rgb(217,217,217)}
.Greys .q3-8{fill:rgb(189,189,189)}
.Greys .q4-8{fill:rgb(150,150,150)}
.Greys .q5-8{fill:rgb(115,115,115)}
.Greys .q6-8{fill:rgb(82,82,82)}
.Greys .q7-8{fill:rgb(37,37,37)}
.Greys .q0-9{fill:rgb(255,255,255)}
.Greys .q1-9{fill:rgb(240,240,240)}
.Greys .q2-9{fill:rgb(217,217,217)}
.Greys .q3-9{fill:rgb(189,189,189)}
.Greys .q4-9{fill:rgb(150,150,150)}
.Greys .q5-9{fill:rgb(115,115,115)}
.Greys .q6-9{fill:rgb(82,82,82)}
.Greys .q7-9{fill:rgb(37,37,37)}
.Greys .q8-9{fill:rgb(0,0,0)}
.PuOr .q0-3{fill:rgb(241,163,64)}
.PuOr .q1-3{fill:rgb(247,247,247)}
.PuOr .q2-3{fill:rgb(153,142,195)}
.PuOr .q0-4{fill:rgb(230,97,1)}
.PuOr .q1-4{fill:rgb(253,184,99)}
.PuOr .q2-4{fill:rgb(178,171,210)}
.PuOr .q3-4{fill:rgb(94,60,153)}
.PuOr .q0-5{fill:rgb(230,97,1)}
.PuOr .q1-5{fill:rgb(253,184,99)}
.PuOr .q2-5{fill:rgb(247,247,247)}
.PuOr .q3-5{fill:rgb(178,171,210)}
.PuOr .q4-5{fill:rgb(94,60,153)}
.PuOr .q0-6{fill:rgb(179,88,6)}
.PuOr .q1-6{fill:rgb(241,163,64)}
.PuOr .q2-6{fill:rgb(254,224,182)}
.PuOr .q3-6{fill:rgb(216,218,235)}
.PuOr .q4-6{fill:rgb(153,142,195)}
.PuOr .q5-6{fill:rgb(84,39,136)}
.PuOr .q0-7{fill:rgb(179,88,6)}
.PuOr .q1-7{fill:rgb(241,163,64)}
.PuOr .q2-7{fill:rgb(254,224,182)}
.PuOr .q3-7{fill:rgb(247,247,247)}
.PuOr .q4-7{fill:rgb(216,218,235)}
.PuOr .q5-7{fill:rgb(153,142,195)}
.PuOr .q6-7{fill:rgb(84,39,136)}
.PuOr .q0-8{fill:rgb(179,88,6)}
.PuOr .q1-8{fill:rgb(224,130,20)}
.PuOr .q2-8{fill:rgb(253,184,99)}
.PuOr .q3-8{fill:rgb(254,224,182)}
.PuOr .q4-8{fill:rgb(216,218,235)}
.PuOr .q5-8{fill:rgb(178,171,210)}
.PuOr .q6-8{fill:rgb(128,115,172)}
.PuOr .q7-8{fill:rgb(84,39,136)}
.PuOr .q0-9{fill:rgb(179,88,6)}
.PuOr .q1-9{fill:rgb(224,130,20)}
.PuOr .q2-9{fill:rgb(253,184,99)}
.PuOr .q3-9{fill:rgb(254,224,182)}
.PuOr .q4-9{fill:rgb(247,247,247)}
.PuOr .q5-9{fill:rgb(216,218,235)}
.PuOr .q6-9{fill:rgb(178,171,210)}
.PuOr .q7-9{fill:rgb(128,115,172)}
.PuOr .q8-9{fill:rgb(84,39,136)}
.PuOr .q0-10{fill:rgb(127,59,8)}
.PuOr .q1-10{fill:rgb(179,88,6)}
.PuOr .q2-10{fill:rgb(224,130,20)}
.PuOr .q3-10{fill:rgb(253,184,99)}
.PuOr .q4-10{fill:rgb(254,224,182)}
.PuOr .q5-10{fill:rgb(216,218,235)}
.PuOr .q6-10{fill:rgb(178,171,210)}
.PuOr .q7-10{fill:rgb(128,115,172)}
.PuOr .q8-10{fill:rgb(84,39,136)}
.PuOr .q9-10{fill:rgb(45,0,75)}
.PuOr .q0-11{fill:rgb(127,59,8)}
.PuOr .q1-11{fill:rgb(179,88,6)}
.PuOr .q2-11{fill:rgb(224,130,20)}
.PuOr .q3-11{fill:rgb(253,184,99)}
.PuOr .q4-11{fill:rgb(254,224,182)}
.PuOr .q5-11{fill:rgb(247,247,247)}
.PuOr .q6-11{fill:rgb(216,218,235)}
.PuOr .q7-11{fill:rgb(178,171,210)}
.PuOr .q8-11{fill:rgb(128,115,172)}
.PuOr .q9-11{fill:rgb(84,39,136)}
.PuOr .q10-11{fill:rgb(45,0,75)}
.BrBG .q0-3{fill:rgb(216,179,101)}
.BrBG .q1-3{fill:rgb(245,245,245)}
.BrBG .q2-3{fill:rgb(90,180,172)}
.BrBG .q0-4{fill:rgb(166,97,26)}
.BrBG .q1-4{fill:rgb(223,194,125)}
.BrBG .q2-4{fill:rgb(128,205,193)}
.BrBG .q3-4{fill:rgb(1,133,113)}
.BrBG .q0-5{fill:rgb(166,97,26)}
.BrBG .q1-5{fill:rgb(223,194,125)}
.BrBG .q2-5{fill:rgb(245,245,245)}
.BrBG .q3-5{fill:rgb(128,205,193)}
.BrBG .q4-5{fill:rgb(1,133,113)}
.BrBG .q0-6{fill:rgb(140,81,10)}
.BrBG .q1-6{fill:rgb(216,179,101)}
.BrBG .q2-6{fill:rgb(246,232,195)}
.BrBG .q3-6{fill:rgb(199,234,229)}
.BrBG .q4-6{fill:rgb(90,180,172)}
.BrBG .q5-6{fill:rgb(1,102,94)}
.BrBG .q0-7{fill:rgb(140,81,10)}
.BrBG .q1-7{fill:rgb(216,179,101)}
.BrBG .q2-7{fill:rgb(246,232,195)}
.BrBG .q3-7{fill:rgb(245,245,245)}
.BrBG .q4-7{fill:rgb(199,234,229)}
.BrBG .q5-7{fill:rgb(90,180,172)}
.BrBG .q6-7{fill:rgb(1,102,94)}
.BrBG .q0-8{fill:rgb(140,81,10)}
.BrBG .q1-8{fill:rgb(191,129,45)}
.BrBG .q2-8{fill:rgb(223,194,125)}
.BrBG .q3-8{fill:rgb(246,232,195)}
.BrBG .q4-8{fill:rgb(199,234,229)}
.BrBG .q5-8{fill:rgb(128,205,193)}
.BrBG .q6-8{fill:rgb(53,151,143)}
.BrBG .q7-8{fill:rgb(1,102,94)}
.BrBG .q0-9{fill:rgb(140,81,10)}
.BrBG .q1-9{fill:rgb(191,129,45)}
.BrBG .q2-9{fill:rgb(223,194,125)}
.BrBG .q3-9{fill:rgb(246,232,195)}
.BrBG .q4-9{fill:rgb(245,245,245)}
.BrBG .q5-9{fill:rgb(199,234,229)}
.BrBG .q6-9{fill:rgb(128,205,193)}
.BrBG .q7-9{fill:rgb(53,151,143)}
.BrBG .q8-9{fill:rgb(1,102,94)}
.BrBG .q0-10{fill:rgb(84,48,5)}
.BrBG .q1-10{fill:rgb(140,81,10)}
.BrBG .q2-10{fill:rgb(191,129,45)}
.BrBG .q3-10{fill:rgb(223,194,125)}
.BrBG .q4-10{fill:rgb(246,232,195)}
.BrBG .q5-10{fill:rgb(199,234,229)}
.BrBG .q6-10{fill:rgb(128,205,193)}
.BrBG .q7-10{fill:rgb(53,151,143)}
.BrBG .q8-10{fill:rgb(1,102,94)}
.BrBG .q9-10{fill:rgb(0,60,48)}
.BrBG .q0-11{fill:rgb(84,48,5)}
.BrBG .q1-11{fill:rgb(140,81,10)}
.BrBG .q2-11{fill:rgb(191,129,45)}
.BrBG .q3-11{fill:rgb(223,194,125)}
.BrBG .q4-11{fill:rgb(246,232,195)}
.BrBG .q5-11{fill:rgb(245,245,245)}
.BrBG .q6-11{fill:rgb(199,234,229)}
.BrBG .q7-11{fill:rgb(128,205,193)}
.BrBG .q8-11{fill:rgb(53,151,143)}
.BrBG .q9-11{fill:rgb(1,102,94)}
.BrBG .q10-11{fill:rgb(0,60,48)}
.PRGn .q0-3{fill:rgb(175,141,195)}
.PRGn .q1-3{fill:rgb(247,247,247)}
.PRGn .q2-3{fill:rgb(127,191,123)}
.PRGn .q0-4{fill:rgb(123,50,148)}
.PRGn .q1-4{fill:rgb(194,165,207)}
.PRGn .q2-4{fill:rgb(166,219,160)}
.PRGn .q3-4{fill:rgb(0,136,55)}
.PRGn .q0-5{fill:rgb(123,50,148)}
.PRGn .q1-5{fill:rgb(194,165,207)}
.PRGn .q2-5{fill:rgb(247,247,247)}
.PRGn .q3-5{fill:rgb(166,219,160)}
.PRGn .q4-5{fill:rgb(0,136,55)}
.PRGn .q0-6{fill:rgb(118,42,131)}
.PRGn .q1-6{fill:rgb(175,141,195)}
.PRGn .q2-6{fill:rgb(231,212,232)}
.PRGn .q3-6{fill:rgb(217,240,211)}
.PRGn .q4-6{fill:rgb(127,191,123)}
.PRGn .q5-6{fill:rgb(27,120,55)}
.PRGn .q0-7{fill:rgb(118,42,131)}
.PRGn .q1-7{fill:rgb(175,141,195)}
.PRGn .q2-7{fill:rgb(231,212,232)}
.PRGn .q3-7{fill:rgb(247,247,247)}
.PRGn .q4-7{fill:rgb(217,240,211)}
.PRGn .q5-7{fill:rgb(127,191,123)}
.PRGn .q6-7{fill:rgb(27,120,55)}
.PRGn .q0-8{fill:rgb(118,42,131)}
.PRGn .q1-8{fill:rgb(153,112,171)}
.PRGn .q2-8{fill:rgb(194,165,207)}
.PRGn .q3-8{fill:rgb(231,212,232)}
.PRGn .q4-8{fill:rgb(217,240,211)}
.PRGn .q5-8{fill:rgb(166,219,160)}
.PRGn .q6-8{fill:rgb(90,174,97)}
.PRGn .q7-8{fill:rgb(27,120,55)}
.PRGn .q0-9{fill:rgb(118,42,131)}
.PRGn .q1-9{fill:rgb(153,112,171)}
.PRGn .q2-9{fill:rgb(194,165,207)}
.PRGn .q3-9{fill:rgb(231,212,232)}
.PRGn .q4-9{fill:rgb(247,247,247)}
.PRGn .q5-9{fill:rgb(217,240,211)}
.PRGn .q6-9{fill:rgb(166,219,160)}
.PRGn .q7-9{fill:rgb(90,174,97)}
.PRGn .q8-9{fill:rgb(27,120,55)}
.PRGn .q0-10{fill:rgb(64,0,75)}
.PRGn .q1-10{fill:rgb(118,42,131)}
.PRGn .q2-10{fill:rgb(153,112,171)}
.PRGn .q3-10{fill:rgb(194,165,207)}
.PRGn .q4-10{fill:rgb(231,212,232)}
.PRGn .q5-10{fill:rgb(217,240,211)}
.PRGn .q6-10{fill:rgb(166,219,160)}
.PRGn .q7-10{fill:rgb(90,174,97)}
.PRGn .q8-10{fill:rgb(27,120,55)}
.PRGn .q9-10{fill:rgb(0,68,27)}
.PRGn .q0-11{fill:rgb(64,0,75)}
.PRGn .q1-11{fill:rgb(118,42,131)}
.PRGn .q2-11{fill:rgb(153,112,171)}
.PRGn .q3-11{fill:rgb(194,165,207)}
.PRGn .q4-11{fill:rgb(231,212,232)}
.PRGn .q5-11{fill:rgb(247,247,247)}
.PRGn .q6-11{fill:rgb(217,240,211)}
.PRGn .q7-11{fill:rgb(166,219,160)}
.PRGn .q8-11{fill:rgb(90,174,97)}
.PRGn .q9-11{fill:rgb(27,120,55)}
.PRGn .q10-11{fill:rgb(0,68,27)}
.PiYG .q0-3{fill:rgb(233,163,201)}
.PiYG .q1-3{fill:rgb(247,247,247)}
.PiYG .q2-3{fill:rgb(161,215,106)}
.PiYG .q0-4{fill:rgb(208,28,139)}
.PiYG .q1-4{fill:rgb(241,182,218)}
.PiYG .q2-4{fill:rgb(184,225,134)}
.PiYG .q3-4{fill:rgb(77,172,38)}
.PiYG .q0-5{fill:rgb(208,28,139)}
.PiYG .q1-5{fill:rgb(241,182,218)}
.PiYG .q2-5{fill:rgb(247,247,247)}
.PiYG .q3-5{fill:rgb(184,225,134)}
.PiYG .q4-5{fill:rgb(77,172,38)}
.PiYG .q0-6{fill:rgb(197,27,125)}
.PiYG .q1-6{fill:rgb(233,163,201)}
.PiYG .q2-6{fill:rgb(253,224,239)}
.PiYG .q3-6{fill:rgb(230,245,208)}
.PiYG .q4-6{fill:rgb(161,215,106)}
.PiYG .q5-6{fill:rgb(77,146,33)}
.PiYG .q0-7{fill:rgb(197,27,125)}
.PiYG .q1-7{fill:rgb(233,163,201)}
.PiYG .q2-7{fill:rgb(253,224,239)}
.PiYG .q3-7{fill:rgb(247,247,247)}
.PiYG .q4-7{fill:rgb(230,245,208)}
.PiYG .q5-7{fill:rgb(161,215,106)}
.PiYG .q6-7{fill:rgb(77,146,33)}
.PiYG .q0-8{fill:rgb(197,27,125)}
.PiYG .q1-8{fill:rgb(222,119,174)}
.PiYG .q2-8{fill:rgb(241,182,218)}
.PiYG .q3-8{fill:rgb(253,224,239)}
.PiYG .q4-8{fill:rgb(230,245,208)}
.PiYG .q5-8{fill:rgb(184,225,134)}
.PiYG .q6-8{fill:rgb(127,188,65)}
.PiYG .q7-8{fill:rgb(77,146,33)}
.PiYG .q0-9{fill:rgb(197,27,125)}
.PiYG .q1-9{fill:rgb(222,119,174)}
.PiYG .q2-9{fill:rgb(241,182,218)}
.PiYG .q3-9{fill:rgb(253,224,239)}
.PiYG .q4-9{fill:rgb(247,247,247)}
.PiYG .q5-9{fill:rgb(230,245,208)}
.PiYG .q6-9{fill:rgb(184,225,134)}
.PiYG .q7-9{fill:rgb(127,188,65)}
.PiYG .q8-9{fill:rgb(77,146,33)}
.PiYG .q0-10{fill:rgb(142,1,82)}
.PiYG .q1-10{fill:rgb(197,27,125)}
.PiYG .q2-10{fill:rgb(222,119,174)}
.PiYG .q3-10{fill:rgb(241,182,218)}
.PiYG .q4-10{fill:rgb(253,224,239)}
.PiYG .q5-10{fill:rgb(230,245,208)}
.PiYG .q6-10{fill:rgb(184,225,134)}
.PiYG .q7-10{fill:rgb(127,188,65)}
.PiYG .q8-10{fill:rgb(77,146,33)}
.PiYG .q9-10{fill:rgb(39,100,25)}
.PiYG .q0-11{fill:rgb(142,1,82)}
.PiYG .q1-11{fill:rgb(197,27,125)}
.PiYG .q2-11{fill:rgb(222,119,174)}
.PiYG .q3-11{fill:rgb(241,182,218)}
.PiYG .q4-11{fill:rgb(253,224,239)}
.PiYG .q5-11{fill:rgb(247,247,247)}
.PiYG .q6-11{fill:rgb(230,245,208)}
.PiYG .q7-11{fill:rgb(184,225,134)}
.PiYG .q8-11{fill:rgb(127,188,65)}
.PiYG .q9-11{fill:rgb(77,146,33)}
.PiYG .q10-11{fill:rgb(39,100,25)}
.RdBu .q0-3{fill:rgb(239,138,98)}
.RdBu .q1-3{fill:rgb(247,247,247)}
.RdBu .q2-3{fill:rgb(103,169,207)}
.RdBu .q0-4{fill:rgb(202,0,32)}
.RdBu .q1-4{fill:rgb(244,165,130)}
.RdBu .q2-4{fill:rgb(146,197,222)}
.RdBu .q3-4{fill:rgb(5,113,176)}
.RdBu .q0-5{fill:rgb(202,0,32)}
.RdBu .q1-5{fill:rgb(244,165,130)}
.RdBu .q2-5{fill:rgb(247,247,247)}
.RdBu .q3-5{fill:rgb(146,197,222)}
.RdBu .q4-5{fill:rgb(5,113,176)}
.RdBu .q0-6{fill:rgb(178,24,43)}
.RdBu .q1-6{fill:rgb(239,138,98)}
.RdBu .q2-6{fill:rgb(253,219,199)}
.RdBu .q3-6{fill:rgb(209,229,240)}
.RdBu .q4-6{fill:rgb(103,169,207)}
.RdBu .q5-6{fill:rgb(33,102,172)}
.RdBu .q0-7{fill:rgb(178,24,43)}
.RdBu .q1-7{fill:rgb(239,138,98)}
.RdBu .q2-7{fill:rgb(253,219,199)}
.RdBu .q3-7{fill:rgb(247,247,247)}
.RdBu .q4-7{fill:rgb(209,229,240)}
.RdBu .q5-7{fill:rgb(103,169,207)}
.RdBu .q6-7{fill:rgb(33,102,172)}
.RdBu .q0-8{fill:rgb(178,24,43)}
.RdBu .q1-8{fill:rgb(214,96,77)}
.RdBu .q2-8{fill:rgb(244,165,130)}
.RdBu .q3-8{fill:rgb(253,219,199)}
.RdBu .q4-8{fill:rgb(209,229,240)}
.RdBu .q5-8{fill:rgb(146,197,222)}
.RdBu .q6-8{fill:rgb(67,147,195)}
.RdBu .q7-8{fill:rgb(33,102,172)}
.RdBu .q0-9{fill:rgb(178,24,43)}
.RdBu .q1-9{fill:rgb(214,96,77)}
.RdBu .q2-9{fill:rgb(244,165,130)}
.RdBu .q3-9{fill:rgb(253,219,199)}
.RdBu .q4-9{fill:rgb(247,247,247)}
.RdBu .q5-9{fill:rgb(209,229,240)}
.RdBu .q6-9{fill:rgb(146,197,222)}
.RdBu .q7-9{fill:rgb(67,147,195)}
.RdBu .q8-9{fill:rgb(33,102,172)}
.RdBu .q0-10{fill:rgb(103,0,31)}
.RdBu .q1-10{fill:rgb(178,24,43)}
.RdBu .q2-10{fill:rgb(214,96,77)}
.RdBu .q3-10{fill:rgb(244,165,130)}
.RdBu .q4-10{fill:rgb(253,219,199)}
.RdBu .q5-10{fill:rgb(209,229,240)}
.RdBu .q6-10{fill:rgb(146,197,222)}
.RdBu .q7-10{fill:rgb(67,147,195)}
.RdBu .q8-10{fill:rgb(33,102,172)}
.RdBu .q9-10{fill:rgb(5,48,97)}
.RdBu .q0-11{fill:rgb(103,0,31)}
.RdBu .q1-11{fill:rgb(178,24,43)}
.RdBu .q2-11{fill:rgb(214,96,77)}
.RdBu .q3-11{fill:rgb(244,165,130)}
.RdBu .q4-11{fill:rgb(253,219,199)}
.RdBu .q5-11{fill:rgb(247,247,247)}
.RdBu .q6-11{fill:rgb(209,229,240)}
.RdBu .q7-11{fill:rgb(146,197,222)}
.RdBu .q8-11{fill:rgb(67,147,195)}
.RdBu .q9-11{fill:rgb(33,102,172)}
.RdBu .q10-11{fill:rgb(5,48,97)}
.RdGy .q0-3{fill:rgb(239,138,98)}
.RdGy .q1-3{fill:rgb(255,255,255)}
.RdGy .q2-3{fill:rgb(153,153,153)}
.RdGy .q0-4{fill:rgb(202,0,32)}
.RdGy .q1-4{fill:rgb(244,165,130)}
.RdGy .q2-4{fill:rgb(186,186,186)}
.RdGy .q3-4{fill:rgb(64,64,64)}
.RdGy .q0-5{fill:rgb(202,0,32)}
.RdGy .q1-5{fill:rgb(244,165,130)}
.RdGy .q2-5{fill:rgb(255,255,255)}
.RdGy .q3-5{fill:rgb(186,186,186)}
.RdGy .q4-5{fill:rgb(64,64,64)}
.RdGy .q0-6{fill:rgb(178,24,43)}
.RdGy .q1-6{fill:rgb(239,138,98)}
.RdGy .q2-6{fill:rgb(253,219,199)}
.RdGy .q3-6{fill:rgb(224,224,224)}
.RdGy .q4-6{fill:rgb(153,153,153)}
.RdGy .q5-6{fill:rgb(77,77,77)}
.RdGy .q0-7{fill:rgb(178,24,43)}
.RdGy .q1-7{fill:rgb(239,138,98)}
.RdGy .q2-7{fill:rgb(253,219,199)}
.RdGy .q3-7{fill:rgb(255,255,255)}
.RdGy .q4-7{fill:rgb(224,224,224)}
.RdGy .q5-7{fill:rgb(153,153,153)}
.RdGy .q6-7{fill:rgb(77,77,77)}
.RdGy .q0-8{fill:rgb(178,24,43)}
.RdGy .q1-8{fill:rgb(214,96,77)}
.RdGy .q2-8{fill:rgb(244,165,130)}
.RdGy .q3-8{fill:rgb(253,219,199)}
.RdGy .q4-8{fill:rgb(224,224,224)}
.RdGy .q5-8{fill:rgb(186,186,186)}
.RdGy .q6-8{fill:rgb(135,135,135)}
.RdGy .q7-8{fill:rgb(77,77,77)}
.RdGy .q0-9{fill:rgb(178,24,43)}
.RdGy .q1-9{fill:rgb(214,96,77)}
.RdGy .q2-9{fill:rgb(244,165,130)}
.RdGy .q3-9{fill:rgb(253,219,199)}
.RdGy .q4-9{fill:rgb(255,255,255)}
.RdGy .q5-9{fill:rgb(224,224,224)}
.RdGy .q6-9{fill:rgb(186,186,186)}
.RdGy .q7-9{fill:rgb(135,135,135)}
.RdGy .q8-9{fill:rgb(77,77,77)}
.RdGy .q0-10{fill:rgb(103,0,31)}
.RdGy .q1-10{fill:rgb(178,24,43)}
.RdGy .q2-10{fill:rgb(214,96,77)}
.RdGy .q3-10{fill:rgb(244,165,130)}
.RdGy .q4-10{fill:rgb(253,219,199)}
.RdGy .q5-10{fill:rgb(224,224,224)}
.RdGy .q6-10{fill:rgb(186,186,186)}
.RdGy .q7-10{fill:rgb(135,135,135)}
.RdGy .q8-10{fill:rgb(77,77,77)}
.RdGy .q9-10{fill:rgb(26,26,26)}
.RdGy .q0-11{fill:rgb(103,0,31)}
.RdGy .q1-11{fill:rgb(178,24,43)}
.RdGy .q2-11{fill:rgb(214,96,77)}
.RdGy .q3-11{fill:rgb(244,165,130)}
.RdGy .q4-11{fill:rgb(253,219,199)}
.RdGy .q5-11{fill:rgb(255,255,255)}
.RdGy .q6-11{fill:rgb(224,224,224)}
.RdGy .q7-11{fill:rgb(186,186,186)}
.RdGy .q8-11{fill:rgb(135,135,135)}
.RdGy .q9-11{fill:rgb(77,77,77)}
.RdGy .q10-11{fill:rgb(26,26,26)}
.RdYlBu .q0-3{fill:rgb(252,141,89)}
.RdYlBu .q1-3{fill:rgb(255,255,191)}
.RdYlBu .q2-3{fill:rgb(145,191,219)}
.RdYlBu .q0-4{fill:rgb(215,25,28)}
.RdYlBu .q1-4{fill:rgb(253,174,97)}
.RdYlBu .q2-4{fill:rgb(171,217,233)}
.RdYlBu .q3-4{fill:rgb(44,123,182)}
.RdYlBu .q0-5{fill:rgb(215,25,28)}
.RdYlBu .q1-5{fill:rgb(253,174,97)}
.RdYlBu .q2-5{fill:rgb(255,255,191)}
.RdYlBu .q3-5{fill:rgb(171,217,233)}
.RdYlBu .q4-5{fill:rgb(44,123,182)}
.RdYlBu .q0-6{fill:rgb(215,48,39)}
.RdYlBu .q1-6{fill:rgb(252,141,89)}
.RdYlBu .q2-6{fill:rgb(254,224,144)}
.RdYlBu .q3-6{fill:rgb(224,243,248)}
.RdYlBu .q4-6{fill:rgb(145,191,219)}
.RdYlBu .q5-6{fill:rgb(69,117,180)}
.RdYlBu .q0-7{fill:rgb(215,48,39)}
.RdYlBu .q1-7{fill:rgb(252,141,89)}
.RdYlBu .q2-7{fill:rgb(254,224,144)}
.RdYlBu .q3-7{fill:rgb(255,255,191)}
.RdYlBu .q4-7{fill:rgb(224,243,248)}
.RdYlBu .q5-7{fill:rgb(145,191,219)}
.RdYlBu .q6-7{fill:rgb(69,117,180)}
.RdYlBu .q0-8{fill:rgb(215,48,39)}
.RdYlBu .q1-8{fill:rgb(244,109,67)}
.RdYlBu .q2-8{fill:rgb(253,174,97)}
.RdYlBu .q3-8{fill:rgb(254,224,144)}
.RdYlBu .q4-8{fill:rgb(224,243,248)}
.RdYlBu .q5-8{fill:rgb(171,217,233)}
.RdYlBu .q6-8{fill:rgb(116,173,209)}
.RdYlBu .q7-8{fill:rgb(69,117,180)}
.RdYlBu .q0-9{fill:rgb(215,48,39)}
.RdYlBu .q1-9{fill:rgb(244,109,67)}
.RdYlBu .q2-9{fill:rgb(253,174,97)}
.RdYlBu .q3-9{fill:rgb(254,224,144)}
.RdYlBu .q4-9{fill:rgb(255,255,191)}
.RdYlBu .q5-9{fill:rgb(224,243,248)}
.RdYlBu .q6-9{fill:rgb(171,217,233)}
.RdYlBu .q7-9{fill:rgb(116,173,209)}
.RdYlBu .q8-9{fill:rgb(69,117,180)}
.RdYlBu .q0-10{fill:rgb(165,0,38)}
.RdYlBu .q1-10{fill:rgb(215,48,39)}
.RdYlBu .q2-10{fill:rgb(244,109,67)}
.RdYlBu .q3-10{fill:rgb(253,174,97)}
.RdYlBu .q4-10{fill:rgb(254,224,144)}
.RdYlBu .q5-10{fill:rgb(224,243,248)}
.RdYlBu .q6-10{fill:rgb(171,217,233)}
.RdYlBu .q7-10{fill:rgb(116,173,209)}
.RdYlBu .q8-10{fill:rgb(69,117,180)}
.RdYlBu .q9-10{fill:rgb(49,54,149)}
.RdYlBu .q0-11{fill:rgb(165,0,38)}
.RdYlBu .q1-11{fill:rgb(215,48,39)}
.RdYlBu .q2-11{fill:rgb(244,109,67)}
.RdYlBu .q3-11{fill:rgb(253,174,97)}
.RdYlBu .q4-11{fill:rgb(254,224,144)}
.RdYlBu .q5-11{fill:rgb(255,255,191)}
.RdYlBu .q6-11{fill:rgb(224,243,248)}
.RdYlBu .q7-11{fill:rgb(171,217,233)}
.RdYlBu .q8-11{fill:rgb(116,173,209)}
.RdYlBu .q9-11{fill:rgb(69,117,180)}
.RdYlBu .q10-11{fill:rgb(49,54,149)}
.Spectral .q0-3{fill:rgb(252,141,89)}
.Spectral .q1-3{fill:rgb(255,255,191)}
.Spectral .q2-3{fill:rgb(153,213,148)}
.Spectral .q0-4{fill:rgb(215,25,28)}
.Spectral .q1-4{fill:rgb(253,174,97)}
.Spectral .q2-4{fill:rgb(171,221,164)}
.Spectral .q3-4{fill:rgb(43,131,186)}
.Spectral .q0-5{fill:rgb(215,25,28)}
.Spectral .q1-5{fill:rgb(253,174,97)}
.Spectral .q2-5{fill:rgb(255,255,191)}
.Spectral .q3-5{fill:rgb(171,221,164)}
.Spectral .q4-5{fill:rgb(43,131,186)}
.Spectral .q0-6{fill:rgb(213,62,79)}
.Spectral .q1-6{fill:rgb(252,141,89)}
.Spectral .q2-6{fill:rgb(254,224,139)}
.Spectral .q3-6{fill:rgb(230,245,152)}
.Spectral .q4-6{fill:rgb(153,213,148)}
.Spectral .q5-6{fill:rgb(50,136,189)}
.Spectral .q0-7{fill:rgb(213,62,79)}
.Spectral .q1-7{fill:rgb(252,141,89)}
.Spectral .q2-7{fill:rgb(254,224,139)}
.Spectral .q3-7{fill:rgb(255,255,191)}
.Spectral .q4-7{fill:rgb(230,245,152)}
.Spectral .q5-7{fill:rgb(153,213,148)}
.Spectral .q6-7{fill:rgb(50,136,189)}
.Spectral .q0-8{fill:rgb(213,62,79)}
.Spectral .q1-8{fill:rgb(244,109,67)}
.Spectral .q2-8{fill:rgb(253,174,97)}
.Spectral .q3-8{fill:rgb(254,224,139)}
.Spectral .q4-8{fill:rgb(230,245,152)}
.Spectral .q5-8{fill:rgb(171,221,164)}
.Spectral .q6-8{fill:rgb(102,194,165)}
.Spectral .q7-8{fill:rgb(50,136,189)}
.Spectral .q0-9{fill:rgb(213,62,79)}
.Spectral .q1-9{fill:rgb(244,109,67)}
.Spectral .q2-9{fill:rgb(253,174,97)}
.Spectral .q3-9{fill:rgb(254,224,139)}
.Spectral .q4-9{fill:rgb(255,255,191)}
.Spectral .q5-9{fill:rgb(230,245,152)}
.Spectral .q6-9{fill:rgb(171,221,164)}
.Spectral .q7-9{fill:rgb(102,194,165)}
.Spectral .q8-9{fill:rgb(50,136,189)}
.Spectral .q0-10{fill:rgb(158,1,66)}
.Spectral .q1-10{fill:rgb(213,62,79)}
.Spectral .q2-10{fill:rgb(244,109,67)}
.Spectral .q3-10{fill:rgb(253,174,97)}
.Spectral .q4-10{fill:rgb(254,224,139)}
.Spectral .q5-10{fill:rgb(230,245,152)}
.Spectral .q6-10{fill:rgb(171,221,164)}
.Spectral .q7-10{fill:rgb(102,194,165)}
.Spectral .q8-10{fill:rgb(50,136,189)}
.Spectral .q9-10{fill:rgb(94,79,162)}
.Spectral .q0-11{fill:rgb(158,1,66)}
.Spectral .q1-11{fill:rgb(213,62,79)}
.Spectral .q2-11{fill:rgb(244,109,67)}
.Spectral .q3-11{fill:rgb(253,174,97)}
.Spectral .q4-11{fill:rgb(254,224,139)}
.Spectral .q5-11{fill:rgb(255,255,191)}
.Spectral .q6-11{fill:rgb(230,245,152)}
.Spectral .q7-11{fill:rgb(171,221,164)}
.Spectral .q8-11{fill:rgb(102,194,165)}
.Spectral .q9-11{fill:rgb(50,136,189)}
.Spectral .q10-11{fill:rgb(94,79,162)}
.RdYlGn .q0-3{fill:rgb(252,141,89)}
.RdYlGn .q1-3{fill:rgb(255,255,191)}
.RdYlGn .q2-3{fill:rgb(145,207,96)}
.RdYlGn .q0-4{fill:rgb(215,25,28)}
.RdYlGn .q1-4{fill:rgb(253,174,97)}
.RdYlGn .q2-4{fill:rgb(166,217,106)}
.RdYlGn .q3-4{fill:rgb(26,150,65)}
.RdYlGn .q0-5{fill:rgb(215,25,28)}
.RdYlGn .q1-5{fill:rgb(253,174,97)}
.RdYlGn .q2-5{fill:rgb(255,255,191)}
.RdYlGn .q3-5{fill:rgb(166,217,106)}
.RdYlGn .q4-5{fill:rgb(26,150,65)}
.RdYlGn .q0-6{fill:rgb(215,48,39)}
.RdYlGn .q1-6{fill:rgb(252,141,89)}
.RdYlGn .q2-6{fill:rgb(254,224,139)}
.RdYlGn .q3-6{fill:rgb(217,239,139)}
.RdYlGn .q4-6{fill:rgb(145,207,96)}
.RdYlGn .q5-6{fill:rgb(26,152,80)}
.RdYlGn .q0-7{fill:rgb(215,48,39)}
.RdYlGn .q1-7{fill:rgb(252,141,89)}
.RdYlGn .q2-7{fill:rgb(254,224,139)}
.RdYlGn .q3-7{fill:rgb(255,255,191)}
.RdYlGn .q4-7{fill:rgb(217,239,139)}
.RdYlGn .q5-7{fill:rgb(145,207,96)}
.RdYlGn .q6-7{fill:rgb(26,152,80)}
.RdYlGn .q0-8{fill:rgb(215,48,39)}
.RdYlGn .q1-8{fill:rgb(244,109,67)}
.RdYlGn .q2-8{fill:rgb(253,174,97)}
.RdYlGn .q3-8{fill:rgb(254,224,139)}
.RdYlGn .q4-8{fill:rgb(217,239,139)}
.RdYlGn .q5-8{fill:rgb(166,217,106)}
.RdYlGn .q6-8{fill:rgb(102,189,99)}
.RdYlGn .q7-8{fill:rgb(26,152,80)}
.RdYlGn .q0-9{fill:rgb(215,48,39)}
.RdYlGn .q1-9{fill:rgb(244,109,67)}
.RdYlGn .q2-9{fill:rgb(253,174,97)}
.RdYlGn .q3-9{fill:rgb(254,224,139)}
.RdYlGn .q4-9{fill:rgb(255,255,191)}
.RdYlGn .q5-9{fill:rgb(217,239,139)}
.RdYlGn .q6-9{fill:rgb(166,217,106)}
.RdYlGn .q7-9{fill:rgb(102,189,99)}
.RdYlGn .q8-9{fill:rgb(26,152,80)}
.RdYlGn .q0-10{fill:rgb(165,0,38)}
.RdYlGn .q1-10{fill:rgb(215,48,39)}
.RdYlGn .q2-10{fill:rgb(244,109,67)}
.RdYlGn .q3-10{fill:rgb(253,174,97)}
.RdYlGn .q4-10{fill:rgb(254,224,139)}
.RdYlGn .q5-10{fill:rgb(217,239,139)}
.RdYlGn .q6-10{fill:rgb(166,217,106)}
.RdYlGn .q7-10{fill:rgb(102,189,99)}
.RdYlGn .q8-10{fill:rgb(26,152,80)}
.RdYlGn .q9-10{fill:rgb(0,104,55)}
.RdYlGn .q0-11{fill:rgb(165,0,38)}
.RdYlGn .q1-11{fill:rgb(215,48,39)}
.RdYlGn .q2-11{fill:rgb(244,109,67)}
.RdYlGn .q3-11{fill:rgb(253,174,97)}
.RdYlGn .q4-11{fill:rgb(254,224,139)}
.RdYlGn .q5-11{fill:rgb(255,255,191)}
.RdYlGn .q6-11{fill:rgb(217,239,139)}
.RdYlGn .q7-11{fill:rgb(166,217,106)}
.RdYlGn .q8-11{fill:rgb(102,189,99)}
.RdYlGn .q9-11{fill:rgb(26,152,80)}
.RdYlGn .q10-11{fill:rgb(0,104,55)}
.Accent .q0-3{fill:rgb(127,201,127)}
.Accent .q1-3{fill:rgb(190,174,212)}
.Accent .q2-3{fill:rgb(253,192,134)}
.Accent .q0-4{fill:rgb(127,201,127)}
.Accent .q1-4{fill:rgb(190,174,212)}
.Accent .q2-4{fill:rgb(253,192,134)}
.Accent .q3-4{fill:rgb(255,255,153)}
.Accent .q0-5{fill:rgb(127,201,127)}
.Accent .q1-5{fill:rgb(190,174,212)}
.Accent .q2-5{fill:rgb(253,192,134)}
.Accent .q3-5{fill:rgb(255,255,153)}
.Accent .q4-5{fill:rgb(56,108,176)}
.Accent .q0-6{fill:rgb(127,201,127)}
.Accent .q1-6{fill:rgb(190,174,212)}
.Accent .q2-6{fill:rgb(253,192,134)}
.Accent .q3-6{fill:rgb(255,255,153)}
.Accent .q4-6{fill:rgb(56,108,176)}
.Accent .q5-6{fill:rgb(240,2,127)}
.Accent .q0-7{fill:rgb(127,201,127)}
.Accent .q1-7{fill:rgb(190,174,212)}
.Accent .q2-7{fill:rgb(253,192,134)}
.Accent .q3-7{fill:rgb(255,255,153)}
.Accent .q4-7{fill:rgb(56,108,176)}
.Accent .q5-7{fill:rgb(240,2,127)}
.Accent .q6-7{fill:rgb(191,91,23)}
.Accent .q0-8{fill:rgb(127,201,127)}
.Accent .q1-8{fill:rgb(190,174,212)}
.Accent .q2-8{fill:rgb(253,192,134)}
.Accent .q3-8{fill:rgb(255,255,153)}
.Accent .q4-8{fill:rgb(56,108,176)}
.Accent .q5-8{fill:rgb(240,2,127)}
.Accent .q6-8{fill:rgb(191,91,23)}
.Accent .q7-8{fill:rgb(102,102,102)}
.Dark2 .q0-3{fill:rgb(27,158,119)}
.Dark2 .q1-3{fill:rgb(217,95,2)}
.Dark2 .q2-3{fill:rgb(117,112,179)}
.Dark2 .q0-4{fill:rgb(27,158,119)}
.Dark2 .q1-4{fill:rgb(217,95,2)}
.Dark2 .q2-4{fill:rgb(117,112,179)}
.Dark2 .q3-4{fill:rgb(231,41,138)}
.Dark2 .q0-5{fill:rgb(27,158,119)}
.Dark2 .q1-5{fill:rgb(217,95,2)}
.Dark2 .q2-5{fill:rgb(117,112,179)}
.Dark2 .q3-5{fill:rgb(231,41,138)}
.Dark2 .q4-5{fill:rgb(102,166,30)}
.Dark2 .q0-6{fill:rgb(27,158,119)}
.Dark2 .q1-6{fill:rgb(217,95,2)}
.Dark2 .q2-6{fill:rgb(117,112,179)}
.Dark2 .q3-6{fill:rgb(231,41,138)}
.Dark2 .q4-6{fill:rgb(102,166,30)}
.Dark2 .q5-6{fill:rgb(230,171,2)}
.Dark2 .q0-7{fill:rgb(27,158,119)}
.Dark2 .q1-7{fill:rgb(217,95,2)}
.Dark2 .q2-7{fill:rgb(117,112,179)}
.Dark2 .q3-7{fill:rgb(231,41,138)}
.Dark2 .q4-7{fill:rgb(102,166,30)}
.Dark2 .q5-7{fill:rgb(230,171,2)}
.Dark2 .q6-7{fill:rgb(166,118,29)}
.Dark2 .q0-8{fill:rgb(27,158,119)}
.Dark2 .q1-8{fill:rgb(217,95,2)}
.Dark2 .q2-8{fill:rgb(117,112,179)}
.Dark2 .q3-8{fill:rgb(231,41,138)}
.Dark2 .q4-8{fill:rgb(102,166,30)}
.Dark2 .q5-8{fill:rgb(230,171,2)}
.Dark2 .q6-8{fill:rgb(166,118,29)}
.Dark2 .q7-8{fill:rgb(102,102,102)}
.Paired .q0-3{fill:rgb(166,206,227)}
.Paired .q1-3{fill:rgb(31,120,180)}
.Paired .q2-3{fill:rgb(178,223,138)}
.Paired .q0-4{fill:rgb(166,206,227)}
.Paired .q1-4{fill:rgb(31,120,180)}
.Paired .q2-4{fill:rgb(178,223,138)}
.Paired .q3-4{fill:rgb(51,160,44)}
.Paired .q0-5{fill:rgb(166,206,227)}
.Paired .q1-5{fill:rgb(31,120,180)}
.Paired .q2-5{fill:rgb(178,223,138)}
.Paired .q3-5{fill:rgb(51,160,44)}
.Paired .q4-5{fill:rgb(251,154,153)}
.Paired .q0-6{fill:rgb(166,206,227)}
.Paired .q1-6{fill:rgb(31,120,180)}
.Paired .q2-6{fill:rgb(178,223,138)}
.Paired .q3-6{fill:rgb(51,160,44)}
.Paired .q4-6{fill:rgb(251,154,153)}
.Paired .q5-6{fill:rgb(227,26,28)}
.Paired .q0-7{fill:rgb(166,206,227)}
.Paired .q1-7{fill:rgb(31,120,180)}
.Paired .q2-7{fill:rgb(178,223,138)}
.Paired .q3-7{fill:rgb(51,160,44)}
.Paired .q4-7{fill:rgb(251,154,153)}
.Paired .q5-7{fill:rgb(227,26,28)}
.Paired .q6-7{fill:rgb(253,191,111)}
.Paired .q0-8{fill:rgb(166,206,227)}
.Paired .q1-8{fill:rgb(31,120,180)}
.Paired .q2-8{fill:rgb(178,223,138)}
.Paired .q3-8{fill:rgb(51,160,44)}
.Paired .q4-8{fill:rgb(251,154,153)}
.Paired .q5-8{fill:rgb(227,26,28)}
.Paired .q6-8{fill:rgb(253,191,111)}
.Paired .q7-8{fill:rgb(255,127,0)}
.Paired .q0-9{fill:rgb(166,206,227)}
.Paired .q1-9{fill:rgb(31,120,180)}
.Paired .q2-9{fill:rgb(178,223,138)}
.Paired .q3-9{fill:rgb(51,160,44)}
.Paired .q4-9{fill:rgb(251,154,153)}
.Paired .q5-9{fill:rgb(227,26,28)}
.Paired .q6-9{fill:rgb(253,191,111)}
.Paired .q7-9{fill:rgb(255,127,0)}
.Paired .q8-9{fill:rgb(202,178,214)}
.Paired .q0-10{fill:rgb(166,206,227)}
.Paired .q1-10{fill:rgb(31,120,180)}
.Paired .q2-10{fill:rgb(178,223,138)}
.Paired .q3-10{fill:rgb(51,160,44)}
.Paired .q4-10{fill:rgb(251,154,153)}
.Paired .q5-10{fill:rgb(227,26,28)}
.Paired .q6-10{fill:rgb(253,191,111)}
.Paired .q7-10{fill:rgb(255,127,0)}
.Paired .q8-10{fill:rgb(202,178,214)}
.Paired .q9-10{fill:rgb(106,61,154)}
.Paired .q0-11{fill:rgb(166,206,227)}
.Paired .q1-11{fill:rgb(31,120,180)}
.Paired .q2-11{fill:rgb(178,223,138)}
.Paired .q3-11{fill:rgb(51,160,44)}
.Paired .q4-11{fill:rgb(251,154,153)}
.Paired .q5-11{fill:rgb(227,26,28)}
.Paired .q6-11{fill:rgb(253,191,111)}
.Paired .q7-11{fill:rgb(255,127,0)}
.Paired .q8-11{fill:rgb(202,178,214)}
.Paired .q9-11{fill:rgb(106,61,154)}
.Paired .q10-11{fill:rgb(255,255,153)}
.Paired .q0-12{fill:rgb(166,206,227)}
.Paired .q1-12{fill:rgb(31,120,180)}
.Paired .q2-12{fill:rgb(178,223,138)}
.Paired .q3-12{fill:rgb(51,160,44)}
.Paired .q4-12{fill:rgb(251,154,153)}
.Paired .q5-12{fill:rgb(227,26,28)}
.Paired .q6-12{fill:rgb(253,191,111)}
.Paired .q7-12{fill:rgb(255,127,0)}
.Paired .q8-12{fill:rgb(202,178,214)}
.Paired .q9-12{fill:rgb(106,61,154)}
.Paired .q10-12{fill:rgb(255,255,153)}
.Paired .q11-12{fill:rgb(177,89,40)}
.Pastel1 .q0-3{fill:rgb(251,180,174)}
.Pastel1 .q1-3{fill:rgb(179,205,227)}
.Pastel1 .q2-3{fill:rgb(204,235,197)}
.Pastel1 .q0-4{fill:rgb(251,180,174)}
.Pastel1 .q1-4{fill:rgb(179,205,227)}
.Pastel1 .q2-4{fill:rgb(204,235,197)}
.Pastel1 .q3-4{fill:rgb(222,203,228)}
.Pastel1 .q0-5{fill:rgb(251,180,174)}
.Pastel1 .q1-5{fill:rgb(179,205,227)}
.Pastel1 .q2-5{fill:rgb(204,235,197)}
.Pastel1 .q3-5{fill:rgb(222,203,228)}
.Pastel1 .q4-5{fill:rgb(254,217,166)}
.Pastel1 .q0-6{fill:rgb(251,180,174)}
.Pastel1 .q1-6{fill:rgb(179,205,227)}
.Pastel1 .q2-6{fill:rgb(204,235,197)}
.Pastel1 .q3-6{fill:rgb(222,203,228)}
.Pastel1 .q4-6{fill:rgb(254,217,166)}
.Pastel1 .q5-6{fill:rgb(255,255,204)}
.Pastel1 .q0-7{fill:rgb(251,180,174)}
.Pastel1 .q1-7{fill:rgb(179,205,227)}
.Pastel1 .q2-7{fill:rgb(204,235,197)}
.Pastel1 .q3-7{fill:rgb(222,203,228)}
.Pastel1 .q4-7{fill:rgb(254,217,166)}
.Pastel1 .q5-7{fill:rgb(255,255,204)}
.Pastel1 .q6-7{fill:rgb(229,216,189)}
.Pastel1 .q0-8{fill:rgb(251,180,174)}
.Pastel1 .q1-8{fill:rgb(179,205,227)}
.Pastel1 .q2-8{fill:rgb(204,235,197)}
.Pastel1 .q3-8{fill:rgb(222,203,228)}
.Pastel1 .q4-8{fill:rgb(254,217,166)}
.Pastel1 .q5-8{fill:rgb(255,255,204)}
.Pastel1 .q6-8{fill:rgb(229,216,189)}
.Pastel1 .q7-8{fill:rgb(253,218,236)}
.Pastel1 .q0-9{fill:rgb(251,180,174)}
.Pastel1 .q1-9{fill:rgb(179,205,227)}
.Pastel1 .q2-9{fill:rgb(204,235,197)}
.Pastel1 .q3-9{fill:rgb(222,203,228)}
.Pastel1 .q4-9{fill:rgb(254,217,166)}
.Pastel1 .q5-9{fill:rgb(255,255,204)}
.Pastel1 .q6-9{fill:rgb(229,216,189)}
.Pastel1 .q7-9{fill:rgb(253,218,236)}
.Pastel1 .q8-9{fill:rgb(242,242,242)}
.Pastel2 .q0-3{fill:rgb(179,226,205)}
.Pastel2 .q1-3{fill:rgb(253,205,172)}
.Pastel2 .q2-3{fill:rgb(203,213,232)}
.Pastel2 .q0-4{fill:rgb(179,226,205)}
.Pastel2 .q1-4{fill:rgb(253,205,172)}
.Pastel2 .q2-4{fill:rgb(203,213,232)}
.Pastel2 .q3-4{fill:rgb(244,202,228)}
.Pastel2 .q0-5{fill:rgb(179,226,205)}
.Pastel2 .q1-5{fill:rgb(253,205,172)}
.Pastel2 .q2-5{fill:rgb(203,213,232)}
.Pastel2 .q3-5{fill:rgb(244,202,228)}
.Pastel2 .q4-5{fill:rgb(230,245,201)}
.Pastel2 .q0-6{fill:rgb(179,226,205)}
.Pastel2 .q1-6{fill:rgb(253,205,172)}
.Pastel2 .q2-6{fill:rgb(203,213,232)}
.Pastel2 .q3-6{fill:rgb(244,202,228)}
.Pastel2 .q4-6{fill:rgb(230,245,201)}
.Pastel2 .q5-6{fill:rgb(255,242,174)}
.Pastel2 .q0-7{fill:rgb(179,226,205)}
.Pastel2 .q1-7{fill:rgb(253,205,172)}
.Pastel2 .q2-7{fill:rgb(203,213,232)}
.Pastel2 .q3-7{fill:rgb(244,202,228)}
.Pastel2 .q4-7{fill:rgb(230,245,201)}
.Pastel2 .q5-7{fill:rgb(255,242,174)}
.Pastel2 .q6-7{fill:rgb(241,226,204)}
.Pastel2 .q0-8{fill:rgb(179,226,205)}
.Pastel2 .q1-8{fill:rgb(253,205,172)}
.Pastel2 .q2-8{fill:rgb(203,213,232)}
.Pastel2 .q3-8{fill:rgb(244,202,228)}
.Pastel2 .q4-8{fill:rgb(230,245,201)}
.Pastel2 .q5-8{fill:rgb(255,242,174)}
.Pastel2 .q6-8{fill:rgb(241,226,204)}
.Pastel2 .q7-8{fill:rgb(204,204,204)}
.Set1 .q0-3{fill:rgb(228,26,28)}
.Set1 .q1-3{fill:rgb(55,126,184)}
.Set1 .q2-3{fill:rgb(77,175,74)}
.Set1 .q0-4{fill:rgb(228,26,28)}
.Set1 .q1-4{fill:rgb(55,126,184)}
.Set1 .q2-4{fill:rgb(77,175,74)}
.Set1 .q3-4{fill:rgb(152,78,163)}
.Set1 .q0-5{fill:rgb(228,26,28)}
.Set1 .q1-5{fill:rgb(55,126,184)}
.Set1 .q2-5{fill:rgb(77,175,74)}
.Set1 .q3-5{fill:rgb(152,78,163)}
.Set1 .q4-5{fill:rgb(255,127,0)}
.Set1 .q0-6{fill:rgb(228,26,28)}
.Set1 .q1-6{fill:rgb(55,126,184)}
.Set1 .q2-6{fill:rgb(77,175,74)}
.Set1 .q3-6{fill:rgb(152,78,163)}
.Set1 .q4-6{fill:rgb(255,127,0)}
.Set1 .q5-6{fill:rgb(255,255,51)}
.Set1 .q0-7{fill:rgb(228,26,28)}
.Set1 .q1-7{fill:rgb(55,126,184)}
.Set1 .q2-7{fill:rgb(77,175,74)}
.Set1 .q3-7{fill:rgb(152,78,163)}
.Set1 .q4-7{fill:rgb(255,127,0)}
.Set1 .q5-7{fill:rgb(255,255,51)}
.Set1 .q6-7{fill:rgb(166,86,40)}
.Set1 .q0-8{fill:rgb(228,26,28)}
.Set1 .q1-8{fill:rgb(55,126,184)}
.Set1 .q2-8{fill:rgb(77,175,74)}
.Set1 .q3-8{fill:rgb(152,78,163)}
.Set1 .q4-8{fill:rgb(255,127,0)}
.Set1 .q5-8{fill:rgb(255,255,51)}
.Set1 .q6-8{fill:rgb(166,86,40)}
.Set1 .q7-8{fill:rgb(247,129,191)}
.Set1 .q0-9{fill:rgb(228,26,28)}
.Set1 .q1-9{fill:rgb(55,126,184)}
.Set1 .q2-9{fill:rgb(77,175,74)}
.Set1 .q3-9{fill:rgb(152,78,163)}
.Set1 .q4-9{fill:rgb(255,127,0)}
.Set1 .q5-9{fill:rgb(255,255,51)}
.Set1 .q6-9{fill:rgb(166,86,40)}
.Set1 .q7-9{fill:rgb(247,129,191)}
.Set1 .q8-9{fill:rgb(153,153,153)}
.Set2 .q0-3{fill:rgb(102,194,165)}
.Set2 .q1-3{fill:rgb(252,141,98)}
.Set2 .q2-3{fill:rgb(141,160,203)}
.Set2 .q0-4{fill:rgb(102,194,165)}
.Set2 .q1-4{fill:rgb(252,141,98)}
.Set2 .q2-4{fill:rgb(141,160,203)}
.Set2 .q3-4{fill:rgb(231,138,195)}
.Set2 .q0-5{fill:rgb(102,194,165)}
.Set2 .q1-5{fill:rgb(252,141,98)}
.Set2 .q2-5{fill:rgb(141,160,203)}
.Set2 .q3-5{fill:rgb(231,138,195)}
.Set2 .q4-5{fill:rgb(166,216,84)}
.Set2 .q0-6{fill:rgb(102,194,165)}
.Set2 .q1-6{fill:rgb(252,141,98)}
.Set2 .q2-6{fill:rgb(141,160,203)}
.Set2 .q3-6{fill:rgb(231,138,195)}
.Set2 .q4-6{fill:rgb(166,216,84)}
.Set2 .q5-6{fill:rgb(255,217,47)}
.Set2 .q0-7{fill:rgb(102,194,165)}
.Set2 .q1-7{fill:rgb(252,141,98)}
.Set2 .q2-7{fill:rgb(141,160,203)}
.Set2 .q3-7{fill:rgb(231,138,195)}
.Set2 .q4-7{fill:rgb(166,216,84)}
.Set2 .q5-7{fill:rgb(255,217,47)}
.Set2 .q6-7{fill:rgb(229,196,148)}
.Set2 .q0-8{fill:rgb(102,194,165)}
.Set2 .q1-8{fill:rgb(252,141,98)}
.Set2 .q2-8{fill:rgb(141,160,203)}
.Set2 .q3-8{fill:rgb(231,138,195)}
.Set2 .q4-8{fill:rgb(166,216,84)}
.Set2 .q5-8{fill:rgb(255,217,47)}
.Set2 .q6-8{fill:rgb(229,196,148)}
.Set2 .q7-8{fill:rgb(179,179,179)}
.Set3 .q0-3{fill:rgb(141,211,199)}
.Set3 .q1-3{fill:rgb(255,255,179)}
.Set3 .q2-3{fill:rgb(190,186,218)}
.Set3 .q0-4{fill:rgb(141,211,199)}
.Set3 .q1-4{fill:rgb(255,255,179)}
.Set3 .q2-4{fill:rgb(190,186,218)}
.Set3 .q3-4{fill:rgb(251,128,114)}
.Set3 .q0-5{fill:rgb(141,211,199)}
.Set3 .q1-5{fill:rgb(255,255,179)}
.Set3 .q2-5{fill:rgb(190,186,218)}
.Set3 .q3-5{fill:rgb(251,128,114)}
.Set3 .q4-5{fill:rgb(128,177,211)}
.Set3 .q0-6{fill:rgb(141,211,199)}
.Set3 .q1-6{fill:rgb(255,255,179)}
.Set3 .q2-6{fill:rgb(190,186,218)}
.Set3 .q3-6{fill:rgb(251,128,114)}
.Set3 .q4-6{fill:rgb(128,177,211)}
.Set3 .q5-6{fill:rgb(253,180,98)}
.Set3 .q0-7{fill:rgb(141,211,199)}
.Set3 .q1-7{fill:rgb(255,255,179)}
.Set3 .q2-7{fill:rgb(190,186,218)}
.Set3 .q3-7{fill:rgb(251,128,114)}
.Set3 .q4-7{fill:rgb(128,177,211)}
.Set3 .q5-7{fill:rgb(253,180,98)}
.Set3 .q6-7{fill:rgb(179,222,105)}
.Set3 .q0-8{fill:rgb(141,211,199)}
.Set3 .q1-8{fill:rgb(255,255,179)}
.Set3 .q2-8{fill:rgb(190,186,218)}
.Set3 .q3-8{fill:rgb(251,128,114)}
.Set3 .q4-8{fill:rgb(128,177,211)}
.Set3 .q5-8{fill:rgb(253,180,98)}
.Set3 .q6-8{fill:rgb(179,222,105)}
.Set3 .q7-8{fill:rgb(252,205,229)}
.Set3 .q0-9{fill:rgb(141,211,199)}
.Set3 .q1-9{fill:rgb(255,255,179)}
.Set3 .q2-9{fill:rgb(190,186,218)}
.Set3 .q3-9{fill:rgb(251,128,114)}
.Set3 .q4-9{fill:rgb(128,177,211)}
.Set3 .q5-9{fill:rgb(253,180,98)}
.Set3 .q6-9{fill:rgb(179,222,105)}
.Set3 .q7-9{fill:rgb(252,205,229)}
.Set3 .q8-9{fill:rgb(217,217,217)}
.Set3 .q0-10{fill:rgb(141,211,199)}
.Set3 .q1-10{fill:rgb(255,255,179)}
.Set3 .q2-10{fill:rgb(190,186,218)}
.Set3 .q3-10{fill:rgb(251,128,114)}
.Set3 .q4-10{fill:rgb(128,177,211)}
.Set3 .q5-10{fill:rgb(253,180,98)}
.Set3 .q6-10{fill:rgb(179,222,105)}
.Set3 .q7-10{fill:rgb(252,205,229)}
.Set3 .q8-10{fill:rgb(217,217,217)}
.Set3 .q9-10{fill:rgb(188,128,189)}
.Set3 .q0-11{fill:rgb(141,211,199)}
.Set3 .q1-11{fill:rgb(255,255,179)}
.Set3 .q2-11{fill:rgb(190,186,218)}
.Set3 .q3-11{fill:rgb(251,128,114)}
.Set3 .q4-11{fill:rgb(128,177,211)}
.Set3 .q5-11{fill:rgb(253,180,98)}
.Set3 .q6-11{fill:rgb(179,222,105)}
.Set3 .q7-11{fill:rgb(252,205,229)}
.Set3 .q8-11{fill:rgb(217,217,217)}
.Set3 .q9-11{fill:rgb(188,128,189)}
.Set3 .q10-11{fill:rgb(204,235,197)}
.Set3 .q0-12{fill:rgb(141,211,199)}
.Set3 .q1-12{fill:rgb(255,255,179)}
.Set3 .q2-12{fill:rgb(190,186,218)}
.Set3 .q3-12{fill:rgb(251,128,114)}
.Set3 .q4-12{fill:rgb(128,177,211)}
.Set3 .q5-12{fill:rgb(253,180,98)}
.Set3 .q6-12{fill:rgb(179,222,105)}
.Set3 .q7-12{fill:rgb(252,205,229)}
.Set3 .q8-12{fill:rgb(217,217,217)}
.Set3 .q9-12{fill:rgb(188,128,189)}
.Set3 .q10-12{fill:rgb(204,235,197)}
.Set3 .q11-12{fill:rgb(255,237,111)}
/* /vendor/bootstrap-tour/build/css/bootstrap-tour.min.css */
/* ========================================================================
 * bootstrap-tour - v0.12.0
 * http://bootstraptour.com
 * ========================================================================
 * Copyright 2012-2015 Ulrich Sossou
 *
 * ========================================================================
 * Licensed under the MIT License (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://opensource.org/licenses/MIT
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================================
 */

.tour-backdrop{position:absolute;z-index:1100;background-color:#000;opacity:.8;filter:alpha(opacity=80)}.popover[class*="tour-"]{z-index:1102}.popover[class*="tour-"] .popover-navigation{padding:9px 14px;overflow:hidden}.popover[class*="tour-"] .popover-navigation *[data-role="end"]{float:right}.popover[class*="tour-"] .popover-navigation *[data-role="prev"],.popover[class*="tour-"] .popover-navigation *[data-role="next"],.popover[class*="tour-"] .popover-navigation *[data-role="end"]{cursor:pointer}.popover[class*="tour-"] .popover-navigation *[data-role="prev"].disabled,.popover[class*="tour-"] .popover-navigation *[data-role="next"].disabled,.popover[class*="tour-"] .popover-navigation *[data-role="end"].disabled{cursor:default}.popover[class*="tour-"].orphan{position:fixed;margin-top:0}.popover[class*="tour-"].orphan .arrow{display:none}
/* /vendor/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.css */
.treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon,.treeview span.image{width:12px;margin-right:5px}.treeview .node-disabled{color:silver;cursor:not-allowed}.treeview .node-hidden{display:none}.treeview span.image{display:inline-block;height:1.19em;vertical-align:middle;background-size:contain;background-repeat:no-repeat;line-height:1em}.treeview span.icon.node-icon-background{padding:2px;width:calc(1em + 4px);height:calc(1em + 4px);line-height:1em}
/* /vendor/jquery.json-viewer/jquery.json-viewer.css */
/* Root element */
.json-document {
  padding: 1em 2em;
}

/* Syntax highlighting for JSON objects */
ul.json-dict, ol.json-array {
  list-style-type: none;
  margin: 0 0 0 1px;
  border-left: 1px dotted #ccc;
  padding-left: 2em;
}
.json-string {
  color: #0B7500;
}
.json-literal {
  color: #1A01CC;
  font-weight: bold;
}

/* Toggle button */
a.json-toggle {
  position: relative;
  color: inherit;
  text-decoration: none;
}
a.json-toggle:focus {
  outline: none;
}
a.json-toggle:before {
  font-size: 1.1em;
  color: #c0c0c0;
  content: "\25BC"; /* down arrow */
  position: absolute;
  display: inline-block;
  width: 1em;
  text-align: center;
  line-height: 1em;
  left: -1.2em;
}
a.json-toggle:hover:before {
  color: #aaa;
}
a.json-toggle.collapsed:before {
  /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
  transform: rotate(-90deg);
}

/* Collapsable placeholder links */
a.json-placeholder {
  color: #aaa;
  padding: 0 1em;
  text-decoration: none;
}
a.json-placeholder:hover {
  text-decoration: underline;
}

/* /vendor/bootstrap-tag-input/bootstrap-tagsinput.css */
.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* /vendor/slick-carousel/slick/slick.css */
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* /vendor/gridstack/gridstack.css */
/*!
 * required gridstack 2.0.0 CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others
 * https://gridstackjs.com/
 * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
 * gridstack.js may be freely distributed under the MIT license.
*/
:root .grid-stack-item > .ui-resizable-handle {
  filter: none; }

.grid-stack {
  position: relative; }
  .grid-stack.grid-stack-rtl {
    direction: ltr; }
    .grid-stack.grid-stack-rtl > .grid-stack-item {
      direction: rtl; }
  .grid-stack .grid-stack-placeholder > .placeholder-content {
    border: 1px dashed lightgray;
    margin: 0;
    position: absolute;
    width: auto;
    z-index: 0 !important;
    text-align: center; }
  .grid-stack > .grid-stack-item {
    min-width: 8.3333333333%;
    position: absolute;
    padding: 0; }
    .grid-stack > .grid-stack-item > .grid-stack-item-content {
      margin: 0;
      position: absolute;
      width: auto;
      overflow-x: hidden;
      overflow-y: auto; }
    .grid-stack > .grid-stack-item > .ui-resizable-handle {
      position: absolute;
      font-size: 0.1px;
      display: block;
      -ms-touch-action: none;
      touch-action: none; }
    .grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
    .grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
      display: none; }
    .grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
      z-index: 100; }
      .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
      .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
      .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
        opacity: 0.8; }
    .grid-stack > .grid-stack-item > .ui-resizable-se,
    .grid-stack > .grid-stack-item > .ui-resizable-sw {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
      background-repeat: no-repeat;
      background-position: center;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    .grid-stack > .grid-stack-item > .ui-resizable-se {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .grid-stack > .grid-stack-item > .ui-resizable-nw {
      cursor: nw-resize;
      width: 20px;
      height: 20px;
      top: 0; }
    .grid-stack > .grid-stack-item > .ui-resizable-n {
      cursor: n-resize;
      height: 10px;
      top: 0;
      left: 25px;
      right: 25px; }
    .grid-stack > .grid-stack-item > .ui-resizable-ne {
      cursor: ne-resize;
      width: 20px;
      height: 20px;
      top: 0; }
    .grid-stack > .grid-stack-item > .ui-resizable-e {
      cursor: e-resize;
      width: 10px;
      top: 15px;
      bottom: 15px; }
    .grid-stack > .grid-stack-item > .ui-resizable-se {
      cursor: se-resize;
      width: 20px;
      height: 20px; }
    .grid-stack > .grid-stack-item > .ui-resizable-s {
      cursor: s-resize;
      height: 10px;
      left: 25px;
      bottom: 0;
      right: 25px; }
    .grid-stack > .grid-stack-item > .ui-resizable-sw {
      cursor: sw-resize;
      width: 20px;
      height: 20px;
      bottom: 0; }
    .grid-stack > .grid-stack-item > .ui-resizable-w {
      cursor: w-resize;
      width: 10px;
      top: 15px;
      bottom: 15px; }
    .grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
      display: none !important; }
    .grid-stack > .grid-stack-item[data-gs-width='1'] {
      width: 8.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-x='1'] {
      left: 8.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='1'] {
      min-width: 8.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='1'] {
      max-width: 8.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-width='2'] {
      width: 16.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-x='2'] {
      left: 16.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='2'] {
      min-width: 16.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='2'] {
      max-width: 16.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-width='3'] {
      width: 25%; }
    .grid-stack > .grid-stack-item[data-gs-x='3'] {
      left: 25%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='3'] {
      min-width: 25%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='3'] {
      max-width: 25%; }
    .grid-stack > .grid-stack-item[data-gs-width='4'] {
      width: 33.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-x='4'] {
      left: 33.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='4'] {
      min-width: 33.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='4'] {
      max-width: 33.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-width='5'] {
      width: 41.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-x='5'] {
      left: 41.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='5'] {
      min-width: 41.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='5'] {
      max-width: 41.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-width='6'] {
      width: 50%; }
    .grid-stack > .grid-stack-item[data-gs-x='6'] {
      left: 50%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='6'] {
      min-width: 50%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='6'] {
      max-width: 50%; }
    .grid-stack > .grid-stack-item[data-gs-width='7'] {
      width: 58.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-x='7'] {
      left: 58.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='7'] {
      min-width: 58.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='7'] {
      max-width: 58.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-width='8'] {
      width: 66.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-x='8'] {
      left: 66.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='8'] {
      min-width: 66.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='8'] {
      max-width: 66.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-width='9'] {
      width: 75%; }
    .grid-stack > .grid-stack-item[data-gs-x='9'] {
      left: 75%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='9'] {
      min-width: 75%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='9'] {
      max-width: 75%; }
    .grid-stack > .grid-stack-item[data-gs-width='10'] {
      width: 83.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-x='10'] {
      left: 83.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='10'] {
      min-width: 83.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='10'] {
      max-width: 83.3333333333%; }
    .grid-stack > .grid-stack-item[data-gs-width='11'] {
      width: 91.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-x='11'] {
      left: 91.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='11'] {
      min-width: 91.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='11'] {
      max-width: 91.6666666667%; }
    .grid-stack > .grid-stack-item[data-gs-width='12'] {
      width: 100%; }
    .grid-stack > .grid-stack-item[data-gs-x='12'] {
      left: 100%; }
    .grid-stack > .grid-stack-item[data-gs-min-width='12'] {
      min-width: 100%; }
    .grid-stack > .grid-stack-item[data-gs-max-width='12'] {
      max-width: 100%; }
  .grid-stack.grid-stack-1 > .grid-stack-item {
    min-width: 100%; }
    .grid-stack.grid-stack-1 > .grid-stack-item[data-gs-width='1'] {
      width: 100%; }
    .grid-stack.grid-stack-1 > .grid-stack-item[data-gs-x='1'] {
      left: 100%; }
    .grid-stack.grid-stack-1 > .grid-stack-item[data-gs-min-width='1'] {
      min-width: 100%; }
    .grid-stack.grid-stack-1 > .grid-stack-item[data-gs-max-width='1'] {
      max-width: 100%; }
  .grid-stack.grid-stack-animate,
  .grid-stack.grid-stack-animate .grid-stack-item {
    -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
    -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
    -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
    -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
    transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s; }
  .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
  .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
  .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
    -webkit-transition: left 0s, top 0s, height 0s, width 0s;
    -moz-transition: left 0s, top 0s, height 0s, width 0s;
    -ms-transition: left 0s, top 0s, height 0s, width 0s;
    -o-transition: left 0s, top 0s, height 0s, width 0s;
    transition: left 0s, top 0s, height 0s, width 0s; }

/* /vendor/jquery-timepicker-wvega/jquery.timepicker.css */
/**
 * jQuery Timepicker
 * http://timepicker.co
 *
 * Enhances standard form input fields helping users to select (or type) times.
 *
 * Copyright (c) 2016 Willington Vega; Licensed MIT, GPL
 */

 .ui-timepicker-container {
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-timepicker {
    box-sizing: content-box;
    display: block;
    height: 205px;
    list-style: none outside none;
    margin: 0;
    padding: 0 1px;
    text-align: center;
}

.ui-timepicker-viewport {
    box-sizing: content-box;
    display: block;
    height: 205px;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden; /* IE */
}

.ui-timepicker-standard {
    /* overwrites .ui-widget */
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    /* overwrites .ui-widget-content */
    background-color: #FFF;
    border: 1px solid #AAA;
    color: #222;
    /* overwrites .ui-menu */
    margin: 0;
    padding: 2px;
}
.ui-timepicker-standard a {
    border: 1px solid transparent;
    color: #222;
    display: block;
    padding: 0.2em 0.4em;
    text-decoration: none;
}
.ui-timepicker-standard .ui-state-hover {
    /* overwrites .ui-state-hover */
    background-color: #DADADA;
    border: 1px solid #999;
    font-weight: normal;
    color: #212121;
}
.ui-timepicker-standard .ui-menu-item {
    /* overwrites .ui-menu and .ui-menu-item */
    /*clear: left;
    float: left;*/
    margin: 0;
    padding: 0;
}

.ui-timepicker-corners,
.ui-timepicker-corners .ui-corner-all {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.ui-timepicker-hidden {
    /* overwrites .ui-helper-hidden */
    display: none;
}

.ui-timepicker-no-scrollbar .ui-timepicker {
    border: none;
}

/* /javascripts/plugins_src/plugins.lib.css */
/*! Ace-diff | github.com/ace-diff/ace-diff */
.acediff__wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:absolute;bottom:0;top:0;left:0;height:100%;width:100%;overflow:auto}.acediff__gutter{-webkit-box-flex:0;-ms-flex:0 0 60px;flex:0 0 60px;border-left:1px solid #999;border-right:1px solid #999;overflow:hidden}.acediff__gutter,.acediff__gutter svg{background-color:#efefef}.acediff__left,.acediff__right{height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1}.acediff__diffLine{background-color:#d8f2ff;border-top:1px solid #a2d7f2;border-bottom:1px solid #a2d7f2;position:absolute;z-index:4}.acediff__diffLine.targetOnly{height:0!important;border-top:1px solid #a2d7f2;border-bottom:0;position:absolute}.acediff__connector{fill:#d8f2ff;stroke:#a2d7f2}.acediff__copy--left,.acediff__copy--right{position:relative}.acediff__copy--left div,.acediff__copy--right div{color:#000;text-shadow:1px 1px #fff;position:absolute;margin:2px 3px;cursor:pointer}.acediff__copy--right div:hover{color:#004ea0}.acediff__copy--left{float:right}.acediff__copy--left div{right:0}.acediff__copy--left div:hover{color:#c98100}




.ace_editor {position: relative;overflow: hidden;font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;direction: ltr;text-align: left;}.ace_scroller {position: absolute;overflow: hidden;top: 0;bottom: 0;background-color: inherit;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;cursor: text;}.ace_content {position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;min-width: 100%;}.ace_dragging .ace_scroller:before{position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: '';background: rgba(250, 250, 250, 0.01);z-index: 1000;}.ace_dragging.ace_dark .ace_scroller:before{background: rgba(0, 0, 0, 0.01);}.ace_selecting, .ace_selecting * {cursor: text !important;}.ace_gutter {position: absolute;overflow : hidden;width: auto;top: 0;bottom: 0;left: 0;cursor: default;z-index: 4;-ms-user-select: none;-moz-user-select: none;-webkit-user-select: none;user-select: none;}.ace_gutter-active-line {position: absolute;left: 0;right: 0;}.ace_scroller.ace_scroll-left {box-shadow: 17px 0 16px -16px rgba(0, 0, 0, 0.4) inset;}.ace_gutter-cell {padding-left: 19px;padding-right: 6px;background-repeat: no-repeat;}.ace_gutter-cell.ace_error {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: 2px center;}.ace_gutter-cell.ace_warning {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAmVBMVEX///8AAAD///8AAAAAAABPSzb/5sAAAAB/blH/73z/ulkAAAAAAAD85pkAAAAAAAACAgP/vGz/rkDerGbGrV7/pkQICAf////e0IsAAAD/oED/qTvhrnUAAAD/yHD/njcAAADuv2r/nz//oTj/p064oGf/zHAAAAA9Nir/tFIAAAD/tlTiuWf/tkIAAACynXEAAAAAAAAtIRW7zBpBAAAAM3RSTlMAABR1m7RXO8Ln31Z36zT+neXe5OzooRDfn+TZ4p3h2hTf4t3k3ucyrN1K5+Xaks52Sfs9CXgrAAAAjklEQVR42o3PbQ+CIBQFYEwboPhSYgoYunIqqLn6/z8uYdH8Vmdnu9vz4WwXgN/xTPRD2+sgOcZjsge/whXZgUaYYvT8QnuJaUrjrHUQreGczuEafQCO/SJTufTbroWsPgsllVhq3wJEk2jUSzX3CUEDJC84707djRc5MTAQxoLgupWRwW6UB5fS++NV8AbOZgnsC7BpEAAAAABJRU5ErkJggg==");background-position: 2px center;}.ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=");background-position: 2px center;}.ace_dark .ace_gutter-cell.ace_info {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAChoaGAgIAqKiq+vr6tra1ZWVmUlJSbm5s8PDxubm56enrdgzg3AAAAAXRSTlMAQObYZgAAAClJREFUeNpjYMAPdsMYHegyJZFQBlsUlMFVCWUYKkAZMxZAGdxlDMQBAG+TBP4B6RyJAAAAAElFTkSuQmCC");}.ace_scrollbar {position: absolute;right: 0;bottom: 0;z-index: 6;}.ace_scrollbar-inner {position: absolute;cursor: text;left: 0;top: 0;}.ace_scrollbar-v{overflow-x: hidden;overflow-y: scroll;top: 0;}.ace_scrollbar-h {overflow-x: scroll;overflow-y: hidden;left: 0;}.ace_print-margin {position: absolute;height: 100%;}.ace_text-input {position: absolute;z-index: 0;width: 0.5em;height: 1em;opacity: 0;background: transparent;-moz-appearance: none;appearance: none;border: none;resize: none;outline: none;overflow: hidden;font: inherit;padding: 0 1px;margin: 0 -1px;text-indent: -1em;-ms-user-select: text;-moz-user-select: text;-webkit-user-select: text;user-select: text;white-space: pre!important;}.ace_text-input.ace_composition {background: inherit;color: inherit;z-index: 1000;opacity: 1;text-indent: 0;}.ace_layer {z-index: 1;position: absolute;overflow: hidden;word-wrap: normal;white-space: pre;height: 100%;width: 100%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;pointer-events: none;}.ace_gutter-layer {position: relative;width: auto;text-align: right;pointer-events: auto;}.ace_text-layer {font: inherit !important;}.ace_cjk {display: inline-block;text-align: center;}.ace_cursor-layer {z-index: 4;}.ace_cursor {z-index: 4;position: absolute;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;border-left: 2px solid;transform: translatez(0);}.ace_slim-cursors .ace_cursor {border-left-width: 1px;}.ace_overwrite-cursors .ace_cursor {border-left-width: 0;border-bottom: 1px solid;}.ace_hidden-cursors .ace_cursor {opacity: 0.2;}.ace_smooth-blinking .ace_cursor {-webkit-transition: opacity 0.18s;transition: opacity 0.18s;}.ace_editor.ace_multiselect .ace_cursor {border-left-width: 1px;}.ace_marker-layer .ace_step, .ace_marker-layer .ace_stack {position: absolute;z-index: 3;}.ace_marker-layer .ace_selection {position: absolute;z-index: 5;}.ace_marker-layer .ace_bracket {position: absolute;z-index: 6;}.ace_marker-layer .ace_active-line {position: absolute;z-index: 2;}.ace_marker-layer .ace_selected-word {position: absolute;z-index: 4;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.ace_line .ace_fold {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;height: 11px;margin-top: -2px;vertical-align: middle;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACJJREFUeNpi+P//fxgTAwPDBxDxD078RSX+YeEyDFMCIMAAI3INmXiwf2YAAAAASUVORK5CYII=");background-repeat: no-repeat, repeat-x;background-position: center center, top left;color: transparent;border: 1px solid black;border-radius: 2px;cursor: pointer;pointer-events: auto;}.ace_dark .ace_fold {}.ace_fold:hover{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII="),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi+P//fz4TAwPDZxDxD5X4i5fLMEwJgAADAEPVDbjNw87ZAAAAAElFTkSuQmCC");}.ace_tooltip {background-color: #FFF;background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));border: 1px solid gray;border-radius: 1px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);color: black;max-width: 100%;padding: 3px 4px;position: fixed;z-index: 999999;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: default;white-space: pre;word-wrap: break-word;line-height: normal;font-style: normal;font-weight: normal;letter-spacing: normal;pointer-events: none;}.ace_folding-enabled > .ace_gutter-cell {padding-right: 13px;}.ace_fold-widget {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0 -12px 0 1px;display: none;width: 11px;vertical-align: top;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==");background-repeat: no-repeat;background-position: center;border-radius: 3px;border: 1px solid transparent;cursor: pointer;}.ace_folding-enabled .ace_fold-widget {display: inline-block;   }.ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42m3HwQkAMAhD0YzsRchFKI7sAikeWkrxwScEB0nh5e7KTPWimZki4tYfVbX+MNl4pyZXejUO1QAAAABJRU5ErkJggg==");}.ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==");}.ace_fold-widget:hover {border: 1px solid rgba(0, 0, 0, 0.3);background-color: rgba(255, 255, 255, 0.2);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);}.ace_fold-widget:active {border: 1px solid rgba(0, 0, 0, 0.4);background-color: rgba(0, 0, 0, 0.05);box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);}.ace_dark .ace_fold-widget {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2P4//8/AzoGEQ7oGCaLLAhWiSwB146BAQCSTPYocqT0AAAAAElFTkSuQmCC");}.ace_dark .ace_fold-widget.ace_end {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAH0lEQVQIW2P4//8/AxQ7wNjIAjDMgC4AxjCVKBirIAAF0kz2rlhxpAAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget.ace_closed {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAHElEQVQIW2P4//+/AxAzgDADlOOAznHAKgPWAwARji8UIDTfQQAAAABJRU5ErkJggg==");}.ace_dark .ace_fold-widget:hover {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);background-color: rgba(255, 255, 255, 0.1);}.ace_dark .ace_fold-widget:active {box-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);}.ace_fold-widget.ace_invalid {background-color: #FFB4B4;border-color: #DE5555;}.ace_fade-fold-widgets .ace_fold-widget {-webkit-transition: opacity 0.4s ease 0.05s;transition: opacity 0.4s ease 0.05s;opacity: 0;}.ace_fade-fold-widgets:hover .ace_fold-widget {-webkit-transition: opacity 0.05s ease 0.05s;transition: opacity 0.05s ease 0.05s;opacity:1;}.ace_underline {text-decoration: underline;}.ace_bold {font-weight: bold;}.ace_nobold .ace_bold {font-weight: normal;}.ace_italic {font-style: italic;}.ace_error-marker {background-color: rgba(255, 0, 0,0.2);position: absolute;z-index: 9;}.ace_highlight-marker {background-color: rgba(255, 255, 0,0.2);position: absolute;z-index: 8;}.ace_br1 {border-top-left-radius    : 3px;}.ace_br2 {border-top-right-radius   : 3px;}.ace_br3 {border-top-left-radius    : 3px; border-top-right-radius:    3px;}.ace_br4 {border-bottom-right-radius: 3px;}.ace_br5 {border-top-left-radius    : 3px; border-bottom-right-radius: 3px;}.ace_br6 {border-top-right-radius   : 3px; border-bottom-right-radius: 3px;}.ace_br7 {border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px;}.ace_br8 {border-bottom-left-radius : 3px;}.ace_br9 {border-top-left-radius    : 3px; border-bottom-left-radius:  3px;}.ace_br10{border-top-right-radius   : 3px; border-bottom-left-radius:  3px;}.ace_br11{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-left-radius:  3px;}.ace_br12{border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br13{border-top-left-radius    : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br14{border-top-right-radius   : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}.ace_br15{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}




/*! X-editable - v1.5.1
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
    margin-bottom: 0; /* overwrites bootstrap margin */
}

.editableform .control-group {
    margin-bottom: 0; /* overwrites bootstrap margin */
    white-space: nowrap; /* prevent wrapping buttons on new line */
    line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}

/*
  BS3 width:1005 for inputs breaks editable form in popup
  See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform .form-control {
    width: auto;
}

.editable-buttons {
    display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
    vertical-align: top;
    margin-left: 7px;
    /* inline-block emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-buttons.editable-buttons-bottom {
    display: block;
    margin-top: 7px;
    margin-left: 0;
}

.editable-input {
    vertical-align: top;
    display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
    width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
    white-space: normal; /* reset white-space decalred in parent*/
    /* display-inline emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-buttons .editable-cancel {
    margin-left: 7px;
}

/*for jquery-ui buttons need set height to look more pretty*/
.editable-buttons button.ui-button-icon-only {
    height: 24px;
    width: 30px;
}

.editableform-loading {
    background: url('../img/loading.gif') center center no-repeat;
    height: 25px;
    width: auto;
    min-width: 25px;
}

.editable-inline .editableform-loading {
    background-position: left 5px;
}

.editable-error-block {
    max-width: 300px;
    margin: 5px 0 0 0;
    width: auto;
    white-space: normal;
}

/*add padding for jquery ui*/
.editable-error-block.ui-state-error {
    padding: 3px;
}

.editable-error {
    color: red;
}

/* ---- For specific types ---- */

.editableform .editable-date {
    padding: 0;
    margin: 0;
    float: left;
}

/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
.editable-inline .add-on .icon-th {
    margin-top: 3px;
    margin-left: 1px;
}


/* checklist vertical alignment */
.editable-checklist label input[type="checkbox"],
.editable-checklist label span {
    vertical-align: middle;
    margin: 0;
}

.editable-checklist label {
    white-space: nowrap;
}

/* set exact width of textarea to fit buttons toolbar */
.editable-wysihtml5 {
    width: 566px;
    height: 250px;
}

/* clear button shown as link in date inputs */
.editable-clear {
    clear: both;
    font-size: 0.9em;
    text-decoration: none;
    text-align: right;
}

/* IOS-style clear button for text inputs */
.editable-clear-x {
    background: url('../img/clear.png') center center no-repeat;
    display: block;
    width: 13px;
    height: 13px;
    position: absolute;
    opacity: 0.6;
    z-index: 100;

    top: 50%;
    right: 6px;
    margin-top: -6px;

}

.editable-clear-x:hover {
    opacity: 1;
}

.editable-pre-wrapped {
    white-space: pre-wrap;
}
.editable-container.editable-popup {
    max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}

.editable-container.popover {
    width: auto; /* without this rule popover does not stretch */
}

.editable-container.editable-inline {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    /* inline-block emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-container.ui-widget {
    font-size: inherit;  /* jqueryui widget font 1.1em too big, overwrite it */
    z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
}
.editable-click,
a.editable-click,
a.editable-click:hover {
    text-decoration: none;
    border-bottom: dashed 1px #0088cc;
}

.editable-click.editable-disabled,
a.editable-click.editable-disabled,
a.editable-click.editable-disabled:hover {
    color: #585858;
    cursor: default;
    border-bottom: none;
}

.editable-empty, .editable-empty:hover, .editable-empty:focus{
    font-style: italic;
    color: #DD1144;
    /* border-bottom: none; */
    text-decoration: none;
}

.editable-unsaved {
    font-weight: bold;
}

.editable-unsaved:after {
    /*    content: '*'*/
}

.editable-bg-transition {
    -webkit-transition: background-color 1400ms ease-out;
    -moz-transition: background-color 1400ms ease-out;
    -o-transition: background-color 1400ms ease-out;
    -ms-transition: background-color 1400ms ease-out;
    transition: background-color 1400ms ease-out;
}

/*see https://github.com/vitalets/x-editable/issues/139 */
.form-horizontal .editable
{
    padding-top: 5px;
    display:inline-block;
}


/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr;
    /*.dow {
          border-top: 1px solid #ddd !important;
      }*/

}
.datepicker-inline {
    width: 220px;
}
.datepicker.datepicker-rtl {
    direction: rtl;
}
.datepicker.datepicker-rtl table tr td span {
    float: right;
}
.datepicker-dropdown {
    top: 0;
    left: 0;
}
.datepicker-dropdown:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 6px;
}
.datepicker-dropdown:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    position: absolute;
    top: -6px;
    left: 7px;
}
.datepicker > div {
    display: none;
}
.datepicker.days div.datepicker-days {
    display: block;
}
.datepicker.months div.datepicker-months {
    display: block;
}
.datepicker.years div.datepicker-years {
    display: block;
}
.datepicker table {
    margin: 0;
}
.datepicker td,
.datepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
    background-color: transparent;
}
.datepicker table tr td.day:hover {
    background: #eeeeee;
    cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
    background: none;
    color: #999999;
    cursor: default;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: linear-gradient(top, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
    background-color: #fdf59a;
}
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active {
    background-color: #fbf069 \9;
}
.datepicker table tr td.today:hover:hover {
    color: #000;
}
.datepicker table tr td.today.active:hover {
    color: #fff;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
    background: #eeeeee;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
    background-color: #f3d17a;
    background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
    background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
    background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
    background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
    background-image: linear-gradient(top, #f3c17a, #f3e97a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
    border-color: #f3e97a #f3e97a #edde34;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today:hover:hover,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today.disabled:hover:hover,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today:hover.disabled,
.datepicker table tr td.range.today.disabled.disabled,
.datepicker table tr td.range.today.disabled:hover.disabled,
.datepicker table tr td.range.today[disabled],
.datepicker table tr td.range.today:hover[disabled],
.datepicker table tr td.range.today.disabled[disabled],
.datepicker table tr td.range.today.disabled:hover[disabled] {
    background-color: #f3e97a;
}
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover:active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:hover.active {
    background-color: #efe24b \9;
}
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
    background-color: #9e9e9e;
    background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
    background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
    background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
    background-image: -o-linear-gradient(top, #b3b3b3, #808080);
    background-image: linear-gradient(top, #b3b3b3, #808080);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
    border-color: #808080 #808080 #595959;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected:hover:hover,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.disabled:hover:hover,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected:hover.disabled,
.datepicker table tr td.selected.disabled.disabled,
.datepicker table tr td.selected.disabled:hover.disabled,
.datepicker table tr td.selected[disabled],
.datepicker table tr td.selected:hover[disabled],
.datepicker table tr td.selected.disabled[disabled],
.datepicker table tr td.selected.disabled:hover[disabled] {
    background-color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
    background-color: #666666 \9;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
    background-color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
    background-color: #003399 \9;
}
.datepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.datepicker table tr td span:hover {
    background: #eeeeee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
    background: none;
    color: #999999;
    cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
    background-color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
    background-color: #003399 \9;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: #999999;
}
.datepicker th.datepicker-switch {
    width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
    cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
    background: #eeeeee;
}
.datepicker .cw {
    font-size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical-align: middle;
}
.datepicker thead tr:first-child th.cw {
    cursor: default;
    background-color: transparent;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
}
.input-daterange input {
    text-align: center;
}
.input-daterange input:first-child {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
    display: inline-block;
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    vertical-align: middle;
    background-color: #eeeeee;
    border: 1px solid #ccc;
    margin-left: -5px;
    margin-right: -5px;
}

.paginationjs{line-height:1.6;font-family:Marmelad,"Lucida Grande",Arial,"Hiragino Sans GB",Georgia,sans-serif;font-size:14px;box-sizing:initial}.paginationjs:after{display:table;content:" ";clear:both}.paginationjs .paginationjs-pages{float:left}.paginationjs .paginationjs-pages ul{float:left;margin:0;padding:0}.paginationjs .paginationjs-go-button,.paginationjs .paginationjs-go-input,.paginationjs .paginationjs-nav{float:left;margin-left:10px;font-size:14px}.paginationjs .paginationjs-pages li{float:left;border:1px solid #aaa;border-right:none;list-style:none}.paginationjs .paginationjs-pages li>a{min-width:30px;height:28px;line-height:28px;display:block;background:#fff;font-size:14px;color:#333;text-decoration:none;text-align:center}.paginationjs .paginationjs-pages li>a:hover{background:#eee}.paginationjs .paginationjs-pages li.active{border:none}.paginationjs .paginationjs-pages li.active>a{height:30px;line-height:30px;background:#aaa;color:#fff}.paginationjs .paginationjs-pages li.disabled>a{opacity:.3}.paginationjs .paginationjs-pages li.disabled>a:hover{background:0 0}.paginationjs .paginationjs-pages li:first-child,.paginationjs .paginationjs-pages li:first-child>a{border-radius:3px 0 0 3px}.paginationjs .paginationjs-pages li:last-child{border-right:1px solid #aaa;border-radius:0 3px 3px 0}.paginationjs .paginationjs-pages li:last-child>a{border-radius:0 3px 3px 0}.paginationjs .paginationjs-go-input>input[type=text]{width:30px;height:28px;background:#fff;border-radius:3px;border:1px solid #aaa;padding:0;font-size:14px;text-align:center;vertical-align:baseline;outline:0;box-shadow:none;box-sizing:initial}.paginationjs .paginationjs-go-button>input[type=button]{min-width:40px;height:30px;line-height:28px;background:#fff;border-radius:3px;border:1px solid #aaa;text-align:center;padding:0 8px;font-size:14px;vertical-align:baseline;outline:0;box-shadow:none;color:#333;cursor:pointer;vertical-align:middle\9}.paginationjs.paginationjs-theme-blue .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-blue .paginationjs-pages li{border-color:#289de9}.paginationjs .paginationjs-go-button>input[type=button]:hover{background-color:#f8f8f8}.paginationjs .paginationjs-nav{height:30px;line-height:30px}.paginationjs .paginationjs-go-button,.paginationjs .paginationjs-go-input{margin-left:5px\9}.paginationjs.paginationjs-small{font-size:12px}.paginationjs.paginationjs-small .paginationjs-pages li>a{min-width:26px;height:24px;line-height:24px;font-size:12px}.paginationjs.paginationjs-small .paginationjs-pages li.active>a{height:26px;line-height:26px}.paginationjs.paginationjs-small .paginationjs-go-input{font-size:12px}.paginationjs.paginationjs-small .paginationjs-go-input>input[type=text]{width:26px;height:24px;font-size:12px}.paginationjs.paginationjs-small .paginationjs-go-button{font-size:12px}.paginationjs.paginationjs-small .paginationjs-go-button>input[type=button]{min-width:30px;height:26px;line-height:24px;padding:0 6px;font-size:12px}.paginationjs.paginationjs-small .paginationjs-nav{height:26px;line-height:26px;font-size:12px}.paginationjs.paginationjs-big{font-size:16px}.paginationjs.paginationjs-big .paginationjs-pages li>a{min-width:36px;height:34px;line-height:34px;font-size:16px}.paginationjs.paginationjs-big .paginationjs-pages li.active>a{height:36px;line-height:36px}.paginationjs.paginationjs-big .paginationjs-go-input{font-size:16px}.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text]{width:36px;height:34px;font-size:16px}.paginationjs.paginationjs-big .paginationjs-go-button{font-size:16px}.paginationjs.paginationjs-big .paginationjs-go-button>input[type=button]{min-width:50px;height:36px;line-height:34px;padding:0 12px;font-size:16px}.paginationjs.paginationjs-big .paginationjs-nav{height:36px;line-height:36px;font-size:16px}.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a{color:#289de9}.paginationjs.paginationjs-theme-blue .paginationjs-pages li>a:hover{background:#e9f4fc}.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active>a{background:#289de9;color:#fff}.paginationjs.paginationjs-theme-blue .paginationjs-pages li.disabled>a:hover{background:0 0}.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button]{background:#289de9;border-color:#289de9;color:#fff}.paginationjs.paginationjs-theme-green .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-green .paginationjs-pages li{border-color:#449d44}.paginationjs.paginationjs-theme-blue .paginationjs-go-button>input[type=button]:hover{background-color:#3ca5ea}.paginationjs.paginationjs-theme-green .paginationjs-pages li>a{color:#449d44}.paginationjs.paginationjs-theme-green .paginationjs-pages li>a:hover{background:#ebf4eb}.paginationjs.paginationjs-theme-green .paginationjs-pages li.active>a{background:#449d44;color:#fff}.paginationjs.paginationjs-theme-green .paginationjs-pages li.disabled>a:hover{background:0 0}.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button]{background:#449d44;border-color:#449d44;color:#fff}.paginationjs.paginationjs-theme-yellow .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-yellow .paginationjs-pages li{border-color:#ec971f}.paginationjs.paginationjs-theme-green .paginationjs-go-button>input[type=button]:hover{background-color:#55a555}.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a{color:#ec971f}.paginationjs.paginationjs-theme-yellow .paginationjs-pages li>a:hover{background:#fdf5e9}.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.active>a{background:#ec971f;color:#fff}.paginationjs.paginationjs-theme-yellow .paginationjs-pages li.disabled>a:hover{background:0 0}.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button]{background:#ec971f;border-color:#ec971f;color:#fff}.paginationjs.paginationjs-theme-red .paginationjs-go-input>input[type=text],.paginationjs.paginationjs-theme-red .paginationjs-pages li{border-color:#c9302c}.paginationjs.paginationjs-theme-yellow .paginationjs-go-button>input[type=button]:hover{background-color:#eea135}.paginationjs.paginationjs-theme-red .paginationjs-pages li>a{color:#c9302c}.paginationjs.paginationjs-theme-red .paginationjs-pages li>a:hover{background:#faeaea}.paginationjs.paginationjs-theme-red .paginationjs-pages li.active>a{background:#c9302c;color:#fff}.paginationjs.paginationjs-theme-red .paginationjs-pages li.disabled>a:hover{background:0 0}.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button]{background:#c9302c;border-color:#c9302c;color:#fff}.paginationjs.paginationjs-theme-red .paginationjs-go-button>input[type=button]:hover{background-color:#ce4541}.paginationjs .paginationjs-pages li.paginationjs-next{border-right:1px solid #aaa\9}.paginationjs .paginationjs-go-input>input[type=text]{line-height:28px\9;vertical-align:middle\9}.paginationjs.paginationjs-big .paginationjs-pages li>a{line-height:36px\9}.paginationjs.paginationjs-big .paginationjs-go-input>input[type=text]{height:36px\9;line-height:36px\9}


/**
Leaflet JS
 */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}
.leaflet-container {
    overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
    background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
    width: 1600px;
    height: 1600px;
    -webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
    display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
    max-width: none !important;
    max-height: none !important;
}

.leaflet-container.leaflet-touch-zoom {
    -ms-touch-action: pan-x pan-y;
    touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
    -ms-touch-action: pinch-zoom;
    /* Fallback for FF which doesn't support pinch-zoom */
    touch-action: none;
    touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
    -ms-touch-action: none;
    touch-action: none;
}
.leaflet-container {
    -webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
    -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
    filter: inherit;
    visibility: hidden;
}
.leaflet-tile-loaded {
    visibility: inherit;
}
.leaflet-zoom-box {
    width: 0;
    height: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
    -moz-user-select: none;
}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
    width: 1px;
    height: 1px;
}
.lvml {
    behavior: url(#default#VML);
    display: inline-block;
    position: absolute;
}


/* control positioning */

.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}
.leaflet-top {
    top: 0;
}
.leaflet-right {
    right: 0;
}
.leaflet-bottom {
    bottom: 0;
}
.leaflet-left {
    left: 0;
}
.leaflet-control {
    float: left;
    clear: both;
}
.leaflet-right .leaflet-control {
    float: right;
}
.leaflet-top .leaflet-control {
    margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
    margin-left: 10px;
}
.leaflet-right .leaflet-control {
    margin-right: 10px;
}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
    will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
}
.leaflet-zoom-animated {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
    -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
    transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
    visibility: hidden;
}


/* cursors */

.leaflet-interactive {
    cursor: pointer;
}
.leaflet-grab {
    cursor: -webkit-grab;
    cursor:    -moz-grab;
    cursor:         grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
    cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
    cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
    pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
    pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
    pointer-events: auto;
}

/* visual tweaks */

.leaflet-container {
    background: #ddd;
    outline: 0;
}
.leaflet-container a {
    color: #0078A8;
}
.leaflet-container a.leaflet-active {
    outline: 2px solid orange;
}
.leaflet-zoom-box {
    border: 2px dotted #38f;
    background: rgba(255,255,255,0.5);
}


/* general typography */
.leaflet-container {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}


/* general toolbar styles */

.leaflet-bar {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
}
.leaflet-bar a:hover {
    background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
    cursor: default;
    background-color: #f4f4f4;
    color: #bbb;
}

.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
    font-size: 22px;
}


/* layers control */

.leaflet-control-layers {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    background: #fff;
    border-radius: 5px;
}
.leaflet-control-layers-toggle {
    background-image: url(images/layers.png);
    width: 36px;
    height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url(images/layers-2x.png);
    background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    position: relative;
}
.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background: #fff;
}
.leaflet-control-layers-scrollbar {
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 5px;
}
.leaflet-control-layers-selector {
    margin-top: 2px;
    position: relative;
    top: 1px;
}
.leaflet-control-layers label {
    display: block;
}
.leaflet-control-layers-separator {
    height: 0;
    border-top: 1px solid #ddd;
    margin: 5px -10px 5px -6px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
    background-image: url(images/marker-icon.png);
}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
    padding: 0 5px;
    color: #333;
}
.leaflet-control-attribution a {
    text-decoration: none;
}
.leaflet-control-attribution a:hover {
    text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
    font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
    margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
    margin-bottom: 5px;
}
.leaflet-control-scale-line {
    border: 2px solid #777;
    border-top: none;
    line-height: 1.1;
    padding: 2px 5px 1px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    background: #fff;
    background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
    border-top: 2px solid #777;
    border-bottom: none;
    margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
    border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: 2px solid rgba(0,0,0,0.2);
    background-clip: padding-box;
}


/* popup */

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
}
.leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
}
.leaflet-popup-content p {
    margin: 18px 0;
}
.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
}
.leaflet-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;

    margin: -10px auto 0;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: white;
    color: #333;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 4px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #999;
}
.leaflet-popup-scrolled {
    overflow: auto;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
    -ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
    width: 24px;
    margin: 0 auto;

    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-popup-tip-container {
    margin-top: -1px;
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
    border: 1px solid #999;
}


/* div icon */

.leaflet-div-icon {
    background: #fff;
    border: 1px solid #666;
}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-clickable {
    cursor: pointer;
    pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    position: absolute;
    pointer-events: none;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}

/* Directions */

.leaflet-tooltip-bottom {
    margin-top: 6px;
}
.leaflet-tooltip-top {
    margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
    left: 50%;
    margin-left: -6px;
}
.leaflet-tooltip-top:before {
    bottom: 0;
    margin-bottom: -12px;
    border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
    top: 0;
    margin-top: -12px;
    margin-left: -6px;
    border-bottom-color: #fff;
}
.leaflet-tooltip-left {
    margin-left: -6px;
}
.leaflet-tooltip-right {
    margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    top: 50%;
    margin-top: -6px;
}
.leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: #fff;
}
.leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: #fff;
}




/*!
* gridstack 2.1.0 required CSS for default 12 and 1 column Mode size. Use gridstack-extra.css for column [2-11], else see https://github.com/gridstack/gridstack.js#custom-columns-css
* https://gridstackjs.com/
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
* gridstack.js may be freely distributed under the MIT license.
*/:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed #d3d3d3;margin:0;position:absolute;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-width='1']{width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-x='1']{left:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-min-width='1']{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[data-gs-max-width='1']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s}

/*!
 * gridstack 2.0.0 extra CSS for [2-11] columns (non default)
 * https://gridstackjs.com/
 * (c) 2014-2020  Alain Dumesny, Dylan Weiss, Pavel Reznikov
 * gridstack.js may be freely distributed under the MIT license.
*/
.grid-stack.grid-stack-2 > .grid-stack-item {
    min-width: 50%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-width='1'] {
    width: 50%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-x='1'] {
    left: 50%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 50%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 50%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-width='2'] {
    width: 100%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-x='2'] {
    left: 100%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 100%; }
.grid-stack.grid-stack-2 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 100%; }

.grid-stack.grid-stack-3 > .grid-stack-item {
    min-width: 33.3333333333%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-width='1'] {
    width: 33.3333333333%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-x='1'] {
    left: 33.3333333333%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 33.3333333333%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 33.3333333333%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-width='2'] {
    width: 66.6666666667%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-x='2'] {
    left: 66.6666666667%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 66.6666666667%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 66.6666666667%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-width='3'] {
    width: 100%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-x='3'] {
    left: 100%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 100%; }
.grid-stack.grid-stack-3 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 100%; }

.grid-stack.grid-stack-4 > .grid-stack-item {
    min-width: 25%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-width='1'] {
    width: 25%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-x='1'] {
    left: 25%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 25%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 25%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-width='2'] {
    width: 50%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-x='2'] {
    left: 50%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 50%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 50%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-width='3'] {
    width: 75%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-x='3'] {
    left: 75%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 75%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 75%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-width='4'] {
    width: 100%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-x='4'] {
    left: 100%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 100%; }
.grid-stack.grid-stack-4 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 100%; }

.grid-stack.grid-stack-5 > .grid-stack-item {
    min-width: 20%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-width='1'] {
    width: 20%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-x='1'] {
    left: 20%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 20%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 20%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-width='2'] {
    width: 40%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-x='2'] {
    left: 40%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 40%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 40%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-width='3'] {
    width: 60%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-x='3'] {
    left: 60%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 60%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 60%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-width='4'] {
    width: 80%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-x='4'] {
    left: 80%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 80%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 80%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-width='5'] {
    width: 100%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-x='5'] {
    left: 100%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 100%; }
.grid-stack.grid-stack-5 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 100%; }

.grid-stack.grid-stack-6 > .grid-stack-item {
    min-width: 16.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='1'] {
    width: 16.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='1'] {
    left: 16.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 16.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 16.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='2'] {
    width: 33.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='2'] {
    left: 33.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 33.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 33.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='3'] {
    width: 50%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='3'] {
    left: 50%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 50%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 50%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='4'] {
    width: 66.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='4'] {
    left: 66.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 66.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 66.6666666667%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='5'] {
    width: 83.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='5'] {
    left: 83.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 83.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 83.3333333333%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-width='6'] {
    width: 100%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-x='6'] {
    left: 100%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 100%; }
.grid-stack.grid-stack-6 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 100%; }

.grid-stack.grid-stack-7 > .grid-stack-item {
    min-width: 14.2857142857%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='1'] {
    width: 14.2857142857%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='1'] {
    left: 14.2857142857%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 14.2857142857%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 14.2857142857%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='2'] {
    width: 28.5714285714%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='2'] {
    left: 28.5714285714%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 28.5714285714%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 28.5714285714%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='3'] {
    width: 42.8571428571%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='3'] {
    left: 42.8571428571%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 42.8571428571%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 42.8571428571%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='4'] {
    width: 57.1428571429%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='4'] {
    left: 57.1428571429%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 57.1428571429%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 57.1428571429%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='5'] {
    width: 71.4285714286%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='5'] {
    left: 71.4285714286%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 71.4285714286%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 71.4285714286%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='6'] {
    width: 85.7142857143%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='6'] {
    left: 85.7142857143%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 85.7142857143%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 85.7142857143%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-width='7'] {
    width: 100%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-x='7'] {
    left: 100%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-min-width='7'] {
    min-width: 100%; }
.grid-stack.grid-stack-7 > .grid-stack-item[data-gs-max-width='7'] {
    max-width: 100%; }

.grid-stack.grid-stack-8 > .grid-stack-item {
    min-width: 12.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='1'] {
    width: 12.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='1'] {
    left: 12.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 12.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 12.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='2'] {
    width: 25%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='2'] {
    left: 25%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 25%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 25%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='3'] {
    width: 37.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='3'] {
    left: 37.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 37.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 37.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='4'] {
    width: 50%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='4'] {
    left: 50%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 50%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 50%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='5'] {
    width: 62.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='5'] {
    left: 62.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 62.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 62.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='6'] {
    width: 75%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='6'] {
    left: 75%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 75%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 75%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='7'] {
    width: 87.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='7'] {
    left: 87.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='7'] {
    min-width: 87.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='7'] {
    max-width: 87.5%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-width='8'] {
    width: 100%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-x='8'] {
    left: 100%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-min-width='8'] {
    min-width: 100%; }
.grid-stack.grid-stack-8 > .grid-stack-item[data-gs-max-width='8'] {
    max-width: 100%; }

.grid-stack.grid-stack-9 > .grid-stack-item {
    min-width: 11.1111111111%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='1'] {
    width: 11.1111111111%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='1'] {
    left: 11.1111111111%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 11.1111111111%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 11.1111111111%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='2'] {
    width: 22.2222222222%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='2'] {
    left: 22.2222222222%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 22.2222222222%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 22.2222222222%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='3'] {
    width: 33.3333333333%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='3'] {
    left: 33.3333333333%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 33.3333333333%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 33.3333333333%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='4'] {
    width: 44.4444444444%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='4'] {
    left: 44.4444444444%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 44.4444444444%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 44.4444444444%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='5'] {
    width: 55.5555555556%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='5'] {
    left: 55.5555555556%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 55.5555555556%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 55.5555555556%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='6'] {
    width: 66.6666666667%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='6'] {
    left: 66.6666666667%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 66.6666666667%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 66.6666666667%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='7'] {
    width: 77.7777777778%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='7'] {
    left: 77.7777777778%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='7'] {
    min-width: 77.7777777778%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='7'] {
    max-width: 77.7777777778%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='8'] {
    width: 88.8888888889%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='8'] {
    left: 88.8888888889%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='8'] {
    min-width: 88.8888888889%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='8'] {
    max-width: 88.8888888889%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-width='9'] {
    width: 100%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-x='9'] {
    left: 100%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-min-width='9'] {
    min-width: 100%; }
.grid-stack.grid-stack-9 > .grid-stack-item[data-gs-max-width='9'] {
    max-width: 100%; }

.grid-stack.grid-stack-10 > .grid-stack-item {
    min-width: 10%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='1'] {
    width: 10%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='1'] {
    left: 10%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 10%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 10%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='2'] {
    width: 20%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='2'] {
    left: 20%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 20%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 20%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='3'] {
    width: 30%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='3'] {
    left: 30%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 30%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 30%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='4'] {
    width: 40%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='4'] {
    left: 40%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 40%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 40%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='5'] {
    width: 50%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='5'] {
    left: 50%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 50%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 50%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='6'] {
    width: 60%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='6'] {
    left: 60%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 60%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 60%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='7'] {
    width: 70%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='7'] {
    left: 70%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='7'] {
    min-width: 70%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='7'] {
    max-width: 70%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='8'] {
    width: 80%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='8'] {
    left: 80%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='8'] {
    min-width: 80%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='8'] {
    max-width: 80%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='9'] {
    width: 90%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='9'] {
    left: 90%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='9'] {
    min-width: 90%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='9'] {
    max-width: 90%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-width='10'] {
    width: 100%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-x='10'] {
    left: 100%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-min-width='10'] {
    min-width: 100%; }
.grid-stack.grid-stack-10 > .grid-stack-item[data-gs-max-width='10'] {
    max-width: 100%; }

.grid-stack.grid-stack-11 > .grid-stack-item {
    min-width: 9.0909090909%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='1'] {
    width: 9.0909090909%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='1'] {
    left: 9.0909090909%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='1'] {
    min-width: 9.0909090909%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='1'] {
    max-width: 9.0909090909%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='2'] {
    width: 18.1818181818%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='2'] {
    left: 18.1818181818%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='2'] {
    min-width: 18.1818181818%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='2'] {
    max-width: 18.1818181818%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='3'] {
    width: 27.2727272727%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='3'] {
    left: 27.2727272727%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='3'] {
    min-width: 27.2727272727%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='3'] {
    max-width: 27.2727272727%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='4'] {
    width: 36.3636363636%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='4'] {
    left: 36.3636363636%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='4'] {
    min-width: 36.3636363636%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='4'] {
    max-width: 36.3636363636%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='5'] {
    width: 45.4545454545%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='5'] {
    left: 45.4545454545%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='5'] {
    min-width: 45.4545454545%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='5'] {
    max-width: 45.4545454545%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='6'] {
    width: 54.5454545455%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='6'] {
    left: 54.5454545455%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='6'] {
    min-width: 54.5454545455%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='6'] {
    max-width: 54.5454545455%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='7'] {
    width: 63.6363636364%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='7'] {
    left: 63.6363636364%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='7'] {
    min-width: 63.6363636364%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='7'] {
    max-width: 63.6363636364%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='8'] {
    width: 72.7272727273%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='8'] {
    left: 72.7272727273%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='8'] {
    min-width: 72.7272727273%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='8'] {
    max-width: 72.7272727273%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='9'] {
    width: 81.8181818182%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='9'] {
    left: 81.8181818182%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='9'] {
    min-width: 81.8181818182%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='9'] {
    max-width: 81.8181818182%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='10'] {
    width: 90.9090909091%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='10'] {
    left: 90.9090909091%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='10'] {
    min-width: 90.9090909091%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='10'] {
    max-width: 90.9090909091%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-width='11'] {
    width: 100%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-x='11'] {
    left: 100%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-min-width='11'] {
    min-width: 100%; }
.grid-stack.grid-stack-11 > .grid-stack-item[data-gs-max-width='11'] {
    max-width: 100%; }


/*------------------------------------*\
noUiSlider-Pips
***
noUiSlider - 7.0.10 - 2014-12-27 14:50:47
\*------------------------------------*/
.noUi-pips {
    position: absolute;
    padding-top: 4px;
    height: 50px;
    top: 100%;
    left: 0;
    color: #3B4B53;
    width: 100%;
}
.noUi-value {
    width: 40px;
    font-size: 13px;
    position: absolute;
    text-align: center;
    margin-left: -20px;
    padding-top: 14px;
}
.noUi-value-sub {
    color: #ccc;
    height: 10px;
    padding-top: 15px;
}
.noUi-marker {
    position: absolute;
    margin-left: -1px;
    width: 1px;
    height: 5px;
    background: #90A4AE;
}
.noUi-marker-large {
    width: 2px;
    height: 10px;
}
.noUi-base {
    position: relative;
    z-index: 2;
}
.noUi-handle {
    cursor: ew-resize;
}
.noUi-base .tooltip {
    position: absolute;
    /* display: block; */
    opacity: 1;
    top: 100%;
    left: 50%;
    margin-top: 10px;
    font-weight: 700;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 2px 6px;
    font-size: 14px;
    text-align: center;
    color: #3B4B53;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.noUi-base .tooltip:before {
    content:'';
    position: absolute;
    bottom: 100%;
    left: 50%;
    border-width: 4px;
    margin-left: -4px;
    border-color: transparent transparent #fff transparent;
    border-style: solid;
}

ol.carousel-indicators {
    margin-left: -30%!important;
}



/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
    color: transparent;
}

.xterm .xterm-accessibility-tree {
    user-select: text;
    white-space: pre;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
    z-index: 6;
    position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
    z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}

/* /javascripts/plugins_src/notetools/notetools.css */
/* NoteTools -- the app-wide @ reference picker + the shared marker chip.
 *
 * Scoping: the picker chrome is `ntl-` prefixed and is the only thing this file owns
 * globally (the panel is position:fixed and must escape any overflow container).
 * The MARKER chip class (`maw-project-ref`) is a contract shared with the Assembler, so it is
 * styled here ONLY under #notes / .ntl-note-scope -- never globally, or it would restyle the
 * Assembler's own chips wherever both stylesheets happen to load.
 */

/* ---------------- picker ---------------- */
.ntl-ref-picker {
    position: fixed;
    z-index: 10800;
    width: 400px;
    max-height: 280px;
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
    overflow: hidden;
    font-size: 13px;
    color: #1f2933;
}
.ntl-ref-head {
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
    font-weight: 600;
    font-size: 12px;
    color: #52606d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ntl-ref-head em { font-style: normal; color: #1f2933; }
.ntl-ref-options { overflow-y: auto; max-height: 246px; overscroll-behavior: contain; }
.ntl-ref-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    cursor: pointer;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease;
}
.ntl-ref-opt.is-active,
.ntl-ref-opt:hover { background: #eef4ff; }
.ntl-ref-back { color: #52606d; font-size: 12px; }
.ntl-ref-glyph {
    display: inline-block;
    min-width: 30px;
    padding: 1px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
    flex: 0 0 auto;
}
.ntl-ref-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntl-ref-id { flex: 0 0 auto; color: #9aa5b1; font-size: 11px; }
.ntl-ref-empty { padding: 10px 12px; color: #9aa5b1; font-size: 12px; }

/* -------- the stored marker chip (SCOPED -- shared class with the Assembler) -------- */
#notes .maw-project-ref,
.ntl-note-scope .maw-project-ref {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    border: 1px solid #d6e0ea;
    border-radius: 5px;
    background: #f5f8fb;
    color: #34516f;
    line-height: 1.35;
    font-size: .95em;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: baseline;
}
#notes button.maw-project-ref--active,
.ntl-note-scope button.maw-project-ref--active { cursor: pointer; }
#notes button.maw-project-ref--active:hover,
.ntl-note-scope button.maw-project-ref--active:hover { background: #e8f0fa; }
#notes .maw-project-ref--unavailable,
.ntl-note-scope .maw-project-ref--unavailable {
    color: #9aa5b1;
    border-style: dashed;
    background: #f7f8f9;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .ntl-ref-picker * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   ENTITY PICKER MODAL — domain -> search -> page -> pick
   ============================================================================ */
.ntl-pick-backdrop {
    position: fixed; inset: 0; z-index: 1060;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45);
    padding: 24px;
}
.ntl-pick {
    display: flex; flex-direction: column;
    width: 100%; max-width: 620px; max-height: 78vh;
    background: #fff; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .28);
    overflow: hidden;
}
.ntl-pick-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid #e8ebef;
    background: linear-gradient(180deg, #fbfcfd 0%, #f4f6f8 100%);
}
.ntl-pick-title { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: #1e293b; }
.ntl-pick-back, .ntl-pick-x {
    flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
    color: #5f6b78; font-size: 15px; line-height: 1; padding: 4px 7px; border-radius: 6px;
}
.ntl-pick-back:hover, .ntl-pick-x:hover { background: #e8ebef; color: #202124; }
.ntl-pick-back.is-hidden { visibility: hidden; }

.ntl-pick-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; }
.ntl-pick-lead { font-size: 12px; color: #6b7280; margin-bottom: 10px; }

/* step 1 — the domains */
.ntl-pick-domains {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
.ntl-pick-domain {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; text-align: left;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.ntl-pick-domain:hover { border-color: #94a3b8; background: #f8fafc; transform: translateY(-1px); }
.ntl-pick-domain-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the type chip, shared with the note cards */
.ntl-pick-glyph {
    flex: 0 0 auto; display: inline-block; min-width: 28px; padding: 2px 5px;
    border-radius: 4px; color: #fff; font-size: 10px; font-weight: 700;
    text-align: center; line-height: 1.4;
}

/* step 2 — search + results */
.ntl-pick-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ntl-pick-search {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid #dfe3e8; border-radius: 6px; font-size: 13px; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.ntl-pick-search:focus { border-color: #2c5282; box-shadow: 0 0 0 3px rgba(44,82,130,.12); outline: none; }

.ntl-pick-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; margin-bottom: 4px; text-align: left;
    border: 1px solid transparent; border-radius: 7px; background: #fff;
    font-size: 13px; color: #334155; cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ntl-pick-row:hover { background: #f1f5f9; border-color: #cbd5e1; }
.ntl-pick-row.is-selected { background: #eaf2fb; border-color: #2c5282; font-weight: 600; }
.ntl-pick-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntl-pick-row-id { flex: 0 0 auto; font-size: 11px; color: #94a3b8; }

.ntl-pick-empty { padding: 26px 10px; text-align: center; color: #94a3b8; font-size: 12.5px; }
.ntl-pick-loading { padding-top: 2px; }
.ntl-pick-skel {
    height: 36px; margin-bottom: 4px; border-radius: 7px;
    background: linear-gradient(90deg, #eef1f4 0%, #f8fafc 50%, #eef1f4 100%);
    background-size: 200% 100%; animation: ntl-pick-shimmer 1.2s ease-in-out infinite;
}
@keyframes ntl-pick-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.ntl-pick-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-top: 1px solid #e8ebef; background: #fbfcfd;
    min-height: 46px; box-sizing: border-box;
}
.ntl-pick-foot:empty { display: none; }
.ntl-pick-pager { display: flex; align-items: center; gap: 8px; }
.ntl-pick-pager button, .ntl-pick-clear {
    border: 1px solid #dfe3e8; background: #fff; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer;
}
.ntl-pick-pager button:hover:not([disabled]), .ntl-pick-clear:hover { background: #f1f5f9; }
.ntl-pick-pager button[disabled] { opacity: .45; cursor: default; }
.ntl-pick-page { font-size: 12px; color: #6b7280; }
.ntl-pick-clear { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    .ntl-pick-skel { animation: none; }
    .ntl-pick-domain:hover { transform: none; }
}

/* /stylesheets/spa/notes.css */
/* Notes application — page-scoped chrome.
 * Every rule is scoped to #notes / .note-share-modal. These pages reuse shared components
 * (fast_datatable, select2, the modal shell), so zero blast radius is the bar. */

#notes.content-col { padding: 0; }
#notes .pageTabsContainer { padding: 0; }

/* Modern pages do not show a persistent "All Notes" chip — the left rail is the way back. */
#notes #tabsList > li.Table_view { display: none; }

/* The tab strip itself is the SHARED Chrome strip in spa/apppage.css (.d3v-tab-strip,
   stamped by AppPage.Strip). Notes deliberately carries NO copy of it -- a fifth copy of
   that block is exactly what the shared one exists to prevent. Everything Notes used to
   declare here (its own padding/ellipsis/close-button rules, against its own hand-rolled
   `.note-tab-close` markup) is gone: the strip now renders the house `.remove-note-tab`
   control and apppage.css styles it.

   What stays below is only what is genuinely Notes-specific. */

/* ---- grid cells ---- */
#notes .note-row-name { font-weight: 600; color: #2c5282; }
#notes .notes-preview { color: #555; }
#notes .notes-empty-preview,
.note-share-modal .notes-empty-preview { color: #999; font-style: italic; }
#notes .notes-badge { margin-left: 4px; font-size: 11px; }
#notes .notes-badge-private { color: #856404; }
#notes .notes-badge-shared  { color: #2c5282; }
#notes .notes-entity-glyph {
    display: inline-block; min-width: 26px; padding: 1px 4px; border-radius: 4px;
    color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
#notes .notes-tag {
    display: inline-block; padding: 1px 7px; margin: 0 3px 2px 0;
    border-radius: 10px; background: #eef2f7; color: #52606d; font-size: 11px;
}

/* ---- editor tab ---- */
#notes .note-tab-pane { padding: 14px 18px 18px; }
#notes .note-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#notes .note-title {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid transparent; border-radius: 6px;
    padding: 6px 10px; font-size: 20px; font-weight: 600; color: #222;
    background: transparent;
    transition: background .2s ease, border-color .2s ease;
}
#notes .note-title:hover  { background: #f7f8fa; }
#notes .note-title:focus  { background: #fff; border-color: #cbd5e0; outline: none; }
#notes .note-editor-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#notes .note-save-state { font-size: 12px; color: #888; }
#notes .note-save-state.is-dirty { color: #d46b08; }

#notes .note-editor-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    padding: 10px 12px; margin-bottom: 10px;
    /* #e0e0e0 is the documented house card border token (frontend-style.md). */
    background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 8px;
}
/* A <label> cannot be a flex column here without !important: d3VIEW's core stylesheet carries
   an unscoped `label { display: block !important }` that beats any non-important rule. The
   !important below is load-bearing — not cargo cult.
   See .claude/rules/jquery-hide-does-not-work-on-a-label.md */
#notes .note-meta-field {
    display: flex !important; flex-direction: column; gap: 4px;
    flex: 1 1 260px; min-width: 0; margin: 0; font-weight: normal;
}
#notes .note-meta-field--narrow { flex: 0 1 180px; }
#notes .note-meta-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    font-weight: 600; color: #888; white-space: nowrap;
}
#notes .note-entity-picker { position: relative; display: block; }
#notes .note-project-value { font-size: 13px; color: #333; padding: 6px 0; }

#notes .note-editor-hint { font-size: 12px; color: #888; margin: 0 2px 8px; }
#notes .note-editor-hint strong { color: #2c5282; }

/* TinyMCE renders as a SIBLING of its target and hides the target, so this min-height
   applies ONLY to the plain-textarea fallback (when TinyMCE is unavailable). */
#notes .note-editor-body:not(:empty) { min-height: 280px; }
#notes .tox-tinymce { border-radius: 8px; }
#notes .note-plain-body { width: 100%; font-family: inherit; }
#notes .note-editor-foot { margin-top: 10px; font-size: 12px; color: #666; }

/* ============================================================================
   ACCESS MODAL  (.note-access-modal-host)
   One dialog for the level, the privilege it carries, and the named people.

   HOUSE TOKENS, not the page's own ramp. The rest of Notes runs on a slate ramp
   (#334155 / #94a3b8 / #dfe3e8) inherited from .ntl-btn, which mirrors the
   assembler's .maw-btn. That is fine for the page's own toolbar, but a MODAL is
   covered by an explicit spec -- primary #2c5282, backgrounds #e0ecf8, greys
   #333/#555/#888/#999, and a named segmented-toggle recipe -- so this block uses
   those. See .claude/rules/frontend-style.md and the pair-programming
   frontend-style reference.

   `.note-share-modal` is kept in every selector: the old host class is still
   emitted by anything constructing the retired NoteShareView alias, and a dialog
   that opens with no styling is worse than one that opens.
   ============================================================================ */

/* ---- header: white band, one icon-only control ----
   Mirrors `.modalContainer.newProject` in spa/projects.css, which is the house's
   modernized-modal reference -- reuse before duplicating.

   The shell emits fullscreen / dock / close unconditionally from the shared
   common.tpl header, with no per-view flag, so the two this dialog does not want
   are hidden HERE rather than in the template: editing common.tpl would change
   every modal in the product. Hiding is inert, not half-disabled -- both controls
   are pure click handlers (`click .dockwindow`, `click .toggle-fullscreen` in
   spa/views/helpers/views.modals.js), so with no element there is nothing to fire.
   A 520px settings dialog has nothing to maximize and nothing worth docking. */
.note-access-modal-host .modal-header .toggle-fullscreen,
.note-access-modal-host .modal-header .dockwindow { display: none; }

.note-access-modal-host .modal-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 16px 20px;
}
/* Was 14px/800/#666 -- bootstrap's own weight, heavier and greyer than any title
   in the system. */
.note-access-modal-host .modal-header .modal-title,
.note-access-modal-host .modal-header .modal-title-text {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}
.note-access-modal-host .modal-header .modal-title i.fa {
    margin-right: 8px;
    color: #2c5282;
}
/* window chrome -> subtle icon button. The bootstrap default was a glossy pill
   (36x28, border-radius 24px, #fcfcfc fill) sitting on a white header.

   TWO selectors because common.tpl has two header branches: the one the reference
   modal (.modalContainer.newProject) renders puts the controls inside
   `.modal-header-options`, and the one THIS dialog renders puts them in a bare
   `span.pull-right` -- measured, the close button's parent is `SPAN.pull-right`
   and `closest('.modal-header-options')` is null. The options-scoped rule alone
   silently matched nothing here.

   `.btn.closewindow` rather than `.closewindow` on purpose: the competitor is
   `.modal-header .btn:not(.dropdown-toggle) { border-radius: 24px }` at (0,3,0),
   which a three-class selector only TIES -- and a tie is settled by bundle order,
   i.e. by something this file does not control. Four classes wins outright, with
   no !important. */
.note-access-modal-host .modal-header .btn.closewindow,
.note-access-modal-host .modal-header-options .btn {
    background: transparent;
    background-image: none;
    border: none;
    color: #999;
    box-shadow: none;
    text-shadow: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.note-access-modal-host .modal-header .btn.closewindow:hover,
.note-access-modal-host .modal-header-options .btn:hover {
    background: #f0f0f0;
    color: #333;
}

/* The modern modal card: rounded, soft shadow, no bootstrap gloss anywhere. */
.note-access-modal-host .modal-content {
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
    overflow: hidden;
}
.note-access-modal-host .notes-empty-preview,
.note-share-modal .notes-empty-preview { color: #999; font-style: italic; }

.note-access-modal-host .note-access-lead,
.note-share-modal .note-share-lead { margin-bottom: 14px; color: #555; }
.note-access-modal-host .note-access-lead strong { color: #333; font-weight: 600; }

/* ---- the four levels ---- */
.note-access-modal-host .note-access-levels {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.note-access-modal-host .note-access-level {
    display: flex; align-items: flex-start; gap: 11px; width: 100%;
    padding: 10px 12px; text-align: left;
    border: 1px solid #e0e0e0; border-radius: 8px; background: #fff;
    font: inherit; color: #333; cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease,
                border-color .2s ease;
}
.note-access-modal-host .note-access-level:hover:not(:disabled) {
    border-color: #c6d9ec; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.note-access-modal-host .note-access-level.is-on {
    border-color: #2c5282; background: #e0ecf8;
}
/* Read-only for a non-owner. The SELECTED row keeps full contrast -- fading it
   would hide the one fact a non-owner opened this dialog to learn. */
.note-access-modal-host .note-access-level:disabled { cursor: default; }
.note-access-modal-host .note-access-level.is-locked:not(.is-on) { opacity: .5; }

/* House colored icon badge: square, 8px radius, tinted fill + matching text. */
.note-access-modal-host .note-access-level-icon {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f0f0f0; color: #888; font-size: 13px;
    transition: background .2s ease, color .2s ease;
}
.note-access-modal-host .note-access-level.is-on .note-access-level-icon {
    background: #fff; color: #2c5282;
}
.note-access-modal-host .note-access-level-text {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.note-access-modal-host .note-access-level-name {
    font-weight: 600; font-size: 13px; color: #333;
}
.note-access-modal-host .note-access-level-say { font-size: 12px; color: #888; line-height: 1.45; }
.note-access-modal-host .note-access-level-say strong { color: #555; font-weight: 600; }
.note-access-modal-host .note-access-level.is-on .note-access-level-say { color: #555; }
.note-access-modal-host .note-access-level.is-on .note-access-level-say strong { color: #2c5282; }

.note-access-modal-host .note-access-level-tick {
    flex: 0 0 auto; align-self: center; color: #2c5282; font-size: 13px; visibility: hidden;
}
.note-access-modal-host .note-access-level.is-on .note-access-level-tick { visibility: visible; }

/* ---- view / edit for the baseline audience ----
   The house segmented toggle, to the letter: #f0f0f0 track, transparent buttons,
   active = white + #2c5282 + a small shadow. It replaces a bordered pair with a
   solid-indigo active state, which was a control the design system does not have. */
.note-access-modal-host .note-access-priv {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 16px;
    border: 1px solid #e0e0e0; border-radius: 8px; background: #fff;
}
.note-access-modal-host .note-access-priv.hidden { display: none; }
.note-access-modal-host .note-access-priv-label {
    font-size: 12.5px; color: #555; font-weight: 600;
}
.note-access-modal-host .note-access-seg {
    display: inline-flex; margin-left: auto; gap: 2px;
    background: #f0f0f0; border-radius: 8px; padding: 3px;
}
.note-access-modal-host .note-access-perm {
    border: none; background: transparent; color: #888;
    padding: 5px 10px; border-radius: 6px;
    font: inherit; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.note-access-modal-host .note-access-perm:hover:not(:disabled):not(.is-on) {
    color: #555; background: #e8e8e8;
}
.note-access-modal-host .note-access-perm.is-on {
    background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.note-access-modal-host .note-access-perm:disabled { cursor: default; }

/* ---- the named people ---- */
.note-access-modal-host .note-access-people-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.note-access-modal-host .note-meta-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
    font-weight: 500; color: #888;
}
.note-access-modal-host .note-access-people-say { font-size: 11.5px; color: #999; }
.note-access-modal-host .note-access-unsaved { margin: 4px 0 0; font-size: 12.5px; }
.note-access-modal-host .note-access-readonly {
    margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #f0f0f0;
    font-size: 12px; color: #999;
}
.note-access-modal-host .note-access-readonly .fa { margin-right: 5px; }

.note-access-modal-host .note-share-row,
.note-share-modal .note-share-row { position: relative; margin-bottom: 10px; }
/* House modal input: #ddd / 6px / 13px, with the #2c5282 focus ring. `form-control`
   is bootstrap's, and its focus glow is the wrong blue. */
.note-access-modal-host .note-share-user {
    width: 100%; height: 34px; padding: 0 10px;
    border: 1px solid #ddd; border-radius: 6px; font-size: 13px; color: #333;
    box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.note-access-modal-host .note-share-user:focus {
    border-color: #2c5282; box-shadow: 0 0 0 2px rgba(44, 82, 130, .1); outline: none;
}
.note-access-modal-host .note-share-results,
.note-share-modal .note-share-results {
    border: 1px solid #e0e0e0; border-radius: 6px; margin-top: 4px;
    max-height: 200px; overflow-y: auto;
}
.note-access-modal-host .note-share-results:empty,
.note-share-modal .note-share-results:empty { display: none; }
.note-access-modal-host .note-share-result,
.note-share-modal .note-share-result {
    padding: 7px 10px; cursor: pointer; font-size: 13px; color: #333;
    transition: background .2s ease;
}
.note-access-modal-host .note-share-result:hover,
.note-share-modal .note-share-result:hover { background: #e0ecf8; }
.note-access-modal-host .note-share-list,
.note-share-modal .note-share-list { list-style: none; padding: 0; margin: 6px 0 0; }
.note-access-modal-host .note-share-list li,
.note-share-modal .note-share-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid #f0f0f0;
}
.note-access-modal-host .note-share-name {
    flex: 1 1 auto; min-width: 0; font-size: 13px; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-access-modal-host .note-share-perm {
    flex: 0 0 auto; height: 28px; padding: 0 6px; font-size: 12px; color: #333;
    border: 1px solid #ddd; border-radius: 6px; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.note-access-modal-host .note-share-perm:focus {
    border-color: #2c5282; box-shadow: 0 0 0 2px rgba(44, 82, 130, .1); outline: none;
}
.note-access-modal-host .note-share-perm-static { flex: 0 0 auto; font-size: 12px; color: #999; }

/* The dialog's own buttons. `.ntl-btn` is the page's button system, but the modal
   renders OUTSIDE #notes, so the selector has to name this host too -- see the
   .ntl-btn block below, which carries both scopes. */
.note-access-modal-host .ntl-btn.ntl-btn-sm {
    height: 26px; padding: 0 9px; font-size: 11.5px;
}

/* The framework's footer button is a bootstrap default: gradient, text-shadow,
   glossy. Flatten it to the house secondary (white + #ddd), scoped to this dialog. */
.note-access-modal-host .modal-footer .btn {
    background-image: none; text-shadow: none; box-shadow: none;
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    color: #555; font-size: 12.5px; font-weight: 600; padding: 6px 16px;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.note-access-modal-host .modal-footer .btn:hover {
    background: #f7f7f7; border-color: #ccc; color: #333;
}

/* GenericModalView's onResize (spa/views/helpers/views.modals.js) writes min-height,
   max-height and overflow-y INLINE on every .modal-body, sized from the dialog. For a
   short settings dialog that pins ~400px of content inside a 737px box with a scrollbar
   it does not need. The writer is shared core -- every modal in the product goes through
   it -- so this is the case `!important` is actually for: beating a rule we do not own,
   scoped to one dialog. It also has to be `!important` because the value it beats is an
   inline style, and it must keep winning after a window resize re-runs onResize.
   See .claude/rules/fix-the-writer-not-the-cascade.md */
.note-access-modal-host .modal-body {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
}

/* ---- the meta-row chip that opens it ---- */
#notes .note-access-chip { max-width: 100%; min-width: 0; }
#notes .note-access-chip-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "Project" on a note with no project admits NOBODY -- the read gate needs an
   active membership of project_id, and there is none at 0. The control used to
   say "Project" and mean "only you"; this is the one state worth colouring. */
#notes .note-access-chip--warn {
    border-color: #f0dda0; background: #fef3cd; color: #856404;
}
#notes .note-access-chip--warn:hover { background: #fdecb8; border-color: #e6cf8a; }


/* ---- frozen-shell fill chain (the Simulations / Physical Tests adapter, for Notes) ----
   The shell (style.css:12142, body.app-shell-frozen) fixes #main_container to the viewport
   and makes every wrapper a min-height:0 flex column, on the contract that the PAGE opts
   into filling it. Notes previously declared only `min-width: 0` here, so its whole stack
   stayed display:block / flex:0 1 auto and sized to its CONTENT.

   Measured at 1600x900 before this block: the Notes column ended at y=573 with 327px of
   dead space above the footer, while Simulations filled to y=864 (36px, the footer itself).
   That gap is what reads as "a big bottom margin" -- there is no margin anywhere in the
   stack (every marginBottom measured 0px); the column simply stopped early.

   Notes has no fast_datatable, so unlike the Simulations adapter the chain does not have to
   thread down to a virtual scroller: the visible PANE is the scroll region. */
body.app-shell-frozen #user-notes,
body.app-shell-frozen #notes,
body.app-shell-frozen #notes > .pageTabsContainer,
body.app-shell-frozen #notes #tabsContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* min-width:0 lets the column shrink below its content's intrinsic width instead of
       ballooning the subtree past the viewport (the Physical Tests note). */
    min-width: 0;
}

/* .two-col-flex is the ONE link in the chain that must NOT become a column -- it is the
   [rail | content] ROW. It only needs to grow and to be allowed to shrink; its direction
   comes from its own class. The Simulations adapter calls this out for the same reason
   ("NOTE: .two-col-flex deliberately keeps its row direction"), and lumping it into the
   rule above stacked the rail ON TOP of the content: measured, the content column moved
   from y=64 to y=232, exactly the rail's height. */
body.app-shell-frozen #user-notes > .two-col-flex {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* the tab strip is a fixed band, never a growing one */
body.app-shell-frozen #notes #tabsList { flex: 0 0 auto; }

/* The visible pane fills the remaining height and is the ONLY scroller, so the note wall
   scrolls inside the frozen box and the footer stays pinned. Scoped to :not(.hidden)
   because every open tab keeps its pane in the DOM -- letting a hidden pane grow would
   re-inflate the column it is meant to fit inside. */
body.app-shell-frozen #notes #tabsContent > .tabContent:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ...except on the LIST pane, where the toolbar is a fixed header band and only the wall
   scrolls -- the same split the Simulations adapter makes ("header bands stay fixed; the
   scroller fills whatever vertical space is left"). Without this the search box and the
   sort control scroll away with the notes, which is exactly when you want them. */
body.app-shell-frozen #notes #tabsContent > .main-content-view:not(.hidden) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}
body.app-shell-frozen #notes .notes-toolbar { flex: 0 0 auto; }
body.app-shell-frozen #notes .notes-card-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* the wall's own bottom breathing room now lives inside the scroller */
    padding-bottom: 16px;
}

/* ---- detail-tab UX: the list rail collapses smoothly when a note is open ----
   Keyed off a VISIBLE note pane. The list pane is .main-content-view, so a note tab is the
   only .note-tab-pane that can be un-hidden. The smooth transition is inherited from
   .sim-left-col in spa/simulation.css. */
#user-notes .two-col-flex:has(#notes #tabsContent > .tabContent[class*="note-tab-view-"]:not(.hidden)) .sim-left-col,
.two-col-flex:has(#notes #tabsContent > .tabContent[class*="note-tab-view-"]:not(.hidden)) .sim-left-col,
#user-notes .two-col-flex:has(#notes #tabsContent > .note-tab-pane:not(.hidden)) .sim-left-col,
.two-col-flex:has(#notes #tabsContent > .note-tab-pane:not(.hidden)) .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#user-notes .two-col-flex:has(#notes #tabsContent > .tabContent[class*="note-tab-view-"]:not(.hidden)) .sim-left-col-inner,
.two-col-flex:has(#notes #tabsContent > .tabContent[class*="note-tab-view-"]:not(.hidden)) .sim-left-col-inner,
#user-notes .two-col-flex:has(#notes #tabsContent > .note-tab-pane:not(.hidden)) .sim-left-col-inner,
.two-col-flex:has(#notes #tabsContent > .note-tab-pane:not(.hidden)) .sim-left-col-inner {
    transform: translateX(-100%);
}

/* ---- focus visibility (the quiet border alone was too weak) ---- */
#notes .note-title:focus-visible,
#notes .form-control:focus-visible,
#notes button:focus-visible,
#notes a:focus-visible,
.ntl-ref-picker:focus-visible {
    outline: 2px solid #2c5282;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- loading / empty states ----
   The template's only spinner lives on the hidden Table_view tab chip, so it can never be
   seen; the list needs its own in-place indicator. */
#notes .notes-loading { padding: 18px; pointer-events: none; opacity: .75; }
#notes .notes-skeleton-row {
    height: 34px; margin-bottom: 6px; border-radius: 6px;
    background: linear-gradient(90deg, #e9ecef 0%, #f7f8fa 50%, #e9ecef 100%);
    background-size: 200% 100%;
    animation: notes-shimmer 1.2s ease-in-out infinite;
}
@keyframes notes-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
#notes .notes-empty-state { padding: 48px 20px; color: #888; font-size: 13px; text-align: center; }
/* `> .fa` -- the DIRECT child only. This styles the big sticky-note glyph at the
   top of the empty state, but as a descendant selector it also reached the icon
   INSIDE the button below it, at (1,2,0) -- so the plus rendered 28px, grey and
   display:block, breaking onto its own line inside a primary button. */
#notes .notes-empty-state > .fa { display: block; margin-bottom: 10px; color: #999; font-size: 28px; }
#notes .notes-empty-state .ntl-btn { margin-top: 12px; }

#notes .note-tab-pane { animation: notes-fade-in .25s ease both; }
@keyframes notes-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    #notes * { animation: none !important; transition: none !important; }
}


/* =========================================================================
   THE NOTE WALL -- a card grid, not a datatable
   Same instrument as the Studies page (PLUGINS/plugins/studiesnew): a CSS grid
   of per-record cards. Here the card is shaped like a sticky note -- a paper
   tint, a folded corner, and an accent stripe coloured by the entity the note
   is ABOUT, so "notes on simulations" and "notes on workflows" are separable at
   a glance.
   ========================================================================= */

#notes .main-content-view { padding: 12px 18px 20px; }

/* ---- toolbar ---- */
#notes .notes-toolbar {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-bottom: 4px;
}
#notes .notes-toolbar-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
#notes .notes-toolbar-search .fa {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #9aa5b1; font-size: 13px; pointer-events: none;
}
#notes .notes-search {
    width: 100%; padding-left: 30px; height: 32px;
    border-radius: 16px; border: 1px solid #dfe3e8; background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
#notes .notes-search:focus { border-color: #2c5282; box-shadow: 0 0 0 3px rgba(44, 82, 130, .12); outline: none; }
#notes .notes-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#notes .notes-count { font-size: 12px; color: #6b7280; white-space: nowrap; }
#notes .notes-sort { height: 32px; width: auto; min-width: 160px; border-radius: 6px; font-size: 12px; }

/* ---- grid ---- */
#notes .notes-card-grid-inner {
    display: grid;
    /* A MAX, not 1fr: at 1600px `1fr` stretched every note into a wide index card and
       the board lost its note proportions. Cards keep ~4:3 and the row simply starts
       from the left. */
    grid-template-columns: repeat(auto-fill, minmax(265px, 300px));
    /* CENTER, not start. The column max is capped (see above) so the tracks do not
       stretch to fill the row -- which means the leftover space is real, and with
       `start` all of it pooled on the right as one wide empty band. Centering splits
       it evenly, so the board stays balanced at any pane width. */
    justify-content: center;
    gap: 18px;
    padding: 12px 0 8px;
    align-items: start;
}
#notes .note-card-item { min-width: 0; }
#notes .note-card-item:focus { outline: none; }
#notes .note-card-item:focus-visible .note-sticky {
    outline: 2px solid #2c5282; outline-offset: 2px;
}

/* ---- the sticky note ---- */
#notes .note-sticky {
    position: relative;
    display: flex; flex-direction: column;
    /* FIXED height, not min-height: a pinboard reads as a board only when the cards
       line up. With min-height the grid rows size to the tallest card and every other
       card in that row floats with dead space under it -- measured as a visibly ragged
       wall. Content clamps instead (title 2 lines, preview 4, tags 1 row). */
    height: 195px;
    overflow: hidden;
    padding: 12px 14px 10px;
    cursor: pointer;
    /* Real paper, not near-white. At #fffdf5 with a 3px saturated top BORDER the card
       read as a status card in a dashboard; the warm stock plus a thin stripe laid ON
       the paper reads as a note. The shadow is warm-tinted for the same reason. */
    background: #fff9df;
    border: 1px solid #eadfb8;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(65, 55, 30, .10), 0 9px 18px rgba(65, 55, 30, .05);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* The entity-type accent. A pseudo-element rather than a border so it does not change
   the box height and cannot be mistaken for card chrome. */
#notes .note-sticky::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--note-accent, #d9a441); opacity: .8;
}
#notes .note-sticky:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(65, 55, 30, .13), 0 14px 26px rgba(65, 55, 30, .10);
}

/* The folded bottom-left corner -- two triangles: the page shows through, then a
   shaded flap sits on top of it. Purely decorative, hence aria-hidden in the tpl. */
#notes .note-sticky-fold {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px;
    /* The flap: page colour on the outer half, a shaded turned-up corner on the inner
       half, with a hairline between them. Bottom-RIGHT because that is where a real
       sticky curls, and because the hover actions own the top-right. */
    background: linear-gradient(315deg,
        #eef1f5 0%, #eef1f5 48%,
        #ddd6bd 49%, #ddd6bd 50%,
        #f6f1de 51%, #f6f1de 100%);
    border-bottom-right-radius: 2px;
}

/* The title gets the FULL card width. Reserving 74px permanently for actions that are
   invisible 95% of the time forced almost every title to wrap -- the single most
   amateur-looking detail on the card. The action cluster instead carries a paper-coloured
   gradient and MASKS the title only while it is actually shown. */
#notes .note-sticky-head {
    display: flex; align-items: flex-start; gap: 6px;
    margin-bottom: 8px; padding-right: 12px; min-height: 20px;
}
#notes .note-sticky-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; color: #273442; line-height: 1.25;
    /* two lines, then ellipsis -- a long title must not push the preview out */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
#notes .note-sticky-badge { flex: 0 0 auto; font-size: 11px; color: #8a8f98; }
#notes .note-sticky-badge.fa-lock  { color: #a1740c; }
#notes .note-sticky-badge.fa-users { color: #2c5282; }

#notes .note-sticky-body { flex: 1 1 auto; min-height: 0; }
#notes .note-sticky-body { overflow: hidden; }
#notes .note-sticky-preview {
    margin: 0; font-size: 12px; line-height: 1.5; color: #5b6672;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
#notes .note-sticky-preview--empty { color: #a3adb8; font-style: italic; }

/* One row of tags, clipped -- a note with a dozen tags must not push the footer off
   a fixed-height card. */
#notes .note-sticky-tags {
    margin: 8px 0 0; max-height: 20px; overflow: hidden;
    white-space: nowrap; text-overflow: clip;
}

#notes .note-sticky-foot {
    display: flex; align-items: center; gap: 8px;
    /* padding-right clears the 22px folded corner -- without it the corner clips the
       relative timestamp, which sits flush right. */
    flex: 0 0 auto; margin-top: auto; padding-top: 8px; padding-right: 16px;
    border-top: 1px solid rgba(120, 100, 55, .16);
    font-size: 11px; color: #6b7280;
}
#notes .note-sticky-about { display: flex; align-items: center; gap: 5px; min-width: 0; }
#notes .note-sticky-about-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notes .note-sticky-about--none { color: #a3adb8; font-style: italic; }
#notes .note-sticky-when { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }

/* hover actions -- hidden until the card is hovered or keyboard-focused, so the
   resting state stays quiet. They stay reachable by keyboard because :focus-within
   reveals them. */
#notes .note-sticky-actions {
    position: absolute; top: 6px; right: 6px;
    display: flex; gap: 2px;
    padding-left: 14px;
    background: linear-gradient(90deg, rgba(255, 249, 223, 0), #fff9df 14px);
    opacity: 0; transform: translateY(-3px);
    transition: opacity .15s ease, transform .15s ease;
}
#notes .note-sticky:hover .note-sticky-actions,
#notes .note-sticky:focus-within .note-sticky-actions { opacity: 1; transform: none; }
#notes .note-sticky-action {
    border: 1px solid rgba(110, 95, 55, .16); background: rgba(255, 255, 255, .92);
    border-radius: 4px; width: 24px; height: 24px; padding: 0;
    color: #5f6b78; font-size: 11px; line-height: 1; cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, color .15s ease;
}
#notes .note-sticky-action:hover { background: #fff; color: #23303d; }
#notes .note-sticky-action--danger:hover { color: #c0392b; }
/* The pin TOGGLE reads as on when the note is pinned, so hovering a pinned card shows
   you the control you are about to undo rather than an identical-looking button. */
#notes .note-sticky-action.note-card-pin.is-on { color: #2c5282; background: #e0ecf8; }
#notes .note-sticky-action.note-card-pin.is-on:hover { background: #d3e4f4; }

/* ---- pinned ----
   The actions row is opacity:0 until hover, so it CANNOT carry the resting state --
   a pinned note has to look pinned when nobody is touching it. That is this marker.
   It sits in the top-right corner, where the actions appear, and steps aside on hover
   so the two never overlap. (Bottom-right is the sticky's curled fold.) */
#notes .note-sticky-pin {
    position: absolute; top: 8px; right: 9px;
    color: #2c5282; font-size: 11px; line-height: 1;
    transform: rotate(-20deg);
    transition: opacity .15s ease;
    pointer-events: none;
}
#notes .note-sticky:hover .note-sticky-pin,
#notes .note-sticky:focus-within .note-sticky-pin { opacity: 0; }
/* A pinned card carries a little more presence at rest than its neighbours -- enough
   to find at a glance on a full board, not enough to shout. */
#notes .note-card-item.is-pinned .note-sticky {
    border-color: #c6d9ec;
    box-shadow: 0 2px 10px rgba(44, 82, 130, .12);
}
/* The title reserves room for the marker so a long name cannot run under it. */
#notes .note-card-item.is-pinned .note-sticky-head { padding-right: 14px; }

/* ---- load more ---- */
#notes .notes-load-more-wrap { text-align: center; padding: 14px 0 4px; }
#notes .notes-load-more.is-loading { opacity: .6; cursor: progress; }

/* ---- skeleton (card-shaped, so the wall does not jump on first paint) ---- */
#notes .note-sticky-skeleton {
    height: 195px; border-radius: 2px;
    background: linear-gradient(90deg, #f1f0ea 0%, #faf9f4 50%, #f1f0ea 100%);
    background-size: 200% 100%;
    animation: notes-shimmer 1.2s ease-in-out infinite;
}

@media (max-width: 700px) {
    /* Back to 1fr below 700px: a hard 300px max would overflow a narrow column. */
    #notes .notes-card-grid-inner {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
    }
    #notes .notes-toolbar-right { margin-left: 0; width: 100%; }
}

/* A note with no entity but WITH a project gets the project chip, in the app-wide
   project colour from EntityReferences.FALLBACK_TYPES ('project' -> #7c3aed). */
#notes .notes-entity-glyph--project { background: #7c3aed; }


/* Tags belong to the paper. The shared `.notes-tag` cool grey is right in a grid cell
   and looks pasted-in on a warm note, so it is re-tinted INSIDE a sticky only. */
#notes .note-sticky .notes-tag { background: #f1ead3; color: #5f5847; }

/* The search pill was reading as a second global search bar. House radius, quiet fill,
   and a hairline under the toolbar to seat it against the wall. */
#notes .notes-search { border-radius: 6px; background: #fafbfc; }
#notes .notes-toolbar { padding-bottom: 12px; border-bottom: 1px solid #edf0f3; }

/* The back arrow sits left of the title in the editor head. Styling is the shared
   .d3v-back-to-all in spa/apppage.css; only the label width is page-specific. */
#notes .note-back-to-all { --d3v-back-label-w: 118px; margin-right: 2px; }

/* ============================================================================
   MODERN BUTTONS (`.ntl-btn`)
   The house modern button, ported from the Assembler's `.maw-shell .maw-btn`
   (PLUGINS/plugins/modelassembler/modelassembler.css:1886) — 32px tall, 8px
   radius, 12.5px/600, inline-flex with a 7px gap, quiet border + soft fill, and
   a gradient primary. That class cannot be reused directly: it is scoped to
   `.maw-shell` and reads assembler-only custom properties (--line-hi,
   --panel-soft, --ink, --indigo), so the VALUES are resolved here.
   Replaces the Bootstrap 3 `.btn.btn-sm.btn-primary/.btn-outline` the editor
   header was using, which is the one place Notes still looked its age.
   ============================================================================ */
.note-access-modal-host .ntl-btn,
#notes .ntl-btn {
    height: 32px;
    padding: 0 13px;
    border-radius: 8px;
    border: 1px solid #dfe3e8;
    background: #f7f9fb;
    color: #334155;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.note-access-modal-host .ntl-btn:hover ,
#notes .ntl-btn:hover { background: #eef2f6; border-color: #cbd5e1; }
.note-access-modal-host .ntl-btn:disabled ,
#notes .ntl-btn:disabled { opacity: .55; cursor: default; }
.note-access-modal-host .ntl-btn .fa ,
#notes .ntl-btn .fa { font-size: 12px; line-height: 1; }

#notes .ntl-btn-primary {
    border: none;
    color: #fff;
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
}
#notes .ntl-btn-primary:hover {
    background: linear-gradient(145deg, #7b8ff0, #4f46e5);
    box-shadow: 0 3px 12px rgba(79, 70, 229, .4);
}
#notes .ntl-btn-danger:hover { border-color: #f3b6b0; background: #fdf0ee; color: #c0392b; }

/* ---- the About picker button ---- */
#notes .note-entity-picker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
#notes .note-entity-btn { max-width: 100%; min-width: 0; }
#notes .note-entity-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notes .note-entity-btn-label--empty { color: #94a3b8; font-weight: 500; }
#notes .note-entity-clear { padding: 0 9px; }

/* ---- ONE status line under the meta row ----
   Per-field hints under Project AND Visibility stacked, and the row grew far taller than
   the controls inside it. The re-point rule moved to the About button's tooltip; the
   "who can actually read this" sentence -- the one that answers a real question -- became
   a single line here. */
#notes .note-meta-note {
    display: flex; align-items: baseline; gap: 6px;
    margin: 6px 0 2px;
    font-size: 11.5px; line-height: 1.45; color: #6b7280;
}
#notes .note-meta-note:has(.note-visibility-hint:empty) { display: none; }
#notes .note-meta-note .fa { flex: 0 0 auto; color: #94a3b8; font-size: 11px; }
#notes .note-meta-note strong { color: #475569; font-weight: 600; }

/* ============================================================================
   FULL-SCREEN EDITING
   A fixed-position class, not the Fullscreen API — the API needs a user gesture,
   can be refused by policy, and takes the element out of the document's stacking
   context, which would render the share dialog and the entity picker BEHIND the
   note. See NoteEditorView.onToggleFullscreen.
   ============================================================================ */
#notes .note-editor--fullscreen {
    /* ABSOLUTE, not fixed. `position: fixed; inset: 0` covers the VIEWPORT, which is wrong:
       the app chrome is fixed too, so the note's header slid UNDER the 52px topbar (the Save
       button half-hidden) and its left edge under the 44px icon rail -- measured, "About"
       rendered as "bout" and "Optional." as "ptional.".
       `#main_content` is `position: relative` and is the nearest positioned ancestor, with a
       box of exactly (44, 52, 1456x852) -- the content area inside the chrome. So inset:0
       against it is right for a left-pinned AND a right-pinned rail with no geometry
       constants duplicated from the shell. The scrolling `.tabContent` in between does not
       clip it: an absolutely positioned element is clipped only by overflow on an ancestor
       BETWEEN it and its containing block. */
    position: absolute;
    inset: 0;
    z-index: 1040;                 /* under .ntl-pick-backdrop (1060) on purpose */
    margin: 0;
    padding: 18px 22px 22px;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    animation: notes-fs-in .16s ease both;
}
@keyframes notes-fs-in { from { opacity: .6; } to { opacity: 1; } }

/* the app chrome cannot be reached while the note owns the viewport, and a
   background scrollbar behind a fixed overlay is just noise */
body.note-fullscreen-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   What full screen is FOR (Rahul, 8/21/26): "so that we can use all space
   currently taken by random UI above the note editor."

   The first cut only RELOCATED the editor -- it still carried its whole chrome
   above the writing surface, so going full screen bought the body almost
   nothing. Measured on the served editor, the stack above `.note-editor-body`:

       .note-editor-head    ~44px   title + actions        KEEP (Save lives here)
       .note-editor-meta    ~76px   About/Project/Vis/Tags COLLAPSE
       .note-meta-note      ~24px   "who can read this"    COLLAPSE
       .note-editor-hint    ~26px   "Type @ to reference"  COLLAPSE
                            ~170px reclaimed, plus the container's own padding.

   Nothing becomes unreachable: the Details button in the head brings the meta
   row back (`.note-fs-details`), so full screen is a focus mode, not a
   capability reduction.
   --------------------------------------------------------------------------- */
#notes .note-editor--fullscreen {
    display: flex;
    flex-direction: column;
    /* the BODY scrolls (TinyMCE has its own), not the container -- otherwise a
       long note scrolls the head and the Save button off the top. */
    overflow: hidden;
}
#notes .note-editor--fullscreen > .note-editor-head,
#notes .note-editor--fullscreen > .note-editor-foot { flex: 0 0 auto; }
#notes .note-editor--fullscreen > .note-editor-body {
    flex: 1 1 auto;
    min-height: 0;        /* a flex item defaults to min-height:auto and would
                             refuse to shrink below TinyMCE's own height */
    display: flex;
    flex-direction: column;
}
/* TinyMCE is a SIBLING of its target and a DIRECT CHILD of .note-editor -- the target
   (.note-editor-body) collapses to height 0. The old selector here said
   `> .note-editor-body > .tox-tinymce`, which matches nothing, so this never applied.
   Measured child list: head 43, meta 76, note 17, hint 17, body 0, tox 577.
   TinyMCE also carries an inline height it computed at mount, which fitEditor() re-sets;
   this just lets the box fill whatever the header leaves. */
#notes .note-editor--fullscreen > .tox-tinymce { flex: 1 1 auto; min-height: 0; }

/* the chrome full screen exists to reclaim */
#notes .note-editor--fullscreen > .note-editor-meta,
#notes .note-editor--fullscreen > .note-meta-note,
#notes .note-editor--fullscreen > .note-editor-hint { display: none; }

/* ...brought back on demand, without leaving full screen */
#notes .note-editor--fullscreen.note-fs-details > .note-editor-meta { display: flex; }
#notes .note-editor--fullscreen.note-fs-details > .note-meta-note   { display: flex; }
#notes .note-fs-details-btn[aria-expanded="true"] {
    background: #e0ecf8; border-color: #b6cfe8; color: #2c5282;
}

/* Back-to-all is dead weight here: full screen owns the content area, and Esc
   or the collapse button is the way out. Hiding it also stops a click that
   would navigate away with the editor still in its full-screen state. */
#notes .note-editor--fullscreen > .note-editor-head > .note-back-to-all { display: none; }

/* the title earns its size here -- this is a writing surface now */
#notes .note-editor--fullscreen > .note-editor-head { margin-bottom: 10px; }

/* Only the fallback plain textarea needs a floor; TinyMCE is flexed above.
   60vh was the old whole-editor guess and would now fight flex. */
#notes .note-editor--fullscreen > .note-editor-body > .note-plain-body { flex: 1 1 auto; min-height: 0; }

/* ============================================================================
   FILTER — project / entity type / visibility, with live counts
   Counts come from /api/note/facets through the SAME read gate the list uses,
   so an option can never offer zero results or hide a value that has some.
   ============================================================================ */
#notes .notes-filter-wrap { position: relative; flex: 0 0 auto; }
#notes .notes-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
    background: #2c5282; color: #fff; font-size: 10.5px; font-weight: 700;
}
#notes .notes-filter-btn[aria-expanded="true"] { background: #e8eef6; border-color: #b6cfe8; color: #2c5282; }

#notes .notes-filter-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
    width: 280px; max-height: 60vh; overflow-y: auto;
    padding: 10px; box-sizing: border-box;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
#notes .notes-filter-loading { padding: 14px 4px; color: #94a3b8; font-size: 12px; text-align: center; }
#notes .notes-filter-group + .notes-filter-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
#notes .notes-filter-title {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 6px;
}
#notes .notes-filter-opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 6px 8px; margin-bottom: 2px; text-align: left;
    border: 1px solid transparent; border-radius: 6px; background: transparent;
    font-size: 12.5px; color: #334155; cursor: pointer;
}
#notes .notes-filter-opt:hover { background: #f1f5f9; }
#notes .notes-filter-opt.is-on { background: #eaf2fb; border-color: #2c5282; font-weight: 600; color: #1c4e80; }
#notes .notes-filter-opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#notes .notes-filter-opt-count { flex: 0 0 auto; font-size: 11px; color: #94a3b8; }
#notes .notes-filter-opt.is-on .notes-filter-opt-count { color: #2c5282; }
#notes .notes-filter-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f1f5f9; text-align: right; }
#notes .notes-filter-clear {
    border: 1px solid #dfe3e8; background: #fff; border-radius: 6px;
    padding: 5px 10px; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer;
}
#notes .notes-filter-clear:hover { background: #f1f5f9; }

/* ---- the active-filter chips: every filter visible and individually removable ---- */
#notes .notes-active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
#notes .notes-active-filter {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 5px 3px 9px; border-radius: 12px;
    background: #eaf2fb; color: #1c4e80; font-size: 11.5px; font-weight: 600;
}
#notes .notes-active-filter-x {
    border: none; background: transparent; cursor: pointer; padding: 0 3px;
    color: #1c4e80; font-size: 13px; line-height: 1; opacity: .65;
}
#notes .notes-active-filter-x:hover { opacity: 1; }

/* /javascripts/plugins_src/calendar/calendarbs.lib.css */
@charset "UTF-8";
.fc {
    direction: ltr;
    text-align: left;
}

.fc-rtl {
    text-align: right;
}

body .fc {
    /* extra precedence to overcome jqui */
    font-size: 1em;
}

/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-highlight {
    /* when user is selecting cells */
    background: #bce8f1;
    opacity: 0.3;
}

.fc-bgevent {
    /* default look for background events */
    background: #8fdf82;
    opacity: 0.3;
}

.fc-nonbusiness {
    /* default look for non-business-hours areas */
    /* will inherit .fc-bgevent's styles */
    background: #d7d7d7;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-popover {
    position: absolute;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fc-popover .fc-header {
    /* TODO: be more consistent with fc-head/fc-body */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px;
}

.fc-rtl .fc-popover .fc-header {
    flex-direction: row-reverse;
}

.fc-popover .fc-header .fc-title {
    margin: 0 2px;
}

.fc-popover .fc-header .fc-close {
    cursor: pointer;
    opacity: 0.65;
    font-size: 1.1em;
}

/* Misc Reusable Components
--------------------------------------------------------------------------------------------------*/
.fc-divider {
    border-style: solid;
    border-width: 1px;
}

hr.fc-divider {
    height: 0;
    margin: 0;
    padding: 0 0 2px;
    /* height is unreliable across browsers, so use padding */
    border-width: 1px 0;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-mirror-skeleton {
    /* these element should always cling to top-left/right corners */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.fc-bg {
    bottom: 0;
    /* strech bg to bottom edge */
}

.fc-bg table {
    height: 100%;
    /* strech bg to bottom edge */
}

/* Tables
--------------------------------------------------------------------------------------------------*/
.fc table {
    width: 100%;
    box-sizing: border-box;
    /* fix scrollbar issue in firefox */
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1em;
    /* normalize cross-browser */
}

.fc th {
    text-align: center;
}

.fc th,
.fc td {
    border-style: solid;
    border-width: 1px;
    padding: 0;
    vertical-align: top;
}

.fc td.fc-today {
    border-style: double;
    /* overcome neighboring borders */
}

/* Internal Nav Links
--------------------------------------------------------------------------------------------------*/
a[data-goto] {
    cursor: pointer;
}

a[data-goto]:hover {
    text-decoration: underline;
}

/* Fake Table Rows
--------------------------------------------------------------------------------------------------*/
.fc .fc-row {
    /* extra precedence to overcome themes forcing a 1px border */
    /* no visible border by default. but make available if need be (scrollbar width compensation) */
    border-style: solid;
    border-width: 0;
}

.fc-row table {
    /* don't put left/right border on anything within a fake row.
       the outer tbody will worry about this */
    border-left: 0 hidden transparent;
    border-right: 0 hidden transparent;
    /* no bottom borders on rows */
    border-bottom: 0 hidden transparent;
}

.fc-row:first-child table {
    border-top: 0 hidden transparent;
    /* no top border on first row */
}

/* Day Row (used within the header and the DayGrid)
--------------------------------------------------------------------------------------------------*/
.fc-row {
    position: relative;
}

.fc-row .fc-bg {
    z-index: 1;
}

/* highlighting cells & background event skeleton */
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
    bottom: 0;
    /* stretch skeleton to bottom of row */
}

.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
    height: 100%;
    /* stretch skeleton to bottom of row */
}

.fc-row .fc-highlight-skeleton td,
.fc-row .fc-bgevent-skeleton td {
    border-color: transparent;
}

.fc-row .fc-bgevent-skeleton {
    z-index: 2;
}

.fc-row .fc-highlight-skeleton {
    z-index: 3;
}

/*
row content (which contains day/week numbers and events) as well as "mirror" (which contains
temporary rendered events).
*/
.fc-row .fc-content-skeleton {
    position: relative;
    z-index: 4;
    padding-bottom: 2px;
    /* matches the space above the events */
}

.fc-row .fc-mirror-skeleton {
    z-index: 5;
}

.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-mirror-skeleton td {
    /* see-through to the background below */
    /* extra precedence to prevent theme-provided backgrounds */
    background: none;
    /* in case <td>s are globally styled */
    border-color: transparent;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-mirror-skeleton td {
    /* don't put a border between events and/or the day number */
    border-bottom: 0;
}

.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-mirror-skeleton tbody td {
    /* don't put a border between event cells */
    border-top: 0;
}

/* Scrolling Container
--------------------------------------------------------------------------------------------------*/
.fc-scroller {
    -webkit-overflow-scrolling: touch;
}

/* TODO: move to timegrid/daygrid */
.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
    position: relative;
    /* re-scope all positions */
    width: 100%;
    /* hack to force re-sizing this inner element when scrollbars appear/disappear */
}

/* Global Event Styles
--------------------------------------------------------------------------------------------------*/
.fc-event {
    position: relative;
    /* for resize handle and other inner positioning */
    display: block;
    /* make the <a> tag block */
    font-size: 0.85em;
    line-height: 1.4;
    border-radius: 3px;
    border: 1px solid #3788d8;
}

.fc-event,
.fc-event-dot {
    background-color: #3788d8;
    /* default BACKGROUND color */
}

.fc-event,
.fc-event:hover {
    color: #fff;
    /* default TEXT color */
    text-decoration: none;
    /* if <a> has an href */
}

.fc-event[href],
.fc-event.fc-draggable {
    cursor: pointer;
    /* give events with links and draggable events a hand mouse pointer */
}

.fc-not-allowed,
.fc-not-allowed .fc-event {
    /* to override an event's custom cursor */
    cursor: not-allowed;
}

.fc-event .fc-content {
    position: relative;
    z-index: 2;
}

/* resizer (cursor AND touch devices) */
.fc-event .fc-resizer {
    position: absolute;
    z-index: 4;
}

/* resizer (touch devices) */
.fc-event .fc-resizer {
    display: none;
}

.fc-event.fc-allow-mouse-resize .fc-resizer,
.fc-event.fc-selected .fc-resizer {
    /* only show when hovering or selected (with touch) */
    display: block;
}

/* hit area */
.fc-event.fc-selected .fc-resizer:before {
    /* 40x40 touch area */
    content: "";
    position: absolute;
    z-index: 9999;
    /* user of this util can scope within a lower z-index */
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
}

/* Event Selection (only for touch devices)
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-selected {
    z-index: 9999 !important;
    /* overcomes inline z-index */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.fc-event.fc-selected:after {
    content: "";
    position: absolute;
    z-index: 1;
    /* same z-index as fc-bg, behind text */
    /* overcome the borders */
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    /* darkening effect */
    background: #000;
    opacity: 0.25;
}

/* Event Dragging
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-dragging.fc-selected {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.fc-event.fc-dragging:not(.fc-selected) {
    opacity: 0.75;
}

/* Horizontal Events
--------------------------------------------------------------------------------------------------*/
/* bigger touch area when selected */
.fc-h-event.fc-selected:before {
    content: "";
    position: absolute;
    z-index: 3;
    /* below resizers */
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
}

/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
    margin-left: 0;
    border-left-width: 0;
    padding-left: 1px;
    /* replace the border with padding */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
    margin-right: 0;
    border-right-width: 0;
    padding-right: 1px;
    /* replace the border with padding */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* resizer (cursor AND touch devices) */
/* left resizer  */
.fc-ltr .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-end-resizer {
    cursor: w-resize;
    left: -1px;
    /* overcome border */
}

/* right resizer */
.fc-ltr .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-start-resizer {
    cursor: e-resize;
    right: -1px;
    /* overcome border */
}

/* resizer (mouse devices) */
.fc-h-event.fc-allow-mouse-resize .fc-resizer {
    width: 7px;
    top: -1px;
    /* overcome top border */
    bottom: -1px;
    /* overcome bottom border */
}

/* resizer (touch devices) */
.fc-h-event.fc-selected .fc-resizer {
    /* 8x8 little dot */
    border-radius: 4px;
    border-width: 1px;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-color: inherit;
    background: #fff;
    /* vertically center */
    top: 50%;
    margin-top: -4px;
}

/* left resizer  */
.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
    margin-left: -4px;
    /* centers the 8x8 dot on the left edge */
}

/* right resizer */
.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
    margin-right: -4px;
    /* centers the 8x8 dot on the right edge */
}

/* DayGrid events
----------------------------------------------------------------------------------------------------
We use the full "fc-day-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-day-grid-event {
    margin: 1px 2px 0;
    /* spacing between events and edges */
    padding: 0 1px;
}

tr:first-child > td > .fc-day-grid-event {
    margin-top: 2px;
    /* a little bit more space before the first event */
}

.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
    margin-top: 0;
    /* except for mirror skeleton */
}

.fc-day-grid-event .fc-content {
    /* force events to be one-line tall */
    white-space: nowrap;
    overflow: hidden;
}

.fc-day-grid-event .fc-time {
    font-weight: bold;
}

/* resizer (cursor devices) */
/* left resizer  */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
    margin-left: -2px;
    /* to the day cell's edge */
}

/* right resizer */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
    margin-right: -2px;
    /* to the day cell's edge */
}

/* Event Limiting
--------------------------------------------------------------------------------------------------*/
/* "more" link that represents hidden events */
a.fc-more {
    margin: 1px 3px;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: none;
}

a.fc-more:hover {
    text-decoration: underline;
}

.fc-limited {
    /* rows and cells that are hidden because of a "more" link */
    display: none;
}

/* popover that appears when "more" link is clicked */
.fc-day-grid .fc-row {
    z-index: 1;
    /* make the "more" popover one higher than this */
}

.fc-more-popover {
    z-index: 2;
    width: 220px;
}

.fc-more-popover .fc-event-container {
    padding: 10px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-now-indicator {
    position: absolute;
    border: 0 solid red;
}

/* Utilities
--------------------------------------------------------------------------------------------------*/
.fc-unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
TODO: more distinction between this file and common.css
*/
/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
    border-color: #ddd;
}

.fc-unthemed .fc-popover {
    background-color: #fff;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
    background: #eee;
}

.fc-unthemed td.fc-today {
    background: #fcf8e3;
}

.fc-unthemed .fc-disabled-day {
    background: #d7d7d7;
    opacity: 0.3;
}

/* Icons
--------------------------------------------------------------------------------------------------
from https://feathericons.com/ and built with IcoMoon
*/
@font-face {
    font-family: "fcicons";
    src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype");
    font-weight: normal;
    font-style: normal;
}
.fc-icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "fcicons" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
    content: "";
}

.fc-icon-chevron-right:before {
    content: "";
}

.fc-icon-chevrons-left:before {
    content: "";
}

.fc-icon-chevrons-right:before {
    content: "";
}

.fc-icon-minus-square:before {
    content: "";
}

.fc-icon-plus-square:before {
    content: "";
}

.fc-icon-x:before {
    content: "";
}

.fc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
}

/* Buttons
--------------------------------------------------------------------------------------------------
Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
*/
/* reset */
.fc-button {
    border-radius: 0;
    overflow: visible;
    text-transform: none;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.fc-button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}

.fc-button {
    -webkit-appearance: button;
}

.fc-button:not(:disabled) {
    cursor: pointer;
}

.fc-button::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

/* theme */
.fc-button {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.4em 0.65em;
    font-size: 1em;
    line-height: 1.5;
    border-radius: 0.25em;
}

.fc-button:hover {
    color: #212529;
    text-decoration: none;
}

.fc-button:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.fc-button:disabled {
    opacity: 0.65;
}

/* "primary" coloring */
.fc-button-primary {
    color: #fff;
    background-color: #2C3E50;
    border-color: #2C3E50;
}

.fc-button-primary:hover {
    color: #fff;
    background-color: #1e2b37;
    border-color: #1a252f;
}

.fc-button-primary:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}

.fc-button-primary:disabled {
    color: #fff;
    background-color: #2C3E50;
    border-color: #2C3E50;
}

.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
    color: #fff;
    background-color: #1a252f;
    border-color: #151e27;
}

.fc-button-primary:not(:disabled):active:focus,
.fc-button-primary:not(:disabled).fc-button-active:focus {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}

/* icons within buttons */
.fc-button .fc-icon {
    vertical-align: middle;
    font-size: 1.5em;
}

/* Buttons Groups
--------------------------------------------------------------------------------------------------*/
.fc-button-group {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
}

.fc-button-group > .fc-button {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.fc-button-group > .fc-button:hover {
    z-index: 1;
}

.fc-button-group > .fc-button:focus,
.fc-button-group > .fc-button:active,
.fc-button-group > .fc-button.fc-button-active {
    z-index: 1;
}

.fc-button-group > .fc-button:not(:first-child) {
    margin-left: -1px;
}

.fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-button-group > .fc-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-popover {
    border-width: 1px;
    border-style: solid;
}

/* List View
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-list-item:hover td {
    background-color: #f5f5f5;
}

/* Toolbar
--------------------------------------------------------------------------------------------------*/
.fc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fc-toolbar.fc-header-toolbar {
    margin-bottom: 1.5em;
}

.fc-toolbar.fc-footer-toolbar {
    margin-top: 1.5em;
}

/* inner content */
.fc-toolbar > * > :not(:first-child) {
    margin-left: 0.75em;
}

.fc-toolbar h2 {
    font-size: 1.75em;
    margin: 0;
}

/* View Structure
--------------------------------------------------------------------------------------------------*/
.fc-view-container {
    position: relative;
}

/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.fc-view,
.fc-view > table {
    /* so dragged elements can be above the view's main element */
    position: relative;
    z-index: 1;
}

@media print {
    .fc {
        max-width: 100% !important;
    }

    /* Global Event Restyling
    --------------------------------------------------------------------------------------------------*/
    .fc-event {
        background: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }

    .fc-event .fc-resizer {
        display: none;
    }

    /* Table & Day-Row Restyling
    --------------------------------------------------------------------------------------------------*/
    .fc th,
    .fc td,
    .fc hr,
    .fc thead,
    .fc tbody,
    .fc-row {
        border-color: #ccc !important;
        background: #fff !important;
    }

    /* kill the overlaid, absolutely-positioned components */
    /* common... */
    .fc-bg,
    .fc-bgevent-skeleton,
    .fc-highlight-skeleton,
    .fc-mirror-skeleton,
    .fc-bgevent-container,
    .fc-business-container,
    .fc-highlight-container,
    .fc-mirror-container {
        display: none;
    }

    /* don't force a min-height on rows (for DayGrid) */
    .fc tbody .fc-row {
        height: auto !important;
        /* undo height that JS set in distributeHeight */
        min-height: 0 !important;
        /* undo the min-height from each view's specific stylesheet */
    }

    .fc tbody .fc-row .fc-content-skeleton {
        position: static;
        /* undo .fc-rigid */
        padding-bottom: 0 !important;
        /* use a more border-friendly method for this... */
    }

    .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
        /* only works in newer browsers */
        padding-bottom: 1em;
        /* ...gives space within the skeleton. also ensures min height in a way */
    }

    .fc tbody .fc-row .fc-content-skeleton table {
        /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
           making it look more like 3em. for other browers, it will already be this tall */
        height: 1em;
    }

    /* Undo month-view event limiting. Display all events and hide the "more" links
    --------------------------------------------------------------------------------------------------*/
    .fc-more-cell,
    .fc-more {
        display: none !important;
    }

    .fc tr.fc-limited {
        display: table-row !important;
    }

    .fc td.fc-limited {
        display: table-cell !important;
    }

    .fc-popover {
        display: none;
        /* never display the "more.." popover in print mode */
    }

    /* TimeGrid Restyling
    --------------------------------------------------------------------------------------------------*/
    /* undo the min-height 100% trick used to fill the container's height */
    .fc-time-grid {
        min-height: 0 !important;
    }

    /* don't display the side axis at all ("all-day" and time cells) */
    .fc-timeGrid-view .fc-axis {
        display: none;
    }

    /* don't display the horizontal lines */
    .fc-slats,
    .fc-time-grid hr {
        /* this hr is used when height is underused and needs to be filled */
        display: none !important;
        /* important overrides inline declaration */
    }

    /* let the container that holds the events be naturally positioned and create real height */
    .fc-time-grid .fc-content-skeleton {
        position: static;
    }

    /* in case there are no events, we still want some height */
    .fc-time-grid .fc-content-skeleton table {
        height: 4em;
    }

    /* kill the horizontal spacing made by the event container. event margins will be done below */
    .fc-time-grid .fc-event-container {
        margin: 0 !important;
    }

    /* TimeGrid *Event* Restyling
    --------------------------------------------------------------------------------------------------*/
    /* naturally position events, vertically stacking them */
    .fc-time-grid .fc-event {
        position: static !important;
        margin: 3px 2px !important;
    }

    /* for events that continue to a future day, give the bottom border back */
    .fc-time-grid .fc-event.fc-not-end {
        border-bottom-width: 1px !important;
    }

    /* indicate the event continues via "..." text */
    .fc-time-grid .fc-event.fc-not-end:after {
        content: "...";
    }

    /* for events that are continuations from previous days, give the top border back */
    .fc-time-grid .fc-event.fc-not-start {
        border-top-width: 1px !important;
    }

    /* indicate the event is a continuation via "..." text */
    .fc-time-grid .fc-event.fc-not-start:before {
        content: "...";
    }

    /* time */
    /* undo a previous declaration and let the time text span to a second line */
    .fc-time-grid .fc-event .fc-time {
        white-space: normal !important;
    }

    /* hide the the time that is normally displayed... */
    .fc-time-grid .fc-event .fc-time span {
        display: none;
    }

    /* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
    .fc-time-grid .fc-event .fc-time:after {
        content: attr(data-full);
    }

    /* Vertical Scroller & Containers
    --------------------------------------------------------------------------------------------------*/
    /* kill the scrollbars and allow natural height */
    .fc-scroller,
    .fc-day-grid-container,
    .fc-time-grid-container {
        /* */
        overflow: visible !important;
        height: auto !important;
    }

    /* kill the horizontal border/padding used to compensate for scrollbars */
    .fc-row {
        border: 0 !important;
        margin: 0 !important;
    }

    /* Button Controls
    --------------------------------------------------------------------------------------------------*/
    .fc-button-group,
    .fc button {
        display: none;
        /* don't display any button-related controls */
    }
}
.fc.fc-bootstrap a {
    text-decoration: none;
}

.fc.fc-bootstrap a[data-goto]:hover {
    text-decoration: underline;
}

.fc-bootstrap hr.fc-divider {
    border-color: inherit;
}

.fc-bootstrap .fc-today.alert {
    border-radius: 0;
}

.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
    color: #fff;
}

.fc-bootstrap .fc-popover.card {
    position: absolute;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-popover .card-body {
    padding: 0;
}

/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-time-grid .fc-slats table {
    /* some themes have background color. see through to slats */
    background: none;
}
/* DayGridView
--------------------------------------------------------------------------------------------------*/
/* day row structure */
.fc-dayGridWeek-view .fc-content-skeleton,
.fc-dayGridDay-view .fc-content-skeleton {
    /* there may be week numbers in these views, so no padding-top */
    padding-bottom: 1em;
    /* ensure a space at bottom of cell for user selecting/clicking */
}

.fc-dayGrid-view .fc-body .fc-row {
    min-height: 4em;
    /* ensure that all rows are at least this tall */
}

/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
.fc-row.fc-rigid {
    overflow: hidden;
}

.fc-row.fc-rigid .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* week and day number styling */
.fc-day-top.fc-other-month {
    opacity: 0.3;
}

.fc-dayGrid-view .fc-week-number,
.fc-dayGrid-view .fc-day-number {
    padding: 2px;
}

.fc-dayGrid-view th.fc-week-number,
.fc-dayGrid-view th.fc-day-number {
    padding: 0 2px;
    /* column headers can't have as much v space */
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
    float: right;
}

.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number {
    float: left;
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number {
    float: left;
    border-radius: 0 0 3px 0;
}

.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number {
    float: right;
    border-radius: 0 0 0 3px;
}

.fc-dayGrid-view .fc-day-top .fc-week-number {
    min-width: 1.5em;
    text-align: center;
    background-color: #f2f2f2;
    color: #808080;
}

/* when week/day number have own column */
.fc-dayGrid-view td.fc-week-number {
    text-align: center;
}

.fc-dayGrid-view td.fc-week-number > * {
    /* work around the way we do column resizing and ensure a minimum width */
    display: inline-block;
    min-width: 1.25em;
}
@charset "UTF-8";
/* TimeGridView all-day area
--------------------------------------------------------------------------------------------------*/
.fc-timeGrid-view .fc-day-grid {
    position: relative;
    z-index: 2;
    /* so the "more.." popover will be over the time grid */
}

.fc-timeGrid-view .fc-day-grid .fc-row {
    min-height: 3em;
    /* all-day section will never get shorter than this */
}

.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
    padding-bottom: 1em;
    /* give space underneath events for clicking/selecting days */
}

/* TimeGrid axis running down the side (for both the all-day area and the slot area)
--------------------------------------------------------------------------------------------------*/
.fc .fc-axis {
    /* .fc to overcome default cell styles */
    vertical-align: middle;
    padding: 0 4px;
    white-space: nowrap;
}

.fc-ltr .fc-axis {
    text-align: right;
}

.fc-rtl .fc-axis {
    text-align: left;
}

/* TimeGrid Structure
--------------------------------------------------------------------------------------------------*/
.fc-time-grid-container,
.fc-time-grid {
    /* so slats/bg/content/etc positions get scoped within here */
    position: relative;
    z-index: 1;
}

.fc-time-grid {
    min-height: 100%;
    /* so if height setting is 'auto', .fc-bg stretches to fill height */
}

.fc-time-grid table {
    /* don't put outer borders on slats/bg/content/etc */
    border: 0 hidden transparent;
}

.fc-time-grid > .fc-bg {
    z-index: 1;
}

.fc-time-grid .fc-slats,
.fc-time-grid > hr {
    /* the <hr> TimeGridView injects when grid is shorter than scroller */
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-content-col {
    position: relative;
    /* because now-indicator lives directly inside */
}

.fc-time-grid .fc-content-skeleton {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
}

/* divs within a cell within the fc-content-skeleton */
.fc-time-grid .fc-business-container {
    position: relative;
    z-index: 1;
}

.fc-time-grid .fc-bgevent-container {
    position: relative;
    z-index: 2;
}

.fc-time-grid .fc-highlight-container {
    position: relative;
    z-index: 3;
}

.fc-time-grid .fc-event-container {
    position: relative;
    z-index: 4;
}

.fc-time-grid .fc-now-indicator-line {
    z-index: 5;
}

.fc-time-grid .fc-mirror-container {
    /* also is fc-event-container */
    position: relative;
    z-index: 6;
}

/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
    height: 1.5em;
    border-bottom: 0;
    /* each cell is responsible for its top border */
}

.fc-time-grid .fc-slats .fc-minor td {
    border-top-style: dotted;
}

/* TimeGrid Highlighting Slots
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-highlight-container {
    /* a div within a cell within the fc-highlight-skeleton */
    position: relative;
    /* scopes the left/right of the fc-highlight to be in the column */
}

.fc-time-grid .fc-highlight {
    position: absolute;
    left: 0;
    right: 0;
    /* top and bottom will be in by JS */
}

/* TimeGrid Event Containment
--------------------------------------------------------------------------------------------------*/
.fc-ltr .fc-time-grid .fc-event-container {
    /* space on the sides of events for LTR (default) */
    margin: 0 2.5% 0 2px;
}

.fc-rtl .fc-time-grid .fc-event-container {
    /* space on the sides of events for RTL */
    margin: 0 2px 0 2.5%;
}

.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
    position: absolute;
    z-index: 1;
    /* scope inner z-index's */
}

.fc-time-grid .fc-bgevent {
    /* background events always span full width */
    left: 0;
    right: 0;
}

/* TimeGrid Event Styling
----------------------------------------------------------------------------------------------------
We use the full "fc-time-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-time-grid-event {
    margin-bottom: 1px;
}

.fc-time-grid-event-inset {
    -webkit-box-shadow: 0px 0px 0px 1px #fff;
    box-shadow: 0px 0px 0px 1px #fff;
}

.fc-time-grid-event.fc-not-start {
    /* events that are continuing from another day */
    /* replace space made by the top border with padding */
    border-top-width: 0;
    padding-top: 1px;
    /* remove top rounded corners */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.fc-time-grid-event.fc-not-end {
    /* replace space made by the top border with padding */
    border-bottom-width: 0;
    padding-bottom: 1px;
    /* remove bottom rounded corners */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.fc-time-grid-event .fc-content {
    overflow: hidden;
    max-height: 100%;
}

.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
    padding: 0 1px;
}

.fc-time-grid-event .fc-time {
    font-size: 0.85em;
    white-space: nowrap;
}

/* short mode, where time and title are on the same line */
.fc-time-grid-event.fc-short .fc-content {
    /* don't wrap to second line (now that contents will be inline) */
    white-space: nowrap;
}

.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
    /* put the time and title on the same line */
    display: inline-block;
    vertical-align: top;
}

.fc-time-grid-event.fc-short .fc-time span {
    display: none;
    /* don't display the full time text... */
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: attr(data-start);
    /* ...instead, display only the start time */
}

.fc-time-grid-event.fc-short .fc-time:after {
    content: " - ";
    /* seperate with a dash, wrapped in nbsp's */
}

.fc-time-grid-event.fc-short .fc-title {
    font-size: 0.85em;
    /* make the title text the same size as the time */
    padding: 0;
    /* undo padding from above */
}

/* resizer (cursor device) */
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    overflow: hidden;
    line-height: 8px;
    font-size: 11px;
    font-family: monospace;
    text-align: center;
    cursor: s-resize;
}

.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
    content: "=";
}

/* resizer (touch device) */
.fc-time-grid-event.fc-selected .fc-resizer {
    /* 10x10 dot */
    border-radius: 5px;
    border-width: 1px;
    width: 8px;
    height: 8px;
    border-style: solid;
    border-color: inherit;
    background: #fff;
    /* horizontally center */
    left: 50%;
    margin-left: -5px;
    /* center on the bottom edge */
    bottom: -5px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-now-indicator-line {
    border-top-width: 1px;
    left: 0;
    right: 0;
}

/* arrow on axis */
.fc-time-grid .fc-now-indicator-arrow {
    margin-top: -5px;
    /* vertically center on top coordinate */
}

.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
    left: 0;
    /* triangle pointing right... */
    border-width: 5px 0 5px 6px;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
    right: 0;
    /* triangle pointing left... */
    border-width: 5px 6px 5px 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
/* List View
--------------------------------------------------------------------------------------------------*/
/* possibly reusable */
.fc-event-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

/* view wrapper */
.fc-rtl .fc-list-view {
    direction: rtl;
    /* unlike core views, leverage browser RTL */
}

.fc-list-view {
    border-width: 1px;
    border-style: solid;
}

/* table resets */
.fc .fc-list-table {
    table-layout: auto;
    /* for shrinkwrapping cell content */
}

.fc-list-table td {
    border-width: 1px 0 0;
    padding: 8px 14px;
}

.fc-list-table tr:first-child td {
    border-top-width: 0;
}

/* day headings with the list */
.fc-list-heading {
    border-bottom-width: 1px;
}

.fc-list-heading td {
    font-weight: bold;
}

.fc-ltr .fc-list-heading-main {
    float: left;
}

.fc-ltr .fc-list-heading-alt {
    float: right;
}

.fc-rtl .fc-list-heading-main {
    float: right;
}

.fc-rtl .fc-list-heading-alt {
    float: left;
}

/* event list items */
.fc-list-item.fc-has-url {
    cursor: pointer;
    /* whole row will be clickable */
}

.fc-list-item-marker,
.fc-list-item-time {
    white-space: nowrap;
    width: 1px;
}

/* make the dot closer to the event title */
.fc-ltr .fc-list-item-marker {
    padding-right: 0;
}

.fc-rtl .fc-list-item-marker {
    padding-left: 0;
}

.fc-list-item-title a {
    /* every event title cell has an <a> tag */
    text-decoration: none;
    color: inherit;
}

.fc-list-item-title a[href]:hover {
    /* hover effect only on titles with hrefs */
    text-decoration: underline;
}

/* message when no events */
.fc-list-empty-wrap2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc-list-empty-wrap1 {
    width: 100%;
    height: 100%;
    display: table;
}

.fc-list-empty {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.fc-unthemed .fc-list-empty {
    /* theme will provide own background */
    background-color: #eee;
}
/* /javascripts/plugins_src/calendar/main.css */
div.d3view-calendar div.fc-content .fc-title {
    margin: 0 4px;
}
div.d3view-calendar div.fc-content div.progress {
    background: #5bc0de;
}
div.d3view-calendar div.fc-content div.progress .progress-bar {
    background: none;
}

div.d3view-calendar div.fc-content div.progress.selected {
    border: 3px solid #428BCA;
}
div.d3view-calendar .fc-more-popover .fc-event-container {
    padding: 10px;
    max-height: 250px;
    overflow: auto;
}
div.d3view-calendar .fc-popover .fc-header .fc-title {
    font-size: 13px;
}
div.d3view-calendar .fc-left {
    display: flex;
    align-items: center;
}

div.d3view-calendar-container .calendar-legends {
    position: absolute;
    right: 0;
    top: 40px;
    height: 100%;
}
/* /javascripts/plugins_src/calendar_heatmap/calendar_heatmap.css */
.calendar-heatmap {
    --aspactRatio: auto;
    --calendarHeaderHeight: 55px;
}

.calendar-heatmap {
    width: 100%;
    aspect-ratio: var(--aspactRatio);
    position: relative;
}

.calendar-heatmap.grid-type-1 {
    display: grid;
    grid-template-rows: var(--calendarHeaderHeight) calc(100% - var(--calendarHeaderHeight));
}

.calendar-heatmap.grid-type-2 {
    display: grid;
    grid-template-rows: 100%;
}

.calendar-heatmap .calendar-nav {
    border-bottom: 1px solid #aaa;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
}

.calendar-heatmap .calendar-nav .calendar-controls {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 5px;
}

.calendar-heatmap .calendar-body {
    max-width: 100%;
    overflow: auto;
}

.calendar-heatmap .calendar-pagination {
    border-top: 1px solid #aaa;
}

.calendar-heatmap .ch-pointer {
    cursor: pointer;
}

.calendar-heatmap .ch-icon-previous {
    position: absolute;
    left: 0px;
    top: calc(100%/2 - 25px);
}

.calendar-heatmap .ch-icon-next {
    position: absolute;
    right: 0px;
    top: calc(100%/2 - 25px);
}

.calendar-heatmap .ch-icon {
    padding: 10px;
    z-index: 10;
    border-radius: 4px;
}

.calendar-heatmap .ch-icon:hover {
    background: #eee;
}
/* /javascripts/plugins_src/layout_manager/layout_manager.css */
.layout-manager {
    --aspectRatio: auto;
    --handleColorHover: #4c9aff;
    --handleColor: #f4f4f4;
}

.layout-manager {
    display: flex;
    flex-flow: row wrap;
    aspect-ratio: var(--aspectRatio);
}

.layout-manager .layout-grid-item {
    border: 1px solid #DDD !important;
}

.layout-manager .ui-resizable-resizing {
    border-color:steelblue !important;
}


/* /stylesheets/icons/style.css */
@font-face {
  font-family: 'd3view-icons';
  src:  url('/fonts/d3view-icons.eot?d54g4b');
  src:  url('/fonts/d3view-icons.eot?d54g4b#iefix') format('embedded-opentype'),
    url('/fonts/d3view-icons.ttf?d54g4b') format('truetype'),
    url('/fonts/d3view-icons.woff?d54g4b') format('woff'),
    url('/fonts/d3view-icons.svg?d54g4b#d3view-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'd3view-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-softwareConfig_display:before {
  content: "\e9dd";
}
.icon-softwareConfig_haptic:before {
  content: "\e9de";
}
.icon-softwareConfig_holography:before {
  content: "\e9df";
}
.icon-softwareConfig_lighting:before {
  content: "\e9e0";
}
.icon-softwareConfig_project:before {
  content: "\e9e1";
}
.icon-softwareConfig_smartsurface:before {
  content: "\e9e2";
}
.icon-softwareConfig_sound:before {
  content: "\e9e3";
}
.icon-softwareConfig_thermoelements:before {
  content: "\e9e4";
}
.icon-sensory_FEEL:before {
  content: "\eb85";
}
.icon-sensory_HEAR:before {
  content: "\eb86";
}
.icon-sensory_SEE:before {
  content: "\eb87";
}
.icon-softwareConfig_brainwave:before {
  content: "\eb88";
}
.icon-softwareConfig_gaze:before {
  content: "\eb89";
}
.icon-softwareConfig_gesture:before {
  content: "\eb8a";
}
.icon-softwareConfig_identitybiometrics:before {
  content: "\eb8b";
}
.icon-softwareConfig_monitorbiometrics:before {
  content: "\eb8c";
}
.icon-softwareConfig_physicalcontrols:before {
  content: "\eb8e";
}
.icon-softwareConfig_touch:before {
  content: "\eb8f";
}
.icon-softwareConfig_voice:before {
  content: "\eb90";
}
.icon-simlytiks_Layout_11:before {
  content: "\e922";
}
.icon-simlytiks_custom_active:before {
  content: "\e923";
  color: #008cff;
}
.icon-simlytiks_custom_hover:before {
  content: "\e924";
  color: #008cff;
}
.icon-simlytiks_custom:before {
  content: "\e925";
}
.icon-simlytiks_dashboard_active:before {
  content: "\e926";
  color: #008cff;
}
.icon-simlytiks_dashboard_hover:before {
  content: "\e927";
  color: #008cff;
}
.icon-simlytiks_dashboard1:before {
  content: "\e928";
}
.icon-simlytiks_freeform_active:before {
  content: "\e929";
  color: #008cff;
}
.icon-simlytiks_freeform_hover:before {
  content: "\e92a";
  color: #008cff;
}
.icon-simlytiks_freeform:before {
  content: "\e92b";
}
.icon-simlytiks_Layout_1_active:before {
  content: "\e92c";
  color: #008cff;
}
.icon-simlytiks_Layout_1_hover:before {
  content: "\e92d";
  color: #008cff;
}
.icon-simlytiks_Layout_1:before {
  content: "\e92e";
}
.icon-simlytiks_Layout_2_active:before {
  content: "\e92f";
  color: #008cff;
}
.icon-simlytiks_Layout_2_hover:before {
  content: "\e930";
  color: #008cff;
}
.icon-simlytiks_Layout_2:before {
  content: "\e931";
}
.icon-simlytiks_Layout_10_active:before {
  content: "\e932";
  color: #008cff;
}
.icon-simlytiks_Layout_10_hover:before {
  content: "\e933";
  color: #008cff;
}
.icon-simlytiks_Layout_10:before {
  content: "\e934";
}
.icon-simlytiks_Layout_4-_active:before {
  content: "\e935";
  color: #008cff;
}
.icon-simlytiks_Layout_4_hover:before {
  content: "\e936";
  color: #008cff;
}
.icon-simlytiks_Layout_4:before {
  content: "\e937";
}
.icon-simlytiks_Layout_5_active:before {
  content: "\e938";
  color: #008cff;
}
.icon-simlytiks_Layout_5_hover:before {
  content: "\e939";
  color: #008cff;
}
.icon-simlytiks_Layout_5:before {
  content: "\e98e";
}
.icon-simlytiks_Layout_6_active:before {
  content: "\e98f";
  color: #008cff;
}
.icon-simlytiks_Layout_6_hover:before {
  content: "\e990";
  color: #008cff;
}
.icon-simlytiks_Layout_6:before {
  content: "\e991";
}
.icon-simlytiks_Layout_7_active:before {
  content: "\e992";
  color: #008cff;
}
.icon-simlytiks_Layout_7_hover:before {
  content: "\e993";
  color: #008cff;
}
.icon-simlytiks_Layout_7:before {
  content: "\e994";
}
.icon-simlytiks_Layout_8_active:before {
  content: "\e995";
  color: #008cff;
}
.icon-simlytiks_Layout_8_hover:before {
  content: "\e996";
  color: #008cff;
}
.icon-simlytiks_Layout_8:before {
  content: "\e997";
}
.icon-simlytiks_Layout_9_active:before {
  content: "\e998";
  color: #008cff;
}
.icon-simlytiks_Layout_9_hover:before {
  content: "\e999";
  color: #008cff;
}
.icon-simlytiks_Layout_9:before {
  content: "\e99a";
}
.icon-simlytiks_Layout_3_active:before {
  content: "\e99b";
  color: #008cff;
}
.icon-simlytiks_Layout_3_hover:before {
  content: "\e99f";
  color: #008cff;
}
.icon-simlytiks_Layout_3:before {
  content: "\e9a0";
}
.icon-simlytiks_Layout_11_active:before {
  content: "\e9e8";
  color: #008cff;
}
.icon-simlytiks_Layout_11_hover:before {
  content: "\e9e9";
  color: #008cff;
}
.icon-simlytiks_Layout_12_active:before {
  content: "\e9ea";
  color: #008cff;
}
.icon-simlytiks_Layout_12_hover:before {
  content: "\e9eb";
  color: #008cff;
}
.icon-simlytiks_Layout_12:before {
  content: "\e9ec";
}
.icon-simlytiks_Layout_13_active:before {
  content: "\e9ed";
  color: #008cff;
}
.icon-simlytiks_Layout_13_hover:before {
  content: "\e9ee";
  color: #008cff;
}
.icon-simlytiks_Layout_13:before {
  content: "\e9ef";
}
.icon-simlytiks_Layout_14_active:before {
  content: "\e9f0";
  color: #008cff;
}
.icon-simlytiks_Layout_14_hover:before {
  content: "\e9f1";
  color: #008cff;
}
.icon-simlytiks_Layout_14:before {
  content: "\e9f2";
}
.icon-simlytiks_Layout_15_active:before {
  content: "\e9f3";
  color: #008cff;
}
.icon-simlytiks_Layout_15_hover:before {
  content: "\e9f4";
  color: #008cff;
}
.icon-simlytiks_Layout_15:before {
  content: "\e9f5";
}
.icon-simlytiks_Layout_16_active:before {
  content: "\e9f6";
  color: #008cff;
}
.icon-simlytiks_Layout_16_hover:before {
  content: "\e9f7";
  color: #008cff;
}
.icon-simlytiks_Layout_16:before {
  content: "\e9f8";
}
.icon-simlytiks_Layout_17_active:before {
  content: "\e9f9";
  color: #008cff;
}
.icon-simlytiks_Layout_17_hover:before {
  content: "\e9fa";
  color: #008cff;
}
.icon-simlytiks_Layout_17:before {
  content: "\e9fb";
}
.icon-simlytiks_Layout_18_active:before {
  content: "\e9fc";
  color: #008cff;
}
.icon-simlytiks_Layout_18_hover:before {
  content: "\e9fd";
  color: #008cff;
}
.icon-simlytiks_Layout_18:before {
  content: "\e9fe";
}
.icon-simlytiks_Layout_19_active:before {
  content: "\e9ff";
  color: #008cff;
}
.icon-simlytiks_Layout_19_hover:before {
  content: "\ea00";
  color: #008cff;
}
.icon-simlytiks_Layout_19:before {
  content: "\ea01";
}
.icon-simlytiks_Layout_20_active:before {
  content: "\ea02";
  color: #008cff;
}
.icon-simlytiks_Layout_20_hover:before {
  content: "\ea03";
  color: #008cff;
}
.icon-simlytiks_Layout_20:before {
  content: "\ea04";
}
.icon-simlytiks_Layout_21_active:before {
  content: "\ea05";
  color: #008cff;
}
.icon-simlytiks_Layout_21_hover:before {
  content: "\ea06";
  color: #008cff;
}
.icon-simlytiks_Layout_21:before {
  content: "\ea07";
}
.icon-simlytiks_onepager_active:before {
  content: "\ea08";
  color: #008cff;
}
.icon-simlytiks_onepager_hover:before {
  content: "\ea09";
  color: #008cff;
}
.icon-simlytiks_onepager:before {
  content: "\ea0a";
}
.icon-science_HVAC:before {
  content: "\e900";
}
.icon-simlytiks_history:before {
  content: "\eb5f";
}
.icon-pair_arrows:before {
  content: "\eb46";
}
.icon-pair_hand:before {
  content: "\eb5c";
}
.icon-simlytiks_pages:before {
  content: "\eb5d";
}
.icon-simlytiks_sections:before {
  content: "\eb5e";
}
.icon-aspectRatio:before {
  content: "\eb45";
}
.icon-newton_datum_freeform:before {
  content: "\e95b";
}
.icon-newton_autofit:before {
  content: "\e93a";
}
.icon-newton_canvas:before {
  content: "\e93b";
}
.icon-newton_curvediff:before {
  content: "\e94f";
}
.icon-newton_histogram:before {
  content: "\e950";
}
.icon-newton_lagcross:before {
  content: "\e951";
}
.icon-newton_points-copy:before {
  content: "\e952";
}
.icon-newton_points:before {
  content: "\e953";
}
.icon-newton_stackedbar:before {
  content: "\e959";
}
.icon-simlytiks_button:before {
  content: "\e90d";
}
.icon-simlytiks_dashboard:before {
  content: "\e90e";
}
.icon-simlytiks_divider:before {
  content: "\e90f";
}
.icon-simlytiks_heading:before {
  content: "\e910";
}
.icon-simlytiks_icon:before {
  content: "\e911";
}
.icon-simlytiks_image:before {
  content: "\e912";
}
.icon-simlytiks_inner_section:before {
  content: "\e913";
}
.icon-simlytiks_map:before {
  content: "\e914";
}
.icon-simlytiks_spacer:before {
  content: "\e915";
}
.icon-simlytiks_text_editor:before {
  content: "\e916";
}
.icon-simlytiks_video:before {
  content: "\e917";
}
.icon-PassengerDriver_4ChannelABS:before {
  content: "\e901";
}
.icon-PassengerDriver_Baby:before {
  content: "\e902";
}
.icon-PassengerDriver_BabySeat:before {
  content: "\e903";
}
.icon-PassengerDriver_Driver:before {
  content: "\e904";
}
.icon-PassengerDriver_DriverFrontAirbag:before {
  content: "\e905";
}
.icon-PassengerDriver_DriverKneeAirbag:before {
  content: "\e906";
}
.icon-PassengerDriver_IsofixAnchorage:before {
  content: "\e907";
}
.icon-PassengerDriver_Passanger:before {
  content: "\e908";
}
.icon-PassengerDriver_PassangerFrontAirbag:before {
  content: "\e909";
}
.icon-PassengerDriver_SeatBelt:before {
  content: "\e90a";
}
.icon-PassengerDriver_SideBodyAirbag:before {
  content: "\e90b";
}
.icon-PassengerDriver_SideHeadAirbag:before {
  content: "\e90c";
}
.icon-ML_aggregate_cols:before {
  content: "\e9b7";
}
.icon-ML_apply_domain:before {
  content: "\e9b8";
}
.icon-ML_colorize:before {
  content: "\e9b9";
}
.icon-ML_concatenate:before {
  content: "\e9ba";
}
.icon-ML_continuize:before {
  content: "\e9bb";
}
.icon-ML_correlations:before {
  content: "\e9bc";
}
.icon-ML_create_class:before {
  content: "\e9bd";
}
.icon-ML_create_instance:before {
  content: "\e9be";
}
.icon-ML_csv:before {
  content: "\e9bf";
}
.icon-ML_data_info:before {
  content: "\e9c0";
}
.icon-ML_data_sample:before {
  content: "\e9c1";
}
.icon-ML_datatable:before {
  content: "\e9c2";
}
.icon-ML_discretize:before {
  content: "\e9c3";
}
.icon-ML_edit_domain:before {
  content: "\e9c4";
}
.icon-ML_feature_constructor:before {
  content: "\e9c5";
}
.icon-ML_feature_stats:before {
  content: "\e9c6";
}
.icon-ML_file:before {
  content: "\e9c7";
}
.icon-ML_impute:before {
  content: "\e9c8";
}
.icon-ML_lift_curve:before {
  content: "\e9c9";
}
.icon-ML_load_dataset:before {
  content: "\e9ca";
}
.icon-ML_melt:before {
  content: "\e9cb";
}
.icon-ML_merge_data:before {
  content: "\e9cc";
}
.icon-ML_neighbors:before {
  content: "\e9cd";
}
.icon-ML_outliers:before {
  content: "\e9ce";
}
.icon-ML_paint_data:before {
  content: "\e9cf";
}
.icon-ML_pivot_table:before {
  content: "\e9d0";
}
.icon-ML_preprocess:before {
  content: "\e9d1";
}
.icon-ML_purge_domain:before {
  content: "\e9d2";
}
.icon-ML_python_script:before {
  content: "\e9d3";
}
.icon-ML_randomize:before {
  content: "\e9d4";
}
.icon-ML_rank:before {
  content: "\e9d5";
}
.icon-ML_save:before {
  content: "\e9d6";
}
.icon-ML_select_by_index:before {
  content: "\e9d7";
}
.icon-ML_select_col:before {
  content: "\e9d8";
}
.icon-ML_select_row:before {
  content: "\e9d9";
}
.icon-ML_SQL:before {
  content: "\e9da";
}
.icon-ML_transpose:before {
  content: "\e9db";
}
.icon-ML_unique:before {
  content: "\e9dc";
}
.icon-ML_ada_boost:before {
  content: "\eb94";
}
.icon-ML_calibration:before {
  content: "\eb95";
}
.icon-ML_confusion_matrix:before {
  content: "\eb96";
}
.icon-ML_correspondence_analysis:before {
  content: "\eb97";
}
.icon-ML_curve_fit:before {
  content: "\eb98";
}
.icon-ML_drop_column:before {
  content: "\eb99";
}
.icon-ML_dtree_reg:before {
  content: "\eb9a";
}
.icon-ML_dtree:before {
  content: "\eb9b";
}
.icon-ML_feature_importance:before {
  content: "\eb9c";
}
.icon-ML_get_schema:before {
  content: "\eb9d";
}
.icon-ML_gnb:before {
  content: "\eb9e";
}
.icon-ML_gpr:before {
  content: "\eb9f";
}
.icon-ML_gradient_boosting:before {
  content: "\eba0";
}
.icon-ML_help:before {
  content: "\eba1";
}
.icon-ML_hierarchical_clustering:before {
  content: "\eba2";
}
.icon-ML_json_output:before {
  content: "\eba3";
}
.icon-ML_keep_column:before {
  content: "\eba4";
}
.icon-ML_KNN:before {
  content: "\eba5";
}
.icon-ML_lasso_reg:before {
  content: "\eba6";
}
.icon-ML_linear_reg:before {
  content: "\eba7";
}
.icon-ML_load_model:before {
  content: "\eba8";
}
.icon-ML_logistic_reg:before {
  content: "\eba9";
}
.icon-ML_louvian_cluster:before {
  content: "\ebaa";
}
.icon-ML_manifold:before {
  content: "\ebac";
}
.icon-ML_mean_shift:before {
  content: "\ebad";
}
.icon-ML_neural_network:before {
  content: "\ebae";
}
.icon-ML_PCA:before {
  content: "\ebaf";
}
.icon-ML_predictions:before {
  content: "\ebb0";
}
.icon-ML_rfc:before {
  content: "\ebb1";
}
.icon-ML_rfr:before {
  content: "\ebb2";
}
.icon-ML_ridge_reg:before {
  content: "\ebb3";
}
.icon-ML_ROC:before {
  content: "\ebb4";
}
.icon-ML_save_model:before {
  content: "\ebb5";
}
.icon-ML_stacking:before {
  content: "\ebb6";
}
.icon-ML_stoch_gradient_descent:before {
  content: "\ebb7";
}
.icon-ML_svr:before {
  content: "\ebb8";
}
.icon-ML_test_score:before {
  content: "\ebb9";
}
.icon-ML_tree:before {
  content: "\ebba";
}
.icon-ML_normalize:before {
  content: "\ebbb";
}
.icon-vizOpt_autoclean:before {
  content: "\ebbc";
}
.icon-vizOpt_bandwidth:before {
  content: "\ebbd";
}
.icon-vizOpt_clabel:before {
  content: "\ebbe";
}
.icon-vizOpt_criterion:before {
  content: "\ebbf";
}
.icon-vizOpt_grid_response:before {
  content: "\ebc0";
}
.icon-vizOpt_independents:before {
  content: "\ebc1";
}
.icon-vizOpt_nc:before {
  content: "\ebc2";
}
.icon-vizOpt_normalize:before {
  content: "\ebc3";
}
.icon-view_classic:before {
  content: "\eb91";
}
.icon-view_modern:before {
  content: "\eb92";
}
.icon-view_slides:before {
  content: "\eb93";
}
.icon-newton_axis:before {
  content: "\eb60";
}
.icon-newton_axisrange:before {
  content: "\eb61";
}
.icon-newton_fastrender:before {
  content: "\eb62";
}
.icon-newton_linethickness:before {
  content: "\eb63";
}
.icon-newton_secondaryaxis:before {
  content: "\eb64";
}
.icon-newton_tertiaryaxis:before {
  content: "\eb65";
}
.icon-newton_transformation:before {
  content: "\eb66";
}
.icon-newton_zoomedview:before {
  content: "\eb67";
}
.icon-ML_clean:before {
  content: "\e980";
}
.icon-ML_learn:before {
  content: "\e981";
}
.icon-ML_predict:before {
  content: "\eb44";
}
.icon-rating_A:before {
  content: "\e918";
  color: #ffda00;
}
.icon-rating_acceptable:before {
  content: "\e919";
  color: #ffda00;
}
.icon-rating_G:before {
  content: "\e91a";
  color: #2ce200;
}
.icon-rating_good:before {
  content: "\e91b";
  color: #2ce200;
}
.icon-rating_M:before {
  content: "\e91c";
  color: #ffa124;
}
.icon-rating_marginal:before {
  content: "\e91d";
  color: #ffa124;
}
.icon-rating_P:before {
  content: "\e91e";
  color: #f00;
}
.icon-rating_poor:before {
  content: "\e91f";
  color: #f00;
}
.icon-rating_W:before {
  content: "\e920";
  color: #f50;
}
.icon-rating_weak:before {
  content: "\e921";
  color: #f50;
}
.icon-shape_onepager:before {
  content: "\e9e6";
}
.icon-shape_text_para_GUI:before {
  content: "\e9e7";
}
.icon-worker_RC_clone_selected:before {
  content: "\e982";
}
.icon-worker_RC_execute_children:before {
  content: "\e983";
}
.icon-worker_RC_execute_worker:before {
  content: "\e984";
}
.icon-worker_RC_execute:before {
  content: "\e985";
}
.icon-worker_RC_highlight_dependent:before {
  content: "\e986";
}
.icon-worker_RC_io_count_hide:before {
  content: "\e987";
}
.icon-worker_RC_io_count_show:before {
  content: "\e988";
}
.icon-worker_RC_iterate_node_seq:before {
  content: "\e989";
}
.icon-worker_RC_resume_manually:before {
  content: "\e98a";
}
.icon-worker_RC_resume_next_worker:before {
  content: "\e98b";
}
.icon-worker_RC_resume:before {
  content: "\e9a2";
}
.icon-worker_RC_save_cluster:before {
  content: "\e9a3";
}
.icon-worker_RC_show_dep_map:before {
  content: "\e9a4";
}
.icon-worker_RC_sync_template:before {
  content: "\e9e5";
}
.icon-shape_START:before {
  content: "\e966";
}
.icon-shape_END:before {
  content: "\e963";
}
.icon-shape_decision:before {
  content: "\e9b1";
}
.icon-shape_decision_hub:before {
  content: "\e961";
}
.icon-shape_comment:before {
  content: "\e9af";
}
.icon-shape_data_collector:before {
  content: "\e9b0";
}
.icon-shape_checkpoint:before {
  content: "\e95e";
}
.icon-shape_curve_io:before {
  content: "\e95f";
}
.icon-shape_dataset_io:before {
  content: "\e960";
}
.icon-shape_edge_junct:before {
  content: "\e962";
}
.icon-shape_notification:before {
  content: "\e964";
}
.icon-shape_report_gen:before {
  content: "\e965";
}
.icon-shape_switch:before {
  content: "\e967";
}
.icon-shape_worker_info:before {
  content: "\e968";
}
.icon-missing_3Dmodel:before {
  content: "\e9a6";
}
.icon-missing_dashboard:before {
  content: "\e9a7";
}
.icon-missing_database:before {
  content: "\e9a8";
}
.icon-missing_physicaltest:before {
  content: "\e9a9";
}
.icon-missing_project:before {
  content: "\e9aa";
}
.icon-missing_simlytiks:before {
  content: "\e9ab";
}
.icon-missing_simulation:before {
  content: "\e9ac";
}
.icon-missing_template:before {
  content: "\eb3e";
}
.icon-missing_workflow:before {
  content: "\eb3f";
}
.icon-response_boo:before {
  content: "\e9a5";
}
.icon-lucy_brain:before {
  content: "\e9a1";
}
.icon-icon_folder:before {
  content: "\e99c";
}
.icon-icon_folderstructure:before {
  content: "\e99d";
}
.icon-icon_tabsview:before {
  content: "\e99e";
}
.icon-response_3d:before {
  content: "\e93c";
}
.icon-response_cad:before {
  content: "\e93d";
}
.icon-response_categorical:before {
  content: "\e93e";
}
.icon-response_vector:before {
  content: "\1f323";
}
.icon-response_curve:before {
  content: "\e93f";
}
.icon-response_dataset:before {
  content: "\e940";
}
.icon-response_date:before {
  content: "\e941";
}
.icon-response_dollar:before {
  content: "\e942";
}
.icon-response_geolocation:before {
  content: "\e943";
}
.icon-response_keyvalue:before {
  content: "\e944";
}
.icon-response_link:before {
  content: "\e945";
}
.icon-response_matrix:before {
  content: "\e946";
}
.icon-response_model:before {
  content: "\e947";
}
.icon-response_number:before {
  content: "\e948";
}
.icon-response_point:before {
  content: "\e949";
}
.icon-response_scalar:before {
  content: "\e94a";
}
.icon-response_set:before {
  content: "\e94b";
}
.icon-response_text:before {
  content: "\e9b4";
}
.icon-response_user_defined:before {
  content: "\e9b5";
}
.icon-response_view:before {
  content: "\e9b6";
}
.icon-pulse:before {
  content: "\e9ad";
}
.icon-shape_circle:before {
  content: "\ebef";
}
.icon-shape_diamond:before {
  content: "\ebf0";
}
.icon-shape_diamondstar:before {
  content: "\ebf1";
}
.icon-shape_drop:before {
  content: "\ebf2";
}
.icon-shape_hexagon:before {
  content: "\ebf3";
}
.icon-shape_pentagon:before {
  content: "\ebf4";
}
.icon-shape_rhombus:before {
  content: "\ebf5";
}
.icon-shape_sqaure:before {
  content: "\ebf6";
}
.icon-shape_star:before {
  content: "\ebf7";
}
.icon-shape_trapezoid:before {
  content: "\ebf8";
}
.icon-shape_triangledown:before {
  content: "\ebf9";
}
.icon-shape_triangleup:before {
  content: "\ebfa";
}
.icon-vizOpt_summary:before {
  content: "\ebee";
}
.icon-vizOpt_baseline:before {
  content: "\eb5a";
}
.icon-vizOpt_colorMax:before {
  content: "\ebdb";
}
.icon-vizOpt_colorMin:before {
  content: "\ebdc";
}
.icon-vizOpt_columns:before {
  content: "\ebdd";
}
.icon-vizOpt_font:before {
  content: "\ebde";
}
.icon-vizOpt_fontSize:before {
  content: "\ebdf";
}
.icon-vizOpt_fontWeight:before {
  content: "\ebe0";
}
.icon-vizOpt_primaryKeys:before {
  content: "\ebeb";
}
.icon-vizOpt_rows:before {
  content: "\ebec";
}
.icon-vizOpt_value:before {
  content: "\ebed";
}
.icon-vizOpt_aggregate:before {
  content: "\eb4e";
}
.icon-vizOpt_data:before {
  content: "\eb4f";
}
.icon-vizOpt_groups:before {
  content: "\eb50";
}
.icon-vizOpt_legends:before {
  content: "\eb51";
}
.icon-vizOpt_preferances:before {
  content: "\eb52";
}
.icon-vizOpt_sortColumn:before {
  content: "\eb53";
}
.icon-vizOpt_sorting:before {
  content: "\eb54";
}
.icon-vizOpt_sortValue:before {
  content: "\eb56";
}
.icon-vizOpt_tooltip:before {
  content: "\eb57";
}
.icon-vizOpt_xBy:before {
  content: "\eb58";
}
.icon-vizOpt_yBy:before {
  content: "\eb59";
}
.icon-vizOpt_colors:before {
  content: "\eb40";
}
.icon-vizOpt_appearance:before {
  content: "\eb41";
}
.icon-vizOpt_images:before {
  content: "\eb4b";
}
.icon-vizOpt_labels:before {
  content: "\eb4c";
}
.icon-vizOpt_required:before {
  content: "\eb4d";
}
.icon-shape_iterator_start:before {
  content: "\e9b2";
}
.icon-shape_iterator_stop:before {
  content: "\e9b3";
}
.icon-simulation_sharedbyme:before {
  content: "\e98c";
}
.icon-simulation_sharedwithme:before {
  content: "\e98d";
}
.icon-dataset_append:before {
  content: "\eb5b";
}
.icon-dataset_join:before {
  content: "\eb73";
}
.icon-dataset_merge:before {
  content: "\eb8d";
}
.icon-dataset_replace:before {
  content: "\ebab";
}
.icon-image_overlay:before {
  content: "\ebcb";
}
.icon-image_pixel:before {
  content: "\ebcd";
}
.icon-image_slide:before {
  content: "\ebe1";
}
.icon-movie_overlay:before {
  content: "\ebe5";
}
.icon-movie_sync:before {
  content: "\ebe7";
}
.icon-simulation_completed:before {
  content: "\eb3d";
}
.icon-simulation_hastemplate:before {
  content: "\eb43";
}
.icon-simulation_hung:before {
  content: "\eb48";
}
.icon-simulation_unfinished:before {
  content: "\eb55";
}
.icon-decisionHub:before {
  content: "\e9ae";
}
.icon-science_transformationIcon:before {
  content: "\e94c";
}
.icon-science_specimenlibrary:before {
  content: "\e94d";
}
.icon-science_NVH:before {
  content: "\e94e";
}
.icon-science_durability:before {
  content: "\e954";
}
.icon-science_crash:before {
  content: "\e955";
}
.icon-science_BMS:before {
  content: "\e956";
}
.icon-science_materials:before {
  content: "\e957";
}
.icon-points_digitize:before {
  content: "\e958";
}
.icon-points_progressive:before {
  content: "\e95a";
}
.icon-points_raw:before {
  content: "\e95c";
}
.icon-points_smooth:before {
  content: "\e95d";
}
.icon-app_gs_dashboards:before {
  content: "\e969";
}
.icon-app_gs_databases:before {
  content: "\e96a";
}
.icon-app_gs_datasets:before {
  content: "\e96b";
}
.icon-app_gs_files:before {
  content: "\e96c";
}
.icon-app_gs_hpc:before {
  content: "\e96d";
}
.icon-app_gs_hpcjobs:before {
  content: "\e96e";
}
.icon-app_gs_keyword:before {
  content: "\e96f";
}
.icon-app_gs_matselector:before {
  content: "\e970";
}
.icon-app_gs_models:before {
  content: "\e971";
}
.icon-app_gs_notes:before {
  content: "\e972";
}
.icon-app_gs_peacock:before {
  content: "\e973";
}
.icon-app_gs_physicaltests:before {
  content: "\e974";
}
.icon-app_gs_projects:before {
  content: "\e975";
}
.icon-app_gs_responses:before {
  content: "\e976";
}
.icon-app_gs_simlytiks:before {
  content: "\e977";
}
.icon-app_gs_simulations:before {
  content: "\e978";
}
.icon-app_gs_slides:before {
  content: "\e979";
}
.icon-app_gs_studies:before {
  content: "\e97a";
}
.icon-app_gs_tags:before {
  content: "\e97b";
}
.icon-app_gs_targets:before {
  content: "\e97c";
}
.icon-app_gs_templates:before {
  content: "\e97d";
}
.icon-app_gs_workflows:before {
  content: "\e97e";
}
.icon-app_gs_workorders:before {
  content: "\e97f";
}

/* /stylesheets/spa/apppage.css */
/* ============================================================================
   d3VIEW.AppPage — deliberately almost empty.
   ----------------------------------------------------------------------------
   AppPage emits the SAME DOM the modern pages hand-write (.two-col-flex >
   .sim-left-col + .pageContainer.content-col#<appId> > .pageTabsContainer >
   ul#tabsList + #tabsContent) and stamps the app's own id on the content column.
   So the styling comes ENTIRELY from what already exists:

     rail + smooth collapse   spa/simulation.css  (.sim-left-col / -inner)
     Chrome tab strip         spa/simulation.css:360-520  (#simulations)
                              style.css:12142             (#physicaltests)
                              style.css:12329             (#responsetemplates)
     frozen shell             style.css:11984  (body.app-shell-frozen)

   Nothing is restyled here. When Phase 5 collapses those three near-identical
   strip blocks into one, the shared copy lands in THIS file -- until then, an
   app gets its look from its own stylesheet, which is why migrating a page is a
   zero-visual-diff change.

   What remains below is only what has no existing owner.
   ============================================================================ */

/* Render failure inside a pane. No page owns this because no page had a shared
   pane renderer to fail. */
.d3v-app-page .d3v-ap-error {
    padding: 24px;
    margin: 14px;
    border-radius: 8px;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #721c24;
    font-size: 13px;
}

/* A bespoke rail section (rail.sections[]) reserves a slot and nothing more --
   the section owns its own markup and styling. */
.d3v-app-page .d3v-ap-rail-section {
    margin: 0 0 6px 0;
}

/* ----------------------------------------------------------------------------
   Rail collapse on a detail pane. Same declarations the pages already use
   (physicaltest.css:1254, template.css:308, simulation.css:26), driven by a
   class AppPage toggles on .two-col-flex rather than by their :has() selector.

   RESOLVED 2026-08-18 (this block previously carried an "UNRESOLVED" note
   claiming the rule matched but did not apply, with no competitor found).
   The rule was fine the whole time. The observation was a MEASUREMENT ARTIFACT:

     .sim-left-col carries `transition: flex-basis .3s, padding .3s,
     opacity .25s, border-right-width .3s`, and the Chrome automation tab is
     HIDDEN (document.hidden === true), so it has no animation clock. A started
     transition therefore never advances and getComputedStyle returns the frozen
     START value for as long as you sample it.

   Measured on the Studies page, detail pane open: rail read flex-basis 180px /
   opacity 1 indefinitely, and even an INLINE `flex-basis:0 !important` read back
   as 180px -- which is what makes it look self-contradictory. Re-measured with
   `transition: none !important` forced on the rail, the same DOM reads 0px, and
   toggling the pane's .hidden back reads 180px again.

   Consequences worth keeping:
     - :has() DOES invalidate on a descendant class change (verified 0 -> 180 ->
       0 by mutating .hidden alone). The per-page :has() rules are not broken.
     - The detach/reattach "fix" that appeared to work simply restarts the
       element with no running transition. It was never evidence of a cascade or
       invalidation bug.
     - Never assert rail state from getComputedStyle in an automation tab without
       first killing the transition, or pairing the reading with a control.

   This class remains the mechanism AppPage itself uses (see _show), because it
   is driven by JS that already knows which pane is active.
   ---------------------------------------------------------------------------- */
.two-col-flex.d3v-ap-detail .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
.two-col-flex.d3v-ap-detail .sim-left-col-inner {
    transform: translateX(-100%);
}

/* ============================================================================
   THE CHROME TAB STRIP — shared. (The "Phase 5" collapse promised in the header.)
   ----------------------------------------------------------------------------
   Ported VERBATIM from spa/simulation.css:360-520, which is byte-identical in its
   declarations to the #physicaltests + #databases copy (style.css:12362) and the
   #responsetemplates copy (style.css:12579). Four copies of one design; this is the
   fifth-copy-prevention.

   Keyed on `.d3v-tab-strip.nav-tabs`, both stamped by AppPage.Strip.render(). Every
   existing per-page block (2 ids) still outranks it — and since the declarations are the
   same, those pages render byte-identically. They can each drop their copy later, one at
   a time, with this as the safety net.

   TWO classes, not one, and that is load-bearing. Measured against the Simulations
   baseline with a single class, FOUR properties lost to legacy globals:
     .nav-tabs { margin-bottom: 15px }            tie, later sheet won   -> 15px strip gap
     .nav-tabs > li > a { padding-right: 30px }   the old close reserve  -> lopsided tabs
     .nav-tabs li.active a { color: ... !important }  tie                -> #666 active label
   The per-page copies never hit this because 2 ids beat all of them outright. A shared
   block has to earn it. See .claude/rules/simulations-tab-strip-global-overrides.md --
   "removing your declaration does not remove the styling, it reveals Bootstrap's".

   App-agnostic by necessity: Strip derives the tab-name and close-button classes from
   `tabPrefix` (`.<prefix>-tab-name`, `.remove-<prefix>-tab`), which is exactly why the
   four copies could not be shared before. Matched here with SUBSTRING selectors —
   `*=` not `$=`, because the close control ships two classes
   (`class="remove-note-tab clickable"`) and `$=` matches the whole attribute.

   Three behaviours worth knowing:
     1. Single row, never wraps; tabs compress to share the width.
     2. `max-width: max-content` caps a tab at its own text width, so a short name
        leaves room for the others rather than padding itself out.
     3. The ACTIVE tab is visibly wider — not a rule, a consequence: `font-weight:600`
        widens its `max-content`. Measured on Simulations, two tabs with 31-character
        names: active 327px vs inactive 317px.
   ============================================================================ */

.d3v-tab-strip.nav-tabs {
    display: flex;
    flex-wrap: nowrap;           /* single row. NOT overflow:hidden — that clips the
                                    active tab's overlap onto the content below. */
    align-items: stretch;
    gap: 0;                      /* flush; a 1px pseudo-element divides them */
    padding-left: 0;
    /* !important beats `div.pageTabsContainer ul#tabsList { margin-bottom: 15px }`
       (measured by walking the live sheets). The per-page copies outrank that with
       2 ids; a shared block cannot use an app id, so this is the honest way to win.
       Without it the strip floats 15px above the content and the active tab stops
       connecting to the view below. */
    margin-bottom: 0 !important;
    /* the strip carries the closed-tab grey so the empty space right of the tabs
       reads as strip, not as the white content behind it */
    background: #e9ecf0;
    /* explicit none — deleting a border declaration here does not remove a border,
       it REVEALS Bootstrap's `.nav-tabs { border-bottom: 1px solid #ddd }`.
       See .claude/rules/simulations-tab-strip-global-overrides.md */
    border-bottom: none;
}

.d3v-tab-strip.nav-tabs > li {
    float: none;                 /* override Bootstrap's nav-tabs float */
    flex: 1 1 0;                 /* tabs share the row width equally */
    min-width: 0;                /* allow shrinking below content width */
    max-width: max-content;      /* never wider than its own text */
    margin: 0;
    position: relative;          /* anchors the divider pseudo-element */
    /* ONLY flex-grow — overrides a global `transition: all`, which otherwise
       animates max-width and overshoots before snapping back. */
    transition: flex-grow .18s ease;
}

/* lighter divider between adjacent tabs; hidden either side of the active or a
   hovered tab so the highlighted tab reads as one clean pill */
.d3v-tab-strip.nav-tabs > li + li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px; bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background: #f9fbfd;         /* LIGHTER than the #e9ecf0 tab fill (Chrome-style) */
    z-index: 3;                  /* above the tab's own background, or it is invisible */
    transition: opacity .12s ease;
}
.d3v-tab-strip.nav-tabs > li.active::before,
.d3v-tab-strip.nav-tabs > li.active + li::before,
.d3v-tab-strip.nav-tabs > li:hover::before,
.d3v-tab-strip.nav-tabs > li:hover + li::before {
    opacity: 0;
}

/* tab link: [icon] [name] [close] on one line */
.d3v-tab-strip.nav-tabs > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    position: relative;
    z-index: 0;                  /* stacking context for the hover glow */
    background: #e9ecf0;         /* closed tabs sit a shade darker than the white
                                    active tab */
    /* !important beats the global `.nav-tabs a { color: ... !important }` */
    color: #3c4043 !important;
    border: none;
    border-radius: 0;
    margin: 0;
    transition: color .15s ease;
}

/* The tight padding is gated on the tab actually CARRYING the house close control.
   Why the gate, and why !important:

   !important, because it has to beat the legacy close-button reserve
   `div.pageTabsContainer ul#tabsList li:not(:first-child) a:not(.nonremovable)
    { padding-right: 30px }` -- 1 id + 3 classes + 4 types, which no app-agnostic
   selector can outrank. AppPage.Strip's close control is a flex CHILD, so that
   reserve is not merely unnecessary, it renders every tab visibly lopsided.

   :has(), because an unconditional !important here is a landmine for a page that has
   not been migrated yet. #responsetemplates and #studies declare
   `padding: 8px 26px 8px 12px` -- a reserve for the GenericTabContents `.closeBtn`,
   which is absolutely positioned, not a flex child. Neither page uses AppPage today,
   so neither carries this class; but the day one is migrated, a blanket !important
   would silently collapse that reserve and print the close button over the tab name.
   Gating on the house control means the rule only ever fires on the markup it
   describes. See .claude/rules/apppage-and-generictabcontents-are-two-frameworks.md */
.d3v-tab-strip.nav-tabs > li > a:has([class*="remove-"][class*="-tab"]) {
    padding: 8px 12px !important;
}

/* the hover "glow": an inset rounded box, deliberately NOT a full tab fill */
.d3v-tab-strip.nav-tabs > li > a::after {
    content: "";
    position: absolute;
    inset: 4px 4px;
    border-radius: 8px;
    background: transparent;
    transition: background .15s ease;
    z-index: -1;
    pointer-events: none;
}
.d3v-tab-strip.nav-tabs > li:not(.active) > a:hover        { color: #202124 !important; }
.d3v-tab-strip.nav-tabs > li:not(.active) > a:hover::after { background: #d6dae0; }

/* active tab: white, connected to the content below. The grey lives on the <li> so
   it shows through the white tab's rounded top corners and the 3px gap above it. */
.d3v-tab-strip.nav-tabs > li.active { background: #e9ecf0; }
.d3v-tab-strip.nav-tabs > li.active > a {
    background: #fff;
    color: #202124 !important;
    border: none;                /* also overrides Bootstrap's active-tab border */
    border-radius: 8px 8px 0 0;
    margin: 3px 0 0 0;
    font-weight: 600;
}

.d3v-tab-strip.nav-tabs > li > a > .fa:first-child { flex: 0 0 auto; font-size: 11px; opacity: .75; }

/* `*=` not `$=` — see the header: the close control carries a second class. */
.d3v-tab-strip.nav-tabs [class*="-tab-name"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;            /* a very long name ellipsises instead of growing */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3v-tab-strip.nav-tabs [class*="remove-"][class*="-tab"] {
    flex: 0 0 auto;
    margin-left: 2px;
    opacity: .5;
    cursor: pointer;
    transition: opacity .15s ease;
}
.d3v-tab-strip.nav-tabs [class*="remove-"][class*="-tab"]:hover { opacity: 1; }

/* drag-reorder placeholder (jQuery UI sortable, via AppPage.Strip._initSortable) */
.d3v-tab-strip.nav-tabs .sim-tab-placeholder {
    flex: 0 0 90px;
    background: #dfe3e8;
    border-radius: 8px 8px 0 0;
    margin: 3px 0 0 0;
}

/* ============================================================================
   BACK-TO-ALL — shared. The modern pages hide the persistent "All X" home chip
   (house rule 2 in apppage.js), so a back arrow injected into the detail pane is
   the way back to the list. `.sim-back-to-all` (spa/simulation.css:81) and
   `.pt-back-to-all` (spa/physicaltest.css) are two copies of this already;
   spa/study.css and spa/template.css both cite the pattern in comments.

   Arrow-only at rest, expanding on hover to reveal its label. The expanded width
   is a custom property rather than a per-page magic number — the two existing
   copies differ only there (145px "All Simulations" vs 180px "All Physical
   Tests"), which is the entire reason they were copied instead of shared.
   `max-content` cannot be used: it does not animate.
   ============================================================================ */
.d3v-back-to-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 22px;             /* arrow only — the label is clipped away */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    flex: 0 0 auto;
    padding: 6px 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #2c5282 !important;   /* beats the global `a { color: ... !important }` */
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    transition: max-width .28s ease, background .18s ease, padding .18s ease;
}
.d3v-back-to-all:hover,
.d3v-back-to-all:focus-visible {
    max-width: var(--d3v-back-label-w, 160px);
    background: #cfe0f5;
    padding: 6px 12px;
    color: #1c4e80 !important;
    text-decoration: none !important;
}
.d3v-back-to-all i { flex: 0 0 auto; font-size: 13px; line-height: 1; }

/* /stylesheets/spa/simulation.css */
/* ── Simulation Left Column ── */

.sim-left-col {
    padding: 12px 12px 12px 12px !important;
    overflow: hidden;
    transition: flex-basis .3s ease, padding .3s ease, opacity .25s ease, border-right-width .3s ease;
}

/* Rigid inner wrapper: holds the rail content at its natural width (155px =
   the rail's resting content-box) so the content NEVER reflows while the rail
   animates. The outer .sim-left-col clips it (overflow:hidden); collapsing
   translates this block fully off the left edge, so returning to the table
   reads as the rail sliding in from off-screen — not text re-fitting a
   widening column. 155px is the measured content width at flex-basis:180px,
   border-box, 12px h-padding. */
.sim-left-col-inner {
    width: 155px;
    transition: transform .3s ease;
}

/* Collapse the left rail when a specific simulation DETAIL view is open — the
   Widgets/Filters only apply to the all-sims table. Driven off the visible
   detail pane via :has() (the panes toggle a .hidden class), so the existing
   tab-switch JS animates the rail closed on open and back open on return to
   the table, with no JS change. The content column (flex:1) fills the space. */
.two-col-flex:has(#tabsContent > .tabContent[class*="simulation-tab-view-"]:not(.hidden)) .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
/* slide the rigid content off the left edge as the rail closes (and back in on
   return) — full-width the whole time, so no cramped-text reflow */
.two-col-flex:has(#tabsContent > .tabContent[class*="simulation-tab-view-"]:not(.hidden)) .sim-left-col-inner {
    transform: translateX(-100%);
}

/* New Simulation button — matches HPC jobs Submit btn */
.sim-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #dce8f5 !important;
    background: linear-gradient(135deg, #2c5282, #2b6cb0);
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 6px rgba(44, 82, 130, 0.25);
}

.sim-new-btn:hover {
    background: linear-gradient(135deg, #2b6cb0, #3182ce);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.35);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.sim-new-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(44, 82, 130, 0.25);
}

.sim-new-btn i {
    font-size: 12px;
}

/* "Back to All Simulations" control — collapsed to a bare arrow (no outline).
   On hover it darkens and slides the "All Simulations" label out via a
   max-width reveal (overflow-clipped text node), and because h1.lead is a flex
   row, the widening control pushes the asterisk + sim name to the right. */
.sim-back-to-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 22px;             /* arrow only — the label is fully clipped */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 6px 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #2c5282 !important;   /* override a global `a` colour rule */
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    transition: max-width .28s ease, background .18s ease, padding .18s ease;
}
.sim-back-to-all:hover {
    max-width: 145px;            /* reveal the label (≈ full content width) */
    background: #cfe0f5;         /* darker shade on hover */
    padding: 6px 12px;
    color: #1c4e80 !important;
    text-decoration: none !important;
}
.sim-back-to-all i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

/* Simulation title row (back button + asterisk + sim name). Drop the wasted
   20px bottom margin, and lay it out as a centered flex row so the tall
   .sim-back-to-all pill aligns on the same vertical center as the asterisk and
   the name text (they were baseline-aligned, leaving the button ~3px low). */
#simulations h1.lead {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
/* the button's legacy mr10 margin now doubles up with the flex gap (18px vs the
   8px elsewhere) — let the gap be the single spacing source so it's even */
#simulations h1.lead .sim-back-to-all {
    margin-right: 0;
}

/* Widgets toggle — lives in the left rail (Widgets section), styled to match
   the .sim-time-scope pill: full-width container, two equal-width buttons. */
.sim-cards-toolbar {
    margin: 0 0 10px;
}
.sim-cards-toggle {
    display: flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.sim-cards-toggle-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}
.sim-cards-toggle-btn:hover:not(.active) {
    color: #555;
    background: #e8e8e8;
}
.sim-cards-toggle-btn.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Filter section label */
.sim-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin: 18px 0 8px 4px;
}

/* Filter list */
.sim-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sim-filter-list li {
    margin-bottom: 2px;
}

.sim-filter-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #555;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.sim-filter-list li a:hover {
    background: #f0f0f0;
    color: #333;
}

.sim-filter-list li.active a {
    background: #e0ecf8;
    color: #2c5282;
    font-weight: 600;
}

/* Filter icon badges */
.sim-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
    background: #f0f0f0;
    color: #888;
    transition: background 0.15s ease, color 0.15s ease;
}

.sim-filter-list li.active .sim-filter-icon {
    background: #ccddf0;
    color: #2c5282;
}

/* Colored icon variants */
.sim-filter-icon.icon-finished {
    background: #d4edda;
    color: #155724;
}

.sim-filter-icon.icon-unfinished {
    background: #fff3cd;
    color: #856404;
}

.sim-filter-icon.icon-hung {
    background: #f8d7da;
    color: #721c24;
}

.sim-filter-icon.icon-template {
    background: #e8daef;
    color: #6c3483;
}

.sim-filter-icon.icon-shared {
    background: #d1ecf1;
    color: #0c5460;
}

.sim-filter-icon.icon-bookmarked {
    background: #fff7e6;
    color: #d46b08;
}

/* Time Scope Toggle */
.sim-time-scope {
    display: flex;
    flex-wrap: wrap;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-top: 16px;
    margin-bottom: 10px;
}

.sim-scope-btn {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
    letter-spacing: 0.3px;
    flex: 1 1 0;
    text-align: center;
}

.sim-scope-btn:hover:not(.active) {
    color: #555;
    background: #e8e8e8;
}

.sim-scope-btn.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sim-time-scope.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.sim-time-scope.loading .sim-scope-btn {
    opacity: 0.6;
}

@keyframes simScopeShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.sim-time-scope.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: simScopeShimmer 1.2s ease infinite;
}

/* ── End Simulation Left Column ── */


/* ==========================================================================
   Simulation Summary Cards
   ========================================================================== */

@keyframes simFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes simShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Row container */
/* Allow content-col to shrink below content size so cards can scroll.
   padding:0 overrides the shared `.two-col-flex .content-col { padding:8px 18px }`
   for the simulations page only (id+class beats the two-class selector) so the
   content sits flush; other pages that use .content-col keep their padding. */
#simulations.content-col {
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

/* ── Chrome-style tab strip (simulations page only) ──────────────────────────
   The strip is global (div.pageTabsContainer ul#tabsList); everything here is
   scoped to #simulations (2 ids) so other apps keep the legacy wrapping tabs.
     1. Single row, never wraps.
     2. Tabs compress to share the available width when there are many.
     3. Hovering a tab expands it to reveal the full name (CSS ellipsis).
   Also tightens the global 15px bottom margin to 6px on this page. */
#simulations #tabsList {
    display: flex;
    flex-wrap: nowrap;           /* single row (no overflow:hidden — it would clip
                                    the active tab's 1px overlap onto the hairline) */
    align-items: stretch;
    gap: 0;                      /* tabs are flush; a 1px divider separates them */
    padding-left: 0;
    margin-bottom: 0;            /* active tab connects flush to the view below */
    /* fill the whole strip with the closed-tab grey so the empty space to the
       right of the tabs reads as the strip (not the white content behind it)
       when only a few tabs are open — the individual tabs already use #e9ecf0 */
    background: #e9ecf0;
    /* no strip hairline (it showed as a 1px line under the grey closed tabs);
       border-bottom:none also overrides Bootstrap's `.nav-tabs { border-bottom:
       1px solid #ddd }`. Closed tabs separate via their grey→white edge; the
       active tab connects white-on-white. */
    border-bottom: none;
}

#simulations #tabsList > li {
    float: none;                 /* override Bootstrap nav-tabs float */
    flex: 1 1 0;                 /* tabs share the row width equally */
    min-width: 0;                /* allow shrinking below content width */
    max-width: max-content;      /* never wider than the text; flex compresses
                                    when there are many tabs. Kept the SAME in the
                                    hover state so unhover only animates flex-grow
                                    (no max-width snap → no double-shrink). */
    margin: 0;
    position: relative;          /* anchor the divider pseudo-element */
    /* Transition ONLY flex-grow (overrides a global `transition: all`). Paired
       with `max-width: max-content` on hover, the tab grows smoothly toward its
       own content width and stops there — animated, but no overshoot past the
       text (the old combo grew toward the fixed 340 cap then snapped back). */
    transition: flex-grow .18s ease;
}

/* The "All Simulations" tab is removed from the strip — going back to the
   table is done via the modern back button (.sim-back-to-all) shown in every
   simulation view. The <li> stays in the DOM (its data-id="Table_view" + active
   state still drive the table content panes), it's just hidden. */
#simulations #tabsList > li.Table_view {
    display: none;
}

/* tiny lighter divider between adjacent tabs; hidden next to the active or a
   hovered tab so the highlighted tab reads as one clean pill */
#simulations #tabsList > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background: #f9fbfd;         /* LIGHTER than the #e9ecf0 tab fill (Chrome-style) */
    /* sit ABOVE the tab's own #e9ecf0 background (a has z-index:0), otherwise the
       tab fill paints over the divider and it reads as "the same colour". */
    z-index: 3;
    transition: opacity .12s ease;
}
#simulations #tabsList > li.active::before,
#simulations #tabsList > li.active + li::before,
#simulations #tabsList > li:hover::before,
#simulations #tabsList > li:hover + li::before {
    opacity: 0;
}

/* tab link: [icon] [name] [close] on one line; tighter than bootstrap's
   10px 15px, and overrides the legacy padding-right:30px close-button reserve */
#simulations #tabsList > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 12px;
    position: relative;
    z-index: 0;                  /* stacking context for the glow pseudo-element */
    background: #e9ecf0;         /* closed tabs are a shade darker than the white
                                    active tab (the active rule below overrides) */
    /* !important overrides the global `.nav-tabs a { color: ... !important }` */
    color: #3c4043 !important;   /* inactive label (dark grey) */
    border: none;
    border-radius: 0;
    margin: 0;
    transition: color .15s ease;
}

/* the hover "glow": an inset, rounded, padded box — does NOT fill the tab */
#simulations #tabsList > li > a::after {
    content: "";
    position: absolute;
    inset: 4px 4px;
    border-radius: 8px;
    background: transparent;
    transition: background .15s ease;
    z-index: -1;
    pointer-events: none;
}
#simulations #tabsList > li:not(.active) > a:hover {
    color: #202124 !important;
}
#simulations #tabsList > li:not(.active) > a:hover::after {
    background: #d6dae0;
}

/* active tab: white + darker text, visually connected to the content below.
   margin-bottom:-1px drops it onto the strip hairline and a white bottom border
   paints over that 1px, so the line is "broken" under the active tab and it
   reads as one continuous surface with the view (Chrome-style). */
/* the active li carries the closed-tab grey so it shows through the white tab's
   rounded top corners and the small gap above it */
#simulations #tabsList > li.active {
    background: #e9ecf0;
}
#simulations #tabsList > li.active > a {
    background: #fff;
    color: #202124 !important;
    border: none;               /* no border (also overrides Bootstrap's
                                   .nav-tabs > li.active > a border) */
    border-radius: 8px 8px 0 0;
    margin: 3px 0 0 0;          /* 3px top gap so the grey/blue shows above */
    font-weight: 600;
}

#simulations #tabsList > li > a > .fa-asterisk {
    flex: 0 0 auto;
    font-size: 9px;
    opacity: 0.7;
}

/* name truncates with ellipsis based on the tab's available width */
#simulations #tabsList .sim-tab-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;            /* caps the expanded width (~340px tab) so very
                                    long names ellipsis instead of growing huge */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#simulations #tabsList .remove-sim-tab {
    flex: 0 0 auto;
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity .15s ease;
}
#simulations #tabsList .remove-sim-tab:hover { opacity: 1; }

/* Tabs do NOT expand on hover — the horizontal grow was distracting. They keep
   their equal, compressed width (Chrome-style); the full name is available via
   the tab's title tooltip, and hover feedback is just the inset glow above plus
   the pill divider fade. The tiny vertical pill dividers (li + li::before) are
   what separate adjacent tabs. */

/* When the status cards are toggled off, the .sim-summary goes display:none but
   its wrappers still reserve ~20px of empty padding above the table header.
   Collapse the whole cards block when the summary is hidden so no band of
   whitespace remains. The toggle lives in the left rail, so hiding this block
   never hides the control. (Progressive: browsers without :has() keep the
   prior, harmless residual.) */
#simulations .sim-summary-cards-container:has(.sim-summary[style*="display: none"]) {
    display: none;
}

.sim-carousel-wrapper {
    position: relative;
}

.sim-summary-row {
    padding: 8px 16px 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sim-summary-row::-webkit-scrollbar {
    height: 4px;
}

.sim-summary-row::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.sim-summary-row::-webkit-scrollbar-track {
    background: transparent;
}

.sim-summary {
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sim-summary::-webkit-scrollbar {
    display: none;
}

/* Carousel arrow buttons */
.sim-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.sim-carousel-arrow:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    color: #333;
}

.sim-carousel-arrow-left {
    left: -4px;
}

.sim-carousel-arrow-right {
    right: -4px;
}

.sim-carousel-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}


/* Card */
.sim-summary-group {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    animation: simFadeIn 0.25s ease both;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex: 1 1 0;
    min-width: 200px;
    overflow: hidden;
}

/* Pie chart cards — width scales with legend columns */
.sim-summary-group[data-card="solver"],
.sim-summary-group[data-card="loadcase"] {
    min-width: 140px;
}
.sim-summary-group[data-legend-cols="1"] { flex: 0.3 1 0; min-width: 220px; }
.sim-summary-group[data-legend-cols="2"] { flex: 0.5 1 0; min-width: 260px; }
.sim-summary-group[data-legend-cols="3"] { flex: 0.7 1 0; min-width: 260px; }
.sim-summary-group[data-legend-cols="4"] { flex: 0.9 1 0; min-width: 260px; }

.sim-summary-group:hover {
    border-color: #c0c0c0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Card drag-and-drop reordering */
.sim-summary-group.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: scale(1.02);
    z-index: 10;
}

.sim-summary-group.ui-sortable-helper .sim-summary-group-header {
    cursor: grabbing;
}

.sim-card-placeholder {
    background: #e8f0fe;
    border: 2px dashed #90b4e0;
    border-radius: 8px;
    flex: 1 1 0;
    min-width: 200px;
}

/* Card header */
.sim-summary-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
}

.sim-summary-group-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: 0 0 28px;
}

.sim-summary-group-icon.icon-status   { background: #e0ecf8; color: #2c5282; }
.sim-summary-group-icon.icon-quality  { background: #d4edda; color: #155724; }
.sim-summary-group-icon.icon-solver   { background: #e8daef; color: #6c3483; }
.sim-summary-group-icon.icon-content  { background: #d1ecf1; color: #0c5460; }
.sim-summary-group-icon.icon-anomaly  { background: #fef3cd; color: #856404; }

.sim-summary-group-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Metrics row */
.sim-summary-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(42px, auto);
    gap: 10px;
}

/* Individual metric */
.sim-summary-metric {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.sim-summary-metric-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex: 0 0 26px;
}

/* Metric icon colors */
.sim-summary-metric-icon.icon-total       { background: #e0ecf8; color: #2c5282; }
.sim-summary-metric-icon.icon-finished    { background: #d4edda; color: #155724; }
.sim-summary-metric-icon.icon-unfinished  { background: #fff7e6; color: #d46b08; }
.sim-summary-metric-icon.icon-hung        { background: #f8d7da; color: #721c24; }
.sim-summary-metric-icon.icon-failed      { background: #f0f0f0; color: #666; }
.sim-summary-metric-icon.icon-pass        { background: #d4edda; color: #155724; }
.sim-summary-metric-icon.icon-fail        { background: #f8d7da; color: #721c24; }
.sim-summary-metric-icon.icon-na          { background: #f0f0f0; color: #888; }
.sim-summary-metric-icon.icon-responses   { background: #e0ecf8; color: #2c5282; }
.sim-summary-metric-icon.icon-files       { background: #e8daef; color: #6c3483; }
.sim-summary-metric-icon.icon-storage     { background: #d1ecf1; color: #0c5460; }
.sim-summary-metric-icon.icon-errors     { background: #f8d7da; color: #721c24; }

/* Alert states */
.sim-summary-metric.has-alert .sim-summary-metric-icon.icon-failed,
.sim-summary-metric.has-alert .sim-summary-metric-icon.icon-fail {
    background: #f8d7da;
    color: #721c24;
}

.sim-summary-metric-info {
    display: flex;
    flex-direction: column;
}

.sim-summary-metric-value {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.sim-summary-metric-value.value-alert   { color: #721c24; }
.sim-summary-metric-value.value-success { color: #155724; }
.sim-summary-metric-value.value-warning { color: #856404; }

.sim-summary-metric-label {
    font-size: 8px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
}

/* Clickable metrics on status and termination cards */
.sim-summary-group[data-card="status"] .sim-summary-metric,
.sim-summary-group[data-card="termination"] .sim-summary-metric {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background-color 0.15s ease;
}
.sim-summary-group[data-card="status"] .sim-summary-metric:hover,
.sim-summary-group[data-card="termination"] .sim-summary-metric:hover {
    background: #f0f4f8;
}
.sim-summary-metric.metric-active {
    background: #e0ecf8 !important;
    box-shadow: inset 0 0 0 1px #b0cde8;
}

/* Shimmer while table loads */
@keyframes simMetricShimmer {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}
.sim-summary-metric.metric-loading {
    animation: simMetricShimmer 0.8s ease-in-out infinite;
    pointer-events: none;
}

/* Red flash for zero-count metrics */
@keyframes simMetricRejectFlash {
    0%   { background: transparent; }
    20%  { background: rgba(229,62,62,0.15); }
    100% { background: transparent; }
}
.sim-summary-metric.metric-rejected {
    animation: simMetricRejectFlash 0.6s ease-out;
}

/* Skeleton blocks */
.sim-skeleton-block {
    display: inline-block;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: simShimmer 1.5s ease infinite;
}

/* Table skeleton — only the rows shimmer, all in unison (no toolbar, no
   per-row animation-delay stagger). */
.sim-table-skeleton {
    padding: 8px 0;
}

.sim-skeleton-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sim-skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
}

.sim-skeleton-row .sim-skeleton-block {
    height: 14px;
    border-radius: 4px;
}

/* Pie chart breakdown */
.sim-pie-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sim-pie-chart {
    flex-shrink: 0;
}

.sim-pie-chart path {
    transition: opacity 0.15s ease;
    cursor: default;
}

.sim-pie-chart path:hover {
    opacity: 0.8;
}

.sim-breakdown-legend {
    display: grid;
    gap: 4px 16px;
    min-width: 0;
    max-height: 90px;
    overflow-y: auto;
    overflow-x: hidden;
    grid-template-columns: 1fr 1fr;
}

.sim-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sim-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.sim-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sim-legend-count {
    font-weight: 600;
    color: #333;
    margin-left: auto;
    flex-shrink: 0;
}

/* Anomaly card — overflow:hidden on flex item resets min-height to 0,
   so sibling cards determine row height. Body fills available space and scrolls. */
.sim-summary-group[data-card="anomalies"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sim-anomaly-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.sim-anomaly-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
    padding: 8px 0;
}

.sim-anomaly-empty-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #d4edda;
    color: #155724;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.sim-anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-anomaly-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.sim-anomaly-item.clickable {
    cursor: pointer;
}

.sim-anomaly-item.clickable:hover {
    background: #f5f5f5;
}

.sim-anomaly-item-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.sim-anomaly-item-icon.severity-warning { background: #fff3cd; color: #856404; }
.sim-anomaly-item-icon.severity-danger  { background: #f8d7da; color: #721c24; }
.sim-anomaly-item-icon.severity-info    { background: #d1ecf1; color: #0c5460; }

.sim-anomaly-item-message {
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}

/* Anomaly filter buttons */
.sim-anomaly-filter-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
}

.sim-anomaly-filter-type {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, background 0.15s ease, color 0.15s ease;
    color: #bbb;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.sim-anomaly-filter-group.expanded .sim-anomaly-filter-type {
    width: 26px;
    height: 26px;
    opacity: 1;
    padding: 0;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sim-anomaly-filter-type.active {
    color: #2c5282;
    background: #e0ecf8;
}

.sim-anomaly-filter-toggle {
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.sim-anomaly-filter-toggle:hover {
    color: #555;
    background: #f0f0f0;
}

/* ==========================================================================
   End Simulation Summary Cards
   ========================================================================== */


/* ==========================================================================
   Simulation Tabs — drag reorder only
   ========================================================================== */

/* Drag-and-drop tab reordering */
#simulations .pageTabsContainer .nav-tabs > li.ui-sortable-helper {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    background: #fff;
}

#simulations .pageTabsContainer .nav-tabs > li.ui-sortable-helper > a {
    cursor: grabbing;
}

#simulations .sim-tab-placeholder {
    display: inline-block;
    border: 2px dashed #90b4e0;
    border-radius: 4px;
    min-width: 80px;
    height: 30px;
}

/* ==========================================================================
   End Simulation Tabs
   ========================================================================== */

/* Override jQueryUI autocomplete element's background */
.ui-widget.content {
    background: none !important;
}

/* basic filters */

div#simulation div#filterUI .col-lg-12 .filterButtons {
    float: right;
}


div#simulation div#filterUI .input-group .input-group-addon {
    padding-right: 20px;
}

div#simulation div#filterUI i {
    width: 0;
    right: 27px;
    top: 2px;
    color: #666;
}

div#simulation div#filterUI ul.selectpicker a span.text {
    background: none;
}

div#simulation div#filterUI .basicTxtInput {
    width: 100px;
    height: 30px;
    display: inline-block;
}

div#simulation div#filterUI .basicTxtInput.filterActive,
div#simulation button.filterActive {
    border: 1px solid #89cdcd;
    background-color: azure;
}

div#simulation div#filterUI #filterElementsList {
    margin-top: 10px;
    padding: 10px;
    background-color: #eee;
}

div#simulation div#filterUI #filterElementsList .removeOrGroupBtn,
div#simulation div#filterUI #filterElementsList .switchOrGrpBtn {
    padding-left: 5px;
    font-size: 0.9em;
    cursor: pointer;
}

div#simulation div#filterUI #filterElementsList .removeOrGroupBtn:hover {
    color: red;
}

div#simulation div#filterUI #filterElementsList .switchOrGrpBtn:hover {
    color: green;
}

div#simulation div#filterUI #filterElementsList .filterElement {
    margin-right: 5px;
    cursor: pointer;
}

div#simulation div#filterUI #filterElementsList .filterElement:hover {
    background-color: red;
}

div#simulation div#filterUI .helper_addOrGroup {
    color: #888;
    font-size: 0.8em;
    border: 1px dotted #aaa;
    padding: 2px;
    cursor: pointer;
}

div#simulation div#filterUI span.filterOrGroup {
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 4px;
    margin: 2px;
    display: inline-block;
}

div#simulation div#filterUI span.filterOrGroup.active {
    border: 1px solid crimson;
}

div#simulation div#filterUI span.filterOrGroup.selected {
    background-color: azure;
}

div#simulation div#filterUI .filterElementCreation {
    margin-top: 20px;
    display: inline-block;
}

div#simulation div#filterUI .filterElementCreation .col-lg-12 {
    padding-left: 0;
}

div#simulation div#filterUI .filterElementCreation label {
    width: 150px;
}

/* save / load filters popover */
div#simulation div#filterUI .row.popoverContent,
div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
}

div#simulation div#filterUI .row.popoverContent input {
    height: 30px;
}

/* pagination */

div#simulation .paginationArea {
    /*margin: 10px 0;*/
    /*min-width: 900px;*/
}

div#simulation .paginationArea .paginationInputContainer {
    width: 235px;
}

div#simulation .paginationArea .paginationInputContainer input {
    height: 30px;
    z-index: 1;
}

div#simulation .moreFilterFunctions {
    padding: 10px 0;

}
/* bulk actions view */
div#bulkActionsView_srs {
    /*display: none;*/
    /*width: 100%;*/
    /*padding: 10px;*/
    /*margin-top: 10px;*/
    /*border: 1px solid #ddd;*/
    /*position: relative;*/
    /*background-color: white;*/
    z-index: 5;
    display: none;
    width: 80%;
    border: 1px solid #ddd;
    padding: 10px;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    box-shadow: 0 10px 15px 0px rgb(80,80,80);
    left: 10%;
}

div#bulkActionsView_srs.highlighted {
    box-shadow: 0px 0px 17px 2px #9dd2ff;
    border-color: #428bca;
}

div#simulation span#bulkActionsView .col-lg-7 {
    padding-left: 20px;
}

div#simulation span#bulkActionsView.floatOnTop {
    position: fixed;
    left: 0px;
    top: -11px;
    box-shadow: 0 1px 20px 0px #999;
}

div#simulation span#bulkActionsView h3 {
    margin-bottom: 5px;
}

div#simulation span#bulkActionsView .row:first-of-type {
    margin-bottom: 10px;
}

/* advanced filters */

div#simulation div#filterUI .advancedFiltersContainer {
    display: none;
}

div#simulation div#filterUI .advancedFiltersContainer .form-control {
    z-index: 1;
}

div#simulation div#filterUI .advancedFiltersContainer #column {
    width: 180px;
}

div#simulation div#filterUI .advancedFiltersContainer #operandNum {
    width: 180px;
    margin-left: 25px;
    margin-right: 25px;
    display: inline-block;
    top: 5px;
}
div#simulation div#filterUI .advancedFiltersContainer .bootstrap-select.advancedFilterInput {
    display: inline-block;
}

div#simulation div#filterUI .advancedFiltersContainer #operandTxt {
    width: 180px;
}

div#simulation div#filterUI .advancedFiltersContainer .valTooltip {
    position: relative;
    top: 28px;
    font-size: 0.9em;
}

div#simulation div#filterUI .advancedFiltersContainer .helpTooltip {
    float: right;
    height: 0;
    right: 30px;
    position: relative;
    top: -45px;
    text-align: right;
    display: block;
}

div#simulation div#filterUI .advancedFiltersContainer .helpTooltip .txt {
    padding-right: 20px;
    display: inline-block;
}

div#simulation div#filterUI .advancedFiltersContainer .helpTooltip .glyphicon-info-sign {
    font-size: 2em;
    height: 0;
}

/* simulation context menu */
div#simulation #tempElements {
    position: absolute;
    width: 0;
    height: 0;
}

div.contextMenuContainer {
    width: 190px;
    border: 1px solid #ddd;
}

div.contextMenuContainer ul {
    list-style: none;
    margin: 0;
}

div.contextMenuContainer ul li {
    margin: 0;
    padding: 5px 10px;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

div.contextMenuContainer ul li.dangerous {
    background-color: #D9534F;
    color: white;
}

div.contextMenuContainer ul li.dangerous:hover {
    background-color: #D53026;
    color: white;
}

div.contextMenuContainer ul li:hover {
    background-color: #eee;
}

/* table */
div#simulation table.simulationsList tr {
    cursor: pointer;
}
div#simulation table.simulationsList tr.bookmarked {
    border-left: 3px solid #428bca;
}


/* tabs */
div#simulation .pageTabsContainer .nav-tabs {
    margin-bottom: 15px;
}

div#simulation .pageTabsContainer #simulationTabs li:not(:first-child) a {
    padding-right: 30px;
}


/* search filter modal */

div#simulation .modalContainer.loadfilterview .row input#searchFilter {
    margin-left: 0;
    width: 100%;
    margin-bottom: 10px;
    height: 30px;
}

div#simulation .modalContainer.loadfilterview .list-group {
    max-height: 300px;
    overflow-y: auto;
}

div#simulation .modalContainer.loadfilterview .list-group .list-group-item.selected {
    background-color: #428bca;
    color: white;
}

div#simulation .modalContainer.loadfilterview .col-lg-8 h6 {
    margin-bottom: 2px;
}

/* single record viewer */
div#simulation .simTab ul.viewModeList {
    /*border-bottom: 1px solid #eee;*/
}

div#simulation .simTab ul.viewModeList li,
div#simulation .simTab ul.typesofInfoTab li {
    display: inline-block;
    border-radius: 30px;
}

div#simulation .simTab ul.viewModeList li a,
div#simulation .simTab ul.typesofInfoTab li a {
    display: inline-block;
    padding: 5px 10px;
}

div#simulation .simTab ul.viewModeList li:hover,
div#simulation .simTab ul.typesofInfoTab li:hover {
    background-color: #ddd;
}

div#simulation .simTab ul.viewModeList li.active,
div#simulation .simTab ul.typesofInfoTab li.active {
    background-color: #428bca;
    color: white;
}

div#simulation .simTab ul.viewModeList li.active a,
div#simulation .simTab ul.typesofInfoTab li.active a {
    color: white;
}

div#simulation .simTab .headerRow {
    display: block;
    height: 30px;
    float: right;
}

div#simulation .simTab hr {
    margin-top: 0px;
    margin-bottom: 15px;
}

div#simulation .simTab .headerRow span.toolbarBtn span {
    padding: 7px;
    cursor: pointer;
    border: 1px #aaa solid;
    margin-left: 5px;
    border-radius: 30px;
}

div#simulation .simTab .headerRow span.toolbarBtn span.threeD {
    width: 28px;
    height: 28px;
    line-height: 15px;
    display: inline-block;
    text-indent: -1px;
}

div#simulation .simTab .headerRow span.toolbarBtn .popover li.threeDmodelItem {
    list-style: none;
    display: inline-block;
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

div#simulation .simTab .headerRow span.toolbarBtn .popover li.threeDmodelItem:hover {
    background-color: #efefef;
}

div#simulation .simTab .headerRow span.toolbarBtn span:hover {
    background-color: #428bca;
    border: 1px #428bca solid;
    color: white;
}

div#simulation .simTab .headerRow div.dropdown {
    display: inline-block;
    top: -2px;
}

div#simulation .simTab .headerRow div.dropdown button {
    border-radius: 30px;
}

div#simulation .simTab .tablePagination {
    width: 150px;
}

div#simulation .simTab input.form-control {
    height: 30px;
    font-size: 0.9em;
}

div#simulation .simTab .subtabsRenderingArea div#responses .row,
div#simulation .simTab .subtabsRenderingArea div#files .row,
div#simulation .simTab .subtabsRenderingArea div#parts .row,
div#simulation .simTab .subtabsRenderingArea div#comments .row {
    margin-bottom: 10px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .row.optionsAndFunctions,
div#simulation .simTab .subtabsRenderingArea div#files .row.optionsAndFunctions,
div#simulation .simTab .subtabsRenderingArea div#parts .row.optionsAndFunctions {
    border-bottom: 1px solid #ddd;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer,
div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer,
div#simulation .simTab .subtabsRenderingArea div#parts .row.optionsAndFunctions {
    padding-left: 10px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer,
div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer .filesMenuContainer,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer {
    position: relative;
    float: right;
    width: 100%;
    /*height: 0px;*/
    /*opacity: 0;*/
    display: none;
    background-color: rgba(255,255,255,0.8);
    height: 435px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-top: 10px;
    top: -10px;
    font-size: 0.9em;
    box-shadow: inset #ccc 0 3px 6px -4px;
}

div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer .filesMenuContainer,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer {
    height: 190px;
    display: none;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer h3,
div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer .filesMenuContainer h3,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer h3 {
    padding-bottom: 5px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer button,
div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer .filesMenuContainer button,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer button {
    font-size: 0.9em;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer ul.selectpicker a span.text,
div#simulation .simTab .subtabsRenderingArea div#files .filesListContainer .filesMenuContainer ul.selectpicker a span.text,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer ul.selectpicker a span.text {
    background: none;
    font-size: 0.9em;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListHeader,
div#simulation .simTab .subtabsRenderingArea div#files .filesListHeader,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListHeader {
    /*background-color: #fff;*/
    /*padding: 10px 10px;*/
    padding-bottom: 55px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListHeader input,
div#simulation .simTab .subtabsRenderingArea div#files .filesListHeader input,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListHeader input {
    padding: 5px 10px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody #pageSlider,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody #pageSlider,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody #pageSlider {
    width: 76%;
    margin: 0 auto;
    margin-bottom: 30px;
    height: 10px;
    top: 45px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .recordTools.floatOnTop .responsesListBody #pageSlider {
    top: 54px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle {
    top: -5px;
    height: 18px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle:after,
div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle:before,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle:after,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle:before,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle:after,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle:before {
    top: 1px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody input,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody input,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody input {
    padding: 5px 10px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody ul.responsesList li,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody ul.filesList li,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody ul.partsList li {
    margin-bottom: 1px;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody ul.filesList li a,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody ul.partsList li a {
    padding: 5px 10px;
    display: block;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a.selected,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody ul.filesList li a.selected,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody ul.partsList li a.selected {
    background-color: #d9edf7;
    border: 1px solid #4b70bf;
}

div#simulation .simTab .subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a:hover,
div#simulation .simTab .subtabsRenderingArea div#files .filesListBody ul.filesList li a:hover,
div#simulation .simTab .subtabsRenderingArea div#parts .partsListBody ul.partsList li a:hover {
    background-color: #eee;
}

div#simulation .simTab .subtabsRenderingArea div#responses .col-lg-9,
div#simulation .simTab .subtabsRenderingArea div#files .col-lg-9,
div#simulation .simTab .subtabsRenderingArea div#parts .col-lg-9{
    padding-right: 0;
}

/*@media (min-width: 1000px) {*/
    /*div#simulation .simTab .subtabsRenderingArea div#responses .responseItem {*/
        /*width: 99.5%*/
    /*}*/
/*}*/

/*@media (min-width: 1200px) {*/
    /*div#simulation .simTab .subtabsRenderingArea div#responses .responseItem {*/
        /*width: 49%*/
    /*}*/
/*}*/
div.responseItemsRenderingArea .dataCol {
    width: 49.5%;
    display: inline-block;
    vertical-align: top;
}

div.responseItemsRenderingArea .responseItem {
    border: 1px solid #ddd;
    width: 98.5%;
    margin-left: 5px;
    margin-bottom: 10px;
    display: block;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
div.responseItemsRenderingArea .responseItem.highlighted {
    border: 1px solid orange;
}

div.responseItemsRenderingArea .responseItem.selected {
    border: 1px solid #4b70bf;
}

div.responseItemsRenderingArea .responseItem .respTitle {
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f3;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
div.responseItemsRenderingArea .responseItem .respTitle h3 {
    float: left;
}

div.responseItemsRenderingArea .responseItem .respTitle.highlighted {
    background-color: orange;
}
div.responseItemsRenderingArea .responseItem .respTitle .respActionIcons {
    float: right;
    height: 0;
    position: relative;
    top: -10px;
}

div.responseItemsRenderingArea .responseItem .respTitle span.entypoGlyphicon {
    font-family: 'Entypo Glyphicons';
    font-size: 2.1em;
    padding: 2px 4px;
    cursor: pointer;
    text-shadow: 1px 1px white;
}

div.responseItemsRenderingArea .responseItem .respTitle span.entypoGlyphicon.commentExists {
    color: indianred;
}

div.responseItemsRenderingArea .responseItem .respTitle span.entypoGlyphicon.tbi {
    color: red;
}

div.responseItemsRenderingArea .responseItem .respTitle span.entypoGlyphicon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

div.responseItemsRenderingArea .responseItem .respContent p.lead {
    margin-bottom: 2px;
}

div.responseItemsRenderingArea .responseItem .respContent p.small {
    margin-bottom: 0px;
    color: #666;
}

div.responseItemsRenderingArea .responseItem .respContent hr {
    margin: 5px 0;
}

div.responseItemsRenderingArea .responseItem .respTitle.selected {
    background-color: #d9edf7;
}

div.responseItemsRenderingArea .responseItem .respContent {
    padding: 10px;
}

div.responseItemsRenderingArea .responseItem .respContent .curveArea {
    padding-bottom: 10px;
    width: 100%;
    height: 300px;
    display: inline-block;
}

div#simulation .simTab .subtabsRenderingArea div#files table,
div#simulation .simTab .subtabsRenderingArea div#parts table {
    width: 100%;
    font-size: 0.9em;
}

div#simulation .simTab .subtabsRenderingArea div#files table tr,
div#simulation .simTab .subtabsRenderingArea div#parts table tr {
    cursor: pointer;
}

div#simulation .simTab .subtabsRenderingArea div#files .contextMenuContainer,
div#simulation .simTab .subtabsRenderingArea div#parts .contextMenuContainer {
    position: absolute;
    float: left;
}

/*div#simulation .simTab .listArea h3,*/
/*div#simulation .simTab .curveArea h3 {*/
    /*padding-bottom: 10px;*/
/*}*/
/*div#simulation .simTab div.curvesList .list-group-item {*/
    /*padding: 6px 15px;*/
/*}*/

/*div#simulation .simTab div.curvesList .list-group-item.selected {*/
    /*background-color: #428bca;*/
    /*border: 1px #428bca solid;*/
    /*color: white;*/
/*}*/

/*div#simulation .simTab div.curveArea .svgCanvas {*/
    /*width: 100%;*/
    /*height: 350px;*/
    /*display: inline-block;*/
    /*border: 1px solid #ddd;*/
/*}*/

/*div#simulation .simTab div.curveArea .svgCanvas h1 {*/
    /*display: block;*/
    /*width: 100%;*/
    /*padding-top: 145px;*/
    /*vertical-align: middle;*/
    /*text-align: center;*/
    /*font-size: 2em;*/
/*}*/

/*div#simulation .simTab div.curveArea .curveTitle {*/
    /*text-align: center;*/
    /*margin-top: 10px;*/
/*}*/

/* response edit modal window */
div#simulation .modalContainer.editresponseview .nav-tabs {
    margin-bottom: 15px;
}

div#simulation .modalContainer.editresponseview h3 {
    margin-bottom: 7px;
}

div#simulation .modalContainer.editresponseview input {
    height: 30px;
}

div#simulation .modalContainer.editresponseview input,
div#simulation .modalContainer.editresponseview textarea {
    margin-left: 0px !important;
    margin-bottom: 0px;
}

div#simulation .modalContainer.editresponseview button.selectpicker {
    margin-left: 0;
    margin-bottom: 0;
}

div#simulation .modalContainer.editresponseview .inlineWrapper {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

div#simulation .modalContainer ul.selectpicker .dropdown-header span.text {
    background: none;
}

div#simulation .modalContainer.editresponseview .panel .glyphicon-remove {
    cursor: pointer;
}

/* Dropzone styling */
.dropz .filesListHeader {
    text-align: left;
    margin-bottom: 10px;
}
.dz-clickable {
    border: 1px #ddd dashed;
    cursor: n-resize;
}

.dz-preview {
    border-bottom: 1px solid #eee;
    padding-top: 3px;
    padding-bottom: 3px;
}

.dz-preview.mainModel {
    background-color: transparent;
}

.dz-preview:last-child {
    margin-bottom: 15px;
}
.dz-preview:hover {
    background-color: #ddd;
    cursor: pointer;
}

.dz-preview .dz-filename,
.dz-preview .dz-size {
    display: inline-block;
    text-align: left;
}
.dz-preview .dz-filename {
    width: 50%;
    white-space: nowrap;
}
.dz-preview .dz-size {
    width: 25%;
}

.dz-preview .makeMain {
    width: 20%;
    background-color: #efefef;
    border: #ddd;
    padding: 3px;
    cursor: pointer;
    display: inline-block;
}

.dz-preview .makeMain.main {
    cursor: default;
    background-color: #666;
    color: white;
}

.dz-preview .remove {
    width: 3%;
    cursor: pointer;
    padding: 3px;
    display: inline-block;
}

.dz-preview .dz-success-mark,
.dz-preview .dz-error-mark {
    display: none;
}

/* Simulation creation modal */
/*div#simulation .modalContainer.createnewsimmodalview .row,*/
/*div#simulation .modalContainer.editfilemodalview .row,*/
/*div#simulation .modalContainer.uploadfilemodalview .row {*/
    /*margin-left: 0;*/
    /*margin-right: 0;*/
/*}*/

/*div#simulation .modalContainer.createnewsimmodalview .row input,*/
/*div#simulation .modalContainer.createnewsimmodalview .row textarea,*/
/*div#simulation .modalContainer.createnewsimmodalview .row button,*/
/*div#simulation .modalContainer .row div.customInput {*/
    /*margin-left: 0 !important;*/
/*}*/

div#simulation .modalContainer.createnewsimmodalview .row label {
    padding-left: 0;
}

div#simulation .modalContainer .dropz {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: block;

}

div#simulation .modalContainer .dropz form#msgArea {
    display: block;
    vertical-align: top;
    text-align: center;
    min-height: 80px;
    background: url(/images/dropzone.png) no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

div#simulation .modalContainer.createnewsimmodalview .specifyMoreInfo,
div.modalContainer.submittohpcview .specifyMoreInfo {
    font-weight: normal;
}

div#simulation .modalContainer.createnewsimmodalview .specifyMoreInfo input[type=checkbox],
div.modalContainer.submittohpcview .specifyMoreInfo input[type=checkbox] {
    height: auto;
}

div#simulation .modalContainer.createnewsimmodalview .progress,
div.modalContainer.submittohpcview .progress {
    margin-bottom: 0;
}

.glyphicon-hpcserver {
    background-image: url(/images/data_center_16.png) !important;
    display: inline-block; width: 16px; height: 16px; margin-right:5px;
}

.modalContainer.createnewsimmodalview .configItem,
div.modalContainer.submittohpcview .configItem {
    padding: 10px;
    border: 1px #dedede solid;
    background-image: url(/images/data_center_48.png);
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 20px;
}

.modalContainer.createnewsimmodalview .configItem:hover,
div.modalContainer.submittohpcview .configItem:hover {
    background-color: #efefef;
}

.modalContainer.createnewsimmodalview .configItem .hintContainer,
div.modalContainer.submittohpcview .configItem .hintContainer {
    float: right;
}

.modalContainer.createnewsimmodalview .configItem:hover .hintContainer .glyphicon,
div.modalContainer.submittohpcview .configItem:hover .hintContainer .glyphicon {
    cursor: pointer;
}

.modalContainer.createnewsimmodalview .configItem .infoRow,
div.modalContainer.submittohpcview .configItem .infoRow {
    margin-bottom: 3px;
}

.modalContainer.createnewsimmodalview .configItem .col-xs-6:first-child .infoRow,
div.modalContainer.submittohpcview .configItem .col-xs-6:first-child .infoRow {
    padding-left: 70px;
}

.modalContainer.createnewsimmodalview .configItem .infoRow #infolabel,
div.modalContainer.submittohpcview .configItem .infoRow #infolabel {
    width: 180px;
    display: inline-block;
    font-weight: bold;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer {
    width: 370px;
    min-height: 50px;
    float: right;
    border: 1px solid #cccccc;
    position: absolute;
    background-color: white;
    padding: 10px;
    left: 110px;
    top: 0px;
    z-index: 10;
}

div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer {
    top: 0px;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .itemsContainer,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .itemsContainer {
    width: 100%;
    max-height: 177px;
    overflow-y: auto;
    float: left;
    vertical-align: top;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .itemsContainer.shrunk,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .itemsContainer.shrunk {
    width: 217px;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .detailContainer,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .detailContainer {
    width: 460px;
    float: right;
    margin-left: 10px;
    display: none;
    color: white;
    text-align: left;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .detailContainer pre,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .detailContainer pre {
    margin: 0;
    height: 180px;
    font-size: 0.85em;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .quickConfig,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .quickConfig {
    padding: 5px 10px;
    text-align: left;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .quickConfig:hover,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .quickConfig:hover {
    background-color: #efefef;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .arrow,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .arrow {
    border-right: 10px solid #ccc;
    border-top: 10px transparent solid;
    border-bottom: 10px transparent solid;
    position: absolute;
    top: 70%;
    left: -10px;
}

.modalContainer.createnewsimmodalview .recentlyCreatedConfigsContainer .innerArrow,
div.modalContainer.submittohpcview .recentlyCreatedConfigsContainer .innerArrow {
    border-right: 9px solid white;
    border-top: 9px transparent solid;
    border-bottom: 9px transparent solid;
    position: absolute;
    top: 70.5%;
    left: -9px;
}

.modalContainer.editfilemodalview .row {
    display: inline-block;
}

.modalContainer.editfilemodalview .row input,
.modalContainer.editfilemodalview .row textarea,
.modalContainer.editfilemodalview .row button,
.modalContainer.editfilemodalview .row div.customInput {
    margin-left: 0 !important;
}

.modalContainer.editfilemodalview .row label {
    padding-left: 0;
}

.popupcomments {
    max-height: none;
}


.popupcomments .commentsArea {
    max-height: 130px;
    overflow-x: hidden;
    overflow-y: auto;
}

.popupcomments .commentItem {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 95%;
    margin-left: 5px;
}

.popupcomments .commentItem p {
    margin-bottom: 5px;
}

.popupcomments .commentItem small {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.popupcomments .commentItem.other {
    border: 1px solid #ddd;
    background-color: #ddd;
}

.popupcomments .commentItem.me {
    border: 1px solid #428bca;
    background-color: #428bca;
    color: white;
}

.popupcomments .commentItem .arrow_from_other {
    position: relative;
    right: 276px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 10px black;
    border-right-color: inherit;
    float: right;
    top: 0px;
}

.popupcomments .commentItem .arrow_from_me {
    position: relative;
    left: 11px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-left: solid 10px black;
    border-left-color: inherit;
    float: right;
    top: 0px;
}

.recordTools {
    position: absolute;
    right: 0px;
    width: 290px;
    top: 49px;
}

.recordTools.floatOnTop {
    position: fixed;
    top: 0px;
    width: 290px;
    right: 10px;
}

.recordTools.floatOnTop .respMenuContainer {
    padding-top: 20px !important;
}

.notyetImplemented {
    background-color: red;
}

/* ── Custom Widget: Add button + creation form ── */
.sim-widget-add-btn {
    display: block;
    margin-top: 8px;
    width: 100%;
    padding: 5px 10px;
    border: 1px dashed #90b4e0;
    border-radius: 6px;
    background: transparent;
    color: #2c5282;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sim-widget-add-btn:hover {
    background: #e0ecf8;
    border-color: #2c5282;
}
.sim-widget-form {
    margin-top: 8px;
    padding: 8px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.sim-widget-form select,
.sim-widget-form input[type="text"],
.sim-widget-form input[type="number"] {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    padding: 4px 6px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 11px;
    color: #333;
    background: #fff;
    box-sizing: border-box;
}
.sim-widget-form input[type="text"].sim-widget-form-error {
    border-color: #721c24;
}
.sim-widget-donut-empty-label {
    font-size: 11px;
    color: #555;
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}
.sim-widget-tile-row {
    margin-bottom: 4px;
}
.sim-widget-lb-dir {
    font-size: 11px;
    color: #555;
    margin-bottom: 4px;
}
.sim-widget-form-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.sim-widget-form-add {
    flex: 1;
    padding: 5px 10px;
    background: #2c5282;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sim-widget-form-add:hover {
    background: #1a365d;
}
.sim-widget-form-cancel {
    flex: 1;
    padding: 5px 10px;
    background: #f0f0f0;
    color: #555;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.sim-widget-form-cancel:hover {
    background: #e0e0e0;
}

/* ── Custom Widget: Remove button in card header ── */
.sim-widget-remove {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.2s ease, background 0.2s ease;
}
.sim-widget-remove:hover {
    color: #721c24;
    background: #f8d7da;
}

/* ── Per-card visibility panel ── */
/* Self-expanding "Manage Widgets" box: ONE container that grows to reveal the
   options INSIDE it — header stays visible, the list slides open within the box
   (not a separate panel underneath). Collapsed = grey pill; expanded = white box. */
.sim-widget-visibility {
    margin-top: 6px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #f0f3f7;
    overflow: hidden;                 /* clip the slide to the box's rounded corners */
    transition: background .15s ease, border-color .15s ease;
}
.sim-widget-visibility:hover {
    border-color: #cdd8e6;
}
.sim-widget-visibility.active {
    background: #fff;
    border-color: #90b4e0;
}
/* the header is a borderless button filling the top of the box */
.sim-widget-visibility-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.sim-widget-visibility:hover .sim-widget-visibility-btn,
.sim-widget-visibility.active .sim-widget-visibility-btn {
    color: #2c5282;
}
.sim-widget-visibility-btn .sim-widget-caret {
    margin-left: auto;
    font-size: 11px;
    transition: transform .2s ease;
}
.sim-widget-visibility.active .sim-widget-caret {
    transform: rotate(180deg);
}
/* the options list lives INSIDE the box, below the header; slid open via jQuery */
.sim-widget-visibility-list {
    padding: 4px 10px 8px 10px;
    border-top: 1px solid #e2e8f0;
}
.sim-widget-visibility-item {
    display: flex;
    align-items: center;
    font-size: 11.5px;
    color: #4b5563;
    cursor: pointer;
    padding: 3px 2px;
    border-radius: 4px;
    transition: color .12s ease, background .12s ease;
}
.sim-widget-visibility-item:hover {
    color: #2c5282;
    background: #eef3f9;
}
.sim-widget-visibility-item input {
    margin-right: 7px;
    accent-color: #2c5282;
}

/* ── Leaderboard widget: rank, value, bar ── */
.sim-lb-rank {
    width: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    flex-shrink: 0;
}
.sim-lb-value {
    font-size: 11px;
    font-weight: 700;
    color: #2c5282;
    white-space: nowrap;
    flex-shrink: 0;
}
.sim-lb-bar {
    width: 60px;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.sim-lb-bar-fill {
    display: block;
    height: 100%;
    background: #2c5282;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.sim-anomaly-item .sim-anomaly-item-message {
    flex: 1 1 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Custom widget tile body ── */
.sim-custom-tiles-body .sim-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
}
.sim-custom-tiles-body .sim-summary-metric-value {
    white-space: nowrap;
}
/* New Simulation is three jobs, not one: submitting a deck is the primary action and keeps
   the filled button; bringing in one finished run or several sit under their own label,
   in the same row language as the filters below. */
.sim-new-group .sim-filter-label {
    margin-top: 14px;
}

.sim-import-list li a {
    padding: 5px 8px;
    align-items: center;
}

.sim-import-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.sim-import-text small {
    font-size: 10.5px;
    font-weight: 400;
    color: #999;
}

.sim-import-list li a:hover .sim-filter-icon.icon-shared { background: #bee3ea; }
.sim-import-list li a:hover .sim-filter-icon.icon-template { background: #dcc8e8; }

/* Simulation detail header actions: Compare, Peacock 3D, Resubmit and Options
   share one quiet outline treatment; Resubmit is the one filled action. */
.simulation-header-options { display: inline-flex; align-items: center; gap: 6px; }
.simulation-header-options .btn-group { display: inline-flex; gap: 6px; }
.simulation-header-options .btn.btn-outline,
.simulation-header-options .btn-group .btn.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2c5282;
    background: #fff !important;
    border: 1px solid #d5dde8;
    border-radius: 6px !important;
    box-shadow: none;
    line-height: 18px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.simulation-header-options .btn.btn-outline:hover,
.simulation-header-options .btn.btn-outline:focus {
    background: #e0ecf8 !important;
    border-color: #2c5282;
    color: #2c5282;
    text-decoration: none;
}
.simulation-header-options .btn.btn-outline .fa { font-size: 12px; }
.simulation-header-options .btn.btn-outline.sim-resubmit-btn {
    color: #fff;
    background: linear-gradient(135deg, #2c5282, #2b6cb0) !important;
    border-color: #2c5282;
}
.simulation-header-options .btn.btn-outline.sim-resubmit-btn:hover,
.simulation-header-options .btn.btn-outline.sim-resubmit-btn:focus {
    color: #fff;
    background: linear-gradient(135deg, #24446c, #255f9a) !important;
}
.simulation-header-options .dropdown-menu {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    min-width: 240px;
}
.simulation-header-options .dropdown-menu > li > a {
    padding: 7px 14px;
    font-size: 12px;
    color: #333;
    transition: background 0.15s ease;
}
.simulation-header-options .dropdown-menu > li > a .fa,
.simulation-header-options .dropdown-menu > li > a i {
    width: 16px;
    color: #888;
    text-align: center;
    margin-right: 4px;
}
.simulation-header-options .dropdown-menu > li > a:hover { background: #f3f6fa; color: #2c5282; }

/* /stylesheets/spa/physicaltest.css */
div#physicaltest .moreFilterFunctions {
    padding: 10px 0;

}

/* bulk actions view */
div#bulkActionsView_pt {
    /*display: none;*/
    /*width: 100%;*/
    /*padding: 10px;*/
    /*margin-top: 10px;*/
    /*border: 1px solid #ddd;*/
    /*position: relative;*/
    /*background-color: white;*/
    /*z-index: 5;*/
    display: none;
    width: 80%;
    border: 1px solid #ddd;
    padding: 10px;
    position: fixed;
    bottom: 40px;
    background-color: #fff;
    box-shadow: 0 10px 15px 0px rgb(80,80,80);
    left: 10%;
}

div#bulkActionsView_pt.highlighted {
    box-shadow: 0px 0px 17px 2px #9dd2ff;
    border-color: #428bca;
}

/* simulation context menu */
div#physicaltest #tempElements {
    position: absolute;
    width: 0;
    height: 0;
}

div#physicaltest div#filterUI .basicTxtInput.filterActive,
div#physicaltest button.filterActive {
    border: 1px solid #89cdcd;
    background-color: azure;
}

/* table */
div#physicaltest table.simulationsList tr {
    cursor: pointer;
}

div#physicaltest table.simulationsList tr.bookmarked {
    border-left: 3px solid #428bca;
}

/* tabs */
/*div#physicaltest .pageTabsContainer .nav-tabs {*/
    /*margin-bottom: 15px;*/
/*}*/

/*div#physicaltest .pageTabsContainer #simulationTabs li:not(:first-child) a {*/
    /*padding-right: 30px;*/
/*}*/



/*div.recordTab .listArea h3,*/
/*div.recordTab .curveArea h3 {*/
/*padding-bottom: 10px;*/
/*}*/
/*div.recordTab div.curvesList .list-group-item {*/
/*padding: 6px 15px;*/
/*}*/

/*div.recordTab div.curvesList .list-group-item.selected {*/
/*background-color: #428bca;*/
/*border: 1px #428bca solid;*/
/*color: white;*/
/*}*/

/*div.recordTab div.curveArea .svgCanvas {*/
/*width: 100%;*/
/*height: 350px;*/
/*display: inline-block;*/
/*border: 1px solid #ddd;*/
/*}*/

/*div.recordTab div.curveArea .svgCanvas h1 {*/
/*display: block;*/
/*width: 100%;*/
/*padding-top: 145px;*/
/*vertical-align: middle;*/
/*text-align: center;*/
/*font-size: 2em;*/
/*}*/

/*div.recordTab div.curveArea .curveTitle {*/
/*text-align: center;*/
/*margin-top: 10px;*/
/*}*/

/* response edit modal window */
/*.modalContainer.editresponseview .nav-tabs {*/
    /*margin-bottom: 15px;*/
/*}*/

/*.modalContainer.editresponseview h3 {*/
    /*margin-bottom: 7px;*/
/*}*/

/*.modalContainer.editresponseview input {*/
    /*height: 30px;*/
/*}*/

/*.modalContainer.editresponseview input,*/
/*.modalContainer.editresponseview textarea {*/
    /*margin-left: 0px !important;*/
    /*margin-bottom: 0px;*/
/*}*/

/*.modalContainer.editresponseview button.selectpicker {*/
    /*margin-left: 0;*/
    /*margin-bottom: 0;*/
/*}*/

/*.modalContainer.editresponseview .inlineWrapper {*/
    /*display: inline-block;*/
    /*vertical-align: top;*/
    /*margin-bottom: 20px;*/
/*}*/

/*.modalContainer ul.selectpicker .dropdown-header span.text {*/
    /*background: none;*/
/*}*/

/*.modalContainer.editresponseview .panel .glyphicon-remove {*/
    /*cursor: pointer;*/
/*}*/


/* Simulation creation modal */
/*.modalContainer.createnewsimmodalview .row input,*/
/*.modalContainer.createnewsimmodalview .row textarea,*/
/*.modalContainer.createnewsimmodalview .row button,*/
/*.modalContainer .row div.customInput {*/
    /*margin-left: 0 !important;*/
/*}*/

/*.modalContainer.createnewsimmodalview .row label {*/
    /*padding-left: 0;*/
/*}*/

/*.modalContainer .dropz {*/
    /*width: 100%;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    /*display: block;*/

/*}*/



/*.modalContainer.editfilemodalview .row {*/
    /*display: inline-block;*/
/*}*/

/*.modalContainer.editfilemodalview .row input,*/
/*.modalContainer.editfilemodalview .row textarea,*/
/*.modalContainer.editfilemodalview .row button,*/
/*.modalContainer.editfilemodalview .row div.customInput {*/
    /*margin-left: 0 !important;*/
/*}*/

.modalContainer.editfilemodalview .row label {
    padding-left: 0;
}

/* popup comments */

.popupcomments {
    max-height: none;
}

.popupcomments .commentsArea {
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

.popupcomments .commentItem {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 95%;
    margin-left: 5px;
}

.popupcomments .commentItem p {
    margin-bottom: 5px;
}

.popupcomments .commentItem small {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.popupcomments .commentItem.other {
    border: 1px solid #ddd;
    background-color: #ddd;
}

.popupcomments .commentItem.me {
    border: 1px solid #428bca;
    background-color: #428bca;
    color: white;
}

.popupcomments .commentItem .arrow_from_other {
    position: relative;
    right: 276px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 10px black;
    border-right-color: inherit;
    float: right;
    top: 0px;
}

.popupcomments .commentItem .arrow_from_me {
    position: relative;
    left: 11px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-left: solid 10px black;
    border-left-color: inherit;
    float: right;
    top: 0px;
}


.modalContainer.compareview .modal .row .selectedModels .selectedModel,
.modalContainer.studymodalview .modal .row .selectedModels .selectedModel {
    padding-left: 0;
    border-left: none;
}

div.recordTools {
    position: absolute;
    right: 0px;
    top: 49px;
    width: 290px;
}

div.recordTools.floatOnTop {
    position: fixed;
    top: 0px;
    width: 290px;
    right: 10px;
}

div.recordTools.floatOnTop .respMenuContainer {
    padding-top: 20px !important;
}

.notyetImplemented {
    background-color: red;
}

/* ============================================================================
   Create New Physical Test modal (.modalContainer.createnewtestmodalview)
   ----------------------------------------------------------------------------
   Modernize + center the create-test dialog to match the project create/edit
   modal: rounded card, segmented One/Many pill tabs, clean inputs, flat
   buttons. The dimming bug (modal trapped under the body backdrop by the frozen
   #main_container) is fixed in physicaltests/main.js + views.js (append to
   <body>). Scoped to .modalContainer.createnewtestmodalview so other modals are
   untouched. The form is wider than the project one (loadcase/program/project/
   template + dropzone), so the dialog is a touch wider (860px).
   ============================================================================ */

/* center the dialog in the viewport. Bootstrap sets an inline display:block on
   .modal when it shows (which beats a stylesheet flex), and this modal isn't
   draggable, so center the dialog itself via absolute positioning relative to
   the fixed .modal rather than flexing the parent. */
.modalContainer.createnewtestmodalview .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    /* !important overrides Bootstrap's `.modal.in .modal-dialog { transform:
       translate(0,0) }` (equal specificity, loses on source order otherwise) */
    transform: translate(-50%, -50%) !important;
    width: 100% !important;      /* override inline width:75% so max-width wins */
    max-width: 860px;
    min-width: 0 !important;     /* override inline min-width:800px on narrow screens */
    margin: 0;
    max-height: calc(100vh - 48px);
}

/* rounded, clean card */
.modalContainer.createnewtestmodalview .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* header */
.modalContainer.createnewtestmodalview .modal-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 16px 20px;
}
.modalContainer.createnewtestmodalview .modal-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}
.modalContainer.createnewtestmodalview .modal-header h2 .fa-flask {
    color: #2c5282;
    margin-right: 4px;
}

/* body */
.modalContainer.createnewtestmodalview .modal-body {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* One / Many tabs → segmented pill toggle (the .nav-tabs in the body) */
.modalContainer.createnewtestmodalview .modal-body > .row > .col-lg-12 > .nav-tabs {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    margin: 0 0 18px 0;
    border: none;
}
.modalContainer.createnewtestmodalview .modal-body .nav-tabs > li {
    float: none;
    flex: 1 1 0;
    margin: 0;
}
.modalContainer.createnewtestmodalview .modal-body .nav-tabs > li > a {
    display: block;
    text-align: center;
    border: none !important;
    background: transparent !important;
    border-radius: 6px;
    color: #666 !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 7px 12px;
    transition: background 0.15s ease, color 0.15s ease;
}
.modalContainer.createnewtestmodalview .modal-body .nav-tabs > li > a:hover {
    color: #333 !important;
    background: #e8e8e8 !important;
}
.modalContainer.createnewtestmodalview .modal-body .nav-tabs > li.active > a {
    background: #fff !important;
    color: #2c5282 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* labels + inputs */
.modalContainer.createnewtestmodalview .modal-body label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}
.modalContainer.createnewtestmodalview .modal-body input[type="text"],
.modalContainer.createnewtestmodalview .modal-body input[type="number"],
.modalContainer.createnewtestmodalview .modal-body textarea,
.modalContainer.createnewtestmodalview .modal-body select,
.modalContainer.createnewtestmodalview .modal-body .form-control {
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 10px;
    box-shadow: none;
    background: #fff;
    color: #333;
}
.modalContainer.createnewtestmodalview .modal-body input:focus,
.modalContainer.createnewtestmodalview .modal-body textarea:focus,
.modalContainer.createnewtestmodalview .modal-body select:focus,
.modalContainer.createnewtestmodalview .modal-body .form-control:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
    outline: none;
}

/* footer + buttons (kill the bootstrap gradient/gloss) */
.modalContainer.createnewtestmodalview .modal-footer {
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 14px 20px;
}
.modalContainer.createnewtestmodalview .modal-footer .btn {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.modalContainer.createnewtestmodalview .modal-footer .modal-ok,
.modalContainer.createnewtestmodalview .modal-footer .btn-primary {
    background: #2c5282;
    border: 1px solid #2c5282;
    color: #fff;
}
.modalContainer.createnewtestmodalview .modal-footer .modal-ok:hover,
.modalContainer.createnewtestmodalview .modal-footer .btn-primary:hover {
    background: #244468;
    border-color: #244468;
}
.modalContainer.createnewtestmodalview .modal-footer .btn-default {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
}
.modalContainer.createnewtestmodalview .modal-footer .btn-default:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* ── field layout: clean wrapping grid ──────────────────────────────────────
   The form fields render as inline-block containers sized by cramped inline
   widths (19% / 29%). Re-flow them as a flex grid with real gaps: name /
   description / dropzone span the row; Loadcase|Program and Project|Template
   pair up two-per-row; Tags shares its row with the Browser button. */
.modalContainer.createnewtestmodalview .input-template-fields-old {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: flex-start;
}
.modalContainer.createnewtestmodalview .input-template-fields-old > div {
    width: auto !important;          /* override the inline 19% / 29% / 99% */
    flex: 1 1 100%;                  /* full row by default */
    margin: 0 0 14px 0 !important;
    vertical-align: top;
}
/* two-up rows */
.modalContainer.createnewtestmodalview .loadcase_id-container,
.modalContainer.createnewtestmodalview .program_id-container,
.modalContainer.createnewtestmodalview .project_id-container,
.modalContainer.createnewtestmodalview .responsetemplate_id-container {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0;
}
/* Tags + Browser fill their own row (explicit bases summing to 100% so the
   Loadcase|Program pair below can't flow up onto this line) */
.modalContainer.createnewtestmodalview .tags-container {
    flex: 1 1 calc(65% - 8px) !important;
    min-width: 0;
}
.modalContainer.createnewtestmodalview .tagbrowser-container {
    flex: 1 1 calc(35% - 8px) !important;
    align-self: flex-end;
}
.modalContainer.createnewtestmodalview .tagbrowser-container .btn {
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
    color: #2c5282;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: none;
    background-image: none;
    font-weight: 600;
    white-space: nowrap;
}
.modalContainer.createnewtestmodalview .tagbrowser-container .btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* ── select2 widgets (Loadcase / Program = multi; Project / Template = single) ─
   Flatten select2's default grey chrome to match the modern inputs and stop the
   doubled border (the generic input rule was also bordering the inner
   .select2-input). */
.modalContainer.createnewtestmodalview .select2-container {
    width: 100% !important;          /* override the inline width:96% */
    min-width: 0 !important;
}
/* multi-select visible box */
.modalContainer.createnewtestmodalview .select2-container-multi .select2-choices {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    min-height: 36px;
    padding: 2px 6px;
    box-shadow: none;
}
.modalContainer.createnewtestmodalview .select2-container-multi.select2-container-active .select2-choices {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
/* inner search input has NO border of its own (this was the "extra border") */
.modalContainer.createnewtestmodalview .select2-choices .select2-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px !important;
    min-height: 28px;
}
/* chosen tag pills in the multi-select */
.modalContainer.createnewtestmodalview .select2-choices .select2-search-choice {
    border: 1px solid #cdd7e3;
    background: #e8f0fe;
    border-radius: 4px;
    padding: 3px 6px 3px 18px;
    box-shadow: none;
    color: #2c5282;
}
/* single-select visible box (the <a>) */
.modalContainer.createnewtestmodalview .select2-container .select2-choice {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    height: 36px;
    line-height: 24px;
    padding: 6px 10px;
    box-shadow: none;
    color: #333;
}
.modalContainer.createnewtestmodalview .select2-container-active .select2-choice {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
/* the dropdown-arrow block on the single select */
.modalContainer.createnewtestmodalview .select2-choice .select2-arrow {
    background: transparent;
    border-left: 1px solid #eee;
    border-radius: 0 6px 6px 0;
}

/* ── Tags chip input (#tags via bootstrap-tagsinput) ─────────────────────────
   Type a tag + Enter to add a chip, repeat. Style the wrapper to match the
   modern inputs and the chips to match the select2 chip look used for
   Loadcase / Program. */
.modalContainer.createnewtestmodalview .bootstrap-tagsinput {
    display: block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    min-height: 36px;
    padding: 3px 6px;
    line-height: 1.6;
    cursor: text;
}
.modalContainer.createnewtestmodalview .bootstrap-tagsinput.focus,
.modalContainer.createnewtestmodalview .bootstrap-tagsinput:focus-within {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
.modalContainer.createnewtestmodalview .bootstrap-tagsinput .tag,
.modalContainer.createnewtestmodalview .bootstrap-tagsinput .label {
    display: inline-block;
    background: #e8f0fe !important;
    color: #2c5282 !important;
    border: 1px solid #cdd7e3;
    border-radius: 4px;
    padding: 3px 7px;
    margin: 2px 3px 2px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.modalContainer.createnewtestmodalview .bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.55;
}
.modalContainer.createnewtestmodalview .bootstrap-tagsinput .tag [data-role="remove"]:hover {
    opacity: 1;
}
.modalContainer.createnewtestmodalview .bootstrap-tagsinput input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px !important;
    min-width: 90px;
    width: auto;
}

/* Detail header band: small breathing room at the top. */
#physicaltests .physicaltest-tab-header {
    padding-top: 5px;
}

/* ============================================================
   PHYSICAL TEST — DETAIL VIEW   (scoped to #physicaltests)
   Modernizes the test detail surface: sub-tabs, action row,
   Export button, and the response/files/overview cards.
   Every selector is page-scoped (#physicaltests …) so it cannot
   leak onto the shared dashboard layout other detail views use.
   ============================================================ */

/* --- Sub-tabs: Home / Responses / Files / Comments ---------- */
/* From raw bootstrap underline tabs (grey active fill, blue
   bootstrap border) to a clean modern underline. The global
   `.nav-tabs a { color … !important }` forces !important on color. */
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs {
    border-bottom: 1px solid #e0e0e0;
    margin: 0 0 18px;
    padding: 0;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li {
    margin-bottom: -1px;
    border: none;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li > a {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: #888 !important;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li > a:hover {
    color: #555 !important;
    background: #f5f7fa !important;
    border-bottom-color: #cdd7e3 !important;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li.active > a,
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li.active > a:hover,
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li.active > a:focus {
    color: #2c5282 !important;
    background: transparent !important;
    border-bottom: 2px solid #2c5282 !important;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li > a .fa {
    margin-right: 5px;
    opacity: 0.85;
}
/* count chips ("Responses 10") inside each sub-tab */
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li > a .badge {
    background: #eef2f7;
    color: #5a6b7f;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 6px;
    border-radius: 10px;
    vertical-align: middle;
    box-shadow: none;
}
#physicaltests .physicaltest-view-body .item-tabs.nav-tabs > li.active > a .badge {
    background: #e0ecf8;
    color: #2c5282;
}

/* --- Header action row: Compare / Bookmark / Edit / Share / Delete ---
   Was a tight inline run with no spacing. Give it room; leave each
   action's own affordance intact (only spacing + a hover surface). */
#physicaltests .header-options.inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
}
#physicaltests .header-options.inline > li {
    margin: 0;
    display: inline-flex;
}
#physicaltests .header-options.inline > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
#physicaltests .header-options.inline > li > a:hover {
    background: #eef2f7;
}

/* --- Export button: flat outline (was glossy gradient pill) --- */
#physicaltests .export_options > #export.btn,
#physicaltests .export_options > .btn.btn-default {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #cdd7e3 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #2c5282 !important;
    padding: 5px 12px !important;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#physicaltests .export_options > #export.btn:hover,
#physicaltests .export_options > .btn.btn-default:hover {
    background: #eef2f7 !important;
    border-color: #2c5282 !important;
    color: #2c5282 !important;
}

/* --- Cards: Overview / Responses by Type / Files by Type ------
   Flatten the glossy bootstrap panel headers into clean card
   chrome with breathing room. */
#physicaltests .physicaltest-view-body .panel,
#physicaltests .physicaltest-view-body .rsp-panel-content.panel {
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
}
#physicaltests .physicaltest-view-body .panel:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
#physicaltests .physicaltest-view-body .panel > .rsp-panel-heading,
#physicaltests .physicaltest-view-body .panel > .panel-heading {
    background: #f7f9fc !important;
    background-image: none !important;
    border-bottom: 1px solid #eef2f7 !important;
    border-radius: 9px 9px 0 0 !important;
    color: #333 !important;
    padding: 10px 14px !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-shadow: none !important;
}
#physicaltests .physicaltest-view-body .panel > .panel-body {
    padding: 12px 14px;
}

/* --- ID / Status / Owner badges in the detail header ---------
   Off-palette bootstrap label-info cyan -> soft primary-tint pill,
   matching the sub-tab count chips. Scoped to the header's inline
   list so card-level labels (not in a ul.inline) are untouched. */
#physicaltests ul.inline > li > .label.label-info {
    background: #e0ecf8 !important;
    color: #2c5282 !important;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 8px;
    text-shadow: none;
}

/* --- Table / Chart toggle on the summary widgets: segmented pill ---
   The infowidget renders a glossy bootstrap btn-group-justified; flatten
   it into a compact segmented pill. The active state is driven by the
   `.active` class info.widgets.js now sets (default = Table). The pill
   track uses :has() (gracefully degrades to flat full-width buttons on
   the rare engine without it). Scoped to #physicaltests -> no leak. */
#physicaltests .physicaltest-view-body .btn-group-justified:has(.tab-btn) {
    display: inline-flex !important;
    width: auto;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 10px;
}
#physicaltests .physicaltest-view-body .tab-btn.table-view,
#physicaltests .physicaltest-view-body .tab-btn.chart-view {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    width: auto !important;
    float: none !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #888 !important;
    padding: 4px 14px !important;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
#physicaltests .physicaltest-view-body .tab-btn.table-view:hover,
#physicaltests .physicaltest-view-body .tab-btn.chart-view:hover {
    color: #555 !important;
}
#physicaltests .physicaltest-view-body .tab-btn.table-view.active,
#physicaltests .physicaltest-view-body .tab-btn.chart-view.active {
    background: #fff !important;
    color: #2c5282 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* --- Read-only response analysis workspace ------------------ */
.physicaltest-view-body .pt-analysis-workspace {
    color: #263442;
    max-width: 1500px;
    margin: 0 auto;
}
.physicaltest-view-body .pt-analysis-heading,
.physicaltest-view-body .pt-analysis-card-head,
.physicaltest-view-body .pt-analysis-callout,
.physicaltest-view-body .pt-analysis-heading-actions {
    display: flex;
    align-items: center;
}
.physicaltest-view-body .pt-analysis-heading {
    justify-content: space-between;
    gap: 24px;
    margin: 2px 0 16px;
}
.physicaltest-view-body .pt-analysis-heading h2,
.physicaltest-view-body .pt-analysis-card h3 {
    color: #24364b;
    margin: 3px 0 4px;
    font-weight: 650;
}
.physicaltest-view-body .pt-analysis-heading h2 {
    font-size: 24px;
}
.physicaltest-view-body .pt-analysis-heading p {
    color: #6c7b8b;
    margin: 0;
    font-size: 13px;
}
.physicaltest-view-body .pt-analysis-eyebrow {
    color: #66809a;
    display: block;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.physicaltest-view-body .pt-analysis-heading-actions {
    gap: 8px;
    flex: 0 0 auto;
}
.physicaltest-view-body .pt-analysis-safe,
.physicaltest-view-body .pt-analysis-count,
.physicaltest-view-body .pt-analysis-warning {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
}
.physicaltest-view-body .pt-analysis-safe {
    background: #e9f5ef;
    color: #277355;
}
.physicaltest-view-body .pt-analysis-count {
    background: #eef3f8;
    color: #587089;
}
.physicaltest-view-body .pt-analysis-warning {
    background: #fff4df;
    color: #936014;
}
.physicaltest-view-body .pt-analysis-callout {
    background: #edf5fd;
    border: 1px solid #d6e6f6;
    border-radius: 9px;
    color: #3d5f7f;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.physicaltest-view-body .pt-analysis-callout > i {
    color: #3979b5;
    font-size: 16px;
}
.physicaltest-view-body .pt-analysis-callout > span {
    flex: 1 1 auto;
    font-size: 12px;
}
.physicaltest-view-body .pt-analysis-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(125px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.physicaltest-view-body .pt-analysis-metric {
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e1e8ef;
    border-radius: 10px;
    min-height: 96px;
    padding: 13px 14px;
}
.physicaltest-view-body .pt-analysis-metric .metric-label {
    color: #6c7b8b;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.physicaltest-view-body .pt-analysis-metric strong {
    color: #244e76;
    display: block;
    font-size: 26px;
    line-height: 1.15;
    margin-top: 7px;
}
.physicaltest-view-body .pt-analysis-metric small {
    color: #8794a2;
    display: block;
    margin-top: 2px;
}
.physicaltest-view-body .pt-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.physicaltest-view-body .pt-analysis-card {
    background: #fff;
    border: 1px solid #e1e8ef;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(28, 45, 61, .03);
    padding: 15px;
}
.physicaltest-view-body .pt-analysis-card-head {
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #edf1f5;
    margin-bottom: 12px;
    padding-bottom: 11px;
}
.physicaltest-view-body .pt-analysis-card h3 {
    font-size: 15px;
}
.physicaltest-view-body .pt-analysis-domain,
.physicaltest-view-body .pt-analysis-readiness-row {
    display: flex;
    align-items: center;
}
.physicaltest-view-body .pt-analysis-domain {
    gap: 9px;
    min-height: 31px;
}
.physicaltest-view-body .pt-analysis-domain .domain-dot {
    background: #8299ae;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
.physicaltest-view-body .pt-analysis-domain .domain-voltage { background: #497fb3; }
.physicaltest-view-body .pt-analysis-domain .domain-temperature { background: #d57b52; }
.physicaltest-view-body .pt-analysis-domain .domain-current { background: #56a083; }
.physicaltest-view-body .pt-analysis-domain .domain-power { background: #8069a9; }
.physicaltest-view-body .pt-analysis-domain .domain-state-of-charge { background: #b19448; }
.physicaltest-view-body .pt-analysis-domain .domain-energy-capacity { background: #4d97a4; }
.physicaltest-view-body .pt-analysis-domain .domain-limits-controls { background: #b85f6f; }
.physicaltest-view-body .pt-analysis-domain .domain-name {
    color: #46576a;
    flex: 0 0 126px;
    font-size: 12px;
}
.physicaltest-view-body .pt-analysis-domain .domain-bar {
    background: #eef2f5;
    border-radius: 99px;
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
}
.physicaltest-view-body .pt-analysis-domain .domain-bar i {
    background: #6f8eaa;
    border-radius: inherit;
    display: block;
    height: 100%;
}
.physicaltest-view-body .pt-analysis-domain > strong {
    color: #52667a;
    flex: 0 0 38px;
    font-size: 12px;
    text-align: right;
}
.physicaltest-view-body .pt-analysis-readiness-row {
    gap: 10px;
    min-height: 45px;
}
#physicaltests .readiness-icon {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
}
#physicaltests .readiness-icon.is-good {
    background: #e5f3ec;
    color: #2e7b5b;
}
#physicaltests .readiness-icon.is-attention {
    background: #fff1db;
    color: #a26717;
}
.physicaltest-view-body .pt-analysis-readiness-row > div {
    flex: 1 1 auto;
    min-width: 0;
}
.physicaltest-view-body .pt-analysis-readiness-row strong,
.physicaltest-view-body .pt-analysis-readiness-row small {
    display: block;
}
.physicaltest-view-body .pt-analysis-readiness-row strong {
    color: #405165;
    font-size: 12px;
}
.physicaltest-view-body .pt-analysis-readiness-row small {
    color: #84909d;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#physicaltests .readiness-state {
    border-radius: 5px;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 750;
    padding: 4px 7px;
}
#physicaltests .readiness-state.is-good {
    background: #eaf5ef;
    color: #2d7457;
}
#physicaltests .readiness-state.is-attention {
    background: #fff4df;
    color: #936014;
}
.physicaltest-view-body .pt-analysis-response-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.physicaltest-view-body .pt-analysis-ml-readiness {
    margin-bottom: 12px;
}
.physicaltest-view-body .pt-analysis-ml-layout {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
    gap: 16px;
}
.physicaltest-view-body .pt-analysis-ml-message {
    background: linear-gradient(135deg, #edf5fb 0%, #f7fafc 100%);
    border: 1px solid #d7e5f0;
    border-radius: 9px;
    display: flex;
    gap: 12px;
    padding: 13px;
}
.physicaltest-view-body .pt-analysis-ml-icon {
    background: #3979b5;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    height: 36px;
}
.physicaltest-view-body .pt-analysis-ml-message strong {
    color: #315673;
    display: block;
    font-size: 12px;
    line-height: 1.45;
}
.physicaltest-view-body .pt-analysis-ml-message p {
    color: #708292;
    font-size: 10.5px;
    line-height: 1.55;
    margin: 5px 0 0;
}
.physicaltest-view-body .pt-analysis-ml-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
}
.physicaltest-view-body .pt-analysis-ml-checklist span {
    color: #647687;
    display: flex;
    gap: 7px;
    font-size: 10.5px;
    line-height: 1.4;
}
.physicaltest-view-body .pt-analysis-ml-checklist i {
    color: #80a0ba;
    flex: 0 0 auto;
    margin-top: 2px;
}
.physicaltest-view-body .pt-analysis-response {
    background: #fbfcfd;
    border: 1px solid #e5ebf0;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    padding: 10px 11px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.physicaltest-view-body .pt-analysis-response:hover {
    border-color: #9ab4cb;
    box-shadow: 0 3px 9px rgba(41, 72, 101, .08);
    transform: translateY(-1px);
}
.physicaltest-view-body .pt-analysis-response .response-category,
.physicaltest-view-body .pt-analysis-response strong,
.physicaltest-view-body .pt-analysis-response small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.physicaltest-view-body .pt-analysis-response .response-category {
    color: #6c86a0;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.physicaltest-view-body .pt-analysis-response strong {
    color: #34485b;
    font-size: 12px;
    margin: 4px 0;
}
.physicaltest-view-body .pt-analysis-response small {
    color: #8a96a2;
    font-size: 10px;
}
.physicaltest-view-body .pt-analysis-state,
.physicaltest-view-body .pt-analysis-empty {
    color: #7a8998;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 260px;
    text-align: center;
}
.physicaltest-view-body .pt-analysis-state > i {
    color: #4b7da9;
    font-size: 23px;
}
.physicaltest-view-body .pt-analysis-state.is-error > i {
    color: #b97831;
}
.physicaltest-view-body .pt-analysis-empty {
    background: #fafbfc;
    border-radius: 8px;
    min-height: 110px;
}
@media (max-width: 1050px) {
    .physicaltest-view-body .pt-analysis-metrics {
        grid-template-columns: repeat(3, minmax(125px, 1fr));
    }
    .physicaltest-view-body .pt-analysis-response-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .physicaltest-view-body .pt-analysis-ml-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 780px) {
    .physicaltest-view-body .pt-analysis-heading,
    .physicaltest-view-body .pt-analysis-callout {
        align-items: flex-start;
        flex-direction: column;
    }
    .physicaltest-view-body .pt-analysis-grid,
    .physicaltest-view-body .pt-analysis-metrics,
    .physicaltest-view-body .pt-analysis-response-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PHYSICALTESTS -> SIMULATIONS UI ALIGNMENT
   Mirrors the simulations page: no persistent "All" tab (a
   back-arrow in the detail returns to the table), the left rail
   collapses while a test is open, and the content column sits
   flush. Mechanisms copied from spa/simulation.css.
   ============================================================ */

/* (1a) Hide the persistent "All Physical Tests" tab — the back-arrow
   in the detail header is the way back (mirrors #simulations). */
#physicaltests #tabsList > li.Table_view {
    display: none;
}

/* (1b) Back-to-all arrow injected into the detail header (physicaltests/main.js).
   Arrow-only at rest, expands to reveal the label on hover — mirrors
   .sim-back-to-all. */
/* the meta list <li> wrapping the back arrow — keep it centered on the row */
#physicaltests .physicaltest-tab-header ul.inline > li.pt-back-li {
    vertical-align: middle;
    margin-right: 4px;
}
.pt-back-to-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 24px;            /* arrow only — label clipped */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 10px;
    padding: 6px 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #2c5282 !important;  /* override the global `a` colour rule */
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    transition: max-width .28s ease, background .18s ease, padding .18s ease;
}
.pt-back-to-all:hover {
    max-width: 180px;           /* reveal "All Physical Tests" */
    background: #cfe0f5;
    padding: 6px 12px;
    color: #1c4e80 !important;
    text-decoration: none !important;
}
.pt-back-to-all i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

/* (2) Collapse the left rail while a physicaltest DETAIL pane is open
   (Widgets/Filters only apply to the all-tests table). Driven off the
   visible detail pane via :has() — the panes toggle .hidden, so the
   existing tab/route JS animates the rail closed on open and back open
   on return to the table, no JS change. Scoped to #user-physicaltests
   and the pt-tab-view-* panes so it can't affect other pages. */
#user-physicaltests .two-col-flex:has(#physicaltests #tabsContent > .tabContent[class*="pt-tab-view-"]:not(.hidden)) .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#user-physicaltests .two-col-flex:has(#physicaltests #tabsContent > .tabContent[class*="pt-tab-view-"]:not(.hidden)) .sim-left-col-inner {
    transform: translateX(-100%);
}

/* (3) Content column flush (drop the shared .two-col-flex .content-col
   8px/18px padding) — mirrors #simulations.content-col. */
#physicaltests.content-col {
    padding: 0;
}

/* (4) Individual detail-page loading shimmer (replaces the old "Loading
   Please wait ..." text — see physicaltests/main.js). Shaped like the
   detail's 3-card row (Overview / Files by Type / Responses by Type). The
   shimmer itself is the global .sim-skeleton-block from simulation.css. */
.pt-detail-skeleton {
    padding: 18px 6px;
}
.pt-detail-skel-header {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eef2f7;
}
.pt-detail-skel-cards {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pt-detail-skel-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}
.pt-detail-skel-row {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

/* Physical Test mass-export planner. The legacy endpoint and bulk-selection
   model stay unchanged; this layer makes the derivative contract explicit. */
.pt-mass-export-modal .modal-dialog {
    width: min(1080px, calc(100vw - 48px));
}
.pt-mass-export-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(27, 48, 78, .24);
    overflow: hidden;
}
.pt-mass-export-modal .modal-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid #dce6f1;
    background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
}
.pt-export-eyebrow,
.pt-export-panel-heading span {
    margin: 0 0 5px;
    color: #6280a4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.pt-mass-export-modal .modal-title {
    color: #203957;
    font-size: 24px;
    font-weight: 650;
}
.pt-mass-export-modal .modal-title i {
    margin-right: 8px;
    color: #3488cc;
}
.pt-export-lead {
    max-width: 760px;
    margin: 8px 0 0;
    color: #657a93;
    line-height: 1.5;
}
.pt-mass-export-modal .modal-body {
    padding: 22px 28px 26px;
    background: #f8fafc;
}
.pt-export-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.pt-export-metrics > div {
    padding: 13px 15px;
    border: 1px solid #dce6f1;
    border-radius: 10px;
    background: #fff;
}
.pt-export-metrics span,
.pt-export-panel label > small,
.pt-export-choice small,
.pt-export-dedup small {
    display: block;
    color: #8090a3;
    font-size: 11px;
    font-weight: 400;
}
.pt-export-metrics strong {
    display: block;
    margin-top: 3px;
    color: #254d76;
    font-size: 18px;
}
.pt-export-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    gap: 14px;
}
.pt-export-panel {
    padding: 17px;
    border: 1px solid #dce6f1;
    border-radius: 11px;
    background: #fff;
}
.pt-export-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e7edf4;
}
.pt-export-panel-heading h4 {
    margin: 0;
    color: #263d59;
    font-size: 16px;
}
.pt-export-panel-heading em {
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf4fb;
    color: #617995;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}
.pt-export-panel > label,
.pt-export-scope-input > label {
    color: #455c77;
    font-size: 12px;
    font-weight: 600;
}
.pt-export-panel .form-control {
    margin-top: 6px;
    border-color: #cbd9e8;
    border-radius: 7px;
    box-shadow: none;
}
.pt-export-preview {
    margin: 7px 0 16px;
    color: #8291a3;
    font-size: 11px;
}
.pt-export-preview strong { color: #4276a8; }
.pt-export-panel fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}
.pt-export-panel legend {
    margin-bottom: 7px;
    border: 0;
    color: #455c77;
    font-size: 12px;
    font-weight: 600;
}
.pt-export-choice,
.pt-export-dedup {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 9px;
    border-radius: 7px;
    color: #405672;
    cursor: pointer;
}
.pt-export-choice:hover,
.pt-export-dedup:hover { background: #f3f7fb; }
.pt-export-choice input,
.pt-export-dedup input { margin-top: 3px; }
.pt-export-scope-input {
    margin: 8px 0 12px;
    padding: 12px;
    border-radius: 8px;
    background: #f5f8fc;
}
.pt-export-selection ul {
    max-height: 320px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
}
.pt-export-selection li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid #edf1f5;
    color: #3d5571;
}
.pt-export-selection li span,
.pt-export-selection li small { display: block; }
.pt-export-selection li span {
    min-width: 0;
    overflow: hidden;
}
.pt-export-selection li strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-export-selection li small {
    margin-top: 2px;
    color: #91a0b1;
    font-size: 10px;
}
.pt-export-selection li b {
    color: #4b7197;
    font-size: 12px;
}
.pt-export-selection .pt-export-more {
    justify-content: center;
    color: #6d8199;
    font-size: 11px;
}
.pt-export-note {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    background: #edf8f4;
    color: #527268;
    font-size: 11px;
    line-height: 1.45;
}
.pt-export-note i {
    margin-top: 2px;
    color: #3a9d7a;
}
.pt-export-note b {
    display: block;
    color: #35725f;
}
.pt-mass-export-modal .modal-footer {
    padding: 14px 28px;
    border-top: 1px solid #dce6f1;
    background: #fff;
}
@media (max-width: 800px) {
    .pt-export-layout,
    .pt-export-metrics { grid-template-columns: 1fr; }
    .pt-mass-export-modal .modal-dialog {
        width: auto;
        margin: 12px;
    }
}

/* /stylesheets/spa/template.css */
div#user-templates #filterUI .col-lg-12 {
    min-width: 300px !important;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] ul#SLPageTabs {
    margin-bottom: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] ul#SLPageTabs li a {
    padding-top: 5px;
    padding-bottom: 5px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] ul#SLPageTabs li:not(.noremovebtn) a {
    padding-right: 25px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] #SLPageTabs li span.glyphicon-remove-circle {
    height: 0;
    position: absolute;
    top: 8px;
    right: 9px;
    cursor: pointer;
    color: #428bca;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] #SLPageTabs li span.glyphicon-remove-circle:hover {
    color: red;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor {
    border-right: 1px solid #ddd;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor input {
    height: 30px;
    font-size: 0.9em;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .pagelayout {
    margin-bottom: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col {
    border: 1px solid #dddddd;
    height: 500px;
    overflow-y: auto;
    margin-top: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem {
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-size: 0.9em;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem a {
    color: black;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem.notyetsaved {
    opacity: 0.5;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem .entypo-glyphicon {
    padding-right: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem.active {
    color: white;
    background-color: #428bca;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem.active a {
    color: white;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem span.removeFromLayout {
    font-size: 1.2em;
    padding-right: 10px;
    color: #666;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem span.removeFromLayout:hover,
div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem.active span.removeFromLayout:hover {
    color: red;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem.active span.removeFromLayout {
    color: white;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .layouteditor .addedResponses .col .respItem:not(.active):hover {
    background-color: #ddd;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .vizconfigurator {
    background-color: #eee;
    border-right: 1px solid #ddd;
    height: 600px;
    /*overflow-y: auto;*/
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .vizconfigurator .inputsRenderingArea {
    margin-top: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .vizconfigurator .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .vizconfigurator .savediscardcontainer {
    margin-top: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .rightsidebar input {
    height: 30px;
    font-size: 0.9em;
    margin-bottom: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .rightsidebar .well {
    margin-bottom: 10px;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .rightsidebar #list {
    max-height: 540px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

div.pageContainer .subtabs_contents .subtab[data-id="layouts"] .rightsidebar #list li {
    margin: 0;
    padding: 5px 10px;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

.boxContainer {
    margin-bottom: 10px;
}

.boxContainer ul {
    min-height: 200px;
    height: 300px;
    overflow-y: auto;
}

.boxContainer li {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.boxContainer li a {
   display:block;
   padding:12px;
}

.boxContainer li:hover {
    background-color: #efefef;
}

.boxContainer li .respTitle {
    display: table-cell;
    vertical-align: middle;
}

.boxContainer .selected-status {

    margin-top:12px;
    font-size:1.4em;
    color: green;

}

.boxContainer a:hover .selected-status {
   display:block!important;
}


.modalContainer.newTemplate #library table tr,
.modalContainer.newTemplate #upload table tr {
    cursor: pointer;
}

.modalContainer.newTemplate #library table tr .glyphicon-edit {
    padding: 3px;
    border-radius: 10px;
    background-color: #ddd;
    color: #555;
}

.modalContainer.newTemplate #library table tr .glyphicon-edit:hover {
    background-color: #555;
    color: #ddd;
}

.modalContainer.newTemplate #library table th:nth-child(1),
.modalContainer.newTemplate #library table th:nth-child(3),
.modalContainer.newTemplate #library table th:nth-child(4),
.modalContainer.newTemplate #library table th:nth-child(5) {
    width: 120px;
}

.modalContainer.newTemplate .dropz form#msgArea {
    display: block;
    vertical-align: top;
    text-align: center;
    min-height: 80px;
    background: url(/images/dropzone-fileopen.jpg) no-repeat;
    background-position: 50% 50%;
    background-size: contain;

}


/* edit response modal layout */
.modalContainer.editresponseview .inlineWrapper {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

/* namemaps subtab */
div.pageContainer .subtab[data-id=namemaps] table th {
    width: 50%;
}

/* conditions subtab */
div.pageContainer .subtab[data-id=conditions] table th:first-child {
    width: 40%;
}

div.pageContainer .subtab[data-id=conditions] table th:nth-child(2) {
    width: 15%;
}

div.pageContainer .subtab[data-id=conditions] table th:nth-child(3),
div.pageContainer .subtab[data-id=conditions] table th:nth-child(4) {
    width: 25%;
}

/* popup comments view */
div.popupcomments {
    max-height: 345px;
}

span.editremovebtns {
    float: right;
    height: 0;
    position: relative;
    top: -23px;
}

span.editremovebtns i {
    padding: 8px;
    cursor: pointer;
    text-shadow: 1px 1px white;
}

span.editremovebtns i:hover {
    background-color: black;
    color: white;
    text-shadow: none;
}

/* =========================================================================
   Templates detail-tab UX — mirrors the Simulations / Physical Tests pattern
   (the reusable "open a record tab -> collapse the rail -> back arrow" flow).
   The smooth rail transition itself is the global .sim-left-col / -inner
   transition in simulation.css; this only adds the trigger + back arrow +
   flush content, scoped to #responsetemplates / #user-responsetemplates.
   ========================================================================= */

/* (1a) Hide the persistent "All Templates" home tab — the back-arrow in the
   detail header is the way back (mirrors #simulations / #physicaltests). On the
   list view this leaves the tab strip empty; a detail open shows just that one
   tab. */
#responsetemplates #tabsList > li.Table_view {
    display: none;
}

/* (1b) Content column flush — drop the shared .two-col-flex .content-col
   8px/18px padding so the grid sits edge-to-edge (mirrors #simulations /
   #physicaltests.content-col). */
#responsetemplates.content-col {
    padding: 0;
}

/* (2) Collapse the left rail while a template DETAIL pane is open (the rail's
   New/Filters only apply to the all-templates table). Templates' detail panes
   are .tabContent[data-id="<id>"] with NO distinguishing class — but only the
   table pane carries .main-content-view, so :not(.main-content-view):not(.hidden)
   cleanly means "a detail pane is showing". The tab/route JS already toggles
   .hidden, so the rail animates closed on open and back open on return — no JS
   timing needed. Scoped to #user-responsetemplates so it can't touch other pages. */
#user-responsetemplates .two-col-flex:has(#responsetemplates #tabsContent > .tabContent:not(.main-content-view):not(.hidden)) .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#user-responsetemplates .two-col-flex:has(#responsetemplates #tabsContent > .tabContent:not(.main-content-view):not(.hidden)) .sim-left-col-inner {
    transform: translateX(-100%);
}

/* (3) Back-to-all arrow injected into the detail header (.headerRow) by
   spa/templates/main.js routeTab. Arrow-only at rest, expands to reveal the
   label on hover — mirrors .pt-back-to-all / .sim-back-to-all. */
.rt-back-to-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 24px;            /* arrow only — label clipped */
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 10px;
    padding: 6px 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #2c5282 !important;  /* override the global `a` colour rule */
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none !important;
    transition: max-width .28s ease, background .18s ease, padding .18s ease;
}
.rt-back-to-all:hover {
    max-width: 180px;           /* reveal "All Templates" */
    background: #cfe0f5;
    padding: 6px 12px;
    color: #1c4e80 !important;
    text-decoration: none !important;
}
.rt-back-to-all i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

/* =========================================================================
   Response Template health + application preflight
   Scoped to its unique workspace so the legacy configuration subtabs keep
   their existing layout and behavior.
   ========================================================================= */
.rt-health-workspace {
    color: #293949;
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px 4px 24px;
}
.rt-health-heading,
.rt-health-heading-actions,
.rt-health-card-head,
.rt-health-check,
.rt-health-domain,
.rt-health-apply-footer,
.preflight-title,
.preflight-stats {
    display: flex;
    align-items: center;
}
.rt-health-heading {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 15px;
}
.rt-health-heading h2,
.rt-health-card h3 {
    color: #24364b;
    font-weight: 650;
    margin: 3px 0 4px;
}
.rt-health-heading h2 {
    font-size: 24px;
}
.rt-health-heading p {
    color: #6d7d8e;
    font-size: 13px;
    margin: 0;
}
.rt-health-eyebrow {
    color: #69829b;
    display: block;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.rt-health-heading-actions {
    flex: 0 0 auto;
    gap: 8px;
}
.rt-health-advisory,
.rt-health-chip {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 9px;
}
.rt-health-advisory {
    background: #e9f5ef;
    color: #287457;
}
.rt-health-chip {
    background: #eef3f8;
    color: #5c7288;
}
.rt-health-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(125px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.rt-health-metric {
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e1e8ef;
    border-radius: 10px;
    min-height: 94px;
    padding: 13px 14px;
}
.rt-health-metric > span {
    color: #6c7b8b;
    display: block;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.rt-health-metric > strong {
    color: #28577f;
    display: block;
    font-size: 26px;
    line-height: 1.15;
    margin-top: 7px;
}
.rt-health-metric > small {
    color: #8996a3;
    display: block;
    margin-top: 2px;
}
.rt-health-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 12px;
    margin-bottom: 12px;
}
.rt-health-card {
    background: #fff;
    border: 1px solid #e1e8ef;
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(28, 45, 61, .03);
    padding: 15px;
}
.rt-health-card-head {
    border-bottom: 1px solid #edf1f5;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 11px;
}
.rt-health-card h3 {
    font-size: 15px;
}
.rt-health-check {
    gap: 10px;
    min-height: 48px;
}
.rt-health-check .check-icon {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
}
.rt-health-check .check-icon.is-good {
    background: #e5f3ec;
    color: #2e7b5b;
}
.rt-health-check .check-icon.is-attention {
    background: #fff1db;
    color: #a26717;
}
.rt-health-check > div {
    flex: 1 1 auto;
    min-width: 0;
}
.rt-health-check > div strong,
.rt-health-check > div small {
    display: block;
}
.rt-health-check > div strong {
    color: #415367;
    font-size: 12px;
}
.rt-health-check > div small {
    color: #8794a1;
    font-size: 10.5px;
}
.rt-health-check > span:last-child {
    color: #6f8193;
    font-size: 10px;
    font-weight: 750;
}
.rt-health-heuristic-note {
    background: #f4f7fa;
    border-radius: 7px;
    color: #6d7f91;
    font-size: 10.5px;
    line-height: 1.45;
    margin-top: 8px;
    padding: 8px 10px;
}
.rt-health-heuristic-note i {
    color: #5583aa;
    margin-right: 5px;
}
.rt-health-domain {
    gap: 9px;
    min-height: 31px;
}
.rt-health-domain .domain-dot {
    background: #8299ae;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}
.rt-health-domain .domain-voltage { background: #497fb3; }
.rt-health-domain .domain-temperature { background: #d57b52; }
.rt-health-domain .domain-current { background: #56a083; }
.rt-health-domain .domain-power { background: #8069a9; }
.rt-health-domain .domain-state-of-charge { background: #b19448; }
.rt-health-domain .domain-energy-capacity { background: #4d97a4; }
.rt-health-domain .domain-limits-controls { background: #b85f6f; }
.rt-health-domain .domain-name {
    color: #46576a;
    flex: 0 0 126px;
    font-size: 12px;
}
.rt-health-domain .domain-bar {
    background: #eef2f5;
    border-radius: 99px;
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
}
.rt-health-domain .domain-bar i {
    background: #6f8eaa;
    border-radius: inherit;
    display: block;
    height: 100%;
}
.rt-health-domain > strong {
    color: #52667a;
    flex: 0 0 34px;
    font-size: 12px;
    text-align: right;
}
.rt-health-apply-card {
    padding-bottom: 0;
}
.rt-health-apply-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(400px, 1.2fr);
    gap: 16px;
    min-height: 220px;
}
.rt-health-target-picker > label {
    color: #4c6074;
    display: block;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}
.rt-health-search-box {
    position: relative;
}
.rt-health-search-box > i {
    color: #8b98a5;
    left: 11px;
    position: absolute;
    top: 10px;
    z-index: 1;
}
.rt-health-search-box .form-control {
    border-color: #ccd7e1;
    border-radius: 7px;
    box-shadow: none;
    height: 36px;
    padding-left: 32px;
}
.rt-health-target-results {
    margin-top: 7px;
    max-height: 174px;
    overflow: auto;
}
.rt-health-search-hint {
    background: #f7f9fb;
    border-radius: 7px;
    color: #7d8b98;
    font-size: 11px;
    line-height: 1.45;
    padding: 11px;
}
.rt-health-search-hint.is-error {
    background: #fff2ed;
    color: #9a5742;
}
.rt-health-target-result {
    background: #fff;
    border: 1px solid #e2e8ee;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
    padding: 8px 9px;
    text-align: left;
    width: 100%;
}
.rt-health-target-result:hover {
    background: #f4f8fc;
    border-color: #9eb8cf;
}
.rt-health-target-result strong,
.rt-health-target-result small {
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rt-health-target-result strong {
    color: #3b5064;
    font-size: 11.5px;
}
.rt-health-target-result small {
    color: #8b97a3;
    font-size: 9.5px;
}
.rt-health-target-result .badge {
    background: #edf3f8;
    color: #5d748a;
    flex: 0 0 auto;
    font-size: 9.5px;
}
.rt-health-preflight-result {
    background: #f8fafc;
    border: 1px solid #e6ebf0;
    border-radius: 9px;
    min-height: 184px;
    padding: 13px;
}
.rt-health-preflight-empty,
.rt-health-state {
    color: #82909e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    min-height: 175px;
    text-align: center;
}
.rt-health-preflight-empty > i,
.rt-health-state > i {
    color: #5d83a5;
    font-size: 22px;
}
.rt-health-preflight-empty > span,
.rt-health-state > span {
    font-size: 10.5px;
}
.rt-health-state {
    min-height: 300px;
}
.rt-health-state.is-error > i {
    color: #b6723b;
}
.preflight-title {
    gap: 10px;
}
.preflight-title > span {
    background: #e7f0f8;
    border-radius: 50%;
    color: #3e739f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    height: 32px;
}
.preflight-title > div {
    flex: 1 1 auto;
    min-width: 0;
}
.preflight-title strong,
.preflight-title small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preflight-title strong {
    color: #364c61;
    font-size: 12px;
}
.preflight-title small {
    color: #8995a1;
    font-size: 10px;
}
.preflight-title > b {
    color: #2f6999;
    font-size: 22px;
}
.preflight-progress {
    background: #e8edf2;
    border-radius: 99px;
    height: 7px;
    margin: 12px 0;
    overflow: hidden;
}
.preflight-progress i {
    background: linear-gradient(90deg, #5488b5, #4c9b84);
    display: block;
    height: 100%;
}
.preflight-stats {
    gap: 7px;
}
.preflight-stats > div {
    background: #fff;
    border: 1px solid #e3e9ee;
    border-radius: 6px;
    flex: 1 1 0;
    padding: 7px;
    text-align: center;
}
.preflight-stats strong,
.preflight-stats span {
    display: block;
}
.preflight-stats strong {
    color: #385875;
    font-size: 15px;
}
.preflight-stats span {
    color: #8793a0;
    font-size: 8.5px;
    text-transform: uppercase;
}
.preflight-missing,
.preflight-ready {
    border-radius: 7px;
    margin-top: 10px;
    padding: 8px 10px;
}
.preflight-missing {
    background: #fff4e3;
    color: #855a1c;
}
.preflight-missing strong,
.preflight-missing span,
.preflight-missing small {
    display: block;
}
.preflight-missing strong { font-size: 10.5px; }
.preflight-missing span,
.preflight-missing small { font-size: 9.5px; }
.preflight-missing small {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preflight-ready {
    background: #e9f5ef;
    color: #2f7258;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
}
.rt-health-apply-footer {
    background: #f4f7fa;
    border-radius: 0 0 10px 10px;
    gap: 15px;
    justify-content: space-between;
    margin: 14px -15px 0;
    padding: 10px 15px;
}
.rt-health-apply-footer > span {
    color: #6d7e8e;
    font-size: 10.5px;
}
.rt-health-apply-footer > span i {
    color: #b07a27;
    margin-right: 4px;
}
.rt-health-apply-footer .btn {
    flex: 0 0 auto;
}
@media (max-width: 1050px) {
    .rt-health-metrics {
        grid-template-columns: repeat(3, minmax(125px, 1fr));
    }
    .rt-health-grid,
    .rt-health-apply-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .rt-health-heading,
    .rt-health-apply-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .rt-health-metrics {
        grid-template-columns: 1fr;
    }
    .preflight-stats {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Response Template creation — additive shell around the existing Library,
   Upload, and response-selection contracts. */
.rt-create-modal .modal-dialog {
    width: min(1180px, calc(100vw - 48px)) !important;
}
.rt-create-modal .modal-content {
    border: 0;
    border-radius: 13px;
    box-shadow: 0 24px 70px rgba(26, 45, 71, .25);
    overflow: hidden;
}
.rt-create-modal .modal-header {
    padding: 15px 22px !important;
    border-bottom-color: #dbe5ef;
    background: #f7fafe;
}
.rt-create-modal .modal-body {
    padding: 0;
    background: #f7f9fc;
}
.rt-create-modal .modal-inner-content {
    padding: 0;
}
.rt-create-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    border-bottom: 1px solid #dce5ee;
    background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
}
.rt-create-intro > div:first-child > span {
    color: #6683a4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.rt-create-intro h3 {
    margin: 4px 0 5px;
    color: #253d59;
    font-size: 20px;
    font-weight: 650;
}
.rt-create-intro p {
    max-width: 690px;
    margin: 0;
    color: #6d8096;
    font-size: 12px;
    line-height: 1.5;
}
.rt-create-safety {
    display: flex;
    align-items: center;
    flex: 0 0 310px;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    background: #eaf6f1;
    color: #537469;
    font-size: 10.5px;
    line-height: 1.4;
}
.rt-create-safety i { color: #3d9979; }
.rt-create-safety b {
    display: block;
    color: #34735e;
}
.rt-create-modal #templateCreationTypeList {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 12px 24px 0;
    border-bottom: 1px solid #dce5ee;
    background: #fff;
}
.rt-create-modal #templateCreationTypeList > li {
    float: none;
    margin: 0;
}
.rt-create-modal #templateCreationTypeList > li > a {
    margin: 0;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    color: #61758d;
    font-size: 12px;
    font-weight: 600;
}
.rt-create-modal #templateCreationTypeList > li.active > a {
    border-color: #dce5ee #dce5ee #fff;
    color: #2f78b7;
    background: #fff;
}
.rt-create-content {
    min-height: 470px;
    padding: 18px 22px 22px;
    background: #f7f9fc;
}
.rt-create-content > .tab-pane {
    padding: 17px;
    border: 1px solid #dce5ee;
    border-radius: 10px;
    background: #fff;
}
.rt-create-modal #selectedResponses > .filters {
    margin: 0;
    padding: 10px 0 0 !important;
}
.rt-create-modal #selectedResponses > .filters > .col-md-2:first-child {
    display: none;
}
.rt-create-modal #selectedResponses .selectorContainer {
    margin-top: 10px;
}
.rt-create-modal #selectedResponses .boxContainer {
    min-height: 230px;
    border: 1px solid #dce5ee;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}
.rt-create-modal #selectedResponses .availableList,
.rt-create-modal #selectedResponses .selectedList {
    max-height: 255px;
    min-height: 220px !important;
    margin: 0;
    padding: 7px;
    overflow-y: auto !important;
}
.rt-create-modal #selectedResponses .availableList li,
.rt-create-modal #selectedResponses .selectedList li {
    margin-bottom: 5px;
    border: 1px solid #e2e9f0;
    border-radius: 6px;
    background: #fff;
}
.rt-create-modal #masterTemplatesTable {
    max-height: 460px;
    overflow: auto;
}
.rt-create-modal .modal-footer {
    padding: 12px 22px !important;
    border-top-color: #dce5ee;
    background: #fff;
}
@media (max-width: 800px) {
    .rt-create-modal .modal-dialog {
        width: auto !important;
        margin: 12px;
    }
    .rt-create-intro {
        align-items: flex-start;
        flex-direction: column;
    }
    .rt-create-safety { flex-basis: auto; }
}

/* /stylesheets/spa/simlytiks.css */
/* =========================================================================
   Simlytiks landing page (PPTX-style) — Phase 05, d3view-ui-ux-auditing.
   ALL rules scoped to #simlytiks (the app root) — zero blast radius onto the
   shared viz engine (stylesheets/simlytiks.css), fast_datatable, or other pages.
   Shared rail/shell classes (.two-col-flex, .sim-left-col, .sim-new-btn,
   .sim-filter-list, .content-col) come from spa/simulation.css.
   ========================================================================= */

/* ---- frozen shell: lock the app chain to the viewport so ONLY the table
   scrolls (mirrors Simulations). Without this, #simlytiks grows to content
   height and #main_content (overflow:auto) scrolls the whole page. ---- */
#simlytiks,
#simlytiks > .bodyd,
#simlytiks .simlytiksContainer {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#simlytiks .two-col-flex {
    height: 100%;
    min-height: 0;
}

/* The standalone simlytiks page renders inside #main_content, which is
   overflow:auto — so when the landing content exceeds the viewport by even a
   few px (recent strip present, rail height, zoom rounding) #main_content
   scrolls *in addition to* the inner .simlytiks-collection, giving two
   scrollbars (R2026-17 S1). Lock #main_content ONLY when it contains the
   simlytiks landing so the collection is the single scroller. Scoped via :has()
   (same approach the detail-tab rail-collapse uses) → zero blast radius. */
#main_content:has(#simlytiks) {
    overflow: hidden;
}

/* ---- remove the fast_datatable widget's title bar ("simlytiks" + menu);
   the page already has its own header. Summary/toolbar live in panel-body. ---- */
#simlytiks .simlytiks-collection .panel-heading {
    display: none;
}

/* ---- content column: flush, flex column (recent strip + table) ---- */
#simlytiks-content.content-col {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#simlytiks .simlytiks-collection {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 18px 12px;
    overflow: auto;
}

/* ---- Recent strip (PowerPoint-Start-style) ---- */
#simlytiks .simlytiks-recent {
    flex: 0 0 auto;
    padding: 14px 18px 8px;
    border-bottom: 1px solid #ececec;
}

#simlytiks .simlytiks-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#simlytiks .simlytiks-recent-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
}

#simlytiks .simlytiks-recent-title i {
    color: #2c5282;
    margin-right: 5px;
}

#simlytiks .simlytiks-recent-clear {
    font-size: 11px;
    color: #999;
    text-decoration: none;
}

#simlytiks .simlytiks-recent-clear:hover {
    color: #721c24;
    text-decoration: none;
}

#simlytiks .simlytiks-recent-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

/* Empty-state hint (shown until the first dataset is opened) so the Recent
   section is discoverable rather than invisible. */
#simlytiks .simlytiks-recent-empty {
    color: #999;
    font-size: 12px;
    padding: 10px 2px 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}
#simlytiks .simlytiks-recent-empty i {
    color: #b5b5b5;
}

/* ---- Recent card ---- */
#simlytiks .simlytiks-card {
    flex: 0 0 auto;
    width: 172px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

#simlytiks .simlytiks-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    border-color: #c6d3e2;
}

#simlytiks .simlytiks-card:active {
    transform: translateY(1px);
}

#simlytiks .simlytiks-card-preview {
    height: 100px;
    background: #f3f5f8 center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
}

/* generated poster (fallback when no cached thumbnail) — gradient set inline by JS */
#simlytiks .simlytiks-card-poster {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

#simlytiks .simlytiks-card-poster .pi {
    font-size: 24px;
    opacity: 0.95;
}

#simlytiks .simlytiks-card-poster .pn {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-top: 5px;
    text-transform: uppercase;
}

#simlytiks .simlytiks-card-meta {
    padding: 7px 9px 8px;
}

#simlytiks .simlytiks-card-name {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#simlytiks .simlytiks-card-sub {
    font-size: 10.5px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- table Name-cell thumbnail (poster/thumb prepended in the Name column) ---- */
#simlytiks .sl-name-cell {
    display: flex;
    align-items: center;
}

#simlytiks .sl-name-thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    margin-right: 8px;
    background: #f3f5f8 center / cover no-repeat;
}

#simlytiks .sl-name-thumb-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* ---- rail inner as a flex column so Sample Datasets fills to the bottom ---- */
#simlytiks .sim-left-col-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ---- rail: Sample Datasets — a distinct, scrollable container ---- */
#simlytiks .simlytiks-samples-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-top: 16px;
}

#simlytiks .simlytiks-samples-caret {
    margin-left: auto;
    transition: transform 0.2s ease;
    font-size: 11px;
    color: #aaa;
}

#simlytiks .simlytiks-samples-toggle.collapsed .simlytiks-samples-caret {
    transform: rotate(-90deg);
}

#simlytiks .simlytiks-samples {
    list-style: none;
    padding: 5px;
    margin: 7px 0 2px;
    flex: 1 1 auto;
    min-height: 90px;
    overflow-y: auto;
    background: #f8f9fb;
    border: 1px solid #e9ecef;
    border-radius: 7px;
}

#simlytiks .simlytiks-samples.collapsed {
    display: none;
}

#simlytiks .simlytiks-samples li,
#simlytiks .simlytiks-samples li.list-group-item {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

#simlytiks .simlytiks-samples li a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

#simlytiks .simlytiks-samples li a:hover {
    background: #eef2f7;
    color: #2c5282;
}

#simlytiks .simlytiks-samples li a .badge {
    flex: 0 0 auto;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 5px;
}

body.sl-file-dragging::after {
    content: "Drop files anywhere to open in Simlytiks";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 240, 254, 0.88);
    border: 3px dashed #90b4e0;
    color: #2c5282;
    font-size: 18px;
    font-weight: 600;
    pointer-events: none;
}

/* /stylesheets/spa/response.css */
div#response table tr .togglePreviewCommentsBtn,
div#response table tr .togglePreviewOptionsBtn {
    cursor: pointer;
}

div#response table tr .togglePreviewCommentsBtn:hover,
div#response table tr .togglePreviewOptionsBtn:hover {
    background-color: #428bca;
    color: white;
}

div#response #filterUI .col-lg-12 {
    min-width: 885px !important;
}

/* popup comments */

div#response .popover .commentsArea {
    max-height: 165px;
    overflow-x: hidden;
    overflow-y: auto;
}

div#response .popover .commentItem {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 95%;
    margin-left: 5px;
}

div#response .popover .commentItem p {
    margin-bottom: 5px;
}

div#response .popover .commentItem small {
    display: inline-block;
    width: 100%;
    text-align: right;
}

div#response .popover .commentItem.other {
    border: 1px solid #ddd;
    background-color: #ddd;
}

div#response .popover .commentItem.me {
    border: 1px solid #428bca;
    background-color: #428bca;
    color: white;
}

div#response .popover .commentItem .arrow_from_other {
    position: relative;
    right: 276px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 10px black;
    border-right-color: inherit;
    float: right;
    top: 0px;
}

div#response .popover .commentItem .arrow_from_me {
    position: relative;
    left: 11px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-left: solid 10px black;
    border-left-color: inherit;
    float: right;
    top: 0px;
}
/* /stylesheets/spa/study.css */
div#user-study .studyItem {
    border: 1px solid #ddd;
    display: inline-block;
    width: 48%;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
@media screen and (max-width: 500px) {
    div#user-study .studyItem {
        width: 100%;
    }
}

@media screen and (min-width: 1300px) {
    div#user-study .studyItem {
        width: 32%;
    }
}

div#user-study #filterUI .col-lg-12 {
    min-width: 918px !important;
}

div#user-study .studyItem .big_field_container {
    width: 32%;
    display: inline-block;
    padding: 10px;
    text-align: center;
}

div#user-study .studyItem .big_field_container .glyphicon {
    font-size: 2em;
}

div#user-study .studyItem .big_field_container .entypoGlyphicon {
    font-family: 'Entypo Glyphicons';
    font-size: 4.5em;
    line-height: 22px;
}

div#user-study .studyItem .smallerText {
    font-size: 0.95em;
    padding-left: 5px;
    padding-right: 5px;
}

div#user-study .studyItem .smallerText .study_field {
    margin-bottom: 3px;
}

div#user-study .studyItem .smallerText .study_field .field_label {
    width: 90px;
    font-weight: bold;
    display: inline-block;
    text-align: left;
}

div#user-study .studyItem .smallerText .study_field .field_label .glyphicon {
    padding-right: 10px;
}

div#user-study .studyItem.highlighted {
    border: 1px solid orange;
}

div#user-study .studyItem.selected {
    border: 1px solid #4b70bf;
}

div#user-study .studyItem .respTitle {
    cursor: pointer;
    padding: 14px;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f3;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

div#user-study .studyItem .respTitle:hover {
    background-color: #c3c3c3;
}

div#user-study .studyItem .respTitle h3 {
    float: left;
}

div#user-study .studyItem .respTitle.highlighted {
    background-color: orange;
}
div#user-study .studyItem .respTitle .respActionIcons {
    float: right;
    height: 0;
    position: relative;
    top: -10px;
}

div#user-study .studyItem .respTitle span.entypoGlyphicon {
    font-family: 'Entypo Glyphicons';
    font-size: 2.1em;
    padding: 2px 4px;
    cursor: pointer;
    text-shadow: 1px 1px white;
}

div#user-study .studyItem .respTitle span.entypoGlyphicon.commentExists {
    color: indianred;
}

div#user-study .studyItem .respTitle span.entypoGlyphicon.tbi {
    color: red;
}

div#user-study .studyItem .respTitle span.entypoGlyphicon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

div#user-study .studyItem .respContent p.lead {
    margin-bottom: 2px;
    font-size: 1.1em;
    padding-top: 5px;
}

div#user-study .studyItem .respContent p.small {
    margin-bottom: 0px;
    color: #666;
}

div#user-study .studyItem .respContent hr {
    margin: 10px 0;
}

div#user-study .studyItem .respTitle.selected {
    background-color: #d9edf7;
}

div#user-study .studyItem .respContent {
    padding: 10px;
    cursor: pointer;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

div#user-study .studyItem .respContent:hover {
    background-color: #efefef;
}

div#user-study .studyItem .respContent .curveArea {
    padding-bottom: 10px;
    width: 100%;
    height: 300px;
    display: inline-block;
}

/* table */
div#user-study #tableRenderingArea table tr th:nth-child(1) {
    width: 30%
}
div#user-study #tableRenderingArea table tr th:nth-child(2) {
    width: 10%
}
div#user-study #tableRenderingArea table tr th:nth-child(3) {
    width: 25%
}
div#user-study #tableRenderingArea table tr th:nth-child(4) {
    width: 15%
}
div#user-study #tableRenderingArea table tr th:nth-child(5) {
    width: 20%
}
/* ============================================================================
   STUDIES PAGE SHELL  (rail + Chrome tab strip)  — 2026-08-18
   ----------------------------------------------------------------------------
   Brings Studies in line with Simulations / Physical Tests / Templates.

   DOM path: #user-studies > .two-col-flex >
             [.left-col.sim-left-col | .pageContainer.content-col#studies]
             > .pageTabsContainer > ul#tabsList + #tabsContent
             > .tabContent[data-id="Table_view"] (the list) + detail panes.

   The rail itself is NOT styled here: .sim-left-col / .sim-left-col-inner /
   .sim-new-btn / .sim-filter-label / .sim-filter-list / .sim-filter-icon are
   unscoped shared classes in spa/simulation.css:3-115, exactly as Physical
   Tests and Templates reuse them.

   The tab strip is NOT styled here either: #studies shares the
   GenericTabContents-shaped block in style.css (the #responsetemplates strip),
   because Studies gets its chips from the same renderer.

   What remains below is only what is page-specific.
   ---------------------------------------------------------------------------- */

/* (1) The rail owns the outer gutter now, so the content column sits flush --
   mirrors #simulations / #physicaltests / #responsetemplates .content-col. */
#studies.content-col {
    padding: 0;
}

/* (2) Collapse the rail while a study DETAIL pane is open (New Study and the
   filter presets only apply to the list).

   Studies' detail panes come from GenericTabContent, whose className is a bare
   'tabContent hidden' with no per-record class -- but it stamps data-id
   (views.common.js:2648), and only the template's own list pane is
   data-id="Table_view". So :not([data-id="Table_view"]):not(.hidden) means "a
   detail pane is showing". showTab() already toggles .hidden, so the rail
   animates closed on open and back open on return with no JS timing.
   Same mechanism as spa/template.css:308, the other GenericTabContents page.

   MEASURING THIS: do not trust getComputedStyle in the Chrome automation tab.
   .sim-left-col carries `transition: flex-basis .3s, opacity .25s, ...`, and a
   hidden tab has no animation clock -- so a started transition NEVER advances
   and getComputedStyle returns the frozen START value indefinitely. Measured
   2026-08-18: with a detail pane open the rail read flex-basis 180px / opacity 1
   for as long as it was sampled, and even an INLINE `flex-basis:0 !important`
   read back as 180px. That is not a cascade problem and not a :has()
   invalidation problem -- both work. Verified by re-measuring with
   `transition:none !important` forced on the rail: 0px with a detail pane
   visible, 180px after toggling .hidden back, 0px again. Kill the transition
   before asserting anything here, or pair the reading with a control. */
#user-studies .two-col-flex:has(#studies #tabsContent > .tabContent:not([data-id="Table_view"]):not(.hidden)) .sim-left-col {
    flex-basis: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
#user-studies .two-col-flex:has(#studies #tabsContent > .tabContent:not([data-id="Table_view"]):not(.hidden)) .sim-left-col-inner {
    transform: translateX(-100%);
}

/* (3) The list pane keeps the legacy top filter bar (#filterUI) and card grid
   (.contentPane), so give it the gutter the content column just dropped. */
#studies #tabsContent > .tabContent[data-id="Table_view"] {
    padding: 12px 14px 0 14px;
}

/* ============================================================================
   STUDIES LIST TOOLBAR — 2026-08-18
   ----------------------------------------------------------------------------
   The old header was a Bootstrap `.row` of `col-lg-*` columns full of
   `selectpicker` buttons, a bootstrap-switch and an `.input-group` pager. It is
   replaced by one flex toolbar carrying the shared FilterPanel bar
   (Plugins.Helpers.FilterPanel, layout:'bar' — the same component the
   simulation Responses / Files tabs use, styled by helpers/filter.panel.css).

   The legacy controls are NOT deleted: they stay in `.std-legacy-filters` as
   the source of truth that StudyFilterView reads, and the FilterPanel proxies
   into them (spa/studies/main.js `_mountFilterBar`). They are hidden here.

   Palette matches responses.v2.css / the FilterPanel bar (#dfe1e6 borders,
   #42526e text, #0052cc accent) so the two surfaces read as one product.
   ---------------------------------------------------------------------------- */

/* Hidden, but still LAID OUT: bootstrap-select measures its button on refresh,
   so display:none can leave the mirrored options unreadable. Park it instead. */
#studies .std-legacy-filters {
    position: absolute !important;
    left: -10000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#studies .std-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0 12px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14px;
}
#studies .std-fp        { flex: 1 1 420px; min-width: 0; }
#studies .std-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* per-page */
#studies .std-perpage {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; font-weight: 400;
}
#studies .std-perpage > span {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
    color: #6b7280; font-weight: 700;
}
#studies .std-limit {
    border: 1px solid #dfe1e6; border-radius: 6px; background: #fff;
    color: #42526e; font-size: 12px; padding: 5px 8px; height: 30px;
    cursor: pointer; outline: none;
}
#studies .std-limit:hover  { background: #f4f5f7; }
#studies .std-limit:focus  { border-color: #4c9aff; }

/* pager — flat, no .input-group / .btn-default */
#studies .paginationArea { display: inline-flex; }
#studies .paginationInputContainer {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid #dfe1e6; border-radius: 6px; background: #fff;
    padding: 2px 4px; height: 30px; box-sizing: border-box;
}
#studies .paginationInputContainer .pagenav {
    border: none; background: transparent; color: #6b7280;
    width: 24px; height: 24px; padding: 0; border-radius: 4px;
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
#studies .paginationInputContainer .pagenav:hover  { background: #f4f5f7; color: #0052cc; }
#studies .paginationInputContainer .pagenav:active { background: #e9ecef; }
#studies .paginationInputContainer #targetPageNumber {
    width: 44px; height: 24px; padding: 0 4px; margin: 0 2px;
    border: 1px solid #e5e7eb; border-radius: 4px; background: #fff;
    color: #1f2328; font-size: 12px; text-align: center; box-shadow: none;
}
#studies .paginationInputContainer #targetPageNumber:focus { border-color: #4c9aff; outline: none; }
#studies .std-pagesep      { color: #c1c7d0; font-size: 11px; padding: 0 1px; }
#studies .maxPageIndicator {
    min-width: 16px; padding: 0 4px; color: #6b7280; font-size: 12px;
    background: transparent; border: none; text-align: center;
}

/* search fallback when the FilterPanel component is unavailable */
#studies .std-fallback {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    border: 1px solid #dfe1e6; border-radius: 6px; padding: 5px 10px; background: #fff;
}
#studies .std-fallback i     { color: #7a869a; font-size: 11px; }
#studies .std-fallback input { border: none; outline: none; font-size: 12px; width: 220px; }

/* ── No "All Studies" tab ────────────────────────────────────────────────────
   The list is the page's home, not a tab. The <li> stays in the DOM because the
   route JS and GenericTabContent.showTab() both toggle its .active state; it is
   only hidden. Going back is the .std-back-to-all link injected into each detail
   pane by spa/studies/main.js -- same pattern as .sim-back-to-all on Simulations.
   When no detail tab is open the strip therefore has no chips, so collapse it
   entirely rather than leaving an empty grey band. */
#studies #tabsList > li.active > a[data-id="Table_view"],
#studies #tabsList > li:first-child > a[data-id="Table_view"] { display: none; }
#studies #tabsList > li:has(> a[data-id="Table_view"]) { display: none; }
#studies #tabsList:not(:has(> li:not(:has(> a[data-id="Table_view"])))) {
    display: none;
}

#studies .std-back-to-all {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 26px; overflow: hidden; white-space: nowrap; box-sizing: border-box;
    border: 1px solid #dfe1e6; border-radius: 6px; background: #fff;
    color: #42526e; font-size: 12px; padding: 5px 7px; margin-right: 10px;
    text-decoration: none; vertical-align: middle;
    transition: max-width 0.18s ease, background 0.12s, color 0.12s;
}
#studies .std-back-to-all:hover {
    max-width: 190px; background: #f4f5f7; color: #0052cc;
    border-color: #4c9aff; text-decoration: none;
}
#studies .std-back-to-all i { flex: 0 0 auto; font-size: 11px; }

/* ── Simple study page: one list, a rail, curve compare ────────────────────── */

.study-simple { background: #fff; border: 1px solid #dfe3e8; border-radius: 3px; }

.ss-crumb { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
            border-bottom: 1px solid #dfe3e8; background: #fafbfc; }
.ss-crumb h2.ss-name { margin: 0; font-size: 15px; font-weight: 600; }
.ss-spacer { flex: 1; }
.ss-sub { color: #656363; font-size: 12px; }

.ss-pill { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 10.5px;
           background: #eef1f4; color: #656363; white-space: nowrap; }
.ss-pill-srs { background: #e8f4fb; color: #15506e; }
.ss-pill-physicaltest { background: #f3e8f8; color: #6c3483; }

.ss-wrap { display: flex; min-height: 460px; }

.ss-rail { width: 64px; flex: 0 0 64px; border-right: 1px solid #dfe3e8; background: #fafbfc; padding: 8px 0; }
.ss-rail ul { list-style: none; margin: 0; padding: 0; }
.ss-rail a { display: flex; flex-direction: column; align-items: center; gap: 3px;
             padding: 11px 0; color: #656363; text-decoration: none; font-size: 9.5px;
             border-left: 3px solid transparent; }
.ss-rail a i { font-size: 16px; }
.ss-rail li.active a { color: #0b93d5; border-left-color: #0b93d5; background: #e8f4fb; }

.ss-body { flex: 1; min-width: 0; }
.ss-pane { min-width: 0; }

.ss-toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #dfe3e8; }
.ss-search, .ss-curve-search { padding: 5px 9px; border: 1px solid #dfe3e8; border-radius: 3px; font-size: 12px; width: 220px; }

/* The table can be very wide once response columns are added; it scrolls on its
   own so the page itself never scrolls sideways. */
.ss-tablewrap { overflow-x: auto; }
.ss-table { width: 100%; border-collapse: collapse; }
.ss-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
               color: #656363; font-weight: 600; padding: 7px 12px; border-bottom: 1px solid #dfe3e8;
               background: #fafbfc; white-space: nowrap; max-width: 220px; overflow: hidden;
               text-overflow: ellipsis; }
.ss-table td { padding: 8px 12px; border-bottom: 1px solid #eef1f4; font-size: 12.5px; white-space: nowrap; }
.ss-table .ss-num { text-align: right; font-variant-numeric: tabular-nums; }
.ss-table tbody tr:hover { background: #fafbfc; }

.ss-loading, .ss-empty { padding: 28px; color: #656363; font-size: 13px; text-align: center; }

.ss-sumgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; }
.ss-stat { border: 1px solid #dfe3e8; border-radius: 3px; padding: 11px 13px; }
.ss-stat b { display: block; font-size: 21px; font-weight: 600; }
.ss-stat span { color: #656363; font-size: 11.5px; }
.ss-folderline { padding: 0 14px 14px; color: #656363;
                 font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
                 word-break: break-all; }

.ss-compare-split { display: flex; min-height: 380px; }
.ss-curve-list { width: 300px; flex: 0 0 300px; border-right: 1px solid #dfe3e8; overflow: auto; max-height: 460px; }
.ss-curve-list ul { list-style: none; margin: 0; padding: 0; }
.ss-curve-list li { padding: 6px 12px; border-bottom: 1px solid #eef1f4; font-size: 12px;
                    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-curve-list li:hover { background: #fafbfc; }
.ss-curve-list li.on { background: #e8f4fb; color: #15506e; font-weight: 600; }
.ss-curve-list li.ss-more { color: #656363; cursor: default; font-style: italic; }
.ss-curve-plot { flex: 1; min-width: 0; }

.ss-explorer { min-height: 380px; }

.ss-curvecell { white-space: nowrap; }
.ss-chip { display: inline-block; padding: 1px 6px; margin: 1px 3px 1px 0; border: 1px solid #cfe6f5;
           background: #e8f4fb; color: #15506e; border-radius: 3px; font-size: 10.5px; cursor: pointer;
           max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ss-chip:hover { background: #d3e9f7; }
.ss-curvegroup { color: #0b93d5; font-size: 12px; text-decoration: none; }
.ss-curvegroup:hover { text-decoration: underline; }

.ss-newton { width: 100%; height: 420px; }
.ss-overlay-note { padding: 8px 14px; }

.ss-name-cell a.ss-open { color: #0b93d5; text-decoration: none; }
.ss-name-cell a.ss-open:hover { text-decoration: underline; }

.ss-bulkbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
              background: #e8f4fb; border-bottom: 1px solid #cfe6f5; }
.ss-bulkbar .ss-selcount { font-weight: 600; color: #15506e; }
.ss-checkcol { width: 30px; text-align: center; }

.ss-facts { width: auto; margin: 0 14px 18px; border-collapse: collapse; }
.ss-facts th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
               color: #656363; font-weight: 600; padding: 6px 18px 6px 0; white-space: nowrap;
               border-bottom: 1px solid #eef1f4; background: none; }
.ss-facts td { padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid #eef1f4; }
.ss-folderpath { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
                 word-break: break-all; }

/* ── Grid view: one panel per response, every target overlaid ──────────────── */

.ss-viewtoggle { display: inline-flex; gap: 0; margin-left: 10px; }
.ss-viewtoggle button.active { background: #e8f4fb; border-color: #0b93d5; color: #15506e; }

.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
           gap: 12px; padding: 14px; }
.ss-panel { border: 1px solid #dfe3e8; border-radius: 3px; overflow: hidden; background: #fff; }
.ss-panel-head { padding: 7px 11px; border-bottom: 1px solid #dfe3e8; background: #fafbfc;
                 font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
                 text-overflow: ellipsis; }
.ss-panel-empty { padding: 18px; font-size: 12px; }
.ss-panel-plot { height: 210px; }

.ss-bars, .ss-textlist { padding: 9px 11px; }
.ss-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ss-bar-label { flex: 0 0 96px; font-size: 11px; color: #656363; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.ss-bar-track { flex: 1; height: 12px; background: #eef1f4; border-radius: 2px; overflow: hidden; }
.ss-bar-fill { display: block; height: 100%; }
.ss-bar-value { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; color: #1f2933; }

.ss-text-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 11.5px; }
.ss-text-row i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; display: inline-block; }
.ss-text-value { color: #1f2933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ss-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 14px 10px; }
.ss-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #656363; }
.ss-legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

.ss-table th.hidden, .ss-table td.hidden { display: none; }

.ss-filesec { min-width: 0; }
.ss-filesec-folder .ss-folderpath { max-width: 46%; overflow: hidden; text-overflow: ellipsis;
                                    white-space: nowrap; }
.ss-folder-status { margin-right: 8px; }

/* /stylesheets/spa/hpcserver.css */
div#admin-hpcserver .serverItem,
div#admin-hpcserver .policyItem {
    display: inline-block;
    width: 48.5%;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

@media screen and (max-width: 500px) {
    div#admin-hpcserver .serverItem,
    div#admin-hpcserver .policyItem{
        width: 100%;
    }
}

@media screen and (min-width: 1300px) {
    div#admin-hpcserver .serverItem,
    div#admin-hpcserver .policyItem {
        width: 32%;
    }
}

div#admin-hpcserver .serverItem:hover,
div#admin-hpcserver .policyItem:hover {
    box-shadow: 0px 0px 6px 0px #9dd2ff;
    border-color: #428bca;
}

div#admin-hpcserver .serverItem .title,
div#admin-hpcserver .policyItem .title {
    background-color: #efefef;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}

div#admin-hpcserver .serverItem .title small,
div#admin-hpcserver .policyItem .title small {
    font-weight: 300;
    display: inline-block;
}

div#admin-hpcserver .serverItem .showcase img,
div#admin-hpcserver .policyItem .showcase img {
    margin-bottom: 10px;
}

div#admin-hpcserver .serverItem .showcase p.lead,
div#admin-hpcserver .policyItem .showcase p.lead {
    margin-bottom: 0px;
}

div#admin-hpcserver .serverItem .contentWrapper,
div#admin-hpcserver .policyItem .contentWrapper {
    padding-top: 10px;
    padding-bottom: 10px;
}

div#admin-hpcserver .serverItem .db_field,
div#admin-hpcserver .policyItem .db_field {
    width: 100%;
    margin-bottom: 3px;
}

div#admin-hpcserver .serverItem .db_field .fieldlabel,
div#admin-hpcserver .policyItem .db_field .fieldlabel {
    width: 40%;
    display: inline-block;
}

div#admin-hpcserver .serverItem .db_field .fieldvalue,
div#admin-hpcserver .policyItem .db_field .fieldvalue {
    width: 60%;
    display: inline-block;
}

div#admin-hpcserver .serverItem .respTitle,
div#admin-hpcserver .policyItem .respTitle {
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f3;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

div#admin-hpcserver .serverItem .respTitle:hover,
div#admin-hpcserver .policyItem .respTitle:hover {
    background-color: #c3c3c3;
}

div#admin-hpcserver .serverItem .respTitle h3,
div#admin-hpcserver .policyItem .respTitle h3 {
    float: left;
}

div#admin-hpcserver .serverItem .respTitle.highlighted,
div#admin-hpcserver .policyItem .respTitle.highlighted {
    background-color: orange;
}
div#admin-hpcserver .serverItem .respTitle .respActionIcons,
div#admin-hpcserver .policyItem .respTitle .respActionIcons {
    float: right;
    height: 0;
    position: relative;
    top: -10px;
}

div#admin-hpcserver .serverItem .respTitle span.entypoGlyphicon,
div#admin-hpcserver .policyItem .respTitle span.entypoGlyphicon {
    font-family: 'Entypo Glyphicons';
    font-size: 2.1em;
    padding: 2px 4px;
    cursor: pointer;
    text-shadow: 1px 1px white;
}

div#admin-hpcserver .serverItem .respTitle span.entypoGlyphicon.commentExists,
div#admin-hpcserver .policyItem .respTitle span.entypoGlyphicon.commentExists {
    color: indianred;
}

div#admin-hpcserver .serverItem .respTitle span.entypoGlyphicon.tbi,
div#admin-hpcserver .policyItem .respTitle span.entypoGlyphicon.tbi {
    color: red;
}

div#admin-hpcserver .serverItem .respTitle span.entypoGlyphicon:hover,
div#admin-hpcserver .policyItem .respTitle span.entypoGlyphicon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

.solverItem, .processorItem {
    cursor: move;
    border-radius: 5px;
}

.solverItem .hpcserver_name, .processorItem .hpcserver_name {
    font-weight: 700;
}

.solverItem .hpcserver_description, .solverItem .hpcserver_description {
    font-size: 0.9em;
    color: #666;
}

.solverItem .fa.clickable,
.policyItem .fa.clickable, .processorItem .fa.clickable {
    font-size: 1.5em;
    padding: 7px;
}

.solverItem .fa.clickable:hover,
.policyItem .fa.clickable:hover, .processorItem .fa.clickable:hover {
    background-color: black;
    color: white;
}

.attributeItem {
    cursor: move;
}

.attributeItem .fa-trash-o,
.attributeItem .editattribute {
    padding-left: 5px;
}

.ui-state-highlight-hpcsolver {
    border: 1px solid #fed22f;
    background: #ffe45c;
    margin-bottom: 10px;
    min-height: 3.5em;
    color: #363636;
}

.ui-state-highlight-solverattr {
    border: 1px solid #fed22f;
    background: #ffe45c;
    color: #363636;
}
.v2-solver-list { margin: 10px 0 18px 0; border: 1px solid #dfe7f1; border-radius: 8px; }
.v2-solver-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #eef2f6; }
.v2-solver-row:last-child { border-bottom: 0; }
.v2-solver-name { font-weight: 600; color: #1e2939; width: 200px; }
.v2-solver-summary { flex-grow: 1; font-size: 12px; color: #65737f; }
.v2-inputs-group { margin: 14px 0; }
.v2-inputs-group > label { display: block; font-size: 11px; font-weight: 700; color: #65737f; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.v2-inputs-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.v2-inputs-check { font-weight: 400; font-size: 13px; color: #1e2939; }
.v2-inputs-min, .v2-inputs-max { width: 80px; }
.v2-inputs-hint { font-size: 12px; color: #8a95a3; }
.v2-inputs-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #dfe7f1; }

/* /stylesheets/spa/hpcjobs.css */
div#user-hpcjobs:not(.mobile) .jobItem {
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/*div#user-hpcjobs:not(.mobile) .jobItem:hover {*/
    /*box-shadow: 0px 0px 6px 0px #9dd2ff;*/
    /*border-color: #428bca;*/
/*}*/


/* ==========================================================================
   HPC Jobs Summary Bar
   ========================================================================== */

@keyframes hpcjobsFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Carousel viewport — single row height, hides overflow */
.hpcjobs-top-row {
    overflow: hidden;
    position: relative;
}

.hpcjobs-carousel-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hpcjobs-carousel-track.slide-servers {
    transform: translateX(-100%);
}

.hpcjobs-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

/* Container */
.hpcjobs-summary-container {
    position: relative;
    padding: 8px 16px 4px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hpcjobs-summary-container::-webkit-scrollbar {
    height: 4px;
}

.hpcjobs-summary-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.hpcjobs-summary-container::-webkit-scrollbar-track {
    background: transparent;
}

.hpcjobs-summary {
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 100%;
}

/* Carousel arrow buttons — positioned on .hpcjobs-top-row */
.hpcjobs-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.hpcjobs-carousel-arrow:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    color: #333;
}

.hpcjobs-carousel-arrow-left {
    left: 4px;
}

.hpcjobs-carousel-arrow-right {
    right: 4px;
}

.hpcjobs-carousel-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Hide scroll arrows when server table slide is active */
.hpcjobs-top-row:has(.hpcjobs-carousel-track.slide-servers) .hpcjobs-carousel-arrow {
    opacity: 0;
    pointer-events: none;
}

/* Group Card */
.hpcjobs-summary-group {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    animation: hpcjobsFadeIn 0.25s ease both;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex: 1 1 0;
    min-width: 240px;
    overflow: hidden;
}

.hpcjobs-summary-group:hover {
    border-color: #c0c0c0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Card drag-and-drop reordering */
.hpcjobs-summary-group.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: scale(1.02);
    z-index: 10;
}

.hpcjobs-summary-group.ui-sortable-helper .hpcjobs-summary-group-header {
    cursor: grabbing;
}

.hpcjobs-card-placeholder {
    background: #e8f0fe;
    border: 2px dashed #90b4e0;
    border-radius: 8px;
    flex: 1 1 0;
    min-width: 240px;
}

/* Group Header */
.hpcjobs-summary-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
}

.hpcjobs-summary-group-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 32px;
}

.hpcjobs-summary-group-icon.icon-status    { background: #e0ecf8; color: #2c5282; }
.hpcjobs-summary-group-icon.icon-resources { background: #e8daef; color: #6c3483; }
.hpcjobs-summary-group-icon.icon-time      { background: #fef3cd; color: #856404; }
.hpcjobs-summary-group-icon.icon-licenses  { background: #d4edda; color: #155724; }

.hpcjobs-summary-group-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Metrics Row */
.hpcjobs-summary-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Individual Metric */
.hpcjobs-summary-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 45%;
    min-width: 0;
}

.hpcjobs-summary-metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Metric icon variants */
.hpcjobs-summary-metric-icon.icon-queued      { background: #e0ecf8; color: #2c5282; }
.hpcjobs-summary-metric-icon.icon-presolving  { background: #fff7e6; color: #d46b08; }
.hpcjobs-summary-metric-icon.icon-solving     { background: #e6f7ff; color: #096dd9; }
.hpcjobs-summary-metric-icon.icon-postproc    { background: #e8daef; color: #6c3483; }
.hpcjobs-summary-metric-icon.icon-finished     { background: #d4edda; color: #155724; }
.hpcjobs-summary-metric-icon.icon-failed       { background: #f0f0f0; color: #666; }
.hpcjobs-summary-metric-icon.icon-cores-busy   { background: #e8daef; color: #6c3483; }
.hpcjobs-summary-metric-icon.icon-nodes-busy   { background: #d1ecf1; color: #0c5460; }
.hpcjobs-summary-metric-icon.icon-core-hours   { background: #fef3cd; color: #856404; }
.hpcjobs-summary-metric-icon.icon-cores-req    { background: #f0f0f0; color: #555; }
.hpcjobs-summary-metric-icon.icon-elapsed      { background: #e8e0f0; color: #6a4c93; }
.hpcjobs-summary-metric-icon.icon-waiting      { background: #fff7e6; color: #d46b08; }

/* Alert state: Failed > 0 */
.hpcjobs-summary-metric.has-alert .hpcjobs-summary-metric-icon.icon-failed {
    background: #f8d7da;
    color: #721c24;
}

.hpcjobs-summary-metric-info {
    display: flex;
    flex-direction: column;
}

.hpcjobs-summary-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.hpcjobs-summary-metric-value.value-alert {
    color: #721c24;
}

.hpcjobs-summary-metric-value.value-active {
    color: #096dd9;
}

.hpcjobs-summary-metric-value.value-success {
    color: #155724;
}

.hpcjobs-summary-metric-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
    white-space: nowrap;
}

/* Compact status metrics (0.7x) — excludes anomalies card */
.hpcjobs-summary-group:not([data-card="anomalies"]) .hpcjobs-summary-metric {
    gap: 6px;
}
.hpcjobs-summary-group:not([data-card="anomalies"]) .hpcjobs-summary-metric-icon {
    width: 26px;
    height: 26px;
    font-size: 10px;
    flex: 0 0 26px;
    border-radius: 6px;
}
.hpcjobs-summary-group:not([data-card="anomalies"]) .hpcjobs-summary-metric-value {
    font-size: 14px;
}
.hpcjobs-summary-group:not([data-card="anomalies"]) .hpcjobs-summary-metric-label {
    font-size: 8px;
}

/* Clickable status metrics */
.hpcjobs-summary-group[data-card="job-status"] .hpcjobs-summary-metric,
.hpcjobs-summary-group[data-card="overall-status"] .hpcjobs-summary-metric {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background-color 0.15s ease;
}
.hpcjobs-summary-group[data-card="job-status"] .hpcjobs-summary-metric:hover,
.hpcjobs-summary-group[data-card="overall-status"] .hpcjobs-summary-metric:hover {
    background: #f0f4f8;
}
.hpcjobs-summary-metric.metric-active {
    background: #e0ecf8 !important;
    box-shadow: inset 0 0 0 1px #b0cde8;
}

/* Shimmer pulse while table is loading */
@keyframes metricShimmer {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}
.hpcjobs-summary-metric.metric-loading {
    animation: metricShimmer 0.8s ease-in-out infinite;
    pointer-events: none;
}

/* Red flash for zero-count metrics */
@keyframes metricRejectFlash {
    0%   { background: transparent; }
    20%  { background: rgba(229,62,62,0.15); }
    100% { background: transparent; }
}
.hpcjobs-summary-metric.metric-rejected {
    animation: metricRejectFlash 0.6s ease-out;
}

/* Skeleton Loader */
@keyframes hpcjobsShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.hpcjobs-skeleton-group {
    animation: none;
}

.hpcjobs-skeleton-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.hpcjobs-skeleton-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.hpcjobs-skeleton-block {
    display: inline-block;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: hpcjobsShimmer 1.5s ease infinite;
}

.hpcjobs-skeleton-metrics .hpcjobs-skeleton-block:nth-child(odd) {
    animation-delay: 0.1s;
}

.hpcjobs-skeleton-metrics .hpcjobs-skeleton-block:nth-child(4n) {
    animation-delay: 0.25s;
}

/* Responsive */
@media (max-width: 768px) {
    .hpcjobs-summary-group {
        padding: 12px;
    }
}

/* Overall Status card group icon */
.hpcjobs-summary-group-icon.icon-overall  { background: #dce8f5; color: #34495e; }

/* Overall Status metric icon variants */
.hpcjobs-summary-metric-icon.icon-total     { background: #dce8f5; color: #34495e; }
.hpcjobs-summary-metric-icon.icon-stopped   { background: #fff3cd; color: #856404; }

.hpcjobs-summary-metric-value.value-warning {
    color: #856404;
}

/* Anomaly Detection card */
.hpcjobs-summary-group-icon.icon-anomaly  { background: #fff3cd; color: #856404; }

/* Anomaly filter toggle group — slides out leftward from the filter button */
.hpcjobs-anomaly-filter-group {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
}

.hpcjobs-anomaly-filter-type {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, background 0.15s ease, color 0.15s ease;
    color: #bbb;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
}

.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-type {
    width: 26px;
    height: 26px;
    opacity: 1;
    padding: 0;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Active state — colored per type */
.hpcjobs-anomaly-filter-type.active[data-type="long_wait"]        { color: #856404; background: #fff3cd; }
.hpcjobs-anomaly-filter-type.active[data-type="stuck_status"]     { color: #721c24; background: #f8d7da; }
.hpcjobs-anomaly-filter-type.active[data-type="heavy_user"]       { color: #0c5460; background: #d1ecf1; }
.hpcjobs-anomaly-filter-type.active[data-type="skipped_solving"]  { color: #856404; background: #fff3cd; }

/* Inactive state — greyed */
.hpcjobs-anomaly-filter-type:not(.active) { color: #ccc; background: #f5f5f5; }

.hpcjobs-anomaly-filter-type:hover { transform: scale(1.1); }

/* The trigger button */
.hpcjobs-anomaly-filter-toggle {
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.hpcjobs-anomaly-filter-toggle:hover { color: #555; background: #f0f0f0; }
.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-toggle { color: #2c5282; background: #e0ecf8; }

/* Stagger the slide-in for each type button */
.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-type:nth-child(1) { transition-delay: 0.02s; }
.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-type:nth-child(2) { transition-delay: 0.06s; }
.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-type:nth-child(3) { transition-delay: 0.10s; }
.hpcjobs-anomaly-filter-group.expanded .hpcjobs-anomaly-filter-type:nth-child(4) { transition-delay: 0.14s; }

/* Constrain anomalies card so many items don't inflate the row height.
   overflow:hidden on a flex item resets its min-height to 0 (per spec),
   so sibling cards determine the row height. The body then fills the
   available space and scrolls internally. */
.hpcjobs-summary-group[data-card="anomalies"] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hpcjobs-anomaly-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.hpcjobs-anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpcjobs-anomaly-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
    transition: background-color 0.15s ease;
}

.hpcjobs-anomaly-item.clickable {
    cursor: pointer;
}

.hpcjobs-anomaly-item.clickable:hover {
    background: #f5f5f5;
}

.hpcjobs-anomaly-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: 0 0 24px;
}

.hpcjobs-anomaly-item-icon.severity-warning { background: #fff3cd; color: #856404; }
.hpcjobs-anomaly-item-icon.severity-danger  { background: #f8d7da; color: #721c24; }
.hpcjobs-anomaly-item-icon.severity-info    { background: #d1ecf1; color: #0c5460; }

.hpcjobs-anomaly-item-message {
    flex: 1;
    word-break: break-word;
}

.hpcjobs-anomaly-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    color: #155724;
    font-size: 13px;
}

.hpcjobs-anomaly-empty-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #d4edda;
    color: #155724;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: 0 0 28px;
}

/* 2-column metric layout for resources card */
/* 2-column metric layout for resources and job-status cards */
.hpcjobs-summary-group[data-card="resources"] .hpcjobs-summary-metrics,
.hpcjobs-summary-group[data-card="job-status"] .hpcjobs-summary-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hpcjobs-summary-group[data-card="resources"] .hpcjobs-summary-metric,
.hpcjobs-summary-group[data-card="job-status"] .hpcjobs-summary-metric {
    min-width: 0;
}

/* ==========================================================================
   License Card
   ========================================================================== */

.hpcjobs-summary-group[data-card="licenses"] {
    min-width: 280px;
}

.hpcjobs-license-server-select {
    margin-left: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: #555;
    background: #fff;
    max-width: 140px;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.hpcjobs-license-server-select:focus {
    outline: none;
    border-color: #2c5282;
}

.hpcjobs-license-sync-btn {
    border: none;
    background: transparent;
    color: #999;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.hpcjobs-license-sync-btn:hover {
    color: #2c5282;
    background: #e0ecf8;
}

.hpcjobs-license-sync-btn.syncing i {
    animation: fa-spin 1s linear infinite;
}

.hpcjobs-license-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 0;
}

.hpcjobs-license-empty {
    color: #999;
    font-size: 12px;
    font-style: italic;
    padding: 10px 0;
    text-align: center;
}

.hpcjobs-license-item {
    padding: 6px 0;
}

.hpcjobs-license-item + .hpcjobs-license-item {
    border-top: 1px solid #f0f0f0;
}

.hpcjobs-license-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.hpcjobs-license-item-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: capitalize;
}

.hpcjobs-license-item-counts {
    font-size: 11px;
    color: #666;
}

.hpcjobs-license-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.hpcjobs-license-bar-used {
    background: #2c5282;
    border-radius: 4px 0 0 4px;
    transition: width 0.3s ease;
}

.hpcjobs-license-bar-free {
    background: #c6d9ec;
    transition: width 0.3s ease;
}

.hpcjobs-license-loading {
    text-align: center;
    padding: 10px 0;
    color: #999;
    font-size: 12px;
}

/* ==========================================================================
   Server Status Table
   ========================================================================== */

.hpcjobs-server-table-container {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hpcjobs-server-table-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    animation: hpcjobsFadeIn 0.25s ease both;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* Top scrollbar mirror — synced with main scroll area */
.hpcjobs-server-table-topscroll {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
}

.hpcjobs-server-table-topscroll-inner {
    height: 1px;
}

/* Scrollable table body area — fills remaining height within the carousel slide */
.hpcjobs-server-table-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
}

.hpcjobs-server-table-header {
    display: none;
}

/* Server search bar — now inside subheader <th>, styles scoped below under .hpcjobs-server-table-subheader */

.hpcjobs-server-table-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #d4edda;
    color: #155724;
}

.hpcjobs-server-table-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hpcjobs-server-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.hpcjobs-server-table thead th {
    background: #fafafa;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.hpcjobs-server-table-subheader th {
    background: #f5f5f5;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 500;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
    top: 31px;
}

/* Skeleton row shimmer delays */
.hpcjobs-server-skeleton-row:nth-child(2) .hpcjobs-skeleton-block {
    animation-delay: 0.15s;
}
.hpcjobs-server-skeleton-row:nth-child(3) .hpcjobs-skeleton-block {
    animation-delay: 0.3s;
}

.hpcjobs-server-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
}

.hpcjobs-server-table tbody tr:last-child td {
    border-bottom: none;
}

.hpcjobs-server-table tbody tr:hover {
    background: #f8f9fa;
}

.hpcjobs-server-table .server-name {
    font-weight: 600;
    color: #2c5282;
}

/* Status badge */
.hpcjobs-server-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.hpcjobs-server-status-badge.status-active  { background: #d4edda; color: #155724; }
.hpcjobs-server-status-badge.status-down    { background: #f8d7da; color: #721c24; }
.hpcjobs-server-status-badge.status-loading { background: #f0f0f0; color: #888; }
.hpcjobs-server-status-badge.status-no-data { background: #fff3cd; color: #856404; }

/* External jobs columns — lighter to visually separate from d3VIEW */
.hpcjobs-server-table .server-col-ext-running,
.hpcjobs-server-table .server-col-ext-queued { color: #6c757d; }

/* Freshness / Last Synced column */
.hpcjobs-server-table .server-col-synced { font-size: 11px; color: #888; white-space: nowrap; }

/* Sync button */
.hpcjobs-sync-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    padding: 3px 7px;
    font-size: 12px;
    transition: all 0.2s;
}
.hpcjobs-sync-btn:hover { color: #1a73e8; border-color: #1a73e8; background: rgba(26,115,232,0.05); }
.hpcjobs-sync-btn.syncing { color: #1a73e8; pointer-events: none; opacity: 0.7; }
.server-col-sync-action { text-align: center; width: 40px; }

/* Sync All button */
.hpcjobs-sync-all-btn {
    background: none;
    border: 1px solid #bbb;
    border-radius: 4px;
    color: #555;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
    transition: all 0.2s;
}
.hpcjobs-sync-all-btn:hover { color: #1a73e8; border-color: #1a73e8; background: rgba(26,115,232,0.05); }
.hpcjobs-sync-all-btn.syncing { color: #1a73e8; pointer-events: none; opacity: 0.7; }

/* Search bar in subheader */
.hpcjobs-server-table-subheader .hpcjobs-server-search-wrap { position: relative; }
.hpcjobs-server-table-subheader .hpcjobs-server-search {
    width: 100%;
    min-width: 100px;
    padding: 3px 6px 3px 22px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 11px;
    background: #fff;
    box-sizing: border-box;
}
.hpcjobs-server-table-subheader .hpcjobs-server-search:focus { border-color: #1a73e8; outline: none; }
.hpcjobs-server-table-subheader .hpcjobs-server-search-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 11px;
    pointer-events: none;
}

/* Skeleton shimmer for table cells */
.hpcjobs-server-table .hpcjobs-skeleton-block {
    display: inline-block;
    width: 40px;
    height: 16px;
    border-radius: 3px;
}

/* ==========================================================================
   Toggle Buttons
   ========================================================================== */

/* Time scope segmented toggle */
.hpcjobs-time-scope {
    display: inline-flex;
    vertical-align: middle;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.hpcjobs-scope-btn {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
    letter-spacing: 0.3px;
}

.hpcjobs-scope-btn:hover:not(.active) {
    color: #555;
    background: #e8e8e8;
}

.hpcjobs-scope-btn.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Loading state — disable clicks and show shimmer */
.hpcjobs-time-scope.loading {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.hpcjobs-time-scope.loading .hpcjobs-scope-btn {
    opacity: 0.6;
}

.hpcjobs-time-scope.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: hpcjobsScopeShimmer 1.2s ease infinite;
}

@keyframes hpcjobsScopeShimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* Carousel segmented toggle */
.hpcjobs-carousel-toggle {
    display: inline-flex;
    vertical-align: middle;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.hpcjobs-carousel-btn {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}

.hpcjobs-carousel-btn:hover:not(.active) {
    color: #555;
    background: #e8e8e8;
}

.hpcjobs-carousel-btn.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Submit Job Button
   ========================================================================== */

.hpcjobs-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    padding-right: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #dce8f5 !important;
    background: linear-gradient(135deg, #2c5282, #2b6cb0);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 6px rgba(44, 82, 130, 0.25);
    vertical-align: middle;
}

.hpcjobs-submit-btn:hover {
    background: linear-gradient(135deg, #2b6cb0, #3182ce);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.35);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.hpcjobs-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(44, 82, 130, 0.25);
}

.hpcjobs-submit-btn i {
    font-size: 12px;
}

.hpcjobs-summary-group[data-card="cost-mtd"] {
    border-left: 3px solid #2c5282;
    background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%);
}

.hpcjobs-summary-group-icon.icon-cost { background: #e0ecf8; color: #2c5282; }

.hpcjobs-cost-mtd-body {
    padding: 8px 10px 6px 10px;
    display: flex;
    flex-direction: column;
}

.hpcjobs-cost-mtd-value {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    display: block;
}

.hpcjobs-cost-mtd-corehrs {
    font-size: 11px;
    color: #555;
    display: block;
    margin-top: 2px;
}

.hpcjobs-cost-mtd-delta {
    font-size: 10px;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.hpcjobs-cost-mtd-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    margin-top: 4px;
}

/* ==========================================================================
   HPC Jobs page: job tabs (d3VIEW.AppPage.attach, see spa/hpcjobs/main.js)
   The strip itself is styled by the shared .d3v-tab-strip block in apppage.css.
   ========================================================================== */

/* the "All HPC Jobs" chip stays in the DOM for the route JS; the back arrow replaces it */
#hpcjobs #tabsList > li.Table_view {
    display: none;
}

/* ── Page head: the strip, the list controls and Submit share one row ─────────
   The strip replaces the old "HPC Jobs" heading -- the page is already named in
   the app menu directly above it, so the heading only cost a row. The head sits
   OUTSIDE #tabsContent so it survives opening a job. */

/* div.pageContainer (style.css:5492) indents every page 12px from the top and
   left. The head and the panes carry their own spacing, so drop it here. */
#hpcjobs.pageContainer {
    padding: 0;
}

.hpcjobs-page-head {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    border-bottom: 1px solid #ddd;
}

/* The strip fills the row up to the buttons and is grey the whole way, tabs or
   not -- the same band Simulations has -- and stops there with a rounded corner.
   It keeps the tabs' own height and sits on the bottom edge of the row, so the
   row can stay as tall as the buttons beside it need.
   The flex item of the head row is the strip's WRAPPER, not the <ul>. */
#hpcjobs .hpcjobs-page-head > .pageTabsContainer {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
#hpcjobs .hpcjobs-page-head #tabsList {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 10px 0 0;
}

.hpcjobs-page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 6px 12px 6px 0;
}

/* the time scope and the cards/servers switch drive the LIST; on a job detail
   they would act on something the user cannot see */
#hpcjobs:has(#tabsContent > .tabContent[class*="hpcjob-tab-view-"]:not(.hidden)) .hpcjobs-time-scope,
#hpcjobs:has(#tabsContent > .tabContent[class*="hpcjob-tab-view-"]:not(.hidden)) .hpcjobs-carousel-toggle {
    display: none;
}

#hpcjobs .tabContent[class*="hpcjob-tab-view-"] {
    padding: 12px 14px 0 14px;
}

/* the arrow rides in the title row, so it only needs its hover width here */
#hpcjobs .hpcjob-detail-title h2 > .hpcjob-back-to-all {
    --d3v-back-label-w: 125px;
}

/* ── Frozen shell: the head and the job title stay put, the body scrolls ──────
   body.app-shell-frozen is set for every app, and without an adapter this page
   fell back to scrolling the whole of #main_content -- which carried the head,
   and a job's title, out of reach. Thread the bounded height down instead. */
body.app-shell-frozen #user-hpcjobs,
body.app-shell-frozen #user-hpcjobs > .user-hpcjobs-index-tpl,
body.app-shell-frozen #hpcjobs,
body.app-shell-frozen #hpcjobs > #tabsContent {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
}

body.app-shell-frozen #hpcjobs > .hpcjobs-page-head {
    flex: 0 0 auto;
}

body.app-shell-frozen #hpcjobs #tabsContent > .tabContent {
    flex: 1 1 auto;
    min-height: 0;
}

/* the list scrolls as one block */
body.app-shell-frozen #hpcjobs #tabsContent > .tabContent.main-content-view {
    overflow-y: auto;
}

/* a job detail: title row fixed, everything below it scrolls */
body.app-shell-frozen #hpcjobs #tabsContent > .tabContent[class*="hpcjob-tab-view-"],
body.app-shell-frozen #hpcjobs .tabContent[class*="hpcjob-tab-view-"] > .hpcjob-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.app-shell-frozen #hpcjobs .tabContent[class*="hpcjob-tab-view-"] > .hpcjob-detail {
    flex: 1 1 auto;
}
body.app-shell-frozen #hpcjobs .hpcjob-detail > .hpcjob-detail-head {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}
body.app-shell-frozen #hpcjobs .hpcjob-detail > .hpcjob-detail-body {
    padding: 12px 2px 12px 0;
}

.hpcjob-detail-loading {
    padding: 48px 0;
    text-align: center;
    color: #888;
    font-size: 14px;
}
.hpcjob-detail-loading i {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
}

/* ==========================================================================
   HPC job detail (#simulation_subtab_hpcjob) — rendered by d3VIEW.Views.HpcjobTab
   on the HPC Jobs page, inside the simulation detail HPC Job tab, and in the
   fullscreen modal Routers.Main opens elsewhere. Everything is scoped to
   .hpcjob-detail, which only this template emits.
   ========================================================================== */

.hpcjob-detail {
    color: #2b3644;
    font-size: 13px;
}

.hpcjob-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.hpcjob-detail-title h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 650;
    color: #1f2a37;
    word-break: break-word;
}
.hpcjob-detail-title h2 i {
    color: #2c5282;
    font-size: 16px;
}

.hpcjob-detail-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.hpcjob-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: capitalize;
    background: #eef1f5;
    color: #4a5568;
}
.hpcjob-status-solving { background: #2b6cb0; color: #fff; }
.hpcjob-status-active  { background: #fdebd2; color: #9a5b0f; }
.hpcjob-status-done    { background: #fff; color: #4a5568; border: 1px solid #dde3ea; }
.hpcjob-status-danger  { background: #fbe4e4; color: #b03a3a; }
.hpcjob-status-success { background: #def7e7; color: #1f7a45; }

.hpcjob-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f5f8;
    border: 1px solid #e3e8ee;
    color: #4a5568;
    font-size: 11.5px;
    line-height: 1.4;
}
.hpcjob-chip strong { color: #1f2a37; }
.hpcjob-chip i { font-size: 11px; opacity: .8; }
.hpcjob-chip .copy-cb { padding-left: 2px; }
a.hpcjob-chip-link {
    background: #e2edf9;
    border-color: #cfe0f5;
    color: #2c5282 !important;      /* beats the global `a { color !important }` */
    text-decoration: none !important;
}
a.hpcjob-chip-link:hover { background: #cfe0f5; }

.hpcjob-detail .copy-cb {
    cursor: pointer;
    color: #8595a8;
    font-size: 11px;
}
.hpcjob-detail .copy-cb:hover { color: #2c5282; }

.hpcjob-detail-tools { display: flex; align-items: center; gap: 8px; }
a.hpcjob-open-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e3e8ee;
    border-radius: 7px;
    background: #f8fafc;
    color: #5b6b7f !important;
    text-decoration: none !important;
    font-size: 12px;
}
a.hpcjob-open-tab:hover { color: #2c5282 !important; border-color: #9dc0ea; }

/* the auto-refresh note keeps the .alert / #refreshcounter hooks HpcjobTab drives */
.hpcjob-detail .alert.hpcjob-detail-refresh {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    background: #f8fafc;
    color: #5b6b7f;
    font-size: 11.5px;
    white-space: nowrap;
}
.hpcjob-detail .alert.hpcjob-detail-refresh a { color: #2c5282 !important; margin-left: 4px; }

.hpcjob-detail-message {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #f5e1b5;
    color: #7a5a12;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
}
.hpcjob-detail-message i { margin-top: 2px; }

/* sections */
.hpcjob-detail-section {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
}
.hpcjob-detail-section > h3,
.hpcjob-detail-section > summary {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #66809a;
}
.hpcjob-detail-section > h3 small {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #7c8a9a;
}
.hpcjob-detail-commands > summary {
    cursor: pointer;
    margin-bottom: 0;
    list-style: none;
}
.hpcjob-detail-commands > summary::-webkit-details-marker { display: none; }
.hpcjob-detail-commands > summary::before {
    content: "\25B8";
    display: inline-block;
    width: 12px;
    margin-right: 2px;
    transition: transform .18s ease;
}
.hpcjob-detail-commands[open] > summary { margin-bottom: 10px; }
.hpcjob-detail-commands[open] > summary::before { transform: rotate(90deg); }

/* key/value grid */
.hpcjob-detail-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    margin: 0;
}
.hpcjob-detail-grid dt {
    font-weight: 600;
    color: #5b6b7f;
    white-space: nowrap;
}
.hpcjob-detail-grid dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
    color: #2b3644;
}
.hpcjob-detail-grid dd small { color: #7c8a9a; margin-left: 4px; }
.hpcjob-detail-grid code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f3f5f8;
    color: #2b3644;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-all;
}

.hpcjob-progress {
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    height: 8px;
    margin-right: 6px;
    border-radius: 999px;
    background: #e9edf2;
    overflow: hidden;
}
.hpcjob-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: #3b7dd8;
}

/* timeline table */
.hpcjob-timeline {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.hpcjob-timeline th {
    padding: 4px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8595a8;
    border-bottom: 1px solid #e3e8ee;
}
.hpcjob-timeline td {
    padding: 5px 8px;
    border-bottom: 1px solid #f0f2f5;
    white-space: nowrap;
    vertical-align: middle;
}
.hpcjob-timeline tr:last-child td { border-bottom: none; }
.hpcjob-timeline td:first-child { white-space: normal; }
.hpcjob-timeline td:first-child i { color: #a3b1c2; font-size: 11px; margin: 0 4px; }
.hpcjob-timeline-share { width: 32%; }
.hpcjob-timeline td.hpcjob-timeline-share {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hpcjob-timeline-bar {
    height: 8px;
    border-radius: 999px;
    background: #9dc0ea;
    min-width: 2px;
}
.hpcjob-timeline td.hpcjob-timeline-share span { color: #7c8a9a; font-size: 11px; }

.hpcjob-detail-empty {
    margin: 0;
    color: #8595a8;
    font-style: italic;
}

.hpcjob-detail-output {
    margin: 0;
    max-height: 360px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    background: #f8fafc;
    color: #2b3644;
    font-size: 11.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 700px) {
    .hpcjob-detail-grid { grid-template-columns: 1fr; row-gap: 2px; }
    .hpcjob-detail-grid dt { margin-top: 6px; }
    .hpcjob-timeline-share { width: auto; }
}

/* ── Detail body: essentials on top, then log (70%) beside the side column (30%).
   The page never scrolls; the stream, the side column and the trace each
   scroll on their own. Surfaces without a bounded height (the fullscreen
   modal) fall back to the min-heights. ── */
.hpcjob-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.hpcjob-detail > .hpcjob-detail-head { flex: 0 0 auto; }
.hpcjob-detail > .hpcjob-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* a short window: the row keeps its floor and the body scrolls to reach the rest */
.hpcjob-detail > .hpcjob-detail-body { overflow-y: auto; }

.hpcjob-detail *::-webkit-scrollbar { width: 8px; height: 8px; }
.hpcjob-detail *::-webkit-scrollbar-track { background: transparent; }
.hpcjob-detail *::-webkit-scrollbar-thumb { background: #c9d1da; border-radius: 4px; border: 2px solid #fff; }
.hpcjob-detail *::-webkit-scrollbar-thumb:hover { background: #a9b4c0; }

/* one grey row: job dir on the left, submit command on the right */
.hpcjob-essentials {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 8px;
    margin-bottom: 12px;
}
.hpcjob-essential {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #2c323c;
    border-radius: 8px;
    background: #1b1f26;             /* same ground as the log stream */
    color: #d7dde6;
}
.hpcjob-essential-k {
    width: 16px;
    text-align: center;
    color: #7fb3ff;
    font-size: 13px;
}
.hpcjob-essential > code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 0;
    background: none;
    color: #d7dde6;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}
.hpcjob-essential > code:hover { overflow-x: auto; text-overflow: clip; }
.hpcjob-essential > button.copy-cb {
    padding: 4px 9px;
    border: 1px solid #3a4250;
    border-radius: 6px;
    background: #262c35;
    color: #d7dde6;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.hpcjob-essential > button.copy-cb:hover { background: #333b47; }

/* ── Run panel: simulated time, time step, energies and load per MPI rank (hpcjob.run.js) ── */
.hpcjob-run:not(:empty) {
    flex: 0 0 auto;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
}
.hpcjob-run-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 10px; }
.hpcjob-run-head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #66809a; }
.hpcjob-run-stats { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.hpcjob-run-stat span { display: block; font-size: 11px; color: #888; }
.hpcjob-run-stat strong { font-size: 15px; font-weight: 700; color: #222; }
.hpcjob-run-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hpcjob-run-chart h4,
.hpcjob-run-cores h4,
.hpcjob-run-ranks h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: #555; }
.hpcjob-run-cores h4 small,
.hpcjob-run-ranks h4 small { margin-left: 6px; font-size: 11px; font-weight: 500; color: #7c8a9a; }
.hpcjob-run-stale { color: #d46b08; }
.hpcjob-run-svg { display: block; max-width: 100%; }
.hpcjob-run-line { fill: none; stroke-width: 1.6px; }
.hpcjob-run-axis text { font-size: 10px; fill: #7c8a9a; }
.hpcjob-run-axis path,
.hpcjob-run-axis line { stroke: #cfd6de; }
.hpcjob-run-key { margin-left: 8px; font-weight: 500; color: #555; white-space: nowrap; }
.hpcjob-run-key::before { content: ""; display: inline-block; width: 10px; height: 2px; margin-right: 4px; vertical-align: middle; background: var(--key-c); }
.hpcjob-run-cores,
.hpcjob-run-ranks { margin-top: 12px; }
.hpcjob-run-cores:empty,
.hpcjob-run-ranks:empty { display: none; }
.hpcjob-run-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 3px; }
.hpcjob-run-cell { display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 4px; font-size: 10px; cursor: default; }
.hpcjob-run-empty { padding: 6px 0; font-size: 12px; color: #999; }

.hpcjob-main {
    flex: 1 1 auto;
    min-height: 520px;                 /* the floor; below it the detail body scrolls instead of squeezing the log */
    max-height: calc(100vh - 240px);   /* a surface with no bounded height (the modal) still gets inner scrollers */
    display: flex;
    gap: 12px;
}
.hpcjob-main > .hpcjob-detail-section { margin-bottom: 0; }

/* ── Logs: the left 70%, its own scroller with a line-number gutter ──────── */
.hpcjob-detail-section.hpcjob-logs {
    flex: 0 0 70%;
    min-width: 0;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.hpcjob-logs-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #e3e8ee;
}
.hpcjob-logs-head > h3 { margin: 0; flex: 0 0 auto; }

.hpcjob-log-search-wrap { position: relative; flex: 0 1 280px; }
.hpcjob-log-search-wrap > i {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #8595a8;
    pointer-events: none;
}
input.hpcjob-log-search {
    width: 100%;
    height: 28px;
    padding: 0 10px 0 26px;
    border: 1px solid #dde3ea;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    color: #2b3644;
}
input.hpcjob-log-search:focus { outline: none; border-color: #9dc0ea; }

.hpcjob-log-count { font-size: 11px; color: #7c8a9a; margin-left: auto; }
.hpcjob-log-state { font-size: 11px; font-weight: 600; color: #227a4b; }
.hpcjob-log-state i { font-size: 7px; vertical-align: middle; margin-right: 3px; }

.hpcjob-log-source {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: 7px;
    background: #eef1f5;
}
.hpcjob-log-source > button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #5b6b7f;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.hpcjob-log-source > button.active { background: #fff; color: #2c5282; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hpcjob-log-source > button:disabled, .hpcjob-log-other > button:disabled { color: #b3bcc8; cursor: default; }
.hpcjob-log-other { position: relative; display: inline-block; }
.hpcjob-log-other > button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #5b6b7f;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.hpcjob-log-other > button.active { background: #fff; color: #2c5282; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.hpcjob-log-other > button i { font-size: 10px; margin-left: 2px; }
.hpcjob-log-other-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    padding: 4px;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.hpcjob-log-other.open > .hpcjob-log-other-menu { display: block; }
.hpcjob-log-other-head { padding: 4px 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8595a8; }
.hpcjob-log-other-menu > button {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    background: none;
    color: #2b3644;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.hpcjob-log-other-menu > button:hover { background: #f7f9fb; }
.hpcjob-log-other-menu > button > small { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #8595a8; }

/* a batch script: directives, comments, environment, the lucy call, strings */
.hpcjob-log-line.sh-dir { color: #7fb3ff; font-weight: 600; }
.hpcjob-log-line.sh-cmt { color: #6f7a88; }
.hpcjob-log-line.sh-exp { color: #c7a4ff; }
.hpcjob-log-line.sh-lucy { color: #7ee2a8; }
.hpcjob-log-line .sh-str { color: #ffbd7a; }

/* virtualised: the spacer is every line tall, the window holds the rows in view */
.hpcjob-log-stream {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #1b1f26;             /* a terminal: dark ground, light text */
    color: #d7dde6;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    line-height: 18px;
}
.hpcjob-log-stream::-webkit-scrollbar-thumb { background: #4a5260; border-color: #1b1f26; }
.hpcjob-log-stream::-webkit-scrollbar-thumb:hover { background: #5d6675; }
.hpcjob-log-spacer { position: relative; }
.hpcjob-log-window { position: absolute; left: 0; right: 0; }
.hpcjob-log-line {
    display: flex;
    height: 18px;
    padding: 0 12px 0 0;
    white-space: pre;
    color: #d7dde6;
}
.hpcjob-log-ln {
    flex: 0 0 62px;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #2c323c;
    text-align: right;
    color: #5f6875;
    user-select: none;
}
.hpcjob-log-line.lvl-warn { background: #2e2716; color: #f2c46d; }
.hpcjob-log-line.lvl-error { background: #331d1f; color: #ff8a80; }
.hpcjob-log-line.lvl-warn .hpcjob-log-ln, .hpcjob-log-line.lvl-error .hpcjob-log-ln { color: inherit; opacity: .55; }
.hpcjob-log-line.is-loading { color: #5f6875; }
@keyframes hpcjob-log-flash { 0%, 40% { background: #8a6d1f; } 100% { background: #4a3c14; } }
.hpcjob-log-line.is-hit { background: #4a3c14; color: #fff; animation: hpcjob-log-flash 1.6s ease-out; }
@keyframes hpcjob-log-new { 0%, 40% { background: #234a7a; } 100% { background: transparent; } }
.hpcjob-log-line.is-new { animation: hpcjob-log-new 1.8s ease-out; }

.hpcjob-log-nav { display: inline-flex; margin-left: auto; gap: 2px; }
.hpcjob-log-nav > button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #dde3ea;
    border-radius: 5px;
    background: #fff;
    color: #5b6b7f;
    font-size: 12px;
    cursor: pointer;
}
.hpcjob-log-nav > button:hover { color: #2c5282; border-color: #9dc0ea; }
.hpcjob-log-count { margin-left: 0; }

.hpcjob-log-note {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 12px;
    border-bottom: 1px solid #2c323c;
    background: #22272f;
    color: #9aa5b3;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
}

/* ── Side column: status history, trace, then the three info groups ──────── */
.hpcjob-detail-section.hpcjob-side {
    flex: 1 1 30%;
    min-width: 0;
    padding: 0;
    overflow-y: auto;
}
.hpcjob-side-head {
    padding: 10px 14px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #66809a;
}
.hpcjob-side-head small { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #7c8a9a; }

.hpcjob-stage-pie { display: flex; justify-content: center; padding: 2px 0 8px; }
.hpcjob-stage-pie:empty { display: none; }
.hpcjob-stage-pie path { cursor: pointer; stroke: #fff; stroke-width: 1px; transition: opacity .15s ease; }
.hpcjob-stage-pie path.dim { opacity: .3; }
.hpcjob-stage-pie path.active { stroke: #1f2a37; stroke-width: 2px; }

/* the trace: a rail down the left, a dot per stage that fills with the
   stage's colour once the stream reaches it, and its details right below */
.hpcjob-trace {
    position: relative;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px 0 10px;
    border-top: 1px solid #e3e8ee;
    border-bottom: 1px solid #e3e8ee;
}
.hpcjob-trace-rail { position: absolute; left: 99px; top: 0; bottom: 0; width: 2px; background: #e3e8ee; }
.hpcjob-trace-fill { position: absolute; left: 99px; top: 0; width: 2px; height: 0; background: #2b6cb0; transition: height .12s; }
button.hpcjob-stage {
    position: relative;
    display: grid;
    grid-template-columns: 82px 34px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    padding: 5px 14px 5px 0;
    border: none;
    background: transparent;
    text-align: left;
    color: #2b3644;
    cursor: pointer;
}
button.hpcjob-stage:hover { background: #f7f9fb; }
.hpcjob-stage-t { font-family: Menlo, Monaco, Consolas, monospace; font-size: 10.5px; color: #8595a8; text-align: right; }
.hpcjob-stage-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-left: 12px;
    border-radius: 50%;
    border: 2px solid #dde3ea;
    background: #fff;
    transition: background .12s;
}
.hpcjob-stage.past .hpcjob-stage-dot, .hpcjob-stage.here .hpcjob-stage-dot { background: var(--stage-c); border-color: var(--stage-c); }
.hpcjob-stage-name { font-size: 12.5px; font-weight: 500; color: #7c8a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpcjob-stage.past .hpcjob-stage-name { color: #2b3644; }
.hpcjob-stage.here .hpcjob-stage-name { color: #2b6cb0; font-weight: 700; }
.hpcjob-stage-meta { float: right; font-family: Menlo, Monaco, Consolas, monospace; font-size: 10.5px; font-weight: 400; color: #8595a8; }
.hpcjob-stage-detail {
    display: none;
    margin: 0 14px 6px 116px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f3f7fc;
    font-size: 11px;
    color: #2b3644;
}
.hpcjob-stage-detail.open { display: block; }
.hpcjob-stage-detail > div { display: flex; gap: 8px; line-height: 1.6; }
.hpcjob-stage-detail > div > span { flex: 0 0 52px; color: #66809a; font-weight: 600; }
.hpcjob-stage-detail em { font-style: normal; color: #2b6cb0; }

.hpcjob-group { padding: 12px 14px; }
.hpcjob-group + .hpcjob-group { border-top: 1px solid #e3e8ee; }
.hpcjob-group > h3 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #66809a;
}
.hpcjob-group .hpcjob-detail-grid { grid-template-columns: 118px minmax(0, 1fr); row-gap: 4px; }
.hpcjob-group .hpcjob-detail-grid dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpcjob-group .hpcjob-detail-grid dd:hover { white-space: normal; }
.hpcjob-err { color: #b03a3a; font-weight: 700; }
.hpcjob-warn { color: #9a5b0f; font-weight: 700; }

@media (max-width: 900px) {
    .hpcjob-detail { height: auto; }
    .hpcjob-main { flex-direction: column; min-height: 0; max-height: none; }
    .hpcjob-detail-section.hpcjob-logs { flex: 0 0 70vh; }
    .hpcjob-detail-section.hpcjob-side { flex: 0 0 auto; overflow: visible; }
    .hpcjob-essentials { grid-template-columns: 1fr; }
}

/* /stylesheets/spa/hpcjobs_v2.css */
.v2-shell { --v2-drawer-w: 320px; display: grid; grid-template-columns: 40px 0 1fr; grid-template-rows: auto 1fr auto; min-height: 800px; background: #fff; border-radius: 0 0 6px 6px; border: 1px solid #e0e0e0; border-top: none; position: relative; }
.v2-shell.v2-drawer-open { grid-template-columns: 40px var(--v2-drawer-w) 1fr; }
.v2-shell-rail-left { grid-column: 1; grid-row: 1 / span 3; background: #fafbfc; border-right: 1px solid #e8e8e8; padding: 6px 0; display: flex; flex-direction: column; align-items: stretch; }
.v2-shell-drawer { grid-column: 2; grid-row: 1 / span 3; background: #fff; border-right: 1px solid #d0d0d0; overflow-y: auto; overflow-x: hidden; position: relative; display: none; }
.v2-shell.v2-drawer-open .v2-shell-drawer { display: block; }
.v2-drawer-resize-handle { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.v2-drawer-resize-handle:hover { background: rgba(44, 82, 130, 0.18); }
.v2-rail-ico { width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; color: #888; cursor: pointer; font-size: 14px; transition: background 0.15s ease, color 0.15s ease; }
.v2-rail-ico:hover { background: #eef2f7; color: #555; }
.v2-rail-ico.v2-rail-active { color: #2c5282; background: #e8f0fe; border-left: 3px solid #2c5282; }
.v2-rail-divider { height: 1px; background: #e0e0e0; margin: 4px 6px; }
.v2-shell-main { grid-column: 3; grid-row: 1 / span 3; padding: 12px 14px; min-width: 0; overflow: hidden; }
body.v2-drawer-open-cols .v2-fallback-grid [data-col-priority="lo"] { display: none; }
@media (max-width: 1400px) {
    body.v2-drawer-open-cols .v2-fallback-grid [data-col-priority="md"] { display: none; }
}
.v2-grid-container .v2-fallback-grid { table-layout: auto; min-width: 100%; }
.v2-grid-container { overflow-x: auto; }
.v2-grid-container::-webkit-scrollbar { height: 8px; }
.v2-grid-container::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 4px; }
@media (max-width: 1200px) { .v2-shell { --v2-drawer-w: 280px; } }
@media (max-width: 1000px) { .v2-shell { --v2-drawer-w: 240px; } }
.v2-dual-range { background: linear-gradient(to right, #e5e7eb 0%, #2c5282 var(--v2-range-from, 0%), #2c5282 var(--v2-range-to, 100%), #e5e7eb 100%); border-radius: 2px; }
.v2-dual-range input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; outline: none; pointer-events: none; height: 28px; }
.v2-dual-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #2c5282; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: grab; pointer-events: auto; }
.v2-dual-range input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #2c5282; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: grab; pointer-events: auto; }
.v2-dual-range input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.v2-dual-range input[type=range]::-moz-range-track { background: transparent; height: 4px; }
.v2-rail-ico { position: relative; }
.v2-rail-ico[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: 44px; top: 50%; transform: translateY(-50%); background: #1f2933; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 200; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.v2-rail-ico[data-tooltip]:hover::before { content: ''; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-right-color: #1f2933; z-index: 200; pointer-events: none; }
.v2-add-filter-inline { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
.v2-add-filter-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 10px; color: #2c5282; background: #fff; border: 1px dashed #b0c2db; border-radius: 11px; cursor: pointer; }
.v2-add-filter-pill:hover { background: #e8f0fe; border-style: solid; }
.v2-add-filter-pill i { color: #888; }
.v2-status-pill { display: inline-block; padding: 3px 9px; font-size: 10px; color: #555; background: #f0f0f0; border: 1px solid transparent; border-radius: 11px; cursor: pointer; user-select: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.v2-status-pill:hover { background: #e0e6f0; }
.v2-status-pill.v2-pill-on { background: #2c5282; color: #fff; border-color: #1f3a60; }
.v2-active-filter-chip { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 10px; color: #2c5282; background: #e8f0fe; border: 1px solid #c2d2eb; border-radius: 11px; }
.v2-active-filter-chip-x:hover { color: #a33 !important; }
.v2-add-filter-menu-item:hover { background: #f0f4fa; }
.hfp-add-pill:hover { background: #f0f4fa !important; }
.hfp-add-pill:last-child { border-bottom: none !important; }
.v2-shell-inspector { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 460px; max-width: 92vw; background: #f8f9fc; border-left: 1px solid #d0d0d0; box-shadow: -8px 0 24px rgba(0,0,0,0.18); display: flex; flex-direction: column; overflow: hidden; z-index: 1050; transform: translateX(100%); transition: transform 0.22s ease-out; }
body.v2-inspector-open .v2-shell-inspector { transform: translateX(0); }
.v2-inspector-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.18); z-index: 1040; }
body.v2-inspector-open .v2-inspector-backdrop { display: block; }
.v2-inspector-host { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.v2-inspector-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.v2-inspector { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1 1 auto; }
.v2-inspector-close-floating { position: absolute; top: 10px; right: 12px; z-index: 1060; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #d0d0d0; color: #555; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.v2-inspector-close-floating:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

.v2-rail-left { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.v2-rail-ico { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #888; cursor: pointer; font-size: 12px; }
.v2-rail-ico:hover { background: #f0f0f0; color: #2c5282; }
.v2-rail-ico.v2-rail-active { background: #2c5282; color: #fff; }
.v2-rail-divider { width: 16px; height: 1px; background: #d0d0d0; margin: 4px 0; }

.v2-title-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #f0f0f0; }
.v2-title { margin: 0; font-size: 14px; font-weight: 600; }
.v2-title-spacer { flex: 1; }
.v2-scope-switcher { display: inline-flex; background: #f0f0f0; border-radius: 5px; padding: 2px; gap: 2px; }
.v2-scope-btn { border: none; padding: 3px 9px; font-size: 10px; border-radius: 3px; background: transparent; color: #888; cursor: pointer; font-weight: 600; }
.v2-scope-btn.active { background: #2c5282; color: #fff; }
.v2-scope-btn.disabled { color: #ccc; cursor: not-allowed; }
.v2-scope-count { background: rgba(0,0,0,0.08); padding: 0 5px; border-radius: 8px; font-size: 9px; font-weight: 700; margin-left: 4px; }
.v2-scope-btn.active .v2-scope-count { background: rgba(255,255,255,0.3); }
.v2-range-toggle { display: inline-flex; gap: 1px; background: #f0f0f0; border-radius: 5px; padding: 2px; }
.v2-range-btn { border: none; padding: 3px 8px; font-size: 10px; border-radius: 3px; background: transparent; color: #888; cursor: pointer; font-weight: 600; }
.v2-range-btn.active { background: #fff; color: #2c5282; }
.v2-submit-btn { background: #2c5282; color: #fff; border: none; padding: 5px 12px; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; }

.v2-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; }
.v2-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.v2-panel-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 9px; }
.v2-panel-title { font-weight: 600; }
.v2-panel-scope { margin-left: auto; font-size: 8px; color: #888; text-transform: none; font-weight: normal; }
.v2-panel-spacer { flex: 1; }
.v2-ic-b { background: #e0ecf8; color: #2c5282; }
.v2-ic-g { background: #d4edda; color: #155724; }
.v2-ic-a { background: #fef3cd; color: #856404; }
.v2-ic-p { background: #e8daef; color: #6c3483; }
.v2-ic-r { background: #fde2e4; color: #8a2c4a; }

.v2-summary-collapsed { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 8px; font-size: 12px; background: #f8f9fc; cursor: pointer; }
.v2-summary-collapsed-icon { color: #2c5282; }
.v2-summary-collapsed-count { color: #222; }
.v2-summary-collapsed-hint { color: #888; }
.v2-summary-collapsed-spacer { flex: 1; }
.v2-summary-collapsed-toggle { font-size: 11px; color: #2c5282; font-weight: 600; }
.v2-summary-collapse { margin-left: 6px; color: #888; cursor: pointer; font-size: 11px; }

.v2-row-50 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.v2-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v2-stat { background: #fafbfc; border: 1px solid #f0f0f0; border-radius: 6px; padding: 7px 10px; }
.v2-stat-lab { font-size: 8px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.v2-stat-val { font-size: 16px; color: #222; font-weight: 700; margin-top: 1px; }
.v2-stat-sub { font-size: 9px; color: #888; }
.v2-stat-cost { border-left: 2px solid #2c5282; background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%); }
.v2-stat-anom { border-left: 2px solid #d46b08; }
.v2-warn { color: #d46b08; }
.v2-ok { color: #155724; }

.v2-qr-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 2px 0; font-size: 10px; }
.v2-qr-lbl { color: #888; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: 0.3px; min-width: 64px; }
.v2-qr-pill { padding: 1px 7px 1px 2px; border-radius: 10px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.v2-qr-pill-dot { width: 14px; height: 14px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; }
.v2-qr-pill-n { background: rgba(0,0,0,0.1); padding: 0 4px; border-radius: 6px; font-size: 9px; }
.v2-qr-lic { background: #f5f5f5; border: 1px solid #e0e0e0; color: #333; padding: 1px 6px; border-radius: 8px; font-size: 10px; }
.v2-qr-lic strong { color: #2c5282; }
.v2-qr-lic.dim { color: #888; border-color: #f0f0f0; }
.v2-qr-more { font-size: 9px; color: #888; cursor: pointer; }
.v2-new-marker { background: #fff7c4; padding: 1px 6px; border-radius: 3px; color: #856404; font-weight: 600; font-size: 9px; }

.v2-filters { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 7px 12px; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.v2-filters-search { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #888; flex: 1; min-width: 180px; }
.v2-chip { background: #e0ecf8; color: #2c5282; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.v2-chip-locked { background: #2c5282; color: #fff; }
.v2-chip-x { color: #999; cursor: pointer; }
.v2-chip-add { background: #fff; border: 1px dashed #ccc; color: #888; padding: 2px 8px; border-radius: 10px; font-size: 10px; cursor: pointer; }

.v2-filter-menu { position: absolute; z-index: 9999; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 180px; max-height: 320px; overflow-y: auto; padding: 4px 0; }
.v2-filter-menu-item { padding: 6px 14px; font-size: 11px; cursor: pointer; color: #333; white-space: nowrap; }
.v2-filter-menu-item:hover { background: #f0f5ff; color: #2c5282; }

.v2-bulk-bar { background: #2c5282; color: #fff; padding: 6px 12px; border-radius: 0 8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 11px; min-height: 28px; box-sizing: border-box; box-shadow: 0 1px 0 #1f3a60 inset; }
.v2-fallback-grid.v2-has-selection thead th { background: #2c5282 !important; color: #fff !important; }
.v2-fallback-grid.v2-has-selection thead th input[type="checkbox"] { accent-color: #fff; }
.v2-bulk-bar .v2-bulk-btn { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.28); padding: 3px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.v2-bulk-bar .v2-bulk-btn:hover { background: rgba(255,255,255,0.28); }
.v2-bulk-bar .v2-bulk-source { color: rgba(255,255,255,0.65); font-size: 10px; margin-left: auto; }
.v2-bulk-btn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 3px 9px; border-radius: 4px; font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.v2-bulk-btn:hover { background: rgba(255,255,255,0.3); }
.v2-bulk-source { font-size: 9px; opacity: 0.7; margin-left: auto; background: rgba(255,255,255,0.15); padding: 1px 6px; border-radius: 8px; }

.v2-row-action { background: none; border: none; color: #888; cursor: pointer; padding: 1px 4px; font-size: 11px; }
.v2-row-action:hover { color: #2c5282; }
.v2-row-more { color: #2c5282; }

.v2-inspector-head { background: #2c5282; color: #fff; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.v2-inspector-title { }
.v2-inspector-jobid { font-size: 9px; background: rgba(255,255,255,0.2); padding: 1px 5px; border-radius: 8px; font-weight: normal; }
.v2-inspector-spacer { flex: 1; }
.v2-inspector-icobtn { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 3px 7px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.v2-inspector-body { padding: 12px 14px; overflow-y: auto; overflow-x: hidden; font-size: 11px; flex: 1 1 auto; min-height: 0; }
.v2-inspector-head { position: sticky; top: 0; z-index: 2; }
.v2-inspector-jobmeta { font-size: 10px; color: #888; }
.v2-inspector-jobname { font-size: 13px; font-weight: 700; color: #222; line-height: 1.3; margin-top: 2px; word-break: break-all; }
.v2-inspector-status { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 9px; text-transform: uppercase; font-weight: 600; background: #d4edda; color: #155724; margin-top: 4px; }
.v2-status-failed { background: #f8d7da; color: #721c24; }
.v2-status-solving { background: #d1ecf1; color: #0c5460; }
.v2-status-queued { background: #fef3cd; color: #856404; }
.v2-inspector-section { margin-top: 12px; }
.v2-inspector-section-head { font-size: 8px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.v2-inspector-coltag { background: #fff; color: #6c3483; padding: 0 4px; border-radius: 3px; font-size: 8px; font-family: Menlo, Consolas, monospace; font-weight: 600; }
.v2-inspector-code { background: #1e1e1e; color: #d4d4d4; padding: 7px 9px; border-radius: 4px; font-family: Menlo, Consolas, monospace; font-size: 9px; line-height: 1.4; overflow-x: auto; margin: 0; }
.v2-inspector-kv { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; }
.v2-inspector-kv table { width: 100%; font-size: 10px; border-collapse: collapse; }
.v2-inspector-kv td { padding: 3px 7px; border-bottom: 1px solid #f5f5f5; }
.v2-inspector-kv td:first-child { color: #888; width: 130px; }
.v2-inspector-kv td:last-child { color: #222; font-family: Menlo, Consolas, monospace; font-size: 10px; }
.v2-inspector-kv tr:last-child td { border-bottom: none; }
.v2-inspector-timeline { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 9px; font-size: 10px; }
.v2-inspector-t-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.v2-inspector-t-dot { color: #155724; }
.v2-inspector-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 10px; border-top: 1px solid #e0e0e0; }
.v2-inspector-action { background: #fff; color: #2c5282; border: 1px solid #2c5282; padding: 3px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; font-weight: 600; }

.v2-row-active { background: #fff7c4 !important; }
.v2-row-active td { font-weight: 600; }
.v2-fallback-grid tbody tr { cursor: pointer; }
.v2-fallback-grid tbody tr:hover { background: #f5f9ff; }
.v2-code-placeholder { color: #666; font-style: italic; }

.v2-context-menu { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); min-width: 200px; max-width: 280px; padding: 6px 0; z-index: 1100; font-size: 12px; }
.v2-context-menu-heading { padding: 4px 14px 6px 14px; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
.v2-context-menu-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
.v2-context-menu-item { display: flex; align-items: center; gap: 9px; padding: 6px 14px; cursor: pointer; color: #333; }
.v2-context-menu-item:hover { background: #f0f5ff; color: #2c5282; }
.v2-context-menu-item.v2-context-menu-disabled { color: #ccc; cursor: not-allowed; }
.v2-context-menu-item.v2-context-menu-disabled:hover { background: transparent; color: #ccc; }
.v2-context-menu-item i { width: 14px; text-align: center; font-size: 11px; }

.v2-filter-popover { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); min-width: 220px; max-width: 320px; padding: 8px; z-index: 1100; font-size: 11px; }
.v2-filter-popover-head { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; padding: 2px 4px 6px 4px; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; }
.v2-filter-popover-input { width: 100%; border: 1px solid #d0d0d0; border-radius: 5px; padding: 5px 8px; font-size: 11px; }
.v2-filter-popover-actions { display: flex; gap: 6px; margin-top: 6px; }
.v2-filter-popover-actions button { padding: 3px 10px; font-size: 11px; border-radius: 4px; border: 1px solid #d0d0d0; background: #fff; cursor: pointer; }
.v2-filter-popover-actions .v2-filter-popover-apply { background: #2c5282; color: #fff; border-color: #2c5282; }
.v2-filter-popover-options { max-height: 240px; overflow-y: auto; }
.v2-filter-popover-option { padding: 5px 9px; cursor: pointer; border-radius: 4px; }
.v2-filter-popover-option:hover { background: #f0f5ff; color: #2c5282; }
.v2-filter-popover-suggestions { max-height: 240px; overflow-y: auto; margin-top: 6px; }
.v2-filter-popover-suggestion { padding: 5px 9px; cursor: pointer; border-radius: 4px; font-size: 11px; }
.v2-filter-popover-suggestion:hover { background: #f0f5ff; color: #2c5282; }
.v2-filter-popover-no-results { padding: 6px 9px; color: #888; font-style: italic; font-size: 10px; }

/* ── HPC Inspector: Diagnostics banner ───────────────────────────────────── */
.v2-inspector-diag { border-radius: 6px; margin-top: 12px; overflow: hidden; }
.v2-inspector-diag-head { display: flex; align-items: center; gap: 6px; padding: 7px 11px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.v2-inspector-diag-body { padding: 8px 11px; font-size: 11px; line-height: 1.6; }
.v2-diag-line { display: block; }
.v2-diag-msg { margin-top: 4px; word-break: break-word; }

/* error severity: red */
.v2-inspector-diag-error { border: 1px solid #f5c6cb; background: #fef6f7; }
.v2-inspector-diag-error .v2-inspector-diag-head { background: #f8d7da; color: #721c24; }
.v2-inspector-diag-error .v2-inspector-diag-body { color: #721c24; }

/* warn severity: amber */
.v2-inspector-diag-warn { border: 1px solid #ffc107; background: #fffdf0; }
.v2-inspector-diag-warn .v2-inspector-diag-head { background: #fef3cd; color: #856404; }
.v2-inspector-diag-warn .v2-inspector-diag-body { color: #856404; }

/* info severity: blue */
.v2-inspector-diag-info { border: 1px solid #bee5eb; background: #f0fafc; }
.v2-inspector-diag-info .v2-inspector-diag-head { background: #d1ecf1; color: #0c5460; }
.v2-inspector-diag-info .v2-inspector-diag-body { color: #0c5460; }

/* /stylesheets/helpers/filter.panel.css */
.hfp-status-pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
    background: #f0f0f0;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    opacity: 0.55;
}
.hfp-status-pill:hover { opacity: 0.85; }
.hfp-status-pill.hfp-pill-on { opacity: 1; box-shadow: 0 0 0 2px rgba(44,82,130,0.55); }

.hfp-status-pill[data-value="finished"],
.hfp-status-pill[data-value="completed"],
.hfp-status-pill[data-value="released"],
.hfp-status-pill[data-value="success"] { background: #d4edda; color: #155724; }

.hfp-status-pill[data-value="solving"],
.hfp-status-pill[data-value="running"],
.hfp-status-pill[data-value="active"],
.hfp-status-pill[data-value="pre-solving"],
.hfp-status-pill[data-value="post-processing"],
.hfp-status-pill[data-value="executing"],
.hfp-status-pill[data-value="posting"] { background: #d1ecf1; color: #0c5460; }

.hfp-status-pill[data-value="queued"],
.hfp-status-pill[data-value="waiting"],
.hfp-status-pill[data-value="pending"],
.hfp-status-pill[data-value="new"],
.hfp-status-pill[data-value="submitted"],
.hfp-status-pill[data-value="simlyzing"],
.hfp-status-pill[data-value="publishing"] { background: #fff3cd; color: #856404; }

.hfp-status-pill[data-value="failed"],
.hfp-status-pill[data-value="failed_to_submit"],
.hfp-status-pill[data-value="aborted"],
.hfp-status-pill[data-value="dequeued"],
.hfp-status-pill[data-value="hung"],
.hfp-status-pill[data-value="error"] { background: #f8d7da; color: #721c24; }

.hfp-status-pill[data-value="held"],
.hfp-status-pill[data-value="held_back"] { background: #e8e0f0; color: #6a4c93; }

.hfp-status-pill[data-value="stopped"],
.hfp-status-pill[data-value="cancelled"],
.hfp-status-pill[data-value="canceled"],
.hfp-status-pill[data-value="killed"] { background: #f0f0f0; color: #555; }

.hfp-rp-box { border: 1px solid #d8dee6; border-radius: 6px; padding: 8px; background: #fff; min-width: 220px; }
.hfp-rp-srow { position: relative; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.hfp-rp-srow > i.fa-search { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #7a869a; font-size: 10px; z-index: 1; pointer-events: none; }
.hfp-rp-search { flex: 1; padding: 5px 8px 5px 24px; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 11px; box-sizing: border-box; min-width: 0; }
.hfp-rp-scope-toggle { background: #fff; border: 1px solid #d0d0d0; border-radius: 4px; padding: 5px 8px; cursor: pointer; color: #7a869a; font-size: 11px; line-height: 1; flex-shrink: 0; }
.hfp-rp-scope-toggle:hover { background: #f0f4fa; color: #2c5282; }
.hfp-rp-scope-toggle.on { background: #e0ecf8; color: #2c5282; border-color: #4c9aff; }
.hfp-rp-scope-toggle[hidden] { display: none; }
.hfp-rp-local { width: 100%; padding: 4px 8px; border: 1px solid #e2e6ea; border-radius: 4px; font-size: 10px; box-sizing: border-box; margin-bottom: 6px; color: #555; }
.hfp-rp-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.hfp-rp-opt { display: flex; align-items: center; gap: 7px; padding: 5px 7px; font-size: 11px; color: #333; cursor: pointer; border-radius: 4px; }
.hfp-rp-opt:hover { background: #f0f4fa; }
.hfp-rp-opt.hfp-rp-sel { background: #e0ecf8; color: #2c5282; font-weight: 600; }
.hfp-rp-empty { padding: 8px; color: #aaa; font-style: italic; font-size: 11px; }
.hfp-rp-load { padding: 8px 7px; color: #2c5282; cursor: pointer; font-size: 11px; }
.hfp-rp-load:hover { background: #f0f4fa; }
.hfp-rp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid #eef1f4; }
.hfp-rp-count { font-size: 10px; color: #94a3b8; }
.hfp-rp-more { font-size: 10px; border: 1px solid #cfd6e0; background: #fff; color: #2c5282; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.hfp-rp-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef1f4; }
.hfp-rp-clear { font-size: 11px; color: #6b7280; cursor: pointer; }
.hfp-rp-clear:hover { color: #a33; }
.hfp-rp-apply { font-size: 11px; background: #2c5282; color: #fff; border: none; border-radius: 4px; padding: 4px 14px; cursor: pointer; font-weight: 600; }
.hfp-rp-apply:hover { background: #244569; }
.hfp-add-pill { transition: background 0.12s ease; }
.hfp-add-pill:hover { background: #f0f4fa !important; }
.hfp-active-chip { display: inline-flex; align-items: center; padding: 3px 8px; font-size: 10px; color: #2c5282; background: #e8f0fe; border: 1px solid #c2d2eb; border-radius: 11px; }
.hfp-active-chip-x:hover { color: #a33 !important; }

/* ─────────────────────────────────────────────────────────────
   Recent searches popover (opens on NL input focus when the host
   passed opts.recentKey to FilterPanel).
   ───────────────────────────────────────────────────────────── */
.hfp-recent-pop {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    font: 12.5px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2328;
    overflow: hidden;
}
.hfp-recent-pop .hfp-recent-hd {
    padding: 8px 12px 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #94a3b8;
}
.hfp-recent-pop .hfp-recent-list { max-height: 320px; overflow-y: auto; }
.hfp-recent-pop .hfp-recent-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.1s;
}
.hfp-recent-pop .hfp-recent-item:hover { background: #f3f4f6; }
.hfp-recent-pop .hfp-recent-item .fa { color: #94a3b8; font-size: 11px; flex: 0 0 auto; }
.hfp-recent-pop .hfp-recent-q {
    flex: 1; color: #1f2328;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hfp-recent-pop .hfp-recent-x {
    color: #cbd5e1; font-size: 16px; line-height: 1; padding: 0 4px;
    text-decoration: none; cursor: pointer;
    opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.hfp-recent-pop .hfp-recent-item:hover .hfp-recent-x { opacity: 1; }
.hfp-recent-pop .hfp-recent-x:hover { color: #b91c1c; }
.hfp-recent-pop .hfp-recent-ft {
    padding: 6px 12px;
    border-top: 1px solid #f1f3f5;
    background: #fafbfc;
}
.hfp-recent-pop .hfp-recent-clear {
    font-size: 11px; color: #6b7280;
    display: inline-flex; align-items: center; gap: 5px;
    cursor: pointer; text-decoration: none;
}
.hfp-recent-pop .hfp-recent-clear:hover { color: #b91c1c; text-decoration: none; }

/* /stylesheets/spa/projects.css */
/* ==========================================================================
   Projects Page — Modern Card UI
   ========================================================================== */

@keyframes projectsFadeIn {
    from { transform: translateY(6px); }
    to   { transform: translateY(0); }
}

@keyframes projectsShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Page Layout ---------- */

.projects-page {
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
}

.projects-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;
}

.projects-page-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.projects-page-header h1 i {
    font-size: 18px;
    color: #2c5282;
}

.projects-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: linear-gradient(135deg, #2c5282, #2b6cb0);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none !important;
    white-space: nowrap;
}

.projects-create-btn:hover,
.projects-create-btn:focus,
.projects-create-btn:visited {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.3);
    color: #fff !important;
    text-decoration: none !important;
}

.projects-create-btn:active {
    transform: translateY(0);
}

/* ---------- Toolbar / Filter Bar ---------- */

.projects-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin-bottom: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.projects-search-wrap {
    position: relative;
    flex: 0 0 240px;
}

.projects-search-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 13px;
}

.projects-search-wrap input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

.projects-search-wrap input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}

.projects-limit-select {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    outline: none;
}

.projects-view-togglers {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 2px;
}

.projects-view-togglers .view-toggler {
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.projects-view-togglers .view-toggler.active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.projects-view-togglers .view-toggler:hover:not(.active) {
    color: #333;
}

.projects-pagination {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
}

.projects-pagination .pagenav {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.projects-pagination .pagenav:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.projects-pagination input[type="number"] {
    width: 44px;
    text-align: center;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.projects-pagination input[type="number"]:focus {
    border-color: #2c5282;
}

.projects-pagination .page-of {
    color: #999;
    font-size: 12px;
}

/* ---------- Sort Dropdown ---------- */

.projects-sort-wrap {
    position: relative;
}

.projects-sort-select {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    outline: none;
}

/* ---------- Card Grid ---------- */

.projects-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    min-height: 200px;
    align-items: start;
}

/* ---------- Project Card ---------- */

.project-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    animation: projectsFadeIn 0.25s ease both;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    border-color: #c0c0c0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.project-card:hover .project-card-actions {
    opacity: 1;
}

/* Card Header */
.project-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.project-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex: 0 0 40px;
}

/* Icon color variants — assigned based on first letter */
.project-card-icon.color-0 { background: #e0ecf8; color: #2c5282; }
.project-card-icon.color-1 { background: #e8daef; color: #6c3483; }
.project-card-icon.color-2 { background: #d4edda; color: #155724; }
.project-card-icon.color-3 { background: #fef3cd; color: #856404; }
.project-card-icon.color-4 { background: #d1ecf1; color: #0c5460; }
.project-card-icon.color-5 { background: #f8d7da; color: #721c24; }
.project-card-icon.color-6 { background: #e2e3e5; color: #383d41; }
.project-card-icon.color-7 { background: #fff3cd; color: #664d03; }

.project-card-title-area {
    flex: 1;
    min-width: 0;
}

.project-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card-code {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    color: #2c5282;
    background: #e0ecf8;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

/* Card Description */
.project-card-description {
    font-size: 13px;
    color: #666;
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 19px;
}

/* Card Tags */
.project-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.project-card-tag {
    font-size: 11px;
    color: #555;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Card Metadata Row */
.project-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #888;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.project-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-card-meta-item i {
    font-size: 12px;
    color: #aaa;
}

/* Card Actions (visible on hover) */
.project-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.project-card-actions .card-action-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.project-card-actions .card-action-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}

.project-card-actions .card-action-btn.action-delete:hover {
    background: #fef2f2;
    border-color: #e8a1a1;
    color: #c53030;
}

.project-card-actions .card-action-btn.action-bookmark.is-bookmarked {
    color: #d69e2e;
    border-color: #d69e2e;
    background: #fffff0;
}

/* Card Status Indicator */
.project-card-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.project-card-status.status-active  { background: #48bb78; }
.project-card-status.status-idle    { background: #ecc94b; }
.project-card-status.status-stale   { background: #cbd5e0; }

/* Shared Badge */
.project-card-shared-badge {
    font-size: 11px;
    color: #2c5282;
    background: #ebf4ff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Skeleton Loading ---------- */

.project-card-skeleton {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    animation: projectsFadeIn 0.25s ease both;
}

.project-skeleton-block {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: projectsShimmer 1.5s ease infinite;
    border-radius: 4px;
}

.project-skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.project-skeleton-title {
    height: 16px;
    width: 70%;
    margin-bottom: 8px;
}

.project-skeleton-desc {
    height: 12px;
    width: 90%;
    margin-bottom: 6px;
}

.project-skeleton-desc.short {
    width: 50%;
}

.project-skeleton-meta {
    height: 12px;
    width: 40%;
    margin-top: 14px;
}

/* ---------- Empty State ---------- */

.projects-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
    text-align: center;
    grid-column: 1 / -1;
}

.projects-empty-state i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
}

.projects-empty-state h3 {
    font-size: 18px;
    font-weight: 500;
    color: #666;
    margin: 0 0 8px 0;
}

.projects-empty-state p {
    font-size: 14px;
    color: #999;
    margin: 0 0 20px 0;
}

/* ---------- Bookmarked Section ---------- */

.projects-bookmarked-section {
    margin-bottom: 20px;
}

.projects-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.projects-section-label i {
    color: #d69e2e;
    font-size: 12px;
}

.projects-bookmarked-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.projects-bookmarked-row .project-card {
    flex: 0 0 300px;
    min-width: 300px;
}

/* ---------- Recent Projects Section ---------- */

.projects-recent-section {
    margin-bottom: 20px;
}

.projects-recent-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.projects-recent-row .project-card {
    flex: 0 0 280px;
    min-width: 280px;
}

/* ---------- All Projects Section ---------- */

.projects-all-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .projects-card-grid {
        grid-template-columns: 1fr;
    }

    .projects-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-search-wrap {
        flex: 1;
    }

    .projects-pagination {
        margin-left: 0;
        justify-content: center;
    }

    .projects-bookmarked-row .project-card,
    .projects-recent-row .project-card {
        flex: 0 0 260px;
        min-width: 260px;
    }
}

@media (max-width: 480px) {
    .projects-page {
        padding: 12px;
    }

    .project-card {
        padding: 12px;
    }
}

/* ---------- Newly Created Highlight ---------- */

@keyframes projectsHighlight {
    0%   { box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(44, 82, 130, 0); }
}

.project-card.newly_created {
    animation: projectsHighlight 1.5s ease;
}

/* ============================================================================
   Tree View Toolbar (DynamicTreeViz `.dtree-settings`)
   ----------------------------------------------------------------------------
   The tree view is a shared simlytiks viz; its toolbar ships raw bootstrap
   (.btn-default / .btn-primary / .form-control). Re-skin it to the projects
   design language — clean #ddd pills, a segmented orientation toggle, tidy
   selects — scoped to `#projects .treePane` so the shared viz is untouched
   everywhere else. Also hide the legend's ellipsis options menu
   (`.legend-container-options` → Select-all / Position), which isn't useful
   on the projects tree.
   ============================================================================ */

#projects .treePane .dtree-settings {
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
}

/* flat pill buttons: Reset zoom, Enable Selection, Clear Selection, export,
   fullscreen, Settings */
#projects .treePane .dtree-settings .btn {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    padding: 6px 10px;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#projects .treePane .dtree-settings .btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}
#projects .treePane .dtree-settings .btn:focus,
#projects .treePane .dtree-settings .btn:active {
    outline: none;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
#projects .treePane .dtree-settings .btn.disabled,
#projects .treePane .dtree-settings .btn:disabled {
    opacity: 0.5;
}

/* segmented orientation toggle (.btn-group[data-id="viewType"] H / V) — a pill
   group like the page's Cards/Tree toggler. Scoped to .btn-group so the Settings
   dropdown's <select data-id="viewType"> is NOT caught by this rule. */
#projects .treePane .dtree-settings .btn-group[data-id="viewType"] {
    display: inline-flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 2px;
}
#projects .treePane .dtree-settings .btn-group[data-id="viewType"] .btn {
    border: none;
    background: transparent;
    border-radius: 4px;
    color: #666;
    padding: 5px 11px;
    box-shadow: none;
}
#projects .treePane .dtree-settings .btn-group[data-id="viewType"] .btn:hover:not(.btn-primary) {
    background: #e8e8e8;
    color: #333;
}
#projects .treePane .dtree-settings .btn-group[data-id="viewType"] .btn.btn-primary,
#projects .treePane .dtree-settings .btn-group[data-id="viewType"] .btn.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* selects: viz-type switcher + the Settings-dropdown selects */
#projects .treePane .dtree-settings select.form-control,
#projects .treePane .dtree-settings .form-control.input-sm {
    height: auto;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #555;
    box-shadow: none;
}

/* the inline checkbox inside the Enable Selection button */
#projects .treePane .dtree-settings .canvas_selection .pl-checkbox {
    vertical-align: middle;
}

/* Settings dropdown body: soften the raw bootstrap panel */
#projects .treePane .dtree-settings .settings .dropdown-menu {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
#projects .treePane .dtree-settings .settings .dropdown-menu label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

/* hide the legend's ellipsis options menu (Select-all / Position) */
#projects .treePane .legend-container-options {
    display: none !important;
}

/* ============================================================================
   Create / Edit Project modal (.modalContainer.newProject)
   ----------------------------------------------------------------------------
   Modernize the project create/edit dialog (a shared GenericModalView): center
   it in the viewport, slim it to a dialog width, round + clean the chrome, and
   swap the raw bootstrap tabs / inputs / buttons for the projects design
   language. The dimming bug — the modal was trapped under the body-level
   .modal-backdrop because the frozen #main_container is a position:fixed
   stacking context — is fixed in projects/main.js + views.js (append to <body>).
   All rules are scoped to .modalContainer.newProject so the shared modal
   framework is untouched elsewhere.
   ============================================================================ */

/* center the dialog in the viewport (it stays draggable — jQuery UI offsets
   from this centered origin) */
.modalContainer.newProject .modal {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modalContainer.newProject .modal-dialog {
    width: 100% !important;       /* cap the inline width:70% so max-width wins */
    max-width: 720px;
    margin: 0;
    max-height: calc(100vh - 48px);
}
/* allow the fullscreen toggle to still expand fully (GenericModalView adds
   .modal-dialog-fullscreen) */
.modalContainer.newProject .modal-dialog.modal-dialog-fullscreen {
    max-width: none;
    max-height: none;
}
.modalContainer.newProject .modal:has(.modal-dialog-fullscreen) {
    display: block;
}

/* rounded, clean card */
.modalContainer.newProject .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* header */
.modalContainer.newProject .modal-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 16px 20px;
}
.modalContainer.newProject .modal-title-text {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}
/* window-chrome buttons (fullscreen / dock / close) → subtle icon buttons */
.modalContainer.newProject .modal-header-options .btn {
    background: transparent;
    border: none;
    color: #999;
    box-shadow: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.modalContainer.newProject .modal-header-options .btn:hover {
    background: #f0f0f0;
    color: #333;
}

/* body */
.modalContainer.newProject .modal-body {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* tabs → segmented pill toggle (.section-togglers = the .btn-group-justified) */
.modalContainer.newProject .section-togglers {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 18px;
}
.modalContainer.newProject .section-togglers .section-type-toggler {
    flex: 1 1 0;
    float: none;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
    transition: background 0.15s ease, color 0.15s ease;
}
.modalContainer.newProject .section-togglers .section-type-toggler:hover {
    color: #333;
}
.modalContainer.newProject .section-togglers .section-type-toggler.active,
.modalContainer.newProject .section-togglers .section-type-toggler.btn-primary {
    background: #fff !important;
    color: #2c5282 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* labels + inputs */
.modalContainer.newProject .modal-body label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
}
.modalContainer.newProject .modal-body input[type="text"],
.modalContainer.newProject .modal-body input[type="number"],
.modalContainer.newProject .modal-body textarea,
.modalContainer.newProject .modal-body select,
.modalContainer.newProject .modal-body .form-control {
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    padding: 8px 10px;
    box-shadow: none;
    background: #fff;
    color: #333;
}
.modalContainer.newProject .modal-body input:focus,
.modalContainer.newProject .modal-body textarea:focus,
.modalContainer.newProject .modal-body select:focus,
.modalContainer.newProject .modal-body .form-control:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
    outline: none;
}

/* footer + buttons (kill the bootstrap gradient/gloss) */
.modalContainer.newProject .modal-footer {
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 14px 20px;
}
.modalContainer.newProject .modal-footer .btn {
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.modalContainer.newProject .modal-footer .modal-ok,
.modalContainer.newProject .modal-footer .btn-primary {
    background: #2c5282;
    border: 1px solid #2c5282;
    color: #fff;
}
.modalContainer.newProject .modal-footer .modal-ok:hover,
.modalContainer.newProject .modal-footer .btn-primary:hover {
    background: #244468;
    border-color: #244468;
}
.modalContainer.newProject .modal-footer .btn-default {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
}
.modalContainer.newProject .modal-footer .btn-default:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* action buttons inside the Users tab (Add User / Clear all Users / Import CSV) */
.modalContainer.newProject .modal-body .btn {
    border-radius: 6px;
    font-weight: 600;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
}
.modalContainer.newProject .modal-body .add-user.btn-primary {
    background: #2c5282;
    border: 1px solid #2c5282;
    color: #fff;
}
.modalContainer.newProject .modal-body .add-user.btn-primary:hover {
    background: #244468;
    border-color: #244468;
}
.modalContainer.newProject .modal-body .remove-all-users.btn-danger {
    background: #c0392b;
    border: 1px solid #c0392b;
    color: #fff;
}
.modalContainer.newProject .modal-body .remove-all-users.btn-danger:hover {
    background: #a93226;
    border-color: #a93226;
}
/* Import CSV stays a light link (and drop the dropzone dashed border) */
.modalContainer.newProject .modal-body .import-users-csv,
.modalContainer.newProject .modal-body .import-users-csv.dz-clickable {
    border: none;
    background: transparent;
    color: #2c5282;
    padding: 0 4px;
}

/* required-field validation: asterisk on the label + inline error on submit */
.modalContainer.newProject .required-star {
    color: #c0392b;
    margin-left: 2px;
    font-weight: 700;
}
.modalContainer.newProject .field-invalid input,
.modalContainer.newProject .field-invalid textarea,
.modalContainer.newProject .field-invalid .form-control {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12);
}
.modalContainer.newProject .field-required-error {
    color: #c0392b;
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
}

/* /stylesheets/pedpro.css */
svg.PedPro {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
    overflow: hidden;
}
.x .axis {
    position: absolute;
    left: -800px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-anchor: end;
}

.y .axis {
    position: relative;
    left: -80px;
    text-anchor: end;
}

.row-label {
    font-size: 20px;
    font-weight: bold;
}

.pic-tip {
    fill: white;
    font-family: "Helvetica Neue";
    font-weight: 300;
    background: rgba(128,128,128,0.2);
    color: white;
    padding: 1px 1px 1px 1px;
    -moz-border-radius: 8px 8px;
    border-radius: 25px;
}

.main-tip {
    font-family: "Helvetica Neue";
    font-weight: 300;
    background: rgba(1,1,1,1);
    color: white;
}

.legend-text {
    font-family: "Helvetica Neue";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 16px;
    font-weight: bold;
    text-anchor: start;
}

.outer-bounding-box {
    fill: transparent;
}

.scatter-axis-label {
    font-size: 20px;
    font-weight: bold;
}

.plot-dot {
    fill: #428bca;
}

.l-text {
    font-size: 16px;
    font-weight: bold;
}

.acc-curve-line {
    fill: transparent;
}

.clear-button {
    fill: #487DCB;
    cursor: pointer;
}

.clear-text-all {
    font-size: 24px;
    fill: white;
}

.clear-scatter {
    cursor: pointer;
    fill: #487DCB;
}

.clear-legend {
    cursor: pointer;
    fill: #487DCB;
}

.brush {
    fill: #ADD8E6;
    opacity: 0.5;
}

.t-label {
    font-family: sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-anchor: start;
    font-size: 24px;
    font-weight: bold;
}

.control-bar {
    background-color: #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.bar-tip {
    height: 75px;
    fill: white;
    font-family: "Helvetica Neue";
    font-weight: 300;
    background: rgba(128,128,128,128);
    color: white;
    padding: 5px 10px 5px 10px;
    -moz-border-radius: 8px 8px;
    border-radius: 25px;
    top: 100px;
    visibility: hidden;
}

/*.front-label {*/
    /*font-size: 34px;*/
/*}*/

.chartYAxis path {
    stroke: #ddd;
}

.chartXAxis path {
    stroke: #ddd;
}

/*.verticalGrid text {*/
    /*font-size: 20px;*/
    /*fill: black;*/
/*}*/

/*.horizontalGrid text {*/
    /*font-size: 20px;*/
    /*fill: black;*/
/*}*/

.anchor {
    visibility: hidden;
    pointer-events: none;
    cursor: move;
    z-index: 100;
}

.outline-rect {
    fill: blue;
    opacity: 0.1;
}

.img-btn {
    fill: #487DCB;
}

.img-btn-text {
    font-size: 24px;
    fill: white;
    pointer-events: none;
}

/*.score-text {*/
    /*font-size: 36px;*/
    /*fill: black;*/
/*}*/

/* CSS changes */
div.d3view-pedpro .svg-container {
    height: 100%;
    width: 100%;
}
div.d3view-pedpro .pedpro-pic {
    position: absolute;
    left: 50%;
    height: 30%;
    width: 18%;
    top: 6%;
    z-index: 2;
    margin-left: 9px;
    text-align: center;
}
div.d3view-pedpro .pedpro-pic video {
}
div.d3view-pedpro .pedpro-newton {
    position: absolute;
    width: 33%;
    left: 66.7%;
    height: 40%;
    top: 0;
}
div.d3view-pedpro .pedpro-spinner {
    position: absolute;
    left: 49%;
    top: 50%;
    font-size: 24px;
    color: steelblue;
}
/* /javascripts/spa/tasks/tasks.css */
/***** main container ****/
/* Changed by Claude on 8/21/26 - tasks-app-overhaul.
   `overflow: auto` here made the WHOLE PAGE the scroller. Measured live before
   this change: .tasks-container clientHeight 776 / scrollHeight 854, i.e. the
   entire app scrolled 78px -- and the 78px came from ONE place, the left rail
   (.left-col-content was 819px of tree inside a 776px column). So a rail that
   was slightly too tall scrolled the task list, the header and everything else
   with it.

   The shell is now locked and the sub-panels scroll individually:

       .tasks-container            overflow:hidden   <- never scrolls
         .two-col-flex             flex:1 1 auto; min-height:0
           .left-col               overflow:hidden
             .left-col-content     overflow-y:auto   <- SCROLLER (the rail)
           .content-col            overflow:hidden
             .main-header          flex:0 0 auto
             .main-body            overflow:hidden
               <the view>          its own scroller  <- SCROLLER (list/table)

   The escape hatch for a small screen is min-height/min-width rather than a
   media query: below those the container outgrows the shell and #main_content
   (which is already overflow:auto) takes over -- so there is one threshold,
   expressed once, and no breakpoint to keep in sync. */
div.tasks-container {
    /*font-weight:initial!important;*/
    /*background: var(--d3neutralLighterAlt);*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 720px;
    /* the HEIGHT floor is NOT here -- it lives on the app root below. Measured
       2026-08-21: a `min-height: 620px` on this element computed to 0px, because
       the frozen-shell block sets
         #admin-index-container[data-app-name="Tasks"] > .tasks-container
         { min-height: 0 }
       which is both later and more specific. And the root is the right owner
       anyway: it is the flex item of #main_content, so its height is what makes
       #main_content overflow and take over the scrolling. */
}
/* the two view states are the flex children; the inactive one is display:none
   and therefore out of flow, so only one is ever a flex item. */
div.tasks-container > .two-col-flex,
div.tasks-container > .tasks-edit-view {
    flex: 1 1 auto;
    min-height: 0;
}
div.tasks-container .tasks-edit-view {
    display: none;
}
div.tasks-container .tasks-header [data-header-type] {
    flex: 1 1 auto;
    height: 125px;
    width: 25%;
    margin: 20px;
    overflow: auto;
}
div.tasks-container .tasks-header [data-header-type="calendarheatmap"] {
    padding: 0;
}
div.tasks-container .tasks-header [data-header-type="calendarheatmap"] > .imp-text {
    display: none;
}
div.tasks-container .tasks-header [data-header-type] .pl-tags {
    margin-top: 10px;
}
div.tasks-container .tasks-header [data-header-type] .pl-tags [data-key] {
    padding: 0px 9px;
}
div.tasks-container .tasks-header [data-header-type] .pl-tags [data-key] {
    transition: var(--transition-background-color);
    cursor: pointer;
}
div.tasks-container .tasks-header [data-header-type] .pl-tags [data-key]:hover {
    background-color: var(--dt-selection-color-light);
}
div.tasks-container .tasks-header [data-header-type] .pl-tags [data-key].clicked {
    background-color: var(--dt-selection-color-dark);
}
/* Changed by Claude on 8/21/26 - tasks-app-overhaul.
   These three rules were hardcoded allowances that no longer matched anything,
   and each one showed up as dead white space. Measured live on 3092:

     height: calc(100% - 170px)   reserved 170px for something ABOVE the flex
                                  row. Nothing is above it -- .two-col-flex is
                                  the first visible child of .tasks-container
                                  and shares its top edge -- so the page simply
                                  ended 170px early. (730px inside a 900px box.)

     max-width: calc(100% - 280px)  budgets 280px for .left-col, which core
                                  pins at flex-basis:180px !important. The
                                  100px difference was a permanent white
                                  gutter down the right of every Tasks page.

     .main-body height: calc(100% - 80px)  budgets 80px for .main-header, which
                                  actually occupies 94px. It was near enough to
                                  hide at the old height and would be wrong at
                                  the corrected one.

   Replaced with a column that sizes itself, so there is no number left to go
   stale: the row fills its container, the content column takes whatever the
   180px left column does not, and .main-body absorbs the leftover height under
   whatever .main-header happens to be.

   `.two-col-flex` is a SHARED core layout class (simulations, notes, study,
   databases, simlytiks all use it) -- every rule here stays scoped to
   div.tasks-container, so nothing outside Tasks moves. */
div.tasks-container .two-col-flex {
    min-height: 0;              /* the 620px floor lives on .tasks-container now;
                                   a 300px floor here would fight min-height:0 and
                                   re-open the page scroll on a short viewport. */
    height: auto;
}
div.tasks-container .two-col-flex .content-col {
    display: flex;
    flex-direction: column;
    min-width: 0;               /* a flex item defaults to min-width:auto, so a
                                   wide child could stretch the column past its
                                   share. This is what the max-width was really
                                   guarding against -- expressed without naming
                                   the sibling's width. */
}
div.tasks-container .two-col-flex .content-col > .main-body {
    flex: 1 1 auto;
    min-height: 0;              /* let it shrink so its own scrollers engage */
    height: auto;
    overflow: hidden;           /* the view inside scrolls, not the column */
}
div.tasks-container .two-col-flex .content-col > .main-header {
    flex: 0 0 auto;
}
div.tasks-container .left-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;           /* clips; .left-col-content is the scroller */
    padding: 12px 10px;
    border-right: 1px solid var(--d3v-border, #E2E8F0);
    background: #FCFDFE;
}
div.tasks-container .left-col > .btn-group {
    flex: 0 0 auto;
}
div.tasks-container .left-col .left-col-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0 4px;         /* was 20px 0 -- the rail scrolls now, so the
                                   padding no longer has to fake breathing room */
}
div.tasks-container .left-col .tasks-tree.full-h {
    height: auto;               /* full-h forced 100% of a scrolling parent */
}
div.tasks-container .main-view-edit {
    /*padding: 0 100px;*/
}
/*div.tasks-container .main-header-filters {*/
/*    border: 1px solid #DDD;*/
/*    border-radius: 10px;*/
/*    padding: 0 10px;*/
/*}*/
div.tasks-container .main-header-filters .d3view-filters {
    height: auto;
}
/*div.tasks-container .main-header-filters div.d3view-filters .advanced-filters {*/
/*    border: none;*/
/*}*/

/* Main header */
div.tasks-container .view-options .dropdown-menu > li:before {
    content: '\f00c';
    font-family: 'FontAwesome',serif;
    font-weight:bold;
    position: relative;
    left:3px;
}
div.tasks-container .view-options .dropdown-menu > li:not(.active):before {
    opacity: 0;
}

div.tasks-container .view-options .dropdown-menu > li:not(.active):hover {
    color: #FFF;
    background-color: #428BCA;
}
/*** List view ***/
div.tasks-container table#tasks-list tbody tr td[data-attr='name'] {
    cursor: pointer;
}

/*** Task editing view (full) ***/
div.tasks-container .edit-view-container {
    padding: 25px 0;
}
div.tasks-container .edit-view-container h1#task-summary {
    font-size: 20px;
}
div.tasks-container .edit-view-container .task-details-left > div {
    margin-bottom: 10px;
    padding: 0 10px;
}
div.tasks-container .edit-view-container .task-attrs ul {
    list-style: none;
}
div.tasks-container .edit-view-container .task-attrs ul li.task-info {
    padding: 6px;
}
div.tasks-container .edit-view-container .task-attrs ul li strong {
    font-size: 14px;
    color: #62656b;
    font-weight: 400;
}
div.tasks-container .edit-view-container .task-attrs ul li .value {
    color: #000;
    font-size: 14px;
    font-weight: 400;
}
div.tasks-container .edit-view-container .task-attrs ul li.item {
    float: left;
    width: 50%;
}
div.tasks-container .edit-view-container .task-description div#wysiwyg-editor {
    height: 200px;
    overflow: scroll;
    background-color: #FFF;
}
div.tasks-container .refresh-widget:hover {
    color: var(--plugin-primary-color);
}

/**** Create a task view/ Edit a task view ***/
div#create-task-modal .modal-dialog, div#edit-task-modal .modal-dialog {
    width: 45%;
    margin: 10px auto;
}
div#create-task-modal .modal-dialog .modal-body, div#edit-task-modal .modal-dialog .modal-body {
    overflow: auto;
}
div#create-task-modal .modal-body form > div.row, div#edit-task-modal .modal-body form > div.row  {
    margin: 0;
    padding: 12px!important;
}
div#create-task-modal .modal-body div#wysiwyg-editor, div#edit-task-modal .modal-body div#wysiwyg-editor {
    height: 200px;
    overflow: scroll;
    background-color: #FFF;
}
div#create-task-modal .modal-body .row span.icon-required, div#edit-task-modal .modal-body .row span.icon-required {
    color: red;
}
div#create-task-modal .modal-body .row label, div#edit-task-modal .modal-body label {
    display: inline-block!important;
}
div#create-task-modal label {
    display: inline-block!important;
}

div.tasks-container .tasks-settings-filters div.d3view-filters-container li.filter-hz-item .filter-operators-dropdown > .dropdown-toggle {
    padding: 0px 6px!important;
}
div.tasks-container  div.d3view-filters-container div.filters-list:not([data-accordion="true"]) ul.filter-items .filter-item {
    margin-bottom: 0;
}

div.tasks-list-view table td {
    border: none;
}
div.tasks-list-view table {
    font-size: 1.3em;
}
div.tasks-container .task-comment {
    padding: 10px;
    display: flex;
}
div.tasks-container span.user-icon,
div#create-task-modal span.user-icon {
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.tasks-container .pl-tags span.user-icon {
    height: 25px;
    width: 25px;
    font-size: 85%;
}
div#create-task-modal span.user-logo,
div.tasks-container .task-comment span.user-logo {
    margin-right: 10px;
}

div.tasks-container.sl-select2 .select2-highlighted .user-name {
    color: #FFF!important;
}
div.task_creation .divider {
    border-bottom: 1px solid #DDD;
    margin-bottom: 10px;
}

div.tasks-container .tm-accordion {
    border: 1px solid #DDD;
    margin-bottom: 10px;
}
div.tasks-container .tm-accordion label {
    margin-bottom: 0;
    cursor: pointer;
}
div.tasks-container .tm-accordion  > div {
    padding: 15px;
}
div.tasks-container .tm-accordion .accordion-header {
    cursor: pointer;
}
div.tasks-container .tm-accordion .accordion-header:hover {
    background-color: var(--d3neutralLighterAlt);
}
div.tasks-container .tm-accordion.open .accordion-body {
    display: block!important;
}
div.tasks-container label {
    display: inline-block!important;
}
div.tasks-container .description-content {
    height: 300px;
}
div.tasks-container .description-editor:not(.isEditing),
/*div.tasks-container .description-content:not(.isEditing),*/
div.tasks-container .task-header:not(.isEditing) {
    transition: background 0.2s linear;
}

div.tasks-container .description-editor:not(.isEditing):hover,
div.tasks-container .task-header:not(.isEditing):hover {
    background: var(--d3neutralLighterAlt);
    cursor: pointer;
}
div.tasks-container .task-header.isEditing {
    border-color: var(--plugin-primary-color);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--plugin-primary-color);
}
div.tasks-container .add-comment-container {
    position: sticky;
    bottom: 10px;
    z-index: 2;
    background: #FFF;
    width: 100%;
    height: 100px;
}
div.tasks-container .tox-statusbar {
    display: none;
}
div.tasks-container .task-attachments .tm-dropzone {
    min-height: 150px;
    overflow: auto;
    padding: 10px;
    border: 1px dashed var(--d3view-secondary-color);
    transition: background-color .2s linear;
    position: relative;
}
div#create-task-modal .tm-dropzone {
    border: 1px dashed var(--d3view-secondary-color);
}
div.tasks-container .task-attachments .tm-dropzone:hover {
    border: 1px dotted #DDD!important;
    background-color: var(--d3neutralLighterAlt);
}
div.tasks-container .task-attachments .tm-dropzone:hover:after {
    content: 'Click to upload or drop file';
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    color: #FFF;
    transform: translate(-50%, -50%);
    font-size: 1.4em;
    font-weight: 400;
    background: grey;
    padding: 10px;
    border-radius: 10px;
}
div.tasks-container .task-attachments .tm-dropzone.dropzone .dz-preview:first-child {
    margin-left: 0;
}
div.tasks-container .task-attachments .tm-dropzone.dropzone .dz-preview .dz-image {

}
div.tasks-container .task-title {
    font-size: 2em;
    padding: 5px 0;
    margin-bottom: 0;
}
div.tasks-container .task-header.isEditing .edit-title-buttons {
    display: flex!important;
    align-items: center;
}
div.tasks-container .tm-accordion.open .accordion-header {
    border-bottom: 1px solid #DDD;
}
div.tasks-container .tm-accordion.open .task-info > div {
    display: flex;
    align-items: center;
    margin: 0 0 8px 0;
}
div.tasks-container .tm-accordion.open .task-info > .task-info-label {
    color: dimgrey;
}

div.tasks-container g.block.mouseover .label-container {
    background: #f5f5f5!important;
}

div.tasks-container .description-editor {
    /* font-family: Arial!important; */
    font-size: 14px;
}
div.tasks-container .description-editor li:not(:first-child) {
    line-height: 2em;
}
div.tasks-container .description-editor ol {
    margin-bottom: 10px;
}
div.tasks-container .description-editor ol {
    padding-left: 24px;
    list-style: decimal;

}
div.tasks-container .description-editor ol > li > ol {
    list-style: lower-alpha;
}

div.tasks-container .dt-placeholder thead div.ph-item {
    border: none;
}
div.tasks-container .chart-view:not([data-type="table"]) {
    height: 60vh;
    min-height: 500px;
}
div.tasks-container .chart-view[data-type="table"] table.renderingArea tbody tr {
    height: 50px;
}
div.tasks-container .chart-view[data-type="table"] .col-name {
    text-transform: capitalize;
}
div.tasks-container .chart-view[data-type="table"] .group-body {
    padding-left: 10px;
    display: none;
}
div.tasks-container .chart-view[data-type="table"] .group-body table.renderingArea td {
    border: none;
}
div.tasks-container .chart-view[data-type="table"] .task-group.opened .group-body {
    display: block;
}
div.tasks-container .chart-view[data-type="table"] .task-group.opened .group-mini {
    display: none;
}
div.tasks-container .chart-view[data-type="table"] .task-group:not(.opened) .group-mini {
    display: block;
}
div.tasks-container .chart-view[data-type="table"] .task-group .group-header .pl-collapsible-icon {
    cursor: pointer;
}
div.tasks-container .chart-view[data-type="table"] .task-group .group-header .pl-collapsible-icon:hover {
    color: red;
}
div.tasks-container .chart-view[data-type="table"] .task-group:not(.opened) .group-header .group-count {
    display: none;
}
div.tasks-container .task-group {
    margin-bottom: 10px;
}
div.tasks-container .chart-view[data-type="table"] .dt-renderingArea {
    overflow: auto;
}

div.tasks-container .chart-view[data-type="table"] .group-body table.renderingArea td.hasDialog {
    border: 1px solid steelblue;
}

div.tasks-container .task-dialog {
    position: fixed;
    width: 100px;
    z-index: 20;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-light);
    padding: 15px;
}
div.tasks-container .task-dialog .dialog-contents {
    max-height: 350px;
    min-height: 200px;
}
div.tasks-container .task-dialog .dialog-contents  .daterangepicker {
    position: relative!important;
    top: 0!important;
    left: 0!important;
    color: initial!important;
    width: 100%;
}
div.tasks-container .task-dialog .sc-uniq-values [data-key]:hover {
    background: #f5f5f5;
}

div#create-task-modal .task-file-preview,
div.tasks-container .task-file-preview {
    width: 200px;
    margin: 5px 10px 5px;
    box-shadow: var(--plugin-box-shadow-lighter);
    padding: 10px 0;
    display: inline-block;
}

div#create-task-modal .task-file-preview:hover,
div.tasks-container .task-file-preview:hover {
    background-color: #FFF;
}
div#create-task-modal .task-file-preview img,
div.tasks-container .task-file-preview img {
    height: 50px;
}
div.tasks-container .hasFiles .dz-message {
    display: none;
}
div#create-task-modal .tm-dropzone .previews-container,
div.tasks-container .tm-dropzone .previews-container {
    padding: 4px 0;
}
/*div.tasks-container .previews-container {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*}*/
/*div.tasks-container .tm-dropzone .task-file-preview {*/
/*    margin: 5px 10px 5px 0;*/
/*}*/
/*div.tasks-container .tm-dropzone > .task-file-preview:first-child {*/
/*    margin-left: 0;*/
/*}*/
div#create-task-modal .tm-dropzone > .task-file-preview .btn-group,
div.tasks-container .tm-dropzone > .task-file-preview .btn-group {
    opacity: 0;
    margin: 5px 25px;
    width: calc(100% - 50px);
}
div#create-task-modal .tm-dropzone > .task-file-preview:hover .btn-group,
div.tasks-container .tm-dropzone > .task-file-preview:hover .btn-group {
    opacity: 1;
}

.tasks-container .tasks-settings-filters .filters-container {
    padding: 3px 1px;
}

.tasks-container .add_comment, .tasks-container .comment-editor {
    padding: 20px;
    border: 2px dotted #ddd;
    cursor: pointer;
    transition: background-color 0.2s linear;
}
.tasks-container .comment-editor:after {
    content: 'Add Comment';
    pointer-events: none;
    color: dimgrey;
}
.tasks-container .add_comment:hover, .tasks-container .comment-editor:hover {
    background-color: var(--d3neutralLighterAlt);
}

div.tasks-container .bs_datatable_wrapper {
    width: 100%!important;
}
div.tasks-container .chart-view[data-type="table"] .bs_datatable_wrapper:not(.scroll_enabled) table.renderingArea {
    /*table-layout: initial;*/
}
div.tasks-container .bs_datatable_wrapper,
div.tasks-container div.datatable-container .bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead,
div.tasks-container div.datatable-container .bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr:not(.hovered) {
    /*background-color: var(--d3neutralLighterAlt);*/
}

/** Filters **/
div.tasks-container .tasks-filters .filter-item {
    margin: 0 6px;
    border-radius: 8px;
}
div.tasks-container .tasks-filters .filter-item .filter-button {
    padding-right: 25px;
    position: relative;
    transition: background-color 0.3s ease-in;
}
div.tasks-container .tasks-filters .filter-item .filter-button .lead {
    font-weight: normal;
}
div.tasks-container .tasks-filters .filter-item .filter-caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
div.tasks-container .tasks-filters .filter-item .dropdown-menu {
    padding: 10px 20px;
    min-width: 300px;
}
div.tasks-container .tasks-filters .filter-item .filter-list-values .list-group-item {
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in;
    padding: 10px 6px;
}
div.tasks-container .tasks-filters .filter-item .filter-list-values .list-group-item input[type="checkbox"] {
    margin: 0 10px 0 0;
}
div.tasks-container .tasks-filters .filter-item .filter-list-values .list-group-item a {
    text-decoration: none;
}
div.tasks-container .tasks-filters .filter-item .filter-list-values {
    box-shadow: none;
    margin-bottom: 0;
    max-height: 25vh;
    overflow: auto;
}
div.tasks-container .tasks-filters .filter-item .filter-list-values .list-group-item:hover {
    background-color: var(--dt-selection-color-light);
}
div.tasks-container .tasks-filters .filter-item .filter-list-values .list-group-item.selected {
    background-color: var(--dt-selection-color-dark);
}

/** Tags **/
div.tasks-container .priority-tag {
    /*padding: 5px 10px;*/
    /*border-radius: 6px;*/
    /*font-size: 75%;*/
}
div.tasks-container .tasks-header .priority-tag > i {
    display: none;
}

div.tasks-import-dataset .d3view-carousel .carousel-inner {
    width: 100%;
}

div.tasks-container .detail-view .tasks-list-content {
    flex: 0 0 250px;
}
div.tasks-container .detail-view .tasks-list-content .tasks-list {
    border-right: 1px solid #DDD;
    overflow: auto;
}
div.tasks-container .detail-view .tasks-content {
    flex: 1 1 auto;
    margin-left: 8px;
    overflow: auto;
}
div.tasks-container .detail-view .tasks-content .back-to-list {
    display: none;
}
div.tasks-container .detail-view ol.tasks-list:empty,
div.tasks-container .detail-view ol.tasks-list.empty {
    content: 'No tasks found';
    color: dimgrey;
    padding: 10px;
}
div.tasks-container .detail-view li.task-item.list-group-item:not(.hidden):first-child {
    border-top: none;
}
/*.detail-view .tasks-list-content li {*/
/*    margin-bottom: 10px;*/
/*    padding: 5px;*/
/*    border-bottom: 1px solid #DDD;*/
/*}*/
/*.detail-view .tasks-list-content li.active {*/
/*    background-color: #428bca;*/
/*}*/
/*.detail-view .tasks-list-content li.active > a {*/
/*    color: #FFF;*/
/*}*/

div.tasks-container .detail-view .tasks-list-content li.active .task-key > * {
    color: #FFF!important;
}
div.tasks-container .detail-view .tasks-list-content li:hover {
    background-color: #eee;
}
div.tasks-container .detail-view .tasks-list-content li > a {
    text-decoration: none;
    height: 100%;
    display: block;
}
div.tasks-container .detail-view li.task-item.list-group-item {
    border-left: none;
    border-right: none;
}

div.tasks-container .chart-view[data-type="dashboard"] .tasks-cards [data-header-type] {
    width: calc(50% - 40px);
    height: calc(50% - 40px);
}
div.tasks-container .chart-view[data-type="dashboard"] .tasks-cards {
    flex-wrap: wrap;
    height: 100%;
}

div.tasks-container ul.tasks-view-types li:first-child {
    margin-left: 0;
    padding-left: 2px;
}
div.tasks-container ul.tasks-view-types li.active > a {
    color: steelblue;
}
div.tasks-container ul.tasks-view-types li.active {
    border-bottom: 2px solid steelblue;
}
div.tasks-container ul.tasks-view-types li > a {
    color: #333;
}
div.tasks-container ul.tasks-view-types li {
    display: inline-block;
    margin: 0 5px;
    padding: 10px;
    border-bottom: 2px solid transparent;
}

div.tasks-container .filters-dd-toggle.opened {
    color: green;
}

div.tasks-container .chart-view > .bs_datatable_wrapper[data-renderer="d3"].hasPagination div.dt-pagination {
    position: relative;
    bottom: unset!important;
    right: unset!important;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

div.tasks-container .parent-row-details {
    border: 1px solid #DDD;
    height: 350px;
}
div.tasks-container .parent-row-details .tab-content {
    height: 100%;
    overflow: auto;
}
div.tasks-container .parent-row-details .pl-nav-tabs {
    flex: 0 0 80px;
    border-right: 1px solid #DDD;
}
div.tasks-container .parent-row-details .bs_datatable_wrapper {
    min-height: unset;
}

div.tasks-container .board-tasks .board-task {
    cursor: move;
    margin: 10px 10px 10px 0;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lightest);
    transition: background-color 0.2s ease-in;
    background: #FFF;
}
div.tasks-container .board-tasks .board-task:hover {
    background-color: var(--d3neutralLighterAlt);
}
div.tasks-container .board-tasks .board-task:hover:after {
    content: '\f58e';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: darkgrey;
}
div.tasks-container .board-tasks {
    display: flex;
    overflow: auto;
}
div.tasks-container .board-tasks .board-container {
    margin: 10px;
    background: var(--d3neutralLighterAlt);
    padding: 10px;
    border: 1px solid #DDD;
    border-radius: 6px;
    height: 100%;
    min-width: 200px;
    /* overflow: auto; */
}

div.tasks-container .board-view {
    overflow: auto;
}
div.tasks-container .board-task .task-title {
    font-size: 1.2em;
    cursor: pointer;
}















div.tasks-container .description-content .autofill-contents div,
div.tasks-container .description-content .autofill-contents span,
div.tasks-container .description-content .autofill-contents applet,
div.tasks-container .description-content .autofill-contents object,
div.tasks-container .description-content .autofill-contents iframe,
div.tasks-container .description-content .autofill-contents h1,
div.tasks-container .description-content .autofill-contents h2,
div.tasks-container .description-content .autofill-contents h3,
div.tasks-container .description-content .autofill-contents h4,
div.tasks-container .description-content .autofill-contents h5,
div.tasks-container .description-content .autofill-contents h6,
div.tasks-container .description-content .autofill-contents p,
div.tasks-container .description-content .autofill-contents blockquote,
div.tasks-container .description-content .autofill-contents pre,
div.tasks-container .description-content .autofill-contents a,
div.tasks-container .description-content .autofill-contents abbr,
div.tasks-container .description-content .autofill-contents acronym,
div.tasks-container .description-content .autofill-contents address,
div.tasks-container .description-content .autofill-contents big,
div.tasks-container .description-content .autofill-contents cite,
div.tasks-container .description-content .autofill-contents code,
div.tasks-container .description-content .autofill-contents del,
div.tasks-container .description-content .autofill-contents dfn,
div.tasks-container .description-content .autofill-contents em,
div.tasks-container .description-content .autofill-contents font,
div.tasks-container .description-content .autofill-contents img,
div.tasks-container .description-content .autofill-contents ins,
div.tasks-container .description-content .autofill-contents kbd, q,
div.tasks-container .description-content .autofill-contents s,
div.tasks-container .description-content .autofill-contents samp,
div.tasks-container .description-content .autofill-contents small,
div.tasks-container .description-content .autofill-contents strike,
div.tasks-container .description-content .autofill-contents strong,
div.tasks-container .description-content .autofill-contents sub,
div.tasks-container .description-content .autofill-contents sup,
div.tasks-container .description-content .autofill-contents tt,
div.tasks-container .description-content .autofill-contents var,
div.tasks-container .description-content .autofill-contents b,
div.tasks-container .description-content .autofill-contents u,
div.tasks-container .description-content .autofill-contents i,
div.tasks-container .description-content .autofill-contents center,
div.tasks-container .description-content .autofill-contents dl,
div.tasks-container .description-content .autofill-contents dt,
div.tasks-container .description-content .autofill-contents dd,
div.tasks-container .description-content .autofill-contents ol,
div.tasks-container .description-content .autofill-contents ul,
div.tasks-container .description-content .autofill-contents li,
div.tasks-container .description-content .autofill-contents fieldset,
div.tasks-container .description-content .autofill-contents form,
div.tasks-container .description-content .autofill-contents label,
div.tasks-container .description-content .autofill-contents legend,
div.tasks-container .description-content .autofill-contents table,
div.tasks-container .description-content .autofill-contents caption,
div.tasks-container .description-content .autofill-contents tbody,
div.tasks-container .description-content .autofill-contents tfoot,
div.tasks-container .description-content .autofill-contents thead,
div.tasks-container .description-content .autofill-contents tr,
div.tasks-container .description-content .autofill-contents th,
div.tasks-container .description-content .autofill-contents td {
    margin: revert;
    padding: revert;
    border: revert;
    outline: revert;
    font-size: 100%;
    vertical-align: revert;
    background: revert;
    list-style: revert;
    quotes: revert;
}
/* ============================================================================
   Linked items  --  Added by Claude on 8/20/26 - tasks-app-overhaul.
   A task can point at any entity across the platform. Chips are modelled on
   the Assembler's entity chips so the two surfaces read the same.
   Scoped under .tasks-container: this plugin shares the page with fast_datatable,
   simlytiks and select2, so zero blast radius is the bar.
   ========================================================================== */

.tasks-container .task-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tasks-container .task-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--d3v-border, #DDD);
    border-radius: var(--d3v-r-full, 999px);
    background: var(--d3v-bg-secondary, #F8FAFC);
    font-size: 12px;
    line-height: 18px;
    transition: background-color .15s ease, border-color .15s ease;
}

.tasks-container .task-link-chip .tlc-badge {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--d3v-text-muted, #62656b);
    white-space: nowrap;
}

.tasks-container .task-link-chip .tlc-name {
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-container .task-link-chip .tlc-name:hover { text-decoration: underline; }

.tasks-container .task-link-chip .js-task-link-remove {
    cursor: pointer;
    opacity: .45;
    font-size: 11px;
    color: var(--d3v-text-muted, #62656b);
    transition: opacity .15s ease;
}

/* Reveal the remove affordance on hover only -- a row of always-on x's reads
   as clutter, and an accidental click destroys a link. */
.tasks-container .task-link-chip:hover { border-color: var(--d3v-accent, #428BCA); }
.tasks-container .task-link-chip:hover .js-task-link-remove { opacity: 1; }
.tasks-container .task-link-chip .js-task-link-remove:hover { opacity: 1; color: var(--d3v-danger, #C9302C); }

/* A link whose target is gone or unreadable is SHOWN, greyed and non-navigable.
   Dropping it silently would make a broken link and no link look identical. */
.tasks-container .task-link-chip.is-missing,
.tasks-container .task-link-chip.is-denied {
    opacity: .6;
    border-style: dashed;
    cursor: default;
}
.tasks-container .task-link-chip.is-missing .tlc-name,
.tasks-container .task-link-chip.is-denied .tlc-name { cursor: default; text-decoration: none; }

.tasks-container .task-link-chip.is-removing { opacity: .4; pointer-events: none; }

.tasks-container .task-link-chip.task-link-add {
    border-style: dashed;
    cursor: pointer;
    color: var(--d3v-text-muted, #62656b);
}
.tasks-container .task-link-chip.task-link-add:hover {
    color: var(--d3v-accent, #428BCA);
    background: var(--d3v-bg-hover, #f5f5f5);
}

.tasks-container .task-link-error { font-size: 12px; color: var(--d3v-danger, #C9302C); }
.tasks-container .task-links-loading { font-size: 12px; }
.tasks-container .task-link-picker-msg { min-height: 18px; font-size: 12px; color: var(--d3v-danger, #C9302C); }

/* ============================================================================
   Task detail pane  --  Added by Claude on 8/20/26, recomposed 8/21/26.
   tasks-app-overhaul.

   Composition follows Jira's issue view, measured live rather than recalled
   (xfinity.atlassian.net R2026-97, viewport 2752px):

       main column : rail          ~ 73 : 27, separated by ONE hairline rule
       title                         24px / 28px line-height / ~650
       rail field label              14px / 500 / muted, ~38% of the rail
       rail field row                32px tall, label and value on ONE line
       section header                small, bold, chevron on the left

   The THEME is ours -- d3VIEW light, --d3v-* tokens throughout. Only the
   proportions, density and hierarchy are borrowed.

   Everything is scoped under .tasks-container: this page also hosts
   fast_datatable, simlytiks and select2, so zero blast radius is the bar.
   ========================================================================== */

/* ---------------------------------------------------------------- columns -- */

/* The row is display:flex (inline style on .edit-view-container), but the two
   children still carry Bootstrap's float-era col-md-8 / col-md-4 widths. With a
   fixed rail that left the main column at 66.66% and ~390px of DEAD GUTTER on a
   wide screen -- the rail floated mid-page and the divider rule was stranded
   beside it. Let the main column take whatever the rail does not. */
.tasks-container .edit-view-container > .task-details-left {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;               /* a flex child must be allowed to shrink, or a
                                   long word in the description forces overflow */
    padding: 0 24px 0 4px;
    border-right: 1px solid var(--d3v-border, #E2E8F0);
}

/* A rail that is a straight percentage is 300px at 900px and 700px at 2100px --
   neither is what field/value pairs want. Clamp it to the band that stays
   readable, tracking Jira's ~27% in the middle of the range. */
.tasks-container .edit-view-container > .col-md-4 {
    /* The percentage is of the PANE, not the window -- the task list panel takes
       264px off the top, so a floor sized for a full window becomes 43% of what
       is left on a 1100px screen and starves the description. Measured across
       both widths in the harness: 30% at 1440, 33% at 1100. */
    flex: 0 0 clamp(272px, 30%, 420px);
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0 4px 0 24px !important;   /* !important beats the template's
                                           inline style="padding: 0 15px" */
}

/* ------------------------------------------------------------------ title -- */

.tasks-container .task-header { margin: 0; }

.tasks-container .task-header .task-title {
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--d3v-r-sm, 4px);
    outline: none;
    word-break: break-word;
    color: var(--d3v-text-primary, #1E293B);
}
/* The title is click-to-edit and nothing said so. */
.tasks-container .task-header .task-title:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-color: var(--d3v-border, #E2E8F0);
    cursor: text;
}
.tasks-container .task-header .task-title:focus {
    background: #FFF;
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

/* Breadcrumb above the title: which task this is, and where it lives. */
.tasks-container .task-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px 6px;
    font-size: 12px;
    line-height: 16px;
    color: var(--d3v-text-muted, #94A3B8);
}
.tasks-container .task-breadcrumb .tb-key {
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
}
.tasks-container .task-breadcrumb .tb-sep { opacity: .55; }

/* Action row under the title: a compact toolbar, not a stranded button. */
.tasks-container .task-options {
    margin: 8px 0 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tasks-container .task-options .btn {
    font-size: 12px;
    line-height: 18px;
    padding: 4px 10px;
    border-radius: var(--d3v-r-sm, 4px);
}

/* --------------------------------------------------------------- sections -- */

/* One rhythm for the stacked sections. The pre-existing
   `.task-details-left > div { margin-bottom:10px; padding:0 10px }` carries two
   element selectors, so these have to match its specificity to win. */
div.tasks-container .edit-view-container .task-details-left > .task-description,
div.tasks-container .edit-view-container .task-details-left > .task-links,
div.tasks-container .edit-view-container .task-details-left > .task-attachments,
div.tasks-container .edit-view-container .task-details-left > .task-activity {
    margin: 0 0 26px 0;
    padding: 0 0 0 6px;
}

/* Section heading: small, bold, quiet -- it labels the content, it is not the
   content. Was an <h3>, i.e. page-heading weight for the word "Description". */
div.tasks-container .edit-view-container .task-details-left > div > h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    margin: 0 0 8px 0;
    color: var(--d3v-n-600, #475569);
}

/* ------------------------------------------------------------ description -- */

/* `.description-content { height: 300px }` was a FIXED height, so an empty
   description reserved 300px of blank page and pushed Linked items, Attachments
   and Activity below the fold. That single declaration is most of why the pane
   read as empty. Let it size to its content. */
div.tasks-container .description-content { height: auto; }

.tasks-container .task-description .description-editor {
    min-height: 76px;
    height: auto;
    padding: 8px 10px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background-color .15s ease, border-color .15s ease;
}
.tasks-container .task-description .description-editor.is-empty {
    min-height: 40px;
    display: flex;
    align-items: center;
    color: var(--d3v-text-muted, #94A3B8);
}
.tasks-container .task-description .description-editor.isEditing {
    min-height: 200px;          /* room to actually write, once engaged */
}

/* ------------------------------------------------------------ attachments -- */

/* A 150px dashed box with 19px type shouted at the user on every task, whether
   or not anything was attached. Compact when empty; it still grows for previews. */
div.tasks-container .task-attachments .tm-dropzone {
    min-height: 84px;
    padding: 8px;
    border: 1px dashed var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #F8FAFC);
}
div.tasks-container .task-attachments .tm-dropzone .dz-message {
    font-size: 13px !important;  /* beats the template's inline font-size:19px */
    color: var(--d3v-text-muted, #94A3B8);
    margin: 18px 0;
}
div.tasks-container .task-attachments .tm-dropzone:hover {
    border: 1px dashed var(--d3v-accent, #3B82F6) !important;
    background-color: var(--d3v-bg-secondary, #F8FAFC);
}
/* The old hover state painted a grey lozenge over the middle of the box saying
   the same thing the box already says. */
div.tasks-container .task-attachments .tm-dropzone:hover:after { content: none; }

/* ------------------------------------------------------------------- rail -- */

.tasks-container .task-attrs { padding-top: 2px; }

/* Status is the single most consulted field on a task, and it rendered as an
   unlabelled 220px box. Make it read as the control it is. */
.tasks-container .task-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0 !important;
}
.tasks-container .task-status-row .select2-container {
    width: auto !important;
    min-width: 140px;
}
.tasks-container .task-status-row .select2-container .select2-choice {
    height: 32px;
    line-height: 30px;
    padding: 0 8px 0 10px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-n-100, #F1F5F9);
    background-image: none;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--d3v-text-secondary, #475569);
}
.tasks-container .task-status-row .select2-container:hover .select2-choice {
    background: var(--d3v-bg-hover, #E2E8F0);
}
/* Completed reads green, the way a resolved issue does. The template already
   computes this state for its check icon -- this reuses that same test. */
.tasks-container .task-status-row.is-done .select2-container .select2-choice {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .35);
    color: #047857;
}
.tasks-container .task-status-row .task-done-icon { display: none; }  /* the
    button itself now carries "done"; the tick beside it was saying it twice */

/* Accordion cards ("Pinned Fields", "Details"). */
div.tasks-container .tm-accordion {
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    margin-bottom: 12px;
    overflow: hidden;
}
div.tasks-container .tm-accordion > div { padding: 0; }
div.tasks-container .tm-accordion .accordion-header {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    cursor: pointer;
}
div.tasks-container .tm-accordion .accordion-header:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}
div.tasks-container .tm-accordion .accordion-header label {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    margin: 0;
    cursor: pointer;
}
div.tasks-container .tm-accordion .accordion-header .pl-collapsible-icon {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
}
div.tasks-container .tm-accordion.open .accordion-header {
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}
div.tasks-container .tm-accordion .accordion-body { padding: 10px 12px; }
div.tasks-container .edit-view-container .task-attrs ul { margin: 0; padding: 0; }

/* Field rows: label and value on ONE line, on a fixed label column.
   The stacked variant this replaces cost 64px a field -- five fields filled the
   rail before Details even opened. Jira's rows are 32px; these are 30px.
   Grid rather than the nested col-md-4 / col-md-8, whose ~40px label wrapped
   "Assigned to:" mid-word as "Assign / ed to:". */
div.tasks-container .edit-view-container .task-attrs ul li.task-info { padding: 0; }

/* Bootstrap's `.row` clearfix emits `:before`/`:after` with `content:" "` and
   `display:table`. In a GRID container those generate two real grid items, so a
   2-child row became 4 items across two rows: the pseudo took cell 1, the label
   was pushed to cell 2, and the value wrapped onto a second row UNDER it and to
   its left -- values rendering outside the rail, left of their own labels.
   Measured live on 3092: grid-template-rows "18px 28px" from two DOM children.
   The same applies to the flex status row below, where they become flex items
   and eat two `gap`s. Kill them wherever this file changes a `.row`'s display. */
.tasks-container .task-attrs .task-info > .row.form-group::before,
.tasks-container .task-attrs .task-info > .row.form-group::after,
.tasks-container .task-status-row::before,
.tasks-container .task-status-row::after {
    content: none;
}

.tasks-container .task-attrs .task-info > .row.form-group {
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    margin: 0;
    min-height: 30px;
}
.tasks-container .task-attrs .task-info > .row.form-group > [class^="col-md-"],
.tasks-container .task-attrs .task-info > .row.form-group > [class*=" col-md-"] {
    width: auto;
    max-width: none;
    float: none;
    padding: 0;
    min-width: 0;
}

.tasks-container .task-attrs .task-info-label {
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    margin: 0;
    padding: 0;
    color: var(--d3v-n-500, #64748B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Values sit flush against the label column and fill the rest of the rail.
   select2 renders its own container; a hardcoded data-width would poke out. */
.tasks-container .task-attrs .task-info .select2-container { width: 100% !important; }
.tasks-container .task-attrs .task-info .select2-container .select2-choice {
    height: 28px;
    line-height: 26px;
    border-radius: var(--d3v-r-sm, 4px);
    border-color: transparent;
    background: transparent;
    background-image: none;
    box-shadow: none;
    font-size: 13px;
    color: var(--d3v-text-primary, #1E293B);
}
/* Quiet until you reach for it -- the Jira behaviour of a field that only looks
   like an input on hover. */
.tasks-container .task-attrs .task-info .select2-container:hover .select2-choice {
    border-color: var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.tasks-container .task-attrs .task-info input.form-control {
    height: 28px;
    font-size: 13px;
    padding: 2px 6px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.tasks-container .task-attrs .task-info input.form-control:hover {
    border-color: var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.tasks-container .task-attrs .task-info input.form-control:focus {
    border-color: var(--d3v-accent, #3B82F6);
    background: #FFF;
}

/* The estimated-time helper is 182 characters of format instructions, and it
   made that one row 107px in a rail whose other 15 rows are 30px. Reveal it
   when the field is engaged, which is the only time it is useful -- the input's
   own placeholder ("1w 3d 5h") carries the format the rest of the time, so
   nothing is hidden from someone who has not asked. */
.tasks-container .task-attrs .task-info small.dimgrey {
    display: none;
    font-size: 11px;
    line-height: 15px;
    margin-top: 4px;
    color: var(--d3v-text-muted, #94A3B8);
}
.tasks-container .task-attrs .task-info:focus-within small.dimgrey { display: block; }

/* Created / Updated: Jira's is a footnote at the foot of the rail. This was
   1.2em -- larger than the field values it sits under. */
.tasks-container .col-md-4 > .task-info {
    font-size: 11.5px !important;
    line-height: 16px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    color: var(--d3v-text-muted, #94A3B8);
}
.tasks-container .col-md-4 > .task-info .form-group { margin: 0 0 2px 0; }

/* select2 3.5 paints its own chrome: a grey gutter with a 1px border-left and a
   sprite caret. Inside a Jira-style rail that reads as a 2012 form control
   bolted onto a 2026 layout. Flatten it to a plain caret.
   Scoped to the detail rail on purpose -- `.task-attrs` appears exactly ONCE in
   the whole template, so the create modal (task-form-tpl, which shares the same
   .tm-select2 initializer) is untouched. */
.tasks-container .task-attrs .select2-container .select2-arrow,
.tasks-container .task-status-row .select2-container .select2-arrow {
    background: transparent;
    background-image: none;
    border-left: 0;
    width: 18px;
}
.tasks-container .task-attrs .select2-container .select2-arrow b,
.tasks-container .task-status-row .select2-container .select2-arrow b {
    background-image: none;
    position: relative;
}
.tasks-container .task-attrs .select2-container .select2-arrow b:after,
.tasks-container .task-status-row .select2-container .select2-arrow b:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--d3v-text-muted, #94A3B8);
}
.tasks-container .task-status-row .select2-container .select2-arrow b:after {
    border-top-color: var(--d3v-text-secondary, #475569);
}
/* The clear-x sits on top of the caret and only matters once a value is set. */
.tasks-container .task-attrs .select2-container .select2-search-choice-close { opacity: 0; }
.tasks-container .task-attrs .task-info:hover .select2-search-choice-close { opacity: .5; }
.tasks-container .task-attrs .select2-search-choice-close:hover { opacity: 1; }

/* An unset field should read as unset, not as an empty control. */
.tasks-container .task-attrs .select2-container .select2-chosen .select2-default,
.tasks-container .task-attrs .select2-container .select2-default {
    color: var(--d3v-text-muted, #94A3B8);
}

/* ============================================================================
   Task list panel  --  Added by Claude on 8/21/26 - tasks-app-overhaul.
   The list beside the pane is half of the first impression, and it inherited
   Bootstrap's .list-group-item.active: a solid #428bca fill with white text, on
   top of which `li.active .task-key > * { color:#FFF!important }` forced the id
   white too. A saturated block is a heavy way to say "this row is open".
   Jira tints the selected row and marks it with a rule; the text stays legible.
   ========================================================================== */

div.tasks-container .detail-view .tasks-list-content { flex: 0 0 264px; }

div.tasks-container .detail-view .tasks-list-content .tasks-list {
    border-right: 1px solid var(--d3v-border, #E2E8F0);
}

div.tasks-container .detail-view li.task-item.list-group-item {
    border: 0;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    border-left: 3px solid transparent;   /* reserved so selecting a row does not
                                             shift its text sideways */
    border-radius: 0;
    padding: 8px 10px;
    background: transparent;
}
div.tasks-container .detail-view .tasks-list-content li:hover {
    background-color: var(--d3v-bg-secondary, #F8FAFC);
}

div.tasks-container .detail-view li.task-item.list-group-item.active,
div.tasks-container .detail-view li.task-item.list-group-item.active:hover,
div.tasks-container .detail-view li.task-item.list-group-item.active:focus {
    background-color: #E9F2FF;                       /* Jira's selected-row tint */
    border-left-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-text-primary, #1E293B);
}
/* The white-on-blue override has to be beaten with the same weapon. */
div.tasks-container .detail-view .tasks-list-content li.active .task-key > * {
    color: var(--d3v-text-secondary, #475569) !important;
}

/* Key line above, summary below -- the summary is what you are looking for, so
   it gets the weight, not the id. */
div.tasks-container .detail-view .tasks-list-content .task-key {
    margin-bottom: 2px;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--d3v-text-muted, #94A3B8);
}
div.tasks-container .detail-view .tasks-list-content .task-key .task-id {
    font-weight: 600;
    letter-spacing: .01em;
}
div.tasks-container .detail-view .tasks-list-content .task-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* a long task name should say two lines' worth
                                   and stop, not push the next row off-screen */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    color: var(--d3v-text-primary, #1E293B);
}
div.tasks-container .detail-view li.task-item.list-group-item.active .task-name {
    font-weight: 600;
}

/* select2 reserves 26px on the right of the chosen text for its arrow gutter.
   The gutter is flattened above, so that reservation is now just lost width --
   and in a 320px rail it was enough to truncate "Pedestrian Protection 2026". */
.tasks-container .task-attrs .select2-container .select2-chosen { margin-right: 18px; }

/* ============================================================================
   Tasks app root height  --  Added by Claude on 8/21/26 - tasks-app-overhaul.

   `app/views/user/tasks.tpl` hardcoded `min-height:900px` inline on the app
   root. That is a fixed floor in a shell that is not fixed: `#main_content`
   under `body.app-shell-frozen` is a bounded flex column (style.css ~12174),
   and the simulations adapter beside it already threads that bounded height
   down into its page. A 900px floor stops the Tasks root taking part -- on a
   window taller than the floor the page ends early and leaves dead space
   below the content; on a shorter one it forces the frozen shell to scroll.

   Measured on a 1037px viewport: #main_content 949px (52px header + 36px
   footer = 88px of chrome), app root pinned at 900 -> 49px stranded, and the
   content inside it stopped 170px earlier still.

   Height now comes from here. The inline style keeps only min-width, which is
   a genuine lower bound for this layout rather than a height guess.
   Scoped by [data-app-name="Tasks"]: `#admin-index-container` is a SHARED id
   -- admin logs, stats and workordertemplates each render their own copy of
   the same element -- so nothing outside Tasks is touched.
   ========================================================================== */

/* Frozen shell: fill the bounded column, the way the simulations adapter does. */
body.app-shell-frozen #admin-index-container[data-app-name="Tasks"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* THE SMALL-SCREEN ESCAPE HATCH (replaces min-height:0, 8/21/26).
       min-height:0 let the root shrink to nothing, so on a short viewport the
       app squeezed instead of scrolling. 620px is the floor: above it the item
       just fills the shell (flex:1 1 auto) and the inner panels scroll; below
       it the root outgrows #main_content, which style.css already gives
       `overflow-y:auto` under .app-shell-frozen (the "GENERIC PAGE FALLBACK"
       block, ~12197), so the shell becomes the scroller. That is why there is
       no media query -- one threshold, and the fallback that consumes it is
       already in core. */
    min-height: 620px;
}
body.app-shell-frozen #admin-index-container[data-app-name="Tasks"] > .tasks-container {
    flex: 1 1 auto;
    min-height: 0;
}

/* Un-frozen fallback. Still a floor -- the app root must not collapse while the
   loading screen is the only thing in it -- but one that tracks the window
   instead of guessing. 88px is the measured chrome (52 header + 36 footer),
   the same idea as the `calc(100vh - 140px)` already used for this element id
   in admin.css and account.css. */
#admin-index-container[data-app-name="Tasks"] {
    min-height: calc(100vh - 88px);
}

/* ==========================================================================
   LEFT RAIL  --  added by Claude on 8/21/26, tasks-app-overhaul.

   Brings the Tasks rail onto the house design language (/d3view-design:
   `.sim-left-col` + `.sim-new-btn` + `.sim-filter-label` + `.sim-filter-list`
   + `.sim-filter-icon`, as shipped on Simulations / Physical Tests).

   Tasks cannot reuse those classes directly: its rail is not a hand-rolled
   `<ul>` of filter links, it is the SHARED tree_view component
   (`.tree-view > ul.classic-tree-list`, PLUGINS/src/web/subrata_plugins/
   tree_view/), which also renders the Simlytiks page tree, saved filters and
   the assembler trees. So this block re-skins that component to MATCH the sim
   rail rather than replacing the markup -- every rule is scoped to
   div.tasks-container, so nothing else that uses tree_view moves.

   The one structural fact the whole block leans on: tree_view nests children
   inside `.list-item-children-container`, so
       > ul.classic-tree-list > li          == a SECTION HEADER (Favorites, Other, Filters)
       .list-item-children-container li     == a LEAF (All, My Tasks, Open, ...)
   which is why the two are styled by ancestry and not by a class -- the
   component does not give them distinguishing classes.
   ========================================================================== */

/* --- New Task button --------------------------------------------------- */
div.tasks-container .left-col > .btn-group.btn-group-justified {
    display: block;
    margin-bottom: 4px;
}
div.tasks-container .left-col > .btn-group .btn.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #FFF !important;
    background: linear-gradient(135deg, #2C5282, #2B6CB0);
    background-image: linear-gradient(135deg, #2C5282, #2B6CB0);  /* beats the
                                   bootstrap gloss `background-image` gradient */
    border: none;
    border-radius: 8px;
    text-shadow: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(44, 82, 130, 0.25);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
div.tasks-container .left-col > .btn-group .btn.btn-primary:hover,
div.tasks-container .left-col > .btn-group .btn.btn-primary:focus {
    background-image: linear-gradient(135deg, #2B6CB0, #3182CE);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.35);
    transform: translateY(-1px);
    text-decoration: none;
}
div.tasks-container .left-col > .btn-group .btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(44, 82, 130, 0.25);
}
div.tasks-container .left-col > .btn-group .btn.btn-primary .fa-plus {
    font-size: 11px;
}
/* The button rendered with SQUARE left corners and near-circular right ones.
   Two unscoped global rules in style.css both fire on a sole child, because it
   is simultaneously :first-child and :last-child:

       :first-child { border-radius: 24px 0 0 24px !important }   (style.css:10326)
       :last-child  { border-radius: 0 20px 20px 0 !important }   (style.css:10330)

   Same specificity, so the LAST one wins outright -- TL 0 / TR 20 / BR 20 / BL 0.
   (An older pair at :9941-9954 is inert: `border-radius-topleft` is not a real
   property.) These are rules we do not own and they are !important, which is the
   one case !important is actually for -- so match it, and pin all four corners
   rather than only the two that currently look wrong. */
div.tasks-container .left-col > .btn-group.btn-group-justified > .btn.btn-primary:first-child,
div.tasks-container .left-col > .btn-group.btn-group-justified > .btn.btn-primary:last-child {
    border-radius: 8px !important;
}

/* --- tree chrome ------------------------------------------------------- */
div.tasks-container .left-col .tree-view ul.classic-tree-list {
    padding: 0;
    margin: 0;
    list-style: none;
}
div.tasks-container .left-col .tree-view ul.classic-tree-list > li.classic-tree-list-item {
    margin: 0;
}
/* the component indents every nesting level by 12px (tree_view.css ~:289,
       .tree-view .classic-tree-list>.classic-tree-list-item div.list-item-children-container
       { width: calc(100% - 12px); margin-left: 12px }
   ). The leaf rows below carry their own icon gutter, so that indent only eats
   rail width and pushes every row off-centre.

   NOTE the `> .classic-tree-list > .classic-tree-list-item >` in the selector.
   The obvious short form is a specificity TIE with tree_view's rule -- both are
   (0,4,1) -- so which one won came down to bundle order, and tree_view's won.
   Measured 2026-08-21: rows still sat 12px right of centre with the short form
   in place. Five classes beats four; no !important needed. */
div.tasks-container .left-col .tree-view .classic-tree-list > .classic-tree-list-item > div.list-item-children-container {
    width: 100%;
    margin-left: 0;
}

/* --- SECTION HEADERS (top level) --------------------------------------- */
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item {
    margin-top: 14px;
}
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item:first-child {
    margin-top: 6px;
}
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content {
    padding: 4px 4px 4px 2px;
    border-radius: 0;
    background: none !important;    /* the shared component tints these on hover
                                       and marks them .tv-active with an
                                       !important fill -- a section header is a
                                       label, not a selectable row. */
    cursor: pointer;
}
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content .classic-tv-content {
    margin-left: 0;
    flex: 1 1 auto;
    min-width: 0;
}
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content h2,
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content > .classic-tv-content > label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94A3B8;
    line-height: 16px;
    margin: 0;
    cursor: pointer;
}
/* the expand chevron: the component puts it BEFORE the label at 10px wide.
   Push it to the trailing edge so the labels all start on one line. */
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content > .tv-exapnd-folder {
    order: 2;
    width: auto;
    font-size: 11px;
    color: #CBD5E1;
    transition: color 0.15s ease;
}
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content:hover > .tv-exapnd-folder,
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content:hover h2,
div.tasks-container .left-col .tree-view > ul.classic-tree-list > li.classic-tree-list-item > div.list-item-content:hover > .classic-tv-content > label {
    color: #64748B;
}

/* --- LEAF ROWS (the actual filters) ------------------------------------ */
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin: 1px 0;
    border-radius: 6px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content:hover {
    background-color: #F1F5F9;
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content .classic-tv-content {
    margin-left: 0;
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content label {
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    line-height: 18px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* icon badge -- the sim rail's .sim-filter-icon, applied to whatever icon the
   tree config happens to give the row. */
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content .classic-tv-content > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0 8px 0 0 !important;   /* beats the markup's .mr5 */
    border-radius: 5px;
    font-size: 11px;
    background: #F1F5F9;
    color: #94A3B8;
    transition: background 0.15s ease, color 0.15s ease;
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content:hover .classic-tv-content > i {
    background: #E2E8F0;
    color: #64748B;
}

/* active row. The shared component sets
       .classic-tree-list > .classic-tree-list-item div.list-item-content.tv-active
       { background-color:#a4d5ff !important }
   so this needs !important to land -- that is beating a rule we do not own,
   which is the one case it is for. */
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content.tv-active {
    background-color: #E0ECF8 !important;
    box-shadow: inset 2px 0 0 var(--d3v-accent, #2C5282);
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content.tv-active label {
    color: #2C5282;
    font-weight: 600;
}
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content.tv-active .classic-tv-content > i {
    background: #CCDDF0;
    color: #2C5282;
}

/* --- semantic icon tints (mirrors .sim-filter-icon.icon-*) --------------

   NOTE the long prefix. These MUST carry the same class count as the base
   badge rule above plus the attribute, or they lose. Measured 2026-08-21: the
   short form
       ... .tree-view [data-id="done"] > div.list-item-content ... > i
   is (0,6,3) against the base rule's (0,7,3), so every semantic tint computed
   as the default grey and the whole block was silently dead. -------------- */

div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="done"] > div.list-item-content .classic-tv-content > i,
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="resolved_recently"] > div.list-item-content .classic-tv-content > i {
    background: #D4EDDA;
    color: #155724;
}

div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="overdue"] > div.list-item-content .classic-tv-content > i {
    background: #F8D7DA;
    color: #721C24;
}

div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="due_on"] > div.list-item-content .classic-tv-content > i {
    background: #FFF3CD;
    color: #856404;
}

div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="assigned_to_me"] > div.list-item-content .classic-tv-content > i,
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="assigned_by_me"] > div.list-item-content .classic-tv-content > i {
    background: #D1ECF1;
    color: #0C5460;
}

div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item[data-id="open"] > div.list-item-content .classic-tv-content > i {
    background: #E8F0FE;
    color: #2C5282;
}

/* an active row's own tint always wins over the semantic one -- same
   specificity (0,8,3), and it comes last. */
div.tasks-container .left-col .tree-view .list-item-children-container li.classic-tree-list-item > div.list-item-content.tv-active .classic-tv-content > i {
    background: #CCDDF0;
    color: #2C5282;
}

/* --- empty state + "Add Filters" --------------------------------------- */
div.tasks-container .left-col .tree-view ul.classic-tree-list:empty:after {
    padding: 4px 8px;
    margin: 2px 0;
    font-size: 12px;
    color: #94A3B8;
}
div.tasks-container .left-col .tree-view .add-container {
    padding: 5px 8px;
    margin: 1px 0;
    border-radius: 6px;
    transition: background 0.15s ease;
}
div.tasks-container .left-col .tree-view .add-container:hover {
    background-color: #F1F5F9;
}
div.tasks-container .left-col .tree-view span.tv-add-item {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-accent, #2C5282);
}
div.tasks-container .left-col .tree-view span.tv-add-item:before {
    content: '\f067';
    font-family: 'FontAwesome', serif;
    font-size: 9px;
    margin-right: 7px;
    opacity: 0.75;
}

/* --- rail scrollbar: thin and quiet ------------------------------------ */
div.tasks-container .left-col .left-col-content::-webkit-scrollbar {
    width: 8px;
}
div.tasks-container .left-col .left-col-content::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 4px;
}
div.tasks-container .left-col .left-col-content:hover::-webkit-scrollbar-thumb {
    background: #CBD5E1;
}
div.tasks-container .left-col .left-col-content::-webkit-scrollbar-track {
    background: transparent;
}

/* --- delete control on a saved filter ---------------------------------- */
/* Rendered by the custom `renderContent` in LeftView.renderTreeView, only for
   entries with `removable: true`. Hidden until the row is hovered/active so
   the rail stays quiet, but ALWAYS in the layout (visibility, not display) --
   otherwise the label reflows under the cursor as you move down the list. */
div.tasks-container .left-col .tree-view .tasks-filter-remove {
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #94A3B8;
    font-size: 10px;
    line-height: 18px;
    visibility: hidden;
    transition: background 0.15s ease, color 0.15s ease;
}
div.tasks-container .left-col .tree-view .list-item-content:hover .tasks-filter-remove,
div.tasks-container .left-col .tree-view .list-item-content.tv-active .tasks-filter-remove,
div.tasks-container .left-col .tree-view .tasks-filter-remove:focus {
    visibility: visible;
}
div.tasks-container .left-col .tree-view .tasks-filter-remove:hover {
    background: #FEE2E2;
    color: #B91C1C;
}
/* the label must yield the space rather than push the button out of the row */
div.tasks-container .left-col .tree-view .list-item-content:has(.tasks-filter-remove) label {
    flex: 0 1 auto;
}

/* ==========================================================================
   DATA FILTERS MODAL  --  scoped to .tasks-data-filters
   added by Claude on 8/21/26, tasks-app-overhaul.

   The dialog is the SHARED Simlytiks FilterDatasetsView -- the same modal
   serves Simlytiks, Workflow and the data profiler, and it carries the shared
   `sl-data-filters` class. Tasks tags its own instance with
   `.tasks-data-filters` (views/tasks.views.js, addNewFilter) purely so this
   block can exist without touching any of them.

   Several declarations below carry !important. That is not laziness: the
   shared TEMPLATE writes inline styles (`style="border-right: 1px solid #DDD"`
   on #filtersList, `style="position:absolute;right:40px"` on the record count),
   and an inline style outranks every non-important author rule. The right fix
   is normally to delete the inline declaration -- but the writer here is a
   shared simlytiks template with four other consumers, so beating it is the
   correct instrument. See .claude/rules/fix-the-writer-not-the-cascade.md.
   ========================================================================== */

/* --- the dialog itself -------------------------------------------------- */
.tasks-data-filters .modal-dialog {
    width: min(1080px, 82vw) !important;   /* beats the inline width:45% */
    margin: 0 !important;                  /* beats the inline margin:7px auto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;  /* bootstrap's
                     .modal.in .modal-dialog{transform:translate(0,0)} ties on
                     specificity, so this has to be important to land */
}
.tasks-data-filters .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

/* --- header ------------------------------------------------------------- */
.tasks-data-filters .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FFF;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}
.tasks-data-filters .modal-header .modal-title {
    display: flex !important;              /* beats the inline display:inline-block */
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1E293B;
}
.tasks-data-filters .modal-header .modal-title > .fa-filter {
    font-size: 13px;
    color: #64748B;
}
/* the count reads as a bare number glued to the title; make it a pill */
.tasks-data-filters .modal-header .df_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #E8F0FE;
    color: #2C5282;
    font-size: 11px;
    font-weight: 600;
}
/* "Total number of records: N" ships as position:absolute right:40px, so it
   sits UNDER the window-chrome buttons at any width the dialog actually gets.
   Put it back in flow as a quiet meta chip. */
.tasks-data-filters .modal-header .modal-title > .pull-right {
    position: static !important;
    right: auto !important;
    float: none !important;
    margin-left: auto;
    padding-right: 12px;
    font-size: 11.5px;
    font-weight: 500;
    color: #94A3B8;
    white-space: nowrap;
}
.tasks-data-filters .modal-header .btn-group.pull-right {
    flex: 0 0 auto;
    float: none !important;
}
.tasks-data-filters .modal-header .btn-group > .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    text-shadow: none;
    color: #94A3B8;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}
.tasks-data-filters .modal-header .btn-group > .btn:hover {
    background: #F1F5F9;
    color: #334155;
}
.tasks-data-filters .modal-header .btn-group > #cancel:hover {
    background: #FEE2E2;
    color: #B91C1C;
}

/* --- body: two real panes, not a bootstrap grid ------------------------- */
.tasks-data-filters .modal-body {
    background: #FFF;
}
.tasks-data-filters .modal-body > .plugin-tabs {
    height: 100%;
    min-height: 0;
}
/* col-md-3 / col-md-9 are floated percentage columns inside a flex row -- the
   float is inert but the percentage width and the 15px gutters are not. */
.tasks-data-filters #filtersList.col-md-3 {
    flex: 0 0 262px;
    width: auto;
    float: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 12px;
    background: #FCFDFE;
    border-right: 1px solid var(--d3v-border, #E2E8F0) !important;  /* inline #DDD */
}
.tasks-data-filters .tab-content.col-md-9 {
    flex: 1 1 auto;
    width: auto;
    float: none;
    min-width: 0;
    min-height: 0;
    padding: 16px 18px;
    overflow: auto;              /* the pane scrolls, never the dialog */
}

/* --- left pane: search, list, add -------------------------------------- */
.tasks-data-filters #filtersList > .clearfix:first-child {
    flex: 0 0 auto;
    margin: 0 0 10px 0;
}
.tasks-data-filters .search-filters.form-control {
    height: 32px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: #334155;
    background: #FFF;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tasks-data-filters .search-filters.form-control:focus {
    border-color: #2C5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
.tasks-data-filters ul.existing-filters-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tasks-data-filters ul.existing-filters-list > li {
    margin-bottom: 2px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.tasks-data-filters ul.existing-filters-list > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
    text-decoration: none !important;
    border-radius: 6px;
}
.tasks-data-filters ul.existing-filters-list > li:hover > a {
    background: #F1F5F9;
    color: #1E293B;
}
.tasks-data-filters ul.existing-filters-list > li.active > a,
.tasks-data-filters ul.existing-filters-list > li.isediting > a {
    background: #E0ECF8;
    color: #2C5282;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #2C5282;
}
.tasks-data-filters ul.existing-filters-list .filter-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tasks-data-filters ul.existing-filters-list .filter-options {
    flex: 0 0 auto;
    gap: 8px;
}
.tasks-data-filters ul.existing-filters-list .filter-options .badge {
    background: #E2E8F0;
    color: #475569;
    font-size: 10px;
    font-weight: 600;
}
.tasks-data-filters ul.existing-filters-list .filter-options .fa {
    color: #94A3B8;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.tasks-data-filters ul.existing-filters-list .filter-options .edit_filter:hover { color: #2C5282; }
.tasks-data-filters ul.existing-filters-list .filter-options .remove_filter:hover { color: #B91C1C; }
.tasks-data-filters ul.existing-filters-list > li.empty {
    padding: 14px 10px;
    font-size: 12px;
    color: #94A3B8;
    text-align: center;
}
.tasks-data-filters #filtersList > .clearfix.center.mt10 {
    flex: 0 0 auto;
    margin: 10px 0 0 0;
}
/* NOTE the long selector, and see the sibling comment on .btn.add_filter's
   radius below: tasks.css is bundled BEFORE style.css (measured on the served
   page: this sheet at rule index ~0.135, style.css at ~0.675), so a specificity
   TIE against a global !important loses on source order. Everything here that
   fights a global must WIN on specificity, not on position. */
.tasks-data-filters .btn.add_filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #FFF !important;
    background: #2C5282;
    background-image: none;
    border: none;
    /* radius is set by the higher-specificity rule below -- see why there */
    text-shadow: none;
    box-shadow: none;
    transition: background 0.15s ease;
}
.tasks-data-filters .btn.add_filter:hover,
.tasks-data-filters .btn.add_filter:focus {
    background: #2B6CB0;
    text-decoration: none;
}
.tasks-data-filters .btn.add_filter i { font-size: 10px; }
/* The same global pair that squared off the New Task button in the rail:

       .btn-group-justified .btn:first-child { border-radius:24px 0 0 24px !important }
       .btn-group-justified .btn:last-child  { border-radius:0 20px 20px 0 !important }

   A sole child is BOTH, so the second one wins outright. They are (0,3,0)
   !important, and `.tasks-data-filters .btn.add_filter` is also (0,3,0) -- a tie
   that style.css wins because it is bundled later. Measured on the live modal:
   computed 0px with the short selector in place, which is why this needs the
   extra classes rather than just !important. */
.tasks-data-filters .btn-group.btn-group-justified > .btn.add_filter:first-child,
.tasks-data-filters .btn-group.btn-group-justified > .btn.add_filter:last-child {
    border-radius: 8px !important;
}

/* --- right pane: the filter editor ------------------------------------- */
.tasks-data-filters .tab-pane.empty > div {
    max-width: 340px;             /* the placeholder SVG is width:100% and
                                     ballooned to the full pane width */
    margin: 0 auto;
    padding-top: 6vh;
    opacity: 0.85;
}
.tasks-data-filters .tab-pane.empty .center {
    margin-top: 14px;
    font-size: 12.5px;
    color: #94A3B8;
    line-height: 1.6;
}
.tasks-data-filters .tab-pane .row.filter-attr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;
    padding: 0;
    border: none;
}
.tasks-data-filters .tab-pane .row.filter-attr::before,
.tasks-data-filters .tab-pane .row.filter-attr::after {
    content: none;               /* bootstrap's .row clearfix pseudos become
                                    FLEX ITEMS here and add two phantom columns */
}
.tasks-data-filters .tab-pane .row.filter-attr > .col-md-3 {
    flex: 0 0 132px;
    width: auto;
    float: none;
    padding: 0;
}
.tasks-data-filters .tab-pane .row.filter-attr > .col-md-9 {
    flex: 1 1 auto;
    width: auto;
    float: none;
    min-width: 0;
    padding: 0;
}
.tasks-data-filters .tab-pane .row.filter-attr h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.tasks-data-filters .tab-pane .form-control {
    height: 32px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: #334155;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tasks-data-filters .tab-pane .form-control:focus {
    border-color: #2C5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}
.tasks-data-filters .tab-pane .alert-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #334155;
    background: #F1F5F9;
    background-image: none;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 8px;
}
.tasks-data-filters .tab-pane .alert-info .btn.show_records {
    padding: 0 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2C5282;
    background: none;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none !important;   /* it ships an inline
                                           style="text-decoration: underline" */
}
.tasks-data-filters .tab-pane .conditions-container {
    margin: 0;
    padding: 0;
}
.tasks-data-filters .tab-pane .error-text {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #B91C1C;
}

/* --- footer ------------------------------------------------------------- */
.tasks-data-filters .modal-footer {
    display: flex;
    flex-direction: row-reverse;   /* the buttons are `pull-right`, so DOM order
                                      is Apply then Cancel and float put Apply
                                      rightmost. Floats are inert in a flex
                                      container, so reverse the row to keep the
                                      same visual order. */
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #FCFDFE;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
}
.tasks-data-filters .modal-footer > .btn {
    float: none !important;
    margin: 0 !important;          /* beats the inline margin-right:4px */
    min-width: 92px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.tasks-data-filters .modal-footer > .btn-primary {
    color: #FFF;
    background: #2C5282;
    border: 1px solid #2C5282;
}
.tasks-data-filters .modal-footer > .btn-primary:hover:not(.disabled) {
    background: #2B6CB0;
    border-color: #2B6CB0;
}
.tasks-data-filters .modal-footer > .btn-default {
    color: #475569;
    background: #FFF;
    border: 1px solid var(--d3v-border, #E2E8F0);
}
.tasks-data-filters .modal-footer > .btn-default:hover {
    background: #F1F5F9;
}
.tasks-data-filters .modal-footer > .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ==========================================================================
   PAGE HEADER  --  added by Claude on 8/21/26, tasks-app-overhaul.
   /d3view-design + the house tokens in .claude/rules/frontend-style.md.

   Rahul's brief: "The only things up here should be the import button, export
   button, and options - options we can keep and change into the settings since
   the options is technically settings."

   What the header was carrying, and where each piece went:

     search + filter toggle   -> row 2, docked to the view (asked for)
     "Options" dropdown       -> renamed Settings; same `.settings-dd` class, so
                                 the settings template and its change handlers
                                 are untouched
     cog dropdown             -> DELETED as a container; its nested
                                 Import / Export>submenu became two real buttons
     view tabs                -> row 2, left, where tabs belong relative to the
                                 content they switch

   Row 2 (`.tasks-view-toolbar`) is deliberately still inside `.main-header` in
   the DOM: MainHeaderView is bound to `div.main-header` and delegates
   searchTasks / filtersDD / toggleFilters from there. It is styled to read as
   the table's own toolbar -- flush to the view, no gap.
   ========================================================================== */

/* --- the house button, ported to Tasks --------------------------------- */
div.tasks-container .tsk-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--d3v-border, #DFE3E8);
    border-radius: 8px;
    background: #F7F9FB;
    background-image: none;      /* bootstrap-theme paints a gloss gradient */
    color: #334155;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
div.tasks-container .tsk-btn:hover,
div.tasks-container .tsk-btn:focus,
div.tasks-container .open > .tsk-btn {
    background: #EEF2F6;
    border-color: #CBD5E1;
    color: #1E293B;
    text-decoration: none;
    outline: none;
}
div.tasks-container .tsk-btn > .fa,
div.tasks-container .tsk-btn > .fas { font-size: 12px; }
div.tasks-container .tsk-btn .tsk-caret { font-size: 10px; color: #94A3B8; margin-left: 1px; }

/* quiet icon-only control (refresh, filter) */
div.tasks-container .tasks-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #94A3B8;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
div.tasks-container .tasks-icon-btn:hover,
div.tasks-container .tasks-icon-btn:focus {
    background: #F1F5F9;
    color: #334155;
    outline: none;
}

/* --- row 1: title + actions -------------------------------------------- */
div.tasks-container .tasks-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 0 2px 12px;
    margin: 0;
}
div.tasks-container .tasks-header-bar .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
div.tasks-container .tasks-header-bar .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
div.tasks-container h1.tasks-active-tv-label {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* the count is a pill, not a bootstrap badge blob */
div.tasks-container .tasks-header-bar .tasks_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #E8F0FE;
    color: #2C5282;
    font-size: 11px;
    font-weight: 600;
}

/* --- row 2: the view's own toolbar ------------------------------------- */
div.tasks-container .tasks-view-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 0 2px;
    /* flush to the content below -- this is what makes it read as the table's
       toolbar rather than a second page header */
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}
div.tasks-container .tasks-view-toolbar .tasks-search-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding-bottom: 6px;
}

/* view tabs: underline, sitting ON the toolbar's border */
div.tasks-container .tasks-view-toolbar ul.tasks-view-types {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 0 -1px 0;          /* overlap the toolbar border so the active
                                    tab's underline replaces it */
    padding: 0;
    min-width: 0;
    overflow-x: auto;
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid transparent;
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748B;
    text-decoration: none !important;
    white-space: nowrap;
    border-radius: 6px 6px 0 0;
    transition: color .12s ease, background .12s ease;
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li > a:hover {
    background: #F1F5F9;
    color: #334155;
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li.active {
    border-bottom-color: var(--d3v-accent, #2C5282);
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li.active > a {
    color: #2C5282;
    font-weight: 600;
}
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li > a .fa,
div.tasks-container .tasks-view-toolbar ul.tasks-view-types li > a [class*="fa-"] { font-size: 12px; }

/* search box with a leading icon */
div.tasks-container .tsk-search { position: relative; display: inline-block; }
div.tasks-container .tsk-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #94A3B8;
    pointer-events: none;
}
div.tasks-container .tsk-search .search-tasks.form-control {
    width: 230px;
    height: 32px;
    padding: 5px 10px 5px 28px;
    font-size: 12.5px;
    color: #334155;
    background: #FFF;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, width .15s ease;
}
div.tasks-container .tsk-search .search-tasks.form-control:focus {
    width: 280px;
    border-color: #2C5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, .1);
}
/* the filter toggle already has a green `.opened` state in this file; keep it
   but make it read as active rather than just recoloured */
div.tasks-container .tasks-icon-btn.filters-dd-toggle.opened {
    background: #E0ECF8;
    border-color: #B6CFE8;
    color: #2C5282;
}

/* the Settings menu is a panel, not a list */
div.tasks-container .tsk-settings-menu {
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}

/* Export / Settings menus: house treatment for the plain dropdown lists */
div.tasks-container .header-right .dropdown-menu:not(.tsk-settings-menu) {
    min-width: 150px;
    padding: 5px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
div.tasks-container .header-right .dropdown-menu:not(.tsk-settings-menu) > li > a {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #475569;
}
div.tasks-container .header-right .dropdown-menu:not(.tsk-settings-menu) > li > a:hover {
    background: #F1F5F9;
    color: #1E293B;
}

/* ==========================================================================
   FILTERS POPUP  --  added by Claude on 8/21/26.
   Replaces the full-width `.filters-outer-container` bar that was pushed in
   below the header (deleted from the template). The panel hosts the SAME
   FilterView -- `.filters-container` simply moved into it -- so filtering and
   its persistence path (onFilterChange -> onSaveSettings) are unchanged.

   Open/close is owned by MainHeaderView.setFiltersPanel, NOT bootstrap: BS3
   binds `clearMenus` to every document click and closes any open `.dropdown`,
   with a special case only for `.dropdown form`. The FilterView's controls are
   not in a form, so a bootstrap dropdown would shut the moment you touched one.
   Hence a plain `.tsk-filters-open` class rather than `.open`.
   ========================================================================== */
div.tasks-container .tsk-filter-wrap { position: relative; }
div.tasks-container .tsk-filters-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    left: auto;
    z-index: 1000;
    width: 420px;
    max-width: 92vw;
    padding: 0;
    margin: 0;
    background: #FFF;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
    overflow: hidden;
}
div.tasks-container .tsk-filter-wrap.tsk-filters-open .tsk-filters-panel { display: block; }

div.tasks-container .tsk-filters-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: #FCFDFE;
}
div.tasks-container .tsk-filters-panel-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
div.tasks-container .tsk-filters-panel-title .fa-filter { font-size: 11px; color: #94A3B8; }

div.tasks-container .tsk-filters-panel-body {
    padding: 12px 14px;
    /* the panel scrolls, never the page behind it */
    max-height: min(520px, 60vh);
    overflow-y: auto;
}
div.tasks-container .tsk-filters-panel-body .filters-container { margin: 0; }
/* the shared FilterView lays out horizontally for a wide bar; in a 420px panel
   it has to stack or every control truncates. */
div.tasks-container .tsk-filters-panel-body .d3view-filters,
div.tasks-container .tsk-filters-panel-body .d3view-filters-container { height: auto; width: 100%; }
div.tasks-container .tsk-filters-panel-body .filters-list ul.filter-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
div.tasks-container .tsk-filters-panel-body ul.filter-items .filter-item {
    width: 100%;
    margin: 0;
    float: none;
}

div.tasks-container .tsk-filters-panel-foot {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    background: #FCFDFE;
}
/* `.save_filter` is an <a>; give it the button treatment and an honest disabled
   state (it carries `.disabled`, which on an <a> does nothing on its own). */
div.tasks-container .tsk-filters-panel-foot .save_filter { text-decoration: none !important; }
div.tasks-container .tsk-btn.disabled,
div.tasks-container .tsk-btn[disabled] {
    opacity: .5;
    pointer-events: none;
    cursor: default;
}

/* Regression fix 8/21/26: the settings menu template carried an inline
   `style="width: 400px"` that the header rewrite dropped, so the menu rendered
   at its bootstrap min-width -- measured 201px live, far too narrow for the
   form. Restored as a rule rather than an inline style, per
   fix-the-writer-not-the-cascade.md. */
div.tasks-container .tsk-settings-menu { width: 400px; max-width: 92vw; }

/* ---- Settings menu footer ---- */
div.tasks-container .tsk-settings-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
}


/* ==========================================================================
   FILTER CONTROLS  --  house styling for the shared FilterView
   added by Claude on 8/21/26. Rahul: "the filters should use custom filter
   styling - not default bootstrap".

   `.d3view-filters` already HAS custom styling in stylesheets/filters.css
   (bundle index 113, so it loads AFTER tasks.css at 64 -- a specificity TIE
   would lose, which is why everything below is scoped by
   `div.tasks-container .tsk-filters-panel`). What it does not have is THIS
   app's language: measured before this block, the chips were 14px on a 30px
   full-round pill in #B9E3FE, the Add Filter control was a 27px
   `btn-outline-on-hover`, and the value input was 16px tall with a #666
   border. Brought onto the same 12.5px / 6-8px radius / #E2E8F0 scale as the
   rest of the page.

   Nothing here touches `.d3view-filters` globally -- the same component draws
   the filter bar on Studies, Simulations, Workflows and Physical Tests.
   ========================================================================== */

/* the chip */
div.tasks-container .tsk-filters-panel .filters-container span.filter-tag > span.label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 4px 0 10px;
    border-radius: 6px;
    background: #E8F0FE;
    color: #2C5282;
    font-size: 12px;
    font-weight: 600;
}
div.tasks-container .tsk-filters-panel .filters-container span.filter-tag .filter-value {
    display: inline-flex;
    align-items: center;
}
div.tasks-container .tsk-filters-panel .filters-container span.filter-tag .filter-input.form-control {
    height: 22px;
    min-height: 22px;
    padding: 2px 7px;
    border: 1px solid #C7D9EE;
    border-radius: 4px;
    background: #FFF;
    color: #334155;
    font-size: 12px;
    font-weight: 500;
    box-shadow: none;
}
div.tasks-container .tsk-filters-panel .filters-container span.filter-tag .filter-input.form-control:focus {
    border-color: #2C5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, .12);
}
div.tasks-container .tsk-filters-panel .filters-container span.remove-filter-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: #7191BC;
    font-size: 10px;
    transition: background .12s ease, color .12s ease;
}
div.tasks-container .tsk-filters-panel .filters-container span.remove-filter-tag:hover {
    background: #FEE2E2;
    color: #B91C1C;
}

/* the "Add Filter" control */
div.tasks-container .tsk-filters-panel .add-new-filter.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px dashed #CBD5E1;
    border-radius: 6px;
    background: transparent;
    background-image: none;
    color: #64748B;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
div.tasks-container .tsk-filters-panel .add-new-filter.btn:hover,
div.tasks-container .tsk-filters-panel .add-new-filter.btn:focus {
    background: #F1F5F9;
    border-color: #94A3B8;
    color: #334155;
}
div.tasks-container .tsk-filters-panel .add-new-filter.btn .fa,
div.tasks-container .tsk-filters-panel .add-new-filter.btn .fas { font-size: 10px; }

/* the shared wrapper draws itself as a form-control box; inside a panel that
   already has its own frame that is a box in a box. */
div.tasks-container .tsk-filters-panel .d3view-filters .advanced-filters.form-control {
    height: auto;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}
div.tasks-container .tsk-filters-panel .d3view-filters .filters-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
div.tasks-container .tsk-filters-panel .d3view-filters .filters-help-icon { color: #94A3B8; }

/* ---- the portaled available-filters list ----
   Created on <body> by the shared component, so it is stamped with
   `.tsk-filters-external` from MainHeaderView.onAddFilterClicked to give it a
   scope. Styling it unscoped would reach every page that uses FilterView. */
.d3view-filters-external.tsk-filters-external {
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .14);
    padding: 5px;
    background: #FFF;
    overflow: hidden;
}
.d3view-filters-external.tsk-filters-external [data-id] {
    border-radius: 6px;
    font-size: 12.5px;
    color: #475569;
}
.d3view-filters-external.tsk-filters-external [data-id]:hover {
    background: #F1F5F9;
    color: #1E293B;
}

/* ==========================================================================
   TABLE VIEW  --  /d3view-design pass, 8/21/26 (Claude, tasks-app-overhaul)

   Rahul's brief for this phase: no dropdown, house styling, fix the per-column
   filter + stats buttons, and render each row the way Jira does -- meaningful
   Priority and Status.

   SPECIFICITY NOTE, and it is the reason several rules below look heavier than
   they need to be. `style.json` bundles `spa/tasks/tasks.css` at index 64 and
   `stylesheets/style.css` at 173, so the page sheet loads FIRST. A rule here
   that merely TIES with a global one loses. Anything competing with a global
   `.label`, `.dropdown-menu`, `th` or `.popover` rule is therefore written one
   level heavier on purpose -- not as cargo cult.
   ========================================================================== */

/* --- Status: Jira lozenges ------------------------------------------------
   Colour comes from the CATEGORY (To Do / In Progress / Done), inline, from
   Config.Defaults.StatusCategoryMeta -- so a status nobody has seen before
   still lands in a legible bucket instead of bootstrap's grey `.label`.
   Everything here is SHAPE; the inline style owns the palette. */
div.tasks-container .tsk-lozenge,
.tsk-task-modal .tsk-lozenge,
.tsk-inline-menu .tsk-lozenge {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

div.tasks-container .tsk-lozenge-empty {
    background: transparent;
    border-color: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    letter-spacing: 0;
}

/* --- Priority: icon + label ----------------------------------------------
   Fixed 13px. The previous formatter scaled the icon between 75% and 175% of
   the row font-size by priority INDEX, so the four priorities rendered at four
   different sizes and the column visibly jittered from row to row. */
div.tasks-container .tsk-priority,
.tsk-task-modal .tsk-priority,
.tsk-inline-menu .tsk-priority {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    vertical-align: middle;
}

div.tasks-container .tsk-priority > i,
.tsk-inline-menu .tsk-priority > i {
    font-size: 13px;
    line-height: 1;
    width: 13px;
    text-align: center;
    flex: 0 0 auto;
}

div.tasks-container .tsk-priority-label,
.tsk-inline-menu .tsk-priority-label {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A task with no priority set is not the same as a task with a low one. Muted
   ring, no label -- present but quiet. */
div.tasks-container .tsk-priority-none > i { opacity: .55; }

/* --- Table chrome ---------------------------------------------------------
   `div.tasks-container` + the class DataTable2 puts on its own wrapper, so
   these cannot leak into any other app's table. */
div.tasks-container .tsk-table table.bs-dt > thead > tr > th {
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    color: var(--d3v-text-muted, #64748B);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 10px 12px;
}

div.tasks-container .tsk-table table.bs-dt > tbody > tr > td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF2F7);
    font-size: 13px;
    color: var(--d3v-text-primary, #1E293B);
    vertical-align: middle;
}

div.tasks-container .tsk-table table.bs-dt > tbody > tr:hover > td {
    background: var(--d3v-bg-hover, #F6F9FD);
}

/* The ID is the record's handle -- it opens the task -- so it reads as a link
   and nothing else in the row does. */
div.tasks-container .tsk-table table.bs-dt > tbody > tr > td[data-col="id"] a {
    font-weight: 600;
    color: var(--d3v-accent, #2E6FD9);
    text-decoration: none;
}
div.tasks-container .tsk-table table.bs-dt > tbody > tr > td[data-col="id"] a:hover {
    text-decoration: underline;
}

/* --- Editable cells -------------------------------------------------------
   The affordance problem: a cell that can be edited has to say so before it is
   clicked, or nobody discovers the feature. A dotted underline on hover is the
   lightest signal that does not add chrome to the resting row. */
div.tasks-container .tsk-table td[data-col="name"],
div.tasks-container .tsk-table td[data-col="due_on"],
div.tasks-container .tsk-table td[data-col="status"],
div.tasks-container .tsk-table td[data-col="priority"] {
    cursor: text;
}
div.tasks-container .tsk-table td[data-col="status"],
div.tasks-container .tsk-table td[data-col="priority"] {
    cursor: pointer;
}

div.tasks-container .tsk-table tbody tr:hover td[data-col="name"] .task-name,
div.tasks-container .tsk-table tbody tr:hover td[data-col="due_on"] .d3view-date {
    box-shadow: inset 0 -1px 0 0 var(--d3v-border, #CBD5E1);
}

div.tasks-container .tsk-table td.tsk-cell-editing {
    /* The editor is portaled over the cell; dimming what is underneath stops
       the old value reading through the editor's edges. */
    opacity: .25;
}

/* --- The inline editor (portaled to <body>) ------------------------------- */
.tsk-inline-editor {
    z-index: 1080;                       /* over the table, under a modal */
    background: #FFF;
    border: 1px solid var(--d3v-border, #CBD5E1);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
    padding: 4px;
    max-width: 380px;
}

.tsk-inline-editor .tsk-inline-input {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 13px;
    color: var(--d3v-text-primary, #1E293B);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.tsk-inline-editor .tsk-inline-loading {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
}

.tsk-inline-menu {
    list-style: none;
    margin: 0;
    padding: 2px;
    max-height: 264px;
    overflow-y: auto;
}

.tsk-inline-menu > li.tsk-inline-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    font-size: 13px;
    color: var(--d3v-text-primary, #1E293B);
}

.tsk-inline-menu > li.tsk-inline-opt:hover { background: var(--d3v-bg-hover, #F1F5F9); }

/* The value already on the record, marked so the menu answers "what is it now"
   as well as "what can it be". */
.tsk-inline-menu > li.tsk-inline-opt.is-current { background: var(--d3v-bg-secondary, #EFF5FE); }
.tsk-inline-menu > li.tsk-inline-opt.is-current::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    margin-left: auto;
    font-size: 11px;
    color: var(--d3v-accent, #2E6FD9);
}

.tsk-inline-menu > li.tsk-inline-clear {
    border-top: 1px solid var(--d3v-border-subtle, #EEF2F7);
    margin-top: 2px;
    color: var(--d3v-text-muted, #64748B);
    font-size: 12px;
}

/* --- Row hover toolbar: REMOVED ------------------------------------------
   Rahul, 8/22/26: "Lets get rid of this. We dont need it - the users can just
   click the respective column to do these actions."

   The removal is in JS, not here -- the table passes `toolbar: false`, so
   DataTable never appends the <ul class="dt-toolbar"> (DataTable.js:1482) and
   there is no markup left to style. The whole styling block that used to live
   at this spot is therefore gone rather than commented out.

   Its one action with no column equivalent, open-in-new-tab, moved into the ID
   cell (.tsk-open-tab below). The rest are reachable by clicking the cell:
   status, priority, due date and name all edit in place, and the Calendar view
   still carries the full context menu. */

/* --- ID cell: the task link + its open-in-a-tab control -------------------
   Two affordances, deliberately different in weight. The id is the primary
   one and reads as a link; the icon is quiet until the row is hovered, so a
   scan down the column is not a column of blue icons. */
div.tasks-container .tsk-table td[data-col="id"] .tsk-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

div.tasks-container .tsk-table td[data-col="id"] .tsk-id-link {
    font-weight: 600;
    color: var(--d3v-accent, #2E6FD9);
}

div.tasks-container .tsk-table td[data-col="id"] .tsk-open-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 11px;
    /* Reserve the space at all times: revealing the icon on hover must not
       reflow the cell, or the id shifts under the pointer mid-click. */
    opacity: 0;
    transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}

div.tasks-container .tsk-table tbody tr:hover .tsk-open-tab,
div.tasks-container .tsk-table .tsk-open-tab:focus {
    opacity: 1;
}

div.tasks-container .tsk-table .tsk-open-tab:hover {
    background: var(--d3v-bg-hover, #EFF5FE);
    color: var(--d3v-accent, #2E6FD9);
    opacity: 1;
}

/* --- Project column ------------------------------------------------------- */
div.tasks-container .tsk-table td[data-col="project_name"] .tsk-project {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: var(--d3v-text-secondary, #475569);
}

div.tasks-container .tsk-table td[data-col="project_name"] .tsk-project-none {
    color: var(--d3v-text-muted, #94A3B8);
}

/* --- Table footer: no pager, no row count --------------------------------
   Rahul, 8/22/26 -- the table shows every task and loads as you scroll, so a
   page chooser and a "Showing 1-10 of 17" line are both describing something
   that no longer happens.

   `autoPaging: false` already stops DataTable building the pager; these rules
   cover the OTHER branch of paginateAndDraw (DataTable.js:10578), which still
   writes "Showing N rows" into .dt-page-info unconditionally. Scoped to the
   tasks table so no other page's footer is touched. */
div.tasks-container .tsk-table .dt-page-info,
div.tasks-container .tsk-table .dt-pages,
div.tasks-container .tsk-table div.dt-pagination {
    display: none !important;
}

/* --- Column header icons --------------------------------------------------
   Sort already worked and is left exactly as it was. The stats (bar-chart)
   icon is removed from columns whose type it cannot plot -- see
   TableView.decorateHeaders for why, and note this is a per-column decision,
   not a blanket removal: numeric columns keep it. */
div.tasks-container .tsk-table th.tsk-no-stats .dataTypeIconAll { display: none !important; }

div.tasks-container .tsk-table th.tsk-th .th-options > span {
    color: var(--d3v-text-muted, #94A3B8);
}
div.tasks-container .tsk-table th.tsk-th .th-options > span:hover {
    color: var(--d3v-accent, #2E6FD9);
}

/* --- The portaled column FILTER menu --------------------------------------
   Stamped `.tsk-col-menu` by TableView.watchPortaledColumnMenus. It is a body
   child, so it cannot be reached by a `.tasks-container` descendant selector --
   the stamp is the only scope available, and it is why the observer exists. */
.dt-col-dropdown-menu.tsk-col-menu {
    border: 1px solid var(--d3v-border, #CBD5E1);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    padding: 0;
    min-width: 240px;
}

.dt-col-dropdown-menu.tsk-col-menu .tab-header {
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF2F7);
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-radius: 10px 10px 0 0;
}

.dt-col-dropdown-menu.tsk-col-menu .tab-header ul.nav-tabs { border-bottom: none; }

.dt-col-dropdown-menu.tsk-col-menu .tab-header ul.nav-tabs > li.nav-item > a {
    border: none;
    background: transparent;
    padding: 4px 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-muted, #64748B);
}
.dt-col-dropdown-menu.tsk-col-menu .tab-header ul.nav-tabs > li.nav-item.active > a {
    color: var(--d3v-text-primary, #1E293B);
    box-shadow: inset 0 -2px 0 0 var(--d3v-accent, #2E6FD9);
}

.dt-col-dropdown-menu.tsk-col-menu .tab-header .close {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 18px;
    line-height: 1;
    opacity: .5;
}
.dt-col-dropdown-menu.tsk-col-menu .tab-header .close:hover { opacity: 1; }

.dt-col-dropdown-menu.tsk-col-menu .tab-content { padding: 10px; }

/* The value list. NOTE the nesting: `.multiselect-container` appears TWICE --
   the outer one the plugin drops into, and the shared multiselect widget's own
   inner one. Styling `.multiselect-container > *` therefore lands on wrappers,
   not on rows: measured 2026-08-21, it padded `.d3view-multiselect` /
   `.multiselect-body` / `.multiselect-footer` and never touched an option.
   The actual rows are `.vlist .vrow.ui-selectee`. */
.dt-col-dropdown-menu.tsk-col-menu .dt-filters-container > .filter-multiselect > .multiselect-container {
    border: 1px solid var(--d3v-border-subtle, #EEF2F7);
    border-radius: var(--d3v-r-sm, 6px);
    margin-bottom: 8px;
    background: #FFF;
    overflow: hidden;
}

.dt-col-dropdown-menu.tsk-col-menu .vrow.ui-selectee {
    padding: 4px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 13px;
    cursor: pointer;
}
.dt-col-dropdown-menu.tsk-col-menu .vrow.ui-selectee:hover {
    background: var(--d3v-bg-hover, #EFF5FE);
}
.dt-col-dropdown-menu.tsk-col-menu .vrow.ui-selectee.ui-selected {
    background: var(--d3v-bg-secondary, #E8F0FE);
    color: var(--d3v-text-primary, #1E293B);
}

.dt-col-dropdown-menu.tsk-col-menu .multiselect-footer {
    padding: 4px 8px;
    border-top: 1px solid var(--d3v-border-subtle, #EEF2F7);
    font-size: 11px;
}

.dt-col-dropdown-menu.tsk-col-menu input.filter-ms {
    width: 100%;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--d3v-border, #C7D9EE);
    border-radius: var(--d3v-r-sm, 6px);
    font-size: 12px;
}
.dt-col-dropdown-menu.tsk-col-menu input.filter-ms:focus {
    outline: none;
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.dt-col-dropdown-menu.tsk-col-menu a.adv_search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}
.dt-col-dropdown-menu.tsk-col-menu a.adv_search:hover { color: var(--d3v-accent, #2E6FD9); }

/* The stats popover, same treatment so the two panels read as one family. */
.popover.bs-datatable-header-viz.tsk-col-stats {
    border: 1px solid var(--d3v-border, #CBD5E1);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}

/* --- Record tabs in the view strip ---------------------------------------
   Same strip as the four view modes, so they inherit `.tasks-view-types li`
   and only need what makes them a RECORD chip: a close button and a bounded
   label. A task name can be 60 characters; without the cap one open tab pushes
   the view modes off screen. */
div.tasks-container .tasks-view-types > li.tsk-record-tab {
    position: relative;
    max-width: 240px;
}

div.tasks-container .tasks-view-types > li.tsk-record-tab > a {
    display: inline-block;
    max-width: 240px;
    padding-right: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

div.tasks-container .tasks-view-types > li.tsk-record-tab .tsk-record-tab-label {
    font-size: 13px;
}

div.tasks-container .tasks-view-types > li.tsk-record-tab .tsk-record-tab-close {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s ease;
}

div.tasks-container .tasks-view-types > li.tsk-record-tab:hover .tsk-record-tab-close,
div.tasks-container .tasks-view-types > li.tsk-record-tab.active .tsk-record-tab-close {
    opacity: 1;
}

div.tasks-container .tasks-view-types > li.tsk-record-tab .tsk-record-tab-close:hover {
    background: var(--d3v-bg-hover, #EFF5FE);
    color: var(--d3v-danger, #C9302C);
}

/* --- Record panes ---------------------------------------------------------
   `#tabsContent` is the AppPage.attach contract; the record panes are its
   direct children and must fill it the way the views host does. */
div.tasks-container #tabsContent { position: relative; min-height: 0; }
div.tasks-container #tabsContent > .tabContent.hidden { display: none; }
div.tasks-container #tabsContent > .tabContent { height: 100%; overflow: auto; }

div.tasks-container .tsk-tab-error {
    padding: 24px;
    font-size: 13px;
    color: var(--d3v-danger, #C9302C);
}

/* --- The floating task modal ---------------------------------------------
   The detail view is a tall two-column layout; give it a real viewport slice
   and let IT scroll rather than the page behind it. */
.tsk-task-modal .modal-body.tsk-task-modal-body {
    padding: 0;
    max-height: calc(100vh - 190px);
    overflow: auto;
}

/* The back arrow belongs to the full-page route only. In a modal the X closes
   it; in a tab the strip is the navigation, and a back arrow there would drop
   the user on the list while silently leaving the tab open behind them. */
.tsk-hosted-surface #back-to-list-view { display: none !important; }

/* --- The floating task modal is scoped as a `.tasks-container` -------------
   Everything that styles the detail view is a `div.tasks-container ...`
   descendant rule, and the modal is portaled to <body>, outside the real
   container. TaskSurface.openModal therefore renders into a host that carries
   the container class so those rules apply -- and these three rules take back
   the declarations that belong to the PAGE SHELL and make no sense inside a
   modal: the frozen flex column, its overflow clip, and the 720px floor that
   would make the modal scroll sideways on a laptop.

   Keyed on `.tsk-modal-scope` so no other `.tasks-container` is affected. */
.tsk-task-modal .tasks-container.tsk-modal-scope {
    display: block;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: visible;
}

.tsk-task-modal .modal-body.tsk-task-modal-body { padding: 0 16px 8px; }

/* The detail view's own header already carries the task name; the modal title
   repeats it, so the pane starts at the breadcrumb rather than a second H1's
   worth of top margin. */
.tsk-task-modal .tsk-modal-scope > .tasks-edit-view,
.tsk-task-modal .tsk-modal-scope > div:first-child { margin-top: 0; }

/* ===================================================================== *
 * B1 blueprint panel (tskp-*) — tasks-app-overhaul, 8/23/26.
 * The approved blueprint (design/Main.dc.html) rendered in app CSS.
 * Scoped under .tsk-panel so nothing leaks into other tasks views.
 * ===================================================================== */
div.tasks-container .tsk-panel {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
    background: #FFFFFF; font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1E293B;
}

/* ---- top bar ---- */
div.tasks-container .tsk-panel .tskp-topbar {
    display: flex; align-items: center; gap: 10px; flex: 0 0 48px;
    padding: 0 12px 0 12px; border-bottom: 1px solid #E2E8F0; background: #FFFFFF;
}
div.tasks-container .tsk-panel .tskp-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; }
div.tasks-container .tsk-panel .tskp-crumb-project { font-weight: 500; color: #334155; }
div.tasks-container .tsk-panel .tskp-crumb-sep { color: #CBD5E1; }
div.tasks-container .tsk-panel .tskp-crumb-key {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px;
    background: #F1F5F9; font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
    font-size: 12px; font-weight: 500; color: #334155;
}
div.tasks-container .tsk-panel .tskp-spacer { flex: 1 1 auto; }
div.tasks-container .tsk-panel .tskp-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 28px; min-width: 28px; padding: 0 8px; border-radius: 6px; border: 0;
    background: none; color: #475569; cursor: pointer; font-size: 13px;
    transition: background .12s ease, color .12s ease;
}
div.tasks-container .tsk-panel .tskp-ghost:hover { background: #F1F5F9; color: #1E293B; }

/* ---- body: doc + rail ---- */
div.tasks-container .tsk-panel .tskp-body { display: flex; flex: 1 1 auto; min-height: 0; }
div.tasks-container .tsk-panel .tskp-doc {
    flex: 1 1 auto; min-width: 0; overflow-y: auto;
    padding: 20px 28px 36px; display: flex; flex-direction: column; gap: 16px;
}
div.tasks-container .tsk-panel .tskp-rail {
    flex: 0 0 348px; border-left: 1px solid #E2E8F0; background: #F8FAFC;
    overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px;
}

/* ---- title + stamp ---- */
div.tasks-container .tsk-panel .tskp-titlewrap { display: flex; align-items: flex-start; gap: 8px; }
div.tasks-container .tsk-panel .tskp-title {
    flex: 1 1 auto; font-size: 26px; line-height: 1.22; font-weight: 700; letter-spacing: -0.015em;
    margin: 0; padding: 4px 8px; margin-left: -8px; border-radius: 8px;
    border: 1px solid transparent; cursor: text;
    transition: background .12s ease, border-color .12s ease;
}
div.tasks-container .tsk-panel .tskp-title:hover { background: #F8FAFC; border-color: #E2E8F0; }
div.tasks-container .tsk-panel .task-header.isEditing .tskp-title { background: #FFFFFF; border-color: #3B82F6; outline: none; }
div.tasks-container .tsk-panel .tskp-stamp { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #94A3B8; }
div.tasks-container .tsk-panel .tskp-stamp b { font-weight: 500; color: #475569; }

/* ---- tabs ---- */
div.tasks-container .tsk-panel .tskp-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid #E2E8F0; }
div.tasks-container .tsk-panel .tskp-tab {
    position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px;
    padding: 0 12px; font-size: 14px; font-weight: 500; color: #64748B;
    border: 0; background: none; cursor: pointer; border-radius: 6px 6px 0 0;
    transition: color .12s ease, background .12s ease;
}
div.tasks-container .tsk-panel .tskp-tab:hover { background: #F8FAFC; color: #1E293B; }
div.tasks-container .tsk-panel .tskp-tab.on { color: #1E293B; }
div.tasks-container .tsk-panel .tskp-tab.on::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
    border-radius: 2px 2px 0 0; background: #3B82F6;
}
div.tasks-container .tsk-panel .tskp-pane { display: none; flex-direction: column; gap: 16px; }
div.tasks-container .tsk-panel .tskp-pane.on { display: flex; }

/* ---- section headings (attachments / linked) ---- */
div.tasks-container .tsk-panel .tskp-sechead {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #64748B; margin-bottom: 8px;
}
div.tasks-container .tsk-panel .task-description .description-editor { font-size: 14.5px; line-height: 1.62; color: #334155; }

/* ---- rail: status button ---- */
div.tasks-container .tsk-panel .tskp-statusrow { position: relative; }
div.tasks-container .tsk-panel .tskp-statusbtn {
    display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between;
    height: 34px; padding: 0 10px 0 12px; border-radius: 7px; font-size: 13.5px; font-weight: 500;
    border: 1px solid transparent; cursor: pointer; transition: filter .12s ease;
}
div.tasks-container .tsk-panel .tskp-statusbtn:hover { filter: brightness(.97); }
div.tasks-container .tsk-panel .tskp-statusbtn .task-done-icon { margin-left: auto; }

/* ---- rail: cards + fields ---- */
div.tasks-container .tsk-panel .tskp-card { border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF; overflow: visible; }
div.tasks-container .tsk-panel .tskp-card-hd {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    font-size: 13px; font-weight: 700; color: #1E293B;
}
div.tasks-container .tsk-panel .tskp-card-hd label { font-size: 13px; font-weight: 700; color: #1E293B; margin: 0; cursor: pointer; }
div.tasks-container .tsk-panel .tskp-card-bd { padding: 2px 12px 10px; display: flex; flex-direction: column; gap: 1px; }
div.tasks-container .tsk-panel .tskp-field {
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 8px;
    margin: 0 -8px; border-radius: 6px; position: relative;
    transition: background .12s ease;
}
div.tasks-container .tsk-panel .tskp-field:hover { background: #F1F5F9; }
div.tasks-container .tsk-panel .tskp-flabel { flex: 0 0 90px; font-size: 12.5px; color: #64748B; }
div.tasks-container .tsk-panel .tskp-fval {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px;
    font-size: 13.5px; color: #1E293B;
}
div.tasks-container .tsk-panel .tskp-fbtn { border: 0; background: none; cursor: pointer; padding: 0; text-align: left; }
div.tasks-container .tsk-panel .tskp-avatar {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #FFFFFF; letter-spacing: .02em; background: #C2410C;
}
div.tasks-container .tsk-panel .tskp-muted { color: #94A3B8; }
div.tasks-container .tsk-panel .tskp-mono {
    font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 11.5px;
    background: #F1F5F9; border: 1px solid #E2E8F0; border-radius: 4px; padding: 1px 5px; color: #0F172A;
}
div.tasks-container .tsk-panel .tskp-overdue,
div.tasks-container .tsk-panel .tskp-overdue .tskp-dateinput { color: #B91C1C; }
div.tasks-container .tsk-panel .tskp-dateinput {
    border: 1px solid transparent; background: none; font: inherit; color: inherit;
    border-radius: 6px; padding: 2px 4px; max-width: 150px;
}
div.tasks-container .tsk-panel .tskp-dateinput:hover,
div.tasks-container .tsk-panel .tskp-dateinput:focus { border-color: #CBD5E1; background: #FFFFFF; outline: none; }

/* The due-date row doubles as a bootstrap .row for the changeTaskAttr commit
   contract ([data-inputvalue] lookup climbs to div.row) — neutralise the grid. */
div.tasks-container .tsk-panel .row.tskp-field { margin-left: -8px; margin-right: -8px; }
div.tasks-container .tsk-panel .row.tskp-field::before,
div.tasks-container .tsk-panel .row.tskp-field::after { content: none; }

/* ---- menus (status / priority) ---- */
div.tasks-container .tsk-panel .tskp-menu {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 210px;
    padding: 5px; border-radius: 10px; border: 1px solid #E2E8F0; background: #FFFFFF;
    box-shadow: 0 10px 25px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 1px;
}
div.tasks-container .tsk-panel .js-tskp-priority-field .tskp-menu { left: 90px; top: 30px; }
div.tasks-container .tsk-panel .tskp-mhd {
    padding: 7px 9px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #94A3B8;
}
div.tasks-container .tsk-panel .tskp-mitem {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
    font-size: 13px; color: #334155; text-align: left; border: 0; background: none; cursor: pointer;
    transition: background .12s ease;
}
div.tasks-container .tsk-panel .tskp-mitem:hover { background: #F1F5F9; }
div.tasks-container .tsk-panel .tskp-mitem.sel { background: #EFF5FE; color: #1E40AF; font-weight: 500; }
div.tasks-container .tsk-panel .tskp-led { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }

/* ---- More fields accordion inside a card ---- */
div.tasks-container .tsk-panel .tskp-card .tm-accordion { border: 0; margin: 0; }
div.tasks-container .tsk-panel .tskp-card .accordion-body { padding: 0 12px 10px; }
div.tasks-container .tsk-panel .tskp-card .pinned-fields { list-style: none; margin: 0; padding: 0; }
div.tasks-container .tsk-panel .tskp-card .pinned-fields .task-info-label {
    font-size: 12.5px; color: #64748B; font-weight: 400; margin: 8px 0 0;
}

/* Hosted surfaces (modal/tab): the host provides close/back navigation. */
div.tasks-container .tsk-hosted-surface .tsk-panel #back-to-list-view,
.tsk-hosted-surface .tsk-panel #back-to-list-view { display: none !important; }

/* B1: the legacy fixed 300px description box reads as a giant empty area in
   the blueprint panel — size to content there. */
div.tasks-container .tsk-panel .description-content { height: auto; min-height: 48px; }

/* B1 sol round 1 (8/23/26): blueprint overdue treatment — the pale-red chip
   from Main.dc.html, not bare red text — and room for the native calendar
   indicator inside the date input. */
div.tasks-container .tsk-panel .tskp-fval.tskp-overdue {
    background: #FEF2F2; border: 1px solid #FECACA; border-radius: 6px;
    padding: 2px 8px; flex: 0 1 auto; font-weight: 500;
}
div.tasks-container .tsk-panel .tskp-dateinput { max-width: 172px; }
div.tasks-container .tsk-panel .tskp-overdue .tskp-dateinput { padding: 0; }
div.tasks-container .tsk-panel .tskp-overdue .tskp-dateinput:hover,
div.tasks-container .tsk-panel .tskp-overdue .tskp-dateinput:focus { border-color: transparent; background: none; }

/* B1 sol round 1: the Activity tab keeps the legacy comment plumbing but not
   its legacy look — compact composer, quiet empty state. */
div.tasks-container .tsk-panel .task-activity .add_comment_container textarea,
div.tasks-container .tsk-panel .task-activity .comment-editor {
    border: 1px solid #E2E8F0; border-radius: 8px; font-size: 13.5px;
}
div.tasks-container .tsk-panel .task-activity .btn,
div.tasks-container .tsk-panel .task-activity button.apply,
div.tasks-container .tsk-panel .task-activity .btn-primary {
    background: #3B82F6 !important; background-image: none !important;
    border: 0; border-radius: 6px; height: 30px; padding: 0 14px;
    font-size: 13px; font-weight: 500; color: #FFF; box-shadow: none;
}
div.tasks-container .tsk-panel .task-activity .alert,
div.tasks-container .tsk-panel .task-activity .alert-info {
    background: none; border: 0; color: #94A3B8; font-size: 13px; padding: 8px 0;
}
div.tasks-container .tsk-panel .task-activity .blurb {
    background: none; border: 0; color: #94A3B8; font-size: 13px; padding: 8px 0;
}
div.tasks-container .tsk-panel .task-activity .add-new-comment { width: auto; float: right; }

/* B1 sol round 2: the shared comments container is a full-height surface in
   its other homes; inside the panel's Activity tab it must shrink-wrap so
   "Linked in d3VIEW" stays on screen. */
div.tasks-container .tsk-panel .task-activity .comments-container.full-h,
div.tasks-container .tsk-panel .task-activity .comments-container { height: auto; min-height: 0; }
div.tasks-container .tsk-panel .tskp-pane[data-pane="activity"] { min-height: 0; }

/* ===================================================================== *
 * B2 create panel (tasks-app-overhaul, 8/23/26) — the panel born empty.
 * ===================================================================== */
div.tasks-container .tsk-panel .tskp-draft {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
    border-radius: 9999px; background: #FEF9C3; border: 1px solid #FDE68A;
    color: #92400E; font-size: 12px; font-weight: 600;
}
div.tasks-container .tsk-panel .tskp-draft-hint { font-size: 12.5px; color: #94A3B8; }
div.tasks-container .tsk-panel .tskp-title-hint { color: #94A3B8; }
div.tasks-container .tsk-panel .tskp-desc-input {
    width: 100%; border: 1px solid #E2E8F0; border-radius: 10px; padding: 12px 14px;
    font-size: 14.5px; line-height: 1.6; color: #334155; resize: vertical;
    box-shadow: none; height: auto;
}
div.tasks-container .tsk-panel .tskp-desc-input:focus {
    border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none;
}
div.tasks-container .tsk-panel .tskp-required-star { color: #DC2626; font-weight: 700; }
div.tasks-container .tsk-panel .tskp-field-select .tskp-fval { display: block; }
div.tasks-container .tsk-panel .tskp-field-select .select2-container { width: 100% !important; }
div.tasks-container .tsk-panel .tskp-needs-banner {
    margin: 6px -8px 2px; padding: 8px 11px; border-radius: 8px;
    background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
    font-size: 12.5px; font-weight: 500;
}
div.tasks-container .tsk-panel .tskp-missing,
div.tasks-container .tsk-panel .row.tskp-field.tskp-missing {
    box-shadow: 0 0 0 2px rgba(220,38,38,.35); border-radius: 8px;
}
div.tasks-container .tsk-panel .tskp-create-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid #E2E8F0;
}
div.tasks-container .tsk-panel .tskp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
    border-radius: 8px; border: 0; background: #3B82F6; color: #FFF;
    font-size: 13.5px; font-weight: 500; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .12s ease;
}
div.tasks-container .tsk-panel .tskp-btn-primary:hover { background: #2563EB; }
div.tasks-container .tsk-panel .tskp-btn-primary[disabled] { opacity: .55; cursor: default; }
div.tasks-container .tsk-panel .tskp-btn-ghost {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
    border-radius: 8px; border: 1px solid #CBD5E1; background: #FFF; color: #334155;
    font-size: 13.5px; font-weight: 500; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
div.tasks-container .tsk-panel .tskp-btn-ghost:hover { background: #F8FAFC; border-color: #94A3B8; }
/* Empty contenteditable title shows its ask, Jira-style. */
div.tasks-container .tsk-panel .tskp-title:empty::before {
    content: attr(data-placeholder); color: #94A3B8; font-weight: 600;
}

/* The B2 !important that used to sit here is gone: the drop no longer carries
   .tasks-container, so there is nothing from the page shell to override. */

/* ===================================================================== *
 * Panel round 4 (tasks-app-overhaul, 8/26/26)
 * ===================================================================== */

/* ---- description: click-to-edit, same affordance as the title ---- */
div.tasks-container .tsk-panel .description-editor {
    min-height: 44px; padding: 8px 10px; margin: 0 -10px;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 14.5px; line-height: 1.62; color: #334155;
    cursor: text; outline: none; word-break: break-word;
    transition: background .12s ease, border-color .12s ease;
}
div.tasks-container .tsk-panel .description-editor:hover {
    background: #F8FAFC; border-color: #E2E8F0;
}
div.tasks-container .tsk-panel .description-editor.isEditing,
div.tasks-container .tsk-panel .description-editor:focus {
    background: #FFFFFF; border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
/* The prompt is generated, never stored — see the template comment. */
div.tasks-container .tsk-panel .description-editor:empty::before {
    content: attr(data-placeholder); color: #94A3B8;
}
div.tasks-container .tsk-panel .desc-buttons { margin: 10px 0 0 !important; }

/* ---- skeleton: a shimmer that traces the real panel geometry ---- */
div.tasks-container .tskp-skeleton { pointer-events: none; }
div.tasks-container .tskp-skeleton .tskp-doc { gap: 12px; }
div.tasks-container .tskp-skeleton .tskp-topbar { align-items: center; }
div.tasks-container .tskp-sk-line,
div.tasks-container .tskp-sk-block,
div.tasks-container .tskp-sk-card {
    border-radius: 6px;
    background: linear-gradient(90deg, #EEF2F7 0%, #F8FAFC 40%, #EEF2F7 80%);
    background-size: 300% 100%;
    animation: tskp-sheen 1.4s ease-in-out infinite;
}
div.tasks-container .tskp-sk-block { height: 108px; border-radius: 10px; margin-top: 6px; }
div.tasks-container .tskp-sk-card {
    height: 172px; border-radius: 10px; background-image: none; background: #FFFFFF;
    border: 1px solid #E2E8F0; animation: none;
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
div.tasks-container .tskp-sk-card .tskp-sk-line { flex: 0 0 auto; }
div.tasks-container .tskp-sk-tabs { display: flex; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #E2E8F0; }

@keyframes tskp-sheen {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    div.tasks-container .tskp-sk-line,
    div.tasks-container .tskp-sk-block { animation: none; }
}

/* ---- headerless/footerless task modal: the body is the whole modal ---- */
.tsk-task-modal .modal-content { border-radius: 12px; overflow: hidden; }

/* ---- rich description (tasks-app-overhaul, 8/26/26) ------------------- */
/* The read-only document: click anywhere to open the editor. */
div.tasks-container .tsk-panel .tskp-desc-view {
    min-height: 44px; padding: 8px 10px; margin: 0 -10px;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 14.5px; line-height: 1.62; color: #334155;
    cursor: text; word-break: break-word;
    transition: background .12s ease, border-color .12s ease;
}
div.tasks-container .tsk-panel .tskp-desc-view:hover { background: #F8FAFC; border-color: #E2E8F0; }
div.tasks-container .tsk-panel .tskp-desc-view:empty::before {
    content: attr(data-placeholder); color: #94A3B8;
}
/* Rendered document content must stay inside the panel. */
div.tasks-container .tsk-panel .tskp-desc-view img { max-width: 100%; height: auto; }
div.tasks-container .tsk-panel .tskp-desc-view table { max-width: 100%; border-collapse: collapse; }
div.tasks-container .tsk-panel .tskp-desc-view td,
div.tasks-container .tsk-panel .tskp-desc-view th { border: 1px solid #E2E8F0; padding: 4px 8px; }
div.tasks-container .tsk-panel .tskp-desc-view h1,
div.tasks-container .tsk-panel .tskp-desc-view h2,
div.tasks-container .tsk-panel .tskp-desc-view h3 { margin: 12px 0 6px; font-weight: 700; }
div.tasks-container .tsk-panel .tskp-desc-view p { margin: 0 0 8px; }
div.tasks-container .tsk-panel .tskp-desc-view [data-project-ref] {
    display: inline-block; padding: 1px 5px; border: 1px solid #d6e0ea;
    border-radius: 5px; background: #f5f8fb; color: #34516f; line-height: 1.35;
}
div.tasks-container .tsk-panel .tskp-desc-error { color: #B91C1C; font-size: 13px; }
/* TinyMCE renders as a SIBLING of its target, so the host must not clip it. */
div.tasks-container .tsk-panel .tskp-desc-host { margin: 0 0 4px; }
div.tasks-container .tsk-panel .tskp-desc-host .tox-tinymce { border-radius: 8px; border-color: #E2E8F0; }
div.tasks-container .tsk-panel .tskp-desc-fallback { width: 100%; border-radius: 8px; }

/* ---- attachment cards (tasks-app-overhaul, 8/28/26) ------------------- */
/* Was a 200px marketing SVG + a full-width red Remove button per file. */
div.tasks-container .tsk-panel .task-file-preview {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 132px; padding: 12px 10px 10px;
    border: 1px solid #E2E8F0; border-radius: 10px; background: #FFFFFF;
    transition: border-color .12s ease, box-shadow .12s ease;
}
div.tasks-container .tsk-panel .task-file-preview:hover {
    border-color: #CBD5E1; box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
div.tasks-container .tsk-panel .tskp-file-thumb {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    color: #64748B;
}
div.tasks-container .tsk-panel .tskp-file-thumb .tskp-ico { width: 32px; height: 32px; }
/* Exactly one icon: document by default, archive when the name says so. */
div.tasks-container .tsk-panel .tskp-ico-zip { display: none; }
div.tasks-container .tsk-panel .task-file-preview.is-archive .tskp-ico-file { display: none; }
div.tasks-container .tsk-panel .task-file-preview.is-archive .tskp-ico-zip { display: block; }
div.tasks-container .tsk-panel .task-file-preview.is-archive .tskp-file-thumb { color: #B7791F; }

div.tasks-container .tsk-panel .tskp-file-name {
    width: 100%; margin: 6px 0 8px; text-align: center;
    font-size: 12.5px; color: #334155; line-height: 1.35;
    /* Long names truncate instead of forcing the card wide. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
div.tasks-container .tsk-panel .tskp-file-actions { display: flex; align-items: center; gap: 6px; }
div.tasks-container .tsk-panel .tskp-file-btn {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
    border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF;
    font-size: 12px; color: #475569; text-decoration: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
div.tasks-container .tsk-panel .tskp-file-btn:hover {
    border-color: #3B82F6; color: #2563EB; background: #EFF5FE; text-decoration: none;
}
/* Destructive stays quiet until you reach for it. */
div.tasks-container .tsk-panel .tskp-file-btn-danger { padding: 0 8px; color: #94A3B8; }
div.tasks-container .tsk-panel .tskp-file-btn-danger:hover {
    border-color: #FECACA; color: #B91C1C; background: #FEF2F2;
}
div.tasks-container .tsk-panel .previews-container {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}

/* ---- the task modal sits centred in the viewport ---------------------- */
/* Bootstrap 3 top-aligns the dialog (margin: 30px auto), which left the panel
   hugging the top with dead space below. Centre it, and let the CONTENT scroll
   inside so a tall document never pushes the dialog off-screen.
   Scoped to `.in` because `.modal` is display:none until bootstrap shows it —
   an unscoped `display:flex` would make every hidden task modal visible. */
/* BOTH forms on purpose: GenericModalView renders the `.modal` INSIDE its view
   element (`this.$(".modal")`), so `tsk-task-modal` added via `view.$el` lands on
   the WRAPPER, not on the modal itself -- a compound `.tsk-task-modal.modal`
   selector silently matches nothing. The descendant form is what actually fires
   today; the compound form keeps this working if the class is ever moved onto
   the modal element. */
.tsk-task-modal.modal.in,
.tsk-task-modal .modal.in {
    display: flex !important; align-items: center; justify-content: center;
}
.tsk-task-modal.modal.in > .modal-dialog,
.tsk-task-modal .modal.in > .modal-dialog {
    margin: 0; display: flex; flex-direction: column;
}
.tsk-task-modal.modal.in .modal-content,
.tsk-task-modal .modal.in .modal-content {
    max-height: calc(100vh - 48px); display: flex; flex-direction: column; min-height: 0;
}
.tsk-task-modal.modal.in .modal-body,
.tsk-task-modal .modal.in .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ---- More fields: the Details card's field grid ---- */
div.tasks-container .tsk-panel .tskp-card .pinned-fields.tskp-morefields { display: flex; flex-direction: column; gap: 1px; }
div.tasks-container .tsk-panel .tskp-morefields > li { margin: 0; }
div.tasks-container .tsk-panel .tskp-morefields .tskp-fval { flex-wrap: wrap; }
div.tasks-container .tsk-panel .tskp-morefields .tskp-fval .dimgrey { color: #94A3B8; }

/* .row is only there for changeTaskAttr; neutralise its gutters. */
div.tasks-container .tsk-panel .tskp-morefields .row.tskp-field { margin-left: -8px; margin-right: -8px; }

div.tasks-container .tsk-panel .tskp-textinput {
    width: 100%; border: 1px solid transparent; background: none; font: inherit; color: inherit;
    border-radius: 6px; padding: 2px 4px;
}
div.tasks-container .tsk-panel .tskp-textinput:hover,
div.tasks-container .tsk-panel .tskp-textinput:focus { border-color: #CBD5E1; background: #FFFFFF; outline: none; }

/* select2 in a rail field: it must not force the row taller than 34px. */
div.tasks-container .tsk-panel .tskp-field .select2-container { width: 100% !important; }
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-choice {
    height: 26px; line-height: 24px; border-color: transparent; background: none;
    box-shadow: none; padding: 0 4px;
}
div.tasks-container .tsk-panel .tskp-field:hover .select2-container .select2-choice { border-color: #CBD5E1; background: #FFFFFF; }
div.tasks-container .tsk-panel .tskp-field .select2-container-multi .select2-choices {
    border-color: transparent; background: none; box-shadow: none; min-height: 26px;
}
div.tasks-container .tsk-panel .tskp-field:hover .select2-container-multi .select2-choices { border-color: #CBD5E1; background: #FFFFFF; }

/* The whole due-date value area is the picker's hit target now. */
div.tasks-container .tsk-panel .js-tskp-due { cursor: pointer; }
div.tasks-container .tsk-panel .js-tskp-due .tskp-dateinput { cursor: pointer; }

/* ---- the rail's select2 dropdown, styled like the panel's own menus ---- */
.tsk-select2-drop {
    border: 1px solid #E2E8F0; border-radius: 10px; padding: 5px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12); background: #FFFFFF;
    margin-top: 4px; overflow: hidden;
}
.tsk-select2-drop.select2-drop-above { margin-top: 0; margin-bottom: 4px; border-radius: 10px; }
.tsk-select2-drop .select2-search { padding: 3px 3px 6px; }
.tsk-select2-drop .select2-search input {
    border: 1px solid #E2E8F0; border-radius: 6px; padding: 5px 26px 5px 9px;
    font-size: 13px; background-color: #F8FAFC; height: auto;
}
.tsk-select2-drop .select2-search input:focus {
    border-color: #3B82F6; background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12); outline: none;
}
.tsk-select2-drop .select2-results { padding: 0; margin: 0; max-height: 244px; }
.tsk-select2-drop .select2-results li { border: 0; }
.tsk-select2-drop .select2-results .select2-result-label {
    padding: 7px 9px; border-radius: 6px; font-size: 13px; color: #334155;
}
/* Highlight the label, not the <li>, so it keeps the menu's rounding. */
.tsk-select2-drop .select2-results .select2-highlighted { background: none; color: inherit; }
.tsk-select2-drop .select2-results .select2-highlighted .select2-result-label {
    background: #F1F5F9; color: #0F172A;
}
.tsk-select2-drop .select2-results .select2-result-selectable .select2-result-label:hover { background: #F1F5F9; }
.tsk-select2-drop .select2-results .select2-no-results,
.tsk-select2-drop .select2-results .select2-searching,
.tsk-select2-drop .select2-results .select2-selection-limit {
    background: none; padding: 9px; font-size: 12.5px; color: #94A3B8;
}

/* ---- the closed control reads as a field value, not a form input ---- */
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-choice {
    border-radius: 6px; color: #1E293B; font-size: 13.5px;
}
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-choice .select2-arrow {
    background: none; border: 0; width: 18px;
}
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-choice .select2-arrow b {
    opacity: 0; transition: opacity .12s ease;
}
div.tasks-container .tsk-panel .tskp-field:hover .select2-container .select2-choice .select2-arrow b,
div.tasks-container .tsk-panel .tskp-field .select2-dropdown-open .select2-choice .select2-arrow b { opacity: .55; }
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-chosen { margin-right: 20px; }
div.tasks-container .tsk-panel .tskp-field .select2-container.select2-container-active .select2-choice,
div.tasks-container .tsk-panel .tskp-field .select2-container .select2-choice:focus {
    border-color: #3B82F6; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
/* Multi (Collaborators): chips on the same 26px row, no stock blue. */
div.tasks-container .tsk-panel .tskp-field .select2-container-multi .select2-choices { padding: 0 2px; }
div.tasks-container .tsk-panel .tskp-field .select2-container-multi .select2-choices .select2-search-choice {
    background: #EFF5FE; border: 1px solid #BFD8FA; color: #1E40AF;
    border-radius: 9999px; padding: 2px 8px 2px 20px; margin: 3px 3px 3px 0;
    font-size: 12px; box-shadow: none; line-height: 16px;
}
div.tasks-container .tsk-panel .tskp-field .select2-container-multi .select2-choices .select2-search-field input {
    font-size: 13px; padding: 4px 0; height: auto;
}

/* /javascripts/spa/dashboard/style.css */

.dash-pages .nav-tabs {
   border-bottom:0px;
}

.dash-pages .nav-tabs a {
    padding: 2px 12px;
}

.dash-tabs li {
}

.dash-tabs li .badge { padding:2px 4px; }

.dash-tabs li:not(.navigation) a, .dash-tabs li:not(.navigation) a:active, .dash-tabs li:not(.navigation) a:focus {
    font-variant:small-caps;
    font-size:1.0em;
    border:0px solid transparent!important;
    background-color: transparent!important;
}



.dash-tabs li.active a, .dash-tabs li a:hover, .dash-tabs li.active a:hover, .dash-tabs li:not(.navigation) a:focus  {
    border:0px solid transparent!important;
    border-bottom: 2px solid #337ab7!important;
    background-color: #eee!important;
    font-weight:600;
}

.dash-navtab .dash-options { position:absolute; top:-12px; margin-left:-32px; display:none; width:12px}
.dash-navtab:hover .dash-options,
.dash-navtab.active .dash-options
{ display:inline-block; }


.dashboard-page-view {
    padding-top:2px;
}

.dashboard-page-view .header-view {
  margin-bottom:2px;
}

.dash-body .page-container {
   min-height:200px;
}

.dash-item {
  padding:12px;
    padding-top:20px;
    background-color: #fff;
    box-shadow: 2px #eee;
}

.page-widget-container {
    padding:2px;
}

.widget-view .panel-heading button.btn-default {
   color: #888!important;
}

.widget-view .panel-heading button.btn-default:hover {
    color: #000!important;
}

.page-container .add-widget {
   margin-bottom:12px!important;
}

.page-container {
    border: 2px solid transparent;
}

.page-container .page-heading {
   padding: 2px 12px;
}

.page-layout-container {
   margin:0px;
}

.page-container-1-2, .page-container-0-0, .page-layout-1x3 .page-container-0-1 {
    border-right:2px solid #eee;
}

.page-container-1-4 .page-container-0-0, .page-container-1-4 .page-container-0-1, .page-container-1-4 .page-container-0-2 {
    border-right:1px solid #eee;
}

.widget .filter-container { margin-bottom:12px; }

.widget-title {
    text-transform: capitalize;
    letter-spacing:0.5px;
    font-size:1.2em;
    margin-left:6px;
}

.widget-view {
    border-radius:4px;
}

.widget-container:hover {
   cursor: pointer;
}

.popover-title { color: #000; }

.dash-item { padding-top: 6px; }


.main-tabs li.active, .main-tabs li.active a, .main-tabs li.active span  { background-color: #eee!important;padding:20px 4px!important; }
/* /stylesheets/visualizers/newton.css */
div.curve_plot {
    position: relative!important;
    overflow: auto;
}
span.newton-text {
    font-family: Roboto,'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    word-break: break-all;
    letter-spacing: .4px;
    font-weight: 400;
    font-size: 11px;
}
div.curve_plot div.tableview {
    border:1px solid darkgray;
    text-align:center;
    position:relative;
    top:15px;
    left:20px;
}
div.curve_plot.tiny div#settings_menu {
    display: none;
}
div.curve_plot.tiny:hover div#settings_menu {
    display: inline-block;
}
div.curve_plot.tiny div#settings_menu .btn-group-vertical > .btn-xs {
    width: 23px;
    padding: 1px;
}
div.curve_plot.tiny div.legend-header {
    display: none;
}
div.curve_plot div#settings_menu {
    /*position: relative!important;*/
    position: absolute;
    right:0;
    top: 33%;
    margin: 0!important;
}
div.curve_plot div#settings_menu.bottom_0 {
    top: inherit!important;
    bottom: 0!important;
}
div.curve_plot div#settings_menu div#additional_settings div.tick-options input {
    display: inline!important;
    height: 25px!important;
}
div.curve_plot div#settings_menu div#additional_settings div.range input {
    width: 47%!important;
    margin:2px;
    display: inline!important;
    height: 25px!important;
}
div.curve_plot div#settingsDiv .panel-heading {
    padding: 0;
}
div.curve_plot div#settingsDiv .panel .panel-heading span.panel-title {
    margin: 5px 10px;
}
div.curve_plot div.console {
    border: 1px solid #ccc;
    font-size: 10px;
    position: relative;
}
div.curve_plot div.console div.panel-heading span {
    font-size: 11px;
    font-weight:bold;
}
div.curve_plot div.console div.panel-heading button.console_settings{
    position: relative;
    top: -4px;
    right: -4px;
}
div.curve_plot div.console div.panel-heading ul.dropdown-menu {
    font-size: 11px;
}
div.curve_plot div.console div.panel-heading ul.dropdown-menu li a i {
    position: relative;
    right: 4px;
    visibility: hidden;
}
div.curve_plot div.console div.panel-heading ul.dropdown-menu li a.selected > i {
    visibility: visible;
}
div.curve_plot div.console div.panel-heading {
    padding: 6px;
}
div.curve_plot div.console div.panel-body {
    padding: 4px;
    max-height: 45px;
    overflow: auto;
}
div.curve_plot div.console div.panel-body span {
    display: block;
    margin-left: 5px;
}
div.curve_plot .annotationsContainer .floatingAnnotationContainer.editing, div.curve_plot .imagesContainer .floatingImageContainer.editing {
    border: 1px solid #ccc!important;
    background-color: rgba(244,211,65,0.1);
}
div.curve_plot .annotationsContainer .floatingAnnotationContainer.editing textarea.annotationInput {
    border: inherit;
}
div.curve_plot .annotationsContainer .floatingAnnotationContainer.editing textarea.annotationInput::-webkit-input-placeholder {
    font-size: 14px!important;
}
div.curve_plot div#settings_menu {
    z-index: 8;
    margin: 0;
}
div.curve_plot div#settings_menu button#btn_zoom span.clicked {
    color: red;
}
div.curve_plot div#settings_menu button#btn_info.clicked, div.curve_plot div#settings_menu button#btn_image.clicked,
div.curve_plot div#settings_menu button#btn_legend.clicked, div.curve_plot div#settings_menu button#slide_down_settings.clicked i {
    color: green;
}
div.curve_plot span.curve_max_val, div.curve_plot span.curve_min_val, span.curve_max_val.newton-clone, span.curve_min_val.newton-clone {
    background: #fff;
    border: 1px solid #eee1ee;
    -webkit-box-shadow: 3px 3px 5px #8e8e8e52;
    -moz-box-shadow: 3px 3px 5px #8e8e8e52;
    box-shadow: 3px 3px 5px #8e8e8e52;
    border-radius: 4px;
    padding: 5px;
    font-weight: 800;
    cursor: move;
    display: none;
    top:0;
    left: 0;
    z-index: 4;
}
span.curve_max_val.newton-clone, span.curve_min_val.newton-clone {
    font-size:15px!important;
}
div.curve_plot div.curve_values, div.curve_values.newton-clone {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 7;
    position: absolute;
    top:0;
    left: 0;
    width: 400px;
    overflow: auto;
    font-size: 10px;
    height: 225px;
}
div.curve_plot div.curve_values table, div.curve_values.newton-clone table {
    background: #eee;
    z-index: 5;
    margin: 0px;
}
div.curve_plot div.curve_values table tbody td, div.curve_values.newton-clone table tbody td {
    color: #FFF;
    letter-spacing: .8px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
}
div.curve_plot div#additional_settings div.row > div{
    text-align: center;
}
div.curve_plot div#settingsDiv.container .panel-title, div.curve_plot div#additional_settings.container .panel-title {
    font-size: 11px;
}
div.curve_plot div#settingsDiv, div.curve_plot div#additional_settings {
    position: absolute;
}
div.curve_plot div#settingsDiv.container, div.curve_plot div#additional_settings.container {
    display: none;
    z-index: 4;
    position: absolute;
    width: 400px;
    font-size: 11px;
    margin: 5px 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    right: 32px;
    bottom: -20px;
    cursor: default;
}
div.curve_plot div#additional_settings.container {
    width: 330px;
    font-weight: 500;
    white-space: nowrap;
}
div.curve_plot div.slickgrid_rendering_area .slick-row {
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}
div.curve_plot div.curve_values div.slickgrid_rendering_area span.key_color {
    position: relative;
    left: 38%;
}
div.curve_plot div.curve_values div.slickgrid_rendering_area span.key_color i {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
div.curve_plot svg {
    overflow: visible;
    height: auto!important;
    width: auto!important;
}
div.curve_plot svg g.minmax {
    opacity: 0;
}
div.curve_plot span.curve_label {
    position: absolute;
    width: auto;
    cursor: pointer;
    overflow: hidden;
    left: 10px;
}
div.curve_plot [contenteditable="true"]:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

div.curve_plot .strong {
    font-weight: bold;
}
div.curve_plot .italic {
    font-style: italic;
}
div.curve_plot button.undo {
    margin-left: 10px;
    position: relative;
    bottom: 2px;
}
div.curve_plot div#settingsDiv [name="xVal"], div.curve_plot div#settingsDiv [name="yVal"] {
    height: 25px;
    width: 10%;
    display: inline;
    margin-right: 20px;
}
div.curve_plot span.standard_deviation {
    position: absolute;
    left: 36%;
    top: 0!important;
}
div.curve_plot span.xMin, div.curve_plot span.yMin {
    position: absolute;
    left: 8%;
    bottom: 0;
}
div.curve_plot span.xMax, div.curve_plot span.yMax {
    position: absolute;
    right: 8%;
    bottom: 0;
}

/********* Legends **********/
div.curve_plot div.legends-container, div.legends-container.newton-clone {
    position: absolute;
    color: #fff;
    border: 1px solid #ccc!important;
    background-color: #fff!important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 40px;
    z-index:7;
    margin-right: 10px;
}
div.legends-container.exporting.newton-clone .legend-options {
    display: none!important;
}
div.legends-container.exporting.newton-clone .legends-list {
    max-height: 100%!important;
}
div.curve_plot div.legends-container.exporting .ui-resizable-handle, div.legends-container.exporting.newton-clone .ui-resizable-handle {
    display: none!important;
}
div.curve_plot div.legends-container div.legend-header, div.legends-container.newton-clone div.legend-header {
    padding: 5px 12px;
    cursor: move;
    background: #555;
}
div.curve_plot div.legends-container div.legend-header.border-bottom, div.legends-container.newton-clone div.legend-header.border-bottom {
    border-bottom: 1px solid #555;
}
div.curve_plot div.legends-container div.legend-header h4, div.legends-container.newton-clone div.legend-header h4 {
    display: inline-block;
}
div.curve_plot div.legends-container div.legend-header .toggle-legend-options, div.legends-container.newton-clone div.legend-header .toggle-legend-options {
    cursor: pointer;
    position: relative;
    top:2px;
}
div.legends-container.newton-clone div.legend-header .toggle-legend-options,div.legends-container.newton-clone div.legend-header .toggle-legends {
    display: none;
}
div.curve_plot div.legends-container div.legend-header .toggle-legend-options.open {
    color: #5cb85c;
}
div.curve_plot div.legends-container div.legend-header .toggle-legends, div.legends-container.newton-clone div.legend-header .toggle-legends {
    cursor: pointer;
    position: relative;
    padding: 0 5px;
    /*top: 2px;*/
    /*padding-left: 10px;*/
}
div.curve_plot div.legends-container div.legends-body, div.legends-container.newton-clone div.legends-body {
    overflow: auto;
    padding: 3px 4px!important;
    padding-right: 0!important;
    padding-bottom: 0!important;
    color: #111;
    background: #fff;
    min-height: 30px;
}
div.curve_plot div.legends-container div.legends-body ul, div.legends-container.newton-clone div.legends-body ul {
    list-style-type:none;
}
div.curve_plot div.legends-container div.legends-body ul li input#select-curve, div.legends-container.newton-clone div.legends-body ul li input#select-curve {
    height:auto;
    font-size:initial;
}
div.curve_plot div.legends-container div.legends-body ul li span.curve-name, div.legends-container.newton-clone div.legends-body ul li span.curve-name {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    word-break: break-all;
    letter-spacing: 0.4px;
    font-weight: 400;
    font-size: 11px;
    cursor: pointer;
}
div.curve_plot div.legends-container div.legends-body ul li span.curve-name.highlight_name {
    font-weight: 500;
}
div.curve_plot div.legends-container div.legends-body ul li span.curve-name.clicked {
    opacity: 0.4;
}
div.legends-container.newton-clone div.legends-body ul li span.curve-name {
    /*font-family: serif!important;*/
    /*letter-spacing: 1px !important;*/
}
div.curve_plot div.legends-container.range-values .legends-body ul li span.curve-name, div.legends-container.newton-clone.range-values .legends-body ul li span.curve-name {
    cursor: pointer;
}
div.curve_plot div.legends-container div.legends-body ul li span.curve-name.minmax, div.legends-container.newton-clone div.legends-body ul li span.curve-name.minmax {
    font-weight: bold;
}
div.curve_plot div.legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect, div.legends-container.newton-clone div.legends-body ul.legends-list li i.newton-legend-item-rect {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-right: 5px;
}
div.curve_plot div.legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect.clicked + span.curve-name {
    pointer-events: none;
}

div.curve_plot div.single-legend-item, div.newton-clone div.single-legend-item {
    position: absolute;
    top: 4px;
}
div.curve_plot div.single-legend-item i.newton-legend-item-rect, div.newton-clone div.legends-body ul.legends-list li i.newton-legend-item-rect {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-right: 5px;
}
/******* Dash legends *******/
div.curve_plot ul.dash_legends {
    list-style-type: none;
    background: rgba(0,0,0,0.05);
    padding:5px;
    cursor: move;
}
div.curve_plot ul.dash_legends li > span {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size:11px;
    cursor: pointer;
}
/* complex context menu rect */
div.curve_plot rect.transparent-background.highlighted-rect {
    fill: #DDD!important;
}
/* Annotations */
div.curve_plot textarea.annotationInput {
    resize: none;
}
div.curve_plot div#settings_menu button.show_visibility {
    visibility: visible!important;
}
div.curve_plot div#settings_menu button.hide_visibility {
    visibility: hidden!important;
}
div.curve_plot span.yLabel,div.curve_plot span.yLowerLabel, div.curve_plot span.ySubLabel {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: 0% 0;
    /*left: -12px;*/
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.curve_plot svg.plotSVG text.curve_label {
    opacity: 0;
}
div.curve_plot div.popover-content .label-fontsize input.font {
    height: 22px;
    width: 60px;
    display: inline-block;
}
div.curve_plot span.yLabel2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 100% 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.curve_plot span.xval_diff {
    border-color: #1e90ff!important;
    letter-spacing: 0.5px!important;
    font-size: 12px!important;
}
div.curve_plot span.xval, div.curve_plot span.xval_diff {
    z-index: 2;
    background: rgb(255, 255, 255);
    padding: 2px;
    border: 1px solid rgb(158, 200, 225);
    position: absolute;
    text-align: center;
    pointer-events: none;
    font-size: 11px;
    display: none;
}
div.curve_plot div#settingsDiv .panel-body, div.curve_plot div#additional_settings .panel-body {
    overflow: auto;
    max-height: 450px;
    padding-bottom: 0;
}
div.curve_plot div#settingsDiv .row, div.curve_plot div#additional_settings .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 9px;
}
div.curve_plot div#settingsDiv .row table {
    margin-bottom:0;
}
div.curve_plot div#settingsDiv::before, div.curve_plot div#settingsDiv::after, div.curve_plot div#additional_settings::before, div.curve_plot div#additional_settings::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}
div.curve_plot div#settingsDiv:before, div.curve_plot div#additional_settings:before {
    top: 100%;
    right: -6px;
    margin-top: -30px;
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent #ccc;
}
div.curve_plot div#settingsDiv:after, div.curve_plot div#additional_settings:after {
    top: 100%;
    margin-top: -30px;
    right: -5px;
    border-color: transparent transparent transparent #fff;
    border-width: 7px 0 7px 7px;
}

/** operations tab **/
div.curve_plot div#additional_settings .operations-list {
    white-space: initial;
}
div.curve_plot div#additional_settings .operations-list .sortable-placeholder {
    display: block;
    padding: 25px 15px;
    background: lightyellow;
}
div.curve_plot div#additional_settings .operations-list .edit_operation.active {
    color: #5CB85C;
}

div.curve_plot div#settingsDiv:after {
    border-color: transparent transparent transparent #f5f5f5;
}
div.curve_plot .colorpicker-element .input-group-addon i {
    width: 25px!important;
}
div.curve_plot div#cp1, div.curve_plot div#cp2, div.curve_plot div#cp3 {
    margin: auto;
    top: 2px;
}
div.curve_plot div#cp2, div.curve_plot div#cp3 {
    left: 10px;
}
div.curve_plot div#settingsDiv div#cp1 .input-group-addon, div.curve_plot div#cp2 .input-group-addon,div.curve_plot div#cp3 .input-group-addon {
    width: auto;
    padding: 0;
}
div.curve_plot div#settingsDiv td {
    padding: 5px;
}

/* Popovers */
div.popover.newton {
    width: auto!important;
    z-index: 1052!important;
}
div.popover.newton .popover-title {
    font-size: 12px!important;
    font-weight: bold!important;
}

/* contextmenu */
div.curve_plot div.newton-context-menu {
    width: 170px;
}
div.curve_plot div.newton-context-menu .panel-heading {
    padding: 0 !important;
}
div.curve_plot div.newton-context-menu span.close {
    font-size: 15px;
    position: relative;
    top: 3px;
}
div.curve_plot .newton-context-menu .contextmenu-cp {
    display: inline-block;
    position: relative;
    top: 4px;
}
div.curve_plot .newton-context-menu .contextmenu-cp .input-group-addon {
    width: auto;
    padding: 0 1px;
}
div.curve_plot .newton-context-menu .contextmenu-cp .input-group-addon i {
    width: 30px!important;
    height: 20px!important;
}

div.curve_plot .zoomed_canvas_container {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    border: 1px solid #CCC;
    background: #FFF;
}
div.curve_plot .zoomed_canvas_container canvas {

}
div.curve_plot.tiny .minimize {
    display: none;
}
div.curve_plot .minimize {
    position: absolute;
    right: 0;
    bottom: 0;
}
div.curve_plot .minimize.minimized {
    /*top: -24px;*/
    z-index: 4;
}
div.curve_plot .minimize:focus {
    outline: none;
}
div.curve_plot .minimize.minimized > i:before {
    content: '\f2d1'!important;
}


/* global context menu */
div.curve_plot .newton-global-context-menu {
    display: none;
    position: absolute;
    background: #FFF;
    border: 1px solid #cdcdcd;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;
    z-index: 2000;
}
div.curve_plot .newton-global-context-menu .nav-stacked-thin li a {
    padding: 4px 6px;
}

div.curve_plot div.datum-lines-context-menu {
    position: absolute;
    background: #FFF;
    border: 1px solid #cdcdcd;
    padding: 2px;
    border-radius: 4px;
    z-index: 2;
}
div.curve_plot div.datum-lines-context-menu ul.list-group {
    margin: 0;
}
div.curve_plot div.datum-lines-context-menu ul.list-group > li {
    border: none;
}
div.curve_plot div.datum-lines-context-menu ul.list-group > li:hover {
    background-color: #Efefef;
}
div.curve_plot div.datum-lines-context-menu ul.list-group > li > a {
    padding: 4px 6px;
    text-decoration: none;
}
div.curve_plot .popover-title {
    text-overflow: ellipsis;
    overflow: hidden;
}
div.curve_plot .d3view-subcontext-menu li.context-menu-item.clickable > a {
    padding-left: 10px;
}
div.curve_plot .d3view-subcontext-menu li.context-menu-item.clickable:hover {
    background-color: #eee;
}
/** Added by shashank2104 on 2026-04-15 - DVFIV-1992 - Point-select overlay anchors **/
.point-select-overlay circle[class^="psa-"],
.point-select-overlay circle[class*=" psa-"] {
    transition: r 140ms cubic-bezier(.4, 0, .2, 1), fill 140ms cubic-bezier(.4, 0, .2, 1);
}
.point-select-overlay circle.selected {
    filter: drop-shadow(0 2px 4px rgba(59, 109, 240, .35));
}

/**
 * Deferred-curve placeholder (newton.app.js deferRenderEl). Reuses the modern
 * sl-viz-empty-state look, but self-contained here so it renders correctly in the
 * responses grid, where Newton is NOT inside a div.simlytiks ancestor (the
 * simlytiks-modern-viz.css rules are scoped to that and would not apply). DW-3195.
 */
.newton-defer {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.newton-defer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
    text-align: center;
    color: var(--d3v-text-secondary, #475569);
}
.newton-defer-card .newton-defer-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--d3v-bg-secondary, #F1F5F9);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    margin-bottom: 4px;
}
.newton-defer-card .newton-defer-icon svg {
    width: 36px;
    height: 36px;
    color: var(--d3v-text-muted, #94A3B8);
    opacity: 0.9;
}
.newton-defer-card .newton-defer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0F172A);
    letter-spacing: -0.01em;
}
.newton-defer-card .newton-defer-body {
    font-size: 13px;
    line-height: 1.5;
    max-width: 420px;
}
.newton-defer-card .newton-defer-action {
    margin-top: 6px;
    color: var(--d3v-accent-primary, #0EA5E9);
    background: var(--d3v-bg-accent-soft, rgba(14, 165, 233, 0.10));
    border: 1px solid var(--d3v-border-color, #E2E8F0);
    border-radius: 6px;
    font-weight: 500;
}
.newton-defer-card .newton-defer-action:hover {
    background: var(--d3v-bg-accent-soft-hover, rgba(14, 165, 233, 0.18));
    color: var(--d3v-accent-primary, #0EA5E9);
}
.newton-defer-card .newton-defer-action i {
    margin-right: 4px;
}

/* /stylesheets/visualizers/textviz.css */
div.d3view-textviz .v_render_content.ace_editor.rendering:after {
    content: 'Loading...';
    font-size: 1.2em;
    font-weight: bold;
    font-family: initial!important;
    position: absolute;
    left: 50%;
    top: 50%;
}
div.d3view-textviz {
    padding: 10px 30px;
    padding-bottom: 10px;
}

.d3view-textviz .render_scrollbar {
    width: 20px;
    background: #f0f0f0;
    position: relative;
}

.d3view-textviz .render_scrollbar .scrollbar-thumb {
    width: 100%; height: 10%; background: #666; cursor: pointer;
}

.d3view-textviz.customScrollbar .ace_scrollbar {
    display: none!important;
}

.d3view-textviz .v_render_content.full-h.ace_editor.ace-tm.dimmed {
    color: gray;
}

div.d3view-textviz .scrollToBottom {
    position: absolute;
    bottom: 10px;
    right: 50px;
    z-index: 10;
}
div.d3view-textviz .scrollToTop {
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 10;
}

/* Added 2026-07-02 - textviewer-optional-column: soft empty-state for a readOnly
   text viewer with no text source (no column / banner / fallback). Uses the
   d3v-textviz- namespace prefix like the banner block (rendered into the host
   viz container, which is not always under .d3view-textviz). --d3v-* token with
   a hardcoded fallback so it degrades gracefully if the foundation tokens aren't
   present in a given host. */
.d3v-textviz-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8%;
    text-align: center;
    color: var(--d3v-text-tertiary, #9AA3AF);
}
.d3v-textviz-placeholder-icon {
    margin-bottom: 10px;
    opacity: 0.7;
}
.d3v-textviz-placeholder-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
/* /stylesheets/visualizers/parametergraph.css */
/**
 * Parameter Graph visualizer.
 *
 * Every rule is scoped under .pg-root. The viewer renders inside a Bootstrap 3 page, and
 * unscoped rules on button / table / ul would be inherited by the panel around it.
 *
 * Colours come from the simlytiks tokens where the surrounding page defines them, so the
 * viewer follows the app's theme -- including .sl-dark, which flips the same tokens -- and
 * falls back to its own palette when it is rendered outside a themed container.
 */

.pg-root {
    --pg-bg:        var(--sl-bg-primary,   #FFFFFF);
    --pg-surface:   var(--sl-bg-secondary, #F8FAFC);
    --pg-surface-2: var(--sl-bg-tertiary,  #F1F5F9);
    --pg-hover:     var(--sl-bg-hover,     #E2E8F0);
    --pg-ink:       var(--sl-text-primary,   #1E293B);
    --pg-ink-2:     var(--sl-text-secondary, #475569);
    --pg-ink-3:     var(--sl-text-muted,     #94A3B8);
    --pg-line:      var(--sl-border-color, #E2E8F0);
    --pg-accent:    var(--sl-accent-primary, #3B82F6);
    --pg-read:      var(--sl-accent-success, #10B981);
    --pg-radius:    var(--sl-border-radius-md, 8px);
    --pg-radius-sm: var(--sl-border-radius-sm, 6px);
    --pg-shadow:    var(--sl-shadow-md, 0 4px 12px rgba(0,0,0,.12));
    --pg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* The graph is SVG, and SVG takes no stylesheet for attribute fills -- the viewer reads
       these six back with getComputedStyle and paints with them. They live here so the graph
       follows the theme instead of staying light on a dark page. */
    --pg-node-box: var(--pg-surface-2);
    --pg-node-ink: var(--pg-ink);
    --pg-dead: #A6B2BD;
    --pg-dead-bg: #E7ECF1;
    --pg-feeds: #FFAA00;
    --pg-seat: #02B6FF;
    --pg-restraint: #2E8B57;
    --pg-airbag: #D1483A;
    --pg-column: #8E56C4;
    --pg-pulse: #6B7A88;
    --pg-other: #7C8B9A;

    position: relative;
    overflow: hidden;
    background: var(--pg-bg);
    color: var(--pg-ink);
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--pg-radius);
}

/* Rendered outside a themed simlytiks container, follow the OS instead of forcing a light
   panel into a dark page. A themed ancestor always wins, because --sl-* resolves first. */
@media (prefers-color-scheme: dark) {
    .pg-root {
        --pg-bg:        var(--sl-bg-primary,   #1a2744);
        --pg-surface:   var(--sl-bg-secondary, #16213e);
        --pg-surface-2: var(--sl-bg-tertiary,  #1f2f52);
        --pg-hover:     var(--sl-bg-hover,     #263a63);
        --pg-ink:       var(--sl-text-primary,   #E6EDF3);
        --pg-ink-2:     var(--sl-text-secondary, #A7B6C4);
        --pg-ink-3:     var(--sl-text-muted,     #7C8B9A);
        --pg-line:      var(--sl-border-color, #2A3B4D);
        --pg-accent:    var(--sl-accent-primary, #60A5FA);
        --pg-read:      var(--sl-accent-success, #34D399);
        --pg-shadow:    var(--sl-shadow-md, 0 8px 24px rgba(0,0,0,.34));
        --pg-dead: #4A5867;
        --pg-dead-bg: #1A2735;
        --pg-restraint: #3FBF77;
        --pg-airbag: #FF6B57;
        --pg-column: #B983E8;
        --pg-pulse: #8496A6;
        --pg-other: #8494A3;
    }
}

.pg-root * { box-sizing: border-box; }
.pg-root .pg-mono { font-family: var(--pg-mono); }
.pg-root .pg-val  { color: var(--pg-ink-3); }
.pg-root .pg-field { color: var(--pg-accent); font-weight: 600; }

/* ------------------------------------------------------------------ top bar */

.pg-root .pg-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 14px;
    background: var(--pg-bg);
    border-bottom: 1px solid var(--pg-line);
}

.pg-root .pg-tabs { display: flex; gap: 2px; overflow-x: auto; }

.pg-root .pg-tabs button {
    appearance: none;
    border: 0;
    background: none;
    color: var(--pg-ink-2);
    font: inherit;
    font-size: 13px;
    padding: 11px 14px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.pg-root .pg-tabs button:hover { color: var(--pg-ink); }
.pg-root .pg-tabs button.on {
    color: var(--pg-accent);
    border-bottom-color: var(--pg-accent);
    font-weight: 600;
}
.pg-root .pg-tabs button:focus-visible {
    outline: 2px solid var(--pg-accent);
    outline-offset: -3px;
}

.pg-root .pg-q {
    flex: 1 1 160px;
    max-width: 280px;
    height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius-sm);
    background: var(--pg-surface);
    color: var(--pg-ink);
    font: inherit;
    font-size: 12.5px;
}
.pg-root .pg-q:focus {
    outline: none;
    border-color: var(--pg-accent);
    box-shadow: var(--sl-focus-ring, 0 0 0 3px rgba(59,130,246,.1));
}

.pg-root .pg-chk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--pg-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.pg-root .pg-chk input { margin: 0; cursor: pointer; accent-color: var(--pg-accent); }

.pg-root .pg-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--pg-line);
    background: var(--pg-surface);
}

.pg-root .pg-dot {
    width: 9px;
    height: 9px;
    border-radius: 2.5px;
    flex: 0 0 auto;
    display: inline-block;
}

/* ------------------------------------------------------------------- canvas */

.pg-root .pg-canvas {
    position: relative;
    overflow: auto;
    background: var(--pg-bg);
    min-height: 240px;
}
.pg-root .pg-canvas svg { display: block; }

/* The hover chain fades everything off it. Both the node groups and the edges carry the
   opacity attribute, so the transition is declared for both. */
.pg-root .pg-canvas svg g[data-id],
.pg-root .pg-canvas svg path { transition: opacity .13s ease; }
.pg-root .pg-canvas svg g[data-id] { cursor: pointer; }

/* -------------------------------------------------------------- nested tree */

.pg-root .pg-tree { padding: 14px 18px; }

.pg-root .pg-node {
    border-left: 2px solid var(--pg-line);
    margin-left: 9px;
    padding-left: 14px;
}
.pg-root .pg-cap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
}
.pg-root .pg-cap:hover { color: var(--pg-accent); }
.pg-root .pg-caret {
    width: 12px;
    display: inline-block;
    color: var(--pg-ink-3);
    font-size: 10px;
    transition: transform .13s ease;
}
.pg-root .pg-node.open > .pg-cap > .pg-caret { transform: rotate(90deg); }
.pg-root .pg-node > .pg-kids { display: none; }
.pg-root .pg-node.open > .pg-kids { display: block; }

.pg-root .pg-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 3px 0;
    font-size: 12px;
}

.pg-root .pg-pill {
    font-size: 10.5px;
    padding: 1.5px 7px;
    border-radius: 99px;
    background: var(--pg-surface-2);
    color: var(--pg-ink-2);
    font-family: var(--pg-mono);
    white-space: nowrap;
}
.pg-root .pg-pill.pg-dead { color: var(--pg-ink-3); opacity: .85; }

/* ------------------------------------------------------------------- tables */

.pg-root .pg-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    margin: 0 0 14px;
    background: none;
}
.pg-root .pg-table th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pg-ink-3);
    font-weight: 600;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid var(--pg-line);
    position: sticky;
    top: 0;
    background: var(--pg-bg);
}
.pg-root .pg-table td {
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--pg-line);
    vertical-align: top;
}
.pg-root .pg-table tbody tr:hover td { background: var(--pg-surface-2); }

/* The drawer's card and row tables are read as key/value, not scanned as a grid. */
.pg-root .pg-drawer .pg-table { font-size: 11.5px; }
.pg-root .pg-drawer .pg-table td {
    padding: 3px 10px 3px 0;
    border-bottom: 0;
}
.pg-root .pg-drawer .pg-table tbody tr:hover td { background: none; }

.pg-root .pg-scroll { overflow-x: auto; padding: 14px 18px 24px; }
.pg-root .pg-note {
    background: var(--pg-surface-2);
    border-left: 3px solid var(--pg-accent);
    padding: 10px 13px;
    border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
    font-size: 12.5px;
    color: var(--pg-ink-2);
    margin: 14px 18px;
}
.pg-root .pg-sub {
    margin: 22px 18px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pg-ink-3);
    font-weight: 600;
}

/* ------------------------------------------------------------------- drawer */

.pg-root .pg-drawer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    max-width: 92%;
    background: var(--pg-bg);
    border-left: 1px solid var(--pg-line);
    box-shadow: var(--pg-shadow);
    padding: 18px;
    overflow: auto;
    transform: translateX(102%);
    transition: transform .2s ease;
    z-index: 5;
}
.pg-root .pg-drawer.open { transform: none; }

.pg-root .pg-close {
    position: absolute;
    right: 12px;
    top: 12px;
    border: 0;
    background: var(--pg-surface-2);
    color: var(--pg-ink-2);
    width: 26px;
    height: 26px;
    border-radius: var(--pg-radius-sm);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}
.pg-root .pg-close:hover { background: var(--pg-hover); }

.pg-root .pg-drawer-body h3 {
    margin: 0 30px 3px 0;
    font-size: 15px;
    font-family: var(--pg-mono);
    font-weight: 600;
    word-break: break-all;
    color: var(--pg-ink);
}
.pg-root .pg-drawer-body h4 {
    margin: 16px 0 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pg-ink-3);
    font-weight: 600;
}
.pg-root .pg-drawer-body p { margin: 0 0 8px; font-size: 12px; }

.pg-root .pg-kv {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 5px 12px;
    margin: 14px 0;
    font-size: 12.5px;
}
.pg-root .pg-kv dt { color: var(--pg-ink-3); font-weight: 400; }
.pg-root .pg-kv dd { margin: 0; overflow-wrap: anywhere; }

.pg-root .pg-uses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pg-root .pg-uses li {
    background: var(--pg-surface-2);
    border-radius: var(--pg-radius-sm);
    padding: 8px 10px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* The curve. Newton renders into this box on a booted page; the built-in SVG plot uses it
   otherwise, so it is sized either way rather than collapsing to nothing. */
.pg-root .pg-plot {
    background: var(--pg-surface-2);
    border-radius: var(--pg-radius-sm);
    padding: 4px;
    margin-bottom: 10px;
    min-height: 200px;
    overflow: hidden;
}
.pg-root .pg-plot svg { display: block; max-width: 100%; }

@media (max-width: 720px) {
    .pg-root .pg-drawer { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-root * { transition: none !important; }
}

/* ------------------------------------------------------- a sweep of many runs */

/* A value that moved across the runs, against one that sat still. */
.pg-root .pg-varies { color: var(--pg-ink); font-weight: 500; }
.pg-root .pg-table td:not(.pg-varies) { color: var(--pg-ink-3); }
.pg-root .pg-table tr.pg-dead-row td { background: color-mix(in srgb, var(--pg-airbag) 8%, transparent); }
.pg-root .pg-pill.pg-warn {
    color: var(--pg-airbag);
    background: color-mix(in srgb, var(--pg-airbag) 14%, transparent);
}

.pg-root .pg-abbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid var(--pg-line);
    background: var(--pg-surface);
}
.pg-root .pg-runsel {
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius-sm);
    background: var(--pg-bg);
    color: var(--pg-ink);
    font: inherit;
    font-size: 12.5px;
    max-width: 240px;
}
.pg-root .pg-runsel:focus { outline: 2px solid var(--pg-accent); outline-offset: -1px; }

/* Two panes, one scroll. Stacks at phone width rather than shrinking both to nothing. */
.pg-root .pg-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--pg-line); }
.pg-root .pg-pane { display: flex; flex-direction: column; min-width: 0; background: var(--pg-bg); }
.pg-root .pg-panehd {
    padding: 6px 12px;
    font-family: var(--pg-mono);
    font-size: 12px;
    color: var(--pg-ink-2);
    background: var(--pg-surface-2);
    border-bottom: 1px solid var(--pg-line);
    position: sticky;
    top: 0;
    z-index: 1;
}
.pg-root .pg-panebody { overflow: auto; max-height: 460px; }
@media (max-width: 720px) {
    .pg-root .pg-panes { grid-template-columns: 1fr; }
    .pg-root .pg-panebody { max-height: 300px; }
}

/* ----------------------------------------------------- SVG text sizing

   d3VIEW ships a global `.svg text, svg text { font-size: 1.4em }`. A font-size
   PRESENTATION ATTRIBUTE loses to any stylesheet rule, so the sizes set while
   drawing were being overridden -- 11.5 became 18.2px and every node label
   overflowed its box. Sized here instead, where the selector outranks that rule. */

.pg-root .pg-canvas svg text,
.pg-root .pg-plot svg text {
    font-family: var(--pg-mono);
}
.pg-root .pg-canvas svg text.pg-nname { font-size: 11.5px; }
.pg-root .pg-canvas svg text.pg-nval  { font-size: 10px; }
.pg-root .pg-plot svg text.pg-atext   { font-size: 9px; }

/* /stylesheets/visualizers/newton.v2.css */
div.d3view-newton .vizcontainer, div.d3view-newton .main_container {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
div.d3view-newton .vizcontainer, div.d3view-newton .main_container .newton-charts {
    padding: 0!important;
    margin-right: 0 !important;
}
div.d3view-newton.exporting .main_container {
    overflow: visible!important;
}
/** Added on 2026-06-30 - R0-3900 #1 - in a minimized response card the viz runs in a small
   .main_container with overflow:hidden (needed to clip the chart). That also clipped the chart
   toolbar's settings dropdown (Chart Type / Reset / Export as code / ...) so its options were
   cut off and the user had to enlarge the response to use them. While a settings dropdown is
   actually open in tiny mode, let the container overflow so the menu shows in full; it re-clips
   on close (SVG chart content stays clipped to its own viewport, so nothing else spills). **/
div.d3view-newton div.main_container.tiny:has(.newton-simple-settings-header .dropdown.open) {
    overflow: visible;
}
/** Updated by shashank2104 on 2026-05-20 - DVFIV-2058 - use display:none so the chrome buttons don't leave a colored placeholder square in PPT/PDF exports **/
div.d3view-newton.exporting .chart_container .newton-mode-settings,
div.d3view-newton.exporting .chart_container .newton-inbuilt-settings,
div.d3view-newton.exporting .chart_container .newton-interaction-settings {
    display: none !important;
}
div.d3view-newton.exporting .chart_container div.svg_container,
div.d3view-newton.exporting .chart_container div.d3view-legends-container {
    opacity: 1!important;
}

div.d3view-newton .svg_container svg {
    left: 0;
    top: 0;
}
div.d3view-newton svg.newton-gridlines rect.pan-rect {
    fill: transparent;
}
div.d3view-newton div.svg_container .curve_droppable {
    width: 90px;
    position: absolute;
    top: 0;
}
div.d3view-newton div.svg_container .curve_droppable[data-id="y1"] {
    left: 0;
}
div.d3view-newton div.svg_container .curve_droppable[data-id="y1"].over:before {
    content: 'Y1';
    position: absolute;
    left: 50%;
    margin-left: -25%;
    font-size: 1.3em;
    font-weight: 500;
    top: -30px;
}
div.d3view-newton div.svg_container .curve_droppable[data-id="y2"].over:before {
    content: 'Y2';
    position: absolute;
    left: 50%;
    margin-left: -25%;
    font-size: 1.3em;
    font-weight: 500;
    top: -30px;
}

div.d3view-newton div.svg_container .curve_droppable[data-id="y3"].over:before {
    content: 'Y3';
    position: absolute;
    left: 50%;
    margin-left: -25%;
    font-size: 1.3em;
    font-weight: 500;
    top: -30px;
}

div.d3view-newton div.svg_container .curve_droppable[data-id="y2"] {
    right: 100px;
}
.d3view-item-dragging div.d3view-newton div.svg_container .curve_droppable {
    background: #f5f5f5;
}
.d3view-item-dragging div.d3view-newton div.svg_container .curve_droppable.over {
    background: #eee!important;
}

div.d3view-newton.exporting div.d3view-legends-container .legends-body {
    max-height: unset!important;
    overflow: hidden!important;
}
div.d3view-newton .newton_settings_container {
    position: absolute;
    /*position: fixed;*/
    right: 0;
    top: 0;
    height: 100%;
    z-index: 200000!important;
}
div.d3view-newton .newton_settings_container.fixed {
    position: fixed;
}
div.d3view-newton .newton_settings_container .options-table td {
    word-break: break-all;
}

div.d3view-newton .chart_container.panning svg.newton-svg,
div.d3view-newton .chart_container.panning canvas.newton-canvas {
    cursor: move;
}
div.d3view-newton .chart_container[data-mode="select"] canvas.newton-canvas {
    /*z-index: 3!important;*/
}

div.d3view-newton svg.newton-svg g.newton-arrow .arrow-text {
    display: none;
}
.event-detection .zoom_brush,
.event-detection .legends-wrapper,
.event-detection .newton-tooltip,
.event-detection .newton-mode-settings,
.event-detection .highlight_brushes {
    display: none!important;
}
.event-detection .events-container,
.event-detection .lines path {
    pointer-events: none!important;
}
.event-detection rect.pan-rect {
    pointer-events: all!important;
}
.event-dragging .newton-tooltip,
.event-dragging .focus {
    display: none!important;
}

.chart_container.isBrushing .lines path {
    pointer-events: none!important;
}

div.d3view-newton .newton-settings-group .chart_type .dropdown-menu li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.d3view-newton .newton-settings-group .chart_type .dropdown-menu li > a {
    flex: 1 1 auto;
}
div.d3view-newton .newton-settings-group .chart_type .dropdown-menu li .pl-inline-docs {
    position: relative;
    transform: none;
    top: unset;
    right: unset;
}

div.d3view-newton .axis path.domain {
    stroke: #111!important;
    stroke-width: 2!important;
}
div.d3view-newton .line-0 {
    stroke: #666!important;
    stroke-width: 2!important;
}

div.d3view-newton g.mp text {
    dominant-baseline: hanging;
}

div.d3view-newton svg.newton-svg.hasLowerChart .chart-container > .x_axis_group .tick text {
    display: none;
}
div.d3view-newton svg.newton-svg:not(.hasLowerChart) g.newton-lower-chart {
    display: none;
}





/*div.d3view-newton .main_container {*/
/*    border: 1px solid transparent;*/
/*}*/
/*div.d3view-newton .main_container.settings_open {*/
/*    border-color: #428bca;*/
/*}*/
div.d3view-newton .reset_zoom.faded {
    opacity: 0.5;
    pointer-events: none;
}
/*div.d3view-newton .toggle-settings-menu {*/
    /*font-size: 14px;*/
    /*color: #4f5359;*/
    /*position: absolute;*/
    /*right: 10px;*/
    /*top: 10px;*/
    /*z-index: 8;*/
    /*cursor: pointer;*/
    /*!*transition: 0.4s ease-in;*!*/
    /*!*-webkit-transition: 0.4s ease-in;*!*/
    /*!*-moz-transition: 0.4s ease-in;*!*/
/*}*/
/*div.d3view-newton .toggle-settings-menu:hover {*/
    /*color: red;*/
/*}*/
/*div.d3view-newton .newton-settings-container.toggled .toggle-settings-menu {*/
    /*color: #FFF;*/
/*}*/
/*div.d3view-newton .newton-settings-container.toggled .tiny .toggle-settings-menu {*/
    /*!*right: 150px;*!*/
/*}*/

/*!* quick workers *!*/
/*div.d3view-newton .quickWorkers {*/
    /*position: absolute;*/
    /*top: 30px;*/
    /*right: 10px;*/
    /*cursor: pointer;*/
/*}*/

/* settings container buttons */
div.d3view-newton .newton-settings-container-buttons {
    position: absolute;
    right: 13px;
    top: 0;
}
div.d3view-newton .newton-settings-container .newton-settings-container-buttons button:focus {
    outline: none;
    border-color: #CCC;
    background-image: none;
    background-position: 0;
    background: #FFF;
}
div.d3view-newton .newton-settings-container .newton-settings-container-buttons button {
    box-shadow: none;
    display: block;
    padding: 1px 4px;
    text-shadow: none;
    background-image: none;
}
div.d3view-newton .close_settings {
    position: absolute;
    right: 8px;
    top: 2px;
    cursor: pointer;
    font-size: 1.4em;
    /*color: #FFF;*/
}
div.d3view-newton .close_settings:hover {
    color: red;
}

/* trendline container */
div.d3view-newton div.d3view-newton-trendline-container {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 8;
    height: 100%;
    width: 200px;
    background-color: #4f5359;
    color: #FFF;
}



/* medium sized container */
div.d3view-newton.md div.bootstrap-select.chart_type {
    width: 100px!important;
}
div.-newton.chart_type .dropdown-menu {
    left: auto;
    right: 0;
}
div.d3view-newton.md div.settings-header-input-container {
    right: 102px!important;
}
div.d3view-newton.md .chart_container .newton-inbuilt-settings .btn-group button,
div.d3view-newton.md .chart_container .newton-inbuilt-settings .btn-group a.dropdown-toggle {
    margin-right: 0!important;
}
div.d3view-newton.md .setting-button-text {
    display: none;
}

div.d3view-newton.md .chart_container .newton-simple-settings-header .dropdown-menu .setting-button-text {
    display: inline-block!important;
}

div.d3view-newton .newton_settings_container .settings_menu {
    width: 0;
    transition: width 0.4s, opacity 0.4s;
    -webkit-transition: width 0.4s, opacity 0.4s;
    -moz-transition: width 0.3s, opacity 0.8s;
    opacity: 0;
    right: 0;
    top: 0;
    background-color: #FFF;
    color: #656565;
    height: 100%;
    border: 1px solid #DDD;
    pointer-events: none;
}
div.d3view-newton .newton_settings_container.fixed .settings_menu,
div.d3view-newton .newton-settings-container.toggled .settings_menu {
    position: relative;
    width: 350px;
    opacity: 1;
    pointer-events: all;
}
div.d3view-newton .settings_menu .bootstrap-select .dropdown-menu {
    width: 100%;
}
div.d3view-newton .settings_menu ul.nav-tabs {
    display: none;
}
div.d3view-newton .newton_settings_container.fixed ul.nav-tabs,
div.d3view-newton .newton-settings-container.toggled .settings_menu ul.nav-tabs {
    display: block!important;
    margin-bottom: 0;
}
div.d3view-newton .newton-settings-container.toggled .tiny .settings_menu {
    width: 200px;
}
div.d3view-newton .chart_container {
    position: relative;
    background: #FFF;
}
div.d3view-newton .chart_container svg.newton-svg {
    z-index: 3;
    /*width: auto!important;*/
    /*height: auto!important;*/
}



/** Grouped **/
.d3view-viz .grouped_chart_container {
    flex: 0 0 100%;
    height: 100%;
}
.d3view-viz .grouped_view.root > .chart_container {
    height: calc(100% - 40px)!important;
}
.d3view-viz .grouped_view.root {
    height: 100%;
    margin-bottom: 0!important;
}

.d3view-newton .grouped_charts[data-orientation="grid"] {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    position: relative;
}
.d3view-newton .grouped_charts[data-orientation="grid"] > .grouped_view:not(.root) {
    position: absolute;
    width: calc(50% - 20px);
    height: 33%;
    /*flex: 0 0 calc(50% - 20px);*/
    margin: 10px;
}
.d3view-newton .grouped_charts[data-orientation="grid"] > .grouped_view.root {
    /*flex: 1 1 calc(100% - 20px);*/
    width: calc(100% - 20px);
    height: 100%;
    float: none;
    margin: 0;
}
.d3view-newton .grouped_charts.allowSelection > .grouped_view:not(.root) {
    cursor: pointer;
}
.d3view-newton .grouped_charts[data-bordered="true"] > .grouped_view:not(.root) {
    border: 1px solid #DDD;
    padding: 10px;
}
.d3view-newton .grouped_charts[data-bordered="true"] > .grouped_view:not(.root).selected {
    border: 3px solid steelblue;
}

.d3view-newton .grouped_charts[data-orientation="vertical"] {
    /*display: flex;*/
    position: relative;
}
.d3view-newton .grouped_charts[data-orientation="vertical"] > .grouped_view:not(.root) {
    position: absolute;
    width: 500px;
    height: 100%;
    flex: 0 0 450px;
    margin: 0 10px;
}
.d3view-newton .grouped_charts[data-orientation="vertical"] > .grouped_view.root {
    flex: 0 0 calc(100% - 20px);
    height: 100%;
    margin: 0;
}
.d3view-newton .grouped_charts[data-orientation="horizontal"] > .grouped_view:not(.root) {
    height: 350px!important;
    margin-bottom: 15px;
}

.d3view-newton .grouped_charts[data-orientation="carousel"] > .grouped_view {
    width: 100%;
}
.d3view-newton .grouped_charts span.group-aggs > span {
    margin: 0 5px;
}
div.d3view-newton .grouped_charts .newton-charts-left span.curve-name {
    flex: none;
}




div.d3view-newton svg.newton-svg rect.transparent-background {
    pointer-events: all;
    cursor: context-menu;
    fill: transparent;
}
/* table view */
div.d3view-newton .main_container:not(.tiny) .newton-table-view {
    position: relative;
    text-align: center;
    top: 30px;
    height: 100%;
}
div.d3view-newton .newton-table-view .slick-header-column {
    text-align: center;
}
div.d3view-newton div.bootstrap-select.chart_type {
    /*position: absolute; right: 0;top: 0;*/
    width: 150px;
    float: right;
}
div.d3view-newton div.newton-inbuilt-settings div.bootstrap-select button.dropdown-toggle:focus {
    outline: none!important;
}


div.d3view-newton div.points_used {
    /*position: absolute;*/
    /*right: 102px;*/
    /*width: 100px!important;*/
    float: right!important;
}
div.d3view-newton .raw-points-count {
    /*background: #428bca;*/
}
div.d3view-newton div.chart_container[data-mode="zoom"] div.points_used {
    /*right: 115px;*/
}

div.d3view-newton div.points_used .dropdown-menu li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
div.d3view-newton div.points_used .dropdown-menu li>a:focus,
div.d3view-newton div.points_used .dropdown-menu li>a:hover,
div.d3view-newton div.points_used .dropdown-menu li.active>a {
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

div.d3view-newton div.drag_options {
    /*position: absolute;*/
    /*right: 160px;*/
    /*top: 0;*/
}
div.d3view-newton div.drag_options div.drag_type {
    width: 100px!important;
    vertical-align: top;
}
div.d3view-newton div.drag_options input.drag_offset {
    width: 100px;
    display: inline-block;
    height: 22px!important;
    vertical-align: top;
}
div.d3view-newton div.bootstrap-select.drag_type button.dropdown-toggle:focus {
    outline: none!important;
}

div.d3view-newton .settings_menu > .nav-tabs {
    /*padding: 2px;*/
    text-align: center;
    /*display: none;*/
}
div.d3view-newton .settings_menu > .nav-tabs li {
    float: none;
    display: inline-block;
    zoom: 1;
}
div.d3view-newton .settings_menu > .nav-tabs li > a:hover {
    background: none;
    border-color: transparent;
}
div.d3view-newton .settings_menu > .nav-tabs li.active > a {
    background: none;
    border-color: transparent;
    color: #428bca;
}
div.d3view-newton .settings_menu > .nav-tabs li > a {
    color: #656565;
}
div.d3view-newton .settings_menu .tab-content {
    position: relative;
    overflow: auto;
}
div.d3view-newton .settings_menu .tab-content .row {
    margin: 0;
}
div.d3view-newton .settings_menu .newton-option {
    padding: 10px 2px;
    /*border-bottom: 1px solid #FFF;*/
}
div.d3view-newton .settings_menu .newton-option:last-child {
    border-bottom: none;
}
div.d3view-newton .settings_menu .options-header {
    padding: 10px 20px 0;
    width: 100%;
}
div.d3view-newton .settings_menu .option-label {
    /*margin: 0px 0 1px 8px;*/
    font-weight: 500;
}
div.d3view-newton .settings_menu .newton-option:not(.hasSubOptions) {
    display: flex;
    align-items: center;
}
div.d3view-newton .settings_menu .form-control {
    display: inline-block;
}
div.d3view-newton .settings_menu [data-suboption] input.form-control {
    /*height: 20px!important;*/
}
div.d3view-newton .settings_menu .form-control::placeholder {
    font-size: 10px;
}
div.d3view-newton .settings_menu .chart-type-option {
    margin: 2px;
    display: inline-block;
}
div.d3view-newton .settings_menu .chart-type-option * {
    cursor: pointer;
}
div.d3view-newton .main_container.tableView, div.d3view-newton .main_container.histogramView, div.d3view-newton .main_container.timeSeriesView, div.d3view-newton .main_container.barChartView {
    position: absolute;
}
div.d3view-newton .main_container.tableView .dragActionsBox, div.d3view-newton .main_container.histogramView .dragActionsBox,
div.d3view-newton .main_container.timeSeriesView .dragActionsBox, div.d3view-newton .main_container.barChartView .dragActionsBox {
    display: none;
}
div.d3view-newton .main_container.tableView .drag_options, div.d3view-newton .main_container.histogramView .drag_options,
div.d3view-newton .main_container.timeSeriesView .drag_options, div.d3view-newton .main_container.barChartView .drag_options {
    display: none!important;
}

div.d3view-newton .main_container.tableView .chart_container, div.d3view-newton .main_container.histogramView .chart_container,
div.d3view-newton .main_container.timeSeriesView .chart_container, div.d3view-newton .main_container.barChartView .chart_container {
    position: absolute;
}
div.d3view-newton .main_container.tableView .chart_container > *:not(.newton-mode-settings),
div.d3view-newton .main_container.tableView div.newton-settings-container {
    display: none!important;
}
div.d3view-newton .main_container.tableView .newton-inbuilt-settings :not(.chart_type) button,
div.d3view-newton .main_container.tableView .newton-inbuilt-settings div.dropdown.reset_options,
div.d3view-newton .main_container.tableView .newton-inbuilt-settings li[data-id="blob"] {
    pointer-events: none;
    opacity: 0.3;
    display: none!important;
}
/*div.d3view-newton .main_container .chart_container[data-mode="highlight"] .newton-inbuilt-settings :not(.chart_type) button {*/
/*    pointer-events: none;*/
/*    opacity: 0.3;*/
/*    display: none!important;*/
/*}*/



/*div.d3view-newton .main_container .chart_container[data-mode="curve-drag"] .newton-inbuilt-settings > .btn-group:first-child {*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*}*/
/* histogram view */
div.d3view-newton .main_container.histogramView .chart_container > *:not(.newton-mode-settings),
div.d3view-newton .main_container.histogramView div.newton-settings-container {
    display: none!important;
}
div.d3view-newton .main_container.histogramView .newton-inbuilt-settings :not(.chart_type) button,
div.d3view-newton .main_container.histogramView .newton-inbuilt-settings div.dropdown.reset_options {
    pointer-events: none;
    opacity: 0.3;
    display: none!important;
}
div.d3view-newton .main_container:not(.tiny) .newton-histogram {
    position: relative;
    top: 30px;
}

/* time series view */
div.d3view-newton .main_container.timeSeriesView .chart_container > *:not(.newton-mode-settings),
div.d3view-newton .main_container.timeSeriesView div.newton-settings-container {
    display: none!important;
}
div.d3view-newton .main_container.timeSeriesView .newton-inbuilt-settings :not(.chart_type) button,
div.d3view-newton .main_container.timeSeriesView .newton-inbuilt-settings div.dropdown.reset_options {
    pointer-events: none;
    opacity: 0.3;
    display: none!important;
}

div.d3view-newton .newton-time-series-summary, div.d3view-newton .other-viz-views {
    position: relative;
    top: 30px;
}

/* bar chart view */
div.d3view-newton .main_container.barChartView .chart_container > *:not(.newton-mode-settings),
div.d3view-newton .main_container.barChartView div.newton-settings-container {
    display: none!important;
}
div.d3view-newton .main_container.barChartView .newton-inbuilt-settings :not(.chart_type) button,
div.d3view-newton .main_container.barChartView .newton-inbuilt-settings div.dropdown.reset_options {
    pointer-events: none;
    opacity: 0.3;
    display: none!important;
}
div.d3view-newton .main_container:not(.tiny) .newton-bar-chart {
    position: relative;
    top: 30px;
}

div.d3view-newton .chart_container .newton-inbuilt-settings {
    position: absolute;
    top: 0;
}



div.d3view-newton .newton-inbuilt-settings.bottomRight {
    right: 10px!important;
    bottom: 0;
    z-index: 8;
    top: unset!important;
    left: unset!important;
}
div.d3view-newton .chart_container .newton-settings-group div.dropdown {
    float: none!important;
}
div.d3view-newton .chart_container .newton-settings-group div.dropdown.open .dropdown-toggle {
    background-color: #eee!important;
}
div.d3view-newton .chart_container .newton-settings-group .setting-button-text {
    display: none!important;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center {
    margin-right: 9px;
    right: 100%;
    left: unset!important;
    transform: translateY(-50%);
    top: 50%;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center:before,
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    margin-left: -8px;
    right: -8px;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center:before {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CCC;
    margin-left: -10px;
    right: -10px;
}




div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center-top {
    margin-right: 9px;
    right: 100%;
    left: unset!important;
    top: 0;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center-top:before,
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center-top:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 0;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center-top:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    margin-left: -8px;
    right: -8px;
    top: 2px;
}
div.d3view-newton .newton-settings-group .dropdown-menu.dropdown-menu-center-top:before {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CCC;
    margin-left: -10px;
    right: -10px;
}

div.d3view-newton .main_container.tiny .chart_container .newton-settings-group button > i {
    width: 18px;
    height: 18px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.d3view-newton .main_container.tiny [data-id="newton-annotation"],
div.d3view-newton .main_container.tiny [data-id="newton-datum"],
div.d3view-newton .main_container.tiny div.reset_options {
    display: none!important;
}

@media screen and (min-width: 1024px) {
    div.d3view-newton .chart_container .newton-settings-group button > i {
        width: 24px;
        height: 24px;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}






div.d3view-newton .chart_container .newton-mode-settings {
    position: absolute;
    bottom: 0;
    z-index: 9;
    display: flex;
    align-items: center;
}

div.d3view-newton .chart_container .newton-settings-group div.dropdown {
    display: inline-block;
    float: left;
    margin-left: -1px;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button:focus,
div.d3view-newton .chart_container .newton-interaction-settings button:focus {
    outline: none;
    border-color: transparent;
    background-image: none;
    background-position: 0;
    background: #FFF;
}
/*div.d3view-newton .chart_container .newton-interaction-settings button:hover, div.d3view-newton .chart_container .newton-inbuilt-settings button:hover {*/
    /*background: #efefef!important;*/
/*}*/
div.d3view-newton .chart_container .newton-inbuilt-settings .bootstrap-select button,
div.d3view-newton .chart_container .newton-inbuilt-settings .drag_options button {
    border: 1px solid #CCC!important;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button,
div.d3view-newton .chart_container .newton-interaction-settings button,
div.d3view-newton .chart_container .newton-interaction-settings .btn-group-vertical > a,
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(.points_used) .dropdown-toggle {
    border-color: transparent;
    color: gray;
    box-shadow: none;
    background: #FFF;
    padding: 1px;
}
div.d3view-newton .newton-interaction-settings .popover-content {
    max-height: 175px;
    overflow: auto;
}
div.d3view-newton .newton-interaction-settings .popover-content .options-table {
    max-height: 100px;
    overflow: auto;
}
div.d3view-newton input.option-search {
    /*height: 22px !important;*/
    margin-left: 10px;
}

div.d3view-newton .newton-interaction-settings button.hovered {
    background-color: #428BCA!important;
    color: #FFF!important;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button:hover,
div.d3view-newton .chart_container .newton-interaction-settings button:hover,
div.d3view-newton .chart_container .newton-interaction-settings .btn-group-vertical > a:hover,
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(.points_used) .dropdown-toggle:hover,
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(.points_used) .dropdown-toggle:focus,
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(.points_used) .dropdown-toggle:active {
    color: #222!important;
    background: #eee!important;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button,
div.d3view-newton .chart_container .newton-settings-group a.dropdown-toggle,
div.d3view-newton .chart_container .newton-interaction-settings .button {
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button.exitMode {
    color: #FFF;
}
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(:last-child) a.dropdown-toggle {
    border-radius: 0;
    width: 24px;
}
div.d3view-newton .chart_container .newton-inbuilt-settings button.selected, div.d3view-newton .chart_container .newton-interaction-settings button.selected {
    background: #428BCA!important;
    color: white!important;
    text-shadow: none;
}
/*div.d3view-newton .chart_container .newton-inbuilt-settings div.dropdown:not(.hoverToggleOff):hover .dropdown-menu {*/
    /*display: block;*/
/*}*/
div.d3view-newton .chart_container .newton-settings-group div.dropdown:not(.hoverToggleOff) .dropdown-menu {
    margin-top: 0;
}


/* sortable curves list */
div.d3view-newton .chart_container ul.sortable-curves-list {
    margin-bottom: 0;
    box-shadow: none;
}
div.d3view-newton .chart_container ul.sortable-curves-list li:not(.no_curves) {
    word-break: break-word;
    margin: 6px;
    font-weight: 500;
}
div.d3view-newton .chart_container ul.sortable-curves-list li:not(.no_curves):hover {
    background: #f5f5f5;
    cursor: move;
}
div.d3view-newton .chart_container ul.sortable-curves-list .ui-sortable-placeholder {
    height: 40px;
    display: block;
}
div.d3view-newton .chart_container ul.sortable-curves-list li.no_curves {
    font-size: 1.3em;
    font-weight: 500;
    padding: 10px;
}

/* interaction settings */
div.d3view-newton .chart_container div.newton-interaction-settings {
    position: absolute;
    top: 0;
    right: 13px;
    z-index: 9;
}
div.d3view-newton .chart_container div.newton-interaction-settings > .btn-group.btn-group-vertical {
    display: flex;
    flex-direction: column;
}
div.d3view-newton .chart_container div.newton-interaction-settings .toggled {
    background: #f1f3f4;
    /* color: #FFF; */
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
}
div.d3view-newton .chart_container.tiny div.d3view-legends-container {
    display: none!important;
}
/** Added by shashank2104 on 2026-04-22 - DW-2866 - When forceLegendsOnSmallContainers is set, undo the tiny-container display:none so the legend actually renders (previously the .legends-wrapper opacity was flipped but the inner legends-container stayed hidden, so PDF capture never saw the legend). **/
div.d3view-newton .chart_container.tiny.forceLegendsOnSmallContainers div.d3view-legends-container {
    display: block!important;
    opacity: 1!important;
}
div.d3view-newton .main_container.tiny .setting-button-text {
    display: none!important;
}
div.d3view-newton input {
    height: auto!important;
}
div.d3view-newton .settings-header-input {
    width: 50px;
    display: inline-block;
    height: 22px!important;
}
/* settings footer */
div.d3view-newton .newton-settings-footer {
    /*position: absolute;*/
    /*width: 100%;*/
    border-top: 1px solid #DDD;
    padding: 5px;
    background-color: #FFF;
    left: 0;
    display: none;
}
div.d3view-newton .newton_settings_container.fixed .newton-settings-footer,
div.d3view-newton .newton_settings_container.toggled .newton-settings-footer {
    display: block;
}
div.d3view-newton .newton-settings-footer > button {
    margin: 0 3px;
}
div.d3view-newton .newton-settings-footer > button:focus {
    outline: none;
}
/* zoomed view */
div.d3view-newton div.newton-zoomed-view {
    position: absolute;
    bottom: 0;
    right: 70px;
    z-index: 10;
    background: #FFF;
    border: 1px solid #CCC;
}
/* settings data list */
div.d3view-newton .settings_menu ul.list-group-invert, div.d3view-newton .settings_menu div.data-list-options  {
    /*padding: 0 6px;*/
    margin: 2px 7px;
}
div.d3view-newton .settings_menu ul.list-group-invert > li {
    /*background-color: #4f5359;*/
    border-color: #efefef;
    padding: 8px 7px;
}
div.d3view-newton .settings_menu ul.records.list-group-invert > li .curve-color {
    display: inline-block;
    margin-left: 5px;
}
div.d3view-newton .settings_menu ul.records.list-group-invert > li .curve-color span.input-group-addon {
    display: inline-block;
    padding: 7px;
    /*position: absolute;*/
    top: 13px;
    border: none;
    border-radius: 0;
}
div.d3view-newton .settings_menu ul.list-group-invert > li .bs-editable {
    /*color: #FFF!important;*/
    text-decoration: none;
}
div.d3view-newton .settings_menu ul.list-group-invert.operations-list > li .bs-editable:hover > * {
    /*color: deepskyblue;*/
}
div.d3view-newton .settings_menu .operations-list .operation-name {
    font-weight: 500;
}
div.d3view-newton .settings_menu ul.list-group-invert.operations-list > li .remove_operation:hover {
    color: indianred;
}
div.d3view-newton .settings_menu .apply_existing .remove-existing:hover {
    color: red;
}

/* min-max list */
div.d3view-newton .settings_menu table.min-max-list {
    table-layout: fixed;
}
div.d3view-newton .settings_menu table.min-max-list th {
    text-align: center;
    overflow: hidden;
}
div.d3view-newton .settings_menu table.min-max-list td {
    /*word-wrap: break-word;*/
    overflow: hidden;
}

div.d3view-newton div.dragActionsBox {
    position: absolute;
    left: 0;
    top: 0;
}
div.d3view-newton div.dragActionsBox > button:focus, div.d3view-newton div.dragActionsBox > button:active {
    outline: none;
}

    /* Custom buttons */
div.d3view-newton .btn-d3view-filter {
    background-color: #ffffff;
    border-color: #93d0e4;
    color: #716b6b;
    padding: 3px 10px;
}
div.d3view-newton .btn-d3view-filter:hover {
    background-color: #f9f9f9;
    border-color: #066c8e;
    color: #595454;
}

/********* Legends **********/
div.d3view-newton div.legends-container, div.legends-container.newton-clone {
    position: absolute;
    color: #fff;
    border: 1px solid #ccc!important;
    background-color: #fff!important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 120px;
    z-index:7;
    margin-right: 10px;
}


/* TINY */
div.d3view-newton div.main_container.tiny div.newton-interaction-settings button[data-id="newton-saved-colors"],
div.d3view-newton div.main_container.tiny .quickWorkers {
    display: none!important;
}
div.d3view-newton div.main_container.tiny div.newton-interaction-settings,
div.d3view-newton div.main_container.tiny div.newton-inbuilt-settings {
    opacity: 0;
}
div.d3view-newton div.main_container.tiny:hover div.newton-interaction-settings,
div.d3view-newton div.main_container.tiny:hover div.newton-inbuilt-settings,
div.d3view-newton div.main_container.settings_open div.newton-inbuilt-settings,
div.d3view-newton div.main_container.settings_open div.newton-interaction-settings {
    opacity: 1!important;
}
div.d3view-newton div.main_container.tiny div.newton-inbuilt-settings div.dropdown {
    display: inline-block;
}
div.d3view-newton div.main_container.tiny {
    cursor: pointer;
}
div.d3view-newton div.main_container.tiny .limited-view-msg {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block!important;
}

div.d3view-newton svg.newton-svg .x.axis[data-scaletype="log"] .tick:nth-child(odd) {
    display: none;
}
div.d3view-newton div.main_container.tiny svg.newton-svg .axis *,
div.d3view-newton div.main_container.tiny svg.newton-svg .x_axis_group *{

}
div.d3view-newton div.main_container.tiny svg.newton-svg .curve_label {
    font-size: 100%!important;
}


div.d3view-newton div.main_container .d3view-legends-container .toggle-list-container {
    display: none;
}
div.d3view-newton div.main_container.tiny .d3view-legends-container .toggle-list-container {
    /*display: block!important;*/
}
div.d3view-newton div.main_container.tiny .d3view-legends-container .toggle-list {
    text-align: center;
    font-weight: bold;
    color: #428bca;
    cursor: pointer;
}
div.d3view-newton div.main_container.tiny .d3view-legends-container .toggle-list:hover {
    color: red;
}

div.d3view-newton div.sparkline-tooltip {
    position: fixed;
    display: none;
    padding: 10px;
    /*background: #fff;*/
    /*padding: 3px;*/
    /*border-radius: 3px;*/
    /*border: 1px solid #4f5359;*/
    z-index: 4;
    pointer-events: none;
    word-break: break-all;
}

div.d3view-newton div.main_container .limited-view-msg {
    display: none;
}


/*div.d3view-newton div.chart_container button.reset {*/
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 3px;*/
    /*display: none;*/
    /*z-index: 3;*/
/*}*/

/* drag handles */
div.d3view-newton svg.newton-svg .axes_drag_handle {
    stroke-width: 15px;
    stroke: transparent;
    fill: none;
    cursor: col-resize;
}
div.d3view-newton svg.newton-svg .drag_handle_x, div.d3view-newton svg.newton-svg .drag_handle_x_top {
    cursor: row-resize;
}
div.d3view-newton svg.newton-svg .axes_drag_handle:hover, div.d3view-newton svg.newton-svg .axes_drag_handle.dragging {
    stroke: rgba(0,0,0,0.1);
}

.chart-item-dragging rect.transparent-background,
.chart-item-dragging .axes_drag_handle,
.chart-item-dragging .newton-settings-group {
    pointer-events: none;
}

div.d3view-newton .chart_container.dragging > * {
    cursor: grab!important;
}
div.d3view-newton g.tooltip-container .maximize {
    font-family: FontAwesome;
    opacity: 0;
    cursor: pointer;
    color: #AAA;
}
div.d3view-newton g.tooltip-container .maximize.invisible {
    opacity: 0!important;
}
div.d3view-newton g.tooltip-container.hovered {
    cursor: move!important;
}
div.d3view-newton g.tooltip-container.hovered path.main {
    stroke: red!important;
}
div.d3view-newton g.tooltip-container.hovered path.transparent {
    stroke: #efefef!important;
}

div.d3view-newton .legends-wrapper {
    /*height: auto!important;*/
    z-index: 8;
}

div.d3view-newton div.legends-container[data-type="main"] div.legends-body ul li span.curve-name, div.legends-container.newton-clone div.legends-body ul li span.curve-name {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    word-break: break-all;
    letter-spacing: 0.4px;
    cursor: move;
    user-select: none;
}
body span.test_curve_name {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    word-break: break-all;
    letter-spacing: 0.4px;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
div.d3view-newton div.legends-container div.legends-body ul li span.curve-name.highlight_name {
    font-weight: 500;
}
div.d3view-newton div.legends-container div.legends-body ul li span.curve-name.clicked {
    opacity: 0.4;
}
div.legends-container.newton-clone div.legends-body ul li span.curve-name {
    /*font-family: serif!important;*/
    /*letter-spacing: 1px !important;*/
}
div.d3view-newton div.legends-container div.legends-body ul li input.curve-name-edit {
    height: 20px;
    width: auto;
    display: inline-block;
}
div.d3view-newton div.legends-container.range-values .legends-body ul li span.curve-name, div.legends-container.newton-clone.range-values .legends-body ul li span.curve-name {
    cursor: pointer;
}
div.d3view-newton div.legends-container div.legends-body ul li span.curve-name.minmax, div.legends-container.newton-clone div.legends-body ul li span.curve-name.minmax {
    font-weight: bold;
}
div.d3view-newton div.legends-container div.legends-body ul.legends-list {
    margin-bottom: 2px;
}
div.d3view-newton div.legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect, div.legends-container.newton-clone div.legends-body ul.legends-list li i.newton-legend-item-rect {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}
div.d3view-newton div.legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect.clicked + span.curve-name {
    pointer-events: none;
}

div.d3view-newton div.single-legend-item, div.newton-clone div.single-legend-item {
    position: absolute;
    top: 4px;
}
div.d3view-newton div.single-legend-item i.newton-legend-item-rect, div.newton-clone div.legends-body ul.legends-list li i.newton-legend-item-rect {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-right: 5px;
}
div.d3view-newton div.legends-container.toggled {
    height: 26px!important;
}
div.d3view-newton div.legends-container.toggled .legends-body {
    display: none;
}
div.d3view-newton div.legends-container.toggled .ui-resizable-handle {
    display: none;
}

/* legend clone overrides */
/*div.legends-container.newton-clone {*/
    /*width: auto!important;*/
    /*height:auto!important;*/
/*}*/
/*div.legends-container.newton-clone div.legends-body {*/
    /*max-height: none!important;*/
/*}*/
/*div.legends-container.newton-clone div.legends-body ul li span.curve-name {*/
    /*font-size: 15px!important;*/
/*}*/

/************** legends less than five ***************/
div.d3view-newton div.legends-container.tiny, div.legends-container.tiny.newton-clone {
    background-color: transparent!important;
    border: none!important;
    border-radius: unset!important;
    height: auto!important;
    width: auto!important;
    margin-right: 0!important;
    top: 0!important;
}
div.d3view-newton div.legends-container.tiny .legends-body, div.legends-container.tiny.newton-clone .legends-body {
    min-height: auto!important;
}
div.d3view-newton div.legends-container.tiny .legends-body ul.legends-list, div.legends-container.tiny.newton-clone .legends-body ul.legends-list {
    margin-bottom: 0;
}
div.d3view-newton div.legends-container.tiny .legend-header, div.legends-container.tiny.newton-clone .legend-header {
    display: none;
}
div.d3view-newton div.legends-container.tiny li.legend-item, div.legends-container.tiny.newton-clone li.legend-item {
    display: inline;
}

div.d3view-newton .chart_container.tiny .axis text, div.d3view-newton .chart_container.tiny span.curve-name {
    /*font-size: 8px!important;*/
}
/******* Dash legends *******/
div.d3view-newton ul.dash_legends {
    list-style-type: none;
    background: rgba(0,0,0,0.05);
    padding:5px;
    cursor: move;
}
div.d3view-newton ul.dash_legends li > span {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight: 500;
    /*font-size:11px;*/
    cursor: pointer;
}

/* global context menu */
div.d3view-newton .newton-global-context-menu {
    position: fixed!important;
}
div.d3view-newton .newton-global-context-menu, body .newton-annotation-context-menu, body .newton-arrow-context-menu {
    display: none;
    position: absolute;
    background: #FFF;
    border: 1px solid #cdcdcd;
    padding: 2px;
    border-radius: 4px;
    box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;
    z-index: 2000;
}
div.d3view-newton .newton-global-context-menu .nav-stacked-thin li a {
    padding: 4px 6px;
}
div.d3view-newton button[data-toggle="tooltip"] i {
    pointer-events: none;
}
div.d3view-newton div.datum-lines-context-menu {
    position: absolute;
    background: #FFF;
    border: 1px solid #cdcdcd;
    padding: 2px;
    border-radius: 4px;
    z-index: 2;
}
div.d3view-newton div.datum-lines-context-menu ul.list-group {
    margin: 0;
}
div.d3view-newton div.datum-lines-context-menu ul.list-group > li {
    border: none;
}
div.d3view-newton div.datum-lines-context-menu ul.list-group > li:hover {
    background-color: #Efefef;
}
div.d3view-newton div.datum-lines-context-menu ul.list-group > li > a {
    padding: 4px 6px;
    text-decoration: none;
}
div.d3view-newton div.datum-values-container, div.datum-values-container.newton-clone {
    position: absolute;
    border: 1px solid #DDD;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: move;
    z-index: 3;
    width: 300px;
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
    display: flex;
    flex-direction: column;
}
div.d3view-newton div.datum-values-container .container-body, div.datum-values-container.newton-clone .container-body {
    overflow: auto;
}
div.d3view-newton div.datum-values-container li.list-group-item, div.datum-values-container.newton-clone li.list-group-item {
    /*padding: 5px;*/
    border: none;
    background: none;
    white-space: normal;
}
div.d3view-newton div.datum-values-container li.list-group-item .legend-val, div.datum-values-container.newton-clone .legend-val {
    font-weight: bold;
}
div.d3view-newton div.datum-values-container .container-close {
    /*position: absolute;*/
    /*top: 4px;*/
    /*right: 4px;*/
    /*cursor: pointer;*/
}
div.d3view-newton div.datum-values-container .view_type{
    /*position: absolute;*/
    /*top: 2px;*/
    /*right: 30px;*/
}
div.d3view-newton div.datum-values-container .container-close {
    /*position: absolute;*/
    /*right: 2px;*/
    /*top: 2px;*/
}
div.datum-values-container.newton-clone .view_type {
    display: none;
}
div.datum-values-container.newton-clone .container-close { display: none; }
div.d3view-newton div.datum-values-container .container-close:hover {
    color: red;
}
div.d3view-newton .popover-title {
    text-overflow: ellipsis;
    overflow: hidden;
}
div.d3view-newton .d3view-subcontext-menu li.context-menu-item.clickable > a {
    padding-left: 10px;
}
div.d3view-newton .d3view-subcontext-menu li.context-menu-item.clickable:hover {
    background-color: #eee;
}

/* image container */
div.d3view-newton div.d3view-newton-image-container {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    border: 1px solid #DDD;
    min-width: 50px;
    min-height: 50px;
    text-align: center;
}
div.d3view-newton div.d3view-newton-image-container .close-container {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 4px;
    cursor: pointer;
    color: #AAA;
}
div.d3view-newton div.d3view-newton-image-container .close-container:hover {
    color: red;
}
div.d3view-newton div.d3view-newton-image-container img {
    max-height: 100%;
    max-width: 100%;
}
/* additions */
div.d3view-newton span.xval, div.d3view-newton span.xval_diff, div.d3view-newton span.yval {
    background: rgb(255, 255, 255);
    padding: 2px;
    border: 1px solid rgb(158, 200, 225);
    position: absolute;
    left: 0;
    text-align: center;
    pointer-events: none;
    display: none;
    z-index: 2;
    pointer-events: none!important;
}

/* modes */
/*div.d3view-newton .chart_container[data-mode="highlight"] div.d3view-legends-container div.legends-body .legends-list li {*/
    /*pointer-events: none;*/
/*}*/


div.d3view-newton .mini-legends {
    float: left;
    margin-right: 15px;
    max-width: 50%;
    display: flex;
    align-items: center;
    height: 22px;
}
div.d3view-newton .mini-legends .legends-list {
    display: flex;
    margin-bottom: 0;
    max-width: 95%;
    margin-right: 4px;
    overflow-x: hidden;
}
div.d3view-newton .mini-legends .legend-item {
    margin-right: 5px;
    display: flex;
    align-items: center;
    padding: 0 5px;
}
div.d3view-newton .mini-legends .dropdown .legend-item {
    padding: 7px;
}
div.d3view-newton .mini-legends .legend-item.highlighted {
    background-color: #428BCA;
    color: #FFF;
    border-radius: 4px;
}
div.d3view-newton .mini-legends .legend-item.highlighted svg line {
    stroke: #FFF!important;
}
div.d3view-newton .mini-legends .legend-item span.curve-name {
    margin-left: 4px;
}

/* newton tooltip */
div.newton-tooltip {
    z-index: 4000;
}
div.newton-tooltip .tooltip-inner {
    background-color: #4f5359;
}
div.newton-tooltip .tooltip-arrow {
    border-left-color: #4f5359!important;
    border-right-color: #4f5359!important;
}
div.newton-tooltip .tooltip-inner {
    max-width: initial;
}


/* difference chart */
div.d3view-newton-difference-chart {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    border: 1px solid #DDD;
    border-radius: 4px;
    padding: 3px;
    height: 220px;
    width: 300px;
    display: none;
    cursor: move;
}
div.d3view-newton-difference-chart span.close {
    position: absolute;
    right: 2px;
    top: 0;
}
div.d3view-newton-difference-chart div.bootstrap-select {
    position: relative!important;
    width: 80px!important;
}

div.d3view-newton-difference-chart .axis text {
    /*font-size: 8px!important;*/
}
/* complex context menu rect */

/* line context menu */
div.d3view-newton-line-context-menu {
    position: absolute;
    display: none;
    border-radius: 3px;
    z-index: 1200;
    background-color: #FFF;
    width: 40vw;
    border: 1px solid #CCC;
    height: 350px;
    margin-bottom: 0;
}
div.d3view-newton-line-context-menu .line-heading {
    padding: 5px;
    border-bottom: 1px solid #DDD;
    /*background-color: #DDD;*/
    font-weight: bold;
    position: relative;
}
div.d3view-newton-line-context-menu .line-heading .toggle-info {
    cursor: pointer;
}
div.d3view-newton-line-context-menu .line-heading .toggle-info.clicked {
    color: green;
}
div.d3view-newton-line-context-menu .line-heading .close_ctx_menu:hover {
    /*color: red;*/
}
div.d3view-newton-line-context-menu .line-heading .close_ctx_menu {
    /*font-size: 15px;*/
    position: absolute;
    right: 5px;
    top: 2px;
    cursor: pointer;
}
div.d3view-newton-line-context-menu .line-options-body, div.d3view-newton-line-context-menu .line-info {
    overflow: auto;
    /*max-height: 250px;*/
}
div.d3view-newton-line-context-menu .line-info {
    max-height: 250px;
}
div.d3view-newton-line-context-menu .row {
    padding: 7px;
    border-bottom: 1px solid #DDD;
}
div.d3view-newton-line-context-menu .row:last-child {
    border-bottom: none;
}
div.d3view-newton-line-context-menu .choose-color:before {
    content: '#';
    position: absolute;
    left: 4px;
    top: 5px;
    z-index: 4;
    color: #555;
}
div.d3view-newton-manager {
    position: relative!important;
    /*max-height: 550px;*/
    overflow: auto;
}
div.d3view-newton-manager .newton-chart {
    min-height: 250px;
    width: 90%;
}
div.d3view-newton-manager:not(.show_all_axes) .newton-chart:not(.last) .x.axis,
div.d3view-newton-manager .newton-chart:not(.last) .xLabel.curve_label,
div.d3view-newton-manager:not(.show_all_axes) .newton-chart:not(.last) span.xval.focus,
div.d3view-newton-manager .newton-chart:not(.last) svg text.xval {
    display: none!important;
}
div.d3view-newton-manager .newton-chart .legends-container[data-type="dash"] .legend-header {
    display: none;
}

/* free datum drawing */
div.d3view-newton div.main_container.free-datum-drawing div.legends-container, div.d3view-newton div.main_container.free-datum-drawing .newton-settings-container {
    display: none;
}
div.d3view-newton div.main_container.free-datum-drawing .curve_label, div.d3view-newton div.main_container.free-datum-drawing .newton-inbuilt-settings .btn-group > *:not([data-id="newton-datum"]) {
    pointer-events: none;
    opacity: 0.3;
    display: none!important;
}

div.excelresponseparser .newton-excelreponseparse-sidebar .remove-response {
    cursor: pointer;
    padding: 0 5px;
}
div.excelresponseparser .newton-excelreponseparse-sidebar .remove-response:hover {
    color: red;
}

div.d3view-newton .focus {
    padding: 4px;
    border: 1px solid #DDD;
    background-color: #fff;
    border-radius: 3px;
    font-size: 1.1rem;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    position: absolute;
    display: none;
    pointer-events: none!important;
    background-color: rgba(255,255,255,0.7);
    z-index: 4;
}
div.d3view-newton .xval.focus:before, div.d3view-newton .xval.focus:after {
    content: '';
    position: absolute;
    top: 0%;
    margin-top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
}
div.d3view-newton .xval.focus:before {
    border-color: transparent transparent rgb(158, 200, 225) transparent;
    border-width: 0 8px 8px 8px;
    margin-top: -8px;
}
div.d3view-newton .xval.focus:after {
    border-color: transparent transparent #fff transparent;
    border-width: 0 7px 7px 7px;
    margin-top: -7px;
}
div.d3view-newton .yval.focus:before, div.d3view-newton .yval.focus:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-style: solid;
}
div.d3view-newton .yval.focus:before {
    border-color: transparent transparent transparent rgb(158, 200, 225);
    border-width: 7px 0 7px 7px;
}
div.d3view-newton .yval.focus:after {
    border-color: transparent transparent transparent #FFF;
    border-width: 6px 0 6px 6px;
    margin-left: -1px;
}

div.d3view-newton .midline {
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    font-size: 1.1em;
    pointer-events: none!important;
    z-index: 2;
    display: inline-block;
}
div.d3view-newton .midline span {
    animation: circles 0.6s ease-in-out infinite;
    padding: 0 4px;
    opacity: 0;
}
div.d3view-newton .midline span:first-child {
    animation-delay: 0s;
}
div.d3view-newton .midline span:nth-child(2) {
    animation-delay: 0.1s;
}
div.d3view-newton .midline span:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes circles {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

div.d3view-newton .focus.transition {
    transition: top 0.5s ease-in;
}


div.d3view-newton .curves-shift-container {
    position: absolute;
    border-radius: 4px;
    right: 10px;
    top: 30px;
    width: 250px;
    border: 1px solid #DDD;
    background-color: #FFF;
    padding: 3px;
    z-index: 20;
}
div.d3view-newton .curves-shift-container .curves-shift-body {
    height: 200px;
    overflow: auto;
}


div.d3view-newton div.chart_container.legend_mousemove svg.newton-svg rect.transparent-background {
    pointer-events: none!important;
}

div.d3view-newton .chart_container.hasImages .img-container {
    z-index: 3!important;
}
div.d3view-newton .chart_container.hasImages .img-container:hover .ui-resizable-handle {
    opacity: 1!important;
}
div.d3view-newton .chart_container.hasImages .img-container .ui-resizable-handle {
    pointer-events: all!important;
}

div.d3view-newton .img-container {
    /*background: rgb(255, 255, 255);*/
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0.5;
    border: 1px solid transparent;
}
div.d3view-newton .img-container:hover,
div.d3view-newton .img-container.ui-draggable-dragging,
div.d3view-newton .img-container.ui-resizable-resizing {
    border: 1px solid #DDD!important;
}
div.d3view-newton .img-container .remove-img {
    z-index: 2;
    padding: 1px 6px;
    color: #4f5359;
    font-size: 1.3em;
    position: absolute;
    right: 0px;
    top: 0;
    cursor: pointer;
}
div.d3view-newton .img-container .remove-img:hover {
    color: red!important;
}

div.newton-add-rows-container a.row-info {
    text-decoration: none;
}
div.newton-add-rows-container > table > tbody > tr {
    border-left: 2px solid transparent;
    height: 70px;
}
div.newton-add-rows-container tbody tr td {
    border: none!important;
    vertical-align: middle!important;
}
div.newton-add-rows-container tr.border-red {
    border-left-color: red!important;
}
div.newton-add-rows-container tr.border-red .computed input {
    border-color: lightskyblue;
}
div.newton-add-rows-container .tr-info th {
    padding: 0;
    border: none;
}

div.newton-tooltip-table {
    padding: 12px;
    border-radius: 4px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    z-index: 20;
    position: absolute;
    transition: opacity 0.5s ease-in;
    pointer-events: none;
}
div.newton-tooltip-table:not(.sticky) {
    position: fixed;
}
div.newton-tooltip-table.hasScrollbar, div.newton-tooltip-table.sticky {
    pointer-events: all;
}
div.newton-tooltip-table .btn-group button {
    color: #AAA;
    box-shadow: none;
    border: none;
}
div.newton-tooltip-table ul {
    max-height: 150px;
    overflow: auto;
}
div.newton-tooltip-table ul li {
    padding: 3px 5px;
}
div.newton-tooltip-table span.curve-val {
    font-weight: 600;
}

div.d3view-newton .chart_container.zoomed rect.pan-rect {
    stroke: orange;
}

div.d3view-newton kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}


div.d3view-newton .animation-alert {
    position: absolute;
    padding: 12px;
    border-radius: 4px;
    width: 220px;
    height: 120px;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    z-index: 2000;
}


div.d3view-newton .newton-settings-group button.mode-option {
    transition: opacity 0.5s ease-in;
    opacity: 1!important;
}
div.d3view-newton .newton-settings-group button.mode-option.invisible {
    opacity: 0;
    display: none;
}


div.d3view-newton .main_container.vizView .newton-charts-left > div.chart_container {
    height: 0!important;
}
div.d3view-newton .main_container.vizView .newton-charts-left > div.chart_container > :not(.newton-interaction-settings):not(.newton-simple-settings-header) {
    display: none;
}
div.d3view-newton .main_container.vizView .newton-simple-settings-header .main-dd > li:not(.chart_type) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

div.d3view-newton .main_container.vizView div.newton-interaction-settings .btn-group > :not(.chart_type) {
    display: none!important;
}
div.d3view-newton .main_container.vizView .newton-charts-left > div.chart_container .d3view-legends-container {
    display: none!important;
}

div.d3view-newton g.lines.animated.flash {
    animation-name: flash_override;
}

div.wf-worker-info-newton-popover {
    z-index: 200000;
}
div.wf-worker-info-newton-popover .thumbnail img {
    height: unset!important;
}
div.wf-worker-info-newton-popover .add_buttons {
    display: none;
}
div.wf-worker-info-newton-popover .popover-content {
    max-height: 200px;
    overflow: auto;
}
div.d3view-newton .w-info.hasPopover {
    color: green!important;
}
div.d3view-newton .legends-wrapper:hover .ui-resizable-s {
    /*height: 2px;*/
}
div.d3view-newton .hideLegendLabels .legend-header {
    /*position: absolute;*/
    right: 0;
}

div.d3view-newton .hideLegendLabels .legend-header .legend-search-toggle {
    display: none;
}
div.d3view-newton .legends-wrapper:hover .ui-resizable-s,
div.d3view-newton .legends-wrapper.ui-resizable-resizing .ui-resizable-s {
    /*background: #DDD;*/
}
div.d3view-newton .legends-wrapper:hover .d3view-legends-container {
    /*z-index: 100;*/
}
div.d3view-newton .legends-wrapper .legends-body {
    /*overflow-x: hidden;*/
}
div.d3view-newton .legends-wrapper .legends-body .legends-list {
    /*overflow-x: hidden;*/
    min-height: 28px;
}
div.d3view-newton div.d3view-legends-container li.legend-item {
    /*line-height: 1.3em;*/
}

div.d3view-context-menu-container.newton-context-menu {
    width: 300px;
}


div.d3view-newton .chart_container[data-locked="true"] [data-id="newton-zoom"],
div.d3view-newton .chart_container[data-locked="true"] .zoom_type,
div.d3view-newton .chart_container[data-locked="true"] .pinnedViews,
div.d3view-newton .chart_container[data-locked="true"] [data-id="newton-highlight"],
div.d3view-newton .chart_container[data-locked="true"] [data-id="undo"],
div.d3view-newton .chart_container[data-locked="true"] [data-id="redo"],
div.d3view-newton .chart_container[data-locked="true"] [data-id="dependents"] {
    opacity: 0.4!important;
    pointer-events: none!important;
}
div.d3view-newton .chart_container[data-locked="true"] .svg_container g.zoom_brush,
div.d3view-newton .chart_container[data-locked="true"] .svg_container g.highlight_brushes,
div.d3view-newton .chart_container[data-locked="true"] .svg_container .axes_drag_handle {
    display: none;
}
div.d3view-newton .chart_container[data-locked="true"] .svg_container rect.pan-rect {
    pointer-events: all!important;
}

.newton-settings-popover h3.popover-title {
    display: none;
}

.newton-save div.d3view-multiselect .search-container .dropdown-menu {
    right: 0;
    left: auto;
    width: 300px;
}

.d3view-newton .svg_container .newton-dropzone {
    border: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.d3view-newton .chart_container .associated_data {
    position: absolute;
    left: 400px;
    top: 100px;
    width: 30%;
    height: 40%;
    /*overflow: auto;*/
    background: #FFF;
    z-index: 20;
}
.d3view-newton .chart_container .associated_data tr.highlighted {
    background: var(--dt-selection-color);
}

/** Added by shashank2104 on 2026-04-17 - DW-2776 - Prediction accuracy floating panel */
.d3view-newton .newton-accuracy-panel {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 340px;
    height: 280px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-primary, #ddd);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,.12));
    z-index: 25;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.d3view-newton .newton-accuracy-panel .panel-heading {
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border-primary, #ddd);
    background: var(--d3v-bg-secondary, #f8f9fa);
    cursor: move;
    flex-shrink: 0;
}
.d3view-newton .newton-accuracy-panel .panel-heading label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #333);
}
.d3view-newton .newton-accuracy-panel .panel-body {
    flex: 1;
    overflow-y: auto;
}
.d3view-newton .newton-accuracy-panel table th {
    position: sticky;
    top: 0;
    background: var(--d3v-bg-secondary, #f8f9fa);
    z-index: 1;
    font-size: 11px;
    color: var(--d3v-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.d3view-newton .newton-accuracy-panel tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}
.d3view-newton .newton-accuracy-panel tbody tr:hover,
.d3view-newton .newton-accuracy-panel tbody tr.highlighted {
    background: var(--d3v-bg-hover, rgba(0,0,0,.04));
}

.d3view-newton g.threshold circle {
    fill: red;
}

.d3view-newton .th-table {
    /*position: absolute!important;*/
    /*right: 0;*/
    /*top: 50px;*/
    width: 25%;
    /*height: 25%;*/
    /*background: #FFF;*/
    /*border: 1px solid #DDD;*/
    /*overflow: auto;*/
    /*z-index: 20;*/
    display: none!important;
}
.d3view-newton .th-table tbody tr {
    cursor: pointer;
}
.d3view-newton .th-table tbody tr:hover {
    background-color: var(--dt-selection-color);
}
.d3view-newton .th-table tbody tr.ui-selected {
    background: #428bca;
    color: #FFF;
}
div#newton-exploded-th .threshold .th-rect {
    display: block!important;
    stroke: #000!important;
}

div.d3view-newton .main_container:not(.hasThTable) .newton-charts {
    width: 100%!important;
}
div.d3view-newton .vizcontainer, div.d3view-newton .main_container > .newton-main > div {
    height: 100%!important;
}
div.d3view-newton .main_container.hasThTable > .newton-main >  .th-table {
    display: block!important;
}
div.d3view-newton .main_container.hasThTable > .newton-main > .ui-layout-resizer {
    background-color: #DDD!important;
    width: 3px!important;
}
div.d3view-newton .main_container:not(.hasThTable) > .newton-main .ui-layout-resizer {
    display: none!important;
}
div.d3view-newton .main_container.hasThTable > .newton-main > .ui-draggable-dragging.ui-layout-resizer {
    background-color: red!important;
}

div#newton-exploded {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
div#newton-exploded .panel {
    margin: 4px;
    height: 100%;
}
div#newton-exploded .curve-explode .panel-body {
    height: calc(100% - 40px)!important;
}

div.d3view-newton .chart_container[data-has-y="false"] .y.axis .tick text,
div.d3view-newton .chart_container[data-has-x="false"] .x.axis .tick text {
    display: none;
}
div.d3view-newton .chart_container.removeNoise .newton-mode-settings,
div.d3view-newton .chart_container.removeNoise .newton-settings-group {
    display: none;
}

div.d3view-newton svg.newton-svg g.indicator path {
    stroke-width: 3px;
    stroke-dasharray: 2;
}

.d3view-newton .newton-attr-legends.visible {
    margin-left: 20px;
    max-width: 45%;
    /** Added by shashank2104 on 2026-06-04 - stack EVERY active attribute legend
     *  (opacityBy + lineWidthBy + symbolBy + contributionBy) one below the other,
     *  mirroring bubble.js `.attr-legends-container`. Previously each `.legends`
     *  block was height:100% on a block container, so the 2nd block (e.g. Line
     *  Width By) was pushed entirely below the chart and looked missing — only the
     *  1st (opacity) legend showed. flex-wrap:nowrap is critical: with column flex,
     *  `wrap` would spill an overflowing legend into a NEW right-hand column and
     *  hide it. **/
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}
.d3view-newton .newton-attr-legends.visible svg {
    flex: 0 0 25px;
}
.d3view-newton .newton-attr-legends.visible .bin {
    display: inline-block;
    word-break: break-all;
    white-space: none;
    overflow: hidden;
}
/** Added by shashank2104 on 2026-06-04 - each attribute legend sizes to its
 *  content (flex:0 0 auto) but is capped so N legends share the column height,
 *  and the bin list (> ul) scrolls internally — the proven bubble.js pattern.
 *  Caps: 1 legend = full height, 2 = half each, 3+ = a third each. **/
.d3view-newton .newton-attr-legends > .legends {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: calc(33% - 7px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.d3view-newton .newton-attr-legends > .legends > ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.d3view-newton .newton-attr-legends > .legends:only-child {
    max-height: 100%;
}
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(2),
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(2) ~ .legends {
    max-height: calc(50% - 5px);
}
/** Added by shashank2104 on 2026-06-04 - 4 attribute legends are now possible on a
 *  curveplot (opacity + line width + dash + symbol). Cap each at a quarter and let
 *  the container scroll if they still overflow a short chart. **/
.d3view-newton .newton-attr-legends.visible {
    overflow-y: auto;
}
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(4),
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(4) ~ .legends,
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(n+5),
.d3view-newton .newton-attr-legends > .legends:first-child:nth-last-child(n+5) ~ .legends {
    max-height: calc(25% - 8px);
}
.d3view-newton .newton-attr-legends div[data-option="contributionBy"] li:hover .bin {
    color: #428bca;
}
/** Added by shashank2104 on 08/18/2026 at 03:41 PM - R0-4094 - marker legend hover **/
.d3view-newton .newton-attr-legends div[data-option="markers"] li {
    cursor: pointer;
}
.d3view-newton .newton-attr-legends div[data-option="markers"] li:hover .bin {
    color: #428bca;
}
.d3view-newton .newton-attr-legends > .legends .contrib-table {
    overflow: hidden!important;
}
.newton-fetch-responses li .add-to-selected {
    opacity: 0;
}
.newton-fetch-responses li:hover .add-to-selected {
    opacity: 1;
}
/*.newton-fetch-responses li.active .add-to-selected {*/
/*    display: none!important;*/
/*}*/

.newton-fetch-responses .datatable-container .dt-tables table {
    table-layout: auto;
}

div.d3view-newton .newton-zoomed-view canvas {
    height: 100%!important;
    width: 100%!important;
}

.newton-operations .newton-operation-cont {
    border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 20px;
}
.newton-operations .newton-operation-cont.opened {
    height: 350px;
}
.newton-operations .newton-operation-cont:not(.opened) .newton-operation-fb,
.newton-operations .newton-operation-cont:not(.opened) .newton-operation-footer {
    display: none;
}
.newton-operations .newton-operation-cont .toggle-op {
    cursor: pointer;
    padding: 5px;
}
.newton-operations .newton-operation-cont .op-name-edit {
    display: none;
}
.newton-operations .newton-operation-cont:hover .op-name-edit {
    display: block;
    margin-left: 6px;
}
.newton-operations .newton-operation-cont:hover .op-name-edit:hover {
    color: red;
}
.newton-operations .newton-operation-cont:not(.opened) .toggle-op .fas.fa-angle-down {
    transform: rotate(-90deg);
}
.newton-operations div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item > div.row {
    padding: 10px 0;
}


/*div.d3view-newton .chart_container[data-settings-view="simple"] .svg_container {*/
/*    position: relative;*/
/*    top: 30px;*/
/*    height: calc(100% - 30px);*/
/*}*/
/*div.d3view-newton .chart_container .newton-simple-settings-header {*/
/*    position: relative;*/
/*    width: calc(100% - 15px);*/
/*}*/

div.d3view-newton .newton-simple-settings-header .dropdown-menu li {
    position: relative;
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu li.spline-control-points-custom > a {
    background: none!important;
    color: unset!important;
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu.main-dd {
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu li.selected:not(.dropdown-submenu) > a,
div.d3view-newton .newton-simple-settings-header [data-mode].selected:not(.dropdown-submenu) {

    background-color: #428bca!important;
    color: #FFF!important;;
}

div.d3view-newton .newton-simple-settings-header .dropdown-submenu > .dropdown-menu {
    position: fixed;
    width: 200px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 250px;
    overflow: auto;
    white-space: normal;
    word-break: break-all;
    overflow-x: hidden;
}
div.d3view-newton .newton-simple-settings-header .dropdown-submenu > .dropdown-menu li a {
    white-space: normal;
    word-break: break-all;
}
/*div.d3view-newton .newton-simple-settings-header .dropdown-submenu > .dropdown-menu {*/
/*    position: relative!important;*/
/*    left: 0!important;*/
/*    float: none;*/
/*    border: none;*/
/*    box-shadow: none;*/
/*    background: none;*/
/*    padding-left: 20px;*/
/*    height: auto;*/
/*    top: 0!important;*/
/*}*/
div.d3view-newton .newton-simple-settings-header .dropdown-submenu > .dropdown-menu:before,
div.d3view-newton .newton-simple-settings-header .dropdown-submenu > .dropdown-menu:after {
    display: none;
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu li.dropdown-submenu > a:hover {
    /* background-image: none; */
    /* color: #262626!important; */
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu li:hover {
    /* background-color: unset; */
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu li:hover > a {
    /* background-color: #EEE; */
}
div.d3view-newton .newton-simple-settings-header .dropdown-menu .dropdown-submenu>a:after {
    border-width: 5px 5px 5px 0;
    border-color: transparent;
    border-right-color: #CCC;
    left: 0;
    position: absolute;
    left: 7px;
    top: 5px;
}

div.d3view-newton .newton-simple-settings-header .dropdown-menu li.dropdown-submenu.forceShowSubMenu > .dropdown-menu {
    display: block;
}


div.d3view-newton svg.newton-svg .tick {
    pointer-events: none;
}

div.d3view-newton .chart_container.hasSparklines > *:not(.canvas-sparkline) {
    display: none;
}

div.d3view-newton svg g.contributions.hasHighlighted .cr-point.highlighted {
    opacity: 1!important;
}
div.d3view-newton svg g.contributions.hasHighlighted .cr-point:not(.highlighted) {
    opacity: 0!important;
}

/** SIM-904 - Absolute position header when tiny **/
.d3view-newton .main_container.tiny .newton-simple-settings-header {
    display: inline-block;
    position: absolute;
    z-index: 12;
    top: 5px;
    right: 17px;
}
.d3view-newton .main_container.tiny .newton-simple-settings-header > .btn-group {
    position: absolute;
    z-index: 12;
    top: 5px;
    right: 17px;
}
.d3view-newton .main_container.tiny .newton-simple-settings-header [data-id] {
    background: #FFF;
}

/*.d3view-newton .main_container.tiny .newton-simple-settings-header {*/
/*    display: none;*/
/*}*/
.d3view-newton .main_container.tiny .curve-info-dd,
.d3view-newton .main_container.tiny .newton-simple-settings-header,
.d3view-newton .main_container.tiny div.chart_container:not(.forceLegendsOnSmallContainers) .legends-wrapper {
    opacity: 0;
    /** Added by shashank2104 on 2026-04-03 - DW-2485 - prevent invisible legends from blocking left-click-to-hide on curves **/
    pointer-events: none;
}
.d3view-newton .main_container.tiny div.chart_container.forceLegendsOnSmallContainers .legends-wrapper {
    top: 0!important;
    opacity: 1 !important;
}
.d3view-newton:hover .main_container.tiny .curve-info-dd,
.d3view-newton:hover .main_container.tiny .newton-simple-settings-header,
.d3view-newton:hover .main_container.tiny .legends-wrapper {
    opacity: 1;
    /** Added by shashank2104 on 2026-04-03 - DW-2485 - restore pointer-events when legends are visible on hover **/
    pointer-events: auto;
}
/** Added 2026-07-01 - R0-3900 #1 - the Chart Type flyout (.dropdown-submenu > .dropdown-menu) is
    position:fixed and taller (max-height 250px) than this tiny header's own hover zone, so moving
    the mouse from the trigger into the flyout leaves .d3view-newton:hover, dropping this header back
    to opacity:0/pointer-events:none -- the whole menu (still technically open) visually vanishes and
    stops accepting clicks mid-hover. Keep it forced visible/interactive whenever a settings dropdown
    is actually open, independent of continued physical hover on the compact chart widget. **/
.d3view-newton .main_container.tiny .newton-simple-settings-header:has(.dropdown.open) {
    opacity: 1;
    pointer-events: auto;
}
.d3view-newton .main_container.tiny rect.pan-rect,
.d3view-newton .main_container.tiny path.domain {
    stroke: #ccc!important;
}

.d3view-newton .canvas-sparkline .axis .tick text {
    font-size: 85%;
}

.d3view-newton .newton-viz-view {
    padding: 0 20px;
}

.d3view-newton:not(.tiny) .newton-main[data-settings-view="simple"] .newton-viz-view {
    height: calc(100% - 40px)!important;
    top: 40px!important;
    position: relative;
}

.d3view-newton svg.newton-kickstarter .tick text {
    opacity: 0.5;
    font-size: 11px;
}
.d3view-generic-modal-container.simlytiks.newton-operations {
    position: fixed;
}

/* Spline Control Points Styles */
.d3view-newton svg .spline-control-points circle {
    transition: all 0.2s ease;
}

.d3view-newton svg .spline-control-points circle:hover {
    transform: scale(1.25);
    transform-origin: center;
    stroke-width: 3;
}

.d3view-newton svg .spline-control-points circle.dragging {
    opacity: 0.7;
    transform: scale(1.5);
    transform-origin: center;
}

.d3view-newton svg .spline-control-points circle:active {
    cursor: grabbing;
}

/* Spline Overlay Styles */
.d3view-newton svg .spline-overlays path {
    pointer-events: none;
    transition: all 0.2s ease;
}

.d3view-newton svg .spline-overlays path:hover {
    stroke-width: 4;
    opacity: 1;
}

/* Custom Control Points Input Styles */
.d3view-newton .spline-control-points-custom input {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
    background: #fff;
}

.d3view-newton .spline-control-points-custom input:focus {
    border-color: #4682b4;
    outline: none;
    box-shadow: 0 0 3px rgba(70, 130, 180, 0.3);
}

/* ──────── Curve Morpher (DVFIV) ──────── */
.d3view-newton g.morpher-lattice {
    pointer-events: all;
}
.d3view-newton g.morpher-lattice rect.morpher-bg {
    fill: var(--d3v-accent-primary, #3b82f6);
    fill-opacity: 0.04;
    stroke: var(--d3v-accent-primary, #3b82f6);
    stroke-opacity: 0.35;
    stroke-width: 1;
    stroke-dasharray: 4 3;
    transition: fill-opacity var(--d3v-t-fast, 150ms) ease;
}
.d3view-newton g.morpher-lattice:hover rect.morpher-bg {
    fill-opacity: 0.08;
}
.d3view-newton g.morpher-lattice line.morpher-grid {
    stroke: var(--d3v-accent-primary, #3b82f6);
    stroke-width: 1;
    stroke-opacity: 0.28;
    pointer-events: none;
    transition: stroke-opacity var(--d3v-t-fast, 150ms) ease;
}
.d3view-newton g.morpher-lattice:hover line.morpher-grid {
    stroke-opacity: 0.5;
}
.d3view-newton g.morpher-handles circle.morpher-handle {
    fill: var(--d3v-bg-primary, #fff);
    stroke: var(--d3v-accent-primary, #3b82f6);
    stroke-width: 2;
    fill-opacity: 1;
    opacity: 0.55;
    cursor: grab;
    pointer-events: all;
    transition:
        opacity var(--d3v-t-fast, 150ms) ease,
        r var(--d3v-t-fast, 150ms) ease,
        stroke-width var(--d3v-t-fast, 150ms) ease,
        filter var(--d3v-t-fast, 150ms) ease;
}
.d3view-newton g.morpher-handles circle.morpher-handle:hover {
    opacity: 1;
    r: 7;
    stroke-width: 2.5;
    filter: drop-shadow(0 1px 3px rgba(59, 130, 246, 0.45));
}
.d3view-newton g.morpher-handles circle.morpher-handle.persisted {
    opacity: 1;
    fill: var(--d3v-accent-primary, #3b82f6);
    stroke: var(--d3v-bg-primary, #fff);
    filter: drop-shadow(0 1px 2px rgba(59, 130, 246, 0.55));
}
.d3view-newton g.morpher-handles circle.morpher-handle.persisted:hover {
    r: 7;
    filter: drop-shadow(0 2px 5px rgba(59, 130, 246, 0.7));
}
.d3view-newton g.morpher-handles circle.morpher-handle.dragging {
    opacity: 1;
    r: 8;
    cursor: grabbing;
    fill: var(--d3v-accent-primary, #3b82f6);
    stroke: var(--d3v-bg-primary, #fff);
    stroke-width: 3;
    filter: drop-shadow(0 3px 7px rgba(59, 130, 246, 0.85));
}
.d3view-newton path.morpher-overlay-original {
    pointer-events: none;
}

/* Floating Morpher control panel */
.d3view-newton .newton-morpher-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    min-width: 240px;
    max-width: 280px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-default, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04));
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
    transition:
        opacity var(--d3v-t-fast, 150ms) ease,
        transform var(--d3v-t-fast, 150ms) ease,
        box-shadow var(--d3v-t-fast, 150ms) ease;
    transform-origin: top right;
}
.d3view-newton .newton-morpher-panel[data-state="hidden"] {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
}
.d3view-newton .newton-morpher-panel[data-state="open"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}
.d3view-newton .newton-morpher-panel[data-state="minimized"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
    min-width: 200px;
}
.d3view-newton .newton-morpher-panel[data-state="minimized"] .newton-morpher-panel-body {
    display: none;
}
.d3view-newton .newton-morpher-panel[data-state="minimized"] {
    height: auto !important;
    min-height: 0 !important;
}
.d3view-newton .newton-morpher-panel[data-state="minimized"] .ui-resizable-handle {
    display: none !important;
}
.d3view-newton .newton-morpher-panel:hover {
    box-shadow: var(--d3v-sh-lg, 0 8px 20px rgba(15, 23, 42, 0.12), 0 3px 6px rgba(15, 23, 42, 0.06));
}
.d3view-newton .newton-morpher-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: linear-gradient(180deg, var(--d3v-bg-subtle, #f8fafc) 0%, var(--d3v-bg-primary, #fff) 100%);
    border-bottom: 1px solid var(--d3v-border-subtle, #f1f5f9);
    user-select: none;
    cursor: move;
}
.d3view-newton .newton-morpher-panel-title {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
    letter-spacing: 0.01em;
}
.d3view-newton .newton-morpher-panel-title i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 13px;
}
.d3view-newton .newton-morpher-panel-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
}
.d3view-newton .newton-morpher-panel-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 150ms) ease, color var(--d3v-t-fast, 150ms) ease;
    font-size: 11px;
    line-height: 1;
}
.d3view-newton .newton-morpher-panel-btn:hover {
    background: var(--d3v-bg-hover, #f1f5f9);
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-newton .newton-morpher-panel-btn:focus {
    outline: none;
    background: var(--d3v-bg-hover, #f1f5f9);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.d3view-newton .newton-morpher-panel-btn[data-morpher-panel="close"]:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--d3v-status-danger, #ef4444);
}
.d3view-newton .newton-morpher-panel-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.d3view-newton .newton-morpher-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d3view-newton .newton-morpher-row-split {
    flex-direction: row;
    gap: 8px;
}
.d3view-newton .newton-morpher-row-split .newton-morpher-subgroup {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d3view-newton .newton-morpher-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #64748b);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-newton .newton-morpher-select {
    height: 28px;
    width: 100%;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid var(--d3v-border-default, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1e293b);
    transition: border-color var(--d3v-t-fast, 150ms) ease, box-shadow var(--d3v-t-fast, 150ms) ease;
}
.d3view-newton .newton-morpher-select:focus {
    outline: none;
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.d3view-newton .newton-morpher-select-narrow {
    min-width: 0;
}
.d3view-newton .newton-morpher-pins {
    display: inline-flex !important;
    gap: 4px;
}
.d3view-newton .newton-morpher-pin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    margin: 0;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    border: 1px solid var(--d3v-border-default, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 150ms) ease, border-color var(--d3v-t-fast, 150ms) ease, color var(--d3v-t-fast, 150ms) ease;
    user-select: none;
}
.d3view-newton .newton-morpher-pin input {
    margin: 0;
    accent-color: var(--d3v-accent-primary, #3b82f6);
}
.d3view-newton .newton-morpher-pin:hover {
    border-color: var(--d3v-accent-primary, #3b82f6);
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-newton .newton-morpher-pin:has(input:checked) {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--d3v-accent-primary, #3b82f6);
    color: var(--d3v-accent-primary, #3b82f6);
}
.d3view-newton .newton-morpher-row-actions {
    flex-direction: row;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--d3v-border-subtle, #f1f5f9);
}
.d3view-newton .newton-morpher-action {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 500;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--d3v-r-sm, 4px);
}
.d3view-newton .newton-morpher-action,
.d3view-newton .newton-morpher-action.btn,
.d3view-newton .newton-morpher-action.btn-outline-on-hover {
    color: var(--d3v-text-primary, #1e293b) !important;
    background-color: var(--d3v-bg-primary, #fff) !important;
    border: 1px solid var(--d3v-border-default, #e2e8f0) !important;
}
.d3view-newton .newton-morpher-action:hover,
.d3view-newton .newton-morpher-action:focus,
.d3view-newton .newton-morpher-action.btn:hover,
.d3view-newton .newton-morpher-action.btn:focus,
.d3view-newton .newton-morpher-action.btn-outline-on-hover:hover,
.d3view-newton .newton-morpher-action.btn-outline-on-hover:focus {
    color: var(--d3v-accent-primary, #3b82f6) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
    border-color: var(--d3v-accent-primary, #3b82f6) !important;
    outline: none;
}
.d3view-newton .newton-morpher-action.active,
.d3view-newton .newton-morpher-action.btn.active,
.d3view-newton .newton-morpher-action.btn-outline-on-hover.active {
    color: var(--d3v-accent-primary, #3b82f6) !important;
    background-color: rgba(59, 130, 246, 0.14) !important;
    border-color: var(--d3v-accent-primary, #3b82f6) !important;
    box-shadow: inset 0 1px 2px rgba(59, 130, 246, 0.15);
}
.d3view-newton .newton-morpher-action i {
    color: inherit !important;
}

.d3view-newton .spline-control-points-custom .divider {
    border-top: 1px solid #e5e5e5;
    margin: 5px 0;
}

/** ===========================================================
 *  R0-3594 — Newton Scatter Panel (floating overlay)
 *  Added by shashank2104 on 2026-05-12
 *  =========================================================== */
.newton-scatter-panel {
    position: absolute;
    width: 380px;
    min-width: 300px;
    min-height: 240px;
    max-height: 92%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
    z-index: 50;
    overflow: hidden;
    resize: both;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 13px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    transition: box-shadow 150ms ease;
}
.newton-scatter-panel:hover {
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.12);
}
.newton-scatter-panel[data-dock="top-right"]    { top: 16px;    right: 16px;  left: auto;   bottom: auto; }
.newton-scatter-panel[data-dock="top-left"]     { top: 16px;    left: 16px;   right: auto;  bottom: auto; }
.newton-scatter-panel[data-dock="bottom-right"] { bottom: 16px; right: 16px;  left: auto;   top: auto; }
.newton-scatter-panel[data-dock="bottom-left"]  { bottom: 16px; left: 16px;   right: auto;  top: auto; }

/* Header — light, with subtle bottom border (no dark bar) */
.newton-scatter-panel .nsp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
    border-bottom: 1px solid #e5e7eb;
    color: #0f172a;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
.newton-scatter-panel .nsp-head:active { cursor: grabbing; }
.newton-scatter-panel .nsp-grip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.55;
    margin-right: 2px;
}
.newton-scatter-panel .nsp-grip i {
    width: 9px;
    height: 1.5px;
    background: #64748b;
    border-radius: 1px;
}
.newton-scatter-panel .nsp-title {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}
.newton-scatter-panel .nsp-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    border: 1px solid #dbeafe;
}
.newton-scatter-panel .nsp-head-spacer { flex: 1; }
.newton-scatter-panel .nsp-ico {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all 120ms ease;
    padding: 0;
}
.newton-scatter-panel .nsp-ico:hover {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.newton-scatter-panel .nsp-ico.nsp-danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.newton-scatter-panel.nsp-pinned .nsp-pin {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
}

/* Tabs */
.newton-scatter-panel .nsp-tabs {
    display: flex;
    gap: 2px;
    padding: 6px 10px 0;
    background: #fff;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    flex-shrink: 0;
}
.newton-scatter-panel .nsp-tab {
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: -1px;
    transition: color 120ms ease;
}
.newton-scatter-panel .nsp-tab:hover { color: var(--d3v-text-primary, #0f172a); }
.newton-scatter-panel .nsp-tab.is-active {
    color: var(--d3v-text-primary, #0f172a);
    background: #fff;
    border-color: var(--d3v-border-subtle, #e2e8f0);
    border-bottom-color: #fff;
}
.newton-scatter-panel .nsp-cnt {
    margin-left: 5px;
    padding: 0 5px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 9.5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}
.newton-scatter-panel .nsp-tab.is-active .nsp-cnt { background: #dbeafe; color: #2563eb; }

/* Body */
.newton-scatter-panel .nsp-body {
    padding: 12px 14px;
    flex: 1;
    overflow-y: auto;
}

/* Summary hero — top-notch */
.newton-scatter-panel .nsp-hero {
    position: relative;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}
.newton-scatter-panel .nsp-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}
.newton-scatter-panel .nsp-hero.nsp-hero-nsp-good::before { background: linear-gradient(90deg, #10b981, #047857); }
.newton-scatter-panel .nsp-hero.nsp-hero-nsp-warn::before { background: linear-gradient(90deg, #f59e0b, #b45309); }
.newton-scatter-panel .nsp-hero.nsp-hero-nsp-bad::before  { background: linear-gradient(90deg, #ef4444, #b91c1c); }

.newton-scatter-panel .nsp-hero-inner {
    text-align: center;
}
.newton-scatter-panel .nsp-hero-eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 2px;
}
.newton-scatter-panel .nsp-hero-score {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.newton-scatter-panel .nsp-hero-unit {
    font-size: 15px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 2px;
}
.newton-scatter-panel .nsp-hero-pill {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.newton-scatter-panel .nsp-hero-pill.nsp-good { background: #d1fae5; color: #047857; }
.newton-scatter-panel .nsp-hero-pill.nsp-warn { background: #fef3c7; color: #b45309; }
.newton-scatter-panel .nsp-hero-pill.nsp-bad  { background: #fee2e2; color: #b91c1c; }

/* Hero score scale */
.newton-scatter-panel .nsp-hero-scale {
    margin-top: 12px;
}
.newton-scatter-panel .nsp-hero-scale-track {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.newton-scatter-panel .nsp-hero-scale-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 300ms ease;
}
.newton-scatter-panel .nsp-hero-scale-fill.nsp-good { background: linear-gradient(90deg, #34d399, #10b981); }
.newton-scatter-panel .nsp-hero-scale-fill.nsp-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.newton-scatter-panel .nsp-hero-scale-fill.nsp-bad  { background: linear-gradient(90deg, #f87171, #ef4444); }
.newton-scatter-panel .nsp-hero-scale-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9.5px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}

/* Quick stat tiles row */
.newton-scatter-panel .nsp-tile-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
}
.newton-scatter-panel .nsp-tile {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px 10px;
    text-align: center;
    position: relative;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-tile:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}
.newton-scatter-panel .nsp-tile-icon {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 700;
}
.newton-scatter-panel .nsp-tile-val {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.newton-scatter-panel .nsp-tile-unit {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    margin-left: 1px;
}
.newton-scatter-panel .nsp-tile-lbl {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Group chips */
.newton-scatter-panel .nsp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.newton-scatter-panel .nsp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 7px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 11px;
    transition: transform 120ms ease;
}
.newton-scatter-panel .nsp-chip:hover {
    transform: translateY(-1px);
    border-color: var(--c, #cbd5e1);
}
.newton-scatter-panel .nsp-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, #94a3b8);
}
.newton-scatter-panel .nsp-chip-name {
    font-weight: 600;
    color: #0f172a;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.newton-scatter-panel .nsp-chip-cv {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 999px;
}
.newton-scatter-panel .nsp-chip-cv.nsp-good { background: #d1fae5; color: #047857; }
.newton-scatter-panel .nsp-chip-cv.nsp-warn { background: #fef3c7; color: #b45309; }
.newton-scatter-panel .nsp-chip-cv.nsp-bad  { background: #fee2e2; color: #b91c1c; }
.newton-scatter-panel .nsp-chip-n {
    font-size: 9.5px;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
}

/* Report icons */
.newton-scatter-panel .nsp-report-ico {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #2563eb;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.newton-scatter-panel .nsp-report-block.nsp-report-verdict .nsp-report-ico {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
.newton-scatter-panel .nsp-report-block.nsp-report-note .nsp-report-ico {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}

/* Collapsible "How scored" */
.newton-scatter-panel details.nsp-collapsible { cursor: default; }
.newton-scatter-panel details.nsp-collapsible > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    margin-bottom: 0 !important;
    position: relative;
}
.newton-scatter-panel details.nsp-collapsible > summary::-webkit-details-marker { display: none; }
.newton-scatter-panel details.nsp-collapsible > summary::after {
    content: '▸';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 9px;
    color: #94a3b8;
    transition: transform 150ms ease;
}
.newton-scatter-panel details.nsp-collapsible[open] > summary::after {
    transform: rotate(90deg);
}
.newton-scatter-panel details.nsp-collapsible > p {
    margin-top: 8px !important;
}

/* Meta footer */
.newton-scatter-panel .nsp-meta-info {
    flex: 1;
    text-align: left;
}

/* Narrative report */
.newton-scatter-panel .nsp-report {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 4px;
}
.newton-scatter-panel .nsp-report-block {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.newton-scatter-panel .nsp-report-block.nsp-report-verdict {
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border-color: #bfdbfe;
}
.newton-scatter-panel .nsp-report-block.nsp-report-note {
    background: #fefce8;
    border-color: #fde68a;
}
.newton-scatter-panel .nsp-report-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.newton-scatter-panel .nsp-report-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
}
.newton-scatter-panel .nsp-report-block p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
}
.newton-scatter-panel .nsp-report-block p strong {
    color: #0f172a;
    font-weight: 600;
}
.newton-scatter-panel .nsp-report-block p em {
    font-style: normal;
    color: #475569;
    font-weight: 500;
    background: #f8fafc;
    padding: 0 4px;
    border-radius: 3px;
}
.newton-scatter-panel .nsp-report-block ul {
    margin: 0;
    padding-left: 18px;
    font-size: 11.5px;
    color: #475569;
    line-height: 1.55;
}
.newton-scatter-panel .nsp-report-block li { margin: 0; padding: 0; }

.newton-scatter-panel .nsp-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.newton-scatter-panel .nsp-meta-btn {
    padding: 3px 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #475569;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-meta-btn:hover {
    color: #0f172a;
    border-color: #cbd5e1;
}

.newton-scatter-panel .nsp-stat-list { display: flex; flex-direction: column; gap: 10px; }
.newton-scatter-panel .nsp-stat {
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.newton-scatter-panel .nsp-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.newton-scatter-panel .nsp-stat-lbl {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}
.newton-scatter-panel .nsp-stat-val {
    /* font-family: 'JetBrains Mono', monospace; */
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: inline-block;
    white-space: normal;
}
.newton-scatter-panel .nsp-stat-hint {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin-top: 3px;
}
.newton-scatter-panel .nsp-stat-hint em {
    font-style: normal;
    color: #475569;
    font-weight: 600;
}
.newton-scatter-panel .nsp-stat-hint code {
    background: #f1f5f9;
    padding: 0 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #475569;
}

.newton-scatter-panel .nsp-meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    font-size: 10.5px;
    color: #94a3b8;
    text-align: center;
}
.newton-scatter-panel .nsp-meta code {
    background: #f1f5f9;
    padding: 0 4px;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #475569;
}

/* KPI strip */
.newton-scatter-panel .nsp-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 11px;
}
.newton-scatter-panel .nsp-kpi {
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: 8px;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-kpi:hover { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.newton-scatter-panel .nsp-kpi-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 600;
}
.newton-scatter-panel .nsp-kpi-val {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 2px;
}
.newton-scatter-panel .nsp-kpi-val.nsp-small { font-size: 13px; font-weight: 600; }
.newton-scatter-panel .nsp-unit {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin-left: 2px;
}
.newton-scatter-panel .nsp-featured {
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    border-color: #bfdbfe;
}
.newton-scatter-panel .nsp-featured .nsp-kpi-val { color: #2563eb; }

.newton-scatter-panel .nsp-pill {
    display: inline-flex;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    margin-top: 4px;
    text-transform: capitalize;
}
.newton-scatter-panel .nsp-pill.nsp-good { background: #d1fae5; color: #047857; }
.newton-scatter-panel .nsp-pill.nsp-warn { background: #fef3c7; color: #b45309; }
.newton-scatter-panel .nsp-pill.nsp-bad  { background: #fee2e2; color: #b91c1c; }

/* Section header */
.newton-scatter-panel .nsp-sect-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
}
.newton-scatter-panel .nsp-hint {
    margin-left: auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
    font-size: 10.5px;
}

/* Per-group rows */
.newton-scatter-panel .nsp-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 5px;
    background: #fff;
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: 7px;
    border-left: 3px solid var(--c, #94a3b8);
    cursor: pointer;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-row:hover {
    background: #f8fafc;
    transform: translateX(2px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.newton-scatter-panel .nsp-row-name {
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.newton-scatter-panel .nsp-row-name .nsp-sub {
    color: #94a3b8;
    font-weight: 500;
    font-size: 11px;
}
.newton-scatter-panel .nsp-sw {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.newton-scatter-panel .nsp-row-meta {
    font-size: 10.5px;
    color: #94a3b8;
    margin-top: 2px;
    font-family: 'JetBrains Mono', monospace;
}
.newton-scatter-panel .nsp-row-cv {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}
.newton-scatter-panel .nsp-row-cv.nsp-good { color: #047857; }
.newton-scatter-panel .nsp-row-cv.nsp-warn { color: #b45309; }
.newton-scatter-panel .nsp-row-cv.nsp-bad  { color: #b91c1c; }

/* Per-group card (in Groups tab) */
.newton-scatter-panel .nsp-card {
    background: #fff;
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: 8px;
    border-left: 3px solid var(--c, #94a3b8);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.newton-scatter-panel .nsp-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 8px;
}
.newton-scatter-panel .nsp-card-h .nsp-sub { color: #94a3b8; font-weight: 500; font-size: 11px; }
.newton-scatter-panel .nsp-card-g {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.newton-scatter-panel .nsp-card-g > div { display: flex; flex-direction: column; }
.newton-scatter-panel .nsp-mlbl {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.newton-scatter-panel .nsp-mval {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
}

/* Pairwise matrix */
.newton-scatter-panel .nsp-mat {
    display: grid;
    gap: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}
.newton-scatter-panel .nsp-mat-c { background: transparent; }
.newton-scatter-panel .nsp-mat-h,
.newton-scatter-panel .nsp-mat-rh {
    color: #94a3b8;
    font-weight: 600;
    text-align: center;
    padding: 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
}
.newton-scatter-panel .nsp-mat-rh {
    text-align: right;
    padding-right: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.newton-scatter-panel .nsp-cell {
    aspect-ratio: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-weight: 700;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.newton-scatter-panel .nsp-cell:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    z-index: 1;
}
.newton-scatter-panel .nsp-cell.nsp-diag {
    background: #f1f5f9;
    color: #94a3b8;
    text-shadow: none;
    cursor: default;
}
.newton-scatter-panel .nsp-cell.nsp-diag:hover { transform: none; box-shadow: none; }

/* Per-X ribbon */
.newton-scatter-panel .nsp-ribbon { margin-top: 10px; }
.newton-scatter-panel .nsp-ribbon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    margin: 3px 0;
}
.newton-scatter-panel .nsp-ribbon-lbl {
    width: 70px;
    color: #475569;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.newton-scatter-panel .nsp-ribbon-tr {
    flex: 1;
    height: 10px;
    border-radius: 3px;
    background: #f1f5f9;
    overflow: hidden;
    display: flex;
}
.newton-scatter-panel .nsp-seg { height: 100%; }
.newton-scatter-panel .nsp-seg-overlap { background: repeating-linear-gradient(45deg, #fee2e2, #fee2e2 3px, #fecaca 3px, #fecaca 6px); }
.newton-scatter-panel .nsp-seg-weak    { background: #fde68a; }
.newton-scatter-panel .nsp-seg-mod     { background: #93c5fd; }
.newton-scatter-panel .nsp-seg-strong  { background: #34d399; }
.newton-scatter-panel .nsp-ribbon-key {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--d3v-border-subtle, #e2e8f0);
    font-size: 10px;
    color: #475569;
    flex-wrap: wrap;
}
.newton-scatter-panel .nsp-ribbon-key i.nsp-key-sw {
    width: 14px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

/* Settings rows */
.newton-scatter-panel .nsp-setting {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    font-size: 12px;
}
.newton-scatter-panel .nsp-setting:last-child { border-bottom: 0; }
.newton-scatter-panel .nsp-setting label {
    color: #475569;
    flex: 1;
    margin: 0;
    font-weight: 500;
}
.newton-scatter-panel .nsp-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
}
.newton-scatter-panel .nsp-setting-stack {
    flex-wrap: wrap;
    gap: 6px 10px;
}
.newton-scatter-panel .nsp-setting-stack > label {
    flex: 0 0 100%;
    font-size: 11.5px;
    color: #0f172a;
    font-weight: 600;
}
.newton-scatter-panel .nsp-setting-stack .nsp-select {
    margin-left: 0;
    flex: 1 1 auto;
}
.newton-scatter-panel .nsp-setting-stack input[type="checkbox"] {
    margin-left: 0;
}
.newton-scatter-panel .nsp-range {
    flex: 1 1 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #2563eb 0%, #2563eb var(--v, 100%), #e5e7eb var(--v, 100%), #e5e7eb 100%);
    border-radius: 999px;
    outline: none;
    margin: 6px 0 2px;
    cursor: pointer;
}
.newton-scatter-panel .nsp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #2563eb;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
    transition: transform 100ms ease;
}
.newton-scatter-panel .nsp-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.newton-scatter-panel .nsp-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #2563eb;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
.newton-scatter-panel .nsp-sf-val {
    margin-left: auto;
    color: #2563eb;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
.newton-scatter-panel .nsp-setting-hint {
    flex: 0 0 100%;
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.4;
    margin-top: 2px;
}

/* Footer */
.newton-scatter-panel .nsp-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border-top: 1px solid var(--d3v-border-subtle, #e2e8f0);
    font-size: 11px;
    flex-shrink: 0;
}
.newton-scatter-panel .nsp-foot-score {
    padding: 2px 8px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 10.5px;
}
.newton-scatter-panel .nsp-foot-score.nsp-good { background: #d1fae5; color: #047857; }
.newton-scatter-panel .nsp-foot-score.nsp-warn { background: #fef3c7; color: #b45309; }
.newton-scatter-panel .nsp-foot-score.nsp-bad  { background: #fee2e2; color: #b91c1c; }
.newton-scatter-panel .nsp-foot-lbl { color: #475569; }
.newton-scatter-panel .nsp-foot-zoom {
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    cursor: help;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-foot-zoom.nsp-active {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.newton-scatter-panel .nsp-foot-spacer { flex: 1; }
.newton-scatter-panel .nsp-foot-btn {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 120ms ease;
}
.newton-scatter-panel .nsp-foot-btn:hover {
    color: #0f172a;
    border-color: #cbd5e1;
}
.newton-scatter-panel .nsp-foot-btn.nsp-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.newton-scatter-panel .nsp-foot-btn.nsp-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* Empty state */
.newton-scatter-panel .nsp-empty {
    padding: 24px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

/* Resize handle hint */
.newton-scatter-panel .nsp-resize {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    background: repeating-linear-gradient(135deg, transparent 0 2px, #cbd5e1 2px 3px);
    opacity: 0.5;
    pointer-events: none;
}

/* Minimized state */
.newton-scatter-panel[data-state="minimized"] {
    width: auto !important;
    min-width: 0;
    min-height: 0;
    height: auto !important;
    resize: none;
    border-radius: 999px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.newton-scatter-panel[data-state="minimized"] .nsp-tabs,
.newton-scatter-panel[data-state="minimized"] .nsp-body,
.newton-scatter-panel[data-state="minimized"] .nsp-footer,
.newton-scatter-panel[data-state="minimized"] .nsp-resize {
    display: none;
}
.newton-scatter-panel[data-state="minimized"] .nsp-head {
    border-radius: 999px;
    border-bottom: 0;
    padding: 6px 14px;
    cursor: pointer;
    background: #ffffff;
}
.newton-scatter-panel[data-state="minimized"] .nsp-head:hover {
    background: #fafbfc;
}
/* Score pill is hidden by default; visible only when minimized */
.newton-scatter-panel .nsp-min-score {
    display: none;
}
.newton-scatter-panel[data-state="minimized"] .nsp-min-score {
    display: inline-block;
    background: #eff6ff;
    color: #2563eb;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid #dbeafe;
    font-family: 'JetBrains Mono', monospace;
}
/* Hide pin/dock/close in minimized — only allow restore via head click + min btn */
.newton-scatter-panel[data-state="minimized"] .nsp-pin,
.newton-scatter-panel[data-state="minimized"] .nsp-dock {
    display: none;
}
.newton-scatter-panel[data-state="hidden"] { display: none; }

/* Scale-factor labels at the end of each mean line (chart overlay) */
.nsp-overlay .nsp-sf-fo { overflow: visible; }
.nsp-overlay .nsp-sf-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #ffffff;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    pointer-events: none;
}
.nsp-overlay .nsp-sf-pill.nsp-sf-baseline {
    background: #f8fafc;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 9.5px;
}
.nsp-overlay .nsp-sf-pill.nsp-sf-na {
    background: #f8fafc;
    font-style: italic;
}
/** End R0-3594 **/

/* ==========================================================================
   SIM-1002 - Premium curveplot frame ("Option A · Refined Classic")
   Added by shashank2104 on 2026-06-04.

   Exact-match port of plugins/simlytiks/curveplot-premium-sketch.html
   (Option A · Refined Classic) onto the live Newton DOM. Everything is scoped
   under .newton-premium (toggled in newton.viz.js updateDOM when
   m.options.vizStylePresetId === 'premium'), so default/compact decks are
   byte-for-byte unchanged. Colors come from the --np-* token set below, which
   mirrors the sketch's --c-* scale 1:1 for a pixel-exact match. Font / line
   SIZES stay at the legible premium scale for the PPT export and are tuned in
   the curveplot vizStylePreset (simlytiks.config.js).
   ========================================================================== */

/* --- base: keep the new encoding-card heading spans out of default/compact.
       They only become visible under .newton-premium (rule further below);
       the legacy combined "<attr>: <column>" span keeps rendering as-is. --- */
.d3view-newton .newton-attr-legends .attr-legend-kicker,
.d3view-newton .newton-attr-legends .attr-legend-title {
    display: none;
}

/* --- Option A token scale (exact sketch --c-* values), premium-scoped --- */
.d3view-newton.newton-premium {
    --np-surface:   #ffffff;
    /* Updated by shashank2104 on 2026-06-04 - SIM-1002 - the legbar band AND the
       encoding-rail panel share ONE translucent surface so they read as the same
       material. --np-panel is the opaque base; --np-surface-2 is that base at 60%
       over the white card (the legbar background:var(--np-surface-2) and the rail's
       first gradient layer both consume it, so they stay in lockstep). */
    --np-panel:     oklch(98.5% .004 260);
    --np-surface-2: color-mix(in oklab, var(--np-panel) 60%, transparent);
    --np-ink:       #0f172a;
    --np-ink-2:     #334155;
    --np-ink-3:     #64748b;
    --np-ink-4:     #94a3b8;
    --np-line:      #e6eaf1;
    --np-line-2:    #eef2f7;
    /* Updated by shashank2104 on 2026-06-04 - SIM-1002 - the plot frame (pan-rect
       border) + axis domains/ticks + every grid line all use ONE soft line colour
       so the chart sits in a single uniform hairline cage. */
    --np-hair:      oklch(92% .008 260);
    /* a divider colour that actually shows on the soft-grey panels (the Option A
       line/line-2 tones blend into the panel). Used for the legbar bottom rule,
       the rail's left rule, and the dashed rules between encoding sections. */
    --np-divider:   #cfd7e3;
    --np-grid:      oklch(92% .008 260);
    /* Updated by shashank2104 on 2026-06-09 - SIM-1002 - tick numbers darkened ~20% (#7a8699 -> #626b7a) */
    --np-tick:      #626b7a;
    --np-r-lg:      18px;
    --np-sh-md:     0 6px 16px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.07);
}

/* ---------- encoding-legend rail -> light side panel (Option A) ----------
   The rail is a light-gray panel with a hairline divider against the plot, and
   its cards are flat sections separated by dashed dividers (NOT floating white
   boxes). The first card aligns with the plot canvas top via the JS-published
   --newton-premium-canvas-top var (newton.viz.js updatePremiumCanvasTop). */
.d3view-newton.newton-premium .newton-attr-legends.visible {
    margin-left: 0;
    gap: 0;
    /* Updated by shashank2104 on 2026-06-05 - SIM-1002 - the rail BOX now starts at the
       legbar bottom via margin-top (was padding-top + a full-height box). padding-top
       scrolls WITH the content, so a scrolled rail rose up BEHIND the translucent legbar
       band and bled through it, and the scrollbar ran the full height (starting above the
       band). With margin-top the overflow scroll box begins exactly at rail-top: content
       is clipped there (can't rise under the band) and the scrollbar starts at the band
       bottom. Because the box now starts at rail-top, a plain solid panel + border-left
       are clean — no stub above the band (which is why the old full-height box needed the
       transparent-until-rail-top gradient trick). Falls back to 0 (canvas top) with no legbar. */
    margin-top: var(--newton-premium-rail-top, 0px);
    /* the rail height is set to the full card height by the jQuery UI-layout, so margin-top
       alone would push the box past the card bottom. Cap it to (card - rail-top) so the box
       spans exactly rail-top -> card bottom. max-height clamps the JS-set height (no
       !important needed) and keeps overflow scrolling within that band. */
    max-height: calc(100% - var(--newton-premium-rail-top, 0px));
    background: var(--np-surface-2);
    border-left: 1px solid var(--np-divider);
    /* top padding 0: the first card's own 16px top inset provides the breathing below
       the band; sides/bottom give the cards room off the divider and the viz right edge. */
    padding: 0 18px 18px 18px;
    min-width: 236px;
}
.d3view-newton.newton-premium .newton-attr-legends > .legends {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 0 0 0;
    /* each section sizes to its bins; the panel itself (overflow-y:auto) is the
       single scroll container — override the default per-card height caps. */
    max-height: none !important;
    flex: 0 0 auto !important;
}
.d3view-newton.newton-premium .newton-attr-legends > .legends:first-child {
    /* the rail box starts flush at the legbar bottom (margin-top == rail-top, padding-top 0),
       so the first card needs its own top inset or its heading touches the band edge. */
    padding-top: 16px;
}
/* clean dashed divider between encoding sections (Option A enc-card+enc-card) */
.d3view-newton.newton-premium .newton-attr-legends > .legends + .legends {
    border-top: 1px dashed var(--np-divider);
}
/* the per-section bin list no longer needs its own scrollbar in premium */
.d3view-newton.newton-premium .newton-attr-legends > .legends > ul {
    overflow: visible;
}
/* header: uppercase kicker + column title inline (Option A enc-head) */
.d3view-newton.newton-premium .newton-attr-legends .legends-label {
    margin-bottom: 9px;
}
.d3view-newton.newton-premium .newton-attr-legends .legends-label h3 {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    line-height: 1.3;
}
.d3view-newton.newton-premium .newton-attr-legends .attr-legend-legacy {
    display: none;
}
.d3view-newton.newton-premium .newton-attr-legends .attr-legend-kicker {
    display: inline;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--np-ink-4);
    white-space: nowrap;
}
.d3view-newton.newton-premium .newton-attr-legends .attr-legend-title {
    display: inline;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    color: var(--np-ink);
}
/* sample rows (opacity ramp / 2->5 width ramp / dash / symbol glyphs) */
.d3view-newton.newton-premium .newton-attr-legends > .legends > ul {
    margin: 0;
    padding: 0;
}
.d3view-newton.newton-premium .newton-attr-legends > .legends > ul li {
    list-style: none;
}
.d3view-newton.newton-premium .newton-attr-legends > .legends > ul li .pl-flex {
    align-items: center;
    gap: 9px;
    padding: 3px 0;
}
.d3view-newton.newton-premium .newton-attr-legends .bin {
    font-size: 14px;
    color: var(--np-ink-2);
    font-variant-numeric: tabular-nums;
    /* keep numeric ranges like "44 - 49.6" on one line (base rule uses
       word-break:break-all which splits them mid-number) */
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- series legend -> Option A "legbar" band ----------
   A full-width light band across the top of the plot with a hairline divider
   below it (Option A o1-legbar: background surface-2 + border-bottom line-2).
   The chips are FLAT (color symbol glyph + label), not pills. Interactively the
   band is a single horizontal-scrolling row so it stays inside the reserved
   top margin; the export path keeps wrapping (expandLegendArea reserves room)
   so every chip lands in the PPT. */
.d3view-newton.newton-premium .legends-wrapper.top-legends {
    /* !important: the shared top-legends rule (plugins.css / d3view.min.css) pins
       background:transparent !important and clears the border, so the band needs
       the same priority to paint. */
    background: var(--np-surface-2) !important;
    border-bottom: 1px solid var(--np-divider) !important;
    overflow: visible;
    padding: 6px 14px;
    box-sizing: border-box;
    /* Full-width "legbar" (Option A): extend the band (and its bottom divider) over
       the encoding rail so it reads as one band across the whole card. The width is
       measured per-render (newton.viz.js updatePremiumCanvasTop) since the rail width
       varies; falls back to the chart width. z-index lifts it above the rail. */
    width: var(--newton-premium-legend-w, 100%) !important;
    z-index: 3;
}
/* flex-item stacking so the band (inside .newton-charts) paints OVER the rail when
   it overflows into the rail's column. Plot sits left of the rail, so no visual clash. */
.d3view-newton.newton-premium .newton-main > .newton-charts {
    z-index: 2;
}
.d3view-newton.newton-premium .newton-main > .newton-attr-legends.visible {
    position: relative;
    z-index: 1;
}
.d3view-newton.newton-premium .legends-wrapper.top-legends .d3view-legends-container {
    overflow: visible;
}
.d3view-newton.newton-premium .legends-wrapper.top-legends ul.legends-list li.legend-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    /* flat chip — the band is the surface; the shared rule pins padding:0 */
    padding: 2px 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
    transition: var(--d3v-t-fast);
}
.d3view-newton.newton-premium .legends-wrapper.top-legends .legends-list {
    gap: 4px 18px;
    align-content: flex-start;
}
/* The band WRAPS (Option A legbar): expandLegendArea reserves enough top margin
   to fit every row, so all chips show. If the legend is taller than the 50%
   chart-height cap, the band scrolls vertically rather than clipping. */
.d3view-newton.newton-premium .legends-wrapper.top-legends .legends-list {
    flex-wrap: wrap;
}
.d3view-newton.newton-premium .legends-wrapper.top-legends .legends-body {
    overflow-x: hidden;
    overflow-y: auto;
}
.d3view-newton.newton-premium .legends-wrapper.top-legends li.legend-item .legend-item-left {
    align-items: center;
    gap: 7px;
}
.d3view-newton.newton-premium .legends-wrapper.top-legends li.legend-item span.curve-name {
    color: var(--np-ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Added by shashank2104 on 2026-06-05 - the color legbar uses the SHARED
   VizLegendRenderer markup (.legends-wrapper.top-legends .legend-header), the same
   one the viz.defs premium charts use. visualizations.css drops the header's white
   strip + hides the per-legend options menu, but those rules are scoped to
   .d3view-viz[data-viz-style-preset="premium"] so they never reach Newton
   (.d3view-newton.newton-premium). Mirror them here. */
.d3view-newton.newton-premium .legends-wrapper.top-legends .legend-header {
    background: transparent !important;
}
.d3view-newton.newton-premium .d3view-legends-container .legend-header-right {
    display: none;
}

/* ---------- plot: soft grid, hairline axes, refined ticks (Option A sk-opt1) ---------- */
/* gridlines are inline-styled via gridLinesColor (set to #f0f3f8 in the preset);
   enforce here so every grid path matches regardless of how it was drawn. */
.d3view-newton.newton-premium svg.newton-svg g.x.grid .tick line,
.d3view-newton.newton-premium svg.newton-svg g.y.grid .tick line,
.d3view-newton.newton-premium svg.newton-svg .grid .tick line {
    stroke: var(--np-grid) !important;
    stroke-width: 1 !important;
    stroke-opacity: 1 !important;
}
/* Added by shashank2104 on 2026-06-04 - SIM-1002 - the plot-frame rectangle
   (pan-rect, default stroke #616161) joins the soft hairline cage so the chart
   border matches the grid lines instead of reading as a hard dark box. */
.d3view-newton.newton-premium svg.newton-svg rect.pan-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
.d3view-newton.newton-premium svg.newton-svg g.x.axis path.domain,
.d3view-newton.newton-premium svg.newton-svg g.y.axis path.domain,
.d3view-newton.newton-premium svg.newton-svg g.y2.axis path.domain,
.d3view-newton.newton-premium svg.newton-svg g.y3.axis path.domain {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
.d3view-newton.newton-premium svg.newton-svg g.x.axis .tick line,
.d3view-newton.newton-premium svg.newton-svg g.y.axis .tick line,
.d3view-newton.newton-premium svg.newton-svg g.y2.axis .tick line,
.d3view-newton.newton-premium svg.newton-svg g.y3.axis .tick line {
    stroke: var(--np-hair) !important;
}
.d3view-newton.newton-premium svg.newton-svg g.x.axis .tick text,
.d3view-newton.newton-premium svg.newton-svg g.y.axis .tick text,
.d3view-newton.newton-premium svg.newton-svg g.y2.axis .tick text,
.d3view-newton.newton-premium svg.newton-svg g.y3.axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* axis titles — refined slate weight (Option A sk-axis-title) */
.d3view-newton.newton-premium svg.newton-svg text.yLabel,
.d3view-newton.newton-premium svg.newton-svg text.yLabel2,
.d3view-newton.newton-premium svg.newton-svg text.yLabel3,
.d3view-newton.newton-premium svg.newton-svg text.xLabel {
    fill: var(--np-ink-2) !important;
    font-weight: 600;
}
/* Removed by shashank2104 on 2026-06-04 - SIM-1002 - the round stroke-linecap filled
   the gaps of dashed lines (dashBy) so dashes read as solid; reverted to Newton's
   default butt caps so dashBy stays visible. (linejoin removed with it — it only
   smoothed corners and isn't worth a separate rule.) */
/* on-curve symbol markers — clean white outline (Option A sk-marker) so the
   colored glyph reads crisply against the stroke it sits on. */
.d3view-newton.newton-premium svg.newton-svg path.symbol_by {
    stroke: #ffffff;
    stroke-width: 1.1px;
}

/* ---------- simple-settings toolbar -> floating pill (Option A) ----------
   Added by shashank2104 on 2026-06-04 - SIM-1002. The interaction toolbar
   (refresh / zoom / highlight / morph / export / more) sits above the canvas,
   right-aligned by the header's flex-space-out. In premium it becomes one clean
   white floating pill with a soft shadow — pushed into the TOP-RIGHT corner of the
   plot column, clear of the encoding rail. Only the OUTER btn-group becomes the pill;
   the nested export/more dropdown groups stay inline inside it. */
/* span the full plot column (override the JS inline width:calc(100% - margins.right))
   so the header's flex-space-out pushes the pill all the way right; the pill's own
   margin-right then keeps a clean gap off the rail / right axis. */
.d3view-newton.newton-premium .newton-simple-settings-header {
    width: 100% !important;
}
.d3view-newton.newton-premium .newton-simple-settings-header > .btn-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: 12px;
    box-shadow: var(--np-sh-md);
    padding: 4px 5px;
    margin: 2px 0 0 0;
    /* the flex-space-out already puts the pill at the plot column's right edge; slide
       it the rest of the way (over the rail's empty top strip) into the card's true
       top-right corner. The shift is measured per-render (newton.viz.js) = card-right −
       plot-right; use position:relative + left (NOT transform) so the visual shift is
       identical but the pill does NOT become a containing block for the position:fixed
       submenus inside it — a transform here reparents those fixed menus and threw them
       off to the right in premium (SIM-1002, fixed by shashank2104 2026-06-05). */
    z-index: 4;
    position: relative;
    left: var(--newton-premium-toolbar-shift, 0px);
}
/* flatten each control inside the pill — the pill is the surface, so the buttons
   are borderless glyphs with a rounded hover/selected chip. */
.d3view-newton.newton-premium .newton-simple-settings-header > .btn-group > button,
.d3view-newton.newton-premium .newton-simple-settings-header > .btn-group > .dropdown > button.dropdown-toggle {
    border: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    color: var(--np-ink-3) !important;
    box-shadow: none !important;
    transition: var(--d3v-t-fast);
}
.d3view-newton.newton-premium .newton-simple-settings-header > .btn-group button:hover {
    background: var(--np-line-2) !important;
    color: var(--np-ink) !important;
}
/* soften the active mode from the solid #428bca fill to a quiet accent tint */
.d3view-newton.newton-premium .newton-simple-settings-header > .btn-group button.selected {
    background: color-mix(in oklab, #2f6bff 14%, transparent) !important;
    color: #2f6bff !important;
}

/* ---------- INTERACTIVE font scale -> Option A (refined) ----------
   The premium preset renders ticks / axis titles / chip labels at the large
   PPT scale (globalAxisTickFontSize 24, axisLabelFontSize 24, legendsFontSize
   24). That is correct for the exported slide but reads much bigger than Option
   A's ~11px on screen. Pull the on-screen sizes down to the Option A scale; the
   export keeps the large scale (these rules are scoped off the capture-time
   body classes, and the preset values are untouched). !important is required to
   beat the global tick-font rule injected by globalAxisTickFontSize. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg g.x.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg g.y.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg g.y2.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg g.y3.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg g.x2.axis .tick text {
    font-size: 13px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg text.yLabel,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg text.yLabel2,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg text.yLabel3,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium svg.newton-svg text.xLabel {
    font-size: 13px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium .legends-wrapper.top-legends span.curve-name {
    font-size: 14px !important;
}
/* Added by shashank2104 on 2026-06-05 - SIM-1002 - the legbar header
   ("Legend by: <col>") now shows interactively (showLegendLabels only hides it in
   export). Pull it to the same on-screen 14px as the chips. Export keeps the large
   premium scale. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-newton.newton-premium .legends-wrapper.top-legends .legend-header .legends-label {
    font-size: 14px !important;
}
/* Added by shashank2104 on 2026-06-10 - SIM-1002 - on export the legbar header
   ("Legend by: <col>") scales up to a fixed 18px premium size. */
.d3view-exporting .d3view-newton.newton-premium .legends-wrapper.top-legends .legend-header .legends-label,
.d3view-global-exporting .d3view-newton.newton-premium .legends-wrapper.top-legends .legend-header .legends-label {
    font-size: 18px !important;
}
/* End SIM-1002 premium curveplot frame */

/** Right-positioned legend styling moved to stylesheets/visualizations.css on 2026-05-27 - DVFIV-2059 **/
/* /stylesheets/visualizers/peacock.v3.css */
/**
 *  Peacock CLI Actions tab + Output modal styling
 *  Added by shashank2104 on 04/29/2026 - DVFIV-2016 Phase 2 M2.
 *  Tokens: --d3v-accent (NOT --d3v-accent-primary), --d3v-border (NOT --d3v-border-default).
 */

/* ----- Actions side-panel ----- */

.peacock-cli-actions-panel {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.peacock-cli-actions-panel .pcli-input-type-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    font-size: 13px;
    color: var(--d3v-text-secondary);
}

.peacock-cli-actions-panel .pcli-input-type-badge i {
    color: var(--d3v-accent);
}

.peacock-cli-actions-panel .pcli-input-type-badge strong {
    color: var(--d3v-text-primary);
    font-weight: 600;
}

.peacock-cli-actions-panel .pcli-recipe-help {
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-secondary);
    padding: 0 4px;
}

.peacock-cli-actions-panel .pcli-recipe-help code {
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    padding: 1px 5px;
    font-size: 11px;
    color: var(--d3v-accent);
}

.peacock-cli-actions-panel .pcli-no-recipes {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-warning);
    border-left-width: 4px;
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-primary);
}

.peacock-cli-actions-panel .pcli-no-recipes i {
    color: var(--d3v-warning);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.peacock-cli-actions-panel .pcli-recipe-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.peacock-cli-actions-panel .pcli-recipe-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-sm);
    transition: all 0.15s ease;
    cursor: pointer;
}

.peacock-cli-actions-panel .pcli-recipe-card.is-eligible:hover {
    border-color: var(--d3v-accent);
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-1px);
}

.peacock-cli-actions-panel .pcli-recipe-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.peacock-cli-actions-panel .pcli-recipe-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d3v-bg-secondary);
    border-radius: var(--d3v-r-md);
    color: var(--d3v-accent);
    font-size: 16px;
    flex-shrink: 0;
}

.peacock-cli-actions-panel .pcli-recipe-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.peacock-cli-actions-panel .pcli-recipe-title {
    font-weight: 600;
    color: var(--d3v-text-primary);
    font-size: 13px;
    margin-bottom: 3px;
}

.peacock-cli-actions-panel .pcli-recipe-desc {
    font-size: 12px;
    color: var(--d3v-text-secondary);
    line-height: 1.4;
}

.peacock-cli-actions-panel .pcli-recipe-eligibility {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d3v-warning);
    font-style: italic;
}

.peacock-cli-actions-panel .pcli-recipe-action {
    flex-shrink: 0;
}

/** Reveal-on-hover: keeps cards quiet at rest, shows action on intent. **/
.peacock-cli-actions-panel .pcli-recipe-action .pcli-run-btn {
    min-width: 84px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.peacock-cli-actions-panel .pcli-recipe-card:hover .pcli-run-btn,
.peacock-cli-actions-panel .pcli-recipe-card.is-running .pcli-run-btn,
.peacock-cli-actions-panel .pcli-recipe-card .pcli-run-btn:focus {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* ----- Output modal ----- */

.peacock-cli-output-modal {
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 480px;
}

.peacock-cli-output-modal .pcli-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border);
    font-size: 13px;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-secondary);
    border-radius: var(--d3v-r-md) var(--d3v-r-md) 0 0;
    flex-shrink: 0;
}

.peacock-cli-output-modal .pcli-output-header strong {
    color: var(--d3v-text-primary);
    font-size: 14px;
    margin-left: 4px;
}

.peacock-cli-output-modal .pcli-output-header i {
    color: var(--d3v-accent);
}

.peacock-cli-output-modal .pcli-output-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.peacock-cli-output-modal .pcli-output-stats .pcli-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--d3v-text-secondary);
}

.peacock-cli-output-modal .pcli-output-stats .pcli-stat i {
    color: var(--d3v-text-tertiary, var(--d3v-text-secondary));
}

.peacock-cli-output-modal .pcli-output-body {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.peacock-cli-output-modal .pcli-manifest-list {
    width: 320px;
    min-width: 240px;
    max-width: 40%;
    border-right: 1px solid var(--d3v-border);
    overflow: auto;
    background: var(--d3v-bg-secondary);
    flex-shrink: 0;
}

.peacock-cli-output-modal .pcli-manifest-ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.peacock-cli-output-modal .pcli-manifest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    border-left: 3px solid transparent;
}

.peacock-cli-output-modal .pcli-manifest-item i {
    color: var(--d3v-accent);
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.peacock-cli-output-modal .pcli-manifest-item:hover {
    background: var(--d3v-bg-primary);
}

.peacock-cli-output-modal .pcli-manifest-item.is-active {
    background: var(--d3v-bg-primary);
    border-left-color: var(--d3v-accent);
    color: var(--d3v-text-primary);
    font-weight: 500;
}

.peacock-cli-output-modal .pcli-manifest-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peacock-cli-output-modal .pcli-manifest-size {
    color: var(--d3v-text-secondary);
    font-size: 11px;
    flex-shrink: 0;
}

/** Preview pane hosts d3VIEW.Plugins.DataViewer inline. Keep padding minimal so DataViewer owns the canvas. **/
.peacock-cli-output-modal .pcli-preview-pane {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    background: var(--d3v-bg-primary);
    position: relative;
}

.peacock-cli-output-modal .pcli-preview-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/** DataViewer expects a min-height; give it the full pane. **/
.peacock-cli-output-modal .pcli-preview-content .dataviewer {
    height: 100% !important;
    min-height: 0 !important;
}

.peacock-cli-output-modal .pcli-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--d3v-text-secondary);
    font-size: 13px;
}

.peacock-cli-output-modal .pcli-empty strong {
    color: var(--d3v-text-primary);
}

.peacock-cli-output-modal .pcli-loading {
    padding: 32px 20px;
    text-align: center;
    color: var(--d3v-accent);
    font-size: 13px;
}

/* ================================================================================================
 * d3plot import — extraction options modal
 * Added by shashank2104 on 04/30/2026 - DVFIV-2016. Rich, collapsible flag groups.
 * ================================================================================================ */

.peacock-d3plot-import-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px;
}

.peacock-d3plot-import-options .pcli-d3-intro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-primary);
}

.peacock-d3plot-import-options .pcli-d3-intro i {
    color: var(--d3v-accent);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.peacock-d3plot-import-options .pcli-d3-group {
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.peacock-d3plot-import-options .pcli-d3-group:hover {
    box-shadow: var(--d3v-sh-sm);
}

.peacock-d3plot-import-options .pcli-d3-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary);
    transition: background 0.15s ease;
    user-select: none;
}

.peacock-d3plot-import-options .pcli-d3-group-header:hover {
    background: var(--d3v-bg-tertiary, var(--d3v-bg-secondary));
}

.peacock-d3plot-import-options .pcli-d3-chevron {
    transition: transform 0.2s ease;
    font-size: 11px;
    color: var(--d3v-text-secondary);
}

.peacock-d3plot-import-options .pcli-d3-group.is-open .pcli-d3-chevron {
    transform: rotate(90deg);
}

.peacock-d3plot-import-options .pcli-d3-group-body {
    display: none;
    padding: 12px 14px;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
}

.peacock-d3plot-import-options .pcli-d3-group.is-open .pcli-d3-group-body {
    display: grid;
}

.peacock-d3plot-import-options .pcli-d3-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.peacock-d3plot-import-options .pcli-d3-field.is-wide {
    grid-column: 1 / -1;
}

.peacock-d3plot-import-options .pcli-d3-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    margin: 0;
}

.peacock-d3plot-import-options .pcli-d3-help {
    font-size: 11px;
    color: var(--d3v-text-secondary);
    line-height: 1.4;
}

.peacock-d3plot-import-options .pcli-d3-input {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.peacock-d3plot-import-options .pcli-d3-input:focus {
    outline: none;
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.peacock-d3plot-import-options .pcli-d3-checkbox-row {
    display: inline-flex!important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    color: var(--d3v-text-primary);
    cursor: pointer;
    font-weight: 400;
}

.peacock-d3plot-import-options .pcli-d3-checkbox-row input[type="checkbox"] {
    margin: 0;
    accent-color: var(--d3v-accent);
}

.peacock-d3plot-import-options .pcli-d3-multiselect-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.peacock-d3plot-import-options .pcli-d3-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--d3v-border);
    border-radius: 999px;
    background: var(--d3v-bg-primary);
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 0;
    user-select: none;
}

.peacock-d3plot-import-options .pcli-d3-chip:hover {
    border-color: var(--d3v-accent);
    color: var(--d3v-text-primary);
}

.peacock-d3plot-import-options .pcli-d3-chip input[type="checkbox"] {
    display: none;
}

.peacock-d3plot-import-options .pcli-d3-chip.is-on {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
    color: #fff;
    box-shadow: var(--d3v-sh-sm);
}

/* ================================================================================================
 * Outputs panel (Actions tab — when peacock_cli_run is on the model from a d3plot import)
 * ================================================================================================ */

.peacock-cli-outputs-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.peacock-cli-outputs-panel .pcli-outputs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    font-size: 13px;
    color: var(--d3v-text-primary);
    flex-shrink: 0;
}

.peacock-cli-outputs-panel .pcli-outputs-header i {
    color: var(--d3v-accent);
}

.peacock-cli-outputs-panel .pcli-outputs-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--d3v-text-secondary);
    font-size: 12px;
}

.peacock-cli-outputs-panel .pcli-outputs-stats .pcli-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.peacock-cli-outputs-panel .pcli-outputs-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.peacock-cli-outputs-panel .pcli-manifest-list {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--d3v-border);
    overflow-y: auto;
    background: var(--d3v-bg-primary);
}

.peacock-cli-outputs-panel .pcli-manifest-ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.peacock-cli-outputs-panel .pcli-manifest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--d3v-text-primary);
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.peacock-cli-outputs-panel .pcli-manifest-item:hover {
    background: var(--d3v-bg-secondary);
}

.peacock-cli-outputs-panel .pcli-manifest-item.is-active {
    background: var(--d3v-bg-secondary);
    border-left-color: var(--d3v-accent);
    font-weight: 600;
}

.peacock-cli-outputs-panel .pcli-manifest-item i {
    color: var(--d3v-text-secondary);
    width: 14px;
    text-align: center;
}

.peacock-cli-outputs-panel .pcli-manifest-item.is-active i {
    color: var(--d3v-accent);
}

.peacock-cli-outputs-panel .pcli-manifest-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peacock-cli-outputs-panel .pcli-manifest-size {
    color: var(--d3v-text-secondary);
    font-size: 11px;
    flex-shrink: 0;
}

.peacock-cli-outputs-panel .pcli-preview-pane {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.peacock-cli-outputs-panel .pcli-preview-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: var(--d3v-bg-primary);
}

.peacock-cli-outputs-panel .pcli-empty {
    padding: 24px 18px;
    text-align: center;
    color: var(--d3v-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.peacock-cli-outputs-panel .pcli-empty p {
    margin: 6px 0;
}

.peacock-cli-outputs-panel .pcli-loading {
    padding: 32px 20px;
    text-align: center;
    color: var(--d3v-accent);
    font-size: 13px;
}

.peacock-manager {
    width: 100%;
    height: 100%;
    min-height: 250px;
    position: relative;
}

/** Added by shashank2104 - DVFIV-1867 - Left nav styles removed, moved to top-right btn-group **/
.peacock-manager .peacock-editor {
    flex: 1 1 calc(50% - 10px);
}

.peacock-manager .peacock-viewer {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    /*border: 1px solid #cdcdcd;*/
}

.peacock-manager .peacock-models-layout {
    flex-wrap: wrap;
    z-index: 2;
}
.peacock-manager .peacock-models-layout.multiple .peacock-editor {
    border: 1px solid #DDD;
}

.peacock-manager .peacock-viewer {
    background: #FFF;
}

.peacock-manager .peacock-viewer .peacock-editor-wrapper {
    background: #FFF;
}

.peacock-manager .peacock-viewer.peacock-light {
    background: #fff;
}

.peacock-manager .peacock-viewer.peacock-light .peacock-editor-wrapper {
    background: #fff;
}

.peacock-manager .peacock-viewer.peacock-dark {
    background: #6e6e6e;
    color: whitesmoke;
}
.peacock-manager .peacock-viewer.peacock-dark .settings-container {
    background: #6e6e6e;
    color: whitesmoke;
}
.peacock-manager .peacock-viewer.peacock-dark .settings-container .feature-title {
    color: whitesmoke;
}
.peacock-manager .peacock-viewer.peacock-dark .peacock-editor-wrapper {
    background: #6e6e6e;
}

.peacock-manager .peacock-viewer.peacock-dark .top-settings-container {
    background: #6e6e6e!important;
}
.peacock-manager .peacock-viewer.peacock-dark .peacock-canvas-container .btn,
.peacock-manager .peacock-viewer.peacock-dark .peacock-canvas-container h4 { 
    color: whitesmoke;
}

.peacock-manager .peacock-tab-container {
    height: 50px;
}

.peacock-manager .peacock-wrapper-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.peacock-manager .peacock-wrapper-container .peacock-controller-wrapper {
    background-color: #FFF !important;

    /*display: flex;*/
    /*width: 100%;*/
    /*height: 40px;*/
    /*flex-direction: row;*/
    /*align-items: center;*/
    /*justify-content: flex-start;*/
    /*overflow-y: visible;*/
    border-bottom: none;
}

.peacock-manager .d3view-plugin-header {
    border-bottom: 1px solid #DDD;
}
.peacock-manager .d3view-plugin-header .dropdowns-list li.dropdown {
    padding: 8px 0px;
}


.peacock-manager .peacock-wrapper-container .peacock-editor-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.peacock-manager .peacock-wrapper-container .peacock-expand-container {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
}


.peacock-manager .peacock-wrapper-container .peacock-canvas-wrapper {
    width: 100%;
    height: 100%;
    /*display: flex;*/
    position: relative;
}

.peacock-manager .peacock-wrapper-container .peacock-right-wrapper {
    position: absolute;
    right: 0px;
    height: 100%;
    top: 0px;
    width: auto;
    background-color: #fff;
    z-index: 3;
}

.peacock-manager .peacock-wrapper-container .peacock-editor-footer {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    border-top: 1px solid #DDD;
}

.peacock-manager .peacock-wrapper-container .peacock-editor-footer .left-footer,
.peacock-manager .peacock-wrapper-container .peacock-editor-footer .right-footer {
    display: flex;
    align-items: center;
    padding: 0px 5px;
    height: 100%;
}

.peacock-manager .peacock-model-specific-container {
    width: 350px;
    height: 100%;
    border: 0.5px solid rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.peacock-viewer .model-specific-config-div {
    width: 100%;
    padding: 5px 10px;
    height: auto;
    max-height: 400px;
    overflow-y: auto;
}

.peacock-manager .peacock-right-handle {
    width: 30px;
    height: 50px;
    top: calc(50% - 25px);
    left: -30px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: lightgray;
    font-size: 1.5em;
    border-radius: 10px 0px 0px 10px;
}

.peacock-manager .peacock-right-handle * {
    pointer-events: none;
}

.peacock-manager .peacock-right-handle:hover {
    cursor: pointer;
}

.peacock-manager .placeholder-gif-loader {
    margin: auto auto;
}

.peacock-viewer .controller-list {
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 1051;
}


.peacock-viewer .btn-peacock span.fas {
    padding: 0px 5px;
    pointer-events: none;
}


.peacock-viewer .axis-rendering-canvas {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 150px;
    height: 100px;
    pointer-events: none;
}

/* Added by shashank2104 on 12/16/2025 at 03:45 PM - DVFIV-1871 - Adjust axis canvas position when camera info is visible */
.peacock-viewer .axis-rendering-canvas.info-visible {
    bottom: 100px;
}

.peacock-viewer .additional-info-div {
    position: absolute;
    right: 50px;
    bottom: 20px;
    width: auto;
    height: auto;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.peacock-viewer.hasFringeEnabled .additional-info-div {
    right: 180px;
}

.peacock-viewer .camera-info-div {
    position: absolute;
    left: 20px;
    bottom: 10px;
    width: auto;
    height: auto;
    pointer-events: none;
}

.peacock-viewer .part-info-div {
    position: absolute;
    right: 70px;
    top: 100px;
    width: 350px;
    height: auto;
    border: 1px solid #DDD;
    border-radius: 6px;
    z-index: 20;
    cursor: move;
}

.peacock-viewer .removed-parts-info-div {
    position: absolute;
    right: 70px;
    top: 0px;
    width: 350px;
    height: auto;
    border: 1px solid #DDD;
    border-radius: 6px;
    z-index: 20;
    cursor: move;
    background: #FFF;
}

/* ═══ DVFIV-1960: Connections Panel — Split layout (tree + table) ═══ */
.peacock-viewer .peacock-connections-div {
    position: absolute;
    right: 70px;
    top: 0;
    width: 780px;
    z-index: 20;
    cursor: move;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.1));
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
    height: 50%;
}

/* ─── Header ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: linear-gradient(180deg, rgba(59,130,246,0.03) 0%, transparent 100%);
    flex-shrink: 0;
}
.peacock-viewer .peacock-connections-div .peacock-conn-header i.fa-link {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 13px;
}
.peacock-viewer .peacock-connections-div .peacock-conn-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}
.peacock-viewer .peacock-connections-div .peacock-conn-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-accent, #3b82f6);
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.15);
    padding: 1px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    font-family: 'SF Mono', Consolas, monospace;
}

/* ─── Split body ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ─── Left panel (tree view) ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-left-panel {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--d3v-border, #e2e8f0);
    overflow-y: auto;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.peacock-viewer .peacock-connections-div .peacock-conn-left-panel::-webkit-scrollbar { width: 4px; }
.peacock-viewer .peacock-connections-div .peacock-conn-left-panel::-webkit-scrollbar-track { background: transparent; }
.peacock-viewer .peacock-connections-div .peacock-conn-left-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 2px; }
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap {
    padding: 8px 0;
}
/* Tree view style overrides inside connections panel */
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap .tv-content {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: var(--d3v-r-sm, 4px);
    margin: 1px 6px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s), color var(--d3v-t-fast, 0.12s);
    color: var(--d3v-text-secondary, #475569);
}
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap .tv-content:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap .tv-content.active,
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap .tree-active {
    background: rgba(59,130,246,0.10);
    color: var(--d3v-accent, #3b82f6);
    font-weight: 600;
}
.peacock-viewer .peacock-connections-div .peacock-conn-tree-wrap .tree-count {
    font-size: 10px;
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--d3v-text-muted, #94a3b8);
    margin-left: 4px;
}
.peacock-viewer .peacock-connections-div .peacock-conn-tree-badge {
    font-size: 10px;
    font-family: 'SF Mono', Consolas, monospace;
    color: var(--d3v-text-muted, #94a3b8);
    background: rgba(59,130,246,0.08);
    padding: 1px 6px;
    border-radius: var(--d3v-r-full, 9999px);
    margin-left: 6px;
}

/* ─── Right panel ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ─── Filters (pl-inline-filters) ─── */
.peacock-viewer .peacock-connections-div .pl-inline-filters {
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    flex-shrink: 0;
}

/* ─── Others mode bar ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-others-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    flex-shrink: 0;
}
.peacock-viewer .peacock-connections-div .peacock-conn-others-mode {
    padding: 3px 10px;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    border: 1px solid var(--d3v-border, #e2e8f0);
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}
.peacock-viewer .peacock-connections-div .peacock-conn-others-mode.active {
    background: rgba(59,130,246,0.08);
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}
.peacock-viewer .peacock-connections-div .peacock-conn-others-mode:hover:not(.active) {
    border-color: var(--d3v-text-muted, #94a3b8);
    color: var(--d3v-text-secondary, #475569);
}

/* ─── Table body (scrollable) ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-table-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.peacock-viewer .peacock-connections-div .peacock-conn-table-body::-webkit-scrollbar { width: 5px; }
.peacock-viewer .peacock-connections-div .peacock-conn-table-body::-webkit-scrollbar-track { background: transparent; }
.peacock-viewer .peacock-connections-div .peacock-conn-table-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

.peacock-viewer .peacock-connections-div .peacock-conn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.peacock-viewer .peacock-connections-div .peacock-conn-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.peacock-viewer .peacock-connections-div .peacock-conn-table thead th {
    background: var(--d3v-bg-primary, #fff);
    padding: 7px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.peacock-viewer .peacock-connections-div .peacock-conn-table thead th:first-child {
    padding-left: 14px;
    width: 36px;
}

/* ─── Connection data row ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-row td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    transition: background var(--d3v-t-fast, 0.12s);
    vertical-align: middle;
}
.peacock-viewer .peacock-connections-div .peacock-conn-row:nth-child(even) td {
    background: var(--d3v-bg-secondary, #f8fafc);
}
.peacock-viewer .peacock-connections-div .peacock-conn-row:hover td {
    background: var(--d3v-bg-hover, #e2e8f0);
}
/* jQuery UI selectable states */
.peacock-viewer .peacock-connections-div .peacock-conn-row.ui-selecting td {
    background: rgba(59,130,246,0.08);
}
.peacock-viewer .peacock-connections-div .peacock-conn-row.ui-selected td {
    background: rgba(59,130,246,0.12);
}
.peacock-viewer .peacock-connections-div .peacock-conn-row td:first-child {
    padding-left: 14px;
}
.peacock-viewer .peacock-connections-div .peacock-conn-row.hide {
    display: none;
}

/* ─── Part pills (Master = blue, Slave = red) ─── */
.peacock-viewer .peacock-connections-div .part-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-family: 'SF Mono', Consolas, monospace;
    font-weight: 500;
    line-height: 1.5;
}
.peacock-viewer .peacock-connections-div .part-pill.master {
    background: rgba(37,99,235,0.08);
    color: #2563eb;
}
.peacock-viewer .peacock-connections-div .part-pill.slave {
    background: rgba(220,38,38,0.08);
    color: #dc2626;
}
.peacock-viewer .peacock-connections-div .part-pill .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.peacock-viewer .peacock-connections-div .part-pill.master .dot { background: #2563eb; }
.peacock-viewer .peacock-connections-div .part-pill.slave .dot { background: #dc2626; }

/* ─── Arrow ─── */
.peacock-viewer .peacock-connections-div .conn-arrow {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 11px;
    margin: 0 3px;
}

/* ─── Type / stiffness badges ─── */
.peacock-viewer .peacock-connections-div .type-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    font-weight: 500;
    background: rgba(0,0,0,0.04);
    color: var(--d3v-text-secondary, #475569);
    white-space: nowrap;
    display: inline-block;
}
.peacock-viewer .peacock-connections-div .type-badge.rigid { background: rgba(59,130,246,0.08); color: #3b82f6; }
.peacock-viewer .peacock-connections-div .type-badge.axial { background: rgba(245,158,11,0.08); color: #f59e0b; }
.peacock-viewer .peacock-connections-div .type-badge.spring { background: rgba(34,197,94,0.08); color: #22c55e; }
.peacock-viewer .peacock-connections-div .type-badge.damping { background: rgba(239,68,68,0.08); color: #ef4444; }
.peacock-viewer .peacock-connections-div .type-badge.pending { background: rgba(139,92,246,0.08); color: #7c3aed; }

/* ─── Numeric cells ─── */
.peacock-viewer .peacock-connections-div .conn-num {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    text-align: right;
}

/* ─── Footer ─── */
.peacock-viewer .peacock-connections-div .peacock-conn-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    flex-shrink: 0;
}
.peacock-viewer .peacock-connections-div .peacock-conn-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d3v-success, #10b981);
}
.peacock-viewer .peacock-connections-div .peacock-conn-footer-parts {
    font-family: 'SF Mono', Consolas, monospace;
}

/* Fringe legend on canvas (horizontal bar at bottom) */
.peacock-viewer .peacock-conn-canvas-fringe-legend {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(30, 30, 30, 0.85);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    z-index: 15;
    backdrop-filter: blur(4px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.peacock-viewer .peacock-conn-canvas-fringe-legend.show {
    opacity: 1;
}

.peacock-viewer .peacock-conn-canvas-fringe-legend .peacock-conn-canvas-fringe-bar {
    width: 180px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, #313695, #4575b4, #74add1, #abd9e9, #fee090, #fdae61, #f46d43, #d73027);
}

/* Status chips on canvas (top-left) */
.peacock-viewer .peacock-conn-status-chips {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
    z-index: 15;
    pointer-events: none;
    flex-wrap: wrap;
}

.peacock-viewer .peacock-conn-status-chip {
    background: rgba(30, 30, 30, 0.82);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.peacock-viewer .peacock-conn-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.peacock-viewer .peacock-conn-status-dot.dot-blue { background: #64b5f6; }
.peacock-viewer .peacock-conn-status-dot.dot-green { background: #81c784; }
.peacock-viewer .peacock-conn-status-dot.dot-orange { background: #ffb74d; }


.peacock-viewer .measures-div {
    position: absolute;
    right: 70px;
    top: 100px;
    width: 350px;
    height: auto;
    min-height: 120px;
    border: 1px solid #DDD;
    border-radius: 6px;
    z-index: 20;
    cursor: move;
    padding: 10px 15px;
}

.peacock-viewer .measures-div table tr[data-id]:hover {
    background-color: #eee;
}
.peacock-viewer .fringe-contents table td {
    border: none!important;
}
.peacock-viewer .fringe-list {
    box-shadow: none;
}
.peacock-viewer .fringe-list > li {
    box-shadow: none;
    border: none;
}
.peacock-viewer .fringe-details-div {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 350px;
    height: 50%;
    border: 1px solid #DDD;
    border-radius: 6px;
    z-index: 20;
    cursor: move;
    background: #FFF;
}
.peacock-viewer .zoom-buttons-div {
    position: absolute;
    right: 4px;
    bottom: 30px;
    height: auto;
    z-index: 20;
}
.peacock-viewer .zoom-buttons-div button {
    height: 30px;
}
.peacock-viewer .zoom-buttons-div .btn.active {
    background: #428bca!important;
    color: #FFF;
}

.peacock-viewer .canvas-selection-box {
    position: absolute;
    border: 1px solid #DDD;
    background: rgba(0, 0, 0, 0.1);
    z-index: 10;
    top: calc(50% - 100px);
    left: calc(50% - 150px);
    width: 300px;
    height: 200px;
    cursor: move;
}

.peacock-viewer .loader-controls {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
    width: 100%;
    /*height: auto;*/
    /*padding: 10px 15px;*/
    /*position: absolute;*/
    /*left: 0px;*/
    /*bottom: 10px;*/
}


.peacock-viewer .loader-settings {
    display: flex;
    justify-content: center;
    height: 55px;
    align-items: center;
}

.peacock-viewer .loader-settings span.fas:hover {
    cursor: pointer;
}


.peacock-viewer .dropdown-submenu {
    position: relative;
}

.peacock-viewer .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}


.peacock-viewer .dropdown-submenu {
    position: relative;
}

.peacock-viewer .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -3px;
    margin-left: 0px;
    border-radius: 6px;
}

.peacock-viewer .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.peacock-viewer .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #DDD;
    margin-top: 5px;
}

.peacock-viewer .dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.peacock-viewer .dropdown-submenu.pull-left {
    float: none;
}

.peacock-viewer .dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

.peacock-viewer img.peacock-viewer-icon:hover {
    cursor: pointer;
}

.peacock-manager .peacock-main-wrapper.dz-drag-hover .peacock-main-dz {
    opacity: 1;
    z-index: 20;
}
.peacock-manager .peacock-main-wrapper .peacock-main-dz {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #e6ffe6!important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in;
}
.peacock-viewer .peacock-dropzone {
    width: 100%;
    height: 65px;
    margin: 10px 0px;
    border: 0.5px dashed #333;
    border-radius: 4px;
    vertical-align: middle;
    text-align: center;
    padding-top: 20px;
    overflow-y: auto;
    color: #ababab;
}

.peacock-viewer .bom-container {
    position: absolute;
    left: 5px;
    top: 5px;
    height: auto;
    width: 350px;
    display: flex;
    flex-direction: column;
}

.peacock-viewer .model-specific-config-btn,
.peacock-viewer a.bom-viewer-btn {
    margin: 2px 0px;
    background: whitesmoke;
    color: #333;
    border: 3px double #999;
}

.peacock-viewer .model-specific-config-btn:hover,
.peacock-viewer a.bom-viewer-btn:hover {
    background: gray;
    color: #fff;
    border: 3px double #ddd;
}

.peacock-viewer .model-specific-config-btn *,
.peacock-viewer a.bom-viewer-btn * {
    pointer-events: none;
}

.peacock-viewer .bom-tree-view-list {
    width: 100%;
    height: auto;
    max-height: 450px;
    margin: 0px;
    background-color: rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
}

.peacock-viewer ul.peacock-contextmenu li>a * {
    pointer-events: none;
}

.peacock-viewer .assembly-tree-list,
.peacock-viewer ul.bom-tree-list {
    display: flex;
    flex-direction: column;
}

.peacock-viewer .assembly-tree-list li.assembly-viewer-list-item,
.peacock-viewer ul.bom-tree-list li.bom-tree-list-item {
    width: 100%;
    height: auto;
    padding: 0px 15px;
    user-select: none;
}

.peacock-viewer .assembly-tree-list li.assembly-viewer-list-item div.assembly-viewer-list-item,
.peacock-viewer ul.bom-tree-list li.bom-tree-list-item div.list-item-div {
    display: flex;
    height: 45px;
    width: 100%;
    flex-direction: row;
    align-items: center;
}

.peacock-viewer span.show-details:hover,
.peacock-viewer span.show-children:hover {
    cursor: pointer;
}

.peacock-viewer .assembly-content,
.peacock-viewer .li-content {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    max-width: 250px;
    word-break: break-all;
    /*font-size: 11px;*/
    /*font-family: monospace;*/
}

.peacock-viewer .assembly-content.selected,
.peacock-viewer .li-content.selected {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
    outline: 0;
}

.peacock-viewer .assembly-content *,
.peacock-viewer .li-content * {
    pointer-events: none;
}

.peacock-viewer .assembly-content:hover,
.peacock-viewer .li-content:hover {
    cursor: pointer;
}

.peacock-viewer .assembly-content:not(.selected):hover,
.peacock-viewer .li-content:not(.selected):hover {
    background: #78a0ad;
}

.peacock-viewer .assembly-group-list {
    display: none;
    max-height: 250px;
    overflow-y: auto;
    min-height: 35px;
    padding-left: 50px;
}

ul.peacock-contextmenu {
    display: none;
    position: absolute;
}

ul.peacock-contextmenu li>a * {
    pointer-events: none;
}

.peacock-viewer ul.model-tabs {
    margin-left: 10px;
}

.peacock-viewer .tab-item.active span.close {
    visibility: hidden !important;
}

.peacock-viewer .tab-item.active>a {
    background-color: transparent;
}

.peacock-viewer .measure-distance-list,
.peacock-viewer .measure-angle-list,
.peacock-viewer .lists {
    list-style: none;
    padding: 0px !important;
}

.peacock-viewer .measure-distance-list-item,
.peacock-viewer .measure-angle-list-item,
.peacock-viewer .removed-list-item {
    padding: 5px 10px;
    height: 28px;
    box-shadow: none;
}

.peacock-viewer .measure-distance-list-item:hover,
.peacock-viewer .measure-angle-list-item:hover,
.peacock-viewer .removed-list-item:hover {
    background-color: #DDD;
}

.peacock-viewer .restore-parts,
.peacock-viewer .restore-faces {
    float: right;
}

.peacock-viewer .table>tbody>tr>td {
    /*vertical-align: middle !important;*/
    /*word-break: break-all;*/
}

.peacock-viewer .fringe-legend-container {
    position: absolute;
    top: 0;
    right: 60px;
    width: 150px;
    height: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
}

.peacock-viewer .response-panel {
    display: block;
    position: absolute;
    min-width: 100px;
    min-height: 100px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

.peacock-viewer .response-panel .response-panel-header {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
    background-repeat: repeat-x;
}

.peacock-viewer .response-panel .response-panel-body {
    padding: 10px 15px;
    display: block;
}

.peacock-viewer .response-panel[data-type="vector"],
.peacock-viewer .response-panel[data-type="dataset"] {
    height: auto !important;
    width: 30%;
}

.peacock-viewer .response-panel .title {
    text-overflow: ellipsis;
    overflow: hidden;
}

.peacock-viewer .settings-container {
    position: absolute;
    left: 0px;
    top: -8px;
    height: 100%;
    width: 300px;
    display: flex;
    flex-direction: column;
    z-index: 2;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
    border: 1px solid #ddd;
    padding: 10px 15px;
    overflow-y: auto;
}

.peacock-viewer .feature-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 5px;
    margin: 5px 0px;
    align-items: center;
}

.peacock-viewer .bg-color-list .bg-color-item {
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

.peacock-viewer .bg-color-list .bg-color-item:hover {
    cursor: pointer;
    background-color: #ddd;
}

.peacock-viewer .background-color-settings {
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.peacock-viewer .measure-list-item {
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

.peacock-viewer .measure-list-item:hover {
    cursor: pointer;
    background-color: #ddd;
}

.peacock-viewer .measure-item:hover {
    cursor: pointer;
}

.peacock-viewer .cell-cursor:hover {
    cursor: cell;
}

.peacock-viewer .popover {
    width: 450px !important;
    max-width: 450px !important;
}

.peacock-loader-backdrop {
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10029 !important;
    flex-direction: column;
}

.peacock-loader-container {
    width: 25%;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7) !important;
    padding: 30px;
    border-radius: 8px;
}

.close-peacock-loader {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 2em;
    color: rgb(196, 192, 192);
}

.close-peacock-loader:hover {
    cursor: pointer;
    color: #fff;
}



/** Added by shashank2104 - DVFIV-1867 - Top right nav button group styles **/
.peacock-viewer .peacock-top-nav-panel {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 20;
}

.peacock-viewer .peacock-top-nav-group button.active {
    background: #428bca !important;
    color: #FFF;
}

.peacock-viewer .peacock-top-nav-group .peacock-top-nav-overflow {
    position: relative;
}

.peacock-viewer .peacock-top-nav-group .peacock-top-nav-overflow .dropdown-menu {
    min-width: 180px;
}

.peacock-viewer .peacock-top-nav-group .peacock-top-nav-overflow-item {
    display: block;
    padding: 8px 15px;
    cursor: pointer;
}

.peacock-viewer .peacock-top-nav-group .peacock-top-nav-overflow-item:hover {
    background-color: #f5f5f5;
}

.peacock-viewer .peacock-top-nav-group .peacock-top-nav-overflow-item.active {
    background-color: #428bca;
    color: #fff;
}

.peacock-viewer .peacock-right-nav-content-viewer {
    position: absolute;
    right: 0;
    left: unset;
    top: 0;
    width: 400px;
    height: calc(100% - 38px);
    background: #fff;
    padding: 5px;
    z-index: 21;
    border-left: 1px solid #ddd;
}
.peacock-viewer .peacock-right-nav-content-viewer.wide {
    width: 40%;
}

/** Merged settings panel styles **/
.peacock-viewer .peacock-merged-settings .peacock-settings-tabs {
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
}

.peacock-viewer .peacock-merged-settings .tab-content {
    border: none;
}

.peacock-viewer .peacock-merged-settings .feature-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 5px;
    margin: 5px 0;
    align-items: center;
}

.peacock-viewer .peacock-merged-settings .bg-color-list .bg-color-item {
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

.peacock-viewer .peacock-merged-settings .bg-color-list .bg-color-item:hover {
    cursor: pointer;
    background-color: #ddd;
}

.peacock-viewer .nav-menu-container {
    flex-direction: column;
    justify-content: space-between;
}

.peacock-viewer .panel-content-renderer {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 0 15px;
}

.peacock-viewer ul.dropdown-menu.file-import-dropdown {
    color: #333;
}

.peacock-manager .peacock-error-message {
    position: absolute;
    bottom: 5px;
    left: 25px;
    width: calc(100% - 50px);
}

.d3view-context-menu-container.peacock-main-ctxm {
    width: 300px;
}

.peacock-viewer .bom-dt .pl-ribbon-item[data-operation="collapsible_columns"],
.peacock-viewer .bom-dt .pl-ribbon-item[data-operation="scroll"],
.peacock-viewer .bom-dt .pl-ribbon-item[data-operation="autofit"] {
    display: none;
}
.peacock-viewer .bom-dt .setting-button-text {
    display: none;
}

.peacock-import-simulation .wf-worker-config-view {
    height: calc(100% - 10px)!important;
}

/** Added by shashank2104 on 12/23/2025 at 10:32 AM - SIM-985 - Logs panel styling **/
.peacock-viewer .peacock-wrapper-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.peacock-viewer .peacock-wrapper-container .peacock-editor-wrapper {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}

.peacock-viewer .peacock-logs-footer {
    flex-shrink: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    min-height: 120px;
    max-height: 50%;
    height: 170px;
    z-index: 100;
    position: relative;
}

.peacock-viewer .peacock-logs-footer .peacock-logs-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
    z-index: 10;
}

.peacock-viewer .peacock-logs-footer .peacock-logs-resize-handle:hover,
.peacock-viewer .peacock-logs-footer .peacock-logs-resize-handle.active {
    background: #337ab7;
}

.peacock-viewer .peacock-logs-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.peacock-viewer .peacock-logs-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.peacock-viewer .peacock-logs-panel-header h5 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.peacock-viewer .peacock-logs-panel-content {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #fff;
    padding: 10px;
}

.peacock-viewer .peacock-logs-table-body tr:hover {
    background-color: #f5f5f5;
}

.peacock-viewer .peacock-logs-table-body td {
    vertical-align: middle;
}

.peacock-viewer .peacock-logs-count {
    background: #337ab7;
    color: #fff;
    font-size: 11px;
}

.peacock-viewer .zoom-buttons-div button[data-id="toggle_logs_panel"].active {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}
/* -----------------------------------------------------------------------
   Peacock empty-state ("kickstart") - modernized, subtle dark theme.
   Added by rahul.suri on 06/22/2026. Scoped under .peacock-kickstart only.
   Replaces the old Bootstrap .alert empty state. No default Bootstrap.
   ----------------------------------------------------------------------- */
.peacock-kickstart{
    /* locally-scoped theme tokens (do not leak) */
    --pk-glass:rgba(26,32,40,.82);
    --pk-canvas-0:#13171d;
    --pk-edge:rgba(148,163,184,.16);
    --pk-blue:#3b82f6;
    --pk-blue-bright:#60a5fa;
    --pk-blue-deep:#2563eb;
    --pk-text-hi:#eef2f7;
    --pk-text:#c3ccd8;
    --pk-text-dim:#8b97a7;
    --pk-text-faint:#5d6878;
    --pk-cad:#60a5fa; --pk-key:#f59e0b; --pk-res:#34d399; --pk-oth:#a78bfa;
    --pk-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

    position:relative;
    width:430px; max-width:92%; margin:auto;
    padding:30px 30px 24px;
    border-radius:14px;
    background:var(--pk-glass);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid var(--pk-edge);
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px -20px rgba(0,0,0,.65);
    color:var(--pk-text);
    animation:pk-fade .4s ease both;
}
@keyframes pk-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.peacock-kickstart::before{
    content:""; position:absolute; left:24px; right:24px; top:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(96,165,250,.5),transparent);
}

.peacock-kickstart .pk-glyph{
    width:54px; height:54px; margin:2px auto 16px; border-radius:14px;
    display:grid; place-items:center;
    background:radial-gradient(80% 80% at 50% 30%, rgba(59,130,246,.20), rgba(37,99,235,.06));
    border:1px solid rgba(96,165,250,.30);
}
.peacock-kickstart .pk-glyph i{ font-size:22px; color:var(--pk-blue-bright); }

.peacock-kickstart .pk-title{
    text-align:center; font-size:18px; font-weight:600;
    color:var(--pk-text-hi); margin-bottom:5px;
}
.peacock-kickstart .pk-sub{
    text-align:center; font-size:13px; color:var(--pk-text-dim);
    margin:0 auto 18px; max-width:320px; line-height:1.5;
}
.peacock-kickstart .pk-sub b{ color:var(--pk-blue-bright); font-weight:600; }

/* model picker (has-models branch) - dark to match the card.
   `.select-model` is Select2-initialized by plugins.helpers, so the visible
   widget is a div.select2-container (the classes are copied onto it). Style
   the Select2 sub-elements; provide a native-<select> fallback for any context
   where Select2 isn't initialized. */
.peacock-kickstart .pk-select{ width:100%; margin-bottom:4px; }

/* Select2 3.5.5 widget (the live path) */
.peacock-kickstart .select2-container .select2-choice,
.peacock-kickstart .select2-container .select2-choice .select2-arrow{
    background:var(--pk-canvas-0) !important; background-image:none !important;
    border-color:var(--pk-edge) !important; color:var(--pk-text) !important;
}
.peacock-kickstart .select2-container .select2-choice{ border-radius:9px !important; height:auto !important; padding:6px 0 6px 12px !important; line-height:1.4 !important; }
.peacock-kickstart .select2-container .select2-choice > .select2-chosen{ color:var(--pk-text) !important; }
.peacock-kickstart .select2-container .select2-choice .select2-arrow{ border-left-color:var(--pk-edge) !important; }
.peacock-kickstart .select2-container .select2-choice .select2-arrow b{ filter:invert(.8) brightness(1.4); }
.peacock-kickstart .select2-container.select2-container-active .select2-choice{ border-color:rgba(96,165,250,.45) !important; }

/* Native <select> fallback (only if Select2 is NOT initialized - tag-qualified
   so it never double-styles the Select2 container div above) */
.peacock-kickstart select.select-model{
    width:100%; margin-bottom:4px;
    background:var(--pk-canvas-0); color:var(--pk-text);
    border:1px solid var(--pk-edge); border-radius:9px;
    padding:9px 30px 9px 12px; font-size:12.5px; line-height:1.3;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b97a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
}
.peacock-kickstart select.select-model option{ background:var(--pk-canvas-0); color:var(--pk-text); }
.peacock-kickstart .pk-or{
    text-align:center; font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--pk-text-faint); margin:12px 0;
}

.peacock-kickstart .pk-actions{
    display:flex; gap:9px; justify-content:center; margin-bottom:20px;
}
.peacock-kickstart .pk-btn{
    font-family:inherit; font-size:12.5px; font-weight:600;
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px; border-radius:8px; cursor:pointer;
    border:1px solid transparent; transition:.15s ease; line-height:1;
}
.peacock-kickstart .pk-btn i{ font-size:12px; }
.peacock-kickstart .pk-btn-primary{
    color:#fff; background:var(--pk-blue-deep); border-color:rgba(96,165,250,.5);
}
.peacock-kickstart .pk-btn-primary:hover{ background:var(--pk-blue); }
.peacock-kickstart .pk-btn-ghost{
    color:var(--pk-text); background:rgba(148,163,184,.06); border-color:rgba(148,163,184,.20);
}
.peacock-kickstart .pk-btn-ghost:hover{ border-color:rgba(96,165,250,.5); color:var(--pk-text-hi); }
/* R0-3955 - two-column kickstart (LEFT import | RIGHT inline Saved Projects list). The split and the
   right pane are WORKBENCH-ONLY (embedded peacock has no saved-project concept): the right pane is
   hidden and the card stays single-column unless under .peacock-workbench (mirrors .pk-modal-dim scoping). */
.peacock-kickstart .pk-right{ display:none; }

.peacock-workbench .peacock-kickstart .pk-view-split{ display:flex; align-items:stretch; gap:0; text-align:left; }
.peacock-workbench .peacock-kickstart .pk-left{
    flex:0 0 36%; max-width:36%; display:flex; flex-direction:column; align-items:center;
    text-align:center; padding-right:22px; border-right:1px solid var(--pk-edge);
}
/* R0-3955 - stack the import / sample buttons vertically (full width) in the narrower left
   column; the classic .pk-actions is a horizontal row that cramps three buttons. */
.peacock-workbench .peacock-kickstart .pk-actions{ flex-direction:column; align-items:stretch; gap:8px; width:100%; }
.peacock-workbench .peacock-kickstart .pk-actions .pk-btn{ width:100%; justify-content:center; }
.peacock-workbench .peacock-kickstart .pk-right{
    display:flex; flex-direction:column; flex:1 1 auto; min-width:0; padding-left:22px;
}
.peacock-workbench .peacock-kickstart .pk-right-head{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:11px;
}
.peacock-workbench .peacock-kickstart .pk-right-title{
    color:var(--pk-text-hi); font-size:13px; font-weight:650; display:flex; align-items:center; gap:8px;
}
.peacock-workbench .peacock-kickstart .pk-right-title i{ color:var(--pk-blue-bright); font-size:12.5px; }
.peacock-workbench .peacock-kickstart .pk-count{
    color:var(--pk-text-faint); font-size:11px; background:rgba(148,163,184,.08);
    border:1px solid var(--pk-edge); border-radius:20px; padding:2px 9px; min-width:22px; text-align:center;
}
.peacock-workbench .peacock-kickstart .pk-count:empty{ display:none; }
.peacock-workbench .peacock-kickstart .pk-search{ position:relative; margin-bottom:11px; }
.peacock-workbench .peacock-kickstart .pk-search > i{
    position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--pk-text-faint); font-size:11px;
}
.peacock-workbench .peacock-kickstart .pk-proj-search-input{
    width:100%; background:var(--pk-canvas-0); border:1px solid var(--pk-edge); border-radius:8px;
    color:var(--pk-text); font-size:12px; padding:8px 10px 8px 30px; outline:none; font-family:inherit;
}
.peacock-workbench .peacock-kickstart .pk-proj-search-input::placeholder{ color:var(--pk-text-faint); }
.peacock-workbench .peacock-kickstart .pk-proj-search-input:focus{ border-color:rgba(96,165,250,.5); }

.peacock-workbench .peacock-kickstart .pk-list{
    display:flex; flex-direction:column; gap:7px; overflow-y:auto; max-height:300px; padding-right:3px; min-height:130px;
}
.peacock-workbench .peacock-kickstart .pk-list-loading,
.peacock-workbench .peacock-kickstart .pk-list-empty{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    color:var(--pk-text-faint); font-size:12px; gap:8px; padding:24px 16px; line-height:1.5;
}
.peacock-workbench .peacock-kickstart .pk-list-empty i{ font-size:24px; color:#33404f; }
.peacock-workbench .peacock-kickstart .pk-list-empty .t{ color:var(--pk-text-dim); }
.peacock-workbench .peacock-kickstart .pk-list-empty b{ color:var(--pk-text-dim); font-weight:600; }

.peacock-workbench .peacock-kickstart .pk-proj{
    display:flex; align-items:center; gap:11px; padding:8px 9px; border-radius:10px; cursor:pointer;
    border:1px solid transparent; background:rgba(148,163,184,.04); transition:background .14s ease, border-color .14s ease;
}
.peacock-workbench .peacock-kickstart .pk-proj:hover{ background:rgba(59,130,246,.10); border-color:rgba(96,165,250,.35); }
.peacock-workbench .peacock-kickstart .pk-thumb{
    width:42px; height:42px; flex:0 0 auto; border-radius:8px; border:1px solid var(--pk-edge);
    background:linear-gradient(135deg,#1d2530,#141a21); display:flex; align-items:center; justify-content:center;
    color:rgba(139,151,167,.5); font-size:15px;
}
.peacock-workbench .peacock-kickstart .pk-proj-body{ min-width:0; flex:1 1 auto; }
.peacock-workbench .peacock-kickstart .pk-proj-name{
    color:var(--pk-text-hi); font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.peacock-workbench .peacock-kickstart .pk-proj-meta{
    color:var(--pk-text-dim); font-size:11px; margin-top:2px; display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.peacock-workbench .peacock-kickstart .pk-proj-src{ display:inline-flex; align-items:center; gap:4px; }
.peacock-workbench .peacock-kickstart .pk-proj-src.sim{ color:var(--pk-cad); }
.peacock-workbench .peacock-kickstart .pk-proj-src.upl{ color:var(--pk-oth); }
.peacock-workbench .peacock-kickstart .pk-proj-src.orphan{ color:var(--pk-text-faint); }
.peacock-workbench .peacock-kickstart .pk-proj.is-orphan{ opacity:.72; }
.peacock-workbench .peacock-kickstart .pk-proj-actions{
    display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .14s ease; flex:0 0 auto;
}
.peacock-workbench .peacock-kickstart .pk-proj:hover .pk-proj-actions{ opacity:1; }
.peacock-workbench .peacock-kickstart .pk-act{
    width:25px; height:25px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--pk-edge); color:var(--pk-text-dim); font-size:10.5px; background:rgba(0,0,0,.15); cursor:pointer;
}
.peacock-workbench .peacock-kickstart .pk-act.open:hover{ color:#fff; background:var(--pk-blue-deep); border-color:var(--pk-blue); }
.peacock-workbench .peacock-kickstart .pk-act.del:hover{ color:#fecaca; background:rgba(220,38,38,.18); border-color:rgba(220,38,38,.5); }

.peacock-kickstart .pk-divider{
    display:flex; align-items:center; gap:12px; margin:2px 2px 14px;
    color:var(--pk-text-faint); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase;
}
.peacock-kickstart .pk-divider::before,
.peacock-kickstart .pk-divider::after{
    content:""; height:1px; flex:1; background:rgba(148,163,184,.14);
}

.peacock-kickstart .pk-types{ display:flex; flex-direction:column; gap:9px; }
.peacock-kickstart .pk-row{ display:flex; align-items:flex-start; gap:9px; }
.peacock-kickstart .pk-dot{ width:6px; height:6px; border-radius:50%; margin-top:6px; flex:none; }
.peacock-kickstart .pk-cat{
    font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
    color:var(--pk-text-dim); min-width:98px; padding-top:2px; flex:none;
}
.peacock-kickstart .pk-chips{ display:flex; flex-wrap:wrap; gap:4px; }
.peacock-kickstart .pk-chip{
    font-family:var(--pk-mono); font-size:10.5px; line-height:1;
    padding:4px 7px; border-radius:5px; color:var(--pk-text);
    background:rgba(148,163,184,.07); border:1px solid rgba(148,163,184,.14);
}
.peacock-kickstart .c-cad{ background:var(--pk-cad); }
.peacock-kickstart .c-key{ background:var(--pk-key); }
.peacock-kickstart .c-res{ background:var(--pk-res); }
.peacock-kickstart .c-oth{ background:var(--pk-oth); }

/* -----------------------------------------------------------------------
   Peacock "Import from Simulation" sidebar - modernized dark theme.
   Added by rahul.suri on 06/22/2026. Scoped under .peacock-import-simulation
   (GenericSidebarView customClass). Matches the kickstart empty state.
   ----------------------------------------------------------------------- */
.d3view-plugins-sidebar.peacock-import-simulation{
    --pk-panel:#1a2027; --pk-panel-2:#222932; --pk-canvas-0:#13171d;
    --pk-edge:rgba(148,163,184,.16);
    --pk-blue:#3b82f6; --pk-blue-bright:#60a5fa; --pk-blue-deep:#2563eb;
    --pk-text-hi:#eef2f7; --pk-text:#c3ccd8; --pk-text-dim:#8b97a7; --pk-text-faint:#5d6878;

    background:linear-gradient(180deg, var(--pk-panel-2), var(--pk-panel)) !important;
    border-left:1px solid rgba(96,165,250,.28) !important;
    color:var(--pk-text);
}

/* header */
.peacock-import-simulation .panel-heading{
    background:transparent !important; border-bottom:1px solid var(--pk-edge) !important;
    position:relative;
}
.peacock-import-simulation .panel-heading::after{
    content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:1px;
    background:linear-gradient(90deg,var(--pk-blue),transparent);
}
.peacock-import-simulation .panel-heading h1{
    color:var(--pk-text-hi) !important; font-size:15px; font-weight:600; letter-spacing:.2px;
}
/* close (X) button rendered by GenericSidebarView */
.peacock-import-simulation > button.btn-default{
    background:rgba(148,163,184,.06) !important; border:1px solid var(--pk-edge) !important;
    color:var(--pk-text-dim) !important; border-radius:8px !important; transition:.15s;
}
.peacock-import-simulation > button.btn-default:hover{
    color:var(--pk-text-hi) !important; border-color:rgba(96,165,250,.5) !important;
    background:rgba(59,130,246,.10) !important;
}

/* body */
.peacock-import-simulation .content-wrapper{ background:transparent !important; color:var(--pk-text); }

.peacock-import-simulation .pk-imp-intro{
    font-size:12px; color:var(--pk-text-dim); margin:2px 0 16px; line-height:1.5;
}

/* worker toggle as a switch */
.peacock-import-simulation .pk-imp-toggle{
    display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none;
    padding:11px 13px; border-radius:10px; margin:0 0 20px; font-weight:400;
    background:rgba(148,163,184,.05); border:1px solid var(--pk-edge);
}
.peacock-import-simulation .pk-imp-toggle-txt{ font-size:12.5px; color:var(--pk-text); }
.peacock-import-simulation .pk-imp-toggle-txt small{
    display:block; color:var(--pk-text-faint); font-size:10.5px; margin-top:2px; font-weight:400;
}
.peacock-import-simulation .pk-imp-toggle input[name="use-worker"]{
    position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.peacock-import-simulation .pk-imp-switch{
    margin-left:auto; flex:none; position:relative; width:38px; height:21px; border-radius:20px;
    background:rgba(148,163,184,.2); border:1px solid var(--pk-edge); transition:.2s;
}
.peacock-import-simulation .pk-imp-switch::after{
    content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
    background:#cbd5e1; transition:.2s;
}
.peacock-import-simulation .pk-imp-toggle input:checked ~ .pk-imp-switch{
    background:var(--pk-blue-deep); border-color:var(--pk-blue);
}
.peacock-import-simulation .pk-imp-toggle input:checked ~ .pk-imp-switch::after{
    left:19px; background:#fff;
}

/* FormBuilder labels + text inside the sidebar */
.peacock-import-simulation .content-wrapper .lead,
.peacock-import-simulation .content-wrapper label:not(.pk-imp-toggle),
.peacock-import-simulation .d3view-inputsBuilder{ color:var(--pk-text) !important; }
.peacock-import-simulation .content-wrapper .lead i,
.peacock-import-simulation .content-wrapper label i{ color:var(--pk-blue-bright) !important; }

/* Select2 3.5.5 closed input boxes */
.peacock-import-simulation .select2-container .select2-choice,
.peacock-import-simulation .select2-container-multi .select2-choices,
.peacock-import-simulation .select2-container .select2-choice .select2-arrow{
    background:var(--pk-canvas-0) !important; background-image:none !important;
    border-color:var(--pk-edge) !important; color:var(--pk-text) !important;
}
.peacock-import-simulation .select2-container .select2-choice > .select2-chosen{ color:var(--pk-text) !important; }
.peacock-import-simulation .select2-container .select2-choice abbr,
.peacock-import-simulation .select2-container .select2-arrow b{ filter:invert(.8) brightness(1.4); }
.peacock-import-simulation .select2-container .select2-choice:hover{ border-color:rgba(96,165,250,.45) !important; }
.peacock-import-simulation .select2-container.select2-container-active .select2-choice{
    border-color:var(--pk-blue) !important; box-shadow:0 0 0 2px rgba(59,130,246,.18) !important;
}
/* native text inputs / search fields in the form */
.peacock-import-simulation .content-wrapper input[type="text"],
.peacock-import-simulation .content-wrapper input[type="search"],
.peacock-import-simulation .content-wrapper textarea{
    background:var(--pk-canvas-0) !important; border:1px solid var(--pk-edge) !important;
    color:var(--pk-text) !important;
}
/* the blue/orange filter buttons next to the simulation picker */
.peacock-import-simulation .filter-selectpicker .btn,
.peacock-import-simulation .content-wrapper .btn-warning{
    background:rgba(59,130,246,.14) !important; border:1px solid rgba(96,165,250,.3) !important;
    color:var(--pk-blue-bright) !important;
}

/* footer */
.peacock-import-simulation .pk-imp-foot{
    border-top:1px solid var(--pk-edge); margin-top:16px; padding-top:14px;
}
.peacock-import-simulation .pk-btn{
    font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:7px;
    padding:9px 18px; border-radius:8px; cursor:pointer; border:1px solid transparent;
    transition:.15s; line-height:1; margin-left:8px;
}
.peacock-import-simulation .pk-btn-primary{ color:#fff; background:var(--pk-blue-deep); border-color:rgba(96,165,250,.5); }
.peacock-import-simulation .pk-btn-primary:hover{ background:var(--pk-blue); }
.peacock-import-simulation .pk-btn-ghost{ color:var(--pk-text); background:rgba(148,163,184,.06); border-color:rgba(148,163,184,.2); }
.peacock-import-simulation .pk-btn-ghost:hover{ border-color:rgba(96,165,250,.5); color:var(--pk-text-hi); }

/* Select2 OPEN dropdown (renders at <body> level). Self-clearing: only
   applies while the sidebar is in the DOM. No-ops on browsers without :has(). */
body:has(.peacock-import-simulation) .select2-drop{
    background:#1a2027 !important; border:1px solid rgba(96,165,250,.3) !important; color:#c3ccd8 !important;
}
body:has(.peacock-import-simulation) .select2-drop .select2-results{ background:transparent !important; }
body:has(.peacock-import-simulation) .select2-drop .select2-results li{ color:#c3ccd8 !important; }
body:has(.peacock-import-simulation) .select2-drop .select2-results .select2-highlighted{
    background:#2563eb !important; color:#fff !important;
}
body:has(.peacock-import-simulation) .select2-drop .select2-search input{
    background:#13171d !important; border:1px solid rgba(148,163,184,.16) !important; color:#c3ccd8 !important;
}

/* -----------------------------------------------------------------------
   Peacock empty-state - modal dim + in-card "Import from Simulation".
   Added by rahul.suri on 06/22/2026.
   - .pk-modal-dim dims the whole screen behind the card so the user must
     act. Scoped to .peacock-workbench (workbench only; the embedded
     classic manager keeps the in-flow card with no dim).
   - The card morphs between .pk-view-main (drop files) and .pk-view-sim
     (the inline simulation-import form) via .pk-showing-sim + a Back btn.
   ----------------------------------------------------------------------- */
.pk-modal-dim{ display:none; }
.peacock-workbench .pk-modal-dim{
    display:block; position:fixed; inset:0; z-index:10040;
    background:rgba(8,11,16,.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    animation:pk-fade .25s ease both;
}
.peacock-workbench .peacock-kickstart{
    position:fixed; top:50%; left:50%;
    z-index:10050; margin:0; max-height:86vh; overflow-y:auto;
    /* Own fade keyframe that PRESERVES the centering translate - the base
       .peacock-kickstart uses pk-fade which ends at transform:none and would
       knock this fixed-centered card off-center (down-right). */
    transform:translate(-50%,-50%);
    animation:pk-fade-center .25s ease both;
    /* R0-3955 - wide enough for the two-column (import | saved projects) layout. The in-card
       Import-from-Simulation form (.pk-showing-sim) + sample list (.pk-showing-samples) stay narrow. */
    width:900px; max-width:95vw;
}
.peacock-workbench .peacock-kickstart.pk-showing-sim{ width:460px; }
.peacock-workbench .peacock-kickstart.pk-showing-samples{ width:600px; }

/* R0-3955 - in-card sample picker (mirrors the .pk-view-sim morph) */
.peacock-kickstart .pk-view-samples{ display:none; text-align:left; }
.peacock-kickstart.pk-showing-samples .pk-view-main{ display:none; }
.peacock-kickstart.pk-showing-samples .pk-view-samples{ display:block; animation:pk-fade .22s ease both; }
.peacock-workbench .peacock-kickstart .pk-view-samples .pk-list{ max-height:52vh; }
.peacock-workbench .peacock-kickstart .pk-sample-model{
    color:var(--pk-text-faint); font-size:11px; font-family:var(--pk-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@keyframes pk-fade-center{
    from{ opacity:0; transform:translate(-50%, calc(-50% + 6px)); }
    to{ opacity:1; transform:translate(-50%, -50%); }
}

/* view morph */
.peacock-kickstart .pk-view-sim{ display:none; text-align:left; }
.peacock-kickstart.pk-showing-sim .pk-view-main{ display:none; }
.peacock-kickstart.pk-showing-sim .pk-view-sim{ display:block; animation:pk-fade .22s ease both; }

/* sim-view header + back button */
.peacock-kickstart .pk-sim-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.peacock-kickstart .pk-sim-title{ font-size:15px; font-weight:600; color:var(--pk-text-hi); }
.peacock-kickstart .pk-back{
    display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12px; font-weight:600;
    padding:6px 11px; border-radius:8px; cursor:pointer;
    color:var(--pk-text); background:rgba(148,163,184,.07); border:1px solid var(--pk-edge); transition:.15s ease;
}
.peacock-kickstart .pk-back:hover{ border-color:rgba(96,165,250,.5); color:var(--pk-text-hi); background:rgba(59,130,246,.10); }
.peacock-kickstart .pk-back i{ font-size:11px; }

/* inline simulation-import form mounted inside the card */
.pk-sim-mount{ text-align:left; }
.pk-sim-mount .d3view-peacock-import-simulation{ width:100%; color:var(--pk-text); }
.pk-sim-mount .sim-fb,
.pk-sim-mount .worker-fb{ height:auto !important; max-height:46vh; overflow-y:auto; }
.pk-sim-mount .pk-imp-foot{ text-align:right; }
.pk-sim-mount .pk-imp-foot .cancel{ display:none; }   /* Back replaces Close */
/* FormBuilder labels/inputs dark (inline form has no .content-wrapper, so scope directly) */
.pk-sim-mount .lead,
.pk-sim-mount label:not(.pk-imp-toggle),
.pk-sim-mount .d3view-inputsBuilder{ color:var(--pk-text) !important; }
.pk-sim-mount .lead i,
.pk-sim-mount label i{ color:var(--pk-blue-bright) !important; }
.pk-sim-mount .select2-container .select2-choice,
.pk-sim-mount .select2-container .select2-choice .select2-arrow{
    background:var(--pk-canvas-0) !important; background-image:none !important;
    border-color:var(--pk-edge) !important; color:var(--pk-text) !important;
}
.pk-sim-mount .select2-container .select2-choice > .select2-chosen{ color:var(--pk-text) !important; }
.pk-sim-mount .select2-container .select2-arrow b{ filter:invert(.8) brightness(1.4); }
.pk-sim-mount input[type="text"],
.pk-sim-mount input[type="search"]{ background:var(--pk-canvas-0) !important; border:1px solid var(--pk-edge) !important; color:var(--pk-text) !important; }
.pk-sim-mount .filter-selectpicker .btn,
.pk-sim-mount .btn-warning{ background:rgba(59,130,246,.14) !important; border:1px solid rgba(96,165,250,.3) !important; color:var(--pk-blue-bright) !important; }

/* -----------------------------------------------------------------------
   Peacock Workbench - use OUR modernized empty-state card as the single
   empty state. The canonical workbench ships its own native empty overlay
   (.wb-viewport-empty: "No model loaded - Open Sim", z-index 4) which, via a
   stacking-context trap, renders ON TOP of our fixed kickstart card and
   intercepts clicks (sending them to its old white Open-Sim dialog). Suppress
   it so our card (Drop files to get started + dim + in-card sim import) is the
   one empty state. Added by rahul.suri on 06/22/2026.
   ----------------------------------------------------------------------- */
.peacock-workbench .wb-viewport-empty{ display:none !important; }

/* /stylesheets/peacock.workbench.css */
/* peacock.workbench.css — workbench SHELL styles (.wb-* / .peacock-workbench).
   Extracted from prod (style.php -> /stylesheets/visualizers/peacock.workbench.css).
   The 3D VIEWER styles live in subrata_plugins/peacock.v3/css/peacock.css. */

/* Added by shashank2104 on 07/01/2026 - R2026-28 - the shared context menu mounts on <body> (outside
   .peacock-workbench), so mirror each theme's --wb-* tokens onto the body-mounted menu container when it
   carries the matching wb-ctxm-theme-* class (set from the active theme at open time). No new colors -
   just re-uses the theme token values so the menu bg/fg follow the workbench active theme. */
.peacock-workbench[data-wb-theme="calm-light"],
.d3view-context-menu-container.peacock-main-ctxm.wb-ctxm-theme-calm-light,
.wb-open-modal-host[data-wb-theme="calm-light"] {
    --wb-bg:           #eef1f4;
    --wb-panel:        #fbfcfd;
    --wb-panel-2:      #f4f6f8;
    --wb-fg:           #2c3e50;
    --wb-fg-muted:     #7a8794;
    --wb-accent:       #2c5282;
    --wb-accent-fg:    #ffffff;
    --wb-border:       #e0e3e6;
    --wb-row-hover:    #e8eef5;
    --wb-radius:       8px;
    --wb-radius-sm:    4px;
    --wb-density:      1;
    --wb-rail-bg:      #2c3e50;
    --wb-rail-fg:      #9fb3c8;
    --wb-rail-fg-on:   #ffffff;
}

.peacock-workbench[data-wb-theme="studio-dark"],
.d3view-context-menu-container.peacock-main-ctxm.wb-ctxm-theme-studio-dark,
.wb-open-modal-host[data-wb-theme="studio-dark"] {
    --wb-bg:           #1d1d1d;
    --wb-panel:        #2e2e2e;
    --wb-panel-2:      #383838;
    --wb-fg:           #d6d6d6;
    --wb-fg-muted:     #8c8c8c;
    --wb-accent:       #4a7eb5;
    --wb-accent-fg:    #ffffff;
    --wb-border:       #161616;
    --wb-row-hover:    #3a3a3a;
    --wb-radius:       8px;
    --wb-radius-sm:    4px;
    --wb-density:      1;
    --wb-rail-bg:      #262626;
    --wb-rail-fg:      #8c8c8c;
    --wb-rail-fg-on:   #e0e0e0;
}

.peacock-workbench[data-wb-theme="precision"],
.d3view-context-menu-container.peacock-main-ctxm.wb-ctxm-theme-precision,
.wb-open-modal-host[data-wb-theme="precision"] {
    --wb-bg:           #dfe3e8;
    --wb-panel:        #ffffff;
    --wb-panel-2:      #f7f8f9;
    --wb-fg:           #2b3540;
    --wb-fg-muted:     #5a6470;
    --wb-accent:       #0c7c7c;
    --wb-accent-fg:    #ffffff;
    --wb-border:       #d2d6db;
    --wb-row-hover:    #e6f0f0;
    --wb-radius:       3px;
    --wb-radius-sm:    2px;
    --wb-density:      0.7;
    --wb-rail-bg:      #2b3540;
    --wb-rail-fg:      #8a949e;
    --wb-rail-fg-on:   #ffffff;
}

/* Added by shashank2104 on 08/18/2026 - R2026-177 - INTERFACE FONT SIZE.
   Every font-size in this stylesheet is written as `calc(<n>px * var(--wb-font-scale, 1))`, so the one
   variable below scales all of the workbench chrome text at once. Medium is 1, which is exactly today's
   appearance - the fallback in the calc() means an unset variable also renders at 1, so nothing changes
   until a user opts in. Driven by Preferences -> Display -> Appearance -> Interface font size, which
   writes data-wb-font-size onto the shell root (Peacock.Workbench.applyFontSize in themes.js).
   Only TEXT scales. Control heights, padding and the layout grid are deliberately untouched, so the
   chrome keeps its proportions and the 3D viewport keeps its size.

   THERE IS DELIBERATELY NO RULE FOR "default". That setting removes the attribute entirely, so none
   of these rules match, the variable stays undefined, and every calc() falls back to the literal size
   it was written with. Default is therefore the original stylesheet rather than a scale of 1.0 that
   happens to look the same. */
.peacock-workbench[data-wb-font-size="tiny"]        { --wb-font-scale: 0.85; }
.peacock-workbench[data-wb-font-size="small"]       { --wb-font-scale: 0.92; }
.peacock-workbench[data-wb-font-size="large"]       { --wb-font-scale: 1.15; }
.peacock-workbench[data-wb-font-size="extra-large"] { --wb-font-scale: 1.3; }

/* The canvas overlays (the entity-display fringe legend, the PedPro contour legend) are mounted INSIDE
   .peacock-canvas-container, so they would inherit the scale from the shell root. R2026-177 asks for
   the fringe legend to be left alone, so the variable is reset to 1 for that subtree. */
.peacock-workbench .peacock-canvas-container { --wb-font-scale: 1; }

.peacock-workbench {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    background: var(--wb-bg); color: var(--wb-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-toolbar {
    height: calc(40px * var(--wb-density) + 16px);
    display: flex; align-items: center; gap: calc(6px * var(--wb-density) + 2px);
    /** Added by shashank2104 on 09/10/2026 at 03:11 PM - left pad is 0 so the logo slot
        starts at the same x as `.wb-rail` and the two read as one column. **/
    padding: 0 10px 0 0; background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
}
.wb-body { flex: 1; display: flex; min-height: 0; }
.wb-rail {
    width: 34px; background: var(--wb-rail-bg);
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 8px 0; flex: 0 0 auto;
}
.wb-rail-icon {
    color: var(--wb-rail-fg); cursor: pointer; font-size: calc(15px * var(--wb-font-scale, 1));
    width: 26px; height: 26px; display: flex; align-items: center;
    justify-content: center; border-radius: var(--wb-radius-sm);
}
.wb-rail-icon:hover { color: var(--wb-rail-fg-on); background: rgba(255,255,255,0.06); }
.wb-rail-icon.is-active { color: var(--wb-rail-fg-on); box-shadow: inset 2px 0 0 var(--wb-accent); }
.wb-rail-icon-label { display: none; }

.wb-rail-section { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 4px 0; }
.wb-rail-section + .wb-rail-section {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 6px; padding-top: 10px;
}
.wb-rail-section-label {
    font-size: calc(8px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--wb-rail-fg); opacity: 0.55; padding: 0 2px; line-height: 1.1;
    text-align: center; word-break: break-word;
}
.wb-rail-list { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.wb-rail-section--sim { background: rgba(255,255,255,0.02); }
/** Added by shashank2104 on 08/18/2026 - R2026-173 (item #7) - PIN THE FOOTER SECTION TO THE
    BOTTOM OF THE RAIL. The rail is a full-height flex column, so being LAST in the section list only
    puts an item under the one above it, not at the bottom edge. `margin-top: auto` eats the free
    space above it instead. It must also beat the `.wb-rail-section + .wb-rail-section` rule's
    `margin-top: 6px` (same specificity, so this rule has to come after it); the separator border and
    its breathing room are restored explicitly. **/
/** The RailView's own el sits between .wb-rail and the sections and is content-height, so there was
    no free space for the footer's `margin-top: auto` to eat. Make that wrapper fill the rail and
    become the flex column the sections live in. Written as a child selector so it applies whatever
    the view el is called (it carries no class of its own). **/
.wb-rail > * {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/** ⚠ Doubled class, not `.wb-rail-section--footer` alone: the separator rule above is
    `.wb-rail-section + .wb-rail-section`, which is specificity (0,2,0) and sets `margin-top: 6px`.
    A single-class rule is (0,1,0) and loses to it no matter where it sits in the file, so the
    footer stayed stuck under Agent instead of dropping to the bottom. **/
.wb-rail-section.wb-rail-section--footer {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 10px;
}
/** Updated by shashank2104 on 08/17/2026 - R2026-173 - THE LEFT PANE NO LONGER SCROLLS ITSELF.
    It used to be `overflow: auto`, so the whole pane — search box, header, filter row and all —
    scrolled away with the list. Every pane already declares its own bounded scroller
    (.wb-sim-pane-list, .wb-pp-table-wrap, …) but those could never take effect while an ancestor
    was the scroller. It is now a flex COLUMN that clips, and its mounted pane fills it; the pane
    owns the one scroller. This is the `full-h + pl-flex-v + flex-1 o_auto_y` rule from the project
    layout guidance, applied at the container. **/
.wb-leftpane {
    background: var(--wb-panel); border-right: 1px solid var(--wb-border);
    overflow: hidden; flex: 0 0 auto; min-width: 200px;
    display: flex; flex-direction: column;
    position: relative;   /* anchors .wb-leftpane-close (R2026-173) */
}
/** R2026-173 - the panel's own close button. Absolute rather than part of each pane's header, so
    ONE button serves every pane (see RailView._addPaneClose). Each pane's header reserves room for
    it below, so it never lands on a pane's own refresh/filter icons. **/
.wb-leftpane-close {
    position: absolute; top: 7px; right: 8px; z-index: 4;
    width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--wb-radius-sm);
    color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); cursor: pointer;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease,
                border-color var(--wb-t, .15s) ease;
}
.wb-leftpane-close:hover { background: var(--wb-row-hover); color: var(--wb-fg); border-color: var(--wb-border); }
.wb-leftpane-close:focus { outline: none; border-color: var(--wb-accent); }
/* Reserve the close button's corner in every pane header that has its own right-aligned controls. */
.wb-leftpane .wb-sim-pane-head,
.wb-leftpane .wb-logs-head,
.wb-leftpane .wb-wl-header,
.wb-leftpane .wb-pp-toolbar,
.wb-leftpane .wb-panel-title { padding-right: 36px; }
/* Whatever pane the rail mounts fills the column and is allowed to shrink (min-height:0 is what
   lets an inner overflow:auto actually bound itself inside a flex parent). */
.wb-leftpane > * { flex: 1 1 auto; min-height: 0; }

/** R2026-173 - every rail pane is a flex COLUMN, and its inner shell fills it by flex rather than
    by `height: 100%`. A percentage height needs a resolvable parent height at every step of the
    chain, which is exactly what breaks the moment a pane is mounted somewhere new; `flex: 1` + a
    clipping column does not care where it is mounted. This is the one place the rule is written —
    the panes themselves declare no heights. **/
.wb-leftpane .wb-projects-pane,
.wb-leftpane .wb-sim-rail-pane,
.wb-leftpane .wb-examples-pane,
.wb-leftpane .wb-tree-pane,
.wb-leftpane .wb-logs-pane,
.wb-leftpane .wb-wasm-logs-pane {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    height: auto;   /* beats the panes' own `height: 100%` — flex owns the sizing now */
}
.wb-leftpane .wb-projects-host,
.wb-leftpane .wb-sim-pane {
    flex: 1 1 auto; min-height: 0; height: auto;
}
/* Models tree: the "Models" title is the fixed header, the tree is the scroller. Without this the
   whole pane scrolled and the title went with it. */
.wb-leftpane .wb-panel-title { flex: 0 0 auto; }
.wb-leftpane .wb-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wb-viewport-col { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.wb-viewport { flex: 1; position: relative; background: var(--wb-bg); min-height: 0; }
/** Updated by shashank2104 on 07/21/2026 - the Selection panel is a FIXED SHELL, not a scroller:
    it flex-columns so the context region below owns the bounded height and does the scrolling.
    That is what lets a tool's footer (Accept / Cancel / Apply) stay pinned no matter how tall the
    tool's body gets — see `.wb-inspector-context` + `.wb-panel-foot` further down. **/
.wb-inspector {
    background: var(--wb-panel); border-left: 1px solid var(--wb-border);
    overflow: hidden; flex: 0 0 auto; min-width: 160px;
    display: flex; flex-direction: column; min-height: 0;
}
.wb-inspector-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/** R2026-28: the bottom dock OVERLAYS the viewport (anchored to its bottom) instead of being a
    flex sibling, so growing/maximizing it covers the canvas rather than resizing the 3D engine. **/
.wb-dock {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--wb-panel-2); border-top: 1px solid var(--wb-border);
    overflow: hidden; box-shadow: 0 -10px 30px rgba(0,0,0,.28);
}
/* R2026-76 / R2026-190 - the collapsed dock is exactly its CHROME: the tab strip, plus the nav bar
   when open, plus the activity log (ticker, and its console when open).

   Updated by shashank2104 on 09/03/2026 - sized with `height: auto` instead of the JS-measured
   `--wb-dock-collapsed-h`. When collapsed the tab body is `display:none` (rule below), so the dock's
   only content IS the chrome rows and its natural height is exactly their sum — no measurement
   needed. The old var-driven height depended on DockView.syncDockChromeHeight() running AFTER the
   activity log had a real height; that re-measure is a ResizeObserver on the chrome rows, and it
   does NOT fire for an ANCESTOR display flip (e.g. leaving the empty-canvas landing, where the dock
   is display:none). So the collapsed dock came back pinned to the 26px tab-strip fallback and the
   49px activity log / command prompt was clipped off by `overflow:hidden`. `height: auto` is
   immune to that timing entirely. (syncDockChromeHeight still runs — it grows the OPEN dock when its
   chrome grows — it just no longer owns the collapsed height.) */
.wb-dock.is-collapsed { height: auto !important; }
.wb-dock.is-collapsed.has-navbar { height: auto !important; }
/** Added by shashank2104 on 08/21/2026 - R2026-190 - ⭐ A COLLAPSED DOCK RENDERS NO BODY.
    `.wb-dock-body` carries `padding: 6px`, and FLEX SHRINKS THE CONTENT BOX, NEVER THE PADDING — so an
    empty body still claimed 12px inside `.wb-dock-inner`. With the activity log added below it the rows
    needed 26 + 12 + 31 = 69px inside a 57px dock, and since the dock is `overflow:hidden` the log was
    pushed straight off the bottom edge: 13px of a 31px ticker survived. Measured live, and it is exactly
    what "the log is not visible at all in the bottom" looks like.
    Hiding it is also what collapsed MEANS — those 12px were empty padding nobody could see into. **/
.peacock-workbench .wb-dock.is-collapsed .wb-dock-body { display: none; }
.wb-dock.is-maximized { top: 0; height: auto !important; box-shadow: 0 -16px 40px rgba(0,0,0,.42); }
/* drag handle along the dock's top edge (replaces the old flex splitter) */
.wb-dock-resize { position: absolute; top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; z-index: 4; }
.wb-dock.is-collapsed .wb-dock-resize, .wb-dock.is-maximized .wb-dock-resize { display: none; }
/* minimize / maximize window buttons + closeable tab × */
.wb-dock-winbtns { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
/** Added by shashank2104 on 07/21/2026 - R2026-28 - LS-PrePost-style SCENE BAR in the dock tab strip
    (display mode + camera views + fit/reset). Lives inside .wb-dock-winbtns so it right-aligns beside
    the minimize/maximize buttons; the tab strip is viewport-wide so there is room, and the bar clips
    from the LEFT (direction:rtl trick would reorder, so we just hide overflow) on narrow viewports. **/
.wb-dock-scenebar { display: inline-flex; align-items: center; gap: 1px; overflow: hidden; flex: 0 1 auto; }
.wb-dock-winbtn-sep, .wb-sb-sep {
    width: 1px; height: 14px; background: var(--wb-border); margin: 0 5px; flex: 0 0 auto;
}
.wb-sb-grp { display: inline-flex; align-items: center; gap: 1px; }
.wb-sb-btn {
    height: 20px; min-width: 22px; padding: 0 4px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: var(--wb-radius-sm);
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1; cursor: pointer;
}
.wb-sb-btn:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.wb-sb-btn.is-active {
    background: rgba(74,126,181,0.18); border-color: var(--wb-accent); color: var(--wb-accent);
}
/* letter chips for the six orthographic views read clearer than any glyph at 20px */
.wb-sb-view { font-weight: 700; letter-spacing: 0.3px; font-size: calc(10px * var(--wb-font-scale, 1)); }
.wb-sb-ico { width: 13px; height: 13px; display: block; }
/* back-iso = the same cube mirrored, so the pair reads as "front / back" at a glance */
.wb-sb-isoback i { transform: scaleX(-1); }
.wb-dock-winbtn { width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--wb-fg-muted); border-radius: var(--wb-radius-sm); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); }

/* R2026-76 — navigation bar: a second row that expands from the scene bar's nav toggle */
.wb-dock-navbar { display: none; }
.wb-dock-navbar.is-open {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 5px 8px; border-top: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.wb-nb-grp { display: inline-flex; align-items: center; gap: 3px; }
.wb-nb-lbl {
    font-size: calc(9px * var(--wb-font-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--wb-fg-muted); margin-right: 3px; user-select: none;
}
.wb-nb-sep { width: 1px; height: 16px; background: var(--wb-border); margin: 0 4px; flex: 0 0 auto; }
.wb-nb-seg { display: inline-flex; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); overflow: hidden; }
.wb-nb-segbtn {
    height: 24px; min-width: 26px; padding: 0 6px; border: none; cursor: pointer;
    background: var(--wb-panel); color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1));
    display: inline-flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--wb-border); transition: background var(--wb-t), color var(--wb-t);
}
.wb-nb-seg .wb-nb-segbtn:last-child { border-right: none; }
.wb-nb-segbtn:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.wb-nb-segbtn.is-active { background: rgba(74,126,181,0.18); color: var(--wb-accent); }
.wb-nb-btn {
    height: 24px; min-width: 26px; padding: 0 7px; flex: 0 0 auto; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1;
    transition: background var(--wb-t), color var(--wb-t), border-color var(--wb-t);
}
.wb-nb-btn:hover { background: var(--wb-row-hover); color: var(--wb-fg); border-color: var(--wb-border-strong); }
.wb-nb-btn:active { background: rgba(74,126,181,0.18); color: var(--wb-accent); }
.wb-nb-btn.is-active { background: rgba(74,126,181,0.18); color: var(--wb-accent); border-color: var(--wb-accent); }
.wb-nb-pin { font-weight: 500; }
.wb-nb-vbtn { font-weight: 700; font-size: calc(10px * var(--wb-font-scale, 1)); letter-spacing: 0.2px; min-width: 34px; padding: 0 5px; }
/* settings dropup — opens upward from the nav bar. position:fixed (anchored in JS by
   DockView._positionNavSettings) so the dock's overflow:hidden can't crop it — the collapsed dock is
   only ~64px tall and the pop opens up past its top edge. */
.wb-nb-settings-wrap { position: relative; }
.wb-nb-settings-pop {
    position: fixed; z-index: 60; min-width: 176px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 10px;
}
.wb-nb-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-nb-set-row label { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin: 0; }
.wb-nb-set-input {
    height: 26px; padding: 0 6px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel-2); color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-dock-winbtn:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.wb-dock-tab-close { margin-left: 7px; font-size: calc(10px * var(--wb-font-scale, 1)); opacity: .55; cursor: pointer; }
.wb-dock-tab-close:hover { opacity: 1; color: var(--wb-danger, #c53030); }
.wb-statusbar {
    height: 24px; display: flex; align-items: center; gap: 14px;
    padding: 0 11px; background: var(--wb-accent); color: var(--wb-accent-fg);
    font-size: calc(11px * var(--wb-font-scale, 1)); flex: 0 0 auto;
}
.wb-splitter { flex: 0 0 5px; cursor: col-resize; background: transparent; }
.wb-splitter.is-row { cursor: row-resize; flex-basis: 5px; }
.wb-splitter:hover { background: var(--wb-accent); opacity: 0.4; }

.wb-panel-title {
    font-weight: 700; color: var(--wb-accent); text-transform: uppercase;
    font-size: calc(10px * var(--wb-font-scale, 1)); letter-spacing: 0.4px;
    padding: 7px 8px; border-bottom: 1px solid var(--wb-border);
}
.wb-placeholder {
    padding: 20px 12px; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); text-align: center;
}
.wb-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: calc(4px * var(--wb-density) + 2px) calc(6px * var(--wb-density) + 3px);
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); white-space: nowrap;
}
.wb-btn:hover { background: var(--wb-row-hover); }
.wb-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.wb-toolbar-title { font-weight: 700; color: var(--wb-accent); font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-toolbar-sep { width: 1px; height: 18px; background: var(--wb-border); }
/** Added by shashank2104 on 09/10/2026 at 03:13 PM - cancel the toolbar gap so the
    pipe after the logo sits on the last pixel of the rail column (same x as the
    rail's right border). **/
.wb-toolbar-logo + .wb-toolbar-sep {
    margin-left: calc(-1 * (6px * var(--wb-density) + 2px) - 1px);
    flex: 0 0 1px;
}
.wb-toolbar-item i { font-size: calc(11px * var(--wb-font-scale, 1)); }
/* Added by shashank2104 on 07/08/2026 - R2026-18 - Header toolbar tabs are accent buttons (white text),
   but the generic `.wb-btn:hover` swaps the background to the neutral --wb-row-hover, which is light in
   the light theme and made the white label disappear on hover. Keep the tabs accent-colored with white
   text on hover so the label stays readable in both themes. */
.wb-toolbar .wb-btn.wb-toolbar-item:hover,
.wb-toolbar .wb-toolbar-group-btn:not(.is-open):hover {
    background: var(--wb-accent, #4c8df6); color: #fff; filter: brightness(1.12);
}

.wb-tree { padding: 4px 0; }
.wb-tree-row {
    display: flex; align-items: center; gap: 6px;
    padding: calc(3px * var(--wb-density) + 2px) 8px; cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-tree-row:hover { background: var(--wb-row-hover); }
.wb-tree-row.is-selected { background: var(--wb-row-hover); box-shadow: inset 2px 0 0 var(--wb-accent); }
/* Highlight the active model's name so it stands out among open models */
.wb-tree-model.is-active { box-shadow: inset 2px 0 0 var(--wb-accent); }
.wb-tree-model.is-active .wb-tree-label { color: var(--wb-accent); font-weight: 600; }
.wb-tree-model.is-active > i.fa-cube { color: var(--wb-accent); }
.wb-tree-children { padding-left: 16px; }
.wb-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-tree-count { color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); }
.wb-tree-eye { color: var(--wb-fg-muted); }
.wb-tree-eye:hover { color: var(--wb-accent); }
.wb-tree-chevron { width: 10px; color: var(--wb-fg-muted); }
.wb-tree-bom-open { margin-left: 6px; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-tree-bom-open:hover { color: var(--wb-accent); }
/* Added by shashank2104 on 08/19/2026 - R2026-173 - per-row View action on the Workflows rail list */
.wb-rail-list-view {
    margin-left: 6px; color: var(--wb-fg-muted); cursor: pointer;
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: color 120ms ease;
}
.wb-rail-list-view:hover { color: var(--wb-accent); }
.wb-rail-list-view.is-busy { color: var(--wb-accent); cursor: default; }
.wb-parts-toolbar {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 8px; background: var(--wb-row-hover);
    border-bottom: 1px solid var(--wb-divider, rgba(255,255,255,0.06));
}
.wb-parts-search-wrap { flex: 1; position: relative; display: flex; align-items: center; }
.wb-parts-search-icon { position: absolute; left: 6px; color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); pointer-events: none; }
.wb-parts-search-input {
    width: 100%; padding: 3px 22px 3px 20px; font-size: calc(11px * var(--wb-font-scale, 1));
    background: var(--wb-rail-bg, #1e1e1e); color: var(--wb-fg);
    border: 1px solid var(--wb-divider, rgba(255,255,255,0.1)); border-radius: 3px;
    outline: none;
}
.wb-parts-search-input:focus { border-color: var(--wb-accent); }
.wb-parts-search-clear { position: absolute; right: 6px; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(10px * var(--wb-font-scale, 1)); }
.wb-parts-search-clear:hover { color: var(--wb-accent); }
.wb-chip {
    background: transparent; color: var(--wb-fg-muted);
    border: 1px solid var(--wb-divider, rgba(255,255,255,0.1)); border-radius: 3px;
    padding: 3px 6px; font-size: calc(10px * var(--wb-font-scale, 1)); cursor: pointer;
}
.wb-chip:hover { color: var(--wb-fg); }
.wb-chip.is-active { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
.wb-placeholder { padding: 8px 12px; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-style: italic; }
.wb-kv { padding: 6px 0; }
.wb-kv-row {
    display: flex; gap: 8px; padding: 3px 8px; font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-kv-key { color: var(--wb-fg-muted); flex: 0 0 40%; }
.wb-kv-val { color: var(--wb-fg); flex: 1; word-break: break-word; }
/** R2026-173 - the "(+n more)" hint on the Model Info Workflow row. **/
.wb-kv-val .wb-kv-dim { color: var(--wb-fg-muted); }

/* Added by shashank2104 on 07/08/2026 - R2026-18 - Model Info rows are <li> inside .wb-kv (a <ul>) and
   were unstyled, so the key/value spans collapsed together ("Nameuniaxial.js3d.zip"). Lay each row out
   as a flex row with a gap (mirrors .wb-kv-row) so the label and value are clearly separated. */
.wb-info-root .wb-kv { list-style: none; margin: 0; padding: 6px 0; }
.wb-info-root .wb-kv li { display: flex; gap: 12px; padding: 3px 0; font-size: calc(12px * var(--wb-font-scale, 1)); align-items: baseline; }

/* Added by shashank2104 on 07/01/2026 - R2026-28 - Set Nodes: interactive, modern list for the
   bottom dock (the old wb-kv rows were muted, static, and read as disabled). Clear clickable rows
   with hover + selected states, plus a status line for feedback (incl. the no-3D-geometry case). */
.wb-nodeset-list { display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.wb-nodeset-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-left: 2px solid transparent; border-radius: 5px; cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wb-nodeset-row:hover { background: var(--wb-panel-2); border-color: var(--wb-accent); }
.wb-nodeset-row.is-selected { background: var(--wb-panel-2); border-left-color: var(--wb-accent); }
.wb-nodeset-name { color: var(--wb-fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-nodeset-count { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.wb-nodeset-status {
    margin-top: 6px; padding: 6px 10px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 4px;
}
.wb-nodeset-status.is-active { color: var(--wb-fg); border-color: var(--wb-accent); }

/* Added by shashank2104 on 07/01/2026 - R2026-28 - CLI recipe list themed for the bottom dock:
   compact rows that flow with the dark workbench theme, overriding the light-modal --d3v-* chrome
   from peacock.cliactions.css (built for a modal/side-panel, so white cards + light text here). */
.wb-dock-cli-actions-host .peacock-cli-actions-panel { padding: 4px 2px; gap: 8px; color: var(--wb-fg); }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-input-type-badge {
    padding: 5px 10px; background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: 4px; color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-input-type-badge strong { color: var(--wb-fg); }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-input-type-badge i { color: var(--wb-accent); }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-help { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); padding: 0 2px; }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-help code {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg); font-size: calc(10px * var(--wb-font-scale, 1));
}
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-list { gap: 4px; }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-card {
    gap: 10px; padding: 7px 10px; background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: 5px; box-shadow: none;
}
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-card.is-eligible:hover {
    background: var(--wb-panel-2); border-color: var(--wb-accent); box-shadow: none; transform: none;
}
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-icon {
    width: 26px; height: 26px; background: transparent; color: var(--wb-accent);
    border: none; border-radius: 4px; font-size: calc(13px * var(--wb-font-scale, 1)); flex: 0 0 auto;
}
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-title { color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1)); margin-bottom: 1px; }
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-desc { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
/* Keep the run button visible in the dock (its modal default hides it until hover). */
.wb-dock-cli-actions-host .peacock-cli-actions-panel .pcli-recipe-action .pcli-run-btn {
    opacity: 1; transform: none; pointer-events: auto;
}
.wb-transport {
    /* R2026-28: ride just above the bottom dock — --wb-dock-h is the dock's live height
       (synced by DockView via a ResizeObserver); falls back to 32px before JS runs. */
    position: absolute; bottom: calc(var(--wb-dock-h, 16px) + 12px); left: 50%; transform: translateX(-50%);
    transition: bottom 0.18s ease;
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    padding: 5px 9px; background: var(--wb-rail-bg); color: #fff;
    border-radius: 16px; box-shadow: 0 3px 12px rgba(0,0,0,0.28); z-index: 20;
}
.wb-transport-row { display: flex; align-items: center; gap: 6px; }
/* R2026-265 - the transport carries tabindex=0 so the arrow keys can step animation states while it
   holds focus. The ring is on :focus AND :focus-within, so it shows exactly while the keys are live
   (focus sits on a step button after a click, not on the bar itself) - it is the affordance, not
   decoration. It is an OUTLINE, not a box-shadow: the studio-light theme redefines .wb-transport's
   box-shadow at a higher specificity, so a shadow ring here measured as absent on that theme. */
.wb-transport:focus,
.wb-transport:focus-within {
    outline: 2px solid var(--wb-accent, #4c9ffe);
    outline-offset: 2px;
}

/* R2026-28 - buffering shown IN the transport (video-player style): a thin buffered strip + live count
   along the top edge, plus a spinner. Replaces the floating pill; only visible while buffering. */
.wb-transport-buffer { display: none; align-items: center; gap: 8px; padding: 1px 4px 2px; }
.wb-transport-buffer.is-on { display: flex; }
.wb-transport-buffer-spin {
    flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.22); border-top-color: var(--wb-accent, #4c9ffe);
    animation: wbTransportSpin 0.7s linear infinite;
}
@keyframes wbTransportSpin { to { transform: rotate(360deg); } }
.wb-transport-buffer-track {
    flex: 1 1 auto; height: 3px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.18);
}
.wb-transport-buffer-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wb-accent, #4c9ffe) 65%, #fff), var(--wb-accent, #4c9ffe));
    transition: width 0.25s ease;
}
.wb-transport-buffer-txt {
    flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.72); white-space: nowrap; letter-spacing: 0.02em;
    /* Added by shashank2104 on 08/27/2026 at 10:28 AM - min-width is set from the total in
       TransportView.setBufferProgress so "Buffering 2/13" → "12/13" does not grow the bar. */
    text-align: right;
}
/* subtle cue on the play button while buffering (kept clickable so pause still works) */
.wb-transport-play.is-buffering { color: var(--wb-accent, #4c9ffe); }

/* R2026-28 - while buffering, LOCK the non-essential transport controls so the user can't fight the
   short fill pass (scrub to / step to an un-buffered state, change range/fps/export). Play-Pause, pin and
   grip stay live so the user can still pause or reposition the bar. `.is-buffering` is toggled on the
   .wb-transport root by TransportView.setBufferProgress / hideBuffer. */
.wb-transport.is-buffering .wb-transport-scrub,
.wb-transport.is-buffering .wb-transport-btn:not(.wb-transport-play):not(.wb-transport-pin),
.wb-transport.is-buffering .wb-transport-range,
.wb-transport.is-buffering .wb-transport-fps {
    pointer-events: none;
    opacity: 0.4;
    cursor: default;
}
/* d3eigv modal-animation row */
.wb-transport-eigv {
    padding-top: 5px; margin-top: 1px;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.wb-transport-eigv.hide { display: none; }
.wb-transport-eigv-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
    color: var(--wb-accent); padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.07);
}
.wb-eigv-mode {
    background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px; font-size: calc(11px * var(--wb-font-scale, 1)); padding: 2px 6px; max-width: 190px; cursor: pointer;
}
.wb-eigv-mode:hover { background: rgba(255,255,255,0.10); }
.wb-eigv-mode:focus { border-color: var(--wb-accent); outline: none; }
.wb-eigv-mode option { color: #222; background: #fff; }
.wb-eigv-amp { width: 120px; accent-color: var(--wb-accent); }
.wb-eigv-ampval { font-size: calc(11px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; min-width: 30px; opacity: 0.95; }
.wb-transport-eigv-hint { font-size: calc(10px * var(--wb-font-scale, 1)); opacity: 0.5; margin-left: auto; white-space: nowrap; }
.wb-transport-grip { cursor: grab; opacity: 0.5; padding: 0 2px; }
.wb-transport-btn {
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-size: calc(12px * var(--wb-font-scale, 1)); padding: 2px 4px;
}
.wb-transport-btn:hover { color: var(--wb-rail-fg-on); }
.wb-transport-btn.is-busy { cursor: default; opacity: 0.85; }
.wb-transport-scrub { width: 110px; }
.wb-transport-fps {
    font-size: calc(10px * var(--wb-font-scale, 1)); opacity: 0.9; white-space: nowrap;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
    padding: 1px 4px; outline: none; cursor: pointer;
    font-family: inherit;
}
.wb-transport-fps:hover { background: rgba(255,255,255,0.08); }
.wb-transport-fps:focus { border-color: var(--wb-accent); }
.wb-transport-fps option { color: #222; background: #fff; }
.wb-transport-range {
    display: inline-flex; align-items: center; gap: 3px;
    margin: 0 4px;
}
.wb-transport-num {
    width: 36px; font-size: calc(10px * var(--wb-font-scale, 1));
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.18); border-radius: 4px;
    padding: 1px 4px; outline: none;
    -moz-appearance: textfield;
}
.wb-transport-num::-webkit-outer-spin-button,
.wb-transport-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wb-transport-num::placeholder { color: rgba(255,255,255,0.4); }
.wb-transport-num:focus { border-color: var(--wb-accent); }
.wb-transport.is-hidden { display: none; }
/* Added by shashank2104 on 09/16/2026 - a bar docked under ONE pane of a split (transport.js
   _dockToPane) drops the play range, loop and export when the pane is too narrow for the full row,
   and its scrubber gives way first. */
.wb-transport.is-docked .wb-transport-main { min-width: 0; }
.wb-transport.is-docked .wb-transport-scrub { flex: 1 1 60px; min-width: 60px; width: auto; }
.wb-transport.is-compact .wb-transport-range,
.wb-transport.is-compact [data-wb-action="anim:loop"],
.wb-transport.is-compact [data-wb-action="export:gif"],
.wb-transport.is-compact .wb-transport-grip { display: none; }
.wb-transport.is-compact { padding: 5px 6px; }
.wb-transport.is-compact .wb-transport-row { gap: 4px; }
.wb-transport.is-compact .wb-transport-scrub { min-width: 40px; }
/* still too narrow for the compact row: the fps select and the pin go too */
.wb-transport.is-tight .wb-transport-fps,
.wb-transport.is-tight .wb-transport-pin { display: none; }
.wb-transport-readout { display: flex; align-items: center; gap: 4px; font-size: calc(10px * var(--wb-font-scale, 1)); white-space: nowrap; flex: 0 0 auto; }
.wb-transport-lbl { opacity: 0.55; text-transform: uppercase; letter-spacing: 0.3px; }
.wb-transport-state, .wb-transport-last, .wb-transport-time {
    opacity: 0.95; font-variant-numeric: tabular-nums;
    /* Added by shashank2104 on 08/27/2026 at 10:28 AM - inline-block + end-align so reserved
       ch width from TransportView.applyState holds as state goes 1 → 12 → 120. */
    display: inline-block;
    text-align: right;
}
.wb-transport-sep { opacity: 0.45; }
.wb-transport.is-pinned .wb-transport-grip { display: none; }
.wb-transport.is-pinned .wb-transport-pin { color: var(--wb-rail-fg-on); }
.peacock-workbench .loader-controls { display: none; }
.peacock-workbench .wf-name-container { display: none; }
.peacock-workbench .plugin-header-right { display: none; }
.peacock-workbench .plugin-logo-container { display: none; }
.peacock-workbench .measures-div { display: none !important; }

/** Added by shashank2104 on 08/19/2026 - R2026-189 - RETIRE THE LEGACY PROGRESSIVE-LOADING FOOTER.
 *
 *  `.peacock-editor-footer` comes from the peacock.v3 template and its first block is the old loading
 *  strip: a striped progress bar, a "Pause Progressive Loading" button, a "Progressive Loading.." /
 *  "View ready" label and an "Elements:" readout. Inside the workbench every one of those already has a
 *  native surface, and had for a while — the strip was simply never taken out, so a keyword load painted
 *  the same two states twice, in two different visual languages, at the bottom of the viewport:
 *
 *    legacy strip                          workbench surface
 *    ------------------------------------  ---------------------------------------------------------
 *    "Pause Progressive Loading" button     status-bar loading segment — click it to pause/resume
 *                                           (StatusBarView.onLoadingClick -> adapter.togglePauseLoading)
 *    "Progressive Loading.." label          status-bar loading text, with the live n/total
 *    "View ready" label                     the `View ready` success TOAST (already emitted alongside it)
 *    "Elements:" readout                    the same count, in the status-bar line
 *
 *  Only the FIRST child block is hidden — the footer's second block is the animation controls / anim
 *  slider on a deck with morph targets, which is real UI and stays. `height:auto` lets the footer
 *  collapse to nothing once the strip is gone (it is a hard 40px in peacock.css) so a non-animated deck
 *  gets those 40px back as viewport, and the border-top goes with it rather than leaving a stray rule
 *  floating under the canvas. CSS-only and scoped to the shell: the peacock.v3 template is shared, and
 *  standalone peacock still shows its own footer exactly as before. **/
.peacock-workbench .peacock-editor-footer > .d3view-flex-v:first-child { display: none; }
/** Selector matches peacock.css's own `.peacock-manager .peacock-wrapper-container .peacock-editor-footer`
 *  chain — that rule sets the hard `height: 40px`, and two class names were not enough to beat it. **/
.peacock-workbench .peacock-manager .peacock-wrapper-container .peacock-editor-footer {
    height: auto;
    min-height: 0;
    border-top: 0;
}
.wb-toolbar > div { display: contents; }
/** Added by shashank2104 on 09/10/2026 at 03:11 PM - logo occupies the same width as
    `.wb-rail` and is centered in that slot so it stacks on the rail icons. **/
.wb-toolbar-logo {
    width: 34px; height: 22px; margin-right: 0;
    flex: 0 0 34px; object-fit: contain;
}

.wb-dock-tabs {
    height: 26px; display: flex; align-items: center; gap: 4px; padding: 0 8px;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.wb-dock-tab {
    padding: 2px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); cursor: pointer; color: var(--wb-fg-muted);
}
.wb-dock-tab.is-active { color: var(--wb-accent); font-weight: 600; }
.wb-dock-log-inline-actions { font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-dock-log-iconbtn { color: var(--wb-fg-muted); padding: 0 2px; }
.wb-dock-log-iconbtn:hover { color: var(--wb-fg); }
.wb-dock-group-label { display: none; }
.wb-dock-group-sep { display: none; }
.wb-toolbar-group { position: relative; display: inline-flex; }
.wb-toolbar-group-btn.is-open { background: rgba(74,126,181,0.18); color: var(--wb-fg); }
.wb-toolbar-group-menu {
    display: none;
    position: absolute; top: 100%; left: 0; min-width: 180px;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding: 4px 0; margin-top: 2px; z-index: 25;
}
.wb-toolbar-group-menu.is-open { display: block; }
.wb-toolbar-group-item {
    display: block; padding: 6px 14px; font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg)!important; cursor: pointer; text-decoration: none;
    white-space: nowrap;   /* the menu shrink-wraps to its button; a long label (Materials Management) wrapped */
}
.wb-toolbar-group-item:hover { background: rgba(74,126,181,0.18); }
.wb-toolbar-group-item.is-empty { color: var(--wb-fg-muted); cursor: default; }
/* R2026-28 - active (already-open) group tab shows a FontAwesome checkmark, mirrors plugins.css li.checked:after */
.wb-toolbar-group-item.checked { position: relative; padding-right: 30px; }
.wb-toolbar-group-item.checked::after {
    content: '\f00c'; font-family: 'FontAwesome';
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-accent);
}
.wb-toolbar-group-sep {
    height: 1px; background: var(--wb-border); margin: 4px 0;
}
/** pedpro-design-loop - nested "Export" flyout submenu (File ▸ Export ▸ As Keyword …) **/
.wb-toolbar-subgroup { position: relative; }
.wb-toolbar-group-item.wb-has-submenu { display: flex; align-items: center; }
.wb-submenu-caret { margin-left: auto; font-size: calc(10px * var(--wb-font-scale, 1)); opacity: 0.6; }
.wb-toolbar-submenu {
    display: none;
    position: absolute; top: -5px; left: 100%; min-width: 210px;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    padding: 4px 0; margin-left: 0px; z-index: 26;
}
.wb-toolbar-subgroup:hover > .wb-toolbar-submenu { display: block; }
.wb-toolbar-subgroup:hover > .wb-has-submenu { background: rgba(74,126,181,0.18); }
.wb-dock-toggle { margin-left: auto; cursor: pointer; color: var(--wb-fg-muted); }
/** R2026-28 - the DockView element fills the absolute .wb-dock and flex-columns so the body
    gets a bounded height and the BOM table can actually scroll. **/
.wb-dock-inner { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.wb-dock-inner .wb-dock-tabs { flex: 0 0 auto; }
.wb-dock-body { flex: 1 1 auto; min-height: 0; height: auto; overflow: auto; padding: 6px; }
.wb-tree-pane { height: 100%; }
/** R2026-28 - the Scene section was removed from the inspector (Display/Camera -> dock scene bar,
    Background/Light/Navigation -> Preferences), so the context region is the whole panel.

    Updated by shashank2104 on 07/21/2026 - the context region is now the ONE bounded SCROLLER for the
    Selection panel: it flex-fills the panel height and scrolls its overflow. That is the "everything
    else in overflow: auto" half of the request. The "footer always visible no matter what" half is a
    convention: any inspector view marks its action row `.wb-panel-foot`, which sticks to the bottom of
    THIS scroller (position: sticky) so Accept / Cancel / Apply never scroll out of reach, however tall
    the tool body grows. Sticky (not a flex footer) means it survives each tool's internal re-render
    with zero DOM surgery — the class lives in the tool's own template string. **/
.wb-inspector-context {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 8px 10px;
}
/* The pinned footer. Bleeds to the panel edges and cancels the context padding so it reads as a real
   docked bar; a solid background + top border keep the scrolling body legible behind its bottom edge. */
.wb-inspector-context .wb-panel-foot {
    position: sticky; bottom: -8px; z-index: 6;
    margin: 10px -10px -8px; padding: 10px;
    background: var(--wb-panel); border-top: 1px solid var(--wb-border);
}
/* Tool bodies (mesh-edit views etc.) nest their own view element between the context and the footer;
   it must not introduce a second scroll context or the sticky footer would pin to the inner box (which
   is not scrolling) instead of the context. Keep it a plain flow block. */
.wb-inspector-context > * { min-height: 0; }
/** R2026-28 - the Selection panel + its splitter collapse when there is nothing to inspect
    (InspectorView._setPanelVisible). !important because ShellView.setMode('3d') re-shows the whole
    workspace with an inline display, and an empty panel must stay collapsed through that. **/
.wb-inspector.is-hidden, .wb-splitter.is-hidden { display: none !important; }
/** Added by shashank2104 on 07/23/2026 - R2026-33 - a takeover mode (Mesh / Submit / Extract / Summary)
    hides the 3D workspace with THIS class instead of jQuery .hide()/.show(), which stamped an inline
    `display: block` onto `.wb-inspector` on the way back and silently broke the flex chain that pins
    every tool's `.wb-panel-foot` (see ShellView.setMode). Layout stays declared here, in the sheet. **/
.wb-body > .is-mode-hidden { display: none !important; }
.wb-inspector-group { margin-bottom: 10px; }
.wb-inspector-label {
    display: block; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px;
}
.wb-btn-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.wb-btn.wb-seg {
    flex: 1; min-width: 48px; padding: 4px 6px; font-size: calc(11px * var(--wb-font-scale, 1));
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); cursor: pointer;
}
.wb-btn.wb-seg:hover { background: var(--wb-row-hover); }
.wb-btn.wb-seg.is-active { background: var(--wb-accent); color: var(--wb-accent-fg); border-color: var(--wb-accent); }
.wb-dock-log, .wb-dock-measurements, .wb-dock-camera { padding: 6px 8px; font-size: calc(12px * var(--wb-font-scale, 1)); overflow: auto; height: 100%; }
.wb-dock-log-row { display: flex; gap: 8px; padding: 2px 0; }
.wb-dock-log-level { color: var(--wb-fg-muted); text-transform: uppercase; font-size: calc(10px * var(--wb-font-scale, 1)); min-width: 44px; }
.wb-dock-meas-row, .wb-dock-cam-row {
    display: flex; justify-content: space-between;
    padding: 3px 0; border-bottom: 1px solid var(--wb-border);
}
.wb-view-controls {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px; background: var(--wb-rail-bg); color: #fff;
    border-radius: 10px; box-shadow: 0 3px 12px rgba(0,0,0,0.28); z-index: 20;
}
.wb-vc-grip { cursor: grab; opacity: 0.5; padding: 0 2px; }
.wb-view-controls.is-pinned .wb-vc-grip { display: none; }
.wb-vc-btn {
    background: transparent; border: none; color: #fff; cursor: pointer;
    font-size: calc(12px * var(--wb-font-scale, 1)); padding: 3px 6px; border-radius: 4px;
    display: inline-flex; align-items: center; gap: 4px;
}
.wb-vc-btn:hover { background: rgba(255,255,255,0.1); }
.wb-vc-btn span { font-size: calc(10px * var(--wb-font-scale, 1)); opacity: 0.85; }
.wb-vc-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.15); margin: 0 4px; }

/* R2026-76 — Pinned Views manager (Selection panel) */
.peacock-workbench .wb-pv { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.peacock-workbench .wb-pv-head { display: flex; flex-direction: column; gap: 3px; }
.peacock-workbench .wb-pv-titlerow { display: flex; align-items: center; justify-content: space-between; }
.peacock-workbench .wb-pv-close {
    width: 26px; height: 26px; padding: 0; border: none; background: transparent; cursor: pointer;
    color: var(--wb-fg-muted); border-radius: var(--wb-radius-sm, 6px);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--wb-t, 0.15s), color var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-close:hover { background: var(--wb-hover); color: var(--wb-fg); }
.peacock-workbench .wb-pv-tools { display: flex; align-items: stretch; gap: 6px; }
.peacock-workbench .wb-pv-tool {
    flex: 0 0 auto; height: 30px; padding: 0 10px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-panel-2); color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1));
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--wb-t, 0.15s), border-color var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-tool:hover { background: var(--wb-row-hover); border-color: var(--wb-border-strong); }
.peacock-workbench .wb-pv-tool[disabled] { opacity: 0.5; cursor: not-allowed; }
.peacock-workbench .wb-pv-dropzone {
    flex: 1 1 auto; min-height: 30px; padding: 6px 10px; cursor: copy;
    border: 1px dashed var(--wb-border-strong); border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-panel-2); color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1));
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background var(--wb-t, 0.15s), border-color var(--wb-t, 0.15s), color var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-dropzone.dz-drag-hover,
.peacock-workbench .wb-pv-dropzone:hover { background: var(--wb-accent-soft); border-color: var(--wb-accent); color: var(--wb-accent); }
/** Added by shashank2104 on 08/03/2026 - R2026-76 - import provenance note (see PV._importNoteFor). **/
.peacock-workbench .wb-pv-note {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 8px 10px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.45;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-panel-2); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-pv-note i { margin-top: 1px; flex: 0 0 auto; }
.peacock-workbench .wb-pv-note.is-warn {
    color: var(--wb-warn, #b7791f);
    border-color: var(--wb-warn, #b7791f);
    background: color-mix(in srgb, var(--wb-warn, #b7791f) 12%, var(--wb-panel));
}
.peacock-workbench .wb-pv-title { font-size: calc(14px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); display: flex; align-items: center; gap: 7px; }
.peacock-workbench .wb-pv-sub { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.4; }
.peacock-workbench .wb-pv-capture { display: flex; gap: 6px; }
.peacock-workbench .wb-pv-name, .peacock-workbench .wb-pv-editname {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-panel-2); color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1));
    transition: border-color var(--wb-t, 0.15s), box-shadow var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-name:focus, .peacock-workbench .wb-pv-editname:focus {
    outline: none; border-color: var(--wb-accent);
    box-shadow: 0 0 0 3px var(--wb-accent-soft);
}
.peacock-workbench .wb-pv-store {
    flex: 0 0 auto; height: 32px; padding: 0 12px; cursor: pointer; white-space: nowrap;
    border: none; border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-accent); color: var(--wb-accent-fg, #fff); font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--wb-t, 0.15s), transform var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-store:hover { filter: brightness(1.08); }
.peacock-workbench .wb-pv-store:active { transform: scale(0.97); }
.peacock-workbench .wb-pv-list { display: flex; flex-direction: column; gap: 4px; }
.peacock-workbench .wb-pv-empty {
    font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.5;
    padding: 14px 12px; border: 1px dashed var(--wb-border); border-radius: var(--wb-radius, 8px);
    background: var(--wb-panel-2); text-align: center;
}
.peacock-workbench .wb-pv-row {
    display: flex; align-items: center; gap: 4px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-panel-2); padding: 3px; transition: border-color var(--wb-t, 0.15s), background var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-row:hover { border-color: var(--wb-border-strong); background: var(--wb-row-hover); }
.peacock-workbench .wb-pv-row.is-editing { border-color: var(--wb-accent); }
.peacock-workbench .wb-pv-go {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: transparent; border: none; cursor: pointer; color: var(--wb-fg);
    font-size: calc(12px * var(--wb-font-scale, 1)); padding: 5px 6px; border-radius: var(--wb-radius-sm, 6px); text-align: left;
}
.peacock-workbench .wb-pv-go:hover { background: var(--wb-hover); }
.peacock-workbench .wb-pv-idx {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    background: var(--wb-accent-soft); color: var(--wb-accent);
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.peacock-workbench .wb-pv-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-pv-rename, .peacock-workbench .wb-pv-del {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; cursor: pointer;
    background: transparent; border: none; color: var(--wb-fg-muted); border-radius: var(--wb-radius-sm, 6px);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--wb-t, 0.15s), color var(--wb-t, 0.15s);
}
.peacock-workbench .wb-pv-rename:hover { background: var(--wb-hover); color: var(--wb-fg); }
.peacock-workbench .wb-pv-rename.is-ok { color: var(--wb-success); }
.peacock-workbench .wb-pv-del:hover { background: var(--wb-hover); color: var(--wb-danger); }
.peacock-contextmenu {
    margin: 0; padding: 6px 0;
    background: var(--wb-panel, #2e2e2e);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--wb-fg, #d6d6d6);
    border: 1px solid var(--wb-border, #161616);
    border-radius: 8px;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.40),
        0 2px 6px rgba(0,0,0,0.18);
    min-width: 240px; max-width: 360px; font-size: calc(12.5px * var(--wb-font-scale, 1));
    user-select: none;
}
.peacock-contextmenu-target {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--wb-border);
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-contextmenu-target-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.peacock-contextmenu-target-kind { color: var(--wb-fg-muted); }
.peacock-contextmenu-target-name { color: var(--wb-fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-contextmenu-section-title {
    padding: 4px 14px 2px;
    font-size: calc(10px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--wb-fg-muted); font-weight: 600;
}
.peacock-contextmenu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    color: var(--wb-fg); cursor: pointer; position: relative;
}
.peacock-contextmenu-item:hover { background: var(--wb-row-hover, rgba(74,144,226,0.15)); color: var(--wb-fg, #fff); }
.peacock-contextmenu-item.is-danger:hover { background: rgba(232,93,117,0.22); color: var(--wb-fg, #fff); }
.peacock-contextmenu-item.is-disabled { color: var(--wb-fg-muted); cursor: not-allowed; }
.peacock-contextmenu-item.is-disabled:hover { background: transparent; }
.peacock-contextmenu-icon {
    width: 14px; text-align: center; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); flex-shrink: 0;
}
.peacock-contextmenu-item:hover .peacock-contextmenu-icon { color: var(--wb-fg); }
.peacock-contextmenu-label { flex: 1; white-space: nowrap; }
.peacock-contextmenu-shortcut {
    font-family: ui-monospace, Menlo, monospace; font-size: calc(10.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); letter-spacing: 0.5px;
}
.peacock-contextmenu-chev { color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); margin-left: auto; }
.peacock-contextmenu-divider {
    height: 1px; background: var(--wb-border); margin: 4px 0;
}

.peacock-contextmenu-item.has-submenu { position: relative; }
.peacock-contextmenu-item.has-submenu:hover > .peacock-contextmenu-submenu,
.peacock-contextmenu-item.has-submenu.is-open > .peacock-contextmenu-submenu { display: block; }
.peacock-contextmenu-submenu {
    display: none;
    position: absolute;
    top: -6px; left: 100%;
    min-width: 300px;
    background: var(--wb-panel, #2e2e2e);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--wb-fg, #d6d6d6);
    border: 1px solid var(--wb-border, #161616);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.40);
}

.peacock-contextmenu-toggle-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px; cursor: pointer;
}
.peacock-contextmenu-toggle-row:hover { background: var(--wb-row-hover, rgba(74,144,226,0.15)); }
.peacock-contextmenu-toggle-row.is-master { background: var(--wb-panel-2, rgba(74,144,226,0.06)); }
.peacock-contextmenu-toggle-row .peacock-contextmenu-icon { color: var(--wb-accent, #4a90e2); }
.peacock-contextmenu-toggle-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.peacock-contextmenu-toggle-name { color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1)); }
.peacock-contextmenu-toggle-hint { color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1)); margin-top: 1px; }
.peacock-contextmenu-toggle {
    display: inline-block;
    width: 32px; height: 17px;
    background: var(--wb-border, #3a3e46);
    border-radius: 8.5px;
    position: relative; flex-shrink: 0; transition: background .15s;
    cursor: pointer;
}
.peacock-contextmenu-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px;
    background: var(--wb-panel, #dfe2e7);
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.peacock-contextmenu-toggle.is-on { background: var(--wb-accent, #4a90e2); }
.peacock-contextmenu-toggle.is-on::after { transform: translateX(15px); }
.peacock-contextmenu-suboption {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px 8px 38px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-contextmenu-suboption-label { white-space: nowrap; }
.peacock-contextmenu-seg {
    display: inline-flex;
    background: var(--wb-panel-2, #1d2025);
    border: 1px solid var(--wb-border, #3a3e46);
    border-radius: 4px;
    overflow: hidden;
}
.peacock-contextmenu-seg button {
    background: transparent; border: none;
    color: var(--wb-fg-muted, #8c8c8c);
    padding: 3px 9px; font-size: calc(11px * var(--wb-font-scale, 1)); cursor: pointer;
    border-right: 1px solid var(--wb-border, #3a3e46);
}
.peacock-contextmenu-seg button:last-child { border-right: none; }
.peacock-contextmenu-seg button.is-active { background: var(--wb-accent, #4a90e2); color: white; }
.peacock-contextmenu-seg button:hover:not(.is-active) { background: var(--wb-panel-2, #33373e); color: var(--wb-fg); }

.d3view-context-menu-container.peacock-main-ctxm {
    background: var(--wb-panel, #2e2e2e);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--wb-fg, #d6d6d6);
    border: 1px solid var(--wb-border, #161616);
    border-radius: 8px;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.40),
        0 2px 6px rgba(0,0,0,0.18);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); padding: 0;
    min-width: 240px; max-width: 360px;
}
.d3view-context-menu-container.peacock-main-ctxm .pl-vertical-tabs-container {
    display: flex; background: transparent;
}
.d3view-context-menu-container.peacock-main-ctxm .div-groups {
    background: var(--wb-panel-2, rgba(0,0,0,0.10));
    border-right: 1px solid var(--wb-border) !important;
    padding: 6px 0; margin: 0;
}
.d3view-context-menu-container.peacock-main-ctxm .div-groups li.list-group-item {
    border: 0; background: transparent; padding: 8px 10px;
    color: var(--wb-fg-muted); border-radius: 6px; margin: 2px 6px;
}
.d3view-context-menu-container.peacock-main-ctxm .div-groups li.list-group-item.active,
.d3view-context-menu-container.peacock-main-ctxm .div-groups li.list-group-item:hover {
    background: var(--wb-row-hover, rgba(74,144,226,0.18)); color: var(--wb-fg);
}
.d3view-context-menu-container.peacock-main-ctxm .div-groups li.list-group-item a {
    color: inherit; text-decoration: none; display: flex; flex-direction: column;
    align-items: center; gap: 4px;
}
.d3view-context-menu-container.peacock-main-ctxm .div-groups li.list-group-item .pl-tab-item-label {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); opacity: 0.85;
}
.d3view-context-menu-container.peacock-main-ctxm .tab-content {
    background: transparent; padding: 6px 0 !important;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu {
    list-style: none; margin: 0; padding: 0; background: transparent;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li {
    list-style: none; margin: 0; padding: 0; background: transparent;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li > a.context-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px; border-radius: 0;
    color: var(--wb-fg); text-decoration: none; cursor: pointer;
    background: transparent;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li > a.context-menu-item:hover {
    background: var(--wb-row-hover, rgba(74,144,226,0.15)); color: var(--wb-fg, #fff);
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li > a.context-menu-item .cmenu-icon {
    width: 14px; text-align: center; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); flex-shrink: 0;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li > a.context-menu-item:hover .cmenu-icon {
    color: var(--wb-fg);
}
/** Added by shashank2104 on 09/15/2026 - R0-4177 - a NESTED submenu row went white-on-light on hover:
 *  plugins.css `.dropdown-menu > li > a:hover` carries `color: #fff !important` (its blue gradient is
 *  already out-ranked by the rule above, the colour is not). Same fix for every flyout of this menu. **/
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li.dropdown-submenu > ul.dropdown-menu > li > a.context-menu-item:hover {
    color: var(--wb-fg) !important;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li.divider {
    height: 1px; background: var(--wb-border); margin: 4px 0; padding: 0;
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li.active > a.context-menu-item {
    background: var(--wb-accent, rgba(74,144,226,0.25)); color: var(--wb-accent-fg, var(--wb-fg, #fff));
}
.d3view-context-menu-container.peacock-main-ctxm ul.d3view-context-menu li.dropdown-submenu > a.context-menu-item::after {
    content: '\f0da'; font-family: 'FontAwesome'; margin-left: auto;
    color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1));
}

.wb-view-controls.is-pinned .wb-vc-pin { color: var(--wb-rail-fg-on); }

/* Lifted above the SPA header (z:10) and any other d3VIEW chrome so the modal is fully visible
 * when Peacock runs inside the SPA shell. */
.wb-prefs-root { position: fixed; inset: 0; z-index: 2147483600; display: none; }
.wb-prefs-root.is-open { display: block; }
/* `.wb-prefs-root` and `.wb-prefs-backdrop` are Model Info's (`model-info.js`, `wb-model-info-tpl.tpl`),
 * a centred modal. Preferences no longer uses them (R0-4177): it is a left-rail pane, see
 * `.wb-prefs-pane` below. */
.wb-prefs-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
}
.wb-prefs-panel {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 520px; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    overflow: hidden;
}
/* Updated by shashank2104 on 09/15/2026 - R0-4177 - PREFERENCES IS A LEFT-RAIL PANE. The rail mounts
 * `.wb-prefs-pane` in `.wb-leftpane` like Logs, so it is scoped to the workbench container: nothing
 * is fixed to the body and no z-index lift is needed. The pane is a flex column that clips and the
 * panel fills it; `.wb-prefs-body` stays the one scroller. The leftpane is held at 440px while this
 * pane is mounted (the rows are label + a 150px control, unreadable at the 320px default). */
.wb-leftpane[data-wb-pane="preferences"] { min-width: 440px; }
.wb-leftpane .wb-prefs-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.wb-prefs-panel--pane {
    position: static; transform: none;
    flex: 1 1 auto; min-height: 0; height: auto; max-height: none;
    width: auto; max-width: none;
    border: none; border-radius: 0; box-shadow: none;
}
.wb-leftpane .wb-prefs-head { padding-right: 36px; }   /* the rail's close button corner */
.wb-prefs-head h2 > i { font-size: calc(12px * var(--wb-font-scale, 1)); opacity: 0.8; margin-right: 2px; }

.wb-sync-inline { padding: 4px 0 8px; }
.wb-sync-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--wb-border);
}
.wb-sync-row:first-child { border-top: none; }
.wb-sync-row--master {
    background: rgba(74,144,226,0.06);
}
.wb-sync-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wb-sync-name { color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 500; }
.wb-sync-hint { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); margin-top: 2px; line-height: 1.35; }
.wb-sync-stale { color: var(--wb-fg-muted); font-style: italic; font-weight: 400; font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-sync-toggle { flex-shrink: 0; margin-top: 2px; }
.wb-prefs-panel--pane .wb-prefs-head { padding: 10px 16px; }
.wb-prefs-panel--pane .wb-prefs-section { padding: 4px 16px 14px; }
.wb-prefs-panel--pane .wb-prefs-foot { padding: 12px 16px; }
.wb-prefs-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border);
}
/* Added by shashank2104 on 08/17/2026 - R2026-173 - `color` is LOAD-BEARING here, it is not
 * redundant with the panel's own `color: var(--wb-fg)`. The global `d3view.min.css` carries a bare
 * `h1, h2, h3, h4, h5 { color: #000 }`, and a rule that TARGETS the element always beats a colour the
 * element would have INHERITED, however specific the ancestor's rule is - so the drawer title rendered
 * black on the dark panel. Naming the element back (`.wb-prefs-head h2`, 0-1-1 vs 0-0-1) is enough; no
 * !important needed. Same class of global-stylesheet bleed as the `label { display:block !important }`
 * one that collapsed the explode toggles. */
.wb-prefs-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); }
.wb-prefs-close {
    background: transparent; border: 0; color: var(--wb-fg-muted);
    cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px;
}
.wb-prefs-close:hover { color: var(--wb-fg); }

/* Search + section tabs (R2026-28) - the panel carries ~30 options, so it is filtered
 * rather than scrolled. Both strips are sticky siblings of the scrolling body. */
.wb-prefs-search-row {
    flex: 0 0 auto; position: relative;
    padding: 10px 16px 6px;
}
.wb-prefs-search-icon {
    position: absolute; left: 26px; top: 50%; transform: translateY(-40%);
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); pointer-events: none;
}
/* Specificity bumped past the global d3VIEW `input` padding rule, which otherwise
 * collapses the padding and slides the placeholder under the search icon. */
.wb-prefs-panel input.wb-prefs-search {
    width: 100%; box-sizing: border-box;
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 6px;
    padding: 6px 28px 6px 30px; font-size: calc(12.5px * var(--wb-font-scale, 1));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-prefs-search:focus {
    outline: none; border-color: var(--wb-accent);
    box-shadow: 0 0 0 2px rgba(74,144,226,0.18);
}
.wb-prefs-search-clear {
    position: absolute; right: 22px; top: 50%; transform: translateY(-40%);
    background: transparent; border: 0; padding: 2px 4px; cursor: pointer;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); display: none;
}
.wb-prefs-search-clear.is-visible { display: block; }
.wb-prefs-search-clear:hover { color: var(--wb-fg); }

.wb-prefs-tabs {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px 16px 10px; border-bottom: 1px solid var(--wb-border);
}
.wb-prefs-tab {
    background: transparent; color: var(--wb-fg-muted);
    border: 1px solid transparent; border-radius: 999px;
    padding: 3px 10px; font-size: calc(11.5px * var(--wb-font-scale, 1)); cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wb-prefs-tab:hover { color: var(--wb-fg); background: var(--wb-panel-2); }
.wb-prefs-tab.is-active {
    color: #fff; background: var(--wb-accent); border-color: var(--wb-accent);
}

.wb-prefs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0 4px; }
.wb-prefs-section { padding: 4px 18px 14px; }
.wb-prefs-section.is-hidden { display: none; }
.wb-prefs-section-title {
    font-size: calc(11px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--wb-fg-muted); margin: 6px 0 4px;
}
.wb-prefs-group-title {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    margin: 10px 0 2px; opacity: 0.75;
}
.wb-prefs-group-title.is-hidden { display: none; }

/* Top-aligned: rows carry a two-line label + hint, and the control must not drift
 * to the middle of the block when the longer detail is expanded. */
.wb-prefs-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--wb-border);
}
.wb-prefs-item:last-child { border-bottom: none; }
.wb-prefs-item.is-hidden { display: none; }
.wb-prefs-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wb-prefs-name {
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1)); line-height: 1.35;
    display: flex; align-items: center; gap: 5px;
}
.wb-prefs-info {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1;
    opacity: 0.55; transition: opacity 0.15s ease, color 0.15s ease;
}
.wb-prefs-info:hover { opacity: 1; color: var(--wb-accent); }
.wb-prefs-item.is-hint-open .wb-prefs-info { opacity: 1; color: var(--wb-accent); }
/* The one-line hint is ALWAYS visible - it is the whole point of the row. Only the longer
 * technical `detail` sits behind the "?" (and auto-opens on a search hit). */
.wb-prefs-hint {
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.45;
    padding-right: 6px;
}
.wb-prefs-detail {
    display: none;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5;
    margin-top: 3px; padding: 6px 8px; padding-right: 8px;
    background: var(--wb-panel-2); border-left: 2px solid var(--wb-accent);
    border-radius: 0 4px 4px 0;
}
.wb-prefs-item.is-hint-open .wb-prefs-detail { display: block; }

.wb-prefs-control { flex: 0 0 auto; display: flex; align-items: center; }
.wb-prefs-control input, .wb-prefs-control select {
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 5px;
    padding: 4px 6px; font-size: calc(12px * var(--wb-font-scale, 1)); width: 150px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-prefs-control input:focus, .wb-prefs-control select:focus {
    outline: none; border-color: var(--wb-accent);
    box-shadow: 0 0 0 2px rgba(74,144,226,0.18);
}
.wb-prefs-control input[type=color] { width: 46px; padding: 2px; cursor: pointer; }
.wb-prefs-control input[type=number] { width: 84px; }

/* Toggles read as switches instead of bare OS checkboxes lost at the right edge. */
.wb-prefs-switch { position: relative; display: inline-block; width: 34px; height: 18px; margin: 0; }
.wb-prefs-switch input {
    position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
    cursor: pointer; z-index: 1;
}
.wb-prefs-control .wb-prefs-switch input { width: 100%; min-width: 0; padding: 0; border: 0; }
.wb-prefs-slider {
    position: absolute; inset: 0; border-radius: 999px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wb-prefs-slider:before {
    content: ''; position: absolute; left: 2px; top: 50%;
    width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
    background: var(--wb-fg-muted);
    transition: transform 0.15s ease, background 0.15s ease;
}
.wb-prefs-switch input:checked + .wb-prefs-slider {
    background: var(--wb-accent); border-color: var(--wb-accent);
}
.wb-prefs-switch input:checked + .wb-prefs-slider:before {
    background: #fff; transform: translateX(16px);
}

.wb-prefs-empty {
    display: none;
    padding: 24px 18px; text-align: center;
    color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-prefs-empty.is-visible { display: block; }
.wb-prefs-foot {
    flex: 0 0 auto;
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid var(--wb-border);
    background: var(--wb-panel);
}
.wb-prefs-apply-btn, .wb-prefs-revert-btn, .wb-prefs-close-btn { padding: 5px 14px; font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-prefs-apply-btn.is-enabled {
    background: var(--wb-accent); color: #fff; border-color: var(--wb-accent);
}
/** Added by shashank2104 on 08/17/2026 - R2026-174 - Close is a QUIET button. Every `.wb-btn` in
 *  this shell is an accent-filled pill by default, which made the new Close the loudest thing in
 *  the row and put two solid blue buttons side by side the moment Apply enables. Dismissing is not
 *  the action this panel is for, so it drops to a bordered neutral and Apply keeps the accent.
 *  ⚠ Two classes deep on purpose: the generic `.wb-btn` pill rule is declared LATER in this sheet,
 *  so a single-class rule here loses to it on source order alone (the same trap
 *  `.wb-prefs-apply-btn.is-enabled` sidesteps just above). **/
.wb-prefs-foot .wb-prefs-close-btn {
    background: var(--wb-panel);
    color: var(--wb-fg);
    border: 1px solid var(--wb-border);
}
.wb-prefs-foot .wb-prefs-close-btn:hover {
    background: var(--wb-row-hover);
    border-color: var(--wb-border-strong, var(--wb-border));
    filter: none;
}
.wb-prefs-apply-btn:disabled, .wb-prefs-revert-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.wb-prefs-dirty-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: transparent; margin-left: 6px; vertical-align: middle;
}
.wb-prefs-dirty-dot.is-dirty { background: var(--wb-accent); }
.wb-palette-root { position: fixed; inset: 0; z-index: 32; display: none; }
.wb-palette-root.is-open { display: block; }
.wb-palette-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.wb-palette {
    position: absolute; top: 14vh; left: 50%; transform: translateX(-50%);
    width: 460px; background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6); overflow: hidden; font-size: calc(13px * var(--wb-font-scale, 1));
}
.wb-palette-search {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid var(--wb-border);
}
.wb-palette-search i { color: var(--wb-fg-muted); }
.wb-palette-input {
    flex: 1; background: transparent; border: 0; outline: none;
    color: var(--wb-fg); font-size: calc(13px * var(--wb-font-scale, 1)); font-family: inherit;
}
.wb-palette-count { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.wb-palette-list { max-height: 280px; overflow: auto; padding: 6px; }
.wb-palette-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 6px; cursor: default;
}
.wb-palette-row.is-active { background: rgba(74,126,181,0.22); }
.wb-palette-row:hover { background: rgba(74,126,181,0.14); }
.wb-palette-icon { width: 18px; color: var(--wb-fg-muted); }
.wb-palette-label { flex: 1; }
.wb-palette-hint {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel-2); padding: 1px 7px; border-radius: 999px;
    font-family: ui-monospace, Menlo, monospace;
}
.wb-palette-foot {
    display: flex; gap: 14px; padding: 8px 14px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    border-top: 1px solid var(--wb-border);
}
.wb-palette-foot kbd {
    background: var(--wb-panel-2); padding: 1px 6px; border-radius: 4px;
    font-family: ui-monospace, Menlo, monospace; font-size: calc(10.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg); border: 1px solid var(--wb-border);
}
/** Updated by shashank2104 on 08/20/2026 at 12:57 PM - R2026-189 - stack is only a layout host.
 *
 *  Every `.wb-toast` used to be `position:absolute` at the same top-centre point, so two toasts at once
 *  sat exactly on top of each other and the older one was simply invisible. That was survivable while
 *  every toast lasted 3 seconds and collisions were brief. It stopped being survivable when progressive
 *  loading became a STICKY toast that is up for the whole load: any toast fired mid-load (and a keyword
 *  load fires several) landed on it and hid the thing the user was watching — measured on Caravan, both
 *  pills at top:98 with the loading one completely covered.
 *
 *  The positioning moved to a flex column so N toasts can coexist. JS already keeps one sticky slot
 *  plus one transient pill. A later `max-height` + `overflow:hidden` + 520px `max-width` cap made
 *  this host a 520x88 clip box: the pills' box-shadows filled that rectangle and read as a white
 *  card behind Progressive loading / Projection. Width follows the pills; overflow stays visible. **/
.wb-toast-stack {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    z-index: 28; pointer-events: none;
    width: max-content;
    max-width: min(520px, calc(100% - 24px));
    background: transparent;
    overflow: visible;
}
.wb-toast {
    background: rgba(20,20,25,0.92); color: #fff;
    padding: 8px 14px; border-radius: 8px; font-size: calc(12px * var(--wb-font-scale, 1));
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: opacity 0.4s; pointer-events: none;
}
.wb-toast.is-fading { opacity: 0; }
.wb-toast.wb-toast-info    { background: rgba(20,20,25,0.92); }
.wb-toast.wb-toast-success { background: rgba(46,125,50,0.95); }
.wb-toast.wb-toast-warning { background: rgba(180,120,20,0.95); }
.wb-toast.wb-toast-error   { background: rgba(180,40,40,0.95); }
/* R0-4188 - a toast with buttons (a finished sweep offering to open PedPro) takes the pointer */
.wb-toast.has-actions { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.wb-toast-actions { display: inline-flex; align-items: center; gap: 6px; }
.wb-toast-act {
    border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.10); color: #fff;
    border-radius: 6px; padding: 2px 10px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    cursor: pointer; transition: background var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
}
.wb-toast-act:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); }
.wb-toast-act.is-primary { background: #fff; color: #1f2937; border-color: #fff; }
.wb-toast-act.is-primary:hover { background: #e5e7eb; }
.wb-status-loading {
    background: rgba(74,126,181,0.18);
    padding: 0 8px; border-radius: 4px;
    color: var(--wb-accent); font-weight: 500;
}
.wb-status-loading:hover { background: rgba(74,126,181,0.30); }
.wb-status-loading.is-paused { color: var(--wb-fg-muted); background: rgba(120,120,120,0.18); }
.wb-status-loading .fa { margin-right: 4px; }
.wb-tree-row.wb-tree-item { padding-left: 24px; }
.wb-tree-row.is-selected { background: var(--wb-row-hover); box-shadow: inset 2px 0 0 var(--wb-accent); }
.wb-tree-chevron.is-empty { visibility: hidden; }
.wb-tree-swatch {
    width: 10px; height: 10px; border-radius: 2px;
    display: inline-block; border: 1px solid var(--wb-border);
    flex: 0 0 auto;
}
.wb-mesh-pane { padding: 6px 8px; }
.wb-mesh-dropzone {
    border: 1px dashed var(--wb-divider, rgba(255,255,255,0.18));
    border-radius: 4px; padding: 16px 8px; text-align: center;
    color: var(--wb-fg-muted); cursor: pointer; margin: 6px 0;
}
.wb-mesh-dropzone.is-hover { border-color: var(--wb-accent); color: var(--wb-fg); }
.wb-mesh-row { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-mesh-row label { color: var(--wb-fg-muted); }
.wb-mesh-row input { padding: 4px 6px; font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-mesh-controls { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wb-divider, rgba(255,255,255,0.06)); }
.wb-mesh-controls label { display: flex; flex-direction: column; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); gap: 3px; }
.wb-mesh-controls input, .wb-mesh-controls select { padding: 4px 6px; font-size: calc(11px * var(--wb-font-scale, 1)); background: var(--wb-rail-bg, #1e1e1e); color: var(--wb-fg); border: 1px solid var(--wb-divider, rgba(255,255,255,0.1)); border-radius: 3px; }
.wb-mesh-formats { display: flex; gap: 4px; }
.wb-btn-primary { background: var(--wb-accent); color: #fff; padding: 6px 10px; border: none; border-radius: 3px; cursor: pointer; }
.wb-btn-primary[disabled] { opacity: 0.55; cursor: default; }
.wb-fringe-list { list-style: none; padding: 4px 0; margin: 0; }
.wb-fringe-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.wb-fringe-row:hover { background: var(--wb-row-hover); }
.wb-fringe-row.is-active { background: var(--wb-row-hover); box-shadow: inset 2px 0 0 var(--wb-accent); color: var(--wb-accent); }
.wb-fringe-row i { width: 12px; color: var(--wb-fg-muted); }
.wb-fringe-row.is-active i { color: var(--wb-accent); }
.wb-examples { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--wb-divider, rgba(255,255,255,0.06)); }
.wb-examples-header { color: var(--wb-fg-muted); }
.wb-examples-header:hover { color: var(--wb-fg); }
.wb-example-row .wb-tree-label { font-style: italic; opacity: 0.85; }
.wb-example-row:hover .wb-tree-label { opacity: 1; }
.wb-panel-title { display: flex; align-items: center; }
.wb-panel-title > span { flex: 1; }
.wb-fringe-cog {
    cursor: pointer; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1));
    padding: 2px 6px; border-radius: 3px;
}
.wb-fringe-cog:hover { color: var(--wb-fg); background: var(--wb-row-hover); }
.wb-fringe-cog.is-active { color: var(--wb-accent); }
.wb-fringe-settings {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 10px; background: var(--wb-row-hover);
    border-bottom: 1px solid var(--wb-divider, rgba(255,255,255,0.06));
}
.wb-fringe-settings label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.wb-fringe-settings input, .wb-fringe-settings select {
    padding: 4px 6px; font-size: calc(11px * var(--wb-font-scale, 1));
    background: var(--wb-rail-bg, #1e1e1e); color: var(--wb-fg);
    border: 1px solid var(--wb-divider, rgba(255,255,255,0.1)); border-radius: 3px;
}
.wb-fringe-settings input[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Fringe scale (color legend) injected into the editor's canvas container
   by EditorAdapter._ensureFringeLegendContainer. Sits in the top-right of
   the 3D viewport so it doesn't compete with toolbar/inspector chrome. */
.wb-fringe-legend-host {
    position: absolute;
    top: 12px; right: 12px;
    width: 200px;
    height: 50%;
    z-index: 5;
    pointer-events: none;
}
.wb-fringe-legend-host .fb-handle,
.wb-fringe-legend-host .fb-handle-rect { pointer-events: all; }
.wb-fringe-legend-host .fringe-legend-container {
    pointer-events: auto;
    background: transparent;
    border: none;
    padding: 0;
    color: #1a1a1a;
    box-shadow: none;
    width: 100%;
    height: 100%;
}
.wb-fringe-legend-host .fringe-legend {
    display: block;
    width: 200px;
    height: 100%;
    overflow: visible;
}
.wb-fringe-legend-host .fringe-legend text {
    fill: currentColor;
}
.wb-fringe-legend-host .fringe-bar-fill {
    color: currentColor;
}

.peacock-dark .wb-fringe-legend-host .fringe-legend-container { color: #f0f0f0; }
.peacock-dark .wb-fringe-legend-host .fb-handle-rect { fill: #ddd; stroke: #1a1a1a; }

/* Floating "Removed parts" overlay is redundant inside the workbench — the
   information now goes to the Log dock via peacocks.tpl's change:removed_parts hook. */
.peacock-workbench .removed-parts-info-div,
.peacock-workbench .deleted-elements-info-div { display: none !important; }

/* Load Model card shown in the Models pane when no model is loaded. */
.wb-load-model-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 12px 12px 12px;
    margin: 10px 8px;
    background: var(--wb-panel);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius);
}
.wb-load-model-title {
    font-weight: 700; font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg); text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 4px;
}
.wb-load-model-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--wb-panel-2);
    color: var(--wb-fg);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    font-size: calc(12px * var(--wb-font-scale, 1)); cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wb-load-model-btn:hover {
    background: var(--wb-row-hover);
    border-color: var(--wb-accent);
    color: var(--wb-accent);
}
.wb-load-model-btn .fa {
    width: 16px; text-align: center;
    color: var(--wb-fg-muted);
}
.wb-load-model-btn:hover .fa { color: var(--wb-accent); }
.wb-load-model-label { flex: 1; }

/* Part-color category legend — sits in the top-right of the canvas viewport
   under the fringe legend (if any). Light card on dark/transparent background. */
.wb-part-color-legend {
    position: absolute; top: 8px; right: 8px; z-index: 6;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 6px;
    padding: 6px 8px;
    color: #1d2733;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 200px; max-height: 360px; overflow-y: auto;
    pointer-events: auto;
    font-size: calc(11px * var(--wb-font-scale, 1));
}
/* When BOTH the fringe legend and part-color legend are present, stack them. */
.wb-fringe-legend-host + .wb-part-color-legend,
.wb-part-color-legend + .wb-fringe-legend-host { top: 380px; }
.wb-part-color-legend-title {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    font-size: calc(10px * var(--wb-font-scale, 1)); color: #1d2733;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding-bottom: 4px; margin-bottom: 6px;
}
.wb-part-color-legend-list { list-style: none; padding: 0; margin: 0; }
.wb-part-color-legend-list li {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 0; line-height: 1.3;
}
.wb-part-color-legend-list .sw {
    width: 12px; height: 12px; border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.12); flex: 0 0 auto;
}
.wb-part-color-legend-list .lb {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: #1d2733;
}

/* "Color by" mode picker at the top of the Fringe inspector. Mirrors the
   wb-fringe-settings styling for visual consistency. */
.wb-color-by {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: var(--wb-row-hover);
    border-bottom: 1px solid var(--wb-divider, rgba(255,255,255,0.06));
}
.wb-color-by-label {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--wb-fg-muted);
    flex: 0 0 auto;
}
.wb-color-by-select {
    flex: 1; padding: 4px 6px; font-size: calc(11px * var(--wb-font-scale, 1));
    background: var(--wb-rail-bg, #1e1e1e); color: var(--wb-fg);
    border: 1px solid var(--wb-divider, rgba(255,255,255,0.1));
    border-radius: 3px; outline: none;
}

/* === Open Model modal (File / Open) ============================== */
.wb-open-modal-host { position: fixed; inset: 0; z-index: 40; }
.wb-open-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wb-open-modal {
    position: absolute; top: 6vh; left: 50%; transform: translateX(-50%);
    /* Updated by shashank2104 on 08/11/2026 at 01:21 PM - R2026-137 - Open dialog width 60% */
    width: 60%; max-width: 96vw; height: 84vh;
    display: flex; flex-direction: column;
    /* DW-3151 — this modal is appended to <body>, OUTSIDE .peacock-workbench where the
       --wb-* tokens are defined. OpenModelView.open() now mirrors the active workbench
       theme onto the host (.wb-open-modal-host[data-wb-theme="…"] token block above), so
       the whole picker follows the peacock theme. The fallback hex below is a belt-and-
       braces default for the (rare) case the host has no theme attr yet. */
    background: var(--wb-panel, #fbfcfd); color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); overflow: hidden;
}
.wb-open-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border);
}
/* Updated by shashank2104 on 08/17/2026 at 01:06 PM - R2026-173 - title uses --wb-fg. The old
   forced #ffffff was invisible on the light header (calm-light / studio-light), which made
   File → Open look untitled once the current-model chip was added. */
.wb-open-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--wb-fg, #1E293B); }
.wb-open-head h2 i { color: var(--wb-accent, #3B82F6); }
/** Added by shashank2104 on 08/17/2026 at 12:53 PM - R2026-173 - File → Open current-model chip. **/
.wb-open-modal-host .wb-open-current {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-open-modal-host .wb-open-current[hidden] {
    display: none;
}
.wb-open-current-k {
    flex: none;
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wb-fg-muted, var(--d3v-text-muted, #94A3B8));
}
.wb-open-current-name {
    font-weight: 600;
    color: var(--wb-fg, var(--d3v-text-primary, #1E293B));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 220px;
}
.wb-open-current-sim {
    flex: none;
    color: var(--wb-fg-muted, var(--d3v-text-muted, #94A3B8));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.wb-open-head .wb-open-close { flex: none; }
.wb-open-close {
    background: transparent; border: 0; color: var(--wb-fg-muted);
    cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px;
}
.wb-open-close:hover { color: var(--wb-fg); }
/** Added by shashank2104 on 08/11/2026 at 11:44 AM - R2026-137 - Design B left source rail **/
.wb-open-main {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: row;
}
.wb-open-tabs {
    flex: 0 0 188px; width: 188px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 10px;
    border-right: 1px solid var(--wb-border);
    background: var(--wb-panel-2, rgba(0,0,0,0.04));
    overflow-y: auto;
}
.wb-open-tabs-grp {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .06em;
    color: var(--wb-fg-muted); text-transform: uppercase;
    padding: 4px 10px 8px;
}
.wb-open-tab {
    background: transparent; border: 0;
    color: var(--wb-fg-muted); cursor: pointer;
    padding: 9px 10px; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 500;
    border-radius: 8px;
    display: flex; align-items: center; gap: 8px;
    text-align: left; width: 100%;
    transition: color 0.15s ease, background 0.15s ease;
}
.wb-open-tab:hover { color: var(--wb-fg); background: rgba(127,127,127,0.08); }
.wb-open-tab.is-active {
    color: var(--wb-fg);
    background: rgba(74,126,181,0.16);
    box-shadow: inset 3px 0 0 var(--wb-accent, #4a7eb5);
}
.wb-open-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; padding: 0; }
.wb-open-pane { display: none; flex: 1; min-height: 0; flex-direction: column; padding: 4px 0 0; }
.wb-open-pane.is-active { display: flex; }

/* Upload pane */
.wb-open-dropzone {
    flex: 1; margin: 16px 20px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 40px 20px;
    border: 2px dashed var(--wb-border); border-radius: 10px;
    color: var(--wb-fg-muted);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wb-open-dropzone.is-over {
    background: rgba(74,126,181,0.10);
    border-color: var(--wb-accent);
    color: var(--wb-fg);
}
.wb-open-dropzone > i.fa { font-size: calc(42px * var(--wb-font-scale, 1)); opacity: 0.7; }
.wb-open-dz-title { font-size: calc(14px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); }
.wb-open-dz-hint { font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0.8; text-align: center; }
.wb-open-pick {
    margin-top: 8px;
    background: var(--wb-accent); color: #fff; border: 0;
    padding: 7px 16px; border-radius: 6px;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-open-pick:hover { filter: brightness(1.08); }

/* 09/16/2026 - two pickers side by side (Choose files / Choose run folder) */
.wb-open-pick-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* Sims pane */
.wb-open-sim-controls {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--wb-border);
}
.wb-open-search-box {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: 6px; padding: 5px 10px;
}
.wb-open-search-box i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-open-search-box input {
    flex: 1; background: transparent; border: 0; outline: none;
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1));
}
.wb-open-toggle {
    display: flex; align-items: center; gap: 6px;
    color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1));
    cursor: pointer; user-select: none;
    margin: 0;
}
.wb-open-toggle input { margin: 0; cursor: pointer; }

.wb-open-sim-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.wb-open-pane.is-detail .wb-open-sim-list,
.wb-open-pane.is-detail .wb-open-sim-controls { display: none; }
.wb-open-pane.is-detail .wb-open-sim-detail { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.wb-open-sim-detail { display: none; }

.wb-open-loading, .wb-open-empty {
    padding: 24px; text-align: center;
    color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1));
}

.wb-open-sim-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.wb-open-sim-row:hover {
    background: rgba(74,126,181,0.10);
    border-left-color: var(--wb-accent);
}
.wb-open-sim-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1));
    display: flex; align-items: center; gap: 8px;
}
.wb-open-sim-name > i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-open-sim-meta {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
/* Added by shashank2104 on 09/03/2026 - the solver chip in the Open dialog's simulation row. Same
   chip as the rail pane's, sized for this row's slightly larger meta line. */
.wb-open-sim-solver {
    max-width: 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 1px 7px; border-radius: 3px;
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
    color: var(--wb-fg-muted);
    background: var(--wb-panel-2, var(--wb-panel)); border: 1px solid var(--wb-border);
}
.wb-open-sim-id { font-family: ui-monospace, Menlo, monospace; opacity: 0.7; }
.wb-open-sim-status {
    padding: 1px 7px; border-radius: 4px; font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    background: var(--wb-panel-2);
}
.wb-open-st-complete, .wb-open-st-completed { background: #d4edda; color: #155724; }
.wb-open-st-running { background: #fff3cd; color: #856404; }
.wb-open-st-failed, .wb-open-st-error { background: #f8d7da; color: #721c24; }
.wb-open-sim-date { white-space: nowrap; }

/* Sim detail (attachments) */
.wb-open-detail-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--wb-border);
}
.wb-open-back {
    background: transparent; border: 1px solid var(--wb-border);
    color: var(--wb-fg-muted); padding: 4px 10px;
    border-radius: 6px; cursor: pointer; font-size: calc(11.5px * var(--wb-font-scale, 1));
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-open-back:hover { color: var(--wb-fg); border-color: var(--wb-fg-muted); }
.wb-open-detail-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wb-fg); font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600;
    display: flex; align-items: center; gap: 8px;
}
.wb-open-att-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.wb-open-att-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.wb-open-att-row:hover {
    background: rgba(74,126,181,0.10);
    border-left-color: var(--wb-accent);
}
.wb-open-att-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1));
    display: flex; align-items: center; gap: 8px;
}
.wb-open-att-name > i { color: var(--wb-fg-muted); }
.wb-open-att-pick {
    background: var(--wb-accent); color: #fff; border: 0;
    padding: 4px 12px; border-radius: 6px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-open-att-pick:hover { filter: brightness(1.08); }

/* Added by shashank2104 on 08/12/2026 - R2026-137 - deck members that are part of the archive but not
   openable on their own (.incl / .inc), plus the "open all attachments as one deck" action. */
.wb-open-att-size {
    flex: 0 0 auto; margin: 0 12px;
    color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums;
}
.wb-open-att-row.is-inert { cursor: default; opacity: 0.6; }
.wb-open-att-row.is-inert:hover { background: none; border-left-color: transparent; }
.wb-open-deck {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 32px); margin: 4px 16px 10px;
    padding: 11px 14px;
    border: 1px solid var(--wb-border); border-radius: var(--d3v-r-md, 8px);
    background: var(--wb-panel-2, var(--wb-panel));
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600;
    text-align: left; cursor: pointer;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.08));
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.wb-open-deck > i { flex: 0 0 auto; color: var(--wb-accent); font-size: calc(13px * var(--wb-font-scale, 1)); }
.wb-open-deck > span:first-of-type {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-open-deck:hover:not([disabled]) {
    border-color: var(--wb-accent); color: var(--wb-accent);
    background: rgba(74,126,181,0.10);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(0,0,0,0.12));
}
.wb-open-deck:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
.wb-open-deck[disabled] { cursor: progress; opacity: 0.75; }
.wb-open-deck-size {
    flex: 0 0 auto;
    color: var(--wb-fg-muted); font-weight: 400; font-variant-numeric: tabular-nums;
}

/* Saved Projects pane (File / Open) */
.wb-open-proj-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.wb-open-proj-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.wb-open-proj-row:hover {
    background: rgba(74,126,181,0.10);
    border-left-color: var(--wb-accent);
}
.wb-open-proj-main { flex: 1; min-width: 0; }
.wb-open-proj-name {
    color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 8px;
}
.wb-open-proj-name > i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-open-proj-meta {
    margin-top: 3px;
    display: flex; align-items: center; gap: 12px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.wb-open-proj-src > i { margin-right: 4px; opacity: 0.7; }
.wb-open-proj-del {
    flex: 0 0 auto;
    background: transparent; border: 1px solid transparent;
    color: var(--wb-fg-muted); padding: 4px 8px;
    border-radius: 6px; cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1));
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.wb-open-proj-del:hover { color: #c0392b; border-color: rgba(192,57,43,0.4); background: rgba(192,57,43,0.08); }

/* === Save Project dialog ============================================== */
.wb-save-modal-host { position: fixed; inset: 0; z-index: 41; }
.wb-save-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wb-save-modal {
    position: absolute; top: 18vh; left: 50%; transform: translateX(-50%);
    width: 460px; max-width: 92vw;
    display: flex; flex-direction: column;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); overflow: hidden;
}
.wb-save-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border);
}
/** Explicit token color: a global h2 rule (bootstrap / d3view.min.css) otherwise beats the inherited
 *  var(--wb-fg) from .wb-save-modal and renders the title black, off the workbench theme. **/
.wb-save-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--wb-fg); }
.wb-save-close {
    background: transparent; border: 0; color: var(--wb-fg-muted);
    cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px;
}
.wb-save-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.wb-save-target {
    display: flex; flex-direction: column; gap: 8px;
}
.wb-save-target-option {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--wb-border); border-radius: 8px;
    cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.wb-save-target-option:hover { border-color: var(--wb-accent); background: rgba(74,126,181,0.06); }
.wb-save-target-option.is-active { border-color: var(--wb-accent); background: rgba(74,126,181,0.10); }
.wb-save-target-option input[type=radio] { margin: 2px 0 0; }
.wb-save-target-text { display: flex; flex-direction: column; gap: 2px; }
.wb-save-target-title { color: var(--wb-fg); font-weight: 600; }
.wb-save-target-hint { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-save-name-row { display: flex; flex-direction: column; gap: 4px; }
.wb-save-name-row label { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.3px; }
.wb-save-name-row input, .wb-save-name-row textarea {
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 6px;
    padding: 6px 10px; font-size: calc(12.5px * var(--wb-font-scale, 1)); outline: none;
    font-family: inherit; resize: vertical; transition: border-color var(--d3v-t-fast, .15s);
}
.wb-save-name-row input:focus, .wb-save-name-row textarea:focus { border-color: var(--wb-accent); }
/* R2026-308 - a plain Update shows the name, it does not ask for one */
.wb-save-name-row .wb-save-name-static { color: var(--wb-fg); font-weight: 600; font-size: calc(13px * var(--wb-font-scale, 1)); padding: 2px 0; }
.wb-save-name-row .wb-save-name-static small { color: var(--wb-fg-muted); font-weight: 400; margin-left: 4px; }
.wb-save-foot {
    flex: 0 0 auto;
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid var(--wb-border);
}
.wb-save-cancel-btn, .wb-save-ok-btn {
    padding: 6px 14px; font-size: calc(12.5px * var(--wb-font-scale, 1)); border-radius: 6px; cursor: pointer;
    border: 1px solid var(--wb-border); background: transparent; color: var(--wb-fg);
}
.wb-save-cancel-btn:hover { background: var(--wb-panel-2); }
.wb-save-ok-btn {
    background: var(--wb-accent); color: #fff; border-color: var(--wb-accent);
}
.wb-save-ok-btn:hover { filter: brightness(1.08); }
.wb-save-ok-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

/* === Unsaved changes prompt (R0-4188, workbench/unsaved-changes.js) ===================
 * Body/shell-mounted like the Save dialog, so it is themed through the --wb-* layer and never
 * scoped under .peacock-workbench. */
.wb-unsaved-host { position: fixed; inset: 0; z-index: 42; }
.wb-unsaved-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wb-unsaved-modal {
    position: absolute; top: 16vh; left: 50%; transform: translateX(-50%);
    width: 560px; max-width: 94vw; max-height: 72vh;
    display: flex; flex-direction: column;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); overflow: hidden;
}
.wb-unsaved-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.wb-unsaved-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center; font-size: calc(15px * var(--wb-font-scale, 1));
}
.wb-unsaved-ico.is-draft   { background: rgba(181,71,8,0.12);  color: var(--wb-warn); }
.wb-unsaved-ico.is-project { background: rgba(74,126,181,0.14); color: var(--wb-accent); }
.wb-unsaved-titles { min-width: 0; }
.wb-unsaved-titles h2 { margin: 0; font-size: calc(14.5px * var(--wb-font-scale, 1)); font-weight: 650; color: var(--wb-fg); line-height: 1.3; }
.wb-unsaved-titles p { margin: 3px 0 0; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-unsaved-sum {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    padding: 8px 18px; background: var(--wb-panel-2); color: var(--wb-fg-muted);
    border-top: 1px solid var(--wb-border); border-bottom: 1px solid var(--wb-border);
    font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.wb-unsaved-sum b { color: var(--wb-fg); }
.wb-unsaved-health.is-ok   { color: var(--wb-ok); }
.wb-unsaved-health.is-warn { color: var(--wb-warn); }
.wb-unsaved-rows { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wb-unsaved-row {
    display: grid; grid-template-columns: 22px minmax(0,1fr) auto 56px; gap: 10px; align-items: center;
    padding: 8px 18px; border-bottom: 1px solid var(--wb-border);
    transition: background var(--wb-t, 0.12s ease);
}
.wb-unsaved-row:last-child { border-bottom: 0; }
.wb-unsaved-row:hover { background: var(--wb-row-hover, var(--wb-panel-2)); }
.wb-unsaved-row > i { color: var(--wb-fg-muted); text-align: center; }
.wb-unsaved-f { font-weight: 600; color: var(--wb-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-unsaved-f small { display: block; font-weight: 400; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); overflow: hidden; text-overflow: ellipsis; }
.wb-unsaved-k {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid transparent;
}
.wb-unsaved-k.is-unsaved, .wb-unsaved-k.is-added { color: var(--wb-ok);     background: rgba(6,118,71,0.10);  border-color: rgba(6,118,71,0.25); }
.wb-unsaved-k.is-changed                         { color: var(--wb-accent); background: rgba(74,126,181,0.12); border-color: rgba(74,126,181,0.3); }
.wb-unsaved-k.is-removed                         { color: var(--wb-danger); background: rgba(217,45,32,0.10); border-color: rgba(217,45,32,0.25); }
.wb-unsaved-sz { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); text-align: right; font-variant-numeric: tabular-nums; }
.wb-unsaved-empty { padding: 14px 18px; color: var(--wb-fg-muted); }
.wb-unsaved-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.wb-unsaved-sp { flex: 1; }
.wb-unsaved-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    border-radius: 6px; cursor: pointer; line-height: 1.2;
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    transition: background var(--wb-t, 0.12s ease), border-color var(--wb-t, 0.12s ease), filter var(--wb-t, 0.12s ease);
}
.wb-unsaved-btn:hover { background: var(--wb-row-hover, var(--wb-panel-2)); }
.wb-unsaved-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(74,126,181,0.3); }
.wb-unsaved-btn.is-ghost { border-color: transparent; background: transparent; color: var(--wb-fg-muted); }
.wb-unsaved-btn.is-ghost:hover { color: var(--wb-fg); background: var(--wb-row-hover, var(--wb-panel-2)); }
.wb-unsaved-btn.is-danger { color: var(--wb-danger); border-color: rgba(217,45,32,0.35); }
.wb-unsaved-btn.is-danger:hover { background: rgba(217,45,32,0.08); }
.wb-unsaved-btn.is-primary { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg, #fff); }
.wb-unsaved-btn.is-primary:hover { filter: brightness(1.08); }

/* === Smart Update review dialog (R2026-215) ===========================
 * Reuses the Save dialog's frame (.wb-save-modal / head / body / foot) on purpose: it is the same
 * kind of object and a second frame would drift. Everything below is the REVIEW LIST, which the
 * Save dialog has no equivalent of. Themed through the --wb-* layer like every other workbench
 * surface, so all four themes follow without a per-theme rule.
 */
.wb-su-modal { width: 560px; }
.wb-su-body { gap: 10px; }
.wb-su-project {
    margin: 0; color: var(--wb-fg-muted);
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wb-su-state { display: flex; flex-direction: column; gap: 10px; }
.wb-su-checking, .wb-su-empty, .wb-su-blocked {
    align-items: center; text-align: center; padding: 18px 6px; color: var(--wb-fg-muted);
}
.wb-su-checking { flex-direction: row; justify-content: center; gap: 8px; }
.wb-su-empty-icon { font-size: calc(26px * var(--wb-font-scale, 1)); color: var(--wb-accent); }
.wb-su-empty p, .wb-su-blocked p { margin: 0; }
.wb-su-blocked-icon { font-size: calc(24px * var(--wb-font-scale, 1)); color: #d08b1e; }
.wb-su-blocked-why { color: var(--wb-fg); line-height: 1.5; max-width: 42em; }
.wb-su-blocked-hint { font-size: calc(11.5px * var(--wb-font-scale, 1)); }

.wb-su-stale {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 10px; border-radius: var(--wb-radius-sm);
    border: 1px solid rgba(208,139,30,0.45); background: rgba(208,139,30,0.10);
    color: var(--wb-fg); line-height: 1.45;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
}

/* The list. `full-h` + `flex-1 o_auto_y` is the house pattern; a max-height here would fight the
 * modal's own sizing, so the scroll lives on the list and the modal stays content-sized. */
.wb-su-list {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 46vh; overflow-y: auto; padding-right: 2px;
}
.wb-su-group {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel-2);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.wb-su-group:hover { border-color: var(--wb-accent); }
.wb-su-group.is-locked:hover { border-color: var(--wb-border); }
.wb-su-group-head {
    display: flex; align-items: center; gap: 8px;
    margin: 0; padding: 8px 10px; cursor: pointer; font-weight: 600; color: var(--wb-fg);
}
.wb-su-group.is-locked .wb-su-group-head { cursor: default; }
.wb-su-check { margin: 0; }
.wb-su-group-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-su-group-status, .wb-su-file-status {
    flex: 0 0 auto; font-weight: 500;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    text-transform: uppercase; letter-spacing: 0.3px;
    color: var(--wb-fg-muted);
}
.wb-su-st-changed > .wb-su-group-status, .wb-su-file.wb-su-st-changed .wb-su-file-status { color: var(--wb-accent); }
.wb-su-st-new > .wb-su-group-status,     .wb-su-file.wb-su-st-new .wb-su-file-status     { color: #2f8f4e; }
.wb-su-st-removed > .wb-su-group-status, .wb-su-file.wb-su-st-removed .wb-su-file-status { color: #c0392b; }
.wb-su-g-changed > .wb-su-group-head .wb-su-group-status { color: var(--wb-accent); }
.wb-su-g-removed > .wb-su-group-head .wb-su-group-status { color: #c0392b; }
.wb-su-group-bytes, .wb-su-file-bytes {
    flex: 0 0 auto; min-width: 58px; text-align: right;
    color: var(--wb-fg-muted); font-variant-numeric: tabular-nums;
    font-size: calc(11px * var(--wb-font-scale, 1));
}

.wb-su-files { list-style: none; margin: 0; padding: 0 10px 8px 32px; display: flex; flex-direction: column; gap: 2px; }
.wb-su-file { display: flex; align-items: center; gap: 8px; color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.wb-su-file-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-su-file.wb-su-st-changed .wb-su-file-name, .wb-su-file.wb-su-st-new .wb-su-file-name { color: var(--wb-fg); }
.wb-su-file.wb-su-st-unchanged { opacity: 0.65; }

/* A group with nothing to write is listed, not hidden: what is deliberately NOT being written is
 * half of what this dialog exists to state. */
.wb-su-g-unchanged { opacity: 0.6; }

.wb-su-note { margin: 0; color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.wb-su-state.is-writing { opacity: 0.6; pointer-events: none; }

.wb-open-proj-row.is-orphan {
    opacity: 0.55;
    cursor: not-allowed;
}
.wb-open-proj-row.is-orphan .wb-open-proj-name > i {
    color: #c0392b;
}
.wb-open-proj-row.is-orphan:hover {
    background: rgba(192,57,43,0.06);
    border-left-color: #c0392b;
}
/** Added by shashank2104 on 08/15/2026 - R0-4032 - open-in-progress feedback, matching the
 *  .wb-open-att-row.is-busy precedent above. **/
.wb-open-proj-row.is-busy {
    cursor: progress;
    opacity: 0.85;
}
.wb-open-proj-row.is-busy [data-wb-open-proj-delete] { pointer-events: none; }

/* === Projects rail pane ============================================== */
.wb-projects-host { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.wb-pp-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-bottom: 1px solid var(--wb-border);
    background: var(--wb-panel-2);
    flex-wrap: wrap;
}
.wb-pp-search-wrap {
    flex: 1; min-width: 120px;
    display: flex; align-items: center; gap: 6px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 4px;
    padding: 3px 8px;
}
.wb-pp-search-wrap i { color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); }
.wb-pp-search-wrap input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-pp-select {
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 4px;
    font-size: calc(11px * var(--wb-font-scale, 1)); padding: 3px 6px;
}
.wb-pp-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); cursor: pointer; user-select: none; margin: 0;
}
.wb-pp-toggle input { margin: 0; }
.wb-pp-refresh {
    background: transparent; border: 1px solid var(--wb-border);
    color: var(--wb-fg-muted); padding: 3px 7px; border-radius: 4px;
    cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-pp-refresh:hover { color: var(--wb-fg); border-color: var(--wb-fg-muted); }

.wb-pp-bulkbar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(74,126,181,0.10);
    border-bottom: 1px solid var(--wb-border);
}
.wb-pp-bulkbar.is-hidden { display: none; }
.wb-pp-bulk-info { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.wb-pp-bulk-info [data-wb-pp-bulk-count] { font-weight: 700; color: var(--wb-accent); }
.wb-pp-bulk-btn {
    background: var(--wb-accent); color: #fff; border: 0;
    padding: 4px 12px; font-size: calc(11px * var(--wb-font-scale, 1)); border-radius: 4px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
}
.wb-pp-bulk-btn:hover { filter: brightness(1.08); }

.wb-pp-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.wb-pp-table {
    width: 100%; border-collapse: collapse;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.wb-pp-table thead th {
    position: sticky; top: 0;
    background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
    padding: 6px 8px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--wb-fg-muted);
    text-align: left;
}
.wb-pp-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--wb-row-hover);
    vertical-align: middle;
}
.wb-pp-row { cursor: pointer; }
.wb-pp-row:hover { background: var(--wb-row-hover); }
.wb-pp-row.is-orphan { opacity: 0.55; }
.wb-pp-c-check { width: 24px; }
.wb-pp-c-name > i { color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); margin-right: 5px; }
.wb-pp-c-date { white-space: nowrap; color: var(--wb-fg-muted); }
.wb-pp-c-actions { white-space: nowrap; width: 140px; text-align: right; }
.wb-pp-act {
    background: transparent; border: 1px solid transparent; color: var(--wb-fg-muted);
    padding: 3px 6px; border-radius: 3px; cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
    margin-left: 2px;
}
.wb-pp-act:hover { color: var(--wb-fg); border-color: var(--wb-fg-muted); }
.wb-pp-act.wb-pp-act-danger:hover { color: #c0392b; border-color: rgba(192,57,43,0.4); }

.wb-pp-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 999px;
    font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 1.4;
}
.wb-pp-chip-sim    { background: rgba(74,126,181,0.18); color: var(--wb-fg); }
.wb-pp-chip-upload { background: rgba(46,204,113,0.18); color: var(--wb-fg); }
.wb-pp-chip-orphan { background: rgba(192,57,43,0.20);  color: #c0392b; }

.wb-pp-loading, .wb-pp-empty {
    padding: 20px; text-align: center; color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1));
}

/* === Share modal ===================================================== */
.wb-share-modal-host { position: fixed; inset: 0; z-index: 42; }
.wb-share-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wb-share-modal {
    position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
    width: 520px; max-width: 92vw; max-height: 76vh;
    display: flex; flex-direction: column;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); overflow: hidden;
}
.wb-share-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border);
}
.wb-share-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.wb-share-close {
    background: transparent; border: 0; color: var(--wb-fg-muted);
    cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px;
}
.wb-share-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.wb-share-section { display: flex; flex-direction: column; gap: 6px; }
.wb-share-section-title {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--wb-fg-muted); font-weight: 700;
}
.wb-share-link-row { display: flex; gap: 6px; }
.wb-share-link {
    flex: 1; background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 6px;
    padding: 6px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); font-family: ui-monospace, Menlo, monospace;
    outline: none;
}
.wb-share-copy-btn {
    background: var(--wb-accent); color: #fff; border: 0;
    padding: 6px 14px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-share-copy-btn:hover { filter: brightness(1.08); }
.wb-share-link-hint { color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1)); }

.wb-share-user-chips {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px;
}
.wb-share-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--wb-row-hover); color: var(--wb-fg);
    padding: 3px 8px; border-radius: 999px; font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.wb-share-chip-x {
    background: transparent; border: 0; color: var(--wb-fg-muted);
    cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); line-height: 1; padding: 0 0 0 2px;
}
.wb-share-chip-x:hover { color: #c0392b; }

.wb-share-user-search { position: relative; }
.wb-share-user-search input {
    width: 100%;
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 6px;
    padding: 6px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); outline: none;
}
.wb-share-user-search input:focus { border-color: var(--wb-accent); }
.wb-share-user-suggests {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 6px;
    max-height: 200px; overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    z-index: 1;
    display: none;
}
.wb-share-suggest {
    padding: 6px 10px; cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1));
    display: flex; align-items: center; gap: 8px;
}
.wb-share-suggest:hover { background: var(--wb-row-hover); }
.wb-share-suggest > i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-share-suggest-email { color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1)); margin-left: auto; }

.wb-share-message {
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 6px;
    padding: 8px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); resize: vertical;
    min-height: 60px; font-family: inherit; outline: none;
}
.wb-share-message:focus { border-color: var(--wb-accent); }

.wb-share-foot {
    flex: 0 0 auto;
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 12px 18px; border-top: 1px solid var(--wb-border);
}
.wb-share-cancel-btn, .wb-share-send-btn {
    padding: 6px 14px; font-size: calc(12.5px * var(--wb-font-scale, 1)); border-radius: 6px; cursor: pointer;
    border: 1px solid var(--wb-border); background: transparent; color: var(--wb-fg);
}
.wb-share-cancel-btn:hover { background: var(--wb-panel-2); }
.wb-share-send-btn {
    background: var(--wb-accent); color: #fff; border-color: var(--wb-accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-share-send-btn:hover { filter: brightness(1.08); }
.wb-share-send-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

/* Compact js3d toggle inside the rail list toolbar (Simulations rail, etc.) */
.wb-parts-toolbar .wb-rail-list-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    cursor: pointer; user-select: none;
    margin: 0 0 0 6px;
    white-space: nowrap;
}
.wb-parts-toolbar .wb-rail-list-toggle input {
    margin: 0; cursor: pointer;
    accent-color: var(--wb-accent);
}
.wb-parts-toolbar .wb-rail-list-toggle:hover { color: var(--wb-fg); }

/* === Simulations rail pane (flat list + filter modal trigger) =========== */
.wb-sim-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-sim-pane-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--wb-border);
    background: var(--wb-panel-2);
}
.wb-sim-pane-title {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--wb-accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-sim-pane-title > i { font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0.8; }
.wb-sim-pane-count {
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    padding: 1px 6px; border-radius: 999px;
}
.wb-sim-pane-spacer { flex: 1; }
.wb-sim-iconbtn {
    position: relative;
    background: transparent; border: 1px solid transparent;
    color: var(--wb-fg-muted); cursor: pointer;
    width: 24px; height: 24px; padding: 0; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-sim-iconbtn:hover { color: var(--wb-fg); border-color: var(--wb-border); background: var(--wb-panel); }
.wb-sim-filter-dot {
    position: absolute; top: -4px; right: -4px;
    min-width: 14px; height: 14px; padding: 0 3px;
    background: var(--wb-accent); color: #fff;
    border-radius: 999px; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}

.wb-sim-pane-search {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    margin: 10px; padding: 6px 10px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 6px;
}
.wb-sim-pane-search > i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-sim-pane-search input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1));
}

.wb-sim-pane-empty {
    padding: 20px 12px; text-align: center;
    color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.wb-sim-pane-error { color: #c0392b; }

.wb-sim-pane-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; }

.wb-sim-row {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px; cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-height: 24px;
}
.wb-sim-row:hover {
    background: var(--wb-row-hover);
    border-left-color: var(--wb-accent);
}
.wb-sim-row.is-picked {
    background: rgba(74,126,181,0.18);
    border-left-color: var(--wb-accent);
}
.wb-sim-row.is-picked .wb-sim-row-name { font-weight: 600; }
.wb-sim-row-chev { color: var(--wb-fg-muted); width: 10px; font-size: calc(10px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.wb-sim-row-icon { color: var(--wb-fg-muted); width: 14px; font-size: calc(11px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.wb-sim-row.is-picked .wb-sim-row-icon { color: var(--wb-accent); }
.wb-sim-row-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1));
}
/* Added by shashank2104 on 09/03/2026 - the row's solver chip, before the id. Sized DOWN from the
   id pill so the name stays the loudest thing on the row, and `max-width` + ellipsis because an
   unmapped `solver_type` falls back to its raw upcased value and can be long. */
.wb-sim-row-solver {
    flex: 0 0 auto;
    max-width: 84px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--wb-fg-muted); font-size: calc(9.5px * var(--wb-font-scale, 1));
    font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase;
    background: var(--wb-panel-2, var(--wb-panel)); border: 1px solid var(--wb-border);
    padding: 1px 6px; border-radius: 3px;
}
.wb-sim-row.is-picked .wb-sim-row-solver { color: var(--wb-fg); border-color: var(--wb-accent); }
.wb-sim-row-id {
    flex: 0 0 auto;
    color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1));
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    padding: 1px 6px; border-radius: 999px;
    font-family: ui-monospace, Menlo, monospace;
}
.wb-sim-row-view {
    flex: 0 0 auto;
    background: transparent; border: 0; padding: 4px;
    color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
    border-radius: 3px;
    opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.wb-sim-row:hover .wb-sim-row-view { opacity: 0.7; }
.wb-sim-row-view:hover { color: var(--wb-accent); opacity: 1; }

.wb-sim-children { padding: 4px 12px 6px 28px; background: var(--wb-panel); }
.wb-sim-children-empty {
    padding: 6px 0; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-style: italic;
}
.wb-sim-att {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px; margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.wb-sim-att:hover { background: var(--wb-row-hover); }
.wb-sim-att > i { color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); }
.wb-sim-att-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Added by shashank2104 on 08/12/2026 - R2026-137 - per-simulation file list + combined-deck action */
.wb-sim-row-files {
    flex: 0 0 auto;
    width: 16px; height: 16px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 3px;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1;
    cursor: pointer;
    transition: color var(--d3v-t-fast, 0.15s) ease, background var(--d3v-t-fast, 0.15s) ease;
}
.wb-sim-row-files:hover { color: var(--wb-accent); background: var(--wb-row-hover); }
.wb-sim-row.is-open .wb-sim-row-files { color: var(--wb-accent); }
.wb-sim-att-size {
    flex: 0 0 auto;
    color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums;
}
.wb-sim-att.is-inert { cursor: default; opacity: 0.62; }
.wb-sim-att.is-inert:hover { background: none; }
.wb-sim-deck {
    display: flex; align-items: center; gap: 6px;
    width: 100%; margin: 2px 0 6px;
    padding: 7px 10px;
    border: 1px solid var(--wb-border); border-radius: 5px;
    background: var(--wb-panel-2, var(--wb-panel));
    color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    text-align: left; cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, background var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.wb-sim-deck > i { color: var(--wb-accent); font-size: calc(11px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.wb-sim-deck > span:first-of-type {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-sim-deck:hover:not([disabled]) { border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-row-hover); }
.wb-sim-deck:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.wb-sim-deck[disabled] { cursor: progress; opacity: 0.72; }
.wb-sim-deck-size {
    flex: 0 0 auto;
    color: var(--wb-fg-muted); font-weight: 400; font-variant-numeric: tabular-nums;
}

/* Added by shashank2104 on 08/12/2026 - R2026-137 - d3plot -> js3d export + file: search feedback */
.wb-sim-pane-note {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    margin: -4px 10px 6px; padding: 5px 8px;
    border-radius: 4px;
    background: var(--wb-row-hover); color: var(--wb-fg-muted);
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.35;
}
.wb-sim-pane-note > i { color: var(--wb-accent); font-size: calc(10px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.wb-sim-att.is-d3plot { cursor: default; }
.wb-sim-att.is-d3plot > i { color: var(--wb-accent); }
/* Open-picker d3plot rows: the BASE file carries the export action, so it reads as an action, not a
   file. The numbered continuation files stay listed as context and carry a tag instead of a button. */
.wb-open-att-row.is-d3plot .wb-open-att-name > i { color: var(--wb-accent); }
.wb-open-att-row.is-busy { cursor: progress; opacity: 0.85; }
.wb-open-att-row.is-busy .wb-open-att-pick { pointer-events: none; }
/* A continuation state file is readable, not dimmed to the .incl level — it IS part of the result. */
.wb-open-att-row.is-d3plot-state { opacity: 0.82; }
.wb-open-att-row.is-d3plot-state .wb-open-att-name > i { color: var(--wb-fg-muted); }
/* "View" opens the file in the shared DataViewer. Secondary to "Open" (which loads a MODEL), so it
   is an outline button rather than the accent fill — the two actions are not equivalent. */
.wb-open-att-view {
    flex: 0 0 auto;
    background: transparent; color: var(--wb-fg-muted);
    border: 1px solid var(--wb-border);
    padding: 3px 11px; border-radius: 6px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.wb-open-att-view:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.wb-open-att-row.is-viewable { opacity: 1; }
.wb-open-att-tag {
    flex: 0 0 auto;
    padding: 3px 9px; border-radius: 10px;
    border: 1px solid var(--wb-border);
    background: var(--wb-panel-2, var(--wb-panel));
    color: var(--wb-fg-muted);
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* === Generic filter modal (d3VIEW.Views.FilterModalView) ================ */
.filterm-host { position: fixed; inset: 0; z-index: 43; }
.filterm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.filterm-modal {
    position: absolute; top: 10vh; left: 50%; transform: translateX(-50%);
    width: 520px; max-width: 92vw; max-height: 80vh;
    display: flex; flex-direction: column;
    background: var(--wb-panel, #fff); color: var(--wb-fg, #222);
    border: 1px solid var(--wb-border, #ddd); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(13px * var(--wb-font-scale, 1)); overflow: hidden;
}
.filterm-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border, #eee);
}
.filterm-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.filterm-close { background: transparent; border: 0; color: var(--wb-fg-muted, #888); cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px; }
.filterm-close:hover { color: var(--wb-fg, #222); }
.filterm-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.filterm-field { display: flex; flex-direction: column; gap: 5px; }
.filterm-label {
    font-size: calc(11px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--wb-fg-muted, #888); font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.filterm-label > i { font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0.7; }
.filterm-field input,
.filterm-field select {
    background: var(--wb-panel-2, #f8f8f8); color: var(--wb-fg, #222);
    border: 1px solid var(--wb-border, #ddd); border-radius: 6px;
    padding: 6px 10px; font-size: calc(12.5px * var(--wb-font-scale, 1)); outline: none;
    font-family: inherit;
}
.filterm-field input:focus,
.filterm-field select:focus { border-color: var(--wb-accent, #4a7eb5); }
.filterm-field select[multiple] { min-height: 80px; }

.filterm-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--wb-border, #eee);
}
.filterm-spacer { flex: 1; }
.filterm-reset, .filterm-cancel, .filterm-apply {
    padding: 6px 14px; font-size: calc(12.5px * var(--wb-font-scale, 1)); border-radius: 6px; cursor: pointer;
    border: 1px solid var(--wb-border, #ddd); background: transparent; color: var(--wb-fg, #222);
}
.filterm-cancel:hover, .filterm-reset:hover { background: var(--wb-panel-2, #f4f4f4); }
.filterm-apply {
    background: var(--wb-accent, #4a7eb5); color: #fff; border-color: var(--wb-accent, #4a7eb5);
}
.filterm-apply:hover { filter: brightness(1.08); }

.wb-breadcrumb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 12px; height: 100%; }
.wb-crumb-back {
    border: 1px solid var(--wb-border, #2a2f37); background: transparent; color: var(--wb-fg, #e5e7ea);
    padding: 4px 10px; border-radius: 6px; font-size: calc(12px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.wb-crumb-back:hover { background: var(--wb-row-hover, #2a2f37); }
.wb-crumb-trail { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #9ba3ad); }
.wb-crumb-seg { color: var(--wb-fg, #e5e7ea); }
.wb-crumb-sep { opacity: 0.4; }
.wb-crumb-current { font-weight: 600; }
.wb-crumb-badge {
    background: var(--wb-accent, #4c8df6); color: #fff;
    padding: 1px 6px; border-radius: 3px; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: 0.5px;
}

.wb-mode-body {
    flex: 1; min-width: 0; background: var(--wb-bg, #0f1318); overflow: hidden;
    display: flex; flex-direction: column;
}
.wb-mode-placeholder {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--wb-fg-muted, #9ba3ad);
}
.wb-mode-placeholder .fa { font-size: calc(48px * var(--wb-font-scale, 1)); opacity: 0.3; margin-bottom: 12px; }
.wb-mode-placeholder h3 { color: var(--wb-fg, #e5e7ea); margin: 0 0 6px; text-transform: capitalize; }

.wb-summary-host { padding: 16px 20px; }
.wb-summary-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wb-summary-header h2 { margin: 0; color: var(--wb-fg, #e5e7ea); font-size: calc(16px * var(--wb-font-scale, 1)); font-weight: 600; }
.wb-summary-sub { color: var(--wb-fg-muted, #9ba3ad); font-weight: 400; font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
}
.wb-summary-widget {
    background: var(--wb-panel, #181d23); border: 1px solid var(--wb-border, #2a2f37); border-radius: 8px;
    padding: 10px 12px; min-height: 90px; display: flex; flex-direction: column;
}
.wb-summary-widget--md { grid-column: span 2; }
.wb-summary-widget--lg { grid-column: span 3; min-height: 200px; }
.wb-summary-widget-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wb-summary-widget-head .fa { color: var(--wb-accent, #4c8df6); }
.wb-summary-widget-title {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--wb-fg-muted, #9ba3ad);
}
.wb-summary-widget-body { flex: 1; color: var(--wb-fg, #e5e7ea); font-size: calc(14px * var(--wb-font-scale, 1)); }
.wb-termination-reason { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg, #e5e7ea); }
.wb-termination-time { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #9ba3ad); margin-top: 2px; }
.wb-btn {
    background: var(--wb-accent, #4c8df6); color: #fff; border: none;
    padding: 6px 12px; border-radius: 6px; font-size: calc(12px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-btn:hover { filter: brightness(1.1); }

.wb-rail-icon[data-wb-tip] { position: relative; }
.wb-rail-icon[data-wb-tip]::after {
    content: attr(data-wb-tip);
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--wb-panel, #181d23); color: var(--wb-fg, #e5e7ea);
    border: 1px solid var(--wb-border, #2a2f37); border-radius: 4px;
    padding: 3px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 500; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease 0.25s;
    z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.wb-rail-icon[data-wb-tip]:hover::after { opacity: 1; }

.wb-extract-host { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.rx.rx--peacock-embedded {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex; flex: 1; min-height: 0; width: 100%;
}
.rx.rx--peacock-embedded [data-role="rx-side"]    { flex: 0 0 auto; }
.rx.rx--peacock-embedded [data-role="rx-side2"]   { flex: 0 0 auto; }
.rx.rx--peacock-embedded [data-role="rx-content"] { flex: 1; min-width: 0; }

/* Added by shashank2104 on 09/03/2026 - R2026-265 - peacock's own footer under the embedded
   Response Extractor. The extractor is a whole app and owns no way back to the model, so the mode
   provides one.
   ⚠ It is a SIBLING of `.rx`, not a child — `.wb-extract-host` is the flex column and `.rx` takes the
   remaining height, so the footer must be `flex: 0 0 auto` or the extractor's own `flex: 1` pushes it
   off the bottom.
   ⚠ Styled from `--wb-*` and scoped under `.peacock-workbench`, mirroring `.wb-follow-foot` — the
   footer convention every other tool in this shell follows. Its first cut used Bootstrap's
   `btn btn-sm btn-primary` with `--d3v-*` tokens and read as a control from a different app. */
.peacock-workbench .wb-extract-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--wb-border);
    background: var(--wb-panel);
}
.peacock-workbench .wb-extract-foot .wb-extract-sp { flex: 1; }
.peacock-workbench .wb-extract-stat {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-extract-foot button {
    height: 30px; padding: 0 12px; border-radius: var(--wb-radius-sm, 4px);
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background var(--wb-t, .15s) ease, border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-extract-foot button:hover:not([disabled]) {
    background: var(--wb-row-hover); border-color: var(--wb-border-strong, var(--wb-accent, #4a90d9));
}
.peacock-workbench .wb-extract-foot button[disabled] {
    opacity: .4; cursor: not-allowed; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-extract-foot button.is-primary {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-extract-foot button.is-primary:hover:not([disabled]) {
    filter: brightness(1.08); border-color: var(--wb-accent);
}

.wb-tree-empty { padding: 24px 16px; text-align: center; color: var(--wb-fg-muted, #9ba3ad); }
.wb-tree-empty > .fa { font-size: calc(32px * var(--wb-font-scale, 1)); opacity: 0.25; display: block; margin-bottom: 10px; }
.wb-tree-empty p { margin: 4px 0; font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-tree-empty-hint { color: var(--wb-fg-muted, #9ba3ad); }
.wb-tree-empty-hint strong { color: var(--wb-fg, #e5e7ea); font-weight: 600; }

.wb-viewport-empty {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    z-index: 4; pointer-events: none;
    background: var(--wb-bg, #0f1318);
}
.peacock-workbench.is-empty-canvas .wb-viewport-empty { display: flex; pointer-events: auto; }
.peacock-workbench.is-empty-canvas .wb-transport { display: none; }
.peacock-workbench.is-empty-canvas .peacock-rendering-canvas,
.peacock-workbench.is-empty-canvas .wb-viewport > canvas { visibility: hidden; }
/** Added by shashank2104 on 08/21/2026 at 11:01 PM - nothing is loaded on the kickstart
 *  landing, so the scene bar's camera/projection controls and the floating view-controls must not
 *  sit under the Drop-files card. Transport was already hidden here; the dock was left mounted and
 *  read as a live 3D toolbar.
 *
 *  Updated by shashank2104 on 09/03/2026 - the R2026-267 change that kept the dock (activity log +
 *  command prompt) up on the landing is reverted: the empty landing shows only the Drop-files card,
 *  so the whole dock goes down again along with the floating view controls. The prompt and the log
 *  come back the moment a model renders and `is-empty-canvas` clears. **/
.peacock-workbench.is-empty-canvas .wb-view-controls,
.peacock-workbench.is-empty-canvas .wb-dock { display: none; }
.wb-viewport-empty-inner {
    max-width: 420px; text-align: center; color: var(--wb-fg-muted, #9ba3ad);
    padding: 30px 24px;
}
.wb-viewport-empty-icon {
    font-size: calc(64px * var(--wb-font-scale, 1)); opacity: 0.18; display: block; margin-bottom: 18px;
    color: var(--wb-fg, #e5e7ea);
}
.wb-viewport-empty h2 {
    margin: 0 0 8px; font-size: calc(18px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg, #e5e7ea); letter-spacing: 0.2px;
}
.wb-viewport-empty p { margin: 0 0 22px; font-size: calc(13px * var(--wb-font-scale, 1)); line-height: 1.5; }
.wb-viewport-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.wb-viewport-empty-actions .wb-btn {
    background: var(--wb-panel, #181d23); color: var(--wb-fg, #e5e7ea);
    border: 1px solid var(--wb-border, #2a2f37);
    padding: 8px 14px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 500;
}
.wb-viewport-empty-actions .wb-btn:hover {
    background: var(--wb-row-hover, #2a2f37); border-color: var(--wb-accent, #4c8df6);
    color: var(--wb-fg, #fff);
}

.peacock-workbench.is-leftpane-collapsed .wb-leftpane { display: none; }

/* ----------------------------------------------------------------------------
   DVFIV-2050 / R2026-28 - buffering progress indicator.
   Redesigned into a SLIM, NON-BLOCKING pill docked bottom-centre above the
   transport (was a full-viewport blur curtain that hid the model). It floats
   over the viewport with pointer-events:none, so the car stays visible AND
   the user can still scrub / rotate / pause while frames buffer behind it.
   Scoped + theme-token driven so it adapts to every workbench theme.
   ---------------------------------------------------------------------------- */
.peacock-workbench .wb-buffer-loader {
    position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%);
    z-index: 60; pointer-events: none;           /* click-through: never blocks the viewport */
    display: flex; justify-content: center; max-width: 92%;
    opacity: 0; animation: wbBufFade .28s ease forwards;
}
.peacock-workbench .wb-buffer-loader.is-done { animation: wbBufOut .32s ease forwards; }
@keyframes wbBufFade { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes wbBufOut  { to { opacity: 0; transform: translate(-50%, 8px); } }

.peacock-workbench .wb-buffer-card {
    display: flex; align-items: center; gap: 13px;
    min-width: 300px; max-width: 460px;
    padding: 9px 16px 9px 11px;
    background: color-mix(in srgb, var(--wb-panel) 90%, transparent);
    -webkit-backdrop-filter: blur(9px) saturate(120%); backdrop-filter: blur(9px) saturate(120%);
    border: 1px solid var(--wb-border);
    border-radius: 999px;
    box-shadow: 0 12px 34px -10px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--wb-accent) 10%, transparent);
}

.peacock-workbench .wb-buffer-ring { position: relative; flex: 0 0 auto; width: 34px; height: 34px; }
.peacock-workbench .wb-buffer-ring svg { width: 34px; height: 34px; transform: rotate(-90deg); }
.peacock-workbench .wb-buffer-ring-bg { fill: none; stroke: var(--wb-border); stroke-width: 3; }
.peacock-workbench .wb-buffer-ring-fg {
    fill: none; stroke: var(--wb-accent); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 56 94;
    transform-origin: 50% 50%; animation: wbBufSpin 1s linear infinite;
}
@keyframes wbBufSpin { to { transform: rotate(360deg); } }
.peacock-workbench .wb-buffer-ring i {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--wb-accent); font-size: calc(12px * var(--wb-font-scale, 1));
}

.peacock-workbench .wb-buffer-body { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-buffer-title {
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: .1px;
    color: var(--wb-fg); margin-bottom: 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.peacock-workbench .wb-buffer-track {
    height: 5px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--wb-fg) 12%, transparent);
}
.peacock-workbench .wb-buffer-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--wb-accent) 70%, #fff) 0%, var(--wb-accent) 100%);
    transition: width .35s cubic-bezier(.2,.8,.2,1);
    position: relative; overflow: hidden;
}
.peacock-workbench .wb-buffer-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-100%); animation: wbBufShimmer 1.25s ease-in-out infinite;
}
@keyframes wbBufShimmer { to { transform: translateX(100%); } }

.peacock-workbench .wb-buffer-meta {
    flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px;
    font-size: calc(11px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-buffer-count {
    color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.peacock-workbench .wb-buffer-pct { color: var(--wb-accent); font-weight: 700; font-size: calc(13px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Added by shashank2104 on 06/29/2026 - R2026-28 - BOM table view (hosted in the dock)
   The unified BOM table (Group by None/Entity/Material). Component classes are scoped
   under .wb-bom so they never collide with the global .wb-btn / .wb-chip definitions.
   ============================================================================ */
.peacock-workbench .wb-bom { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--wb-panel); color: var(--wb-fg); }
.peacock-workbench .wb-bom .wb-spacer { flex: 1 1 auto; }
.peacock-workbench .wb-bom .wb-mut { color: var(--wb-fg-muted); }

/* settings bar (search + chips + group-by + columns + export) */
.peacock-workbench .wb-bom-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 12px; border-bottom: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.peacock-workbench .wb-bom-bar2 {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-bom-groupby { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-fringe { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-fringe .fa { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-fringe .wb-bom-fringe-select { max-width: 180px; }
.peacock-workbench .wb-bom .wb-select {
    height: 30px; padding: 4px 8px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); cursor: pointer;
}
.peacock-workbench .wb-bom .wb-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 180px; min-width: 150px; }
.peacock-workbench .wb-bom .wb-search .fa { position: absolute; left: 9px; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); pointer-events: none; }
.peacock-workbench .wb-bom .wb-search input {
    width: 100%; height: 30px; padding: 4px 8px 4px 26px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.peacock-workbench .wb-bom .wb-search input:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent) 25%, transparent); }
.peacock-workbench .wb-bom .wb-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: calc(11px * var(--wb-font-scale, 1)); border-radius: 999px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg); cursor: pointer; white-space: nowrap;
}
.peacock-workbench .wb-bom .wb-chip:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-bom .wb-chip.is-active { background: var(--wb-accent); color: var(--wb-accent-fg); border-color: var(--wb-accent); }
.peacock-workbench .wb-bom .wb-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
    padding: 4px 9px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.3; color: var(--wb-fg); white-space: nowrap;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.peacock-workbench .wb-bom .wb-btn:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-bom .wb-btn[disabled], .peacock-workbench .wb-bom .wb-btn.is-disabled { opacity: .4; pointer-events: none; }
/* active-state highlight for the stateful bulk actions (Focus / Fringe Selected) */
.peacock-workbench .wb-bom .wb-btn.is-active { background: var(--wb-accent); color: var(--wb-accent-fg); border-color: var(--wb-accent); }
.peacock-workbench .wb-bom .wb-btn.is-active:hover { background: var(--wb-accent); }
/* momentary click pulse for action buttons (Reverse) */
.peacock-workbench .wb-bom .wb-btn.is-flash { animation: wb-bom-btn-flash .65s ease-out; }
@keyframes wb-bom-btn-flash { from { background: var(--wb-accent); color: var(--wb-accent-fg); border-color: var(--wb-accent); } }
.peacock-workbench .wb-bom .wb-badge {
    display: inline-block; padding: 2px 8px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.4; border-radius: 999px;
    background: var(--wb-panel-2); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-bom .wb-badge.is-num { background: color-mix(in srgb, var(--wb-accent) 14%, transparent); color: var(--wb-accent); }
/* R2026-171 - merge Source badge: a distinct accent chip so a part's origin deck reads at a glance */
.peacock-workbench .wb-bom .wb-badge.wb-bom-source {
    background: color-mix(in srgb, var(--wb-accent) 12%, transparent); color: var(--wb-accent);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

/* shared faded-parts opacity slider (Focus + Fringe Selected) */
.peacock-workbench .wb-bom-ghost {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: calc(11px * var(--wb-font-scale, 1)); white-space: nowrap;
    color: var(--wb-fg-muted); background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
.peacock-workbench .wb-bom-ghost .fa { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-ghost .wb-bom-ghost-slider { width: 78px; height: 4px; cursor: pointer; accent-color: var(--wb-accent); }
.peacock-workbench .wb-bom-ghost .wb-bom-ghost-val { color: var(--wb-accent); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* columns show/hide dropdown */
.peacock-workbench .wb-bom-colwrap { position: relative; display: inline-flex; }
.peacock-workbench .wb-bom-colmenu {
    position: absolute; z-index: 60; right: 0; top: calc(100% + 4px); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius); box-shadow: 0 8px 24px rgba(0,0,0,.35);
    padding: 6px; min-width: 190px; max-height: 320px; overflow: auto;
}
/* the real stylesheet has no generic .is-hidden rule, so hide the columns menu explicitly */
.peacock-workbench .wb-bom-colmenu.is-hidden { display: none; }
.peacock-workbench .wb-bom-colmenu label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--wb-radius-sm); cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-bom-colmenu label:hover { background: var(--wb-row-hover); }

/* table */
/* overflow-anchor:none - the windowed body swaps the tbody under the scroller; scroll anchoring would move scrollTop mid-paint */
.peacock-workbench .wb-bom-tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-anchor: none; }
.peacock-workbench .wb-bom-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(12px * var(--wb-font-scale, 1)); }
/* compact every column to its content; only Name grows to take the remaining width */
/* every real column shrinks to its content; the trailing spacer absorbs the slack so rows still span full width */
.peacock-workbench .wb-bom-table th:not(.wb-bom-spacer),
.peacock-workbench .wb-bom-table tbody td:not(.wb-bom-spacer) { width: 1%; white-space: nowrap; }
.peacock-workbench .wb-bom-table .wb-bom-spacer { width: auto; padding: 0; border-bottom: 1px solid var(--wb-border); }
.peacock-workbench .wb-bom-table th.wb-bom-chkcol,
.peacock-workbench .wb-bom-table tbody td.wb-bom-chkcol { width: 35px; min-width: 35px; max-width: 35px; padding-left: 6px; padding-right: 6px; }
/* Name absorbs the leftover width so every other column (incl. the fixed 35px checkbox) stays content-sized */
.peacock-workbench .wb-bom-table th.wb-bom-namecol,
.peacock-workbench .wb-bom-table tbody td.wb-bom-name-cell { width: 100%; }
.peacock-workbench .wb-bom-table thead th {
    position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); padding: 7px 10px; border-bottom: 1px solid var(--wb-border); white-space: nowrap; user-select: none;
}
.peacock-workbench .wb-bom-table thead th.is-sortable { cursor: pointer; }
.peacock-workbench .wb-bom-table thead th.is-sortable:hover { color: var(--wb-fg); }
.peacock-workbench .wb-bom-table thead th .fa { font-size: calc(10px * var(--wb-font-scale, 1)); margin-left: 4px; opacity: .65; }
.peacock-workbench .wb-bom-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--wb-border); color: var(--wb-fg); vertical-align: middle; }
.peacock-workbench .wb-bom-table tbody tr { transition: background .12s ease; }
/* striping is class-based (is-even from the row's absolute index): the windowed body prepends a
   spacer row, so nth-child parity would flip on every window move */
.peacock-workbench .wb-bom-table tbody tr.is-even:not(.wb-bom-group) { background: color-mix(in srgb, var(--wb-panel-2) 50%, transparent); }
.peacock-workbench .wb-bom-table tbody tr.wb-bom-vspacer td { padding: 0; border: 0; height: 0; }
.peacock-workbench .wb-bom-table tbody tr.wb-bom-vspacer:hover { background: transparent; }
.peacock-workbench .wb-bom-table tbody tr:hover:not(.wb-bom-group) { background: var(--wb-row-hover); }
.peacock-workbench .wb-bom-table tbody tr.is-selected { background: color-mix(in srgb, var(--wb-accent) 16%, transparent); }
/* MM-182: the row of the part currently highlighted in the 3D view (scene -> BOM brushing).
   Stronger than hover/selected + an accent rule down the left edge so the just-picked part stands out. */
.peacock-workbench .wb-bom-table tbody tr.wb-bom-brush:not(.wb-bom-group),
.peacock-workbench .wb-bom-table tbody tr.wb-bom-brush.is-selected:not(.wb-bom-group) {
    background: color-mix(in srgb, var(--wb-accent) 30%, transparent);
    box-shadow: inset 3px 0 0 var(--wb-accent);
}
.peacock-workbench .wb-bom-table .wb-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-bom-table .wb-col-center { text-align: center; }
/* editable part name (double-click to rename, restore icon when edited) */
.peacock-workbench .wb-bom-table td.wb-bom-name-cell { overflow: hidden; text-align: left; }
.peacock-workbench .wb-bom-nameflex { display: flex; align-items: center; gap: 6px; min-width: 0; }
.peacock-workbench .wb-bom-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.peacock-workbench .wb-bom-name-restore { flex: 0 0 auto; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-bom-name-restore:hover { color: var(--wb-accent); }
/* R2026-308 - the row's *PART card in the Keyword Editor: shown on row hover, after the name */
.peacock-workbench .wb-bom-edit { flex: 0 0 auto; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); opacity: .45; transition: opacity var(--d3v-t-fast, .12s), color var(--d3v-t-fast, .12s); }
.peacock-workbench .wb-bom-table tr:hover .wb-bom-edit, .peacock-workbench .wb-bom-table tr.is-selected .wb-bom-edit { opacity: 1; }
.peacock-workbench .wb-bom-edit:hover { color: var(--wb-accent); }
.peacock-workbench .wb-bom-name-input { width: 100%; height: 24px; padding: 2px 6px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-accent); border-radius: var(--wb-radius-sm); outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent) 25%, transparent); }
/* jQuery UI selectable — rubber-band drag-select of rows */
.peacock-workbench .wb-bom-table tbody.ui-selectable tr[data-bom-id] { cursor: default; }
.peacock-workbench .wb-bom-table tbody tr.ui-selecting:not(.wb-bom-group) { background: color-mix(in srgb, var(--wb-accent) 10%, transparent); }
.peacock-workbench .wb-bom-table tbody tr.ui-selected:not(.wb-bom-group) { background: color-mix(in srgb, var(--wb-accent) 16%, transparent); }
.peacock-workbench .wb-bom .ui-selectable-helper {
    position: absolute; z-index: 100; border: 1px dotted var(--wb-accent);
    background: color-mix(in srgb, var(--wb-accent) 12%, transparent);
}
.peacock-workbench .wb-bom-table td.is-disabled-row, .peacock-workbench .wb-bom-table tr.is-disabled-row td { opacity: .5; }
.peacock-workbench .wb-bom .wb-check { width: 14px; height: 14px; accent-color: var(--wb-accent); cursor: pointer; vertical-align: middle; }

/* group rows (Entity / Material grouping) */
.peacock-workbench .wb-bom-table tr.wb-bom-group td {
    background: var(--wb-panel-2); font-weight: 600; cursor: pointer; user-select: none;
    border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-bom-table tr.wb-bom-group:hover td { background: var(--wb-row-hover); }
.peacock-workbench .wb-bom-table tr.wb-bom-group .fa { width: 12px; margin-right: 4px; color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-table tr.wb-bom-group .wb-bom-group-sub { font-weight: 400; color: var(--wb-fg-muted); margin-left: 14px; }

/* toggle switch + color swatch */
.peacock-workbench .wb-bom .wb-switch { position: relative; display: inline-block; width: 34px; height: 18px; cursor: pointer; }
.peacock-workbench .wb-bom .wb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.peacock-workbench .wb-bom .wb-switch .wb-switch-track { position: absolute; inset: 0; background: var(--wb-border); border-radius: 999px; transition: background .15s ease; }
.peacock-workbench .wb-bom .wb-switch .wb-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.peacock-workbench .wb-bom .wb-switch input:checked + .wb-switch-track { background: var(--wb-accent); }
.peacock-workbench .wb-bom .wb-switch input:checked + .wb-switch-track::after { transform: translateX(16px); }
.peacock-workbench .wb-bom-colorflex { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.peacock-workbench .wb-bom-color-restore { flex: 0 0 auto; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-bom-color-restore:hover { color: var(--wb-accent); }
.peacock-workbench .wb-bom .wb-swatch { display: inline-block; width: 34px; height: 18px; padding: 0; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); cursor: pointer; background: none; vertical-align: middle; }
.peacock-workbench .wb-bom input[type="color"].wb-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.peacock-workbench .wb-bom input[type="color"].wb-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }

/* footer */
.peacock-workbench .wb-bom-foot { flex: 0 0 auto; padding: 6px 12px; border-top: 1px solid var(--wb-border); color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); display: flex; align-items: center; gap: 14px; }

/* R2026-308 - materials + sections in the BOM: the Missing chips, the pill cells, the Assign group, the foot counts */
.peacock-workbench .wb-bom-kindchips { display: inline-flex; align-items: center; gap: 6px; }
.peacock-workbench .wb-bom-kindchips:not(:empty) { padding-left: 8px; border-left: 1px solid var(--wb-border); }
.peacock-workbench .wb-bom .wb-chip.is-missing { color: var(--d3v-danger); border-color: color-mix(in srgb, var(--d3v-danger) 35%, transparent); background: color-mix(in srgb, var(--d3v-danger) 9%, var(--wb-panel)); }
.peacock-workbench .wb-bom .wb-chip.is-missing b { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.peacock-workbench .wb-bom .wb-chip.is-missing:hover { background: color-mix(in srgb, var(--d3v-danger) 16%, var(--wb-panel)); }
.peacock-workbench .wb-bom .wb-chip.is-missing.is-active { background: var(--d3v-danger); border-color: var(--d3v-danger); color: #fff; }
.peacock-workbench .wb-bom-kindcell { max-width: 340px; }
.peacock-workbench .wb-bom-kind {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; padding: 3px 8px 3px 6px; border-radius: var(--d3v-r-md);
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; overflow: hidden; line-height: 16px;
    transition: background var(--d3v-t-fast, .12s), border-color var(--d3v-t-fast, .12s);
}
.peacock-workbench .wb-bom-kind-l1 { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.peacock-workbench .wb-bom-kind-l2 { display: flex; align-items: center; gap: 6px; max-width: 100%; padding-left: 16px; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-kind-l2 > span { overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace; }
.peacock-workbench .wb-bom-kind.is-missing .wb-bom-kind-l2 { padding-left: 17px; color: var(--d3v-danger); opacity: .75; font-weight: 500; }
.peacock-workbench .wb-bom-kind.is-missing .wb-bom-kind-l1 .fa-exclamation-circle { font-size: 11px; }
.peacock-workbench .wb-bom-kindcell { padding-top: 3px; padding-bottom: 3px; }
.peacock-workbench .wb-bom-kind.is-none { cursor: default; color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-kind.is-none:hover { background: transparent; border-color: transparent; }
.peacock-workbench .wb-bom-kind.is-none .wb-bom-kind-l2 { padding-left: 0; }
.peacock-workbench .wb-bom-kind:hover { background: var(--wb-panel); border-color: var(--wb-border); }
.peacock-workbench .wb-bom-kind b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-family: ui-monospace, Menlo, monospace; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-kind-fam {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-weight: 500;
    font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 16px; padding: 0 6px; border-radius: 999px;
    color: var(--wb-fg-muted); background: color-mix(in srgb, var(--wb-fg-muted) 12%, transparent);
}
.peacock-workbench .wb-bom-kind-fam.is-steel { color: var(--wb-fg); background: color-mix(in srgb, var(--wb-fg) 12%, transparent); }
.peacock-workbench .wb-bom-kind-fam.is-alu { color: var(--d3v-info); background: color-mix(in srgb, var(--d3v-info) 14%, transparent); }
.peacock-workbench .wb-bom-kind-fam.is-soft { color: var(--d3v-warning); background: color-mix(in srgb, var(--d3v-warning) 16%, transparent); }
.peacock-workbench .wb-bom-kind-fam.is-rigid { color: var(--d3v-accent-hover); background: color-mix(in srgb, var(--d3v-accent) 14%, transparent); }
.peacock-workbench .wb-bom-kind .fa-caret-down { font-size: 10px; color: var(--wb-fg-muted); opacity: 0; transition: opacity var(--d3v-t-fast, .12s); }
.peacock-workbench .wb-bom-kind:hover .fa-caret-down { opacity: 1; }
.peacock-workbench .wb-bom-kind.is-missing { color: var(--d3v-danger); font-weight: 600; background: color-mix(in srgb, var(--d3v-danger) 9%, var(--wb-panel)); border-color: color-mix(in srgb, var(--d3v-danger) 35%, transparent); }
.peacock-workbench .wb-bom-kind.is-missing b { color: var(--d3v-danger); opacity: .8; }
.peacock-workbench .wb-bom-kind.is-missing:hover { background: color-mix(in srgb, var(--d3v-danger) 16%, var(--wb-panel)); }
.peacock-workbench .wb-bom-kind-dot, .wb-bom-assign-pop .wb-bom-kind-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.peacock-workbench .wb-bom-assign { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--wb-border); font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-bom-assign-group { display: inline-flex; }
.peacock-workbench .wb-bom-assign-group .wb-btn { border-radius: 0; margin-left: -1px; }
.peacock-workbench .wb-bom-assign-group .wb-btn:first-child { border-radius: var(--d3v-r-sm) 0 0 var(--d3v-r-sm); margin-left: 0; }
.peacock-workbench .wb-bom-assign-group .wb-btn:last-child { border-radius: 0 var(--d3v-r-sm) var(--d3v-r-sm) 0; }
.peacock-workbench .wb-bom-assign-group .wb-btn:not([disabled]) { background: var(--wb-accent); color: var(--wb-accent-fg); border-color: var(--wb-accent); }
.peacock-workbench .wb-bom-assign-group .wb-btn:not([disabled]):hover { filter: brightness(1.08); }
.peacock-workbench .wb-bom .wb-chip.is-missing .wb-bom-fixall { margin-left: 4px; padding-left: 6px; border-left: 1px solid color-mix(in srgb, var(--d3v-danger) 35%, transparent); color: inherit; font-weight: 600; text-decoration: none; transition: opacity var(--d3v-t-fast, .12s); }
.peacock-workbench .wb-bom .wb-chip.is-missing .wb-bom-fixall:hover { opacity: .75; }
.peacock-workbench .wb-bom .wb-chip.is-missing.is-active .wb-bom-fixall { border-left-color: rgba(255,255,255,.45); }

/* the assign picker mounts on <body> (Plugins.Helpers.Popover), so it is scoped by its own class and uses --d3v-* only */
.wb-bom-assign-pop .pl-popover-body { padding: 0; }
.wb-bom-assign-pop .wb-bom-assign-pop-body { font-size: 12px; color: var(--d3v-text-primary); }
.wb-bom-assign-pop .wb-bom-assign-search { position: relative; display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--d3v-border); }
.wb-bom-assign-pop .wb-bom-assign-search .fa { position: absolute; left: 21px; color: var(--d3v-text-muted); font-size: 11px; pointer-events: none; }
.wb-bom-assign-pop .wb-bom-assign-q { width: 100%; height: 30px; padding: 0 8px 0 26px; border: 1px solid var(--d3v-border-strong); border-radius: var(--d3v-r-md); background: var(--d3v-bg-primary); color: var(--d3v-text-primary); font: inherit; }
.wb-bom-assign-pop .wb-bom-assign-q:focus { outline: none; border-color: var(--d3v-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--d3v-accent) 25%, transparent); }
.wb-bom-assign-pop .wb-bom-assign-list { max-height: 280px; overflow: auto; padding: 4px 0; }
.wb-bom-assign-pop .wb-bom-assign-grp { display: block; padding: 8px 12px 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d3v-text-muted); }
.wb-bom-assign-pop .wb-bom-assign-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; transition: background var(--d3v-t-fast, .12s); }
.wb-bom-assign-pop .wb-bom-assign-item:hover { background: var(--d3v-bg-hover); }
.wb-bom-assign-pop .wb-bom-assign-item.is-current { background: var(--d3v-bg-tertiary); }
.wb-bom-assign-pop .wb-bom-assign-title { flex: 0 1 auto; max-width: 44%; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-bom-assign-pop .wb-bom-assign-id { flex: 0 0 auto; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--d3v-text-secondary); }
.wb-bom-assign-pop .wb-bom-assign-sub { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--d3v-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-bom-assign-pop .wb-bom-assign-count, .wb-bom-assign-pop .wb-bom-assign-why { flex: 0 0 auto; }
.wb-bom-assign-pop .wb-bom-assign-count { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--d3v-text-muted); }
.wb-bom-assign-pop .wb-bom-assign-why { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--d3v-success); background: color-mix(in srgb, var(--d3v-success) 12%, transparent); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.wb-bom-assign-pop .wb-bom-assign-empty { padding: 14px 12px; color: var(--d3v-text-muted); }
.wb-bom-assign-pop .wb-bom-assign-foot { padding: 8px 12px; border-top: 1px solid var(--d3v-border); background: var(--d3v-bg-secondary); color: var(--d3v-text-secondary); font-size: 12px; }
.wb-bom-assign-pop .wb-bom-assign-foot b { color: var(--d3v-text-primary); }
.wb-bom-assign-pop .wb-bom-assign-foot { display: flex; align-items: center; gap: 8px; }
.wb-bom-assign-pop .wb-bom-assign-edit { margin-left: auto; flex: 0 0 auto; font-weight: 600; color: var(--d3v-accent); text-decoration: none; white-space: nowrap; }
.wb-bom-assign-pop .wb-bom-assign-edit:hover { color: var(--d3v-accent-hover); text-decoration: underline; }
.wb-bom-assign-pop .wb-bom-assign-edit .fa { margin-right: 3px; font-size: 11px; }

/* thin scrollbars to match the rest of the shell */
.peacock-workbench .wb-bom-tablewrap::-webkit-scrollbar,
.peacock-workbench .wb-bom-colmenu::-webkit-scrollbar { width: 9px; height: 9px; }
.peacock-workbench .wb-bom-tablewrap::-webkit-scrollbar-thumb,
.peacock-workbench .wb-bom-colmenu::-webkit-scrollbar-thumb { background: var(--wb-border); border-radius: 6px; }
.peacock-workbench .wb-bom-tablewrap::-webkit-scrollbar-thumb:hover { background: var(--wb-fg-muted); }


/* ============================================================================
 *  R2026-28 - Explode + Energy Absorption dock panel
 *  Added by shashank2104 on 06/29/2026. Scoped under .peacock-workbench; uses the
 *  --wb-* foundation tokens plus a local energy heat ramp (--wb-e0..--wb-e5).
 * ========================================================================== */
.peacock-workbench {
    --wb-e0: #2c5cc5; --wb-e1: #1fa3a3; --wb-e2: #7ec636;
    --wb-e3: #f2c200; --wb-e4: #f08a24; --wb-e5: #e23b2e;
}
.peacock-workbench .wb-explode { font-size: calc(12px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-explode-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 7px 2px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-explode-row b { font-weight: 600; }
.peacock-workbench .wb-explode-sub { display: block; color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-explode-ctl { margin: 10px 0; }
.peacock-workbench .wb-explode-lab {
    display: flex; justify-content: space-between; align-items: center;
    font-size: calc(11px * var(--wb-font-scale, 1)); margin-bottom: 5px; color: var(--wb-fg);
}
.peacock-workbench .wb-explode-lab b { color: var(--wb-accent); font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-explode-spread,
.peacock-workbench .wb-explode-time {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    border-radius: 4px; background: var(--wb-border); outline: none; cursor: pointer;
}
.peacock-workbench .wb-explode-spread::-webkit-slider-thumb,
.peacock-workbench .wb-explode-time::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid var(--wb-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.peacock-workbench .wb-explode-metric {
    width: 100%; padding: 6px 8px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel-2); color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: pointer;
}
.peacock-workbench .wb-explode-seg {
    display: flex; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); overflow: hidden;
}
.peacock-workbench .wb-explode-seg button {
    flex: 1; border: none; border-right: 1px solid var(--wb-border); background: var(--wb-panel);
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); padding: 6px 4px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-explode-seg button:last-child { border-right: none; }
.peacock-workbench .wb-explode-seg button.is-on { background: var(--wb-accent); color: var(--wb-accent-fg); font-weight: 600; }
.peacock-workbench .wb-explode-seg button:not(.is-on):hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-explode-switch {
    position: relative; width: 34px; height: 19px; border-radius: 11px; background: var(--wb-border);
    cursor: pointer; transition: .2s; flex: 0 0 auto;
}
.peacock-workbench .wb-explode-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.peacock-workbench .wb-explode-switch.is-on { background: #1f8a4c; }
.peacock-workbench .wb-explode-switch.is-on::after { left: 17px; }
.peacock-workbench .wb-explode-legend { margin: 8px 0 4px; }
.peacock-workbench .wb-explode-legend-bar {
    height: 11px; border-radius: 6px;
    background: linear-gradient(90deg, var(--wb-e0), var(--wb-e1), var(--wb-e2), var(--wb-e3), var(--wb-e4), var(--wb-e5));
}
.peacock-workbench .wb-explode-legend-sc {
    display: flex; justify-content: space-between; font-size: calc(9px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-top: 3px;
}
.peacock-workbench .wb-explode-list { margin-top: 4px; }
.peacock-workbench .wb-explode-erow {
    display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-explode-erow:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-explode-erow.is-dim { opacity: .4; }
.peacock-workbench .wb-explode-erow.is-spot { background: var(--wb-row-hover); box-shadow: inset 2px 0 0 #16d96a; }
.peacock-workbench .wb-explode-rk { font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted); width: 16px; text-align: right; }
.peacock-workbench .wb-explode-swatch { width: 9px; height: 24px; border-radius: 3px; flex: 0 0 auto; }
.peacock-workbench .wb-explode-meta { flex: 1; min-width: 0; }
.peacock-workbench .wb-explode-nm { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.peacock-workbench .wb-explode-ebar { height: 5px; border-radius: 3px; background: var(--wb-border); margin-top: 3px; overflow: hidden; }
.peacock-workbench .wb-explode-ebar i { display: block; height: 100%; border-radius: 3px; }
.peacock-workbench .wb-explode-val { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wb-fg); flex: 0 0 auto; }
.peacock-workbench .wb-explode-divider { height: 1px; background: var(--wb-border); margin: 12px -10px; }
.peacock-workbench .wb-explode-phase {
    font-size: calc(8px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    background: var(--wb-panel-2); color: var(--wb-fg-muted); border: 1px solid var(--wb-border);
    border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}
.peacock-workbench .wb-explode-timewrap { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.peacock-workbench .wb-explode-play {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--wb-accent);
    background: var(--wb-accent); color: var(--wb-accent-fg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.peacock-workbench .wb-explode-readout { display: flex; gap: 8px; margin-top: 8px; }
.peacock-workbench .wb-explode-stat { flex: 1; background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: 7px; padding: 8px; }
.peacock-workbench .wb-explode-stat .k { font-size: calc(9px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .4px; color: var(--wb-fg-muted); }
.peacock-workbench .wb-explode-stat .v { font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; color: var(--wb-fg); }
.peacock-workbench .wb-explode-reset { width: 100%; }
.peacock-workbench .wb-explode-hint { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.45; margin: 8px 2px 0; }

/* R2026-28 - A2MAC1 explode cockpit additions (axis sliders + Reset row) */
.peacock-workbench .wb-explode-axis {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    border-radius: 4px; background: var(--wb-border); outline: none; cursor: pointer;
}
.peacock-workbench .wb-explode-axis::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid var(--wb-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.peacock-workbench .wb-explode-axtag {
    display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
    border-radius: 3px; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; color: #fff; margin-right: 2px;
}
.peacock-workbench .wb-explode-axtag.wb-ax-x { background: #e2483a; }
.peacock-workbench .wb-explode-axtag.wb-ax-y { background: #2f9e44; }
.peacock-workbench .wb-explode-axtag.wb-ax-z { background: #2c5cc5; }
.peacock-workbench .wb-explode-btnrow { display: flex; gap: 8px; margin-top: 6px; }
.peacock-workbench .wb-explode-btnrow .wb-btn { flex: 1; }


/* ============================================================================
 *  R2026-28 - Explode FLOATING panel (simplified, draggable over the viewport)
 *  Added by shashank2104 on 06/30/2026. A legible, slimmed-down companion to the
 *  bottom-dock Explode cockpit: master Spread + secondary X/Y/Z + color-by-energy
 *  + heat legend + top absorbers. Mounted INSIDE .peacock-workbench so the --wb-*
 *  tokens + theme variants cascade; position:fixed floats it over the viewport.
 *  Reuses the --wb-e0..--wb-e5 heat ramp.
 * ========================================================================== */
.peacock-workbench .wb-exf-panel {
    position: absolute; top: 14px; right: 14px; width: 268px; z-index: 50;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    box-shadow: 0 14px 40px rgba(15, 23, 42, .28);
    font-size: calc(12px * var(--wb-font-scale, 1)); overflow: hidden; user-select: none;
}
.peacock-workbench .wb-exf-panel.is-busy .wb-exf-body > :not(.wb-exf-prep) { opacity: .45; pointer-events: none; }
/* R2026-28 - INLINE variant: mounted inside the inspector Selection panel (no floating chrome). */
.peacock-workbench .wb-exf-panel.is-inline {
    position: static; top: auto; right: auto; width: auto; z-index: auto;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.peacock-workbench .wb-exf-panel.is-inline .wb-exf-hd {
    background: transparent; cursor: default; padding: 0 0 9px;
    border-bottom: 1px solid var(--wb-border); margin-bottom: 11px;
}
.peacock-workbench .wb-exf-panel.is-inline .wb-exf-body { padding: 0; max-height: none; overflow: visible; }

/* Added by shashank2104 on 07/01/2026 - R2026-28 - Connections panel docked in the bottom dock
   (Post-processing -> Connections + the in-canvas link). The shared connections layout lives under
   .peacock-viewer (peacock.css) and is keyed on --d3v-* tokens with LIGHT fallbacks — which clash with
   the dark workbench. We keep the layout (via the peacock-viewer host) but (a) neutralize the floating
   chrome and (b) REMAP --d3v-* -> --wb-* on the panel root so every descendant re-themes to the active
   workbench theme by inheritance (follows light/dark automatically). */
.peacock-workbench .wb-dock-connections-host { height: 100%; min-height: 0; }
.peacock-workbench .peacock-connections-div.is-inline {
    position: static; top: auto; right: auto; left: auto; bottom: auto; z-index: auto;
    width: 100%; height: 100%; max-height: none; min-height: 0;
    border: 0; border-radius: 0; box-shadow: none; cursor: default; resize: none;
    background: var(--wb-panel);
    /* Re-theme the whole panel: shared rules read these vars, so overriding them here cascades. */
    --d3v-bg-primary: var(--wb-panel);
    --d3v-bg-secondary: var(--wb-panel-2);
    --d3v-bg-hover: var(--wb-row-hover);
    --d3v-border: var(--wb-border);
    --d3v-text-primary: var(--wb-fg);
    --d3v-text-secondary: var(--wb-fg);
    --d3v-text-muted: var(--wb-fg-muted);
    --d3v-accent: var(--wb-accent);
}
.peacock-workbench .peacock-connections-div.is-inline .peacock-conn-header { cursor: default; }
.peacock-workbench .peacock-connections-div.is-inline .peacock-conn-body { min-height: 0; }
.peacock-workbench .peacock-connections-div.is-inline .peacock-connections-close-btn { display: none; }
/* Bootstrap .form-control (the Search box + settings inputs) stays white by default, and d3view.min.css
   pins its color to #000 !important — theme it, matching the !important so the text reads on dark. */
.peacock-workbench .peacock-connections-div.is-inline .form-control {
    background: var(--wb-panel-2); color: var(--wb-fg) !important;
    border-color: var(--wb-border); box-shadow: none;
}
.peacock-workbench .peacock-connections-div.is-inline .form-control::placeholder { color: var(--wb-fg-muted); }
.peacock-workbench .peacock-connections-div.is-inline .form-control:focus {
    border-color: var(--wb-accent); box-shadow: 0 0 0 2px rgba(74, 126, 181, 0.25);
}
/* Settings gear popover (Master/Slave color + Apply) is a Bootstrap .dropdown-menu — theme it dark. */
.peacock-workbench .peacock-connections-div.is-inline .dropdown-menu {
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); border-radius: var(--wb-radius);
}
.peacock-workbench .peacock-connections-div.is-inline .dropdown-menu label { color: var(--wb-fg-muted); font-weight: 600; }
.peacock-workbench .peacock-connections-div.is-inline .dropdown-menu input[type="color"] { padding: 2px; height: 32px; cursor: pointer; }
.peacock-workbench .peacock-connections-div.is-inline .dropdown-menu .btn-primary {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}

/* ── Modern tree view util (Peacock.Workbench.Views.TreeView) — wb-* themed, reusable ── */
.peacock-workbench .pk-tree { font-size: calc(12px * var(--wb-font-scale, 1)); padding: 6px 0; user-select: none; }
.peacock-workbench .pk-tree-list { list-style: none; margin: 0; padding: 0; }
.peacock-workbench .pk-tree-node { position: relative; }
.peacock-workbench .pk-tree-actions { display: flex; gap: 5px; padding: 4px 8px 8px; }
.peacock-workbench .pk-tree-action {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted);
    background: transparent; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .pk-tree-action:hover { color: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .pk-tree-row {
    display: flex; align-items: center; gap: 7px; padding: 5px 10px; margin: 1px 6px;
    border-radius: var(--wb-radius-sm); cursor: pointer; color: var(--wb-fg);
    transition: background .12s, color .12s, box-shadow .12s;
}
.peacock-workbench .pk-tree-row:hover { background: var(--wb-row-hover); }
.peacock-workbench .pk-tree-row.is-active {
    background: var(--wb-row-hover); font-weight: 600; box-shadow: inset 2px 0 0 var(--wb-accent);
}
.peacock-workbench .pk-tree-caret {
    width: 12px; flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); text-align: center;
    color: var(--wb-fg-muted); cursor: pointer; transition: color .12s;
}
.peacock-workbench .pk-tree-caret:hover { color: var(--wb-accent); }
.peacock-workbench .pk-tree-caret-spacer { width: 12px; flex: 0 0 auto; }
.peacock-workbench .pk-tree-icon { flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .pk-tree-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .pk-tree-count {
    flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    padding: 0 7px; line-height: 16px; border-radius: 9999px;
}
.peacock-workbench .pk-tree-row.is-active .pk-tree-count { color: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .pk-tree-empty { padding: 12px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

.peacock-workbench .wb-exf-prep {
    display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin-bottom: 10px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); background: var(--wb-panel-2);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
.peacock-workbench .wb-exf-prep i { color: var(--wb-accent); }
.peacock-workbench .wb-exf-prep[hidden] { display: none; }   /* [hidden] must beat display:flex */
.peacock-workbench .wb-exf-hd {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border); cursor: grab;
}
.peacock-workbench .wb-exf-hd.is-grabbing { cursor: grabbing; }
.peacock-workbench .wb-exf-ttl { font-weight: 700; font-size: calc(12.5px * var(--wb-font-scale, 1)); display: flex; align-items: center; gap: 7px; }
.peacock-workbench .wb-exf-ttl i { color: var(--wb-accent); }
.peacock-workbench .wb-exf-badge {
    margin-left: auto; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    background: var(--wb-row-hover); color: var(--wb-accent); border: 1px solid var(--wb-border);
    padding: 2px 7px; border-radius: 20px;
}
.peacock-workbench .wb-exf-min,
.peacock-workbench .wb-exf-x {
    cursor: pointer; color: var(--wb-fg-muted); line-height: 1; padding: 0 3px; border-radius: var(--wb-radius-sm); transition: .12s;
}
.peacock-workbench .wb-exf-min { font-size: calc(15px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-exf-x { font-size: calc(17px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-exf-min:hover { color: var(--wb-accent); background: var(--wb-row-hover); }
.peacock-workbench .wb-exf-x:hover { color: #e23b2e; background: var(--wb-row-hover); }
.peacock-workbench .wb-exf-body { padding: 11px; max-height: calc(100vh - 180px); overflow-y: auto; }
.peacock-workbench .wb-exf-panel.is-min .wb-exf-body { display: none; }
.peacock-workbench .wb-exf-panel.is-min .wb-exf-hd { border-bottom: 0; cursor: default; }

.peacock-workbench .wb-exf-ctl { margin-bottom: 12px; }
.peacock-workbench .wb-exf-lab {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-exf-lab b { color: var(--wb-accent); font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-exf-lab-l { display: inline-flex; align-items: center; gap: 7px; }
/* R2026-28 - animate-spread play toggle */
.peacock-workbench .wb-exf-play {
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    width: 19px; height: 19px; border-radius: 50%; font-size: calc(8px * var(--wb-font-scale, 1)); line-height: 1; cursor: pointer;
    background: transparent; border: 1px solid var(--wb-border); color: var(--wb-fg-muted); transition: .12s;
}
.peacock-workbench .wb-exf-play:hover { color: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-exf-play.is-playing { color: #fff; background: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-exf-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    border-radius: 4px; background: var(--wb-border); outline: none; cursor: pointer;
}
.peacock-workbench .wb-exf-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid var(--wb-accent); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.peacock-workbench .wb-exf-range.wb-exf-master::-webkit-slider-thumb { width: 17px; height: 17px; }

/* secondary axis disclosure */
.peacock-workbench .wb-exf-axtoggle {
    display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer; padding: 4px 0;
    margin-bottom: 6px; transition: .12s;
}
.peacock-workbench .wb-exf-axtoggle:hover { color: var(--wb-fg); }
.peacock-workbench .wb-exf-axtoggle i { transition: transform .15s; }
.peacock-workbench .wb-exf-axtoggle.is-open i { transform: rotate(90deg); }
.peacock-workbench .wb-exf-axes { padding: 2px 0 4px; }
.peacock-workbench .wb-exf-axrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.peacock-workbench .wb-exf-axtag {
    flex: 0 0 auto; width: 16px; height: 16px; line-height: 16px; text-align: center;
    border-radius: 3px; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; color: #fff;
}
.peacock-workbench .wb-exf-axtag.wb-ax-x { background: #e2483a; }
.peacock-workbench .wb-exf-axtag.wb-ax-y { background: #2f9e44; }
.peacock-workbench .wb-exf-axtag.wb-ax-z { background: #2c5cc5; }
.peacock-workbench .wb-exf-axrow .wb-exf-range { flex: 1; }
.peacock-workbench .wb-exf-axval { flex: 0 0 auto; width: 30px; text-align: right; font-size: calc(10px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--wb-fg-muted); }

/* color-by-energy row */
.peacock-workbench .wb-exf-divider { height: 1px; background: var(--wb-border); margin: 4px 0 12px; }
/* display:flex !important defeats the global `label { display:block !important }` in d3view.min.css,
   which otherwise collapses the toggle pill (a flex item) to 0px so only its knob shows over the text. */
.peacock-workbench .wb-exf-switchlab { display: flex !important; align-items: center; gap: 8px; cursor: pointer; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); margin-bottom: 9px; }
.peacock-workbench .wb-exf-switch {
    position: relative; width: 34px; height: 19px; border-radius: 11px; background: var(--wb-border);
    cursor: pointer; transition: .2s; flex: 0 0 auto;
}
.peacock-workbench .wb-exf-switch::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.peacock-workbench .wb-exf-switch.is-on { background: #1f8a4c; }
.peacock-workbench .wb-exf-switch.is-on::after { left: 17px; }
.peacock-workbench .wb-exf-metric {
    width: 100%; padding: 6px 8px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel-2); color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: pointer;
}
.peacock-workbench .wb-exf-metric:disabled { opacity: .5; cursor: not-allowed; }

/* heat legend */
.peacock-workbench .wb-exf-legend { margin: 10px 0 12px; }
.peacock-workbench .wb-exf-legend-bar {
    height: 10px; border-radius: 6px;
    background: linear-gradient(90deg, var(--wb-e0), var(--wb-e1), var(--wb-e2), var(--wb-e3), var(--wb-e4), var(--wb-e5));
}
.peacock-workbench .wb-exf-legend-sc { display: flex; justify-content: space-between; font-size: calc(9px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-top: 3px; }

/* top absorbers */
.peacock-workbench .wb-exf-listhd {
    font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--wb-fg-muted); margin: 4px 0 6px;
}
.peacock-workbench .wb-exf-total { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wb-fg-muted); }
.peacock-workbench .wb-exf-list { display: flex; flex-direction: column; gap: 2px; }
.peacock-workbench .wb-exf-erow {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-exf-erow:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-exf-erow.is-spot { background: var(--wb-row-hover); box-shadow: inset 2px 0 0 #16d96a; }
.peacock-workbench .wb-exf-rk { font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted); width: 13px; text-align: right; flex: 0 0 auto; }
.peacock-workbench .wb-exf-sw { width: 8px; height: 22px; border-radius: 3px; flex: 0 0 auto; }
.peacock-workbench .wb-exf-meta { flex: 1; min-width: 0; }
.peacock-workbench .wb-exf-nm { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.peacock-workbench .wb-exf-bar { height: 4px; border-radius: 3px; background: var(--wb-border); margin-top: 3px; overflow: hidden; }
.peacock-workbench .wb-exf-bar i { display: block; height: 100%; border-radius: 3px; }
.peacock-workbench .wb-exf-val { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wb-fg); flex: 0 0 auto; }
.peacock-workbench .wb-exf-val small { font-weight: 600; color: var(--wb-fg-muted); }
.peacock-workbench .wb-exf-empty { padding: 14px 6px; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); text-align: center; }
.peacock-workbench .wb-exf-loading { display: flex; align-items: center; justify-content: center; gap: 7px; }
.peacock-workbench .wb-exf-loading i { color: var(--wb-accent); }
.peacock-workbench .wb-exf-foot { margin-top: 12px; text-align: center; }
.peacock-workbench .wb-exf-resetlink { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-accent); text-decoration: none; cursor: pointer; }
.peacock-workbench .wb-exf-resetlink:hover { text-decoration: underline; }

/* ---- R2026-28 - Cut planes inspector panel (modern) ---- */
.peacock-workbench .wb-cut-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.peacock-workbench .wb-cut-hint { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.4; margin-bottom: 12px; }
.peacock-workbench .wb-cut-clear {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted); background: transparent; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-cut-clear:hover { color: var(--wb-danger); border-color: var(--wb-danger); }
.peacock-workbench .wb-cut-clear.is-hidden { display: none; }

.peacock-workbench .wb-cut-rows { display: flex; flex-direction: column; gap: 5px; }
.peacock-workbench .wb-cut-row {
    --ax: var(--wb-accent);
    display: flex; align-items: center; gap: 9px; padding: 7px 9px;
    border-radius: var(--wb-radius-sm); background: var(--wb-panel-2);
    border: 1px solid transparent; transition: background .14s, border-color .14s, box-shadow .14s;
}
.peacock-workbench .wb-cut-row:hover { border-color: var(--wb-border); }
.peacock-workbench .wb-cut-row.is-on { box-shadow: inset 3px 0 0 var(--ax); }
.peacock-workbench .wb-cut-row.wb-ax-x { --ax: #e2483a; }
.peacock-workbench .wb-cut-row.wb-ax-y { --ax: #2f9e44; }
.peacock-workbench .wb-cut-row.wb-ax-z { --ax: #2c5cc5; }

.peacock-workbench .wb-cut-tag {
    flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px; text-align: center;
    border-radius: 5px; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; color: #fff;
    background: var(--ax); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.peacock-workbench .wb-cut-slider {
    -webkit-appearance: none; appearance: none; flex: 1; height: 5px; border-radius: 4px;
    outline: none; cursor: pointer; transition: opacity .14s;
    background: linear-gradient(to right, var(--ax) var(--fill, 0%), var(--wb-border) var(--fill, 0%));
}
.peacock-workbench .wb-cut-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid var(--ax); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .1s;
}
.peacock-workbench .wb-cut-slider::-webkit-slider-thumb:hover { transform: scale(1.13); }
.peacock-workbench .wb-cut-slider::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--ax);
    cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.peacock-workbench .wb-cut-slider:disabled { opacity: .3; cursor: not-allowed; }

.peacock-workbench .wb-cut-val {
    flex: 0 0 auto; min-width: 34px; text-align: right; font-size: calc(11px * var(--wb-font-scale, 1));
    font-variant-numeric: tabular-nums; color: var(--wb-fg);
}
.peacock-workbench .wb-cut-row:not(.is-on) .wb-cut-val { color: var(--wb-fg-muted); }

/* ---- Section by node (LS-PrePost-style section cut) ---- */
.peacock-workbench .wb-cut-sec {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--wb-border);
    display: flex; flex-direction: column; gap: 8px;
}
.peacock-workbench .wb-cut-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.peacock-workbench .wb-cut-sec-title { font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); display: flex; align-items: center; gap: 6px; }
.peacock-workbench .wb-cut-sec-title .fa { color: var(--wb-accent); font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-cut-sec-clear {
    flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: var(--wb-radius-sm);
    background: transparent; color: var(--wb-fg-muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.peacock-workbench .wb-cut-sec-clear:hover { color: var(--wb-danger, #e2483a); border-color: var(--wb-border); background: var(--wb-panel-2); }
.peacock-workbench .wb-cut-sec-hint,
.peacock-workbench .wb-cut-sec-note { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.4; }
.peacock-workbench .wb-cut-sec-note { font-style: italic; }

/* axis normal picker */
.peacock-workbench .wb-cut-sec-axes { display: flex; gap: 6px; }
.peacock-workbench .wb-cut-secax {
    flex: 1 1 0; height: 28px; padding: 0; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.peacock-workbench .wb-cut-secax:hover { color: var(--wb-fg); border-color: var(--wb-accent); }
.peacock-workbench .wb-cut-secax.is-on { color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent); }

/* slab thickness */
.peacock-workbench .wb-cut-sec-thick { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-cut-sec-thick-lab { flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-cut-sec-thick-slider { flex: 1 1 auto; height: 4px; -webkit-appearance: none; appearance: none; background: var(--wb-border); border-radius: 2px; outline: none; cursor: pointer; }
.peacock-workbench .wb-cut-sec-thick-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--wb-accent); cursor: pointer; transition: transform .1s; }
.peacock-workbench .wb-cut-sec-thick-slider::-webkit-slider-thumb:hover { transform: scale(1.13); }
.peacock-workbench .wb-cut-sec-thick-slider::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--wb-accent); cursor: pointer; }
.peacock-workbench .wb-cut-sec-thick-val { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: calc(11px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--wb-fg); }

/* visible-parts list (hover to spotlight) */
.peacock-workbench .wb-cut-parts { display: flex; flex-direction: column; gap: 5px; }
.peacock-workbench .wb-cut-parts-head { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted); }
.peacock-workbench .wb-cut-parts-count { font-weight: 400; color: var(--wb-fg-muted); background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: 999px; padding: 0 6px; font-size: calc(10px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-cut-parts-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.peacock-workbench .wb-cut-part {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 5px 8px; border: 1px solid transparent; border-radius: var(--wb-radius-sm); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.peacock-workbench .wb-cut-part:hover, .peacock-workbench .wb-cut-part.is-hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-cut-part-name { font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-cut-part-id { flex: 0 0 auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-cut-parts-empty { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-style: italic; padding: 4px 2px; }

/* typeahead */
.peacock-workbench .wb-cut-sec-search { position: relative; }
.peacock-workbench .wb-cut-sec-ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); pointer-events: none; }
.peacock-workbench .wb-cut-sec-input {
    width: 100%; height: 34px; padding: 0 10px 0 28px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1)); outline: none; transition: border-color .15s, box-shadow .15s;
}
.peacock-workbench .wb-cut-sec-input:focus { border-color: var(--wb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-accent) 22%, transparent); }
.peacock-workbench .wb-cut-sec-results { display: flex; flex-direction: column; gap: 2px; max-height: 176px; overflow-y: auto; }
.peacock-workbench .wb-cut-sec-results:empty { display: none; }
.peacock-workbench .wb-cut-sec-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
    padding: 6px 9px; border: 1px solid transparent; border-radius: var(--wb-radius-sm); background: transparent; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.peacock-workbench .wb-cut-sec-item:hover { background: var(--wb-row-hover); border-color: var(--wb-border); }
.peacock-workbench .wb-cut-sec-item-id { font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-cut-sec-item-id em { font-style: normal; font-weight: 400; color: var(--wb-fg-muted); }
.peacock-workbench .wb-cut-sec-item-xyz { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-cut-sec-empty { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); padding: 6px 2px; }

/* active-section readout chip */
.peacock-workbench .wb-cut-sec-active {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel-2);
}
.peacock-workbench .wb-cut-sec-nid { font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); }
.peacock-workbench .wb-cut-sec-axtag { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-accent-fg); background: var(--wb-accent); padding: 1px 7px; border-radius: 999px; }
.peacock-workbench .wb-cut-sec-xyz { margin-left: auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }

/* toggle switch (display:flex defeats the global label{display:block!important} in d3view.min.css) */
.peacock-workbench .wb-cut-switch { position: relative; display: flex !important; flex: 0 0 auto; width: 30px; height: 17px; cursor: pointer; margin: 0; }
.peacock-workbench .wb-cut-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.peacock-workbench .wb-cut-switch-track { position: absolute; inset: 0; border-radius: 9px; background: var(--wb-border); transition: background .2s; }
.peacock-workbench .wb-cut-switch-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .2s;
}
.peacock-workbench .wb-cut-switch input:checked + .wb-cut-switch-track { background: var(--ax); }
.peacock-workbench .wb-cut-switch input:checked + .wb-cut-switch-track::after { left: 15px; }
.peacock-workbench .wb-cut-switch input:focus-visible + .wb-cut-switch-track { box-shadow: 0 0 0 2px var(--wb-fg-muted); }

/* Added by shashank2104 on 07/01/2026 - R2026-28 - Measurements inspector cards: readable per-measure
   card (title + value header, then the labelled points that produced it). Scoped + --wb-* token driven. */
.peacock-workbench .wb-meas-item {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 8px 10px; margin-bottom: 6px;
}
.peacock-workbench .wb-meas-item:last-child { margin-bottom: 0; }
.peacock-workbench .wb-meas-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px;
}
.peacock-workbench .wb-meas-name {
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); display: flex; align-items: center; gap: 6px;
}
.peacock-workbench .wb-meas-name i { color: var(--wb-accent); font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-meas-value {
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peacock-workbench .wb-meas-pts { display: flex; flex-direction: column; gap: 3px; }
.peacock-workbench .wb-meas-pt {
    display: flex; align-items: baseline; gap: 8px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.4;
}
.peacock-workbench .wb-meas-pt-lbl {
    flex: 0 0 auto; min-width: 34px; color: var(--wb-fg-muted); font-weight: 600;
}
.peacock-workbench .wb-meas-pt-xyz {
    color: var(--wb-fg); font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.peacock-workbench .wb-meas-vertex {
    font-family: inherit; font-weight: 500; font-size: calc(9px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .04em;
    color: var(--wb-accent-fg); background: var(--wb-accent);
    padding: 0 4px; border-radius: 3px; margin-left: 3px;
}
.peacock-workbench .wb-meas-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.peacock-workbench .wb-meas-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    padding: 0; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); background: transparent;
    border: 1px solid transparent; border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-meas-btn:hover { color: var(--wb-fg); background: var(--wb-row-hover); }
.peacock-workbench .wb-meas-btn.wb-meas-del:hover { color: #fff; background: var(--wb-danger, #e2483a); border-color: var(--wb-danger, #e2483a); }
.peacock-workbench .wb-meas-clear {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted); background: transparent; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-meas-clear:hover { color: var(--wb-danger, #e2483a); border-color: var(--wb-danger, #e2483a); }

/* Added by shashank2104 on 07/01/2026 - R2026-28 - Removed Parts dock cards (match the Measurements
   panel): part name + id/faces meta + per-part Restore, plus a Restore-all in the header. --wb-* driven. */
.peacock-workbench .wb-rem-list { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-rem-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    transition: border-color .14s;
}
.peacock-workbench .wb-rem-item:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-rem-name {
    flex: 1; min-width: 0; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-rem-name i { color: var(--wb-accent); font-size: calc(11px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.peacock-workbench .wb-rem-swatch {
    flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--wb-border); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.peacock-workbench .wb-rem-meta {
    flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peacock-workbench .wb-rem-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted); background: transparent;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-rem-btn:hover { color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-rem-restoreall {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted); background: transparent; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-rem-restoreall:hover { color: var(--wb-accent); border-color: var(--wb-accent); }

/* ── DW-3151 — ML Model tab (geometry-based ML models → PedPro prediction) ── */
/* DW-3151 — in ML-only picker mode the main .wb-open-tabs bar is hidden, so these
   sub-tabs ARE the primary navigation. Style them like the main .wb-open-tab treatment
   (underline active state, not pills). Body-mounted modal → hardcoded token fallbacks. */
.peacock-workbench .wb-mlm-subtabs,
.wb-open-modal .wb-mlm-subtabs {
    display: flex; gap: 2px; margin-bottom: 14px;
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.wb-open-modal .wb-mlm-subtab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794);
    background: transparent; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.wb-open-modal .wb-mlm-subtab > i.fa { font-size: calc(12px * var(--wb-font-scale, 1)); opacity: 0.85; }
.wb-open-modal .wb-mlm-subtab:hover { color: var(--wb-fg, #2c3e50); }
.wb-open-modal .wb-mlm-subtab.is-active {
    color: var(--wb-accent, #2c5282);
    border-bottom-color: var(--wb-accent, #2c5282);
}
.wb-open-modal .wb-mlm-subtab.is-active > i.fa { opacity: 1; }
.wb-open-modal .wb-mlm-subpane { display: none; }
.wb-open-modal .wb-mlm-subpane.is-active { display: block; }
/* DW-3151 — the Upload zone is now a jQuery Dropzone; mirror its native drag-hover
   class onto the existing is-over look, and neutralize Dropzone.css base bleed. */
.wb-open-modal .wb-mlm-dropzone.dz-drag-hover {
    background: rgba(74,126,181,0.10);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-fg, #2c3e50);
}
.wb-open-modal .wb-mlm-dropzone.dropzone { min-height: 0; }
/* DW-3151 — ML-only picker mode (opened from Post-processing → PedPro Prediction):
   show ONLY the ML Model picker, hiding the other Open-dialog tabs + the file-load chrome. */
.wb-open-mlonly .wb-open-tabs,
.wb-open-mlonly .wb-open-progress,
.wb-open-mlonly .wb-open-logs { display: none; }
/** Updated by shashank2104 on 08/11/2026 at 12:10 PM - R2026-137 - Design B for ML-only:
 *  Saved / Library / Upload become a left Source rail (same chrome as File → Open). **/
.wb-open-mlonly .wb-open-main { display: flex; }
.wb-open-mlonly .wb-open-body { padding: 0; overflow: hidden; }
.wb-open-mlonly .wb-open-pane[data-wb-open-pane="mlmodel"] {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}
.wb-open-mlonly .wb-mlm-subtabs {
    flex: 0 0 188px;
    width: 188px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 14px 10px;
    border-bottom: 0;
    border-right: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel-2, rgba(0,0,0,0.04));
    overflow-y: auto;
}
.wb-open-mlonly .wb-mlm-subtab {
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 8px;
    font-weight: 500;
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-mlonly .wb-mlm-subtab:hover {
    color: var(--wb-fg, #2c3e50);
    background: rgba(127,127,127,0.08);
}
.wb-open-mlonly .wb-mlm-subtab.is-active {
    color: var(--wb-fg, #2c3e50);
    background: rgba(74,126,181,0.16);
    box-shadow: inset 3px 0 0 var(--wb-accent, #4a7eb5);
    border-bottom-color: transparent;
}
.wb-open-mlonly .wb-mlm-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 16px 16px;
}
.wb-open-mlonly .wb-mlm-subpane.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.wb-open-mlonly .wb-mlm-saved-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.wb-open-mlonly .wb-mlm-dropzone {
    flex: 1 1 auto;
    margin: 4px 0 0;
}

/* Moved by shashank2104 on 07/23/2026 — Open-dialog progress + log chrome, and the WASM logs pane.
   These rules used to live in a bare <style> block inside javascripts/templates/modular/styles.tpl.
   That works in DEV only, where index.html fetches each template fragment and appends it to <body>,
   so the style element becomes live. PROD loads the same templates by NAME through
   d3VIEW.loadTemplate('peacock.workbench.tpl'), which registers the <script type="text/html">
   blocks — a bare <style> is not a template, so these rules never reached the page and the Open
   dialog rendered with raw, unstyled log panels and its step labels run together
   ("BootMountParsePackDone"). This stylesheet is registered in the tier's style.json, so it loads
   in both dev and prod. Do NOT scope these under .peacock-workbench — the dialog is body-mounted. */
.wb-open-logs { max-height: 96px; overflow-y: auto; padding: 4px 12px; background:#0e1217; color:#cdd6dc; font-family: ui-monospace, Menlo, monospace; font-size: calc(11px * var(--wb-font-scale, 1)); border-top: 1px solid #2b3239; }
.wb-open-logs-top { border-top: 0; border-bottom: 1px solid #2b3239; }
.wb-open-log-entry { white-space: pre-wrap; line-height: 1.4; }
.wb-open-log-entry.warn { color:#f0c674; }
.wb-open-log-entry.error { color:#ec7676; }
.wb-open-log-entry .src { color:#888; }
.wb-open-log-entry .ts { color:#666; }
.wb-open-logs-empty { color:#5c6b7e; font-style: italic; padding: 6px 0; }
.wb-open-progress { display: none; padding: 10px 14px; background: #f7f9fb; border-bottom: 1px solid #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.wb-open-progress.is-active { display: block; }
.wb-open-progress-stepper { display: flex; align-items: center; gap: 0; margin-bottom: 6px; }
.wb-open-progress-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #cdd6dc; flex: 0 0 12px; box-sizing: border-box; }
.wb-open-progress-dot.is-active { background: #2c5282; border-color: #2c5282; animation: peacockPulse 1.2s ease-in-out infinite; }
.wb-open-progress-dot.is-done   { background: #2c5282; border-color: #2c5282; }
.wb-open-progress-dot.is-error  { background: #c0392b; border-color: #c0392b; }
.wb-open-progress-bar { flex: 1 1 auto; height: 2px; background: #cdd6dc; margin: 0 4px; }
.wb-open-progress-bar.is-done { background: #2c5282; }
.wb-open-progress-labels { display: flex; justify-content: space-between; font-size: calc(10px * var(--wb-font-scale, 1)); color: #5c6b7e; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; }
.wb-open-progress-sub { font-size: calc(12px * var(--wb-font-scale, 1)); color: #333; }
.wb-open-progress-done { font-size: calc(12px * var(--wb-font-scale, 1)); color: #155724; font-weight: 600; }
@keyframes peacockPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } }
/** Updated by shashank2104 on 08/17/2026 - R2026-173 - THE LOGS RAIL PANE IS THEMED LIKE THE
    WORKBENCH, not like a terminal.
    It was authored as a hardcoded dark console (#0e1217 / #cdd6dc / #1a2030 / #2b3239) copied from
    the Open dialog's log strip, which is body-mounted and deliberately dark. In the rail that meant
    a black panel with its own greys sitting against the themed shell, wrong in BOTH themes (in the
    light theme it was a black hole; in the dark theme it was a different black). Every colour is now
    a --wb-* token, and the header matches .wb-sim-pane-head so the three list panes read as one
    family. No heights: the pane flexes (see the .wb-leftpane block near the top of this file).
    ⚠ The `.wb-open-*` rules ABOVE are the Open dialog's and stay dark — do not fold these together;
    the log ROW classes are shared, which is why the row colours are re-pointed per pane below. **/
.wb-wasm-logs-pane {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--wb-panel); color: var(--wb-fg); font-size: calc(11px * var(--wb-font-scale, 1));
}
.wb-wl-header {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 4px;
    padding: 8px 10px;
    background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
}
.wb-wl-btn {
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
    padding: 2px 8px; border-radius: var(--wb-radius-sm); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease,
                border-color var(--wb-t, .15s) ease;
}
.wb-wl-btn:hover { color: var(--wb-fg); border-color: var(--wb-accent); }
.wb-wl-btn.is-active { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
.wb-wl-clear { margin-left: auto; }
.wb-wl-perf { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); padding: 0 4px; }
.wb-wl-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 10px;
    font-family: ui-monospace, Menlo, monospace;
}
/* The row classes are shared with the Open dialog's dark strip, so re-point them inside this pane
   only — the dialog keeps its own colours. */
.wb-wl-body .wb-open-log-entry { padding: 1px 0; color: var(--wb-fg); }
.wb-wl-body .wb-open-log-entry.warn  { color: var(--wb-warning, #b7791f); }
.wb-wl-body .wb-open-log-entry.error { color: var(--wb-danger, #c0392b); }
.wb-wl-body .wb-wl-placeholder {
    color: var(--wb-fg-muted); font-style: italic;
    font-family: inherit; padding: 20px 12px; text-align: center; font-size: calc(11.5px * var(--wb-font-scale, 1));
}

/* Added by shashank2104 on 07/23/2026 — Samples tab of the Open dialog, plus the samples-ONLY
   mode used by File → Open Example… (same mechanism as .wb-open-mlonly above: hide the tab
   strip so the dialog reads as a dedicated example picker rather than a tab you landed on). */
.wb-open-samplesonly .wb-open-tabs,
.wb-open-samplesonly .wb-open-progress,
.wb-open-samplesonly .wb-open-logs { display: none; }

/** Added by shashank2104 on 08/11/2026 at 11:44 AM - R2026-137 - Replace / Add-as-new confirm **/
/** Updated by shashank2104 on 08/11/2026 at 12:17 PM - R2026-137 - confirm is content-sized;
 *  do not inherit Open's fixed height: 84vh. **/
.wb-open-confirm-modal { width: 460px; max-width: 94vw; height: auto; max-height: none; top: 22vh; }
.wb-open-confirm-body { padding: 18px 20px 8px; }
.wb-open-confirm-sub { margin: 0 0 14px; color: var(--wb-fg-muted, #6b7280); font-size: calc(12.5px * var(--wb-font-scale, 1)); }
.wb-open-confirm-sub b { color: var(--wb-fg, #1f2937); }
/** Added by shashank2104 on 08/17/2026 at 12:53 PM - R2026-173 - current model + Merge Results choice. **/
.wb-open-confirm-current {
    margin: -6px 0 14px;
    color: var(--wb-fg-muted, var(--d3v-text-muted, #94A3B8));
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-open-confirm-current[hidden] {
    display: none;
}
.wb-open-confirm-current b { color: var(--wb-fg, var(--d3v-text-primary, #1E293B)); }
.wb-open-confirm-results {
    border-color: var(--wb-accent, var(--d3v-accent, #3B82F6));
}
.wb-open-confirm-results .wb-open-confirm-k i {
    margin-right: 6px;
    color: var(--wb-accent, var(--d3v-accent, #3B82F6));
}
.wb-open-confirm-choices { display: flex; flex-direction: column; gap: 8px; }
.wb-open-confirm-choice {
    text-align: left; padding: 12px 14px; border-radius: 10px;
    border: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel-2, #f7f9fb); color: var(--wb-fg, #1f2937);
    cursor: pointer; width: 100%;
}
.wb-open-confirm-choice:hover:not(:disabled):not(.is-disabled) {
    border-color: var(--wb-accent, #4a7eb5);
    background: rgba(74,126,181,0.12);
}
.wb-open-confirm-choice:disabled,
.wb-open-confirm-choice.is-disabled { opacity: .45; cursor: not-allowed; }
.wb-open-confirm-choice[hidden] { display: none; }
/* Added by shashank2104 on 09/22/2026 - R2026-315 - the clicked choice shows it started before
   the load blocks the page. `fa fa-spinner fa-spin` does not render on this page, so this reuses
   the stylesheet's own wbTransportSpin keyframe. */
.wb-open-confirm-choice.is-busy { position: relative; cursor: progress; border-color: var(--wb-accent); opacity: 1; }
.wb-open-confirm-choice .wb-oc-spin {
    position: absolute; top: 50%; right: 13px; margin-top: -7px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--wb-border); border-top-color: var(--wb-accent);
    animation: wbTransportSpin 0.7s linear infinite;
}
.wb-open-confirm-k { display: block; font-weight: 700; font-size: calc(13px * var(--wb-font-scale, 1)); margin-bottom: 2px; }
.wb-open-confirm-d { display: block; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #6b7280); }
.wb-open-confirm-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 10px 16px 14px; border-top: 1px solid var(--wb-border, #e0e3e6);
}
.wb-dock-log-row.wb-log-worker .wb-dock-log-level,
.wb-log-worker .wb-dock-log-level { color: #7c5cbf; }
.wb-dock-log-row.wb-log-worker { border-left: 2px solid #7c5cbf; }

.wb-open-modal .wb-open-pane[data-wb-open-pane="samples"] { min-width: 0; overflow: hidden; }
.wb-open-modal .wb-open-sample-list {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 2px;
}
.wb-open-modal .wb-open-sample-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    background: var(--wb-panel, #fff);
    border: 1px solid var(--wb-border, #e2e8f0);
    transition: background .15s ease, border-color .15s ease;
}
.wb-open-modal .wb-open-sample-row:hover {
    background: var(--wb-hover, rgba(44, 82, 130, .07));
    border-color: var(--wb-accent, #2c5282);
}
.wb-open-modal .wb-open-sample-ico {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wb-hover, rgba(44, 82, 130, .07));
    color: var(--wb-accent, #2c5282);
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.wb-open-modal .wb-open-sample-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wb-open-modal .wb-open-sample-name {
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--wb-fg, #2c3e50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wb-open-modal .wb-open-sample-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-dim, #718096);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wb-open-modal .wb-open-sample-kind {
    flex: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(10px * var(--wb-font-scale, 1));
    line-height: 1;
    padding: 4px 7px;
    border-radius: 5px;
    color: var(--wb-fg-dim, #718096);
    background: var(--wb-hover, rgba(44, 82, 130, .07));
    border: 1px solid var(--wb-border, #e2e8f0);
}
/* Listed but not clickable — the catalog can hold formats this build has no loader for. */
.wb-open-modal .wb-open-sample-row.is-unsupported { opacity: .45; cursor: not-allowed; }
.wb-open-modal .wb-open-sample-row.is-unsupported:hover {
    background: var(--wb-panel, #fff);
    border-color: var(--wb-border, #e2e8f0);
}
/* DW-3151 fix — the ML pane is a flex item in the flex modal body; without min-width:0
   it grows to its content width and the body's overflow:hidden clips the row actions
   off-screen. Constrain the whole ML pane chain to the modal width so the View / Use
   buttons stay on-screen and the long input signature clips with an ellipsis. */
.wb-open-modal .wb-open-pane[data-wb-open-pane="mlmodel"] { min-width: 0; overflow: hidden; }
.wb-open-modal .wb-mlm-subpane,
.wb-open-modal .wb-mlm-saved-list,
.wb-open-modal .wb-mlm-upload-result { min-width: 0; width: 100%; }
.wb-open-modal .wb-mlm-row { min-width: 0; width: 100%; box-sizing: border-box; }
.wb-open-modal .wb-mlm-info { overflow: hidden; }
.wb-open-modal .wb-mlm-source-note {
    font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-bottom: 10px;
    display: flex; align-items: center; gap: 7px;
}
.wb-open-modal .wb-mlm-source-note b { color: var(--wb-fg); }
.wb-open-modal .wb-mlm-source-note .fa { color: var(--wb-accent); }
.wb-open-modal .wb-mlm-loading,
.wb-open-modal .wb-mlm-empty {
    padding: 22px 14px; text-align: center; font-size: calc(12.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.wb-open-modal .wb-mlm-empty b { color: var(--wb-fg); }
/* saved-model search row (name / input / target filter) */
.wb-open-modal .wb-mlm-searchrow {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.wb-open-modal .wb-mlm-searchcount {
    flex: 0 0 auto; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); white-space: nowrap;
}
.wb-open-modal .wb-mlm-saved-list { display: flex; flex-direction: column; gap: 8px; }
.wb-open-modal .wb-mlm-row.is-hidden { display: none; }
.wb-open-modal .wb-mlm-row {
    display: flex; align-items: center; gap: 11px; padding: 11px 13px;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius); transition: .14s;
}
.wb-open-modal .wb-mlm-row:hover { border-color: var(--wb-accent); }
.wb-open-modal .wb-mlm-row.is-sample { border-color: #86efac; background: rgba(34,197,94,.05); }
/* Updated by shashank2104 on 08/03/2026 at 10:40 AM - R2026-43 - the row no longer carries the whole
   "busy" signal (the clicked button now shows a spinner), and opacity on the row is a stacking group
   the button cannot opt out of — so dim only slightly. */
.wb-open-modal .wb-mlm-row.is-loading { opacity: .9; pointer-events: none; }
.wb-open-modal .wb-mlm-btn.is-busy { cursor: progress; }
/* Added by shashank2104 on 08/03/2026 at 10:40 AM - R2026-43 - one-line note under a sample row. */
.wb-open-modal .wb-mlm-note {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-open-modal .wb-mlm-ic {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--wb-radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: rgba(124,58,237,.12); color: #7c3aed; font-size: calc(14px * var(--wb-font-scale, 1));
}
.wb-open-modal .wb-mlm-info { min-width: 0; flex: 1; }
.wb-open-modal .wb-mlm-name {
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-open-modal .wb-mlm-sig {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-open-modal .wb-mlm-arrow { color: var(--wb-accent); font-weight: 800; }
.wb-open-modal .wb-mlm-type {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; color: #7c3aed; background: rgba(124,58,237,.12);
    border-radius: var(--wb-radius-sm); padding: 2px 6px; margin-left: 4px;
}
.wb-open-modal .wb-mlm-sampletag {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; color: #166534; background: #dcfce7;
    border-radius: var(--wb-radius-sm); padding: 3px 7px;
}
/* Added by shashank2104 on 08/11/2026 - R2026-137 - PedPro-only filter toggle + capability badge. */
/* The toggle shares the search row, pinned to the right; the search box takes the slack. */
.wb-open-modal .wb-mlm-searchrow .wb-open-search-box { flex: 1; min-width: 0; }
.wb-open-modal .wb-mlm-toggle { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.wb-open-modal .wb-mlm-toggle .fa { color: var(--wb-accent); }
.wb-open-modal .wb-mlm-pedbadge {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; color: #0369a1; background: rgba(2,132,199,.12);
    border: 1px solid rgba(2,132,199,.28); border-radius: var(--wb-radius-sm);
    padding: 2px 6px; margin-left: 4px; white-space: nowrap;
}
.wb-open-modal .wb-mlm-pedbadge .fa { margin-right: 3px; }
.wb-open-modal .wb-mlm-row.is-checking { opacity: .6; }
.wb-open-modal .wb-mlm-acts { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.wb-open-modal .wb-mlm-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; border-radius: var(--wb-radius-sm);
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    cursor: pointer; transition: .14s; white-space: nowrap;
}
.wb-open-modal .wb-mlm-btn-view { color: #7c3aed; border-color: rgba(124,58,237,.35); background: rgba(124,58,237,.08); }
.wb-open-modal .wb-mlm-btn-view:hover { background: rgba(124,58,237,.16); }
.wb-open-modal .wb-mlm-btn-use { color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent); }
.wb-open-modal .wb-mlm-btn-use:hover { filter: brightness(1.08); }
.wb-open-modal .wb-mlm-dropzone { margin: 0; }
.wb-open-modal .wb-mlm-upload-result { margin-top: 14px; }

/* ── DW-3151 — direct PedPro prediction inspector (Selection panel) ── */
.peacock-workbench .wb-mlpredict { padding: 4px 2px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.peacock-workbench .wb-mlp-head {
    display: flex; align-items: center; gap: 7px; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 800;
    padding: 4px 2px 10px; color: var(--wb-fg);
}
.peacock-workbench .wb-mlp-head .fa { color: #7c3aed; }
.peacock-workbench .wb-mlp-model {
    margin-left: auto; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted);
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* selected-model row with a View action (DW-3151) */
.peacock-workbench .wb-mlp-modelrow {
    display: flex; align-items: center; gap: 8px; margin: 0 2px 10px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 8px 10px; min-width: 0;
}
.peacock-workbench .wb-mlp-modelic {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(124,58,237,.12); color: #7c3aed; font-size: calc(11px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-mlp-modelname {
    flex: 1 1 auto; min-width: 0; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-mlp-viewbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; color: #7c3aed;
    background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.35);
    border-radius: var(--wb-radius-sm); padding: 5px 10px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-viewbtn:hover { background: rgba(124,58,237,.18); }
/* DW-3151 — swap to a different ML model from within the prediction panel */
.peacock-workbench .wb-mlp-changebtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 5px 10px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-changebtn:hover { color: var(--wb-fg); border-color: var(--wb-accent); }
.peacock-workbench .wb-mlp-hint {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 10px 11px;
}
.peacock-workbench .wb-mlp-hint .fa { color: var(--wb-accent); margin-right: 5px; }
.peacock-workbench .wb-mlp-hint code {
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 3px;
    padding: 0 4px; font-size: calc(10.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-mlp-panel {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 11px; margin-bottom: 10px;
}
.peacock-workbench .wb-mlp-panel-h { font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 800; margin-bottom: 9px; }
.peacock-workbench .wb-mlp-tag {
    font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-accent); background: rgba(44,82,130,.12);
    border-radius: 3px; padding: 1px 5px; margin-left: 6px;
}
.peacock-workbench .wb-mlp-inrow {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 0; border-bottom: 1px dashed var(--wb-border);
}
.peacock-workbench .wb-mlp-inrow:last-of-type { border-bottom: 0; }
.peacock-workbench .wb-mlp-k {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-family: ui-monospace, Menlo, monospace; color: var(--wb-fg-muted);
    display: flex; align-items: center; gap: 5px;
}
.peacock-workbench .wb-mlp-src {
    font-size: calc(8.5px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase; border-radius: 3px; padding: 1px 4px;
}
.peacock-workbench .wb-mlp-src-pick { color: #0369a1; background: #e0f2fe; }
.peacock-workbench .wb-mlp-src-derived { color: #7c3aed; background: #f3e8ff; }
.peacock-workbench .wb-mlp-src-edit { color: var(--wb-fg-muted); background: var(--wb-panel); }
/** Added by shashank2104 on 07/21/2026 - DW-3151 - inputs measured by the pedpro_measure_metrics
    server worker (training parity) get their own badge, distinct from a client-side derivation. **/
.peacock-workbench .wb-mlp-src-measured { color: #047857; background: #d1fae5; }
.peacock-workbench .wb-mlp-v {
    width: 92px; font-size: calc(11px * var(--wb-font-scale, 1)); font-family: ui-monospace, Menlo, monospace; text-align: right;
    background: var(--wb-panel); color: var(--wb-fg); border: 1px solid var(--wb-border);
    border-radius: 4px; padding: 4px 7px;
}
.peacock-workbench .wb-mlp-v:focus { outline: none; border-color: var(--wb-accent); }
.peacock-workbench .wb-mlp-predict {
    width: 100%; margin-top: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-accent-fg); background: var(--wb-accent);
    border: 1px solid var(--wb-accent); border-radius: var(--wb-radius-sm); padding: 9px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-predict:hover { filter: brightness(1.08); }
.peacock-workbench .wb-mlp-predict[disabled] { opacity: .6; cursor: default; }
/** pedpro-design-loop - batch action bar (Predict all targets / Scorecard) **/
.peacock-workbench .wb-mlp-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
.peacock-workbench .wb-mlp-actbtn {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px 9px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-actbtn:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-mlp-actbtn[disabled] { opacity: .6; cursor: default; }
.peacock-workbench .wb-mlp-scorecardbtn { color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-mlp-scorecardbtn:hover { filter: brightness(1.08); color: var(--wb-accent-fg); }
.peacock-workbench .wb-mlp-actcount {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800; border-radius: 8px; padding: 1px 7px;
    background: rgba(0,0,0,.12); color: inherit;
}
/** pedpro-design-loop (item 3) - Generate PedPro Targets inspector panel **/
.peacock-workbench .wb-ptgen { display: flex; flex-direction: column; }
.peacock-workbench .wb-ptg-head {
    display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg);
}
.peacock-workbench .wb-ptg-head .fa { color: var(--wb-accent); }
.peacock-workbench .wb-ptg-sub { margin: 5px 0 12px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ptg-field { margin-bottom: 12px; }
.peacock-workbench .wb-ptg-lab {
    display: block; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--wb-fg-muted); margin-bottom: 6px;
}
.peacock-workbench .wb-ptg-chks { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-ptg-chk {
    display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); cursor: pointer;
}
.peacock-workbench .wb-ptg-chk input { margin: 0; }
.peacock-workbench .wb-ptg-select {
    width: 100%; height: 34px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 0 9px;
}
.peacock-workbench .wb-ptg-disc {
    display: inline-flex; align-items: center; gap: 6px; width: 100%; text-align: left;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: none; border: none; padding: 4px 0; cursor: pointer;
}
.peacock-workbench .wb-ptg-disc:hover { color: var(--wb-accent); }
.peacock-workbench .wb-ptg-hint2 { font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 500; color: var(--wb-fg-muted); margin-left: 4px; }
.peacock-workbench .wb-ptg-cfg {
    width: 100%; height: 190px; margin-top: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px; resize: vertical;
}
.peacock-workbench .wb-ptg-run {
    width: 100%; margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-accent-fg); background: var(--wb-accent);
    border: 1px solid var(--wb-accent); border-radius: var(--wb-radius-sm); padding: 10px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ptg-run:hover { filter: brightness(1.08); }
.peacock-workbench .wb-ptg-run[disabled] { opacity: .65; cursor: default; }
/** Added by shashank2104 on 08/11/2026 - the Generate button turns into Stop while a run is in flight. **/
.peacock-workbench .wb-ptg-run.wb-ptg-stop {
    color: #fff; background: var(--wb-danger, #dc2626); border-color: var(--wb-danger, #dc2626);
}
.peacock-workbench .wb-ptg-run.wb-ptg-stop:hover { filter: brightness(1.06); }
.peacock-workbench .wb-ptg-ok {
    margin-top: 11px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: #166534; background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: var(--wb-radius-sm); padding: 9px 11px;
}
.peacock-workbench .wb-ptg-ok .fa { color: #22c55e; margin-right: 4px; }
.peacock-workbench .wb-ptg-note {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 9px 11px;
}
.peacock-workbench .wb-ptg-note.is-warn { color: #92400e; background: #fffbeb; border-color: #fde68a; }
.peacock-workbench .wb-ptg-err {
    margin-top: 11px; font-size: calc(11px * var(--wb-font-scale, 1)); color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 4px; padding: 8px 10px;
}
.peacock-workbench .wb-ptg-diag {
    margin-top: 7px; max-height: 220px; overflow: auto; font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 1.4;
    color: var(--wb-fg-muted); background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: 4px; padding: 8px; white-space: pre-wrap; word-break: break-word;
}
/** Added by shashank2104 on 07/27/2026 - R2026-58 - grouped configuration + per-field 3D pick for the
    PedPro target generator (mirrors submodel.js .csm-*). Footer uses the .wb-panel-foot contract. **/
.peacock-workbench .wb-ptgen { display: flex; flex-direction: column; }
.peacock-workbench .wb-ptg-hint3 { margin: 2px 0 9px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ptg-grp {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); margin: 11px 0; overflow: hidden;
}
.peacock-workbench .wb-ptg-grp-hd {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; user-select: none;
    background: var(--wb-panel-2, rgba(127, 127, 127, .06)); transition: background .12s ease;
}
.peacock-workbench .wb-ptg-grp-hd:hover { background: var(--wb-row-hover, rgba(127, 127, 127, .12)); }
.peacock-workbench .wb-ptg-grp-caret { width: 11px; text-align: center; color: var(--wb-fg-muted); transition: transform .14s ease; }
.peacock-workbench .wb-ptg-grp.is-open .wb-ptg-grp-caret { transform: rotate(90deg); }
.peacock-workbench .wb-ptg-grp-t { flex: 1 1 auto; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg); }
.peacock-workbench .wb-ptg-grp-count {
    flex: 0 0 auto; font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 999px; padding: 1px 8px;
}
.peacock-workbench .wb-ptg-grp-body { display: none; padding: 10px 11px 4px; }
.peacock-workbench .wb-ptg-grp.is-open .wb-ptg-grp-body { display: block; }
.peacock-workbench .wb-ptg-grp-act {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800;
    text-transform: uppercase; letter-spacing: .03em; color: var(--wb-accent); background: none;
    border: 1px solid var(--wb-accent); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-ptg-grp-act:hover { background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ptg-row { position: relative; margin-bottom: 12px; }
.peacock-workbench .wb-ptg-rlab { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; padding-right: 18px; }
.peacock-workbench .wb-ptg-rlab .wb-ptg-lab { margin: 0; flex: 0 0 auto; }
/** Added by shashank2104 on 09/15/2026 - R0-4177 - the label row drags onto a part in the 3D view.
 *  The grip is the affordance; the canvas shows a dashed accent edge while a field is over it. **/
.peacock-workbench .wb-ptg-rlab[draggable="true"] { cursor: grab; border-radius: var(--wb-radius-sm); transition: background .12s ease; }
.peacock-workbench .wb-ptg-rlab[draggable="true"]:hover { background: var(--wb-row-hover, rgba(127, 127, 127, .12)); }
.peacock-workbench .wb-ptg-rlab.is-dragging { cursor: grabbing; opacity: .55; }
.peacock-workbench .wb-ptg-grip { flex: 0 0 auto; width: 8px; text-align: center; color: var(--wb-fg-muted); opacity: .55; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ptg-rlab:hover .wb-ptg-grip { opacity: 1; }
.peacock-workbench canvas.wb-ptg-droptarget { outline: 2px dashed var(--wb-accent); outline-offset: -3px; }
.peacock-workbench .wb-ptg-auto {
    flex: 0 0 auto; font-size: calc(8.5px * var(--wb-font-scale, 1)); font-weight: 800; letter-spacing: .04em; color: #fff;
    background: #16a34a; border-radius: 999px; padding: 1px 6px;
}
.peacock-workbench .wb-ptg-info { flex: 0 0 auto; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: help; opacity: .7; }
.peacock-workbench .wb-ptg-pick {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: calc(9.5px * var(--wb-font-scale, 1));
    font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--wb-accent);
    border: 1px solid var(--wb-accent); border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-ptg-pick:hover { background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ptg-pick.is-arm { background: var(--wb-accent); color: var(--wb-accent-fg); box-shadow: 0 0 0 2px rgba(44, 82, 130, .22); }
/** Added by shashank2104 on 08/11/2026 - per-field auto-map wand; softer than Pick so it reads as a
 *  secondary shortcut. Groups with Pick at the right of the label row. **/
.peacock-workbench .wb-ptg-autofield {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: calc(9.5px * var(--wb-font-scale, 1));
    font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--wb-fg-muted);
    border: 1px solid var(--wb-border); border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-ptg-autofield:hover { color: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-ptg-autofield + .wb-ptg-pick { margin-left: 6px; }
.peacock-workbench .wb-ptg-inp {
    width: 100%; height: 32px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 0 9px; transition: border-color .12s ease, box-shadow .12s ease;
}
.peacock-workbench .wb-ptg-inp:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 2px rgba(44, 82, 130, .18); }
.peacock-workbench .wb-ptg-resolved { margin-top: 5px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ptg-resolved .nm { color: var(--wb-fg); font-weight: 600; }
.peacock-workbench .wb-ptg-clr2 {
    position: absolute; top: 0; right: 0; width: 18px; height: 18px; display: inline-grid; place-items: center;
    color: var(--wb-fg-muted); font-size: calc(10.5px * var(--wb-font-scale, 1)); cursor: pointer; border-radius: 4px; opacity: .65; transition: .12s;
}
.peacock-workbench .wb-ptg-clr2:hover { opacity: 1; color: var(--wb-danger, #c0392b); background: var(--wb-row-hover, rgba(127, 127, 127, .12)); }
/** Added by shashank2104 on 08/11/2026 - R2026-137 - THE PedPro step footer, shared by all four steps
    (Targets / Metrics / Predict / Run) so they read as one flow. Exactly two equal buttons on one row:
    `View worker… | <primary action>`. It carries `.wb-panel-foot` too, which is the plugin's
    Selection-panel contract (position: sticky; bottom) — that is what keeps it on screen however tall
    the body above it grows. Anything step-specific (Export targets) goes in its own row ABOVE. **/
.peacock-workbench .wb-ptg-foot,
.peacock-workbench .wb-pedfoot { display: flex; gap: 7px; }
.peacock-workbench .wb-ptg-foot > *,
.peacock-workbench .wb-pedfoot > * { flex: 1 1 0; min-width: 0; margin-top: 0; }
.peacock-workbench .wb-ptg-exportrow { margin: 10px 0 0; }

/* the two footer button skins — secondary (View worker) and primary (the action) */
.peacock-workbench .wb-pedbtn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: transparent;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px; cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease, filter .14s ease;
}
.peacock-workbench .wb-pedbtn:hover { border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-panel); }
.peacock-workbench .wb-pedbtn[disabled] { opacity: .55; cursor: default; }
.peacock-workbench .wb-pedbtn[disabled]:hover { border-color: var(--wb-border); color: var(--wb-fg); background: transparent; }
.peacock-workbench .wb-pedbtn.is-primary {
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 800; padding: 10px;
    color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent);
}
.peacock-workbench .wb-pedbtn.is-primary:hover { filter: brightness(1.08); color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent); }
.peacock-workbench .wb-pedbtn.is-stop { color: #fff; background: var(--wb-danger, #dc2626); border-color: var(--wb-danger, #dc2626); }
.peacock-workbench .wb-pedbtn.is-stop:hover { filter: brightness(1.06); color: #fff; background: var(--wb-danger, #dc2626); border-color: var(--wb-danger, #dc2626); }
.peacock-workbench .wb-ptg-fullcfg {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: transparent;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ptg-fullcfg:hover { border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-panel); }
.peacock-workbench .wb-ptg-fullcfg[disabled] { opacity: .55; cursor: default; }
/** Added by shashank2104 on 07/29/2026 - R2026-58 - Export targets (CSV / Excel). The menu opens UPWARD
    because the footer is sticky at the bottom of the `.wb-inspector-context` scroller — dropping down
    would be clipped by its overflow. **/
.peacock-workbench .wb-ptg-exportwrap { position: relative; }
.peacock-workbench .wb-ptg-export {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: transparent;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ptg-export:hover { border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-panel); }
.peacock-workbench .wb-ptg-export[disabled] { opacity: .55; cursor: default; }
.peacock-workbench .wb-ptg-export-caret { font-size: calc(10px * var(--wb-font-scale, 1)); opacity: .7; transition: transform .14s ease; }
.peacock-workbench .wb-ptg-exportwrap.is-open .wb-ptg-export {
    border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-panel);
}
.peacock-workbench .wb-ptg-exportwrap.is-open .wb-ptg-export-caret { transform: rotate(180deg); }
.peacock-workbench .wb-ptg-exportmenu {
    display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 5px); z-index: 40;
    padding: 4px; background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
.peacock-workbench .wb-ptg-exportwrap.is-open .wb-ptg-exportmenu { display: block; }
.peacock-workbench .wb-ptg-exportmenu button {
    width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); background: transparent;
    border: 0; border-radius: 4px; padding: 7px 9px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-ptg-exportmenu button:hover { background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ptg-exportmenu button .fa { width: 13px; text-align: center; opacity: .85; }
.peacock-workbench .wb-mlp-err {
    margin-top: 9px; font-size: calc(11px * var(--wb-font-scale, 1)); color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 4px; padding: 7px 9px;
}
/** Added by shashank2104 on 07/21/2026 - DW-3151 - "Measure PedPro metrics" secondary action +
    the no-deck note shown when the open model has no LS-DYNA deck for the worker to read. **/
.peacock-workbench .wb-mlp-measure {
    width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 8px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-measure:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-mlp-measure[disabled] { opacity: .6; cursor: default; }
.peacock-workbench .wb-mlp-note {
    margin-top: 10px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 4px; padding: 7px 9px;
}
.peacock-workbench .wb-mlp-result {
    margin-top: 10px; display: flex; align-items: center; gap: 10px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 9px 11px;
}
.peacock-workbench .wb-mlp-badge {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800; color: #fff; border-radius: 4px; padding: 3px 8px;
}
.peacock-workbench .wb-mlp-rt { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wb-fg-muted); }
.peacock-workbench .wb-mlp-rv { margin-left: auto; font-size: calc(18px * var(--wb-font-scale, 1)); font-weight: 800; }
.peacock-workbench .wb-mlp-listh {
    display: flex; align-items: center; gap: 7px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; color: var(--wb-fg-muted); margin: 4px 2px 8px;
}
.peacock-workbench .wb-mlp-count {
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-accent-fg); background: var(--wb-accent); border-radius: 8px; padding: 1px 7px;
}
.peacock-workbench .wb-mlp-clearall {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent); text-transform: none;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 3px 8px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-mlp-clearall:hover { border-color: var(--wb-accent); filter: brightness(1.05); }
.peacock-workbench .wb-mlp-list { display: flex; flex-direction: column; gap: 6px; }
/* DW-3151 — each predicted point is a two-line card: main row + muted source-model line */
.peacock-workbench .wb-mlp-item {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 7px 9px;
}
.peacock-workbench .wb-mlp-item-row { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-mlp-item-model {
    display: flex; align-items: center; gap: 5px; font-size: calc(9.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-mlp-item-model .fa { font-size: calc(9px * var(--wb-font-scale, 1)); color: #7c3aed; opacity: .8; }
.peacock-workbench .wb-mlp-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; box-shadow: 0 0 0 2px var(--wb-panel); }
.peacock-workbench .wb-mlp-pn { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 800; font-family: ui-monospace, Menlo, monospace; }
.peacock-workbench .wb-mlp-pc { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-family: ui-monospace, Menlo, monospace; }
.peacock-workbench .wb-mlp-ph { margin-left: auto; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 800; }
.peacock-workbench .wb-mlp-rm { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); padding: 2px 4px; }
.peacock-workbench .wb-mlp-rm:hover { color: #ef4444; }
/* curve list chip + view-curves affordance (inspector panel) */
.peacock-workbench .wb-mlp-ph-curve { display: inline-flex; align-items: center; gap: 4px; }
.peacock-workbench .wb-mlp-ph-curve .fa { font-size: calc(10px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-mlp-viewcurves { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); padding: 2px 4px; margin-left: 6px; }
.peacock-workbench .wb-mlp-viewcurves:hover { color: #6366f1; }

/* R2026-47 — Predicted-curves modal (Newton curveplot). BODY-MOUNTED by
   GenericModalView, so these are intentionally NOT scoped under .peacock-workbench. */
.wb-mlp-curvewrap { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.wb-mlp-curvemeta { font-size: calc(12px * var(--wb-font-scale, 1)); color: #475569; display: flex; align-items: center; gap: 6px; }
.wb-mlp-curvemeta .fa { color: #6366f1; }
.wb-mlp-curvemeta b { color: #1e293b; }
.wb-mlp-curvecanvas { width: 100%; height: 520px; min-height: 520px; flex: 1 1 auto; }
.wb-mlp-curveempty { padding: 40px 16px; text-align: center; color: #64748b; font-size: calc(13px * var(--wb-font-scale, 1)); }

/* Added by shashank2104 on 08/03/2026 at 12:05 PM - R2026-43 — the FULL prediction modal (the
   d3viewdashboard PredictionView with render-in-Simlytiks on). Body-mounted by GenericModalView, so
   deliberately NOT scoped under .peacock-workbench. GenericModalView already fixes the body height
   (window.innerHeight - 150); the mount just has to fill it, or the Simlytiks chart pane measures zero
   at build time and paints nothing. */
.wb-mlp-predmodal .modal-body { padding: 0; overflow: hidden; }
.wb-mlp-predmount { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.wb-mlp-predmount > * { min-height: 0; }

/* CAD BUILD session — File → Build New / Close Build Mode (R2026-37) */
.peacock-workbench.is-cad-build .wb-cad-toolbar { display: flex; }
.peacock-workbench .wb-mdl { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; }
.peacock-workbench .wb-mdl-tree-pane { padding: 10px; box-sizing: border-box; }
.peacock-workbench .wb-mdl-task-pane { padding: 4px 0; }
.peacock-workbench .wb-mdl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peacock-workbench .wb-mdl-close { margin-left: auto; border: 0; background: transparent; color: var(--wb-fg-muted); font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; border-radius: var(--d3v-r-sm, 4px); }
.peacock-workbench .wb-mdl-close:hover { color: var(--wb-fg); background: var(--wb-bg-hover, rgba(0,0,0,.06)); }
.peacock-workbench .wb-mdl-title { font-weight: 800; font-size: calc(13px * var(--wb-font-scale, 1)); display: flex; align-items: center; gap: 8px; color: var(--wb-fg); flex: 1 1 auto; }
.peacock-workbench .wb-mdl-title i { color: var(--wb-accent); }
.peacock-workbench .wb-mdl-sub { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.35; width: 100%; }
.peacock-workbench .wb-mdl-new { margin-left: auto; }
.peacock-workbench .wb-mdl-planes { display: flex; gap: 6px; }
/** ⭐⭐ THE ACTIVE PLANE BUTTON WAS AN EMPTY PILL, AND !important IS THE ONLY FIX.
    Updated by shashank2104 on 08/31/2026 - R2026-37. `color:#fff` applied but the background did
    not, so the label was white on the white panel. My first attempt added token fallbacks, which
    changed nothing, and an INLINE background:#2563eb also computed to transparent, which is the
    tell. Enumerating the live cascade found it: d3view.min.css ships
        .btn-outline-on-hover { background: transparent !important; }
    and an !important declaration beats any specificity and any non-important inline style. The
    only way to clear it from a plugin stylesheet is to match it, exactly as the note at the
    .peacock-controller-wrapper rule in this file already records. **/
.peacock-workbench .wb-mdl-planes .btn.is-on {
    background: #2563eb !important;
    background: var(--wb-accent, #2563eb) !important;
    color: #fff !important;
    border-color: var(--wb-accent, #2563eb) !important;
}
.peacock-workbench .wb-mdl-planes .btn { min-width: 42px; }
.peacock-workbench .wb-mdl-sec { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.peacock-workbench .wb-mdl-lbl { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--wb-fg-muted); }
.peacock-workbench .wb-mdl-tree { background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: var(--wb-radius); padding: 5px; flex: 1 1 auto; max-height: none; overflow-y: auto; min-height: 120px; }
.peacock-workbench .wb-mdl-tnode { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--wb-radius-sm); font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); cursor: pointer; }
.peacock-workbench .wb-mdl-tnode:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-mdl-tnode.is-sel { background: var(--wb-accent); color: #fff; }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tbody { font-weight: 800; }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tchild { margin-left: 22px; font-weight: 500; }
/* Added by shashank2104 on 09/19/2026 - R2026-37 - parts in the Build tree, features nested under them */
.peacock-workbench .wb-mdl-tnode.wb-mdl-tpart { margin-top: 4px; }
/* Added by shashank2104 on 09/22/2026 - R2026-315 item F - ONE PARTS LIST. `C` drawing only,
   `M` mesh only, `C&M` both. One badge class for the Parts list and the Build tree, so a record
   reads the same in either. Quiet by default: mesh-only is plain muted text, and only a part that
   carries a drawing gets any accent at all. */
/* ⚠ flex 0 0 auto + nowrap: the row is a flex line whose label is `flex: 1`, so a shrinkable
   badge collapsed and its text ran over the element count beside it. */
.peacock-workbench .wb-tree-badge { flex: 0 0 auto; white-space: nowrap; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .04em; padding: 1px 5px; margin: 0 6px; border-radius: var(--wb-radius-sm); background: transparent; color: var(--wb-fg-muted); }
.peacock-workbench .wb-tree-badge.is-both,
.peacock-workbench .wb-tree-badge.is-cad { background: var(--wb-chip-bg, rgba(59,111,209,.12)); color: var(--wb-accent); }
.peacock-workbench .wb-tree-row.is-sel .wb-tree-badge,
.peacock-workbench .wb-mdl-tnode.is-sel .wb-tree-badge { background: rgba(255,255,255,.22); color: #fff; }
.peacock-workbench .wb-mdl-marks { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Added by shashank2104 on 09/22/2026 - R2026-315 - the C / M tags are switches: click to hide or show that side. */
.peacock-workbench .wb-overlay-row .wb-tree-badge.wb-mdl-layer { margin: 0 0 0 4px; cursor: pointer; transition: opacity var(--d3v-t-fast, .12s), background var(--d3v-t-fast, .12s); }
.peacock-workbench .wb-overlay-row .wb-tree-badge.wb-mdl-layer.is-mesh { background: var(--wb-chip-bg, rgba(59,111,209,.12)); color: var(--wb-fg); }
.peacock-workbench .wb-overlay-row .wb-tree-badge.wb-mdl-layer:hover { box-shadow: inset 0 0 0 1px currentColor; }
.peacock-workbench .wb-overlay-row .wb-tree-badge.wb-mdl-layer.is-off { background: transparent; color: var(--wb-fg-muted); text-decoration: line-through; opacity: .6; }
.peacock-workbench .wb-mdl-mesh { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted); }
.peacock-workbench .wb-mdl-tnode.is-sel .wb-mdl-mesh { color: rgba(255,255,255,.82); }
.peacock-workbench .wb-overlay-cadbar { padding: 4px 0 6px 22px; }
.peacock-workbench .wb-chip-sm { font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; padding: 2px 8px; line-height: 1.5; }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tpart.is-active:not(.is-sel) { box-shadow: inset 2px 0 0 var(--wb-accent); }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tfeat { margin-left: 14px; }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tchild { margin-left: 36px; }
.peacock-workbench .wb-mdl-num.wb-mdl-text { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 600; margin-left: auto; }
.peacock-workbench .wb-mdl-pos .wb-mdl-field { margin-bottom: 6px; }
.peacock-workbench .wb-mdl-pos .wb-mdl-num { margin-left: auto; width: 88px; }
.peacock-workbench .wb-mdl-tnode.wb-mdl-tchild .wb-mdl-tn { font-size: calc(9px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-mdl-tnode small { font-weight: 500; opacity: .75; margin-left: auto; }
.peacock-workbench .wb-mdl-tn { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; background: var(--wb-panel); border: 1px solid var(--wb-border); display: flex; align-items: center; justify-content: center; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-accent); }
.peacock-workbench .wb-mdl-tnode.is-sel .wb-mdl-tn { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; }
.peacock-workbench .wb-mdl-empty-inline { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); padding: 8px 10px; }
.peacock-workbench .wb-mdl-task { background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: var(--wb-radius); padding: 10px; }
.peacock-workbench .wb-mdl-hint { margin: 0 0 10px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.4; }
.peacock-workbench .wb-mdl-field { display: flex; align-items: center; gap: 8px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); margin-bottom: 8px; }
.peacock-workbench .wb-mdl-num { width: 72px; height: 30px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel); color: var(--wb-fg); text-align: right; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; padding: 0 6px; }
.peacock-workbench .wb-mdl-num:focus { outline: none; border-color: var(--wb-accent); }
.peacock-workbench .wb-mdl-u { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-mdl-ro { font-weight: 700; margin-left: auto; }
.peacock-workbench .wb-mdl-stats { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); border-top: 1px solid var(--wb-border); padding-top: 9px; }
.peacock-workbench .wb-mdl-stats b { color: var(--wb-fg); }
.peacock-workbench .wb-mdl-exports { display: flex; gap: 8px; }
.peacock-workbench .wb-mdl-export { flex: 1; height: 36px; border: 0; border-radius: var(--wb-radius); background: var(--wb-accent); color: #fff; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s; }
.peacock-workbench .wb-mdl-export:hover { filter: brightness(1.08); }
.peacock-workbench .wb-mdl-export.ghost { flex: 0 0 auto; padding: 0 14px; background: var(--wb-panel-2); color: var(--wb-fg); border: 1px solid var(--wb-border); }
.peacock-workbench .wb-mdl-export.ghost:hover { background: var(--wb-row-hover); filter: none; }

/* ── CAD ribbon (R2026-37, 09/18/2026): one line of named groups under the main toolbar, icon over
   label, scrolling sideways when the window is narrow, with the status line beneath it. ── */
.peacock-workbench .wb-cad-toolbar {
    flex: 0 0 auto; display: flex; flex-direction: column;
    background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 1px 3px rgba(0,0,0,0.10);
}
.peacock-workbench .wb-cad-ribbon {
    display: flex; align-items: stretch; gap: 0; padding: 4px 8px 2px;
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    scrollbar-width: thin; scrollbar-color: var(--wb-border) transparent;
    -webkit-overflow-scrolling: touch;
}
.peacock-workbench .wb-cad-ribbon::-webkit-scrollbar { height: 6px; }
.peacock-workbench .wb-cad-ribbon::-webkit-scrollbar-thumb { background: var(--wb-border); border-radius: 3px; }
.peacock-workbench .wb-cad-group { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; padding: 0 8px; border-right: 1px solid var(--wb-border); }
.peacock-workbench .wb-cad-group:last-child { border-right: 0; }
.peacock-workbench .wb-cad-items { display: flex; gap: 2px; width: 100%; justify-content: space-evenly; }
.peacock-workbench .wb-cad-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 54px; height: 48px; padding: 4px 5px; border: 1px solid transparent; border-radius: var(--wb-radius-sm);
    background: transparent; color: var(--wb-fg); cursor: pointer; white-space: nowrap;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; line-height: 1;
}
.peacock-workbench .wb-cad-item i { font-size: calc(16px * var(--wb-font-scale, 1)); opacity: .85; }
.peacock-workbench .wb-cad-item:hover { background: var(--wb-row-hover); border-color: var(--wb-border); }
.peacock-workbench .wb-cad-item.is-on { background: var(--wb-accent); border-color: var(--wb-accent); color: #fff; }
.peacock-workbench .wb-cad-item.is-on i { opacity: 1; }
.peacock-workbench .wb-cad-item.is-feature i { color: var(--wb-accent); }
.peacock-workbench .wb-cad-item.is-on.is-feature i { color: #fff; }
.peacock-workbench .wb-cad-glabel { font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wb-fg-dim, #8a97a6); padding: 3px 0 2px; }
.peacock-workbench .wb-cad-statusline { min-height: 20px; padding: 0 14px 4px; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim, #8a97a6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peacock-workbench .wb-cad-statusline:empty { display: none; }
.peacock-workbench .wb-cad-task-foot { display: flex; gap: 8px; margin-top: 12px; }
.peacock-workbench .wb-cad-task-foot .wb-mdl-export { height: 32px; font-size: calc(12px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-mdl-sel { width: 72px; text-align: left; }

/* ── R2026-37 parametric gear dialog (body-mounted modal → NOT scoped under .peacock-workbench) ── */
.wb-gear-dialog .wb-gear-form { padding: 4px 2px; }
.wb-gear-dialog .wb-gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.wb-gear-dialog .wb-gear-sec {
    grid-column: 1 / -1; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--d3v-text-muted, #7a8794); margin: 8px 0 2px; padding-bottom: 5px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e6e9ee);
}
.wb-gear-dialog .wb-gear-fld { display: flex; flex-direction: column; gap: 5px; font-size: calc(12.5px * var(--wb-font-scale, 1)); color: var(--d3v-text-secondary, #4a5561); }
.wb-gear-dialog .wb-gear-fld span { font-weight: 500; }
.wb-gear-dialog .wb-gear-fld input {
    height: 34px; padding: 0 10px; font-size: calc(13px * var(--wb-font-scale, 1)); border-radius: var(--d3v-r-md, 7px);
    border: 1px solid var(--d3v-border, #d3d8df); background: var(--d3v-bg-primary, #fff); color: var(--d3v-text-primary, #1f2733);
    transition: border-color var(--d3v-t-fast, .15s), box-shadow var(--d3v-t-fast, .15s);
}
.wb-gear-dialog .wb-gear-fld input:focus { outline: none; border-color: var(--d3v-accent, #2c7be5); box-shadow: 0 0 0 3px rgba(44,123,229,.16); }
.wb-gear-dialog .wb-gear-note { margin: 14px 2px 0; font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--d3v-text-muted, #7a8794); }
.wb-gear-dialog .wb-gear-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.wb-gear-dialog .wb-gear-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; cursor: pointer;
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600; border-radius: var(--d3v-r-md, 7px);
    border: 1px solid var(--d3v-border, #d3d8df); background: var(--d3v-bg-secondary, #f4f6f9); color: var(--d3v-text-primary, #1f2733);
    transition: background var(--d3v-t-fast, .15s), border-color var(--d3v-t-fast, .15s), box-shadow var(--d3v-t-fast, .15s), transform var(--d3v-t-fast, .15s);
}
.wb-gear-dialog .wb-gear-btn:hover { background: var(--d3v-bg-tertiary, #e9edf2); border-color: var(--d3v-border-strong, #b9c1cc); }
.wb-gear-dialog .wb-gear-btn:active { transform: translateY(1px); }
.wb-gear-dialog .wb-gear-btn-primary {
    color: #fff; border-color: transparent;
    background: linear-gradient(180deg, var(--d3v-accent, #2c7be5), var(--d3v-accent-strong, #1a68d1));
    box-shadow: 0 1px 2px rgba(26,104,209,.35);
}
.wb-gear-dialog .wb-gear-btn-primary:hover { background: linear-gradient(180deg, #3a86e8, #1f6ed6); box-shadow: 0 3px 8px rgba(26,104,209,.4); }

/* Added by shashank2104 on 07/17/2026 at 11:02 AM - R2026-44 - workflow morph-only chrome */
.peacock-workbench.is-morph-mode .wb-toolbar { display: none; }
.peacock-workbench.is-morph-mode .wb-rail,
.peacock-workbench.is-morph-mode .wb-leftpane,
.peacock-workbench.is-morph-mode .wb-dock,
.peacock-workbench.is-morph-mode [data-wb-splitter="leftpane"] { display: none !important; }
.peacock-workbench.is-morph-mode .wb-inspector { width: 320px !important; }
.peacock-workbench.is-morph-mode .me-morph-panel .mmp-name {
    flex: 1 1 auto; height: 30px; margin-left: 8px; padding: 0 8px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
}

/* R2026-47 - annotation-only shell chrome (dashboard Import-from-Peacock step 1). Same hide-all
   treatment as morph mode, but the inspector (right panel) holds the 3D Annotations list. */
/* Updated by shashank2104 on 08/10/2026 - R2026-43 - the top bar stays in annotate3d mode unless the
   host asked for it to go (`showToolbar:false` -> no .has-toolbar), so Tools / Post-processing stay
   reachable. The bar's own contents are filtered by ToolbarView `hiddenItems`, not by CSS. */
.peacock-workbench.is-annotate3d-mode:not(.has-toolbar) .wb-toolbar { display: none; }
.peacock-workbench.is-annotate3d-mode .wb-rail,
.peacock-workbench.is-annotate3d-mode .wb-leftpane,
.peacock-workbench.is-annotate3d-mode .wb-dock,
.peacock-workbench.is-annotate3d-mode [data-wb-splitter="leftpane"] { display: none !important; }
/* Updated by shashank2104 on 08/10/2026 - R2026-43 - NO `!important` on the width: the Selection
   splitter resizes by writing an INLINE width (ShellView.bindSplitters -> $target.width(next)), and an
   !important declaration outranks an inline one — so the drag ran, the width was set, and nothing moved.
   Plain 340px still wins over the base .wb-inspector rule (2 classes vs 1) and is beaten by the inline
   width the moment the user drags, which is exactly the wanted default-then-resizable behaviour.
   NOTE: the morph and part-selection rules above/below still carry !important and have the same bug. */
.peacock-workbench.is-annotate3d-mode .wb-inspector { width: 340px; }

/** ⭐⭐ Added by shashank2104 on 08/26/2026 at 02:17 PM - R2026-223 - HOST VIEW OPTIONS
    (`peacock_options`). One class per region-visibility option, written on the shell root by
    workbench/host-options.js.

    WHY A CLASS AND NOT `.hide()`: several of these regions re-render themselves — `renderModelTabs`,
    `DockView.render`, and above all the per-pane overlay tree, which `OverlayTree.sync()` REBUILDS
    from scratch on every model add. An inline display:none written once is thrown away by the next
    rebuild; a root class cannot be.

    `!important` is deliberate here and is the same call the mode blocks above make: these have to
    outrank the base region rules AND anything a sub-view writes on its own element. The `show`
    direction is not CSS at all — HostOptions clears the inline style, because no class can outrank
    an inline one (the exact trap the annotate3d width comment above records). **/
.peacock-workbench.wb-host-hide-tree .wb-leftpane,
.peacock-workbench.wb-host-hide-tree [data-wb-splitter="leftpane"],
/* the PrePost HUD floating on each 3D pane — the other half of "the tree", and the half that also
   eats pointer events over the model. */
.peacock-workbench.wb-host-hide-tree .wb-overlay-tree { display: none !important; }
.peacock-workbench.wb-host-hide-toolbar .wb-toolbar { display: none !important; }
.peacock-workbench.wb-host-hide-rail .wb-rail { display: none !important; }
.peacock-workbench.wb-host-hide-dock .wb-dock { display: none !important; }
.peacock-workbench.wb-host-hide-statusbar .wb-statusbar { display: none !important; }
.peacock-workbench.wb-host-hide-transport .wb-transport { display: none !important; }

/** Added by shashank2104 on 07/28/2026 at 10:49 AM - R2026-60 - part_selection embed chrome **/
.peacock-workbench.is-part-selection-mode .wb-toolbar { display: none; }
.peacock-workbench.is-part-selection-mode .wb-rail,
.peacock-workbench.is-part-selection-mode .wb-leftpane,
.peacock-workbench.is-part-selection-mode .wb-dock,
.peacock-workbench.is-part-selection-mode [data-wb-splitter="leftpane"] { display: none !important; }
.peacock-workbench.is-part-selection-mode .wb-inspector { width: 320px !important; }

.peacock-workbench .wb-ps { padding: 12px 12px 16px; }
.peacock-workbench .wb-ps-head {
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg); display: flex; align-items: center; gap: 8px;
}
.peacock-workbench .wb-ps-head .fa { color: var(--wb-accent); }
.peacock-workbench .wb-ps-sub { margin: 5px 0 12px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ps-hint { margin: 0 0 12px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ps-empty { padding: 20px 8px; text-align: center; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ps-row { position: relative; margin-bottom: 12px; }
.peacock-workbench .wb-ps-rlab { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.peacock-workbench .wb-ps-lab { margin: 0; flex: 0 0 auto; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); }
.peacock-workbench .wb-ps-info { flex: 0 0 auto; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: help; opacity: .7; }
.peacock-workbench .wb-ps-pick {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: calc(9.5px * var(--wb-font-scale, 1));
    font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--wb-accent);
    border: 1px solid var(--wb-accent); border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-ps-pick:hover { background: var(--wb-accent); color: var(--wb-accent-fg, #fff); }
.peacock-workbench .wb-ps-pick.is-arm { background: var(--wb-accent); color: var(--wb-accent-fg, #fff); box-shadow: 0 0 0 2px rgba(44, 82, 130, .22); }
.peacock-workbench .wb-ps-inp-wrap { position: relative; }
.peacock-workbench .wb-ps-inp {
    width: 100%; height: 32px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); background: var(--wb-panel);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 4px); padding: 0 28px 0 10px;
}
.peacock-workbench .wb-ps-clr {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: var(--wb-fg-muted); cursor: pointer; padding: 2px 4px;
}
.peacock-workbench .wb-ps-clr:hover { color: #d92d20; }

/* Added by shashank2104 on 08/21/2026 - R2026-189 - selector3d mode (extents / connection /
   measurement / part). Same chrome contract as part_selection: the inspector IS the whole UI. */
.peacock-workbench.is-selector3d-mode .wb-toolbar { display: none; }
.peacock-workbench.is-selector3d-mode .wb-rail,
.peacock-workbench.is-selector3d-mode .wb-leftpane,
.peacock-workbench.is-selector3d-mode .wb-dock,
.peacock-workbench.is-selector3d-mode [data-wb-splitter="leftpane"] { display: none !important; }
.peacock-workbench.is-selector3d-mode .wb-inspector { width: 340px !important; }

.peacock-workbench .wb-s3d { padding: 12px 12px 16px; }
.peacock-workbench .wb-s3d-head {
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg);
    display: flex; align-items: center; gap: 8px;
}
.peacock-workbench .wb-s3d-head .fa { color: var(--wb-accent); }
.peacock-workbench .wb-s3d-head .sp { flex: 1; }
/** Added by shashank2104 on 08/25/2026 at 06:14 PM - R2026-215 - Mesh Organization display group
 *  (Mesh | Edges | Solid) on the selector3d inspector. Same tokens as .wb-de2-disp. **/
.peacock-workbench .wb-s3d .wb-de2-disp { display: inline-flex; gap: 3px; }
.peacock-workbench .wb-s3d .wb-de2-disp button {
    padding: 3px 8px; cursor: pointer; font: inherit;
    font-weight: 600; font-size: calc(10px * var(--wb-font-scale, 1));
    border-radius: var(--wb-radius-sm, 6px);
    border: 1px solid var(--wb-border-strong, #cfd4dc);
    background: var(--wb-panel, #fff);
    color: var(--wb-fg-muted, #667085);
}
.peacock-workbench .wb-s3d .wb-de2-disp button.is-on {
    background: var(--wb-accent-soft, #eaf0ff);
    border-color: var(--wb-accent, #2563eb);
    color: var(--wb-accent, #2563eb);
}
.peacock-workbench .wb-s3d-sub { margin: 5px 0 12px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-s3d-hint { margin: 8px 0 12px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-s3d-none { margin: 6px 0 10px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted); opacity: .85; }
.peacock-workbench .wb-s3d-empty { padding: 20px 8px; text-align: center; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); }

.peacock-workbench .wb-s3d-sec {
    display: flex; align-items: center; gap: 8px; margin: 14px 0 8px;
    padding-top: 10px; border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-s3d-sect {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-s3d-pick {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; color: var(--wb-accent); border: 1px solid var(--wb-accent);
    border-radius: 999px; padding: 2px 9px; cursor: pointer; transition: .12s;
}
.peacock-workbench .wb-s3d-pick:hover { background: var(--wb-accent); color: var(--wb-accent-fg, #fff); }
.peacock-workbench .wb-s3d-pick.is-arm { background: var(--wb-accent); color: var(--wb-accent-fg, #fff); box-shadow: 0 0 0 2px rgba(44, 82, 130, .22); }
/* Added by shashank2104 on 08/25/2026 at 11:41 PM - R2026-215 - the Pick button is gone (the mode
   arms itself); `.wb-s3d-live` is its replacement READOUT. Same pill geometry so the row does not
   shift, but no pointer affordance at all - no cursor, no hover, no border - because there is nothing
   to click. Muted until the canvas is live, then it takes the accent. */
.peacock-workbench .wb-s3d-live {
    flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; color: var(--wb-fg-muted); border-radius: 999px; padding: 2px 9px;
    cursor: default; user-select: none; transition: color .12s, background .12s;
}
.peacock-workbench .wb-s3d-live.is-arm { color: var(--wb-accent); background: rgba(44, 82, 130, .10); }
/* Full-width variant: the status IS the row, so it carries no section caption beside it (one wrapped
   to three lines against the chip in the 250px inspector). */
.peacock-workbench .wb-s3d-livebar {
    display: flex; align-items: center; gap: 6px; margin: 8px 0 10px; padding: 6px 10px;
    border-radius: var(--d3v-r-md, 6px); background: rgba(0, 0, 0, .04);
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .02em;
    color: var(--wb-fg-muted); cursor: default; user-select: none;
    transition: color .12s, background .12s;
}
.peacock-workbench .wb-s3d-livebar.is-arm { color: var(--wb-accent); background: rgba(44, 82, 130, .10); }
.peacock-workbench .wb-s3d-clr { flex: 0 0 auto; margin-left: auto; color: var(--wb-fg-muted); cursor: pointer; padding: 0 2px; }
.peacock-workbench .wb-s3d-clr:hover { color: #d92d20; }

/* Six bounds fields on a 4px grid — three rows of min/max so an axis reads as one pair. */
.peacock-workbench .wb-s3d-bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.peacock-workbench .wb-s3d-bcell { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.peacock-workbench .wb-s3d-blab {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-s3d-binp,
.peacock-workbench .wb-s3d-val {
    width: 100%; height: 30px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm, 4px); padding: 0 8px; transition: .12s;
}
.peacock-workbench .wb-s3d-binp:focus,
.peacock-workbench .wb-s3d-val:focus { border-color: var(--wb-accent); box-shadow: 0 0 0 2px rgba(44, 82, 130, .18); outline: none; }
.peacock-workbench .wb-s3d-binp[disabled] { opacity: .5; cursor: not-allowed; }
.peacock-workbench .wb-s3d-val { height: 32px; font-family: var(--wb-mono, monospace); }

.peacock-workbench .wb-s3d-picked { margin: 6px 0 10px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-s3d-picked a { color: var(--wb-accent); cursor: pointer; }

/** Added by shashank2104 on 08/21/2026 - R2026-189 - picked parts listed one per row (id + deck name)
 *  with a per-row remove, and Reset as a real button rather than an inline link. **/
.peacock-workbench .wb-s3d-partlist { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin: 0 0 8px; }
.peacock-workbench .wb-s3d-part {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    border: 1px solid var(--wb-border); border-radius: 6px; background: var(--wb-bg-elev, transparent);
}
.peacock-workbench .wb-s3d-part:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-s3d-ppid {
    flex: 0 0 auto; font-family: var(--wb-mono, monospace);
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-accent);
}
.peacock-workbench .wb-s3d-pname {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-s3d-pdrop {
    flex: 0 0 auto; cursor: pointer; padding: 0 4px; line-height: 1;
    font-size: calc(14px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-s3d-pdrop:hover { color: #d92d20; }
.peacock-workbench .wb-s3d-partacts { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.peacock-workbench .wb-s3d-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer;
    border: 1px solid var(--wb-border); border-radius: 6px; background: transparent;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-s3d-btn:hover { border-color: var(--wb-accent); color: var(--wb-accent); }

.peacock-workbench .wb-s3d-boxlist,
.peacock-workbench .wb-s3d-connlist { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.peacock-workbench .wb-s3d-box,
.peacock-workbench .wb-s3d-conn {
    display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; cursor: pointer;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel); transition: .12s;
}
.peacock-workbench .wb-s3d-box:hover,
.peacock-workbench .wb-s3d-conn:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-s3d-box.is-on,
.peacock-workbench .wb-s3d-conn.is-on { border-color: var(--wb-accent); box-shadow: inset 0 0 0 1px var(--wb-accent); }
.peacock-workbench .wb-s3d-bid,
.peacock-workbench .wb-s3d-cid {
    flex: 0 0 auto; font-family: var(--wb-mono, monospace); font-size: calc(11px * var(--wb-font-scale, 1));
    font-weight: 700; color: var(--wb-accent);
}
.peacock-workbench .wb-s3d-bname,
.peacock-workbench .wb-s3d-cfam { flex: 0 0 auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.peacock-workbench .wb-s3d-bspan {
    flex: 1 1 auto; text-align: right; font-family: var(--wb-mono, monospace);
    font-size: calc(9.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Embedded 3D-Annotations inspector: intro hint + per-row name + subtle map dropdown */
.wb-a3d-embed-hint {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; margin: 0 0 10px;
    background: var(--wb-panel-2, var(--d3v-bg-secondary));
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, var(--d3v-r-md));
    color: var(--wb-fg-muted, var(--d3v-text-secondary)); font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.4;
}
.wb-a3d-embed-hint > i { margin-top: 1px; color: var(--wb-accent, var(--d3v-accent)); }
/* Added by shashank2104 on 08/03/2026 at 06:00 PM - R2026-43 - the mean-fill NOTE that replaced the
   checkbox. Quieter than .wb-a3d-embed-hint (no panel/border) because it states a fact under the Units
   row rather than instructing the user to do something. */
.wb-a3d-meannote {
    display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; padding: 0 1px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.4; color: var(--wb-fg-muted, var(--d3v-text-secondary));
}
.wb-a3d-meannote > i { margin-top: 1px; flex: 0 0 auto; color: var(--wb-accent, var(--d3v-accent)); }
.wb-a3d-rname { margin-top: 6px; }
.wb-a3d-rname .wb-a3d-name {
    width: 100%; height: 30px; padding: 0 9px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, var(--d3v-r-md));
    background: var(--wb-panel, var(--d3v-bg-primary)); color: var(--wb-fg, var(--d3v-text-primary));
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; transition: border-color var(--d3v-t-fast, .12s), box-shadow var(--d3v-t-fast, .12s);
}
.wb-a3d-rname .wb-a3d-name:focus {
    outline: none; border-color: var(--wb-accent, var(--d3v-accent));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Subtle map dropdown in embedded step 1 — mapping is emphasized in the dashboard's step 2 */
.wb-a3d-map.is-subtle {
    background: transparent; border-color: transparent; color: var(--wb-fg-muted, var(--d3v-text-muted));
    font-size: calc(11px * var(--wb-font-scale, 1)); transition: border-color var(--d3v-t-fast, .12s), background var(--d3v-t-fast, .12s);
}
.wb-a3d-map.is-subtle:hover,
.wb-a3d-map.is-subtle:focus {
    background: var(--wb-panel, var(--d3v-bg-primary));
    border-color: var(--wb-border); color: var(--wb-fg, var(--d3v-text-primary));
}
.wb-a3d-list.is-embedded .wb-a3d-row { align-items: flex-start; }

/* Added by shashank2104 on 07/21/2026 at 05:10 PM - PedPro scorecard overlay packet - scoped draggable and resizable Dashboard V2 cockpit shell. */
/** R2026-137 (item 1): the scorecard OVERLAYS the ENTIRE workbench — mounted on the shell root
 *  (`.peacock-workbench`, itself position:absolute inset:0), its inset:0 covers rail / leftpane /
 *  viewport / dock / inspector / toolbar / statusbar, not just the 3D canvas wrapper. No border/radius
 *  (a full-bleed takeover, not a card); drag/resize chrome removed. The cockpit inside is unchanged.
 *  z-index is above every in-body chrome that competes at the root stacking level (rail tooltip 999,
 *  BOM selectable helper 100) now that the overlay is a root-level sibling rather than nested. **/
.peacock-workbench .wb-pedpro-scorecard-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    outline: none;
}
.peacock-workbench .wb-pedpro-scorecard-header {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 0 16px;
    background: var(--d3v-bg-primary);
    border-bottom: 1px solid var(--d3v-border);
    box-shadow: var(--d3v-sh-xs);
    user-select: none;
}
.peacock-workbench .wb-pedpro-scorecard-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--d3v-text-primary);
    font-size: calc(14px * var(--wb-font-scale, 1));
    font-weight: 600;
}
.peacock-workbench .wb-pedpro-scorecard-title .fa {
    flex: 0 0 auto;
    color: var(--d3v-accent);
}
/* R2026-137: accuracy summary strip (predicted vs uploaded reference), centred in the header. */
.peacock-workbench .wb-pedpro-scorecard-acc {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--d3v-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peacock-workbench .wb-pedpro-scorecard-acc .fa { color: var(--d3v-accent); }
.peacock-workbench .wb-pedpro-scorecard-acc b { color: var(--d3v-text-primary); font-weight: 600; }
.peacock-workbench .wb-pedpro-scorecard-acc .wb-scacc-warn { color: var(--d3v-status-warning, #d97706); }
/* R2026-137 (08/13/2026): the strip now carries the worker's accuracy BANDS and the least-accurate
   points as well as the headline, so it wraps onto a second line instead of clipping. The parent keeps
   `overflow:hidden`, so the worst-points row scrolls sideways rather than pushing the header wider. */
.peacock-workbench .wb-pedpro-scorecard-acc { flex-wrap: wrap; white-space: normal; row-gap: 3px; }
.peacock-workbench .wb-scacc-bands { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.peacock-workbench .wb-scacc-band,
.peacock-workbench .wb-scacc-pt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-subtle, #e0e3e6);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary);
}
.peacock-workbench .wb-scacc-band > i,
.peacock-workbench .wb-scacc-pt > i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.peacock-workbench .wb-scacc-worst {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 1px;
}
.peacock-workbench .wb-scacc-worst-h {
    flex: 0 0 auto;
    font-size: calc(10px * var(--wb-font-scale, 1));
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--d3v-text-tertiary, #7a8794);
}
.peacock-workbench .wb-scacc-more { flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--d3v-text-tertiary, #7a8794); }
/* R2026-137 (item 8): the header action buttons (Export PDF + Back to 3D) grouped on the right. */
.peacock-workbench .wb-pedpro-scorecard-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.peacock-workbench .wb-pedpro-scorecard-pdf .fa {
    margin-right: 4px;
}
.peacock-workbench .wb-pedpro-scorecard-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peacock-workbench .wb-pedpro-scorecard-body,
.peacock-workbench .wb-pedpro-scorecard-body > .pred-chart {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
.peacock-workbench .wb-pedpro-scorecard-body {
    display: flex;
    overflow: hidden;
    background: var(--d3v-bg-secondary);
}
.peacock-workbench .wb-pedpro-scorecard-body > .pred-chart {
    position: relative;
    overflow: hidden;
}
.peacock-workbench .wb-pedpro-scorecard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 32px;
    text-align: center;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-secondary);
}
.peacock-workbench .wb-pedpro-scorecard-empty .fa {
    margin-bottom: 4px;
    color: var(--d3v-text-muted);
    font-size: calc(32px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-pedpro-scorecard-empty p {
    margin: 0;
    color: var(--d3v-text-primary);
    font-size: calc(14px * var(--wb-font-scale, 1));
    font-weight: 600;
}
.peacock-workbench .wb-pedpro-scorecard-empty span {
    max-width: 400px;
    color: var(--d3v-text-secondary);
    font-size: calc(12px * var(--wb-font-scale, 1));
    line-height: 1.5;
}
.peacock-workbench .wb-pedpro-scorecard-empty.is-error .fa {
    color: var(--d3v-danger);
}
/** R2026-137 (item 3): the left hood-impact map is a Simlytiks VizView; its host fills the map mount. **/
.peacock-workbench .wb-pedpro-scorecard-body [data-sc-region="viz"] .wb-scmap-vizhost {
    height: 100%;
    width: 100%;
}
.peacock-workbench .wb-pedpro-scorecard-body [data-sc-region="viz"] .wb-scmap-vizhost .viewContent,
.peacock-workbench .wb-pedpro-scorecard-body [data-sc-region="viz"] .wb-scmap-vizhost .vizviewContainer {
    height: 100%;
    width: 100%;
    min-height: 0;
}
/** R2026-137 (item 1): the cockpit is authored for a tall dashboard pane (mapmount min-height 560px);
 *  as a canvas overlay it must FIT the viewport so the summary, map and opportunity rail are all visible
 *  at once (no clipped opportunity rail). Relax the map-slot floor so the scatter flexes to the overlay. **/
.peacock-workbench .wb-pedpro-scorecard-overlay .dbp-sc-mapmount {
    min-height: 0;
}
.peacock-workbench .wb-pedpro-scorecard-overlay .dbp-sc-mapcard .dbp-sc-card-h .wb-scmap-edit {
    margin-left: auto;
    flex: 0 0 auto;
}

/** R2026-137: the scorecard header Export DROPDOWN (PDF / PowerPoint). Scoped under the shell root — it
 *  lives inside the overlay header. The menu floats above the header on `.is-open`. **/
.peacock-workbench .wb-scx-dd {
    position: relative;
    flex: 0 0 auto;
    margin-right: 20px;
}
.peacock-workbench .wb-scx-dd-caret {
    margin-left: 4px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    opacity: 0.85;
}
.peacock-workbench .wb-scx-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-lg);
    z-index: 10;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--d3v-t-fast, 0.12s) ease, transform var(--d3v-t-fast, 0.12s) ease;
}
.peacock-workbench .wb-scx-dd.is-open .wb-scx-dd-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.peacock-workbench .wb-scx-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--d3v-r-sm);
    color: var(--d3v-text-primary);
    font-size: calc(13px * var(--wb-font-scale, 1));
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s) ease, color var(--d3v-t-fast, 0.12s) ease;
}
.peacock-workbench .wb-scx-dd-item:hover {
    background: var(--d3v-bg-hover, var(--d3v-bg-secondary));
    color: var(--d3v-accent);
}
.peacock-workbench .wb-scx-dd-item .fa {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: var(--d3v-text-secondary);
}
.peacock-workbench .wb-scx-dd-item:hover .fa {
    color: var(--d3v-accent);
}

/** R2026-137: the export-options MODAL (GenericModalView, body-mounted). NOT scoped under the plugin
 *  root — the modal is appended to <body> — but it still uses the shared `--d3v-*` tokens. **/
.wb-scx-modal .wb-scx {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 2px;
}
.wb-scx-modal .wb-scx-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wb-scx-modal .wb-scx-label {
    margin: 0;
    font-size: calc(12px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--d3v-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.wb-scx-modal .wb-scx-name,
.wb-scx-modal .wb-scx-theme {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: calc(13px * var(--wb-font-scale, 1));
    outline: none;
    transition: border-color var(--d3v-t-fast, 0.12s) ease, box-shadow var(--d3v-t-fast, 0.12s) ease;
}
.wb-scx-modal .wb-scx-name:focus,
.wb-scx-modal .wb-scx-theme:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(2, 182, 255, 0.18));
}
.wb-scx-modal .wb-scx-ext {
    align-self: flex-end;
    margin-top: -2px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--d3v-text-muted);
}
/* The global `label { display:block !important }` rule would break the inline checkbox rows — force flex. */
.wb-scx-modal .wb-scx-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: calc(13px * var(--wb-font-scale, 1));
    font-weight: 400;
    color: var(--d3v-text-primary);
    cursor: pointer;
}
.wb-scx-modal .wb-scx-check input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}
.wb-scx-modal .wb-scx-note,
.wb-scx-modal .wb-scx-hint {
    margin: 0;
    font-size: calc(12px * var(--wb-font-scale, 1));
    line-height: 1.5;
    color: var(--d3v-text-muted);
}

/* ============================================================================
 * 3D Annotations (R2026-43) — canonical in this file (production loads only
 * peacock.workbench.css). Former peacock.annotations-3d.css folded in here.
 * Added by shashank2104 on 08/19/2026 at 12:07 PM - R2026-43 - merge annotations-3d.css into workbench.css.
 * ============================================================================ */
/* Added by shashank2104 on 07/16/2026 - R2026-43 - 3D Annotations: CAD-blueprint callout (welded to the
   3D geometry, body-mounted label layer) + the Selection-panel inspector (Peacock.Workbench.Views.
   Annotations3DInspectorView, `#wb-annotate3d-tpl`). Styles ONLY the frozen `.wb-a3d-*` class inventory
   from docs/3d-annotations/annotations-3d.contract.md §4, matching the approved mockup's Option C
   (CAD Blueprint) — mono dimension-box callouts + a tabular, dashed-divider inspector list. `--ac` is a
   per-item CSS var (validation-tinted color) set inline by the engine (P1) / view (P2), same mechanism
   as the mockup. `--wb-*` tokens theme this with the active rail (light/dark/blueprint); `--d3v-r-*`/
   `--d3v-t-*` used only where no `--wb-*` equivalent exists. All rules scoped under `.peacock-workbench`. */

/* ---- 3D callout (welded to geometry, positioned every frame by the engine's projection loop) ---- */
.peacock-workbench .wb-a3d-labels {
    position: absolute; inset: 0; pointer-events: none; z-index: 45; overflow: hidden;
}
.peacock-workbench .wb-a3d-callout {
    /* Added by shashank2104 on 08/21/2026 at 01:15 PM - R2026-43 - attached annotation ends follow MeshEdit. */
    position: absolute; transform: translate(-50%, -50%); pointer-events: none; cursor: default;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: calc(12px * var(--wb-font-scale, 1));
    background: var(--wb-panel, #fbfcfd);
    border: 1.5px solid var(--wb-fg, #2c3e50);
    border-left: 5px solid var(--ac, var(--wb-fg-muted, #7a8794));
    border-radius: var(--d3v-r-sm, 3px);
    padding: 5px 10px;
    box-shadow: 3px 3px 0 rgba(0,0,0,.16);
    transition: box-shadow var(--d3v-t-fast, .15s ease), transform var(--d3v-t-fast, .15s ease);
}
.peacock-workbench .wb-a3d-callout:hover {
    z-index: 50;
    box-shadow: 5px 5px 0 rgba(0,0,0,.22);
    transform: translate(-50%, -50%) translate(-1px, -1px);
}
/* CAD dimension-line triangle mark, colored via --ac */
.peacock-workbench .wb-a3d-co-mark {
    width: 0; height: 0; flex: 0 0 auto;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 9px solid var(--ac, var(--wb-fg-muted, #7a8794));
}
.peacock-workbench .wb-a3d-co-code {
    font-weight: 700; letter-spacing: .03em; color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-a3d-co-val {
    font-weight: 700; color: var(--ac, var(--wb-fg, #2c3e50));
}
.peacock-workbench .wb-a3d-co-chip {
    display: inline-block; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 5px; border-radius: 2px; background: transparent;
    border: 1px solid var(--ac, var(--wb-fg-muted, #7a8794)); color: var(--ac, var(--wb-fg-muted, #7a8794));
}

/* ---- Selection-panel inspector (Annotations3DInspectorView / #wb-annotate3d-tpl) ---- */
.peacock-workbench .wb-a3d {
    display: flex; flex-direction: column; padding: 4px 2px 2px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-a3d-head {
    display: flex; align-items: center; gap: 8px; padding: 4px 2px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 800; color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-a3d-head .fa { color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-a3d-head small,
.peacock-workbench .wb-a3d-head span[class*="sub"] {
    font-weight: 600; font-size: calc(10.5px * var(--wb-font-scale, 1)); letter-spacing: 0; text-transform: none; color: var(--wb-fg-muted, #7a8794);
}
.peacock-workbench .wb-a3d-head [class*="count"] {
    margin-left: auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent, #2c5282);
    background: var(--wb-panel-2, #f4f6f8); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--d3v-r-full, 999px); padding: 2px 9px;
}

/* geometry / ML-model summary rows (mirror the mockup's model-row) */
.peacock-workbench .wb-a3d-geom-row,
.peacock-workbench .wb-a3d-model-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 9px; margin-bottom: 8px;
    background: var(--wb-panel-2, #f4f6f8); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px);
}
.peacock-workbench .wb-a3d-geom-row .fa,
.peacock-workbench .wb-a3d-model-row .fa {
    width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--wb-radius-sm, 4px); background: var(--wb-panel, #fbfcfd);
    border: 1px solid var(--wb-border, #e0e3e6); color: var(--wb-accent, #2c5282); font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-a3d-geom-row b,
.peacock-workbench .wb-a3d-model-row b {
    display: block; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg, #2c3e50);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-a3d-geom-row small,
.peacock-workbench .wb-a3d-model-row small {
    display: block; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-a3d-geom-row > *:not(.fa):not(.wb-a3d-btn):not(.wb-a3d-btn-primary),
.peacock-workbench .wb-a3d-model-row > *:not(.fa):not(.wb-a3d-btn):not(.wb-a3d-btn-primary) {
    min-width: 0; flex: 1 1 auto; line-height: 1.3;
}

/* generic buttons — frozen: used for Add Measurement/Point AND the geom/model "Change" actions */
.peacock-workbench .wb-a3d-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 12px; font-family: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--wb-fg, #2c3e50); background: var(--wb-panel, #fbfcfd);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: var(--wb-radius-sm, 4px);
    cursor: pointer; white-space: nowrap;
    transition: background var(--d3v-t-fast, .14s ease), border-color var(--d3v-t-fast, .14s ease),
                color var(--d3v-t-fast, .14s ease), box-shadow var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-btn:hover { border-color: var(--wb-accent, #2c5282); color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-a3d-btn:active { transform: translateY(1px); }
.peacock-workbench .wb-a3d-btn-primary {
    color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.peacock-workbench .wb-a3d-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(0,0,0,.24); color: var(--wb-accent-fg, #fff); }

.peacock-workbench .wb-a3d-add-row { display: flex; gap: 8px; padding: 2px 2px 12px; }
.peacock-workbench .wb-a3d-add-row .wb-a3d-btn,
.peacock-workbench .wb-a3d-add-row .wb-a3d-btn-primary { flex: 1 1 0; }

.peacock-workbench .wb-a3d-listcap {
    display: flex; align-items: center; gap: 8px; padding: 6px 2px 8px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wb-fg-muted, #7a8794);
}
.peacock-workbench .wb-a3d-colorby {
    margin-left: auto; font-family: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--wb-fg, #2c3e50);
    background: var(--wb-panel, #fbfcfd); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px); padding: 4px 8px; cursor: pointer;
    transition: border-color var(--d3v-t-fast, .14s ease), box-shadow var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-colorby:hover { border-color: var(--wb-border-strong, var(--wb-accent, #2c5282)); }
.peacock-workbench .wb-a3d-colorby:focus { outline: none; border-color: var(--wb-accent, #2c5282); box-shadow: 0 0 0 2px rgba(44,123,229,.18); }

/* tabular annotation list — Option C CAD: dashed row dividers, mono values */
.peacock-workbench .wb-a3d-list { display: flex; flex-direction: column; max-height: 330px; overflow: auto; margin-bottom: 4px; }
.peacock-workbench .wb-a3d-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border-bottom: 1px dashed var(--wb-border, #e0e3e6);
    transition: background var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-row:last-child { border-bottom: 0; }
.peacock-workbench .wb-a3d-row:hover { background: var(--wb-row-hover, #e8eef5); }

.peacock-workbench .wb-a3d-swatch {
    width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.peacock-workbench .wb-a3d-rmid { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 2px; }
.peacock-workbench .wb-a3d-rn {
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg, #2c3e50);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: transparent; border: 0; padding: 0; width: 100%;
}
.peacock-workbench .wb-a3d-rn:focus { outline: none; color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-a3d-rt { display: flex; align-items: center; gap: 6px; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); }
.peacock-workbench .wb-a3d-tag {
    background: var(--wb-panel-2, #f4f6f8); border-radius: 2px; padding: 1px 6px;
    font-weight: 700; color: var(--wb-fg-muted, #7a8794); font-size: calc(9.5px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .03em;
}
.peacock-workbench .wb-a3d-map { color: var(--wb-accent, #2c5282); font-weight: 700; }
.peacock-workbench .wb-a3d-chip {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 6px; border-radius: var(--d3v-r-full, 999px);
}
.peacock-workbench .wb-a3d-rval {
    flex: 0 0 auto; min-width: 52px; text-align: right;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-a3d-rval.unmapped,
.peacock-workbench .wb-a3d-rval[data-unmapped] { color: var(--wb-fg-muted, #7a8794); }

/* per-row code input (`[data-a3d-code]`) — same treatment as .wb-a3d-rn, kept tiny */
.peacock-workbench .wb-a3d-row input[data-a3d-code] {
    width: 34px; flex: 0 0 auto; font-family: inherit; font-weight: 700; font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg, #2c3e50); background: var(--wb-panel-2, #f4f6f8);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: var(--wb-radius-sm, 4px);
    padding: 3px 5px; text-align: center; text-transform: uppercase; letter-spacing: .03em;
    transition: border-color var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-row input[data-a3d-code]:focus { outline: none; border-color: var(--wb-accent, #2c5282); }

.peacock-workbench .wb-a3d-gear,
.peacock-workbench .wb-a3d-del {
    flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--wb-border, #e0e3e6); background: var(--wb-panel, #fbfcfd);
    color: var(--wb-fg-muted, #7a8794); border-radius: var(--wb-radius-sm, 4px);
    cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0;
    transition: opacity var(--d3v-t-fast, .14s ease), color var(--d3v-t-fast, .14s ease), border-color var(--d3v-t-fast, .14s ease), background var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-row:hover .wb-a3d-gear,
.peacock-workbench .wb-a3d-row:hover .wb-a3d-del,
.peacock-workbench .wb-a3d-gear:focus,
.peacock-workbench .wb-a3d-del:focus { opacity: 1; }
.peacock-workbench .wb-a3d-gear:hover { color: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-a3d-del:hover { color: #fff; background: var(--wb-danger, #e2483a); border-color: var(--wb-danger, #e2483a); }

.peacock-workbench .wb-a3d-legend {
    display: flex; align-items: center; gap: 10px; margin: 8px 2px 4px; padding: 9px 11px;
    background: var(--wb-panel-2, #f4f6f8); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px); font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.peacock-workbench .wb-a3d-legend > span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Predict CTA — kept purple (matches the ML-model surfaces elsewhere in this file, e.g. .wb-mlp-*) */
.peacock-workbench .wb-a3d-predict {
    margin-top: 12px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; border-radius: var(--wb-radius-sm, 4px); padding: 11px; font-family: inherit;
    font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 4px 12px rgba(124,58,237,.28);
    transition: filter var(--d3v-t-fast, .14s ease), transform var(--d3v-t-fast, .14s ease), box-shadow var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-predict:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,.34); }
.peacock-workbench .wb-a3d-predict[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }

/* ============================================================================
   R2026-43 — 3D Annotations inspector — THEMED to match wb-mlp / wb-exf panels.
   Uses the REAL shell tokens (--wb-panel / --wb-panel-2 / --wb-border / --wb-fg /
   --wb-fg-muted / --wb-accent / --wb-accent-fg / --wb-radius / --wb-row-hover) so
   it themes (light/dark/blueprint) exactly like PedPro & the ML-predict panels.
   Overrides the initial P4 block above.
   ========================================================================== */
.peacock-workbench .wb-a3d { display: flex; flex-direction: column; gap: 9px; padding: 10px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); }

.peacock-workbench .wb-a3d-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.peacock-workbench .wb-a3d-title { font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--wb-accent); }
.peacock-workbench .wb-a3d-count { font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent); background: var(--wb-row-hover); border: 1px solid var(--wb-border); border-radius: 999px; padding: 1px 8px; }
/* Added by shashank2104 on 08/20/2026 at 07:10 PM - R2026-189 - panel close, matching .wb-inc-close. */
.peacock-workbench .wb-a3d-close { flex: 0 0 auto; margin-left: auto; width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--wb-fg-muted); border-radius: var(--wb-radius-sm); cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1)); transition: background .12s ease, color .12s ease; }
.peacock-workbench .wb-a3d-close:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-a3d-close:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }

/* Added by shashank2104 on 08/20/2026 at 03:05 PM - R2026-189 - saved-session strip.
   Updated by shashank2104 on 08/20/2026 at 01:32 PM - R2026-173 - shared as `.wb-session` under
   `.peacock-workbench` so PedPro / Dummy Articulation / 3D Annotations all use one restore panel.
   Two states off ONE block: `.is-ask` is the question when the project carries a saved session
   (accent left rail, actions on their own line); without it the same strip is the quiet one-line
   Restore control. `.wb-a3d-session*` aliases keep older annotation markup working. */
.peacock-workbench .wb-session,
.peacock-workbench .wb-a3d-session {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 7px 9px;
    background: var(--wb-panel-2);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    min-width: 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.peacock-workbench .wb-session.is-ask,
.peacock-workbench .wb-a3d-session.is-ask {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px;
    border-left: 3px solid var(--wb-accent);
    background: color-mix(in srgb, var(--wb-accent) 8%, var(--wb-panel-2));
}
.peacock-workbench .wb-session-body,
.peacock-workbench .wb-a3d-session-body {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: calc(11px * var(--wb-font-scale, 1));
    line-height: 1.4;
    color: var(--wb-fg-muted);
}
/** Added by shashank2104 on 08/20/2026 at 05:59 PM - R2026-189 - stacked strip is two lines
 *  (copy, then buttons). `flex: 1 1 12em` on the body made it eat the whole Selection panel. **/
.peacock-workbench .wb-session.is-ask .wb-session-body,
.peacock-workbench .wb-a3d-session.is-ask .wb-session-body,
.peacock-workbench .wb-session.is-ask .wb-a3d-session-body,
.peacock-workbench .wb-a3d-session.is-ask .wb-a3d-session-body {
    flex: 0 0 auto;
}
.peacock-workbench .wb-session-body .fa,
.peacock-workbench .wb-a3d-session-body .fa {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--wb-accent);
}
.peacock-workbench .wb-session-body span,
.peacock-workbench .wb-a3d-session-body span {
    min-width: 0;
    /** Added by shashank2104 on 08/20/2026 at 05:57 PM - R2026-189 - `anywhere` wrapped each letter
     *  once the action buttons ate the row in the narrow Selection panel. **/
    overflow-wrap: break-word;
}
.peacock-workbench .wb-session.is-ask .wb-session-body,
.peacock-workbench .wb-a3d-session.is-ask .wb-a3d-session-body,
.peacock-workbench .wb-session.is-ask .wb-a3d-session-body,
.peacock-workbench .wb-a3d-session.is-ask .wb-session-body {
    color: var(--wb-fg);
}
.peacock-workbench .wb-session-acts,
.peacock-workbench .wb-a3d-session-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.peacock-workbench .wb-session.is-ask .wb-session-acts,
.peacock-workbench .wb-a3d-session.is-ask .wb-a3d-session-acts,
.peacock-workbench .wb-session.is-ask .wb-a3d-session-acts,
.peacock-workbench .wb-a3d-session.is-ask .wb-session-acts {
    justify-content: flex-end;
}
/* busy — restore in flight; strip states what it is doing and offers no racing action. */
.peacock-workbench .wb-session.is-busy,
.peacock-workbench .wb-a3d-session.is-busy {
    border-color: var(--wb-accent);
}
.peacock-workbench .wb-session.is-busy .wb-session-body,
.peacock-workbench .wb-a3d-session.is-busy .wb-a3d-session-body,
.peacock-workbench .wb-session.is-busy .wb-a3d-session-body,
.peacock-workbench .wb-a3d-session.is-busy .wb-session-body {
    color: var(--wb-fg);
}
/* warn — e.g. saved-schema stand-in when the ML model could not load */
.peacock-workbench .wb-session.is-warn,
.peacock-workbench .wb-a3d-session.is-warn {
    border-left: 3px solid var(--d3v-status-warning, #d97706);
    background: color-mix(in srgb, var(--d3v-status-warning, #d97706) 8%, var(--wb-panel-2));
}
.peacock-workbench .wb-session.is-warn .wb-session-body,
.peacock-workbench .wb-a3d-session.is-warn .wb-a3d-session-body,
.peacock-workbench .wb-session.is-warn .wb-a3d-session-body,
.peacock-workbench .wb-a3d-session.is-warn .wb-session-body {
    color: var(--wb-fg);
}
.peacock-workbench .wb-session.is-warn .wb-session-body .fa,
.peacock-workbench .wb-a3d-session.is-warn .wb-a3d-session-body .fa,
.peacock-workbench .wb-session.is-warn .wb-a3d-session-body .fa,
.peacock-workbench .wb-a3d-session.is-warn .wb-session-body .fa {
    color: var(--d3v-status-warning, #d97706);
}
/* delete-the-saved-session control — quiet until hovered, then it reads as destructive */
.peacock-workbench .wb-session-icobtn-fresh,
.peacock-workbench .wb-a3d-icobtn-fresh {
    padding: 5px 9px;
    font-size: calc(13px * var(--wb-font-scale, 1));
    line-height: 1;
    color: var(--wb-fg-muted);
}
.peacock-workbench .wb-session-icobtn-fresh:hover,
.peacock-workbench .wb-a3d-icobtn-fresh:hover {
    border-color: var(--d3v-status-danger, #dc2626);
    color: var(--d3v-status-danger, #dc2626);
    background: color-mix(in srgb, var(--d3v-status-danger, #dc2626) 10%, transparent);
}

/* Added by shashank2104 on 09/10/2026 - R2026-276 - the stale-geometry strip.
   It reuses `.wb-session` wholesale — `is-ask` for the stacked copy-then-actions layout and
   `is-warn` for the amber rail off `--d3v-status-warning` — so it needs no colour, border or radius
   of its own and cannot drift from the saved-session strip it sits directly above. The only thing it
   does need is room: it carries THREE actions where the session strip carries two, and three wrap to
   a second row in the 330px Selection panel. */
.peacock-workbench .wb-session.pedpro-stale .wb-session-acts {
    margin-top: 2px;
    row-gap: 4px;
}

/* Added by shashank2104 on 08/20/2026 at 01:43 PM - R2026-173 - shared session-strip buttons
   (same look as Annotations Restore / Use saved session). Used by PedPro + Dummy Articulation too. */
.peacock-workbench .wb-session-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--wb-radius-sm);
    border: 1px solid var(--wb-border);
    background: var(--wb-panel);
    color: var(--wb-fg);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background .14s, border-color .14s, color .14s, filter .14s, box-shadow .14s;
}
.peacock-workbench .wb-session-btn:hover {
    background: var(--wb-row-hover);
    border-color: var(--wb-accent);
    color: var(--wb-accent);
}
.peacock-workbench .wb-session-btn:active { transform: translateY(1px); }
.peacock-workbench .wb-session-btn-primary {
    border-color: var(--wb-accent);
    background: var(--wb-accent);
    color: var(--wb-accent-fg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.peacock-workbench .wb-session-btn-primary:hover {
    filter: brightness(1.12);
    background: var(--wb-accent);
    color: var(--wb-accent-fg, #fff);
    border-color: var(--wb-accent);
}

/* dropzone — HIDDEN for now (implementation TBD); markup + handlers stay live */
.peacock-workbench .wb-a3d-drop { display: none; }
.peacock-workbench .wb-a3d-drop [data-a3d-file] { display: none !important; }

/* ml-model row — mirrors .wb-mlp-modelrow */
.peacock-workbench .wb-a3d-model-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); min-width: 0; }
.peacock-workbench .wb-a3d-model-ic { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(124,58,237,.14); color: #7c3aed; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-a3d-model-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.peacock-workbench .wb-a3d-model-txt b { font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-a3d-model-txt small { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* buttons — mirror .wb-btn */
.peacock-workbench .wb-a3d-add-row { display: flex; gap: 7px; }
.peacock-workbench .wb-a3d-add-row .wb-a3d-btn { flex: 1; }
.peacock-workbench .wb-a3d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; padding: 7px 10px; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.peacock-workbench .wb-a3d-btn:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-btn-primary { border-color: var(--wb-accent); background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-a3d-btn-primary:hover { filter: brightness(1.12); background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-a3d-btn-sm { padding: 5px 10px; flex: 0 0 auto; }

/* list caption */
.peacock-workbench .wb-a3d-listcap { display: flex; align-items: center; justify-content: space-between; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--wb-fg-muted); padding: 3px 2px 0; }
.peacock-workbench .wb-a3d-colorby { display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.peacock-workbench .wb-a3d-colorby label { margin: 0; font-weight: 600; color: var(--wb-fg-muted); }
.peacock-workbench .wb-a3d-colorby select { font: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); padding: 2px 6px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel); color: var(--wb-fg); }

/* unit conversion selector (R2026-47) */
.peacock-workbench .wb-a3d-units-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px 2px; }
.peacock-workbench .wb-a3d-units-lbl { margin: 0; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--wb-fg-muted); }
.peacock-workbench .wb-a3d-units-sel {
    margin-left: auto; font: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    padding: 3px 8px; cursor: pointer;
    transition: border-color var(--d3v-t-fast, .14s ease), box-shadow var(--d3v-t-fast, .14s ease);
}
.peacock-workbench .wb-a3d-units-sel:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-units-sel:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 2px rgba(44,123,229,.18); }

/** Added by shashank2104 on 07/31/2026 at 06:09 PM - R2026-43 - Mean-fill missing inputs checkbox. **/
.peacock-workbench .wb-a3d-use-mean {
    display: flex; align-items: flex-start; gap: 8px; margin: 4px 2px 2px; padding: 6px 8px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel-2);
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); cursor: pointer; line-height: 1.35;
}
.peacock-workbench .wb-a3d-use-mean-cb { margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.peacock-workbench .wb-a3d-use-mean span { flex: 1; min-width: 0; }

/* list + rows */
.peacock-workbench .wb-a3d-list { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-a3d-empty { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; text-align: center; border: 1px dashed var(--wb-border); border-radius: var(--wb-radius-sm); color: var(--wb-fg-muted); }
.peacock-workbench .wb-a3d-empty b { color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-a3d-empty small { font-size: calc(10.5px * var(--wb-font-scale, 1)); }

.peacock-workbench .wb-a3d-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel-2); transition: background .14s, border-color .14s; }
.peacock-workbench .wb-a3d-row:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-swatch { width: 4px; align-self: stretch; border-radius: 3px; background: var(--ac, var(--wb-fg-muted)); flex: 0 0 auto; margin: 1px 0; }
.peacock-workbench .wb-a3d-rbody { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.peacock-workbench .wb-a3d-rtop { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-a3d-code { flex: 1; min-width: 0; font: inherit; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; border: 0; border-bottom: 1px solid transparent; padding: 1px 2px; background: transparent; color: var(--wb-fg); }
.peacock-workbench .wb-a3d-code:hover { border-bottom-color: var(--wb-border); }
.peacock-workbench .wb-a3d-code:focus { outline: 0; border-bottom-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-rval { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); flex: 0 0 auto; }
.peacock-workbench .wb-a3d-chip { font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; flex: 0 0 auto; color: var(--sc, var(--wb-fg-muted)); background: var(--sbg, var(--wb-row-hover)); }
.peacock-workbench .wb-a3d-rbot { display: flex; align-items: center; gap: 6px; }
.peacock-workbench .wb-a3d-arrow { color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); flex: 0 0 auto; }
.peacock-workbench .wb-a3d-map {
    flex: 1; min-width: 0; height: 26px; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1));
    padding: 0 6px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); cursor: pointer; transition: border-color .14s;
}
.peacock-workbench .wb-a3d-map:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-map:focus { outline: 0; border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-noinputs { flex: 1; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-style: italic; color: var(--wb-fg-muted); }
.peacock-workbench .wb-a3d-icobtn { width: 24px; height: 24px; flex: 0 0 auto; border: 1px solid var(--wb-border); background: var(--wb-panel); border-radius: var(--wb-radius-sm); color: var(--wb-fg-muted); cursor: pointer; font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1; transition: .14s; }
.peacock-workbench .wb-a3d-icobtn:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-a3d-del:hover { border-color: #e0432a; color: #e0432a; }

/* predict — ML affordance purple, like the ML-predict CTA */
.peacock-workbench .wb-a3d-predict { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 2px; border: 0; border-radius: var(--wb-radius-sm); padding: 10px; font: inherit; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 3px 12px rgba(124,58,237,.30); transition: .15s; }
.peacock-workbench .wb-a3d-predict:hover { filter: brightness(1.1); }
.peacock-workbench .wb-a3d-predict[disabled] { opacity: .55; cursor: default; filter: none; }
.peacock-workbench .wb-a3d-predict.is-busy { opacity: .8; cursor: progress; }
.peacock-workbench .wb-a3d-predval { font-family: ui-monospace, Menlo, monospace; background: rgba(255,255,255,.22); border-radius: 999px; padding: 1px 9px; }
.peacock-workbench .wb-a3d-error { font-size: calc(11px * var(--wb-font-scale, 1)); color: #e0432a; padding: 2px 4px; }
/* R2026-47 — "View N predicted curves" button (curve-output models) */
.peacock-workbench .wb-a3d-viewcurves { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; border: 1px solid var(--wb-border, #d7d3e6); border-radius: var(--wb-radius-sm); padding: 8px; font: inherit; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: #6366f1; cursor: pointer; background: rgba(99,102,241,.08); transition: .15s; }
.peacock-workbench .wb-a3d-viewcurves:hover { background: rgba(99,102,241,.16); border-color: #6366f1; }

/* Added by shashank2104 on 08/03/2026 at 03:10 PM - R2026-43 - the annotations action row is a PINNED
   footer: `.wb-panel-foot` is the shell's inspector contract (see .wb-inspector-context above), which
   sticks it to the bottom of the Selection panel's scroller so Predict stays reachable however long the
   annotation / preset list grows — same as the transform + morph tools. Only the inner gap is declared
   here; sticky / bleed / top-border all come from the shared contract rule. */
.peacock-workbench .wb-a3d-foot { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-a3d-foot .wb-a3d-predict,
.peacock-workbench .wb-a3d-foot .wb-a3d-viewcurves { margin-top: 0; }
/* While a prediction is running the SAME button IS the Stop control — red, still clickable, spinner
   kept so it also reads as "work in flight". No second target to move the mouse to. */
.peacock-workbench .wb-a3d-predict.is-stopping {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 3px 12px rgba(224,67,42,.30); cursor: pointer; opacity: 1;
}
.peacock-workbench .wb-a3d-predict.is-stopping:hover { filter: brightness(1.1); }
.peacock-workbench .wb-a3d-stoptag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,.22); border-radius: 999px; padding: 1px 9px; font-weight: 800;
}
/** Added by shashank2104 on 08/19/2026 at 08:55 AM - R2026-43 - PredictionUtil sliders in the inspector. */
.peacock-workbench .wb-a3d-pred-sliders { min-height: 0; }
.peacock-workbench .wb-a3d-pred-sliders .pred-input-container,
.peacock-workbench .wb-a3d-pred-sliders .pred-inputs {
    height: auto !important;
    min-height: 0 !important;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: none;
}


/* ============================================================================
   R2026-43 — Occupant-packaging preset checklist (Load preset button, armed-pick
   hint banner, and the pending-slot guided checklist). Themed with the same
   --wb-* tokens as the rest of the inspector so it matches light/dark/blueprint.
   ========================================================================== */
.peacock-workbench .wb-a3d-preset-row { display: flex; }
.peacock-workbench .wb-a3d-preset-btn { flex: 1; }
.peacock-workbench .wb-a3d-preset-btn .fa { color: var(--wb-accent); }

/* explicit "Auto-map by code" — only rendered when a model is attached */
.peacock-workbench .wb-a3d-automap-row { display: flex; }
.peacock-workbench .wb-a3d-automap-btn { flex: 1; }
.peacock-workbench .wb-a3d-automap-btn .fa { color: #7c3aed; }

/* armed-pick hint banner — shown while a preset slot's pick is waiting for endpoints */
.peacock-workbench .wb-a3d-pending {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.35);
    border-radius: var(--wb-radius-sm); line-height: 1.35;
}
.peacock-workbench .wb-a3d-pending .fa { color: #7c3aed; flex: 0 0 auto; }
/* Added by shashank2104 on 08/10/2026 - R2026-43 - Cancel sits at the end of the pending banner and
   never shrinks, so the way out of an armed pick is always visible next to what is being picked. */
.peacock-workbench .wb-a3d-cancelpick { margin-left: auto; flex: 0 0 auto; }

.peacock-workbench .wb-a3d-pending b { color: var(--wb-accent); }

/* the checklist container */
/** Added by shashank2104 on 08/19/2026 at 09:28 AM - R2026-189 - drop grey --wb-panel-2 fill so the inputs list uses the default panel background. **/
.peacock-workbench .wb-a3d-checklist {
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
.peacock-workbench .wb-a3d-checklist-head {
    display: flex; align-items: flex-start; gap: 8px; padding: 0 1px 3px; flex-wrap: wrap;
}
/** Added by shashank2104 on 08/18/2026 at 03:09 PM - R2026-189 - Model inputs header: title +
 *  mean note on the left, upload dropzone + Choose Units on the right. **/
.peacock-workbench .wb-a3d-checklist-head-l { flex: 1 1 140px; min-width: 0; }
.peacock-workbench .wb-a3d-checklist-head-title-row { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-a3d-checklist-note {
    display: flex; align-items: flex-start; gap: 6px; margin-top: 4px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.4; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-a3d-checklist-note > i { margin-top: 1px; flex: 0 0 auto; color: var(--wb-accent); }
.peacock-workbench .wb-a3d-checklist-head-r {
    display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 1 auto; min-width: 0;
}
.peacock-workbench .wb-a3d-file-upload.dropzone {
    min-height: 0 !important; height: 30px; width: 32px; padding: 0 !important; margin: 0;
    border: 1px solid var(--wb-border) !important; background: var(--wb-panel) !important;
    border-radius: var(--wb-radius-sm); flex: 0 0 auto;
}
.peacock-workbench .wb-a3d-file-upload.dropzone.dz-drag-hover,
.peacock-workbench .wb-a3d-file-upload.dropzone.dz-started {
    border-color: var(--wb-accent) !important; background: var(--wb-row-hover) !important;
}
.peacock-workbench .wb-a3d-file-upload.dropzone .dz-preview,
.peacock-workbench .wb-a3d-file-upload.dropzone .dz-message { display: none !important; }
.peacock-workbench .wb-a3d-units-wrap { width: 132px; min-width: 0; flex: 0 1 132px; }
.peacock-workbench .wb-a3d-units-wrap .select2-container,
.peacock-workbench .wb-a3d-units-wrap .select2-container.form-control {
    width: 100% !important; height: auto; padding: 0; margin: 0;
    background: transparent; border: 0; box-shadow: none;
}
.peacock-workbench .wb-a3d-units-wrap .select2-container .select2-choice {
    background: var(--wb-panel) !important;
    border: 1px solid var(--wb-border) !important;
    border-radius: var(--wb-radius-sm);
    box-shadow: none !important;
    height: 30px; line-height: 28px; padding: 0 22px 0 8px;
}
.peacock-workbench .wb-a3d-checklist-title {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--wb-fg-muted);
}
.peacock-workbench .wb-a3d-checklist-count {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent);
    background: var(--wb-row-hover); border: 1px solid var(--wb-border);
    border-radius: 999px; padding: 1px 8px;
}
.peacock-workbench .wb-a3d-checklist-clear {
    margin-left: auto; font: inherit; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted); background: transparent; border: 0; cursor: pointer;
    padding: 2px 4px; transition: color .14s;
}
.peacock-workbench .wb-a3d-checklist-clear:hover { color: #e0432a; }

/* one pending slot row */
.peacock-workbench .wb-a3d-slot {
    display: flex; align-items: center; gap: 8px; padding: 6px 7px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); transition: background .14s, border-color .14s;
}
.peacock-workbench .wb-a3d-slot:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-a3d-slot.is-armed { border-color: #7c3aed; box-shadow: 0 0 0 1px rgba(124,58,237,.35); }
.peacock-workbench .wb-a3d-slot-code {
    flex: 0 0 auto; min-width: 34px; text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--wb-accent); background: var(--wb-row-hover);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); padding: 2px 5px;
    text-transform: uppercase; letter-spacing: .03em;
}
.peacock-workbench .wb-a3d-slot-body { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.peacock-workbench .wb-a3d-slot-body b {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-a3d-slot-body small { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-a3d-slot-mapped { color: var(--wb-accent); font-weight: 600; }
.peacock-workbench .wb-a3d-slot-unmapped { font-style: italic; }
.peacock-workbench .wb-a3d-slot .wb-a3d-btn-sm { padding: 4px 10px; }
.peacock-workbench .wb-a3d-slot-del { opacity: .7; }
.peacock-workbench .wb-a3d-slot-del:hover { opacity: 1; border-color: #e0432a; color: #e0432a; }

/* Added by shashank2104 on 07/31/2026 at 04:01 PM - R2026-43 - Embedded Inputs Measure checklist. */
.peacock-workbench .wb-a3d-inputs { margin: 0 0 8px; }
/* Updated by shashank2104 on 08/10/2026 - R2026-43 - ONE state worth showing: does this input have a
   value yet. Measured or typed makes no difference to that question, so both light the SAME green left
   edge, and clearing the value puts the edge back to transparent. The edge is declared on the base row
   too, so a value appearing never shifts the layout by the width of a border. */
.peacock-workbench .wb-a3d-inputs .wb-a3d-slot { border-left: 3px solid transparent; }
.peacock-workbench .wb-a3d-inputs .wb-a3d-slot.is-measured { border-left-color: rgba(34, 160, 100, .85); }

/* Added by shashank2104 on 08/10/2026 - R2026-43 - manual value entry per model input. */
/* Type icon per input — same rounded-tile treatment the ML prediction slider heads use
   (.mlp-fh-icon in db-prediction.css), themed with the workbench tokens. */
.peacock-workbench .wb-a3d-slot-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-panel-2);
    border: 1px solid var(--wb-border);
    color: var(--wb-accent);
    font-size: calc(11px * var(--wb-font-scale, 1));
}
/* Updated by shashank2104 on 08/10/2026 - R2026-43 - TWO ROWS per input: the name (with its
   typed/measured status) owns the first, the value field + Measure own the second. Side by side they
   competed for a ~280px panel and the name lost, showing two characters and an ellipsis. Scoped to the
   Inputs checklist so nothing else that uses .wb-a3d-slot changes. */
.peacock-workbench .wb-a3d-inputs .wb-a3d-slot {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
/* name row: icon + name. The name has the row to itself now, so let a long one wrap. */
.peacock-workbench .wb-a3d-inputs .wb-a3d-slot-body {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.peacock-workbench .wb-a3d-inputs .wb-a3d-slot-body b {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1 1 auto;
}
.peacock-workbench .wb-a3d-slot-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.peacock-workbench .wb-a3d-slot-actions .wb-a3d-btn-sm { flex: 0 0 auto; }
.peacock-workbench .wb-a3d-slot-val {
    /* fills the row it now shares only with the Measure button */
    flex: 1 1 auto;
    width: auto;
    min-width: 54px;
    font: inherit;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg);
    background: var(--wb-panel-2);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    padding: 4px 6px;
    transition: border-color .14s, background .14s;
}
.peacock-workbench .wb-a3d-slot-val:focus {
    outline: 0;
    border-color: var(--wb-accent);
    background: var(--wb-panel);
}
/* the spinners steal width in a 76px field and the value is typed, not stepped */
.peacock-workbench .wb-a3d-slot-val::-webkit-outer-spin-button,
.peacock-workbench .wb-a3d-slot-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.peacock-workbench .wb-a3d-slot-val { -moz-appearance: textfield; }
.peacock-workbench .wb-a3d-add-row.is-secondary {
    opacity: .72;
    margin-top: 4px;
}
.peacock-workbench .wb-a3d-add-row.is-secondary .wb-a3d-btn {
    font-size: calc(11px * var(--wb-font-scale, 1));
    padding: 4px 8px;
}
.peacock-workbench .wb-a3d-rbot.is-advanced {
    opacity: .65;
}
/* Added by shashank2104 on 07/31/2026 at 04:52 PM - R2026-43 - Inputs sidebar search. */
.peacock-workbench .wb-a3d-input-search {
    position: relative;
    display: flex;
    align-items: center;
}
.peacock-workbench .wb-a3d-input-searchico {
    position: absolute;
    left: 8px;
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted);
    pointer-events: none;
}
.peacock-workbench .wb-a3d-input-searchin {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg);
    background: var(--wb-panel);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
    padding: 5px 22px 5px 23px;
}
.peacock-workbench .wb-a3d-input-searchin:focus {
    outline: 0;
    border-color: var(--wb-accent);
}
.peacock-workbench .wb-a3d-input-searchx {
    position: absolute;
    right: 4px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wb-fg-muted);
    font-size: calc(12px * var(--wb-font-scale, 1));
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
}
.peacock-workbench .wb-a3d-input-searchx:hover { color: var(--wb-fg); }
.peacock-workbench .wb-a3d-input-searchx[hidden] { display: none; }
.peacock-workbench .wb-a3d-input-search-count {
    margin-left: auto;
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted);
}
.peacock-workbench .wb-a3d-input-search-empty {
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted);
    font-style: italic;
    padding: 4px 2px;
}
/** Added by shashank2104 on 08/19/2026 at 09:31 AM - R2026-189 - drop plugins.css grey --mlp-bg on the mounted slider host. **/
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders.pl-ml-prediction.modern,
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders .pl-predict-container,
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders .pl-predict-container > .d3view-flex-v.flex-space-out,
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders .pred-input-container,
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders .pred-inputs,
.peacock-workbench .wb-a3d-checklist .wb-a3d-pred-sliders .pred-sliders {
    background: transparent !important;
}

/** Added by shashank2104 on 08/19/2026 - R2026-43 - THE 3D ANNOTATIONS PANEL IS A FLEX COLUMN.
 *  ⛔ NO STATIC HEIGHTS IN THIS BLOCK. If something needs bounding, give it `flex: 1 1 auto;
 *  min-height: 0` and let the panel's own height do the work.
 *
 *  The shell contract makes `.wb-inspector-context` the one bounded scroller and pins an action row
 *  inside it with `.wb-panel-foot` (position: sticky). That is right for a short tool body, but this
 *  panel's body is a 23-row input list, and with the whole thing in one scroller the head (count,
 *  Units, import/export/clear) and the search box scrolled away with the rows — exactly the chrome
 *  you need while working through a long list. A first cut bounded the list with `max-height: 46vh`,
 *  which fixed the scrolling and left the Predict footer floating wherever 46vh happened to end.
 *
 *  So this host opts OUT of the shared scroller: `.is-a3d-host` (added by Config.Inspectors.annotate3d,
 *  removed by the renderContext close hook) turns the container into a flex column that does not
 *  scroll, and inside it:
 *      head / deck drop / model row / checklist head / search / Predict   flex: 0 0 auto
 *      the ONE long region — the input list, or the annotation list       flex: 1 1 auto, scrolls
 *  Predict is therefore a real flex footer, always at the bottom edge of the panel whatever the
 *  window height, instead of sticking to the bottom of a scroller that may be taller than it.
 *
 *  ⚠ Exactly ONE region is ever `flex: 1` here, and that is what makes it work: the standalone panel
 *  shows the input checklist OR the annotation list, never both (see `showAnnotations` in
 *  Annotations3DInspectorView.render). Only the EMBEDDED hosts show both — and they never carry
 *  `.is-a3d-host`, so every rule below is scoped away from them and their layout is unchanged.
 *
 *  ⚠ The node that ends up scrolling inside the input checklist is PredictionUtil's OWN
 *  `.pred-input-container`, not our host: it already carries `overflow-y: auto` and `full-h`, so once
 *  anything above it is bounded it becomes the scroller. `overflow-y: auto` on the host is the
 *  fallback for a page where that inner rule does not apply; the two never both engage. **/
.wb-inspector-context.is-a3d-host {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wb-inspector-context.is-a3d-host > .wb-a3d { flex: 1 1 auto; min-height: 0; }
/* everything that is chrome holds its natural height */
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-head,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-drop,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-model-row,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-add-row,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-listcap,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-pending,
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-embed-hint,
.wb-inspector-context.is-a3d-host .wb-a3d-inputs > .wb-a3d-checklist-head,
.wb-inspector-context.is-a3d-host .wb-a3d-inputs > .wb-a3d-input-search,
.wb-inspector-context.is-a3d-host .wb-a3d-inputs > .wb-a3d-input-search-empty { flex: 0 0 auto; }
/* the input checklist claims the leftover height and lays its own contents out the same way */
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-inputs { flex: 1 1 auto; min-height: 0; }
.wb-inspector-context.is-a3d-host .wb-a3d-inputs > .wb-a3d-pred-sliders {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    /* room for the scrollbar so a row's right edge is not clipped by it */
    padding-right: 3px;
}
/* with no ML model the annotation list is the long region instead (base rule caps it at 330px) */
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
/* Predict: a real flex footer, not the sticky one. It keeps the `.wb-panel-foot` bleed + top border
   so it still reads as a docked bar; `position: static` is what takes it off the sticky contract
   (whose `bottom: -8px` would otherwise offset it) and hands the placement to flex.
   ⚠ The panel root carries its OWN padding on top of the context's, so the footer's inherited
   `margin-bottom: -8px` (which cancels the context padding) left it 10px short of the panel edge.
   Zeroing the root's bottom padding is what makes the two line up — do NOT chase this with a bigger
   negative margin, that hardcodes the sum of two paddings. */
.wb-inspector-context.is-a3d-host > .wb-a3d { padding-bottom: 0; }
.wb-inspector-context.is-a3d-host .wb-a3d > .wb-a3d-foot {
    flex: 0 0 auto;
    position: static;
}

.peacock-workbench .wb-a3d-pending.is-hidden { display: none; }

/** MEASURED marker — a 3px green edge on any input whose value came from a 3D measurement.
 *  Drawn as a POSITIONED PSEUDO-ELEMENT, not a border and not a box-shadow. db-prediction.css's
 *  `.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.dbp-field` sets
 *  `border: 0 !important` AND `box-shadow: none !important`, so both of those properties are
 *  unwinnable here no matter how specific we get, and matching `!important` would just be an arms
 *  race with a component we do not own. A ::before bar is unopposed, costs no layout, and leaves
 *  the row's own `outline` free for the dbp-just-updated flash animation to use. **/
.peacock-workbench .wb-a3d-pred-sliders .dbp-field.is-a3d-measured { position: relative; }
.peacock-workbench .wb-a3d-pred-sliders .dbp-field.is-a3d-measured::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: var(--d3v-r-sm, 3px);
    background: var(--d3v-status-success, rgba(34, 160, 100, .9));
    pointer-events: none;
}

/* #2 — ML picker: give the sub-panes a scrollbar so long saved-model lists scroll */
.wb-open-modal .wb-open-pane[data-wb-open-pane="mlmodel"] { overflow: hidden; }
.wb-open-modal .wb-mlm-subpane.is-active { overflow-y: auto; max-height: 100%; min-height: 0; }
.wb-open-modal .wb-mlm-saved-list { overflow-y: auto; min-height: 0; }
/* ============================================================================
   Keyword Editor (R2026-53) — LS-PrePost style three-pane keyword form.
   Added by shashank2104 on 07/23/2026. Scoped under .peacock-workbench.
   ============================================================================ */
.peacock-workbench .wb-kwe-host { height: 100%; min-height: 0; display: flex; }
.peacock-workbench .wb-kwe-view { flex: 1; min-width: 0; min-height: 0; display: flex; }
.peacock-workbench .wb-kwe { flex: 1; min-width: 0; min-height: 0; display: flex; font-size: calc(11.5px * var(--wb-font-scale, 1)); }

/* --- left: keyword tree --- */
.peacock-workbench .wb-kwe-tree {
    flex: 0 0 236px; width: 236px; min-height: 0; display: flex; flex-direction: column;
    border-right: 1px solid var(--wb-border); background: var(--wb-panel);
}
.peacock-workbench .wb-kwe-tree-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 6px 9px; border-bottom: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.peacock-workbench .wb-kwe-tree-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.peacock-workbench .wb-kwe-radio {
    display: flex; align-items: center; gap: 4px; margin: 0; font-weight: 400;
    color: var(--wb-fg-muted); cursor: pointer;
}
.peacock-workbench .wb-kwe-radio input { margin: 0; }
.peacock-workbench .wb-kwe-flex { flex: 1 1 auto; }
.peacock-workbench .wb-kwe-node {
    display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px;
    cursor: pointer; border-left: 2px solid transparent;
}
.peacock-workbench .wb-kwe-node:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-kwe-node.is-sel { background: var(--wb-row-hover); border-left-color: var(--wb-accent); }
.peacock-workbench .wb-kwe-caret { flex: 0 0 11px; width: 11px; text-align: center; font-size: calc(9px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-kwe-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-kwe-node.is-present .wb-kwe-name { color: var(--wb-accent); font-weight: 600; }
.peacock-workbench .wb-kwe-node.is-absent .wb-kwe-name { color: var(--wb-fg-muted); }
.peacock-workbench .wb-kwe-kind { padding-left: 24px; }
.peacock-workbench .wb-kwe-kind .wb-kwe-name { font-weight: 400; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-kwe-count { flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }

/* --- centre: keyword input form --- */
.peacock-workbench .wb-kwe-form { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.peacock-workbench .wb-kwe-btnrow {
    flex: 0 0 auto; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    padding: 6px 9px; border-bottom: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.peacock-workbench .wb-kwe-btn {
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm); font-size: calc(11px * var(--wb-font-scale, 1)); padding: 3px 10px; cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.peacock-workbench .wb-kwe-btn:hover:not(:disabled) { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-kwe-btn:disabled { opacity: .45; cursor: not-allowed; }
/** Added by shashank2104 on 07/23/2026 - R2026-53 - Pick is a MODE: while it is armed the viewport is
    waiting for a click, and the button has to look different from every other button in the row. **/
.peacock-workbench .wb-kwe-btn.is-armed {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
    animation: wb-kwe-armed 1.15s ease-in-out infinite;
}
.peacock-workbench .wb-kwe-btn.is-armed:hover:not(:disabled) { color: var(--wb-accent-fg); }
@keyframes wb-kwe-armed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 158, 28, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 158, 28, .28); }
}
.peacock-workbench .wb-kwe-btn-primary { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-kwe-btn-primary:hover:not(:disabled) { filter: brightness(1.08); color: var(--wb-accent-fg); }
.peacock-workbench .wb-kwe-form-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.peacock-workbench .wb-kwe-type {
    padding: 6px; text-align: center; font-weight: 700; letter-spacing: .02em;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-type span { color: var(--wb-fg-muted); font-weight: 400; }
/** Added by shashank2104 on 07/23/2026 - R2026-53 - a catalogue keyword the open deck has no cards of. **/
.peacock-workbench .wb-kwe-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 32px 28px; text-align: center; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-empty-kw {
    font-family: var(--wb-mono, monospace); font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg);
    padding: 5px 12px; border: 1px solid var(--wb-border); border-radius: var(--d3v-r-md, 6px);
    background: var(--wb-panel-2);
}
.peacock-workbench .wb-kwe-empty-msg { font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.peacock-workbench .wb-kwe-empty-msg b { color: var(--wb-fg); }
.peacock-workbench .wb-kwe-empty-hint { max-width: 460px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.6; }
.peacock-workbench .wb-kwe-empty-hint b { color: var(--wb-fg); font-weight: 600; }
.peacock-workbench .wb-kwe-card { padding: 10px 12px; border-bottom: 1px dashed var(--wb-border); }
.peacock-workbench .wb-kwe-cardrow { display: flex; align-items: flex-end; position: relative; padding-left: 18px; gap: 2px; }
.peacock-workbench .wb-kwe-cardno { position: absolute; left: 0; bottom: 7px; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted); }
.peacock-workbench .wb-kwe-cell { flex: 1 1 0; min-width: 0; padding-right: 10px; }
.peacock-workbench .wb-kwe-cell-wide { flex: 6 1 0; }
.peacock-workbench .wb-kwe-labrow {
    display: flex; align-items: center; gap: 4px; margin-bottom: 4px; min-width: 0;
}
/** Added by shashank2104 on 07/24/2026 at 03:54 PM - R2026-58 - PrePost/PRIMER emphasis:
 *  variable LABEL is the primary cue (blue / accent, bold, larger), VALUE sits under it in a
 *  clear mono box. Labels were 10.5px and easy to miss next to dense card rows. **/
.peacock-workbench .wb-kwe-lab {
    display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .02em;
    color: var(--wb-accent); cursor: help;
    text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.peacock-workbench .wb-kwe-lab.is-cond { color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-lab.is-generic { color: var(--wb-fg-muted); font-weight: 600; }
/* R2026-53 — the link marker now NAVIGATES to the referenced card, so it reads as a button. */
.peacock-workbench .wb-kwe-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border: 1px solid var(--wb-border); background: var(--wb-panel-2);
    border-radius: var(--wb-radius-sm, 3px); color: var(--wb-fg-muted); font-size: calc(9px * var(--wb-font-scale, 1)); line-height: 1;
    cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.peacock-workbench .wb-kwe-link:hover {
    color: var(--wb-accent-fg); background: var(--wb-accent); border-color: var(--wb-accent);
}
.peacock-workbench .wb-kwe-input {
    width: 100%; border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm); padding: 5px 8px; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
    line-height: 1.35;
}
.peacock-workbench .wb-kwe-input:focus {
    outline: 0; border-color: var(--wb-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent) 22%, transparent);
}
/** Added by shashank2104 on 07/24/2026 at 03:54 PM - R2026-58 - staged (typing, not Accept'd)
 *  vs dirty (accepted, differs from as-read). Amber matches the card-list dirty dot so the form,
 *  list and tree all speak the same "edited" language. Validation colours still win when present. **/
.peacock-workbench .wb-kwe-input.is-staged,
.peacock-workbench .wb-kwe-input.is-dirty {
    border-color: var(--wb-warn, #b7791f);
    background: color-mix(in srgb, var(--wb-warn, #b7791f) 12%, var(--wb-panel));
}
.peacock-workbench .wb-kwe-input.is-staged:focus,
.peacock-workbench .wb-kwe-input.is-dirty:focus {
    border-color: var(--wb-warn, #b7791f);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-warn, #b7791f) 28%, transparent);
}
.peacock-workbench .wb-kwe-lab.is-staged,
.peacock-workbench .wb-kwe-lab.is-dirty {
    color: var(--wb-warn, #b7791f);
}
.peacock-workbench .wb-kwe-kind-dirty {
    display: none; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: var(--wb-warn, #b7791f);
}
.peacock-workbench .wb-kwe-kind.is-dirty .wb-kwe-kind-dirty,
.peacock-workbench .wb-kwe-group.is-dirty .wb-kwe-kind-dirty { display: inline-block; }
.peacock-workbench .wb-kwe-search { font-family: inherit; }
.peacock-workbench .wb-kwe-rawhead {
    padding: 6px 10px 0; font-size: calc(10px * var(--wb-font-scale, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-raw {
    margin: 4px 10px 10px; padding: 7px 9px; background: var(--wb-panel-2);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5;
    white-space: pre; overflow-x: auto; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-foot { flex: 0 0 auto; border-top: 1px solid var(--wb-border); background: var(--wb-panel-2); }
.peacock-workbench .wb-kwe-stats {
    display: flex; gap: 16px; padding: 5px 10px; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-stats b { color: var(--wb-fg); }
/* R2026-53 - "Total deleted card" only appears once something IS deleted, so it reads as a standing
   notice that the written deck will differ from the one on screen. */
.peacock-workbench .wb-kwe-stat-del { color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-stat-del b { color: var(--wb-danger, #c53030); }

/* ---- R2026-53 field validation — Oasys PRIMER's colour code ----
   RED = invalid or required (a value YOU must supply); CYAN = a referenced id that is not defined
   (a card you must go and CREATE). Two different actions, so two different colours, exactly as PRIMER
   distinguishes them. Both states are advisory: nothing is ever disabled or blocked by them. */
.peacock-workbench .wb-kwe-input.is-v-required,
.peacock-workbench .wb-kwe-input.is-v-range {
    border-color: var(--wb-danger, #c53030);
    background: color-mix(in srgb, var(--wb-danger, #c53030) 10%, var(--wb-panel));
}
.peacock-workbench .wb-kwe-input.is-v-dangling {
    border-color: var(--wb-info, #17a2b8);
    background: color-mix(in srgb, var(--wb-info, #17a2b8) 10%, var(--wb-panel));
}
.peacock-workbench .wb-kwe-input.is-v-required:focus,
.peacock-workbench .wb-kwe-input.is-v-range:focus { border-color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-input.is-v-dangling:focus { border-color: var(--wb-info, #17a2b8); }
.peacock-workbench .wb-kwe-lab.is-v-required,
.peacock-workbench .wb-kwe-lab.is-v-range { color: var(--wb-danger, #c53030); font-weight: 700; }
.peacock-workbench .wb-kwe-lab.is-v-dangling { color: var(--wb-info, #17a2b8); font-weight: 700; }

/* Per-card explanation, under the card it belongs to. */
.peacock-workbench .wb-kwe-cardwarn {
    display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0 16px; padding: 5px 8px;
    border-left: 2px solid var(--wb-danger, #c53030); border-radius: var(--wb-radius-sm);
    background: color-mix(in srgb, var(--wb-danger, #c53030) 8%, transparent);
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.55; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-cardwarn i { margin-top: 2px; color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-vchip {
    display: inline-block; padding: 0 4px; border-radius: var(--wb-radius-sm);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700;
}
.peacock-workbench .wb-kwe-vchip.is-v-required,
.peacock-workbench .wb-kwe-vchip.is-v-range {
    color: var(--wb-danger, #c53030); background: color-mix(in srgb, var(--wb-danger, #c53030) 14%, transparent);
}
.peacock-workbench .wb-kwe-vchip.is-v-dangling {
    color: var(--wb-info, #17a2b8); background: color-mix(in srgb, var(--wb-info, #17a2b8) 14%, transparent);
}

/* The card roll-up, under the last card. */
.peacock-workbench .wb-kwe-cardsum {
    margin: 8px 10px 12px; padding: 6px 9px; border-radius: var(--wb-radius-sm);
    border: 1px solid color-mix(in srgb, var(--wb-danger, #c53030) 35%, transparent);
    background: color-mix(in srgb, var(--wb-danger, #c53030) 7%, transparent);
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.55; color: var(--wb-fg);
}
.peacock-workbench .wb-kwe-cardsum b { color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-cardsum-note { color: var(--wb-fg-muted); }
.peacock-workbench .wb-kwe-cardsum-note b { color: var(--wb-fg); }
.peacock-workbench .wb-kwe-cardsum.is-ok {
    border-color: color-mix(in srgb, var(--wb-success, #2f855a) 30%, transparent);
    background: color-mix(in srgb, var(--wb-success, #2f855a) 6%, transparent);
    color: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-cardsum.is-ok i { color: var(--wb-success, #2f855a); margin-right: 4px; }
.peacock-workbench .wb-kwe-stat-invalid { color: var(--wb-danger, #c53030); cursor: help; }
.peacock-workbench .wb-kwe-stat-invalid b { color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-desc {
    padding: 7px 10px; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5; min-height: 42px;
    background: var(--wb-panel); border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-desc b { color: var(--wb-accent); }

/* --- right: existing cards --- */
.peacock-workbench .wb-kwe-list {
    flex: 0 0 244px; width: 244px; min-height: 0; display: flex; flex-direction: column;
    border-left: 1px solid var(--wb-border); background: var(--wb-panel-2);
}
.peacock-workbench .wb-kwe-list-head {
    flex: 0 0 auto; padding: 6px 10px; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--wb-fg-muted);
    border-bottom: 1px solid var(--wb-border);
}
/* Added by shashank2104 on 07/23/2026 - R2026-53 - jump-to-ID + pager above the card list. */
.peacock-workbench .wb-kwe-list-bar:not(:empty) {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px;
    border-bottom: 1px solid var(--wb-border); background: var(--wb-panel);
}
.peacock-workbench .wb-kwe-jump { display: flex; align-items: center; gap: 5px; }
.peacock-workbench .wb-kwe-jumpid { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-kwe-pager { display: flex; align-items: center; gap: 3px; }
.peacock-workbench .wb-kwe-pg { flex: 0 0 auto; padding: 2px 6px; line-height: 1.2; }
.peacock-workbench .wb-kwe-pgnum {
    flex: 1 1 auto; min-width: 0; text-align: center; font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-kwe-pgnum b { color: var(--wb-fg); }
.peacock-workbench .wb-kwe-pgpos {
    flex: 1 1 auto; min-width: 0; text-align: center; font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-kwe-list-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.peacock-workbench .wb-kwe-ent {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px;
    border-bottom: 1px solid var(--wb-border); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-kwe-ent:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-kwe-ent.is-sel { background: var(--wb-row-hover); font-weight: 600; }
.peacock-workbench .wb-kwe-ent-id {
    flex: 0 0 62px; width: 62px; color: var(--wb-fg-muted);
    font-family: ui-monospace, Menlo, Consolas, monospace; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-kwe-ent-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-kwe-ent-dirty {
    flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--wb-warn, #b7791f);
}

/* --- right pane, RefBy mode (R2026-53) --- */
.peacock-workbench .wb-kwe-list.is-refby { flex: 0 0 330px; width: 330px; }
.peacock-workbench .wb-kwe-refhead {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid var(--wb-border); background: var(--wb-panel);
}
.peacock-workbench .wb-kwe-refsum { flex: 1 1 auto; min-width: 0; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted); }
.peacock-workbench .wb-kwe-refsum b { color: var(--wb-fg); }
.peacock-workbench .wb-kwe-refid {
    display: block; color: var(--wb-accent); font-weight: 600;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-kwe-reftitle { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-kwe-refback { flex: 0 0 auto; }
.peacock-workbench .wb-kwe-refwarn {
    padding: 7px 10px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.5;
    color: var(--wb-fg); background: color-mix(in srgb, var(--wb-warn, #b7791f) 14%, transparent);
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-refgroup {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--wb-fg-muted); background: var(--wb-panel);
    border-bottom: 1px solid var(--wb-border); position: sticky; top: 0; z-index: 1;
}
.peacock-workbench .wb-kwe-refgroup span { margin-left: auto; font-variant-numeric: tabular-nums; }
.peacock-workbench .wb-kwe-ref {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px;
    border-bottom: 1px solid var(--wb-border); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background .12s ease;
}
.peacock-workbench .wb-kwe-ref:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-kwe-reffield {
    flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm, 3px); font-size: calc(9.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel);
}
.peacock-workbench .wb-kwe-refmore { padding: 5px 10px; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* ---------------------------------------------------------------------
 * Added by shashank2104 on 07/23/2026 - R2026-52 - REFERENCE THUMBNAILS.
 * A RefBy row previews the card that makes the reference: its key field
 * values under the id/title line, so a reference is recognisable without
 * opening it. Gated on `.has-prev` so the Model Check rows, which share
 * `.wb-kwe-ref`, keep the original single-line flex layout.
 * --------------------------------------------------------------------- */
.peacock-workbench .wb-kwe-ref.has-prev { flex-direction: column; align-items: stretch; gap: 2px; padding: 5px 10px; }
.peacock-workbench .wb-kwe-refmain { display: flex; align-items: center; gap: 8px; min-width: 0; }
.peacock-workbench .wb-kwe-refprev {
    display: flex; align-items: baseline; flex-wrap: nowrap; gap: 10px;
    min-width: 0; overflow: hidden; padding-left: 1px;
}
.peacock-workbench .wb-kwe-refpv {
    flex: 0 1 auto; display: inline-flex; align-items: baseline; gap: 4px;
    min-width: 0; white-space: nowrap; overflow: hidden;
}
.peacock-workbench .wb-kwe-refpv-k {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); letter-spacing: .02em; text-transform: uppercase;
    color: var(--wb-fg-muted); opacity: .9;
}
/* a generic F1…Fn preview is honest about being unnamed columns, not real acronyms */
.peacock-workbench .wb-kwe-refprev.is-generic .wb-kwe-refpv-k { font-style: italic; }
.peacock-workbench .wb-kwe-refpv-v {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--wb-fg);
}
/* the field the reference came THROUGH — ties the "via" chip to the value it produced */
.peacock-workbench .wb-kwe-refpv.is-via .wb-kwe-refpv-k,
.peacock-workbench .wb-kwe-refpv.is-via .wb-kwe-refpv-v { color: var(--wb-accent); opacity: 1; }

/* ---------------------------------------------------------------------
 * Added by shashank2104 on 07/23/2026 - R2026-52 - Model Check. A
 * whole-deck advisory pass (dangling refs / duplicate IDs / field
 * problems) rendered in the right pane like RefBy, plus a footer chip.
 * Reuses the shared .wb-kwe-refhead / .wb-kwe-ref / .wb-kwe-refgroup
 * frame so it reads as the same surface family. Colour by severity:
 * dangling = info/cyan (an id to create), duplicate/field = danger/red.
 * --------------------------------------------------------------------- */
.peacock-workbench .wb-kwe-checkchips { display: block; margin: 3px 0 1px; }
.peacock-workbench .wb-kwe-cchip {
    display: inline-block; margin-right: 5px; padding: 1px 6px;
    border-radius: var(--wb-radius-sm, 3px); font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700;
    border: 1px solid var(--wb-border); color: var(--wb-fg);
}
.peacock-workbench .wb-kwe-cchip.is-dangling {
    color: var(--wb-info, #17a2b8);
    border-color: color-mix(in srgb, var(--wb-info, #17a2b8) 55%, transparent);
    background: color-mix(in srgb, var(--wb-info, #17a2b8) 12%, transparent);
}
.peacock-workbench .wb-kwe-cchip.is-duplicate,
.peacock-workbench .wb-kwe-cchip.is-field {
    color: var(--wb-danger, #c53030);
    border-color: color-mix(in srgb, var(--wb-danger, #c53030) 55%, transparent);
    background: color-mix(in srgb, var(--wb-danger, #c53030) 12%, transparent);
}
.peacock-workbench .wb-kwe-checknote { display: block; margin-top: 3px; color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 1.5; }
.peacock-workbench .wb-kwe-checkclean {
    display: flex; align-items: center; gap: 6px; padding: 12px 10px;
    color: var(--wb-success, #2f855a); font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-kwe-checkclean i { color: var(--wb-success, #2f855a); }
/* Group headers inherit .wb-kwe-refgroup; the left rule tints them by severity. */
.peacock-workbench .wb-kwe-checkgroup.is-dangling { box-shadow: inset 2px 0 0 var(--wb-info, #17a2b8); }
.peacock-workbench .wb-kwe-checkgroup.is-duplicate,
.peacock-workbench .wb-kwe-checkgroup.is-field { box-shadow: inset 2px 0 0 var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-checkrow { align-items: flex-start; }
.peacock-workbench .wb-kwe-checkdot {
    flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%;
    background: var(--wb-fg-muted);
}
.peacock-workbench .wb-kwe-checkdot.is-dangling { background: var(--wb-info, #17a2b8); }
.peacock-workbench .wb-kwe-checkdot.is-duplicate,
.peacock-workbench .wb-kwe-checkdot.is-field { background: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-checkbody { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-kwe-checkcard {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-kwe-checkcard b { color: var(--wb-accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.peacock-workbench .wb-kwe-checkmsg { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.5; }
/* Footer chip — advisory, so it stays quiet until Model Check has actually run. */
.peacock-workbench .wb-kwe-stat-check { color: var(--wb-danger, #c53030); cursor: help; }
.peacock-workbench .wb-kwe-stat-check b { color: var(--wb-danger, #c53030); }
.peacock-workbench .wb-kwe-stat-check.is-ok { color: var(--wb-success, #2f855a); }
.peacock-workbench .wb-kwe-stat-check.is-ok b { color: var(--wb-success, #2f855a); }

/* ---------------------------------------------------------------------
 * Added by shashank2104 on 07/23/2026 - R2026-53 - edit history (undo /
 * redo / restore) + the edit log. The history row is a quieter second
 * band under the main action row: taking an edit back should read as a
 * safety net, not compete with Accept for attention.
 * --------------------------------------------------------------------- */
.peacock-workbench .wb-kwe-histrow {
    border-top: 0; padding-top: 0; background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-histrow .wb-kwe-btn { font-size: calc(10.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-kwe-histrow .wb-kwe-btn i { margin-right: 3px; opacity: .8; }
.peacock-workbench .wb-kwe-btn.is-armed {
    border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-row-hover);
}
.peacock-workbench .wb-kwe-btn-danger:hover:not(:disabled) {
    border-color: var(--wb-danger, #c53030); color: var(--wb-danger, #c53030);
}
.peacock-workbench .wb-kwe-histpos {
    flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums; margin-left: 2px;
}

/* ---- the log rows ---- */
.peacock-workbench .wb-kwe-logrow {
    display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; cursor: pointer;
    border-bottom: 1px solid var(--wb-border); transition: background var(--wb-t, .12s) ease;
}
.peacock-workbench .wb-kwe-logrow:hover { background: var(--wb-row-hover); }
/* The next redo — the one Ctrl+Shift+Z would re-apply. */
.peacock-workbench .wb-kwe-logrow.is-next { box-shadow: inset 2px 0 0 var(--wb-accent); }
.peacock-workbench .wb-kwe-logrow.is-undone { opacity: .5; }
.peacock-workbench .wb-kwe-logrow.is-undone .wb-kwe-logval { text-decoration: line-through; }
.peacock-workbench .wb-kwe-logseq {
    flex: 0 0 auto; min-width: 18px; text-align: right; font-size: calc(9.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.peacock-workbench .wb-kwe-logmain { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-kwe-logcard {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-kwe-logval {
    display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-top: 2px;
}
.peacock-workbench .wb-kwe-logfield {
    flex: 0 0 auto; padding: 1px 5px; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm, 3px); font-size: calc(9.5px * var(--wb-font-scale, 1)); background: var(--wb-panel);
}
.peacock-workbench .wb-kwe-logfrom { font-family: var(--wb-mono, monospace); }
.peacock-workbench .wb-kwe-logto { font-family: var(--wb-mono, monospace); color: var(--wb-accent); }
.peacock-workbench .wb-kwe-logarrow { color: var(--wb-fg-muted); }

/* ---------------------------------------------------------------------
 * Added by shashank2104 on 07/23/2026 - R2026-52 - the reference
 * NAVIGATION TRAIL. A horizontal breadcrumb of the cards followed
 * through references (RefBy rows / field link markers), so tracing a
 * reference is reversible. Sits above the form; hidden (region empty)
 * until there is more than one hop.
 *
 * Each hop is a MINI CARD TILE — a thumbnail of the real card (header
 * + title + card 1's first fields as name=value), so the path can be
 * read at a glance. Tiles are FIXED width and the strip scrolls
 * horizontally, so a long path never eats the form's vertical space.
 * --------------------------------------------------------------------- */
.peacock-workbench .wb-kwe-trail {
    flex: 0 0 auto; display: flex; align-items: stretch; gap: 8px;
    padding: 6px 10px; background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-trail:empty { display: none; }
/* R2026-308 - the return strip above the form: one button back to the tool that opened the card (Back to BOM) */
.peacock-workbench .wb-kwe-return {
    flex: 0 0 auto; display: flex; align-items: center; padding: 6px 9px;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-kwe-return:empty { display: none; }
.peacock-workbench .wb-kwe-return-btn { font-weight: 600; color: var(--wb-accent); border-color: color-mix(in srgb, var(--wb-accent) 45%, transparent); }
.peacock-workbench .wb-kwe-return-btn i { margin-right: 4px; }
.peacock-workbench .wb-kwe-return-btn:hover { background: color-mix(in srgb, var(--wb-accent) 10%, var(--wb-panel)); border-color: var(--wb-accent); }
.peacock-workbench .wb-kwe-trail-back { flex: 0 0 auto; align-self: center; }
.peacock-workbench .wb-kwe-trail-back i { margin-right: 3px; opacity: .8; }
.peacock-workbench .wb-kwe-trail-tiles {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch;
    gap: 4px; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
}
.peacock-workbench .wb-kwe-trail-sep {
    flex: 0 0 auto; align-self: center; color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1));
}
/* A <button> is an unreliable flex CONTAINER (its children do not take the cross-axis stretch), so a
   long keyword name spilled straight out of the tile. Every row is given an explicit width:100% —
   which resolves against the fixed tile — and the tile clips, so the ellipsis is guaranteed. */
.peacock-workbench .wb-kwe-trail-tile {
    flex: 0 0 auto; width: 168px; overflow: hidden;
    display: flex; flex-direction: column; gap: 2px;
    padding: 5px 8px 6px; text-align: left; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm, 4px); background: var(--wb-panel);
    color: var(--wb-fg-muted); cursor: pointer; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.35;
    transition: border-color var(--wb-t, .12s) ease, background var(--wb-t, .12s) ease,
                box-shadow var(--wb-t, .12s) ease;
}
.peacock-workbench .wb-kwe-trail-tile:hover {
    border-color: var(--wb-accent); background: var(--wb-row-hover);
}
/* the card on screen — accented edge + a left rule, so "where you are" reads without a legend */
.peacock-workbench .wb-kwe-trail-tile.is-current {
    border-color: var(--wb-accent); background: var(--wb-row-hover); color: var(--wb-fg);
    box-shadow: inset 3px 0 0 var(--wb-accent); cursor: default;
}
.peacock-workbench .wb-kwe-trail-head {
    width: 100%; display: flex; align-items: baseline; gap: 5px; min-width: 0;
}
.peacock-workbench .wb-kwe-trail-kw {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-weight: 600; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-accent);
}
.peacock-workbench .wb-kwe-trail-id {
    flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wb-fg);
}
.peacock-workbench .wb-kwe-trail-sub {
    width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(9.5px * var(--wb-font-scale, 1)); opacity: .85;
}
.peacock-workbench .wb-kwe-trail-fields {
    width: 100%; display: flex; flex-direction: column; gap: 1px; margin-top: 2px;
    padding-top: 3px; border-top: 1px dashed var(--wb-border);
}
.peacock-workbench .wb-kwe-trail-fld {
    width: 100%; display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.peacock-workbench .wb-kwe-trail-fk {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); letter-spacing: .02em; text-transform: uppercase;
    color: var(--wb-fg-muted); opacity: .9;
}
/* a generic F1…Fn tile is honest about being unnamed columns, not real acronyms */
.peacock-workbench .wb-kwe-trail-fields.is-generic .wb-kwe-trail-fk { font-style: italic; }
.peacock-workbench .wb-kwe-trail-fv {
    flex: 1 1 auto; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--wb-fg);
}

/* =====================================================================
 * Added by shashank2104 on 07/23/2026 - R0-3955 - Submit to Cluster.
 *
 * The `submit` mode body (File > Submit to Cluster...). Chrome only — the
 * two FormBuilder instances inside .wb-sc-fb bring their own modern skin,
 * so nothing here reaches into the builder. All colours come from the
 * --wb-* tokens so the view follows the workbench light/dark theme.
 * ===================================================================== */
.peacock-workbench .wb-submit-host { display: flex; flex-direction: column; min-height: 0; }
.peacock-workbench .wb-submit-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* ---- LIGHT surface, deliberately ----------------------------------
 * The form region is rendered by FormBuilder, whose modern skin is light-only
 * (--fbm-* aliases --d3v-*, white controls). Painting the chrome around it in the
 * dark workbench tokens put a white form in a black frame and read as a bug. So
 * this mode body commits to ONE light document surface and re-points the --wb-*
 * tokens locally, which means every rule below still reads as the workbench
 * palette and nothing needs a second set of selectors. Precedent: the ML model
 * viewer (ml-model.js -> d3viewdashboard) is light inside this same shell.
 * ------------------------------------------------------------------ */
.peacock-workbench .wb-sc {
    /* Tinted, not stark white — the page sits a step darker than the cards and the cards
       themselves are very slightly off-white, so the surfaces read as a designed hierarchy
       rather than a blank sheet. */
    --wb-bg:        #e9edf3;
    --wb-panel:     #fbfcfe;
    --wb-panel-2:   #f1f4f9;
    --wb-fg:        #253044;
    --wb-fg-muted:  #67748a;
    --wb-border:    #dbe1ea;
    --wb-row-hover: #eef2f8;
    --wb-accent:    #3b6fd4;
    --wb-accent-fg: #ffffff;

    flex: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--wb-bg); color: var(--wb-fg);
}
.peacock-workbench .wb-sc-accent { color: var(--wb-accent); }
.peacock-workbench .wb-sc-muted  { color: var(--wb-fg-muted); }

/* ---- the ONE compact strip: steps + source deck ---- */
.peacock-workbench .wb-sc-strip {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
    padding: 8px 16px; background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.peacock-workbench .wb-sc-steps { display: flex; flex: 0 0 auto; }
.peacock-workbench .wb-sc-ms {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.peacock-workbench .wb-sc-ms:first-child { border-radius: var(--wb-radius-sm) 0 0 var(--wb-radius-sm); }
.peacock-workbench .wb-sc-ms:last-child  { border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0; }
.peacock-workbench .wb-sc-ms + .wb-sc-ms { border-left: none; }
.peacock-workbench .wb-sc-ms:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-sc-ms .n {
    width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; display: grid; place-items: center;
    background: var(--wb-panel-2); color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700;
}
.peacock-workbench .wb-sc-ms.is-done { color: var(--d3v-status-success, #16a34a); }
.peacock-workbench .wb-sc-ms.is-done .n {
    background: var(--d3v-status-success-soft, #f0fdf4); color: var(--d3v-status-success, #16a34a);
}
.peacock-workbench .wb-sc-ms.is-active {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-sc-ms.is-active .n { background: rgba(255, 255, 255, .25); color: var(--wb-accent-fg); }

.peacock-workbench .wb-sc-srcwrap { display: flex; align-items: center; gap: 9px; margin-left: auto; min-width: 0; }
.peacock-workbench .wb-sc-srclab {
    flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-sc-segs { display: flex; flex: 0 0 auto; }
.peacock-workbench .wb-sc-seg {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg);
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.peacock-workbench .wb-sc-seg:first-child { border-radius: var(--wb-radius-sm) 0 0 var(--wb-radius-sm); }
.peacock-workbench .wb-sc-seg:last-child  { border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0; }
.peacock-workbench .wb-sc-seg:only-child  { border-radius: var(--wb-radius-sm); }
.peacock-workbench .wb-sc-seg + .wb-sc-seg { border-left: none; }
.peacock-workbench .wb-sc-seg:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-sc-seg > i { font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-sc-seg.is-on {
    background: var(--wb-row-hover); border-color: var(--wb-accent); color: var(--wb-accent);
    box-shadow: inset 0 0 0 1px var(--wb-accent);
}
.peacock-workbench .wb-sc-seg.is-on > i { color: var(--wb-accent); }
.peacock-workbench .wb-sc-deckmeta {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; border-left: 1px solid var(--wb-border); margin-left: 2px; padding-left: 11px;
}

/* ---- scroll body ---- */
.peacock-workbench .wb-sc-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 15px 16px 10px; }

/* ---- FormBuilder region ---- */
.peacock-workbench .wb-sc-fbreg {
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius); margin-bottom: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}
.peacock-workbench .wb-sc-fbreg-h {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-sc-fbreg-h > i { color: var(--wb-accent); font-size: calc(13px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sc-fbreg-h > b { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600; }
.peacock-workbench .wb-sc-fbtag {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted); background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: 20px; padding: 2px 9px;
}
.peacock-workbench .wb-sc-fbreg-b { padding: 14px; }
.peacock-workbench .wb-sc-loading,
.peacock-workbench .wb-sc-loaderr {
    display: flex; align-items: center; gap: 9px; padding: 18px 4px;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-sc-loaderr { color: var(--d3v-status-danger, #dc2626); }

/* ---- the locked, deck-derived rows (main file / chained simulation) ---- */
.peacock-workbench .wb-sc-locked { margin-top: 14px; }
.peacock-workbench .wb-sc-locked > label {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
}
.peacock-workbench .wb-sc-locked .rq { color: var(--d3v-status-danger, #dc2626); }
.peacock-workbench .wb-sc-locked .tag {
    margin-left: auto; font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: .04em; border-radius: 20px;
    padding: 1px 8px; color: var(--d3v-status-success, #16a34a);
    background: var(--d3v-status-success-soft, #f0fdf4);
}
.peacock-workbench .wb-sc-locked-val {
    display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    background: var(--wb-panel-2); color: var(--wb-fg-muted); font-size: calc(12.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-sc-help { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-top: 5px; line-height: 1.4; }

/* ---- Advanced disclosure (holds the 2nd FormBuilder instance) ---- */
.peacock-workbench .wb-sc-adv {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    background: var(--wb-panel); margin-bottom: 12px; overflow: hidden;
}
.peacock-workbench .wb-sc-adv-h {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg); user-select: none;
    transition: background .16s ease, color .16s ease;
}
.peacock-workbench .wb-sc-adv-h:hover { background: var(--wb-row-hover); color: var(--wb-accent); }
.peacock-workbench .wb-sc-adv-h .chev { width: 9px; color: var(--wb-fg-muted); transition: transform .16s ease; }
.peacock-workbench .wb-sc-adv.is-open .wb-sc-adv-h .chev { transform: rotate(90deg); }
.peacock-workbench .wb-sc-adv-h .cnt {
    margin-left: auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: 20px; padding: 2px 9px;
}
.peacock-workbench .wb-sc-adv-b { display: none; padding: 14px; border-top: 1px solid var(--wb-border); }
.peacock-workbench .wb-sc-adv.is-open .wb-sc-adv-b { display: block; }

/* ---- validation banner + info note ---- */
.peacock-workbench .wb-sc-vbanner,
.peacock-workbench .wb-sc-info {
    display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px;
    border-radius: var(--wb-radius); margin-bottom: 12px; font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-sc-vbanner {
    background: var(--d3v-status-danger-soft, #fef2f2);
    border: 1px solid var(--d3v-status-danger-border, #fecaca); color: #991b1b;
}
.peacock-workbench .wb-sc-vbanner > i { color: var(--d3v-status-danger, #dc2626); font-size: calc(14px * var(--wb-font-scale, 1)); margin-top: 1px; }
.peacock-workbench .wb-sc-vbanner b { display: block; margin-bottom: 3px; font-size: calc(12.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sc-vbanner ul { margin: 0; padding-left: 17px; font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sc-vbanner li { margin: 2px 0; }
.peacock-workbench .wb-sc-info {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg);
}
.peacock-workbench .wb-sc-info > i { color: var(--wb-accent); margin-top: 1px; }

/* ---- run / response log ---- */
.peacock-workbench .wb-sc-runcard {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    background: var(--wb-panel); overflow: hidden; margin-bottom: 12px;
}
.peacock-workbench .wb-sc-runcard-h {
    display: flex; align-items: center; gap: 9px; padding: 11px 14px;
    border-bottom: 1px solid var(--wb-border); font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600;
}
.peacock-workbench .wb-sc-runcard-h .sp {
    margin-left: auto; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 400; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-sc-li {
    display: flex; gap: 11px; align-items: flex-start; padding: 9px 14px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-sc-li:last-child { border-bottom: none; }
.peacock-workbench .wb-sc-li > i { flex: 0 0 13px; margin-top: 2px; text-align: center; }
.peacock-workbench .wb-sc-li.is-ok   > i { color: var(--d3v-status-success, #16a34a); }
.peacock-workbench .wb-sc-li.is-wait > i { color: var(--d3v-status-warning, #d97706); }
.peacock-workbench .wb-sc-li.is-info > i { color: var(--wb-accent); }
.peacock-workbench .wb-sc-li.is-err  > i { color: var(--d3v-status-danger, #dc2626); }
.peacock-workbench .wb-sc-li.is-err { background: var(--d3v-status-danger-soft, #fef2f2); }
.peacock-workbench .wb-sc-li .t {
    margin-left: auto; flex: 0 0 auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); white-space: nowrap;
}
.peacock-workbench .wb-sc-raw {
    margin-top: 6px; padding: 8px 10px; background: #0f172a; color: #cbd5e1;
    border-radius: var(--wb-radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
    max-height: 160px; overflow: auto;
}

/* ---- result hero + cards ---- */
.peacock-workbench .wb-sc-hero {
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    border-radius: var(--wb-radius); border: 1px solid; margin-bottom: 12px;
}
.peacock-workbench .wb-sc-hero.is-ok {
    background: var(--d3v-status-success-soft, #f0fdf4); border-color: #bbf7d0;
}
.peacock-workbench .wb-sc-hero.is-bad {
    background: var(--d3v-status-danger-soft, #fef2f2); border-color: var(--d3v-status-danger-border, #fecaca);
}
.peacock-workbench .wb-sc-hero .ic {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; color: #fff;
    display: grid; place-items: center; font-size: calc(19px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-sc-hero.is-ok  .ic { background: var(--d3v-status-success, #16a34a); }
.peacock-workbench .wb-sc-hero.is-bad .ic { background: var(--d3v-status-danger, #dc2626); }
.peacock-workbench .wb-sc-hero h3 { margin: 0 0 3px; font-size: calc(15px * var(--wb-font-scale, 1)); color: #1e293b; }
.peacock-workbench .wb-sc-hero p  { margin: 0; font-size: calc(12px * var(--wb-font-scale, 1)); color: #475569; }
.peacock-workbench .wb-sc-sgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.peacock-workbench .wb-sc-scard {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    background: var(--wb-panel); padding: 13px 14px; transition: border-color .16s ease;
}
.peacock-workbench .wb-sc-scard:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-sc-scard .lab {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--wb-fg-muted); margin-bottom: 6px;
}
.peacock-workbench .wb-sc-scard .val { font-size: calc(19px * var(--wb-font-scale, 1)); font-weight: 700; margin-bottom: 8px; }
.peacock-workbench .wb-sc-scard a,
.peacock-workbench .wb-sc-link {
    display: inline-flex; align-items: center; gap: 5px; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-accent); text-decoration: none; border: none; background: none; padding: 0;
    font-family: inherit; cursor: pointer; border-bottom: 1px solid transparent;
    transition: border-color .16s ease;
}
.peacock-workbench .wb-sc-scard a:hover,
.peacock-workbench .wb-sc-link:hover { border-bottom-color: var(--wb-accent); }
.peacock-workbench .wb-sc-badge {
    display: inline-flex; align-items: center; gap: 5px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700;
    border-radius: 20px; padding: 3px 10px; vertical-align: 4px;
}
.peacock-workbench .wb-sc-badge.is-n { background: var(--wb-panel-2); color: var(--wb-fg-muted); }

/* ---- empty state ---- */
.peacock-workbench .wb-sc-empty {
    flex: 1; min-height: 0; display: grid; place-items: center; text-align: center; padding: 30px;
}
.peacock-workbench .wb-sc-empty-ic { font-size: calc(40px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); opacity: .5; margin-bottom: 13px; }
.peacock-workbench .wb-sc-empty h3 { margin: 0 0 6px; font-size: calc(15px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.peacock-workbench .wb-sc-empty p {
    margin: 0 auto 15px; max-width: 470px; font-size: calc(12.5px * var(--wb-font-scale, 1)); line-height: 1.55; color: var(--wb-fg-muted);
}

/* ---- footer ---- */
.peacock-workbench .wb-sc-foot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 16px;
    background: var(--wb-panel); border-top: 1px solid var(--wb-border);
    box-shadow: 0 -1px 2px rgba(16, 24, 40, .04);
}
.peacock-workbench .wb-sc-hint {
    margin-right: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-sc-hint.is-bad  { color: var(--d3v-status-danger, #dc2626); }
.peacock-workbench .wb-sc-hint.is-good { color: var(--d3v-status-success, #16a34a); }
.peacock-workbench .wb-sc-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); font: inherit; font-size: calc(12.5px * var(--wb-font-scale, 1));
    font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.peacock-workbench .wb-sc-btn:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-sc-btn.is-pri {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-sc-btn.is-ok {
    background: var(--d3v-status-success, #16a34a); border-color: var(--d3v-status-success, #16a34a); color: #fff;
}
.peacock-workbench .wb-sc-btn.is-dgr {
    background: var(--d3v-status-danger, #dc2626); border-color: var(--d3v-status-danger, #dc2626); color: #fff;
}
.peacock-workbench .wb-sc-btn.is-pri:hover,
.peacock-workbench .wb-sc-btn.is-ok:hover,
.peacock-workbench .wb-sc-btn.is-dgr:hover { filter: brightness(.93); }
.peacock-workbench .wb-sc-btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

/* R0-4177 (09/15/2026): the .wb-sc-fb FormBuilder overrides that used to sit here were removed - the
   checklist forms render the builder as-is. */
.peacock-workbench .wb-sc-scard-sub {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin: -4px 0 8px;
}

/* Worker names appear as <code> in the response log. Bootstrap's default is loud red on pink;
   tone it to the local palette so the log reads as data, not as a page full of errors. */
.peacock-workbench .wb-sc-li code,
.peacock-workbench .wb-sc-hint code {
    background: var(--wb-panel-2); color: var(--wb-fg-muted);
    border: 1px solid var(--wb-border); border-radius: 4px;
    padding: 1px 5px; font-size: calc(11px * var(--wb-font-scale, 1));
}

/* R0-3955 — the rail is hidden while the submit flow owns the main container (see
   SubmitCluster._bindRailGate). Its buttons would otherwise switch back to 3D and abandon a
   half-filled form or an in-flight submission. */
.peacock-workbench .wb-rail.is-hidden-by-submit { display: none; }

/* The stepper (GenericInputTemplateViews) fills the mode body below the source strip and owns its
   own pager, so it needs to flex-fill and scroll internally rather than growing the page. */
.peacock-workbench .wb-sc-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.peacock-workbench .wb-sc-flow > * { min-height: 0; }
.peacock-workbench .wb-sc-step { padding: 15px 16px 10px; }
.peacock-workbench .wb-sc-simchip {
    display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-accent); background: var(--wb-row-hover);
    border: 1px solid var(--wb-border); border-radius: 20px; padding: 3px 10px;
}


/* ---- R0-3955 — LS-PrePost Section Plane (Tools → Cut + Create Sub-Model) ----
   Updated by shashank2104 on 07/23/2026 at 04:28 PM - R0-3955 - restyled to match Create
   Sub-Model (.csm-seg / field rows / --wb-* tokens) + Clip / Clr / Model / live counts. */
.peacock-workbench .wb-sp {
    font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg, #2c3e50); display: flex; flex-direction: column; gap: 0;
    padding: 0 0 8px;
}
.peacock-workbench .wb-sp .sp-head {
    display: flex; align-items: center; gap: 9px; padding: 12px 14px;
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-sp .sp-ic {
    width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
    background: var(--wb-accent, #2c5282); color: var(--wb-accent-fg, #fff); flex: 0 0 26px;
}
.peacock-workbench .wb-sp .sp-head-txt { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-sp .sp-title { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 700; }
.peacock-workbench .wb-sp .sp-sub {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-sp .sp-field {
    padding: 10px 14px; border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-sp .sp-flabel {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.peacock-workbench .wb-sp .sp-lab { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; }
.peacock-workbench .wb-sp .sp-lab-soft {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted, #7a8794); margin-bottom: 4px;
}
.peacock-workbench .wb-sp .sp-info {
    color: var(--wb-fg-muted, #7a8794); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: help; opacity: .75;
}
/* Segmented control — same language as .csm-seg */
.peacock-workbench .wb-sp .sp-seg {
    display: inline-flex; flex-wrap: wrap; width: 100%;
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 6px; overflow: hidden;
}
.peacock-workbench .wb-sp .sp-seg-mt { margin-top: 6px; }
.peacock-workbench .wb-sp .sp-seg-btn {
    flex: 1 1 0; border: none; background: var(--wb-panel-2, #f4f6f8); color: var(--wb-fg, #2c3e50);
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; padding: 7px 10px; cursor: pointer;
    border-right: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-sp .sp-seg-btn:last-child { border-right: none; }
.peacock-workbench .wb-sp .sp-seg-btn.is-on {
    background: var(--wb-accent, #2c5282); color: var(--wb-accent-fg, #fff);
}
.peacock-workbench .wb-sp .sp-seg-btn.is-disabled,
.peacock-workbench .wb-sp .sp-seg-btn:disabled {
    opacity: .4; cursor: not-allowed;
}
.peacock-workbench .wb-sp .sp-coords { display: flex; gap: 6px; margin-top: 8px; }
.peacock-workbench .wb-sp .sp-coord-row {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 600;
}
.peacock-workbench .wb-sp .sp-coord-row > span { flex: 0 0 12px; color: var(--wb-fg-muted, #7a8794); font-size: calc(10.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sp .sp-coord-row .sp-coord { flex: 1 1 auto; min-width: 0; text-align: center; padding: 5px 4px; }
.peacock-workbench .wb-sp .sp-node-row {
    display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 6px;
}
.peacock-workbench .wb-sp .sp-node-row > span { flex: 0 0 42px; color: var(--wb-fg-muted, #7a8794); font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sp .sp-node-row .sp-node { flex: 1 1 auto; }
.peacock-workbench .wb-sp .sp-norm-vals {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px;
}
.peacock-workbench .wb-sp .sp-norm-vals input { text-align: center; font-variant-numeric: tabular-nums; }
/* The Move-plane read-only X/Y/Z echo and its own steps row are gone (R0-3955, 07/27) — the Base
   fields above are editable and already track every move, and the steps box moved to the foot. */
.peacock-workbench .wb-sp .sp-move-slider {
    display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.peacock-workbench .wb-sp .sp-move-slider .sp-move {
    flex: 1 1 auto; margin: 0; padding: 0; border: none; background: transparent;
    accent-color: var(--wb-accent, #2c5282);
}
.peacock-workbench .wb-sp .sp-move-readout {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; margin-top: 4px;
}
.peacock-workbench .wb-sp .sp-move-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px;
}
.peacock-workbench .wb-sp .sp-move-foot .sp-steps { width: 62px; flex: 0 0 62px; }
.peacock-workbench .wb-sp .sp-kept { margin-top: 8px; }
.peacock-workbench .wb-sp .sp-kept-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.peacock-workbench .wb-sp .sp-kept-chip {
    display: inline-flex; align-items: center; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--wb-accent, #2c5282); background: var(--wb-accent-soft, #eef3fa);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 999px; padding: 3px 9px; cursor: pointer;
}
.peacock-workbench .wb-sp .sp-kept-chip:hover { background: var(--wb-row-hover, #e6eef7); }
/** Added by shashank2104 on 07/27/2026 - R0-3955 - the live keep condition under the Keep side toggle
 *  (`Front = X ≤ 2389.5` / `Rear = X ≥ 2389.5`). Deliberately quieter than .sp-live below it: this is
 *  the RULE, the counts are the RESULT, and the two must not compete. Monospace numbers so the value
 *  does not jitter as it is patched on every frame of a plane drag. */
.peacock-workbench .wb-sp .sp-keep-cond {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px;
    font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted, #7a8794);
    font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-sp .sp-keep-cond span { white-space: nowrap; }
.peacock-workbench .wb-sp .sp-live {
    display: flex; gap: 12px; margin-top: 9px; font-size: calc(10.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-sp .sp-live .k { color: var(--wb-ok, #16a34a); font-weight: 700; }
.peacock-workbench .wb-sp .sp-live .d { color: var(--wb-danger, #c0392b); font-weight: 700; }
.peacock-workbench .wb-sp .sp-live .m { color: var(--wb-fg-muted, #7a8794); }
.peacock-workbench .wb-sp .sp-chk {
    display: inline-flex; align-items: center; gap: 5px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794); cursor: pointer; margin: 0;
}
.peacock-workbench .wb-sp .sp-chk.is-on { color: var(--wb-fg, #2c3e50); }
/** Added by shashank2104 on 07/23/2026 at 04:50 PM - R0-3955 - yes/no switch matching
 *  $.fn.multiselect .ms-modern-toggle (40×22 track + knob). Scoped under .wb-sp with --wb-*. */
.peacock-workbench .wb-sp .sp-yn {
    display: inline-flex; align-items: center; gap: 9px; min-height: 28px;
    border: none; background: transparent; padding: 2px 0; margin: 0;
    cursor: pointer; user-select: none; outline: none; text-align: left;
    color: var(--wb-fg, #2c3e50); font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
}
.peacock-workbench .wb-sp .sp-yn-switch {
    position: relative; flex: 0 0 auto; width: 36px; height: 20px;
    border-radius: 999px; background: var(--wb-border, #e0e3e6);
    transition: background .15s ease;
}
.peacock-workbench .wb-sp .sp-yn-knob {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s ease;
}
.peacock-workbench .wb-sp .sp-yn.is-on .sp-yn-switch {
    background: var(--wb-ok, #16a34a);
}
.peacock-workbench .wb-sp .sp-yn.is-on .sp-yn-knob { left: 18px; }
.peacock-workbench .wb-sp .sp-yn:focus .sp-yn-switch,
.peacock-workbench .wb-sp .sp-yn:focus-visible .sp-yn-switch {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-accent, #2c5282) 28%, transparent);
}
.peacock-workbench .wb-sp .sp-yn-lab {
    font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); font-weight: 600;
}
.peacock-workbench .wb-sp .sp-yn.is-on .sp-yn-lab { color: var(--wb-fg, #2c3e50); }
.peacock-workbench .wb-sp .sp-centroid-hint {
    display: none; margin-top: 6px; padding: 6px 8px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-accent, #2c5282); background: var(--wb-accent-soft, #eef3fa);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 6px;
}
.peacock-workbench .wb-sp .sp-centroid-hint.is-on { display: block; }
.peacock-workbench .wb-sp .sp-submodel { margin-top: 0; padding: 10px 14px; }
.peacock-workbench .wb-sp .sp-submodel .btn { width: 100%; justify-content: center; }
/* Inputs — peacock tokens (never style checkboxes as full-width text fields) */
.peacock-workbench .wb-sp .sp-text,
.peacock-workbench .wb-sp input.sp-text,
.peacock-workbench .wb-sp select.sp-text,
.peacock-workbench .wb-sp input.sp-coord,
.peacock-workbench .wb-sp input.sp-node,
.peacock-workbench .wb-sp input.sp-steps,
.peacock-workbench .wb-sp input.sp-opt[type="number"],
.peacock-workbench .wb-sp select.sp-opt {
    width: 100%; height: 30px; padding: 5px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.4;
    background: var(--wb-panel-2, #f4f6f8) !important; color: var(--wb-fg, #2c3e50) !important;
    border: 1px solid var(--wb-border, #e0e3e6) !important; border-radius: 6px;
    box-shadow: none;
}
.peacock-workbench .wb-sp .sp-text:focus,
.peacock-workbench .wb-sp input.sp-opt[type="number"]:focus,
.peacock-workbench .wb-sp select.sp-opt:focus {
    border-color: var(--wb-accent, #2c5282) !important; outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent, #2c5282) 30%, transparent);
}
.peacock-workbench .wb-sp .sp-text[readonly],
.peacock-workbench .wb-sp input.sp-text[readonly] {
    color: var(--wb-fg-muted, #7a8794) !important; cursor: default;
}
.peacock-workbench .wb-sp input::placeholder { color: var(--wb-fg-muted, #7a8794) !important; opacity: 1; }
.peacock-workbench .wb-csm .csm-sp-field { padding-bottom: 12px; }
.peacock-workbench .wb-csm .csm-sp-mount { margin-top: 4px; }

/* ---- R0-3955 (07/27/2026) — simplified Section Plane panel ----
   Added by shashank2104 on 07/27/2026 - R0-3955. The panel was carrying five inline note blocks
   (step intro, drag hint, edge-on warning, pick note, keep-side note), a collapsible Options
   popover AND a five-button action row. Every explanation is an info tooltip now, the options are
   one flat list of label + control rows, and the action row is gone because the panel applies
   everything as you touch it. What is left below is the picker chip, the info icon states and the
   options rows. */
.peacock-workbench .wb-sp .sp-close {
    flex: 0 0 auto; margin-left: auto; padding: 3px 8px; line-height: 1;
}
.peacock-workbench .wb-sp .sp-info.is-warn { color: var(--wb-warning, #b26a00); }
.peacock-workbench .wb-sp .sp-pick {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; cursor: pointer;
    color: var(--wb-accent, #2c5282); background: var(--wb-accent-soft, #eef3fa);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 999px; padding: 3px 9px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.peacock-workbench .wb-sp .sp-pick:hover:not([disabled]) { background: var(--wb-row-hover, #e6eef7); }
.peacock-workbench .wb-sp .sp-pick.is-arm {
    color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282);
}
.peacock-workbench .wb-sp .sp-pick[disabled] { opacity: .45; cursor: not-allowed; }

/* The single options panel — one option per row, label left, control right. */
.peacock-workbench .wb-sp .sp-options {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px 12px; border-top: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-sp .sp-opt-head {
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--wb-fg-muted, #7a8794); margin-bottom: 6px;
}
.peacock-workbench .wb-sp .sp-opt-row {
    display: flex; align-items: center; gap: 10px; min-height: 34px;
}
.peacock-workbench .wb-sp .sp-opt-row.is-hidden { display: none; }
.peacock-workbench .wb-sp .sp-opt-lab {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794);
}
/* Auto-width so a toggle takes ~40px and only the selects/inputs claim a real column — otherwise
   every toggle row stole 134px from its label and the labels wrapped to two lines. */
.peacock-workbench .wb-sp .sp-opt-ctl { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.peacock-workbench .wb-sp .sp-opt-ctl > select,
.peacock-workbench .wb-sp .sp-opt-ctl > input { width: 130px; }
.peacock-workbench .wb-sp .sp-opt-ctl .sp-yn { width: auto; margin-left: auto; }
.peacock-workbench .wb-sp .sp-opt-ctl .sp-yn-lab { display: none; }
.peacock-workbench .wb-sp .sp-opt-ctl .btn { justify-content: center; }

.wb-sp-nodetip {
    position: fixed; z-index: 3000; pointer-events: none; display: none;
    max-width: 260px; padding: 7px 10px; border-radius: 7px;
    font-family: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5; color: #f4f6f8;
    background: rgba(24, 30, 38, .95); border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.wb-sp-nodetip b { color: #ffa726; font-weight: 700; }
.wb-sp-nodetip .sp-tip-xyz,
.wb-sp-nodetip .sp-tip-sub { display: block; font-variant-numeric: tabular-nums; }
.wb-sp-nodetip .sp-tip-sub { color: #9fb0c0; font-size: calc(10px * var(--wb-font-scale, 1)); margin-top: 2px; }
/* ============================================================================================
   Keyword relationship graph (R2026-52) — the interactive force-directed reference graph.

   Added by shashank2104 on 07/23/2026 - R2026-52.
   Reworked 07/23/2026 - R2026-52: the graph TAKES OVER THE 3D VIEWPORT (it is no longer a modal),
   so it is mounted INSIDE .peacock-workbench and is scoped under it, using the shell's own --wb-*
   tokens so it reads as part of the workbench rather than a foreign light panel. `.is-kwg-open` on
   the viewport hides the 3D canvas and its floating overlays (transport / view controls) WITHOUT
   changing any layout, so nothing has to be re-created when Back to 3D puts them back.
   The hover tooltip stays body-mounted (it must escape the viewport's overflow) and is therefore
   the one unscoped rule here — per the body-mounted sidebar/popover rule.
   ============================================================================================ */
.peacock-workbench .wb-viewport.is-kwg-open > *:not(.wb-kwg-host) { visibility: hidden; }

.peacock-workbench .wb-kwg {
    /* The bottom dock is position:absolute over the viewport column (z-index 30) and is where the
       Keyword Editor lives — so the graph stops at the dock's live height (KeywordGraphView keeps
       `bottom` in step with a ResizeObserver on the dock) and stays UNDER it in z-order. That is what
       puts the graph and the editor side by side. */
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 25;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--wb-bg, #eef1f4);
    color: var(--wb-fg, #2c3e50);
    -webkit-font-smoothing: antialiased;
}
.peacock-workbench .wb-kwg-head {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 8px 12px; background: var(--wb-panel, #fbfcfd);
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.peacock-workbench .wb-kwg-spring { flex: 1 1 auto; }
.peacock-workbench .wb-kwg-title {
    font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794); white-space: nowrap;
}
.peacock-workbench .wb-kwg-title b { color: var(--wb-fg, #2c3e50); font-weight: 700; margin-left: 4px; }

/* Segmented scope switch */
.peacock-workbench .wb-kwg-scopes {
    display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--wb-radius, 8px);
    background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-kwg-seg {
    border: none; background: transparent; cursor: pointer;
    padding: 5px 12px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794); border-radius: var(--wb-radius-sm, 4px);
    transition: var(--d3v-t-fast, 0.12s);
}
.peacock-workbench .wb-kwg-seg:hover { color: var(--wb-fg, #2c3e50); background: var(--wb-row-hover, #e8eef5); }
.peacock-workbench .wb-kwg-seg.is-on { color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); }

/* Hops slider */
.peacock-workbench .wb-kwg-hopwrap { display: inline-flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-kwg-hopwrap.is-hidden { display: none; }
.peacock-workbench .wb-kwg-hopwrap label {
    margin: 0; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794);
}
.peacock-workbench .wb-kwg-hops { width: 70px; cursor: pointer; accent-color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-kwg-hopval {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
    padding: 0 6px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent, #2c5282);
    background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--d3v-r-full, 999px);
}

.peacock-workbench .wb-kwg-count {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); font-weight: 500; white-space: nowrap;
}

.peacock-workbench .wb-kwg-btn {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 5px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794);
    background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius, 8px); transition: var(--d3v-t-fast, 0.12s);
}
.peacock-workbench .wb-kwg-btn:hover {
    color: var(--wb-fg, #2c3e50); border-color: var(--wb-accent, #2c5282);
    background: var(--wb-row-hover, #e8eef5);
}
.peacock-workbench .wb-kwg-btn.is-hidden { display: none; }
.peacock-workbench .wb-kwg-back {
    color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282);
}
.peacock-workbench .wb-kwg-back:hover {
    color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282);
}

/* Honest "the index stopped short" note — normally never shown (the index scans the whole model) */
.peacock-workbench .wb-kwg-note {
    flex: 0 0 auto; margin: 10px 12px 0; padding: 8px 11px; font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.45;
    color: var(--wb-fg, #2c3e50);
    background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .38);
    border-radius: var(--wb-radius, 8px);
}
.peacock-workbench .wb-kwg-note.is-hidden { display: none; }
.peacock-workbench .wb-kwg-note b { color: var(--wb-warn, #b45309); }

/* Family legend */
.peacock-workbench .wb-kwg-legend {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 8px 12px 2px;
    max-height: 62px; overflow-y: auto;
}
.peacock-workbench .wb-kwg-legend.is-hidden { display: none; }
.peacock-workbench .wb-kwg-leg {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794);
}
.peacock-workbench .wb-kwg-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.peacock-workbench .wb-kwg-leg.is-more { font-style: italic; opacity: .8; }

/* The canvas stage — fills whatever the viewport region leaves */
.peacock-workbench .wb-kwg-stage {
    flex: 1 1 auto; min-height: 0; position: relative; margin: 8px 12px 0;
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: var(--wb-radius, 8px);
    background:
        radial-gradient(circle at 1px 1px, rgba(127, 140, 160, .16) 1px, transparent 0) 0 0 / 24px 24px,
        var(--wb-panel, #fbfcfd);
    overflow: hidden;
}
.peacock-workbench .wb-kwg-cv { display: block; width: 100%; height: 100%; cursor: grab; }
.peacock-workbench .wb-kwg-cv:active { cursor: grabbing; }

.peacock-workbench .wb-kwg-foot {
    flex: 0 0 auto; padding: 7px 12px 9px; font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794); text-align: center;
}
.peacock-workbench .wb-kwg-foot b { color: var(--wb-fg, #2c3e50); }

/* Hover tooltip — body-mounted (it must escape the viewport's overflow), so NOT scoped */
.wb-kwg-tip {
    position: fixed; z-index: 20000; pointer-events: none; max-width: 280px;
    padding: 8px 10px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.4;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-primary, #fff); border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px); box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(15,23,42,.16));
}
.wb-kwg-tip-kw {
    font-family: ui-monospace, Menlo, monospace; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--d3v-accent-hover, #2563eb); margin-bottom: 4px; word-break: break-all;
}
.wb-kwg-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.wb-kwg-tip-row span { color: var(--d3v-text-muted, #94a3b8); }
.wb-kwg-tip-row b { color: var(--d3v-text-primary, #1e293b); font-weight: 600; text-align: right; word-break: break-word; }
.wb-kwg-svg:active { cursor: grabbing; }
.wb-kwg-emptytext { fill: var(--d3v-text-muted, #94a3b8); font-size: calc(13px * var(--wb-font-scale, 1)); }

.wb-kwg-link { stroke: var(--d3v-border-strong, #cbd5e1); stroke-width: 1.4px; stroke-opacity: .8; }
.wb-kwg-arrowhead { fill: var(--d3v-border-strong, #cbd5e1); }

.wb-kwg-node { cursor: pointer; }
.wb-kwg-dot {
    stroke: #fff; stroke-width: 1.6px; transition: filter .12s;
    filter: drop-shadow(0 1px 1.5px rgba(15,23,42,.18));
}
.wb-kwg-node.is-hover .wb-kwg-dot { stroke-width: 2.4px; filter: drop-shadow(0 2px 4px rgba(15,23,42,.35)); }
.wb-kwg-node.is-start .wb-kwg-dot { stroke: var(--d3v-accent, #3b82f6); stroke-width: 3px; }
.wb-kwg-nodelab {
    fill: var(--d3v-text-secondary, #475569); font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600;
    pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.wb-kwg-node.is-start .wb-kwg-nodelab { fill: var(--d3v-accent-hover, #2563eb); font-weight: 700; }

.wb-kwg-foot {
    flex: 0 0 auto; padding: 8px 14px 10px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--d3v-text-muted, #94a3b8);
    text-align: center;
}
.wb-kwg-foot b { color: var(--d3v-text-secondary, #475569); }

/* Hover tooltip — body-mounted, above the modal */
.wb-kwg-tip {
    position: fixed; z-index: 20000; pointer-events: none; max-width: 280px;
    padding: 8px 10px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.4;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-primary, #fff); border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px); box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(15,23,42,.16));
}
.wb-kwg-tip-kw {
    font-family: ui-monospace, Menlo, monospace; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--d3v-accent-hover, #2563eb); margin-bottom: 4px; word-break: break-all;
}
.wb-kwg-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.wb-kwg-tip-row span { color: var(--d3v-text-muted, #94a3b8); }
.wb-kwg-tip-row b { color: var(--d3v-text-primary, #1e293b); font-weight: 600; text-align: right; word-break: break-word; }

/* ============================================================================================
   Keyword taxonomy TREE (R2026-52) — the default keyword view (Ansys / LS-PrePost map). Same
   viewport-takeover as the graph, so the chrome mirrors .wb-kwg. The hover tooltip is shared with
   the graph (.wb-kwg-tip, body-mounted). Added by shashank2104 on 07/24/2026.
   ============================================================================================ */
.peacock-workbench .wb-viewport.is-kwt-open > *:not(.wb-kwt-host) { visibility: hidden; }
.peacock-workbench .wb-kwt {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 25;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--wb-bg, #eef1f4); color: var(--wb-fg, #2c3e50); -webkit-font-smoothing: antialiased;
}
.peacock-workbench .wb-kwt-head {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 8px 12px; background: var(--wb-panel, #fbfcfd);
    border-bottom: 1px solid var(--wb-border, #e0e3e6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.peacock-workbench .wb-kwt-spring { flex: 1 1 auto; }
.peacock-workbench .wb-kwt-title { font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794); white-space: nowrap; }
.peacock-workbench .wb-kwt-title b { color: var(--wb-fg, #2c3e50); font-weight: 700; margin-left: 4px; }

.peacock-workbench .wb-kwt-scopes {
    display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--wb-radius, 8px);
    background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-kwt-seg {
    border: none; background: transparent; cursor: pointer; padding: 5px 12px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794); border-radius: var(--wb-radius-sm, 4px); transition: var(--d3v-t-fast, 0.12s);
}
.peacock-workbench .wb-kwt-seg:hover { color: var(--wb-fg, #2c3e50); background: var(--wb-row-hover, #e8eef5); }
.peacock-workbench .wb-kwt-seg.is-on { color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); }

.peacock-workbench .wb-kwt-count { font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); font-weight: 500; white-space: nowrap; }

.peacock-workbench .wb-kwt-search-wrap { position: relative; display: inline-flex; align-items: center; }
.peacock-workbench .wb-kwt-search-wrap .fa { position: absolute; left: 9px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); pointer-events: none; }
.peacock-workbench .wb-kwt-search {
    font: inherit; font-size: calc(12px * var(--wb-font-scale, 1)); padding: 5px 10px 5px 26px; width: 150px;
    color: var(--wb-fg, #2c3e50); background: var(--wb-bg, #eef1f4);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: var(--wb-radius, 8px); transition: var(--d3v-t-fast, 0.12s);
}
.peacock-workbench .wb-kwt-search:focus { outline: none; border-color: var(--wb-accent, #2c5282); background: var(--wb-panel, #fff); width: 180px; }

.peacock-workbench .wb-kwt-btn {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 5px 10px; font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-fg-muted, #7a8794); background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius, 8px); transition: var(--d3v-t-fast, 0.12s);
}
.peacock-workbench .wb-kwt-btn:hover { color: var(--wb-fg, #2c3e50); border-color: var(--wb-accent, #2c5282); background: var(--wb-row-hover, #e8eef5); }
.peacock-workbench .wb-kwt-back { color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-kwt-back:hover { color: var(--wb-accent-fg, #fff); background: var(--wb-accent, #2c5282); border-color: var(--wb-accent, #2c5282); }

.peacock-workbench .wb-kwt-legend {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 8px 12px 2px; max-height: 62px; overflow-y: auto;
}
.peacock-workbench .wb-kwt-legend.is-hidden { display: none; }
.peacock-workbench .wb-kwt-leg { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794); }
.peacock-workbench .wb-kwt-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.peacock-workbench .wb-kwt-stage {
    flex: 1 1 auto; min-height: 0; position: relative; margin: 8px 12px 0;
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: var(--wb-radius, 8px);
    background:
        radial-gradient(circle at 1px 1px, rgba(127, 140, 160, .16) 1px, transparent 0) 0 0 / 24px 24px,
        var(--wb-panel, #fbfcfd);
    overflow: hidden;
}
.peacock-workbench .wb-kwt-cv { display: block; width: 100%; height: 100%; cursor: grab; }
.peacock-workbench .wb-kwt-cv:active { cursor: grabbing; }

.peacock-workbench .wb-kwt-foot { flex: 0 0 auto; padding: 7px 12px 9px; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); text-align: center; }
.peacock-workbench .wb-kwt-foot b { color: var(--wb-fg, #2c3e50); }

/* ============================================================================================
   *DEFINE_CURVE preview (R2026-52) — the inline sparkline strip on the card, the sparkline in the
   relationship graph's hover tooltip, and the View-curve (Newton) modal body.

   Added by shashank2104 on 07/23/2026 - R2026-52.
   The strip lives INSIDE the workbench shell, so it is scoped under .peacock-workbench and uses the
   shell's --wb-* tokens. The graph tooltip and the modal are BODY-mounted (they must escape the
   viewport / render in the d3view modal), so those two blocks are unscoped by necessity — same rule
   the graph tooltip and the ML curve modal already follow.
   ============================================================================================ */

/* ---- the strip above the card form ---- */
.peacock-workbench .wb-kwe-curve:empty { display: none; }
.peacock-workbench .wb-kwe-curvebox {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    margin: 8px 10px 0; padding: 8px 12px;
    background: var(--wb-panel-2, #f4f6f8); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius, 8px); transition: border-color .12s, box-shadow .12s;
}
.peacock-workbench .wb-kwe-curvebox:hover {
    border-color: var(--wb-accent, #2c5282); box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.peacock-workbench .wb-kwe-curvespark {
    flex: 0 0 auto; width: 260px; height: 54px;
    background: var(--wb-panel, #fff); border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px); overflow: hidden;
}
.peacock-workbench .wb-kwe-curvemeta { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-kwe-curvehead {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
    font-size: calc(12.5px * var(--wb-font-scale, 1)); color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-kwe-curven,
.peacock-workbench .wb-kwe-curveraw {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted, #7a8794);
}
/* The scale-factor chip is deliberately loud: the plot is NOT the card's own columns, and that is
   the one thing an engineer must not be allowed to miss. */
.peacock-workbench .wb-kwe-curvescale {
    display: inline-flex; align-items: center; gap: 5px; cursor: help;
    padding: 2px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--wb-warn, #b45309);
    background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .38);
    border-radius: var(--d3v-r-full, 999px);
}
.peacock-workbench .wb-kwe-curverange {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-kwe-curverange b { color: var(--wb-fg, #2c3e50); font-weight: 600; }
.peacock-workbench .wb-kwe-curveopen { flex: 0 0 auto; }

/* ---- the sparkline itself (shared by the strip and the graph tooltip) ---- */
.wb-kwe-spark-svg { display: block; width: 100%; height: 100%; }
.wb-kwe-spark-area { fill: rgba(76, 159, 254, .16); stroke: none; }
.wb-kwe-spark-line { fill: none; stroke: #4c9ffe; stroke-width: 1.6; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round; }

/* ---- graph hover tooltip (body-mounted, so unscoped) ---- */
.wb-kwg-tip-spark {
    width: 240px; height: 56px; margin: 6px 0 7px;
    background: var(--d3v-bg-secondary, #f8fafc); border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px); overflow: hidden;
}
.wb-kwg-tip-scale {
    margin-top: 5px; padding-top: 5px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700;
    color: #b45309; border-top: 1px dashed var(--d3v-border, #e2e8f0);
}

/* ---- View curve modal body (body-mounted, so unscoped — matches the d3view modal chrome) ---- */
.wb-kwc { display: flex; flex-direction: column; height: 100%; min-height: 0;
    color: var(--d3v-text-primary, #1e293b); }
.wb-kwc-head {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap;
    padding-bottom: 10px; border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.wb-kwc-spring { flex: 1 1 auto; }
.wb-kwc-title { font-family: ui-monospace, Menlo, monospace; font-size: calc(13px * var(--wb-font-scale, 1));
    color: var(--d3v-text-secondary, #475569); }
.wb-kwc-title b { color: var(--d3v-accent-hover, #2563eb); }
.wb-kwc-chip {
    padding: 3px 10px; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--d3v-text-secondary, #475569); background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0); border-radius: var(--d3v-r-full, 999px);
}
.wb-kwc-chip.is-scaled {
    cursor: help; color: #b45309; background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .38);
}
.wb-kwc-plot { flex: 1 1 auto; min-height: 380px; padding: 8px 0; }
.wb-kwc-foot {
    flex: 0 0 auto; padding-top: 8px; font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5;
    color: var(--d3v-text-muted, #94a3b8); border-top: 1px solid var(--d3v-border, #e2e8f0);
}
.wb-kwc-foot b { color: var(--d3v-text-secondary, #475569); }
.wb-kwc-empty {
    display: flex; align-items: center; justify-content: center; height: 100%; min-height: 240px;
    font-size: calc(13px * var(--wb-font-scale, 1)); color: var(--d3v-text-muted, #94a3b8);
}

/* ============================================================================
 *  R2026-58 - Entity Display (LS-PrePost "Model > Display Entity" parity) - Option C.
 *  Added by shashank2104 on 07/24/2026. Two draggable floating dialogs mounted on the
 *  viewport (same absolute + --wb-* token pattern as .wb-exf-panel): the main
 *  "Entity Display" tree/list dialog and the companion "Entity Selection" dialog.
 *  Scoped entirely under .peacock-workbench .wb-ed*.
 * ========================================================================== */
.peacock-workbench .wb-ed-panel {
    position: absolute; top: 54px; right: 16px; left: auto; width: 560px; min-width: 460px; z-index: 61;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .30);
    font-size: calc(12px * var(--wb-font-scale, 1)); overflow: hidden; user-select: none;
}
.peacock-workbench .wb-ed-sel-panel {
    position: absolute; top: 210px; left: 640px; width: 336px; min-width: 280px; z-index: 60;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .30);
    font-size: calc(12px * var(--wb-font-scale, 1)); overflow: hidden; user-select: none;
}
/* R-UI (07/24/2026) - bottom-right resize grip on the main dialog only (keeps the family tree +
   entity list readable at a chosen width/height). Diagonal-stripe grip, no icon-font dependency. */
.peacock-workbench .wb-ed-resize {
    position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; z-index: 2;
    cursor: nwse-resize; opacity: .5; transition: opacity .14s;
    background: linear-gradient(135deg,
        transparent 0 40%, var(--wb-border) 40% 46%, transparent 46% 60%,
        var(--wb-border) 60% 66%, transparent 66% 80%, var(--wb-border) 80% 86%, transparent 86%);
}
.peacock-workbench .wb-ed-resize:hover { opacity: 1; }

/* ---- shared floating-dialog header (drag handle) ---- */
.peacock-workbench .wb-ed-hd {
    height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: linear-gradient(var(--wb-panel-2), var(--wb-bg));
    border-bottom: 1px solid var(--wb-border); cursor: move;
}
.peacock-workbench .wb-ed-hd.is-grabbing { cursor: grabbing; }
.peacock-workbench .wb-ed-ttl { font-weight: 700; font-size: calc(12.5px * var(--wb-font-scale, 1)); display: flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto; }
.peacock-workbench .wb-ed-ttl i { color: var(--wb-accent); }
.peacock-workbench .wb-ed-badge {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: 20px; padding: 2px 9px; max-width: 210px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-ed-sel-tag {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.peacock-workbench .wb-ed-x {
    margin-left: auto; width: 22px; height: 22px; border-radius: var(--wb-radius-sm);
    display: grid; place-items: center; color: var(--wb-fg-muted); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ed-x:hover { color: #fff; background: var(--wb-danger, #e2483a); }

.peacock-workbench .wb-ed-body { padding: 10px; }

/* ---- generic buttons (self-contained -- do not rely on the shell-scoped .wb-btn) ---- */
.peacock-workbench .wb-ed-btn {
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm); padding: 4px 10px; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1));
    font-weight: 600; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ed-btn:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-ed-btn:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.peacock-workbench .wb-ed-btn.wb-ed-btn-xs { padding: 3px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ed-btn.wb-ed-btn-p { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ed-btn.wb-ed-btn-p:hover { filter: brightness(1.08); }
/** Added by shashank2104 on 07/27/2026 at 05:50 PM - R2026-58 - Wireframe others toggle pressed state **/
.peacock-workbench .wb-ed-btn[data-wb-ed-wireframe-others].is-on {
    background: var(--wb-accent);
    border-color: var(--wb-accent);
    color: var(--wb-accent-fg);
}
.peacock-workbench .wb-ed-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.peacock-workbench .wb-ed-lbl {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); text-transform: uppercase; letter-spacing: .4px;
    font-weight: 700; margin-right: 2px;
}
.peacock-workbench .wb-ed-sp { flex: 1 1 auto; }
.peacock-workbench .wb-ed-captag { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* ---- global bar ---- */
.peacock-workbench .wb-ed-globalbar {
    display: flex; align-items: center; gap: 6px; padding: 0 2px 9px;
    border-bottom: 1px solid var(--wb-border); margin-bottom: 9px;
}
.peacock-workbench .wb-ed-famcount { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-weight: 600; }

/* ---- tabs (Entity Display | Entity Preview) ---- */
.peacock-workbench .wb-ed-tabs { display: flex; gap: 2px; margin-bottom: 9px; border-bottom: 1px solid var(--wb-border); }
.peacock-workbench .wb-ed-tab {
    border: none; background: transparent; color: var(--wb-fg-muted); font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1));
    font-weight: 600; padding: 6px 12px; cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .14s, border-color .14s;
}
.peacock-workbench .wb-ed-tab:hover { color: var(--wb-fg); }
.peacock-workbench .wb-ed-tab.is-on { color: var(--wb-accent); border-bottom-color: var(--wb-accent); }
.peacock-workbench .wb-ed-tab:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: -2px; }

/* ---- family/sub-type tree + PrePost entity list panel ---- */
.peacock-workbench .wb-ed-tree {
    height: 160px; overflow-y: auto; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); background: var(--wb-panel); margin-bottom: 8px;
}
/** Added by shashank2104 on 07/24/2026 at 05:09 PM - R2026-58 - PrePost-style entity list panel
 *  (header `{count} Family_Subtype` + ordinal range groups 1-36 / 37-72 / …). **/
.peacock-workbench .wb-ed-entlist {
    height: 160px; overflow-y: auto; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); background: var(--wb-panel); margin-bottom: 4px;
}
.peacock-workbench .wb-ed-entlist-hd {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px;
    border-bottom: 1px solid var(--wb-border); position: sticky; top: 0;
    background: var(--wb-panel); z-index: 1;
}
.peacock-workbench .wb-ed-entlist-title {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent); flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-ed-entlist-note { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); flex: 0 0 auto; }
.peacock-workbench .wb-ed-range-node .wb-ed-tname { font-variant-numeric: tabular-nums; font-weight: 600; }
.peacock-workbench .wb-ed-entlist .wb-ed-ent-node { padding-left: 18px; }
.peacock-workbench .wb-ed-preview {
    height: 260px; overflow-y: auto; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); background: var(--wb-panel); padding: 4px 0; display: none;
}
/* tab swap — Preview hides the display-only surfaces, shows the preview list */
.peacock-workbench .wb-ed-body.is-preview .wb-ed-tree,
.peacock-workbench .wb-ed-body.is-preview .wb-ed-entlist,
.peacock-workbench .wb-ed-body.is-preview .wb-ed-globalbar,
.peacock-workbench .wb-ed-body.is-preview .wb-ed-selection,
.peacock-workbench .wb-ed-body.is-preview .wb-ed-keyinrow,
.peacock-workbench .wb-ed-body.is-preview .wb-ed-status { display: none; }
.peacock-workbench .wb-ed-body.is-preview .wb-ed-preview { display: block; }

/* generic tree node — caret + optional checkbox + name + count, coloured by presence */
.peacock-workbench .wb-ed-tnode {
    display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; cursor: pointer;
    border-left: 2px solid transparent; transition: background .12s;
}
.peacock-workbench .wb-ed-tnode:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ed-tnode.is-sel { background: var(--wb-row-hover); border-left-color: var(--wb-accent); }
.peacock-workbench .wb-ed-caret { flex: 0 0 12px; width: 12px; text-align: center; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); cursor: pointer; }
.peacock-workbench .wb-ed-caret:hover { color: var(--wb-accent); }
.peacock-workbench .wb-ed-caret-sp { flex: 0 0 12px; width: 12px; }
.peacock-workbench .wb-ed-tcheck { accent-color: var(--wb-accent); cursor: pointer; margin: 0; flex: 0 0 auto; }
.peacock-workbench .wb-ed-tname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-ed-tid {
    flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-ed-tcnt { flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }
/* inline *DEFINE_CURVE sparkline (click to open the full Newton plot) */
.peacock-workbench .wb-ed-spark {
    flex: 0 0 auto; display: inline-flex; align-items: center; width: 108px; height: 22px;
    cursor: pointer; opacity: .85; transition: opacity .14s;
}
.peacock-workbench .wb-ed-spark:hover { opacity: 1; }
.peacock-workbench .wb-ed-spark svg { display: block; width: 100%; height: 100%; }
.peacock-workbench .wb-ed-sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); flex: 0 0 auto; }
/* presence colour-coding (PrePost blue = has entities, muted = empty) */
.peacock-workbench .wb-ed-fam-node { font-weight: 700; font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ed-sub-node .wb-ed-tname { font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ed-tnode.is-present > .wb-ed-tname { color: var(--wb-accent); }
.peacock-workbench .wb-ed-tnode.is-absent > .wb-ed-tname { color: var(--wb-fg-muted); }
.peacock-workbench .wb-ed-ent-node .wb-ed-tid { color: var(--wb-fg); }

/* R2026-75 - drawability badge on a sub-type row. `3D` = a glyph packet (or a built-in pass) really
   registered for this kind in this build; `NO GLYPH` = the deck count is real but nothing draws it yet,
   so the toggle is honest about being a no-op instead of silently doing nothing. No badge at all means
   "not known yet" (no keyword model loaded) - see ED.canDraw returning null. */
.peacock-workbench .wb-ed-gly {
    flex: 0 0 auto; font-size: calc(8.5px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .4px; line-height: 1;
    padding: 2px 4px; border-radius: var(--wb-radius-sm); border: 1px solid transparent; margin-left: 6px;
}
.peacock-workbench .wb-ed-gly.is-draw {
    color: var(--wb-accent); border-color: var(--wb-accent); opacity: .65;
}
.peacock-workbench .wb-ed-gly.is-blank {
    color: #c9820a; border-color: #c9820a; background: rgba(201, 130, 10, .08);
}
/* R2026-75 - coverage filter in the global bar */
.peacock-workbench .wb-ed-covsel {
    flex: 0 0 auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); padding: 2px 5px; margin-left: 6px;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); cursor: pointer;
}
.peacock-workbench .wb-ed-covsel:hover { border-color: var(--wb-accent); }

/* Entity Preview list */
.peacock-workbench .wb-ed-prev-head { padding: 8px 10px 4px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted); text-transform: uppercase; letter-spacing: .4px; }
.peacock-workbench .wb-ed-prev-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
.peacock-workbench .wb-ed-prev-nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wb-accent); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; }

.peacock-workbench .wb-ed-empty { padding: 16px 10px; text-align: center; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* ---- Entity Selection section ---- */
.peacock-workbench .wb-ed-selection {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 2px 0; margin-top: 9px; border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ed-sel-btns { display: inline-flex; gap: 4px; }
.peacock-workbench .wb-ed-inline { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
/** Added by shashank2104 on 07/26/2026 at 12:14 AM - R2026-58 - Side row [hidden] must beat .wb-ed-inline display **/
.peacock-workbench .wb-ed-inline[data-wb-ed-contact-side-row][hidden] { display: none; }
.peacock-workbench .wb-ed-check { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg); cursor: pointer; }
.peacock-workbench .wb-ed-check input { accent-color: var(--wb-accent); cursor: pointer; margin: 0; }

/* ---- inline Keyin row (revealed by AList) ---- */
.peacock-workbench .wb-ed-keyinrow { display: flex; align-items: center; gap: 6px; padding: 8px 2px 0; }
.peacock-workbench .wb-ed-keyinrow[hidden] { display: none; }
.peacock-workbench .wb-ed-keyin {
    flex: 1 1 140px; min-width: 120px; font: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); padding: 5px 8px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); transition: .14s;
}
.peacock-workbench .wb-ed-keyin:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-ed-keyin:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; border-color: var(--wb-accent); }

/* ---- footer: status line (LS-PrePost bottom line) + Done ---- */
.peacock-workbench .wb-ed-foot {
    display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px 2px 0;
    border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ed-status {
    flex: 1 1 auto; min-width: 0; padding: 2px 8px;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.peacock-workbench .wb-ed-labelsel {
    font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1)); padding: 4px 8px; border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); background: var(--wb-panel); color: var(--wb-fg); cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ed-labelsel:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-ed-labelsel:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.peacock-workbench .wb-ed-seg {
    display: inline-flex; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); overflow: hidden;
}
.peacock-workbench .wb-ed-seg-btn {
    border: none; border-right: 1px solid var(--wb-border); background: var(--wb-panel-2); color: var(--wb-fg);
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; padding: 5px 11px; cursor: pointer; transition: .14s;
}
.peacock-workbench .wb-ed-seg-btn:last-child { border-right: none; }
.peacock-workbench .wb-ed-seg-btn:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ed-seg-btn.is-on { background: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ed-seg-btn:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: -2px; }

/* ---- footer ---- */
.peacock-workbench .wb-ed-foot { display: flex; align-items: center; gap: 8px; padding-top: 9px; }
.peacock-workbench .wb-ed-foothint { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* ---- companion "Entity Selection" dialog ---- */
.peacock-workbench .wb-ed-sel-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.peacock-workbench .wb-ed-sel-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.peacock-workbench .wb-ed-sel-cap { width: 46px; flex: 0 0 46px; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ed-sel-cap-sp { visibility: hidden; }
.peacock-workbench .wb-ed-miniseg {
    display: inline-flex; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); overflow: hidden;
}
.peacock-workbench .wb-ed-miniseg button {
    border: none; border-right: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg-muted);
    font: inherit; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600; padding: 3px 8px;
}
.peacock-workbench .wb-ed-miniseg button:last-child { border-right: none; }
.peacock-workbench .wb-ed-miniseg button.is-on { background: var(--wb-panel-2); color: var(--wb-fg); }
.peacock-workbench .wb-ed-miniseg button:disabled { cursor: not-allowed; opacity: .55; }
.peacock-workbench .wb-ed-sel-live { padding-top: 2px; border-top: 1px dashed var(--wb-border); }
.peacock-workbench .wb-ed-sel-liveline { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-ed-sel-keyin {
    flex: 1 1 140px; min-width: 120px; font: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); padding: 5px 8px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); color: var(--wb-fg); transition: .14s;
}
.peacock-workbench .wb-ed-sel-keyin:hover { border-color: var(--wb-accent); }
.peacock-workbench .wb-ed-sel-keyin:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; border-color: var(--wb-accent); }

/* =====================================================================================
   R2026-58 - Entity Display Wave 4 (P-SELECT): Part Connections + Entity Selection dock
   panels. Scoped under .peacock-workbench, --wb-* tokens only. The Ident label chips + the
   marquee/lasso overlays are appended to the VIEWPORT (canvas host), still inside
   .peacock-workbench, so they stay scoped.
   Added by shashank2104 on 07/24/2026 - R2026-58 - Entity Display PrePost parity - Wave 4.
   ===================================================================================== */

/* ---- shared dock button (self-contained; does not rely on the shell .wb-btn) ---- */
.peacock-workbench .wb-ec-btn,
.peacock-workbench .wb-es-btn,
.peacock-workbench .wb-es-toggle {
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm); padding: 4px 10px; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1));
    font-weight: 600; cursor: pointer; transition: .14s; white-space: nowrap;
}
.peacock-workbench .wb-ec-btn:hover,
.peacock-workbench .wb-es-btn:hover,
.peacock-workbench .wb-es-toggle:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-ec-btn:focus-visible,
.peacock-workbench .wb-es-btn:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.peacock-workbench .wb-ec-btn:disabled,
.peacock-workbench .wb-es-btn:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.peacock-workbench .wb-ec-btn.is-armed,
.peacock-workbench .wb-es-btn.is-armed,
.peacock-workbench .wb-es-toggle.is-on {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-ec-btn-p,
.peacock-workbench .wb-es-btn-p { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg); }

/* ===================== Part Connections (.wb-ec-*) ===================== */
.peacock-workbench .wb-ec-host { height: 100%; overflow-y: auto; }
.peacock-workbench .wb-ec-wrap { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.peacock-workbench .wb-ec-searchrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.peacock-workbench .wb-ec-search {
    flex: 1 1 240px; min-width: 180px; border: 1px solid var(--wb-border); background: var(--wb-bg);
    color: var(--wb-fg); border-radius: var(--wb-radius-sm); padding: 6px 9px; font: inherit; font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-ec-search:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 2px var(--wb-accent-soft); }
.peacock-workbench .wb-ec-hint { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }
.peacock-workbench .wb-ec-hint span { color: var(--wb-fg-dim); font-weight: 600; }

.peacock-workbench .wb-ec-results {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm); background: var(--wb-panel);
    max-height: 190px; overflow-y: auto;
}
.peacock-workbench .wb-ec-result {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--wb-divider); transition: .12s;
}
.peacock-workbench .wb-ec-result:last-child { border-bottom: 0; }
.peacock-workbench .wb-ec-result:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ec-rnm { font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); font-weight: 600; }
.peacock-workbench .wb-ec-rid { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-family: var(--wb-mono); }

.peacock-workbench .wb-ec-part {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius); background: var(--wb-panel);
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.peacock-workbench .wb-ec-pt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.peacock-workbench .wb-ec-pt-nm { font-size: calc(13.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); }
.peacock-workbench .wb-ec-pt-actions { display: flex; gap: 6px; }
.peacock-workbench .wb-ec-pt-sum { font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); line-height: 1.55; }
.peacock-workbench .wb-ec-pt-sum b { color: var(--wb-fg); }
.peacock-workbench .wb-ec-chip {
    display: inline-block; background: var(--wb-accent-soft); color: var(--wb-fg);
    border-radius: 10px; padding: 1px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
}
.peacock-workbench .wb-ec-neighlist { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.peacock-workbench .wb-ec-neigh {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 9px; border-radius: var(--wb-radius-sm); cursor: pointer; transition: .12s;
    border: 1px solid transparent;
}
.peacock-workbench .wb-ec-neigh:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ec-neigh.is-sel { background: var(--wb-accent-soft); border-color: var(--wb-accent); }
.peacock-workbench .wb-ec-nb-nm { font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); }
.peacock-workbench .wb-ec-nb-cnt {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent-fg); background: var(--wb-accent);
    border-radius: 9px; padding: 0 7px; min-width: 20px; text-align: center;
}
.peacock-workbench .wb-ec-empty { font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-style: italic; }
.peacock-workbench .wb-ec-notes { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-warn); line-height: 1.5; }
.peacock-workbench .wb-ec-src { font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); text-align: right; }

/* ===================== Entity Selection (.wb-es-*) — PrePost radio-grid, floating companion ===================== */
/* floating companion window (opens WITH Tools ▸ Display, bottom-right of the viewport) */
.peacock-workbench .wb-es-panel {
    position: absolute; width: 372px; z-index: 62; background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius);
    box-shadow: 0 10px 34px rgba(0,0,0,.45); overflow: hidden; user-select: none;
}
.peacock-workbench .wb-es-hd {
    display: flex; align-items: center; height: 30px; padding: 0 6px 0 10px; cursor: grab;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-es-hd.is-grabbing { cursor: grabbing; }
.peacock-workbench .wb-es-ttl { font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg); flex: 1 1 auto; }
.peacock-workbench .wb-es-ttl .fa { color: var(--wb-accent); margin-right: 6px; }
.peacock-workbench .wb-es-x { cursor: pointer; color: var(--wb-fg-muted); padding: 3px 6px; border-radius: var(--wb-radius-sm); }
.peacock-workbench .wb-es-x:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-es-host { height: 100%; overflow-y: auto; }
.peacock-workbench .wb-es-wrap { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }

/* 3D entity labels (Label ▸ Detail) — DOM chips on the viewport, inside .peacock-workbench */
.peacock-workbench .wb-el-layer .wb-el-leaders {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
}
/** Added by shashank2104 on 07/27/2026 at 03:57 PM - R2026-58 - PrePost-style tether from glyph
 *  anchor → chip so labels feel attached while orbiting (chip look unchanged). **/
.peacock-workbench .wb-el-leader {
    stroke: rgba(255, 225, 77, 0.85); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.peacock-workbench .wb-el-chip {
    position: absolute; transform: translate(-50%, -50%); background: rgba(20,22,28,.72); color: #ffe14d;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; line-height: 1.2; padding: 0 4px; border-radius: 4px; white-space: nowrap;
    pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/** Added by shashank2104 on 08/24/2026 - R2026-217 - A Show in 3D chip carrying ten fields rendered as
 *  one nowrap run wider than the viewport. `.is-multi` is set by `EL._fillChip` only when the label has
 *  more than one segment, so a bare-id chip keeps the single-line rule above untouched.
 *  ⚠ `white-space: normal` must be re-asserted here — the base rule sets nowrap and would otherwise
 *  keep the flex line from ever breaking. */
.peacock-workbench .wb-el-chip.is-multi {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px calc(7px * var(--wb-font-scale, 1));
    white-space: normal; max-width: calc(228px * var(--wb-font-scale, 1));
    padding: calc(3px * var(--wb-font-scale, 1)) calc(6px * var(--wb-font-scale, 1));
    background: rgba(20,22,28,.82); border-radius: 5px;
}
/** The identity owns the first line — it is what the chip is FOR, and a reader finds the entity by it
 *  before reading any value. `flex-basis: 100%` rather than a <br>, so the fields below still wrap
 *  as a group. */
.peacock-workbench .wb-el-chip.is-multi .wb-el-chip-id {
    flex: 0 0 100%; color: #fff; font-weight: 700;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    margin-bottom: calc(1px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-el-chip.is-multi .wb-el-chip-f {
    display: inline-flex; align-items: baseline; gap: calc(3px * var(--wb-font-scale, 1));
}
/** The LS-DYNA field name reads as a KEY, not as another value — dimmed and slightly smaller, so a row
 *  of `LLCID 5500005 ULCID 5500007` scans as pairs instead of six equal numbers. */
.peacock-workbench .wb-el-chip.is-multi .wb-el-chip-k {
    color: rgba(255, 225, 77, .58); font-weight: 700;
    font-size: calc(9px * var(--wb-font-scale, 1)); letter-spacing: .03em;
}
.peacock-workbench .wb-el-chip.is-multi .wb-el-chip-v { color: #ffe14d; }
/** A count or a `$` caption has no field name, so it reads as one phrase and is allowed to wrap. */
.peacock-workbench .wb-el-chip.is-multi .wb-el-chip-f.is-text { color: rgba(255,255,255,.82); font-weight: 500; }
.peacock-workbench .wb-el-more {
    position: absolute; left: 8px; bottom: 8px; background: rgba(20,22,28,.8); color: var(--wb-fg-dim);
    font-size: calc(10px * var(--wb-font-scale, 1)); padding: 2px 7px; border-radius: 6px; pointer-events: none;
}
.peacock-workbench .wb-es-lbl {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.peacock-workbench .wb-es-subrow { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-es-kind {
    flex: 1 1 200px; border: 1px solid var(--wb-border); background: var(--wb-bg); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm); padding: 5px 8px; font: inherit; font-size: calc(12px * var(--wb-font-scale, 1));
}
/* the three radio columns (how | modifiers | action) */
.peacock-workbench .wb-es-grid {
    display: grid; grid-template-columns: repeat(3, minmax(90px, 1fr)); gap: 6px 14px;
    padding: 9px 10px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius); background: var(--wb-panel);
}
.peacock-workbench .wb-es-col { display: flex; flex-direction: column; gap: 5px; }
.peacock-workbench .wb-es-radio {
    display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); cursor: pointer; user-select: none;
}
.peacock-workbench .wb-es-radio input { accent-color: var(--wb-accent); margin: 0; cursor: pointer; }
.peacock-workbench .wb-es-typerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peacock-workbench .wb-es-type {
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent); font-family: var(--wb-mono);
    background: var(--wb-accent-soft); border-radius: var(--wb-radius-sm); padding: 2px 8px;
}
.peacock-workbench .wb-es-keyin {
    flex: 1 1 160px; min-width: 130px; border: 1px solid var(--wb-border); background: var(--wb-bg);
    color: var(--wb-fg); border-radius: var(--wb-radius-sm); padding: 5px 8px; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-es-keyin:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 2px var(--wb-accent-soft); }
.peacock-workbench .wb-es-btns { display: flex; align-items: center; gap: 6px; }
.peacock-workbench .wb-es-btn-go { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-es-btn-go.is-armed { background: var(--wb-warn); border-color: var(--wb-warn); }
.peacock-workbench .wb-es-sp { flex: 1 1 auto; }
.peacock-workbench .wb-es-statusrow { min-height: 16px; }
.peacock-workbench .wb-es-status { font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); font-weight: 600; }

/* overlays (canvas host) + ident chips -- appended to the viewport inside .peacock-workbench */
.peacock-workbench .wb-es-marquee { fill: rgba(80,150,255,.14); stroke: var(--wb-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.peacock-workbench .wb-es-lasso { stroke: var(--wb-accent); stroke-width: 1.6; stroke-dasharray: 4 3; fill: rgba(80,150,255,.10); }
.peacock-workbench .wb-es-identchip {
    position: absolute; transform: translate(-50%, -130%); background: var(--wb-accent); color: var(--wb-accent-fg);
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none;
}

/* =====================================================================================
   R2026-58 — ENTITY PANEL (design option B, "Browser"). Added by shashank2104 on 07/27/2026.
   The Tools -> Display surface, folded out of the two floating dialogs and into the right-hand
   Selection panel. Scoped under `.peacock-workbench` per the plugin rule; all colour / radius /
   transition values alias the shell's own `--wb-*` tokens so it matches the rail and the dock.
   The action row carries `.wb-panel-foot`, which the inspector contract sticks to the bottom of
   `.wb-inspector-context` — everything above it scrolls.
   ===================================================================================== */
.peacock-workbench .wb-ep {
    display: flex; flex-direction: column; min-height: 100%;
    /** ⚠ `position: relative` is LOAD-BEARING, not cosmetic. `_openHighlightMenu` mounts the menu
     *  into this element and positions it absolutely against it; without a positioned ancestor here
     *  the menu resolved against the page and rendered at the very top, over the toolbar. */
    position: relative;
    font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}

.peacock-workbench .wb-ep-head {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ep-title { flex: 1; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: -.01em; }
/* Added by shashank2104 on 08/03/2026 at 01:11 PM - Options dropdown (Labels + subtype rows).
   Updated by shashank2104 on 08/03/2026 at 01:42 PM - sits on the Entities section label, not the
   panel header (header scrolls away; Options is about how entities are shown). */
.peacock-workbench .wb-ep-opts-wrap { position: relative; flex: 0 0 auto; margin-left: auto; }
.peacock-workbench .wb-ep-opts-toggle.is-on,
.peacock-workbench [data-ep-opts-toggle].is-on {
    background: var(--wb-accent-soft, rgba(64, 140, 255, .18));
    border-color: var(--wb-accent);
    color: var(--wb-fg);
}
.peacock-workbench .wb-ep-opts-drop {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
    min-width: 280px; max-width: 340px;
    padding: 10px 12px;
    background: var(--wb-panel, #1e2128);
    border: 1px solid var(--wb-border-strong, var(--wb-border));
    border-radius: var(--wb-radius-sm, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.peacock-workbench .wb-ep-opts-drop .wb-ep-kv { margin-bottom: 8px; }
.peacock-workbench .wb-ep-opts-drop .wb-ep-kv:last-child { margin-bottom: 0; }
.peacock-workbench .wb-ep-opts-drop .wb-ep-k { min-width: 88px; flex: 1 1 auto; }
.peacock-workbench .wb-ep-opts-drop .wb-ep-sel { flex: 0 1 auto; min-width: 0; max-width: 140px; }
.peacock-workbench .wb-ep-opts-drop .wb-ep-opts-seg { flex: 0 0 auto; }
/* Added by shashank2104 on 08/03/2026 at 01:47 PM - modern on/off switch (same look as
   multiselect `.ms-modern-toggle` / `.ms-modern-switch`). Hidden native checkbox drives state. */
.peacock-workbench .wb-ep-switch {
    position: relative; display: inline-flex; align-items: center;
    flex: 0 0 auto; margin: 0; cursor: pointer; user-select: none;
}
.peacock-workbench .wb-ep-switch input {
    position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;
}
.peacock-workbench .wb-ep-switch-track {
    position: relative; display: block;
    width: 40px; height: 22px; border-radius: 999px;
    background: var(--wb-border-strong, #5a6270);
    transition: background .15s ease;
}
.peacock-workbench .wb-ep-switch-knob {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s ease;
}
.peacock-workbench .wb-ep-switch input:checked + .wb-ep-switch-track {
    background: var(--wb-success, #2ea44f);
}
.peacock-workbench .wb-ep-switch input:checked + .wb-ep-switch-track .wb-ep-switch-knob {
    left: 20px;
}
.peacock-workbench .wb-ep-switch input:focus-visible + .wb-ep-switch-track {
    box-shadow: 0 0 0 3px var(--wb-accent-soft, rgba(64, 140, 255, .28));
}
/* Added by shashank2104 on 08/23/2026 - R2026-75 - SHOW IN 3D, the per-item switch block.
   Lives inside the Options drop, so the drop can now run long: it is capped and scrolls rather than
   growing past the viewport (a popover cannot use the panel's full-h + flex-1 route). */
.peacock-workbench .wb-ep-opts-drop { max-height: min(70vh, 620px); overflow-y: auto; }
.peacock-workbench .wb-ep-s3 {
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ep-s3.hidden { display: none; }
.peacock-workbench .wb-ep-s3-head {
    display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px;
}
.peacock-workbench .wb-ep-s3-title {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: -.01em;
    color: var(--wb-fg);
}
.peacock-workbench .wb-ep-s3-sub {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-ep-s3-grp {
    margin: 9px 0 5px;
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-ep-s3-grp:first-of-type { margin-top: 0; }
.peacock-workbench .wb-ep-s3-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; margin: 0 -6px;
    border-radius: var(--wb-radius-sm, 4px);
    transition: background .12s ease;
}
.peacock-workbench .wb-ep-s3-row:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-s3-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.peacock-workbench .wb-ep-s3-t {
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    display: flex; align-items: center; gap: 5px;
}
.peacock-workbench .wb-ep-s3-n {
    flex: 0 0 auto;
    padding: 0 5px; border-radius: 999px;
    background: var(--wb-accent-soft, rgba(64, 140, 255, .18));
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
}
.peacock-workbench .wb-ep-s3-s {
    font-size: calc(10px * var(--wb-font-scale, 1)); line-height: 1.35; color: var(--wb-fg-muted);
}
/* A switch this deck cannot honour keeps its row and states the reason where the subtitle goes —
   dimmed, never removed: an entry that is quietly absent reads as a feature nobody built. */
.peacock-workbench .wb-ep-s3-row.is-off .wb-ep-s3-t { color: var(--wb-fg-muted); }
.peacock-workbench .wb-ep-s3-row.is-off .wb-ep-s3-s { font-style: italic; opacity: .85; }
.peacock-workbench .wb-ep-s3-row.is-off .wb-ep-switch { cursor: not-allowed; opacity: .45; }

/* Added by shashank2104 on 08/03/2026 at 01:11 PM - All / None next to Family label. */
.peacock-workbench .wb-ep-fam-acts {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px;
}
.peacock-workbench .wb-ep-lbl .wb-ep-only { margin-left: auto; }
/* Added by shashank2104 on 07/31/2026 - R2026-75 - deck-resolution indicator. Muted on purpose: it
   reports that the list is still filling in, it is not an action. `[hidden]` needs the explicit
   display:none because the flex parent would otherwise lay it out anyway. */
.peacock-workbench .wb-ep-busy {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 500; letter-spacing: .01em;
    color: var(--wb-fg-muted); white-space: nowrap;
}
.peacock-workbench .wb-ep-busy[hidden] { display: none; }
/** R2026-58 - the in-body twin of `wb-ep-busy`: the panel's FAMILY row is filtered to what the deck
 *  reports, so while the deck resolves it shows only the mesh families and reads as complete. */
.peacock-workbench .wb-ep-building {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--d3v-border-subtle, var(--d3v-border));
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary));
    color: var(--d3v-text-secondary);
    font-size: calc(11px * var(--wb-font-scale, 1));
    line-height: 1.35;
}
.peacock-workbench .wb-ep-building[hidden] { display: none; }
.peacock-workbench .wb-ep-building .fa { color: var(--d3v-accent); flex: 0 0 auto; }
.peacock-workbench .wb-ep-busy .fa { font-size: calc(10px * var(--wb-font-scale, 1)); }
/* Added by shashank2104 on 07/30/2026 - R2026-75 - the panel's own close, matching .wb-ed-x on the
   entity floaters. Sits after All / None, so it never gets in the way of the two it shares the row
   with (the title already takes the flex, so no margin-left:auto here). */
.peacock-workbench .wb-ep-x {
    width: 22px; height: 22px; padding: 0; border: 0; background: none;
    border-radius: var(--wb-radius-sm); display: grid; place-items: center;
    color: var(--wb-fg-muted); cursor: pointer; transition: var(--wb-t, .14s);
}
.peacock-workbench .wb-ep-x:hover { color: #fff; background: var(--wb-danger, #e2483a); }
.peacock-workbench .wb-ep-x:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }

.peacock-workbench .wb-ep-sec { padding: 10px; border-bottom: 1px solid var(--wb-border); }
.peacock-workbench .wb-ep-lbl {
    display: flex; align-items: center; gap: 8px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--wb-fg-muted); margin-bottom: 8px;
}
.peacock-workbench .wb-ep-only {
    margin-left: auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--wb-fg-dim); display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
/* R2026-217 - which item the 3D labels belong to, on the Items heading. It is a STATEMENT, not an
   action, so it is muted and sits at the far end of the row.
   ⚠ `.wb-ep-lbl` is a heading style (uppercase + .07em letter-spacing) — both are reset here or the
   sentence renders as spaced small-caps, the trap the pick popover already records. */
.peacock-workbench .wb-ep-lblscope {
    margin-left: auto; max-width: 62%;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 500;
    letter-spacing: 0; text-transform: none; color: var(--wb-fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.peacock-workbench .wb-ep-lblscope:empty { display: none; }

/* R2026-217 - node IDs beside the highlight markers (Show in 3D ▸ "Node IDs on the markers").
   ⚠ The layer is mounted on the VIEWPORT region, not under the panel root, so these rules are
   deliberately UNSCOPED — the same reason the EntityLabels chips are. Colour matches the marker
   (`EP.highlightNodes` paints rgb(255,158,28)) so a chip reads as belonging to its sphere. */
.wb-ep-nodelab-layer {
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none; overflow: hidden; z-index: 39;
}
.wb-ep-nodelab {
    position: absolute; white-space: nowrap; pointer-events: none;
    font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    font-size: 10.5px; line-height: 1; letter-spacing: .01em;
    padding: 2px 5px; border-radius: 3px;
    color: #1b1205; background: rgba(255, 158, 28, .92);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.wb-ep-nodelab-more {
    position: absolute; left: 8px; bottom: 8px; pointer-events: none;
    font-size: 10.5px; padding: 3px 7px; border-radius: 3px;
    color: #fff; background: rgba(0, 0, 0, .6);
}
.peacock-workbench .wb-ep-muted { color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); padding: 6px 2px; }

/* ---- family chips ---- */
.peacock-workbench .wb-ep-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.peacock-workbench .wb-ep-chip {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 4px 9px; border-radius: 100px; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 500;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg-dim);
    transition: background var(--wb-t), border-color var(--wb-t), color var(--wb-t);
}
.peacock-workbench .wb-ep-chip:hover { color: var(--wb-fg); border-color: var(--wb-border-strong); }
.peacock-workbench .wb-ep-chip.is-on {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-ep-chip.is-absent { opacity: .45; }
.peacock-workbench .wb-ep-n { font-family: var(--wb-mono); font-size: calc(10px * var(--wb-font-scale, 1)); opacity: .8; }

/* ---- sub-type rows ---- */
.peacock-workbench .wb-ep-subs { max-height: 190px; overflow-y: auto; }
.peacock-workbench .wb-ep-row {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: pointer;
    border-radius: var(--wb-radius-sm); transition: background var(--wb-t);
}
.peacock-workbench .wb-ep-row:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-row.is-sel { background: var(--wb-accent-soft); }
.peacock-workbench .wb-ep-row input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.peacock-workbench .wb-ep-sw {
    width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset;
}
.peacock-workbench .wb-ep-nm { flex: 1; font-size: calc(12px * var(--wb-font-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-ep-ct { font-family: var(--wb-mono); font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); }
/** Added by shashank2104 on 08/24/2026 - R2026-217 - the item row's own Show in 3D button. Sits
 *  between the name and the count so the count stays where the eye already reads it. Quiet until
 *  hovered or open — it is one of up to a dozen rows and must not compete with the item name. */
.peacock-workbench .wb-ep-s3btn {
    flex: 0 0 auto; border: 1px solid var(--wb-border); background: transparent;
    color: var(--wb-fg-dim);
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1;
    padding: 3px 4px; border-radius: var(--wb-radius-sm); cursor: pointer;
    opacity: 0; transition: opacity var(--wb-t), color var(--wb-t), border-color var(--wb-t), background var(--wb-t);
}
.peacock-workbench .wb-ep-row:hover .wb-ep-s3btn,
.peacock-workbench .wb-ep-row.is-sel .wb-ep-s3btn,
.peacock-workbench .wb-ep-s3btn.is-open,
.peacock-workbench .wb-ep-s3btn:focus-visible { opacity: 1; }
.peacock-workbench .wb-ep-s3btn:hover { color: var(--wb-fg); border-color: var(--wb-fg-dim); }
.peacock-workbench .wb-ep-s3btn.is-open {
    color: var(--wb-accent-fg, #fff); background: var(--wb-accent); border-color: var(--wb-accent);
}

/** The popover itself. ⚠ Mounted on the PANEL, not inside the Items list — that list is a scroller
 *  and a popover nested in it would be clipped by it and would scroll away from its own row. It is
 *  positioned by `_placeShow3D`, which sets only `top`. */
.peacock-workbench .wb-ep-s3pop {
    position: absolute; left: 8px; right: 8px; z-index: 40;
    max-height: 58vh; overflow-y: auto;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius); box-shadow: var(--wb-shadow, 0 10px 28px rgba(0,0,0,.42));
    padding: 8px 10px 10px;
}
.peacock-workbench .wb-ep-s3pop .wb-ep-s3-head {
    display: flex; align-items: baseline; gap: 7px;
    position: sticky; top: -8px; z-index: 1;
    margin: -8px -10px 6px; padding: 8px 10px 6px;
    background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ep-s3pop .wb-ep-s3-sub { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-ep-s3-x {
    flex: 0 0 auto; border: 0; background: transparent; color: var(--wb-fg-dim);
    cursor: pointer; padding: 2px 4px; line-height: 1; border-radius: var(--wb-radius-sm);
}
.peacock-workbench .wb-ep-s3-x:hover { color: var(--wb-fg); background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-s3-none {
    color: var(--wb-fg-dim); font-size: calc(11.5px * var(--wb-font-scale, 1)); padding: 6px 0 2px;
}
/* R2026-211 - `.wb-ep-flag` (the amber "no symbol" row badge) removed with its markup. */

/* ---- entity table ---- */
.peacock-workbench .wb-ep-entwrap {
    max-height: 210px; overflow: auto;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
}
/* R2026-75 - `table-layout: fixed` so the ENTITIES table can never grow wider than the docked panel.
   With auto layout the mono Id + Part text pushed the table past the panel edge and the Curve column
   (added below) rendered off-screen: present in the DOM, invisible to the user. */
.peacock-workbench .wb-ep-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ep-tbl th {
    position: sticky; top: 0; z-index: 1; text-align: left;
    background: var(--wb-panel-2); color: var(--wb-fg-muted);
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: 6px 7px; border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-ep-tbl td { padding: 5px 7px; border-bottom: 1px solid var(--wb-divider); }
.peacock-workbench .wb-ep-tbl tbody tr { cursor: pointer; transition: background var(--wb-t); }
.peacock-workbench .wb-ep-tbl tbody tr:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-tbl tbody tr.is-sel { background: var(--wb-accent-soft); }
.peacock-workbench .wb-ep-mono { font-family: var(--wb-mono); font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); }
.peacock-workbench .wb-ep-part { color: var(--wb-fg-dim); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* R2026-75 - Curve column in the ENTITIES table. A *DEFINE_CURVE row plots its own curve; any other
   row plots the curve it REFERENCES (schema link:'DEFINE_CURVE'), marked .is-ref. Click opens Newton. */
/* fixed layout => these widths are the contract; Id/Part take what is left and ellipsise */
.peacock-workbench .wb-ep-tbl th:first-child,
.peacock-workbench .wb-ep-tbl td:first-child { width: 26px; }
/* Nodes is column 3 only while it is present; `.no-nodes` drops the rule so Id/Part reclaim the width */
.peacock-workbench .wb-ep-tbl:not(.no-nodes) th:nth-child(3),
.peacock-workbench .wb-ep-tbl:not(.no-nodes) td:nth-child(3) { width: 46px; }
/* R2026-217 - 46px is the width of a real node PAIR (`181 · 183`). When the column has fallen back to
   `sub` it holds a one or two digit include ordinal, and the difference belongs to Id and Part. */
.peacock-workbench .wb-ep-tbl.sub-ordinal th:nth-child(3),
.peacock-workbench .wb-ep-tbl.sub-ordinal td:nth-child(3) { width: 28px; }
.peacock-workbench .wb-ep-mono,
.peacock-workbench .wb-ep-part { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-ep-curve { width: 64px; padding-right: 4px; }
.peacock-workbench .wb-ep-spark {
    display: inline-flex; align-items: center; width: 58px; height: 18px;
    cursor: pointer; opacity: .8; border-radius: var(--wb-radius-sm);
    transition: opacity .14s, background .14s;
}
.peacock-workbench .wb-ep-spark:hover { opacity: 1; background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-spark svg { display: block; width: 100%; height: 100%; }
/* a REFERENCED curve is one indirection away from this row - tinted so it reads differently from a
   Define > Curve row, which IS the curve */
.peacock-workbench .wb-ep-spark.is-ref { opacity: .65; }
.peacock-workbench .wb-ep-spark.is-ref:hover { opacity: 1; }

/* R2026-217 - a card can name MORE THAN ONE curve, and each gets its OWN COLUMN headed with the deck
   field that names it (a retractor -> `LLCID` and `ULCID`). A split column is deliberately NARROWER
   than the single one - measured on the sled, the table is 238px, so one 64px column leaves Id and
   Part 51px each and two 48px columns leave them 35px each.
   The stacked form below is the >2-field fallback only (see MAX_CURVE_COLS): past two columns Id and
   Part would have nothing left, so the field name goes back into the cell. */
.peacock-workbench .wb-ep-tbl th.wb-ep-curve.is-split,
.peacock-workbench .wb-ep-tbl td.wb-ep-curve.is-split { width: 44px; padding-left: 4px; padding-right: 2px; }
.peacock-workbench .wb-ep-tbl th.wb-ep-curve.is-split {
    font-family: var(--wb-mono); font-size: calc(9px * var(--wb-font-scale, 1)); letter-spacing: 0;
}
.peacock-workbench .wb-ep-curve.is-split .wb-ep-spark { width: 36px; }
.peacock-workbench .wb-ep-sparks { display: flex; flex-direction: column; gap: 1px; }
.peacock-workbench .wb-ep-sparkrow { display: flex; flex-direction: column; gap: 0; }
.peacock-workbench .wb-ep-sparkk {
    font-family: var(--wb-mono); font-size: calc(8.5px * var(--wb-font-scale, 1));
    line-height: 1.2; color: var(--wb-fg-muted); letter-spacing: .02em;
}
.peacock-workbench .wb-ep-sparkrow .wb-ep-spark { height: 16px; }

.peacock-workbench .wb-ep-entbar { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.peacock-workbench .wb-ep-sp { flex: 1; }
.peacock-workbench .wb-ep-pg { font-family: var(--wb-mono); font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); }

/* R2026-75 - PrePost-style Initial ▸ Stress ID range bins (`9449259 - 9449482`). */
.peacock-workbench .wb-ep-ranges { font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ep-range {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 7px; border-bottom: 1px solid var(--wb-divider); cursor: pointer;
}
.peacock-workbench .wb-ep-range:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-range-caret {
    width: 14px; text-align: center; color: var(--wb-fg-muted); flex: 0 0 auto;
}
.peacock-workbench .wb-ep-range input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.peacock-workbench .wb-ep-range-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-ep-range-ent {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 7px 4px 28px; border-bottom: 1px solid var(--wb-divider); cursor: pointer;
}
.peacock-workbench .wb-ep-range-ent:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-range-ent.is-sel { background: var(--wb-accent-soft); }
.peacock-workbench .wb-ep-range-ent input[type="checkbox"] { margin: 0; flex: 0 0 auto; }

.peacock-workbench .wb-ep-keyrow { display: flex; gap: 5px; margin-top: 8px; }

/** Added by shashank2104 on 07/27/2026 - R2026-58 - entity list filter row (search + All/Shown/Picked) **/
.peacock-workbench .wb-ep-filter { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.peacock-workbench .wb-ep-search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.peacock-workbench .wb-ep-searchico {
    position: absolute; left: 8px; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); pointer-events: none;
}
/* two classes on purpose — `.wb-ep-field` sets `padding` as a SHORTHAND further down this file and
   would otherwise win on source order, putting the text back under the magnifier */
.peacock-workbench .wb-ep-field.wb-ep-searchin { padding-left: 23px; padding-right: 22px; }
.peacock-workbench .wb-ep-searchin:disabled { opacity: .5; cursor: not-allowed; }
.peacock-workbench .wb-ep-searchx {
    position: absolute; right: 4px; width: 16px; height: 16px; padding: 0; border: 0;
    background: transparent; color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1)); cursor: pointer;
    border-radius: 3px; display: grid; place-items: center; transition: color var(--wb-t), background var(--wb-t);
}
.peacock-workbench .wb-ep-searchx:hover { color: var(--wb-fg); background: var(--wb-row-hover); }
.peacock-workbench .wb-ep-searchx[hidden] { display: none; }
.peacock-workbench .wb-ep-seg-show { flex: 0 0 auto; }
.peacock-workbench .wb-ep-seg button:disabled { opacity: .4; cursor: not-allowed; }
.peacock-workbench .wb-ep-seg button:disabled:hover { color: var(--wb-fg-dim); }

/* ---- inputs ---- */
.peacock-workbench .wb-ep-field,
.peacock-workbench .wb-ep-sel {
    flex: 1; min-width: 0; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 5px 8px; transition: border-color var(--wb-t), box-shadow var(--wb-t);
}
.peacock-workbench .wb-ep-field:focus,
.peacock-workbench .wb-ep-sel:focus {
    outline: 0; border-color: var(--wb-accent); box-shadow: 0 0 0 2px var(--wb-accent-soft);
}

.peacock-workbench .wb-ep-kv { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.peacock-workbench .wb-ep-kv:last-child { margin-bottom: 0; }
.peacock-workbench .wb-ep-k { width: 52px; flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); }

/* ---- Initial-stress fringe (R2026-75) ---- */
.peacock-workbench .wb-ep-fringe-tog {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg); cursor: pointer;
}
.peacock-workbench .wb-ep-fringe-tog input { margin: 0; cursor: pointer; }
/* Floating fringe legend — sits top-right OVER the 3D canvas (like the results-fringe legend), so it
   stays visible while the panel scrolls. Mounted in .peacock-canvas-container by EP._renderFringeLegend. */
.peacock-workbench .wb-ep-fringe-float {
    position: absolute; top: 12px; right: 52px; z-index: 6;
    pointer-events: none;
    padding: 8px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    color: #1a1a1a; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.2;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.peacock-workbench .wb-ep-ff-title { font-weight: 600; margin-bottom: 6px; white-space: nowrap; }
.peacock-workbench .wb-ep-ff-body { display: flex; gap: 6px; align-items: stretch; }
.peacock-workbench .wb-ep-ff-bar {
    display: flex; flex-direction: column; width: 16px; height: 120px;
    border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.peacock-workbench .wb-ep-ff-cell { flex: 1 1 auto; }
.peacock-workbench .wb-ep-ff-ticks {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peacock-workbench .wb-ep-ff-n { margin-top: 5px; font-size: calc(10px * var(--wb-font-scale, 1)); color: #555; }
.peacock-dark .wb-ep-fringe-float { background: rgba(28, 30, 34, 0.9); color: #f0f0f0; }
.peacock-dark .wb-ep-ff-n { color: #b8b8b8; }

/* R2026-137 — PedPro 2D contour fringe legend. Floats top-right OVER the 3D canvas (mirrors the
   Initial-Stress fringe float), mounted in .peacock-canvas-container by PedProContour._renderLegend. */
.peacock-workbench .pedpro-contour-legend {
    position: absolute; top: 12px; right: 52px; z-index: 6;
    pointer-events: none;
    padding: 8px 10px; border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    color: #1a1a1a; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.2;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.peacock-workbench .pedpro-cl-title { font-weight: 600; margin-bottom: 6px; white-space: nowrap; }
.peacock-workbench .pedpro-cl-body { display: flex; gap: 6px; align-items: stretch; }
.peacock-workbench .pedpro-cl-bar {
    display: flex; flex-direction: column; width: 16px; height: 120px;
    border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.peacock-workbench .pedpro-cl-cell { flex: 1 1 auto; }
.peacock-workbench .pedpro-cl-ticks {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.peacock-workbench .pedpro-cl-n { margin-top: 5px; font-size: calc(10px * var(--wb-font-scale, 1)); color: #555; }
.peacock-dark .pedpro-contour-legend { background: rgba(28, 30, 34, 0.9); color: #f0f0f0; }
.peacock-dark .pedpro-cl-n { color: #b8b8b8; }

/* ---- segmented controls ---- */
.peacock-workbench .wb-ep-seg {
    display: inline-flex; gap: 2px; padding: 2px;
    background: var(--wb-panel-2); border-radius: var(--wb-radius-sm);
}
.peacock-workbench .wb-ep-seg button {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim);
    padding: 4px 9px; border-radius: 3px; transition: background var(--wb-t), color var(--wb-t);
}
.peacock-workbench .wb-ep-seg button:hover { color: var(--wb-fg); }
.peacock-workbench .wb-ep-seg button.is-on { background: var(--wb-accent); color: var(--wb-accent-fg); }

/* ---- buttons ---- */
.peacock-workbench .wb-ep-btn {
    appearance: none; font: inherit; font-size: calc(11.5px * var(--wb-font-scale, 1)); cursor: pointer;
    background: var(--wb-panel-2); color: var(--wb-fg-dim);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    padding: 5px 10px; white-space: nowrap;
    transition: background var(--wb-t), color var(--wb-t), border-color var(--wb-t);
}
.peacock-workbench .wb-ep-btn:hover:not(:disabled) { background: var(--wb-hover); color: var(--wb-fg); border-color: var(--wb-border-strong); }
.peacock-workbench .wb-ep-btn:disabled { opacity: .4; cursor: default; }
.peacock-workbench .wb-ep-btn-xs { padding: 3px 8px; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ep-btn-p { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ep-btn-p:hover:not(:disabled) { filter: brightness(1.08); color: var(--wb-accent-fg); }
.peacock-workbench .wb-ep-btn.is-armed { background: var(--wb-warn); border-color: var(--wb-warn); color: #1a1206; }
/** Added by shashank2104 on 07/27/2026 at 06:14 PM - R2026-58 - Wireframe others pressed state **/
.peacock-workbench .wb-ep-btn[data-ep-wireframe-others].is-on {
    background: var(--wb-accent);
    border-color: var(--wb-accent);
    color: var(--wb-accent-fg);
}

/* ---- R2026-211 (item 8) — the bottom Stop / Clear panel is GONE, the DONE footer is not ----
   Stop and Clear were picking controls and now live in the Pick in 3D popover. The STATUS line was
   promoted to a subtitle directly under the panel title, so the one line that says what just happened
   is at the top rather than at the bottom of a scroller — that stays.
   ⚠ **Done came back** (08/21/2026): it is the panel's terminal action and the thing that returns the
   model to Solid, which is not something to leave only on a 12 px header ×. It now sits alone, so the
   footer is one button tall instead of a bar of working controls. `.wb-ep-footbtns` stayed deleted. */
/* ⚠ NO AD-HOC FOOTER CHROME. This used to re-declare `padding` / `border-top` / `background`, which
   duplicated — and fought — the shared inspector contract `.wb-inspector-context .wb-panel-foot`
   (sticky, edge-bleed, top border, solid background). The row now contributes LAYOUT ONLY and inherits
   its look from that one rule, so it matches every other tool's footer instead of nearly matching it.
   `margin-top: auto` is what puts it on the panel's bottom edge when the body is short — the sticky
   rule alone only pins it once the content overflows, which is why Done floated mid-panel on an
   item with a one-row collection. */
.peacock-workbench .wb-ep-foot {
    display: flex; align-items: center; justify-content: flex-end;
    margin-top: auto;
}
/* R2026-58 — the one-line explainer under the Pick mode switch. */
.peacock-workbench .wb-ep-hint {
    margin: 2px 0 8px; font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-ep-hint.is-armed { color: var(--wb-warn); font-weight: 600; }

/** Added by shashank2104 on 07/27/2026 at 11:40 PM - R2026-58 - simple section placeholders **/
.peacock-workbench .wb-ep-ph {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.45; color: var(--wb-fg-muted); font-style: italic;
    padding: 6px 2px;
}
.peacock-workbench .wb-ep-ph[hidden],
.peacock-workbench [data-ep-ent-body][hidden],
.peacock-workbench [data-ep-pick-body][hidden],
.peacock-workbench [data-ep-sel-body][hidden] { display: none !important; }

/* REMOVED by shashank2104 on 08/21/2026 - R2026-211 (item 10) - the `.wb-ep-conn*` block (the inline
   Connections card). The surface is gone from the panel; `entity-display-connections.js` and the Part
   Connections dock keep their own styles elsewhere. */

/* =====================================================================================
   R2026-211 — Display Entity refurbish. Added by shashank2104 on 08/21/2026.
   Three new surfaces, all scoped under `.peacock-workbench` and all on `--wb-*` tokens:
     · the Collection header's Pick in 3D popover      (item 6)
     · the per-row floating actions + Highlight menu   (items 9 + 13)
     · the floating zoom-revert chip over the canvas   (item 9)
   ===================================================================================== */

/* ---- item 6: the Pick in 3D popover ----
   Same shape as `.wb-ep-opts-drop` on purpose — one popover idiom in this panel, not two. It is
   RIGHT-anchored because its toggle sits at the right edge of the Collection label row, and the
   panel is only ~260px wide, so a left anchor would run it off the edge. */
.peacock-workbench .wb-ep-pick-wrap { position: relative; flex: 0 0 auto; margin-left: auto; }
.peacock-workbench [data-ep-pick-toggle].is-on {
    background: var(--wb-accent-soft, rgba(64, 140, 255, .18));
    border-color: var(--wb-accent);
    color: var(--wb-fg);
}
.peacock-workbench .wb-ep-pick-drop {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
    /* ⚠ THE POPOVER LIVES INSIDE `.wb-ep-lbl`, WHICH IS `text-transform: uppercase` + `letter-spacing`
       + 10px/600 — the section-heading style. Without resetting those, every sentence inside it renders
       as spaced small-caps: measured live, the hint read `CLICK AN ENTITY ON THE MODEL. ESC STOPS.`
       The Options dropdown is unaffected because item 2 moved it into `.wb-ep-head`, whose title is not
       a heading style — so this reset is scoped here rather than shared. */
    text-transform: none; letter-spacing: normal;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 400; color: var(--wb-fg-dim);
    /* fits INSIDE the ~259px docked panel rather than hanging over the canvas (measured 268 vs 259) */
    min-width: 216px; max-width: 244px;
    padding: 10px 12px;
    background: var(--wb-panel, #1e2128);
    border: 1px solid var(--wb-border-strong, var(--wb-border));
    border-radius: var(--wb-radius-sm, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.peacock-workbench .wb-ep-pick-drop .wb-ep-kv { margin-bottom: 8px; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-hint { text-transform: none; font-style: normal; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-ph { text-transform: none; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-k { min-width: 62px; flex: 1 1 auto; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-keyrow { margin: 8px 0; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-ph { padding: 4px 0; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-acts { display: block; }
.peacock-workbench .wb-ep-pick-drop .wb-ep-actbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.peacock-workbench .wb-ep-pick-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--wb-divider);
}
/* `.wb-ep-kv { display:flex }` beats the HTML hidden attribute — the same trap the gated Options rows
   documented on 08/03. Bootstrap's `.hidden` is what the JS toggles, so it has to win here too. */
.peacock-workbench .wb-ep-pick-drop.hidden,
.peacock-workbench .wb-ep-pick-drop .wb-ep-kv.hidden,
.peacock-workbench .wb-ep-filter.hidden { display: none !important; }

/* ---- items 9 + 13: the per-row floating actions ----
   ⭐ The host cell is ZERO WIDTH. `.wb-ep-tbl` is `table-layout: fixed`, so a real column would take
   its width from the Id and Part cells — the two the user actually reads — on a 260px panel. Instead
   the cell is a positioning context and the buttons float LEFTWARDS over the row's right edge, only
   while the row is hovered, so nothing is covered at rest. */
.peacock-workbench .wb-ep-tbl th.wb-ep-actcell,
.peacock-workbench .wb-ep-tbl td.wb-ep-actcell { width: 0; padding: 0; position: relative; overflow: visible; }
.peacock-workbench .wb-ep-rowacts {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    display: none; align-items: center; gap: 2px;
    padding: 2px 3px; border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .5);
}
/* ⭐⭐ R2026-217 - PARK IT CLEAR OF THE CURVE COLUMN. The strip is ~74px wide and floats over the last
   74px of the row, which was fine while the rightmost thing was the Part TEXT. A sparkline is a CONTROL
   — it opens the Newton plot — so the strip sat on top of the one thing the user was reaching for and
   the curve could not be clicked at all while the row was hovered, which is the only time you can click
   it. Offset by the curve column(s)' own width (64px single, 2 x 44px split) so the two never overlap;
   it goes back to covering Part, which is text and still readable the moment the pointer leaves. */
.peacock-workbench .wb-ep-tbl.has-curve .wb-ep-rowacts { right: 66px; }
.peacock-workbench .wb-ep-tbl.has-curve-split .wb-ep-rowacts { right: 90px; }
/* R2026-265 - the Response column is the same case one column further right: its sparkline opens the
   Newton plot, so the strip has to clear it too. The offsets ADD, because a kind can carry both (a
   retractor names two load curves AND records a belt force). */
.peacock-workbench .wb-ep-tbl.has-resp .wb-ep-rowacts { right: 62px; }
.peacock-workbench .wb-ep-tbl.has-resp.has-curve .wb-ep-rowacts { right: 126px; }
.peacock-workbench .wb-ep-tbl.has-resp.has-curve-split .wb-ep-rowacts { right: 150px; }
/* the disabled Plot button — drawn, greyed, and carrying its reason as a title */
.peacock-workbench .wb-ep-ra.is-off { opacity: .38; cursor: not-allowed; }
.peacock-workbench .wb-ep-ra.is-off:hover { background: transparent; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ep-tbl th.wb-ep-resp-h,
.peacock-workbench .wb-ep-tbl td.wb-ep-respcell { width: 60px; text-align: center; padding: 1px 2px; }
/* ⚠ HOVER ONLY — `.is-sel` was in this list and that is why the strip "always stayed": a picked or
   clicked row keeps `is-sel`, and after a box pick EVERY hit row has it, so the buttons sat parked over
   the Part column of every selected row. The ticket asks for hover-to-show; a selected row is not a
   hovered row. */
.peacock-workbench .wb-ep-tbl tbody tr:hover .wb-ep-rowacts,
.peacock-workbench .wb-ep-range-ent:hover .wb-ep-rowacts { display: flex; }
/* the range-bin list is divs, not a table — same strip, positioned against the row itself */
.peacock-workbench .wb-ep-range-ent { position: relative; }
.peacock-workbench .wb-ep-ra {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0;
    background: transparent; border: 0; border-radius: var(--wb-radius-sm, 4px);
    color: var(--wb-fg-muted); cursor: pointer;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    transition: background var(--wb-t), color var(--wb-t);
}
.peacock-workbench .wb-ep-ra:hover { background: var(--wb-hover); color: var(--wb-accent); }

/* ---- item 13: the Highlight menu ---- */
.peacock-workbench .wb-ep-hlmenu {
    position: absolute; z-index: 60; min-width: 178px;
    padding: 4px; display: flex; flex-direction: column;
    background: var(--wb-panel, #1e2128);
    border: 1px solid var(--wb-border-strong, var(--wb-border));
    border-radius: var(--wb-radius-sm, 4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.peacock-workbench .wb-ep-hlitem {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; text-align: left;
    background: transparent; border: 0; border-radius: var(--wb-radius-sm, 4px);
    color: var(--wb-fg-dim); cursor: pointer;
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background var(--wb-t), color var(--wb-t);
}
.peacock-workbench .wb-ep-hlitem:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-ep-hlitem i { width: 12px; text-align: center; color: var(--wb-fg-muted); }
.peacock-workbench .wb-ep-hlitem:hover i { color: var(--wb-accent); }
/* the stated reason when a deck cannot resolve node coordinates (R2026-211 item 13) */
.peacock-workbench .wb-ep-hlnote {
    padding: 6px 8px; max-width: 220px;
    color: var(--wb-fg-muted); font-style: italic; line-height: 1.4;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
}

/* ---- item 9: the Zoom to undo ----
   Was a floating chip over the canvas; it repeated what the toast already said and covered the model
   it had just framed. It is now a plain button in the Collection header, left of Pick in 3D, hidden
   unless a jump is outstanding. `[hidden]` needs the !important because the header is a flex row. */
.peacock-workbench .wb-ep-revert-btn[hidden] { display: none !important; }
.peacock-workbench .wb-ep-revert-btn {
    flex: 0 0 auto; margin-left: auto;
    border-color: var(--wb-accent); color: var(--wb-accent);
}
.peacock-workbench .wb-ep-revert-btn:hover:not(:disabled) {
    background: var(--wb-accent-soft, rgba(64, 140, 255, .18));
    border-color: var(--wb-accent); color: var(--wb-fg);
}

/* ---- R2026-58 Projects home (index_2.html) ---- */
/** Added by shashank2104 on 07/27/2026 at 02:44 PM - R2026-58 - projects database page **/
.wb-projects-home-page,
.wb-projects-home-page body { height: 100%; margin: 0; background: var(--d3v-bg-app, #f4f6f8); }
.wb-projects-home {
    height: 100%; min-height: 100vh;
    display: flex; flex-direction: column;
    font-family: inherit; color: var(--d3v-text-primary, #1c2430);
}
.wb-ph-shell {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 24px 28px 40px;
}
.wb-ph-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 18px;
}
.wb-ph-brand { display: flex; align-items: center; gap: 14px; }
.wb-ph-logo { width: 40px; height: 40px; }
.wb-ph-brand h1 { margin: 0; font-size: calc(22px * var(--wb-font-scale, 1)); font-weight: 600; }
.wb-ph-sub { margin: 2px 0 0; font-size: calc(13px * var(--wb-font-scale, 1)); color: var(--d3v-text-secondary, #657083); }
.wb-ph-actions { display: flex; gap: 8px; align-items: center; }
.wb-ph-toolbar {
    display: flex; gap: 10px; align-items: center; margin-bottom: 12px;
}
.wb-ph-search-wrap {
    position: relative; flex: 1; max-width: 420px;
}
.wb-ph-search-wrap i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--d3v-text-muted, #8a94a6); pointer-events: none;
}
.wb-ph-search-wrap input { padding-left: 30px; }
.wb-ph-select { width: 180px; }
.wb-ph-table-wrap {
    flex: 1; min-height: 0; overflow: auto;
    background: var(--d3v-bg-surface, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e6ee);
    border-radius: 8px;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,.04));
}
.wb-ph-table { margin: 0; width: 100%; }
.wb-ph-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--d3v-bg-subtle, #f7f8fa);
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e6ee);
    font-size: calc(12px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .03em;
    color: var(--d3v-text-secondary, #657083); font-weight: 600;
}
.wb-ph-row { cursor: pointer; }
.wb-ph-row:hover { background: var(--d3v-bg-hover, #f0f4fa); }
.wb-ph-c-name { font-weight: 500; }
.wb-ph-c-name i { margin-right: 6px; color: var(--d3v-accent-primary, #2f6fed); }
.wb-ph-c-actions { white-space: nowrap; text-align: right; width: 160px; }
.wb-ph-c-actions .btn { margin-left: 4px; }
.wb-ph-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: calc(12px * var(--wb-font-scale, 1)); padding: 2px 8px; border-radius: 999px;
    background: var(--d3v-bg-subtle, #eef1f6); color: var(--d3v-text-secondary, #657083);
}
.wb-ph-chip-warn { background: #fff4e5; color: #9a6700; }
.wb-ph-loading, .wb-ph-empty {
    text-align: center; padding: 48px 16px; color: var(--d3v-text-secondary, #657083);
}

/* ─── Canvas background gradient (R2026-58, 07/28/2026) ──────────────────────
   Added by shashank2104. WebGL clears to ONE colour, so a gradient backdrop cannot be a
   scene.clearColor. A gradient theme instead clears the canvas to fully TRANSPARENT
   (PeacockViewEditor._applySceneBackdrop) and the ramp is painted here, behind it.

   THE STOPS LIVE IN THESE TWO CUSTOM PROPERTIES AND NOWHERE ELSE. The JS reads them back via
   getComputedStyle for the PNG export, so tuning the gradient is a one-line change here and the
   exported image cannot drift from what is on screen. Adding a second gradient = one more block
   like this plus one SCENE_GRADIENTS entry.

   Slate: NOT eyeballed. These are LS-PrePost's own `background_style = fade` stops, read from
   ~/Documents/LSTC/lsppconf: sky_color 0.950,0.950,0.950 (#f2f2f2, top) and ground_color
   0.313,0.313,0.509 (#50507f, bottom). Confirmed against the reference PNG: the bottom row samples
   (0.314,0.314,0.510) and the linear ramp extrapolated to the top of the GL viewport gives 0.952.

   TARGET IS .peacock-viewer (the view's own root — the theme class lands on it), because measuring
   the ancestor chain from the canvas showed TWO opaque white painters between the canvas and any
   outer container: `.peacock-editor-wrapper` (1359x677, covering the canvas area) and
   `.peacock-viewer` itself (1359x746, the extra ~70px reading as a white band above the model).
   Painting any ancestor above those is invisible, and painting `.peacock-canvas-wrapper` leaves the
   band. So: ramp on the root, and clear the one descendant that would cover it. */
.peacock-workbench .peacock-viewer.peacock-gradient,
.peacock-viewer.peacock-gradient {
    background: linear-gradient(180deg, var(--pk-bg-grad-from) 0%, var(--pk-bg-grad-to) 100%);
}

/* The two descendants that would otherwise paint over the ramp. `.peacock-editor-wrapper` covers the
   canvas area; `.peacock-controller-wrapper` is the 70px `div.d3view-plugin-header`, which is the white
   band that shows ABOVE the model — it is empty in the workbench shell but still occupies its height.
   Both were found by measuring computed backgrounds, not by reading the templates: the header is a
   SIBLING of the canvas, so walking up the ancestor chain from the canvas never reveals it. */
.peacock-workbench .peacock-viewer.peacock-gradient .peacock-editor-wrapper,
.peacock-viewer.peacock-gradient .peacock-editor-wrapper {
    background: transparent;
}

/* !important is REQUIRED here, not laziness. d3view.min.css ships
   `.peacock-manager .peacock-wrapper-container .peacock-controller-wrapper { background-color:#fff
   !important }`, and an !important declaration beats any specificity, so the only way to clear it from
   a plugin stylesheet is to match it. Scoped to the gradient theme, so every other background is
   untouched. (Confirmed by enumerating document.styleSheets live — the first attempt without
   !important parsed fine and simply lost the cascade.) */
.peacock-workbench .peacock-viewer.peacock-gradient .peacock-controller-wrapper,
.peacock-viewer.peacock-gradient .peacock-controller-wrapper {
    background-color: transparent !important;
}

.peacock-workbench .peacock-viewer.peacock-bg-slate-gradient,
.peacock-viewer.peacock-bg-slate-gradient {
    --pk-bg-grad-from: #f2f2f2;   /* lsppconf sky_color    0.950, 0.950, 0.950 */
    --pk-bg-grad-to:   #50507f;   /* lsppconf ground_color 0.313, 0.313, 0.509 */
}

/* Added by shashank2104 on 07/28/2026 at 02:10 PM - R2026-74 - Dummy Articulation (Selection panel) */
.peacock-workbench .me-dummy-panel .me-dummy-tree {
    border: 1px solid var(--wb-border, #d0d5dd);
    border-radius: 8px;
    background: var(--wb-panel, #fff);
    padding: 4px 0;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    max-height: 200px;
    overflow: auto;
}
.peacock-workbench .me-dummy-panel .me-dummy-tree .n {
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.peacock-workbench .me-dummy-panel .me-dummy-tree .n.on {
    background: rgba(44, 92, 197, 0.12);
    color: var(--wb-accent, #2c5cc5);
    font-weight: 600;
}
.peacock-workbench .me-dummy-panel .me-dummy-xyz {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.peacock-workbench .me-dummy-panel .me-dummy-xyz .me-dummy-f {
    flex: 1;
}
.peacock-workbench .me-dummy-panel .me-dummy-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 2px;
    font-size: calc(11px * var(--wb-font-scale, 1));
}
.peacock-workbench .me-dummy-panel .me-dummy-foot {
    display: flex;
    gap: 6px;
    margin-top: 12px;
}
.peacock-workbench .me-dummy-panel .me-dummy-foot .me-btn {
    flex: 1;
}

/* ============================================================================
   Added by shashank2104 on 07/28/2026 - R2026-58 - Saved Projects panel in the
   empty-state landing (workbench-only). Turns the centered drop-files card into
   a two-column panel: drop/import on the left, saved projects on the right.
   Injected by PeacockManagerView.mountKickstartProjects(); peacock.v3's shared
   kickstart template is untouched. Reuses the card's inherited --pk-* tokens.
   ============================================================================ */
.peacock-workbench .peacock-kickstart.pk-has-projects {
    width: 860px;
    max-width: 96%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    text-align: left;
    padding: 26px 26px 22px;
}
.peacock-workbench .peacock-kickstart.pk-has-projects > .pk-view {
    flex: 1 1 46%;
    min-width: 0;
    text-align: center;
}
.peacock-workbench .peacock-kickstart.pk-has-projects .pk-projects {
    flex: 1 1 54%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 22px;
    border-left: 1px solid var(--pk-edge);
}
.peacock-workbench .pk-projects .pk-proj-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.peacock-workbench .pk-projects .pk-proj-title {
    font-size: calc(13px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--pk-text-hi);
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.peacock-workbench .pk-projects .pk-proj-title i { color: var(--pk-blue-bright); font-size: calc(12px * var(--wb-font-scale, 1)); }
.peacock-workbench .pk-projects .pk-proj-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(11px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--pk-text-dim);
    background: rgba(148, 163, 184, .14);
    border-radius: 9px;
}
.peacock-workbench .pk-projects .pk-proj-refresh {
    margin-left: auto;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--pk-edge);
    border-radius: 7px;
    color: var(--pk-text-dim);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.peacock-workbench .pk-projects .pk-proj-refresh:hover {
    color: var(--pk-text-hi);
    border-color: rgba(96, 165, 250, .5);
    background: rgba(96, 165, 250, .08);
}
.peacock-workbench .pk-projects .pk-proj-searchbox {
    position: relative;
    display: flex;
    align-items: center;
}
.peacock-workbench .pk-projects .pk-proj-searchbox i {
    position: absolute;
    left: 11px;
    color: var(--pk-text-faint);
    font-size: calc(12px * var(--wb-font-scale, 1));
    pointer-events: none;
}
.peacock-workbench .pk-projects .pk-proj-search {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 30px;
    background: var(--pk-canvas-0);
    color: var(--pk-text);
    border: 1px solid var(--pk-edge);
    border-radius: 9px;
    font-size: calc(12px * var(--wb-font-scale, 1));
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.peacock-workbench .pk-projects .pk-proj-search::placeholder { color: var(--pk-text-faint); }
.peacock-workbench .pk-projects .pk-proj-search:focus {
    border-color: rgba(96, 165, 250, .55);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .15);
}
.peacock-workbench .peacock-kickstart .pk-proj-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: -2px -4px -2px 0;
    padding: 2px 4px 2px 0;
}
.peacock-workbench .peacock-kickstart .pk-proj-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    text-align: left;
    background: rgba(148, 163, 184, .05);
    border: 1px solid var(--pk-edge);
    border-radius: 10px;
    color: var(--pk-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.peacock-workbench .peacock-kickstart .pk-proj-item:hover {
    background: rgba(96, 165, 250, .10);
    border-color: rgba(96, 165, 250, .45);
}
/** Added by shashank2104 on 08/15/2026 - R0-4032 - open-in-progress feedback. The clicked row keeps
 *  full contrast (it is the one thing the user is waiting on) while the rest of the list dims and
 *  goes inert, so a second click cannot start a second open. **/
/** `:not(.is-busy)` is load-bearing, not tidiness — without it this rule out-specifies the one below
 *  and dims the very row the user is waiting on along with the rest. **/
.peacock-workbench .peacock-kickstart .pk-proj-list.is-busy .pk-proj-item:not(.is-busy) {
    pointer-events: none;
    opacity: .5;
}
.peacock-workbench .peacock-kickstart .pk-proj-list.is-busy .pk-proj-item.is-busy {
    cursor: progress;
    opacity: 1;
    background: rgba(96, 165, 250, .10);
    border-color: rgba(96, 165, 250, .45);
}
.peacock-workbench .peacock-kickstart .pk-proj-item.is-busy .pk-proj-ic { color: var(--pk-blue-bright); }
.peacock-workbench .peacock-kickstart .pk-proj-ic {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /** Added by shashank2104 on 08/21/2026 at 11:01 PM - OPAQUE well. The old
     *  rgba(96,165,250,.14) sat on the dark viewport (card glass is translucent), so on 3092
     *  these 30px tiles read as solid black "thumbnails" instead of cube icons. **/
    background: var(--d3v-bg-tertiary, #dbeafe);
    color: var(--d3v-accent, #2563eb);
    font-size: calc(13px * var(--wb-font-scale, 1));
}
.peacock-workbench .peacock-kickstart .pk-proj-ic i {
    color: var(--d3v-accent, #2563eb);
}
.peacock-workbench .peacock-kickstart .pk-proj-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.peacock-workbench .peacock-kickstart .pk-proj-name {
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--pk-text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.peacock-workbench .peacock-kickstart .pk-proj-sub {
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--pk-text-dim);
    display: flex;
    align-items: center;
    gap: 7px;
}
.peacock-workbench .peacock-kickstart .pk-proj-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 7px;
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 600;
}
.peacock-workbench .peacock-kickstart .pk-proj-chip i { font-size: calc(9px * var(--wb-font-scale, 1)); }
.peacock-workbench .peacock-kickstart .pk-proj-chip-up { background: rgba(52, 211, 153, .14); color: #34d399; }
.peacock-workbench .peacock-kickstart .pk-proj-chip-sim { background: rgba(96, 165, 250, .14); color: var(--pk-blue-bright); }
.peacock-workbench .peacock-kickstart .pk-proj-chip-orphan { background: rgba(245, 158, 11, .14); color: #f59e0b; }
.peacock-workbench .peacock-kickstart .pk-proj-loading,
.peacock-workbench .peacock-kickstart .pk-proj-empty {
    padding: 20px 8px;
    text-align: center;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--pk-text-dim);
}
@media (max-width: 720px) {
    .peacock-workbench .peacock-kickstart.pk-has-projects {
        flex-direction: column;
        width: 430px;
    }
    .peacock-workbench .peacock-kickstart.pk-has-projects .pk-projects {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--pk-edge);
        padding-top: 16px;
    }
}

/* Added by shashank2104 on 07/28/2026 - R2026-58 - The row rules above are keyed on
   `.peacock-kickstart .pk-proj-*` rather than `.pk-projects .pk-proj-*` because the rows are now
   rendered into whichever Saved Projects panel the kickstart template provides (see
   mountKickstartProjects) - scoping them to our own injected panel left the adopted one unstyled.
   The panel CHROME (head / refresh / searchbox) stays under `.pk-projects`: those elements only
   exist in the panel we build ourselves.

   Below: the same for the SAMPLE rows. peacock.v3 owns `.peacock-kickstart .pk-sample-item` for its
   own `.pk-samples-mount` pane, so these are scoped to `[data-pk-samples-list]` - the hook that only
   a template shipping its OWN sample pane has. That keeps the peacock.v3-styled path byte-identical
   and dresses only the pane peacock.v3's stylesheet knows nothing about. */
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-samples {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    text-align: left;
    background: rgba(148, 163, 184, .05);
    border: 1px solid var(--pk-edge);
    border-radius: 10px;
    color: var(--pk-text);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-item:hover {
    background: rgba(96, 165, 250, .10);
    border-color: rgba(96, 165, 250, .45);
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-item.is-unsupported {
    opacity: .45;
    cursor: not-allowed;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-ico {
    flex: 0 0 auto;
    color: var(--pk-blue-bright);
    font-size: calc(13px * var(--wb-font-scale, 1));
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-name {
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--pk-text-hi);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-file {
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--pk-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-sample-kind {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--pk-text-dim);
    background: rgba(148, 163, 184, .14);
    border-radius: 9px;
}
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-samples-msg,
.peacock-workbench .peacock-kickstart [data-pk-samples-list] .pk-samples-nomatch {
    padding: 20px 8px;
    text-align: center;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--pk-text-dim);
}

/** Added by shashank2104 on 08/03/2026 - R2026-58 - Premium AI-agent answer styling ported from fora.css (af9525d31e) and scoped to the peacock host so it ships with peacock.workbench instead of the shared fora plugin. **/
/* ============================================================================ *
 * Premium DEFAULT styling for AI AGENT prose answers (the markdown the LLM
 * emits into `.fora-print`). SCOPED TO THE PEACOCK HOST — every selector is
 * prefixed with `.peacock-workbench`, so this only styles the peacock agent
 * chat (workflow/solverai/modelassembler keep fora's plain baseline). Still
 * keyed on the agent chat root `.agent-fora` (set by AgenticView) inside the
 * peacock host. Self-contained LIGHT palette (the agent chat panel is white in
 * every host, independent of any app theme) that aliases the --d3v-* foundation
 * tokens where present and falls back to fixed light values. Each markdown
 * heading becomes an accented section band (blue -> teal -> amber), lists get
 * custom markers, `code` chips, `pre` panels, `blockquote` callouts, premium
 * tables (`:not(.pk-ai-tbl)` keeps peacock tool-result cards untouched) and
 * suggestion chips.
 * ============================================================================ */
.peacock-workbench .agent-fora .fora-print,
.peacock-workbench .agent-fora .pk-ai-answer-md {
    --fa-fg:        var(--d3v-text-primary, #1e293b);
    --fa-muted:     var(--d3v-text-muted, #64748b);
    --fa-surface:   var(--d3v-bg-primary, #ffffff);
    --fa-surface-2: var(--d3v-bg-secondary, #f1f5f9);
    --fa-border:    var(--d3v-border, #e2e8f0);
    --fa-row-hover: var(--d3v-bg-hover, #eef2f8);
    --fa-a1:        var(--d3v-accent, #2563eb);
    --fa-a2:        #0d9488;
    --fa-a3:        #b45309;
    color: var(--fa-fg);
    font-size: calc(13px * var(--wb-font-scale, 1));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.peacock-workbench .agent-fora .fora-print p { margin: 0 0 .6em; }
.peacock-workbench .agent-fora .fora-print strong { font-weight: 700; color: var(--fa-fg); }
.peacock-workbench .agent-fora .fora-print a {
    color: var(--fa-a1); text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, .35); transition: border-color .15s ease;
}
.peacock-workbench .agent-fora .fora-print a:hover { border-bottom-color: var(--fa-a1); }

/* section header bands (each markdown heading), accent cycles a1 -> a2 -> a3 */
.peacock-workbench .agent-fora .fora-print :is(h1, h2, h3, h4) {
    --fa-sec: var(--fa-a1);
    display: block; margin: 14px 0 9px; padding: 7px 12px 7px 13px;
    border-left: 3px solid var(--fa-sec); border-radius: 8px;
    background: color-mix(in srgb, var(--fa-sec) 9%, var(--fa-surface));
    color: var(--fa-fg); font-weight: 700; line-height: 1.3; letter-spacing: .005em;
}
.peacock-workbench .agent-fora .fora-print :is(h1, h2, h3, h4):first-child { margin-top: 2px; }
.peacock-workbench .agent-fora .fora-print h1 { font-size: calc(16px * var(--wb-font-scale, 1)); }
.peacock-workbench .agent-fora .fora-print h2 { font-size: calc(14.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .agent-fora .fora-print :is(h3, h4) { font-size: calc(13px * var(--wb-font-scale, 1)); }
.peacock-workbench .agent-fora .fora-print :is(h1, h2, h3, h4):nth-of-type(3n + 2) { --fa-sec: var(--fa-a2); }
.peacock-workbench .agent-fora .fora-print :is(h1, h2, h3, h4):nth-of-type(3n + 3) { --fa-sec: var(--fa-a3); }

/* bulleted list - accent dots */
.peacock-workbench .agent-fora .fora-print ul { list-style: none; margin: .35em 0 .7em; padding-left: 0; }
.peacock-workbench .agent-fora .fora-print ul > li { position: relative; padding-left: 20px; margin: .3em 0; }
.peacock-workbench .agent-fora .fora-print ul > li::before {
    content: ""; position: absolute; left: 5px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--fa-a1);
}
/* numbered list - accent counters */
.peacock-workbench .agent-fora .fora-print ol { list-style: none; counter-reset: fa; margin: .35em 0 .7em; padding-left: 0; }
.peacock-workbench .agent-fora .fora-print ol > li { position: relative; counter-increment: fa; padding-left: 26px; margin: .3em 0; }
.peacock-workbench .agent-fora .fora-print ol > li::before {
    content: counter(fa); position: absolute; left: 0; top: .02em;
    width: 18px; height: 18px; border-radius: 50%;
    background: color-mix(in srgb, var(--fa-a1) 16%, transparent); color: var(--fa-a1);
    font: 800 10.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center;
}
.peacock-workbench .agent-fora .fora-print li > ul,
.peacock-workbench .agent-fora .fora-print li > ol { margin: .2em 0 .35em; }

/* inline code chip */
.peacock-workbench .agent-fora .fora-print code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
    background: color-mix(in srgb, var(--fa-a1) 8%, var(--fa-surface-2)); color: var(--fa-a1);
    border: 1px solid var(--fa-border); border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
/* fenced code block */
.peacock-workbench .agent-fora .fora-print pre {
    background: var(--fa-surface-2); border: 1px solid var(--fa-border); border-radius: 10px;
    padding: 12px 14px; overflow-x: auto; margin: .5em 0 .7em;
}
.peacock-workbench .agent-fora .fora-print pre code {
    background: none; border: 0; padding: 0; white-space: pre;
    color: var(--fa-fg); font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.55;
}

/* blockquote -> callout / note */
.peacock-workbench .agent-fora .fora-print blockquote {
    margin: .5em 0; padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fa-a1) 22%, var(--fa-border));
    border-left: 3px solid var(--fa-a1); border-radius: 10px;
    background: color-mix(in srgb, var(--fa-a1) 7%, var(--fa-surface)); color: var(--fa-fg);
}
.peacock-workbench .agent-fora .fora-print blockquote p:last-child { margin-bottom: 0; }

/* markdown tables (NOT the peacock tool-result .pk-ai-tbl cards) */
.peacock-workbench .agent-fora .fora-print table:not(.pk-ai-tbl) {
    width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--wb-font-scale, 1));
    border: 1px solid var(--fa-border); border-radius: 10px; overflow: hidden;
    margin: .4em 0 .6em; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); background: var(--fa-surface);
}
.peacock-workbench .agent-fora .fora-print table:not(.pk-ai-tbl) thead th {
    background: var(--fa-surface-2); font: 800 9.5px/1.4 inherit; text-transform: uppercase;
    letter-spacing: .05em; color: var(--fa-muted); padding: 8px 12px;
    border-bottom: 1px solid var(--fa-border); text-align: left;
}
.peacock-workbench .agent-fora .fora-print table:not(.pk-ai-tbl) td {
    padding: 8px 12px; border-bottom: 1px solid var(--fa-border); color: var(--fa-fg); vertical-align: top;
}
.peacock-workbench .agent-fora .fora-print table:not(.pk-ai-tbl) tbody tr:last-child td { border-bottom: 0; }
.peacock-workbench .agent-fora .fora-print table:not(.pk-ai-tbl) tbody tr:hover td { background: var(--fa-row-hover); }

/* hr */
.peacock-workbench .agent-fora .fora-print hr { border: 0; border-top: 1px solid var(--fa-border); margin: 12px 0; }

/* suggestion chips (if the agent emits [data-fora-prompt] / .pk-ai-chip) */
.peacock-workbench .agent-fora .fora-print [data-fora-prompt],
.peacock-workbench .agent-fora .fora-print .pk-ai-chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--fa-a1) 8%, var(--fa-surface-2)); color: var(--fa-a1);
    border: 1px solid color-mix(in srgb, var(--fa-a1) 22%, var(--fa-border));
    transition: transform .16s ease, box-shadow .16s ease; margin: 3px 6px 3px 0;
}
.peacock-workbench .agent-fora .fora-print [data-fora-prompt]::before,
.peacock-workbench .agent-fora .fora-print .pk-ai-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7;
}
.peacock-workbench .agent-fora .fora-print [data-fora-prompt]:hover,
.peacock-workbench .agent-fora .fora-print .pk-ai-chip:hover {
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
}

/* prose note wrapper under a tool-result card */
.peacock-workbench .agent-fora .pk-ai-answer-md { margin-top: 10px; }
.peacock-workbench .agent-fora .pk-ai-answer-md > *:first-child { margin-top: 0; }
.peacock-workbench .agent-fora .fora-print :is(h1, h2, h3, h4, p, ul, ol, pre, blockquote, table):last-child { margin-bottom: 0; }

/* ── R2026-100 — model chooser + missing-include resolve form ──────────────────────────────────
   Added by shashank2104 on 08/03/2026.
   Both views mount on `.wb-open-modal-host`, which OpenModelView-style hosts stamp with
   data-wb-theme; the token block at the top of this file defines --wb-panel / --wb-fg /
   --wb-fg-muted / --wb-border / --wb-row-hover / --wb-accent there. Use THOSE names — an
   invented token silently falls through to the light --d3v-* globals and renders a white
   card with washed-out text inside the dark shell. */
.wb-open-modal-host .wb-km-modal,
.wb-open-modal-host .wb-ki-modal { width: 640px; }

.wb-open-modal-host .wb-km-body,
.wb-open-modal-host .wb-ki-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wb-open-modal-host .wb-km-sub,
.wb-open-modal-host .wb-ki-sub {
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    line-height: 1.5;
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-modal-host .wb-km-sub b,
.wb-open-modal-host .wb-ki-sub b { color: var(--wb-fg, #2c3e50); }
.wb-open-modal-host .wb-ki-sub code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    padding: 1px 5px;
    border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel-2, #f4f6f8);
    color: var(--wb-fg, #2c3e50);
}

.wb-open-modal-host .wb-km-readme {
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    line-height: 1.5;
    color: var(--wb-fg-muted, #7a8794);
    background: var(--wb-panel-2, #f4f6f8);
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px);
    padding: 10px 12px;
    max-height: 96px;
    overflow-y: auto;
}

/* R2026-269 — drop from the model list to every file in the archive. */
.wb-open-modal-host .wb-km-more { margin-top: -4px; }
.wb-open-modal-host .wb-km-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-accent, #2c5282);
    text-decoration: underline;
    cursor: pointer;
    transition: opacity var(--d3v-t-fast, 0.15s) ease;
}
.wb-open-modal-host .wb-km-link:hover { opacity: 0.75; }
.wb-open-modal-host .wb-km-link:focus-visible {
    outline: 2px solid var(--wb-accent, #2c5282);
    outline-offset: 2px;
}

/* R2026-269 — filter, for the archives that list hundreds of files. */
.wb-open-modal-host .wb-km-filter { display: flex; align-items: center; gap: 10px; }
.wb-open-modal-host .wb-km-filter input {
    flex: 1 1 auto;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel, #fff);
    color: var(--wb-fg, #2c3e50);
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wb-open-modal-host .wb-km-filter input:focus {
    outline: none;
    border-color: var(--wb-accent, #2c5282);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-accent, #2c5282) 18%, transparent);
}
.wb-open-modal-host .wb-km-filter-count {
    flex: 0 0 auto;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-modal-host .wb-km-hidden-sel {
    margin-top: -4px;
    padding: 8px 10px;
    border: 1px solid var(--wb-border, #e0e3e6);
    border-left: 3px solid var(--wb-accent, #2c5282);
    border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel-2, #f4f6f8);
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-modal-host .wb-km-hidden-sel b { color: var(--wb-fg, #2c3e50); }
.wb-open-modal-host .wb-km-empty {
    padding: 14px 4px;
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
}

/* ── chooser rows ── */
.wb-open-modal-host .wb-km-list { display: flex; flex-direction: column; gap: 6px; }
.wb-open-modal-host .wb-km-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: var(--wb-panel-2, #f4f6f8);
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px);
    color: var(--wb-fg, #2c3e50);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wb-open-modal-host .wb-km-row:hover { background: var(--wb-row-hover, #e8eef5); }
.wb-open-modal-host .wb-km-row:focus-visible {
    outline: 2px solid var(--wb-accent, #2c5282);
    outline-offset: 2px;
}
.wb-open-modal-host .wb-km-row.is-sel {
    border-color: var(--wb-accent, #2c5282);
    background: var(--wb-row-hover, #e8eef5);
}
.wb-open-modal-host .wb-km-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(13px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--wb-fg, #2c3e50);
}
/* R2026-269 — "Detected": which row the naming convention would have opened on its own. */
.wb-open-modal-host .wb-km-row-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border: 1px solid var(--wb-accent, #2c5282);
    border-radius: 999px;
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--wb-accent, #2c5282);
}
.wb-open-modal-host .wb-km-row-meta {
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-modal-host .wb-km-row-path {
    font-size: calc(11px * var(--wb-font-scale, 1));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--wb-fg-muted, #7a8794);
    opacity: 0.75;
    word-break: break-all;
}

/* ── include resolve form ── */
.wb-open-modal-host .wb-ki-actions { display: flex; align-items: center; gap: 8px; }
.wb-open-modal-host .wb-ki-count {
    margin-left: auto;
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
}
.wb-open-modal-host .wb-ki-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-panel-2, #f4f6f8);
    padding: 6px;
}
.wb-open-modal-host .wb-ki-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: var(--wb-radius-sm, 4px);
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg, #2c3e50);
    transition: background 0.15s ease;
}
.wb-open-modal-host .wb-ki-row:hover { background: var(--wb-row-hover, #e8eef5); }
.wb-open-modal-host .wb-ki-mark {
    flex: 0 0 14px;
    text-align: center;
    font-weight: 700;
    color: #d9534f;
}
.wb-open-modal-host .wb-ki-row.is-ok .wb-ki-mark { color: #2e9e5b; }
.wb-open-modal-host .wb-ki-name {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}
.wb-open-modal-host .wb-ki-size {
    flex: 0 0 auto;
    color: var(--wb-fg-muted, #7a8794);
}

/* ── shared footer ── */
.wb-open-modal-host .wb-km-foot,
.wb-open-modal-host .wb-ki-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel, #fbfcfd);
}
/* ── buttons ──
   Bare `.btn.btn-sm` inherits Bootstrap's light defaults, so inside the dark modal Cancel and
   "Add files…" rendered as washed-out pills that read as DISABLED next to the blue Open. Give the
   secondary buttons real theme-aware styling, and make a genuinely disabled button look it. */
.wb-open-modal-host .wb-km-foot .btn,
.wb-open-modal-host .wb-ki-foot .btn,
.wb-open-modal-host .wb-ki-actions .btn {
    padding: 6px 14px;
    font-size: calc(12.5px * var(--wb-font-scale, 1));
    font-weight: 500;
    border-radius: var(--wb-radius-sm, 4px);
    border: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel-2, #f4f6f8);
    color: var(--wb-fg, #2c3e50);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wb-open-modal-host .wb-km-foot .btn:hover,
.wb-open-modal-host .wb-ki-foot .btn:hover,
.wb-open-modal-host .wb-ki-actions .btn:hover {
    background: var(--wb-row-hover, #e8eef5);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-fg, #2c3e50);
}
.wb-open-modal-host .wb-km-foot .btn:focus-visible,
.wb-open-modal-host .wb-ki-foot .btn:focus-visible,
.wb-open-modal-host .wb-ki-actions .btn:focus-visible {
    outline: 2px solid var(--wb-accent, #2c5282);
    outline-offset: 2px;
}
.wb-open-modal-host .wb-km-foot .btn-primary,
.wb-open-modal-host .wb-ki-foot .btn-primary,
.wb-open-modal-host .wb-ki-actions .btn-primary {
    background: var(--wb-accent, #2c5282);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-accent-fg, #ffffff);
}
.wb-open-modal-host .wb-km-foot .btn-primary:hover,
.wb-open-modal-host .wb-ki-foot .btn-primary:hover,
.wb-open-modal-host .wb-ki-actions .btn-primary:hover {
    filter: brightness(1.12);
    color: var(--wb-accent-fg, #ffffff);
}
/* Open stays visibly inert until every include is accounted for — the attribute alone does not
   dim a .btn-primary, so the button read as clickable at 0-of-17. */
.wb-open-modal-host .wb-km-foot .btn[disabled],
.wb-open-modal-host .wb-ki-foot .btn[disabled],
.wb-open-modal-host .wb-ki-actions .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: none;
}
/* The per-row Browse is a quieter, smaller variant of the same. */
.wb-open-modal-host .wb-ki-row .btn {
    padding: 2px 10px;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    border-radius: var(--wb-radius-sm, 4px);
    border: 1px solid var(--wb-border, #e0e3e6);
    background: transparent;
    color: var(--wb-fg-muted, #7a8794);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wb-open-modal-host .wb-ki-row .btn:hover {
    background: var(--wb-panel-2, #f4f6f8);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-fg, #2c3e50);
}

/* ============================================================================
   Quality Checks (R2026-137 PACKET E, item 7) — Tools ▸ Quality Checks.
   Selection-panel tool driving the simulation_quality_check worker. Scoped
   under .peacock-workbench .wb-qc; obeys the pinned-footer contract via
   .wb-panel-foot; all colours/radii from --wb-* / --d3v-* tokens.
   ============================================================================ */
.peacock-workbench .wb-qc {
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg, #2c3e50);
}
.peacock-workbench .wb-qc .qc-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-qc .qc-ic {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--wb-accent, #2c5282);
    color: var(--wb-accent-fg, #fff);
}
.peacock-workbench .wb-qc .qc-head-txt { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-qc .qc-close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--wb-fg-muted, #8c8c8c);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.peacock-workbench .wb-qc .qc-close:hover {
    background: var(--wb-row-hover, #3a3a3a);
    color: var(--wb-fg, #d6d6d6);
    border-color: var(--wb-border, #161616);
}
.peacock-workbench .wb-qc .qc-t { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 700; }
.peacock-workbench .wb-qc .qc-s { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted, #7a8794); }
.peacock-workbench .wb-qc .qc-deck {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
    background: var(--wb-panel-2, #f4f6f8);
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peacock-workbench .wb-qc .qc-deck b { color: var(--wb-fg, #2c3e50); font-weight: 700; }
.peacock-workbench .wb-qc .qc-deck .qc-editbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: calc(9px * var(--wb-font-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wb-accent-fg, #fff);
    background: var(--wb-warn, #d97706);
    border-radius: 999px;
    padding: 2px 7px;
}
/* "Deck to check" source picker (R2026-137 — mirrors Submit to Cluster's source segments). A single
   source collapses to .qc-deck above; a real choice renders these segments. Scoped, --wb-* tokens only. */
.peacock-workbench .wb-qc .qc-srcfield {
    padding: 11px 14px;
    background: var(--wb-panel-2, #f4f6f8);
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-qc .qc-srclab {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
/* Segmented control — same language as the Section Plane / Sub-Model .sp-seg (joined segments,
   --wb-panel-2 fill, accent-filled when active). */
.peacock-workbench .wb-qc .qc-src-seg {
    display: inline-flex;
    width: 100%;
    /* Dark track so the segments read against the .qc-srcfield (both were --wb-panel-2 → invisible). */
    background: var(--wb-bg, #1d1d1d);
    border: 1px solid var(--wb-border, #161616);
    border-radius: 6px;
    overflow: hidden;
}
.peacock-workbench .wb-qc .qc-src {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    font-weight: 600;
    color: var(--wb-fg-muted, #8c8c8c);
    background: transparent;
    border: none;
    border-right: 1px solid var(--wb-border, #161616);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.peacock-workbench .wb-qc .qc-src:last-child { border-right: none; }
.peacock-workbench .wb-qc .qc-src > i { color: var(--wb-fg-muted, #7a8794); font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-qc .qc-src span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.peacock-workbench .wb-qc .qc-src:hover { background: var(--wb-row-hover, #eef1f4); }
.peacock-workbench .wb-qc .qc-src.is-active {
    color: var(--wb-accent-fg, #fff);
    background: var(--wb-accent, #2c5282);
}
.peacock-workbench .wb-qc .qc-src.is-active > i { color: var(--wb-accent-fg, #fff); }
.peacock-workbench .wb-qc .qc-src.is-edited.is-active { background: var(--wb-warn, #d97706); }
.peacock-workbench .wb-qc .qc-src.is-edited:not(.is-active),
.peacock-workbench .wb-qc .qc-src.is-edited:not(.is-active) > i { color: var(--wb-warn, #d97706); }
.peacock-workbench .wb-qc .qc-src-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.peacock-workbench .wb-qc .qc-src-desc b { color: var(--wb-fg, #2c3e50); font-weight: 700; }
.peacock-workbench .wb-qc .qc-src-desc.is-edited .fa { color: var(--wb-warn, #d97706); }
.peacock-workbench .wb-qc .qc-field {
    position: relative;
    padding: 11px 14px;
    border-bottom: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-qc .qc-flabel {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.peacock-workbench .wb-qc .qc-lab { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; }
.peacock-workbench .wb-qc .qc-info { color: var(--wb-fg-muted, #7a8794); font-size: calc(11px * var(--wb-font-scale, 1)); cursor: help; opacity: .75; }
.peacock-workbench .wb-qc .qc-fdesc {
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
    margin-bottom: 8px;
    line-height: 1.45;
}
/* ---- "Checks to run" multiselect ($.fn.multiselect modern INLINE panel) re-skinned to the dark
   workbench. The modern variant with >12 items renders an in-place searchable panel INSIDE the
   inspector (not a body-mounted popover), so every rule scopes cleanly under .peacock-workbench .wb-qc
   and no other multiselect on the page is affected. */
.peacock-workbench .wb-qc .qc-field .d3view-multiselect { width: 100% !important; }
/* The modern skin is entirely --msm-* token driven, so re-pointing those tokens to the workbench
   palette re-themes the panel, header, footer, search box, rows and chrome in ONE place. */
.peacock-workbench .wb-qc .d3view-multiselect.ms-modern {
    --msm-accent: var(--wb-accent, #4a7eb5);
    --msm-accent-soft: var(--wb-row-hover, #3a3a3a);
    --msm-bg: var(--wb-panel, #2e2e2e);
    --msm-bg-tertiary: var(--wb-panel-2, #383838);
    --msm-border: var(--wb-border, #161616);
    --msm-border-strong: var(--wb-border, #161616);
    --msm-text: var(--wb-fg, #d6d6d6);
    --msm-text-2: var(--wb-fg, #d6d6d6);
    --msm-text-muted: var(--wb-fg-muted, #8c8c8c);
    --msm-success: var(--wb-accent, #4a7eb5);
    --msm-shadow: none;
}
.peacock-workbench .wb-qc .ms-modern-panel { border-radius: 8px; overflow: hidden; }
/* multiselect.css marks the selected row !important, so match it to make selection read as accent. */
.peacock-workbench .wb-qc .d3view-multiselect.ms-modern .vlist .ui-selected.vrow,
.peacock-workbench .wb-qc .d3view-multiselect.ms-modern .vlist .ui-selecting.vrow {
    background: var(--wb-accent, #4a7eb5) !important;
    color: var(--wb-accent-fg, #fff) !important;
}
.peacock-workbench .wb-qc .ms-modern-panel .ui-resizable-handle { display: none; }
/* All / Clear links in the "Checks to run" label row (drive the multiselect's setValue). */
.peacock-workbench .wb-qc .qc-setrow { margin-left: auto; display: inline-flex; gap: 10px; }
.peacock-workbench .wb-qc .qc-setrow a {
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 700;
    color: var(--wb-accent, #4a7eb5);
    cursor: pointer;
}
.peacock-workbench .wb-qc .qc-setrow a:hover { text-decoration: underline; }
.peacock-workbench .wb-qc .qc-select {
    width: 100%;
    background: var(--wb-panel-2, #f4f6f8);
    color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: calc(12px * var(--wb-font-scale, 1));
    cursor: pointer;
}
.peacock-workbench .wb-qc .qc-ta {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    resize: vertical;
    min-height: 58px;
    background: var(--wb-panel-2, #f4f6f8);
    color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: 6px;
    padding: 8px 10px;
}
/* Footer — pinned by the .wb-panel-foot sticky contract. */
.peacock-workbench .wb-qc .qc-foot {
    background: var(--wb-panel, #fff);
    border-top: 1px solid var(--wb-border, #e0e3e6);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.peacock-workbench .wb-qc .qc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    white-space: nowrap;
    border: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel-2, #f4f6f8);
    color: var(--wb-fg, #2c3e50);
    border-radius: 6px;
    padding: 9px 10px;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.peacock-workbench .wb-qc .qc-btn:hover { border-color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-qc .qc-btn.is-primary {
    background: var(--wb-accent, #2c5282);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-accent-fg, #fff);
}
.peacock-workbench .wb-qc .qc-btn.is-ghost { background: transparent; }
.peacock-workbench .wb-qc .qc-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Results card */
.peacock-workbench .wb-qc .qc-result {
    padding: 12px 14px;
    border-top: 1px solid var(--wb-border, #e0e3e6);
    background: var(--wb-panel, #fff);
}
.peacock-workbench .wb-qc .qc-result.is-err .qc-rtitle .fa { color: var(--wb-danger, #c0392b); }
.peacock-workbench .wb-qc .qc-rtitle {
    font-size: calc(12px * var(--wb-font-scale, 1));
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.peacock-workbench .wb-qc .qc-rtitle .fa { color: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-qc .qc-verdict {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}
.peacock-workbench .wb-qc .qc-mri {
    flex: 0 0 96px;
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    background: var(--wb-panel-2, #f4f6f8);
}
.peacock-workbench .wb-qc .qc-mri-n { font-size: calc(26px * var(--wb-font-scale, 1)); font-weight: 800; line-height: 1; }
.peacock-workbench .wb-qc .qc-mri.is-go .qc-mri-n { color: var(--wb-ok, #16a34a); }
.peacock-workbench .wb-qc .qc-mri.is-nogo .qc-mri-n { color: var(--wb-danger, #c0392b); }
.peacock-workbench .wb-qc .qc-mri-l {
    font-size: calc(9px * var(--wb-font-scale, 1));
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wb-fg-muted, #7a8794);
    margin-top: 4px;
}
.peacock-workbench .wb-qc .qc-gate {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    border-radius: 8px;
    font-size: calc(15px * var(--wb-font-scale, 1));
    font-weight: 800;
    letter-spacing: .02em;
}
.peacock-workbench .wb-qc .qc-gate.is-go { background: rgba(22,163,74,.14); color: var(--wb-ok, #16a34a); }
.peacock-workbench .wb-qc .qc-gate.is-nogo { background: rgba(192,57,43,.14); color: var(--wb-danger, #c0392b); }
.peacock-workbench .wb-qc .qc-verd {
    font-size: calc(9.5px * var(--wb-font-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .8;
    margin-left: 2px;
}
.peacock-workbench .wb-qc .qc-sum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.peacock-workbench .wb-qc .qc-stat {
    border: 1px solid var(--wb-border, #e0e3e6);
    border-radius: 6px;
    padding: 7px 10px;
    background: var(--wb-panel-2, #f4f6f8);
}
.peacock-workbench .wb-qc .qc-stat .k {
    font-size: calc(9px * var(--wb-font-scale, 1));
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--wb-fg-muted, #7a8794);
}
.peacock-workbench .wb-qc .qc-stat .v { font-size: calc(14px * var(--wb-font-scale, 1)); font-weight: 800; margin-top: 2px; }
.peacock-workbench .wb-qc .qc-clean {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-ok, #16a34a);
    background: rgba(22,163,74,.10);
    border: 1px solid rgba(22,163,74,.35);
    border-radius: 6px;
    padding: 9px 11px;
}
.peacock-workbench .wb-qc .qc-find-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    font-weight: 700;
    color: var(--wb-warn, #d97706);
    margin-bottom: 8px;
}
.peacock-workbench .wb-qc .qc-find-row {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--wb-border, #e0e3e6);
}
.peacock-workbench .wb-qc .qc-sev {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: calc(8.5px * var(--wb-font-scale, 1));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--wb-accent-fg, #fff);
    background: var(--wb-fg-muted, #7a8794);
    border-radius: 999px;
    padding: 2px 7px;
    margin-top: 1px;
}
.peacock-workbench .wb-qc .qc-find-row.sev-critical .qc-sev,
.peacock-workbench .wb-qc .qc-find-row.sev-error .qc-sev { background: var(--wb-danger, #c0392b); }
.peacock-workbench .wb-qc .qc-find-row.sev-warning .qc-sev { background: var(--wb-warn, #d97706); }
.peacock-workbench .wb-qc .qc-find-row.sev-info .qc-sev { background: var(--wb-accent, #2c5282); }
.peacock-workbench .wb-qc .qc-find-body { flex: 1 1 auto; min-width: 0; }
.peacock-workbench .wb-qc .qc-find-t { font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg, #2c3e50); }
.peacock-workbench .wb-qc .qc-ent {
    font-size: calc(10px * var(--wb-font-scale, 1));
    font-weight: 700;
    color: var(--wb-fg-muted, #7a8794);
    margin-left: 4px;
}
.peacock-workbench .wb-qc .qc-find-d {
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #7a8794);
    margin-top: 2px;
    line-height: 1.45;
}

/* =====================================================================
 * Added by shashank2104 on 08/11/2026 - R2026-137 (Pedpro Packet B).
 *
 * Submit-to-Cluster now renders each worker with the real workflow worker
 * view (ConfigureWfWorker) INLINE inside .wb-sc-worker, plus a "Save as
 * draft" affordance and a drafts list modal (.wb-drafts-*). Append-only.
 * ===================================================================== */

/* The inline ConfigureWfWorker host inside a .wb-sc-fbreg-b card. The worker
   view brings its own (light) FormBuilder skin; here we only give it room to
   flow and stop the workflow-builder chrome from imposing a modal viewport. */
.peacock-workbench .wb-sc-worker { position: relative; min-height: 60px; width: 100%; }
.peacock-workbench .wb-sc-worker .wf-worker-config-view,
.peacock-workbench .wb-sc-worker .wf-worker-config-view .modal-body,
.peacock-workbench .wb-sc-worker .user-input-container {
    max-height: none; height: auto; overflow: visible; padding: 0; margin: 0;
}
/* Belt-and-braces: the worker view is not in a Bootstrap modal here, so any
   modal-footer / header buttons that slip through are hidden — execution is
   driven by the mode body's own Submit. */
.peacock-workbench .wb-sc-worker .modal-header,
.peacock-workbench .wb-sc-worker .modal-footer { display: none; }

/* nodeck empty-state action row */
.peacock-workbench .wb-sc-empty-actions {
    display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap;
}

/* draft affordances on the right of the source strip (the stepper owns the footer, so they live here) */
.peacock-workbench .wb-sc-strip-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.peacock-workbench .wb-sc-stripbtn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.peacock-workbench .wb-sc-stripbtn:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-sc-stripbtn > i { font-size: calc(11.5px * var(--wb-font-scale, 1)); }

/* ---- drafts list modal (mounted on the shell root, so --wb-* resolve) ---- */
.wb-drafts-modal-host { position: fixed; inset: 0; z-index: 41; }
.wb-drafts-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.wb-drafts-modal {
    position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
    width: 620px; max-width: 94vw; max-height: 74vh;
    display: flex; flex-direction: column;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    font-size: calc(12.5px * var(--wb-font-scale, 1)); overflow: hidden;
}
.wb-drafts-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--wb-border);
}
.wb-drafts-head h2 { margin: 0; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.wb-drafts-close { background: transparent; border: 0; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(14px * var(--wb-font-scale, 1)); padding: 4px 6px; }
.wb-drafts-tools { flex: 0 0 auto; padding: 12px 18px 6px; display: flex; align-items: center; gap: 12px; }
.wb-drafts-scopelab {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 500; color: var(--wb-fg-muted); margin-left: 6px;
    padding: 2px 8px; border-radius: 20px; background: var(--wb-panel-2); border: 1px solid var(--wb-border);
}
.wb-drafts-scope {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); cursor: pointer; white-space: nowrap;
}
.wb-drafts-scope input { margin: 0; }
.wb-drafts-search {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: 8px;
}
.wb-drafts-search > i { color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-drafts-search input { flex: 1; background: transparent; border: 0; outline: none; color: var(--wb-fg); font-size: calc(12.5px * var(--wb-font-scale, 1)); }
.wb-drafts-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 12px 12px; }
.wb-drafts-empty { text-align: center; color: var(--wb-fg-muted); padding: 40px 20px; }
.wb-drafts-empty > i { font-size: calc(26px * var(--wb-font-scale, 1)); opacity: 0.5; display: block; margin-bottom: 10px; }
.wb-drafts-empty p { margin: 0; font-size: calc(12px * var(--wb-font-scale, 1)); line-height: 1.5; }
.wb-drafts-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--wb-border); border-radius: 8px; margin-top: 8px;
    background: var(--wb-panel-2); transition: border-color 0.12s ease, background 0.12s ease;
}
.wb-drafts-row:hover { border-color: var(--wb-accent); }
.wb-drafts-main { flex: 1 1 auto; min-width: 0; }
.wb-drafts-name { font-weight: 600; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-drafts-name > i { color: var(--wb-accent); }
.wb-drafts-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.wb-drafts-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: calc(10.5px * var(--wb-font-scale, 1));
    padding: 2px 7px; border-radius: 20px; background: var(--wb-panel);
    border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
}
.wb-drafts-chip.is-link { color: var(--wb-accent); border-color: var(--wb-accent); }
.wb-drafts-date { font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); margin-left: auto; }
.wb-drafts-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.wb-drafts-act {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); border-radius: 6px; cursor: pointer;
    border: 1px solid var(--wb-border); background: transparent; color: var(--wb-fg);
}
.wb-drafts-act:hover { background: var(--wb-panel); }
.wb-drafts-act.is-pri { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
.wb-drafts-act.is-pri:hover { filter: brightness(1.08); }
.wb-drafts-act.is-danger { color: var(--d3v-status-danger, #dc2626); }
.wb-drafts-act.is-danger:hover { background: rgba(220,38,38,0.10); border-color: var(--d3v-status-danger, #dc2626); }
.wb-drafts-foot {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-top: 1px solid var(--wb-border);
}
.wb-drafts-note { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); display: inline-flex; align-items: center; gap: 6px; }
.wb-drafts-cancel-btn {
    padding: 6px 14px; font-size: calc(12.5px * var(--wb-font-scale, 1)); border-radius: 6px; cursor: pointer;
    border: 1px solid var(--wb-border); background: transparent; color: var(--wb-fg);
}
.wb-drafts-cancel-btn:hover { background: var(--wb-panel-2); }

/* ============================================================================================
   R2026-133 - Keyword-deck merge OFFSET dialog (LS-PrePost "Import With Offset" parity).
   Body/shell-mounted on .wb-open-modal-host, so it inherits the mirrored --wb-* theme tokens
   (see the .wb-open-modal-host[data-wb-theme=...] blocks at the top of this file). Not scoped
   under .peacock-workbench because the host sits outside it (same rule as OpenConfirm).
   ============================================================================================ */
/** R2026-133 - the shared .wb-open-modal-host is z-index 40, BELOW the kickstart empty-state
 *  (z-index 10050). A keyword merge can momentarily surface that empty-state, so lift the offset
 *  dialog's host above it -- its backdrop then covers whatever is behind, in every case. **/
.wb-open-modal-host.wb-kwoff-host { z-index: 10060; }
.wb-kwoff-panel {
    position: absolute; top: 8vh; left: 50%; transform: translateX(-50%);
    width: 660px; max-width: 94vw; max-height: 84vh; overflow-y: auto;
    background: var(--wb-panel, #fbfcfd); color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #e0e3e6); border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55); font-size: calc(12.5px * var(--wb-font-scale, 1));
}
.wb-kwoff-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
}
.wb-kwoff-title { font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg, #2c3e50); }
.wb-kwoff-x { background: transparent; border: 0; color: var(--wb-fg-muted); cursor: pointer; font-size: calc(20px * var(--wb-font-scale, 1)); line-height: 1; padding: 0 4px; }
.wb-kwoff-x:hover { color: var(--wb-fg); }
.wb-kwoff-sub { padding: 0 18px 12px; color: var(--wb-fg-muted); font-size: calc(12px * var(--wb-font-scale, 1)); }
/* Added by shashank2104 on 08/20/2026 - R2026-74 - offset-dialog caveat line (mesh maxima not
   readable up front on an oversize archive; see KeywordMerge.runTextMerge). */
.wb-kwoff-note { margin: 0 18px 10px; padding: 8px 11px; border-radius: 6px;
    border: 1px solid rgba(245, 179, 1, .34); background: rgba(245, 179, 1, .12);
    color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.5; }
.wb-kwoff-top {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 18px; margin: 0 18px 12px; border-radius: 8px;
    background: var(--wb-bg, #eef1f4); border: 1px solid var(--wb-border, #e0e3e6);
}
.wb-kwoff-toplbl { font-weight: 600; color: var(--wb-fg, #2c3e50); }
/* inputs: --wb-panel-2 / --wb-fg is a guaranteed contrast pair in every theme (there is no
   --wb-input-bg token, so a #fff fallback made white boxes with light text in the dark theme). */
.wb-kwoff-def, .wb-kwoff-in {
    background: var(--wb-panel-2, #f4f6f8); color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #d5d9dd); border-radius: 6px;
    padding: 5px 8px; font-size: calc(12.5px * var(--wb-font-scale, 1)); text-align: right;
}
.wb-kwoff-def { width: 120px; }
.wb-kwoff-in { width: 96px; }
.wb-kwoff-def:focus, .wb-kwoff-in:focus { outline: none; border-color: var(--wb-accent, #4a90d9); }
.wb-kwoff-grid { display: flex; gap: 22px; padding: 0 18px; }
.wb-kwoff-more-grid { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--wb-border, #e0e3e6); }
.wb-kwoff-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 7px; }
.wb-kwoff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wb-kwoff-row label { color: var(--wb-fg, #2c3e50); font-weight: 500; letter-spacing: 0.2px; }
.wb-kwoff-morebar { padding: 10px 18px 4px; }
.wb-kwoff-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }
.wb-kwoff-btn {
    background: var(--wb-panel-2, #eef1f4); color: var(--wb-fg, #2c3e50);
    border: 1px solid var(--wb-border, #d5d9dd); border-radius: 7px;
    padding: 7px 14px; font-size: calc(12.5px * var(--wb-font-scale, 1)); cursor: pointer; font-weight: 500;
}
.wb-kwoff-btn:hover { background: var(--wb-row-hover, #e2e7ec); }
.wb-kwoff-morebtn { padding: 4px 12px; font-size: calc(12px * var(--wb-font-scale, 1)); }
.wb-kwoff-primary {
    background: var(--wb-accent, #4a90d9); color: var(--wb-accent-fg, #fff); border-color: var(--wb-accent, #4a90d9);
}
.wb-kwoff-primary:hover { filter: brightness(1.08); }

/* ============================================================================
   Measure — unified LS-PrePost measurement panel (R0-4069)
   Scoped under the plugin root; --wb-* tokens, no hardcoded colours.
   ============================================================================ */
.peacock-workbench .wb-measure { display: flex; flex-direction: column; gap: 10px; }
.peacock-workbench .wb-measure-head { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-measure-head-sp { flex: 1; }
.peacock-workbench .wb-measure-count { min-width: 20px; text-align: center; }

.peacock-workbench .wb-measure-add {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
    background: var(--wb-panel-2, var(--wb-panel));
}
.peacock-workbench .wb-measure-row { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-measure-lbl { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); min-width: 34px; }
.peacock-workbench .wb-measure-type {
    flex: 1; height: 32px; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border);
    background: var(--wb-bg); color: var(--wb-fg); padding: 0 8px;
}
.peacock-workbench .wb-measure-form { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-measure-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.peacock-workbench .wb-measure-slot {
    display: inline-flex; align-items: center; gap: 5px; font-size: calc(11px * var(--wb-font-scale, 1));
    padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--wb-border-strong, var(--wb-border));
    color: var(--wb-fg-dim); background: var(--wb-bg);
}
.peacock-workbench .wb-measure-chans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.peacock-workbench .wb-measure-chanlbl { font-size: calc(10px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--wb-fg-muted); }
.peacock-workbench .wb-measure-chan {
    font-size: calc(10px * var(--wb-font-scale, 1)); padding: 2px 7px; border-radius: var(--wb-radius-sm);
    background: var(--wb-accent-soft, var(--wb-hover)); color: var(--wb-fg-dim);
    font-family: var(--wb-mono, monospace);
}
.peacock-workbench .wb-measure-hint { font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.5; }
.peacock-workbench .wb-measure-soon { color: var(--wb-fg-dim); }
.peacock-workbench .wb-measure-addbtn {
    height: 34px; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-accent, #4a90d9);
    background: var(--wb-accent, #4a90d9); color: var(--wb-accent-fg, #fff);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
    transition: filter var(--wb-t, .15s) ease, opacity var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-addbtn:hover { filter: brightness(1.08); }
.peacock-workbench .wb-measure-addbtn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }

.peacock-workbench .wb-measure-listhead { font-size: calc(10px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--wb-fg-muted); margin-bottom: 4px; }
.peacock-workbench .wb-measure-list { display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-measure-item {
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius); background: var(--wb-panel);
    padding: 8px 10px; transition: box-shadow var(--wb-t, .15s) ease, border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-item:hover { border-color: var(--wb-border-strong, var(--wb-accent)); }
.peacock-workbench .wb-measure-item-head { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-measure-tchip {
    font-size: calc(9px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px;
    border-radius: var(--wb-radius-sm); background: var(--wb-hover); color: var(--wb-fg-muted); white-space: nowrap;
}
.peacock-workbench .wb-measure-name { flex: 1; font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-fg); cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-measure-rename { flex: 1; height: 24px; border: 1px solid var(--wb-accent); border-radius: var(--wb-radius-sm); background: var(--wb-bg); color: var(--wb-fg); padding: 0 6px; }
.peacock-workbench .wb-measure-val { font-family: var(--wb-mono, monospace); font-size: calc(12px * var(--wb-font-scale, 1)); color: var(--wb-accent, #4a90d9); }
.peacock-workbench .wb-measure-zoom,
.peacock-workbench .wb-measure-del {
    width: 24px; height: 24px; border-radius: var(--wb-radius-sm); border: 1px solid transparent;
    background: transparent; color: var(--wb-fg-muted); cursor: pointer;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-zoom:hover { background: var(--wb-hover); color: var(--wb-fg); }
.peacock-workbench .wb-measure-del:hover { background: var(--wb-hover); color: var(--wb-danger, #d9534f); }
.peacock-workbench .wb-measure-pts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.peacock-workbench .wb-measure-pt { display: flex; gap: 6px; font-size: calc(10px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-measure-pt-lbl { color: var(--wb-fg-muted); }
.peacock-workbench .wb-measure-pt-val { font-family: var(--wb-mono, monospace); color: var(--wb-fg-dim); }

.peacock-workbench .wb-measure-foot { display: flex; align-items: center; gap: 6px; }
.peacock-workbench .wb-measure-foot-sp { flex: 1; }
.peacock-workbench .wb-measure-foot button {
    height: 30px; padding: 0 10px; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border);
    background: var(--wb-bg); color: var(--wb-fg-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-foot button:hover { background: var(--wb-hover); color: var(--wb-fg); }

.peacock-workbench .wb-measure-file { display: none !important; }

/* ── R0-4069 refinements: list-only scroll, close button, minimal slots ── */
.peacock-workbench .wb-measure-view { height: 100%; display: flex; }
.peacock-workbench .wb-measure { flex: 1 1 auto; min-height: 0; }
.peacock-workbench .wb-measure-add,
.peacock-workbench .wb-measure-head,
.peacock-workbench .wb-measure-foot { flex: none; }
.peacock-workbench .wb-measure-listwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.peacock-workbench .wb-measure-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }

.peacock-workbench .wb-measure-titletxt { display: inline-flex; align-items: center; gap: 7px; }
.peacock-workbench .wb-measure-close {
    width: 26px; height: 26px; border-radius: var(--wb-radius-sm); border: 1px solid transparent;
    background: transparent; color: var(--wb-fg-muted); cursor: pointer; margin-left: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-close:hover { background: var(--wb-hover); color: var(--wb-fg); }

/* minimal, modern entity slots — a numbered dot + role, no dashed pills */
.peacock-workbench .wb-measure-slots { gap: 4px 10px; }
.peacock-workbench .wb-measure-slot {
    border: none; background: transparent; padding: 0; color: var(--wb-fg-dim);
    font-size: calc(11px * var(--wb-font-scale, 1)); gap: 6px;
}
.peacock-workbench .wb-measure-slot::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--wb-accent, #4a90d9); opacity: .7; flex: none;
}
.peacock-workbench .wb-measure-slot .fa { display: none; }
.peacock-workbench .wb-measure-chans { gap: 5px; margin-top: 2px; }
.peacock-workbench .wb-measure-chan { background: transparent; border: 1px solid var(--wb-border); color: var(--wb-fg-muted); }

/* ── R0-4069 phase 2: Reference Axes selector (Global / Local frames from Create Axes) ── */
.peacock-workbench .wb-measure-refrow { margin-top: 4px; }
.peacock-workbench .wb-measure-refrow .wb-measure-lbl { display: inline-flex; align-items: center; gap: 5px; min-width: 62px; }
.peacock-workbench .wb-measure-refaxes {
    flex: 1; height: 30px; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border);
    background: var(--wb-bg); color: var(--wb-fg); padding: 0 8px;
    transition: border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-refaxes:focus { outline: none; border-color: var(--wb-accent, #4a90d9); box-shadow: 0 0 0 2px var(--wb-accent-soft, rgba(74,144,217,.25)); }
.peacock-workbench .wb-measure-delframe {
    width: 30px; height: 30px; flex: none; border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border);
    background: var(--wb-bg); color: var(--wb-fg-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-measure-delframe:hover:not([disabled]) { background: var(--wb-hover); color: var(--wb-danger, #d9534f); }
.peacock-workbench .wb-measure-delframe[disabled] { opacity: .4; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════════════════════════════════
   R2026-173 — Peacock Workbench improvements (08/17/2026, shashank2104)
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Examples rail pane ──
   It reuses the Simulations pane's `.wb-sim-*` block wholesale (see wb-examples-pane-tpl.tpl), so
   the ONLY thing it adds is the state that pane has no equivalent for: a catalog row this build
   cannot open. Listed, explained on hover, never clickable. */
.peacock-workbench .wb-examples-pane { display: flex; flex-direction: column; min-height: 0; }
.peacock-workbench .wb-sim-row.is-unsupported {
    opacity: .45; cursor: default;
}
.peacock-workbench .wb-sim-row.is-unsupported:hover {
    background: transparent; border-left-color: transparent;
}

/* ── File menu ▸ Recents: a generated submenu row that cannot be acted on (the empty state) ── */
.peacock-workbench .wb-toolbar-group-item.is-disabled {
    opacity: .45; cursor: default; pointer-events: none;
}

/* ── The name of the file currently open (toolbar chip, before the right-hand buttons) ──
   Read-only chrome, not a control: no hover, no pointer, and it collapses entirely with no
   model loaded so an empty workbench does not show a stray pill. */
.peacock-workbench .wb-toolbar-file {
    display: inline-flex; align-items: center; max-width: 260px;
    margin-right: 6px; padding: 3px 10px;
    border: 1px solid var(--wb-border); border-radius: 999px;
    background: var(--wb-panel); color: var(--wb-fg);
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-toolbar-file:empty,
.peacock-workbench .wb-toolbar-file.is-empty { display: none; }

/* ── Side-by-side models: the per-pane label ──
   `--wb-model-color` is set per pane by PeacockManagerView.syncPaneTag, so the chip and the pane
   outline are always the same colour and a pane can be matched to its model at a glance. Only
   `.peacock-editor--multi` is positioned, so a single-pane viewport is untouched. */
.peacock-workbench .peacock-editor--multi { position: relative; }
/* Top-CENTRE, not top-left: the pane's own plugin logo (.plugin-logo-container, 40x40) already
   occupies its top-left corner, so a left-anchored chip sits on top of it. Centred it also reads as
   a pane TITLE rather than another badge. */
.peacock-workbench .peacock-editor--multi > .peacock-editor-tag {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
    display: inline-flex; align-items: center; gap: 6px;
    max-width: calc(100% - 96px);
    padding: 4px 10px;
    border: 1px solid var(--wb-model-color, var(--wb-border));
    border-radius: 999px;
    background: var(--wb-panel); color: var(--wb-fg);
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; line-height: 1.5;
    box-shadow: var(--wb-shadow, 0 1px 4px rgba(0,0,0,.28));
    pointer-events: none;  /* never steals a pick from the 3D canvas underneath */
}
.peacock-workbench .peacock-editor--multi > .peacock-editor-tag .peacock-editor-tag-swatch {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
    background: var(--wb-model-color, var(--wb-accent));
}
.peacock-workbench .peacock-editor--multi > .peacock-editor-tag .peacock-editor-tag-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A thin edge in the same colour, so the pane a chip belongs to is unambiguous when the two
   models look alike. */
.peacock-workbench .peacock-editor--multi {
    box-shadow: inset 0 0 0 1px var(--wb-model-color, var(--wb-border));
}

/* Added by shashank2104 on 08/17/2026 at 11:38 AM - R2026-173 - PrePost overlay tree on the 3D pane.
   Name lives on the HUD; centred split pills and the canvas peacock badge are gone. */
.peacock-workbench .peacock-models-layout .peacock-editor { position: relative; }
.peacock-workbench .peacock-editor-tag { display: none; }
.peacock-workbench .peacock-controller-wrapper { display: none; }
.peacock-workbench .peacock-editor-wrapper { height: 100% !important; }

/** Added by shashank2104 on 08/17/2026 at 09:41 PM - R2026-173 - hide the left-rail Models
    item for now; the on-canvas overlay tree is the live model tree. **/
.peacock-workbench .wb-rail [data-wb-mode="models"] { display: none !important; }

/** Added by shashank2104 on 08/22/2026 - R2026-213 - the reference tree's STRUCTURE, on either surface.
 *  Design option A of `mockup-r2026-213-model-tree.html`: uppercase branch heads with an icon and a
 *  count, boxed -/+ expanders on the indent guides, status glyphs, roomier rows.
 *
 *  ⚠ THE SURFACE IS A PREFERENCE, AND TRANSPARENT IS THE DEFAULT (Display ▸ Appearance ▸ "Overlay
 *  tree background"). The base rule below stays see-through with halo'd text — LS-PrePost's look, and
 *  what this tree has always been — and `.has-panel` paints the solid surface. An earlier cut of this
 *  ticket made the panel unconditional; it is opt-in.
 *
 *  ⚠⚠ `height: auto` OVERRIDES `.wb-tree-pane { height: 100% }`, which this element also carries (it
 *  shares the class with the docked tree). That rule was harmless for as long as the overlay had no
 *  background and no pointer events — the box was full height and nobody could see or hit it. The
 *  moment it paints a panel it becomes a full-height slab with the tree at the top: measured 868px of
 *  panel for 380px of content. It must shrink-wrap on BOTH surfaces. **/
.peacock-workbench .wb-overlay-tree {
    position: absolute; top: 10px; left: 12px; bottom: auto; z-index: 6;
    /* R2026-308 (09/18/2026) - one step smaller: 248/340 -> 224/300 wide, 11px -> 10px type */
    min-width: 224px; max-width: min(300px, 44%);
    height: auto;
    max-height: calc(100% - 24px);
    display: flex; flex-direction: column;
    overflow: visible;           /* the Keyword Entity cog menu escapes the panel */
    padding: 2px 4px 6px 0;
    pointer-events: none;        /* transparent: only the rows and controls take clicks */
    background: transparent;
    border: 0;
    color: #111;
    font-size: calc(10px * var(--wb-font-scale, 1));
    line-height: 1.4;
    text-shadow: 0 0 4px #fff, 0 1px 3px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff;
}

/** R2026-213 — the opt-in SOLID surface. */
.peacock-workbench .wb-overlay-tree.has-panel {
    pointer-events: auto;
    padding: 0 0 6px;
    background: var(--wb-panel, #fbfcfd);
    border: 1px solid var(--wb-border, #dfe4ec);
    border-radius: 6px;
    box-shadow: 0 6px 22px rgba(24, 36, 60, 0.13), 0 1px 2px rgba(24, 36, 60, 0.07);
    color: var(--wb-fg, #2a2f3a);
    text-shadow: none;
}

/** R2026-174 — THE PANEL-LESS TREE HAS TO FLIP ON A DARK CANVAS. Without a surface behind it the tree
 *  is read against the 3D, and the rule above pins it to dark ink with a WHITE halo, which only works
 *  on a light canvas. `shell.js` drives the canvas off the active theme (`setTheme3D`), so the theme
 *  attribute is the right key. `.has-panel` is excluded — it paints its own surface from the theme's
 *  own tokens and sets `text-shadow: none`. **/
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) {
    color: #f2f4f7;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.9),
        0 1px 3px rgba(0, 0, 0, 0.85),
        1px 1px 0 rgba(0, 0, 0, 0.7),
        -1px -1px 0 rgba(0, 0, 0, 0.7);
}
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) .wb-tree-count,
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) .wb-overlay-sub {
    color: #cbd2da;
}
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) .wb-overlay-gitlines {
    color: #7d8794;
}
/** R2026-213 — on the transparent surface the chrome is drawn over live 3D, so the boxed expander
 *  needs its own fill and the glyph needs a halo, or both dissolve into whatever is behind them. */
.peacock-workbench .wb-overlay-tree:not(.has-panel) .wb-overlay-caret:not(.is-leaf) {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(120, 132, 150, 0.75);
    color: #45505f;
    text-shadow: none;
}
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) .wb-overlay-caret:not(.is-leaf) {
    background: rgba(28, 30, 34, 0.85);
    border-color: rgba(180, 190, 205, 0.6);
    color: #e7ebf1;
}
.peacock-workbench .wb-overlay-tree:not(.has-panel) .wb-tree-glyph svg {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95));
}
.peacock-workbench[data-wb-theme="studio-dark"] .wb-overlay-tree:not(.has-panel) .wb-tree-glyph svg {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
/** the white tick is punched out of the disc, so on the transparent surface it must not take the
    halo the rest of the text does — it would smear over the tick */
.peacock-workbench .wb-overlay-tree .wb-tree-glyph,
.peacock-workbench .wb-overlay-tree .wb-overlay-caret { text-shadow: none; }

.peacock-workbench .wb-overlay-tree .wb-overlay-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow: auto; max-height: none;
}
.peacock-workbench .wb-overlay-tree.has-panel .wb-overlay-scroll { padding: 4px 6px 2px 0; }
.peacock-workbench .wb-overlay-tree .wb-overlay-scroll::-webkit-scrollbar { width: 8px; }
.peacock-workbench .wb-overlay-tree .wb-overlay-scroll::-webkit-scrollbar-thumb {
    background: var(--wb-border, #c9d2de); border-radius: 8px;
}
.peacock-workbench .wb-overlay-tree.is-cog-open .wb-overlay-scroll { overflow: visible; }
.peacock-workbench .wb-overlay-tree .wb-overlay-name,
.peacock-workbench .wb-overlay-tree .wb-overlay-row,
.peacock-workbench .wb-overlay-tree .wb-overlay-cog,
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu,
.peacock-workbench .wb-overlay-tree .wb-overlay-cb,
.peacock-workbench .wb-overlay-tree .wb-tree-eye,
.peacock-workbench .wb-overlay-tree .wb-overlay-bom {
    pointer-events: auto;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-name {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 4px 8px;
    font-weight: 700; font-size: calc(10.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-overlay-tree.has-panel .wb-overlay-name {
    padding: 7px 10px 6px;
    border-bottom: 1px solid var(--wb-border, #e3e7ee);
}
.peacock-workbench .wb-overlay-tree .wb-tree-row {
    font-size: calc(10px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-overlay-tree .wb-tree-count {
    font-size: calc(8.5px * var(--wb-font-scale, 1));
    font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-overlay-tree .wb-tree-bom-open {
    font-size: calc(8.8px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-overlay-tree .wb-overlay-name-text {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-swatch {
    width: 8px; height: 8px; flex: none; border-radius: 50%;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-bom {
    margin-left: auto; padding: 2px 4px;
    color: var(--wb-accent, #4a7eb5); text-decoration: none;
    text-shadow: none; font-size: calc(10.4px * var(--wb-font-scale, 1)); line-height: 1;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-bom:hover { color: #2f6bd8; }
.peacock-workbench .wb-overlay-tree .wb-tree-chevron { display: none; }
.peacock-workbench .wb-overlay-tree .wb-overlay-node { position: relative; }
.peacock-workbench .wb-overlay-tree .wb-overlay-branch { padding-left: 14px; }
.peacock-workbench .wb-overlay-tree .wb-overlay-gitlines {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: 32px; height: 100%;
    pointer-events: none; overflow: visible;
    color: #c0c0c0;
}
.peacock-workbench .wb-overlay-tree.has-panel .wb-overlay-gitlines { color: var(--wb-border, #e7ebf1); }
.peacock-workbench .wb-overlay-tree .wb-overlay-row {
    position: relative; z-index: 1;
    background: transparent;
    padding-top: 3px; padding-bottom: 3px;
    min-height: 22px;
    border-radius: 4px;
    gap: 5px;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-row.wb-tree-item { padding-left: 0; }
/** ⚠ HOVER ONLY — this tree has no persistent row selection, and must not look like it has one.
    On the transparent surface a solid fill would be a floating slab, so it stays a wash. */
.peacock-workbench .wb-overlay-tree .wb-overlay-row:hover {
    background: rgba(255, 255, 255, 0.18);
}
.peacock-workbench .wb-overlay-tree.has-panel .wb-overlay-row:hover {
    background: var(--wb-row-hover, rgba(47, 107, 216, 0.09));
}

/** R2026-318 — the row whose part is LIT YELLOW IN THE 3D right now. It is not a selection and it
    outlives no pointer: `tree.js` sets it when `MeshEdit.tintParts` lands (after the hover-intent
    delay) and drops it with the tint, so the mark and the 3D always say the same thing.
    The tint colour itself (#ffd400) rather than the hover blue — that is the whole point of the
    mark — but only as a hairline ring and a wash, since a filled yellow row would out-shout the
    part. ⚠ A ring, not an inset LEFT bar: the bar draws over the tree's elbow and reads as a stray
    paren. */
.peacock-workbench .wb-overlay-tree .wb-overlay-row.is-lit,
.peacock-workbench .wb-overlay-tree.has-panel .wb-overlay-row.is-lit {
    background: rgba(255, 212, 0, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 212, 0, 0.9);
}
.peacock-workbench .wb-overlay-tree .wb-overlay-row.is-lit .wb-tree-label {
    font-weight: 600;
}

/** R2026-213 — a BRANCH HEAD (Assembly / FEM Parts / Includes / Keyword Entity). */
.peacock-workbench .wb-overlay-tree .wb-overlay-sec > .wb-tree-label {
    font-size: calc(9px * var(--wb-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--wb-fg-muted, #5a6577);
}
/** ⚠ a head's own label must NOT take the leaf accent — `is-on` is still set on it because
    `onOverlayCheck` reads that class to decide a toggle's direction, so it is suppressed
    visually here rather than removed from the markup. */
.peacock-workbench .wb-overlay-tree .wb-overlay-sec > .wb-tree-label.is-on {
    color: var(--wb-fg-muted, #5a6577);
}
/** R2026-213 — the compact parts search on the overlay's FEM Parts branch. */
.peacock-workbench .wb-overlay-tree .wb-overlay-searchbar {
    display: flex; align-items: center; gap: 5px;
    margin: 2px 6px 6px 8px;
    padding: 4px 8px;
    background: var(--wb-panel, rgba(255, 255, 255, 0.92));
    border: 1px solid var(--wb-border, #d4dae3);
    border-radius: 4px;
    pointer-events: auto;
    text-shadow: none;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-search-ic {
    flex: none; font-size: calc(9px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #9aa3b2);
}
.peacock-workbench .wb-overlay-tree .wb-overlay-search-input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    color: var(--wb-fg, #2a2f3a);
    font: inherit; font-size: calc(10px * var(--wb-font-scale, 1));
    padding: 2px 0;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-search-clear {
    flex: none; cursor: pointer;
    font-size: calc(9px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #9aa3b2);
}
.peacock-workbench .wb-overlay-tree .wb-overlay-search-clear:hover { color: var(--wb-danger, #d92d20); }
.peacock-workbench .wb-overlay-tree .is-hidden { display: none !important; }
.peacock-workbench .wb-overlay-tree .wb-overlay-node.is-filtered-out { display: none; }
.peacock-workbench .wb-overlay-tree .wb-overlay-nomatch {
    padding: 5px 8px 7px 10px;
    color: var(--wb-fg-muted, #9aa3b2); font-style: italic;
}
/* R2026-315 - a leaf row's keyword card button, shown on hover */
.peacock-workbench .wb-overlay-tree .wb-overlay-kcard {
    flex: none; margin-left: auto; margin-right: 4px;
    width: 16px; height: 16px; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(9px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #9aa3b2);
    opacity: 0; cursor: pointer;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-row:hover .wb-overlay-kcard { opacity: 1; }
.peacock-workbench .wb-overlay-tree .wb-overlay-kcard:hover {
    color: var(--wb-accent, #2f6bd8);
    background: color-mix(in srgb, var(--wb-accent, #2f6bd8) 12%, transparent);
}
/* R2026-315 - loading skeleton: rows in the real row shape with shimmering bars */
.peacock-workbench .wb-overlay-tree .wb-overlay-skel { pointer-events: none; }
.peacock-workbench .wb-overlay-tree .wb-overlay-skel .wb-overlay-caret {
    opacity: .45; cursor: default;
}
.peacock-workbench .wb-overlay-tree .wb-skel-disc {
    display: block; width: 9px; height: 9px; border-radius: 50%;
    background: color-mix(in srgb, var(--wb-fg, #1f2937) 14%, transparent);
}
.peacock-workbench .wb-overlay-tree .wb-skel-bar {
    display: inline-block; height: 8px; border-radius: 4px;
    position: relative; overflow: hidden; vertical-align: middle;
    background: color-mix(in srgb, var(--wb-fg, #1f2937) 12%, transparent);
}
.peacock-workbench .wb-overlay-tree .wb-skel-bar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wb-panel, #fff) 70%, transparent), transparent);
    transform: translateX(-100%); animation: wbBufShimmer 1.4s ease-in-out infinite;
}
.peacock-workbench .wb-overlay-tree .wb-skel-label { flex: 0 1 auto; }
.peacock-workbench .wb-overlay-tree .wb-skel-count { width: 16px; margin-left: auto; margin-right: 6px; flex: none; }
.peacock-workbench .wb-overlay-tree .wb-overlay-skel-node:nth-child(2) .wb-skel-bar::after { animation-delay: .12s; }
.peacock-workbench .wb-overlay-tree .wb-overlay-skel-node:nth-child(3) .wb-skel-bar::after { animation-delay: .24s; }
.peacock-workbench .wb-overlay-tree .wb-overlay-skel-node:nth-child(4) .wb-skel-bar::after { animation-delay: .36s; }
.peacock-workbench .wb-overlay-tree .wb-overlay-skel-node:nth-child(5) .wb-skel-bar::after { animation-delay: .48s; }

.peacock-workbench .wb-overlay-tree .wb-overlay-ic {
    flex: none; width: 15px; text-align: center;
    font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-accent, #2f6bd8);
    opacity: 0.85;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-sec .wb-tree-count {
    font-weight: 600;
}
/* ── R2026-211 — the overlay tree has NO CHECKBOXES. Added by shashank2104 on 08/21/2026. ──
   A column of tick boxes down a tree that is already three levels deep reads as a form, and on the
   entity branch it was five nested levels of them. The LABEL now carries the state — bold + accent
   when the row is shown, bold + muted when only some of its children are — and a CARET carries the
   expand, which is what a tree row is expected to have. EVERY row toggles by its label — a parent
   means "everything under me", a leaf means that one entity — and nothing else in the row is a control.
   ⚠⚠ THE LABEL KEEPS THE `is-on` / `is-partial` CLASS NAMES, and that is load-bearing, not cosmetic:
   `tree.js:onOverlayCheck` decides the direction of a toggle with `var wantOn = !$cb.hasClass('is-on')`.
   Renaming them to something more descriptive (`is-shown`) made that read false on every click, so the
   tree could only ever turn a branch ON and never off — measured live, two clicks on Bound ▸ SPC both
   left `ED.state.spc === true`. Reusing the existing vocabulary means `tree.js`'s toggle logic and the
   partial/full distinction are untouched.
   `.wb-overlay-cb` itself is kept as a selector only because `tree.js:onOverlayToggle` still guards
   on it to tell a toggle click from an expand click — it just no longer draws a box. */
/** R2026-213 — the caret is a boxed -/+ sitting on the indent guide, the reference's affordance.
 *  ⚠⚠ THE CLASS AND THE SLOT ARE THE CONTRACT, not the icon: `_paintOverlayGitNode` measures this
 *  element's `offsetLeft` to stop each git-line elbow (`xEnd = end - 3`). Keep it FIRST in the row
 *  and keep the name, whatever is drawn inside it. */
.peacock-workbench .wb-overlay-tree .wb-overlay-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 11px; height: 11px; flex: none;
    margin-left: 8px;
    border: 1px solid var(--wb-border, #b9c3d2);
    border-radius: 2px;
    background: var(--wb-panel, #fff);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: calc(9px * var(--wb-font-scale, 1)); line-height: 1;
    color: var(--wb-fg-muted, #7c879a);
    opacity: 1;
    cursor: pointer;
}
/** a leaf keeps the SLOT so its row lines up with its siblings, and so the elbow still measures */
.peacock-workbench .wb-overlay-tree .wb-overlay-caret.is-leaf {
    opacity: 0; border-color: transparent; background: none; cursor: default;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-row:hover .wb-overlay-caret:not(.is-leaf) {
    border-color: var(--wb-accent, #2f6bd8);
    color: var(--wb-accent, #2f6bd8);
}

/** R2026-213 — THE STATUS GLYPH. Built by `tree.js:OverlayGlyph`; see its comment for why the three
 *  shapes are what they are and why red is not one of them. Colours live here so the tree follows
 *  the theme. */
.peacock-workbench .wb-overlay-tree .wb-tree-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; flex: none;
    line-height: 1;
    font-size: calc(9px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #9aa3b2);
}
.peacock-workbench .wb-overlay-tree .wb-tree-glyph svg { display: block; width: 14px; height: 14px; }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph .wb-g-disc { fill: var(--wb-ok, #16a34a); }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph .wb-g-tick { stroke: var(--wb-panel, #fff); }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-partial .wb-g-ring { stroke: var(--wb-warn, #e8a33d); }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-off .wb-g-ring { stroke: var(--wb-border, #c2cad6); }
/** only a glyph that IS a control looks like one */
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-control { cursor: pointer; }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-control:hover .wb-g-ring {
    stroke: var(--wb-accent, #2f6bd8);
}
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-disabled { opacity: 0.45; cursor: default; }
.peacock-workbench .wb-overlay-tree .wb-tree-glyph.is-busy { color: var(--wb-accent, #2f6bd8); }
/** a hidden row's label recedes — the glyph says so, the text should agree */
.peacock-workbench .wb-overlay-tree .wb-tree-item .wb-tree-glyph.is-off ~ .wb-tree-label {
    opacity: 0.6;
}
/* a shown row: bold + the accent. A partly-shown one is bold but stays neutral, so "some" can never
   be mistaken for "all" at a glance — the distinction the old ✓ / – pair carried. */
/* ── R2026-211 — ONE STATE CARRIER IN THIS TREE: `.wb-tree-label.is-on` ──
   No checkboxes, no per-row eyes, and ⭐⭐ **a PARENT row carries no display control at all** — it only
   expands / collapses. Only a LEAF (an individual entity) toggles what is drawn, by clicking it.
   A parent's bold + accent is a read-only INDICATOR of what is on underneath it, never a button.

   ⚠⚠ THE `is-on` CLASS IS LOAD-BEARING, ON THE LABEL, AND BOTH HANDLERS READ IT.
   `tree.js:onOverlayCheck` decides a toggle's direction with `!$cb.hasClass('is-on')` and
   `onOverlayEntity` with `$row.find('.wb-tree-label').hasClass('is-on')`. Both have already been
   broken once by moving that class: a selector matching nothing answers `hasClass` FALSE, so the
   toggle silently becomes one-way — measured, two clicks on a row both left it ON. Move the class and
   you must move both reads. */
/* only a LEAF's label is a control — a parent's label just expands, like the rest of its row */
.peacock-workbench .wb-overlay-tree [data-wb-overlay-entity] .wb-tree-label { cursor: pointer; }
.peacock-workbench .wb-overlay-tree .wb-tree-label.is-on {
    font-weight: 700; color: var(--wb-accent, #4a7eb5);
}
.peacock-workbench .wb-overlay-tree .wb-tree-label.is-partial {
    font-weight: 700; opacity: 0.92;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cb:not(.wb-tree-glyph) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 12px; height: 12px; flex: none;
    margin-left: 8px;
    border: 1px solid currentColor; border-radius: 2px;
    font-size: calc(7.2px * var(--wb-font-scale, 1)); line-height: 1;
    opacity: 0.85;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cb.is-on:not(.wb-tree-glyph) {
    background: var(--wb-accent, #4a7eb5);
    border-color: var(--wb-accent, #4a7eb5);
    color: #fff;
    text-shadow: none;
}
/* Added by shashank2104 on 08/17/2026 at 02:05 PM - R2026-173 - SOME of this row's children are drawn.
   A bare unchecked box reads as "none of this is on screen", which is not what the user is looking at. */
.peacock-workbench .wb-overlay-tree .wb-overlay-cb.is-partial:not(.wb-tree-glyph) {
    background: transparent;
    border-color: var(--wb-accent, #4a7eb5);
    color: var(--wb-accent, #4a7eb5);
    font-weight: 700;
    text-shadow: none;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cog {
    position: relative; margin-left: auto; padding: 2px 4px;
    cursor: pointer; opacity: 0.75;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cog:hover,
.peacock-workbench .wb-overlay-tree .wb-overlay-cog.is-open { opacity: 1; }
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu {
    position: absolute; right: 0; left: auto; top: 100%; z-index: 40;
    min-width: 148px; padding: 4px 0;
    background: var(--wb-panel, #2e2e2e); color: var(--wb-fg, #eee);
    border: 1px solid var(--wb-border, #161616);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    text-shadow: none;
    white-space: nowrap;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; color: inherit; text-decoration: none; font-size: calc(9.6px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu a i {
    width: 14px; text-align: center; opacity: 0.9;
}
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu a:hover,
.peacock-workbench .wb-overlay-tree .wb-overlay-cog-menu a.is-on {
    background: rgba(255, 255, 255, 0.08);
    color: var(--wb-accent, #4a7eb5);
}

/* ==========================================================================================
   BEGIN THEME — studio-light
   Added by shashank2104 on 08/17/2026 - R2026-174 - a light-grey, production-grade workbench
   theme, and the DEFAULT one as of this ticket (Studio Dark is still a pick in Preferences).
   White panels on a light-grey ground, hairline borders, soft elevation, one accent, real
   hover/focus/active states.

   SELF-CONTAINED ON PURPOSE. Everything the theme needs lives between these BEGIN/END
   markers and nothing above this line was touched, so when the sheet is modularized this
   block lifts out whole into stylesheets/themes/studio-light.css.

   It is written in two layers:
     1. TOKENS — the full --wb-* set, including the ~15 optional tokens the rest of the sheet
        only reads through `var(--wb-x, <fallback>)`. Those fallbacks were authored for a DARK
        shell (white alphas, heavy black shadows), so defining them here is what re-tones the
        hundreds of rules this block never names.
     2. SURFACE POLISH — scoped overrides for the chrome that hardcodes a dark-shell value
        (the rail's white-alpha hovers, the accent-tint fills, the heavy drop shadows).
   ========================================================================================== */

/* ---- 1. TOKENS ------------------------------------------------------------------------
   Mirrored onto the two body-mounted hosts as well (the shared context menu and the open
   modal host mount outside .peacock-workbench, so the shell's tokens cannot cascade into
   them) — same three-selector pattern the other themes use at the top of this file. */
.peacock-workbench[data-wb-theme="studio-light"],
.d3view-context-menu-container.peacock-main-ctxm.wb-ctxm-theme-studio-light,
.wb-open-modal-host[data-wb-theme="studio-light"] {
    /* surfaces: grey ground, white panels, a faint tint for strips/headers */
    --wb-bg:            #eceff3;
    --wb-panel:         #ffffff;
    --wb-panel-2:       #f6f7f9;
    --wb-input-bg:      #ffffff;

    /* ink */
    --wb-fg:            #101828;
    --wb-fg-muted:      #667085;
    --wb-fg-dim:        #98a2b3;

    /* one accent, plus its soft wash for selected/active fills */
    --wb-accent:        #2563eb;
    --wb-accent-fg:     #ffffff;
    --wb-accent-soft:   #eaf0ff;

    /* separators: hairlines, never heavy rules */
    --wb-border:        #e4e7ec;
    --wb-border-strong: #cfd4dc;
    --wb-divider:       rgba(16, 24, 40, 0.08);

    /* interaction */
    --wb-row-hover:     #f2f5fb;
    --wb-hover:         rgba(37, 99, 235, 0.06);

    /* status — WCAG-AA against white, so a warning is readable as text, not just as a dot */
    --wb-success:       #067647;
    --wb-ok:            #067647;
    --wb-status-success:#067647;
    --wb-warn:          #b54708;
    --wb-warning:       #b54708;
    --wb-danger:        #d92d20;
    --wb-info:          #0e7490;
    --wb-status-info:   #0e7490;

    /* shape / motion / type */
    --wb-radius:        10px;
    --wb-radius-sm:     6px;
    --wb-density:       1;
    --wb-t:             0.16s;
    --wb-mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --wb-shadow:        0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);

    /* the left rail is LIGHT in this theme (the other light themes keep a dark rail).
       Its hover/divider values are hardcoded white alphas up at .wb-rail-icon, so those
       three rules are re-pointed in section 2 — without that the rail loses every state. */
    --wb-rail-bg:       #ffffff;
    --wb-rail-fg:       #667085;
    --wb-rail-fg-on:    #2563eb;
}

/* ---- 2. SURFACE POLISH ----------------------------------------------------------------
   Only the chrome that bakes in a dark-shell assumption. Everything else already reads the
   tokens above and needs nothing. */

/* -- 2a. The frame -- */
.peacock-workbench[data-wb-theme="studio-light"] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* toolbar reads as the app header: white, hairline base, a whisper of lift */
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar {
    background: var(--wb-panel);
    border-bottom: 1px solid var(--wb-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
/* rail: white column, hairline edge, states rebuilt off the accent wash */
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail {
    border-right: 1px solid var(--wb-border);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-icon {
    transition: background var(--wb-t), color var(--wb-t), box-shadow var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-icon:hover {
    background: var(--wb-row-hover);
    color: var(--wb-fg);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-icon.is-active {
    background: var(--wb-accent-soft);
    color: var(--wb-accent);
    box-shadow: inset 2px 0 0 var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-section + .wb-rail-section {
    border-top: 1px solid var(--wb-border);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-section--sim {
    background: rgba(16, 24, 40, 0.02);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-section-label { opacity: 0.75; }
/* rail tooltip: light-theme tooltips stay dark on purpose (a white chip on a white rail
   would need a border to exist at all, and a floating hint should read instantly) */
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-icon[data-wb-tip]::after {
    background: #101828;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.18);
}
/* side panels: white, hairline, no inner shadow */
.peacock-workbench[data-wb-theme="studio-light"] .wb-leftpane,
.peacock-workbench[data-wb-theme="studio-light"] .wb-inspector {
    background: var(--wb-panel);
}
/* dock: the heavy black lift (authored for the dark shell) becomes a hairline + soft ambient */
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock {
    background: var(--wb-panel);
    box-shadow: 0 -1px 0 var(--wb-border), 0 -10px 26px rgba(16, 24, 40, 0.06);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock.is-maximized {
    box-shadow: 0 -1px 0 var(--wb-border), 0 -16px 40px rgba(16, 24, 40, 0.10);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-tabs,
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-navbar.is-open {
    background: var(--wb-panel-2);
    border-color: var(--wb-border);
}
/* status bar: a full-width saturated strip dates the shell — quiet surface, muted text */
.peacock-workbench[data-wb-theme="studio-light"] .wb-statusbar {
    background: var(--wb-panel);
    color: var(--wb-fg-muted);
    border-top: 1px solid var(--wb-border);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-splitter:hover {
    background: var(--wb-accent);
    opacity: 0.25;
}
/* section headers: a muted label reads as structure; accent is reserved for what is ACTIVE */
.peacock-workbench[data-wb-theme="studio-light"] .wb-panel-title {
    color: var(--wb-fg-muted);
    background: var(--wb-panel);
    border-bottom: 1px solid var(--wb-border);
    letter-spacing: 0.06em;
}

/* -- 2b. Buttons, tabs and menus --
   ⚠ `.wb-btn` is declared TWICE in this sheet and the LATER one (near the summary widgets) wins:
   every button in the shell is an accent-FILLED pill, hovered with `filter: brightness(1.1)`.
   So the hover here is a FILTER, not a background: brightening washes a blue pill out against
   white, and any background of ours would also flatten the neutral variants (`.wb-btn.wb-seg`,
   the BOM buttons) that legitimately paint their own. Darkening leaves every variant correct —
   a filled pill deepens, a white one greys. */
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn {
    border-radius: var(--wb-radius-sm);
    box-shadow: var(--wb-shadow);
    transition: filter var(--wb-t), box-shadow var(--wb-t), background var(--wb-t), color var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn:hover {
    filter: brightness(0.94);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.12);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn:active {
    filter: brightness(0.88);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.18);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn.is-disabled,
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn[disabled] { box-shadow: none; }

/* The HEADER reads as a menubar, not a row of ten solid pills. Filled buttons are how an
   ACTION is marked, and every item up there is navigation — so in this theme the toolbar
   items are quiet by default and the accent is spent on the menu that is actually open.
   In-panel `.wb-btn`s keep the filled pill, which is what makes them read as the action. */
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item {
    background: transparent;
    color: var(--wb-fg);
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 500;
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item i { color: var(--wb-fg-muted); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item:hover,
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-toolbar-group-btn:not(.is-open):hover {
    background: var(--wb-row-hover);
    color: var(--wb-fg);
    border-color: var(--wb-border);
    filter: none;
    box-shadow: none;
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item:hover i { color: var(--wb-fg); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-toolbar-group-btn.is-open,
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item.is-active {
    background: var(--wb-accent-soft);
    color: var(--wb-accent);
    border-color: transparent;
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-toolbar-group-btn.is-open i,
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar .wb-btn.wb-toolbar-item.is-active i { color: var(--wb-accent); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar-group-btn.is-open {
    background: var(--wb-accent-soft);
    color: var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar-group-menu,
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar-submenu,
.peacock-workbench[data-wb-theme="studio-light"] .wb-nb-settings-pop {
    border-radius: var(--wb-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar-group-item:hover,
.peacock-workbench[data-wb-theme="studio-light"] .wb-toolbar-subgroup:hover > .wb-has-submenu {
    background: var(--wb-row-hover);
}
/* the shared context menu is body-mounted, so it carries the theme via wb-ctxm-theme-* */
.d3view-context-menu-container.peacock-main-ctxm.wb-ctxm-theme-studio-light {
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
}
/* dock + model tabs: the active one is carried by an accent underline, not just bold text */
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-tab {
    border-radius: var(--wb-radius-sm) var(--wb-radius-sm) 0 0;
    transition: color var(--wb-t), background var(--wb-t), box-shadow var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-tab:hover { background: var(--wb-row-hover); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-tab.is-active {
    background: var(--wb-panel);
    box-shadow: inset 0 -2px 0 var(--wb-accent);
}
/* scene-bar / nav-bar segments: the hardcoded rgba(74,126,181,.18) is a dark-shell tint */
.peacock-workbench[data-wb-theme="studio-light"] .wb-sb-btn.is-active,
.peacock-workbench[data-wb-theme="studio-light"] .wb-nb-segbtn.is-active,
.peacock-workbench[data-wb-theme="studio-light"] .wb-nb-btn.is-active,
.peacock-workbench[data-wb-theme="studio-light"] .wb-nb-btn:active {
    background: var(--wb-accent-soft);
    border-color: var(--wb-accent);
    color: var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-sb-btn,
.peacock-workbench[data-wb-theme="studio-light"] .wb-dock-winbtn {
    transition: background var(--wb-t), color var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-chip {
    background: var(--wb-panel);
    border-color: var(--wb-border);
    border-radius: 999px;
    transition: background var(--wb-t), border-color var(--wb-t), color var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-chip:hover {
    background: var(--wb-row-hover);
    border-color: var(--wb-border-strong);
    color: var(--wb-fg);
}

/* -- 2c. Inputs: one height, one radius, one focus ring -- */
.peacock-workbench[data-wb-theme="studio-light"] input[type="text"],
.peacock-workbench[data-wb-theme="studio-light"] input[type="number"],
.peacock-workbench[data-wb-theme="studio-light"] input[type="search"],
.peacock-workbench[data-wb-theme="studio-light"] textarea,
.peacock-workbench[data-wb-theme="studio-light"] select {
    background: var(--wb-input-bg);
    color: var(--wb-fg);
    border-color: var(--wb-border);
    border-radius: var(--wb-radius-sm);
    transition: border-color var(--wb-t), box-shadow var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] input[type="text"]:focus,
.peacock-workbench[data-wb-theme="studio-light"] input[type="number"]:focus,
.peacock-workbench[data-wb-theme="studio-light"] input[type="search"]:focus,
.peacock-workbench[data-wb-theme="studio-light"] textarea:focus,
.peacock-workbench[data-wb-theme="studio-light"] select:focus,
.peacock-workbench[data-wb-theme="studio-light"] .wb-parts-search-input:focus {
    outline: none;
    border-color: var(--wb-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
/* keyboard users get the same ring on the controls that are not inputs */
.peacock-workbench[data-wb-theme="studio-light"] .wb-btn:focus-visible,
.peacock-workbench[data-wb-theme="studio-light"] .wb-chip:focus-visible,
.peacock-workbench[data-wb-theme="studio-light"] .wb-sb-btn:focus-visible,
.peacock-workbench[data-wb-theme="studio-light"] .wb-nb-btn:focus-visible,
.peacock-workbench[data-wb-theme="studio-light"] .wb-rail-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-parts-toolbar {
    background: var(--wb-panel-2);
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-parts-search-input {
    background: var(--wb-input-bg);
    border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm);
}

/* -- 2d. Rows: trees, lists, tables -- */
.peacock-workbench[data-wb-theme="studio-light"] .wb-tree-row {
    border-radius: var(--wb-radius-sm);
    transition: background var(--wb-t), box-shadow var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-tree-row.is-selected {
    background: var(--wb-accent-soft);
    box-shadow: inset 2px 0 0 var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-nodeset-row {
    box-shadow: var(--wb-shadow);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-nodeset-row:hover {
    background: var(--wb-row-hover);
    border-color: var(--wb-border-strong);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-nodeset-row.is-selected {
    background: var(--wb-accent-soft);
    border-color: var(--wb-border);
    border-left-color: var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] table th {
    background: var(--wb-panel-2);
    color: var(--wb-fg-muted);
}

/* -- 2e. Scrollbars: thin, on-surface, only as present as they need to be -- */
.peacock-workbench[data-wb-theme="studio-light"] *::-webkit-scrollbar {
    width: 10px; height: 10px;
}
.peacock-workbench[data-wb-theme="studio-light"] *::-webkit-scrollbar-track {
    background: transparent;
}
.peacock-workbench[data-wb-theme="studio-light"] *::-webkit-scrollbar-thumb {
    background: #d3d8e0;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
.peacock-workbench[data-wb-theme="studio-light"] *::-webkit-scrollbar-thumb:hover {
    background: #b6bec9;
    background-clip: padding-box;
}
.peacock-workbench[data-wb-theme="studio-light"] *::-webkit-scrollbar-corner {
    background: transparent;
}

/* -- 2f. The empty-viewport screen (Drop files / Saved Projects) ------------------------
   That card is peacock.v3's `.peacock-kickstart`, and it carries its OWN local palette
   (`--pk-glass`, `--pk-text*`, `--pk-edge`, … declared on `.peacock-kickstart` in
   subrata_plugins/peacock.v3/css/peacock.css) — a dark glass panel, hardcoded. So it stayed
   dark while the shell around it went light: the one surface in the workbench that ignored
   the theme.
   Fixing it is a TOKEN RE-POINT, not a re-skin: the `--pk-*` values are ordinary custom
   properties on that element, so overriding them here re-tones every rule that reads them —
   the card, the dropzone, the Saved Projects list, the sample rows and the file-type chips —
   without editing peacock.v3 (a shared file this plugin does not own) and without touching a
   single one of its rules. Scoped to studio-light, so Studio Dark keeps the card it was
   designed for. Calm Light and Precision are deliberately left alone. */
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart,
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart .pk-projects {
    --pk-glass:       rgba(255, 255, 255, 0.94);
    --pk-canvas-0:    #f6f7f9;
    --pk-panel:       #ffffff;
    --pk-panel-2:     #f6f7f9;
    --pk-edge:        rgba(16, 24, 40, 0.10);
    --pk-blue:        #2563eb;
    --pk-blue-bright: #2563eb;
    --pk-blue-deep:   #1d4ed8;
    --pk-text-hi:     #101828;
    --pk-text:        #344054;
    --pk-text-dim:    #667085;
    --pk-text-faint:  #98a2b3;
}
/* the card's own lift was authored for a dark scene: an inset white highlight plus a deep
   black drop. Both read as grime on a light ground, so it takes the theme's elevation. */
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 12px 32px -12px rgba(16, 24, 40, 0.18);
    border-color: var(--wb-border);
}
/* the three status chips are the only text colours not on a --pk-* token, and at their
   dark-scene brightness they wash out on white. Same hues, taken down to AA. */
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart .pk-proj-chip-up {
    background: rgba(6, 118, 71, 0.10); color: #067647;
}
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart .pk-proj-chip-sim {
    background: rgba(37, 99, 235, 0.10); color: #1d4ed8;
}
.peacock-workbench[data-wb-theme="studio-light"] .peacock-kickstart .pk-proj-chip-orphan {
    background: rgba(181, 71, 8, 0.10); color: #b54708;
}

/* -- 2g. The two floating CANVAS overlays (transport + view controls) --------------------
   ⚠ THE ONE THING A LIGHT THEME BREAKS BY CONSTRUCTION. Both pills are built as
   `background: var(--wb-rail-bg)` with a HARDCODED `color: #fff` and white-alpha borders — they
   assume the rail token is dark, which it is in every other theme. Here the rail is white, so
   the pill went white and took its white text and white-alpha borders with it: the play buttons,
   the frame fields and the readout all disappeared into the pill.
   They are floating glass over the 3D scene rather than shell chrome, so they are rebuilt here as
   a LIGHT pill: near-opaque white, a hairline border and the theme's elevation to lift them off
   the canvas, with the ink and every white-alpha edge re-pointed onto tokens. Every rule below
   exists because it hardcodes a white that is invisible on white. */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport,
.peacock-workbench[data-wb-theme="studio-light"] .wb-view-controls {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--wb-fg);
    border: 1px solid var(--wb-border);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10), 0 10px 28px -10px rgba(16, 24, 40, 0.22);
}
/* buttons: muted at rest, full ink plus a hover wash, so they read as controls not as labels */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-btn,
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-btn {
    color: var(--wb-fg-muted);
    border-radius: var(--wb-radius-sm);
    transition: background var(--wb-t), color var(--wb-t);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-btn:hover,
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-btn:hover {
    background: var(--wb-row-hover);
    color: var(--wb-fg);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport.is-pinned .wb-transport-pin,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-play.is-buffering {
    color: var(--wb-accent);
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-grip,
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-grip { color: var(--wb-fg-dim); opacity: 1; }
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-sep { background: var(--wb-border); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-btn:hover { background: var(--wb-row-hover); }
/* the frame fields and the fps select were white text on a white-alpha outline */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-num,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-fps,
.peacock-workbench[data-wb-theme="studio-light"] .wb-eigv-mode {
    background: var(--wb-input-bg);
    color: var(--wb-fg);
    border: 1px solid var(--wb-border);
    opacity: 1;
}
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-num::placeholder { color: var(--wb-fg-dim); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-fps:hover,
.peacock-workbench[data-wb-theme="studio-light"] .wb-eigv-mode:hover { background: var(--wb-row-hover); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-num:focus,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-fps:focus,
.peacock-workbench[data-wb-theme="studio-light"] .wb-eigv-mode:focus {
    border-color: var(--wb-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
/* the scrubber and the amplitude slider ride the accent */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-scrub,
.peacock-workbench[data-wb-theme="studio-light"] .wb-eigv-amp { accent-color: var(--wb-accent); }
/* buffering strip + the eigenvalue row: every one of these was a white alpha */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-buffer-track { background: rgba(16, 24, 40, 0.10); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-buffer-spin { border-color: rgba(16, 24, 40, 0.18); border-top-color: var(--wb-accent); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-buffer-txt { color: var(--wb-fg-muted); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-eigv { border-top-color: var(--wb-border); }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-eigv-badge { background: var(--wb-accent-soft); color: var(--wb-accent); }
/* the readout leans on opacity for hierarchy, which reads as washed-out grey on a light pill */
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-lbl,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-sep { color: var(--wb-fg-muted); opacity: 1; }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-state,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-last,
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-time,
.peacock-workbench[data-wb-theme="studio-light"] .wb-eigv-ampval { color: var(--wb-fg); opacity: 1; }
.peacock-workbench[data-wb-theme="studio-light"] .wb-transport-eigv-hint { color: var(--wb-fg-dim); opacity: 1; }
.peacock-workbench[data-wb-theme="studio-light"] .wb-vc-btn span { color: var(--wb-fg-muted); opacity: 1; }

/* END THEME — studio-light
   ========================================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   Run Workflow — R2026-173 (section 3), workbench/run-workflow.js
   The mode body (4-step breadcrumb flow) + the Saved workflows Selection panel. Everything reads
   the --wb-*
   tokens, so it follows the theme; studio-light is the default and the FormBuilder /
   workflow-app surfaces mounted inside sit flush with it without any re-pointing.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.peacock-workbench .wb-rwf { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---- empty state ---- */
.peacock-workbench .wb-rwf-empty {
    flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.peacock-workbench .wb-rwf-empty-ic {
    font-size: calc(40px * var(--wb-font-scale, 1)); opacity: 0.28; margin-bottom: 12px; display: block;
}
.peacock-workbench .wb-rwf-empty h3 {
    margin: 0 0 6px; font-size: calc(15px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
}
.peacock-workbench .wb-rwf-empty p {
    margin: 0 0 14px; color: var(--wb-fg-muted); max-width: 52ch;
}
.peacock-workbench .wb-rwf-empty-actions { display: flex; gap: 8px; justify-content: center; }

/* ---- the compact strip ---- */
.peacock-workbench .wb-rwf-strip {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 8px 16px;
    background: var(--wb-panel); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-rwf-srclab {
    flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-rwf-deckmeta {
    font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.peacock-workbench .wb-rwf-chip {
    margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    color: var(--wb-accent); background: var(--wb-accent-soft, var(--wb-row-hover));
    border: 1px solid var(--wb-accent); border-radius: 20px; padding: 2px 9px;
}

.peacock-workbench .wb-rwf-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.peacock-workbench .wb-rwf-step { padding: 14px 16px 6px; }

/* ---- a region card ---- */
.peacock-workbench .wb-rwf-reg {
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius); margin-bottom: 12px; overflow: hidden;
    box-shadow: var(--wb-shadow, 0 1px 2px rgba(16, 24, 40, .06));
}
.peacock-workbench .wb-rwf-reg-h {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-rwf-reg-h > i { color: var(--wb-accent); font-size: calc(13px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-rwf-reg-h > b { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600; }
.peacock-workbench .wb-rwf-reg-b { padding: 13px 14px; }
.peacock-workbench .wb-rwf-tag {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); padding: 2px 8px; border-radius: 10px;
}

/* ---- the Saved | Library choice cards ---- */
.peacock-workbench .wb-rwf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 720px) { .peacock-workbench .wb-rwf-cards { grid-template-columns: 1fr; } }
.peacock-workbench .wb-rwf-card {
    display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
    background: var(--wb-panel); color: var(--wb-fg);
    border: 1.5px solid var(--wb-border-strong, var(--wb-border));
    border-radius: var(--wb-radius-sm); padding: 12px 14px;
    transition: background var(--wb-t, .16s) ease, border-color var(--wb-t, .16s) ease;
}
.peacock-workbench .wb-rwf-card:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-rwf-card.is-on {
    border-color: var(--wb-accent); background: var(--wb-accent-soft, var(--wb-row-hover));
    box-shadow: inset 0 0 0 1px var(--wb-accent);
}
.peacock-workbench .wb-rwf-card .ct { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.peacock-workbench .wb-rwf-card .ct > i { color: var(--wb-fg-muted); font-size: calc(15px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-rwf-card.is-on .ct > i { color: var(--wb-accent); }
.peacock-workbench .wb-rwf-card .ct > b { font-size: calc(13px * var(--wb-font-scale, 1)); font-weight: 600; }
.peacock-workbench .wb-rwf-card .cd {
    display: block; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.5;
}
.peacock-workbench .wb-rwf-card .api {
    display: inline-block; margin-top: 7px; font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); padding: 2px 6px; border-radius: 4px;
}

/* ---- validation banner ---- */
.peacock-workbench .wb-rwf-vbanner {
    display: flex; gap: 10px; padding: 11px 13px; margin-bottom: 12px;
    border-radius: var(--wb-radius-sm);
    background: var(--wb-panel); border: 1px solid var(--wb-danger, #d92d20);
    box-shadow: inset 3px 0 0 var(--wb-danger, #d92d20);
}
.peacock-workbench .wb-rwf-vbanner > i { color: var(--wb-danger, #d92d20); margin-top: 2px; }
.peacock-workbench .wb-rwf-vbanner b { display: block; margin-bottom: 3px; }
.peacock-workbench .wb-rwf-vbanner ul { margin: 0; padding-left: 18px; color: var(--wb-fg-muted); }

/* ---- notes ---- */
.peacock-workbench .wb-rwf-note {
    display: flex; gap: 9px; padding: 10px 13px; margin: 0 14px 12px;
    border-radius: var(--wb-radius-sm); font-size: calc(11.5px * var(--wb-font-scale, 1));
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg-muted); line-height: 1.55;
}
.peacock-workbench .wb-rwf-note > i { color: var(--wb-accent); margin-top: 1px; }
.peacock-workbench .wb-rwf-note.is-warn { border-color: var(--wb-warn, #b54708); }
.peacock-workbench .wb-rwf-note.is-warn > i { color: var(--wb-warn, #b54708); }
.peacock-workbench .wb-rwf-note b { color: var(--wb-fg); }

/* ---- run error ---- */
.peacock-workbench .wb-rwf-err {
    display: flex; gap: 10px; padding: 11px 14px;
    border-bottom: 1px solid var(--wb-border); background: var(--wb-panel-2);
    box-shadow: inset 3px 0 0 var(--wb-danger, #d92d20);
}
.peacock-workbench .wb-rwf-err > i { color: var(--wb-danger, #d92d20); margin-top: 2px; }
.peacock-workbench .wb-rwf-err .msg {
    color: var(--wb-fg-muted); margin-top: 3px; word-break: break-word;
    font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    font-size: calc(11px * var(--wb-font-scale, 1));
}

/* ---- the mounted surfaces ----
   FormBuilder and the workflow app bring their own skin; give them room and a scroller and
   otherwise leave them alone. */
.peacock-workbench .wb-rwf-fb { min-height: 120px; }

/** THE RUN STEP FILLS ITS HEIGHT. The workflow canvas is the point of step 2, and a 45-worker graph in
    a 320px letterbox is unreadable. `full-h + pl-flex-v + flex-1` applied down the whole chain the
    stepper builds — tab-content > tab-pane > .user-input-container are the component's own wrappers and
    are height:auto by default, so the flex chain dies at the first one unless they are included. Only
    the RUN step is targeted; step 1 keeps its natural flow-and-scroll. */
.peacock-workbench .wb-rwf-flow .tab-content { flex: 1; min-height: 0; }
.peacock-workbench .wb-rwf-flow .tab-content > .tab-pane.active,
.peacock-workbench .wb-rwf-flow .user-input-container { height: 100%; min-height: 0; }

/** The run step's height chain is the shared utilities on the markup — `full-h pl-flex-v` on the step,
    `flex-1 pl-flex-v` on the region, `flex-1` on the host (plugins.css). Only what those cannot express
    is left here: `min-height:0`, without which a flex child refuses to shrink below its content and the
    canvas pushes the column taller than the pane; and the host's floor. */
.peacock-workbench .wb-rwf-step--run { min-height: 0; padding-bottom: 14px; }
.peacock-workbench .wb-rwf-step--run .wb-rwf-reg--run { min-height: 0; margin-bottom: 0; }
.peacock-workbench .wb-rwf-wfhost { min-height: 360px; }

.peacock-workbench .wb-rwf-btn {
    height: 30px; padding: 0 14px; border-radius: var(--wb-radius-sm);
    border: 1px solid var(--wb-border); background: var(--wb-panel-2); color: var(--wb-fg);
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background var(--wb-t, .16s) ease;
}
.peacock-workbench .wb-rwf-btn:hover { background: var(--wb-row-hover); }


/* ---- step 1 : the inline remote-lookup browser ----
   Plugins.Views.RemoteLookupSelectionsView brings its OWN Bootstrap skin (.pl-rm-generic-selections),
   so nothing here restyles it — it only gets a bounded, scrolling box to live in. The one thing it
   cannot do for itself is fill a flex column: its root is `full-h`, which resolves against a parent
   that has to be told to be a flex item, hence min-height:0 down the chain. */
/** ⚠ EVERY REGION IN A FLEX-COLUMN STEP MUST DECLARE ITS OWN GROW/SHRINK.
    `.wb-rwf-reg` inherits `flex: 0 1 auto`, so flex-SHRINK is 1 — and the picker region's intrinsic
    content height is the whole 50-row list, which overflows the bounded pane. The browser then shrinks
    EVERY sibling proportionally, and because `.wb-rwf-reg` is `overflow:hidden` for its rounded corners
    the loser gets CLIPPED rather than scrolled. Measured: the Saved | Library cards region came out
    65px tall around 93px of cards, i.e. the two choice cards were invisible. So the fixed-height
    regions are pinned `0 0 auto` and only the one that owns the leftover space grows. */
.peacock-workbench .wb-rwf-step--source > .wb-rwf-reg,
.peacock-workbench .wb-rwf-step--source > .wb-rwf-vbanner,
.peacock-workbench .wb-rwf-step--finish > .wb-rwf-reg { flex: 0 0 auto; }
.peacock-workbench .wb-rwf-step--source > .wb-rwf-reg--picker,
.peacock-workbench .wb-rwf-step--finish > .wb-rwf-reg--out { flex: 1 1 auto; }

.peacock-workbench .wb-rwf-reg--picker { min-height: 0; margin-bottom: 0; }
.peacock-workbench .wb-rwf-reg--picker > .wb-rwf-reg-b { min-height: 0; padding: 10px 12px; }
.peacock-workbench .wb-rwf-picker { min-height: 260px; }
.peacock-workbench .wb-rwf-picker > .pl-rm-generic-selections { height: 100%; min-height: 0; }

/* the "what is chosen" chip in the picker header — a selection made 400px down a scrolling list
   has to be readable without scrolling back up to it */
.peacock-workbench .wb-rwf-sel {
    margin-left: auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    padding: 2px 9px; border-radius: 20px;
}
.peacock-workbench .wb-rwf-sel.is-on {
    color: var(--wb-accent); border-color: var(--wb-accent);
    background: var(--wb-accent-soft, var(--wb-row-hover));
}
/** ⚠ MUTED HAS TO BE RELATIVE TO THE ROW, NOT AN ABSOLUTE TOKEN.
    These two spans come from our own `formatSelection`, so they render inside the shared list's
    `.list-group-item` — which INVERTS to white-on-accent when the row is selected. A fixed
    `--wb-fg-muted` on the id was therefore dark-on-blue and unreadable on exactly the row you had just
    picked. `color: inherit` + opacity reads correctly in both states, and needs no `.ui-selected` /
    `.active` override, so it stays correct if the shared component changes which class marks a
    selection. */
.peacock-workbench .wb-rwf-wfname { font-weight: 600; color: inherit; }
.peacock-workbench .wb-rwf-wfid {
    margin-left: 7px; font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: inherit; opacity: .62;
    background: transparent; border: 0; padding: 0;
}

/* ---- step 2 : the deck -> START input map ----
   The map step is ordinary flow content in a bounded pane, so it scrolls itself; step 1's picker and
   steps 3/4's hosts flex-fill instead (see their own blocks). */
.peacock-workbench .wb-rwf-step--source { min-height: 0; }
.peacock-workbench .wb-rwf-step--map { min-height: 0; overflow-y: auto; }

.peacock-workbench .wb-rwf-map {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 14px;
}
@media (max-width: 720px) {
    .peacock-workbench .wb-rwf-map { grid-template-columns: 1fr; }
    .peacock-workbench .wb-rwf-maparrow { transform: rotate(90deg); }
}
.peacock-workbench .wb-rwf-mapcol { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.peacock-workbench .wb-rwf-maplab {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-rwf-maparrow {
    align-self: center; padding-bottom: 8px;
    color: var(--wb-accent); font-size: calc(16px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-rwf-deckcard {
    display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 38px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 8px 12px;
}
.peacock-workbench .wb-rwf-deckcard > i {
    flex: 0 0 auto; color: var(--wb-accent); font-size: calc(16px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-rwf-deckcard .d { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
/* the View button must never be squeezed by a long filename — the name ellipsises instead */
.peacock-workbench .wb-rwf-deckcard .wb-rwf-mini { flex: 0 0 auto; margin-left: 4px; }
.peacock-workbench .wb-rwf-deckcard .d > b {
    font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-rwf-deckcard .d > span {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Select2 3.5.5 replaces the <select>, so the bare element is only ever seen for the half-second
   before it initialises (and if it fails to). Size it like the deck card so the row cannot jump. */
.peacock-workbench .wb-rwf-fsel {
    width: 100%; min-height: 38px; padding: 0 10px;
    background: var(--wb-panel-2); color: var(--wb-fg);
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm);
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-rwf-maphint {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.5;
}
.peacock-workbench .wb-rwf-maphint b { color: var(--wb-fg); }

.peacock-workbench .wb-rwf-mapnote {
    display: flex; gap: 9px; margin-top: 12px; padding: 9px 12px;
    border-radius: var(--wb-radius-sm); font-size: calc(11px * var(--wb-font-scale, 1));
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    color: var(--wb-fg-muted); line-height: 1.55;
}
.peacock-workbench .wb-rwf-mapnote > i { flex: 0 0 auto; color: var(--wb-accent); margin-top: 2px; }
.peacock-workbench .wb-rwf-mapnote b,
.peacock-workbench .wb-rwf-mapnote code { color: var(--wb-fg); }

/* one "other START input" row — label left, the FormBuilder-rendered control right */
.peacock-workbench .wb-rwf-row {
    display: grid; grid-template-columns: 170px 1fr; align-items: center;
    gap: 12px; padding: 7px 0;
}
@media (max-width: 720px) { .peacock-workbench .wb-rwf-row { grid-template-columns: 1fr; } }
.peacock-workbench .wb-rwf-row + .wb-rwf-row { border-top: 1px solid var(--wb-border); }
.peacock-workbench .wb-rwf-row > label {
    margin: 0; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600; color: var(--wb-fg);
}
/* FormBuilder's single-input renderer brings its own <li class="field-item"> chrome, including a
   label we have already drawn — drop only that, and leave the control alone. */
.peacock-workbench .wb-rwf-rowfb .field-item > label,
.peacock-workbench .wb-rwf-rowfb .field-item .pl-editor-title { display: none; }
.peacock-workbench .wb-rwf-rowfb ul.field-items { margin: 0; padding: 0; list-style: none; }
.peacock-workbench .wb-rwf-rowfb li.field-item { padding: 0; border: 0; background: none; }

.peacock-workbench .wb-rwf-hpc {
    display: flex; gap: 9px; padding: 8px 12px; border-radius: var(--wb-radius-sm);
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.55;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-rwf-hpc > i { flex: 0 0 auto; margin-top: 2px; }
.peacock-workbench .wb-rwf-hpc b, .peacock-workbench .wb-rwf-hpc code { color: var(--wb-fg); }
.peacock-workbench .wb-rwf-hpc.is-ok > i      { color: var(--wb-success, #067647); }
.peacock-workbench .wb-rwf-hpc.is-swapped > i { color: var(--wb-accent); }
.peacock-workbench .wb-rwf-hpc.is-unresolved  { border-color: var(--wb-warn, #b54708); }
.peacock-workbench .wb-rwf-hpc.is-unresolved > i { color: var(--wb-warn, #b54708); }

/* ---- "View all workflow inputs" — the step-2 disclosure ----
   Closed on arrival, and it toggles by CLASS only: re-rendering the step would tear down the mounted
   FormBuilder (with any half-typed value and whichever input group the user was on), which is why
   `_toggleAllInputs` never calls render(). The header is a real <button>, so it is keyboard-reachable
   and carries aria-expanded; `.wb-rwf-reg-h` already styles it, only the button reset is needed. */
.peacock-workbench .wb-rwf-disc-h {
    width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left;
    cursor: pointer; padding: 10px 14px;
}
.peacock-workbench .wb-rwf-disc-h:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-rwf-disc-c {
    flex: 0 0 auto; margin-left: 10px; color: var(--wb-fg-muted);
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: transform var(--wb-t, .16s) ease;
}
.peacock-workbench .wb-rwf-disc.is-open .wb-rwf-disc-c { transform: rotate(180deg); }
/* the body is only in the DOM once, so collapse it rather than removing it */
.peacock-workbench .wb-rwf-disc > .wb-rwf-disc-b { display: none; }
.peacock-workbench .wb-rwf-disc.is-open > .wb-rwf-disc-b { display: block; }
/** A START worker can carry 70+ inputs, so the form gets its own bounded box — otherwise opening the
    disclosure pushes the deck mapping (the point of the step) off the top of the pane.
    Updated by shashank2104 on 08/20/2026 - R2026-190 - ⭐ height MUST BE DEFINITE, not min/max-height.
    FormBuilder's `inputsView: 'nested'` renders a jQuery-UI layout whose panes are absolutely positioned
    off a `height: 100%` chain; with an auto-height host that chain resolves to 0 and the form paints its
    search bar and NOTHING ELSE — that is the "View all workflow inputs shows empty" bug. */
.peacock-workbench .wb-rwf-allfb { height: 46vh; min-height: 300px; overflow: hidden; }

/* ---- the small header-level button (run controls, View workflow) ---- */
.peacock-workbench .wb-rwf-mini {
    margin-left: 8px; height: 24px; padding: 0 10px; border-radius: var(--wb-radius-sm);
    border: 1px solid var(--wb-border); background: var(--wb-panel-2); color: var(--wb-fg);
    font: inherit; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background var(--wb-t, .16s) ease, border-color var(--wb-t, .16s) ease;
}
.peacock-workbench .wb-rwf-mini:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-rwf-mini.is-primary { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-rwf-runctl { display: inline-flex; align-items: center; }
/* the status chip already takes the free space via margin-left:auto, so the controls that follow it
   must not also claim it */
.peacock-workbench .wb-rwf-reg-h .wb-rwf-tag + .wb-rwf-runctl { margin-left: 0; }

.peacock-workbench .wb-rwf-loaderr,
.peacock-workbench .wb-rwf-outmiss {
    display: flex; gap: 8px; padding: 12px; color: var(--wb-fg-muted);
    font-size: calc(11.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-rwf-loaderr > i { color: var(--wb-warn, #b54708); }

/* ---- step 4 : results & the save choice ---- */
.peacock-workbench .wb-rwf-step--finish { min-height: 0; padding-bottom: 14px; }
.peacock-workbench .wb-rwf-reg--out { min-height: 0; margin-bottom: 0; }
.peacock-workbench .wb-rwf-reg--out > .wb-rwf-reg-b { min-height: 0; }

.peacock-workbench .wb-rwf-check {
    display: flex; align-items: flex-start; gap: 11px; margin: 0; cursor: pointer; font-weight: 400;
}
.peacock-workbench .wb-rwf-check > input { flex: 0 0 auto; margin: 2px 0 0; }
.peacock-workbench .wb-rwf-check > span { display: flex; flex-direction: column; gap: 3px; }
.peacock-workbench .wb-rwf-check b { font-size: calc(12px * var(--wb-font-scale, 1)); font-weight: 600; }
.peacock-workbench .wb-rwf-check em {
    font-style: normal; font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); line-height: 1.55;
}
.peacock-workbench .wb-rwf-check em b { color: var(--wb-fg); font-size: inherit; }

/* The outputs accordion is the workflow app's own `wf-flow-modal-outputs-tpl` + WorkerInputView, so
   it arrives with the workflow skin. Only the panel frame is re-pointed at the --wb-* tokens so the
   accordion does not read as a foreign white card inside the workbench. */
.peacock-workbench .wb-rwf-outs .panel {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); box-shadow: none; margin-bottom: 8px;
}
.peacock-workbench .wb-rwf-outs .panel-heading { background: transparent; border-bottom: 1px solid var(--wb-border); }
.peacock-workbench .wb-rwf-outs .panel-title > a { color: var(--wb-fg); font-weight: 600; text-decoration: none; }
.peacock-workbench .wb-rwf-outs .panel-title > a > i { color: var(--wb-accent); margin-right: 5px; }

/* ═══ the Saved workflows Selection panel ═══ */
.peacock-workbench .wb-rwf-panel { display: flex; flex-direction: column; min-height: 0; }
.peacock-workbench .wb-rwf-panel-empty {
    text-align: center; color: var(--wb-fg-muted); padding: 26px 10px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); line-height: 1.6;
}
.peacock-workbench .wb-rwf-panel-empty > i {
    font-size: calc(26px * var(--wb-font-scale, 1)); opacity: .3; display: block; margin-bottom: 9px;
}
.peacock-workbench .wb-rwf-panel-empty .note { margin-top: 7px; opacity: .8; }

.peacock-workbench .wb-rwf-wfcard {
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 9px 11px; margin-bottom: 8px;
    transition: background var(--wb-t, .16s) ease, border-color var(--wb-t, .16s) ease;
}
.peacock-workbench .wb-rwf-wfcard:hover { background: var(--wb-row-hover); border-color: var(--wb-accent); }
.peacock-workbench .wb-rwf-wfcard .t { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.peacock-workbench .wb-rwf-wfcard .t > i { color: var(--wb-accent); }
.peacock-workbench .wb-rwf-wfcard .t > b {
    flex: 1; min-width: 0; font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peacock-workbench .wb-rwf-wfcard .m {
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.65;
}
.peacock-workbench .wb-rwf-wfcard .m code {
    font-family: var(--wb-mono, ui-monospace, Menlo, monospace);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    color: var(--wb-fg); padding: 0 4px; border-radius: 3px;
}
.peacock-workbench .wb-rwf-wfacts { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.peacock-workbench .wb-rwf-pill {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; padding: 2px 6px; border-radius: 9px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-rwf-pill.is-ok {
    color: var(--wb-success, #067647); border-color: var(--wb-success, #067647);
}
.peacock-workbench .wb-rwf-pill.is-warn {
    color: var(--wb-warn, #b54708); border-color: var(--wb-warn, #b54708);
}
.peacock-workbench .wb-rwf-panel-note {
    display: flex; gap: 7px; margin-top: 4px; font-size: calc(10.5px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); line-height: 1.55;
}
.peacock-workbench .wb-rwf-panel-note > i { margin-top: 2px; }

/** The inspector's ONE bounded scroller is .wb-inspector-context, and an action row inside it is
    pinned with .wb-panel-foot (sticky bottom) — the selection-panel contract in the plugin CLAUDE.md.
    It must be the LAST element in flow for that to hold. */
.peacock-workbench .wb-rwf-panel-foot {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wb-border);
    background: var(--wb-panel); display: flex; gap: 8px;
}

/** ═══════════════════════════════════════════════════════════════════════════════════════════════
 *  Added by shashank2104 on 08/18/2026 - R2026-173 (item #7) - THE LOGS RAIL PANE.
 *
 *  Themed with --wb-* tokens only, and the header/search/empty-state deliberately match
 *  .wb-sim-pane-head / .wb-sim-pane-search / .wb-sim-pane-empty so Simulations, Saved, Examples and
 *  Logs read as one family of rail panes. No heights anywhere: the pane flexes (see the .wb-leftpane
 *  block near the top of this file) and the body is the single bounded scroller.
 *  ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.wb-logs-pane {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--wb-panel); color: var(--wb-fg);
    font-size: calc(12px * var(--wb-font-scale, 1));
}

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
.wb-logs-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--wb-border);
    background: var(--wb-panel-2);
}
.wb-logs-title {
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--wb-accent);
    display: inline-flex; align-items: center; gap: 6px;
}
.wb-logs-title > i { font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0.8; }
.wb-logs-count {
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    padding: 1px 6px; border-radius: 999px;
}
.wb-logs-spacer { flex: 1; }
.wb-logs-iconbtn {
    background: transparent; border: 1px solid transparent;
    color: var(--wb-fg-muted); cursor: pointer;
    width: 24px; height: 24px; padding: 0; border-radius: var(--wb-radius-sm, 4px);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease,
                border-color var(--wb-t, .15s) ease;
}
.wb-logs-iconbtn:hover { color: var(--wb-fg); border-color: var(--wb-border); background: var(--wb-panel); }
.wb-logs-iconbtn:focus { outline: none; border-color: var(--wb-accent); }

/* ── search ─────────────────────────────────────────────────────────────────────────────────── */
.wb-logs-search {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    margin: 10px 10px 6px; padding: 6px 10px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); border-radius: 6px;
    transition: border-color var(--wb-t, .15s) ease, box-shadow var(--wb-t, .15s) ease;
}
.wb-logs-search:focus-within { border-color: var(--wb-accent); box-shadow: 0 0 0 2px rgba(0,0,0,0.04); }
.wb-logs-search > i { color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); }
.wb-logs-search input {
    flex: 1; border: 0; outline: none; background: transparent;
    color: var(--wb-fg); font-size: calc(12px * var(--wb-font-scale, 1)); min-width: 0;
}
.wb-logs-clearsearch {
    background: transparent; border: 0; padding: 0 2px; cursor: pointer;
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1));
    transition: color var(--wb-t, .15s) ease;
}
.wb-logs-clearsearch:hover { color: var(--wb-fg); }

/* ── filters ────────────────────────────────────────────────────────────────────────────────── */
.wb-logs-filters { flex: 0 0 auto; padding: 0 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.wb-logs-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.wb-logs-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
    padding: 2px 8px; border-radius: 999px; cursor: pointer;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); line-height: 1.6;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease,
                border-color var(--wb-t, .15s) ease;
}
.wb-logs-chip:hover { color: var(--wb-fg); border-color: var(--wb-accent); }
.wb-logs-chip:focus { outline: none; border-color: var(--wb-accent); }
.wb-logs-chip.is-active { background: var(--wb-accent); color: #fff; border-color: var(--wb-accent); }
.wb-logs-chip.is-active .wb-logs-chip-n { background: rgba(255,255,255,0.22); color: #fff; }
.wb-logs-chip-n {
    background: var(--wb-panel-2); color: var(--wb-fg-muted);
    border-radius: 999px; padding: 0 5px; font-size: calc(9.5px * var(--wb-font-scale, 1)); font-weight: 700;
}
/* The dot is the level's colour, so a chip is identifiable before you read it. */
.wb-logs-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.65; }
.wb-logs-chip--all   .wb-logs-chip-dot { display: none; }
.wb-logs-chip--info  .wb-logs-chip-dot { background: var(--wb-accent); opacity: 1; }
.wb-logs-chip--warn  .wb-logs-chip-dot { background: var(--wb-warning, #b7791f); opacity: 1; }
.wb-logs-chip--error .wb-logs-chip-dot { background: var(--wb-danger, #c0392b); opacity: 1; }
.wb-logs-chip--debug .wb-logs-chip-dot,
.wb-logs-chip--trace .wb-logs-chip-dot { background: var(--wb-fg-muted); opacity: 1; }

.wb-logs-selectrow { display: flex; gap: 6px; }
.wb-logs-select {
    flex: 1; min-width: 0;
    background: var(--wb-panel); border: 1px solid var(--wb-border); color: var(--wb-fg);
    border-radius: var(--wb-radius-sm, 4px); padding: 3px 6px;
    font-size: calc(11px * var(--wb-font-scale, 1)); cursor: pointer;
    transition: border-color var(--wb-t, .15s) ease;
}
.wb-logs-select:hover  { border-color: var(--wb-accent); }
.wb-logs-select:focus  { outline: none; border-color: var(--wb-accent); }

/* ── body ───────────────────────────────────────────────────────────────────────────────────── */
.wb-logs-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 2px 0 6px;
    border-top: 1px solid var(--wb-border);
}
.wb-logs-row {
    display: flex; align-items: baseline; gap: 6px;
    padding: 3px 10px;
    border-left: 2px solid transparent;
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.45;
    transition: background var(--wb-t, .15s) ease;
}
.wb-logs-row:hover { background: var(--wb-row-hover); }
.wb-logs-ts {
    flex: 0 0 auto; color: var(--wb-fg-muted); opacity: 0.75;
    font-family: ui-monospace, Menlo, monospace; font-size: calc(10px * var(--wb-font-scale, 1));
}
.wb-logs-level {
    flex: 0 0 auto; text-transform: uppercase; font-weight: 700;
    font-size: calc(8.5px * var(--wb-font-scale, 1)); letter-spacing: 0.4px;
    min-width: 34px; color: var(--wb-fg-muted);
}
.wb-logs-main { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.wb-logs-msg { color: var(--wb-fg); }
.wb-logs-target {
    display: inline-block; margin-left: 6px; padding: 0 5px;
    background: var(--wb-panel-2); border: 1px solid var(--wb-border); border-radius: 999px;
    color: var(--wb-fg-muted); font-size: calc(9.5px * var(--wb-font-scale, 1));
}
.wb-logs-dur { margin-left: 6px; color: var(--wb-fg-muted); font-size: calc(9.5px * var(--wb-font-scale, 1)); }
.wb-logs-dl {
    margin-left: 6px; color: var(--wb-accent); text-decoration: underline;
    font-size: calc(10px * var(--wb-font-scale, 1)); cursor: pointer;
}
.wb-logs-dl:hover { color: var(--wb-accent); opacity: 0.8; }

/* Level colouring. The left border is what makes a wall of INFO scannable for the one ERROR. */
.wb-logs-row--info  .wb-logs-level { color: var(--wb-accent); }
.wb-logs-row--warn  { border-left-color: var(--wb-warning, #b7791f); }
.wb-logs-row--warn  .wb-logs-level,
.wb-logs-row--warn  .wb-logs-msg { color: var(--wb-warning, #b7791f); }
.wb-logs-row--error { border-left-color: var(--wb-danger, #c0392b); background: rgba(192, 57, 43, 0.05); }
.wb-logs-row--error .wb-logs-level,
.wb-logs-row--error .wb-logs-msg { color: var(--wb-danger, #c0392b); }
.wb-logs-row--debug .wb-logs-msg,
.wb-logs-row--trace .wb-logs-msg { color: var(--wb-fg-muted); }

.wb-logs-empty {
    padding: 20px 12px; text-align: center;
    color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-style: italic;
}

/* ── footer ─────────────────────────────────────────────────────────────────────────────────── */
.wb-logs-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    border-top: 1px solid var(--wb-border); background: var(--wb-panel-2);
    color: var(--wb-fg-muted); font-size: calc(10px * var(--wb-font-scale, 1));
}
.wb-logs-resetfilters {
    margin-left: auto;
    background: transparent; border: 1px solid var(--wb-border); color: var(--wb-fg-muted);
    padding: 1px 8px; border-radius: var(--wb-radius-sm, 4px); cursor: pointer;
    font-size: calc(10px * var(--wb-font-scale, 1));
    transition: color var(--wb-t, .15s) ease, border-color var(--wb-t, .15s) ease;
}
.wb-logs-resetfilters:hover { color: var(--wb-fg); border-color: var(--wb-accent); }

/** Added by shashank2104 on 08/18/2026 - R2026-173 (item #7) - THE BOTTOM DOCK'S LOG TAB IS HIDDEN.
 *  Logs now live in the rail pane, and two log surfaces reading two different stores is exactly the
 *  confusion this ticket exists to clear. Hidden rather than deleted, deliberately: dock.js's log
 *  tab definition, its live-rebind poll and its download/clear inline actions are all still in place
 *  and still functional, so restoring it is removing these two rules. **/
.wb-dock-tab[data-wb-docktab="log"],
[data-wb-docktab="log"],
.wb-dock-log-inline-actions { display: none !important; }

/** ── R2026-173 (item #4) - d3plot CONVERSION OPTIONS ──────────────────────────────────────────
 *  Added by shashank2104 on 08/18/2026.
 *
 *  The `Configure` control that opens the worker's own ConfigureWfWorker form, and the `id=value`
 *  tag row that shows what the user changed. Two surfaces, same shapes: the Open dialog
 *  (`.wb-open-deck-*`) and the Simulations panel (`.wb-sim-deck-*`).
 *
 *  ⭐ Both tag rows are `:empty { display: none }` — an unconfigured simulation must look EXACTLY
 *  as it does today, with no reserved space and no empty chrome. **/

/* Open dialog — the banner row */
.wb-open-modal-host .wb-open-deck-row {
    display: flex; align-items: stretch; gap: 8px;
    margin: 4px 16px 10px;
    min-width: 0;
}
/** ⚠ `min-width: 0` is load-bearing on BOTH the row and the button. A flex item will not shrink
 *  below its own min-content width without it, so the deck button keeps its full label, the row
 *  overflows and the Configure control is pushed out of the pane — which is exactly what happened
 *  in the narrow left rail. With it, the label ellipsises (the `> span:first-of-type` rule above
 *  already sets `overflow/text-overflow`) and Configure stays pinned on the right. **/
.wb-open-modal-host .wb-open-deck-row > .wb-open-deck { width: auto; flex: 1 1 auto; margin: 0; min-width: 0; }
.wb-open-modal-host .wb-open-deck-cfg {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    border: 1px solid var(--wb-border); border-radius: var(--d3v-r-md, 8px);
    background: var(--wb-panel);
    color: var(--wb-fg-muted); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease,
                background var(--d3v-t-fast, 0.15s) ease;
}
.wb-open-modal-host .wb-open-deck-cfg:hover:not([disabled]),
.wb-open-modal-host .wb-open-deck-cfg.is-set {
    border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-row-hover);
}
.wb-open-modal-host .wb-open-deck-cfg:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 2px; }
.wb-open-modal-host .wb-open-deck-cfg[disabled] { cursor: progress; opacity: 0.7; }

/* Open dialog — the tag row, pulled up under the button it describes */
.wb-open-modal-host .wb-open-deck-tags {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin: -6px 16px 10px 16px;
}
.wb-open-modal-host .wb-open-deck-tags:empty { display: none; }

/* the per-row Configure on the base d3plot attachment — matches the View button beside it */
.wb-open-modal-host .wb-open-att-cfg {
    flex: 0 0 auto;
    background: transparent; color: var(--wb-fg-muted);
    border: 1px solid var(--wb-border);
    padding: 3px 9px; border-radius: 6px;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); cursor: pointer;
    display: inline-flex; align-items: center;
    margin-left: 6px;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.wb-open-modal-host .wb-open-att-cfg:hover { border-color: var(--wb-accent); color: var(--wb-accent); }

/* Simulations panel — the same two pieces, at that pane's smaller scale */
/** The left rail is NARROW, so this row is where the shrink rules actually bite — see the
 *  `min-width: 0` note above. The deck label ellipsises; Configure never shrinks and never wraps,
 *  so it stays on the right instead of being pushed out of the pane. **/
.peacock-workbench .wb-sim-deck-row { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.peacock-workbench .wb-sim-deck-row > .wb-sim-deck { flex: 1 1 auto; width: auto; min-width: 0; }
/** The size chip is the first thing worth losing when the rail gets tight — the label already
 *  says what the button does, and the size is repeated on the d3plot rows underneath. */
.peacock-workbench .wb-sim-deck-row > .wb-sim-deck .wb-sim-deck-size { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.peacock-workbench .wb-sim-deck-cfg {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    margin: 2px 0 6px;
    padding: 0 10px;
    border: 1px solid var(--wb-border); border-radius: 5px;
    background: var(--wb-panel);
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease,
                background var(--d3v-t-fast, 0.15s) ease;
}
.peacock-workbench .wb-sim-deck-cfg:hover:not([disabled]) {
    border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-row-hover);
}
.peacock-workbench .wb-sim-deck-cfg:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.peacock-workbench .wb-sim-deck-cfg[disabled] { cursor: progress; opacity: 0.72; }
.peacock-workbench .wb-sim-deck-tags {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin: -3px 0 7px;
}
.peacock-workbench .wb-sim-deck-tags:empty { display: none; }

/* the chips themselves — one shape, both surfaces */
.wb-open-modal-host .wb-open-deck-tag,
.peacock-workbench .wb-sim-deck-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 20px;
    border: 1px solid var(--wb-border); background: var(--wb-panel);
    color: var(--wb-fg);
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    white-space: nowrap;
}
/** A CORRECTED value is not a normal override — `d3plot01` never returns at all, so the tag has to
 *  read as a correction rather than as something the user chose. Status-warning tokens, not a
 *  hardcoded amber. **/
.wb-open-modal-host .wb-open-deck-tag.is-fix,
.peacock-workbench .wb-sim-deck-tag.is-fix {
    border-color: var(--d3v-status-warning, #b7791f);
    background: var(--d3v-status-warning-bg, rgba(183,121,31,0.10));
    color: var(--d3v-status-warning, #b7791f);
}
.wb-open-modal-host .wb-open-deck-clr,
.peacock-workbench .wb-sim-deck-clr {
    border: 0; background: transparent;
    color: var(--wb-fg-muted); cursor: pointer;
    padding: 2px 7px; border-radius: 20px;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    transition: color var(--d3v-t-fast, 0.15s) ease, background var(--d3v-t-fast, 0.15s) ease;
}
.wb-open-modal-host .wb-open-deck-clr:hover,
.peacock-workbench .wb-sim-deck-clr:hover {
    color: var(--d3v-status-danger, #c53030); background: var(--wb-row-hover);
}

/** R2026-173 (item #4) - the BUSY states. `_setJs3dBusy` disables every control that can start or
 *  change a conversion, so each of them needs a disabled look — otherwise a locked surface reads as
 *  an unresponsive one. **/
.wb-open-modal-host .wb-open-att-cfg[disabled],
.wb-open-modal-host .wb-open-att-pick[disabled],
.wb-open-modal-host .wb-open-deck-clr[disabled],
.peacock-workbench .wb-sim-deck-clr[disabled] {
    cursor: progress; opacity: 0.55; pointer-events: none;
}

/* ============================================================================
 * SPH Fluid dock tab (R2026-185) — canonical in this file (production loads
 * only peacock.workbench.css). Former peacock.sph.css folded in here.
 * Added by shashank2104 on 08/19/2026 at 12:09 PM - R2026-185 - merge peacock.sph.css into workbench.css.
 * =========================================================================== */
/* ===========================================================================
   R2026-185 - SPH Fluid dock tab.
   Scoped under the plugin root (.peacock-workbench) per the frontend standards.
   Colours, radii, shadows and transitions come from the --d3v-* foundation
   tokens with a --wb-* fallback so the panel still reads correctly if it is
   ever mounted outside the workbench shell.
   =========================================================================== */
.peacock-workbench .wb-sph {
    padding: 10px 12px 16px;
    font-size: 12.5px;
    color: var(--d3v-text-primary, #101828);
}

.peacock-workbench .wb-sph-head {
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7ec);
}
.peacock-workbench .wb-sph-title {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.peacock-workbench .wb-sph-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.peacock-workbench .wb-sph-stat {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-pill, 999px);
    background: var(--d3v-bg-secondary, #f6f7f9);
    border: 1px solid var(--d3v-border-subtle, #e4e7ec);
    color: var(--d3v-text-secondary, #667085);
}
.peacock-workbench .wb-sph-stat b { color: var(--d3v-text-primary, #101828); font-weight: 650; }
.peacock-workbench .wb-sph-stat.is-muted { opacity: .75; font-style: italic; }

.peacock-workbench .wb-sph-sec { margin-top: 16px; }
.peacock-workbench .wb-sph-sec-h {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d3v-text-secondary, #667085);
    margin-bottom: 8px;
}

.peacock-workbench .wb-sph-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.peacock-workbench .wb-sph-lbl {
    flex: 0 0 84px;
    font-size: 11.5px;
    color: var(--d3v-text-secondary, #667085);
    margin: 0;
    font-weight: 500;
}
.peacock-workbench .wb-sph-val {
    flex: 0 0 44px;
    text-align: right;
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    color: var(--d3v-text-primary, #101828);
}

.peacock-workbench .wb-sph-seg {
    display: inline-flex;
    border: 1px solid var(--d3v-border-default, #cfd4dc);
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
}
.peacock-workbench .wb-sph-seg button {
    appearance: none;
    border: 0;
    border-right: 1px solid var(--d3v-border-subtle, #e4e7ec);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #667085);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, .16s), color var(--d3v-t-fast, .16s);
}
.peacock-workbench .wb-sph-seg button:last-child { border-right: 0; }
.peacock-workbench .wb-sph-seg button:hover {
    background: var(--d3v-accent-soft, #eaf0ff);
    color: var(--d3v-accent-default, #2563eb);
}
.peacock-workbench .wb-sph-seg button:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--d3v-accent-default, #2563eb);
}
.peacock-workbench .wb-sph-seg button.is-active {
    background: var(--d3v-accent-default, #2563eb);
    color: #fff;
}

.peacock-workbench .wb-sph-range {
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;
    accent-color: var(--d3v-accent-default, #2563eb);
    cursor: pointer;
}

.peacock-workbench .wb-sph-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #101828);
    cursor: pointer;
    margin: 0;
}
.peacock-workbench .wb-sph-check input { accent-color: var(--d3v-accent-default, #2563eb); margin: 0; }

.peacock-workbench .wb-sph-fields { display: flex; flex-direction: column; gap: 3px; }
.peacock-workbench .wb-sph-field {
    appearance: none;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--d3v-r-md, 6px);
    padding: 6px 9px;
    font: inherit;
    font-size: 12px;
    color: var(--d3v-text-primary, #101828);
    cursor: pointer;
    transition: background var(--d3v-t-fast, .16s), border-color var(--d3v-t-fast, .16s), color var(--d3v-t-fast, .16s);
}
.peacock-workbench .wb-sph-field:hover {
    background: var(--d3v-bg-hover, rgba(37, 99, 235, .06));
    border-color: var(--d3v-border-subtle, #e4e7ec);
}
.peacock-workbench .wb-sph-field:focus-visible {
    outline: 0;
    border-color: var(--d3v-accent-default, #2563eb);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, #eaf0ff);
}
.peacock-workbench .wb-sph-field.is-active {
    background: var(--d3v-accent-soft, #eaf0ff);
    border-color: var(--d3v-accent-default, #2563eb);
    color: var(--d3v-accent-default, #2563eb);
    font-weight: 600;
}
.peacock-workbench .wb-sph-unit { color: var(--d3v-text-tertiary, #98a2b3); font-weight: 400; }

.peacock-workbench .wb-sph-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7ec);
    font-size: 12px;
}
.peacock-workbench .wb-sph-kv:last-of-type { border-bottom: 0; }
.peacock-workbench .wb-sph-kv span { color: var(--d3v-text-secondary, #667085); }
.peacock-workbench .wb-sph-kv b { font-weight: 650; }

.peacock-workbench .wb-sph-hint {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #667085);
}

.peacock-workbench .wb-sph-note {
    margin: 8px 0;
    padding: 8px 10px;
    font-size: 11.5px;
    line-height: 1.5;
    border-left: 3px solid var(--d3v-status-warning, #b54708);
    border-radius: 0 var(--d3v-r-md, 6px) var(--d3v-r-md, 6px) 0;
    background: var(--d3v-status-warning-bg, #fdf7f2);
    color: var(--d3v-text-primary, #101828);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Added by shashank2104 on 08/20/2026 - R2026-190 - THE ACTIVITY LOG (bottom dock, option C).

   Anatomy: ONE `.wb-alog-panel` (R2026-267) laid out as three columns — the command console, the
   log rows, and a bottom-anchored rail carrying the sparkline, the session counters and the single
   expand/collapse chevron. `.is-open` changes its HEIGHT and nothing else.

   ⚠ THE PANEL'S HEIGHT IS NOT ANIMATED, deliberately. DockView.syncDockChromeHeight() measures the
   region the instant the class flips, and a height transition would report the height it is
   animating FROM — leaving the collapsed dock pinned to the wrong height.

   Every colour / radius / transition comes from the shell's own --wb-* tokens, so the panel follows
   all four themes (calm-light / studio-dark / studio-light / precision) with no per-theme rules.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.peacock-workbench .wb-dock-alog { flex: 0 0 auto; }
.peacock-workbench .wb-alog {
    display: flex; flex-direction: column; min-width: 0;
    border-top: 1px solid var(--wb-border);
}

/* ── the two heights, and the row height they are built from ─────────────────────────────
   `--wb-alog-peek` is the band that survives a collapse: ONE prompt row beside TWO log rows. It is
   read by `.wb-alog-panel`, `.wb-alog-rail`, `.wb-alog-body` and `.wb-cmdc-in`, which is what keeps
   the two columns' bottom bands the same height as each other and as the collapsed panel. **/
.peacock-workbench .wb-alog {
    --wb-alog-row-h: 24px;
    --wb-alog-peek:  48px;   /* 2 × --wb-alog-row-h */
    --wb-alog-open:  264px;
}

/* ── level accents. One place; the dot, the row rail and the transcript all read from these. ─── */
.peacock-workbench .wb-alog {
    --alog-trace: var(--wb-fg-muted, #98a2b3);
    --alog-debug: #8b6ee0;
    --alog-info:  var(--wb-accent, #2563eb);
    --alog-warn:  #dc6803;
    --alog-error: #d92d20;
    --alog-ok:    #039855;
}
.peacock-workbench[data-wb-theme="studio-dark"] .wb-alog,
.peacock-workbench[data-wb-theme="precision"] .wb-alog {
    --alog-debug: #b692f6; --alog-warn: #fdb022; --alog-error: #f97066; --alog-ok: #47cd89;
}

/* ── THE PANEL ─────────────────────────────────────────────────────────────────────────
   Rewritten 09/02/2026 - R2026-267. ⭐⭐ COLLAPSED AND EXPANDED ARE ONE PANEL AND ONE LAYOUT.

   The only thing `.is-open` changes is the panel's HEIGHT. Nothing is swapped, hidden or rebuilt:
   every column is `justify-content: flex-end` inside an `overflow: hidden` box, so shrinking the
   panel clips it from the TOP and the bottom band survives untouched — the command prompt on the
   left, the newest log rows on the right, in the same pixels, from the same elements.

   That is why `--wb-alog-peek` is a real number and not a guess: it is the height of that band, and
   both the prompt row (`.wb-cmdc-in`) and the rows viewport (`.wb-alog-body`) claim exactly it as a
   minimum, so the collapsed panel shows one whole prompt beside two whole rows rather than slivers
   of whatever happened to be at the bottom.

   ⚠ THE PANEL'S HEIGHT IS STILL NOT ANIMATED, and for the original reason:
   DockView.syncDockChromeHeight() measures this element the instant the class flips, and a height
   transition would report the height it is animating FROM — pinning the collapsed dock to the wrong
   height. Only the background transitions.
   ⚠ `--wb-alog-peek` and `--wb-alog-row-h` ARE ONE DECISION: 48 = 2 × 24. Change either and change
   both, or the collapsed panel shows two-and-a-bit rows. **/
.peacock-workbench .wb-alog-panel {
    position: relative;      /* the positioning context for .wb-alog-rail */
    flex: 0 0 auto; display: flex; flex-direction: row; align-items: stretch;
    height: var(--wb-alog-peek); min-width: 0; overflow: hidden;
    background: var(--wb-panel);
    transition: background var(--wb-t, .14s) ease;
}
.peacock-workbench .wb-alog.is-open .wb-alog-panel { height: var(--wb-alog-open); }
/* Collapsed, the panel is a click target that opens itself (ActivityLogView.onPanelClick). Open, it
   is a working surface and neither the cursor nor the hover wash may suggest otherwise. */
.peacock-workbench .wb-alog:not(.is-open) .wb-alog-panel { cursor: pointer; }
.peacock-workbench .wb-alog:not(.is-open) .wb-alog-panel:hover { background: var(--wb-row-hover); }

/* ── the log column ────────────────────────────────────────────────────────────────
   The filter header is a normal first child. It is simply above the fold while the panel is short —
   which is the whole mechanism, and the reason there is no `display:none` anywhere in here. **/
.peacock-workbench .wb-alog-trail {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end;
    min-width: 0; min-height: 0; overflow: hidden;
}

/* ── the rail: the session counters and THE toggle ────────────────────────────────────
   ⭐⭐ ABSOLUTE, NOT A COLUMN. It shipped as the panel's third flex column, and a column reserves its
   width for the panel's WHOLE height even though this content only ever sits in the 48 px bottom
   band — measured, 253 px of a 1201 px panel (21%) with the activity sparkline in it, empty for 216
   of its 264 px, and the log rows squeezed to 347 px for it. Taking the sparkline out got it to
   122 px, which is better and still 122 px of dead width above the band at every height.

   Out of the flow, the log column gets the panel's full width and this floats over the bottom-right
   corner — where it is at the same coordinates whether you are opening or collapsing, which is the
   whole point of there being one toggle.

   ⚠ IT IS OPAQUE, and it has to be: the two rows under the collapsed band run the full width now, so
   a transparent rail would have row text reading through the gap between the count and the chevron.
   The hover rule below is not optional either — the collapsed panel washes to `--wb-row-hover` on
   hover, and a rail left at `--wb-panel` would sit there as a lighter rectangle. **/
.peacock-workbench .wb-alog-rail {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    height: var(--wb-alog-peek); padding: 0 10px 0 14px;
    background: var(--wb-panel);
}
.peacock-workbench .wb-alog:not(.is-open) .wb-alog-panel:hover .wb-alog-rail { background: var(--wb-row-hover); }
/* ⚠ A FADE, not a hard edge. The two rows in the band run the full width under this, so an opaque
   rail with a straight left edge SLICES a message mid-word and reads as a rendering fault. The
   gradient is the standard treatment for text passing under a pinned element, and it has to track
   the hover wash for the same reason the rail's own background does. */
.peacock-workbench .wb-alog-rail::before {
    content: ''; position: absolute; left: -28px; top: 0; bottom: 0; width: 28px;
    background: linear-gradient(to right, transparent, var(--wb-panel));
    pointer-events: none;
}
.peacock-workbench .wb-alog:not(.is-open) .wb-alog-panel:hover .wb-alog-rail::before {
    background: linear-gradient(to right, transparent, var(--wb-row-hover));
}

.peacock-workbench .wb-alog-dot {
    width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--alog-trace);
}
.peacock-workbench .wb-alog-lv-debug > .wb-alog-dot,
.peacock-workbench .wb-alog-lv-debug   .wb-alog-dot { background: var(--alog-debug); }
.peacock-workbench .wb-alog-lv-info  > .wb-alog-dot,
.peacock-workbench .wb-alog-lv-info    .wb-alog-dot { background: var(--alog-info); }
.peacock-workbench .wb-alog-lv-warn  > .wb-alog-dot,
.peacock-workbench .wb-alog-lv-warn    .wb-alog-dot { background: var(--alog-warn); }
.peacock-workbench .wb-alog-lv-error > .wb-alog-dot,
.peacock-workbench .wb-alog-lv-error   .wb-alog-dot { background: var(--alog-error); }

.peacock-workbench .wb-alog-time {
    flex: 0 0 auto; font-family: var(--wb-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-alog-cat {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--wb-fg-muted);
    background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    padding: 0 5px; border-radius: 4px; line-height: 14px;
}

.peacock-workbench .wb-alog-counts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.peacock-workbench .wb-alog-cnt {
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 700; line-height: 14px;
    padding: 0 6px; border-radius: 999px; border: 1px solid var(--wb-border);
    background: var(--wb-panel-2); color: var(--wb-fg-muted); font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-alog-cnt.is-warn { background: var(--alog-warn); border-color: var(--alog-warn); color: #fff; }
.peacock-workbench .wb-alog-cnt.is-err  { background: var(--alog-error); border-color: var(--alog-error); color: #fff; }

.peacock-workbench .wb-alog-drhd {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 8px; min-height: 30px;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-alog-cap {
    font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--wb-fg-muted); user-select: none;
}
.peacock-workbench .wb-alog-sep { width: 1px; height: 15px; background: var(--wb-border); flex: 0 0 auto; }
.peacock-workbench .wb-alog-grow { flex: 1 1 auto; }
.peacock-workbench .wb-alog-shown {
    flex: 0 0 auto; font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums;
}

.peacock-workbench .wb-alog-chips { display: inline-flex; align-items: center; gap: 4px; }
.peacock-workbench .wb-alog-chip {
    height: 19px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--wb-border); background: var(--wb-panel); border-radius: 999px;
    font-size: calc(10px * var(--wb-font-scale, 1)); font-weight: 650; line-height: 1;
    color: var(--wb-fg-muted); cursor: pointer; transition: all var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-alog-chip:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.peacock-workbench .wb-alog-chip.is-active {
    background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-fg);
}
.peacock-workbench .wb-alog-chip.is-err.is-active {
    background: var(--alog-error); border-color: var(--alog-error); color: #fff;
}
.peacock-workbench .wb-alog-chip-n {
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(9px * var(--wb-font-scale, 1)); opacity: .85; font-variant-numeric: tabular-nums;
}

.peacock-workbench .wb-alog-search { position: relative; display: inline-flex; align-items: center; }
.peacock-workbench .wb-alog-input {
    height: 21px; border: 1px solid var(--wb-border); background: var(--wb-panel);
    border-radius: var(--wb-radius-sm); padding: 0 8px; color: var(--wb-fg); outline: none;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); transition: all var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-alog-search .wb-alog-input { width: 150px; padding-right: 20px; }
.peacock-workbench .wb-alog-input:focus {
    border-color: var(--wb-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wb-accent) 18%, transparent);
}
.peacock-workbench .wb-alog-searchclear {
    position: absolute; right: 6px; font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); cursor: pointer;
}
.peacock-workbench .wb-alog-searchclear:hover { color: var(--wb-fg); }
.peacock-workbench .wb-alog-select { max-width: 150px; }

.peacock-workbench .wb-alog-icon {
    flex: 0 0 auto; width: 22px; height: 21px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; background: transparent; border-radius: var(--wb-radius-sm);
    color: var(--wb-fg-muted); cursor: pointer; font-size: calc(11px * var(--wb-font-scale, 1));
    transition: all var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-alog-icon:hover { background: var(--wb-row-hover); color: var(--wb-accent); }
.peacock-workbench .wb-alog-icon.is-active { color: var(--wb-accent); }

/* ── rows ──────────────────────────────────────────────────────────────────────
   ⭐ `min-height: --wb-alog-peek` AND NO VERTICAL PADDING is what makes the collapsed panel show two
   WHOLE rows. The viewport refuses to shrink below the peek, so the filter header above it is the
   part that overflows and gets clipped; padding here would eat into the band and leave a sliver of a
   third row. **/
.peacock-workbench .wb-alog-body {
    flex: 1 1 auto; min-height: var(--wb-alog-peek); overflow-y: auto; overflow-x: hidden; padding: 0;
}
.peacock-workbench .wb-alog-body::-webkit-scrollbar { width: 9px; }
.peacock-workbench .wb-alog-body::-webkit-scrollbar-thumb {
    background: var(--wb-border); border-radius: 5px; border: 2px solid var(--wb-panel);
}
.peacock-workbench .wb-alog-empty:not(:empty) {
    flex: 0 0 auto; padding: 10px 12px; font-size: calc(11px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted); line-height: 1.5;
}

/* ⚠⚠ THE ROW HEIGHT IS PINNED TO THE TOKEN, not left to add up. A row is a baseline-aligned flex line
   whose children are NOT all text — `.wb-alog-cat` is a 14px-line-height bordered chip and `.wb-alog-x`
   another — so the box grew to 25px from padding+line-height that reads as 24, and the collapsed panel
   showed two rows and a one-pixel sliver of a third. Measured, then pinned: `height` + `border-box` is
   what makes `--wb-alog-peek` = 2 × `--wb-alog-row-h` true rather than approximately true. Rows are
   single-line `nowrap`, so nothing is being clipped by this. */
.peacock-workbench .wb-alog-row {
    display: flex; align-items: baseline; gap: 8px; padding: 3px 10px 4px 8px;
    height: var(--wb-alog-row-h); box-sizing: border-box;
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 17px; white-space: nowrap;
    border-left: 2px solid transparent; cursor: default;
}
.peacock-workbench .wb-alog-row:hover { background: var(--wb-row-hover); }
.peacock-workbench .wb-alog-row.wb-alog-lv-warn  { border-left-color: var(--alog-warn);  background: rgba(220, 104, 3, .07); }
.peacock-workbench .wb-alog-row.wb-alog-lv-error { border-left-color: var(--alog-error); background: rgba(217, 45, 32, .08); }
.peacock-workbench .wb-alog-row.is-expanded { border-left-color: var(--wb-accent); background: var(--wb-row-hover); }
.peacock-workbench .wb-alog-row .wb-alog-dot { align-self: center; }
.peacock-workbench .wb-alog-row .wb-alog-msg {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--wb-fg);
}
.peacock-workbench .wb-alog-row.wb-alog-lv-trace .wb-alog-msg,
.peacock-workbench .wb-alog-row.wb-alog-lv-debug .wb-alog-msg { color: var(--wb-fg-muted); }

.peacock-workbench .wb-alog-target,
.peacock-workbench .wb-alog-model,
.peacock-workbench .wb-alog-dur {
    flex: 0 0 auto; font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    font-variant-numeric: tabular-nums;
}
.peacock-workbench .wb-alog-model { opacity: .8; }
.peacock-workbench .wb-alog-x {
    flex: 0 0 auto; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700;
    color: var(--wb-fg-muted); background: var(--wb-panel-2); border: 1px solid var(--wb-border);
    border-radius: 999px; padding: 0 5px; line-height: 13px;
}
.peacock-workbench .wb-alog-dl { flex: 0 0 auto; color: var(--wb-accent); font-size: calc(10px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-alog-res { flex: 0 0 auto; width: 12px; text-align: center; font-size: calc(9px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-alog-res-ok     .wb-alog-res { color: var(--alog-ok); }
.peacock-workbench .wb-alog-res-fail   .wb-alog-res { color: var(--alog-error); }
.peacock-workbench .wb-alog-res-noop   .wb-alog-res,
.peacock-workbench .wb-alog-res-cancel .wb-alog-res { color: var(--wb-fg-muted); }
.peacock-workbench .wb-alog-res-start  .wb-alog-res { color: var(--alog-info); }

/* the in-row detail — the structured entry behind a message (target / params / error / run id) */
.peacock-workbench .wb-alog-detail {
    display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px;
    padding: 6px 10px 8px 20px; background: var(--wb-panel-2);
    border-left: 2px solid var(--wb-accent); white-space: normal;
}
.peacock-workbench .wb-alog-dk {
    font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--wb-fg-muted);
}
.peacock-workbench .wb-alog-dv {
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg); word-break: break-word;
}

/* ---------------------------------------------------------------------------------------------
 * R2026-189 — Assembler (Assemblies / System Models).
 * The rail panes have two-line rows: a system model's name says nothing about whether it can be
 * opened, so the second line carries the counts, the project and the date that decide it.
 * ------------------------------------------------------------------------------------------ */
.peacock-workbench .wb-asm-pane {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    /* Nothing may escape the pane. Its own overflow was `visible`, so anything that got out was
       cut by `.wb-leftpane` (overflow-x:hidden) with no scrollbar - which is what "goes out of
       bounds" looked like. */
    overflow-x: hidden;
}

/* ⚠ THE SEARCH ICON OVERLAPPED THE TEXT. The shared `.wb-parts-search-input` pairs `padding-left:20px`
   with an icon at `left:6px`, but a global input rule on this page wins on padding and leaves the
   text starting under the icon. Restated here at three-class specificity so the pairing holds. */
.peacock-workbench .wb-asm-toolbar .wb-parts-search-wrap { width: 100%; min-width: 0; }
.peacock-workbench .wb-asm-toolbar .wb-parts-search-icon { left: 10px; }
.peacock-workbench .wb-asm-toolbar .wb-parts-search-input {
    height: 30px;
    padding-left: 28px;
    padding-right: 10px;
    border-radius: var(--d3v-r-md, 6px);
    box-sizing: border-box;
}

.peacock-workbench .wb-asm-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--wb-border, #3a3a3a);
}
.peacock-workbench select.wb-asm-project,
.wb-open-modal-host select.wb-asm-project {
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--wb-border, #3a3a3a);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--wb-input-bg, var(--wb-panel, #2e2e2e));
    color: var(--wb-fg, #d6d6d6);
    font-size: 12px;
    transition: border-color var(--d3v-t-fast, .15s) ease, box-shadow var(--d3v-t-fast, .15s) ease;
}
.peacock-workbench select.wb-asm-project:focus,
.wb-open-modal-host select.wb-asm-project:focus {
    outline: none;
    border-color: var(--wb-accent, #4a9eff);
    box-shadow: 0 0 0 2px var(--wb-accent-soft, rgba(74, 158, 255, .18));
}
.wb-open-modal-host .wb-open-sim-controls select.wb-asm-project { max-width: 280px; margin-right: 8px; }

.peacock-workbench .wb-asm-toggle {
    display: flex !important;      /* the global `label { display:block !important }` wins otherwise */
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--wb-fg-dim, #9a9a9a);
    cursor: pointer;
}
.peacock-workbench .wb-asm-toggle input { margin: 0; }

.peacock-workbench .wb-asm-count {
    padding: 6px 10px;
    font-size: 11px;
    color: var(--wb-fg-dim, #9a9a9a);
    flex: 0 0 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* ⭐ NARROW-PANE RULE: nothing here may claim a minimum width.
   The rail pane is user-resizable down to ~200px, and a flex ITEM defaults to `min-width:auto`,
   which is its CONTENT width - so a long row name or the Open button pushed the row wider than the
   pane and the list scrolled sideways, clipping the name off the left edge and taking the Open
   button off the right. Every link in the chain (pane -> list -> row -> body) is min-width:0 and
   the list refuses horizontal scroll outright, so the only possible outcome is an ellipsis. */
.peacock-workbench .wb-asm-list {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 96px; min-width: 0;
}
.peacock-workbench .wb-placeholder.wb-asm-error { color: var(--d3v-status-danger, #dc2626); }

.peacock-workbench .wb-asm-row {
    display: flex;
    align-items: center;
    /* The list is a plain block, but state this anyway: a row is content-height and never
       compressed by a sibling. Rows overlapping each other is what `wb-rail-list` used to cause. */
    flex: 0 0 auto;
    width: 100%;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    border-left: 2px solid transparent;
    min-width: 0;
    max-width: 100%;
    /* ⚠ content-box would add the 2px selection rail and the padding ON TOP of 100%, so every row
       sat 1px wider than the list and the list grew a horizontal scrollbar. */
    box-sizing: border-box;
    overflow: hidden;
    transition: background var(--d3v-t-fast, .15s) ease, border-color var(--d3v-t-fast, .15s) ease;
}
.peacock-workbench .wb-asm-row:hover { background: var(--wb-hover, rgba(255,255,255,.05)); }
.peacock-workbench .wb-asm-row.is-expanded { border-left-color: var(--wb-accent, #4a9eff); }
/* Listed but not openable: still shown, because saying nothing about a row the server publishes is
   worse than saying it holds nothing. */
.peacock-workbench .wb-asm-row.is-empty { opacity: .55; }
.peacock-workbench .wb-asm-chevron { flex: 0 0 10px; font-size: 11px; color: var(--wb-fg-dim, #9a9a9a); }
.peacock-workbench .wb-asm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.peacock-workbench .wb-asm-name {
    font-size: 12px; color: var(--wb-fg, #d6d6d6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-asm-sub {
    font-size: 10.5px; color: var(--wb-fg-dim, #9a9a9a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⭐ ALWAYS VISIBLE. It was hover-only, which on a touch/trackpad pass reads as "there is no way
   to open this", and it is the single most important control in the row. It is also the first thing
   to lose its label when the pane is narrow - the icon alone still says "open", a clipped word does
   not (`.wb-asm-open span` is dropped below the breakpoint at the end of this block). */
.peacock-workbench .wb-asm-open {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 8px;
    border: 1px solid var(--wb-border, #3a3a3a);
    border-radius: var(--d3v-r-sm, 4px);
    background: transparent;
    color: var(--wb-fg-dim, #9a9a9a);
    font-size: 11px;
    white-space: nowrap;
    opacity: .75;
    transition: opacity var(--d3v-t-fast, .15s) ease, background var(--d3v-t-fast, .15s) ease,
                color var(--d3v-t-fast, .15s) ease, border-color var(--d3v-t-fast, .15s) ease;
}
.peacock-workbench .wb-asm-row:hover .wb-asm-open,
.peacock-workbench .wb-asm-row.is-expanded .wb-asm-open { opacity: 1; }
.peacock-workbench .wb-asm-open:hover {
    background: var(--wb-accent, #4a9eff);
    border-color: var(--wb-accent, #4a9eff);
    color: #fff;
}
.peacock-workbench .wb-asm-children {
    padding: 2px 0 6px 20px;
    border-left: 1px solid var(--wb-border, #3a3a3a);
    margin-left: 14px;
    min-width: 0;
    overflow: hidden;
}
.peacock-workbench .wb-asm-child { min-width: 0; max-width: 100%; box-sizing: border-box; }
.peacock-workbench .wb-asm-children,
.peacock-workbench .wb-asm-toolbar,
.peacock-workbench .wb-asm-count { box-sizing: border-box; max-width: 100%; }

/* Below ~260px the row keeps the name, the counts and the icon; the button's word is what goes.
   Container queries are not available on this stack, so the breakpoint is on the pane element and
   the rail pane is the only thing that can be this narrow. */
@media (max-width: 1100px) {
    .peacock-workbench .wb-asm-sub { font-size: 10px; }
}
.peacock-workbench .wb-asm-pane.is-narrow .wb-asm-open span { display: none; }
.peacock-workbench .wb-asm-pane.is-narrow .wb-asm-open { padding: 0 6px; }
.peacock-workbench .wb-asm-pane.is-narrow .wb-asm-row { gap: 6px; padding: 7px 6px; }
.peacock-workbench .wb-asm-child {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; cursor: pointer; font-size: 11.5px;
    color: var(--wb-fg-dim, #9a9a9a);
    transition: background var(--d3v-t-fast, .15s) ease, color var(--d3v-t-fast, .15s) ease;
}
.peacock-workbench .wb-asm-child:hover { background: var(--wb-hover, rgba(255,255,255,.05)); color: var(--wb-fg, #d6d6d6); }
.peacock-workbench .wb-asm-child-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peacock-workbench .wb-asm-child-meta { flex: 0 0 auto; font-size: 10.5px; opacity: .8; }

/* Packaging a real vehicle is minutes of work, so the progress is pinned where it cannot scroll away. */
.peacock-workbench .wb-asm-busy {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--wb-border, #3a3a3a);
    background: var(--wb-panel-alt, rgba(255,255,255,.04));
    color: var(--wb-accent, #4a9eff);
    font-size: 11px;
}

.wb-open-modal-host .wb-open-sample-row.is-busy { opacity: .75; cursor: progress; }
.wb-open-modal-host .wb-open-sample-row.is-busy .wb-open-sample-file { color: var(--wb-accent, #4a9eff); }
.wb-open-modal-host .wb-open-asm-note:empty { display: none; }
.wb-open-modal-host .wb-open-asm-note { padding: 8px 12px; font-size: 12px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Added by shashankdhanakshirur on 08/25/2026 - R2026-225 - Tools ▸ IMAGE ANNOTATION.

   Two surfaces: the TAKEOVER over the viewport, and the inspector COLLECTION list. Both use the
   shell's own --wb-* tokens, so they follow every workbench theme (studio-light, studio-dark,
   calm-light, precision) without a single hardcoded colour.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the takeover ─────────────────────────────────────────────────────────────────────────
   `inset: 0` over the WHOLE `.peacock-workbench`, not the viewport region (R2026-225, 08/25):
   annotating is a full-attention job and the toolbar and inspector do nothing to a plate. Back to
   model is the way out.

   ⭐ THE CHROME IS A PEACOCK PANEL, NOT A BLUE BANNER. The first cut painted the bar
   `--wb-accent` end to end, which is the one colour this shell reserves for the ACTIVE control in a
   surface — a solid band of it reads as somebody else's product dropped into the workbench. It is now
   `--wb-panel-2` with a bottom border, exactly like the dock's tab strip and the inspector's header,
   and the accent is spent on the one primary button. */
.peacock-workbench .wb-ia-takeover {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--wb-bg, #eceff3);
}

.peacock-workbench .wb-ia-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    height: 44px;
    background: var(--wb-panel-2, #f6f7f9);
    color: var(--wb-fg, #101828);
    border-bottom: 1px solid var(--wb-border, #e4e7ec);
    font-size: calc(12px * var(--wb-font-scale, 1));
}

.peacock-workbench .wb-ia-title { font-weight: 700; }

.peacock-workbench .wb-ia-plate-name {
    color: var(--wb-fg-muted, #667085);
    font-size: calc(11px * var(--wb-font-scale, 1));
}

.peacock-workbench .wb-ia-sp { flex: 1 1 auto; }

.peacock-workbench .wb-ia-btn {
    border: 1px solid var(--wb-border, #e4e7ec);
    background: var(--wb-panel, #fff);
    color: var(--wb-fg, #101828);
    border-radius: var(--wb-radius-sm, 5px);
    padding: 5px 11px;
    font: 600 calc(11.5px * var(--wb-font-scale, 1))/1.2 inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.peacock-workbench .wb-ia-btn:hover { background: var(--wb-row-hover, #f2f5fb); }

.peacock-workbench .wb-ia-btn.is-primary {
    background: var(--wb-accent, #2563eb);
    color: var(--wb-accent-fg, #fff);
    border-color: var(--wb-accent, #2563eb);
}

.peacock-workbench .wb-ia-btn.is-primary:hover { filter: brightness(1.07); }

.peacock-workbench .wb-ia-btn:focus-visible {
    outline: 2px solid var(--wb-accent, #2563eb);
    outline-offset: 2px;
}

.peacock-workbench .wb-ia-expwrap { position: relative; }

.peacock-workbench .wb-ia-expmenu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 210px;
    background: var(--wb-panel, #fff);
    color: var(--wb-fg, #101828);
    border: 1px solid var(--wb-border, #e4e7ec);
    border-radius: var(--wb-radius, 8px);
    box-shadow: 0 14px 34px rgba(20, 30, 50, .22);
    overflow: hidden;
    z-index: 5;
}

.peacock-workbench .wb-ia-expmenu.is-open { display: block; }

.peacock-workbench .wb-ia-expmenu > div {
    padding: 8px 12px;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    cursor: pointer;
    display: flex;
    gap: 9px;
    align-items: center;
    transition: background .12s ease;
}

.peacock-workbench .wb-ia-expmenu > div + div { border-top: 1px solid var(--wb-divider, #eceef0); }
.peacock-workbench .wb-ia-expmenu > div:hover { background: var(--wb-row-hover, #f2f5fb); }

/* The editor mounts in here. `min-height:0` so the plugin's own flex column can actually scroll
   inside it instead of pushing the takeover past its host. */
.peacock-workbench .wb-ia-stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--wb-panel, #fff);
}

.peacock-workbench .wb-ia-stage .feature-classifier { height: 100%; }

/* ⭐ THE PLUGIN'S OWN CHROME PICKS UP THE WORKBENCH TOKENS. The annotator ships its `--d3v-*`
   foundation defaults, which are the LIGHT product palette — correct standalone, and wrong inside a
   shell the user may have on studio-dark or precision. Re-pointing the handful the plugin actually
   reads is what makes the two halves look like one tool; nothing is hardcoded and the standalone
   page is untouched. */
.peacock-workbench .wb-ia-stage .feature-classifier {
    --d3v-bg-primary:    var(--wb-panel, #fff);
    --d3v-bg-secondary:  var(--wb-panel-2, #f6f7f9);
    --d3v-bg-hover:      var(--wb-row-hover, #f2f5fb);
    --d3v-text-primary:  var(--wb-fg, #101828);
    --d3v-text-muted:    var(--wb-fg-muted, #667085);
    --d3v-border-subtle: var(--wb-border, #e4e7ec);
    --d3v-accent-primary:var(--wb-accent, #2563eb);
    --d3v-accent-on:     var(--wb-accent-fg, #fff);
    --d3v-accent-soft:   var(--wb-accent-soft, #f2f5fb);
    --d3v-r-sm:          var(--wb-radius-sm, 5px);
    --d3v-r-md:          var(--wb-radius, 8px);
    color: var(--wb-fg, #101828);
}

.peacock-workbench .wb-ia-stage .img-annotator-nav,
.peacock-workbench .wb-ia-stage .ia-domain-config {
    border-color: var(--wb-border, #e4e7ec);
}

.peacock-workbench .wb-ia-stage .ia-editor { background: var(--wb-panel-2, #f6f7f9); }

/* ── the inspector list ───────────────────────────────────────────────────────────────────── */
.peacock-workbench .wb-ia-panel {
    font-size: calc(12px * var(--wb-font-scale, 1));
    color: var(--wb-fg, #101828);
    min-height: 0;
}

.peacock-workbench .wb-ia-head {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-bottom: 1px solid var(--wb-divider, #eceef0);
    font-weight: 700;
}

/* R2026-225 - the panel header's close, matching the inspector's own tool headers. */
.peacock-workbench .wb-ia-head { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-ia-head-sp { flex: 1 1 auto; }

.peacock-workbench .wb-ia-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--wb-fg-muted, #667085);
    font-size: 17px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--wb-radius-sm, 5px);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.peacock-workbench .wb-ia-close:hover {
    background: var(--wb-row-hover, #f2f5fb);
    color: var(--wb-fg, #101828);
}

.peacock-workbench .wb-ia-close:focus-visible {
    outline: 2px solid var(--wb-accent, #2563eb);
    outline-offset: 1px;
}

.peacock-workbench .wb-ia-ctx {
    flex: 0 0 auto;
    margin: 9px 11px;
    padding: 8px 10px;
    border-radius: var(--wb-radius-sm, 6px);
    background: var(--wb-accent-soft, #f2f5fb);
    border: 1px solid var(--wb-border, #e4e7ec);
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    line-height: 1.5;
}

.peacock-workbench .wb-ia-actions { flex: 0 0 auto; display: flex; gap: 6px; padding: 0 11px 8px; }

.peacock-workbench .wb-ia-pbtn {
    flex: 1 1 0;
    border: 1px solid var(--wb-border, #e4e7ec);
    background: var(--wb-panel, #fff);
    color: var(--wb-fg, #101828);
    border-radius: var(--wb-radius-sm, 5px);
    padding: 6px 8px;
    font: 700 calc(11px * var(--wb-font-scale, 1))/1.2 inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.peacock-workbench .wb-ia-pbtn:hover:not(:disabled) { background: var(--wb-row-hover, #f2f5fb); }
.peacock-workbench .wb-ia-pbtn:disabled { opacity: .38; cursor: not-allowed; }

.peacock-workbench .wb-ia-pbtn.is-primary {
    background: var(--wb-accent, #2563eb);
    border-color: var(--wb-accent, #2563eb);
    color: var(--wb-accent-fg, #fff);
}

.peacock-workbench .wb-ia-pbtn:focus-visible {
    outline: 2px solid var(--wb-accent, #2563eb);
    outline-offset: 1px;
}

.peacock-workbench .wb-ia-hint {
    flex: 0 0 auto;
    padding: 0 12px 8px;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
    opacity: .68;
}

.peacock-workbench .wb-ia-lbl {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 5px;
    font: 800 calc(9.5px * var(--wb-font-scale, 1))/1 inherit;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wb-fg-muted, #667085);
}

.peacock-workbench .wb-ia-count {
    background: var(--wb-accent, #2563eb);
    color: var(--wb-accent-fg, #fff);
    border-radius: 9px;
    padding: 1px 7px;
    letter-spacing: 0;
}

.peacock-workbench .wb-ia-list { padding: 0 8px; min-height: 0; }

.peacock-workbench .wb-ia-empty {
    margin: 0;
    padding: 4px 5px 10px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    line-height: 1.5;
    color: var(--wb-fg-muted, #667085);
}

.peacock-workbench .wb-ia-plate {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: var(--wb-radius-sm, 5px);
    cursor: pointer;
    transition: background .12s ease;
}

.peacock-workbench .wb-ia-plate:hover { background: var(--wb-row-hover, #f2f5fb); }

.peacock-workbench .wb-ia-plate.is-active {
    background: var(--wb-accent-soft, #f2f5fb);
    box-shadow: inset 2px 0 0 var(--wb-accent, #2563eb);
}

.peacock-workbench .wb-ia-plate-main { flex: 1 1 auto; min-width: 0; }

.peacock-workbench .wb-ia-plate-name-row {
    display: block;
    font-weight: 600;
    font-size: calc(11.5px * var(--wb-font-scale, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peacock-workbench .wb-ia-plate-meta {
    display: block;
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--wb-fg-muted, #667085);
}

/* Row actions appear on hover or focus, so a list of ten plates is names rather than a wall of
   glyphs. They stay real buttons, so keyboard users reach them regardless of opacity. */
.peacock-workbench .wb-ia-plate-btns { flex: 0 0 auto; display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }

.peacock-workbench .wb-ia-plate:hover .wb-ia-plate-btns,
.peacock-workbench .wb-ia-plate.is-active .wb-ia-plate-btns,
.peacock-workbench .wb-ia-plate-btns:focus-within { opacity: 1; }

.peacock-workbench .wb-ia-plate-btn {
    border: 0;
    background: transparent;
    color: var(--wb-fg-muted, #667085);
    border-radius: var(--wb-radius-sm, 4px);
    padding: 3px 5px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.peacock-workbench .wb-ia-plate-btn:hover {
    background: var(--wb-panel-2, #f6f7f9);
    color: var(--wb-fg, #101828);
}

.peacock-workbench .wb-ia-plate-btn:focus-visible {
    outline: 2px solid var(--wb-accent, #2563eb);
    outline-offset: 1px;
}

.peacock-workbench .wb-ia-foot {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 9px 11px;
    border-top: 1px solid var(--wb-divider, #eceef0);
}

/* === R2026-235 — the simulation STEP (Back · header · Files | Responses | Activity) ==========
 *
 * Added by shashank2104 on 08/26/2026 - R2026-235.
 *
 * The step renders inside the SAME `.wb-sim-pane` flex column the list uses, so the tab body is the
 * one bounded scroller and the back bar / header / tab strip stay pinned — the shape every rail
 * pane in this shell already has. Tokens only; nothing hardcoded.
 * ========================================================================================== */
.wb-sim-back {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 7px 10px;
    background: var(--wb-panel-2); border: 0; border-bottom: 1px solid var(--wb-border);
    color: var(--wb-fg-muted); cursor: pointer; text-align: left;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    transition: color 0.12s ease, background 0.12s ease;
}
.wb-sim-back:hover { color: var(--wb-accent); background: var(--wb-row-hover); }
.wb-sim-back > i { font-size: calc(10px * var(--wb-font-scale, 1)); }

.wb-sim-detail-head {
    flex: 0 0 auto;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--wb-border);
}
/** Updated by shashank2104 on 08/26/2026 - R2026-235 - ONE LINE, not a 2-line clamp. The header is
 *  two rows now (identity, then actions) and the name shares its row with the status chip and the
 *  external-link button, so it ellipsises rather than growing downward. The full name and the record
 *  id are on its `title`. **/
.wb-sim-detail-title {
    flex: 1 1 auto; min-width: 0;
    color: var(--wb-fg); font-weight: 700;
    font-size: calc(13px * var(--wb-font-scale, 1));
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-sim-detail-sub {
    display: flex; align-items: center; gap: 6px; margin-top: 5px;
    font-size: calc(10.5px * var(--wb-font-scale, 1));
}
.wb-sim-detail-id { color: var(--wb-fg-muted); font-variant-numeric: tabular-nums; }
.wb-sim-detail-status {
    padding: 1px 7px; border-radius: 999px;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    color: var(--wb-fg-muted); text-transform: capitalize; white-space: nowrap;
}
.wb-sim-detail-status.is-finished,
.wb-sim-detail-status.is-completed { color: var(--wb-status-ok, #2e9e5b); border-color: currentColor; }
.wb-sim-detail-status.is-failed,
.wb-sim-detail-status.is-error    { color: var(--wb-status-bad, #c0392b); border-color: currentColor; }
.wb-sim-detail-status.is-running,
.wb-sim-detail-status.is-queued   { color: var(--wb-accent); border-color: currentColor; }

.wb-sim-tabs {
    flex: 0 0 auto;
    display: flex; align-items: stretch;
    border-bottom: 1px solid var(--wb-border);
    background: var(--wb-panel-2);
}
.wb-sim-tab {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 4px;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    color: var(--wb-fg-muted); cursor: pointer;
    font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.wb-sim-tab:hover { color: var(--wb-fg); background: var(--wb-row-hover); }
.wb-sim-tab.is-active { color: var(--wb-accent); border-bottom-color: var(--wb-accent); }
.wb-sim-tab > i { font-size: calc(11px * var(--wb-font-scale, 1)); opacity: 0.9; }
.wb-sim-tab-count {
    font-size: calc(9.5px * var(--wb-font-scale, 1)); font-variant-numeric: tabular-nums;
    background: var(--wb-panel); border: 1px solid var(--wb-border);
    padding: 0 5px; border-radius: 999px; color: var(--wb-fg-muted);
}

/* ⚠ THE ONE BOUNDED SCROLLER of the step. A tab host that measures 0px here would silently break
 *  LazyLoad in the Responses tab — the trap already recorded for the workers panel — so the host
 *  is given the flex remainder explicitly rather than being left to shrink to its content. */
.wb-sim-tabbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.wb-sim-tabhost { display: flex; flex-direction: column; min-height: 220px; height: 100%; }
.wb-sim-children.is-tab { border: 0; margin: 0; padding: 6px 10px 12px; }

/** Added by shashank2104 on 08/26/2026 - R2026-235 - the simulation step header, in TWO ROWS.
 *
 *  Row 1 is identity (name · status · open-in-app), row 2 is every action this step offers. It
 *  replaces a four-row head — title, an id/status chip row, a d3plot row and a deck row — that spent
 *  most of a ~320px rail restating what the list already showed and ellipsised the run's own name to
 *  do it. **/
.peacock-workbench .wb-sim-detail-line1 {
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.peacock-workbench .wb-sim-detail-line1 > .wb-sim-detail-status { flex: 0 0 auto; }
.peacock-workbench .wb-sim-detail-line1 > .wb-sim-iconbtn { flex: 0 0 auto; margin-left: auto; }

/** ⚠ WRAPS ON PURPOSE. Three controls do not fit a 320px rail on one line, and the alternative —
 *  shrinking every label until it ellipsises — makes "Import model" and "Import d3plot" read the
 *  same. They wrap; the d3plot pair does not (see `.wb-sim-act-pair`). **/
.peacock-workbench .wb-sim-detail-acts {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
    margin-top: 8px; min-width: 0;
}
.peacock-workbench .wb-sim-act {
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    border: 1px solid var(--wb-border); border-radius: 5px;
    background: var(--wb-panel-2, var(--wb-panel));
    color: var(--wb-fg); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.15s) ease, background var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.peacock-workbench .wb-sim-act > i { flex: 0 0 auto; color: var(--wb-accent); font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sim-act > span { overflow: hidden; text-overflow: ellipsis; }
.peacock-workbench .wb-sim-act:hover:not([disabled]) { border-color: var(--wb-accent); color: var(--wb-accent); background: var(--wb-row-hover); }
.peacock-workbench .wb-sim-act:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.peacock-workbench .wb-sim-act[disabled] { cursor: progress; opacity: 0.72; }

/** ⭐ The cog configures THAT conversion, so it is welded to its own button and the pair never wraps
 *  apart — split across two rows they read as two unrelated controls. **/
.peacock-workbench .wb-sim-act-pair { display: inline-flex; flex: 0 1 auto; min-width: 0; }
.peacock-workbench .wb-sim-act-pair > .wb-sim-act:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.peacock-workbench .wb-sim-act-pair > .wb-sim-act + .wb-sim-act { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.peacock-workbench .wb-sim-act-cog { padding: 0 9px; }
.peacock-workbench .wb-sim-act-cog > i { color: var(--wb-fg-muted); }
.peacock-workbench .wb-sim-act-cog:hover:not([disabled]) > i { color: var(--wb-accent); }

/** 3D | GraphR — a real two-state group, so which one the container is showing is readable without
 *  pressing anything. The ACTIVE half is the accent fill; the other is a plain button. **/
.peacock-workbench .wb-sim-seg {
    flex: 0 0 auto;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--wb-border); border-radius: 5px; overflow: hidden;
}
/** ⚠ 28px, not 30 — the group carries a 1px border of its own, so 28 + 2 makes it exactly as tall
 *  as the plain `.wb-sim-act` buttons it sits beside. **/
.peacock-workbench .wb-sim-seg-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 10px; border: 0;
    background: var(--wb-panel-2, var(--wb-panel));
    color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.peacock-workbench .wb-sim-seg-btn + .wb-sim-seg-btn { border-left: 1px solid var(--wb-border); }
.peacock-workbench .wb-sim-seg-btn > i { font-size: calc(10.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-sim-seg-btn:hover:not(.is-active) { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-sim-seg-btn.is-active { background: var(--wb-accent); color: #fff; }
.peacock-workbench .wb-sim-seg-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(61, 139, 253, 0.35); }

/* ============================================================================
   Added by shashank2104 on 09/01/2026 - the empty-state card's "Import from
   Simulation" now mounts the SAME pane the left rail opens
   (Peacock.Workbench.Views.SimulationsPaneView) instead of the old
   simulation + attachment form.

   Two things have to be given to it here:

   1. A DEFINITE HEIGHT. `.wb-sim-pane` is `height: 100%` (it is built for the
      rail's flex column) and the kickstart card is auto-height, so mounted as
      it stands the pane collapses to its header. The mount is the flex column
      the rail normally provides.
   2. THE WHOLE CARD. The card is two columns once Saved Projects is on it
      (`pk-has-projects`), which would leave the pane ~46% of 860px - narrower
      than the rail it was drawn for. While the sim view is up the projects
      column steps aside and the card widens.
   ============================================================================ */
.peacock-workbench .peacock-kickstart.pk-showing-sim,
.peacock-workbench .peacock-kickstart.pk-has-projects.pk-showing-sim {
    width: 760px;
    max-width: 96%;
    overflow: hidden;   /* the pane owns the scrolling, not the card */
}
.peacock-workbench .peacock-kickstart.pk-has-projects.pk-showing-sim .pk-projects {
    display: none;
}
.peacock-workbench .peacock-kickstart.pk-has-projects.pk-showing-sim > .pk-view-sim {
    flex: 1 1 100%;
    text-align: left;
}
.peacock-workbench .peacock-kickstart.pk-showing-sim .pk-view-sim {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.peacock-workbench .pk-sim-mount {
    height: 56vh;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--wb-border);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--wb-panel);
    overflow: hidden;
}
/* The pane's own root + its inner shell, sized the way the rail sizes them. */
.peacock-workbench .pk-sim-mount > .wb-sim-rail-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.peacock-workbench .pk-sim-mount .wb-sim-pane {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
/* FilterView hangs its count badge off the funnel button's top-right corner, ~6px outside the row.
   The rail pane has the same row but no rounded clip; here the mount clips, so give it the gutter. */
.peacock-workbench .pk-sim-mount .wb-sim-inline-filters { padding-right: 6px; }

/* ── Import-only (the empty-state card) ──────────────────────────────────────────────────────────
   Added by shashank2104 on 09/01/2026. The card asks ONE question — which model do I open — so the
   run step is Files alone (`_detailTabs` returns one entry and the template renders no strip below
   two) and the two import buttons are the loudest thing on it. Everything below is scoped under
   `.is-import-only`, which only the card's pane carries, so the rail's pane is untouched. */
.peacock-workbench .is-import-only .wb-sim-detail-acts {
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--wb-border);
}
/* Import model is the primary action: accent fill, taller, and it takes the row it is on. */
.peacock-workbench .is-import-only .wb-sim-act {
    height: 36px;
    padding: 0 14px;
    font-size: calc(12.5px * var(--wb-font-scale, 1));
}
.peacock-workbench .is-import-only .wb-sim-act > i {
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .is-import-only .wb-sim-act[data-wb-sim-deck] {
    flex: 1 1 220px;
    justify-content: center;
    background: var(--wb-accent);
    border-color: var(--wb-accent);
    color: #fff;
}
.peacock-workbench .is-import-only .wb-sim-act[data-wb-sim-deck] > i { color: #fff; }
.peacock-workbench .is-import-only .wb-sim-act[data-wb-sim-deck]:hover:not([disabled]) {
    background: var(--wb-accent);
    border-color: var(--wb-accent);
    color: #fff;
    filter: brightness(1.08);
}
/* Import d3plot stays secondary — it is the results, not the model. */
.peacock-workbench .is-import-only .wb-sim-act-pair { flex: 1 1 200px; }
.peacock-workbench .is-import-only .wb-sim-act-pair > .wb-sim-js3d {
    flex: 1 1 auto;
    justify-content: center;
}
/* With no tab strip the file list would butt straight into the actions. */
.peacock-workbench .is-import-only .wb-sim-children.is-tab { padding-top: 10px; }

/** ═══════════════════════════════════════════════════════════════════════════════════════════════
 *  Added by shashank2104 on 09/02/2026 - R2026-265 - FOLLOW (LS-PrePost Follow Point / Follow Plane).
 *
 *  FLAT, not carded. The first cut boxed every section in `--wb-panel-2`, which put three grey slabs
 *  down a 279px panel that already sits on `--wb-panel` — the sections read as separate widgets
 *  rather than as one form. Sections are now a label plus rows, separated by the same hairline the
 *  rest of the shell uses, and nothing inside carries a fill except the controls themselves.
 *  Tokens only (`--wb-*`, with `--d3v-*` behind them); no hardcoded colours, no new primitives.
 *  ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.peacock-workbench .wb-follow-view { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.peacock-workbench .wb-follow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.peacock-workbench .wb-follow > * { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
.peacock-workbench .wb-follow-head { display: flex; align-items: center; gap: 8px; flex: none; }
.peacock-workbench .wb-follow-head-sp { flex: 1; }
.peacock-workbench .wb-follow-titletxt { display: inline-flex; align-items: center; gap: 7px; }
/* Shown ONLY while following — an "OFF" chip on a panel that is plainly off is noise. */
.peacock-workbench .wb-follow-pill {
    flex: none; font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .5px;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    background: var(--wb-accent, #4a90d9); color: var(--wb-accent-fg, #fff);
}
.peacock-workbench .wb-follow-close {
    width: 24px; height: 24px; border-radius: var(--wb-radius-sm, 4px); border: 1px solid transparent;
    background: transparent; color: var(--wb-fg-muted); cursor: pointer;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-follow-close:hover { background: var(--wb-row-hover); color: var(--wb-fg); }

/* ── which model, as a line of text rather than a filled bar ─────────────────────────────────── */
.peacock-workbench .wb-follow-model {
    display: flex; align-items: center; gap: 7px; flex: none;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-follow-model > i { flex: none; color: var(--wb-accent, #4a90d9); }
.peacock-workbench .wb-follow-model-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peacock-workbench .wb-follow-model-states { flex: none; font-family: var(--wb-mono, monospace); font-size: calc(10px * var(--wb-font-scale, 1)); }

/* ── mode segmented control (the one deliberate track, so the active half reads as a switch) ──── */
.peacock-workbench .wb-follow-modes {
    display: flex; gap: 4px; flex: none; padding: 3px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius, 8px);
}
.peacock-workbench .wb-follow-mode {
    flex: 1 1 0; min-width: 0; height: 30px; border: 1px solid transparent;
    border-radius: var(--wb-radius-sm, 4px); background: transparent; color: var(--wb-fg-muted);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: calc(11px * var(--wb-font-scale, 1)); white-space: nowrap;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-follow-mode:hover { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-follow-mode.is-active { background: var(--wb-accent, #4a90d9); color: var(--wb-accent-fg, #fff); }

.peacock-workbench .wb-follow-blurb {
    flex: none; font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.5; color: var(--wb-fg-muted);
}

/* ── sections: a label + rows, hairline-separated. No fill. ──────────────────────────────────── */
.peacock-workbench .wb-follow-sec {
    flex: none; display: flex; flex-direction: column; gap: 6px;
    padding-top: 10px; border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-follow-seclbl {
    font-size: calc(10px * var(--wb-font-scale, 1)); text-transform: uppercase; letter-spacing: .04em;
    color: var(--wb-fg-muted);
}
.peacock-workbench .wb-follow-seclbl em,
.peacock-workbench .wb-follow-all em { text-transform: none; letter-spacing: 0; font-style: normal; opacity: .8; }

.peacock-workbench .wb-follow-srow { display: flex; align-items: center; gap: 8px; }
.peacock-workbench .wb-follow-srow.is-disabled { opacity: .45; }
.peacock-workbench .wb-follow-check {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: 400;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-follow-check input { margin: 0; cursor: pointer; flex: none; }
.peacock-workbench .wb-follow-srow .wb-follow-check { flex: none; width: 66px; }
.peacock-workbench .wb-follow-all.is-disabled { opacity: .45; }

.peacock-workbench .wb-follow-val {
    flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px;
    border: 1px solid var(--wb-border); border-radius: var(--wb-radius-sm, 4px);
    background: var(--wb-input-bg, var(--wb-panel)); color: var(--wb-fg);
    font-family: var(--wb-mono, monospace); font-size: calc(11px * var(--wb-font-scale, 1));
    transition: border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-follow-val:focus { outline: none; border-color: var(--wb-accent, #4a90d9); }
.peacock-workbench .wb-follow-srow.is-picking .wb-follow-val { border-color: var(--wb-accent, #4a90d9); }
.peacock-workbench .wb-follow-pick {
    flex: none; width: 30px; height: 30px; border-radius: var(--wb-radius-sm, 4px);
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg-muted);
    cursor: pointer;
    transition: background var(--wb-t, .15s) ease, color var(--wb-t, .15s) ease, border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-follow-pick:hover:not([disabled]) { background: var(--wb-row-hover); color: var(--wb-fg); }
.peacock-workbench .wb-follow-pick.is-active {
    background: var(--wb-accent, #4a90d9); border-color: var(--wb-accent, #4a90d9); color: var(--wb-accent-fg, #fff);
}
.peacock-workbench .wb-follow-pick[disabled] { opacity: .4; cursor: not-allowed; }

/** X / Y / Z: three plain checkboxes on one baseline. They were boxed and stretched `flex:1 1 0`,
 *  which centred each box's contents at a different offset and made the row read as misaligned —
 *  the fill was doing nothing a label does not already do. */
.peacock-workbench .wb-follow-axes { display: flex; align-items: center; gap: 18px; padding-left: 1px; }
.peacock-workbench .wb-follow-ax {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; font-weight: 400;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
.peacock-workbench .wb-follow-ax input { margin: 0; cursor: pointer; flex: none; }
.peacock-workbench .wb-follow-ax.is-disabled { opacity: .45; cursor: not-allowed; }

/* ── readout / status line ───────────────────────────────────────────────────────────────────── */
.peacock-workbench .wb-follow-readout {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
    padding-top: 10px; border-top: 1px solid var(--wb-border);
}
.peacock-workbench .wb-follow-ro { display: flex; align-items: baseline; gap: 8px; font-size: calc(11px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-follow-ro-k { flex: none; width: 76px; color: var(--wb-fg-muted); }
.peacock-workbench .wb-follow-ro-v { flex: 1; min-width: 0; font-family: var(--wb-mono, monospace); color: var(--wb-fg); overflow: hidden; text-overflow: ellipsis; }
.peacock-workbench .wb-follow-note {
    display: flex; align-items: flex-start; gap: 7px; margin-top: 2px; line-height: 1.5;
    font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
}
.peacock-workbench .wb-follow-note > i { margin-top: 2px; flex: none; }
.peacock-workbench .wb-follow-note.is-warn > i { color: var(--wb-warn, #b54708); }
.peacock-workbench .wb-follow-note.is-live { color: var(--wb-fg); }
.peacock-workbench .wb-follow-note.is-live > i { color: var(--wb-accent, #4a90d9); }

/** Footer. The first cut painted these `--wb-fg-dim` on a transparent ground, which is what a
 *  DISABLED control looks like — so Clear and Reset read as dead even when they were live. They now
 *  carry the panel fill, a real border and full-strength ink, and `[disabled]` is the only state
 *  that fades. */
.peacock-workbench .wb-follow-foot {
    display: flex; align-items: center; gap: 8px; flex: none;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wb-border);
    background: var(--wb-panel);
}
.peacock-workbench .wb-follow-foot-sp { flex: 1; }
.peacock-workbench .wb-follow-foot button {
    height: 30px; padding: 0 12px; border-radius: var(--wb-radius-sm, 4px);
    border: 1px solid var(--wb-border); background: var(--wb-panel); color: var(--wb-fg);
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: calc(11px * var(--wb-font-scale, 1));
    transition: background var(--wb-t, .15s) ease, border-color var(--wb-t, .15s) ease;
}
.peacock-workbench .wb-follow-foot button:hover:not([disabled]) {
    background: var(--wb-row-hover); border-color: var(--wb-border-strong, var(--wb-accent, #4a90d9));
}
.peacock-workbench .wb-follow-foot button[disabled] { opacity: .4; cursor: not-allowed; color: var(--wb-fg-muted); }

/* R2026-267 — `chrome off toasts` for a batch capture. A camera command raises a ~2 s toast, which
   outlives the gap between it and the printscreen after it, so it was ending up inside the images. */
.peacock-workbench.wb-cmd-hide-toasts .wb-toast-stack { display: none !important; }
/* R2026-267 09/19 — the engine's canvas overlays, hidden by `chrome off` (readout only when named). */
.peacock-workbench.wb-cmd-hide-nav .peacock-top-nav-panel { display: none !important; }
.peacock-workbench.wb-cmd-hide-readout .additional-info-div { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   R2026-267 — THE COMMAND CONSOLE, the left column of the activity-log panel.

   Added by shashank2104 on 09/02/2026; rewritten the same day for the single panel.

   ⭐ OFF MEANS UNCHANGED. The column has zero basis until `.wb-alog.has-console` is set by
   ActivityLogView.renderCommandConsole(). With the preference off the log column is the only one
   and fills the panel, byte for byte as it shipped.

   ⭐⭐ NO TERMINAL BLACK. The first cut painted the transcript, the chips strip and the prompt row
   `#0f1722` with a set of hand-picked blues on top of it, on the reasoning that a prompt should read
   as a terminal. It read as a hole instead: the panel around it follows all four shell themes and
   this one rectangle did not, so in the two light themes it was a black slab welded to the bottom of
   a white app. Every colour in here now comes from the shell's own `--wb-*` tokens and the log's own
   `--alog-*` level accents — the SAME accents the rows next door use, so an error line in the
   transcript is the exact red of an error row beside it, in every theme.

   ⭐ THE COLUMN IS ANCHORED TO ITS BOTTOM EDGE (`justify-content: flex-end` + `overflow: hidden`),
   which is what makes the prompt row the part that survives a collapse. Nothing here is hidden or
   swapped by `.is-open` — the head, the transcript and the chips simply overflow above the fold when
   the panel is short. See the panel block above.

   ⚠ The column's WIDTH comes from `--wb-cmdc-split`, written on the `.wb-alog` root by
   CommandConsole.applySplit (a percentage, so it survives a window resize).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.peacock-workbench .wb-alog-console { flex: 0 0 0; min-width: 0; overflow: hidden; }
.peacock-workbench .wb-alog.has-console .wb-alog-console {
    position: relative; display: flex; flex-direction: column; min-width: 200px;
    flex: 0 0 var(--wb-cmdc-split, 50%);
    border-right: 1px solid var(--wb-border);
}

.peacock-workbench .wb-cmdc {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end;
    min-width: 0; min-height: 0; overflow: hidden;
    background: var(--wb-panel);
}

.peacock-workbench .wb-cmdc-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 30px;
    background: var(--wb-panel-2); border-bottom: 1px solid var(--wb-border);
}
.peacock-workbench .wb-cmdc-cap {
    font-size: calc(9px * var(--wb-font-scale, 1)); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--wb-fg-muted); user-select: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.peacock-workbench .wb-cmdc-grow { flex: 1 1 auto; }
.peacock-workbench .wb-cmdc-icon {
    flex: 0 0 auto; width: 22px; height: 21px; display: inline-flex; align-items: center;
    justify-content: center; border: 1px solid transparent; background: none;
    border-radius: var(--wb-radius-sm); color: var(--wb-fg-muted); cursor: pointer;
    font-size: calc(10px * var(--wb-font-scale, 1)); transition: all var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-cmdc-icon:hover {
    background: var(--wb-row-hover); color: var(--wb-accent); border-color: var(--wb-border);
}

/* The transcript. Monospaced because a command line is, but on the panel's own surface. */
.peacock-workbench .wb-cmdc-out {
    flex: 1 1 auto; overflow: auto; padding: 7px 10px; min-height: 0;
    font-family: var(--wb-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: calc(11px * var(--wb-font-scale, 1)); line-height: 1.55; color: var(--wb-fg);
}
.peacock-workbench .wb-cmdc-out::-webkit-scrollbar { width: 9px; }
.peacock-workbench .wb-cmdc-out::-webkit-scrollbar-thumb {
    background: var(--wb-border); border-radius: 5px; border: 2px solid var(--wb-panel);
}
.peacock-workbench .wb-cmdc-l { white-space: pre-wrap; word-break: break-word; margin-bottom: 2px; }
/* ⭐ The SAME accents the rows next door use, so a transcript line and a log row of the same
   severity are the same colour in every theme. */
.peacock-workbench .wb-cmdc-cmd { color: var(--alog-info); font-weight: 600; }
.peacock-workbench .wb-cmdc-ok  { color: var(--alog-ok); }
.peacock-workbench .wb-cmdc-err { color: var(--alog-error); }
.peacock-workbench .wb-cmdc-dim { color: var(--wb-fg-muted); }
.peacock-workbench .wb-cmdc-hd  { color: var(--alog-warn); margin-top: 5px; }

.peacock-workbench .wb-cmdc-chips {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 8px;
    background: var(--wb-panel-2);
    border-top: 1px solid var(--wb-border); border-bottom: 1px solid var(--wb-border);
    max-height: 56px; overflow: auto;
}
.peacock-workbench .wb-cmdc-chip {
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(9.5px * var(--wb-font-scale, 1)); line-height: 1;
    color: var(--wb-fg-muted); background: var(--wb-panel); border: 1px solid var(--wb-border);
    border-radius: var(--wb-radius-sm); padding: 3px 6px; cursor: pointer;
    transition: all var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-cmdc-chip:hover {
    background: var(--wb-row-hover); border-color: var(--wb-accent); color: var(--wb-accent);
}

/* ⭐ THE PROMPT ROW IS THE BAND THAT SURVIVES A COLLAPSE, so it claims exactly `--wb-alog-peek` —
   the same height the log rows' viewport claims on the other side of the divider. It carries no
   border-top: collapsed it sits directly under `.wb-alog`'s own border and the two would read as one
   doubled line. The chips strip above it owns that edge instead. */
.peacock-workbench .wb-cmdc-in {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 8px;
    min-height: var(--wb-alog-peek); background: var(--wb-panel);
}
.peacock-workbench .wb-cmdc-prompt {
    flex: 0 0 auto; color: var(--wb-accent);
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(12px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-cmdc-input {
    flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0;
    color: var(--wb-fg); cursor: text;
    font-family: var(--wb-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: calc(11.5px * var(--wb-font-scale, 1)); padding: 3px 0;
}
.peacock-workbench .wb-cmdc-input::placeholder { color: var(--wb-fg-muted); opacity: .8; }
.peacock-workbench .wb-cmdc.is-busy .wb-cmdc-input { opacity: .5; }

/* The divider belongs to the console column and sits on its right edge, so the panel does not have
   to render a child between two columns it does not both own. It is the FULL height of the column,
   so the same grip resizes the panel collapsed or open. */
.peacock-workbench .wb-cmdc-grip {
    position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; z-index: 3;
    cursor: col-resize; background: transparent;
}
.peacock-workbench .wb-cmdc-grip::after {
    content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 34px; border-radius: 2px; background: var(--wb-border);
    transition: background var(--wb-t, .13s) ease;
}
.peacock-workbench .wb-cmdc-grip:hover::after { background: var(--wb-accent); }
/* While dragging, nothing on the page may select or take the cursor. */
body.wb-cmdc-dragging { cursor: col-resize; user-select: none; }
body.wb-cmdc-dragging * { cursor: col-resize !important; }
.peacock-workbench .wb-follow-note.is-hidden { display: none; }

/* ── CPM airbag particles — the Display Entity "Results particles" row ──────────
   Added by shashank2104 on 09/02/2026. Reuses the panel's own primitives (.wb-ep-sec,
   .wb-ep-lbl, .wb-ep-kv, .wb-ep-seg, .wb-ep-sw, .wb-ep-ct) so the section reads as part
   of the panel rather than as a bolted-on block; only the bits with no existing
   equivalent are declared here. */
.peacock-workbench .wb-ep-cpm { display: flex; flex-direction: column; gap: 8px; }
.peacock-workbench .wb-ep-cpm-row {
    display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
    padding: 6px 8px; border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--wb-line); background: var(--wb-bg-2);
    transition: background var(--d3v-t-fast, .12s ease), border-color var(--d3v-t-fast, .12s ease);
}
.peacock-workbench .wb-ep-cpm-row:hover { background: var(--wb-bg-3); border-color: var(--wb-accent); }
.peacock-workbench .wb-ep-cpm-nm { flex: 1 1 auto; font-size: calc(11.5px * var(--wb-font-scale, 1)); }
.peacock-workbench .wb-ep-cpm-sub {
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim); line-height: 1.4;
}
.peacock-workbench .wb-ep-cpm-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.peacock-workbench .wb-ep-cpm-key {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: calc(10px * var(--wb-font-scale, 1)); color: var(--wb-fg-dim);
}
/* A state with no particle file is a real answer, not an error — warning tone, not danger. */
.peacock-workbench .wb-ep-cpm-note {
    font-size: calc(10px * var(--wb-font-scale, 1));
    color: var(--d3v-status-warning, #b7791f);
    border-left: 2px solid var(--d3v-status-warning, #b7791f);
    padding-left: 7px;
}

/* ── Progressive loading preview (R0-4177) ────────────────────────────────────────────────────────
   Added by shashank2104 on 09/15/2026. A throwaway Babylon stage laid over the viewport while a
   keyword ZIP is still parsing; each include is drawn the moment it is parsed. Mounted INSIDE the
   editor host (.peacock-viewer), so it is clipped to the viewport, sits over the loading placeholder
   and under the loading card, and the dock stays above it. Its status rides on that card's own
   detail line (no indicator of its own). Fades out on model_rendered. See workbench/progressive-preview.js. */
.peacock-workbench .wb-progressive-stage {
    /* 1052 = one above the shared .d3view-plugin-background placeholder (1051), which already sits
       under the loading card and under the dock; the stage takes exactly that slot. */
    position: absolute; inset: 0; z-index: 1052; overflow: hidden;
    opacity: 1; transition: opacity .42s ease;
    pointer-events: auto;
}
.peacock-workbench .wb-progressive-stage.is-leaving { opacity: 0; pointer-events: none; }
.peacock-workbench .wb-progressive-canvas {
    display: block; width: 100%; height: 100%; outline: none; touch-action: none;
}
    100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--wb-accent) 0%, transparent); }
}

/* ── Loading card include readout (R0-4177, phase 2) ─────────────────────────────────────────────
   Added by shashank2104 on 09/15/2026. Mounted in the shared loading card's content slot while a
   keyword ZIP streams (workbench/loading-card.js + wb-loading-card-tpl). The card is the shared
   white surface, so the text sits on --d3v-* like the card's own lines; the accent is the card's. */
.peacock-workbench .d3view-loading-msg .wb-lc-host { min-width: 0; }
.peacock-workbench .d3view-loading-msg .wb-lc {
    display: flex; flex-direction: column; gap: 6px; min-width: 0;
    font-variant-numeric: tabular-nums;
}
.peacock-workbench .d3view-loading-msg .wb-lc-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--d3v-text-muted);
}
.peacock-workbench .d3view-loading-msg .wb-lc-size { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
/* the file name in full: wraps rather than ellipsises, breaks anywhere so a long path-like name fits */
.peacock-workbench .d3view-loading-msg .wb-lc-name {
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--d3v-text-primary);
    overflow-wrap: anywhere; word-break: break-word;
}
.peacock-workbench .d3view-loading-msg .wb-lc-sub {
    font-size: 11.5px; line-height: 1.4; color: var(--d3v-text-secondary); min-height: 16px;
}
.peacock-workbench .d3view-loading-msg .wb-lc.is-paused .wb-lc-sub { color: var(--d3v-warning); font-weight: 600; }
.peacock-workbench .d3view-loading-msg .wb-lc.is-pausing .wb-lc-sub { color: var(--d3v-warning); }
/* the strip: one cell per file in stream order, sized by count so 5 or 500 fit the same width */
.peacock-workbench .d3view-loading-msg .wb-lc-strip {
    display: flex; gap: 2px; height: 8px; margin-top: 2px; min-width: 0;
}
.peacock-workbench .d3view-loading-msg .wb-lc-cell {
    flex: 1 1 0; min-width: 2px; height: 100%; border-radius: 2px;
    background: var(--d3v-n-100); border: 1px solid var(--d3v-n-200);
    transition: background .25s ease, border-color .25s ease;
}
.peacock-workbench .d3view-loading-msg .wb-lc-cell.is-extracting { background: var(--d3v-accent-soft, var(--d3v-n-200)); border-color: var(--d3v-accent); opacity: .7; }
.peacock-workbench .d3view-loading-msg .wb-lc-cell.is-parsing { background: var(--d3v-accent); border-color: var(--d3v-accent); animation: wb-lc-pulse 1s ease-in-out infinite; }
.peacock-workbench .d3view-loading-msg .wb-lc-cell.is-done { background: var(--d3v-accent); border-color: var(--d3v-accent); }
.peacock-workbench .d3view-loading-msg .wb-lc-cell.is-skipped {
    background: repeating-linear-gradient(135deg, var(--d3v-n-300) 0 2px, transparent 2px 4px);
    border-color: var(--d3v-n-300);
}
@keyframes wb-lc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.peacock-workbench .d3view-loading-msg .wb-lc-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px;
}
.peacock-workbench .d3view-loading-msg .wb-lc-hint { font-size: 11px; color: var(--d3v-text-muted); min-width: 0; }
.peacock-workbench .d3view-loading-msg .wb-lc-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
    border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-md); background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    box-shadow: var(--d3v-sh-xs, none); transition: var(--d3v-t-fast);
}
.peacock-workbench .d3view-loading-msg .wb-lc-btn:hover { background: var(--d3v-bg-hover); border-color: var(--d3v-border-strong, var(--d3v-border)); }
.peacock-workbench .d3view-loading-msg .wb-lc-btn:focus-visible { outline: 2px solid var(--d3v-accent); outline-offset: 1px; }
.peacock-workbench .d3view-loading-msg .wb-lc-btn:disabled { opacity: .55; cursor: default; }
.peacock-workbench .d3view-loading-msg .wb-lc-btn.is-primary { background: var(--d3v-accent); border-color: var(--d3v-accent); color: #fff; }
.peacock-workbench .d3view-loading-msg .wb-lc-btn.is-primary:hover { filter: brightness(1.06); }
.peacock-workbench .d3view-loading-msg .wb-lc-btn i { font-size: 10px; }
/* item 3: the include list shown while paused (option A, inline in the card) */
.peacock-workbench .d3view-loading-msg .wb-lc-note {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 4px;
    font-size: 11px; line-height: 1.45; color: var(--d3v-text-secondary);
    background: var(--d3v-n-50, var(--d3v-bg-secondary)); border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md); padding: 8px 10px;
}
.peacock-workbench .d3view-loading-msg .wb-lc-note i { color: var(--d3v-warning); margin-top: 2px; font-size: 11px; }
.peacock-workbench .d3view-loading-msg .wb-lc-list-head,
.peacock-workbench .d3view-loading-msg .wb-lc-row {
    display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto 44px; align-items: center; gap: 8px;
}
.peacock-workbench .d3view-loading-msg .wb-lc-list-head {
    padding: 2px 6px 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--d3v-text-muted); border-bottom: 1px solid var(--d3v-border);
}
.peacock-workbench .d3view-loading-msg .wb-lc-list-head span:nth-child(n+3) { text-align: right; }
.peacock-workbench .d3view-loading-msg .wb-lc-list {
    display: flex; flex-direction: column; gap: 1px; max-height: 216px; margin: 0 -6px; padding: 0 6px;
}
.peacock-workbench .d3view-loading-msg .wb-lc-row {
    padding: 5px 6px; border-radius: var(--d3v-r-sm); font-size: 11.5px; transition: background var(--d3v-t-fast, .12s);
}
.peacock-workbench .d3view-loading-msg .wb-lc-row:hover { background: var(--d3v-bg-hover); }
.peacock-workbench .d3view-loading-msg .wb-lc-st {
    width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px; color: #fff; background: var(--d3v-accent); border: 1.5px solid var(--d3v-accent);
}
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-queued .wb-lc-st { background: transparent; border-color: var(--d3v-n-300); }
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-extracting .wb-lc-st,
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-parsing .wb-lc-st { opacity: .6; }
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-parsing .wb-lc-st i { animation: d3v-spin 1s linear infinite; }
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-skipped .wb-lc-st { background: var(--d3v-n-300); border-color: var(--d3v-n-300); }
.peacock-workbench .d3view-loading-msg .wb-lc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d3v-text-primary); }
.peacock-workbench .d3view-loading-msg .wb-lc-nm small { display: block; font-size: 10px; color: var(--d3v-text-muted); }
.peacock-workbench .d3view-loading-msg .wb-lc-sz,
.peacock-workbench .d3view-loading-msg .wb-lc-fc { font-size: 10.5px; color: var(--d3v-text-muted); white-space: nowrap; text-align: right; }
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-skipped .wb-lc-nm,
.peacock-workbench .d3view-loading-msg .wb-lc-row.is-skipped .wb-lc-sz { text-decoration: line-through; opacity: .55; }
.peacock-workbench .d3view-loading-msg .wb-lc-sw-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--d3v-text-muted); text-align: right; }
/* the Skip switch */
.peacock-workbench .d3view-loading-msg .wb-lc-sw {
    position: relative; width: 34px; height: 18px; border-radius: var(--d3v-r-full); border: 0; padding: 0;
    background: var(--d3v-n-300); cursor: pointer; justify-self: end; transition: background var(--d3v-t-fast, .15s);
}
.peacock-workbench .d3view-loading-msg .wb-lc-sw::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: var(--d3v-sh-xs); transition: left var(--d3v-t-fast, .15s);
}
.peacock-workbench .d3view-loading-msg .wb-lc-sw:hover { background: var(--d3v-n-400, var(--d3v-n-300)); }
.peacock-workbench .d3view-loading-msg .wb-lc-sw:focus-visible { outline: 2px solid var(--d3v-accent); outline-offset: 1px; }
.peacock-workbench .d3view-loading-msg .wb-lc-sw.is-on { background: var(--d3v-warning); }
.peacock-workbench .d3view-loading-msg .wb-lc-sw.is-on::after { left: 18px; }
.peacock-workbench .d3view-loading-msg .wb-lc-hint b { color: var(--d3v-warning); font-weight: 600; }

/* =====================================================================
 * Added by shashank2104 on 09/15/2026 - R0-4177 - Submit to HPC > Use saved config.
 * The ONE checklist (Option A) that replaced the two-step stepper: a centred card, one row per
 * answer with a check / ordinal, any number of rows open at once, Show more underneath.
 * Colours come from the --wb-* tokens the .wb-sc light surface re-points above.
 * ===================================================================== */
/* One plain surface, no page tint, no card frame; the form is centred at a readable width (user
   decision 09/15). */
.peacock-workbench .wb-sc:has(> .wb-sc-scroll-form) { background: var(--wb-panel); }
.peacock-workbench .wb-sc-scroll-form { display: flex; justify-content: center; align-items: flex-start; padding: 0 16px; }
.peacock-workbench .wb-sc-card { width: 100%; max-width: 900px; background: var(--wb-panel); }
.peacock-workbench .wb-sc-card-h {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border-bottom: 1px solid var(--wb-border); background: var(--wb-panel);
}
.peacock-workbench .wb-sc-card-t { display: flex; align-items: center; gap: 11px; min-width: 0; }
.peacock-workbench .wb-sc-card-t > i {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--d3v-r-md, 8px); display: grid; place-items: center;
.peacock-workbench .wb-sc-simline { padding: 12px 16px 0; }
.peacock-workbench .wb-sc-foot-sep { width: 1px; height: 22px; background: var(--wb-border); margin: 0 4px; }
    background: var(--wb-row-hover); color: var(--wb-accent); font-size: calc(15px * var(--wb-font-scale, 1));
}
.peacock-workbench .wb-sc-card-t b { display: block; font-size: calc(14px * var(--wb-font-scale, 1)); font-weight: 650; line-height: 1.25; }
.peacock-workbench .wb-sc-card-sub {
    display: block; font-size: calc(11px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px;
}
.peacock-workbench .wb-sc-card .wb-sc-vbanner { margin: 12px 16px 0; }

/* the rows */
.peacock-workbench .wb-sc-ck { display: flex; flex-direction: column; }
.peacock-workbench .wb-sc-ck > .wb-sc-loading { padding: 26px 16px; text-align: center; }
.peacock-workbench .wb-sc-ck-row { border-top: 1px solid var(--wb-border); }
.peacock-workbench .wb-sc-ck-row:first-child { border-top: 0; }
.peacock-workbench .wb-sc-ck-h {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; cursor: pointer; user-select: none;
}
.peacock-workbench .wb-sc-ck-row:not(.is-open) .wb-sc-ck-h { padding-bottom: 14px; }
.peacock-workbench .wb-sc-ck-ic {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 800;
    background: var(--wb-panel-2); color: var(--wb-fg-muted); border: 1px solid var(--wb-border);
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.peacock-workbench .wb-sc-ck-row.is-done .wb-sc-ck-ic {
    background: var(--d3v-status-success, #16a34a); color: #fff; border-color: var(--d3v-status-success, #16a34a);
}
.peacock-workbench .wb-sc-ck-row.is-todo .wb-sc-ck-ic {
    background: var(--wb-panel); color: var(--wb-accent); border: 1px dashed var(--wb-accent);
}
.peacock-workbench .wb-sc-ck-b { flex: 1; min-width: 0; }
.peacock-workbench .wb-sc-ck-t { display: block; font-size: calc(12.5px * var(--wb-font-scale, 1)); font-weight: 650; line-height: 1.25; }
.peacock-workbench .wb-sc-ck-v {
    display: block; font-size: calc(11.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.peacock-workbench .wb-sc-ck-row.is-todo .wb-sc-ck-v { color: var(--wb-accent); font-weight: 600; }
.peacock-workbench .wb-sc-ck-a { flex: 0 0 auto; font-size: calc(11px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-accent); }
.peacock-workbench .wb-sc-ck-body { display: none; padding: 2px 16px 18px 50px; }
.peacock-workbench .wb-sc-ck-row.is-open .wb-sc-ck-body { display: block; }
.peacock-workbench .wb-sc-ck-body .wb-sc-help { margin-top: 8px; }
.peacock-workbench .wb-sc-segs-wrap { flex-wrap: wrap; gap: 6px 0; }
.peacock-workbench .wb-sc-segs-wrap .wb-sc-seg { height: auto; padding: 6px 12px; flex-wrap: wrap; }
.peacock-workbench .wb-sc-seg small {
    flex: 0 0 100%; font-size: calc(10.5px * var(--wb-font-scale, 1)); font-weight: 500; color: var(--wb-fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.peacock-workbench .wb-sc-seg.is-on small { color: var(--wb-accent); }
/* R0-4188 - a removable card (a parameterized deck) carries its own x; shown on hover and while selected */
.peacock-workbench .wb-sc-seg.is-removable { position: relative; padding-right: 30px; }
.peacock-workbench .wb-sc-seg-x {
    position: absolute; top: 5px; right: 6px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--wb-fg-muted); font-size: calc(11px * var(--wb-font-scale, 1));
    cursor: pointer; opacity: 0; transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.peacock-workbench .wb-sc-seg:hover .wb-sc-seg-x, .peacock-workbench .wb-sc-seg.is-on .wb-sc-seg-x { opacity: 1; }
.peacock-workbench .wb-sc-seg-x:hover { background: var(--wb-row-hover); color: var(--d3v-status-danger, #b91c1c); }
.peacock-workbench .wb-sc-seg-x:focus-visible { opacity: 1; outline: 2px solid var(--wb-accent); outline-offset: 1px; }

/* Show more */
.peacock-workbench .wb-sc-ck-more {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer;
    font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 700; color: var(--wb-fg);
    border-top: 1px solid var(--wb-border); transition: color .14s ease;
}
.peacock-workbench .wb-sc-ck-more:hover { color: var(--wb-accent); }
.peacock-workbench .wb-sc-ck-more .car { transition: transform .15s ease; color: var(--wb-fg-muted); }
.peacock-workbench .wb-sc-ck-more.is-open .car { transform: rotate(90deg); }
.peacock-workbench .wb-sc-ck-more small { margin-left: auto; font-weight: 500; color: var(--wb-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peacock-workbench .wb-sc-ck-adv { display: none; border-top: 1px solid var(--wb-border); }
.peacock-workbench .wb-sc-ck-adv.is-open { display: block; }
.peacock-workbench .wb-sc-moreblk { padding: 12px 16px 16px; }
.peacock-workbench .wb-sc-moreblk + .wb-sc-moreblk { border-top: 1px solid var(--wb-border); }
.peacock-workbench .wb-sc-moreblk .wb-sc-fbreg-h { padding: 0 0 10px; border: 0; background: transparent; }
.peacock-workbench .wb-sc-morecnt { margin-left: auto; font-size: calc(10.5px * var(--wb-font-scale, 1)); color: var(--wb-fg-muted); font-weight: 600; }
.peacock-workbench .wb-sc-moreblk .wb-sc-locked { margin: 0 0 12px; }

/* footer read-out */
.peacock-workbench .wb-sc-foot .wb-sc-hint { margin-left: auto; margin-right: 6px; }
.peacock-workbench .wb-sc-foot .wb-sc-hint > i { margin-right: 4px; }
/* parked: the card's own spinner and bar shimmer stand still, so "Paused" reads as paused */
.peacock-workbench .d3view-loading-msg.is-paused .d3v-loading-spinner { animation-play-state: paused; border-top-color: var(--d3v-warning); }
.peacock-workbench .d3view-loading-msg.is-paused .progress-bar::after { animation-play-state: paused; }
/* the pill's own Pause / Resume, shown only while minimised (the slot is hidden then) */
.peacock-workbench .d3view-loading-msg .wb-lc-pill-btn { display: none; }
.peacock-workbench .d3view-loading-msg.is-minimized.has-wb-pill .d3v-loading-body { padding-right: 70px; }
.peacock-workbench .d3view-loading-msg.is-minimized .wb-lc-pill-btn {
    display: flex; position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0;
    border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-full); background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary); font-size: 9px; cursor: pointer; transition: var(--d3v-t-fast);
}
.peacock-workbench .d3view-loading-msg.is-minimized .wb-lc-pill-btn:hover { background: var(--d3v-bg-hover); }
.peacock-workbench .d3view-loading-msg.is-minimized .wb-lc-pill-btn:disabled { opacity: .5; cursor: default; }
.peacock-workbench .d3view-loading-msg.is-minimized .wb-lc-pill-btn.is-primary { background: var(--d3v-accent); border-color: var(--d3v-accent); color: #fff; }

/* =====================================================================
 * Added by shashank2104 on 09/16/2026 - R0-4188 - the viewport's State / Time readout
 * (.additional-info-div, peacock.v3's template) rides ABOVE the bottom dock: --wb-dock-h is the
 * dock's live height (DockView keeps it in sync), the same rule the transport follows. The
 * training-run button (ResultsMerge.syncAiTag) sits at its head and its State line reads "AI State"
 * while the model's states came from a SolverAI prediction.
 * ===================================================================== */
.peacock-workbench .peacock-viewer .additional-info-div {
    bottom: calc(var(--wb-dock-h, 16px) + 14px);
    right: 22px;
    align-items: flex-end;
    transition: bottom 0.18s ease;
}
.peacock-workbench .peacock-viewer.hasFringeEnabled .additional-info-div { right: 180px; }
.peacock-workbench .peacock-viewer .additional-info-div h4 {
    margin: 0 0 6px; font-size: calc(13px * var(--wb-font-scale, 1)); color: var(--wb-fg);
}
/* Updated by shashank2104 on 09/17/2026 - R2026-308 - the training-run button above the State / Time
   readout (the pill is gone). The readout is pointer-events: none; the button alone takes events. */
.peacock-workbench .peacock-viewer .additional-info-div .wb-ai-train-btn {
    pointer-events: auto; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px;
    padding: 5px 11px; border: 1px solid var(--wb-border, var(--d3v-border-default));
    border-radius: var(--d3v-r-full, 999px); background: var(--wb-panel, var(--d3v-bg-primary));
    color: var(--wb-accent, var(--d3v-accent)); font-size: calc(11.5px * var(--wb-font-scale, 1)); font-weight: 600;
    line-height: 1.2; white-space: nowrap; box-shadow: var(--d3v-sh-sm);
    transition: border-color var(--d3v-t-fast, 120ms) ease, box-shadow var(--d3v-t-fast, 120ms) ease, background var(--d3v-t-fast, 120ms) ease;
}
.peacock-workbench .peacock-viewer .additional-info-div .wb-ai-train-btn:hover { border-color: var(--wb-accent, var(--d3v-accent)); box-shadow: var(--d3v-sh-md); background: var(--wb-accent-soft, var(--d3v-accent-soft)); }
.peacock-workbench .peacock-viewer .additional-info-div .wb-ai-train-btn:focus-visible { outline: 2px solid var(--wb-accent, var(--d3v-accent)); outline-offset: 1px; }

/* ============================================================================
   Primary buttons keep their accent on hover. Added by shashank2104 on 09/20/2026 - R2026-37.
   Several dialogs style a neutral base class (`.btn`, `.wb-kwoff-btn`, ...) with a light
   `:hover` background and then give the primary variant only a brightness filter on hover, so
   the neutral hover repainted the primary near-white under its white text (Open in Choose the
   main file, Merge in the keyword merge). One rule for every primary variant, scoped to the
   token roots, specificity 0,6,0 and last in the file so it outranks any per-dialog hover.
   The toast's primary action is the one inverse (white on the dark toast), so it is left out. */
:is(.peacock-workbench, .wb-open-modal-host) :is(.btn-primary, .is-primary, .wb-kwoff-primary, .wb-a3d-btn-primary)[class]:not([disabled]):not(.wb-toast-act):hover {
    background: var(--wb-accent, #2c5282);
    border-color: var(--wb-accent, #2c5282);
    color: var(--wb-accent-fg, #ffffff);
}

/* /stylesheets/textcompare.css */
.gen-comp-text-viz-container {
    width: 500px;
    height: 750px;
}

#gen-comp-diffs {
    width: 100%;
    height: 100%;
    position: relative;
    /*top: 50px;*/
    /*padding-bottom: 1000px;*/
}

#gen-comp-container {
    width: 100%;
    height: 100%;
}

.navbar .dropdown-menu:after, .navbar .dropdown-menu:before {
    display:block;
}

.caret {
    display: block;
}

.gen-comp-nav-bar-control {
    padding: 10px;
}

.acediff__wrap {
    height: 90% !important;
}

#gen-comp-num-diffs {
    font-weight: bold;
    padding-top: 5px;
}

#gen-comp-navbar-container {
    width: 100%;
}

#gen-comp-right-dd-container {
    margin-left: 100px;
}

#gen-comp-container .gen-comp-body {
    height: calc(100% - 34px);
}
/* /stylesheets/visualizers/table.css */
/*.tablejs-secondary-highlight {*/
    /*background-color: #e68a00;*/
    /*background-image: linear-gradient(to bottom,#e68a00 0,#cc7a00 100%);*/
    /*background-image: -webkit-linear-gradient(top,#e68a00 0,#cc7a00 100%);*/
    /*color: #fff!important*/
/*}*/

/*.tablejs-tertiary-highight {*/
    /*background-color: #009933;*/
    /*background-image: linear-gradient(to bottom,#009933 0,#006622 100%);*/
    /*background-image: -webkit-linear-gradient(to bottom,#009933 0,#006622 100%);*/
/*}*/

/*.tablejs-quaternary-highlight {*/

/*}*/

.slickgrid_rendering_area .slick-row.highlighted .slick-cell {
    background-color: #428bca;
    background-image: linear-gradient(to bottom,#428bca 0,#2d6ca2 100%);
    background-image: -webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%);
    color: #fff!important
}

.slickgrid_rendering_area .slick-row.selected .slick-cell {
    background-color: #e68a00;
    background-image: linear-gradient(to bottom,#e68a00 0,#cc7a00 100%);
    background-image: -webkit-linear-gradient(top,#e68a00 0,#cc7a00 100%);
    color: #fff!important;
}
/* /stylesheets/visualizers/heatmap.css */
hm-grid-rect {
    border:0.5px solid white;
    overflow: hidden;
}

hm-domain {
    stroke-width: 2px !important;
}

#Heat_Map .tick > text {
    stroke: black;
}

/* /stylesheets/visualizers/vbarchart.css */
/* ───────────────────────────────────────────────────────────────────────
 *  Simlytiks vertical bar chart — visual styling
 *
 *  Geometry (positions, sizes, animations) stays in vbarchart.js because
 *  it depends on the scale / data / option set. This file owns the
 *  default *appearance* — colours, strokes, font sizes that aren't
 *  data-driven. Scope every rule under .d3view-vbar so the styles don't
 *  bleed into other charts on the page.
 *
 *  Data-driven styling (bar fill from colorBy, opacity from highlight /
 *  bar-vs-label width, axis tick stroke from layer depth) stays inline
 *  in vbarchart.js — those values can't live in a static stylesheet.
 * ─────────────────────────────────────────────────────────────────────── */

.d3view-vbar { position: relative; }

.d3view-vbar > .btn-group.pull-right {
    position: absolute;
    right: 0;
    top: 0;
}

.d3view-vbar .vbar-svg .chart-border {
    stroke: #DDD;
    fill: none;
}

.d3view-vbar .vbar-svg .moving_avg,
.d3view-vbar .vbar-svg path.line {
    stroke: steelblue;
    fill: none;
}

.d3view-vbar .vbar-svg .layer-separator {
    stroke: #CCC;
}

.d3view-vbar .vbar-svg .y_layer text {
    font-size: 0.8em;
}

/* ───────────────────────────────────────────────────────────────────────
 *  Compact theme — applied when the container carries
 *  [data-vbar-theme="compact"]. Geometry (tick counts, margins, bar
 *  widths) is set on the JS side via Viz.vBarChart.Themes.compact;
 *  the rules below cover only the visual surface. Mirrors the same
 *  split Newton's compact theme uses.
 *
 *  !important is needed to beat the legacy d3view.css axis styling
 *  ("axis text { font-size: 1.2em !important }") that ships on every
 *  d3VIEW page — same reason Newton's compact theme uses !important.
 * ─────────────────────────────────────────────────────────────────────── */

.d3view-vbar[data-vbar-theme="compact"] svg .axis path.domain { stroke: #eef0f2 !important; stroke-width: 1 !important; }
.d3view-vbar[data-vbar-theme="compact"] svg .axis line        { stroke: #eef0f2 !important; }
.d3view-vbar[data-vbar-theme="compact"] svg .tick line        { stroke: #f3f4f6 !important; }
.d3view-vbar[data-vbar-theme="compact"] svg .tick text        { fill: #9ca3af !important; font-size: 10px !important; font-weight: 400 !important; }
.d3view-vbar[data-vbar-theme="compact"] svg text.axis-label   { fill: #4b5563 !important; font-size: 11px !important; font-weight: 600 !important; }
.d3view-vbar[data-vbar-theme="compact"] svg text.xLabel,
.d3view-vbar[data-vbar-theme="compact"] svg text.yLabel       { fill: #4b5563 !important; font-size: 11px !important; font-weight: 600 !important; }
.d3view-vbar[data-vbar-theme="compact"] .chart-border         { stroke: #f3f4f6; }
.d3view-vbar[data-vbar-theme="compact"] .layer-separator      { stroke: #f3f4f6; }
.d3view-vbar[data-vbar-theme="compact"] svg .y_layer text     { font-size: 9px !important; fill: #6b7280; }
.d3view-vbar[data-vbar-theme="compact"] svg rect.rect         { stroke: #ffffff; stroke-width: 0.5; }
.d3view-vbar[data-vbar-theme="compact"] svg rect.rect:hover   { stroke: #1e40af; stroke-width: 1; }
.d3view-vbar[data-vbar-theme="compact"] .viz-legends-container { font-size: 10px; color: #6b7280; }
.d3view-vbar[data-vbar-theme="compact"] .viz-legends-container .legend-label { font-size: 10px; }

/* /stylesheets/visualizers/survivalspace.css */

.ss-svg text {
    fill: #000;
}

.ss-svg .axis {
    -webkit-user-select: none;
    -moz-user-select : none;
    -ms-user-select : none;
}

.ss-svg .axis path , .ss-svg .axis line {
    stroke: 1px;
    stroke-color: #000;
}

.ss-svg .axis-label {
    font-weight: bold;
}

.ss-svg .pre-crash-profile {
    fill: transparent;
    stroke-width : 5px;
}

.ss-svg .post-crash-profile {
    fill: transparent;
    stroke-width : 3px;
}

.ss-svg .rating-text {
    font-size: 42px;
}

.ss-svg .max-crash-profile {
    fill: transparent;
    stroke-dasharray: 4,4;
}

.ss-svg .detail-text {
    font-weight: bold;
}

.ss-svg .extent {
    background-color: blue;
    opacity: 0.5;
}

.ss-svg {
    preserveAspectRatio: xMinYMin meet;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: 21px;
}
/* /stylesheets/cluster.details.css */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}

div.d3view-cluster-details div.top_panel {
    border-bottom: 1px solid #DDD;
}
div.d3view-cluster-details div.top_panel div.panel-body {
    height: 40%;
    overflow: auto;
}
div.d3view-cluster-details div.bottom_panel div.panel-body {
    height: 60%;
}
div.d3view-cluster-details div.panel-heading {
    background: none;
    border: none;
    padding: 5px 10px;
}
div.d3view-cluster-details div.panel-heading .lead {
    margin-bottom: 0;
    font-size: 18px;
}
div.d3view-cluster-details div.panel-body {
    padding: 0 10px;
    position: relative;
}
div.d3view-cluster-details .availablity_bar > div {
    margin: 0;
    height: 40px;
}
div.d3view-cluster-details .toggle_more_storages {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}
div.d3view-cluster-details div#cd-storage-info .cd-storage-progress-bar, div.d3view-cluster-details div#cd-quick-info .availablity_bar {
    padding: 6px 10px;
}
div.d3view-cluster-details #cd-quick-info .progress-bar-partial {
    background-image: linear-gradient(to bottom,orange 0,orangered 100%);
}
div.d3view-cluster-details #cd-quick-info .progress-bar-down {
    background-image: linear-gradient(to bottom,gray 0,lightgrey 100%);
}
div.d3view-cluster-details div#cd-storage-info .cd-storage-progress-bar .progress {
    margin-bottom: 0!important;
}
div.d3view-cluster-details div.panel {
    margin-bottom: 7px;
    border: none;
    box-shadow: none;
}
div.d3view-cluster-details div.top_panel table {
    margin-bottom: 0;
}
div.d3view-cluster-details div.top_panel table td, div.d3view-cluster-details div.top_panel table th {
    /*border: none!important;*/
}
div.d3view-cluster-details ul.table-toggle li {
    margin: 3px 0;
}
div.d3view-cluster-details ul.table-toggle li > a {
    padding: 7px 10px;
}
div.d3view-cluster-details .no_data {
    position: absolute;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.05em;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
div.d3view-cluster-details .summary-chart {
    /*border: 1px dotted #DDD;*/
    padding: 10px;
    position: relative;
    text-align: center;
    width: 100%;
}
@media (min-width: 992px) {
    div.d3view-cluster-details #cd-charts .summary-chart {
        width: 20%;
    }
}
@media (max-width: 992px) {
    div.d3view-cluster-details #cd-charts .summary-chart .chart-container{
        height: 250px!important;
    }
}
div.d3view-cluster-details .summary-chart .chart-container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
div.d3view-cluster-details .summary-chart .chart-container.placeholder-container {
    padding: 30px;
}
div.d3view-cluster-details .summary-chart .no_chart_data {
    font-size: 1.2em;
    font-weight: 500;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* nodes tab */
div.d3view-cluster-details table.renderingArea.dataTable {
    width: 100%!important;
}
div.d3view-cluster-details ul.toggle-tabs {
    /*position: absolute;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
}
div.d3view-cluster-details ul.toggle-tabs > li > a {
    padding: 8px 15px;
}
div.d3view-cluster-details ul.toggle-tabs.disabled {
    pointer-events: none!important;
    opacity: 0.4;
}
/* /stylesheets/simlytiks.css */

body.simlytiks-open {
	overflow: hidden;
}


.simlytiks-outer-container.isHidden {
 	position: absolute;
	top: 0;
	left: 22222222px;
	opacity: 0;
	pointer-events: none;
}


.simlytiks-bts-dom {
	position: fixed!important;
	top: 0;
	left: 22222222px;
	opacity: 0;
	z-index: 20000;
	pointer-events: none;
	height: 1180px!important;
	width: 2738px!important;
}

div.simlytiks.d3view-item-dragging {
	cursor: grab!important;
}

.svg-tip {
	position: absolute;
	padding: 10px;
	background: #eee;
	color: #248;
	font-size: 12px;
	width: 140px;
	height: 50px;
	position: absolute;
	z-index: 99999;
	text-align: center;
	border-radius: 8px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	display: none;
	font: 12px sans-serif;
	fill: red;
}


.svg-tip:after {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	margin: -2px 0 0 0;
	top: 100%;
	left: 0;

	box-sizing: border-box;
	display: inline;
	font-size: 12px;
	width: 100%;
	line-height: 1;
	color: #eee;
	content: "▼";
	position: absolute;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}



.d3v_icon_button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ffffff;
	-moz-border-radius:24px;
	-webkit-border-radius:24px;
	border-radius:24px;
	border:1px solid #ffffff;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:5px 5px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	width: 28px;
	height: 28px;
	cursor: pointer;
	margin: 1;
}
.d3v_icon_button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #fafafa) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #fafafa 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#fafafa');
	background-color:#dfdfdf;
	border:1px solid #dfdfdf;
}
.d3v_icon_button:active {
	position:relative;
	top:1px;
	left:1px;
}
.d3v_icon_button[disabled] {
	cursor: default;
}
.d3v_icon_button[disabled]:hover {
	background:none;
	border:1px solid #ffffff;
}
.d3v_icon_button[disabled]:active {
	position:relative;
	top:0px;
	left:0px;
}
.d3v_icon_button[selected] {
	border:1px solid #dfdfdf;
	cursor: default;
}
.d3v_icon_button[selected]:hover {
	border:1px solid #dfdfdf;
	cursor: default;
}**/

.legend rect {
	cursor: pointer;
}

/*.legend text {*/
	/*font: 10px sans-serif;*/
	/*pointer-events: none;*/

/*}*/

.gridX {
	pointer-events: none;
}
.gridY {
	pointer-events: none;
}

.gridX path {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.gridX line {
	fill: none;
	stroke: #eee;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.gridY path {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
	pointer-events: none;
}
.gridY line {
	fill: none;
	stroke: #eee;
	shape-rendering: crispEdges;
	pointer-events: none;
}

/*.axis {*/
/*	pointer-events: all;*/
/*}*/

.axis path {
	fill: none;
	stroke: none;
	shape-rendering: crispEdges;
}
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

/*.x.axis path {*/
	/*display: none;*/
/*}*/

.measure_start {
	fill: none
}

.measure_end {
	fill: none;
}

.measure_line {
	stroke: #4A7EBB;
	stroke-width: 1px
}

.measure_text {
	font-size: 11px;
	pointer-events: none;

}

.measure_rect {
	fill: #DCE6F2;
	stroke: #4A7EBB;
	stroke-width: 1;
	shape-rendering: crispEdges;
	cursor: pointer;
}

.close_button {
	stroke:#888;
	stroke-width:1.5;
	cursor: pointer;
}

.close_button_circle {
	stroke:#888;
	stroke-width:0;
	fill: #DCE6F2;
}
.page-content {
	padding:20px;
}

.page-curtain {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(200, 200, 200, 0.7);
	display: none;
}

.page-modal {
	position: absolute;
	background-color: white;
	border: 1px solid #777;
	display: none;
}

.page-close {
	position: absolute;
	right: -5px;
	top: -10px;
	height: 28px; width: 28px;
	background: transparent url(../images/closebox.png) no-repeat scroll center center;
	text-transform:uppercase;
}

.cal-div {
	border: 1px solid #fff;
}

.cal-div:hover {
	border: 1px solid #ccc;
}

.cal-day {
	fill: #eee;
	stroke: none;
	stroke-width: 0.5;
}

.cal-day.selected {
	stroke-width: 2;
	stroke: #0e0;
}


.cal-day.over {
	stroke: #000;
}


.has-callback .cal-day.over {
	cursor:pointer;
}

.cal-day-bar {
	fill: rgb(107, 174, 214);
	stroke: none;
	stroke-width: 0.5;
}
.cal-day-bar.over {
	stroke: #000;
}

.cal-week{
	fill: #eee;
	stroke: none;
	stroke-width: 0.5;
}
.cal-week.over {
	stroke: #000;
}

.cal-week-bar{
	fill: rgb(107, 174, 214);
	stroke: none;
	stroke-width: 0.5;
}
.cal-week-bar.over {
	stroke: #000;
}


.cal-q0-4{fill:rgb(189, 215, 231)}
.cal-q1-4{fill:rgb(107, 174, 214)}
.cal-q2-4{fill:rgb(49, 130, 189)}
.cal-q3-4{fill:rgb(8, 81, 156)}

.cal-month {
	font: 10px sans-serif;
	fill: #aaa;
}
.cal-week-day {
	font: 10px sans-serif;
	fill: #aaa;
}

.cal-text {
	font: 10px sans-serif;
	fill: #aaa;
}

.cal-text.min {
	text-anchor: end;
}

.cal-text.date {
	cursor:pointer;
}

.cal-tip {
	position: absolute;
	padding: 10px;
	background: #eee;
	color: #248;
	font-size: 12px;
	width: 140px;
	height: 35px;
	position: absolute;
	z-index: 99999;
	text-align: center;
	border-radius: 8px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	display: none;
	font: 12px sans-serif;
	fill: red;
}


.cal-tip:after {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	margin: -2px 0 0 0;
	top: 100%;
	left: 0;

	box-sizing: border-box;
	display: inline;
	font-size: 12px;
	width: 100%;
	line-height: 1;
	color: #eee;
	content: "▼";
	position: absolute;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}


.x.cal-axis {
	visibility: hidden;
}

.cal-axis line {
	fill: none;
	stroke: #aaa;
	shape-rendering: crispEdges;
}
.cal-axis path {
	visibility: hidden;
}
.cal-axis text {
	font: 10px sans-serif;
	fill: #aaa;
}
.cal-border {
	stroke: #ccc;
	stroke-width: 1;
	fill: none;
	shape-rendering: crispEdges;
}
.cal-sort {
	font: 11px sans-serif;
}

.cal-sort span {
	font: 9px sans-serif;
	color: #999;
	padding: 0px 3px 0px 3px !important;
}

.cal-brush .extent {
	stroke: #f09f8c;
	fill-opacity: .5;
	fill: #ccc;
	shape-rendering: crispEdges;
}






.bubble_chart_div {

}
.bubble_chart_button_div {
	position: absolute;
}

.bubble {
	fill-opacity: 0.7;
	stroke-width: 0;
	/*stroke: black;*/
}
.bubble_title {
	font-size: 13px;
	font-weight:bold;
	text-anchor: middle;
}
.bubble.selected {
	stroke-width: 1;
}

.bubble.over {
	stroke-width: 3;
}

.bubble.globalHighlight {
	stroke-width: 3px !important;
}

.x_label {
	font-size: 11px;
	font-weight:bold;
	stroke: none;
	fill: black;
	text-anchor: middle;

}

.y_label {
	font-size: 11px;
	font-weight:bold;
	stroke: none;
	fill: black;
	text-anchor: middle;

}
.size_label {
	font-size: 11px;
	font-weight:bold;
	stroke: none;
	fill: black;
	text-anchor: middle;

}

.size_circle_small {
	stroke: black;
	stroke-width: 0.5;
	fill: none;
}
.size_circle_big {
	stroke: black;
	stroke-width: 0.5;
	fill: none;
}
.size_text_big {
	font: 10px sans-serif;
	stroke: none;
	fill: black;
	text-anchor: middle;
}
.size_text_small {
	font: 10px sans-serif;
	stroke: none;
	fill: black;
	text-anchor: middle;
}


.layout_content * {
	font: 10px sans-serif;
}


.d3_filter_table td {
	text-align: left !important;
	vertical-align: top !important;
	padding: 3px
}


.slider_input {
	size: 17;
	border: 0;
	background: #fff;
	disabled: disabled;
}

.slider_div {
	margin: 2px 5px 0px 4px
}

.selection_line
{
	position: absolute;
	z-index: 10000;
	top: 40px;

	width: 1px;
	height: 480px;

	background-color: rgba(0, 0, 0, 0.2);
	visibility: hidden;
}
.chart_svg {
	/*#background-color: #EEEEEE;*/
	font-size:10px;
}
.chart_svg text.bar {
	fill: white;
}

.fake {

	stroke: #AAA;
	stroke-width: 1;
	shape-rendering: crispEdges;
	fill: white;
	opacity: 1 !important;

}

.axis path,
.axis line {
	fill: none;
	stroke: rgba(100,100,100,0.1);
	shape-rendering: crispEdges;
}

div.simlytiks .axis text {
	/*font-size: 11px;*/
	font-weight: bold;
	pointer-events: none;
}

div.simlytiks.customFontSize .axis text,
div.simlytiks.customFontSize .axis-handle,
div.simlytiks.customFontSize svg.box text.title,
div.simlytiks.customFontSize div.d3view-viz[data-chart-type="grouped_boxplot"] .item-heading > p,
div.simlytiks.customFontSize div.d3view-viz[data-chart-type="boxplot"] text.box,
div.simlytiks.customFontSize div.d3view-viz[data-chart-type="boxplot"] text.whisker,
/** Added by shashank2104 on 2026-06-01 - R0-3672 - column_summary wraps a
 *  boxplot inside .col-chart, so the data-chart-type wrapper is column_summary
 *  not boxplot. Mirror the boxplot text.box/whisker rules so the q1/med/q3/min/max
 *  inline labels respect globalAxisTickFontSize on column_summary slides too. **/
div.simlytiks.customFontSize div.d3view-viz[data-chart-type="column_summary"] text.box,
div.simlytiks.customFontSize div.d3view-viz[data-chart-type="column_summary"] text.whisker,
div.simlytiks.customFontSize div.d3view-viz .occ_path text,
div.simlytiks.customFontSize div.page-container.pageWithColorByExport .viewContent[data-page-layout] .viz-title {
	font-size: var(--global-tick-font-size)!important;
	font-weight: 400;
}

/** Override for page title in case of custom font size - DW-2435 **/
div.simlytiks.customFontSize div.page-container.pageWithColorByExport .viz-title-container {
	height: auto!important;
}
.chart_border {
	fill: none;
	stroke: #AAA;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

.node circle {
	fill: #fff;
	stroke: steelblue;
	stroke-width: 3px;
}

/*.node text { */
/*	font: 12px sans-serif; }*/

.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 2px;
}

.grid path,
.grid line {
	fill: none;
	stroke: #777;
	shape-rendering: crispEdges;
	stroke-opacity: .2;
}

.y.grid .major line {
	stroke: #AAA;
	stroke-opacity: 1;
}


.spacer {
	margin: 0px 3px 0px 0px;
}

.option_title {
	margin: 0px 3px 0px 10px;
}


.layout {
	margin-top: 10px;
}
.layout_header {
	padding: 10px 10px 10px 10px;
}
.layout_title {
	font-size: 16px;
	font-weight: bold;
}

.btnHeader {
	background: none !important;
	font-weight: bold !important;
	font-size: 11px;
	margin-left: 20px;
}

.btnChartHeader {

	padding: 0px !important;
	margin: 0 0 0 10px !important;
	position: relative;
	float: right;
	top: 2px;

}

.btnChartHeaderIcon {
	background: none !important;
	border: none !important;
	padding: 0px !important;
	margin: 0 0 0 10px !important;
	position: relative;
	float: right;
	top: 0px;
}

.chart_title_a {
	position:relative;
	padding: 4px 0 0 0  !important;
	float: left;
	font-size: 12px !important;
}

.btn_circle {
	position: absolute !important;
}

.buttons {
	position: absolute;
	right: 10px;
	top: 8px;
}
.layout_content {
	position: relative;
}

.chart {
	position: absolute;
	margin-top:10px;
}

.chart_title {
	font-size: 12px !important;
	padding-top: 2px !important;
	padding-bottom: 4px !important;
}



.chart_title_edit {
	padding:0 0 0 0;
	margin:0 0 0 0;
	visibility:hidden;
	position:absolute;
	left:25px;
	top:4px
}

.chart_title_input {
	padding:0 0 0 0;
	margin:0 0 0 0;
}

.chart_options {
	font-size: 10px;
	position: relative;
	padding: 3px 3px 3px 3px !important;
	overflow: auto;
}

.bubble_options {
	font-size: 10px;
	margin: 0px 0px 0px 5px;
	padding: 5px;
}

.chart_options_subsection {
	padding: 2px 2px 2px 2px !important;
	margin: 2px 2px 2px 0px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	height: 40px;
	width: 140px;
	color: #000;
	float:left;
}

.chart_graphics {
	position:relative;
	padding: 3px 3px 3px 3px !important;
}

.chart_footer {
	position: absolute;
	bottom: 0px;
	height: 20px;
	width: 100%;
}





.tooltip-c {
	position: absolute;
	padding: 10px;
	background: rgba(255, 255, 255, 0.9);
	color: #000;
	font: 10px sans-serif;
	z-index: 99999;
	border-radius: 8px;
	box-shadow: 0px 0px 2px 2px #ccc;
}


.tooltip-c-old {
	position: absolute;
	top: 0px;
	padding:5px 15px;
	z-index: 10;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 3px 3px #ccc;
	box-shadow: 0px 0px 3px 3px #ccc;
	font: 10px sans-serif;
	background: rgba(255, 255, 255, 0.9);
	color: #000;
}
.tooltip-c-old:after {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	margin: -2px 0 0 0;
	top: 100%;
	left: 0;

	box-sizing: border-box;
	display: inline;
	font-size: 12px;
	width: 100%;
	line-height: 1;
	color: #eee;
	content: "▼";
	position: absolute;
	text-align: center;
	-webkit-font-smoothing: antialiased;
}

.tooltip-c .title {
	font: 11px sans-serif;
	font-weight: bold;
	padding: 0px 0px;
	margin: 0px 0px 4px 0px;
}

.debug {
	fill: none;
	stroke: none;
}

.chart {
}

.d3v_btn {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ddd;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color: #555;
	font-family:arial;
	font-size:11px;
	font-weight:normal;
	padding:4px 20px;
	text-decoration:none;
}

.d3v_btn.disabled {
	color: #aaa;
	pointer-events: none;
}

.d3v_btn:hover {
	background-color:#eee;
}

.d3v_btn:active {
	position:relative;
	top:1px;
}


.chartTitle {
	font: 13px sans-serif;
	font-weight: bold;
	text-anchor: middle;
}

.chartDescription {
	font: 11px sans-serif;
	text-anchor: middle;
}

.axisTitle {
	font: 10px sans-serif;
	font-weight: bold;
	text-anchor: middle;
}

.legend .title {
	font: 11px sans-serif;
	text-anchor: start;
}

.legend .selection {
	font: 11px sans-serif;
	text-anchor: start;
	visibility: hidden;
}

.legend.over text{
	font-weight: bold;
}

.legend.selected .selection{
	visibility: visible;
}

.legend.over rect{
	stroke: black;
	stroke-width: 2;
}

.legend.filteredOut text {
	visibility: hidden;
}

.legend.filteredOut rect {
	fill-opacity: 0 ;
	stroke-width: 1;
	stroke: gray;
	stroke-opacity: 0.4;
}


.bucket .title {
	font: bold 12px sans-serif;
	text-anchor: middle;
}

.circlebox .title {
	font: 12px sans-serif;
	text-anchor: middle;
}


#selectionRect {
	stroke-width: 0.3;
	stroke: #555;
	fill: #eee;
	opacity: 0.7
}

.gCircle .nodeCircle {
	stroke-width: 0;
	stroke: gray;
	opacity: 1;

}

.gCircle .nodeCircle.filteredOut {
	fill-opacity: 0 ;
	stroke-width: 1;
	stroke: gray;
	stroke-opacity: 0.4;
}

.gCircle .nodeCircle.over {
	stroke-width: 5;
	stroke: black;
}



.gCircle text.filteredOut {
	opacity: 0 !important;
}

.gCircle text {
	font: 10px sans-serif;
	fill: black;
	text-anchor: middle;
	pointer-events: none

}

.chart .time {

}

.gInfoCircle circle{
	fill: white;
	stroke-width: 3;
	stroke: gray;
}

.gInfoCircle text {
	font: 10px sans-serif;
	font-weight: bold;
	text-anchor: middle;
}



.time circle {
	stroke: none;
	opacity: 0.3;
	fill: #006D2C;
}

.time .axis {
	font: 10px sans-serif;
}

.time .axis path {
	stroke: #AAA;
	shape-rendering: crispEdges;
	fill: none;
}

.time .pointer text {
	font: 12px sans-serif;
}

.time .pointer path{
	fill: #777;

}

.histogram .info {
	display: none;
	text-anchor: middle;
	font: 9px sans-serif;
	pointer-events: none;

}

.histogram .xaxis {
	font: 10px sans-serif
}

.histogram .xaxis path {
	stroke: #aaa;
	shape-rendering: crispEdges;
	fill: none;
}

.histogram .xaxis line {
	stroke: #aaa;
	shape-rendering: crispEdges;
	fill: none;
}

/*.histogram .yaxis line {
	stroke: #aaa;
	shape-rendering: crispEdges;
	fill: none;
}*/


.histogram .xaxis text {
	text-anchor: middle;
}

.histogram .yaxis {
	/*display: none;*/
	font: 10px sans-serif
}

.histogram .yaxis path {
	stroke: #aaa;
	shape-rendering: crispEdges;
	fill: none;
}

.histogram .frame {
	stroke: none;
	shape-rendering: crispEdges;
	stroke-width: 1;
	fill: none;
}



.histogram .harea {
	fill: #bbb;
}

.histogram .hbar rect {
	fill: #bbb;
}


.histogram .hbar.over rect{
	stroke: black;
	stroke-width: 3;
}

.histogram .brush {
	opacity: 0.5
}

.histogram .brush .extent{
	fill: #caa;
	shape-rendering: crispEdges;

}



/*.histogram text {*/
/*	font: 9px sans-serif;*/
/*}*/


.histogram .from {
	text-anchor: start;
	font: 9px sans-serif;
}

.histogram .to {
	text-anchor: end;
	font: 9px sans-serif;
}

.histogram .selected-from {
	text-anchor: end;
	font: 9px sans-serif;
	pointer-events: none;
}

.histogram .selected-to {
	text-anchor: start;
	font: 9px sans-serif;
	pointer-events: none;
}








.os {

	width: 45%;
	margin: 10px;
	float: left;
	font: 13px;
	color: #888888;
}

.os ul {
	border: 1px solid #d3d3d3;
	margin: 0px;
	height: 200px;
	width: 100%;
	overflow: auto;
	list-style-type: none;
	padding: 0;
	margin-bottom: 10px;
}

.os li  {
	height: 30px;
	border-radius:4px;
	margin: 5px;
	padding: 5px 5px 5px 5px;
	white-space: nowrap;
	font: 11px;
	border: 1px solid #d3d3d3;
	background: #e6e6e6;
	color: #777777;
	vertical-align: middle;
}

.os .available li:nth-child(even) {
	background-color: #f2f2f2;
}

.os .available li.selectable {
	cursor: move;
}


.os .available li.ui-draggable-dragging,li.picked  {
	border: 1px solid #333;
}


.os .available li.unselectable {
	color: #aaaaaa;
}

.os .selected li {
	background-color: #888;
	color: #fff;
}

.os .select-button {
	position: relative;
	right: 0px;
}

.os .select-button span {
	padding: 2px 7px 2px 7px !important;
	margin: 0px !important;
	font: 0.9em;
	background: #0088ff -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.1)));
	background: #0088ff -moz-linear-gradient(top bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
	background-color: #0088ff;
	color:#fff;
}

.os .unselect-button span {
	background: #444 -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.1)));
	background: #444 -moz-linear-gradient(top bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
	background-color: #444;
	padding: 2px 7px 2px 7px;
	font: 0.9em;
	color:#fff;
}

.os .item-text-div {
	max-width:80%;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	float: left;
	padding: 2px;
}

.os .item-button-div {
	float: right;
	right: 0px;
	font: 13px;
}

.os .search-text {
	background-color:green;
	font-size: 12px;
}



.d3v-scroll-button	{
	fill: #ccc;
	cursor: pointer;
}

.d3v-scroll-button:hover	{
	fill: #333;
}

.hexagon {
	fill: none;
	stroke: #000;
	stroke-width: 1px;
}

.hexagon.highlighted {
	fill: #dbacda !important;
}
.d3calendar .day {
	fill: #fff;
	stroke: #ccc;
}

.d3calendar .monthIndicator text {
	text-shadow: 1px 1px 0 white;
}

.d3calendar .month {
	fill: none;
	stroke: #000;
	stroke-width: 2px;
}

.d3calendar .RdYlGn .q10-11{fill:rgb(165,0,38)}
.d3calendar .RdYlGn .q9-11{fill:rgb(215,48,39)}
.d3calendar .RdYlGn .q8-11{fill:rgb(244,109,67)}
.d3calendar .RdYlGn .q7-11{fill:rgb(253,174,97)}
.d3calendar .RdYlGn .q6-11{fill:rgb(254,224,139)}
.d3calendar .RdYlGn .q5-11{fill:rgb(255,255,191)}
.d3calendar .RdYlGn .q4-11{fill:rgb(217,239,139)}
.d3calendar .RdYlGn .q3-11{fill:rgb(166,217,106)}
.d3calendar .RdYlGn .q2-11{fill:rgb(102,189,99)}
.d3calendar .RdYlGn .q1-11{fill:rgb(26,152,80)}
.d3calendar .RdYlGn .q0-11{fill:rgb(0,104,55)}
.d3calendar rect.highlighted {
	fill: #dbacda !important;
}

.rect.highlighted {
	fill: #dbacda !important;
}

/* color legend */
g.color_legend rect {
	cursor: pointer;
}

g.color_legend rect.selected {
	fill: #dbacda !important;
}

/* animator brush */

/*
 Author: Suri Bala, Jacob Krebs
 Copyright: www.d3view.com
 */

/*
 *
 * colosrs
 * lightyellow: #ffffcc;
 * lightpurple: #edf3fe;
 * red: #cc0000;
 * lgray: #ccc;
 * lightorange: #ffa500;
 */




/* Table Header Popup Boxplot */
div.popover {
	/*max-width: unset;*/
	max-height: unset;
	width: auto;
}

span.popoverCloseBtn {
	float: right;
	cursor: pointer;
	padding-top: 2px;
}


/* box plot template */
svg.box {
	font: 10px sans-serif;
}

svg.box line,
svg.box rect,
svg.box circle {
	fill: rgba(255,255,255,0.7);
	stroke: #000;
	stroke-width: 1.5px;
}

svg.box .center {
	stroke-dasharray: 3,3;
}

svg.box .outlier {
	fill: none;
	stroke: #ccc;
}

/* chartsView */
div.palette {
	width: 100%;
	height: 100%;
	padding: 15px;
}

div.palette div.panel,
div.palette .panel.panel-default {
	width: 48%;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

/* Index page */
div.body .media {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
}
div.body .media:hover {
	background-color: #efefef;
}
div.dataFormatsList .btn-group-justified {
	margin-bottom: 20px;
}
div.dataFormatsList input {
	margin-bottom: 20px;
}
div.well {
	margin-bottom: 0;
}

/* Add New Page / Edit Page */
div.modalContainer.addnewpage span.addpageIcon,
div.modalContainer.editPage span.addpageIcon {
	font-size: 15px;
	padding: 5px;
	cursor: pointer;
	border: 1px solid #ebebeb;
}

div.modalContainer.addnewpage span.addpageIcon:hover,
div.modalContainer.editPage span.addpageIcon:hover {
	border: 1px solid #39a8ec;
}

div.modalContainer.addnewpage span.addpageIcon.active,
div.modalContainer.editPage span.addpageIcon.active {
	border: 1px solid #357EBD;
}

div.page-layout {
	display: inline-block;
	min-height: 50px;
	padding:2px;
	border: 1px solid #ebebeb;
	text-align: center;

}

div.page-layout.active {
	/*border-color: #66afe9;*/
	/*outline: 0;*/
	/*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);*/
	/*box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);*/
}


div.page-layout .boxContainer {
	width: 90%;
	height: 100%;
    margion-top:15px;
	display: inline-block;
}

div.page-layout .box {
	width: 100%;
	height: 80px;
	border: solid 1px #999;
	cursor: pointer;
}

div.page-layout .box50 {
	width: 100%;
	height:36px;
	border: solid 1px #999;
	cursor: pointer;
}

div.page-layout .helperText {
	text-align:center;
}


div.modalContainer.addnewpage div.row.validationError,
div.modalContainer.addnewviz div.row.validationError,
div.modalContainer.editPage div.row.validationError {
	margin-left: auto;
	margin-right: auto;
}

/* Add Visualization */

.visualizer {
	border-radius:2px;
	border:1px solid #ddd;
	cursor:pointer;
	margin-right: 6px;
	margin-bottom: 6px;
	padding:4px;
}

.visualizer-thumbnail {
	background-position: center;
	background-repeat: no-repeat;
	margin-right:2px;
	width:100%;
	height:65px;
}

.visualizer-table {
	background-image: url("/images/simlytiks/visualizers/table.png");
}

.visualizer-boxplot {
	background-image: url("/images/simlytiks/visualizers/boxplot.jpg");
}

.visualizer-curveplot {
	background-image: url("/images/simlytiks/visualizers/curveplot.jpg");
}

.visualizer-parallelcoordinates {
	background-image: url("/images/simlytiks/visualizers/parallelcoordinates.jpg");
}

.visualizer-parallelcoordinates_iihs {
	background-image: url("/images/simlytiks/visualizers/parallelcoordinates_iihs.jpg");
}

.visualizer-iihs {
	background-image: url("/images/simlytiks/visualizers/iihs.jpg");
}

.visualizer-pedpro {
	background-image: url("/images/simlytiks/visualizers/pedpro.jpg");
}

.visualizer-calendar {
	background-image: url("/images/simlytiks/visualizers/calendar.jpg");
}

.visualizer-heatmap, .visualizer-table_heatmap {
	background-image: url("/images/simlytiks/visualizers/heatmap.png");
}

.visualizer-imagegallery {
	background-image: url("/images/simlytiks/visualizers/imagegallery.png");
}

.visualizer-radar {
	background-image: url("/images/simlytiks/visualizers/radar.jpg");
}

.visualizer-whiplash {
	background-image: url("/images/simlytiks/visualizers/whiplash.jpg");
}

.visualizer-barchart-horizontal {
	background-image: url("/images/simlytiks/visualizers/barchart-horizontal.jpg");
}


.visualizer-barchart-vertical {
	background-image: url("/images/simlytiks/visualizers/barchart-vertical.jpg");
}


.visualizer-keyvalue {
	background-image: url("/images/simlytiks/visualizers/table.png");
}

.visualizer-hexagonal {
	background-image: url("/images/simlytiks/visualizers/hex.jpg");
}

.visualizer-3dmodel {
	background-image: url("/images/simlytiks/visualizers/3dmodel.jpg");
}
.visualizer-treemap {
	background-image: url("/images/simlytiks/visualizers/treemap.jpg");
}

.visualizer-geoviz {
	background-image: url("/images/simlytiks/visualizers/geoviz.jpg");
}

.visualizer-dtree {
	background-image: url("/images/simlytiks/visualizers/dtree.jpg");
}

.visualizer-3dscatter {
	background-image: url("/images/simlytiks/visualizers/3dscatter.jpg");
}

.visualizer-bubble, .visualizer-bubblechart {
	background-image: url("/images/simlytiks/visualizers/bubble.jpg");
}

.visualizer-line, .visualizer-linechart {
	background-image: url("/images/simlytiks/visualizers/line.jpg");
}

.visualizer-image_analyzer {
	background-image: url("/images/simlytiks/visualizers/image_analyzer.jpg");
}

.visualizer-scatter_matrix {
	background-image: url("/images/simlytiks/visualizers/bubble.jpg");
}

.visualizer-circles {
	background-image: url("/images/simlytiks/visualizers/circles.jpg");
}

div.modalContainer.addnewviz .modal-dialog {
	width: 800px;
}

div.modalContainer.addnewviz .modal-body {
	max-height:800px;
	height:auto;
	overflow-y:auto;
}

div.modalContainer.addnewviz .validationError {
	display: none;
}

div.modalContainer.addnewviz .scrollableH {
	margin-bottom: 15px;
	position:relative;
	overflow: hidden;
}

div.modalContainer.addnewviz .scrollableH .moreOnLeft {
	position:relative;
	display:none;
	text-shadow: 0px 1px 2px #333;
	color: #FFF;
	float: left;
	font-size: 26px;
	top: -100px;
}

div.modalContainer.addnewviz .scrollableH .moreOnRight {
	position:relative;
	float: right;
	text-shadow: 0px 1px 2px #333;
	color: #FFF;
	font-size: 26px;
	top: -100px;
}

div.modalContainer.addnewviz .scrollableH .col-lg-12 {
	width: 790px;
	height: auto;
}

div.modalContainer.addnewviz .scrollableH .col-lg-12 .layout {
	width: 110px;
	height: 110px;
}

div.modalContainer.addnewviz .scrollableH .col-lg-12 .layout .boxContainer .box {
	width: 100%;
	height: 78%;
	float: left;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border: 0;
}

div.modalContainer.addnewviz .showLayoutSelection {
	position:absolute;
	display: none;
	float: left;
	text-shadow: 0px 1px 2px #888;
	color: #FFF;
	padding-left: 10px;
	padding-right: 11px;
	background-color: #efefef;
	cursor: pointer;
	font-size: 26px;
	top: 0px;
	left: 380px;
}

div.modalContainer.addnewviz .vizconfiguration .chartConfigView,
div.modalContainer.addnewviz .vizconfiguration .filterView,
div.modalContainer.addnewviz .vizconfiguration .schemaView {
	width: 100%;
}

/* Blank Page */
div.add_visualization {
	width: 100%;
	border: 1px solid #bcbcbc;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	text-align: center;
	cursor: pointer;
}


/* List View */
.list_view {
	width: 100%;
	margin-bottom: 10px;
}

.list_view .header {
}

.list_view .header a {
	color: #3366cc;
}

.list_view .header a:hover {
	background-color: #3366cc;
	color: #fff
}

.list_view .header h1 {
	margin: 0px;
	margin-right: 20px;
	border: 0px;
	padding: 0px;
	text-transform: capitalize;
}

.list_view .header_options {
	color: rgb( 160, 160, 160 );
	clear: both;
}

.list_view .header_options a {
	color: rgb( 80, 80, 80 );
}

.list_view .header_options a:hover {
	color: #fff;
	background-color: rgb( 80, 80, 80 );
}

.list_view .header_options ul {
	padding: 0px;
	margin: 0px;
}

.list_view .header_options ul li {
	display: inline;
	margin: 0px;
	padding: 0px;
}

.list_view .description {
	margin-bottom: 10px;
	padding: 6px 0px;
	border-top: 1px solid #a3a3a3;
	color: rgb( 120, 120, 120 );
}

.list_view .footer_options {
	color: rgb( 120, 120, 120 );
}

.list_view .footer_options li {
	display: inline;
}

.list_view .data_tabs {
	margin-bottom: 1.5em;
}

.list_view .data_tabs ul {
	margin: 0px;
	height: 22px;
}

.list_view .data_tabs ul li {
	margin: 0px;
	padding: 0px;
}

.list_view .data_content {
	min-height: 600px;
}

.create_buttons {
	text-align: right;
}



table.large_padding tr  td { padding:16px 4px; }

table.no_border > tr,
table.no_border > tr > td,
table.no_border  th,
table.no_border > tbody > tr > td
{padding-left:0px; padding-right:0px; border:0px!important;}

table.no_padding tr,
table.no_padding tr > th,
table.no_padding tr > td
{ padding:0px!important; line-height:1em; margin:0px!important;}

.border_bottom tr,
.border_bottom tr > th,
.border_bottom tr > td
{
	border-bottom:1px solid #eee;
}
.border_bottom tr:last-child > td {
	border-bottom:0px;
}

.pad_cell {
	padding:8px;
}
.inner_borders td {
	border-right:1px dashed #ddd;
}
.inner_borders td:last-child {
	border-right:0px;
}

table.column_border .column {
	border-right: 1px solid #ddd;
	padding-right:12px;
}
table.column_border .column:nth-of-type(1) {
	border-left: 1px solid #ddd;
}

table.column:hover {
	border: 1px solid #eee;
	background-color: #ccc;
}

.deeper_row td, .deeper_row th,.deeper_rows td, .deeper_rows th
{
	padding-top:4px;
	padding-bottom:4px;
}

.wider_columns  th, .wider_columns td {
	padding-left:8px;
	padding-right:8px;
}

table.value_table tr,
table.value_table tr > th,
table.value_table tr > td
{
	text-align:right;
}

table.p10 tr,
table.p10 tr > th,
table.p10 tr > td
{ padding:10px;}




.button, .button span {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display:inline-block;
}

.button.pill {
	border-radius:14px;
	-webkit-border-radius:14px!important;
	-moz-border-radius:14px;
}

.button.icon { background-position:12px center!important; }
.button.icon span { padding:0.2em 0.8em!important;}
.button.icon.small { background-position:12px center!important; }
.button.icon.medium { background-position:14px center!important; }

.button {
	padding:2px 12px;
	white-space: nowrap;
	line-height:1em;
	position:relative;
	outline: none;
	overflow: visible; /* removes extra side padding in IE */
	cursor: pointer;
	border: 1px solid #999;/* IE */
	border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
	border-bottom:rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	background: -moz-linear-gradient(
			center top,
			rgba(255, 255, 255, .1) 0%,
			rgba(0, 0, 0, .1) 100%
	);/* FF3.6 */
	background: -webkit-gradient(
			linear,
			center bottom,
			center top,
			from(rgba(0, 0, 0, .1)),
			to(rgba(255, 255, 255, .1))
	);/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
	-moz-user-select: none;
	-webkit-user-select:none;
	-khtml-user-select: none;
}

.button.full, .button.full span {
	display: block;
}
.button:hover, .button.hover {
	background: -moz-linear-gradient(
			center top,
			rgba(255, 255, 255, .2) 0%,
			rgba(255, 255, 255, .1) 100%
	);/* FF3.6 */
	background: -webkit-gradient(
			linear,
			center bottom,
			center top,
			from(rgba(255, 255, 255, .1)),
			to(rgba(255, 255, 255, .2))
	);/* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}

.button:active, .button.active {
	top:1px;
}
.button span {
	position: relative;
	color:#444;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
	line-height:1em;
	text-decoration:none;
	text-align:center;
	white-space: nowrap;
	padding:0.4em 0.5em;
}
.button span.icon { background-position:left center; padding-left:18px!important;}
.button.wider { padding-left:16px; padding-right:16px; }

.button.small span {
	font-size:11px;
	padding:0.4em 0.5em;
}
.button.medium span {
	font-size:14px;
	padding:0.4em 1.0em;
}
.button.large span {
	font-size:18px;
	padding:0.4em 1.2em;
}
.button.black {
	background-color: #333333;
}
.button.gray {
	background-color: #666666;
}
.button.gray span {
	color:#fff;
}

.button.lgray {
	background-color: #eee;
}
.button.lgray span {
	color:#666;
}

.button.white {
	background-color: #FFFFFF;
}
.button.white span{
	color: #666666;
}
.button.red span ,
.button:hover.red_onhover span {
	background-color: #e62727;
	color: #fff;
}
.button.orange {
	background-color: #ff5c00;
}
.button.magenta {
	background-color: #A9014B;
}
.button.yellow {
	background-color: #ffb515;
}
.button.blue,
.button.blue span
{
	background-color: #00ADEE;
	color:#fff;
}
.button.pink {
	background-color: #e22092;
}

.button.green_onhover span,
.button.red_onhover span
{
	color:#666;
}

.button.green span {
	color: #fff;
}

.button.green span {
	background-color:#22741b;
	color: #fff;
}


.button.rosy {
	background-color: #F16C7C;
}
.button.brown {
	background-color: #804000;
}
.button.purple {
	background-color: #800080;
}
.button.cyan {
	background-color: #46C7C7;
}
.button.gold {
	background-color: #D4A017;
}

button.activeView {
	border: 1px solid #428bca;
}

.popover .well {
	display: none;
}

span.pageOption.active {
	border: 1px solid #42b0ef !important;
}

div.vizItem.active {
	border: 1px solid #4c9ed9 !important;
}

/* ----------- BAR CHART ---------------- */
.bar-chart .bar {
	stroke-width: 0;
	stroke: none;
}
.bar-chart .line {
	stroke-width: 1;
	fill: none;
}
.bar-chart .line.dimmed {
	stroke: #bbb !important;
	stroke-opacity: 0.5 !important;
}

.bar-chart .line.highlighted {
	stroke-width: 3px !important;
}

.bar-chart .bar_title {
	font: bold 13px sans-serif;
	text-anchor: middle;
}
.bar-chart .chart-border {
	stroke: #AAA;
	shape-rendering: crispEdges;
	fill: none;
	opacity: 1 !important;
}

.bar-chart .bar.highlighted {
	stroke: black !important;
	stroke-width: 3px !important;
}
.bar-chart .area.highlighted {
	stroke: black !important;
	stroke-width: 3px !important;
}
.bar-chart .bar.dimmed {
	stroke: none;
	fill: #bbb !important;
	fill-opacity: 0.5 !important;
}
.bar-chart .area.dimmed {
	stroke: none;
	fill: #bbb !important;
	fill-opacity: 0.5 !important;
}
.bar-chart .extent {
	stroke: #f09f8c;
	fill-opacity: .5;
	fill: #ccc;
	shape-rendering: crispEdges;
}

/* ----------- PARALLEL CHART ---------------- */

.parallel {
	font: 10px sans-serif;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.parallel .background path {
	fill: none;
	stroke: #DDD;
	stroke-opacity: 0.4;
	shape-rendering: crispEdges;
}

.parallel .foreground path,
.parallel .highlight path {
	fill: none;
	stroke: darkolivegreen;
	stroke-width: 2;
}

.parallel .highlight path {
	stroke-opacity: 1;
}

svg g.brush rect.extent, svg .num_colorlegend rect.extent {
	fill: steelblue;
	// fill: var(--d3view-secondary-color);
	shape-rendering: crispEdges;
	stroke: #eee;
	/*stroke: 1px solid steelblue;*/
	fill-opacity: 0.5;
	shape-rendering:crispEdges;
}



.parallel .axis line, .parallel .axis path {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.parallel .dimension.dragging .axis-handle {
	fill: red;
}
.parallel .dimension.hovered .axis-rect {
	fill: var(--d3neutralLighterAlt)!important;
}
.parallel .axis-handle text {
	/*text-shadow:*/
	/*-1px -1px 0 #fff,*/
	/*1px -1px 0 #fff,*/
	/*-1px 1px 0 #fff,*/
	/*1px 1px 0 #fff;*/
	cursor: move;
	text-anchor: middle;
}

.parallel .dimension {
	background: blue;
}

.parallel .sort-icon {
	cursor:pointer;
	opacity: 0.2
}

.parallel .dimension .sort-icon:hover {
	opacity: 1.0
}

.parallel .dimension .sort-icon:active {
	opacity: 0.4;
}

/* bubble chart */
circle.bubble.highlighted {
	stroke: black !important;
	stroke-width: 3px !important;
}
circle.bubble.dimmed {
	stroke: none;
	fill: #bbb !important;
	fill-opacity: 0.5 !important;
}
circle.bubble-chart .extent {
	stroke: #f09f8c;
	fill-opacity: .5;
	fill: #ccc;
	shape-rendering: crispEdges;
}

/* settings modal */
div.modalContainer.settings .modal-body {
	max-height:400px;
	overflow-y:auto;
}

div.modalContainer.settings .modal-body .nav-tabs {
	margin-bottom:10px;
}

div.modalContainer.settings .modal-body .tab-pane .editableTable {
	height: auto;
}

div.modalContainer.settings .list-group-item {
	cursor: move;
}

div.modalContainer.settings .list-group-item .sendToTopDown {
	float: right
}

div.modalContainer.settings .list-group-item .sendToTopDown .sendToTop,
div.modalContainer.settings .list-group-item .sendToTopDown .sendToBottom {
	padding: 5px;
	background-color: #efefef;
	border-radius: 10px;
	color: #666;
	cursor: pointer;
}

div.modalContainer.settings .list-group-item .sendToTopDown .sendToTop:hover,
div.modalContainer.settings .list-group-item .sendToTopDown .sendToBottom:hover {
	background-color: #666;
	color: #efefef;
}

div.modalContainer.settings .list-group-item .sendToTopDown .sendToBottom {
	margin-left: 10px;
}

/* filter modal */
div.modalContainer.filtermodal .activeFilters .filterElement {
	margin-bottom: 5px;
	cursor: pointer;
	-o-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
	font-size: 1em;
}

div.modalContainer.filtermodal .activeFilters .filterElement:hover {
	background-color: red;
	color: white;
}

div.modalContainer.filtermodal .filtergroupItem {
	cursor: pointer;
}

div.modalContainer.filtermodal .createFilterGroupPanel {
	display: none;
}

div.modalContainer.filtermodal .floatRight {
	float: right;
}

div.modalContainer.filtermodal .floatRight .glyphicon {
	padding: 5px;
	background-color: #EFEFEF;
	border-radius: 10px;
	color: #666;
	cursor: pointer;
	margin-left: 10px;
	position: relative;
	top: -2px;
}

div.modalContainer.filtermodal .floatRight .glyphicon:hover {
	background-color: #666;
	color: #efefef;
}

/* Overview table */

div.wrapper .visualizations {
	min-height: 40px;
}

div.wrapper .viewContent {
	height: auto;
	padding:2px;
	border: 2px solid #eee;
}

/*div.wrapper .viewContent.overview-page {*/
	/*border:0px solid;*/
/*}*/

div.wrapper .viewContent:not(.overview):not(.active):hover {
	border:2px dashed #ccc;
}


div.wrapper div.viewContent:not(.overview).active,
div.wrapper div.viewContent:not(.overview).active:hover {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.simlytiks .vizviewContainer .vizviewPanel > .panel-body {
	padding:2px!important;
	position: relative;
	background: #FFF;
}

div.simlytiks .vizviewContainer > .vizviewPanel > .panel-heading {
	cursor: move;
	padding: 0;
	margin-bottom: 0!important;
}
/*div.simlytiks .vizviewContainer > .vizviewPanel > .panel-heading:hover {*/
/*	background-color: #f5f5f5;*/
/*}*/

div.simlytiks .vizviewContainer div.viewContent .panel-heading {
	padding: 0!important;
	/*padding-top: 24px!important;*/
}
div.simlytiks .vizviewContainer div.viewContent.mini .panel-heading {
	padding-top: 0!important;
}

div.simlytiks div.viewContent.mini .vizContainer {
	padding: 0!important;
}

div.simlytiks .vizviewContainer .panel-heading > .row {
	position: relative;
	margin: 0;
}

div.wrapper.overview .pagination {
	margin-top: 2px;
	margin-bottom: 0;
}

div.wrapper.overview .newFilterBtn.localfiltered {
	background-color: #FCF8E3;
	border-color: #FAEBCC;
	color: #8A6D3B;
}

div.wrapper.overview .newFilterBtn.globalfiltered {
	background-color: #DFF0D8;
	border-color: #D6E9C6;
	color: #3C763D;
}

div.wrapper.overview table td.highlighted,
div.d3Panel table td.highlighted {
	border-color: #BCE8F1;
	background-color: #D9EDF7;
	color: #31708F;
}

div.wrapper.overview .tableOptionsCaret.active {
	background-color: #DFF0D8;
	border-color: #D6E9C6;
	color: #3C763D;
}

div.wrapper.overview .table_overviewviz {
	margin-left: 15px;
}

div.wrapper.overview .c1,
div.wrapper.overview .c2,
div.wrapper.overview .c3,
div.wrapper.overview .c4 {
	padding-left: 0;
	padding-right: 0;
}

div.wrapper.overview .overvizviewpanel {
	width: 93%;
	display: inline-block;
}

/* Log console */
div.log_console {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 20px;
	border-top: none;
	background: none;
	-o-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	transition: all 0.1s linear;
}

div.log_console.stretched {
	height: 150px;
	border-top: 1px solid #bbb;
	background: rgba(0,0,0,0.7);
	color: white;
}

div.log_console.stretched .log {
	font-family: Andale Mono, Consolas;
	padding: 10px;
	font-size: 0.9em;
	overflow-y: auto;
	height: 115px;
}

div.log_console .handle {
	text-align: center;
	margin: 0 auto;
	width: 50px;
	height: 20px;
	background-color: #ccc;
	cursor: pointer;
}

/* Notification layer */

div#notificationLayer {
	position: fixed;
	top: 8px;
	height: 50px;
	z-index: 100000;
}

div#notificationLayer .alert {
	padding: 10px;
	display: inline-block;
	width: 100%;
	text-align: center;
	position: absolute;
}

/* Animator */
div.viz-content-container .controlBtnGroups {
	text-align: center
}

div.viz-content-container .controlBtnGroups button.playPause {
	color: #428BCA;
}

/* single row / comparison viewer */
.modalContainer.detailviewer .compButtons {
	display: inline-block;
	margin-right: 20px;
}
.modalContainer.detailviewer small {
	margin-right: 20px;
}
.modalContainer.detailviewer .modal-header .pull-right .glyphicon,
.modalContainer.comparisonviewer .modal-header .pull-right .glyphicon {
	cursor: pointer;
	border-radius: 20px;
	padding: 3px;
	border: 1px solid;
}
.modalContainer.detailviewer .modal-header .pull-right .glyphicon:hover,
.modalContainer.comparisonviewer .modal-header .pull-right .glyphicon:hover {
	color: #428BCA;
}
.modalContainer.detailviewer .modal-header .pull-right .glyphicon:active,
.modalContainer.comparisonviewer .modal-header .pull-right .glyphicon:active {
	color: white;
	background-color: #428BCA;
}
.modalContainer.detailviewer .modal-header .pull-right .compButtons .glyphicon {
	margin-right: 5px;
}
.modalContainer.comparisonviewer #carousel-img .carousel-inner {
	text-align: center;
}
.modalContainer.comparisonviewer .carousel .item .imgContainer {
	display: inline-block;
	width: 49%;
}
.modalContainer.comparisonviewer .carousel .item .imgContainer img {
	width: 100%;
}
.modalContainer.comparisonviewer .carousel .item .imgContainer h3 {
	position: relative;
	top: -30px;
	display: block;
	text-align: center;
	color: white;
}

/* Vizview */


.vizviewContainer {
	margin: 0px;
	width: 100%;
}
div.simlytiks .vizviewContainer.hasVizAnim {
	/*width: calc(100% - 25px);*/
}
div.simlytiks div.vizviewContainer.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 20;
}


.vizviewContainer.maximized {
	position: fixed;
	z-index: 20!important;
	width: 100%;
	height: 100%;
	margin:0px;
}


.vizviewCotnainer.maximized .panel {
	border-radius:0px;
}


.vizviewContainer.maximized .vizviewPanel {
	height: 100%;
}


.vizviewContainer .panel-heading {
    /*padding: 0px 15px;*/
}


.vizviewContainer .panel-heading .panel-title {
  font-size: 12px;
    margin-top:4px;
}


.viewContent .editparametersdialog {
    position: absolute;
    z-index: 200;
    background-color: #fff;
    border: 2px solid #eee;
}

.viewContent .editpanel {
	padding:20px;
}

.viewContent .page-make-active-col {
    border-radius: 16px;
    padding: 2px 6px;
    top: 1px;
}


/* Filter Access View */
li.filterAccessBtn .popover {
	width: 250px;
	z-index: 1001;
}

li.filterAccessBtn .popover li.filteritem {
	background-color: #fff;
	border-bottom: dashed 1px #ddd;
}

li.filterAccessBtn .popover li.filteritem:hover {
	cursor: pointer;
	background-color: #eee;
}

li.filterAccessBtn .popover li.filteritem:active {
	background-color: #dd6061;
	color: #fff;
}

li.filterAccessBtn .popover li:last-child {
	border: 0;
}


/* EDITS - SHASHANK */
/* main panel */
div.simlytiks {
	overflow: hidden;
	position: relative;
	height: 100%;
	background-color: #FFF!important;
}
div.simlytiks svg:not(.sparkline) {
	height: auto;
	width: auto;
	max-width: none;
}
/* backdrop */
div.simlytiks div.sl-backdrop {
	position: fixed;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	top: 0;
	left: 0;
	cursor: progress;
	background-color: #000;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
}
div.simlytiks span.close-backdrop {
	position: fixed;
	font-size: 14px;
	right: 10px;
	cursor: pointer;
	background: #CCC;
	top: 10px;
	padding: 10px;
	border-radius: 6px;
	opacity: 0;
}
div.simlytiks div.sl-backdrop-addon {
	position: fixed;
	z-index: 0;
	top: 50%;
	left: 41%;
	opacity: 0;
}
div.simlytiks div.sl-backdrop-addon div.message {
	margin-bottom: 8px;
	/*text-align: center;*/
	padding: 0;
	color: #2d4882;
	font-size: 14px;
}
div.simlytiks.show_backdrop .close-backdrop {
	z-index: 10;
	opacity: 1;
}
div.simlytiks.show_backdrop div.sl-backdrop {
	z-index: 9;
	opacity: 0.3;
}
div.simlytiks.show_backdrop div.sl-backdrop-addon {
	z-index: 10;
	opacity: 1;
	background: #DDD;
	padding: 10px;
	border-radius: 10px;
}
div.simlytiks.simlytiks-tabs .remove_sl_dataset {
	position: absolute;
	top: -12px;
	right: -7px;
	cursor: pointer;
	z-index: 2;
	padding: 3px;
	opacity: 0;
}
div.simlytiks.simlytiks-tabs li:hover > .remove_sl_dataset {
	opacity: 0.2;
}
div.simlytiks.simlytiks-tabs li:hover > .remove_sl_dataset:hover {
	opacity: 0.8!important;
}

div.simlytiks .btn:focus {
	outline: none!important;
}
div.simlytiks.simlytiks-tabs > .tab-content {
	z-index: 5;
}
div.simlytiks.simlytiks-tabs.hasFullScreenViz .tab-content {
	z-index: 6;
}
div.simlytiks.hasFullScreenViz .sl-side-bar,
div.simlytiks.hasFullScreenViz .simlytiks-nav-tabs,
div.simlytiks.hasFullScreenViz .sl-utils,
div.simlytiks.hasFullScreenViz .floating-btn,
div.simlytiks.hasFullScreenViz .page-options,
div.simlytiks.hasFullScreenViz .page-navigation {
	z-index: 0!important;
}
div.simlytiks.hasFullScreenViz .page-color-legends {
	display: none;
}
/** Added by shashank2104 on 2026-05-26 - page-level colorBy legend position support **/
div.simlytiks .sl-page.sl-page-has-right-legend {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
div.simlytiks .sl-page.sl-page-has-right-legend > .tab-content {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}
div.simlytiks .sl-page.sl-page-has-right-legend.hasTabs > .sl-page-tab-content {
	width: calc(100% - 60px - var(--sl-right-legend-w, 280px));
}
/** Updated by shashank2104 on 2026-06-01 - R0-3672 - column width now driven by
 *  the --sl-right-legend-w CSS variable set per-page by
 *  simlytiks.views.js#_sizeRightLegendColumn after the legend renderer finishes.
 *  Default 280px keeps the pre-change look when JS hasn't run yet (initial
 *  render frame, or fall-back paths). The old hard `max-width: 300px` was
 *  dropped — JS already clamps to a font-size-aware MAX so long labels like
 *  `2022_Jeep_Cherokee` show on a single line in premium decks. **/
div.simlytiks .page-color-legends-right {
	position: relative;
	flex: 0 0 var(--sl-right-legend-w, 280px);
    width: var(--sl-right-legend-w, 280px);
	overflow-y: auto;
	overflow-x: hidden;
}
div.simlytiks .page-color-legends-right .legends-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	height: 100% !important;
	top: 0;
}
div.simlytiks .page-color-legends-right .d3view-legends-container {
	flex-direction: column !important;
	align-items: flex-start !important;
	max-height: none !important;
	height: 100% !important;
	width: 100% !important;
	padding: 8px !important;
	border: none!important;
}
div.simlytiks .page-color-legends-right .d3view-legends-container li.legend-item .curve-name {
	white-space: normal!important;
}
div.simlytiks .page-color-legends-right .d3view-legends-container li.legend-item svg.legend-line {
	flex-shrink: 0;
	min-width: 30px;
}
div.simlytiks .page-color-legends-right .legends-body,
div.simlytiks .page-color-legends-right .legends-body > ul,
div.simlytiks .page-color-legends-right .legends-list {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 4px 0 !important;
	max-height: none !important;
	overflow-y: auto !important;
	width: 100% !important;
}
div.simlytiks .page-color-legends-right .legend-item {
	max-width: 100% !important;
	width: 100% !important;
}
div.simlytiks .page-color-legends-right .legend-container-options {
	display: none !important;
}
div.simlytiks.hasFullScreenViz .viewContent:hover .floating-btn {
	z-index: 2!important;
}
div.simlytiks.hasFullScreenViz div.simlytiks:not([data-management="standalone"]) .datamodel-options {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}

div.simlytiks.hasFullScreenViz div.simlytiks[data-management="standalone"] .viewContent.fixed {
	height: 100%!important;
	position: absolute!important;
}

div.simlytiks.simlytiks-tabs .simlytiks-nav-tabs {
	margin-bottom: 0!important;
	border-bottom: none;
	/*background-color: #4f5359;*/
	/*color: #FFF;*/
	background: #FFF;
	color: #4f5359;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 5;
	border-top: 1px solid #DDD;
	border-top: 1px solid var(--neutralLight);


	overflow: auto;
	display: flex;
	max-width: 75%;
	overflow-y: hidden;

	/*background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));*/
}
div.simlytiks.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading {
	padding: 10px 15px;
	background: #4f5359;
	background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));
	color: #FFF;
	border-bottom: 2px solid transparent;
}
div.simlytiks.simlytiks-tabs .nav-tabs li.nav-item {
	margin-bottom: -5px;
}
div.simlytiks.simlytiks-tabs .nav-tabs li.nav-item:hover {
	background-color: #f5f5f5;
}
div.simlytiks.simlytiks-tabs .nav-tabs li.nav-item > a {
	display: inline-block;
	max-width: 400px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-right: 15px;
	font-weight: 400;
	border-bottom: 3px solid transparent;
}
div.simlytiks.simlytiks-tabs .nav-tabs li.nav-item.active a {
	border-bottom: 3px solid #428bca;
	font-weight: bold;
	border-top-color: transparent;
	olor: #428bca;
}
div.simlytiks.simlytiks-tabs .nav-tabs li.nav-item:not(.active) a:hover {
	background-color: #FFF;
	color: #555;
}
div.simlytiks.simlytiks-tabs .nav-tabs .add_dataset {
	position: absolute;
	bottom: 10px;
	right: -31px;
	cursor: pointer;
	padding: 5px;
	border: 1px solid #DDD;
	border-radius: 50%;
	color: #333;
}
div.simlytiks.simlytiks-tabs .nav-tabs .add_dataset:hover {
	color: #428bca;
	border-color: #428bca;
}


div.simlytiks ul.sl-utils {
	z-index: 6;
	position: fixed;
	right: 20px;
	bottom: 14px;
	margin-bottom: 0;
}
div.simlytiks ul.sl-utils li {
	display: inline;
	padding: 5px;
}
div.simlytiks ul.sl-utils li a {
	text-decoration: none;
}
div.simlytiks ul.sl-utils li.disabled {
	cursor: not-allowed;
}
div.simlytiks ul.sl-utils li.disabled a {
	pointer-events: none;
	color: gray;
}
div.simlytiks ul.sl-utils li a:hover {
	color: steelblue;
}




/* add data model modal */
div.simlytiks-add-data-modal .ds-category {
	margin-bottom: 10px;
}
div.simlytiks-add-data-modal ul.ds-category-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 10px;
	/*justify-content: center;*/
}
div.simlytiks-add-data-modal ul.ds-category-items li {
	display: flex;
	align-items: center;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 5px;
	/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);*/
	padding: 6px;
	letter-spacing: 0.02em;
	font-size: 1.475rem;
	font-weight: 400;
	color: #4f5359;
	margin: 0 10px;
	cursor: pointer;
}
div.simlytiks-add-data-modal ul.ds-category-items li:first-child {
	margin-left: 0;
}
div.simlytiks-add-data-modal ul.ds-category-items li.disabled {
	cursor: not-allowed;
	opacity: 0.3;
	/*pointer-events: none;*/
}

div.simlytiks-add-data-modal ul.ds-category-items li:hover,
div.simlytiks-add-data-modal ul.ds-category-items li.active {
	background-color: steelblue;
	color: #FFF;
}

div.simlytiks-add-data-modal .d3view-form-builder-container {
	border: 1px solid #DDD;
}



div.simlytiks-add-data-modal .data-source-result {
	overflow: auto;
}
div.simlytiks-add-data-modal .data-source-result .dropzone {
	text-align: center;
	height: 100%;
}
div.simlytiks-add-data-modal .data-source-result .dropzone .dz-info {
	display: block;
	font-size: 1.2em;
}
div.simlytiks-add-data-modal .data-source-result .dropzone .dz-message {
	font-size: 3em;
}
div.simlytiks-add-data-modal .data-source-result .dropzone.dz-started .dz-message {
	display: block!important;
}
div.simlytiks-add-data-modal .data-source-result .sample-files-list li:hover {
	background-color: #f5f5f5;
}
div.simlytiks-add-data-modal .data-source-result .sample-files-list li.active {
	background-color: steelblue;
	color: #FFF;
}
div.simlytiks-add-data-modal .data-source-result .sample-files-list li.active a {
	color: #FFF;
}
div.simlytiks-add-data-modal table#sc-table thead th {
	padding: 0;
	border: none;
}
div.simlytiks-add-data-modal table#sc-table tbody tr:first-child td {
	border-top: none;
}

/*div.sl-header {*/
/*	background: #FFF;*/
/*	color: #4f5359;*/
/*}*/

div.sl-row {
	padding: 12px;
}
div.sl-row .sl-row-name {
	font-size: 1.2em;
	font-weight: 500;
	float: right;
	position: relative;
	top: 7px;
}


div.simlytiks div.mainPanel {
	display: flex;
}
div#simlytiks-modal div.simlytiks div.slBody {
	height: calc(100vh - 125px);
	background: var(--d3neutralLighterAlt);
	position: relative;
}
div#simlytiks-modal div.simlytiks[data-view="mini"] div.slBody {
	/*height: calc(100vh)!important;*/
}
div#simlytiks-modal .slBody.mainPanel {
	width: calc(100vw - var(--d3v-rail-w, 0px));
}
div#simlytiks-modal .sl-main-window:not(.pl-fixed) {
	min-width: 0;
}

/* main window */
div.simlytiks .sl-main-window, div.simlytiks .schema-editor {
	padding: 0 20px!important;
	/*width: 100%;*/
	position: relative;
	z-index: 101;
	flex: 1 1 auto;
	/*width: auto!important;*/
	/*z-index: 108;*/
	/*z-index: 2;*/
}
div.simlytiks .sl-main-window:not(.pl-fixed) {
	width: auto!important;
}
div.simlytiks.hasFullScreenViz .sl-main-window {
	z-index: 102;
}
div.simlytiks .mainPanel.hasMiniPanelDDOpen .sl-main-window {
	z-index: 2;
}
div.simlytiks.d3view-schema-editor .saved_files a.select2-choice {
	height: 29.99px;
}
div.simlytiks .sl-main-window .progress-bar.active {
	animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
}

div.simlytiks[data-render-in-modal="false"] .sl-main-window:not(.pl-fixed) {
	flex: 1 0 auto;
	max-width: 100%;
}
div.simlytiks[data-render-in-modal="false"] .slBody.mainPanel {
	width: 100%!important;
	max-width: 100%;
}

/* SIDE PANEL */
div.simlytiks .sl-side-bar {
	border-right: 1px solid #DDD;
	/*border-top: 1px solid #DDD;*/
}
div.simlytiks .sl-side-bar {
	margin-right: 5px;
	/*z-index: 3;*/
	/*flex: 0 0 170px;*/
	/*flex: 0 0 300px;*/
	width: 200px;
	flex: 0 0 200px;
	/*background-color: #f9f9f9;*/
	/*border-radius: 4px;*/
	/*box-shadow: 0 5px 5px 0 rgba(0,0,0,0.16), 0 5px 10px 0 rgba(0,0,0,0.12);*/
	/*box-shadow: 0 ;*/
	transition: flex-basis 0.3s linear;
}
div.simlytiks .sl-side-bar.mini {
	z-index: 3;
}

div.simlytiks .sl-side-bar.mini {
	flex: 0 0 80px;
	/*width: 80px;*/
}
div.simlytiks .sl-side-bar.mini .sidebar-body {
	display: none;
}
div.simlytiks .sl-side-bar .mini-panel {
	display: none;
}

div.simlytiks .sl-side-bar .mini-panel {
	display: none;
	animation-duration: 0.25s;
}

div.simlytiks .sl-side-bar.mini .mini-panel {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	/*top: 35px;*/
	/*font-size: 14px;*/
	align-items: center;
	justify-content: center;
	/*font-weight: bold;*/
	/*padding: 5px;*/
	z-index: 2;
}
/*div.simlytiks .sl-side-bar.mini .mini-panel > ul {*/
/*	box-shadow: none;*/
/*}*/
div.simlytiks .sl-side-bar.mini ul.pl-tabs-vertical {
	flex: 1 1 100%;
}
/*div.simlytiks .sl-side-bar.mini .mini-panel > ul > li {*/
/*	border-radius: 50%;*/
/*	width: 45px;*/
/*	height: 45px;*/
/*	margin-bottom: 5px;*/
/*	text-align: center;*/
/*	cursor: pointer;*/
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
/*	padding: 0;*/
/*}*/
/*div.simlytiks .sl-side-bar.mini .mini-panel > ul > li > a {*/
/*	text-decoration: none;*/
/*	padding: 6px 8px;*/
/*}*/
div.simlytiks .sl-side-bar.mini .mini-panel > ul > li:hover, div.simlytiks .sl-side-bar.mini .mini-panel > ul > li.open {
	background-color: aliceblue;
}
div.simlytiks .sl-side-bar.mini .mini-panel > ul > li:hover .mini-panel-item-icon, div.simlytiks .sl-side-bar.mini .mini-panel > ul > li.open .mini-panel-item-icon {
	opacity: 1!important;
}
div.simlytiks .sl-side-bar.mini .mini-panel-item-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 4px;
	opacity: 0;
}
div.simlytiks .sl-side-bar.mini .dropdown-menu {
	left: 100%;
	top: 50%;
	width: 300px;
	/*max-height: 300px;*/
	overflow: auto;
}
div.simlytiks .sl-side-bar.mini .dropdown-menu .pages-panel .page-tree,
div.simlytiks .sl-side-bar.mini .dropdown-menu .responses-panel .list-group {
	max-height: 250px!important;
	overflow: auto;
}
div.simlytiks .sl-side-bar.mini .dropdown-menu .responses-panel,
div.simlytiks .sl-side-bar.mini .dropdown-menu .pages-panel {
	height: auto!important;
}
div.simlytiks .sl-side-bar.mini .mini-panel .pages-panel .add-new-page {
	display: none;
}

div.simlytiks .sl-side-bar .pages-panel.hasSearchOpen .page-tree {
	height: calc(100% - 124px)!important;
}
div.simlytiks .sl-side-bar .pages-panel .page-tree .tree-view > ul.tree-list {
	padding-left: 20px;
}
div.simlytiks .sl-side-bar .pages-panel .page-tree ul.tree-list {
	padding-left: 5px;
}
div.simlytiks .sl-side-bar .pages-panel .page-tree {
	overflow: auto;
}
div.simlytiks .sl-side-bar .pages-panel .page-tree .tree-view li.tree-list-item.active > div.vertical-center .tv-content {
	/*color: #FFF;*/
	/*background: #428bca;*/
	/*padding: 0 6px;*/
	/*border-radius: 4px;*/
}
div.simlytiks .sl-side-bar .pages-panel .page-tree .tree-view li.tree-list-item.active > div.vertical-center .tv-content > .fa {
	color: #FFF!important;
}
div.simlytiks .sl-side-bar .pages-panel .page-tree .tree-view li.tree-list-item.active > div.vertical-center .tv-content .text-primary {
	color: #FFF;
}




div.simlytiks .data-ops-wf .dropdown-menu {
	width: 350px!important;
	height: auto!important;
	transition: none!important;
	position: absolute!important;
	top: auto!important;
	left: auto!important;
}





div.simlytiks .mainPanel.mini .toggle_sidebar {
	opacity: 1!important;
}


div.simlytiks .mainPanel .toggle_sidebar {
	position: absolute;
	right: -17px;
	top: 33px;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	z-index: 100;
	background-color: #FFF;
	color: #444;
	border: 1px solid #DDD;
	opacity: 1;
	transition: opacity 0.3s ease-in, background-color 0.3s ease-in;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	display: none!important;
}

div.simlytiks .mainPanel .toggle_sidebar:hover {
	border-color: #66a1e5;
	background-color: #66a1e5;
	color: #FFF!important;
	box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}
div.simlytiks .sl-side-bar:hover .toggle_sidebar {
	opacity: 1!important;
}
div.simlytiks .sl-side-bar:hover .toggle_sidebar.forceHide {
	opacity: 0!important;
}

div.simlytiks .sl-side-bar .charts-panel {

}
div.simlytiks .sl-side-bar .charts-panel > .list-group-header {
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div.simlytiks .sl-side-bar .charts-panel > .list-group-header:hover {
	/*background-color: #EEE;*/
}
div.simlytiks .sl-side-bar .charts-panel > .list-group-header.shown {
	background-color: #265a88;
}
div.simlytiks .sl-side-bar .charts-panel .charts-list-toggle {
	cursor: pointer;
	position: relative;
	z-index: 2;
}
div.simlytiks .sl-side-bar .charts-panel .charts-list-toggle.toggled {
	/*right: -170px;*/
}
/*div.simlytiks .sl-side-bar .pages-panel {*/
	/*margin-bottom: 15px;*/
/*}*/
div.simlytiks .sl-side-bar .pages-panel .page-menu {
	overflow: auto;
	overflow-x: hidden!important;
	margin: 6px;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle > a {
	padding: 6px 2px 6px 8px;
	text-decoration: none;
	word-break: break-word;
	flex: 1 1 auto;
	display: inline-block!important;
	width: 100%;
	color: unset;
	border-radius: 0;
	/*display: flex;*/
	align-items: center;
	border-left: 2px solid transparent;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.sl-section li.page-toggle > a {
	padding: 6px 2px 6px 25px;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.sl-section li.page-toggle > a .page-title {
	/*max-width: 150px;*/
}
div.simlytiks .pages-panel li.sortable-ghost > a.pagebtn {
	background: #e8f0fe!important;
}







/* sections */
div.simlytiks ul.page-menu h3.sl-section-name {
	padding: 6px;
	padding-left: 10px;
	margin-bottom: 0;
	font-size: 1.4em;;
	color: darkslategray;
	cursor: pointer;
	position: relative;
}
div.simlytiks ul.page-menu h3.sl-section-name .drag-handle {
	opacity: 0;
	cursor: move;
	position: relative;
	top: 5px;
}
div.simlytiks ul.page-menu h3.sl-section-name:hover .drag-handle {
	opacity: 1!important;
}
div.simlytiks ul.page-menu h3.sl-section-name:hover {
	background: #eee;
}
div.simlytiks h3.sl-section-name span.section-page-count {
	position: absolute;
	right: 25px;
	margin-left: 4px;
	color: #5f6368;
	letter-spacing: 0.3px;
	background-color: #FFF;
	top: 5px;
}
div.simlytiks .sl-section-name .section-label {
	display: inline-block;
	overflow: hidden;
	max-width: 150px;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: relative;
	top: 2px;
}
div.simlytiks ul.page-menu h3.sl-section-name .section-toggle {
	cursor: pointer;
	padding: 3px;
	width: 17px;
	text-align: center;
}
div.simlytiks ul.page-menu h3.sl-section-name .section-toggle:hover {
	color: red!important;
}
div.simlytiks ul.page-menu ul.section-items {
	/*margin-bottom: 5px;*/
}
div.simlytiks ul.page-menu .empty-section-item {
	padding: 3px;
}












div.simlytiks li.page-toggle .toggle_subpages {
	font-size: 12px;
	color: #4f5359;
	position: absolute;
	left: 6px;
	z-index: 2;
	top: 6px;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle[data-parent]:not([data-parent='']) .page-title {
	margin-left: 12px;
}

div.simlytiks .sl-side-bar .page-menu .edit-icons-container {
	position: absolute;
	padding: 6px 8px;
	right: 2px;
	z-index: 2;
	opacity: 1;
}
/*div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle:hover > .edit-icons-container,*/
/*div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle > .edit-icons-container.clicked {*/
	/*opacity: 1!important;*/
/*}*/
div.simlytiks .sl-side-bar .page-menu .edit-icons-container:hover, div.simlytiks .sl-side-bar .page-menu .edit-icons-container.clicked {
	background: #e8f0fe;
	color: #4f5359!important;
	border-radius: 50%;
}

div.simlytiks .sl-side-bar .edit-icons-dropdown {
	position: absolute;
	display: none;
	transition: top 0.2s linear, left 0.2s linear;
}

div.simlytiks .sl-side-bar li.page-toggle .drag_handle {
	opacity: 0;
	position: absolute;
	left: 4px;
}
div.simlytiks .sl-side-bar li.page-toggle:hover .drag_handle {
	opacity: 1;
}
div.simlytiks .sl-side-bar li.page-toggle .remove_page  {
	opacity: 0;
	position: absolute;
	right: 3px;
}
div.simlytiks .sl-side-bar li.page-toggle:hover .remove_page {
	opacity: 1;
}
div.simlytiks .sl-side-bar li.page-toggle .remove_page:hover {
	color: red!important;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle.active > a {
	background-color: #337ab7;
	text-decoration: none;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle.active > a {
	color: #FFF;
	font-weight: 500;
}
div.simlytiks .sl-side-bar .pages-panel .page-menu li.page-toggle.ui-sortable-placeholder {
	display: inline-block!important;
	background-color: #DDD;
	height: 27px;
	visibility: visible!important;
	width: 100%!important;
}
div.simlytiks .sl-side-bar .pages-panel .toggle-vizModels {
	position: absolute;
}
div.simlytiks .sl-side-bar .pages-panel span.page-title {
	/*margin-left: 18px;*/
	display: flex;
	align-items: center;
}
div.simlytiks .pages-panel .page-title-text {
	max-width: 150px;
	white-space: nowrap;
	margin-left: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
}
div.simlytiks .pages-panel span.page-vis-badge {
	position: absolute;
	right: 25px;
	margin-left: 4px;
	color: #5f6368;
	letter-spacing: 0.3px;
	background-color: #FFF;
}
div.simlytiks .pages-panel li.active span.page-vis-badge {
	background-color: #FFF!important;
	color: #428BCA!important;
}
div.simlytiks .pages-panel .list-group-submenu {
	margin-left: 15px;
}
div.simlytiks .pages-panel .list-group-submenu li.list-group-submenu-item a {
	text-decoration: none;
}
div.simlytiks .sl-side-bar .charts-panel .list-group-header.active {
	background-color: rgba(0, 0, 0, 0.4);
	color: #FFF;
}
div.simlytiks .sl-side-bar .list-group-header {
	border-bottom: 1px solid #DDD;
	padding: 5px 15px;
	height: 45px;
	margin-bottom: 0;
	/*height: 40px;*/
	display: flex;
	align-items: center;
	justify-content: space-between;
}
div.simlytiks .sl-side-bar .clickable {
	cursor: pointer;
}
div.simlytiks .sl-side-bar .clickable:hover {
	background-color: #eee;
	color: steelblue;
}
div.simlytiks .sl-side-bar .clickable.active {
	color: steelblue;
}

/*div.simlytiks .sl-side-bar .summary-panel:hover > .list-group-header,*/
/*div.simlytiks .sl-side-bar .summary-panel .records_count,*/
/*div.simlytiks .sl-side-bar .pages_count {*/
/*	cursor: pointer;*/
/*	background: #428bca;*/
/*}*/
div.simlytiks .sl-side-bar .pages_count {
	cursor: default;
}
div.simlytiks .sl-side-bar .summary-panel.opened .list-group-header {
	background-color: #EEE;
}
div.simlytiks .sl-side-bar .summary-panel .dropdown-menu {
	position: absolute;
	left: 100%;
	top: -6px;
	border: 1px solid #DDD;
	border-radius: 1px;
	margin-left: 10px;
}
div.simlytiks .sl-side-bar .summary-panel .dropdown-menu:before, div.simlytiks .sl-side-bar .summary-panel .dropdown-menu:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	top: 5px;
	left: -10px;
}
div.simlytiks .sl-side-bar .summary-panel .dropdown-menu:before {
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #DDD transparent transparent;
	z-index: 2;
}
div.simlytiks .sl-side-bar .summary-panel .dropdown-menu:after {
	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent #FFF transparent transparent;
	top: 7px;
	z-index: 3;
	left: -8px;
}

div.simlytiks .sl-side-bar .summary-panel .dropdown-menu .list-group-item {
	border: none;
}


div.sl-data-summary .schema-summary {
	display: flex;
}
div.sl-data-summary .schema-summary .lead {
	font-size: 15px;
	margin: 10px;
	font-weight: bold;
}
div.sl-data-summary .schema-summary .lead span.summary-value {
	display: block;
	font-size: 12px;
}
div.sl-data-summary .freq_used_label {
	margin: 4px;
	font-size: 0.8em!important;
}


/*div.simlytiks .sl-side-bar .summary-panel:hover .dropdown-menu {*/
	/*display: block;*/
/*}*/

div.simlytiks .workflow-panel:hover > .list-group-header {
	background: #EEE!important;
}
div.simlytiks .workflow-panel.active {
	background-color: #4f5359;
	color: #FFF;
}
div.simlytiks .workflow-panel .workflow-options li.list-group-item {
	border: none;
	padding: 4px 12px;
	background: none;
}
div.simlytiks .workflow-panel .workflow-options li.list-group-item.disabled {
	opacity: 0.3;
	pointer-events: none;
}

div.simlytiks .sl-side-bar .list-group-item .list-group-item-text {
	text-decoration: none;
	cursor: default;
}

div.simlytiks .sl-side-bar .page-toggle {
	cursor: pointer;
	border-radius: 0;
	/*display: flex;*/
	position: relative;
	align-items: center;
}



/** slides view **/
div.simlytiks .sl-side-bar .page-slides .page-toggle {
	margin: 10px 20px;
	border: 1px solid #DDD;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}
div.simlytiks .sl-side-bar .page-slides .page-toggle.active {
	border-width: 2px;
	border-color: #428bca;
}
div.simlytiks .sl-side-bar .pages-panel span.page-title {
	justify-content: center;
}
div.simlytiks .sl-side-bar .page-slides {
	height: calc(100% - 100px);
	overflow: auto;
	padding: 10px;
}
div.simlytiks .sl-side-bar .page-slides .section-toggle .drag-handle {
	display: none;
}
div.simlytiks .sl-side-bar .section-toggle .sl-section-name {
	cursor: pointer;
}
div.simlytiks .sl-side-bar .section-toggle .sl-section-name:hover {
	color: #428bca;
}
div.simlytiks .sl-side-bar .page-slides .page-toggle.ui-selected {
	border-color: #428bca!important;
}
div.simlytiks .sl-side-bar .page-slides .page-toggle[data-hidden="true"] {
	cursor: not-allowed;
}
div.simlytiks .sl-side-bar .page-slides .page-toggle[data-hidden="true"]:before {
	content: "\f05e";
	font-family: FontAwesome;
	font-size: 1.4em;
	left: 2px;
	top: 3px;
	color: lightgray;
	position: absolute;
}
div.simlytiks .sl-side-bar .page-slides .page-toggle[data-hidden="true"] > a {
	opacity: 0.3;
}
div.simlytiks .sl-side-bar .page-slides .page-img {
	margin: 0 auto;
	padding: 0 5px;
}
div.simlytiks[data-view="slides"] .page-navigation {
	justify-content: flex-end;
	margin-top: 8px;
	position: absolute;
	bottom: 15px;
	right: 50px;
	z-index: 3;
	background: #FFF;
}
div.simlytiks[data-view="slides"] .page-navigation ul.sl-pagination {
	border: 1px solid #DDD;
}
div.simlytiks .page-navigation .sl-pagination > li > a {
	/*font-size: 1.3em;*/
}
div.simlytiks .page-navigation .sl-pagination > li {
	display: inline-block;
	padding: 4px;
}
div.simlytiks[data-view="slides"] .sl-main-window {
	background: #f8f9fa;
}
div.simlytiks[data-view="slides"] .sl-main-window .pages-container {
	overflow: auto;
	overflow-x: hidden;

	height: calc(100% - 40px)!important;
}
div.simlytiks[data-view="slides"] .sl-main-window .pages-container .page-container {
	display: block!important;
	/*height: calc(100% - 120px);*/
	/*margin-bottom: 100px;*/
	position: absolute;
	width: 100%;
	left: 0;
	height: 100%;
}

div.simlytiks[data-view="slides"] .slides-view-options {
	/*margin-top: 8px;*/
	/*position: absolute;*/
	/*bottom: 15px;*/
	/*right: 50px;*/
	/*z-index: 3;*/
	/*background: #FFF;*/
	width: 100%;
	height: 40px;
	background: #eee;
	justify-content: flex-end;
}
div.simlytiks[data-view="slides"] .page-container .page-notes {
	height: min(150px,15vh);
	border: 1px solid #DDD;
	padding: 10px;
}
div.simlytiks[data-view="slides"] .page-container .page-notes:empty:not(:focus):before {
	content: attr(data-ph);
	color: grey;
}
div.simlytiks[data-view="slides"] div.viewContent.active {
	border-color: #DDD!important;
}





div.simlytiks .sl-side-bar li.page-toggle:not(.active):hover > a.pagebtn {
	background-color: #efefef;
}
div.simlytiks .sl-side-bar li.page-toggle:not(.active) > a.pagebtn:hover {
	/*background-color: transparent!important;*/
}
div.simlytiks .sl-side-bar li.page-toggle .edit-options {
	opacity: 0;
	position: absolute;
	top: 1px;
	right: 0;
	padding: 6px 10px;
}
div.simlytiks li.page-toggle:not(.active) .edit-options:hover {
	background-color: #ddd;
	border-radius: 50%;
}
div.simlytiks li.page-toggle.active:hover .edit-options:hover {
	background: #FFF;
	border-radius: 50%;
	color: #4f5359;
}
div.simlytiks .sl-side-bar li.page-toggle:hover .edit-options {
	opacity: 1;
}
/*div.simlytiks .btn-success, div.simlytiks .btn-info, div.simlytiks .btn-primary, div.simlytiks .btn-warning, div.simlytiks .btn-danger {*/
/*	margin-right: 4px;*/
/*	box-shadow: none;*/
/*	text-shadow: none;*/
/*	background-image: none;*/
/*	font-weight: 500;*/
/*	border-color: transparent;*/
/*}*/
/*div.simlytiks input {*/
	/*height: auto!important;*/
/*}*/
div.simlytiks .sl-side-bar .add-new-page:focus,div.simlytiks .sl-side-bar .add-new-page:active {
	outline: none;
}
/* charts list */
div.simlytiks .sl-side-bar .list-group-header.active {
	/*background-color: #000;*/
}

/*div.simlytiks .sl-charts-container:not(.shown) {*/
/*	width: 0!important;*/
/*	height: 0;*/
/*	visibility: hidden;*/
/*}*/
/*div.simlytiks .sl-charts-container:not(.resizing) {*/
/*	-webkit-transition: width 0.4s, visibility 0.5s, margin 0.4s;*/
/*	-moz-transition: width 0.4s, visibility 0.5s, margin 0.4s;*/
/*	-ms-transition: width 0.4s, visibility 0.5s, margin 0.4s;*/
/*	-o-transition: width 0.4s, visibility 0.5s, margin 0.4s;*/
/*	transition: width 0.4s, visibility 0.5s, margin 0.4s;*/
/*}*/
div.simlytiks .responses {
	margin-bottom: 25px;
}
div.simlytiks div.responses .list-group-header {
}
div.simlytiks div.responses .list-group-header:hover {
}


/* quick add list */
div.simlytiks div.sl-charts-container .charts > div {
	/*background: #efefef;*/
	/*padding: 0 15px;*/
}
div.simlytiks div.sl-charts-container .charts .charts-footer {
	padding: 24px;
	border-top: 1px solid #DDD;
}
div.simlytiks div.sl-charts-container .vis-search-container {
	position: relative;
}
div.simlytiks div.sl-charts-container #vis-search {
	/*border-left: none;*/
	/*border-right: none;*/
}
div.simlytiks div.sl-charts-container #clear-vis-search,
div.simlytiks .ml-vis-search-container .clear-vis-search {
	position: absolute;
	top: 8px;
	right: 5px;
	z-index: 3;
	color: #CCC;
	cursor: pointer;
}
div.simlytiks div.sl-charts-container #clear-vis-search:hover,
div.simlytiks .ml-vis-search-container .clear-vis-search:hover {
	color: red!important;
}
div.simlytiks div.sl-charts-container .charts-body {
	overflow: auto;
	/*max-height: 50vh;*/
}
div.simlytiks div.sl-charts-container .vis-filter {
	font-size: 12px;
}



div.simlytiks .sl-charts-container .list-group-header {
	/*background: #4f5359;*/
	/*background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));*/
	/*color: #FFF;*/
	font-weight: 600;
	padding: 6px 10px;
	/*border-bottom: 1px solid #FFF;*/
	border-left: none;
	border-right: none;
}
div.simlytiks .sl-charts-container .list-group-header:first-child {
	border-top: none;
}
div.simlytiks .sl-charts-container .charts-list ul.list-group {
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	box-shadow: none;
	text-align: center;
}
div.simlytiks .sl-charts-container:not([data-view="list"]) .charts-list ul.list-group li.list-group-item {
	font-weight: 400;
	border: none;
	cursor: pointer;
	width: 25%;
	height: auto;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*flex-direction: column;*/
	/*!* background: #fafafa; *!*/
	/*padding: 0!important;*/
	/*margin: 5px 0;*/
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item .viz-name {
	display: block;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item:hover {
	background: #eee;
}
div.simlytiks .sl-charts-container:not([data-view="list"]) ul.list-group li.list-group-item img {
	height: 50px;
	width: 50px;
	margin: 0 auto;
	cursor: pointer;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item.disabled {
	background-color: transparent;
	opacity: 0.4;
	cursor: not-allowed;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item.disabled > a {
	cursor: not-allowed;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item .viz-description {
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	position: relative;
	/*font-size: 75%;*/
	display: none;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item .drag_handle {
	opacity: 0;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: move;
	padding: 2px;
	transition: opacity 0.15s ease-in;
}
div.simlytiks .sl-charts-container ul.list-group li.list-group-item:hover .drag_handle {
	opacity: 1!important;
}
div.simlytiks .charts-list .charts-list-item {
	font-weight: 400;
}


/* list view for charts list */
div.simlytiks .sl-charts-container[data-view="list"] .charts-list {
	padding: 0!important;
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item {
	text-align: left;
	flex: 1 1 100%;
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item a {
	display: flex;
	align-items: center;
	text-decoration: none;
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item img {
	margin-right: 10px;
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item .viz-info {
	display: block!important;
	font-size: 90%!important;
	line-height: 2em;
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item .viz-name {
	/*font-size: 16px;*/
	font-weight: bold;
	margin-left: 0 !important;
	margin-bottom: 5px;

	font-size: 1.3em;
	/*font-variant: small-caps;*/
	line-height: initial;
	/*color: #000;*/
	/*font-weight: bold;*/
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item img {
	/*height: 40px;*/
	/*width: 40px;*/
}


/* quick add list side bar */
div.simlytiks .mainPanel .sl-charts-container .charts-heading {
	display: none;
}
div.simlytiks .mainPanel .sl-charts-container .vis-search-container.opaque {
	opacity: 0.6;
}
div.simlytiks .mainPanel .sl-charts-container .charts-body {
	/*max-height: initial!important;*/
}
div.simlytiks .mainPanel .sl-charts-container li.charts-list-item .viz-description {
	display: none!important;
}
div.simlytiks .mainPanel .sl-charts-container:not([data-view="list"]) .viz-name {
	font-size: 14px!important;
	font-weight: 500!important;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] li.charts-list-item .viz-description {
	display: block!important;
	color: dimgrey;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item img {
	/*width: 35px!important;*/
	/*height: 35px!important;*/
	cursor: pointer;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item {
	/*display: flex;*/
	align-items: center;
	justify-content: space-between;
	/*padding: 6px 20px!important;*/
	/*padding-right: 10px!important;*/
	border-bottom: 1px solid #DDD!important;
	cursor: pointer;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item:last-child {
	border-bottom: none!important;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item [data-inline-doc] {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item:hover [data-inline-doc] {
	display: block;
}

div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item .drag_handle {
	position: relative!important;
	left: 0!important;
	top: 0!important;
	color: #CCC!important;
	opacity: 1!important;
}
div.simlytiks .mainPanel .sl-charts-container[data-view="list"] .charts-list li.charts-list-item:hover .drag_handle {
	color: #333!important;
}
div.simlytiks .mainPanel div.sl-charts-container .vis-filter[data-id="all"] {
	display: none;
}
div.simlytiks .mainPanel .sl-charts-container .charts-footer {
	padding: 10px 15px!important;
}
div.simlytiks .mainPanel .sl-charts-container .charts-filters {
	margin-top: 10px;
	margin-bottom: 10px;
}
div.simlytiks .mainPanel .sl-charts-container .back_to_results {
	display: none;
}
div.simlytiks .mainPanel .sl-charts-container .charts-list-item .chart-options {
	display: flex;
	align-items: center;
}
div.simlytiks .mainPanel .sl-charts-container .charts-list-item .chart-options .toggle-viz-info {
	opacity: 0;
	cursor: pointer;
}
div.simlytiks .mainPanel .sl-charts-container .charts-list-item:hover .chart-options .toggle-viz-info {
	opacity: 1!important;
}
div.simlytiks .mainPanel .sl-charts-container .charts-list-item .chart-options .toggle-viz-info:hover {
	color: steelblue;
}
div.simlytiks .mainPanel .sl-charts-container .detailed img {
	width: 100%!important;
	/*height: auto!important;*/
}
div.simlytiks .mainPanel .sl-charts-container .detailed .viz-name {
	font-size: 1.3em!important;
}
div.simlytiks .mainPanel .sl-charts-container .viz-params-container .viz-name {
	/*padding: 0 15px!important;*/
}
/*div.simlytiks .mainPanel .sl-charts-container .viz-params-container .viz-options {*/
/*	overflow: auto;*/
/*}*/
/*div.simlytiks .mainPanel .sl-charts-container .viz-params-container .viz-params {*/
/*	padding: 0!important;*/
/*	min-height: 100px;*/
/*	position: relative;*/
/*	overflow: auto;*/
/*	margin-bottom: 10px;*/
/*}*/
/*div.simlytiks .mainPanel .sl-charts-container .viz-params-container .option-groups {*/
/*	width: 100%!important;*/
/*	padding: 5px 15px 0 15px;*/
/*}*/
/*div.simlytiks .mainPanel .sl-charts-container .viz-params-container .viz-params .form-group {*/
/*}*/
div.simlytiks .viz-params-container {
	position: relative;
}
div.simlytiks .viz-params-container .viz-description, div.simlytiks #viz_preview_options .viz-description {
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100px;
}
div.simlytiks .viz-params-container .viz-info .viz-title,
div.simlytiks #viz_preview_options .viz-info .viz-title {
	font-size: 2em;
	margin-left: 10px;
	word-break: break-word;
}
div.simlytiks div.form-group .param-datatypes,
div.simlytiks .viewContent.enabled div.form-group .param-datatypes {
	display: none!important;
}

/* grid view for charts items */
div.simlytiks .sl-charts-container[data-view="grid"] {
	animation-duration: 0.15s;
	padding: 0 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

div.simlytiks .sl-charts-container[data-view="grid"] > .charts {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
}
div.simlytiks .sl-charts-container[data-view="grid"] .charts-list {
	border: none;
	height: calc(100% - 30px);
}
div.simlytiks .sl-charts-container[data-view="list"].isEditing > .charts {
	height: calc(100% - 35px);
}
div.simlytiks .sl-charts-container[data-view="list"] .charts-list {
	height: calc(100% - 110px);
}
div.simlytiks .sl-charts-container[data-view="grid"] .charts > div {
	/*background: #efefef;*/
	padding: 0!important;
}
div.simlytiks .sl-charts-container[data-view="grid"] .charts > div.vis-search-container {
	margin-bottom: 10px;
}

div.simlytiks .sl-charts-container[data-view="grid"] .charts-footer,
div.simlytiks .sl-charts-container[data-view="grid"] .drag_handle {
	display: none;
}
div.simlytiks .sl-charts-container[data-view="grid"] .charts-list-item {
	width: 200px!important;
}
div.simlytiks .sl-charts-container[data-view="grid"] .chart-options {
	justify-content: flex-end;
}

div.simlytiks div.param-customization {
	position: relative;
	overflow: auto;
	max-height: 250px;
}
div.simlytiks .viz-params .param-customizations table {
	table-layout: fixed;
}
div.simlytiks .viz-params .param-customizations table thead th {
	width: 150px;
}
div.simlytiks div.param-customization table tbody td, div.simlytiks div.param-customization table tbody th {
	vertical-align: middle;
}
div.simlytiks div.param-customization:before,
div.simlytiks div.param-customization:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
}
/*div.simlytiks div.viz-params .form-group[data-id] .hasCustom .customization {*/
/*	border-top-left-radius: 0;*/
/*	border-bottom-left-radius: 0;*/
/*}*/
/*div.simlytiks div.viz-params .form-group[data-id] .hasCustom .select2-choice {*/
/*	border-top-right-radius: 0;*/
/*	border-bottom-right-radius: 0;*/
/*}*/
div.simlytiks div.param-customization:before {
	position: absolute;
	right: 2px;
	top: -14px;
	border-width: 0 13px 13px 13px;
	border-color: transparent transparent #DDD transparent;
}
div.simlytiks div.param-customization:after {
	position: absolute;
	right: 3px;
	top: -12px;
	border-width: 0 12px 12px 12px;
	border-color: transparent transparent #FFF transparent
}


div.simlytiks .sl-charts-container.shown {
	/*margin-left: 10px;*/
	/*border-right: 1px solid #DDD;*/
}
div.simlytiks .sl-charts-container.shown:before {
	/*content: '\f0DA';*/
	position: absolute;
	/* top: 5px; */
	color: #428BCA;
	/*color: rgba(0, 52, 113, 0.9);*/
	font-family: FontAwesome;
	left: -10px;
	font-size: 25px;
}
div.simlytiks .sl-charts-container.shown{
	flex: 0 0 450px;
	min-width: 60px;
	visibility: inherit;
	/*position: relative;*/
	/*width: 520px;*/
	display: none;
}

@media screen and (max-width: 1024px) {
	div.simlytiks .sl-charts-container.shown {
		width: 300px;
	}
	div.simlytiks .sl-charts-container ul.list-group li.list-group-item {
		width: 80px;
	}
}


div.simlytiks .sl-charts-container .charts .charts-list-header {
	/*padding: 6px 10px;*/
	/*background: #a7a6a6;*/
	/*color: #FFF;*/
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li:first-child {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li:last-child {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs {
	border-bottom: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li {
	border: 1px solid #DDD;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li.active {
	border-color: transparent;
	background-color: steelblue;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li a {
	padding: 3px;
	border-radius: 0px;
	margin-right: 0;
	border: none;
}
div.simlytiks .sl-charts-container .charts .charts-list-header ul.nav-tabs li.active a {
	background-color: steelblue;
	color: #FFF;
}
div.simlytiks .responses-list,div.sl-charts-container .charts-list {
	position: relative;
	border: 1px solid #CCC;
	/*border-right: none;*/
	border-radius: 3px;
}
div.sl-charts-container .charts-list .tab-pane {
	overflow: auto;
}
div.simlytiks .responses-list,div.sl-charts-container .charts-list .accordion-body {
	overflow: auto;
}
div.simlytiks .responses-list li.list-group-item {
	cursor: move;
}
div.simlytiks .charts-list.shown .charts-list-container .list-group {
	overflow: auto;
}
div.simlytiks .charts-list .search-box {
	position: relative;
	margin-bottom: 1px;
}
div.simlytiks .charts-list .chart-search-icon {
	position: absolute;
	left: 3px;
}
div.simlytiks .charts-list-item:hover,div.simlytiks .responses .category-item:hover {
	background-color: #f2f2f2;
}
div.simlytiks .responses .category-item .preview-viz {
	cursor: pointer;
	position: relative;
	top: 5px;
}
div.simlytiks .responses .category-item:hover .preview-viz {
	display: inline-block!important;
}
div.simlytiks .responses .category-item.toggled_for_preview {
	background-color: #f2f2f2;
}
div.simlytiks .responses .category-item.toggled_for_preview .preview-viz {
	display: inline-block!important;
}
div.simlytiks .charts-list .viz_info, div.simlytiks .charts-list .drag_viz {
	display: none;
}
div.simlytiks .charts-list-item:hover .viz_info, div.simlytiks .charts-list-item:hover  .drag_viz {
	display: inline-block;
}
.sl-drag-item.ui-draggable-dragging, .sl-drag-item.ui-draggable-dragging {
	width: 200px;
	padding: 6px 15px!important;
	font-weight: 400;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10510;
	cursor: grab!important;
}
.sl-drag-item.ui-draggable-dragging > a, .sl-drag-item.ui-draggable-dragging > a {
	cursor: grab!important;
}
.sl-drag-item.ui-draggable-dragging.category-item .rsp-options {
	display: none;
}
li.sl-drag-item.ui-draggable-dragging.charts-list-item > a {
	display: flex;
}
li.sl-drag-item.ui-draggable-dragging .chart-options, li.sl-drag-item.ui-draggable-dragging .viz-description,
li.sl-drag-item.ui-draggable-dragging .chart-options, li.sl-drag-item.ui-draggable-dragging > .fa,
li.sl-drag-item.ui-draggable-dragging .chart-options, li.sl-drag-item.ui-draggable-dragging .drag_handle {
	display: none!important;
}

div.simlytiks .viewContent .viewContent-carousel {
	width: 100%;
}


div.simlytiks .caret {
	display: inline-block!important;
}
/* pages container */
div.simlytiks .sl-main-window .pages-container {
	/*border: 1px solid #DDD;*/
	border-bottom: none;
	position: relative;
	/*margin-right: 5px;*/
	z-index: 2;
	height: 100%;
}

div.simlytiks[data-view="mini"] .sl-main-window {
	padding: 0 10px!important;
}
div.simlytiks[data-view="mini"] .sl-main-window .pages-container {
	margin-top: 7px;
}
div.simlytiks[data-view="mini"] .sl-side-bar-container {
	display: none;
}
div.simlytiks .sl-main-window .pages-container[data-view="modern"] {
	height: calc(100% - 45px);
}
div.simlytiks[data-management="standalone"] .sl-main-window .pages-container[data-view="modern"] {
	/*height: calc(100% - 45px);*/
}
div.simlytiks .sl-main-window .pages-container[data-view="modern"] > .page-container {
	height: 100%;
}
div.simlytiks[data-view="mini"] .page-container .sl-page .sl-page-tabs li[data-id="options"]{
	display: none;
}
div.simlytiks:not(.hasFixedContainer)[data-view="mini"] div.viewContent:not(.enabled):hover .floating-btn {
	display: none!important;
}
div.simlytiks[data-view="mini"] .vis_options {
	display: none;
}
div.simlytiks[data-view="mini"] .vizviewContainer > .vizviewPanel > .panel-heading .panel-options > .btn-group > button:not(.maximize-viz):not(.refresh-viz):not(.export-viz) {
	display: none;
}
div.simlytiks .vizviewContainer.transitioned .back-to-original {
	display: block!important;
}

div.simlytiks .sl-main-window .pages-container .page-container {
	display: none;
}
div.simlytiks .sl-main-window .pages-container .page-container.active {
	display: block;
	height: 100%;
}
div.simlytiks .sl-main-window .pages-container .page-container.isExporting {
	position: absolute!important;
	left: 0!important;
	top: 0!important;
	background: #FFF;
	display: block!important;
	transition: none!important;
	width: 100%!important;
}
div.simlytiks .sl-main-window .pages-container .page-container.isExporting.hasTableViz {
	position: absolute!important;
	left: 0!important;
	top: 0!important;
}

div.simlytiks[data-view="classic"] .sl-main-window > .page-navigation {
	position: absolute;
	right: 25px;
	top: 0;
	z-index: 10;
}
div.simlytiks[data-view="classic"]  .sl-main-window > .page-navigation li a:not(.disabled) {
	cursor: pointer;
}
div.simlytiks[data-view="classic"]  .sl-main-window > .page-navigation a.page-navigate {
	float: left;
	padding: 5px 8px;
	background-color: #FFF;
	border: 1px solid #CCC;
	margin-left: -1px;
	color: #428BCA;
	cursor: pointer;
	height: 25px;
}
div.simlytiks[data-view="classic"] .pages-container {
	height: 100%;
}

div.simlytiks[data-view="classic"] .page-container {
	height: 100%;
}
div.simlytiks .page-navigation a.page-navigate.disabled {
	opacity: 0.5;
	cursor: not-allowed!important;
}
div.simlytiks .sl-main-window .page-navigation a.page-navigate:not(.disabled):hover {
	background-color: #efefef;
}
div.simlytiks .page-navigation .page-details {
	/*padding: 0 10px;*/
	/*float: left;*/
	/*border: 1px solid #CCC;*/
	/*border-left: none;*/
	/*border-right: none;*/
}
div.simlytiks .page-navigation input.page_number {
	width: 25px;
	height: 24px;
	display: inline;
	border: none;
	padding: 0px;
	font-size: 10px;
	text-align: center;
}
div.simlytiks .page-navigation input.page_number:focus {
	border: 1px solid #428BCA;
}
div.simlytiks .sl-main-window .pages-container .page-container {
	border: none;
}
div.simlytiks .sl-main-window .pages-container .page-container[data-mode="preview"] .page-view {
	display: none;
}
div.simlytiks .sl-main-window .pages-container .page-container[data-mode="preview"][data-ml="true"] {
	display: flex;
}

div.simlytiks .sl-main-window .pages-container .page-container[data-mode="preview"][data-ml="true"] .page-view {
	display: block;
	flex: 1 1 auto;
	position: relative;
}
div.simlytiks .sl-main-window .pages-container .page-container[data-mode="preview"][data-ml="true"] .ml-edit {
	display: none!important;
}


div.simlytiks .sl-main-window .pages-container .page-container.temp_display  {
	/*position: absolute;*/
	/*top: 0;*/
	/*z-index: 8;*/
	display: block!important;
	opacity: 1!important;
	width: 100%;
}
div.simlytiks .sl-main-window .pages-container .page-container.temp_display .ml-charts-carousel .item,
div.simlytiks .sl-main-window .pages-container .page-container.temp_display .viewContent-carousel .item {
	display: block!important;
}
div.simlytiks .sl-main-window .pages-container .page-container.temp_display.tableView  {
	position: absolute;
	top: 0;
	/*z-index: 8;*/
}

/* dataset options */
div.simlytiks .simlytiks-wrapper .datamodel-options {
	/*padding: 8px;*/
	/*padding-right: 0!important;*/
	/*border-bottom: 1px solid #DDD;*/
	/*display: flex;*/
	/*align-items: center;*/
}
div.simlytiks .datamodel-options .tpl-name:after {
	content: '|';
	color: gray;
	margin-left: 7px;
}
div.simlytiks .dropdown-menu .divider {
	margin: 5px 0;
}
div.simlytiks .datamodel-options .import_dataset:hover {
	color: red;
}

div.simlytiks .datamodel-options .sm-status {
	opacity: 1;
	transition: opacity 0.3s ease-in;
}
div.simlytiks .datamodel-options .sm-status.isHidden {
	opacity: 0!important;
}
div.simlytiks .name-container .plugin-name {
	display: flex!important;
	align-items: center;
	max-width: initial;
}
div.simlytiks .plugin-name .name {
	/*display: inline-block;*/
	/*max-width: 200px;*/
	/*overflow: hidden;*/
	/*white-space: nowrap;*/
	/*text-overflow: ellipsis;*/
}
div.simlytiks .plugin-name .chunk-name {
	color: #666;
	font-style: italic;
	font-size: 0.9em;
	/*margin-left: 4px;*/
}
div.simlytiks .d3view-plugin-header {
	height: 70px;
	background-color: var(--d3neutralLighterAlt);
	border-bottom-color: var(--neutralLight)!important;
}
div.simlytiks .d3view-plugin-header .a-icon {
	display: none;
}
div.simlytiks .simlytiks-wrapper .datamodel-options .model-name {
	position: relative;
	margin-bottom: 2px;
	font-size: 1.2em;
	top: 1px!important;
	max-width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
	/*left: 46%;*/
	/*top: 2px;*/
}
div.simlytiks .datamodel-options .data-metadata {
	position: relative;
	/*top: 3px;*/
	/*margin-right: 20px;*/
	float: right;
	margin-left: auto;
}
div.simlytiks .data-metadata > * {
	margin-right: 12px;
}
div.simlytiks .datamodel-options .data-metadata ul {
	margin-bottom: 0;
}
div.simlytiks .datamodel-options .data-metadata ul > li{
	/*display: inline;*/
	/*padding: 3px 12px;*/
}
div.simlytiks .datamodel-options .data-metadata ul > li a {
	/*color: #337ab7;*/
	/*text-decoration: none;*/
	cursor: pointer;
}
div.simlytiks .datamodel-options .tl-name {
	display: inline-block;
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 3px;
}
div.simlytiks .datamodel-options .savedLayouts li[data-id] .remove_saved_layout,
div.simlytiks .datamodel-options .savedLayouts li[data-id] .export_saved_layout {
	position: relative;
	top: 4px;
	padding: 0 4px;
}
div.simlytiks .datamodel-options .savedLayouts li[data-id] .remove_saved_layout:hover,
div.simlytiks .datamodel-options .savedLayouts li[data-id] .export_saved_layout:hover {
	color: red;
}

div.simlytiks .datamodel-options .open > a {
	/*background: #eee;*/
	/*color: #333;*/
}
.nested-dropdown-menu {
	margin-left: 20px;
}
.nested-dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
}
/*.nested-dropdown-menu > li>a:focus,*/
/*.nested-dropdown-menu >li >a:hover {*/
/*	background-color: #e8e8e8;*/
/*	background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);*/
/*	background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);*/
/*	background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));*/
/*	background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);*/
/*	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);*/
/*	background-repeat: repeat-x;*/
/*	color: #262626;*/
/*	text-decoration: none;*/
/*}*/


div.simlytiks .datamodel-options .btn-group > button.active {
	background: #eee;
	text-shadow: none;
	box-shadow: none;
}

/* preview viz */
div.simlytiks .viz-content-container {
	position: relative;
}

div.simlytiks div.animationPanel button:focus, div.simlytiks div.animationPanel button:active {
	outline: none;
}
div.simlytiks div.animationPanel ul.dropdown-menu li.ui-sortable-helper {
	display: block;
	background-color: #eee;
}
div.simlytiks div.animationPanel li.ui-sortable-placeholder {
	display: inline-block!important;
	visibility: visible;
	height: 35px;
	width: 100%;
}
div.simlytiks div.animationPanel button.active {
	background: #428bca;
	color: #FFF;
	text-shadow: none;
	box-shadow: none;
}
div.simlytiks div.animationPanel ul.dropdown-menu li {
	cursor: pointer;
}
div.simlytiks div.animationPanel ul.dropdown-menu li .drag_handle {
	opacity: 0;
}
div.simlytiks div.animationPanel ul.dropdown-menu li:hover .drag_handle {
	opacity: 1;
}
/* color palette */
div.simlytiks #colorScheme .color_scheme_colors {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 10px;
}
div.simlytiks #colorScheme .color_scheme_colors .color-item {
	margin: 1px;
	width: 20px;
	height: 20px;
}
div.simlytiks #colorScheme .color_scheme_colors .color-item .input-group-addon {
	width: 20px;
	height: 20px;
	cursor: pointer;
	border-radius: 0;
	border: none;
	padding: 0;
}
/* viz containers */
@media screen and (max-width: 1800px) {
	/*div.simlytiks .viz-content-container .vizviewPanel .panel-options .viz-records-count > span.text {*/
	/*	display: none;*/
	/*}*/
}
div.simlytiks .viz-content-container .vizviewPanel .viz-title {
	text-decoration: none;
	border: none!important;
	cursor: pointer;
	color: unset;
	max-width: 50%;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin: 0;
	font-size: 18px;
}
div.simlytiks .viz-content-container .vizviewPanel .viz-title:hover {
	color: #428bca;
}
div.simlytiks .viewContent.showingTable .vizviewPanel .vizContainer > *:not(.datatable-wrapper) {
	display: none;
}
div.simlytiks .viewContent.showingTempViz .vizviewPanel .vizContainer > .d3Panel {
	display: none;
}
div.simlytiks .viewContent.showingTempViz .vizviewPanel .vizContainer > .viz-wrapper {
	display: block;
}

div.simlytiks .viewContent[data-mode='3D'] .vizviewPanel .vizContainer > *:not(.three-d-wrapper) {
	display: none;
}
div.simlytiks .viewContent.hiddenLabel .viz-title {
	opacity: 0;
	pointer-events: none;
}
div.simlytiks .viz-content-container .vizviewPanel .viz-title .edit-page-name {
	display: none;
}
div.simlytiks .viz-content-container .vizviewPanel .viz-title:hover .edit-page-name {
	display: inline-block;
}
div.simlytiks .viz-content-container {
	/*display: flex;*/
	flex-wrap: wrap;
	height: 100%;
}
div.simlytiks .viz-content-container.has_merged {
	flex-direction: column;
}
div.simlytiks div.toggled_for_preview:not([data-ml="true"]) .viz-content-container {
	display: flex;
}
div.simlytiks div.toggled_for_preview[data-ml="true"] .ml-edit,
div.simlytiks div.toggled_for_preview[data-ml="true"] .carousel-indicators {
	display: none;
}
div.simlytiks:not(.hasFixedContainer) .page-container[data-ml="true"] div.viewContent:not(.enabled):not(.profile-viz):hover .floating-btn {
	/*display: none!important;*/
}
div.simlytiks div.toggled_for_preview .rb-rsp-panel:not(.toggled_for_preview) {
	display: none;
}
div.simlytiks div.toggled_for_preview .rb-rsp-panel.toggled_for_preview {
	width: 100%!important;
	height: 100%!important;
	position: unset;
}
div.simlytiks .page-container.toggled_for_preview .viewContent.enabled .panel-options {
	display: none!important;
}
div.simlytiks div.viewContent {
	border: 1px solid #DDD;
	/*border: 1px solid var(--d3neutralLighterAlt);*/
	background-color: #FFF;
	/*border-left-color: transparent!important;*/
	position: relative;
	padding: 0;
	padding-top: 0;
	float: left;
	overflow: hidden;
}
div.simlytiks div.viewContent[data-page-layout="1"] {
	/*padding: 24px;*/
}

/* title container for small layouts */
div.simlytiks div.viewContent[data-page-layout="3"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="33"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="43"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="4"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .panel-options .btn,
div.simlytiks div.viewContent[data-page-layout="23"]:not(.fixed)  .panel-options .btn {
	padding: 3px 7px;
	line-height: 1.2;
}

div.simlytiks div.viewContent[data-page-layout="3"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="33"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="43"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="4"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .viz-title-container,
div.simlytiks div.viewContent[data-page-layout="23"]:not(.fixed) .viz-title-container {
	/*text-align: left;*/
	padding-top: 4px !important;
	height: 22px;
}
div.simlytiks div.viewContent[data-page-layout="3"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="33"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="43"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="4"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .viz-title-container .viz-title,
div.simlytiks div.viewContent[data-page-layout="23"]:not(.fixed) .viz-title-container .viz-title {
	font-size: 100%!important;
}

div.simlytiks div.viewContent[data-page-layout="3"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="33"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="43"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="4"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .vis-sticky-btn-group,
div.simlytiks div.viewContent[data-page-layout="23"]:not(.fixed) .vis-sticky-btn-group {
	display: none!important;
}

div.simlytiks div.viewContent[data-page-layout="3"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="33"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="43"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="4"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="44"]:not(.fixed) .vizviewPanel,
div.simlytiks div.viewContent[data-page-layout="23"]:not(.fixed) .vizviewPanel {
	width: 100%!important;
}



div.simlytiks div.viewContent .viz-title-container {
	padding-top: 10px;
}
div.simlytiks div.viewContent .viz-title-container.text-center .viz-title {
	display: inline-block;
	max-width: 50%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

div.simlytiks.is_rendering {
	cursor: progress !important;
}
div.simlytiks.is_rendering > .tab-content {
	pointer-events: none!important;
}
div.simlytiks div.page-container.is_rendering {
	cursor: progress!important;
}
div.simlytiks div.page-container.is_rendering div {
	pointer-events: none
}
div.simlytiks div.page-container.is_rendering div.viewContent .d3view-no-data {
	display: block!important;
	color: dimgrey;
	z-index: 2;
	/** Added by shashank2104 on 2026-08-19 - R2026-189 - the transient "Rendering" text reuses the
	 *  viz's .d3view-no-data element, and the modern theme styles THAT as a filled card (tinted
	 *  background + radius + margin, blue icon). While a chart was drawing you therefore got a
	 *  coloured empty-state panel sitting on top of the chart's own loading indicator - it read as a
	 *  second, competing spinner. In the rendering state this is a status line, not an empty state:
	 *  strip the card chrome so only the text shows. **/
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
}
div.simlytiks div.page-container.is_rendering div.vizviewContainer > .d3view-no-data span:after {
	content: 'Rendering';
	margin-left: 10px;
}
div.simlytiks div.vizviewContainer.fetchingImages > .d3view-no-data {
	display: block!important;
	color: dimgrey;
	z-index: 2;
}
div.simlytiks div.vizviewContainer.fetchingImages > .d3view-no-data span:after {
	content: 'Fetching Media';
	margin-left: 10px;
}
div.simlytiks div.charts.enabled.fetchingImages:after {
	content: 'Fetching Media';
	margin-left: 10px;
}


/* for label text */
div.simlytiks div.textsInFront div.chart-labels,
div.simlytiks div.textsInFront div.chart-images {
	pointer-events: all;
	cursor: move;
}
div.simlytiks div.textsInFront .d3view-legends-container,
div.simlytiks div.textsInFront div.vizviewPanel > .panel-heading {
	pointer-events: none;
}
div.simlytiks div.textsInFront .panel-options,
div.simlytiks div.textsInFront .floating-ff {
	display: none!important;
}
div.simlytiks div.textsInFront .moving_options {
	z-index: 2000;
	position: absolute;
	right: 100px;
	top: 15px;
	display: inline-block;
}
div.simlytiks .moving_options {
	display: none;
}

/* circles in front */
div.simlytiks div.circlesInFront .panel-options,
div.simlytiks div.circlesInFront .floating-ff {
	display: none!important;
}
div.simlytiks div.circlesInFront .circles_moving_options {
	z-index: 2000;
	position: absolute;
	right: 100px;
	top: 15px;
	display: inline-block;
}
div.simlytiks .circles_moving_options {
	display: none;
}
/* chart formatting */
div.simlytiks .chartFormatting svg.chart-gridlines {
	pointer-events: unset;
}
div.simlytiks .chartFormatting svg.chart-gridlines line.resizer {
	stroke-width: 10;
	cursor: move;
	stroke: rgba(100,100,100,0.3);
}


div.simlytiks div.toggled_for_preview div.viewContent {
	float: none!important;
	/*padding-left: 0;*/
	padding: 0;
	/*transition: width 0.15s ease-in;*/
}
div.simlytiks .viewContent.selected {
	border: 1px solid #428bca!important;
}
div.simlytiks .viewContent.dz-drag-hover {
	background-color: #eee;
}
div.simlytiks .viewContent:not([data-vizmodel-id]) {
	display: flex;
	align-items: center;
	justify-content: center;
}
/*div.simlytiks[data-management="standalone"] .viewContent:not([data-vizmodel-id]) {*/
/*	cursor: n-resize;*/
/*}*/
div.simlytiks .viewContent.selected .select-viz > span {
	color: blue!important;
}
div.simlytiks div.viewContent.mini {
	padding: 0px!important;
}
div.simlytiks div.viewContent.freeform-vc {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
div.simlytiks div.viewContent.freeform-vc.active {
	border: none!important;
}



/* TESTING FOR ABSOLUTE POSITIONED VIEW CONTENT */
div.simlytiks div.viewContent, div.simlytiks div.viewContent-carousel {
	position: absolute!important;
	height: 100%;
	width: 100%;
}
div.simlytiks.sl-chart-fv #sl-chart-fv-carousel .viewContent {
	position: relative!important;
	top: unset!important;
	left: unset!important;
}
div.simlytiks.sl-chart-fv #sl-chart-fv-carousel .viewContent.active {
	border-color: steelblue;
}

div.simlytiks .toggled_for_preview:not([data-ml="true"]) div.viewContent:not(.enabled) {
	display: none;
}
div.simlytiks .toggled_for_preview[data-ml="true"] div.viewContent-carousel:not(.enabled) {
	display: none;
}
div.simlytiks .toggled_for_preview[data-ml="true"] .viz-content-container > div.viewContent:not(.enabled) {
	display: none;
}
div.simlytiks .toggled_for_preview:not([data-ml="true"]) div.d3view-data-profiler div.viewContent:not(.enabled) {
	display: block;
}
div.simlytiks .toggled_for_preview div.viewContent-carousel.enabled {
	width: 100%!important;
}
div.simlytiks .toggled_for_preview div.viewContent-carousel.enabled .viewContent {
	width: 100%!important;
}
div.simlytiks .toggled_for_preview div.viewContent.enabled:not(.fixed) {
	left: 0!important;
	top: 0!important;
	padding: 0;
}

div.simlytiks.sl-chart-fv div#sl-chart-fv-carousel #viz_preview_options {
	width: 300px;
}




/* response builder */
div.simlytiks div.d3view-responsebuilder {
	border: 1px solid #DDD;
}
div.simlytiks div.page-container[data-columns="freeform"] div.d3view-responsebuilder .rsp-panel-heading {
	display: none!important;
}
div.simlytiks div.page-container[data-columns="freeform"] div.d3view-responsebuilder .panel-body.response-content {
	height: 100%!important;
}
div.simlytiks div.page-container:not([data-columns="onepager"]) div.d3view-responsebuilder .rb-rsp-panel .grid-stack-item-content {
	inset: 0!important;
}
div.simlytiks div.d3view-responsebuilder .rb-container {
	height: 100%!important;
}



div.simlytiks div.viewContent:not(.overview).active,div.simlytiks div.viewContent:not(.overview).active:hover {
	/*border-color: #66afe9;*/
	/*outline: 0;*/
	/*-webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);*/
	/*box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);*/
}
div.simlytiks div.viewContent:not(.overview).toggled_for_preview {
	transition: width 0.5s, height 0.5s, order 0.5s;
	padding: 0!important;
}
/*div.simlytiks .toggled_for_preview div.viewContent:not(.enabled) {*/
/*	display: none;*/
/*}*/
div.simlytiks div.viewContent.enabled {
	width: 100%!important;
	order: -1;
	display: block!important;
	height: 100%!important;
	/*padding: 24px 0;*/
}
div.simlytiks .viewContent:not(.enabled):hover {
	border: 1px solid #CCC!important;
	/*box-shadow: var(--plugin-box-shadow-lighter)!important;*/
	transition: box-shadow 0.2s ease-in;
	transition: border-color 0.2s ease-in;
	z-index: 2;
}

div.simlytiks div.viewContent.active {
	/*box-shadow: none!important;*/
	/*border: 1px solid #66afe9!important;*/
	/*background: linear-gradient(to bottom,#fff,#ece9e6);*/
}


div.simlytiks .toggled_for_preview div.viewContent.enabled .vizviewContainer {
	display: flex;
	height: 100%;
}

div.simlytiks .toggled_for_preview div.viewContent.enabled .vizviewContainer #viz_preview_options {
	flex: 0 0 450px;
	position: relative;
	width: 450px;
}

div.simlytiks div.viz-content-container .sl-viz-placeholder {
	background-color: #EEE;
}

div.simlytiks div.viewContent .vc-blank-options {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list {
	margin-bottom: 4px;
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list .layout-icon {
	font-size: 2.5em;
	color: steelblue;
}
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list img,
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list .layout-icon {
	cursor: pointer;
	opacity: 0.66;
	border: 1px solid transparent;
}
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list img:hover,
div.simlytiks div.viewContent .vc-blank-options .quick-add-viz-list .layout-icon:hover {
	border-color: #DDD;
	opacity: 1!important;
}

div.simlytiks div.viewContent .vc-blank-options button.add_viz_to_blank_vc,
div.simlytiks div.viewContent .vc-blank-options button.import-viz,
div.simlytiks div.viewContent .vc-blank-options button.chat-api {
	font-size: 1.6em;
	color: lightgrey;
	cursor: pointer;
	display: inline-block!important;
	background-image: none;
	border: 1px solid lightgrey;
	border-radius: 5px;
	background: none;
}
div.simlytiks[data-management="self"] .vc-blank-options button {
	display: none!important;
	pointer-events: none!important;
}
div.simlytiks div.viewContent .vc-blank-options button.add_viz_to_blank_vc:hover,
div.simlytiks div.viewContent .vc-blank-options button.import-viz:hover,
div.simlytiks div.viewContent .vc-blank-options button.chat-api:hover {
	color: #fff!important;
	background: #428BCA!important;
}
div.simlytiks div.viewContent:hover .add_viz_to_blank_vc {

}


/* set widths based on page layout */
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="3"] {*/
	/*width: 33.2%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="1"] {*/
	/*width: 100%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="2"] {*/
	/*width: 50%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="4"] {*/
	/*width: 25%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="22"] {*/
	/*width: 50%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="33"] {*/
	/*width: 33.2%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="21"] {*/
	/*width: 100%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="32"] {*/
	/*width: 50%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="44"] {*/
	/*width: 25%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="43"] {*/
	/*width: 33.2%!important;*/
/*}*/
/*div.simlytiks .simlytiks-wrapper div.viewContent[data-page-layout="52"] {*/
	/*width: 50%!important;*/
/*}*/

div.simlytiks div.vizviewPanel .panel-options .btn-outline-on-hover .fa,
div.simlytiks div.vizviewPanel .panel-options .dropdown-menu .fa {
	color: dimgrey;
}
div.simlytiks div.vizviewPanel:hover .panel-options .btn-outline-on-hover .fa,
div.simlytiks div.vizviewPanel:hover .panel-options .dropdown-menu .fa {
	color: unset;
}
div.simlytiks div.vizviewPanel .panel-options .dropdown-menu .fa,
div.simlytiks div.vizviewPanel .panel-options .dropdown-menu .fa-regular,
div.simlytiks div.vizviewPanel .panel-options .dropdown-menu .fa-solid {
	width: 24px;
	text-align: center;
}
/*div.simlytiks div.vizviewPanel .panel-options .dropdown-menu li {*/
/*	padding: 1px 0;*/
/*}*/

div.simlytiks .vis-bottom-tags {
	position: absolute;
	bottom: 2px;
	display: flex;
	align-items: center;
	right: 0px;
	opacity: 0;
	z-index: 2;
}
div.simlytiks .vis-bottom-tags .fa {
	font-size: 1em;
	margin-left: 2px;
}
div.simlytiks .vis-ds-info.vis-bottom-tags {
	right: unset;
	left: 30px;
}
div.simlytiks .viz-records-count {
	/*position: absolute;*/
	/*bottom: 4px;*/
	/*right: 4px;*/
	/*font-size: 85%;*/
}
div.simlytiks .vis-tag {
	/*position: absolute;*/
	/*bottom: 4px;*/
	/*right: 50px;*/
	cursor: pointer;
}
div.simlytiks .vis-tag:hover {
	color: #DDD;
}
div.simlytiks .viewContent.hiddenCount .viz-records-count {
	display: none;
}

div.simlytiks .viewContent .vis-sticky-btn-group {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	opacity: 0;
	/* border: 1px solid #DDD; */
}
div.simlytiks .viewContent .vis-sticky-btn-group img {
	margin: 0;
	display: inline;
}
div.simlytiks .viewContent .vis-sticky-btn-group button {
	padding: 4px;
}

/*div.simlytiks .viewContent .viz-records-count {*/
/*	opacity: 0;*/
/*}*/
div.simlytiks .viewContent:hover .viz-records-count,
div.simlytiks .viewContent:hover .vis-bottom-tags,
div.simlytiks .viewContent:hover .vis-sticky-btn-group,
div.simlytiks .viewContent .viz-records-count.open {
	opacity: 1!important;
}
div.simlytiks .viewContent:hover .panel-options,
div.simlytiks .vizviewContainer.hasDDOpen .panel-options {
	visibility: visible;
}

/** SIM-698 **/
div.simlytiks .vizviewContainer > .vizviewPanel > .panel-heading .panel-options button:not(.btn-success):not(.btn-primary) {
	color: grey;
}
div.simlytiks .viewContent .panel-heading .panel-options button:not(.btn-success):not(.btn-primary):hover {
	color: unset;
}

div.simlytiks .vizviewContainer.hasDDOpen .vis-bottom-tags {
	opacity: 1;
}
div.simlytiks .viewContent.hasDDOpen {
	overflow: visible;
	z-index: 10;
}
div.sl-record-info-tooltip {
	pointer-events: none;
}
div.sl-record-info-tooltip .tooltip-title {
	display: none;
}

div.simlytiks .viewContent .d3Panel {
	z-index: 1;
	flex: 1 1 100%;
	overflow-y: auto;
	overflow-x: hidden;
}
div.simlytiks div.viewContent:not([data-ar="100%"]) .d3Panel {
	flex: 0 0 auto;
}
div.simlytiks div.viewContent.enabled .svg_container {
	/*height: 100%!important;*/
}
div.simlytiks .viewContent .footnotes {
	width: 100%;
	position: absolute;
	height: 60px;
	min-height: 60px;
	padding: 10px 40px;
	padding-bottom: 0;
	border-top: 1px solid #DDD;
	display: flex;
	align-items: center;
	margin-top: 5px;
}
div.simlytiks .viewContent .footnotes textarea {
	resize: none;
	height: 100%;
}
div.simlytiks .viewContent div.footnotes .edit-fn {
	opacity: 0;
	margin: 0 10px;
}
div.simlytiks .viewContent div.footnotes:hover .edit-fn {
	opacity: 1;
}
div.simlytiks .viewContent div.footnotes  div[contenteditable] {
	border-color: transparent;
	box-shadow: none;
	height: 100%;
	overflow: auto;
	flex: 1 1 auto;
}
div.simlytiks .viewContent .footnotes div[contenteditable]:empty:not(:focus):before {
	content: attr(data-ph);
	color: grey;
	pointer-events: none!important;
}

div.simlytiks div.viewContent:not([data-ar="100%"]):not(.enabled) .vizContainer {
	justify-content: center;
}

div.simlytiks .viewContent .animationPanel {
	position: absolute;
	bottom: 0;
	left: 100px;
	width: calc(100% - 150px);
}
div.simlytiks .viewContent .animationPanel .anim-label {
	position: absolute;
	top: -5px;
	left: 5px;
}
div.simlytiks .viewContent .animationPanel svg {
	overflow: visible;
}
div.simlytiks .viewContent .animationPanel.mini .controlBtnGroups {
	opacity: 0;
	pointer-events: none;
}
div.simlytiks .viewContent .animationPanel.mini:hover .controlBtnGroups {
	opacity: 1;
	pointer-events: all;
}
div.simlytiks .viewContent .vizContainer {
	position: relative;
	display: flex;
}
div.simlytiks .viewContent.enabled .vizContainer {
	justify-content: center;
	/*align-items: center;*/
}
div.simlytiks .viewContent.hasMiniGroupedView .vizContainer {
	display: block!important;
}
div.simlytiks .viewContent.hasMiniGroupedView .grouping-container {
	position: relative!important;
}
/* grouping container */
div.simlytiks .viewContent .grouping-container {
	flex: 1 1 auto;
}
div.simlytiks .viewContent .grouping-container {
	display: flex;
}
div.simlytiks .viewContent .grouping-container:not(.mini) > div {
	margin: 0;
	width: 130px;
}
div.simlytiks .grouping-container .pane-header {
	position: absolute;
}
div.simlytiks .viewContent .grouping-container:not(.mini) > div:first-child {
	margin-left: 0;
}
div.simlytiks .viewContent .grouping-container:not(.mini) > div:last-child {
	margin-right: 0;
}
div.simlytiks .viewContent .grouping-container .sc-uniq-values {
	display: flex;
	/*flex-wrap: wrap;*/
	flex-direction: column;
	/*font-size: 80%;*/
	border-bottom: 1px solid rgba(100,100,100,0.3);
	border-right: 1px solid rgba(100,100,100,0.3);
	overflow-x: hidden;
	position: absolute;
	width: 100%;
}
div.simlytiks .viewContent .grouping-container .pane-header {
	padding-left: 20px;
}
div.simlytiks .viewContent .grouping-container .sc-uniq-values [data-key] {
	flex-grow: 1;
	padding: 0 8px;
	cursor: pointer;
	padding-left: 20px;
}
div.simlytiks .grouping-container .sc-uniq-values .sl-item-selected span.sl-selected-arrow {
	opacity: 1!important;
}
div.simlytiks .grouping-container .sc-uniq-values span.sl-selected-arrow {
	position: absolute;
	font-size: 1em;
	left: -1px;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}

div.simlytiks .grouping-container .bootstrap-select button[data-toggle="dropdown"] .count {
	display: none;
}
div.simlytiks .grouping-container .bootstrap-select button[data-toggle="dropdown"] .filter-option {
	text-overflow: ellipsis;
}
div.simlytiks .grouping-container .bootstrap-select button[data-toggle="dropdown"] {
	color: steelblue;
}
div.simlytiks .grouping-container:not(.showCount) .bootstrap-select .count {
	display: none;
}


div.simlytiks .viewContent .grouping-container.showUnique .sc-uniq-values [data-key] {
	/*flex-grow: 0;*/
}
div.simlytiks .viewContent .grouping-container .group-pane:not(.showCount) .sc-uniq-values .count {
	display: none;
}
div.simlytiks .viewContent .grouping-container .sc-uniq-values [data-key]:not(.sl-item-selecting):not(.sl-item-selected):hover {
	background-color: #f5f5f5;
}
/* nested structure */
div.simlytiks .viewContent .grouping-container .nest-item > li {
	font-size: 80%;
	overflow-y: auto;
}
div.simlytiks .viewContent .grouping-container .nest-item [data-key] {
	padding: 0 8px;
	cursor: pointer;
}
div.simlytiks .viewContent .grouping-container .nest-item [data-key]:not(.sl-item-selecting):not(.sl-item-selected):hover {
	background-color: #f5f5f5;
}


/* Viz Timeline */
div.simlytiks .viewContent .viz-timeline {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFF;
	z-index: 2;
}
div.simlytiks .viewContent .viz-timeline .brush rect.background {
	fill: #f5f5f5!important;
	visibility: visible!important;
}
div.simlytiks .viewContent .viz-timeline .brush rect.extent {
	fill: steelblue!important;
	fill-opacity: 1;
}




div.simlytiks .simlytiks-wrapper div.viewContent[data-vizmodel-type="whiplash"] .d3Panel {
	/*width: 100%!important;*/
	overflow-y: auto;
	overflow-x: hidden;
}
div.simlytiks .simlytiks-wrapper div.viewContent .d3Panel .tabjs-sg-container {
	left: 0!important;
	padding: 0 5px;
}
div.simlytiks .d3Panel.hasFixedContainer {
	transform: unset!important;
	left: unset!important;
	top: unset!important;
}
div.simlytiks.hasFixedContainer .sl-side-bar,
div.simlytiks.hasFixedContainer .simlytiks-nav-tabs,
div.simlytiks.hasFixedContainer .sl-utils,
div.simlytiks.hasFixedContainer .page-navigation,
div.simlytiks.hasFixedContainer .floating-btn,
div.simlytiks.hasFixedContainer .page-navigation-container,
div.simlytiks.hasFixedContainer .sl-side-bar-container {
	display: none!important;
}

/** Has simlytiks fixed container **/
body.hasSimlytiksFixedVC .sl-side-bar,
body.hasSimlytiksFixedVC .simlytiks-nav-tabs,
body.hasSimlytiksFixedVC .sl-utils,
body.hasSimlytiksFixedVC .page-navigation,
body.hasSimlytiksFixedVC .page-options,
body.hasSimlytiksFixedVC .floating-btn,
body.hasSimlytiksFixedVC .sl-side-bar-container {
	display: none!important;
}
body:not(.hasSimlytiksFixedVC) div.simlytiks[data-view="dashboard"] div.viewContent:not(.enabled):hover .floating-btn {
	display: none!important;
}


div.simlytiks .vizBody .vizContainer .img-container {
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none!important;
}
div.simlytiks .vizBody .vizContainer .iihs-container .img-container {
	pointer-events: all!important;
}

div.simlytiks .select2-container {
	height: auto;
}
div.simlytiks .viz-options .select2-container {
	padding: 0;
}
div.simlytiks .animate-columns .select2-container {
	padding: 0;
}
div.simlytiks .preview-body .viz-options {
	/*border-bottom: 1px solid #DDD;*/
	overflow: auto;
}
div.simlytiks .preview-footer {
	border-top: 1px solid #DDD;
	flex: 0 0 50%;
}
div.simlytiks #viz_preview_options .formfilters div.d3view-filters-container {
	/*padding: 15px;*/
}
div.simlytiks #viz_preview_options div.d3view-filters-container ul.filter-items {
	margin-top: 0;
	margin-right: 0;
}
div.simlytiks #viz_preview_options div.d3view-filters-container li.filter-item:not(.filter-hz-item) > a {
	font-weight: bold;
}
div.simlytiks #viz_preview_options div.d3view-filters-container li.filter-item:not(.filter-hz-item) > div.filter-item-container {
	padding-right: 8px!important;
	margin-left: 5%!important;
	width: 95%!important;
}
div.simlytiks #viz_preview_options div.d3view-filters-container li.filter-item {
	display: block;
	width: 100%;
	margin: 5px 0 15px 0;
	padding-right: 5px;
}
div.simlytiks #viz_preview_options  div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-toggle {
	margin-right: 0;
}
div.simlytiks #viz_preview_options div.d3view-filters-container div.add-filters-dropdown {
	text-align: center;
	width: 100%!important;
	display: block!important;
}
div.simlytiks #viz_preview_options div.d3view-filters-container[data-view="horizontal"] div.filters-list {
	display: block;
}
div.simlytiks #viz_preview_options .filter-separator {
	text-align: center;
	display: none!important;
}
div.simlytiks #viz_preview_options div.d3view-filters-container li.filter-hz-item .filter-val-container {
	max-width: initial!important;
}
div.simlytiks #viz_preview_options div.d3view-filters-container .select2-container.add-filter {
	width: 100%!important;
	padding: 0;
}
div.simlytiks #viz_preview_options div.d3view-filters-container .select2-container.add-filter .select2-choice {
	height: auto;
}


div.simlytiks #viz_preview_container {
	position: relative;
	/*display: flex;*/
}
div.simlytiks .global_color_palette {
	position: absolute;
	right: 4px;
	top: 6px;
	cursor: pointer;
}
div.simlytiks .save-color-scheme {
	position: absolute;
	right: -6px;
	top: 6px;
	cursor: pointer;
	display: none;
}
div.simlytiks.sl-viz-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
div.sl-viz-popover.popover {
	max-height: initial!important;
}
div.simlytiks #viz_preview_options {
	border-right: 1px solid #DDD;
	height: 100%;
	overflow: visible!important;
	z-index: 2!important;
	padding: 0;
	margin-right: 30px;
	position: relative;
}
div.simlytiks-page div.viewContent.enabled .vizviewContainer #viz_preview_options {
	flex: 0 0 450px;
	position: relative;
	width: 450px;
}
div.simlytiks-page  div.viewContent.enabled .vizviewContainer {
	display: flex;
	height: 100%;
}
/* AI-58: ML sub-chart inline options editing — mirrors toggled_for_preview layout without hiding carousel */
div.simlytiks div.viewContent.ml-chart-editing .vizviewContainer {
	display: flex;
	height: 100%;
}
div.simlytiks div.viewContent.ml-chart-editing .vizviewContainer #viz_preview_options {
	flex: 0 0 450px;
	position: relative;
	width: 450px;
}
div.simlytiks-page.simlytiks:not(.hasFixedContainer)  div.viewContent:not(.enabled):not(.profile-viz):hover .edit-viz-filters {
	display: none!important;
}
div.simlytiks-page.simlytiks .paintboard {
	display: none!important;
}
div.simlytiks .quick-add-list #viz_preview_options,
div.simlytiks .ml-vis-list .ml-charts-preview #viz_preview_options {
	border-right: none;
	margin-right: 0;
}
div.simlytiks .ml-vis-list-container .pl-search-tags {
	max-height: 100px;
}
div.simlytiks .quick-edit.open #viz_preview_options {
	border-right: none;
	margin-right: 0;
	width: 100%!important;
}
div.simlytiks .quick-edit.open #viz_preview_options .viz-preview-tabs > .tab-pane {
	height: unset!important;
	max-height: calc(50vh);
	overflow: auto;
}
div.simlytiks .quick-edit.open #viz_preview_options .viz-params {
	max-height: unset!important;
}
div.simlytiks #viz_preview_options div.viz-preview-tabs {
	height: calc(100% - 100px);
}
div.simlytiks #viz_preview_options div.viz-preview-tabs > .tab-pane {
	height: 100%!important;
}
div.simlytiks .viz-options[data-options-group-placement="top"] {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}
div.simlytiks .viz-options[data-options-group-placement="top"] .option-groups {
	margin-top: 0;
	margin-bottom: 0;
	padding: 0 30px;
}
div.simlytiks #viz_preview_options div.viz-preview-tabs > .tab-pane:not(.viz-preview-home) {
	padding: 0 30px;
	overflow-y: auto;
}
div.simlytiks #viz_preview_options.rightAligned {
	border-right: none;
	border-left: 1px solid #DDD;
}

div.simlytiks #viz_preview_options .plugins-treeview label input {
	height: auto!important;
}


div#viz_preview_options.guiding .viz-options-btn-group {
	display: none;
}

div#viz_preview_options .guide-content div.form-group[data-id] {
	padding: 0;
}
div#viz_preview_options .guide-content .carousel-indicators li.disabled {
	/*pointer-events: none;*/
}

div#viz_preview_options div.form-group.hiddenLabels .control-label,
div#viz_preview_options div.form-group.hiddenLabels .viz-option-flag {
	display: none;
}

div.simlytiks .viz-params .preview_image {
	margin: 10px 0;
	text-align: center;
}
div.simlytiks .viz-params .preview_image .clear_image {
	display: none;
}
div.simlytiks .viz-params .preview_image.hasImage .clear_image {
	display: inline-block!important;
}
div.sl-image-annotator .images_container .image_container {
	border: 2px solid #DDD;
	cursor: pointer;
	width: 300px;
	padding: 5px;
}
div.sl-image-annotator .images_container .image_container img {
	max-width: 100%;
	max-height: 100%;
}
div.sl-image-annotator .images_container .image_container:hover {
	background: #f5f5f5;
}
div.sl-image-annotator .images_container .image_container.active {
	border: 5px solid #428bca;
}

div.simlytiks .viz-params .preview_image.hasImage:before {
	content: 'Image Preview';
	display: block;
	font-weight: 500;
	margin-bottom: 20px;
	border-top: 1px solid #DDD;
	margin-top: 20px;
}

div.simlytiks #viz_preview_options.rightAligned {
	/*width: 20.8333333375%!important;*/
	/*margin-left: 4.166666665%;*/
	margin-right: 0!important;
}
@media screen and (max-width: 900px ) {
	div.simlytiks #viz_preview_options.rightAligned {
		width: auto !important;
	}
}
div.simlytiks #viz_preview_options.rightAligned .viz-options {
	border-top: 1px solid #DDD;
}
div.simlytiks .viz-options-btn-group {
	z-index: 2;
}
div.simlytiks .viz-options-btn-group.leftAligned {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
}
div.simlytiks .viz-options-btn-group.btn-group-vertical.btn-group .btn {
	width: 35px;
}

div.simlytiks #viz_preview_options .filter_data.hasFilters {
	color: darkorange!important;
}
div.simlytiks .viz-options-btn-group li[data-id] {
	position: relative;
}
/*div.simlytiks .viz-options-btn-group li[data-id].active:after {*/
/*	content: '\f00c';*/
/*	font-family: FontAwesome;*/
/*	position: absolute;*/
/*	right: 3px;*/
/*	top: 3px;*/
/*}*/
div.simlytiks .dropdown-menu.dropdown-menu-center {
	margin-left: 9px;
	left: 100%;
	transform: translateY(-50%);
	top: 50%;
}
div.simlytiks .viz-options-btn-group .dropdown-menu.dropdown-menu-right.dropdown-menu-center:before,
div.simlytiks .viz-options-btn-group .dropdown-menu.dropdown-menu-right.dropdown-menu-center:after {
	left: 0;
}
div.simlytiks .dropdown-menu.dropdown-menu-right.dropdown-menu-center:before,
div.simlytiks .dropdown-menu.dropdown-menu-right.dropdown-menu-center:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
div.simlytiks .dropdown-menu.dropdown-menu-center:after {
	border-width: 8px 8px 8px 0;
	border-color: transparent #FFF transparent transparent;
	margin-left: -8px;
}
div.simlytiks .dropdown-menu.dropdown-menu-center:before {
	border-width: 10px 10px 10px 0;
	border-color: transparent #CCC transparent transparent;
	margin-left: -10px;
}

div.simlytiks #viz_preview_options .viz-options-btn-group .btn.active {
	background: #428bca;
	color: #FFF;
	border-color: #428bca;
}
div.simlytiks #viz_preview_options .viz-options-btn-group.rightAligned {
	right: 100%!important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

div.simlytiks .viz-options .viz-params:not(.widget-viz-container) {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 15px;
	margin-top: 10px;
	min-height: 150px;
}


div.simlytiks .viz-options .viz-params .form-group {
	margin-bottom: 30px;
}
div.simlytiks .viz-options .viz-params .form-group .param-color-customize .row {
	margin: 0;
}
div.simlytiks .viz-options .viz-params .form-group .param-color-customize .form-group {
	margin-bottom: 10px;
}
div.simlytiks div.guide-content .viz-options .viz-params {
	padding: 0;
}
div.simlytiks .viz-options .viz-params .btn-outline-on-hover.disabled {
	background-color: #EEE;
	opacity: 0.3;
	cursor: not-allowed;
}
div.simlytiks .viz-options .viz-params .disabled .columnGroup {
	pointer-events: none;
}

div.simlytiks .switch-icon.fa-toggle-on {
	color: #428bca;
}


/* accordion */

div.simlytiks .preview-body .viz-options #optional-params-accordion {
	padding: 0 15px;
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel {
	margin-bottom: 4px;
	/*border-color: transparent;*/
	/*box-shadow: 0 6px 14px 1px rgba(0,0,0,0.001), 0 1px 13px 2px rgba(0,0,0,0.06), 0 2px 6px -3px rgba(0,0,0,0.2);*/
	border-color: #eee;
	box-shadow: none;
	border-radius: 4px;
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel-heading {
	padding: 0;
	border-bottom: none;
	background: none;
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel-title {
	font-size: 12px;
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel-heading a {
	display: block;
	padding: 10px 15px;
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel-heading .glyphicon.glyphicon-chevron-right {
	transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
div.simlytiks .preview-body .viz-options #optional-params-accordion .panel-heading [aria-expanded=true] .glyphicon.glyphicon-chevron-right {
	transform: rotate(90deg);
	transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}



div.simlytiks .viz-options .filter_row .delete-filter:hover {
	color: red!important;
}

div.simlytiks .viz-params #colorGroups table {
	table-layout: fixed;
}
div.simlytiks .viz-params #colorGroups table tbody td[data-id] input {
	width: 100%;
	border: none;
	background: none;
}
div.simlytiks .viz-params #colorGroups table tbody td[data-id].changing {
	border-color: #428BCA;
}
div.simlytiks .viz-params #colorGroups .sl-colorgroup-cp .input-group-addon {
	display: inline-block;padding:8px;border:none;
}

div.simlytiks .viz-params div.columnGroup {
	border: 1px solid transparent;
}
div.simlytiks .viz-params div.columnGroup .param-value:after {
	content: "OR";
	width: 100%;
	text-align: center;
	position: absolute;
	color: dimgray;
	pointer-events: none;
}
div.simlytiks .viz-params div.columnGroup .input-group-addon.btn-primary {
	color: #FFF;
}
div.simlytiks .viz-params div.columnGroup.highlighted {
	border-radius: 5px!important;
	border: 1px solid steelblue!important;
}

div.simlytiks div.form-group .param-datatypes {
	opacity: 0;
	color: dimgrey;
	float: right;
	position: absolute;
	right: 15px;
	bottom: -2px;
	display: flex;
	align-items: center;
}
div.simlytiks div.form-group .param-datatypes span[class*=icon-] {
	font-size: 1.4em;
}
/*div.simlytiks div.viz-params div.form-group {*/
/*	margin-bottom: 0!important;*/
/*	padding-bottom: 20px!important;;*/
/*	padding-right: 0;*/
/*}*/
div.simlytiks div.viz-params div.form-group .viz-option-pc {
	cursor: pointer;
}
div.simlytiks div.viz-params div.form-group .viz-option-pc.selected {
	color: #428bca;
}
div.simlytiks div.viz-params div.form-group .viz-option-pc,
div.simlytiks div.viz-params div.form-group .viz-option-flag {
	/*position: absolute;*/
	/*right: 20px;*/
	/*top: 8px;*/
	opacity: 1;
}
div.simlytiks .viz-params .viz-icons {
	/*padding: 4px;*/
	font-size: 1em;
	color: dimgray;
}


div.simlytiks div.viz-params div.form-group.fulfilled .viz-option-flag {
	color: #5cb85c;
}
div.simlytiks div.viz-params div.form-group:not(.isRequired) .control-label:after {
	content: '- Optional';
	font-size: 75%;
	font-style: italic;
	color: dimgray;
}
div.simlytiks div.viz-params div.form-group.fulfilled .control-label {
/*div.simlytiks div.viz-params div.form-group.fulfilled .select2-container .select2-choice,*/
/*div.simlytiks div.viz-params div.form-group.fulfilled .select2-container-multi .select2-choices .select2-search-choice {*/
/*	color: steelblue;*/
}
div.simlytiks .viz-params div.form-group div.select2-container ul.select2-choices {
	transition: box-shadow ease-in-out .15s, background ease-in 0.15s;
}
div.simlytiks .viz-params div.form-group div.select2-container.select2-dropdown-open ul.select2-choices {
	max-height: 250px;
	overflow: auto;
}
div.simlytiks .viz-params div.form-group.fulfilled div.select2-container ul.select2-choices,
div.simlytiks .viz-params div.form-group.fulfilled a.select2-choice {
	border-color: #5cb85c;
	outline-color: #5cb85c;
	/*box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);*/
}
div.simlytiks .viz-params div.form-group a.select2-choice {
	transition: border-color ease-in 0.15s;
}


div.simlytiks .viz-params div.form-group .prev_worker.open > i {
	color: green;
}






/* select2 overrides for simlytiks */
div.simlytiks .viz-params div.form-group a.select2-choice,
div.simlytiks .viz-params div.form-group ul.select2-choices,
.modalContainer .modal .simlytiks .row .select2-container-multi .select2-choices {
	background: none;
	border-color: #aaa;
	border-width: 2px!important;
	height: 38px;
}

div.simlytiks .viz-params .d3view-multiselect .ms-dd-toggle {
	height: 38px;
	border-width: 2px!important;
	border-color: #AAA;
}

div.simlytiks .viz-params div.form-group .select2-choice .select2-chosen {
	margin-top: 4px;
	margin-bottom: 4px;
}
div.simlytiks .viz-params div.form-group .select2-container.select2-allowclear .select2-choice abbr {
	top: 10px;
}

div.simlytiks .viz-params div.form-group .select2-container .select2-choice .select2-arrow b {
	background-position-y: 5px;
}
div.simlytiks .viz-params div.form-group a.select2-choice .select2-arrow {
	background: #FFF !important;
}
div.simlytiks .select2-container .select2-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: 1px solid #aaa!important;
}
div.simlytiks .select2-container .select2-arrow .select2-caret {
	transition: transform 0.3s ease-in;
}
div.simlytiks .select2-container.opensRight .select2-arrow > .select2-caret {
	transform: rotate(-90deg);
}

div.sl-select2.select2-drop-active {
	border-top: 1px solid #ddd;
}
div.sl-select2.select2-drop-active .select2-results {
	margin: 0;
	padding: 4px 0px;
}
div.sl-select2.select2-drop-active .select2-search {
	margin-top: 5px;
}


div.simlytiks .viz-params div.select2-dropdown-open a.select2-choice,
div.simlytiks .viz-params div.select2-dropdown-open ul.select2-choices {
	border-color: #66afe9;
	outline-color: #72b2ff;
	 -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}
div.sl-select2#select2-drop {
	border-color: rgb(221, 221, 221);
}
div.sl-select2#select2-drop .select2-results li:not(.select2-result-with-children) {
	padding: 4px 0;
}
div.sl-select2#select2-drop .select2-results li:not(.select2-result-with-children).select2-highlighted sub {
	color: #FFF;
}
div.sl-select2#select2-drop .select2-results li:not(.select2-result-with-children) sub {
	margin-left: 4px;
}
div.sl-select2 .select2-result-label {
	word-break: break-all;
	position: relative;
	/*display: flex;*/
	/*justify-content: space-between;*/
}
div.sl-select2 .select2-highlighted i[class*=icon-response]:before {
	color: #FFF;
}



/** Machine Learning **/
div.simlytiks .ml-vis-list-container {
	flex: 0 0 450px;
	min-width: 60px;
	display: none;
	border: 1px solid #DDD!important;
	z-index: 10;
	background: #FFF;
}
div.simlytiks .ml-vis-list-container.shown {
	z-index: 106;
}
/*div.simlytiks .ml-vis-list-container > * {*/
/*	padding: 15px;*/
/*}*/
/*div.simlytiks .ml-vis-list-container .ml-panels {*/
/*	display: flex;*/
/*	align-items: center;*/
/*	!*justify-content: center;*!*/
/*	flex-wrap: wrap;*/
/*}*/
/*div.simlytiks .ml-vis-list-container .ml-panel {*/
/*	width: 30%;*/
/*	margin: 20px;*/
/*	border: 1px solid #DDD;*/
/*	text-align: center;*/
/*	cursor: pointer;*/
/*	font-size: 2em;*/
/*}*/
/*div.simlytiks .ml-vis-list-container .ml-panel:hover {*/
/*	border-color: #428bca;*/
/*}*/
/*div.simlytiks .ml-vis-list-container .ml-panel img {*/
/*	max-height: 200px;*/
/*	margin: 0 auto;*/
/*}*/

div.simlytiks .ml-vis-list-container .ml-charts-list-item {
	cursor: pointer;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item.hasChildren.hovered > div.row .toggle-ml-item,
div.simlytiks .ml-vis-list-container .ml-charts-list-item.hasChildren.hovered > div.row .viz-name {
	color: steelblue;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item:not(.hasChildren):hover {
	background: #eee;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item .toggle-ml-item {
	transition: transform 0.3s ease-in;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item.opened > div.row .toggle-ml-item {
	transform: rotate(90deg);
}
div.simlytiks .sl-ml-main-window .sl-ml-viz-preview {
	flex: 0 0 240px;
}
div.simlytiks .mainPanel .ml-vis-list-container li.ml-charts-list-item .viz-description {
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	position: relative;
}
div.simlytiks .mainPanel .ml-vis-list-container li.ml-charts-list-item img {
	/*width: 35px!important;*/
	/*height: 35px!important;*/
	cursor: pointer;
}
div.simlytiks .mainPanel .ml-vis-list-container li.ml-charts-list-item {
	/*display: flex;*/
	align-items: center;
	justify-content: space-between;
	/*padding: 6px 20px!important;*/
	/*padding-right: 10px!important;*/
	border-bottom: 1px solid #DDD!important;
	cursor: pointer;
}
div.simlytiks .mainPanel .ml-vis-list-container li.ml-charts-list-item:last-child {
	border-bottom: none!important;
}
div.simlytiks .ml-vis-list-container {
	padding: 0!important;
}
div.simlytiks .ml-vis-list-container .ml-charts-body.scrolling {
	cursor: progress;
}
div.simlytiks .ml-vis-list-container .ml-charts-body.scrolling li {
	pointer-events: none;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item {
	text-align: left;
	flex: 1 1 100%;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item a {
	display: flex;
	align-items: center;
	text-decoration: none;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item img {
	margin-right: 10px;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item .viz-info {
	display: block!important;
	font-size: 90%!important;
	line-height: 2em;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item .viz-name {
	font-weight: bold;
	margin-left: 0 !important;
	margin-bottom: 5px;

	font-size: 1.3em;
}
div.simlytiks .ml-vis-list-container .ml-charts-list-item img {
	/*height: 40px;*/
	/*width: 40px;*/
}

div.simlytiks .page-container .ml-page-info {
	overflow: auto;
}


/* CSS for viz items list **/


div.simlytiks .viz-list-item {
	padding: 15px 20px!important;
}
div.simlytiks .viz-list-item .viz-thumbnail {
	flex: 0 0 100px;
}
div.simlytiks .viz-list-item .control-buttons {
	opacity: 0;
	margin-top: 10px;
}
div.simlytiks .viz-list-item:hover .control-buttons {
	opacity: 1;
}
div.simlytiks .viz-list-item .viz-name {
	word-break: break-all;
	white-space: normal;
}
div.simlytiks .viz-list-item:hover {
	background: #eee;
}



/** To make simlytiks look cleaner **/
div.simlytiks[data-padding="low"] .sl-page {
	padding: 0;
}
div.simlytiks[data-padding="low"] .viewContent .vizContainer {
	padding: 0;
}


div.simlytiks[data-padding="medium"] .sl-page {
	padding: 10px 0;
}
div.simlytiks[data-padding="medium"] .viewContent .vizContainer {
	padding: 15px 0;
}

div.simlytiks[data-padding="high"] .sl-page {
	padding: 25px;
}
div.simlytiks[data-padding="high"] .viewContent .vizContainer {
	padding: 30px;
}


div.simlytiks div.imageann-viz .imagegallery {
	border: none;
}
div.simlytiks .page-container .page-navigation-container .sl-pagination {
	display: flex;
	align-items: center;
}
div.simlytiks .page-container .page-navigation-container .sl-pagination .dropdown-menu {
	max-height: 250px;
	overflow: auto;
}

div.simlytiks .page-container .page-navigation-container .sl-pagination > li {
	display: inline-block;
	padding: 0;
}
div.simlytiks .bs_datatable_wrapper .dt-settings {
	box-shadow: none;
}
div.simlytiks .page-tree  span.tv-content {
	padding: 0;
}
div.simlytiks .page-tree  span.tv-content {
	word-wrap: break-word;
	/*white-space: normal;*/
	padding: 0;
}
div.simlytiks .page-tree .tree-view .tv-content.active:before {
	left: -4px;
}

div.simlytiks .page-container .page-navigation-container[data-view="default"] li {
	margin-right: 5px;
}
div.simlytiks .page-container .page-navigation-container[data-view="default"] li > a {
	border-radius: 50%;
	color: #333;
}





div.simlytiks .sl-page {
	display: flex;
	/*border: 1px solid #DDD;*/
}

/*div.simlytiks[data-view="mini"] .sl-page-tabs,*/
/*div.simlytiks[data-view="classic"] .sl-page-tabs {*/
/*	display: none;*/
/*}*/
div.simlytiks[data-view="classic"] .sl-page {
	height: calc(100% - 46px);
}
div.simlytiks[data-tab="Data Overview"] .vis_options,
div.simlytiks[data-tab="Data Overview"] .ml_charts {
	opacity: 0!important;
}
div.simlytiks .sl-page .sl-page-tabs {
	/*background: #f5f5f5;*/
	width: 60px;
	/*margin-left: 10px;*/
	/*border-right: 1px solid #DDD;*/
	flex: 0 0 60px;
}
div.simlytiks .sl-page .sl-page-tabs .pl-tab-item-label {
	font-size: 0.8em;
	white-space: normal;
	/*display: none;*/
}
div.simlytiks.toggled_for_preview .sl-page .sl-page-tabs {
	display: none;
}



div.simlytiks .sl-page .sl-page-tabs li[data-id] {
	border: none;
}
div.simlytiks .sl-page .sl-page-tabs .pl-tabs-vertical > li[data-id] {
	border-left: 3px solid transparent!important;
	border-top: none;
	border-bottom: none;
	border-radius: 5px;
	margin: 2px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.1s linear;
}
div.simlytiks .sl-page .sl-page-tabs .pl-tabs-vertical > li[data-id="export"]:hover .dropdown-menu {
	display: block!important;
	right: 100%;
	left: unset;
}
div.simlytiks .sl-page .sl-page-tabs .pl-tabs-vertical > li[data-id="export"]:hover .dropdown-menu:before {
	right: -8px;
}
div.simlytiks .sl-page .sl-page-tabs li[data-id]:hover {
	background-color: #FFF!important;
}
div.simlytiks .sl-page .sl-page-tabs li[data-id].active {
	background: #FFF!important;
}

div[data-id="lucy_output"] .sl-page .sl-page-tabs li[data-id].active {
	background: #f1f3f4!important;
}
div[data-id="lucy_output"] .sl-page .sl-page-tabs li[data-id]:hover {
	background: #f1f3f4!important;
}
div[data-id="lucy_output"] .sl-page .sl-page-tabs li[data-id]:before {
	content: unset;
}

div.simlytiks .sl-page .sl-page-tabs li[data-id].active:before {
	content: '';
	border-style: solid;
	height: 100%;
	position: absolute;
	right: -3px;
	border-width: 1.5px;
	border-color: steelblue;
}

div.simlytiks .sl-page .sl-page-tab-content {
	flex: 1 1 auto;
	z-index: 2;
	/*padding: 10px;*/
}
div.simlytiks .sl-page.hasTabs .sl-page-tab-content {
	width: calc(100% - 60px);
}
div.simlytiks .sl-page .sl-page-tab-content > .tab-pane:not(.isVizTab) {
	padding: 15px;

	background: #FFF;
}
div.simlytiks .sl-page .ml-responses {
	display: flex;
	flex-wrap: wrap;
	height: calc(100% - 50px);
}
div.simlytiks .sl-page .ml-responses .ml-response {
	margin: 10px;
	width: calc(50% - 20px);
}
div.simlytiks .sl-page .ml-response.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 20000;
}
div.simlytiks .sl-page .ml-responses .ml-response.fixed .panel {
	height: calc(100% - 20px);
	margin-bottom: 0;
}
div.simlytiks .sl-page .ml-responses .ml-response.fixed .panel-body {
	height: calc(100% - 80px);
	max-width: unset;
}
div.simlytiks .sl-page .ml-responses .ml-response .panel-body {
	height: 340px;
	overflow: auto;
	max-width: 50vw;
	/*overflow: auto;*/
}
div.simlytiks .sl-page .ml-non-primary-charts {
	display: flex;
	flex-wrap: wrap;
	height: calc(100% - 60px);
}
div.simlytiks .sl-page .ml-non-primary-charts .ml-non-primary-viz {
	margin: 10px;
	/*width: calc(50% - 20px);*/
	height: calc(100% - 20px);
	border: 1px solid #DDD;
	/*flex: 1 0 50%;*/
}

/*div.simlytiks[data-ml="true"] .vis_options {*/
/*	opacity: 0.4!important;*/
/*	pointer-events: none!important;*/
/*}*/

/*div.simlytiks[data-vis-list="true"] .ml {*/
/*	opacity: 0.4!important;*/
/*	pointer-events: none!important;*/
/*}*/
div.simlytiks div.page-container.ml_rendering:after {
	content: 'Rendering ML charts. Please wait...';
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 1.5em;
	transform: translate(-50%, -50%);
}
div.simlytiks .page-options .dropdown li[data-id] {
	position: relative;
	/*padding-left: 5px;*/
}
div.simlytiks .page-options .dropdown li[data-id].checked:before {
	content: '\f00c';
	position: absolute;
	font-family: FontAwesome;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: steelblue;
}









div.simlytiks .viz-params div.form-group .control-label {
	transition: color ease-in 0.15s;
	max-width: 85%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0;
	/*white-space: nowrap;*/
	/*display: inline-block;*/
}
div.simlytiks .viz-params div.form-group.fulfilled .control-label {
	/*color: #5cb85c;*/
}
div.simlytiks .viz-params div.form-group .control-description {
	display: none;
}
div.simlytiks .viz-params.showDescriptions div.form-group .control-description {
	/*display: none;*/
	display: block;
	color: dimgrey;
	margin-bottom: 5px;
}
div.simlytiks .viz-params.showDescriptions div.form-group .label-div {
	/*line-height: 1;*/
}

div.simlytiks .viz-params .clear-input {
	position: absolute;
	right: 5px;
	top: 6px;
	cursor: pointer;
	font-size: 0.85em;
	font-weight: bold;
	color: dimgray;
}
div.simlytiks .viz-params .clear-input:hover {
	color: #333;
}

/* highlight input when response is dragged */
.d3view-item-dragging .page-container:not(.hidden) .viewContent:not(.quickEditOpen):not(.enabled) {
	background: #e6ffe6!important;
}

/* valid select2 drop*/
.d3view-item-dragging .viz-params div.form-group.drop-valid div.select2-container ul.select2-choices,
.d3view-item-dragging .viz-params div.form-group.drop-valid div.select2-container a.select2-choice,
.d3view-item-dragging .viz-params div.form-group.drop-valid div.multiselect-container .ms-dd-toggle {
	background: #e6ffe6!important;
}
/* invalid select2 drop*/
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container ul.select2-choices,
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container a.select2-choice,
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.multiselect-container .ms-dd-toggle {
	background: rgba(255, 0, 0, 0.6)!important;
	opacity: 0.6;
	pointer-events: none!important;
}
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container ul.select2-choices input.select2-default,
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container a.select2-choice .select2-chosen{
	opacity: 0;
}

.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container ul.select2-choices li.select2-search-field:before,
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.select2-container a.select2-choice,
.d3view-item-dragging .viz-params div.form-group.drop-invalid div.multiselect-container .ms-dd-toggle {
	content: 'Not allowed';
	padding-left: 10px;
	color: #FFF;
}

.d3view-item-dragging .page-container:not(.hidden) .viewContent:not(.quickEditOpen):not(.enabled).over {
	background: #d3f4ff73!important;
}
.d3view-item-dragging .page-container:not(.hidden) .viewContent .vc-blank-options,
.d3view-item-dragging .page-container:not(.hidden) .viewContent:not(.quickEditOpen) .panel-options {
	opacity: 0.4;
}
.d3view-item-dragging .page-container:not(.hidden) .viewContent:not(.enabled):after {
	content: 'Drop here';
	color: dimgray;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease-in;
	font-size: 1.5em;
}

div.simlytiks .viz-params div.form-group.drop-valid.hovered div.columnGroup.ui-droppable div.select2-container ul.select2-choices,
div.simlytiks .viz-params div.form-group.drop-valid.hovered div.columnGroup.ui-droppable div.select2-container a.select2-choice,
div.simlytiks .viz-params div.form-group.drop-valid.hovered div.columnGroup.ui-droppable div.multiselect-container .ms-dd-toggle {
	background: inherit;
	border-color: #428bca;
	outline-color: #428bca;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}



div.simlytiks div.viz-params div.form-group .viz-option-pc:hover {
	color: steelblue!important;
}
div.simlytiks div.form-group:hover .param-datatypes,
div.simlytiks div.form-group.hovered .param-datatypes,
div.simlytiks div.form-group:hover .viz-option-pc,
div.simlytiks div.form-group.hovered .viz-option-pc {
	opacity: 1!important;
}
/*div.simlytiks div.viz-params .form-group.hovered .columnGroup {*/
/*	border-color: #428bca!important;*/
/*}*/

/* viz layout dimensions */
/*div.simlytiks .viz-content-container .viewContent[data-page-layout="33"] {*/
	/*width: 33%!important;*/
	/*height: 33%!important;*/
/*}*/
/* page options */
div.simlytiks .sl-main-window .page-options {
	/*border-bottom: 1px solid #DDD;*/
	margin: 6px;
	/*display: flex;*/
	align-items: center;
}
div.simlytiks .sl-main-window .pages-container[data-view="classic"] .page-options {
	display: flex;
	position: relative;
	z-index: 20;
	justify-content: space-between;
}
div.simlytiks .sl-main-window .pages-container[data-view="slides"] .page-options {
	justify-content: left;
}
div.simlytiks .sl-main-window .page-options .page-name {
	/*max-width: 200px;*/
	font-size: 1.4em;
	font-weight: bold;
	padding: 2px 5px;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	float: left;
	text-decoration: none;
}
div.simlytiks .sl-main-window .page-options a {
	/*color: #444;*/
}
div.simlytiks .sl-main-window .page-options .dropdown-menu a:hover {
	color: #FFF!important;
}
div.simlytiks .sl-main-window .page-options .page-name {
	border: 1px solid transparent;
	/*border-radius: 5px;*/
	color: unset;
}
/*div.simlytiks .sl-main-window .page-options .page-name:hover {*/
/*	border: 1px solid #CCC!important;*/
/*}*/
div.simlytiks .sl-main-window .page-options .page-name:hover + .edit-page-name {
	opacity: 1;
}
div.simlytiks .sl-main-window .page-options .edit-page-name {
	position: relative;
	opacity: 0;
	/*left: -20px;*/
	top: 5px;
	pointer-events: none;
}
div.simlytiks .sl-main-window .page-options .page-icon {
	position: relative;
	top: 5px;
	margin-right: 5px;
	/*left: 100px;*/
	display: inline-block;
	font-size: 13px;
	float: right;
	font-weight: 400;
}

div.simlytiks .sl-main-window .page-options .btn.active {
	background-color: #428bca!important;
	color: #FFF;
}

div.simlytiks .sl-side-bar .ui-resizable-handle.ui-resizable-e {
	width: 24px;
	right: -24px;
	border-left: 2px solid transparent;
	transition: border-left-color 0.15s ease;
	display: block!important;
	cursor: ew-resize;
}
div.simlytiks .sl-side-bar .ui-resizable-handle.ui-resizable-e:hover {
	border-color: #66afe9;
}
div.simlytiks div.viewContent .vizviewContainer.hasVizAnim .vizviewPanel {
	position: relative;
	width: calc(100% - 30px);
}
div.simlytiks div.viewContent.enabled .vizviewPanel {
	flex: 1 1 auto;
}
div.simlytiks .floating-btn {
	display: none;
	width: 60px;
	height: 60px;
	pointer-events: none;
	z-index: 10!important;
	position: absolute;
	left: 0;
	top: -5px;
	/* writing-mode: vertical-lr; */
	/*transform: rotate(-45deg);*/
	/*background: #f5f5f5;*/
	/*padding: 10px 15px;*/
	/*border: 1px solid #DDD;*/
	/*border-right: none;*/
	cursor: pointer;
}

div.simlytiks .floating-btn.top {
	background: linear-gradient(to top left, transparent 50%, #f5f5f5 50%);
}
div.simlytiks .floating-btn.bottom {
	top: unset!important;
	bottom: -20px;
	left: -15px;
	top: unset!important;
	background: linear-gradient(to bottom left, transparent 50%, #f5f5f5 50%);
}

div.simlytiks a.floating-btn.edit-viz-params:after,
div.simlytiks a.floating-btn.ml-edit:after {
	content: '\f303';
	font-family: 'FontAwesome';
	position: absolute;
	top: 5px;
	left: 10px;
}

div.simlytiks div.viewContent a.floating-btn.edit-viz-filters:after {
	content: '\f0b0';
	font-family: 'FontAwesome';
	position: absolute;
	bottom: 5px;
	left: 10px;
}

/*div.simlytiks div.viewContent .floating-btn.top span {*/
/*	top: -5px;*/
/*	position: relative;*/
/*	left: -5px;*/
/*	transform: rotate(-90deg);*/
/*}*/
/*div.simlytiks div.viewContent .floating-btn.bottom span {*/
/*	bottom: -10px;*/
/*	position: relative;*/
/*	left: -5px;*/
/*}*/

/*div.simlytiks div.viewContent .floating-btn.top:before {*/
/*	content: '';*/
/*	border-style: solid;*/
/*	border-color: transparent transparent transparent #f5f5f5;*/
/*	border-width: 50px 0 50px 50px;*/
/*	position: absolute;*/
/*	left: -12px;*/
/*	top: 0;*/
/*	transform: rotate(45deg);*/
/*}*/

/*div.simlytiks div.viewContent .floating-btn.bottom:before {*/
/*	content: '';*/
/*	border-style: solid;*/
/*	border-color: transparent #f5f5f5 transparent transparent;*/
/*	border-width: 60px 60px 60px 0px;*/
/*	position: absolute;*/
/*	left: -12px;*/
/*	top: 0;*/
/*	transform: rotate(45deg);*/
/*}*/

/*div.simlytiks div.viewContent .edit-viz-params.floating-btn span {*/
/*	transform: rotate(-45deg);*/
/*	position: absolute;*/
/*	bottom: 10px;*/
/*	left: 37%;*/
/*}*/
div.simlytiks:not(.hasFixedContainer) div.viewContent:not(.enabled):not(.profile-viz):hover .floating-btn {
	display: block!important;
	pointer-events: all!important;
}
div.simlytiks div.viewContent:not(.enabled):hover .floating-btn.top:hover {
	background: linear-gradient(to top left, #FFF 50%, #d3f4ff73 50%);
}
div.simlytiks div.viewContent:not(.enabled):hover .floating-btn.bottom:hover {
	background: linear-gradient(to bottom left, #FFF 50%, #d3f4ff73 50%);
}
div.simlytiks div.viewContent .floating-btn.edit-viz-filters.hasFilters {
	color: darkorange!important;
}

div.simlytiks .sl-page .isVizTab:hover .ml-edit {
	display: block!important;
	pointer-events: all!important;
	top: 0!important;
}
div.simlytiks .sl-page .isVizTab:hover .floating-btn.top:hover {
	background: linear-gradient(to top left, #FFF 50%, #d3f4ff73 50%);
}

/*
floating filters
 */
div.simlytiks div.viewContent .floating-ff {
	/*position: absolute;*/
	/*bottom: -20px;*/
	top: 0px;
	padding: 0 40px;
	z-index: 2;
}
div.simlytiks div.viewContent .floating-ff .d3view-filters {
	height: auto;
}

div.simlytiks div.viewContent .floating-ff .edit-viz-filters {
	cursor: pointer;
}
div.simlytiks div.viewContent .floating-ff .edit-viz-filters:hover {
	color: #428bca;
}

div.simlytiks div.freeform-filters .floating-ff {
	position: absolute!important;
	top: 0;
	left: 0;
	width: auto!important;
	display: flex;
	z-index: 2;
	border: 2px solid transparent;
}
div.simlytiks div.freeform-filters .floating-ff:hover {
	border: 2px solid #DDD;
}



div.simlytiks .sl-main-window div.page-container[data-columns="freeform"] .panel-options {
	background: #FFF;
	border: none!important;
}

div.simlytiks div.viewContent .viz-records-count:hover {
	/*color: steelblue;*/
	cursor: help;
}
div.simlytiks div.viewContent .viz-records-count.open {
	border-radius: 4px !important;
	border: 1px solid #ddd !important;
	background-color: #eee !important;
}
div.simlytiks .sl-main-window .page-options .btn-group > button.selected {
	color: #FFF!important;
}
div.simlytiks .sl-main-window .page-options .btn-group > .btn-default, div.simlytiks .sl-main-window .panel-options .btn-group > .btn-default {
	/*box-shadow: none;*/
	/*display: block;*/
	/*padding: 1px 4px;*/
	/*text-shadow: none;*/
	/*background-image: none;*/
	/*border: none;*/
	/*color: gray;*/
	/*margin-right: 12px;*/
}
div.simlytiks .sl-main-window .page-options .btn-group > button.btn-default:not(.selected):hover, div.simlytiks .sl-main-window div.dropdown.open .dropdown-toggle.btn-default {
	color: #000!important;
	background: #eee!important;
}
div.simlytiks .sl-main-window .page-options .btn-group > button.btn-default:active, div.simlytiks .sl-main-window .page-options .btn-group > button.btn-default:focus {
	color: #000!important;
	background: #eee!important;
	outline: none!important;
}
div.simlytiks .viewContent.fixed, div.simlytiks .viewContent-carousel.fixed {
	position: fixed!important;
	top: 0px!important;
	/* Yield the d3VIEW pin-left app rail (--d3v-rail-w, set by style.css on
	   body.app-menu-pos-pin-left; 0 on rail-less pages) so the enlarged viz
	   never renders under the rail's 44px overlay. */
	left: var(--d3v-rail-w, 0px)!important;
	width: calc(100% - var(--d3v-rail-w, 0px))!important;
	height: calc(100vh - 62px)!important;
	box-sizing: border-box;
	background: #FFF!important;
	z-index: 100!important;
}
div.simlytiks .viewContent.fixed .drag-move-viz,
div.simlytiks .viewContent-carousel.fixed .drag-move-viz,
div.simlytiks .viewContent.fixed .select-viz,
div.simlytiks .viewContent-carousel.fixed .select-viz {
	display: none!important;
}
div.simlytiks .viewContent.freeform-vc .select-viz, div.simlytiks .viewContent.freeform-vc .drag-move-viz {
	display: none!important;
}

/*div.simlytiks .sl-main-window .page-options div.dropdown .dropdown-menu {*/
	/*margin-top: 0;*/
/*}*/
/*div.simlytiks .sl-main-window .page-options div.dropdown:hover .dropdown-menu {*/
	/*display: block!important;*/
/*}*/



/* page layout */
div.simlytiks .sl-main-window .page-layouts-container .page-layout-footer {
	margin: 5px;
}
div.simlytiks .sl-main-window .simlytiks_newpage_form .page-layouts {
	display: flex;
	flex-wrap: wrap;
	background: #f5f5f5;
	border: 1px solid #DDD;
	margin-bottom: 5px;
	overflow: auto;
}
div.simlytiks .sl-main-window .simlytiks_newpage_form .page-layouts .page-layout {
	height: 28%;
	width: 31%;
	padding: 0!important;
	margin: 10px;
	cursor: pointer;
	border: 1px solid #CCC;
	text-align: center;
}
div.simlytiks .sl-main-window .simlytiks_newpage_form .page-layouts .page-layout.active {
	color: #FFF;
	background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));
}
div.simlytiks .sl-main-window .simlytiks_newpage_form .page-layouts .page-layout img {
	width: 85%!important;
	height: 85%;
	padding: 12px 0px;
}

/* page layout dropdown */
div.simlytiks .sl-main-window .layout_dropdown .dropdown-menu {
	width: 450px;
	/*padding: 0;*/
}
div.simlytiks .dropdown-menu > .page-layouts {
	display: flex;
	flex-wrap: wrap;
	max-height: 350px;
	overflow: auto;
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout {
	width: calc(100%/3 - 20px);
	height: 80px;
	padding: 10px!important;
	margin: 10px;
	cursor: pointer;
	border: 1px solid #AAA;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout i.layout-icon {
	font-size: 3em!important;
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout .column_label {
	font-weight: 500;
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout.disabled {
	pointer-events: none;
	opacity: 0.3;
}
div.simlytiks .layout_dropdown .open > [data-toggle="dropdown"] {
	border-radius: 4px!important;
	border: 1px solid #ddd!important;
	background-color: #eee!important;
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout:hover {
	/*background: #e4f8ff;*/
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout.active {
	border-color: #007bff;
	/*color: #FFF;*/
}
div.simlytiks .dropdown-menu > .page-layouts .page-layout img {
	width: 90%!important;
	padding: 8px 0;
	padding-bottom: 0;
}
div.simlytiks .dropdown-menu > .page-layouts .column_label label {
	font-size: 11px;
}

div.simlytiks .page-layouts-tab .page-layout,
div.simlytiks .page-selection-items .page-layout {
	width: calc(100% / 3);
	cursor: pointer;
	/*height: 150px;*/
	display: flex;
	align-items: center;
}
div.simlytiks .page-layouts-tab .page-layout.active .layout-icon.fa,
div.simlytiks .page-selection-items .page-layout.active .layout-icon.fa {
	color: #428bca;
}
div.simlytiks .page-layout:hover,
div.simlytiks .page-selection-items .page-layout:hover,
div.simlytiks .sl-quick-access-layouts div[data-columns]:hover {
	background-color: #f1f3f4;
}
div.simlytiks .page-layouts-tab i.layout-icon,
div.simlytiks .page-selection-items .page-layout i.layout-icon {
	font-size: 7em!important;
}

div.simlytiks .sl-quick-access-layouts > div[data-columns] {
	padding: 10px 10px;
	border: 1px solid #DDD;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
div.simlytiks .sl-quick-access-layouts i.layout-icon {
	font-size: 5em!important;
}

/* simlytiks landing page */
div.simlytiks-landing-page-panels {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
div.simlytiks-landing-page-panels .data_add_panel {
	border: 1px solid #DDD;
	width: 47%;
	margin: 15px;
}
div.simlytiks-landing-page-panels .data_add_panel .data_add_panel_title {
	color: #4f5359;
	font-size: 1.1em;
	padding: 10px;
	font-weight: 700;
	border-bottom: 2px solid #007fa3;
}
div.simlytiks-landing-page-panels .data_add_panel .slIdxPaneToolbar > .sortOrderBtn {
	display: inline-block;
	font-size: .9em;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	cursor: pointer;
	font-weight: 400;
}
div.simlytiks-landing-page-panels .data_add_panel .slIdxPaneToolbar > .sortOrderBtn.selected {
	border-bottom: 1px solid #007fa3;
	background-color: transparent;
}
div.simlytiks-landing-page-panels .data_add_panel .data_add_panel_body {
	overflow: auto;
}
div.simlytiks-landing-page-panels .data_add_panel_body .no_comparisons {
	font-size: 13px;
	font-weight: bold;
	margin: 0 auto;
	position: relative;
	top: 45%;
}

/* select2 overrides */
div.simlytiks div.viewContent .select2-search {
	z-index: 1050!important;
}

/*simlytiks modal */
div#simlytiks-modal.modal {
	overflow-y: hidden!important;
	padding: 0!important;
}
div.modal#simlytiks-modal .modal-dialog.modal-dialog-fullscreen, div#sl-fullscreen .modal-dialog.modal-dialog-fullscreen {
	width: calc(100% - var(--d3v-rail-w, 0px))!important;
	margin: 0!important;
	left: var(--d3v-rail-w, 0px)!important;
	top: 0;
	background: #FFF;
	height: 100%;
}
div.modal#simlytiks-modal .modal-dialog.modal-dialog-fullscreen .modal-body {
	padding: 0!important;
	/*height: unset!important;*/
	height: 100%!important;
	max-height: unset!important;
}

/* The transformed fullscreen dialog already clears the app rail. Avoid
   applying the global .pl-fixed rail offset a second time when enlarged. */
#simlytiks-modal .pl-fixed {
	left: 0!important;
	width: 100%!important;
}

/* full screen view */
div#sl-fullscreen .modal-dialog.modal-dialog-fullscreen {
	width: calc(100% - var(--d3v-rail-w, 0px))!important;
	margin: 0!important;
	top: 0!important;
	left: var(--d3v-rail-w, 0px)!important;
}
div#sl-fullscreen .modal-header, div#sl-fullscreen .modal-footer {
	padding: 10px;
	background: #FFF;
}

/* peacock overrides */
div.simlytiks .peacock-index {
	position: relative;
}
div.simlytiks .peacock-webglviewer {
	height: 100%;
	top: 0!important;
}
/*div.simlytiks .panel-footer {*/
	/*display: none;*/
/*}*/
div.simlytiks #peacock-controls-header {
	z-index: 2!important;
}
div.simlytiks #peacock-dd-1, div.simlytiks #peacock-dd-2, div.simlytiks #peacock-dd-3,
div.simlytiks #peacock-dd-4 {
	z-index: 1!important;
}
div.simlytiks .peacock-footer {
	/*bottom: 40px!important;*/
}
div.simlytiks .edit_color_palette[disabled] {
	cursor: not-allowed;
}
div.simlytiks .edit_color_palette {
	cursor: pointer;
	/*position: absolute;*/
	/*top: 14px;*/
	/*right: -24px;*/
}

div.simlytiks .fetch_parameterized_option {
	position: absolute;
	right: 0;
	top: 8px;
	cursor: pointer;
}
div.simlytiks .fetch_parameterized_option:hover {
	color: red;
}


/* color palette */
div.simlytiks-global-color-palette {
	position: fixed;
	background-color: #FFF;
	border: 1px solid #DDD;
	z-index: 1052;
}
div.simlytiks-global-color-palette .color-schemes {
	padding: 10px;
	max-height: 400px;
	overflow: auto;
}
div.simlytiks-global-color-palette .palette-heading {
	background-color: #DDD;
	padding: 4px;
}
div.simlytiks-global-color-palette .nav-item.active > a {
	font-weight: 400;
}
div.simlytiks-global-color-palette .color-scheme-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	cursor: pointer;
	border: 1px solid transparent;
}
div.simlytiks-global-color-palette .color-scheme-container.palette-selected {
	border-color: #000;
}
div.simlytiks-global-color-palette .color-scheme-container .color-item {
	width: 20px;
	height: 20px;
}
/* edit color palette */
div.simlytiks-edit-colors {
	position: fixed!important;
	background-color: #FFF;
	border: 1px solid #DDD;
	width: auto;
	min-width: 300px;
	height: auto!important;
	border-radius: 4px;
	z-index: 1061;
}
div.simlytiks-edit-colors .palette-body {
	max-height: 400px;
	overflow: auto;
}
div.simlytiks-edit-colors .palette-heading,div.simlytiks-edit-colors .palette-footer {
	background-color: #EEE;
	padding: 4px;
}
div.simlytiks-edit-colors .palette-colors {
	border: 1px solid #DDD;
	background-color: #FFF;
	min-height: 60px;
}
div.simlytiks-edit-colors .sl-palette-colors {
	display: flex;
	flex-wrap: wrap;
	max-height: 100px;
	overflow: auto;
}
div.simlytiks-edit-colors .sl-palette-color-item {
	width: 20px;
	height: 20px;
	margin: 2px;
}
div.simlytiks-edit-colors .colors-list {
	max-height: 364px;
	overflow: auto;
	margin-left: 4px;
	margin-bottom: 2px;
}
div.simlytiks-edit-colors .colors-list li {
	padding: 2px 3px;
	border: none;
}
div.simlytiks-edit-colors .colors-list .color-item-cp {
	width: 15px;
	height: 15px;
	display: inline-block;
	flex: 0 0 auto;
}
div.simlytiks-edit-colors .colors-list .color-item-cp .input-group-addon, div.simlytiks-edit-colors .sl-colormin .input-group-addon,
div.simlytiks-edit-colors .sl-colormax .input-group-addon {
	width: 15px; height: 15px;    padding: 0;
	vertical-align: bottom;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-left: 1px solid #CCC;
}


div.popover.sl-preview {
	width: auto!important;
	max-height: inherit!important;
}
div.popover.sl-rsp-item-popover {
	max-width: initial;
}
div.popover.sl-rsp-item-popover .close-popup {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 200;
}
span.sl-select2 {
	z-index: 1052;
}

div#sl-data-ops .bootstrap-select .dropdown-toggle:focus {
	background: none;
	outline: none!important;
	border-color: #CCC;
}
div#sl-data-ops .modal-body [data-operation] {
	border: 1px solid #DDD;
	border-bottom: none;
	display: flex;
	/*padding: 6px 0;*/
}
div.sl-data-ops div#worker-inputs .workflow-modal {
	height: calc(100% - 40px)!important;
}
div#sl-data-ops .modal-body [data-operation]:hover .delete_operation {
	opacity: 1!important;
}
div#sl-data-ops .modal-body [data-operation]:last-child {
	border-bottom: 1px solid #DDD;
}
div#sl-data-ops .modal-body [data-operation] .operation_options {
	padding: 8px;
}
div#sl-data-ops [data-operation] .operation-option {
	margin: 6px 0;
	position: relative;
}
div.sl-data-ops .ops-list li.is_processing {
	cursor: not-allowed;
	opacity: 0.6;
}
div.sl-data-ops .ops-list li.is_processing  * {
	pointer-events: none;
}
div.sl-data-ops .ops-list li[data-id] {
	margin-bottom: 15px;
}
div.sl-data-ops .wf-builder-inputs-list .ui-layout-container > .ui-layout-center {
	height: 100%!important;
}
div.sl-data-ops .wf-builder-inputs-list #field-items {
	/*height: auto!important;*/
	overflow: auto;
	margin-bottom: 0;
}
div#sl-data-ops .worker-name {
	font-size: 18px;
}
div#sl-data-ops .worker-type {
	font-size: 0.7em!important;
}
div#sl-data-ops .worker-description {
	font-size: 10px;
	color: gray;
}
div.sl-data-ops .eb-container .flex-box-rule-maker {
	overflow: visible!important;
}
div#sl-data-ops .worker-panel {
	border: 1px solid #DDD;
	margin: 7px 0;
	padding: 5px;
	border-radius: 5px;
	cursor: pointer;
}
div#sl-data-ops .worker-panel:hover {
	background: #f5f5f5;
}
div#sl-data-ops .worker-attrs {
	color: gray;
}
div#sl-data-ops .preview_data {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 18px;
	font-weight: 500;
	/*transition: top 1s ease;*/
}
div#sl-data-ops .preview_data.moved {
	top: 92%;
}

/*div.sl-data-ops #data-ops-workflow div.workflow .wf-nav-menu {*/
/*	position: absolute!important;*/
/*}*/
div.sl-data-ops #data-ops-workflow div.workflow #workflow-logs-container {
	position: absolute!important;
}
div.sl-data-ops #data-ops-core .wf-worker-switch,
div.sl-data-ops #data-ops-core .wf-worker-configuration {
	display: none;
}
div.sl-data-ops .wf-workers-container .worker-panel {
	height: 175px;
}
div.sl-data-ops .wf-workers-container .worker-panel-options {
	display: none;
}
/*div.sl-data-ops div.workflow div.top-settings-container,*/
/*div.sl-data-ops div.workflow .floating_button {*/
/*	display: none!important;*/
/*}*/
/*div.sl-data-ops div.workflow .wf-nav-menu {*/
/*	top: 0;*/
/*}*/
div.sl-data-ops div.workflow .chart-view {
	border-color: transparent;
}
div.sl-data-ops .wf-workers-container .worker-panel .add_buttons {
	display: block;
	opacity: 0;
}
div.sl-data-ops .wf-workers-container .worker-panel:hover .add_buttons {
	opacity: 1;
}



.d3view-select2-result-preview {
	z-index: 2;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	float: right;
	opacity: 1;
	padding: 4px;
	/*right: 5px;*/
	/*top: 6px;*/
	/*position: absolute;*/
}
.d3view-select2-result-preview:hover {
	color: red!important;
}

.select2-container .d3view-select2-result-preview {
	padding: 7px;
}
.select2-choices .d3view-select2-result-preview {
	padding: 1px 9px;
}



div.simlytiks .select2-container-multi .select2-choices .select2-search-choice {
	padding: 3px 18px 3px 5px;
}
div.simlytiks .select2-container-multi .select2-search-choice-close {
	left: unset;
}
.sl-select2 .select2-result-with-children.select2-highlighted {
	background: none!important;
	color: inherit!important;
	cursor: default!important;
	pointer-events: none!important;
}


div.simlytiks .list-group-item.category-item {
	padding: 6px 8px;
}


body .sl-alert {
	z-index: 2000;
	position: fixed;
	left: 44%;
	font-family: sans-serif;
	top: 0;
}
body .sl-alert.sl-download-link-dialog-alert {
	background: #FFF!important;
	padding: 20px;
	border: none;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-o-animation-duration: 0.5s;
	animation-duration: 0.5s;
}
body .sl-alert.alert-simlytiks {
	color: #FFF;
}

/* tour */
body div.popover.tour-sl .popover-title {
	padding: 0;
	background-color: transparent;
	border-bottom: none;
	border-radius: 0;
	font-size: 14px;
	display: inline;
	margin-left: 5px;
}
body div.popover.tour-sl .popover-header {
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	border-radius: 5px 5px 0 0;
	padding: 8px 14px;
}
body div.popover.tour-sl {
	max-height: initial!important;
}
body div.popover.tour-sl .step-gif > a {
	text-decoration: none;
}


/*new changes */

div.simlytiks label {
	display: inline-block!important;
}

div.simlytiks .sl-side-bar:not(.mini) div.pages-panel {
	margin-bottom: 0!important;
	border-bottom: 1px solid #DDD;
	border-top: 1px solid #DDD;
	min-height: 140px;
}
div.simlytiks .sl-side-bar div.pages-panel .list-group-header {
	background-color: #FFF;
	color: unset;
	border-bottom: 1px solid #DDD;
	margin-bottom: 4px;
}
div.simlytiks .sl-side-bar .list-group-header h3 {
	margin-bottom: 0!important;
}
div.simlytiks .sl-side-bar .pages-panel .sort-pages, div.simlytiks .sl-side-bar .pages-panel .search-pages-toggle {
	cursor: pointer;
}
div.simlytiks .sl-side-bar .pages-panel .sort-pages:hover, div.simlytiks .sl-side-bar .pages-panel .search-pages-toggle:hover {
	color: green;
}
div.simlytiks .sl-side-bar .pages-panel .search-pages-toggle.toggled {
	color: green;
}
div.simlytiks .sl-side-bar div.pages-panel .page-menu {
	margin: 0!important;
	margin-bottom: 3px!important;
}
div.simlytiks .sl-side-bar:hover .ui-resizable-handle {
	opacity: 1;
}
div.simlytiks div.pages-panel .ui-resizable-handle {
	cursor: row-resize;
	background: #dadce0;
	width: 32px;
	left: 50%;
	margin-left: -16px;
	opacity: 0;
}
div.simlytiks .sl-side-bar:not(.mini) div.responses-panel {
	/*margin-top: 8px;*/
	min-height: 80px;
}
div.simlytiks div.responses-panel .filter-categories {
	padding: 8px;
	background: #FFF;
}
div.simlytiks .responses-panel .toggle-responses-search, div.simlytiks .responses-panel .responses-explore {
	padding: 2px 5px;
	/*position: absolute;*/
	right: 25px;
	cursor: pointer;
}
div.simlytiks[data-mode="explorer"] .responses-explore {
	color: steelblue;
}
div.simlytiks .responses-panel .response-panel-options > span:not(.badge):hover {
	color: steelblue;
	cursor: pointer;
}
div.simlytiks .responses-panel .toggle-responses-search:hover, div.simlytiks .responses-panel .toggle-responses-search.opened {
	color: green;
}
div.simlytiks .responses-panel .dropdown, div.simlytiks .responses-panel .toggle-responses-filters {
	/*display: inline-block;*/
	/*!*padding: 0px 5px;*!*/
	/*cursor: pointer;*/
}
div.simlytiks .responses-panel .toggle-responses-filters.opened, div.simlytiks .responses-panel .toggle-responses-filters:hover {
	color: green;
}
div.simlytiks .responses-panel .dropdown li {
	position: relative;
}

div.simlytiks .responses-panel li.toggle_responses_selection.checked i {
	color: green;
}
div.simlytiks .responses-panel li.toggle_responses_selection > a {
	padding-right: 30px;
}
div.simlytiks .responses-panel li.toggle_responses_selection > a:hover {
	background-image: unset!important;
	background-color: unset!important;
	color: #000!important;
}
/*div.simlytiks .responses-panel .dropdown .dropdown-menu {*/
/*	user-select: none;*/
/*}*/
/*div.simlytiks .responses-panel .dropdown .dropdown-toggle {*/
/*	padding: 1px 5px;*/
/*}*/
div.simlytiks .responses-panel .dropdown .dropdown-toggle.active {
	color: red!important;
}
div.simlytiks div.responses-panel .dropdown-toggle:hover,
div.simlytiks .responses-panel .dropdown.open > .dropdown-toggle {
	background: #e8f0fe;
	border-radius: 5px;
}

div.simlytiks .responses-panel .dropdown li.checked:not(.disabled):after {
	position: absolute;
	content: '\f00c';
	right: 8px;
	font-family: FontAwesome;
	color: #428bca;
	top: 3px;
}


div.simlytiks div.responses-panel .search-responses {
	/*width: 95%;*/
	/*height: 23px;*/
	/*display: inline-block;*/
}
div.simlytiks div.responses-panel .filter-categories input {
	height: auto;
}
div.simlytiks .sl-side-bar div.responses-panel .list-group-header:not(.sc-group-header) {
	cursor: default!important;
	/*display: flex;*/
	align-items: center;
	position: relative;
	background-color: #FFF;
	color: unset;
	border-bottom: 1px solid #DDD;
	margin-bottom: 2px;
}
div.simlytiks .sl-side-bar div.responses-panel .list-group {
	margin-bottom: 1px;
	overflow: auto;
	box-shadow: none;
	padding: 4px 0;
}
div.simlytiks .sl-side-bar div.responses-panel.search_open .list-group {
	height: calc(100% - 90px)!important;
}
div.simlytiks .sl-side-bar.mini div.responses-panel .list-group {
	max-height: 250px;
}
div.simlytiks .sl-side-bar div.responses-panel .list-group-header .filter-responses {
	cursor: pointer;
}
div.simlytiks .sl-side-bar div.responses-panel .list-group-header .filter-responses .dropdown-toggle.active {
	color: green;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item {
	border: none;
	/*word-break: break-all;*/
	/*display: flex;*/
	/*align-items: center;*/
	/*line-height: 1.75em;*/
	/*text-transform: capitalize;*/
	/*justify-content: space-between;*/

	/*padding-left: 20px;*/
	height: 35px;
}

div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item.ui-selected {
	background-color: var(--dt-selection-color);
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item.ui-selecting {
	background-color: var(--dt-selection-color-light);
}



div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item > a {
	word-break: break-all;
	display: flex;
	align-items: center;
	line-height: 1.75em;
	text-transform: capitalize;
	justify-content: space-between;
	padding-left: 5px;
	text-decoration: none;
	color: inherit;
	cursor: move;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .toggle_column_values {
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	position: absolute;
	left: 3px;
	top: 10px;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:not(.sortable-ghost):hover .toggle_column_values,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item.opened .toggle_column_values {
	opacity: 1!important;
	color: steelblue!important;
	pointer-events: all!important;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .col-values {
	margin-left: 20px;
	border: 1px solid #DDD;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .col-values .sc-uniq-values {
	max-height: 250px;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .col-values .sc-uniq-values [data-key] {
	padding: 6px;
}
div.simlytiks[data-mode="explorer"] .sl-side-bar div.responses-panel ul.list-group li.list-group-item.focussed {
	background-color: #d3f4ff73;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:not(.sortable-ghost):not(.ui-selected):not(.ui-selecting):hover {
	background-color: var(--dt-selection-color-light);
	cursor: move;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group {
	counter-reset: step;
}
div.simlytiks .sl-side-bar div.responses-panel.showCount .category-item:before {
	content: counter(step) ".";
	counter-increment: step;
}
div.simlytiks .sl-side-bar div.responses-panel.showCount li.category-item {
	display: flex;
}

div.simlytiks .sl-side-bar div.responses-panel li.list-group-item.category-item .rsp-name {
	width: calc(100% - 0px);
	display: inline-block!important;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.simlytiks .sl-side-bar div.responses-panel li.list-group-item.category-item:hover .rsp-name {
	width: calc(100% - 76px);
}
div.simlytiks .sl-side-bar div.responses-panel li.list-group-item.category-item .rsp-options {
	position: absolute;
	right: 0;
	cursor: pointer;
}

div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .drag_handle {
	color: #CCC!important;
	/*opacity: 0;*/
	/*top: 0!important;*/
	/*right: 5px!important;*/
	padding: 0 6px;
}

/*div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .rsp-options {*/
/*	opacity: 0;*/
/*	transition: opacity 0.15s ease-in;*/
/*}*/

div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .column-pie,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .preview_response,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .drag_handle {
/*div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .preview_response {*/
	opacity: 0;
	/*position: absolute;*/
	/*top: 10px;*/
	/*right: 10px;*/
	color: dimgrey;
	transition: opacity 0.15s ease-in;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .preview_response {
	/*right: 25px;*/
}
div.simlytiks .sl-side-bar div.responses-panel .category-item {
	cursor: move!important;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:not(.sortable-ghost):hover .column-pie,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:not(.sortable-ghost):hover .drag_handle,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:not(.sortable-ghost):hover .preview_response {
	opacity: 1!important;
	color: #333!important;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item .preview_response {
	cursor: pointer;
	color: dimgrey;
}
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .preview_response:hover,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .preview_response.open,
div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .drag_handle:hover {
	color: #428bca!important;
	opacity: 1!important;
}
div.simlytiks .sl-charts-container {
	transition: none!important;
}
div.simlytiks .sl-charts-container.shown {
	border: 1px solid #DDD!important;
	/*position: absolute;*/
	/*left: 240px;*/
	z-index: 106;
	background: #FFF;
}

div.simlytiks .sl-header-center .sl-charts-container.shown {
	left: 50%!important;
	transform: translateX(-50%);
}





div.simlytiks .sl-charts-container .charts .charts-list-header {
	margin-top: 5px!important;
}
div.simlytiks .sl-charts-container.shown div.charts-list {
	border: none!important;
}
div.simlytiks .sl-charts-container div.charts-list div.chart-info {
	padding: 10px;
	border-top: 1px solid #DDD;
	font-weight: 500;
}
div.simlytiks .sl-side-bar .list-group-header.active ul.dropdown-menu {
	color: #000!important;
}

div.sl-chart-fv {
	position: fixed;
	z-index: 1061;
	top: 0;
	margin: 20px auto;
	background-color: #FFF;
	border: 1px solid #DDD;
	border-radius: 5px;
	width: 80%;
	left: 50%;
	margin-left: -40%;
	height: auto;
	animation-duration: 0.35s;
}
div.sl-chart-fv.viewContent {
	margin-left: 0!important;
	left: 0!important;
	top: 2px!important;
	position: relative!important;
}
div.sl-chart-fv.viewContent .close-modal {
	display: none!important;
}
div.sl-chart-fv .page-selection-items {
	text-align: left;
}
div.sl-chart-fv .page-selection-items .page-layouts {
	border: 1px solid #DDD;
}
div.sl-chart-fv div.visualizations-list,
div.sl-chart-fv .page-selection-items .page-layouts,
div.simlytiks .page-selection-options .page-selection-items .page-layouts {
	display: flex;
	flex-wrap: wrap;
	overflow: auto;
}
div.sl-chart-fv div.visualizations-list .vizItem {
	width: calc(100% / 10 - 20px);
	margin: 8px;
	height: 200px;
	text-align: center;
	background: #fafafa;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
div.sl-chart-fv div.visualizations-list .vizItem {
	height: 65px;
}
div.sl-chart-fv .page-selection-items .page-layout,
div.simlytiks .page-selection-items .page-layout {
	width: calc(20% - 30px);
	margin: 15px;
	height: 150px;
	text-align: center;
	border: 1px solid #CCC;
	background: #fafafa;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
div.sl-chart-fv .page-selection-items .page-layout i.layout-icon {
	font-size: 5em!important;
}
div.sl-chart-fv .page-selection-items .page-layout > img {
	height: 170px;
}
div.sl-chart-fv div.visualizations-list .vizItem.disabled {
	opacity: 0.6;
	pointer-events: none;
}
div.sl-chart-fv .page-selection-items .page-layout.selected,
div.simlytiks .page-selection-items .page-layout.selected {
	border: 5px solid #428BCA!important;
}
div.sl-chart-fv .page-selection-items .page-layout:hover,
div.simlytiks .page-selection-items .page-layout:hover {
	border: 5px solid #CCC;
}
div.sl-chart-fv div.visualizations-list .vizItem .flex-item-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
}
div.sl-chart-fv div.visualizations-list .vizItem .flex-item-container .flex-item-image {
	height: 25px;
	display: block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
div.sl-chart-fv div.visualizations-list .vizItem .flex-item-container .flex-item-description {
	text-align: justify;
	margin: 0 10px;
	font-size: 11px;
	display: none;
}

/* min-width */
@media screen and (min-width: 1441px) {
	div.sl-chart-fv div.visualizations-list .vizItem .flex-item-container .flex-item-image {
		height: 50px;
	}
	div.sl-chart-fv div.visualizations-list .vizItem {
		width: calc(100% / 10 - 20px);
	}
	div.sl-chart-fv div.visualizations-list .vizItem {
		height: 100px;
	}
}


div.sl-chart-fv div.visualizations-list .vizItem:hover, div.sl-chart-fv .page-selection-items .choose-item:hover {
	background-color: #eee;
}
div.sl-chart-fv .page-selection-items .choose-item {
	height: 150px;
}
div.sl-chart-fv span.flex-item-label {
	font-weight: 500;
	margin-left: 5px;
}
div.sl-chart-fv div.visualizations-list .vizItem.selected,
div.sl-chart-fv .page-selection-items .choose-item.selected {
	background-color: #d3f4ff73;
	color: #333;
	border: 1px solid #428bca;
}
div.sl-chart-fv p {
	font-size: 13px;
}
div.sl-chart-fv .item-heading {
	background-color: #efefef;
	padding: 6px 15px;
}
div.sl-chart-fv .item-heading h4 {
	font-size: 24px;
	margin-bottom: 12px;
}
div.sl-chart-fv div.viewContent .page-column-label {
	font-size: 2em;
	position: relative;
	/*top: 50%;*/
	color: lightgray;
}
div.sl-chart-fv div.viewContent.active .page-column-label {
	color: #000!important;
}
div.sl-chart-fv span.close-modal:hover {
	color: red;
}

/*@media not all, (-webkit-transform-3d) {*/
	/*div.simlytiks.sl-chart-fv .carousel-inner > .car-item {*/
		/*-webkit-transition: -webkit-transform .6s ease-in-out;*/
		/*-o-transition: -o-transform .6s ease-in-out;*/
		/*transition: transform .6s ease-in-out;*/
		/*-webkit-backface-visibility: hidden;*/
		/*backface-visibility: hidden;*/
		/*-webkit-perspective: 1000px;*/
		/*perspective: 1000px;*/
	/*}*/

	/*div.simlytiks.sl-chart-fv .carousel-inner>.car-item.active {*/
		/*left: 0;*/
		/*-webkit-transform: translate3d(0,0,0);*/
		/*transform: translate3d(0,0,0);*/
	/*}*/
/*}*/

/*div.simlytiks.sl-chart-fv .carousel-inner>.car-item {*/
	/*position: relative;*/
	/*display: none;*/
	/*-webkit-transition: .6s ease-in-out left;*/
	/*-o-transition: .6s ease-in-out left;*/
	/*transition: .6s ease-in-out left;*/
/*}*/
/*div.simlytiks.sl-chart-fv .carousel-inner>.car-item.active {*/
	/*display: block!important;*/
/*}*/


/* submenus */
div.simlytiks .dropdown-submenu {
	position:relative;
	float: none;
}
div.simlytiks div:not(.d3view-tab-manager) .dropdown-submenu.left>.dropdown-menu {
	top:0;
	left: 0;
	transform: translateX(-100%);
	margin-top: -1px;
	margin-left:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
div.simlytiks .dropdown-submenu:hover>.dropdown-menu {
	display:block;
}
div.simlytiks .dropdown-submenu:hover>.dropdown-menu.dropdown-menu-left {
	/*left: -100%!important;*/
}
div.simlytiks div:not(.d3view-tab-manager) .dropdown-submenu.left>a:after {
	content: " ";
	position: absolute;
	width: 0;
	height: 0;
	left: 6px;
	top: 1px;
	border-style: solid;
	border-width: 5px 5px 5px 0;
	border-color: transparent #4f5359 transparent transparent;
}

div.simlytiks .dropdown-submenu.pull-left {
	float:none;
}
div.simlytiks .dropdown-submenu.pull-left>.dropdown-menu {
	left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;
}

div.simlytiks .export_options .dropdown-menu li a {
	white-space: normal;
	padding-right: 5px;
}
/* grouped line chart preview options */
div.simlytiks div.viz-params .grouped_lines .line-config {
	position: relative;
	border: 1px solid #DDD;
	margin: 10px 0;
}


div.simlytiks div.d3view-tab-manager {
	border-bottom: none;
	position: relative;
}
div.simlytiks .d3view-tabs-horizontal .nav-tabs {
	margin-bottom: 0!important;
}

/* sl dataset extraction */
div.sl-dataset-extraction .sidebar-title {
	margin: 20px 0;
	font-size: 18px;
}
div.sl-dataset-extraction .quick-pick input {
	height: auto!important;
}
div.sl-dataset-extraction div.sidebarArea .row {
	/*margin: 0;*/
	/*padding: 10px;*/
	/*border: 1px solid #DDD;*/
}
div.sl-dataset-extraction div.sidebarArea .hz-divider {
	margin: 10px;
	font-weight: bold;
	text-align: center;
}
/*div.customInput .slick-cell.selected a {*/
/*	color: #444!important;*/
/*}*/
/*div.sl-dataset-extraction .slick-cell {*/
/*	box-sizing: border-box;*/
/*}*/
div.sl-dataset-extraction .slick-row.odd {
	background-color: #FFF;
}
/*div.sl-dataset-extraction .slick-cell.selected {*/
/*	background-image: none!important;*/
/*	background-color: #e8f0fe!important;*/
/*	color: #000!important;*/
/*}*/

div.sl-dataset-extraction .slickgridcontainer.hasSelection .grid-canvas .slick-cell.slickgrid-first-row {
	background: #fb9b78!important;
	color: #FFF;
}

.modalContainer.excelresponseparser.sl-dataset-extraction .modal-header {
	height: 80px;
	padding: 25px;
}
.modalContainer.excelresponseparser.sl-dataset-extraction .modal-body {
	height: calc(100vh - 140px)!important;
}

/*.modalContainer.excelresponseparser.sl-dataset-extraction .ui-widget .slick-cell:first-child {*/
/*	border-left: 1px solid #DDD;*/
/*}*/
/*.modalContainer.excelresponseparser.sl-dataset-extraction .ui-widget .slick-header-column:first-child {*/
/*	border-left: 1px solid #DDD;*/
/*}*/
.modalContainer.excelresponseparser .worksheetbtns ul.sheets-list,
.sl-excelresponseparser .worksheetbtns ul.sheets-list {
	margin-bottom: 0;
}
.modalContainer.excelresponseparser .dataset-quick-picks .quick-pick,
.sl-excelresponseparser .dataset-quick-picks .quick-pick {
	cursor: pointer;
}
.modalContainer.excelresponseparser .dataset-quick-picks .quick-pick > .lead,
.sl-excelresponseparser .dataset-quick-picks .quick-pick > .lead {
	border-bottom: 2px solid transparent;
	display: inline-block;
}
.modalContainer.excelresponseparser .dataset-quick-picks .quick-pick:hover:not(.active) > .lead,
.sl-excelresponseparser .dataset-quick-picks .quick-pick:hover:not(.active) > .lead {
	border-bottom: 2px solid #f5f5f5!important;
}

.modalContainer.excelresponseparser .dataset-quick-picks .quick-pick.active,
.sl-excelresponseparser .dataset-quick-picks .quick-pick.active {
	color: #0b7bff;
}
.modalContainer.excelresponseparser .dataset-quick-picks .quick-pick.active > .lead,
.sl-excelresponseparser .dataset-quick-picks .quick-pick.active > .lead {
	border-bottom: 2px solid #007bff;
	display: inline-block;
	padding-right: 10px;
	font-weight: 500;
}
.modalContainer.excelresponseparser.sl-dataset-extraction label#label_value,
.sl-excelresponseparser label#label_value {
	display: none!important;
}
div.excelresponseparser.sl-dataset-extraction .sidebarArea input.waitingForInteraction,
.sl-excelresponseparser .sidebarArea input.waitingForInteraction {
	height: 50px!important;
}
.modalContainer.excelresponseparser.sl-dataset-extraction .responseEditor .col-md-12,
.sl-excelresponseparser .responseEditor .col-md-12 {
	padding: 0;
}
.sl-excelresponseparser .responseEditor .row {
	border: none!important;
	padding: 0!important;
	padding-left: 5px!important;
}



div.simlytiks div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs-horizontal {
	font-size: 1.2em;
}

/* placeholders */
div.simlytiks .ph-item {
	background: none!important;
	border: none!important;
}

div.simlytiks div.viewContent.pl-background-highlight {
	background-color: #428BCA;
	color: #FFF!important;
}

/* EXPLORE VIEW */
div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .viewContent {
	/*border: none!important;*/
}
/*div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .isEnlarged .viewContent {*/
/*	width: 100%!important;*/
/*}*/
div.simlytiks div.sl-main-window div.pages-container div.page-view[data-view="carousel"] .viewContent,
div.simlytiks div.sl-main-window div.pages-container .viewContent-carousel .viewContent {
	width: 100%;
	position: relative!important;
	left: 0!important;
	top: 0!important;
	height: 100%;
}

div.simlytiks .required_options_message {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
div.simlytiks .required_options_message img {
	max-height: 100%;
	max-width: 75%;
}
div.simlytiks .required_options_message img.isGIF {
	object-fit: scale-down;
}


/* WELCOME CONTAINER */
div.sl-welcome-container {
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2000;
}


/* data filter modal */
div.sl-data-filters .modal-header {
	background: #FFF;
}
div.sl-data-filters .filter-panel {
	border: 1px solid #DDD;
	margin: 7px 0;
	padding: 5px;
	border-radius: 5px;
	cursor: move;
	user-select: none;
}
div.sl-data-filters .filter-panel .filter-name {
	margin-bottom: 5px;
	font-size: 18px;
}
div.sl-data-filters .filter-panel .filter-type {
	font-size: 8px!important;
}
div.sl-data-filters .filter-panel-heading {
	display: flex;
	align-items: center;
}
div.sl-data-filters .filter-panel:hover {
	background: #f5f5f5;
}
div.sl-data-filters .filter-panel .filter-attrs {
	color: gray;
	margin: 0;
}
div.sl-data-filters .filter-panel .filter-options  button {
	border: none;
	box-shadow: none;
	text-shadow: none;
	color: gray;
	background: none;
}
div.sl-data-filters .filter-panel .filter-options  button:hover {
	background: #f5f5f5;
	color: steelblue;
}
div.sl-data-filters .filter-panel .filter-options  button:focus,
div.sl-data-filters .filter-panel .filter-options  button:active {
	outline: none!important;
}
div.sl-data-filters .bootstrap-select button:focus,
div.sl-data-filters .bootstrap-select button:active {
	outline: none!important;
}
/** Added by shashank2104 on 11/12/2025 at 11:14 PM - DW-2588 - Increase z-index for selectpicker dropdown container when appended to body **/
body > .bootstrap-select .dropdown-menu {
	z-index: 2000 !important;
}
div.sl-data-filters tr.filter-panel.ui-sortable-placeholder {
	visibility: visible!important;
	height: 80px;
	background: #f5f5f5;
	display: table-row!important;
}

div.sl-data-filters #filtersList li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 2px;
}
div.sl-data-filters .tab-content {
	padding: 0;
}
div.sl-data-filters .tab-content .tab-pane > .row {
	padding: 15px;
	border-bottom: 1px solid #DDD;
	margin: 0;
}
div.sl-data-filters .empty {
	display: none;
}
div.sl-data-filters.isEmpty .empty,
div.sl-data-filters.isEmpty .empty {
	display: flex;
	align-items: center;
	justify-content: center;
}
div.sl-data-filters.isEmpty .search-filters,
div.sl-data-filters.isEmpty .search-filters {
	opacity: 0.6;
	pointer-events: none;
}
div.sl-data-filters li {
	position: relative;
}
div.sl-data-filters li .edit_filter {
	opacity: 0;
	pointer-events: none;
}
div.sl-data-filters li.isediting .filter-name:after {
	content: '\f044';
	font-family: FontAwesome;
	margin-left: 2px;
	color: orange;
}
div.sl-data-filters li.isediting > a {
	color: orange;
}
div.sl-data-filters li:not(.isediting) .edit_filter {
	opacity: 1!important;
	pointer-events: all;
}
div.sl-data-filters .edit_filter:hover  {
	color: red;
}
div.sl-data-filters .remove_filter:hover {
	color: red;
}
div.sl-data-filters .filter-options > span {

	margin: 0 4px;
}

div.sl-data-filters .show_records {
	/*display: none;*/
}
div.sl-data-filters .datatable {
	margin: 0 15px;
	min-height: 1000px;
	max-height: 100%;
	display: none;
}
div.sl-data-filters .datatable .dataTables_scrollBody {
	overflow: hidden!important;
}
div.sl-data-filters .data-filters-body {
	/*height: auto!important;*/
}

div.sl-data-filters .modal-body > div {
	/*padding: 15px;*/
}
div.sl-data-filters .top-container {
	/*border-bottom: 1px solid #DDD;*/
}
div.sl-data-filters .count-container {
	/*display: none;*/
}
div.sl-data-filters .has_filters .count-container {
	display: block;
}
div.sl-data-filters .datafilters {
	width: 100%;
}
div.sl-data-filters .has_filters .datafilters {
	width: 75%;
}

div.sl-data-filters .sl-data-filters-body > div,
div.sl-schema-groups .sl-schema-groups-body > div {
	padding: 0 10px;
}
div.sl-schema-groups .sl-schema-groups-body .sl-sidebar-items {
	 height: calc(100% - 130px);
	 overflow: auto;
}




div.sl-filter-dataset .slickgrid_rendering_area .slick-header-column {
	border-bottom: none;
	margin-bottom: 3px;
}
div.sl-filter-dataset .checkbox {
	margin-top: 2px!important;
}
div.sl-filter-dataset .odd {
	background-color: #f9f9f9;
}
div.sl-filter-dataset .slickgrid_rendering_area .slick-row.grid-row-selected > * {
	background: #428bca!important;
	background-color: #428bca!important;
	color: #FFF!important;
}

div.sl-filter-dataset .large-data {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
}

div.sl-response-drop-alert-box {
	top: 0!important;
	left: 44%!important;
	transform: none!important;
}


div.simlytiks div.d3Panel .no_data {
	position: absolute;
	/*top: 50%;*/
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	font-size: 1.2em;
	font-weight: 500;
}


div.d3view-sl-tooltip .tooltip-arrow {
	border-top-color: #4f5359!important;
}
div.d3view-sl-tooltip .tooltip-inner {
	background-color: #4f5359;
	text-align: left;
	font-size: 14px;
}

div.sl-minimized-items {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 2px 10px;
	background: #FFF;
	border: 1px solid #DDD;
	border-radius: 5px;
	z-index: 2000000000;
}
div.sl-minimized-items .dropdown-menu {
	width: 250px;

}
div.sl-minimized-items .sl-name {
	display: inline-block;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
	top: 5px;
}


div.sl-modal-min .modal-content {
	display: flex;
	align-items: center;
	padding: 10px;
}
div.sl-modal-min .modal-content .sl-name {
	width: 200px;
	display: inline-block;
	font-size: 1.3em;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
}

div.sl-overlay-view {
	position: fixed;
	left: 50%;
	background-color: #FFF;
	border: 1px solid #DDD;
	top: 50%;
	width: 70%;
	height: 95%;
	transform: translate(-50%,-50%);
	border-radius: 5px;
}
div.sl-overlay-view > div {
	padding: 15px;
}

div.sl-overlay-view .remove-saved-color:hover {
	color: red;
}


div.sl-datamodel-alert {
	position: fixed;
	bottom: 50px;
	padding: 20px;
	right: 1%;
	width: 500px;
	margin-left: -250px;
	font-size: 12px;
	z-index: 2000;
	background: #FFF;
	box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
	border-color: #cdcdcd;
}
div.sl-datamodel-alert .fa-exclamation-circle {
	color: red;
}
div.sl-datamodel-alert p {
	/*font-size: 1.2em;*/
}
div.sl-datamodel-alert ol {
	/*font-size: 0.875rem;*/
	font-weight: 500;
	max-height: 200px;
	overflow: auto;
}
div.sl-datamodel-alert .close {
	position: relative;
	bottom: 15px;
	right: -10px;
}
div.sl-datamodel-alert .rectify-steps li i {
	margin-left: 4px;
}
div.sl-datamodel-alert .rectify-steps li.done {
	color: steelblue;
}


div.simlytiks[data-view="modern"] .sl-main-window .main-header {
	margin-bottom: 5px;
	margin-top: 4px;
	/*background: #FFF;*/
	border-radius: 5px;
}
/*div.simlytiks[data-view=modern] .sl-main-window .main-header .tab-manager {*/
/*	width: auto!important;*/
/*	flex: 1 1 auto;*/
/*}*/

/* EXPLORE VIEW */
div.simlytiks .sl-main-window .pages-container[data-view="modern"] .main-header {
	position: initial!important;
	top: unset!important;
	right: unset!important;
	display: flex;
	align-items: center;
	margin: 10px 0 0 0;
}
div.simlytiks .sl-main-window .page-nav-sections.open > a {
	border-radius: 4px!important;
	border: 1px solid #ddd!important;
	background-color: #eee!important;
}
div.simlytiks .sl-main-window .page-nav-sections > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
div.simlytiks .sl-main-window .main-header.hasSections .section-tabs {
	width: 250px;
}
div.simlytiks .sl-main-window .pages-container[data-view="modern"] .page-name-container {
	display: none!important;
}
div.simlytiks .sl-main-window .pages-container:not([data-view="classic"]) .page-options {
	/*justify-content: flex-end!important;*/
	margin: 5px 0;
	display: none;
}
/*div.simlytiks .sl-main-window .pages-container[data-view="modern"] .layout_dropdown .dropdown-menu {*/
/*	right: 0;*/
/*	left: auto;*/
/*}*/


div.sl-transformations-tpl .modal-body svg {
	width: auto!important;
}
div.sl-transformations-tpl .modal-body div.d3view-mini-workflow-ui .prev-panel.shown,
div.sl-transformations-tpl .modal-body div.d3view-mini-workflow-ui .next-panel.shown {
	opacity: 0!important;
	pointer-events: none;
}

div.sl-export-ppt .form-group {
	/*margin-bottom: 30px;*/
}
.sl-export-ppt .wm-preview {
	transform: none!important;
}
div.sl-export-ppt .slide-layouts div.item.active {
	display: flex;
	flex-wrap: wrap;

	/*background: #f5f5f5;*/
	margin: 0 auto;
	/*width: 90%;*/
	border-radius: 5px;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail.ui-selected .ppt-layout-box,
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail.ui-selecting .ppt-layout-box {
	background: var(--dt-selection-color);
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail.active .ppt-layout-box {
	border: 4px solid #428bca;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail .ppt-layout-box {
	margin: 8px;
	transition: opacity 0.4s ease;
	opacity: 1;
	cursor: pointer;
	padding: 4px;
	position: relative;
	border: 1px solid #DDD;
	width: 200px;
	height: 150px;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail {
	height: 200px;
	position: relative;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail .edit-btns {
	display: none;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail:hover .edit-btns {
	display: block;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail img {
	margin: 0 auto;
}
div.sl-export-ppt .ppt-layout-thumbnail span.remove_layout {
	position: absolute;
	top: -12px;
	right: -10px;
	color: #CCC;
	font-size: 1.3em;
	opacity: 0;
	cursor: pointer;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail.active ppt-layout-box:after {
	content: '\f00c';
	font-family: FontAwesome;
	position: absolute;
	right: 5px;
	bottom: 4px;
	pointer-events: none;
}

div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail .slide-name {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 30px);
	white-space: nowrap;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail.faded {
	opacity: 0.4;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail:hover {
	opacity: 1!important;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail:hover .remove_layout {
	opacity: 1!important;
}
div.sl-export-ppt .slide-layouts .ppt-layout-thumbnail:hover .remove_layout:hover {
	color: red!important;
}
div.sl-export-ppt .slide-layouts .ppt-inner-layout {
	border: 1px solid #DDD;
	margin: 5px;
	flex: 0 0 calc(33% - 10px);
	height: 150px;
}
div.sl-export-ppt .slide-layouts .ppt-inner-layout:hover {
	border-color: steelblue;
}
div.sl-export-ppt .slide-layouts .ppt-inner-layout.active {
	border: 2px solid steelblue!important;
}
div.sl-export-ppt .ppt-layout-thumbnail.layout-type-user .ppt-layout-box:before {
	content: '\f007';
	font-family: FontAwesome;
	position: absolute;
	left: -7px;
	top: -14px;
	z-index: 2;
	pointer-events: none;
}
div.sl-export-ppt .ppt-layout-thumbnail.layout-type-default .ppt-layout-box:before {
	content: '\f069';
	font-family: FontAwesome;
	position: absolute;
	left: -7px;
	top: -14px;
	z-index: 2;
	pointer-events: none;
}
div.sl-export-ppt .ppt-layout-thumbnail.layout-type-master .ppt-layout-box:before {
	content: '\f069';
	font-family: FontAwesome;
	position: absolute;
	left: -7px;
	top: -14px;
	z-index: 2;
	color: orange;
	pointer-events: none;
}


.sl-sidebar-items {
	display: flex;
	flex-wrap: wrap;
}
.sl-sidebar-item.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.sl-sidebar-item {
	border: 1px solid #ddd;
	padding-bottom: 16px;
	margin-top: 10px;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
}
.sl-sidebar-item.active:not(.disabled) {
	border-color: #428bca;
	background-color: #d3f4ff73;
}
.sl-sidebar-item:not(.disabled):not(.active):not(.no-hover):hover {
	/*border-color: #428bca;*/
	background-color: #f5f5f5;
}
.sl-sidebar-item .item-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	margin-top: 10px;
}
.sl-sidebar-item .item-caption h2 {
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	display: flex;
	align-items: center;
	height: 30px;
}
.sl-sidebar-item .item-desc {
	padding: 0 10px;
}
.sl-sidebar-item .item-desc p {
	margin: 0 0 5px;
	/*color: #4f5359;*/
	display: flex;
	align-items: center;
}
.sl-sidebar-item .item-desc .group-values {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


div.sl-layouts-container .layout-items {
	display: flex;
	flex-wrap: wrap;
}
div.sl-layouts-container .layout-item.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
div.sl-layouts-container .layout-item {
	border: 1px solid #ddd;
	padding-bottom: 16px;
	margin-top: 10px;
	border-radius: 8px;
	width: 100%;
	cursor: pointer;
}
div.sl-layouts-container .layout-item.active:not(.disabled) {
	border-color: #428bca;
	background-color: #d3f4ff73;
}
div.sl-layouts-container .layout-item:not(.disabled):not(.active):hover {
	/*border-color: #428bca;*/
	background-color: #f5f5f5;
}
div.sl-layouts-container .layout-item .layout-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
}
div.sl-layouts-container .layout-item .layout-caption h2 {
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 10px 0;
}
div.sl-layouts-container .layout-desc {
	padding: 0 10px;
}
div.sl-layouts-container .layout-desc p {
	margin: 0 0 5px;
	color: #4f5359;
}
div.layout-tooltip {
	z-index: 10000;
}


div.sl-header-center > * {
	margin-right: 12px;
}


/* responsive header */
@media screen and (max-width: 1024px) {
	div.simlytiks div.sl-header-center > * {
		margin-right: 0;
	}
	div.simlytiks .simlytiks-view > label {
		display: none;
	}
	div.simlytiks .data-metadata > * {
		margin-right: 0;
	}
	div.simlytiks .sl-header-txt {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	div.simlytiks .simlytiks-view {
		display: none!important;
	}
	div.simlytiks .sl-header-center, div.simlytiks .sl-header-right {
		padding: 0!important;
	}
	div.simlytiks .page-navigation {
		display: none!important;
	}
}

.btn-simlytiks:hover {
 	background: #d3f4ff73;
}


/* BLACK THEME */
 body.d3view-black div#simlytiks-modal * {
	 background: #000!important;
	 color: #FFF!important;
 }
body.d3view-black div#simlytiks-modal svg text {
	fill: #FFF!important;
}
body.d3view-black div.d3view-tooltip *,
body.d3view-black .dropdown:hover > a,
body.d3view-black .dropdown:hover > a > *,
body.d3view-black li:hover * {
	background: #FFF!important;
	color: #333!important;
}
.sl-breadcrumb {
	margin-bottom: 0;
	background: #FFF;
	padding-left: 0;
}
.sl-breadcrumb li a {
	color: #000;
}
.sl-breadcrumb li.active a {
	color: #428bca;
}

div.simlytiks .viewContent .viz-params-side-modal {
	position: absolute;
	right: 0;
	top: 0;
	width: 250px;
	background: #FFF;
	z-index: 2;
	border: 1px solid #DDD;
}
div.simlytiks .viz-options .option-group {
	height: 35px;
	text-align: center;
	flex: 1 1 33%;
	border: 1px solid #DDD;
	 display: flex;
	/* flex-wrap: wrap; */
	 align-items: center;
	justify-content: center;
	/* justify-content: start; */
	cursor: pointer;
	overflow: hidden;
	position: relative;
}
div.simlytiks .viz-options .option-group > a {
	padding: 5px 8px;
	color: dimgrey;
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
div.simlytiks .viz-options .option-group > a > i {
	margin-right: 3px;
}
div.simlytiks .viz-options .option-group .sort-group-fields {
	position: absolute;
	right: 3px;
	display: none;
}
div.simlytiks .viz-options .option-group.active .sort-group-fields {
	display: block;
}
div.simlytiks .viz-options .option-group .sort-group-fields:hover {
	color: red;
}
div.simlytiks .viz-options .option-group:not(.active):hover {
	background: #efefef;
}
div.simlytiks .viz-options .option-group.active {
	background: #d3f4ff73;
}
div.simlytiks .viz-options .option-groups {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 21px;
	padding: 0 6px;
	margin-top: 10px;
	height: 70px;
}
div.simlytiks .viz-options .option-group > a > div {
	font-size: 0.85em;
}

div.simlytiks .viz-params .list-param {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
div.simlytiks .list-param > label {
	display: flex;
	align-items: center;
	margin-right: 10px;
}
div.simlytiks .list-param input {
	margin-right: 5px;
}
/*div.simlytiks .viz-options .form-group:hover {*/
/*	background: #d3f4ff73;*/
/*	border-radius: 10px;*/
/*}*/

div.sl-media .images {
	overflow: auto;
}
div.sl-media .ui-layout-container > div:not(.ui-draggable) {
	height: 100%!important;
	background: #FFF!important;
	overflow: hidden!important;
}
div.sl-media .ui-layout-container .ui-layout-west {
	padding: 15px!important;
	padding-left: 0!important;
}
div.sl-media .modal-body {
	overflow: hidden;
}
div.sl-media .media-container {
	/*height: auto;*/
	width: 18%;
	margin: 10px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #DDD;
	padding: 10px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
div.sl-media .media-container.ui-selected {
	border-color: #428bca;
}
div.sl-media .media-container.hasAssignment {
	border-color: #5CB85C;
}
div.sl-media .media-container span.val {
	display: block;
	word-wrap: break-word;
	white-space: normal;
}

div.sl-media .media-container .img-caption {
	width: 100%;
}
div.sl-media div[data-key].ui-draggable.ui-draggable-dragging {
	background: #eee!important;
	padding: 6px 10px;
	border-radius: 6px;
	z-index: 10;
	height: auto!important;
	cursor: move!important;
}
div.sl-media div[data-key].ui-draggable.ui-draggable-dragging .count {
	display: none;
}
div.sl-media .media-container > div.img-wrapper {
	text-align: center;
	height: 75px;
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
div.sl-media .media-tags .label {
	margin: 0 5px;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.sl-media .media-container.over, div.sl-media .media-container:hover {
	background: #f5f5f5;
}
div.sl-media .media-container img {
	max-width: 100%;
	max-height: 100%;
}
.sl-media-label.ui-draggable-dragging {
	z-index: 2000;
}
div.sl-media .media-container .close {
	display: none;
	position: absolute;
	right: 11px;
	top: 14px;
	z-index: 2;
	transform: translate(25%, -50%);
	opacity: .4;
}
div.sl-media .sc-uniq-values [data-key] {
	padding: 2px 9px;
	background: #f5f5f5;
	margin: 6px 0;
	cursor: move;
	border-radius: 7px;
}
div.sl-media .media-container.isediting .close {
	display: block!important;
}
div.sl-media .media-container .remove-key {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	transform: translate(25%, -50%);
	opacity: .4;
	cursor: pointer;
}
div.sl-media .media-container .remove-key:hover {
	color: red;
}

/* Media mini */
div.sl-media.mini .media-tags .label {
	margin: 2px;
}
div.sl-media.mini .media-tags {
	flex-wrap: wrap;
}
div.sl-media.mini .media-container {
	width: calc(100% - 20px);
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper .sl-side-bar .sl-media.mini .media-configure {
	display: none;
}
div.sl-media.mini .media-container {
	width: 100%;
	margin: 10px;
	padding: 0;
}
div.media-container.ui-draggable-dragging {
	z-index: 3000;
}


/** schema editor mini **/
div.simlytiks .sl-sc-table.mini > .tab-content {
	padding: 0;
}
div.simlytiks .sl-sc-table.mini > .tab-content .schema-summary > span {
	display: block;
	font-size: 14px;
	margin-bottom: 3px;
}
div.simlytiks .sl-sc-table.mini > .tab-content span.summary-value {
	font-weight: bold;
}
/**
Permissions
 */
/*div.simlytiks-tab-pane[data-page-permissions="rp"] .edit-icons-container,*/
/*div.simlytiks-tab-pane[data-page-permissions="rp"] .dropdowns-list > li:not(.view_options) {*/
/*	display: none!important;*/
/*	pointer-events: none!important;*/
/*}*/
/*div.simlytiks-tab-pane[data-vis-permissions="rv"] .quick-edit,*/
/*div.simlytiks-tab-pane[data-vis-permissions="rv"] .panel-options .btn-group > *:not(.maximize-viz),*/
/*div.simlytiks-tab-pane[data-vis-permissions="rv"] .dropdowns-list > li:not(.view_options) {*/
/*	display: none!important;*/
/*	pointer-events: none!important;*/
/*}*/





/* SIMLYTIKS WORKFLOW */
div.simlytiks .sl-workflow {
	position: absolute!important;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0!important;
	visibility: hidden;
	transition: none!important;

}

div.simlytiks .sl-name {
	color: inherit;
	text-decoration: none;
}
div.simlytiks .sl-workflow.shown {
	visibility: visible!important;
}

div.sl-viz-import .viz-items li {
	padding: 10px 15px;
}
div.sl-viz-import.progress {
	cursor: progress;
}
div.sl-sort-order .orders > .label {
	margin: 4px;
	cursor: pointer;
}
div.sl-sort-order .orders li.ui-sortable-helper {
	background: #f5f5f5;
}
div.sl-sort-order .orders li.ui-sortable-placeholder {
	background: lightyellow;
}

/* PAINT BOARD */
div.simlytiks .toggled_for_preview .paintboard {
	/*display: none;*/
	z-index: 2;
	pointer-events: none;
}
div.simlytiks div.viewContent .paintboard {
	z-index: 2;
	pointer-events: none;
}
div.simlytiks div.vizviewContainer.paintboard .paintboard {
	z-index: 2;
	pointer-events: all!important;
}
div.simlytiks div.vizviewContainer.paintboard .paintboard .settings-header {
	top: -40px!important;
}
div.simlytiks div.vizviewContainer.paintboard .paintboard canvas {
	border: 1px solid #DDD;
}
div.simlytiks div.vizviewContainer.paintboard .panel-options,
div.simlytiks div.vizviewContainer.paintboard .floating {
	display: none!important;
}

/*div.simlytiks div.vizviewContainer:not(.paintboard) .paint-board-wrapper .paint-board-nav {*/
/*	display: none!important;*/
/*}*/

div.simlytiks div.viewContent .animation-title {
	position: absolute;
	top: 0;
	margin-bottom: 0;
	/*left: 120px;*/
}

div.simlytiks.sl-time-machine {
	width: 100%;
	height: 100%;
	/*display: flex;*/
	/*color: #FFF;*/
	position: fixed;
	left: 0;
	top: 0;
	background: transparent!important;
	backdrop-filter: blur(5px);
}
div.sl-time-machine .d3view-no-data {
	color: #FFF;
}
div.sl-time-machine .tm-panels.fetched .tm-panel {
	/*width: 400px;*/
	/*margin: 10px;*/
	/*height: 250px;*/
	/*background: #DDD;*/
	/*border-color: #DDD;*/
	position: absolute;
	transition: top 0.3s ease-in, left 0.3s ease-in, width 0.3s ease-in;
}
div.sl-time-machine .tm-panel.current .modal-header {
	background: #667db6!important;
	background: -webkit-linear-gradient(to bottom,#667db6,#0082c8,#0082c8,#667db6)!important;
	background: linear-gradient(to bottom,#667db6,#0082c8,#0082c8,#667db6)!important;
	color: #fff!important;
	border-radius: 0;
	background: #457fca!important;
	background: -webkit-linear-gradient(to bottom,#5691c8,#457fca)!important;
	background: linear-gradient(to bottom,#5691c8,#457fca)!important;
	background: -moz-linear-gradient(to bottom,#5691c8,#457fca)!important;
	background: -ms-linear-gradient(to bottom,#5691c8,#457fca)!important;
	color: #FFF!important;
}
div.sl-time-machine .tm-panel.current .modal-header .modal-title {
	color: #FFF!important;
}
div.sl-time-machine .tm-panels.fetched .tm-panel:not(.active) .modal-header {
	cursor: pointer;
}
div.sl-time-machine .tm-panels.fetched .tm-panel:not(.active) .modal-header:hover {
	background: #eee!important;
}
div.sl-time-machine .tm-panels.fetched .tm-panel .modal-header #view_dataset {
	opacity: 0;
	pointer-events: none;
}
div.sl-time-machine .tm-panels.fetched .tm-panel .modal-header #view_dataset:hover {
	color: steelblue;
}

div.sl-time-machine .tm-panels.fetched .tm-panel .modal-header:hover #view_dataset {
	opacity: 1;
	pointer-events: all;
}

div.sl-time-machine .viz-timeline {
	fill: #FFF;
}
div.sl-time-machine .viz-timeline .histogram g.active rect {
	fill: #457fca!important;
}
div.sl-time-machine .viz-timeline .histogram rect {
	fill: #f5f5f5!important;
}
div.sl-time-machine .viz-timeline .histogram text {
	fill: #333;
}
div.sl-time-machine .viz-timeline .histogram g.active text {
	fill: #fff;
}
/*div.sl-time-machine .mouseover .panel {*/
/*	opacity: 0.1!important;*/
/*	z-index: 2!important;*/
/*}*/
div.sl-time-machine .tm-panel.hovered {
	opacity: 1!important;
	/*z-index: 12!important;*/
}
div.sl-time-machine .tm-panel.hovered .panel-heading {
	cursor: pointer;
	background-color: #eee;
	color: steelblue;
}
div.sl-time-machine .tm-panel.clicked {
	z-index: 12!important;
}
div.sl-time-machine .tm-panel.selected {
	border-color: #428bca;
}
div.sl-time-machine .tm-panel .panel-body .d3view-no-data {
	display: none;
}
div.sl-time-machine .tm-panel.selected .panel-body .d3view-no-data {
	display: block!important;
	color: dimgrey!important;
}
div.sl-time-machine .item[data-id="data-ops"] {
	width: 70%;
	margin: 0 auto;
}
div.sl-time-machine .item[data-id="preview"] {
	width: 75%;
	margin: 0 auto;
	padding: 20px;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
div.sl-time-machine #timeline {
	border: none!important;
}
.sl-time-machine .ui-layout-pane {
	background: transparent!important;
	/*overflow: auto!important;*/
}
.sl-time-machine .ui-layout-pane #panels .modal {
	position: absolute;
}
div.sl-time-machine li.timeline-item {
	margin: 10px 0;
}
div.sl-time-machine li.timeline-item:hover > a {
	color: orange!important;
}
div.sl-time-machine li.timeline-item:hover .tl-box svg rect {
	fill: orange!important;
}
div.sl-time-machine #timeline li.timeline-item > a {
	color: #FFF;
}
div.sl-time-machine li.timeline-item .tl-label {
	flex: 1 1 50%;
}
div.sl-time-machine li.timeline-item .tl-box {
	text-align: center;
}
/*div.sl-time-machine .tm-options {*/
/*	opacity: 0.3;*/
/*	transition: opacity 0.4s ease-in;*/
/*}*/
/*div.sl-time-machine [data-id]:hover .tm-options {*/
/*	opacity: 1!important;*/
/*}*/

/* import dataset */
div.sl-import-dataset #sl-import-carousel .item {
	overflow: auto;
}
/*div.sl-import-dataset .import-parsing-options {*/
/*	display: flex;*/
/*}*/
div.sl-import-dataset .import-parsing-options > div > div:first-child {
	margin-left: 0;
}
div.sl-import-dataset .import-parsing-options > div > div {
	flex: 1 1 33%;
	margin: 0 8px;
}
.sl-import-dataset .vm-column-map .label {
	margin: 4px;
}

.sl-import-dataset fieldset legend {
	border: 0;
	border-bottom: 1px solid #e5e5e5;
	display: block;
	padding-inline-start: 2px;
	padding-inline-end: 2px;
	border-width: initial;
	border-style: none;
	border-color: initial;
	border-image: initial;
	margin-bottom: 0;
	width: auto;
	font-size: 18px;
}
.sl-import-dataset fieldset {
	display: block;
	margin-inline-start: 2px;
	margin-inline-end: 2px;
	padding-block-start: 0.35em;
	padding-inline-start: 0.75em;
	padding-inline-end: 0.75em;
	padding-block-end: 0.625em;
	min-inline-size: min-content;
	border-width: 2px;
	border-style: groove;
	border-image: initial;
}
div.sl-import-dataset #sl-import-carousel .item[data-id="schema_mappings"] table th:first-child {
	width: 20%;
}

div.sl-import-dataset #sl-import-carousel .item[data-id="schema_mappings"] table img {
	width: auto;
	display: inline-block;
}
.sl-import-dataset .schema-list .media-item img {
	height: 70px;/* width: 70px; */
	margin: 0 auto;/* width: 20px; */
}

.sl-import-dataset .schema-list .image-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.sl-import-dataset .schema-list .image-gallery .media-item {
	margin: 10px;
	text-align: center;
	justify-content: flex-start;
}
.sl-import-dataset .schema-list .rm-map {
	cursor: pointer;
	color: gray;
}
.sl-import-dataset .schema-list .rm-map:hover {
	color: red;
}
.sl-import-dataset .schema-list .g-item {
	margin-bottom: 5px;
}
.sl-import-dataset .vm-field {
	display: flex;
	align-items: center;
}

.sl-import-dataset .vm-field > label {
	flex: 0 0 15%;
}
.sl-import-dataset .match-maker .to-item,
.sl-import-dataset .viz-summary-table {
	font-size: 1.2em;
}
.sl-import-dataset .import-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.sl-import-dataset .import-types > .import-type {
	padding: 2px;
	border: 2px solid #ebebeb;
	text-align: center;
	width: calc(100% / 2);
	cursor: pointer;
	display: flex;
	align-items: center;
	margin: 20px!important;
	width: calc(50% - 40px)!important;
	font-size: 1.2em;
	border-radius: 6px;
}
.sl-import-dataset .import-types > .import-type.active {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
.sl-import-dataset .import-types > .import-type .item-img {
	height: 150px;
}
.sl-import-dataset .import-types > .import-type .item-icon {
	font-size: 7em!important;
}
.sl-import-dataset .viz-summary-table td {
	vertical-align: middle;
}

	/* import assets */
div.sl-import-assets li:not(.selected) .btn-group {
	opacity: 0.3;
	position: absolute;
	right: 20px;
	top: 10px;
}
div.sl-import-assets .modal-body ul > li[data-id] .arrow {
	transition: transform 0.3s ease-in;
}
div.sl-import-assets .modal-body ul > li[data-id].selected .arrow {
	transform: rotate(90deg);
}
div.sl-import-assets li:hover .btn-group {
	opacity: 1!important;
}
div.sl-import-assets .image-gallery {
	display: flex;
	/*align-content: center;*/
	flex-wrap: wrap;
}
div.sl-import-assets .ds-info div[class*=gallery] {
	max-height: 250px;
	overflow: auto;
	min-height: 70px;
}
div.sl-import-assets .assets-list {
	box-shadow: none;
}
div.sl-import-assets .assets-list > li {
	border: none;
}
div.sl-import-assets .assets-list .import_all {
	display: none;
}
div.sl-import-assets .assets-list li.selected .import_all {
	display: inline-block;
}
div.sl-import-assets .image-gallery .media-item {
	width: 130px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #DDD;
	text-align: center;
	border-radius: 4px;
	transition: box-shadow 0.4s ease-in;
	position: relative;
	cursor: pointer;
}
div.sl-import-assets div[class*=gallery] .g-item {
	padding: 5px;
	position: relative;
	cursor: pointer;
}
div.sl-import-assets div[class*=gallery] .g-item:hover {
	background-color: #f1f3f4;
}
div.sl-import-assets div[class*=gallery] .g-item .options-group {
	opacity: 0;
}
div.sl-import-assets div[class*=gallery] .g-item:hover .options-group {
	opacity: 1!important;
}
div.sl-import-assets div[class*=gallery] .g-item.ui-selecting,
div.sl-import-assets div[class*=gallery] .g-item.ui-selected {
	background: var(--dt-selection-color);
}
div.sl-import-assets div[class*=gallery] .media-item.ui-selecting,
div.sl-import-assets div[class*=gallery] .media-item.ui-selected {
	border: 1px solid #428bca;
	box-shadow: 2px 2px 5px #ddd;
}
div.sl-import-assets div[class*=gallery] .imported {
	/*border: 1px solid #5c8b5c;*/
}
div.sl-import-assets div[class*=gallery] .imported:after {
	content: '\f00c';
	font-family: FontAwesome;
	position: absolute;
	bottom: 0;
	right: 3px;
	color: #5c8b5c;
}

div.sl-custom-groups .custom-groups-list {
	display: flex;
	flex-wrap: wrap;
	overflow: auto;
}
div.sl-custom-groups .custom-groups-list .panel {
	margin: 10px;
	width: 30%;
	cursor: move;
}
div.sl-custom-groups .custom-groups-list .panel .panel-body {
	padding: 0;
	overflow-x: hidden!important;
}
div.sl-custom-groups .custom-groups-list .panel .panel-body ul {
	min-height: 50px;
	box-shadow: none;
}
div.sl-custom-groups .custom-groups-list .panel .panel-body li {
	border-left: none;
	border-right: none;
}
div.sl-custom-groups .custom-groups-list .panel .panel-body li:last-child {
	border-bottom: none;
}

div.sl-custom-groups .custom-groups-list .panel .panel-title {
	cursor: pointer;
}
div.sl-custom-groups .custom-groups-list .panel .panel-title .editable {
	background-color: transparent!important;
}
div.sl-custom-groups .custom-groups-list .panel .panel-title:hover .editable {
	color: steelblue!important;
}
/*@media screen and (max-resolution: 110dpi) {*/
/*	body {*/
/*		font-family: arial,sans-serif;*/
/*	}*/
/*}*/

div.simlytiks #schema-groups .col-groups {
	border-bottom: 1px solid #DDD;
	padding-bottom: 10px;
	margin-bottom: 0;
}
div.simlytiks #schema-groups .col-groups .col-group-panels .groups-list {
	border: none!important;
}

div.response-preview-modal .steps .responses-list > li > a {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 0 15px;
}
div.response-preview-modal .steps .responses-list > li:hover, div.response-preview-modal .steps .responses-list > li.active {
	background-color: #428bca;
}
div.response-preview-modal .steps .responses-list > li:hover a, div.response-preview-modal .steps .responses-list > li.active a {
	color: #FFF;
}

div.simlytiks .custom-sort-list div.sortable-container div.container-body div.list-group-item {
	cursor: move;
}

/** Dynamic options **/
div.simlytiks div.viewContent[data-dynamic-option-view="vr"] .vizviewPanel > .panel-body {
	display: flex;
}
div.simlytiks div.viewContent[data-dynamic-option-view="vr"] .dynamic-options {
	width: 250px;
	top: -8px;
	position: relative;
}
div.simlytiks div.viewContent[data-dynamic-option-view="vr"] .dynamic-options .viz-preview-tabs {
	height: calc(100% - 100px);
	overflow: auto;
}
div.simlytiks div.viewContent[data-dynamic-option-view="hr"] .vizContainer {
	/*display: block!important;*/
}
div.simlytiks div.viewContent .dynamic-options .tab-pane,
div.simlytiks div.viewContent .dynamic-options .viz-options,
div.simlytiks div.viewContent .dynamic-options .viz-params {
	height: auto!important;
	max-height: inherit!important;
}
/*div.simlytiks div.viewContent[data-dynamic-option-view="hr"] .dynamic-options*/
div.simlytiks div.viewContent[data-dynamic-option-view="hr"] .dynamic-options .viz-params {
	max-height: 200px!important;
}
div.simlytiks div.viewContent[data-dynamic-option-view="hr"] .dynamic-options .viz-params {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks div.viewContent[data-dynamic-option-view="hr"] .dynamic-options .viz-params > .form-group {
	max-width: 50%;
}
div.simlytiks div.viz-settings.viz-params {
	height: auto!important;
	overflow: inherit!important;
}
div.simlytiks div.dynamic-options .dynamic_option_edit {
	opacity: 0;
	cursor: pointer;
	color: steelblue;
}
div.simlytiks div.dynamic-options > h3:hover .dynamic_option_edit {
	opacity: 1!important;
}

div.popover.sl-viz-info-popover {
	position: fixed;
	top: 0!important;
	height: 100%;
	width: 50%;
	max-width: unset;
	margin-left: 20px;
}
div.popover.sl-viz-info-popover .popover-content {
	height: calc(100% - 60px);
	overflow: auto;
	max-width: unset;
	max-height: unset;
}

/**
Dynamic data container
 */
div.simlytiks .sl-main-window .dynamic-data {
	height: 30px;
	width: calc(100% - 60px);
}
div.simlytiks[data-management="standalone"] .sl-main-window[data-standalone-responses="inline"]:not(.hasDynamicDataOpen) .sl-main-content {
	height: calc(100% - 35px)!important;
}
div.simlytiks .sl-main-window .dynamic-data.open {
	border: 1px solid #DDD;
	height: 250px;
	padding-bottom: 10px;
	top: 0!important;
}
div.simlytiks .sl-main-window .dynamic-data:not(.open) .ds-container {
	display: none;
}
div.simlytiks .sl-main-window .dynamic-data > div {
	padding: 5px 10px;
}
div.simlytiks .sl-main-window .dynamic-data.open .ds-container {
	/*position: absolute;*/
	/*bottom: 0;*/
	/*height: 250px;*/
	/*overflow: auto;*/
	/*width: 100%;*/
}
div.simlytiks .dynamic-data table tbody tr {
	cursor: grab;
}
div.dt-drag-row-html {
	z-index: 3000;
}


/* simlytiks filters carousel */
.sl-filters-carousel .sl-filters {
	/*display: flex;*/
	justify-content: center;
}
.sl-filters-carousel .sl-filters .sl-filter {
	margin: 0 12px;
	/*width: 31%;*/
	flex-grow: 1;
	flex-shrink: 0;
	width: calc(33% - 24px);
	float: left;
}
.sl-filters-carousel .sl-filters .sl-filter > label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1em;
}

.sl-filters-carousel .dropdown-menu {
	width: 30vw;
	height: 400px;
}
@media screen and (max-width: 1000px) {
	.sl-filters-carousel .dropdown-menu {
		width: 60vw;
	}
}
@media screen and (max-width: 1500px) {
	.sl-filters-carousel .dropdown-menu {
		width: 50vw;
	}
}
.sl-filters-carousel a.carousel-control {
	background: none!important;
	color: #000;
	width: 10%;
}
.sl-filters-carousel .sc-uniq-values {
	height: calc(100% - 50px);
}
.sl-filters-carousel .sc-uniq-values [data-key] {
	cursor: pointer;
}


/**
Dark theme
 */
/**
all but paintboard
 */
body[data-theme="dark"] *:not(text):not(span):not(.paintboard):not(.paintboard *):not(.modal-backdrop):not(.modal):not(.btn-default):not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger):not(svg.chart-gridlines):not(svg.chart-gridlines *):not(.fa):not(.fas):not(.color-rect):not(.d3view-plugins-backdrop):not(.colorpicker.dropdown-menu):not(.colorpicker.dropdown-menu *):not(.img-container) {
	background-color: var(--dark-background-color) !important;
}
body[data-theme="dark"] canvas.bubble-canvas {
	z-index: 20!important;
}
body[data-theme="dark"] .dropdown-menu>li>a:hover {
	color: #FFF!important;
	background: #f1f3f4!important;
}
/**
modals
 */
/*body[data-theme="dark"] * {*/
/*	background-color: var(--dark-background-color) !important;*/
/*}*/
/*!***/
/*buttons*/
/* *!*/
/*body[data-theme="dark"] *:not(.btn-default):not(.btn-primary):not(.btn-success):not(.btn-warning):not(.btn-danger) {*/
/*	background-color: var(--dark-background-color) !important;*/
/*}*/
/*!***/
/*grid-lines SVG*/
/* *!*/
/*body[data-theme="dark"] *:not(svg.chart-gridlines):not(svg.chart-gridlines *) {*/
/*	background-color: var(--dark-background-color) !important;*/
/*}*/
/*!***/
/*fa icons*/
/* *!*/
/*body[data-theme="dark"] *:not(.fa):not(.fas) {*/
/*	background-color: var(--dark-background-color) !important;*/
/*}*/

/**
all
 */

body[data-theme="dark"] * {
	color: var(--dark-text-color);
	background-image: none!important;
	text-shadow: none!important;
	/*stroke: var(--dark-text-color)!important;*/
}
body[data-theme="dark"] .legends_opacity {
	display: none;
}
body[data-theme="dark"] *:not(.modal-backdrop):not(.modal):not(.fa):not(.fas):not(span):not(.color-rect):not(.d3view-plugins-backdrop):hover {
	background-color: var(--dark-hover-background-color);
}
body[data-theme="dark"] .btn-outline-on-hover {
	background-color: var(--dark-background-color);
	color: var(--dark-text-color);
}
body[data-theme="dark"] .btn:hover {
	color: var(--dark-text-color);
}
body[data-theme="dark"] .btn-outline-on-hover:hover {
	background-color: var(--dark-background-color)!important;
}
body[data-theme="dark"] div.d3view-plugin-header .dropdowns-list li.dropdown > a:not(.btn),
body[data-theme="dark"] .dropdown-menu>li>a,
body[data-theme="dark"] div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs > li > a .tab-name,
body[data-theme="dark"] div.d3view-tab-manager a.add_tab,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .nav-tabs > li>a,
body[data-theme="dark"] div.d3view-legends-container .legends-label {
	color: #FFF!important;
}
body[data-theme="dark"] div.d3view-legends-container.bottom-legends .legend-header .legend-container-options,
body[data-theme="dark"] div.d3view-legends-container.top-legends .legend-header .legend-container-options {
	background-color: none!important;
}
body[data-theme="dark"] div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .column-pie,
body[data-theme="dark"] div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .drag_handle,
body[data-theme="dark"] div.simlytiks .sl-side-bar div.responses-panel ul.list-group li.list-group-item:hover .preview_response {
	color: #FFF!important;
}

body[data-theme="dark"] .btn-default,
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-success,
body[data-theme="dark"] .btn-warning,
body[data-theme="dark"] .btn-danger {
	background: var(--dark-button-background-color)!important;
	color: var(--dark-text-color)!important;
	text-shadow: none !important;
	background-image: none!important;
}
body[data-theme="dark"] .btn-default:hover,
body[data-theme="dark"] .btn-primary:hover,
body[data-theme="dark"] .btn-success:hover,
body[data-theme="dark"] .btn-warning:hover,
body[data-theme="dark"] .btn-danger:hover {
	background: var(--dark-hover-background-color)!important;
}
body[data-theme="dark"] text {
	fill: var(--dark-text-color)!important;
}
body[data-theme="dark"] rect.transparent-background:hover {
	fill: var(--dark-background-color)!important;
}
body[data-theme="dark"] .dropdown-menu {
	border: 1px solid var(--dark-text-color);
}
body[data-theme="dark"] .dropdown.open > .dropdown-toggle,
body[data-theme="dark"] .dropdown.open > [data-toggle="dropdown"],
body[data-theme="dark"] .dropdown-menu > li > a:hover {
	background-color: var(--dark-background-color)!important;
}
body[data-theme="dark"] div.simlytiks .mainPanel .sl-charts-container[data-view="list"] li.charts-list-item .viz-description,
body[data-theme="dark"] div.simlytiks .sl-charts-container[data-view="list"] .charts-list .charts-list-item .viz-name {
	color: unset;
}

/**
Page Sorter
 */
div.simlytiks.pagesorter_enabled .sl-page-sorter {
	display: block!important;
}
div.simlytiks.pagesorter_enabled .slides-view-options [data-id="notes"],
div.simlytiks.pagesorter_enabled .slides-view-options [data-id="comments"],
div.simlytiks.pagesorter_enabled .vis_options,
div.simlytiks.pagesorter_enabled .ml_charts {
	display: none!important;
}
div.simlytiks.pagesorter_enabled .slBody > *:not(.slides-view-options) {
	display: none;
}
div.simlytiks label.pgs-label {
	padding: 10px;
}
div.simlytiks button.page-sorter {
	position: absolute;
	right: 10px;
	top: 4px;
}

/* Slide Show */
div.simlytiks-outer-container.slideshow_enabled div.simlytiks[data-view="slides"] .sl-main-window .pages-container {
	position: fixed!important;
	left: 0;
	top: 0;
	width: 100%!important;
	height: 100%!important;
	background: #4f5359;
	z-index: 200!important;
}
div.simlytiks-outer-container.slideshow_enabled div.simlytiks[data-view="slides"] .sl-main-window .pages-container .page-options {
	display: none!important;
}
div.simlytiks-outer-container.slideshow_enabled div.simlytiks[data-view="slides"] .sl-main-window .pages-container .page-container {
	display: none!important;
	margin: 0 auto!important;
	width: 70%!important;
	height: calc(100% - 100px)!important;
	position: relative!important;
	top: 10px!important;
}
div.simlytiks-outer-container.slideshow_enabled div.simlytiks[data-view="slides"] .sl-main-window .pages-container .page-container.active {
	display: block!important;
}
div.simlytiks-outer-container.slideshow_enabled div.simlytiks[data-view="slides"] .sl-main-window .pages-container .page-container[data-hidden="true"] {
	display: none!important;
}
div.simlytiks-outer-container.slideshow_enabled .simlytiks-nav-tabs,
div.simlytiks-outer-container.slideshow_enabled .model-info,
div.simlytiks-outer-container.slideshow_enabled .floating-btn,
div.simlytiks-outer-container.slideshow_enabled .panel-options,
div.simlytiks-outer-container.slideshow_enabled .sl-side-bar,
div.simlytiks-outer-container.slideshow_enabled .legend-item .legend-options,
div.simlytiks-outer-container.slideshow_enabled .sl-utils,
div.simlytiks-outer-container.slideshow_enabled .sl-side-bar-container {
	display: none!important;
}
div.simlytiks-outer-container.slideshow_enabled .vizviewPanel > .panel-heading {
	pointer-events: none!important;
}
div.simlytiks-outer-container.slideshow_enabled .slideshow-options {
	position: fixed;
	z-index: 200;
	bottom: 0;
	left: 15%;
	width: 70%;
	height: 50px;
	margin: 0 auto;
}


div.simlytiks .data-targets .data-filters-body {
	height: 100%!important;
}
div.simlytiks .data-targets .data-filters-footer {
	display: none;
}


/** Reset heights based on calc **/
div#simlytiks-modal div.simlytiks[data-view="classic"] .sidebar-body .pages-panel-container,
div#simlytiks-modal div.simlytiks[data-view="classic"] .sidebar-body .responses-panel {
	height: calc((100vh - 130px) * 0.5)!important;
}
div#simlytiks-modal div.simlytiks[data-view="modern"] .sidebar-body .responses-panel {
	height: calc(100vh - 130px)!important;
}
div#simlytiks-modal .sidebar-body div.responses-panel .list-group {
	height: calc(100% - 53px)!important;
}
div#simlytiks-modal .sidebar-body div.responses-panel.search_open .list-group {
	height: calc(100% - 87px)!important;
}
div#simlytiks-modal div.simlytiks[data-view="slides"] .sidebar-body .pages-panel-container {
	height: calc(100vh - 130px)!important;
}
div.simlytiks[data-view="slides"] .sl-main-window .pages-container::-webkit-scrollbar {
	display: none;
}

.sl-dashboard .col-pie {
	width: calc(50% - 40px);
	margin: 0 20px 20px;
	box-shadow: var(--plugin-box-shadow-lighter);
}
.sl-dashboard .sparkline-table tr {
	cursor: pointer;
}
.sl-dashboard .sparkline-table tr.active th:first-child {
	color: steelblue;
}

.sl-image-gallery-picker .media-container {
	display: flex;
	flex-wrap: wrap;
}
.sl-image-gallery-picker .media-container .img-container {
	position: relative !important;
	margin: 5px;
	border: 1px solid #DDD;
	width: calc(25% - 10px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 120px;
}
.sl-image-gallery-picker .media-container .img-container img {
	opacity: 1!important;
	height: 75px;
}
.sl-image-gallery-picker .media-container .img-container .media-name {
	margin-bottom: 5px;
}
.sl-image-gallery-picker .media-container > .img-container.ui-selected,
.sl-image-gallery-picker .media-container > .img-container.ui-selecting {
	border-color: #428bca;
	border-width: 3px;
	box-shadow: var(--plugin-box-shadow-lighter);
}


div.simlytiks div.page-container[data-columns="dashboard"] .floating-btn {
	display: none;
	width: 60px;
	height: 60px;
	pointer-events: none;
	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
	/* writing-mode: vertical-lr; */
	/*transform: rotate(-45deg);*/
	/*background: #f5f5f5;*/
	/*padding: 10px 15px;*/
	/*border: 1px solid #DDD;*/
	/*border-right: none;*/
	cursor: pointer;
}
div.simlytiks div.page-container[data-columns="dashboard"] .edit-dashboard:after {
	content: '\f303';
	font-family: 'FontAwesome';
	position: absolute;
	top: 5px;
	left: 10px;
}

div.simlytiks div.page-container[data-columns="dashboard"] .floating-btn.top {
	background: linear-gradient(to top left, transparent 50%, #f5f5f5 50%);
}

div.simlytiks div.page-container[data-columns="dashboard"][data-mode="view"]:hover .floating-btn {
	display: flex!important;
	align-items: center;
	justify-content: center;
	pointer-events: all!important;
}

div.simlytiks img.loading {
	background: none!important;
}


div.simlytiks #viz_preview_options div#guide-carousel .carousel-indicators li {
	width: auto;
	height: auto;
	border: none;
	background: none;
	font-size: 1.4em;
	margin: 0 5px;
	padding: 0 10px;
	text-indent: unset;
}
div.simlytiks #viz_preview_options div#guide-carousel .carousel-indicators li:not(.active):hover {
	background: #efefef;
}
div.simlytiks #viz_preview_options div#guide-carousel .carousel-indicators li.active {
	background: #d3f4ff73;
}


div.simlytiks .viz-params .sl-colors-customization .hasPopoverOpen [data-toggle="popover"] {
	background: #f1f3f4;
}

div.simlytiks .viz-params .sl-colors-customization .cl-list li {
	cursor: move;
}
div.simlytiks .viz-params .param-slider .ui-slider-handle {
	width: 25px;
	height: 23px;
	/* padding: 10px; */
}

/*div.popover.sl-color-palette-popover {*/
/*	min-height: 200px;*/
/*}*/
/*div.popover.sl-color-palette-popover .popover-content {*/
/*	padding: 0;*/
/*}*/

div.sl-color-palette-modal .colors-palette ul,
div.sl-color-palette-modal table ul {
	display: flex;
	flex-wrap: wrap;
	box-shadow: none;
}
div.sl-color-palette-modal table ul {
	box-shadow: none;
	margin-bottom: 0;
}
.sl-color-palette-modal tr.isEditing td:first-child {
	border-left-color: orange;
	border-left-width: 4px;
}
.sl-color-palette-modal tr.isEditing .colors-hist {
	height: 200px;
}
.sl-color-palette-modal .cl-list > ul {
	display: block;
}

.sl-color-palette-modal tr td {
	vertical-align: middle!important;
}
div.sl-color-palette-modal table ul li .plugin-cp {
	cursor: default;
}
div.sl-color-palette-modal ul > li {
	margin: 8px;
	cursor: pointer;
	border: none;
}

div.sl-reporter-viz-edit #viz_preview_options {
	width: 24%;
}

/** NEW - Simlytiks Nav Menu **/
div.simlytiks .slBody.mainPanel .sl-nav-menu-container {
	display: flex;
	height: 100%;
}

/** DVFIV-1956 vertical rail + resize: see sl-vertical-nav-rail.css (linked from simlytiks index.html) **/

div.simlytiks .sl-side-bar-container .close_wrapper {
	display: none;
}
div.simlytiks .sl-side-bar-container .floating-container-header {
	display: none;
}

/** Added by shashank2104 on 03/29/2026 - DVFIV-1956 - Classic UI theme: original left nav (no vertical resize rail) **/
div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu {
	width: 50px;
	background-color: #f1f3f4;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
}
div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul {
	margin: 0 4px;
}
div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li {
	border-left: 3px solid transparent!important;
	border-top: none;
	border-bottom: none;
	border-radius: 5px;
	width: 40px;
	height: 40px;
	margin: 2px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.1s linear;
}
div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li:hover {
	background-color: #FFF!important;
}
div.simlytiks:not(.hideSidebar):not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li.open .fa-solid,
div.simlytiks:not(.hideSidebar):not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li.open .fas {
	color: steelblue;
}

div.simlytiks[data-view="dashboard"] .sl-side-bar-container {
	display: none;
}
div.simlytiks[data-view="dashboard"] .pages-container {
	height: calc(100% - 35px);
}
div.simlytiks[data-view="dashboard"] .page-container .sl-page .sl-page-tabs {
	display: none;
}
div.simlytiks[data-view="dashboard"] .page-container[data-has-dashboard-viz="false"] {
	display: none!important;
}
div.simlytiks:not(.hasFixedContainer)[data-view="dashboard"] div.viewContent:not(.enabled):hover .floating-btn {
	display: none!important;
}
div.simlytiks[data-view="dashboard"] .vis_options,
div.simlytiks[data-view="dashboard"] .ml_charts,
div.simlytiks[data-view="dashboard"] .viz-title,
div.simlytiks[data-view="dashboard"] .vis-bottom-tags,
div.simlytiks[data-view="dashboard"] .vis-sticky-btn-group {
	display: none!important;
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Hide Add Visualization / Run ML pills in Advanced Dashboard regardless of uiTheme (classic header pills, modern .sl-modern-header pills, and ML queue dropdown) **/
div.simlytiks.sl-view-advanced-dashboard .vis_options,
div.simlytiks[data-view="advanced-dashboard"] .vis_options,
div.simlytiks.sl-view-advanced-dashboard .ml_charts,
div.simlytiks[data-view="advanced-dashboard"] .ml_charts,
div.simlytiks.sl-view-advanced-dashboard .ml-queue-dropdown,
div.simlytiks[data-view="advanced-dashboard"] .ml-queue-dropdown {
	display: none !important;
}
div.simlytiks[data-view="dashboard"] .vizviewContainer > .vizviewPanel > .panel-heading {
	display: none!important;
}
div.simlytiks[data-view="dashboard"]  .d3view-plugin-header {
	height: auto;
	border-bottom: none!important;
}
div.simlytiks[data-view="dashboard"] .vizviewContainer .panel-heading > .row {
	display: flex;
	justify-content: flex-end;
	padding: 3px 0;
	align-items: center;
}
div.simlytiks[data-view="dashboard"] .vizviewContainer .panel-heading .panel-options {
	position: relative!important;
	top: unset!important;
}
div.simlytiks[data-view="dashboard"] .vizviewContainer > .vizviewPanel > .panel-heading .panel-options > .btn-group > button:not(.maximize-viz):not(.refresh-viz):not(.export-viz) {
	display: none;
}
div.simlytiks div.viewContent[data-vizmodel-type="dashboard"] li[data-option="aspectRatio"],
div.simlytiks div.viewContent[data-vizmodel-type="dashboard"] li.viz-ratings {
	display: none;
}
div.simlytiks[data-view="dashboard"] .viewContent:not(.enabled):hover {
	border-color: #FFF!important;
}
div.simlytiks[data-view="dashboard"] .d3view-pl-dashboard .grid-page {
	border: none!important;
}
div.simlytiks[data-view="dashboard"] .vizviewContainer .vizviewPanel > .panel-body {
	padding: 0px!important;
}

div.simlytiks .sl-side-bar-container {
	z-index: 107;
	position: relative;
}
div.simlytiks.hasFullScreenViz .sl-side-bar-container {
	z-index: 102;
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper {
	/*position: absolute;*/
	left: 60px;
	top: 0;
	height: 100%;
	min-width: 150px;
	/*width: 350px;*/
	/*border: 1px solid #DDD;*/
	width: 200px;
	/*box-shadow: 5px 4px 8px rgb(0 0 0 / 7%);*/
	border-left: none;
	background-color: #fff;
	z-index: 2;
	position: static;
	display: none;
}
/** Updated by shashank2104 on 04/15/2026 - DVFIV-1997 - Renamed Additional Options to Settings; dropped Media + Schema Customization selectors (no longer in left nav) **/
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper[data-id="Settings"],
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper[data-id="Docs"] {
	width: 300px;
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper .ui-resizable-handle.ui-resizable-e {
	width: 24px;
	right: -24px;
	border-left: 2px solid transparent;
	transition: border-left-color 0.15s ease;
	display: block!important;
	cursor: ew-resize;
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper .ui-resizable-handle.ui-resizable-e:hover {
	border-color: #66afe9;
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper .pages-panel {
	border: none;
}
div.simlytiks .slBody.mainPanel .pl-nav-menu-wrapper .sl-side-bar {
	/*box-shadow: none;*/
	border-right: none;
}
div.modalContainer .simlytiks input {
	height: auto;
}


div.simlytiks[data-view="classic"] .sl-side-bar-container .pages-panel,
div.simlytiks[data-view="classic"] .sl-side-bar-container .responses-panel {
	/*height: 50%;*/
}
div.simlytiks[data-view="classic"] .sl-side-bar-container .pages-panel {
	/*border-bottom: 1px solid #DDD!important;*/
}

div.simlytiks.hideSidebar .pl-nav-menu-wrapper {
	display: none!important;
}
div.simlytiks.hideSidebar .slBody.mainPanel .pl-nav-menu-wrapper {
	position: absolute;
	left: 50px;
	top: 0;
	z-index: 200;
	display: block;
	border: 1px solid #DDD;
	/*width: 250px;*/
}
div.simlytiks.simlytiks-theme-modern.hideSidebar .slBody.mainPanel .pl-nav-menu-wrapper {
	left: 56px;
}
div.simlytiks.hideSidebar:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li:hover,
div.simlytiks.hideSidebar:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul li[data-opened="true"] {
	border-left: 3px solid steelblue!important;
}
div.simlytiks.showSidebar.simlytiks-outer-container[data-floating-sidebar="false"] .slBody.mainPanel .pl-nav-menu-wrapper {
	display: block!important;
}

div.simlytiks .sl-header .toggle_sidebar:hover {
	border-radius: 50%!important;
	background-color: rgba(0,0,0,0.05)!important;
}
div.simlytiks .sl-header .toggle_sidebar {
	display: none;
}
div.simlytiks .sl-header .toggle_sidebar.btn-outline-on-hover.open {
	color: steelblue;
}


div.simlytiks .simlytiks-wrapper .sl-dashboard-container[data-mode="view"] .edit-db {
	display: block;
}
div.simlytiks .simlytiks-wrapper .sl-dashboard-container .edit-db {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}


/* Resizable view contents */
div.simlytiks .viewContent.ui-resizable-resizing {
	z-index: 2;
	border: 1px solid #111!important;
}
div.simlytiks .viewContent[data-location="2_1"] > .ui-resizable-handle {
	display: none!important;
}
div.simlytiks .viewContent > .ui-resizable-handle-e {
	cursor: ew-resize;
}
div.simlytiks .viewContent > .ui-resizable-handle-s {
	cursor: ns-resize;
}
div.simlytiks .viewContent > .ui-resizable-handle:hover {
	background-color: #66afe9;
}
div.simlytiks .viewContent.resizableHoverEW:not(.enabled) {
	border-right-color: #66afe9!important;
	transition: none!important;
}
div.simlytiks .viewContent.resizableHoverNS:not(.enabled) {
	border-bottom-color: #66afe9!important;
	transition: none!important;
}


div.sl-filters-popover .popover-content {
	width: 400px;
	height: 300px;
}
div.sl-filters-popover .popover-content .bs_datatable_wrapper {
	min-height: unset;
}

div.sl-filters-popover {
	max-height: unset;
	max-width: unset;
}

div.simlytiks .sl-doe-container {
	padding: 10px;
}
div.simlytiks .sl-doe-container .ui-layout-center {
	overflow: auto!important;
}

div.simlytiks .sl-datascience-container {
	padding: 10px;
}
div.simlytiks .sl-datascience-container .ui-layout-center {
	overflow: auto!important;
}
div.simlytiks .sl-datascience-container .ui-layout-west {
	overflow: hidden!important;
}

div.sl-data-parser.d3view-generic-modal-container {
	z-index: 1200;
}
div.sl-data-parser.d3view-generic-modal-container .ui-layout-east {
	border-left: 1px solid #DDD;
}

.excelresponseparser .ui-widget {
	font-size: 100%;
	font-family: inherit;
}
.slick-cell {
	padding: 8px 10px;
}
.excelresponseparser .ui-widget .slick-cell {
	font-size: unset;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	border-style: solid;
	border-left: none;
	border-top: none;
}
.excelresponseparser .ui-widget .slick-cell:not(.selected) {
	border-color: #DDD;
}

.excelresponseparser .ui-widget .slick-cell:not(.selected).highlight-cell {
	/* border-color: orange; */
	/* border-top: 1px solid orange; */
	/* border-left: 1px solid orange; */
	background-color: #ffa5008a;
}

.excelresponseparser .ui-widget .slick-header-column {
	/* line-height: 8px; */
	height: 20px !important;
	font-size: unset;
	padding: 8px 10px !important;
}
.excelresponseparser.sl-dataset-extraction .sidebarArea {
	border-left: 1px solid #DDD;
	height: 100%!important;
	padding: 15px 6px;
}
.excelresponseparser.sl-dataset-extraction .sidebarArea .responseEditor {
	font-size: unset;
}
.excelresponseparser.sl-dataset-extraction .responseEditor div.row {
	border: none!important;
	padding: 0!important;
	width: 100%!important;
	margin-bottom: 20px!important;
}
.excelresponseparser.sl-dataset-extraction .responseEditor input {
	height: auto!important;
	font-size: unset!important;
}

div.simlytiks[data-header-view="ribbon"] .d3view-plugin-header {
	height: 100px!important;
}
div.simlytiks[data-header-view="ribbon"] .d3view-plugin-header .pl-ribbon-level-2 {
	background: #FFF!important;
	border-radius: 5px!important;
}

.sl-export-ppt div.d3view-multiselect .search-container .dropdown-menu,
.sl-right-aligned-dropdown div.d3view-multiselect .search-container .dropdown-menu {
	right: 0;
	left: auto;
	width: auto;
}
div.simlytiks .viz-options .d3view-multiselect .search-container .dropdown-menu {
	right: 0;
	left: auto;
	width: 300px;
}

div.simlytiks .pl-fixed {
	background: var(--d3neutralLighterAlt)!important;
}

/** Settings in sidebar **/
div.simlytiks .sl-side-bar .sl-settings .form-group div.row > div {
	width: 100%;
}
div.simlytiks .sl-side-bar .sl-settings .tab-pane {
	padding: 10px;
}
div.simlytiks .sl-side-bar .sl-settings .nav-tabs .nav-item-label {
	display: none;
}
.sl-settings .permissions-table td,
div.simlytiks .sl-settings .permissions-table th {
	text-align: center;
}
div.sl-settings .remove-ref-row,
div.sl-settings .remove-baseline-row,
div.sl-settings .remove-current--row {
	cursor: pointer;
}
div.sl-settings .remove-ref-row:hover,
div.sl-settings .remove-baseline-row:hover,
div.sl-settings .remove-current-row:hover {
	color: red;
}
.sl-settings .data-filters-body {
	padding: 15px 0!important;
}

.basket-item.ui-sortable-helper {
	visibility: visible!important;
	width: 100%!important;
	background: lightyellow;
	display: block!important;
	pointer-events: none;
	height: 50px;
}
.basket-item .drag-handle {
	opacity: 0;
	cursor: move;
}
.basket-item:hover .drag-handle {
	opacity: 1;
}

div.simlytiks.hasFullScreenViz .data-profile-carousel .item {
	left: unset!important;
	transform: none!important;
	perspective: unset!important;
	transition: none!important;
}
div.simlytiks.hasFullScreenViz .sl-data-overview-container {
	z-index: 103;
}

#variables ul.nested > li {
	border: 1px solid #DDD;
	padding: 10px;
	margin: 10px;
	border-radius: 8px;
	box-shadow: var(--plugin-box-shadow-lightest);
}

div.simlytiks .viewContent .viz-ml-info {
	position: absolute!important;
	width: 300px;
	height: 250px;
	overflow: auto;
	background: #FFF;
	top: 100px;
	right: 100px;
	z-index: 2;
	border: 1px solid #DDD;
	padding: 10px;
	cursor: move;
	box-shadow: var(--plugin-box-shadow-lightest);
}

.sl-sidebar .content-wrapper .sl-sidebar-content > div {
	padding: 10px;
}

.sl-viz-slideshow {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1053;
	background-color: var(--plugin-dark-container-bg);
}
.sl-viz-slideshow > .ss-close {
	/*position: absolute;*/
	/*top: 10px;*/
	/*right: 10px;*/
	/*z-index: 10;*/
}
.sl-viz-slideshow .item-content {
	background-color: #FFF;
}
.sl-viz-slideshow .item-content .vis-bottom-tags,
.sl-viz-slideshow .item-content .vis-sticky-btn-group {
	display: none!important;
}
.sl-viz-slideshow .d3view-carousel .carousel-inner {
	width: 100%;
	height: calc(100% - 30px);
}
/*.sl-viz-slideshow .*/
.sl-sidebar .content-wrapper .slideshow-item {
	padding: 10px;
	border: 1px solid #DDD;
}
.sl-viz-slideshow .ss-footer-controls {
	position: fixed;
	bottom: 0px;
	right: 10px;
	/*padding: 10px;*/
}
.sl-viz-slideshow:not(.chartInteractions) .ss-body .d3view-carousel * {
	pointer-events: none!important;
}
.sl-viz-slideshow.noAnim .item {
	transform: none!important;
	transition: none!important;
}
.ui-sortable-placeholder.slideshow-item {
	display: block!important;
	height: 100px;
	background: lightyellow;
	visibility: visible!important;
}
.sl-viz-slideshow .ss-controls,
.sl-viz-slideshow .ss-footer-controls {
	opacity: 0;
	transition: opacity 0.2s ease-in;
}
.sl-viz-slideshow:hover .ss-controls,
.sl-viz-slideshow:hover .ss-footer-controls {
	opacity: 1;
}
.sl-viz-slideshow .ss-end-slide {
	background-color: var(--plugin-dark-background);
}
.sl-viz-slideshow .ss-end-slide .d3view-no-data {
	color: #FFF;
	font-size: 2em;
	top: 10px;
	transform: translate(-50%, 0);
	left: 50%;
}

div.sl-chart-formatter #sl-plot-texts .form-group > .row {
	margin: 0;
}
.ui-dialog.ui-widget.ui-widget-content.modal-content {
	z-index: 2000;
}

.sl-watermark-formatter .tab-pane .row {
	margin: 0;
}

div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .viewContent.sortable-chosen {
	border: 1px solid steelblue!important;
}
div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .viewContent.sortable-swap-highlight {
	border: 1px solid green!important;
	background: rgba(0,255,0,0.2);
}

.sl-drag-item.ui-draggable-dragging.viz-vc-panel {
	width: auto;
	padding: 6px 15px!important;
	font-weight: 400;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10510;
	cursor: grab!important;
	background: #FFF;
	box-shadow: var(--plugin-box-shadow-lighter);
}


body.hideTicks .axis .tick {
	display: none!important;
}

div.simlytiks .sl-log-message {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 200;
}



.sl-rows-to-db .databases {
	display: flex;
	flex-wrap: wrap;
	height: calc(100% - 65px);
	overflow: auto;
}
.sl-rows-to-db .databases .db-panel {
	width: calc(33% - 10px);
	height: 200px;
	margin: 5px;
}
.sl-rows-to-db .databases .db-panel .panel-body {
	height: calc(100% - 83px);
}

.sl-import-dataset .map-summary-table tbody tr {
	height: 50px;
}
.sl-import-dataset .map-summary-table tbody tr td {
	vertical-align: middle;
}

div.simlytiks div[data-app="Reporting Options"] .sl-reporting-options {
	padding: 15px;
}
div.simlytiks div[data-app="Reporting Options"] .sl-reporting-options label {
	/* padding: 10px; */
}
div.simlytiks div[data-app="Reporting Options"] .sl-reporting-options .col-md-3 {
	width: 100%;
	padding: 0 10px;
	margin-bottom: 10px;
	/* margin-left: 10px; */
}
div.simlytiks div[data-app="Reporting Options"] .sl-reporting-options .wm-options {
	padding: 0 10px;
}


.sl-reporter-layout-configurator .sl-title-slide,
.sl-reporter-layout-configurator .sl-non-title-slide {
	margin: 8px;
	transition: opacity 0.4s ease;
	opacity: 1;
	cursor: pointer;
	padding: 4px;
	position: relative;
	border: 1px solid #DDD;
	height: 150px;
	/* width: 180px!important; */
	/* flex: 0 0 180px!important; */
}

.sl-reporter-layout-configurator .sl-title-slide.active,
.sl-reporter-layout-configurator .sl-non-title-slide.active {
	border: 4px solid #428bca;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}


.sl-data-ops .wf-workers-container input.worker-search {
	font-size: unset;
}

div.simlytiks .category-item .sc-nulls-border {
	background: orange;
	height: 100%;
	width: 5px;
	position: absolute;
	left: -1px;
	z-index: 20;
	top: 0;
}

.d3view-plugins-sidebar.sl-data-sources {
	padding: 0;
}
.d3view-plugins-sidebar.sl-data-sources .panel-heading {
	padding: 10px!important
}


div.popover.sl-ds-info-tooltip .popover-content {
	max-height: 200px;
	overflow: auto;
}
div.popover.sl-ds-info-tooltip {
	width: 300px;
}
div.popover.sl-ds-info-tooltip td {
	word-break: break-all;
}
div.simlytiks .vis-ds-info {
	cursor: pointer;
}
div.simlytiks .vis-ds-info.open {
	opacity: 1!important;
}

div.simlytiks .sl-colors-customization > div[data-column] {
	margin-bottom: 20px;
}

div.simlytiks .viz-content-container.independent div.viewContent.active {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
	box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);

	background-color: var(--dt-selection-color);
}

div.simlytiks[data-viz-preview-placement="right"] .toggled_for_preview div.viewContent.enabled .vizviewContainer {
	flex-direction: row-reverse;
}
div.simlytiks[data-viz-preview-placement="right"] .toggled_for_preview div.viewContent.enabled .vizviewContainer #viz_preview_options {
	border-right: none;
	border-left: 1px solid #DDD;
}
div.simlytiks[data-viz-preview-placement="right"] #viz_preview_options .viz-options-btn-group {
	right: 100%!important;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: unset;
}

/*div.simlytiks .d3view-pl-dashboard[data-mode="view"] .db-panel.db-fixed {*/
/*	position: absolute;*/
/*	left: 0!important;*/
/*	top: -42px!important;*/
/*	width: 100%!important;*/
/*	height: calc(100% + 42px)!important;*/
/*	z-index: 2000!important;*/
/*}*/
div.simlytiks.hasDbItemEnlarged .viewContent.hasDbItemEnlarged .vizviewPanel > .panel-heading {
	display: none;
}



div.simlytiks .vizviewContainer .viz-floating-actions-bar {
	height: 45px;
	width: calc(100% - 60px);
	left: 30px;
	margin: 0 auto;
	position: absolute;
	top: 0;
	z-index: 200;
	background: #FFF;
	box-shadow: var(--plugin-box-shadow-light);
	padding: 0 20px;
	container-name: tv-bulk-actions-bar;
	container-type: inline-size;
}
@container tv-bulk-actions-bar (max-width: 1000px) {
	.item-label {
		display: none;
	}
}

div.simlytiks .vizviewContainer .viz-floating-actions-bar[data-position="bottom"] {
	top: unset;
	left: 30px;
	bottom: 30px;
	position: absolute;
	z-index: 1000;
}
div.simlytiks .vizviewContainer .viz-floating-actions-bar .pl-ribbon-menu > div {
	display: flex;
	align-items: center;
}
div.simlytiks .vizviewContainer .viz-floating-actions-bar .pl-ribbon-menu > div > button {
	flex-grow: 1;
}
div.simlytiks .vizviewContainer .viz-floating-actions-bar .pl-ribbon-menu > div > button .d3view-flex-v {
	justify-content: center;
}
.table-view .table-viewer-header {
	container-name: tv-header;
	container-type: inline-size;
}
@container tv-header (max-width: 1500px) {
	.btn-label {
		display: none;
	}
}

div.simlytiks .vizviewContainer .viz-floating-actions-bar .pl-ribbon-menu > div > button {
	flex-grow: 0;
	margin: 2px;
}

div.simlytiks .vizviewContainer .table-view .tv-floating-bulk-actions-bar[data-position="bottom"] {
	position: absolute;
	left: 0px !important;
	width: 100%;
}


div.simlytiks.simlytiks-outer-container[data-disable-footer="true"] .simlytiks-nav-tabs {
	display: none;
}
div.simlytiks.simlytiks-outer-container[data-disable-footer="true"] div.slBody {
	height: calc(100% - 70px)!important;
}

div.simlytiks #viz_preview_options[data-footer-placement="bottom"] .viz-preview-tabs {
	height: calc(100% - 150px);
}
div.simlytiks #viz_preview_options[data-footer-placement="bottom"] .preview-footer {
	padding: 20px;
}
div.simlytiks #viz_preview_options[data-footer-placement="bottom"] {
	display: flex;
	flex-direction: column;
}
div.simlytiks #viz_preview_options[data-footer-placement="bottom"] .preview-footer {
	flex: none;
}

div.simlytiks .viz-options[data-options-group-placement="top"] > .viz-params {
	height: unset;
	flex: 1 1 auto;
}

div.sl-doe-view .boxplot-item {
	margin: 0;
}
div.simlytiks div.sl-doe-container .boxplot-item {
	margin: 0;
}

div.popover.doe-dist-popover .doe-dist {
	width: 400px;
	height: 300px;
}
div.popover.doe-dist-popover .doe-dist .boxplot-item {
	margin: 0;
}

div.sl-doe-view .collapse-west {
	position: absolute;
	left: -23px;
	z-index: 20;
	top: 0;
	background: #FFF !important;
}
div.sl-doe-view .table-container.full-h.o_auto_y tbody tr {
	height: 70px;
}
div.sl-doe-view .table-container.full-h.o_auto_y tbody tr th {
	vertical-align: middle;
}

div.sl-datascience-view {
	height: 100%;
}

div.sl-datascience-view .pl-datascience-filters {
	padding: 10px;
}

div.sl-datascience-view .pl-datascience-filters-content {
	height: 100%;
	overflow-y: auto;
}

/* Hide nav menu wrapper when DataScience view is active */
div.simlytiks.showSidebar [data-view="datascience"] .slBody.mainPanel .pl-nav-menu-wrapper {

	display: none !important;
}

.d3view-global-exporting .pageWithColorByExport .viewContent {
	border: none;
}
.d3view-global-exporting .pageWithColorByExport .sl-page-tabs {
	display: none;
}

/* Landing Page View Styles */
.sl-landing-page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sl-landing-header {
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.sl-landing-tabs {
    border: none;
    margin: 0;
    padding: 0 15px;
}

.sl-landing-tabs > li {
    margin: 0;
}

.sl-landing-tabs > li > a {
    border: none;
    border-radius: 0;
    padding: 15px 20px;
    color: #666;
    background: transparent;
    border-bottom: 3px solid transparent;
}

.sl-landing-tabs > li.active > a,
.sl-landing-tabs > li.active > a:hover,
.sl-landing-tabs > li.active > a:focus {
    border: none;
    background: #fff;
    color: #333;
    border-bottom: 3px solid #007bff;
}

.sl-landing-tabs > li > a:hover {
    border: none;
    background: #fff;
    color: #333;
}

.sl-landing-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.sl-landing-page-view .sl-tab-content {
    display: none;
}

.sl-landing-page-view .sl-tab-content.active {
    display: block;
}

.sl-landing-page-view .sl-landing-footer {
    border-top: 1px solid #ddd;
    padding: 15px 20px;
    background: #f8f9fa;
}

/* Tab Description */
.sl-landing-page-view .sl-tab-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

/* File Upload Area */
.sl-landing-page-view .sl-file-upload-area {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
}

.sl-landing-page-view .sl-file-upload-area:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.sl-landing-page-view .sl-file-upload-area.dragover {
    border-color: #007bff;
    background: #e3f2fd;
    transform: scale(1.02);
}

.sl-landing-page-view .sl-dropzone {
    cursor: pointer;
}

.sl-landing-page-view .sl-dropzone-message h4 {
    margin: 15px 0 10px 0;
    color: #333;
}

.sl-landing-page-view .sl-dropzone-message p {
    margin: 5px 0;
    color: #666;
}

.sl-landing-page-view .sl-supported-formats {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

/* Database Form */
.sl-landing-page-view .sl-database-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

/* Sample Datasets Grid */
.sl-landing-page-view .sl-samples-grid {
    margin-top: 20px;
}

.sl-landing-page-view .sl-sample-dataset-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sl-landing-page-view .sl-sample-dataset-card:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.sl-landing-page-view .sl-sample-dataset-card.selected {
    border-color: #28a745;
    background: #f8fff9;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}

.sl-landing-page-view .sl-sample-card-header {
    padding: 15px 15px 10px 15px;
    border-bottom: 1px solid #eee;
}

.sl-landing-page-view .sl-sample-card-header h5 {
    margin: 0;
    color: #333;
    font-weight: 600;
}

.sl-landing-page-view .sl-sample-card-body {
    padding: 10px 15px;
    min-height: 60px;
}

.sl-landing-page-view .sl-sample-card-body p {
    margin: 0;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

.sl-landing-page-view .sl-sample-card-footer {
    padding: 10px 15px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* Loading State */
.sl-landing-page-view .sl-samples-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.sl-landing-page-view .sl-samples-loading i {
    margin-bottom: 10px;
}

/* No Samples State */
.sl-landing-page-view .sl-no-samples {
    text-align: center;
    padding: 40px;
}

/* No Data Message */
.sl-landing-page-view .sl-no-data-message {
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.sl-landing-page-view .sl-no-data-message i {
    color: #856404;
    margin-right: 8px;
}

.sl-landing-page-view .sl-no-data-message strong {
    color: #856404;
}

.sl-landing-page-view .sl-no-data-message p {
    color: #856404;
    margin: 10px 0 0 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sl-landing-page-view .sl-landing-tabs > li > a {
        padding: 10px 15px;
        font-size: 12px;
    }
    
    .sl-landing-page-view .sl-landing-tabs > li > a i {
        display: block;
        margin-bottom: 5px;
    }
    
    .sl-landing-page-view .sl-landing-body {
        padding: 15px;
    }
    
    .sl-landing-page-view .sl-file-upload-area {
        padding: 20px;
    }
    
    .sl-landing-page-view .sl-sample-dataset-card {
        margin-bottom: 15px;
    }
}




/** Updated by shashank2104 on 2026-04-15 - DVFIV-1995 - Floating sidebar: keep .sl-side-bar-container in normal flex flow so the rail occupies its natural width and resize on the inner panel can reflow the layout. The actual floating overlay is .pl-nav-menu-wrapper below. **/
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .sl-side-bar-container {
	position: relative;
	height: 100%;
}
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .sl-side-bar-container .pl-nav-menu {
	/*width: 75px;*/
	/*background: #FFF;*/
	/*border-right: 1px solid #DDD;*/
}
div.simlytiks[data-floating-sidebar="true"] .sl-side-bar-container .pl-nav-menu > ul li.open,
div.simlytiks[data-floating-sidebar="true"] .sl-side-bar-container .pl-nav-menu > ul li:hover {
	/*background-color: #f1f3f4!important;*/
}
div.simlytiks .slBody .sl-nav-menu-container .pl-nav-menu > ul li {
	/*height: auto;*/
	/*width: auto;*/
}
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .sl-side-bar-container .pl-nav-menu .pl-tab-item-label {
	/* display: block!important; */
	/*height: auto!important;*/
	/*position: relative;*/
	/*margin-top: 5px;*/
	/*font-size: 90%;*/
}
/** Updated by shashank2104 on 2026-04-15 - DVFIV-1995 - .sl-side-bar-container is now in normal flex flow (rail width ~56px), so .sl-main-window no longer needs a manual left/width offset; it just fills the remaining flex space. **/
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .sl-main-window {
	position: relative;
	height: 100%;
}
/** Updated by shashank2104 on 2026-04-15 - DVFIV-1995 - The floating menu wrapper is now the absolutely-positioned element (sits to the right of the rail and floats over .sl-main-window). Resizing the inner tab-pane no longer fights the parent layout. **/
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .slBody.mainPanel .pl-nav-menu-wrapper {
	position: absolute;
	left: 56px;
	top: 0;
	height: 100%;
	width: auto;
	border-right: 1px solid #DDD;
	z-index: 5;
}
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .slBody.mainPanel .pl-nav-menu-wrapper .tab-pane[data-app] {
	width: 300px;
	padding: 15px;
}
/*div.simlytiks[data-floating-sidebar="true"] .sl-side-bar-container .pl-nav-menu li.open:before {*/
/*	display: none;*/
/*}*/
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .slBody.mainPanel .pl-nav-menu-wrapper .tab-pane[data-app].full-width {
	width: calc(99vw - 55px);
}
/** Updated by shashank2104 on 2026-04-15 - DVFIV-1995 - Sidebar container is in flex flow now (rail takes its natural width); these siblings no longer need the left/width offsets that compensated for the previously-absolute container. **/
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .sl-charts-container,
div.simlytiks.simlytiks-outer-container[data-floating-sidebar="true"] .ml-vis-list-container {
	position: relative;
}

div.simlytiks[data-floating-sidebar="true"] .sl-datascience-container.animated.fadeIn {
	position: relative;
}


/** Added by shashank2104 on 01/26/2026 at 01:20 PM - DVFIV-1906 - Absolute positioned slide-in panel for AI Agent container **/
/** Added by shashank2104 on 01/26/2026 at 01:51 PM - DVFIV-1906 - Independent slide-in panel for AI Agent workflow container **/
.sl-ai-agent-container {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 100%!important;
	z-index: 10000;
	padding: 5px!important;
	background: #ffffff;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
	overflow: hidden;
	will-change: width;
	border-radius: var(--wf-ai-fora-border-radius, 16px);
}

.sl-ai-agent-container.sl-ai-agent-visible {
	width: 400px;
	box-shadow: -6px 0 30px rgba(0, 0, 0, 0.2);
}


div.simlytiks .sl-ai-agent-container.sl-ai-agent-hidden {
	width: 0!important;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0);
	padding: 0 !important;
}
div.simlytiks .sl-ai-agent-container.sl-ai-agent-hidden .sl-ai-agent-chat {
	display: none;
}

.sl-ai-agent-container .sl-wf-container {
	position: relative;
	width: 100%;
	height: 100%!important;
	overflow: hidden;
	background: #ffffff;
}
.sl-ai-agent-container .agent-header {
	display: none!important;;
}

@keyframes fadeInBackdrop {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.sl-ai-agent-container .sl-wf-container.workflow .workflow-index[data-view="agentic"] .agentic-view-container {
	top: 0!important;
	padding: 20px;
}

/* Ensure workflow content is properly contained */
.sl-ai-agent-container .sl-wf-container .workflow-container,
.sl-ai-agent-container .sl-wf-container .wf-agentic-view {
	width: 100%;
	height: 100%!important;
	overflow: hidden;
}

/** Added by shashank2104 on 01/26/2026 at 02:26 PM - DVFIV-1906 - Simlytiks AI Agent Chat View Styles **/
.sl-ai-agent-chat.sl-floating-div {
	pointer-events: all;
	position: absolute !important;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	z-index: 89;
	overflow: hidden;
	opacity: 1;
	background: var(--wf-ai-fora-bg, #ffffff);
	border: none;
	box-shadow: var(--wf-ai-fora-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
	border-radius: var(--wf-ai-fora-border-radius, 16px);
	padding: 0;
}

.sl-ai-agent-chat.sl-floating-div:not(.isVisible) {
	display: none;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header {
	cursor: move;
	user-select: none;
	background: var(--wf-ai-fora-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
	color: var(--wf-ai-fora-header-color, #ffffff);
	border-radius: var(--wf-ai-fora-border-radius, 16px) var(--wf-ai-fora-border-radius, 16px) 0 0;
	height: var(--wf-ai-fora-header-height, 56px);
	padding: var(--wf-ai-fora-header-padding, 0 16px);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .lead {
	color: var(--wf-ai-fora-header-color, #ffffff);
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .fa-robot {
	color: var(--wf-ai-fora-header-color, #ffffff);
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .btn-group {
	display: flex;
	gap: 4px;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	background: var(--wf-ai-fora-btn-bg, rgba(255, 255, 255, 0.15));
	border: none;
	color: var(--wf-ai-fora-header-color, #ffffff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .btn:hover {
	background: var(--wf-ai-fora-btn-bg-hover, rgba(255, 255, 255, 0.25));
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .btn i {
	margin: 0;
}

.sl-ai-agent-chat.sl-floating-div .sl-ai-agent-chat-header .btn span:not(.sr-only) {
	display: none;
}

.sl-ai-agent-chat-sidebar-toggle-btn {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer;
}

.sl-ai-agent-chat-sidebar-toggle-btn:hover {
	background: transparent !important;
}

.sl-ai-agent-chat.sl-floating-div.minimized {
	height: 80px !important;
	max-height: 80px;
	min-height: 80px;
	overflow: hidden;
}

.sl-ai-agent-chat.sl-floating-div.minimized .sl-ai-agent-chat-content {
	display: none;
}

.sl-ai-agent-chat.sl-floating-div:hover {
	opacity: 1;
	box-shadow: var(--wf-ai-fora-shadow-hover, 0 6px 25px rgba(0, 0, 0, 0.2));
}

.sl-ai-agent-chat-tabs-sidebar {
	flex: 0 0 180px;
	width: 180px;
	border-right: 1px solid #eee;
	background-color: #fafafa;
	overflow-y: auto;
	transition: flex 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

.sl-ai-agent-chat-tabs-sidebar .sl-ai-agent-tabs-list {
	list-style: none;
	padding: 8px;
	margin: 0;
}

.sl-ai-agent-chat-tabs-sidebar .sl-ai-agent-tab-item {
	padding: 10px 12px;
	margin-bottom: 4px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease;
	font-size: 13px;
}

.sl-ai-agent-chat-tabs-sidebar .sl-ai-agent-tab-item:hover {
	background: var(--wf-ai-fora-tab-hover-bg, rgba(102, 126, 234, 0.1));
}

.sl-ai-agent-chat-tabs-sidebar .sl-ai-agent-tab-item.active {
	background: var(--wf-ai-fora-tab-active-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
	color: #ffffff;
}

.sl-ai-agent-chat-tabs-sidebar .sl-ai-agent-tab-id {
	display: none;
}

.sl-ai-agent-chat-content {
	flex: 1;
	display: flex;
	overflow: hidden;
	background: #ffffff;
}

.sl-ai-agent-chat-content-area {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	background: #ffffff;
}

.sl-ai-agent-chat-tabs-sidebar.hidden {
	flex: 0 0 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	border-right: none !important;
	overflow: hidden !important;
	opacity: 0;
}

/* Fullscreen state */
.sl-ai-agent-container.fullscreen {
	position: fixed !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	z-index: 99999 !important;
	opacity: 1 !important;
	background: #ffffff !important;
}

.sl-ai-agent-container.fullscreen .sl-ai-agent-chat-header {
	border-radius: 0;
}

.sl-ai-agent-container.fullscreen .ui-resizable-handle {
	display: none !important;
}

/* Docked state - pill shape at bottom right corner */
.sl-ai-agent-container.docked {
	position: absolute !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	top: auto !important;
	right: 24px !important;
	left: auto !important;
	bottom: 24px !important;
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: none !important;
	background: transparent !important;
}

.sl-ai-agent-container.docked .sl-ai-agent-chat {
	position: relative !important;
	width: 250px !important;
	min-width: 180px !important;
	max-width: 320px !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	border-radius: 24px !important;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sl-ai-agent-chat.sl-floating-div.docked .sl-ai-agent-chat-header {
	height: 100%;
	padding: 0 12px;
	border-radius: 24px;
}

.sl-ai-agent-chat.sl-floating-div.docked .sl-ai-agent-chat-header .lead {
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.sl-ai-agent-chat.sl-floating-div.docked .sl-ai-agent-chat-content,
.sl-ai-agent-chat.sl-floating-div.docked > .pl-flex-v > *:not(.sl-ai-agent-chat-header) {
	display: none !important;
}

.sl-ai-agent-chat.sl-floating-div.docked .sl-ai-agent-chat-sidebar-toggle-btn {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
}

.sl-ai-agent-chat.sl-floating-div.docked .sl-ai-agent-chat-sidebar-toggle-btn h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}

.sl-ai-agent-chat.sl-floating-div.docked .agent-title-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
	display: inline-block;
}

.sl-ai-agent-chat.sl-floating-div.docked .maximize-restore-btn,
.sl-ai-agent-chat.sl-floating-div.docked .clear-conversation-btn {
	display: none !important;
}

.sl-ai-agent-chat.sl-floating-div.docked .minimize-expand-btn {
	display: inline-flex !important;
	width: 28px !important;
	height: 28px !important;
}

.sl-ai-agent-chat.sl-floating-div.docked .close-chat-btn {
	display: inline-flex !important;
	width: 28px !important;
	height: 28px !important;
}

.sl-ai-agent-chat.sl-floating-div.docked .ui-resizable-handle {
	display: none !important;
}

/* Resize handle styles */
.sl-ai-agent-chat.sl-floating-div .ui-resizable-e,
.sl-ai-agent-chat.sl-floating-div .ui-resizable-w {
	cursor: ew-resize;
	width: 8px;
}

.sl-ai-agent-chat.sl-floating-div .ui-resizable-n,
.sl-ai-agent-chat.sl-floating-div .ui-resizable-s {
	cursor: ns-resize;
	height: 8px;
}

.sl-ai-agent-chat.sl-floating-div .ui-resizable-ne,
.sl-ai-agent-chat.sl-floating-div .ui-resizable-nw,
.sl-ai-agent-chat.sl-floating-div .ui-resizable-se,
.sl-ai-agent-chat.sl-floating-div .ui-resizable-sw {
	width: 12px;
	height: 12px;
}


div.sl-add-column-by-expression-modal .expression-maker .form-group {
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   SIM-997 — Relationship Builder Tool
   Added by shashank2104 on 2026-04-06
   ═══════════════════════════════════════════════════════════ */

.simlytiks .sl-rb-container {
	height: 100%;
}
.simlytiks .sl-rb-body {
	display: flex;
	flex: 1 1 auto;
	overflow: hidden;
}
.simlytiks .sl-rb-main {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}
.simlytiks .sl-rb-toolbar {
	padding: 8px 14px;
	gap: 12px;
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
	background: var(--d3v-bg-secondary, #f8fafc);
	min-height: 44px;
}
.simlytiks .sl-rb-dataset-count {
	font-size: 12px;
	color: var(--d3v-text-muted, #94a3b8);
	font-weight: 500;
}
.simlytiks .sl-rb-view-toggle .btn.active {
	background: var(--d3v-accent, #3b82f6);
	color: var(--d3v-text-inverse, #fff);
	border-color: var(--d3v-accent, #3b82f6);
}
.simlytiks .sl-rb-relationship-view,
.simlytiks .sl-rb-tables-view {
	min-height: 0;
}
.simlytiks .sl-rb-relationship-view {
	position: relative;
}

/* Settings sidebar */
.simlytiks .sl-rb-settings {
	width: 280px;
	min-width: 280px;
	border-left: 1px solid var(--d3v-border, #e2e8f0);
	background: var(--d3v-bg-secondary, #f8fafc);
}
.simlytiks .sl-rb-settings-header {
	padding: 10px 14px;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.simlytiks .sl-rb-settings-body {
	padding: 14px;
}
.simlytiks .sl-rb-setting-group {
	margin-bottom: 16px;
}
.simlytiks .sl-rb-setting-label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--d3v-text-muted, #94a3b8);
	font-weight: 600;
	margin-bottom: 6px;
}
.simlytiks .sl-rb-setting-help {
	font-size: 11px;
	color: var(--d3v-text-muted, #94a3b8);
	margin-top: 4px;
	margin-bottom: 0;
}
.simlytiks .sl-rb-setting-divider {
	height: 1px;
	background: var(--d3v-border, #e2e8f0);
	margin: 14px 0;
}

/* Merge preview */
.simlytiks .sl-rb-merge-preview {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.simlytiks .sl-rb-preview-count {
	font-size: 28px;
	font-weight: 700;
	color: var(--d3v-accent, #3b82f6);
	line-height: 1;
}
.simlytiks .sl-rb-preview-label {
	font-size: 12px;
	color: var(--d3v-text-muted, #94a3b8);
}

/* Join rules section header */
.simlytiks .sl-rb-join-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}
.simlytiks .sl-rb-add-join-rule {
	font-size: 10px;
	padding: 3px 10px;
	border: 1px dashed var(--d3v-accent, #3B82F6);
	border-radius: 6px;
	background: rgba(59,130,246,0.04);
	color: var(--d3v-accent, #3B82F6);
	cursor: pointer;
	font-weight: 600;
	transition: all 0.12s ease;
}
.simlytiks .sl-rb-add-join-rule:hover {
	background: rgba(59,130,246,0.1);
}

/* Join rules in sidebar (GP-style configurable cards) */
.simlytiks .sl-rb-join-rules {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.simlytiks .sl-rb-join-rules-empty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	border: 1px dashed var(--d3v-border, #CBD5E1);
	border-radius: var(--d3v-r-md, 8px);
	color: var(--d3v-text-muted, #94A3B8);
	font-size: 11px;
	line-height: 1.4;
}
.simlytiks .sl-rb-join-rules-empty i {
	font-size: 14px;
	opacity: 0.5;
	flex-shrink: 0;
}
.simlytiks .sl-rb-join-rule-card {
	background: var(--d3v-bg-secondary, #F8FAFC);
	border: 1px solid var(--d3v-border, #E2E8F0);
	border-radius: var(--d3v-r-md, 8px);
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: all 0.12s ease;
}
.simlytiks .sl-rb-join-rule-card:hover {
	border-color: var(--d3v-accent, #3B82F6);
}
.simlytiks .sl-rb-join-rule-card.active {
	border-color: var(--d3v-accent, #3B82F6);
	box-shadow: 0 0 0 2px rgba(59,130,246,0.08);
}
.simlytiks .sl-rb-join-rule-top {
	display: flex;
	align-items: center;
	gap: 8px;
}
.simlytiks .sl-rb-join-rule-toggle {
	width: 32px;
	height: 18px;
	border-radius: var(--d3v-r-full, 9999px);
	background: var(--d3v-n-300, #CBD5E1);
	position: relative;
	cursor: pointer;
	transition: background 0.15s ease;
	flex-shrink: 0;
}
.simlytiks .sl-rb-join-rule-toggle.on {
	background: var(--d3v-accent, #3B82F6);
}
.simlytiks .sl-rb-join-rule-toggle::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: white;
	top: 2px;
	left: 2px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	transition: transform 0.15s ease;
}
.simlytiks .sl-rb-join-rule-toggle.on::after {
	transform: translateX(14px);
}
.simlytiks .sl-rb-join-rule-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--d3v-text-primary, #1E293B);
	flex: 1;
}
.simlytiks .sl-rb-join-rule-delete {
	border: none;
	background: transparent;
	color: var(--d3v-text-muted, #94A3B8);
	cursor: pointer;
	font-size: 12px;
	padding: 2px 4px;
	border-radius: 4px;
	transition: all 0.12s ease;
}
.simlytiks .sl-rb-join-rule-delete:hover {
	background: #FEF2F2;
	color: var(--d3v-danger, #EF4444);
}
.simlytiks .sl-rb-join-rule-datasets {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.simlytiks .sl-rb-join-rule-source-ds,
.simlytiks .sl-rb-join-rule-target-ds {
	flex: 1 1 80px;
	min-width: 80px;
	padding: 5px 8px;
	border: 1px solid var(--d3v-border, #E2E8F0);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--d3v-text-primary, #334155);
	background: var(--d3v-bg-secondary, #F8FAFC);
}
.simlytiks .sl-rb-join-rule-cols {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.simlytiks .sl-rb-join-rule-source,
.simlytiks .sl-rb-join-rule-target {
	flex: 1 1 80px;
	min-width: 80px;
	padding: 5px 8px;
	border: 1px solid var(--d3v-border, #E2E8F0);
	border-radius: 6px;
	font-size: 11px;
	color: var(--d3v-text-primary, #334155);
	background: var(--d3v-bg-primary, #fff);
}
.simlytiks .sl-rb-join-eq {
	font-size: 12px;
	font-weight: 700;
	color: var(--d3v-text-muted, #94A3B8);
}
.simlytiks .sl-rb-join-rule-type {
	padding: 5px 8px;
	border: 1px solid var(--d3v-border, #E2E8F0);
	border-radius: 6px;
	font-size: 10px;
	color: var(--d3v-text-secondary, #475569);
	background: var(--d3v-bg-primary, #fff);
	width: 70px;
	flex-shrink: 0;
}
.simlytiks .sl-rb-join-match-badge {
	font-size: 9px;
	color: #16A34A;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}
.simlytiks .sl-rb-match-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #16A34A;
	display: inline-block;
}
.simlytiks .sl-rb-no-rules {
	font-size: 11px;
	color: var(--d3v-text-muted, #94a3b8);
	padding: 8px 0;
}

/* Table cards */
.simlytiks .sl-rb-tables-view {
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.simlytiks .sl-rb-table-card {
	background: var(--d3v-bg-primary, #fff);
	border: 1px solid var(--d3v-border, #e2e8f0);
	border-radius: var(--d3v-r-md, 8px);
	box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,.05));
	overflow: hidden;
	transition: var(--d3v-t-fast, 0.12s);
}
.simlytiks .sl-rb-table-card:hover {
	box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.1));
}
.simlytiks .sl-rb-table-card-header {
	padding: 10px 14px;
	background: var(--d3v-bg-secondary, #f8fafc);
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
	font-size: 13px;
	font-weight: 600;
}
.simlytiks .sl-rb-ds-color {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.simlytiks .sl-rb-ds-name {
	color: var(--d3v-text-primary, #1e293b);
}
.simlytiks .sl-rb-ds-meta {
	font-size: 11px;
	color: var(--d3v-text-muted, #94a3b8);
	font-weight: 400;
}
.simlytiks .sl-rb-table-card-body {
	overflow-x: auto;
}
.simlytiks .sl-rb-mini-table {
	width: 100%;
	font-size: 11px;
	border-collapse: collapse;
}
.simlytiks .sl-rb-mini-table th {
	padding: 6px 10px;
	background: var(--d3v-bg-tertiary, #f1f5f9);
	color: var(--d3v-text-secondary, #475569);
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
	white-space: nowrap;
}
.simlytiks .sl-rb-mini-table td {
	padding: 5px 10px;
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
	color: var(--d3v-text-primary, #1e293b);
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.simlytiks .sl-rb-mini-table tbody tr:hover {
	background: var(--d3v-bg-hover, #e2e8f0);
}
.simlytiks .sl-rb-table-more {
	padding: 6px 10px;
	font-size: 11px;
	color: var(--d3v-text-muted, #94a3b8);
	text-align: center;
}

/* Empty states */
.simlytiks .sl-rb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--d3v-text-muted, #94a3b8);
	font-size: 13px;
	gap: 12px;
}
.simlytiks .sl-rb-empty .fa {
	font-size: 48px;
	opacity: 0.25;
}

/* Customize Columns button */
.simlytiks .sl-rb-customize-cols-btn {
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border: 1px solid var(--d3v-border, #e2e8f0);
	border-radius: var(--d3v-r-sm, 4px);
	background: var(--d3v-bg-primary, #fff);
	font-size: 12px;
	cursor: pointer;
	transition: var(--d3v-t-fast, 0.12s);
}
.simlytiks .sl-rb-customize-cols-btn:hover {
	background: var(--d3v-bg-hover, #e2e8f0);
}

/* Column customizer slide-in — mirrors GenericParser Summary panel (SIM-997, 2026-04-07) */
.simlytiks .sl-rb-col-customizer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	background: var(--d3v-bg-primary, #fff);
	border-left: 1px solid var(--d3v-border, #e2e8f0);
	box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, .08));
	z-index: 3;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--d3v-t-med, 0.22s) ease;
}
.simlytiks .sl-rb-col-customizer.open {
	transform: translateX(0);
}
.simlytiks .sl-rb-col-customizer-header {
	padding: 12px 14px;
	font-weight: 600;
	font-size: 13px;
	color: var(--d3v-text-primary, #0f172a);
	border-bottom: 1px solid var(--d3v-border, #e2e8f0);
	background: var(--d3v-bg-secondary, #f8fafc);
}
.simlytiks .sl-rb-col-customizer-header .fa-sliders {
	margin-right: 6px;
	color: var(--d3v-accent, #3b82f6);
}
.simlytiks .sl-rb-col-toggle-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--d3v-border-subtle, #eef2f7);
	background: var(--d3v-bg-primary, #fff);
	flex-wrap: wrap;
}
.simlytiks .sl-rb-col-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--d3v-text-secondary, #475569);
	margin: 0;
	cursor: pointer;
}
.simlytiks .sl-rb-col-toggle-label input[type="checkbox"] {
	margin: 0;
}
.simlytiks .sl-rb-col-show-all {
	margin-left: auto;
	padding: 2px 6px;
	font-size: 12px;
	color: var(--d3v-accent, #3b82f6);
	text-decoration: none;
}
.simlytiks .sl-rb-col-show-all:hover {
	text-decoration: underline;
}
.simlytiks .sl-rb-col-customizer-body {
	padding: 10px 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.simlytiks .sl-rb-col-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: var(--d3v-r-md, 6px);
	font-size: 12px;
	background: var(--d3v-bg-primary, #fff);
	transition: var(--d3v-t-fast, 0.12s);
}
.simlytiks .sl-rb-col-row:hover {
	background: var(--d3v-bg-hover, #f1f5f9);
	border-color: var(--d3v-border-subtle, #e2e8f0);
}
.simlytiks .sl-rb-col-row.sl-rb-col-hidden {
	opacity: 0.5;
}
.simlytiks .sl-rb-col-drag-handle {
	cursor: grab;
	color: var(--d3v-text-muted, #94a3b8);
	font-size: 11px;
	padding: 0 2px;
}
.simlytiks .sl-rb-col-drag-handle:active {
	cursor: grabbing;
}
.simlytiks .sl-rb-col-name {
	flex: 1 1 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--d3v-text-primary, #0f172a);
	font-weight: 500;
}
.simlytiks .sl-rb-col-name-input {
	flex: 1 1 auto;
	font-size: 12px;
	padding: 2px 6px;
	border: 1px solid var(--d3v-accent, #3b82f6);
	border-radius: var(--d3v-r-sm, 4px);
	outline: none;
}
.simlytiks .sl-rb-col-badge {
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.simlytiks .sl-rb-col-badge-empty {
	background: var(--d3v-status-warning-bg, #fef3c7);
	color: var(--d3v-status-warning, #b45309);
}
.simlytiks .sl-rb-col-badge-common {
	background: var(--d3v-status-info-bg, #dbeafe);
	color: var(--d3v-status-info, #1d4ed8);
}
.simlytiks .sl-rb-col-rename-btn,
.simlytiks .sl-rb-col-vis-btn {
	padding: 2px 6px;
	color: var(--d3v-text-muted, #94a3b8);
	background: transparent;
	border: none;
	transition: var(--d3v-t-fast, 0.12s);
}
.simlytiks .sl-rb-col-rename-btn:hover,
.simlytiks .sl-rb-col-vis-btn:hover {
	color: var(--d3v-accent, #3b82f6);
}
.simlytiks .sl-rb-col-dragging {
	opacity: 0.4;
	background: var(--d3v-bg-hover, #f1f5f9);
}
.simlytiks .sl-rb-col-chosen {
	background: var(--d3v-bg-hover, #eef2f7);
	border-color: var(--d3v-accent, #3b82f6);
}

/* Footer buttons */
.simlytiks .sl-rb-save-new,
.simlytiks .sl-rb-replace-all {
	transition: var(--d3v-t-fast, 0.12s);
	border-radius: var(--d3v-r-sm, 4px);
}
.simlytiks .sl-rb-save-new:disabled,
.simlytiks .sl-rb-replace-all:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.simlytiks .sl-rb-save-new:not(:disabled):hover {
	box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,.05));
}
.simlytiks .sl-rb-replace-all:not(:disabled):hover {
	box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,.05));
}

/* ================================================================
   1. VIZ SLOT CONTAINER (.viewContent)
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent {
    background: var(--sl-bg-surface, #FFFFFF);
    border: 1px solid var(--sl-border, #E2E8F0);
    border-radius: var(--sl-r-lg, 12px);
    box-shadow: var(--sl-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
div.simlytiks.simlytiks-theme-modern .viewContent:hover {
    box-shadow: var(--sl-sh-md, 0 4px 12px rgba(0,0,0,0.10));
    transform: translateY(-1px);
}

div.simlytiks.simlytiks-theme-modern .sl-view-advanced-dashboard .viewContent {
    border: none !important;
}

/* ================================================================
   2. SVG AXES
   ================================================================ */
/** Updated by shashank2104 on 2026-04-19 - R0-3415 - dropped !important on axis line / tick / tick text / axis label styles so per-viz user customizations (stroke color, stroke-width, tick font, axis label font via LabelEditor) take effect in Modern. **/

div.simlytiks.simlytiks-theme-modern .viewContent .domain {
    stroke: var(--sl-n-300, #CBD5E1);
    stroke-width: 0.5px;
}
div.simlytiks.simlytiks-theme-modern .viewContent .tick line {
    stroke: var(--sl-n-200, #E2E8F0);
    stroke-width: 0.5px;
}
div.simlytiks.simlytiks-theme-modern .viewContent .tick text {
    fill: var(--sl-text-secondary, #475569);
    font-size: 11px;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* ================================================================
   3. GRIDLINES
   ================================================================ */
/** Updated by shashank2104 on 2026-04-19 - R0-3415 - dropped !important on grid line stroke / width / dash / opacity so user grid customizations win in Modern. **/

div.simlytiks.simlytiks-theme-modern .viewContent .gridX line,
div.simlytiks.simlytiks-theme-modern .viewContent .gridY line,
div.simlytiks.simlytiks-theme-modern .viewContent .grid line {
    stroke: var(--sl-n-100, #F1F5F9);
    stroke-width: 0.5px;
    stroke-dasharray: 3,3;
    opacity: 1;
}
div.simlytiks.simlytiks-theme-modern .viewContent .gridX .domain,
div.simlytiks.simlytiks-theme-modern .viewContent .gridY .domain,
div.simlytiks.simlytiks-theme-modern .viewContent .grid .domain {
    stroke: none;
}


/* ================================================================
   4. LEGENDS
   Covers both .d3view-legends-container (plugins.helpers.tpl)
   and .viz-legends-container (simlytiks alias)
   ================================================================ */

/* .viz-legends-container is the OUTER wrapper — no border/bg to avoid double-border */
div.simlytiks.simlytiks-theme-modern .viz-legends-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0;
}
/* .d3view-legends-container is the INNER actual legend box */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container {
    background: var(--sl-n-50, #F8FAFC) !important;
    border: 1px solid var(--sl-border, #E2E8F0) !important;
    border-radius: var(--sl-r-md, 8px) !important;
    padding: 8px 12px;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Legend header — override plugins.css #FFF!important */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container div.legend-header {
    background: transparent !important;
    border-bottom: 1px solid var(--sl-border, #E2E8F0);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

/* Legend title label */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legends-label,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legends-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sl-text-muted, #94A3B8);
    font-weight: 600;
}

/* Legend body */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legends-body,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legends-body {
    padding: 0;
}

/* Individual legend items */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-item,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-item {
    font-size: 12px;
    color: var(--sl-text-secondary, #475569);
    transition: color 0.12s ease;
}
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-item:hover,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-item:hover {
    color: var(--sl-text-primary, #1E293B);
}

/* Curve name text */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .curve-name,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .curve-name {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 12px;
}

/* Legend search input */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-search-container input,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-search-container input {
    border-radius: var(--sl-r-full, 9999px);
    border: 1px solid var(--sl-border, #E2E8F0);
    padding: 4px 10px;
    font-size: 12px;
    background: var(--sl-bg-surface, #FFFFFF);
    outline: none;
    transition: border-color 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-search-container input:focus,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-search-container input:focus {
    border-color: var(--sl-accent, #3B82F6);
}

/* Legend options dropdown */
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-container-options .dropdown-menu,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-container-options .dropdown-menu {
    background: var(--sl-bg-surface, #FFFFFF);
    border: 1px solid var(--sl-border, #E2E8F0);
    border-radius: var(--sl-r-md, 8px);
    box-shadow: var(--sl-sh-md, 0 4px 12px rgba(0,0,0,0.10));
    padding: 4px 0;
}
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-container-options .dropdown-menu li > a,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-container-options .dropdown-menu li > a {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--sl-text-secondary, #475569);
    transition: background 0.12s ease, color 0.12s ease;
}
div.simlytiks.simlytiks-theme-modern .d3view-legends-container .legend-container-options .dropdown-menu li > a:hover,
div.simlytiks.simlytiks-theme-modern .viz-legends-container .legend-container-options .dropdown-menu li > a:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, #3B82F6);
}

/* SVG legend text */
div.simlytiks.simlytiks-theme-modern .legends-svg {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
div.simlytiks.simlytiks-theme-modern .legends-svg .legends-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sl-text-secondary, #475569);
}


/* ================================================================
   5. TOOLTIPS
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .d3-tip,
div.simlytiks.simlytiks-theme-modern .viz-tooltip,
div.simlytiks.simlytiks-theme-modern .svg-tip,
div.simlytiks.simlytiks-theme-modern .d3view-viz-tooltip {
    background: var(--sl-bg-surface, #FFFFFF) !important;
    border: 1px solid var(--sl-border, #E2E8F0) !important;
    border-radius: var(--sl-r-md, 8px) !important;
    box-shadow: var(--sl-sh-lg, 0 10px 25px rgba(0,0,0,0.12)) !important;
    color: var(--sl-text-primary, #1E293B) !important;
    font-size: 12px !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    padding: 10px 14px !important;
    line-height: 1.5 !important;
}


/* ================================================================
   6. CHART TITLE
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .chart-title,
div.simlytiks.simlytiks-theme-modern .viewContent .viz-title,
div.simlytiks.simlytiks-theme-modern .viewContent .item-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-primary, #1E293B);
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* ================================================================
   7. SVG TEXT (universal font)
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent svg text {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}


/* ================================================================
   8. BAR CHARTS (rect.bar — vbar, hbar, grouped bar)
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.bar {
    rx: 4px;
    ry: 4px;
    transition: opacity 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent rect.bar:hover {
    opacity: 0.85;
    filter: brightness(1.05);
}


/* ================================================================
   9. LINE CHARTS
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent path.line {
    stroke-width: 2.5px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Line dots */
div.simlytiks.simlytiks-theme-modern .viewContent circle.dot {
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 2px !important;
    transition: r 0.15s ease;
}


/* ================================================================
   10. AREA CHARTS
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent path.area {
    opacity: 0.15;
}


/* ================================================================
   11. PIE / DONUT
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent path.arc {
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 2px !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
}


/* ================================================================
   12. SCATTER / BUBBLE
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent circle.bubble,
div.simlytiks.simlytiks-theme-modern .viewContent .scatter-dot {
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 1.5px !important;
    opacity: 0.7 !important;
    transition: opacity 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent circle.bubble:hover,
div.simlytiks.simlytiks-theme-modern .viewContent .scatter-dot:hover {
    opacity: 1 !important;
}


/* ================================================================
   13. HEATMAP
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.cell {
    rx: 2px;
    ry: 2px;
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 1px !important;
    transition: stroke-width 0.12s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent rect.cell:hover {
    stroke: var(--sl-accent, #3B82F6) !important;
    stroke-width: 2px !important;
}


/* ================================================================
   14. HISTOGRAM
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.histogram-bar,
div.simlytiks.simlytiks-theme-modern .viewContent .histogram rect {
    rx: 2px;
    ry: 2px;
    opacity: 0.8;
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 1px !important;
}


/* ================================================================
   15. BOX PLOT
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.box {
    rx: 4px;
    ry: 4px;
    stroke-width: 1.5px !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent line.median {
    stroke-width: 2.5px !important;
}


/* ================================================================
   16. PARALLEL COORDINATES
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .parallel-line,
div.simlytiks.simlytiks-theme-modern .viewContent .foreground path {
    stroke-width: 1.5px !important;
    opacity: 0.4 !important;
    transition: opacity 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent .parallel-line:hover,
div.simlytiks.simlytiks-theme-modern .viewContent .parallel-line.highlighted,
div.simlytiks.simlytiks-theme-modern .viewContent .foreground path:hover,
div.simlytiks.simlytiks-theme-modern .viewContent .foreground path.highlighted {
    opacity: 1 !important;
    stroke-width: 2.5px !important;
}


/* ================================================================
   17. RADAR
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .radar-area {
    fill-opacity: 0.2 !important;
    stroke-width: 2px !important;
}


/* ================================================================
   18. SANKEY
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .node rect {
    rx: 4px;
    ry: 4px;
}
div.simlytiks.simlytiks-theme-modern .viewContent .link {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent .link:hover {
    opacity: 0.6;
}


/* ================================================================
   19. TREEMAP
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .treemap-cell rect {
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 2px !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent .treemap-cell text {
    font-size: 11px !important;
    fill: var(--sl-text-primary, #1E293B) !important;
}


/* ================================================================
   20. CALENDAR
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.day {
    rx: 2px;
    ry: 2px;
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 1px !important;
}


/* ================================================================
   21. TABLES (pivot, summary, ranking, filterable)
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent table th {
    background: var(--sl-n-50, #F8FAFC) !important;
    color: var(--sl-text-primary, #1E293B) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    border-bottom: 2px solid var(--sl-border, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent table td {
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--sl-text-primary, #1E293B) !important;
    border-bottom: 1px solid var(--sl-border, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent table tr:nth-child(even) td {
    background: var(--sl-n-50, #F8FAFC);
}
div.simlytiks.simlytiks-theme-modern .viewContent table tr:hover td {
    background: var(--sl-accent-light, rgba(59,130,246,0.08));
}


/* ================================================================
   22. CHORD
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent path.chord {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .viewContent path.chord:hover {
    opacity: 1;
}


/* ================================================================
   23. GANTT
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.task-bar {
    rx: 6px;
    ry: 6px;
}


/* ================================================================
   24. DECISION TREE
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .dtree-node-box {
    border-radius: var(--sl-r-md, 8px);
    border: 1px solid var(--sl-border, #E2E8F0);
    box-shadow: var(--sl-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    background: var(--sl-bg-surface, #FFFFFF);
}


/* ================================================================
   25. FORCE DIRECTED GRAPH
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent circle.node {
    stroke: var(--sl-bg-surface, #FFFFFF) !important;
    stroke-width: 2px !important;
}
div.simlytiks.simlytiks-theme-modern .viewContent line.link {
    stroke: var(--sl-n-300, #CBD5E1) !important;
    stroke-width: 1px !important;
}


/* ================================================================
   26. VIOLIN PLOT
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent path.violin {
    fill-opacity: 0.6 !important;
    stroke-width: 1.5px !important;
}


/* ================================================================
   27. GROUPED CHART CONTAINERS
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .grouped_chart_container {
    border: 1px solid var(--sl-border, #E2E8F0);
    border-radius: var(--sl-r-lg, 12px);
    overflow: hidden;
}
div.simlytiks.simlytiks-theme-modern .grouped_chart_container .grouped_view {
    border-color: var(--sl-border, #E2E8F0);
}


/* ================================================================
   28. PAGE TAB BAR
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .sl-page-tabs,
div.simlytiks.simlytiks-theme-modern .simlytiks-nav-tabs {
    background: var(--sl-bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--sl-border, #E2E8F0);
}
div.simlytiks.simlytiks-theme-modern .sl-page-tabs > li > a,
div.simlytiks.simlytiks-theme-modern .simlytiks-nav-tabs > li > a {
    color: var(--sl-text-secondary, #475569);
    font-size: 13px;
    padding: 8px 16px;
    border: none !important;
    border-bottom: 2px solid transparent;
    background: transparent !important;
    transition: all 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .sl-page-tabs > li.active > a,
div.simlytiks.simlytiks-theme-modern .simlytiks-nav-tabs > li.active > a {
    color: var(--sl-accent, #3B82F6) !important;
    font-weight: 500;
    border-bottom-color: var(--sl-accent, #3B82F6);
    background: transparent !important;
}
div.simlytiks.simlytiks-theme-modern .sl-page-tabs > li > a:hover,
div.simlytiks.simlytiks-theme-modern .simlytiks-nav-tabs > li > a:hover {
    color: var(--sl-text-primary, #1E293B);
    background: var(--sl-accent-light, rgba(59,130,246,0.08)) !important;
}


/* ================================================================
   29. FILTER BAR
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .sl-filter-container,
div.simlytiks.simlytiks-theme-modern .viz-filter-bar {
    background: var(--sl-n-50, #F8FAFC);
    border-radius: var(--sl-r-md, 8px);
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Floating filter panel */
div.simlytiks.simlytiks-theme-modern .floating-ff {
    background: var(--sl-bg-surface, #FFFFFF);
    border: 1px solid var(--sl-border, #E2E8F0);
    border-radius: var(--sl-r-md, 8px);
    box-shadow: var(--sl-sh-md, 0 4px 12px rgba(0,0,0,0.10));
    padding: 10px 14px;
    margin: 4px 0;
}

/* Form filters container */
div.simlytiks.simlytiks-theme-modern .formfilters-container {
    background: var(--sl-n-50, #F8FAFC);
    border-radius: var(--sl-r-md, 8px);
    padding: 8px 12px;
    margin-top: 6px;
}


/* ================================================================
   30. VIZ OPTIONS PANEL
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viz-options-panel,
div.simlytiks.simlytiks-theme-modern .viz-options-btn-group {
    background: var(--sl-bg-surface, #FFFFFF);
    border: 1px solid var(--sl-border, #E2E8F0);
    border-radius: var(--sl-r-md, 8px);
    box-shadow: var(--sl-sh-md, 0 4px 12px rgba(0,0,0,0.10));
}


/* ================================================================
   31. FLOATING ACTION BUTTONS
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent .floating-btn {
    background: rgba(255,255,255,0.95);
    border-radius: var(--sl-r-md, 8px);
    box-shadow: var(--sl-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    padding: 4px;
    display: flex;
    gap: 2px;
}
div.simlytiks.simlytiks-theme-modern .viewContent .floating-btn button,
div.simlytiks.simlytiks-theme-modern .viewContent .floating-btn a {
    width: 28px;
    height: 28px;
    border-radius: var(--sl-r-sm, 4px);
    border: none;
    background: transparent;
    color: var(--sl-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
div.simlytiks.simlytiks-theme-modern .viewContent .floating-btn button:hover,
div.simlytiks.simlytiks-theme-modern .viewContent .floating-btn a:hover {
    background: var(--sl-n-100, #F1F5F9);
    color: var(--sl-text-primary, #1E293B);
}


/* ================================================================
   32. CHART BORDER (inside SVG)
   ================================================================ */

div.simlytiks.simlytiks-theme-modern .viewContent rect.chart-border {
    stroke: var(--sl-n-200, #E2E8F0) !important;
    fill: none !important;
}


/* ================================================================
   DARK MODE OVERRIDES
   Scoped under div.simlytiks.simlytiks-theme-modern.sl-dark
   Elements that need explicit dark overrides beyond token switching
   ================================================================ */

/* Viz slot container */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent {
    background: var(--sl-bg-surface, #1e2a4a);
    border-color: var(--sl-border);
}

/* Floating action buttons */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .floating-btn {
    background: rgba(22, 33, 62, 0.95) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .floating-btn button:hover,
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .floating-btn a:hover {
    background: var(--sl-n-200) !important;
}

/* SVG elements that use bg-surface as stroke for gap effect */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent path.arc {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent rect.cell {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent circle.dot {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .treemap-cell rect {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent circle.node {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent rect.day {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}

/* Force graph links */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent line.link {
    stroke: var(--sl-border) !important;
}

/* Decision tree nodes */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .dtree-node-box {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* Grouped chart containers */
div.simlytiks.simlytiks-theme-modern.sl-dark .grouped_chart_container {
    border-color: var(--sl-border) !important;
}

/* Chart border */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent rect.chart-border {
    stroke: var(--sl-border) !important;
}

/* Legends */
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-legends-container {
    background: var(--sl-bg-surface, #1e2a4a) !important;
    border-color: var(--sl-border) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-legends-container div.legend-header {
    border-color: var(--sl-border);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-legends-container .legend-search-container input,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-legends-container .legend-search-container input {
    background: var(--sl-n-100, #1e2a4a);
    border-color: var(--sl-border);
    color: var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-legends-container .legend-container-options .dropdown-menu,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-legends-container .legend-container-options .dropdown-menu {
    background: var(--sl-bg-surface);
    border-color: var(--sl-border);
}

/* Tables */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent table th {
    background: var(--sl-bg-canvas, #0f1629) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent table tr:nth-child(even) td {
    background: rgba(255,255,255,0.03);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent table tr:hover td {
    background: rgba(59,130,246,0.08);
}

/* Tooltips */
div.simlytiks.simlytiks-theme-modern.sl-dark .d3-tip,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-tooltip,
div.simlytiks.simlytiks-theme-modern.sl-dark .svg-tip,
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-viz-tooltip {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* Filter bar */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-filter-container,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-filter-bar {
    background: var(--sl-n-100);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .floating-ff {
    background: var(--sl-bg-surface);
    border-color: var(--sl-border);
}

/* Histogram bars */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent rect.histogram-bar,
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent .histogram rect {
    stroke: var(--sl-bg-surface, #1e2a4a) !important;
}

/* Box plot */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent rect.box {
    stroke: var(--sl-border) !important;
}

/* Viz options panel */
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-options-panel,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-options-btn-group {
    background: var(--sl-bg-surface);
    border-color: var(--sl-border);
}

/* ================================================================
   Empty-state for missing responses (sl-viz-invalid-tpl)
   Added 2026-05-20 — reporter sanitization
   Works across classic + modern themes; scoped to div.simlytiks.
   ================================================================ */
div.simlytiks .sl-viz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    padding: 20px 24px;
    text-align: center;
    color: var(--sl-text-secondary, var(--d3v-text-secondary, #475569));
    background: transparent;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--sl-bg-secondary, var(--d3v-bg-secondary, #F1F5F9));
    box-shadow: var(--sl-sh-sm, var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08)));
    margin-bottom: 4px;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.85;
}
/** Added by shashank2104 on 05/28/2026 - inline SVG fallback inside the empty-icon container. Uses currentColor so theme color travels through. **/
div.simlytiks .sl-viz-empty-state .sl-viz-empty-icon svg {
    width: 36px;
    height: 36px;
    color: var(--sl-text-muted, var(--d3v-text-muted, #94A3B8));
    opacity: 0.9;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--sl-text-primary, var(--d3v-text-primary, #0F172A));
    letter-spacing: -0.01em;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-body {
    font-size: 13px;
    line-height: 1.5;
    max-width: 480px;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-cols {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-col-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sl-accent-primary, var(--d3v-accent-primary, #0EA5E9));
    background: var(--sl-bg-accent-soft, rgba(14, 165, 233, 0.10));
    border: 1px solid var(--sl-border, var(--d3v-border-color, #E2E8F0));
    border-radius: 999px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/** Added by shashank2104 on 05/28/2026 - subdued "+N more" overflow chip when the expected-cols list exceeds 6. **/
div.simlytiks .sl-viz-empty-state .sl-viz-empty-col-tag.sl-viz-empty-col-more {
    color: var(--sl-text-muted, var(--d3v-text-muted, #94A3B8));
    background: var(--sl-bg-secondary, var(--d3v-bg-secondary, #F1F5F9));
    font-style: italic;
}
/** Added by shashank2104 on 05/28/2026 - variant for the `_nicePlaceholder`-tagged "no-records" case (smart-exclude pass): slightly softer accent so it reads as expected-empty, not as an error state. **/
div.simlytiks .sl-viz-empty-state[data-empty-reason="no-records"] .sl-viz-empty-col-tag {
    color: var(--sl-text-secondary, var(--d3v-text-secondary, #475569));
    background: var(--sl-bg-secondary, var(--d3v-bg-secondary, #F1F5F9));
    border-color: var(--sl-border, var(--d3v-border-color, #E2E8F0));
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-hint {
    font-size: 12px;
    color: var(--sl-text-muted, var(--d3v-text-muted, #94A3B8));
    margin-top: 4px;
}
div.simlytiks .sl-viz-empty-state .sl-viz-empty-hint i {
    margin-right: 4px;
    color: var(--sl-accent-primary, var(--d3v-accent-primary, #0EA5E9));
}

/** Added by shashank2104 on 01/22/2026 - DVFIV-1899 - Modern Theme CSS Variables **/
div.simlytiks.simlytiks-theme-modern {
    --sl-bg-primary: #FFFFFF;
    --sl-bg-secondary: #F8FAFC;
    --sl-bg-tertiary: #F1F5F9;
    --sl-bg-hover: #E2E8F0;
    --sl-text-primary: #1E293B;
    --sl-text-secondary: #475569;
    --sl-text-muted: #94A3B8;
    --sl-border-color: #E2E8F0;
    --sl-accent-primary: #3B82F6;
    --sl-accent-hover: #2563EB;
    --sl-accent-success: #10B981;
    --sl-accent-danger: #EF4444;
    --sl-border-radius-sm: 6px;
    --sl-border-radius-md: 8px;
    --sl-border-radius-lg: 12px;
    --sl-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --sl-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --sl-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --sl-header-height: 56px;
    --sl-transition: all 0.15s ease;
    --sl-spacing-xs: 4px;
    --sl-spacing-sm: 8px;
    --sl-spacing-md: 16px;
    --sl-spacing-lg: 24px;
    --sl-spacing-xl: 32px;
    /** Added by shashank2104 on 01/23/2026 - Additional CSS variables for form inputs and focus states **/
    --sl-input-height: 40px;
    --sl-input-padding: 10px 14px;
    --sl-input-border-radius: var(--sl-border-radius-md);
    --sl-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
    --sl-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.1);
    --sl-input-transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/** Added by shashank2104 on 04/02/2026 - SIM-994 - Dark mode overrides for foundation tokens (--sl-bg-primary etc.) **/
/** These align with sl-modern-dark-overrides.css palette **/
div.simlytiks.simlytiks-theme-modern.sl-dark {
    --sl-bg-primary: #1a2744;
    --sl-bg-secondary: #16213e;
    --sl-bg-tertiary: #0f1629;
    --sl-bg-hover: #1f3050;
    --sl-text-primary: #E2E8F0;
    --sl-text-secondary: #94A3B8;
    --sl-text-muted: #64748B;
    --sl-border-color: rgba(148, 163, 184, 0.15);
    --sl-accent-primary: #60A5FA;
    --sl-accent-hover: #3B82F6;
    --sl-accent-success: #34D399;
    --sl-accent-danger: #F87171;
    --sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --sl-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --sl-surface-hover: #334155;
    --sl-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/** DVFIV-1899 - Modern Header Level 1 (top bar) **/
div.simlytiks.simlytiks-theme-modern .d3view-plugin-header {
    height: auto !important;
    min-height: var(--sl-header-height) !important;
    background: var(--sl-bg-primary) !important;
    border-bottom: none !important;
    box-shadow: var(--sl-shadow-sm) !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/** DVFIV-1899 - Reset toggle_sidebar positioning for modern theme **/
/* div.simlytiks.simlytiks-theme-modern .toggle_sidebar {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: var(--sl-border-radius-md) !important;
    border: 1px solid var(--sl-border-color) !important;
    background: var(--sl-bg-primary) !important;
    transition: var(--sl-transition) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .toggle_sidebar:hover {
    background: var(--sl-bg-tertiary) !important;
    border-color: var(--sl-text-muted) !important;
} */

/** DVFIV-1899 - Modern logo container - inline with hamburger **/
div.simlytiks.simlytiks-theme-modern .plugin-logo-container {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-logo-container img {
    width: 36px !important;
    height: 36px !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-name .sl-name {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--sl-text-primary) !important;
}

/** DVFIV-1899 - Modern header right section **/
div.simlytiks.simlytiks-theme-modern .plugin-header-right {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level1 {
    align-items: center !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

/** DVFIV-1899 - Modern control buttons - fix overlapping **/
div.simlytiks.simlytiks-theme-modern .control-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    margin-right: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .control-buttons .btn {
    white-space: nowrap !important;
    border-radius: var(--sl-border-radius-sm) !important;
}

div.simlytiks.simlytiks-theme-modern .control-buttons .dropdown {
    margin-right: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .control-buttons .btn-outline-on-hover {
    padding: 6px 10px !important;
}

/** DVFIV-1899 - Modern header links styling **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .pl-link {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    border-radius: var(--sl-border-radius-sm) !important;
    color: var(--sl-text-secondary) !important;
    transition: var(--sl-transition) !important;
    white-space: nowrap !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .pl-link:hover {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-text-primary) !important;
    text-decoration: none !important;
}

/** DVFIV-1899 - Hide pipe dividers in modern theme **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .pipe,
div.simlytiks.simlytiks-theme-modern .d3view-plugin-header .pipe {
    display: none !important;
}

/** DVFIV-1899 - Modern header flex containers **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .pl-flex,
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .d3view-flex-v {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right > span,
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right > div {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/** DVFIV-1899 - Modern dataset share container **/
div.simlytiks.simlytiks-theme-modern .dataset-share-container {
    gap: 0 !important;
}

/** DVFIV-1899 - Modern global filters/settings dropdowns **/
div.simlytiks.simlytiks-theme-modern .sl-global-filters-container,
div.simlytiks.simlytiks-theme-modern .sl-global-settings {
    margin-right: 0 !important;
}

/** DVFIV-1899 - Modern Header Level 2 (menu bar) **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level-2 {
    background: var(--sl-bg-secondary) !important;
    border-top: 1px solid var(--sl-border-color) !important;
    padding: 6px 12px !important;
    margin-top: 4px !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level-2 .wf-dropdowns {
    background: transparent !important;
}

/** DVFIV-1899 - Modern menu tabs (File, Edit, View, etc.) **/
div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 > li {
    margin: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 > li > a:not(.btn) {
    padding: 8px 14px !important;
    border-radius: var(--sl-border-radius-sm) !important;
    color: var(--sl-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: var(--sl-transition) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 > li > a.btn {
    padding: 8px 14px !important;
}

div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 > li > a:hover,
div.simlytiks.simlytiks-theme-modern .wf-dropdowns .dropdowns-list.menu-level-1 > li.open > a {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-text-primary) !important;
    border-color: var(--sl-border-color) !important;
}

/** DVFIV-1899 - Modern dropdown menus **/
div.simlytiks.simlytiks-theme-modern .dropdown-menu {
    border-radius: var(--sl-border-radius-md) !important;
    border: 1px solid var(--sl-border-color) !important;
    box-shadow: var(--sl-shadow-md) !important;
    padding: 6px !important;
    margin-top: 4px !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > li > a {
    padding: 8px 12px !important;
    border-radius: var(--sl-border-radius-sm) !important;
    transition: var(--sl-transition) !important;
    font-size: 13px !important;
    color: var(--sl-text-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > li > a:hover {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-text-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > li.checked > a::before {
    content: '\2713' !important;
    margin-right: 8px !important;
    color: var(--sl-accent-success) !important;
    font-weight: bold !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu .divider {
    margin: 6px 0 !important;
    background-color: var(--sl-border-color) !important;
}

/** SIM-994 fix — Global dropdown-submenu support for modern theme (Sort/Group submenus) **/
div.simlytiks.simlytiks-theme-modern .dropdown-submenu {
    position: relative;
}
div.simlytiks.simlytiks-theme-modern .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: 0;
    border-radius: var(--sl-border-radius-md) !important;
}
div.simlytiks.simlytiks-theme-modern .dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
div.simlytiks.simlytiks-theme-modern .dropdown-submenu > a::after {
    content: '\f0da';
    font-family: 'FontAwesome';
    float: right;
    margin-left: 8px;
    color: var(--sl-text-muted);
    font-size: 11px;
}

/** Added by shashank2104 on 01/23/2026 at 10:54 AM - DVFIV-1899 - Modern page layouts styling **/
div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts {
    gap: 8px !important;
    padding: 8px !important;
    background: var(--sl-bg-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout {
    background: var(--sl-bg-secondary) !important;
    border: 1px solid var(--sl-border-color) !important;
    border-radius: var(--sl-border-radius-md) !important;
    transition: var(--sl-transition) !important;
    box-shadow: var(--sl-shadow-sm) !important;
    margin: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout:hover {
    background: var(--sl-bg-tertiary) !important;
    border-color: var(--sl-accent-primary) !important;
    box-shadow: var(--sl-shadow-md) !important;
    transform: translateY(-1px) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
    border-color: var(--sl-accent-primary) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--sl-shadow-md) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout i.layout-icon {
    color: var(--sl-text-secondary) !important;
    transition: var(--sl-transition) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout:hover i.layout-icon,
div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout.active i.layout-icon {
    color: var(--sl-accent-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout .column_label {
    color: var(--sl-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

div.simlytiks.simlytiks-theme-modern .dropdown-menu > .page-layouts .page-layout.active .column_label {
    color: var(--sl-accent-primary) !important;
    font-weight: 600 !important;
}

/** Added by shashank2104 on 01/23/2026 at 10:54 AM - DVFIV-1899 - Modern charts list item styling (Elevated Card Design) **/
div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list {
    padding: 8px !important;
    background: var(--sl-bg-secondary) !important;
    border: none !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list ul.list-group {
    gap: 8px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item {
    background: var(--sl-bg-primary) !important;
    border: 1px solid var(--sl-border-color) !important;
    border-radius: var(--sl-border-radius-md) !important;
    padding: 14px !important;
    margin-bottom: 0 !important;
    box-shadow: var(--sl-shadow-sm) !important;
    transition: var(--sl-transition) !important;
    cursor: pointer !important;
}
div.simlytiks.simlytiks-theme-modern .sl-charts-container[data-view="grid"] .charts-list-item {
	width: calc(100%/6 - 8px)!important;
}
div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item:hover {
    background: var(--sl-bg-secondary) !important;
    border-color: var(--sl-accent-primary) !important;
    box-shadow: var(--sl-shadow-md) !important;
    transform: translateY(-2px) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-thumbnail {
    border-radius: var(--sl-border-radius-sm) !important;
    overflow: hidden !important;
    background: var(--sl-bg-tertiary) !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--sl-text-primary) !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-description {
    font-size: 12px !important;
    color: var(--sl-text-secondary) !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-tags {
    margin-top: 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-tags .label {
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-transitions {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .viz-transitions span.dimgrey {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .control-buttons {
    margin-top: 10px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .control-buttons .btn {
    border-radius: var(--sl-border-radius-sm) !important;
    transition: var(--sl-transition) !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item .chart-options {
    opacity: 0 !important;
    transition: var(--sl-transition) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-charts-container .charts-list .charts-list-item:hover .chart-options {
    opacity: 1 !important;
}

/** DVFIV-1899 - Modern primary buttons (Add Visualization, Run ML) **/
div.simlytiks.simlytiks-theme-modern .btn-primary {
    background: linear-gradient(135deg, var(--sl-accent-primary) 0%, var(--sl-accent-hover) 100%) !important;
    border: none !important;
    border-radius: var(--sl-border-radius-sm) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
    font-weight: 500 !important;
    transition: var(--sl-transition) !important;
}

div.simlytiks.simlytiks-theme-modern .btn-primary:hover {
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px) !important;
}

div.simlytiks.simlytiks-theme-modern .btn-success {
    background: linear-gradient(135deg, var(--sl-accent-success) 0%, #059669 100%) !important;
    border: none !important;
    border-radius: var(--sl-border-radius-sm) !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
    font-weight: 500 !important;
    transition: var(--sl-transition) !important;
}

div.simlytiks.simlytiks-theme-modern .btn-success:hover {
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px) !important;
}

/** DVFIV-1899 - Modern outline buttons **/
div.simlytiks.simlytiks-theme-modern .btn-outline-on-hover {
    border-radius: var(--sl-border-radius-sm) !important;
    transition: var(--sl-transition) !important;
    border: 1px solid transparent !important;
}

div.simlytiks.simlytiks-theme-modern .btn-outline-on-hover:hover {
    background: var(--sl-bg-tertiary) !important;
    border-color: var(--sl-border-color) !important;
}

/** DVFIV-1899 - Modern sidebar toggle icon **/
div.simlytiks.simlytiks-theme-modern .toggle_sidebar i {
    font-size: 16px !important;
    color: var(--sl-text-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .toggle_sidebar:hover i {
    color: var(--sl-text-primary) !important;
}

/** Added by shashank2104 on 01/22/2026 - DVFIV-1899 - Phase 2: Modern Header Styling (CSS-only approach) **/
/** Modern theme header styling - logo/name in one line, level-2 full width **/
div.simlytiks.simlytiks-theme-modern .d3view-plugin-header {
    flex-wrap: wrap !important;
    padding: 8px 7px 0 7px !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-right {
    flex: 1 1 100% !important;
    order: 2 !important;
}

div.simlytiks.simlytiks-theme-modern .plugin-header-level-2 {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/** DVFIV-1899 - Phase 2: Hide btn-label in modern theme header actions **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .btn-label {
    display: none !important;
}

/** DVFIV-1899 - Phase 2: Fix spacing after comments container **/
div.simlytiks.simlytiks-theme-modern .sl-comments-container {
    margin-right: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-comments-container .pipe {
    display: none !important;
}

/** DVFIV-1899 - Phase 2: Tooltips for action buttons - add cursor pointer **/
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .pl-link,
div.simlytiks.simlytiks-theme-modern .plugin-header-level1-right .btn {
    cursor: pointer !important;
}

/** ========================================================================== **/
/** DVFIV-1899 - Phase 2: PREMIUM RESPONSES PANEL CSS                          **/
/** Added by shashank2104 on 01/22/2026                                        **/
/** ========================================================================== **/

/** Additional CSS Variables for Type Badges **/
div.simlytiks.simlytiks-theme-modern {
    --sl-accent-warning: #F59E0B;
    --sl-accent-warning-light: rgba(245, 158, 11, 0.15);
    --sl-type-numeric-bg: #DBEAFE;
    --sl-type-numeric-text: #1D4ED8;
    --sl-type-text-bg: #D1FAE5;
    --sl-type-text-text: #047857;
    --sl-type-datetime-bg: #EDE9FE;
    --sl-type-datetime-text: #6D28D9;
    --sl-type-curve-bg: #FFEDD5;
    --sl-type-curve-text: #C2410C;
    --sl-type-boolean-bg: #FCE7F3;
    --sl-type-boolean-text: #BE185D;
    --sl-type-media-bg: #FEF3C7;
    --sl-type-media-text: #B45309;
    --sl-type-dataset-bg: #E0E7FF;
    --sl-type-dataset-text: #4338CA;
    --sl-type-3d-bg: #CCFBF1;
    --sl-type-3d-text: #0D9488;
    --sl-search-highlight: #FEF08A;
}

/** Modern Responses Panel Container **/
div.simlytiks.simlytiks-theme-modern .responses-panel {
    background: var(--sl-bg-primary) !important;
    border-radius: var(--sl-border-radius-md) !important;
}

div.simlytiks.simlytiks-theme-modern .responses-panel .list-group-header:not(.sc-group-header) {
    background: var(--sl-bg-primary) !important;
    border-bottom: 1px solid var(--sl-border-color) !important;
    padding: 12px 16px !important;
}

div.simlytiks.simlytiks-theme-modern .responses-panel .list-group-header h3 {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--sl-text-secondary) !important;
    margin: 0 !important;
}

/** SIM-994 fix — Ensure response panel dropdowns and submenus appear above main content **/
div.simlytiks.simlytiks-theme-modern .responses-panel .list-group-header .dropdown > .dropdown-menu {
    z-index: 1050;
}
/** SIM-994 fix — Sidebar submenus expand inline (nested) to avoid clipping by sidebar overflow **/
div.simlytiks.simlytiks-theme-modern .sl-side-bar .dropdown-submenu > .dropdown-menu,
div.simlytiks.simlytiks-theme-modern .responses-panel .dropdown-submenu > .dropdown-menu {
    position: static !important;
    float: none !important;
    box-shadow: none !important;
    border: none !important;
    border-left: 2px solid var(--sl-accent, #3B82F6) !important;
    padding: 2px 0 2px 4px !important;
    margin: 4px 0 0 12px !important;
    background: transparent !important;
    min-width: 0 !important;
}

/** Quick Stats Card **/
div.simlytiks.simlytiks-theme-modern .sl-quick-stats {
    background: var(--sl-bg-secondary) !important;
    border-radius: var(--sl-border-radius-md) !important;
    padding: 12px 16px !important;
    margin: 8px 12px !important;
    border: 1px solid var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-quick-stats-summary {
    font-size: 12px !important;
    color: var(--sl-text-secondary) !important;
    margin-bottom: 8px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-quick-stats-types {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/** Type Badge Pills - Clickable for filtering **/
div.simlytiks.simlytiks-theme-modern .sl-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 2px solid transparent !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge:hover {
    transform: scale(1.05) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.active {
    border-color: currentColor !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.quantitative,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.numeric {
    background: var(--sl-type-numeric-bg) !important;
    color: var(--sl-type-numeric-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.categorical,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.text {
    background: var(--sl-type-text-bg) !important;
    color: var(--sl-type-text-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.datetime {
    background: var(--sl-type-datetime-bg) !important;
    color: var(--sl-type-datetime-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.curveplot,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.curve {
    background: var(--sl-type-curve-bg) !important;
    color: var(--sl-type-curve-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.boolean {
    background: var(--sl-type-boolean-bg) !important;
    color: var(--sl-type-boolean-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.imagegallery,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.media {
    background: var(--sl-type-media-bg) !important;
    color: var(--sl-type-media-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.kv_dataset,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.define_table,
div.simlytiks.simlytiks-theme-modern .sl-type-badge.dataset {
    background: var(--sl-type-dataset-bg) !important;
    color: var(--sl-type-dataset-text) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-type-badge.3dview {
    background: var(--sl-type-3d-bg) !important;
    color: var(--sl-type-3d-text) !important;
}

/** Stacked Card Layout for Response Items **/
div.simlytiks.simlytiks-theme-modern .sl-response-card {
    background: var(--sl-bg-primary) !important;
    border: 1px solid var(--sl-border-color) !important;
    border-radius: var(--sl-border-radius-md) !important;
    margin: 8px 12px !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    cursor: move !important;
    overflow: hidden !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sl-shadow-md) !important;
    border-color: var(--sl-accent-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card.ui-selected {
    border-color: var(--sl-accent-primary) !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sl-border-color) !important;
    background: var(--sl-bg-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--sl-text-primary) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-body {
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card:hover .sl-response-card-actions {
    opacity: 1 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card-actions .btn {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/** Null Indicator - Amber pill **/
div.simlytiks.simlytiks-theme-modern .sl-nulls-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: var(--sl-accent-warning-light) !important;
    color: #D97706 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-nulls-indicator i {
    font-size: 9px !important;
}

/** Added by shashank2104 on 04/02/2026 - SIM-994 - Horizontal boxplot container **/
div.simlytiks.simlytiks-theme-modern .sl-sparkline {
    display: block !important;
    height: 28px !important;
    width: 100% !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-sparkline svg {
    width: 100% !important;
    height: 28px !important;
    overflow: visible !important;
}

/** Response Range Display **/
div.simlytiks.simlytiks-theme-modern .sl-response-range {
    font-size: 11px !important;
    color: var(--sl-text-muted) !important;
    white-space: nowrap !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-range .sl-range-arrow {
    margin: 0 4px !important;
    color: var(--sl-text-muted) !important;
}

/** Unique Values Count **/
div.simlytiks.simlytiks-theme-modern .sl-unique-count {
    font-size: 11px !important;
    color: var(--sl-text-muted) !important;
}

/** Mini Pie for Categorical **/
div.simlytiks.simlytiks-theme-modern .sl-mini-pie {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: conic-gradient(
        var(--sl-accent-primary) 0% 40%,
        var(--sl-accent-success) 40% 65%,
        var(--sl-type-curve-bg) 65% 85%,
        var(--sl-border-color) 85% 100%
    ) !important;
    flex-shrink: 0 !important;
}

/** Added by shashank2104 on 01/22/2026 - DVFIV-1899 - Modern Theme Visualizations **/

/** Stats Row for Numeric Columns — updated for 5-number boxplot summary **/
div.simlytiks.simlytiks-theme-modern .sl-stats-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
    font-size: 10px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

div.simlytiks.simlytiks-theme-modern .sl-stat-label {
    color: var(--sl-text-muted) !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-stat-value {
    font-weight: 600 !important;
    color: var(--sl-text-primary) !important;
}

/** Categorical Mini Horizontal Bars with Labels **/
div.simlytiks.simlytiks-theme-modern .sl-category-bar {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 3px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-label {
    flex: 0 0 auto !important;
    max-width: 50px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--sl-text-tertiary) !important;
    font-size: 9px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-bar-wrapper {
    flex: 1 !important;
    height: 6px !important;
    background: var(--sl-surface-hover) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-bar-fill {
    height: 100% !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-bar-0 { background: var(--sl-accent-primary) !important; }
div.simlytiks.simlytiks-theme-modern .sl-category-bar-1 { background: var(--sl-accent-success) !important; }
div.simlytiks.simlytiks-theme-modern .sl-category-bar-2 { background: var(--sl-accent-warning) !important; }

div.simlytiks.simlytiks-theme-modern .sl-category-count {
    flex: 0 0 auto !important;
    color: var(--sl-text-secondary) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    min-width: 18px !important;
    text-align: right !important;
}

div.simlytiks.simlytiks-theme-modern .sl-category-more {
    font-size: 9px !important;
    color: var(--sl-text-tertiary) !important;
    font-style: italic !important;
    margin-top: 2px !important;
}

/** Boolean Progress Bar **/
div.simlytiks.simlytiks-theme-modern .sl-boolean-bar {
    display: flex !important;
    height: 8px !important;
    width: 100% !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-boolean-true {
    background: var(--sl-accent-success) !important;
    height: 100% !important;
    border-radius: 4px 0 0 4px !important;
    transition: width 0.3s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-boolean-false {
    background: var(--sl-text-muted) !important;
    opacity: 0.3 !important;
    height: 100% !important;
    border-radius: 0 4px 4px 0 !important;
    transition: width 0.3s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-boolean-label {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
    margin-left: auto !important;
}

/** Added by shashank2104 on 04/02/2026 - SIM-994 - Density strip for datetime **/
div.simlytiks.simlytiks-theme-modern .sl-datetime-timeline {
    display: block !important;
    height: 28px !important;
    width: 100% !important;
    gap: 1px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-datetime-timeline svg {
    width: 100% !important;
    height: 28px !important;
    overflow: visible !important;
}

div.simlytiks.simlytiks-theme-modern .sl-datetime-bar {
    flex: 1 !important;
    background: var(--sl-accent-primary) !important;
    border-radius: 1px !important;
    min-width: 2px !important;
    transition: height 0.3s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-datetime-bar:hover {
    background: var(--sl-accent-hover) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-date-range {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
    width: 100% !important;
    margin-top: 2px !important;
}

/** Added by shashank2104 on 04/02/2026 - SIM-994 - Full-width resizable curve preview **/
div.simlytiks.simlytiks-theme-modern .sl-curve-preview {
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-curve-preview svg {
    width: 100% !important;
    height: 28px !important;
    overflow: visible !important;
}

div.simlytiks.simlytiks-theme-modern .sl-curve-preview path {
    fill: none !important;
    stroke: var(--sl-accent-primary) !important;
    stroke-width: 1.5px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-curve-label {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
}

/** Added by shashank2104 on 04/02/2026 - SIM-994 - Larger image thumbs with object-fit **/
div.simlytiks.simlytiks-theme-modern .sl-media-thumbs {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}

div.simlytiks.simlytiks-theme-modern .sl-media-thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--d3v-r-sm, 4px) !important;
    object-fit: contain !important;
    background-color: var(--sl-bg-secondary) !important;
    border: 1px solid var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-media-count {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
    margin-left: auto !important;
}

/** 3D View Icon **/
div.simlytiks.simlytiks-theme-modern .sl-3d-icon {
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--sl-type-3d-bg) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-3d-icon i {
    color: var(--sl-type-3d-color) !important;
    font-size: 12px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-3d-count {
    font-size: 10px !important;
    color: var(--sl-text-muted) !important;
    margin-left: auto !important;
}

/** Dataset/KeyValue Info **/
div.simlytiks.simlytiks-theme-modern .sl-dataset-info {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--sl-type-media-bg) !important;
    color: var(--sl-accent-primary) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .sl-dataset-info i {
    font-size: 14px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-dataset-dims {
    font-size: 10px !important;
    color: var(--sl-text-secondary) !important;
}

/** Media Thumb More Indicator **/
div.simlytiks.simlytiks-theme-modern .sl-media-thumb-more {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--sl-surface-hover) !important;
    color: var(--sl-text-tertiary) !important;
    border-radius: var(--d3v-r-sm, 4px) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

/** End DVFIV-1899 Modern Theme Visualizations **/

/** Loading Skeleton **/
div.simlytiks.simlytiks-theme-modern .sl-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: sl-shimmer 1.5s infinite !important;
    border-radius: var(--sl-border-radius-md) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-skeleton-card {
    height: 70px !important;
    margin: 8px 12px !important;
}

@keyframes sl-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/** Empty State **/
div.simlytiks.simlytiks-theme-modern .sl-empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: var(--sl-text-muted) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-empty-state i {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.4 !important;
    display: block !important;
}

div.simlytiks.simlytiks-theme-modern .sl-empty-state-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--sl-text-secondary) !important;
    margin-bottom: 4px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-empty-state-message {
    font-size: 12px !important;
    color: var(--sl-text-muted) !important;
}

/** Rich Animations - Staggered List Entrance **/
div.simlytiks.simlytiks-theme-modern .sl-response-card {
    animation: sl-slideUp 0.3s ease-out backwards !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(1) { animation-delay: 0.03s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(2) { animation-delay: 0.06s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(3) { animation-delay: 0.09s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(4) { animation-delay: 0.12s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(5) { animation-delay: 0.15s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(6) { animation-delay: 0.18s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(7) { animation-delay: 0.21s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(8) { animation-delay: 0.24s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(9) { animation-delay: 0.27s !important; }
div.simlytiks.simlytiks-theme-modern .sl-response-card:nth-child(10) { animation-delay: 0.30s !important; }

@keyframes sl-slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Response Group Collapse Animation **/
div.simlytiks.simlytiks-theme-modern .sl-response-group-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: var(--sl-bg-tertiary) !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    border-radius: var(--sl-border-radius-sm) !important;
    margin: 4px 12px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-header:hover {
    background: var(--sl-bg-hover) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--sl-text-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-count {
    font-size: 11px !important;
    color: var(--sl-text-muted) !important;
    background: var(--sl-bg-primary) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-toggle {
    transition: transform 0.2s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group.collapsed .sl-response-group-toggle {
    transform: rotate(-90deg) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group-content {
    transition: max-height 0.3s ease, opacity 0.2s ease !important;
    overflow: hidden !important;
}

div.simlytiks.simlytiks-theme-modern .sl-response-group.collapsed .sl-response-group-content {
    max-height: 0 !important;
    opacity: 0 !important;
}

/** Search Highlight **/
div.simlytiks.simlytiks-theme-modern .sl-search-highlight {
    background: var(--sl-search-highlight) !important;
    padding: 0 2px !important;
    border-radius: 2px !important;
}

/** Modern Search Bar **/
div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern {
    position: relative !important;
    margin: 8px 12px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern input {
    width: 100% !important;
    padding: 10px 36px 10px 36px !important;
    border: 1px solid var(--sl-border-color) !important;
    border-radius: var(--sl-border-radius-md) !important;
    font-size: 13px !important;
    background: var(--sl-bg-primary) !important;
    transition: all 0.2s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern input:focus {
    outline: none !important;
    border-color: var(--sl-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern .sl-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--sl-text-muted) !important;
    font-size: 14px !important;
}

div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern .sl-search-clear {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--sl-text-muted) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

div.simlytiks.simlytiks-theme-modern .sl-search-bar-modern .sl-search-clear:hover {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-text-primary) !important;
}

/** Keyboard Navigation Highlight **/
div.simlytiks.simlytiks-theme-modern .sl-response-card.sl-keyboard-focus {
    border-color: var(--sl-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/** Reduce motion preference **/
@media (prefers-reduced-motion: reduce) {
    div.simlytiks.simlytiks-theme-modern .sl-response-card,
    div.simlytiks.simlytiks-theme-modern .sl-skeleton {
        animation: none !important;
    }
    
    div.simlytiks.simlytiks-theme-modern .sl-response-card:hover {
        transform: none !important;
    }
}

div.simlytiks.simlytiks-theme-modern .simlytiks-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100% - 45px);
}
div.simlytiks.simlytiks-theme-modern .simlytiks-wrapper .slBody.mainPanel {
    flex: 1 1 auto;
    overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .sl-side-bar .responses-panel {
	display: flex;
	flex-direction: column;
}
div.simlytiks.simlytiks-theme-modern .dropdowns-list .dropdown-menu {
    width: 275px;
}

/** ========================================================================== **/
/** SIM-994 Phase 1C — Hide right page-tabs vertical bar + Page ellipsis dropdown **/
/** ========================================================================== **/

/* Hide the per-page vertical tabs bar in modern mode (already hidden via template, belt-and-suspenders) */
/** Updated by shashank2104 on 2026-04-19 - R0-3424 - keep the ML-page right rail (Home / Output / Layouts / Options / Logs / Export) visible in Modern; only the non-ML page's vertical tabs stay hidden per SIM-994 Phase 1C. **/
div.simlytiks.simlytiks-theme-modern .sl-page:not(.ml-page) > .sl-page-tabs {
    display: none !important;
}

/* Page options ellipsis button */
div.simlytiks.simlytiks-theme-modern .sl-page-ellipsis-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sl-border-radius-md, 6px);
    color: var(--sl-text-secondary, #475569);
    border: 1px solid var(--sl-border-color, #E2E8F0);
    background: transparent;
    transition: all 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .sl-page-ellipsis-btn:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, #3B82F6);
    border-color: var(--sl-accent, #3B82F6);
}

/* Page options dropdown */
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    background: var(--sl-bg-primary, #FFFFFF);
    border: 1px solid var(--sl-border-color, #E2E8F0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 170px;
    padding: 4px 0;
    margin-top: 4px;
    list-style: none;
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown.show {
    display: block;
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 12px;
    color: var(--sl-text-primary, #1E293B);
    text-decoration: none;
    transition: background 0.12s ease;
    white-space: nowrap;
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li a:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.08));
    color: var(--sl-accent, #3B82F6);
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li a i {
    width: 14px;
    text-align: center;
    color: var(--sl-text-muted, #94A3B8);
    font-size: 12px;
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li a:hover i {
    color: var(--sl-accent, #3B82F6);
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown .sl-page-dd-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--sl-border-color, #E2E8F0);
    pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li[data-page-action="remove"] a {
    color: var(--sl-danger, #EF4444);
}
div.simlytiks.simlytiks-theme-modern .sl-page-options-dropdown li[data-page-action="remove"] a i {
    color: var(--sl-danger, #EF4444);
}

/** DVFIV-1899 / DVFIV-1956 — Modern vertical nav rail: plugins/simlytiks/sl-vertical-nav-rail.css (linked after this file in index.html) **/

/** ========================================================================== **/
/** DVFIV-1899 - Phase 3: Modern Footer - Unified Floating Dock (Option A)     **/
/** Added by shashank2104 on 01/23/2026 - Unified Floating Dock Design          **/
/** ========================================================================== **/

/* ============================================================================
   UNIFIED FLOATING DOCK - Main Container
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 20px !important;
    background: var(--sl-bg-secondary) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-top: 1px solid var(--sl-border-color) !important;
    box-shadow:
        0 -2px 8px rgba(0, 0, 0, 0.06),
        0 -1px 2px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    height: 40px !important;
    max-width: 100% !important;
    overflow: visible !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: sl-footerSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Subtle top handle indicator */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--sl-text-muted) !important;
    opacity: 0.3 !important;
    border-radius: 0 0 2px 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: ns-resize !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs:hover::before {
    opacity: 0.6 !important;
    width: 56px !important;
    background: var(--sl-accent-primary) !important;
}

/* ============================================================================
   DATASETS ICON ANCHOR - Replaces dark label with subtle icon
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading {
    padding: 0 12px 0 14px !important;
    background: transparent !important;
    color: var(--sl-text-muted) !important;
    font-size: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: auto !important;
    width: auto !important;
    position: relative !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hide the text span */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading span {
    display: none !important;
}

/* Icon-only anchor using ::before */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading::before {
    content: '\f1c0' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    color: var(--sl-text-muted) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: var(--sl-border-radius-md) !important;
}

/* Hover state for icon anchor */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading:hover::before {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-accent-primary) !important;
    transform: scale(1.05) !important;
}

/* Vertical divider after icon anchor */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.nav-tabs .simlytiks-tabs-heading::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 32px !important;
    background: var(--sl-border-color) !important;
    opacity: 0.6 !important;
}

/* ============================================================================
   DATASET TABS CONTAINER - Scrollable tab area
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    padding: 0 20px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--sl-text-muted) transparent !important;
}

/* Custom scrollbar styling */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs::-webkit-scrollbar {
    height: 4px !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs::-webkit-scrollbar-track {
    background: transparent !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs::-webkit-scrollbar-thumb {
    background: var(--sl-text-muted) !important;
    opacity: 0.3 !important;
    border-radius: 2px !important;
    transition: opacity 0.2s ease !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs:hover::-webkit-scrollbar-thumb {
    opacity: 0.5 !important;
}

/* ============================================================================
   INDIVIDUAL DATASET TABS - Transparent until hover/active
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item {
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:last-child {
	display: flex;
}
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--sl-border-radius-lg) !important;
    color: var(--sl-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-width: 280px !important;
    min-width: 100px !important;
    box-shadow: none !important;
    position: relative !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a i {
    font-size: 12px !important;
    color: var(--sl-text-muted) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    margin-right: 0 !important;
}

/* Hover state - Subtle background appears */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:hover > a {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-text-primary) !important;
    transform: translateY(-1px) !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:hover > a i {
    color: var(--sl-accent-primary) !important;
    transform: scale(1.1) !important;
}

/* Active state - Solid accent color */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item.active > a {
    background: var(--sl-accent-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.25),
        0 1px 3px rgba(59, 130, 246, 0.15) !important;
    transform: translateY(-1px) !important;
    animation: sl-tabActivate 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item.active > a i {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Active tab pulse animation */
@keyframes sl-tabActivate {
    0% {
        transform: translateY(-1px) scale(0.98);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        transform: translateY(-1px) scale(1);
        opacity: 1;
    }
}

/* Remove the bottom indicator bar - not needed with solid background */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item.active::after {
    display: none !important;
}

/* ============================================================================
   CLOSE BUTTON ON TABS - Smooth reveal on hover
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item .remove_sl_dataset {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    width: 20px !important;
    height: 20px !important;
    background: #EF4444 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
    z-index: 10 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:hover .remove_sl_dataset {
    opacity: 1 !important;
    transform: scale(1) !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item .remove_sl_dataset:hover {
    background: #DC2626 !important;
    transform: scale(1.15) !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.5) !important;
}

/* ============================================================================
   ADD DATASET BUTTON - Dashed border with smooth fill animation
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs .add_dataset {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 2px dashed var(--sl-accent-success) !important;
    border-radius: var(--sl-border-radius-lg) !important;
    color: var(--sl-accent-success) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    opacity: 0.7 !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs .add_dataset:hover {
    background: var(--sl-accent-success) !important;
    border-color: var(--sl-accent-success) !important;
    color: #FFFFFF !important;
    transform: scale(1.08) rotate(90deg) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* ============================================================================
   VERTICAL DIVIDERS - Between sections
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs .sl-divider {
    width: 1px !important;
    height: 24px !important;
    background: var(--sl-border-color) !important;
    opacity: 0.5 !important;
    margin: 0 12px !important;
    flex-shrink: 0 !important;
}

/* ============================================================================
   RIGHT SIDE UTILITIES - Integrated into main bar
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern ul.sl-utils {
    position: fixed !important;
    right: 20px !important;
    bottom: 0 !important;
    z-index: 101 !important;
    margin-bottom: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 0 0 10px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Divider before utilities */
div.simlytiks.simlytiks-theme-modern ul.sl-utils::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 24px !important;
    background: var(--sl-border-color) !important;
    opacity: 0.5 !important;
}

div.simlytiks.simlytiks-theme-modern ul.sl-utils li {
    display: flex !important;
    padding: 0 !important;
}

div.simlytiks.simlytiks-theme-modern ul.sl-utils li a {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 8px !important;
    border-radius: var(--sl-border-radius-md) !important;
    color: var(--sl-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    background: transparent !important;
    position: relative !important;
}

div.simlytiks.simlytiks-theme-modern ul.sl-utils li a i {
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--sl-text-muted) !important;
}

div.simlytiks.simlytiks-theme-modern ul.sl-utils li a:hover {
    background: var(--sl-bg-tertiary) !important;
    color: var(--sl-accent-primary) !important;
    transform: translateY(-1px) !important;
}

div.simlytiks.simlytiks-theme-modern ul.sl-utils li a:hover i {
    transform: scale(1.15) rotate(5deg) !important;
    color: var(--sl-accent-primary) !important;
}

/* Disabled state */
div.simlytiks.simlytiks-theme-modern ul.sl-utils li.disabled a {
    opacity: 0.35 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ============================================================================
   MODEL INFO - Record count badge integrated into bar
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern .model-info {
    position: fixed !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    z-index: 101 !important;
    height: 40px !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    color: var(--sl-text-secondary) !important;
}

/* Dividers around model-info */
div.simlytiks.simlytiks-theme-modern .model-info::before,
div.simlytiks.simlytiks-theme-modern .model-info::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1px !important;
    height: 32px !important;
    background: var(--sl-border-color) !important;
    opacity: 0.5 !important;
}

div.simlytiks.simlytiks-theme-modern .model-info::before {
    left: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .model-info::after {
    right: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .model-info .model-count {
    font-weight: 600 !important;
    color: var(--sl-text-primary) !important;
    background: var(--sl-bg-tertiary) !important;
    padding: 6px 12px !important;
    border-radius: var(--sl-border-radius-lg) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern .model-info:hover .model-count {
    background: var(--sl-accent-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sl-accent-primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
}

div.simlytiks.simlytiks-theme-modern .model-info .hr-divider {
    width: 1px !important;
    height: 20px !important;
    background: var(--sl-border-color) !important;
    opacity: 0.5 !important;
    margin: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .model-info .tpl-name {
    color: var(--sl-text-muted) !important;
    font-weight: 500 !important;
}

/* ============================================================================
   FOOTER ANIMATIONS
   ============================================================================ */
@keyframes sl-footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for tab items */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item {
    animation: sl-tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:nth-child(1) {
    animation-delay: 0.1s !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:nth-child(2) {
    animation-delay: 0.15s !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:nth-child(3) {
    animation-delay: 0.2s !important;
}

div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:nth-child(n+4) {
    animation-delay: 0.25s !important;
}

@keyframes sl-tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================================
   ADJUST MAIN BODY HEIGHT FOR MODERN FOOTER
   ============================================================================ */
div.simlytiks.simlytiks-theme-modern.simlytiks-tabs div.slBody {
    height: calc(100% - 110px) !important;
    padding-bottom: 0 !important;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */
@media (max-width: 768px) {
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs {
        height: 36px !important;
        padding: 0 8px !important;
    }

    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a {
        padding: 4px 10px !important;
        font-size: 11px !important;
        min-width: 80px !important;
        max-width: 180px !important;
    }
	div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:last-child {
		display: flex;
	} 
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.sl-utils li a {
        padding: 3px 6px !important;
        font-size: 10px !important;
        gap: 3px !important;
    }

    div.simlytiks.simlytiks-theme-modern.simlytiks-theme-modern ul.sl-utils li a i {
        font-size: 11px !important;
    }
    
    div.simlytiks.simlytiks-theme-modern .model-info {
        display: none !important;
    }
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs ul.simlytiks-nav-tabs .simlytiks-tabs-heading::before {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }
}

/* ============================================================================
   REDUCED MOTION PREFERENCE
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs,
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a,
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item .remove_sl_dataset,
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs .add_dataset,
    div.simlytiks.simlytiks-theme-modern ul.sl-utils li a,
    div.simlytiks.simlytiks-theme-modern .model-info .model-count {
        animation: none !important;
        transition: none !important;
    }
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:hover > a,
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item.active > a,
    div.simlytiks.simlytiks-theme-modern ul.sl-utils li a:hover,
    div.simlytiks.simlytiks-theme-modern .model-info:hover .model-count {
        transform: none !important;
    }
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a i,
    div.simlytiks.simlytiks-theme-modern ul.sl-utils li a i {
        transform: none !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs {
        height: 48px !important;
    }
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-width: 100px !important;
    }
    
    div.simlytiks.simlytiks-theme-modern ul.sl-utils {
        padding: 4px 8px !important;
    }
    
    div.simlytiks.simlytiks-theme-modern ul.sl-utils li a {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    
    div.simlytiks.simlytiks-theme-modern .model-info {
        display: none !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs,
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item > a {
        animation: none !important;
        transition: none !important;
    }
    
    div.simlytiks.simlytiks-theme-modern.simlytiks-tabs .simlytiks-nav-tabs li.nav-item:hover > a {
        transform: none !important;
    }
}

/** ========================================================================== **/
/** END OF DVFIV-1899 Phase 3 Modern Left Nav & Footer CSS                     **/
/** ========================================================================== **/

/** ========================================================================== **/
/** END OF DVFIV-1899 Phase 2 Premium Responses Panel CSS                      **/
/** ========================================================================== 


/** Added by shashank2104 on 01/23/2026 at 12:22 PM - DVFIV-1899 - Modern Theme DataTable Styles **/
/** Scoped DataTable CSS from @plugins/datatable/DataTable.css for simlytiks-theme-modern **/
div.simlytiks.simlytiks-theme-modern {
	--dt-selection-color: rgba(59, 130, 246, 0.1);
	--dt-selection-color-dark: rgba(59, 130, 246, 0.2);
	--dt-selection-color-light: var(--sl-bg-hover);
	--dt-selection-color-dark2: var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern div.datatable-container {
	position: relative;
}
div.simlytiks.simlytiks-theme-modern div.datatable-container > .d3view-viz {
	min-height: inherit;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper {
	padding: var(--sl-spacing-md);
	height: 100%;
	width: 100%;
	background-color: var(--sl-bg-primary);
	min-height: 300px;
	position: relative;
	border-radius: var(--sl-border-radius-lg);
	box-shadow: var(--sl-shadow-sm);
	background: var(--sl-bg-secondary);
}

/* Modern Table Container Styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_wrapper {
	background-color: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-sm);
	padding: var(--sl-spacing-md);
	position: relative;
	top: 40px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.disableYScroll {
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-chart-container {
	position: relative;
	overflow: auto;
	flex: 1 1 auto;
	min-height: 250px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.searchEnabled .dataTables_wrapper {
	top: 86px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .d3view-side-modal .content-wrapper {
	height: auto;
}
div.simlytiks.simlytiks-theme-modern .d3view-plugins-sidebar.viz-config-container .content-wrapper {
	height: 100%!important;
}
div.simlytiks.simlytiks-theme-modern .d3view-plugins-sidebar.viz-config-container .config-body {
	height: calc(100% - 20px);
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .d3view-plugins-sidebar.viz-config-container.hasSettingsList .config-body {
	height: calc(100% - 114px);
}
div.simlytiks.simlytiks-theme-modern .d3view-plugins-sidebar.viz-config-container .config-body label {
	margin-top: unset!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .scroll_button {
	display: none;
	z-index: 2;
	cursor: pointer;
	font-size: 1.2em;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.scroll_enabled .scroll_buttons .scroll_button {
	display: inline-block!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.scroll_enabled .scroll_buttons .scroll_button:hover {
	color: var(--sl-accent-danger)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.scroll_enabled .dataTables_wrapper,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.scroll_enabled .setting_buttons {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .scrollLeft {
	right: 25px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .scrollRight {
	right: 8px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .scroll_button.disabled {
	cursor: not-allowed;
	opacity: 0.4;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .scroll_button.disabled * {
	pointer-events: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dts div.dataTables_scrollBody {
	background: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody thead th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftBodyWrapper thead th {
	padding: 0 16px!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-spinner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 4em;
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper input {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .isEditing input[type="date"]:after {
	content: '';
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isLoading {
	background-color: var(--sl-bg-tertiary);
	min-height: 400px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isLoading div.dataTables_wrapper {
	opacity: 0.4;
}

@media screen and (min-width: 992px) {
	div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .center_buttons {
		text-align: center;
	}
	div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .right_buttons {
		text-align: right;
	}
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .warning_text {
	display: block !important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt td, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt th {
	overflow: hidden;
	text-overflow: ellipsis;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt th {
	vertical-align: middle!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .table-settings-container .table-option {
	display: flex;
	align-items: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-none tbody td {
	border: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-none thead tr th {
	border: none!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea thead tr th:hover {
	background-color: var(--sl-bg-tertiary)!important;
	border-right: 1px solid var(--sl-border-color)!important;
	color: var(--sl-accent-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-all td:first-child {
	border-top: none!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-all td {
	border: 1px solid var(--sl-border-color) !important;
	border-top: none !important;
	border-right: none !important;
}

/* Modern Border Styles - Cleaner Look */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody td {
	border: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody tr {
	border-bottom: 1px solid var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody tr:last-child {
	border-bottom: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-all th {
	border: 1px solid var(--sl-border-color)!important;
	border-right: none !important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th {
	border-right: 1px solid var(--sl-border-color)!important;
	border-top: 1px solid var(--sl-border-color)!important;
	border-bottom: 1px solid var(--sl-border-color)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th:first-child,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th:first-child {
	border-left: 1px solid var(--sl-border-color)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody td {
	border: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody tr[data-id] td:first-child {
	border-left: 3px solid transparent;
	transition: var(--sl-transition);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-header tbody tr[data-id]:hover td:first-child {
	border-left-color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-hr td {
	border-bottom: 1px solid var(--sl-border-color) !important;
	border-top: none !important;
	border-right: none !important;
}

/* Modern Table Visual Enhancements */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt {
	border-collapse: separate;
	border-spacing: 0;
}

/* Zebra striping for better readability */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:nth-child(even) {
	background-color: rgba(248, 250, 252, 0.3);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:nth-child(even):hover {
	background-color: var(--sl-bg-hover)!important;
}

/* Remove default table borders for cleaner look */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt {
	border: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tfoot {
	border: none;
}

/* Modern cell spacing */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody td {
	padding: 14px 16px;
}

/* Better visual feedback for interactive elements */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead th {
	user-select: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr {
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:active {
	transform: scale(0.998);
}

/* Modern checkbox styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr input.checkbox_selection {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--sl-accent-primary);
}

/* Better visual separation for table sections */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead {
	border-bottom: 2px solid var(--sl-border-color);
	background: var(--sl-bg-secondary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead.scrolling {
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-vr td {
	border-right: 1px solid var(--sl-border-color) !important;
	border-top: none !important;
	border-bottom: none !important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-vr th {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-vr tr:last-child td {
	border-bottom: 1px solid var(--sl-border-color) !important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea.border-vr td:first-child {
	border-left: 1px solid var(--sl-border-color)!important;
}

div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .dropdown-submenu {
	position:relative;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .dropdown-submenu>.dropdown-menu {
	top:0;
	margin-top: -1px;
	margin-left:0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .dropdown-submenu:hover>.dropdown-menu {
	display:block;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-left.dataTable th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-left.dataTable td {
	text-align: left!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-center.dataTable th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-center.dataTable td {
	text-align: center!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-right.dataTable th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-right.dataTable td {
	text-align: right!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-justify.dataTable th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.text-justify.dataTable td {
	text-align: justify!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody td {
	position: relative;
	vertical-align: middle;
	padding: 12px 16px;
	font-size: 13px;
	color: var(--sl-text-secondary);
	transition: var(--sl-transition);
}

/* Modern Cell Styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody td:hover {
	color: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt tbody td.collapsed,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt thead th.collapsed {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead {
	z-index: 1;
	width: auto!important;
	background: var(--sl-bg-secondary);
	border-bottom: 2px solid var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead.scrolling {
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th {
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 2px solid var(--sl-border-color)!important;
	cursor: context-menu;
	background-color: var(--sl-bg-secondary)!important;
	padding: 12px 16px!important;
	font-weight: 600!important;
	font-size: 13px!important;
	color: var(--sl-text-primary)!important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: var(--sl-transition);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollHead thead tr:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper thead tr:hover {
	background-color: var(--sl-bg-primary)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th.th-selected,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th.th-selected,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th.popover_open,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th.popover_open {
	background-color: var(--dt-selection-color);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_wrapper.no-footer .dataTables_scrollBody {
	border-bottom: none;
	width: auto!important;
	margin-right: -15px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.disableYScroll .dataTables_wrapper.no-footer .dataTables_scrollBody {
	overflow-x: hidden!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr {
	background-color: var(--sl-bg-primary);
	height: 50px;
	border-bottom: 1px solid var(--sl-border-color);
	transition: var(--sl-transition);
}

/* Modern Row Hover Effect */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr:hover {
	background-color: var(--sl-bg-hover)!important;
	transform: translateX(2px);
	box-shadow: -2px 0 0 0 var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr.no-data {
	background: var(--sl-bg-tertiary)!important;
	text-align: center!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.row_reordering table.bs-dt tbody tr.noreorder {
	cursor: not-allowed;
	background-color: var(--sl-bg-tertiary)!important;
	opacity: 0.5;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt .hidden-col-border:hover {
	border-color: var(--sl-accent-danger)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="min"] tr td {
	padding: 4px 4px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="min"] thead th:not(.checkbox_selection) {
	padding: 4px 4px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody table.renderingArea[data-rowspacing="min"] thead th:not(.checkbox_selection) {
	padding: 0 4px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="average"] tr td {
	padding: 8px 8px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="average"] thead th:not(.checkbox_selection) {
	padding: 8px 8px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody table.renderingArea[data-rowspacing="average"] thead th:not(.checkbox_selection) {
	padding: 0 8px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td {
	padding: 16px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td.isEditing {
	padding: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td.isEditing .td-span-input input:after {
	content: '';
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] span.td-span,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.scroll_enabled) table.renderingArea span.td-span {
	white-space: normal;
	word-break: break-all;
	max-height: 200px;
	overflow: auto;
	display: inline-block;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] span.td-span {
	white-space: nowrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] td {
	overflow: unset;
	text-overflow: unset;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] .td-sc-fm {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] h2.td-sc-fm,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm h2 {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea .isEditing .td-sc-fm:has(.isDate) {
	display: block;
	width: 100%;
	height: 30px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm.d3view-tags-container {
	display: block;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm.d3view-tags-container .tag-item {
	white-space: nowrap;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tr[data-static="true"] {
	height: 70px;
	text-align: center;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tr[data-static="true"] td.ui-selecting,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tr[data-static="true"] td.ui-selected {
	background-color: var(--sl-accent-primary)!important;
	color: var(--sl-bg-primary)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt td.checkbox_selection, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.checkbox_selection,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt td.collapsible_icon, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.collapsible_icon,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt td.row_number, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.row_number {
	width: 49px;
	padding: 0!important;
	position: relative;
	background-image: none!important;
	text-align: center!important;
	font-size: initial;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt td.row_number, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.row_number {
	border-left: 5px solid transparent;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt th.checkbox_selection .select_all {
	margin-top: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt td[data-type="image"], 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt td[data-type="curve"] {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tfoot th input {
	width: 90%!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr.tr-dragging {
	background-color: rgba(59, 130, 246, 0.2)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting_asc,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting_desc {
	padding-right: 15px!important;
	background-image: none!important;
	border-right-style: solid;
	border-right-width: 3px;
	border-right-color: transparent;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th.col_group {
	border-bottom: none;
	text-align: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th:last-child {
	border-right-width: 1px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr {
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr td:first-child {
	border-left: 3px solid transparent;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.ui-selected, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.ui-selecting {
	background-color: var(--dt-selection-color)!important;
	color: var(--sl-text-primary)!important;
	border-left: 4px solid var(--sl-accent-primary)!important;
	box-shadow: var(--sl-shadow-sm);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.temp-row-selected:not(.ui-selected) td {
	border-top: 1px solid var(--sl-accent-primary)!important;
	border-bottom: 1px solid var(--sl-accent-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.text-white {
	color: var(--sl-bg-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-checkbox="true"] table tbody tr td:first-child, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-checkbox="true"] table tbody tr td:first-child {
	border-left: 3px solid transparent;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.ui-selected td:first-child, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.ui-selecting td:first-child {
	border-left: 4px solid var(--sl-accent-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr td:first-child, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr td:first-child {
	border-left: 3px solid transparent;
	transition: var(--sl-transition);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr:hover td:first-child {
	border-left-color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_paginate {
	margin-top: var(--sl-spacing-md)!important;
	white-space: nowrap;
	float: right;
}

/* Modern Pagination Styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_paginate .paginate_button {
	padding: 6px 12px!important;
	margin: 0 2px!important;
	border-radius: var(--sl-border-radius-sm)!important;
	border: 1px solid var(--sl-border-color)!important;
	background: var(--sl-bg-primary)!important;
	color: var(--sl-text-secondary)!important;
	transition: var(--sl-transition)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_paginate .paginate_button:hover {
	background: var(--sl-bg-hover)!important;
	border-color: var(--sl-accent-primary)!important;
	color: var(--sl-accent-primary)!important;
	transform: translateY(-1px);
	box-shadow: var(--sl-shadow-sm);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_paginate .paginate_button.current {
	background: var(--sl-accent-primary)!important;
	border-color: var(--sl-accent-primary)!important;
	color: var(--sl-bg-primary)!important;
	font-weight: 600!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_info {
	margin-top: var(--sl-spacing-md);
	float: left;
	padding-top: 0!important;
	color: var(--sl-text-secondary);
	font-size: 13px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead .sort_icon {
	position: relative!important;
	top: 3px!important;
	padding: 0 5px;
	opacity: 0;
	cursor: pointer!important;
	display: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .sort_dropdown {
	position: relative;
	padding: 0 2px;
	margin: 0 3px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .sort_dropdown > a {
	padding: 0 10px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.dropdown_open {
	background: var(--sl-bg-hover);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .sort_dropdown:hover > a {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .sort_dropdown .dropdown-toggle {
	padding: 0 5px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .sort_dropdown.open .dropdown-toggle {
	background-color: var(--sl-bg-hover);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .warning_text img {
	cursor: pointer;
	min-height: 100px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.toggle_settings.disabled {
	cursor: not-allowed!important;
	opacity: 0.7;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.toggle_settings.disabled * {
	pointer-events: none!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead .sort_icon:hover {
	background-color: var(--sl-bg-hover);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable thead th:after {
	content: ""!important;
	display: none!important;
}

/* div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-search-filters {
	padding: var(--sl-spacing-sm);
	margin-bottom: var(--sl-spacing-sm);
	background: var(--sl-bg-secondary);
	border-radius: var(--sl-border-radius-sm);
	border: 1px solid var(--sl-border-color);
} */

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-search-filters span.filter-tag > span.label {
	background-color: var(--sl-accent-primary)!important;
	color: var(--sl-bg-primary)!important;
	border-radius: var(--sl-border-radius-sm)!important;
	padding: 4px 8px!important;
	font-size: 12px!important;
	font-weight: 500!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-search-filters span.filter-tag .filter-value {
	color: var(--sl-accent-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-search-filters .remove-filter-tag {
	color: initial!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-search-filters div.filters-container span.filter-value-tag {
	background-color: var(--sl-bg-primary);
	border: 1px solid;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr.baseline {
	background-color: rgba(59, 130, 246, 0.2)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr.hovered {
	background-color: var(--sl-bg-hover)!important;
	border-left: 3px solid var(--sl-accent-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr.row-highlight * {
	background-color: var(--sl-accent-primary)!important;
	color: var(--sl-bg-primary)!important;
}

/* Modern Empty State */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr.no-data {
	background: var(--sl-bg-tertiary)!important;
	text-align: center!important;
	padding: var(--sl-spacing-xl)!important;
	color: var(--sl-text-muted)!important;
	font-size: 14px!important;
}

/* Modern Scrollbar Styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
	background: var(--sl-bg-secondary);
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
	background: var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
	background: var(--sl-text-muted);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr input.checkbox_selection {
	position: relative;
	margin: 0;
}

div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu, 
div.simlytiks.simlytiks-theme-modern .data-table.sg-contextMenu {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	padding: 10px 10px;
	display: inline-block;
	min-width: 300px;
	border-radius: var(--sl-border-radius-md);
	z-index: 2000;
	position: absolute;
	font-size: 1.2em;
	box-shadow: var(--sl-shadow-md);
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu .selection_count {
	font-weight: bold;
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu li, 
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .selectionOptions li {
	width: 100%;
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu li.divider, 
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .selectionOptions li.divider {
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu li a.context-menu-item, 
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .selectionOptions a.context-menu-item {
	display: block;
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu .nav-stacked-thin li a, 
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu .selectionOptions li a {
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu li:hover > .submenu, 
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .selectionOptions li:hover > .submenu {
	min-width: 180px;
	display: block!important;
}
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu li .submenu li a.context-menu-item:hover,
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .selectionOptions li:hover > .submenu li a.context-menu-item:hover {
	text-decoration: none;
	background-color: var(--sl-bg-hover);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .selectionOptions .submenu > li > a,
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu .submenu > li > a,
div.simlytiks.simlytiks-theme-modern .data-table.sg-context-menu > li > a {
	display: block;
	clear: both;
	color: var(--sl-text-primary);
	white-space: nowrap;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.flipTable) table.dataTable {
	width: fit-content!important;
	margin: 0!important;
	border-bottom: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHeadInner {
	width: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table .dt-center {
	text-align: center!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table .dataTypeIcon {
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table span.difference_text {
	margin-left: 3px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table span.difference_text.hasArrow:before {
	content: '(';
	color: var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table span.difference_text.hasArrow:after {
	content: ')';
	color: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table .group_collapse {
	cursor: pointer;
	color: var(--sl-text-muted);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table .group_collapse:hover {
	color: var(--sl-text-secondary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table th.cancel_sorting:after {
	content: '';
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table thead th.ui-selected, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table thead th.ui-selecting {
	background-color: var(--dt-selection-color-light)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_filter {
	display: none!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .heatMap-container {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings ul.columns_toggle,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows > ul, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dt-groups > ul {
	max-height: 250px;
	min-height: 35px;
	overflow: auto;
	box-shadow: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dt-groups li {
	padding: 5px 10px;
	border: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .toggle_settings .dropdown-menu .row {
	margin: 0; 
	border-bottom: 1px solid var(--sl-border-color); 
	padding: 10px;
	display: flex;
	align-items: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .toggle_settings .dropdown-menu .row.disabled {
	opacity: 0.3;
	pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dropdown .close_dropdown:hover {
	color: var(--sl-accent-danger);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dt-groups li:not(.list-group-header):hover {
	background-color: var(--sl-bg-hover);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dt-groups li.ui-selected {
	background: var(--dt-selection-color)!important;
	color: var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .columns_toggle ul.list-group-nested {
	box-shadow: none;
	margin-bottom: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.disabled input,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.disabled .sortable-handle{
	pointer-events: none!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li .sortable-handle {
	cursor: move;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.ui-sortable-placeholder {
	display: block!important;
	height: 35px;
	background-color: var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li:first-child, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows > ul li:first-child {
	border-top: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu.selectionOptions li:not(.divider) {
	padding: 5px 0 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectionOptions li.disabled {
	pointer-events: none;
	opacity: 0.5;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectionOptions li.dropdown-submenu:hover ul.dropdown-menu {
	display: block!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dt-groups {
	width: 400px;
	word-break: break-all;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li {
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li:hover {
	background-color: var(--sl-bg-hover);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li input[name="baseline"] {
	height: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li .item-val {
	position: relative;
	top: 2px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li .drag_handle {
	position: absolute;
	top: 5px;
	left: 2px;
	opacity: 0;
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li:hover .drag_handle {
	opacity: 1;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .selectedRows li.ui-sortable-placeholder {
	display: block!important;
	height: 35px;
	background-color: var(--sl-border-color);
	visibility: visible!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .vizIcon {
	width: 30px;
	height: 25px;
	text-align: center;
	vertical-align: middle;
	position: relative;
	top: 5px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .nav-tabs li > a {
	font-weight: bold;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .th-span {
	overflow: hidden;
	text-overflow: ellipsis;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.capitalized .th-span {
	pointer-events: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background: var(--sl-bg-secondary);
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	border-radius: var(--sl-border-radius-md) var(--sl-border-radius-md) 0 0;
	border-bottom: 1px solid var(--sl-border-color);
}

/* Modern Toolbar Button Styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button {
	border-radius: var(--sl-border-radius-sm)!important;
	padding: 6px 12px!important;
	font-size: 13px!important;
	transition: var(--sl-transition)!important;
	border: 1px solid transparent!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button:not(.selected):hover {
	background: var(--sl-bg-hover)!important;
	border-color: var(--sl-border-color)!important;
	color: var(--sl-text-primary)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button.selected {
	background: var(--sl-accent-primary)!important;
	border-color: var(--sl-accent-primary)!important;
	color: var(--sl-bg-primary)!important;
	box-shadow: var(--sl-shadow-sm);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group.disabled * {
	pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons div.viz-types .btn-group > button {
	padding: 1px 7px;
	border-radius: var(--sl-border-radius-sm)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button.selected {
	color: var(--sl-bg-primary)!important;
	margin-right: 12px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dt-settings > div > .btn-group > button {
	display: block;
	height: 30px;
}
@media screen and (max-width: 1400px) {
	div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .setting-button-text {
		display: none;
	}
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button .setting-button-text {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.tiny .setting-button-text {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons .btn-group > button:not(.selected):hover, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons div.dropdown.open .dropdown-toggle.btn-default {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons div.dropdown .dropdown-toggle.btn-default:active, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.setting_buttons div.dropdown .dropdown-toggle.btn-default:focus {
	color: var(--sl-text-primary)!important;
	background: var(--sl-bg-hover)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .viz-types {
	display: inline-block;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings button.viz_toggle:focus, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings button.viz_toggle:active {
	outline: none!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings button.viz_toggle.active {
	background-color: var(--sl-accent-primary);
	color: var(--sl-bg-primary);
	text-shadow: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .heatmap_view_options button.viz_toggle:focus {
	outline: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.viz-options .dropdown-menu {
	width: 250px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.viz-options .distribution_columns {
	max-height: 250px;
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.viz-options .distribution_columns li {
	border: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .heatmap_view_options .dropdown-menu {
	max-height: 300px;
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz {
	width: auto!important;
	height: auto!important;
	max-width: 1000px;
	max-height: 1000px;
	z-index: 200000;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-handle-on,
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-handle-off,
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-label {
	height: auto!important;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .popover-header {
	border-bottom: 1px solid var(--sl-border-color);
	background-color: var(--sl-bg-secondary);
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .popover-title {
	display: inline-block;
	background-color: transparent;
	border-bottom: none;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .popover-header > button {
	position: relative;
	top: 3px;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .popover-content {
	width:500px;
	height:400px;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .popover_content .lastsearchkeywords {
	display: none;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz svg.bar-chart .tick text {
	font-weight: 500;
}
div.simlytiks.simlytiks-theme-modern div.popover.bs-datatable-header-viz .textviewer-options {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .dt-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 4px solid var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern .ui-selectable-helper {
	border: 2px solid var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.td-span {
	pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable span.td-span {
	pointer-events: all;
	border: 1px solid transparent;
	padding: 0px;
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.td-span.justEdited {
	background-color: var(--sl-accent-success)!important;
	color: var(--sl-bg-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper td.edited .td-span:before {
	content: '\f111';
	font-family: 'FontAwesome';
	position: absolute;
	left: -10px;
	font-size: 9px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .td-span-input {
	width: 100%;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .td-span-input .td-input-options {
	position: absolute;
	right: 3px;
	z-index: 200;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .td-span-input input {
	width: 100%;
	box-sizing: border-box;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .edit-cell {
	opacity: 0;
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .edit-cell:hover {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable td:hover .td-span:not(.non-editable) {
	opacity: 1!important;
	width: 100%;
	border: 1px solid var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.isEditable .cancel-editing:hover {
	color: var(--sl-text-secondary)!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.no_data .dataTypeIconAll, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.no_data .sort_dropdown {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt td.checkbox_selection:before {
	content: ''!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th:hover span.dataTypeIconAll,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th:hover span.dataTypeIconAllEnlarged,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th:hover .sort-icon,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th:hover .filter_dropdown,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.hovered span.dataTypeIconAll,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.hovered span.dataTypeIconAllEnlarged,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.hovered .sort_icon,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.hovered .sort-icon,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.hovered .filter_dropdown,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th .th-options.dropdown_open .filter_dropdown {
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th .th-resize {
	position: absolute;
	right: 8px;
	width: 8px;
	z-index: 2;
	height: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.dataTypeIconAll, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.dataTypeIconAllEnlarged,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .th-options .sort-icon,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .th-options .filter_dropdown {
	opacity: 0;
	cursor: pointer!important;
	padding: 0 2px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.dataTypeIconAll.clicked {
	color: var(--sl-accent-danger);
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.dataTypeIconAll:hover, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.newton_manager:hover, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.dataTypeIconAllEnlarged:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .th-options .sort-icon:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .th-options .filter-icon:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th .th-options.dropdown_open .filter_dropdown {
	color: var(--sl-accent-danger);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .header-ctx-menu li {
	cursor: pointer;
	padding: 5px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .header-ctx-menu li:hover {
	background-color: var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .header-ctx-menu li > a {
	text-decoration: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper span.row-dragger {
	position: absolute;
	left: 0;
	top: 13px;
	opacity: 0;
	cursor: move;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper td:hover .row-dragger {
	opacity: 1;
}
div.simlytiks.simlytiks-theme-modern tr.dt-dragging-row {
	z-index: 1061;
}
div.simlytiks.simlytiks-theme-modern tr.dt-dragging-row td {
	padding: 5px;
}

div.simlytiks.simlytiks-theme-modern div.dt-drag-row-html {
	background: var(--sl-bg-primary);
	padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	font-weight: bold;
	z-index: 1000;
	max-width: 300px;
	overflow: hidden;
	max-height: 300px;
	pointer-events: none;
	height: auto!important;
}
div.simlytiks.simlytiks-theme-modern div.dt-drag-row-html .selected_count {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1.2em;
}

div.simlytiks.simlytiks-theme-modern div.data-viewer-modal div.vizcontainer .edit_color_palette {
	display: none;
}

div.simlytiks.simlytiks-theme-modern div.data-viewer-modal .btn-success, 
div.simlytiks.simlytiks-theme-modern div.data-viewer-modal .btn-info, 
div.simlytiks.simlytiks-theme-modern div.data-viewer-modal .btn-primary, 
div.simlytiks.simlytiks-theme-modern div.data-viewer-modal .btn-warning, 
div.simlytiks.simlytiks-theme-modern div.data-viewer-modal .btn-danger {
	margin-right: 4px;
	box-shadow: none;
	text-shadow: none;
	background-image: none;
	font-weight: 500;
	border-color: transparent;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	z-index: 2;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-loading.shown {
	display: block;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .loading-bar {
	display: inline-block;
	width: 4px;
	height: 30px;
	border-radius: var(--sl-border-radius-sm);
	animation: loading 1s ease-in-out infinite;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .loading-bar:nth-child(1) {
	background-color: var(--sl-accent-primary);
	animation-delay: 0s;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .loading-bar:nth-child(2) {
	background-color: var(--sl-accent-danger);
	animation-delay: 0.09s;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .loading-bar:nth-child(3) {
	background-color: var(--sl-accent-warning);
	animation-delay: .18s;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .loading-bar:nth-child(4) {
	background-color: var(--sl-accent-success);
	animation-delay: .27s;
}

div.simlytiks.simlytiks-theme-modern div.dt-newton-manager .columns_list a {
	text-decoration: none;
}
@keyframes loading {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1, 2.2);
	}
	40% {
		transform: scale(1);
	}
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt.placeholder {
	background-color: var(--sl-bg-primary);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
	width: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt.placeholder tbody tr {
	height: 80px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt div.ph-item {
	padding: 8px;
	margin-bottom: 0;
	border: none;
	background: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt div.ph-item.no-anim::before {
	content: unset!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .dataTables_wrapper {
	max-height: 100%;
	width: 100%!important;
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .pl-ribbon-item[data-operation="collapsible_columns"],
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .pl-ribbon-item[data-operation="scroll"] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable tr {
	display: flex;
	flex-direction: column;
	float: left;
	height: 100%!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable tr th, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable tr td {
	flex: 1 1 auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .dataTables_wrapper table.bs-dt {
	display: flex;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .dataTables_wrapper table.bs-dt thead {
	flex: 0 0 auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable .dataTables_wrapper table.bs-dt tbody {
	display: flex;
	flex-wrap: nowrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable tr td, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable tr th {
	display: block;
	width: 100%!important;
	box-sizing: inherit;
	-webkit-box-sizing: inherit;
	height: 33px;
	min-width: 100px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable table.dataTable tbody td.checkbox_selection, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable table.dataTable thead th.checkbox_selection {
	width: 100%!important;
	height: 25px!important;
	padding: 0!important;
	position: relative;
	text-align: center!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable thead th {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper th.checkbox_selection {
	vertical-align: middle;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper input.toggle-search {
	height: 10px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper tr.dt-search input {
	height: 24px!important;
	width: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper tr.dt-search input::placeholder {
	font-family: FontAwesome;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .columns_list {
	max-height: 225px;
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .tab-pane-footer {
	padding: 5px;
	border-top: 1px solid var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .toggle_columns li.ui-sortable-placeholder {
	display: block!important;
	height: 35px;
	background-color: var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .dropdown-menu .toggle_columns .sortable-handle {
	cursor: move;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root {
	padding: 0;
	margin-bottom: 4px;
	box-shadow: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root .list-group {
	margin-bottom: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root .list-group-item {
	border-radius: 0;
	border-width: 1px 0 0 0;
	padding: 7px 15px;
	cursor: move;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root > .list-group-item:first-child {
	border-top-width: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root > .column_group > .list-group > .list-group-item {
	padding-left: 30px;
	border: none;
	padding-top: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .list-group-item .glyphicon {
	margin-right: 5px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols {
	background: none;
	border: none;
	box-shadow: none;
	color: var(--sl-text-muted);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols:hover {
	color: var(--sl-text-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols:focus, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings #toggle_columns .column_group .toggle_group_cols:active {
	outline: none!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column_options li[data-id] {
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column_options li[data-id].checked:after {
	content: '\f00c';
	font-family: FontAwesome;
	position: absolute;
	right: 5px;
	top: 3px;
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern div.d3view-dt-tooltip .tooltip-inner {
	background-color: var(--sl-text-secondary);
	text-align: left;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.gallery-container {
	overflow: auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images {
	padding-bottom: 15px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .images-flex {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .row-caption {
	font-size: 1.2em;
	font-weight: 500;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card {
	width: 18rem;
	margin: 10px 20px 0 0;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: var(--sl-bg-primary);
	background-clip: border-box;
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card .image-enlarge {
	position: absolute;
	right: 3px;
	top: 4px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card:hover img {
	opacity: 0.7;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card:hover .image-enlarge {
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card .image-enlarge:hover {
	color: var(--sl-accent-primary);
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card img {
	width: 100%;
	height: 180px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.row-images .image-card .image-caption {
	padding: 5px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.summary-dropdown-menu {
	display: none;
	background: var(--sl-bg-primary);
	position: relative;
	top: 25px;
	margin: 0;
	margin-bottom: 10px;
	border-radius: var(--sl-border-radius-sm);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.searchEnabled div.summary-dropdown-menu {
	top: 65px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.summaryRow {
	table-layout: fixed;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper td .quickView {
	color: var(--sl-text-muted);
	opacity: 0;
	cursor: pointer;
	bottom: -0.15em;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper td .quickView:hover {
	color: var(--sl-text-secondary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper td:hover .quickView {
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .quick-view-container .close_container {
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: var(--sl-text-primary);
	text-shadow: 0 1px 0 var(--sl-bg-primary);
	filter: alpha(opacity=20);
	opacity: .2;
	padding: 0;
	cursor: pointer;
	background: 0 0;
	border: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.quick-view-container .content-wrapper {
	height: 100%;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .config-header .nav-pills-sm > li > a {
	padding:4px 8px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.sidebaropen div.setting_buttons,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.sidebaropen div.dataTables_wrapper {
	transition: opacity ease-in-out 300ms;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.sidebaropen div.setting_buttons .summaryDropdown,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.sidebaropen div.dataTables_wrapper {
	opacity: 0.6!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .summaryDropdown .dropdown-toggle.selected {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .summaryDropdown .dropdown-toggle.selected > span {
	color: var(--sl-bg-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .summaryDropdown .dropdown-toggle.btn-primary span {
	color: var(--sl-bg-primary)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .summaryDropdown .dropdown-menu {
	width: 100%;
	height: 450px;
	padding: 15px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .summaryDropdown .dropdown-menu .viz-container {
	height: 390px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list {
	box-shadow: none;
	margin-left: 10px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item {
	border-color: var(--sl-border-color);
	border-left: none;
	border-right: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item.ui-selected {
	background-color: var(--dt-selection-color-light);
	cursor: context-menu;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item .sortable-handle {
	opacity: 0;
	cursor: move;
	z-index: 2;
	position: relative;
	top: 6px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item:hover .sortable-handle {
	opacity: 1!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item label {
	display: flex;
	align-items: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item input {
	margin-left: 4px;
}
div.simlytiks.simlytiks-theme-modern .d3view-plugins-sidebar.viz-config-container .config-body .row {
	padding: 15px;
	margin: 0;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_ScrollWrapper {
	height: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper {
	z-index: 2;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper.scrollings, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftBodyWrapper.scrolling {
	box-shadow: var(--sl-shadow-sm);
	background: var(--sl-bg-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftWrapper .DTFC_LeftBodyLiner {
	padding-right: 0!important;
	overflow-x: hidden;
	width: auto!important;
	height: auto!important;
	overflow-y: hidden!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.DTFC_Cloned thead,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.DTFC_Cloned tfoot {
	background-color: var(--sl-bg-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_Blocker {
	background-color: var(--sl-bg-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftWrapper,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_RightWrapper {
	width: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_LeftBodyWrapper,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_RightBodyWrapper {
	height: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftWrapper table.dataTable,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_RightWrapper table.dataTable {
	margin-bottom: 0;
	z-index: 2;
	background: var(--sl-bg-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftWrapper table.dataTable.no-footer,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_RightWrapper table.dataTable.no-footer {
	border-bottom: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.dataTable.display tbody tr.DTFC_NoData {
	background-color: transparent;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .DTFC_LeftBodyWrapper table.DTFC_Cloned thead th {
	border-bottom: none!important;
}

div.simlytiks.simlytiks-theme-modern div.datatable-ppt-export.processing {
	cursor: progress;
}
div.simlytiks.simlytiks-theme-modern div.datatable-ppt-export.processing .moda-body {
	pointer-events: none;
}
div.simlytiks.simlytiks-theme-modern div.datatable-ppt-export.processing .show-processing {
	display: inline-block!important;
}

div.simlytiks.simlytiks-theme-modern div.datatable-ppt-export #col-actions-box button {
	width: auto;
}
div.simlytiks.simlytiks-theme-modern div.datatable-ppt-export .columns.bootstrap-select div.dropdown-menu {
	max-height: initial!important;
}

div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper ul.dt-toolbar {
	position: absolute;
	right: 50px;
	opacity: 0;
	transform: translateY(-50%);
	background: var(--sl-bg-hover);
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper.hasEditingCell ul.dt-toolbar {
	display: none;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper ul.dt-toolbar > li {
	display: inline;
	margin: 0 2px;
	padding: 0 5px;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper ul.dt-toolbar > li:hover > a {
	color: var(--sl-accent-danger)!important;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper ul.dt-toolbar .toolbar-text {
	display: none;
}

div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
	justify-content: center;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: rgba(0,0,0,.95)!important;
}

div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu {
	display: block;
	position: fixed;
	z-index: 5000;
	width: 300px;
}
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu .tab-pane > div {
	padding: 15px;
}
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu h3,
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu .btn-group,
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu .clearfix {
	padding: 0 15px;
}
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu ul[data-id] {
	max-height: 200px;
	overflow: auto;
	padding: 0 15px;
}
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu .col-multiselect {
	position: relative;
	margin-bottom: 20px;
}
div.simlytiks.simlytiks-theme-modern div.dt-col-dropdown-menu .col-multiselect:after {
	content: "OR";
	width: 100%;
	text-align: center;
	position: absolute;
	color: var(--sl-text-muted);
	pointer-events: none;
	bottom: -20px;
	left: 0;
}

div.simlytiks.simlytiks-theme-modern div.simlytiks.dt-viz-params .viz-description {
	padding: 10px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
div.simlytiks.simlytiks-theme-modern div.viz-config-container .dt-viz-params div.viz-preview-tabs {
	height: calc(100% - 90px);
}
div.simlytiks.simlytiks-theme-modern div.viz-config-container .dt-viz-params div.viz-preview-tabs > .tab-pane {
	height: 100%!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.chart_type.open .dropdown-menu {
	max-height: 250px;
	overflow: auto;
	overflow-x: hidden;
	background: var(--sl-bg-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.chart_type.open .dropdown-menu li.active a,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.chart_type.open .dropdown-menu li:hover a {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.chart_type.open .dropdown-menu li.disabled {
	opacity: 0.6;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .chart_type .dropdown-menu li img {
	display: inline;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .chart_type .dropdown-menu li .viz-name {
}

div.simlytiks.simlytiks-theme-modern div.simlytiks .mainPanel .sl-charts-container .viz-name {
	display: block;
}

div.simlytiks.simlytiks-theme-modern div.d3view-eb .eb-container .alert {
	display: none;
}
div.simlytiks.simlytiks-theme-modern div.d3view-eb .modal-body {
	overflow: visible!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-summary-rows {
	margin: 0;
	padding: 0 10px;
	position: relative;
	top: 40px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-summary-row-values {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-summary-row-values .dt-sm-val {
	margin-right: 15px;
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	padding: 15px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-summary-row-values .dt-sm-count {
	font-size: 2em;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-summary-row-values .dt-sm-agg {
	font-weight: bold;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea .td-toggle {
	color: var(--sl-text-muted);
	transition: transform 0.3s ease-in;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea .td-toggle:hover {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea tr.shown .td-toggle {
	transform: rotate(90deg);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea tr.dt-detail-row .detail-row-cols {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.renderingArea tr.dt-detail-row .detail-row-cols > div {
	margin: 10px;
	width: 15%;
}

div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper table.renderingArea tr.yellow-background-class {
	background: rgba(245, 158, 11, 0.15)!important;
}
div.simlytiks.simlytiks-theme-modern div.bs_datatable_wrapper table.renderingArea tr.sortable-selected {
	background-color: rgba(239, 68, 68, 0.15);
	border: solid var(--sl-accent-danger) 1px !important;
	z-index: 1 !important;
}

div.simlytiks.simlytiks-theme-modern div.simlytiks .bs_datatable_wrapper {
	background-color: unset!important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"],
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] table.renderingArea,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] table.renderingArea {
	table-layout: fixed;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea {
	display: flex!important;
	height: calc(100% - 12px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea tbody {
	display: flex;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea > * {
	flex: 1 1 auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable[data-checkbox="true"] .dt-tables tbody tr[data-id] td:nth-child(2) {
	font-weight: bold;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.flipTable[data-checkbox="false"] .dt-tables tbody tr[data-id] td:nth-child(1) {
	font-weight: bold;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea tr {
	width: calc(100% - 25px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea thead th:not(.checkbox_selection) {
	resize: none!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] table.renderingArea thead,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead {
	position: sticky;
	top: 0;
	background: var(--sl-bg-primary);
	z-index: 2;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] table.renderingArea thead th:not(.checkbox_selection):not(.non-resizable):not(.collapsible_icon),
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead th:not(.checkbox_selection):not(.non-resizable):not(.collapsible_icon) {
	resize: horizontal;
	position: relative;
	border-right: 1px solid transparent;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper thead tr.thead_comparison th:hover .ui-resizable-handle {
	width: 10px;
	background: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] div.table-container,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] div.table-container {
	height: calc(100% - 100px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"].hasPagination div.table-container,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hasPagination div.table-container {
	height: calc(100% - 100px)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"].hasPagination.searchEnabled div.table-container,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hasPagination.searchEnabled div.table-container {
	height: calc(100% - 165px)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"].hasPagination.hiddenSettings div.table-container,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hasPagination.hiddenSettings div.table-container {
	height: calc(100% - 60px)!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hiddenSettings:not(.hasPagination) div.table-container {
	height: calc(100% - 35px);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"].searchEnabled div.table-container, 
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].searchEnabled div.table-container {
	height: calc(100% - 145px);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead th.th-selected {
	background-color: var(--dt-selection-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hasPagination div.table-container .dt-tables {
	max-height: calc(100% - 0px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].hasPagination div.dt-pagination {
	position: absolute;
	bottom: 8px;
	width: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] div.dt-tables,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] div.dt-tables {
	max-height: 100%;
	overflow: auto;
	padding: 0 10px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="simple"] div.setting_buttons,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] div.setting_buttons {
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] div.dt-settings-contents {
	box-shadow: var(--sl-shadow-sm);
	border: 1px solid var(--sl-border-color);
	height: 50px;
	display: flex;
	align-items: center;
	margin: 0 10px 10px 10px;
	flex: 1 1 auto;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]) div.dt-settings-contents {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]):hover div.dt-settings-contents {
	display: flex;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].tiny:not([data-design="d3view"]) div.table-container {
	height: calc(100% - 0px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]):hover div.table-container {
	height: calc(100% - 60px);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .dt-settings .selection_count {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-settings .selection_count_container.hasSelected > button {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-settings .selection_count_container.hasSelected .selection_count {
	background: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] th {
	position: relative;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] th .resizer {
	position: absolute;
	top: 0;
	right: 0;
	width: 5px;
	cursor: col-resize;
	user-select: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] th .resizer:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] th .resizing {
	border-right: 2px solid var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th.disabled,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th.disabled {
	cursor: not-allowed;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .pl-ribbon-list {
	display: flex;
	align-items: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .pl-ribbon-item {
	display: flex;
	align-items: center;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper div.settings .pl-ribbon-item > a {
	flex: 1 1 auto;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse {
	padding: 6px;
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse:hover {
	color: var(--sl-accent-success);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.hasCollapsibleColumns table.bs-dt th.checkbox_selection,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.hasCollapsibleColumns table.bs-dt td.checkbox_selection {
	width: 50px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper [data-has-row-drag="true"] table.bs-dt th.checkbox_selection,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper [data-has-row-drag="true"] table.bs-dt td.checkbox_selection {
	width: 70px!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag {
	cursor: move;
	position: absolute;
	left: 0;
	color: var(--sl-text-muted);
	opacity: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper [data-has-row-drag="true"] tr[data-id]:hover td.checkbox_selection .row-drag {
	opacity: 1;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag:hover {
	color: var(--sl-text-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols {
	display: flex;
	flex-wrap: wrap;
	box-shadow: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols > li {
	flex: 0 0 calc(100% / 5 - 20px);
	margin: 7px 10px;
	width: calc(100% / 4 - 20px);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols > li:first-child {
	margin-left: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols .dtr-title {
	font-weight: bold;
	display: block;
	word-wrap: break-word;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols .dtr-value {
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name {
	cursor: pointer;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name .edit-name {
	opacity: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name:hover .edit-name {
	opacity: 1;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .custom_renderers {
	width: 200px;
	flex: 0 0 200px;
	padding-right: 10px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .back_to_table {
	width: 100%;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper:not(.scroll_enabled) table.renderingArea {
	width: fit-content!important;
	table-layout: fixed;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .custom_renderers li[data-id] {
	border-right: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .toggle_custom_renderers {
}

div.simlytiks.simlytiks-theme-modern .d3view-context-menu-container.dt-context-menu {
	width: 300px;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] .dt-thead th {
	border-color: var(--sl-border-color);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings {
	position: fixed;
	bottom: 30px;
	z-index: 10;
	top: unset;
	width: auto;
	display: none;
	background: var(--sl-bg-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings .dropdown-menu {
	top: auto;
	bottom: 100%;
	margin-bottom: 2px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings .dt-settings-contents {
	margin: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.table-container {
	height: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.dt-tables {
	padding: 0;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-color-legends {
	display: flex;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-color-legends .legends-wrapper {
	position: relative;
	width: auto!important;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-color-legends .legends-wrapper .legends-body {
	width: 100%;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-cards {
	display: flex;
	flex-wrap: wrap;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card {
	width: calc(100% - 10px);
	height: unset;
	flex: 1 1 100%;
	box-shadow: none;
	background: var(--sl-bg-primary);
	border-color: var(--sl-border-color);
	transition: border-color 0.3s ease-in;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card .group-header {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	transition: color 0.3s ease-in;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card.opened {
	height: auto;
	border-color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card .group-header:hover,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card.opened .group-header {
	color: var(--sl-accent-primary);
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card.opened .group-rows {
	display: block;
	overflow: auto;
	min-height: 150px;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card .group-rows {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-cards.hasOpenGroup.showInFull .group-card:not(.opened) {
	order: 0;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-cards.showInFull .group-card.opened {
	order: -1;
	flex-basis: 100%;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dt-tables .group-card .group-summary {
}

div.simlytiks.simlytiks-theme-modern div.child-rows .bs_datatable_wrapper {
	min-height: unset;
}
div.simlytiks.simlytiks-theme-modern .child-rows .bs_datatable_wrapper .dt-chart-container {
	min-height: unset;
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .child-rows {
	margin: 0 10px;
}

@container datatable (width < 1200px) {
	div.simlytiks.simlytiks-theme-modern .setting-button-text {
		display: none;
	}
}
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper {
	container-name: datatable;
	container-type: inline-size;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column-search-dropdown .column-jump-menu {
	box-shadow: var(--sl-shadow-md);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper.column-jump-item {
	transition: background-color 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column-jump-item:hover {
	background-color: var(--sl-bg-hover) !important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column-jump-item:active {
	background-color: var(--sl-bg-tertiary) !important;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .column-highlight {
	animation: columnHighlight 2s ease;
}

@keyframes columnHighlight {
	0% {
		background-color: transparent;
	}
	10% {
		background-color: rgba(254, 240, 138, 0.5);
		box-shadow: 0 0 10px rgba(254, 240, 138, 0.8);
	}
	100% {
		background-color: transparent;
		box-shadow: none;
	}
}

/* ============================================
   ADDITIONAL MODERN STYLING ENHANCEMENTS
   ============================================ */

/* Modern table cell content styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody td span.td-span {
	color: var(--sl-text-secondary);
	transition: var(--sl-transition);
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:hover td span.td-span {
	color: var(--sl-text-primary);
}

/* Improved selected row styling */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table tbody tr.ui-selected {
	background-color: rgba(59, 130, 246, 0.08)!important;
	box-shadow: inset 4px 0 0 var(--sl-accent-primary), var(--sl-shadow-sm);
}

/* Modern focus states for accessibility */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:focus-within {
	outline: 2px solid var(--sl-accent-primary);
	outline-offset: -2px;
	border-radius: var(--sl-border-radius-sm);
}

/* Better header typography */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead th .th-span {
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* Modern table wrapper improvements */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper {
	overflow: visible;
}

/* Remove default table borders for cleaner look */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt {
	border: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody,
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tfoot {
	border: none;
}

/* Better visual feedback for interactive elements */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt thead th {
	user-select: none;
}

div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper table.bs-dt tbody tr:active {
	transform: scale(0.998);
}

/* Modern spacing improvements */
div.simlytiks.simlytiks-theme-modern .bs_datatable_wrapper .dataTables_scrollBody {
	margin-top: 0;
}
/** Added by shashank2104 on 01/23/2026 - Modernized SVG styles for vbarchart, hbarchart, and bubble visualizers **/
div.simlytiks.simlytiks-theme-modern svg:not(.sparkline) {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

div.simlytiks.simlytiks-theme-modern .axis path,
div.simlytiks.simlytiks-theme-modern .axis line {
	fill: none;
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	shape-rendering: crispEdges;
	opacity: 0.6;
}

div.simlytiks.simlytiks-theme-modern .axis text {
	fill: var(--sl-text-secondary);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

div.simlytiks.simlytiks-theme-modern .axis .tick line {
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	opacity: 0.4;
}

div.simlytiks.simlytiks-theme-modern .axis .domain {
	stroke: var(--sl-border-color);
	stroke-width: 1.5px;
	opacity: 0.6;
}

div.simlytiks.simlytiks-theme-modern .grid path,
div.simlytiks.simlytiks-theme-modern .grid line {
	fill: none;
	stroke: var(--sl-border-color);
	shape-rendering: crispEdges;
	stroke-opacity: 0.3;
	stroke-width: 1px;
}

div.simlytiks.simlytiks-theme-modern .grid .major line {
	stroke-opacity: 0.4;
}

div.simlytiks.simlytiks-theme-modern .chart_border {
	fill: none;
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	shape-rendering: crispEdges;
	opacity: 0.5;
}

div.simlytiks.simlytiks-theme-modern .chart_svg {
	font-size: 11px;
}

div.simlytiks.simlytiks-theme-modern .chart_svg text.bar {
	fill: var(--sl-text-primary);
	font-weight: 500;
	font-size: 10px;
}

div.simlytiks.simlytiks-theme-modern svg.box {
	font: 11px 'Inter', -apple-system, sans-serif;
}

div.simlytiks.simlytiks-theme-modern svg.box line,
div.simlytiks.simlytiks-theme-modern svg.box rect,
div.simlytiks.simlytiks-theme-modern svg.box circle {
	fill: rgba(255, 255, 255, 0.9);
	stroke: var(--sl-text-secondary);
	stroke-width: 1.5px;
}

div.simlytiks.simlytiks-theme-modern svg.box .center {
	stroke-dasharray: 3, 3;
	stroke: var(--sl-text-secondary);
	opacity: 0.6;
}

div.simlytiks.simlytiks-theme-modern svg.box .outlier {
	fill: none;
	stroke: var(--sl-text-muted);
	opacity: 0.7;
}

div.simlytiks.simlytiks-theme-modern .node circle {
	fill: var(--sl-bg-primary);
	stroke: var(--sl-accent-primary);
	stroke-width: 2px;
}

div.simlytiks.simlytiks-theme-modern .node text {
	fill: var(--sl-text-primary);
	font-size: 11px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .link {
	fill: none;
	stroke: var(--sl-border-color);
	stroke-width: 1.5px;
	opacity: 0.5;
}

div.simlytiks.simlytiks-theme-modern .y.grid .major line {
	stroke: var(--sl-border-color);
	stroke-opacity: 0.5;
}

div.simlytiks.simlytiks-theme-modern svg rect,
div.simlytiks.simlytiks-theme-modern svg .bar {
	transition: opacity 0.2s ease, fill 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg rect:hover,
div.simlytiks.simlytiks-theme-modern svg .bar:hover {
	opacity: 0.85;
}

div.simlytiks.simlytiks-theme-modern svg .tick text {
	fill: var(--sl-text-secondary);
	font-size: 10px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern svg .label,
div.simlytiks.simlytiks-theme-modern svg text.label {
	fill: var(--sl-text-primary);
	font-size: 12px;
	font-weight: 600;
}

div.simlytiks.simlytiks-theme-modern svg .title,
div.simlytiks.simlytiks-theme-modern svg text.title {
	fill: var(--sl-text-primary);
	font-size: 14px;
	font-weight: 600;
}

div.simlytiks.simlytiks-theme-modern svg path {
	stroke-width: 1.5px;
}

div.simlytiks.simlytiks-theme-modern svg circle {
	stroke-width: 1.5px;
}

div.simlytiks.simlytiks-theme-modern svg .brush .extent {
	fill: var(--sl-accent-primary);
	fill-opacity: 0.1;
	stroke: var(--sl-accent-primary);
	stroke-width: 1.5px;
	stroke-dasharray: 3, 3;
}

div.simlytiks.simlytiks-theme-modern svg .brush .resize {
	fill: var(--sl-accent-primary);
	fill-opacity: 0.2;
}

div.simlytiks.simlytiks-theme-modern svg .legend text {
	fill: var(--sl-text-secondary);
	font-size: 11px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern svg .tooltip,
div.simlytiks.simlytiks-theme-modern .svg-tip {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-md);
	color: var(--sl-text-primary);
	font-size: 12px;
	padding: 8px 12px;
}

div.simlytiks.simlytiks-theme-modern svg .brush rect.extent,
div.simlytiks.simlytiks-theme-modern svg .num_colorlegend rect.extent {
	fill: var(--sl-accent-primary);
	fill-opacity: 0.15;
	stroke: var(--sl-accent-primary);
	stroke-width: 1.5px;
}

/** Added by shashank2104 on 01/23/2026 - Comprehensive modernized SVG styles for visualizers based on plugins.helpers.tpl templates **/

/* Legend Symbol SVG - for scatter plots and symbol-based charts */
div.simlytiks.simlytiks-theme-modern svg.legend-symbol {
	width: 25px;
	height: 15px;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

div.simlytiks.simlytiks-theme-modern svg.legend-symbol path {
	transition: fill 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	transform-origin: center;
}

div.simlytiks.simlytiks-theme-modern svg.legend-symbol:hover path {
	opacity: 0.85;
	transform: scale(1.1);
}

/* Legend Line SVG - for line charts and curve visualizations */
div.simlytiks.simlytiks-theme-modern svg.legend-line {
	width: 25px;
	height: 15px;
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

div.simlytiks.simlytiks-theme-modern svg.legend-line line {
	stroke-width: 3px;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
	shape-rendering: crispEdges;
}

div.simlytiks.simlytiks-theme-modern svg.legend-line:hover line {
	stroke-width: 4px;
	stroke-opacity: 0.9;
}

div.simlytiks.simlytiks-theme-modern svg.legend-line[style*="stroke-dasharray"] line {
	stroke-dasharray: inherit;
}

/* Legend Line Disabled State */
div.simlytiks.simlytiks-theme-modern svg.legend-line-disabled {
	opacity: 0.4;
	filter: grayscale(100%);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg.legend-line-disabled text {
	fill: var(--sl-text-muted);
	font-size: 14px;
}

/* Area Chart Paths */
div.simlytiks.simlytiks-theme-modern svg .area {
	fill-opacity: 0.6;
	transition: fill-opacity 0.2s ease, fill 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .area:hover {
	fill-opacity: 0.8;
}

div.simlytiks.simlytiks-theme-modern svg .area-path {
	stroke-width: 1.5px;
	stroke: var(--sl-accent-primary);
	fill: var(--sl-accent-primary);
}

/* Scatter Plot Circles */
div.simlytiks.simlytiks-theme-modern svg circle.scatter-point,
div.simlytiks.simlytiks-theme-modern svg .scatter circle {
	fill-opacity: 0.7;
	stroke-width: 1.5px;
	transition: fill-opacity 0.2s ease, r 0.2s ease, stroke-width 0.2s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg circle.scatter-point:hover,
div.simlytiks.simlytiks-theme-modern svg .scatter circle:hover {
	fill-opacity: 1;
	stroke-width: 2px;
	r: calc(var(--base-radius, 4px) * 1.2);
}

/* Line Chart Paths */
div.simlytiks.simlytiks-theme-modern svg .line {
	fill: none;
	stroke-width: 2px;
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
	shape-rendering: geometricPrecision;
}

div.simlytiks.simlytiks-theme-modern svg .line:hover {
	stroke-width: 3px;
	opacity: 0.9;
}

div.simlytiks.simlytiks-theme-modern svg .line.dashed {
	stroke-dasharray: 5, 5;
}

div.simlytiks.simlytiks-theme-modern svg .line.dotted {
	stroke-dasharray: 2, 2;
}

/* Heatmap Rectangles */
div.simlytiks.simlytiks-theme-modern svg .heatmap-cell,
div.simlytiks.simlytiks-theme-modern svg rect.heatmap {
	stroke: var(--sl-bg-primary);
	stroke-width: 1px;
	transition: stroke-width 0.15s ease, opacity 0.15s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg .heatmap-cell:hover,
div.simlytiks.simlytiks-theme-modern svg rect.heatmap:hover {
	stroke-width: 2px;
	stroke: var(--sl-text-primary);
	opacity: 0.9;
}

/* Pie and Donut Chart Arcs */
div.simlytiks.simlytiks-theme-modern svg .arc,
div.simlytiks.simlytiks-theme-modern svg path.arc {
	stroke: var(--sl-bg-primary);
	stroke-width: 2px;
	transition: stroke-width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg .arc:hover,
div.simlytiks.simlytiks-theme-modern svg path.arc:hover {
	stroke-width: 3px;
	opacity: 0.9;
	filter: brightness(1.1);
}

div.simlytiks.simlytiks-theme-modern svg .arc-label,
div.simlytiks.simlytiks-theme-modern svg text.arc-label {
	fill: var(--sl-text-primary);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

/* Bar Chart Rectangles - Enhanced */
div.simlytiks.simlytiks-theme-modern svg rect.bar {
	transition: opacity 0.2s ease, fill 0.2s ease, stroke-width 0.2s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg rect.bar:hover {
	opacity: 0.85;
	stroke-width: 1px;
	stroke: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern svg rect.bar-grouped {
	stroke: var(--sl-bg-primary);
	stroke-width: 1px;
}

/* Histogram Bars */
div.simlytiks.simlytiks-theme-modern svg rect.histogram-bar {
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	transition: fill 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg rect.histogram-bar:hover {
	stroke-width: 2px;
	stroke: var(--sl-accent-primary);
}

/* Violin Plot Shapes */
div.simlytiks.simlytiks-theme-modern svg .violin {
	fill-opacity: 0.6;
	stroke-width: 1.5px;
	transition: fill-opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .violin:hover {
	fill-opacity: 0.8;
}

/* Box Plot Elements - Enhanced */
div.simlytiks.simlytiks-theme-modern svg.box .whisker {
	stroke: var(--sl-text-secondary);
	stroke-width: 1.5px;
	opacity: 0.7;
}

div.simlytiks.simlytiks-theme-modern svg.box .median-line {
	stroke: var(--sl-accent-primary);
	stroke-width: 2px;
	opacity: 0.8;
}

/* Treemap Rectangles */
div.simlytiks.simlytiks-theme-modern svg rect.treemap {
	stroke: var(--sl-bg-primary);
	stroke-width: 2px;
	transition: stroke-width 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern svg rect.treemap:hover {
	stroke-width: 3px;
	stroke: var(--sl-text-primary);
}

/* Sankey Links and Nodes */
div.simlytiks.simlytiks-theme-modern svg .sankey-link {
	fill: none;
	stroke-opacity: 0.5;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .sankey-link:hover {
	stroke-opacity: 0.8;
	stroke-width: 2px;
}

div.simlytiks.simlytiks-theme-modern svg .sankey-node rect {
	stroke: var(--sl-text-primary);
	stroke-width: 1.5px;
	transition: stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .sankey-node:hover rect {
	stroke-width: 2.5px;
}

/* Chord Diagram */
div.simlytiks.simlytiks-theme-modern svg .chord {
	fill-opacity: 0.7;
	stroke-width: 1px;
	transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .chord:hover {
	fill-opacity: 0.9;
	stroke-width: 2px;
}

/* Parallel Coordinates Lines */
div.simlytiks.simlytiks-theme-modern svg .parallel-line {
	stroke-width: 1px;
	stroke-opacity: 0.4;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .parallel-line:hover {
	stroke-opacity: 0.8;
	stroke-width: 2px;
}

/* Radar/Spider Chart */
div.simlytiks.simlytiks-theme-modern svg .radar-area {
	fill-opacity: 0.5;
	stroke-width: 2px;
	transition: fill-opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .radar-area:hover {
	fill-opacity: 0.7;
}

div.simlytiks.simlytiks-theme-modern svg .radar-line {
	stroke-width: 2px;
	fill: none;
	transition: stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .radar-line:hover {
	stroke-width: 3px;
}

/* Streamgraph Areas */
div.simlytiks.simlytiks-theme-modern svg .stream-area {
	stroke-width: 0.5px;
	stroke: var(--sl-bg-primary);
	transition: opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .stream-area:hover {
	opacity: 0.9;
	stroke-width: 1px;
}

/* Gantt Chart Bars */
div.simlytiks.simlytiks-theme-modern svg rect.gantt-bar {
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	transition: stroke-width 0.15s ease, opacity 0.15s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg rect.gantt-bar:hover {
	stroke-width: 2px;
	stroke: var(--sl-accent-primary);
	opacity: 0.9;
}

/* Waterfall Chart */
div.simlytiks.simlytiks-theme-modern svg rect.waterfall-bar {
	stroke: var(--sl-text-primary);
	stroke-width: 1.5px;
	transition: stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg rect.waterfall-bar:hover {
	stroke-width: 2.5px;
}

/* Funnel Chart */
div.simlytiks.simlytiks-theme-modern svg path.funnel {
	stroke: var(--sl-bg-primary);
	stroke-width: 2px;
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg path.funnel:hover {
	stroke-width: 3px;
	opacity: 0.9;
}

/* Sunburst/Partition */
div.simlytiks.simlytiks-theme-modern svg path.sunburst {
	stroke: var(--sl-bg-primary);
	stroke-width: 1.5px;
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg path.sunburst:hover {
	stroke-width: 2.5px;
	opacity: 0.9;
}

/* Network/Force Directed Graph - Enhanced */
div.simlytiks.simlytiks-theme-modern svg .link-curved {
	stroke-opacity: 0.4;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .link-curved:hover {
	stroke-opacity: 0.7;
	stroke-width: 2px;
}

div.simlytiks.simlytiks-theme-modern svg .node-circle {
	transition: r 0.2s ease, stroke-width 0.2s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern svg .node-circle:hover {
	r: calc(var(--base-radius, 5px) * 1.3);
	stroke-width: 3px;
}

/* Contour Lines */
div.simlytiks.simlytiks-theme-modern svg .contour {
	fill: none;
	stroke-width: 1px;
	stroke-opacity: 0.6;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .contour:hover {
	stroke-opacity: 0.9;
	stroke-width: 1.5px;
}

/* Error Bars */
div.simlytiks.simlytiks-theme-modern svg .error-bar {
	stroke: var(--sl-text-secondary);
	stroke-width: 1.5px;
	opacity: 0.7;
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .error-bar:hover {
	stroke-width: 2px;
	opacity: 1;
}

/* Confidence Intervals */
div.simlytiks.simlytiks-theme-modern svg .confidence-band {
	fill-opacity: 0.2;
	stroke-width: 0.5px;
	transition: fill-opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .confidence-band:hover {
	fill-opacity: 0.3;
}

/* Reference Lines */
div.simlytiks.simlytiks-theme-modern svg .reference-line {
	stroke: var(--sl-accent-danger);
	stroke-width: 2px;
	stroke-dasharray: 5, 5;
	opacity: 0.7;
	transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .reference-line:hover {
	opacity: 1;
	stroke-width: 2.5px;
}

/* Trend Lines */
div.simlytiks.simlytiks-theme-modern svg .trend-line {
	stroke: var(--sl-accent-success);
	stroke-width: 2px;
	stroke-dasharray: 8, 4;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern svg .trend-line:hover {
	opacity: 1;
	stroke-width: 2.5px;
}

/* Selection and Highlight States */
div.simlytiks.simlytiks-theme-modern svg .selected {
	stroke: var(--sl-accent-primary);
	stroke-width: 3px;
	filter: brightness(1.1);
}

div.simlytiks.simlytiks-theme-modern svg .highlighted {
	opacity: 1;
	filter: brightness(1.2) drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

div.simlytiks.simlytiks-theme-modern svg .dimmed {
	opacity: 0.3;
	transition: opacity 0.2s ease;
}

/* Animation Support */
div.simlytiks.simlytiks-theme-modern svg .animated {
	animation: fadeIn 0.3s ease-in;
}

/* Focus States for Accessibility */
div.simlytiks.simlytiks-theme-modern svg *:focus {
	outline: 2px solid var(--sl-accent-primary);
	outline-offset: 2px;
}

/* Print/Export Optimizations */
@media print {
	div.simlytiks.simlytiks-theme-modern svg {
		background: white;
	}
	
	div.simlytiks.simlytiks-theme-modern svg * {
		transition: none !important;
	}
}

/** Added by shashank2104 on 01/23/2026 - Comprehensive modernized styles for Newton plugin legends and SVG containers **/

/* ============================================
   NEWTON PLUGIN - SVG CONTAINER MODERNIZATION
   ============================================ */

/* Main SVG Container */
div.simlytiks.simlytiks-theme-modern .d3view-newton .svg_container {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-sm);
	transition: box-shadow 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .svg_container:hover {
	box-shadow: var(--sl-shadow-md);
}

/* Newton SVG Elements */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg text {
	fill: var(--sl-text-primary);
	font-size: 11px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axis path,
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axis line {
	fill: none;
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	shape-rendering: crispEdges;
	opacity: 0.6;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axis text {
	fill: var(--sl-text-secondary);
	font-size: 10px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axis .tick line {
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	opacity: 0.4;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axis .domain {
	stroke: var(--sl-border-color);
	stroke-width: 1.5px;
	opacity: 0.6;
}

/* Gridlines */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-gridlines {
	opacity: 0.4;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-gridlines line {
	stroke: var(--sl-border-color);
	stroke-width: 1px;
	stroke-opacity: 0.3;
	shape-rendering: crispEdges;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-gridlines rect.pan-rect {
	fill: transparent;
	cursor: move;
}

/* Curve Paths */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg path.curve {
	stroke-width: 2px;
	fill: none;
	transition: stroke-width 0.2s ease, opacity 0.2s ease;
	shape-rendering: geometricPrecision;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg path.curve:hover {
	stroke-width: 3px;
	opacity: 0.9;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg path.curve.hidden {
	opacity: 0.2;
	pointer-events: none;
}

/* Curve Labels */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg text.curve_label {
	fill: var(--sl-text-primary);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg text.curve_label.hidden {
	opacity: 0;
}

/* Transparent Background Rect */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg rect.transparent-background {
	fill: var(--sl-bg-primary);
	opacity: 0.01;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg rect.transparent-background.highlighted-rect {
	fill: var(--sl-bg-hover);
	opacity: 0.3;
}

/* Drag Handles */
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axes_drag_handle {
	stroke-width: 15px;
	stroke: transparent;
	fill: none;
	cursor: col-resize;
	transition: stroke 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axes_drag_handle:hover,
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .axes_drag_handle.dragging {
	stroke: rgba(59, 130, 246, 0.2);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .drag_handle_x,
div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg .drag_handle_x_top {
	cursor: row-resize;
}

/* Curve Droppable Areas */
div.simlytiks.simlytiks-theme-modern .d3view-newton .svg_container .curve_droppable {
	border-radius: var(--sl-border-radius-sm);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .svg_container .curve_droppable.over {
	background: rgba(59, 130, 246, 0.1);
	border: 2px dashed var(--sl-accent-primary);
}

/* ============================================
   NEWTON PLUGIN - LEGENDS CONTAINER MODERNIZATION
   ============================================ */

/* Main Legends Container */
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container,
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container.newton-clone {
	background-color: var(--sl-bg-primary) !important;
	border: 1px solid var(--sl-border-color) !important;
	border-radius: var(--sl-border-radius-md) !important;
	box-shadow: var(--sl-shadow-md) !important;
	color: var(--sl-text-primary);
	min-width: 140px;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container:hover {
	box-shadow: var(--sl-shadow-lg);
	border-color: var(--sl-text-muted);
}

/* Legend Header */
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header,
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container.newton-clone .legend-header {
	background: var(--sl-bg-tertiary) !important;
	padding: 10px 16px;
	border-bottom: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md) var(--sl-border-radius-md) 0 0;
	cursor: move;
	transition: background-color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header:hover {
	background: var(--sl-bg-hover) !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header.border-bottom {
	border-bottom: 1px solid var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header h4 {
	color: var(--sl-text-primary);
	font-weight: 600;
	font-size: 13px;
	margin: 0;
	display: inline-block;
}

/* Legend Header Toggle Buttons */
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header .toggle-legend-options {
	cursor: pointer;
	position: relative;
	top: 2px;
	color: var(--sl-text-secondary);
	transition: color 0.15s ease;
	font-size: 14px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header .toggle-legend-options:hover {
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header .toggle-legend-options.open {
	color: var(--sl-accent-success);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header .toggle-legends {
	cursor: pointer;
	position: relative;
	padding: 0 5px;
	color: var(--sl-text-secondary);
	transition: color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legend-header .toggle-legends:hover {
	color: var(--sl-accent-primary);
}

/* Legend Body */
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body,
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container.newton-clone .legends-body {
	background: var(--sl-bg-primary);
	padding: 8px 12px !important;
	color: var(--sl-text-primary);
	min-height: 30px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body::-webkit-scrollbar {
	width: 6px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body::-webkit-scrollbar-track {
	background: var(--sl-bg-tertiary);
	border-radius: 3px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body::-webkit-scrollbar-thumb {
	background: var(--sl-border-color);
	border-radius: 3px;
	transition: background 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body::-webkit-scrollbar-thumb:hover {
	background: var(--sl-text-muted);
}

/* Legends List */
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body ul,
div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container.newton-clone .legends-body ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton div.legends-container .legends-body ul.legends-list {
	margin-bottom: 2px;
}

/* Legend Item */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.newton-clone .legend-item {
	padding: 8px 12px;
	border-radius: var(--sl-border-radius-sm);
	transition: background-color 0.15s ease, transform 0.15s ease;
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	position: relative;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover {
	background-color: var(--sl-bg-hover) !important;
	transform: translateX(2px);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.highlighted,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.ui-selected,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.ui-selecting {
	background-color: rgba(59, 130, 246, 0.1) !important;
	border-left: 3px solid var(--sl-accent-primary);
	padding-left: 9px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.clicked {
	opacity: 0.5;
	background-color: var(--sl-bg-tertiary) !important;
}

/* Legend Item Rect (Color Swatch) */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-item-rect,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.newton-clone .newton-legend-item-rect {
	display: inline-block;
	width: 12px;
	height: 12px;
	vertical-align: middle;
	margin-right: 8px;
	border-radius: 2px;
	border: 1px solid var(--sl-border-color) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	flex-shrink: 0;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-item-rect:hover {
	transform: scale(1.15);
	box-shadow: var(--sl-shadow-sm);
	border-color: var(--sl-text-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-item-rect.clicked {
	opacity: 0.4;
	border-color: var(--sl-text-muted) !important;
	background-color: transparent !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-item-rect.clicked + .curve-name {
	pointer-events: none;
	opacity: 0.4;
}

/* Curve Name */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.newton-clone .curve-name {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--sl-text-primary);
	letter-spacing: 0.2px;
	word-break: break-word;
	cursor: pointer;
	flex: 1 1 auto;
	min-width: 0;
	transition: color 0.15s ease, font-weight 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name:hover {
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name.clicked {
	opacity: 0.4;
	color: var(--sl-text-muted);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name.highlight_name {
	font-weight: 600;
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name.minmax {
	font-weight: 600;
	color: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container[data-type="main"] .curve-name {
	cursor: move;
	user-select: none;
}

/* Curve Name Edit Input */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name-edit {
	height: 24px;
	width: auto;
	display: inline-block;
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	padding: 4px 8px;
	font-size: 12px;
	font-family: 'Inter', -apple-system, sans-serif;
	background: var(--sl-bg-primary);
	color: var(--sl-text-primary);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-name-edit:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	outline: none;
}

/* Legend Options Icons */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-options {
	opacity: 0;
	margin-left: 4px;
	transition: opacity 0.15s ease;
	flex-shrink: 0;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover .legend-options,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.clicked .legend-options {
	opacity: 1 !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover .legend-options:hover {
	background-color: var(--sl-bg-hover);
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-edit,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-image {
	opacity: 0;
	right: 3px;
	top: 0;
	align-items: center;
	flex-shrink: 0;
	padding: 4px 6px;
	cursor: pointer;
	color: var(--sl-text-secondary);
	transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover:not(.isEditing) .legend-icons,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover:not(.isEditing) .legend-edit,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover:not(.isEditing) .curve-image,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item .legend-icons.clicked {
	opacity: 1 !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-edit:hover,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .curve-image:hover {
	color: var(--sl-accent-primary);
	background-color: var(--sl-bg-hover);
}

/* Baseline Icon */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .baseline {
	color: var(--sl-text-secondary);
	transition: color 0.15s ease;
	margin-left: 4px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .baseline:hover {
	color: var(--sl-accent-danger);
	cursor: context-menu;
}

/* Disabled Legend Item */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.disabled {
	color: var(--sl-text-muted);
	opacity: 0.5;
	text-decoration: line-through;
	cursor: not-allowed;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.disabled svg {
	opacity: 0.3;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.disabled .newton-legend-item-rect {
	background-color: transparent !important;
	border-color: var(--sl-text-muted) !important;
}

/* Opaque Legend Item */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item.opaque {
	opacity: 0.6;
}

/* Dash Legends SVG Lines */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container svg[width="25"][height="15"] {
	flex-shrink: 0;
	width: 25px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container svg[width="25"][height="15"] line {
	stroke-width: 2px;
	transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
	shape-rendering: crispEdges;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item:hover svg[width="25"][height="15"] line {
	stroke-opacity: 0.9;
	stroke-width: 2.5px;
}

/* Single Row Multi Curved Border */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .legend-item div[style*="border-top"] {
	border-top-width: 3px !important;
	border-radius: 2px;
	margin-bottom: 3px;
	transition: border-color 0.2s ease;
}

/* Legend Color Picker */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-cp {
	position: absolute;
	top: 0;
	left: 9px;
	display: inline-block;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container .newton-legend-cp .input-group-addon {
	padding: 0;
	border: none;
	background: none;
	width: 11px;
}

/* Toggled/Collapsed Legends */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.toggled {
	opacity: 0.7;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.toggled .legends-body {
	max-height: 0;
	overflow: hidden;
	padding: 0 !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.toggled .ui-resizable-handle {
	display: none !important;
}

/* Tiny/Limited View */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny.newton-clone {
	min-width: 80px;
	font-size: 10px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny .legends-body,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny.newton-clone .legends-body {
	padding: 4px 6px !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny .legends-body ul.legends-list,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny.newton-clone .legends-body ul.legends-list {
	margin-bottom: 1px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny .legend-header,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny.newton-clone .legend-header {
	padding: 6px 10px;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny li.legend-item,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.tiny.newton-clone li.legend-item {
	padding: 4px 8px;
	font-size: 10px;
}

/* Range Values Legends */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.range-values .curve-name,
div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container.range-values.newton-clone .curve-name {
	cursor: pointer;
}

/* Export Mode */
div.simlytiks.simlytiks-theme-modern .d3view-newton.exporting .legends-container .legend-options {
	display: none !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton.exporting .legends-container .legends-body {
	max-height: 100% !important;
	overflow: hidden !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton.exporting .legends-container .ui-resizable-handle {
	display: none !important;
}

/* Single Legend Item */
div.simlytiks.simlytiks-theme-modern .d3view-newton .single-legend-item,
div.simlytiks.simlytiks-theme-modern .d3view-newton .single-legend-item.newton-clone {
	position: absolute;
	top: 4px;
}

/* Dash Legends List */
div.simlytiks.simlytiks-theme-modern .d3view-newton ul.dash_legends {
	list-style-type: none;
	background: var(--sl-bg-tertiary);
	padding: 8px;
	cursor: move;
	border-radius: var(--sl-border-radius-sm);
	margin: 0;
}

div.simlytiks.simlytiks-theme-modern .d3view-newton ul.dash_legends li > span {
	font-family: 'Inter', -apple-system, sans-serif;
	font-weight: 500;
	font-size: 11px;
	cursor: pointer;
	color: var(--sl-text-primary);
}

/* Main Container Enhancements */
div.simlytiks.simlytiks-theme-modern .d3view-newton .main_container {
	background: var(--sl-bg-secondary);
	border-radius: var(--sl-border-radius-md);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .chart_container {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-md);
}

/* Settings Container */
div.simlytiks.simlytiks-theme-modern .d3view-newton .newton_settings_container {
	background: var(--sl-bg-primary);
	border-left: 1px solid var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton .newton_settings_container .settings_menu {
	background-color: var(--sl-bg-tertiary);
	color: var(--sl-text-primary);
	border: 1px solid var(--sl-border-color);
}

/* Tooltip Enhancements */
div.simlytiks.simlytiks-theme-modern .d3view-newton .sparkline-tooltip {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-md);
	color: var(--sl-text-primary);
	padding: 8px 12px;
	font-size: 12px;
}

/* Animation Support */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legend-item {
	animation: fadeInSlide 0.2s ease-out;
}

@keyframes fadeInSlide {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Focus States for Accessibility */
div.simlytiks.simlytiks-theme-modern .d3view-newton .legend-item:focus {
	outline: 2px solid var(--sl-accent-primary);
	outline-offset: 2px;
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg *:focus {
	outline: 2px solid var(--sl-accent-primary);
	outline-offset: 2px;
}

/* Print Optimizations */
@media print {
	div.simlytiks.simlytiks-theme-modern .d3view-newton .legends-container {
		box-shadow: none !important;
		border: 1px solid #000 !important;
	}
	
	div.simlytiks.simlytiks-theme-modern .d3view-newton svg.newton-svg {
		background: white;
	}
}

/** Added by shashank2104 on 01/23/2026 - Comprehensive modernized styles for viz preview container and all related elements **/

/* ============================================
   VIZ PREVIEW CONTAINER - MAIN CONTAINERS
   ============================================ */

/* Viz Preview Container */
div.simlytiks.simlytiks-theme-modern #viz_preview_container {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-sm);
	transition: box-shadow 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern #viz_preview_container:hover {
	box-shadow: var(--sl-shadow-md);
}

/* Viz View Panel */
div.simlytiks.simlytiks-theme-modern .vizviewPanel {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-md);
	overflow: hidden;
}

/* Panel Heading */
div.simlytiks.simlytiks-theme-modern .vizviewPanel .panel-heading {
	background: transparent;
	border-bottom: none;
	padding: var(--sl-spacing-md) var(--sl-spacing-lg);
	margin-bottom: 0;
	position: relative;
	border-radius: var(--sl-border-radius-md) var(--sl-border-radius-md) 0 0;
}

div.simlytiks.simlytiks-theme-modern .vizviewPanel .panel-heading .row {
	margin: 0;
	align-items: center;
}

/* Viz Title Container */
div.simlytiks.simlytiks-theme-modern .viz-title-container {
	margin: 0 var(--sl-spacing-lg) !important;
	padding: var(--sl-spacing-sm) 0;
}

div.simlytiks.simlytiks-theme-modern .viz-title {
	color: var(--sl-text-primary);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.4;
	transition: color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-title .fa-edit {
	color: var(--sl-text-muted);
	font-size: 13px;
	transition: color 0.15s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .viz-title .fa-edit:hover {
	color: var(--sl-accent-primary);
}

/* Panel Options */
div.simlytiks.simlytiks-theme-modern .panel-options {
	position: absolute;
	top: var(--sl-spacing-sm);
	right: var(--sl-spacing-md);
	padding: 0 !important;
	display: flex;
	align-items: center;
	gap: var(--sl-spacing-xs);
	opacity: 0;
	transition: opacity 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .vizviewPanel:hover .panel-options,
div.simlytiks.simlytiks-theme-modern .vizviewContainer.hasDDOpen .panel-options,
div.simlytiks.simlytiks-theme-modern .viewContent.quickEditOpen .panel-options {
	opacity: 1;
    visibility: visible!important;
}

/* Panel Body */
div.simlytiks.simlytiks-theme-modern .vizviewPanel .panel-body {
	background: var(--sl-bg-primary);
	padding: var(--sl-spacing-md);
	border-radius: 0 0 var(--sl-border-radius-md) var(--sl-border-radius-md);
}

div.simlytiks.simlytiks-theme-modern .vizBody {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-sm);
}

/* Viz Container */
div.simlytiks.simlytiks-theme-modern .vizContainer {
	background: var(--sl-bg-primary);
	border-radius: var(--sl-border-radius-sm);
}

/* ============================================
   VIZ PREVIEW OPTIONS CONTAINER
   ============================================ */

div.simlytiks.simlytiks-theme-modern #viz_preview_options {
	background: var(--sl-bg-primary);
	border-right: 1px solid var(--sl-border-color) !important;
	border-radius: 0;
	box-shadow: var(--sl-shadow-sm);
	padding: var(--sl-spacing-md) 0;
}

div.simlytiks.simlytiks-theme-modern #viz_preview_options.rightAligned {
	border-right: none !important;
	border-left: 1px solid var(--sl-border-color) !important;
}

div.simlytiks.simlytiks-theme-modern #viz_preview_options .viz-preview-tabs {
	background: transparent;
}

div.simlytiks.simlytiks-theme-modern #viz_preview_options .viz-preview-tabs > .tab-pane {
	padding: var(--sl-spacing-md) var(--sl-spacing-lg) !important;
	background: var(--sl-bg-primary);
}
div.simlytiks.simlytiks-theme-modern .quick-edit #viz_preview_options .viz-preview-tabs > .tab-pane {
    padding: 0!important;
    /* height: unset; */
    max-height: unset;
}
div.simlytiks .quick-edit #viz_preview_options {
    overflow: hidden!important;
}
div.simlytiks .quick-edit #viz_preview_options .viz-preview-tabs {
    /* height: 100%!important; */
    /* overflow: hidden; */
}
div.simlytiks.simlytiks-theme-modern .quick-edit .preview-footer {
    display: none;
}
/* ============================================
   FORM ELEMENTS - VIZ PARAMS
   ============================================ */

/* Viz Params Container */
div.simlytiks.simlytiks-theme-modern .viz-params {
	background: var(--sl-bg-primary);
	padding: var(--sl-spacing-md);
	border-radius: var(--sl-border-radius-md);
}

div.simlytiks.simlytiks-theme-modern .viz-params-container {
	background: var(--sl-bg-primary);
}

/* Form Groups */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group {
	margin-bottom: var(--sl-spacing-lg);
	padding: var(--sl-spacing-md);
	background: var(--sl-bg-secondary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group:hover {
	border-color: var(--sl-text-muted);
	background: var(--sl-bg-tertiary);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled {
	border-color: var(--sl-accent-success);
	background: rgba(16, 185, 129, 0.03);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.isRequired {
	border-left: 3px solid var(--sl-accent-primary);
	padding-left: calc(var(--sl-spacing-md) - 3px);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.drop-valid {
	border-color: var(--sl-accent-success);
	background: rgba(16, 185, 129, 0.05);
	box-shadow: var(--sl-focus-ring-success);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.drop-invalid {
	border-color: var(--sl-accent-danger);
	background: rgba(239, 68, 68, 0.05);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Control Label */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group .control-label {
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: var(--sl-spacing-sm);
	display: block;
	letter-spacing: -0.1px;
	transition: color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .control-label {
	color: var(--sl-accent-success);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group:not(.isRequired) .control-label:after {
	content: ' - Optional';
	font-size: 11px;
	font-style: italic;
	font-weight: 400;
	color: var(--sl-text-muted);
	margin-left: 4px;
}

/* Control Description */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group .control-description {
	color: var(--sl-text-secondary);
	font-size: 12px;
	line-height: 1.5;
	margin-top: var(--sl-spacing-xs);
	margin-bottom: var(--sl-spacing-sm);
	font-weight: 400;
}

div.simlytiks.simlytiks-theme-modern .viz-params.showDescriptions .form-group .control-description {
	display: block;
}

/* Param Datatypes */
div.simlytiks.simlytiks-theme-modern .form-group .param-datatypes {
	opacity: 1;
	color: var(--sl-text-muted);
	position: absolute;
	right: var(--sl-spacing-md);
	bottom: var(--sl-spacing-sm);
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
}

div.simlytiks.simlytiks-theme-modern .form-group .param-datatypes span[class*="icon-"] {
	font-size: 14px;
	color: var(--sl-text-secondary);
}

/* Viz Option Flag */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group .viz-option-flag {
	opacity: 1;
	color: var(--sl-text-muted);
	cursor: help;
	font-size: 14px;
	transition: color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group .viz-option-flag:hover {
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .viz-option-flag {
	color: var(--sl-accent-success);
}

/* Clear Input */
div.simlytiks.simlytiks-theme-modern .viz-params .clear-input {
	position: absolute;
	right: var(--sl-spacing-sm);
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-text-muted);
	transition: color 0.15s ease, transform 0.15s ease;
	z-index: 10;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sl-bg-tertiary);
}

div.simlytiks.simlytiks-theme-modern .viz-params .clear-input:hover {
	color: var(--sl-accent-danger);
	background: var(--sl-bg-hover);
	transform: translateY(-50%) scale(1.1);
}

/* ============================================
   SELECT2 ELEMENTS - COMPREHENSIVE MODERNIZATION
   ============================================ */

/* Select2 Container */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	width: 100% !important;
}

/* Select2 Choice (Single Select) */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container a.select2-choice {
	background: var(--sl-bg-primary) !important;
	border: 1.5px solid var(--sl-border-color) !important;
	border-radius: var(--sl-input-border-radius) !important;
	height: var(--sl-input-height) !important;
	padding: 0 var(--sl-spacing-md) !important;
	line-height: var(--sl-input-height) !important;
	transition: var(--sl-input-transition) !important;
	box-shadow: none !important;
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container a.select2-choice:hover {
	border-color: var(--sl-text-muted) !important;
	background: var(--sl-bg-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-dropdown-open a.select2-choice,
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-container-active a.select2-choice {
	border-color: var(--sl-accent-primary) !important;
	box-shadow: var(--sl-focus-ring) !important;
	background: var(--sl-bg-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .select2-container a.select2-choice {
	border-color: var(--sl-accent-success) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .select2-container.select2-dropdown-open a.select2-choice {
	box-shadow: var(--sl-focus-ring-success) !important;
}

/* Select2 Chosen Text */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choice .select2-chosen {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	line-height: var(--sl-input-height);
}

/* Select2 Arrow */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choice .select2-arrow {
	background: transparent !important;
	border-left: 1px solid var(--sl-border-color) !important;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choice:hover .select2-arrow {
	background: var(--sl-bg-tertiary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choice .select2-arrow b {
	background-position: center center;
	background-size: 12px;
	width: 12px;
	height: 12px;
	transition: transform 0.2s ease;
	border: none;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-dropdown-open .select2-choice .select2-arrow b {
	transform: rotate(180deg);
}

/* Select2 Choices (Multi Select) */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container ul.select2-choices {
	background: var(--sl-bg-primary) !important;
	border: 1.5px solid var(--sl-border-color) !important;
	border-radius: var(--sl-input-border-radius) !important;
	min-height: var(--sl-input-height) !important;
	padding: 4px 8px !important;
	transition: var(--sl-input-transition) !important;
	box-shadow: none !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container ul.select2-choices:hover {
	border-color: var(--sl-text-muted) !important;
	background: var(--sl-bg-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-dropdown-open ul.select2-choices,
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-container-active ul.select2-choices {
	border-color: var(--sl-accent-primary) !important;
	box-shadow: var(--sl-focus-ring) !important;
	background: var(--sl-bg-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .select2-container ul.select2-choices {
	border-color: var(--sl-accent-success) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .select2-container.select2-dropdown-open ul.select2-choices {
	box-shadow: var(--sl-focus-ring-success) !important;
}

/* Select2 Search Choice (Selected Items) */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-choice {
	background: var(--sl-accent-primary) !important;
	border: none !important;
	border-radius: var(--sl-border-radius-sm) !important;
	padding: 4px 8px 4px 24px !important;
	margin: 2px 4px 2px 0 !important;
	color: white;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: var(--sl-shadow-sm);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-choice:hover {
	background: var(--sl-accent-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--sl-shadow-md);
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-choice .select2-search-choice-close {
	background: rgba(255, 255, 255, 0.8) !important;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 6px;
	transform: translateY(-50%);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-choice:hover .select2-search-choice-close {
	background: white !important;
	transform: translateY(-50%) scale(1.1);
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-choice .select2-search-choice-close:before {
	color: var(--sl-accent-primary);
	font-size: 12px;
	font-weight: 600;
}

/* Select2 Search Field */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-field input {
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	height: auto;
	line-height: 1.5;
	padding: 4px 0;
	margin: 0;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container .select2-choices .select2-search-field input.select2-default {
	color: var(--sl-text-muted);
	font-style: italic;
}

/* Select2 Dropdown */
div.simlytiks.simlytiks-theme-modern .sl-select2.select2-drop,
div.simlytiks.simlytiks-theme-modern .sl-select2#select2-drop {
	background: var(--sl-bg-primary) !important;
	border: 1px solid var(--sl-border-color) !important;
	border-radius: var(--sl-border-radius-md) !important;
	box-shadow: var(--sl-shadow-lg) !important;
	margin-top: 4px;
	z-index: 9999;
}

div.simlytiks.simlytiks-theme-modern .sl-select2.select2-drop.select2-drop-active {
	border-top: 1px solid var(--sl-border-color) !important;
}

/* Select2 Search Input in Dropdown */
div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-search {
	margin: var(--sl-spacing-sm) var(--sl-spacing-md);
	padding: 0;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-search input {
	background: var(--sl-bg-secondary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	color: var(--sl-text-primary);
	width: 100%;
	transition: var(--sl-input-transition);
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-search input:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: var(--sl-focus-ring);
	outline: none;
	background: var(--sl-bg-primary);
}

/* Select2 Results */
div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results {
	margin: 0;
	padding: var(--sl-spacing-xs) 0;
	max-height: 300px;
	overflow-y: auto;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results::-webkit-scrollbar {
	width: 6px;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results::-webkit-scrollbar-track {
	background: var(--sl-bg-tertiary);
	border-radius: 3px;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results::-webkit-scrollbar-thumb {
	background: var(--sl-border-color);
	border-radius: 3px;
	transition: background 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results::-webkit-scrollbar-thumb:hover {
	background: var(--sl-text-muted);
}

/* Select2 Result Items */
div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li {
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	margin: 0;
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li.select2-result-with-children {
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	font-weight: 600;
	color: var(--sl-text-secondary);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li.select2-highlighted {
	background: var(--sl-accent-primary) !important;
	color: white !important;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li.select2-disabled {
	color: var(--sl-text-muted);
	opacity: 0.5;
	cursor: not-allowed;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li.select2-result-label {
	word-break: break-word;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sl-spacing-xs);
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li.select2-highlighted sub {
	color: rgba(255, 255, 255, 0.9) !important;
}

div.simlytiks.simlytiks-theme-modern .sl-select2 .select2-results li:not(.select2-highlighted) sub {
	color: var(--sl-text-muted);
	margin-left: 4px;
	font-size: 11px;
}

/* Select2 Allow Clear */
div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-allowclear .select2-choice abbr {
	background: none;
	top: 50%;
	transform: translateY(-50%);
	right: 32px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sl-bg-tertiary);
	color: var(--sl-text-muted);
	font-size: 12px;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .select2-container.select2-allowclear .select2-choice:hover abbr {
	background: var(--sl-bg-hover);
	color: var(--sl-accent-danger);
	transform: translateY(-50%) scale(1.1);
}

/* ============================================
   MULTISELECT ELEMENTS - COMPREHENSIVE MODERNIZATION
   ============================================ */

/* Multiselect Container */
div.simlytiks.simlytiks-theme-modern .viz-params .d3view-multiselect {
	width: 100%;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

div.simlytiks.simlytiks-theme-modern .viz-params .multiselect-container {
	position: relative;
	width: 100%;
}

/* Multiselect Toggle Button */
div.simlytiks.simlytiks-theme-modern .viz-params .d3view-multiselect .ms-dd-toggle,
div.simlytiks.simlytiks-theme-modern .viz-params .multiselect-container .ms-dd-toggle {
	background: var(--sl-bg-primary) !important;
	border: 1.5px solid var(--sl-border-color) !important;
	border-radius: var(--sl-input-border-radius) !important;
	height: var(--sl-input-height) !important;
	padding: 0 var(--sl-spacing-md) !important;
	line-height: var(--sl-input-height) !important;
	transition: var(--sl-input-transition) !important;
	box-shadow: none !important;
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .viz-params .d3view-multiselect .ms-dd-toggle:hover,
div.simlytiks.simlytiks-theme-modern .viz-params .multiselect-container .ms-dd-toggle:hover {
	border-color: var(--sl-text-muted) !important;
	background: var(--sl-bg-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .d3view-multiselect .ms-dd-toggle.open,
div.simlytiks.simlytiks-theme-modern .viz-params .multiselect-container .ms-dd-toggle.open {
	border-color: var(--sl-accent-primary) !important;
	box-shadow: var(--sl-focus-ring) !important;
	background: var(--sl-bg-primary) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .d3view-multiselect .ms-dd-toggle,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .multiselect-container .ms-dd-toggle {
	border-color: var(--sl-accent-success) !important;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .d3view-multiselect .ms-dd-toggle.open,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled .multiselect-container .ms-dd-toggle.open {
	box-shadow: var(--sl-focus-ring-success) !important;
}

/* Multiselect Dropdown Menu */
div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu {
	background: var(--sl-bg-primary) !important;
	border: 1px solid var(--sl-border-color) !important;
	border-radius: var(--sl-border-radius-md) !important;
	box-shadow: var(--sl-shadow-lg) !important;
	margin-top: 4px;
	padding: var(--sl-spacing-sm) 0;
	min-width: 100%;
	max-height: 300px;
	overflow-y: auto;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu::-webkit-scrollbar,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu::-webkit-scrollbar {
	width: 6px;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu::-webkit-scrollbar-track,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu::-webkit-scrollbar-track {
	background: var(--sl-bg-tertiary);
	border-radius: 3px;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu::-webkit-scrollbar-thumb,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu::-webkit-scrollbar-thumb {
	background: var(--sl-border-color);
	border-radius: 3px;
	transition: background 0.2s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu::-webkit-scrollbar-thumb:hover,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu::-webkit-scrollbar-thumb:hover {
	background: var(--sl-text-muted);
}

/* Multiselect Search Input */
div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container input,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container input {
	background: var(--sl-bg-secondary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	color: var(--sl-text-primary);
	width: calc(100% - 24px);
	margin: var(--sl-spacing-sm) var(--sl-spacing-md);
	transition: var(--sl-input-transition);
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container input:focus,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container input:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: var(--sl-focus-ring);
	outline: none;
	background: var(--sl-bg-primary);
}

/* Multiselect Menu Items */
div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu li,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu li {
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	margin: 0;
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu li:hover,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu li:hover {
	background: var(--sl-bg-hover);
	color: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu li.active,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu li.active {
	background: var(--sl-accent-primary);
	color: white;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .search-container .dropdown-menu li.disabled,
div.simlytiks.simlytiks-theme-modern .multiselect-container .search-container .dropdown-menu li.disabled {
	color: var(--sl-text-muted);
	opacity: 0.5;
	cursor: not-allowed;
}

/* Multiselect Selected Items Display */
div.simlytiks.simlytiks-theme-modern .d3view-multiselect .ms-selected-items,
div.simlytiks.simlytiks-theme-modern .multiselect-container .ms-selected-items {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: var(--sl-spacing-xs);
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .ms-selected-item,
div.simlytiks.simlytiks-theme-modern .multiselect-container .ms-selected-item {
	background: var(--sl-accent-primary);
	color: white;
	padding: 4px 8px;
	border-radius: var(--sl-border-radius-sm);
	font-size: 12px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: var(--sl-shadow-sm);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .ms-selected-item:hover,
div.simlytiks.simlytiks-theme-modern .multiselect-container .ms-selected-item:hover {
	background: var(--sl-accent-hover);
	transform: translateY(-1px);
	box-shadow: var(--sl-shadow-md);
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .ms-selected-item .ms-remove,
div.simlytiks.simlytiks-theme-modern .multiselect-container .ms-selected-item .ms-remove {
	cursor: pointer;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	transition: background-color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .d3view-multiselect .ms-selected-item .ms-remove:hover,
div.simlytiks.simlytiks-theme-modern .multiselect-container .ms-selected-item .ms-remove:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   BUTTONS & DROPDOWNS - MODERNIZATION
   ============================================ */

/* Buttons in Panel Options */
div.simlytiks.simlytiks-theme-modern .panel-options .btn,
div.simlytiks.simlytiks-theme-modern .panel-options .btn-sm {
	border-radius: var(--sl-border-radius-sm);
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.15s ease;
	border: 1px solid var(--sl-border-color);
	background: var(--sl-bg-primary);
	color: var(--sl-text-primary);
}

div.simlytiks.simlytiks-theme-modern .panel-options .btn-outline-on-hover {
	background: transparent;
	border: 1px solid transparent;
	color: var(--sl-text-secondary);
}

div.simlytiks.simlytiks-theme-modern .panel-options .btn-outline-on-hover:hover {
	background: var(--sl-bg-hover);
	border-color: var(--sl-border-color);
	color: var(--sl-accent-primary);
	box-shadow: var(--sl-shadow-sm);
	transform: translateY(-1px);
}

div.simlytiks.simlytiks-theme-modern .panel-options .btn-primary {
	background: var(--sl-accent-primary);
	border-color: var(--sl-accent-primary);
	color: white;
}

div.simlytiks.simlytiks-theme-modern .panel-options .btn-primary:hover {
	background: var(--sl-accent-hover);
	border-color: var(--sl-accent-hover);
	box-shadow: var(--sl-shadow-md);
	transform: translateY(-1px);
}

/* Dropdown Menus */
div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-lg);
	padding: var(--sl-spacing-xs) 0;
	margin-top: 4px;
	min-width: 200px;
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu li > a {
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	gap: var(--sl-spacing-sm);
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu li > a:hover {
	background: var(--sl-bg-hover);
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu li.active > a,
div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu li.selected > a {
	background: rgba(59, 130, 246, 0.1);
	color: var(--sl-accent-primary);
	font-weight: 600;
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu li.disabled > a {
	color: var(--sl-text-muted);
	opacity: 0.5;
	cursor: not-allowed;
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu .divider {
	background: var(--sl-border-color);
	height: 1px;
	margin: var(--sl-spacing-xs) 0;
}

div.simlytiks.simlytiks-theme-modern .panel-options .dropdown-menu .dropdown-header {
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	color: var(--sl-text-secondary);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Quick Edit Dropdown */
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu {
	width: 340px;
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-lg);
	padding: 0;
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu h3 {
	margin: 0;
	padding: var(--sl-spacing-md) var(--sl-spacing-lg);
	background: var(--sl-bg-tertiary);
	border-bottom: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--sl-border-radius-md) var(--sl-border-radius-md) 0 0;
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .close_container {
	position: absolute;
	right: var(--sl-spacing-md);
	top: var(--sl-spacing-md);
	color: var(--sl-text-muted);
	font-size: 18px;
	cursor: pointer;
	transition: color 0.15s ease;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .close_container:hover {
	color: var(--sl-accent-danger);
	background: var(--sl-bg-hover);
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container {
	padding: var(--sl-spacing-md);
	max-height: 400px;
	overflow-y: auto;
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .clearfix {
	/* padding: var(--sl-spacing-md); */
	/* border-top: 1px solid var(--sl-border-color); */
	/* background: var(--sl-bg-secondary); */
	/* border-radius: 0 0 var(--sl-border-radius-md) var(--sl-border-radius-md); */
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .btn-default {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	border-radius: var(--sl-border-radius-sm);
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .btn-default:hover {
	background: var(--sl-bg-hover);
	border-color: var(--sl-text-muted);
	color: var(--sl-accent-primary);
}

/** SIM-994 fix — Quick Edit form elements proper layout in modern theme **/
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .viz-params {
	padding: 0;
	/* height: auto !important; */
	/* margin-top: 0 !important; */
}
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .form-group {
	/* padding-left: 0; */
	/* padding-right: 0; */
	margin-bottom: 12px;
	float: none;
	width: 100%;
}
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .form-group .label-div label {
	font-size: 12px;
	font-weight: 500;
	color: var(--sl-text-primary);
	white-space: normal;
	word-break: break-word;
}
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .form-group .label-div .viz-icons {
	display: none;
}
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .form-group .columnGroup {
	width: 100%;
}
div.simlytiks.simlytiks-theme-modern .quick-edit .dropdown-menu .viz-params-container .form-group .form-control {
	height: 32px;
	font-size: 12px;
	border-radius: var(--sl-border-radius-sm);
}

/* ============================================
   ADDITIONAL UI ELEMENTS
   ============================================ */

/* Floating Filters */
div.simlytiks.simlytiks-theme-modern .floating-ff {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	box-shadow: var(--sl-shadow-md);
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	margin: var(--sl-spacing-md);
}

div.simlytiks.simlytiks-theme-modern .floating-ff .fa-filter {
	color: var(--sl-accent-primary);
	cursor: pointer;
	transition: color 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .floating-ff .fa-filter:hover {
	color: var(--sl-accent-hover);
}

div.simlytiks.simlytiks-theme-modern .formfilters-container {
	background: var(--sl-bg-secondary);
	border-radius: var(--sl-border-radius-sm);
	padding: var(--sl-spacing-sm);
	margin-top: var(--sl-spacing-sm);
}

/* Footnotes */
div.simlytiks.simlytiks-theme-modern .footnotes {
	background: var(--sl-bg-secondary);
	border-top: 1px solid var(--sl-border-color);
	padding: var(--sl-spacing-md);
	border-radius: 0 0 var(--sl-border-radius-md) var(--sl-border-radius-md);
}

div.simlytiks.simlytiks-theme-modern .footnotes .fn-editor {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	padding: var(--sl-spacing-sm) var(--sl-spacing-md);
	font-size: 13px;
	color: var(--sl-text-primary);
	font-family: 'Inter', -apple-system, sans-serif;
	transition: var(--sl-input-transition);
}

div.simlytiks.simlytiks-theme-modern .footnotes .fn-editor:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: var(--sl-focus-ring);
	outline: none;
}

div.simlytiks.simlytiks-theme-modern .footnotes .fn-editor::placeholder {
	color: var(--sl-text-muted);
}

div.simlytiks.simlytiks-theme-modern .footnotes .edit-fn {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	border-radius: var(--sl-border-radius-sm);
	padding: 6px 12px;
	margin-top: var(--sl-spacing-sm);
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .footnotes .edit-fn:hover {
	background: var(--sl-bg-hover);
	border-color: var(--sl-text-muted);
	color: var(--sl-accent-primary);
}

/* Sticky Button Group */
div.simlytiks.simlytiks-theme-modern .vis-sticky-btn-group .btn {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	border-radius: var(--sl-border-radius-sm);
	box-shadow: var(--sl-shadow-md);
	padding: 8px 12px;
	transition: all 0.15s ease;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

div.simlytiks.simlytiks-theme-modern .vis-sticky-btn-group .btn:hover {
	background: var(--sl-accent-primary);
	border-color: var(--sl-accent-primary);
	color: white;
	box-shadow: var(--sl-shadow-lg);
	transform: translateY(-2px);
}

div.simlytiks.simlytiks-theme-modern .vis-sticky-btn-group .btn-outline {
	background: transparent;
	border: 1.5px solid var(--sl-border-color);
}

div.simlytiks.simlytiks-theme-modern .vis-sticky-btn-group .btn-outline:hover {
	background: var(--sl-accent-primary);
	border-color: var(--sl-accent-primary);
	color: white;
}

/* Bottom Tags */
div.simlytiks.simlytiks-theme-modern .vis-bottom-tags {
	border-radius: 0 0 var(--sl-border-radius-md) var(--sl-border-radius-md);
	display: flex;
	align-items: center;
	gap: var(--sl-spacing-sm);
	flex-wrap: wrap;
}

div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .label,
div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .pl-label-modern {
	background: var(--sl-bg-tertiary);
	border: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	border-radius: var(--sl-border-radius-sm);
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 500;
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .label:hover,
div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .pl-label-modern:hover {
	background: var(--sl-bg-hover);
	border-color: var(--sl-text-muted);
}

div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .label-primary {
	background: rgba(59, 130, 246, 0.1);
	border-color: var(--sl-accent-primary);
	color: var(--sl-accent-primary);
}

div.simlytiks.simlytiks-theme-modern .vis-bottom-tags .label-info {
	background: rgba(59, 130, 246, 0.1);
	border-color: var(--sl-accent-primary);
	color: var(--sl-accent-primary);
}

/* Drag Handle */
div.simlytiks.simlytiks-theme-modern .viz_drag_handle {
	color: var(--sl-text-muted);
	cursor: move;
	transition: color 0.15s ease;
	padding: 6px !important;
	border-radius: var(--sl-border-radius-sm);
}

div.simlytiks.simlytiks-theme-modern .viz_drag_handle:hover {
	color: var(--sl-accent-primary);
	background: var(--sl-bg-hover);
}

/* Moving Options (Bubble Chart) */
div.simlytiks.simlytiks-theme-modern .moving_options,
div.simlytiks.simlytiks-theme-modern .circles_moving_options {
	background: var(--sl-bg-secondary);
	border: 1px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-md);
	padding: var(--sl-spacing-md);
	margin-bottom: var(--sl-spacing-md);
	align-items: center;
	gap: var(--sl-spacing-md);
	flex-wrap: wrap;
}

div.simlytiks.simlytiks-theme-modern .moving_options label,
div.simlytiks.simlytiks-theme-modern .circles_moving_options label {
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--sl-spacing-xs);
	cursor: pointer;
}

div.simlytiks.simlytiks-theme-modern .moving_options label i,
div.simlytiks.simlytiks-theme-modern .circles_moving_options label i {
	color: var(--sl-text-secondary);
}

div.simlytiks.simlytiks-theme-modern .moving_options .done_moving,
div.simlytiks.simlytiks-theme-modern .circles_moving_options .done_moving_circles {
	background: var(--sl-accent-success);
	border-color: var(--sl-accent-success);
	color: white;
	border-radius: var(--sl-border-radius-sm);
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .moving_options .done_moving:hover,
div.simlytiks.simlytiks-theme-modern .circles_moving_options .done_moving_circles:hover {
	background: #059669;
	border-color: #059669;
	box-shadow: var(--sl-shadow-md);
	transform: translateY(-1px);
}

div.simlytiks.simlytiks-theme-modern .circles_moving_options .actions-box {
	display: flex;
	gap: var(--sl-spacing-xs);
}

div.simlytiks.simlytiks-theme-modern .circles_moving_options .actions-box .btn {
	background: var(--sl-bg-primary);
	border: 1px solid var(--sl-border-color);
	color: var(--sl-text-primary);
	border-radius: var(--sl-border-radius-sm);
	padding: 6px 12px;
	font-size: 13px;
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .circles_moving_options .actions-box .btn:hover {
	background: var(--sl-bg-hover);
	border-color: var(--sl-text-muted);
	color: var(--sl-accent-primary);
}

/* Viz Divider */
div.simlytiks.simlytiks-theme-modern .vizDivider {
	padding: var(--sl-spacing-md) 0;
}

div.simlytiks.simlytiks-theme-modern .vizDivider div {
	border-top-color: var(--sl-border-color) !important;
	border-top-width: 2px !important;
	border-top-style: dashed !important;
}

/* No Data Message */
div.simlytiks.simlytiks-theme-modern .d3view-no-data {
	color: var(--sl-text-muted);
	font-size: 14px;
	padding: var(--sl-spacing-lg);
	text-align: center;
	background: var(--sl-bg-secondary);
	border-radius: var(--sl-border-radius-md);
	margin: var(--sl-spacing-md);
}

div.simlytiks.simlytiks-theme-modern .d3view-no-data i {
	color: var(--sl-accent-primary);
	margin-right: var(--sl-spacing-sm);
}

/* Input Fields (Text, Number, etc.) */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="text"],
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="number"],
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="email"],
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="password"],
div.simlytiks.simlytiks-theme-modern .viz-params .form-group textarea,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group select {
	background: var(--sl-bg-primary);
	border: 1.5px solid var(--sl-border-color);
	border-radius: var(--sl-input-border-radius);
	height: var(--sl-input-height);
	padding: var(--sl-input-padding);
	font-size: 13px;
	font-weight: 500;
	color: var(--sl-text-primary);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	transition: var(--sl-input-transition);
	width: 100%;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group textarea {
	height: auto;
	min-height: 80px;
	resize: vertical;
	line-height: 1.5;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input:hover,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group textarea:hover,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group select:hover {
	border-color: var(--sl-text-muted);
	background: var(--sl-bg-secondary);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input:focus,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group textarea:focus,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group select:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: var(--sl-focus-ring);
	outline: none;
	background: var(--sl-bg-primary);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled input:focus,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled textarea:focus,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group.fulfilled select:focus {
	border-color: var(--sl-accent-success);
	box-shadow: var(--sl-focus-ring-success);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input::placeholder,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group textarea::placeholder {
	color: var(--sl-text-muted);
	font-style: italic;
}

/* Checkboxes and Radio Buttons */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="checkbox"],
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="radio"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--sl-accent-primary);
}

/* Checkbox Labels */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group label input[type="checkbox"] + span,
div.simlytiks.simlytiks-theme-modern .viz-params .form-group label input[type="radio"] + span {
	margin-left: var(--sl-spacing-xs);
	color: var(--sl-text-primary);
	font-size: 13px;
	font-weight: 500;
}

/* Range Sliders */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="range"] {
	width: 100%;
	height: 6px;
	background: var(--sl-bg-tertiary);
	border-radius: 3px;
	outline: none;
	-webkit-appearance: none;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--sl-accent-primary);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--sl-shadow-sm);
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="range"]::-webkit-slider-thumb:hover {
	background: var(--sl-accent-hover);
	transform: scale(1.1);
	box-shadow: var(--sl-shadow-md);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--sl-accent-primary);
	border-radius: 50%;
	cursor: pointer;
	border: none;
	box-shadow: var(--sl-shadow-sm);
	transition: all 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="range"]::-moz-range-thumb:hover {
	background: var(--sl-accent-hover);
	transform: scale(1.1);
	box-shadow: var(--sl-shadow-md);
}

/* Color Picker Inputs */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="color"] {
	width: 50px;
	height: var(--sl-input-height);
	border: 1.5px solid var(--sl-border-color);
	border-radius: var(--sl-border-radius-sm);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="color"]:hover {
	border-color: var(--sl-text-muted);
	box-shadow: var(--sl-shadow-sm);
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group input[type="color"]:focus {
	border-color: var(--sl-accent-primary);
	box-shadow: var(--sl-focus-ring);
	outline: none;
}

/* Input Groups */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group .input-group {
	display: flex;
	align-items: stretch;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group .input-group-addon {
	background: var(--sl-bg-tertiary);
	border: 1.5px solid var(--sl-border-color);
	border-left: none;
	border-radius: 0 var(--sl-input-border-radius) var(--sl-input-border-radius) 0;
	padding: 0 var(--sl-spacing-md);
	display: flex;
	align-items: center;
	color: var(--sl-text-secondary);
	font-size: 13px;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group .input-group input {
	border-right: none;
	border-radius: var(--sl-input-border-radius) 0 0 var(--sl-input-border-radius);
}

/* Help Text and Icons */
div.simlytiks.simlytiks-theme-modern .viz-params .viz-icons {
	color: var(--sl-text-muted);
	font-size: 14px;
	transition: color 0.15s ease;
	cursor: help;
}

div.simlytiks.simlytiks-theme-modern .viz-params .viz-icons:hover {
	color: var(--sl-accent-primary);
}

/* Drag and Drop States */
div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-valid .select2-container a.select2-choice,
div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-valid .select2-container ul.select2-choices,
div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-valid .multiselect-container .ms-dd-toggle {
	background: rgba(16, 185, 129, 0.1) !important;
	border-color: var(--sl-accent-success) !important;
	box-shadow: var(--sl-focus-ring-success) !important;
}

div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-invalid .select2-container a.select2-choice,
div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-invalid .select2-container ul.select2-choices,
div.simlytiks.simlytiks-theme-modern .d3view-item-dragging .viz-params .form-group.drop-invalid .multiselect-container .ms-dd-toggle {
	background: rgba(239, 68, 68, 0.1) !important;
	border-color: var(--sl-accent-danger) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
	opacity: 0.7;
}

/* Animation for Form Groups */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group {
	animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Focus States for Accessibility */
div.simlytiks.simlytiks-theme-modern .viz-params .form-group *:focus {
	outline: none;
}

div.simlytiks.simlytiks-theme-modern .viz-params .form-group *:focus-visible {
	outline: 2px solid var(--sl-accent-primary);
	outline-offset: 2px;
	border-radius: var(--sl-border-radius-sm);
}

/* Print Optimizations */
@media print {
	div.simlytiks.simlytiks-theme-modern .viz-params .form-group {
		border: 1px solid #000 !important;
		box-shadow: none !important;
	}
	
	div.simlytiks.simlytiks-theme-modern .panel-options {
		display: none !important;
	}
}
div.simlytiks.simlytiks-theme-modern div.viewContent {
	transition: background-color 0.3s ease-in;
}

/* * Added by shashank2104 on 01/23/2026 at 04:28 PM - DVFIV-1899 -> Phase 5 of modernization - Modern Input Form Controls *
body.simlytiks-modern-page input.form-control,
body.simlytiks-modern-page .simlytiks input.form-control,
div.simlytiks.simlytiks-theme-modern input.form-control {
	background: var(--sl-bg-primary) !important;
	border: 1.5px solid var(--sl-border-color) !important;
	border-radius: var(--sl-input-border-radius) !important;
	height: var(--sl-input-height) !important;
	padding: var(--sl-input-padding) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--sl-text-primary) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	transition: var(--sl-input-transition) !important;
	box-shadow: none !important;
}

body.simlytiks-modern-page input.form-control:hover,
body.simlytiks-modern-page .simlytiks input.form-control:hover,
div.simlytiks.simlytiks-theme-modern input.form-control:hover {
	border-color: var(--sl-text-muted) !important;
	background: var(--sl-bg-secondary) !important;
	box-shadow: var(--sl-shadow-sm) !important;
}

body.simlytiks-modern-page input.form-control:focus,
body.simlytiks-modern-page .simlytiks input.form-control:focus,
div.simlytiks.simlytiks-theme-modern input.form-control:focus {
	border-color: var(--sl-accent-primary) !important;
	box-shadow: var(--sl-focus-ring) !important;
	outline: none !important;
	background: var(--sl-bg-primary) !important;
}

body.simlytiks-modern-page input.form-control:disabled,
body.simlytiks-modern-page .simlytiks input.form-control:disabled,
div.simlytiks.simlytiks-theme-modern input.form-control:disabled {
	background: var(--sl-bg-tertiary) !important;
	border-color: var(--sl-border-color) !important;
	color: var(--sl-text-muted) !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
}

body.simlytiks-modern-page input.form-control::placeholder,
body.simlytiks-modern-page .simlytiks input.form-control::placeholder,
div.simlytiks.simlytiks-theme-modern input.form-control::placeholder {
	color: var(--sl-text-muted) !important;
	font-style: italic !important;
	opacity: 0.8 !important;
} */

/** Added by shashank2104 on 01/23/2026 at 04:28 PM - DVFIV-1899 -> Phase 5 of modernization - Modern Bootstrap 3 Modal Styling **/

/** ====================================================================
 *  SIM-994 — Modern Header
 *  Added by shashank2104 on 03/29/2026
 *  All rules scoped under div.simlytiks.simlytiks-theme-modern
 *  ==================================================================== */

/* —— Modern header bar —— */
div.simlytiks.simlytiks-theme-modern .sl-modern-header {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    background: var(--sl-bg-surface, var(--d3v-bg-primary, #FFFFFF));
    border-bottom: 1px solid var(--sl-border, var(--d3v-border, #E2E8F0));
    box-shadow: var(--sl-sh-sm, var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08)));
    gap: 12px;
    position: relative;
    /* z-index: 200; */
    overflow: visible;
    transition: background var(--d3v-t-base, 0.2s ease), border-color var(--d3v-t-base, 0.2s ease), box-shadow var(--d3v-t-base, 0.2s ease);
}

/* —— Logo cluster —— */
div.simlytiks.simlytiks-theme-modern .sl-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-logo-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-plugin-name {
    margin: 0;
    display: flex;
    align-items: center;
}
div.simlytiks.simlytiks-theme-modern .sl-logo-dataset {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-primary, var(--d3v-text-primary, #1E293B));
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--d3v-t-base, 0.2s ease);
}

/* —— Vertical divider —— */
div.simlytiks.simlytiks-theme-modern .sl-vdiv {
    width: 1px;
    height: 24px;
    background: var(--sl-border, var(--d3v-border, #E2E8F0));
    flex-shrink: 0;
    transition: background var(--d3v-t-base, 0.2s ease);
}

/* —— Menu bar —— */
div.simlytiks.simlytiks-theme-modern .sl-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-menu-item {
    font-size: 13px;
    color: var(--sl-text-secondary, var(--d3v-text-secondary, #475569));
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s ease), color var(--d3v-t-fast, 0.12s ease);
    user-select: none;
    white-space: nowrap;
}
div.simlytiks.simlytiks-theme-modern .sl-menu-item:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}
div.simlytiks.simlytiks-theme-modern .sl-menu-item > a {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
}

/* —— Spacer —— */
div.simlytiks.simlytiks-theme-modern .sl-spacer {
    flex: 1 1 auto;
}

/* —— Pill buttons —— */
div.simlytiks.simlytiks-theme-modern .sl-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}
div.simlytiks.simlytiks-theme-modern .sl-btn-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
div.simlytiks.simlytiks-theme-modern .sl-btn-pill:active {
    transform: translateY(0);
}
div.simlytiks.simlytiks-theme-modern .sl-btn-add {
    background: linear-gradient(135deg, var(--d3v-success, #10B981), #059669);
}
div.simlytiks.simlytiks-theme-modern .sl-btn-ml {
    background: linear-gradient(135deg, var(--d3v-accent, #3B82F6), #6366F1);
}

/* —— Modern header buttons (like workflow wf-modern-btn) —— */
div.simlytiks.simlytiks-theme-modern .sl-modern-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sl-border, var(--d3v-border, #E2E8F0));
    background: transparent;
    border-radius: var(--d3v-r-sm, 6px);
    cursor: pointer;
    color: var(--sl-text-secondary, var(--d3v-text-secondary, #475569));
    font-size: 14px;
    transition: background var(--d3v-t-fast, 0.12s ease), color var(--d3v-t-fast, 0.12s ease), border-color var(--d3v-t-fast, 0.12s ease);
    flex-shrink: 0;
    position: relative;
    padding: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-btn:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
    border-color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}

/* Switch design pill: keep icon + label so the toggle stays consistent with classic mode's Modern pill */
div.simlytiks.simlytiks-theme-modern .sl-modern-btn.sl-switch-design {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-btn.sl-switch-design .sl-btn-label {
    line-height: 1;
}

/* —— Ellipsis dropdown —— */
div.simlytiks.simlytiks-theme-modern .sl-dropdown-wrap {
    position: relative;
    flex-shrink: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--sl-bg-surface, var(--d3v-bg-primary, #FFFFFF));
    border: 1px solid var(--sl-border, var(--d3v-border, #E2E8F0));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-lg, 0 10px 25px rgba(0,0,0,0.15));
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 200;
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--sl-text-primary, var(--d3v-text-primary, #1E293B));
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s ease), color var(--d3v-t-fast, 0.12s ease);
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--sl-text-muted, var(--d3v-text-muted, #94A3B8));
    font-size: 14px;
    transition: color var(--d3v-t-fast, 0.12s ease);
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown-item:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown-item:hover i {
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}
div.simlytiks.simlytiks-theme-modern .sl-dropdown-sep {
    height: 1px;
    background: var(--sl-border, var(--d3v-border, #E2E8F0));
    margin: 4px 0;
    transition: background var(--d3v-t-base, 0.2s ease);
}

/* —— Dark mode overrides for modern header —— */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-header {
    background: var(--sl-bg-header-dark, #1a1a2e);
    border-bottom-color: rgba(148,163,184,0.15);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-logo-dataset {
    color: var(--sl-text-primary-dark, #E2E8F0);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-vdiv {
    background: rgba(148,163,184,0.15);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-menu-item {
    color: var(--sl-text-secondary-dark, #94A3B8);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-btn {
    color: var(--sl-text-secondary-dark, #94A3B8);
    border-color: rgba(148,163,184,0.2);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-dropdown {
    background: #16213e;
    border-color: rgba(148,163,184,0.15);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-dropdown-item {
    color: #E2E8F0;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-dropdown-item i {
    color: #64748B;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-dropdown-sep {
    background: rgba(148,163,184,0.15);
}

/* —— Restyle integrated header dropdowns inside modern menu bar —— */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .wf-dropdowns {
    margin: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdowns-list.menu-level-1 {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdowns-list > li.dropdown > a {
    font-size: 13px;
    color: var(--sl-text-secondary, var(--d3v-text-secondary, #475569));
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s ease), color var(--d3v-t-fast, 0.12s ease);
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    border: none;
    background: none;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdowns-list > li.dropdown > a:hover,
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdowns-list > li.dropdown.open > a {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}
/* Hide caret icons in modern menu */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdowns-list > li.dropdown > a .a-icon {
    display: none;
}
/* Style dropdown menus to match modern theme */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdown-menu {
    border: 1px solid var(--sl-border, var(--d3v-border, #E2E8F0));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-lg, 0 10px 25px rgba(0,0,0,0.15));
    padding: 6px 0;
    margin-top: 4px;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdown-menu li > a {
    font-size: 13px;
    padding: 8px 16px;
    color: var(--sl-text-primary, var(--d3v-text-primary, #1E293B));
    transition: background var(--d3v-t-fast, 0.12s ease), color var(--d3v-t-fast, 0.12s ease);
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdown-menu li > a:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.10));
    color: var(--sl-accent, var(--d3v-accent, #3B82F6));
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdown-menu .divider {
    background: var(--sl-border, var(--d3v-border, #E2E8F0));
    margin: 4px 0;
}

/* Dark mode for integrated menu dropdowns */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-header .sl-menu .dropdowns-list > li.dropdown > a {
    color: var(--sl-text-secondary-dark, #94A3B8);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-header .sl-menu .dropdown-menu {
    background: #16213e;
    border-color: rgba(148,163,184,0.15);
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-header .sl-menu .dropdown-menu li > a {
    color: #E2E8F0;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-modern-header .sl-menu .dropdown-menu .divider {
    background: rgba(148,163,184,0.15);
}

/* —— Fix dropdown clipping — parent containers have overflow:hidden —— */
/* The modal-dialog has transform which creates a containing block,                */
/* preventing position:fixed from escaping. Override overflow on                   */
/* all clipping ancestors within the modal when modern theme is active.            */
div.simlytiks.simlytiks-theme-modern .datamodel-options,
div.simlytiks.simlytiks-theme-modern .simlytiks-wrapper {
    overflow: visible !important;
}
/* Override on inner simlytiks container (has dynamic datasource class) */
.simlytiks-theme-modern div.simlytiks[class*="simlytiks-datasource"] {
    overflow: visible !important;
}
/* The outer container itself */
div.simlytiks.simlytiks-outer-container.simlytiks-theme-modern {
    overflow: visible !important;
}
/* The plugin-header-right and header level containers */
div.simlytiks.simlytiks-theme-modern .d3view-plugin-header,
div.simlytiks.simlytiks-theme-modern .plugin-header-right,
div.simlytiks.simlytiks-theme-modern .plugin-header-level1 {
    overflow: visible !important;
}
/* Modal body that wraps the simlytiks container */
body.simlytiks-modern-page .modal-body {
    overflow: visible !important;
}
/* The modal itself - only when modern page is active */
body.simlytiks-modern-page .modal.in {
    overflow: visible !important;
}
/* Remove transform on modal-dialog that creates a containing block clipping fixed/absolute children */
body.simlytiks-modern-page .modal-dialog {
    transform: none !important;
    -webkit-transform: none !important;
}
/* Dropdown z-index above everything — covers menu dropdowns, data model dropdowns, etc. */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .dropdown-menu {
    z-index: 10000;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .dropdown-menu {
    z-index: 10000;
}
/* Data models dropdown in modern header */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .plugin-name {
    overflow: visible !important;
}
div.simlytiks.simlytiks-theme-modern .sl-modern-header .datamodels-dd,
div.simlytiks.simlytiks-theme-modern .sl-modern-header .dataset-switch-dd {
    z-index: 10000;
}

/* —— Pill button inner anchor reset —— */
div.simlytiks.simlytiks-theme-modern .sl-btn-pill > a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* —— Hide duplicate Add Viz / Run ML buttons inside integrated header when in modern header —— */
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .vis_options,
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .ml_charts,
div.simlytiks.simlytiks-theme-modern .sl-modern-header .sl-menu .ml-queue-dropdown {
    display: none !important;
}

/** Updated by shashank2104 on 04/15/2026 - DVFIV-1997 - Advanced Dashboard now lives inside sl-main-window next to sl-main-content. Keep the left responses-panel sidebar visible so users can drag responses onto widgets. Only hide the charts-list (redundant with the dashboard's own palette). **/
div.simlytiks.sl-view-advanced-dashboard .sl-charts-container {
    display: none !important;
}
div.simlytiks.sl-view-advanced-dashboard .simlytiks-wrapper .slBody.mainPanel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    overflow: hidden !important;
}
div.simlytiks.sl-view-advanced-dashboard .sl-main-window {
    display: flex;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
div.simlytiks.sl-view-advanced-dashboard .sl-main-window > .sl-advanced-dashboard-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
div.simlytiks.sl-view-advanced-dashboard .sl-main-window > .sl-advanced-dashboard-container.hidden {
    display: none !important;
}
div.simlytiks.sl-view-advanced-dashboard .sl-main-window > .sl-advanced-dashboard-container .db-dashboard-header {
    display: none !important;
}
div.simlytiks .mainPanel .d3view-dashboard-v2 .db-vertical-page-sidebar {
    width: 80px;
}
div.simlytiks .mainPanel .d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li > a .pl-tab-item-label {
    opacity: 1;
    max-width: unset;
}
div.simlytiks .mainPanel .d3view-dashboard-v2 .db-widget-body {
	pointer-events: all!important;
}
/* —— Responsive —— */
@media (max-width: 900px) {
    div.simlytiks.simlytiks-theme-modern .sl-logo-dataset { display: none; }
    div.simlytiks.simlytiks-theme-modern .sl-menu { display: none; }
    div.simlytiks.simlytiks-theme-modern .sl-btn-pill span.sl-btn-label { display: none; }
    div.simlytiks.simlytiks-theme-modern .sl-btn-pill { padding: 0 12px; }
}


/* ============================================================================
   SIM-1002 - Premium curveplot frame (Option A · Refined Classic) - viz card.
   Added by shashank2104 on 2026-06-04.

   Gives the Simlytiks viz container that holds a PREMIUM Newton (curveplot /
   survivalspace) the Option A `o1-card` treatment: a soft, rounded, shadowed
   surface. Scoped via :has(.d3view-newton.newton-premium) so ONLY premium
   Newton viz are affected — default/compact decks and non-Newton charts are
   untouched. The newton-internal frame (legbar band, rail, plot) lives in
   plugins/newton/javascripts/spa/newton.css under .newton-premium.
   ============================================================================ */
.viewContent:has(.d3view-newton.newton-premium),
.vizviewPanel:has(.d3view-newton.newton-premium) > .panel-body.vizBody {
    background: #ffffff;
}
.viewContent:has(.d3view-newton.newton-premium) {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07) !important;
    overflow: hidden;
}
/* title row -> Option A o1-head: hairline divider under the viz title */
.viewContent:has(.d3view-newton.newton-premium) .panel-heading {
    border-bottom: 1px solid #eef2f7;
}

/* ----------------------------------------------------------------------------
   The SAME o1-card treatment for every premium viz.defs chart (bubble, bar,
   donut, pie, parallel, radar, ...). Scoped via the generic
   :has(.d3view-viz[data-viz-style-preset="premium"]) marker so the whole
   visualizer family converges on one card look. Added by shashank2104 on
   2026-06-04 - SIM-1002.
   ---------------------------------------------------------------------------- */
.viewContent:has(.d3view-viz[data-viz-style-preset="premium"]),
.vizviewPanel:has(.d3view-viz[data-viz-style-preset="premium"]) > .panel-body.vizBody {
    background: #ffffff;
}
.viewContent:has(.d3view-viz[data-viz-style-preset="premium"]) {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07) !important;
    overflow: hidden;
}
.viewContent:has(.d3view-viz[data-viz-style-preset="premium"]) .panel-heading {
    border-bottom: 1px solid #eef2f7;
}

/* ----------------------------------------------------------------------------
   PedProTable premium card. PedProTable is a STANDALONE visualizer whose root
   is .pedpro-container (not .d3view-viz), so the generic :has() rule above does
   not match it — give it the SAME o1-card treatment via its own per-chart
   marker. Added by shashank2104 on 2026-06-05 - SIM-1002.
   ---------------------------------------------------------------------------- */
.viewContent:has(.pedpro-container[data-viz-style-preset="premium"]),
.vizviewPanel:has(.pedpro-container[data-viz-style-preset="premium"]) > .panel-body.vizBody {
    background: #ffffff;
}
.viewContent:has(.pedpro-container[data-viz-style-preset="premium"]) {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07) !important;
    overflow: hidden;
}
.viewContent:has(.pedpro-container[data-viz-style-preset="premium"]) .panel-heading {
    border-bottom: 1px solid #eef2f7;
}

/* ----------------------------------------------------------------------------
   PedProViz premium card. PedProViz (the composite hood map + acc-curve + metric
   bars) is a STANDALONE visualizer whose root is div.d3view-pedpro (distinct from
   pedprotable's .pedpro-container) — give it the SAME o1-card via its own marker.
   Added by shashank2104 on 2026-06-05 - SIM-1002.
   ---------------------------------------------------------------------------- */
.viewContent:has(div.d3view-pedpro[data-viz-style-preset="premium"]),
.vizviewPanel:has(div.d3view-pedpro[data-viz-style-preset="premium"]) > .panel-body.vizBody {
    background: #ffffff;
}
.viewContent:has(div.d3view-pedpro[data-viz-style-preset="premium"]) {
    border: 1px solid #e6eaf1 !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07) !important;
    overflow: hidden;
}
.viewContent:has(div.d3view-pedpro[data-viz-style-preset="premium"]) .panel-heading {
    border-bottom: 1px solid #eef2f7;
}

/* ----------------------------------------------------------------------------
   Histogram premium card. histogram is a STANDALONE visualizer whose root is
   .d3view-histogram and circlePack USED to build their own bespoke roots and needed
   their own card markers. Updated 2026-06-06 - SIM-1002: both are now REAL viz.defs
   charts (they call Viz.Defs.InitDOM and live under .d3view-viz), so the generic
   .viewContent:has(.d3view-viz[data-viz-style-preset="premium"]) card above already
   styles them — the bespoke histogram / circlePack card rules were removed as dead.
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   R0-3924 — Modern-theme header: inline Page Layout / options block.
   When uiTheme is modern, the page layout + options controls render INLINE in
   the main header (.page-options-header) next to the page-tab manager. Give it
   a proper flex box (vertically centred) with breathing room on the right, and
   let the tab manager SHRINK (min-width:0) so the options never overflow the
   header's right edge. The tab manager sizes off its OWN inner element, so its
   visible-tab count is re-measured in JS (_capModernHeaderTabManagerWidth) —
   CSS alone can't shrink it; see simlytiks.main.views.js initiateTabManager.
   ---------------------------------------------------------------------------- */
div.simlytiks.simlytiks-theme-modern .main-header .tab-manager {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
div.simlytiks.simlytiks-theme-modern .main-header .tab-manager .d3view-tab-manager {
    max-width: 100%;
}
div.simlytiks.simlytiks-theme-modern .main-header .page-options-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 10px;
}

/* ============================================================================
 *  Section 1 — Universal export polish (applies for every theme, incl. default)
 *  Gated only on .d3view-exporting / .d3view-global-exporting — the export
 *  pipeline always toggles these.
 * ============================================================================ */

/* --- Sparkline_matrix top bar hide (DW-2977) ---
 *  Chart Type dropdown, x-range slider, time slider, Reset, Settings button.
 *  Replaces the .settings-right child selectors above with a single rule. **/
.d3view-exporting .d3view-color-blocks > .settings,
.d3view-exporting .d3view-color-blocks .panel-selection-options:empty,
.d3view-exporting .d3view-color-blocks .viz-legends:empty,
.d3view-global-exporting .d3view-color-blocks > .settings,
.d3view-global-exporting .d3view-color-blocks .panel-selection-options:empty,
.d3view-global-exporting .d3view-color-blocks .viz-legends:empty,
/* --- IIHS chrome + newton-simple-settings-header + "Colored By" floating legend (DVFIV-2058) --- */
.d3view-exporting .add_point_container,
.d3view-exporting .iihs-container > .settings-container,
.d3view-exporting .iihs-container .settings-container .settings-dropdown,
.d3view-exporting .iihs-chart-container > .legends-wrapper,
.d3view-exporting .iihs-chart-container .d3view-legends-container.default-legends,
.d3view-exporting .newton-simple-settings-header,
.d3view-exporting .d3view-newton .newton-simple-settings-header,
.d3view-exporting .pl-color-by-legend,
.d3view-exporting .d3view-color-by-legend,
.d3view-global-exporting .add_point_container,
.d3view-global-exporting .iihs-container > .settings-container,
.d3view-global-exporting .iihs-container .settings-container .settings-dropdown,
.d3view-global-exporting .iihs-chart-container > .legends-wrapper,
.d3view-global-exporting .iihs-chart-container .d3view-legends-container.default-legends,
.d3view-global-exporting .newton-simple-settings-header,
.d3view-global-exporting .d3view-newton .newton-simple-settings-header,
/* --- A1: inline dynamic-options strip (DW-2977) --- */
.d3view-exporting div.simlytiks div.dynamic-options {
    display: none !important;
}

/* --- Sparkline-container height fill (DW-2977) ---
 *  sparkline_matrix sets sparkline-container height inline at render time via JS
 *  (vizEl.height - settings.height - 20). When .settings collapses on export, the
 *  inner container keeps its smaller computed height, leaving an empty strip at
 *  the bottom of the captured PNG/GIF. Force it to fill the freed space. **/
.d3view-exporting .d3view-color-blocks .viz-outer-container,
.d3view-exporting .d3view-color-blocks .sparkline-container,
.d3view-global-exporting .d3view-color-blocks .viz-outer-container,
.d3view-global-exporting .d3view-color-blocks .sparkline-container {
    height: 100% !important;
}

/* --- A2: flipTable-wide layout for many-record export tables (DW-2977) ---
 *  flipTable with many records overflows the wrapper width because white-space:
 *  nowrap on cells pins each column-card's min-content to its longest cell text.
 *  The .flipTable-wide class (added by DataTable.js when record count > 3) opts
 *  into wrap+small font so all N cards share the slide width with multi-line
 *  cells. 1-3 records keep the original nowrap/ellipsis behavior. **/
.d3view-exporting .bs_datatable_wrapper.flipTable-wide .dt-tables,
.d3view-exporting .bs_datatable_wrapper.flipTable-wide .table-container {
    overflow: visible !important;
    width: 100% !important;
}
.d3view-exporting .bs_datatable_wrapper.flipTable-wide table.bs-dt {
    table-layout: fixed !important;
    width: 100% !important;
}
.d3view-exporting .bs_datatable_wrapper.flipTable-wide table.bs-dt tbody,
.d3view-exporting .bs_datatable_wrapper.flipTable-wide table.bs-dt tbody tr {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}
.d3view-exporting .bs_datatable_wrapper.flipTable-wide tr th,
.d3view-exporting .bs_datatable_wrapper.flipTable-wide tr td {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 2px 8px !important;
}
.d3view-exporting .bs_datatable_wrapper.flipTable-wide tr th[data-column="name"],
.d3view-exporting .bs_datatable_wrapper.flipTable-wide tr td[data-col="name"] {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    overflow: visible !important;
    height: auto !important;
    min-height: var(--flip-row-h) !important;
    max-height: none !important;
    line-height: 1.25 !important;
}

/* --- text-viz-cards overflow on export --- */
.d3view-exporting .d3view-textviz-cards,
.d3view-global-exporting .d3view-textviz-cards {
    overflow: visible !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-sections,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-sections {
    overflow: visible !important;
}

/* --- Datatable compact single-line cells on PPT export ---
 *  wordWrap:false in the bundle keeps text on one line; the CSS below tightens
 *  padding and forces ellipsis so a metric-by-run table reads as a scannable
 *  grid rather than 4-row-tall cells. Interactive view keeps its roomier
 *  padding. **/
.d3view-exporting .bs_datatable_wrapper table.bs-dt th,
.d3view-exporting .bs_datatable_wrapper table.bs-dt td,
.d3view-global-exporting .bs_datatable_wrapper table.bs-dt th,
.d3view-global-exporting .bs_datatable_wrapper table.bs-dt td {
    padding: 6px 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.d3view-exporting .bs_datatable_wrapper.flipTable tr th,
.d3view-exporting .bs_datatable_wrapper.flipTable tr td,
.d3view-global-exporting .bs_datatable_wrapper.flipTable tr th,
.d3view-global-exporting .bs_datatable_wrapper.flipTable tr td {
    padding: 0 14px !important;
}

/* --- hbarchart no-scroll + crisp horizontal-bar rendering ---
 *  Paired with fitAllBarsWithinHeight:true in the premium bundle. The visualizer
 *  wraps the SVG in div.chart-container which defaults to overflow:auto for the
 *  interactive view — on the slide that surfaces a scrollbar the moment N>10.
 *  Force no-scroll inside the export wrappers; crispEdges keeps thin bars (high N)
 *  clean. **/
.d3view-exporting .hbarchart .chart-container,
.d3view-global-exporting .hbarchart .chart-container {
    overflow: hidden !important;
}
.d3view-exporting .d3view-viz[data-chart-type="barchart-horizontal"] svg .bar rect,
.d3view-exporting .d3view-viz[data-chart-type="horizontalbarchart"] svg .bar rect,
.d3view-global-exporting .d3view-viz[data-chart-type="barchart-horizontal"] svg .bar rect,
.d3view-global-exporting .d3view-viz[data-chart-type="horizontalbarchart"] svg .bar rect {
    shape-rendering: crispEdges;
}

/* --- Gauge-card export-friendly polish --- */
.d3view-exporting .d3v-gauge-kpi-fallback,
.d3view-global-exporting .d3v-gauge-kpi-fallback {
    box-shadow: none !important;
    border-color: var(--d3v-border-soft, #e6e8eb) !important;
}

/* --- Page-color-legends positioning on export --- */
.d3view-exporting div.simlytiks .page-container .page-color-legends-top {
    position: relative;
    left: 75px;
    width: calc(100% - 75px);
}
.d3view-exporting div.simlytiks .page-container .page-color-legends-right {
    left: auto;
}

/* --- Premium export: page-color-by legend strip flush-left ---
 *  Added by shashank2104 on 2026-06-03. The export rule above shifts the
 *  top page-color-by legend right by 75px (left: 75px), which overrode the
 *  10px JS offset and made the page legend mis-align with the viz title.
 *  On the PREMIUM deck (body[data-reporter-export-theme="premium"]) pin the
 *  strip to the container's left edge so it lines up with the viz title.
 *  Both .d3view-exporting and .d3view-global-exporting are body classes and
 *  data-reporter-export-theme is a body attribute, so the compound body
 *  selector raises specificity above the rule above. */
body.d3view-exporting[data-reporter-export-theme="premium"] div.simlytiks .page-container .page-color-legends-top,
body.d3view-global-exporting[data-reporter-export-theme="premium"] div.simlytiks .page-container .page-color-legends-top {
    /* Updated by shashank2104 on 2026-06-03 - R0-3672 - 5px left inset (was 0)
       so the page color-by legend lines up under the viz title text rather than
       flush to the container edge. Width compensates to keep the right edge. */
    left: 5px !important;
    width: calc(100% - 5px) !important;
}

/* --- Premium export: flat textviz disclaimer (R0-3672, 2026-06-03) ---
 *  Section 6 of simlytiks.css wraps the disclaimer cards in ONE bordered +
 *  shadowed outer surface with 28px section padding and hairline dividers.
 *  On the PREMIUM deck that box reads as too much chrome — strip it entirely
 *  and zero the horizontal padding so the copy is clean, full-width editorial
 *  text flush on the left rail (matching the page + viz titles). The compound
 *  body + attribute selector outranks the Section 6 rule (both !important). */
/* Outer cards container: zero ALL padding so the copy is flush on the left rail
   (the base .d3view-textviz-cards rule keeps a 28px horizontal pad that was the
   remaining indent). Updated 2026-06-03. */
body.d3view-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards,
body.d3view-global-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards {
    padding: 10px  !important;
}
body.d3view-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-sections,
body.d3view-global-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-sections {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
body.d3view-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-section,
body.d3view-global-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-section {
    padding: 14px 0 !important;
}
body.d3view-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-section + .d3v-textviz-card-section,
body.d3view-global-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-section + .d3v-textviz-card-section {
    border-top: 0 !important;
}
/* Header (first paragraph / title row) loses its left accent bar + divider too. */
body.d3view-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-header,
body.d3view-global-exporting[data-reporter-export-theme="premium"] .d3view-textviz-cards .d3v-textviz-card-header {
    padding: 0 0 14px 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
}

/* --- Font normalization for PPT consistency ---
 *  pptxgenjs renders native PPT text in Arial. domtoimage inlines computed
 *  styles from the live DOM, so without this the captured chart images use
 *  the system font stack (-apple-system / Segoe UI) while slide titles and
 *  labels are Arial — visible mismatch on the same slide. Force Arial on
 *  the viz capture containers so rasterized legends, axis labels, and tick
 *  text match the surrounding PPT typography. */
.d3view-exporting .vizviewPanel,
.d3view-exporting .vizviewPanel *,
.d3view-exporting .vizBody,
.d3view-exporting .vizBody *,
.d3view-global-exporting .vizviewPanel,
.d3view-global-exporting .vizviewPanel *,
.d3view-global-exporting .vizBody,
.d3view-global-exporting .vizBody * {
    font-family: Arial, Helvetica, sans-serif !important;
}


/* ============================================================================
 *  Section 2 — Premium theme
 *  Stamped via <body data-reporter-export-theme="premium"> by
 *  simlytiks.exporters.js when the report_generator worker's
 *  reporterStylingPreset is 'premium'.
 *  Mirrors the prior REPORTER_STYLING_PRESETS.premium font sizes + crisp set.
 *  Visualizers that write inline font-size (Newton .curve_label, …) need
 *  !important to be overridden; SVG <text> with empty inline font-size
 *  inherits naturally from the cascade.
 * ============================================================================ */

/* SVG axis / tick / x|y label — 14px (was --d3v-export-axis-fs) */
body[data-reporter-export-theme="premium"] svg .tick text,
body[data-reporter-export-theme="premium"] svg .axis text,
body[data-reporter-export-theme="premium"] svg text.axis-label,
body[data-reporter-export-theme="premium"] svg text.xLabel,
body[data-reporter-export-theme="premium"] svg text.yLabel {
    font-size: 14px;
}
/* Newton / curveplot / survivalspace HTML axis labels — uses
 * --d3v-export-axis-label-fs so VizStylePreset axisLabelFontSize can drive
 * the value (set inline on the container by the reporter renderer).
 * Fallback 20px matches the premium preset default. */
body[data-reporter-export-theme="premium"] .xLabel.curve_label,
body[data-reporter-export-theme="premium"] .yLabel.curve_label,
body[data-reporter-export-theme="premium"] .yLabel2.curve_label {
    font-size: var(--d3v-export-axis-label-fs, 24px) !important;
}

/* Legends — 14px (was --d3v-export-legend-fs) */
body[data-reporter-export-theme="premium"] .legends-wrapper .legend-item,
body[data-reporter-export-theme="premium"] .legends-body,
body[data-reporter-export-theme="premium"] svg text.legend-text,
body[data-reporter-export-theme="premium"] svg .legend text {
    font-size: 14px;
}

/** Added by shashank2104 on 2026-06-02 - R0-3672 - capitalize curve-name labels
 *  in premium legend items. Series names often arrive lowercase / snake_case
 *  from upstream schemas (e.g. "force_x", "displacement_y") — capitalize on
 *  the rendered span so premium decks read as proper titles without touching
 *  the underlying data. **/
body[data-reporter-export-theme="premium"] .legends-wrapper .legend-item span.curve-name-span,
body[data-reporter-export-theme="premium"] .legends-body span.curve-name-span {
    text-transform: capitalize;
}

/** Added by shashank2104 on 2026-05-29 - R0-3672 - page-level right legend
 *  evenly-spaced items on premium export. Mirrors the per-viz Newton legend
 *  layout added in DVFIV-2059 (visualizations.css ~2500). Interactive view
 *  keeps gap:4px + overflow-y:auto from simlytiks-main.css; on export we
 *  want the legend items distributed across the full chart height. **/
/** Updated by shashank2104 on 2026-06-01 - R0-3672 - explicit height: 100%
 *  + align-self: stretch so the legend column reliably fills the page-view
 *  height during the html2canvas capture (the offscreen render can drop
 *  flex-parent stretch, leaving the column intrinsic-sized — then the inner
 *  justify-content: center on .legends-body has nothing to center against
 *  and the legend collapses to the top of the column).
 *  We also force .sl-page (the immediate flex parent) to known height so the
 *  child stretch is unambiguous in the captured DOM. **/
body[data-reporter-export-theme="premium"] div.simlytiks .sl-page.sl-page-has-right-legend {
    height: 100% !important;
    min-height: 0 !important;
}
/** Updated by shashank2104 on 06/02/2026 at 12:43 PM - R0-3672 - full-row stretch only
 *  when JS has not synced the column to .viz-content-container; synced columns get
 *  top/height from simlytiks.views.js#_sizeRightLegendColumn. **/
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right:not(.sl-right-legend-synced) {
    overflow: hidden !important;
    height: 100% !important;
    align-self: stretch !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced {
    overflow: hidden !important;
    align-self: flex-start !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right .legends-wrapper,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right .d3view-legends-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right .legends-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    gap: 0 !important;
    max-height: none !important;
    width: 100% !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right .legends-body > ul,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right .legends-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
    height: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
}
/** Updated by shashank2104 on 06/02/2026 at 01:42 PM - R0-3672 - page legend may render TWO
 *  .d3view-legends-container blocks (colorBy + curveBy). Per-block space-evenly + height:100%
 *  splits 1.1–1.4 from Baseline/Test into separate stretched zones. Flatten with
 *  display:contents so every .legend-item is a flex child of the synced column and ONE
 *  justify-content:space-evenly spans the full chart band (Excel-style). **/
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .d3view-legends-container,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .legends-wrapper,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .legends-body,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .legends-body > ul,
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .legends-list {
    display: contents !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0 !important;
}
body[data-reporter-export-theme="premium"] div.simlytiks .page-color-legends-right.sl-right-legend-synced .legend-item {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Data labels — 13px (was --d3v-export-data-label-fs) */
body[data-reporter-export-theme="premium"] svg text.bar-value,
body[data-reporter-export-theme="premium"] svg text.data-label,
body[data-reporter-export-theme="premium"] svg .data-labels text,
body[data-reporter-export-theme="premium"] .data-label-html {
    font-size: 13px;
}

/* Datatable cells — 14px (was --d3v-export-table-fs) */
body[data-reporter-export-theme="premium"] .datatable-cell,
body[data-reporter-export-theme="premium"] .header-row .datatable-cell,
body[data-reporter-export-theme="premium"] .ranking-table-cell {
    font-size: 14px;
}

/** Added by shashank2104 on 2026-05-29 - R0-3672 - premium DataTable thead fill.
 *  Updated 2026-06-03 - replaced the navy (#1B2A4A) header with a clean light-gray
 *  (#F1F3F5) + bold dark text (#1F2937) header — TinyMCE-default feel, less heavy.
 *  Mirrors the native PPT header from VizStylePresets.table.pptHeaderFill
 *  (#F1F3F5) and pptHeaderColor (#1F2937) that DataTable.exportTableDataToPPT +
 *  reporter.v3 paint on slide.addTable header rows. Brings HTML-captured tables
 *  (reporter PPT export + cert PDF) in line with the native-PPT look so a
 *  customer flipping between deck pages sees the same header chrome on every
 *  table viz.
 *
 *  flipTable is INCLUDED — its `thead` becomes the LEFT label column when
 *  display:flex flips the layout, so painting `thead th` gives that
 *  column a clear "key column" identity (bold dark text on light-gray with
 *  matching border). Selector `thead th` naturally covers both:
 *    - non-flipTable: top header row
 *    - flipTable:     left label column **/
body[data-reporter-export-theme="premium"] .bs_datatable_wrapper table.bs-dt thead th,
body[data-reporter-export-theme="premium"] .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt thead th,
body[data-reporter-export-theme="premium"] .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt thead th,
.d3view-exporting .cert-preview-content .bs_datatable_wrapper table.bs-dt thead th,
.d3view-exporting .cert-preview-content .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt thead th,
.d3view-exporting .cert-preview-content .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt thead th,
.d3view-global-exporting .cert-preview-content .bs_datatable_wrapper table.bs-dt thead th,
.d3view-global-exporting .cert-preview-content .bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt thead th,
.d3view-global-exporting .cert-preview-content .bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt thead th {
    background: #F1F3F5 !important;
    background-color: #F1F3F5 !important;
    color: #1F2937 !important;
    font-weight: 700 !important;
    border-color: #D6DCE8 !important;
}
/* Scoping the row containers too so any inherited odd/even fill on the
 * <tr> doesn't peek through cell padding edges. flipTable EXCLUDED — its
 * `thead tr` is a vertical column stretched via `flex: 1 1 auto`
 * (DataTable.css:1381-1388), so painting it navy made the colour run past
 * the last data <th> cell down to the bottom of the card on short tables.
 * The individual `thead th` cells already get the navy from the rule above,
 * and in flipTable mode each cell has `width: 100%` so there are no padding
 * gaps for a row-level background to need to fill. */
body[data-reporter-export-theme="premium"] .bs_datatable_wrapper:not(.flipTable) table.bs-dt thead tr,
.d3view-exporting .cert-preview-content .bs_datatable_wrapper:not(.flipTable) table.bs-dt thead tr,
.d3view-global-exporting .cert-preview-content .bs_datatable_wrapper:not(.flipTable) table.bs-dt thead tr {
    background: #F1F3F5 !important;
}

/** Added by shashank2104 on 2026-06-02 - R0-3672 - consistency pass for
 *  TinyMCE-authored tables in the cert body. The cert builder lets users drop
 *  freeform tables alongside DataTable viz embeds; those land as plain
 *  `<table>` markup inside `.cert-preview-content`. Without this rule they
 *  render with the browser default white header while neighbouring DataTable
 *  viz blocks show the light-gray `#F1F3F5` header from the rules above — visible
 *  mismatch on the same page. Paint the TinyMCE `thead` light-gray too so all
 *  table chrome on a cert page reads as the same family.
 *
 *  CHILD COMBINATORS (`>`) are load-bearing here, NOT cosmetic. The cert
 *  layout regularly nests a flipTable bs-dt viz inside a TinyMCE 2-column
 *  layout `<table>` (that's how the Specimen / Hardening cards sit side
 *  by side). With a descendant combinator `table:not(.bs-dt) thead tr`,
 *  the inner bs-dt's `thead tr` ALSO matches because it's a descendant
 *  of the outer non-bs-dt table — repainting the flipTable head tr navy
 *  and reintroducing the bleed-past-last-cell we just fixed. The
 *  `table:not(.bs-dt) > thead > tr` chain restricts the rule to thead
 *  rows whose IMMEDIATE parent table isn't bs-dt, so it stays on the
 *  outer TinyMCE table and never bleeds into nested viz tables. **/
.d3view-exporting .cert-preview-content table:not(.bs-dt) > thead > tr,
.d3view-exporting .cert-preview-content table:not(.bs-dt) > thead > tr > th,
.d3view-global-exporting .cert-preview-content table:not(.bs-dt) > thead > tr,
.d3view-global-exporting .cert-preview-content table:not(.bs-dt) > thead > tr > th {
    background: #F1F3F5 !important;
    background-color: #F1F3F5 !important;
    color: #1F2937 !important;
    font-weight: 700 !important;
    border-color: #D6DCE8 !important;
}

/* Crisp-rendering — premium bundle picks all three techniques.
 * (was body[data-d3v-export-crisp~="text-geometric-precision lines-crisp-edges font-antialiased"]) */
body[data-reporter-export-theme="premium"] svg text {
    text-rendering: geometricPrecision;
}
body[data-reporter-export-theme="premium"] svg .tick line,
body[data-reporter-export-theme="premium"] svg .domain,
body[data-reporter-export-theme="premium"] svg .grid line,
body[data-reporter-export-theme="premium"] svg path.axis {
    shape-rendering: crispEdges;
}
body[data-reporter-export-theme="premium"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================================
 *  Section 3 — Compact theme
 *  Stamped via <body data-reporter-export-theme="compact"> when the worker's
 *  reporterStylingPreset is 'compact'. Smaller font sizes; no crisp hints
 *  (compact intentionally omits the geometricPrecision / crispEdges /
 *  font-smoothing rules that the premium theme applies in Section 2).
 * ============================================================================ */

body[data-reporter-export-theme="compact"] svg .tick text,
body[data-reporter-export-theme="compact"] svg .axis text,
body[data-reporter-export-theme="compact"] svg text.axis-label,
body[data-reporter-export-theme="compact"] svg text.xLabel,
body[data-reporter-export-theme="compact"] svg text.yLabel {
    font-size: 10px;
}
body[data-reporter-export-theme="compact"] .xLabel.curve_label,
body[data-reporter-export-theme="compact"] .yLabel.curve_label,
body[data-reporter-export-theme="compact"] .yLabel2.curve_label {
    font-size: 10px !important;
}
body[data-reporter-export-theme="compact"] .legends-wrapper .legend-item,
body[data-reporter-export-theme="compact"] .legends-body,
body[data-reporter-export-theme="compact"] svg text.legend-text,
body[data-reporter-export-theme="compact"] svg .legend text {
    font-size: 10px;
}
body[data-reporter-export-theme="compact"] svg text.bar-value,
body[data-reporter-export-theme="compact"] svg text.data-label,
body[data-reporter-export-theme="compact"] svg .data-labels text,
body[data-reporter-export-theme="compact"] .data-label-html {
    font-size: 10px;
}
body[data-reporter-export-theme="compact"] .datatable-cell,
body[data-reporter-export-theme="compact"] .header-row .datatable-cell,
body[data-reporter-export-theme="compact"] .ranking-table-cell {
    font-size: 11px;
}

/* default theme: no rules — preserves pre-2026-05-21 behaviour. */


/* ============================================================================
 *  Section 4 — Nice placeholder card (premium NHTSA-style empty handling)
 *  Added by shashank2104 on 2026-05-28
 *
 *  Rendered by Simlytiks.Config.renderNicePlaceholder via chartFactory when a
 *  viz model carries `_nicePlaceholder: true` (tagged in simlytiks.main.views.js
 *  during the conditions filter when the user picks 'nice_placeholders' as the
 *  smart-exclude mode, auto-set by the premium reporterStylingPreset).
 *
 *  Card replaces the chart body in the same .d3Panel / .viz-canvas slot so the
 *  viz title and surrounding chrome from the wrapping VizView still render —
 *  premium decks therefore preserve every page/viz structurally while
 *  empty sections quietly read "No data captured" instead of broken charts.
 * ============================================================================ */

/** Added by shashank2104 on 05/28/2026 - Hide the "Edit the visualization to pick available responses." action hint inside the rich `sl-viz-invalid-tpl` empty state during export. The hint is interactive guidance — pointless on a static PPT slide / PDF page. Scoped to .d3view-exporting / .d3view-global-exporting so the live UI keeps the hint. **/
.d3view-exporting .sl-viz-empty-state .sl-viz-empty-hint,
.d3view-global-exporting .sl-viz-empty-state .sl-viz-empty-hint {
    display: none !important;
}

.sl-export-empty-placeholder {
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.sl-export-empty-placeholder-card {
    width: 100%;
    max-width: 480px;
    text-align: center;
    padding: 20px 28px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.sl-export-empty-placeholder-icon {
    font-size: 24px;
    line-height: 1;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 10px;
}

.sl-export-empty-placeholder-icon .fa,
.sl-export-empty-placeholder-icon i {
    display: inline-block;
}

.sl-export-empty-placeholder-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.sl-export-empty-placeholder-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--d3v-text-secondary, #64748b);
    max-width: 360px;
    margin: 0 auto;
}

/* Premium theme: slightly larger card + premium-tier color saturation. */
body[data-reporter-export-theme="premium"] .sl-export-empty-placeholder-card {
    padding: 28px 36px;
    background: var(--d3v-bg-elevated, #ffffff);
    border-color: var(--d3v-border-default, #cbd5e1);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.08));
}

body[data-reporter-export-theme="premium"] .sl-export-empty-placeholder-icon {
    font-size: 30px;
    color: var(--d3v-accent-primary, #2563eb);
    opacity: 0.55;
    margin-bottom: 14px;
}

body[data-reporter-export-theme="premium"] .sl-export-empty-placeholder-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--d3v-text-primary, #0f172a);
}

body[data-reporter-export-theme="premium"] .sl-export-empty-placeholder-subtitle {
    font-size: 14px;
}

/* Compact theme: tighter padding, smaller fonts to fit dense grids. */
body[data-reporter-export-theme="compact"] .sl-export-empty-placeholder-card {
    padding: 14px 18px;
    max-width: 360px;
}

body[data-reporter-export-theme="compact"] .sl-export-empty-placeholder-icon {
    font-size: 20px;
    margin-bottom: 6px;
}

body[data-reporter-export-theme="compact"] .sl-export-empty-placeholder-title {
    font-size: 13px;
}

body[data-reporter-export-theme="compact"] .sl-export-empty-placeholder-subtitle {
    font-size: 11.5px;
}


/* ============================================================================
 *  Section 5 — Premium Certificate Chrome
 *  Added by shashank2104 on 2026-05-29
 *
 *  Cert PDF export path stamps body.d3view-exporting + d3view-global-exporting
 *  in CertificationRenderer.capturePageImages (~1805) / .generatePdf (~2244),
 *  and the cert renderer wraps every page in `.cert-preview-content`.  Any
 *  rule scoped to `.d3view-exporting .cert-preview-content` therefore fires
 *  on every cert PDF capture without needing the per-deck
 *  body[data-reporter-export-theme="premium"] gate that reports use.
 *
 *  Goals (mirror the premium PPT report family, no new palette, no new fonts):
 *    a) Chart-level typography parity with Section 2 — 14px axes/legends,
 *       13px data labels, 14px datatable cells, crisp SVG rendering, page-
 *       level right-legend even distribution.
 *    b) Cert document chrome — Arial across cert headings + body + tables,
 *       premium type scale on h1/h2/h3, polished viz-embed cards, polished
 *       tables, refined header/footer typography, page-break hygiene.
 *
 *  Specificity: outputContentCss inlines `.cert-preview-content h1 {…}` (one
 *  class).  Our `.d3view-exporting .cert-preview-content h1` is two classes
 *  → wins without !important except where viz inline `style="…"` must be
 *  overridden (Arial normalization, viz-embed dashed border).
 * ============================================================================ */

/* --- 5.1 Chart-level premium typography on cert exports
 *      Mirrors Section 2 selectors verbatim, swapped scope from
 *      body[data-reporter-export-theme="premium"] → .d3view-exporting
 *      .cert-preview-content (+ .d3view-global-exporting twin). **/

/* SVG axis / tick / x|y label — 14px */
.d3view-exporting .cert-preview-content svg .tick text,
.d3view-exporting .cert-preview-content svg .axis text,
.d3view-exporting .cert-preview-content svg text.axis-label,
.d3view-exporting .cert-preview-content svg text.xLabel,
.d3view-exporting .cert-preview-content svg text.yLabel,
.d3view-global-exporting .cert-preview-content svg .tick text,
.d3view-global-exporting .cert-preview-content svg .axis text,
.d3view-global-exporting .cert-preview-content svg text.axis-label,
.d3view-global-exporting .cert-preview-content svg text.xLabel,
.d3view-global-exporting .cert-preview-content svg text.yLabel {
    font-size: 14px;
    font-weight: 400;
}

/* --- 5.1.5 Cert tick font size cap
 *      Premium preset sets `--global-tick-font-size: 24px` INLINE on the
 *      simlytiks outer container (SimlytiksView reads
 *      REPORTER_STYLING_PRESETS.premium.globalAxisTickFontSize and applies
 *      it via .style.setProperty). The simlytiks-main.css `.customFontSize
 *      .axis text { font-size: var(--global-tick-font-size)!important }`
 *      rule then overrides our 5.1 14px baseline above. 24px is sized for
 *      full-slide PPT reports — on portrait cert pages with narrower viz
 *      cards it reads oversized. Cap to 18px in cert scope only by
 *      rewriting the CSS var with `!important` (needed to beat the inline
 *      stylesheet write). Reports keep 24. **/
.d3view-exporting .cert-preview-content div.simlytiks.customFontSize,
.d3view-global-exporting .cert-preview-content div.simlytiks.customFontSize {
    --global-tick-font-size: 18px !important;
}

/* Newton / curveplot / survivalspace HTML axis labels — uses
 * --d3v-export-axis-label-fs so VizStylePreset axisLabelFontSize can drive
 * the value (set inline on the container by the reporter renderer).
 * Fallback 20px matches the premium preset default. */
.d3view-exporting .cert-preview-content .xLabel.curve_label,
.d3view-exporting .cert-preview-content .yLabel.curve_label,
.d3view-exporting .cert-preview-content .yLabel2.curve_label,
.d3view-global-exporting .cert-preview-content .xLabel.curve_label,
.d3view-global-exporting .cert-preview-content .yLabel.curve_label,
.d3view-global-exporting .cert-preview-content .yLabel2.curve_label {
    font-size: var(--d3v-export-axis-label-fs, 24px) !important;
}

/* Legends — 14px */
.d3view-exporting .cert-preview-content .legends-wrapper .legend-item,
.d3view-exporting .cert-preview-content .legends-body,
.d3view-exporting .cert-preview-content svg text.legend-text,
.d3view-exporting .cert-preview-content svg .legend text,
.d3view-global-exporting .cert-preview-content .legends-wrapper .legend-item,
.d3view-global-exporting .cert-preview-content .legends-body,
.d3view-global-exporting .cert-preview-content svg text.legend-text,
.d3view-global-exporting .cert-preview-content svg .legend text {
    font-size: 14px;
}

/* Page-level right-legend evenly-spaced items — mirrors Section 2 ~239–270 */
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right {
    overflow: hidden !important;
}
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-wrapper,
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right .d3view-legends-container,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-wrapper,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right .d3view-legends-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-body,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    gap: 0 !important;
    max-height: none !important;
    width: 100% !important;
}
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-body > ul,
.d3view-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-list,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-body > ul,
.d3view-global-exporting .cert-preview-content div.simlytiks .page-color-legends-right .legends-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
    height: 100% !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* Data labels — 13px */
.d3view-exporting .cert-preview-content svg text.bar-value,
.d3view-exporting .cert-preview-content svg text.data-label,
.d3view-exporting .cert-preview-content svg .data-labels text,
.d3view-exporting .cert-preview-content .data-label-html,
.d3view-global-exporting .cert-preview-content svg text.bar-value,
.d3view-global-exporting .cert-preview-content svg text.data-label,
.d3view-global-exporting .cert-preview-content svg .data-labels text,
.d3view-global-exporting .cert-preview-content .data-label-html {
    font-size: 13px;
}

/* Datatable cells — 14px */
.d3view-exporting .cert-preview-content .datatable-cell,
.d3view-exporting .cert-preview-content .header-row .datatable-cell,
.d3view-exporting .cert-preview-content .ranking-table-cell,
.d3view-global-exporting .cert-preview-content .datatable-cell,
.d3view-global-exporting .cert-preview-content .header-row .datatable-cell,
.d3view-global-exporting .cert-preview-content .ranking-table-cell {
    font-size: 14px;
}

/* Crisp-rendering — premium bundle picks all three techniques. */
.d3view-exporting .cert-preview-content svg text,
.d3view-global-exporting .cert-preview-content svg text {
    text-rendering: geometricPrecision;
}
.d3view-exporting .cert-preview-content svg .tick line,
.d3view-exporting .cert-preview-content svg .domain,
.d3view-exporting .cert-preview-content svg .grid line,
.d3view-exporting .cert-preview-content svg path.axis,
.d3view-global-exporting .cert-preview-content svg .tick line,
.d3view-global-exporting .cert-preview-content svg .domain,
.d3view-global-exporting .cert-preview-content svg .grid line,
.d3view-global-exporting .cert-preview-content svg path.axis {
    shape-rendering: crispEdges;
}
.d3view-exporting .cert-preview-content,
.d3view-global-exporting .cert-preview-content {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* --- 5.2 Cert document chrome ---
 *      Arial across cert root, premium type scale on headings, polished
 *      body / tables / viz-embeds / headers / footers. Token-driven, no
 *      hardcoded palette.
 **/

/* Arial normalization on cert root — Section 1 only covers .vizviewPanel /
 * .vizBody. Cert headings + body text + tables fall back to system font
 * stack from the inlined outputContentCss; this aligns them with the viz
 * captures so a premium PPT/PDF reads as one typeface throughout. */
.d3view-exporting .cert-preview-content,
.d3view-exporting .cert-preview-content *,
.d3view-global-exporting .cert-preview-content,
.d3view-global-exporting .cert-preview-content * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Premium cert headings — keep the #1a365d color from outputContentCss,
 * tighten sizes, weight, letter-spacing, line-height + margins. */
.d3view-exporting .cert-preview-content h1,
.d3view-global-exporting .cert-preview-content h1 {
    font-size: 22pt;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #1a365d;
    margin: 18px 0 10px;
}
.d3view-exporting .cert-preview-content h2,
.d3view-global-exporting .cert-preview-content h2 {
    font-size: 18pt;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #1a365d;
    margin: 12px 0 8px;
}
.d3view-exporting .cert-preview-content h3:not(.legends-label),
.d3view-global-exporting .cert-preview-content h3:not(.legends-label) {
    font-size: 14pt;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #1a365d;
    margin: 10px 0 6px;
}
.d3view-exporting .cert-preview-content h4,
.d3view-global-exporting .cert-preview-content h4 {
    font-size: 12pt;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #1a365d;
    margin: 10px 0 6px;
}

/** Added by shashank2104 on 2026-05-29 - R0-3678 - Premium block-level
 *  breathing room. The default cert pages are dense — h1/h2 + viz card +
 *  table + footer all crammed together. Premium decks want generous vertical
 *  rhythm so each block reads as a discrete section. Combined with the
 *  cert renderer's keep-with-next pagination (CertificationRenderer.js
 *  ~1040), a heading + its viz now travel together to the next page when
 *  the breathing room would otherwise overflow.
 *  Selectors target the cert-block wrapper directly so spacing applies
 *  whether the inner content is heading / text / table / viz / etc. **/
.d3view-exporting .cert-preview-content .cert-block,
.d3view-global-exporting .cert-preview-content .cert-block {
    margin-bottom: 18px;
}
.d3view-exporting .cert-preview-content .cert-block:last-child,
.d3view-global-exporting .cert-preview-content .cert-block:last-child {
    margin-bottom: 0;
}
/* H1 cert blocks get extra top space when they're not the page's first child
 * (typical when a section heading sits below the previous section's body). */
.d3view-exporting .cert-preview-content .cert-block[data-type="heading"] + .cert-block[data-type="heading"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="heading"] + .cert-block[data-type="heading"] {
    margin-top: 22px;
}
/* Viz blocks get more room above and below — they're the visual centerpieces. */
.d3view-exporting .cert-preview-content .cert-block[data-type="viz"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="viz"] {
    margin-top: 12px;
    margin-bottom: 24px;
}
/* Heading immediately above a viz tightens — the pair reads as one unit. */
.d3view-exporting .cert-preview-content .cert-block[data-type="heading"] + .cert-block[data-type="viz"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="heading"] + .cert-block[data-type="viz"] {
    margin-top: 4px;
}
/* Text immediately above a viz also tightens — narrative belongs with its chart. */
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] + .cert-block[data-type="viz"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] + .cert-block[data-type="viz"] {
    margin-top: 4px;
}
/* Table blocks get a touch more bottom space — they end a section visually. */
.d3view-exporting .cert-preview-content .cert-block[data-type="table"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"] {
    margin-bottom: 22px;
}

/* Body text — premium body copy color + line-height. The selector matches
 * both the cert-block container and prose inside it. */
.d3view-exporting .cert-preview-content .cert-block[data-type="text"],
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] p,
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] li,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] p,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d3v-text-primary, #0f172a);
}

/* Viz-embed card polish — outputContentCss leaves the default dashed
 * #94a3b8 inline border + no shadow. Override with a solid premium border,
 * rounded corners and a subtle shadow so each chart card "lifts" off the
 * page. !important on border because the dashed style is inline. */
.d3view-exporting .cert-preview-content .cert-viz-embed,
.d3view-global-exporting .cert-preview-content .cert-viz-embed {
    border: 1px solid var(--d3v-border-subtle, #e2e8f0) !important;
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
    background: #ffffff;
    overflow: hidden;
}

/* Premium cert tables — covers both `[data-type="table"]` and TinyMCE-
 * inlined tables inside `[data-type="text"]`. Mirrors the premium
 * `.datatable-cell` look (14px / 8px-12px padding / token bg).
 *
 * Updated by shashank2104 on 2026-05-29 - R0-3672 - table-layout:fixed.
 * TinyMCE side-by-side viz layouts produce <table width:100%> with two
 * <td width:48.7283%> cells. Default table-layout:auto treats those
 * percentage widths as hints — when a cell's MIN-CONTENT width exceeds
 * the percentage (LS-DYNA <pre white-space:pre> content stretches the
 * intrinsic min-content to the widest line ~540px), the cell grows
 * past 48.73% and the whole table overflows the cert content area.
 * Forcing table-layout:fixed makes 48.73% a hard contract; overflow
 * inside is then clipped by the viz wrapper. */
.d3view-exporting .cert-preview-content .cert-block[data-type="table"] table,
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] table,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"] table,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    font-size: 14px;
    color: var(--d3v-text-primary, #0f172a);
}
/* Clip any inner content (textviewer / viz embed) that's wider than its
 * fixed cell — prevents the visible overflow leaking past the panel border. */
.d3view-exporting .cert-preview-content .cert-block[data-type="table"] table td,
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] table td,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"] table td,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] table td {
    overflow: hidden;
}
.d3view-exporting .cert-preview-content .cert-viz-embed,
.d3view-global-exporting .cert-preview-content .cert-viz-embed {
    max-width: 100% !important;
    overflow: hidden !important;
}
.d3view-exporting .cert-preview-content .cert-block[data-type="table"] table th,
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] table th,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"] table th,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] table th {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    padding: 8px 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    text-align: left;
}
.d3view-exporting .cert-preview-content .cert-block[data-type="table"] table td,
.d3view-exporting .cert-preview-content .cert-block[data-type="text"] table td,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"] table td,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="text"] table td {
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    padding: 8px 12px;
}

/* Repeating cert headers / footers — premium PPT slide-master cadence.
 * Block-level rules (top/bottom border, padding) drive the visual divider;
 * font-size override keeps page-chrome from competing with body text. */
.d3view-exporting .cert-preview-content .cert-block[data-type="header"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="header"] {
    font-size: 10pt;
    color: var(--d3v-text-muted, #64748b);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    margin-bottom: 10px;
}
.d3view-exporting .cert-preview-content .cert-block[data-type="footer"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="footer"] {
    font-size: 10pt;
    color: var(--d3v-text-muted, #64748b);
    padding-top: 6px;
    border-top: 1px solid var(--d3v-border-subtle, #e2e8f0);
    margin-top: 10px;
}
/* Page footer slot also gets the muted treatment when populated. */
.d3view-exporting .cert-preview-content + .cert-preview-footer-slot,
.d3view-global-exporting .cert-preview-content + .cert-preview-footer-slot,
.d3view-exporting .cert-preview-page > .cert-preview-footer-slot,
.d3view-global-exporting .cert-preview-page > .cert-preview-footer-slot {
    font-size: 10pt;
    color: var(--d3v-text-muted, #64748b);
}

/* Page-break hygiene — keep viz / tables / occupant / injury blocks whole
 * across pagination boundaries; never end a page on a heading. */
.d3view-exporting .cert-preview-content .cert-block[data-type="viz"],
.d3view-exporting .cert-preview-content .cert-block[data-type="table"],
.d3view-exporting .cert-preview-content .cert-block[data-type="occupant"],
.d3view-exporting .cert-preview-content .cert-block[data-type="injury"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="viz"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="table"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="occupant"],
.d3view-global-exporting .cert-preview-content .cert-block[data-type="injury"] {
    break-inside: avoid;
    page-break-inside: avoid;
}
.d3view-exporting .cert-preview-content h1,
.d3view-exporting .cert-preview-content h2,
.d3view-exporting .cert-preview-content h3,
.d3view-exporting .cert-preview-content h4,
.d3view-global-exporting .cert-preview-content h1,
.d3view-global-exporting .cert-preview-content h2,
.d3view-global-exporting .cert-preview-content h3,
.d3view-global-exporting .cert-preview-content h4 {
    break-after: avoid-page;
    page-break-after: avoid;
}

/* Viz internal containers — kill scrollbars during cert export.
 * Without this, Simlytiks's `.viz-container.__main` carries
 * `overflow-y: auto` from the interactive stylesheet, so any chart whose
 * natural content overflows the cert-viz-embed (e.g. a 6-category vbar in
 * a 600px slot) bakes a horizontal/vertical scrollbar straight into the
 * PDF capture. Mirror Section 1's hbarchart fix (line ~150) across all
 * cert viz embeds. **/
/** R0-3678 — `.cert-preview-content` itself is the page wrapper; even a few
 *  px of vertical overflow renders the OS scrollbar on its right edge AND
 *  bakes into the PDF capture. Force overflow:hidden at the page root so the
 *  baked-in chrome doesn't appear in the final PDF. Content that genuinely
 *  exceeds page height is handled by pagination (paginateContent splits into
 *  multiple pages); the rare 4-12px residual is safe to clip. */
.d3view-exporting .cert-preview-content,
.d3view-global-exporting .cert-preview-content,
.d3view-exporting .cert-preview-content .cert-viz-embed .viz-container,
.d3view-exporting .cert-preview-content .cert-viz-embed .chart-container,
.d3view-exporting .cert-preview-content .cert-viz-embed .d3view-viz,
.d3view-exporting .cert-preview-content .cert-viz-embed .d3view-newton,
.d3view-exporting .cert-preview-content .cert-viz-embed .main_container,
.d3view-exporting .cert-preview-content .cert-viz-embed .newton-main,
.d3view-exporting .cert-preview-content .cert-viz-embed .newton-charts,
/** Updated 2026-05-29 R0-3678 — extend the overflow-hidden hammer to the
 *  sparkline / cert-curve-placeholder paths. Mode I cert "Mean Steady-State
 *  Force-Deflection Envelope" + "Average Glc per Specimen" chart slots use
 *  these containers, not .cert-viz-embed, so they kept their inner viz
 *  scrollbars in the PDF capture. */
.d3view-exporting .cert-preview-content .cert-sparkline-container,
.d3view-exporting .cert-preview-content .cert-curve-placeholder,
.d3view-exporting .cert-preview-content .cert-sparkline-container .viz-container,
.d3view-exporting .cert-preview-content .cert-sparkline-container .chart-container,
.d3view-exporting .cert-preview-content .cert-sparkline-container .d3view-newton,
.d3view-exporting .cert-preview-content .cert-sparkline-container .main_container,
.d3view-exporting .cert-preview-content .cert-sparkline-container .newton-main,
.d3view-exporting .cert-preview-content .cert-sparkline-container .newton-charts,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .main_container,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .newton-main,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .newton-charts,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .viz-container,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .chart-container,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .d3view-viz,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .d3view-newton,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .main_container,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .newton-main,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .newton-charts,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .viz-container,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .chart-container,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .d3view-newton,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .main_container,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .newton-main,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .newton-charts,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .main_container,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .newton-main,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .newton-charts {
    overflow: hidden !important;
}

/* Light polish for empty viz slots — the cert pipeline currently doesn't
 * flag `_nicePlaceholder`, but if a `.cert-viz-placeholder` or empty
 * `.cert-block[data-type="viz"]` lands in a page it still gets a clean
 * token-driven card instead of an empty box. */
.d3view-exporting .cert-preview-content .cert-viz-placeholder,
.d3view-exporting .cert-preview-content .cert-block[data-type="viz"]:empty,
.d3view-global-exporting .cert-preview-content .cert-viz-placeholder,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="viz"]:empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-default, #cbd5e1);
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 13px;
    font-style: italic;
}
.d3view-exporting .cert-preview-content .cert-viz-placeholder::before,
.d3view-exporting .cert-preview-content .cert-block[data-type="viz"]:empty::before,
.d3view-global-exporting .cert-preview-content .cert-viz-placeholder::before,
.d3view-global-exporting .cert-preview-content .cert-block[data-type="viz"]:empty::before {
    content: 'No data available';
}

/* --- Section 5.7 (R0-3678) — Newton in-plot legend hammer for cert exports.
 *
 *  Even with vizConfig.options.showLegendLabels:'no' + disableLegendHeader:true
 *  reaching Newton's `m.options` (verified via runtime probe), Newton renders
 *  one or more legend containers INSIDE the curveplot that overlap the plot
 *  area with "Colored By: <col>" + the per-series labels. The corresponding
 *  JS gates (newton.viz.js:17179 / plugins.helpers.tpl:1162 `disableHeader` /
 *  `.hideLegendLabels`) only cover the colorBy-path legend; single-curve
 *  plots (no colorBy) render the curve name via a separate path that's not
 *  gated by either flag.
 *
 *  Sledgehammer: in cert export mode, hide every flavor of legend chrome
 *  inside `.cert-viz-embed`. The chart already has its own title above + a
 *  per-block caption (`.cert-viz-caption`) carrying the semantic name, and
 *  multi-curve series are visually distinguishable by color alone. Scoped
 *  strictly to cert-export so the interactive cert builder preview keeps
 *  the full legend chrome. */
/** Updated 2026-05-29 — keep colored swatches + series labels VISIBLE for
 *  multi-curve cases (otherwise the reader can't tell which line is which).
 *  Only kill the redundant "Colored By: <col>" header that JS gates miss
 *  for some Newton paths. */
.d3view-exporting .cert-preview-content .cert-viz-embed .d3view-newton .legends-wrapper .legends-label,
.d3view-exporting .cert-preview-content .cert-viz-embed .d3view-newton .d3view-legends-container .legends-label,
.d3view-exporting .cert-preview-content .cert-viz-embed .pl-color-by-legend .legends-label,
.d3view-exporting .cert-preview-content .cert-viz-embed .d3view-color-by-legend .legends-label,
.d3view-exporting .cert-preview-content .cert-sparkline-container .d3view-newton .legends-wrapper .legends-label,
.d3view-exporting .cert-preview-content .cert-sparkline-container .d3view-newton .d3view-legends-container .legends-label,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton .legends-wrapper .legends-label,
.d3view-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton .d3view-legends-container .legends-label,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .d3view-newton .legends-wrapper .legends-label,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .d3view-newton .d3view-legends-container .legends-label,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .pl-color-by-legend .legends-label,
.d3view-global-exporting .cert-preview-content .cert-viz-embed .d3view-color-by-legend .legends-label,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .d3view-newton .legends-wrapper .legends-label,
.d3view-global-exporting .cert-preview-content .cert-sparkline-container .d3view-newton .d3view-legends-container .legends-label,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton .legends-wrapper .legends-label,
.d3view-global-exporting .cert-preview-content .cert-curve-placeholder .d3view-newton .d3view-legends-container .legends-label {
    display: none !important;
}

/* --- Section 5.8 (R0-3678) — cert-viz-caption premium typography.
 *
 *  wfExecutor.handleCertificationBuilder injects a `<div class="cert-viz-caption"
 *  style="font-size:13px; …">` above every viz block before rendering (executor
 *  line ~9757).  The 13px inline style is the legacy "default" preset look —
 *  in premium cert exports it reads as tiny next to the chart's own 24px axis
 *  labels.  Override via class with !important (required to beat the inline
 *  style attribute) so the caption matches the surrounding premium chrome.
 *
 *  Cert export only (`.d3view-exporting`/`.d3view-global-exporting`) — the
 *  interactive cert builder preview keeps the legacy 13px to stay compact in
 *  the editor canvas. */
.d3view-exporting .cert-preview-content .cert-viz-caption,
.d3view-global-exporting .cert-preview-content .cert-viz-caption {
    font-size: 14pt !important;
    font-weight: 600 !important;
    color: var(--d3v-text-primary, #1a365d) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    margin: 10px 0 6px !important;
}

/* ============================================================================
 *  Section 6 — TextViz disclaimer / paragraph-card export polish (R0-3672)
 *  Interactive view keeps the per-section card-with-accent look. On export
 *  (`.d3view-exporting` / `.d3view-global-exporting`) the disclaimer slide
 *  reads as legal copy, not a checklist — collapse the per-section borders,
 *  shadows, and red accent strips into ONE outer surface with hairline
 *  dividers between paragraphs and a left accent bar on the header. Scoped to
 *  `.d3view-textviz-cards` so other TextViz uses are unaffected.
 * ============================================================================ */
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-sections,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-sections {
    background: var(--d3v-bg-primary, #fff) !important;
    border: 1px solid var(--d3v-border-soft, #e6e8eb) !important;
    border-radius: var(--d3v-r-md, 8px) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
    padding: 8px 0 !important;
    gap: 0 !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-section,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-section {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 18px 28px !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-section + .d3v-textviz-card-section,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-section + .d3v-textviz-card-section {
    border-top: 1px solid var(--d3v-border-soft, #eef0f3) !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-section::before,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-section::before {
    display: none !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-section.d3v-textviz-card-section,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-section.d3v-textviz-card-section {
    position: relative;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-body,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-body {
    color: var(--d3v-text-primary, #1a2330) !important;
    line-height: 1.7 !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-body p,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-body p {
    max-width: 110ch !important;
    margin: 0 !important;
    font-size: 20pt !important;
    font-weight: 400 !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-title,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-title {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--d3v-text-primary, #0f172a) !important;
    font-family: inherit !important;
    font-size: 22pt !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.d3view-exporting .d3view-textviz-cards .d3v-textviz-card-header,
.d3view-global-exporting .d3view-textviz-cards .d3v-textviz-card-header {
    padding: 18px 32px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--d3v-border-soft, #eef0f3) !important;
    border-left: 4px solid var(--d3v-accent-primary, #4f86ff) !important;
    font-size: 28pt !important;
    font-weight: 700 !important;
    color: var(--d3v-text-primary, #0f172a) !important;
    background: linear-gradient(0deg, var(--d3v-bg-secondary, #f8fafc), var(--d3v-bg-primary, #fff)) !important;
}


.d3view-exporting div.simlytiks div.viewContent-carousel.d3view-carousel .carousel-inner,
.d3view-global-exporting div.simlytiks div.viewContent-carousel.d3view-carousel .carousel-inner {
    width: 100%!important;
    height: 100%!important;
}

/** premium export font weight to match curveplot font weight **/
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize .axis text,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize .axis-handle,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize svg.box text.title,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz[data-chart-type="grouped_boxplot"] .item-heading > p,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz[data-chart-type="boxplot"] text.box,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz[data-chart-type="boxplot"] text.whisker,
/** Added by shashank2104 on 2026-06-01 - R0-3672 - column_summary wraps a
 *  boxplot inside .col-chart, so the data-chart-type wrapper is column_summary
 *  not boxplot. Mirror the boxplot text.box/whisker rules so the q1/med/q3/min/max
 *  inline labels respect globalAxisTickFontSize on column_summary slides too. **/
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz[data-chart-type="column_summary"] text.box,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz[data-chart-type="column_summary"] text.whisker,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.d3view-viz .occ_path text,
body[data-reporter-export-theme="premium"] div.simlytiks.customFontSize div.page-container.pageWithColorByExport .viewContent[data-page-layout] .viz-title {
	font-weight: 400;
}
.sl-export-certificate {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-primary, #1a2233);
    font-size: 13px;
}

/* The mount IS the flex-row container the cert builder expects (it normally
   targets .d3view-wf-certification-builder .modal-body). Mirror that layout
   here so .cert-builder-editor / .cert-block-builder / .cert-builder-sidebar
   lay out side-by-side and fill the available height.
   The mount also carries `d3view-wf-certification-builder` as a class so all
   of the cert builder's scoped CSS rules resolve. */
.sl-export-certificate .sl-cert-builder-mount {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* ===== Footer ===================================================== */
.sl-export-certificate .sl-cert-footer {
    flex-shrink: 0;
    padding: 10px 20px;
    border-top: 1px solid var(--d3v-border-light, #e6e9ef);
    background: var(--d3v-bg-secondary, #f7f8fa);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.sl-export-certificate .sl-cert-export[disabled],
.sl-export-certificate .sl-cert-export:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Suppress workflow-only UI inside the embedded cert builder == */
/* SIM-999: hide the "Import from Reporter" landing card and reporter picker
   only — the workflow sidebar is now used (with the new Layouts tab) for
   layout selection. */
.sl-export-certificate .cert-landing-card[data-mode="import_reporter"],
.sl-export-certificate .cert-reporter-picker {
    display: none !important;
}

/* ===== Modal width override ====================================== */
.sl-export-certificate-modal .modal-dialog {
    width: 90%;
    max-width: 1700px;
}
.sl-export-certificate-modal .modal-body {
    padding: 0;
    height: calc(90vh - 110px);
    min-height: 600px;
    overflow: hidden;
}
.sl-export-certificate-modal .modal-footer {
    display: none;
}

div.simlytiks.simlytiks-theme-modern.sl-dark,
body.simlytiks-modern-page.sl-dark {

    /* ---- Neutral scale (dark) ---- */
    --sl-n-50:   #1a1a2e;
    --sl-n-100:  #1e2a4a;
    --sl-n-200:  #253557;
    --sl-n-300:  #334155;
    --sl-n-400:  #475569;
    --sl-n-500:  #64748B;
    --sl-n-600:  #94A3B8;
    --sl-n-700:  #CBD5E1;
    --sl-n-800:  #E2E8F0;
    --sl-n-900:  #F1F5F9;

    /* ---- Surfaces ---- */
    --sl-bg-canvas:       #1a1a2e;
    --sl-bg-surface:      #16213e;
    --sl-bg-elevated:     #1a2744;
    --sl-bg-sidebar:      #0f1629;
    --sl-bg-header:       rgba(15, 22, 41, 0.95);
    --sl-bg-statusbar:    #0f1629;
    --sl-bg-overlay:      rgba(0, 0, 0, 0.60);
    --sl-bg-input:        #0f1629;
    --sl-bg-card:         #1a2744;
    --sl-bg-card-hover:   #1f3050;

    /* ---- Text ---- */
    --sl-text-primary:    #E2E8F0;
    --sl-text-secondary:  #94A3B8;
    --sl-text-muted:      #64748B;
    --sl-text-disabled:   #475569;
    --sl-text-inverse:    #0F172A;

    /* ---- Borders ---- */
    --sl-border:          rgba(148, 163, 184, 0.15);
    --sl-border-strong:   rgba(148, 163, 184, 0.25);
    --sl-border-focus:    #60A5FA;

    /* ---- Accent (slightly brighter for dark bg) ---- */
    --sl-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status backgrounds (darkened) ---- */
    --sl-success-bg:      rgba(16, 185, 129, 0.15);
    --sl-success-text:    #6EE7B7;
    --sl-warning-bg:      rgba(245, 158, 11, 0.15);
    --sl-warning-text:    #FCD34D;
    --sl-danger-bg:       rgba(239, 68, 68, 0.15);
    --sl-danger-text:     #FCA5A5;

    /* ---- Shadows (deeper for dark surfaces) ---- */
    --sl-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --sl-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --sl-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --sl-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --sl-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);

    /* ---- Focus ring (brighter for dark) ---- */
    --sl-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
}


/* ================================================================
   BODY-LEVEL DARK TOKEN OVERRIDES
   Override light values with dark when body.simlytiks-modern-page.sl-dark.
   ================================================================ */

body.simlytiks-modern-page.sl-dark {

    /* ---- Neutral scale (dark) ---- */
    --sl-n-50:   #1a1a2e;
    --sl-n-100:  #1e2a4a;
    --sl-n-200:  #253557;
    --sl-n-300:  #334155;
    --sl-n-400:  #475569;
    --sl-n-500:  #64748B;
    --sl-n-600:  #94A3B8;
    --sl-n-700:  #CBD5E1;
    --sl-n-800:  #E2E8F0;
    --sl-n-900:  #F1F5F9;

    /* ---- Surfaces (dark overrides) ---- */
    --sl-bg-canvas:       #1a1a2e;
    --sl-bg-surface:      #16213e;
    --sl-bg-elevated:     #1a2744;
    --sl-bg-sidebar:      #0f1629;
    --sl-bg-header:       rgba(15, 22, 41, 0.95);
    --sl-bg-statusbar:    #0f1629;
    --sl-bg-overlay:      rgba(0, 0, 0, 0.60);
    --sl-bg-input:        #0f1629;
    --sl-bg-card:         #1a2744;
    --sl-bg-card-hover:   #1f3050;

    /* ---- Text (dark overrides) ---- */
    --sl-text-primary:    #E2E8F0;
    --sl-text-secondary:  #94A3B8;
    --sl-text-muted:      #64748B;
    --sl-text-disabled:   #475569;
    --sl-text-inverse:    #0F172A;

    /* ---- Borders (dark overrides) ---- */
    --sl-border:          rgba(148, 163, 184, 0.15);
    --sl-border-strong:   rgba(148, 163, 184, 0.25);
    --sl-border-focus:    #60A5FA;

    /* ---- Accent (dark overrides) ---- */
    --sl-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status (dark overrides) ---- */
    --sl-success-bg:      rgba(16, 185, 129, 0.15);
    --sl-success-text:    #6EE7B7;
    --sl-warning-bg:      rgba(245, 158, 11, 0.15);
    --sl-warning-text:    #FCD34D;
    --sl-danger-bg:       rgba(239, 68, 68, 0.15);
    --sl-danger-text:     #FCA5A5;

    /* ---- Shadows (dark, deeper) ---- */
    --sl-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --sl-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --sl-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --sl-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --sl-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);
}


/* ================================================================
   FORCED DARK BACKGROUND OVERRIDES
   Ensure major containers get dark backgrounds even with
   legacy inline styles or Bootstrap defaults.
   ================================================================ */

div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-plugin-header,
body.simlytiks-modern-page.sl-dark .d3view-plugin-header {
    background: var(--sl-bg-header) !important;
    border-color: var(--sl-border) !important;
}

/** Added by shashank2104 on 03/29/2026 - DVFIV-1956 - Dark rail matches vertical sidebar shell (not inner pl-nav-menu only) **/
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-vertical-nav-sidebar,
body.simlytiks-modern-page.sl-dark .sl-vertical-nav-sidebar {
    background: var(--sl-bg-sidebar) !important;
    border-right-color: var(--sl-border) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu,
body.simlytiks-modern-page.sl-dark .pl-nav-menu {
    background: transparent !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper {
    background: var(--sl-bg-sidebar) !important;
    border-color: var(--sl-border) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .sl-side-bar-container,
body.simlytiks-modern-page.sl-dark .sl-side-bar-container {
    background: var(--sl-bg-sidebar) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .simlytiks-wrapper,
body.simlytiks-modern-page.sl-dark .simlytiks-wrapper {
    background: var(--sl-bg-canvas) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .slBody,
body.simlytiks-modern-page.sl-dark .slBody {
    background: var(--sl-bg-canvas) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .sl-main-window,
body.simlytiks-modern-page.sl-dark .sl-main-window {
    background: var(--sl-bg-canvas) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .sl-main-content,
body.simlytiks-modern-page.sl-dark .sl-main-content {
    background: var(--sl-bg-canvas) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .pages-container,
body.simlytiks-modern-page.sl-dark .pages-container {
    background: var(--sl-bg-canvas) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .page-view,
body.simlytiks-modern-page.sl-dark .page-view {
    background: var(--sl-bg-canvas) !important;
}

/* Dark page tabs */
div.simlytiks.simlytiks-theme-modern.sl-dark .tab-manager,
body.simlytiks-modern-page.sl-dark .tab-manager {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* Dark right tool strip */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-page-tabs,
body.simlytiks-modern-page.sl-dark .sl-page-tabs {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* Dark footer / status bar */
div.simlytiks.simlytiks-theme-modern.sl-dark .simlytiks-nav-tabs,
body.simlytiks-modern-page.sl-dark .simlytiks-nav-tabs {
    background: var(--sl-bg-statusbar) !important;
    border-color: var(--sl-border) !important;
}

/* Dark text overrides for key elements */
div.simlytiks.simlytiks-theme-modern.sl-dark .plugin-name .sl-name,
body.simlytiks-modern-page.sl-dark .plugin-name .sl-name {
    color: var(--sl-text-primary) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .wf-dropdowns .dropdown > a,
div.simlytiks.simlytiks-theme-modern.sl-dark .wf-dropdowns .pl-dropdown > a,
body.simlytiks-modern-page.sl-dark .wf-dropdowns .dropdown > a,
body.simlytiks-modern-page.sl-dark .wf-dropdowns .pl-dropdown > a {
    color: var(--sl-text-secondary) !important;
}

/* Dark dropdown menus */
div.simlytiks.simlytiks-theme-modern.sl-dark .dropdown-menu,
body.simlytiks-modern-page.sl-dark .dropdown-menu {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .dropdown-menu > li > a,
body.simlytiks-modern-page.sl-dark .dropdown-menu > li > a {
    color: var(--sl-text-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .dropdown-menu > li > a:hover,
body.simlytiks-modern-page.sl-dark .dropdown-menu > li > a:hover {
    background: var(--sl-bg-card-hover) !important;
    color: var(--sl-text-primary) !important;
}

/* Dark buttons */
div.simlytiks.simlytiks-theme-modern.sl-dark .btn-outline-on-hover,
body.simlytiks-modern-page.sl-dark .btn-outline-on-hover {
    color: var(--sl-text-secondary) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .btn-outline-on-hover:hover,
body.simlytiks-modern-page.sl-dark .btn-outline-on-hover:hover {
    background: var(--sl-accent-light) !important;
    color: var(--sl-accent) !important;
}

/* Dark response cards */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-response-card,
body.simlytiks-modern-page.sl-dark .sl-response-card {
    border-color: var(--sl-border) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .sl-response-card:hover,
body.simlytiks-modern-page.sl-dark .sl-response-card:hover {
    background: var(--sl-bg-card-hover) !important;
}

/* Dark viz containers */
div.simlytiks.simlytiks-theme-modern.sl-dark .viewContent,
body.simlytiks-modern-page.sl-dark .viewContent {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* Dark SVG elements */
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-svg .axis line,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-svg .axis path {
    stroke: var(--sl-border-strong) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .viz-svg .axis text,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-svg .tick text,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-svg text {
    fill: var(--sl-text-muted) !important;
}

/* Dark table */
div.simlytiks.simlytiks-theme-modern.sl-dark table,
body.simlytiks-modern-page.sl-dark table {
    color: var(--sl-text-primary) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark table th,
body.simlytiks-modern-page.sl-dark table th {
    background: var(--sl-bg-card) !important;
    color: var(--sl-text-muted) !important;
    border-color: var(--sl-border) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark table td,
body.simlytiks-modern-page.sl-dark table td {
    border-color: var(--sl-border) !important;
    color: var(--sl-text-primary) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark table tbody tr:hover,
body.simlytiks-modern-page.sl-dark table tbody tr:hover {
    background: var(--sl-bg-card-hover) !important;
}

/* Dark scrollbars */
div.simlytiks.simlytiks-theme-modern.sl-dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* Dark form inputs */
div.simlytiks.simlytiks-theme-modern.sl-dark input,
div.simlytiks.simlytiks-theme-modern.sl-dark textarea,
div.simlytiks.simlytiks-theme-modern.sl-dark select,
div.simlytiks.simlytiks-theme-modern.sl-dark .form-control {
    background: var(--sl-bg-input) !important;
    color: var(--sl-text-primary) !important;
    border-color: var(--sl-border) !important;
}

/* Dark nav menu items */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-tabs-vertical > li > a,
body.simlytiks-modern-page.sl-dark .pl-tabs-vertical > li > a {
    color: var(--sl-text-muted) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .pl-tabs-vertical > li.active > a,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-tabs-vertical > li > a:hover,
body.simlytiks-modern-page.sl-dark .pl-tabs-vertical > li.active > a,
body.simlytiks-modern-page.sl-dark .pl-tabs-vertical > li > a:hover {
    color: var(--sl-text-primary) !important;
    background: var(--sl-accent-light) !important;
}

/* Dark canvas dot grid */
div.simlytiks.simlytiks-theme-modern.sl-dark .pages-container::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
}

/* Dark tooltip */
div.simlytiks.simlytiks-theme-modern.sl-dark .d3-tip {
    background: var(--sl-bg-elevated) !important;
    border: 1px solid var(--sl-border) !important;
}

/* Dark legend */
div.simlytiks.simlytiks-theme-modern.sl-dark .d3view-legends,
div.simlytiks.simlytiks-theme-modern.sl-dark .viz-legend {
    background: var(--sl-bg-surface) !important;
    border-color: var(--sl-border) !important;
}

/* ---- SIM-994 Dark overrides for left nav floating wrapper ---- */
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper {
    background: var(--sl-bg-surface, #1e2a4a) !important;
    border-right-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs {
    background: var(--sl-bg-sidebar, #16213e) !important;
    border-bottom-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs > li > a {
    color: var(--sl-text-muted, #64748B) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs > li.active > a {
    color: var(--sl-accent, #3B82F6) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper .wf-nav-tab-header {
    background: var(--sl-bg-sidebar, #16213e) !important;
    border-bottom-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .slBody.mainPanel .pl-nav-menu-wrapper .wf-nav-tab-header .nav-content-label {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* ---- SIM-994 Dark overrides for page ellipsis dropdown ---- */
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-page-options-dropdown {
    background: var(--sl-bg-elevated, #253557) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-page-options-dropdown li a {
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-page-options-dropdown li a:hover {
    background: var(--sl-accent-light, rgba(59,130,246,0.15)) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .sl-page-options-dropdown .sl-page-dd-sep {
    background: var(--sl-border, rgba(148,163,184,0.15)) !important;
}

/* ---- Dark overrides for Bootstrap modals (Phase 4 gap) ---- */
div.simlytiks.simlytiks-theme-modern.sl-dark .modal-content {
    background-color: var(--sl-bg-surface, #1e2a4a) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .modal-header {
    background-color: var(--sl-bg-sidebar, #16213e) !important;
    border-bottom-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .modal-footer {
    background-color: var(--sl-bg-sidebar, #16213e) !important;
    border-top-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .modal-title {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* ---- Dark overrides for Bootstrap panels/wells (Phase 4 gap) ---- */
div.simlytiks.simlytiks-theme-modern.sl-dark .panel,
div.simlytiks.simlytiks-theme-modern.sl-dark .panel-body,
div.simlytiks.simlytiks-theme-modern.sl-dark .panel-heading {
    background-color: var(--sl-bg-surface, #1e2a4a) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .well {
    background-color: var(--sl-bg-canvas, #0f1629) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .list-group-item {
    background-color: var(--sl-bg-surface, #1e2a4a) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}
div.simlytiks.simlytiks-theme-modern.sl-dark .alert {
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}


/* ================================================================
   R0-3839 — Dark mode for the left settings / customize panel inner content.
   The floating-sidebar shell (.pl-nav-menu-wrapper) and Bootstrap panels
   already get dark surfaces above, but the FORM CONTENT inside the
   settings / customize panel (labels, help text, section headings,
   checkbox/radio captions, the panel header) had no dark rules and
   rendered as dark-on-dark / light text-on-light. Scope everything to
   the floating sidebar content so classic + light mode are untouched.
   ================================================================ */

/* Panel content surface + body text */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .sl-nav-tab-content,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .sl-nav-tab-body,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .content_wrapper.sl-side-bar,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .sl-nav-tab-content,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .sl-nav-tab-body,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .content_wrapper.sl-side-bar {
    background: var(--sl-bg-sidebar, #0f1629) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Floating panel header (title strip) */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .floating-container-header,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .floating-container-header {
    background: var(--sl-bg-sidebar, #0f1629) !important;
    border-bottom-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .floating-container-header .nav-content-label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .floating-container-header .lead-xs,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .floating-container-header .nav-content-label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .floating-container-header .lead-xs {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Form labels + section headings inside the settings / customize panel */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .form-group label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .control-label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper h1,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper h2,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper h3,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper h4,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper h5,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .form-group label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .control-label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper h1,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper h2,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper h3,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper h4,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper h5 {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Secondary / helper text, descriptions, hints */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .help-block,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .text-muted,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper small,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper p,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .help-block,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .text-muted,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper small,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper p {
    color: var(--sl-text-secondary, #94A3B8) !important;
}

/* Checkbox / radio captions and their containers */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .checkbox label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .radio label,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .checkbox,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .radio,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .checkbox label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .radio label,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .checkbox,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .radio {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Inputs / selects inside the settings panel — match the global dark input
   treatment but also reach the floating sidebar (the global rule scopes to
   .simlytiks-theme-modern only; reassert here for body-class render paths).
   NOTE (R0-3839, issue 4): the native <select> popup option list is rendered
   by the OS and CANNOT be styled by CSS on most browsers — the <select> box
   below goes dark, but its open dropdown options stay OS-light. This is a
   known browser limitation, not a bug we can fix in pure CSS, and we are
   intentionally NOT shipping a custom select component for it. */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper input,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper textarea,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper select,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .form-control,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper input,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper textarea,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper select,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .form-control {
    background: var(--sl-bg-input, #0f1629) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}

/* Inner Bootstrap panels nested in the settings panel (e.g. grouped sections) */
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .panel,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .panel-body,
div.simlytiks.simlytiks-theme-modern.sl-dark .pl-nav-menu-wrapper .panel-heading,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .panel,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .panel-body,
body.simlytiks-modern-page.sl-dark .pl-nav-menu-wrapper .panel-heading {
    background-color: var(--sl-bg-surface, #1e2a4a) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* R0-3839 (issue 3 follow-up) — Bootstrap switch toggles (e.g. "Disable
   Footer", "Bin Scale") rendered with hardcoded light backgrounds (white
   center label + light-gray OFF handle). They appear both in the floating
   sidebar AND in the .sl-settings modal, so scope to the dark Simlytiks
   shell (not a single container). Theme the border + OFF/center surfaces;
   leave the colored ON handle alone so the active accent still reads. */
div.simlytiks.simlytiks-theme-modern.sl-dark .bootstrap-switch,
body.simlytiks-modern-page.sl-dark .bootstrap-switch {
    border-color: var(--sl-border, rgba(148,163,184,0.15)) !important;
}

div.simlytiks.simlytiks-theme-modern.sl-dark .bootstrap-switch .bootstrap-switch-handle-off,
div.simlytiks.simlytiks-theme-modern.sl-dark .bootstrap-switch .bootstrap-switch-label,
body.simlytiks-modern-page.sl-dark .bootstrap-switch .bootstrap-switch-handle-off,
body.simlytiks-modern-page.sl-dark .bootstrap-switch .bootstrap-switch-label {
    background: var(--sl-bg-input, #0f1629) !important;
    color: var(--sl-text-secondary, #94A3B8) !important;
}


/* ================================================================
   R0-3839 (issue 3 — the ACTUAL "left settings tab") — the Settings
   UI is the body-mounted .sl-settings modal, whose LEFT category pane
   (.nested-left / .ui-layout-west, a jQuery-UI layout pane) had a
   hardcoded white background, so the General/Appearance/Export/...
   tree rendered light-text-on-white (unreadable). The right form pane
   is already dark. Scope to the dark Simlytiks body since the modal is
   appended to <body> (it is NOT inside div.simlytiks).
   ================================================================ */

/* Left category pane shell */
body.simlytiks-modern-page.sl-dark .sl-settings .nested-left,
body.simlytiks-modern-page.sl-dark .sl-settings .nested-left.ui-layout-west {
    background-color: var(--sl-bg-sidebar, #0f1629) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
}

/* Category tree rows + text */
body.simlytiks-modern-page.sl-dark .sl-settings .tree-view,
body.simlytiks-modern-page.sl-dark .sl-settings .tree-view ul.tree-list,
body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item {
    background-color: transparent !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content,
body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .text-primary,
body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content > .fa {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Hover + active highlight (the `active` class sits on .tv-content itself;
   was light-blue rgb(224,245,253) with washed-out light text) */
body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content:hover {
    background-color: var(--sl-bg-card-hover, #1f3050) !important;
}

body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content.active {
    background-color: var(--sl-accent-light, rgba(59,130,246,0.18)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content.active .text-primary,
body.simlytiks-modern-page.sl-dark .sl-settings .tree-list-item .tv-content.active .fa {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Layout pane resizer between the panes */
body.simlytiks-modern-page.sl-dark .sl-settings .ui-layout-resizer {
    background-color: var(--sl-bg-surface, #16213e) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
}


/* ================================================================
   R0-3839 (issue 3 follow-up) — Dark mode for the multiselect dropdown.
   The dropdown view (.d3view-multiselect-dd) is appended to <body>
   (multiselect.js ~1992), so it escapes div.simlytiks and never inherits
   the dark tokens (scoped to div.simlytiks...sl-dark) nor the modern
   .multiselect-container styling — its root had a hardcoded #FFF and
   stayed white. Simlytiks owns its own dark mode, so theme it here scoped
   to Simlytiks's body class (body.simlytiks-modern-page.sl-dark), which
   still reaches the body-mounted popup without touching the shared
   multiselect component or any other plugin. Tokens don't cascade to
   body-mounted nodes, so the --sl-* vars use explicit dark fallbacks.
   ================================================================ */

/* Popup shell */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd {
    background-color: var(--sl-bg-card, #1a2744) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
    box-shadow: var(--sl-sh-lg, 0 10px 25px rgba(0,0,0,0.50)) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Header / body / footer surfaces */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .multiselect-header,
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .multiselect-body,
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .multiselect-footer {
    background-color: var(--sl-bg-card, #1a2744) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
}

/* Search input */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .search-container input,
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .search-container .form-control {
    background-color: var(--sl-bg-input, #0f1629) !important;
    color: var(--sl-text-primary, #E2E8F0) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
}

body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .search-container .input-group-addon {
    background-color: var(--sl-bg-input, #0f1629) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
    color: var(--sl-text-secondary, #94A3B8) !important;
}

/* Option list + rows */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .vlist {
    background-color: var(--sl-bg-card, #1a2744) !important;
    border-color: var(--sl-border, rgba(148,163,184,0.20)) !important;
}

body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .vlist .vrow {
    color: var(--sl-text-primary, #E2E8F0) !important;
}

body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .vlist .vrow:hover {
    background-color: var(--sl-bg-card-hover, #1f3050) !important;
}

body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .vlist .vrow.disabled {
    color: var(--sl-text-muted, #64748B) !important;
}

/* Empty-state caption */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .d3view-no-data {
    color: var(--sl-text-secondary, #94A3B8) !important;
}

/* Resize handle hover */
body.simlytiks-modern-page.sl-dark .d3view-multiselect-dd .multiselect-body:hover .ui-resizable-handle {
    background-color: var(--sl-n-200, #253557) !important;
}

div.simlytiks.simlytiks-theme-modern,
body.simlytiks-modern-page {

    /* ---- Neutral scale (alias to foundation) ---- */
    --sl-n-50:   var(--d3v-n-50,  #F8FAFC);
    --sl-n-100:  var(--d3v-n-100, #F1F5F9);
    --sl-n-200:  var(--d3v-n-200, #E2E8F0);
    --sl-n-300:  var(--d3v-n-300, #CBD5E1);
    --sl-n-400:  var(--d3v-n-400, #94A3B8);
    --sl-n-500:  var(--d3v-n-500, #64748B);
    --sl-n-600:  var(--d3v-n-600, #475569);
    --sl-n-700:  var(--d3v-n-700, #334155);
    --sl-n-800:  var(--d3v-n-800, #1E293B);
    --sl-n-900:  var(--d3v-n-900, #0F172A);

    /* ---- Surfaces / backgrounds ---- */
    --sl-bg-canvas:       var(--d3v-bg-secondary, #F8FAFC);
    --sl-bg-surface:      var(--d3v-bg-primary, #FFFFFF);
    --sl-bg-elevated:     var(--d3v-bg-primary, #FFFFFF);
    --sl-bg-sidebar:      var(--d3v-bg-primary, #FFFFFF);
    --sl-bg-header:       var(--d3v-bg-primary, #FFFFFF);
    --sl-bg-statusbar:    var(--d3v-bg-secondary, #F8FAFC);
    --sl-bg-overlay:      rgba(15, 23, 42, 0.40);
    --sl-bg-input:        #F1F5F9;
    --sl-bg-card:         #F8FAFC;
    --sl-bg-card-hover:   #F1F5F9;

    /* ---- Text ---- */
    --sl-text-primary:    var(--d3v-text-primary,   #1E293B);
    --sl-text-secondary:  var(--d3v-text-secondary,  #475569);
    --sl-text-muted:      var(--d3v-text-muted,      #94A3B8);
    --sl-text-disabled:   var(--d3v-n-300, #CBD5E1);
    --sl-text-inverse:    var(--d3v-text-inverse,    #FFFFFF);

    /* ---- Borders ---- */
    --sl-border:          var(--d3v-border,        #E2E8F0);
    --sl-border-strong:   var(--d3v-border-strong,  #CBD5E1);
    --sl-border-focus:    var(--d3v-accent,         #3B82F6);

    /* ---- Accent ---- */
    --sl-accent:          var(--d3v-accent,       #3B82F6);
    --sl-accent-hover:    var(--d3v-accent-hover, #2563EB);
    --sl-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --sl-success:         var(--d3v-success, #10B981);
    --sl-success-bg:      #D1FAE5;
    --sl-success-text:    #065F46;
    --sl-warning:         var(--d3v-warning, #F59E0B);
    --sl-warning-bg:      #FEF3C7;
    --sl-warning-text:    #92400E;
    --sl-danger:          var(--d3v-danger, #EF4444);
    --sl-danger-bg:       #FEE2E2;
    --sl-danger-text:     #991B1B;
    --sl-info:            var(--d3v-info, #3B82F6);

    /* ---- Viz palette (fixed across themes) ---- */
    --sl-viz-blue:        #3B82F6;
    --sl-viz-teal:        #14B8A6;
    --sl-viz-purple:      #8B5CF6;
    --sl-viz-gold:        #F59E0B;
    --sl-viz-coral:       #EF4444;
    --sl-viz-green:       #10B981;
    --sl-viz-pink:        #EC4899;
    --sl-viz-gray:        #94A3B8;
    --sl-viz-orange:      #F97316;
    --sl-viz-indigo:      #6366F1;

    /* ---- Shadows (alias to foundation) ---- */
    --sl-sh-xs:  var(--d3v-sh-xs,  0 1px 2px rgba(0,0,0,0.05));
    --sl-sh-sm:  var(--d3v-sh-sm,  0 1px 3px rgba(0,0,0,0.08));
    --sl-sh-md:  var(--d3v-sh-md,  0 4px 12px rgba(0,0,0,0.10));
    --sl-sh-lg:  var(--d3v-sh-lg,  0 10px 25px rgba(0,0,0,0.12));
    --sl-sh-xl:  var(--d3v-sh-xl,  0 20px 40px rgba(0,0,0,0.15));

    /* ---- Border radii (alias to foundation) ---- */
    --sl-r-sm:   var(--d3v-r-sm,   4px);
    --sl-r-md:   var(--d3v-r-md,   8px);
    --sl-r-lg:   var(--d3v-r-lg,   12px);
    --sl-r-xl:   var(--d3v-r-xl,   16px);
    --sl-r-2xl:  var(--d3v-r-2xl,  24px);
    --sl-r-full: var(--d3v-r-full, 9999px);

    /* ---- Transitions (alias to foundation) ---- */
    --sl-t-fast:   var(--d3v-t-fast,   all 0.12s ease);
    --sl-t-base:   var(--d3v-t-base,   all 0.20s ease);
    --sl-t-smooth: var(--d3v-t-smooth, all 0.30s cubic-bezier(0.4, 0, 0.2, 1));

    /* ---- Gradients ---- */
    --sl-grad-accent:  var(--d3v-grad-accent, linear-gradient(135deg, #3B82F6 0%, #6366F1 100%));
    --sl-grad-success: linear-gradient(135deg, #10B981 0%, #059669 100%);

    /* ---- Layout dimensions ---- */
    --sl-sidebar-w:     48px;
    --sl-sidebar-min:   48px;
    --sl-sidebar-max:   260px;
    --sl-header-h:      48px;
    --sl-statusbar-h:   36px;
    --sl-page-tabs-h:   40px;

    /* ---- Z-index scale ---- */
    --sl-z-statusbar:  5;
    --sl-z-sidebar:    10;
    --sl-z-header:     20;
    --sl-z-overlay:    50;
    --sl-z-tooltip:    100;
    --sl-z-modal:      1050;

    /* ---- Spacing (4px grid) ---- */
    --sl-sp-1:   4px;
    --sl-sp-2:   8px;
    --sl-sp-3:   12px;
    --sl-sp-4:   16px;
    --sl-sp-5:   20px;
    --sl-sp-6:   24px;
    --sl-sp-8:   32px;
    --sl-sp-10:  40px;
    --sl-sp-12:  48px;

    /* ---- Typography ---- */
    --sl-fs-xs:    11px;
    --sl-fs-sm:    12px;
    --sl-fs-base:  13px;
    --sl-fs-md:    14px;
    --sl-fs-lg:    16px;
    --sl-fs-xl:    18px;

    /* ---- Focus ring ---- */
    --sl-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
}


/* ================================================================
   BODY-LEVEL MODERN TOKENS (LIGHT)
   Re-declare --sl-* light values on body.simlytiks-modern-page
   so modals/sidebars appended to <body> get modern design.
   ================================================================ */

body.simlytiks-modern-page {

    /* ---- Neutral scale ---- */
    --sl-n-50:   #F8FAFC;
    --sl-n-100:  #F1F5F9;
    --sl-n-200:  #E2E8F0;
    --sl-n-300:  #CBD5E1;
    --sl-n-400:  #94A3B8;
    --sl-n-500:  #64748B;
    --sl-n-600:  #475569;
    --sl-n-700:  #334155;
    --sl-n-800:  #1E293B;
    --sl-n-900:  #0F172A;

    /* ---- Surfaces (light) ---- */
    --sl-bg-canvas:       #F8FAFC;
    --sl-bg-surface:      #FFFFFF;
    --sl-bg-elevated:     #FFFFFF;
    --sl-bg-sidebar:      #FFFFFF;
    --sl-bg-header:       #FFFFFF;
    --sl-bg-statusbar:    #F8FAFC;
    --sl-bg-overlay:      rgba(15, 23, 42, 0.40);
    --sl-bg-input:        #F1F5F9;
    --sl-bg-card:         #F8FAFC;
    --sl-bg-card-hover:   #F1F5F9;

    /* ---- Text (light) ---- */
    --sl-text-primary:    #1E293B;
    --sl-text-secondary:  #475569;
    --sl-text-muted:      #94A3B8;
    --sl-text-disabled:   #CBD5E1;
    --sl-text-inverse:    #FFFFFF;

    /* ---- Borders (light) ---- */
    --sl-border:          #E2E8F0;
    --sl-border-strong:   #CBD5E1;
    --sl-border-focus:    #3B82F6;

    /* ---- Accent ---- */
    --sl-accent:          #3B82F6;
    --sl-accent-hover:    #2563EB;
    --sl-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --sl-success:         #10B981;
    --sl-success-bg:      #D1FAE5;
    --sl-success-text:    #065F46;
    --sl-warning:         #F59E0B;
    --sl-warning-bg:      #FEF3C7;
    --sl-warning-text:    #92400E;
    --sl-danger:          #EF4444;
    --sl-danger-bg:       #FEE2E2;
    --sl-danger-text:     #991B1B;

    /* ---- Shadows (light) ---- */
    --sl-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --sl-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --sl-sh-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --sl-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.12);
    --sl-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.15);

    /* ---- Radii ---- */
    --sl-r-sm:   4px;
    --sl-r-md:   8px;
    --sl-r-lg:   12px;
    --sl-r-xl:   16px;
    --sl-r-2xl:  24px;
    --sl-r-full: 9999px;

    /* ---- Transitions ---- */
    --sl-t-fast:   all 0.12s ease;
    --sl-t-base:   all 0.20s ease;
    --sl-t-smooth: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Gradients ---- */
    --sl-grad-accent:  linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    --sl-grad-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

/* ── the toolbar dropdown ─────────────────────────────────────────────── */

div.simlytiks .sl-overlay-with {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 4px;
}

div.simlytiks .sl-overlay-with-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--sl-border-radius-md, 6px);
    border: 1px solid var(--sl-border-color, #E2E8F0);
    background: transparent;
    color: var(--sl-text-secondary, #475569);
    transition: all 0.15s ease;
}

div.simlytiks .sl-overlay-with-btn:hover,
div.simlytiks .sl-overlay-with-btn:focus {
    background: var(--sl-accent-light, rgba(59, 130, 246, 0.10));
    color: var(--sl-accent, #3B82F6);
    border-color: var(--sl-accent, #3B82F6);
    outline: none;
}

div.simlytiks .sl-overlay-with-btn > i {
    font-size: 12px;
    color: var(--sl-text-muted, #94A3B8);
    transition: color 0.15s ease;
}

div.simlytiks .sl-overlay-with-btn:hover > i {
    color: var(--sl-accent, #3B82F6);
}

div.simlytiks .sl-overlay-with-btn .a-icon {
    font-size: 10px;
    opacity: 0.7;
}

div.simlytiks .sl-overlay-with-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    min-width: 260px;
    margin-top: 4px;
    padding: 4px 0;
    list-style: none;
    background: var(--sl-bg-primary, #FFFFFF);
    border: 1px solid var(--sl-border-color, #E2E8F0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

div.simlytiks .sl-overlay-with-dropdown.show {
    display: block;
}

div.simlytiks .sl-overlay-with-dropdown li a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    color: var(--sl-text-primary, #1E293B);
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

div.simlytiks .sl-overlay-with-dropdown li a:hover {
    background: var(--sl-accent-light, rgba(59, 130, 246, 0.08));
    color: var(--sl-accent, #3B82F6);
}

div.simlytiks .sl-overlay-with-dropdown li a > i {
    width: 14px;
    margin-top: 2px;
    text-align: center;
    font-size: 12px;
    color: var(--sl-text-muted, #94A3B8);
}

div.simlytiks .sl-overlay-with-dropdown li a:hover > i {
    color: var(--sl-accent, #3B82F6);
}

div.simlytiks .sl-overlay-with-dropdown .sl-overlay-src {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

div.simlytiks .sl-overlay-with-dropdown .sl-overlay-src-label {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

div.simlytiks .sl-overlay-with-dropdown .sl-overlay-src-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--sl-text-muted, #94A3B8);
}

/* ── the dataset browser modal ────────────────────────────────────────── */

.sl-overlay-browser-modal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sl-overlay-browser-modal .modal-body > * {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sl-overlay-map {
    padding: 12px 16px;
    gap: 8px;
}

.sl-overlay-map-hint {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}

.sl-overlay-map-host {
    min-height: 0;
}

.sl-overlay-browser {
    gap: 0;
    padding: 0 16px 12px;
}

.sl-overlay-browser-head {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 12px 0 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF2F6);
}

.sl-overlay-browser-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

.sl-overlay-browser-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
}

.sl-overlay-browser-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sl-overlay-browser-stats .sl-overlay-stat {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 999px;
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-secondary, #F1F5F9);
}

.sl-overlay-browser-stats .sl-overlay-selected-count {
    color: var(--d3v-accent, #3B82F6);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.10));
}

.sl-overlay-browser .sl-overlay-filters-bar {
    margin: 10px 0 6px;
}

.sl-overlay-browser-body {
    position: relative;
    min-height: 320px;
}

.sl-overlay-browser-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    font-size: 13px;
    color: var(--d3v-text-muted, #94A3B8);
}

.sl-overlay-browser-status.sl-overlay-browser-status-error {
    color: var(--d3v-status-danger, #EF4444);
}

/* ── locked import type (ImportDatasetView, R2026-190) ────────────────── */

/* `.sl-import-dataset` is ImportDatasetView's own root inside a body-mounted modal, so these
   deliberately hang off it rather than the simlytiks root. */

.sl-import-dataset .import-type-note {
    margin: 0 5px 12px;
    padding: 8px 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sl-import-dataset .import-types > .import-type.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(1);
}

/* ── remove-overlay: menu divider + sidebar (R2026-190) ───────────────── */

div.simlytiks .sl-overlay-with-dropdown .sl-overlay-dd-sep {
    height: 1px;
    margin: 4px 8px;
    background: var(--sl-border-color, #E2E8F0);
    pointer-events: none;
}

div.simlytiks .sl-overlay-with-dropdown li a[data-overlay-action="remove"]:hover {
    background: var(--d3v-status-danger-subtle, rgba(239, 68, 68, 0.08));
    color: var(--d3v-status-danger, #EF4444);
}

div.simlytiks .sl-overlay-with-dropdown li a[data-overlay-action="remove"]:hover > i {
    color: var(--d3v-status-danger, #EF4444);
}

/* The sidebar is body-mounted by GenericSidebarView, so it is deliberately NOT scoped under the
   simlytiks root. */

.sl-overlay-records {
    gap: 0;
}

.sl-overlay-records-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF2F6);
}

.sl-overlay-records-summary {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}

.sl-overlay-records-summary b {
    color: var(--d3v-text-primary, #1E293B);
}

.sl-overlay-records-body {
    padding-top: 10px;
}

.sl-overlay-batch {
    margin-bottom: 12px;
    border: 1px solid var(--d3v-border-subtle, #EEF2F6);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

.sl-overlay-batch-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF2F6);
}

.sl-overlay-batch-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

.sl-overlay-batch-meta {
    margin-top: 2px;
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
}

.sl-overlay-batch-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.sl-overlay-batch-rows > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #F1F5F9);
    transition: background 0.12s ease;
}

.sl-overlay-batch-rows > li:last-child {
    border-bottom: 0;
}

.sl-overlay-batch-rows > li:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
}

.sl-overlay-row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--d3v-text-secondary, #475569);
}

.sl-overlay-batch-rows > li .sl-overlay-remove-row:hover,
.sl-overlay-batch-head .sl-overlay-remove-batch:hover {
    color: var(--d3v-status-danger, #EF4444);
    border-color: var(--d3v-status-danger, #EF4444);
}

#sl-toast-host {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;    /* newest at the bottom; older ones stack upward */
    align-items: center;
    gap: 10px;
    pointer-events: none;              /* let clicks pass through the gaps */
    max-width: 92vw;
}

.sl-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 460px;
    padding: 10px 16px;
    background: #1e293b;               /* matches d3viewdashboard --db-n-800 */
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sl-toast.sl-toast-in {
    opacity: 1;
    transform: translateY(0);
}

.sl-toast.sl-toast-out {
    opacity: 0;
    transform: translateY(80px);
}

/* Icon chip — the one visual cue on top of the shared dark pill */
.sl-toast-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-full, 999px);
    font-size: 10px;
    color: #fff;
    background: var(--d3v-status-info, #4c6ef5);
}

.sl-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-toast-title {
    font-weight: 600;
    color: #fff;
}

.sl-toast-msg {
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    word-break: break-word;
}

.sl-toast-close {
    flex: 0 0 auto;
    cursor: pointer;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    line-height: 1;
    padding: 2px;
    margin: 0 -4px 0 2px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: color var(--d3v-t-fast, 120ms) ease,
                background var(--d3v-t-fast, 120ms) ease;
}

.sl-toast-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* ---- type accents (icon chip only; pill stays dark for consistency) ---- */
.sl-toast--success .sl-toast-icon { background: var(--d3v-status-success, #12b76a); }
.sl-toast--info    .sl-toast-icon { background: var(--d3v-status-info, #4c6ef5); }
.sl-toast--warning .sl-toast-icon { background: var(--d3v-status-warning, #f79009); }
.sl-toast--danger  .sl-toast-icon { background: var(--d3v-status-danger, #f04438); }

/* ---- Disabled + divider (modern left nav list) ---- */
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .pl-nav-menu > ul li.disabled,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .pl-nav-menu > ul li[disabled] {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .pl-nav-menu > ul li.sl-nav-divider {
    list-style: none !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 8px 10px !important;
    overflow: hidden !important;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent) !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: default !important;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .pl-nav-menu > ul li.sl-nav-divider:hover {
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent) !important;
}

/* ---- Rail shell + pl-tabs-vertical (dashboard-style) ---- */
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar {
    width: 56px;
    min-width: 56px;
    max-width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--d3v-border, #E2E8F0);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.99) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: width 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical {
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 4px 0;
    list-style: none;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item {
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--d3v-r-md, 8px);
    margin: 2px 2px 2px 2px;
    padding: 0;
    background: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.2s ease;
    width: auto;
    height: auto;
    min-height: 0;
    display: block;
    box-sizing: border-box;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li > a {
    padding: 8px 4px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    overflow: hidden;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li > a > i {
    font-size: 16px;
    width: auto;
    color: var(--d3v-text-muted, #94A3B8);
    transition: color 0.15s ease, transform 0.15s ease;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li > a .pl-tab-item-label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.15s ease, max-width 0.15s ease;
}

/** SIM-994 fix — use 100% max-width so labels adapt to actual sidebar width instead of overflowing **/
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar.is-expanded .pl-tabs-vertical > li > a .pl-tab-item-label {
    max-width: 100%;
    opacity: 1;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item.active,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item.open {
    background: rgba(59, 130, 246, 0.10) !important;
    border-left: 3px solid var(--d3v-accent, #3B82F6) !important;
    box-shadow: none !important;
}

/** Updated by shashank2104 on 04/15/2026 - DVFIV-1997 - Suppress browser default focus outline + redundant box-shadow halo on left nav items so only the 3px accent border shows on hover/active/focus (no double border). **/
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item:focus,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item > a:focus,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item > a:active {
    outline: none !important;
    box-shadow: none !important;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.active > a > i,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.open > a > i {
    color: var(--d3v-accent, #3B82F6) !important;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.active > a .pl-tab-item-label,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.open > a .pl-tab-item-label {
    color: var(--d3v-text-primary, #1E293B);
    font-weight: 500;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li.list-group-item:hover {
    background: var(--d3v-bg-tertiary, #F1F5F9) !important;
    box-shadow: none !important;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li:hover > a > i {
    color: var(--d3v-text-secondary, #475569);
    transform: scale(1.06);
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-nav-menu {
    width: auto;
    flex: 1 1 auto;
    min-height: 0;
    background-color: transparent;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-nav-menu > ul {
    margin: 0;
    padding-right: 14px; /* reserve space for resize grip */
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Two-UL nav split (matches workflow). Top UL grows + scrolls; bottom UL (Logs) is pinned to the bottom. **/
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-nav-menu > ul.sl-nav-menu-top {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-nav-menu > ul.sl-nav-menu-bottom {
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    padding-top: 4px;
}

/** Classic theme already uses justify-content: space-between on .pl-nav-menu — explicit flex sizing keeps the two ULs aligned to top/bottom even when the top UL is short. **/
div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul.sl-nav-menu-top {
    flex: 0 1 auto;
}

div.simlytiks:not(.simlytiks-theme-modern) .slBody .sl-nav-menu-container .pl-nav-menu > ul.sl-nav-menu-bottom {
    flex: 0 0 auto;
    margin-top: auto;
}

/* ---- Resize strip: always visible affordance (grip + tint) ---- */
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-sidebar-resize-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    cursor: col-resize;
    z-index: 40;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.07) 40%, rgba(59, 130, 246, 0.12) 100%);
    border-left: 1px dashed rgba(59, 130, 246, 0.28);
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-sidebar-resize-wrap .sl-sidebar-resize-grip {
    width: 4px;
    height: 56px;
    min-height: 48px;
    border-radius: 3px;
    background: rgba(59, 130, 246, 0.45);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 1px 4px rgba(59, 130, 246, 0.35);
    transition: background 0.12s ease, height 0.12s ease, transform 0.12s ease;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-sidebar-resize-wrap:hover .sl-sidebar-resize-grip,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-sidebar-resize-wrap.is-dragging .sl-sidebar-resize-grip {
    background: var(--d3v-accent, #3B82F6);
    height: 72px;
    transform: scaleX(1.15);
}

body.sl-vertical-resize-dragging {
    user-select: none;
    cursor: col-resize !important;
}

/* ---- Floating content wrapper (modern mode): sits right of the rail ---- */
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper {
    background: var(--sl-bg-primary, #FFFFFF);
    border-right: 1px solid var(--sl-border-color, var(--d3v-border, #E2E8F0));
    height: 100%;
    min-width: 0;
    flex-shrink: 0;
    z-index: 2;
    position: static;
    overflow-y: auto;
    overflow-x: hidden;
}
div.simlytiks.simlytiks-theme-modern.showSidebar .slBody.mainPanel .pl-nav-menu-wrapper {
    display: block !important;
    width: 220px;
}
div.simlytiks.simlytiks-theme-modern.hideSidebar .slBody.mainPanel .pl-nav-menu-wrapper {
    position: absolute;
    left: 56px;
    top: 0;
    z-index: 200;
    display: block;
    border: 1px solid var(--sl-border-color, var(--d3v-border, #E2E8F0));
    box-shadow: 4px 0 16px rgba(15, 23, 42, 0.08);
}

/* Floating wrapper inner content tabs: proper height */
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .content_wrapper {
    height: 100%;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .floating-container-header {
    display: none;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .tab-content {
    flex: 1 1 auto;
    overflow-y: auto;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs {
    background: var(--sl-bg-secondary, #F8FAFC);
    border-bottom: 1px solid var(--sl-border-color, var(--d3v-border, #E2E8F0));
    padding: 0 8px;
    margin-bottom: 0;
    flex-shrink: 0;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs > li > a {
    font-size: 12px;
    font-weight: 500;
    color: var(--sl-text-secondary, #475569);
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: all 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs > li.active > a,
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .plugin-tabs .nav-tabs > li > a:hover {
    color: var(--sl-accent-primary, var(--d3v-accent, #3B82F6));
    border-bottom-color: var(--sl-accent-primary, var(--d3v-accent, #3B82F6));
    background: transparent;
}

/* Responses panel inside floating wrapper: ensure proper scrolling */
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .responses-panel {
    height: 100%;
    overflow-y: auto;
}

/* Nav tab header inside floating wrapper: modern styling */
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .wf-nav-tab-header {
    background: var(--sl-bg-secondary, #F8FAFC);
    border-bottom: 1px solid var(--sl-border-color, var(--d3v-border, #E2E8F0));
    padding: 8px 12px !important;
    margin-bottom: 0 !important;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .wf-nav-tab-header .nav-content-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sl-text-primary, #1E293B);
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .close_nav_wrapper,
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .close_wrapper {
    border: none;
    background: transparent;
    color: var(--sl-text-muted, #94A3B8);
    transition: color 0.15s ease;
}
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .close_nav_wrapper:hover,
div.simlytiks.simlytiks-theme-modern .slBody.mainPanel .pl-nav-menu-wrapper .close_wrapper:hover {
    color: var(--sl-text-primary, #1E293B);
}

/* hideSidebar + modern rail */
div.simlytiks.simlytiks-theme-modern.hideSidebar .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li:hover,
div.simlytiks.simlytiks-theme-modern.hideSidebar .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .pl-tabs-vertical > li[data-opened="true"] {
    border-left: 3px solid var(--d3v-accent, #3B82F6) !important;
}

/**
 * R0-3848 (Bug 1) — Export (and any) Bootstrap dropdown opened from a left-nav
 * rail item was clipped invisible by the rail's overflow:hidden (the shell)
 * and the inner overflow:auto scroll layers (.pl-nav-menu / .sl-nav-menu-top).
 * While a rail dropdown is OPEN, lift the clip on the clipping ancestors so the
 * menu can escape, and render the open menu as a fixed-position, high-z surface
 * so it floats above the viz instead of being cut off at the rail boundary.
 * Scoped to the open state only — scroll/layout are untouched when closed.
 */
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar:has(.dropdown.open),
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar:has(.dropdown.open) .pl-nav-menu,
div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar:has(.dropdown.open) .pl-nav-menu > ul.sl-nav-menu-top {
    overflow: visible;
}

div.simlytiks.simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .dropdown.open > .dropdown-menu {
    position: fixed;
    z-index: 1080;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
}

/* ============================================================================
 * Added by shashank2104 on 2026-08-19 - R2026-189 - NAV RAIL ON THE RIGHT (opt-in)
 *
 * Driven by the `navRailPosition` setting -> [data-nav-rail="right"] on the outer
 * container (stamped in simlytiks.main.views.js onRender, same mechanism as
 * data-floating-sidebar). Default stays 'left', so nothing below applies unless a
 * host explicitly asks for it.
 *
 * Why a host would: when Simlytiks is embedded next to chrome that already owns the
 * left edge (the dashboard ML Prediction pane keeps its inputs rail there), two rails
 * end up stacked on the same side. Moving Simlytiks' rail to the right edge means its
 * panel opens leftward into the middle of the view instead.
 *
 * Pure layout flip - order + which edge the border/shadow sits on. No colours, sizes
 * or behaviour change, so the rail keeps its normal look on either side.
 * ========================================================================== */

/* 1. rail block to the right of the main window */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"] .slBody.mainPanel .sl-side-bar-container { order: 2; }
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"] .slBody.mainPanel .sl-main-window { order: 1; }

/* 2. inside the rail block, the slide-out panel goes to the LEFT of the rail itself */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"] .slBody.mainPanel .sl-nav-menu-container {
    flex-direction: row-reverse;
}

/* 3. the rail's own edge treatment mirrors */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"].simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar {
    border-right: none;
    border-left: 1px solid var(--d3v-border, #E2E8F0);
    box-shadow: -4px 0 24px rgba(15, 23, 42, 0.07);
}

/* 4. the drag-to-resize grip lives on the inner edge, which is now the left one */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"].simlytiks-theme-modern .slBody .sl-nav-menu-container .sl-vertical-nav-sidebar .sl-sidebar-resize-wrap {
    right: auto;
    left: 0;
}

/* 5. floating mode: the panel is absolutely positioned off the rail edge, so pin it to
 *    the right instead of the left and flip its divider. */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"][data-floating-sidebar="true"] .slBody.mainPanel .pl-nav-menu-wrapper {
    left: auto;
    right: 56px;
    border-right: none;
    border-left: 1px solid #DDD;
}

/* 6. non-floating mode uses a static left offset for the same purpose */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"]:not([data-floating-sidebar="true"]) .slBody.mainPanel .pl-nav-menu-wrapper {
    left: auto;
    right: 60px;
    border-left: 1px solid #DDD;
    border-right: none;
}

/* 7. the collapse chevron points the other way when the panel opens leftward */
div.simlytiks.simlytiks-outer-container[data-nav-rail="right"] .toggle_sidebar { transform: scaleX(-1); }

/* ─── Viz panel host (only when in pick mode) ──────────────────────── */
.simlytiks .sl-vizpicker-host {
    position: relative;
    transition: transform var(--d3v-t-fast, 0.12s) ease,
                box-shadow var(--d3v-t-fast, 0.12s) ease;
}
.simlytiks .sl-vizpicker-host:hover {
    transform: scale(1.005);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15,23,42,0.10));
}

/* ─── Floating Select/Deselect button (top-right of viz panel) ─────── */
.simlytiks .sl-vizpicker-host > .sl-vizpicker-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30;
    height: 28px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    color: var(--d3v-text-secondary, #475569);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-full, 999px);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(15,23,42,0.10));
    cursor: pointer;
    opacity: 0.65;
    transition: opacity var(--d3v-t-fast, 0.12s) ease,
                transform var(--d3v-t-fast, 0.12s) ease,
                background var(--d3v-t-fast, 0.12s) ease,
                color var(--d3v-t-fast, 0.12s) ease,
                border-color var(--d3v-t-fast, 0.12s) ease,
                box-shadow var(--d3v-t-fast, 0.12s) ease;
}
.simlytiks .sl-vizpicker-host:hover > .sl-vizpicker-toggle {
    opacity: 1;
}
.simlytiks .sl-vizpicker-host > .sl-vizpicker-toggle:hover {
    transform: scale(1.05);
    color: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(59,130,246,0.20));
}
.simlytiks .sl-vizpicker-host > .sl-vizpicker-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.20),
                var(--d3v-sh-sm, 0 2px 6px rgba(15,23,42,0.10));
}

/* Selected state — solid accent button */
.simlytiks .sl-vizpicker-host > .sl-vizpicker-toggle.is-selected {
    opacity: 1;
    color: var(--d3v-text-inverse, #FFFFFF);
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 4px 14px rgba(59,130,246,0.35);
}
.simlytiks .sl-vizpicker-host > .sl-vizpicker-toggle.is-selected:hover {
    background: var(--d3v-accent-hover, #2563EB);
    border-color: var(--d3v-accent-hover, #2563EB);
    color: var(--d3v-text-inverse, #FFFFFF);
}

/* ─── Selected-panel ring ──────────────────────────────────────────── */
.simlytiks .sl-vizpicker-host.sl-vizpicker-selected {
    box-shadow: 0 0 0 2px var(--d3v-accent, #3B82F6),
                0 8px 24px rgba(59,130,246,0.18);
    border-radius: var(--d3v-r-md, 8px);
}
.simlytiks .sl-vizpicker-host.sl-vizpicker-selected:hover {
    box-shadow: 0 0 0 2px var(--d3v-accent, #3B82F6),
                0 10px 28px rgba(59,130,246,0.22);
}

/* ─── Picker modal chrome ──────────────────────────────────────────── */
.sl-vizpicker .modal-dialog {
    width: 90%;
}
.sl-vizpicker .modal-content {
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-xl, 0 24px 64px rgba(15,23,42,0.20));
    overflow: hidden;
}
.sl-vizpicker .modal-header {
    background: var(--d3v-bg-primary, #FFFFFF);
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
}
.sl-vizpicker .modal-header .modal-title {
    flex: 1 1 auto;
    margin: 0;
}
.sl-vizpicker .modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sl-vizpicker .modal-title i.fa { color: var(--d3v-accent, #3B82F6); }

/* ─── Header edit-mode toggle (DVFIV-2020) ─────────────────────────── */
.sl-vizpicker .sl-vizpicker-edit-toggle-wrap {
    display: inline-flex!important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--d3v-r-full, 999px);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background var(--d3v-t-fast, 0.12s),
                color var(--d3v-t-fast, 0.12s);
}
.sl-vizpicker .sl-vizpicker-edit-toggle-wrap:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}
.sl-vizpicker .sl-vizpicker-edit-toggle-wrap:has(input.sl-vizpicker-edit-toggle:checked) {
    background: rgba(59, 130, 246, 0.10);
    color: var(--d3v-accent-hover, #2563EB);
}
.sl-vizpicker .sl-vizpicker-edit-toggle-text {
    line-height: 1;
}
.sl-vizpicker input.sl-vizpicker-edit-toggle {
    margin: 0;
}
.sl-vizpicker .modal-body {
    padding: 0;
    background: var(--d3v-bg-secondary, #F8FAFC);
    overflow: hidden;
}
.sl-vizpicker .sl-vizpicker-body,
.sl-vizpicker .sl-vizpicker-stage {
    height: 100%;
    width: 100%;
}

/* ─── Selection counter pill (modal footer left side) ──────────────── */
.sl-vizpicker .sl-vizpicker-count {
    display: inline-block;
    margin: 8px;
    margin-right: auto;
    padding: 6px 12px;
    border-radius: var(--d3v-r-full, 999px);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    font-weight: 500;
    transition: background var(--d3v-t-fast, 0.12s),
                color var(--d3v-t-fast, 0.12s);
}
.sl-vizpicker .sl-vizpicker-count i.fa { margin-right: 4px; }
.sl-vizpicker .sl-vizpicker-count.has-selection {
    background: rgba(59,130,246,0.10);
    color: var(--d3v-accent-hover, #2563EB);
}
.sl-vizpicker .sl-vizpicker-count i.fa { font-size: 11px; }

/* ─── Apply button — disabled when zero selected ───────────────────── */
.sl-vizpicker .modal-footer #apply.disabled,
.sl-vizpicker .modal-footer #apply:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── SimlytiksManager inline embed (vizPick + onVizPick, no VizPickerView modal) ─ */
.simlytiks .sl-vizpick-manager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary, #FFFFFF);
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    z-index: 6;
}
.simlytiks .sl-vizpick-manager-count {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--d3v-r-full, 999px);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    font-weight: 500;
}
.simlytiks .sl-vizpick-manager-count.has-selection {
    background: rgba(59, 130, 246, 0.10);
    color: var(--d3v-accent-hover, #2563EB);
}
.simlytiks .sl-vizpick-manager-count i.fa {
    margin-right: 6px;
    font-size: 11px;
}
.simlytiks .sl-vizpick-manager-apply.disabled,
.simlytiks .sl-vizpick-manager-apply:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* /javascripts/plugins_src/fileexplorer/fileexplorer.css */
div.d3view_file_explorer .file_explorer .fe-body-content-wrapper {
    background: none;
}
div.d3view_file_explorer .bs_datatable_wrapper table {
    margin-top: 0!important;
    margin-bottom: 0!important;
    border: none!important;
    width: 100%!important;
    table-layout: fixed;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.file-item {
    font-weight: 400;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.file-item.context-menu-border td {
    border-top: 1px solid #428bca!important;
    border-bottom: 1px solid #428bca!important;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.file-item.context-menu-border td:first-child {
    border-left: 1px solid #428bca!important;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.file-item.context-menu-border td:last-child {
    border-right: 1px solid #428bca!important;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.fe_selected {
    background-color: #428bca;
    background-image: linear-gradient(to bottom,#428bca 0,#2d6ca2 100%);
    background-image: -webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%);
    color: #FFF!important;
}
div.d3view_file_explorer .bs_datatable_wrapper table tbody tr.fe_selected a {
    color: #FFF!important;
}
div.d3view_file_explorer .bs_datatable_wrapper table .dt-body-left {
    text-align: left;
}

div.d3view_file_explorer .fe-body-content-wrapper .fe-body-content {
    min-height: 100px;
    max-height: inherit;
    overflow-y: inherit;
}
div.d3view_file_explorer  .fe-body-content-wrapper .col-xs-2 {
    max-height: inherit;
}
div.d3view_file_explorer div.fe-body-content-wrapper.row {
    /*display: flex;*/
    height: 100%;
}
div.d3view_file_explorer div.fe-body-content-wrapper.row .ui-layout-resizer.ui-draggable-handle {
    border-left: 1px solid #DDD;
}
div.d3view_file_explorer .JCLRFlex {
    width: inherit!important;
}
div.fe_drag_helper {
    z-index: 1500;
}
div.d3view_file_explorer .fe-body-content-wrapper .recent_list_wrapper .clearRecentList {
    top: 6px;
    position: relative;
}
div.d3view_file_explorer div.favoritesList {
    min-height: 50px;
}
div.d3view_file_explorer div.favoritesList.active {
    border: 1px solid #ccc;
}
div.d3view_file_explorer .file-explorer-favorites.sg-context-menu {
    background: #f9f9f9;
    border: 1px solid #CCC;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
    z-index: 2000;
}
div.d3view_file_explorer .file-explorer-favorites.sg-context-menu li a.context-menu-item {
    padding: 4px 6px;
    color: #000;
    font-weight: 400;
    background: inherit;
}
div.d3view_file_explorer .file-explorer-favorites.sg-context-menu li:hover {
    background: #428BCA;
}
div.d3view_file_explorer .file-explorer-favorites.sg-context-menu li:hover a {
    color: #FFF!important;
}
div.d3view_file_explorer div.clickable.favorite-context-menu-border {
    border: 1px solid #428bca!important;
}


.file_explorer.browsing-only {
   box-shadow:none!important;
}

.file_explorer.browsing-only .fe-body {
    border-left:none;
}

/* ============================================================
   FileExplorer facelift (2026-09-08) — house design language.
   Same DOM, CSS only; scoped to .fe_container (overlay mode)
   and .file_explorer (all callers). frontend-style.md palette.
   ============================================================ */

.fe_container {
    background: rgba(30, 41, 59, 0.45);
}

.fe_container .file_explorer {
    max-width: 1150px;
    margin: 4vh auto 0 auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    /* no overflow:hidden -- the body heights are JS-set and the footer
       must stay visible below them */
}
.fe_container .file_explorer .fe-header {
    border-radius: 8px 8px 0 0;
}
.fe_container .file_explorer .fe-footer {
    border-radius: 0 0 8px 8px;
}

/* overlay mode only: flatten the legacy grid into one flex toolbar so the
   controls stop wrapping into stacked columns at narrower widths */
.fe_container .file_explorer .fe-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.fe_container .file_explorer .fe-header > .col-md-7,
.fe_container .file_explorer .fe-header > .col-md-5,
.fe_container .file_explorer .fe-header > .col-md-5 > .col-md-5,
.fe_container .file_explorer .fe-header > .col-md-5 > .col-md-7,
.fe_container .file_explorer .fe-header .folder-toggler,
.fe_container .file_explorer .fe-header .folder-toggler > .col-1,
.fe_container .file_explorer .fe-header .folder-toggler > .col-2 {
    display: contents;
}
.fe_container .file_explorer .fe-header .pull-right {
    float: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fe_container .file_explorer .fe-header .input-group {
    display: flex;
    flex: 1 1 280px;
    min-width: 220px;
    max-width: 560px;
}
.fe_container .file_explorer .fe-header .input-group .input-group-addon {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: auto;
}
.fe_container .file_explorer .fe-header .current-dir {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* ---- header ---- */
.file_explorer .fe-header {
    background: #fafbfc;
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
    padding: 10px 14px 12px 14px !important;
}
.file_explorer .fe-header .input-group-addon {
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #555;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}
.file_explorer .fe-header .input-group-addon:hover {
    background: #e0ecf8;
    color: #2c5282;
    text-decoration: none;
}
.file_explorer .fe-header .current-dir {
    font-size: 12px;
    color: #333;
    border: 1px solid #ddd;
    box-shadow: none;
}
.file_explorer .fe-header .current-dir:focus {
    border-color: #2c5282;
}
.file_explorer .fe-header .btn-default {
    border-radius: 6px;
    font-size: 12px;
    color: #555;
    border-color: #ddd;
    transition: background 0.2s ease, color 0.2s ease;
}
.file_explorer .fe-header .btn-default:hover {
    background: #e8e8e8;
    color: #333;
}
.file_explorer .fe-header .fe-file-search {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
}

/* primary actions share one look everywhere in the widget */
.file_explorer .btn-primary,
.file_explorer .use-current-folder {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.file_explorer .btn-default.close_fe {
    border-radius: 6px;
    font-size: 12px;
}
.file_explorer .use-current-folder {
    background: #d4edda;
    border-color: #b7dfc2;
    color: #155724;
}
.file_explorer .use-current-folder:hover {
    background: #c3e6cb;
    color: #155724;
}

/* ---- left rail (favorites / recent) ---- */
.file_explorer .fe-body-content-wrapper .col-xs-2 {
    background: #fafbfc;
    border-right: 1px solid #eee;
    padding-top: 10px;
}
.file_explorer .fav_list_wrapper > label,
.file_explorer .recent_list_wrapper > label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
}
.file_explorer .favoritesList,
.file_explorer .recentList {
    font-size: 12px;
    color: #555;
}
.file_explorer .favoritesList .clickable,
.file_explorer .recentList .clickable {
    padding: 3px 6px;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.file_explorer .favoritesList .clickable:hover,
.file_explorer .recentList .clickable:hover {
    background: #e0ecf8;
}
.file_explorer .recent_list_wrapper .clearRecentList {
    font-size: 11px;
    color: #999;
    cursor: pointer;
}

/* ---- file table ---- */
.file_explorer .fe-body-content table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
    border-bottom: 2px solid #e8e8e8 !important;
    background: #fff;
}
.file_explorer .fe-body-content table tbody tr.file-item td {
    font-size: 12.5px;
    color: #555;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
}
.file_explorer .fe-body-content table tbody tr.file-item:hover td {
    background: #f5f8fb;
}
.file_explorer .fe-body-content table tbody tr.file-item.info td {
    background: #e0ecf8;
}
.file_explorer .fe-body-content .file-view-btn {
    color: #333;
    text-decoration: none;
}
.file_explorer .fe-body-content .file-view-btn .fa-folder {
    color: #2c5282 !important; /* template inlines a lighter blue; unify */
}
.file_explorer .fe-body-content .view-file,
.file_explorer .fe-body-content .select-dir {
    border-radius: 4px;
    font-size: 11px;
    color: #555;
    border-color: #ddd;
    transition: background 0.2s ease, color 0.2s ease;
}
.file_explorer .fe-body-content .select-dir:hover {
    background: #e0ecf8;
    border-color: #90b4e0;
    color: #2c5282;
}
.file_explorer .fe-body-content .select-dir .fa-check {
    color: #2c5282;
}
.file_explorer .fe-body-content table tbody tr.file-item.info .select-dir {
    background: #2c5282;
    border-color: #2c5282;
    color: #fff;
}
.file_explorer .fe-body-content table tbody tr.file-item.info .select-dir .fa-check {
    color: #fff;
}

/* ---- footer ---- */
.file_explorer .fe-footer {
    background: #fafbfc;
    border-top: 1px solid #e8e8e8;
    padding: 10px 14px;
}
.file_explorer .fe-footer .filesselectedindicator .showSelectedList {
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* selection count pill in the header area */
.file_explorer .filesselectedindicator .num_files_selected {
    font-weight: 600;
}

/* ---- /d3view-design modal treatment (2026-09-08 pass 2) ---- */

.fe_container .file_explorer {
    border-radius: 12px;
    margin-top: 8vh;
}
.fe_container .file_explorer .fe-header { border-radius: 12px 12px 0 0; }
.fe_container .file_explorer .fe-footer { border-radius: 0 0 12px 12px; }

/* flat buttons everywhere in the widget -- kill the bootstrap gloss */
.file_explorer .btn {
    background-image: none !important; /* bootstrap 3 gradient */
    text-shadow: none !important;
    box-shadow: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.file_explorer .btn-primary {
    background: #2c5282;
    border-color: #2c5282;
}
.file_explorer .btn-primary:hover,
.file_explorer .btn-primary:focus {
    background: #244468;
    border-color: #244468;
}
.file_explorer .btn-default {
    background: #fff;
    border-color: #ddd;
    color: #555;
}
.file_explorer .btn-default:hover {
    background: #f5f8fb;
    color: #333;
}
.file_explorer .btn-warning {
    background: #fff7e6;
    border-color: #f0d9a8;
    color: #d46b08;
}

/* input focus ring, house style */
.file_explorer .current-dir:focus,
.file_explorer .fe-file-search:focus,
.file_explorer .fe-new-path-input:focus {
    border-color: #2c5282 !important;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.10) !important;
    outline: none;
}

/* header nav group reads as one segmented control */
.fe_container .file_explorer .fe-header .input-group-addon:first-child {
    border-radius: 6px 0 0 6px;
}
.fe_container .file_explorer .fe-header .current-dir {
    border-radius: 0 6px 6px 0;
}

/* The select column. Picking is deliberate now -- a click opens a row, a tick chooses it. */

.fe-select-col {
    width: 34px;
    text-align: center;
    vertical-align: middle !important;
}

.fe-row-select,
.fe-select-all {
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

tr.file-item.is-dir .fe-row-select {
    /* A folder row is otherwise indistinguishable from a file row at the checkbox. */
    accent-color: #44b7e6;
}

tr.file-item .fe-select-col {
    cursor: default;
}

/* /javascripts/plugins_src/code_editor/code_editor.css */
.custom-editor {
    /*--aspect_ratio: auto;*/
    position: relative;
    /*aspect-ratio: var(--aspect_ratio);*/
    height: 100%;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}


.custom-editor .ce-container-1 {
    flex: 1 1 auto;
    max-width: calc(100% - 350px);
    overflow: auto;
}
.custom-editor .new-plugin-template-ui .plugin-main-container {
    flex: 1 1 auto;
    width: 100%;
    max-width: calc(100% - 85px);
    overflow: auto;
}

.custom-editor .ce-container-2 {
    width: 350px;
}

.custom-editor .ui-resizable-handle.ui-resizable-e {
    background: lightgray;
    right: -10px;
}

.custom-editor .code-editor-container {
    width: 60%;
}


.custom-editor .output-container {
    height: calc(100% - 70px);
}

.custom-editor .ce-editor-box {
    position: relative;
}





div.custom-editor .gi-checkbox-input {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
}

div.custom-editor .gi-checkbox-input input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

div.custom-editor .gi-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

div.custom-editor .gi-checkbox-input:hover input~.gi-checkmark {
    background-color: #ccc;
}

div.custom-editor .gi-checkbox-input input:checked~.gi-checkmark {
    background-color: #2196F3;
}

div.custom-editor .gi-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

div.custom-editor .gi-checkbox-input input:checked~.gi-checkmark:after {
    display: block;
}

div.custom-editor .gi-checkbox-input .gi-checkmark:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


div.custom-editor .gi-radio-input {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    font-weight: normal;
}


div.custom-editor .gi-radio-input input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


div.custom-editor .gi-radio-button {
    position: absolute;
    top: -2px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}


div.custom-editor .gi-radio-input:hover input~.gi-radio-button {
    background-color: #ccc;
}


div.custom-editor .gi-radio-input input:checked~.gi-radio-button {
    background-color: #2196F3;
}


div.custom-editor .gi-radio-button:after {
    content: "";
    position: absolute;
    display: none;
}


div.custom-editor .gi-radio-input input:checked~.gi-radio-button:after {
    display: block;
}


div.custom-editor .gi-radio-input .gi-radio-button:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

div.custom-editor .pl-flex-column {
    display: flex;
    flex-direction: column;
}

div.custom-editor .show-tooltip:hover {
    cursor: pointer;
    color: steelblue;
}



div.custom-editor .ce-main-div {
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
}

div.custom-editor .ce-editor-div {
    align-items: self-start;
    gap: 1rem;
    height: 100%;
}

div.custom-editor .ce-preview-div {
    flex: 1 1 auto;
    align-items: self-start;
    gap: 1rem;
}

div.custom-editor .ce-editor-div-header {
    height: 55px;
    border-bottom: 1px solid #ddd;
}

div.custom-editor .ce-editor-div-body {
    flex: 1 1 auto;
    position: relative;
    height: 100%;
    overflow: auto;
}

div.custom-editor .ce-droppable {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}


div.custom-editor input.gi-form-checkbox {
    position: relative;
    width: 0px;
    margin: 0px 30px;
}

div.custom-editor input.gi-form-checkbox::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 24px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    top: -5px;
    left: -23px;
    transition: 0.3s;
    background: #1b8bd726;
}

div.custom-editor input.gi-form-checkbox::after {
    content: "";
    position: absolute;
    width: 29px;
    height: 29px;
    border-radius: 20px;
    top: -7px;
    left: -32px;
    background: #ffffff;
    border: 1px solid #ededed;
    cursor: pointer;
    transition: 0.3s;
}

div.custom-editor input.gi-form-checkbox:checked::after {
    left: 0px;
    background: #3c97ff;
}


/* Updated by shashank2104 on 01/13/2026 - DVFIV-1887 - Improved placeholder styling for better readability */
div.custom-editor .ce-placeholder {
    position: absolute;
    background-color: #17a2b8;
    pointer-events: auto !important;
    cursor: pointer;
    z-index: 10;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
div.custom-editor .ce-placeholder > .fa {
    margin-right: 10px!important;
}

.custom-editor .ce-format-settings-viewer {
    width: 400px;
    border: 1px solid #DDD;
}

div.custom-editor .ce-renderer {
    flex: 1 1 auto;
}

div.custom-editor .format-settings-renderer {
    height: calc(100% - 55px);
    overflow: auto;
}

/* Template Panel Styles */
.custom-editor .template-categories {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.custom-editor .template-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.custom-editor .template-item {
    padding: 8px;
    margin: 4px 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: move;
    transition: all 0.2s ease;
}

.custom-editor .template-item:hover {
    background: #e9e9e9;
    border-color: #ccc;
}

.custom-editor .template-item:active {
    background: #ddd;
}

.custom-editor .template-item.dragging {
    opacity: 0.5;
}

.custom-editor .template-helper {
    background: #fff;
    border: 1px solid #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Underscore Template Styles */
.custom-editor .template-container {
    margin: 10px 0;
}

.custom-editor .template-container .item {
    padding: 8px;
    margin: 4px 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.custom-editor .template-container .item span {
    margin-right: 10px;
}

.custom-editor .table-container {
    margin: 15px 0;
}

.custom-editor .table-container table {
    width: 100%;
    border-collapse: collapse;
}

.custom-editor .table-container th,
.custom-editor .table-container td {
    padding: 8px;
    border: 1px solid #dee2e6;
}

.custom-editor .table-container th {
    background: #f8f9fa;
    font-weight: bold;
}

.custom-editor .conditional-content,
.custom-editor .else-content {
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
}

.custom-editor .conditional-content {
    background: #e3f2fd;
    border: 1px solid #90caf9;
}

.custom-editor .else-content {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.custom-editor .placeholder-hover {
    background-color: rgba(33, 150, 243, 0.1);
    border: 2px dashed #2196F3;
}

.custom-editor .block-marker {
    background-color: rgba(33, 150, 243, 0.2);
    border-right: 1px dashed #2196F3;
}

.custom-editor .new-plugin-template-ui .plugin-nav-overlay-container {
    height: 100%;
    width: 400px;
}

/* Code Snippets Styles */
.custom-editor .code-snippet-item {
    padding: 8px;
    margin: 4px 0;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: move;
    transition: all 0.2s ease;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 13px;
}

.custom-editor .code-snippet-item:hover {
    background: #e9ecef;
    border-color: #007bff;
}

.custom-editor .code-snippet-item:active {
    background: #007bff;
    color: white;
}

.custom-editor .code-snippet-item.dragging {
    opacity: 0.5;
}

.custom-editor .code-language-select {
    margin-bottom: 15px;
}

.custom-editor .code-search {
    margin-bottom: 15px;
}

.custom-editor .code-snippets-list,
.custom-editor .code-patterns-list {
    /*max-height: 300px;*/
    /*overflow-y: auto;*/
    padding-right: 5px;
}

.custom-editor .code-snippets-list::-webkit-scrollbar,
.custom-editor .code-patterns-list::-webkit-scrollbar {
    width: 6px;
}

.custom-editor .code-snippets-list::-webkit-scrollbar-track,
.custom-editor .code-patterns-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-editor .code-snippets-list::-webkit-scrollbar-thumb,
.custom-editor .code-patterns-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.custom-editor .code-snippets-list::-webkit-scrollbar-thumb:hover,
.custom-editor .code-patterns-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.custom-editor .add-code-snippet {
    width: auto;
    margin-top: 10px;
}

/* Syntax highlighting for code snippets */
.custom-editor .code-snippet-item {
    white-space: pre;
    tab-size: 4;
}

.custom-editor .code-snippet-item .keyword {
    color: #0033b3;
}

.custom-editor .code-snippet-item .string {
    color: #008000;
}

.custom-editor .code-snippet-item .comment {
    color: #808080;
}

.custom-editor .code-snippet-item .function {
    color: #0033b3;
}

.custom-editor .code-snippet-item .variable {
    color: #0000ff;
}

/* Overlay for Ace block dropzones */
div.custom-editor .ace-block-overlay {
    pointer-events: none;
    z-index: 20;
}
div.custom-editor .ace-block-dropzone {
    pointer-events: auto;
    background: rgba(33,150,243,0.08);
    border: 1px dashed #2196F3;
    transition: background 0.2s;
    cursor: pointer;
}
div.custom-editor .ace-block-dropzone.hover,
div.custom-editor .ace-block-dropzone:hover {
    background: rgba(33,150,243,0.25);
}

/* Enhanced styling for editable blocks */
div.custom-editor .ace-block-dropzone {
    position: relative;
}

div.custom-editor .ace-block-dropzone::after {
    content: "✏️";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.6;
    pointer-events: none;
}

div.custom-editor .ace-block-dropzone:hover::after {
    opacity: 1;
}

/* Inline editing styles */
div.custom-editor .block-inline-edit {
    position: absolute;
    border: 2px solid #2196F3;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 14px;
    font-family: monospace;
    z-index: 30;
    background: white;
    outline: none;
}

/* Style for blocks with markers */
div.custom-editor .ace-block-dropzone.hasMarker {
    /*background: rgba(255, 193, 7, 0.15) !important;*/
    border: 1px dashed #FFC107 !important;
    cursor: not-allowed;
}

div.custom-editor .ace-block-dropzone.hasMarker::after {
    content: "🔒";
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
    opacity: 0.8;
    pointer-events: none;
}

div.custom-editor .ace-block-dropzone.hasMarker:hover {
    background: rgba(255, 193, 7, 0.25) !important;
}

div.custom-editor .new-plugin-template-ui {
    aspect-ratio: unset;
    height: 100%;
}

div.custom-editor[data-content-type="parsed-content"] .ace-block-overlay {
    display: none;
}

/** Added by shashank2104 on 10/29/2025 at 01:51 PM - AI-31 - Table editor styles **/
/* Table Grid Styles */
div.custom-editor .ce-table-grid {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background: #fff;
    position: relative;
    overflow-y: auto;
    overflow-x: auto;
}

div.custom-editor .ce-table-header-row,
div.custom-editor .ce-table-row {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
}

div.custom-editor .ce-table-corner,
div.custom-editor .ce-table-header-cell,
div.custom-editor .ce-table-row-header,
div.custom-editor .ce-table-cell {
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
    border-collapse: collapse;
}

div.custom-editor .ce-table-header-cell {
    background: #f0f0f0;
    font-weight: bold;
    text-align: center;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 10;
}

div.custom-editor .ce-table-header-cell:hover {
    background-color: #e0e0e0;
}

div.custom-editor .ce-table-header-cell[contenteditable="true"] {
    background-color: #fff;
    outline: 2px solid #4CAF50;
    cursor: text;
    user-select: text;
}

div.custom-editor .ce-table-header-cell[contenteditable="true"]:focus {
    background-color: #fff;
    outline: 2px solid #2196F3;
}

div.custom-editor .ce-table-row-header {
    background: #f0f0f0;
    text-align: center;
    font-size: 12px;
    user-select: none;
    position: sticky;
    left: 0;
    z-index: 9;
}

div.custom-editor .ce-table-corner {
    background: #e0e0e0;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 11;
}

div.custom-editor .ce-table-cell {
    cursor: cell;
    user-select: none;
}

div.custom-editor .ce-table-cell:hover {
    background-color: #f9f9f9;
}

div.custom-editor .ce-table-cell.selected {
    background-color: #d0e8ff !important;
    outline: 2px solid #2196F3;
    outline-offset: -2px;
}

div.custom-editor .ce-table-cell.placeholder-hover {
    background-color: #e3f2fd !important;
    border: 2px dashed #2196F3;
}

div.custom-editor .ce-table-cell.ce-placeholder-cell {
    background-color: #fff9c4;
    font-weight: 500;
}

div.custom-editor .ce-table-cell[contenteditable="true"] {
    background-color: #fff;
    outline: 2px solid #4CAF50;
    cursor: text;
}

div.custom-editor .ce-table-cell[contenteditable="true"]:focus {
    background-color: #fff;
    outline: 2px solid #2196F3;
}

/** Added by shashank2104 on 10/31/2025 at 11:21 AM - Column selection and resizing styles **/
div.custom-editor .ce-table-header-cell.column-selected,
div.custom-editor .ce-table-cell.column-selected {
    background-color: #b3d9ff !important;
    border-left: 2px solid #2196F3;
    border-right: 2px solid #2196F3;
}
div.custom-editor .ce-table-header-cell .ui-resizable-handle.ui-resizable-e {
    right: 0;
    width: 6px;
    opacity: 0;
}
div.custom-editor .ce-table-header-cell:hover .ui-resizable-handle.ui-resizable-e,
div.custom-editor .ce-table-header-cell.resizing .ui-resizable-handle.ui-resizable-e {
    opacity: 1;
}

div.custom-editor .ce-table-header-cell.column-selected {
    background-color: #99ccff !important;
    font-weight: bold;
}

div.custom-editor .ce-table-header-cell.resizing {
    background-color: #e0f2ff !important;
}

div.custom-editor .ce-table-header-cell  .ui-resizable-handle.ui-resizable-e:hover {
    background: rgba(33, 150, 243, 0.3);
}

div.custom-editor .ce-table-header-cell.ui-resizable-resizing .ui-resizable-handle.ui-resizable-e {
    background: rgba(33, 150, 243, 0.5);
}

div.custom-editor[data-editor-type="table"] .plugin-nav-controls {
    display: none;
}
div.custom-editor[data-editor-type="table"] .plugin-main-container {
    max-width: calc(100% - 10px);
}
/* /javascripts/plugins_src/rich_text_editor/rich_text_editor.css */
.text-rich-editor {
    position: relative;
    /*--aspect_ratio: auto;
    aspect-ratio: var(--aspect_ratio);*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    height: 100%;
}

.text-rich-editor .rich-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    gap: 10px;
    width: calc(100% - 310px);
}

.text-rich-editor .rich-editor-list-viewer {
    padding-left: 10px;
    border-left: 1px solid #ddd;
    width: 300px;
    height: 100%;
}



li.rt-bg-color>i,
li.rt-color>i {
    color: #333 !important;
}


.text-rich-editor .rt-droppable-hover {
    border: 1px solid steelblue;
}


.text-rich-editor .rt-top-nav {
    border-bottom: 1px solid #ddd;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
}

.text-rich-editor .rt-editor {
    line-height: 1.5;
    font-size: 16px;
    font-family: Calibri;
    user-select: none;
    padding: 10px;
    overflow: auto;
}

.text-rich-editor .rt-editor.rt-flex-box {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
}


.text-rich-editor .ri-basic-ui-nav {
    height: 70px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    gap: 1rem;
}

.format-settings-renderer {
    height: calc(100% - 53px);
    overflow: auto;
}


.text-rich-editor .rt-editor-wrpper.rt-show-controls {
    width: calc(100% - 280px) !important;
}

.text-rich-editor .rt-editor-wrpper {
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 100%;
    overflow: auto;
    scrollbar-gutter: stable;
    width: 100%;
}

.text-rich-editor .rt-control-1 {
    width: 280px;
    height: 100%;
    padding-left: 10px;
}

.text-rich-editor .rt-wrapper-1 {
    height: calc(100% - 60px);
    display: flex;
    flex-flow: row;
}

.text-rich-editor .rt-placeholder {
    font-weight: bold;
    background-color: lightblue;
    display: inline;
}

.text-rich-editor .rt-placeholder:hover {
    cursor: pointer;
}


.text-rich-editor .rt-editor * {
    user-select: none;
}

.text-rich-editor .rt-editor:is(:empty)::before {
    content: 'Enter something here..';
    color: #b4b4b4;
}

.text-rich-editor .rt-wrapper {
    display: inline;
}

.text-rich-editor .rt-editor div[contenteditable="true"] {
    min-height: 24px;
    padding: 5px 3px;
    margin: 4px 0px;
    word-break: break-all;
    width: 100%;
    
}

.text-rich-editor .tmp-section {
    min-height: 24px;
}

.rt-editor-controls {
    box-shadow: 1px 2px 2px lightgrey;
    padding: 10px 15px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
}


i.rt-control-cancel {
    position: absolute;
    right: -6px;
    top: -6px;
    font-size: 1.6em;
    color: slategray;
}

i.rt-control-cancel:hover {
    cursor: pointer;
    color: #333;
}


ul.rt-control-item-group {
    gap: 5px;
}

li.rt-control-item>* {
    pointer-events: none;
}

li.rt-control-item {
    border-radius: 4px;
}

li.rt-control-item:not(.rt-active):hover {
    background: #eee;
}

li.rt-control-item:hover {
    cursor: pointer;
}

li.rt-control-item.rt-active {
    color: steelblue;
}

i.rt-control-icon {
    font-size: large;
}

div.dropdown.open>li.rt-control-item.dropdown-toggle {
    background: #ddd;
}

ul.dropdown-menu.rt-controls-dropdown {
    height: auto;
    max-height: 150px;
    overflow: auto;
}
/* /stylesheets/visualizations.css */
:root {
    --dark-border-color: #FFF;
    --dark-text-color: #FFF;
    --dark-background-color: #333333;
    --dark-hover-background-color: #000;
    --dark-button-background-color: #575757;
    --light-border-color: rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] svg.bubble-chart circle {
    fill-opacity: 0.9!important;
}
body[data-theme="dark"] svg.chart-gridlines .gridBox rect {
    fill: transparent!important;
}
body[data-theme="dark"] div.simlytiks svg.box .chart-container line,
body[data-theme="dark"] div.simlytiks svg.box .chart-container rect.box,
body[data-theme="dark"] div.simlytiks svg.scatter_matrix_plot line.diagonal {
    stroke: #FFF!important;
}
.svg text,svg text {
    font-size: 1.4em;
    font-weight: 700
}
.d3view-viz {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.d3view-viz .grouped_chart_container {
    flex: 0 0 100%;
    height: 100%;
}
.d3view-viz .grouped_view.root > .chart_container {
    height: calc(100% - 40px)!important;
}
.d3view-viz .grouped_view.root {
    height: 100%;
    margin-bottom: 0!important;
}
.d3view-viz .grouped_chart_container .treedata-bc > nav {
    display: inline-block;
}

.d3view-viz .grouped_charts[data-orientation="grid"] {
    position: relative;
}
.d3view-viz .grouped_charts[data-orientation="grid"] > .grouped_view {
    /*flex: 0 0 calc(50% - 20px);*/
    /*margin: 0 10px;*/
    position: absolute;
    width: calc(50% - 20px);
    height: 33%;
    margin: 10px;
}
.d3view-viz .grouped_charts[data-orientation="grid"] > .grouped_view.root {
    /*flex: 1 1 calc(100% - 20px);*/
    width: calc(100% - 20px);
    height: 100%;
    margin: 0;
}
.d3view-viz .grouped_charts[data-bordered="true"] > .grouped_view:not(.root) {
    border: 1px solid #DDD;
    padding: 10px;
}
.d3view-viz .grouped_charts[data-orientation="vertical"] {
    /*display: flex;*/
    position: relative;
}
.d3view-viz .grouped_charts[data-orientation="vertical"] > .grouped_view:not(.root) {
    position: absolute;
    width: 500px;
    height: 100%;
    flex: 0 0 450px;
    margin: 0 10px;
}
.d3view-viz .grouped_charts[data-orientation="vertical"] > .grouped_view.root {
    flex: 0 0 calc(100% - 20px);
    height: 100%;
    margin: 0;
}
.d3view-viz .grouped_charts[data-orientation="horizontal"] > .grouped_view:not(.root) {
    height: 350px!important;
    margin-bottom: 15px;
}

.d3view-viz .grouped_charts[data-orientation="carousel"] > .grouped_view {
    width: 100%;
}

/*.d3view-viz .grouped_chart_container .grouped_view.root .chart_container {*/
/*    height: calc(100% - 80px)!important;*/
/*}*/
/*.d3view-viz .grouped_chart_container .chart_container {*/
/*    height: 300px!important;*/
/*}*/
.d3view-viz > .viz-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
}
.d3view-viz > .new-viz {
    flex: 1 1 100%;
}
.d3view-viz .viz-legends-container {
    position: absolute;
    border: 1px solid transparent;
}
.d3view-viz .viz-legends-container.ui-draggable:hover {
    border: 1px solid #DDD;
    border-radius: 5px;
}
.d3view-viz > .legends-svg {
    position: absolute;
}
.d3view-viz > .viz-legends-container div.legends-wrapper {
    position: relative;
    width: auto!important;
    top: 0 !important;
    left: 0 !important;
}
.d3view-viz > .viz-legends-container[data-empty="false"] {
    width: 200px;
    margin-left: 10px;
}
.d3view-viz > .viz-legends-container[data-empty="true"] {
    width: 0;
    display: none;
}
/** right legends **/
.d3view-viz > .viz-legends-container .d3view-legends-container {
    border: none!important;
}
.d3view-viz > .viz-legends-container .d3view-legends-container.opened {
    z-index: 20;
}
.d3view-viz[data-legends-position="right"] .legends-wrapper {
    width: auto!important;
}
.d3view-viz > .viz-legends-container .d3view-legends-container .ui-resizable-handle,
.d3view-viz > .viz-legends-container .d3view-legends-container .toggle-legends {
    display: none!important;
    pointer-events: none!important;
}

/** legend positions **/
.d3view-viz[data-legends-position="top"] .viz-legends-container {
    width: 100%;
    top: 0;
    left: 0;
    bottom: unset!important;
    right: unset!important;
    min-height: 40px;
    z-index: 1;
}
.d3view-viz[data-legends-position="right"] .viz-legends-container {
    width: 200px;
    top: 0;
    right: 0;
    bottom: unset!important;
    left: unset!important;
    height: 100%;
}
.d3view-viz[data-legends-position="top"] .legend-container-options li[data-id="autofit"] {
    display: none;
}
.d3view-viz[data-legends-position="bottom"] .legend-container-options li.dropdown-submenu.left ul.dropdown-menu {
    top: auto;
    transform: translate(-100%, 45px);
}
.d3view-viz[data-legends-position="bottom"] .viz-legends-container {
    width: 100%;
    top: unset!important;
    right: unset!important;
    left: 0;
    bottom: 0;
    min-height: 60px;
}
.d3view-viz[data-legends-position="left"] .viz-legends-container {
    width: 200px;
    bottom: unset!important;
    right: unset!important;
    left: 0;
    top: 0;
    height: 100%;
}

.d3view-viz[data-legends-position="top"] > .viz-legends-container ul.legends-list,
.d3view-viz[data-legends-position="bottom"] > .viz-legends-container ul.legends-list {
    display: flex;
    flex-wrap: wrap;
}
.d3view-viz[data-legends-position="top"] > .viz-legends-container ul.legends-list > .legend-item, .d3view-viz[data-legends-position="bottom"] > .viz-legends-container ul.legends-list > .legend-item {
    margin: 0 5px;
}
.d3view-viz[data-legends-position="top"] > .viz-legends-container ul.legends-list > .legend-item:first-child, .d3view-viz[data-legends-position="bottom"] > .viz-legends-container ul.legends-list > .legend-item:first-child {
    margin-left: 0;
}
.d3view-viz[data-legends-position="top"] > .viz-legends-container ul.legends-list > .legend-item:last-child, .d3view-viz[data-legends-position="bottom"] > .viz-legends-container ul.legends-list > .legend-item:last-child {
    /* margin-right: 0; */
}

.d3view-viz[data-legends-position="right"] .viz-legends-container .legends-wrapper,
.d3view-viz[data-legends-position="left"] .viz-legends-container .legends-wrapper {
    flex-direction: column;
    height: 100%;
}
.d3view-viz[data-legends-position="right"] .viz-legends-container .legends-wrapper .legends-body,
.d3view-viz[data-legends-position="left"] .viz-legends-container .legends-wrapper .legends-body {
    max-height: calc(100% - 32px)!important;
}
.d3view-viz[data-legends-position="right"] .viz-legends-container .legends-wrapper .legends-body .legends-list,
.d3view-viz[data-legends-position="left"] .viz-legends-container .legends-wrapper .legends-list {
    max-height: calc(100% - 2px)!important;
    /* word-wrap: break-word; */
}
.d3view-viz[data-legends-position="right"] .viz-legends-container .legends-wrapper .legends-body .curve-name,
.d3view-viz[data-legends-position="left"] .viz-legends-container .legends-wrapper .curve-name {
    white-space: normal;
}

.d3view-viz > .viz-legends-container .legend-options {
    display: flex;
    line-height: 1em;
}
.d3view-viz > .viz-legends-container li.legend-item {
    padding: 0!important;
}
.d3view-viz > .viz-legends-container div.d3view-legends-container div.legends-body {
    margin: 0!important;
    overflow: auto!important;
}

.d3view-viz .viz-settings-vertical {
    flex: 0 0 50px;
}

.d3view-viz[data-num-legends="true"] .viz-legends-container {
    display: block!important;
    width: 100px!important;
    left: calc(100% - 120px)!important;
}

.d3view-viz .parallel-container {
    flex-wrap: wrap;
}
.d3view-viz .parallel-container .svg_container {
    overflow: auto;
    height: 100%;
}
/** Added by shashank2104 on 2026-06-03 - SIM-1002 - let the chart's svg_container
 *  grow to fill the remaining space when the table is docked right, so the table
 *  sits beside the chart instead of being squeezed to zero width. **/
.d3view-viz .parallel-container[data-table-position="right"] .svg_container {
    flex: 1;
}
.d3view-viz._tiny .parallel-container .svg_container {
    overflow: hidden;
}
.d3view-viz .parallel-container .svg_container svg {
    z-index: 1;
}
.d3view-viz .parallel-container canvas {
    transition: opacity 0.25s ease-in;
    pointer-events: none;
}
.d3view-viz .parallel-container path.kde {
    fill: steelblue;
    stroke-width: 5px;
}
.d3view-viz .parallel-container canvas.faded {
    opacity: 0.4;
    display: block!important;
}
.d3view-viz .parallel-container[data-table-position="top"] .parallel_table_div {
    margin-bottom: 10px;
}
.d3view-viz .parallel-container .parallel_table_div {
    margin: 0 10px;
}
.d3view-viz .parallel-container .tick.not_brushed image {
    opacity: 0.5;
}
.d3view-viz .d3view-no-data {
    display: none;
}
.d3view-viz.no-data > .d3view-no-data {
    display: block!important;
}
.d3view-viz.no-data > .viz-container,
.d3view-viz.no-data > .viz-legends-container {
    display: none;
}

.d3view-viz[data-chart-type="column_summary"] .col-stats > .card {
    width: 25%;
    height: 100px;
    margin: 0 10px;
}

/** Added by shashank2104 on 2026-05-29 - R0-3672 - column_summary scrollbar fix.
 *  The inner .boxplot wrapper (plugins.css:8829) is `display:flex; flex-wrap:wrap`
 *  and its .boxplot-item carries `margin:10px; flex:1 1 auto` (plugins.css:8834).
 *  The 10px top+bottom margins push the rendered SVG ~20px past the
 *  `.col-chart` height (template uses `calc(100% - 30px)`), so the parent's
 *  default `overflow:visible` falls back to whatever the cert / viz wrapper
 *  declared — in PDF capture this baked a vertical scrollbar onto the right
 *  edge of the column_summary tile. Pin overflow:hidden on the column_summary
 *  chart containers and zero out the boxplot-item margin specifically inside
 *  the column_summary wrapper. Unscoped — same scrollbar shows in the live UI
 *  whenever the chart container is short. **/
.d3view-viz[data-chart-type="column_summary"] .col-chart-container,
.d3view-viz[data-chart-type="column_summary"] .col-chart {
    overflow: hidden;
}
.d3view-viz[data-chart-type="column_summary"] .col-chart .boxplot {
    margin: 0;
}
.d3view-viz[data-chart-type="column_summary"] .col-chart .boxplot .boxplot-item {
    margin: 0;
}

.d3view-viz[data-chart-type="scatter_matrix"] svg.scatter_matrix_plot div.dim-label {
    text-align: center;
    font-size: 1.1em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-viz[data-chart-type="parallelcoordinates"] svg.parallel .drag-handle,
.d3view-viz[data-chart-type="parallelcoordinates"] svg.parallel .axis-handle text {
    cursor: move;
}
svg.disableDragging .drag-handle {
    pointer-events: none!important;
}
.d3view-viz[data-chart-type="parallelcoordinates"] svg.parallel .drag-handle.hovered,
.d3view-viz[data-chart-type="parallelcoordinates"] svg.parallel .drag-handle.dragging {
    fill: red!important;
    cursor: move;
}
.d3view-viz[data-chart-type="parallelcoordinates"] .viz-container[data-animated-to] .transparent-background {
    display: none;
}
.d3view-viz[data-chart-type="parallelcoordinates"] .viz-container[data-animated-to] .axis-handle text {
    cursor: default;
}

.d3view-viz[data-chart-type="decisiontree"] .dtree-node-box {
    border: 1px solid #DDD;
    padding: 10px;
    background-color: #FFF;
}
.d3view-viz[data-chart-type="decisiontree"] .dtree-node-box .dtree-node-contents {
    height: calc(100% - 30px);
}
.d3view-viz[data-chart-type="decisiontree"] .dtree-node-box .dtree-node-contents p {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    margin: 0;
}

.d3view-viz[data-chart-type="contour2d"] .paths path.hovered {
    stroke-width: 0.8px;
}


.d3view-viz[data-chart-type="groupstats"] .group-stats {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    flex-wrap: wrap;
    border-right: 1px solid #DDD;
}
.d3view-viz[data-chart-type="groupstats"] .group-stats:last-child {
    border-right: none;
}
.d3view-viz[data-chart-type="groupstats"] .group-stats .group-container {
    flex: 1 1 33%;
}
.d3view-viz[data-chart-type="groupstats"] .group-viz {
    height: 40vh;
}
.d3view-viz[data-chart-type="groupstats"] .groups-summary .group-viz {
    border: none!important;
}
.d3view-viz[data-chart-type="groupstats"] .groups-summary .group-viz,
.d3view-viz[data-chart-type="groupstats"] .groupstats-container .all_rows .bs_datatable_wrapper {
    min-height: unset;
}
.d3view-viz[data-chart-type="groupstats"] .groupstats-groups.sticky {
    display: flex;
    justify-content: space-between;
    position: absolute;
    align-items: center;
    top: 0!important;
    width: calc(100% - 30px);
    z-index: 200;
    margin-bottom: 10px;
}
.d3view-viz[data-chart-type="groupstats"] .groupstats-pages {
    position: relative;
    top: 70px;
    height: calc(100% - 70px);
    overflow: auto;
}
.d3view-viz[data-chart-type="groupstats"] .groupstat-group {
    /* flex: 0 0 25%; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-right: 10px;
    height: 60px;
    min-width: 150px;
    border: 1px solid #DDD;
    box-shadow: var(--plugin-box-shadow-lightest);
    border-radius: 10px;
}
.d3view-viz[data-chart-type="groupstats"] .groupstat-group h3 {
    margin-bottom: 0;
    margin-right: 10px;
}
.d3view-viz[data-chart-type="groupstats"] .group-summary-charts {
    margin-top: 50px;
    min-height: calc(40vh + 60px);
}
.d3view-viz[data-chart-type="groupstats"] .gs-formfilters {
    height: 300px;
    overflow: auto;
}
.d3view-viz[data-chart-type="groupstats"] .gs-formfilters .row {
    margin-bottom: 0!important;
}

/*.group-button {*/
/*    !* height: 30px; *!*/
/*    margin-right: 8px;*/
/*    border: 1px solid #DDD;*/
/*    padding: 6px;*/
/*    border-radius: 5px;*/
/*}*/
.d3view-viz[data-chart-type="groupstats"] .groupstats-page {
    border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 10px;
}
.d3view-viz[data-chart-type="groupstats"] .groupstats-container {
    padding: 15px;
}
.d3view-viz[data-chart-type="groupstats"] .group-vis-container {
    flex: 1 1 33%;
}
.d3view-viz[data-chart-type="groupstats"] .all_rows {
    border: 1px solid #DDD;
}
.d3view-viz[data-chart-type="groupstats"] .group-title {
    cursor: pointer;
}
.d3view-viz[data-chart-type="groupstats"] .page-title {
    height: 30px;
    margin: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.d3view-viz[data-chart-type="groupstats"] .page-title h3 {
    margin: 0;
}
.d3view-viz[data-chart-type="groupstats"] .group-cols {
    border-right: 1px solid #DDD;
}

.d3view-histogram .kde path {
    fill: none;
    stroke: #000;
}

.d3view-viz[data-chart-type="frequencyplot"] svg.frequencyPlot .bar.clicked rect {
    stroke: #333;
    stroke-width: 3px;
}

.d3view-viz[data-chart-type="kdeplot"] .col-chart {
    /*flex: 0 0 calc(33% - 10px);*/
    margin: 5px;
}
.d3view-viz[data-chart-type="kdeplot"] .col-heading {
    background-color: var(--neutralLight);
    text-align: center;
    padding: 8px 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.d3view-viz[data-chart-type="kdeplot"] .col-heading h3 {
    margin: 0;
}
.d3view-viz[data-chart-type="chord"] .d3view-chord .chord-label {
    font-size: 1.2em;
}

rect.viz-svg-el-highlighted,
path.viz-svg-el-highlighted {
    stroke: #000!important;
}

.d3view-viz[data-animated-to]:not([data-anim-type="in-house"]) > *:not(.new-viz) {
    display: none!important;
}

.d3view-viz[data-chart-type="grouped_histogram"] .group-col:not([data-id="_all"]),
.d3view-viz[data-chart-type="grouped_barchart"] .group-col:not([data-id="_all"]),
.d3view-viz[data-chart-type="grouped_boxplot"] .group-col:not([data-id="_all"]) {
    flex: 1 1 auto;
    border: 1px solid #DDD;
    margin-bottom: 20px;
}
.d3view-viz[data-chart-type="grouped_histogram"] .group-col > .col,
.d3view-viz[data-chart-type="grouped_barchart"] .group-col > .col,
.d3view-viz[data-chart-type="grouped_boxplot"] .group-col > .col {
    margin-bottom: 20px;
}
.d3view-viz[data-chart-type="grouped_histogram"] .group-flex,
.d3view-viz[data-chart-type="grouped_barchart"] .group-flex,
.d3view-viz[data-chart-type="grouped_boxplot"] .group-flex {
    padding: 0 15px;
}
.d3view-viz[data-chart-type="grouped_histogram"] .col-legends,
.d3view-viz[data-chart-type="grouped_barchart"] .col-legends,
.d3view-viz[data-chart-type="grouped_boxplot"] .col-legends {
    position: relative;
    width: 100%;
}
.d3view-viz[data-chart-type="grouped_histogram"] .col-legends .legends-wrapper,
.d3view-viz[data-chart-type="grouped_barchart"] .col-legends .legends-wrapper,
.d3view-viz[data-chart-type="grouped_boxplot"] .col-legends .legends-wrapper {
    position: relative;
    width: calc(100% - 0px)!important;
}
.d3view-viz[data-chart-type="grouped_histogram"] .col-legends .legends-wrapper .legend-header,
.d3view-viz[data-chart-type="grouped_barchart"] .col-legends .legends-wrapper .legend-header,
.d3view-viz[data-chart-type="grouped_boxplot"] .col-legends .legends-wrapper .legend-header {
    display: none!important;
}
.d3view-viz[data-chart-type="grouped_histogram"] .group-col-body,
.d3view-viz[data-chart-type="grouped_barchart"] .group-col-body,
.d3view-viz[data-chart-type="grouped_boxplot"] .group-col-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.d3view-viz[data-chart-type="grouped_histogram"] .group-col-body > .col,
.d3view-viz[data-chart-type="grouped_barchart"] .group-col-body > .col,
.d3view-viz[data-chart-type="grouped_boxplot"] .group-col-body > .col {
    flex: 0 0 calc(50% - 20px);
}
.d3view-viz[data-chart-type="grouped_histogram"] .group-col-heading,
.d3view-viz[data-chart-type="grouped_barchart"] .group-col-heading,
.d3view-viz[data-chart-type="grouped_boxplot"] .group-col-heading {
    margin-bottom: 5px;
    padding: 3px 15px;
}
.d3view-viz[data-chart-type="sparkline_matrix"] .legends-svg {
    /*top: 40px!important;*/
}

.d3view-viz[data-chart-type="sparkline_matrix"].digitizing .d3view-no-data {
    display: block!important;
    font-size: 1.4em;
    color: dimgrey;
    background: #FFF;
    z-index : 20;
    padding: 10px;
}
.d3view-viz[data-chart-type="sparkline_matrix"].digitizing .viz-container {
    opacity: 0.3;
}
.d3view-schema-summary .schema-table table tbody tr td,
.d3view-schema-summary .schema-table table tbody tr th {
    vertical-align: middle;
}

.d3view-tree svg.tree g.node.clicked circle {
    fill: steelblue!important;
    stroke: #333!important;
}
.d3view-tree .bulk-options {
    position: absolute;
    z-index: 20;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #DDD;
    padding: 5px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lighter);
    background: #FFF;
}

.d3view-viz .dropdown-submenu.left>.dropdown-menu {
    top:0;
    left: 0;
    transform: translateX(-100%);
    margin-top: -1px;
    margin-left:0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.d3view-viz .dropdown-submenu.left>a:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 6px;
    top: 1px;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-color: transparent #4f5359 transparent transparent;
}

.d3view-viz[data-chart-type="barchart-vertical"] svg.vbar-svg .y_layer rect.brushed {
    stroke: #000;
    stroke-width: 2px;
}

.d3view-viz[data-chart-type="barchart-vertical"] .hasBrushedRows rect:not(.brushed) {
    opacity: 0.3;
    transition: opacity 0.3s ease-in;
}


.d3view-viz[data-chart-type="grouped_boxplot"] .group-item {
    flex: 1 1 calc(33% - 20px);
    margin: 0 10px;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group-body {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #DDD;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group-heading {
    margin-bottom: 10px;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .item-body {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #DDD;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .col-item {
    flex: 1 1 calc(50% - 20px);
    margin: 0 10px;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .group {
    padding: 0 15px;
    margin-bottom: 10px;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .item-heading {
    padding: 6px;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"] .col-item {
    flex: 1 1 100%;
    border-bottom: 1px solid #DDD;
    margin: 0;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"] .col-heading {
    padding: 10px;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"] .col-body {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"]  .item-body {
    display: block;
    border: none;
}


.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"]  .item-body {
    height: calc(100% - 35px);
}
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"] .col-body {
    height: calc(100% - 10px);
}
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"] .item-body > .col-viz {
    height: 100%!important;
}
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .group-heading,
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .col-heading,
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .item-heading {
    display: none;
}
.d3view-global-exporting .d3view-viz[data-chart-type="grouped_boxplot"] .group {
    height: calc(100% - 10px);
    overflow: hidden;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"][data-itemsviewtype="wrap"] .group-body {
    border: none;
    flex-wrap: wrap;
}
.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"][data-itemsviewtype="wrap"] .col-item {
    flex: 0 0 calc(33% - 20px);
    border: 1px solid #DDD;
    margin: 10px;
}

.d3view-viz[data-chart-type="grouped_boxplot"] .group[data-groupsviewtype="side-by-side"][data-itemsviewtype="wrap"] .group-item {
    /*flex: 1 0 calc(25% - 25px) !important;*/
}

.d3view-viz[data-chart-type="barchart-horizontal"] .modern-hbar .hbar-row {
    display: flex;
    padding: 8px 4px;
    margin-top: 5px;
    border-bottom: 1px solid #DDD;
}
.d3view-viz[data-chart-type="barchart-horizontal"] .viz-container > div.chart-container {
    height: calc(100% - 34px);
}
.d3view-viz[data-chart-type="barchart-horizontal"] .modern-hbar {
    margin: 5px 20px;
    height: calc(100% - 10px);
    overflow: auto;
}
.d3view-viz[data-chart-type="barchart-horizontal"] .modern-hbar .bar-right {
    position: relative;
}
.d3view-viz[data-chart-type="barchart-horizontal"] .modern-hbar .bar-rect {
    position: absolute;
    height: 20px;
}
.d3view-viz[data-chart-type="barchart-horizontal"] .modern-hbar .bar-text {
    position: absolute;
    color: #FFF;
    pointer-events: none;
}

.d3view-viz .imageann-viz.hasImage {
    min-height: 60px;
}
.d3view-viz .imageann-viz.hasImage div.gallery_container .single_image_gallery .gifplayer-container {
    height: calc(100% - 0px);
    margin: 0!important;
}

/* --- Image caption (imageannotator) --- */
.imageann-viz .imageann-caption {
    padding: 12px 20px;
    text-align: center;
    background: var(--d3v-bg-secondary, #f4f5f7);
    border-top: 2px solid var(--d3v-border-color, #dee2e6);
    flex-shrink: 0;
}
.imageann-viz .imageann-caption-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a1a2e);
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.imageann-viz .imageann-caption-subtext {
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    color: var(--d3v-text-secondary, #6c757d);
    margin-top: 3px;
    letter-spacing: 0.01em;
}

/* --- Image caption (imagegallery) --- */
.image_gallery .ig-caption {
    padding: 10px 16px;
    text-align: center;
    background: var(--d3v-bg-secondary, #f4f5f7);
    border-top: 2px solid var(--d3v-border-color, #dee2e6);
    flex-shrink: 0;
}
.image_gallery .ig-caption-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a1a2e);
    line-height: 1.5;
}
.image_gallery .ig-caption-subtext {
    font-size: 12px;
    font-style: italic;
    color: var(--d3v-text-secondary, #6c757d);
    margin-top: 3px;
}
.image_gallery .gifplayer-container.has-caption > .img {
    display: flex;
    flex-direction: column;
}
.image_gallery .gifplayer-container.has-caption > .img > .thumbnail-body {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

/** Added by shashank2104 on 2026-06-03 - R0-3678 - exported image_gallery image fit.
 *  During reporter PPT export the image_gallery widget paints each photo with
 *  `max-width:100%; max-height:100%;` only — which means a small source image
 *  (e.g. a 150x100 thumbnail returned by the response server because the full-res
 *  file was never uploaded) paints at its natural 150x100 size in the middle of a
 *  large slide cell, looking tiny. The four full-res Honda cars rendered fine; the
 *  one car whose response asset is only the thumbnail (2018 ODYSSEY in the NHTSA
 *  v3 deck) looked broken. Force the exported image to fill its container while
 *  preserving aspect ratio so even thumbnail-only assets read as a full slide
 *  image. Scoped to .d3view-exporting so the interactive simlytiks view keeps the
 *  natural-size behavior. **/
.d3view-exporting .image_gallery .gifplayer-container .thumbnail-body img.imageSrc,
.d3view-global-exporting .image_gallery .gifplayer-container .thumbnail-body img.imageSrc,
.d3view-exporting .image_gallery .ig-pair-cell .thumbnail-body img.imageSrc,
.d3view-global-exporting .image_gallery .ig-pair-cell .thumbnail-body img.imageSrc {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    /** Updated by shashank2104 on 2026-06-10 - NOT !important on display so the
     *  imageannotator can keep its base <img.imageSrc> hidden during export. The
     *  annotator sets inline `display:none` on the base img (it exports via its SVG
     *  <image> overlay, which carries the zoom/pan transform + annotations); a
     *  `display:block !important` here would override that inline none and force the
     *  un-transformed base photo back into the export. Standalone gallery/gifplayer
     *  has no inline display, so plain `display: block` still applies to them. **/
    display: block;
}

/** ====================================================================================
 *  ImageAnnotator premium callout system — SIM-1002 / DVFIV-2047 (Option A · Refined Callout)
 *  Added by shashank2104 on 2026-06-12.
 *  Self-scoped on the JS-stamped [data-imgann-callouts] attribute + the .ann-card /
 *  .imageann-index classes (the .dv-viz-toolbar pattern) so the rules apply in the
 *  Simlytiks view, the fullscreen modal AND measurement clones — and never to
 *  default/compact renders, which don't get the classes.
 *  ==================================================================================== **/
.image_annotations[data-imgann-callouts] {
    --iac-ink: var(--d3v-text-primary, #1e293b);
    --iac-ink-2: #334155;
    --iac-ink-3: #64748b;
    --iac-tick: #7a8699;
    --iac-hair: #e5eaf2;
    --iac-band: #eef2f8;
    --iac-surface-2: #f7f9fc;
    --iac-acc: #3b82f6;
}

/* --- layout when the index table is docked --- */
.image_annotations[data-imgann-table] { display: flex; }
.image_annotations[data-imgann-table="below"] { flex-direction: column; }
.image_annotations[data-imgann-table="side"] { flex-direction: row; }
.image_annotations[data-imgann-table] .svg-container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: auto !important;
}
.image_annotations[data-imgann-table="below"] .imageann-index-table {
    flex: 0 0 auto;
    padding: 4px 10px 8px;
}
/* compact density: the JS applies this when the table exceeds its height budget */
.imageann-index-table.imgann-compact table.imageann-index th { padding: 4px 10px; font-size: 8.5px; }
.imageann-index-table.imgann-compact table.imageann-index td { padding: 2px 10px; font-size: 10.5px; }
.imageann-index-table.imgann-compact .idx-num { width: 15px; height: 15px; font-size: 8.5px; }
/* scrollbar is the last resort (JS sets the max-height budget inline) */
.image_annotations[data-imgann-table="below"] .imageann-index-table.imgann-scroll {
    overflow: auto;
}
body.d3view-exporting .imageann-index-table.imgann-scroll,
body.d3view-global-exporting .imageann-index-table.imgann-scroll {
    max-height: none !important;
    overflow: visible !important;
}
.image_annotations[data-imgann-table="side"] .imageann-index-table {
    flex: 0 0 320px;
    max-width: 42%;
    overflow: auto;
    border-left: 1px solid var(--iac-hair, #e5eaf2);
    padding: 8px 10px;
    background: var(--iac-surface-2, #f7f9fc);
}

/* --- premium card labels --- */
div.ann_label.ann-card {
    background: #fff !important;
    border: 1px solid #e5eaf2 !important;
    border-left: 3px solid var(--ann-acc, #3b82f6) !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    padding: 6px 10px 6px 9px !important;
    min-width: 110px;
    max-width: 235px;
    width: max-content;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.25;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.ann-card .ann-card-nm {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}
.ann-card .ann-card-vl {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 2px;
}
.ann-card .ann-card-vl b {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .01em;
}
.ann-card .ann-card-pk,
.imageann-index-table .idx-pk {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
}
.ann-card .ann-card-st {
    margin-left: auto;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}
.ann-card .ann-card-ch {
    font-size: 9px;
    font-family: Menlo, Consolas, monospace;
    color: #94a3b8;
    margin-top: 2px;
    max-width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- leader lines + anchor markers --- */
.image_annotations path.ann-leader {
    fill: none;
    stroke: #7a8699;
    stroke-width: 1.25px;
    opacity: .85;
    pointer-events: none;
    transition: opacity .15s ease;
}
.image_annotations g.ann-marker .ann-marker-shape {
    stroke: #fff;
    stroke-width: 2px;
}
.image_annotations g.ann-marker text.ann-marker-num {
    fill: #fff;
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.image_annotations g.ann-marker circle.ann-pulse-ring { opacity: 0; }
.image_annotations[data-imgann-pulse] g.ann-marker circle.ann-pulse-ring {
    animation: iacPulse 2.4s ease-out infinite;
}
@keyframes iacPulse {
    0% { opacity: .35; r: 10; }
    70% { opacity: 0; r: 26; }
    100% { opacity: 0; r: 26; }
}
/* exports: a mid-animation pulse ring frozen by the snapshot reads as a ghost dot */
body.d3view-exporting .image_annotations g.ann-marker circle.ann-pulse-ring,
body.d3view-global-exporting .image_annotations g.ann-marker circle.ann-pulse-ring { display: none; }

/* --- hover pairing: label ⟷ marker ⟷ leader ⟷ table row --- */
.image_annotations .co-dim { opacity: .25; transition: opacity .15s ease; }
.image_annotations g.ann.co-active .ann_label.ann-card {
    box-shadow: 0 4px 10px rgba(15, 23, 42, .14);
    border-color: #3b82f6 !important;
}
.image_annotations path.ann-leader.co-active {
    stroke: #2563eb;
    stroke-width: 1.75px;
    opacity: 1;
}
.image_annotations g.ann-marker.co-active .ann-marker-shape { stroke-width: 3px; }

/* --- numbered sensor index table --- */
.imageann-index-table table.imageann-index {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 11.5px;
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.imageann-index-table table.imageann-index th {
    background: #eef2f8;
    color: #334155;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 12px;
    border-bottom: 1px solid #e5eaf2;
}
.imageann-index-table table.imageann-index td {
    padding: 5px 12px;
    border-bottom: 1px solid #f0f3f8;
    color: #334155;
    vertical-align: middle;
    /* explicit: header and body stay aligned regardless of host/report table styles */
    text-align: left;
}
.imageann-index-table table.imageann-index th.idx-num-col,
.imageann-index-table table.imageann-index td:first-child {
    text-align: center;
    width: 44px;
}
.imageann-index-table table.imageann-index tbody tr:last-child td { border-bottom: none; }
.imageann-index-table table.imageann-index tbody tr:hover td,
.imageann-index-table table.imageann-index tbody tr.co-active td { background: #eaf2fe; }
.imageann-index-table .idx-num {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
.imageann-index-table .idx-name { font-weight: 700; color: #1e293b; }
.imageann-index-table .idx-channel {
    font-family: Menlo, Consolas, monospace;
    font-size: 10px;
    color: #64748b;
}
.imageann-index-table .idx-value { font-weight: 700; color: #1e293b; white-space: nowrap; }
.imageann-index-table .ann-card-st {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* --- export grade (Option D): bigger type, straight calm leaders, no pulse, no channel line --- */
body.d3view-exporting .ann-card .ann-card-nm,
body.d3view-global-exporting .ann-card .ann-card-nm { font-size: 14.5px; }
body.d3view-exporting .ann-card .ann-card-vl b,
body.d3view-global-exporting .ann-card .ann-card-vl b { font-size: 16px; }
body.d3view-exporting .ann-card .ann-card-st,
body.d3view-global-exporting .ann-card .ann-card-st { font-size: 10px; }
body.d3view-exporting .ann-card .ann-card-ch,
body.d3view-global-exporting .ann-card .ann-card-ch { display: none; }
body.d3view-exporting .image_annotations path.ann-leader,
body.d3view-global-exporting .image_annotations path.ann-leader {
    stroke-width: 1.75px;
    stroke: #64748b;
}
body.d3view-exporting .image_annotations g.ann-marker circle.ann-pulse-ring,
body.d3view-global-exporting .image_annotations g.ann-marker circle.ann-pulse-ring {
    animation: none !important;
    opacity: 0 !important;
}
body.d3view-exporting .imageann-index-table table.imageann-index,
body.d3view-global-exporting .imageann-index-table table.imageann-index { font-size: 13.5px; }
body.d3view-exporting .imageann-index-table table.imageann-index th,
body.d3view-global-exporting .imageann-index-table table.imageann-index th { font-size: 11px; }

.d3view-viz[data-charttype="3dbar"] .column-annotations {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 200px;
    /* display: flex; */
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    border: 1px solid transparent;
}
.d3view-viz[data-charttype="3dbar"] .column-annotations:hover {
    border-color: #DDD;
}
.d3view-viz[data-charttype="3dbar"] .column-annotations .ui-resizable-handle {
    display: none!important;
}
.d3view-viz[data-charttype="3dbar"] .column-annotations:hover .ui-resizable-handle {
    display: block!important;
}

.d3view-viz-tooltip .tooltip-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-viz[data-charttype="tree"] .plot-txt.ui-selected .node-name,
.d3view-viz[data-charttype="tree"] .plot-txt.temp-ui-selected .node-name {
    color: #428bca;
}
.d3view-viz[data-charttype="tree"] .plot-txt.ui-selected .badge,
.d3view-viz[data-charttype="tree"] .plot-txt.temp-ui-selected .badge {
    background-color: #428bca;
    color: #FFF;
}


.d3view-viz._tiny svg .axis .tick text,
.d3view-viz._tiny svg .yLabel,
.d3view-viz._tiny svg .xLabel {
    font-size: 10px!important;
}
.d3view-viz._tiny .bubble-buttons {
    opacity: 0
}
.d3view-viz._tiny:hover .bubble-buttons {
    opacity: 1;
}

/** Added by shashank2104 on 2026-06-03 - SIM-1002 - bubble interaction toolbar now sits in a
 *  horizontal header above the canvas (mirrors Newton's simple-settings header) instead of
 *  floating in the right gutter over the secondary-axis labels. **/
.bubble-chart-container .bubble-simple-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px;
    min-height: 34px;
    flex: 0 0 auto;
}
.bubble-chart-container .bubble-simple-settings-header .bubble-buttons {
    display: inline-flex;
    gap: 4px;
}
.bubble-chart-container .bubble-simple-settings-header .bubble-buttons .btn.btn-selected {
    background: var(--d3v-accent-soft, #e8f0fe);
    color: var(--d3v-accent, #1a73e8);
    border-color: var(--d3v-accent, #1a73e8);
}
/* tiny tiles (dashboard previews) keep their full chart area — hide the toolbar entirely */
.d3view-viz._tiny .bubble-simple-settings-header {
    display: none;
}
/* exports (reporter PPT / cert PDF) get the full canvas and no interactive chrome */
.d3view-exporting .bubble-simple-settings-header {
    display: none;
}

/** Added by shashank2104 on 2026-06-27 - R0-3864 - floating chip shown over the top-right of the
 *  canvas while a Zoom/Highlight interaction mode is active. Click to exit the mode (back to default). **/
.bubble-chart-container .bubble-mode-chip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--d3v-accent, #3B82F6);
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-full, 9999px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
    cursor: pointer;
    user-select: none;
    transition: var(--d3v-t-fast, all 0.15s ease);
}
.bubble-chart-container .bubble-mode-chip:hover {
    background: var(--d3v-accent, #3B82F6);
    color: var(--d3v-text-inverse, #fff);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, 0.10));
}
.bubble-chart-container .bubble-mode-chip .bubble-mode-chip-icon {
    font-size: 12px;
}
.bubble-chart-container .bubble-mode-chip .bubble-mode-chip-close {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}
.bubble-chart-container .bubble-mode-chip:hover .bubble-mode-chip-close {
    opacity: 1;
}
/* tiny tiles (dashboard previews) and exports: no interactive chrome */
.d3view-viz._tiny .bubble-mode-chip,
.d3view-exporting .bubble-mode-chip {
    display: none;
}

.d3view-viz._tiny .legends-wrapper .legend-header {
    display: none;
}
.d3view-viz._tiny div.d3view-legends-container.top-legends .legends-body {
    max-height: 35px;
}
.d3view-viz._tiny .legends-wrapper .scroll_button {
    opacity: 0;
}
.d3view-viz._tiny .legends-wrapper:hover .scroll_button {
    opacity: 1;
}
.d3view-viz._tiny > .viz-legends-container div.d3view-legends-container div.legends-body {
    max-height: 35px;
}

.d3view-viz .media-img-container[data-align="left"] {
    flex-direction: row-reverse!important;
}
.d3view-viz .media-img-container[data-align="top"] {
    flex-direction: column-reverse!important;
}

.d3view-viz .viz-container.__main.hbarchart .table-container {
    font-size: 120%;
}

.d3view-viz[data-chart-type="taguchiplots"] div.simlytiks[data-render-in-modal="false"] .sl-main-window:not(.pl-fixed) {
    flex: 0 0 100%;
}

.d3view-viz[data-chart-type="taguchiplots"] svg.taguchi-svg .tick text {
    font-size: 1em;
}

div.simlytiks .viewContent[data-vizmodel-type="pagelink_table"] .viz-links .pl-label-modern,
div.simlytiks .viewContent[data-vizmodel-type="pagelink_table"] .viz-types .pl-label-modern {
    color: #000;
}

.d3view-viz[data-chart-type="pagelink_table"] .handsontable .wtBorder {
    display: none !important;
}

.d3view-viz[data-chart-type="pagelink_table"] .handsontable .current,
.d3view-viz[data-chart-type="pagelink_table"] .handsontable .area,
.d3view-viz[data-chart-type="pagelink_table"] .handsontable .highlight {
    background: none !important;
}

.d3view-viz[data-chart-type="bioimpact"] .viz-container.__main {
    /*display: flex;*/
    /*justify-content: center;*/
}
.d3view-viz[data-chart-type="bioimpact"] .viz-container.__main .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.d3view-viz[data-chart-type="bioimpact"] .viz-container.__main  svg {
    overflow: visible;
}
.d3view-viz[data-chart-type="bioimpact"] .viz-container.__main  svg text.bioimpact-value {
    font-size: 12px;
}

.d3view-viz[data-chart-type="newton_slider"] .viz-container.__main  svg.newton-gridlines .newton-tooltip line.mouseline {
    stroke-width: 4px;
}

/* Graph Node Highlighting Styles */

/* Selected node (the one clicked from search) */
div.graph-container .node.selected circle {
    stroke: #ff6b6b !important;
    stroke-width: 4px !important;
    opacity: 1 !important;
}

/* Connected nodes (connected to selected node) */
div.graph-container .node.connected circle {
    opacity: 1 !important;
}

/* Dimmed nodes (not connected to selected node) */
div.graph-container .node.dimmed circle {
    opacity: 0.3 !important;
}

/* Highlighted links (connected to selected node) */
div.graph-container .link.highlighted {
    stroke: #999 !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
}

/* Dimmed links (not connected to selected node) */
div.graph-container .link.dimmed {
    stroke: #999 !important;
    stroke-width: 2px !important;
    opacity: 0.2 !important;
}

/* Ensure labels remain visible during highlighting */
div.graph-container .node.selected text,
div.graph-container .node.connected text,
div.graph-container .node.dimmed text {
    opacity: 1 !important;
    fill: #000 !important;
}

/* ════════════════════════════════════════════════════════
   RelationshipBuilder Visualizer
   Added by shashank2104 on 03/30/2026 - DW-2787
   ════════════════════════════════════════════════════════ */

.d3view-relationshipbuilder {
    position: relative;
    overflow: hidden;
    background: var(--d3v-bg-secondary, #F8FAFC);
}

/* Zoom layer — wraps SVG + nodes, receives CSS transform */
.d3view-relationshipbuilder .rb-zoom-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

/* SVG edge layer — overflow:visible so edges to nodes outside the
   container viewport are not clipped by SVG's default overflow:hidden */
.d3view-relationshipbuilder .rb-edge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}
.d3view-relationshipbuilder .rb-edge-svg path {
    pointer-events: stroke;
    cursor: pointer;
}

/* Nodes container — pointer-events:none so SVG edges beneath are clickable */
.d3view-relationshipbuilder .rb-nodes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Node cards — pointer-events:auto since parent container is none */
.d3view-relationshipbuilder .rb-node {
    position: absolute;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-lg, 10px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    box-shadow: var(--d3v-sh-sm, 0 1px 4px rgba(0,0,0,0.06));
    user-select: none;
    transition: box-shadow var(--d3v-t-fast, 0.12s);
    z-index: 3;
    pointer-events: auto;
}
.d3view-relationshipbuilder .rb-node:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 16px rgba(0,0,0,0.08));
}

/* Node header */
.d3view-relationshipbuilder .rb-node-header {
    padding: 10px 14px;
    border-radius: var(--d3v-r-lg, 10px) var(--d3v-r-lg, 10px) 0 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--d3v-text-inverse, #fff);
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}
.d3view-relationshipbuilder .rb-node-header:active {
    cursor: grabbing;
}
.d3view-relationshipbuilder .rb-node-icon {
    font-size: 14px;
}

/* Column count badge in header */
.d3view-relationshipbuilder .rb-col-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.25);
    padding: 1px 6px;
    border-radius: var(--d3v-r-full, 99px);
    min-width: 20px;
    text-align: center;
}

/* Record count badge in header */
.d3view-relationshipbuilder .rb-record-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    padding: 1px 7px;
    border-radius: var(--d3v-r-full, 99px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}
.d3view-relationshipbuilder .rb-record-count .fa {
    font-size: 9px;
    opacity: 0.8;
}
/* Drill-down affordance — appears only when host wires onRecordCountClick */
.d3view-relationshipbuilder .rb-record-count-clickable {
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}
.d3view-relationshipbuilder .rb-record-count-clickable:hover {
    background: rgba(255,255,255,0.32);
    transform: translateY(-1px);
}

/* Search input in node */
.d3view-relationshipbuilder .rb-node-search {
    padding: 6px 10px;
    border-bottom: 1px solid var(--d3v-n-100, #F1F5F9);
}
.d3view-relationshipbuilder .rb-search-input {
    width: 100%;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 4px 8px;
    font-size: 11px;
    outline: none;
    background: var(--d3v-bg-secondary, #F8FAFC);
    color: var(--d3v-text-primary, #334155);
    transition: border-color var(--d3v-t-fast, 0.12s);
    pointer-events: auto;
}
.d3view-relationshipbuilder .rb-search-input:focus {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}

/* Collapsed/hidden column rows */
.d3view-relationshipbuilder .rb-col-hidden,
.d3view-relationshipbuilder .rb-col-search-hidden {
    display: none !important;
}

/* Expand/collapse toggle */
.d3view-relationshipbuilder .rb-col-expander {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-accent, #3B82F6);
    cursor: pointer;
    text-align: center;
    transition: background var(--d3v-t-fast, 0.1s);
    border-top: 1px solid var(--d3v-n-100, #F1F5F9);
    pointer-events: auto;
}
.d3view-relationshipbuilder .rb-col-expander:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.d3view-relationshipbuilder .rb-col-expander i {
    margin-right: 4px;
    font-size: 9px;
}

/* Column rows */
.d3view-relationshipbuilder .rb-col-row {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid var(--d3v-n-100, #F1F5F9);
    font-size: 11px;
    color: var(--d3v-text-primary, #334155);
    position: relative;
    transition: background var(--d3v-t-fast, 0.1s);
}
.d3view-relationshipbuilder .rb-col-row:last-child {
    border-bottom: none;
    border-radius: 0 0 var(--d3v-r-lg, 10px) var(--d3v-r-lg, 10px);
}
.d3view-relationshipbuilder .rb-col-row:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
}

/* Column labels */
.d3view-relationshipbuilder .rb-col-icon {
    width: 18px;
    font-size: 9px;
    color: var(--d3v-text-muted, #94A3B8);
    font-weight: 600;
    flex-shrink: 0;
    text-align: center;
}
.d3view-relationshipbuilder .rb-col-icon.rb-pk {
    color: var(--d3v-warning, #F59E0B);
}
.d3view-relationshipbuilder .rb-col-icon.rb-fk {
    color: var(--d3v-accent, #3B82F6);
}
.d3view-relationshipbuilder .rb-col-name {
    flex: 1;
    font-weight: 500;
}
.d3view-relationshipbuilder .rb-col-type {
    font-size: 9px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-right: 8px;
}

/* Port dots */
.d3view-relationshipbuilder .rb-port {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--d3v-border-strong, #CBD5E1);
    border: 2px solid var(--d3v-bg-primary, #fff);
    box-shadow: 0 0 0 1px var(--d3v-border-strong, #CBD5E1);
    cursor: crosshair;
    transition: all var(--d3v-t-fast, 0.12s);
    flex-shrink: 0;
}
.d3view-relationshipbuilder .rb-port:hover,
.d3view-relationshipbuilder .rb-port.active {
    background: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
    transform: scale(1.3);
}
.d3view-relationshipbuilder .rb-port-left {
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}
.d3view-relationshipbuilder .rb-port-left:hover,
.d3view-relationshipbuilder .rb-port-left.active {
    transform: translateY(-50%) scale(1.3);
}

/* Edge paths */
.d3view-relationshipbuilder .rb-edge-path {
    fill: none;
    stroke: var(--d3v-text-muted, #94A3B8);
    stroke-width: 2;
    transition: stroke var(--d3v-t-fast, 0.12s), stroke-width var(--d3v-t-fast, 0.12s);
}
.d3view-relationshipbuilder .rb-edge-path:hover {
    stroke: var(--d3v-accent, #3B82F6);
    stroke-width: 3;
}
.d3view-relationshipbuilder .rb-edge-path.selected {
    stroke: var(--d3v-danger, #EF4444);
    stroke-width: 3;
    stroke-dasharray: 6 3;
}

/* Temp drag edge */
.d3view-relationshipbuilder .rb-temp-edge {
    fill: none;
    stroke: var(--d3v-accent, #3B82F6);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    opacity: 0.6;
}

/* Delete button */
.d3view-relationshipbuilder .rb-delete-btn {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d3v-danger, #EF4444);
    color: var(--d3v-text-inverse, #fff);
    border: 2px solid var(--d3v-bg-primary, #fff);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.15));
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 20;
    line-height: 1;
}
.d3view-relationshipbuilder .rb-delete-btn.visible {
    display: flex;
}

/* Rules panel */
.d3view-relationshipbuilder .rb-rules-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 260px;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-lg, 10px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    box-shadow: var(--d3v-sh-md, 0 4px 16px rgba(0,0,0,0.06));
    z-index: 15;
    overflow: hidden;
}
.d3view-relationshipbuilder .rb-rules-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--d3v-text-secondary, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--d3v-n-100, #F1F5F9);
    display: flex;
    align-items: center;
    gap: 6px;
}
.d3view-relationshipbuilder .rb-rules-body {
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}
.d3view-relationshipbuilder .rb-rules-empty {
    padding: 12px;
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    text-align: center;
}
.d3view-relationshipbuilder .rb-rule-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--d3v-r-md, 8px);
    font-size: 11px;
    color: var(--d3v-text-primary, #334155);
    transition: background var(--d3v-t-fast, 0.1s);
    cursor: default;
}
.d3view-relationshipbuilder .rb-rule-pill:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.d3view-relationshipbuilder .rb-rule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d3v-success, #16A34A);
    flex-shrink: 0;
}
.d3view-relationshipbuilder .rb-rule-text {
    flex: 1;
    font-weight: 500;
}
.d3view-relationshipbuilder .rb-rule-type {
    font-size: 9px;
    color: var(--d3v-text-muted, #94A3B8);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
}

/* Empty state */
.d3view-relationshipbuilder .rb-empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
}
.d3view-relationshipbuilder .rb-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

/** Added by shashank2104 on 2026-04-05 - SIM-997 - Placeholder "+Add Data" node **/
.d3view-relationshipbuilder .rb-node-placeholder {
    border: 2px dashed var(--d3v-border-strong, #CBD5E1);
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-radius: var(--d3v-r-lg, 10px);
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.12s), box-shadow var(--d3v-t-fast, 0.12s), background var(--d3v-t-fast, 0.12s);
    min-height: 140px;
}
.d3view-relationshipbuilder .rb-node-placeholder:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
    box-shadow: var(--d3v-sh-md, 0 4px 16px rgba(0,0,0,0.08));
}
.d3view-relationshipbuilder .rb-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 140px;
    padding: 24px 16px;
    gap: 8px;
    text-align: center;
}
.d3view-relationshipbuilder .rb-placeholder-icon {
    font-size: 36px;
    color: var(--d3v-accent, #3B82F6);
    opacity: 0.7;
    transition: opacity var(--d3v-t-fast, 0.12s), transform var(--d3v-t-fast, 0.12s);
}
.d3view-relationshipbuilder .rb-node-placeholder:hover .rb-placeholder-icon {
    opacity: 1;
    transform: scale(1.08);
}
.d3view-relationshipbuilder .rb-placeholder-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}
.d3view-relationshipbuilder .rb-placeholder-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    line-height: 1.3;
}

/** Added by shashank2104 on 2026-04-02 - CS-267 - PedProTable GTR zone demarcation styles **/
@keyframes pedpro-dash-march {
    to { stroke-dashoffset: -12; }
}
.pedpro-zone-outline {
    animation: pedpro-dash-march 0.6s linear infinite;
}
.pedpro-compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.pedpro-badge-pass {
    background: #dcfce7;
    color: #166534;
}
.pedpro-badge-fail {
    background: #fee2e2;
    color: #991b1b;
}

/* ── AI Zone Analysis button ── */
.pedpro-ai-analysis-btn {
    background: #5b6abf !important;
    color: #fff !important;
    border: 1px solid #4a59a8 !important;
    font-weight: 600;
    border-radius: 3px;
    transition: background 0.15s;
}
.pedpro-ai-analysis-btn:hover {
    background: #4a59a8 !important;
}
.pedpro-ai-analysis-btn.active {
    background: #3f4d96 !important;
    border-color: #354185 !important;
}
.pedpro-ai-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pedpro-ai-spin 0.6s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}
@keyframes pedpro-ai-spin { to { transform: rotate(360deg); } }

/* ── AI Assessment Panel ── */
.pedpro-ai-panel {
    position: absolute;
    bottom: 50px;
    right: 12px;
    width: 320px;
    background: #fff;
    color: #333;
    border-radius: 4px;
    font-size: 12px;
    z-index: 20;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pedpro-ai-panel-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: 12px;
    color: #5b6abf;
    cursor: move;
}
.pedpro-ai-icon {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #5b6abf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
}
.pedpro-ai-refresh {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.4;
    font-size: 11px;
    line-height: 1;
}
.pedpro-ai-refresh:hover { opacity: 0.8; }
.pedpro-ai-close {
    cursor: pointer;
    opacity: 0.4;
    font-size: 14px;
    line-height: 1;
    margin-left: 6px;
}
.pedpro-ai-close:hover { opacity: 0.8; }
.pedpro-ai-panel-body {
    padding: 10px 12px;
    flex: 1;
    overflow-y: auto;
}

/* Risk score */
.pedpro-ai-risk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pedpro-ai-risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.pedpro-ai-risk-low    { background: #e6f9ee; color: #1a7a3a; }
.pedpro-ai-risk-medium { background: #fef3cd; color: #856404; }
.pedpro-ai-risk-high   { background: #fce4e4; color: #a71d1d; }
.pedpro-ai-risk-bar {
    flex: 1;
    height: 5px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}
.pedpro-ai-risk-fill {
    height: 100%;
    border-radius: 2px;
}

/* Assessment */
.pedpro-ai-assessment {
    margin-bottom: 10px;
    line-height: 1.5;
    color: #555;
    font-size: 11px;
}

/* Zone tags */
.pedpro-ai-zones-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.pedpro-ai-zone-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
}
.pedpro-ai-zone-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.pedpro-ai-zone-compliant     { background: #e6f9ee; color: #1a7a3a; }
.pedpro-ai-zone-compliant .pedpro-ai-zone-dot     { background: #22c55e; }
.pedpro-ai-zone-marginal      { background: #fef3cd; color: #856404; }
.pedpro-ai-zone-marginal .pedpro-ai-zone-dot      { background: #eab308; }
.pedpro-ai-zone-non-compliant { background: #fce4e4; color: #a71d1d; }
.pedpro-ai-zone-non-compliant .pedpro-ai-zone-dot { background: #ef4444; }

/* Anomalies */
.pedpro-ai-anomalies-section { margin-bottom: 10px; }
.pedpro-ai-anomalies-title {
    font-size: 11px;
    font-weight: 600;
    color: #c27803;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pedpro-ai-anomaly-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 7px;
    background: #fef9ed;
    border: 1px solid #fde68a;
    border-radius: 3px;
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.4;
    color: #555;
}
.pedpro-ai-anomaly-icon { color: #d97706; flex-shrink: 0; margin-top: 1px; font-size: 10px; }

/* Recommendations */
.pedpro-ai-recs-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #5b6abf;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0 2px;
}
.pedpro-ai-recs-toggle:hover { color: #3f4d96; }
.pedpro-ai-recs-toggle .pedpro-ai-chevron { transition: transform 0.2s; font-size: 9px; }
.pedpro-ai-recs-toggle.open .pedpro-ai-chevron { transform: rotate(180deg); }
.pedpro-ai-recs-list {
    margin: 4px 0 0 0;
    padding: 0 0 0 14px;
    list-style: none;
    display: none;
}
.pedpro-ai-recs-list.pedpro-ai-recs-open { display: block; }
.pedpro-ai-recs-list li {
    position: relative;
    padding: 2px 0 2px 10px;
    font-size: 10px;
    color: #666;
    line-height: 1.5;
}
.pedpro-ai-recs-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #5b6abf;
}

/* Divider */
.pedpro-ai-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/* Loading state */
.pedpro-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    color: #888;
}
.pedpro-ai-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e5e5;
    border-top-color: #5b6abf;
    border-radius: 50%;
    animation: pedpro-ai-spin 0.7s linear infinite;
}
.pedpro-ai-loading-text { font-size: 12px; color: #555; }
.pedpro-ai-loading-sub { font-size: 10px; color: #999; }

/* Error state */
.pedpro-ai-error { color: #c0392b; padding: 10px 0; font-size: 11px; }

/* Anomaly markers pulsing */
@keyframes pedpro-ai-anomaly-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.pedpro-ai-anomaly-marker {
    animation: pedpro-ai-anomaly-pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   DW-2832 — IIHS Structural Rating
   All rules scoped under .iihs-container
   ============================================================ */
.iihs-container { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.iihs-container .iihs-chart-container { min-height: 0; }

/* View-mode visibility */
.iihs-container[data-view-mode="chart"] .iihs-rating-header,
.iihs-container[data-view-mode="chart"] .iihs-rating-tables { display: none; }
.iihs-container[data-view-mode="all"] .iihs-rating-tables { display: none; }
.iihs-container[data-view-mode="tables"] .iihs-chart-container { display: none; }
.iihs-container[data-view-mode="tables"] .iihs-rating-tables { display: grid; }
/* In tables mode the chart is hidden, so the floating Add Points / Settings
   dropdowns (which only act on the SVG) are irrelevant — hide them. */
.iihs-container[data-view-mode="tables"] .settings-container { display: none!important; }

/* Hide individual rating regions when their show flag is off */
.iihs-container .iihs-rating-header.is-empty { display: none; }

/* ----- Rating header (table + KPI cards) ----- */
.iihs-container .iihs-rating-header {
    padding: 8px 12px 4px 12px;
    flex: 0 0 auto;
}
.iihs-container .iihs-rating-wrap {
    max-width: 720px;
    margin: 0 auto 10px auto;
    background: #ffffff;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.iihs-container .iihs-rating-title {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #5a6677;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
    border-bottom: 1px solid #e2e6ec;
    padding: 10px 14px;
    margin: 0;
}
.iihs-container .iihs-rating-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: none;
    font-size: 12px;
    background: #ffffff;
    box-shadow: none;
    border-radius: 0;
}
.iihs-container .iihs-rating-table th,
.iihs-container .iihs-rating-table td {
    border: none;
    border-bottom: 1px solid #eef1f5;
    padding: 10px 14px;
    text-align: center;
    vertical-align: middle;
}
.iihs-container .iihs-rating-table tr:last-child td {
    border-bottom: none;
}
.iihs-container .iihs-rating-table thead th {
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #8a93a3;
    padding: 8px 14px 6px 14px;
    border-bottom: 1px solid #e2e6ec;
}
.iihs-container .iihs-rating-table .iihs-row-label {
    text-align: left;
    background: transparent;
    font-weight: 700;
    color: #1a2330;
    width: 44%;
}
.iihs-container .iihs-rating-table .iihs-section-row td {
    background: #f7f9fc;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #8a93a3;
    padding: 6px 14px;
    text-align: left;
    border-top: 1px solid #eef1f5;
}
.iihs-container .iihs-rating-table tbody tr[data-iihs-tip]:hover td:not(.iihs-rating-cell) {
    background: rgba(37, 99, 235, 0.035);
}
.iihs-container .iihs-rating-cell {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Rating colour scheme — branded IIHS green/yellow/orange/red */
.iihs-container .iihs-rating-good       { background: #c8f7d4; color: #065f1f; }
.iihs-container .iihs-rating-acceptable { background: #fff7b3; color: #6b5400; }
.iihs-container .iihs-rating-marginal   { background: #ffdfb3; color: #6b3a00; }
.iihs-container .iihs-rating-poor       { background: #ffc9d2; color: #7a0014; }

/* Hint shown when compartments aren't configured */
.iihs-container .iihs-rating-hint {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 14px;
    background: #fff7e6;
    border: 1px dashed #f0c674;
    border-radius: 4px;
    color: #6b4a00;
    font-size: 12px;
    text-align: center;
}

/* ----- KPI compartment cards ----- */
.iihs-container .iihs-kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 720px;
    margin: 6px auto 0 auto;
}
.iihs-container .iihs-comp-card {
    border: 1px solid #e2e6ec;
    border-radius: 6px;
    background: #ffffff;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.iihs-container .iihs-comp-card h4 {
    margin: 0 0 6px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a6677;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.iihs-container .iihs-comp-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.iihs-container .iihs-counts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.iihs-container .iihs-count-cell {
    text-align: center;
    padding: 4px 2px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}
.iihs-container .iihs-count-cell .iihs-count-num {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}
.iihs-container .iihs-count-cell.iihs-count-good       { background: #ebfaef; color: #065f1f; }
.iihs-container .iihs-count-cell.iihs-count-acceptable { background: #fffbdd; color: #6b5400; }
.iihs-container .iihs-count-cell.iihs-count-marginal   { background: #fff0dd; color: #6b3a00; }
.iihs-container .iihs-count-cell.iihs-count-poor       { background: #fdebef; color: #7a0014; }

/* Sub-header inside compartment cards: "Dimensions per band (N points)" */
.iihs-container .iihs-comp-card .iihs-comp-sub {
    font-size: 9px;
    font-weight: 600;
    color: #8a93a3;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 6px 0;
}

/* ----- Rich tooltip content for the structural rating UI ----- */
.d3view-viz-tooltip .iihs-tip {
    min-width: 220px;
    max-width: 320px;
    font-size: 12px;
    line-height: 1.45;
    color: #1a2330;
}
.d3view-viz-tooltip .iihs-tip-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a6677;
    margin-bottom: 6px;
}
.d3view-viz-tooltip .iihs-tip-rating {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.d3view-viz-tooltip .iihs-tip-rating.iihs-rating-good       { background: #c8f7d4; color: #065f1f; }
.d3view-viz-tooltip .iihs-tip-rating.iihs-rating-acceptable { background: #fff7b3; color: #6b5400; }
.d3view-viz-tooltip .iihs-tip-rating.iihs-rating-marginal   { background: #ffdfb3; color: #6b3a00; }
.d3view-viz-tooltip .iihs-tip-rating.iihs-rating-poor       { background: #ffc9d2; color: #7a0014; }
.d3view-viz-tooltip .iihs-tip-body {
    font-size: 12px;
    color: #1a2330;
    margin-bottom: 6px;
}
.d3view-viz-tooltip .iihs-tip-meta {
    font-size: 11px;
    color: #5a6677;
    border-top: 1px solid #e2e6ec;
    padding-top: 5px;
    margin-top: 5px;
}
.d3view-viz-tooltip .iihs-tip-meta + .iihs-tip-meta {
    border-top: none;
    padding-top: 0;
    margin-top: 2px;
}

/* Make the tip targets feel interactive */
.iihs-container [data-iihs-tip] { cursor: help; }
.iihs-container .iihs-rating-table tr[data-iihs-tip]:hover td { background: rgba(37, 99, 235, 0.04); }
.iihs-container .iihs-side-panel tr[data-iihs-tip]:hover td { background: rgba(37, 99, 235, 0.04); }

/* Per-dimension table: compartment group header rows */
.iihs-container .iihs-side-panel tr.iihs-dim-group td {
    background: #eef2f7;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a2330;
    border-top: 1px solid #c8cfd8;
    border-bottom: 1px solid #c8cfd8;
}
.iihs-container .iihs-side-panel tr.iihs-dim-group:hover td {
    background: #e4ebf3;
}

/* ----- Side-by-side rating tables (viewMode === 'tables') ----- */
.iihs-container .iihs-rating-tables {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    padding: 12px;
}
.iihs-container .iihs-rating-tables .iihs-side-panel {
    background: #ffffff;
    border: 1px solid #e2e6ec;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.iihs-container .iihs-rating-tables .iihs-side-panel h4 {
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1a2330;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
    border-bottom: 1px solid #e2e6ec;
}
.iihs-container .iihs-rating-tables table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.iihs-container .iihs-rating-tables th,
.iihs-container .iihs-rating-tables td {
    border-bottom: 1px solid #eef1f5;
    padding: 6px 10px;
    text-align: left;
}
.iihs-container .iihs-rating-tables thead th {
    background: #f4f6f9;
    font-weight: 700;
    color: #5a6677;
}
.iihs-container .iihs-rating-tables .iihs-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/** Updated by shashank2104 on 2026-05-21 - premium-deck feedback - flatter cards.
 *  Customer feedback: "even more modern with no background but enough spacing so it is
 *  actually readable". Strip the outer card chrome (shadow / border / fill) and per-section
 *  tinted blocks entirely -- the viz now reads as clean editorial text laid on whatever
 *  the slide background is, separated by generous vertical rhythm and a hairline rule
 *  between sections. Typography hierarchy (title eyebrow + body) carries everything. **/
.d3view-textviz-cards {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    padding: var(--d3v-space-xl, 24px) var(--d3v-space-xl, 28px);
    color: var(--d3v-text-primary, #1a2330);
    line-height: 1.7;
    overflow: hidden;
}
.d3view-textviz-cards .d3v-textviz-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--d3v-border-soft, #e6e8eb);
    font-weight: 700;
    font-size: 1.15em;
    color: var(--d3v-text-primary, #1a2330);
    letter-spacing: 0.01em;
}
.d3view-textviz-cards .d3v-textviz-card-header i.fa {
    color: var(--d3v-accent-primary, #4f86ff);
    font-size: 1.25em;
}
.d3view-textviz-cards .d3v-textviz-card-sections {
    flex: 1 1 auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--d3v-space-lg, 16px);
    align-content: start;
}
.d3view-textviz-cards.d3v-textviz-cards-two-col .d3v-textviz-card-sections {
    grid-template-columns: 1fr 1fr;
}
.d3view-textviz-cards .d3v-textviz-card-section {
    position: relative;
    padding: 16px 20px 14px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-top: none;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.d3view-textviz-cards .d3v-textviz-card-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #c0606b;
    border-radius: var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 0;
}
.d3view-textviz-cards .d3v-textviz-card-title {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 3px 12px;
    font-size: 0.68em;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--d3v-text-inverse, #fff);
    background: var(--d3v-n-900, #0f172a);
    border-radius: var(--d3v-r-sm, 4px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.d3view-textviz-cards .d3v-textviz-card-body {
    color: var(--d3v-text-primary, #1a2330);
    line-height: 1.55;
}
.d3view-textviz-cards .d3v-textviz-card-body p {
    margin: 0 0 8px 0;
    font-size: 1em;
}
.d3view-textviz-cards .d3v-textviz-card-body p:last-child {
    margin-bottom: 0;
}
.d3view-textviz-cards .d3v-textviz-card-section:only-child {
    padding: 16px 20px 14px;
}
.d3view-textviz-cards.is-clamped .d3v-textviz-card-section:last-child .d3v-textviz-card-body p:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Added by shashank2104 on 2026-05-28 - LS-DYNA keyword render mode.
 *  Monospace, fixed-pitch presentation of LS-DYNA card text for the textviewer
 *  in renderMode=lsdyna-keyword. Designed to preserve fixed-width column
 *  alignment, render with a sticky *KEYWORD header band, and feed the PPT
 *  export as a clean monospace text block. No card splitting, no markdown. **/
.d3view-textviz-lsdyna {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1a2330);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
    overflow: hidden;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-header {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: var(--d3v-space-sm, 8px);
    padding: 10px 16px;
    background: var(--d3v-n-900, #0f172a);
    color: var(--d3v-text-inverse, #fff);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 0.95em;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-header i.fa {
    color: var(--d3v-accent-primary, #4f86ff);
}
.d3view-textviz-lsdyna .d3v-textviz-kw-header-title {
    text-transform: none;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-header-sub {
    margin-left: auto;
    opacity: 0.75;
    font-weight: 500;
    font-size: 0.85em;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-body {
    flex: 1 1 auto;
    margin: 0;
    padding: 14px 18px;
    overflow: hidden;
    white-space: pre;
    word-break: keep-all;
    overflow-wrap: normal;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    background: transparent;
    color: var(--d3v-text-primary, #1a2330);
    border: 0;
    border-radius: 0;
}
.d3view-textviz-lsdyna.d3v-textviz-kw-numbered .d3v-textviz-kw-body {
    padding-left: 8px;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-num {
    display: inline-block;
    color: var(--d3v-text-muted, #94a3b8);
    user-select: none;
    padding-right: 10px;
    border-right: 1px solid var(--d3v-border-soft, #e6e8eb);
    margin-right: 10px;
}
.d3view-textviz-lsdyna .d3v-textviz-kw-line {
    white-space: pre;
}

/** Hide chrome during PPT export so the rasterized capture (if used as fallback)
 *  stays clean. The native-text path is the preferred export mode. **/
.d3view-exporting .d3view-textviz-lsdyna,
.d3view-global-exporting .d3view-textviz-lsdyna {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/** Added by shashank2104 on 2026-05-24 - stat-grid card layout for textviewer.
 *  Premium DOE parameter sweep cards with accent borders, badges, and stat grids. **/
.d3v-textviz-stat-grid {
    padding: var(--d3v-space-lg, 20px) var(--d3v-space-xl, 24px);
}
.d3v-textviz-stat-grid .d3v-textviz-card-header {
    margin-bottom: var(--d3v-space-md, 12px);
    padding-bottom: var(--d3v-space-sm, 8px);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.d3v-stat-grid-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--d3v-space-lg, 16px);
    align-content: start;
}
.d3v-stat-card {
    position: relative;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: var(--d3v-space-lg, 16px) var(--d3v-space-lg, 16px) var(--d3v-space-md, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d3v-stat-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #c0606b;
    border-radius: var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 0;
}
.d3v-stat-card--summary .d3v-stat-card-accent {
    background: #b8973a;
}
.d3v-stat-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 12px;
    background: var(--d3v-n-900, #0f172a);
    color: var(--d3v-text-inverse, #fff);
    font-size: 0.72em;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: 0.06em;
    border-radius: var(--d3v-r-sm, 4px);
}
.d3v-stat-card--summary .d3v-stat-badge {
    background: transparent;
    color: #8a6e1e;
    padding: 0;
    font-size: 0.68em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.d3v-stat-desc {
    font-size: 1em;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    line-height: 1.35;
}
.d3v-stat-pairs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px var(--d3v-space-lg, 16px);
    margin-top: auto;
}
.d3v-stat-pair {
    display: flex;
    flex-direction: column;
}
.d3v-stat-key {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.d3v-stat-value {
    font-size: 1.12em;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}
.d3v-stat-card--summary .d3v-stat-pairs {
    grid-template-columns: 1fr;
    gap: 2px;
}
.d3v-stat-card--summary .d3v-stat-pair {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.d3v-stat-card--summary .d3v-stat-pair:last-child {
    border-bottom: 0;
}
.d3v-stat-card--summary .d3v-stat-key {
    font-size: 0.82em;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
}
.d3v-stat-card--summary .d3v-stat-value {
    font-size: 0.92em;
    color: var(--d3v-n-900, #0f172a);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-weight: 700;
}

/** Added by shashank2104 on 06/06/2026 at 10:49 PM - SIM-1002 - KPI value fallback when the arc
 *  cannot fit (replaces legacy card-mode with tiny dial + IARV bar). **/
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-fallback {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    text-align: center;
    background: var(--d3v-bg-primary, #ffffff);
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border-soft, #e6e8eb);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(15, 23, 42, 0.08));
    color: var(--d3v-text-primary, #1a2330);
}
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-value {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-primary, #1a2330);
}
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-meta {
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-unit {
    font-size: 0.82em;
    color: var(--d3v-text-tertiary, #8a93a3);
    font-weight: 500;
}
.d3view-viz[data-chart-type="gauge"] .d3v-gauge-kpi-tier {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    white-space: nowrap;
}
.d3view-viz[data-viz-style-preset="premium"] .d3v-gauge-kpi-fallback {
    border-color: var(--np-line, #e6eaf1);
    box-shadow: var(--np-sh-md, 0 6px 16px -6px rgba(16, 24, 40, .12), 0 2px 6px -2px rgba(16, 24, 40, .07));
}
.d3view-viz[data-viz-style-preset="premium"] .d3v-gauge-kpi-value {
    color: var(--np-ink, #0f172a);
}
.d3view-viz[data-viz-style-preset="premium"] .d3v-gauge-kpi-label {
    color: var(--np-ink-2, #334155);
}
.d3view-viz[data-viz-style-preset="premium"] .gauge-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    background: var(--d3v-bg-primary, #ffffff);
}
.d3view-viz[data-viz-style-preset="premium"] .gauge-empty-state-card {
    text-align: center;
    padding: 24px 28px;
    border: 1px solid var(--d3v-border-default, #e2e8f0);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    background: var(--d3v-bg-primary, #ffffff);
    max-width: 360px;
}
.d3view-viz[data-viz-style-preset="premium"] .gauge-empty-state-img {
    width: 120px;
    height: auto;
    margin: 0 auto 12px;
    display: block;
    opacity: 0.9;
}
.d3view-viz[data-viz-style-preset="premium"] .gauge-empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 6px;
}
.d3view-viz[data-viz-style-preset="premium"] .gauge-empty-state-subtitle {
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748b);
    line-height: 1.5;
}
.d3view-viz[data-viz-style-preset="premium"] div.guage-container > div.attr-legends-container.radial-rail li[data-legend-id]:hover,
.d3view-viz[data-viz-style-preset="premium"] div.guage-container > div.attr-legends-container.radial-rail li[data-band-index]:hover {
    background: color-mix(in oklab, var(--np-accent, #326ece) 8%, transparent);
    border-radius: 6px;
}

/** Added by shashank2104 on 06/12/2026 - DVFIV-2047 - gauge showSummary cards reuse the
 *  radar-summary card styles; pinned to the reserved band at the bottom of the
 *  full-height guage-container (the svg shrinks by SUMMARY_RESERVE above it). **/
.d3view-viz[data-chart-type="gauge"] div.guage-container > .gauge-summary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: stretch;
}

/* ── Radar summary cards (showSummary option) ────────────────────────── */
/* pinned to the reserved bottom band of the radar host (the svg shrinks above
 * it) so the cards never add flow height and scroll the container — mirrors the
 * gauge-summary pattern. Updated by shashank2104 on 06/22/2026 - DVFIV-2048. */
.radar-summary {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    flex-wrap: nowrap;
    align-items: stretch;
}
.radar-summary-card {
    flex: 1 1 0;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    transition: box-shadow var(--d3v-t-fast, 0.12s);
    min-width: 0;
}
.radar-summary-card:hover {
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
}
.radar-summary-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-full, 50%);
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    font-size: 14px;
}
.radar-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1E293B);
    line-height: 1.2;
}
.radar-summary-desc {
    font-size: 14px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.3;
    margin-top: 2px;
    /* clamp to 3 lines so a narrow (2-col) card stays inside the reserved band */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/** Added by shashank2104 on 2026-05-27 - DVFIV-2059 - right-positioned legend layout.
 *  Updated by shashank2104 on 2026-06-27 - scoped to the premium preset only
 *  (.d3view-viz[data-viz-style-preset="premium"]) so this layout no longer leaks
 *  into non-premium vizes that may also carry data-legends-position="right". **/
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper {
    position: absolute !important;
    right: 0;
    top: var(--right-legend-top, 0px);
    left: unset !important;
    height: calc(100% - var(--right-legend-top, 0px));
    width: var(--right-legend-w, 250px) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
    z-index: 1;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .d3view-legends-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-height: none !important;
    height: 100% !important;
    width: 100% !important;
    padding: 8px !important;
    border: none !important;
    background: transparent !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .legend-header {
    border-bottom: none !important;
    padding: 0 0 4px 0;
    flex-shrink: 0;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .legends-body {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    overflow-y: auto !important;
    width: 100% !important;
    max-height: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .legends-body > ul,
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .legends-list {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: space-evenly;
    height: 100%;
    width: 100% !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper li.legend-item {
    max-width: 100% !important;
    width: 100% !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper li.legend-item .curve-name {
    white-space: normal !important;
    /** Updated by shashank2104 on 2026-05-28 - R0-3672 - overflow-wrap: anywhere wraps at whitespace first (so labels like "Test EngSS" stay intact) and only falls back to mid-character breaks for unbreakable strings like 2014_MERCEDES_E350 **/
    overflow-wrap: anywhere;
    word-break: normal;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper li.legend-item svg.legend-line {
    flex-shrink: 0;
    min-width: 40px !important;
    width: 40px !important;
    height: 15px !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper li.legend-item svg.legend-line line {
    stroke-width: 5 !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-legends-position="right"] .legends-wrapper .legend-container-options {
    display: none !important;
}
/** Premium export grid lines **/
body[data-reporter-export-theme="premium"] div.simlytiks .grid line {
    stroke: #b2b2b2 !important;
}

/* Export-time + reporter theme polish for every chart type was moved to
 * plugins/simlytiks/simlytiks-report.css on 2026-05-22 — single-file source
 * of truth keyed off <body data-reporter-export-theme="premium|compact">.
 * Universal .d3view-exporting / .d3view-global-exporting chrome-hides and
 * the .d3v-gauge-card export-friendly block live there too. */

/* ============================================================================
   SIM-1002 - Premium "Option A · Refined Classic" frame for viz.defs charts.
   Added by shashank2104 on 2026-06-04.

   Exact-match port of plugins/simlytiks/bubblechart-premium-sketch.html
   (Option A) onto the live viz.defs DOM. Everything is attribute-scoped off
   .d3view-viz[data-viz-style-preset="premium"] — the marker stamped in
   viz.defs.js IndexView from the runtime vizStylePresetId that
   simlytiks.viz.views.js getVizOptions resolves (never persisted on the
   vizModel). Generic rules (tokens, the top series-legend "legbar" band, the
   interactive font scale) cover EVERY viz.defs visualizer; the plot internals,
   encoding rail and bubble halo add [data-chart-type="bubblechart"]. Default /
   compact decks carry no marker, so they are byte-for-byte unchanged. Tokens
   mirror the sketch --c-* scale (and newton.css --np-*) 1:1 so the curveplot
   and bubble premium frames read as one design system.
   ============================================================================ */

/* --- Option A token scale (exact sketch --c-* values), premium-scoped ---
   Identical values to newton.css's .newton-premium block so the curveplot and
   bubble premium frames read as ONE design system. Updated by shashank2104 on
   2026-06-05 - SIM-1002 - the legbar band AND the encoding-rail panel share ONE
   translucent surface (--np-surface-2 = --np-panel at 60% over the white card)
   so they read as the same material; the plot frame + axis domains/ticks + grid
   all use ONE soft line colour (--np-hair == --np-grid) so the chart sits in a
   single uniform hairline cage. */
.d3view-viz[data-viz-style-preset="premium"] {
    --np-surface:   #ffffff;
    --np-panel:     oklch(98.5% .004 260);
    --np-surface-2: color-mix(in oklab, var(--np-panel) 60%, transparent);
    --np-ink:       #0f172a;
    --np-ink-2:     #334155;
    --np-ink-3:     #64748b;
    --np-ink-4:     #94a3b8;
    --np-line:      #e6eaf1;
    --np-line-2:    #eef2f7;
    --np-hair:      oklch(92% .008 260);
    /* a divider colour that actually shows on the soft-grey panels (the Option A
       line/line-2 tones blend into the panel). Used for the legbar bottom rule,
       the rail's left rule, and the dashed rules between encoding sections. */
    --np-divider:   #cfd7e3;
    --np-grid:      oklch(92% .008 260);
    /* parallel coordinates' vertical dimension axes are the chart's primary
       structure, so they use a slightly more visible soft blue-grey than the
       --np-hair cage (Option A sk-opt1: .sk-axis path.domain stroke #d7deea) —
       faint enough to recede, present enough to anchor each column. */
    --np-axis:      #d7deea;
    /* Updated by shashank2104 on 2026-06-09 - SIM-1002 - tick numbers darkened ~20% (#7a8699 -> #626b7a) */
    --np-tick:      #626b7a;
    --np-r-lg:      18px;
    --np-sh-md:     0 6px 16px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.07);
    --bubble-halo:  1.4px;
}

/* ---------- GENERIC: premium dropdown menus (simple <ul> list dropdowns) ----------
   Added by shashank2104 on 2026-06-10 - SIM-1002 - ONE consistent premium surface for every simple
   list dropdown inside a premium viz (DataTable Download/Customize, chart-type picker, export sub-menus,
   etc.) so they all read identically instead of falling back to raw Bootstrap. Surface + list-row polish
   only; complex form/picker dropdowns are unaffected beyond the rounded card. Tokens carry literal
   fallbacks so this also holds for hosts that don't define the --np-* scale. */
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu,
.d3view-viz[data-viz-style-preset="premium"] ul.nested-dropdown-menu {
    padding: 6px;
    border: 1px solid var(--np-line, #e6eaf1);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .10);
    background: var(--np-surface, #fff);
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li,
.d3view-viz[data-viz-style-preset="premium"] ul.nested-dropdown-menu > li {
    margin: 0;
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a,
.d3view-viz[data-viz-style-preset="premium"] ul.nested-dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--np-ink-2, #334155);
    transition: background .12s ease, color .12s ease;
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a:hover,
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a:focus,
.d3view-viz[data-viz-style-preset="premium"] ul.nested-dropdown-menu > li > a:hover {
    /* base plugins.css forces `color:#fff!important` (blue-gradient hover) — override back to accent */
    background: var(--np-surface-2, #f4f7fb) !important;
    color: var(--np-accent, #2f6bff) !important;
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li.active > a {
    background: #eef4ff;
    color: var(--np-accent, #2f6bff);
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li.divider {
    height: 1px;
    margin: 5px 6px;
    background: var(--np-line, #e6eaf1);
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a > i,
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a > .fa,
.d3view-viz[data-viz-style-preset="premium"] ul.nested-dropdown-menu > li > a > i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: var(--np-ink-4, #94a3b8);
}
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a:hover > i,
.d3view-viz[data-viz-style-preset="premium"] ul.dropdown-menu > li > a:hover > .fa {
    color: var(--np-accent, #2f6bff);
}

/* ---------- GENERIC: series legend -> Option A "legbar" band ----------
   A full-width light band across the top with a hairline divider below it
   (Option A o1-legbar). Chips are FLAT (color line glyph + label), not pills.
   Shared `.legends-wrapper.top-legends` class is the same one Newton uses, so
   this rule lights up every viz.defs chart's top legend identically. The band
   WRAPS (Option A) — viz.defs.js ComputeDimensions measures the legend's settled
   outerHeight and sets .viz-container.__main top to it, so the encoding rail
   (a child of that container) flows straight out of the band with no gap. */
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends {
    background: var(--np-surface-2) !important;
    border-bottom: 1px solid var(--np-divider) !important;
    padding: 6px 14px;
    box-sizing: border-box;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legends-list {
    gap: 4px 18px;
    align-content: flex-start;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends li.legend-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends li.legend-item .legend-item-left {
    align-items: center;
    gap: 7px;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends span.curve-name {
    color: var(--np-ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* the legbar header ("Legend by: <col>") now shows interactively (showLegendLabels
   only hides it in export). Drop the base white background — a white strip reads
   oddly on the translucent slate band, so the header sits directly on the band like
   the chips do — and give it the refined slate ink. */
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legend-header {
    background: transparent !important;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legend-header .legends-label {
    color: var(--np-ink-2);
    /* font-weight: 600; */
}
/* the numerical fringe / colour-by legend TITLE (the column name above the bar) renders
   as an inline-styled xhtml div.color_label (bold, centered). Give it the SAME refined
   slate treatment as the regular legend header (.legends-label) so the premium fringe
   header matches the rest of the deck. Added by shashank2104 on 2026-06-05 - SIM-1002. */
.d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend div.color_label {
    color: var(--np-ink-2) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
/* hide the per-legend options menu (the ⋮ legend-header-right) in premium — the
   legbar reads as a presentational band, not an interactive control strip. */
.d3view-viz[data-viz-style-preset="premium"] .d3view-legends-container .legend-header-right {
    display: none;
}
/* The band WRAPS (Option A legbar) so every chip shows; if it is taller than its
   reserved band the band scrolls vertically rather than clipping. Mirrors
   newton.css. */
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legends-list {
    flex-wrap: wrap;
}
.d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legends-body {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---------- GENERIC: plot internals — soft grid, hairline axes, refined ticks ----------
   Targets the axis groups DIRECTLY (no svg prefix) so EVERY cartesian viz.defs
   chart — bubble, bar, hbar, line, parallel — gets the same Option A plot look
   from one rule set. Donut / pie / radar have no g.x.axis / g.y.axis, so they
   are unaffected. Mirrors newton.css's .newton-premium plot block. */
.d3view-viz[data-viz-style-preset="premium"] .grid .tick line,
.d3view-viz[data-viz-style-preset="premium"] svg.chart-gridlines .tick line {
    stroke: var(--np-grid) !important;
    stroke-width: 1 !important;
    stroke-opacity: 1 !important;
}
/* gridlines were painting ON TOP of the bubbles: svg.chart-gridlines is
   position:absolute (overlay at top:0), and a positioned element paints ABOVE
   its static siblings regardless of DOM order, so the hairline grid landed over
   the data marks. We can't just lift svg.bubble-chart with z-index — that would
   also push it above the static .chart-labels / .chart-images (which carry an
   inert z-index:2) and hide the labels. Instead make .svg-container a stacking
   context and drop the gridlines into a negative layer: they paint above the
   card (trapped inside .svg-container so they never vanish behind it) but BELOW
   the static bubble svg + labels. Marks now sit cleanly above the grid. */
.d3view-viz[data-viz-style-preset="premium"] .svg-container {
    position: relative;
    z-index: 0;
}
.d3view-viz[data-viz-style-preset="premium"] svg.chart-gridlines {
    z-index: -1;
}
/* bubble draws no separate grid group — its long axis tick lines ARE the grid,
   and the plot frame is rect.background / rect.outer (bubble's equivalent of
   Newton's rect.pan-rect). Pull all of them into the soft hairline cage so the
   chart border + gridlines match instead of reading as a hard dark box. */
.d3view-viz[data-viz-style-preset="premium"] g.x.axis .tick line,
.d3view-viz[data-viz-style-preset="premium"] g.y.axis .tick line,
.d3view-viz[data-viz-style-preset="premium"] g.y2.axis .tick line,
.d3view-viz[data-viz-style-preset="premium"] g.y3.axis .tick line {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"] svg.bubble-chart rect.background,
.d3view-viz[data-viz-style-preset="premium"] svg.bubble-chart rect.outer {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
.d3view-viz[data-viz-style-preset="premium"] g.x.axis path.domain,
.d3view-viz[data-viz-style-preset="premium"] g.y.axis path.domain,
.d3view-viz[data-viz-style-preset="premium"] g.y2.axis path.domain,
.d3view-viz[data-viz-style-preset="premium"] g.y3.axis path.domain {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
.d3view-viz[data-viz-style-preset="premium"] g.x.axis .tick text,
.d3view-viz[data-viz-style-preset="premium"] g.y.axis .tick text,
.d3view-viz[data-viz-style-preset="premium"] g.y2.axis .tick text,
.d3view-viz[data-viz-style-preset="premium"] g.y3.axis .tick text,
/* parallel coordinates: each dimension is g.dimension > g.axis (NOT g.x/y.axis) */
.d3view-viz[data-viz-style-preset="premium"] g.dimension g.axis .tick text,
/* numerical fringe / colour-by legend ticks (Viz.NumericalColorLegend) — the
   start/end range ticks and the left data-value ticks render as inline-styled
   SVG <text>, so include them here for the same slate premium tick colour.
   Added by shashank2104 on 2026-06-05 - SIM-1002. */
.d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.start,
.d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.end,
.d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.data_values {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* axis titles — refined slate weight (Option A sk-axis-title). Covers every
   visualizer's label class. */
.d3view-viz[data-viz-style-preset="premium"] text.x_label,
.d3view-viz[data-viz-style-preset="premium"] text.y_label,
.d3view-viz[data-viz-style-preset="premium"] text.xLabel,
.d3view-viz[data-viz-style-preset="premium"] text.yLabel,
.d3view-viz[data-viz-style-preset="premium"] text.yLabel2,
.d3view-viz[data-viz-style-preset="premium"] text.yLabel3,
.d3view-viz[data-viz-style-preset="premium"] text.axis-labels,
/* parallel coordinates: dimension titles live in g.axis-handle text */
.d3view-viz[data-viz-style-preset="premium"] g.axis-handle text {
    fill: var(--np-ink-2) !important;
    font-weight: 600;
}
/* NO round stroke-linecap on the marks — round caps fill the gaps of dashed
   encodings so they read as solid (the exact regression Newton hit with dashBy).
   Bubble marks are circles, but keep the cage default butt caps explicit so no
   future premium rule sneaks a round cap onto a connector / band stroke. */
.d3view-viz[data-viz-style-preset="premium"] svg.bubble-chart path,
.d3view-viz[data-viz-style-preset="premium"] svg.bubble-chart line {
    stroke-linecap: butt;
}

/* ---------- BUBBLE: white halo behind each mark (Option A) ----------
   Pure-CSS halo via a white drop-shadow on the bubble group — premium-only, no
   per-mark DOM node, no hot-path change. g.bubbleContainer is a bubble-only
   element, so this is naturally scoped to scatter. */
.d3view-viz[data-viz-style-preset="premium"] svg.bubble-chart g.bubbleContainer {
    filter: drop-shadow(0 0 var(--bubble-halo) #ffffff);
}

/* ---------- GENERIC: encoding-legend rail -> Option A slate side panel ----------
   Any viz.defs chart whose template includes an .attr-legends-container (bubble
   today; others can opt in) gets the Option A o1-rail: a light slate panel with
   a hairline divider against the plot, an uppercase kicker + column-name title,
   dashed dividers between encoding cards, and clean rows. Mirrors newton.css's
   .newton-attr-legends premium treatment 1:1. The rail lives INSIDE
   .viz-container.__main (top == settled legbar height), so it already FLOWS from
   the legend band with no gap, and falls back to the plot/canvas top when there
   is no legend — the structural equivalent of Newton's measured --rail-top var. */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container {
    background: var(--np-surface-2);
    border-left: 1px solid var(--np-divider);
    padding: 16px 18px;
    min-width: 236px;
}
/* the rail panel starts flush under the legbar; give the FIRST card its own top
   inset so its heading doesn't touch the band (Option A o1-rail first-card). */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .legends:first-child {
    padding-top: 16px;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .legends + .legends {
    border-top: 1px dashed var(--np-divider);
    padding-top: 14px;
    margin-top: 14px;
}
/* header: uppercase kicker + column title inline (Option A enc-head) */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container h3.legends-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    margin: 0 0 9px;
    line-height: 1.3;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .attr-kind {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--np-ink-4);
    white-space: nowrap;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .attr-col {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--np-ink);
    text-transform: none;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container li[data-key] {
    list-style: none;
    color: var(--np-ink-2);
    font-variant-numeric: tabular-nums;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container li[data-key] .d3view-flex-v {
    align-items: center;
    gap: 9px;
    padding: 3px 0;
}
/* the bin value text (e.g. "15 - 25") carries an inline font-size:24px AND
   word-break:break-all from the premium globalAxisTickFontSize / base legend
   rule — both need !important to land the Option A 14px, single-line numeric
   range (mirrors newton.css's .bin). 14px reads in BOTH the on-screen rail and
   the export, exactly like Newton's rail. */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container li[data-key] .bin {
    font-size: 14px !important;
    color: var(--np-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* NOTE: Newton's premium frame turns its always-present simple-settings toolbar
   into a floating pill. Bubble has NO equivalent — its interaction toolbar is
   gated behind showInteractionToolbar (default off, and the premium preset never
   enables it), so .bubble-simple-settings-header is never in the DOM. There is
   therefore no toolbar pill to style here. */

/* ---------- GENERIC: bar-chart marks + value labels (Option A) ----------
   Vertical (vbarchart) bars live in g.y_layer > rect with a class-less <text>
   value label beside each; horizontal (hbarchart) bars in g.bar-layer > rect.bar
   with text.barLabel / text.bar_text value labels. The whole cartesian frame —
   card, top "Legend by" band, soft grid, hairline slate axes, slate axis titles,
   left bold title — ALREADY comes from the generic rules above (verified live on
   both charts). These add only the Option A bar-mark polish: a soft corner radius
   and slate, tabular value labels (today plain black). Premium-only, and the
   selectors are bar-unique so they stay inert for every other chart.
   Added by shashank2104 on 2026-06-05 - SIM-1002. */
.d3view-viz[data-viz-style-preset="premium"] g.y_layer rect,
.d3view-viz[data-viz-style-preset="premium"] g.bar-layer rect.bar {
    rx: 3px;
    ry: 3px;
}
.d3view-viz[data-viz-style-preset="premium"] g.y_layer text,
.d3view-viz[data-viz-style-preset="premium"] text.barLabel,
.d3view-viz[data-viz-style-preset="premium"] text.bar_text {
    fill: var(--np-ink-2);
    font-variant-numeric: tabular-nums;
}

/** Added by shashank2104 on 06/10/2026 at 05:56 PM - SIM-1002 - hbarchart premium toolbar pill alignment.
 *  The pill wraps label + bootstrap-select rows (.d3view-flex-v). Generic .dv-viz-toolbar ghost-button
 *  rules fight selectpicker toggles; these scoped rules flatten each control into one aligned row. **/
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar {
    gap: 0;
    padding: 4px 6px;
    align-items: stretch;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar > .d3view-flex-v {
    margin-right: 0 !important;
    padding: 2px 10px;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar > .d3view-flex-v + .d3view-flex-v {
    border-left: 1px solid var(--np-line-2);
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--np-ink-4);
    white-space: nowrap;
    line-height: 1;
    flex: 0 0 auto;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select {
    width: auto !important;
    flex: 0 0 auto;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select > .dropdown-toggle {
    height: 26px !important;
    min-height: 26px;
    padding: 0 24px 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: var(--np-ink) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select > .dropdown-toggle:hover,
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select.open > .dropdown-toggle {
    background: var(--np-surface-2) !important;
    border-color: var(--np-line) !important;
    color: var(--np-ink) !important;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select .filter-option {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 24px;
}
.d3view-viz[data-viz-style-preset="premium"] .viz-container.__main.hbarchart .settings .dv-viz-toolbar .bootstrap-select .caret {
    right: 8px;
    margin-top: -2px;
    color: var(--np-ink-4);
}

/* ---------- INTERACTIVE font scale (Option A on-screen sizes) ----------
   The premium preset renders ticks / labels / legend text at the large PPT
   scale. Correct for the slide, too big on screen. Pull the on-screen sizes to
   the Option A scale; the export keeps the large scale (these rules are scoped
   off the capture-time body classes). !important beats the preset's font. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.x.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.y.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.y2.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.y3.axis .tick text,
/* parallel: the dimension ticks render at the premium globalAxisTickFontSize
   (24px) inline — pull them to the Option A on-screen scale (export keeps 24). */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.dimension g.axis .tick text,
/* IIHS (parallelcoordinates_iihs): the dimension titles live in g.axis-handle text
   INSIDE g.axis, so the 24px global `.axis text` rule blows them up and the label-fit
   truncates them ("Lower Hinge Pillar" -> "Lower…illar"). Pull to the Option A on-screen
   scale BEFORE the label-fit measures (export keeps the 24px scale). Added by shashank2104
   on 2026-06-05 - SIM-1002. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.axis-handle text,
/* numerical fringe / colour-by legend ticks render at the premium legendsFontSize
   (24px) inline, far too big in the on-screen rail; pull to the same Option A scale
   as the axis ticks (export keeps the 24px preset size). Added by shashank2104 on
   2026-06-05 - SIM-1002. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.start,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.end,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend text.data_values {
    font-size: 13px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] text.x_label,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] text.y_label,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] text.xLabel,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] text.yLabel {
    font-size: 13px !important;
}
/* the opacity / thickness gradient legend renders its tick labels as SVG <text>
   (Viz.NumericalFringeLegend); the premium font overlaps them in the narrow
   rail. Pull to the Option A on-screen scale (export keeps its own scale). */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .min-max-legends text {
    font-size: 11px !important;
    fill: var(--np-ink-3) !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends span.curve-name {
    font-size: 14px !important;
}
/* the legbar header ("Legend by: <col>") renders at the 24px premium legend font
   inline; pull it to the Option A on-screen 14px (same treatment as the chips).
   Export keeps the large scale. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legend-header .legends-label {
    font-size: 14px !important;
}
/* on export the legbar header ("Legend by: <col>") scales up to a fixed 18px premium size.
   Added by shashank2104 on 2026-06-10 - SIM-1002. */
.d3view-exporting .d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legend-header .legends-label,
.d3view-global-exporting .d3view-viz[data-viz-style-preset="premium"] .legends-wrapper.top-legends .legend-header .legends-label {
    font-size: 18px !important;
}
/* the fringe / colour-by legend title renders at the 24px premium legendsFontSize inline;
   pull it to the on-screen 14px to match the legend header (export keeps the large scale).
   Added by shashank2104 on 2026-06-05 - SIM-1002. */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] g.num_colorlegend div.color_label {
    font-size: 14px !important;
}

/* ---------- RADIAL: donut + pie premium frame (Option A) ----------
   Added by shashank2104 on 2026-06-05 - SIM-1002. donut/pie are viz.defs charts
   with NO axes, so the generic cartesian plot rules above are inert for them;
   they inherit only the legbar band + the :has() card. This block adds the radial
   Option A polish: a soft drop-shadow lift on the ring, hairline-slate leader
   lines, slate tabular slice + center labels, and a refined rose radius legend.
   donut DOM = svg.donutsvg > g.g-container > (g.arcs g.arc path/text, g.lines
   polyline) + text.centerlabel; pie DOM = svg.chart-svg > (g.arcs, g.lines,
   g.radius_legend). `!important` only where the visualizer sets the prop INLINE
   (leader lines black/2px; pie slice labels fill:#000). The resting slice
   separator (white 2px) is handled in donut.js / pie.js so the click/brush
   highlight ring is preserved. Everything is gated on the premium attribute, so
   default / compact stay byte-identical. */
/* soft lift on the ring/wedge (no inline filter -> no !important) */
.d3view-viz[data-viz-style-preset="premium"] svg.donutsvg g.arcs,
.d3view-viz[data-viz-style-preset="premium"] svg.chart-svg g.arcs {
    filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .08));
}
/* leader lines (inline: black / 2px / opacity transitions to .3) -> hairline slate */
.d3view-viz[data-viz-style-preset="premium"] g.lines polyline {
    stroke: var(--np-hair) !important;
    stroke-width: 1.25px !important;
    opacity: .6 !important;
}
/* slice value / percentage labels -> weight + tabular for ALL premium labels.
   The fill is split below: OUTSIDE labels (polyLines on, in the gutter) get slate;
   INSIDE labels (polyLines off, in the ring band) carry a per-slice contrast fill
   set inline by donut.js / pie.js (white on dark slices, ink on light) — so we must
   NOT force a slate !important on them.
   Updated by shashank2104 on 2026-06-05 - SIM-1002: 16px on screen AND in export (was a
   13px interactive downscale). Donut/pie label fonts are hardcoded px — there is no big
   24px PPT scale to pull down (unlike bubble/curve), so the downscale only made the labels
   read smaller than Option A. The sketch's 13px renders ~16px because its SVG sits in a
   scaled-up viewBox; this matches that apparent size. */
.d3view-viz[data-viz-style-preset="premium"] g.arc text {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 16px !important;
}
/* outside labels (and any premium label without an inside/outside class) -> slate */
.d3view-viz[data-viz-style-preset="premium"] g.arc text.outside-label,
.d3view-viz[data-viz-style-preset="premium"] g.arc text:not(.inside-label):not(.outside-label) {
    fill: var(--np-ink-2) !important;
}
/* center KPI (donut/pie centerLabel) -> ink, bold, tabular */
.d3view-viz[data-viz-style-preset="premium"] text.centerlabel {
    fill: var(--np-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* premium two-line center KPI (donut.js renderPremiumCenterKPI): big value + uppercase caption.
   Added by shashank2104 on 2026-06-05 - SIM-1002. font-size is set inline (sized to the hole +
   shrink-to-fit), so only colour/weight/letterspacing live here. */
.d3view-viz[data-viz-style-preset="premium"] text.centerlabel-value {
    fill: var(--np-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
.d3view-viz[data-viz-style-preset="premium"] text.centerlabel-caption {
    fill: var(--np-ink-4);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-variant-numeric: normal;
}
/* premium two-line outside slice labels (donut.js): percentage on top (slate, 16px from the
   parent g.arc text rule), slice name below (grey, 13px for hierarchy) — both on screen and in
   export, matching Option A's apparent scale.
   Added by shashank2104 on 2026-06-05 - SIM-1002. */
.d3view-viz[data-viz-style-preset="premium"] g.arc text.outside-label tspan.dl-pct {
    fill: var(--np-ink-2);
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"] g.arc text.outside-label tspan.dl-name {
    fill: var(--np-ink-4);
    font-weight: 500;
    font-variant-numeric: normal;
    font-size: 13px !important;
}
/* premium: dots stand in for de-overlapped (dropped) slice labels; hover grows them slightly.
   Added by shashank2104 on 2026-06-05 - SIM-1002. */
.d3view-viz[data-viz-style-preset="premium"] g.label-dots circle.label-dot {
    transition: r .12s ease, filter .12s ease;
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .18));
}
.d3view-viz[data-viz-style-preset="premium"] g.label-dots circle.label-dot:hover {
    r: 6;
}
/* rose radius legend (pie, only when radiusBy set) -> hairline rings + slate labels */
.d3view-viz[data-viz-style-preset="premium"] g.radius_legend circle {
    stroke: var(--np-hair);
}
.d3view-viz[data-viz-style-preset="premium"] g.radius_legend text {
    fill: var(--np-tick);
    font-variant-numeric: tabular-nums;
}
.d3view-viz[data-viz-style-preset="premium"] g.radius_legend text.legend_label {
    fill: var(--np-ink-2);
    font-weight: 600;
}

/* ---------- RADIAL encoding rail (donut + pie) -> Option A right side panel ----------
   Added by shashank2104 on 2026-06-05 - SIM-1002. donut/pie do not use bubble's flex
   .bubble-chart-container layout, so the GENERIC .attr-legends-container premium rules
   (grey panel, kicker+title, dashed dividers, .bin) apply, but the POSITIONING does not.
   donut.js / pie.js reserve a fixed 248px (+gap) column out of the ring and append the
   rail; we float it absolutely on the right of the chart's relative host so it never
   reflows the centred SVG. Premium-only, so default/compact never get a rail. */
.d3view-viz[data-viz-style-preset="premium"] div.donut-container > div.attr-legends-container.radial-rail,
.d3view-viz[data-viz-style-preset="premium"] div.chart_container > div.attr-legends-container.radial-rail,
.d3view-viz[data-viz-style-preset="premium"] div.guage-container > div.attr-legends-container.radial-rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 248px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 4;
    box-sizing: border-box;
}
/* color-dot swatch on a Group-by row */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .rail-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: none;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .06);
}
/* right-aligned tabular share value on a Group-by row */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .rail-val {
    margin-left: auto;
    padding-left: 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--np-ink);
    font-size: 13px !important;
    white-space: nowrap;
}
/* informational note rows wrap instead of ellipsis-truncating */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .bin.rail-note {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    font-size: 12.5px !important;
    color: var(--np-ink-3);
    line-height: 1.4;
}
/* the rose radius fringe sits flush at the top of its card */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container .radial-radius-legend {
    margin: 2px 0 6px;
}
/* on-screen rail row text -> Option A 13px (export keeps the 14px generic .bin) */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] .attr-legends-container li[data-key] .bin {
    font-size: 13px !important;
}
/* interactive Group-by rows: pointer + hover state so hovering (which highlights the matching
   slice) reads as interactive. Scoped to the Group-by card so any note rows stay static.
   Added by shashank2104 on 2026-06-05 - SIM-1002 (review feedback - rail hover UX). */
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container div[data-option="group"] li[data-key] {
    cursor: pointer;
    border-radius: 6px;
    padding-left: 6px;
    margin-left: -6px;
    transition: background var(--d3v-t-fast, .12s) ease, box-shadow var(--d3v-t-fast, .12s) ease;
}
.d3view-viz[data-viz-style-preset="premium"] .attr-legends-container div[data-option="group"] li[data-key]:hover {
    background: color-mix(in oklab, var(--np-accent, #2f5bea) 9%, transparent);
    box-shadow: inset 3px 0 0 0 var(--np-accent, #2f5bea);
}

/* ---------- RADIAL: radar premium frame (Option A) ----------
   Added by shashank2104 on 2026-06-05 - SIM-1002. radarchart is a viz.defs chart
   but RADIAL — its spiderweb rings (polygon.level-lines), radial spokes
   (line.axis-lines), vertex axis titles (text.axis-labels), stacked level value
   labels (text.level-labels) and series areas (polygon.polygon-areas) are NOT the
   generic cartesian axis groups, so the g.x/y.axis rules above are inert for it
   (exactly like donut/pie). This block adds the Option A radial polish: a
   hairline-slate spiderweb, slate tabular level labels and round-joined series
   polygons with white-haloed vertices. The vertex axis titles already pick up the
   slate fill + 600 weight from the generic `text.axis-labels` title rule above.
   The premium preset adds legendPosition:'top' (simlytiks.config.js) so the shared
   GenericLegendsView legbar band lights up. Export/cert keep the big PPT scale
   (lineWidthDefault:5, the inline axis/level font) — the interactive font + stroke
   downscale below is gated on body:not(.d3view-exporting). Every rule is
   chart-scoped to [data-chart-type="radarchart"] AND the premium attribute, so no
   other chart and neither default/compact is touched. */
/* spiderweb rings + radial spokes (both <line> elements, inline stroke #cbd5e1
   from radarplot.js — level rings are drawn as line segments, NOT polygons) -> token hairline */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] line.level-lines,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] line.axis-lines {
    stroke: var(--np-grid) !important;
}
/* bounding outer circle (radarplot.js draws it via attr: outerCircleColor #94A3B8 /
   2px — a heavy solid gray ring). In premium, calm it to the Option-A hairline so it
   reads as a clean cage boundary continuous with the spiderweb, a touch more defined
   than the inner rings. Both contexts (a colour/weight refinement, not a font that
   needs the big export scale). */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] circle.outer-circle {
    stroke: var(--np-grid) !important;
    stroke-width: 1.25px !important;
}
/* series areas: round joins/caps for a clean overlapping-polygon read (radar has
   no dash encoding, so round caps are safe here — unlike the cartesian marks) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] polygon.polygon-areas {
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* vertex dots: subtle white halo ring (Option A sk-vertex) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] circle.polygon-vertices {
    stroke: #ffffff;
    stroke-width: 1.4px;
}
/* level value labels (inline fill #1E293B / 16px from radarplot.js) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] text.level-labels {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 500 !important;
}
/* on-screen interactive downscale (export/cert keep the big PPT scale):
   axis titles 24->14, level labels 16->11, series stroke 5->2.5 */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] text.axis-labels {
    font-size: 14px !important;
    font-weight: 600 !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] text.level-labels {
    font-size: 11px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="radarchart"] polygon.polygon-areas {
    stroke-width: 2.5px !important;
}

/* ---------- NODE-LINK: tree premium frame (Option A) ----------
   Added by shashank2104 on 06/06/2026 - SIM-1002. tree is a viz.defs node-link chart
   (tree.js -> Viz.Defs.InitDOM -> .d3view-viz, div.d3view-tree > svg.tree). The generic
   cartesian axis rules (g.x.axis etc.) are inert for a dendrogram, so this block adds the
   Option A polish: hairline links, calm white nodes with their category-coloured ring,
   slate node labels, a refined child-count badge, and the right-side Size/Line-width rail.
   colorBy lights up the top legbar band (legendPosition:'top' preset) so it is NOT railed.
   Everything is scoped to premium + tree; default/compact are byte-identical. The toolbar
   pill is the shared .dv-viz-toolbar (added in tree.js). */
/* dendrogram links: steelblue (default CSS) -> Option A hairline */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] svg.tree path.link {
    stroke: var(--np-axis) !important;
    stroke-opacity: .9;
}
/* node circles: keep the category-colour ring (set inline by colorBy) but ensure a clean
   white fill so the ring reads as an outlined dot (Option A sk-node-ring). */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] svg.tree g.node circle {
    fill: #ffffff;
}
/* node labels (foreignObject div.plot-txt is HTML): slate weight */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree .plot-txt {
    color: var(--np-ink-2);
    font-weight: 500;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree .plot-txt.ui-selected,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree .plot-txt.temp-ui-selected {
    color: var(--np-ink);
    font-weight: 700;
}
/* on-screen interactive label downscale (export keeps the bigger PPT label) */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree .plot-txt {
    font-size: 12.5px;
}
/* ===== right-side encoding rail (Size By / Line-width By only — colorBy is in the legbar) =====
   tree.js builds div.attr-legends-container.tree-attr-rail inside .d3view-tree (premium only) and
   fills it with #tree-attr-legends-tpl — the SAME .legends[data-option] / h3.legends-label /
   li[data-key] structure bubble.js + parallel.js use, so the GENERIC
   .d3view-viz[premium] .attr-legends-container rules (kicker + column title, rows, .bin 14px,
   dashed dividers between .legends) style the inner content for free. This block only adds the
   tree-specific POSITIONING: absolute on the right, OPAQUE background (the generic uses translucent
   --np-surface-2 which let the dendrogram bleed through), and the plot-width reservation. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .tree-attr-rail {
    position: absolute;
    /* flush with the canvas/legbar top (no gap) — the generic .attr-legends-container 16px
       padding gives the heading its inset, exactly like bubble/parallel. */
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--tree-rail-w, 236px);
    /* OPAQUE so the dendrogram links/nodes never show through the panel (the svg is also narrowed
       by the reserved rail width + svg-container overflow:hidden, but this is the guarantee). */
    background: #f4f7fb;
    overflow-y: auto;
    z-index: 6;
    display: flex;
    flex-direction: column;
}
/* the plot box reserves the rail width so the tree never draws into the rail region */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree.has-tree-rail .svg-container {
    width: calc(100% - var(--tree-rail-w, 236px));
}
/* ===== toolbar: shrink the full-width .clearfix to a content-width .dv-viz-toolbar pill,
   floated top-right above the rail (the generic .dv-viz-toolbar supplies the pill chrome) ===== */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree > .clearfix.dv-viz-toolbar {
    left: auto !important;
    width: auto !important;
    right: 10px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 8;   /* above the rail */
}
/* when the rail is present, dock the toolbar pill just LEFT of the rail (over the plot's
   top-right) so it never overlaps the rail panel */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree.has-tree-rail > .clearfix.dv-viz-toolbar {
    right: calc(var(--tree-rail-w, 236px) + 12px);
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree > .clearfix.dv-viz-toolbar .btn-group {
    float: none !important;
    margin: 0 !important;
}
/* ===== clip: keep the dendrogram inside its plot box when zoomed/panned so it never paints
   over the legbar or the rail. The svg-container is the plot box (narrowed by the reserved rail
   width in computeDimensions); overflow:hidden masks panned nodes at its edge. Zoom/pan is a
   separate d3v5.zoom handler on the svg/canvas, so clipping is purely visual and never blocks it. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="tree"] .d3view-tree .svg-container {
    overflow: hidden;
}
/* End SIM-1002 tree premium frame */

/* ---------- RADIAL: gauge premium frame (Option A) ----------
   Added by shashank2104 on 06/05/2026 at 03:16 PM - SIM-1002. gauge is a viz.defs
   radial dial (guage.js); this block adds Option A polish: soft drop-shadow on the
   threshold bands, slightly softened band opacity (inline threshold colors preserved),
   hairline-slate ticks, slate tabular tick labels + center value_label, white-halo
   data circles, and premium card chrome. Chart-scoped to premium + gauge so default
   / compact stay byte-identical. Export keeps the big PPT scale; interactive font
   downscale is gated on body:not(.d3view-exporting). */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.arcs {
    filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .08));
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.arcs path {
    opacity: .88;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.ticks line,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.inner_ticks line {
    stroke: var(--np-hair) !important;
    stroke-width: 1.25px !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.ticks text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.inner_ticks text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 500 !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] text.value_label {
    fill: var(--np-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.ticks text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.inner_ticks text {
    font-size: 11px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] text.value_label {
    font-size: 22px !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="gauge"] g.circles circle {
    stroke: #ffffff;
    stroke-width: 2px;
}

.d3view-exporting .d3view-newton.newton-premium .legends-wrapper.top-legends,
.d3view-global-exporting .d3view-newton.newton-premium .legends-wrapper.top-legends {
    top: 0!important;
}

/* ============================================================================
   BOX / VIOLIN family — premium "Option A · Refined Classic" frame
   Added by shashank2104 on 2026-06-05 - SIM-1002.
   Charts: boxplot · violinplot · grouped_boxplot (all render svg.box marks),
   and multiboxplot (its own rect.boxes / line.medianLines / line.vertLines).
   ALL premium-scoped under .d3view-viz[data-viz-style-preset="premium"]; the
   marks are set with inline .style() in boxplot.js / multiboxplot.js, so each
   recolor needs !important. Default/compact never carry the premium attribute,
   so these rules are inert there (byte-identical). The card, the legbar band
   (legendPosition:'top' from the new config bundles) and multiboxplot's axis
   ticks/title/domain already land via the generic premium rules above —
   this block only refines the box/violin/whisker/median/label MARKS.

   Semantic ink aliases (resolve from the generic --np-* block on the wrapper).
   ============================================================================ */
.d3view-viz[data-viz-style-preset="premium"] {
    --np-violin-fill:   color-mix(in oklab, #4f6ec8 22%, transparent);
    --np-violin-stroke: #8aa0d8;
    --np-box-fill:      color-mix(in oklab, #7a8db4 14%, transparent);
    --np-box-stroke:    #9fb0cd;
    --np-median:        #23379e;
    --np-whisker:       #7a8699;
    --np-outlier:       #e15759;
}

/* ---- shared svg.box marks (boxplot / violinplot / grouped_boxplot cells) ---- */
/* violin silhouette: soften the heavy solid #326ece to a translucent indigo + hairline */
.d3view-viz[data-viz-style-preset="premium"] svg.box g.violin path,
.d3view-viz[data-viz-style-preset="premium"] svg.box .violins path {
    fill: var(--np-violin-fill) !important;
    stroke: var(--np-violin-stroke) !important;
    stroke-width: 1px !important;
}
/* IQR box: subtle fill + hairline border (was rgba(78,121,167,.18) / #3d5a80) */
.d3view-viz[data-viz-style-preset="premium"] svg.box rect.box {
    fill: var(--np-box-fill) !important;
    stroke: var(--np-box-stroke) !important;
    stroke-width: 1px !important;
}
/* median: accent ink, crisp round cap (was #1f2933) */
.d3view-viz[data-viz-style-preset="premium"] svg.box line.median {
    stroke: var(--np-median) !important;
    stroke-width: 2px !important;
    stroke-linecap: round !important;
}
/* whisker stems + center caps: slate hairline (was #475569) */
.d3view-viz[data-viz-style-preset="premium"] svg.box line.whisker,
.d3view-viz[data-viz-style-preset="premium"] svg.box line.center {
    stroke: var(--np-whisker) !important;
    stroke-width: 1px !important;
    stroke-linecap: round !important;
}
/* KDE line (when shown beside the box): hairline accent */
.d3view-viz[data-viz-style-preset="premium"] svg.box path.kde {
    stroke: var(--np-violin-stroke) !important;
    stroke-width: 1.25px !important;
}
/* outliers: keep the coral semantics, calm the stroke */
.d3view-viz[data-viz-style-preset="premium"] svg.box circle.outlier {
    fill: var(--np-outlier) !important;
    fill-opacity: .7 !important;
    stroke: #b03a3c !important;
    stroke-width: .75px !important;
}
/* quartile value labels + whisker tick labels: slate, tabular (was black, overlapping).
   A white text halo (paint-order:stroke) lifts each label cleanly OFF the violin/box
   it sits on — the de-clutter without moving the JS-positioned labels. */
.d3view-viz[data-viz-style-preset="premium"] svg.box text.box,
.d3view-viz[data-viz-style-preset="premium"] svg.box text.whisker {
    fill: var(--np-tick, #7a8699) !important;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}
/* median/q label gets a touch more weight + the accent ink so the median reads first */
.d3view-viz[data-viz-style-preset="premium"] svg.box text.box {
    font-weight: 500;
}
/* column title under each cell: slate 600 (was black) */
.d3view-viz[data-viz-style-preset="premium"] svg.box text.title {
    fill: var(--np-ink-2, #334155) !important;
    font-weight: 600 !important;
}
/* interactive downscale for the dense value labels + column title (export keeps
   the big native px from premium globalAxisTickFontSize, 24px) */
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] svg.box text.box,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] svg.box text.whisker {
    font-size: 11px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] svg.box text.title {
    font-size: 15px !important;
}

/* ---- multiboxplot marks (its own classes; axis ticks/title/domain already premium) ---- */
/* IQR boxes: soft slate fill + hairline (was #f5f5f5 fill / black stroke) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] rect.boxes {
    fill: var(--np-box-fill) !important;
    stroke: var(--np-box-stroke) !important;
    stroke-width: 1px !important;
}
/* median rules: accent ink (was black) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] line.medianLines {
    stroke: var(--np-median) !important;
    stroke-width: 2px !important;
    stroke-linecap: round !important;
}
/* whisker / vertical lines: slate hairline (was black) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] line.vertLines {
    stroke: var(--np-whisker) !important;
    stroke-width: 1px !important;
}
/* chart border: hairline cage (was #ddd) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] rect.chart-border {
    stroke: var(--np-hair, #dfe4ec) !important;
}
/* individual / outlier points: muted slate + coral outliers */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] circle.indPoints {
    fill: #6f86d6 !important;
    fill-opacity: .55 !important;
    stroke: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] circle.indPoints.outlier,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="multiboxplot"] circle.outlier {
    fill: var(--np-outlier) !important;
    fill-opacity: .7 !important;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- LINE CHART (Option A) ----------
   linechart DOM: lines `.focus .graphs g.path path.line` (stroke = data colour,
   2px, miter), markers `g.circles circle` (r5, no stroke), value labels
   `g.texts text` (data-colour fill). Horizontal gridlines already come from the
   Y-axis innerTickSize(-chartWidth) + the generic `g.y.axis .tick line` hairline
   rule. Polish: round line joins/caps, a white halo ring on the markers (the
   bubble-marker look) so points read above the line + grid, and a white text halo
   so the value labels lift cleanly off the line/grid. Line + label COLOURS stay
   data-driven (the series colour is the chart's identity) — we only refine form. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] .focus .graphs g.path path.line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* subtle lift on the whole marker layer (premium-only, no per-mark DOM) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles {
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .12));
}
/* value labels: keep the data colour but add a crisp white halo (paint-order
   stroke under the fill) so the number lifts off the line + gridlines, plus
   tabular figures for a clean numeric column. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.texts text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- LINE CHART (Option A) ----------
   linechart DOM: lines `.focus .graphs g.path path.line` (stroke = data colour,
   2px, miter), markers `g.circles circle` (r5, no stroke), value labels
   `g.texts text` (data-colour fill). Horizontal gridlines already come from the
   Y-axis innerTickSize(-chartWidth) + the generic `g.y.axis .tick line` hairline
   rule. Polish: round line joins/caps, a white halo ring on the markers (the
   bubble-marker look) so points read above the line + grid, and a white text halo
   so the value labels lift cleanly off the line/grid. Line + label COLOURS stay
   data-driven (the series colour is the chart's identity) — we only refine form. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] .focus .graphs g.path path.line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* subtle lift on the whole marker layer (premium-only, no per-mark DOM) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles {
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .12));
}
/* value labels: keep the data colour but add a crisp white halo (paint-order
   stroke under the fill) so the number lifts off the line + gridlines, plus
   tabular figures for a clean numeric column. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.texts text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- FREQUENCY PLOT (Option A) ----------
   frequencyplot is viz.defs (.d3view-viz, data-chart-type="frequencyplot"), so the
   card + slate axis ticks + hairline domain + legbar band already come from the
   generic block. DOM: bars `g.bar > rect` (fill inline .attr/.style), count labels
   `text.val`, category labels `text.key`. Both viewType=horizontal (g.x.axis) and
   vertical (g.y.axis) share these classes. Polish: a soft corner radius on the bars
   and slate, tabular value + category labels (today plain black). Premium-only +
   chart-scoped -> default/compact + every other chart untouched. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] g.bar rect {
    rx: 3px;
    ry: 3px;
}
/* NOTE: do NOT force a fill here — in premium the count is placed INSIDE the bar
   and frequencyplot.js sets a contrast fill via Plugins.Helpers.lightOrDark (white
   on dark bars). A !important fill would override that and kill the contrast. Only
   refine the type. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.key {
    fill: var(--np-ink-2) !important;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- LINE CHART (Option A) ----------
   linechart DOM: lines `.focus .graphs g.path path.line` (stroke = data colour,
   2px, miter), markers `g.circles circle` (r5, no stroke), value labels
   `g.texts text` (data-colour fill). Horizontal gridlines already come from the
   Y-axis innerTickSize(-chartWidth) + the generic `g.y.axis .tick line` hairline
   rule. Polish: round line joins/caps, a white halo ring on the markers (the
   bubble-marker look) so points read above the line + grid, and a white text halo
   so the value labels lift cleanly off the line/grid. Line + label COLOURS stay
   data-driven (the series colour is the chart's identity) — we only refine form. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] .focus .graphs g.path path.line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* subtle lift on the whole marker layer (premium-only, no per-mark DOM) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles {
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .12));
}
/* value labels: keep the data colour but add a crisp white halo (paint-order
   stroke under the fill) so the number lifts off the line + gridlines, plus
   tabular figures for a clean numeric column. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.texts text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- FREQUENCY PLOT (Option A) ----------
   frequencyplot is viz.defs (.d3view-viz, data-chart-type="frequencyplot"), so the
   card + slate axis ticks + hairline domain + legbar band already come from the
   generic block. DOM: bars `g.bar > rect` (fill inline .attr/.style), count labels
   `text.val`, category labels `text.key`. Both viewType=horizontal (g.x.axis) and
   vertical (g.y.axis) share these classes. Polish: a soft corner radius on the bars
   and slate, tabular value + category labels (today plain black). Premium-only +
   chart-scoped -> default/compact + every other chart untouched. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] g.bar rect {
    rx: 3px;
    ry: 3px;
}
/* NOTE: do NOT force a fill here — in premium the count is placed INSIDE the bar
   and frequencyplot.js sets a contrast fill via Plugins.Helpers.lightOrDark (white
   on dark bars). A !important fill would override that and kill the contrast. Only
   refine the type. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.key {
    fill: var(--np-ink-2) !important;
}

/* ---------- HEXAGONAL density (Option A) ----------
   hex is viz.defs (data-chart-type="hexagonal" — the vizModel type; hex.js's
   internal opt.chartType='hex' is NOT what gets stamped). The card + slate axis
   ticks + hairline domain already come from the generic cartesian block. DOM:
   `path.hexagon` cells with an inline black 1px stroke (heavy on a dense field).
   Polish: swap the black separator for a crisp WHITE hairline so the honeycomb
   reads as a clean density mesh (the inline stroke needs !important). The numeric
   colour legend (g.num_colorlegend) already gets slate ticks from the generic rule. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="hexagonal"] path.hexagon {
    stroke: #ffffff !important;
    stroke-width: 0.6px !important;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- LINE CHART (Option A) ----------
   linechart DOM: lines `.focus .graphs g.path path.line` (stroke = data colour,
   2px, miter), markers `g.circles circle` (r5, no stroke), value labels
   `g.texts text` (data-colour fill). Horizontal gridlines already come from the
   Y-axis innerTickSize(-chartWidth) + the generic `g.y.axis .tick line` hairline
   rule. Polish: round line joins/caps, a white halo ring on the markers (the
   bubble-marker look) so points read above the line + grid, and a white text halo
   so the value labels lift cleanly off the line/grid. Line + label COLOURS stay
   data-driven (the series colour is the chart's identity) — we only refine form. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] .focus .graphs g.path path.line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* subtle lift on the whole marker layer (premium-only, no per-mark DOM) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles {
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .12));
}
/* value labels: keep the data colour but add a crisp white halo (paint-order
   stroke under the fill) so the number lifts off the line + gridlines, plus
   tabular figures for a clean numeric column. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.texts text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- FREQUENCY PLOT (Option A) ----------
   frequencyplot is viz.defs (.d3view-viz, data-chart-type="frequencyplot"), so the
   card + slate axis ticks + hairline domain + legbar band already come from the
   generic block. DOM: bars `g.bar > rect` (fill inline .attr/.style), count labels
   `text.val`, category labels `text.key`. Both viewType=horizontal (g.x.axis) and
   vertical (g.y.axis) share these classes. Polish: a soft corner radius on the bars
   and slate, tabular value + category labels (today plain black). Premium-only +
   chart-scoped -> default/compact + every other chart untouched. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] g.bar rect {
    rx: 3px;
    ry: 3px;
}
/* NOTE: do NOT force a fill here — in premium the count is placed INSIDE the bar
   and frequencyplot.js sets a contrast fill via Plugins.Helpers.lightOrDark (white
   on dark bars). A !important fill would override that and kill the contrast. Only
   refine the type. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.key {
    fill: var(--np-ink-2) !important;
}

/* ---------- HEXAGONAL density (Option A) ----------
   hex is viz.defs (data-chart-type="hexagonal" — the vizModel type; hex.js's
   internal opt.chartType='hex' is NOT what gets stamped). The card + slate axis
   ticks + hairline domain already come from the generic cartesian block. DOM:
   `path.hexagon` cells with an inline black 1px stroke (heavy on a dense field).
   Polish: swap the black separator for a crisp WHITE hairline so the honeycomb
   reads as a clean density mesh (the inline stroke needs !important). The numeric
   colour legend (g.num_colorlegend) already gets slate ticks from the generic rule. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="hexagonal"] path.hexagon {
    stroke: #ffffff !important;
    stroke-width: 0.6px !important;
}

/* ---------- CIRCLE PACK (Option A) ----------
   Updated 2026-06-06 - SIM-1002: circlePack is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM; its svg.circlePack lives under .d3view-viz with
   data-chart-type="circlepack"), so the card comes from the generic
   :has(.d3view-viz[...premium]) rule and these are ONLY the circlepack-specific
   marks. The JS now sizes/ truncates/ hides labels and gives them a legible slate
   fill in ALL themes; premium adds the white halo + crisp rings + faint leaf tint +
   a soft depth shadow. Inline fills/strokes -> !important. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.main {
    filter: drop-shadow(0 2px 6px rgba(16, 24, 40, .10));
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.node > circle,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.leaf > circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* leaf circles render white-on-white (invisible on the card); give them a faint
   slate tint + hairline so a drilled-in level reads. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.leaf > circle {
    fill: color-mix(in oklab, var(--np-hair) 60%, #ffffff) !important;
    stroke: var(--np-hair) !important;
}
/* premium halo on top of the JS slate fill so labels read on any circle */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack text.label {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

/* ============================================================================
   SIM-1002 - Premium "Option A" frame: second wave of viz.defs charts.
   Added by shashank2104 on 2026-06-05.

   linechart / histogram / frequencyplot / hex / chord are viz.defs charts that
   already inherit the ENTIRE generic premium frame above (card, top "Legend by"
   legbar band, soft grid, hairline slate axes, slate axis titles, interactive
   font scale). These blocks add ONLY the chart-specific mark polish — every rule
   is scoped to BOTH the premium attribute AND [data-chart-type="..."], so default
   / compact decks (no marker) and every other chart stay byte-for-byte unchanged.
   Marks are set INLINE by the visualizers (.style()/.attr()), so fills/strokes
   need !important. circlepack is a STANDALONE path (own div>svg.circlePack, no
   .d3view-viz) handled in its own block further below.
   ============================================================================ */

/* ---------- HISTOGRAM (Option A) ----------
   Updated 2026-06-06 - SIM-1002: histogram is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM and lives under .d3view-viz with data-chart-type="histogram"),
   so the generic block above ALREADY gives it the card, soft grid, hairline slate
   axes/ticks/domains, slate axis titles, the legbar band and the interactive font
   scale. The histogram body sits in an inner `.d3view-histogram` mounted in $vizEl,
   but the generic descendant selectors reach its g.x.axis / g.y.axis / text.xLabel
   anyway. This block is therefore TRIMMED to ONLY the histogram-specific marks
   (bars, KDE curve, datum lines, the outer plot frame, bound/sample stats text).
   Marks are inline .style()/.attr() -> !important. Scoped to premium + chart-type
   so default/compact + other charts stay byte-identical. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.outer-rect {
    stroke: var(--np-hair) !important;
    stroke-width: 1 !important;
}
/* bars: keep the data fill (series identity), add a soft top-corner radius + a
   crisp white hairline separator so adjacent bins read cleanly. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] rect.layer-rect {
    rx: 2px;
    ry: 2px;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
/* mean / std-dev datum-line LABELS (text.datum_text) -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.datum_text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}
/* KDE overlay curve (g.kde > path, class-less, dimgray inline) -> slate hairline + right axis */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde path {
    stroke: var(--np-tick) !important;
    fill: none !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis path.domain {
    stroke: var(--np-hair) !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.kde_axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}
/* samples-count / mean-SD summary + bound region (Lower/Mid/Upper) labels -> slate tabular */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] text.samples-count,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.mean-sd-text text,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="histogram"] g.bounds-labels text {
    fill: var(--np-ink-3) !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- LINE CHART (Option A) ----------
   linechart DOM: lines `.focus .graphs g.path path.line` (stroke = data colour,
   2px, miter), markers `g.circles circle` (r5, no stroke), value labels
   `g.texts text` (data-colour fill). Horizontal gridlines already come from the
   Y-axis innerTickSize(-chartWidth) + the generic `g.y.axis .tick line` hairline
   rule. Polish: round line joins/caps, a white halo ring on the markers (the
   bubble-marker look) so points read above the line + grid, and a white text halo
   so the value labels lift cleanly off the line/grid. Line + label COLOURS stay
   data-driven (the series colour is the chart's identity) — we only refine form. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] .focus .graphs g.path path.line {
    stroke-linejoin: round;
    stroke-linecap: round;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* subtle lift on the whole marker layer (premium-only, no per-mark DOM) */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.circles {
    filter: drop-shadow(0 1px 1.5px rgba(16, 24, 40, .12));
}
/* value labels: keep the data colour but add a crisp white halo (paint-order
   stroke under the fill) so the number lifts off the line + gridlines, plus
   tabular figures for a clean numeric column. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="linechart"] g.texts text {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ---------- FREQUENCY PLOT (Option A) ----------
   frequencyplot is viz.defs (.d3view-viz, data-chart-type="frequencyplot"), so the
   card + slate axis ticks + hairline domain + legbar band already come from the
   generic block. DOM: bars `g.bar > rect` (fill inline .attr/.style), count labels
   `text.val`, category labels `text.key`. Both viewType=horizontal (g.x.axis) and
   vertical (g.y.axis) share these classes. Polish: a soft corner radius on the bars
   and slate, tabular value + category labels (today plain black). Premium-only +
   chart-scoped -> default/compact + every other chart untouched. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] g.bar rect {
    rx: 3px;
    ry: 3px;
}
/* NOTE: do NOT force a fill here — in premium the count is placed INSIDE the bar
   and frequencyplot.js sets a contrast fill via Plugins.Helpers.lightOrDark (white
   on dark bars). A !important fill would override that and kill the contrast. Only
   refine the type. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="frequencyplot"] text.key {
    fill: var(--np-ink-2) !important;
}

/* ---------- HEXAGONAL density (Option A) ----------
   hex is viz.defs (data-chart-type="hexagonal" — the vizModel type; hex.js's
   internal opt.chartType='hex' is NOT what gets stamped). The card + slate axis
   ticks + hairline domain already come from the generic cartesian block. DOM:
   `path.hexagon` cells with an inline black 1px stroke (heavy on a dense field).
   Polish: swap the black separator for a crisp WHITE hairline so the honeycomb
   reads as a clean density mesh (the inline stroke needs !important). The numeric
   colour legend (g.num_colorlegend) already gets slate ticks from the generic rule. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="hexagonal"] path.hexagon {
    stroke: #ffffff !important;
    stroke-width: 0.6px !important;
}

/* ---------- CIRCLE PACK (Option A) ----------
   Updated 2026-06-06 - SIM-1002: circlePack is now a REAL viz.defs chart (it calls
   Viz.Defs.InitDOM; its svg.circlePack lives under .d3view-viz with
   data-chart-type="circlepack"), so the card comes from the generic
   :has(.d3view-viz[...premium]) rule and these are ONLY the circlepack-specific
   marks. The JS now sizes/ truncates/ hides labels and gives them a legible slate
   fill in ALL themes; premium adds the white halo + crisp rings + faint leaf tint +
   a soft depth shadow. Inline fills/strokes -> !important. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.main {
    filter: drop-shadow(0 2px 6px rgba(16, 24, 40, .10));
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.node > circle,
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.leaf > circle {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
/* leaf circles render white-on-white (invisible on the card); give them a faint
   slate tint + hairline so a drilled-in level reads. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack g.leaf > circle {
    fill: color-mix(in oklab, var(--np-hair) 60%, #ffffff) !important;
    stroke: var(--np-hair) !important;
}
/* premium halo on top of the JS slate fill so labels read on any circle */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="circlepack"] svg.circlePack text.label {
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

/* ---------- CHORD diagram (Option A) — RADIAL ----------
   chord is viz.defs (data-chart-type="chord") but RADIAL — its arcs + ribbons are
   not the generic cartesian axis groups, so it needs bespoke mark polish like
   donut/pie/radar. The card + the top "Legend by" legbar band already come from
   the generic block (colorBy lights it). DOM: outer group arcs `g.outer_chords
   path` (fill = colorBy, inline, same-colour stroke), ribbons `g.inner_chords
   path` (fill = colorBy, inline, opaque), HTML labels `div.chord-label` in a
   foreignObject. Polish: a soft lift on the whole diagram, crisp WHITE hairline
   separators between arcs, and translucent ribbons so the weave reads instead of
   merging into solid wedges. Inline fills/strokes -> !important; colours stay
   data-driven. Slate, refined labels. */
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="chord"] g.chart-container {
    filter: drop-shadow(0 2px 6px rgba(16, 24, 40, .08));
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="chord"] g.outer_chords path {
    stroke: #ffffff !important;
    stroke-width: 1.5px !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="chord"] g.inner_chords path {
    fill-opacity: .55 !important;
    stroke: #ffffff !important;
    stroke-width: .5px !important;
}
.d3view-viz[data-viz-style-preset="premium"][data-chart-type="chord"] div.chord-label {
    color: var(--np-ink-2) !important;
    font-weight: 600;
}

/* ============================================================================
   GENERIC: premium header-toolbar pill (.dv-viz-toolbar)
   Added by shashank2104 on 2026-06-05 - SIM-1002. A reusable white "pill" for
   ANY viz's in-chart action toolbar (settings / add-points / play / export). It
   mocks the Newton premium settings pill (.newton-simple-settings-header in
   newton.css — left untouched) but as ONE shared class so every chart gets the
   EXACT same toolbar chrome. Adoption is trivial: in the visualizer's PREMIUM
   path add the `dv-viz-toolbar` class to the toolbar's container element (e.g.
   iihs `.settings-container`, sparkline `.settings-actions-group` /
   `.play-controls .btn-group`).

   SELF-SCOPED on purpose: the class is added by JS ONLY in the premium path, so
   the class itself is the gate — no `.d3view-viz[…premium]` ancestor is required.
   This matters because some toolbars (iihs `.settings-container`) sit OUTSIDE the
   `.d3view-viz` wrapper as a sibling of the chart, where the wrapper's --np-*
   tokens wouldn't reach. So the block carries its OWN --np-* token aliases (same
   values as the .d3view-viz[…premium] set) → one design system, works anywhere.
   default/compact never get the class → byte-for-byte unchanged.
   ============================================================================ */
.dv-viz-toolbar {
    --np-surface:   #ffffff;
    --np-surface-2: #f1f4f9;
    --np-ink:       #0f172a;
    --np-ink-2:     #334155;
    --np-ink-4:     #94a3b8;
    --np-line:      #e6eaf1;
    --np-line-2:    #eef2f7;
    --np-sh-md:     0 6px 16px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.07);

    display: inline-flex !important;          /* beat any inline display on the container */
    align-items: center;
    gap: 1px;
    background: var(--np-surface);
    border: 1px solid var(--np-line);
    border-radius: 12px;
    box-shadow: var(--np-sh-md);
    padding: 3px 4px;
}
/* flatten every direct control (button, anchor-button, dropdown toggle) into a
   borderless ghost glyph with a rounded hover/active chip */
.dv-viz-toolbar > .btn,
.dv-viz-toolbar > a.btn,
.dv-viz-toolbar > button,
.dv-viz-toolbar > .dropdown > .btn,
.dv-viz-toolbar > .dropdown > a.btn,
.dv-viz-toolbar .dropdown-toggle {
    height: 30px;
    border: 1px solid transparent !important;
    background: transparent !important;
    border-radius: 8px !important;
    color: var(--np-ink-2) !important;
    box-shadow: none !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s, color .15s;
}
.dv-viz-toolbar > .btn:hover,
.dv-viz-toolbar > a.btn:hover,
.dv-viz-toolbar > button:hover,
.dv-viz-toolbar .dropdown-toggle:hover,
.dv-viz-toolbar .dropdown.open > .dropdown-toggle,
.dv-viz-toolbar.open .dropdown-toggle {
    background: var(--np-surface-2) !important;
    border-color: var(--np-line) !important;
    color: var(--np-ink) !important;
}
/* glyphs read as quiet slate until hover */
.dv-viz-toolbar .btn .fa,
.dv-viz-toolbar .btn .fas,
.dv-viz-toolbar .dropdown-toggle .fa {
    color: var(--np-ink-4);
}
/* the caret on a dropdown toggle is decorative — keep it muted + tight */
.dv-viz-toolbar .caret,
.dv-viz-toolbar .fa-caret-down {
    color: var(--np-ink-4);
    margin-left: 1px;
}
/* hairline divider between adjacent groups (e.g. Add Points | Settings) */
.dv-viz-toolbar > .settings-dropdown + .settings-dropdown,
.dv-viz-toolbar > .dropdown + .dropdown {
    margin-left: 3px;
    padding-left: 3px;
    border-left: 1px solid var(--np-line-2);
}

/* ============================================================================
   IIHS INTRUSIONS (parallelcoordinates_iihs) — premium frame (Option A)
   Added by shashank2104 on 2026-06-05 - SIM-1002. IIHS is now a viz.defs chart
   (.d3view-viz wrapper), so the shared rules above already give it the card, the
   slate ticks + dimension titles (downscaled), the soft domain cage and the
   left-aligned title. The rating BANDS keep their IIHS-standard saturated colors
   (threshold_colors at fill-opacity 0.75, drawn by iihs.js — NOT recolored here).
   svg.iihs_viz scopes these to IIHS so no other viz.defs chart is affected.
   ============================================================================ */
.d3view-viz[data-viz-style-preset="premium"] svg.iihs_viz g.occ_path path {
    stroke: var(--np-ink-4) !important;
}
.d3view-viz[data-viz-style-preset="premium"] svg.iihs_viz g.occ_path text {
    fill: var(--np-ink-2) !important;
    font-weight: 600;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] svg.iihs_viz g.occ_path text,
body:not(.d3view-exporting):not(.d3view-global-exporting) .d3view-viz[data-viz-style-preset="premium"] svg.iihs_viz g.threshold_labels text {
    font-size: 13px !important;
}

/* --- THE legbar hover fix (SIM-1002): IIHS's svg fills the whole `.viz-container.__main`
   (z-index 2) which starts at the SAME top as the `.viz-legends-container` legbar (z-index 1)
   and reserves the top band via the chart.top margin. Result: the transparent top of the svg
   container sits OVER the legbar and swallows every mouse event, so hovering a color-by series
   never reached VizLegendRenderer. Lift the legbar above the svg container so its chips receive
   pointer events. The legbar only covers the reserved top margin (no plotted marks there), so
   this is safe. Premium-only. --- */
.iihs-container .d3view-viz[data-viz-style-preset="premium"] .viz-legends-container {
    z-index: 5;
}

/* --- premium toolbar = a floating action cluster in the TOP-RIGHT corner,
   matching Newton's `.newton-simple-settings-header` (verified: absolute, ZERO
   reserved row height, pill floats top-right over the legend's EMPTY right end —
   chips are left-aligned, so no overlap with content). This is the web standard
   for chart actions (Plotly modebar / Grafana / Tableau): it overlays the chart's
   top edge and costs NO layout row, instead of eating a full header row. The
   legbar flows at the top of the chart; the pill sits over its right end, above
   the rail. (`.settings-container.dv-viz-toolbar` is premium-only, so default
   keeps the legacy absolute toolbar.) iihs.js ~2819 also sets an inline `right`
   each render → `!important` keeps the pill pinned. --- */
.iihs-container .settings-container.dv-viz-toolbar {
    position: absolute !important;
    top: 13px;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0;
    z-index: 10;
}

/* --- premium encoding RAIL: band swatch + mm range + overlay off-state. The
   panel chrome (grey bg, left divider, padding) comes from the generic
   `.attr-legends-container` rule; iihs.js positions it in the reserved gutter. --- */
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail .iihs-rail-band {
    width: 18px;
    height: 12px;
    border-radius: 3px;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail .iihs-rail-range {
    color: var(--np-ink-4);
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
}
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail .iihs-rail-off {
    opacity: .42;
}

/* --- rich rail hover (SIM-1002): each band / overlay row is a hoverable target
   that highlights its lines on the plot. The row itself lifts on hover/active so
   the interaction is discoverable; the foreground lines fade via the transition
   below so the dim/emphasis reads as a smooth focus rather than a hard flicker. --- */
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail li[data-key] {
    border-radius: 7px;
    padding: 3px 6px;
    margin: 0 -6px;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease;
}
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail li[data-key]:hover,
.d3view-viz[data-viz-style-preset="premium"] .iihs-attr-rail li[data-key].iihs-rail-hot {
    background: var(--np-surface-2, rgba(148, 163, 184, .16));
    box-shadow: inset 0 0 0 1px var(--np-divider, #cfd7e3);
}
.d3view-viz[data-viz-style-preset="premium"] svg.iihs_viz g.foreground path {
    transition: opacity .18s ease;
}

/* ============================================================================
   PARALLEL COORDINATES — premium frame (Option A · Refined Classic)
   Added by shashank2104 on 2026-06-05 - SIM-1002.

   Parallel's DOM differs from the cartesian charts (bubble/bar/line): each
   dimension is a vertical g.dimension > g.axis (not g.x/y.axis), the dimension
   title lives in g.axis-handle text, the polylines render to a CANVAS by default
   (g.foreground path only in SVG mode), and the line-width / opacity encodings
   render as IN-SVG legends (g.width_legend / g.opacity_legend) rather than the
   HTML .attr-legends-container rail bubble uses. The shared rules above already
   slate the dimension titles + ticks and downscale them on screen; the rules
   below add the parallel-only pieces: the soft vertical-axis cage, the encoding
   legends, the analytics overlays, and the companion table — all premium-scoped
   so default / compact decks are byte-identical.
   ============================================================================ */

/* --- vertical dimension axes: soft hairline cage (Option A #d7deea) --- */
.d3view-viz[data-viz-style-preset="premium"] g.dimension g.axis path.domain,
.d3view-viz[data-viz-style-preset="premium"] g.dimension g.axis .tick line {
    stroke: var(--np-axis) !important;
    stroke-width: 1 !important;
}

/* --- polylines: butt caps in SVG mode (round caps fill dash gaps so dashed
   encodings read solid — the same regression Newton hit; canvas paths set their
   own lineCap, so this only guards the SVG render path). --- */
.d3view-viz[data-viz-style-preset="premium"] svg.parallel g.foreground path,
.d3view-viz[data-viz-style-preset="premium"] svg.parallel g.background path {
    stroke-linecap: butt;
}

/* --- in-SVG encoding legends (line-width-by / opacity-by): premium text ---
   These are parallel's equivalent of bubble's encoding rail, but drawn as SVG
   <text> inside the plot. The "Line Width By: <col>" / "Opacity By: <col>"
   header is the .label tspan pair; the per-bin rows are g.legend > text. Slate
   them to match the rail, with the column name on the 2nd tspan reading as the
   title. The premium globalAxisTickFontSize does NOT touch these (they are not
   .axis text), so no downscale is needed — they render ~14px in both contexts. */
.d3view-viz[data-viz-style-preset="premium"] g.width_legend text.label,
.d3view-viz[data-viz-style-preset="premium"] g.opacity_legend text.label {
    fill: var(--np-ink) !important;
    font-weight: 600;
}
.d3view-viz[data-viz-style-preset="premium"] g.width_legend g.legend text,
.d3view-viz[data-viz-style-preset="premium"] g.opacity_legend g.legend text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- analytics overlays: correlation / std-dev stat boxes, KDE, heatline ---
   Soften the stat-box backing rects + text into the Option A palette so the
   overlays read as quiet annotations rather than hard boxes (mirrors the calm
   hairline cage). The numeric value text uses the slate ink + tabular figures. */
.d3view-viz[data-viz-style-preset="premium"] g.correlation rect,
.d3view-viz[data-viz-style-preset="premium"] g.std_dev rect {
    fill: var(--np-surface-2) !important;
    stroke: var(--np-divider) !important;
    stroke-width: 1 !important;
}
.d3view-viz[data-viz-style-preset="premium"] g.correlation text,
.d3view-viz[data-viz-style-preset="premium"] g.std_dev text {
    fill: var(--np-ink-2) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- companion table (TableDataViewer): premium header ---
   parallel docks a d3VIEW.Utils.TableDataViewer beside the chart (showTable).
   Give its header the slate kicker treatment and the rows a tabular
   look so the panel matches the Option A card material. Header toolbar is hidden
   via hideHeader:true, so only the column-header row + body need styling. */
.d3view-viz[data-viz-style-preset="premium"] .parallel_table_div .th-vt-header {
    color: var(--np-ink-3) !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--np-surface-2) !important;
}
.d3view-viz[data-viz-style-preset="premium"] .parallel_table_div .vitual-table-body-column {
    color: var(--np-ink-2) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- encoding RAIL layout (full HTML-rail unification with bubble) ---
   Parallel renders its line-width / opacity encodings into the same
   .attr-legends-container rail bubble uses, but the base structural CSS for that
   rail is scoped to div.bubble-chart-container, so parallel needs its own layout
   rules. Visual styling (grey panel, kicker + title, dashed dividers, .bin size)
   comes from the generic .attr-legends-container premium rules above. Parallel
   only renders the rail in premium, so this is premium-scoped — default / compact
   keep the legacy in-SVG legends and never get this. The rail is a flex sibling
   of .svg_container; pin both to their content width so the chart sits flush
   beside the rail instead of one growing to push the other away. */
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .attr-legends-container {
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    margin-left: 10px;
}
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .attr-legends-container .legends {
    width: 100%;
    flex: 0 0 auto;
}
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .attr-legends-container .legends ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .attr-legends-container .legends ul li {
    list-style: none;
    margin: 0;
}
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .attr-legends-container .min-max-legends {
    margin-top: 4px;
}
/* keep the chart's svg_container from growing (e.g. the table-position=right
   flex:1 rule) so it doesn't push the rail away with an empty gap. */
.d3view-viz[data-viz-style-preset="premium"] .parallel-container .svg_container {
    flex: 1 0 auto;
}
/* End SIM-1002 parallel premium frame */

/* ============================================================================
   SPARKLINE MATRIX — premium "Option A · Refined Classic" frame (SIM-1002)
   Added by shashank2104 on 2026-06-05 - SIM-1002 - sparkline_matrix is a viz.defs
   chart (Viz.Defs.InitDOM), so it already inherits the generic premium token
   block + the simlytiks-modern :has() card + the generic g.x/y.axis hairline
   domains. But its body is a GRID of heatmap cells (.viz-panel) each holding a
   tiny sparkline — unlike the cartesian charts — so it needs this chart-specific
   block. Everything is scoped to the premium marker, so default/compact decks
   (data-viz-style-preset=default|compact) are byte-for-byte unchanged.

   Design decisions confirmed with the user:
   • KEEP the saturated data-driven cell heatmap (fringeColorBy) AND the fringe
     colour legend EXACTLY as-is — that legend is the generic Viz.Defs numerical
     legend (viz.helpers.js) shared across every viz.defs chart, so we do NOT
     restyle it here. Premium only refines the PANELS + the HEADER toolbar.
   • NO encoding rail / "Curve by" chrome — the real chart has none; add none.
   • Header: clean up the EXISTING settings toolbar (Chart Type / play controls /
     time slider / Export / Settings) — no new title.
   ============================================================================ */

/* ---------- cell grid → hairline dividers (Option A clean grid) ----------
   Each .viz-panel defaults to a heavy 2px #aaa border; replace with a 1px
   --np-divider hairline so the heatmap reads as a crisp tiled grid. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .viz-panel {
    border: 1px solid var(--np-divider) !important;
}
/* empty / unmatched cells: keep them present but quiet (soft panel tint). */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .viz-panel.empty {
    background: var(--np-surface-2) !important;
}
/* kill the residual ~4px scrollbar: the premium :has card chrome makes the viz
   content a few px taller than its panel, so the panel shows an auto scrollbar even
   though the matrix is sized to FIT (no intentional scroll). Clip that slack at the
   panel — scoped via :has() to ONLY panels containing a premium sparkline_matrix, so
   nothing else is affected; overflow-y only, so the right-side fringe legend (which
   sits at the panel's right edge) is never clipped horizontally. */
.d3Panel:has(> .d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"]),
.d3Panel:has(.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"]) {
    overflow-y: hidden !important;
}
/* also clip the inner viz container (the slack otherwise just hops down to it) */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .viz-container.__main {
    overflow-y: hidden !important;
}
/* breathing room around the grid (cells were ~13px from the card edge = too tight).
   The container width/height are set inline by the JS layout, so we use border-box
   + padding to INSET the .viz-panels block WITHOUT changing that outer box (no
   overflow / no scrollbar). Gives the wall a clean margin on all four sides. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .sparkline-container {
    box-sizing: border-box !important;
    padding: 10px 20px 14px !important;
}

/* ---------- per-cell axes → hairline, compact ticks ----------
   The generic interactive rule forces .tick text to 13px, which is far too big
   inside a ~286x138 matrix cell → the cramped, overlapping tick labels. Pull the
   per-cell tick text down to a compact 8px (interactive) and soften the tick
   lines to the --np-hair cage. Domains already hairline via the generic rule.
   Export keeps the bigger globalAxisTickFontSize for PPT legibility. */
body:not(.d3view-exporting):not(.d3view-global-exporting)
  .d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline g.x.axis .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting)
  .d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline g.y.axis .tick text {
    font-size: 8px !important;
    fill: var(--np-tick) !important;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline g.x.axis .tick line,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline g.y.axis .tick line {
    stroke: var(--np-hair) !important;
    stroke-opacity: .9;
}

/* ---------- sparkline ink → crisp, MODE-SAFE ----------
   The per-cell base curve is a CANVAS raster (getCanvasImage), whose colour is
   engine-driven per vizType — white on colour_panels/both (coloured cells), the
   colourBy hue otherwise, steelblue on white cells in `sparkline` mode. We must
   NOT force a CSS colour on it (white would vanish on the white cells of
   `sparkline` mode), so the premium crispness (heavier line + round caps) is
   applied in getCanvasImage (JS, premium-gated) instead. Here we only lightly
   refine the moving-average overlay (path.sma) — keep its engine colour (so it
   stays visible in every mode), just calm the default 3px weight. Butt caps are
   intentional: round caps fill dash gaps and the sma is dashed. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline g.chart-container path.sma {
    stroke-width: 2px !important;
    opacity: .9;
}

/* ---------- min / max markers + value labels → refined, repositioned ----------
   The Min/Max value labels are an INTENTIONAL feature (kept). The clutter was that
   they sat ON the curve and collided with the top-left cell name — so the JS
   (premium) moves them to the bottom corners (Min bottom-left, Max bottom-right).
   Here we make them read cleanly on any heatmap fill: a tabular white label on a
   dark legibility plate (paint-order stroke). The dots keep a clean white ring and
   stay on the curve to mark WHERE min/max occur. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline circle.minmax {
    stroke: #ffffff !important;
    stroke-width: 1.4px !important;
}
/* keep the DEFAULT on-curve placement + look; just render crisp with NO stroke
   (the JS hides a label only when it would overlap the cell name). */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] svg.sparkline text.minmaxText {
    stroke: none !important;
    paint-order: normal !important;
    font-variant-numeric: tabular-nums;
}

/* ---------- cell label (.panel-name) → refined, legible on any fill ----------
   The JS flips .light-text by cell luminance; keep that. Add weight + tight
   letter-spacing + a soft shadow so the name reads on both the lightest and
   darkest heatmap cells. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .viz-panel .panel-name {
    font-weight: 600;
    letter-spacing: .005em;
    text-shadow: 0 1px 2px rgba(15, 23, 42, .22);
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .viz-panel.light-text .panel-name {
    text-shadow: 0 1px 2px rgba(15, 23, 42, .45);
}

/* ======================== HEADER / TOOLBAR — premium cleanup ============
   The chart's own settings bar (#d3view-color-blocks-container-tpl .settings):
   Chart Type (Select2) · play controls · Current Time slider · Export · Settings.
   Default Bootstrap-3 chrome reads as a cluttered strip; premium turns it into a
   clean, modern toolbar — refined surface, a proper input for the type picker, a
   tidy icon-button group, a premium range slider, and refined action buttons.
   All scoped to premium → default/compact untouched. NOTE the fringe LEGEND is
   deliberately NOT styled (generic Viz.Defs numerical legend). */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings {
    height: auto !important;
    min-height: 44px;
    padding: 2px 2px 10px !important;
    margin-bottom: 0 !important;            /* margin is NOT counted by the JS height calc (outerHeight) → caused a scrollbar */
    /* border-bottom: 1px solid var(--np-line-2); */
    gap: 12px;
    align-items: center;
    justify-content: flex-end;              /* Newton-consistent: empty left, all controls right-aligned */
}
/* both clusters sit together on the right (Chart Type no longer grows to the far left) */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-left {
    flex: 0 0 auto !important;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-right {
    flex: 0 0 auto !important;
}
/* "Chart Type:" label → quiet slate kicker */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-left label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--np-ink-4);
    margin: 0;
}
/* Chart Type → simple Bootstrap dropdown (NOT Select2), styled exactly like the
   Newton premium settings toolbar's dropdown buttons (icon + value + caret, ghost
   until hover). The premium template renders .chart-type-dd; the Select2 path is
   default-only. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-toggle {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--np-ink-2) !important;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-toggle .fa,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-toggle .fas {
    color: var(--np-ink-4);
    font-size: 12px;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-toggle .fa-caret-down {
    margin-left: 1px;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-toggle:hover,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd.open .chart-type-toggle {
    background: var(--np-surface-2) !important;
    border-color: var(--np-line) !important;
    color: var(--np-ink) !important;
}
/* the dropdown menu → clean premium card */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-menu {
    border: 1px solid var(--np-line);
    border-radius: 11px;
    box-shadow: var(--np-sh-md);
    padding: 6px;
    margin-top: 6px;
    min-width: 184px;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-option > .btn-action {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--np-ink-2);
    transition: background .12s, color .12s;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-option > .btn-action .fa {
    width: 15px;
    text-align: center;
    color: var(--np-ink-4);
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-option:hover > .btn-action {
    background: var(--np-surface-2);
    color: var(--np-ink);
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-option.active > .btn-action {
    background: color-mix(in oklab, #2f6bff 12%, transparent);
    color: #1d3fb8;
    font-weight: 600;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .chart-type-dd .chart-type-option.active > .btn-action .fa {
    color: #2f6bff;
}

/* play controls pill CHROME now comes from the shared `.dv-viz-toolbar` class
   (added to `.play-controls .btn-group` in sparkline_matrix.js premium path);
   only the change-btn (icon button) sizing stays bespoke here. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .change-btn {
    height: 28px;
    min-width: 30px;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--np-ink-3) !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .14s, color .14s;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .change-btn:hover {
    background: var(--np-surface-2) !important;
    color: var(--np-ink) !important;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .change-btn[data-id="play"]:hover {
    color: #2f6bff !important;
}
/* the Current Time scrubber now sits INSIDE the player pill (after the transport
   buttons), separated by a hairline — one cohesive media-player control. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .pl-anim-sep {
    width: 1px;
    align-self: stretch;
    margin: 3px 7px;
    background: var(--np-line-2);
    flex: none;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .anim-slider-container.pl-anim-inline {
    padding: 0 8px 0 0 !important;
    gap: 8px;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .play-controls .btn-group .pl-anim-inline input.animation-slider-input {
    width: 150px;
}
/* the now-empty default .controls wrapper adds no gap in premium */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .controls {
    margin: 0 !important;
}

/* Current Time slider → inline label + slider on ONE row (was label-above-slider =
   2 lines, which grew the header and triggered the scrollbar) + premium track/thumb */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .anim-slider-container {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    padding: 0 !important;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .anim-slider-container label {
    font-size: 11px;
    font-weight: 600;
    color: var(--np-ink-3);
    margin: 0;
    white-space: nowrap;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] input.animation-slider-input {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 999px;
    background: var(--np-line);
    outline: none;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] input.animation-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2f6bff;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(16,24,40,.25);
    cursor: pointer;
    transition: transform .12s;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] input.animation-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.12);
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] input.animation-slider-input::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2f6bff;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(16,24,40,.25);
    cursor: pointer;
}

/* Export + Settings actions → Newton-style GHOST buttons (these already carry
   .btn-outline-on-hover in markup): transparent until hover, matching the Chart
   Type dropdown + Newton's toolbar so the whole bar is one consistent style. */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .download_anim,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-dd .dropdown-toggle {
    height: 32px;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--np-ink-2) !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: border-color .15s, background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .download_anim:hover,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-dd .dropdown-toggle:hover {
    border-color: var(--np-line) !important;
    background: var(--np-surface-2) !important;
    color: var(--np-ink) !important;
}

/* SECOND PILL — the right-hand controls group (Chart Type + Export + Settings).
   Pill CHROME now comes from the shared `.dv-viz-toolbar` class (added to
   `.settings-actions-group` in sparkline_matrix.js premium path); only the
   bespoke control sizing + the chart-type/actions divider stay here. */
/* size the three controls to sit snugly in the pill (drop the legacy inline margin) */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-actions-group .chart-type-toggle,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-actions-group .download_anim,
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-actions-group .settings-dd .dropdown-toggle {
    height: 28px !important;
    border-radius: 7px !important;
    margin: 0 !important;
}
/* a hairline divider between the Chart Type dropdown and the Export/Settings actions */
.d3view-viz[data-chart-type="sparkline_matrix"][data-viz-style-preset="premium"] .settings .settings-actions-group .chart-type-dd {
    border-right: 1px solid var(--np-line-2);
    margin-right: 3px;
    padding-right: 3px;
}

/* End SIM-1002 sparkline_matrix premium frame */

/* ============================================================================
   TABLE HEATMAP — premium "Option A · Refined Classic" frame (SIM-1002)
   Added by shashank2104 on 2026-06-11 - table_heatmap is a viz.defs chart
   (heatmap.js -> Viz.Defs.InitDOM), so the premium card + tokens already land via
   the generic rules; but its body is a row/column GRID of value-coloured cells
   with HTML foreignObject row/col labels — the cartesian axis rules are inert
   here, so it needs this chart-specific block. The calm sequential 'Blues' cell
   ramp + the white 3px cell grid + the value-encoding default are set in JS/preset
   (heatmap.js + VizStylePresets.premium.table_heatmap), NOT here. Everything is
   scoped to the premium marker — default/compact are byte-for-byte unchanged.
   ============================================================================ */

/* ---------- row / column labels → refined slate headers ---------- */
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .colLabel div {
    color: var(--np-ink-2, #334155);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .01em;
}
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .rowLabel div {
    color: var(--np-ink-3, #475569);
    font-weight: 500;
    font-size: 12.5px;
}
/* sort carets: quiet slate, lift on hover (default is a dim grey fa icon) */
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .rowLabel i.fa,
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .colLabel i.fa {
    color: var(--np-tick, #7a8699);
    font-size: 11px;
    transition: color .15s ease;
}
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .rowLabel i.fa:hover,
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] .colLabel i.fa:hover {
    color: var(--np-ink-2, #334155);
}

/* ---------- cells → rounded tiles (the white 3px gap stroke is set in JS) ---------- */
.d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] g.cell_g rect {
    rx: 6px;
    ry: 6px;
}

/* ---------- in-cell value labels → tabular, calm weight (INTERACTIVE only;
   export keeps the chart's own font options for PPT legibility) ---------- */
body:not(.d3view-exporting):not(.d3view-global-exporting)
  .d3view-viz[data-chart-type="table_heatmap"][data-viz-style-preset="premium"] g.cell_g text.node-txt {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* End SIM-1002 table_heatmap premium frame */
/* End SIM-1002 premium frame */

/* ============================================================================
   PedProTable — premium "Option A · Refined Classic" frame (SIM-1002)
   PedProTable is a STANDALONE visualizer: it builds its OWN DOM
   (div.pedpro-container > svg.d3view-pedpro), NOT through Viz.Defs.InitDOM, so
   the generic .d3view-viz[data-viz-style-preset="premium"] rules above never
   reach it. It carries its own per-chart gate — data-viz-style-preset stamped
   on .pedpro-container by pedprotable.js setDOM (from the resolved
   m.options.vizStylePresetId) — and this scoped block. Same --np-* token values
   as the newton/bubble premium system (so all read as one design system) plus
   GTR semantic bands. Premium-only; default/compact get no marker => byte-
   identical. Added by shashank2104 on 2026-06-05 - SIM-1002.
   ========================================================================== */
.pedpro-container[data-viz-style-preset="premium"] {
    --np-panel:     oklch(98.5% .004 260);
    --np-surface-2: color-mix(in oklab, var(--np-panel) 60%, transparent);
    --np-ink:       #0f172a;
    --np-ink-2:     #334155;
    --np-ink-3:     #64748b;
    --np-ink-4:     #94a3b8;
    --np-line:      #e6eaf1;
    --np-line-2:    #d7deea;
    --np-hair:      oklch(92% .008 260);
    --np-grid:      oklch(94% .006 260);
    --np-divider:   #cfd7e3;
    --np-tick:      #7a8699;
    /* GTR / HIC semantic bands */
    --gtr-green:#22c55e; --gtr-green-ink:#15803d; --gtr-green-soft:#dcfce7; --gtr-green-line:#bbf7d0;
    --gtr-amber:#eab308; --gtr-amber-ink:#a16207;
    --gtr-red:#ef4444;   --gtr-red-ink:#b91c1c;   --gtr-red-soft:#fee2e2;   --gtr-red-line:#fecaca;
    --np-zone:#1d4ed8;
}

/* --- plot cage: soft grid, hairline axes, refined tabular ticks + titles --- */
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-grid line {
    stroke: var(--np-grid) !important;
    shape-rendering: crispEdges;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-axis path.domain,
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-axis .tick line {
    stroke: var(--np-hair) !important;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-axis .tick text {
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro text.scatter-axis {
    fill: var(--np-ink-2) !important;
    font-weight: 600;
}

/* --- HIC marks: white halo ring + soft lift for crisp separation --- */
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-circles {
    filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, .10));
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro circle.scatter-point {
    stroke: #ffffff !important;
    stroke-width: 1.25px !important;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro text.scatter-hic {
    font-weight: 600;
}

/* --- score / KPI labels (Predicted Score, Headform, point count) --- */
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro text.score_labels {
    fill: var(--np-ink) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- flagged 1/3-zone overlay (dashed rings + callout) --- */
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.zone-overlay .pedpro-zone-outline {
    stroke: var(--np-zone) !important;
}

/* --- bottom HIC band legend: refined text, hairline separation --- */
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.colorgroups text {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.colorgroups rect {
    rx: 2px;
}

/* --- floating action toolbar (top-right over the plot): refined buttons --- */
.pedpro-container[data-viz-style-preset="premium"] .settings.row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 6px 0 0;
}
.pedpro-container[data-viz-style-preset="premium"] .settings.row .btn {
    border: 1px solid var(--np-line) !important;
    background: #ffffff !important;
    border-radius: 9px !important;
    color: var(--np-ink-2) !important;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pedpro-container[data-viz-style-preset="premium"] .settings.row .btn:hover {
    background: var(--np-surface-2) !important;
    color: var(--np-ink) !important;
    border-color: var(--np-line-2) !important;
}

/* --- GTR compliance chip (status-token pill; sits in the toolbar row) --- */
/* :not(.hidden) so toggling showComplianceBadge off (updateComplianceBadge adds
   .hidden = display:none) still removes the chip — the premium display:inline-flex
   would otherwise override Bootstrap's .hidden. */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-compliance-badge:not(.hidden) {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    white-space: nowrap;
}
/* compact chip inside the header: drop the verbose "(99% green · max HIC …)"
   detail (it now lives in the KPI strip) so the header fits the canvas width. */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .pedpro-compliance-badge span {
    display: none !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-compliance-badge.pedpro-badge-pass {
    background: var(--gtr-green-soft) !important;
    color: var(--gtr-green-ink) !important;
    border-color: var(--gtr-green-line) !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-compliance-badge.pedpro-badge-fail {
    background: var(--gtr-red-soft) !important;
    color: var(--gtr-red-ink) !important;
    border-color: var(--gtr-red-line) !important;
}

/* ---- premium "Option A" HTML chrome: header bar + KPI strip + band footer ----
   Built by pedprotable.js m.renderPremiumChrome() (premium-gated). The in-SVG
   score labels + colorgroups legend are suppressed (setOptions) so these replace
   them. .pedpro-premium-chrome flips the centered flex-row container to a column
   so header / plot / footer stack. Added by shashank2104 on 2026-06-05 - SIM-1002. */
.pedpro-container[data-viz-style-preset="premium"].pedpro-premium-chrome {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
}
.pedpro-container[data-viz-style-preset="premium"].pedpro-premium-chrome > svg.d3view-pedpro {
    align-self: center;
}

/* header row — bounded to the plot/canvas extent; toolbar + compact GTR chip
   align to the plot's right edge (no divider — the score card below provides the
   structure). */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    box-sizing: border-box;
    margin-left: var(--pp-plot-left, 0);
    width: var(--pp-plot-width, auto);
    padding: 2px 0 10px;
    margin-bottom: 0;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .pp-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .pp-kicker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--np-ink-4);
    white-space: nowrap;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .pp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
/* the moved toolbar row sits inline in the header (override its absolute float) */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .settings.row {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px !important;
}
/* Added by shashank2104 on 2026-06-26 - hide the interactive header toolbar (Ratings/Import/Export)
   during export. The inline-flex !important above is needed for the live inline layout, so removing
   it alone cannot hide the toolbar — this export-scoped rule (extra .d3view-exporting specificity +
   !important) is what actually keeps the chrome out of the snapshot/PPT. */
.d3view-exporting .pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .settings.row,
.d3view-global-exporting .pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-header .settings.row {
    display: none !important;
}
/* attached toolbar button group: Ratings | Import | Export as one connected pill */
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup {
    display: inline-flex;
    align-items: center;
}
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup .dropdown {
    margin: 0 !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .btn,
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .dropdown > .btn {
    border-radius: 0 !important;
    margin-left: -1px !important;
    margin-right: 0 !important;   /* kill the template's inline margin-right:4px on .configure-ratings */
    box-shadow: none !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .btn:first-child {
    border-radius: 9px 0 0 9px !important;
    margin-left: 0 !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .dropdown:last-child > .btn {
    border-radius: 0 9px 9px 0 !important;
}
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .btn:hover,
.pedpro-container[data-viz-style-preset="premium"] .pp-toolgroup > .dropdown > .btn:hover {
    z-index: 1;
}

/* KPI / score container — bounded box (left + right + bottom borders) aligned to
   the plot extent. */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis {
    display: flex;
    align-items: stretch;
    gap: 0;
    box-sizing: border-box;
    margin-left: var(--pp-plot-left, 0);
    width: var(--pp-plot-width, auto);
    padding: 12px 18px;
    border: 1px solid var(--np-line-2);
    border-radius: var(--np-r-lg, 12px);
    margin-bottom: 8px;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis .pp-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 26px;
    margin-right: 26px;
    border-right: 1px solid var(--np-line-2);
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis .pp-kpi:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis .pp-k {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--np-ink-3);
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis .pp-v {
    font-size: 20px;
    font-weight: 700;
    color: var(--np-ink);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-kpis .pp-v small {
    font-size: 12px;
    font-weight: 600;
    color: var(--np-ink-4);
    margin-left: 3px;
}

/* footer: point count + HIC band chips — aligned to the plot, centred under it */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
    margin-left: var(--pp-plot-left, 0);
    width: var(--pp-plot-width, auto);
    padding: 10px 0 4px;
    margin-top: 2px;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-pts {
    font-size: 12px;
    font-weight: 600;
    color: var(--np-ink-3);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--np-ink-2);
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--np-line);
    background: #ffffff;
    font-variant-numeric: tabular-nums;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band .pp-sw {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}
/* threshold-legend hover affordance + the resulting point highlight transition.
   Hovering a band chip (renderPremiumChrome wires mouseenter/leave) dims the
   points outside that HIC band and rings the matching ones. */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band {
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band:hover,
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band.pp-band-active {
    background: color-mix(in oklab, var(--pp-band-color, #94a3b8) 14%, #fff);
    border-color: var(--pp-band-color, var(--np-line-2));
    color: var(--np-ink);
    transform: translateY(-1px);
    box-shadow: 0 3px 9px color-mix(in oklab, var(--pp-band-color, #0f172a) 32%, transparent);
}
/* the band swatch gets a matching colour ring while its chip is hovered */
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band:hover .pp-sw,
.pedpro-container[data-viz-style-preset="premium"] .pedpro-premium-foot .pp-band.pp-band-active .pp-sw {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--pp-band-color, #94a3b8) 28%, transparent);
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-circles circle.scatter-point,
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro g.scatter-circles text.scatter-hic {
    transition: opacity .22s ease, stroke-width .2s ease;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro circle.scatter-point.pp-pt-dim,
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro text.scatter-hic.pp-pt-dim {
    opacity: .1 !important;
}
.pedpro-container[data-viz-style-preset="premium"] svg.d3view-pedpro circle.scatter-point.pp-pt-hot {
    stroke: var(--np-ink) !important;
    stroke-width: 2px !important;
}
/* End SIM-1002 pedprotable premium frame */

 

/* ============================================================================
   SIM-1002 — PedProViz (composite hood map + acc-curve + metric bars) premium
   STANDALONE path. Root = div.d3view-pedpro  (distinct from pedprotable's
   .pedpro-container > svg.d3view-pedpro). Gate = data-viz-style-preset stamped
   in PedProViz.setUpDOM. All rules premium-scoped → default/compact byte-identical.
   Added by shashank2104 on 2026-06-05.
   ============================================================================ */
div.d3view-pedpro[data-viz-style-preset="premium"] {
    /* The --np-* tokens are declared on .d3view-viz[...premium]; PedProViz's root is
       .d3view-pedpro (not .d3view-viz), so re-declare the SAME oklch values here so
       var(--np-*) resolves (mirrors the pedprotable standalone block). */
    --np-surface:   #ffffff;
    --np-panel:     oklch(98.5% .004 260);
    --np-surface-2: color-mix(in oklab, var(--np-panel) 60%, transparent);
    --np-ink:       #0f172a;
    --np-ink-2:     #334155;
    --np-ink-3:     #64748b;
    --np-ink-4:     #94a3b8;
    --np-line:      #e6eaf1;
    --np-line-2:    #eef2f7;
    --np-hair:      oklch(92% .008 260);
    --np-divider:   #cfd7e3;
    --np-grid:      #e7ecf4;
    --np-tick:      #7a8699;
    --np-r-lg:      18px;
    --np-sh-md:     0 6px 16px -6px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.07);
    /* GTR rating hues kept (regulatory) — only used by the band legend swatches */
    display: flex;
    flex-direction: column;
    background: transparent;
}
/* ---- stage: holds the SVG + absolute pic/newton overlays between the chrome ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .svg-container { height: 100%; width: 100%; }

/* ---- hood map: soft hairline cage + slate ticks/titles ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro #squaresGrid rect {
    stroke: var(--np-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .axes line,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .verticalGrid line,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .horizontalGrid line,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .scatterPlotAxis,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .main > line {
    stroke: var(--np-hair);
    shape-rendering: crispEdges;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .tick text {
    fill: var(--np-tick);
    font-variant-numeric: tabular-nums;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .scatter-axis-label,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .front-label,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .l-text {
    fill: var(--np-ink-2);
    font-weight: 600;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .score-text { display: none; } /* shown as a KPI instead */

/* ---- hood dots: white halo + soft lift, GTR semantic fill preserved ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup {
    filter: drop-shadow(0 1px 1.5px rgba(15,23,42,.12));
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup circle.dot {
    stroke: #fff !important;
    stroke-width: 1.4px !important;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup circle.dot.sel {
    stroke: var(--np-ink) !important;
    stroke-width: 2.2px !important;
}

/* ---- metric bar charts (HIC / ACC / T1 / T2): hairline axes, slate labels ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barXAxis path.domain,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barYAxis path.domain,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barXAxis line,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barYAxis line {
    stroke: var(--np-hair) !important;
    fill: none;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barXAxis text,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barYAxis text {
    fill: var(--np-tick);
    font-variant-numeric: tabular-nums;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro [class^="chartText"] {
    fill: var(--np-ink-2) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.bars rect.bar { fill-opacity: .9; }

/* Added by shashank2104 on 2026-06-26 - align the PedProViz scatter axis ticks with the Newton /
   premium tick styling on EXPORT (size, slate fill, tabular figures) so they read the same as every
   other chart. PedProViz is a separate visualizer that never went through the premium axis pipeline,
   so without this its export ticks fall back to a small default. */
.d3view-exporting div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .tick text,
.d3view-global-exporting div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .tick text {
    font-size: 16px !important;
    fill: var(--np-tick) !important;
    font-variant-numeric: tabular-nums;
}

/* ---- interactive font downscale (export keeps the big PPT scale) ---- */
body:not(.d3view-exporting):not(.d3view-global-exporting) div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .tick text,
body:not(.d3view-exporting):not(.d3view-global-exporting) div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barXAxis text,
body:not(.d3view-exporting):not(.d3view-global-exporting) div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro .barYAxis text {
    font-size: 12px !important;
}
body:not(.d3view-exporting):not(.d3view-global-exporting) div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro [class^="chartText"] {
    font-size: 12px !important;
}

/* ---- side-section image panel: clean framed card ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-pic {
    /* left/width are set by renderPremiumChrome (measured gap between the hood plot and the
       Newton card) so they never overlap at any width. */
    top: 4.5% !important;
    height: 30% !important;
    background: var(--np-surface, #fff);
    border: 1px solid var(--np-line);
    border-radius: var(--np-r-lg, 14px);
    box-shadow: var(--np-sh-md);
    overflow: hidden;
    padding: 4px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-pic img,
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-pic image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 10px;
}
/* slightly shorter Newton card in premium so the first metric-bar title clears its bottom edge */
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-newton {
    height: 36% !important;
}

/* ---- premium chrome: KPI strip (+ optional standard verdict row) ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-premium-header {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 84px;            /* KPI-strip only (no kicker, no verdict) */
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-premium-header.pp-has-verdict {
    height: 116px;          /* verdict row + KPI strip */
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-headrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 13px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-compliance-badge .pp-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
/* small band-coloured dot in front of the Max HIC value (carries the at-a-glance band colour) */
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-kpi-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(15,23,42,.05);
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-badge-pass {
    color: #2c6b45; background: #e7f5ec; border: 1px solid #bfe6cd;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-badge-pass .pp-dot {
    background: #3aa564; box-shadow: 0 0 0 3px rgba(58,165,100,.18);
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-badge-fail {
    color: #a3322c; background: #fbe7e6; border: 1px solid #f0c2bf;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-badge-fail .pp-dot {
    background: #e0544c; box-shadow: 0 0 0 3px rgba(224,84,76,.18);
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-premium-kpis {
    display: flex;
    align-items: stretch;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-kpi {
    flex: 0 0 auto;
    padding-right: 26px;
    margin-right: 26px;
    border-right: 1px solid var(--np-line-2);
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-kpi:last-child { border-right: 0; margin-right: 0; }
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-k {
    font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--np-ink-3);
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-v {
    font-size: 20px; font-weight: 700; color: var(--np-ink); letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; margin-top: 3px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-v small {
    font-size: 12px; font-weight: 600; color: var(--np-ink-4); margin-left: 3px;
}

/* ---- premium chrome: HIC rating-band legend footer ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] .pedpro-premium-foot {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid var(--np-line-2);
    margin-top: 4px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-pts {
    font-size: 12px; font-weight: 600; color: var(--np-ink-3); margin-right: 8px; font-variant-numeric: tabular-nums;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--np-ink-2);
    background: var(--np-surface, #fff);
    border: 1px solid var(--np-line);
    border-radius: 999px;
    padding: 4px 11px;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band .pp-sw { width: 11px; height: 11px; border-radius: 3px; }
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band .pp-rng { font-weight: 500; color: var(--np-ink-4); font-variant-numeric: tabular-nums; }

/* ---- band-chip hover → emphasise headforms+bars in that HIC band, dim the rest ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup circle.dot,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.bars rect.bar {
    transition: opacity .2s ease, stroke-width .2s ease;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup circle.dot.pp-pt-dim,
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.bars rect.bar.pp-pt-dim {
    opacity: .12 !important;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.dotsGroup circle.dot.pp-pt-hot {
    stroke: var(--np-ink) !important;
    stroke-width: 2.2px !important;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.bars rect.bar.pp-pt-hot {
    stroke: var(--np-ink) !important;
    stroke-width: 1px !important;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band {
    cursor: default;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band:hover,
div.d3view-pedpro[data-viz-style-preset="premium"] .pp-band.pp-band-active {
    background: color-mix(in oklab, var(--pp-band-color, #64748b) 12%, #fff);
    border-color: color-mix(in oklab, var(--pp-band-color, #64748b) 45%, var(--np-line));
    box-shadow: 0 1px 4px rgba(15,23,42,.10);
}

/* ---- metric-bar brush: a clearly visible accent selection rectangle ---- */
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.brush .extent {
    fill: rgba(47,91,234,.16) !important;
    stroke: #2f5bea !important;
    stroke-width: 1.25 !important;
    shape-rendering: crispEdges;
}
div.d3view-pedpro[data-viz-style-preset="premium"] svg#PedPro g.brush .resize rect {
    fill: #2f5bea !important;
    opacity: .6 !important;
    visibility: visible !important;
}
/* End SIM-1002 PedProViz premium frame */

/* /stylesheets/plugins.css */
/* Added by shashank2104 on 2026-04-17 - DVFIV-2001 - Hidden-modal shell for
 * MLModelCompareAdvancedView's render_in_hidden_container mode. Mirrors
 * simlytiks's .isHidden pattern — the modal renders with its full lifecycle
 * (widgets load via IntersectionObserver + Backbone events) but is visually
 * invisible to the user while a programmatic capture runs. */
.d3view-generic-modal-container.ml-compare-hidden-modal,
.modal.ml-compare-hidden-modal,
div.modal-backdrop.ml-compare-hidden-modal {
    /* Minimal hide: push behind all stacking contexts. Geometry, opacity, and
     * paint are preserved so IntersectionObserver + Backbone events fire as
     * normal inside the modal. Page content renders above it. */
    z-index: -1 !important;
    pointer-events: none !important;
}

:root {
    --plugin-box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    --plugin-box-shadow-light: 0 0px 10px 0 rgba(0,0,0,0.01),0 0px 18px 0 rgba(0,0,0,0.19);
    --plugin-box-shadow-lighter: 1px 1px 8px #ddd;
    --plugin-box-shadow-lightest: 0 1.6px 3.6px 0 rgb(0 0 0 / 13%), 0 0.3px 0.9px 0 rgb(0 0 0 / 11%);
    --plugin-rect-box-shadow: drop-shadow(2px 2px 5px rgba(0,0,0,0.4));
    --plugin-rect-box-shadow-lighter: drop-shadow(1px 1px 2px rgba(0,0,0,0.4));
    --d3view-corner-box-color: #428BCA;
    --plugin-background-color: #4f5359;
    --plugin-primary-color: #0b7bff;
    --plugin-text-color: #333;

    --neutralLight: #F0F0F0;
    --neutralLighter: #F5F5F5;
    --d3neutralLighterAlt: #FAFAFA;
    --itemHoverOptionsHover: #eee;

    --ribbon-active: #DB626C;

    --plugin-dark-background: rgba(52,53,65,1);
    /*--plugin-dark-container-bg: rgba(68,70,84,1);*/
    --plugin-dark-container-bg: #141414;

    --plugin-dark-color: #FFF;

    --transition-background-color: background-color 0.3s ease-in;

    --success-color: #5cb85c;
    --danger-color: #d9534f;

    --d3view-secondary-color: #808080;

    /* =========================================================
       d3VIEW Modern Foundation Tokens (--d3v-*)
       Shared design system used by --sl-*, --db-*, and global components.
       ========================================================= */

    /* Neutral scale (Slate) */
    --d3v-n-50:  #F8FAFC;
    --d3v-n-100: #F1F5F9;
    --d3v-n-200: #E2E8F0;
    --d3v-n-300: #CBD5E1;
    --d3v-n-400: #94A3B8;
    --d3v-n-500: #64748B;
    --d3v-n-600: #475569;
    --d3v-n-700: #334155;
    --d3v-n-800: #1E293B;
    --d3v-n-900: #0F172A;

    /* Surfaces */
    --d3v-bg-primary:   #FFFFFF;
    --d3v-bg-secondary: #F8FAFC;
    --d3v-bg-tertiary:  #F1F5F9;
    --d3v-bg-hover:     #E2E8F0;

    /* Text */
    --d3v-text-primary:   #1E293B;
    --d3v-text-secondary: #475569;
    --d3v-text-muted:     #94A3B8;
    --d3v-text-inverse:   #FFFFFF;

    /* Borders */
    --d3v-border:        #E2E8F0;
    --d3v-border-strong: #CBD5E1;

    /* Accent */
    --d3v-accent:       #3B82F6;
    --d3v-accent-hover: #2563EB;

    /* Status */
    --d3v-success: #10B981;
    --d3v-warning: #F59E0B;
    --d3v-danger:  #EF4444;
    --d3v-info:    #3B82F6;

    /* Shadows */
    --d3v-sh-xs:  0 1px 2px rgba(0,0,0,0.05);
    --d3v-sh-sm:  0 1px 3px rgba(0,0,0,0.08);
    --d3v-sh-md:  0 4px 12px rgba(0,0,0,0.10);
    --d3v-sh-lg:  0 10px 25px rgba(0,0,0,0.12);
    --d3v-sh-xl:  0 20px 40px rgba(0,0,0,0.15);

    /* Radii */
    --d3v-r-sm:   4px;
    --d3v-r-md:   8px;
    --d3v-r-lg:   12px;
    --d3v-r-xl:   16px;
    --d3v-r-2xl:  24px;
    --d3v-r-full: 9999px;

    /* Transitions */
    --d3v-t-fast:   all 0.12s ease;
    --d3v-t-base:   all 0.20s ease;
    --d3v-t-smooth: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    --d3v-t-spring: all 0.40s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Gradients */
    --d3v-grad-accent:  linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    --d3v-grad-success: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    --d3v-grad-danger:  linear-gradient(135deg, #EF4444 0%, #EC4899 100%);

    /* Pagination (div.div-pagination) - aligned with simlytiks-modern palette */
    --pag-bg: #FFFFFF;
    --pag-bg-hover: #F1F5F9;
    --pag-bg-active: #428bca;
    --pag-border: #E2E8F0;
    --pag-text: #1E293B;
    --pag-text-active: #FFFFFF;
    --pag-text-disabled: #94A3B8;
    --pag-radius: 6px;
    --pag-radius-first: 6px 0 0 6px;
    --pag-radius-last: 0 6px 6px 0;
    --pag-height: 36px;
    --pag-min-width: 36px;
    --pag-font-size: 13px;
    --pag-transition: background-color 0.15s ease, color 0.15s ease;
}

/* Global styles */
button.btn-outline-on-hover {
    background: transparent;
}
a.btn-outline-on-hover {
    color: #333;
}
.btn-outline-on-hover.style-override:hover:active {
    background-color: #eee!important;
}
.btn-primary-new {
    background: var(--plugin-primary-color);
    text-shadow: none;
    border-color: var(--plugin-primary-color);
}
.btn-dark-border {
    border-width: 2px!important;
    border-color: #333;
}
.btn-dark-border:hover{
    border-width: 2px!important;
}
.btn-round, .btn-round:hover {
    border-radius: 50%!important;
}
button.btn-outline-on-hover.active {
    background: #428bca!important;
    color: #FFF;
}
button.btn-outline-on-hover.btn-selected:hover {
    background-color: #428bca!important;
    color: #FFF!important;
}
.dropdown.open > .btn-outline-on-hover[data-toggle="dropdown"],
.dropdown.open > .btn-outline-on-hover.dropdown-toggle {
    border-radius: 4px!important;
    border: 1px solid #ddd!important;
    background-color: #eee!important;
}

button.btn-selected {
    background-color: #428bca !important;
    color: #FFF !important;
}
.btn-group button.btn-selected {
    border-color: #FFF;
}
.fa.fa-sm {
    font-size: 1em;
}
.fa.fa-xs {
    font-size: 0.8em;
}
.pl-icon-success {
    color: #5CB85C;
}
.ml5 {
    margin-left: 5px;
}
.pd0 {
    padding: 0;
}
.pd15 {
    padding: 15px;
}
.pdlr15 {
    padding: 0 15px;
}
.tab-pane {
    position: relative;
}
.sl-item-selecting,
.sl-item-selected {
    background: var(--dt-selection-color); /* rgb(211 244 255); */
    font-weight: 600;
}
.d3-tip {
    z-index: 2000!important;
}
.dib {
    display: inline-block;
}
.pl-db {
    display: block;
}
span.viz-msg {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}
.o_auto_y {
    overflow-y: auto;
}
.o_auto_x {
    overflow-x: auto;
}
.v-top {
    vertical-align: top;
}
button.hasInputs, .btn.hasInputs, .pl-hasValue {
    color: darkorange!important;
}
.left-inner-addon-sm i {
    padding: 7px 10px;
}
.pl-v-align {
    top: 50%;
    transform: translateY(-50%);
}
.error-text {
    display: none;
}
.has-error .error-text {
    display: block;
}
.dimgrey, .dimgray {
    color: dimgrey;
}
path.link {
    stroke: steelblue;
}
/*.daterangepicker_input {*/
/*    display: none;*/
/*}*/

.isValid .success-icon {
    color: green!important;
}
.jqstooltip {
    font-size: 1.5em!important;
}
.node-txt {
    dominant-baseline: hanging;
}
svg .axis-label {
    cursor: pointer;
    font-weight: bold;
}
svg .axis-label:hover {
    fill: steelblue;
}
svg rect.outer {
    stroke: #DDD;
    fill: transparent;
    fill-opacity: 1;
}

.svg:not(.heatmap) text, svg:not(.heatmap) text {
    /*font-size: inherit;*/
    /*font-weight: inherit;*/
}

circle.outlier {
    stroke: red;
    stroke-width: 1.3;
}
.p-relative {
    position: relative;
}

.fa-icon-slash {
    position: relative;
}
.fa-icon-slash:after {
    content: '/';
    position: absolute;
    left: 50%;
    font-size: 2em;
    top: 50%;
    transform: translate(-50%,-50%);
    color: red;
}
.tick rect.outer {
    fill: transparent;
}
.tick rect.outer:hover, .tick rect.outer.is_dragging {
    stroke: #DDD;
}
.tick.hovered rect.outer , .tick.is_dragged  rect.outer {
    stroke: #DDD;
}
.tick.hovered .resizer , .tick.is_dragged .resizer {
    fill: red;
    opacity: 1!important;
}

.transform-h-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.transform-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* custom ui selection */
.sl-flex-item-selecting, .sl-flex-item-selected {
    border: 1px solid #428bca;
    box-shadow: var(--plugin-box-shadow);
}

/* Panel collapse accordion
 */
a[data-toggle="collapse"] .fa-angle-right {
    margin-right: 3px;
    transition: transform 0.3s ease-in;
}
a[data-toggle="collapse"][aria-expanded="true"] .fa-angle-right {
    transform: rotate(90deg);
}
.pl-collapsible-icon {
    transition: transform 0.3s ease-in;
}
.pl-collapsible-icon:hover {
    color: steelblue;
}
.pl-collapsible-icon.opened {
    transform: rotate(90deg);
}
select.input-xs {
    height: 23px;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/**/

div.eb-container .expression-maker .alert {
    display: none;
}

/* confirm box */
div.d3view-plugins-backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8000;
    opacity: 0;
    background-color: rgba(0,0,0,0.45);
    transition: opacity 0.2s ease-in;
}
div.d3view-plugins-backdrop .d3view-plugins-spinner {
    font-size: 1.3em;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8001;
    color: #4f5359;
}
div.d3view-plugins-confirm-box {
    background: #FFF;
    z-index: 8001;
    position: fixed;
    top: 20%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-duration: 0.4s;
}
div.d3view-plugins-confirm-box > div {
    padding: 15px;
}
div.d3view-plugins-confirm-box .confirm-box-header {
    background: #FFF;
    color: #4f5359;
    border-bottom: 1px solid #DDD;
}
div.d3view-plugins-confirm-box div.confirm-box-body .confirm-box-text {
    /*color: #494949;*/
    /*font-size: 13px;*/
    font-weight: 500;
}
div.d3view-plugins-confirm-box .confirm-box-footer {

}
div.d3view-plugins-confirm-box .confirm-box-footer button {
    margin: 0 4px;
}
.d3view-confirm-box-modal .confirm-box-text {
    font-size: 1.2em;
    font-weight: 500;
}

/* prompt box */
div.d3view-plugins-dialog-box {
    background: #FFF;
    z-index: 8001;
    position: fixed;
    top: 20%;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-duration: 0.7s;
}
div.d3view-plugins-dialog-box > div {
    padding: 15px;
}
div.d3view-plugins-dialog-box .prompt-box-header {
    /*background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));*/
    /*color: #FFF;*/
    /*font-size: 13px;*/
    background: #FFF;
    color: #4f5359;
}
div.d3view-plugins-dialog-box .prompt-box-footer button {
    margin: 0 4px;
}

/* alert box */
div.d3view-plugins-alert-box {
    background: #FFF;
    z-index: 8001;
    position: fixed;
    top: 20%;
    left: 50%;
    width: auto;
    min-width: 500px;
    margin-left: -250px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow);
    animation-duration: 0.4s;
}
div.d3view-plugins-alert-box > div {
    padding: 20px;
}
div.d3view-plugins-alert-box .alert-box-header {
    background: #FFF;
    color: #4f5359;
    border-bottom: 1px solid #DDD;
}
div.d3view-plugins-alert-box .alert-box-footer {
    border-top: 1px solid #DDD;
    padding: 15px 30px;
}
div.d3view-plugins-alert-box .alert-box-footer button {
    margin: 0 4px;
}


/* top alert */
.plugins-flash {
    width: 100%;
    padding: 15px;
    top: 0;
    z-index: 2000;
    max-width: 30%;
    text-align: center;
    left: 50%;
    margin-left: -15%;
    position: fixed;
    margin-bottom: 0;
}
.plugins-flash .plugins-flash-msg {
    max-height: 100px;
    /*overflow: auto;*/
    display: inline-block;
    word-break: break-word;
}

/* label editor */
div.d3view-plugins-label-editor {
    background: #FFF;
    z-index: 8001;
    position: fixed;
    top: 20%;
    left: 50%;
    width: 550px;
    margin-left: -275px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-duration: 0.7s;
    overflow: visible!important;
}
div.d3view-plugins-label-editor.hasRotation {
    width: 600px;
    margin-left: -300px;
}
div.d3view-plugins-label-editor .label-editor[contenteditable] {
    height: auto!important;
    max-height: 200px;
    overflow: auto;
    transform: none!important;
}
div.d3view-plugins-label-editor textarea.label-editor-input {
    height: 30px;
    min-height: 60px;
    max-height: 100px;
    resize: vertical;
}
div.d3view-plugins-label-editor .preview-text {
    text-align: center;
    max-height: 100px;
    overflow: auto;
    display: inline-block;
    word-break: break-word;
    flex: 1 1 auto;
}
.label-editor-body .label-editor-options.pull-right.btn-group .btn {
    height: 30px;
}
div.d3view-plugins-label-editor > div {
    padding: 15px;
}
div.d3view-plugins-label-editor .label-editor-body .variables {
    max-height: calc(40vh);
    overflow: auto;
}
div.d3view-plugins-label-editor div.label-editor-body .label-editor-text {
}
div.d3view-plugins-label-editor .additional-option label {
    display: inline-block!important;
}
div.d3view-plugins-label-editor .label-editor-header {
    /*background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));*/
    /*color: #FFF;*/
    background: #FFF;
    color: #4f5359;
}
span.d3view-box-title {
    font-size: 1.875rem;
    -webkit-font-smoothing: antialiased;
}
div.d3view-plugins-label-editor .label-editor-footer {
    border-top: 1px solid #DDD;
}
div.d3view-plugins-label-editor .label-editor-footer button {
    margin: 0 4px;
}

div.d3view-plugins-label-editor .ann_row {
    margin: 5px 0;
    padding-bottom: 12px;
}
/*div.d3view-plugins-label-editor .additional-option {*/
/*    margin: 10px 0;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    font-size: 13px;*/
/*}*/
/*div.d3view-plugins-label-editor .additional-option label input {*/
/*}*/

/* context menu */
.d3view-context-menu-container, body > ul.d3view-context-menu, body .field-items-context-menu.d3view-context-menu {
    position: fixed;
    z-index: 2000;
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 2px;
    display: inline-block;
    min-width: 200px;
    min-height: 150px;
    /*max-width: 210px;*/
    border-radius: 6px;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    /*width: 200px;*/
    /*max-height: 250px;*/
    /*overflow: auto;*/
}
.d3view-context-menu {
    /*margin-bottom: 0;*/
    overflow: auto;
    overflow-x: hidden;
}
.d3view-context-menu-container .div-groups {
    /*padding: 10px;*/
    min-height: 200px;
}
.d3view-context-menu-container.bottomPositioned .div-groups {
    display: flex;
    flex-direction: column-reverse;
}
.d3view-context-menu-container .tab-content {
    max-height: 300px;
    overflow: auto;
}
.d3view-context-menu-container[data-viewType="compact"] .tab-content {
    max-height: 350px;
}
.d3view-context-menu-container[data-viewType="compact"] .d3view-context-menu li a.context-menu-item {
    padding: 3px 8px;
}
.d3view-context-menu-container[data-viewType="compact"] .d3view-context-menu > li {
    line-height: unset;
    font-size: unset;
}
.d3view-context-menu-container .div-groups ul {
    width: 100%;
}
.d3view-context-menu-container .div-groups ul li {
    /*float: right;*/
}
@media screen and (max-width: 1700px) {
    .d3view-context-menu-container .pl-vertical-tabs-container .pl-tab-item-label {
        display: none;
    }
}
.d3view-context-menu li {
    width: 100%;
    padding: 0;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static;
}
.d3view-context-menu li.disabled > * {
    pointer-events: none;
}

.d3view-context-menu li.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.d3view-context-menu li.disabled * {
    pointer-events: none;
}
.d3view-context-menu li.divider {
    height: 1px;
    margin: 3px;
    padding: 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
.d3view-context-menu li.divider:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 0;
    transform: translateY(-50%);
    color: dimgrey;
    display: none;
}
.d3view-context-menu li.hasDropzone a.context-menu-item > span {
    pointer-events: none;
}
.d3view-context-menu li.hasDropzone a.context-menu-item {
    border: none;
}
.d3view-context-menu li a.context-menu-item {
    display: block;
    position: relative;
    color: #4f5359;
    padding: 12px 8px;
    flex: 1 1 auto;
}
.d3view-context-menu li.checked > a:after {
    content: '\f00c';
    font-family: FontAwesome;
    right: 5px;
    top: 13px;
    position: absolute;
    color: steelblue;
}
.d3view-context-menu li a.context-menu-item:hover {
    border-radius: 4px;
}
.d3view-context-menu li.active a.context-menu-item {
    cursor: pointer;
    color: #ffffff!important;
    text-shadow: none;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
}
.d3view-context-menu .dropdown-submenu>.dropdown-menu {
    left: 96%;
    top: unset;
    display: none;


    max-height: 250px;
    overflow-y: auto;
}
.d3view-context-menu .dropdown-submenu:hover>.dropdown-menu {
    display: none;
}
.d3view-context-menu .nav-stacked-thin li a {
    padding: 4px 6px;
}
.d3view-context-menu .dropdown-submenu:last-child .dropdown-menu {
    height: 100%;
}
.d3view-context-menu li:hover .submenu {
    min-width: 150px;
    display: block!important;
}
.d3view-context-menu li.dropdown-submenu li a.context-menu-item:hover,
.d3view-context-menu li.dropdown-submenu:hover > a {
    text-decoration: none;
    background-color: #eee;
}
.d3view-context-menu-container .cmenu-icon[class*=icon-] {
    font-size: 1.4em;
}

/*.d3view-context-menu li.active:after {*/
/*    content: '\f00c';*/
/*    font-family: FontAwesome;*/
/*    color: #FFF;*/
/*    position: absolute;*/
/*    right: 3px;*/
/*    top: 3px;*/
/*}*/
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px
}
.dropdown-submenu.dropdown-submenu-left > a:after {
    float: left;
    border-width: 5px 5px 5px 0;
    border-right-color: #ccc;
    margin-top: 5px;
    margin-left: -10px;
    margin-right: 0;
    right: unset;
    left: 6px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #555
}

.dropdown-submenu.pull-left {
    float: none!important;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>.dropdown-menu {
    top: 3px;
}
.dropdown-submenu.dropup >.dropdown-menu {
    top: unset;
    bottom: 1px;
    left: 101%;
}
.dropdown-submenu>a:after {
    margin-top: 3px;
    margin-right: -3px;
}

/* dd menu */
.d3view-dd-menu {
    background: #fff;
    /*border: 1px solid #cdcdcd;*/
    /*padding: 2px;*/
    /*display: inline-block;*/
    /*min-width: 150px;*/
    /*border-radius: 6px;*/
    /*box-shadow: var(--plugin-box-shadow);*/
    /*-moz-box-shadow: var(--plugin-box-shadow);*/
    /*-webkit-box-shadow: var(--plugin-box-shadow);*/
    z-index: 2000;
    position: fixed;
    display: block;
    /*max-height: 250px;*/
    /*overflow: auto;*/
}
.d3view-dd-menu li {
    width: 100%;
    /*padding: 0;*/
    /*font-size: 13px;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*line-height: 1.2em;*/
    position: relative;
}
.d3view-dd-menu li.checked > a:before {
    content: '\f00c';
    font-family: FontAwesome;
    left: 5px;
    top: 3px;
    position: absolute;
    color: steelblue;
}
/*.d3view-dd-menu li > a {*/
/*    height: 30px;*/
/*    text-decoration: none;*/
/*}*/
.d3view-dd-menu li > a[data-clickable="false"] {
    cursor: default;
}
.d3view-dd-menu li.disabled > * {
    pointer-events: none;
}

.d3view-dd-menu li.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.d3view-dd-menu li.disabled * {
    pointer-events: none;
}
.d3view-dd-menu li.divider {
    height: 1px;
    margin: 3px;
    padding: 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
.d3view-dd-menu li.divider:before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 0;
    transform: translateY(-50%);
    color: dimgrey;
    display: none;
}
.d3view-dd-menu li.hasDropzone a.context-menu-item > span {
    pointer-events: none;
}
.d3view-dd-menu li.hasDropzone a.context-menu-item {
    border: none;
}
.d3view-dd-menu li a.context-menu-item {
    display: block;
    position: relative;
    color: #333;
    padding-left: 25px;
    text-decoration: none;
    height: 30px;
    /*display: flex;*/
    align-items: center;
}
.d3view-dd-menu li a.context-menu-item label {
    margin-bottom: 0;
}
.d3view-dd-menu li a.context-menu-item:hover {
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    color: #FFF!important;
}
.d3view-dd-menu li.checked > a:hover:before {
    color: #FFF!important;
}
.d3view-dd-menu li.active a.context-menu-item {
    color: #FFF!important;
}
.d3view-dd-menu .nav-stacked-thin li a {
    padding: 4px 6px;
}
.d3view-dd-menu li:hover .submenu {
    min-width: 150px;
    display: block!important;
}
.d3view-dd-menu li.dropdown-submenu li a.context-menu-item:hover,
.d3view-dd-menu li.dropdown-submenu:hover > a {
    text-decoration: none;
    background-color: #eee;
}

/*.d3view-context-menu li.active:after {*/
/*    content: '\f00c';*/
/*    font-family: FontAwesome;*/
/*    color: #FFF;*/
/*    position: absolute;*/
/*    right: 3px;*/
/*    top: 3px;*/
/*}*/

.d3view-dd-menu .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.d3view-dd-menu .dropdown-submenu>.dropdown-menu {
    top: 3px;
}
.d3view-dd-menu .dropdown-submenu.dropup >.dropdown-menu {
    top: unset;
    bottom: 1px;
    left: 101%;
}
.d3view-dd-menu .dropdown-submenu>a:after {
    margin-top: 3px;
    margin-right: -3px;
}


.ctxmenu-hover {
    border-color: steelblue;
}

/* dropzones */
div#d3view-image-replacement .dropzone, div#d3view-file-uploader .dropzone {
    border: 1px #ddd dashed!important;
}
div#d3view-file-uploader .dz-formats {
    display: flex;
    flex-wrap: wrap;
}
div#d3view-file-uploader .dz-formats > span {
    width: 20%;
    margin: 0;
    word-break: break-all;
}
div#d3view-file-uploader .dz-formats > span > i {
    display: none;
}

.d3-tip {
    pointer-events: none!important;
}

span.d3view-plugins-sample-text {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

span.d3view-plugins-counter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%,-50%);*/
    font-size: 5em;
    z-index: 8001;
    color: #4f5359;
    right: 10px!important;
    bottom: 10px!important;
}




/* d3view legends container */
div.d3view-legends-container {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    /*border: 1px solid transparent;*/
    border: 1px solid #ccc!important;
    /*!*background-color: #fff!important;*!*/
    /*background-color: rgba(0,0,0,0.01);*/
    background-color: rgba(255,255,255,1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-width: 150px;
    z-index: 8;
    margin-right: 10px;
    height: auto!important;
}

div.legends-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    align-items: normal;
    min-width: 150px;
}
div.legends-wrapper .d3view-legends-container {
    position: relative!important;
    width: auto!important;
    /*margin-right: 30px!important;*/
    flex-grow: 1;
    flex-basis: 0;
    /*flex: 1 1 auto;*/
}
/*div.legends-wrapper .d3view-legends-container:only-child {*/
/*    margin-right: 0px!important;*/
/*}*/
div.d3view-newton div.legends-wrapper .d3view-legends-container {
    margin-right: 0!important;
}
div.d3view-legends-container.hideLegendLines li.legend-item svg.legend-line {
    display: none!important;
}
div.d3view-legends-container.hideLegendLabels .legends-label,
div.d3view-legends-container.hideLegendLabels .legend-search-toggle {
    display: none!important;
}
div.d3view-legends-container.hideLegendLabels .legend-header {
    border-bottom: none!important;
    justify-content: flex-end;
}
div.d3view-legends-container.hideLegendLabels div.legend-header .toggle-legends {
    display: none;
}
div.d3view-legends-container.default-legends .legends-body {
    height: calc(100% - 34px)!important;
}
div.d3view-legends-container.default-legends .legends-body > ul.legends-list {
    max-height: 100%!important;
}
div.legends-wrapper.default-legends {
    min-height: 60px;
}

div.d3view-legends-container.top-legends,
div.d3view-legends-container.bottom-legends {
    z-index: 7;
}
div.legends-wrapper.top-legends,
div.legends-wrapper.bottom-legends {
    z-index: 7;
}
div.d3view-legends-container.newton-clone {
    height: auto!important;
    width: auto!important;
    background: transparent!important;
}
div.d3view-legends-container.newton-clone .legend-header {
    display: none;
}
div.d3view-legends-container.newton-clone div.legends-body {
    max-height: initial!important;
    background: transparent!important;
}
div.d3view-legends-container input {
    height: auto!important;
}
div.d3view-legends-container:not(.toggled):not(.bottom-legends) {
    /*min-height: 60px;*/
}

div.d3view-legends-container.exporting.newton-clone .toggle-list-container {
    display: none!important;
}
div.d3view-legends-container.exporting.newton-clone ul.legends-list {
    display: block!important;
}

/* on hover */
div.d3view-legends-container:hover, div.d3view-legends-container.dragging, div.d3view-legends-container.resizing, div.d3view-legends-container.opened {
    /*border: 1px solid #CCC;*/
    /*background-color: rgba(0,0,0,0.01);*/
}
div.d3view-legends-container:hover .ui-resizable-handle, div.d3view-legends-container.dragging .ui-resizable-handle,
div.d3view-legends-container.resizing .ui-resizable-handle, div.d3view-legends-container.opened .ui-resizable-handle {
    display: block!important;
}
div.d3view-legends-container.default-legends:hover div.legend-header, div.d3view-legends-container.dragging .legend-header,
div.d3view-legends-container.resizing .legend-header, div.d3view-legends-container.default-legends.opened .legend-header {
    opacity: 1!important;
    border-bottom: 1px solid #DDD;
}

div.d3view-legends-container.dragging ul.legends-list, div.d3view-legends-container.resizing ul.legends-list {
    pointer-events: none;
}

div.d3view-legends-container:hover div.legend-search-container {
    opacity: 1!important;
}
div.d3view-legends-container.exporting.newton-clone .legends-list {
    max-height: 100%!important;
    margin-bottom: 2px;
}
div.d3view-legends-container .ui-resizable-handle {
    display: none!important;
}

div.d3view-legends-container.exporting .ui-resizable-handle, div.d3view-legends-container.exporting.newton-clone .ui-resizable-handle {
    display: none!important;
}
div.d3view-legends-container div.legend-header {
    padding: 0;
    cursor: move;
    background: #FFF!important;
    color: #4f5359;
    display: flex;
    align-items: center;
    font-size: 12px;
    /*opacity: 0;*/
    border-bottom: 1px solid transparent;
}
div.d3view-legends-container .legend-search-toggle {
    cursor: pointer;
    display: none;
}
div.d3view-legends-container .legend-search-toggle:hover {
    color: red;
}
div.d3view-legends-container .clear-search {
    cursor: pointer;
}
div.d3view-legends-container .clear-search:hover {
    color: grey!important;
}
div.d3view-legends-container .legend-search-container {
    opacity: 0;
}
div.d3view-legends-container div.legend-header.border-bottom {
    border-bottom: 1px solid #DDD;
    height: 30px;
}
div.d3view-legends-container div.legend-header h4 {
    display: inline-block;
    align-items: center;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.d3view-legends-container div.legend-header .toggle-legend-options {
    cursor: pointer;
    position: relative;
    top:2px;
}

div.d3view-legends-container.newton-clone div.legend-header .toggle-legend-options,div.d3view-legends-container.newton-clone div.legend-header .toggle-legends,
div.d3view-legends-container.newton-clone div.legend-header .search-replace, div.d3view-legends-container.newton-clone div.legend-header .sort-legends,
div.d3view-legends-container.newton-clone div.legend-header .autofit-legends {
    display: none!important;
}
div.d3view-legends-container div.legend-header .toggle-legends {
    cursor: pointer;
    position: relative;
    padding: 5px 10px;
    flex: 0 0 auto;
}
div.d3view-legends-container div.legend-header .toggle-legends:hover {
    background: #e8f0fe;
    color: #4f5359!important;
}

div.d3view-legends-container .legend-header .search-replace {
    display: none;
}
div.d3view-legends-container .legend-header .search-replace:hover .dropdown-toggle {
    color: red;
}
div.d3view-legends-container .legend-header .search-replace {
    float: right;
    margin: 0 3px;
    cursor: pointer;
}
div.d3view-legends-container .legend-header .search-replace.open > a {
    color: red!important;
}
div.d3view-legends-container .legend-header .search-replace.open:before {
    color: red!important;
}
div.d3view-legends-container .legend-header .search-replace:before {
    content: 'A';
    position: absolute;
    font-size: 8px;
    color: #337ab7;
    background: #FFF;
    top: 5px;
    pointer-events: none;
}
div.d3view-legends-container .legend-header .search-replace span.twitter-typeahead {
    width: 100%;
}
div.d3view-legends-container .legend-header .search-replace-buttons button:hover,
div.d3view-legends-container .legend-header .search-replace-buttons button:focus {
    outline: none;
}
div.d3view-legends-container .legend-header .search-replace .clear {
    position: absolute;
    right: 20px;
    bottom: 7px;
    color: #4f5359;
}
div.d3view-legends-container .legend-header .search-replace .clear:hover {
    color: #AAA;
}



div.d3view-legends-container .legend-header .legend-container-options {
    align-items: center;
    flex: 0 0 auto;
}
div.d3view-legends-container.bottom-legends .legend-header .legend-container-options,
div.d3view-legends-container.top-legends .legend-header .legend-container-options {
    position: absolute;
    right: 0px;
    top: 0;
    font-size: 1.4em;
    z-index: 20;
    background-color: #FFF;
}
div.d3view-legends-container .legend-header .legend-container-options > .dropdown-toggle {
    padding: 1px 10px;
}
div.d3view-legends-container .legend-header .legend-container-options > .dropdown-toggle:hover,
div.d3view-legends-container .legend-header .legend-container-options.open > .dropdown-toggle {
    background: #e8f0fe;
    color: #4f5359!important;
}
div.d3view-legends-container .legend-container-options li a.checked:after {
    font-family: FontAwesome;
    content: '\f00c';
    position: absolute;
    right: 2px;
    color: steelblue;
}
div.d3view-legends-container .legend-header .select_all {
    align-items: center;
    flex: 0 0 auto;
    padding: 5px;
    cursor: pointer;
}
div.d3view-legends-container .legend-header .select_all:hover {
}

ul.legend-options-dropdown {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

/* legends body */
div.d3view-legends-container div.legends-body {
    overflow-y: scroll;
    margin: 3px 0!important;
    color: #000;
    min-height: 30px;
    position: relative;
    font-weight: 500;
    /*display: flex;*/
    /*align-items: center;*/
}
div.d3view-legends-container div.legends-body ul.legends-list {
    min-height: 30px;
}
div.d3view-legends-container .legends-label {
    margin-right: 10px;
    color: dimgrey;
    margin-bottom: 0;
}
div.legends-wrapper.default-legends div.d3view-legends-container .legends-label {
    margin-left: 5px;
    font-size: 1.2em;
}

/* Hide scrollbar for Chrome, Safari and Opera */
div.d3view-legends-container div.legends-body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
/*div.d3view-legends-container div.legends-body {*/
/*    -ms-overflow-style: none;  !* IE and Edge *!*/
/*    scrollbar-width: none;  !* Firefox *!*/
/*}*/


div.d3view-legends-container div.legends-body:hover {
    /*overflow: auto;*/
}
div.d3view-legends-container div.legends-body ul {
    list-style-type:none;
}
div.d3view-legends-container div.legends-body ul li.legend-item {
    padding: 7px 11px;
    padding-right: 0;
    position: relative;
}
div.d3view-legends-container div.legends-body ul li.legend-item.highlighted,
div.d3view-legends-container div.legends-body ul li.legend-item.ui-selecting,
div.d3view-legends-container div.legends-body ul li.legend-item.ui-selected,
div.d3view-legends-container div.legends-body ul li.legend-group.ui-selected > label {
    background-color: #c2dbff!important;
    background-image: none!important;
}
div.d3view-legends-container div.legends-body ul li.legend-item:not(.ui-selected):hover,
div.d3view-legends-container div.legends-body ul li.legend-item:not(.ui-selecting):hover,
div.d3view-legends-container li.legend-item-multiple:not(.opaque):hover,
div.d3view-legends-container li.legend-item.clicked,
div.d3view-legends-container li.legend-group:hover > label {
    /*background-color: #e8e8e8;*/
    /*background-image: -webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);*/
    /*background-image: -o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);*/
    /*background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));*/
    /*background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);*/
    /*background-repeat: repeat-x;*/

    background-color: var(--dt-selection-color-light);
}

div.d3view-legends-container div.legends-body ul li.legend-item .baseline:hover {
    color: red;
    cursor: context-menu;
}
div.d3view-legends-container .legend-item.disabled {
    color: rgba(0,0,0,0.6);
    text-decoration: line-through;
}
div.d3view-legends-container .legend-item.disabled svg {
    opacity: 0.3;
}
div.d3view-legends-container .legend-item.opaque {
    /*color: rgba(0,0,0,0.5);*/
    cursor: default;
}
div.d3view-legends-container div.legends-body ul li.legend-item.disabled .newton-legend-item-rect,
div.d3view-legends-container.newton-clone li.legend-item.disabled .newton-legend-item-rect {
    background-color: transparent!important;
}
/*div.d3view-legends-container .legend-item.disabled:hover .legend-icons {*/
/*opacity: 0.7!important;*/
/*pointer-events: none!important;*/
/*}*/
/* flex box */
div.d3view-legends-container li.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.d3view-legends-container li.legend-item > svg {
    align-items: center;
    flex: 0 0 auto;
}
div.d3view-legends-container li.legend-item > svg line {
    stroke-width: 4px;
    stroke: steelblue;
}

div.d3view-legends-container li.editable-open .legend-icons,
div.d3view-legends-container li.editable-open .legend-drag,
div.d3view-legends-container li.editable-open .legend-edit,
div.d3view-legends-container li.editable-open .curve-image,
div.d3view-legends-container li.editable-open .curve-symbol {
    display: none!important;
}
div.d3view-legends-container.top-legends li.legend-item .legend-options,
div.d3view-legends-container.bottom-legends li.legend-item .legend-options {
    flex: 0 0 auto;
}
/*div.d3view-legends-container.default-legends li.legend-item .legend-options {*/
/*    position: absolute;*/
/*    right: 4px;*/
/*    z-index: 2;*/
/*}*/
div.d3view-legends-container.default-legends li.legend-item .curve-name .editable-clear-x {
    display: none!important;
}
div.d3view-legends-container.default-legends li.legend-item .curve-name {
    max-width: 100%!important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0;
}

div.d3view-legends-container.default-legends li.legend-item:not(.editable-open):hover .curve-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 110px)!important;
    max-width: calc(100% - 0px)!important;
}

div.d3view-legends-container li.legend-item .legend-options {
    opacity: 0;
    margin-left: 3px;
}
div.d3view-legends-container li.legend-item:hover .legend-options,
div.d3view-legends-container li.legend-item.clicked .legend-options {
    opacity: 1!important;
}
div.d3view-legends-container li.legend-item:hover .legend-options:hover,
div.d3view-legends-container li.legend-item.clicked .legend-options {
    background-color: var(--itemHoverOptionsHover);
}

div.d3view-legends-container li.legend-item .legend-edit,
div.d3view-legends-container li.legend-item .curve-image {
    opacity: 0;
    right: 3px;
    top: 0;
    align-items: center;
    flex: 0 0 auto;
    /*margin-right: 5px;*/
    padding: 2px 6px;
    cursor: pointer;
}
div.d3view-legends-container li.legend-item:hover:not(.isEditing) .legend-icons,
div.d3view-legends-container li.legend-item:hover:not(.isEditing) .legend-edit,
div.d3view-legends-container li.legend-item:hover:not(.isEditing) .curve-image,
div.d3view-legends-container li.legend-item .legend-icons.clicked {
    opacity: 1!important;
}
/*div.d3view-legends-container li.legend-item:hover .legend-icons:hover,*/
/*div.d3view-legends-container li.legend-item:hover .legend-edit:hover,*/
/*div.d3view-legends-container li.legend-item .legend-icons.clicked {*/
/*    background: #e8f0fe;*/
/*    color: #4f5359!important;*/
/*    border-radius: 50%;*/
/*}*/
/*div.d3view-legends-container li.legend-item .legend-icons > i {*/
/*padding: 2px 4px;*/
/*cursor: pointer;*/
/*color: lightslategray;*/
/*}*/
/*div.d3view-legends-container li.legend-item .legend-icons > i:hover {*/
/*color: red;*/
/*}*/
/*div.d3view-legends-container li.legend-item .legend-icons > i.legend-drag {*/
/*transform: rotate(45deg);*/
/*cursor: move;*/
/*}*/

div.d3view-legends-container li.legend-item .legend-line-disabled {
    display: none;
}
div.d3view-legends-container li.legend-item.isDisabled .legend-line-disabled {
    display: inline-block;
}
div.d3view-legends-container li.legend-item.isDisabled .legend-line {
    display: none;
}

div.d3view-legends-container li.legend-item .curve-name {
    user-select: none;
    padding: 5px;
    align-items: center;
    white-space: nowrap;
    word-break: break-all;
    overflow: hidden;
    position: relative;
    /*-webkit-font-smoothing: antialiased;*/
    /*letter-spacing: 0.2px;*/
    /*text-overflow: ellipsis;*/
    flex: 1 1 auto;
    /*max-width: 400px;*/
}
div.d3view-legends-container li.legend-item.is-ref .curve-name-span {
    position: relative;
}
div.d3view-legends-container li.legend-item.is-ref .curve-name-span:after {
    content: '*';
    position: absolute;
    right: -10px;
    top: -12px;
    color: red;
    font-size: 2em;
}
div.d3view-legends-container .curve-symbol {
    display: none;
}
div.d3view-legends-container li.legend-item.baseline .curve-name {
    font-weight: bold;
}
div.d3view-legends-container li.legend-item .legend-imgs {
    height: 50px;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    margin-left: 10px;
    justify-content: center;
}
div.d3view-legends-container li.legend-item .legend-img img {
    max-width: 100%;
    max-height: 100%;
}
div.d3view-legends-container li.legend-item .legend-drag {
    opacity: 0;
    pointer-events: none;
    padding: 4px;
    margin-right: 2px;
    cursor: move;
    /*transform: rotate(45deg);*/
}
div.d3view-legends-container li.legend-item:hover:not(.isEditing) .legend-drag {
    opacity: 1!important;
    pointer-events: all!important;
}

/* legends scrolling buttons */
div.d3view-legends-container .scroll_button {
    display: none;
    position: absolute;
    z-index: 2;
    padding: 4px;
    right: 0px;
    cursor: pointer;
    font-size: 1.5em;
    color: darkslategray;
}
div.d3view-legends-container.scroll_enabled .scroll_button {
    display: block!important;
}
div.d3view-legends-container.scroll_enabled .scroll_button:hover {
    color: red!important;
}
div.d3view-legends-container.scroll_enabled .legends-body {
    /*padding-right: 15px;*/
}
div.d3view-legends-container.searchEnabled .scroll_button {

}
div.d3view-legends-container .scrollTop {
    top: 2px;
}
div.d3view-legends-container .scrollBottom {
    top: 22px;
}
div.d3view-legends-container.default-legends .scroll_button.disabled {
    display: none;
}
div.d3view-legends-container .scroll_button.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
div.d3view-legends-container .scroll_button.disabled * {
    pointer-events: none;
}

/* legend groups */
div.legends-wrapper div.d3view-legends-container:not(.default-legends) .legend-groups {
    display: flex;
    flex-wrap: wrap;
}
div.legends-wrapper div.d3view-legends-container:not(.default-legends) .legend-groups .legend-group {
    margin: 0 10px;
}
div.legends-wrapper div.d3view-legends-container:not(.default-legends) .legend-groups .legend-group:first-child {
    margin-left: 0;
}
div.legends-wrapper div.d3view-legends-container:not(.default-legends) .legend-groups .legend-group:last-child {
    margin-right: 0;
}
div.legends-wrapper div.d3view-legends-container:not(.default-legends) .legend-groups.hasOpenGroup .legend-group.open {
    /*width: 25%;*/
    flex: 1 1 auto;
}

div.legends-wrapper div.d3view-legends-container.default-legends .legend-groups .legend-group ul.legends-list {
    /*padding: 10px;*/
    margin-left: 10px;
}
div.legends-wrapper div.d3view-legends-container .legend-groups .legend-group label.group-label {
    cursor: pointer;
    width: 100%;
    margin-bottom: 0;
    padding: 8px 10px;
}
div.d3view-legends-container.default-legends .legend-header {
    /*display: block;*/
}
div.d3view-legends-container.default-legends .legend-header .legend-header-right {
    display: inline-block;
    float: right;
}







rect.viz-outer-rect {
    pointer-events: all;
    fill: transparent;
}
rect.viz-outer-rect.stroke {
    stroke: #DDD;
}

/* drag handles */
svg.newton-svg .axes_drag_handle {
    stroke-width: 15px;
    stroke: transparent;
    fill: none;
    cursor: col-resize;
}
svg.newton-svg .drag_handle_x {
    cursor: row-resize;
}
svg.newton-svg .axes_drag_handle:hover {
    stroke: rgba(0,0,0,0.1);
}

/*div.d3view-legends-container div.legends-body ul li span.curve-name {*/
/*font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;*/
/*word-break: break-all;*/
/*letter-spacing: 0.4px;*/
/*font-size: 11px;*/
/*!*cursor: move;*!*/
/*user-select: none;*/
/*}*/
body span.test_curve_name {
    font-family: "Roboto",'DejaVu Sans Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    word-break: break-all;
    letter-spacing: 0.4px;
    font-weight: 400;
    font-size: 11px;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}
/*div.d3view-legends-container div.legends-body ul li span.curve-name.highlight_name {*/
/*font-weight: 500;*/
/*}*/
/*div.d3view-legends-container div.legends-body ul li span.curve-name.clicked {*/
/*opacity: 0.4;*/
/*}*/
/*div.d3view-legends-container div.legends-body ul li input.curve-name-edit {*/
/*height: 20px;*/
/*width: auto;*/
/*display: inline-block;*/
/*}*/
div.d3view-legends-container.range-values .legends-body ul li span.curve-name {
    cursor: pointer;
}
/*div.d3view-legends-container div.legends-body ul li span.curve-name.minmax {*/
/*font-weight: bold;*/
/*}*/
div.d3view-legends-container div.legends-body ul.legends-list {
    margin-bottom: 0;
    overflow: auto;
}
div.d3view-legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
}
div.d3view-legends-container div.legends-body ul.legends-list li i.newton-legend-item-rect.clicked + span.curve-name {
    pointer-events: none;
}

/*div.single-legend-item, div.newton-clone div.single-legend-item {*/
/*position: absolute;*/
/*top: 4px;*/
/*}*/
/*div.single-legend-item i.newton-legend-item-rect {*/
/*display: inline-block;*/
/*width: 11px;*/
/*height: 11px;*/
/*vertical-align: middle;*/
/*margin-right: 5px;*/
/*}*/
div.legends-wrapper.toggled {
    /*height: 26px!important;*/
}
div.legends-wrapper.toggled:not(.top-legends):not(.bottom-legends) .legends-body{
    display: none;
}
div.legends-wrapper.toggled .legend-search-toggle,
div.legends-wrapper.toggled .legend-container-options {
    opacity: 0!important;
    pointer-events: none!important;
}
div.legends-wrapper.toggled div.legend-header {
    border-bottom: none!important;
}
div.legends-wrapper.toggled .ui-resizable-handle {
    display: none!important;
}
div.d3view-legends-container .edit-legend-name {
    display: none;
    color: #4f5359;
    cursor: pointer;
}
div.d3view-legends-container .legend-item:not(.ui-selected):not(.disabled):hover .edit-legend-name {
    display: inline-block;
}
div.d3view-legends-container .legend-item:not(.ui-selected):hover .edit-legend-name:hover {
    color: red;
}
div.d3view-legends-container .legend-item .drag-handle {
    position: absolute;
    right: 4px;
    top: 6px;
    opacity: 0;
    transform: rotate(45deg);
    cursor: move;
}
div.d3view-legends-container .legend-item:not(.ui-selected):hover .drag-handle {
    opacity: 1!important;
}
div.d3view-legends-container .legend-item:not(.ui-selected):hover .drag-handle:hover {
    color: red;
}
div.d3view-legends-container a.curve-name {
    color: initial;
    text-decoration: none;
    user-select: none;
}
div.d3view-legends-container .legend-item a.legend-name-editable:focus {
    outline: none!important;
}
div.d3view-legends-container .legend-item.editable-open .drag-handle, div.d3view-legends-container .legend-item.editable-open .edit-legend-name {
    display: none!important;
}
/*div.d3view-legends-container .legend-item.ui-selected a.legend-name-editable, div.d3view-legends-container .legend-item.ui-selecting a.legend-name-editable {*/
/*color: #FFF!important;*/
/*}*/
div.d3view-legends-container .legend-item-multiple {
    padding: 3px 9px;
    position: relative;
}
div.d3view-legends-container .indent {
    margin-left: 18px;
}
div.d3view-legends-container .expand-icon {
    cursor: pointer;
    margin: 0 5px;
    vertical-align: middle;
    color: grey;
}
div.d3view-legends-container .expand-icon:hover {
    color: red;
}



/************** legends less than five ***************/
/*div.d3view-legends-container.tiny, div.d3view-legends-container.tiny.newton-clone {*/
/*background-color: transparent!important;*/
/*border: none!important;*/
/*border-radius: unset!important;*/
/*height: auto!important;*/
/*width: auto!important;*/
/*margin-right: 0!important;*/
/*top: 0!important;*/
/*}*/
/*div.d3view-legends-container.tiny .legends-body, div.d3view-legends-container.tiny.newton-clone .legends-body {*/
/*min-height: auto!important;*/
/*}*/
/*div.d3view-legends-container.tiny .legends-body ul.legends-list, div.d3view-legends-container.tiny.newton-clone .legends-body ul.legends-list {*/
/*margin-bottom: 0;*/
/*}*/
/*div.d3view-legends-container.tiny .legend-header, div.d3view-legends-container.tiny.newton-clone .legend-header {*/
/*display: none;*/
/*}*/
/*div.d3view-legends-container.tiny li.legend-item, div.d3view-legends-container.tiny.newton-clone li.legend-item {*/
/*display: inline;*/
/*}*/

.chart_container.tiny .axis text, .chart_container.tiny span.curve-name {
    font-size: 8px!important;
}

div.d3view-newton.md div.d3view-legends-container .legend-header, div.d3view-newton .main_container.tiny div.d3view-legends-container .legend-header {
    opacity: 1!important;
    border-bottom: 1px solid #DDD;
}
div.d3view-newton.md div.d3view-legends-container, div.d3view-newton .main_container.tiny div.d3view-legends-container {
    border: 1px solid #CCC;
}




/* BOTTOM LEGENDS */
div.d3view-legends-container.bottom-legends, div.d3view-legends-container.top-legends,
div.legends-wrapper.bottom-legends, div.legends-wrapper.top-legends {
    border: none!important;
    background-color: transparent!important;
    width: 100%;
    flex-wrap: wrap;
}
div.d3view-legends-container.bottom-legends .toggle-legends,
div.d3view-legends-container.top-legends .toggle-legends {
    display: none;
}
div.d3view-legends-container.bottom-legends .legend-header, div.d3view-legends-container.top-legends .legend-header {
    /*display: none!important;*/
}
div.d3view-legends-container.bottom-legends .legends-body, div.d3view-legends-container.top-legends .legends-body {
    /*padding-top: 5px;*/
    /*padding-bottom: 5px;*/
    padding: 0;
    max-height: 68px;
    width: calc(100% - 25px);
}
div.d3view-legends-container.top-legends .legends-body {
    max-height: 55px;
}
div.d3view-legends-container.bottom-legends.tiny .legends-body, div.d3view-legends-container.top-legends.tiny .legends-body {
    /*max-height: 30px!important;*/
}
div.d3view-legends-container.bottom-legends .legends-body ul.legends-list, div.d3view-legends-container.top-legends .legends-body ul.legends-list {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-legends-container.bottom-legends div.legends-body ul li.legend-item, div.d3view-legends-container.top-legends div.legends-body ul li.legend-item {
    padding: 0!important;
    /*flex-grow: 1;*/
    flex: 0 0 auto;
    margin-right: 12px;
}
div.d3view-legends-container.bottom-legends div.legends-body ul li.legend-item .legend-drag, div.d3view-legends-container.top-legends div.legends-body ul li.legend-item .legend-drag {
    display: none!important;
}









/* placeholders */
div.hbarchart-placeholder {
    padding: 15px;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    height: 100%;
}
div.hbarchart-placeholder > div {
    height: 20%;
    margin-bottom: 3px;
    background: #f5f5f5;
    border: 1px solid #efefef;
}
div.hbarchart-placeholder .placeholder-label {
    position: absolute;
    font-size: 1.12em;
    left: 50%;
    top: 50%;
    color: #4f5359;
    transform: translate(-50%, -50%);
}

tbody.d3view-ph-body  div.ph-item {
    padding: 8px;
    margin-bottom: 0;
    border: none;
    background: none;
}
tbody.d3view-ph-body .ph-row {
    height: 10px;
}


/* dataviewer */
div.data-viewer-modal .modal-header {
    padding: 9px;
    background: #FFF;
    color: #4f5359;
    /* Was a fixed 47px, which is one row. The header carries a second row naming the
       views the open file affords, and a fixed height clipped it -- and pulled the
       toolbar up over the title. Nothing computes against this number. */
    min-height: 47px;
}
.data-viewer-modal .metadata .popover-content {
    max-height: 250px;
    overflow: auto;
}
div.data-viewer-modal .modal-header .modal-title {
    font-size: 15px;
    font-weight: 300;
}
div.data-viewer-modal .modal-dialog-fullscreen {
    /* Changed by Claude on 8/28/26 - tasks-app-overhaul.
       This rule was the exact anti-pattern the rail contract forbids
       (`left:0; width:100%`), and being both more specific AND !important it
       beat the rail-aware `.modal-dialog-fullscreen` in style.css -- so the
       data viewer rendered under the pin-left rail's 44px and its left edge
       (file icon, name, breadcrumb) was unreachable. --d3v-rail-w is 0px on
       rail-less pages, so this is byte-identical there. */
    width: calc(100% - var(--d3v-rail-w, 0px))!important;
    margin: 0!important;
    left: var(--d3v-rail-w, 0px)!important;
    top: 0!important;
}
div.vizcontainer.dataviewer .flexBox {
    display: flex;
}

/** Added by shashank2104 on 08/25/2026 - R2026-215 - The viewers we mount into .viz-container-2 (peacock.workbench
 *  above all, whose root is position:absolute with inset:0) need this box to be their containing block. Left static
 *  it resolves against whichever ancestor happens to be positioned, and the workbench then paints over the
 *  DataViewer header - taking the View dropdown with it. **/
div.dataviewer .viz-container-2,
div.data-viewer-container .viz-container-2,
div.data-viewer-modal .viz-container-2 {
    position: relative;
}
.full-height, .pl-fh, .full-h {
    height: 100%;
}
.full-w {
    width: 100%;
}
/*div.data-viewer-modal div.v_render_content .ace_search {*/
/*    display: none!important;*/
/*}*/
.vizcontainer.data-viewer-container.simlytiks.datatable-container {
    padding: 15px;
}

div.data-viewer-container div.dv-curve-viewer #viz_preview_options {
    width: 24%;
}
div.data-viewer-modal .toggle-text-view .chartType button:focus, div.data-viewer-modal .toggle-text-view .chartType button:active {
    outline: none!important;
}
div.data-viewer-modal .toggle-text-view .chartType button.active {
    background-color: #428BCA;
    color: #FFF;
    text-shadow: none;
    border-color: #428bca;
}
div.data-viewer-modal .toggle-text-view div[data-id] {
    display: inline-block;
}
/*div.dataviewer .toggle-text-view {*/
/*    display: none;*/
/*}*/
/*div.data-viewer-container.text_options .toggle-text-view,*/
/*div.dataviewer.text_options .toggle-text-view {*/
/*    margin-bottom: 8px 0!important;*/
/*    display: block!important;*/
/*}*/
div.data-viewer-container div.workflow.show {
    transition: none!important;
}
div.data-viewer-container.no-preview, div.data-viewer-container .no-preview {
    background-color: rgba(0,0,0, 0.85)!important;
}
div.data-viewer-container.no-preview .d3view-no-data, div.data-viewer-container .no-preview .d3view-no-data {
    color: #FFF;
    width: 25%;
    text-align: center;
}
div.data-viewer-modal .modal-header .toggle-text-view {
    padding: 0;
}

.data-viewer-container ul.dv-files {
    max-height: 250px;
    overflow: auto;
}
.data-viewer-modal ul.dv-files li a {
    word-break: break-all;
    white-space: normal;
}


span.d3view_toggleSidebar {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 1.3em;
    transition: right 0.6s ease-in;
    z-index: 10;
}
span.d3view_toggleSidebar.posLeft {
    right: unset!important;
    left: 0!important;
    transition: left 0.6s ease-in!important;
}
span.d3view_toggleSidebar i {
    color: steelblue;
}
span.d3view_toggleSidebar.shown {
    right: 240px;
}
span.d3view_toggleSidebar.shown.posLeft {
    right: unset!important;
    left: 240px!important;
}
div.d3view_sidebar_container {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DDD;
    height: 100%;
    z-index: 120;
    width: 240px;
    padding: 15px;
}
div.d3view_sidebar_container.posLeft {
    right: unset!important;
    left: 0!important;
}
div.d3view_sidebar_container ul.list li.list-group-item > a {
    display: flex;
    align-items: center;
    word-break: break-all;
}

div.opacity-0 {
    opacity: 0!important;
}

div.d3view-blob-texts table tr td {
    vertical-align: middle;
}
div.d3view-blob-texts table tr td textarea  {
    min-height: 100px;
    border: none;
    background: none;
    box-shadow: none;
    width: 100%;
}



/* visualizations */
div.d3view-viz-helper-modal .viz-option-name {
    position: relative;top: 7px;font-weight: 500;
}
div.d3view-no-data-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
span.d3view-no-data-message {
    font-weight: 500;
    font-size: 1.2em;
}
/* hbarchart */
div.hbarchart span.prev:hover, div.hbarchart span.next:hover {
    color: red;
}

/**
 Color Blocks
 */
div.d3view-color-blocks {
    padding: 0 10px;
    position: relative;;
}
div.d3view-color-blocks .block-curve .popover .popover-content,
div.d3view-colorblocks-popover .popover-content {
    max-height: 200px;
    overflow: auto;
}
div.d3view-color-blocks .viz-outer-container {
    background-image: none;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
div.d3view-color-blocks div.viz-outer-container {

    top: 0;
    left: 0;
    min-height: 200px;
    min-width: 300px;
    height: calc(100% - 60px);
}
div.d3view-color-blocks div.viz-outer-container .viz-panels {
    display: flex;
    flex-wrap: wrap;
    float: left;
}
div.d3view-color-blocks div.viz-outer-container .sparkline-container.draggingEnabled {
    border: 3px solid red;
    cursor: move;
}
div.d3view-color-blocks div.viz-outer-container .sparkline-container .ui-resizable-handle {
    display: none;
}

div.d3view-color-blocks div.viz-outer-container .sparkline-container.draggingEnabled .ui-resizable-handle {
    display: block;
}

div.d3view-color-blocks div.viz-outer-container .sparkline-container.draggingEnabled .viz-panels {
    pointer-events: none;
}
div.d3view-color-blocks div.viz-outer-container .sparkline-container.draggingEnabled .data-panel svg.sparkline {
    cursor: move;
}
div.d3view-color-blocks div.viz-outer-container .viz-panel.ui-selecting {
    background-color: var(--dt-selection-color)!important;
}
div.d3view-color-blocks div.viz-outer-container .viz-panel.ui-selected {
    background-color: var(--dt-selection-color)!important;
}
div.d3view-color-blocks div.viz-outer-container .viz-panel.highlighted-cell {
    border-width: var(--sparkline-matrix-highlight-border-width)!important;
    border-color: var(--sparkline-matrix-highlight-border-color)!important;
    border-style: var(--sparkline-matrix-highlight-border-style)!important;
}
div.d3view-color-blocks div.viz-legends {
    float: left;
    width: 120px;
    position: absolute;
    right: 0;
    top: 55px;
}
div.d3view-color-blocks .viz-panel.mini text.minmaxText {
    display: none;
}
div.d3view-color-blocks .viz-panel text.minmaxText {
    font-size: 8px;
    font-weight: normal;
}

div.d3view-color-blocks .block-rect-container {
    position: absolute;
    z-index: -1;
    border: 2px solid #AAA;
}
div.d3view-color-blocks .block-rect-container.dragging {
    z-index: 1;
    cursor: move;
    /*border: 2px solid red;*/
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel.empty {
    background-color: #FFF!important;
}


div.d3view-color-blocks .block-rect-container.dragging:hover {
}
div.d3view-color-blocks .block-rect-container .block-rect {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dt-selection-color);
    z-index: -1;
}
div.d3view-color-blocks .block-rect-container .block-label {
    position: absolute;
    top: -15px;
}
div.d3view-color-blocks .block-rect-container .block-avg {
    position: absolute;
    right: 10px;
    top: 3px;
    font-size: 1.5em;
    background: #FFF;
}
.d3view-color-blocks .block-rect-container .op-sparkline .tick text {
    font-size: 85%;
}
.d3view-color-blocks svg.sparkline .tick text {
    font-size: 85%;
}

div.d3view-color-blocks div.settings {
    margin-bottom: 8px;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel {
    border: 2px solid #AAA!important;
    /*background-color: #FFF;*/
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel .val-container {
    flex-direction: column;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel .val-container.min {
    border: 3px solid var(--plugin-primary-color);
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel .val-container.max {
    border: 3px solid red;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel span.y_val {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    /*font-size: 1.25rem;*/
    display: flex;
    align-items: center;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel span.y_val > * {
    margin-right: 3px;
}
div.d3view-color-blocks span.y_val sub {
    color: gray;
}
div.d3view-color-blocks div.viz-panel .data-panel {
    border-right: 2px dotted #CCC;
}
div.d3view-color-blocks div.viz-panel .data-panel svg.sparkline {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
div.d3view-color-blocks .disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
div.d3view-color-blocks .disabled * {
    pointer-events: none;
}
div.d3view-color-blocks .data-panel button.reset {
    position: absolute;
    right: 0;
    top: 3px;
    display: none;
}
div.d3view-color-blocks div.viz-panel .data-panel:last-child {
    border-right: none!important;
}
/*div.d3view-color-blocks div.controls {*/
/*    position: relative;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*}*/
div.d3view-color-blocks div.controls button:focus, div.d3view-color-blocks div.controls button:active {
    outline: none!important;
}
div.d3view-color-blocks div.x_slider {
    width: 90%;
}
div.d3view-color-blocks div.x_slider, div.d3view-color-blocks .slider-value {
    position: relative;
    /*top: 8px;*/
    /*float: left;*/
}
div.d3view-color-blocks .panel-name {
    font-weight: 500;
    position: absolute;
    left: 2px;
    top: 3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: normal;
    word-break: break-all;

    font-size: var(--colorblocks-label-font-size);
}
div.d3view-color-blocks .ui-resizable-handle:hover {
    background: #DDD;
}

div.d3view-color-blocks .light-text .panel-name {
    color: #FFF;
}
div.d3view-color-blocks .panel-name .min-val,
div.d3view-color-blocks .panel-name .max-val {
    font-size: 85%;
}
div.d3view-color-blocks[data-labels-position="center"] .panel-name {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
div.d3view-color-blocks[data-labels-position="bottom-left"] .panel-name {
    bottom: 10px;
    top: unset;
}
div.d3view-color-blocks[data-labels-position="bottom-center"] .panel-name {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    top: unset;
    text-align: center;
}
div.d3view-color-blocks[data-labels-position="top-center"] .panel-name {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}


div.d3view-color-blocks div.viz-outer-container div.viz-panel[data-part-of-block="true"][data-has-curve-operation] {
    border: none!important;
}
div.d3view-color-blocks div.viz-outer-container div.viz-panel[data-part-of-block="true"][data-has-curve-operation] * {
    display: none;
}
div.d3view-color-blocks .block-rect-container.has-curve-operation {
    z-index: 1;
}
div.d3view-color-blocks .block-rect-container .block-curve {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


/* custom table */
/* HT Table */
div.d3view-ct .ht_table table,
div.d3view-ct .ht_table tbody,
div.d3view-ct .ht_table thead,
div.d3view-ct .ht_table td,
div.d3view-ct .ht_table th,
div.d3view-ct .ht_table input,
div.d3view-ct .ht_table textarea,
div.d3view-ct .ht_table div {
    box-sizing: border-box!important;
    -webkit-box-sizing: border-box!important;
    -moz-box-sizing: border-box!important;
}
div.d3view-ct .ht_table th {
    vertical-align: middle;
    text-align: center;
}
div.d3view-ct .ht_table td {
    white-space: normal!important;
    /*vertical-align: middle;*/
    /*text-align: center;*/
}
div.d3view-ct .ht_table td {
    /*border-right: none;*/
    /*border-left: none;*/
}
div.d3view-ct .handsontable table.htCore thead {
    display: none;
}
div.d3view-ct .header-value-table .header-val-text {
    margin: 10px;
    margin-left: 0;
    display: inline-block;
    font-weight: bold;
    border: 1px solid #DDD;
    padding: 0 15px;
    font-size: 1.3em;
}
div.d3view-ct .header-value-title {
    font-weight: bold;
    font-size: 1.3em;
    position: absolute!important;
    cursor: pointer;
    min-width: 200px!important;
    white-space: nowrap;
    z-index: 200;
    text-overflow: ellipsis;
    overflow: hidden;
}
div.d3view-ct .ht_table .ht-val:not(.isSplit) {
    padding: 10px;
}
div.d3view-ct .ht_table .ht-val.isSplit {
    height: 100%;
    overflow: auto;
}
div.d3view-ct .ht_table .ht-val.isSplit ul.ht-val-list {
    display: flex;
    height: 100%;
    margin-bottom: 0;
}
div.d3view-ct .ht_table .ht-val.isSplit ul.ht-val-list li.ht-val-item {
    display: flex;
    border-right: 1px solid #CCC;
    padding: 0 10px;
    height: 100%;
    align-items: center;
    flex: 1 0 auto;
    justify-content: center;
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
}
div.d3view-ct .ht_table .ht-val.isSplit ul.ht-val-list li.ht-val-item:last-child {
    border-right: none;
}
div.d3view-ct .ht_table .ht-val a.curve_col {
    margin-left: 4px;
}
div.d3view-ct .ht_table, div.d3view-ct .ht_table .ht-val-image, div.d3view-ct .ht_table, div.d3view-ct .ht_table .ht-val-response {
    cursor: pointer;
}
div.d3view-ct-viz-selection-container {
    display: flex;
}
div.d3view-ct-viz-selection-container #vizArea .no_data {
    position: relative;
    left: 50%;
    top: 50%;
    font-size: 1.2em;
    font-weight: 500;
}
div.d3view-ct-viz-selection-container #vizArea {
    border-right:  1px solid #DDD;
}
div.d3view-ct-viz-selection-container #sideBar li.list-group-header {
    font-weight: bold;
}
div.d3view-ct-viz-selection-container #sideBar li.list-group-item {
    padding: 5px;
    cursor: pointer;
    border: none;
}
div.d3view-ct-viz-selection-container #sideBar li.list-group-header {
    border-bottom: 1px solid #DDD;
}
div.d3view-ct-viz-selection-container #sideBar li.list-group-item:hover {
    background-color: #DDd;
}
div.d3view-ct-viz-selection-container #sideBar li.list-group-item.selected {
    background-color: #428BCA;
    color: #FFF;
}

div.d3view-ct div.ht_table_container[data-h-align="center"] .ht-val {
    height: 100%;
    display: flex;
    align-items: center;
}
div.d3view-ct div.ht_table_container[data-v-align="center"] .ht-val {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.handsontable .htDimmed {
    /*background-color: #f5f5f5!important;*/
}

div.htContextMenu.handsontable div.htContainer .wtHolder {
    max-height: 300px;
    overflow: auto;
    border: 1px solid #CCC;
}

/* Vector matrix */
div.vc_tooltip {
    position: fixed;
    background: #4f5359;
    color: #FFF;
    padding: 10px;
    z-index: 8000;
    border-radius: 6px;
    pointer-events: none;
}

/* axis context menu */
div#d3view-axis-context-menu {
    display: none;
    z-index: 2060;
    background-color: #FFF;
    width: 325px;
    position: fixed;
    height: auto!important;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    border-radius: 6px;
}
div#d3view-axis-context-menu li.context-menu-item.active > a:after {
    content: '\f00c';
    font-family: FontAwesome;
}
div#d3view-axis-context-menu li.context-menu-item {
    padding: 0px 0;
    width: 100%;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
}
div#d3view-axis-context-menu li.context-menu-item a {
    color: #4f5359;
    /*padding-left: 10px;*/
}
div#d3view-axis-context-menu .newton-option.faded {
    opacity: 0.5;
    cursor: not-allowed;
}
div#d3view-axis-context-menu .newton-option.faded > * {
    pointer-events: none!important;
}
div#d3view-axis-context-menu .close-menu {
    cursor: pointer;
}
div#d3view-axis-context-menu .close-menu:hover {
    color: red;
}
div#d3view-axis-context-menu .panel-body {
    padding: 15px 0;
}
div#d3view-axis-context-menu .divider {
    border-bottom: 1px solid #DDD;
}
div#d3view-axis-context-menu .row {
    margin: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 0 5px;
}
div#d3view-axis-context-menu .context-menu-body button.toggle-options.selected {
    background: #428BCA;
    border-color: #428BCA;
    color: #FFF;
    text-shadow: none;
}

div.decision-table-container td.isBaseline, div.decision-table-container th.isBaseline {
    background-color: lightblue;
}
/*!* d3view homepage placeholder *!*/
/*div.d3view-homepage-placeholder .ph-item {*/
/*padding: 8px;*/
/*margin-bottom: 0;*/
/*border: none;*/
/*background: none;*/
/*}*/

/* carousel left and right*/
div.carousel-inner .left {
    float: none!important;
}
div.carousel-inner .right {
    float: none!important;
    margin-left: 0!important;
}

/* ace highlighters */
.ace_log.ace_info {
    color: #5bc0de;
}
.ace_log.ace_output {
    color: green;
}
.ace_log.ace_time {
    color: deepskyblue;
}
.ace_log.ace_error {
    color: red;
}
.ace_log.ace_header {
    /*font-size: 1.3em;*/
    /*font-weight: bold;*/
    color: #4f5359;
}

/* autofit icon */
.d3view-autofit-icon {
    font-size: 7px;
    transform: rotate(45deg);
    margin: 0 1px;
}

div.d3view-test-text .legend-icons {
    display: block!important;
}
div.d3view-legends-container.d3view-test-text {
    min-width: unset;
}


/* FLow modal */
div.d3view-flow-modal .carousel-heading {
    padding: 10px;
    display: flex;
    align-items: center;
}
div.d3view-flow-modal .carousel-inner {
    /*padding: 10px;*/
}
div.d3view-flow-modal .carousel-slide-indicators {
    margin: 0px;
    display: inline;
    align-items: center;
    justify-content: center;
}
div.d3view-flow-modal ul.carousel-slide-indicators li {
    display: inline-block;
    align-items: center;
    background-color: #f5f5f5;
    padding: 4px;
    border: 1px solid #DDD;
    border-radius: 10px;
    margin-right: 8em;
    cursor: pointer;
    position: relative;
    transition: opacity, background-color 0.4s ease-in-out;
}
div.d3view-flow-modal ul.carousel-slide-indicators li:not(:first-child):before {
    content: '';
    position: absolute;
    left: -8em;
    top: 50%;
    background: steelblue;
    height: 2px;
    width: 8em;
    margin-top: -1px;
}
div.d3view-flow-modal ul.carousel-slide-indicators li.active {
    background-color: steelblue!important;
    border-color: steelblue!important;
    color: #FFF;
}
div.d3view-flow-modal ul.carousel-slide-indicators li.disabled {
    opacity: 0.4!important;
    cursor: not-allowed;
}
div.d3view-flow-modal ul.carousel-slide-indicators li .slide-icon {
}
div.d3view-flow-modal ul.carousel-slide-indicators li .slide-icon,
div.d3view-flow-modal ul.carousel-slide-indicators li .slide-label {
    font-size: 18px;
    position: relative;
    margin-right: 5px;
}

div.d3view-flow-modal .carousel-footer {
    border-top: 1px solid #ddd;
    padding: 6px;
}
div.d3view-flow-modal .carousel-slide-navigators {
    margin-top: 10px;
}
div.d3view-flow-modal ul.carousel-slide-navigators li {
    display: flex;
    align-items: center;
    /*background-color: #f5f5f5;*/
    padding: 4px;
    /*border: 1px solid #DDD;*/
    cursor: pointer;
    position: relative;
    /*transition: opacity, background-color 0.4s ease-in-out;*/
}
/*div.d3view-flow-modal ul.carousel-slide-navigators li:first-child {*/
/*    border-top-left-radius: 5px;*/
/*    border-bottom-left-radius: 5px;*/
/*}*/
/*div.d3view-flow-modal ul.carousel-slide-navigators li:last-child {*/
/*    border-top-right-radius: 5px;*/
/*    border-bottom-right-radius: 5px;*/
/*}*/

div.d3view-flow-modal ul.carousel-slide-navigators li.active {
    /*background-color: steelblue!important;*/
    /*border-color: steelblue!important;*/
    color: #428bca;
}
div.d3view-flow-modal ul.carousel-slide-navigators li.disabled {
    opacity: 0.4!important;
    cursor: not-allowed;
}
div.d3view-flow-modal ul.carousel-slide-navigators li .slide-icon {
}
div.d3view-flow-modal ul.carousel-slide-navigators li .slide-icon,
div.d3view-flow-modal ul.carousel-slide-navigators li .slide-label {
    font-size: 18px;
    position: relative;
    margin-right: 5px;
}


/** Generic Modal **/
div.d3view-generic-modal-container.hiddenContainer {
    opacity: 0;
}
div.d3view-generic-modal-container.disableTransition .modal-dialog {
    transform: none;
}
div.d3view-generic-modal-container .modal.docked {
    width: 40%;
    height: 100%;
    left: unset!important;
}
div.d3view-generic-modal-container .modal.docked .modal-dialog {
    width: 100%!important;
}
div.d3view-generic-modal-container .modal.docked .modal-dialog .modal-content {
    border-color: #DDD;
}
div.d3view-generic-modal-container.valign-center .modal {
    display: flex;
    align-items: center;
}

/**
Generic Sidebar d3VIEW
 */
div.d3view-plugins-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DDD;
    height: 100%;
    z-index: 120;
    width: 400px;
    padding: 15px;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

div.d3view-plugins-sidebar .content-wrapper {
    overflow-x: hidden;
    overflow: auto;
}

/* angle spinner */
div.d3view-angle-spinner {
    display: inline-block;
    font-size: 1.5em;
}
div.d3view-angle-spinner > i {
    display: block;
    color: steelblue;
}

div.d3view-modal-header {
    background: #FFF;
    color: #4f5359;
    padding: 10px;
}
div.d3view-modal-header .modal-title {
    display: inline-block;
}

/* schema editor */
div.d3view-schema-editor {
    height: 100%;
    width: 100%;
    overflow: auto;
}
div.d3view-schema-editor .schema-summary {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-schema-editor .schema-summary > span {
    width: 33.333%;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}
div.d3view-schema-editor table.dataTable label {
    display: flex;
    align-items: center;
}
div.d3view-schema-editor table.dataTable label input {
    margin-right: 4px;
}
div.d3view-schema-editor tr {
    max-height: 150px;
}
div.d3view-schema-editor tr.disabled {
    opacity: 0.3;
}
div.d3view-schema-editor tr td {
    overflow: hidden;
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    max-width: 100px;
}
div.d3view-schema-editor tr:first-child td, div.d3view-schema-editor tr:first-child th {
    border: none;
}
div.d3view-schema-editor tr.isID td:not(.pk) {
}
div.d3view-schema-editor tr.isID td:not(.pk) input {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
div.d3view-schema-editor-body tr .pk-icon {
    color: grey;
}
div.d3view-schema-editor-body tr .pk-icon.enabled {
    color: #000;
}
div.d3view-schema-editor tbody tr {
    border-left: 2px solid transparent;
}
div.d3view-schema-editor tr.isNew {
    border-left-color: orange;
}
div.d3view-schema-editor tr td[data-col] {
    vertical-align: middle;
}
div.d3view-schema-editor [data-state="pass"] {
    /*color: green;*/
    /*font-weight: bold;*/
    /*font-style: italic;*/
}
div.d3view-schema-editor [data-state="pass"] .sc-message {
    white-space: normal;
}
div.d3view-schema-editor [data-state="fail"] {
    /*color: red;*/
    /*font-weight: bold;*/
    /*font-style: italic;*/
}
div.d3view-schema-editor [data-state="test_results"] > div.row {
    display: flex;
    align-items: center;
}
div.d3view-schema-editor .view_failed_records {
    cursor: pointer;
}
div.d3view-schema-editor .schema-results-left {
    /*text-align: right;*/
    font-weight: 600;
    white-space: normal;
    padding-left: 0;
    margin-bottom: 8px;
}
div.d3view-schema-editor .schema-results-right > div {
    /*margin-right: 10px;*/
}
div.d3view-schema-editor .schema-results-right {
    padding-left: 0;
    white-space: normal;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
}
div.d3view-schema-editor .sparkline-container.empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
div.d3view-schema-editor span.summary-value {
    color: #4f5359;
}
div.d3view-schema-editor .sc-type-format .dropdown-toggle:hover, div.d3view-schema-editor .sc-type-format.open .dropdown-toggle {
    background: #e8f0fe;
    color: #4f5359!important;
    border-radius: 5px;
}

div.schema-editor-failed-rows-modal .freq_used, div.d3view-schema-editor .freq_used {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: -3px;
}
div.schema-editor-failed-rows-modal .freq_used .label, div.d3view-schema-editor .freq_used .label {
    margin: 5px;
    margin-left: 0;
    cursor: grab;
    font-size: 75%!important;
}
div.d3view-schema-editor datalist#steplist {
    display: flex;
    justify-content: space-between;
    font-size: 50%;
}
div.d3view-schema-editor datalist#steplist option {
    display: none;
}
div.d3view-schema-editor datalist#steplist option:first-child,
div.d3view-schema-editor datalist#steplist option:last-child {
    display: block;
}
.d3view-schema-editor .failed-sc-results .uniq-values {
    display: none;
}
div.d3view-schema-editor .bs_datatable_wrapper {
    min-height: unset;
}
div.d3view-schema-editor .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse {
    opacity: 0;
}
div.d3view-schema-editor .bs_datatable_wrapper[data-renderer="d3"] tr:hover .column_collapse,
div.d3view-schema-editor .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened {
    opacity: 1!important;
}

div.schema-editor-failed-rows-modal .handsontable th {
    background-color: #FFF;
}
div.schema-editor-failed-rows-modal .carousel-footer {
    display: none;
}
div.schema-editor-failed-rows-modal .quick_updates {
    font-size: 12px;
}
div.schema-editor-failed-rows-modal .quick_updates input {
    margin: 0;
    vertical-align: middle;
}

div.d3view-schema-editor-body .sc_options {
    opacity: 0;
}
div.d3view-schema-editor-body tr:not(.ui-selected):hover {
    background-color: #f5f5f5;
}
div.d3view-schema-editor-body .sc-table tr.ui-selected,
div.d3view-schema-editor-body .sc-table tr.ui-selecting {
    background-color: var(--dt-selection-color);
}
div.d3view-schema-editor-body tr:hover .sc_options {
    opacity: 1!important;
}
div.d3view-schema-editor-body .sc-table tbody tr {
    height: 70px;
}
div.d3view-schema-editor .sc-table .sc-image-dz {
    min-height: 100px;
    position: relative;
}
div.d3view-schema-editor .sc-table .sc-image-dz:after {
    content: 'Drop image or click to upload';
    font-size: 85%;
    color: dimgrey;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
}

div.d3view-schema-editor .sc-list-view .list-items {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-schema-editor .sc-list-view .list-items .list-item {
    height: calc(100% - 50px);
    width: calc(33% - 20px);
    margin: 10px;
    border: 1px solid #DDD;
    padding: 10px;
}
div.d3view-schema-editor .schema-editor-header {
    display: flex;
}
div.d3view-schema-editor .schema-editor-header [data-header-type] {
    flex: 1 1 auto;
    height: 100px;
    box-shadow: none;
    background: #FFF;
    border-color: var(--neutralLight);
}
div.d3view-schema-editor .tab-content {
    flex: 1 1 auto;
}

div.d3view-schema-editor .tab-content .custom-colors .twitter-typeahead {
    width: 100%;
}

.d3view-schema-editor .bs_datatable_wrapper th.collapsible_icon.dt-center {
    width: 100px!important;
}

/*div.d3view-schema-editor .tab-pane {*/
/*    padding: 15px;*/
/*}*/

.handsontable .handsontable table {
    box-shadow: none!important;
}
.handsontable.ht_clone_top table {
    border-bottom: 1px solid #AAA;
}
.handsontable.ht_clone_left table {
    border-right: 1px solid #AAA;
}
.handsontable span.colHeader {
    font-weight: bold;
}

div.d3view-iihs-tooltip {
    background-color: #4f5359;
    color: #FFF;
    border: 1px solid #4f5359;
    border-radius: 5px;
    position: absolute;
    padding: 5px;
    z-index: 200000;
    pointer-events: none;
}


span.sp_ann {
    position: absolute;
    z-index: 20000;
    font-size: 15px;
}




/* global tooltip */
div.d3view-tooltip .tooltip-inner {
    background-color: #4f5359;
    text-align: left;
}
div.d3view-tooltip.top .tooltip-arrow {
    border-top-color: #4f5359!important;
}
div.d3view-tooltip.right .tooltip-arrow {
    border-right-color: #4f5359!important;
}
div.d3view-tooltip.left .tooltip-arrow {
    border-left-color: #4f5359!important;
}
div.d3view-tooltip.bottom .tooltip-arrow {
    border-bottom-color: #4f5359!important;
}



/* simple choices */
div.d3view-simple-choices {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 20000;
    transform: translate(-50%,-50%);
    background: #FFF;
    border-radius: 4px;
    border: 1px solid #DDD;
    width: 350px;
    opacity: 0;
}
div.d3view-simple-choices .list-group {
    max-height: 250px;
    overflow: auto;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
}
div.d3view-simple-choices .list-group .list-group-item {
    border: none;
    /*border-top: 1px solid #DDD;*/
    border-left: 2px solid transparent;
}
div.d3view-simple-choices .list-group .list-group-item.selected {
    border-left-color: #428BCA!important;
}
div.d3view-simple-choices .list-group .list-group-item label {
    display: flex;
    margin-bottom: 0;
    align-items: center;
}
div.d3view-simple-choices .list-group .list-group-item input {
    margin: 0;
    margin-right: 4px;
}
div.d3view-simple-choices .sl-footer {
    border-top: 1px solid #DDD;
    padding: 10px;
}


div.d3view-viz-popover {
    max-height: 300px!important;
}
div.d3view-viz-popover .popover-content {
    overflow: auto;
}
div.d3view-viz-popover .popover-img {
    display: flex;
    justify-content: center;
}
div.d3view-viz-popover .popover-img.hasImage {
    height: 180px!important;
}
div.d3view-viz-popover .popover-img img {
    width: auto;
    max-height: 180px;
    cursor: pointer;
}
div.d3view-viz-popover .popover-text {
    font-size: 1em;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    color: #4f5359;
}

.sl-tooltip {
    z-index: 8000;
}


label.d3view-label {
    -webkit-font-smoothing: antialiased;
    font-size: .875rem;
    letter-spacing: .2px;
    color: #202124;
    text-shadow: none;
    display: inline-block!important;
}


/* =========================================================
   showLoadingMessage - Modern Loading Dialog
   ========================================================= */
div.d3view-loading-msg {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000000000;
    width: min(420px, 90vw);
    padding: 0;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-xl);
    box-shadow: var(--d3v-sh-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: d3v-loading-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Entry animation */
@keyframes d3v-loading-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Accent strip at top */
div.d3view-loading-msg::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--d3v-grad-accent);
    border-radius: var(--d3v-r-xl) var(--d3v-r-xl) 0 0;
}

/* Inner content area */
div.d3view-loading-msg .d3v-loading-body {
    padding: 24px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header row: spinner + message */
div.d3view-loading-msg .d3v-loading-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* CSS ring spinner */
div.d3view-loading-msg .d3v-loading-spinner {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2.5px solid var(--d3v-n-200);
    border-top-color: var(--d3v-accent);
    border-radius: 50%;
    animation: d3v-spin 0.7s linear infinite;
    margin-top: 1px;
}

@keyframes d3v-spin {
    to { transform: rotate(360deg); }
}

/* Message text */
div.d3view-loading-msg .d3v-loading-text {
    flex: 1;
    min-width: 0;
}

div.d3view-loading-msg span.msg {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    line-height: 1.4;
    word-wrap: break-word;
    letter-spacing: -0.01em;
}

div.d3view-loading-msg .d3v-loading-sub-msg {
    display: block;
    font-size: 12px;
    color: var(--d3v-text-muted);
    margin-top: 4px;
    line-height: 1.4;
    transition: var(--d3v-t-fast);
}

/* Title (optional) */
div.d3view-loading-msg h1.title {
    font-size: 18px;
    font-weight: 700;
    color: var(--d3v-text-primary);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

/* Progress section */
div.d3view-loading-msg .d3v-loading-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

div.d3view-loading-msg .d3v-loading-track {
    flex: 1;
    height: 6px;
    background: var(--d3v-n-100);
    border-radius: var(--d3v-r-full);
    overflow: hidden;
}

div.d3view-loading-msg .progress-bar {
    height: 100%;
    background: var(--d3v-grad-accent);
    border-radius: var(--d3v-r-full);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 0;
    color: transparent;
}

/* Shimmer on progress bar */
div.d3view-loading-msg .progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    animation: d3v-shimmer 1.8s ease-in-out infinite;
}

@keyframes d3v-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Percentage text */
div.d3view-loading-msg .d3v-loading-percent {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cancel button */
div.d3view-loading-msg .close-alert {
    position: absolute;
    right: 12px;
    top: 16px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md);
    border: none;
    background: transparent;
    color: var(--d3v-text-muted);
    cursor: pointer;
    transition: var(--d3v-t-fast);
    padding: 0;
}

div.d3view-loading-msg .close-alert:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

/* Bottom-right variant */
div.d3view-loading-msg[data-position="bottom-right"] {
    transform: none;
    top: unset;
    left: unset;
    bottom: 16px;
    right: 16px;
    width: 380px;
    border-radius: var(--d3v-r-lg);
    animation: d3v-loading-slide-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

div.d3view-loading-msg[data-position="bottom-right"]::before {
    border-radius: var(--d3v-r-lg) var(--d3v-r-lg) 0 0;
}

@keyframes d3v-loading-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide old Bootstrap .progress wrapper */
div.d3view-loading-msg .progress {
    display: none;
}

/* Added by shashank2104 on 09/15/2026 - R0-4177 - opt-in extras of showLoadingMessage:
   setContent() mounts a caller-owned block under the bar; setMinimizable() adds a minimise
   button and the .is-minimized pill (spinner + one text line + bar, click to restore).
   Nothing here applies to a card that did not ask for them. */
div.d3view-loading-msg .d3v-loading-slot {
    border-top: 1px solid var(--d3v-border);
    padding-top: 14px;
    min-width: 0;
}

div.d3view-loading-msg .minimize-alert {
    position: absolute;
    top: 16px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md);
    border: none;
    background: transparent;
    color: var(--d3v-text-muted);
    cursor: pointer;
    transition: var(--d3v-t-fast);
    padding: 0;
}

div.d3view-loading-msg .minimize-alert:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

/* it is appended after the close button; with no close button it takes that corner */
div.d3view-loading-msg .minimize-alert { right: 12px; }
div.d3view-loading-msg .close-alert ~ .minimize-alert { right: 44px; }

div.d3view-loading-msg .d3v-loading-pill-text {
    display: none;
}

/* the pill: bottom-centre of the same host, above the canvas, small enough to cover nothing */
div.d3view-loading-msg.is-minimized {
    top: auto;
    bottom: var(--d3v-loading-pill-bottom, 12px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: min(560px, calc(100% - 24px));
    border-radius: var(--d3v-r-full);
    animation: d3v-loading-pill-in 0.25s ease both;
    cursor: pointer;
}

@keyframes d3v-loading-pill-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

div.d3view-loading-msg.is-minimized::before { display: none; }

div.d3view-loading-msg.is-minimized .d3v-loading-body {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 40px 8px 14px;
}

div.d3view-loading-msg.is-minimized h1.title,
div.d3view-loading-msg.is-minimized span.msg,
div.d3view-loading-msg.is-minimized .d3v-loading-sub-msg,
div.d3view-loading-msg.is-minimized .d3v-loading-slot,
div.d3view-loading-msg.is-minimized .close-alert {
    display: none;
}

div.d3view-loading-msg.is-minimized .d3v-loading-header {
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

div.d3view-loading-msg.is-minimized .d3v-loading-spinner {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-width: 2px;
    margin-top: 0;
}

div.d3view-loading-msg.is-minimized .d3v-loading-pill-text {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    font-variant-numeric: tabular-nums;
}

div.d3view-loading-msg.is-minimized .d3v-loading-progress {
    flex: 1 1 140px;
    min-width: 140px;
    gap: 8px;
}

div.d3view-loading-msg.is-minimized .d3v-loading-track { height: 4px; }

div.d3view-loading-msg.is-minimized .minimize-alert {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

/* -------------------------------------------------------------------------
   Modern dock-style loader — Plugins.Helpers.showLoadingMessage(msg, val, { variant: 'dock' })
   Added by shashank2104 on 2026-04-19 - DVFIV-2005
   Bottom-centered pill with spinner + message + optional sub-message + optional
   slim progress bar. Coexists with the classic .d3view-loading-msg loader.
   ------------------------------------------------------------------------- */
.d3v-dock-loader {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10060;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 360px;
    max-width: 640px;
    padding: 14px 20px;
    background: #1F2937;
    color: var(--d3v-text-inverse);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-lg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    animation: d3v-dock-loader-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.d3v-dock-loader.is-hiding {
    animation: d3v-dock-loader-out 0.2s ease-in both;
}

.d3v-dock-loader-icon {
    font-size: 16px;
    color: #60A5FA;
    flex: 0 0 auto;
}

.d3v-dock-loader.is-success .d3v-dock-loader-icon {
    color: var(--d3v-success);
}

.d3v-dock-loader.is-error .d3v-dock-loader-icon {
    color: var(--d3v-danger);
}

.d3v-dock-loader-body {
    flex: 1 1 auto;
    min-width: 0;
}

.d3v-dock-loader-msg {
    word-break: break-word;
}

.d3v-dock-loader-msg b,
.d3v-dock-loader-msg strong {
    color: #FFFFFF;
    font-weight: 600;
}

.d3v-dock-loader-sub-msg {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.d3v-dock-loader-progress {
    margin-top: 8px;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--d3v-r-full);
    overflow: hidden;
}

.d3v-dock-loader-progress-bar {
    height: 100%;
    width: 0;
    background: #60A5FA;
    transition: width 0.3s ease-out;
}

.d3v-dock-loader.is-success .d3v-dock-loader-progress-bar {
    background: var(--d3v-success);
}

.d3v-dock-loader-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--d3v-r-sm);
    padding: 0;
    transition: var(--d3v-t-fast);
}

.d3v-dock-loader-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

@keyframes d3v-dock-loader-in {
    from {
        opacity: 0;
        transform: translate(-50%, 16px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes d3v-dock-loader-out {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, 16px);
    }
}

/** Added by shashank2104 on 2026-07-24 - DW-2605 - actions toast: expandable Details panel + input chips **/
/* Dock-loader "Details" expand affordance + panel (used by the actions toast) */
.d3v-dock-loader-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.10);
    border: none;
    border-radius: var(--d3v-r-full);
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    vertical-align: middle;
    transition: var(--d3v-t-fast);
}

.d3v-dock-loader-details-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}

.d3v-dock-loader-details-toggle i {
    font-size: 9px;
}

.d3v-dock-loader-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.d3v-dock-loader-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.d3v-dock-loader-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 220px;
    padding: 3px 9px 3px 5px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: var(--d3v-r-full);
    font-size: 12px;
    color: #FFFFFF;
}

.d3v-dock-loader-chip .d3v-dock-loader-chip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--d3v-r-sm);
    background: #60A5FA;
    color: #0B1220;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
}

.d3v-dock-loader-chip .d3v-dock-loader-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3v-dock-loader-meta {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

svg rect.transparent-background.highlighted-rect {
    fill: #f5f5f5!important
}

div.d3view-axis-context-menu .range-slider-val {
    position: absolute;
    left: 0%;
    top: 10px;
    color: gray;
    margin-left: -10px;
}
div.d3view-axis-context-menu .range-slider-val.range-last {
    left: 100%;
}

div.d3view-img-ann .modal-body > div.row {
    margin: 0; display: flex; align-items: center; padding-bottom: 10px;
}


.d3view-no-data, .pl-center-data {
    font-size: 1.2em;
    font-weight: 500;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: dimgrey;
}


div.iihs-container .settings-container .disabled {
    opacity: 0.3;
}
div.iihs-container .dimHide .tick, div.iihs-container .dimHide .domain {
    display: none;
}

div.iihs-container .threshold_labels text {
    font-size: 1.25em;
    dominant-baseline: hanging;
    font-weight: bold;
}
div.iihs-container .threshold_legend {
    display: none;
}

div.iihs-container .axis-handle.rotated text {
    transform: rotate(-90deg);
    text-anchor: start!important;
}
div.iihs-container g.occ_path path, div.parallel-container g.occ_path path {
    stroke-width: 2px;
    stroke: #000;
    fill: none;
}
div.iihs-container g.occ_path text, div.parallel-container g.occ_path text {
    font-weight: bold;
    dominant-baseline: hanging;
}

div.simlytiks .img-container {
    background: transparent;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
div.simlytiks .img-container .ui-resizable-handle {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in;
}
div.simlytiks div.imageInFront .d3Panel > :not(.img-container) {
    z-index: 0;
}
div.simlytiks div.imageInFront .vizBody .img-container {
    z-index: 2!important;
    pointer-events: all!important;
}
div.simlytiks div.imageInFront .img-container img {
    /*opacity: 0.75!important;*/
}
div.simlytiks div.imageInFront .img-container .ui-resizable-handle {
    opacity: 1!important;
    pointer-events: all;
}
div.simlytiks div.imageInFront .img-container .ui-resizable-handle:not(.ui-icon) {
    background: rgba(255,0,0,0.5);
}
div.simlytiks div.imageInFront .img-container .ui-resizable-handle-e,
div.simlytiks div.imageInFront .img-container .ui-resizable-handle-w {
    width: 3px;
}
div.simlytiks div.imageInFront .img-container .ui-resizable-handle-n,
div.simlytiks div.imageInFront .img-container .ui-resizable-handle-s {
    height: 3px;
}
div.simlytiks .img-container img {
    opacity: 0.3;
    max-width: 100%;
    max-height: 100%;
}
div.simlytiks .img-container.stretch img {
    width: 100%;
    height: 100%;
}
div.simlytiks .img-container .remove-img {
    position: absolute;
    right: 0;
    top: 0;
}
div.iihs-container .settings-container .row {
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 15px!important;
}


div.simlytiks-page .page-options .btn-group,
div.simlytiks-page .edit-page-name,
div.simlytiks-page .vc-blank-options,
div.simlytiks-page .panel-options {
    display: none!important;
}

.fa-arrows-alt.sortable-handle {
    transform: rotate(45deg);
}

/* IMage analyzer */
div.image-analyzer canvas {
    border: 1px solid #DDD;
}
div.image-analyzer .ia-body.hasImages > [data-id] {
    border: 1px solid #DDD;
}
div.image-positioner {
    position: relative;
}
div.image-positioner .renderingArea {
    position: relative;
}
div.image-positioner[data-mode="overlay"] canvas {
    position: absolute;
    left: 0;
    top: 0;
}
div.image-positioner .origin_label, div.image-analyzer .canvas_label {
    position: absolute;
    pointer-events: none!important;
    font-weight: 500;
}
div.image-positioner button.selected {
    background: #428bca;
    color: #FFF;
    text-shadow: none;
}
div.image-positioner[data-marker] div.settings-left > *:not(#close_markers),
div.image-positioner[data-marker] div.settings-right > * {
    opacity: 0.4!important;
    cursor: not-allowed;
}
div.image-positioner[data-marker] div.settings-left > *:not(#close_markers) > *,
div.image-positioner[data-marker] div.settings-right > * {
    pointer-events: none;
}

div.image-positioner[data-marker="1"] div.raw-image[data-id="2"] {
    opacity: 0.4!important;
    cursor: not-allowed;
}

div.image-positioner div.raw-image[data-id] canvas {
    border: 1px solid #DDD;
    transition: box-shadow 0.15s ease-in;
}

div.image-positioner[data-marker="1"] div.raw-image[data-id="1"] canvas {
    border: 1px solid steelblue;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}
div.image-positioner[data-marker="1"] div.raw-image[data-id="2"] > * {
    pointer-events: none;
}

div.image-positioner[data-marker="1"] div[data-id="1"] .marker-text {
    display: block!important;
    text-align: center;
}
div.image-positioner[data-marker="1"] div[data-id="1"] canvas {
    cursor: crosshair;
}

div.image-positioner[data-marker="1"] div.raw-image[data-id="2"] {
    opacity: 0.4!important;
    cursor: not-allowed;
}
div.image-positioner[data-marker="2"] div.raw-image[data-id="2"] canvas {
    border: 1px solid steelblue;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}
div.image-positioner[data-marker="1"] div.raw-image[data-id="2"] > * {
    pointer-events: none;
}

div.image-positioner[data-marker="2"] div[data-id="2"] .marker-text {
    display: block!important;
    text-align: center;
}
div.image-positioner[data-marker="2"] div[data-id="2"] canvas {
    cursor: crosshair;
}

div.image-positioner .quick-log-msg {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
}

div.image-positioner.hasOverlay .raw-image {
    display: none;
}
div.image-positioner.hasOverlay .overlay-opacity-slider {
    display: flex!important;
}
div.image-positioner #overlay {
    position: absolute;
    left: 15px;
    top: 49px;
    pointer-events: none;
}
div.image-positioner #overlay {

}
div.image-positioner.is_playing .settings-left,
div.image-positioner:not(.hasOverlay) .controls,
div.image-positioner.is_loading .settings-left {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

div.image-positioner div.image-clipper {
    left: 15px;
    top: 30px;
}


/* IMAGE CLIPPER */
div.image-clipper {

}
div.image-clipper .footer, div.image-editor .footer {
    position: absolute;
    bottom: 20px;
    width: 90%;
    left: 5%;
    padding: 0 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
}
div.image-clipper .footer label, div.image-editor .footer label {
    color: #FFF;
    font-size: 1.2em;
}

div.image-editor.colorPick canvas {
    cursor: crosshair;
}




/* KV Dataset */
div.kv_dset_container input.toggle_column {
    height: auto;
    vertical-align: middle;
    margin: 0;
}

div.kv_dset_container {
    height: 100%;
}
div.kv_dset_container .kv_dset_table_container {
    height: calc(100% - 35px);
}
div.kv_dset_container.tiny .kv_header,
div.kv_dset_container.tiny .settings_block {
    display: none;
}
div.kv_dset_container.tiny:hover .kv_header,
div.kv_dset_container.tiny:hover .settings_block {
    display: block;
}
div.kv_dset_container.tiny .kv_dset_table_container {
    height: calc(100% - 0px);
}
div.kv_dset_container.tiny:hover .kv_dset_table_container {
    height: calc(100% - 65px);
}
div.kv_dset_container[data-border="vertical"] table.kv_dset td {
    border-right: 1px solid #DDD;
    border-top: none;
}
div.kv_dset_container[data-border="none"] table.kv_dset td {
    border: none!important;
}
div.kv_dset_container[data-border="both"] table.kv_dset td {
    border-right: 1px solid #DDD;
}

div.kv_dset_container[data-zebra="true"] table.kv_dset tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}
div.kv_dset_container .table-row {
    height: 90px;
}

div.kv_dset_container .setting_item.disabled > * {
    pointer-events: none;
}

div.kv_dset_container table.kv_dset {
    font-size: 1.2em;
    margin: 0 !important;
}
div.kv_dset_container table.kv_dset thead tr.name th[rowspan="2"] {
    vertical-align: middle;
}
div.kv_dset_container td.name {
    font-weight: bold;
}
div.kv_dset_wrapped .table-container thead th:not(.collapsible_icon):not(.checkbox_selection) {
    resize: none!important;
    width: unset!important;
}
div.kv_dset_wrapped .table-container thead .th-options {
    display: none!important;
}
div.kv_dset_wrapped .table-container .dt-tables table {
    width: 100%!important;
}
/*div.image_annotations canvas.img-ann-canvas {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    z-index: 0;*/
/*}*/
/*div.image_annotations .svg-container svg {*/
/*    position: absolute;*/
/*    left: 0px;*/
/*    top: 0px;*/
/*    z-index: 2;*/
/*    background: transparent;*/
/*}*/
div.image_annotations .img-ann-header {
    position: absolute;
    top: 10px;
    right: 10px;
    visibility: hidden;
}
div.image_annotations:hover .img-ann-header {
    visibility: visible;
}
div.image_annotations .image-ann-msg {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
div.image_annotations .ann-tagline {
    cursor: pointer;
}
div.image_annotations g.ang_text {
    pointer-events: none;
}
.image_annotations svg .connection line {
    shape-rendering: auto;
}
div.dataviewer div.image_gallery .image-options {
    display: none;
}
div.image_annotations[data-mode="publish"] .img-ann-header,
div.image_annotations[data-mode="publish"] .image-options,
div.image_annotations[data-mode="view"] .img-ann-header,
div.image_annotations[data-mode="view"] .image-options {
    display: none;
}

div.image_annotations .viz-box svg text {
    fill: #333;
}

div.image_annotations .viz-box .ann-text {
    font-size: 18px;
}
.pl-right-settings-menu .btn-group-vertical button:hover,
.pl-right-settings-menu .btn-group-vertical > a:hover,
.pl-right-settings-menu div.dropdown .dropdown-toggle:active {
    color: #000!important;
    background: #eee!important;
}
.pl-right-settings-menu .btn-group-vertical button,
.pl-right-settings-menu .btn-group-vertical a.dropdown-toggle {
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}
.pl-right-settings-menu .btn-group-vertical button.active {
    background: #428BCA!important;
    color: white!important;
    text-shadow: none;
}
.pl-right-settings-menu .btn-group-vertical button {
    border-color: transparent;
    color: gray;
    box-shadow: none;
    background: #FFF;
    padding: 1px;
}
@media screen and (min-width: 1024px) {
    .pl-right-settings-menu .btn-group-vertical button > i {
        width: 24px;
        height: 24px;
        font-size: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*div.image_annotations .response-box {*/
/*    border: 1px solid #428BCA;*/
/*    border-left-width: 3px;*/
/*    background-color: rgba(255,255,255,0.6);*/
/*    !*color: #FFF!important;*!*/
/*    border-radius: 4px;*/
/*    padding: 4px;*/
/*    cursor: pointer;*/
/*}*/

div.response-box, div.image_annotations .viz-box {
    border: 1px solid steelblue;
    border-left-width: 2px;
    background-color: rgb(211 244 255 / 45%);
    border-radius: 4px;
    padding: 4px;
    color: #333;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
}
div.image_annotations .viz-box {
    font-size: unset;
}
div.image_annotations g.ann.highlighted .response-box {
    border-width: 3px;
}
div.response-box .sc-image {
    height: 30px;
    display: inline-block;
    width: auto;
}


/* excel parser */
.excelresponseparser .sidebarArea .responseEditor .manual_inputs .manual_input {
    border: 1px solid rgb(170, 170, 170);
    padding: 15px;
}
.excelresponseparser .sidebarArea .responseEditor .manual_inputs .manual_input .remove_ci {
    cursor: pointer;
}
.excelresponseparser .sidebarArea .responseEditor .manual_inputs .manual_input .remove_ci:hover {
    color: red;
}
.excelresponseparser .sidebarArea .responseEditor .manual_inputs .manual_input .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.excelresponseparser .sidebarArea .responseEditor .manual_inputs .manual_input .disabled input {
    pointer-events: none;
}
.excelresponseparser .slickgridcontainer .rendering-txt {
    font-size: 2em;
    z-index: 20;
}

.excelresponseparser .slick-header-menu {
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 2px;
    display: inline-block;
    min-width: 150px;
    max-width: 210px;
    border-radius: 6px;
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    z-index: 2000;
}
.excelresponseparser .slick-header-menu .slick-header-menuitem {
    width: 100%;
    padding: 0;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    line-height: 20px;
    position: relative;
    color: #4f5359;
}
.slick-header-menuitem-disabled {
    color: silver!important;
    cursor: not-allowed!important;
}
.slick-header-menuitem-disabled * {
    pointer-events: none;
}
.excelresponseparser .slick-header-menu .slick-header-menuitem:not(.slick-header-menuitem-disabled):hover {
    background-color: #EEE;
}
.slick-header-column.ui-state-default {
    font-weight: bold;
    cursor: pointer;
}
.slick-header-column.ui-state-default:hover {
    background-color: lightgreen;
}

.excelresponseparser .slick-header-column.selected {
    background-color: lightgreen;
}
/*.excelresponseparser .slick-cell.selected {*/
/*    background-color: lightgreen;*/
/*}*/



div.d3view-tags-container {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.d3view-tags-container .tag-item {
    margin: 3px;
    word-break: break-all;
    white-space: normal;
}
.d3view-date {
    /*color: #0dcf0d;*/
}
.d3view-badge {
    background-color: #007bff;
}
.d3view-external-link {
    position: absolute;
    right: 3px;
    vertical-align: middle;
    padding: 3px;
    background: #FFF;
    display: none;
}


.d3view-date-range-display .daterangepicker:before, .d3view-date-range-display .daterangepicker:after {
    content: unset!important;
}
.d3view-date-range-display .daterangepicker {
    position: relative !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    z-index: auto!important;
    padding: 0;
    border: none;
    box-shadow: none;
    width: 100%;
    margin-top: 0;
}
.d3view-date-range-display .daterangepicker .calendar {
    width: 49%;
    max-width: 49%;
}
.d3view-date-range-display .daterangepicker tbody td {
    pointer-events: none!important;
}
.d3view-date-range-display .daterangepicker .daterangepicker_input,
.d3view-date-range-display .daterangepicker .ranges {
    display: none!important;
}


.d3view-distribution-uniq-val {
    font-size: 1.2em;
    font-weight: 500;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* sidebar */
div.d3view-side-modal {
    height: 100%;
    position: fixed;
    /*display: none;*/
    top: 0;
    right: 0;
    z-index: 20;
    width: 320px;
    transition: all linear 300ms;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    background: #FFF;
    border: 1px solid #eee;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
div.d3view-side-modal.fixed {
    position: fixed;
}
div.d3view-side-modal.open {
    /*display: block!important;*/
    transform: translate3d(0, 0, 0);
    visibility: visible;
}
body.sidebar-open {
    /*overflow: hidden;*/
}
body.sidebar-open::-webkit-scrollbar {
    display: none;
}


/* multi mini viz*/
div.multi-mini-viz-container .charts-container {
    /*padding: 0 40px;*/
    height: 100%;
    width: 100%;
}
div.multi-mini-viz-container .charts-container[data-type="flex"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
div.multi-mini-viz-container .column-caption {
    padding: 16px;
}
div.multi-mini-viz-container .column-caption h3 {
    width: 100%;
}
div.multi-mini-viz-container .charts-container .column-viz-container .viz-container {
    padding: 10px 0;
}
div.multi-mini-viz-container .charts-container .column-viz-container {
    float: left;
}
div.multi-mini-viz-container .carousel-indicators li,
div.distribution-carousel .carousel-indicators li {
    background-color: #FFF;
    border-color: #444;
}
div.multi-mini-viz-container .carousel-indicators li.active,
div.distribution-carousel .carousel-indicators li.active {
    background-color: #0b7bff;
}
div.distribution-carousel .carousel-caption {
    bottom: unset!important;
    top: 0!important;
    text-shadow: none!important;
    color: #444!important;
}
div.distribution_charts_container .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.distribution_charts_container .distribution-plot-viz {
    min-height: 200px;
}
div.distribution-plot[data-mode="stats"] .distribution-plot-viz {
    height: 400px;
    margin-bottom: 10px;
}
.distribution-plot-viz .panel > .panel-heading {
    border: none;
    display: flex;
    justify-content: space-between;
}
div.distribution_charts_container.simpleText .panel-heading {
    background: none;
    border: none;
}
div.distribution_charts_container.simpleText .viz-container {
    height: 100px;
}
div.distribution-plot-viz.fixed {
    position: absolute!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    padding: 0!important;
    margin: 0!important;
    z-index: 20000;
}

div.distribution-plot-viz .progress-container .progress-bar {
    background-image: none;
}

.d3view-carousel .carousel-inner {
    height: calc(100% - 30px);
    width: calc(100% - 60px);
    margin: 0 auto;
}
.d3view-carousel .carousel-inner.full-width {
    width: 100%;
}
.d3view-carousel.no-indicators .carousel-inner {
    height: 100%;
}
.d3view-carousel.no-controls .carousel-inner {
    width: 100%;
}
.d3view-carousel-control, .d3view-carousel .carousel-control {
    /*background: #FFF!important;*/
    background-image: none!important;
    width: 30px!important;
    color: silver!important;
    text-shadow: none;
    z-index: 2;
    margin: 0!important;
}
.d3view-carousel-control > .glyphicon, .d3view-carousel .carousel-control  > .glyphicon {
    transform: translateY(-50%);
}

div.distribution-carousel .vizcontainer {
    padding-top: 5px;
    margin: 0 auto;
}
div.distribution-carousel .column-caption {
    padding: 16px;
}
div.distribution-carousel .column-caption h3 {
    width: 100%;
}
div.d3view-carousel .carousel-indicators li {
    width: 15px;
    height: 15px;
    margin: 0 5px;
}
div.d3view-carousel .carousel-indicators li:not(.active):hover {
    background-color: red;
}
div.d3view-carousel .carousel-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* DVFIV-2010 — Target carousel picker inside MLPredictionView (Hybrid tab) */
.ml-model-container .ml-inv-target-carousel {
    height: 100%;
}
.ml-model-container .ml-inv-target-carousel .carousel-inner,
.ml-model-container .ml-inv-target-carousel .item,
.ml-model-container .ml-inv-target-carousel .viz-containers {
    height: 100%;
}
.ml-model-container .ml-inv-target-carousel .carousel-control {
    background: var(--d3v-bg-primary, #fff) !important;
    background-image: none !important;
    border: 1px solid var(--d3v-border, rgba(0,0,0,0.08));
    border-radius: 50%;
    width: 34px !important;
    height: 34px;
    top: 50%;
    bottom: auto;
    margin-top: -17px;
    opacity: 0.9;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
    transition: all 0.15s ease;
    color: var(--d3v-text-primary, #333) !important;
    text-shadow: none;
    z-index: 3;
}
.ml-model-container .ml-inv-target-carousel .carousel-control.left { left: 6px; }
.ml-model-container .ml-inv-target-carousel .carousel-control.right { right: 6px; }
.ml-model-container .ml-inv-target-carousel .carousel-control:hover {
    opacity: 1;
    box-shadow: var(--d3v-sh-md, 0 2px 6px rgba(0,0,0,0.15));
    transform: scale(1.05);
}
.ml-model-container .ml-inv-target-carousel .carousel-control .glyphicon {
    font-size: 14px;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* file system */
div.d3view-file-system .fs-heading li {
    display: inline-block;
}
div.d3view-file-system .fs-heading li:after {
    content: ' > ';
    padding: 3px;
}
div.d3view-file-system .fs-heading li:last-child:after {
    content: ''!important;
}
div.d3view-file-system .fs-heading li.active a {
    color: #333;
    text-decoration: none;
}
div.d3view-file-system .fs-heading .clear-search:hover {
    color: #000!important;
}
div.d3view-file-system table#fs-table tr {
    /*background-color: #FFF!important;*/
}
div.d3view-file-system table#fs-table tr.ui-selecting {
    background-color: var(--dt-selection-color-light);
}
div.d3view-file-system table#fs-table tr.ui-selected {
    background-color: #2e6da4;
    background-image: -webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));
    background-image: linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
    background-repeat: repeat-x;
}
div.d3view-file-system table#fs-table tr.ui-selected * {
    color: #FFF;
}
div.d3view-file-system table#fs-table tr.ui-selected td {
    border: none;
}

.d3view-full-height {
    height: 100%;
}


div.focus_backdrop {
    position: fixed;
    background: #000;
    float: none!important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    transition: opacity 0.3s ease-in;
    opacity: 0;
}
div.focus_backdrop.in {
    opacity: 0.45!important;
}
div.d3view-el-focus .focus-buttons {
    position: fixed;
    z-index: 20000;
}

div.sl-viz-enlarged {
    /*z-index: 20000;*/
    position: absolute!important;
    left: 0px;
    top: 0;
}

.d3view-fullh {
    height: 100%;
    position: relative;
    overflow: auto;
}

div.imageann-viz div.dz {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-style: dashed;
}
div.imageann-viz .imagegallery {
    border: 1px solid #ddd;
    display: none;
}
div.imageann-viz.hasImage .imagegallery {
    display: block!important;
}
div.imageann-viz.hasImage div.dz {
    display: none;
}
div.imageann-viz div.settings-row {
    display: none;
}
div.imageann-viz.hasImage div.settings-row {
    display: block!important;
}
@media screen and (min-width: 2100px) {
    .imageann-viz .image_annotations .resp-val {
        display: none!important;
    }
}
div.imageann-viz .image_gallery div.gallery_container div.thumbnail-body {
    height: 100%!important;
}


/* large select list */
div.d3view-large-select-list .select-category {
    padding: 10px;
}
div.d3view-large-select-list .select-category .cat-heading {
    margin-bottom: 10px!important;
    position: relative;
}
div.d3view-large-select-list .category-input, div.d3view-large-select-list .remove-category {
    position: absolute;
    right: 0px;
    top: 2px;
    margin: 0;
    height: auto;
}
div.d3view-large-select-list .list-heading {
    display: block;
}
div.d3view-large-select-list .list-container {
    border: 1px solid #DDD;
    min-height: 100px;
    position: relative;
    border-radius: 4px;

}
div.d3view-large-select-list .input-remove {
    position: relative;
    bottom: 6px;
    color: #c1c1c1;
    cursor: pointer;
}
div.d3view-large-select-list .input-remove:hover {
    color: rgba(255,0,0,0.5);
}
div.d3view-large-select-list ul.flex-list {
    max-height: 100px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}
div.d3view-large-select-list ul.flex-list li {
    flex: 0 0 50%;
}

/* treeview */
.plugins-treeview li.list-group-item {
    border: none;
    padding: 7px 9px;
}
.plugins-treeview ul.list-group {
    box-shadow: none;
}
.plugins-treeview .toggle-icon {
    cursor: pointer;
    color: gray;
    margin-right: 5px;
}
.plugins-treeview label {
    margin-bottom: 0;
}
.plugins-treeview input {
    margin: 0;
    margin-right: 5px;
}
.plugins-treeview ul.nested-menu {
    padding-left: 40px;
}
.plugins-treeview li.has_submenu > div > label {
    font-weight: bold;
    font-size: larger;
}


.dropdown-menu > li > a:hover,
.bs_datatable_wrapper .selectionOptions .submenu > li > a:hover,
.data-table.sg-context-menu .submenu > li > a:hover,
.data-table.sg-context-menu > li > a:hover,
.nested-dropdown-menu > li > a:hover {
    cursor: pointer;
    color: #ffffff!important;
    text-shadow: none;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

div.vizcollection-container {
    padding: 20px;
}
div.vizcollection-container > .title {
    margin-bottom: 10px;
    text-align: center;
    cursor: pointer;
}
div.vizcollection-container .viz_collection {
    position: relative;
    width: calc(50% - 30px)!important;
    margin: 15px;
    /*border: 1px solid #DDD;*/
}
div.vizcollection-container .viz_collection.pl-fixed {
    width: 100%!important;
}


div.d3view-ranking .bullet { font: 10px sans-serif; }
div.d3view-ranking .bullet .marker { stroke: #000; stroke-width: 2px; }
div.d3view-ranking .bullet .tick line { stroke: #666; stroke-width: .5px; }
div.d3view-ranking .bullet .range.s0 { fill: #eee; }
div.d3view-ranking .bullet .range.s1 { fill: #ddd; }
div.d3view-ranking .bullet .range.s2 { fill: #ccc; }
div.d3view-ranking .bullet .measure.s0 { fill: steelblue; }
div.d3view-ranking .bullet .measure.s1 { fill: steelblue; }


/* drag handles */
svg .axes_drag_handle {
    stroke-width: 15px;
    stroke: transparent;
    fill: none;
    cursor: col-resize;
}
svg .axes_drag_handle[data-id*="xAxis"] {
    cursor: row-resize;
}
svg .axes_drag_handle[data-id="x"], svg .axes_drag_handle[data-id="x_top"] {
    cursor: row-resize;
}
svg .axes_drag_handle:hover, svg .axes_drag_handle.dragging {
    stroke: rgba(0,0,0,0.1);
}

svg.heatmap .node-txt {
    pointer-events: none;
}
svg.heatmap .diagonal rect {
    fill: grey!important;
}
svg.heatmap .diagonal text {
    fill: #FFF!important;
}

/* filterable datatable */
div.d3view-filterable-dt .filter-config {
    cursor: pointer;
}
div.d3view-filterable-dt .filter-config:hover {
    color: #428bca;
}
div.d3view-filterable-dt .remove-filter {
    cursor: pointer;
}
div.d3view-filterable-dt .remove-filter:hover {
    color: red;
}
div.d3view-filterable-dt .unique-items li > a {
    padding: 4px;
    color: #333;
    text-decoration: none;
}
div.d3view-filterable-dt .unique-items {
    max-height: 250px;
    overflow: auto;
}
div.d3view-filterable-dt .search-panes {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-filterable-dt .search-panes .panel {
    margin: 12px;
    width: calc(50% - 24px);
    margin-top: 0;
}
div.d3view-filterable-dt .left_cont[data-view="rows"] .search-panes .panel {
    border: none;
    box-shadow: none;
}
div.d3view-filterable-dt .search-panes .panel .panel-body {
    padding: 0 15px;
}
div.d3view-filterable-dt .left_cont[data-view="rows"] .search-panes .panel .panel-heading {
    border: none;
}
div.d3view-filterable-dt .search-panes .panel .panel-heading .panel-title {
    font-size: 20px;
    font-weight: bold;
}
div.d3view-filterable-dt .left_cont[data-view="rows"] .panel {
    width: 100%;
}
/*div.d3view-filterable-dt .search-panes .panel-body {*/
/*    padding: 0;*/
/*}*/
div.d3view-filterable-dt .unique-items li:hover {
    background: #efefef;
}
div.d3view-filterable-dt .unique-items li.selected {
    background: #428bca;
}
div.d3view-filterable-dt .unique-items li.selected * {
    color: #FFF!important;
}

.bubble-chart-container .tooltip {
    pointer-events: none;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.5);
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}
.bubble-chart-container.renderedInCanvas svg.bubble-chart {
    position: relative;
    z-index: 2;
}
.bubble-chart-container.addingLabels .rendering_text {
    position: absolute;
    display: block;
    right: 4px;
    bottom: 4px;
    z-index: 3;
    font-size: 1.4em;
    color: dimgrey;
}
.bubble-chart-container g.label_lines path {
    /* stroke-opacity: 0.7; */
    stroke-width: 0.5;
    pointer-events: none;
}
.bubble-chart-container .rendering_text {
    display: none;
}
div.bubble-chart-container .image_container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
div.bubble-chart-container .svg-container {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
.bubble-chart-container.hasHeatMapBands svg g.bubble_g .bubble {
    stroke: #FFF!important;
}
div.bubble-chart-container path.connector {
    /*stroke-dasharray: 5;*/
    stroke-width: 0.5;
}
div.bubble-chart-container g.bubble_g.is-dragging * {
    stroke: red!important;
}
div.bubble-chart-container g.bubble_g.highlighted * {
    stroke: grey!important;
}
div.bubble-chart-container g.bubble_g.is-dragging circle.shadow, div.bubble-chart-container g.bubble_g.is-hovered circle.shadow {
    display: block!important;
    fill: #FFF!important;
    stroke: #CCC!important;
}
div.bubble-chart-container g.bubble_g.is-dragging path.connector, div.bubble-chart-container g.bubble_g.is-hovered path.connector {
    stroke-opacity: 0.5!important;
    opacity: 1!important;
}
div.bubble-chart-container g.bubble_g.is-hovered path.connector {
    stroke: red;
}
/*div.bubble-chart-container.autofit .svg-container {*/
/*    width: 100%;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*}*/
div.bubble-chart-container.autofit svg.chart-axis {
    background: #fff;
}
div.bubble-chart-container.autofit svg.bubble-chart .x.axis,
div.bubble-chart-container.autofit svg.bubble-chart .xLabel {
    display: none;
}
div.bubble-chart-container:not(.autofit) .axes_container {
    display: none;
}
div.bubble-chart-container .main_svg_container svg {
    position: absolute;
    left: 0;
    top: 0;
}
div.bubble-chart-container .main_svg_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow-y: auto;
    height: 100%;
    overflow-x: hidden;
}
div.bubble-chart-container .zoom_brush rect.background {
    cursor: zoom-in!important;
}
/** Added by shashank2104 on 2026-05-10 - bubble rigor pass.
 *  Updated 2026-05-12.
 *
 *  attr-legends-container holds the size_by / opacity_by / thickness_by /
 *  symbol_by legends as a vertical strip to the right of the chart, next
 *  to (and aligned with) the numerical color fringe `.legends-svg`.
 *
 *  The container itself is allowed to consume the full chart height
 *  (height:100% + overflow-y:auto) so a long stack of legends can scroll
 *  rather than getting clipped — but each `.legends` child hugs its
 *  content height so empty space is NOT auto-padded. Previously when
 *  only 1–2 attr legends were active the container left a huge blank
 *  band below the legends because children were `flex: 1 1 300px`,
 *  trying to fill the column.
 *
 *  Layout rules:
 *   - column flex flow, items hug content -> tight stack, no whitespace.
 *   - align-items: flex-start so legends don't stretch.
 *   - top: 0 aligned with chart drawing top (the numerical color fringe
 *     uses the same baseline now — see viz.defs.js ApplyDimensions).
 *   - max-height 100% + overflow-y:auto -> never spills out of chart.
 *   - compact `.legends-label` typography matches the simlytiks-modern
 *     text scale (12px / 600 weight). **/
div.bubble-chart-container div.attr-legends-container {
    flex-direction: column;
    flex-wrap: nowrap;     /* critical: HEAD value was `wrap`. With column flex
                              that creates NEW COLUMNS when one child overflows —
                              a high-cardinality size_by (e.g. simulation with
                              25 distinct values) pushed opacity/thickness into
                              a 2nd column on the right and hid them. */
    align-items: flex-start;
    /** Updated by shashank2104 on 2026-06-01 - R0-3672 - width + max-width are
     *  now CSS-variable driven so bubble.js can widen the column on premium
     *  decks (24px legend font) where labels like "Reference Rows" / "Optimized
     *  Rows" no longer fit in the old 160px / 25% cap. Defaults preserve the
     *  pre-change interactive look. **/
    max-width: var(--bb-attr-legend-max-w, 25%);
    margin-left: 10px;
    height: 100%;          /* take full chart height; the per-legend max-height
                              below ensures no single legend hogs all of it */
    max-height: 100%;
    width: var(--bb-attr-legend-w, 160px);
    overflow-y: auto;      /* fallback for the rare case where even all three
                              capped legends together exceed chart height */
    overflow-x: hidden;
    display: none;
    top: 0;
    position: relative;
    gap: 10px;
    box-sizing: border-box;
    padding: 4px 0 8px;
    align-self: flex-start;
}
/** Updated by shashank2104 on 2026-05-13 - bubble rigor pass.
 *  Each individual attr legend gets capped at ~33% of the chart height so
 *  it never dominates the column and hides peer legends. If the legend's
 *  inner <ul> has more entries than fit, the LEGEND ITSELF scrolls — its
 *  title stays pinned at top. This was a real bug: with size_by pointing
 *  at a 25-value column, the size legend alone was ~800px tall and pushed
 *  opacity/thickness off the visible strip entirely. **/
div.bubble-chart-container div.attr-legends-container .legends {
    margin: 0;
    flex: 0 0 auto;
    min-height: 0;
    max-height: calc(33% - 6px); /* 3 legends max, minus gap budget */
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
div.bubble-chart-container div.attr-legends-container .legends > ul {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/** When only one or two legends are active, allow them to take up to half/full
 *  the strip respectively. Single-legend case gets the whole strip. **/
div.bubble-chart-container div.attr-legends-container .legends:only-child {
    max-height: 100%;
}
div.bubble-chart-container div.attr-legends-container .legends:first-child:nth-last-child(2),
div.bubble-chart-container div.attr-legends-container .legends:first-child:nth-last-child(2) ~ .legends {
    max-height: calc(50% - 5px);
}
div.bubble-chart-container div.attr-legends-container .legends .legends-label {
    margin-bottom: 6px;
    margin-top: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--d3v-text-primary, #1E293B);
    letter-spacing: 0.01em;
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
/** Updated by shashank2104 on 2026-05-13 - bubble rigor pass.
 *  Split the attr-legend title into two spans so we can style the kind
 *  prefix ("Size: ", "Opacity: ", "Thickness: ", "Symbol: ") as a muted
 *  caption and the column name itself in primary text. Without this the
 *  user could not tell at a glance which dimension a swatch maps to. **/
div.bubble-chart-container div.attr-legends-container .legends .legends-label .attr-kind {
    color: var(--d3v-text-muted, #94A3B8);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
div.bubble-chart-container div.attr-legends-container .legends .legends-label .attr-col {
    color: var(--d3v-text-primary, #1E293B);
    font-weight: 600;
}
div.bubble-chart-container div.attr-legends-container .legends ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
div.bubble-chart-container div.attr-legends-container .legends ul li {
    line-height: 1.4;
    margin: 2px 0;
    padding: 2px 6px 2px 4px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s) ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
div.bubble-chart-container div.attr-legends-container .legends ul li .d3view-flex-v {
    width: 100%;
    gap: 6px;
}
div.bubble-chart-container div.attr-legends-container .legends ul li svg {
    flex: 0 0 25px;
}
div.bubble-chart-container div.attr-legends-container .legends ul li .bin {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.3;
}
/** Min-max fringe (opacity_by numerical) — cap height so a single attr-legend
 *  doesn't dominate the strip when colorBy is also numerical (the color
 *  fringe to its right is sized to the full chart height). The
 *  per-attr-legend renderer (`renderAttrLegends` in bubble.js) computes
 *  a `_legendH` that already shares the available chartHeight evenly
 *  across active attr legends. **/
div.bubble-chart-container div.attr-legends-container .legends .min-max-legends {
    margin-top: 4px;
}
/** Updated by shashank2104 on 2026-05-13 - bubble rigor pass.
 *  The previous version of this block forced `attr-legends-container`
 *  into a horizontal strip at the TOP / BOTTOM whenever `legendPosition`
 *  was top/bottom — but `legendPosition` is the TEXT-legend position
 *  control. Size / Opacity / Thickness legends are attribute legends
 *  and should ALWAYS sit on the right of the chart, alongside (and
 *  immediately left of) the numerical color fringe.
 *
 *  Forcing them to top/bottom caused them to:
 *   - share space with the text legends (cramped layout),
 *   - collide with the "Mass 1.39" min-max bar,
 *   - leave the right side of the chart awkwardly empty when a
 *     numerical fringe was also present.
 *
 *  Removing those overrides means attr-legends now use the base rules
 *  (column flow, 160px wide, glued to chart right). Chart width
 *  allocation is made unconditional in bubble.js so the chart never
 *  paints under the legend strip. **/
/*div.bubble-chart-container div.attr-legends-container .legends .min-max-legends {*/
/*    height: calc(100% - 45px);*/
/*}*/
div.bubble-chart-container div.attr-legends-container li svg circle {
    fill: steelblue;
    stroke: #333;
}
div.bubble-chart-container div.attr-legends-container li.active circle {
    opacity: 1!important;
}
div.bubble-chart-container div.attr-legends-container li {
    position: relative;
    padding-left: 5px;
    cursor: pointer;
}
div.bubble-chart-container div.attr-legends-container li:hover {
    background: #eee;
}
div.bubble-chart-container div.attr-legends-container li.active {
    font-weight: bold;
}
div.bubble-chart-container div.attr-legends-container li.active:before {
    content: "\f178";
    font-family: FontAwesome;
    color: steelblue;
    position: absolute;
    top: 4px;
    left: -2px;
}
div.bubble-chart-container svg text.quarter {
    text-anchor: middle;
    font-size: 11px;
}
div.bubble-chart-container svg text.quarter.highlighted {
    font-size: 1.2em!important;
    fill: steelblue;
}
div.bubble-chart-container svg .y.axis .tick text {
    /*text-transform: uppercase;*/
}

div.bubble-chart-container .bubble_g.highlighted > circle {
    fill-opacity: 1!important;
    stroke-width: 3!important;
}
div.bubble-chart-container .bubble_g.highlighted > image {
    filter: drop-shadow(2px 4px 6px black);
}

div.bubble-chart-container .chart-gridlines .y.axis g.tick:first-child {
    opacity: 0!important;
}
div.bubble-chart-container .chart-gridlines .x.axis g.tick:last-child {
    opacity: 0!important;
}

div.bubble-chart-container .bubble-link-details {
    width: 300px;
    background: rgba(255,255,255,0.8);
    border: 1px solid #DDD;
    position: absolute!important;
    z-index: 2;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}
div.bubble-chart-container .bubble-link-details .table-container {
    max-height: 250px;
    overflow: auto;
}
.bubble-chart-container div.chart-labels {
    pointer-events: none;
}
.bubble-chart-container div.chart-images .plot-img {
    cursor: pointer;
}
.d3view-viz .axes-images div.media-img {
    position: absolute!important;
    display: flex;
    justify-content: center;
    align-content: center;
}
.d3view-viz .axes-images div.media-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease-in;
}
.d3view-viz .axes-images div.media-img-container img {
    /*    left: 50%;*/
    /*    top: 50%;*/
    /*    position: relative;*/
    /*    transform: translate(-50%,-50%);*/
    /*}*/
}

.d3view-viz .media-img:hover .media-img-container,
.d3view-viz .media-img .media-img-container.dragging,
.d3view-viz .media-img .media-img-container.resizing {
    border: 1px solid #DDD;

}
.d3view-viz .media-img:hover .ui-resizable-handle,
.d3view-viz .media-img-container.dragging .ui-resizable-handle,
.d3view-viz .media-img-container.resizing .ui-resizable-handle {
    background: red;
}
.d3view-viz .media-img .ui-resizable-se {
    cursor: se-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    bottom: -5px;
}
.bubble-chart-container.stats-viz .chart-container,
.bubble-chart-container.stats-viz > .legends-wrapper {
    display: none!important;
}

.bubble-chart-container g.envelopesContainer .envelope path.path {
    fill-opacity: 0.4;
    stroke-opacity: 0.7;
    stroke-width: 1px;
    stroke-linejoin: round;
}

.bubble-chart-container .axis_slider circle {
    stroke: transparent;
}
.bubble-chart-container .axis_slider.hovered circle,
.bubble-chart-container .axis_slider.dragging circle {
    stroke: red;
}
.bubble-chart-container .axis_slider text {
    display: none;
}
.bubble-chart-container .axis_slider.hovered text,
.bubble-chart-container .axis_slider.dragging text {
    display: block;
}
.d3view-viz[data-num-legends="true"] .bubble-chart-container .bubble-buttons {
    right: 85px!important;
}

/* point belonging to axis hovered */
.axis.pointHovered rect {
    fill: lightyellow!important;
}
/* custom trendlines */
svg g.trendLine .custom_trendline path {
    stroke: #333;
    fill: none;
}

.media-img-dragging .axis rect.transparent-background,
.media-img-resizing .axis rect.transparent-background {
    pointer-events: none!important;
}

.li-dz {
    border: none;
}
.li-dz  > * {
    pointer-events: none;
}

.bubble-chart-container.transitionLabels .plot-txt {
    transition: top 0.1s linear, left 0.1s linear;
}
.plot-txt {
    position: absolute;
    text-align: center;
    line-height: 1.2em;
    font-size: 12px;
    /* font-family: "Calibri",-apple-system,Roboto,"DejaVu Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif; */
    /*border: 1px solid steelblue;*/
    /*border-left-width: 2px;*/
    background-color: rgba(255,255,255,1);
    /*border-radius: 4px;*/
    /*padding: 4px;*/
    /*color: #333;*/

}
.plot-txt.hasImage {
    background-color: transparent!important;
}
.outer_layer.is-draggable .plot-txt {
    cursor: move;
}
.outer_layer.is-dragging .plot-txt {
    background-color: #f5f5f5;
    animation: none!important;
}
.outer_layer.highlighted .plot-txt {
    font-weight: bold;
}
.plot-txt.flex {
    display: flex;
}
.plot-txt.is_flex.flex-h > div {
    margin: 3px;
}
.plot-txt.merged {
    background: rgba(0,0,0,0.02);
    border: 1px solid #DDD;
    padding: 5px;
    border-radius: 5px;
}
.plot-txt.merged .plot-txt {
    position: relative!important;
    left: unset!important;
    top: unset!important;
    margin-top: 4px;
}
.plot-txt.text-left {
    text-align: left;
}

/** for computing dimensions before hand **/
.plot-txt.testing {
    opacity: 0;
}

.plot-img {
    position: absolute;
}

.chart-labels.testing {
    /*pointer-events: all!important;*/
}
/*.chart-labels.testing .plot-txt {*/
/*    transform: translateX(-50%);*/
/*}*/
/*.chart-labels.testing .plot-txt[data-pos="top"] {*/
/*    transform: translate(-50%, -100%);*/
/*}*/

svg.chart-gridlines {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}
svg.chart-gridlines line.resizer {
    stroke: none;
}
svg.chart-gridlines .tick text {
    display: none!important;
}
svg.chart-gridlines line {
    shape-rendering: crispEdges;
}
svg.chart-gridlines .axis path.domain {
    stroke: none!important;
}

.gridBox rect {
    fill: transparent;
}
.chart-gridlines [data-grid="odd"] .tick:nth-child(odd) .gridBox rect {
    fill: rgba(221,221,221, 0.2);
}
.chart-gridlines [data-grid="even"] .tick:nth-child(even) .gridBox rect {
    fill: rgba(221,221,221, 0.2);
}
.a-icon {
    margin-left: 4px;
}
.ml4 {
    margin-left: 4px;
}


svg text.watermark {
    opacity: 0.6;
    pointer-events: none!important;
}

div.simlytiks span.watermark {
    word-break: break-word;
    text-align: center;
    pointer-events: none!important;
    position: absolute;
    line-height: 1em;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
div.simlytiks .watermark.vertical {
    transform: translate(-50%,-50%)rotate(-90deg)!important;
}
div.simlytiks .watermark.diagonal {
    transform: translate(-50%,-50%)rotate(-45deg)!important;
}
div.simlytiks .watermark.r-diagonal {
    transform: translate(-50%,-50%)rotate(-45deg)!important;
}


div.bubble-chart-container text.label_txt {
    font-size: 0.8em;
}
/*div.bubble-chart-container .attr-legends {*/
/*    position: absolute;*/
/*    right: 40px;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*}*/
/*div.bubble-chart-container .attr-legends > div {*/
/*    max-height: 200px;*/
/*    overflow: auto;*/
/*}*/
.img-responsive {
    max-height: 100%;
}
/* binout table */
div.d3view-binouttable table tbody tr {
    height: 50px;
}
div.d3view-binouttable table thead {
    position: sticky;
    top: 0;
    background-color: #FFF;
    z-index: 10;
}
div.d3view-binouttable table {
    table-layout: fixed;
}
div.d3view-binouttable thead tr th[data-id] {
    width: 50px;
}
div.d3view-binouttable thead tr th[data-name] {
    width: 250px;
}
div.d3view-binouttable thead tr th {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.d3view-binouttable .binout-body tbody tr td[data-id] {
    width: 50px;
}
div.d3view-binouttable .binout-body tbody tr td[data-name] {
    width: 250px;
}
div.d3view-binouttable .binout-body tbody tr td {
    width: 100px;
}
div.d3view-binouttable .inlinesparkline {
    cursor: pointer;
    flex: 1 1 auto;
}


/* d3view viz export */
.d3view-sl-export div.d3view-newton .main_container {
    overflow: visible!important;
}
.d3view-sl-export div.d3view-newton .chart_container > * {
    opacity: 0;
}
.d3view-sl-export div.d3view-newton .chart_container div.svg_container,
.d3view-sl-export div.d3view-newton .chart_container div.d3view-legends-container {
    opacity: 1!important;
}
.d3view-sl-export div.d3view-newton div.d3view-legends-container .legends-body {
    max-height: unset!important;
    overflow: hidden!important;
}
.d3view-sl-export div.vizviewContainer div.legends-body {
    overflow: hidden;
}
.d3view-sl-export div.vizviewContainer .panel-options,
.d3view-sl-export div.vizviewContainer .bubble-buttons,
.d3view-sl-export div.vizviewContainer .hbarchart .settings {
    display: none!important;
}
div.popover.fb-stat-popover .popover-content {
    width: max(20vw, 400px)!important;
}
div.popover.fb-stat-popover.num-popover .popover-content {
    height: 100px;
}
div.popover.fb-stat-popover.text-popover .popover-content {
    height: 300px;
}
.d3view-sl-export .vizviewContainer {
    background-color: #FFF;
}

svg.d3view-pedpro .rects-container text {
    font-size: 0.7em!important;
}
svg.d3view-pedpro.remove_dummies .dummy {
    opacity: 0!important;
}

/* dropdown menu center */
.dropdown-menu.dropdown-menu-center {
    margin-right: 9px;
    right: 100%;
    left: unset!important;
    transform: translateY(-50%);
    top: 50%;
}
.dropdown-menu.dropdown-menu-center:before,
.dropdown-menu.dropdown-menu-center:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.dropdown-menu.dropdown-menu-center:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    margin-left: -8px;
    right: -8px;
}
.dropdown-menu.dropdown-menu-center:before {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CCC;
    margin-left: -10px;
    right: -10px;
}
.dropdown-menu.dropdown-menu-center.dropdown-menu-right:before {
    right: unset;
    left: 0px;
}
.dropdown-menu.dropdown-menu-center.dropdown-menu-right:after {
    right: unset;
    left: 0px;
}
.dropdown-menu.dropdown-menu-center-top {
    margin-right: 9px;
    right: 100%;
    left: unset!important;
    top: 0;
}
.dropdown-menu.dropdown-menu-center-top:before,
.dropdown-menu.dropdown-menu-center-top:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: 0;
}
.dropdown-menu.dropdown-menu-center-top:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    margin-left: -8px;
    right: -8px;
    top: 2px;
}
.dropdown-menu.dropdown-menu-center-top:before {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CCC;
    margin-left: -10px;
    right: -10px;
}

.dropdown-menu.dropdown-menu-center-bottom {
    margin-right: 9px;
    right: 100%;
    left: unset!important;
    transform: translateY(calc(-100% + 10px))!important;
    top: 50%;
}
.dropdown-menu.dropdown-menu-center-bottom:before,
.dropdown-menu.dropdown-menu-center-bottom:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    bottom: 0;
}
.dropdown-menu.dropdown-menu-center-bottom:after {
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #FFF;
    margin-left: -8px;
    right: -8px;
    bottom: 2px;
}
.dropdown-menu.dropdown-menu-center-bottom:before {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #CCC;
    margin-left: -10px;
    right: -10px;
}
.gantt-tooltip {
    z-index: 3000!important;
}


.d3view-el-tour {
    background: #FFF;
    z-index: 8001;
    position: fixed;
    max-width: 500px;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-duration: 0.7s;
}
.d3view-el-tour .msg {
    padding: 25px 15px 15px;
    color: steelblue;
}
.plugins-top-arrow:before, .plugins-top-arrow:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -9px;
    border-style: solid;
}
.plugins-top-arrow:before {
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #CCC transparent;
}
.plugins-top-arrow:after {
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #FFF transparent;
}
.plugins-bottom-arrow:before, .plugins-bottom-arrow:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}
.plugins-bottom-arrow:before {
    border-width: 8px 8px 0 8px;
    border-color: #CCC transparent transparent transparent;
}
.plugins-bottom-arrow:after {
    border-width: 9px 9px 0 9px;
    border-color: #FFF transparent transparent transparent;
}

.plugin-left-arrow:before, .plugin-left-arrow:after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: -9px;
    transform: translateY(-50%);
    top: 50%;
    border-style: solid;
}
.plugin-left-arrow:before {
    border-width: 8px 8px 8px 0;
    border-color: transparent #CCC transparent transparent;
}
.plugin-left-arrow:after {
    border-width: 9px 9px 9px 0;
    border-color: transparent #FFF transparent transparent;
}
[class*="d3view-corner-box"] {
    position: relative;
}
.d3view-corner-box-br:after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: transparent transparent transparent;
    transform: rotate(-45deg);
    border-top-color: var(--d3view-corner-box-color);
}
.d3view-corner-box-tr:after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent transparent;
    transform: rotate(45deg);
    border-bottom-color: var(--d3view-corner-box-color);
}
.d3view-corner-box-tl:after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent transparent;
    transform: rotate(-45deg);
    border-bottom-color: var(--d3view-corner-box-color);
}
.d3view-corner-box-bl:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 5px;
    width: 0;
    height: 0;
    display: block;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent transparent transparent;
    transform: rotate(-45deg);
    border-right-color: var(--d3view-corner-box-color);
}

.d3view-pedpro .rect-group.selected circle, .d3view-pedpro .rect-group.selected rect {
    fill: #FFF!important;
    stroke: #AAA!important;
}
.d3view-pedpro .rect-group.multiple rect {
    stroke: #4f5359!important;
}
.d3view-pedpro .rect-group.selected text {
    fill: #428bca!important;
}
.d3view-pedpro .rect-group.highlighted circle, .d3view-pedpro .rect-group.highlighted rect {
    fill: #f5f5f5!important;
}
.d3view-pedpro .rect-group.highlighted text {
    fill: #428bca!important;
}
div.d3view-dt-tooltip.right .tooltip-arrow {
    border-right-color: #4f5359;
}
div.d3view-dt-tooltip.left .tooltip-arrow {
    border-left-color: #4f5359;
}
div.d3view-dt-tooltip.bottom .tooltip-arrow {
    border-bottom-color: #4f5359;
}
div.d3view-dt-tooltip.top .tooltip-arrow {
    border-top-color: #4f5359;
}
.mini-fa {
    font-size: 0.9em;
}
.d3view-vbar .loading-msg {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
}
.vbar-summary {
    position: absolute;
    right: 0;
    top: 0;
    background: #FFF;
    height: auto;
}
.vbar-summary .table-container {
    padding: 10px;
    border: 1px solid #DDD;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    width: 350px;
    max-height: 300px;
    margin-top: 20px;
    overflow: auto;
}
.vbar-summary .table-container th {
    word-break: break-all;
}

/** simple text in vbar **/
.d3view-viz[data-chart-type="barchart-vertical"].simple-texts > *:not(.vbar-simple-text):not(.vbar-text-viz) {
    display: none;
    pointer-events: none;
}
.d3view-viz[data-chart-type="barchart-vertical"].simple-texts .vbar-text-viz {
    flex: 1 1 auto;
}
.d3view-viz[data-chart-type="barchart-vertical"] .vbar-simple-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    overflow: auto;
    font-size: 1.4em;
}

/* NEW HEADER UI */
div.d3view-plugin-header {
    margin: 0;
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 0;
    height: 70px;
}
div.d3view-plugin-header .name-container {
    display: flex;
    align-items: center;
    margin-right: 20px;
}
div.d3view-plugin-header .a-icon {
    display: none;
}
div.d3view-plugin-header .plugin-name {
    /* color: #FFF; */
    /* margin: 0 5px; */
    text-decoration: none;
    /* font-size: 1.4em; */
    border-bottom: none;
    /*max-width: 250px;*/
    /*display: inline-block;*/
    /* padding: 6px 0; */
    /* max-width: 100%; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 1.3em;
    color: inherit;
}
@media (max-width: 1140px) {
    div.d3view-plugin-header .plugin-name {
        max-width: 500px!important;
    }
}
div.d3view-plugin-header .dropdowns-list .dropdown-menu li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.d3view-plugin-header .dropdown-menu li > a:not([data-inline-doc]) {
    flex: 1 1 auto;
}
div.d3view-plugin-header li.checked:after {
    content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    left: 6px;
    top: 0;
    color: #428bca;
    top: 50%;
    color: #202134;
    transform: translateY(-50%);
}
div.d3view-plugin-header .dropdowns-list li.dropdown {
    display: inline-block;
    padding: 0;
}
div.d3view-plugin-header .dropdowns-list li.dropdown > a:not(.btn) {
    padding: 8px 10px;
    color: black;
    text-decoration: none;
}
div.d3view-plugin-header li.dropdown:not(.nostyles):hover, div.d3view-plugin-header li.dropdown:not(.nostyles).open,
div.d3view-plugin-header li.dropdown:not(.nostyles).shown {
    background: #f1f3f4;
    border-radius: 4px;
}
div.d3view-plugin-header li.dropdown:hover > a:not(.btn), div.d3view-plugin-header li.dropdown.open > a:not(.btn),
div.d3view-plugin-header li.dropdown.shown > a:not(.btn) {
    color: #333!important;
}
div.d3view-plugin-header .wf-dropdowns .dropdown-menu > li > a:hover {
    background-image: none!important;
    background: #f1f3f4;
    color: #333!important;
}



.pivot-table-container .pivot-label-header h2 {
    width: 100%;
}

.pivot-table-container .toggle {
    cursor: pointer;
    font-size: 1em;
    color: dimgray;
    /*margin-right: 4px;*/
    padding: 5px;
}
.pivot-table-container .toggle:hover {
    color: #CCC;
}
.pivot-table-container .pivot-row.nested {
    display: flex;
}
.pivot-table-container .pivot-row.nested .pivot-name-container {
    padding-left: 10px;
}
.pivot-table-container .pivot-total {
    flex: 1 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pivot-table-container .pivot-name-container {
    /*display: flex;*/
    align-items: center;
    min-width: 100px;
    width: 25%;
    display: flex;
    padding-left: 10px;
    min-height: 35px;
    /*flex: 0 0 25%;*/
    /*word-break: break-all;*/
}
.pivot-table-container .pivot-name-container b {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: uppercase;
}
.pivot-table-container .pivot-columns {
    display: flex;
    flex: 0 0 auto;
}
.pivot-table-container .pivot-header.pivot-label-header > div {
    display: block;
}
.pivot-table-container .pivot-label-header span.col-label {
    text-transform: capitalize;
}
.pivot-table-container .pivot-label-header .pivot-columns {
    text-align: center;
}
.pivot-table-container .pivot-col b {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pivot-table-container .pivot-col [data-link] {
    color: #428bca;
    cursor: pointer;
}
.pivot-table-container .pivot-row-contents {
    display: flex;
    /*margin-bottom: 8px;*/
    /*justify-content: space-between;*/
}
.pivot-table-container .root > .pivot-row {
    border-bottom: 1px solid #DDD;
    height: 100px;
}
.pivot-table-container .root > .pivot-row > .pivot-row-contents .pivot-total {
    font-weight: bold;
}
.pivot-table-container ul.nested .pivot-name-container {
    padding-left: 10px;
}
.pivot-table-container .pivot-col,
.pivot-table-container .pivot-val {
    /*margin: 0 10px;*/
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pivot-table-container .pivot-body .pivot-columns.hasColors .pivot-col {
    border-right: 1px solid #fff;
}
.pivot-table-container .pivot-header {
    display: flex;
    /*justify-content: space-between;*/
}
/** selection in pivot table **/
.pivot-table-container .root > li.pivot-row.ui-selecting,
.pivot-table-container .root > li.pivot-row.ui-selected {
    background-color: var(--dt-selection-color)!important;
    color: #000!important;
}

.d3view-viz-tooltip {
    background: #FFF;
    z-index: 8001;
    padding: 8px;
    position: fixed;
    pointer-events: none;
    max-width: 300px;
    border-radius: 3px;
    box-shadow: var(--plugin-box-shadow);
    opacity: 0;
}
.d3view-viz-tooltip.in {
    opacity: 1!important;
}


/* bootstrap toggle switch */
.d3view-toggle-switch {
    position: relative;
    display: block;
    line-height: 1.5em;
    padding-left: 1.5rem;
}
.d3view-toggle-switch input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.d3view-toggle-switch label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}
.d3view-toggle-switch label::before {
    position: absolute;
    top: .25rem;
    display: block;
    height: 1rem;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: .5rem;
}
.d3view-toggle-switch label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
    top: calc(.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: .5rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
}



/* viz export on d3VIEW */
.d3view-exporting {
    cursor: progress;
}
.d3view-exporting .bubble-chart-container div.legends-body,
.d3view-exporting .bubble-chart-container div.legends-wrapper {
    max-height: unset!important;
    /*overflow: hidden!important;*/
    overflow: visible!important;
}
/** Added by shashank2104 on 2026-05-28 - premium reporting pass.
 *  Attr-legend cut-off in PPT export only.
 *
 *  In live Simlytiks the bubble chart container is full-panel-wide
 *  (~600px+), so the base rule's `max-width: 25%` lands at ~150px — wide
 *  enough for a 25px symbol swatch + "Baseline Rows" label + row-count
 *  badge. In PPT export the bubble renders inside a much smaller hidden
 *  container (sized for slide rendering), and after viz.defs.js
 *  `ApplyDimensions` reserves the numerical color fringe via
 *  `calc(100% - fringeWidth)`, the effective parent of the attr-legends
 *  strip can drop to ~280px. 25% of that is ~70px — far too narrow for
 *  even the symbol + label, and `overflow-x: hidden` then chops the
 *  right edge so the row-count badge (and even the label tail) is gone.
 *
 *  Scope the fix to export so live behavior is unchanged:
 *   - Floor the strip at 180px so SVG + wrapping label + badge all fit.
 *   - Raise the cap to 40% to give breathing room on mid-sized exports.
 *   - Make the label flex-shrink with `min-width: 0` so when space is
 *     tight the label wraps instead of pushing the badge past the right
 *     edge. The row-count badge stays at its natural width
 *     (`flex: 0 0 auto`) so it is never the thing that gets clipped.
 *   - bubble.js (~line 1670) already reserves the measured legend
 *     outerWidth from the chart drawing area, so the chart shrinks
 *     gracefully when the strip widens — no extra coordination needed. **/
.d3view-exporting div.bubble-chart-container div.attr-legends-container {
    min-width: 180px;
    max-width: 40%;
}
.d3view-exporting div.bubble-chart-container div.attr-legends-container .legends ul li .d3view-flex-v > span:not(.badge) {
    min-width: 0;
    flex: 1 1 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.d3view-exporting div.bubble-chart-container div.attr-legends-container .legends ul li .d3view-flex-v > span.badge {
    flex: 0 0 auto;
}
.d3view-exporting .panel-options,
.d3view-exporting .bubble-buttons,
.d3view-exporting .controlBtnGroups,
.d3view-exporting .hbarchart .settings,
.d3view-global-exporting .hbarchart .settings,
.d3view-exporting .gallery_container .image-options,
.d3view-exporting .kv_header,
.d3view-exporting .kv_dset_container .sort_data,
.d3view-exporting .search_container,
.d3view-exporting div.simlytiks div.viewContent:not(.enabled):hover .floating-btn,
.d3view-exporting .ui-resizable-handle,
.d3view-exporting .shapes .shape circle.drag,
.d3view-exporting .d3view-color-blocks .settings-right .chart-type,
.d3view-exporting .d3view-color-blocks .settings-right .threshold_container,
.d3view-exporting .d3view-color-blocks .settings-right .controls > .btn-group,
.d3view-exporting .d3view-color-blocks .settings-right .download_anim,
.d3view-exporting .drill_up,
.d3view-exporting .drill_down,
.d3view-exporting .d3view-newton .datum-values-container .view_type,
.d3view-exporting .lastsearchkeywords,
.d3view-exporting .ace_print-margin,
.d3view-exporting .ace_cursor,
.d3view-exporting .ace_active-line,
.d3view-exporting div.simlytiks .sl-page-tabs,
.d3view-global-exporting div.simlytiks .sl-page-tabs,
/* R2026-34 - the per-widget ML options sidebars (the left "choose options" rail in the 3D surface,
   partial-dependence, and Input-vs-Target widgets, etc.) capture as a solid black/empty block in the
   exported widget images. Hide them during export so only the chart is captured; they are flex children,
   so the chart expands to fill and no empty gutter is left. */
.d3view-exporting .ml-inv-3d-sidebar,
.d3view-exporting .ml-inv-pdp-sidebar,
.d3view-exporting .ml-inv-group-sidebar,
.d3view-exporting .ml-inv-pill-sidebar {
    display: none!important;
}

/* peacock */
.d3view-exporting .peacock-viewer .peacock-top-nav-panel,
.d3view-exporting .peacock-viewer .zoom-buttons-div,
.d3view-exporting .peacock-viewer .notification-span {
    display: none!important;
}

.d3view-exporting div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .viewContent,
.d3view-global-exporting div.simlytiks div.sl-main-window div.pages-container[data-view='modern'] .viewContent,
.d3view-exporting div.simlytiks div.sl-main-window div.pages-container .viewContent,
.d3view-global-exporting div.simlytiks div.sl-main-window div.pages-container .viewContent {
    border: none!important;
}


.d3view-exporting .kv_dset_table_container {
    margin: 0!important;
    overflow: hidden!important;
}
.d3view-exporting div.d3view-newton .legends-wrapper .legends-body .legends-list {
    overflow-x: hidden;
}

/** Updated by shashank2104 on 2026-05-20 - DVFIV-2058 - use display:none so the chrome buttons don't leave a colored placeholder square in PPT/PDF exports **/
.d3view-exporting .newton-mode-settings, .d3view-global-exporting .newton-mode-settings,
.d3view-exporting .newton-inbuilt-settings, .d3view-global-exporting .newton-inbuilt-settings,
.d3view-exporting .newton-interaction-settings, .d3view-global-exporting .newton-interaction-settings  {
    display: none !important;
}

/** Added by shashank2104 on 2026-05-29 - R0-3672 - hide dataviewer Download/Settings + chart-types header bar from PPT/PDF exports so it doesn't render in the rasterized image **/
.d3view-exporting .toggle-text-view .dv-options-right,
.d3view-global-exporting .toggle-text-view .dv-options-right,
.d3view-exporting .toggle-text-view .dv-options-center,
.d3view-global-exporting .toggle-text-view .dv-options-center,
.d3view-exporting .toggle-text-view .dv-files-dd,
.d3view-global-exporting .toggle-text-view .dv-files-dd,
.d3view-exporting .toggle-text-view .dv-settings-dd,
.d3view-global-exporting .toggle-text-view .dv-settings-dd,
.d3view-exporting .toggle-text-view button.download,
.d3view-global-exporting .toggle-text-view button.download {
    display: none !important;
}
/* If the entire right cluster is empty after hiding chrome, collapse the header bar's padding so it doesn't leave a tall blank strip above the text. */
.d3view-exporting .toggle-text-view,
.d3view-global-exporting .toggle-text-view {
    padding: 0 !important;
    min-height: 0 !important;
}
.d3view-exporting .d3view-legends-container.scroll_enabled .scroll_button,
.d3view--global-exporting .d3view-legends-container.scroll_enabled .scroll_button {
    display: none!important;
}
.d3view-exporting div.d3view-legends-container div.legends-body,
.d3view-exporting div.d3view-legends-container div.legends-body .legends-list {
    overflow-x: hidden!important;
    overflow-y: hidden!important;
    max-height: unset;
}

.d3view-global-exporting .workflow .top-settings-container,
.d3view-global-exporting .workflow .zoom {
    display: none;
}

/** Added by shashank2104 on 2026-05-28 - R0-3672 - Certificate export side-by-side
 *  viz row stacking. Cert templates frequently use a TinyMCE <table> with two <td>s
 *  each containing a .cert-viz-embed to lay vizzes side-by-side. At PDF page width
 *  (~770px usable) two textviewer cards or two vizzes overflow. The cert executor
 *  ($pdfContainer build step in wfExecutor.js handleCertificationBuilder) walks
 *  every <table> in the resolved HTML and tags those containing a .cert-viz-embed
 *  with class `cert-viz-row-table`. This rule stacks their rows/cells vertically
 *  in export mode only — live builder preview keeps the authored side-by-side
 *  layout because .d3view-exporting / .d3view-global-exporting is only on body
 *  during capturePageImages / generatePdf. **/
.d3view-exporting .cert-preview-content table.cert-viz-row-table,
.d3view-global-exporting .cert-preview-content table.cert-viz-row-table {
    display: block !important;
    width: 100% !important;
}
.d3view-exporting .cert-preview-content table.cert-viz-row-table > tbody,
.d3view-global-exporting .cert-preview-content table.cert-viz-row-table > tbody {
    display: block !important;
    width: 100% !important;
}
.d3view-exporting .cert-preview-content table.cert-viz-row-table > tbody > tr,
.d3view-global-exporting .cert-preview-content table.cert-viz-row-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.d3view-exporting .cert-preview-content table.cert-viz-row-table > tbody > tr > td,
.d3view-global-exporting .cert-preview-content table.cert-viz-row-table > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    height: auto !important;
}

/** Added by shashank2104 on 2026-05-28 - R0-3672 - Viz placeholder bounds.
 *  cert-preview-page is sized to the paper width (e.g. 816px letter) minus 1" margins
 *  on each side → ~624px usable content width. Viz placeholders (.cert-viz-preview-ph)
 *  and TinyMCE embed wrappers (.cert-viz-embed) had no inherent width clamp, so
 *  Newton / Simlytiks visualizers could paint SVGs wider than the parent (curveplot
 *  rendered at the unscoped chart_container natural width). domToImage captures the
 *  rendered SVG bbox regardless of parent overflow, so the right-edge bleed showed
 *  up in the PDF even though the live page hides it via overflow:auto.
 *  Force the placeholder to fill exactly the content width with hidden overflow so
 *  the captured canvas only contains what fits on the page. Scoped to
 *  .cert-preview-content so the live builder also gets WYSIWYG behavior. **/
.cert-preview-content .cert-viz-preview-ph,
.cert-preview-content .cert-viz-embed {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/** Added by shashank2104 on 2026-05-28 - R0-3672 - column_summary stat-card layout.
 *  visualizations.css:291 sets each `.col-stats > .card` to `width:25%; margin:0 10px;`
 *  → total = 4×25% + 8×10px = 100% + 80px, overflowing the parent by ~80px. The 4th
 *  card (Standard Deviation) gets clipped on the right edge of the cert page.
 *  Use calc(25% - 20px) so each card includes its own margins inside its 25% slot.
 *  Scoped to .cert-preview-content so non-cert column_summary instances keep their
 *  existing (overflow-hidden-clipped) behavior. **/
.cert-preview-content .d3view-viz[data-chart-type="column_summary"] .col-stats > .card {
    width: calc(25% - 20px) !important;
    margin: 0 10px !important;
    box-sizing: border-box !important;
}

.d3view-exporting .d3Panel {
    overflow: hidden!important;
}
/* summary table export */
.d3view-exporting .ht-val .curve_col {
    display: none;
}

.d3view-exporting .response-box .curve_col {
    display: none;
}

.d3view-exporting .main_container {
    overflow: visible!important;
}
.d3view-exporting .chart_container > * {
    /*opacity: 0;*/
}
.d3view-exporting div.svg_container,
.d3view-exporting div.d3view-legends-container {
    opacity: 1!important;
}
.d3view-exporting .bs_datatable_wrapper div.settings,
/*.d3view-exporting .bs_datatable_wrapper .checkbox_selection,*/
.d3view-exporting .bs_datatable_wrapper .dt-pagination {
    display: none!important;
}
.d3view-exporting .bs_datatable_wrapper .dt-tables {
    overflow: hidden!important
}

/* A1/A2 export polish (inline dynamic-options hide, flipTable-wide layout) was moved
 * to plugins/simlytiks/simlytiks-report.css on 2026-05-22 — single source of truth
 * for export-time CSS keyed off <body data-reporter-export-theme="…">. */

/* A3 -- ranking_table legend chips: compact single-line chips with ellipsis. Applies
   to live UI (NOT scoped under .d3view-exporting) so the on-screen overlap is
   also fixed -- the title= attribute on each chip (set in
   #d3view-ranking-legends-tpl) lets users hover for the full name. */
.d3view-ranking div.legends {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    row-gap: 6px;
}
.d3view-ranking div.legends .legend-item {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    max-width: 180px;
    margin-right: 0 !important;
    white-space: nowrap;
    overflow: hidden;
}
.d3view-ranking div.legends .legend-item > svg {
    flex: 0 0 30px;
}
.d3view-ranking div.legends .legend-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
}
.d3view-exporting .ht_table {
    overflow: hidden!important;
}
.d3view-exporting div.pedpro-container .settings {
    display: none!important;
}
/** Added by shashank2104 on 2026-05-26 - DW-2977 - Hide IIHS Add Points / Settings toolbar during export **/
.d3view-exporting .iihs-container .settings-container {
    display: none!important;
}
.d3view-exporting div.simlytiks:not(.hasFixedContainer) div.viewContent:not(.enabled):not(.profile-viz):hover .floating-btn {
    display: none!important;
}
/** for responses tab on sim page **/
.d3view-exporting .response-container.responseItem .d3view-newton .newton-simple-settings-header {
    display: none;
}
.d3view-exporting .d3view-textviz {
    padding: 0;
}
.d3view-exporting .d3view-textviz .ace_editor {
    background-color: transparent!important;
}
.d3view-exporting .d3view-textviz .ace_gutter {
    display: none;
}
.d3view-exporting .d3view-textviz .ace_scroller {
    left: 0!important;
}
.d3view-exporting .d3view-textviz .ace_scroller .ace_content {
    overflow: hidden;
}
.d3view-exporting .d3view-textviz .scrollToBottom,
.d3view-exporting .d3view-textviz .scrollToTop,
.d3view-exporting .d3view-textviz .ace_scrollbar {
    display: none;
}
.d3view-exporting .d3view-newton .grouped_charts[data-orientation="grid"] {
    overflow-x: hidden!important;
}


div.simlytiks g.is_overlapping text, div.simlytiks g.is_overlapping image {
    opacity: 0;
}
div.simlytiks g.tick text.rotated {
    transform: rotate(-55deg);
    text-anchor: end!important;
}
div.simlytiks g.axis[data-position="top"] .tick text.rotated {
    transform-origin: -20px -50px;
}
div.simlytiks .tick.greyed_out > text {
    transition: fill 0.5s ease-in;
}
div.simlytiks .tick.greyed_out > image {
    transition: opacity 0.5s ease-in;
    opacity: 0.3;
}
div.simlytiks .tick.greyed_out {
    fill: lightgray;
}

.tick .tick-stats {
    /*display: none;*/
    pointer-events: none;
    color: dimgrey;
    cursor: pointer;
}
.tick .tick-stats:hover, .tick.open .tick-stats {
    fill: #428bca;
}
.x.axis:hover .tick-stats, .tick.open .tick-stats, .tick .tick-stats:hover {
    display: block;
    pointer-events: all;
}

.lead-sm {
    font-size: 17px!important;
}
.lead-xs {
    font-size: 15px!important;
}
.lead-2x {
    font-size: 30px!important;
}
.lead-xxs {
    font-size: 1em!important;
}
.lead-bold {
    font-weight: bold;
}
.lead-bold-light {
    font-weight: 500;
}
.lead-m0 {
    margin-bottom: 0;
}

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.disabled * {
    pointer-events: none!important;
}
.pl-flex {
    display: flex;
}
.pl-flex-wrap {
    flex-wrap: wrap;
}
.d3view-flex-v, .d3view-flex-h {
    display: flex;
    align-items: center;
}
.flex-space-out {
    justify-content: space-between;
}
.flex-h {
    justify-content: center;
}
.flex-end {
    justify-content: flex-end;
}
.flex-l {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    margin-right: 8px;
}
span.flex-right.count {
    margin: 0 8px;
}
.flex-l.flex-0 {
    flex: 0 0 auto;
}

.pl-flex-vertical, .pl-flex-v {
    display: flex;
    flex-direction: column;
}
.pl-flex-vertical .flex-item {
    flex: 1 1 auto;
}
.pl-flex-vertical .flex-item.flex-0 {
    flex: 0 0 auto;
}

.pl-v-divider {
    color: #AAA;
}

.sc-uniq-values {
    height: 100%;
    overflow: auto;
}
.sc-uniq-values[data-design="modern"] {
    display: flex;
}
.sc-uniq-values[data-design="modern"] div[data-key] {
    display: block;
    margin-right: 8px;
}
.sc-uniq-values[data-design="modern"] .see_more {
    margin-top: 2px;
    width: 100px;
}
.sc-uniq-values[data-design="modern"] .uniq-val-cont {
    display: flex;
}
.sc-uniq-values[data-design="modern"] div[data-key] .label {
    padding: .2em .6em .2em!important;
    font-size: 90%;
}
.sc-uniq-values[data-design="modern2"] [data-key] {
    background: #f5f5f5!important;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;

}
.sc-uniq-values.hasPagination .uniq-val-cont {
    max-height: calc(100% - 50px);
    overflow: auto;
}
.sc-uniq-values.hasPagination .dt-pages {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}

.sc-uniq-values [data-key].ui-selecting, .sc-uniq-values [data-key].ui-selected {
    background: #d3f4ff73;
}
.sc-uniq-values.is_selectable [data-key] {
    cursor: pointer;
}
.sc-uniq-values [data-key].greyed_out {
    color: dimgrey;
}
.sc-uniq-values [data-key] {
    /*cursor: pointer;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px;
}
.sc-uniq-values [data-key].lg {
    font-size: 1.2em;
}
.sc-uniq-values.is_selectable [data-key]:hover {
    background-color: #ddd;
}

/**
Animations
 */
.jiggle {
    animation-name: keyframes2;
    animation-iteration-count: infinite;
    animation-delay: -.5s;
    animation-duration: .3s;
}

@keyframes keyframes2 {

    0% {
        transform: rotate(5deg);
        animation-timing-function: ease-in;
    }
    50% {
        transform: rotate(-5deg);
        animation-timing-function: ease-out;
    }

}

@-webkit-keyframes flash_override {
    0%,100%,50% {
        opacity: 1
    }

    25%,75% {
        opacity: 0.3
    }
}

.d3view-info {
    background-color: #009CFA;
}


/* overlay view */
div.image-positioner .settings-left {
    /*display: flex;*/
    align-items: center;
}
div.image-positioner[data-mode="overlay"] {
    position: relative;
    overflow: hidden;
}
div.image-positioner[data-mode="overlay"] .image_overlay {
    margin-top: 10px;
    position: relative;
}
div.image-positioner[data-mode="overlay"] .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    display: none;
}
div.image-positioner[data-mode="overlay"] div.canvas-containers canvas {
    /*background-color: #FFF;*/
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #DDD;
}
div.image-positioner[data-mode="overlay"] .overlay_settings {
    /*position: absolute!important;*/
    /*width: 250px;*/
    /*min-width: 25%;*/
    /*max-width: 30%;*/
    /*min-height: 100px;*/
}
div.image-positioner[data-mode="overlay"] .overlay_settings > .panel {
    width: 100%;
    height: 100%;
}
div.image-positioner[data-mode="overlay"] .panel-heading {
    cursor: move;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body {
    padding: 10px!important;
    /*max-height: 200px;*/
}
div.image-positioner[data-mode="overlay"] .overlay_settings.minimized {
    bottom: 0!important;
    top: inherit!important;
    height: 30px!important;
    right: 0!important;
    left: inherit!important;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette.minimized {
    bottom: 0!important;
    top: inherit!important;
    left: 0!important;
    height: 30px!important;
}
div.image-positioner[data-mode="overlay"] .minimized div.panel-body {
    display: none;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul {
    border: none;
    box-shadow: none;
    margin-bottom: 1px;
    overflow: auto;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.row-item {
    border: none;
    padding: 6px 0;
    cursor: move;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.row-item.invalid {
    opacity: 0.4;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.row-item.invalid > * {
    pointer-events: none;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.row-item > div > div {
    flex: 1 1 auto;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.list-group-item:not(.invalid):hover {
    background-color: #f5f5f5;
}
div.image-positioner[data-mode="overlay"] .overlay_settings .panel-body ul li.list-group-item .row-color {
    cursor: pointer;
    width: 12px;
    height: 12px;
    border: 1px solid #DDD;
}
div.image-positioner[data-mode="overlay"] .sortable-handle {
    opacity: 0;
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 12px;
}
div.image-positioner[data-mode="overlay"] li:hover .sortable-handle {
    opacity: 1!important;
}
div.image-positioner[data-mode="overlay"] .reset_color:hover {
    color: red;
}
div.image-positioner[data-mode="overlay"] .image-colors {
    position: absolute;
    top: 0px;
    right: 0;
    cursor: pointer;
}
div.image-positioner[data-mode="overlay"] .ui-slider.ui-widget-content {
    /*width: 50px;*/
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette {
    position: absolute!important;
    bottom: 0;
    left: 50%;
    width: 200px;
    display: none;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette .panel-body {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 15px!important;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette .panel-body button.canvas-colors {
    margin: 3px;
    margin-bottom: 0;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette .palette-color {
    width: 25px;
    height: 25px;
    margin: 2px;
    display: inline-block;
    position: relative;
    border: 1px solid #4f5359;
    cursor: pointer;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette .palette-color.dominant:after {
    content: "\f063";
    font-family: FontAwesome;
    position: absolute;
    top: -13px;
    left: 7px;
    color: red;
}
div.image-positioner[data-mode="overlay"] .overlay-color-palette .palette-color.opaque {
    opacity: 0.2;
}

div.image-positioner[data-mode="overlay"] .settings-left {
    cursor: not-allowed;
}
div.image-positioner[data-mode="overlay"] .settings-left button {
    opacity: 0.5;
    pointer-events: none;
}

/* analyzer STARCCM */
div.starccm_spectrum_analyzer > div.chart-container.active {
    display: flex;
    flex-wrap: wrap;
}
div.starccm_spectrum_analyzer > div.chart-container {
    display: none;
}

.slider.slider-horizontal {
    width: 100%!important;
}

/* brush highlighting */
svg.isHighlighting .bubble_g > * {
    pointer-events: none!important;
}
svg g.highlight_brushes rect.background {
    /*stroke: rgb(170, 170, 170);*/
    visibility: visible!important;
    fill: none;
}

/* full width dropzone */
div.dz-full {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    background-color: #d3f4ff73;
    border: 2px solid #DDD;
    transition: opacity 0.15s ease-in;
}
div.dz-full.dz-drag-hover {
    opacity: 1!important;
    z-index: 2;
}
div.dz-full.dz-full-message {
    position: absolute;
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
}
div.dz-full.dz-drag-hover .dz-full-message {
    display: block!important;
}

.carousel-indicators.inverted li {
    background-color: #999;
    background-color: rgba(70, 70, 70, 0.25);
}

.carousel-indicators.inverted .active {
    background-color: #444;
}


/* Date and datetime inputs */

input[type="datetime-local"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="datetime-local"]:after {
    content: "\f073";
    color: #555;
    padding: 0 5px;
    font-family: FontAwesome;

    position: absolute;
    right: 0;
    top: 0;
}

/* change color of symbol on hover */
input[type="datetime-local"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="datetime-local"]::-webkit-inner-spin-button {
    z-index: 1;
}

/* adjust clear button */
input[type="datetime-local"]::-webkit-clear-button {
    z-index: 1;
}

input[type="date"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    content: "\f073";
    color: #555;
    padding: 0 5px;
    font-family: FontAwesome;
    position: absolute;
    right: 0;
    top: 0;
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

/* adjust clear button */
input[type="date"]::-webkit-clear-button {
    z-index: 1;
}


input.pl-checkbox[type="checkbox"] {
    position: relative;
    appearance: none;
    width: 50px;
    height: 25px!important;
    /** Added by shashank2104 on 06/25/2026 - R0-3334 - keep the toggle pill from being compressed inside flex rows (e.g. Modern-view Enable Editing) **/
    min-width: 50px;
    flex-shrink: 0;
    background: #eee;
    border-radius: 50px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.4s;
    text-decoration: none;
    margin-left: 5px;
}

input.pl-checkbox[type="checkbox"][disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}
input.pl-checkbox:checked[type="checkbox"] {
    background: #7da6ff;
}

input.pl-checkbox[type="checkbox"]::after {
    position: absolute;
    content: "";
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    transform: scale(1.1);
    transition: 0.4s;
}

input.pl-checkbox:checked[type="checkbox"]::after {
    left: 50%;
}
input.pl-checkbox[type="checkbox"]:focus {
    outline: 0;
}
input.pl-checkbox[type="checkbox"].small {
    width: 30px;
    height: 15px!important;
    /** Added by shashank2104 on 06/25/2026 - R0-3334 - small variant also held at min width in flex rows **/
    min-width: 30px;
    margin: 0;
}
input.pl-checkbox[type="checkbox"].small::after {
    width: 15px;
    height: 15px;
}

/*.d3view-eb .eb-container #save, .d3view-eb .eb-container #cancel {*/
/*    display: none;*/
/*}*/

/* Canvas Paintboard */
.canvas-paintboard.dragging {
    cursor: grab!important;
}
.canvas-paintboard.mouseover {
    cursor: pointer;
}
.canvas-paintboard .pb-text {
    border: 1px solid transparent;
    cursor: grab;
    width: auto;
    text-align: center;
    height: auto!important;
}
.canvas-paintboard .pb-text .editor {
    word-break: break-word;
    padding: 2px 4px;
}
.canvas-paintboard .pb-text:hover, .canvas-paintboard .pb-text.dragging,
.canvas-paintboard .pb-text.ui-resizable-resizing, .canvas-paintboard .pb-text.clicked {
    border-color: #DDD;
}
.canvas-paintboard .pb-text.clicked:after, .canvas-paintboard .pb-text.clicked:before {
    content: '\f111';
    font-family: 'FontAwesome';
    color: red;
    position: absolute;
    right: -6px;
    top: 50%;
    font-style: normal;
    font-size: 12px;
    font-weight: normal;
    transform: translateY(-50%);
}
.canvas-paintboard .pb-text.clicked:before {
    left: -6px;
    right: unset;
}




.paint-board {
    width: 100%;
    height: 100%;
    position: relative;
}

.paint-board .paint-board-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.paint-board-wrapper .paint-board-nav {
    height: 70px;
    background-color: rgb(255 251 251);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

.paint-board-wrapper .paint-board-nav:hover {
    cursor: pointer;
}

.paint-board-wrapper .paint-board-body {
    height: calc(100% - 72px);
    width: 100%;
    position: relative;
    background-color: transparent;
}

.paint-board-wrapper .nav-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.paint-board-wrapper ul.right-nav-container {
    width: auto;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0px;
}

.paint-board-wrapper ul.right-nav-container>li {
    margin: 0px 5px;
}

.paint-board-wrapper a.pb-btn {
    display: flex;
    flex-direction: column;
}


.paint-board-wrapper .font-size-21 {
    font-size: 21px;
}

.paint-board-wrapper .font-size-10 {
    font-size: 10px;
}

.paint-board-wrapper ul.left-nav-container {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0px;
}

.paint-board-wrapper ul.left-nav-container>li {
    margin: 0px 10px;
}

.paint-board-wrapper .viz-hidden {
    visibility: hidden;
}

.paint-board ul>li>a i,
.paint-board ul>li>a span,
.paint-board ul>li>a label {
    pointer-events: none;
}

.paint-board ul.paint-settings-dropdown>li>a {
    background-color: #fff;
    color: #333;
}

.paint-board ul.paint-settings-dropdown>li>a:hover {
    background-color: whitesmoke;
    background-image: none;
    color: #333 !important;
}

.paint-board-wrapper .show-pb-nav {
    animation: showPbNav 0.3s;
    display: block !important;
}

@keyframes showPbNav {
    from {
        height: 0px
    }

    to {
        height: 70px
    }
}

.paint-board-wrapper .hide-pb-nav {
    animation: hidePbNav 0.3s;
}

@keyframes hidePbNav {
    from {
        height: 70px;
    }

    to {
        height: 0px;
        display: none;
    }
}

.paint-board .shapes-dropdown,
.paint-board .paint-settings-dropdown {
    max-width: 275px !important;
    min-height: 100px !important;
}

.paint-board .pencil-drawing-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
}

.paint-board .pencil-drawing-canvas:hover {
    cursor: grabbing;
}

.paint-board .dz-clickable {
    cursor: n-resize !important;
}

.paint-board .ui-draggable.ui-wrapper {
    overflow: visible !important;
}

.paint-board .ui-resizable-n,
.paint-board .ui-resizable-s {
    height: 3px;
    background-color: #333;
}

.paint-board .ui-resizable-e,
.paint-board .ui-resizable-w {
    width: 3px;
    background-color: #333;
}

.paint-board .ui-resizable-sw,
.paint-board .ui-resizable-ne,
.paint-board .ui-resizable-nw {
    background-color: #333 !important;
}

.paint-board .ui-resizable-se {
    background-image: url('/images/arrow-right-solid.svg');
    background-repeat: no-repeat;
    background-position: unset;
    transform: rotate(45deg);
    right: -2px;
    bottom: -2px;
}

.paint-board .pb-icon {
    font-size: 21px;
    pointer-events: none;
    margin-top: 5px;
}

.paint-board .pb-label {
    margin-top: -5px;
}

.paint-board span.content {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    line-height: 1;
}

.paint-board .pb-group {
    width: 120px;
    padding: 0px 10px;
    margin: 0px;
}

.paint-board .btn-label {
    padding: 2px 5px;
    border-radius: 4px;
    margin: 0px;
}

.paint-board .btn-label:hover {
    background-color: lightgray;
    cursor: pointer;
}

.paint-board .dropdown.open .btn-label {
    background-color: lightgray;
}

.paint-board .pb-nav-icon {
    margin: 0px 2px !important;
    padding: 8px;
    border-radius: 4px;
}

.paint-board .pb-nav-icon.pb-selected {
    background-color: steelblue;
}

.paint-board .pb-nav-icon.pb-selected>a {
    color: #fff;
}

.paint-board li.pb-selected>a {
    background-color: steelblue;
    color: #fff;
}

.paint-board .paint-board-item:hover {
    outline: 1px solid rgb(0, 0, 0);
}

.paint-board .ui-draggable-dragging {
    z-index: 100001;
}

.paint-board .paint-board-item.move-item-back {
    z-index: -1 !important;
}

.paint-board .grid-canvas {
    z-index: -2 !important;
}

.paint-board .paint-board-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
}

.paint-board .toggle-dimension-element,
.paint-board .toggle-dimension-graph,
.paint-board .toggle-grid-view {
    font-size: 35px;
}

.paint-board .peacock-renderer {
    width: 100%;
    height: 100%;
}

.paint-board a[data-type="shape"] img {
    pointer-events: none;
}

.paint-board .pb-rc-label {
    width: 65px;
    word-break: break-word;
    text-align: center;
    margin: 0px;
}

.paint-board i.pb-shape-icon {
    font-weight: bolder;
    font-size: 1.2em;
}

.paint-board .pb-annotation {
    position: absolute;
    border: 1px solid steelblue;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    text-align: center;
    background-color: rgb(211, 244, 255);
}

.paint-board .pb-annotation * {
    pointer-events: none;
}



.arc-diagram {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.sankeyplot {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    position: relative;
}
.sankeyplot .chart {
    width: 100%;
    height: 100%;
    padding : 15px 15px;
}

.chart-tooltip {
    display : block;
    position: fixed;
    width: auto;
    max-width: 800px;
    height: auto;
    padding : 10px 15px;
    color: grey;
    border-radius: 6px;
    border: 1.5px solid lightgray;
    background-color: #eee;
    z-index: 100000;
}

.viz-timeline svg .nodes rect {
    fill: gray!important;
    opacity: 0.5;
}
.viz-timeline svg rect.extent {
    fill-opacity: 0.5!important;
}
/*.viz-timeline svg .nodes text {*/
/*    font-size: 7px;*/
/*    display: none;*/
/*}*/
.viz-timeline svg path.domain {
    stroke: none;
}

.simple-table {
    overflow: auto;
    height: 100%;
    font-size: 1.2em;
}
.simple-table table tr {
    height: 80px;
}

/* ml classifier */
/*div.dataclassifier .learn-filter {*/
/*    flex: 1 1 auto;*/
/*    margin: 0 20px;*/
/*}*/
/*div.dataclassifier .learn-filter:first-child {*/
/*    margin-left: 10px;*/
/*}*/
/*div.dataclassifier .learn-filter:last-child {*/
/*    margin-right: 10px;*/
/*}*/
div.dataclassifier .category {
    font-weight: bold;
}
span.slider-tooltip {
    position: absolute;
    background: #FFF;
    border: 1px solid #DDD;
    padding: 1px 4px;
    border-radius: 4px;
    color: dimgray;
    pointer-events: none;
}

.entity .node text {
    font: inherit;
    pointer-events: inherit;
}
.entity .node.hovered rect {
    transition: fill 0.3s ease-in;
    stroke: steelblue!important;
}
.entity path.hovered {
    transition: stroke-width 0.3s ease-in, fill 0.3s ease-in;
    /*stroke-width: 4!important;*/
    stroke: steelblue!important;
    opacity: 1!important;
    stroke-opacity: 1!important;
}

/* log viewer */
div.d3view-log-viewer .log-table tbody tr {
    height: 70px;
}
div.d3view-log-viewer #log-filters {
    background-color: transparent!important;
}
div.d3view-log-viewer #log-filters div.d3view-filters-container li.filter-item > a {
    padding: 10px;
}

/* file watcher */
div.file-watcher {
    font-size: 1.5em;
}
div.file-watcher .global_play {
    cursor: pointer;
    opacity: 0.5;
    color: dimgrey;
    z-index: 2;
}
div.file-watcher .global_play:hover {
    opacity: 1!important;
    color: steelblue;
}
div.file-watcher .fw-container > div {
    border-right: 1px solid #DDD;
    height: 100%;
}
div.file-watcher .fw-msg {
    position: absolute;
    bottom: 0;
    right: 20px;
    z-index: 2;
}
div.file-watcher .fw-item {
    padding: 0 15px;
    margin-bottom: 10px;
}
div.file-watcher .fw-item.modified {
    background: orange;
}
div.file-watcher .fw-item.pushed {
    background: green;
    color: #FFF;
}



svg g.events-container .event text.start {
    text-anchor: end;
}
svg g.events-container .event text.end {
    text-anchor: start;
}
svg g.events-container .event circle.start,
svg g.events-container .event circle.end {
    pointer-events: all;
}
svg g.events-container line.mouseline {
    stroke: #000;
}
svg g.events-container .event .inner {
    cursor: move;
}
svg g.events-container .event circle {
    cursor: grab;
}
.event-detection g.events-container .event circle {
    pointer-events: none!important;
}
.event-adding .event circle {
    pointer-events: none!important;
}

.d3view-api-analytics .tags .badge {
    float: none!important;
}
.bootstrap-select.plugin-bs-select {
    min-width: 100px;
}

.plugin-ext-list li {
    display: inline;
    margin: 3px;
}
.d-inline {
    display: inline;
}

.kv_dset_container .setting_item {
    word-break: break-all;
}

/**
Show initial letters (like MS Teams)
 */
.d3view-initials {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 1ch;
    position: relative;
    font-size: 2em;
    letter-spacing: 1ch;
}
.d3view-initials.with_background {
    border: 1px solid #DDD;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-content: center;
    justify-content: center;
}

/**
Page Sorter
 */
div.plugin-page-sorter:not(.nested) .pgs-body,
div.plugin-page-sorter.nested .pgs-body .pgs-section-items {
    display: flex;
    flex-wrap: wrap;
}
div.plugin-page-sorter.nested .pgs-body .pgs-section-header {
    padding: 0 10px;
}
div.plugin-page-sorter .pgs-body .pgs-item {
    margin: 10px;
    width: 250px;
    height: 200px;
    /*animation-iteration-count: 2;*/
    /*animation-duration: 0.3s;*/
}
div.plugin-page-sorter .pgs-body .pgs-item .panel-body {
    height: calc(100% - 43px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.animated.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
}
@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}


[data-no-value]:after {
    content: attr(data-no-value);
}

/** viz options on the right **/
.viz-right-options {
    margin-left: 5px;
}

.pl-li {
    position: relative;
}
.pl-li.checked:before {
    position: absolute;
    content: '\f00c';
    font-family: FontAwesome;
    color: #428bca;
    top: 6px;
    left: 3px;
}
.pl-li.active:before,
.pl-li:focus:before,
.pl-li:hover:before {
    color: #FFF;
}
.pl-li.checked > a:hover:before {
    color: #FFF!important;
}

/** badge-primary **/
.badge-primary {
    background-color: #428bca;
    color: #FFF;
}
/* badge at corners of buttons */
.pl-corner-badge-tr {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: 75%;
    position: absolute!important;
}


/** Plugin Background **/
.d3view-plugin-background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
    opacity: 0;
    /*background-color: var(--plugin-background-color);*/
    background: #FFFFFF;
    background: radial-gradient(at center, #FFFFFF, #A3A1A1);
    transition: opacity 0.2s ease-in;
    cursor: progress;
}
.d3view-plugin-background .plugin-logo {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0%);
    height: 30%;
}
.d3view-plugin-background footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-image: linear-gradient(to bottom,var(--indigo-blue-dark) 0,var(--indigo-blue-light) 90%,var(--app-sl-color))!important;
    text-align: center;
}
.d3view-plugin-background footer img {
    width: 120px;
    position: relative;
    top: 10px;
    display: inline;
}

/** Added by shashank2104 on 12/18/2025 at 10:08 AM - DVFIV-1873 - Enhanced loading UI styles **/
.d3view-plugin-background .d3view-loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 480px;
}

.d3view-plugin-background .d3view-loading-logo-container img {
    margin: 0 auto 24px auto;
}

.d3view-plugin-background .d3view-loading-logo-container .plugin-logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    height: auto;
    max-height: 120px;
    max-width: 180px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    animation: d3view-logo-pulse 2s ease-in-out infinite;
}

@keyframes d3view-logo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

.d3view-plugin-background .d3view-loading-status-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

/* Message styles */
.d3view-plugin-background .d3view-loading-message-wrapper {
    margin-bottom: 8px;
}

.d3view-plugin-background .d3view-loading-message {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 6px 0;
    letter-spacing: 0.3px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.d3view-plugin-background .d3view-loading-message.updating {
    opacity: 0.6;
    transform: translateY(-2px);
}

.d3view-plugin-background .d3view-loading-submessage {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #7f8c8d;
    margin: 0;
    min-height: 18px;
    transition: opacity 0.3s ease;
}

/* Progress bar styles */
.d3view-plugin-background .d3view-loading-progress-container {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.d3view-plugin-background .d3view-loading-progress-bar {
    flex: 1;
    height: 6px;
    background: #e8ecef;
    border-radius: 3px;
    overflow: hidden;
}

.d3view-plugin-background .d3view-loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--indigo-blue-dark, #3a4a5c), var(--app-primary-color, #4a90d9));
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.d3view-plugin-background .d3view-loading-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: d3view-progress-shimmer 1.5s infinite;
}

@keyframes d3view-progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.d3view-plugin-background .d3view-loading-progress-text {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #5a6c7d;
    min-width: 36px;
    text-align: right;
}

/* Steps indicator styles */
.d3view-plugin-background .d3view-loading-steps {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-plugin-background .d3view-loading-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.d3view-plugin-background .d3view-loading-step.pending {
    background: #f0f2f4;
    color: #95a5a6;
}

.d3view-plugin-background .d3view-loading-step.active {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
}

.d3view-plugin-background .d3view-loading-step.completed {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #388e3c;
}

.d3view-plugin-background .d3view-step-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.d3view-plugin-background .d3view-loading-step.pending .d3view-step-indicator {
    background: #dce0e3;
    color: #7f8c8d;
}

.d3view-plugin-background .d3view-loading-step.active .d3view-step-indicator {
    background: #1976d2;
    color: #fff;
}

.d3view-plugin-background .d3view-loading-step.completed .d3view-step-indicator {
    background: #388e3c;
    color: #fff;
}

.d3view-plugin-background .d3view-step-number {
    font-weight: 700;
}

.d3view-plugin-background .d3view-step-label {
    white-space: nowrap;
}

/* ==========================================
   Minimal Segmented Loading UI
   Added by shashank2104 on 12/20/2025 at 11:23 PM - DVFIV-1873
   ========================================== */

.d3view-plugin-background .d3view-loading-minimal {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 500px;
}

.d3view-plugin-background .d3view-loading-minimal .d3view-loading-logo-container {
    margin-bottom: 32px;
}

.d3view-plugin-background .d3view-loading-minimal .d3view-loading-message {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.d3view-plugin-background .d3view-loading-minimal .d3view-loading-submessage {
    font-size: 13px;
    color: #7f8c8d;
    margin: 0 0 28px 0;
    min-height: 18px;
}

.d3view-loading-segmented-progress {
    width: 100%;
}

.d3view-segmented-track {
    display: flex;
    align-items: center;
    height: 6px;
    margin-bottom: 12px;
}

.d3view-segment {
    flex: 1;
    height: 100%;
    background: #dce0e3;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.d3view-segment-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3a5a7c, #4a90d9);
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.d3view-segment.completed .d3view-segment-fill {
    width: 100%;
    background: #43a047;
}

.d3view-segment.active .d3view-segment-fill {
    width: 100%;
    animation: segmentPulse 1.5s ease-in-out infinite;
}

@keyframes segmentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.d3view-segment-connector {
    width: 8px;
    height: 2px;
    background: #dce0e3;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.d3view-segment-connector.active {
    background: #43a047;
}

.d3view-segment-labels {
    display: flex;
    justify-content: space-between;
}

.d3view-segment-label {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #95a5a6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    transition: color 0.3s ease;
}

.d3view-segment-label.active {
    color: #3a5a7c;
    font-weight: 600;
}

.d3view-segment-label.completed {
    color: #43a047;
}

.d3view-segment-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: all 0.3s ease;
}

.d3view-segment-label.active .d3view-segment-dot {
    background: #3a5a7c;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(58, 90, 124, 0.2);
}

.d3view-segment-label.completed .d3view-segment-dot {
    background: #43a047;
    color: #fff;
}

.d3view-pulse-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulseDot 1s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

/**
Bootstrap switch auto height
 */
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
    height: auto!important;
}

/** clickable FA icon **/
.fa-clickable {
    cursor: pointer;
}
.fa-clickable:hover {
    color: #428bca;
}

.pl-fixed {
    position: fixed!important;
    top: 0!important;
    /* Yield the d3VIEW pin-left app rail: --d3v-rail-w (style.css, set on
       body.app-menu-pos-pin-left, 0 elsewhere) keeps the rail visible and
       usable beside ANY pl-fixed takeover instead of being covered. */
    left: var(--d3v-rail-w, 0px)!important;
    width: calc(100% - var(--d3v-rail-w, 0px))!important;
    height: 100%!important;
    z-index: 2000!important;
    background: #FFF!important;
}
body.hasFixedContainer #main_content {
    z-index: 20;
}

/** Notification popover **/
.pl-notification-popover.popover {
    width: 300px;
    max-width: unset;
    box-shadow: var(--plugin-box-shadow);
}
.pl-notification-popover.popover .popover-title {
    padding: 20px;
    background: #FFF;
    color: steelblue;
}
.pl-notification-popover.popover .popover-content {
    font-size: medium;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
}
.pl-notification-popover.popover > div[class*=popover-] {
    padding: 15px;
}

/** Autofill **/
.pl-autofill .autofill-marker {
    color: steelblue;
    font-weight: 500;
}
.pl-editable[contenteditable]:empty:not(:focus):before {
    content: attr(data-ph);
    color: grey;
    pointer-events: none!important;
}
.pl-autofill a.autofilled-item {
    cursor: pointer;
}
.pl-autofilled-item[data-link="true"] {
    color: var(--indigo-blue-light);
    cursor: pointer;
}
.pl-autofilled-item[data-link="true"]:before {
    content: '@';
}
.pl-autofilled-item[data-link="false"] {
    /*color: initial;*/
}
.pl-autofilled-item[data-link="false"] span.value:before {
    content: '= ';
}

.pl-nav-tabs-vertical {
    border-right: 1px solid #DDD;
    flex: 0 0 100px;
    width: 100px;
    height: 100%;
    overflow: auto
}

.plugin-flex-tabs {
    display: flex;
}
.plugin-flex-tabs > .pl-nav-tabs {
    border-right: 1px solid #DDD;
    flex: 0 0 100px;
    width: 100px;
    height: 100%;
    overflow: auto;
}
.plugin-flex-tabs > .tab-content {
    flex: 1 1 auto;
    height: 100%;
}

.pl-vertical-tabs-container {
    display: flex;
    height: 100%;
}
.pl-vertical-tabs-container > .tab-content {
    flex: 1 1 auto;
}
.pl-tabs-vertical > li {
    cursor: pointer;
    border-right: none;
    border-left: none;
    background-color: transparent;
    padding: 0!important;
    text-align: center;
}
.pl-tabs-vertical > li > a {
    color: #333;
    text-decoration: none;
    padding: 15px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.pl-tabs-vertical > li > a > i {
    pointer-events: none;
    width: 100%;
    background-size: 50px;
}
.pl-tabs-vertical > li.active,
.pl-tabs-vertical > li.open,
.pl-tabs-vertical > li:hover,
.pl-tabs-vertical > li:focus {
    background: #f1f3f4!important;
    background-image: none!important;
    border-color: #DDD!important;
}
.pl-tabs-vertical > li.active > a,
.pl-tabs-vertical > li.open > a,
.pl-tabs-vertical > li:hover > a,
.pl-tabs-vertical > li:focus > a {
    text-shadow: none;
    color: #333!important;
}

.pl-tabs-vertical > li span.pl-tab-item-label {
    display: block;
    width: 100%;
    word-wrap: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pl-search-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*max-height: 100px;*/
    overflow: auto;
    overflow-x: hidden;
}
.pl-search-tags > [data-key] {
    cursor: pointer;
    margin: 5px;
    font-size: 85%;
}
.pl-search-tags.defaults > span {
    margin: 5px;
    font-size: initial;
}

.pl-search-tags > [data-key].selected {
    background-color: #428bca;
}
.confusion-matrix .cell rect {
    /*fill: none;*/
    /*stroke: #DDD;*/
    /*stroke-width: 1 !important;*/
    fill-opacity: 0.5;
}
.confusion-matrix .r-label text,
.confusion-matrix .column-label text {
    font-weight: 700;
}

.pl-predict-container .col-slider-value:before, .pl-no-ui-slider .col-slider-value:before {
    content: 'Value: ';
    color: dimgrey;
}
.pl-predict-container .pred-inputs .col-slider-container {
    padding: 0 20px 0 0px;
}
.pl-bold-500 {
    font-weight: 500;
}
.pl-bold {
    font-weight: bold;
}

.data-aggregator .dag-cols {
    display: flex;
    flex-wrap: wrap;
}
.data-aggregator .dag-cols .panel {
    margin: 10px;
}

.pl-no-ui-slider {
    padding: 30px 4px 0 4px;
    position: relative;
    width: 100%;
}
.pl-no-ui-slider .col-slider-min {
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.pl-no-ui-slider .col-slider-max {
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
}

.pl-dashboard .pl-db-panels {
    display: flex;
    flex-wrap: wrap;
}
.pl-dashboard .pl-db-panel {
    width: 200px;
    margin: 0 20px 20px;
    box-shadow: var(--plugin-box-shadow-lighter);
    padding: 30px;
}
.pl-dashboard .pl-db-panel:first-child {
    margin-left: 0;
}
.pl-dashboard .pl-db-panel:last-child {
    margin-right: 0;
}

.pl-dashboard .pl-db-heading {
    font-size: 21px;
    font-weight: bold;
}
.pl-dashboard .grid-stack .grid-stack-item-content {
    box-shadow: var(--plugin-box-shadow-lighter);
    padding: 30px;
    border: 1px solid #DDD;
}
.pl-dashboard .widgets-list {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 300px;
    display: none;
    z-index: 20;
}
.pl-dashboard .widgets-list.shown {
    display: block!important;
}


/*.pl-bs-editor {*/
/*    max-height: 250px;*/
/*    height: 250px;*/
/*    background-color: white;*/
/*    border-collapse: separate;*/
/*    border: 1px solid rgb(204, 204, 204);*/
/*    padding: 4px;*/
/*    box-sizing: content-box;*/
/*    -webkit-box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px 0px inset;*/
/*    box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px 0px inset;*/
/*    border-top-right-radius: 3px;*/
/*    border-bottom-right-radius: 3px;*/
/*    border-bottom-left-radius: 3px;*/
/*    border-top-left-radius: 3px;*/
/*    overflow: scroll;*/
/*    outline: none;*/
/*}*/
[contenteditable="true"][data-ph]:empty:before {
    content: attr(data-ph);
    color: grey;
    pointer-events: none!important;
}
.pl-editor-title {
    word-break: break-all;
    border: 1px solid transparent;
    margin-bottom: 8px;
    padding: 4px 10px;
    width: 100%;
    cursor: pointer;
}
.pl-editor-title:hover {

    /*cursor: text;*/
}
.pl-editor-title:focus, .pl-editor-title.isEditing, .pl-editor-title:hover {
    /*color: steelblue;*/
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.plugin-dz.dropzone {
    min-height: unset;
    border-style: dotted;
    overflow: auto;
    cursor: n-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}
.p-events-none {
    pointer-events: none;
}

.data-filter .sc-uniq-values,
.data-aggregator .sc-uniq-values {
    /*height: 200px;*/
    overflow: auto;
}
.data-filter:not([data-mode="highlight"]) [data-key],
.data-aggregator [data-key] {
    cursor: pointer;
}
.data-filter:not([data-mode="highlight"]) .pl-uniq-blocks [data-key]:not(.ui-selected):not(.ui-selecting):not(.ui-unselecting):hover,
.data-filter:not([data-mode="highlight"]) .sc-uniq-values [data-key]:not(.ui-selected):not(.ui-selecting):not(.ui-unselecting):hover,
.data-aggregator .pl-uniq-blocks [data-key]:not(.ui-selected):not(.ui-selecting):not(.ui-unselecting):hover,
.data-aggregator .sc-uniq-values [data-key]:not(.ui-selected):not(.ui-selecting):not(.ui-unselecting):hover {
    background-color: #f1f3f4;
}
.data-filter .pl-search-tags > span,
.data-aggregator .pl-search-tags > span {
    margin: 5px;
    font-size: initial;
}

.pl-uniq-blocks:not([data-orientation="vr"]) {
    display: flex;
}
.data-filter .carousel-inner .pl-uniq-blocks {
    display: flex!important;
}
.pl-uniq-blocks[data-orientation="hr"] {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /*flex-wrap: wrap;*/
}
.pl-uniq-blocks[data-orientation="hr"] .pl-uniq-block {
    margin: 5px;
    /*flex: 0 0 calc(20% - 10px);*/
    justify-content: center;
    width: calc(20% - 10px);
}
.pl-uniq-blocks[data-wrap="true"][data-orientation="hr"] {
    flex-wrap: wrap;
}
.pl-uniq-blocks[data-orientation="vr"] > [data-key] {
    height: 100px;
}
.pl-uniq-blocks[data-halign="center"] > [data-key] {
    justify-content: center;
}
.pl-uniq-blocks[data-halign="right"] > [data-key] {
    justify-content: flex-end;
}
.pl-uniq-blocks[data-halign="left"] > [data-key] {
    justify-content: flex-start;
}
.pl-uniq-blocks[data-valign="top"] > [data-key] {
    align-items: flex-start;
}
.pl-uniq-blocks[data-valign="bottom"] > [data-key] {
    align-items: flex-end;
}
.pl-uniq-blocks[data-valign="center"] > [data-key] {
    align-items: center;
}

.sc-uniq-values[data-halign="center"] > [data-key] {
    justify-content: center;
    text-align: center;
}
.sc-uniq-values[data-halign="right"] > [data-key] {
    justify-content: flex-end;
    text-align: right;
}
.sc-uniq-values[data-valign="top"] > [data-key] {
    align-items: flex-start;
}
.sc-uniq-values[data-valign="bottom"] > [data-key] {
    align-items: flex-end;
}
.sc-uniq-values[data-valign="center"] > [data-key] {
    align-items: center;
}

.pl-uniq-blocks > [data-key] {
    margin: 5px 0;
    display: flex;
    align-items: center;
    border: 1px solid #DDD;
    /*padding: 10px;*/
    height: 150px;
    word-break: break-word;
}
.pl-uniq-blocks > [data-key].selected, .pl-uniq-blocks > [data-key].ui-selecting {
    background-color: var(--dt-selection-color);
    font-weight: bold;
}

.pl-uniq-blocks > [data-key] > div.block-img-container {
    /*height: 100%;*/
}

.pl-uniq-blocks[data-halign="center"][data-valign="center"] > [data-key] > div.block-img-container {
    height: 100%;
}

.pl-uniq-blocks > [data-key] .col-img {
    height: calc(100% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.pl-uniq-carousel .carousel-inner .item img {
    width: auto;
    margin: 0 auto;
}
.pl-uniq-carousel .carousel-control {
    z-index: 2;
}
.data-filter .sc-uniq-values [data-key],
.data-aggregator .sc-uniq-values [data-key] {
    padding: 12px 2px;
}
.data-filter .sc-uniq-values span.sl-selected-arrow,
.data-aggregator .sc-uniq-values span.sl-selected-arrow {
    margin-right: 5px;
    display: none;
}
.data-filter .pl-uniq-blocks .pl-uniq-block,
.data-aggregator .pl-uniq-blocks .pl-uniq-block {

}
.data-filter .pl-uniq-blocks[data-halign="center"],
.data-aggregator .pl-uniq-blocks[data-halign="center"] {
    /*justify-content: center;*/
}

ul.nav-blocks {
    display: flex;
    width: 100%;
}

.nav-blocks li {
    border: 1px solid #DDD;
    flex: 1 1 auto;
}
.nav-blocks li > a {
    padding: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.nav.nav-blocks>li>a:focus, .nav.nav-blocks>li>a:hover {
    background-color: #f1f3f4;
}

.nav-blocks li.active {
    background: #f1f3f4;
    border-bottom: 2px solid #428bca;
}

.nav-blocks li:not(:last-child) {
    border-right: none;
}

.pl-background-highlight {
    background-color: #428BCA!important;
    color: #FFF!important;
}
.pl-background-highlight .select2-search-field input,
tr.pl-background-highlight * {
    color: #FFF!important;
}

.table.table-border-none td, .table.table-border-none th {
    border: none!important;
}

.data-aggregator .data-aggregator-column {
    border: 1px solid #DDD;
    padding: 10px;
}

/*.pl-executing {*/
/*    border: 2px solid orange!important;*/
/*    opacity: 0.7;*/
/*}*/
/*.pl-executing:after {*/
/*    content: "\f021";*/
/*    font-family: FontAwesome;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    animation: fa-spin 2s infinite linear;*/
/*    z-index: 2;*/
/*    font-size: 1.4em;*/
/*    color: dimgrey;*/
/*}*/
.pl-executing [data-input] .input-value-container * {
    display: none;
}
.pl-executing [data-input] .input-value-container {
    height: 50px;
}
.pl-executing [data-input] .input-value-container:after {
    content: "\f021";
    font-family: FontAwesome;
    position: absolute;
    left: 50%;
    top: 50%;
    animation: fa-spin 2s infinite linear;
    z-index: 2;
    font-size: 1.4em;
    color: dimgrey;
}
/* resizable handles */

.d3view-pl-resizable > .ui-resizable-se,
.d3view-pl-resizable > .ui-resizable-sw {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); }
.d3view-pl-resizable > .ui-resizable-se {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }
.d3view-pl-resizable > .ui-resizable-nw {
    cursor: nw-resize;
    width: 20px;
    height: 20px;
    top: 0; }
.d3view-pl-resizable > .ui-resizable-n {
    cursor: n-resize;
    height: 10px;
    top: 0;
    left: 25px;
    right: 25px; }
.d3view-pl-resizable > .ui-resizable-ne {
    cursor: ne-resize;
    width: 20px;
    height: 20px;
    top: 0; }
.d3view-pl-resizable > .ui-resizable-e {
    cursor: e-resize;
    width: 10px;
    /*top: 15px;*/
    /*bottom: 15px; */
}
.d3view-pl-resizable > .ui-resizable-se {
    cursor: se-resize;
    width: 20px;
    height: 20px; }
.d3view-pl-resizable > .ui-resizable-s {
    cursor: s-resize;
    height: 10px;
    /*left: 25px;*/
    bottom: 0;
    /*right: 25px; */
}
.d3view-pl-resizable > .ui-resizable-sw {
    cursor: sw-resize;
    width: 20px;
    height: 20px;
    bottom: 0; }
.d3view-pl-resizable > .ui-resizable-w {
    cursor: w-resize;
    width: 10px;
    top: 15px;
    bottom: 15px; }
.d3view-pl-resizable.ui-draggable-dragging > .ui-resizable-handle {
    display: none !important; }


.pl-search [data-search-clear] {
    cursor: pointer;
    pointer-events: all;
    z-index: 2;
    padding: 7px;
    position: absolute;
    top: 0;
    right: 0;
    color: grey;
}
.pl-search [data-search-clear]:hover {
    color: steelblue;
}
.pl-search [data-search-results].no-results:after {
    content: 'No results found.';
    padding: 10px;
    font-weight: 500;
    font-size: 1.2;
    color: dimgray;
}
.text-bold {
    font-weight: bold;
}
.dropdown.pl-dropdown .dropdown-menu li {
    position: relative;
}
.dropdown.pl-dropdown .dropdown-menu li:hover > a {
    background-color: #eee;
}
.dropdown.pl-dropdown .dropdown-menu li.checked:not(.disabled):after {
    position: absolute;
    content: '\f00c';
    left: 4px;
    font-family: FontAwesome;
    color: #428bca;
    top: 4px;
}
.dropdown.pl-dropdown .dropdown-menu li.checked:not(.disabled) > a:hover:before {
    color: #FFF!important;
}

div.bs-container.bootstrap-select.-wf.open,
div.bs-container.bootstrap-select.newton-datum.open {
    z-index: 20000;
}

div.simlytiks .sl-side-bar.mini .toggle_sidebar {
    opacity: 1!important;
}


.pl-toggle-sidebar {
    position: absolute;
    right: -17px;
    top: 33px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    z-index: 100;
    background-color: #FFF;
    color: #444;
    border: 1px solid #DDD;
    opacity: 1;
    transition: opacity 0.3s ease-in, background-color 0.3s ease-in, transform 0.3s ease-in;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-toggle-sidebar.open {
    transform: rotate(180deg);
    opacity: 1;
}
.pl-toggle-sidebar:hover {
    border-color: #66a1e5;
    background-color: #66a1e5;
    color: #FFF!important;
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.pl-dropdown .dropdown-menu li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pl-dropdown .dropdown-menu li > a {
    flex: 1 1 auto;
}

.pl-inline-docs[data-type="overlay"],
[data-inline-doc][data-type="overlay"] {
    position: absolute;
    top: -17px;
    right: -20px;
}
[data-inline-doc][data-type="overlay"]:hover {
    /*background: rgba(0,0,0,0.8);*/
    border-color: darkgrey;
}
[data-inline-doc][data-inline-doc=""] {
    display: none;
}
[data-inline-doc][data-type="overlay"] {
    z-index: 2;
    background: none;
    color: grey;
    padding: 1px 5px!important;
    cursor: pointer;
    border: 1px solid transparent;
    /*border-radius: 50%;*/
}
[data-inline-doc][data-type="overlay"] .inline-doc {
    color: grey;
}
[data-inline-doc-hover] [data-inline-doc] {
    display: none;
}
[data-inline-doc-hover]:hover [data-inline-doc] {
    display: block;
}
.pl-inline-docs[data-type="inline"] {
    /*position: absolute;*/
    /*right: 4px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}
a[data-inline-doc][data-inline-doc-type="inline"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
a[data-inline-doc][data-inline-doc-type="inline"] i.inline-doc {
    float: right;
    z-index: 2;
    padding: 3px 5px;
    cursor: pointer;
}
a[data-inline-doc][data-inline-doc-type="inline"] i.inline-doc:hover {
    background: rgba(0,0,0,0.8);
    color: #FFF;
    border-radius: 5px;
}
a[data-inline-doc][data-inline-doc-type="default"] i.inline-doc:hover {
    color: dimgrey;
    cursor: pointer;
}
a[data-inline-doc][data-inline-doc-type="top-right"] {
    position: relative;
}
a[data-inline-doc][data-inline-doc-type="top-right"] i.inline-doc {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    padding: 3px 5px;
    cursor: pointer;
    color: grey;
    width: auto;
}
a[data-inline-doc][data-inline-doc-type="top-right"] i.inline-doc:hover {
    color: #111;
}

/** minimized modals */
ul.pl-minimized-modals {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 2000;
    margin-bottom: 0;
}
ul.pl-minimized-modals li {
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    border: 2px solid darkorange;
    background: #FFF;
    width: 300px;
    cursor: move;
}
ul.pl-minimized-modals li img {
    display: inline-block;
    margin-right: 3px;
}

.input-group-addon.pl-dropdown {
    padding: 0;
}
.input-group-addon.pl-dropdown > button {
    border: none;
    padding: 5px 12px;
}
.input-group-addon.pl-dropdown > button.btn-sm {
    height: 30px;
    border-radius: 0;
}
.input-group .dropdown-toggle.btn.btn-sm:not(.btn-default-radius) {
    border-radius: 0;
    padding: 5px 10px;
}


/** Ribbon UI **/
.pl-ribbon-menu .pl-ribbon-list > li:hover {
    background: #f1f3f4;
    border-radius: 4px;
}
.pl-ribbon-menu .pl-ribbon-list > li:hover > a:not(.btn) {
    color: #333!important;
}

ul.pl-ribbon-list li {
    display: inline-block;
    padding: 2px;
    margin-right: 1px;
    border-bottom: 3px solid transparent;
}

ul.pl-ribbon-list li[data-is-button="false"] > a {
    color: #333;
    padding: 8px 10px;
    text-decoration: none;
}
ul.pl-ribbon-list li.active {
    border-bottom: 3px solid var(--ribbon-active);
}
.pl-ribbon-menu .pl-ribbon-item.active {
    background-color: var(--ribbon-active)!important;
    color: #FFF!important;
}
.pl-ribbon-item.checked:before {
    content: '\f00c';
    font-family: 'FontAwesome';
     position: absolute;
    left: 0px;
}
.pl-ribbon-menu .pl-ribbon-level-1 {
    margin-bottom: 5px;
    font-weight: 600;
}
.pl-ribbon-menu .pl-ribbon-level-2 {
    /*box-shadow: var(--plugin-box-shadow-lighter);*/
    /*!* background: #f3f2f1; *!*/
    /*border: 1px solid #f3f2f1;*/
    display: flex;
    align-items: center;
    margin: 0;
}
.pl-ribbon-menu .pl-ribbon-level-2 button,
.pl-ribbon-menu .pl-ribbon-level-2 .pl-ribbon-item {
    font-size: 11px;
    margin-right: 5px;
    position: relative;
}

.pl-ribbon-divider {
    border-right: 1px solid #DDD;
    /*padding: 0 10px;*/
    height: 30px;
    margin: 0 5px;
}
.pl-ribbon-group {
    display: flex;
    align-items: center;
}
.pl-ribbon-group .pl-ribbon-item > .pl-icon {
    margin-right: 4px;
}
.pl-ribbon-menu .pl-ribbon-item > .pl-icon,
.pl-ribbon-menu .pl-ribbon-item > .item-label {
    pointer-events: none;
}
@media screen and (max-width: 1500px) {
    .pl-ribbon-item .item-label {
        display: none;
    }
    .pl-btn-label {
        display: none;
    }
}
.pl-icon {
    /*margin-right: 4px;*/
}

svg[data-chart="gantt"] .gantt-item-text {
    padding: 0 10px;
}

svg[data-chart="orgchart"] div.orgchart-item {
    border: 1px solid #DDD;
    background: #FFF;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}
svg[data-chart="orgchart"] div.orgchart-item:hover {
    background: #f1f3f4;
}

.pl-list-group .list-group-item {
    border: none;
    text-shadow: none;
}
.pl-list-group .list-group-item.active {
    background: var(--dt-selection-color-dark);
    text-shadow: none;
    border: none;
}
.pl-list-group .list-group-item.active > a {
    color: #333;
    text-decoration: none;
}
.pl-list-group .list-group-item.active:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 4px;
    left: 0px;
    top: 12px;
    background: #428bca;
    border-radius: 0px 1.998px 1.998px 0px;
}

.dtr-list .dtr-title {
    font-weight: bold;
    display: inline-block;
    /*min-width: 150px;*/
}
.dtr-list .dtr-value {

}

.gantt-container .gantt-settings div.simlytiks #viz_preview_options {
    border-right: none;
}
.gantt-container .gantt-settings div.simlytiks #viz_preview_options div.viz-preview-tabs {
    height: calc(100% - 10px);
}


.multiboxplot .multibox-canvas {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.select2-drop .select2-result-with-children .select2-result-sub {
    background-color: #FFF;
}
.select2-results .select2-disabled > .select2-result-label {
    cursor: not-allowed;
    color: dimgrey;
}
.select2-drop .select2-results .select2-disabled {
    background: #FFF;
}

@media screen and (max-width: 1600px) {
    .pl-label {
        display: none;
    }
}

.pl-input-dragdropover {
    background-color: lightskyblue;
}

div.pl-query-builder .ui-draggable-dragging {
    z-index: 20!important;
}

/** Query Builder Plugin **/
.query-builder .query-builder-input {
    height: auto !important;
    min-height: 100px !important;
}

.query-builder .query-builder-input:empty:before {
    content: attr(data-placeholder);
    color: lightgray;
    background-color: transparent;
    position: absolute;
}

.query-builder .margin-0 {
    margin: 0px;
}

.query-builder .w-100 {
    width: 100%;
}

.query-options-dropdown {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 0px 5px #eee;
}

.query-options-dropdown .data-container {
    height: calc(100% - 45px);
    width: 100%;
    overflow-y: auto;
}

.query-options-dropdown .pagination-container {
    height: 45px;
    width: 100%;
    padding: 7.5px 2.5px;
}

.query-options-dropdown .query-dropdown-list-item * {
    pointer-events: none;
}

.query-options-dropdown .query-dropdown-list-item:hover {
    background-color: #eee;
    cursor: pointer;
}

.query-options-dropdown .query-dropdown-close {
    position: absolute;
    right: 10px;
    bottom: 10px;
    text-decoration: underline;
}

.query-options-dropdown .category-uls {
    position: absolute;
    left: calc(30%);
    bottom: 10px;
    display: flex;
    flex-direction: row;
}

.query-options-dropdown .category-label {
    text-transform: uppercase;
    margin-top: 0px;
}


.small_multiples_radar {
    display: flex;
    flex-wrap: wrap;
}
.small_multiples_radar .sm-radar {
    margin: 10px;
}
/*.small_multiples_radar .sm-radar .axis .tick text {*/
/*    font-size: 8px;*/
/*    font-weight: normal;*/
/*}*/

.boxplot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.boxplot .boxplot-item {
    margin: 10px;
    flex: 1 1 auto;
}


.pl-thumbnail-item {
    width: 18%;
    margin: 10px;
    min-height: 150px;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    border: 2px solid #DDD;
    padding: 10px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.pl-thumbnail-item.selected {
    border-color: #428bca;
}

/*.docs-edit-image .image {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
/*.docs-edit-image .paintboard {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
.d3view-exporting .paint-board-nav {
    /*display: none;*/
}

.pl-anchor-plain {
    text-decoration: none;
}
.label-border-danger {
    border: 1px solid #d9534f;
    background-color: unset;
    color: unset;
}
.label-border-info {
    border: 1px solid #5bc0de;
    background-color: unset;
    color: unset;
}
.label-border-success {
    border: 1px solid #5cb85c;
    background-color: unset;
    color: unset;
}
.label-border-warning {
    border: 1px solid #f0ad4e;
    background-color: unset;
    color: unset;
}
.label-border-default {
    border: 1px solid #777;
    background-color: unset;
    color: unset;
}
.pl-label-modern {
    line-height: unset;
    display: inline-block;
}
.pl-label-modern.label-primary {
    background: linear-gradient(to bottom,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;
    color: rgb(91 192 222);
}
.pl-label-modern.label-info {
    /*background-color: rgba(91,192,222,0.2);*/
    background: linear-gradient(to bottom,rgba(181,209,255,.34) 0,rgba(181,209,255,.34) 100%) #fff;
    color: rgb(91 192 222);
}
.pl-label-modern.label-default {
    /* a bit darker than light gray */
    background: linear-gradient(to bottom,rgba(190,190,190,.34) 0,rgba(190,190,190,.34) 100%) #fff;
    color: rgb(50 50 50);
}
.pl-label-modern.label-success {
    background-color: rgba(92,184,92,0.2);
    color: rgb(92 184 92);
}
.pl-label-modern.label-danger {
    background-color: rgba(217,83,79,0.2);
    color: rgb(217 83 79);
}
.pl-label-modern.label-warning {
    background-color: rgba(240,173,78,0.2);
    color: rgb(240 173 78);
}
.pl-label-modern.label-large {
    padding: 6px 12px;
    border-radius: 20px;
}

.pl-modern-panel {

}

.d3view-newton-manager[data-flex="true"] .charts-container {
    display: flex;
    flex-wrap: wrap;
}

.d3view-newton-manager[data-flex="true"] .charts-container .newton-chart {
    width: 33%!important;
}
div.d3view-newton-manager .newton-chart > .d3view-no-data {
    display: block;
}

/* Fancy SPINNER */
.pl-loading-bars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 2;
}
.pl-loading-bars.shown {
    display: block;
}
.pl-loading-bars .loading-bar {
    display: inline-block;
    width: 4px;
    height: 30px;
    border-radius: 4px;
    animation: loading 1s ease-in-out infinite;
}
.pl-loading-bars .loading-bar:nth-child(1) {
    background-color: #3498db;
    animation-delay: 0s;
}
.pl-loading-bars .loading-bar:nth-child(2) {
    background-color: #c0392b;
    animation-delay: 0.09s;
}
.pl-loading-bars .loading-bar:nth-child(3) {
    background-color: #f1c40f;
    animation-delay: .18s;
}
.pl-loading-bars .loading-bar:nth-child(4) {
    background-color: #27ae60;
    animation-delay: .27s;
}


/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
    16.667% {
        box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
    33.333% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
    50% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
    66.667% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
    83.333% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;
    }
    100% {
        box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    }
}

.plugin-images-mosaic {
    height: 100%;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*overflow: auto;*/
    /*flex: 1 1 auto;*/

    width: calc(100% - 5px);
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 240px;
}
.plugin-images-mosaic > div {
    /*padding: 10px;*/
    /*margin: 5px;*/
    /*flex: 1 1 calc(33% - 10px);*/
    /*min-height: 200px;*/
    /*border: 1px solid #DDD;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 500ms;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    position: relative;
}



@media screen and (min-width: 600px) {
    .plugin-images-mosaic > div.card {
        grid-row: span 1 / auto;
    }

    .plugin-images-mosaic > div.card {
        grid-column: span 2 / auto;
    }
}
@media screen and (min-width: 600px) {
    .plugin-images-mosaic > div.card {
        grid-row: span 2 / auto;
    }

    .plugin-images-mosaic > div.card {
        grid-column: span 1 / auto;
    }
}
.plugin-images-mosaic .img-caption {
    position: absolute;
    bottom: 0;
}

.pl-panel {
    box-shadow: none;
    margin-bottom: 0;
}
.pl-panel > .panel-heading {
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
}

div.d3view-schema-summary .schema-table .schema-column {
    /*font-size: 1.4em;*/
    word-wrap: break-word;
}
/*div.d3view-schema-summary .schema-table .schema-column*/

div.d3view-viz[data-charttype="column_summary"] .col-stats > div {
    flex: 1 1 auto;
    margin-bottom: 0;
    height: 70px;
    padding: 10px;
}

.viz-container.hasPagination .chart-outer-container {
    height: calc(100% - 65px)!important;
    overflow: auto;
    overflow-x: hidden;
}
.d3view-viz[data-chart-type="table_heatmap"] .chart-outer-container {
    position: relative;
    height: calc(100% - 35px);
}
.d3view-viz[data-chart-type="table_heatmap"] .chart-outer-container .canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container.shortLabels g.colLabels span.val {
    display: inline-block;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container {
    overflow: hidden;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container.shortLabels .chart-outer-container {
    overflow-x: auto;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container[data-pagination-position="top"] .chart-settings {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container[data-pagination-position="top"] .chart-settings .heatmap-settings-container {
    margin-left: 10px;
    width: auto!important;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container.hasPagination .pagination-options {
    display: block!important;
}
.d3view-viz[data-chart-type="table_heatmap"] .viz-container .pagination-options {
    display: none;
}

.handsontable .pl-remove-ht-row {
    color: gray;
    cursor: pointer;
}
.handsontable .pl-remove-ht-row:hover {
    color: red;
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        -ms-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        -ms-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}


.pl-overflowing-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-schema-summary div.table-container:not([data-design="modern"]) .sc-uniq-values-container span.flex-l {
    display: inline-block;
    max-width: calc(100% - 40px);
}
.d3view-schema-summary .refresh-uniq-values {
    cursor: pointer;
}
.d3view-schema-summary .refresh-uniq-values:hover {
    color: dimgrey;
}

.pl-wrap-text {
    word-break: break-word;
}


div.plugin-page {
    display: flex;
    /*border: 1px solid #DDD;*/
}
div.plugin-page .plugin-page-tabs {
    /*background: #f5f5f5;*/
    width: 60px;
    margin-right: 10px;
    /*border-right: 1px solid #DDD;*/
    flex: 0 0 60px;
}
div.plugin-page .plugin-page-tabs .pl-tab-item-label {
    font-size: 0.8em;
}
div.plugin-page .plugin-page-tab-content {
    flex: 1 1 auto;
}

div.plugin-page .plugin-page-tabs li[data-id] {
    border: none;
}
div.plugin-page .plugin-page-tabs .pl-tabs-vertical > li[data-id] {
    border-left: 3px solid transparent!important;
    border-top: none;
    border-bottom: none;
    border-radius: 5px;
    margin: 2px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.1s linear;
}
div.plugin-page .plugin-page-tabs .pl-tabs-vertical > li[data-id="export"]:hover .dropdown-menu {
    display: block!important;
}
div.plugin-page .plugin-page-tabs li[data-id]:hover {
    background-color: #FFF!important;
}
div.plugin-page .plugin-page-tabs li[data-id].active {
    background: #FFF!important;
}
div.plugin-page .plugin-page-tabs li[data-id].active:before {
    content: '';
    border-style: solid;
    height: 100%;
    position: absolute;
    left: -3px;
    border-width: 1.5px;
    border-color: steelblue;
}

div.simlytiks .responses-carousel-container .viewContent {
    position: relative!important;
    width: auto!important;
    height: auto!important;
    margin: 0 10px;
    padding: 10px;
}
div.simlytiks .responses-carousel-container .viewContent.pl-fixed {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    z-index: 2000!important;
    background: #FFF!important;
    -webkit-transition: top 200ms ease 0ms, right 200ms ease 0ms, bottom 200ms ease 0ms, left 200ms ease 0ms, padding 50ms linear 75ms;
    transition: top 200ms ease 0ms, right 200ms ease 0ms, bottom 200ms ease 0ms, left 200ms ease 0ms, padding 50ms linear 75ms;
}
div.simlytiks .responses-carousel-container[data-display-type="mosaic"] .tab-pane {
    display: flex;
    flex-wrap: wrap;
}
div.simlytiks .responses-carousel-container[data-display-type="one_per_row"] .profile-viz {
    height: 400px!important;
    width: 100%!important;
}
div.simlytiks .responses-carousel-container[data-display-type="mosaic"] .profile-viz {
    height: 400px!important;
    margin: 10px;
}
div.simlytiks .responses-carousel-container[data-display-type="list"] .profile-viz {
    height: 100%!important;
    width: 100%!important;
    margin: 0;
    width: 100%!important;
    padding: 0;
    border: none;
}
div.responses-carousel-container div.profile-viz .d3view-viz.simple-texts {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.responses-carousel-container div.profile-viz .vbar-simple-text {
    height: unset;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 25px;
    overflow: auto;
    font-size: 1.4em;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pl-link {
    cursor: pointer;
}
a.pl-link.active {
    color: var(--ribbon-active);
    box-shadow: none;
}

/** For select2 **/
.plugin-container .select2-container {
    height: auto;
}
.plugin-container .select2-container {
    padding: 0;
}
.plugin-container div.select2-container ul.select2-choices {
    transition: box-shadow ease-in-out .15s, background ease-in 0.15s;
}
.plugin-container div.select2-container.select2-dropdown-open ul.select2-choices {
    max-height: 250px;
    overflow: auto;
}
.plugin-container .fulfilled div.select2-container ul.select2-choices,
.plugin-container .fulfilled a.select2-choice {
    border-color: #5cb85c;
    outline-color: #5cb85c;
}
.plugin-container a.select2-choice,
.plugin-container ul.select2-choices,
.plugin-container .select2-container-multi .select2-choices {
    background: var(--dt-selection-color-light);
    border-color: var(--d3neutralLighterAlt);
    border-width: 2px!important;
    height: 40px;
}
.plugin-container.plain a.select2-choice,
.plugin-container.plain ul.select2-choices,
.plugin-container.plain .select2-container-multi .select2-choices {
    background: none;
    border-color: #DDD;
    border-width: 1px!important;
}
.plugin-container.plain .select2-container:hover a.select2-choice {
    background: var(--neutralLighter);
}

.plugin-container .select2-container .select2-choice > .select2-chosen {
    display: flex;
    align-items: center;
    height: 100%;
}
.plugin-container .select2-container:hover a.select2-choice {
    background: var(--dt-selection-color-dark2);
}
.plugin-container .select2-container.select2-dropdown-open .select2-choice {
    box-shadow: none;
    border-color: var(--plugin-primary-color);
    background: none;
}
.plugin-container .select2-container.select2-container-active .select2-choice {
    box-shadow: none;
}
.plugin-container .select2-container .select2-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: none;
    background: none;
}
.plugin-container .select2-container .select2-arrow .select2-caret {
    transition: transform 0.3s ease-in;
}
.plugin-container .select2-container.opensRight .select2-arrow > .select2-caret {
    transform: rotate(-90deg);
}
.plugin-container .drop-valid div.select2-container ul.select2-choices,
.plugin-container .drop-valid div.select2-container a.select2-choice {
    background: #e6ffe6!important;
}
/* invalid select2 drop*/
.plugin-container .drop-invalid div.select2-container ul.select2-choices,
.plugin-container .drop-invalid div.select2-container a.select2-choice {
    background: rgba(255, 0, 0, 0.6)!important;
    opacity: 0.6;
    pointer-events: none!important;
}
.plugin-container .drop-invalid div.select2-container ul.select2-choices input.select2-default,
.plugin-container .drop-invalid div.select2-container a.select2-choice .select2-chosen{
    opacity: 0;
}

.plugin-container .drop-invalid div.select2-container ul.select2-choices li.select2-search-field:before,
.plugin-container .drop-invalid div.select2-container a.select2-choice {
    content: 'Not allowed';
    padding-left: 10px;
    color: #FFF;
}
.plugin-container .drop-valid.hovered div.select2-container ul.select2-choices,
.plugin-container .drop-valid.hovered div.select2-container a.select2-choice {
    background: inherit;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}
.plugin-container .select2-container-multi .select2-choices .select2-search-choice {
    padding: 3px 18px 3px 5px;
    background: #fff;
}
.plugin-container .select2-container-multi .select2-search-choice-close {
    left: unset;
}

table.table-border-none td {
    border: none;
}

.plugin-autofill {
    /*min-height: 150px;*/
    height: 100%;
    transition: background-color 0.3s ease-in;
    min-height: 250px;
    overflow: auto;
}
.plugin-autofill:not(.isEditing) {
    border: 1px solid #DDD;
    padding: 10px;
}
.plugin-autofill:not(.isEditing):hover {
    background-color: var(--d3neutralLighterAlt);
}

.plugin-autofill .autofill-contents:empty:after {
    content: attr(data-ph);
    color: dimgrey;
}

.pl-divider {width: 100%;margin: 5px 0;border-bottom: 1px solid #DDD;}




.chrome-tabs {
    --color-gray-rgb: 32, 33, 36;
    --font-color-gray: rgb(var(--color-gray-rgb));
    --bg-on-hover-color-rgb: 232, 234, 237;
    --bg-color-on-hover: rgb(var(--bg-on-hover-color-rgb));
    --selected-color-rgb: 25, 103, 210;
    --selected-font-color: rgb(var(--selected-color-rgb));
    --selected-bg-rgb: 232, 240, 254;
    --selected-bg-color: rgb(var(--selected-bg-rgb));
    --animation-start-color: rgb(17, 76, 123);
    --animation-end-color: rgb(124, 187, 238);
}

.chrome-tabs {
    width: calc(100%);
    height: calc(100%);
    min-height: calc(350px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.chrome-tabs .ct-tab-list-item {
    width: calc(100%);
    min-height: calc(40px);
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--font-color-gray);
    border-radius: 0 25px 25px 0;
    overflow: hidden;
    position: relative;
}

.chrome-tabs .ct-tab-list-item * {
    pointer-events: none;
}

.chrome-tabs .ct-tab-list-item:hover {
    background-color: var(--bg-color-on-hover);
    cursor: pointer;
}

.chrome-tabs .ct-tab-list-item.ct-selected {
    color: var(--selected-font-color);
    background-color: var(--selected-bg-color);
}

.chrome-tabs .ct-animating-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.32;
    pointer-events: none;
    animation: expand 0.25s linear 1,
    bg-change 0.25s linear 1;
    will-change: width, height, transform, background-color;
}

@keyframes expand {
    0% {
        height: 100px;
        width: 100px;
        margin: -50px 0px 0px -50px;
    }

    100% {
        height: 400px;
        width: 400px;
        margin: -200px 0px 0px -200px;
    }
}

@keyframes bg-change {
    0% {
        background-color: var(--animation-start-color);
    }

    100% {
        background-color: var(--animation-end-color);
    }
}

.drop-map .remove-map {
    position: absolute;
    right: -12px;
    top: -15px;
    padding: 4px;
    z-index: 2;
    color: grey;
    cursor: pointer;
}
.drop-map .remove-map:hover {
    color: red;
}
.drop-map {
    padding: 8px 2px;
    width: 100%;
    margin-right: 10px;
}
.drop-map .label {
    word-wrap: break-word;
    display: block;
    white-space: normal;
}
.pl-droppable {
    transition: border 0.2s ease-in;
}
.pl-droppable.hovered, .pl-droppable.pl-drop-over,  .pl-droppable.fulfilled  {
    background: #e6ffe6!important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}
.pl-droppable.pl-drop-valid {
    border-color: green!important;
}
.pl-droppable[data-required="true"]
.pl-droppable {
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 7px;
}
.pl-droppable.pl-drop-invalid {
    border-color: rgba(255, 0, 0, 0.6)!important;
    cursor: not-allowed;
}
.pl-droppable.pl-drop-invalid > * {
    opacity: 0.4!important;
    pointer-events: none;
}
.pl-droppable.pl-drop-invalid .ip-type {
    display: block!important;
}
.pl-dragged-clone {
    z-index: 3000;
}

.pl-draggable {
    cursor: move;
    transition: background-color 0.3s ease-in;
}
.pl-draggable:hover {
    background: var(--d3neutralLighterAlt)!important;
}
li.pl-draggable .handsontable_container .ht_master {
    width: 100%!important;
}
.pl-dragged-clone {
    z-index: 3000;
    width: 400px;
    border: 1px solid #DDD;
    box-shadow: var(--plugin-box-shadow-lighter);
    background: #FFF;
    padding: 10px;
}

.d3view-data-groups .data-groups-body {
    display: flex;
    flex-wrap: wrap;
}
.d3view-data-groups .sl-sidebar-item {
    margin: 10px;
    width: calc(50% - 20px);
}

.ui-layout-container.plugin-layout .ui-layout-west {
    background-color: transparent!important;
    box-shadow: none!important;
}
.ui-layout-container.plugin-layout > div.ui-layout-pane {
    height: 100%!important;
    padding: 10px!important;
    border: none!important;
    border-right: 1px solid #DDD!important;
    background: unset!important;
}
.ui-layout-container.plugin-layout > div.ui-layout-pane:last-child {
    border-right: none!important;
}

.ui-layout-container[data-style="modern"] .ui-layout-resizer {
    background: rgb(221, 221, 221)!important;
}
.ui-layout-container[data-style="modern"] .ui-layout-toggler {
    background: rgb(170, 170, 170)!important;
    display: block!important;
}

.tox-autocompleter {
    z-index: 200;
}

.generic-collection-sidebar .collection-body > [data-id] {
    border: 1px solid #DDD;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lightest);
}
.generic-collection-sidebar .d3view-filters {
    height: auto;
}
.generic-collection-sidebar .div-pagination {
    float: right;
}

/** Added by shashank2104 on 02/20/2026 at 11:15 PM - modern pagination styles scoped under div.div-pagination **/
div.div-pagination .paginationjs {
    line-height: 1.4;
    font-size: var(--pag-font-size);
    box-sizing: border-box;
}
div.div-pagination .paginationjs:after {
    display: table;
    content: " ";
    clear: both;
}
div.div-pagination .paginationjs .paginationjs-pages {
    float: left;
}
div.div-pagination .paginationjs .paginationjs-pages ul {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    border: 1px var(--pag-border) solid;
    border-radius: var(--pag-radius);
    overflow: hidden;
}
div.div-pagination .paginationjs .paginationjs-pages li {
    float: left;
    border: none;
    border-right: 1px solid var(--pag-border);
    list-style: none;
    margin: 0;
}
div.div-pagination .paginationjs .paginationjs-pages li:last-child {
    border-right: none;
}
div.div-pagination .paginationjs .paginationjs-pages li > a,
div.div-pagination .paginationjs .paginationjs-pages li > span {
    min-width: var(--pag-min-width);
    height: var(--pag-height);
    line-height: var(--pag-height);
    display: block;
    background: var(--pag-bg);
    font-size: var(--pag-font-size);
    color: var(--pag-text);
    text-decoration: none;
    text-align: center;
    padding: 0 10px;
    transition: var(--pag-transition);
    border: none;
    box-sizing: border-box;
}
div.div-pagination .paginationjs .paginationjs-pages li > a:hover,
div.div-pagination .paginationjs .paginationjs-pages li:not(.disabled):not(.active) > a:focus {
    background: var(--pag-bg-hover);
    color: var(--pag-text);
}
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-prev {
    border-right: 1px solid var(--pag-border);
}
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-prev > a,
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-prev > span {
    border-radius: var(--pag-radius-first);
}
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-next {
    border-left: 1px solid var(--pag-border);
}
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-next > a,
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-next > span {
    border-radius: var(--pag-radius-last);
}
div.div-pagination .paginationjs .paginationjs-pages li.active > a,
div.div-pagination .paginationjs .paginationjs-pages li.active > span {
    background: var(--pag-bg-active);
    color: var(--pag-text-active);
    font-weight: 500;
    cursor: default;
}
div.div-pagination .paginationjs .paginationjs-pages li.paginationjs-ellipsis > span {
    color: var(--pag-text-disabled);
    cursor: default;
    pointer-events: none;
}
div.div-pagination .paginationjs .paginationjs-pages li.disabled > a,
div.div-pagination .paginationjs .paginationjs-pages li.disabled > span {
    color: var(--pag-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

div.pl-absolute-modal.modal {
    display: block;
    position: relative;
}
div.pl-absolute-modal.modal > .modal-dialog,
div.pl-absolute-modal.modal > .modal-diagog > .modal-content {
    height: 100%;
    margin: 0;
    width: 100%;
}
div.pl-absolute-modal.modal > .modal-dialog > .modal-content > .modal-body {
    height: calc(100% - 120px);
    min-height: 100px;
}
div.pl-absolute-modal.modal > .modal-dialog > .modal-content > div {
    padding: 10px;
}

/** Dynamic Tree **/
.dynamic-tree .plot-txt {
    cursor: pointer;
}

.dynamic-tree .folder-panes {
    display: flex;
    overflow: auto;
}
.dynamic-tree .dtree-pane {
    flex: 0 1 25%;
    margin-right: 4px;
    border: 1px solid #DDD;
    overflow: auto;
    min-width: 250px;
    position: relative;
}
.dynamic-tree .dtree-pane li.list-group-item > a {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.dynamic-tree .dtree-pane li.list-group-item > a > .toggle-node {
    margin-right: 5px;
    color: steelblue;
}
.dynamic-tree .dtree-pane li.list-group-item.active > a {
    color: #FFF;
}
.dynamic-tree .dtree-pane li.list-group-item.active > a .toggle-node {
    color: #FFF;
}
.dynamic-tree .dtree-pane .remove-pane {
    opacity: 0;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
}
.dynamic-tree .dtree-pane:first-child .remove-pane {
    display: none!important;
}
.dynamic-tree .dtree-pane:hover .remove-pane {
    opacity: 1;
}


.pl-fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    min-inline-size: min-content;
    border-width: 2px;
    border-style: groove;
    border-color: #DDD;
    border-image: initial;
}
.pl-fieldset.pl-fieldset-mild {
    border-width: 1px;
}
.pl-fieldset legend {
    width: auto;
    margin-bottom: 0;
    border-bottom: none;
    padding: inherit;
}

.bs-container.bootstrap-select.-newton.newton-operations-to-add {
    z-index: 2000;
}
.bootstrap-select.-newton.newton-operations-to-add .worker-name {
    font-weight: 400;
    font-variant: small-caps;
}

.excelresponseparser .vis-list > .vis-item {
    flex: 0 0 70px;
    cursor: pointer;
}
.excelresponseparser .vis-list > .vis-item img {
    height: 45px;
    padding: 5px;
    cursor: pointer;
}
.excelresponseparser .vis-list::-webkit-scrollbar-thumb,
.excelresponseparser .vis-list::-webkit-scrollbar-track {
    background-color: transparent;
}
.excelresponseparser .vis-list:hover::-webkit-scrollbar-track {
    background-color: #eee;
}
.excelresponseparser .vis-list:hover::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}
.excelresponseparser .scroll_tabs_container div.scroll_tab_inner span,
.excelresponseparser .scroll_tabs_container div.scroll_tab_inner li {
    padding: unset!important;
    line-height: unset;
    font-size: unset;
    color: unset!important;
    background-color: unset!important;
}

div.workflow .scroll_tabs_container div.scroll_tab_inner span,
div.workflow .scroll_tabs_container div.scroll_tab_inner button,
div.workflow .scroll_tabs_container div.scroll_tab_inner div {
    padding: unset!important;
    color: unset!important;
    background-color: unset!important;
}

div.workflow .scroll_tabs_container div.scroll_tab_inner > * {
    display: inline;
}
.excelresponseparser .scroll_tabs_container,
div.workflow .scroll_tabs_container {
    /* display: flex; */
    /* align-items: center; */
    margin-bottom: 0;
    width: 100%;
}


.excelresponseparser .worksheetbtns.scroll_tabs_container div.scroll_tab_inner label {
    padding: unset!important;
    /*width: 125px;*/
    flex: 1 1 125px;
    padding: 0 10px!important;
    height: 30px;
    line-height: unset;
    background: #f5f5f5!important;
    color: #222;
    text-shadow: none;
    border: none;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 0;
}
.excelresponseparser .worksheetbtns.scroll_tabs_container div.scroll_tab_inner {
    display: flex;
    align-items: center;
}
.excelresponseparser .worksheetbtns.scroll_tabs_container div.scroll_tab_inner label.active,
.excelresponseparser .worksheetbtns.scroll_tabs_container div.scroll_tab_inner label:focus {
    background: #fff!important;
    border: 1px solid #DDD!important;
    outline: none;
}
.excelresponseparser .worksheetbtns.scroll_tabs_container div.scroll_tab_inner label input {
    height: 14px;
    margin-right: 10px
}

.excelresponseparser .sheet_buttons span.selection-count {
    min-width: 150px;
}
.pl-input-xs {
    height: 26px;
    font-size: 12px;
    line-height: 1.5;
}

.pl-close-box {
    position: absolute;
    right: -16px;
    top: -19px;
    font-size: 1.6em;
    color: slategray;
    cursor: pointer;
}
.pl-rounded-input {
    border-radius: 22px!important;
}

.pl-grad-background {
    border-radius: 0.5em;
    background: linear-gradient(180deg,#44474a,#2f3132);
    box-shadow: 4px 4px 16px 0 rgba(0,0,0,.25), inset 1px 1px 1px 0 hsla(0,0%,100%,.1);

}

.pl-form-item {
    display: flex;
    align-items: center;
}
.pl-form-item > div:first-child {
    flex: 0 0 150px;
    width: 150px;
}

.ml-model-container .pl-ml-prediction[data-viewtype="simple"] .pred-sliders {
    display: flex;
    flex-wrap: wrap;
}
.ml-model-container .pl-ml-prediction[data-viewtype="simple"] .pred-sliders > div {
    width: calc(20% - 40px);
    margin-right: 20px;
    margin-bottom: 0!important;
    /* height: 10px; */
}
.ml-model-container .pl-ml-prediction[data-viewtype="simple"] .pred-sliders > div.hasSliders {
    margin-bottom: 100px!important;
}
.ml-model-container .pl-ml-prediction[data-viewtype="simple"] .pred-sliders > div .col-slider {
    display: none;
}
.ml-model-container .ml-targets ul.list-group,
.ml-model-container .ml-independents ul.list-group {
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.ml-model-container .ml-targets li.list-group-item,
.ml-model-container .ml-independents li.list-group-item {
    border: none;
    flex: 0 0 33%;
    word-break: break-all;
    margin-bottom: 0;
}
.ml-model-container .ml-targets li.list-group-item.hasPopoverOpen .ml-column-dist,
.ml-model-container .ml-independents li.list-group-item.hasPopoverOpen .ml-column-dist {
    opacity: 1;
}

.ml-model-popover .popover-content {
    height: 300px;
    width: 300px;
}

.ml-targets li.list-group-item .ml-column-dist,
.ml-independents li.list-group-item .ml-column-dist {
    opacity: 0;
}
.ml-targets li.list-group-item:hover .ml-column-dist,
.ml-independents li.list-group-item:hover .ml-column-dist {
    opacity: 1;
}
.pl-ml-prediction .pred-input-container .table-view {
    aspect-ratio: unset;
}
div.ml-scores-popover {
    max-width: unset;
}

.ml-model-container .ml-model-box-sparkline {
    position: relative;
}
.ml-model-container .ml-model-box-sparkline .min-val {
    position: absolute;
    left: 0;
    top: -6px;
    font-size: 75%;
}
.ml-model-container .ml-model-box-sparkline .max-val {
    position: absolute;
    right: 0;
    top: -6px;
    font-size: 75%;
}
.ml-model-container.processing {
    cursor: progress;
}
.ml-model-container.processing:after {
    content: "Processing model data. Please wait...";
    font-size: 1.4em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: dimgrey;
    pointer-events: none;
}
.ml-model-container .doe-viz-container .simlytiks.sl-viz-preview {
    position: absolute;
}

.ml-model-container .nested-table th {
    word-break: break-word;
}

/** RB-633 - ML Model -> Multi target model issues **/
.ml-model-container .pred-chart-container {
    overflow: auto;
}
.ml-model-container .pred-chart-container .ml-multi-curves > div {
    max-height: 60vh;
    border: 1px solid #DDD;
}
.ml-model-container .pred-chart-container .ml-multi-curves {
    gap: 5px;
    overflow: auto;
}

div.simlytiks .sl-side-bar .sl-sc-table .paginationjs .paginationjs-pages ul {
    display: flex;
}


div.pl-schema-mapper .schema-mapper-dest tbody tr {
    /*height: 60px;*/
}
div.pl-schema-mapper .schema-mapper-dest tbody tr.mapped td:first-child {
    border-left-color: #5c8b5c;
    border-left-width: 3px;
}
div.pl-schema-mapper .schema-mapper-dest tbody tr th,
div.pl-schema-mapper .schema-mapper-dest tbody tr td {
    vertical-align: middle;
}

div.pl-schema-mapper .schema-mapper-dest tbody tr .pl-droppable {
    height: 50px;
    display: flex;
    align-items: center;
    border: 1px solid #DDD;
    padding: 10px;
}
div.pl-schema-mapper .pl-schema-mapper-body:not(.allowManualInputs) .schema-mapper-dest tbody tr .pl-droppable.empty:after {
    content: 'Drop here';
    color: dimgrey;
}
/*div.pl-schema-mapper .schema-mapper-dest tbody tr .pl-droppable input.form-control {*/
/*    box-shadow: none;*/
/*    border: none;*/
/*    padding: 0;*/
/*    background: unset;*/
/*}*/
div.simlytiks.pl-schema-mapper .list-group-item {
    padding: 10px 15px;
}

/*div.pl-schema-mapper .pl-schema-mapper-body > div {*/
/*    flex: 0 0 calc(33% - 10px);*/
/*}*/

.pl-schema-mapper-body li.ui-draggable-dragging {
    pointer-events: none;
}

.pl-key-mapper-editor table tbody tr td:first-child {
}
.pl-key-mapper-editor table tbody tr.pl-hasValue td:first-child {
    border-left-color: green;
    border-left-width: 3px;
}

.fb-independent-input .d3view-inputsBuilder {
    min-height: unset;
}
.fb-independent-input div.d3view-inputsBuilder .inputs-list {
    padding: 0;
}
.fb-independent-input div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item > div.row {
    padding: 0;
}
.fb-independent-input div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item .input-value-container {
    padding: 0;
}
.fb-independent-input div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items {
    padding: 0;
    overflow-x: hidden;
    white-space: normal;
}
div.pl-schema-mapper .schema-mapper-dest tbody tr .pl-droppable .sc-mapper-manual {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="dataset"] .pl-droppable .sc-mapper-manual,
div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="keyvalue"] .pl-droppable .sc-mapper-manual,
div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="define_table"] .pl-droppable .sc-mapper-manual {
    min-height: 200px;
}

div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="dataset"] .pl-droppable .sc-mapper-manual,
div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="keyvalue"] .pl-droppable .sc-mapper-manual,
div.pl-schema-mapper .schema-mapper-dest tbody tr[data-type="define_table"] .pl-droppable .sc-mapper-manual {
    min-height: 200px;
}
div.pl-schema-mapper .schema-mapper-dest tbody tr .pl-droppable .sc-mapper-manual .fb-independent-input {
    flex: 1 1 auto;
}
div.pl-schema-mapper .pl-schema-mapper-body.allowManualInputs .pl-droppable {
    border: none;
    height: auto;
    display: flex;
    align-items: center;
}

div.pl-generic-selections .label {
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
}
div.pl-generic-selections .label.ui-selected[data-id] {
    background-color: rebeccapurple;
}
.pl-generic-selections .item-panel {
    height: 200px;
    cursor: pointer;
    flex: 0 0 calc(33% - 10px);
    margin: 5px;
    border: 1px solid #DDD;
    border-radius: 5px;
}
.pl-generic-selections .item-panel.ui-selected {
    border-color: steelblue;
    border-width: 3px;
}
.pl-generic-selections .items-list {
    border: 1px solid #DDD;
}
.pl-generic-selections .selections-container {
    border: 1px solid #DDD;
    border-left: none;
}
.pl-generic-selections .selections-list li[data-id], .pl-generic-selections .items-list .list-container ul li[data-id] {
    border-left: none;
    border-right: none;
    box-shadow: none;
    cursor: pointer;
    position: relative;
    height: 50px;
}
.pl-generic-selections .selections-list li[data-id] .item-name, .pl-generic-selections .items-list .list-container ul li[data-id] .item-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 100%;
}
.pl-generic-selections .selections-list li[data-id].dummy .item-name {
    color: red;
}
.pl-generic-selections .selections-list li[data-id] .item-name {
    width: calc(100% - 30px);
}
.pl-generic-selections .selections-list li[data-id] a {
    margin-right: 20px;
}
.pl-generic-selections .items-list .list-container ul li[data-id]:hover .item-name {
    width: calc(100% - 100px);
}
.pl-generic-selections .items-list .list-container ul li[data-id].hasDataTypeCb:hover .item-name {
    width: calc(100% - 150px);
}
.pl-generic-selections .items-list .list-container ul li[data-id]:hover,
.pl-generic-selections .selections-list li[data-id]:hover {
    background-color: #f5f5f5;
}
.pl-generic-selections .items-list .list-container ul li[data-id].ui-selected:after {
    content: '\f058';
    color: green;
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.pl-generic-selections .select-btn {
    display: none;
}
.pl-generic-selections li[data-id]:hover .select-btn {
    display: block;
}
.pl-generic-selections .dataTypeCb {
    display: none;
}
.pl-generic-selections li[data-id]:hover .dataTypeCb {
    display: block;
}
.pl-generic-selections .remove-selected {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 10px;
}

/*.pl-generic-selections .simple-list-view li.ui-selecting {*/
/*    background-color: var(--dt-selection-color);*/
/*}*/

.pl-generic-selections .simple-list-view .items-container > li {
    display: flex;
    align-items: center;
}
.pl-generic-selections .simple-list-view .items-container > li.ui-selecting,
.pl-generic-selections .simple-list-view .items-container > li.ui-selected {
    text-shadow: 0 -1px 0 #286090;
    background-image: -webkit-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -o-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
    background-image: linear-gradient(to bottom, #337ab7 0, #2b669a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    background-repeat: repeat-x;
    border-color: #2b669a;
}

.pl-generic-selections .simple-list-view .items-container > li.ui-selecting > a,
.pl-generic-selections .simple-list-view .items-container > li.ui-selected > a {
    color: #fff;
}
.pl-generic-selections .simple-list-view button[data-action] {
    /*display: none;*/
}
.pl-generic-selections .simple-list-view > li:hover button[data-action] {
    /*display: inline-block;*/
}

.rm-generic-selections .d3view-filters {
    height: auto;
}
.rm-generic-selections .rm-filters {
    height: auto!important;
    margin-bottom: 10px;
}

.twitter-typeahead .tt-menu.full-w {
    width: 100%!important;
}

.pl-multi-input-edit-view .users-ht {
    overflow: auto;
    padding: 0 10px;
}
.pl-multi-input-edit-view .users-table {
    table-layout: fixed;
}
.pl-multi-input-edit-view .users-table tr.ui-sortable-placeholder {
    height: 100px;
    background-color: lightyellow;
    visibility: visible!important;
    display: table-row!important;
}
.pl-multi-input-edit-view .users-table > tbody > tr  {
    height: 100px;
}
.pl-multi-input-edit-view .users-table > thead > tr > th {
    width: 300px;
}
.pl-multi-input-edit-view .users-table > tbody > tr .d3view-inputsBuilder {
    border: none;
    min-height: unset;
}

.pl-multi-input-edit-view .users-table > tbody > tr > td:first-child {
    /*border-left: 4px solid transparent;*/
    border-left: 1px solid #DDD;
}
.pl-multi-input-edit-view .users-table > tbody > tr.isValid > td:first-child {
    border-left: 4px solid green;
}
.pl-multi-input-edit-view .users-table > tbody > tr.hasError > td:first-child {
    border-left: 4px solid red;
}

.pl-generic-fb .d3view-inputsBuilder {
    border: none!important;
    min-height: unset;
}
.pl-generic-fb li.field-item {
    border-bottom: none!important;
}
.pl-generic-fb .d3view-inputsBuilder li.field-item:last-child {
    border-bottom: none!important;
}
.pl-generic-fb .d3view-inputsBuilder ul.field-items {
    padding: 0!important;
}

.pl-row-details-sidebar .pl-generic-fb .d3view-inputsBuilder li.field-item > .row {
    padding: 7px 0!important;
}
.pl-row-details-sidebar .pl-generic-fb .d3view-inputsBuilder li.field-item {
    border-left: none!important;
}
.pl-row-details-sidebar .pl-generic-fb .d3view-inputsBuilder li.field-item .input-value-container,
.pl-row-details-sidebar .pl-generic-fb .d3view-inputsBuilder .inputs-list{
    padding: 0!important;
}

.plugin-app-mapper .app-mapper-legends {
    height: 60px;
    padding: 10px;
}

.plugin-app-mapper .app-mapper-legends .legends-wrapper {
    position: relative;
}

.pl-ml-prediction .pred-container {
    transition: background-color 0.3s ease-in;
}
.pl-ml-prediction .pred-container.dz-drag-hover {
    background-color: #e6ffe6!important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.pl-ml-prediction .pred-container.isPredicting .pred-sliders .col-slider-container {
    cursor: not-allowed;
    opacity: 0.6;
}
.pl-ml-prediction .pred-container.isPredicting .pred-sliders .col-slider-container > * {
    pointer-events: none;
}

.pl-label-inline-toggle span {
    position: relative;
    bottom: 3px;
}
.pl-label-inline-toggle input {
    margin-right: 5px;
}
.pl-label-inline-toggle {
    margin-bottom: 0;
}


.pl-generic-sparkline > .text-right {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
}
.pl-generic-sparkline:hover > .text-right {
    opacity: 1;
}

.sim-test-generic-compare .pl-generic-fb .d3view-inputsBuilder li.field-item > div.row {
    padding: 12px 0!important;
}
.sim-test-generic-compare .pl-generic-fb .d3view-inputsBuilder {
    min-height: unset;
}
/*.sim-test-generic-compare .pl-generic-fb .d3view-inputsBuilder li.field-item {*/
/*    height: 150px!important;*/
/*}*/
.sim-test-generic-compare .remove-sp {
    cursor: pointer;
}
.sim-test-generic-compare .remove-sp:hover {
    color: red;
}
.sim-test-generic-compare div.table-responsive {
    min-height: 250px;
}
.sim-test-generic-compare .source-fb.pl-generic-fb .d3view-inputsBuilder li.field-item > .row {
    padding: 0;
}
.sim-test-generic-compare .source-fb .select2-container-multi .select2-choices .select2-search-choice {
    background: transparent;
    border: none;
    box-shadow: none;
}
.sim-test-generic-compare .source-fb .select2-container-multi .select2-choices .select2-search-choice .pl-label-modern {
    display: flex;
    align-items: center;
}
.sim-test-generic-compare .source-vals .item-buttons,
.sim-test-generic-compare .source-vals .open-val_ {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}
.sim-test-generic-compare .source-vals .source-item .val-info.opened {
    color: #428bca;
}
.sim-test-generic-compare .source-vals .source-item .pl-label-modern {
    color: #555;
    width: 100%;
    display: flex;
    align-items: center;
    height: 35px;
}
/*.sim-test-generic-compare .source-vals .source-item:hover .item-name {*/
/*    width: calc(100% - 60px);*/
/*}*/
/*.sim-test-generic-compare .source-vals .source-item .val-view .btn-group {*/
/*    display: none;*/
/*}*/
/*.sim-test-generic-compare .source-vals .source-item:hover .val-view .btn-group,*/
/*.sim-test-generic-compare .source-vals .source-item.hasDDOpen .val-view .btn-group {*/
/*    display: inline-block;*/
/*    flex: 0 0 72px;*/
/*}*/

.sim-test-generic-compare .source-vals .source-item .item-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
}
.sim-test-generic-compare .source-vals .source-item .item-name:hover {
    text-decoration: underline;
}
.sim-test-generic-compare .source-vals .source-item {
    margin: 5px;
    width: calc(33% - 10px);
    flex: 0 0 calc(33% - 10px);
    text-align: left;
}
.sim-test-generic-compare .rest-dd .source-item {
    width: calc(100% - 10px);
    padding: 0 15px;
    margin-bottom: 15px;
}
.sim-test-generic-compare .source-item.status-success .status-pill {
    background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
}
.sim-test-generic-compare .source-item .status-pill {
    border-radius: 20px;
    transition: width 0.3s ease-in;
    width: 0;

    height: 6px;
    bottom: 0px !important;
    top: unset !important;
}
.sim-test-generic-compare .source-item.status-warning .status-pill {
    background-image: linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%);
}
.sim-test-generic-compare .source-item.status-danger .status-pill {
    background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
}
.sim-test-generic-compare .source-item.status-danger.no-data .status-pill {
    background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
    width: 100%;
}
/*.sim-test-generic-compare .source-vals .source-item.text-white .item-name,*/
/*.sim-test-generic-compare .source-vals .source-item.text-white .item-name,*/
/*.sim-test-generic-compare .source-vals .source-item.text-white .item-name {*/
/*    color: #FFF;*/
/*}*/
/*.sim-test-generic-compare .source-vals .source-item .configure-val,.sim-test-generic-compare .source-vals .source-item .val-info,*/
/*.sim-test-generic-compare .source-vals .source-item .open-val {*/
/*    color: #FFF;*/
/*}*/


.sim-test-generic-compare .source-vals .source-item.ui-sortable-placeholder {
    width: 150px;
    height: 30px;
    background-color: yellow;
    visibility: visible!important;
    border-radius: 20px;
}
.sim-test-generic-compare .source-vals .source-item .item-buttons {
    position: absolute;
    right: 0;
    top: -10px;
}
.sim-test-generic-compare .source-vals .source-item:hover:not(.isEditing) .item-buttons,
.sim-test-generic-compare .source-vals .source-item.hasDDOpen:not(.isEditing) .item-buttons,
.sim-test-generic-compare .source-vals .source-item:hover .open-val_,
.sim-test-generic-compare .source-vals .open-val_.open {
    opacity: 1;
    pointer-events: all;
}
.sim-test-generic-compare .source-vals .source-item:hover .remove-val:hover,
.sim-test-generic-compare .source-vals .source-item:hover .file-editor:hover {
    color: red;
}

.sim-test-generic-compare .source-vals .source-item .val-view {
    border: 1px solid transparent;
}
.sim-test-generic-compare .source-vals .source-item .val-view:hover {
    border:1px solid  #428bca;
}

/*.sim-test-generic-compare .source-vals .source-item .val-view:hover > a {*/
/*    background: #428bca;*/
/*    color: #FFF;*/
/*}*/
.sim-test-status-popover {
    width: 450px!important;
    height: 400px;
}
.sim-test-status-popover .popover-content {
    overflow: auto;
    height: 100%;
    padding: 0;
}
.sim-test-generic-compare .rest-dd {
    position: absolute;
    right: 60px;
    top: 10px;
    width: 100px;
}
.sim-test-generic-compare .import-configs,
.sim-test-generic-compare .export-configs,
.sim-test-generic-compare .saved-configs-dd {
    /*display: none;*/
}

/*.sim-test-generic-compare  .sources-divider:after {*/
/*    content: 'VS.';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: calc(50% - 1px);*/
/*    color: #AAA;*/
/*    font-size: 1.4em;*/
/*    pointer-events: none;*/
/*}*/
.sim-test-generic-compare .pl-generic-fb .form-flex {
    height: auto!important;
}
.sim-test-generic-compare .match-maker .to-label-container {
    height: 60px;
}
.sim-test-generic-compare .match-maker tbody td {
    vertical-align: middle;
}
.sim-test-status-popover .popover-content .tab-pane .pl-label-modern {
    white-space: normal;
}
/*.sim-test-generic-compare .match-maker tbody td.has-quantity {*/
/*    border-left: 3px solid orange;*/
/*}*/
/*.sim-test-generic-compare .match-maker tbody td.has-scale-factor {*/
/*    border-left: 3px solid blue;*/
/*}*/
.sim-test-generic-compare .pl-generic-fb div.d3view-inputsBuilder li.field-item .input-name .field-name {
    font-size: unset;
}
.sim-test-generic-compare .test-mm {
    /*font-size: 90%;*/
    height: calc(100% - 90px);
}
.sim-test-generic-compare .test-mm {
    container-type: inline-size;
    container-name: sim-test-compare;
}
@container sim-test-compare (min-width: 1400px) {
    .additional-column-generator {
        /*display: flex;*/
    }
    .additional-column-generator > .form-group {
        flex: 0 0 calc(50% - 5px);
        margin-right: 2.5px;
        overflow: hidden;
    }
}
@container sim-test-compare (max-width: 1920px) {
    .btn-txt {
        display: none;
    }
}
.sim-test-generic-compare[data-compare-type="files"] .mm-container,
.sim-test-generic-compare[data-compare-type="files"] .source-additionals-container {
    /** make disabled **/
    pointer-events: none;
    opacity: 0.4;
}
.dropdown-menu.w-350 {
    width: 350px;
}
.sim-test-generic-compare .source-item.edited .configure-val {
    color: darkorange;
}
.sim-test-generic-compare .test-mm tr.to-list-row {
    height: 80px!important;
}


/** SIMTESTCOMPARE - SIDE-BY-SIDE **/
.sim-test-generic-compare .side-by-side .test-mm {
    /*font-size: 90%;*/
    height: 100%;
}

div.sim-test-generic-compare .side-by-side  .item-fb.pl-generic-fb li.field-item {
    flex: 0 0 100%!important;
}


div.sim-test-item-ops.d3view-plugins-sidebar {
    padding: 0;
}
div.sim-test-item-ops.d3view-plugins-sidebar .op-item {
    border: 1px solid #DDD;
    margin-bottom: 15px;
}

div.sim-test-item-ops.d3view-plugins-sidebar .operation-fb.pl-generic-fb .d3view-inputsBuilder {
    /* min-height: unset; */
}

/** Added by shashank2104 on 01/23/2026 at 09:20 AM - https://xfinity.atlassian.net/browse/DVFIV-1900 - Response Comparison Columns View styles **/
.d3view-response-comparison-columns {
    padding: 15px;
    overflow: auto;
}
.d3view-response-comparison-columns .rcc-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100%;
}
.d3view-response-comparison-columns .rcc-header-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}
.d3view-response-comparison-columns .rcc-col-header {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 300px;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFF;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.d3view-response-comparison-columns .rcc-col-header-icon {
    font-size: 24px;
    margin-bottom: 8px;
}
.d3view-response-comparison-columns .rcc-col-header-icon .rcc-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
}
.d3view-response-comparison-columns .rcc-col-header-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.d3view-response-comparison-columns .rcc-col-header-count .badge {
    background: rgba(255,255,255,0.25);
    color: #FFF;
}
.d3view-response-comparison-columns .rcc-common-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}
.d3view-response-comparison-columns .rcc-common-header {
    padding: 12px 15px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #FFF;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.d3view-response-comparison-columns .rcc-common-header:hover {
    opacity: 0.95;
}
.d3view-response-comparison-columns .rcc-common-header .badge {
    background: rgba(255,255,255,0.3);
    color: #FFF;
}
.d3view-response-comparison-columns .rcc-common-body {
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}
.d3view-response-comparison-columns .rcc-common-responses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.d3view-response-comparison-columns .rcc-common-response-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FFF;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.2s ease;
}
.d3view-response-comparison-columns .rcc-common-response-item:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}
.d3view-response-comparison-columns .rcc-common-response-item .rcc-rsp-icon {
    color: #6c757d;
}
.d3view-response-comparison-columns .rcc-common-response-item .rcc-rsp-type {
    font-size: 10px;
    padding: 2px 6px;
}
.d3view-response-comparison-columns .rcc-columns-body {
    flex: 1;
}
.d3view-response-comparison-columns .rcc-columns-label {
    padding: 10px 0;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 15px;
}
.d3view-response-comparison-columns .rcc-columns-row {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: flex-start;
}
.d3view-response-comparison-columns .rcc-column {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 300px;
    background: #FFF;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}
.d3view-response-comparison-columns .rcc-column-header {
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.d3view-response-comparison-columns .rcc-column-name {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-response-comparison-columns .rcc-column-body {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}
.d3view-response-comparison-columns .rcc-response-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.d3view-response-comparison-columns .rcc-response-item:hover {
    background: #e9ecef;
    transform: translateX(3px);
}
.d3view-response-comparison-columns .rcc-response-item .rcc-rsp-icon {
    color: #6c757d;
    width: 16px;
    text-align: center;
}
.d3view-response-comparison-columns .rcc-response-item .rcc-rsp-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-response-comparison-columns .rcc-no-common,
.d3view-response-comparison-columns .rcc-no-unique {
    padding: 15px;
    text-align: center;
    font-style: italic;
}


/** GENERIC DARK MODE **/
.pl-dark-mode .modal-content,
.pl-dark-mode .simlytiks,
.pl-dark-mode .dropdown-menu,
.pl-dark-mode .list-group-item,
.pl-dark-mode .peacock-manager .peacock-viewer,
.pl-dark-mode .peacock-manager .peacock-wrapper-container .peacock-controller-wrapper,
.pl-dark-mode .peacock-manager .peacock-viewer .peacock-editor-wrapper,
.pl-dark-mode .popover-content {
    background-color: var(--plugin-dark-container-bg)!important;
    color: #F8F8F8!important;
}
.pl-dark-mode .dropdown-menu {
    border-color: #FFF;
}
.pl-dark-mode .btn:not(.btn-default),
.pl-dark-mode a,
.pl-dark-mode label,
.pl-dark-mode tr,
.pl-dark-mode h4 {
    color: #FFF!important;
}
.pl-dark-mode .btn:not(.btn-default):hover {
    background-color: #FFF!important;
    color: var(--plugin-dark-container-bg)!important;
}
.pl-dark-mode .btn:not(.btn-default)[aria-expanded="true"] {
    background-color: #FFF!important;
    color: var(--plugin-dark-container-bg)!important;
}


.pl-side-by-side .col-name {
    font-weight: bold;
    text-transform: capitalize;
}
.pl-side-by-side tr[data-for-col] {
    height: 100px;
    vertical-align: middle;
}
.pl-side-by-side tr[data-for-col][data-type="curve"] {
    height: 275px;
}
.pl-side-by-side tr[data-for-col] td {
    vertical-align: middle;
}

.pl-generic-ff .d3view-filters {
    height: auto;
}

.pl-ml-prediction .pred-container {
    container-name: pl-prediction-container;
    container-type: inline-size;
}
@container pl-prediction-container (width < 400px) {
    .btn-text {
        display: none;
    }
    .lead {
        font-size: 14px;
    }
}

.pl-label-checkbox {
    height: 30px;
    display: flex;
    align-items: center;
}
.pl-label-checkbox label {
    margin-bottom: 0;
}
.pl-label-checkbox input {
    margin-top: 0;
    position: relative;
    top: 2px;
    margin-right: 5px!important;
}

button.guide_me.pl-guide-button {
    display: block!important;
    position: absolute;
    color: #FFF;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 20;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    align-items: center;
    background-image: linear-gradient(-180deg, #00D775, #00BD68);
    border: 0;
    font-size: 18px;
}
button.guide_me.pl-guide-button:hover {
    background: #00bd68;
}

button.guide_me.pl-guide-button :active,
button.guide_me.pl-guide-button :hover {
    outline: 0;
}



/** KANBAN **/
div.pl-kanban-board .board-tasks .board-container {
    margin: 10px;
    background: var(--d3neutralLighterAlt);

    border: 1px solid #DDD;
    border-radius: 6px;
    height: calc(100% - 20px);
    width: 350px;
    flex: 0 0 350px;
    /* overflow: auto; */
}
div.pl-kanban-board .board-tasks .board-header {
    margin: 0;
    padding: 10px;
}
div.pl-kanban-board .board-body {
    height: calc(100% - 46px);
    overflow: auto;
}


div.pl-kanban-board .board-tasks .board-task {
    cursor: move;
    margin: 10px 15px;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lightest);
    transition: background-color 0.2s ease-in;
    background: #FFF;
}
div.pl-kanban-board .board-tasks .board-task:hover {
    background-color: var(--d3neutralLighterAlt);
}
div.pl-kanban-board .board-tasks .board-task:hover:after {
    content: '\f58e';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: darkgrey;
}
div.pl-kanban-board .board-tasks {
    display: flex;
    overflow: auto;
}
div.pl-kanban-board .board-view {
    overflow: auto;
}
div.pl-kanban-board .board-task .task-title {
    /*font-size: 1.2em;*/
    cursor: pointer;
    white-space: normal;
    word-break: break-all;
}


.card.card-success {
    border-color: #5c8b5c;
}
.card.card-success:after {
    content: '\f058';
    font-family: FontAwesome;
    position: absolute;
    color: #5c8b5c;
    right: 10px;
    top: 2px;
}
.card.card-danger {
    border-color: rgba(217,83,79,1);
}
.card.card-danger:after {
    color: rgb(217 83 79);
}
.card.card-danger:after,
.card.card-warning:after {
    content: '\f071';
    font-family: FontAwesome;
    position: absolute;
    color: #5c8b5c;
    right: 10px;
    top: 2px;
}
.card.card-warning {
    border-color: rgb(240, 173, 78);
}
.card.card-warning:after {
    color: rgb(240 173 78);
}


/* Primary outline variant */
.btn-outline.btn-primary {
    border-color: #428bca; /* Bootstrap 3 btn-primary border */
    color: #428bca; /* Text matches border */
    text-shadow: none;
}

.btn-outline.btn-primary:hover,
.btn-outline.btn-primary:focus,
.btn-outline.btn-primary:active,
.btn-outline.btn-primary.active {
    background-color: #428bca!important; /* Fill on hover */
    border-color: #357ebd!important; /* Darker border, like btn-primary hover */
    color: #fff!important; /* White text on hover */
}

/* Success outline variant */
.btn-outline.btn-success {
    border-color: #5cb85c; /* Bootstrap 3 btn-success */
    color: #5cb85c;
    text-shadow: none;
}

.btn-outline.btn-success:hover,
.btn-outline.btn-success:focus,
.btn-outline.btn-success:active,
.btn-outline.btn-success.active {
    background-color: #5cb85c!important;
    border-color: #4cae4c!important;
    color: #fff!important;
}

/* Info outline variant */
.btn-outline.btn-info {
    border-color: #5bc0de; /* Bootstrap 3 btn-info */
    color: #5bc0de;
    text-shadow: none;
}

.btn-outline.btn-info:hover,
.btn-outline.btn-info:focus,
.btn-outline.btn-info:active {
    background-color: #5bc0de!important;
    border-color: #46b8da!important;
    color: #fff!important;
}

/* Warning outline variant */
.btn-outline.btn-warning {
    border-color: #f0ad4e; /* Bootstrap 3 btn-warning */
    color: #f0ad4e;
    text-shadow: none;
}

.btn-outline.btn-warning:hover,
.btn-outline.btn-warning:focus,
.btn-outline.btn-warning:active,
.btn-outline.btn-warning.active {
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    color: #fff!important;
}

/* Danger outline variant */
.btn-outline.btn-danger {
    border-color: #d9534f; /* Bootstrap 3 btn-danger */
    color: #d9534f;
    text-shadow: none;
}

.btn-outline.btn-danger:hover,
.btn-outline.btn-danger:focus,
.btn-outline.btn-danger:active,
.btn-outline.btn-danger.active {
    background-color: #d9534f!important;
    border-color: #c9302c!important;
    color: #fff!important;
}



/** NEW INSTANCE CONTAINER **/
.d3view-pl-new-wf-buttons .new-btn-group {
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-new-wf-buttons .new-btn-group button {
    flex: 0 0 calc(33% - 20px);
    margin: 10px;
    border-radius: 18px;
}
.d3view-pl-new-wf-buttons .new-btn-group button:hover {
    border-radius: 18px!important;
}

.pl-decimal-ol {
    list-style: decimal;
    padding-left: 30px;
}

.dv-text-viewer #gen-comp-container {
    padding: 0 20px;
}

.d3view-pl-generic-responses .ui-layout-pane {
    padding: 0!important;
}
.d3view-pl-generic-responses .ui-layout-container .ui-layout-resizer {
    background-color: #e5e5e5!important;
    cursor: row-resize!important;
}
.d3view-pl-generic-responses .ui-layout-container .ui-layout-resizer:hover {
    background-color: red!important;
}

.d3view-pl-generic-responses .ips-list > li.ui-selected {
    text-shadow: 0 -1px 0 #286090;
    background-image: -webkit-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -o-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
    background-image: linear-gradient(to bottom, #337ab7 0, #2b669a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    background-repeat: repeat-x;
    border-color: #2b669a;
}
.d3view-pl-generic-responses .ips-list  li.ui-selected a {
    color: #fff;
}

.pl-generic-selections .simple-list-view .items-container > li:not(.dragging):not(.editing):hover {
    background-color: #eee;
}
.pl-generic-selections .simple-list-view .items-container > li > a {
    text-decoration: none!important;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-generic-selections .simple-list-view .items-container > li {
    height: auto;
    border-left: 0;
    border-right: 0;
    position: relative;
    display: flex;
    align-items: center;
}
.pl-generic-selections .simple-list-view .items-container > li .drag-handle,
.pl-generic-selections .simple-list-view .items-container > li .sort-handle {
    position: absolute;
    left: 6px;
    top: 17px;
    z-index: 2;
    cursor: move;
}
.pl-generic-selections .simple-list-view .items-container > li .drag-handle {
    opacity: 0;
}
.pl-generic-selections .simple-list-view .items-container > li:not(.dragging):not(.editing):hover .drag-handle,
.pl-generic-selections .simple-list-view .items-container > li:not(.dragging):not(.editing):hover .sort-handle {
    opacity: 1;
}
.pl-generic-selections .simple-list-view .items-container > li .drag-handle:hover {
    color: red;
}

.pl-generic-selections .simple-list-view .items-container > li .item-actions.btn-group {
    display: none;
    /*position: absolute;*/
    /*right: 20px;*/
    /*top: 10px;*/
}
.pl-generic-selections .simple-list-view .items-container > li:not(.dragging):not(.editing):hover .item-actions.btn-group,
.pl-generic-selections .simple-list-view .items-container > li.hasDDOpen .item-actions.btn-group {
    display: flex;
}

.pl-text-success {
    color: var(--success-color);
}

.pl-generic-selections .simple-list-view .items-container > li .edit-name {
    display: none;
}
.pl-generic-selections .simple-list-view .items-container > li:not(.dragging):not(.editing):hover .edit-name {
    display: inline-block;
}

.pl-generic-selections .simple-list-view .items-container > li.temp-ui-selected {
    border: 1px solid #428bca;
}

/*.pl-generic-selections .simple-list-view .items-container > li.ui-selected .item-actions,*/
/*.pl-generic-selections .simple-list-view .items-container > li.ui-draggable-dragging .item-actions {*/
/*    display: none!important;*/
/*}*/

.pl-generic-selections .simple-list-view .items-container > li.ui-selected .item-actions  {
    color: #FFF;
}

.pl-mr10 {
    margin-right: 10px;
}

.pl-editable-input {
    border-color: transparent!important;
    box-shadow: none!important;
}
.pl-editable-input:focus {
    border-color: #66afe9!important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)!important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)!important;
}
.pl-editable-input:hover {
    border-color: #ddd!important;
}


.pl-body-dd.dropdown-menu {
    z-index: 2000;
    max-height: 250px;
    overflow: auto;
}


.pl-processing {
    position: relative;
}

.pl-processing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.pl-processing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: dt-spin 1s linear infinite;
    z-index: 1001;
}

@keyframes dt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ta-tag.ui-draggable-dragging {
    position: fixed;
    z-index: 20000;
}

.flex-grow-1 {
    flex-grow: 1;
    overflow: auto;
}

.anim-pulse-infinite {
    animation: pulse-infinite 0.2s infinite;
}
@keyframes pulse-infinite {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* For Bootstrap 3.x style labels */
.label-debug {
    background-color: #6c757d; /* A neutral gray, you can pick any color */
    color: #fff;
}
.label-all {
    background-color: #ccc; /* Same as .label-debug */
    color: #fff;
}

.label-error {
    background-color: #d9534f; /* Same as .label-danger */
    color: #fff;
}

.pl-ml-prediction .pred-sliders.disabledSliders > .form-group {
    margin-bottom: 10px!important;
}

.pl-ml-prediction.hasCollapsed .collapse-west {
    left: 10px;
}
.pl-ml-prediction .collapse-west {
    position: absolute;
    z-index: 10;
    top: 40px;
    left: 25%;
    margin-left: -4px;
    background: #FFF!important;
}
.pl-ml-prediction .collapse-west:hover {
    background: #f5f5f5!important;
}
.pl-ml-prediction .pl-pred-right {
    flex: 1 1 auto;
}

div.pl-row-details-sidebar table tbody td, div.pl-row-details-sidebar table tbody th {
    vertical-align: middle;
}

.flex-1 {
    flex: 1 1 auto;
}

.pl-processing {
    position: relative;
}

.pl-processing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.pl-processing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: pl-spin 1s linear infinite;
    z-index: 1001;
}
@keyframes pl-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.pl-generic-formatter .format-category-item {
    cursor: pointer;
    transition: background-color 0.2s;
}
.pl-generic-formatter .format-category-item:hover {
    background-color: #f5f5f5;
}
.pl-generic-formatter .format-category-item.active {
    background-color: #337ab7;
    border-color: #337ab7;
    color: white;
}
.pl-generic-formatter .format-category-item.active div {
    color: #e6e6e6 !important;
}
.pl-generic-formatter .sample-value {
    font-family: monospace;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px;
    margin-top: 5px;
}


.newton-slider-popover {
    z-index: 2000;
}

.btn-group > .btn-group > .btn {
    border-radius: 0!important;
}
.btn-group > .btn-group:first-child > .btn {
    border-top-left-radius: 24px!important;
    border-bottom-left-radius: 24px!important;
    border-top-right-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
.btn-group > .btn-group:last-child > .btn {
    border-top-right-radius: 24px!important;
    border-bottom-right-radius: 24px!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

div.simlytiks .dropdown-menu li.active .text-muted,
div.simlytiks .dropdown-menu li.active .text-info {
    color: #FFF;
}
div.simlytiks .dropdown-menu li:hover .text-muted,
div.simlytiks .dropdown-menu li:hover .text-info {
    color: #FFF;
}

/** Added by shashank2104 on 10/04/2025 at 01:30 AM - DW-2410 - Action evaluation panel styles **/
.action-evaluation-panel {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-width: 400px;
}

.action-evaluation-panel .panel-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}

.action-evaluation-panel .panel-header h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-evaluation-panel .panel-header h4 i {
    font-size: 14px;
}

.action-evaluation-panel .progress-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-evaluation-panel .current-action {
    font-size: 13px;
    opacity: 0.9;
    font-weight: 400;
}

.action-evaluation-panel .progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}

.action-evaluation-panel .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.action-evaluation-panel .panel-body {
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}

.action-evaluation-panel .action-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.action-evaluation-panel .action-table thead {
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.action-evaluation-panel .action-table th {
    padding: 12px 15px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
}

.action-evaluation-panel .action-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #f1f3f4;
    font-size: 13px;
    vertical-align: middle;
}

.action-evaluation-panel .action-table tr:hover {
    background: #f8f9fa;
}

.action-evaluation-panel .action-table .status-cell {
    text-align: center;
    width: 40px;
}

.action-evaluation-panel .action-table .status-cell i {
    font-size: 14px;
}

.action-evaluation-panel .panel-footer {
    background: #f8f9fa;
    padding: 12px 20px;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 8px 8px;
}

.action-evaluation-panel .action-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-evaluation-panel .summary-text {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.action-evaluation-panel .wf-type-label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 16px;
    margin-right: 6px;
    color: white;
}

.action-evaluation-panel .wf-type-label.input {
    background: #007bff;
}

/* Animation for status changes */
.action-evaluation-panel .status-cell i {
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .action-evaluation-panel {
        max-width: 90vw;
        min-width: 300px;
    }
    
    .action-evaluation-panel .action-table th,
    .action-evaluation-panel .action-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/** FILTERS ITEM USING GENERIC SELECT2 STYLES **/
.pl-select2-item {
    color: #333;
    cursor: default;
    border: 1px solid #aaaaaa;

    border-radius: 3px;

    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);

    background-clip: padding-box;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    background-color: #e4e4e4;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
    background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}


div.ml-model-container .pl-fixed {
    padding: 25px!important;
}


/** Pl-inline-filters **/
.pl-inline-filters .d3view-filters {
    height: auto!important;
    min-height: unset !important;
}
.pl-inline-filters .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.pl-inline-filters .d3view-filters .advanced-filters {
    height: 40px!important;
}
.pl-inline-filters .d3view-filters input[data-search-input] {
    height: 40px;
}
.pl-inline-filters .d3view-filters .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.pl-inline-filters .d3view-filters .d3view-filter-button .flex-l {
    display: none;
}
.pl-inline-filters .d3view-filters .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.pl-inline-filters .d3view-filters .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.pl-inline-filters .d3view-filters .d3view-filter-button span.clear-search:hover {
    color: red;
}
.pl-inline-filters .d3view-filters .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

/* ==========================================================================
   Added by shashank2104 on 04/08/2026 — MLPredictionView modern theme
   Scoped under `.pl-ml-prediction.modern`. Opt-in via:
     new Plugins.Views.MLPredictionView({ initialSettings: { uiTheme: 'modern' } })
   All colors/shadows/radii alias the foundation --d3v-* tokens so the theme
   moves in lockstep with dashboard-v2 (--db-*) and simlytiks-modern (--sl-*).
   ========================================================================== */
.pl-ml-prediction.modern {
    /* Component-local aliases (same convention as --db-* and --sl-*) */
    --mlp-bg:          var(--d3v-bg-secondary);
    --mlp-surface:     var(--d3v-bg-primary);
    --mlp-surface-2:   var(--d3v-bg-tertiary);
    --mlp-line:        var(--d3v-border);
    --mlp-line-2:      var(--d3v-border-strong);
    --mlp-line-3:      var(--d3v-n-400);
    --mlp-text:        var(--d3v-text-primary);
    --mlp-text-2:      var(--d3v-text-secondary);
    --mlp-text-3:      var(--d3v-text-muted);
    --mlp-accent:      var(--d3v-accent);
    --mlp-accent-hov:  var(--d3v-accent-hover);
    --mlp-accent-soft: rgba(59, 130, 246, 0.08);
    --mlp-accent-ring: rgba(59, 130, 246, 0.18);
    --mlp-success:     var(--d3v-success);
    --mlp-warning:     var(--d3v-warning);
    --mlp-danger:      var(--d3v-danger);
    --mlp-sh-xs:       var(--d3v-sh-xs);
    --mlp-sh-sm:       var(--d3v-sh-sm);
    --mlp-sh-md:       var(--d3v-sh-md);
    --mlp-sh-lg:       var(--d3v-sh-lg);
    --mlp-r-sm:        var(--d3v-r-sm);
    --mlp-r-md:        var(--d3v-r-md);
    --mlp-r-lg:        var(--d3v-r-lg);
    --mlp-r-pill:      var(--d3v-r-full);
    --mlp-t:           var(--d3v-t-fast);

    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mlp-bg);
    color: var(--mlp-text);
    font-size: 13px;
}
.pl-ml-prediction.modern * { box-sizing: border-box; }

/* ---------- Header ---------- */
.pl-ml-prediction.modern .mlp-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--mlp-surface);
    border-bottom: 1px solid var(--mlp-line);
    z-index: 20;
    position: relative;
}
.pl-ml-prediction.modern .mlp-header .mlp-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.pl-ml-prediction.modern .mlp-header .mlp-title .t,
.pl-ml-prediction.modern .mlp-header .viz-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--mlp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    margin: 0;
}
.pl-ml-prediction.modern .mlp-header .mlp-title .sub {
    font-size: 11px;
    color: var(--mlp-text-3);
    white-space: nowrap;
}
.pl-ml-prediction.modern .mlp-sp { flex: 1; }

.pl-ml-prediction.modern .viz-switch {
    display: inline-flex;
    align-items: center;
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-md);
    padding: 3px;
    gap: 2px;
}
.pl-ml-prediction.modern .viz-switch button {
    border: 0;
    background: transparent;
    width: 30px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--mlp-text-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--mlp-t);
    padding: 0;
}
.pl-ml-prediction.modern .viz-switch button:hover { color: var(--mlp-text-2); }
.pl-ml-prediction.modern .viz-switch button.on {
    background: var(--mlp-surface);
    color: var(--mlp-accent);
    box-shadow: var(--mlp-sh-xs);
}
.pl-ml-prediction.modern .viz-switch button svg { width: 14px; height: 14px; }

.pl-ml-prediction.modern .mlp-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-md);
    font-size: 11px;
    color: var(--mlp-text-2);
    font-weight: 600;
    height: 32px;
    margin: 0;
    cursor: pointer;
}

/* Modern switch (used by Interactive + popover rows) */
.pl-ml-prediction.modern .sw {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 15px;
    vertical-align: middle;
}
.pl-ml-prediction.modern .sw input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pl-ml-prediction.modern .sw .s {
    position: absolute;
    inset: 0;
    background: var(--mlp-line-3);
    border-radius: 15px;
    transition: var(--mlp-t);
    cursor: pointer;
}
.pl-ml-prediction.modern .sw .s:before {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    transition: var(--mlp-t);
    box-shadow: var(--mlp-sh-xs);
}
.pl-ml-prediction.modern .sw input:checked + .s { background: var(--mlp-accent); }
.pl-ml-prediction.modern .sw input:checked + .s:before { transform: translateX(11px); }

/* Scoped to .mlp-header only — must NOT leak to table/right panel buttons */
.pl-ml-prediction.modern .mlp-header .btn,
.pl-ml-prediction.modern .mlp-header button.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--mlp-line-2);
    background: var(--mlp-surface);
    color: var(--mlp-text-2);
    font-size: 12px;
    font-weight: 550;
    padding: 6px 11px;
    border-radius: var(--mlp-r-md);
    cursor: pointer;
    transition: var(--mlp-t);
    white-space: nowrap;
    height: 32px;
    line-height: 1;
}
.pl-ml-prediction.modern .mlp-header .btn:hover {
    color: var(--mlp-text);
    border-color: var(--mlp-line-3);
    box-shadow: var(--mlp-sh-xs);
}
.pl-ml-prediction.modern .mlp-header .btn.ghost {
    background: transparent;
    border-color: transparent;
}
.pl-ml-prediction.modern .mlp-header .btn.ghost:hover {
    background: var(--mlp-surface-2);
    border-color: var(--mlp-line-2);
}
.pl-ml-prediction.modern .mlp-header .btn.primary {
    color: #fff;
    background: var(--mlp-accent);
    border-color: var(--mlp-accent);
}
.pl-ml-prediction.modern .mlp-header .btn.primary:hover {
    background: var(--mlp-accent-hov);
    border-color: var(--mlp-accent-hov);
}
.pl-ml-prediction.modern .mlp-header .btn.icon { padding: 0; width: 32px; justify-content: center; }
.pl-ml-prediction.modern .mlp-header .btn.icon svg { width: 15px; height: 15px; }

/* ---------- Overflow dropdown (mlp-dd) ---------- */
.pl-ml-prediction.modern .mlp-dd { position: relative; }
.pl-ml-prediction.modern .mlp-dd-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    z-index: 40;
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    box-shadow: var(--mlp-sh-lg);
    padding: 6px;
}
/** Added by shashank2104 on 09/08/2026 - the overflow menu could grow taller than the viewport, which
    pushed "Clear predictions" (the last item) off screen with no way to scroll to it. The menu is now a
    bounded flex column: the OPTIONS scroll inside .mlp-dd-scroll and .mlp-dd-footer stays pinned, so the
    destructive action is always one click away and never needs scrolling for. Menus with no
    .mlp-dd-scroll/.mlp-dd-footer wrapper still lay out exactly as before, just capped in height. **/
.pl-ml-prediction.modern .mlp-dd.open .mlp-dd-menu {
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 520px);
}
.pl-ml-prediction.modern .mlp-dd-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* absorb the menu's own 6px padding so the scrollbar hugs the menu edge */
    margin: -6px -6px 0;
    padding: 6px 6px 0;
}
.pl-ml-prediction.modern .mlp-dd-footer {
    flex: 0 0 auto;
    margin: 6px -6px -6px;
    padding: 6px;
    border-top: 1px solid var(--mlp-line);
    background: var(--mlp-surface);
    border-radius: 0 0 var(--mlp-r-lg) var(--mlp-r-lg);
}
.pl-ml-prediction.modern .mlp-dd-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mlp-text-3);
    font-weight: 700;
    padding: 8px 10px 4px;
    margin: 0;
    line-height: 1.2;
}
.pl-ml-prediction.modern .mlp-dd-section {
    display: flex;
    flex-direction: column;
    padding: 2px 0 6px;
}
.pl-ml-prediction.modern .mlp-dd-section .sel {
    width: calc(100% - 20px);
    margin: 4px 10px;
    height: 32px;
    border: 1px solid var(--mlp-line-2);
    background: var(--mlp-surface);
    border-radius: var(--mlp-r-sm);
    font-size: 12px;
    padding: 6px 10px;
    color: var(--mlp-text);
    font-weight: 600;
    outline: none;
    appearance: auto;
}
.pl-ml-prediction.modern .mlp-dd-section .sel:focus {
    border-color: var(--mlp-accent);
    box-shadow: 0 0 0 3px var(--mlp-accent-ring);
}
/* label.mlp-dd-row — must override Bootstrap 3 <label> defaults (display:inline-block, margin-bottom, font-weight:bold) */
.pl-ml-prediction.modern .mlp-dd-row,
.pl-ml-prediction.modern label.mlp-dd-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: var(--mlp-r-sm);
    font-size: 12px !important;
    color: var(--mlp-text);
    cursor: pointer;
    margin: 0 !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    min-height: 32px;
    transition: var(--mlp-t);
    max-width: none !important;
    width: 100%;
}
.pl-ml-prediction.modern .mlp-dd-row > span:first-child {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--mlp-text);
    font-weight: 500;
    white-space: nowrap;
}
.pl-ml-prediction.modern .mlp-dd-row > .sw {
    flex: 0 0 auto;
    margin-left: auto;
}
.pl-ml-prediction.modern .mlp-dd-row:hover { background: var(--mlp-surface-2); }
.pl-ml-prediction.modern .mlp-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--mlp-r-sm);
    font-size: 12px;
    color: var(--mlp-text);
    cursor: pointer;
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .mlp-dd-item:hover { background: var(--mlp-surface-2); }
.pl-ml-prediction.modern .mlp-dd-item.danger { color: var(--mlp-danger); }
.pl-ml-prediction.modern .mlp-dd-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--mlp-text-3);
}
.pl-ml-prediction.modern .mlp-dd-item.danger svg { color: var(--mlp-danger); }
.pl-ml-prediction.modern .mlp-dd-item > span {
    flex: 1;
}
.pl-ml-prediction.modern .mlp-dd-sub {
    font-size: 10px;
    color: var(--mlp-text-3);
    margin-left: auto;
    font-weight: 600;
    flex-shrink: 0;
}
.pl-ml-prediction.modern .mlp-dd-sep {
    height: 1px;
    background: var(--mlp-line);
    margin: 4px 6px;
}

/* ---------- Body grid ---------- */
.pl-ml-prediction.modern .mlp-body {
    flex: 1;
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 0;
    position: relative;
}

/* ---------- Left (PredictUtil container) ---------- */
.pl-ml-prediction.modern .mlp-left {
    background: var(--mlp-surface);
    border-right: 1px solid var(--mlp-line);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}
.pl-ml-prediction.modern .mlp-left .pred-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 90px;
}
.pl-ml-prediction.modern .mlp-left .pred-container::-webkit-scrollbar { width: 6px; }
.pl-ml-prediction.modern .mlp-left .pred-container::-webkit-scrollbar-thumb {
    background: var(--mlp-line-2);
    border-radius: 4px;
}

/* Restyle the classic sliders markup inside modern — keeps noUiSlider + selects wired */
.pl-ml-prediction.modern .pred-sliders {
    padding: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders > .form-group {
    margin-bottom: 18px !important;
    padding: 12px 2px 14px;
    border-bottom: 1px solid var(--mlp-line);
}
.pl-ml-prediction.modern .pred-sliders > .form-group:last-child { border-bottom: 0; }
.pl-ml-prediction.modern .pred-sliders h1 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--mlp-text) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.3;
}
.pl-ml-prediction.modern .pred-sliders .col-slider-container {
    margin: 0 !important;
    flex: 1 1 auto !important;
}
.pl-ml-prediction.modern .pred-sliders .input-group {
    margin-bottom: 10px !important;
}
.pl-ml-prediction.modern .pred-sliders .input-range-min,
.pl-ml-prediction.modern .pred-sliders input[type="number"].form-control {
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-md);
    background: var(--mlp-surface);
    font-size: 13px;
    font-weight: 650;
    color: var(--mlp-text);
    padding: 7px 10px;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    transition: var(--mlp-t);
    height: auto;
}
.pl-ml-prediction.modern .pred-sliders .input-range-min:focus {
    border-color: var(--mlp-accent);
    box-shadow: 0 0 0 3px var(--mlp-accent-ring);
}
.pl-ml-prediction.modern .pred-sliders .input-group-addon.toggle-sliders {
    background: var(--mlp-surface-2);
    border-color: var(--mlp-line-2);
    color: var(--mlp-text-2);
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pred-sliders .input-group-addon.toggle-sliders:hover {
    color: var(--mlp-accent);
}
.pl-ml-prediction.modern .pred-sliders .col-slider {
    padding: 4px 10px 0 !important;
}

/* ---------- Dock ---------- */
.pl-ml-prediction.modern .mlp-dock {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    padding: 8px;
    box-shadow: var(--mlp-sh-md);
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left !important;
}
.pl-ml-prediction.modern .mlp-dock .btn,
.pl-ml-prediction.modern .mlp-dock button.btn {
    font-size: 11px;
    padding: 7px 10px;
    height: 32px;
    border-radius: var(--mlp-r-md);
}
.pl-ml-prediction.modern .mlp-dock .btn-primary,
.pl-ml-prediction.modern .mlp-dock .btn-primary.run_target_predict,
.pl-ml-prediction.modern .mlp-dock .btn-primary.run_input_predict {
    background: var(--mlp-accent);
    border-color: var(--mlp-accent);
    color: #fff;
    box-shadow: none;
    font-size: 13px;
    font-weight: 650;
    padding: 8px 14px;
    height: 34px;
}
.pl-ml-prediction.modern .mlp-dock .btn-primary:hover {
    background: var(--mlp-accent-hov);
    border-color: var(--mlp-accent-hov);
}
/* Dock meta: "X changed" label */
.pl-ml-prediction.modern .mlp-dock .mlp-dock-meta {
    flex: 1;
    font-size: 11px;
    color: var(--mlp-text-3);
    padding-left: 6px;
}
.pl-ml-prediction.modern .mlp-dock .mlp-dock-meta b {
    color: var(--mlp-text);
    font-weight: 650;
}
/* In non-interactive mode, dock shows dropdown buttons — make them compact */
.pl-ml-prediction.modern .mlp-dock .add-dd .btn,
.pl-ml-prediction.modern .mlp-dock .add-targets-dd .btn {
    font-size: 11px;
    padding: 6px 10px;
    height: 30px;
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line-2);
    color: var(--mlp-text-2);
    border-radius: var(--mlp-r-md);
    box-shadow: none;
}
.pl-ml-prediction.modern .mlp-dock .add-dd .btn:hover,
.pl-ml-prediction.modern .mlp-dock .add-targets-dd .btn:hover {
    color: var(--mlp-text);
    border-color: var(--mlp-line-3);
}
/* Dock dropdown menus — modern card style */
.pl-ml-prediction.modern .mlp-dock .dropdown-menu {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    box-shadow: var(--mlp-sh-lg);
    padding: 6px;
}
.pl-ml-prediction.modern .mlp-dock .dropdown-menu li a {
    border-radius: var(--mlp-r-sm);
    padding: 8px 10px;
    font-size: 12px;
    color: var(--mlp-text);
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .mlp-dock .dropdown-menu li a:hover {
    background: var(--mlp-surface-2);
}

/* ---------- Right ---------- */
.pl-ml-prediction.modern .mlp-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--mlp-bg);
}
.pl-ml-prediction.modern .mlp-subhead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 4px;
}
.pl-ml-prediction.modern .mlp-subhead .t {
    font-size: 11px;
    color: var(--mlp-text-3);
    font-weight: 600;
}
.pl-ml-prediction.modern .mlp-subhead .t b {
    color: var(--mlp-text);
    font-weight: 650;
}
.pl-ml-prediction.modern .mlp-subhead .chips {
    display: flex;
    gap: 5px;
    max-width: 460px;
    overflow: hidden;
}
.pl-ml-prediction.modern .mlp-chip {
    font-size: 11px;
    padding: 4px 9px;
    border-radius: var(--mlp-r-pill);
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    color: var(--mlp-text-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    white-space: nowrap;
}
.pl-ml-prediction.modern .mlp-chip .d {
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
.pl-ml-prediction.modern .mlp-chip.more { color: var(--mlp-text-3); }

.pl-ml-prediction.modern .mlp-viz-body.pred-chart-container {
    flex: 1;
    min-height: 0;
    padding: 8px 22px 22px;
    overflow: auto;
}
.pl-ml-prediction.modern .mlp-viz-body .pred-chart {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    padding: 12px;
    min-height: 360px;
    box-shadow: var(--mlp-sh-xs);
}

/* Side-by-side view inherits modern shell */
.pl-ml-prediction.modern .pl-side-by-side > .col-md-6 {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    padding: 12px;
    box-shadow: var(--mlp-sh-xs);
}

/* Anchored table wrapper */
.pl-ml-prediction.modern .pl-anchored-table-container {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    overflow: hidden;
}

/* ---------- Footer status strip ---------- */
.pl-ml-prediction.modern .mlp-foot {
    height: 28px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    font-size: 11px;
    color: var(--mlp-text-3);
    background: var(--mlp-surface);
    border-top: 1px solid var(--mlp-line);
}
.pl-ml-prediction.modern .mlp-foot .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mlp-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.pl-ml-prediction.modern .mlp-foot b {
    color: var(--mlp-text-2);
    font-weight: 600;
}
.pl-ml-prediction.modern .mlp-foot .sp { flex: 1; }

/* ---------- Enlarge / full-screen ---------- */
.pl-ml-prediction.modern.pl-fixed {
    position: fixed;
    inset: 0;
    z-index: 9999;
    height: 100vh;
    width: 100vw;
}

/* ==========================================================================
   Left-panel PredictionHelper overrides
   Targets the classic #pl-prediction-tpl markup rendered into .pred-container
   so PredictionHelper does NOT need a new TPL — just a visual facelift.
   ========================================================================== */
.pl-ml-prediction.modern .mlp-left .pred-container {
    padding: 0;
    overflow: hidden;
}
.pl-ml-prediction.modern .pl-predict-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mlp-surface);
}

/* --- Top bar: title + gear + Import --- */
.pl-ml-prediction.modern .pl-predict-container > .d3view-flex-v.flex-space-out {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mlp-line);
    background: var(--mlp-surface);
    gap: 6px;
}
/* Hide the "PREDICTION" title — the name input in the fields area serves as the identity */
.pl-ml-prediction.modern .pl-predict-container > .d3view-flex-v .lead.lead-bold {
    font-size: 0 !important;
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 0 !important;
}
.pl-ml-prediction.modern .pl-predict-container .predict-options {
    gap: 4px;
    flex: 0 0 auto;
}
.pl-ml-prediction.modern .pl-predict-container .predict-options .btn,
.pl-ml-prediction.modern .pl-predict-container .predict-options .dropdown-toggle {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mlp-r-md);
    color: var(--mlp-text-2);
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    font-size: 12px;
    box-shadow: none;
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pl-predict-container .predict-options .btn:hover,
.pl-ml-prediction.modern .pl-predict-container .predict-options .dropdown-toggle:hover {
    color: var(--mlp-accent);
    border-color: var(--mlp-accent);
    background: var(--mlp-accent-soft);
}
.pl-ml-prediction.modern .pl-predict-container .predict-options .btn .btx-text,
.pl-ml-prediction.modern .pl-predict-container .predict-options .btn > .fa-caret-down,
.pl-ml-prediction.modern .pl-predict-container .predict-options .dropdown-toggle > .fa-caret-down {
    display: none;
}

/* --- Input scroll area --- */
.pl-ml-prediction.modern .pred-input-container {
    flex: 1 1 auto;
    height: auto !important;
    padding: 10px 16px 90px !important;
    overflow-y: auto !important;
}
.pl-ml-prediction.modern .pred-input-container::-webkit-scrollbar { width: 6px; }
.pl-ml-prediction.modern .pred-input-container::-webkit-scrollbar-thumb {
    background: var(--mlp-line-2);
    border-radius: 4px;
}
.pl-ml-prediction.modern .pred-inputs {
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}
.pl-ml-prediction.modern .pred-sliders {
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* --- Field wrapper (form-group + col-slider-container) --- */
.pl-ml-prediction.modern .pred-sliders > .form-group {
    margin: 0 0 4px !important;
    padding: 12px 14px !important;
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-md);
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pred-sliders > .form-group:hover {
    border-color: var(--mlp-line-2);
    box-shadow: var(--mlp-sh-xs);
}
.pl-ml-prediction.modern .pred-sliders > .form-group:focus-within {
    border-color: var(--mlp-accent);
    box-shadow: 0 0 0 3px var(--mlp-accent-ring);
}

/* --- Field label (classic is an enormous <h1>) --- */
.pl-ml-prediction.modern .pred-sliders h1 {
    margin: 0 0 8px !important;
    padding: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders h1 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--mlp-text) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    word-break: break-word;
    margin: 0 !important;
}

/* --- Numeric input --- */
.pl-ml-prediction.modern .pred-sliders .col-slider-container {
    margin: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders .col-slider-container > .d3view-flex-v,
.pl-ml-prediction.modern .pred-sliders .col-slider-container > .input-group {
    margin-bottom: 10px !important;
    flex: 0 0 auto !important;
}
.pl-ml-prediction.modern .pred-sliders .input-range-min,
.pl-ml-prediction.modern .pred-sliders input.form-control,
.pl-ml-prediction.modern .pred-sliders input[type="text"].form-control,
.pl-ml-prediction.modern .pred-sliders input[type="number"].form-control {
    height: 32px !important;
    padding: 6px 10px !important;
    border-radius: var(--mlp-r-sm) !important;
    background: var(--mlp-surface) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--mlp-text) !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pred-sliders .input-range-min:focus,
.pl-ml-prediction.modern .pred-sliders input.form-control:focus {
    border-color: var(--mlp-accent) !important;
    box-shadow: 0 0 0 3px var(--mlp-accent-ring) !important;
    outline: 0;
}
/* Hide classic slider toggle addon — modern uses -/+ step buttons instead */
.pl-ml-prediction.modern .pred-sliders .input-group-addon.toggle-slider,
.pl-ml-prediction.modern .pred-sliders .input-group-addon.toggle-sliders {
    display: none !important;
}
/* When input is wrapped in mlp-field-val, hide the classic input-group wrapper */
.pl-ml-prediction.modern .pred-sliders .mlp-field-val .input-group {
    display: contents !important;
}

/* --- noUiSlider v7 visual overrides --- */
/* Always show slider in modern (classic sometimes hides it via inline style) */
.pl-ml-prediction.modern .pred-sliders .col-slider,
.pl-ml-prediction.modern .pred-sliders .col-slider[style] {
    display: block !important;
    padding: 1px 4px 0 !important;
    margin: 0 !important;
}

/* Track: thin 2px bar, no borders/shadows, rounded ends */
.pl-ml-prediction.modern .pred-sliders .noUi-target,
.pl-ml-prediction.modern .pred-sliders .col-slider.noUi-target,
.pl-ml-prediction.modern .pred-sliders .noUi-target.noUi-horizontal {
    height: 4px !important;
    background: var(--mlp-line-2) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 2px !important;
    margin: 24px 0 6px !important;
    overflow: visible !important;
}

/* Base container inside target — must also be 2px */
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-base {
    height: 2px !important;
    overflow: visible !important;
}

/* Origin — in v7 this is the slidable region; .noUi-connect class on it makes the fill */
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-origin {
    border-radius: 2px !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Fill bar: .noUi-connect is a class added to .noUi-origin in v7 */
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-origin.noUi-connect,
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-connect {
    background: var(--mlp-accent) !important;
    box-shadow: none !important;
}
/* Also style .noUi-background (the unfilled part in v7) */
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-background {
    background: var(--mlp-line-2) !important;
    box-shadow: none !important;
}

/* Handle: 13px circle, white with accent border, no stripes */
.pl-ml-prediction.modern .pred-sliders .noUi-target .noUi-handle,
.pl-ml-prediction.modern .pred-sliders .noUi-handle {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid var(--mlp-accent) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
    top: -6px !important;
    left: -7px !important;
    cursor: grab !important;
    z-index: 2;
}
/* Remove the grey vertical stripes on the handle */
.pl-ml-prediction.modern .pred-sliders .noUi-handle:before,
.pl-ml-prediction.modern .pred-sliders .noUi-handle:after {
    display: none !important;
}

/* Tooltip (linked via .Link()) */
.pl-ml-prediction.modern .pred-sliders .noUi-handle .tooltip,
.pl-ml-prediction.modern .pred-sliders .tooltip {
    display: none !important;
}

/* Hide noUi-pips — we render our own .mlp-mm min/max labels */
.pl-ml-prediction.modern .pred-sliders .noUi-pips {
    display: none !important;
}
.pl-ml-prediction.modern .pred-sliders .noUi-marker {
    background: var(--mlp-line-2) !important;
}
.pl-ml-prediction.modern .pred-sliders .noUi-marker-large {
    background: var(--mlp-line-3) !important;
    height: 6px !important;
}
.pl-ml-prediction.modern .pred-sliders .noUi-value {
    font-weight: 600;
    color: var(--mlp-text-3) !important;
}

/* --- Categorical selectpicker button --- */
.pl-ml-prediction.modern .pred-sliders .bootstrap-select > .btn.dropdown-toggle,
.pl-ml-prediction.modern .pred-sliders button[data-toggle="dropdown"].selectpicker {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-sm);
    color: var(--mlp-text);
    font-size: 12px;
    height: 32px;
    padding: 6px 10px;
    box-shadow: none;
    font-weight: 600;
}

/* --- Predict button dock (bottom) --- */
.pl-ml-prediction.modern .pl-predict-container > .clearfix.text-right {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 5;
}
.pl-ml-prediction.modern .pl-predict-container button.btn.predict {
    background: var(--mlp-accent);
    border-color: var(--mlp-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--mlp-r-md);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pl-predict-container button.btn.predict:hover {
    background: var(--mlp-accent-hov);
    border-color: var(--mlp-accent-hov);
}
.pl-ml-prediction.modern .pl-predict-container button.btn.predict .fa {
    font-size: 13px;
}
.pl-ml-prediction.modern .pl-predict-container .pred_value {
    display: none;
}

/* ==========================================================================
   Right-panel viz (inside .pred-chart) — subtle Simlytiks table restyle
   Only border/shadow/header color tweaks; leaves the Simlytiks viz internals
   intact so DataTable and noUi continue to work.
   ========================================================================== */
.pl-ml-prediction.modern .pred-chart .sl-dt-container,
.pl-ml-prediction.modern .pred-chart .dt-container {
    background: var(--mlp-surface);
    border: 1px solid var(--mlp-line);
    border-radius: var(--mlp-r-lg);
    overflow: hidden;
    box-shadow: var(--mlp-sh-xs);
}
.pl-ml-prediction.modern .pred-chart thead th {
    background: var(--mlp-surface-2) !important;
    color: var(--mlp-text-3) !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--mlp-line-2) !important;
}
.pl-ml-prediction.modern .pred-chart tbody tr {
    transition: var(--mlp-t);
}
.pl-ml-prediction.modern .pred-chart tbody tr:hover {
    background: var(--mlp-surface-2) !important;
}
.pl-ml-prediction.modern .pred-chart tbody td {
    color: var(--mlp-text);
    border-bottom: 1px solid var(--mlp-line) !important;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Added by shashank2104 on 04/08/2026 - DW-2822 tighten modern theme to
   match ml-prediction-modern-sketch.html. Targets classic DOM nested in
   .pred-container and .pred-chart, does NOT change markup.
   ========================================================================== */

/* Left panel -- use bg color so inner cards stand out */
.pl-ml-prediction.modern .pl-predict-container {
    background: var(--mlp-bg) !important;
    position: relative;
}
.pl-ml-prediction.modern .pl-predict-container > .d3view-flex-v.flex-space-out {
    background: var(--mlp-surface);
}

/* Kill inline margin-bottom on classic form-groups (was 100px / 50px) */
.pl-ml-prediction.modern .pred-sliders > .form-group,
.pl-ml-prediction.modern .pred-sliders > .form-group[style] {
    margin: 0 0 25px !important;
    padding: 12px 14px !important;
    background: var(--mlp-surface) !important;
    border: 1px solid var(--mlp-line) !important;
    border-radius: var(--mlp-r-md) !important;
    box-shadow: var(--mlp-sh-xs);
    transition: var(--mlp-t);
    clear: both;
}
.pl-ml-prediction.modern .pred-sliders > .form-group:hover {
    border-color: var(--mlp-line-2) !important;
    box-shadow: var(--mlp-sh-sm);
}
.pl-ml-prediction.modern .pred-sliders > .form-group:focus-within {
    border-color: var(--mlp-accent) !important;
    box-shadow: 0 0 0 3px var(--mlp-accent-ring);
}

/* Field label h1 (classic uses big h1 with mb20) */
.pl-ml-prediction.modern .pred-sliders > .form-group h1,
.pl-ml-prediction.modern .pred-sliders > .form-group h1.mb20 {
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--mlp-text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

/* Modernized field head: label + unit chip + range hint */
.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 25px !important;
}
.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh-range {
    font-size: 10px;
    color: var(--mlp-text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Modernized input wrapper with -/+ step buttons */
.pl-ml-prediction.modern .pred-sliders .mlp-field-val {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-md);
    background: var(--mlp-surface);
    overflow: hidden;
    transition: var(--mlp-t);
    margin: 0 0 25px !important;
}
.pl-ml-prediction.modern .pred-sliders .mlp-field-val:hover {
    border-color: var(--mlp-line-3);
}
.pl-ml-prediction.modern .pred-sliders .mlp-field-val:focus-within {
    border-color: var(--mlp-accent);
    box-shadow: 0 0 0 3px var(--mlp-accent-ring);
}
.pl-ml-prediction.modern .pred-sliders .mlp-field-val input,
.pl-ml-prediction.modern .pred-sliders .mlp-field-val input.input-range-min,
.pl-ml-prediction.modern .pred-sliders .mlp-field-val input.form-control {
    flex: 1 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--mlp-text) !important;
    font-variant-numeric: tabular-nums;
    outline: none !important;
    min-width: 0 !important;
    box-shadow: none !important;
    height: 34px !important;
    border-radius: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders .mlp-step {
    width: 28px;
    border: 0 !important;
    border-left: 1px solid var(--mlp-line) !important;
    border-radius: 0 !important;
    background: var(--mlp-surface);
    color: var(--mlp-text-3);
    cursor: pointer;
    transition: var(--mlp-t);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    user-select: none;
}
.pl-ml-prediction.modern .pred-sliders .mlp-step:hover {
    background: var(--mlp-surface-2);
    color: var(--mlp-accent);
}

/* Min/max labels below slider */
.pl-ml-prediction.modern .pred-sliders .mlp-mm {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9px;
    color: var(--mlp-text-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pl-ml-prediction.modern .pred-sliders > .form-group h1::after {
    content: "";
}
.pl-ml-prediction.modern .pred-sliders > .form-group h1 {
    position: relative;
}

/* Unit chip in field-head (e.g. "m", "kg", "cat", "curve") */
.pl-ml-prediction.modern .pred-sliders .mlp-fh-unit {
    font-size: 10px;
    color: var(--mlp-text-3);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--mlp-r-pill);
    background: var(--mlp-surface-2);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Categorical pill buttons (matches sketch .mlp-pills) */
.pl-ml-prediction.modern .pred-sliders .mlp-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.pl-ml-prediction.modern .pred-sliders .mlp-pills .p {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--mlp-r-pill);
    background: var(--mlp-surface-2);
    color: var(--mlp-text-2);
    border: 1px solid var(--mlp-line-2);
    cursor: pointer;
    transition: var(--mlp-t);
    user-select: none;
}
.pl-ml-prediction.modern .pred-sliders .mlp-pills .p:hover {
    color: var(--mlp-text);
}
.pl-ml-prediction.modern .pred-sliders .mlp-pills .p.on {
    background: var(--mlp-accent);
    color: #fff;
    border-color: var(--mlp-accent);
}

/* Curve input field styling */
.pl-ml-prediction.modern .pred-sliders .mlp-curve-field .curve-input-container {
    padding: 9px 10px;
    background: var(--mlp-surface-2);
    border: 1px dashed var(--mlp-line-3);
    border-radius: var(--mlp-r-md);
    font-size: 11px;
    color: var(--mlp-text-2);
    font-weight: 600;
}

/* Name field -- first form-group. Make it look like the sketch name-in */
.pl-ml-prediction.modern .pred-sliders > .form-group:first-child {
    padding: 12px 14px !important;
}
.pl-ml-prediction.modern .pred-sliders > .form-group:first-child > div:first-child h1 {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: var(--mlp-text-3) !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
}
.pl-ml-prediction.modern .pred-sliders > .form-group > div[data-col="name"] {
    margin: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders > .form-group input[data-id="name"] {
    height: 36px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--mlp-line-2) !important;
    border-radius: var(--mlp-r-md) !important;
    background: var(--mlp-surface) !important;
}

/* Col slider container -- tighten inline styling */
.pl-ml-prediction.modern .pred-sliders .col-slider-container {
    margin: 0 !important;
}
.pl-ml-prediction.modern .pred-sliders .col-slider-container > .d3view-flex-v,
.pl-ml-prediction.modern .pred-sliders .col-slider-container > .d3view-flex-v[style] {
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
}

/* Numeric input inside field */
.pl-ml-prediction.modern .pred-sliders input.input-range-min,
.pl-ml-prediction.modern .pred-sliders input[type="number"].form-control {
    height: 34px !important;
    padding: 6px 10px !important;
    border-radius: var(--mlp-r-md) !important;
    background: var(--mlp-surface) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--mlp-text) !important;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* (Slider overrides consolidated into earlier noUiSlider v7 block above) */

/* Hide the classic "isPredicting" overlay text */
.pl-ml-prediction.modern .pl-predict-container .pred_value {
    display: none !important;
}

.pl-ml-prediction.modern button.btn.predict,
.pl-ml-prediction.modern .pl-predict-container button.btn.predict {
    background: var(--mlp-accent) !important;
    border-color: var(--mlp-accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: var(--mlp-r-md) !important;
    box-shadow: none !important;
}
.pl-ml-prediction.modern button.btn.predict:hover,
.pl-ml-prediction.modern .pl-predict-container button.btn.predict:hover {
    background: var(--mlp-accent-hov) !important;
    border-color: var(--mlp-accent-hov) !important;
}

/* Scrollable inputs area reserves space for the floating dock */
.pl-ml-prediction.modern .pred-sliders {
    padding: 12px 14px 90px !important;
}

/* ---- Right panel Simlytiks table wrap -- match sketch .mlp-table-wrap ---- */
.pl-ml-prediction.modern .pred-chart .dt-container,
.pl-ml-prediction.modern .pred-chart .sl-dt-container {
    background: var(--mlp-surface) !important;
    border: 1px solid var(--mlp-line) !important;
    border-radius: var(--mlp-r-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--mlp-sh-xs);
}
/* Leave the Simlytiks table-viewer header alone — it has its own modern theme. */
.pl-ml-prediction.modern .pred-chart thead th {
    background: var(--mlp-surface-2) !important;
    color: var(--mlp-text-3) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-weight: 700 !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--mlp-line-2) !important;
}
.pl-ml-prediction.modern .pred-chart tbody td {
    padding: 10px 12px !important;
    font-size: 12px !important;
    color: var(--mlp-text) !important;
    border-bottom: 1px solid var(--mlp-line) !important;
    font-variant-numeric: tabular-nums;
}
.pl-ml-prediction.modern .pred-chart tbody tr:hover td {
    background: var(--mlp-surface-2) !important;
}

/* Pager buttons */
.pl-ml-prediction.modern .pred-chart .sl-pager,
.pl-ml-prediction.modern .pred-chart .dt-pager,
.pl-ml-prediction.modern .pred-chart .pl-pager {
    padding: 8px 12px !important;
    background: var(--mlp-surface) !important;
    border-top: 1px solid var(--mlp-line) !important;
}
.pl-ml-prediction.modern .pred-chart .sl-pager .btn,
.pl-ml-prediction.modern .pred-chart .dt-pager .btn,
.pl-ml-prediction.modern .pred-chart .pl-pager .btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: var(--mlp-r-md) !important;
    background: var(--mlp-surface-2) !important;
    border: 1px solid var(--mlp-line-2) !important;
    color: var(--mlp-text-2) !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pl-ml-prediction.modern .pred-chart .sl-pager .btn:hover,
.pl-ml-prediction.modern .pred-chart .dt-pager .btn:hover,
.pl-ml-prediction.modern .pred-chart .pl-pager .btn:hover {
    color: var(--mlp-accent) !important;
    border-color: var(--mlp-accent) !important;
    background: var(--mlp-accent-soft) !important;
}

/* viz-body container itself hosts the .pred-chart full area */
.pl-ml-prediction.modern .mlp-viz-body .pred-chart {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   Added by shashank2104 on 2026-04-08 - DW-2776 - Modern view refinements:
   1) input/target chips with icons in mlp-title
   2) flex-based predict footer (no more absolute overlap)
   3) drag handle to resize the left bar
   4) per-field icons in slider labels
---------------------------------------------------------------------------- */

/* (1) Title chips */
.pl-ml-prediction.modern .mlp-title .mlp-io-chips {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
}
.pl-ml-prediction.modern .mlp-io-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mlp-text-2);
    line-height: 1;
}
.pl-ml-prediction.modern .mlp-io-chip i {
    font-size: 11px;
    color: var(--mlp-accent);
}
.pl-ml-prediction.modern .mlp-io-chip i.fa-sign-in { display: none; }
.pl-ml-prediction.modern .mlp-io-chip b {
    color: var(--mlp-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pl-ml-prediction.modern .mlp-io-chip span {
    color: var(--mlp-text-3);
    font-weight: 500;
}
.pl-ml-prediction.modern .mlp-io-chip.targets i { color: var(--mlp-success, #10b981); }
.pl-ml-prediction.modern .mlp-io-arrow {
    color: var(--mlp-text-3);
    font-size: 11px;
}
/* fontawesome 4 fallbacks for icons that ship as fa-* in newer versions */
.pl-ml-prediction.modern .fa-sign-in-alt:before { content: "\f090"; }
.pl-ml-prediction.modern .fa-long-arrow-alt-right:before { content: "\f178"; }

/* (2) Flex-based predict footer — kill the absolute overlap so the slider
   list never collides with the Predict button bar. */
.pl-ml-prediction.modern .pl-predict-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0;
}
.pl-ml-prediction.modern .pred-input-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 16px !important;
    overflow-y: auto !important;
}
.pl-ml-prediction.modern .pl-predict-container > .clearfix.text-right {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--mlp-line) !important;
    border-radius: 0 !important;
    background: var(--mlp-surface);
    box-shadow: none !important;
    z-index: auto;
}
/* mlp-left container is also flex; pred-container should fill remaining height */
.pl-ml-prediction.modern .mlp-left .pred-container {
    padding: 0 !important;
}

/* (3) Drag handle to resize the left bar.
   The .mlp-body grid uses fixed first column; JS sets `--mlp-left-w` and we
   read it via `grid-template-columns: var(--mlp-left-w, 340px) 1fr`. */
.pl-ml-prediction.modern .mlp-body {
    grid-template-columns: var(--mlp-left-w, 340px) 1fr !important;
}
.pl-ml-prediction.modern .mlp-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--mlp-left-w, 340px) - 3px);
    width: 6px;
    cursor: col-resize;
    z-index: 6;
    background: transparent;
    transition: background 0.15s ease;
}
.pl-ml-prediction.modern .mlp-resizer:hover,
.pl-ml-prediction.modern .mlp-resizer.dragging {
    background: var(--mlp-accent-soft, rgba(99,102,241,.18));
}
.pl-ml-prediction.modern.mlp-resizing,
.pl-ml-prediction.modern.mlp-resizing * {
    user-select: none !important;
    cursor: col-resize !important;
}

/* (4) Per-field icons in slider labels */
.pl-ml-prediction.modern .pred-sliders h1 .mlp-field-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    font-size: 10px;
    color: var(--mlp-accent);
    background: var(--mlp-accent-soft, rgba(99,102,241,.12));
    border-radius: 4px;
    vertical-align: -2px;
}
/* fa4 fallbacks */
.pl-ml-prediction.modern .fa-hashtag:before { content: "\f292"; }
.pl-ml-prediction.modern .fa-chart-line:before { content: "\f201"; }
.pl-ml-prediction.modern .fa-toggle-on:before { content: "\f205"; }

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - Generic Popover component styles.
 *  Scoped to .pl-popover (component owns its class namespace). */
.pl-popover {
    position: fixed;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-light, #e4e9f0);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-lg, 0 12px 32px rgba(20, 30, 50, .10), 0 4px 8px rgba(20, 30, 50, .04));
    overflow: hidden;
    font-size: 12px;
    color: var(--d3v-text-primary, #1a2233);
    transition: width 160ms cubic-bezier(.4, 0, .2, 1), height 160ms cubic-bezier(.4, 0, .2, 1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
}
.pl-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--d3v-bg-muted, #f7f9fc);
    border-bottom: 1px solid var(--d3v-border-soft, #eef1f6);
    min-height: 42px;
}
.pl-popover-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a2233);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-popover-title-icon {
    font-size: 13px;
    opacity: .75;
    color: var(--d3v-accent, #3b6df0);
}
.pl-popover-subtitle {
    font-size: 10.5px;
    color: var(--d3v-text-muted, #8b96a8);
    background: var(--d3v-bg-primary, #ffffff);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    font-weight: 500;
    flex-shrink: 0;
}
.pl-popover-viewtoggle {
    display: flex;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-light, #e4e9f0);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 2px;
    flex-shrink: 0;
}
.pl-popover-vt-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    color: var(--d3v-text-secondary, #5b6878);
    transition: all 160ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    line-height: 1;
}
.pl-popover-vt-btn:hover { color: var(--d3v-accent, #3b6df0); }
.pl-popover-vt-btn.active {
    background: var(--d3v-accent, #3b6df0);
    color: #fff;
    box-shadow: 0 1px 2px rgba(59, 109, 240, .3);
}
.pl-popover-vt-btn i { font-size: 10px; }
.pl-popover-close {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--d3v-text-muted, #8b96a8);
    transition: all 160ms cubic-bezier(.4, 0, .2, 1);
    border: none;
    background: transparent;
    font-size: 12px;
    flex-shrink: 0;
    padding: 0;
}
.pl-popover-close:hover {
    background: var(--d3v-bg-soft, #eef2f7);
    color: var(--d3v-status-danger, #e0432a);
}
.pl-popover-body {
    padding: 12px 14px;
    max-height: 70vh;
    overflow-y: auto;
}
.pl-popover-body.tight { padding: 10px 12px; }
.pl-popover-section-title {
    font-size: 10px;
    color: var(--d3v-text-muted, #8b96a8);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin: 12px 0 6px;
}
.pl-popover-section-title:first-child { margin-top: 0; }
.pl-popover-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--d3v-border-soft, #eef1f6);
}
.pl-popover-stats > div {
    font-size: 10px;
    color: var(--d3v-text-muted, #8b96a8);
    text-align: center;
}
.pl-popover-stats b {
    display: block;
    font-size: 12px;
    color: var(--d3v-text-primary, #1a2233);
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.pl-popover-legend {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
    color: var(--d3v-text-muted, #8b96a8);
}
.pl-popover-legend .sw {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

/** Pane toggle for popovers using `preserveBody: true` — callers render multiple viewType
 *  panes up-front and toggle visibility via .pl-vt-pane hide/show (no re-render).
 *  Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - Full-height flex column (no min-height)
 *  so nested charts (hBarChart / 3D surface) size against the sidebar body correctly. **/
.pl-vt-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}
.pl-vt-pane[hidden] { display: none !important; }

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - Right-edge sidebar component.
 *  Persistent workspace panel that slides in from the right with a left-edge drag handle. */
.pl-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    z-index: 1052;
    min-width: 320px;
    background: var(--d3v-bg-primary, #ffffff);
    border-left: 1px solid var(--d3v-border-light, #e4e9f0);
    box-shadow: -12px 0 36px rgba(20, 30, 50, .10), -4px 0 8px rgba(20, 30, 50, .04);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: var(--d3v-text-primary, #1a2233);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1), opacity 220ms ease;
}
.pl-sidebar.pl-sidebar-open {
    transform: translateX(0);
    opacity: 1;
}
.pl-sidebar.pl-sidebar-resizing {
    transition: none;
}
body.pl-sidebar-resizing-body {
    cursor: ew-resize !important;
    user-select: none !important;
}
body.pl-sidebar-resizing-body iframe {
    pointer-events: none !important;
}

.pl-sidebar-resize-handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pl-sidebar-resize-handle span {
    width: 2px;
    height: 40px;
    border-radius: 2px;
    background: var(--d3v-border-light, #e4e9f0);
    transition: background 160ms ease, width 160ms ease, height 160ms ease;
}
.pl-sidebar-resize-handle:hover span,
.pl-sidebar.pl-sidebar-resizing .pl-sidebar-resize-handle span {
    background: var(--d3v-accent, #3b6df0);
    width: 3px;
    height: 64px;
}

.pl-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--d3v-bg-muted, #f7f9fc);
    border-bottom: 1px solid var(--d3v-border-soft, #eef1f6);
    min-height: 52px;
    flex-shrink: 0;
}
.pl-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a2233);
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pl-sidebar-title-icon {
    font-size: 14px;
    opacity: .75;
    color: var(--d3v-accent, #3b6df0);
}
.pl-sidebar-subtitle {
    font-size: 10.5px;
    color: var(--d3v-text-muted, #8b96a8);
    background: var(--d3v-bg-primary, #ffffff);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    font-weight: 500;
    flex-shrink: 0;
}
.pl-sidebar-viewtoggle {
    display: flex;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-light, #e4e9f0);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 2px;
    flex-shrink: 0;
}
/** Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - Removed custom font-size on the
 *  sidebar view-type button group (both the button and its icon). Leave it at the
 *  default inherited size so the button group matches standard dashboard buttons. */
.pl-sidebar-vt-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    color: var(--d3v-text-secondary, #5b6878);
    transition: all 160ms cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    line-height: 1;
}
.pl-sidebar-vt-btn:hover { color: var(--d3v-accent, #3b6df0); }
.pl-sidebar-vt-btn.active {
    background: var(--d3v-accent, #3b6df0);
    color: #fff;
    box-shadow: 0 1px 2px rgba(59, 109, 240, .3);
}

.pl-sidebar-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--d3v-text-muted, #8b96a8);
    transition: all 160ms cubic-bezier(.4, 0, .2, 1);
    border: none;
    background: transparent;
    font-size: 13px;
    flex-shrink: 0;
    padding: 0;
}
.pl-sidebar-close:hover {
    background: var(--d3v-bg-soft, #eef2f7);
    color: var(--d3v-status-danger, #e0432a);
}

.pl-sidebar-body {
    flex: 1 1 auto;
    padding: 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/** Anchor highlight — applied to the triggering cell/chip/button while the sidebar is
 *  open so the user stays oriented to which row/pill opened the workspace. Cleared on close. */
.pl-sidebar-anchor-active {
    outline: 2px solid var(--d3v-accent, #3b6df0);
    outline-offset: 2px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Plugins.Helpers.RecordSelector
 *  scoped styles. Uses the shared --d3v-* tokens; only scoped class is
 *  .d3view-record-selector-helper + the sidebar class the helper attaches. */
.pl-sidebar.d3view-record-selector-sidebar .pl-sidebar-body {
    padding: 0;
}

.d3view-record-selector-helper {
    background: var(--d3v-bg-primary, #ffffff);
}

.d3view-record-selector-helper .d3view-record-selector-table {
    padding: 12px 14px 14px;
}

.d3view-record-selector-helper .bs_datatable_wrapper,
.d3view-record-selector-helper .dataTables_wrapper {
    background: transparent;
}

.d3view-record-selector-helper .dataTables_filter {
    margin: 0 0 10px;
}

.d3view-record-selector-helper .dataTables_filter input {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-primary, #1e293b);
    transition: border-color var(--d3v-t-fast, 0.12s) ease,
                box-shadow var(--d3v-t-fast, 0.12s) ease;
}

.d3view-record-selector-helper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.d3view-record-selector-helper table.dataTable {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.d3view-record-selector-helper table.dataTable thead th {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-record-selector-helper table.dataTable tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--d3v-border, #eef1f6);
    color: var(--d3v-text-primary, #1e293b);
    transition: background var(--d3v-t-fast, 0.12s) ease;
    cursor: pointer;
    vertical-align: middle;
}

.d3view-record-selector-helper table.dataTable tbody tr:hover td {
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-record-selector-helper table.dataTable tbody tr.ui-selected td,
.d3view-record-selector-helper table.dataTable tbody tr.selected td {
    background: rgba(59, 130, 246, 0.08);
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--d3v-accent, #3b82f6);
}

.d3view-record-selector-helper .dataTables_paginate {
    padding: 10px 0 2px;
    font-size: 11px;
}

.d3view-record-selector-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    margin: 14px;
}

.d3view-record-selector-empty i {
    margin-right: 6px;
    color: var(--d3v-text-muted, #94a3b8);
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Multi-select footer (Apply + count).
 *  Only rendered when allowMultiple:true; scoped under the multi-mode sidebar class. */
.d3view-record-selector-helper .d3view-record-selector-footer {
    flex: 0 0 auto;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-record-selector-helper .d3view-record-selector-count {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--d3v-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.d3view-record-selector-helper .d3view-record-selector-apply {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--d3v-r-md, 8px);
    transition: var(--d3v-t-fast, 0.12s) ease;
}

/**
 * Added by shashank2104 on 2026-04-20 - DVFIV-2007
 * Reusable modern tour helper styles (Plugins.Helpers.Tour). Body-mounted —
 * NOT scoped to any plugin since it floats over the page.
 * Folded in on 2026-04-22 from the now-removed plugins/plugins.helpers.tour.css.
 */

.plugins-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: auto;
    animation: plugins-tour-fade 200ms ease-out;
}

.plugins-tour-mask {
    width: 100%;
    height: 100%;
    display: block;
}

.plugins-tour-card {
    position: fixed;
    z-index: 99999;
    max-width: 380px;
    min-width: 280px;
    padding: 18px 20px 14px;
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-primary, #0f172a);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-lg, 0 18px 40px rgba(15, 23, 42, 0.18));
    animation: plugins-tour-pop 220ms cubic-bezier(.2,.9,.3,1.2);
    transition: left 160ms ease-out, top 160ms ease-out;
}

.plugins-tour-card-arrow {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    transform: rotate(45deg);
    z-index: -1;
}
.plugins-tour-card-arrow[data-placement="top"]    { border-top: none; border-left: none; }
.plugins-tour-card-arrow[data-placement="bottom"] { border-bottom: none; border-right: none; }
.plugins-tour-card-arrow[data-placement="left"]   { border-bottom: none; border-left: none; }
.plugins-tour-card-arrow[data-placement="right"]  { border-top: none; border-right: none; }

.plugins-tour-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.plugins-tour-step-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plugins-tour-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    color: var(--d3v-text-muted, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    transition: background 150ms ease, color 150ms ease;
}
.plugins-tour-close:hover {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.06));
    color: var(--d3v-text-primary, #0f172a);
}

.plugins-tour-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--d3v-text-primary, #0f172a);
}

.plugins-tour-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #334155);
    margin-bottom: 16px;
}

.plugins-tour-body a {
    color: var(--d3v-accent, #3b82f6);
}

.plugins-tour-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.plugins-tour-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.plugins-tour-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d3v-border-strong, rgba(15, 23, 42, 0.18));
    transition: background 200ms ease, transform 200ms ease;
}

.plugins-tour-dot.is-active {
    background: var(--d3v-accent, #3b82f6);
    transform: scale(1.2);
}

.plugins-tour-footer .btn {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: var(--d3v-r-md, 8px);
}

.plugins-tour-footer .btn-primary {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
}
.plugins-tour-footer .btn-primary:hover {
    background: var(--d3v-accent-hover, #2563eb);
    border-color: var(--d3v-accent-hover, #2563eb);
}

@keyframes plugins-tour-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes plugins-tour-pop {
    from { opacity: 0; transform: scale(0.94) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/** Added by shashank2104 on 09/16/2026 - remote lookup filter popover (wf-builder-remote-lookup-input).
 *  Rows come from d3VIEW.Plugins.FormFilters in vertical mode, so everything is re-skinned under .remote-lookup-filters. **/
.dropdown-menu.remote-lookup-filters {
    width: 420px;
    padding: 0;
    margin-top: 6px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-lg);
}
.remote-lookup-filters .rm-filters-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg) var(--d3v-r-lg) 0 0;
    background: var(--d3v-bg-secondary);
}
.remote-lookup-filters .rm-filters-head > i.fa-search {
    left: 26px;
    top: 12px;
    z-index: 3;
    height: 36px;
    line-height: 36px;
    padding: 0;
    color: var(--d3v-text-muted);
    pointer-events: none;
}
.remote-lookup-filters .rm-filters-head input.filter-search {
    height: 36px;
    padding-left: 32px;
    margin: 0;
    font-size: 13px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-xs);
    transition: var(--d3v-t-fast);
}
.remote-lookup-filters .rm-filters-head input.filter-search:hover {
    border-color: var(--d3v-border-strong);
}
.remote-lookup-filters .rm-filters-head input.filter-search:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
.remote-lookup-filters .rm-filters-count,
.remote-lookup-filters .left-inner-addon > label {
    display: block;
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
}
.remote-lookup-filters .rm-filters-count .search-count,
.remote-lookup-filters .left-inner-addon > label .search-count {
    color: var(--d3v-text-secondary);
}
.remote-lookup-filters .map-rm-filters-to-io {
    margin: 10px 14px 0;
}
.remote-lookup-filters .rm-filters {
    max-height: min(60vh, 380px);
    overflow: auto;
    padding: 6px 14px 10px;
}
.remote-lookup-filters .rm-filters ul.filter-items {
    max-height: none!important;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
}
.remote-lookup-filters .rm-filters ul.filter-items > li.filter-item {
    flex-direction: column;
    float: none!important;
    width: 100%!important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--d3v-bg-tertiary);
    transition: var(--d3v-t-fast);
}
.remote-lookup-filters .rm-filters ul.filter-items > li.filter-item:last-child {
    border-bottom: none;
}
.remote-lookup-filters .rm-filters li.filter-item .sortable-handle {
    display: none!important;
}
/* label on its own line so the input below takes the full width */
.remote-lookup-filters .rm-filters li.filter-item > a {
    display: block!important;
    float: none!important;
    width: 100%!important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    background: none!important;
    line-height: 16px;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--d3v-text-secondary);
    cursor: default;
}
.remote-lookup-filters .rm-filters li.filter-item > .filter-item-container {
    display: block!important;
    float: none!important;
    width: 100%!important;
    margin: 0 !important;
    padding: 0 !important;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container {
    margin: 0 !important;
    padding: 0 !important;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container > input.form-control,
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container > textarea.form-control,
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container .input-group .form-control {
    height: 36px;
    padding: 6px 34px 6px 10px;
    font-size: 13px;
    color: var(--d3v-text-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-xs);
    transition: var(--d3v-t-fast);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container > textarea.form-control {
    height: auto;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container .input-group {
    display: flex;
    width: 100%;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container .input-group .form-control {
    flex: 1 1 auto;
    width: auto;
    padding-right: 10px;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container .input-group .form-control:not(:last-child) {
    border-radius: var(--d3v-r-md) 0 0 var(--d3v-r-md);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-item-container .input-group .input-group-addon {
    width: auto;
    height: 36px;
    border-radius: 0 var(--d3v-r-md) var(--d3v-r-md) 0 !important;
    border-color: var(--d3v-border);
}
.remote-lookup-filters .rm-filters li.filter-item .form-control::placeholder {
    color: var(--d3v-text-muted);
}
.remote-lookup-filters .rm-filters li.filter-item .form-control:hover {
    border-color: var(--d3v-border-strong);
}
.remote-lookup-filters .rm-filters li.filter-item .form-control:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
/* Select2 3.5 single choice inside a row */
.remote-lookup-filters .rm-filters li.filter-item .select2-container .select2-choice {
    height: 36px;
    line-height: 34px;
    padding-left: 10px;
    font-size: 13px;
    color: var(--d3v-text-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-xs);
    transition: var(--d3v-t-fast);
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container .select2-choice.select2-default .select2-chosen {
    color: var(--d3v-text-muted);
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container .select2-choice:hover {
    border-color: var(--d3v-border-strong);
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container.select2-container-active .select2-choice,
.remote-lookup-filters .rm-filters li.filter-item .select2-container.select2-dropdown-open .select2-choice {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container .select2-choice .select2-arrow {
    width: 28px;
    border: none;
    background: transparent;
    border-radius: 0 var(--d3v-r-md) var(--d3v-r-md) 0;
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container .select2-choice .select2-arrow .select2-caret {
    line-height: 34px;
    color: var(--d3v-text-muted);
}
.remote-lookup-filters .rm-filters li.filter-item .select2-container-multi .select2-choices {
    min-height: 36px;
    padding: 2px 6px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-xs);
}
/* operator "..." toggle sits inside the input on the right */
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown,
.remote-lookup-filters .rm-filters li.filter-item .range-operator-dropdown {
    top: auto!important;
    bottom: 4px;
    right: 4px!important;
    z-index: 2;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown > .dropdown-toggle,
.remote-lookup-filters .rm-filters li.filter-item .range-operator-dropdown > .dropdown-toggle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: var(--d3v-text-muted);
    border-radius: var(--d3v-r-sm);
    transition: var(--d3v-t-fast);
}
.remote-lookup-filters .rm-filters li.filter-item .dropdown > .dropdown-toggle:hover,
.remote-lookup-filters .rm-filters li.filter-item .dropdown.open > .dropdown-toggle {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-accent)!important;
    border-radius: var(--d3v-r-sm);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown ul.dropdown-menu {
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-md);
    padding: 4px;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown ul.dropdown-menu li > a {
    padding: 6px 28px 6px 10px;
    border-radius: var(--d3v-r-sm);
    color: var(--d3v-text-primary);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown ul.dropdown-menu li > a:hover {
    background: var(--d3v-bg-tertiary);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-operators-dropdown li.checked:not(.disabled):after {
    top: 6px;
    color: var(--d3v-accent);
}
.remote-lookup-filters .rm-filters li.filter-item .filter-sub {
    margin: 0 0 6px !important;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-sub label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted);
    margin: 0 0 2px;
}
.remote-lookup-filters .rm-filters li.filter-item .filter-separator {
    display: none!important;
}
.remote-lookup-filters .rm-filters .filter-footer {
    padding: 8px 0 0;
}
.remote-lookup-filters .rm-filters::-webkit-scrollbar {
    width: 8px;
}
.remote-lookup-filters .rm-filters::-webkit-scrollbar-thumb {
    background: var(--d3v-border-strong);
    border-radius: var(--d3v-r-full);
    border: 2px solid var(--d3v-bg-primary);
}

/* ============================================================================
   Data Viewer — the file list, and the ways a file can be read.

   The list used to sit after the contents and carry only a name; the views a
   file affords were entries in a dropdown, each hidden until the routing for
   that file type showed it. The routing was never wrong, it just could not be
   seen. Both are laid out here; nothing below decides which views apply.
   ============================================================================ */

/* The row is already display:flex, so the panel leads by order rather than by
   being moved in the markup -- which keeps the template's structure intact. */
.dv-filespanel {
    order: -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border-right: 1px solid #e0e0e0;
    background: #f7f9fc;
}
.dv-contentcol { order: 0; }

.dv-filespanel-hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px 7px;
    border-bottom: 1px solid #e0e0e0;
}
.dv-filespanel-hd .t {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}
.dv-filespanel-hd .n {
    margin-left: auto;
    font-size: 11px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.dv-files-filter {
    margin: 7px 8px 2px;
    padding: 4px 8px;
    width: calc(100% - 16px);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    color: #555;
}

.data-viewer-container .dv-filespanel ul.dv-files,
.dv-filespanel ul.dv-files,
.dv-filespanel ul.dv-texts {
    max-height: none;
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 4px;
}

.dv-filespanel ul.dv-files > li,
.dv-filespanel ul.dv-texts > li {
    border: 0;
    border-radius: 6px;
    padding: 0;
    background: transparent;
}
.dv-filespanel ul.dv-files > li > a,
.dv-filespanel ul.dv-texts > li > a {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 1px 8px;
    padding: 6px 8px;
    text-decoration: none;
    color: #333;
    word-break: normal;
    white-space: normal;
}
.dv-filespanel ul.dv-files > li:hover,
.dv-filespanel ul.dv-texts > li:hover { background: #eef2f7; }
.dv-filespanel ul.dv-files > li.active,
.dv-filespanel ul.dv-texts > li.active { background: #e0ecf8; }

.dv-filespanel .dv-f-ic {
    grid-row: span 2;
    align-self: center;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8b95a3;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 3px 0;
    background: #fff;
}
.dv-filespanel ul.dv-files > li.active .dv-f-ic,
.dv-filespanel ul.dv-texts > li.active .dv-f-ic { border-color: #2c5282; color: #2c5282; }

.dv-filespanel .dv-f-nm {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dv-filespanel ul.dv-files > li.active .dv-f-nm,
.dv-filespanel ul.dv-texts > li.active .dv-f-nm { color: #2c5282; }

.dv-filespanel .dv-f-sz {
    font-size: 11px;
    color: #999;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.dv-filespanel .dv-f-mt {
    grid-column: 2 / 4;
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Which views this file affords, from the same routing that drives the bar. */
.dv-filespanel .dv-f-aff {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #8b95a3;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 4px;
    vertical-align: 1px;
}
.dv-filespanel ul.dv-files > li.active .dv-f-aff,
.dv-filespanel ul.dv-texts > li.active .dv-f-aff { border-color: #2c5282; color: #2c5282; }

.dv-filespanel-ft {
    padding: 7px 10px;
    border-top: 1px solid #e0e0e0;
    font-size: 11px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

/* ---- the view bar ---- */
.dv-viewbar {
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}
.dv-viewbar-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
}
.dv-viewbar-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}
/* Nothing here sets display on an entry. The routing shows and hides each one
   with an inline style, and in a flex row a shown entry lays out beside its
   siblings on its own -- a rule here would only fight the routing and risk
   showing a view the open file cannot actually be read as. */

.dv-viewbar-list > li + li { border-left: 1px solid #eef1f5; }
.dv-viewbar-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
}
.dv-viewbar-list > li > a:hover { background: #eef2f7; color: #2c5282; }
.dv-viewbar-list > li > a:focus-visible { outline: 2px solid #2c5282; outline-offset: -2px; }
.dv-viewbar-list > li.active > a {
    background: #2c5282;
    color: #fff;
    font-weight: 600;
}
.dv-viewbar-list > li.active > a i { color: #fff; }

@media (max-width: 860px) {
    .dv-filespanel { order: 0; border-right: 0; border-bottom: 1px solid #e0e0e0; }
    .dv-viewbar { flex-wrap: wrap; }
}

/* ---- the header, as two rows: what the file is, then how to read it ---- */
.dv-toolbar { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.dv-toolbar-main { width: 100%; }

.dv-toolbar .dv-options-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.dv-openfile {
    font-size: 13.5px;
    font-weight: 600;
    color: #333;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-chip {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: #5a6675;
    white-space: nowrap;
}

.dv-viewrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    /* Left, under the file it belongs to. The row above is spaced apart so the
       actions sit right; letting this one inherit that would strand the switcher
       in the middle, reading as though it belonged to neither. */
    margin-right: auto;
    padding: 0 10px 9px;
}
/* A file type that affords a single view leaves the strip empty; the row then
   takes no space rather than leaving a band of padding under the header. */
.dv-viewrow:empty,
.dv-viewrow > .dv-viewbar[style*="display: none"] { padding: 0; }

/* The actions that operate on the file read as one control, not four. */
.dv-toolbar .dv-options-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dv-toolbar .dv-options-right > .btn,
.dv-toolbar .dv-options-right > .dropdown > .btn {
    border-radius: 6px;
}

/* ---- the view row as a full-width band under the header's first row ----
   The header's one child spaces its contents apart, which strands anything inside
   it in the middle. The band is taken out of that flow and laid across the header,
   left-aligned under the file it belongs to; the header's own padding makes room. */
div.data-viewer-modal .modal-header { position: relative; padding-bottom: 42px; }

div.data-viewer-modal .modal-header .dv-viewrow {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    padding: 0;
    justify-content: flex-start;
}

/* ---- the actions, as one considered group rather than four loose links ---- */
.dv-toolbar .dv-options-right {
    gap: 2px;
    padding: 2px;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    background: #f7f9fc;
}
.dv-toolbar .dv-options-right > .btn,
.dv-toolbar .dv-options-right .dropdown > .btn,
.dv-toolbar .dv-options-right > .dropdown-toggle {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #5a6675;
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 10px;
    box-shadow: none;
}
.dv-toolbar .dv-options-right > .btn:hover,
.dv-toolbar .dv-options-right .dropdown > .btn:hover {
    background: #e8eef6;
    color: #2c5282;
}
.dv-toolbar .dv-options-right .open > .btn,
.dv-toolbar .dv-options-right > .btn:active {
    background: #e0ecf8;
    color: #2c5282;
}
.dv-toolbar .dv-options-right .fa { color: #8b95a3; }
.dv-toolbar .dv-options-right > .btn:hover .fa,
.dv-toolbar .dv-options-right .dropdown > .btn:hover .fa { color: #2c5282; }

/* ---- the file's contents ---- */
.dv-contentcol .ace_editor,
.data-viewer-modal .ace_editor {
    font-size: 12.5px;
    line-height: 1.62;
}
/* A gutter that separates itself from the text by tone, not by a hard rule. */
.data-viewer-modal .ace_gutter {
    background: #f7f9fc;
    color: #a8b2bf;
    border-right: 1px solid #e8ecf1;
}
.data-viewer-modal .ace_gutter-active-line { background: #e8eef6; color: #2c5282; }
.data-viewer-modal .ace_active-line { background: #f4f8fd; }
.data-viewer-modal .ace_content { padding-top: 4px; }
.data-viewer-modal .ace_print-margin { display: none; }

/* The search bar above the contents reads as part of the page, not a floating box. */
.data-viewer-modal .viz-container > .row:first-child,
.data-viewer-modal .dv-search-row {
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    background: #fbfcfe;
}

/* The machine the browser is reading, beside the path it is reading. */
.fe-host-wrap { padding: 0 8px; }
.fe-host-wrap .fa { color: #8b95a3; margin-right: 5px; }
.fe-host-wrap select.fe-host {
    border: 0;
    background: transparent;
    font-size: 12.5px;
    color: #2c5282;
    font-weight: 600;
    max-width: 170px;
    padding: 2px 0;
}
.fe-host-wrap select.fe-host option:disabled { color: #b6bec9; }

/* /stylesheets/badgeselect.css */
/* ==========================================================================
   d3VIEW.BadgeSelect — any <select> rendered as a row of badges.

   Deliberately NOT tabs: no bottom rail, no borders, no shape that sits on a
   line. Each item is a badge that reads as an object in a row, and selection is
   carried by fill alone. The <select> it replaces stays in the DOM.
   ========================================================================== */

.d3v-badgeselect {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
    padding: 2px;

    /* Slides rather than wrapping: a second row pushes the whole form down.
       scroll-behavior carries the programmatic scrollIntoView when something
       else selects an item that sits off-screen. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}

.d3v-badgeselect.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;      /* follow the pointer exactly while dragging */
    scroll-snap-type: none;
    user-select: none;
}

/* A thin rail, not a full-height scrollbar under the badges. */
.d3v-badgeselect { scrollbar-width: thin; scrollbar-color: #d5dbe2 transparent; }
.d3v-badgeselect::-webkit-scrollbar { height: 4px; }
.d3v-badgeselect::-webkit-scrollbar-track { background: transparent; }
.d3v-badgeselect::-webkit-scrollbar-thumb { background: #d5dbe2; border-radius: 2px; }
.d3v-badgeselect:hover::-webkit-scrollbar-thumb { background: #b9c2cc; }

/* Fades say there is more in that direction. On the container, so they do not
   travel with the content. */
.d3v-badgeselect.can-scroll-left {
    mask-image: linear-gradient(to right, transparent 0, #000 28px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.d3v-badgeselect.can-scroll-right {
    mask-image: linear-gradient(to left, transparent 0, #000 28px);
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px);
}
.d3v-badgeselect.can-scroll-left.can-scroll-right {
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.d3v-badgeselect-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px 14px 6px 7px;
    border: none;                /* badges, not tabs */
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease;
}

.d3v-badgeselect-item:hover { background: #f0f2f5; }

/* Selection is fill only. Nothing gains an edge, so the row never reads as a
   tab strip even when one item is active. */
.d3v-badgeselect-item.is-selected { background: #e0ecf8; }
.d3v-badgeselect-item.is-selected:hover { background: #d3e4f5; }

.d3v-badgeselect-item:focus-visible {
    outline: 2px solid #2c5282;
    outline-offset: 1px;
}

.d3v-badgeselect-mark {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.2px;
    flex-shrink: 0;
    overflow: hidden;
    background: #ffffff;
}

.d3v-badgeselect-mark img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

.d3v-badgeselect-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    min-width: 0;
    user-select: none;
}

.d3v-badgeselect-text b {
    font-size: 12.5px;
    font-weight: 600;
    color: #555555;
    white-space: nowrap;
}

.d3v-badgeselect-item.is-selected .d3v-badgeselect-text b { color: #2c5282; }

.d3v-badgeselect-text i {
    font-style: normal;
    font-size: 9.5px;
    color: #a0a6ad;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.d3v-badgeselect-item.is-selected .d3v-badgeselect-text i { color: #5b83b3; }

/* The badges replace the dropdown, so its whole row goes. The <select> itself
   stays inside it, just never painted -- hiding only the bootstrap-select widget
   leaves the field's label orphaned above whatever follows. */
.has-badgeselect > .row,
.has-badgeselect > label {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .d3v-badgeselect { scroll-behavior: auto; }
    .d3v-badgeselect-item { transition: none; }
}

/* --------------------------------------------------------------------------
   Loading state. The options for both of these selects arrive over the
   network, so the row would otherwise be absent and then appear, moving
   everything below it. Skeletons hold the exact height of a real badge row.
   -------------------------------------------------------------------------- */
.d3v-badgeselect.is-loading { cursor: default; }

.d3v-badgeselect-item.is-skeleton {
    cursor: default;
    pointer-events: none;
    background: transparent;
}

.d3v-badgeselect-item.is-skeleton .d3v-badgeselect-mark,
.d3v-badgeselect-ghost {
    position: relative;
    overflow: hidden;
    background: #e9ecef;
}

.d3v-badgeselect-ghost {
    height: 10px;
    border-radius: 5px;
    display: inline-block;
}

.d3v-badgeselect-item.is-skeleton .d3v-badgeselect-mark::after,
.d3v-badgeselect-ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: d3v-badgeselect-shimmer 1.3s ease-in-out infinite;
}

@keyframes d3v-badgeselect-shimmer {
    100% { transform: translateX(100%); }
}

.d3v-badgeselect-loadingtext {
    font-size: 11px;
    color: #9aa3ad;
    white-space: nowrap;
    align-self: center;
    padding-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .d3v-badgeselect-item.is-skeleton .d3v-badgeselect-mark::after,
    .d3v-badgeselect-ghost::after { animation: none; }
}

.d3v-badgeselect-heading {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 6px 2px;
}

.d3v-badgeselect-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px 2px; }
.d3v-badgeselect-bar .d3v-badgeselect-heading { margin: 0; }
/* Beside the heading, on the left: the row it filters starts at the left edge, so a
   right-aligned box sat far from both the label it belongs to and the first badge. */
.d3v-badgeselect-searchwrap { position: relative; display: inline-block; }

.d3v-badgeselect-searchicon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #9aa4ae;
    pointer-events: none;
}

.d3v-badgeselect-search.form-control {
    width: 200px;
    height: 26px;
    padding: 3px 24px 3px 24px;
    font-size: 12px;
    border-radius: 3px;
    display: inline-block;
}

.d3v-badgeselect-search::-webkit-search-cancel-button { cursor: pointer; }
.d3v-badgeselect-item.d3v-badgeselect-filtered { display: none; }
.d3v-badgeselect.is-empty::after {
    content: 'No match';
    color: #656363;
    font-size: 12px;
    padding: 4px 2px;
}

/* The bar owns its own line even when the host lays its children out in a row,
   so the heading and its search sit above the badges everywhere. */
.d3v-badgeselect-bar { width: 100%; flex: 0 0 100%; }

/* /stylesheets/diaglog.css */
#footer-logs .d3v-diag-count:empty {
    display: none;
}

#footer-logs .d3v-diag-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: #721c24;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* /stylesheets/bulkup.css */
/* Bringing in several finished runs at once -- the drop, review and publish stages of
   CreateSimulationByBulkUploadView. */

.bulkup {
    padding: 4px 2px;
}

.bulkup-stage.hidden {
    display: none;
}

/* ---- drop ------------------------------------------------------------- */

.bulkup-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 28px 20px;
    border: 2px dashed #d8d8d8;
    border-radius: 8px;
    background: #fbfbfb;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.bulkup-drop.is-over {
    border-color: #2c5282;
    background: #f2f7fd;
}

.bulkup-drop-icon {
    margin-bottom: 10px;
    color: #c4c4c4;
    font-size: 40px;
}

.bulkup-drop.is-over .bulkup-drop-icon {
    color: #2c5282;
}

.bulkup-drop-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.bulkup-drop-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

.bulkup-drop-actions {
    margin-top: 18px;
}

.bulkup-drop-actions .btn + .btn {
    margin-left: 6px;
}

.bulkup-busy {
    padding: 12px 2px 0;
    font-size: 12px;
    color: #666;
}

/* Bootstrap sets input[type="file"] { display: block }, which outranks the [hidden]
   attribute rule (0,1,1 against 0,1,0) -- so these two inputs, which exist only to be
   clicked by the buttons above them, were showing as a pair of native "Choose Files"
   controls under the drop area. Matching on the attribute as well as the class outranks it
   back, and still only hides the ones actually marked hidden. */
.bulkup-input[hidden] {
    display: none;
}

.bulkup-busy.hidden {
    display: none;
}

/* ---- what the review asks --------------------------------------------- */

.bulkup-asks {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.bulkup-ask {
    flex: 1 1 0;
    min-width: 0;
}

.bulkup-ask-wide {
    flex: 2 1 0;
}

.bulkup-ask > label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #777;
}

.bulkup-ask > label .fa {
    width: 14px;
    color: #aaa;
}

.bulkup-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #999;
}

/* ---- the training question -------------------------------------------- */

.bulkup-train {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
}

.bulkup-train.is-on {
    border-color: #cfe0f3;
    background: #f5f9fe;
}

.bulkup-train-head {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
}

.bulkup-train-head input {
    margin-right: 6px;
}

.bulkup-train-body {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e4edf8;
}

.bulkup-train-cfg {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
}

.bulkup-train-cfg-name {
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 13px;
    color: #444;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulkup-train-cfg-name em {
    color: #999;
}

.bulkup-training {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f5f9fe;
    font-size: 13px;
    color: #2c5282;
}

.bulkup-training.is-ok {
    background: #eef7ee;
    color: #2d6a2d;
}

/* ---- the table -------------------------------------------------------- */

.bulkup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    color: #777;
}

.bulkup-count {
    font-weight: 600;
    color: #555;
}

.bulkup-spacer {
    flex: 1 1 auto;
}

.bulkup-table {
    width: 100%;
    margin: 0;
    font-size: 13px;
}

.bulkup-table > thead > tr > th {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #999;
}

.bulkup-table > tbody > tr > td {
    padding: 10px;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: top;
}

.bulkup-table .bulkup-pick {
    width: 32px;
}

.bulkup-row.is-off {
    opacity: 0.45;
}

.bulkup-name {
    font-weight: 600;
    color: #333;
    word-break: break-word;
}

.bulkup-sub {
    margin-top: 2px;
    font-size: 11px;
    color: #999;
}

.bulkup-state.is-ok {
    color: #2d6a2d;
}

.bulkup-state.is-bad {
    color: #a33;
}

.bulkup-size {
    width: 90px;
    color: #777;
    text-align: right;
    white-space: nowrap;
}

.bulkup-kind {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 1px 7px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    color: #666;
}

/* The three kinds a result can be read from, so a row that can be published reads
   differently at a glance from one that only carries a deck. */
.bulkup-kind-d3plot,
.bulkup-kind-binout,
.bulkup-kind-js3d {
    border-color: #cfe0f3;
    background: #f2f7fd;
    color: #2c5282;
}

.bulkup-warn {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #a3701f;
}

/* ---- progress --------------------------------------------------------- */

.bulkup-barcell {
    width: 200px;
}

.bulkup-bar {
    height: 6px;
    margin-top: 6px;
    border-radius: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.bulkup-bar > i {
    display: block;
    width: 0;
    height: 100%;
    background: #2c5282;
    transition: width 0.3s ease;
}

/* ---- footer ----------------------------------------------------------- */

.bulkup-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 2px 2px;
    border-top: 1px solid #f0f0f0;
}

.bulkup-ready {
    font-size: 12px;
    color: #777;
}

@media (max-width: 860px) {

    .bulkup-asks,
    .bulkup-train-body {
        display: block;
    }

    .bulkup-asks .bulkup-ask + .bulkup-ask,
    .bulkup-train-body .bulkup-ask + .bulkup-ask {
        margin-top: 12px;
    }

}

/* The bulk view carries its own Publish, so the dialog's shared footer controls -- which
   belong to the submit form -- stand down for this mode. A class, not a hidden attribute:
   the submit form re-asserts its footer on several timers after the panes settle, and
   anything merely hidden came back. */
.is-bulk-upload .modal-footer .modal-ok,
.is-bulk-upload .modal-footer .btn.queue,
.is-bulk-upload .modal-footer .btn.queue + .btn.dropdown-toggle,
.is-bulk-upload .modal-footer .ts-saveconfig-open,
.is-bulk-upload .modal-footer .ts-readiness {
    display: none !important;
}

/* /stylesheets/oneup.css */
/* Bringing in one finished run -- the drop, review and publish stages of
   CreateSimulationByUploadView. Deliberately the same shapes as bulkup.css: the two screens
   are the same three steps and should not look like different products. */

.oneup {
    padding: 4px 2px;
}

.oneup-stage.hidden {
    display: none;
}

/* ---- drop ------------------------------------------------------------- */

.oneup-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 28px 20px;
    border: 2px dashed #d8d8d8;
    border-radius: 8px;
    background: #fbfbfb;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.oneup-drop.is-over {
    border-color: #2c5282;
    background: #f2f7fd;
}

.oneup-drop-icon {
    margin-bottom: 10px;
    color: #c4c4c4;
    font-size: 40px;
}

.oneup-drop.is-over .oneup-drop-icon {
    color: #2c5282;
}

.oneup-drop-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.oneup-drop-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

.oneup-drop-actions {
    margin-top: 18px;
}

.oneup-drop-actions .btn + .btn {
    margin-left: 6px;
}

.oneup-busy {
    padding: 12px 2px 0;
    font-size: 12px;
    color: #666;
}

/* Bootstrap sets input[type="file"] { display: block }, which outranks the [hidden]
   attribute rule (0,1,1 against 0,1,0) -- so these two inputs, which exist only to be
   clicked by the buttons above them, were showing as a pair of native "Choose Files"
   controls under the drop area. Matching on the attribute as well as the class outranks it
   back, and still only hides the ones actually marked hidden. */
.oneup-input[hidden] {
    display: none;
}

.oneup-busy.hidden {
    display: none;
}

/* ---- the review's questions ------------------------------------------- */

.oneup-batch-note {
    margin-bottom: 14px;
    padding: 9px 12px;
    border: 1px solid #f0e0bd;
    border-radius: 6px;
    background: #fdf8ec;
    font-size: 12px;
    line-height: 1.5;
    color: #7a5d1f;
}

.oneup-asks {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.oneup-ask {
    flex: 1 1 0;
    min-width: 0;
}

.oneup-ask-wide {
    flex: 2 1 0;
}

.oneup-ask > label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #777;
}

.oneup-ask > label .fa {
    width: 14px;
    color: #aaa;
}

.oneup-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.4;
    color: #999;
}

/* ---- tags -------------------------------------------------------------- */

.oneup-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.oneup-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px 1px 8px;
    border-radius: 10px;
    background: #eef3fa;
    font-size: 12px;
    color: #2c5282;
    white-space: nowrap;
}

.oneup-tag a {
    color: #7a9bc4;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
}

.oneup-tag a:hover {
    color: #a33;
}

.oneup-tag-add {
    flex: 1 1 60px;
    min-width: 60px;
    border: none;
    outline: none;
    font-size: 12px;
}

/* ---- the file table ---------------------------------------------------- */

.oneup-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    color: #777;
}

.oneup-count {
    font-weight: 600;
    color: #555;
}

.oneup-spacer {
    flex: 1 1 auto;
}

.oneup-table {
    width: 100%;
    margin: 0;
    font-size: 13px;
}

.oneup-table > thead > tr > th {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #999;
}

.oneup-table > tbody > tr > td {
    padding: 8px 10px;
    border-bottom: 1px solid #f4f4f4;
    vertical-align: top;
}

.oneup-table .oneup-pick {
    width: 32px;
}

.oneup-row.is-off {
    opacity: 0.45;
}

.oneup-row.is-main {
    background: #f7fafd;
}

.oneup-fname {
    font-weight: 600;
    color: #333;
    word-break: break-all;
}

.oneup-fpath {
    margin-top: 2px;
    font-size: 11px;
    color: #aaa;
    word-break: break-all;
}

.oneup-mainbadge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    background: #2c5282;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
}

.oneup-kind {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    background: #fff;
    font-size: 11px;
    color: #666;
}

/* The three kinds a result can be read from, so a drop that can produce a result reads
   differently at a glance from one that only carries a deck. */
.oneup-kind-d3plot,
.oneup-kind-binout,
.oneup-kind-js3d {
    border-color: #cfe0f3;
    background: #f2f7fd;
    color: #2c5282;
}

.oneup-hint-inline {
    margin-left: 6px;
    font-size: 11px;
    color: #aaa;
}

.oneup-size {
    width: 90px;
    color: #777;
    text-align: right;
    white-space: nowrap;
}

/* ---- publishing -------------------------------------------------------- */

.oneup-progress {
    padding: 28px 4px;
}

.oneup-progress-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.oneup-progress-line {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

.oneup-bar {
    height: 6px;
    margin-top: 12px;
    border-radius: 3px;
    background: #f0f0f0;
    overflow: hidden;
}

.oneup-bar > i {
    display: block;
    height: 100%;
    background: #2c5282;
    transition: width 0.3s ease;
}

.oneup-done,
.oneup-failed {
    padding: 22px 18px;
    border-radius: 6px;
    font-size: 14px;
}

.oneup-done {
    background: #eef7ee;
    color: #2d6a2d;
}

.oneup-failed {
    background: #fdf1f1;
    color: #a33;
    word-break: break-word;
}

/* ---- footer ------------------------------------------------------------ */

.oneup-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 2px 2px;
    border-top: 1px solid #f0f0f0;
}

.oneup-failed .oneup-foot {
    border-top-color: #f3dede;
}

.oneup-ready {
    font-size: 12px;
    color: #777;
}

/* The single-upload view carries its own action, so the dialog's shared footer controls --
   which belong to the submit form -- stand down. A class, not a hidden attribute: the submit
   form re-asserts its footer on several timers after the panes settle. */
.is-single-upload .modal-footer .modal-ok,
.is-single-upload .modal-footer .btn.queue,
.is-single-upload .modal-footer .btn.queue + .btn.dropdown-toggle,
.is-single-upload .modal-footer .ts-saveconfig-open,
.is-single-upload .modal-footer .ts-readiness {
    display: none !important;
}

@media (max-width: 860px) {

    .oneup-asks {
        display: block;
    }

    .oneup-asks .oneup-ask + .oneup-ask {
        margin-top: 12px;
    }

}

/* Two chosen files with one name would overwrite each other in the run directory, so the
   review says so and Create stays off until one of them is turned off. */
.oneup-dupe-warn {
    margin: 10px 0 0;
    padding: 9px 12px;
    border: 1px solid #f0d4d4;
    border-radius: 6px;
    background: #fdf1f1;
    font-size: 12px;
    line-height: 1.5;
    color: #a33;
}

.oneup-row.is-dupe {
    background: #fdf6f6;
}

.oneup-dupe-note {
    margin-top: 3px;
    font-size: 11px;
    color: #a33;
}

/* /stylesheets/hpcsubmit.css */
/* ==========================================================================
   HPC Submit Modal — Fora Design System
   Jira: R0-3240
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes hpcShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes hpcFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hpcFlyUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hpcSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes hpcGlowIn {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    40%  { box-shadow: 0 0 12px 4px rgba(76, 175, 80, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* --------------------------------------------------------------------------
   Modal Shell
   -------------------------------------------------------------------------- */

.hpcsubmitmodalview .modal-dialog {
    width: 80vw;
    min-width: 960px;
    margin: 0 auto;
}

.hpcsubmitmodalview .modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hpcsubmitmodalview .modal-content {
    height: 80vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: none;
}

/* --------------------------------------------------------------------------
   Header — Pills & Close
   -------------------------------------------------------------------------- */

.hpcsubmit-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

.hpcsubmit-pills-wrapper {
    position: relative;
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 22px;
    padding: 3px;
}

.hpcsubmit-pills-slider {
    position: absolute;
    top: 3px;
    height: calc(100% - 6px);
    width: calc(50% - 3px);
    background: #337ab7;
    border-radius: 20px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    left: 3px;
}

.hpcsubmit-pills-wrapper[data-active="manage"] .hpcsubmit-pills-slider {
    left: 50%;
}

.hpcsubmit-pills {
    margin: 0;
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
}

.hpcsubmit-pills > li {
    flex: 1;
    text-align: center;
}

.hpcsubmit-pills > li > a {
    padding: 7px 18px;
    border-radius: 20px;
    color: #555;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    transition: color 0.25s ease;
    border: 1px solid transparent;
    background: transparent !important;
}

.hpcsubmit-pills > li > a:hover {
    color: #333;
    background: transparent !important;
}

.hpcsubmit-pills > li.active > a,
.hpcsubmit-pills > li.active > a:hover,
.hpcsubmit-pills > li.active > a:focus {
    background: transparent !important;
    color: #fff;
    border-color: transparent;
}

.hpcsubmit-header .close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.5;
    margin: 0;
    padding: 0;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
}

.hpcsubmit-header .close:hover {
    opacity: 1;
    background: #f0f0f0;
}

/* Fullscreen toggle button */
.hpcsubmit-fullscreen-btn {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    color: #333;
    padding: 0;
}

.hpcsubmit-fullscreen-btn:hover {
    opacity: 1;
    background: #f0f0f0;
}

/* Fullscreen state */
.hpcsubmitmodalview.fullscreen .modal-dialog {
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    margin: 0;
}

.hpcsubmitmodalview.fullscreen .modal-content {
    height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
}

.hpcsubmitmodalview.fullscreen .modal {
    padding: 0;
}

/* Swap icon when fullscreen */
.hpcsubmitmodalview.fullscreen .hpcsubmit-fullscreen-btn .glyphicon::before {
    content: "\e097"; /* glyphicon-resize-small */
}

/* Classic view toggle (top-left, mirrors the close button) */
.hpcsubmit-classic-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #e67e22;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid #e67e22;
    transition: all 0.2s ease;
}
.hpcsubmit-classic-btn:hover,
.hpcsubmit-classic-btn:focus {
    color: #fff !important;
    background: #e67e22 !important;
    border-color: #e67e22;
    text-decoration: none;
}
.hpcsubmit-classic-btn .glyphicon {
    color: #e67e22;
    font-size: 12px;
    line-height: 1;
}
.hpcsubmit-classic-btn:hover .glyphicon,
.hpcsubmit-classic-btn:focus .glyphicon {
    color: #fff;
}

/* "Try New Submit" button in the old version's tab area */
.hpcsubmit-try-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #e67e22;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 14px;
    border: 1px solid #e67e22;
    transition: all 0.2s ease;
}
.hpcsubmit-try-new-btn:hover,
.hpcsubmit-try-new-btn:focus {
    color: #fff !important;
    background: #e67e22 !important;
    border-color: #e67e22;
    text-decoration: none;
}
.hpcsubmit-try-new-btn .glyphicon {
    color: #e67e22;
    font-size: 11px;
}
.hpcsubmit-try-new-btn:hover .glyphicon,
.hpcsubmit-try-new-btn:focus .glyphicon {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Body & Tabs
   -------------------------------------------------------------------------- */

.hpcsubmit-body {
    flex: 1;
    overflow: hidden;
}

.hpcsubmit-tab-content {
    height: 100%;
}

.hpcsubmit-tab-content > .tab-pane {
    height: 100%;
    overflow: hidden;
    display: none;
}

.hpcsubmit-tab-content > .tab-pane.active {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Stage Indicators
   -------------------------------------------------------------------------- */

.hpcsubmit-stage-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Labels (shared)
   -------------------------------------------------------------------------- */

.hpcsubmit-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

/* --------------------------------------------------------------------------
   Section Headers (Advanced view — icon box + title)
   -------------------------------------------------------------------------- */

.hpcsubmit-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}

.hpcsubmit-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Icon color variants */
.hpcsubmit-section-icon.icon-files    { background: #e8e0f0; color: #6a4c93; }
.hpcsubmit-section-icon.icon-metadata { background: #e0ecf8; color: #2c5282; }
.hpcsubmit-section-icon.icon-hpc      { background: #f0f0f0; color: #555; }
.hpcsubmit-section-icon.icon-solver    { background: #fef3cd; color: #856404; }
.hpcsubmit-section-icon.icon-processor { background: #e8daef; color: #6c3483; }
.hpcsubmit-section-icon.icon-resubmit  { background: #d1ecf1; color: #0c5460; }
.hpcsubmit-section-icon.icon-server   { background: none; color: #333; width: auto; height: auto; flex: 0 0 auto; font-size: 16px; }
.hpcsubmit-section-icon.icon-list     { background: none; color: #333; width: auto; height: auto; flex: 0 0 auto; font-size: 16px; }
.hpcsubmit-section-icon.icon-edit     { background: none; color: #333; width: auto; height: auto; flex: 0 0 auto; font-size: 16px; }
.hpcsubmit-section-icon.icon-time     { background: none; color: #333; width: auto; height: auto; flex: 0 0 auto; font-size: 16px; }
.hpcsubmit-section-icon.icon-settings { background: #f0f0f0; color: #555; }
.hpcsubmit-section-icon.icon-jobs     { background: none; color: #333; width: auto; height: auto; flex: 0 0 auto; font-size: 16px; }

/* --------------------------------------------------------------------------
   Basic View
   -------------------------------------------------------------------------- */

.hpcsubmit-basic {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    animation: hpcFadeIn 0.25s ease;
}

.hpcsubmit-basic-columns {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.hpcsubmit-basic-left {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 20px 24px 50px;
}

/* Left sidebar: removed — server status merged into right sidebar */
.hpcsubmit-basic-left-sidebar {
    display: none;
    width: 0;
    flex-shrink: 0;
    border-right: 1px solid #e8ecf0;
    overflow-y: auto;
    padding: 16px;
    background: #fafbfc;
    position: relative;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}

.hpcsubmit-basic-left-sidebar.collapsed {
    width: 0;
    padding: 0;
    border-right-color: transparent;
    overflow: hidden;
}

/* Right sidebar: jobs panel */
.hpcsubmit-basic-right-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid #e8ecf0;
    overflow-y: auto;
    padding: 16px;
    background: #fafbfc;
    position: relative;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
}

.hpcsubmit-basic-right-sidebar.collapsed {
    width: 0;
    padding: 0;
    border-left-color: transparent;
    overflow: hidden;
}

/* --- Sidebar toggle pill (Status / Jobs) --- */
.hpcsubmit-sidebar-toggle-wrapper {
    display: flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-bottom: 12px;
    position: relative;
}

.hpcsubmit-sidebar-toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 4px);
    height: calc(100% - 6px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hpcsubmit-sidebar-toggle-wrapper[data-active="jobs"] .hpcsubmit-sidebar-toggle-slider {
    left: calc(50% + 1px);
}

.hpcsubmit-sidebar-toggle-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.hpcsubmit-sidebar-toggle-btn:hover {
    color: #555;
}

.hpcsubmit-sidebar-toggle-btn.active {
    color: #337ab7;
}

.hpcsubmit-sidebar-toggle-btn .glyphicon {
    font-size: 10px;
    margin-right: 3px;
}

/* Sidebar panes — only show the active one */
.hpcsubmit-sidebar-pane {
    display: none;
}

.hpcsubmit-sidebar-pane.active {
    display: block;
}

/* --- Resize handles (draggable border between sidebar and center) --- */
.hpcsubmit-resize-handle {
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 6;
    transition: background 0.15s ease;
}

.hpcsubmit-resize-handle:hover,
.hpcsubmit-resize-handle.dragging {
    background: rgba(51, 122, 183, 0.15);
}

/* Hide resize handle when its sidebar is collapsed */
.hpcsubmit-basic-left-sidebar.collapsed ~ .hpcsubmit-resize-left {
    display: none;
}

.hpcsubmit-resize-right.hidden {
    display: none;
}

/* --- Sidebar expand tabs (semicircle, vertically centered) --- */
.hpcsubmit-sidebar-expand-tab {
    display: none;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 28px;
    height: 56px;
    background: #337ab7;
    border: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 5;
    text-decoration: none;
    transition: width 0.2s ease, background 0.15s ease;
}

.hpcsubmit-sidebar-expand-tab .glyphicon {
    color: #fff;
}

.hpcsubmit-sidebar-expand-tab:hover {
    width: 34px;
    background: #286090;
    color: #fff;
    text-decoration: none;
}

.hpcsubmit-expand-left {
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
    margin-left: -1px;
}

.hpcsubmit-expand-right {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
    margin-right: -1px;
}

/* Show expand tabs when their sidebar is collapsed — fade+slide in */
.hpcsubmit-expand-left.visible {
    display: flex;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hpcsubmit-expand-left.visible.shown {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease, width 0.2s ease, background 0.15s ease;
}

.hpcsubmit-expand-right.visible {
    display: flex;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.hpcsubmit-expand-right.visible.shown {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.25s ease, transform 0.25s ease, width 0.2s ease, background 0.15s ease;
}

/* Disable sidebar transition during drag (would fight the mouse) */
.hpcsubmit-basic-left-sidebar.resizing,
.hpcsubmit-basic-right-sidebar.resizing {
    transition: none;
}

/* --- Footer transitions for sidebar collapse --- */

.hpcsubmit-basic-settings {
    margin-bottom: 20px;
}

.hpcsubmit-basic-files {
    margin-bottom: 16px;
}

.hpcsubmit-basic-summary {
    margin-bottom: 16px;
}

.hpcsubmit-basic-footer {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 320px; /* match right sidebar width */
    text-align: center;
    z-index: 10;
    pointer-events: none;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hpcsubmit-basic-footer .btn {
    pointer-events: auto;
}

.hpcsubmit-basic-footer .hpcsubmit-submit-btn {
    box-shadow: 0 4px 16px rgba(51, 122, 183, 0.4);
}

.hpcsubmit-basic-footer .hpcsubmit-save-submit-btn {
    min-width: 200px;
    padding: 10px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(92, 184, 92, 0.4);
    margin-right: 8px;
    transition: all 0.2s ease;
}

.hpcsubmit-basic-footer .hpcsubmit-save-submit-btn:hover {
    box-shadow: 0 2px 8px rgba(92, 184, 92, 0.3);
    transform: translateY(-1px);
}

.hpcsubmit-basic-footer .hpcsubmit-save-submit-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.hpcsubmit-basic-footer .hpcsubmit-save-submit-btn .glyphicon {
    margin-right: 6px;
}

/* Submitting state — disable and dim the form */
.hpcsubmit-submitting {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.hpcsubmit-basic-footer .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Setting Summary Card (fora tool-card style)
   -------------------------------------------------------------------------- */

.hpcsubmit-setting-summary {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 0;
    position: relative;
    background: #fff;
    transition: border-color 0.2s ease;
}

.hpcsubmit-setting-summary:hover {
    border-color: #ccc;
}

.hpcsubmit-setting-summary-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    min-height: 56px;
}

.hpcsubmit-setting-summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 14px;
    flex: 0 0 36px;
}

.hpcsubmit-setting-summary-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.hpcsubmit-setting-summary-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpcsubmit-setting-summary-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    flex-wrap: wrap;
}

.hpcsubmit-setting-summary-meta span {
    white-space: nowrap;
}

.hpcsubmit-edit-setting {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex: 0 0 30px;
    position: static;
    top: auto;
    right: auto;
}

.hpcsubmit-edit-setting:hover {
    background: #f0f0f0;
    color: #333;
}

/* Legacy summary fallback (for rows/cols structure) */
.hpcsubmit-summary-item {
    margin-bottom: 4px;
}

.hpcsubmit-summary-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    display: block;
    letter-spacing: 0.3px;
}

.hpcsubmit-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

/* --------------------------------------------------------------------------
   Dropzone
   -------------------------------------------------------------------------- */

.hpcsubmit-dropzone-compact,
.hpcsubmit-dropzone-full {
    border: 2px dashed #d0d7de;
    border-radius: 8px;
    text-align: center;
    padding: 24px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 100px;
}

.hpcsubmit-dropzone-compact:hover,
.hpcsubmit-dropzone-full:hover {
    border-color: #337ab7;
    background: #f0f6ff;
}

.hpcsubmit-dropzone-compact .dz-message,
.hpcsubmit-dropzone-full .dz-message {
    color: #888;
}

.hpcsubmit-dropzone-compact .dz-message i,
.hpcsubmit-dropzone-full .dz-message i {
    font-size: 24px;
    color: #bbb;
    display: block;
    margin-bottom: 6px;
}

.hpcsubmit-dropzone-compact .dz-message p,
.hpcsubmit-dropzone-full .dz-message p {
    margin: 6px 0 0;
    font-size: 13px;
}

.hpcsubmit-dropzone-compact .dz-message p,
.hpcsubmit-dropzone-full .dz-message p {
    pointer-events: none;
}

.hpcsubmit-file-options {
    margin-top: 10px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Fora-style action buttons for file options */
.hpcsubmit-file-options .btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.hpcsubmit-file-options .btn:hover {
    background: #f5f5f5;
    color: #333;
}

.hpcsubmit-file-options .btn i,
.hpcsubmit-file-options .btn .glyphicon {
    margin-right: 3px;
}

/* Multi-sim pill toggle */
.hpcsubmit-multisim-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.hpcsubmit-multisim-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.hpcsubmit-multisim-pill-label {
    font-size: 11px;
    font-weight: 600;
    color: #777;
}

.hpcsubmit-multisim-pill-switch {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #ccc;
    position: relative;
    transition: background 0.2s ease;
}

.hpcsubmit-multisim-pill-knob {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.hpcsubmit-multisim-pill[data-state="on"] .hpcsubmit-multisim-pill-switch {
    background: #337ab7;
}

.hpcsubmit-multisim-pill[data-state="on"] .hpcsubmit-multisim-pill-knob {
    left: 16px;
}

.hpcsubmit-multisim-pill[data-state="on"] .hpcsubmit-multisim-pill-label {
    color: #337ab7;
}

.hpcsubmit-file-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* File item card */
.hpcsubmit-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fff;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hpcsubmit-file-item:hover {
    border-color: #d0d0d0;
    background: #fafafa;
}

.hpcsubmit-file-item.main-model {
    border-color: #337ab7;
    background: #f0f7ff;
}

.hpcsubmit-file-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #f0f0f0;
    color: #777;
    font-size: 13px;
}

.hpcsubmit-file-item.main-model .hpcsubmit-file-icon {
    background: #dae8f5;
    color: #337ab7;
}

.hpcsubmit-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hpcsubmit-file-name {
    font-size: 12.5px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpcsubmit-file-meta {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #999;
}

.hpcsubmit-file-type {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #aaa;
}

.hpcsubmit-file-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hpcsubmit-file-actions .makeMain {
    display: inline-block;
    width: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    color: #999;
    background: transparent;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.hpcsubmit-file-actions .makeMain:hover {
    color: #337ab7;
    border-color: #337ab7;
}

.hpcsubmit-file-actions .makeMain.active {
    color: #fff;
    background: #337ab7;
    border-color: #337ab7;
}

.hpcsubmit-file-actions .remove-file,
.hpcsubmit-file-actions .remove-server-file {
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
    padding: 2px;
    transition: color 0.15s ease;
}

.hpcsubmit-file-actions .remove-file:hover,
.hpcsubmit-file-actions .remove-server-file:hover {
    color: #d9534f;
}

/* Hide dropzone progress bar until processing */
.hpcsubmit-file-item .dz-progress {
    display: none;
}

.hpcsubmit-file-item.dz-processing .dz-progress {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #eee;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.hpcsubmit-file-item .dz-progress .dz-upload {
    display: block;
    height: 100%;
    background: #337ab7;
    transition: width 0.3s ease;
}

/* --------------------------------------------------------------------------
   Advanced View
   -------------------------------------------------------------------------- */

.hpcsubmit-advanced {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: hpcFadeIn 0.25s ease;
}

.hpcsubmit-back-to-basic {
    padding: 8px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}

.hpcsubmit-back-to-basic a {
    font-size: 13px;
    color: #337ab7;
    text-decoration: none;
    transition: color 0.15s ease;
}

.hpcsubmit-back-to-basic a:hover {
    color: #23527c;
}

.hpcsubmit-advanced-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.hpcsubmit-advanced-footer {
    text-align: center;
    padding: 14px 20px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}

/* Form sections spacing */
.hpcsubmit-metadata,
.hpcsubmit-hpcresources,
.hpcsubmit-solverattrs,
.hpcsubmit-resubmit {
    margin-bottom: 24px;
}

/* Form controls refinement */
.hpcsubmit-advanced .form-control {
    border-radius: 6px;
    border-color: #d0d7de;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hpcsubmit-advanced .form-control:focus {
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

.hpcsubmit-advanced .form-group label,
.hpcsubmit-advanced .control-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.hpcsubmit-toggle-more-info {
    font-size: 12px;
    color: #337ab7;
    transition: color 0.15s ease;
}

.hpcsubmit-toggle-more-info:hover {
    color: #23527c;
}

/* Tag browser container */
#hpcsubmit-tagsbrowser-container {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    z-index: 10;
    max-height: 260px;
    overflow-y: auto;
}

#hpcsubmit-tagsbrowser-container.hidden {
    display: none;
}

#hpcsubmit-tagbrowser {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    transition: all 0.2s ease;
}

#hpcsubmit-tagbrowser:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* Solver specific attrs */
.hpcsubmit-solver-specific-attrs .form-group {
    margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Buttons (shared)
   -------------------------------------------------------------------------- */

.hpcsubmit-submit-btn {
    min-width: 200px;
    padding: 10px 32px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hpcsubmit-submit-btn:hover:not([disabled]) {
    box-shadow: 0 2px 8px rgba(51, 122, 183, 0.3);
    transform: translateY(-1px);
}

.hpcsubmit-submit-btn:active:not([disabled]) {
    transform: translateY(0);
    box-shadow: none;
}

.hpcsubmit-submit-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.hpcsubmit-submit-btn .glyphicon,
.hpcsubmit-submit-btn i {
    margin-right: 6px;
}

/* Fora-style default button */
.hpcsubmit-btn-default {
    font-size: 12px;
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    transition: background 0.15s ease, color 0.15s ease;
}

.hpcsubmit-btn-default:hover {
    background: #f5f5f5;
    color: #333;
}

/* --------------------------------------------------------------------------
   Save Setting Modal
   -------------------------------------------------------------------------- */

.hpcsubmit-savemodal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    animation: hpcFadeIn 0.2s ease;
}

.hpcsubmit-savemodal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
}

.hpcsubmit-savemodal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.hpcsubmit-savemodal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.hpcsubmit-savemodal-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.hpcsubmit-savemodal-body {
    padding: 16px 20px;
}

.hpcsubmit-savemodal-body .radio {
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.hpcsubmit-savemodal-body .radio:hover {
    background: #fafbfc;
}

.hpcsubmit-savemodal-body .radio label {
    font-size: 13px;
    color: #333;
}

.hpcsubmit-savemodal-footer {
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hpcsubmit-savemodal-footer .btn {
    border-radius: 4px;
    font-size: 12px;
    padding: 6px 16px;
    transition: all 0.15s ease;
}

/* --------------------------------------------------------------------------
   Status View
   -------------------------------------------------------------------------- */

.hpcsubmit-status {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: hpcFadeIn 0.25s ease;
}

.hpcsubmit-status-items {
    flex: 1;
    overflow-y: auto;
}

/* Status item — fora tool-card pattern */
.hpcsubmit-status-item {
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: visible;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    padding: 0;
    background: #fff;
}

.hpcsubmit-status-item-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-height: 56px;
    gap: 12px;
}

.hpcsubmit-status-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    font-size: 14px;
    color: #555;
    flex: 0 0 36px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hpcsubmit-status-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.hpcsubmit-status-item-name {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpcsubmit-status-item-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.hpcsubmit-status-item-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* Status badge (pill) */
.hpcsubmit-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hpcsubmit-status-badge.status-pending    { background: #f0f0f0; color: #666; }
.hpcsubmit-status-badge.status-uploading  { background: #e0ecf8; color: #2c5282; }
.hpcsubmit-status-badge.status-submitting { background: #fef3cd; color: #856404; }
.hpcsubmit-status-badge.status-submitted  { background: #d4edda; color: #155724; }
.hpcsubmit-status-badge.status-solving    { background: #e6f7ff; color: #096dd9; }
.hpcsubmit-status-badge.status-running    { background: #e6f7ff; color: #096dd9; }
.hpcsubmit-status-badge.status-queued     { background: #fffbe6; color: #d48806; }
.hpcsubmit-status-badge.status-held       { background: #fff7e6; color: #d46b08; }
.hpcsubmit-status-badge.status-finished   { background: #f6ffed; color: #389e0d; }
.hpcsubmit-status-badge.status-completed  { background: #f6ffed; color: #389e0d; }
.hpcsubmit-status-badge.status-stopped    { background: #f5f5f5; color: #595959; }
.hpcsubmit-status-badge.status-preempted  { background: #f5f5f5; color: #595959; }
.hpcsubmit-status-badge.status-failed,
.hpcsubmit-status-badge.status-failed_to_submit,
.hpcsubmit-status-badge.status-error      { background: #f8d7da; color: #721c24; }

/* Shimmer for uploading/running state */
.hpcsubmit-status-item[data-status="uploading"],
.hpcsubmit-status-item[data-status="submitting"] {
    background: linear-gradient(110deg, #ffffff 30%, #f0f7ff 50%, #ffffff 70%);
    background-size: 200% 100%;
    animation: hpcShimmer 2s linear infinite;
    border-color: #cce0f5;
}

/* Success state */
.hpcsubmit-status-item[data-status="submitted"],
.hpcsubmit-status-item[data-status="completed"] {
    background-color: #f6fef6;
    border-color: #c3e6cb;
    animation: none;
}

.hpcsubmit-status-item[data-status="submitted"] .hpcsubmit-status-item-icon,
.hpcsubmit-status-item[data-status="completed"] .hpcsubmit-status-item-icon {
    background: #d4edda;
    color: #155724;
}

/* Failure state */
.hpcsubmit-status-item[data-status="failed"],
.hpcsubmit-status-item[data-status="error"] {
    background-color: #fef6f6;
    border-color: #f5c6cb;
    animation: none;
}

.hpcsubmit-status-item[data-status="failed"] .hpcsubmit-status-item-icon,
.hpcsubmit-status-item[data-status="error"] .hpcsubmit-status-item-icon {
    background: #f8d7da;
    color: #721c24;
}

/* Thin progress bar */
.hpcsubmit-status-item .progress {
    height: 4px;
    border-radius: 2px;
    margin: 0 16px 12px;
    background: #e0e0e0;
    box-shadow: none;
}

.hpcsubmit-status-item .progress-bar {
    border-radius: 2px;
    background: #4caf50;
    transition: width 0.3s ease;
}

/* ── Debug Console ── */
.hpcsubmit-debug-console {
    margin: 16px 0 0;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    overflow: hidden;
}

.hpcsubmit-debug-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f8f9fa;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e0e4e8;
    cursor: pointer;
}

.hpcsubmit-debug-header .pull-right {
    margin-left: auto;
    color: #999;
}

.hpcsubmit-debug-output {
    max-height: 160px;
    overflow-y: auto;
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 12px 14px;
    margin: 0;
    border: 0;
    border-radius: 0;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    transition: max-height 0.2s ease;
}

.hpcsubmit-debug-console.collapsed .hpcsubmit-debug-output {
    max-height: 0;
    padding: 0 14px;
    overflow: hidden;
}

.hpcsubmit-debug-error {
    color: #f38ba8;
}

/* ── Result Summary ── */
.hpcsubmit-result-summary {
    margin: 16px 0 0;
    animation: hpcFadeIn 0.3s ease;
}

.hpcsubmit-result-success {
    border: 1px solid #b7eb8f;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.hpcsubmit-result-success-header {
    background: #f6ffed;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    color: #389e0d;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #b7eb8f;
}

.hpcsubmit-result-success-header .glyphicon {
    font-size: 16px;
}

.hpcsubmit-result-failure {
    border: 1px solid #ffa39e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.hpcsubmit-result-failure-header {
    background: #fff1f0;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    color: #cf1322;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #ffa39e;
}

.hpcsubmit-result-failure-header .glyphicon {
    font-size: 16px;
}

.hpcsubmit-result-failure p {
    padding: 12px 16px;
    margin: 0;
    font-size: 12px;
    color: #555;
}

.hpcsubmit-result-group {
    padding: 12px 16px;
}

.hpcsubmit-result-group-title {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.hpcsubmit-result-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    margin-bottom: 6px;
    text-decoration: none;
    color: #333;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hpcsubmit-result-link:hover {
    border-color: #b7eb8f;
    background: #f6ffed;
    text-decoration: none;
    color: #333;
}

.hpcsubmit-result-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5e9;
    color: #389e0d;
    font-size: 13px;
    flex: 0 0 32px;
}

.hpcsubmit-result-link-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.hpcsubmit-result-link-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #999;
}

.hpcsubmit-result-link-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpcsubmit-result-link-meta {
    font-size: 11px;
    color: #888;
    margin-top: 1px;
}

.hpcsubmit-result-link-arrow {
    color: #ccc;
    font-size: 11px;
    flex: 0 0 auto;
    transition: color 0.15s ease;
}

.hpcsubmit-result-link:hover .hpcsubmit-result-link-arrow {
    color: #389e0d;
}

/* ── Jobs Sidebar Panel ── */
/* (moved to .hpcsubmit-basic-right-sidebar above) */

.hpcsubmit-jobspanel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hpcsubmit-jobspanel-empty {
    text-align: center;
    padding: 24px 12px;
    color: #bbb;
}

.hpcsubmit-jobspanel-empty .glyphicon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.hpcsubmit-jobspanel-empty p {
    font-size: 12px;
    margin: 0;
}

.hpcsubmit-jobspanel .hpcsubmit-section-header {
    margin-bottom: 10px;
}

/* Filters */
.hpcsubmit-jobspanel-filters {
    margin-bottom: 10px;
}

.hpcsubmit-jobspanel-search {
    font-size: 12px;
    padding: 5px 8px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #d0d7de;
    margin-bottom: 8px;
}

.hpcsubmit-jobspanel-search:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.15);
}

.hpcsubmit-jobspanel-status-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.hpcsubmit-jobspanel-status-btn {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid #d0d7de;
    background: #fff;
    color: #555;
    font-weight: 500;
    transition: all 0.15s ease;
}

.hpcsubmit-jobspanel-status-btn:hover {
    background: #f0f0f0;
    border-color: #b0b8c0;
}

.hpcsubmit-jobspanel-status-btn.active {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.hpcsubmit-section-icon.icon-jobs {
    background: #e8f4fd;
    color: #337ab7;
}

/* ── Job Card (sidebar) ── */
.hpcsubmit-jobcard {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    overflow: hidden;
}

.hpcsubmit-jobcard:hover {
    border-color: #c0c8d0;
    background: #f6f8fa;
    text-decoration: none;
    color: inherit;
}

.hpcsubmit-jobcard:focus {
    text-decoration: none;
    color: inherit;
}

.hpcsubmit-jobcard[data-status="running"],
.hpcsubmit-jobcard[data-status="solving"] {
    border-color: #91d5ff;
    background: #e6f7ff;
}

.hpcsubmit-jobcard[data-status="queued"],
.hpcsubmit-jobcard[data-status="held"] {
    border-color: #ffe58f;
    background: #fffbe6;
}

.hpcsubmit-jobcard[data-status="completed"],
.hpcsubmit-jobcard[data-status="finished"] {
    border-color: #b7eb8f;
    background: #f6ffed;
}

.hpcsubmit-jobcard[data-status="stopped"],
.hpcsubmit-jobcard[data-status="preempted"] {
    border-color: #d9d9d9;
    background: #f5f5f5;
}

.hpcsubmit-jobcard[data-status="failed"],
.hpcsubmit-jobcard[data-status="failed_to_submit"],
.hpcsubmit-jobcard[data-status="error"] {
    border-color: #ffa39e;
    background: #fff1f0;
}

.hpcsubmit-jobcard-pending[data-status="uploading"],
.hpcsubmit-jobcard-pending[data-status="submitting"],
.hpcsubmit-jobcard-pending[data-status="pending"] {
    border-color: #91d5ff;
    background: #e6f7ff;
}

.hpcsubmit-jobcard-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    font-size: 12px;
    color: #555;
    flex: 0 0 26px;
}

.hpcsubmit-jobcard[data-status="running"] .hpcsubmit-jobcard-icon,
.hpcsubmit-jobcard[data-status="solving"] .hpcsubmit-jobcard-icon {
    background: #bae7ff;
    color: #096dd9;
}

.hpcsubmit-jobcard[data-status="queued"] .hpcsubmit-jobcard-icon,
.hpcsubmit-jobcard[data-status="held"] .hpcsubmit-jobcard-icon {
    background: #fff1b8;
    color: #d48806;
}

.hpcsubmit-jobcard[data-status="completed"] .hpcsubmit-jobcard-icon,
.hpcsubmit-jobcard[data-status="finished"] .hpcsubmit-jobcard-icon {
    background: #d9f7be;
    color: #389e0d;
}

.hpcsubmit-jobcard[data-status="failed"] .hpcsubmit-jobcard-icon,
.hpcsubmit-jobcard[data-status="failed_to_submit"] .hpcsubmit-jobcard-icon,
.hpcsubmit-jobcard[data-status="error"] .hpcsubmit-jobcard-icon {
    background: #ffccc7;
    color: #cf1322;
}

.hpcsubmit-jobcard-pending .hpcsubmit-jobcard-icon {
    background: #bae7ff;
    color: #096dd9;
}

.hpcsubmit-jobcard-info {
    flex: 1 1 auto;
    min-width: 0;
}

.hpcsubmit-jobcard-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpcsubmit-jobcard-meta {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progress bar inside pending job cards */
.hpcsubmit-jobcard .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: transparent;
}

.hpcsubmit-jobcard .progress-bar {
    background: #1890ff;
    transition: width 0.3s ease;
}

.hpcsubmit-jobcard[data-status="completed"] .progress-bar {
    background: #52c41a;
}

.hpcsubmit-jobcard[data-status="failed"] .progress-bar,
.hpcsubmit-jobcard[data-status="error"] .progress-bar {
    background: #ff4d4f;
}

/* ── Skeleton loading cards (shimmer placeholders) ── */
.hpcsubmit-jobcard-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    background: #fff;
}

.hpcsubmit-skeleton-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: hpcShimmer 1.5s ease infinite;
    flex: 0 0 26px;
}

.hpcsubmit-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpcsubmit-skeleton-line {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: hpcShimmer 1.5s ease infinite;
}

.hpcsubmit-skeleton-line.short { width: 60%; }
.hpcsubmit-skeleton-line.medium { width: 85%; }

/* Stagger shimmer timing for each skeleton card */
.hpcsubmit-jobcard-skeleton:nth-child(2) .hpcsubmit-skeleton-icon,
.hpcsubmit-jobcard-skeleton:nth-child(2) .hpcsubmit-skeleton-line { animation-delay: 0.15s; }
.hpcsubmit-jobcard-skeleton:nth-child(3) .hpcsubmit-skeleton-icon,
.hpcsubmit-jobcard-skeleton:nth-child(3) .hpcsubmit-skeleton-line { animation-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Full-page loading skeleton (shown while submission_setup API loads)
   -------------------------------------------------------------------------- */

.hpcsubmit-loading-skeleton {
    display: flex;
    flex: 1;
    min-height: 0;
    height: 100%;
    animation: hpcFadeIn 0.2s ease both;
}

.hpcsubmit-loading-left {
    width: 340px;
    flex-shrink: 0;
    border-right: 1px solid #e8ecf0;
    padding: 16px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hpcsubmit-loading-center {
    flex: 1;
    min-width: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hpcsubmit-loading-right {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid #e8ecf0;
    padding: 16px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hpcsubmit-skeleton-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.hpcsubmit-skeleton-line.full { width: 100%; }

.hpcsubmit-skeleton-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    background: #fff;
}

.hpcsubmit-skeleton-card .hpcsubmit-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpcsubmit-skeleton-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    border: 2px dashed #e0e3e8;
    border-radius: 10px;
    background: #fafbfc;
}

.hpcsubmit-skeleton-icon.large {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* Stagger shimmer across loading skeleton sections */
.hpcsubmit-loading-left .hpcsubmit-skeleton-block:nth-child(2) .hpcsubmit-skeleton-line { animation-delay: 0.1s; }
.hpcsubmit-loading-left .hpcsubmit-skeleton-block:nth-child(3) .hpcsubmit-skeleton-line { animation-delay: 0.2s; }
.hpcsubmit-loading-center .hpcsubmit-skeleton-card:nth-child(3) .hpcsubmit-skeleton-icon,
.hpcsubmit-loading-center .hpcsubmit-skeleton-card:nth-child(3) .hpcsubmit-skeleton-line { animation-delay: 0.15s; }
.hpcsubmit-loading-right .hpcsubmit-jobcard-skeleton:nth-child(3) .hpcsubmit-skeleton-icon,
.hpcsubmit-loading-right .hpcsubmit-jobcard-skeleton:nth-child(3) .hpcsubmit-skeleton-line { animation-delay: 0.15s; }
.hpcsubmit-loading-right .hpcsubmit-jobcard-skeleton:nth-child(4) .hpcsubmit-skeleton-icon,
.hpcsubmit-loading-right .hpcsubmit-jobcard-skeleton:nth-child(4) .hpcsubmit-skeleton-line { animation-delay: 0.3s; }

/* Fade-in for real cards after loading */
.hpcsubmit-jobcard.card-enter {
    animation: hpcFadeIn 0.25s ease both;
}
.hpcsubmit-jobcard.card-enter:nth-child(2) { animation-delay: 0.04s; }
.hpcsubmit-jobcard.card-enter:nth-child(3) { animation-delay: 0.08s; }
.hpcsubmit-jobcard.card-enter:nth-child(4) { animation-delay: 0.12s; }
.hpcsubmit-jobcard.card-enter:nth-child(5) { animation-delay: 0.16s; }

/* ── New pending card flies up from bottom ── */
.hpcsubmit-jobcard.card-fly-up {
    animation: hpcFlyUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Refresh spinner next to "Jobs" header ── */
.hpcsubmit-refresh-spinner {
    font-size: 12px;
    color: #999;
    margin-left: auto;
    animation: hpcSpin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   Manage View
   -------------------------------------------------------------------------- */

.hpcsubmit-manage {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: hpcFadeIn 0.25s ease;
}

.hpcsubmit-ai-agent-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.hpcsubmit-manage-panes {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.hpcsubmit-manage-pane {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 20px 24px;
    animation: hpcFadeIn 0.2s ease;
}

.hpcsubmit-manage-pane.active {
    display: block;
}

.hpcsubmit-manage-pane > div {
    margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Manage Sub-Navigation (scroll-spy pill bar)
   -------------------------------------------------------------------------- */

.hpcsubmit-manage-subnav-outer {
    display: flex;
    justify-content: flex-start;
    padding: 8px 16px 8px 24px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.hpcsubmit-manage-subnav-wrapper {
    position: relative;
    display: inline-flex;
    background: #e8edf2;
    border-radius: 16px;
    padding: 2px;
}

.hpcsubmit-manage-subnav-slider {
    position: absolute;
    top: 2px;
    height: calc(100% - 4px);
    width: 50%;
    background: #2c3e50;
    border-radius: 14px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    left: 2px;
}

.hpcsubmit-manage-subnav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    position: relative;
    z-index: 1;
}

.hpcsubmit-manage-subnav > li {
    flex: 1;
    text-align: center;
}

.hpcsubmit-manage-subnav > li > a {
    display: block;
    padding: 5px 20px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-radius: 14px;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.hpcsubmit-manage-subnav > li > a:hover {
    color: #333;
}

.hpcsubmit-manage-subnav > li.active > a {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Server Status Dashboard
   -------------------------------------------------------------------------- */

.hpcsubmit-serverstatus-box {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    background: #fafafa;
}

.hpcsubmit-server-selector-manage {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hpcsubmit-server-selector-manage select,
.hpcsubmit-server-selector-manage .bootstrap-select {
    flex: 1;
    min-width: 0;
}

.hpcsubmit-refresh-status {
    flex-shrink: 0;
    color: #888;
    font-size: 14px;
    padding: 4px;
    transition: color 0.2s;
}

.hpcsubmit-refresh-status:hover {
    color: #333;
}

.hpcsubmit-status-loading {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 12px;
}

@keyframes hpcSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hpc-spin {
    display: inline-block;
    animation: hpcSpin 1s linear infinite;
}

/* Status sections */
.hpc-status-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.hpc-status-section:first-child {
    margin-top: 12px;
    padding-top: 0;
    border-top: none;
}

.hpc-status-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 8px;
}

/* Stacked horizontal bar */
.hpc-stacked-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: #e9ecef;
}

.hpc-bar-segment {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
}

.hpc-bar-idle   { background: #28a745; }
.hpc-bar-busy   { background: #dc3545; }
.hpc-bar-down   { background: #ffc107; }
.hpc-bar-running { background: #28a745; }
.hpc-bar-queued  { background: #17a2b8; }
.hpc-bar-held    { background: #ffc107; }

/* Legend below bars */
.hpc-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 11px;
    color: #666;
}

.hpc-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hpc-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}

.hpc-legend-dot.dot-idle    { background: #28a745; }
.hpc-legend-dot.dot-busy    { background: #dc3545; }
.hpc-legend-dot.dot-down    { background: #ffc107; }
.hpc-legend-dot.dot-running { background: #28a745; }
.hpc-legend-dot.dot-queued  { background: #17a2b8; }
.hpc-legend-dot.dot-held    { background: #ffc107; }
.hpc-legend-dot.dot-used    { background: #dc3545; }
.hpc-legend-dot.dot-free    { background: #28a745; }
.hpc-legend-dot.dot-skeleton { background: #d0d0d0; }

/* Skeleton state — grey bar when no data loaded yet */
.hpc-stacked-bar.hpc-skeleton {
    background: #e0e0e0;
}

.hpc-legend-value {
    font-weight: 600;
    color: #333;
}

/* Queue table */
.hpc-queue-table {
    font-size: 11px;
}

.hpc-queue-table table {
    width: 100%;
    border-collapse: collapse;
}

.hpc-queue-table th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #999;
    font-size: 10px;
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.hpc-queue-table td {
    padding: 4px 8px 4px 0;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
}

.hpc-queue-table tr:last-child td {
    border-bottom: none;
}

.hpc-queue-table .hpc-queue-name {
    font-weight: 600;
    color: #333;
}

.hpc-queue-table .hpc-queue-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
}

.hpc-queue-badge.badge-running { background: #d4edda; color: #155724; }
.hpc-queue-badge.badge-queued  { background: #d1ecf1; color: #0c5460; }
.hpc-queue-badge.badge-held    { background: #fff3cd; color: #856404; }

/* --------------------------------------------------------------------------
   Manage Settings — outlined section
   -------------------------------------------------------------------------- */

.hpcsubmit-managesettings {
    margin-bottom: 0;
}

.hpcsubmit-managesettings-box {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 12px 16px;
}

.hpcsubmit-recentsettings {
    margin-bottom: 0;
}

.hpcsubmit-recentsettings-box {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 12px 16px;
}

/* --------------------------------------------------------------------------
   Settings Cards (Manage tab — fora tool-card)
   -------------------------------------------------------------------------- */

.hpcsubmit-settings-search {
    margin-bottom: 10px;
    display: none;
}

.hpcsubmit-settings-search.visible {
    display: block;
}

.hpcsubmit-settings-search input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    background: #fafbfc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23999" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>') no-repeat 8px center;
    transition: border-color 0.2s ease;
}

.hpcsubmit-settings-search input:focus {
    border-color: #337ab7;
    background-color: #fff;
}

.hpcsubmit-settings-list {
    margin-top: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.hpcsubmit-settings-list.scrollable {
    /* no max-height needed for horizontal scroll */
}

.hpcsubmit-settings-list::-webkit-scrollbar {
    height: 4px;
}

.hpcsubmit-settings-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.hpcsubmit-settings-list::-webkit-scrollbar-track {
    background: transparent;
}

.hpcsubmit-setting-card.hpcsubmit-setting-card-add {
    border: 2px dashed #ccc;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.15s ease;
    min-height: 120px;
}

.hpcsubmit-setting-card.hpcsubmit-setting-card-add:hover {
    border-color: #4CAF50;
    background: #f9fdf6;
}

.hpcsubmit-add-icon {
    stroke: #ccc;
    stroke-width: 1.5;
    stroke-linecap: round;
    fill: none;
    transition: stroke 0.15s ease;
}

.hpcsubmit-setting-card.hpcsubmit-setting-card-add:hover .hpcsubmit-add-icon {
    stroke: #4CAF50;
}

.hpcsubmit-setting-card {
    flex: 0 0 180px;
    width: 180px;
    max-width: 180px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    padding: 0;
    transition: border-color 0.2s ease, background-color 0.15s ease;
    scroll-snap-align: start;
    position: relative;
}

.hpcsubmit-setting-card:hover {
    background: #fafbfc;
    border-color: #ccc;
    cursor: pointer;
}

.hpcsubmit-setting-card.selected,
.hpcsubmit-setting-card.selected:hover {
    border-color: #4CAF50 !important;
    background: #f1f8e9 !important;
    background-color: #f1f8e9 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25);
}

.hpcsubmit-setting-card.selected .hpcsubmit-setting-card-icon {
    background: #4CAF50 !important;
    color: #fff !important;
}

.hpcsubmit-setting-card-body {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    height: 100%;
}

.hpcsubmit-setting-card-top {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.hpcsubmit-setting-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    font-size: 12px;
    color: #555;
    flex: 0 0 26px;
}

.hpcsubmit-setting-card-top strong {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hpcsubmit-setting-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}

.hpcsubmit-setting-card-recent {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    color: #337ab7;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.hpcsubmit-setting-card-recent .glyphicon {
    font-size: 9px;
}

.hpcsubmit-setting-card-actions {
    display: flex;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.hpcsubmit-setting-card-actions .btn {
    font-size: 11px;
    padding: 3px 0;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #e8e8e8;
    background: transparent;
    color: #555;
    flex: 1;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.hpcsubmit-setting-card-actions .btn:hover {
    background: #f5f5f5;
    color: #333;
}

.hpcsubmit-setting-card-actions .btn-danger-outline {
    border-color: #f0c0be;
    color: #721c24;
}

.hpcsubmit-setting-card-actions .btn-danger-outline:hover {
    background: #f8d7da;
}

/* --------------------------------------------------------------------------
   Jobs Table (Manage tab)
   -------------------------------------------------------------------------- */

.hpcsubmit-jobs-table {
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.hpcsubmit-jobs-table thead th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.3px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 12px;
}

.hpcsubmit-jobs-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.hpcsubmit-jobs-table tbody tr {
    transition: background 0.15s ease;
}

.hpcsubmit-jobs-table tbody tr:hover {
    background: #fafbfc;
}

/* Job status pill badges */
.hpcsubmit-job-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.hpcsubmit-job-status.status-running,
.hpcsubmit-job-status.status-r { background: #d4edda; color: #155724; }

.hpcsubmit-job-status.status-queued,
.hpcsubmit-job-status.status-q,
.hpcsubmit-job-status.status-pending { background: #fef3cd; color: #856404; }

.hpcsubmit-job-status.status-completed,
.hpcsubmit-job-status.status-c { background: #f0f0f0; color: #888; }

.hpcsubmit-job-status.status-failed,
.hpcsubmit-job-status.status-f,
.hpcsubmit-job-status.status-error { background: #f8d7da; color: #721c24; }

/* Jobs loading */
.hpcsubmit-jobs-loading {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Saved Settings Selector (Basic view)
   -------------------------------------------------------------------------- */

.hpcsubmit-saved-settings {
    margin-bottom: 0;
}

.hpcsubmit-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hpcsubmit-config-header .hpcsubmit-label {
    margin-bottom: 0;
}

.hpcsubmit-config-actions {
    display: flex;
    gap: 6px;
}

.hpcsubmit-new-config-btn,
.hpcsubmit-last-config-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hpcsubmit-new-config-btn:hover,
.hpcsubmit-last-config-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}

.hpcsubmit-new-config-btn .glyphicon,
.hpcsubmit-last-config-btn .glyphicon {
    font-size: 10px;
    margin-right: 2px;
}

.hpcsubmit-settings-selector {
    position: relative;
}

/* Selectpicker refinement */
.hpcsubmit-settings-selector .bootstrap-select .btn {
    border-radius: 6px;
    border-color: #d0d7de;
    transition: border-color 0.2s ease;
}

.hpcsubmit-settings-selector .bootstrap-select .btn:focus {
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

.hpcsubmit-no-settings {
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px dashed #d0d7de;
    border-radius: 8px;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Server selector (Manage tab)
   -------------------------------------------------------------------------- */

.hpcsubmit-server-selector-manage select,
.hpcsubmit-hpcserver-id {
    border-radius: 6px;
}

/* Inline section header buttons (e.g. + New, Refresh) */
.hpcsubmit-section-header .btn {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    margin-left: auto;
    transition: background 0.15s ease, color 0.15s ease;
}

.hpcsubmit-section-header .btn:hover {
    background: #f5f5f5;
    color: #333;
}

.hpcsubmit-section-header .btn-primary {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.hpcsubmit-section-header .btn-primary:hover {
    background: #286090;
    border-color: #286090;
}

/* --------------------------------------------------------------------------
   Edit Configuration (Manage tab)
   -------------------------------------------------------------------------- */

/* Green glow when edit config section appears */
.hpcsubmit-basic-edit-config.hpcsubmit-glow-in .hpcsubmit-editconfig-box {
    animation: hpcGlowIn 0.8s ease both;
    border-color: #4CAF50;
    transition: border-color 0.8s ease;
}

/* Manage settings header */
.hpcsubmit-managesettings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}


.hpcsubmit-editconfig {
    padding-bottom: 16px;
    margin-top: 8px;
}

.hpcsubmit-editconfig-title {
    transition: opacity 0.15s ease;
}

.hpcsubmit-editconfig-title.hpc-title-swap {
    opacity: 0;
}

.hpcsubmit-editconfig-box {
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 20px;
}

.hpcsubmit-editconfig-form .form-group {
    margin-bottom: 12px;
}

#hpcsubmit-edit-config-name {
    border-radius: 6px;
    border-color: #d0d7de;
    transition: border-color 0.2s ease;
}

#hpcsubmit-edit-config-name:focus {
    border-color: #66afe9;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

.hpcsubmit-editconfig-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.hpcsubmit-editconfig-actions {
    display: flex;
    gap: 8px;
}

/* Metadata section */
.hpcsubmit-basic-metadata-section {
    margin: 16px 0 8px;
}

.hpcsubmit-basic-metadata {
    position: relative;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafbfc;
    transition: opacity 0.2s ease;
}

.hpcsubmit-basic-metadata.hpcsubmit-metadata-disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

/* Tags input group */
.hpcsubmit-tags-input-group {
    display: flex;
    align-items: stretch;
}

.hpcsubmit-tags-input-group textarea {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    resize: none;
}

.hpcsubmit-tags-browse-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #337ab7;
    background: #f5f8fa;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
    white-space: nowrap;
    transition: all 0.15s ease;
    text-decoration: none;
}

.hpcsubmit-tags-browse-btn:hover {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
    text-decoration: none;
}

.hpcsubmit-tags-browse-btn .glyphicon {
    font-size: 11px;
}

/* Tag browser container overrides */
#hpcsubmit-tagsbrowser-container {
    margin-top: 10px;
}

#hpcsubmit-tagsbrowser-container .panel {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 340px;
}

#hpcsubmit-tagsbrowser-container .panel-heading {
    background: #f5f8fa;
    border-bottom: 1px solid #e8ecf0;
    padding: 10px 16px;
}

#hpcsubmit-tagsbrowser-container .panel-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

#hpcsubmit-tagsbrowser-container .button-group {
    display: flex;
    gap: 4px;
}

#hpcsubmit-tagsbrowser-container .button-group .btn {
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid #ddd;
    color: #666;
    background: #fff;
    transition: all 0.15s ease;
}

#hpcsubmit-tagsbrowser-container .button-group .btn:hover {
    border-color: #337ab7;
    color: #337ab7;
}

#hpcsubmit-tagsbrowser-container .button-group .btn.active {
    background: #337ab7;
    border-color: #337ab7;
    color: #fff;
}

#hpcsubmit-tagsbrowser-container .panel-body {
    padding: 12px 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#hpcsubmit-tagsbrowser-container .tab-container {
    border-radius: 6px;
    border: 1px solid #eee;
    background: #fff;
    padding: 8px;
    height: auto !important;
    max-height: 100%;
    overflow-y: auto;
}

#hpcsubmit-tagsbrowser-container .tag-search {
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}

#hpcsubmit-tagsbrowser-container .tags-inline-view .badge,
#hpcsubmit-tagsbrowser-container .tags-inline-view .label {
    display: inline-block;
    margin: 3px 4px 3px 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

#hpcsubmit-tagsbrowser-container .tags-selected-count {
    background: #fff;
    color: #337ab7;
    font-size: 10px;
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 10px;
    margin-left: 2px;
}

#hpcsubmit-tagsbrowser-container .panel-heading,
#hpcsubmit-tagsbrowser-container .panel-footer {
    flex-shrink: 0;
}

#hpcsubmit-tagsbrowser-container .panel-footer {
    background: #f9fafb;
    border-top: 1px solid #e8ecf0;
    padding: 10px 16px;
}

#hpcsubmit-tagsbrowser-container .panel-footer .btn {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
}

#hpcsubmit-tagsbrowser-container .panel-footer .btn.done {
    background: #337ab7;
    border-color: #337ab7;
    color: #fff;
}

#hpcsubmit-tagsbrowser-container .panel-footer .btn.done:hover {
    background: #286090;
}

#hpcsubmit-tagsbrowser-container .panel-footer .btn.cancel {
    color: #666;
    border-color: #ccc;
}

#hpcsubmit-tagsbrowser-container .panel-footer .btn.cancel:hover {
    background: #f0f0f0;
}

#hpcsubmit-tagsbrowser-container .taggroups-collection-list {
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 8px;
}

.hpcsubmit-editconfig-footer .btn {
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.hpcsubmit-editconfig-footer .btn-default {
    border-color: #ccc;
    color: #555;
}

.hpcsubmit-editconfig-footer .btn-default:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.hpcsubmit-editconfig-footer .btn-primary {
    background: #337ab7;
    border-color: #337ab7;
}

.hpcsubmit-editconfig-footer .btn-primary:hover {
    background: #286090;
    border-color: #286090;
}

/* --------------------------------------------------------------------------
   AI Placeholder (Manage tab)
   -------------------------------------------------------------------------- */

.hpcsubmit-ai-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    color: #bbb;
}

.hpcsubmit-ai-placeholder-icon {
    margin-bottom: 16px;
    opacity: 0.6;
}

.hpcsubmit-ai-placeholder-text {
    font-size: 14px;
    font-weight: 500;
    color: #999;
}

/* --------------------------------------------------------------------------
   Inline Server Status (Basic view)
   -------------------------------------------------------------------------- */

.hpcsubmit-basic-server-status {
    margin-bottom: 0;
}

.hpcsubmit-basic-right .hpcsubmit-serverstatus-box {
    margin-top: 0;
    border: none;
    padding: 0;
    background: transparent;
}

.hpcsubmit-basic-right .hpcsubmit-section-header {
    margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Inline Manage Settings + Edit Config (in basic view)
   -------------------------------------------------------------------------- */

.hpcsubmit-basic-manage-settings {
    margin-bottom: 16px;
}

.hpcsubmit-basic-edit-config {
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Advanced Sections (metadata, shown via edit config's Advanced toggle)
   -------------------------------------------------------------------------- */

.hpcsubmit-basic-advanced-sections {
    animation: hpcFadeIn 0.25s ease;
}

/* --------------------------------------------------------------------------
   Save & Submit Prompt Overlay
   -------------------------------------------------------------------------- */

.hpcsubmit-savesubmit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: hpcFadeIn 0.2s ease;
}

.hpcsubmit-savesubmit-prompt {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 28px 32px;
    max-width: 400px;
    width: 100%;
}

.hpcsubmit-savesubmit-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.hpcsubmit-savesubmit-desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 16px;
}

.hpcsubmit-savesubmit-name-row {
    margin-bottom: 16px;
}

.hpcsubmit-savesubmit-name-row label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

.hpcsubmit-savesubmit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.hpcsubmit-savesubmit-actions .btn {
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
}

.hpcsubmit-savesubmit-actions .btn-primary {
    background: #337ab7;
    border-color: #337ab7;
}

.hpcsubmit-savesubmit-actions .btn-primary:hover {
    background: #286090;
    border-color: #286090;
}

/* AI icon in header pills */
.hpcsubmit-pills .fa-robot {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Browse Server: FileExplorer overlay (scoped to HPC modal)
   -------------------------------------------------------------------------- */

.hpcsubmit-file-browser {
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hpcsubmit-file-browser .file_explorer {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 80vh !important;
    max-height: 80vh;
}

/* Header toolbar — actual DOM: .fe-header > .col-md-7 + .col-md-5 */
.hpcsubmit-file-browser .file_explorer .fe-header {
    background: #f5f8fa;
    border-bottom: 1px solid #e8ecf0;
    padding: 10px 16px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}

/* Make header columns flex instead of bootstrap grid */
.hpcsubmit-file-browser .file_explorer .fe-header > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
}

.hpcsubmit-file-browser .file_explorer .fe-header > .col-md-7 {
    flex: 1;
    min-width: 0;
}

.hpcsubmit-file-browser .file_explorer .fe-header > .col-md-5 {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* Inner columns in the right panel */
.hpcsubmit-file-browser .file_explorer .fe-header > .col-md-5 > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Folder-toggler row — single line */
.hpcsubmit-file-browser .file_explorer .fe-header .folder-toggler {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}

.hpcsubmit-file-browser .file_explorer .fe-header .folder-toggler > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.hpcsubmit-file-browser .file_explorer .fe-header .folder-toggler > .col-1 {
    flex: 1;
    min-width: 0;
}

/* Input group (Directory, Back, Forward, path) */
.hpcsubmit-file-browser .file_explorer .fe-header .input-group {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
}

.hpcsubmit-file-browser .file_explorer .fe-header .input-group-addon {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600;
    padding: 5px 10px !important;
    border: 1px solid #d0d7de !important;
    background: #fff !important;
    color: #555 !important;
    transition: all 0.15s ease;
    white-space: nowrap;
    width: auto !important;
}

.hpcsubmit-file-browser .file_explorer .fe-header .input-group-addon:hover {
    background: #f0f0f0 !important;
    border-color: #bbb !important;
    color: #333 !important;
}

/* All buttons in header — modern neutral */
.hpcsubmit-file-browser .file_explorer .fe-header .btn {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600;
    padding: 5px 12px !important;
    border: 1px solid #d0d7de !important;
    background: #fff !important;
    color: #555 !important;
    transition: all 0.15s ease;
    vertical-align: middle;
    white-space: nowrap;
    background-image: none !important;
}

.hpcsubmit-file-browser .file_explorer .fe-header .btn:hover {
    background: #f0f0f0 !important;
    border-color: #bbb !important;
    color: #333 !important;
}

/* Select All — keep blue */
.hpcsubmit-file-browser .file_explorer .fe-header .select_all {
    background: #337ab7 !important;
    border-color: #337ab7 !important;
    color: #fff !important;
    padding: 5px 14px !important;
}

.hpcsubmit-file-browser .file_explorer .fe-header .select_all:hover {
    background: #286090 !important;
    border-color: #286090 !important;
}

/* Hide duplicate Cancel/Done — footer already has them */
.hpcsubmit-file-browser .file_explorer .fe-header .close_fe,
.hpcsubmit-file-browser .file_explorer .fe-header .confirm-selection {
    display: none !important;
}

/* Pull-right container — flex instead of float */
.hpcsubmit-file-browser .file_explorer .fe-header .pull-right {
    display: flex !important;
    align-items: center;
    gap: 6px;
    float: none !important;
}

/* Search input */
.hpcsubmit-file-browser .file_explorer .fe-file-search {
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    border: 1px solid #d0d7de !important;
    height: auto !important;
    width: 130px;
}

/* Recursive toggle */
.hpcsubmit-file-browser .file_explorer .bootstrap-switch {
    min-width: auto;
    border-radius: 6px;
}

/* Path input */
.hpcsubmit-file-browser .file_explorer .current-dir,
.hpcsubmit-file-browser .file_explorer input[name="dir_base"] {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    border: 1px solid #d0d7de !important;
    height: auto !important;
}

/* Files selected indicator */
.hpcsubmit-file-browser .file_explorer .filesselectedindicator {
    font-size: 12px;
    font-weight: 600;
}

.hpcsubmit-file-browser .file_explorer .filesselectedindicator .btn {
    background: #fff3cd !important;
    border-color: #ffc107 !important;
    color: #856404 !important;
}

/* Body — .file_explorer prefix to beat style.css */
.hpcsubmit-file-browser .file_explorer .fe-body {
    border-left: none !important;
    flex: 1;
    overflow: hidden;
    display: flex;
    min-height: 0;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: none !important;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content-wrapper .col-xs-2 {
    background: #f9fafb;
    border-right: 1px solid #e8ecf0;
    padding: 12px;
    max-height: none !important;
    overflow-y: auto;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content-wrapper .col-xs-2 label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content-wrapper .col-xs-10 {
    border-left: none !important;
    overflow-y: auto;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content {
    max-height: none !important;
    min-height: 200px;
    overflow-y: auto;
}

/* Table */
.hpcsubmit-file-browser .file_explorer .table {
    margin-bottom: 0;
}

.hpcsubmit-file-browser .file_explorer .table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
    border-bottom: 2px solid #e8ecf0;
    padding: 8px 12px;
}

.hpcsubmit-file-browser .file_explorer .table tbody tr {
    transition: background 0.1s ease;
}

.hpcsubmit-file-browser .file_explorer .table tbody tr:hover {
    background: #f0f6ff !important;
}

.hpcsubmit-file-browser .file_explorer .table tbody tr.fe_selected {
    background: #337ab7 !important;
    background-image: none !important;
}

.hpcsubmit-file-browser .file_explorer .table tbody td {
    padding: 8px 12px;
    font-size: 13px;
    border-top: 1px solid #f0f0f0;
}

/* Footer */
.hpcsubmit-file-browser .file_explorer .fe-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e8ecf0 !important;
    padding: 12px 20px;
    flex-shrink: 0;
}

.hpcsubmit-file-browser .file_explorer .fe-footer .btn {
    border-radius: 6px !important;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 20px;
}

.hpcsubmit-file-browser .file_explorer .fe-footer .btn-primary {
    background: #337ab7 !important;
    border-color: #337ab7 !important;
}

.hpcsubmit-file-browser .file_explorer .fe-footer .btn-primary:hover {
    background: #286090 !important;
}

.hpcsubmit-file-browser .file_explorer .fe-footer .btn-default {
    color: #666;
    border-color: #ccc;
}

.hpcsubmit-file-browser .file_explorer .fe-footer .btn-default:hover {
    background: #f0f0f0;
}

/* ── Responsive hamburger menu ── */

/* Hamburger button — hidden by default, shown when collapsed */
.hpcsubmit-file-browser .file_explorer .hpc-fe-hamburger {
    display: none;
    border-radius: 6px !important;
    font-size: 14px !important;
    padding: 5px 10px !important;
    border: 1px solid #d0d7de !important;
    background: #fff !important;
    color: #555 !important;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
}

.hpcsubmit-file-browser .file_explorer .hpc-fe-hamburger:hover {
    background: #f0f0f0 !important;
    color: #333 !important;
}

/* Dropdown panel — positioned below the header */
.hpcsubmit-file-browser .file_explorer .hpc-fe-dropdown {
    position: absolute;
    right: 16px;
    top: 100%;
    z-index: 1000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 10px 14px;
    min-width: 280px;
}

.hpcsubmit-file-browser .file_explorer .hpc-fe-dropdown.hidden {
    display: none !important;
}

/* Collapsible items inside dropdown — vertical layout */
.hpcsubmit-file-browser .file_explorer .hpc-fe-collapsible {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.hpcsubmit-file-browser .file_explorer .hpc-fe-collapsible .fe-file-search {
    width: 100% !important;
    margin: 0;
}

.hpcsubmit-file-browser .file_explorer .hpc-fe-collapsible .pull-right {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Collapsed state — hide original items, show hamburger */
.hpcsubmit-file-browser .file_explorer .fe-header.hpc-fe-collapsed .hpc-fe-hamburger {
    display: inline-block;
}

.hpcsubmit-file-browser .file_explorer .fe-header.hpc-fe-collapsed .hpc-fe-collapsible-source {
    display: none !important;
}

/* Header needs position:relative for dropdown positioning */
.hpcsubmit-file-browser .file_explorer .fe-header {
    position: relative;
}

/* Breadcrumb */
.hpcsubmit-file-browser .file_explorer .breadcrumb {
    background: none !important;
    border: none !important;
    margin-bottom: 0;
    padding: 4px 0;
    font-size: 13px;
}

/* Sidebar (Favorites/Recents) — remove top padding */
.hpcsubmit-file-browser .file_explorer .fe-body-content-wrapper .col-xs-2 {
    padding-top: 4px !important;
}

.hpcsubmit-file-browser .file_explorer .fav_list_wrapper label,
.hpcsubmit-file-browser .file_explorer .recent_list_wrapper label {
    padding-top: 0 !important;
    margin-bottom: 4px;
}

/* Recent header — flex row so label + clear are on same line */
.hpcsubmit-file-browser .file_explorer .recent_list_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.hpcsubmit-file-browser .file_explorer .recent_list_wrapper > label {
    flex: 1;
}

.hpcsubmit-file-browser .file_explorer .recent_list_wrapper > .recentList {
    width: 100%;
}

/* Clear recents — small trash icon aligned right */
.hpcsubmit-file-browser .file_explorer .clearRecentList {
    font-size: 0 !important;
    cursor: pointer;
    color: #bbb;
    margin-left: auto;
    position: static !important;
    top: auto !important;
    padding: 0;
    line-height: 1;
    align-self: center;
}

.hpcsubmit-file-browser .file_explorer .clearRecentList .fa-eraser {
    display: none;
}

.hpcsubmit-file-browser .file_explorer .clearRecentList::before {
    content: "\f1f8";
    font-family: FontAwesome;
    font-size: 11px;
    font-style: normal;
}

.hpcsubmit-file-browser .file_explorer .clearRecentList:hover {
    color: #c0392b;
}

/* Context menu — modernize */
.hpcsubmit-file-browser .file_explorer .file-context-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    padding: 4px 0 !important;
    min-width: 140px;
    overflow: hidden;
}

.hpcsubmit-file-browser .file_explorer .file-context-menu .nav li a {
    padding: 6px 14px !important;
    font-size: 12px !important;
    color: #444 !important;
    font-weight: 500;
}

.hpcsubmit-file-browser .file_explorer .file-context-menu .nav li a:hover {
    background: #f0f6ff !important;
    color: #337ab7 !important;
}

/* View file button — modern style */
.hpcsubmit-file-browser .file_explorer .view-file {
    border-radius: 4px !important;
    font-size: 10px !important;
    padding: 2px 8px !important;
    border: 1px solid #d0d7de !important;
    background: #f8f9fa !important;
    color: #555 !important;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.hpcsubmit-file-browser .file_explorer .view-file:hover {
    background: #e8f0fe !important;
    border-color: #337ab7 !important;
    color: #337ab7 !important;
}

/* No files found — simple grey text, no banner */
.hpcsubmit-file-browser .file_explorer .fe-body-content .alert {
    background: none !important;
    border: none !important;
    color: #999 !important;
    font-size: 13px;
    font-weight: 500;
    padding: 0 !important;
    margin: 0;
    box-shadow: none !important;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content .alert .fa-exclamation-triangle {
    display: none;
}

.hpcsubmit-file-browser .file_explorer .fe-body-content .alert .go-to-home {
    display: none;
}

/* Disabled file option buttons */
.hpcsubmit-file-options .btn.hpcsubmit-btn-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* ── Rule Editor Panels (Dependency Check + Metadata Extraction) ── */

.hpcsubmit-dependency-checker,
.hpcsubmit-metadata-extractor {
    margin: 10px 0 0;
}

.hpcsubmit-dependency-checker .panel,
.hpcsubmit-metadata-extractor .panel {
    border-radius: 8px !important;
    border: 1px solid #e0e4e8 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 0;
    width: 100% !important;
    font-size: 13px;
}

.hpcsubmit-dependency-checker .panel-body,
.hpcsubmit-metadata-extractor .panel-body {
    padding: 16px 20px;
}

.hpcsubmit-dependency-checker .panel-body::after,
.hpcsubmit-metadata-extractor .panel-body::after {
    content: "";
    display: table;
    clear: both;
}

.hpcsubmit-dependency-checker .panel-body label,
.hpcsubmit-metadata-extractor .panel-body label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin-bottom: 4px;
}

.hpcsubmit-dependency-checker .panel-body .form-control,
.hpcsubmit-metadata-extractor .panel-body .form-control {
    border-radius: 6px !important;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid #d0d7de;
    height: auto;
}

.hpcsubmit-dependency-checker .panel-body .form-control:focus,
.hpcsubmit-metadata-extractor .panel-body .form-control:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.15);
}

/* Rule editor input rows */
.hpcsubmit-dependency-checker .depruleeditorinputs > div,
.hpcsubmit-metadata-extractor .metaruleeditorinputs > div {
    margin-bottom: 8px;
}

.hpcsubmit-dependency-checker .depruleeditorinputs > div::after,
.hpcsubmit-metadata-extractor .metaruleeditorinputs > div::after {
    content: "";
    display: table;
    clear: both;
}

.hpcsubmit-dependency-checker .depruleeditorinputs hr,
.hpcsubmit-metadata-extractor .metaruleeditorinputs hr {
    margin: 10px 0;
    border-color: #e8ecf0;
}

/* Hide native select — selectpicker replaces it */
.hpcsubmit-dependency-checker .bootstrap-select select,
.hpcsubmit-metadata-extractor .bootstrap-select select,
.hpcsubmit-dependency-checker select#availableRulesList,
.hpcsubmit-metadata-extractor select#availableRulesList {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}


/* Selectpicker overrides inside panels */
.hpcsubmit-dependency-checker .bootstrap-select .btn,
.hpcsubmit-metadata-extractor .bootstrap-select .btn {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border: 1px solid #d0d7de !important;
    background: #fff !important;
    height: auto !important;
}

/* Panel footer — clean, aligned buttons */
.hpcsubmit-dependency-checker .panel-footer,
.hpcsubmit-metadata-extractor .panel-footer {
    background: #f8f9fa !important;
    border-top: 1px solid #e8ecf0 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 10px 20px;
    overflow: hidden;
}

.hpcsubmit-dependency-checker .panel-footer .btn,
.hpcsubmit-metadata-extractor .panel-footer .btn {
    border-radius: 6px !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    margin-left: 8px;
}

.hpcsubmit-dependency-checker .panel-footer .btn-primary,
.hpcsubmit-metadata-extractor .panel-footer .btn-primary {
    background: #337ab7 !important;
    border-color: #337ab7 !important;
}

.hpcsubmit-dependency-checker .panel-footer .btn-primary:hover,
.hpcsubmit-metadata-extractor .panel-footer .btn-primary:hover {
    background: #286090 !important;
}

.hpcsubmit-dependency-checker .panel-footer .btn-success,
.hpcsubmit-metadata-extractor .panel-footer .btn-success {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
}

.hpcsubmit-dependency-checker .panel-footer .btn-success:hover,
.hpcsubmit-metadata-extractor .panel-footer .btn-success:hover {
    background: #219a52 !important;
}

.hpcsubmit-dependency-checker .panel-footer .btn-default,
.hpcsubmit-metadata-extractor .panel-footer .btn-default {
    color: #666;
    border-color: #ccc;
}

/* Verify section (metadata extractor) */
.hpcsubmit-metadata-extractor .verifySection .alert {
    border-radius: 8px;
    border: 1px solid #bce8f1;
    background: #f0f8ff;
    padding: 14px 16px;
    margin: 10px 0 0;
}

.hpcsubmit-metadata-extractor .verifySection .alert label {
    font-size: 12px !important;
    text-transform: none !important;
    color: #337ab7 !important;
    letter-spacing: 0 !important;
}

.hpcsubmit-metadata-extractor .verifySection .row {
    font-size: 12px;
}

.hpcsubmit-metadata-extractor .verifySection .col-xs-3 {
    font-weight: 600;
    color: #555;
}

.hpcsubmit-metadata-extractor .verifySection pre {
    font-size: 11px;
    border-radius: 6px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

/* Dependency check warning */
.hpcsubmit-dep-warning {
    margin: 8px 0;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Solver search — hide non-matching attribute rows
   -------------------------------------------------------------------------- */
.solver-search-hidden,
.solver-attr-group.solver-search-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Solver attributes — changed-value marker, "Changed only" filter, reset
   -------------------------------------------------------------------------- */
.solver_specific_attributes .input-row.solver-attr-modified > label,
.solver_specific_attributes .input-row.solver-attr-modified label {
    color: #d46b08;
    font-weight: 600;
}

/* The marker must cost no layout at all.
   It was a border plus padding with the left edge pulled back by the same amount.
   The row's width is set by its column, so the padding did not widen the box -- it
   narrowed the content inside it and moved the whole row 8px left. The description
   then wrapped onto more lines, the row grew taller, and the attribute beside it was
   left overlapping. Drawn in the gutter instead: the row's box, its content width
   and its height are exactly what they are unmarked. */
.solver_specific_attributes .input-row.solver-attr-modified {
    position: relative;
}

.solver_specific_attributes .input-row.solver-attr-modified::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: #d46b08;
}

.solver_specific_attributes.solver-only-modified .input-row.solver-attr-unmodified {
    display: none !important;
}

.solver-attr-toolbar .solver-show-modified,
.solver-attr-toolbar .solver-reset-defaults {
    color: #2c5282;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.solver-attr-toolbar .solver-show-modified:hover,
.solver-attr-toolbar .solver-reset-defaults:hover {
    background: #e8e8e8;
    color: #2c5282;
    text-decoration: none;
}

.solver-attr-toolbar .solver-show-modified.active {
    background: #e0ecf8;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Required is ON when the form opens and is the control that decides whether
   most of the list exists, so its two states have to be unmistakable at a
   glance. Sharing Changed's pale .active tint made on and off read as the same
   chip -- filled-vs-outline is the distinction that actually survives a
   sideways look. */
.solver-attr-toolbar .solver-required-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #d5dbe2;
    border-radius: 13px;
    background: #ffffff;
    color: #6b7280;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.solver-attr-toolbar .solver-required-filter:hover {
    border-color: #b9c2cc;
    color: #444444;
    text-decoration: none;
}

.solver-attr-toolbar .solver-required-filter.active {
    background: #2c5282;
    border-color: #2c5282;
    color: #ffffff;
}

.solver-attr-toolbar .solver-required-filter.active:hover {
    background: #24456e;
    border-color: #24456e;
    color: #ffffff;
}

.solver-attr-toolbar .solver-required-filter .solver-required-count {
    background: #eceff3;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
}

.solver-attr-toolbar .solver-required-filter.active .solver-required-count {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.solver_specific_attributes .solver-optional-hint a.solver-show-all-attrs {
    color: #2c5282;
    text-decoration: none;
    padding: 3px 9px;
    border: 1px solid #d5dbe2;
    border-radius: 13px;
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.solver_specific_attributes .solver-optional-hint a.solver-show-all-attrs:hover {
    background: #e0ecf8;
    border-color: #b9c9dd;
}

/* --------------------------------------------------------------------------
   Solver attributes — long labels wrap instead of running past their column
   -------------------------------------------------------------------------- */
.solver_specific_attributes .input-row > label,
.solver_specific_attributes .input-row label,
.solver-attr-tab-pane .input-row label {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.35;
}

/* Contains the row's floats without clipping what opens inside it.
   overflow:hidden did both: a select's menu is taller than its row, so the part
   below the row was cut off and the setting underneath looked like it was painted
   on top of the open list. Long text is already handled by the overflow-wrap rules
   above, so the clipping was only ever containing floats -- a clearfix does that. */
.solver_specific_attributes .input-row {
    overflow: visible;
}

.solver_specific_attributes .input-row::after {
    content: "";
    display: table;
    clear: both;
}

.solver_specific_attributes .input-row .help-block small {
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Solver attributes — tab strip
   -------------------------------------------------------------------------- */
/* A group whose attributes are all hidden by their own visibility rules has
   nothing to show, so its tab leaves the strip entirely rather than staying as
   a control that opens an empty pane. Driven by
   refreshSolverAttrGroupVisibility(). */
.solver-attr-tabs > li.solver-attr-tab-hidden {
    display: none !important;
}

.solver-attr-tabs {
    border-bottom: 1px solid #e0e0e0;
}

.solver-attr-tabs > li > a.solver-attr-tab {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    padding: 6px 12px;
    border: 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.solver-attr-tabs > li > a.solver-attr-tab:hover {
    color: #555;
    background: #f0f0f0;
}

.solver-attr-tabs > li.active > a.solver-attr-tab,
.solver-attr-tabs > li.active > a.solver-attr-tab:hover,
.solver-attr-tabs > li.active > a.solver-attr-tab:focus {
    color: #2c5282;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-bottom-color: #fff;
}

.solver-attr-tabs .solver-attr-tab-count {
    background: #e0ecf8;
    color: #2c5282;
    font-size: 10px;
    margin-left: 4px;
}

/* --------------------------------------------------------------------------
   Saved settings panel
   -------------------------------------------------------------------------- */
.saved-settings-container {
    position: absolute;
    z-index: 20;
    margin-top: 34px;
    width: 880px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    box-shadow: 0 8px 24px -10px rgba(35, 52, 74, 0.35);
    overflow: hidden;
}

.saved-settings-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f5;
    background: #fafbfd;
}

.saved-settings-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #43546a;
    white-space: nowrap;
}

.saved-settings-count {
    padding: 1px 7px;
    min-width: 18px;
    border-radius: 10px;
    background: #e8f0f9;
    color: #3a6d9e;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.saved-settings-count:empty {
    display: none;
}

.saved-settings-header-gap {
    flex: 1 1 auto;
}

.saved-settings-filter-wrap {
    flex: 0 0 auto;
    width: 220px;
}

.saved-settings-filter {
    width: 100%;
    height: 26px;
    border-radius: 4px;
    font-size: 12px;
}

.saved-settings-scope {
    color: #2e7cc4;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.saved-settings-scope:hover,
.saved-settings-scope:focus {
    color: #1c5c96;
    text-decoration: underline;
}

.saved-settings-refresh,
.saved-settings-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    color: #93a1b3;
    font-size: 12px;
    text-align: center;
}

.saved-settings-refresh:hover,
.saved-settings-close:hover {
    background: #eef3f9;
    color: #4a5a6e;
    text-decoration: none;
}

.saved-settings-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #d9e7f5;
    background: #f2f8fd;
}

.saved-settings-compose-label {
    color: #2b5e8f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.saved-settings-compose-name {
    flex: 1 1 auto;
    height: 28px;
    border: 1px solid #cddcec;
    border-radius: 4px;
    font-size: 12.5px;
}

.saved-settings-compose-status {
    color: #6b7a8d;
    font-size: 11.5px;
    white-space: nowrap;
}

.saved-settings-compose-status.is-failed {
    color: #c0392b;
}

.saved-settings-scroll {
    max-height: 340px;
    overflow-y: auto;
}

.saved-settings-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.saved-settings-table th {
    padding: 7px 10px;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
    color: #8593a5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

.saved-settings-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f2f5f8;
    color: #56677d;
    font-size: 12.5px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-settings-table tbody tr:last-child td {
    border-bottom: 0;
}

.saved-settings-table tbody tr:hover {
    background: #f5f9fe;
}

.ss-col-name { width: 22%; }
.ss-col-server { width: 14%; }
.ss-col-solver { width: 12%; }
.ss-col-cores { width: 6%; text-align: right; }
.ss-col-queue { width: 10%; }
.ss-col-walltime { width: 10%; }
.ss-col-when { width: 10%; }

/* The actions cell holds three controls; letting it ellipsize turned Delete into
   a literal "..." rather than clipping it visibly. */
.saved-settings-table td.ss-col-actions,
.ss-col-actions {
    width: 16%;
    text-align: right;
    overflow: visible;
    text-overflow: clip;
}

th.ss-col-cores { text-align: right; }
th.ss-col-actions { text-align: right; }

.saved-setting-label {
    display: inline-block;
    max-width: calc(100% - 20px);
    vertical-align: middle;
    overflow: hidden;
}

.saved-setting-name {
    display: block;
    color: #22405e;
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saved-setting-name:hover {
    color: #1c5c96;
    text-decoration: underline;
}

.saved-setting-sub {
    display: block;
    color: #90a0b3;
    font-size: 11px;
}

.saved-setting-tag {
    display: inline-block;
    max-width: 100%;
    padding: 1px 7px;
    border: 1px solid #e0e6ee;
    border-radius: 3px;
    background: #f7f9fc;
    color: #56677d;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.ss-col-cores {
    color: #3d4a5c;
    font-weight: 600;
}

.saved-setting-handle {
    display: none;
    width: 14px;
    margin-right: 4px;
    color: #c2ccd8;
    cursor: grab;
    vertical-align: middle;
}

.saved-settings-list.is-sortable .saved-setting-handle {
    display: inline-block;
}

.saved-setting-handle:active {
    cursor: grabbing;
}

.ss-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid #d7dde5;
    border-radius: 4px;
    background: #fff;
    color: #4a5a6e;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.ss-btn:hover,
.ss-btn:focus {
    border-color: #3f8fd4;
    background: #f2f8fd;
    color: #1c5c96;
    text-decoration: none;
}

.ss-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 143, 212, 0.25);
}

.ss-btn-pri {
    border-color: #3f8fd4;
    background: #3f8fd4;
    color: #fff;
}

.ss-btn-pri:hover,
.ss-btn-pri:focus {
    border-color: #2e7cc4;
    background: #2e7cc4;
    color: #fff;
}

.ss-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: #a3b0c0;
}

.ss-btn-ghost:hover,
.ss-btn-ghost:focus {
    border-color: transparent;
    background: transparent;
    color: #c0392b;
}

.ss-btn.is-busy {
    opacity: 0.65;
    pointer-events: none;
}

.ss-col-actions .ss-btn + .ss-btn {
    margin-left: 2px;
}

/* One primary action per row: Apply reads as the thing to do, View and Delete as
   the quiet pair beside it. */
.ss-col-actions .viewSavedConfig,
.ss-col-actions .deleteConfigBtn {
    width: 24px;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: #a3b0c0;
    justify-content: center;
}

.ss-col-actions .viewSavedConfig:hover,
.ss-col-actions .viewSavedConfig:focus {
    background: #eef3f9;
    color: #2e7cc4;
}

.ss-col-actions .deleteConfigBtn:hover,
.ss-col-actions .deleteConfigBtn:focus {
    background: #fbeeec;
    color: #c0392b;
}

.saved-settings-empty {
    padding: 22px 14px;
    color: #8593a5;
    font-size: 12.5px;
    text-align: center;
}

.saved-settings-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #eef1f5;
    background: #fafbfd;
}

.saved-settings-hint {
    margin-left: auto;
    color: #90a0b3;
    font-size: 11.5px;
}

.saved-settings-hint .fa {
    color: #b6c1cf;
}

.saved-settings-order-status {
    color: #6b7a8d;
    font-size: 11.5px;
    white-space: nowrap;
}

.saved-settings-order-status.is-failed {
    color: #c0392b;
}

.saved-settings-list.saved-settings-filtered .saved-setting-handle {
    opacity: 0.25;
}

.saved-settings-list.saved-settings-reordering .saved-setting-row {
    transition: none;
}

.saved-setting-row.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(35, 52, 74, 0.18);
    background: #fff;
}

.saved-setting-placeholder {
    height: 40px;
    background: #eef6fd;
    border: 1px dashed #90b4e0;
}

/* ---------------------------------------------------------------------------
   Submit form sections.

   The form still renders every input it always did; these only group what is
   already there, so that files, server and solver attributes are what you see
   first and the rest waits behind a disclosure.
   --------------------------------------------------------------------------- */

.ts-sections { margin-top: 4px; }

.ts-section { margin-bottom: 14px; }

.ts-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.ts-step-no {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c5282;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex: 0 0 auto;
}

.ts-step-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
}

/* A collapsed section is one control, so it is a button and reads as one. */
.ts-disclose {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f7f9fb;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ts-disclose:hover { background: #f0f0f0; border-color: #ccd5de; }
.ts-disclose:focus-visible { outline: 2px solid #2c5282; outline-offset: 2px; }

.ts-disclose-caret {
    color: #999;
    font-size: 12px;
    width: 10px;
    transition: transform 0.2s ease;
}

.ts-section-collapsed:not(.is-closed) .ts-disclose-caret { transform: rotate(90deg); }

.ts-disclose-title { font-weight: 600; color: #333; }

.ts-disclose-count {
    margin-left: auto;
    font-size: 11px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.ts-section-collapsed .ts-section-body {
    padding: 14px 12px 4px;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.ts-section-collapsed:not(.is-closed) .ts-disclose {
    border-radius: 6px 6px 0 0;
    background: #e0ecf8;
    border-color: #ccd5de;
}

/* An input inside a section keeps its own width, but a section never scrolls
   sideways on its own account. */
.ts-section-body { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .ts-disclose, .ts-disclose-caret { transition: none; }
}

/* ---------------------------------------------------------------------------
   Submission console.

   What you would have seen had you run the submit command yourself: the real
   command, the scheduler's real answer, then the solver log as it is written.
   Append-only, so nothing that happened is ever taken off the screen.
   --------------------------------------------------------------------------- */

.ts-console {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    margin: 12px 0;
    overflow: hidden;
}

.ts-console-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7f9fb;
    border-bottom: 1px solid #e0e0e0;
}

.ts-console.is-collapsed .ts-console-bar { border-bottom: none; }

.ts-console-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-align: left;
}

.ts-console-toggle:hover { color: #2c5282; }
.ts-console-toggle:focus-visible { outline: 2px solid #2c5282; outline-offset: -2px; }

.ts-console-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 11px;
    color: #888;
    font-family: Menlo, Monaco, Consolas, monospace;
}

.ts-console-caret { color: #999; transition: transform 0.2s ease; }
.ts-console:not(.is-collapsed) .ts-console-caret { transform: rotate(90deg); }

.ts-console-copy {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    font-size: 11px;
    color: #555;
    padding: 3px 10px;
    margin-right: 10px;
    cursor: pointer;
}

.ts-console-copy:hover { background: #f0f0f0; }

.ts-console-body {
    margin: 0;
    padding: 10px 12px;
    max-height: 260px;
    overflow: auto;
    background: #1f2933;
    color: #d7dee6;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    border: none;
    border-radius: 0;
}

.ts-console.is-collapsed .ts-console-body { display: none; }

/* One colour per kind of line, so the command and its answer read apart. */
.ts-line-cmd    { color: #9cc0e8; }
.ts-line-ok     { color: #9ad7a8; }
.ts-line-bad    { color: #f0a9a0; }
.ts-line-note   { color: #8fa0b0; }
.ts-line-out    { color: #d7dee6; }

@media (prefers-reduced-motion: reduce) {
    .ts-console-caret { transition: none; }
}

/* ---------------------------------------------------------------------------
   Layout choice.

   Simple is what everyone gets. The other two are a preference, for people who
   want to see what they are about to submit or to be asked one thing at a time.
   --------------------------------------------------------------------------- */

.ts-layout-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0 12px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 14px;
}

.ts-layout-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.ts-seg {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.ts-layout-btn {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ts-layout-btn:hover { color: #555; background: #e8e8e8; }

.ts-layout-btn[aria-pressed="true"] {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ts-layout-btn:focus-visible { outline: 2px solid #2c5282; outline-offset: 2px; }

.ts-layout-why { font-size: 11px; color: #999; margin-left: auto; }

/* --- with summary --- */

.ts-layout-summary .ts-sections {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}

.ts-layout-summary .ts-section { grid-column: 1; }

.ts-summary {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: 8px;
    background: #f7f9fb;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
}

.ts-summary-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 8px;
}

.ts-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dotted #e0e0e0;
    font-size: 12px;
}

.ts-summary-row:last-of-type { border-bottom: none; }
.ts-summary-k { color: #888; }

.ts-summary-v {
    font-family: Menlo, Monaco, Consolas, monospace;
    color: #333;
    font-variant-numeric: tabular-nums;
    text-align: right;
    word-break: break-word;
}

.ts-summary-v.is-missing { color: #b0b7bf; font-style: italic; }

.ts-summary-changed {
    margin-top: 10px;
    font-size: 11px;
    color: #856404;
    background: #fef3cd;
    border-radius: 4px;
    padding: 5px 8px;
}

/* Not enough room for a rail: it goes under the form rather than squeezing it. */
@media (max-width: 900px) {
    .ts-layout-summary .ts-sections { grid-template-columns: minmax(0, 1fr); }
    .ts-summary { grid-column: 1; grid-row: auto; position: static; }
}

/* --- step by step --- */

.ts-layout-steps .ts-section { display: none; }
.ts-layout-steps .ts-section.is-current { display: block; }

/* Every section is one step, so a collapsed one is simply open while it is the step. */
.ts-layout-steps .ts-section-collapsed .ts-section-body { display: block; }
.ts-layout-steps .ts-section-collapsed .ts-disclose { display: none; }

.ts-steps-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #e0e0e0;
}

.ts-step-where {
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.ts-steps-nav .btn[disabled] { opacity: 0.45; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .ts-layout-btn { transition: none; }
}

/* A doc link lifted out of a divider heading sits beside the section title. */
.ts-section-head a,
.ts-disclose-title + a {
    font-size: 11px;
    font-weight: 400;
    color: #2c5282;
    margin-left: 10px;
}

.ts-section-head a:hover { text-decoration: underline; }

/* --- after submit: the output is the page --- */

.ts-console-clock {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: #888;
    margin-right: 10px;
}

.ts-clock-elapsed {
    color: #2c5282;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ts-console-clock.is-stopped .ts-clock-elapsed { color: #155724; }

.ts-console-back {
    border: 1px solid #ccd5de;
    background: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #2c5282;
    padding: 3px 10px;
    margin-right: 8px;
    cursor: pointer;
}

.ts-console-back:hover { background: #e0ecf8; }

/* Once submitted, the form steps aside and the output is what you are looking at. */
.ts-submitted .ts-sections,
.ts-submitted .ts-layout-bar,
.ts-submitted .ts-steps-nav { display: none; }

.ts-submitted .ts-console { margin-top: 0; }
.ts-submitted .ts-console-body { max-height: 60vh; }

.ts-console-download {
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 4px;
    font-size: 11px;
    color: #555;
    padding: 3px 10px;
    margin-right: 6px;
    cursor: pointer;
}

.ts-console-download:hover { background: #f0f0f0; }

.ts-summary-title-second {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

.ts-summary-none {
    font-size: 11px;
    color: #888;
    font-style: italic;
    line-height: 1.5;
}

/* An attribute name can be long; it wraps rather than pushing the value off the panel. */
.ts-summary-row .ts-summary-k {
    max-width: 55%;
    word-break: break-word;
}

/* A limit attribute is a number box like any other field; the range it allows is
   said beside it rather than drawn as a track. */
.solver-limit-range {
    display: block;
    font-size: 10px;
    color: #999;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Enqueue split button.

   The caret half was rendering 18px tall against the 31px of the button it is
   attached to, so it sat short and detached instead of reading as one control.
   --------------------------------------------------------------------------- */

/* The caret half has no text in it -- just a 4px CSS triangle, with the
   screen-reader label taken out of flow -- so nothing holds it open and it rendered
   18px tall beside its 31px sibling.

   Rather than chase the button metrics, the group lays its two halves out as a
   stretched flex row: they are then the same height by construction, whatever the
   padding, font size or line height turn out to be. */
.footer-options-right .btn-group.dropup {
    display: inline-flex;
    align-items: stretch;
}

.footer-options-right .btn-group.dropup > .btn.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    float: none;
}

/* The two halves are one control, so only the outer corners are rounded. */
.footer-options-right .btn-group.dropup > .btn.queue { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.footer-options-right .btn-group.dropup > .btn.dropdown-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(0, 0, 0, 0.12);
}

/* Nothing queued means nothing to show, so the caret is disabled with the button. */
.footer-options-right .btn-group.dropup > .btn.queue.disabled + .btn.dropdown-toggle {
    opacity: 0.65;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Rail layout -- a stop per section down the right-hand edge. The sections are
   unchanged; the rail is a way of moving between them, so switching layouts
   never rebuilds the form.
   --------------------------------------------------------------------------- */

.hpcresources.ts-has-rail {
    position: relative;
    padding-right: 64px;
}

.ts-rail {
    position: absolute;
    top: 0;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    z-index: 5;
}

.ts-rail-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #888;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ts-rail-btn .fa {
    font-size: 15px;
}

.ts-rail-btn:hover {
    color: #2c5282;
    border-color: #c6d9ec;
    background: #fafbfc;
}

.ts-rail-btn.is-active {
    color: #fff;
    background: #2c5282;
    border-color: #2c5282;
}

.ts-rail-btn:focus {
    outline: 2px solid #90b4e0;
    outline-offset: 2px;
}

/* The label rides out on hover, so the rail stays a column of icons but never
   asks anyone to guess what an icon means. */
.ts-rail-label {
    position: absolute;
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #23282f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.ts-rail-btn:hover .ts-rail-label,
.ts-rail-btn:focus .ts-rail-label {
    opacity: 1;
}

/* In the rail layout every section stays open -- the rail is for moving, not for
   hiding, and a collapsed target is a stop that goes nowhere useful. */
.hpcresources.ts-layout-rail .ts-section-collapsed .ts-section-body {
    display: block;
}

@media (max-width: 900px) {
    .hpcresources.ts-has-rail {
        padding-right: 0;
    }
    .ts-rail {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        right: auto;
        padding: 8px 0 12px;
    }
    .ts-rail-label {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Repeatable solver attributes -- the + that gives one attribute more than one
   value. The first stays in the attribute itself; the rest are its siblings.
   --------------------------------------------------------------------------- */

.solver-attr-repeats {
    margin-top: 6px;
}

.solver-attr-repeat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.solver-attr-repeat-row .solver-attr-repeat-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.solver-attr-repeat-remove {
    flex: 0 0 auto;
    color: #999;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.solver-attr-repeat-remove:hover {
    background: #f8d7da;
    color: #721c24;
    text-decoration: none;
}

.solver-attr-repeat-add {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #2c5282;
    padding: 2px 0;
}

.solver-attr-repeat-add:hover {
    text-decoration: underline;
    color: #1f3f63;
}

/* The per-person half of the progress setting, beside the layout choice because both are
   "how this dialog behaves for me" rather than anything about the run. */
.ts-progress-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* .ts-layout-why already carries margin-left:auto to push itself right; a second auto
       here would split the free space and drag it back to the middle. */
    margin-left: 14px;
    font-weight: normal;
    margin-bottom: 0;
}

.ts-progress-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #8a94a0;
}

.ts-progress-select {
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    background: #fff;
    color: #31404e;
    max-width: 230px;
}

.ts-progress-select:focus {
    outline: 2px solid #02b6ff;
    outline-offset: 1px;
}

/* An admin-only attribute stays in the form so its value is submitted with everything
   else; it is only kept off the screen for people who are not administrators. Searching
   and the Changed filter skip it for the same reason. */
.solver_specific_attributes .input-row.solver-attr-admin-only {
    display: none !important;
}

/* Queue and cores are already asked for as first-class fields at the top of the solver
   block. Their attribute twins are hidden rather than dropped, so their values still
   submit -- the same treatment admin-only attributes get. Searching and the Changed
   filter skip them for the same reason. */
.solver_specific_attributes .input-row.solver-attr-core-dup,
.solver-attr-tab-pane .input-row.solver-attr-core-dup,
.solver-attr-group-body .input-row.solver-attr-core-dup {
    display: none !important;
}

/* =========================================================================
   d3VIEW.hpcConfigurator — one compact HPC-config form in three shells.
   The shells differ only in how .hpccfg-panel is sized and animated; every
   field rule below is shared, which is what keeps the drawer, the modal and
   the full-screen overlay from drifting apart. See views.configurator.js.
   ========================================================================= */

.hpccfg-root                    { position: fixed; inset: 0; z-index: 9100; pointer-events: none; }
.hpccfg-scrim                   { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; }
.hpccfg-root.is-open .hpccfg-scrim { opacity: 1; pointer-events: auto; }

.hpccfg-panel                   { position: absolute; background: #fff; display: flex; flex-direction: column; pointer-events: auto; box-shadow: 0 10px 40px rgba(15,23,42,0.22); }

/* drawer — right slide-in, matching the header drawers' 380px / 0.22s language */
.hpccfg-panel--drawer           { top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw; transform: translateX(100%); transition: transform 0.22s ease; }
.hpccfg-root--drawer.is-open .hpccfg-panel--drawer { transform: translateX(0); }

/* modal — centred, two columns of fields once there is room */
.hpccfg-panel--modal            { top: 50%; left: 50%; width: 760px; max-width: 94vw; max-height: 88vh; border-radius: 12px; transform: translate(-50%, -46%); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; }
.hpccfg-root--modal.is-open .hpccfg-panel--modal { transform: translate(-50%, -50%); opacity: 1; }

/* full-screen — full-viewport overlay on the same page, no navigation */
.hpccfg-panel--full             { inset: 0; width: 100%; height: 100vh; opacity: 0; transition: opacity 0.18s ease; }
.hpccfg-root--full.is-open .hpccfg-panel--full { opacity: 1; }

.hpccfg-head                    { display: flex; align-items: center; gap: 8px; padding: 14px 18px 12px 18px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.hpccfg-title                   { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpccfg-title .fa               { color: #2a6fb0; margin-right: 4px; }
.hpccfg-head-actions            { display: flex; align-items: center; gap: 2px; }
.hpccfg-icon-btn                { background: none; border: none; cursor: pointer; color: #6b7280; padding: 2px 8px; border-radius: 4px; font-size: 16px; line-height: 1.2; transition: background 0.15s ease, color 0.15s ease; }
.hpccfg-icon-btn:hover          { background: #f3f4f6; color: #111827; }
.hpccfg-close                   { font-size: 22px; }

.hpccfg-body                    { flex: 1 1 auto; overflow: auto; padding: 16px 18px; }
.hpccfg-loading,
.hpccfg-error                   { padding: 28px 8px; text-align: center; color: #6b7280; font-size: 13px; }
.hpccfg-error                   { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 16px; }

.hpccfg-grid                    { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hpccfg-field                   { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hpccfg-field label             { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; margin: 0; }
.hpccfg-field .form-control     { height: 34px; font-size: 13px; }
.hpccfg-hint                    { font-size: 11px; color: #9ca3af; min-height: 14px; }

.hpccfg-formerror               { margin-top: 12px; padding: 9px 12px; border-radius: 6px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12px; }
.hpccfg-formerror[hidden]       { display: none; }

.hpccfg-actions                 { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e5e7eb; background: #fafbfc; }

/* The wider shells get two columns; server and name stay full-bleed because
   their values are the longest. The drawer never reaches this breakpoint. */
.hpccfg-panel--modal .hpccfg-grid,
.hpccfg-panel--full  .hpccfg-grid { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.hpccfg-panel--modal .hpccfg-field--server,
.hpccfg-panel--modal .hpccfg-field--name,
.hpccfg-panel--full  .hpccfg-field--server,
.hpccfg-panel--full  .hpccfg-field--name { grid-column: 1 / -1; }

/* Full-screen would otherwise stretch a seven-field form across a 27" display. */
.hpccfg-panel--full .hpccfg-body    { padding: 32px 0; }
.hpccfg-panel--full .hpccfg-grid,
.hpccfg-panel--full .hpccfg-formerror { max-width: 860px; margin-left: auto; margin-right: auto; }
.hpccfg-panel--full .hpccfg-actions   { justify-content: center; }

/* dock — the minimized pill */
.hpccfg-dock                    { position: fixed; right: 20px; bottom: 56px; z-index: 9150; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; box-shadow: 0 6px 20px rgba(15,23,42,0.18); cursor: pointer; font-size: 12px; font-weight: 600; color: #111827; max-width: 320px; }
.hpccfg-dock:hover              { border-color: #2a6fb0; }
.hpccfg-dock .fa                { color: #2a6fb0; }
.hpccfg-dock-label              { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpccfg-dock-restore            { color: #6b7280; font-size: 14px; }

@media (max-width: 640px) {
    .hpccfg-panel--drawer       { width: 100vw; max-width: 100vw; }
    .hpccfg-panel--modal        { width: 96vw; }
    .hpccfg-panel--modal .hpccfg-grid,
    .hpccfg-panel--full  .hpccfg-grid { grid-template-columns: 1fr; }
}



/* Step 0 carries the saved settings; without a gap its badges sit flush against
   the Files step and the two read as one block. */
.ts-section[data-section="saved_settings_wrapper"] { margin-bottom: 18px; }
.ts-section[data-section="saved_settings_wrapper"] .ts-section-body { padding-bottom: 10px; }

/* Saved-setting drawer: sits over the form's right edge so a setting can be read
   against what is currently filled in, rather than replacing the form outright. */
.saved-setting-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    max-height: 100%;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
    box-shadow: -2px 0 10px rgba(0,0,0,.08);
    z-index: 1060;
}
.saved-setting-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #dfe3e8;
    background: #fafbfc;
}
.saved-setting-drawer-title { font-size: 12.5px; font-weight: 600; flex: 1 1 auto; }
.saved-setting-drawer-close { color: #656363; }
.saved-setting-drawer-body { padding: 10px 12px; }
.saved-setting-view { margin-right: 8px; }

/* Field labels in a step carry inline icons and links of differing heights, which left
   the two columns starting at different vertical positions -- "Choose Parent" sat below
   "Alternate Name". Give every label the same box so the rows align. */
.ts-section .input-row > label,
.ts-section .input-row > .control-label {
    display: block;
    min-height: 20px;
    line-height: 20px;
    margin-bottom: 4px;
}

/* One header over the queued configurations, so the way back, the count and the filter
   read as part of this view rather than as three unrelated controls. */
.configs-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: #fafbfc;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
}
.configs-toolbar-count { font-size: 12px; color: #656363; }
.configs-toolbar-spacer { flex: 1 1 auto; }
.configs-filter { width: 220px; height: 26px; font-size: 12px; }

/* The three per-configuration actions were a mix of bare links and one button. */
.configItemActions { display: inline-flex; gap: 6px; align-items: center; }
.configItemActions .btn { font-size: 11px; }
.configItemActions .configItemDanger:hover { color: #a94442; border-color: #d9b3b3; }
.configItemName { font-weight: 600; }
.configItemId { color: #9aa4ae; font-size: 11.5px; margin-left: 6px; }

/* Solver attribute toolbar: a row of its own directly above the settings it
   filters. It used to be appended into the section divider label, which
   dropDuplicateHeading removes when the form is grouped into steps -- so the
   whole toolbar disappeared. Ported from d3view-08's hpcsubmit work. */
.solver-attr-toolbar-row { margin: 6px 0 10px 0; }

.solver-attr-modes {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin-left: 4px;
}

.solver-attr-mode {
    border: none;
    background: transparent;
    color: #888888;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

.solver-attr-mode:hover { color: #555555; background: #e8e8e8; }

.solver-attr-mode.active {
    background: #ffffff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.solver-attr-group {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* Rounded corners without overflow:hidden on the group, which would clip an open
   select the same way the row did. */
.solver-attr-group-head {
    border-radius: 6px 6px 0 0;
}

.solver-attr-group-head {
    width: 100%;
    text-align: left;
    background: #fafbfc;
    border: none;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: inherit;
}

.solver-attr-group-head:hover { background: #f3f5f8; }
.solver-attr-group-caret { color: #999999; font-size: 10px; width: 10px; flex: 0 0 auto; }

.solver-attr-group-name {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #333333;
}

.solver-attr-group-count { background: #e0ecf8; color: #2c5282; font-size: 10px; }
.solver-attr-group-body { padding: 12px 13px; border-top: 1px solid #e8eaee; }
.solver-attr-group-body[hidden] { display: none !important; }

.solver-attr-group.solver-search-hidden { display: none !important; }

/* A solver setting the Required filter is holding back. Applies in every layout;
   in the flat list the .optionalAttrs container does the same job for the rows it
   holds, which is why those rows are deliberately left unmarked. */
.solver_specific_attributes .input-row.solver-attr-not-required {
    display: none !important;
}

/* Footer readiness: what a submission still needs, or what is about to happen.
   Submit follows this rather than whether a configuration card exists. */
.ts-readiness {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-right: auto;
    font-size: 12px;
    font-weight: 600;
}

.ts-readiness .ts-readiness-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ts-readiness.is-ready { color: #155724; }
.ts-readiness.is-ready .ts-readiness-dot { background: #28a745; }

.ts-readiness.is-waiting { color: #856404; }
.ts-readiness.is-waiting .ts-readiness-dot { background: #d46b08; }

/* How long a submission took, phase by phase, shown once it finishes. The server
   already timed every phase; this is the only place the person submitting can see it. */
.ts-timing {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c5282;
    border-radius: 6px;
    background: #f7f9fc;
    font-size: 12px;
}

.ts-timing.is-bad {
    border-left-color: #a03030;
    background: #fdf6f5;
}

.ts-timing .ts-timing-head {
    font-weight: 600;
    color: #2c5282;
}

.ts-timing.is-bad .ts-timing-head { color: #a03030; }

.ts-timing .ts-timing-phases {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ts-timing .ts-timing-phase {
    padding: 2px 8px;
    border-radius: 11px;
    background: #eef2f7;
    color: #555;
    font-size: 11px;
    white-space: nowrap;
}

.ts-timing .ts-timing-phase b { color: #333; font-weight: 600; }

/* A phase over the server's own slow threshold, so the one that cost the time is
   findable without reading every number. */
.ts-timing .ts-timing-phase.is-slow {
    background: #fff7e6;
    color: #856404;
}

.ts-timing .ts-timing-phase.is-slow b { color: #d46b08; }

.ts-timing .ts-timing-id {
    margin-left: auto;
    color: #999;
    font-size: 11px;
    font-family: monospace;
}

.ts-readiness-chip {
    padding: 2px 9px;
    border-radius: 11px;
    background: #fdecea;
    color: #a03030;
    font-size: 11px;
    font-weight: 600;
}

/* The footer keeps Bootstrap's own layout -- buttons right, in document order. The
   readiness line floats left and is allowed to shrink, so a fourth action cannot push
   Submit onto a second row. */
/* The footer was a fixed 50/50 grid, so the actions got half the width whatever they
   needed and the fifth button dropped to a second row at every size below about 1700px.
   One row instead: the actions take exactly the width they need, the readiness line takes
   what is left and ellipsises. No pixel budget to get wrong at the next window size. */
.ts-footer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.ts-footer-row .footer-options-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.ts-footer-row .footer-options-right {
    float: none;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

.ts-footer-row .ts-readiness {
    float: none;
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    line-height: 1.35;
    padding: 0;
    overflow: hidden;
}

/* The wording gives way before the chips do: the count is repeated by the chips, the
   chips are not repeated anywhere. */
.ts-readiness .ts-readiness-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Adding a second configuration is the rare path, so it reads as a quiet secondary
   action in the footer rather than the full-width primary bar that used to gate Submit. */
.ts-add-another.hidden { display: none !important; }

.ts-add-another {
    margin-left: 10px;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    padding: 6px 14px;
}

.ts-add-another:hover { background: #f0f0f0; color: #2c5282; }
.ts-add-another .fa { margin-right: 5px; }

/* Save this configuration opens the HPC configuration view that already exists, seeded
   from the form, so there is no second save dialog to style here. */
.ts-saveconfig-open.hidden { display: none !important; }
.ts-saveconfig-open { margin-right: 6px; }

/* This form's buttons, in place of Bootstrap's. The app makes every button an 18px pill
   (`button, .btn { border-radius: 18px }`) coloured by btn-default, btn-primary or
   btn-warning. These are quiet outlined buttons with one filled Submit. Cancel and Submit
   belong to the dialog, so they are restyled only inside this form's footer row. */
.ts-btn,
.ts-footer-row .btn.modal-cancel,
.ts-footer-row .btn.modal-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #d9dee4;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ts-btn:hover { background: #f5f7fa; border-color: #c5cfdb; color: #2c5282; text-decoration: none; }
.ts-btn:active { background: #edf1f6; }
.ts-btn .fa { font-size: 11px; }
.ts-btn:focus-visible,
.ts-footer-row .btn.modal-cancel:focus-visible,
.ts-footer-row .btn.modal-ok:focus-visible { outline: 2px solid rgba(44, 82, 130, 0.35); outline-offset: 1px; }

.ts-btn-accent { background: #eef3fa; border-color: #c9d7ea; color: #2c5282; }
.ts-btn-accent:hover { background: #e0ecf8; border-color: #aec3de; color: #2c5282; }

.ts-btn.disabled,
.ts-btn[disabled] { background: #f7f8fa; border-color: #e3e7ec; color: #a3acb8; opacity: 1; cursor: not-allowed; }

.ts-settings-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-settings-actions .loadingJobParams { color: #999; font-size: 12px; }

.ts-footer-row .ts-btn,
.ts-footer-row .btn.modal-cancel,
.ts-footer-row .btn.modal-ok { height: 34px; padding: 0 16px; font-size: 13px; }

/* style.css makes every .modal-cancel transparent with !important. */
.ts-footer-row .btn.modal-cancel:hover { background-color: #f5f7fa !important; border-color: #c5cfdb; color: #2c5282; }

.ts-footer-row .btn.modal-ok { min-width: 96px; background: #2c5282; border-color: #2c5282; color: #fff; }
.ts-footer-row .btn.modal-ok:hover { background: #244570; border-color: #244570; color: #fff; }
.ts-footer-row .btn.modal-ok.disabled,
.ts-footer-row .btn.modal-ok[disabled] { background: #b3c2d6; border-color: #b3c2d6; color: #fff; opacity: 1; cursor: not-allowed; }

.ts-footer-row .btn-group > .btn.queue { border-radius: 6px 0 0 6px; }
.ts-footer-row .btn-group > .btn.dropdown-toggle { border-radius: 0 6px 6px 0; padding: 0 9px; }

/* Name first: it is the thing a person is asked for, and it was at the bottom under
   six fields they had already been given. */
.hpccfg-name-top { margin-bottom: 14px; }

/* A configuration saved from the submission form carries the whole solver setup with
   it. That is the part easiest to get wrong and impossible to see, so say how many
   settings are coming and let them be read in full before saving. */
.hpccfg-attrs {
    margin-top: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f7f9fb;
    overflow: hidden;
}

.hpccfg-attrs[hidden] { display: none !important; }

.hpccfg-attrs-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
}

.hpccfg-attrs-count {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: #2c5282;
}

.hpccfg-attrs-toggle {
    flex: 0 0 auto;
    border: 1px solid #d6dde6;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
}

.hpccfg-attrs-toggle:hover { background: #eef2f7; color: #2c5282; }

/* This panel used to print a handful of values read-only, which 260px held. It now hosts the
   solver's full attribute set -- 29 fields for solverai, 1573px of them -- and a 260px window
   onto that, inside a dialog body that already scrolls, gave two nested scrollbars and a
   keyhole. The dialog body does the scrolling; the footer sits outside it, so Save stays put. */
.hpccfg-attrs-body {
    padding: 4px 13px 12px;
    border-top: 1px solid #e8eaee;
    background: #fff;
}

.hpccfg-attrs-body[hidden] { display: none !important; }

.hpccfg-attr-row {
    display: flex;
    gap: 14px;
    font-size: 11.5px;
    line-height: 1.85;
    border-bottom: 1px solid #f4f6f8;
}

.hpccfg-attr-row:last-child { border-bottom: none; }
.hpccfg-attr-k { flex: 0 0 46%; color: #667; font-family: Menlo, Consolas, monospace; word-break: break-all; }
.hpccfg-attr-v { flex: 1 1 auto; color: #333; word-break: break-word; }

/* The id a configuration is stored under, shown beside its name so a saved configuration
   can be matched to what is in the list. Settled when the view opens, so the number on
   screen is the number stored. */
.hpccfg-name-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hpccfg-id {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: #8a94a0;
    font-family: Menlo, Consolas, monospace;
    letter-spacing: 0.2px;
}

/* Re-read the saved settings from the server. The in-memory copy can be behind what is
   stored -- another tab, another session, or a save that landed after this form was built. */
.saved-settings-refresh {
    color: #8a94a0;
    margin-right: 10px;
    font-size: 12px;
}

.saved-settings-refresh:hover { color: #2c5282; }

/* Sections 4 to 6 are produced by the server choice cascading into solvers, settings and
   queues. Until that has run they are empty, or still showing the previous server's
   answers -- which reads as though those values apply. A placeholder says what is
   actually true: this is coming, and it depends on the choice above. */
.ts-section-body.ts-section-waiting > *:not(.ts-section-skeleton) {
    display: none !important;
}

.ts-section-skeleton {
    padding: 4px 0 10px;
}

.ts-skeleton-why {
    font-size: 12px;
    color: #8a94a0;
    margin-bottom: 12px;
}

.ts-skeleton-why:empty { display: none; }

.ts-skeleton-row {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
}

.ts-skeleton-line {
    flex: 1 1 0;
    height: 34px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f2f4f6 25%, #e6e9ed 50%, #f2f4f6 75%);
    background-size: 200% 100%;
    animation: hpcShimmer 1.5s ease infinite;
}

.ts-skeleton-line.short  { flex: 0 0 26%; }
.ts-skeleton-line.medium { flex: 0 0 46%; }

.ts-skeleton-row:nth-child(3) .ts-skeleton-line { animation-delay: 0.15s; }
.ts-skeleton-row:nth-child(4) .ts-skeleton-line { animation-delay: 0.30s; }

/* ── Traceability and organization: one shape for every field ──────────────
   Measured before this: a plain input rendered 489px wide while a select2 beside
   it rendered 469 and sat 8px lower, Tags collapsed to 144, and two rows started
   7px apart. Each widget brings its own sizing, so the row looked ragged even
   though the columns were even. Everything below makes the widget fill its column
   and sit on the same baseline, whatever kind of widget it is. */

.ts-section[data-section="meta-data"] .select2-container,
.ts-section[data-section="meta-data"] .bootstrap-select,
.ts-section[data-section="meta-data"] .bootstrap-tagsinput,
.ts-section[data-section="meta-data"] input.form-control,
.ts-section[data-section="meta-data"] textarea.form-control,
.ts-section[data-section="meta-data"] select.form-control {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* select2 and the tag field carry their own top offset, which is what put Choose
   Parent below Alternate Name on the same row. */
.ts-section[data-section="meta-data"] .select2-container,
.ts-section[data-section="meta-data"] .bootstrap-tagsinput {
    margin-top: 0;
    vertical-align: top;
}

/* The tag field is an input inside a wrapper; the wrapper is the control. */
.ts-section[data-section="meta-data"] .bootstrap-tagsinput {
    min-height: 34px;
    padding: 4px 8px;
    border-radius: 4px;
}

.ts-section[data-section="meta-data"] .bootstrap-tagsinput input {
    width: auto !important;
    min-width: 90px;
}

/* One rhythm down the section: a field and the label under it never touch. */
.ts-section[data-section="meta-data"] .mb10 {
    margin-bottom: 16px;
}

.ts-section[data-section="meta-data"] .mb10 > .row > [class^="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.ts-section[data-section="meta-data"] label {
    display: block;
    margin-bottom: 6px;
    line-height: 18px;
}

/* Description is a textarea and ends up taller than the field beside it, which left
   Tags crowded against it. */
.ts-section[data-section="meta-data"] .description-container { margin-bottom: 20px; }
.ts-section[data-section="meta-data"] .description-container textarea.form-control {
    min-height: 68px;
    resize: vertical;
}

/* ── An icon on every label ───────────────────────────────────────────────
   Five of the ten labels already carried one, which read as though those fields
   were special. The rest are given the icon that matches what they hold, through
   the label rather than the form definition, so no field definition has to change. */
/* On the h2, not the label. The label wraps its text in an <h2>, so an icon placed on
   the label rendered on its own line above that block -- the five labels carrying one
   measured 35px against 16, pushing their control below the field opposite, and the icon
   was never beside the words it belonged to. */
.ts-section[data-section="meta-data"] label h2::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 12px;
    line-height: inherit;
    vertical-align: baseline;
    margin-right: 7px;
    color: #8a94a0;
}

.ts-section[data-section="meta-data"] .name-container label h2::before        { content: "\f02b"; }
.ts-section[data-section="meta-data"] .description-container label h2::before { content: "\f036"; }
.ts-section[data-section="meta-data"] .tags-container label h2::before        { content: "\f02c"; }
.ts-section[data-section="meta-data"] .study-container label h2::before,
.ts-section[data-section="meta-data"] .study_id-container label h2::before    { content: "\f02d"; }
.ts-section[data-section="meta-data"] .project_id-container label h2::before  { content: "\f0f7"; }

/* The five that already had their own icon keep it and get no second one. */
.ts-section[data-section="meta-data"] .parent_srs_id-container label h2::before,
.ts-section[data-section="meta-data"] .loadcase_id-container label h2::before,
.ts-section[data-section="meta-data"] .responsetemplate_id-container label h2::before,
.ts-section[data-section="meta-data"] .milestone_id-container label h2::before {
    content: none;
    margin-right: 0;
}

/* The field wrappers are inline-block, so they aligned on their baselines: a row whose
   two fields held different content sat a few pixels out of step, which is what made
   Choose Parent look dropped next to Alternate Name. Measured 7px. Align on the top
   edge instead, which is what a form row means. */
.ts-section[data-section="meta-data"] .ts-section-body > .mb10 {
    vertical-align: top;
}

/* ── A field the person has changed ───────────────────────────────────────
   The form arrives already filled in from the server's and solver's defaults, so what
   is on screen is mostly not the person's doing. These are the ones that are: measured
   against what the form settled on, re-taken whenever the server refills it. */
/* The tint on a changed field must not take part in the layout.
   It was painted by the row's own background, reached with horizontal padding and
   negative margins of the same size. These settings sit in percentage-width columns,
   so the row reserves its column but the negative margins let the painted box extend
   22px past it -- over the left edge of the attribute beside it, which is why a
   neighbour read as "ata Source" rather than "Data Source". Which of the two won was
   decided by paint order, so the same change looked right in one column and wrong in
   the next.

   A background alone takes no part in layout, so the tint now sits exactly on the box
   the row already occupies. It no longer bleeds into the gutter, which is the whole
   point: that bleed was the bug. Drawing it on a pseudo-element to keep the bleed is
   not open either -- .input-row carries a clearfix ::after, so a second one inherits
   its display:table, shrinks to nothing and takes the row's float clearing with it. */
.ts-sections .ts-field-changed {
    position: relative;
    background: #f3f8fd;
    border-radius: 6px;
}

.ts-sections .ts-field-changed::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 2px;
    background: #2c5282;
}

/* The control itself picks up the same tint, so the mark reads even where the row is
   only as tall as the field. */
.ts-sections .ts-field-changed input.form-control,
.ts-sections .ts-field-changed textarea.form-control,
.ts-sections .ts-field-changed select.form-control,
.ts-sections .ts-field-changed .select2-choice,
.ts-sections .ts-field-changed .bootstrap-select > .btn {
    border-color: #b9d4ee;
    background-color: #fbfdff;
}

/* How many fields in this step differ, on the step's own heading. */
.ts-section-changed {
    margin-left: 10px;
    padding: 2px 9px;
    border-radius: 11px;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* ── The submit dialog's own header ───────────────────────────────────────
   The window controls were three bordered pill buttons of the same weight as the
   dialog's real actions, sitting over the heading. They are window furniture, so they
   read as furniture: plain glyphs, quiet until pointed at, and close is the only one
   that colours. */
.modal-header .toggle-fullscreen,
.modal-header .dockwindow,
.modal-header .closewindow {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9aa4b0 !important;
    width: 26px;
    height: 26px;
    line-height: 26px;
    padding: 0 !important;
    margin-left: 2px;
    border-radius: 6px;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-header .toggle-fullscreen:hover,
.modal-header .dockwindow:hover {
    background: #eef2f7 !important;
    color: #2c5282 !important;
}

.modal-header .closewindow:hover {
    background: #fdecea !important;
    color: #a03030 !important;
}

/* Which of the three jobs this dialog is doing, beside its name rather than floated
   past it -- the heading is floated left, so anything after it lands at the far right
   under the window controls. */
.modal-header .ts-mode-name {
    font-size: 13px;
    font-weight: 600;
    color: #8a94a0;
    margin-left: 10px;
    white-space: nowrap;
}

.modal-header .ts-mode-name::before {
    content: "\2014";
    margin-right: 8px;
    color: #c8ced6;
}

/* ── Layout and After submit, on one line ─────────────────────────────────
   They were a 54px band with the select running into the edge of the dialog. One row
   that cannot wrap, with the explanatory line giving up its space first. */
.ts-layout-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 6px 0;
    min-height: 0;
}

.ts-layout-bar .ts-layout-why {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #9aa4b0;
}

.ts-layout-bar .ts-layout-label,
.ts-layout-bar .ts-progress-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a94a0;
}

.ts-layout-bar .ts-seg,
.ts-layout-bar .ts-progress-pick {
    flex: 0 0 auto;
}

.ts-layout-bar .ts-progress-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
}

/* The select was clipped at the dialog edge; it now takes the width its longest option
   needs and no more. */
.ts-layout-bar .ts-progress-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 210px;
    max-width: 260px;
    height: 28px;
    font-size: 12px;
    border-radius: 6px;
}

/* ---- the solver attributes, mounted into the configuration dialog ------------- */

/* The mounted view keeps its own solver and solution-type pickers -- it reads both by id when
   it renders and when it reports -- but the solver is already chosen higher up this form, so
   they are never shown. */
.hpccfg-attrs-body .hpccfg-hidden-hook {
    display: none !important;
}

/* A solver that sets col_width on its attributes has laid them out itself, and the renderer
   applies those as inline widths. The grid would override that, so it steps aside. */
.hpccfg-attrs-body.is-authored-layout .hpcsubmit-solver-specific-attrs,
.hpccfg-attrs-body.is-authored-layout .solver-optional-attributes {
    display: block;
}

/* Two columns: 29 fields in one column is a long scroll for what is a settings sheet. */
.hpccfg-attrs-body .hpcsubmit-solver-specific-attrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    align-items: start;
}

.hpccfg-attrs-body .solver-optional-attributes,
.hpccfg-attrs-body .toggleRestSolverAttrs {
    grid-column: 1 / -1;
}

.hpccfg-attrs-body .solver-optional-attributes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
    align-items: start;
}

.hpccfg-attrs-body .solver-attr-group {
    min-width: 0;
    margin-bottom: 10px;
}

.hpccfg-attrs-body .solver-attr-group > label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #777;
}

.hpccfg-attrs-body .solver-attr-group.hidden {
    display: none;
}

.hpccfg-attrs-body .toggleRestSolverAttrs {
    display: block;
    margin: 10px 0 4px;
    font-size: 12px;
}

@media (max-width: 720px) {

    .hpccfg-attrs-body .hpcsubmit-solver-specific-attrs,
    .hpccfg-attrs-body .solver-optional-attributes {
        grid-template-columns: 1fr;
    }

}

/* --------------------------------------------------------------------------
   Classic submit form (spa/views/helpers/turingssubmit.js): its input-files
   block reuses the file-item rows above. The old markup hooks stay
   (.dz-preview, .mainModel, .makeMain.main, .remove-file); only the look changes.
   -------------------------------------------------------------------------- */
.dropzone-container { display: flex; flex-direction: column; }
.dropzone-container .dropz { order: -1; padding-top: 0 !important; }
.dropzone-container .dropz form#msgArea,
div#simulation .modalContainer .dropz form#msgArea,
.dropz form#msgArea {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px;
    border: 2px dashed #d0d7de;
    border-radius: 8px;
    background: #fafbfc;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.dropzone-container .dropz form#msgArea:hover { border-color: #337ab7; background: #f0f6ff; }
/* The empty dropzone said the same thing twice.
   These two rules drew a cloud and an invitation onto the form itself, while
   .ts-dropz-empty -- a real element, with a title and a line about what the box takes,
   which the code already shows and hides as files arrive -- drew its own just below.
   Both appear whenever the zone is empty, so the box carried two clouds and two
   invitations. The element stays, since it says more and the code can reach it; the
   pair that could only ever repeat it does not. */
.dropzone-container .dz-preview.hpcsubmit-file-item {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 12px;
    margin: 0;
    cursor: default;
}
.dropzone-container .dz-preview.hpcsubmit-file-item:last-child { margin-bottom: 0; }
.dropzone-container .dz-preview.hpcsubmit-file-item:hover { background: #fafafa; }
.dropzone-container .dz-preview.hpcsubmit-file-item.mainModel { border-color: #337ab7; background: #f0f7ff; }
.dropzone-container .dz-preview.hpcsubmit-file-item.mainModel .hpcsubmit-file-icon { background: #dae8f5; color: #337ab7; }
.dropzone-container .dz-preview.hpcsubmit-file-item .dz-filename,
.dropzone-container .dz-preview.hpcsubmit-file-item .dz-size { display: block; width: auto; }
.dropzone-container .dz-preview.hpcsubmit-file-item .dz-filename a { color: #333; text-decoration: none; }
.dropzone-container .dz-preview.hpcsubmit-file-item .makeMain {
    width: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    color: #999;
    background: transparent;
    border: 1px solid #ddd;
    cursor: pointer;
}
.dropzone-container .dz-preview.hpcsubmit-file-item .makeMain:hover { color: #337ab7; border-color: #337ab7; }
.dropzone-container .dz-preview.hpcsubmit-file-item .makeMain.main { color: #fff; background: #337ab7; border-color: #337ab7; cursor: default; }
.dropzone-container .dz-preview.hpcsubmit-file-item .remove-file,
.dropzone-container .dz-preview.hpcsubmit-file-item .copyfiletoggle {
    width: auto;
    font-size: 12px;
    color: #bbb;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s ease;
}
.dropzone-container .dz-preview.hpcsubmit-file-item .remove-file:hover { color: #d9534f; }
.dropzone-container .dz-preview.hpcsubmit-file-item .copyfiletoggle:hover { color: #337ab7; }
.dropzone-container .dz-preview.hpcsubmit-file-item.archive .hpcsubmit-file-icon { color: #856404; background: #fff3cd; }

/* ---------------------------------------------------------------------------
   Cluster status strip under the server picker (ClusterStatusView,
   spa/turingssubmit/views.serverstatus.js). White, compact, one accent; red and
   amber only when something is wrong. Cores and disk run red to green by what is
   free. Every class is cstat- so bootstrap's .btn/.table/code never reach in.
   --------------------------------------------------------------------------- */

.cstat { margin: 4px 0 6px; font-size: 13px; color: #555; }
.cstat code { font-family: Menlo, Monaco, Consolas, monospace; font-size: 11px; color: #555; background: none; padding: 0; }
.cstat-mono { font-family: Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.cstat-dim { color: #aaa; }
.cstat-bad { color: #c0392b; }
.cstat-warn-text { color: #9a6700; }
.cstat-quiet { font-size: 13px; font-weight: 600; color: #888; }
.cstat-sub { display: block; font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.cstat-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #888; }
.cstat-sub.cstat-warn-text { color: #9a6700; }

.cstat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 0 8px; }
.cstat-sched { font-size: 12px; color: #888; }
.cstat-meta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: #888; }
.cstat-meta b { font-weight: 600; color: #555; }
.cstat-key { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: #888; }
.cstat-key span { display: inline-flex; align-items: center; gap: 4px; }
.cstat-key .cstat-dot { width: 7px; height: 7px; border-radius: 2px; }
.cstat-old { color: #9a6700; }
.cstat-every { height: 26px; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 0 6px; font-size: 12px; color: #555; }
.cstat-icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: none; color: #8a94a0; cursor: pointer; padding: 0; }
.cstat-icon-btn:hover { background: #f5f7f9; color: #333; }

.cstat-notice { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; padding: 6px 0 8px; }
.cstat-notice .fa { color: #d69e2e; margin-top: 2px; }
.cstat-notice b { color: #333; font-weight: 600; }
.cstat-loading { font-size: 12.5px; color: #888; padding: 10px 0; }
.cstat-loading .fa { color: #999; margin-right: 6px; }

/* the strip: cells flow and stretch to fill every row; the 1px gaps are the dividers */
.cstat-cells { display: flex; flex-wrap: wrap; gap: 1px; background: #eee; border: 1px solid #eee; border-radius: 6px; overflow: hidden; }
/* The app rounds every button into an 18px pill; the cells are buttons that join into one strip. */
.cstat-cell { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; border-radius: 0; margin: 0; background: #fff; padding: 8px 12px 9px; cursor: pointer; transition: background 0.2s ease; }
.cstat-cell:hover { background: #f5f7f9; }
.cstat-cell[aria-expanded="true"] { background: #f7f9fb; box-shadow: inset 0 -2px 0 #2c5282; }
.cstat-cell:focus-visible { outline: 2px solid #2c5282; outline-offset: -2px; }
.cstat-cell.is-old { opacity: 0.65; }
.cstat-cell-top { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #888; }
.cstat-i { width: 14px; height: 14px; fill: none; stroke: #8a94a0; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.cstat-warn { margin-left: auto; font-size: 12px; }
.cstat-warn-warn { color: #d69e2e; }
.cstat-warn-bad { color: #c0392b; }
.cstat-val { display: block; font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstat-val b { font-size: 14px; font-weight: 700; color: #333; }

.cstat-bar { display: flex; gap: 2px; height: 5px; border-radius: 3px; overflow: hidden; background: #e9ecef; width: 100%; }
.cstat-s { flex-basis: 0; flex-shrink: 1; min-width: 3px; height: 100%; }
.cstat-s-use, .cstat-s-run { background: #2c5282; }
.cstat-s-free { background: #e9ecef; box-shadow: inset 0 0 0 1px #cfd6de; }
.cstat-bar .cstat-s-free { background: transparent; box-shadow: none; }
.cstat-s-wait { background: #9db5d3; }
.cstat-s-held { background: #6b7684; }
.cstat-s-mixed { background: linear-gradient(135deg, #2c5282 50%, #e9ecef 50%); }
.cstat-s-unavail { background-color: #9aa5b1; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 5px); }
.cstat-s-down { background: #d9534f; }
.cstat-meter { display: block; height: 5px; border-radius: 3px; overflow: hidden; background: #e9ecef; width: 100%; }
.cstat-meter > span { display: block; height: 100%; background: #2c5282; }
.cstat-meter.cstat-m-warn > span { background: #d69e2e; }
.cstat-meter.cstat-m-bad > span { background: #d9534f; }
.cstat-meter.cstat-thin { height: 4px; width: 44px; }
.cstat-strip { display: flex; flex-wrap: wrap; gap: 2px; }
.cstat-nd { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.cstat-nd-free { background: #e9ecef; box-shadow: inset 0 0 0 1px #cfd6de; }
.cstat-nd-use { background: #2c5282; }
.cstat-nd-mixed { background: linear-gradient(135deg, #2c5282 50%, #e9ecef 50%); }
.cstat-nd-unavail { background-color: #9aa5b1; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 4px); }
.cstat-nd-down { background: #d9534f; }
.cstat-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11.5px; color: #666; }
.cstat-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cstat-legend b { font-weight: 600; color: #333; }
.cstat-legend-row { margin-bottom: 8px; }
.cstat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* the one-line check of the request in step 4 */
.cstat-req { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 8px 0 0; font-size: 12.5px; color: #555; }
.cstat-req b { color: #333; font-weight: 600; }
.cstat-v-ok .fa { color: #2c5282; }
.cstat-v-warn .fa { color: #d69e2e; }
.cstat-v-bad .fa { color: #c0392b; }
.cstat-v-mute .fa { color: #aaa; }
.cstat-link { border: 0; border-radius: 3px; background: none; padding: 0; color: #2c5282; cursor: pointer; font-size: 12px; }
.cstat-link:hover { text-decoration: underline; }
.cstat-btn { height: 26px; padding: 0 10px; border: 1px solid #ccc; border-radius: 4px; background: #fff; color: #555; font-size: 12px; cursor: pointer; }
.cstat-btn:hover { background: #f5f7f9; }

/* details under the strip */
.cstat-detail { border: 1px solid #eee; border-radius: 6px; padding: 10px 12px 6px; margin-top: 10px; }
.cstat-d-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.cstat-src { font-size: 11.5px; color: #888; }
.cstat-d-head .cstat-icon-btn { margin-left: auto; }
.cstat-note { font-size: 12px; color: #888; margin: 8px 0 4px; }
.cstat-note b { color: #555; font-weight: 600; }
.cstat-note-top { margin: 0 0 10px; }
.cstat-tbl-wrap { overflow: auto; }
.cstat-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cstat-table th, .cstat-table td { padding: 6px 10px 6px 0; text-align: left; vertical-align: middle; white-space: nowrap; }
.cstat-table th { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #999; border-bottom: 1px solid #e0e0e0; background: #fff; position: sticky; top: 0; z-index: 1; }
.cstat-table td { color: #555; border-bottom: 1px solid #f2f2f2; }
.cstat-table tbody tr:last-child td { border-bottom: 0; }
.cstat-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cstat-table b { color: #333; font-weight: 600; }
.cstat-table tr.is-mine td { background: #fafbfd; }
.cstat-mine { font-size: 11px; color: #2c5282; }
.cstat-cellbar { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.cstat-cellbar .cstat-meter, .cstat-cellbar .cstat-bar { flex: 1 1 auto; }
.cstat-v { min-width: 64px; text-align: right; color: #888; font-variant-numeric: tabular-nums; }
.cstat-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px 14px; }
.cstat-node { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.cstat-node > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cstat-node .cstat-mono { color: #333; overflow: hidden; text-overflow: ellipsis; }
.cstat-dense { display: grid; gap: 10px; }
.cstat-dense-row { display: grid; grid-template-columns: minmax(80px, 112px) 1fr; gap: 10px; align-items: start; }
.cstat-dense-lbl { font-size: 12px; color: #888; line-height: 1.3; }
.cstat-dense-lbl b { display: block; color: #333; }
.cstat-cells-dense { display: flex; flex-wrap: wrap; gap: 2px; }
.cstat-fs-list { display: grid; gap: 10px; max-width: 760px; }
.cstat-fs { display: grid; gap: 4px; }
.cstat-fs.is-pseudo { opacity: 0.6; }
.cstat-fs-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cstat-strong { font-weight: 600; color: #333; }
.cstat-here { font-size: 11.5px; color: #2c5282; }
.cstat-dev { font-size: 11px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cstat-fs-n { margin-left: auto; font-size: 12px; color: #888; font-variant-numeric: tabular-nums; }
.cstat-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #555; white-space: nowrap; }
.cstat-check input { margin: 0; }
/* the core stylesheet makes every label display:block !important */
.cstat .cstat-inline-label { display: inline !important; margin: 0; font-weight: 400; cursor: pointer; }

/* scheduler queue: a disclosure in the form's own .ts-disclose look; read only while open */
.cstat-q { padding-top: 10px; }
.cstat-disclose { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f7f9fb; color: #555; font-size: 12.5px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.cstat-disclose:hover { background: #f0f0f0; border-color: #ccd5de; }
.cstat-disclose .cstat-caret { color: #999; font-size: 11px; transition: transform 0.2s ease; }
.cstat-disclose[aria-expanded="true"] { border-radius: 6px 6px 0 0; background: #e0ecf8; border-color: #ccd5de; }
.cstat-disclose[aria-expanded="true"] .cstat-caret { transform: rotate(90deg); }
.cstat-disclose-title { font-weight: 600; color: #333; }
.cstat-aside { margin-left: auto; font-size: 11.5px; color: #888; }
.cstat-q-body { border: 1px solid #e0e0e0; border-top: none; border-radius: 0 0 6px 6px; padding: 12px 12px 10px; }
.cstat-q-sum { display: grid; gap: 14px; margin-bottom: 10px; }
@media (min-width: 880px) { .cstat-q-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cstat-q-sum .cstat-val { margin-bottom: 6px; }
.cstat-q-sum .cstat-bar { margin-bottom: 6px; }
.cstat-subtitle { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #aaa; margin: 0 0 6px; }
.cstat-hbars { display: grid; gap: 6px; max-width: 520px; }
.cstat-hbar { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 10px; align-items: center; font-size: 12px; }
.cstat-hbar-lab { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cstat-hbar-track { display: flex; align-items: center; gap: 8px; }
.cstat-hbar-b { height: 10px; border-radius: 0 3px 3px 0; background: #9db5d3; min-width: 3px; }
.cstat-hbar-b.is-held { background: #6b7684; }
.cstat-q-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; }
.cstat-ftabs { display: flex; gap: 16px; border-bottom: 1px solid #eee; flex: 1 1 auto; }
.cstat-ftabs button { border: 0; border-radius: 0; background: none; padding: 6px 0; cursor: pointer; color: #888; font-size: 12.5px; box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.cstat-ftabs button:hover { color: #555; }
.cstat-ftabs button[aria-pressed="true"] { color: #333; font-weight: 600; box-shadow: inset 0 -2px 0 #2c5282; }
.cstat-n { color: #aaa; font-weight: 400; margin-left: 3px; }
.cstat-search-wrap { position: relative; display: inline-flex; align-items: center; }
.cstat-search-wrap .fa { position: absolute; left: 8px; color: #aaa; font-size: 12px; }
.cstat-search { height: 26px; width: 210px; border: 1px solid #ccc; border-radius: 4px; padding: 0 8px 0 26px; font-size: 12px; color: #555; background: #fff; -webkit-appearance: none; appearance: none; }
.cstat-part { height: 26px; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 0 6px; font-size: 12px; color: #555; }
.cstat-tbl { max-height: 440px; }
.cstat-jobs td { height: 40px; }
.cstat-jobs tr.cstat-job { cursor: pointer; }
.cstat-jobs tr.cstat-job:hover td { background: #fafbfc; }
.cstat-jobs tr.cstat-job.is-open td { background: #f7f9fb; border-bottom-color: transparent; }
.cstat-chev { width: 22px; padding-right: 2px; color: #aaa; font-size: 10px; }
.cstat-chev .fa { transition: transform 0.15s ease; }
.cstat-job.is-open .cstat-chev .fa { transform: rotate(90deg); }
.cstat-nm { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.cstat-logo { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 9h6A6 6 0 1 1 7 3z' fill='%23666'/%3E%3Cpath d='M8.4 7.6V1.6a6 6 0 0 1 6 6z' fill='%23a6a6a6'/%3E%3C/svg%3E") no-repeat center / contain; }
.cstat-state { display: inline-flex; align-items: center; gap: 6px; }
.cstat-st-R { background: #2c5282; }
.cstat-st-CG { background: #2c5282; opacity: 0.5; }
.cstat-st-PD, .cstat-st-Q { background: #9db5d3; }
.cstat-st-H { background: #6b7684; }
.cstat-st-C { background: transparent; box-shadow: inset 0 0 0 1.5px #aaa; }
.cstat-el { display: inline-grid; grid-template-columns: auto 44px; align-items: center; column-gap: 8px; }
.cstat-lim { grid-column: 1 / -1; font-size: 10.5px; color: #aaa; line-height: 1.2; }
.cstat-sort { border: 0; border-radius: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.cstat-detail-row td { background: #f7f9fb; white-space: normal; padding: 4px 12px 12px 22px; }
.cstat-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; font-size: 12px; }
.cstat-kv div { display: flex; flex-direction: column; min-width: 0; }
.cstat-kv span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #aaa; }
.cstat-kv b { font-weight: 400; color: #333; word-break: break-word; }
.cstat-raw { margin-top: 10px; }
.cstat-raw code { display: block; background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 5px 8px; white-space: pre; overflow-x: auto; }
.cstat-q-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; font-size: 12px; color: #888; }
.cstat-q-hint { margin-left: auto; }
.cstat-empty { padding: 18px 8px; text-align: center; color: #888; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
    .cstat-cell, .cstat-disclose, .cstat-disclose .cstat-caret, .cstat-chev .fa { transition: none; }
}

.ts-declared-inputs { margin: 8px 0 4px 0; }
.ts-inputs-none { padding: 16px 18px; background: #f8fafc; border: 1px solid #dfe7f1; border-radius: 8px; }
.ts-inputs-none-title { font-size: 14px; font-weight: 600; color: #1e2939; }
.ts-inputs-none-hint { font-size: 12px; color: #65737f; margin-top: 4px; }
.ts-inputs-picker { border: 1px solid #dfe7f1; border-radius: 8px; padding: 12px 14px; }
.ts-inputs-search { margin-bottom: 8px; }
.ts-inputs-results { max-height: 180px; overflow-y: auto; border: 1px solid #eef2f6; border-radius: 6px; }
.ts-inputs-result { padding: 7px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #f2f5f8; }
.ts-inputs-result:hover { background: #f2fafe; }
.ts-inputs-result:last-child { border-bottom: 0; }
.ts-inputs-note { padding: 10px; font-size: 12px; color: #65737f; }
.ts-inputs-chosen { margin-top: 10px; }
.ts-inputs-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; background: #f2fafe; border: 1px solid #bae0f5; border-radius: 100px; padding: 4px 12px; margin: 0 6px 6px 0; }
.ts-inputs-remove { color: #65737f; }

.ts-kind-chooser { display: flex; align-items: center; gap: 4px; margin: 0 0 10px 0; }
.ts-kind-btn { font-size: 12px; font-weight: 600; color: #65737f; background: transparent; border: 0; border-radius: 6px; padding: 6px 14px; }
.ts-kind-btn.is-active { background: #0284c7; color: #ffffff; }
.ts-kind-chooser { background: #f8fafc; border: 1px solid #dfe7f1; border-radius: 8px; padding: 3px; }
.ts-kind-hint { font-size: 12px; color: #65737f; margin-left: 10px; }

.ts-inputs-main { float: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #65737f; }
.ts-inputs-main-note { margin-top: 6px; font-size: 12px; color: #65737f; }

.ts-inputs-scope { margin-top: 8px; font-size: 12px; color: #65737f; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ts-scope-btn { font-size: 12px; font-weight: 600; color: #65737f; background: #f8fafc; border: 1px solid #dfe7f1; border-radius: 6px; padding: 4px 11px; }
.ts-scope-btn.is-active { background: #0284c7; border-color: #0284c7; color: #ffffff; }
.ts-inputs-scope-hint { color: #8a95a3; }
.ts-server-only-note { padding: 18px; font-size: 13px; color: #65737f; text-align: center; }
.dropz.ts-no-upload { border-style: solid; border-color: #dfe7f1; background: #f8fafc; }

/* /stylesheets/plugins/guidedtour.css */
div.d3view_guide_modal .modal-dialog {
    /*width: 600px!important;*/
}
div.d3view_guide .popover {
    transition: opacity 0.3s ease-in;
    opacity: 0;
}
div.d3view_guide .popover {
    width: 320px;
    height: auto;
    max-height: initial;
    max-width: 500px!important;
    position: fixed;
    /*margin-top: 20px;*/
}
div.d3view_guide .popover .popover-content {
    padding: 30px;
    padding-bottom: 15px;
}
div.d3view_guide .popover .popover-content .img-container img {
    margin: 0 auto;
    height: auto;
}
div.d3view_guide .popover .popover-content .tip_body {
    margin: 12px 0 24px 0;
    font-size: 1.25em;
    width: 100%;
}
div.d3view_guide .popover .popover-content span.title_text {
    font-size: 1.8em;
}
div.d3view_guide .bottom_panel {
    z-index: 2052;
    background: #FFF;
    color: #333;
    bottom: 0;
    left: 50%;
    font-weight: 500;
    transform: translate(-50%, 0);
    position: fixed;
}
div.d3view_guide .bottom_panel > div {
    display: flex;
    align-items: center;
    opacity: 0.5;
    padding: 10px;
}
div.d3view_guide .bottom_panel:hover > div {
    opacity: 1!important;
}
div.d3view_guide .bottom_panel #skip {

}
div.d3view_guide .bottom_panel #skip:hover {
    color: #428bca;
}

.d3view_guide_spinner {
    z-index: 2052;
    padding: 10px;
    background: #428bca;
    border-radius: 10px;
    color: #FFF;
    position: fixed;
}
div.d3view_guide.center_placed > div {
    position: fixed;
}
div.d3view_guide {
    z-index: 200000;
}
div.d3view_guide.center_placed .popover {
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%, -50%)!important;
    transition: none!important;
}
div.d3view_guide .count {
    /*position: absolute;*/
    /*right: 14px;*/
    /*top: 8px;*/
    color: gray;
}
div.d3view_guide span#skip {
    position: absolute;
    top: 10px;
    right: 10px;
}
div.d3view_guide .guide_backdrop {
    position: fixed;
    z-index: 2050;
    background: #000;
    float: none!important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    margin-left: 0;
    transition: opacity 0.5s ease-in;
}
div.d3view_guide.wo_transition .guide_backdrop {
    transition: none!important;
}
div.d3view_guide .guide_backdrop:not(.center) {
    z-index: 2051;
}
div.d3view_guide .guide_backdrop.in {
    opacity: 0.45!important;
}
div.d3view_guide.center_placed .guide_backdrop:not(.center) {
    opacity: 0!important;
}
div.d3view_guide:not(.center_placed) .guide_backdrop.center {
    opacity: 0!important;
    display: none;
}
div.d3view_guide_thumbnails {
    display: flex;
    flex-wrap: wrap;
}
div.d3view_guide_thumbnails > div {
    margin: 10px;
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.1s ease-in;
    width: 200px;
}
div.d3view_guide_thumbnails > div > img {
    margin: 0 auto;
    height: auto!important;
}
div.d3view_guide_thumbnails > div.hovered {
    opacity: 1!important;
    background-color: #d3f4ff73;
}
/*div.d3view_guide_thumbnails > div.faded {*/
/*    opacity: 0.5;*/
/*}*/

.d3view-guided-tour-el {
    visibility: visible!important;
    opacity: 1!important;
}

.d3view-guide-open > .dropdown-menu {
    display: block!important;
}
/* /javascripts/plugins_src/turings/turings.css */
/* Design tokens for the Turings plugin */
div#turings {
    --tr-brand: #2563EB;
    --tr-brand-light: #DBEAFE;
    --tr-brand-dark: #1E40AF;
    --tr-sidebar-w: 75px;
    --tr-header-h: 56px;
    --tr-stat-card-h: 88px;
    --tr-util-idle: #22C55E;
    --tr-util-average: #3B82F6;
    --tr-util-medium: #06B6D4;
    --tr-util-high: #F59E0B;
    --tr-util-peak: #EF4444;
    --tr-chart-1: #6366F1;
    --tr-chart-2: #8B5CF6;
    --tr-chart-3: #EC4899;
    --tr-chart-4: #F59E0B;
    --tr-chart-5: #10B981;
}

/* Root flex layout, turings-main, tab panes */
div#turings.visualizationItem {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

div#turings .turings-main {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 20px;
}
/* Remove padding in new/dashboard mode */
.turings-mode-new#turings .turings-main {
    padding: 0;
}

/* Tab pane show/hide */
div#turings .turings-tab-pane {
    display: none;
}
div#turings .turings-tab-pane.active {
    display: block;
    height: 100%;
}
div#turings .turings-tab-pane.active > .vizCanvas {
    height: 100%;
    margin: 0;
}
div#turings .turings-tab-pane.active > .vizCanvas > .col-md-12 {
    height: 100%;
    margin: 0;
}
div#turings .turings-tab-pane.active > .vizCanvas > .col-md-12 > .mainCanvas {
    height: 100%;
    margin: 0;
}
div#turings .turings-tab-pane.active > .vizCanvas > .col-md-12 > .mainCanvas > .vizContainer {
    height: 100%;
    margin: 0;
}

/* Logs container flex */
div#turings .logs_container {
    height: 100%;
    overflow: auto;
}

/* Padding/height handled by flex layout above */

/* Dashboard mode container */
div#turings .turings-dashboard-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Header actions (settings + mode toggle) in modal-header */
.turings-modal .turings-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Modern Try New button */
.turings-modal .turings-btn-try-new {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}
.turings-modal .turings-btn-try-new:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
    color: #fff;
}
.turings-modal .turings-btn-try-new:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3);
}

.turings-modal .turings-settings-dropdown {
    min-width: 520px;
    max-height: 70vh;
    overflow-y: auto;
}
.turings-modal .turings-settings-dropdown .panel {
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

div#turings img.exportImg, div#turings canvas.exportCanvas {
    display: none!important;
}

/* vizHeader, daterangepicker, settings panel, export, options */
div#turings div.vizHeader .options .dateRangePicker, div.vizHeader .options .export_options {
    padding: 0;
}
div#turings div.vizHeader .options .dateRangePicker .fa-calendar {
    width: 18px;
}
div#turings div.vizHeader .options .export_options .btn-group.bootstrap-select.export {
    width: auto;
}
div#turings div.vizHeader span.label {
    font-size: 70%;
}

div#turings select.export {
    margin: 3px;
}
div#turings .options h2 {
    clear: right;
    padding-top: 5px;
}
div#turings div.daterangepicker .ranges div.additional_options {
    padding: 10px 5px 0 10px;
}
div#turings div#cp {
    margin: auto;
    top: 2px;
}
div#turings div#cp .colorpicker-element .add-on i, div#turings .colorpicker-element .input-group-addon i {
    width: 30px!important;
}
div#turings button.recent {
    float: right;
    clear: right;
    width: 100px;
    margin: 2px 0;
    font-size: 12px;
    border: none;
}

/* Settings panel */
div#turings div#settingsDiv {
    position: absolute;
    right:1px;
    width: 520px;
    font-size: 12px;
    margin: 5px 0;
    padding: 0;
    font-family: "helvetica neue","Helvetica",arial,sans-serif;
    display: none;
    z-index: 2;
}
div#turings div#settingsDiv .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
}
div#turings div#settingsDiv div.row > span {
    margin: 8px 0;
}
div#turings div#settingsDiv .btn-group.bootstrap-select {
    width: auto!important;
}
div#turings div#settingsDiv table.brush_history tbody  {
    text-align: center;
}
div#turings div#settingsDiv::before, div#settingsDiv::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}
div#turings div#settingsDiv:before {
    top: -7px;
    right: 7px;
    border-color: transparent transparent #CCC transparent;
    border-width: 0 7px 7px 7px;
}
div#turings div#settingsDiv:after {
    top: -6px;
    right: 8px;
    border-color: transparent transparent #FFF transparent;
    border-width: 0 6px 6px 6px;
}
div#turings div#settingsDiv .fa.fa-pencil {
    padding-left: 5px;
}
div#turings div#settingsDiv .fa.fa-check-circle-o {
    padding: 2px;
    color: green;
}
div#turings div#settingsDiv .fa.fa-times {
    padding: 2px;
    color: red;
}
/*Panel tabs*/
div#turings div#settingsDiv .panel .panel-heading {
    padding: 0;
}
div#turings div#settingsDiv .panel .panel-heading .panel-title {
    margin: 7px 10px;
}
div#turings div#settingsDiv td{
    padding: 5px;
}
div#turings div#settingsDiv table tr.ui-sortable-helper {
    box-shadow: 0 5px 10px #888888;
}
div#turings div#settingsDiv div#cp .input-group-addon {
    width: auto;
    padding: 0 1px;
}
div#turings div#settingsDiv div#solvers .group_selection .btn-group {
    position: relative;
    bottom: 3px;
    left: 2px;
}
div#turings div#settingsDiv div.default_value {
    margin: 5px 0;
}
div#turings div#settingsDiv div.default_value span.defaultText {
    position: relative;
    top: 3px;
    right: 5px;
}

/* Media queries for header/options */
@media screen and (max-width: 1100px) {
    div#turings div.vizHeader .options {
        position: static;
    }
    div#turings div.vizHeader div.settings_menu {
        position: relative;
    }
    div#turings div.vizHeader .options .dateRangePicker, div.vizHeader .options .export_options, div.vizHeader .options div.settings {
        float: left;
        margin: 20px 0;
    }
}

/* onHover tooltip, arrow, positioning, hover div styles */
div#turings div.onHover.container {
    padding-top: 10px!important;
    position: absolute;
    top: -140px;
    width: 100%!important;
    z-index: 2000;
    background: white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    border: 1px solid #444;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0;
    pointer-events: none;
    letter-spacing: 0.4px;
}

div#turings div.onHover.container.position_top {
    padding: 10px!important;
    margin-top: 5px;
    position: absolute;
    top: -155px!important;
    width: 95%!important;
    left: auto!important;
    right: auto!important;
}

div#turings div.onHover.container text {
    letter-spacing: 1px;
}

div#turings .onHover.position_right.leftarrow::after, div#turings .onHover.position_right.leftarrow::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
}
div#turings .onHover.position_right.leftarrow::after {
    margin-top: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}
div#turings .onHover.position_right.leftarrow::before {
    margin-top: -26px;
    border-width: 26px;
    border-style: solid;
    border-color: transparent #444 transparent transparent;
}

div#turings .onHover.position_right.rightarrow::after, div#turings .onHover.position_right.rightarrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
}
div#turings .onHover.position_right.rightarrow::after {
    margin-top: -25px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}
div#turings .onHover.position_right.rightarrow::before {
    margin-top: -26px;
    border-width: 26px;
    border-style: solid;
    border-color: transparent transparent transparent #444;
}
div#turings .onHover.tooltip .page-header {
    margin: 0 0 5px!important;
    padding-bottom: 10px;
}
div#turings div.arrow-down {
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 22px solid #444;
    z-index: 3000;
    position: absolute;
    top: 54px;
}
div#turings div.arrow-down .inner_triangle {
    border-width: 21px!important;
    border-color: #FFF transparent transparent transparent!important;
    position: relative;
    top: -23px;
    left: -21px;
    border-style: solid;
}

/* Tooltip summary line */
div#turings div.summary_line .summary_val{
    text-align: center;
}
div#turings div.summary_line .summary_val::before, div#turings div.job-util-table-container div.job-util-param::before {
    content: "";
    position: absolute;
    left: 0;
    height: 35px;
    border-left: 2px solid #ADB2B5;
    margin-top: 10px;
}
div#turings div.summary_line .summary_val:first-child::before, div#turings div.job-util-table-container div.job-util-param:first-child::before {
    border-left: 0;
}
div#turings div.summary_line span.text_top, div#turings div.job-util-table-container .value-label {
    font-size: 13px;
    font-weight:bold;
    color: #555555;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
}
div#turings div.job-util-table-container .param-values span.count {
    min-height:30px;
}
div#turings div.summary_line div.count, div#turings div.job-util-table-container span.count {
    font-size: 24px;
    font-weight:bold;
    line-height: 30px;
    color: #555555;
    font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    /*width: 108%;*/
}
div#turings div.job-util-table-container span.count {
    font-size: 18px;
}

/* SVG path styles, timeline, brush, legends, focusSvg, context */
div#turings .focus path {
}
div#turings .context .x.axis path {
    stroke-width: 1;
}
div#turings .focus .axis text {
    font-size: 9px!important;
}
div#turings .focus .axis line {
    stroke: #000;
}

div#turings svg {
    font: 10px sans-serif;
}
div#turings svg.focusSvg {
    padding-bottom: 10px;
    overflow: visible;
}

div#turings .focusSvg .legend circle, div#turings .focusSvg .legend rect {
    pointer-events: all!important;
    cursor: pointer!important;
}
div#turings .focusSvg .util_legend_group .legend text {
    pointer-events: auto;
}

div#turings .line.highlight {
    fill-opacity: 1!important;
    stroke-opacity: 1!important;
    stroke-width: 2.5!important;
}
div#turings .area.highlight {
    fill-opacity: 0.6!important;
    stroke-opacity: 1!important;
}
div#turings .focus .line.fadeOut {
    fill-opacity: 0.1!important;
    stroke-opacity: 0.1!important;
}
div#turings .context path.line {
    stroke-width: 0.8!important;
}
div#turings path.line {
    fill: none;
    stroke-width: 1;
    /* clip-path: url(#clipUserData);*/
}
div#turings rect.pane {
    cursor: move;
    fill: none;
    pointer-events: all;
}
div#turings .brush .extent {
    fill: steelblue;
    fill-opacity: 0.5;
    shape-rendering: crispEdges;
}
div#turings .minMaxSvg .brush .extent {
    fill: steelblue;
    fill-opacity: 0.7;
    shape-rendering: crispEdges;
}
div#turings .axis text {
    font-size: 10px!important;
}

div#turings .context .axis text {
    font-size: 6px!important;
}
div#turings .brush .resize path {
    fill: #eee;
    stroke: #666;
}
div#turings div#legendContainer .legend circle {
    cursor: pointer;
}

/* Media queries for brush label positioning */
@media screen and (min-width: 1450px) {
    div#turings span.label[data-num='1'] {
        top: 16px!important;
    }
    div#turings span.label[data-num='2'] {
        top: 34px!important;
    }
    div#turings span.label[data-num='3'] {
        top: 52px!important;
    }
    div#turings span.label[data-num='4'] {
        top: 70px!important;
    }
    div#turings span.label[data-num='5'] {
        top: 89px!important;
    }
}

@media screen and (max-width: 1200px) {
    div#turings div#summary_app div#legendContainer {
        position: relative!important;
    }
}

/* Reports app panels, chart containers, donut/pie chart styles */
div#turings div#reports_app .panel {
     padding: 0;
     margin-right:15px;
     text-align: center;
}
div#turings div#reports_app .panel.col-md-6 {
    width: 46%;
}
div#turings div#reports_app div#top_users div.tooltip#jobs, div#reports_app div#top_util_days div.tooltip#util_jobs {
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
    pointer-events: none!important;
}

/* Donut chart (report app) settings */
div#turings div#reports_app div.user_settings, div#reports_app div.util_settings {
    z-index: 999;
}
div#turings div#reports_app div.settingsDiv {
    position: absolute;
    right:1px;
    width: 400px;
    font-size: 12px;
    margin: 5px 0;
    padding: 0;
    font-family: "helvetica neue","Helvetica",arial,sans-serif;
    display: none;
    z-index: 2;
}
div#turings div#reports_app div.settingsDiv .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 15px;
}
div#turings div#reports_app div.settingsDiv .panel {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
div#turings div#reports_app div.settingsDiv div.row > span {
    margin: 8px 0;
}
div#turings div#reports_app div.settingsDiv::before, div#reports_app div.settingsDiv::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
}
div#turings div#reports_app div.settingsDiv:before {
    top: -7px;
    right: 7px;
    border-color: transparent transparent #CCC transparent;
    border-width: 0 7px 7px 7px;
}
div#turings div#reports_app div.settingsDiv:after {
    top: -6px;
    right: 8px;
    border-color: transparent transparent #FFF transparent;
    border-width: 0 6px 6px 6px;
}

/* SlickGrid row coloring, gantt tooltip, table styles */

/* default filters */
div#turings div.slick-row.idle {
    background: rgba(92, 184, 92,0.6);
}
div#turings div.slick-row.average {
    background: rgba(2, 117, 216,0.6);
}
div#turings div.slick-row.medium {
    background: rgba(91, 192, 222,0.5);
}
div#turings div.slick-row.high {
    background: rgba(254, 178, 76,0.6);
}
div#turings div.slick-row.peak {
    background: rgba(217, 83, 79,0.7);
}

 /*Slick grid CSS*/
div#turings .slick-row.ui-widget-content {
    border-left: 1px dotted silver;
}

/* Gantt chart tooltip */
div#temp_gantt_tooltip div.tooltip_arrow.bottomArrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #aaa transparent transparent transparent;
    border-width: 21px 21px 0 21px;
    z-index: 3000;
    position: absolute;
    top: 100%;
    opacity: 0;
}
div#temp_gantt_tooltip div.tooltip_arrow.bottomArrow .tooltip_inner_arrow {
    border-width: 20px 20px 0 20px;
    border-color: #f2f3f4 transparent transparent transparent;
    position: relative;
    top: -22px;
    left: -20px;
    border-style: solid;
}
div#temp_gantt_tooltip div.tooltip_arrow.leftArrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #aaa transparent transparent;
    border-width: 21px 21px 21px 0;
    z-index: 3000;
    position: absolute;
    top: 100%;
    opacity: 0;
}
div#temp_gantt_tooltip div.tooltip_arrow.leftArrow .tooltip_inner_arrow {
    border-width: 20px 21px 21px 0;
    border-color: transparent #f2f3f4 transparent transparent;
    position: relative;
    top: -20px;
    left: 1px;
    border-style: solid;
}

/* /javascripts/plugins_src/treelistview/treelistview.css */
div.d3view-treeview .treeview-items > ul.items-list {
    border: 1px solid #DDD;
}
div.d3view-treeview .treeview-items > ul.items-list {
    margin-bottom: 0;
}
div.d3view-treeview li.treeview-item .nested_items {
    display: none;
    margin-left: 15px;
}
div.d3view-treeview li.treeview-item .nested_items.shown {
    display: block;
}
div.d3view-treeview li.treeview-item > .item-content {
    cursor: pointer;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div {
    padding: 10px 15px;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div.selected {
    background-color: #428BCA;
    color: #FFF;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div.selected > .item-anchor {
    color: #FFF;
}
div.d3view-treeview li.treeview-item > .item-content:not(.selected):hover {
    background-color: #f7f7f7;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div > .item-anchor {
    text-decoration: none;
    color: #4f5359;
    padding: 10px 15px 10px 0;
    user-select: none;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div.selected > .item-anchor:hover {
    color: #21ff02;
}

div.d3view-treeview li.treeview-item > .item-content > .selectable-div > .item-anchor .item-name-edit {
    width: 200px;
    display: inline-block;
}
div.d3view-treeview li.treeview-item > .item-content > .selectable-div > .item-anchor:hover {
    color: steelblue;
}
div.d3view-treeview li.treeview-item > .item-content.itemOver {
    background-color: #e0fffa;
}


div.d3view-treeview li.treeview-item > .item-content.ui-draggable-dragging {
    z-index: 2;
}

/* context menu */
body ul.treeview-context-menu {
    position: absolute;
    display: none;
    background-color: #FFF;
    border: 1px solid #DDD;
    z-index: 1052;
}
body ul.treeview-context-menu > li {
    border: none;
    cursor: pointer;
}
body ul.treeview-context-menu > li.alert {
    margin-bottom: 0;
}
body ul.treeview-context-menu > li > a {
    text-decoration: none;
}
body ul.treeview-context-menu > li:hover {
    background-color: #eee;
}
/* /javascripts/plugins_src/colorpicker/colorpicker.css */
div.d3view-colorpicker {
    position: fixed;
    top: 0;
    left: 0;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 6px;
    width: 250px;
    display: none;
    z-index: 2051;
}
div.d3view-colorpicker div.main_colors, div.d3view-colorpicker div.variation-colors {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-colorpicker .variation-colors .color-rect {
    border-bottom: none;
}
div.d3view-colorpicker .color-rect {
    width: 16px;
    height: 16px;
    margin: 0 6px;
    border: 1px solid #cccccc;
}
div.d3view-colorpicker .color-rect:hover {
    border: 1px double #4f5359;
}
div.d3view-colorpicker .theme_colors_heading, div.d3view-colorpicker .standard_colors_heading {
    margin: 3px 0;
}
div.d3view-colorpicker .standard_colors .main_colors .color-rect {
    margin: 3px 6px;
}
div.d3view-colorpicker .color-rect.transparent {
    background: linear-gradient(to top left,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) calc(50% - 0.8px),
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) calc(50% + 0.8px),
    rgba(0,0,0,0) 100%),
    linear-gradient(to top right,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0) calc(50% - 0.8px),
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,0) calc(50% + 0.8px),
            rgba(0,0,0,0) 100%)!important;
}
div.d3view-colorpicker div.standard_colors, div.d3view-colorpicker .theme_colors, div.d3view-colorpicker div.browser-colorpicker {
    padding: 10px;
}
div.d3view-colorpicker div.standard_colors, div.d3view-colorpicker div.browser-colorpicker {
    border-top: 1px solid #DDD;
}

.d3view-cp {
    width: 30px;
    height: 20px;
    border: 1px solid #DDD;
    background: transparent;
    display: block;
}

.d3view-cp-rect {
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #DDD;
    border: 1px solid #aaa;
    cursor: pointer;
}
/* /javascripts/plugins_src/reporter_raw/css/dataProvider.css */
.d3view-plugins-data-provider {
    position: fixed;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 10px;
    top: 10px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.data-provider {
    width: 100%;
    height: 100%;
    min-height: 550px;
    display: flex;
    flex-direction: row;
    border-radius: 10px;
}

.data-provider .tabular-view-container {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
}

.data-provider .tabular-view-body {
    height: calc(100% - 60px);
}

.data-provider .visualizer-container {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.data-provider .tabular-view-nav,
.data-provider .visualizer-nav {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 0px 15px;
}

.data-provider .visualizer-nav {
    justify-content: space-between;
}

.data-provider .dp-viz-options {
    display: flex;
}

.data-provider .dp-viz-options>button {
    margin: 0px 10px;
}

.data-provider .visualizer-body {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    position: relative;
    overflow: hidden;
}

.data-provider .visualizer-body:hover .dp-edit-chart {
    display: flex;
}

.data-provider .dp-edit-chart {
    background-color: lightgray;
    position: absolute;
    display: none;
    left: -14px;
    transform: rotate(45deg);
    top: -29px;
    width: 50px;
    height: 80px;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

.data-provider .dp-edit-chart i {
    margin-right: 7px;
    pointer-events: none;
}

.data-provider .dp-edit-chart:hover {
    color: rgb(92, 168, 219) !important;
    background-color: rgb(211, 244, 250) !important;
    cursor: pointer;
}

.data-provider .viz-list-view {
    width: 100%;
    height: 100%;
    padding: 15px;
}

.data-provider .dp-viz-list {
    width: 100%;
    height: auto;
    max-height: calc(100% - 70px);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto;
    overflow-x: hidden;
}

.data-provider .dp-viz-list .dp-viz-list-item {
    cursor: pointer;
    margin: 5px;
    width: 180px;
    height: 115px;
}

.data-provider .dp-viz-list .dp-viz-list-item>a {
    width: 100%;
    height: 100%;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.data-provider .dp-viz-list .dp-viz-list-item>a img {
    width: 50px;
    height: 50px;
}

.data-provider .dp-viz-list .dp-viz-list-item>a span {
    font-size: 11px;
    font-weight: 500;
    margin-top: 10px;
}

.data-provider .dp-viz-list .dp-viz-list-item>a * {
    pointer-events: none;
}

.data-provider .dp-viz-list .dp-viz-list-item:hover {
    background: rgb(238, 238, 238);
}



.data-provider .viz-search-div {
    display: flex;
    align-items: center;
}


.data-provider .show-chart-list-btn:hover {
    color: rgb(255, 255, 255) !important;
    background: rgb(66, 139, 202) !important;
}

.data-provider .show-chart-list-btn * {
    pointer-events: none;
}
/* /javascripts/plugins_src/reporter_raw/css/reporter.css */
/* R0-3684 — self-contained PPTX-import confirmation toast. The reporter is a
   full-screen fixed overlay, so the global #flash_contents chrome is not
   reliably visible; this toast lives inside the reporter root instead. */
.d3view-plugins-reporter .reporter-import-toast {
    position: fixed;
    top: 64px;
    left: 50%;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 90vw;
    padding: 10px 16px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-primary, #1f2937);
    border: 1px solid var(--d3v-status-success, #16a34a);
    border-left: 4px solid var(--d3v-status-success, #16a34a);
    box-shadow: var(--d3v-sh-md, 0 6px 24px rgba(0, 0, 0, 0.16));
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    transition: opacity var(--d3v-t-fast, 0.2s) ease, transform var(--d3v-t-fast, 0.2s) ease;
    pointer-events: none;
}
.d3view-plugins-reporter .reporter-import-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.d3view-plugins-reporter .reporter-import-toast .rit-icon {
    color: var(--d3v-status-success, #16a34a);
    font-size: 15px;
}
.d3view-plugins-reporter .reporter-import-toast.is-error {
    border-color: var(--d3v-status-danger, #dc2626);
    border-left-color: var(--d3v-status-danger, #dc2626);
}
.d3view-plugins-reporter .reporter-import-toast.is-error .rit-icon {
    color: var(--d3v-status-danger, #dc2626);
}
/* R0-3684 — brief highlight ring on the just-imported layout card. */
.d3view-plugins-reporter .layout-list .layout-item.just-imported > a {
    box-shadow: 0 0 0 2px var(--d3v-accent-primary, #02B6FF), var(--d3v-sh-md, 0 6px 20px rgba(0, 0, 0, 0.12)) !important;
    transition: box-shadow 0.25s ease;
}
/* R0-3684 — inline "Extracting layouts…" status below the import dropzone. */
.d3view-plugins-reporter .layout-import-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f5f7fa);
    border: 1px solid var(--d3v-border-subtle, #e6e9ef);
    color: var(--d3v-text-secondary, #4b5563);
    font-size: 12px;
    font-weight: 500;
}
.d3view-plugins-reporter .layout-import-status .lis-spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--d3v-border-strong, #cbd2dc);
    border-top-color: var(--d3v-accent-primary, #02B6FF);
    border-radius: 50%;
    animation: reporter-lis-spin 0.7s linear infinite;
}
.d3view-plugins-reporter .layout-import-status .lis-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes reporter-lis-spin {
    to { transform: rotate(360deg); }
}

.d3view-plugins-reporter {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #FFF;
}

.d3view-plugins-reporter.hiddenContainer {
    opacity: 0 !important;
}


.reporter-container {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 90vh;
    flex-direction: column;
    position: relative;
}

.reporter-container .top-nav-container {
    display: block;
    width: 100%;
    height: auto;
}

.reporter-container .main-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

.reporter-container .left-nav-bar {
    display: flex;
    width: auto;
    height: 100%;
}

.reporter-container .presentation-builder-container {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    position: relative;
}

.reporter-container .presentation-builder-container .reporter-loading-msg {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 1.2em;
    font-weight: 500;
}

.reporter-container .app-reporter-icon:hover {
    cursor: pointer;
}

.reporter-container .margin-0 {
    margin: 0px;
}

.reporter-container .top-nav {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: 7px 15px;
    /*background-color: #004494;*/
    background-image: -webkit-linear-gradient(to bottom, var(--indigo-blue-dark) 0, var(--indigo-blue-light) 90%, var(--app-sl-color)) !important;
    background-image: -o-linear-gradient(to bottom, var(--indigo-blue-dark) 0, var(--indigo-blue-light) 90%, var(--app-sl-color)) !important;
    background-image: linear-gradient(to bottom, var(--indigo-blue-dark) 0, var(--indigo-blue-light) 90%, var(--app-sl-color)) !important;

    border-bottom: 3px solid #EA6B4E;
}

.reporter-container .top-nav .top-nav-title {
    margin: 0px 15px 0px 10px;
    color: #fff;
    pointer-events: none;
    width: auto;
}

.reporter-container .left-part-top-nav,
.reporter-container .right-part-top-nav {
    display: flex;
    width: 50%;
    flex-direction: row;
    align-items: center;
}

.reporter-container .left-part-top-nav {
    justify-content: flex-start;
}

.reporter-container .right-part-top-nav {
    justify-content: flex-end;
}

.reporter-container .nav-link {
    margin: 0px 10px;
    padding: 7px 15px;
    color: #FFF;
    background-color: #446bc359;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none !important;
}

.reporter-container .nav-link i {
    pointer-events: none;
}

.reporter-container .nav-link:hover {
    cursor: pointer;
    text-decoration: none !important;
}

.reporter-container #top-nav-dropdown-menu {
    width: 325px;
    height: auto;
    max-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1052;
    padding: 10px 15px;
}

.reporter-container .mb-10 {
    margin-bottom: 10px;
}

.reporter-container .mt-10 {
    margin-top: 10px;
}

.reporter-container .left-nav {
    display: flex;
    width: auto;
    height: 100%;
    flex-direction: row;
}

.reporter-container .left-nav .left-nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 70px;
    margin-bottom: 0px;
}

.reporter-container .left-nav-link,
.reporter-container .extra-space {
    display: flex;
    padding: 10px 5px;
    background-color: rgba(13, 18, 22, 0.9);
    color: #959595;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
}

.reporter-container .left-nav-link.selected {
    background-color: rgba(13, 18, 22, 0.7);
    color: #fff;
}

.reporter-container .left-nav-link i {
    font-size: 1.75em;
    pointer-events: none;
}

.reporter-container .left-nav-link span {
    font-size: 0.8em;
    pointer-events: none;
}

.reporter-container .left-nav-link:hover {
    cursor: pointer;
    color: #fff !important;
}

.reporter-container .left-nav-body {
    width: 350px;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.reporter-container .left-nav-body .ln-body-content {
    width: 330px;
    height: 100%;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    background-color: rgba(13, 18, 22, 0.7);
    color: #fff;
}

.reporter-container .left-nav-body .ln-body-close {
    width: 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: rgba(13, 18, 22, 0.7);
    font-weight: 400;
    border-radius: 0px 14px 15px 0px;
    z-index: 1052;
}

.reporter-container .left-nav-body .ln-body-close i {
    pointer-events: none;
}

.reporter-container .left-nav-body .ln-body-close:hover {
    cursor: pointer;
}

.reporter-container .slide-settings-options-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 70px;
    background-color: rgb(255 251 251);
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    justify-content: space-between;
}

.reporter-container .slide-settings-options-container .left-controls,
.reporter-container .slide-settings-options-container .right-controls,
.reporter-container .slide-settings-options-container .save-controls {
    display: flex;
    width: auto;
    height: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.reporter-container .slide-settings-options-container .left-controls>li>a,
.reporter-container .slide-settings-options-container .right-controls>li>a,
.reporter-container .slide-settings-options-container .save-controls>li>a {
    padding: 5px;
    text-decoration: none;
    font-size: 21px;
    margin: 0px 10px;
    color: #333;
}

.reporter-container .slide-settings-options-container .left-controls>li>a:hover,
.reporter-container .slide-settings-options-container .right-controls>li>a:hover,
.reporter-container .slide-settings-options-container .save-controls>li>a:hover {
    text-decoration: none;
    background-color: #eee;
}

.reporter-container .slide-settings-options-container .left-controls>li>a i,
.reporter-container .slide-settings-options-container .right-controls>li>a i,
.reporter-container .slide-settings-options-container .save-controls>li>a i {
    pointer-events: none;
}

.reporter-container .slide-settings-options-container .controller-label {
    font-size: 15px;
    margin: 0px 15px 0px 20px;
    font-weight: 600;
}

.reporter-container .slide-view-container {
    display: flex;
    width: 100%;
    height: auto;
    /* justify-content: center; */
    align-items: center;
    flex-direction: row;
    background-color: rgba(235, 236, 240, 0.92);
}

.reporter-container .slide-show-icons {
    margin: 0px 20px;
    width: 50px;
    padding: 15px 0px;
    display: flex;
    justify-content: center;
}

.reporter-container .slide-show-icons:hover {
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

.reporter-container .slide-show-icons i {
    pointer-events: none;
    font-size: 2.5em;
}

.reporter-container .no-visible {
    visibility: hidden !important;
}

.reporter-container .fullScreenView {
    z-index: 100001;
}

.reporter-container .show-slide-count {
    position: absolute;
    bottom: 40px;
    left: 50px;
}

.reporter-container .slide-list-container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 10px;
}

.reporter-container .slide-list-view-close {
    width: 70px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: rgba(13, 18, 22, 0.7);
    font-weight: 400;
    border-radius: 11px 11px 0px 0px;
    z-index: 1052;
}

.reporter-container .slide-list-view-close i {
    pointer-events: none;
}

.reporter-container .slide-list-view-close:hover {
    cursor: pointer;
}

.reporter-container .slide-view-list-ul {
    min-width: 100%;
    max-width: 100%;
    width: auto;
    height: 110px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 5px;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.reporter-container .dropzone-layout {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-color: #eee;
    border-style: dashed;
    color: #eee;
    background-color: #4a4a4a;
    font-weight: 500;
    border-radius: 4px;
    overflow: auto;
    padding: 15px;
}

.reporter-container .dropzone-layout span.dz-message {
    pointer-events: none;
}

.reporter-container .ln-dropzone-label {
    color: #fff;
    padding: 15px 0px;
}


.reporter-container .theme-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0px;
}



.reporter-container .element-list {
    width: 100%;
    height: auto;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.reporter-container .element-list .element-list-item>a {
    padding: 10px 10px 5px 10px;
    margin: 5px;
    color: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 0.5px solid gray;
}

.reporter-container .element-list .element-list-item>a:hover {
    text-decoration: none;
    background-color: #4a4a4a;
}

.reporter-container .element-list .element-list-item>a:focus {
    text-decoration: none;
}

.reporter-container .element-list .element-list-item>a:hover * {
    text-decoration: none;
}

.reporter-container .element-list .element-list-item>a i {
    font-size: 5em;
    pointer-events: none;
    text-decoration: none;
}

.reporter-container .element-list .element-list-item>a span {
    font-size: 0.8em;
    pointer-events: none;
    text-decoration: none;
    margin-top: 5px;
}

.reporter-container .text-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reporter-container .text-list .text-list-item {
    width: 300px;
    display: flex;
    height: auto;
    margin: 5px 0px;
}

.reporter-container .text-list .text-list-item>a {
    color: #eee;
    height: 100%;
    width: 100%;
    border: 1px solid #eee;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
}

.reporter-container .text-list .text-list-item>a:hover {
    background-color: #4a4a4a;
}

.reporter-container .text-list .text-list-item>a:hover,
.reporter-container .text-list .text-list-item>a:focus {
    text-decoration: none;
}

.reporter-container .text-list .text-list-item>a[data-element="heading"] {
    font-size: 2.5em;
}

.reporter-container .text-list .text-list-item>a[data-element="sub-heading"] {
    font-size: 1.5em;
}

.reporter-container .text-list .text-list-item>a[data-element="body-content"] {
    font-size: 0.9em;
}

.reporter-container .theme-list .theme-list-item>a {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    margin: 5px 5px;
    align-items: center;
}

.reporter-container .theme-list .theme-list-item>a div {
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 2px double #fff;
    border-radius: 4px;
}

/* Phase 2.1c — picker now shows swatch + name (+ check icon when active);
   widen the slot and let height auto-fit so the name fits cleanly. The
   inner-div rule above is bypassed by inline styles in the new template. */
.reporter-container .theme-list .theme-list-item>a {
    width: 88px;
    height: auto;
}

.reporter-container .slide {
    border-radius: 4px;
    border: 0.5px solid #c1bfbf;
    margin: 0px 5px;
    height: 65px;
    position: relative;
}

.reporter-container .slide>a {
    width: 150px;
    height: 63px;
    display: flex;
    flex-direction: column;
    padding: 5px 10px;
    align-items: center;
    position: relative;
}

.reporter-container .slide>a img {
    width: 100%;
    height: 100%;
}

.reporter-container .slide>a * {
    pointer-events: none;
}

.reporter-container .slide>a:hover {
    background-color: #EA6B4E;
}

.reporter-container .slide>a:focus,
.reporter-container .slide>a:hover {
    text-decoration: none;
}

.reporter-container .slide>a span.slide_num {
    text-decoration: none;
    position: absolute;
    bottom: 5px;
    left: 65px;
    color: #EA6B4E;
    font-weight: 600;
    font-size: 1.5em;
}

.reporter-container .slide.active {
    border: 2px solid #EA6B4E;
}

.reporter-container div.tab-pane[data-type="slide"] {
    position: relative;
    overflow: hidden;
}

.reporter-container .ui-draggable {
    overflow: visible !important;
}

.reporter-container .ui-resizable-n,
.reporter-container .ui-resizable-s {
    height: 3px;
    background-color: #EA6B4E !important;
}

.reporter-container .ui-resizable-e,
.reporter-container .ui-resizable-w {
    width: 3px;
    background-color: #EA6B4E !important;
}

.reporter-container .ui-resizable-sw,
.reporter-container .ui-resizable-ne,
.reporter-container .ui-resizable-nw {
    background-color: #EA6B4E !important;
}

.reporter-container .ui-resizable-se {
    background-image: url('/images/arrow-right-solid.svg');
    background-repeat: no-repeat;
    background-position: unset;
    transform: rotate(45deg);
    right: -2px;
    bottom: -2px;
}

.reporter-container .slide-show-container {
    z-index: 100001 !important;
}

.reporter-container .active-layout {
    border: 2px dashed #fff !important;
    margin: 3px 0px !important;
}

.reporter-text {
    position: absolute;
    z-index: -1;
}

.reporter-container .reporter-contextmenu {
    position: absolute;
    z-index: 10023;
    display: none;
}

.reporter-container .reporter-contextmenu .context-menu-item * {
    pointer-events: none;
}

.reporter-container a.watermark-btn {
    font-size: 2em;
    width: 100%;
    text-align: center;
    padding: 15px 10px;
    margin-top: 5px;
    border: 1px solid #eee;
    color: #eee;
    text-decoration: none;
    border-radius: 6px;
}

.reporter-container a.watermark-btn:hover {
    background-color: #333;
}

.reporter-container ul.watermark-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reporter-container .watermark-list-item {
    width: 95%;
    height: auto;
    margin: 5px 0px;
    border: 0.5px solid #eee;
    padding: 10px;
    border-radius: 4px;

}

.reporter-container .watermark-list-item>a {
    color: #eee;
    font-size: 1.5em;
    text-decoration: none;
}

.reporter-container .watermark-list-item>a i {
    color: #fff;
    float: right;
    font-size: 0.8em;
    margin-top: 5px;
    margin-right: 8px;
}

.reporter-container ul.media-nav {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: row;
}

.reporter-container ul.media-nav li.media-tab {
    width: 50%;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    font-weight: 600;
    margin: 0px 5px;
    border-bottom: 3px solid rgba(135, 135, 135, 0.15);
}

.reporter-container ul.media-nav li.media-tab>a {
    width: 100%;
    height: 100%;
    padding: 5px;
    text-decoration: none;
    color: lightgray;
    text-align: center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reporter-container ul.media-nav li.media-tab>a i {
    margin-right: 7px;
}

.reporter-container ul.media-nav li.media-tab.active {
    border-bottom: 3px solid #eee;
}

.reporter-container ul.media-nav li.media-tab.active>a {
    color: #fff;
}

.reporter-container p.media-message {
    font-size: 1.2em;
    color: darkgray;
}

.reporter-container .layout-list,
.reporter-container ul.media-list {
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    margin-bottom: 0px;
    margin-top: 10px;
}

.reporter-container .add-slide-opt-item,
.reporter-container .layout-list .layout-item,
.reporter-container ul.media-list li.media-list-item {
    margin: 5px 0px;
}

.reporter-container .add-slide-opt-item>a,
.reporter-container .layout-list .layout-item>a,
.reporter-container ul.media-list li.media-list-item>a {
    height: 75px;
    width: 100%;
    display: flex;
    border-radius: 4px;
    text-decoration: none;
    justify-content: center;
    background-color: #fff;
}

.reporter-container .add-slide-opt-item>a:hover,
.reporter-container .layout-list .layout-item>a:hover,
.reporter-container ul.media-list li.media-list-item>a:hover {
    border: 1px solid #EA6B4E;
}

.reporter-container .add-slide-opt-item>a *,
.reporter-container .layout-list .layout-item>a *,
.reporter-container ul.media-list li.media-list-item>a * {
    pointer-events: none;
}

.reporter-container .add-slide-opt-item>a small,
.reporter-container .layout-list .layout-item>a small,
.reporter-container ul.media-list li.media-list-item>a small {
    position: absolute;
    left: 20px;
    top: 5px;
    word-break: break-all;
    max-width: 70%;
    line-height: 1.4;
    color: #EA6B4E;
    font-weight: 600;
    display: none;
    text-overflow: ellipsis;
    overflow: hidden;
}

.reporter-container .add-slide-opt-item>a:hover small,
.reporter-container .layout-list .layout-item>a:hover small,
.reporter-container ul.media-list li.media-list-item>a:hover small {
    display: block;
}

/* Add-Slide tile — show the layout name clearly below the thumbnail
   instead of as an overlaid hover-only badge. The base flex / fixed-
   height rules above are overridden so the tile becomes a column with
   image-on-top, name-on-bottom. */
.reporter-container .add-slide-opt-item > a {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 6px 6px 8px;
    border: 1px solid #e0e0e0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reporter-container .add-slide-opt-item > a > img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    border-radius: 3px;
    background: #fafbfc;
    margin-bottom: 6px;
}
.reporter-container .add-slide-opt-item > a > small {
    position: static;
    display: block;
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}
.reporter-container .add-slide-opt-item > a:hover > small {
    color: #02B6FF;
}

/* Inline "creating new slide" feedback — replaces the full-screen
   modal loader. The clicked tile gets a moving sky-blue shimmer +
   a soft glow so the user sees the action register without losing
   the menu context. Pointer-events:none keeps the tile from being
   double-clicked while the slide is being inserted. */
.reporter-container .add-slide-opt-item.add-slide-spinning > a {
    pointer-events: none;
    border-color: #02B6FF;
    box-shadow: 0 0 0 2px rgba(2, 182, 255, 0.18);
    background-image: linear-gradient(90deg, rgba(2, 182, 255, 0.08) 0%, rgba(2, 182, 255, 0.28) 50%, rgba(2, 182, 255, 0.08) 100%);
    background-size: 200% 100%;
    animation: addSlideShimmer 0.9s ease-in-out infinite;
}
@keyframes addSlideShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.reporter-loader-backdrop {
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10029 !important;
    flex-direction: column;
}

.reporter-loader-container {
    width: 25%;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7) !important;
    padding: 20px;
    border-radius: 8px;
}

.close-repoter-loader {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 2em;
    color: rgb(196, 192, 192);
}

.close-repoter-loader:hover {
    cursor: pointer;
    color: #fff;
}

.reporter-container .watermark-container {
    width: 100%;
    height: auto;
    min-height: 300px;
    margin-top: 10px;
}

.reporter-container .pencil-size-count,
.reporter-container .pencil-transparency-count {
    float: right;
}

.reporter-container .reporter-pencil-color {
    height: 26px;
    border-radius: 4px;
}

.reporter-container .pencil-drawing {
    cursor: grabbing;
}

.reporter-container .pencil-drawing-canvas {
    position: absolute;
    left: 0px;
    top: 0px;
    background: transparent;
}

.reporter-container .reporter-chart-data-dropzone {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.reporter-container .data-source-pagination,
.reporter-container .image-list-pagination {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0px;
    left: 10px;
}

.reporter-container .data-source-pagination .paginationjs,
.reporter-container .image-list-pagination .paginationjs {
    display: flex;
    align-items: center;
}

.reporter-container .data-source-pagination ul,
.reporter-container .image-list-pagination ul {
    display: flex;
    margin: 0px;
}

.reporter-container .data-source-pagination ul li,
.reporter-container .image-list-pagination ul li {
    padding: 0px 15px;
    background-color: #FFF;
    color: #333;
    margin: 0px 5px;
    border-radius: 4px;
}

.reporter-container .data-source-pagination .paginationjs-nav,
.reporter-container .image-list-pagination .paginationjs-nav {
    margin-left: 15px;
}

.reporter-container .data-source-list {
    width: 100%;
    height: calc(100% - 300px);
    margin-top: 10px;
    margin-bottom: 0px;
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
    position: relative;
}

.reporter-container .data-source-list li.data-source-list-item {
    height: 110px;
}

.reporter-container .data-source-list li.data-source-list-item>a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
}

.reporter-container .data-source-list li.data-source-list-item>a * {
    pointer-events: none;
}

.reporter-container .data-source-list li.data-source-list-item>a:hover {
    background-color: #4a4a4a;
}

.reporter-container .data-source-list li.data-source-list-item>a i {
    font-size: 2em;
}

.reporter-container .data-source-list li.data-source-list-item>a span {
    color: inherit;
    font-size: 11px;
    margin-top: 10px;
    word-break: break-all;
    text-align: center;
    line-height: 1.2;
}

.reporter-container .ui-draggable.ui-wrapper {
    overflow: visible !important;
}

.reporter-container .slide:not(.active) .extra-option-slide {
    position: absolute;
    top: 3px;
    right: 10px;
    z-index: 2;
    font-size: 21px;
    padding: 2px 10px;
    border-radius: 4px;
    background: lightgray;
    color: #333;
    display: block;
}
.reporter-container .extra-option-slide { display: none; }
.reporter-container .extra-option-slide:hover {
    background: gray !important;
    color: whitesmoke !important;
    cursor: pointer;
}

.reporter-container .pb-group {
    width: 120px;
    padding: 0px 10px;
    margin: 0px;
}

.reporter-container .btn-label {
    padding: 2px 5px;
    border-radius: 4px;
    margin: 0px;
}

.reporter-container .btn-label:hover {
    background-color: lightgray;
    cursor: pointer;
}

.reporter-container .dropdown.open .btn-label {
    background-color: lightgray;
}

.reporter-container .pb-label {
    margin-top: -5px;
}

.reporter-container .pb-nav-icon {
    margin: 0px 2px !important;
    padding: 8px;
    border-radius: 4px;
}

.reporter-container .pb-nav-icon.pb-selected {
    background-color: steelblue;
}

.reporter-container .pb-nav-icon.pb-selected>a {
    color: #fff;
}

.reporter-container li.pb-selected>a {
    background-color: steelblue;
    color: #fff;
}

/* =========================================================================
   Phase 2.7 — Skin variants (Canva default + PowerPoint alternative)

   Skins are applied as a class on the root .reporter-container. CSS
   variables hold the palette / radii / shadows / fonts; the rules below
   only re-skin chrome (top nav, left nav, panels, dropdowns). Slide
   canvas content is intentionally untouched so existing decks keep
   rendering byte-for-byte. New panels that use inline styles (brand
   kit, theme picker, menu bar) reference the same variables where
   possible — see the var() values inline in the templates.
   ========================================================================= */

.reporter-container.reporter-skin-canva {
    --rep-bg:             #f8f7fb;
    --rep-surface:        #ffffff;
    --rep-surface-2:      #f0eef5;
    --rep-border:         #e8e6ee;
    --rep-border-strong:  #d6d3df;
    --rep-text:           #1f2937;
    --rep-text-muted:     #6b7280;
    --rep-accent:         #6c5ce7;
    --rep-accent-hover:   #5a4cd1;
    --rep-accent-soft:    #ede9ff;
    --rep-radius-card:    14px;
    --rep-radius-control: 8px;
    --rep-shadow-card:    0 1px 3px rgba(13,18,40,0.04), 0 1px 2px rgba(13,18,40,0.06);
    --rep-shadow-pop:     0 8px 24px rgba(13,18,40,0.10);
    --rep-font-sans:      'Inter', 'Helvetica Neue', Arial, sans-serif;
    --rep-font-display:   'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.reporter-container.reporter-skin-ppt {
    --rep-bg:             #f3f3f3;
    --rep-surface:        #ffffff;
    --rep-surface-2:      #ebebeb;
    --rep-border:         #d1d1d1;
    --rep-border-strong:  #b8b8b8;
    --rep-text:           #252525;
    --rep-text-muted:     #6b6b6b;
    --rep-accent:         #d24726;
    --rep-accent-hover:   #b53b1e;
    --rep-accent-soft:    #fde8e0;
    --rep-radius-card:    4px;
    --rep-radius-control: 2px;
    --rep-shadow-card:    0 1px 0 rgba(0,0,0,0.08);
    --rep-shadow-pop:     0 4px 16px rgba(0,0,0,0.12);
    --rep-font-sans:      'Segoe UI', 'Aptos', 'Helvetica Neue', Arial, sans-serif;
    --rep-font-display:   'Segoe UI', 'Aptos', 'Helvetica Neue', Arial, sans-serif;
}

/* Skin-aware framework chrome. Specificity is via the .reporter-skin-*
   ancestor so these win over the base rules above without !important. */

.reporter-container.reporter-skin-canva,
.reporter-container.reporter-skin-ppt {
    background-color: var(--rep-bg);
    color: var(--rep-text);
    font-family: var(--rep-font-sans);
}

.reporter-container.reporter-skin-canva .top-nav,
.reporter-container.reporter-skin-ppt   .top-nav {
    background: var(--rep-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--rep-border) !important;
    box-shadow: var(--rep-shadow-card);
    color: var(--rep-text);
    height: 52px;
}

.reporter-container.reporter-skin-canva .top-nav-brand,
.reporter-container.reporter-skin-ppt   .top-nav-brand {
    color: var(--rep-text);
    font-family: var(--rep-font-display);
}

.reporter-container.reporter-skin-canva .nav-link,
.reporter-container.reporter-skin-ppt   .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--rep-text) !important;
    border-radius: var(--rep-radius-control);
    transition: background 0.15s ease, color 0.15s ease;
    font-weight: 500;
}
.reporter-container.reporter-skin-canva .nav-link:hover,
.reporter-container.reporter-skin-ppt   .nav-link:hover {
    background: var(--rep-surface-2) !important;
    background-color: var(--rep-surface-2) !important;
    color: var(--rep-accent) !important;
}

/* Add Slide pill — solid accent fill keeps it the visual anchor of
   the left side, matching the Canva primary-action pattern. */
.reporter-container.reporter-skin-canva .reporter-add-slide-btn,
.reporter-container.reporter-skin-ppt   .reporter-add-slide-btn {
    background: var(--rep-accent) !important;
    background-color: var(--rep-accent) !important;
    color: #ffffff !important;
}
.reporter-container.reporter-skin-canva .reporter-add-slide-btn:hover,
.reporter-container.reporter-skin-ppt   .reporter-add-slide-btn:hover {
    background: var(--rep-accent-hover) !important;
    background-color: var(--rep-accent-hover) !important;
    color: #ffffff !important;
}

/* Add-Slide pill geometry (skin-agnostic). Color is set in the
   stronger !important rule below. */
.reporter-container.reporter-skin-canva .reporter-add-slide-btn,
.reporter-container.reporter-skin-ppt   .reporter-add-slide-btn {
    padding: 6px 14px;
    border-radius: 999px;
}

.reporter-container.reporter-skin-canva .reporter-doc-title,
.reporter-container.reporter-skin-ppt   .reporter-doc-title {
    color: var(--rep-text) !important;
    font-family: var(--rep-font-sans) !important;
}

.reporter-container.reporter-skin-canva #top-nav-dropdown-menu,
.reporter-container.reporter-skin-ppt   #top-nav-dropdown-menu {
    background: var(--rep-surface);
    border: 1px solid var(--rep-border);
    border-radius: var(--rep-radius-card);
    box-shadow: var(--rep-shadow-pop);
    padding: 4px 0;
}

.reporter-container.reporter-skin-canva .reporter-menu-item:hover,
.reporter-container.reporter-skin-ppt   .reporter-menu-item:hover {
    background: var(--rep-surface-2);
    color: var(--rep-accent);
}

/* Sidebar — overrides the legacy dark rgba() backgrounds with
   skin-aware whites + accent. !important is needed to beat the
   `background-color: rgba(13,18,22,0.9)` baked into the existing
   left-nav rules that ship with the original framework. */
.reporter-container.reporter-skin-canva .left-nav,
.reporter-container.reporter-skin-ppt   .left-nav {
    background: var(--rep-surface) !important;
    background-color: var(--rep-surface) !important;
    border-right: 1px solid var(--rep-border);
}
.reporter-container.reporter-skin-canva .left-nav-link,
.reporter-container.reporter-skin-ppt   .left-nav-link,
.reporter-container.reporter-skin-canva .extra-space,
.reporter-container.reporter-skin-ppt   .extra-space {
    background: var(--rep-surface) !important;
    background-color: var(--rep-surface) !important;
    color: var(--rep-text-muted) !important;
    transition: background 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}
.reporter-container.reporter-skin-canva .left-nav-link:hover,
.reporter-container.reporter-skin-ppt   .left-nav-link:hover {
    background: var(--rep-surface-2) !important;
    background-color: var(--rep-surface-2) !important;
    color: var(--rep-accent) !important;
}
.reporter-container.reporter-skin-canva .left-nav-link.selected,
.reporter-container.reporter-skin-ppt   .left-nav-link.selected {
    background: var(--rep-accent-soft) !important;
    background-color: var(--rep-accent-soft) !important;
    color: var(--rep-accent) !important;
    border-left: 3px solid var(--rep-accent) !important;
}

.reporter-container.reporter-skin-canva .left-nav-body,
.reporter-container.reporter-skin-ppt   .left-nav-body {
    background: var(--rep-surface) !important;
    background-color: var(--rep-surface) !important;
    border-right: 1px solid var(--rep-border);
}
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content {
    background: var(--rep-surface) !important;
    background-color: var(--rep-surface) !important;
    color: var(--rep-text) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}
/* Force darker text on every descendant of the panel content so legacy
   white-on-dark colours don't bleed through. The panel is white, so
   the default text colour should match the page text. */
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content h1,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content h2,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content h3,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content h4,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content h5,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content p,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content small,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content span,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content label,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content a,
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content li,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content h1,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content h2,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content h3,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content h4,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content h5,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content p,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content small,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content span,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content label,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content a,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content li {
    color: var(--rep-text) !important;
}
/* Section labels stay muted but readable. */
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-content .ln-dropzone-label,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-content .ln-dropzone-label {
    color: var(--rep-text-muted) !important;
}
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-close,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-close {
    background: var(--rep-surface-2) !important;
    background-color: var(--rep-surface-2) !important;
    color: var(--rep-text-muted) !important;
    border-radius: 0 var(--rep-radius-card) var(--rep-radius-card) 0;
}
.reporter-container.reporter-skin-canva .left-nav-body .ln-body-close:hover,
.reporter-container.reporter-skin-ppt   .left-nav-body .ln-body-close:hover {
    color: var(--rep-accent) !important;
}
.reporter-container.reporter-skin-canva .dropzone-layout,
.reporter-container.reporter-skin-ppt   .dropzone-layout {
    background: var(--rep-surface-2) !important;
    background-color: var(--rep-surface-2) !important;
    border: 1px dashed var(--rep-border-strong) !important;
    border-radius: var(--rep-radius-control) !important;
    color: var(--rep-text-muted) !important;
}

/* Top-nav force-override — the existing CSS sets a blue gradient with
   !important on .top-nav, so the skin needs the same to win. */
.reporter-container.reporter-skin-canva .top-nav,
.reporter-container.reporter-skin-ppt   .top-nav {
    background: var(--rep-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--rep-border) !important;
    box-shadow: var(--rep-shadow-card);
    color: var(--rep-text);
    height: 52px;
}
.reporter-container.reporter-skin-canva .nav-link,
.reporter-container.reporter-skin-ppt   .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--rep-text) !important;
    border-radius: var(--rep-radius-control);
    transition: background 0.15s ease, color 0.15s ease;
    font-weight: 500;
}
.reporter-container.reporter-skin-canva .nav-link:hover,
.reporter-container.reporter-skin-ppt   .nav-link:hover {
    background: var(--rep-surface-2) !important;
    background-color: var(--rep-surface-2) !important;
    color: var(--rep-accent) !important;
}
.reporter-container.reporter-skin-canva .reporter-add-slide-btn,
.reporter-container.reporter-skin-ppt   .reporter-add-slide-btn {
    background: var(--rep-accent) !important;
    background-color: var(--rep-accent) !important;
    color: #ffffff !important;
}
.reporter-container.reporter-skin-canva .reporter-add-slide-btn:hover,
.reporter-container.reporter-skin-ppt   .reporter-add-slide-btn:hover {
    background: var(--rep-accent-hover) !important;
    background-color: var(--rep-accent-hover) !important;
    color: #ffffff !important;
}

/* Top-nav additional buttons (Save Report, Auto-Save toggle, etc).
   .is-active gives the button a clear accent-soft fill when its
   underlying state is ON; without the class the button reads as a
   plain text link, with only the brief hover highlight while the mouse
   is over it. The auto-save toggle adds/removes is-active in its click
   handler so the OFF state cannot be visually confused with ON. */
.reporter-container.reporter-skin-canva .additional-link-btn.is-active,
.reporter-container.reporter-skin-ppt   .additional-link-btn.is-active {
    background: var(--rep-accent-soft) !important;
    background-color: var(--rep-accent-soft) !important;
    color: var(--rep-accent) !important;
}

/* Bottom status bar (Phase 2.9) — skin tones for the slide counter,
   action buttons, and the Present pill. */
.reporter-container.reporter-skin-canva .reporter-status-bar,
.reporter-container.reporter-skin-ppt   .reporter-status-bar {
    background: var(--rep-surface) !important;
    background-color: var(--rep-surface) !important;
    border-top: 1px solid var(--rep-border) !important;
    color: var(--rep-text) !important;
}
.reporter-container.reporter-skin-canva .rep-status-btn:hover,
.reporter-container.reporter-skin-ppt   .rep-status-btn:hover {
    background: var(--rep-surface-2) !important;
    color: var(--rep-accent) !important;
}
.reporter-container.reporter-skin-canva .rep-status-btn.is-active,
.reporter-container.reporter-skin-ppt   .rep-status-btn.is-active {
    background: var(--rep-accent-soft) !important;
    color: var(--rep-accent) !important;
}
.reporter-container.reporter-skin-canva .rep-status-present,
.reporter-container.reporter-skin-ppt   .rep-status-present {
    background: var(--rep-accent) !important;
    background-color: var(--rep-accent) !important;
    color: #ffffff !important;
}

.reporter-container.reporter-skin-canva .ln-dropzone-label,
.reporter-container.reporter-skin-ppt   .ln-dropzone-label {
    color: var(--rep-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.reporter-container.reporter-skin-canva .slide-view-container,
.reporter-container.reporter-skin-ppt   .slide-view-container {
    background: var(--rep-bg);
}

.reporter-container.reporter-skin-canva .slide-list-container,
.reporter-container.reporter-skin-ppt   .slide-list-container {
    background: var(--rep-surface);
    border-top: 1px solid var(--rep-border);
}

.reporter-container.reporter-skin-canva .slide-settings-options-container,
.reporter-container.reporter-skin-ppt   .slide-settings-options-container {
    background: var(--rep-surface);
    border-bottom: 1px solid var(--rep-border);
}

/* PowerPoint-only tweak: thicker bottom border on the top nav so it
   reads more like an Office ribbon than a Canva floating bar. */
.reporter-container.reporter-skin-ppt .top-nav {
    border-bottom: 2px solid var(--rep-accent);
}

/* Skin chip used inside the Preferences menu so the user can see at
   a glance which skin is active without opening another panel. */
.reporter-container .reporter-skin-chip {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--rep-accent-soft);
    color: var(--rep-accent);
    border-radius: 4px;
}

/* Multi-select highlight on the Responses list. The visible border /
 * background lives on the inner <a> (per the row template's inline
 * style), so the .is-picked class on the <li> needs to reach into the
 * anchor to override. !important is required because the template
 * already sets border + background inline on the <a>. */
.reporter-data-response.is-picked > a {
    border-color: var(--rep-accent, #6c5ce7) !important;
    background:   var(--rep-accent-soft, #f3f0ff) !important;
    box-shadow:   0 0 0 1px var(--rep-accent, #6c5ce7) inset;
}

/* ----------------------------------------------------------------------
 * Right sidebar — element properties pane (PowerPoint-style).
 * Slides in from the right when an element is picked, slides out when
 * deselected. The is-collapsed class on the host div drives the open/
 * close state via transform; .main-container is flex so the active
 * sidebar takes its width directly without re-layout flicker.
 * --------------------------------------------------------------------*/
.reporter-right-sidebar {
    flex: 0 0 auto;
    width: 280px;
    border-left: 1px solid var(--rep-border, #e5e7eb);
    background: #ffffff;
    overflow-y: auto;
    transition: width 0.18s ease, transform 0.18s ease;
    z-index: 5;
}
.reporter-right-sidebar.is-collapsed {
    width: 0;
    border-left-width: 0;
    overflow: hidden;
}
.reporter-right-sidebar-inner {
    width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.reporter-rs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--rep-border, #e5e7eb);
    background: #fafbfc;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.reporter-rs-header .fas { color: #2c5282; }
.reporter-rs-title {
    flex: 1 1 auto;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 12px;
}
.reporter-rs-close {
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}
.reporter-rs-close:hover { color: #1f2937; }
.reporter-rs-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 12px 16px;
}
.reporter-rs-section {
    border-top: 1px solid #f0f0f0;
    padding: 10px 0 8px;
}
.reporter-rs-section:first-child { border-top: 0; padding-top: 4px; }
.reporter-rs-section h5 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.reporter-rs-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    align-items: stretch;
}
.reporter-rs-row.two-up > label { flex: 1 1 0; }
.reporter-rs-row > label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #6b7280;
    flex: 1 1 auto;
    min-width: 0;
}
.reporter-rs-row > label.full { flex: 1 1 100%; }
.reporter-rs-row .reporter-rs-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    color: #1f2937;
    background: #ffffff;
}
.reporter-rs-row input[type="color"] {
    height: 26px;
    padding: 1px;
    cursor: pointer;
}
.reporter-rs-row input[type="range"] { padding: 0; cursor: pointer; }
.reporter-rs-row select.reporter-rs-input { cursor: pointer; }
.reporter-rs-row.toggle-row {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 3px;
    gap: 2px;
}
.reporter-rs-toggle {
    flex: 1 1 0;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.reporter-rs-toggle:hover { color: #1f2937; background: #e8e8e8; }
.reporter-rs-toggle.is-active {
    background: #ffffff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.reporter-rs-row.z-order .reporter-rs-btn {
    flex: 1 1 0;
}
.reporter-rs-btn {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    font-size: 12px;
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
}
.reporter-rs-btn:hover { background: #f3f4f6; }
.reporter-rs-actions {
    display: flex;
    gap: 6px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-top: 6px;
}
.reporter-rs-actions .reporter-rs-btn { flex: 1 1 0; }
.reporter-rs-btn.delete {
    border-color: #fcdcdc;
    color: #b91c1c;
    background: #fff5f5;
}
.reporter-rs-btn.delete:hover { background: #fde2e2; }

/* Crop frame — overlays the active image while cropMode is on. Built
 * from a single div with a huge dim box-shadow that "spotlights" the
 * crop area; jQuery UI resizable handles are restyled into visible
 * white squares so the edges read as grippable.
 */
.reporter-crop-frame .ui-resizable-handle {
    background: #ffffff;
    border: 1px solid #2c5282;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
    width: 10px;
    height: 10px;
    z-index: 10011;
}
.reporter-crop-frame .ui-resizable-n,
.reporter-crop-frame .ui-resizable-s {
    left: 50%;
    margin-left: -5px;
    width: 14px;
}
.reporter-crop-frame .ui-resizable-e,
.reporter-crop-frame .ui-resizable-w {
    top: 50%;
    margin-top: -5px;
    height: 14px;
}
.reporter-crop-frame .ui-resizable-n  { top: -6px;    }
.reporter-crop-frame .ui-resizable-s  { bottom: -6px; }
.reporter-crop-frame .ui-resizable-e  { right: -6px;  }
.reporter-crop-frame .ui-resizable-w  { left: -6px;   }
.reporter-crop-frame .ui-resizable-ne { top: -6px;    right: -6px;  }
.reporter-crop-frame .ui-resizable-nw { top: -6px;    left:  -6px;  }
.reporter-crop-frame .ui-resizable-se { bottom: -6px; right: -6px;  }
.reporter-crop-frame .ui-resizable-sw { bottom: -6px; left:  -6px;  }

/* Marquee multi-select — overlay rectangle while the user is dragging
 * across empty slide background, plus the per-element highlight that
 * sticks until the toolbar is dismissed. */
.reporter-marquee {
    pointer-events: none;
}
.reporter-slide-item.is-multi-selected {
    outline: 2px dashed #2c5282;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.18);
}
.reporter-multi-toolbar { user-select: none; }
.reporter-multi-toolbar button:hover { filter: brightness(0.97); }
/* /javascripts/plugins_src/bridgemat_raw/bridgemat.css */
.bridgemat-pdf {
    width: 500px;
    height: 400px;
}

#bridgemat-keyword-view-toggle {
    padding: 20px;
}

/*.highlight {*/
    /*background-color: yellow;*/
/*}*/

#bridgemat-theory-view {
    padding-top: 20px;
}

.bm-page-header {
    color: black !important;
    background-color: white !important;
}

.bm-var-det-table-header, .bm-var-det-table-cell {
    width: 11.11111111%;
    overflow: auto;
}

/*.var-name {*/
    /*cursor: pointer;*/
/*}*/

#bm-search-bar {
    height: 33px;
}

.bridgemat-grid-view-panel {
    height: 400px;
}

.bm-grid-checkbox {
    padding: 10px;
}

.bridgemat-panel-purpose {
    height: 305px;
    overflow: scroll;
}

#pdf-btn-div {
    position: relative;
    left: 25px;
}

#bm-check-count-cont {
    padding: 7px;
}

#bridgemat-viz {
    padding: 20px;
}

.bridgemat-nav-tabs {
    padding-right: 15px;
}

.bridgemat-nav-tab {
    background-color: #f4f4f4;
}
/* /javascripts/plugins_src/dataset_encoder/dataset_encoder.css */
.dataset-encoder {
    position: relative;
}
.dataset-encoder .dataset-encoder-header {
    border-bottom: 1px solid #ddd;
}
.dataset-encoder .dataset-encoder-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #ddd;
}

.dataset-encoder .status-message {
    border-radius: 4px;
    margin-top: 10px;
}

.dataset-encoder .dataset-encoder-list {
    height: auto;
    max-height: 350px;
    overflow: auto;
}
/* /javascripts/plugins_src/workflow/workflow.css */
/*
 * CSS for template: wf-canvas-groups-viewer.tpl
 * Source: javascripts/templates/modular/builder/canvas/wf-canvas-groups-viewer.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-canvas-groups-viewer {
position: absolute;
    display: none;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CCC;
    z-index: 1052;
}

div.wf-canvas-groups-viewer.upper-arrow:before,
div.wf-canvas-groups-viewer.upper-arrow:after {
content: ' ';
    position: absolute;
    left: 48%;
    border-style: solid;
    width: 0;
    height: 0;
    margin-top: -20px;
    top: 0;
}

div.wf-canvas-groups-viewer.upper-arrow:before {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #CCC transparent;
}

div.wf-canvas-groups-viewer.upper-arrow:after {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #FFF transparent;
}

div.wf-canvas-groups-viewer .close_group_viewer {
position: absolute;
    right: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #AAA;
    cursor: pointer;
}

div.wf-canvas-groups-viewer {
position: absolute;
    display: none;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CCC;
    z-index: 1052;
}

div.wf-canvas-groups-viewer.upper-arrow:before,
div.wf-canvas-groups-viewer.upper-arrow:after {
content: ' ';
    position: absolute;
    left: 48%;
    border-style: solid;
    width: 0;
    height: 0;
    margin-top: -20px;
    top: 0;
}

div.wf-canvas-groups-viewer.upper-arrow:before {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #CCC transparent;
}

div.wf-canvas-groups-viewer.upper-arrow:after {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #FFF transparent;
}

div.wf-canvas-groups-viewer .close_group_viewer {
position: absolute;
    right: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #AAA;
    cursor: pointer;
}

div.wf-canvas-groups-viewer {
position: absolute;
    display: none;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CCC;
    z-index: 1052;
}

div.wf-canvas-groups-viewer.upper-arrow:before,
div.wf-canvas-groups-viewer.upper-arrow:after {
content: ' ';
    position: absolute;
    left: 48%;
    border-style: solid;
    width: 0;
    height: 0;
    margin-top: -20px;
    top: 0;
}

div.wf-canvas-groups-viewer.upper-arrow:before {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #CCC transparent;
}

div.wf-canvas-groups-viewer.upper-arrow:after {
border-width: 0 20px 20px 20px;
    border-color: transparent transparent #FFF transparent;
}

div.wf-canvas-groups-viewer .close_group_viewer {
position: absolute;
    right: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #AAA;
    cursor: pointer;
}



/*
 * CSS for template: wf-canvas-node-info-tpl.tpl
 * Source: javascripts/templates/modular/builder/canvas/wf-canvas-node-info-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.simulations-popover .popover-content {
padding: 0;
    border-radius: 6px;
    overflow: hidden;
}

.simulations-popover .popover-title {
font-weight: 600;
    font-size: 14px;
    color: #495057;
}


/* ================================================================
   DW-2774 — Modern Canvas Area + Minimap
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- Canvas background ---- */
div.workflow.wf-design-modern .full-view,
body.wf-design-modern .full-view {
    background: var(--wf-bg-canvas);
}

div.workflow.wf-design-modern .chart-view,
body.wf-design-modern .chart-view {
    position: relative;
    background: var(--wf-bg-canvas);
}

/* ---- Dot grid overlay (light mode) ---- */
div.workflow.wf-design-modern .chart-view::before,
body.wf-design-modern .chart-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 1;
}

/* Canvas element itself */
div.workflow.wf-design-modern .chart-view .main_canvas,
body.wf-design-modern .chart-view .main_canvas {
    background: transparent !important;
}

/* Node execution spinners — must stack above dot grid overlay */
div.workflow.wf-design-modern .chart-view .canvas-node-spinner,
body.wf-design-modern .chart-view .canvas-node-spinner,
div.workflow.wf-design-modern .chart-view .iterating-spinner,
body.wf-design-modern .chart-view .iterating-spinner {
    z-index: 3 !important;
}

/* SVG overlay (connections, zoom behavior) must sit above dot grid */
div.workflow.wf-design-modern .chart-view svg,
body.wf-design-modern .chart-view svg {
    z-index: 2;
}

/* Dark mode: lighter dots on dark canvas */
div.workflow.wf-design-modern.wf-dark .chart-view::before,
body.wf-design-modern.wf-dark .chart-view::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* ---- Minimap / birds-eye view ---- */
div.workflow.wf-design-modern .birds-eye-view,
body.wf-design-modern .birds-eye-view {
    border-radius: var(--wf-r-lg) !important;
    border: 1px solid var(--wf-border-strong) !important;
    box-shadow: var(--wf-sh-md) !important;
    background: var(--wf-bg-surface) !important;
    overflow: hidden;
}

/* ---- Navigation wheel ---- */
div.workflow.wf-design-modern .wf-navigation-wheel,
body.wf-design-modern .wf-navigation-wheel {
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
}

/* ---- Floating controls ---- */
div.workflow.wf-design-modern .wf-floating-container,
body.wf-design-modern .wf-floating-container {
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
}

div.workflow.wf-design-modern .wf-floating-container .btn,
body.wf-design-modern .wf-floating-container .btn {
    border-radius: var(--wf-r-md);
    color: var(--wf-text-secondary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-floating-container .btn:hover,
body.wf-design-modern .wf-floating-container .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ---- Connector animation overlay canvas ---- */
div.workflow.wf-design-modern .wf-anim-overlay,
body.wf-design-modern .wf-anim-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---- Right-side toolbar panels ---- */
div.workflow.wf-design-modern .wf-right-panel,
body.wf-design-modern .wf-right-panel {
    background: var(--wf-bg-elevated);
    border-left: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-md);
}

/* Right toolbar — floating dark panel */
div.workflow.wf-design-modern .full-view .wf-top-actions,
body.wf-design-modern .full-view .wf-top-actions {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
    padding: 4px !important;
    gap: 2px;
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn,
body.wf-design-modern .full-view .wf-top-actions .btn {
    border-radius: var(--wf-r-sm) !important;
    border: none !important;
    background: transparent !important;
    color: var(--wf-text-muted) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn:hover,
body.wf-design-modern .full-view .wf-top-actions .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn.btn-primary,
body.wf-design-modern .full-view .wf-top-actions .btn.btn-primary {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* Zoom toolbar — floating dark panel */
div.workflow.wf-design-modern .full-view .zoom,
body.wf-design-modern .full-view .zoom {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
    padding: 4px !important;
    gap: 2px;
}
div.workflow.wf-design-modern .full-view .zoom .btn,
body.wf-design-modern .full-view .zoom .btn {
    border-radius: var(--wf-r-sm) !important;
    border: none !important;
    background: transparent !important;
    color: var(--wf-text-muted) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .zoom .btn:hover,
body.wf-design-modern .full-view .zoom .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Hide classic graph info in modern — shown in statusbar instead */
div.workflow.wf-design-modern .wf-graph-info,
body.wf-design-modern .wf-graph-info {
    display: none !important;
}

/* Modern docked start worker */
div.workflow.wf-design-modern .docked-start,
body.wf-design-modern .docked-start {
    z-index: 3;
}
div.workflow.wf-design-modern .docked-start > .box,
body.wf-design-modern .docked-start > .box {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    width: 88px;
    height: 52px;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .docked-start > .box > i,
body.wf-design-modern .docked-start > .box > i {
    color: var(--wf-accent);
    font-size: 1.1em !important;
}
div.workflow.wf-design-modern .docked-start:hover > .box,
body.wf-design-modern .docked-start:hover > .box {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: var(--wf-sh-lg);
}
div.workflow.wf-design-modern .docked-start > .center,
body.wf-design-modern .docked-start > .center {
    font-size: var(--wf-fs-xs);
    font-weight: 500;
    color: var(--wf-text-secondary);
    margin-top: 4px;
}
div.workflow.wf-design-modern .docked-start .run_wf,
body.wf-design-modern .docked-start .run_wf {
    top: -36px !important;
    font-size: 18px !important;
    color: var(--wf-accent);
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-full);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wf-sh-sm);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .docked-start .run_wf:hover,
body.wf-design-modern .docked-start .run_wf:hover {
    background: var(--wf-accent);
    color: var(--wf-text-inverse);
    border-color: var(--wf-accent);
}
div.workflow.wf-design-modern .docked-start .ip-count,
body.wf-design-modern .docked-start .ip-count,
div.workflow.wf-design-modern .docked-start .op-count,
body.wf-design-modern .docked-start .op-count {
    font-size: var(--wf-fs-xs);
    color: var(--wf-text-muted);
    font-weight: 500;
}

/* Dark mode overrides for docked start */
div.workflow.wf-design-modern.wf-dark .docked-start > .box,
body.wf-design-modern.wf-dark .docked-start > .box {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border-strong);
}
div.workflow.wf-design-modern.wf-dark .docked-start .run_wf,
body.wf-design-modern.wf-dark .docked-start .run_wf {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border-strong);
}

/* Additional options bar */
div.workflow.wf-design-modern .full-view .additional_options,
body.wf-design-modern .full-view .additional_options {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    padding: 4px 8px;
}
div.workflow.wf-design-modern .full-view .additional_options .btn,
body.wf-design-modern .full-view .additional_options .btn {
    border-radius: var(--wf-r-sm) !important;
    border: 1px solid var(--wf-border) !important;
    background: transparent !important;
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-xs) !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .additional_options .btn:hover,
body.wf-design-modern .full-view .additional_options .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* ---- Global dropdown-menu styling for all toolbar/action-group dropdowns ---- */
div.workflow.wf-design-modern .full-view .dropdown-menu,
body.wf-design-modern .full-view .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 4px 0 !important;
    min-width: 160px;
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a,
body.wf-design-modern .full-view .dropdown-menu > li > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 7px 14px !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:hover,
body.wf-design-modern .full-view .dropdown-menu > li > a:hover,
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:focus,
body.wf-design-modern .full-view .dropdown-menu > li > a:focus {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li.active > a,
body.wf-design-modern .full-view .dropdown-menu > li.active > a {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}
div.workflow.wf-design-modern .full-view .dropdown-menu .divider,
body.wf-design-modern .full-view .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0 !important;
}
/* Dropdown menu icons */
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a > i,
body.wf-design-modern .full-view .dropdown-menu > li > a > i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:hover > i,
body.wf-design-modern .full-view .dropdown-menu > li > a:hover > i {
    color: var(--wf-accent);
}

/* ---- Modern Execution Message (wf-exec-message) ---- */
div.workflow.wf-design-modern .wf-exec-message,
body.wf-design-modern .wf-exec-message {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-lg) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 16px 20px !important;
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease;
}
div.workflow.wf-design-modern .wf-exec-message .close,
body.wf-design-modern .wf-exec-message .close {
    color: var(--wf-text-muted);
    opacity: 0.6;
    transition: var(--wf-t-fast);
    font-size: 18px;
}
div.workflow.wf-design-modern .wf-exec-message .close:hover,
body.wf-design-modern .wf-exec-message .close:hover {
    opacity: 1;
    color: var(--wf-text-primary);
}
div.workflow.wf-design-modern .wf-exec-message .worker-name,
body.wf-design-modern .wf-exec-message .worker-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
div.workflow.wf-design-modern .wf-exec-message .worker-name .fa-cog,
body.wf-design-modern .wf-exec-message .worker-name .fa-cog {
    color: var(--wf-text-muted);
    font-size: 12px;
}

/* Progress tracker steps - modern */
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"],
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-lg) !important;
    box-shadow: var(--wf-sh-lg) !important;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li {
    width: 28px;
    height: 28px;
    border: 2px solid var(--wf-border-strong) !important;
    background: var(--wf-bg-secondary) !important;
    color: var(--wf-text-muted) !important;
    font-size: 11px;
    transition: all 0.3s ease;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.active,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.active {
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
    background: var(--d3v-success, #10B981) !important;
    border-color: var(--d3v-success, #10B981) !important;
    color: #fff !important;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
    background: var(--wf-border) !important;
    height: 3px !important;
    border-radius: 2px;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
    background: var(--d3v-success, #10B981) !important;
    height: 3px !important;
}

/* Step-by-step checklist - modern */
div.workflow.wf-design-modern .wf-exec-message li[data-id],
body.wf-design-modern .wf-exec-message li[data-id] {
    font-size: 12px;
    color: var(--wf-text-muted);
    padding: 3px 0;
    transition: color 0.2s ease;
}
div.workflow.wf-design-modern .wf-exec-message li[data-id].active,
body.wf-design-modern .wf-exec-message li[data-id].active {
    color: var(--d3v-success, #10B981) !important;
    font-weight: 500;
}
div.workflow.wf-design-modern .wf-exec-message li[data-id] .status,
body.wf-design-modern .wf-exec-message li[data-id] .status {
    font-size: 13px;
    margin-right: 4px;
}
div.workflow.wf-design-modern .wf-exec-message .plugins-bottom-arrow,
body.wf-design-modern .wf-exec-message .plugins-bottom-arrow {
    border-top-color: var(--wf-bg-surface) !important;
}

/* Dark mode overrides */
div.workflow.wf-design-modern.wf-dark .wf-exec-message,
body.wf-design-modern.wf-dark .wf-exec-message {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-strong) !important;
}

/* ---- Disable search-focused hide rules in modern design ---- */
/* Modern design has search positioned on the right, so no need to hide controls */
div.workflow.wf-design-modern .workflow-index-container.search-focused .play-controls,
body.wf-design-modern .workflow-index-container.search-focused .play-controls,
div.workflow.wf-design-modern .workflow-index-container.search-focused .wf-execution-status,
body.wf-design-modern .workflow-index-container.search-focused .wf-execution-status,
div.workflow.wf-design-modern .workflow-index-container.search-focused .wf-control-buttons,
body.wf-design-modern .workflow-index-container.search-focused .wf-control-buttons {
    display: flex !important;
}


/*
 * CSS for template: wf-side-panel.tpl
 * Source: javascripts/templates/modular/builder/canvas/wf-side-panel.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.wf-side-panel {
position: absolute;
    right: 0;
    top: 38px;
    width: 350px;
    background-color: #fff;
    z-index: 1;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow div.wf-side-panel .workers-list {
overflow: auto;
}

div.workflow div.wf-side-panel .panel {
/*width: 300px;*/
}

div.workflow div.wf-side-panel.toggled {
width: 0;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before,
div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    position: absolute;
    left: 60%;
    top: -7px;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
border-color: transparent transparent #fff transparent;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before {
border-color: transparent transparent #ccc transparent;
    top: -8px;
}

div.workflow div.wf-side-panel div.workers,
div.workflow div.wf-side-panel div.workflows {
overflow: auto;
}

div.workflow div.wf-side-panel .panel-heading .title {
font-weight: bold;
    display: inline-block;
    position: relative;
    top: 9px;
    padding-left: 10px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls {
list-style: none;
    margin: 0px;
    /*min-height: 37px;*/
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li {
margin-top: 7px;
    float: left;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a {
padding: 10px 2px 12px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a i {
min-width: 24px;
    text-align: center;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a:hover {
background-color: rgba(51, 51, 51, 0.1);
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls ul.dropdown-menu li:hover {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item {
padding-left: 0;
    padding-right: 0;
    cursor: move;
    margin-bottom: 0px !important;
    border: none;
    border-bottom: 1px solid #ddd;
}

div.workflow div.wf-side-panel ul.workers-list li.list-group-item:last-child {
border-bottom: none;
}

div.workflow div.wf-side-panel li.list-group-item-highlight {
padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item.selected.active {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item span.label.turn-active {
cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group {
display: none;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group i {
padding: 0 3px;
    cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item:hover div.controls-group {
display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item:hover .row.active div.controls-group .remove-workflow {
display: none !important;
}

div.workflow div.wf-side-panel li.list-group-item:not(.active):hover {
background: #eee;
}

div.workflow div.wf-side-panel li.list-group-item:last-child {
border-bottom: 1px solid #ddd;
}

div.workflow div.wf-side-panel {
position: absolute;
    right: 0;
    top: 38px;
    width: 350px;
    background-color: #fff;
    z-index: 1;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow div.wf-side-panel .workers-list {
overflow: auto;
}

div.workflow div.wf-side-panel .panel {
/*width: 300px;*/
}

div.workflow div.wf-side-panel.toggled {
width: 0;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before,
div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    position: absolute;
    left: 60%;
    top: -7px;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
border-color: transparent transparent #fff transparent;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before {
border-color: transparent transparent #ccc transparent;
    top: -8px;
}

div.workflow div.wf-side-panel div.workers,
div.workflow div.wf-side-panel div.workflows {
overflow: auto;
}

div.workflow div.wf-side-panel .panel-heading .title {
font-weight: bold;
    display: inline-block;
    position: relative;
    top: 9px;
    padding-left: 10px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls {
list-style: none;
    margin: 0px;
    /*min-height: 37px;*/
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li {
margin-top: 7px;
    float: left;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a {
padding: 10px 2px 12px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a i {
min-width: 24px;
    text-align: center;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a:hover {
background-color: rgba(51, 51, 51, 0.1);
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls ul.dropdown-menu li:hover {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item {
padding-left: 0;
    padding-right: 0;
    cursor: move;
    margin-bottom: 0px !important;
    border: none;
    border-bottom: 1px solid #ddd;
}

div.workflow div.wf-side-panel ul.workers-list li.list-group-item:last-child {
border-bottom: none;
}

div.workflow div.wf-side-panel li.list-group-item-highlight {
padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item.selected.active {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item span.label.turn-active {
cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group {
display: none;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group i {
padding: 0 3px;
    cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item:hover div.controls-group {
display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item:hover .row.active div.controls-group .remove-workflow {
display: none !important;
}

div.workflow div.wf-side-panel li.list-group-item:not(.active):hover {
background: #eee;
}

div.workflow div.wf-side-panel li.list-group-item:last-child {
border-bottom: 1px solid #ddd;
}

div.workflow div.wf-side-panel {
position: absolute;
    right: 0;
    top: 38px;
    width: 350px;
    background-color: #fff;
    z-index: 1;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow div.wf-side-panel .workers-list {
overflow: auto;
}

div.workflow div.wf-side-panel .panel {
/*width: 300px;*/
}

div.workflow div.wf-side-panel.toggled {
width: 0;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before,
div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    position: absolute;
    left: 60%;
    top: -7px;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:after {
border-color: transparent transparent #fff transparent;
}

div.workflow div.wf-side-panel .panel-heading li.dropdown ul.dropdown-menu:before {
border-color: transparent transparent #ccc transparent;
    top: -8px;
}

div.workflow div.wf-side-panel div.workers,
div.workflow div.wf-side-panel div.workflows {
overflow: auto;
}

div.workflow div.wf-side-panel .panel-heading .title {
font-weight: bold;
    display: inline-block;
    position: relative;
    top: 9px;
    padding-left: 10px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls {
list-style: none;
    margin: 0px;
    /*min-height: 37px;*/
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li {
margin-top: 7px;
    float: left;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a {
padding: 10px 2px 12px;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a i {
min-width: 24px;
    text-align: center;
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls>li>a:hover {
background-color: rgba(51, 51, 51, 0.1);
}

div.workflow div.wf-side-panel .panel-heading ul.c-controls ul.dropdown-menu li:hover {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item {
padding-left: 0;
    padding-right: 0;
    cursor: move;
    margin-bottom: 0px !important;
    border: none;
    border-bottom: 1px solid #ddd;
}

div.workflow div.wf-side-panel ul.workers-list li.list-group-item:last-child {
border-bottom: none;
}

div.workflow div.wf-side-panel li.list-group-item-highlight {
padding: 20px 15px;
    background-color: rgba(0, 0, 0, 0.1);
    display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item.selected.active {
color: #fff;
}

div.workflow div.wf-side-panel li.list-group-item span.label.turn-active {
cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group {
display: none;
}

div.workflow div.wf-side-panel li.list-group-item div.controls-group i {
padding: 0 3px;
    cursor: pointer;
}

div.workflow div.wf-side-panel li.list-group-item:hover div.controls-group {
display: block !important;
}

div.workflow div.wf-side-panel li.list-group-item:hover .row.active div.controls-group .remove-workflow {
display: none !important;
}

div.workflow div.wf-side-panel li.list-group-item:not(.active):hover {
background: #eee;
}

div.workflow div.wf-side-panel li.list-group-item:last-child {
border-bottom: 1px solid #ddd;
}



/*
 * CSS for template: add-list-group-item.tpl
 * Source: javascripts/templates/modular/builder/components/add-list-group-item.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item:hover .set_current {
opacity: 1;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item {
padding: 2px 3px;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item span.history-time {
position: relative;
    top: 6px;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item:hover .set_current {
opacity: 1;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item {
padding: 2px 3px;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item span.history-time {
position: relative;
    top: 6px;
}

li.list-group-item.sl-ext-item {
z-index: 2000;
}

li.list-group-item.sl-ext-item.ui-draggable-dragging img {
height: 100px;
}

div.workflow-modal li.field-item .op-ellipsis-menu li.list-group-item:hover {
background: #f5f5f5;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item:hover .set_current {
opacity: 1;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item {
padding: 2px 3px;
}

div#wf-execute-workflow-node-modal li.field-item .value-history li.list-group-item span.history-time {
position: relative;
    top: 6px;
}

li.list-group-item.sl-ext-item {
z-index: 2000;
}

li.list-group-item.sl-ext-item.ui-draggable-dragging img {
height: 100px;
}



/*
 * CSS for template: wf-collection-body-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-collection-body-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.d3view-generic-modal-container.wf-collection .collection-body {
display: flex;
    flex-wrap: wrap;
}

.wf-collection .filters .ui-options {
display: none;
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - position relative for floating bar (match modelassembler) */
.wf-collection .wf-collection-body-inner {
    position: relative;
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - workflows found count below search wrap */
.wf-collection .wf-collection-results-count {
    margin: 5px 0;
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - floating bar style matching modelassembler (dashboard-floating-bar) */
.wf-collection .wf-collection-floating-bar {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    width: calc(100% - 30px);
    margin: 0 15px;
    z-index: 100;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 11px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: wf-collection-floating-bar-slideDown 0.2s ease-out;
}

@keyframes wf-collection-floating-bar-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - filter row: show only Filter button + badge (match modelassembler); hide Filters label */
.wf-collection .wf-collection-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.wf-collection .wf-collection-ext-filters .d3view-filter-button .clear-search {
    display: none;
}

/** Padding-left on ext-filters search input so it does not overlap search-type-dd (match modelassembler dashboard) */
.wf-collection .wf-collection-search-type-dd ~ .wf-collection-ext-filters input[data-search-input] {
    padding-left: 110px;
}

div.d3view-generic-modal-container.wf-collection .collection-body {
display: flex;
    flex-wrap: wrap;
}

.wf-collection .filters .ui-options {
display: none;
}



/*
 * CSS for template: wf-drag-helper-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-drag-helper-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.drag-helper {
text-align: center;
    cursor: grab;
    z-index: 2051;
    pointer-events: none;
    width: 50px !important;
}

div.drag-helper .worker-icon {
width: 50px;
    height: 45px;
    border: 3px dotted #ddd;
    border-radius: 3px;
    text-align: center;
    font-size: 1.6em;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.drag-helper .worker-label {
font-size: 1.1em;
    color: gray;
}

div.drag-helper {
text-align: center;
    cursor: grab;
    z-index: 2051;
    pointer-events: none;
    width: 50px !important;
}

div.drag-helper .worker-icon {
width: 50px;
    height: 45px;
    border: 3px dotted #ddd;
    border-radius: 3px;
    text-align: center;
    font-size: 1.6em;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.drag-helper .worker-label {
font-size: 1.1em;
    color: gray;
}



/*
 * CSS for template: wf-generic-logs-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-generic-logs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .d3view-wf-generic-logs .wf-logs.no-data tbody:after {
content: 'No logs available.';
    display: block;
    padding: 15px;
    font-size: 1.2em;
    text-align: center;
}


/* DW-2867 — JSON input sourced from another worker type's inputs.
   Scoped to `.wf-json-from-worker` (not `.wf-workflow-builder`) because the configure
   panel renders inside a modal/sidebar that sits outside the builder root. */

.wf-json-from-worker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.04));
    transition: var(--d3v-t-fast, 150ms ease);
}

.wf-json-from-worker:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(0,0,0,0.06));
}

.wf-json-from-worker .wf-jfw-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #6b7280);
    padding: 4px 0;
    border-bottom: 1px dashed var(--d3v-border-subtle, #e5e7eb);
}

.wf-json-from-worker .wf-jfw-header i.fa,
.wf-json-from-worker .wf-jfw-header i {
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 13px;
}

.wf-json-from-worker .wf-jfw-header b {
    color: var(--d3v-text-primary, #111827);
    font-weight: 600;
}

.wf-json-from-worker .wf-jfw-header .wf-jfw-header-label {
    color: var(--d3v-text-secondary, #6b7280);
}

.wf-json-from-worker .wf-jfw-header select.wf-jfw-worker-select {
    display: none !important;
}

.wf-json-from-worker .wf-jfw-header .select2-container {
    min-width: 220px;
}

.wf-json-from-worker .wf-jfw-header .select2-container .select2-choice {
    height: 28px;
    line-height: 26px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-primary, #fff);
    padding: 0 26px 0 10px;
    color: var(--d3v-text-primary, #111827);
    font-weight: 500;
    font-size: 12px;
}

.wf-json-from-worker .wf-jfw-header .select2-container .select2-choice .select2-arrow {
    border: none;
    background: transparent;
}

.wf-json-from-worker .wf-jfw-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
}

.wf-json-from-worker .wf-jfw-table thead th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-tertiary, #9ca3af);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-subtle, #f9fafb);
}

.wf-json-from-worker .wf-jfw-table thead th.wf-jfw-th-name {
    width: 38%;
    border-top-left-radius: var(--d3v-r-sm, 4px);
}

.wf-json-from-worker .wf-jfw-table thead th.wf-jfw-th-value {
    border-top-right-radius: var(--d3v-r-sm, 4px);
}

.wf-json-from-worker .wf-jfw-row {
    transition: var(--d3v-t-fast, 150ms ease);
}

.wf-json-from-worker .wf-jfw-row:hover {
    background: var(--d3v-bg-hover, #f3f4f6);
}

.wf-json-from-worker .wf-jfw-row + .wf-jfw-row td {
    border-top: 1px solid var(--d3v-border-subtle, #e5e7eb);
}

.wf-json-from-worker .wf-jfw-name {
    padding: 8px 10px;
    vertical-align: middle;
    color: var(--d3v-text-primary, #111827);
    height: auto !important;
}

.wf-json-from-worker .wf-jfw-name .wf-jfw-icon {
    color: var(--d3v-accent-primary, #2563eb);
    margin-right: 8px;
    width: 14px;
    display: inline-block;
    text-align: center;
}

.wf-json-from-worker .wf-jfw-name .wf-jfw-label {
    font-weight: 500;
    word-break: break-word;
}

.wf-json-from-worker .wf-jfw-value {
    padding: 6px 10px;
    vertical-align: middle;
    height: auto !important;
}

/* Neutralize FormBuilder's `full-h` + inherited modal heights that inflate each cell. */
.wf-json-from-worker .wf-jfw-value .d3view-form-builder-container,
.wf-json-from-worker .wf-jfw-value .d3view-inputsBuilder,
.wf-json-from-worker .wf-jfw-value .inputs-builder-container,
.wf-json-from-worker .wf-jfw-value .inputs-list,
.wf-json-from-worker .wf-jfw-value .inputs-tab,
.wf-json-from-worker .wf-jfw-value .all-inputs-container,
.wf-json-from-worker .wf-jfw-value .all-inputs-body,
.wf-json-from-worker .wf-jfw-value .input-tab-content,
.wf-json-from-worker .wf-jfw-value .inputs-tabs-view,
.wf-json-from-worker .wf-jfw-value .inputs-view-content,
.wf-json-from-worker .wf-jfw-value .full-h {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
}

.wf-json-from-worker .wf-jfw-value .formbuilder-dz,
.wf-json-from-worker .wf-jfw-value .ib-backdrop,
.wf-json-from-worker .wf-jfw-value .fb-spinner,
.wf-json-from-worker .wf-jfw-value .no_message,
.wf-json-from-worker .wf-jfw-value .inputs-builder-header,
.wf-json-from-worker .wf-jfw-value .inputs-builder-footer,
.wf-json-from-worker .wf-jfw-value ul#field-items > .field-item + .field-item {
    display: none !important;
}

.wf-json-from-worker .wf-jfw-value ul#field-items,
.wf-json-from-worker .wf-jfw-value ul.field-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.wf-json-from-worker .wf-jfw-value li.field-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
}

.wf-json-from-worker .wf-jfw-value li.field-item > .row {
    margin: 0 !important;
}

/* Hide FormBuilder's own icon+name column — left column of our table already shows them */
.wf-json-from-worker .wf-jfw-value li.field-item .col-md-5.input-name,
.wf-json-from-worker .wf-jfw-value li.field-item .input-name {
    display: none !important;
}

/* Promote the FB value column to full width */
.wf-json-from-worker .wf-jfw-value li.field-item .col-md-7.input-value-container,
.wf-json-from-worker .wf-jfw-value li.field-item .input-value-container {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    float: none !important;
}

.wf-json-from-worker .wf-jfw-value .input-group.input-value {
    margin: 0 !important;
    width: 100% !important;
}

.wf-json-from-worker .wf-jfw-value input.form-control,
.wf-json-from-worker .wf-jfw-value select.form-control,
.wf-json-from-worker .wf-jfw-value textarea.form-control,
.wf-json-from-worker .wf-jfw-value .input-group input,
.wf-json-from-worker .wf-jfw-value .input-group select,
.wf-json-from-worker .wf-jfw-value .input-group textarea {
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    transition: var(--d3v-t-fast, 150ms ease);
    width: 100% !important;
    box-sizing: border-box;
}

.wf-json-from-worker .wf-jfw-value input.form-control:focus,
.wf-json-from-worker .wf-jfw-value select.form-control:focus,
.wf-json-from-worker .wf-jfw-value textarea.form-control:focus {
    border-color: var(--d3v-accent-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--d3v-accent-soft, rgba(37, 99, 235, 0.15));
    outline: none;
}

.wf-json-from-worker .wf-jfw-value textarea.form-control {
    min-height: 60px;
    height: auto;
}

.wf-json-from-worker .wf-jfw-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d3v-status-warning-bg, #fff6e0);
    color: var(--d3v-status-warning, #b07502);
    border: 1px solid var(--d3v-status-warning-border, #f2c770);
    border-radius: var(--d3v-r-md, 6px);
    font-size: 12px;
}

.wf-json-from-worker .wf-jfw-warning i.fa {
    font-size: 14px;
}


/*
 * CSS for template: wf-log-item-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-log-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-nav-menu-wrapper .wf-logs>.wf-log-item {
height: 40px;
}

div.workflow .wf-nav-menu-wrapper .wf-logs>.wf-log-item span.timestamp {
font-weight: bold;
}

div.workflow .wf-nav-menu-wrapper .wf-logs>.wf-log-item {
height: 40px;
}

div.workflow .wf-nav-menu-wrapper .wf-logs>.wf-log-item span.timestamp {
font-weight: bold;
}

div.wf-logs .wf-log-item {
height: 50px !important;
}

div.wf-logs .wf-log-item td {
vertical-align: middle;
}

/* Phase 21.4.A — mutation row distinct styling.
   Border accent + subtle background + fa-history icon on the type label.
   Applied wherever log rows render (sidebar Logs tab, enlarge modal,
   footer ActivitiesView) since they all use the same data-log-type attr. */
div.wf-logs .wf-log-item[data-log-type="mutation"] {
border-left: 3px solid #00bcd4;
background: rgba(0, 188, 212, 0.05);
}

div.wf-logs .wf-log-item[data-log-type="mutation"] td:nth-child(2) .label::before {
content: "\f1da ";
font-family: FontAwesome;
margin-right: 4px;
}

/* Phase 21.4.A — category filter pill bar.
   Sits above the log table in the sidebar Logs tab. */
.wf-log-categories {
display: flex;
gap: 4px;
margin-bottom: 8px;
flex-wrap: wrap;
}

.wf-log-categories .wf-log-cat-btn {
flex: 0 0 auto;
font-size: 11px;
padding: 2px 8px;
}

.wf-log-categories .wf-log-cat-btn.active {
background: #337ab7;
color: white;
border-color: #2e6da4;
}

.wf-log-categories .wf-log-cat-btn[data-cat="mutation"].active {
background: #00bcd4;
border-color: #00acc1;
}

/* Phase 21.4.A — category-filter hide. Used in-place by
   LeftNavFloatingContentView.onLogCategoryClick to toggle row visibility
   without re-rendering the lazy-loaded table. */
.wf-log-item.cat-hidden {
display: none !important;
}



/*
 * CSS for template: wf-name-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-name-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-name-container {
/*background: #4f5359;*/
    /*color: #FFF;*/
    /*padding: 5px 10px;*/
    max-width: unset;
    display: flex;
    align-items: center;
    /*border: 1px solid #4f5359;*/
}

div.workflow .wf-main-container .wf-name {
/*color: #FFF;*/
    /*margin: 0 5px;*/
    text-decoration: none;
    /*!*font-size: 1.4em;*!*/
    /*border-bottom: none;*/
    /*!*max-width: 250px;*!*/
    /*display: inline-block;*/
    /*!*padding: 6px 0;*!*/
    /*!*max-width: 100%;*!*/
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*font-weight: 500;*/
    /*font-size: 1.1em;*/
    color: inherit;
}

div.workflow .wf-main-container .wf-name:hover {
color: #428bca;
}

div.workflow .wf-main-container .wf-name-container:hover .edit-wf-name {
opacity: 1 !important;
}

div.workflow div.flow-container div.wf-header span.wf-name {
position: relative;
    top: 6px;
}

div.workflow .wf-name-container {
/*background: #4f5359;*/
    /*color: #FFF;*/
    /*padding: 5px 10px;*/
    max-width: unset;
    display: flex;
    align-items: center;
    /*border: 1px solid #4f5359;*/
}

div.workflow .wf-main-container .wf-name {
/*color: #FFF;*/
    /*margin: 0 5px;*/
    text-decoration: none;
    /*!*font-size: 1.4em;*!*/
    /*border-bottom: none;*/
    /*!*max-width: 250px;*!*/
    /*display: inline-block;*/
    /*!*padding: 6px 0;*!*/
    /*!*max-width: 100%;*!*/
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*font-weight: 500;*/
    /*font-size: 1.1em;*/
    color: inherit;
}

div.workflow .wf-main-container .wf-name:hover {
color: #428bca;
}

div.workflow .wf-main-container .wf-name-container:hover .edit-wf-name {
opacity: 1 !important;
}

div.workflow div.flow-container div.wf-header span.wf-name {
position: relative;
    top: 6px;
}

div.workflow .wf-collection-container .wf-panel .wf-name {
font-size: 1.3em;
    font-weight: bold;
    color: #333 !important;
    flex: 1 1 auto;
    margin-bottom: 0;
}

div.workflow .wf-name-container {
/*background: #4f5359;*/
    /*color: #FFF;*/
    /*padding: 5px 10px;*/
    max-width: unset;
    display: flex;
    align-items: center;
    /*border: 1px solid #4f5359;*/
}

div.workflow .wf-main-container .wf-name {
/*color: #FFF;*/
    /*margin: 0 5px;*/
    text-decoration: none;
    /*!*font-size: 1.4em;*!*/
    /*border-bottom: none;*/
    /*!*max-width: 250px;*!*/
    /*display: inline-block;*/
    /*!*padding: 6px 0;*!*/
    /*!*max-width: 100%;*!*/
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*font-weight: 500;*/
    /*font-size: 1.1em;*/
    color: inherit;

    max-width: calc(100vw - 150px);
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow .wf-main-container .wf-name:hover {
color: #428bca;
}

div.workflow .wf-main-container .wf-name-container:hover .edit-wf-name {
opacity: 1 !important;
}

div.workflow div.flow-container div.wf-header span.wf-name {
position: relative;
    top: 6px;
}

div.workflow .wf-collection-container .wf-panel .wf-name {
font-size: 1.3em;
    font-weight: bold;
    color: #333 !important;
    flex: 1 1 auto;
    margin-bottom: 0;
}


/* DW-2860 | Preprocessor Debug sidebar — scoped under the sidebar root class since
   Plugins.Views.GenericSidebarView appends to <body>, not under a plugin root. */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .content-wrapper {
    padding: 0 !important;
    background: var(--d3v-bg-muted, #f7f8fa);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug {
    font-size: 13px;
    color: var(--d3v-text-primary, #1f2937);
    background: var(--d3v-bg-muted, #f7f8fa);
}

/* ─────────── Header ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-head {
    padding: 12px 18px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-actions .btn {
    border-radius: var(--d3v-r-sm, 4px);
    font-weight: 500;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    line-height: 1.4;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-ok {
    background: rgba(16, 185, 129, .08);
    color: var(--d3v-status-success, #047857);
    border-color: rgba(16, 185, 129, .2);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-warn {
    background: rgba(245, 158, 11, .08);
    color: var(--d3v-status-warning, #b45309);
    border-color: rgba(245, 158, 11, .22);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-err {
    background: rgba(239, 68, 68, .08);
    color: var(--d3v-status-danger, #b91c1c);
    border-color: rgba(239, 68, 68, .22);
}

/* ─────────── Body ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-list {
    width: 240px;
    min-width: 240px;
    background: var(--d3v-bg-primary, #fff);
    border-right: 1px solid var(--d3v-border-subtle, #e4e7eb);
    padding: 8px 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item {
    padding: 10px 14px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item:hover {
    background: var(--d3v-bg-muted, #f3f4f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item.active {
    background: rgba(59, 130, 246, .06);
    border-left-color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-name i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 11px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-edge {
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-meta {
    display: flex;
    gap: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-ok {
    background: rgba(16, 185, 129, .1);
    color: var(--d3v-status-success, #047857);
    border-color: rgba(16, 185, 129, .22);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-warn {
    background: rgba(245, 158, 11, .12);
    color: var(--d3v-status-warning, #b45309);
    border-color: rgba(245, 158, 11, .24);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-err {
    background: rgba(239, 68, 68, .12);
    color: var(--d3v-status-danger, #b91c1c);
    border-color: rgba(239, 68, 68, .24);
}

/* ─────────── Main (tabs) ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-main {
    background: var(--d3v-bg-muted, #f7f8fa);
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs {
    margin: 0;
    padding: 0 16px;
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    color: var(--d3v-text-secondary, #4b5563);
    background: transparent;
    font-weight: 500;
    border-radius: 0;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li > a:hover {
    color: var(--d3v-accent-primary, #3b82f6);
    background: transparent;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li.active > a {
    color: var(--d3v-accent-primary, #3b82f6);
    border-bottom-color: var(--d3v-accent-primary, #3b82f6);
    background: transparent;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-main-body {
    padding: 16px;
    min-height: 0;
}

/* ─────────── Cards / KV ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border-subtle, #eef0f3);
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-secondary, #374151);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-header i {
    color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-body {
    padding: 12px 14px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--d3v-border-subtle, #eef0f3);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row:last-child { border-bottom: 0; }

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row > label {
    color: var(--d3v-text-muted, #6b7280);
    font-weight: 500;
    margin: 0;
}

/* ─────────── Stats grid ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.1;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-label {
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-ok .wf-pp-stat-num { color: var(--d3v-status-success, #047857); }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-warn .wf-pp-stat-num { color: var(--d3v-status-warning, #b45309); }

/* ─────────── Tables ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > thead > tr > th {
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > tbody > tr > td {
    padding: 8px 10px;
    vertical-align: top;
    border-top: 1px solid var(--d3v-border-subtle, #eef0f3);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > tbody > tr:first-child > td {
    border-top: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-warn {
    background: rgba(245, 158, 11, .05);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-ok:hover,
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-warn:hover {
    background: rgba(59, 130, 246, .04);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-input-name {
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-source-kind {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-parent-workflow { color: #7c3aed; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-upstream-remote { color: #2563eb; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-data-collector { color: #0891b2; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-assignment-map { color: #059669; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-unmapped { color: var(--d3v-status-warning, #b45309); }

/* ─────────── Values / code / json ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-code {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    color: var(--d3v-text-secondary, #4b5563);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-muted {
    color: var(--d3v-text-muted, #6b7280);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-cell {
    max-width: 480px;
    min-width: 260px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell {
    max-height: 320px;
    overflow: auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell .generic-worker-output-view,
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell .form-group {
    margin: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-meta {
    font-size: 11px;
    color: var(--d3v-status-warning, #b45309);
    padding: 6px 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-meta i {
    margin-right: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    padding: 6px 8px;
    margin: 0;
    background: var(--d3v-bg-muted, #f3f4f6);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-primary, #111827);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow: auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-json {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    padding: 10px 12px;
    margin: 0;
    background: var(--d3v-bg-muted, #f3f4f6);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-err-text {
    color: var(--d3v-status-danger, #b91c1c);
    font-weight: 500;
}

/* ─────────── Tags ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(59, 130, 246, .08);
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 11px;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 2px;
    border: 1px solid rgba(59, 130, 246, .18);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-tag.wf-pp-tag-subtle {
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #4b5563);
    border-color: var(--d3v-border-subtle, #e4e7eb);
}

/* ─────────── Empty state ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-empty {
    padding: 24px;
    text-align: center;
    color: var(--d3v-text-muted, #6b7280);
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px dashed var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-empty i {
    color: var(--d3v-accent-primary, #3b82f6);
    margin-right: 6px;
}

/* ─────────── Logs ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 10px;
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-toolbar .wf-pp-log-count i {
    margin-right: 6px;
    color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-list {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11.5px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry {
    padding: 6px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #eef0f3);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry:last-child { border-bottom: 0; }

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry:hover {
    background: rgba(59, 130, 246, .04);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-time {
    color: var(--d3v-text-muted, #9ca3af);
    flex: 0 0 auto;
    min-width: 100px;
    cursor: help;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-type {
    flex: 0 0 auto;
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-type .label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-msg {
    color: var(--d3v-text-primary, #111827);
    word-break: break-word;
    line-height: 1.5;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-warning .wf-pp-log-msg { color: var(--d3v-status-warning, #b45309); }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-error .wf-pp-log-msg { color: var(--d3v-status-danger, #b91c1c); }


/*
 * CSS for template: wf-shapes-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-shapes-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-nav-menu-wrapper ul.wf-shapes,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers {
display: flex;
    flex-wrap: wrap;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li {
display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: calc(50% - 6px);
    border: 1px solid #736f6f;
    margin: 3px;
    text-align: center;
    cursor: move;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li.dragging,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li.dragging {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu .wf-shapes li:not(.list-header),
div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) {
display: inline;
    padding: 0 10px;
    cursor: move;
    position: relative;
}

div.workflow .wf-nav-menu .wf-shapes li[data-id="data-collector-worker"]:after {
content: 'DC';
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 7px;
    pointer-events: none;
}

div.workflow div.flow-container div.wf-header .wf-shapes {
margin-top: 4px;
    margin-bottom: 0;
    margin-right: 10px;
    border-left: 1px solid #ddd;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li,
div.workflow div.flow-container div.wf-header .wf-managers>li {
display: inline;
    padding: 0 10px;
    z-index: 1051;
    position: relative;
    cursor: pointer;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li i,
div.workflow div.flow-container div.wf-header .wf-managers>li i {
font-size: 1.65em;
    color: #428bca;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="start-worker"]:after {
content: 'S';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="end-worker"]:after {
content: 'E';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers {
display: flex;
    flex-wrap: wrap;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li {
display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: calc(50% - 6px);
    border: 1px solid #736f6f;
    margin: 3px;
    text-align: center;
    cursor: move;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li.dragging,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li.dragging {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu .wf-shapes li:not(.list-header),
div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) {
display: inline;
    padding: 0 10px;
    cursor: move;
    position: relative;
}

div.workflow .wf-nav-menu .wf-shapes li[data-id="data-collector-worker"]:after {
content: 'DC';
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 7px;
    pointer-events: none;
}

div.workflow div.flow-container div.wf-header .wf-shapes {
margin-top: 4px;
    margin-bottom: 0;
    margin-right: 10px;
    border-left: 1px solid #ddd;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li,
div.workflow div.flow-container div.wf-header .wf-managers>li {
display: inline;
    padding: 0 10px;
    z-index: 1051;
    position: relative;
    cursor: pointer;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li i,
div.workflow div.flow-container div.wf-header .wf-managers>li i {
font-size: 1.65em;
    color: #428bca;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="start-worker"]:after {
content: 'S';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="end-worker"]:after {
content: 'E';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow .top-settings-container .wf-shapes-list .wf-shapes {
display: flex;
    width: 100%;
    padding-top: 10px;
    /** Added by Shashank on 2026-06-25 - R0-3171 - keep the shapes on ONE row and scroll horizontally when they
     *  overflow the header width (instead of wrapping/clipping). The scrollable strip is .wf-shapes-list below. **/
    flex-wrap: nowrap;
    margin-bottom: 0;
}

div.workflow .top-settings-container .wf-shapes-list .wf-shapes li {
width: 50px;
    padding: 0 10px;
    border: 1px solid #DDD;
    margin-right: 10px;
    font-size: 1.3em;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    cursor: move;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers {
display: flex;
    flex-wrap: wrap;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li {
display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: calc(50% - 6px);
    border: 1px solid #736f6f;
    margin: 3px;
    text-align: center;
    cursor: move;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li.dragging,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li.dragging {
background-color: #d3f4ff73;
}

div.workflow .wf-nav-menu .wf-shapes li:not(.list-header),
div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) {
display: inline;
    padding: 0 10px;
    cursor: move;
    position: relative;
}

div.workflow .wf-nav-menu .wf-shapes li[data-id="data-collector-worker"]:after {
content: 'DC';
    position: absolute;
    top: 6px;
    left: 12px;
    font-size: 7px;
    pointer-events: none;
}

div.workflow div.flow-container div.wf-header .wf-shapes {
margin-top: 4px;
    margin-bottom: 0;
    margin-right: 10px;
    border-left: 1px solid #ddd;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li,
div.workflow div.flow-container div.wf-header .wf-managers>li {
display: inline;
    padding: 0 10px;
    z-index: 1051;
    position: relative;
    cursor: pointer;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li i,
div.workflow div.flow-container div.wf-header .wf-managers>li i {
font-size: 1.65em;
    color: #428bca;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="start-worker"]:after {
content: 'S';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow div.flow-container div.wf-header .wf-shapes>li[data-id="end-worker"]:after {
content: 'E';
    pointer-events: none;
    position: absolute;
    left: 14px;
    top: -4px;
}

div.workflow .top-settings-container .wf-shapes-list .wf-shapes {
display: flex;
    width: 100%;
    padding-top: 10px;
    /** Added by Shashank on 2026-06-25 - R0-3171 - keep the shapes on ONE row and scroll horizontally when they
     *  overflow the header width (instead of wrapping/clipping). The scrollable strip is .wf-shapes-list below. **/
    flex-wrap: nowrap;
    margin-bottom: 0;
}

div.workflow .top-settings-container .wf-shapes-list .wf-shapes li {
width: 50px;
    padding: 0 10px;
    border: 1px solid #DDD;
    margin-right: 10px;
    font-size: 1.3em;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    cursor: move;
    color: var(--d3v-text-muted);
}



/* Legacy fallback for viz-info-col (replaces inline style) */
div.workflow .viz-list-item .viz-info-col {
    flex: 1 1 auto;
    margin-left: 8px;
}

/* ================================================================
   MODERN DESIGN — Shapes & Input-Workers panels
   Matches the workers-list-container modern pattern
   ================================================================ */

/* -- Panel container (full-height flex) -- */
div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--wf-bg-surface);
}

/* -- Search bar container -- */
div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search > .search-container {
    padding: 12px 12px 0;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-surface);
    transition: var(--wf-t-fast);
    display: flex;
    align-items: center;
    overflow: hidden;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon:focus-within {
    border-color: var(--wf-border-focus, var(--wf-accent));
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon .fa-search {
    position: static !important;
    padding: 0 0 0 12px !important;
    color: var(--wf-text-muted);
    font-size: 13px;
    z-index: auto !important;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    height: 38px;
    font-size: 13px;
    color: var(--wf-text-primary);
    padding: 0 12px;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon .form-control::placeholder {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon .close {
    position: static !important;
    padding: 0 12px !important;
    color: var(--wf-text-muted);
    font-size: 16px;
    opacity: 0.6;
    transition: var(--wf-t-fast);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .search-container .left-inner-addon .close:hover {
    color: var(--wf-accent);
    opacity: 1;
}

/* -- Tag pills -- */
div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .pl-search-tags {
    padding: 8px 12px 0;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 !important;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .pl-search-tags .label {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--wf-r-full);
    border: 1px solid transparent;
    margin: 0 !important;
    cursor: pointer;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .pl-search-tags .label:hover {
    border-color: var(--wf-accent);
    background: rgba(59, 130, 246, 0.15) !important;
}

div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search .pl-search-tags .label.active {
    background: var(--wf-accent) !important;
    color: white !important;
}

/* -- Scrollable list area -- */
div.workflow.wf-design-modern .wf-nav-tab-body > .simlytiks.pl-search > .ml-charts-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    height: auto !important;
}

/* -- Item list (grid of cards) -- */
div.workflow.wf-design-modern .wf-nav-tab-body .wf-shapes-list,
div.workflow.wf-design-modern .wf-nav-tab-body .wf-input-workers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* -- Item cards -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--wf-t-fast);
    list-style: none;
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item:hover {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: var(--wf-sh-xs);
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item.dragging {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* -- Item layout -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item > .pl-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* -- Thumbnail / icon -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-thumbnail {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wf-bg-tertiary, var(--wf-accent-light));
    border-radius: var(--wf-r-md);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-thumbnail span {
    font-size: 1.3em !important;
    color: var(--wf-text-secondary, #475569);
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-thumbnail img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
}

/* -- Info area -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-info-col {
    flex: 1 1 auto;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* -- Name -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--wf-text-primary);
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* -- Description -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-description {
    font-size: 11px;
    color: var(--wf-text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Tags -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .viz-tags .label {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--wf-r-full);
}

/* -- Select button -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .control-buttons {
    display: none;
}

/* -- Inline docs button -- */
div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .pl-inline-docs-trigger {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
    font-size: 12px;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-nav-tab-body .viz-list-item .pl-inline-docs-trigger:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* -- Legacy grid shapes (keep for old mode) -- */
div.workflow.wf-design-modern .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow.wf-design-modern .wf-nav-menu-wrapper ul#wf-viz-workers li {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-surface);
    transition: var(--wf-t-fast);
    padding: 12px 10px;
}

div.workflow.wf-design-modern .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow.wf-design-modern .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    box-shadow: var(--wf-sh-xs);
}

div.workflow.wf-design-modern .wf-nav-menu-wrapper ul.wf-shapes li.dragging,
div.workflow.wf-design-modern .wf-nav-menu-wrapper ul#wf-viz-workers li.dragging {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern div.flow-container div.wf-header .wf-shapes {
    border-left-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern .top-settings-container .wf-shapes-list .wf-shapes li {
    border-color: var(--wf-border) !important;
    border-radius: var(--wf-r-md);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .top-settings-container .wf-shapes-list .wf-shapes li:hover {
    border-color: var(--wf-accent) !important;
    background: var(--wf-accent-light);
}


/** Added by Shashank on 2026-06-25 - R0-3171 - make the in-header shapes a single horizontally-scrollable
 *  strip. The container must be allowed to shrink below its content (min-width:0) and own the overflow, else
 *  ul.wf-shapes (width:100%) just grows the header and never shows a scrollbar. **/
div.workflow .top-settings-container .wf-shapes-list {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/** Added by Shashank on 2026-06-25 - R0-3171 - modern, unobtrusive horizontal scrollbar for the in-header
 *  shapes strip: thin, rounded, and only visible on hover/scroll (transparent thumb at rest). **/
div.workflow .top-settings-container .wf-shapes-list {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.2s ease;
}
div.workflow .top-settings-container .wf-shapes-list:hover {
    scrollbar-color: var(--d3v-border-strong, #cbd5e1) transparent;
}
div.workflow .top-settings-container .wf-shapes-list::-webkit-scrollbar {
    height: 6px;
}
div.workflow .top-settings-container .wf-shapes-list::-webkit-scrollbar-track {
    background: transparent;
}
div.workflow .top-settings-container .wf-shapes-list::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
    transition: background 0.2s ease;
}
div.workflow .top-settings-container .wf-shapes-list:hover::-webkit-scrollbar-thumb {
    background: var(--d3v-border-strong, #cbd5e1);
}

/*
 * CSS for template: wf-side-panel-list-container.tpl
 * Source: javascripts/templates/modular/builder/components/wf-side-panel-list-container.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-add-nodes-flex-modal .modal-body div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

div#wf-add-nodes-flex-modal .modal-body div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

div#wf-add-nodes-flex-modal .modal-body div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

.wf-error-modal .enhanced-error-container .collapsible-section .panel {
border: none;
}



/** Added by shashank2104 on 06/23/2026 - CS-469 - Structural-change notice for the Text Parameterize worker (inline alert + modal body). **/
/** Updated by shashank2104 on 06/24/2026 - CS-469 - modernized: what-was -> what-is comparison + described choices. **/

.wf-tpsc-alert {
    font-size: 13px;
    color: var(--d3v-text-secondary, #52606d);
}

/* Inline (in-worker) variant keeps the boxed warning look; modal variant is borderless (modal supplies the chrome). */
.wf-tpsc-alert.wf-tpsc-mode-inline {
    padding: 14px 16px;
    margin: 0 0 12px 0;
    background: var(--d3v-status-warning-bg, #fff8e6);
    border: 1px solid var(--d3v-status-warning-border, var(--d3v-status-warning, #e0a800));
    border-left: 3px solid var(--d3v-status-warning, #e0a800);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}
.wf-tpsc-alert.wf-tpsc-mode-modal { padding: 4px 2px; }

/* Header: icon + title + message */
.wf-tpsc-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.wf-tpsc-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--d3v-status-warning-bg, #fff8e6);
    color: var(--d3v-status-warning, #e0a800);
    font-size: 16px;
}
.wf-tpsc-mode-inline .wf-tpsc-icon { width: auto; height: auto; background: none; }
.wf-tpsc-headtext { flex: 1 1 auto; min-width: 0; }
.wf-tpsc-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--d3v-text-primary, #1f2933);
    margin-bottom: 4px;
}
.wf-tpsc-msg { font-size: 12.5px; line-height: 1.55; }
.wf-tpsc-msg strong, .wf-tpsc-choice strong { color: var(--d3v-text-primary, #1f2933); font-weight: 600; }

/* Before -> After comparison */
.wf-tpsc-compare {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 14px 0 4px;
}
.wf-tpsc-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border-light, #e4e7eb);
    background: var(--d3v-bg-secondary, #f5f7fa);
}
.wf-tpsc-col-now {
    background: var(--d3v-status-warning-bg, #fff8e6);
    border-color: var(--d3v-status-warning-border, #f0d98a);
}
.wf-tpsc-col-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--d3v-text-tertiary, #7b8794);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-tpsc-col-now .wf-tpsc-col-label { color: var(--d3v-status-warning, #b7791f); }
.wf-tpsc-metric {
    font-size: 12px;
    color: var(--d3v-text-secondary, #52606d);
    line-height: 1.7;
}
.wf-tpsc-num {
    font-weight: 700;
    font-size: 15px;
    color: var(--d3v-text-primary, #1f2933);
    margin-right: 3px;
}
.wf-tpsc-col-now .wf-tpsc-num { color: var(--d3v-status-warning, #b7791f); }
.wf-tpsc-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--d3v-text-tertiary, #9aa5b1);
    font-size: 16px;
}

/* Described choices */
.wf-tpsc-choices {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-tpsc-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 9px 12px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f5f7fa);
    border: 1px solid var(--d3v-border-light, #e4e7eb);
}
.wf-tpsc-choice > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--d3v-accent-primary, #3498db);
    font-size: 13px;
}

/* Inline action buttons */
.wf-tpsc-actions { display: flex; gap: 8px; margin-top: 12px; }
.wf-tpsc-actions .btn { transition: var(--d3v-t-fast, all 0.15s ease); }

/*
 * CSS for template: wf-viz-tpl.tpl
 * Source: javascripts/templates/modular/builder/components/wf-viz-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li i,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li i {
margin-right: 5px;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li i,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li i {
margin-right: 5px;
}

div.workflow .wf-nav-menu-wrapper ul.wf-shapes li i,
div.workflow .wf-nav-menu-wrapper ul#wf-viz-workers li i {
margin-right: 5px;
}



/*
 * CSS for template: wf-configure-node-inputs-list-tpl.tpl
 * Source: javascripts/templates/modular/builder/configuration/wf-configure-node-inputs-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="list"] li.field-item .ds-label {
display: block;
    text-align: left;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="list"] li.field-item .field-item-footer .user-default-value button {
text-align: left;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="list"] li.field-item .field-item-footer .user-default-value .dropdown-menu {
width: 100%;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="list"] li.field-item .ds-label {
display: block;
    text-align: left;
}



/*
 * CSS for template: wf-configure-node-inputs-tpl.tpl
 * Source: javascripts/templates/modular/builder/configuration/wf-configure-node-inputs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal div.input-groups ul.nav-tabs li {
float: right;
}

div#wf-execute-workflow-node-modal div.input-groups ul.nav-tabs li {
float: right;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row .dropdown-menu div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row .dropdown-menu div.select2-container {
width: 100% !important;
}

div#wf-execute-workflow-node-modal div.input-groups ul.nav-tabs li {
float: right;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .field-item-footer .user-default-value .dropdown-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .field-item-footer .user-default-value .dropdown-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .field-item-footer .user-default-value .dropdown-menu {
left: 0;
    right: unset;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row .dropdown-menu div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row .dropdown-menu div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource-options>.row .dropdown-menu div.select2-container {
width: 100% !important;
}

div.workflow-modal .wf-builder-inputs-list li.field-with-repeated-inputs.hasPopoverOpen {
    z-index: 2;
    position: relative;
}
div.workflow-modal .wf-builder-inputs-list li.field-with-repeated-inputs.hasPopoverOpen .carousel-inner {
    z-index: 31;
}
/*
 * CSS for template: wf-configure-node-user-input-compact-contents-tpl.tpl
 * Source: javascripts/templates/modular/builder/configuration/wf-configure-node-user-input-compact-contents-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-item-body {
border-radius: 5px;
    border: 1px solid #aaa;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-item-header {
margin-bottom: 10px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .edit-input-name {
opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item:hover .edit-input-name {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-right-menu {
opacity: 0;
    pointer-events: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item:hover .field-right-menu {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-item-body {
border-radius: 5px;
    border: 1px solid #aaa;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-item-header {
margin-bottom: 10px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .edit-input-name {
opacity: 0;
    cursor: pointer;
    pointer-events: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item:hover .edit-input-name {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item .field-right-menu {
opacity: 0;
    pointer-events: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item:hover .field-right-menu {
opacity: 1;
    pointer-events: all;
}



/*
 * CSS for template: wf-configure-node-user-input-repeated-carousel-tpl.tpl
 * Source: javascripts/templates/modular/builder/configuration/wf-configure-node-user-input-repeated-carousel-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-navigation-split-layout .no-breadcrumbs i {
font-size: 24px;
    color: #ccc;
    margin-bottom: 10px;
}

.simulations-popover .popover-title i {
margin-right: 8px;
    color: #007bff;
}

.simulations-popover .table-loading i {
font-size: 18px;
    margin-bottom: 10px;
    display: block;
}



/**
 * wf-configure-node-user-input-tpl.css
 * Added by shashank2104 on 2026-09-08
 *
 * Placeholder shown for worker inputs that have not been lazy-rendered yet.
 * Replaces the old per-input `fa fa-spin fa-refresh` marker: a worker with 48 inputs
 * painted 40+ simultaneous spinners, which reads as an error state rather than as
 * loading. A single pl-processing overlay now covers the worker body; each pending
 * input just reserves its space with a calm skeleton.
 *
 * .wf-input-pending also carries the reserved height that used to be an inline
 * `height: 200px` on the <li>, so LazyLoad still has a box to observe.
 *
 * SCOPING: the worker-config modal is body-mounted (BODY > .workflow-modal > .modal-dialog),
 * so it is NOT inside div.workflow. Scoping on div.workflow alone silently matches nothing
 * there. Both mount points are listed on every rule.
 */

.workflow-modal li.field-item.wf-input-pending,
div.workflow li.field-item.wf-input-pending {
    height: 200px;
    overflow: hidden;
    border-color: transparent;
    background: var(--d3v-bg-primary);
}

.workflow-modal li.field-item.wf-input-pending .wf-input-skeleton,
div.workflow li.field-item.wf-input-pending .wf-input-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.workflow-modal li.field-item.wf-input-pending .wf-input-skeleton-line,
div.workflow li.field-item.wf-input-pending .wf-input-skeleton-line {
    display: block;
    border-radius: var(--d3v-r-sm);
    background-color: var(--d3v-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--d3v-bg-secondary) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: wf-input-skeleton-sheen 1.4s ease-in-out infinite;
}

.workflow-modal li.field-item.wf-input-pending .wf-input-skeleton-label,
div.workflow li.field-item.wf-input-pending .wf-input-skeleton-label {
    width: 34%;
    height: 12px;
}

.workflow-modal li.field-item.wf-input-pending .wf-input-skeleton-field,
div.workflow li.field-item.wf-input-pending .wf-input-skeleton-field {
    width: 100%;
    height: 36px;
}

@keyframes wf-input-skeleton-sheen {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .workflow-modal li.field-item.wf-input-pending .wf-input-skeleton-line,
    div.workflow li.field-item.wf-input-pending .wf-input-skeleton-line {
        animation: none;
    }
}

/*
 * CSS for template: wf-configure-node-user-input-value-tpl.tpl
 * Source: javascripts/templates/modular/builder/configuration/wf-configure-node-user-input-value-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a i {
margin-right: 8px;
    width: 16px;
    text-align: center;
}


/**
 * Added by shashank2104 on 2026-05-08 - DW-2928
 * Author's note (customDescription) — workflow-author guidance for required empty inputs.
 *
 * UX: single-line italic help-text (Option A) — minimal vertical footprint.
 *  - Set state    : "💬 <text> ✎"  (~20px, hover reveals pencil)
 *  - Empty state  : subtle "✎ Add note for runners" link (~20px, qualifying inputs only)
 *  - Edit state   : inline textarea + Done button, toggled via .is-editing
 *
 * Scoped under .workflow / .workflow-modal / .workflow-page so the rules
 * only affect the workflow plugin surface.
 */

div.workflow .wf-input-author-note,
div.workflow-modal .wf-input-author-note,
.workflow-page .wf-input-author-note {
    margin-top: 6px;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.45;
}

/* --- Toggle: edit-row hidden by default --------------------------------- */

div.workflow .wf-input-author-note .wf-input-author-note-edit,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit,
.workflow-page .wf-input-author-note .wf-input-author-note-edit {
    display: none;
}

/* --- View row: SET state ------------------------------------------------ */

div.workflow .wf-input-author-note.has-content .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.has-content .wf-input-author-note-view,
.workflow-page .wf-input-author-note.has-content .wf-input-author-note-view {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--d3v-text-secondary, #5a6573);
    font-style: italic;
}

div.workflow .wf-input-author-note .wf-input-author-note-icon,
div.workflow-modal .wf-input-author-note .wf-input-author-note-icon,
.workflow-page .wf-input-author-note .wf-input-author-note-icon {
    color: var(--d3v-status-info, #4a90e2);
    font-size: 11px;
    flex: 0 0 auto;
    margin-top: 3px;
    opacity: 0.85;
}

div.workflow .wf-input-author-note .wf-input-author-note-text,
div.workflow-modal .wf-input-author-note .wf-input-author-note-text,
.workflow-page .wf-input-author-note .wf-input-author-note-text {
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

div.workflow .wf-input-author-note .wf-input-author-note-edit-btn,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-btn,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-btn {
    background: transparent;
    border: 0;
    padding: 0 4px;
    color: var(--d3v-text-subtle, #9aa3ad);
    font-size: 11px;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

div.workflow .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
div.workflow-modal .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
.workflow-page .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
div.workflow .wf-input-author-note .wf-input-author-note-edit-btn:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-btn:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-btn:focus {
    opacity: 1;
    color: var(--d3v-status-info, #4a90e2);
    outline: none;
}

/* --- View row: EMPTY state ('Add note' affordance) --------------------- */

div.workflow .wf-input-author-note.is-empty .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.is-empty .wf-input-author-note-view,
.workflow-page .wf-input-author-note.is-empty .wf-input-author-note-view {
    display: block;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn {
    background: transparent;
    border: 0;
    padding: 2px 0;
    color: var(--d3v-text-subtle, #9aa3ad);
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* Reveal the empty-state affordance only on row hover (or keyboard focus) so it
   stays out of the way until the author actually looks at the input. */
div.workflow li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn,
div.workflow-modal li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn,
.workflow-page li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn {
    opacity: 0.7;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn i,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn i,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn i {
    margin-right: 4px;
    font-size: 10px;
    font-style: normal;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn:hover,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn:hover,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn:hover,
div.workflow .wf-input-author-note .wf-input-author-note-add-btn:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn:focus {
    color: var(--d3v-status-info, #4a90e2);
    opacity: 1;
    outline: none;
}

/* --- Edit row ----------------------------------------------------------- */

div.workflow .wf-input-author-note .wf-input-author-note-textarea,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea {
    width: 100%;
    resize: vertical;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--d3v-border-default, rgba(0, 0, 0, 0.18));
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1f2937);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

div.workflow .wf-input-author-note .wf-input-author-note-textarea:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea:focus {
    outline: none;
    border-color: var(--d3v-status-info, #4a90e2);
    box-shadow: 0 0 0 3px var(--d3v-status-info-bg, rgba(70, 130, 230, 0.18));
}

div.workflow .wf-input-author-note .wf-input-author-note-textarea::placeholder,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea::placeholder,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea::placeholder {
    color: var(--d3v-text-subtle, #9aa3ad);
    font-style: italic;
}

div.workflow .wf-input-author-note .wf-input-author-note-edit-actions,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-actions,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-actions {
    margin-top: 4px;
    text-align: right;
}

div.workflow .wf-input-author-note .wf-input-author-note-done,
div.workflow-modal .wf-input-author-note .wf-input-author-note-done,
.workflow-page .wf-input-author-note .wf-input-author-note-done {
    color: var(--d3v-status-info, #4a90e2);
    font-size: 11px;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    text-decoration: none;
}

div.workflow .wf-input-author-note .wf-input-author-note-done:hover,
div.workflow-modal .wf-input-author-note .wf-input-author-note-done:hover,
.workflow-page .wf-input-author-note .wf-input-author-note-done:hover {
    text-decoration: underline;
}

/* --- is-editing overrides (must come LAST to win specificity-tie with
   the .has-content / .is-empty view rules above) ------------------------- */

div.workflow .wf-input-author-note.is-editing .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.is-editing .wf-input-author-note-view,
.workflow-page .wf-input-author-note.is-editing .wf-input-author-note-view {
    display: none;
}

div.workflow .wf-input-author-note.is-editing .wf-input-author-note-edit,
div.workflow-modal .wf-input-author-note.is-editing .wf-input-author-note-edit,
.workflow-page .wf-input-author-note.is-editing .wf-input-author-note-edit {
    display: block;
}

/* ================================================================
   DW-2774 — Modern Worker Config Modal
   Scoped under .workflow-modal.wf-design-modern — zero impact on classic.
   Modal lives outside div.workflow, so tokens are re-declared here.
   ================================================================ */


/* ----------------------------------------------------------------
   1. TOKEN DECLARATIONS (mirror wf-modern-tokens.css)
   The modal is appended to <body>, outside div.workflow,
   so --wf-* vars from wf-modern-tokens.css don't cascade in.
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern {
    --wf-n-50:   var(--d3v-n-50,  #F8FAFC);
    --wf-n-100:  var(--d3v-n-100, #F1F5F9);
    --wf-n-200:  var(--d3v-n-200, #E2E8F0);
    --wf-n-300:  var(--d3v-n-300, #CBD5E1);
    --wf-n-400:  var(--d3v-n-400, #94A3B8);
    --wf-n-500:  var(--d3v-n-500, #64748B);
    --wf-n-600:  var(--d3v-n-600, #475569);
    --wf-n-700:  var(--d3v-n-700, #334155);
    --wf-n-800:  var(--d3v-n-800, #1E293B);
    --wf-n-900:  var(--d3v-n-900, #0F172A);

    --wf-bg-canvas:    var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-surface:   var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-elevated:  var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-sidebar:   var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-input:     #F1F5F9;
    --wf-bg-card:      #F8FAFC;
    --wf-bg-card-hover:#F1F5F9;

    --wf-text-primary:   var(--d3v-text-primary,   #1E293B);
    --wf-text-secondary: var(--d3v-text-secondary,  #475569);
    --wf-text-muted:     var(--d3v-text-muted,      #94A3B8);
    --wf-text-disabled:  var(--d3v-n-300, #CBD5E1);

    --wf-border:        var(--d3v-border,        #E2E8F0);
    --wf-border-strong: var(--d3v-border-strong,  #CBD5E1);
    --wf-border-focus:  var(--d3v-accent,         #3B82F6);

    --wf-accent:       var(--d3v-accent,       #3B82F6);
    --wf-accent-hover: var(--d3v-accent-hover, #2563EB);
    --wf-accent-light: rgba(59, 130, 246, 0.10);
    --wf-accent-subtle:rgba(59, 130, 246, 0.05);

    --wf-success:      var(--d3v-success, #10B981);
    --wf-success-bg:   #D1FAE5;
    --wf-warning:      var(--d3v-warning, #F59E0B);
    --wf-warning-bg:   #FEF3C7;
    --wf-danger:       var(--d3v-danger, #EF4444);
    --wf-danger-bg:    #FEE2E2;

    --wf-node-coral:   #EF4444;
    --wf-node-blue:    #3B82F6;
    --wf-node-teal:    #14B8A6;
    --wf-node-gold:    #F59E0B;
    --wf-node-purple:  #8B5CF6;
    --wf-node-green:   #10B981;
    --wf-node-pink:    #EC4899;
    --wf-node-gray:    #94A3B8;
    --wf-node-orange:  #F97316;
    --wf-node-indigo:  #6366F1;

    --wf-sh-xs:  var(--d3v-sh-xs,  0 1px 2px rgba(0,0,0,0.05));
    --wf-sh-sm:  var(--d3v-sh-sm,  0 1px 3px rgba(0,0,0,0.08));
    --wf-sh-md:  var(--d3v-sh-md,  0 4px 12px rgba(0,0,0,0.10));
    --wf-sh-lg:  var(--d3v-sh-lg,  0 10px 25px rgba(0,0,0,0.12));

    --wf-r-sm:   var(--d3v-r-sm,   4px);
    --wf-r-md:   var(--d3v-r-md,   8px);
    --wf-r-lg:   var(--d3v-r-lg,   12px);
    --wf-r-xl:   var(--d3v-r-xl,   16px);

    --wf-t-fast:   var(--d3v-t-fast,   all 0.12s ease);
    --wf-t-base:   var(--d3v-t-base,   all 0.20s ease);
    --wf-t-smooth: var(--d3v-t-smooth, all 0.30s cubic-bezier(0.4, 0, 0.2, 1));

    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: var(--d3v-grad-accent, linear-gradient(135deg, #3B82F6 0%, #6366F1 100%));

    --wf-modal-sidebar-w: 56px;
}


/* ----------------------------------------------------------------
   1b. DARK MODE TOKEN OVERRIDES
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern.wf-dark {
    --wf-bg-canvas:     #1a1a2e;
    --wf-bg-surface:    #16213e;
    --wf-bg-elevated:   #1a2744;
    --wf-bg-sidebar:    #0f1629;
    --wf-bg-input:      #0f1629;
    --wf-bg-card:       #1a2744;
    --wf-bg-card-hover: #1f3050;

    --wf-text-primary:   #E2E8F0;
    --wf-text-secondary: #94A3B8;
    --wf-text-muted:     #64748B;
    --wf-text-disabled:  #475569;

    --wf-border:        rgba(148, 163, 184, 0.15);
    --wf-border-strong: rgba(148, 163, 184, 0.25);
    --wf-border-focus:  #60A5FA;

    --wf-accent-light:  rgba(59, 130, 246, 0.15);
    --wf-accent-subtle: rgba(59, 130, 246, 0.08);

    --wf-success-bg:    rgba(16, 185, 129, 0.15);
    --wf-warning-bg:    rgba(245, 158, 11, 0.15);
    --wf-danger-bg:     rgba(239, 68, 68, 0.15);

    --wf-sh-xs:  0 1px 2px rgba(0,0,0,0.20);
    --wf-sh-sm:  0 1px 3px rgba(0,0,0,0.30);
    --wf-sh-md:  0 4px 12px rgba(0,0,0,0.40);
    --wf-sh-lg:  0 10px 25px rgba(0,0,0,0.50);
}


/* ----------------------------------------------------------------
   2. MODAL SHELL
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-content {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-xl);
    box-shadow: var(--wf-sh-lg);
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-backdrop {
    background: rgba(15, 23, 42, 0.40);
}


/* ----------------------------------------------------------------
   3. MODAL HEADER
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-header {
    height: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    border-radius: 0;
}

.workflow-modal.wf-design-modern .modal-header h4,
.workflow-modal.wf-design-modern .modal-header .modal-title {
    color: var(--wf-text-primary);
    font-size: 15px;
    font-weight: 600;
}

/* Modern header icon badge */
.workflow-modal.wf-design-modern .wf-modern-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--wf-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: white;
    flex-shrink: 0;
}

/* Modern header subtitle */
.workflow-modal.wf-design-modern .wf-modern-subtitle {
    font-size: 11px;
    color: var(--wf-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.workflow-modal.wf-design-modern .wf-modern-subtitle .wf-modern-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* Header action buttons */
.workflow-modal.wf-design-modern .wf-modern-header-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    cursor: pointer;
    font-size: 14px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .wf-modern-header-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .wf-modern-header-btn.close-btn:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* Pagination nav arrows */
.workflow-modal.wf-design-modern .pagination-btns li {
    background: transparent;
    border: none;
}

.workflow-modal.wf-design-modern .pagination-btns li a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    padding: 0;
}

.workflow-modal.wf-design-modern .pagination-btns li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* Classic header elements adapted for modern design */
.workflow-modal.wf-design-modern .modal-header .row {
    flex: 1;
    min-width: 0;
}

.workflow-modal.wf-design-modern .modal-header .modal-title-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-title {
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-title > .d3view-flex-v {
    margin-top: 4px;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .modal-header .wf-id-label {
    font-size: 10px;
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn,
.workflow-modal.wf-design-modern .modal-header > .d3view-flex-v > .btn-group .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    padding: 0;
    font-size: 14px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn:hover,
.workflow-modal.wf-design-modern .modal-header > .d3view-flex-v > .btn-group .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn#cancel:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

.workflow-modal.wf-design-modern .modal-header .worker-header-options .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    padding: 0;
    font-size: 14px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .modal-header .worker-header-options .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ----------------------------------------------------------------
   4. MODAL FOOTER
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-footer {
    height: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 20px !important;
    gap: 8px;
    border-top: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    margin-top: 0;
    border-radius: 0;
    text-align: left;
}

/* Footer info text */
.workflow-modal.wf-design-modern .modal-footer .worker-lastupdated {
    font-size: 11px;
    color: var(--wf-text-muted);
    text-align: left;
}

/* Footer buttons */
.workflow-modal.wf-design-modern .modal-footer .btn {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--wf-r-md);
    font-size: 12px;
    font-weight: 600;
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workflow-modal.wf-design-modern .modal-footer .btn-default,
.workflow-modal.wf-design-modern .modal-footer .btn-outline {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .modal-footer .btn-default:hover,
.workflow-modal.wf-design-modern .modal-footer .btn-outline:hover {
    background: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .modal-footer .btn-primary,
.workflow-modal.wf-design-modern .modal-footer #apply {
    background: var(--wf-accent);
    color: white;
    border-color: var(--wf-accent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer .btn-primary:hover,
.workflow-modal.wf-design-modern .modal-footer #apply:hover {
    background: var(--wf-accent-hover);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute {
    background: var(--wf-grad-run);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}


/* ----------------------------------------------------------------
   5. SIDEBAR TABS (.wf-tabs .pl-tabs-vertical)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-tabs {
    width: var(--wf-modal-sidebar-w) !important;
    flex: 0 0 var(--wf-modal-sidebar-w) !important;
    background: var(--wf-bg-sidebar);
    border-right: 1px solid var(--wf-border) !important;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                flex 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: relative;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 4px;
    color: var(--wf-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: var(--wf-t-fast);
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    border-bottom: none;
    background: transparent;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a:hover {
    background: var(--wf-accent-subtle);
    color: var(--wf-text-secondary);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item.active > a,
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a.active {
    border-left-color: var(--wf-accent);
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > i {
    font-size: 15px;
}

/* Tab labels — hidden in collapsed, visible when expanded */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > .pl-tab-item-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.workflow-modal.wf-design-modern .wf-tabs.is-expanded .pl-tabs-vertical .list-group-item > a > .pl-tab-item-label {
    opacity: 1;
    width: auto;
}

/* Sidebar resize handle */
.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}

.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle:hover,
.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle.dragging {
    background: var(--wf-accent);
}

/* Sidebar tooltip on hover (collapsed mode) */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--wf-modal-sidebar-w) + 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    padding: 4px 10px;
    border-radius: var(--wf-r-sm);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border-strong);
    z-index: 100;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item[data-tooltip]:hover::after {
    opacity: 1;
}

.workflow-modal.wf-design-modern .wf-tabs.is-expanded .pl-tabs-vertical .list-group-item[data-tooltip]::after {
    display: none;
}


/* ----------------------------------------------------------------
   6. TAB CONTENT AREA
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .tab-content {
    background: var(--wf-bg-surface);
    overflow: auto;
}

.workflow-modal.wf-design-modern .tab-pane {
    background: var(--wf-bg-surface);
}

/* Main flex container */
.workflow-modal.wf-design-modern .wf-worker-inputs-outputs {
    background: var(--wf-bg-surface);
}


/* ----------------------------------------------------------------
   7. INPUT CARDS (li.field-item)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern li.field-item {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern li.field-item:hover {
    border-color: var(--wf-border-strong);
    background: var(--wf-bg-card-hover);
    box-shadow: var(--wf-sh-xs);
}

/* Field name / label */
.workflow-modal.wf-design-modern li.field-item .field-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern li.field-item .field-name .label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* Required asterisk */
.workflow-modal.wf-design-modern li.field-item .required-asterisk {
    color: var(--wf-danger);
}

/* Help/description text */
.workflow-modal.wf-design-modern li.field-item .help-block {
    font-size: 10px;
    color: var(--wf-text-disabled);
    margin-top: 6px;
}


/* ----------------------------------------------------------------
   8. FORM INPUTS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern input.form-control,
.workflow-modal.wf-design-modern textarea.form-control {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none;
    box-shadow: none;
}

.workflow-modal.wf-design-modern textarea.form-control {
    height: auto;
    padding: 8px 12px;
    min-height: 64px;
}

.workflow-modal.wf-design-modern input.form-control:focus,
.workflow-modal.wf-design-modern textarea.form-control:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern input.form-control::placeholder,
.workflow-modal.wf-design-modern textarea.form-control::placeholder {
    color: var(--wf-text-disabled);
}

/* Labels */
.workflow-modal.wf-design-modern label {
    color: var(--wf-text-secondary);
    font-size: 12px;
    font-weight: 500;
}


/* ----------------------------------------------------------------
   9. FILE INPUT / BADGE
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-secondary);
    font-size: 12px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .file-badge:hover {
    border-color: var(--wf-accent);
    background: var(--wf-accent-subtle);
}


/* ----------------------------------------------------------------
   10. ACTION BUTTONS (Upload / Extract / Remove bar)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .btn-group-xs > .btn,
.workflow-modal.wf-design-modern .btn-xs {
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Upload/action buttons in field items */
.workflow-modal.wf-design-modern li.field-item .btn-default {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern li.field-item .btn-default:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

.workflow-modal.wf-design-modern li.field-item .btn-primary {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern li.field-item .btn-primary:hover {
    background: var(--wf-accent);
    color: white;
}

.workflow-modal.wf-design-modern li.field-item .btn-danger {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern li.field-item .btn-danger:hover {
    background: var(--wf-danger);
    color: white;
}


/* Removed by shashank2104 on 2026-07-23 - R2026-51 - the HANDSONTABLE section that used to sit here
   was deleted (hence the section-number gap). It duplicated FormBuilder's modern table skin
   (fb_list.css, [data-ui-theme="modern"] li.field-item .handsontable_container) but every declaration
   was !important, so it won inside the worker-config modal: curve / dataset grids there rendered with a
   different header, a smaller font and - under .wf-dark - a dark fill on a light form. FormBuilder owns
   that table everywhere now; style it in fb_list.css, not here. */


/* ----------------------------------------------------------------
   12. SELECT2
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .select2-container .select2-choice {
    height: 36px;
    line-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .select2-container .select2-choice:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .select2-container-active .select2-choice {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.workflow-modal.wf-design-modern .select2-container .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
}

/* Multi-select */
.workflow-modal.wf-design-modern .select2-container-multi .select2-choices {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    padding: 4px;
    min-height: 36px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .select2-container-multi .select2-choices:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.workflow-modal.wf-design-modern .select2-container-multi .select2-choices .select2-search-choice {
    background: var(--wf-accent-light);
    border: 1px solid transparent;
    border-radius: var(--wf-r-sm);
    color: var(--wf-accent);
    font-size: 12px;
    padding: 2px 8px;
    box-shadow: none;
}

.workflow-modal .select2-results .select2-result-label,
.sl-select2.workflow-modal .select2-results .select2-result-label {
    color: var(--wf-text-primary);
    font-size: 13px;
    padding: 6px 12px;
}

.workflow-modal .select2-results .select2-highlighted,
.sl-select2.workflow-modal .select2-results .select2-highlighted {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* ----------------------------------------------------------------
   13. OUTPUT CARDS (#wf-worker-outputs li.field-item)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    overflow: hidden;
}

.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item:hover {
    border-color: var(--wf-border-strong);
    box-shadow: var(--wf-sh-xs);
}

/* Output preview area */
/** Updated by shashank2104 on 2026-04-02 - DW-2795 - Increase max-height so keyvalue outputs show full view **/
.workflow-modal.wf-design-modern .worker-output-preview {
    padding: 10px 14px;
    border-top: 1px solid var(--wf-border);
    background: var(--wf-bg-input);
    font-size: 11px;
    color: var(--wf-text-secondary);
    max-height: 300px;
    overflow-y: auto;
}

.workflow-modal.wf-design-modern .worker-output-preview.kv-preview {
    max-height: 400px;
}

/* Output field label */
.workflow-modal.wf-design-modern #wf-worker-outputs .field-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

/* Output label badges */
.workflow-modal.wf-design-modern #wf-worker-outputs .label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
}

/* Ellipsis menu button */
.workflow-modal.wf-design-modern .op-ellipsis-menu .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--wf-text-muted);
    border: none;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .op-ellipsis-menu .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* ----------------------------------------------------------------
   14. OPTIONS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv-container {
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv {
    border-right-color: var(--wf-border) !important;
    background: var(--wf-bg-sidebar);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .basic-options-container {
    padding: 16px;
}

/* Option form inputs */
.workflow-modal.wf-design-modern #wf-worker-configuration .form-group {
    margin-bottom: 16px;
}


/* ----------------------------------------------------------------
   15. VALIDATIONS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-validations {
    padding: 16px;
}

.workflow-modal.wf-design-modern .validations-list li {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 14px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern .validations-list li:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern #add-validation-row {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border: 1px dashed var(--wf-accent);
    border-radius: var(--wf-r-md);
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern #add-validation-row:hover {
    background: var(--wf-accent);
    color: white;
    border-style: solid;
}


/* ----------------------------------------------------------------
   16. LOGS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .execution-log {
    background: var(--wf-bg-input);
    border-top: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .logs-container {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--wf-text-secondary);
    padding: 12px;
}

.workflow-modal.wf-design-modern .execution-log-header {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-muted);
    font-size: 11px;
    font-weight: 600;
}


/* ----------------------------------------------------------------
   17. GENERAL BUTTONS (inside modal)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .btn {
    transition: var(--wf-t-fast);
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern .btn-sm {
    /* height: 32px; */
    /* font-size: 12px; */
    /* font-weight: 500; */
    /* padding: 0 12px; */
    /* display: inline-flex; */
    align-items: center;
    gap: 5px;
}

.workflow-modal.wf-design-modern .btn-default {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .btn-default:hover {
    background: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .btn-primary {
    background: var(--wf-accent);
    color: white;
    border-color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .btn-primary:hover {
    background: var(--wf-accent-hover);
}

.workflow-modal.wf-design-modern .btn-success {
    background: var(--wf-grad-run);
    color: white;
    border: none;
}

.workflow-modal.wf-design-modern .btn-danger {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern .btn-danger:hover {
    background: var(--wf-danger);
    color: white;
}

/* Dropdown menus */
.workflow-modal.wf-design-modern .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-lg);
    padding: 4px;
}

.workflow-modal.wf-design-modern .dropdown-menu > li > a {
    color: var(--wf-text-primary);
    padding: 6px 12px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
}

.workflow-modal.wf-design-modern .dropdown-menu > li > a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .dropdown-menu .divider {
    background: var(--wf-border);
    margin: 4px 0;
}


/* ----------------------------------------------------------------
   18. BREADCRUMBS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.workflow-modal.wf-design-modern .breadcrumb > li {
    color: var(--wf-text-muted);
}

.workflow-modal.wf-design-modern .breadcrumb > li > a {
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .breadcrumb > .active {
    color: var(--wf-text-primary);
}


/* ----------------------------------------------------------------
   19. INPUTS/OUTPUTS HEADER BAR
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-worker-config-view .row.io-header {
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    padding: 8px 16px;
}

/* View type buttons */
.workflow-modal.wf-design-modern .view-type-selector .btn {
    background: transparent;
    color: var(--wf-text-muted);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-sm);
    font-size: 11px;
}

.workflow-modal.wf-design-modern .view-type-selector .btn:hover,
.workflow-modal.wf-design-modern .view-type-selector .btn.active {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Nav tabs (input group tabs: Basic, Advanced, etc.) */
.workflow-modal.wf-design-modern .nav-tabs {
    border-bottom: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .nav-tabs > li > a {
    color: var(--wf-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary);
    background: transparent;
    border-bottom-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .nav-tabs > li.active > a,
.workflow-modal.wf-design-modern .nav-tabs > li.active > a:hover {
    color: var(--wf-accent);
    border-bottom-color: var(--wf-accent);
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

/* Tab badge/count */
.workflow-modal.wf-design-modern .nav-tabs .badge {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}


/* ----------------------------------------------------------------
   20. SCROLLBARS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-track {
    background: transparent;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-thumb {
    background: var(--wf-border);
    border-radius: 3px;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-border-strong);
}


/* ----------------------------------------------------------------
   21. PANELS & WELLS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .panel {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .panel-heading {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0;
}

.workflow-modal.wf-design-modern .well {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
}


/* ----------------------------------------------------------------
   22. MODAL BODY
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-body {
    background: var(--wf-bg-surface);
    padding: 0;
}


/* ----------------------------------------------------------------
   23. TYPOGRAPHY OVERRIDES
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern {
    color: var(--wf-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.workflow-modal.wf-design-modern h1,
.workflow-modal.wf-design-modern h2,
.workflow-modal.wf-design-modern h3,
.workflow-modal.wf-design-modern h4 {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .text-muted {
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   24. TOOLTIPS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .tooltip .tooltip-inner {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border-strong);
    border-radius: var(--wf-r-sm);
    font-size: 12px;
    box-shadow: var(--wf-sh-md);
    padding: 4px 10px;
}

.workflow-modal.wf-design-modern .tooltip .tooltip-arrow {
    display: none;
}


/* ----------------------------------------------------------------
   25. WORKER NAME INPUT (Customize worker name)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-worker-config-view > .tab-content > .tab-pane > .input-group,
.workflow-modal.wf-design-modern .wf-worker-config-view input[placeholder*="worker name"],
.workflow-modal.wf-design-modern .wf-worker-config-view input[placeholder*="Customize"] {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .input-group {
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern .input-group .form-control {
    background: var(--wf-bg-input);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .input-group .input-group-btn .btn,
.workflow-modal.wf-design-modern .input-group-addon {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border);
    color: var(--wf-text-secondary);
}


/* ----------------------------------------------------------------
   26. OPTIONS TAB — deeper styling for tree view + form controls
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-configuration {
    background: var(--wf-bg-surface);
}

/* Tree view sidebar items */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a {
    color: var(--wf-text-secondary);
    padding: 8px 12px;
    display: block;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
    text-decoration: none;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a:hover {
    background: var(--wf-accent-subtle);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a.active,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .active > a {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    font-weight: 600;
}

/* Toggle switch styling in options */
.workflow-modal.wf-design-modern .bootstrap-switch {
    border-color: var(--wf-border);
    border-radius: 12px;
}

.workflow-modal.wf-design-modern .bootstrap-switch .bootstrap-switch-handle-on {
    background: var(--wf-accent);
    color: white;
    border-radius: 10px;
}

.workflow-modal.wf-design-modern .bootstrap-switch .bootstrap-switch-handle-off {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-muted);
    border-radius: 10px;
}

/* Form rows in options */
.workflow-modal.wf-design-modern #wf-worker-configuration .row {
    border-bottom: 1px solid var(--wf-border);
    padding: 12px 0;
    margin: 0;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .row:last-child {
    border-bottom: none;
}

/* Select dropdowns in options */
.workflow-modal.wf-design-modern #wf-worker-configuration select.form-control {
    height: 36px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern #wf-worker-configuration select.form-control:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Option labels */
.workflow-modal.wf-design-modern #wf-worker-configuration label,
.workflow-modal.wf-design-modern #wf-worker-configuration .control-label {
    color: var(--wf-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

/* Options section headers */
.workflow-modal.wf-design-modern .toggle-worker-info-group {
    color: var(--wf-text-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 0;
    display: block;
}


/* ----------------------------------------------------------------
   27. VALIDATIONS TAB — deeper styling for condition rows
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-validations {
    background: var(--wf-bg-surface);
}

/* Decision name row */
.workflow-modal.wf-design-modern #wf-worker-validations .row {
    padding: 12px 16px;
    margin: 0;
}

/* Validation list items */
.workflow-modal.wf-design-modern #wf-worker-validations .validations-list {
    padding: 0 16px 16px;
    list-style: none;
}

/* Select inputs inside validations */
.workflow-modal.wf-design-modern #wf-worker-validations select.form-control,
.workflow-modal.wf-design-modern #wf-worker-validations .selectpicker-wf {
    height: 36px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
}


/* ----------------------------------------------------------------
   28. DARK MODE — comprehensive overrides for white backgrounds
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern.wf-dark {
    color: var(--wf-text-primary);
}

/* Force all common containers to dark bg */
.workflow-modal.wf-design-modern.wf-dark .modal-content,
.workflow-modal.wf-design-modern.wf-dark .modal-body,
.workflow-modal.wf-design-modern.wf-dark .tab-content,
.workflow-modal.wf-design-modern.wf-dark .tab-pane,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-inputs-outputs,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .modal-header,
.workflow-modal.wf-design-modern.wf-dark .modal-footer {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

/* Dark sidebar */
.workflow-modal.wf-design-modern.wf-dark .wf-tabs {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

/* Dark input cards */
.workflow-modal.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
}

/* Dark form controls */
.workflow-modal.wf-design-modern.wf-dark input.form-control,
.workflow-modal.wf-design-modern.wf-dark textarea.form-control,
.workflow-modal.wf-design-modern.wf-dark select.form-control {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark text everywhere */
.workflow-modal.wf-design-modern.wf-dark .field-name,
.workflow-modal.wf-design-modern.wf-dark h2,
.workflow-modal.wf-design-modern.wf-dark h3,
.workflow-modal.wf-design-modern.wf-dark h4,
.workflow-modal.wf-design-modern.wf-dark label,
.workflow-modal.wf-design-modern.wf-dark .control-label,
.workflow-modal.wf-design-modern.wf-dark span,
.workflow-modal.wf-design-modern.wf-dark p,
.workflow-modal.wf-design-modern.wf-dark a {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .help-block,
.workflow-modal.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

/* Dark options tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .basic-options-container {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .row {
    border-bottom-color: var(--wf-border);
}

/* Dark validations tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-validations {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark .validations-list li {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
}

/* Dark dropdown menus */
.workflow-modal.wf-design-modern.wf-dark .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Dark Select2 */
.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container-multi .select2-choices {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
}

/* Dark panels */
.workflow-modal.wf-design-modern.wf-dark .panel,
.workflow-modal.wf-design-modern.wf-dark .well {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .panel-heading {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark input-group */
.workflow-modal.wf-design-modern.wf-dark .input-group .form-control {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-group-addon,
.workflow-modal.wf-design-modern.wf-dark .input-group .input-group-btn .btn {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Dark buttons */
.workflow-modal.wf-design-modern.wf-dark .btn-default {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:hover {
    background: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark nav-tabs */
.workflow-modal.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    background: transparent !important;
    border-bottom-color: var(--wf-accent) !important;
}

/* Dark breadcrumbs */
.workflow-modal.wf-design-modern.wf-dark .breadcrumb {
    background: transparent !important;
}

.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li {
    color: var(--wf-text-muted) !important;
}

/* Dark execution log */
.workflow-modal.wf-design-modern.wf-dark .execution-log {
    background: var(--wf-bg-input) !important;
}

.workflow-modal.wf-design-modern.wf-dark .logs-container {
    color: var(--wf-text-secondary) !important;
}

/* Dark worker name input */
.workflow-modal.wf-design-modern.wf-dark input[placeholder*="worker name"],
.workflow-modal.wf-design-modern.wf-dark input[placeholder*="Customize"] {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark output previews */
.workflow-modal.wf-design-modern.wf-dark .worker-output-preview {
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-secondary) !important;
}

/* Dark scrollbars */
.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: var(--wf-border-strong);
}


/* ================================================================
   29. DW-2774 COMPREHENSIVE MODERN POLISH
   Fixes gaps in dark mode, unstyled elements, and polish to
   match the worker-config-sketch.html design spec.
   ================================================================ */

/* ---- 29a. Page / body background when used standalone ---- */
/** Updated by shashank2104 on 2026-08-19 - R2026-189 - was `body:has(.workflow-modal...)`.
 *  A :has() whose SUBJECT is body is the worst-case selector: body's computed style inherits to the
 *  whole document, so Chrome re-tests it after ANY DOM mutation anywhere and then re-resolves
 *  everything beneath it. Measured on a Simlytiks page these rules alone made every forced layout
 *  read cost 11.2ms instead of 2.1ms - on every page that loads workflow.css, not just the builder.
 *  ConfigureWfWorker now mirrors the modal's state onto body as wf-modal-modern / wf-modal-dark. **/
body.wf-modal-modern.wf-modal-dark {
    background: #1a1a2e !important;
    color: #E2E8F0 !important;
}

/* Fallback for browsers without :has() — scope to worker.html test page */
.workflow-modal.wf-design-modern.wf-dark {
    background: var(--wf-bg-surface);
}

/* Also style the body-level file input that sits outside the modal scope */
body.wf-modal-modern.wf-modal-dark > input[type="file"] {
    background: #16213e !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 8px !important;
    color: #E2E8F0 !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 8px 16px !important;
}

/* Alert boxes */
.workflow-modal.wf-design-modern.wf-dark .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid var(--wf-border) !important;
    color: #93C5FD !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-warning {
    background: var(--wf-warning-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-warning) !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-danger {
    background: var(--wf-danger-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-danger) !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-success {
    background: var(--wf-success-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-success) !important;
    border-radius: var(--wf-r-md);
}

/* ---- 29b. Worker name input group — modern inline treatment ---- */
.workflow-modal.wf-design-modern .name-container {
    padding: 12px 16px 8px;
    background: transparent;
}

/* Override Bootstrap table-layout so input + addon buttons sit inline */
.workflow-modal.wf-design-modern .name-container .input-group {
    display: flex !important;
    align-items: center;
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    overflow: hidden;
    transition: var(--wf-t-fast);
    box-shadow: var(--wf-sh-xs);
    height: 40px;
}

.workflow-modal.wf-design-modern .name-container .input-group:hover,
.workflow-modal.wf-design-modern .name-container .input-group:focus-within {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* The text input — stretches to fill */
.workflow-modal.wf-design-modern .name-container .input-group .form-control,
.workflow-modal.wf-design-modern .name-container .input-group .form-control.input-lg {
    flex: 1 1 auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 38px !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--wf-text-primary);
    padding: 0 14px;
    width: auto;
    display: block;
}

.workflow-modal.wf-design-modern .name-container .input-group .form-control::placeholder {
    color: var(--wf-text-disabled);
    font-weight: 400;
}

/* Addon buttons (edit, trash, refresh) — fixed-width icon buttons */
.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--wf-border) !important;
    border-radius: 0 !important;
    color: var(--wf-text-muted) !important;
    font-size: 13px;
    cursor: pointer;
    transition: var(--wf-t-fast);
    float: none !important;
}

.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Danger variant (trash button) */
.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon.btn-danger:hover {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}


/* ---- 29c. Docked heading (Inputs / Outputs header bar) ---- */
.workflow-modal.wf-design-modern .docked-heading {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    min-height: 44px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    gap: 12px;
}

.workflow-modal.wf-design-modern .docked-heading h5,
.workflow-modal.wf-design-modern .docked-heading .heading-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin: 0;
}

.workflow-modal.wf-design-modern .docked-heading .fa-search,
.workflow-modal.wf-design-modern .docked-heading .search-icon {
    color: var(--wf-text-muted);
    cursor: pointer;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .docked-heading .fa-search:hover {
    color: var(--wf-accent);
}


/* ---- 29c2. Input/Output card containers — breathing room from edges ---- */

/* Input cards list — the UL wrapping li.field-item */
.workflow-modal.wf-design-modern .wf-builder-inputs-list ul.ui-selectable,
.workflow-modal.wf-design-modern .worker-groups .tab-pane > ul {
    padding: 12px 16px !important;
}

/* The scrollable input list wrapper */
.workflow-modal.wf-design-modern .wf-builder-inputs-list {
    padding: 0;
}

/* Output cards container — #wf-worker-outputs IS .worker-outputs */
.workflow-modal.wf-design-modern .worker-outputs,
.workflow-modal.wf-design-modern #wf-worker-outputs {
    padding: 12px 16px !important;
    border-left: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .worker-outputs > ul,
.workflow-modal.wf-design-modern #wf-worker-outputs > ul {
    list-style: none;
    padding: 0;
}


/* ---- 29d. Inputs/Outputs tab bar (horizontal tabs inside worker content) ---- */
.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs {
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    padding: 0 16px;
    margin: 0;
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li > a,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li > a {
    color: var(--wf-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: var(--wf-t-fast);
    margin: 0;
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li > a:hover,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary);
    background: transparent;
    border-bottom-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li.active > a,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    border-bottom-color: var(--wf-accent) !important;
    background: transparent !important;
    border-top: none;
    border-left: none;
    border-right: none;
}


/* ---- 29e. View Type / toolbar buttons ---- */
.workflow-modal.wf-design-modern .view-type-selector,
.workflow-modal.wf-design-modern .io-header .btn-group {
    display: inline-flex;
    gap: 2px;
}

.workflow-modal.wf-design-modern .io-header {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    min-height: 40px;
}

.workflow-modal.wf-design-modern .io-header .btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--wf-r-sm);
    background: transparent;
    color: var(--wf-text-muted);
    border: 1px solid var(--wf-border);
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.workflow-modal.wf-design-modern .io-header .btn:hover {
    border-color: var(--wf-border-strong);
    color: var(--wf-text-secondary);
    background: var(--wf-accent-subtle);
}

.workflow-modal.wf-design-modern .io-header .btn.active,
.workflow-modal.wf-design-modern .io-header .btn.selected {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}


/* ---- 29f. File upload / dropzone area ---- */
.workflow-modal.wf-design-modern .dropzone-file-uploader,
.workflow-modal.wf-design-modern .dropzone,
.workflow-modal.wf-design-modern [class*="drop-zone"],
.workflow-modal.wf-design-modern .upload-area {
    background: var(--wf-bg-input);
    border: 1px dashed var(--wf-border-strong);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-muted);
    padding: 20px;
    text-align: center;
    transition: var(--wf-t-fast);
    cursor: pointer;
    font-size: 12px;
}

.workflow-modal.wf-design-modern .dropzone-file-uploader:hover,
.workflow-modal.wf-design-modern .dropzone:hover,
.workflow-modal.wf-design-modern [class*="drop-zone"]:hover,
.workflow-modal.wf-design-modern .upload-area:hover {
    border-color: var(--wf-accent);
    background: var(--wf-accent-subtle);
    color: var(--wf-accent);
}

/* Native file input — hide or style */
.workflow-modal.wf-design-modern input[type="file"] {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-primary);
    font-size: 12px;
    padding: 6px 10px;
}


/* ---- 29g. Native <select> elements ---- */
.workflow-modal.wf-design-modern select.form-control,
.workflow-modal.wf-design-modern select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background-color: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394A3B8' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.workflow-modal.wf-design-modern select.form-control:focus,
.workflow-modal.wf-design-modern select:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Select option styling for dark mode */
.workflow-modal.wf-design-modern.wf-dark select option {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
}


/* ---- 29h. Sidebar polish — icon sizing and active state refinement ---- */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    transition: var(--wf-t-fast);
}

/* Sidebar separator line */
.workflow-modal.wf-design-modern .wf-tabs .list-group-item:last-child {
    margin-top: auto;
}

/* Active sidebar item glow in dark mode */
.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item.active > a,
.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item > a.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-left-color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item > a:hover {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-secondary) !important;
}


/* ---- 29i. Outputs panel — clean dark treatment ---- */
.workflow-modal.wf-design-modern .wf-worker-outputs-panel,
.workflow-modal.wf-design-modern #wf-worker-outputs-container {
    background: var(--wf-bg-surface);
    border-left: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .wf-worker-outputs-panel h5,
.workflow-modal.wf-design-modern #wf-worker-outputs-container h5 {
    color: var(--wf-text-primary);
    font-size: 13px;
    font-weight: 600;
}

/* Output field item name */
.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item .field-name {
    color: var(--wf-text-primary);
}

/* Output label badge */
.workflow-modal.wf-design-modern #wf-worker-outputs .label-warning,
.workflow-modal.wf-design-modern #wf-worker-outputs .label-info {
    background: var(--wf-warning-bg);
    color: var(--wf-warning);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
}

.workflow-modal.wf-design-modern #wf-worker-outputs .label-info {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* "No value received" text */
.workflow-modal.wf-design-modern .no-value-text,
.workflow-modal.wf-design-modern .text-warning {
    color: var(--wf-warning) !important;
    font-size: 11px;
}


/* ---- 29j. Checkbox styling ---- */
.workflow-modal.wf-design-modern input[type="checkbox"] {
    accent-color: var(--wf-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* ---- 29k. Search inputs ---- */
.workflow-modal.wf-design-modern input[type="text"][placeholder*="Search"],
.workflow-modal.wf-design-modern input[placeholder*="search"] {
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 12px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern input[type="text"][placeholder*="Search"]:focus,
.workflow-modal.wf-design-modern input[placeholder*="search"]:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}


/* ---- 29l. Options tab — deeper treatment ---- */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv-container {
    display: flex;
    height: 100%;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv {
    width: 180px;
    min-width: 180px;
    background: var(--wf-bg-sidebar);
    border-right: 1px solid var(--wf-border);
    overflow-y: auto;
    padding: 8px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .list-group-item {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 2px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .basic-options-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--wf-bg-surface);
}

/* Option form-group as cards */
.workflow-modal.wf-design-modern #wf-worker-configuration .form-group {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .form-group:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-secondary);
    margin-bottom: 6px;
}

/* Tree-view items — uses div.item-label and span.tv-content, not <a> tags */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item {
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    cursor: pointer;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item .tv-content {
    color: var(--wf-text-secondary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item:hover .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item:hover .tv-content {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tv-content.active,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item.active .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item.active .tv-content {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    font-weight: 600;
}

/* Force dark bg on the tree-view sidebar in dark mode */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item .item-label,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item .tv-content {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item:hover .item-label,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item:hover .tv-content {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tv-content.active,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item.active .item-label {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Override tree_view.css base rules (.tree-view .active sets #e0f5fd).
   Must use background-color (longhand) to match and beat tree_view.css. */
.workflow-modal.wf-design-modern .tree-view .active,
.workflow-modal.wf-design-modern .tree-view span.active,
.workflow-modal.wf-design-modern .options-tv .tree-view .active {
    background-color: var(--wf-accent-light) !important;
    background: var(--wf-accent-light) !important;
}

.workflow-modal.wf-design-modern .tree-view .active *,
.workflow-modal.wf-design-modern .options-tv .tree-view .active * {
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern .tree-view .tv-content:hover,
.workflow-modal.wf-design-modern .options-tv .tree-view .tv-content:hover {
    background-color: var(--wf-accent-subtle) !important;
    background: var(--wf-accent-subtle) !important;
}

.workflow-modal.wf-design-modern .tree-view .tv-content.ui-selecting {
    background-color: var(--wf-accent-subtle) !important;
    background: var(--wf-accent-subtle) !important;
}


/* ---- 29m. Validations tab — card polish ---- */
.workflow-modal.wf-design-modern #wf-worker-validations .validations-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.workflow-modal.wf-design-modern #wf-worker-validations .validations-list li .btn-danger {
    flex-shrink: 0;
}


/* ---- 29n. Logs tab — terminal-style polish ---- */
.workflow-modal.wf-design-modern #wf-worker-logs {
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern .execution-log {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    margin: 12px;
    overflow: hidden;
}

.workflow-modal.wf-design-modern .execution-log-header {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-modal.wf-design-modern .logs-container {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--wf-text-secondary);
    padding: 12px;
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
}

.workflow-modal.wf-design-modern .logs-container .log-timestamp {
    color: var(--wf-text-disabled);
    font-size: 10px;
    margin-right: 8px;
}


/* ---- 29o. Charts / Viz tab ---- */
.workflow-modal.wf-design-modern #wf-worker-viz {
    background: var(--wf-bg-surface);
    padding: 16px;
}


/* ---- 29p. Replace with / Switch tab ---- */
.workflow-modal.wf-design-modern #wf-worker-switch {
    background: var(--wf-bg-surface);
}


/* ---- 29q. Approvals tab ---- */
.workflow-modal.wf-design-modern #wf-worker-approvals {
    background: var(--wf-bg-surface);
    padding: 16px;
}


/* ---- 29r. Modal footer polish ---- */
.workflow-modal.wf-design-modern .modal-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 56px;
    min-height: 56px;
}

.workflow-modal.wf-design-modern .modal-footer .worker-lastupdated {
    font-size: 11px;
    color: var(--wf-text-muted);
    flex: 1;
    text-align: left;
}


/* ---- 29s. Filter form inside inputs ---- */
.workflow-modal.wf-design-modern .wf-filter-form,
.workflow-modal.wf-design-modern .filter-inputs-form {
    background: var(--wf-bg-surface);
    border-bottom: 1px solid var(--wf-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-modal.wf-design-modern .wf-filter-form label,
.workflow-modal.wf-design-modern .filter-inputs-form label {
    font-size: 11px;
    color: var(--wf-text-muted);
    font-weight: 500;
}

/* Sort header row */
.workflow-modal.wf-design-modern .sort-header,
.workflow-modal.wf-design-modern .inputs-sort-header {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wf-text-muted);
}


/* ---- 29t. Badge / label overrides for dark mode ---- */
.workflow-modal.wf-design-modern.wf-dark .label-default {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-primary {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-success {
    background: var(--wf-success-bg) !important;
    color: var(--wf-success) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-warning {
    background: var(--wf-warning-bg) !important;
    color: var(--wf-warning) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-danger {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-info {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ---- 29u. General text color catch-all for dark mode ---- */
.workflow-modal.wf-design-modern.wf-dark,
.workflow-modal.wf-design-modern.wf-dark div,
.workflow-modal.wf-design-modern.wf-dark li,
.workflow-modal.wf-design-modern.wf-dark td,
.workflow-modal.wf-design-modern.wf-dark th {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .help-block,
.workflow-modal.wf-design-modern.wf-dark small,
.workflow-modal.wf-design-modern.wf-dark .text-muted,
.workflow-modal.wf-design-modern.wf-dark .field-description {
    color: var(--wf-text-muted) !important;
}


/* ---- 29v. Input card action bar (Edit, Copy, Options buttons) ---- */
.workflow-modal.wf-design-modern li.field-item .field-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-modal.wf-design-modern li.field-item .btn-group {
    /* display: inline-flex; */
    gap: 2px;
}

.workflow-modal.wf-design-modern li.field-item .btn-group .btn {
    /* width: 28px;
    height: 28px; */
    /* padding: 0; */
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}


/* ---- 29w. Input number type ---- */
.workflow-modal.wf-design-modern input[type="number"] {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern input[type="number"]:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    outline: none;
}


/* ---- 29x. Catch-all for remaining white backgrounds in dark ---- */
.workflow-modal.wf-design-modern.wf-dark .row,
.workflow-modal.wf-design-modern.wf-dark .col-md-12,
.workflow-modal.wf-design-modern.wf-dark .col-md-6,
.workflow-modal.wf-design-modern.wf-dark .col-sm-12,
.workflow-modal.wf-design-modern.wf-dark .col-xs-12 {
    background: transparent;
}

/* Remove legacy bg white and borders that leak through */
.workflow-modal.wf-design-modern.wf-dark .list-group-item {
    background: transparent !important;
    border: none !important;
}

/* Force tab content backgrounds */
.workflow-modal.wf-design-modern.wf-dark .tab-content > .tab-pane {
    background: var(--wf-bg-surface) !important;
}

/* Container divs */
.workflow-modal.wf-design-modern.wf-dark .ui-layout-container,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-container {
    background: var(--wf-bg-surface) !important;
}


/* ---- 29y. Outputs right panel — layout splitter bar ---- */
.workflow-modal.wf-design-modern .ui-layout-resizer {
    background: var(--wf-border) !important;
    border: none !important;
    opacity: 1 !important;
    width: 1px !important;
}

.workflow-modal.wf-design-modern .ui-layout-resizer:hover {
    background: var(--wf-accent) !important;
    width: 3px !important;
}

.workflow-modal.wf-design-modern .ui-layout-toggler {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-sm);
}


/* ---- 29z. Light mode body fix (for standalone test page) ---- */
body.wf-modal-modern:not(.wf-modal-dark) {
    background: #F8FAFC !important;
}

body.wf-modal-modern:not(.wf-modal-dark) > input[type="file"] {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    color: #1E293B !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 8px 16px !important;
}


/* ---- 30. LIGHT MODE REFINEMENTS ---- */

/* Light mode input cards */
.workflow-modal.wf-design-modern:not(.wf-dark) li.field-item {
    box-shadow: var(--wf-sh-xs);
}

.workflow-modal.wf-design-modern:not(.wf-dark) li.field-item:hover {
    box-shadow: var(--wf-sh-sm);
}

/* Light mode name container */
.workflow-modal.wf-design-modern:not(.wf-dark) .name-container .input-group {
    box-shadow: var(--wf-sh-xs);
}

/* Light mode view type button */
.workflow-modal.wf-design-modern:not(.wf-dark) .io-header .btn:hover {
    background: rgba(59, 130, 246, 0.06);
}


/* ---- 31. FONT SMOOTHING & GLOBAL POLISH ---- */
.workflow-modal.wf-design-modern {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
.workflow-modal.wf-design-modern .tab-content,
.workflow-modal.wf-design-modern .tab-pane,
.workflow-modal.wf-design-modern .wf-tabs {
    scroll-behavior: smooth;
}

/* Focus visible ring for keyboard nav */
.workflow-modal.wf-design-modern :focus-visible {
    outline: 2px solid var(--wf-accent);
    outline-offset: 2px;
    border-radius: var(--wf-r-sm);
}

/* Remove default focus outlines when clicking */
.workflow-modal.wf-design-modern :focus:not(:focus-visible) {
    outline: none;
}

/* ----------------------------------------------------------------
   Classic footer layout fix for modern mode
   The classic template uses pull-left/pull-right floats + clearfix.
   Convert to flex so it sits cleanly in the modern footer container.
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-footer .clearfix {
    display: none;
}

.workflow-modal.wf-design-modern .modal-footer .pull-left,
.workflow-modal.wf-design-modern .modal-footer .pull-right {
    float: none !important;
}

/* Left-side group: reset buttons + last-updated + split-start menu */
.workflow-modal.wf-design-modern .modal-footer > span.dib.pull-left {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}

.workflow-modal.wf-design-modern .modal-footer > span.dib.pull-left > span.d3view-flex-v {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Exec progress bar inline */
.workflow-modal.wf-design-modern .modal-footer .exec-progress {
    margin: 0;
    order: 2;
}

/* Re-order footer buttons to match classic visual layout:
   [lastupdated] ... [exec-progress] [Cancel] [Verify] [Stop/Execute] [Save/Apply] */
.workflow-modal.wf-design-modern .modal-footer #cancel {
    order: 3;
}

.workflow-modal.wf-design-modern .modal-footer #verify {
    order: 4;
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute {
    order: 5;
}

.workflow-modal.wf-design-modern .modal-footer #wfStop {
    order: 5;
}

.workflow-modal.wf-design-modern .modal-footer #apply,
.workflow-modal.wf-design-modern .modal-footer #save {
    order: 6;
}

/* Split-start workers dropup */
.workflow-modal.wf-design-modern .modal-footer .split-start-workers-menu .btn {
    height: 34px;
}

/* Unsync status — place next to lastupdated on the left */
.workflow-modal.wf-design-modern .modal-footer .worker_unsync_status {
    display: inline-flex;
    align-items: center;
    order: 1;
}

/* Default order for miscellaneous footer items (AI predict, preview, dependent workers, etc.) */
.workflow-modal.wf-design-modern .modal-footer .render_ai_model,
.workflow-modal.wf-design-modern .modal-footer .preview-guide,
.workflow-modal.wf-design-modern .modal-footer #previewResponses,
.workflow-modal.wf-design-modern .modal-footer .dependentWorkerButtons,
.workflow-modal.wf-design-modern .modal-footer .overlay_selected_curves,
.workflow-modal.wf-design-modern .modal-footer #togglePeriodicExecution,
.workflow-modal.wf-design-modern .modal-footer .decision-result-msg,
.workflow-modal.wf-design-modern .modal-footer #save_resume,
.workflow-modal.wf-design-modern .modal-footer .wf_resume {
    order: 4;
}

/* Stop button (danger) */
.workflow-modal.wf-design-modern .modal-footer #wfStop {
    background: var(--wf-danger);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer #wfStop:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}

/* Warning buttons (AI predict) */
.workflow-modal.wf-design-modern .modal-footer .btn-warning {
    background: var(--wf-warning);
    color: white;
    border: none;
}

/* Verify button green icon */
.workflow-modal.wf-design-modern .modal-footer .verify-icon.green {
    color: var(--wf-success);
}

/* ----------------------------------------------------------------
   R2026-27 — START worker propagation badge
   Appears inline next to any input label whose map.node resolves
   to the workflow START worker.
   ---------------------------------------------------------------- */
.wf-propagated-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 3px);
    background: var(--d3v-status-info-bg, #d9edf7);
    color: var(--d3v-status-info-text, #31708f);
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}
.wf-propagated-badge i {
    font-size: 9px;
}


/* ----------------------------------------------------------------
   Added by shashank2104 on 2026-07-14 - R0-3947
   Inline JSON input card (Builder / Raw toggle). Clean, neutral -
   matches the certification-builder summary card aesthetic. The
   Builder / Raw toggle is CSS-only via two hidden sibling radios.
   ---------------------------------------------------------------- */
.wf-json-field {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
    background: var(--d3v-bg-primary, #fff);
    font-size: 12.5px;
}
.wf-json-field > .wfjson-mode { position: absolute; opacity: 0; pointer-events: none; }

.wf-json-field .wfjson-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.wf-json-field .wfjson-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-family: Menlo, Monaco, Consolas, monospace;
}
.wf-json-field .wfjson-title i { margin-right: 4px; }
.wf-json-field .wfjson-tabs {
    margin-left: auto;
    display: inline-flex;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
    background: var(--d3v-bg-primary, #fff);
}
.wf-json-field .wfjson-tab {
    margin: 0;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--d3v-text-secondary, #64748b);
    cursor: pointer;
    transition: background var(--d3v-t-fast, .15s), color var(--d3v-t-fast, .15s);
}
.wf-json-field .wfjson-tab + .wfjson-tab { border-left: 1px solid var(--d3v-border, #e2e8f0); }
.wf-json-field .wfjson-tab:hover { background: var(--d3v-bg-secondary, #f8fafc); }
/* active tab (CSS-only, driven by the checked radio) */
.wf-json-field .wfjson-mode-b:checked ~ .wfjson-head .wfjson-tab-b,
.wf-json-field .wfjson-mode-r:checked ~ .wfjson-head .wfjson-tab-r,
.wf-json-field .wfjson-mode-p:checked ~ .wfjson-head .wfjson-tab-p {
    color: var(--d3v-text-primary, #0f172a);
    background: var(--d3v-bg-tertiary, #f1f5f9);
    box-shadow: inset 0 -2px 0 var(--d3v-accent, #4f46e5);
}

/* body panes — Builder default; Raw / Preview via the checked radio */
.wf-json-field .wfjson-builder { display: block; padding: 12px 12px 11px; }
.wf-json-field .wfjson-raw { display: none; padding: 12px; }
.wf-json-field .wfjson-preview-pane { display: none; padding: 12px; }
.wf-json-field .wfjson-mode-r:checked ~ .wfjson-builder,
.wf-json-field .wfjson-mode-p:checked ~ .wfjson-builder { display: none; }
.wf-json-field .wfjson-mode-r:checked ~ .wfjson-raw { display: block; }
.wf-json-field .wfjson-mode-p:checked ~ .wfjson-preview-pane { display: block; }

/* neutral stat chips (cert-summary style) */
.wf-json-field .wfjson-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.wf-json-field .wfjson-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    color: var(--d3v-text-secondary, #64748b);
}
.wf-json-field .wfjson-stat b { font-size: 12.5px; font-weight: 700; color: var(--d3v-text-primary, #0f172a); }
.wf-json-field .wfjson-stat-tbl b { color: var(--d3v-status-success, #16a34a); }
.wf-json-field .wfjson-stat-wire b { color: var(--d3v-status-info, #0369a1); }

/* collapsed value preview */
.wf-json-field .wfjson-peek {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-secondary, #f8fafc);
    max-height: 132px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}
.wf-json-field .wfjson-peek pre {
    margin: 0;
    padding: 11px 12px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.7;
    color: var(--d3v-text-secondary, #475569);
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
    border: 0;
}
.wf-json-field .wfjson-peek::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    background: linear-gradient(transparent, var(--d3v-bg-secondary, #f8fafc));
    pointer-events: none;
}
.wf-json-field .wfjson-empty {
    color: var(--d3v-text-secondary, #64748b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-strong, #cbd5e1);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 14px;
    margin-bottom: 12px;
    text-align: center;
    font-size: 12px;
}
.wf-json-field .wfjson-empty b { color: var(--d3v-text-primary, #0f172a); }

/* actions row — right-aligned like the other input action buttons (Edit Certificate, etc.) */
.wf-json-field .wfjson-actions { display: flex; gap: 8px; justify-content: flex-end; }
.wf-json-field .wfjson-actions .wf-json-open-builder { font-weight: 600; }
.wf-json-field .wfjson-actions .wf-json-open-builder .fa { margin-right: 4px; }

/* Preview (resolved) pane */
.wf-json-field .wfjson-preview-note {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #94a3b8);
    margin-bottom: 8px;
}
.wf-json-field .wfjson-preview-body {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-secondary, #f8fafc);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    line-height: 1.7;
    color: var(--d3v-text-secondary, #475569);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow: auto;
}

.wf-json-field .wf-json-input {
    resize: vertical;
    min-height: 130px;
    font-size: 11px;
    font-family: Menlo, Monaco, Consolas, monospace;
    line-height: 1.5;
}

/* Added by shashank2104 on 2026-07-10 - R0-3947 - JSON Builder modal styles.
   The modal is body-mounted (GenericModalView), so these are scoped under the modal/view classes, not the plugin root. */

.wf-json-builder {
    font-size: 12.5px;
}

.wf-json-builder .wjb-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--d3v-text-secondary, #64748b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 8px 12px;
    margin-bottom: 14px;
}
.wf-json-builder .wjb-hint b { color: var(--d3v-text-primary, #0f172a); }

.wf-json-builder .wjb-grid {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
}
.wf-json-builder .wjb-head,
.wf-json-builder .wjb-row {
    display: grid;
    /* R0-3947 declutter: [fold] [key] [compact type-chip] [value] [remove] — the old 226px type strip is gone */
    grid-template-columns: 16px minmax(96px, 168px) auto minmax(0, 1fr) 26px;
    gap: 10px;
    align-items: center;
    padding: 6px 12px;
}
.wf-json-builder .wjb-head {
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-family: Menlo, Monaco, Consolas, monospace;
}
.wf-json-builder .wjb-row + .wjb-row { border-top: 1px solid var(--d3v-border-soft, #eef2f7); }

.wf-json-builder .wjb-key,
.wf-json-builder .wjb-literal,
.wf-json-builder .wjb-worker,
.wf-json-builder .wjb-output {
    height: 32px;
    font-size: 12.5px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 4px 9px;
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #0f172a);
    transition: border-color var(--d3v-t-fast, .15s), box-shadow var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-key { font-family: Menlo, Monaco, Consolas, monospace; }
.wf-json-builder .wjb-key:focus,
.wf-json-builder .wjb-literal:focus,
.wf-json-builder .wjb-worker:focus,
.wf-json-builder .wjb-output:focus {
    outline: none;
    border-color: var(--d3v-accent, #4f46e5);
    box-shadow: 0 0 0 2px var(--d3v-accent-soft, rgba(79, 70, 229, .18));
}

/* source segmented toggle */
.wf-json-builder .wjb-seg {
    display: inline-flex;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}
.wf-json-builder .wjb-src {
    border: 0;
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 9px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, .15s), color var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-src + .wjb-src { border-left: 1px solid var(--d3v-border, #e2e8f0); }
.wf-json-builder .wjb-src:hover { background: var(--d3v-bg-secondary, #f8fafc); }
.wf-json-builder .wjb-src.on.lit { background: var(--d3v-accent, #4f46e5); color: #fff; }
.wf-json-builder .wjb-src.on.wire { background: var(--d3v-status-info, #0ea5e9); color: #fff; }

.wf-json-builder .wjb-value { min-width: 0; }
.wf-json-builder .wjb-literal { width: 100%; }
.wf-json-builder .wjb-wire { display: flex; gap: 8px; }
.wf-json-builder .wjb-wire .wjb-worker { flex: 1 1 55%; min-width: 0; }
.wf-json-builder .wjb-wire .wjb-output { flex: 1 1 45%; min-width: 0; }

.wf-json-builder .wjb-remove {
    border: 0;
    background: transparent;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--d3v-r-sm, 6px);
    transition: color var(--d3v-t-fast, .15s), background var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-remove:hover { color: var(--d3v-status-danger, #dc2626); background: var(--d3v-status-danger-soft, #fef2f2); }

.wf-json-builder .wjb-foot { padding: 12px 2px 4px; }
.wf-json-builder .wjb-add {
    color: var(--d3v-accent, #4f46e5);
    background: var(--d3v-accent-soft, #eef2ff);
    border: 1px solid var(--d3v-accent-border, #c7d2fe);
    font-weight: 600;
    transition: background var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-add:hover { background: var(--d3v-accent-soft-hover, #e0e7ff); }

/* preview */
.wf-json-builder .wjb-preview {
    margin-top: 14px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
}
.wf-json-builder .wjb-preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 12px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-family: Menlo, Monaco, Consolas, monospace;
}
/* Composed / Resolved toggle */
.wf-json-builder .wjb-preview-toggle {
    margin-left: auto;
    display: inline-flex;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
    background: var(--d3v-bg-primary, #fff);
}
.wf-json-builder .wjb-pv-mode {
    border: 0;
    background: transparent;
    color: var(--d3v-text-secondary, #64748b);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 9px;
    cursor: pointer;
    text-transform: none;
    transition: background var(--d3v-t-fast, .15s), color var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-pv-mode + .wjb-pv-mode { border-left: 1px solid var(--d3v-border, #e2e8f0); }
.wf-json-builder .wjb-pv-mode:hover { background: var(--d3v-bg-secondary, #f8fafc); }
.wf-json-builder .wjb-pv-mode.on { background: var(--d3v-accent, #4f46e5); color: #fff; }
.wf-json-builder .wjb-preview-sub { text-transform: none; letter-spacing: 0; font-weight: 400; }
.wf-json-builder .wjb-preview-body {
    margin: 0;
    padding: 12px 14px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-primary, #fff);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow: auto;
}
.wf-json-builder .wjb-preview-body .wjb-ref {
    color: var(--d3v-status-info, #0369a1);
    background: var(--d3v-status-info-soft, #e0f2fe);
    border: 1px solid var(--d3v-status-info-border, #bae6fd);
    border-radius: 4px;
    padding: 1px 5px;
    font-weight: 600;
}
.wf-json-builder .wjb-preview-body .wjb-empty { color: var(--d3v-text-tertiary, #94a3b8); }

/* the Build button on the json input row */
.wf-json-toolbar .wf-json-open-builder { font-weight: 600; }
.wf-json-toolbar .wf-json-open-builder .fa { margin-right: 4px; }

/* ----------------------------------------------------------------
   Added by shashank2104 on 2026-07-14 - R0-3947
   Value-type segmented toggle (Literal / Worker / Obj / Table),
   nested-object indentation, and the inline table (array-of-object)
   editor. Neutral surfaces; the active kind carries a single accent.
   ---------------------------------------------------------------- */
.wf-json-builder .wjb-kind {
    border: 0;
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 10.5px;
    font-weight: 700;
    padding: 6px 8px;
    cursor: pointer;
    transition: background var(--d3v-t-fast, .15s), color var(--d3v-t-fast, .15s);
}
.wf-json-builder .wjb-kind + .wjb-kind { border-left: 1px solid var(--d3v-border, #e2e8f0); }
.wf-json-builder .wjb-kind:hover { background: var(--d3v-bg-secondary, #f8fafc); }
.wf-json-builder .wjb-kind.on.literal { background: var(--d3v-accent, #4f46e5); color: #fff; }
.wf-json-builder .wjb-kind.on.worker { background: var(--d3v-status-info, #0ea5e9); color: #fff; }
.wf-json-builder .wjb-kind.on.object { background: #7c3aed; color: #fff; }
.wf-json-builder .wjb-kind.on.table { background: var(--d3v-status-success, #16a34a); color: #fff; }

/* object / table value-cell notes */
.wf-json-builder .wjb-objnote,
.wf-json-builder .wjb-tablenote {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    padding: 5px 2px;
}
.wf-json-builder .wjb-objnote { color: #7c3aed; }
.wf-json-builder .wjb-tablenote { color: var(--d3v-status-success, #16a34a); }

/* nested object children */
.wf-json-builder .wjb-children {
    margin: 2px 0 6px 20px;
    border-left: 2px solid var(--d3v-accent-border, #c7d2fe);
    padding-left: 10px;
}
.wf-json-builder .wjb-children .wjb-row {
    padding-left: 4px;
    padding-right: 4px;
}
.wf-json-builder .wjb-child-foot { padding: 6px 4px 2px; }

/* inline table editor (array-of-objects) */
.wf-json-builder .wjb-table-wrap {
    margin: 2px 0 8px 20px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
    background: var(--d3v-bg-primary, #fff);
}
.wf-json-builder .wjb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    display: block;
    max-height: 260px;
    overflow: auto;
}
.wf-json-builder .wjb-table thead th {
    position: sticky;
    top: 0;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    padding: 4px 6px;
    text-align: left;
    white-space: nowrap;
}
.wf-json-builder .wjb-table td { border-bottom: 1px solid var(--d3v-border-soft, #eef2f7); padding: 0; }
.wf-json-builder .wjb-table tr:last-child td { border-bottom: 0; }
.wf-json-builder .wjb-colname {
    width: 88px;
    border: 1px solid transparent;
    background: transparent;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d3v-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 4px);
}
.wf-json-builder .wjb-colname:focus { outline: none; border-color: var(--d3v-accent, #4f46e5); background: #fff; color: var(--d3v-text-primary, #0f172a); }
.wf-json-builder .wjb-cell {
    width: 100%;
    min-width: 78px;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--d3v-text-primary, #0f172a);
}
.wf-json-builder .wjb-cell:focus { outline: 2px solid var(--d3v-accent-soft, rgba(79,70,229,.25)); outline-offset: -2px; background: #fff; border-radius: 4px; }
.wf-json-builder .wjb-table tbody tr:hover td { background: var(--d3v-bg-secondary, #fbfcfe); }
.wf-json-builder .wjb-colx, .wf-json-builder .wjb-rowx { width: 30px; text-align: center; }
.wf-json-builder .wjb-col-remove, .wf-json-builder .wjb-row-remove {
    border: 0;
    background: transparent;
    color: var(--d3v-text-tertiary, #cbd5e1);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 5px;
}
.wf-json-builder .wjb-col-remove:hover, .wf-json-builder .wjb-row-remove:hover { color: var(--d3v-status-danger, #dc2626); }
.wf-json-builder .wjb-col-add { color: var(--d3v-text-secondary, #64748b); }
.wf-json-builder .wjb-table-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-top: 1px solid var(--d3v-border, #e2e8f0);
}
.wf-json-builder .wjb-table-foot .wjb-row-add {
    color: var(--d3v-accent, #4f46e5);
    background: var(--d3v-accent-soft, #eef2ff);
    border: 1px solid var(--d3v-accent-border, #c7d2fe);
    font-weight: 600;
}
.wf-json-builder .wjb-table-count { font-size: 11px; color: var(--d3v-text-tertiary, #94a3b8); margin-left: auto; }

/* ----------------------------------------------------------------
   Added by shashank2104 on 2026-07-14 - R0-3947
   List kind: an array-of-objects where each element is a nested,
   wireable sub-form (unlike the flat Table). Each item is a card
   holding its own builder rows + Add field; the list has Add item.
   ---------------------------------------------------------------- */
.wf-json-builder .wjb-kind.on.list { background: var(--d3v-status-info, #0891b2); color: #fff; }
.wf-json-builder .wjb-listnote { font-size: 11.5px; font-weight: 600; color: #0891b2; padding: 5px 2px; }

.wf-json-builder .wjb-list {
    margin: 2px 0 8px 20px;
    border-left: 2px solid #a5f3fc;
    padding-left: 10px;
}
.wf-json-builder .wjb-list-item {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-primary, #fff);
    margin-bottom: 8px;
    overflow: hidden;
}
.wf-json-builder .wjb-list-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.wf-json-builder .wjb-list-item-title {
    font: 700 10px/1 Menlo, Monaco, Consolas, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
}
.wf-json-builder .wjb-item-remove {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--d3v-text-tertiary, #cbd5e1);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.wf-json-builder .wjb-item-remove:hover { color: var(--d3v-status-danger, #dc2626); }
.wf-json-builder .wjb-list-item-body { padding: 8px 10px; }
.wf-json-builder .wjb-list-foot { padding: 2px 2px 4px; }
.wf-json-builder .wjb-item-add {
    color: #0891b2;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    font-weight: 600;
}
.wf-json-builder .wjb-item-add:hover { background: #cffafe; }

/* ================================================================
   Added by shashank2104 on 2026-07-14 - R0-3947 - Declutter (direction A):
   compact type chip + kind-picker popover, foldable groups, kind-tinted
   nesting rails, wired-value chip, hover-revealed row actions.
   ================================================================ */

/* the kind popover is appended into the scrollable .modal-body, which must be a positioning context */
.wf-json-builder-modal .modal-body { position: relative; }

/* per-kind color tokens (dot / accent / soft bg) */
.wf-json-builder .k-literal { --wjk: #64748b; --wjk-bg: #f1f5f9; --wjk-bd: #e2e8f0; }
.wf-json-builder .k-worker  { --wjk: #0ea5e9; --wjk-bg: #e0f2fe; --wjk-bd: #bae6fd; }
.wf-json-builder .k-obj     { --wjk: #7c3aed; --wjk-bg: #f5f3ff; --wjk-bd: #ddd6fe; }
.wf-json-builder .k-table   { --wjk: #16a34a; --wjk-bg: #f0fdf4; --wjk-bd: #bbf7d0; }
.wf-json-builder .k-list    { --wjk: #0891b2; --wjk-bg: #ecfeff; --wjk-bd: #a5f3fc; }

/* fold chevron */
.wf-json-builder .wjb-fold {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 24px; cursor: pointer; user-select: none;
    color: var(--d3v-text-tertiary, #94a3b8); font-size: 11px;
    border-radius: var(--d3v-r-sm, 4px); transition: color .15s, background .15s;
}
.wf-json-builder .wjb-fold:hover { color: var(--d3v-text-secondary, #475569); background: var(--d3v-bg-secondary, #f1f5f9); }
.wf-json-builder .wjb-fold-none { cursor: default; }

/* THE compact type chip (replaces the 5-button strip) */
.wf-json-builder .wjb-chip {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border: 1px solid var(--wjk-bd, #e2e8f0); background: var(--wjk-bg, #fff); color: var(--wjk, #64748b);
    border-radius: 999px; padding: 3px 8px 3px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer;
    transition: filter .12s, box-shadow .12s;
}
.wf-json-builder .wjb-chip:hover { filter: brightness(.97); box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15,23,42,.08)); }
.wf-json-builder .wjb-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wjk, #64748b); }
.wf-json-builder .wjb-chip-glyph { font-family: Menlo, Monaco, Consolas, monospace; font-weight: 800; font-size: 11px; }
.wf-json-builder .wjb-chip-count { color: var(--d3v-text-tertiary, #94a3b8); font-weight: 600; }
.wf-json-builder .wjb-chip-car { color: var(--d3v-text-tertiary, #94a3b8); font-size: 10px; margin-left: 1px; }

/* kind-picker popover (openKindMenu) */
.wf-json-builder-modal .wjb-kmenu-layer { position: absolute; inset: 0; z-index: 20; }
.wf-json-builder-modal .wjb-kmenu-backdrop { position: absolute; inset: 0; }
.wf-json-builder-modal .wjb-kmenu {
    position: absolute; min-width: 190px; background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0); border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-md, 0 8px 24px rgba(15,23,42,.14)); padding: 5px;
}
.wf-json-builder-modal .wjb-kmenu-head {
    font: 700 9.5px/1 Menlo, Monaco, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8); padding: 5px 8px 7px;
}
.wf-json-builder-modal .wjb-kopt {
    display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--d3v-r-sm, 6px);
    cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--d3v-text-primary, #0f172a);
}
.wf-json-builder-modal .wjb-kopt:hover { background: var(--d3v-bg-secondary, #f8fafc); }
.wf-json-builder-modal .wjb-kopt.cur { background: var(--d3v-bg-tertiary, #f1f5f9); }
.wf-json-builder-modal .wjb-kd { width: 9px; height: 9px; border-radius: 50%; background: var(--wjk, #64748b); flex: 0 0 auto; }
.wf-json-builder-modal .wjb-kg { width: 16px; text-align: center; font-family: Menlo, Monaco, Consolas, monospace; font-weight: 800; color: var(--wjk, #64748b); }
.wf-json-builder-modal .wjb-kchk { color: transparent; font-size: 11px; }
.wf-json-builder-modal .wjb-kopt.cur .wjb-kchk { color: var(--d3v-accent, #4f46e5); }
.wf-json-builder-modal .wjb-kt { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--d3v-text-tertiary, #94a3b8); }

/* wired value as a read-only chip (click -> editWire reveals the selects) */
.wf-json-builder .wjb-wire-chip {
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; cursor: pointer;
    background: #e0f2fe; border: 1px solid #bae6fd; color: #0369a1;
    border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600;
    transition: filter .12s;
}
.wf-json-builder .wjb-wire-chip:hover { filter: brightness(.97); }
.wf-json-builder .wjb-wire-node { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.wf-json-builder .wjb-wire-arw { opacity: .65; }
.wf-json-builder .wjb-wire-out { background: #fff; border: 1px solid #bae6fd; border-radius: 999px; padding: 1px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-json-builder .wjb-wire-edit-i { margin-left: 2px; color: #60a5fa; font-size: 10.5px; }

/* kind-tinted nesting rails + collapse */
.wf-json-builder .wjb-children.k-obj { border-left-color: var(--wjk-bd, #ddd6fe); }
.wf-json-builder .wjb-children.collapsed,
.wf-json-builder .wjb-list.collapsed,
.wf-json-builder .wjb-table-wrap.collapsed { display: none; }

/* quiet resting state: reveal remove / add-field on hover */
.wf-json-builder .wjb-remove { opacity: 0; transition: opacity .12s, color .15s, background .15s; }
.wf-json-builder .wjb-row:hover .wjb-remove,
.wf-json-builder .wjb-row:focus-within .wjb-remove { opacity: 1; }
.wf-json-builder .wjb-child-foot,
.wf-json-builder .wjb-list-foot { opacity: .55; transition: opacity .12s; }
.wf-json-builder .wjb-children:hover .wjb-child-foot,
.wf-json-builder .wjb-list:hover .wjb-list-foot { opacity: 1; }

/**
 * wf-worker-busy.css
 * Added by shashank2104 on 2026-09-08
 *
 * Busy indicator for the worker-config body while it renders.
 *
 * Replaces the per-input `fa fa-spin fa-refresh` markers (40+ at once on a wide worker)
 * with ONE indicator for the whole body.
 *
 * Same shape as plugins.css `.pl-processing` (veil + centred spinner) but toned down,
 * because the stock one fades the body too hard and pulls the eye:
 *   - veil  0.70 -> 0.35 alpha, so the content behind stays legible rather than greyed out
 *   - spinner 40px -> 24px, border 4px -> 2px
 *   - track/accent come from --d3v-* tokens instead of hardcoded #f3f3f3 / #3498db
 *   - `pointer-events: none`, so the brief hold after the render never eats a click
 *
 * SCOPING: the worker-config modal is body-mounted (BODY > .workflow-modal > .modal-dialog
 * > .modal-content > .modal-body), so it is NOT inside div.workflow and cannot be scoped
 * under it. Both mount points are listed: the modal body, and the view root for the
 * docked / inline / split layouts where getBodyProcessingEl() falls back to this.$el.
 *
 * NOTE: the render is one long synchronous block, so this is only ever painted AFTER it.
 * See BODY_PROCESSING_MIN_VISIBLE_MS in ConfigureWfWorkerFormBuilderNodeLifecycle.js -
 * without that hold it would exist for a single ~16ms frame and never register.
 */

.workflow-modal .modal-body.wf-worker-busy,
div.workflow .wf-worker-busy {
    position: relative;
}

/* Light veil - signals "busy" without greying the content out. */
.workflow-modal .modal-body.wf-worker-busy::after,
div.workflow .wf-worker-busy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    z-index: 1000;
}

/* Small, calm spinner. */
.workflow-modal .modal-body.wf-worker-busy::before,
div.workflow .wf-worker-busy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid var(--d3v-border, #E2E8F0);
    border-top-color: var(--d3v-accent, #3B82F6);
    border-radius: 50%;
    animation: wf-worker-busy-spin 0.8s linear infinite;
    pointer-events: none;
    z-index: 1001;
}

@keyframes wf-worker-busy-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Static ring when the viewer has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .workflow-modal .modal-body.wf-worker-busy::before,
    div.workflow .wf-worker-busy::before {
        animation: none;
    }
}

/*
 * CSS for template: wf-global-search-tpl.tpl
 * Source: javascripts/templates/modular/builder/header/wf-global-search-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-sidebar-search {
display: flex;
    flex-direction: column;
    height: 100%;
}

.wf-sidebar-search .wf-sidebar-top-line {
display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.wf-sidebar-search .wf-sidebar-top-line .wf-search-type-dd {
flex-shrink: 0;
}

.wf-sidebar-search .wf-sidebar-top-line .wf-search-input-container {
flex: 1;
}

.wf-sidebar-search .wf-sidebar-top-line .wf-search-input-container input {
width: 100%;
}

.wf-sidebar-search .wf-sidebar-results {
flex: 1;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
}

.wf-sidebar-search .wf-sidebar-actions {
margin-top: 10px;
    text-align: center;
}

.wf-sidebar-search .toggle-wf-ai-search {
display: none !important;
}



/*
 * CSS for template: wf-header-compact-dropdowns-tpl.tpl
 * Source: javascripts/templates/modular/builder/header/wf-header-compact-dropdowns-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-dropdowns-list li.dropdown .dropdown-menu li {
position: relative;
}

div.workflow .wf-dropdowns-list li.dropdown .dropdown-menu li.dz-clickable>a {
pointer-events: none;
}

div.workflow .wf-dropdowns-list li.dropdown .dropdown-menu li {
position: relative;
}

div.workflow .wf-dropdowns-list li.dropdown .dropdown-menu li.dz-clickable>a {
pointer-events: none;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown:hover>.dropdown-menu {
display: block;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown.open>.dropdown-menu,
div.workflow .header-left-compact .wf-dropdowns .dropdown:hover>.dropdown-menu {
display: block !important;
}


/* =====================================================================
   Clean modern header menu — match target design (added by shashank2104)
   Scoped to the workflow header dropdowns; uses --d3v-* tokens only.
   ===================================================================== */

/* Menu row: flat, gap-spaced, no Bootstrap borders */
div.workflow .wf-dropdowns,
div.workflow .wf-dropdowns .wf-dropdowns-list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    background: transparent;
}

/* Kill the legacy <li> hover/open background (#F1F3F4) so ONLY the <a> chip
   shows — otherwise the li box + the a chip stack into a double background. */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown:hover,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown.open {
    background: transparent !important;
    padding: 0;
}

/* Top-level menu button: icon + label pill
   (extra .wf-dropdowns ancestor raises specificity above the legacy
    color:black / font-weight:600 rules in wf-modern-header.css) */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--d3v-r-md);
    transition: var(--d3v-t-fast);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    outline: none !important;
}
/* Kill the blue browser focus ring on the toggles */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a:focus,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a:active {
    outline: none !important;
    box-shadow: none;
}

/* Muted icons that pick up accent on hover/active */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a > i {
    color: var(--d3v-text-muted);
    font-size: 13px;
    transition: var(--d3v-t-fast);
}

/* Hover: subtle pill, darker label */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a:hover,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a:focus {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
    text-decoration: none;
}
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a:hover > i {
    color: var(--d3v-text-secondary);
}

/* Open / active: flat soft chip (no white+shadow popping) with accent text */
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown.open > a,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown.open > a:hover,
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown.open > a:focus {
    background: var(--d3v-bg-hover);
    border-color: transparent;
    color: var(--d3v-accent);
    box-shadow: none;
}
div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown.open > a > i {
    color: var(--d3v-accent);
}

/* ---- Dropdown panel ---- */
div.workflow .wf-dropdowns-list .dropdown-menu {
    margin-top: 8px;
    min-width: 260px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-md);
}

/* Dropdown items: aligned icon + label, inset rounded hover row */
div.workflow .wf-dropdowns-list .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    border-radius: var(--d3v-r-md);
    transition: var(--d3v-t-fast);
    white-space: nowrap;
}
div.workflow .wf-dropdowns-list .dropdown-menu > li > a > i {
    width: 16px;
    text-align: center;
    color: var(--d3v-text-muted);
    font-size: 13px;
    flex: 0 0 16px;
    transition: var(--d3v-t-fast);
}

div.workflow .wf-dropdowns-list .dropdown-menu > li > a:hover,
div.workflow .wf-dropdowns-list .dropdown-menu > li > a:focus,
div.workflow .wf-dropdowns-list .dropdown-menu > li:hover > a {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
    text-decoration: none;
}
div.workflow .wf-dropdowns-list .dropdown-menu > li > a:hover > i {
    color: var(--d3v-accent);
}

/* Submenu (e.g. Misc ▸) — caret + nested panel. The rows are flex, so the
   legacy `float: right` caret is ignored and lands right after the text.
   Push it to the row's edge with auto margin and center it vertically. */
div.workflow .wf-dropdowns-list .dropdown-submenu > a:after,
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu > a:after {
    float: none;
    margin: 0 0 0 auto;          /* right edge for right-opening submenus */
    align-self: center;
    border-left-color: var(--d3v-text-muted);
}
div.workflow .wf-dropdowns-list .dropdown-submenu:hover > a:after,
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu:hover > a:after {
    border-left-color: var(--d3v-accent);
}
/* Left-opening variant (.dropdown-submenu-left) — caret on the left edge */
div.workflow .wf-dropdowns-list .dropdown-submenu.dropdown-submenu-left > a:after,
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu.dropdown-submenu-left > a:after {
    margin: 0 auto 0 0;          /* left edge for left-opening submenus */
    border-right-color: var(--d3v-text-muted);
}
div.workflow .wf-dropdowns-list .dropdown-submenu.dropdown-submenu-left:hover > a:after,
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu.dropdown-submenu-left:hover > a:after {
    border-right-color: var(--d3v-accent);
}
div.workflow .wf-dropdowns-list .dropdown-submenu:hover > a {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}
div.workflow .wf-dropdowns-list .dropdown-submenu > .dropdown-menu {
    margin-top: -7px;
}

/* Divider */
div.workflow .wf-dropdowns-list .dropdown-menu .divider {
    height: 1px;
    margin: 6px 6px;
    background: var(--d3v-border);
}

/* Checked item: accent label + a right-aligned check so the LABEL stays
   aligned with the other rows (the inline check no longer shifts text). */
div.workflow .wf-dropdowns-list .dropdown-menu > li.checked > a {
    color: var(--d3v-accent);
    font-weight: 500;
}
div.workflow .wf-dropdowns-list .dropdown-menu > li.checked > a > i {
    color: var(--d3v-accent);
}
div.workflow .wf-dropdowns-list .dropdown-menu > li.checked > a::after {
    content: '\2713';            /* ✓ */
    margin-left: auto;
    padding-left: 16px;
    color: var(--d3v-accent);
    font-size: 12px;
    font-weight: 700;
}
/* Suppress the legacy absolutely-positioned left checkmark slot (left:6px)
   so only the single clean right-aligned check above shows. */
div.workflow .wf-dropdowns-list .dropdown-menu > li.checked::after,
div.workflow .wf-dropdowns-list .dropdown-menu > li.checked::before {
    content: none !important;
    display: none !important;
}


/* =====================================================================
   Collapsed (responsive) hamburger menu — the .header-left-compact
   dropdown holds the SAME wf-dropdowns-list rendered vertically, each
   top-level menu as a li.dropdown-submenu. Style it like the others.
   ===================================================================== */

/* Force the inner list to a clean vertical block (overrides the flex
   row used by the full-width header bar). */
div.workflow .header-left-compact .wf-dropdowns,
div.workflow .header-left-compact .wf-dropdowns .wf-dropdowns-list {
    display: block;
    width: 100%;
    gap: 0;
}

/* Outer panel — modern rounded surface */
div.workflow .header-left-compact .dropdown-menu {
    margin-top: 8px;
    min-width: 240px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-md);
}

/* Top-level rows (File, View, …) — clean icon + label rows with pill hover */
div.workflow .header-left-compact .wf-dropdowns-list > li.dropdown-submenu > a,
div.workflow .header-left-compact .wf-dropdowns-list > li.dropdown > a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 9px 12px;
    margin: 1px 4px;
    font-size: 13px;
    font-weight: 400;
    border: none;
    border-radius: var(--d3v-r-md);
    transition: var(--d3v-t-fast);
}
div.workflow .header-left-compact .wf-dropdowns-list > li > a > i {
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
    color: var(--d3v-text-muted);
    font-size: 13px;
    transition: var(--d3v-t-fast);
}
div.workflow .header-left-compact .wf-dropdowns-list > li.dropdown-submenu > a:hover,
div.workflow .header-left-compact .wf-dropdowns-list > li.dropdown-submenu.open > a,
div.workflow .header-left-compact .wf-dropdowns-list > li.dropdown > a:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}
div.workflow .header-left-compact .wf-dropdowns-list > li > a:hover > i {
    color: var(--d3v-accent);
}



/* wf-header-more.css - Workflow header overflow ("More") menu + reset-outputs popover.
 *
 * RE-AUTHORED (2026-06-19): Suri's originals (markup + render wiring + CSS) were never
 * committed and are unrecoverable. The feature was rebuilt from the surviving item
 * templates (#wf-header-more-tpl / #wf-header-reset-tpl) + the still-bound event
 * handlers (toggleMoreMenu / toggleResetPopover / onHeaderReset in MainViewCore.js).
 * Markup wrappers added to wf-header-compact-dropdowns-tpl.tpl; items injected in
 * MainViewCore.headerLeftCompactDropdownShown. Pixel values are fresh, not the originals.
 *
 * Both flyouts live inside the modern compact header dropdown and open to the side,
 * matching the native Run/Tools dropdown-submenus. Open state is the custom
 * .wf-more-open / .wf-pop-open class toggled by the existing handlers.
 *
 * Scoped under .wf-design-modern; uses the --wf-* tokens (light + dark for free).
 */

/* ---- Flyout host rows ---------------------------------------------------- */
.wf-header-more,
.wf-header-reset {
    position: relative;
}

.wf-header-more-toggle,
.wf-header-reset-toggle {
    display: flex !important;
    align-items: center;
    gap: var(--wf-sp-2, 8px);
    cursor: pointer;
}

.wf-more-caret {
    margin-left: auto;
    color: var(--wf-text-muted, #94A3B8);
    font-size: var(--wf-fs-sm, 12px);
}

/* ---- Flyout panels (hidden until open) ----------------------------------- */
.wf-more-menu,
.wf-reset-pop {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 2px;
    min-width: 240px;
    padding: var(--wf-sp-1, 4px);
    list-style: none;
    background: var(--wf-bg-surface, #FFFFFF);
    border: 1px solid var(--wf-border, #E2E8F0);
    border-radius: var(--wf-r-md, 8px);
    box-shadow: var(--wf-sh-lg, 0 10px 25px rgba(0, 0, 0, 0.12));
    z-index: var(--wf-z-tooltip, 100);
}

.wf-header-more.wf-more-open .wf-more-menu,
.wf-header-reset.wf-pop-open .wf-reset-pop {
    display: block;
}

/* Top-right execution controls use the same templates as the compact menu, but
   their panels should open as dropdowns below the toolbar buttons. */
.wf-execution-controls .wf-header-more .wf-more-menu,
.wf-execution-controls .wf-header-reset .wf-reset-pop {
    top: 100%;
    left: auto;
    right: 0;
    margin-top: 2px;
    margin-left: 0;
}

/* Flip to the left when there isn't room on the right (best-effort). */
@media (max-width: 1100px) {
    .wf-more-menu,
    .wf-reset-pop {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 2px;
    }

    .wf-execution-controls .wf-header-more .wf-more-menu,
    .wf-execution-controls .wf-header-reset .wf-reset-pop {
        right: 0;
        margin-right: 0;
    }
}

/* ---- "More" menu items --------------------------------------------------- */
.wf-more-menu li {
    list-style: none;
}

.wf-more-menu li > a {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2, 8px);
    padding: var(--wf-sp-2, 8px) var(--wf-sp-3, 12px);
    border-radius: var(--wf-r-sm, 4px);
    color: var(--wf-text-secondary, #475569);
    font-size: var(--wf-fs-base, 13px);
    white-space: nowrap;
    text-decoration: none;
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wf-more-menu li > a:hover {
    background: var(--wf-bg-card, #F8FAFC);
    color: var(--wf-text-primary, #1E293B);
}

.wf-more-menu li > a i {
    width: 16px;
    text-align: center;
    color: var(--wf-text-muted, #94A3B8);
}

/* Count badge on the execution-report item */
.wf-kebab-badge {
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--wf-r-full, 9999px);
    background: var(--wf-accent, #3B82F6);
    color: var(--wf-text-inverse, #FFFFFF);
    font-size: var(--wf-fs-xs, 11px);
    font-weight: 700;
    line-height: 18px;
}

/* ---- Reset-outputs popover ----------------------------------------------- */
.wf-reset-pop {
    padding: 0;
    min-width: 300px;
}

.wf-reset-head {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2, 8px);
    padding: var(--wf-sp-3, 12px);
    border-bottom: 1px solid var(--wf-border, #E2E8F0);
    font-weight: 600;
    color: var(--wf-text-primary, #1E293B);
}

.wf-reset-head i {
    color: var(--wf-accent, #3B82F6);
}

.wf-reset-body {
    padding: var(--wf-sp-2, 8px) var(--wf-sp-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--wf-sp-1, 4px);
}

.wf-reset-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--wf-sp-2, 8px);
    margin: 0;
    padding: var(--wf-sp-1, 4px) var(--wf-sp-2, 8px);
    border-radius: var(--wf-r-sm, 4px);
    font-weight: 400;
    color: var(--wf-text-secondary, #475569);
    cursor: pointer;
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wf-reset-opt:hover {
    background: var(--wf-bg-card, #F8FAFC);
}

.wf-reset-opt input[type="radio"] {
    margin-top: 3px;
}

.wf-reset-cleanup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wf-sp-2, 8px);
    margin-top: var(--wf-sp-1, 4px);
    padding-top: var(--wf-sp-2, 8px);
    border-top: 1px dashed var(--wf-border, #E2E8F0);
}

.wf-reset-cleanup {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2, 8px);
    margin: 0;
    font-weight: 400;
    color: var(--wf-text-secondary, #475569);
    cursor: pointer;
}

.wf-reset-cleanup-preview {
    color: var(--wf-text-muted, #94A3B8);
    cursor: pointer;
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wf-reset-cleanup-preview:hover {
    color: var(--wf-accent, #3B82F6);
}

.wf-reset-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--wf-sp-2, 8px);
    padding: var(--wf-sp-2, 8px) var(--wf-sp-3, 12px);
    border-top: 1px solid var(--wf-border, #E2E8F0);
    background: var(--wf-bg-card, #F8FAFC);
    border-radius: 0 0 var(--wf-r-md, 8px) var(--wf-r-md, 8px);
}

.wf-reset-foot .btn {
    font-size: var(--wf-fs-sm, 12px);
}

/*
 * CSS for template: wf-search-container-dd-tpl.tpl
 * Source: javascripts/templates/modular/builder/header/wf-search-container-dd-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-sidebar-search .wf-open-in-navbar,
.wf-sidebar-search .wf-search-close {
display: none !important;
}



/*
 * CSS for template: wf-input-default-tpl.tpl
 * Source: javascripts/templates/modular/builder/inputs/wf-input-default-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.popover.wf-input-default-val .popover-content {
height: 200px;
    overflow: auto;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row div.bootstrap-select,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row select.selectpicker-wf,

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row div.bootstrap-select,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row select.selectpicker-wf {
/*width: 150px!important;*/
    padding: 0;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource_container>.datasource-options>.row,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource_container>.datasource-options>.row,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource_container>.datasource-options>.row {
display: flex !important;
    /*align-items: center;*/
    flex-wrap: wrap;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource_container>.datasource-options>.row>div,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource_container>.datasource-options>.row>div,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource_container>.datasource-options>.row>div {
margin: 0 10px 10px 0 !important;
    width: calc(33% - 10px);
    padding: 0;
}


/** DW-2867 - Added by shashank2104 on 04/22/2026 - Run Worker datasource picker styles **/
.d3view-workflow .wf-worker-execution-picker {
    padding: 8px;
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-sm);
    transition: var(--d3v-t-fast);
}
.d3view-workflow .wf-worker-execution-picker:hover {
    box-shadow: var(--d3v-sh-md);
}
.d3view-workflow .wf-worker-execution-picker .ds-label label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-muted);
    margin-bottom: 4px;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-summary {
    padding: 6px 8px;
    background: var(--d3v-bg-subtle);
    border-radius: var(--d3v-r-sm);
    font-size: 12px;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-configure-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-test-result {
    font-size: 11px;
    color: var(--d3v-text-muted);
    max-width: 60%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-test-result.text-danger {
    color: var(--d3v-status-danger, #d9534f);
}


/*
 * CSS for template: wf-builder-mainContainer.tpl
 * Source: javascripts/templates/modular/builder/main/wf-builder-mainContainer.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-thumbnail-enlarged .d3view-modal-header h4.lead>img {
display: none !important;
}

div.wf-thumbnail-enlarged .d3view-modal-header h4.lead>img {
display: none !important;
}

/* ================================================================
   DW-2774 -- Workflow Modern Theme: Dark Mode Blanket Overrides
   Scoped under div.workflow.wf-design-modern.wf-dark
   Fixes common Bootstrap/third-party selectors that inherit
   white backgrounds and black text in dark mode.
   ================================================================ */


/* ----------------------------------------------------------------
   1. BOOTSTRAP CORE OVERRIDES
   ---------------------------------------------------------------- */

/* Panels */
div.workflow.wf-design-modern.wf-dark .panel,
body.wf-design-modern.wf-dark .panel,
div.workflow.wf-design-modern.wf-dark .panel-default,
body.wf-design-modern.wf-dark .panel-default,
div.workflow.wf-design-modern.wf-dark .panel-body,
body.wf-design-modern.wf-dark .panel-body,
div.workflow.wf-design-modern.wf-dark .panel-heading,
body.wf-design-modern.wf-dark .panel-heading,
div.workflow.wf-design-modern.wf-dark .panel-footer,
body.wf-design-modern.wf-dark .panel-footer {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Wells */
div.workflow.wf-design-modern.wf-dark .well,
body.wf-design-modern.wf-dark .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* List groups */
div.workflow.wf-design-modern.wf-dark .list-group-item,
body.wf-design-modern.wf-dark .list-group-item,
div.workflow.wf-design-modern.wf-dark li.list-group-item,
body.wf-design-modern.wf-dark li.list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .list-group-item:hover,
body.wf-design-modern.wf-dark .list-group-item:hover {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .list-group-item.active,
body.wf-design-modern.wf-dark .list-group-item.active,
div.workflow.wf-design-modern.wf-dark .list-group-item.active:hover,
body.wf-design-modern.wf-dark .list-group-item.active:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

/* Sidebar nav items must stay transparent — override generic list-group-item dark bg */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item {
    background-color: transparent !important;
    border-color: transparent !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a:hover,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    color: var(--wf-text-secondary) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a {
    border-left-color: var(--wf-accent) !important;
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-accent) !important;
}

/* Modals (inside workflow container) */
div.workflow.wf-design-modern.wf-dark .modal-content,
body.wf-design-modern.wf-dark .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-header,
body.wf-design-modern.wf-dark .modal-header {
    border-bottom-color: var(--wf-border) !important;
    background-color: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-header .modal-title,
body.wf-design-modern.wf-dark .modal-header .modal-title,
div.workflow.wf-design-modern.wf-dark .modal-header h4,
body.wf-design-modern.wf-dark .modal-header h4 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-body,
body.wf-design-modern.wf-dark .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-footer,
body.wf-design-modern.wf-dark .modal-footer {
    border-top-color: var(--wf-border) !important;
    background-color: var(--wf-bg-surface) !important;
}

/* Dropdowns — generalized for both light + dark (tokens handle color switching) */
div.workflow.wf-design-modern .dropdown-menu,
body.wf-design-modern .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border-radius: var(--wf-r-md) !important;
    padding: 4px 0 !important;
}

div.workflow.wf-design-modern .dropdown-menu > li > a,
body.wf-design-modern .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
    padding: 7px 16px !important;
    transition: var(--wf-t-fast);
}

/* Generic li:hover for ALL dropdown menus — overrides Bootstrap's #f5f5f5 default */
div.workflow.wf-design-modern ul.dropdown-menu > li:hover,
div.workflow.wf-design-modern .wf-dropdowns > li:hover,
div.workflow.wf-design-modern .dropdown-menu > li:hover:not(.divider):not(.disabled),
body.wf-design-modern ul.dropdown-menu > li:hover,
body.wf-design-modern .wf-dropdowns-list > li:hover,
body.wf-design-modern .wf-dropdowns-list > li.open,
body.wf-design-modern .dropdown-menu > li:hover:not(.divider):not(.disabled) {
    background-color: var(--wf-accent-light) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li > a:hover,
body.wf-design-modern .dropdown-menu > li > a:hover,
div.workflow.wf-design-modern .dropdown-menu > li > a:focus,
body.wf-design-modern .dropdown-menu > li > a:focus {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li.active > a,
body.wf-design-modern .dropdown-menu > li.active > a {
    background-color: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* .open state — parent <li> that triggered a dropdown */
div.workflow.wf-design-modern .dropdown.open > a,
body.wf-design-modern .dropdown.open > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* Dropdown submenu hover */
div.workflow.wf-design-modern .dropdown-submenu:hover > a,
body.wf-design-modern .dropdown-submenu:hover > a {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern .dropdown-submenu > .dropdown-menu,
body.wf-design-modern .dropdown-submenu > .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-md) !important;
}

div.workflow.wf-design-modern .dropdown-menu .divider,
body.wf-design-modern .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0;
}

div.workflow.wf-design-modern .dropdown-menu > li.disabled > a,
body.wf-design-modern .dropdown-menu > li.disabled > a {
    color: var(--wf-text-disabled) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li.disabled:hover,
body.wf-design-modern .dropdown-menu > li.disabled:hover {
    background-color: transparent !important;
}

/* Dropdown checked items — add left padding so checkmark doesn't overlap text */
div.workflow.wf-design-modern .dropdown-menu li.checked > a,
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.checked a,
body.wf-design-modern .dropdown-menu li.checked > a {
    padding-left: 24px !important;
}

/* Checkmark color — uses accent for both themes */
div.workflow.wf-design-modern .dropdown-menu li.checked::after,
div.workflow.wf-design-modern .d3view-plugin-header li.checked::after,
body.wf-design-modern .dropdown-menu li.checked::after,
body.wf-design-modern .d3view-plugin-header li.checked::after {
    color: var(--wf-accent) !important;
}

/* Nav tabs */
div.workflow.wf-design-modern.wf-dark .nav-tabs,
body.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li > a,
body.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .nav-tabs > li > a:hover {
    border-color: transparent !important;
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a,
div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a:hover,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a:hover,
div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a:focus {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    border-bottom-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Tab content / panes */
div.workflow.wf-design-modern.wf-dark .tab-content,
body.wf-design-modern.wf-dark .tab-content,
div.workflow.wf-design-modern.wf-dark .tab-pane,
body.wf-design-modern.wf-dark .tab-pane {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Alerts */
div.workflow.wf-design-modern.wf-dark .alert,
body.wf-design-modern.wf-dark .alert {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-info,
body.wf-design-modern.wf-dark .alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #93C5FD !important;
}

div.workflow.wf-design-modern.wf-dark .alert-warning,
body.wf-design-modern.wf-dark .alert-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-danger,
body.wf-design-modern.wf-dark .alert-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-success,
body.wf-design-modern.wf-dark .alert-success {
    background-color: var(--wf-success-bg) !important;
    color: var(--wf-success-text) !important;
}

/* Tables */
div.workflow.wf-design-modern.wf-dark table,
body.wf-design-modern.wf-dark table,
div.workflow.wf-design-modern.wf-dark .table,
body.wf-design-modern.wf-dark .table {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > thead > tr > th,
body.wf-design-modern.wf-dark .table > thead > tr > th {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > tbody > tr > td,
body.wf-design-modern.wf-dark .table > tbody > tr > td {
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .table > tbody > tr:hover > td {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .table-striped > tbody > tr:nth-of-type(odd),
body.wf-design-modern.wf-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.05) !important;
}

/* Badges and labels */
div.workflow.wf-design-modern.wf-dark .badge,
body.wf-design-modern.wf-dark .badge {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .label-default,
body.wf-design-modern.wf-dark .label-default {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}


/* ----------------------------------------------------------------
   2. FORM CONTROLS
   ---------------------------------------------------------------- */

/* Text inputs, selects, textareas */
div.workflow.wf-design-modern.wf-dark .form-control,
body.wf-design-modern.wf-dark .form-control,
div.workflow.wf-design-modern.wf-dark input[type="text"],
body.wf-design-modern.wf-dark input[type="text"],
div.workflow.wf-design-modern.wf-dark input[type="number"],
body.wf-design-modern.wf-dark input[type="number"],
div.workflow.wf-design-modern.wf-dark input[type="email"],
body.wf-design-modern.wf-dark input[type="email"],
div.workflow.wf-design-modern.wf-dark input[type="password"],
body.wf-design-modern.wf-dark input[type="password"],
div.workflow.wf-design-modern.wf-dark input[type="search"],
body.wf-design-modern.wf-dark input[type="search"],
div.workflow.wf-design-modern.wf-dark textarea,
body.wf-design-modern.wf-dark textarea,
div.workflow.wf-design-modern.wf-dark select,
body.wf-design-modern.wf-dark select {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .form-control:focus,
body.wf-design-modern.wf-dark .form-control:focus,
div.workflow.wf-design-modern.wf-dark input:focus,
body.wf-design-modern.wf-dark input:focus,
div.workflow.wf-design-modern.wf-dark textarea:focus,
body.wf-design-modern.wf-dark textarea:focus,
div.workflow.wf-design-modern.wf-dark select:focus,
body.wf-design-modern.wf-dark select:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    background-color: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .form-control::placeholder,
body.wf-design-modern.wf-dark .form-control::placeholder,
div.workflow.wf-design-modern.wf-dark input::placeholder,
body.wf-design-modern.wf-dark input::placeholder,
div.workflow.wf-design-modern.wf-dark textarea::placeholder,
body.wf-design-modern.wf-dark textarea::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Input group addons */
div.workflow.wf-design-modern.wf-dark .input-group-addon,
body.wf-design-modern.wf-dark .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Labels and general text */
div.workflow.wf-design-modern.wf-dark label,
body.wf-design-modern.wf-dark label {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark h1,
body.wf-design-modern.wf-dark h1,
div.workflow.wf-design-modern.wf-dark h2,
body.wf-design-modern.wf-dark h2,
div.workflow.wf-design-modern.wf-dark h3,
body.wf-design-modern.wf-dark h3,
div.workflow.wf-design-modern.wf-dark h4,
body.wf-design-modern.wf-dark h4,
div.workflow.wf-design-modern.wf-dark h5,
body.wf-design-modern.wf-dark h5 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark p,
body.wf-design-modern.wf-dark p,
div.workflow.wf-design-modern.wf-dark span,
body.wf-design-modern.wf-dark span,
div.workflow.wf-design-modern.wf-dark div,
body.wf-design-modern.wf-dark div {
    color: inherit;
}


/* ----------------------------------------------------------------
   3. SELECT2 (3.5.x) -- scoped inside workflow
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice,
body.wf-design-modern.wf-dark .select2-container .select2-choice,
div.workflow.wf-design-modern.wf-dark .select2-container .select2-choices,
body.wf-design-modern.wf-dark .select2-container .select2-choices {
    background-color: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow,
body.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow {
    background: var(--wf-bg-elevated) !important;
    border-left-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow b,
body.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow b {
    filter: invert(0.7);
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-chosen,
body.wf-design-modern.wf-dark .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}

/* Select2 dropdown (may be outside workflow container, so use body-level selector too) */
div.workflow.wf-design-modern.wf-dark .select2-drop,
body.wf-design-modern.wf-dark .select2-drop,
.workflow-select2.wf-dark-dropdown {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-results .select2-result-label,
body.wf-design-modern.wf-dark .select2-results .select2-result-label,
div.workflow.wf-design-modern.wf-dark .select2-results li,
body.wf-design-modern.wf-dark .select2-results li {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-results .select2-highlighted,
body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-search input,
body.wf-design-modern.wf-dark .select2-search input {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice,
body.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   4. ACE EDITOR
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .ace_editor,
body.wf-design-modern.wf-dark .ace_editor,
div.workflow.wf-design-modern.wf-dark .ace-tm,
body.wf-design-modern.wf-dark .ace-tm {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_gutter,
body.wf-design-modern.wf-dark .ace-tm .ace_gutter {
    background: #161b22 !important;
    color: var(--wf-text-muted) !important;
    border-right-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_print-margin,
body.wf-design-modern.wf-dark .ace-tm .ace_print-margin {
    background: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_cursor,
body.wf-design-modern.wf-dark .ace-tm .ace_cursor {
    color: #c9d1d9 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection,
body.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection {
    background: rgba(56, 139, 253, 0.25) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line,
body.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_gutter-active-line,
body.wf-design-modern.wf-dark .ace-tm .ace_gutter-active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_keyword,
body.wf-design-modern.wf-dark .ace-tm .ace_keyword {
    color: #ff7b72 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_string,
body.wf-design-modern.wf-dark .ace-tm .ace_string {
    color: #a5d6ff !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_comment,
body.wf-design-modern.wf-dark .ace-tm .ace_comment {
    color: #8b949e !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric,
body.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric {
    color: #79c0ff !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_variable,
body.wf-design-modern.wf-dark .ace-tm .ace_variable {
    color: #ffa657 !important;
}


/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .btn-default,
body.wf-design-modern.wf-dark .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
    background-image: none;
}

div.workflow.wf-design-modern.wf-dark .btn-default:hover,
body.wf-design-modern.wf-dark .btn-default:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-default:focus,
body.wf-design-modern.wf-dark .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-default:active,
body.wf-design-modern.wf-dark .btn-default:active,
div.workflow.wf-design-modern.wf-dark .btn-default.active,
body.wf-design-modern.wf-dark .btn-default.active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

/* Dropdown content: labels, text, radio/checkbox, footers */
div.workflow.wf-design-modern.wf-dark .dropdown-menu label,
body.wf-design-modern.wf-dark .dropdown-menu label,
div.workflow.wf-design-modern.wf-dark .dropdown-menu span,
body.wf-design-modern.wf-dark .dropdown-menu span,
div.workflow.wf-design-modern.wf-dark .dropdown-menu li,
body.wf-design-modern.wf-dark .dropdown-menu li {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .dropdown-menu .dd-footer,
body.wf-design-modern.wf-dark .dropdown-menu .dd-footer {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-outline,
body.wf-design-modern.wf-dark .btn-outline,
div.workflow.wf-design-modern.wf-dark .btn-outline-on-hover,
body.wf-design-modern.wf-dark .btn-outline-on-hover {
    color: var(--wf-text-secondary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-outline:hover,
body.wf-design-modern.wf-dark .btn-outline:hover,
div.workflow.wf-design-modern.wf-dark .btn-outline-on-hover:hover,
body.wf-design-modern.wf-dark .btn-outline-on-hover:hover {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   6. POPOVERS & TOOLTIPS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .popover,
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-title,
body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-sidebar) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-content,
body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.top > .arrow::after,
body.wf-design-modern.wf-dark .popover.top > .arrow::after {
    border-top-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.bottom > .arrow::after,
body.wf-design-modern.wf-dark .popover.bottom > .arrow::after {
    border-bottom-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.left > .arrow::after,
body.wf-design-modern.wf-dark .popover.left > .arrow::after {
    border-left-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.right > .arrow::after,
body.wf-design-modern.wf-dark .popover.right > .arrow::after {
    border-right-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-bg-sidebar) !important;
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   7. MISC HARDCODED COLOR OVERRIDES
   ---------------------------------------------------------------- */

/* Close buttons */
div.workflow.wf-design-modern.wf-dark .close,
body.wf-design-modern.wf-dark .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}

div.workflow.wf-design-modern.wf-dark .close:hover,
body.wf-design-modern.wf-dark .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1 !important;
}

/* Breadcrumbs */
div.workflow.wf-design-modern.wf-dark .breadcrumb,
body.wf-design-modern.wf-dark .breadcrumb {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .breadcrumb > li > a,
body.wf-design-modern.wf-dark .breadcrumb > li > a {
    color: var(--wf-accent) !important;
}

/* Text utility overrides */
div.workflow.wf-design-modern.wf-dark .text-muted,
body.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .text-primary,
body.wf-design-modern.wf-dark .text-primary {
    color: var(--wf-accent) !important;
}

/* Pagination */
div.workflow.wf-design-modern.wf-dark .pagination > li > a,
body.wf-design-modern.wf-dark .pagination > li > a {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .pagination > li > a:hover,
body.wf-design-modern.wf-dark .pagination > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .pagination > .active > a,
body.wf-design-modern.wf-dark .pagination > .active > a {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: white !important;
}

/* Jumbotron / hero sections */
div.workflow.wf-design-modern.wf-dark .jumbotron,
body.wf-design-modern.wf-dark .jumbotron {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}


/* Removed by shashank2104 on 2026-07-23 - R2026-51 - the HANDSONTABLE section that used to sit here
   was deleted (hence the section-number gap). It duplicated FormBuilder's modern table skin
   (fb_list.css, [data-ui-theme="modern"] li.field-item .handsontable_container) but every declaration
   was !important, so it won inside the worker-config modal: curve / dataset grids there rendered with a
   different header, a smaller font and - under .wf-dark - a dark fill on a light form. FormBuilder owns
   that table everywhere now; style it in fb_list.css, not here. */


/* ----------------------------------------------------------------
   9. SIDE PANELS & GENERIC CONTAINERS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-side-panel,
body.wf-design-modern.wf-dark .wf-side-panel,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-content,
body.wf-design-modern.wf-dark .wf-side-panel-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-side-panel-header,
body.wf-design-modern.wf-dark .wf-side-panel-header {
    background-color: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* Generic white background containers */
div.workflow.wf-design-modern.wf-dark [style*="background: #FFF"],
body.wf-design-modern.wf-dark [style*="background: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background:#FFF"],
body.wf-design-modern.wf-dark [style*="background:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background: #fff"],
body.wf-design-modern.wf-dark [style*="background: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background:#fff"],
body.wf-design-modern.wf-dark [style*="background:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background: white"],
body.wf-design-modern.wf-dark [style*="background: white"],
div.workflow.wf-design-modern.wf-dark [style*="background:white"],
body.wf-design-modern.wf-dark [style*="background:white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #fff"],
body.wf-design-modern.wf-dark [style*="background-color: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: white"],
body.wf-design-modern.wf-dark [style*="background-color: white"] {
    background: var(--wf-bg-elevated) !important;
}

/* Inline border overrides */
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Inline color overrides */
div.workflow.wf-design-modern.wf-dark [style*="color: #000"],
body.wf-design-modern.wf-dark [style*="color: #000"],
div.workflow.wf-design-modern.wf-dark [style*="color:#000"],
body.wf-design-modern.wf-dark [style*="color:#000"],
div.workflow.wf-design-modern.wf-dark [style*="color: black"],
body.wf-design-modern.wf-dark [style*="color: black"],
div.workflow.wf-design-modern.wf-dark [style*="color:black"],
body.wf-design-modern.wf-dark [style*="color:black"],
div.workflow.wf-design-modern.wf-dark [style*="color: #333"],
body.wf-design-modern.wf-dark [style*="color: #333"],
div.workflow.wf-design-modern.wf-dark [style*="color:#333"],
body.wf-design-modern.wf-dark [style*="color:#333"] {
    color: var(--wf-text-primary) !important;
}

/* Scrollbar styling for dark mode */
div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar,
body.wf-design-modern.wf-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-track {
    background: transparent;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}


/* ----------------------------------------------------------------
   10. WORKFLOW-SPECIFIC SELECTORS WITH HARDCODED COLORS
   ---------------------------------------------------------------- */

/* Worker type badges */
div.workflow.wf-design-modern.wf-dark .wf-worker-type,
body.wf-design-modern.wf-dark .wf-worker-type {
    color: var(--wf-text-primary) !important;
}

/* Worker names -- overrides #333 !important from classic CSS */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-name,
body.wf-design-modern.wf-dark .wf-workers-container .worker-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-type,
body.wf-design-modern.wf-dark .wf-workers-container .worker-type {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-label span,
body.wf-design-modern.wf-dark .wf-workers-container .worker-label span {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-description,
body.wf-design-modern.wf-dark .wf-workers-container .worker-description {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-asterisk,
body.wf-design-modern.wf-dark .wf-workers-container .worker-asterisk {
    color: var(--wf-accent) !important;
}

/* Worker panels -- overrides hardcoded bg/border from classic CSS */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel:hover,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons {
    background-color: transparent !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn {
    color: var(--wf-text-muted) !important;
    background: transparent !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn:hover,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn:hover {
    color: var(--wf-accent) !important;
    background: var(--wf-accent-light) !important;
}

/* Worker ID labels */
div.workflow.wf-design-modern.wf-dark .wf-id-label,
body.wf-design-modern.wf-dark .wf-id-label {
    border-color: transparent !important;
}

/* Help blocks */
div.workflow.wf-design-modern.wf-dark .help-block,
body.wf-design-modern.wf-dark .help-block {
    color: var(--wf-text-muted) !important;
}

/* Field items */
div.workflow.wf-design-modern.wf-dark li.field-item,
body.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark li.field-item .field-name,
body.wf-design-modern.wf-dark li.field-item .field-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark li.field-item .field-value,
body.wf-design-modern.wf-dark li.field-item .field-value {
    color: var(--wf-text-secondary) !important;
}

/* Grouping headers */
div.workflow.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a,
body.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a {
    color: var(--wf-text-primary) !important;
    background-color: var(--wf-bg-surface) !important;
}

/* Workflow settings panels */
div.workflow.wf-design-modern.wf-dark .wf-settings-panel,
body.wf-design-modern.wf-dark .wf-settings-panel {
    background-color: var(--wf-bg-surface) !important;
}

/* Pre/code blocks */
div.workflow.wf-design-modern.wf-dark pre,
body.wf-design-modern.wf-dark pre,
div.workflow.wf-design-modern.wf-dark code,
body.wf-design-modern.wf-dark code {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: var(--wf-border) !important;
}

/* Dividers / HRs */
div.workflow.wf-design-modern.wf-dark hr,
body.wf-design-modern.wf-dark hr {
    border-top-color: var(--wf-border) !important;
}


/* ----------------------------------------------------------------
   11. WORKFLOW MODAL (body-level) DARK OVERRIDES
   Same selectors as wf-modern-worker-config.css but for dark
   ---------------------------------------------------------------- */

/* These are for modals appended to body outside div.workflow */
.workflow-modal.wf-design-modern.wf-dark .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a:hover {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li.active > a {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    border-bottom-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark label {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:active,
.workflow-modal.wf-design-modern.wf-dark .btn-default.active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

.workflow-modal.wf-design-modern.wf-dark .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
}

.workflow-modal.wf-design-modern.wf-dark h1,
.workflow-modal.wf-design-modern.wf-dark h2,
.workflow-modal.wf-design-modern.wf-dark h3,
.workflow-modal.wf-design-modern.wf-dark h4,
.workflow-modal.wf-design-modern.wf-dark h5 {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .panel,
.workflow-modal.wf-design-modern.wf-dark .panel-body,
.workflow-modal.wf-design-modern.wf-dark .panel-heading {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice,
.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choices {
    background-color: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow {
    background: var(--wf-bg-elevated) !important;
    border-left-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

/* ACE editor inside modals */
.workflow-modal.wf-design-modern.wf-dark .ace_editor,
.workflow-modal.wf-design-modern.wf-dark .ace-tm {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_gutter {
    background: #161b22 !important;
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_cursor {
    color: #c9d1d9 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection {
    background: rgba(56, 139, 253, 0.25) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_keyword {
    color: #ff7b72 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_string {
    color: #a5d6ff !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_comment {
    color: #8b949e !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric {
    color: #79c0ff !important;
}

/* Pre/code inside modals */
.workflow-modal.wf-design-modern.wf-dark pre,
.workflow-modal.wf-design-modern.wf-dark code {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: var(--wf-border) !important;
}

/* Scrollbars inside modals */
.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-track {
    background: transparent;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}


/* ----------------------------------------------------------------
   12. WORKER CONFIG MODAL -- DARK MODE SPECIFICS
   Fixes for the worker configuration view (ConfigureWfWorker)
   ---------------------------------------------------------------- */

/* Worker config container backgrounds */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-inputs-outputs {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Inputs heading area */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading,
.workflow-modal.wf-design-modern.wf-dark .worker-outputs .heading,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs .heading {
    border-bottom-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading span,
.workflow-modal.wf-design-modern.wf-dark .worker-outputs .heading span {
    color: var(--wf-text-primary) !important;
}

/* Search icon inside inputs heading */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading .fa,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading i {
    color: var(--wf-text-muted) !important;
}

/* Field items in inputs/outputs list */
.workflow-modal.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .field-name,
.workflow-modal.wf-design-modern.wf-dark li.field-item .field-name span {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .field-value,
.workflow-modal.wf-design-modern.wf-dark li.field-item .field-value span {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .help-block {
    color: var(--wf-text-muted) !important;
}

/* Input group (Customize worker name area) */
.workflow-modal.wf-design-modern.wf-dark .name-container {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .name-container .form-control {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* Docked heading / IO tabs */
.workflow-modal.wf-design-modern.wf-dark .docked-heading {
    background: var(--wf-bg-surface) !important;
}

/* Input groups tabs (Basic/Optional) */
.workflow-modal.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    border-bottom-color: var(--wf-accent) !important;
    background: transparent !important;
}

/* Outputs panel */
.workflow-modal.wf-design-modern.wf-dark .worker-outputs,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs {
    background: var(--wf-bg-surface) !important;
    border-left-color: var(--wf-border) !important;
}

/* Output preview area */
.workflow-modal.wf-design-modern.wf-dark .worker-output-preview {
    background: var(--wf-bg-input) !important;
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Output field badges */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs .field-name {
    color: var(--wf-text-primary) !important;
}

/* View type selector buttons */
.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn {
    color: var(--wf-text-muted) !important;
    border-color: var(--wf-border) !important;
    background: transparent !important;
}

.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn:hover,
.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Data source selects */
.workflow-modal.wf-design-modern.wf-dark li.field-item select {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* Datasource options area */
.workflow-modal.wf-design-modern.wf-dark .datasource-options {
    background: transparent !important;
}

/* Configuration tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv-container {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

/* Validations tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-validations {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Execution log */
.workflow-modal.wf-design-modern.wf-dark .execution-log {
    background: var(--wf-bg-input) !important;
    border-top-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .execution-log-header {
    background: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .logs-container {
    color: var(--wf-text-secondary) !important;
}

/* Inline border overrides (templates use inline border styles) */
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Inline background overrides */
.workflow-modal.wf-design-modern.wf-dark [style*="background: #FFF"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:#FFF"],
.workflow-modal.wf-design-modern.wf-dark [style*="background: #fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:#fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background: white"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:white"],
.workflow-modal.wf-design-modern.wf-dark [style*="background-color: #fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background-color: white"] {
    background: var(--wf-bg-elevated) !important;
}

/* General text color override -- catch-all for hardcoded color:#000 */
.workflow-modal.wf-design-modern.wf-dark [style*="color: #000"],
.workflow-modal.wf-design-modern.wf-dark [style*="color:#000"],
.workflow-modal.wf-design-modern.wf-dark [style*="color: black"],
.workflow-modal.wf-design-modern.wf-dark [style*="color:black"] {
    color: var(--wf-text-primary) !important;
}

/* Tab pane backgrounds */
.workflow-modal.wf-design-modern.wf-dark .tab-content,
.workflow-modal.wf-design-modern.wf-dark .tab-pane {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Table inside modal */
.workflow-modal.wf-design-modern.wf-dark table,
.workflow-modal.wf-design-modern.wf-dark .table {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > thead > tr > th {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > tbody > tr > td {
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > tbody > tr:hover > td {
    background: var(--wf-bg-elevated) !important;
}

/* Badge styling */
.workflow-modal.wf-design-modern.wf-dark .badge {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Alert inside modal */
.workflow-modal.wf-design-modern.wf-dark .alert-warning {
    background: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93C5FD !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .alert-danger {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
    border-color: var(--wf-border) !important;
}

/* Popover from worker config */
.workflow-modal.wf-design-modern.wf-dark .popover {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .popover-title {
    background: var(--wf-bg-sidebar) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

/* Breadcrumbs in worker config */
.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li,
.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .breadcrumb > .active {
    color: var(--wf-text-primary) !important;
}

/* Text-muted override */
.workflow-modal.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

/* Generic spans/divs/p with text */
.workflow-modal.wf-design-modern.wf-dark p,
.workflow-modal.wf-design-modern.wf-dark span,
.workflow-modal.wf-design-modern.wf-dark div {
    color: inherit;
}


/* ----------------------------------------------------------------
   13. ADDITIONAL DARK MODE CATCH-ALL OVERRIDES
   Comprehensive fixes for remaining elements with hardcoded colors
   ---------------------------------------------------------------- */

/* Tab content areas — sidebar panels, shapes, viz, inputs, viewers */
div.workflow.wf-design-modern.wf-dark .wf-workers-container,
body.wf-design-modern.wf-dark .wf-workers-container,
div.workflow.wf-design-modern.wf-dark .wf-shapes-container,
body.wf-design-modern.wf-dark .wf-shapes-container,
div.workflow.wf-design-modern.wf-dark .wf-collection-body,
body.wf-design-modern.wf-dark .wf-collection-body,
div.workflow.wf-design-modern.wf-dark .wf-viz-container,
body.wf-design-modern.wf-dark .wf-viz-container,
div.workflow.wf-design-modern.wf-dark .wf-viewers-container,
body.wf-design-modern.wf-dark .wf-viewers-container,
div.workflow.wf-design-modern.wf-dark .wf-io-view,
body.wf-design-modern.wf-dark .wf-io-view,
div.workflow.wf-design-modern.wf-dark .wf-settings-view,
body.wf-design-modern.wf-dark .wf-settings-view,
div.workflow.wf-design-modern.wf-dark .wf-basic-view,
body.wf-design-modern.wf-dark .wf-basic-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Side panel header — used by multiple tab views */
div.workflow.wf-design-modern.wf-dark .wf-side-panel-header h3,
body.wf-design-modern.wf-dark .wf-side-panel-header h3,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-header h4,
body.wf-design-modern.wf-dark .wf-side-panel-header h4,
div.workflow.wf-design-modern.wf-dark .side-panel-title,
body.wf-design-modern.wf-dark .side-panel-title {
    color: var(--wf-text-primary) !important;
}

/* Generic containers with hardcoded white background */
div.workflow.wf-design-modern.wf-dark .plugin-tabs,
body.wf-design-modern.wf-dark .plugin-tabs,
div.workflow.wf-design-modern.wf-dark .plugin-tabs > .tab-pane,
body.wf-design-modern.wf-dark .plugin-tabs > .tab-pane,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-content,
body.wf-design-modern.wf-dark .wf-nav-menu-content {
    background: var(--wf-bg-surface) !important;
}

/* Canvas view toggle tabs */
div.workflow.wf-design-modern.wf-dark .wf-view-toggle .btn,
body.wf-design-modern.wf-dark .wf-view-toggle .btn {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-view-toggle .btn.active,
body.wf-design-modern.wf-dark .wf-view-toggle .btn.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Right-side action toolbars */
div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions .btn,
body.wf-design-modern.wf-dark .full-view .wf-top-actions .btn,
div.workflow.wf-design-modern.wf-dark .full-view .zoom .btn,
body.wf-design-modern.wf-dark .full-view .zoom .btn {
    color: var(--wf-text-secondary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions .btn:hover,
body.wf-design-modern.wf-dark .full-view .wf-top-actions .btn:hover,
div.workflow.wf-design-modern.wf-dark .full-view .zoom .btn:hover,
body.wf-design-modern.wf-dark .full-view .zoom .btn:hover {
    color: var(--wf-accent) !important;
    background: var(--wf-accent-light) !important;
}

/* Shapes list — shape cards */
div.workflow.wf-design-modern.wf-dark .wf-shapes-container .shape-item,
body.wf-design-modern.wf-dark .wf-shapes-container .shape-item,
div.workflow.wf-design-modern.wf-dark .shape-item,
body.wf-design-modern.wf-dark .shape-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-shapes-container .shape-item:hover,
body.wf-design-modern.wf-dark .wf-shapes-container .shape-item:hover,
div.workflow.wf-design-modern.wf-dark .shape-item:hover,
body.wf-design-modern.wf-dark .shape-item:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

/* Shape icon backgrounds should be dark-aware */
div.workflow.wf-design-modern.wf-dark .shape-item img,
body.wf-design-modern.wf-dark .shape-item img,
div.workflow.wf-design-modern.wf-dark .shape-item svg,
body.wf-design-modern.wf-dark .shape-item svg {
    filter: invert(0.85);
}

/* Workers panel header (Reload / Done buttons area) */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .workers-header,
body.wf-design-modern.wf-dark .wf-workers-container .workers-header,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-list-container,
body.wf-design-modern.wf-dark .wf-side-panel-list-container {
    background: var(--wf-bg-surface) !important;
}

/* Filter dropdown background fix */
div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu h1,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu h1 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu label,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu label {
    color: var(--wf-text-secondary) !important;
}

/* Canvas view sub-tabs (Canvas / Timeline / Data) */
div.workflow.wf-design-modern.wf-dark .wf-tabs .nav-pills > li > a,
body.wf-design-modern.wf-dark .wf-tabs .nav-pills > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-tabs .nav-pills > li.active > a,
body.wf-design-modern.wf-dark .wf-tabs .nav-pills > li.active > a {
    background: var(--wf-accent) !important;
    color: white !important;
}

/* Search worker input dark mode */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .input-group,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .input-group {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control::placeholder,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Workers count badge */
div.workflow.wf-design-modern.wf-dark .workers-count,
body.wf-design-modern.wf-dark .workers-count {
    color: var(--wf-text-muted) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* "Run Wizard" button */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .btn-group-justified,
body.wf-design-modern.wf-dark .wf-workers-container .btn-group-justified {
    border-top-color: var(--wf-border) !important;
}

/* Statusbar dark mode */
div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar,
body.wf-design-modern.wf-dark .wf-modern-statusbar {
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-node-count,
body.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-node-count,
div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-edge-count,
body.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-edge-count {
    color: var(--wf-text-secondary) !important;
}

/* Tab footer bar */
div.workflow.wf-design-modern.wf-dark .wf-tab-footer span,
body.wf-design-modern.wf-dark .wf-tab-footer span,
div.workflow.wf-design-modern.wf-dark .wf-tab-footer a,
body.wf-design-modern.wf-dark .wf-tab-footer a {
    color: var(--wf-text-secondary) !important;
}

/* Workflow footer tab bar */
div.workflow.wf-design-modern.wf-dark .wf-footer,
body.wf-design-modern.wf-dark .wf-footer {
    background: var(--wf-bg-surface) !important;
    border-top-color: var(--wf-border) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .footer-tabs-heading > span,
body.wf-design-modern.wf-dark .wf-footer .footer-tabs-heading > span {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .nav-tabs > li > a,
body.wf-design-modern.wf-dark .wf-footer .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .wf-footer .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
}

/* Classic graph info (above footer) */
div.workflow.wf-design-modern.wf-dark .wf-graph-info,
body.wf-design-modern.wf-dark .wf-graph-info {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-graph-info a,
body.wf-design-modern.wf-dark .wf-graph-info a {
    color: var(--wf-text-secondary) !important;
}

/* Body-level Select2 dropdowns for dark workflow */
body.wf-dark-active .select2-drop {
    background-color: #1a2744 !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #E2E8F0 !important;
}

body.wf-dark-active .select2-results .select2-result-label {
    color: #E2E8F0 !important;
}

body.wf-dark-active .select2-results .select2-highlighted {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3B82F6 !important;
}

body.wf-dark-active .select2-search input {
    background-color: #16213e !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #E2E8F0 !important;
}

/* Node info panel (right sidebar when clicking a node) */
div.workflow.wf-design-modern.wf-dark .canvas-node-info,
body.wf-design-modern.wf-dark .canvas-node-info,
div.workflow.wf-design-modern.wf-dark .wf-canvas-node-info,
body.wf-design-modern.wf-dark .wf-canvas-node-info {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic side modal / fullscreen overlays */
div.workflow.wf-design-modern.wf-dark .d3view-side-modal,
body.wf-design-modern.wf-dark .d3view-side-modal {
    background: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .d3view-side-modal .side-modal-header,
body.wf-design-modern.wf-dark .d3view-side-modal .side-modal-header {
    background: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .d3view-side-modal .side-modal-body,
body.wf-design-modern.wf-dark .d3view-side-modal .side-modal-body {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Ancestry view / data view */
div.workflow.wf-design-modern.wf-dark .wf-ancestry-view,
body.wf-design-modern.wf-dark .wf-ancestry-view,
div.workflow.wf-design-modern.wf-dark .wf-data-view,
body.wf-design-modern.wf-dark .wf-data-view,
div.workflow.wf-design-modern.wf-dark .wf-timeline-view,
body.wf-design-modern.wf-dark .wf-timeline-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic icon colors */
div.workflow.wf-design-modern.wf-dark .fa,
body.wf-design-modern.wf-dark .fa,
div.workflow.wf-design-modern.wf-dark .fas,
body.wf-design-modern.wf-dark .fas,
div.workflow.wf-design-modern.wf-dark .far,
body.wf-design-modern.wf-dark .far,
div.workflow.wf-design-modern.wf-dark .fab,
body.wf-design-modern.wf-dark .fab {
    color: inherit;
}

/* Fix header search in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search-outer,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search-outer {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search::placeholder,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Separator lines */
div.workflow.wf-design-modern.wf-dark .wf-modern-header-divider,
body.wf-design-modern.wf-dark .wf-modern-header-divider {
    background: var(--wf-border) !important;
}

/* Context menu */
div.workflow.wf-design-modern.wf-dark .pl-context-menu,
body.wf-design-modern.wf-dark .pl-context-menu,
div.workflow.wf-design-modern.wf-dark .context-menu,
body.wf-design-modern.wf-dark .context-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

div.workflow.wf-design-modern.wf-dark .pl-context-menu li a,
body.wf-design-modern.wf-dark .pl-context-menu li a,
div.workflow.wf-design-modern.wf-dark .context-menu li a,
body.wf-design-modern.wf-dark .context-menu li a {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .pl-context-menu li a:hover,
body.wf-design-modern.wf-dark .pl-context-menu li a:hover,
div.workflow.wf-design-modern.wf-dark .context-menu li a:hover,
body.wf-design-modern.wf-dark .context-menu li a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   14. SIDEBAR CONTENT WRAPPER — CRITICAL DARK FIX
   .wf-nav-menu-wrapper has hardcoded white bg in classic CSS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-pane,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-pane,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-content,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-content {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Sidebar tab headers */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header {
    background: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header h4,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header h4,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header span {
    color: var(--wf-text-primary) !important;
}

/* Shape items in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-name,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-info,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-info {
    color: var(--wf-text-muted) !important;
}

/* Shapes list items in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li {
    border-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

/* Invert dark shape icons so they're visible on dark bg */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li img,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li img,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item img,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item img {
    filter: invert(0.85) !important;
}

/* Shapes search input */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-search,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-search,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper input[type="text"],
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper input[type="text"] {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper input::placeholder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper input::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Sidebar toggle and resize handle */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-toggle-sidebar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-toggle-sidebar {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper > .ui-resizable-handle,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper > .ui-resizable-handle {
    background: var(--wf-border) !important;
}

/* Log items in sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item {
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item .timestamp,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item .timestamp {
    color: var(--wf-text-muted) !important;
}

/* Workflow guide panel */
div.workflow.wf-design-modern.wf-dark .wf-guide-panel,
body.wf-design-modern.wf-dark .wf-guide-panel,
div.workflow.wf-design-modern.wf-dark .wf-guide-container,
body.wf-design-modern.wf-dark .wf-guide-container {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Canvas group labels (DOM elements overlaying canvas) */
div.workflow.wf-design-modern.wf-dark .wf-group-label,
body.wf-design-modern.wf-dark .wf-group-label,
div.workflow.wf-design-modern.wf-dark .canvas-group-label,
body.wf-design-modern.wf-dark .canvas-group-label {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* "Guide me" button dark mode — already styled, but ensure visibility */
div.workflow.wf-design-modern.wf-dark .wf-guide-me-btn,
body.wf-design-modern.wf-dark .wf-guide-me-btn {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}


/* ----------------------------------------------------------------
   15. SETTINGS TAB — FormBuilder white backgrounds
   The Settings tab renders via FormBuilder which has white bg/borders
   ---------------------------------------------------------------- */

/* Settings tab FormBuilder container and sections */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-builder-container,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-builder-container,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-settings-form,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-settings-form,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-formbuilder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-formbuilder {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Settings tab sidebar — group/folder list (Execution, Appearance, Controls, etc.) */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-list,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-list,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-sidebar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-sidebar,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-3,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-3,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-4,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-4,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > [class*="col-"],
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > [class*="col-"] {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Individual group items in settings sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item:hover,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item:hover {
    background: var(--wf-accent-light) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item.active,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item.active,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item.active,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* FormBuilder field items */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name span {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value span {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .help-block,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .help-block {
    color: var(--wf-text-muted) !important;
}

/* FormBuilder form-controls inside settings */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control:focus,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

/* Checkbox / toggle switches */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .onoffswitch-label,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .onoffswitch-label,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .toggle-switch,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .toggle-switch {
    border-color: var(--wf-border) !important;
}

/* Select2 inside settings sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choice,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choice,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choices,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choices {
    background: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-chosen,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   16. TINYMCE EDITOR — Dark Mode (Docs/Info tab)
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-container,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-container,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-panel,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-panel {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-toolbar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-toolbar,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-menubar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-menubar {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button span {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-edit-area,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-edit-area {
    border-color: var(--wf-border) !important;
}

/* TinyMCE iframe body — use JS to apply dark styles since iframe has its own doc */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-content-body,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-content-body {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-statusbar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-statusbar {
    background: var(--wf-bg-sidebar) !important;
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   17. DECISION VALIDATION LABELS — Dark Mode
   Canvas-overlaid labels with white bg that bleeds in dark mode
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label,
body.wf-design-modern.wf-dark .wf-decision-validation-label {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-sm) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-content,
body.wf-design-modern.wf-dark .wf-decision-validation-content {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label .fa,
body.wf-design-modern.wf-dark .wf-decision-validation-label .fa,
div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label i,
body.wf-design-modern.wf-dark .wf-decision-validation-label i {
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   18. COMPREHENSIVE CATCH-ALL — Any remaining white backgrounds
   Last resort: override inline style="background: #FFF" etc.
   ---------------------------------------------------------------- */

/* Force dark on any element with inline white background */
div.workflow.wf-design-modern.wf-dark [style*="background: #FFF"],
body.wf-design-modern.wf-dark [style*="background: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background:#FFF"],
body.wf-design-modern.wf-dark [style*="background:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background: #fff"],
body.wf-design-modern.wf-dark [style*="background: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background:#fff"],
body.wf-design-modern.wf-dark [style*="background:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background: white"],
body.wf-design-modern.wf-dark [style*="background: white"],
div.workflow.wf-design-modern.wf-dark [style*="background:white"],
body.wf-design-modern.wf-dark [style*="background:white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #fff"],
body.wf-design-modern.wf-dark [style*="background-color: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:#fff"],
body.wf-design-modern.wf-dark [style*="background-color:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #FFF"],
body.wf-design-modern.wf-dark [style*="background-color: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:#FFF"],
body.wf-design-modern.wf-dark [style*="background-color:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: white"],
body.wf-design-modern.wf-dark [style*="background-color: white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:white"],
body.wf-design-modern.wf-dark [style*="background-color:white"] {
    background: var(--wf-bg-elevated) !important;
}

/* Force light text on elements with inline dark text colors */
div.workflow.wf-design-modern.wf-dark [style*="color: #000"],
body.wf-design-modern.wf-dark [style*="color: #000"],
div.workflow.wf-design-modern.wf-dark [style*="color:#000"],
body.wf-design-modern.wf-dark [style*="color:#000"],
div.workflow.wf-design-modern.wf-dark [style*="color: black"],
body.wf-design-modern.wf-dark [style*="color: black"],
div.workflow.wf-design-modern.wf-dark [style*="color:black"],
body.wf-design-modern.wf-dark [style*="color:black"],
div.workflow.wf-design-modern.wf-dark [style*="color: #333"],
body.wf-design-modern.wf-dark [style*="color: #333"],
div.workflow.wf-design-modern.wf-dark [style*="color:#333"],
body.wf-design-modern.wf-dark [style*="color:#333"],
div.workflow.wf-design-modern.wf-dark [style*="color: #555"],
body.wf-design-modern.wf-dark [style*="color: #555"],
div.workflow.wf-design-modern.wf-dark [style*="color:#555"],
body.wf-design-modern.wf-dark [style*="color:#555"] {
    color: var(--wf-text-primary) !important;
}

/* Force dark borders on elements with inline light borders */
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #EEE"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #EEE"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #eee"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #eee"] {
    border-color: var(--wf-border) !important;
}


/* ================================================================
   BODY-LEVEL MODERN DESIGN (structural)
   Applies to BOTH light and dark modern modes.
   Gives body-level modals/sidebars the same modern look as
   the in-workflow ConfigureWfWorkerView (wf-modern-worker-config.css).
   ================================================================ */


/* ----------------------------------------------------------------
   MODAL MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .modal-content,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-content {
    border-radius: var(--wf-r-xl) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border: 1px solid var(--wf-border) !important;
    overflow: hidden;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header,
body.wf-design-modern .d3view-generic-modal-container .d3view-modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header,
div.workflow.wf-design-modern .d3view-generic-modal-container .d3view-modal-header,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    padding: 0 20px !important;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    border-radius: 0 !important;
}

/* Added by shashank2104 on 03/28/2026 at 03:59 PM - Classic pull-right / float:right stacking inside flex modal-header (GenericModalView): first floated control is rightmost; flex row uses DOM order unless we assign order. nth-last-child maps last-in-DOM to lowest order among trailing siblings (leftmost in the right-side cluster). Scoped to d3view-generic-modal-container only. */
body.wf-design-modern .d3view-generic-modal-container .modal-header > .pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > .pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .pull-right,
body.wf-design-modern .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
body.wf-design-modern .d3view-generic-modal-container .modal-header > button.pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > button.pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > button.pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > button.pull-right {
    float: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child) {
    order: 2;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child) {
    order: 3;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child) {
    order: 4;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child) {
    order: 5;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child) {
    order: 6;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child) {
    order: 7;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child) {
    order: 8;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child) {
    order: 9;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child) {
    order: 10;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child) {
    order: 11;
}

body.wf-design-modern .d3view-generic-modal-container .modal-title,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-title,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.4;
    order: 0 !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header .close,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header .close,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close {
    font-size: 18px !important;
    opacity: 0.5;
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    transition: var(--wf-t-fast);
    margin: 0 !important;
    padding: 0 !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header .close:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header .close:hover,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover {
    opacity: 1;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-body,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-body {
    padding: 20px !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px !important;
    gap: 8px;
    border-top: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* Modal footer buttons */
body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn {
    height: 34px;
    padding: 0 16px !important;
    border-radius: var(--wf-r-md) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* btn-default: all locations in modals/sidebars (not just footer) */
body.wf-design-modern .d3view-generic-modal-container .btn-default,
body.wf-design-modern .d3view-plugins-sidebar .btn-default,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
    border: 1px solid var(--wf-border) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:hover {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:focus {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern .d3view-plugins-sidebar .btn-default.active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default.active {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn-primary,
body.wf-design-modern .d3view-generic-modal-container .modal-footer #apply,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-primary,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer #apply {
    background: var(--wf-accent) !important;
    color: #fff !important;
    border: 1px solid var(--wf-accent) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn-primary:hover,
body.wf-design-modern .d3view-generic-modal-container .modal-footer #apply:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-primary:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer #apply:hover {
    background: var(--wf-accent-hover) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

/* Modal backdrop */
body.wf-design-modern .modal-backdrop,
body.wf-design-modern.wf-dark .modal-backdrop {
    background-color: rgba(15, 23, 42, 0.40) !important;
}


/* ----------------------------------------------------------------
   FORM CONTROLS INSIDE MODERN MODALS/SIDEBARS
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .form-control,
body.wf-design-modern .d3view-plugins-sidebar .form-control,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none !important;
    box-shadow: none !important;
}

body.wf-design-modern .d3view-generic-modal-container textarea.form-control,
body.wf-design-modern .d3view-plugins-sidebar textarea.form-control,
body.wf-design-modern.wf-dark .d3view-generic-modal-container textarea.form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar textarea.form-control {
    height: auto;
    padding: 8px 12px;
    min-height: 64px;
}

body.wf-design-modern .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern .d3view-plugins-sidebar .form-control:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern .d3view-plugins-sidebar .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control::placeholder {
    color: var(--wf-text-disabled) !important;
}

/* Labels */
body.wf-design-modern .d3view-generic-modal-container label,
body.wf-design-modern .d3view-generic-modal-container .control-label,
body.wf-design-modern .d3view-plugins-sidebar label,
body.wf-design-modern .d3view-plugins-sidebar .control-label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .control-label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .control-label {
    color: var(--wf-text-secondary) !important;
    font-size: 12px;
    font-weight: 500;
}

/* Select2 modern styling */
body.wf-design-modern .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern .d3view-plugins-sidebar .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice {
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: 13px;
    background-image: none !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern .d3view-plugins-sidebar .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-choices {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    padding: 4px !important;
    min-height: 36px !important;
    background-image: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .select2-container-multi .select2-search-choice,
body.wf-design-modern .d3view-plugins-sidebar .select2-container-multi .select2-search-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-search-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-search-choice {
    background: var(--wf-accent-light) !important;
    border: 1px solid transparent !important;
    border-radius: var(--wf-r-sm) !important;
    color: var(--wf-accent) !important;
    font-size: 12px;
    padding: 2px 8px !important;
    background-image: none !important;
}

/* Select2 dropdown (body-level) */
body.wf-design-modern .select2-drop,
body.wf-design-modern.wf-dark .select2-drop {
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    margin-top: 4px;
}

body.wf-design-modern .select2-results .select2-result-label,
body.wf-design-modern.wf-dark .select2-results .select2-result-label {
    font-size: 13px;
    padding: 6px 12px !important;
}

body.wf-design-modern .select2-results .select2-highlighted,
body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-radius: var(--wf-r-sm);
}

/* Modern buttons inside modals (not in footer) */
body.wf-design-modern .d3view-generic-modal-container .btn,
body.wf-design-modern .d3view-plugins-sidebar .btn,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn {
    border-radius: var(--wf-r-md) !important;
    transition: var(--wf-t-fast);
    font-weight: 500;
}


/* ----------------------------------------------------------------
   SIDEBAR MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-plugins-sidebar,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar {
    background: var(--wf-bg-surface) !important;
    border-left: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-xl) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    padding: 0 20px !important;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h1 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    flex: 1;
    margin: 0;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading .close,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close {
    font-size: 18px !important;
    opacity: 0.5;
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading .close:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close:hover {
    opacity: 1;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .content-wrapper,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .content-wrapper {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    padding: 16px;
}


/* ----------------------------------------------------------------
   TABLES MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .table,
body.wf-design-modern .d3view-plugins-sidebar .table,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table {
    border-collapse: separate;
    border-spacing: 0;
}

body.wf-design-modern .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern .d3view-plugins-sidebar .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th {
    background: var(--wf-bg-card) !important;
    color: var(--wf-text-secondary) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

body.wf-design-modern .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern .d3view-plugins-sidebar .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--wf-border) !important;
    font-size: 13px;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern .d3view-plugins-sidebar .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr:hover > td {
    background: var(--wf-bg-card-hover) !important;
}


/* ----------------------------------------------------------------
   TABS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs {
    border-bottom: 1px solid var(--wf-border) !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a {
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0 !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-secondary) !important;
    transition: var(--wf-t-fast);
    border: 1px solid transparent !important;
    padding: 8px 16px !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a:hover {
    background: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    font-weight: 600;
    border-color: var(--wf-border) var(--wf-border) var(--wf-bg-surface) !important;
}


/* ----------------------------------------------------------------
   PANELS / WELLS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .panel,
body.wf-design-modern .d3view-plugins-sidebar .panel,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel {
    border-radius: var(--wf-r-md) !important;
    border: 1px solid var(--wf-border) !important;
    box-shadow: none !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .well,
body.wf-design-modern .d3view-plugins-sidebar .well,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .well,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .well {
    border-radius: var(--wf-r-md) !important;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-card) !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------------
   LIST GROUPS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .list-group-item,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item {
    border-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
    padding: 10px 16px !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:first-child,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:first-child,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:first-child,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:first-child {
    border-top-left-radius: var(--wf-r-md) !important;
    border-top-right-radius: var(--wf-r-md) !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:last-child,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:last-child,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:last-child,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:last-child {
    border-bottom-left-radius: var(--wf-r-md) !important;
    border-bottom-right-radius: var(--wf-r-md) !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:hover {
    background: var(--wf-bg-card-hover) !important;
}


/* ----------------------------------------------------------------
   CONFIRM BOX MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .bootbox.modal .modal-content,
body.wf-design-modern.wf-dark .bootbox.modal .modal-content {
    border-radius: var(--wf-r-xl) !important;
    box-shadow: var(--wf-sh-lg) !important;
    overflow: hidden;
}

body.wf-design-modern .bootbox.modal .modal-footer .btn,
body.wf-design-modern.wf-dark .bootbox.modal .modal-footer .btn {
    border-radius: var(--wf-r-md) !important;
    font-weight: 600;
    font-size: 12px;
    height: 34px;
    padding: 0 16px !important;
    transition: var(--wf-t-fast);
}


/* ----------------------------------------------------------------
   SCROLLBAR MODERN STYLING
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.40);
}


/* ================================================================
   BODY-LEVEL DARK COLOR OVERRIDES
   For modals (GenericModalView) and sidebars (GenericSidebarView)
   appended to <body> outside div.workflow.
   Tokens are available via body.wf-design-modern.wf-dark
   defined in wf-modern-tokens.css.
   ================================================================ */


/* ----------------------------------------------------------------
   MODAL DARK OVERRIDES
   ---------------------------------------------------------------- */

/* Modal backdrop */
body.wf-design-modern.wf-dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.70) !important;
}

/* Modal content container */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-xl) !important;
}

/* Modal header */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header button.close {
    color: var(--wf-text-muted) !important;
    opacity: 0.7;
    text-shadow: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1;
}

/* Modal body */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Modal footer */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer {
    background-color: var(--wf-bg-elevated) !important;
    border-top: 1px solid var(--wf-border) !important;
}


/* ----------------------------------------------------------------
   SIDEBAR DARK OVERRIDES
   ---------------------------------------------------------------- */

body.wf-design-modern.wf-dark .d3view-plugins-sidebar {
    background-color: var(--wf-bg-surface) !important;
    border-left: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-xl) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h2,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h3 {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .content-wrapper {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   BOOTSTRAP COMPONENTS INSIDE BODY-LEVEL MODALS/SIDEBARS
   ---------------------------------------------------------------- */

/* Panels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-default,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-body,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-heading,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-footer,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-body,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-footer {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Wells */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .well,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Form controls */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Labels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .control-label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .control-label {
    color: var(--wf-text-secondary) !important;
}

/* Tables */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > th {
    background-color: transparent !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table-striped > tbody > tr:nth-of-type(odd),
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--wf-bg-elevated) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr:hover > td {
    background-color: var(--wf-bg-card-hover) !important;
}

/* List groups */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:hover {
    background-color: var(--wf-bg-card-hover) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item.active {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Buttons -- all btn-default in dark modals/sidebars (header, body, footer) */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:hover,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:hover {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:focus,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default.active,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-default {
    background-color: var(--wf-bg-card) !important;
}

/* Tabs */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
    border-color: transparent !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a:hover {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) var(--wf-border) var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .tab-content,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .tab-content {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Select2 */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-choices {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    background-image: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice .select2-chosen,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice .select2-chosen {
    color: var(--wf-text-primary) !important;
}

/* Select2 dropdown (appended to body) */
body.wf-design-modern.wf-dark .select2-drop {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .select2-drop .select2-search input {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-result-label {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background-color: var(--wf-accent) !important;
    color: #fff !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-result:hover .select2-result-label {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-no-results {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-muted) !important;
}

/* Alerts */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert {
    border-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-info,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-info {
    background-color: rgba(59, 130, 246, 0.10) !important;
    color: #93C5FD !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-warning,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-danger,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
}

/* Headings and text */
body.wf-design-modern.wf-dark .d3view-generic-modal-container h1,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h2,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h3,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h4,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h5,
body.wf-design-modern.wf-dark .d3view-generic-modal-container p,
body.wf-design-modern.wf-dark .d3view-generic-modal-container span,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h2,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h3,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h4,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h5,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar p,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar span {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .text-muted,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .text-muted {
    color: var(--wf-text-muted) !important;
}

/* HR dividers */
body.wf-design-modern.wf-dark .d3view-generic-modal-container hr,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar hr {
    border-color: var(--wf-border) !important;
}

/* Dropdown menus inside modals */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu > li > a:hover {
    background-color: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

/* Input groups */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .input-group-addon,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Checkboxes and radio labels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .checkbox label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .radio label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .checkbox label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .radio label {
    color: var(--wf-text-primary) !important;
}

/* Pagination */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .pagination > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .pagination > li > a {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .pagination > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .pagination > li.active > a {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
}

/* Tooltips (appended to body) */
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border: 1px solid var(--wf-border) !important;
}

/* Popovers (appended to body) */
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

/* Confirm box (Plugins.Helpers.ConfirmBox) */
body.wf-design-modern.wf-dark .bootbox.modal .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-header {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-footer {
    background-color: var(--wf-bg-elevated) !important;
    border-top-color: var(--wf-border) !important;
}

/* Inline style overrides for black text/borders in body-level modals */
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #333"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#333"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #000"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#000"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: black"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:black"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #555"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#555"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #333"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#333"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #000"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#000"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: black"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:black"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #555"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#555"] {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: #fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:#fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color: #fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color:#fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color: white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color:white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: #FFF"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:#FFF"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: #fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:#fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color: #fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color:#fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color: white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color:white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: #FFF"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:#FFF"] {
    background-color: var(--wf-bg-surface) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Generic catch-all for icons */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .fa,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .fa-solid,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .glyphicon,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .fa,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .fa-solid,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .glyphicon {
    color: inherit !important;
}

/* Scrollbar styling moved to modern structural section above */


/* ================================================================
   DW-2795 — COMPREHENSIVE BOOTSTRAP 3 DARK OVERRIDES
   Covers ALL remaining Bootstrap components for full dark mode
   on the workflow page via body.wf-design-modern.wf-dark
   ================================================================ */

/* ----------------------------------------------------------------
   BUTTONS — All Bootstrap 3 variants
   ---------------------------------------------------------------- */

/* btn base — ensure all buttons pick up dark text */
div.workflow.wf-design-modern.wf-dark .btn,
body.wf-design-modern.wf-dark .btn {
    transition: var(--wf-t-fast);
}

/* btn-primary */
div.workflow.wf-design-modern.wf-dark .btn-primary,
body.wf-design-modern.wf-dark .btn-primary {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-primary:hover,
body.wf-design-modern.wf-dark .btn-primary:hover,
div.workflow.wf-design-modern.wf-dark .btn-primary:focus,
body.wf-design-modern.wf-dark .btn-primary:focus {
    background-color: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-primary:active,
body.wf-design-modern.wf-dark .btn-primary:active,
div.workflow.wf-design-modern.wf-dark .btn-primary.active,
body.wf-design-modern.wf-dark .btn-primary.active {
    background-color: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
}

/* btn-success */
div.workflow.wf-design-modern.wf-dark .btn-success,
body.wf-design-modern.wf-dark .btn-success {
    background-color: var(--wf-success, #10B981) !important;
    border-color: var(--wf-success, #10B981) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-success:hover,
body.wf-design-modern.wf-dark .btn-success:hover,
div.workflow.wf-design-modern.wf-dark .btn-success:focus,
body.wf-design-modern.wf-dark .btn-success:focus {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* btn-info */
div.workflow.wf-design-modern.wf-dark .btn-info,
body.wf-design-modern.wf-dark .btn-info {
    background-color: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-info:hover,
body.wf-design-modern.wf-dark .btn-info:hover,
div.workflow.wf-design-modern.wf-dark .btn-info:focus,
body.wf-design-modern.wf-dark .btn-info:focus {
    background-color: #0369A1 !important;
    border-color: #0369A1 !important;
}

/* btn-warning */
div.workflow.wf-design-modern.wf-dark .btn-warning,
body.wf-design-modern.wf-dark .btn-warning {
    background-color: var(--wf-warning, #F59E0B) !important;
    border-color: var(--wf-warning, #F59E0B) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-warning:hover,
body.wf-design-modern.wf-dark .btn-warning:hover,
div.workflow.wf-design-modern.wf-dark .btn-warning:focus,
body.wf-design-modern.wf-dark .btn-warning:focus {
    background-color: #D97706 !important;
    border-color: #D97706 !important;
}

/* btn-danger */
div.workflow.wf-design-modern.wf-dark .btn-danger,
body.wf-design-modern.wf-dark .btn-danger {
    background-color: var(--wf-danger, #EF4444) !important;
    border-color: var(--wf-danger, #EF4444) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-danger:hover,
body.wf-design-modern.wf-dark .btn-danger:hover,
div.workflow.wf-design-modern.wf-dark .btn-danger:focus,
body.wf-design-modern.wf-dark .btn-danger:focus {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* btn-link */
div.workflow.wf-design-modern.wf-dark .btn-link,
body.wf-design-modern.wf-dark .btn-link {
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-link:hover,
body.wf-design-modern.wf-dark .btn-link:hover,
div.workflow.wf-design-modern.wf-dark .btn-link:focus,
body.wf-design-modern.wf-dark .btn-link:focus {
    color: var(--wf-accent-hover) !important;
}

/* btn-group borders */
div.workflow.wf-design-modern.wf-dark .btn-group > .btn + .btn,
body.wf-design-modern.wf-dark .btn-group > .btn + .btn,
div.workflow.wf-design-modern.wf-dark .btn-group > .btn + .dropdown-toggle,
body.wf-design-modern.wf-dark .btn-group > .btn + .dropdown-toggle {
    border-left-color: var(--wf-border) !important;
}

/* Disabled buttons */
div.workflow.wf-design-modern.wf-dark .btn.disabled,
body.wf-design-modern.wf-dark .btn.disabled,
div.workflow.wf-design-modern.wf-dark .btn[disabled],
body.wf-design-modern.wf-dark .btn[disabled] {
    opacity: 0.5;
}

/* ----------------------------------------------------------------
   FORM ELEMENTS — comprehensive coverage
   ---------------------------------------------------------------- */

/* Fieldsets and legends */
div.workflow.wf-design-modern.wf-dark fieldset,
body.wf-design-modern.wf-dark fieldset {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark legend,
body.wf-design-modern.wf-dark legend {
    color: var(--wf-text-primary) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* Help blocks */
div.workflow.wf-design-modern.wf-dark .help-block,
body.wf-design-modern.wf-dark .help-block {
    color: var(--wf-text-muted) !important;
}

/* Input sizing variants */
div.workflow.wf-design-modern.wf-dark .input-lg,
body.wf-design-modern.wf-dark .input-lg,
div.workflow.wf-design-modern.wf-dark .input-sm,
body.wf-design-modern.wf-dark .input-sm {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* ----------------------------------------------------------------
   NAVIGATION — Navbars, pills, breadcrumbs
   ---------------------------------------------------------------- */

/* Navbar */
div.workflow.wf-design-modern.wf-dark .navbar-default,
body.wf-design-modern.wf-dark .navbar-default {
    background-color: var(--wf-bg-header) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a:hover,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a:hover {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > .active > a,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > .active > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-brand,
body.wf-design-modern.wf-dark .navbar-default .navbar-brand {
    color: var(--wf-text-primary) !important;
}

/* Nav pills */
div.workflow.wf-design-modern.wf-dark .nav-pills > li > a,
body.wf-design-modern.wf-dark .nav-pills > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-pills > li > a:hover,
body.wf-design-modern.wf-dark .nav-pills > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-pills > li.active > a,
body.wf-design-modern.wf-dark .nav-pills > li.active > a,
div.workflow.wf-design-modern.wf-dark .nav-pills > li.active > a:hover,
body.wf-design-modern.wf-dark .nav-pills > li.active > a:hover {
    background-color: var(--wf-accent) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------
   PROGRESS BARS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .progress,
body.wf-design-modern.wf-dark .progress {
    background-color: var(--wf-bg-input) !important;
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern.wf-dark .progress-bar,
body.wf-design-modern.wf-dark .progress-bar {
    background-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-success,
body.wf-design-modern.wf-dark .progress-bar-success {
    background-color: var(--wf-success) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-warning,
body.wf-design-modern.wf-dark .progress-bar-warning {
    background-color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-danger,
body.wf-design-modern.wf-dark .progress-bar-danger {
    background-color: var(--wf-danger) !important;
}

/* ----------------------------------------------------------------
   THUMBNAILS & MEDIA
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .thumbnail,
body.wf-design-modern.wf-dark .thumbnail {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .caption,
body.wf-design-modern.wf-dark .caption {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .media-heading,
body.wf-design-modern.wf-dark .media-heading {
    color: var(--wf-text-primary) !important;
}

/* ----------------------------------------------------------------
   POPOVERS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .popover,
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-title,
body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-content,
body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.top > .arrow:after,
body.wf-design-modern.wf-dark .popover.top > .arrow:after {
    border-top-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.bottom > .arrow:after,
body.wf-design-modern.wf-dark .popover.bottom > .arrow:after {
    border-bottom-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.left > .arrow:after,
body.wf-design-modern.wf-dark .popover.left > .arrow:after {
    border-left-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.right > .arrow:after,
body.wf-design-modern.wf-dark .popover.right > .arrow:after {
    border-right-color: var(--wf-bg-elevated) !important;
}

/* ----------------------------------------------------------------
   TOOLTIPS (comprehensive)
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .tooltip .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip .tooltip-inner {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-md);
}

/* ----------------------------------------------------------------
   ACCORDION / COLLAPSE
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .panel-group .panel + .panel,
body.wf-design-modern.wf-dark .panel-group .panel + .panel {
    margin-top: 0;
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern.wf-dark .panel-group .panel-heading + .panel-collapse > .panel-body,
body.wf-design-modern.wf-dark .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--wf-border) !important;
}

/* ----------------------------------------------------------------
   BODY BACKGROUND — ensure full page dark when active
   ---------------------------------------------------------------- */

body.wf-design-modern.wf-dark {
    background-color: var(--wf-bg-canvas) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic text color overrides on body level */
body.wf-design-modern.wf-dark h1,
body.wf-design-modern.wf-dark h2,
body.wf-design-modern.wf-dark h3,
body.wf-design-modern.wf-dark h4,
body.wf-design-modern.wf-dark h5,
body.wf-design-modern.wf-dark h6 {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark p,
body.wf-design-modern.wf-dark span,
body.wf-design-modern.wf-dark label {
    color: var(--wf-text-primary);
}

body.wf-design-modern.wf-dark a {
    color: var(--wf-accent);
}

body.wf-design-modern.wf-dark a:hover {
    color: var(--wf-accent-hover);
}

body.wf-design-modern.wf-dark hr {
    border-top-color: var(--wf-border) !important;
}

/* ----------------------------------------------------------------
   MODERN (LIGHT) BODY-LEVEL OVERRIDES
   Ensure the modern light theme also styles page-level elements
   ---------------------------------------------------------------- */

body.wf-design-modern:not(.wf-dark) {
    background-color: var(--wf-bg-canvas, #F8FAFC) !important;
}

/* ================================================================
   MODERN .btn — ALL Bootstrap 3 button variants (light + dark)
   Polished, consistent styling matching #apply / modal footer pattern
   ================================================================ */

/* ---- Base btn ---- */
div.workflow.wf-design-modern .btn,
body.wf-design-modern .btn {
    border-radius: var(--wf-r-sm) !important;
    transition: var(--wf-t-fast) !important;
    font-weight: 500;
}

div.workflow.wf-design-modern .btn:focus,
body.wf-design-modern .btn:focus {
    box-shadow: 0 0 0 3px var(--wf-accent-light) !important;
    outline: none !important;
}

/* ---- btn-default (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-default:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default:not(.is-active) {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-default:hover:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default:hover:not(.is-active) {
    background-color: var(--wf-n-100) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-default:active,
body.wf-design-modern:not(.wf-dark) .btn-default:active:not(.is-active),
div.workflow.wf-design-modern:not(.wf-dark) .btn-default.active:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default.active:not(.is-active) {
    background-color: var(--wf-n-200) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ---- btn-primary (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-primary,
body.wf-design-modern:not(.wf-dark) .btn-primary {
    background: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-primary:hover,
body.wf-design-modern:not(.wf-dark) .btn-primary:hover {
    background: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-primary:active,
body.wf-design-modern:not(.wf-dark) .btn-primary:active {
    background: #1D4ED8 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-success (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-success,
body.wf-design-modern:not(.wf-dark) .btn-success {
    background: var(--wf-success, #10B981) !important;
    border-color: var(--wf-success, #10B981) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-success:hover,
body.wf-design-modern:not(.wf-dark) .btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-success:active,
body.wf-design-modern:not(.wf-dark) .btn-success:active {
    background: #047857 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-info (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-info,
body.wf-design-modern:not(.wf-dark) .btn-info {
    background: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-info:hover,
body.wf-design-modern:not(.wf-dark) .btn-info:hover {
    background: #0369A1 !important;
    border-color: #0369A1 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-info:active,
body.wf-design-modern:not(.wf-dark) .btn-info:active {
    background: #075985 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-warning (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-warning,
body.wf-design-modern:not(.wf-dark) .btn-warning {
    background: var(--wf-warning, #F59E0B) !important;
    border-color: var(--wf-warning, #F59E0B) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-warning:hover,
body.wf-design-modern:not(.wf-dark) .btn-warning:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-warning:active,
body.wf-design-modern:not(.wf-dark) .btn-warning:active {
    background: #B45309 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-danger (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-danger,
body.wf-design-modern:not(.wf-dark) .btn-danger {
    background: var(--wf-danger, #EF4444) !important;
    border-color: var(--wf-danger, #EF4444) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-danger:hover,
body.wf-design-modern:not(.wf-dark) .btn-danger:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-danger:active,
body.wf-design-modern:not(.wf-dark) .btn-danger:active {
    background: #B91C1C !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-link (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-link,
body.wf-design-modern:not(.wf-dark) .btn-link {
    color: var(--wf-accent) !important;
    text-decoration: none !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-link:hover,
body.wf-design-modern:not(.wf-dark) .btn-link:hover {
    color: var(--wf-accent-hover) !important;
    text-decoration: underline !important;
}

/* ---- btn-outline-on-hover (modern light — polish the existing class) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-outline-on-hover,
body.wf-design-modern:not(.wf-dark) .btn-outline-on-hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-outline-on-hover:hover,
body.wf-design-modern:not(.wf-dark) .btn-outline-on-hover:hover {
    background: var(--wf-n-100) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- Dark btn enhancements — add box-shadows matching #apply pattern ---- */
div.workflow.wf-design-modern.wf-dark .btn-primary,
body.wf-design-modern.wf-dark .btn-primary {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-primary:hover,
body.wf-design-modern.wf-dark .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-success,
body.wf-design-modern.wf-dark .btn-success {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-success:hover,
body.wf-design-modern.wf-dark .btn-success:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-info,
body.wf-design-modern.wf-dark .btn-info {
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-danger,
body.wf-design-modern.wf-dark .btn-danger {
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-danger:hover,
body.wf-design-modern.wf-dark .btn-danger:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-warning,
body.wf-design-modern.wf-dark .btn-warning {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* ====================================================================
   COMPREHENSIVE HTML SELECTOR COVERAGE — Modern Light + Dark
   Added to ensure every HTML element within div.workflow and body-level
   elements gets proper modern theme styling.
   ==================================================================== */

/* -------------------------------------------------------------------
   SECTION: Typography & Text Elements
   ------------------------------------------------------------------- */

/* h6 (h1-h5 already covered above) */
div.workflow.wf-design-modern h6,
body.wf-design-modern h6 {
    color: var(--wf-text-primary);
}

/* Paragraphs */
div.workflow.wf-design-modern p,
body.wf-design-modern p {
    color: var(--wf-text-primary);
    margin-bottom: 8px;
}

/* Links */
div.workflow.wf-design-modern a,
body.wf-design-modern a {
    color: var(--wf-accent);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern a:hover,
body.wf-design-modern a:hover {
    color: var(--wf-accent-hover);
}

div.workflow.wf-design-modern a:active,
body.wf-design-modern a:active {
    color: var(--wf-accent);
    opacity: 0.85;
}

/* Inline text elements */
div.workflow.wf-design-modern small,
body.wf-design-modern small {
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern strong,
body.wf-design-modern strong {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern em,
body.wf-design-modern em {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern mark,
body.wf-design-modern mark {
    background-color: var(--wf-warning-bg);
    color: var(--wf-text-primary);
    padding: 1px 4px;
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern del,
body.wf-design-modern del {
    color: var(--wf-text-muted);
    text-decoration: line-through;
}

div.workflow.wf-design-modern ins,
body.wf-design-modern ins {
    color: var(--wf-success);
    text-decoration: underline;
}

div.workflow.wf-design-modern sub,
div.workflow.wf-design-modern sup,
body.wf-design-modern sub,
body.wf-design-modern sup {
    color: var(--wf-text-secondary);
}

/* Blockquote */
div.workflow.wf-design-modern blockquote,
body.wf-design-modern blockquote {
    border-left: 4px solid var(--wf-accent);
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--wf-bg-card);
    color: var(--wf-text-secondary);
    border-radius: 0 var(--wf-r-md) var(--wf-r-md) 0;
}

div.workflow.wf-design-modern blockquote p,
body.wf-design-modern blockquote p {
    margin-bottom: 0;
}

/* Code / Pre / Kbd / Samp */
div.workflow.wf-design-modern pre,
body.wf-design-modern pre {
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 12px 16px;
    font-size: var(--wf-fs-sm);
}

div.workflow.wf-design-modern code,
body.wf-design-modern code {
    background: var(--wf-bg-input);
    color: var(--wf-danger);
    border-radius: var(--wf-r-sm);
    padding: 2px 6px;
    font-size: 90%;
    border: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern pre code,
body.wf-design-modern pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

div.workflow.wf-design-modern kbd,
body.wf-design-modern kbd {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border-strong);
    border-radius: var(--wf-r-sm);
    padding: 2px 6px;
    font-size: 90%;
    box-shadow: 0 1px 0 var(--wf-border);
}

div.workflow.wf-design-modern samp,
body.wf-design-modern samp {
    color: var(--wf-text-primary);
    font-family: monospace;
}

/* Abbreviation */
div.workflow.wf-design-modern abbr[title],
body.wf-design-modern abbr[title] {
    border-bottom: 1px dotted var(--wf-text-muted);
    cursor: help;
}

/* Horizontal rule */
div.workflow.wf-design-modern hr,
body.wf-design-modern hr {
    border-top: 1px solid var(--wf-border);
    margin: 16px 0;
}

/* -------------------------------------------------------------------
   SECTION: Lists
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ul,
div.workflow.wf-design-modern ol,
body.wf-design-modern ul,
body.wf-design-modern ol {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern li,
body.wf-design-modern li {
    color: var(--wf-text-primary);
    line-height: 1.6;
}

div.workflow.wf-design-modern dl,
body.wf-design-modern dl {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern dt,
body.wf-design-modern dt {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern dd,
body.wf-design-modern dd {
    color: var(--wf-text-secondary);
    margin-left: 20px;
}

/* -------------------------------------------------------------------
   SECTION: Tables (enhanced — striped, bordered, condensed, caption)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .table-striped > tbody > tr:nth-child(odd),
body.wf-design-modern .table-striped > tbody > tr:nth-child(odd) {
    background-color: var(--wf-bg-card);
}

div.workflow.wf-design-modern .table-bordered,
body.wf-design-modern .table-bordered {
    border-color: var(--wf-border);
}

div.workflow.wf-design-modern .table-bordered > thead > tr > th,
div.workflow.wf-design-modern .table-bordered > thead > tr > td,
div.workflow.wf-design-modern .table-bordered > tbody > tr > th,
div.workflow.wf-design-modern .table-bordered > tbody > tr > td,
div.workflow.wf-design-modern .table-bordered > tfoot > tr > th,
div.workflow.wf-design-modern .table-bordered > tfoot > tr > td,
body.wf-design-modern .table-bordered > thead > tr > th,
body.wf-design-modern .table-bordered > thead > tr > td,
body.wf-design-modern .table-bordered > tbody > tr > th,
body.wf-design-modern .table-bordered > tbody > tr > td,
body.wf-design-modern .table-bordered > tfoot > tr > th,
body.wf-design-modern .table-bordered > tfoot > tr > td {
    border-color: var(--wf-border);
}

div.workflow.wf-design-modern .table-condensed > thead > tr > th,
div.workflow.wf-design-modern .table-condensed > thead > tr > td,
div.workflow.wf-design-modern .table-condensed > tbody > tr > th,
div.workflow.wf-design-modern .table-condensed > tbody > tr > td,
body.wf-design-modern .table-condensed > thead > tr > th,
body.wf-design-modern .table-condensed > thead > tr > td,
body.wf-design-modern .table-condensed > tbody > tr > th,
body.wf-design-modern .table-condensed > tbody > tr > td {
    padding: 4px 8px;
}

div.workflow.wf-design-modern caption,
body.wf-design-modern caption {
    color: var(--wf-text-muted);
    padding: 8px 0;
}

div.workflow.wf-design-modern tfoot > tr > td,
div.workflow.wf-design-modern tfoot > tr > th,
body.wf-design-modern tfoot > tr > td,
body.wf-design-modern tfoot > tr > th {
    color: var(--wf-text-secondary);
    border-top: 2px solid var(--wf-border);
    background-color: var(--wf-bg-card);
}

/* -------------------------------------------------------------------
   SECTION: Forms (enhanced — validation states, checkbox/radio, file, range)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .radio label,
div.workflow.wf-design-modern .checkbox label,
body.wf-design-modern .radio label,
body.wf-design-modern .checkbox label {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .radio-inline,
div.workflow.wf-design-modern .checkbox-inline,
body.wf-design-modern .radio-inline,
body.wf-design-modern .checkbox-inline {
    color: var(--wf-text-primary);
}

/* Validation states */
div.workflow.wf-design-modern .has-error .form-control,
body.wf-design-modern .has-error .form-control {
    border-color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .has-error .control-label,
div.workflow.wf-design-modern .has-error .help-block,
body.wf-design-modern .has-error .control-label,
body.wf-design-modern .has-error .help-block {
    color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .has-warning .form-control,
body.wf-design-modern .has-warning .form-control {
    border-color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .has-warning .control-label,
div.workflow.wf-design-modern .has-warning .help-block,
body.wf-design-modern .has-warning .control-label,
body.wf-design-modern .has-warning .help-block {
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .has-success .form-control,
body.wf-design-modern .has-success .form-control {
    border-color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .has-success .control-label,
div.workflow.wf-design-modern .has-success .help-block,
body.wf-design-modern .has-success .control-label,
body.wf-design-modern .has-success .help-block {
    color: var(--wf-success) !important;
}

/* Input group */
div.workflow.wf-design-modern .input-group,
body.wf-design-modern .input-group {
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .input-group-btn .btn,
body.wf-design-modern .input-group-btn .btn {
    border-color: var(--wf-border);
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .input-group-btn .btn:hover,
body.wf-design-modern .input-group-btn .btn:hover {
    background: var(--wf-bg-card-hover);
}

/* Form group */
div.workflow.wf-design-modern .form-group,
body.wf-design-modern .form-group {
    margin-bottom: 12px;
}
div.workflow.wf-design-modern .editableform .form-group,
body.wf-design-modern .editableform .form-group {
    margin-bottom: 0px!important;
}

div.workflow.wf-design-modern .form-horizontal .control-label,
body.wf-design-modern .form-horizontal .control-label {
    color: var(--wf-text-primary);
}

/* Checkbox and radio accent */
div.workflow.wf-design-modern input[type="checkbox"],
div.workflow.wf-design-modern input[type="radio"],
body.wf-design-modern input[type="checkbox"],
body.wf-design-modern input[type="radio"] {
    accent-color: var(--wf-accent);
}

/* Range input */
div.workflow.wf-design-modern input[type="range"],
body.wf-design-modern input[type="range"] {
    accent-color: var(--wf-accent);
}

/* File input */
div.workflow.wf-design-modern input[type="file"],
body.wf-design-modern input[type="file"] {
    color: var(--wf-text-primary);
}

/* Placeholder */
div.workflow.wf-design-modern ::placeholder,
body.wf-design-modern ::placeholder {
    color: var(--wf-text-muted) !important;
    opacity: 1;
}

/* Multi-select */
div.workflow.wf-design-modern select[multiple],
body.wf-design-modern select[multiple] {
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Panels
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .panel,
body.wf-design-modern .panel {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-sm);
}

div.workflow.wf-design-modern .panel-heading,
body.wf-design-modern .panel-heading {
    background-color: var(--wf-bg-card);
    border-bottom-color: var(--wf-border);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0;
}

div.workflow.wf-design-modern .panel-title,
body.wf-design-modern .panel-title {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern .panel-body,
body.wf-design-modern .panel-body {
    background-color: var(--wf-bg-surface);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .panel-footer,
body.wf-design-modern .panel-footer {
    background-color: var(--wf-bg-card);
    border-top-color: var(--wf-border);
    border-radius: 0 0 var(--wf-r-md) var(--wf-r-md);
}

div.workflow.wf-design-modern .panel-default > .panel-heading,
body.wf-design-modern .panel-default > .panel-heading {
    background-color: var(--wf-bg-card);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .panel-primary > .panel-heading,
body.wf-design-modern .panel-primary > .panel-heading {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Wells, Badges, Labels
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .well,
body.wf-design-modern .well {
    background-color: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .badge,
body.wf-design-modern .badge {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
    font-weight: 600;
    border-radius: var(--wf-r-full);
}

div.workflow.wf-design-modern .label-default,
body.wf-design-modern .label-default {
    background-color: var(--wf-n-200);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .label-primary,
body.wf-design-modern .label-primary {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .label-success,
body.wf-design-modern .label-success {
    background-color: var(--wf-success);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-info,
body.wf-design-modern .label-info {
    background-color: var(--wf-info);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-warning,
body.wf-design-modern .label-warning {
    background-color: var(--wf-warning);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-danger,
body.wf-design-modern .label-danger {
    background-color: var(--wf-danger);
    color: #fff!important;
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — List Groups
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .list-group,
body.wf-design-modern .list-group {
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .list-group-item,
body.wf-design-modern .list-group-item {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .list-group-item:hover,
body.wf-design-modern .list-group-item:hover {
    background-color: var(--wf-bg-card-hover);
}

div.workflow.wf-design-modern .list-group-item.active,
div.workflow.wf-design-modern .list-group-item.active:hover,
body.wf-design-modern .list-group-item.active,
body.wf-design-modern .list-group-item.active:hover {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .list-group-item.disabled,
body.wf-design-modern .list-group-item.disabled {
    background-color: var(--wf-bg-card);
    color: var(--wf-text-disabled);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Breadcrumb, Pagination, Pager
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .breadcrumb,
body.wf-design-modern .breadcrumb {
    background-color: var(--wf-bg-card);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern .breadcrumb > .active,
body.wf-design-modern .breadcrumb > .active {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .breadcrumb > li + li::before,
body.wf-design-modern .breadcrumb > li + li::before {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .pagination > li > a,
div.workflow.wf-design-modern .pagination > li > span,
body.wf-design-modern .pagination > li > a,
body.wf-design-modern .pagination > li > span {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-accent);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .pagination > li > a:hover,
body.wf-design-modern .pagination > li > a:hover {
    background-color: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-accent-hover);
}

div.workflow.wf-design-modern .pagination > .active > a,
div.workflow.wf-design-modern .pagination > .active > span,
body.wf-design-modern .pagination > .active > a,
body.wf-design-modern .pagination > .active > span {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .pagination > .disabled > a,
div.workflow.wf-design-modern .pagination > .disabled > span,
body.wf-design-modern .pagination > .disabled > a,
body.wf-design-modern .pagination > .disabled > span {
    background-color: var(--wf-bg-card);
    border-color: var(--wf-border);
    color: var(--wf-text-disabled);
}

div.workflow.wf-design-modern .pager > li > a,
body.wf-design-modern .pager > li > a {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-accent);
    border-radius: var(--wf-r-full);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .pager > li > a:hover,
body.wf-design-modern .pager > li > a:hover {
    background-color: var(--wf-bg-card-hover);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Thumbnail, Jumbotron, Media
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .thumbnail,
body.wf-design-modern .thumbnail {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .jumbotron,
body.wf-design-modern .jumbotron {
    background-color: var(--wf-bg-card);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-lg);
}

div.workflow.wf-design-modern .media-body,
body.wf-design-modern .media-body {
    color: var(--wf-text-primary);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Popover, Tooltip
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .popover,
body.wf-design-modern .popover {
    background-color: var(--wf-bg-elevated);
    border-color: var(--wf-border);
    box-shadow: var(--wf-sh-lg);
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .popover-title,
body.wf-design-modern .popover-title {
    background-color: var(--wf-bg-card);
    border-bottom-color: var(--wf-border);
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern .popover-content,
body.wf-design-modern .popover-content {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .tooltip-inner,
body.wf-design-modern .tooltip-inner {
    background-color: var(--wf-n-800);
    color: #fff;
    border-radius: var(--wf-r-sm);
    font-size: var(--wf-fs-xs);
}

div.workflow.wf-design-modern .tooltip.top .tooltip-arrow,
body.wf-design-modern .tooltip.top .tooltip-arrow {
    border-top-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.bottom .tooltip-arrow,
body.wf-design-modern .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.left .tooltip-arrow,
body.wf-design-modern .tooltip.left .tooltip-arrow {
    border-left-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.right .tooltip-arrow,
body.wf-design-modern .tooltip.right .tooltip-arrow {
    border-right-color: var(--wf-n-800);
}

/* -------------------------------------------------------------------
   SECTION: Utility Classes — Text & Background Colors
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .text-muted,
body.wf-design-modern .text-muted {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern .text-primary,
body.wf-design-modern .text-primary {
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .text-success,
body.wf-design-modern .text-success {
    color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .text-info,
body.wf-design-modern .text-info {
    color: var(--wf-info) !important;
}

div.workflow.wf-design-modern .text-warning,
body.wf-design-modern .text-warning {
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .text-danger,
body.wf-design-modern .text-danger {
    color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .bg-primary,
body.wf-design-modern .bg-primary {
    background-color: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

div.workflow.wf-design-modern .bg-success,
body.wf-design-modern .bg-success {
    background-color: var(--wf-success-bg) !important;
    color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .bg-info,
body.wf-design-modern .bg-info {
    background-color: var(--wf-info-bg) !important;
    color: var(--wf-info) !important;
}

div.workflow.wf-design-modern .bg-warning,
body.wf-design-modern .bg-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .bg-danger,
body.wf-design-modern .bg-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}

/* Caret */
div.workflow.wf-design-modern .caret,
body.wf-design-modern .caret {
    border-top-color: var(--wf-text-secondary);
}

/* Close button (generic, not just modal) */
div.workflow.wf-design-modern .close,
body.wf-design-modern .close {
    color: var(--wf-text-muted);
    text-shadow: none;
    opacity: 0.6;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .close:hover,
body.wf-design-modern .close:hover {
    color: var(--wf-text-primary);
    opacity: 1;
}

/* -------------------------------------------------------------------
   SECTION: Scrollbar Styling
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ::-webkit-scrollbar,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div.workflow.wf-design-modern ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

div.workflow.wf-design-modern ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: var(--wf-n-300);
    border-radius: var(--wf-r-full);
}

div.workflow.wf-design-modern ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-n-400);
}

/* Dark scrollbar */
div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: var(--wf-n-600);
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-n-500);
}

/* -------------------------------------------------------------------
   SECTION: Selection & Focus
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ::selection,
body.wf-design-modern ::selection {
    background: rgba(59, 130, 246, 0.25);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern.wf-dark ::selection,
body.wf-design-modern.wf-dark ::selection {
    background: rgba(96, 165, 250, 0.30);
}

/* Focus-visible: subtle ring, not heavy outline */
div.workflow.wf-design-modern *:focus-visible,
body.wf-design-modern *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wf-bg-surface), 0 0 0 4px rgba(59, 130, 246, 0.35);
}

/* Inputs/textareas/selects: use border glow instead of box-shadow ring */
div.workflow.wf-design-modern input:focus,
div.workflow.wf-design-modern textarea:focus,
div.workflow.wf-design-modern select:focus,
div.workflow.wf-design-modern .form-control:focus,
body.wf-design-modern input:focus,
body.wf-design-modern textarea:focus,
body.wf-design-modern select:focus,
body.wf-design-modern .form-control:focus {
    outline: none !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark input:focus,
div.workflow.wf-design-modern.wf-dark textarea:focus,
div.workflow.wf-design-modern.wf-dark select:focus,
div.workflow.wf-design-modern.wf-dark .form-control:focus,
body.wf-design-modern.wf-dark input:focus,
body.wf-design-modern.wf-dark textarea:focus,
body.wf-design-modern.wf-dark select:focus,
body.wf-design-modern.wf-dark .form-control:focus {
    outline: none !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

/* -------------------------------------------------------------------
   SECTION: Images & Media
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern figure,
body.wf-design-modern figure {
    margin: 0;
}

div.workflow.wf-design-modern figcaption,
body.wf-design-modern figcaption {
    color: var(--wf-text-muted);
    font-size: var(--wf-fs-sm);
    margin-top: 4px;
}

/* -------------------------------------------------------------------
   SECTION: Interactive Elements — Details / Summary
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern details,
body.wf-design-modern details {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 8px 12px;
    background: var(--wf-bg-card);
}

div.workflow.wf-design-modern details[open],
body.wf-design-modern details[open] {
    padding-bottom: 12px;
}

div.workflow.wf-design-modern summary,
body.wf-design-modern summary {
    color: var(--wf-text-primary);
    cursor: pointer;
    font-weight: 600;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern summary:hover,
body.wf-design-modern summary:hover {
    color: var(--wf-accent);
}

/* -------------------------------------------------------------------
   SECTION: Nav-pills (enhanced — already have basic dark, add light)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li > a,
body.wf-design-modern:not(.wf-dark) .nav-pills > li > a {
    color: var(--wf-text-secondary);
    border-radius: var(--wf-r-md);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li > a:hover,
body.wf-design-modern:not(.wf-dark) .nav-pills > li > a:hover {
    background-color: var(--wf-bg-card-hover);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a,
div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a:hover,
body.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a,
body.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a:hover {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

/* -------------------------------------------------------------------
   SECTION: Dark-Only Overrides (only for hardcoded values that tokens
   can't handle — inverted tooltips, specific dark colors, etc.)
   ------------------------------------------------------------------- */

/* Dark code — hardcoded red for syntax, not token-based */
div.workflow.wf-design-modern.wf-dark code,
body.wf-design-modern.wf-dark code {
    color: #F87171;
}

/* Dark label-default — needs specific neutral shades */
div.workflow.wf-design-modern.wf-dark .label-default,
body.wf-design-modern.wf-dark .label-default {
    background-color: var(--wf-n-700);
    color: var(--wf-n-200);
}

/* Dark mark — hardcoded translucent orange */
div.workflow.wf-design-modern.wf-dark mark,
body.wf-design-modern.wf-dark mark {
    background-color: rgba(245, 158, 11, 0.20);
    color: var(--wf-warning-text);
}

/* Dark tooltip — inverted (light bg, dark text) for contrast */
div.workflow.wf-design-modern.wf-dark .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-n-100);
    color: var(--wf-n-900);
}

div.workflow.wf-design-modern.wf-dark .tooltip.top .tooltip-arrow,
body.wf-design-modern.wf-dark .tooltip.top .tooltip-arrow {
    border-top-color: var(--wf-n-100);
}

div.workflow.wf-design-modern.wf-dark .tooltip.bottom .tooltip-arrow,
body.wf-design-modern.wf-dark .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--wf-n-100);
}

/* ----------------------------------------------------------------
   Flash messages — modern styling (light + dark)
   ---------------------------------------------------------------- */
body.wf-design-modern #flash {
    width: 480px;
    margin-left: -240px;
}

body.wf-design-modern #flash .flash_message {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 40px 12px 16px;
}

body.wf-design-modern #flash .flash_message .close {
    color: inherit;
    opacity: 0.6;
    font-size: 16px;
    top: 2px;
    right: 4px;
}

body.wf-design-modern #flash .flash_message .close:hover {
    opacity: 1;
}

body.wf-design-modern #flash .flash_message.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

body.wf-design-modern #flash .flash_message.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

body.wf-design-modern #flash .flash_message.alert-warning {
    background: #fefce8;
    border: 1px solid #fef08a;
    color: #a16207;
}

body.wf-design-modern #flash .flash_message.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Dark mode overrides */
body.wf-design-modern.wf-dark #flash .flash_message {
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-warning {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde047;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* ================================================================
   DW-2774 — Modern Header Bar
   Targets .wf-modern-header class from the modern template.
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- .hidden must always hide in modern mode ---- */
div.workflow.wf-design-modern .hidden,
body.wf-design-modern .hidden {
    display: none !important;
}

/* ---- Hide classic header elements in modern mode ---- */
div.workflow.wf-design-modern .d3view-wf-header .plugin-logo-container,
body.wf-design-modern .d3view-wf-header .plugin-logo-container {
    display: none !important;
}

/* ---- R0-3335: DUPLICATE modern-header block (also in wf-modern-header.css). Modern now
   renders the CLASSIC header, so layout/height overrides are stripped here too; only the
   visual theming (bg / border / shadow) is kept. ---- */
div.workflow.wf-design-modern .d3view-wf-header,
body.wf-design-modern .d3view-wf-header {
    /* R0-3335 - layout removed; classic header sizes itself
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
    padding: 0 !important;
    overflow: visible;
    */
    background: var(--wf-bg-header);
    border-bottom: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-xs);
    -webkit-font-smoothing: antialiased;
}

/* ---- R0-3335: force-flex-row block commented out (let classic header keep its layout)
div.workflow.wf-design-modern .d3view-wf-header .plugin-header-right,
body.wf-design-modern .d3view-wf-header .plugin-header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 var(--wf-sp-3) !important;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-level-1,
body.wf-design-modern .d3view-wf-header .plugin-header-level-1 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: var(--wf-sp-2);
    width: 100%;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-left,
body.wf-design-modern .d3view-wf-header .plugin-header-left {
    flex-shrink: 0;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-right,
body.wf-design-modern .d3view-wf-header .plugin-header-right {
    flex: 1 1 auto !important;
}
---- end commented force-flex block ---- */

/* ---- Top settings container — modern VISUAL theming only (R0-3335: layout/height removed) ---- */
div.workflow.wf-design-modern .top-settings-container,
body.wf-design-modern .top-settings-container {
    /* R0-3335 - layout removed; classic header sizes itself
    position: relative !important;
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    z-index: var(--wf-z-header) !important;
    */
    background: var(--wf-bg-header) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-xs) !important;
}

/* ---- Workflow name — modernize ---- */
div.workflow.wf-design-modern .wf-name-container,
body.wf-design-modern .wf-name-container {
    margin-left: 0 !important;
}

div.workflow.wf-design-modern .wf-name-container .wf-name,
body.wf-design-modern .wf-name-container .wf-name {
    font-size: var(--wf-fs-md) !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
}

/* ---- Execution controls — compact ---- */
div.workflow.wf-design-modern .wf-exec-controls-container,
body.wf-design-modern .wf-exec-controls-container {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
}

div.workflow.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn-group > .btn,
body.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn-group > .btn,
div.workflow.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn,
body.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--wf-r-sm) !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

/* ---- Dropdowns — clean up for modern ---- */
div.workflow.wf-design-modern .wf-dropdowns,
body.wf-design-modern .wf-dropdowns {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown > a,
body.wf-design-modern .wf-dropdowns .dropdown > a,
div.workflow.wf-design-modern .wf-dropdowns .pl-dropdown > a,
body.wf-design-modern .wf-dropdowns .pl-dropdown > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 10px !important;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown > a:hover,
body.wf-design-modern .wf-dropdowns .dropdown > a:hover,
div.workflow.wf-design-modern .wf-dropdowns .pl-dropdown > a:hover,
body.wf-design-modern .wf-dropdowns .pl-dropdown > a:hover {
    color: var(--wf-text-primary) !important;
}

/* ---- Dropdown menus ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu,
body.wf-design-modern .wf-dropdowns .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li a,
body.wf-design-modern .wf-dropdowns .dropdown-menu li a {
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 12px !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li a:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu li a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- wf-dropdowns: li:hover (generic hover bg for any <li>) ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu > li:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu > li:hover {
    background-color: var(--wf-accent-light) !important;
}

/* ---- wf-dropdowns: .open state on parent dropdown <li> ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown.open > a,
body.wf-design-modern .wf-dropdowns .dropdown.open > a,
div.workflow.wf-design-modern .wf-dropdowns-list > li.dropdown.open > a,
body.wf-design-modern .wf-dropdowns-list > li.dropdown.open > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- wf-dropdowns: dropdown-submenu hover ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-submenu:hover > a,
body.wf-design-modern .wf-dropdowns .dropdown-submenu:hover > a {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-submenu > .dropdown-menu,
body.wf-design-modern .wf-dropdowns .dropdown-submenu > .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
}

/* ---- wf-dropdowns: disabled items ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled > a,
body.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled > a {
    color: var(--wf-text-disabled) !important;
    cursor: not-allowed;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled:hover {
    background-color: transparent !important;
}

/* ---- wf-dropdowns: divider ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu .divider,
body.wf-design-modern .wf-dropdowns .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0;
}

/* ---- Status indicator — compact inline ---- */
div.workflow.wf-design-modern .wf-start-status,
body.wf-design-modern .wf-start-status {
    font-size: var(--wf-fs-xs) !important;
    padding: 2px 8px !important;
    border-radius: var(--wf-r-full) !important;
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* ---- Modern header — the actual flex container ---- */
div.workflow.wf-design-modern .wf-modern-header,
body.wf-design-modern .wf-modern-header {
    display: flex;
    align-items: center;
    height: var(--wf-header-h);
    padding: 0 var(--wf-sp-3);
    gap: var(--wf-sp-2);
    width: 100%;
}

/* ---- Title ---- */
div.workflow.wf-design-modern .wf-modern-header-title,
body.wf-design-modern .wf-modern-header-title {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
    font-size: var(--wf-fs-md);
    font-weight: 600;
    color: var(--wf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 0;
    margin-left: 0 !important;
}

/** Added by shashank2104 on 2026-04-02 - DW-2795 - Expand title area when inline editable is active **/
div.workflow.wf-design-modern .wf-modern-header.wf-name-editing .wf-modern-header-title,
body.wf-design-modern .wf-modern-header.wf-name-editing .wf-modern-header-title {
    max-width: 500px;
    overflow: visible;
}

div.workflow.wf-design-modern .wf-modern-header-title .wf-modern-header-icon,
body.wf-design-modern .wf-modern-header-title .wf-modern-header-icon {
    font-size: var(--wf-fs-sm);
    color: var(--wf-text-secondary);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-title .wf-name,
body.wf-design-modern .wf-modern-header-title .wf-name {
    color: var(--wf-text-primary) !important;
}

/* ---- Menu items (from reused classic dropdown template) ---- */
div.workflow.wf-design-modern .wf-modern-header-menus,
body.wf-design-modern .wf-modern-header-menus {
    gap: 0 !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Hide classic level-2 sections rendered inside modern menus — modern header has its own search/controls */
div.workflow.wf-design-modern .wf-modern-header-menus .level-2-center,
body.wf-design-modern .wf-modern-header-menus .level-2-center,
div.workflow.wf-design-modern .wf-modern-header-menus .level-2-right,
body.wf-design-modern .wf-modern-header-menus .level-2-right {
    display: none !important;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 10px !important;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    white-space: nowrap;
    text-decoration: none;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a:hover,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a:hover,
div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li.open > a,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li.open > a {
    color: var(--wf-text-primary) !important;
    background-color: unset !important;
}

/* Dropdown menus */
div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-md);
}

div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu li a,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu li a {
    color: var(--wf-text-secondary);
    font-size: var(--wf-fs-sm);
    padding: 6px 12px;
}

div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu li a:hover,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-text-primary);
}

/* ---- Search bar — push to right, accommodate GlobalSearchView ---- */
div.workflow.wf-design-modern .wf-modern-header-search,
body.wf-design-modern .wf-modern-header-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
    flex: 0 1 360px;
    min-width: 200px;
    max-width: 480px;
}

/* GlobalSearchView root inside modern search */
div.workflow.wf-design-modern .wf-modern-header-search .d3view-wf-global-search,
body.wf-design-modern .wf-modern-header-search .d3view-wf-global-search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
}

/* Search outer wrapper — flex row; override p-relative so dropdown sizes to wf-modern-header-search */
div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search-outer,
body.wf-design-modern .wf-modern-header-search .wf-worker-search-outer {
    display: flex !important;
    align-items: center;
    width: 100%;
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    height: 32px;
    padding: 0 8px;
    gap: 4px;
    transition: border-color var(--wf-t-fast);
    position: static !important;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search-outer:focus-within,
body.wf-design-modern .wf-modern-header-search .wf-worker-search-outer:focus-within {
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search type dropdown button */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-dd,
body.wf-design-modern .wf-modern-header-search .wf-search-type-dd {
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-btn,
body.wf-design-modern .wf-modern-header-search .wf-search-type-btn {
    padding: 2px 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px;
    height: auto;
    min-width: 0;
}

/* Search input inside worker-search-dd */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd,
body.wf-design-modern .wf-modern-header-search .worker-search-dd {
    flex: 1;
    min-width: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-input-container,
body.wf-design-modern .wf-modern-header-search .wf-search-input-container {
    width: 100%;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search,
body.wf-design-modern .wf-modern-header-search .wf-worker-search {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    height: 28px !important;
    font-size: var(--wf-fs-sm) !important;
    color: var(--wf-text-secondary) !important;
    width: 100% !important;
    border-radius: 0 !important;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search:focus,
body.wf-design-modern .wf-modern-header-search .wf-worker-search:focus {
    color: var(--wf-text-primary) !important;
}

/* Search results dropdown — aligned to wf-modern-header-search (position: relative at line 340) */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu {
    position: absolute !important;
    top: 36px !important;
    left: -60px !important;
    right: auto !important;
    width: 100%;
    min-width: 360px;
    max-height: 400px !important;
    height: auto !important;
    overflow-y: auto;
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md)!important;
    box-shadow: var(--wf-sh-lg)!important;
    padding: var(--wf-sp-4)!important;
    z-index: var(--wf-z-tooltip);
}

/* Dropdown content styling — table, search info, close button */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .table,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .table {
    margin-bottom: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row td,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row td {
    padding: 10px 12px;
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:first-child td,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:first-child td {
    border-top: none;
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:hover,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:hover {
    background: var(--wf-bg-card-hover);
    cursor: pointer;
}

/* Search filter buttons — compact */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-btns,
body.wf-design-modern .wf-modern-header-search .wf-search-btns {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-btns .btn,
body.wf-design-modern .wf-modern-header-search .wf-search-btns .btn {
    padding: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 11px;
}

/* AI search toggle — compact */
div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search {
    padding: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--wf-text-muted);
    margin: 0 !important;
    flex-shrink: 0;
    transition: color var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search:hover,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search:hover {
    color: var(--wf-accent);
}

/* Revert zoom button */
div.workflow.wf-design-modern .wf-modern-header-search .revert-zoom,
body.wf-design-modern .wf-modern-header-search .revert-zoom {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size: var(--wf-fs-xs);
}

/* AI search input overlay */
div.workflow.wf-design-modern .wf-modern-header-search .wf-ai-search-container,
body.wf-design-modern .wf-modern-header-search .wf-ai-search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

/* R0-3401 — keep the AI toggle clickable above the overlay so users can exit AI mode */
div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search {
    position: relative;
    z-index: 6;
}

/* Hide original dummy search content — replaced by GlobalSearchView */
div.workflow.wf-design-modern .wf-modern-header-search > .wf-search-badge,
body.wf-design-modern .wf-modern-header-search > .wf-search-badge,
div.workflow.wf-design-modern .wf-modern-header-search > .worker-search-input,
body.wf-design-modern .wf-modern-header-search > .worker-search-input,
div.workflow.wf-design-modern .wf-modern-header-search > .wf-search-settings-btn,
body.wf-design-modern .wf-modern-header-search > .wf-search-settings-btn {
    display: none;
}

/* ---- Status indicator ---- */
div.workflow.wf-design-modern .wf-modern-header-status,
body.wf-design-modern .wf-modern-header-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-status-dot,
body.wf-design-modern .wf-modern-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wf-success);
    box-shadow: 0 0 6px var(--wf-success);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-status-text,
body.wf-design-modern .wf-modern-status-text {
    font-size: var(--wf-fs-xs) !important;
    color: var(--wf-text-muted) !important;
    font-weight: 500;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ---- Divider between button groups ---- */
div.workflow.wf-design-modern .wf-modern-header-divider,
body.wf-design-modern .wf-modern-header-divider {
    width: 1px;
    height: 24px;
    background: var(--wf-border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ---- Execution controls ---- */
div.workflow.wf-design-modern .wf-modern-header-exec,
body.wf-design-modern .wf-modern-header-exec {
    display: flex!important;
    align-items: center;
    gap: var(--wf-sp-1);
    flex-shrink: 0;
    margin: 0 !important;
}
div.workflow.wf-design-modern .wf-modern-header-exec .btn-text,
body.wf-design-modern .wf-modern-header-exec .btn-text {
    display: none;
}

div.workflow.wf-design-modern .wf-modern-header-exec .controls-btn-group,
body.wf-design-modern .wf-modern-header-exec .controls-btn-group {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
}

/* ---- Modern button base ---- */
div.workflow.wf-design-modern .wf-modern-btn,
body.wf-design-modern .wf-modern-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
}

div.workflow.wf-design-modern .wf-modern-btn:hover,
body.wf-design-modern .wf-modern-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Danger variant */
div.workflow.wf-design-modern .wf-modern-btn-danger,
body.wf-design-modern .wf-modern-btn-danger {
    border-color: var(--wf-danger);
    color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-modern-btn-danger:hover,
body.wf-design-modern .wf-modern-btn-danger:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* ---- Run button — green gradient ---- */
div.workflow.wf-design-modern .wf-modern-run-btn,
body.wf-design-modern .wf-modern-run-btn {
    background: var(--wf-grad-run) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    padding: 0 14px !important;
    height: 32px;
    border-radius: var(--wf-r-md) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wf-fs-sm);
    white-space: nowrap;
}

div.workflow.wf-design-modern .wf-modern-run-btn:hover,
body.wf-design-modern .wf-modern-run-btn:hover {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px);
}

/* ---- Execution spinner ---- */
div.workflow.wf-design-modern .wf-execution-spinner,
body.wf-design-modern .wf-execution-spinner {
    flex-shrink: 0;
}

/* ---- Progress bar ---- */
div.workflow.wf-design-modern .wf-execution-status .progress,
body.wf-design-modern .wf-execution-status .progress {
    height: 24px;
    border-radius: var(--wf-r-md);
}

/* ---- Control buttons (right side) ---- */
div.workflow.wf-design-modern .wf-modern-header-controls,
body.wf-design-modern .wf-modern-header-controls,
div.workflow.wf-design-modern .wf-control-buttons,
body.wf-design-modern .wf-control-buttons {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
    flex-shrink: 0;
    margin: 0 !important;
}

div.workflow.wf-design-modern .wf-modern-header-controls .btn-group,
body.wf-design-modern .wf-modern-header-controls .btn-group,
div.workflow.wf-design-modern .wf-control-buttons .btn-group,
body.wf-design-modern .wf-control-buttons .btn-group {
    display: flex;
    gap: var(--wf-sp-1);
}

/* Hide docs link in modern mode — not needed in compact header */
div.workflow.wf-design-modern .wf-control-buttons .docs,
body.wf-design-modern .wf-control-buttons .docs {
    display: none !important;
}

/* Modernize maximize/minimize/close buttons */
div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn,
body.wf-design-modern .wf-control-buttons .btn-group .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    box-shadow: none;
}

div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn:hover,
body.wf-design-modern .wf-control-buttons .btn-group .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Close button — danger variant */
div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger,
body.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger,
div.workflow.wf-design-modern .wf-control-buttons .btn-group .close_workflow,
body.wf-design-modern .wf-control-buttons .btn-group .close_workflow {
    color: var(--wf-danger);
    border-color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger:hover,
body.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger:hover,
div.workflow.wf-design-modern .wf-control-buttons .btn-group .close_workflow:hover,
body.wf-design-modern .wf-control-buttons .btn-group .close_workflow:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* Modernize execution control buttons (play, stop, reset) */
div.workflow.wf-design-modern .wf-execution-controls > .btn-group > .btn,
body.wf-design-modern .wf-execution-controls > .btn-group > .btn,
div.workflow.wf-design-modern .wf-execution-controls > .btn,
body.wf-design-modern .wf-execution-controls > .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    box-shadow: none;
    border-top-left-radius: var(--wf-r-sm)!important;
    border-bottom-left-radius: var(--wf-r-sm)!important;
}

div.workflow.wf-design-modern .wf-execution-controls .btn:hover,
body.wf-design-modern .wf-execution-controls .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Play button — green accent */
div.workflow.wf-design-modern .wf-execution-controls .wf-execute,
body.wf-design-modern .wf-execution-controls .wf-execute {
    color: var(--wf-success) !important;
    border-color: var(--wf-success);
}

div.workflow.wf-design-modern .wf-execution-controls .wf-execute:hover,
body.wf-design-modern .wf-execution-controls .wf-execute:hover {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Stop button — danger accent */
div.workflow.wf-design-modern .wf-execution-controls .wf-stop,
body.wf-design-modern .wf-execution-controls .wf-stop {
    color: var(--wf-danger) !important;
    border-color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-execution-controls .wf-stop:hover,
body.wf-design-modern .wf-execution-controls .wf-stop:hover {
    background: var(--wf-danger-bg) !important;
}

/* ---- Theme toggle ---- */
div.workflow.wf-design-modern .wf-theme-toggle,
body.wf-design-modern .wf-theme-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-theme-toggle:hover,
body.wf-design-modern .wf-theme-toggle:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Hide theme toggle in classic mode */
div.workflow .wf-theme-toggle {
    display: none;
}

/* ---- DW-2795: Design switch button ---- */
div.workflow.wf-design-modern .wf-switch-design,
body.wf-design-modern .wf-switch-design {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-switch-design:hover,
body.wf-design-modern .wf-switch-design:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Classic header: switch-to-modern button */
div.workflow .wf-switch-design {
    margin-left: 8px;
    font-size: 12px;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

div.workflow .wf-switch-design:hover {
    color: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
}

/* ---- Search type dropdown menu ---- */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-lg);
    min-width: 160px;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a {
    color: var(--wf-text-secondary);
    font-size: var(--wf-fs-sm);
    padding: 6px 12px;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a:hover,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li.active a,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li.active a {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ---- Bootstrap tooltip override for modern mode ---- */
div.workflow.wf-design-modern .tooltip .tooltip-inner,
body.wf-design-modern .tooltip .tooltip-inner {
    background: var(--wf-n-800, #1e293b);
    color: var(--wf-text-inverse, #fff);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--wf-r-sm);
    padding: 4px 8px;
    box-shadow: var(--wf-sh-md);
    max-width: 220px;
}

div.workflow.wf-design-modern .tooltip .tooltip-arrow,
body.wf-design-modern .tooltip .tooltip-arrow {
    display: none;
}

/* ---- Reset dropdown styling ---- */
div.workflow.wf-design-modern .reset_dd .dropdown-menu,
body.wf-design-modern .reset_dd .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-md);
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern .reset_dd .dd-footer,
body.wf-design-modern .reset_dd .dd-footer {
    border-color: var(--wf-border) !important;
}

/* ================================================================
   DW-2774 — Modern Status Bar (32px)
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* Hidden in classic mode */
.wf-modern-statusbar {
    display: none;
}

/* Shown in modern mode */
div.workflow.wf-design-modern .wf-modern-statusbar,
body.wf-design-modern .wf-modern-statusbar {
    height: var(--wf-statusbar-h, 32px);
    background: var(--wf-bg-statusbar);
    border-top: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    padding: 0 var(--wf-sp-4);
    gap: var(--wf-sp-4);
    font-size: var(--wf-fs-xs);
    color: var(--wf-text-muted);
    flex-shrink: 0;
    z-index: var(--wf-z-statusbar);
}

/* Graph info (node + edge counts) */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-graph-info,
body.wf-design-modern .wf-modern-statusbar .wf-status-graph-info {
    font-weight: 500;
    color: var(--wf-text-secondary);
}

/* Status indicator (dot + label) */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-indicator,
body.wf-design-modern .wf-modern-statusbar .wf-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-dot,
body.wf-design-modern .wf-modern-statusbar .wf-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    flex-shrink: 0;
}

/* Spacer */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-statusbar-spacer,
body.wf-design-modern .wf-modern-statusbar .wf-statusbar-spacer {
    flex: 1;
}

/* Zoom controls */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-controls,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-btn,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-btn:hover,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-percent,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-percent {
    font-size: var(--wf-fs-xs);
    font-weight: 500;
    min-width: 36px;
    text-align: center;
    color: var(--wf-text-secondary);
}

/* ================================================================
   BOTTOM TAB BAR / FOOTER
   Now that .wf-design-modern is on div.workflow, .wf-footer is a
   descendant and can use --wf-* tokens directly.
   ================================================================ */
div.workflow.wf-design-modern .wf-footer,
body.wf-design-modern .wf-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    min-height: 34px;
    display: flex;
    align-items: stretch;
    -webkit-font-smoothing: antialiased;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs,
body.wf-design-modern .wf-footer .nav-tabs {
    background: transparent;
    border: none;
    display: flex;
    align-items: stretch;
    margin: 0;
    gap: 0;
}
/* Footer heading label */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading,
body.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--wf-border);
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading > span,
body.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--wf-text-muted);
}
/* Footer tab items */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a,
body.wf-design-modern .wf-footer .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
    font-size: 12px !important;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    padding: 7px 16px !important;
    transition: var(--wf-t-fast);
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a > i,
body.wf-design-modern .wf-footer .nav-tabs > li > a > i {
    font-size: 12px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a:hover,
body.wf-design-modern .wf-footer .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary) !important;
    background: var(--wf-accent-light) !important;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.active > a,
body.wf-design-modern .wf-footer .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--wf-accent) !important;
}
/* Add workflow button */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf {
    padding: 0 8px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf > i,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf > i {
    font-size: 14px;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf:hover > i,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf:hover > i {
    color: var(--wf-accent);
}

/* Activities footer panel */
div.workflow.wf-design-modern .wf-tab-footer,
body.wf-design-modern .wf-tab-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern .wf-tab-footer .workflow-activities-header-right,
body.wf-design-modern .wf-tab-footer .workflow-activities-header-right {
    background: var(--wf-bg-surface);
}

div.workflow.wf-design-modern .wf-tab-footer .btn,
body.wf-design-modern .wf-tab-footer .btn {
    color: var(--wf-text-secondary) !important;
    background: transparent !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-sm) !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-tab-footer .btn:hover,
body.wf-design-modern .wf-tab-footer .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* ================================================================
   DW-2774 — Workflow Modern Theme: Design Tokens
   Scoped under .wf-design-modern — zero impact on classic mode.
   Pattern: d3viewdashboard-v2-01-tokens.css (--db-* → --wf-*)
   All values alias --d3v-* foundation tokens where possible.
   ================================================================ */

div.workflow.wf-design-modern,
body.wf-design-modern {

    /* ---- Neutral scale (alias to foundation) ---- */
    --wf-n-50:   var(--d3v-n-50,  #F8FAFC);
    --wf-n-100:  var(--d3v-n-100, #F1F5F9);
    --wf-n-200:  var(--d3v-n-200, #E2E8F0);
    --wf-n-300:  var(--d3v-n-300, #CBD5E1);
    --wf-n-400:  var(--d3v-n-400, #94A3B8);
    --wf-n-500:  var(--d3v-n-500, #64748B);
    --wf-n-600:  var(--d3v-n-600, #475569);
    --wf-n-700:  var(--d3v-n-700, #334155);
    --wf-n-800:  var(--d3v-n-800, #1E293B);
    --wf-n-900:  var(--d3v-n-900, #0F172A);

    /* ---- Surfaces / backgrounds ---- */
    --wf-bg-canvas:       var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-surface:      var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-elevated:     var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-sidebar:      var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-header:       var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-statusbar:    var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-overlay:      rgba(15, 23, 42, 0.40);
    --wf-bg-input:        #F1F5F9;
    --wf-bg-card:         #F8FAFC;
    --wf-bg-card-hover:   #F1F5F9;

    /* ---- Text ---- */
    --wf-text-primary:    var(--d3v-text-primary,   #1E293B);
    --wf-text-secondary:  var(--d3v-text-secondary,  #475569);
    --wf-text-muted:      var(--d3v-text-muted,      #94A3B8);
    --wf-text-disabled:   var(--d3v-n-300, #CBD5E1);
    --wf-text-inverse:    var(--d3v-text-inverse,    #FFFFFF);

    /* ---- Borders ---- */
    --wf-border:          var(--d3v-border,        #E2E8F0);
    --wf-border-strong:   var(--d3v-border-strong,  #CBD5E1);
    --wf-border-focus:    var(--d3v-accent,         #3B82F6);

    /* ---- Accent ---- */
    --wf-accent:          var(--d3v-accent,       #3B82F6);
    --wf-accent-hover:    var(--d3v-accent-hover, #2563EB);
    --wf-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --wf-success:         var(--d3v-success, #10B981);
    --wf-success-bg:      #D1FAE5;
    --wf-success-text:    #065F46;
    --wf-warning:         var(--d3v-warning, #F59E0B);
    --wf-warning-bg:      #FEF3C7;
    --wf-warning-text:    #92400E;
    --wf-danger:          var(--d3v-danger, #EF4444);
    --wf-danger-bg:       #FEE2E2;
    --wf-danger-text:     #991B1B;
    --wf-info:            var(--d3v-info, #3B82F6);

    /* ---- Node type palette (canvas-level, fixed across themes) ---- */
    --wf-node-coral:      #EF4444;
    --wf-node-blue:       #3B82F6;
    --wf-node-teal:       #14B8A6;
    --wf-node-gold:       #F59E0B;
    --wf-node-purple:     #8B5CF6;
    --wf-node-green:      #10B981;
    --wf-node-pink:       #EC4899;
    --wf-node-gray:       #94A3B8;
    --wf-node-orange:     #F97316;
    --wf-node-indigo:     #6366F1;

    /* ---- Shadows (alias to foundation) ---- */
    --wf-sh-xs:  var(--d3v-sh-xs,  0 1px 2px rgba(0,0,0,0.05));
    --wf-sh-sm:  var(--d3v-sh-sm,  0 1px 3px rgba(0,0,0,0.08));
    --wf-sh-md:  var(--d3v-sh-md,  0 4px 12px rgba(0,0,0,0.10));
    --wf-sh-lg:  var(--d3v-sh-lg,  0 10px 25px rgba(0,0,0,0.12));
    --wf-sh-xl:  var(--d3v-sh-xl,  0 20px 40px rgba(0,0,0,0.15));

    /* ---- Border radii (alias to foundation) ---- */
    --wf-r-sm:   var(--d3v-r-sm,   4px);
    --wf-r-md:   var(--d3v-r-md,   8px);
    --wf-r-lg:   var(--d3v-r-lg,   12px);
    --wf-r-xl:   var(--d3v-r-xl,   16px);
    --wf-r-2xl:  var(--d3v-r-2xl,  24px);
    --wf-r-full: var(--d3v-r-full, 9999px);

    /* ---- Transitions (alias to foundation) ---- */
    --wf-t-fast:   var(--d3v-t-fast,   all 0.12s ease);
    --wf-t-base:   var(--d3v-t-base,   all 0.20s ease);
    --wf-t-smooth: var(--d3v-t-smooth, all 0.30s cubic-bezier(0.4, 0, 0.2, 1));

    /* ---- Gradients ---- */
    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: var(--d3v-grad-accent, linear-gradient(135deg, #3B82F6 0%, #6366F1 100%));

    /* ---- Layout dimensions ---- */
    --wf-sidebar-w:    48px;
    --wf-sidebar-min:  48px;
    --wf-sidebar-max:  240px;
    /* R0-3335 - --wf-header-h removed (duplicate of the modern token block); owned by the single
       shared rule div.workflow .wf-main-container. */
    --wf-statusbar-h:  32px;

    /* ---- Z-index scale ---- */
    --wf-z-statusbar:  5;
    --wf-z-sidebar:    10;
    --wf-z-header:     20;
    --wf-z-overlay:    50;
    --wf-z-tooltip:    100;
    --wf-z-modal:      1050;

    /* ---- Spacing (4px grid) ---- */
    --wf-sp-1:   4px;
    --wf-sp-2:   8px;
    --wf-sp-3:   12px;
    --wf-sp-4:   16px;
    --wf-sp-5:   20px;
    --wf-sp-6:   24px;
    --wf-sp-8:   32px;
    --wf-sp-10:  40px;
    --wf-sp-12:  48px;

    /* ---- Typography ---- */
    --wf-fs-xs:    11px;
    --wf-fs-sm:    12px;
    --wf-fs-base:  13px;
    --wf-fs-md:    14px;
    --wf-fs-lg:    16px;
    --wf-fs-xl:    18px;
}


/* ================================================================
   DARK MODE OVERRIDES
   Applied when .wf-dark is toggled alongside .wf-design-modern.
   Only override what changes — node palette, radii, transitions,
   spacing, z-index, and typography stay the same.
   ================================================================ */

div.workflow.wf-design-modern.wf-dark,
body.wf-design-modern.wf-dark {

    /* ---- Surfaces ---- */
    --wf-bg-canvas:       #1a1a2e;
    --wf-bg-surface:      #16213e;
    --wf-bg-elevated:     #1a2744;
    --wf-bg-sidebar:      #0f1629;
    --wf-bg-header:       rgba(15, 22, 41, 0.95);
    --wf-bg-statusbar:    #0f1629;
    --wf-bg-overlay:      rgba(0, 0, 0, 0.60);
    --wf-bg-input:        #0f1629;
    --wf-bg-card:         #1a2744;
    --wf-bg-card-hover:   #1f3050;

    /* ---- Text ---- */
    --wf-text-primary:    #E2E8F0;
    --wf-text-secondary:  #94A3B8;
    --wf-text-muted:      #64748B;
    --wf-text-disabled:   #475569;
    --wf-text-inverse:    #0F172A;

    /* ---- Borders ---- */
    --wf-border:          rgba(148, 163, 184, 0.15);
    --wf-border-strong:   rgba(148, 163, 184, 0.25);
    --wf-border-focus:    #60A5FA;

    /* ---- Accent (slightly brighter for dark bg) ---- */
    --wf-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status backgrounds (darkened) ---- */
    --wf-success-bg:      rgba(16, 185, 129, 0.15);
    --wf-success-text:    #6EE7B7;
    --wf-warning-bg:      rgba(245, 158, 11, 0.15);
    --wf-warning-text:    #FCD34D;
    --wf-danger-bg:       rgba(239, 68, 68, 0.15);
    --wf-danger-text:     #FCA5A5;

    /* ---- Shadows (deeper for dark surfaces) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);

    /* ---- Node palette (slightly adjusted gray for dark bg) ---- */
    --wf-node-gray: #94A3B8;
}

/* Force dark bg on all major containers */
div.workflow.wf-design-modern.wf-dark .d3view-wf-header,
body.wf-design-modern.wf-dark .d3view-wf-header {
    background: var(--wf-bg-header) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu,
body.wf-design-modern.wf-dark .wf-nav-menu {
    background: var(--wf-bg-sidebar) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar,
body.wf-design-modern.wf-dark .wf-modern-statusbar {
    background: var(--wf-bg-statusbar) !important;
}

div.workflow.wf-design-modern.wf-dark .full-view,
body.wf-design-modern.wf-dark .full-view {
    background: var(--wf-bg-canvas) !important;
}

div.workflow.wf-design-modern.wf-dark .chart-view::before,
body.wf-design-modern.wf-dark .chart-view::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}

/* Dark mode text overrides */
div.workflow.wf-design-modern.wf-dark .wf-name-container .wf-name,
body.wf-design-modern.wf-dark .wf-name-container .wf-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-dropdowns .dropdown > a,
div.workflow.wf-design-modern.wf-dark .wf-dropdowns .pl-dropdown > a,
body.wf-design-modern.wf-dark .wf-dropdowns .dropdown > a,
body.wf-design-modern.wf-dark .wf-dropdowns .pl-dropdown > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-start-status,
body.wf-design-modern.wf-dark .wf-start-status {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* Dark right toolbars */
div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions,
div.workflow.wf-design-modern.wf-dark .full-view .zoom,
body.wf-design-modern.wf-dark .full-view .wf-top-actions,
body.wf-design-modern.wf-dark .full-view .zoom {
    background: var(--wf-bg-sidebar) !important;
    border-color: var(--wf-border) !important;
}

/* Dark footer */
div.workflow.wf-design-modern.wf-dark .wf-tab-footer,
body.wf-design-modern.wf-dark .wf-tab-footer {
    background: var(--wf-bg-statusbar) !important;
}


/* ================================================================
   BODY-LEVEL MODERN TOKENS (LIGHT)
   Re-declare --wf-* light values on body.wf-design-modern
   so modals/sidebars appended to <body> get modern design.
   ================================================================ */

body.wf-design-modern {

    /* ---- Neutral scale ---- */
    --wf-n-50:   #F8FAFC;
    --wf-n-100:  #F1F5F9;
    --wf-n-200:  #E2E8F0;
    --wf-n-300:  #CBD5E1;
    --wf-n-400:  #94A3B8;
    --wf-n-500:  #64748B;
    --wf-n-600:  #475569;
    --wf-n-700:  #334155;
    --wf-n-800:  #1E293B;
    --wf-n-900:  #0F172A;

    /* ---- Surfaces (light) ---- */
    --wf-bg-canvas:       #F8FAFC;
    --wf-bg-surface:      #FFFFFF;
    --wf-bg-elevated:     #FFFFFF;
    --wf-bg-sidebar:      #FFFFFF;
    --wf-bg-header:       #FFFFFF;
    --wf-bg-statusbar:    #F8FAFC;
    --wf-bg-overlay:      rgba(15, 23, 42, 0.40);
    --wf-bg-input:        #F1F5F9;
    --wf-bg-card:         #F8FAFC;
    --wf-bg-card-hover:   #F1F5F9;

    /* ---- Text (light) ---- */
    --wf-text-primary:    #1E293B;
    --wf-text-secondary:  #475569;
    --wf-text-muted:      #94A3B8;
    --wf-text-disabled:   #CBD5E1;
    --wf-text-inverse:    #FFFFFF;

    /* ---- Borders (light) ---- */
    --wf-border:          #E2E8F0;
    --wf-border-strong:   #CBD5E1;
    --wf-border-focus:    #3B82F6;

    /* ---- Accent ---- */
    --wf-accent:          #3B82F6;
    --wf-accent-hover:    #2563EB;
    --wf-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --wf-success:         #10B981;
    --wf-success-bg:      #D1FAE5;
    --wf-success-text:    #065F46;
    --wf-warning:         #F59E0B;
    --wf-warning-bg:      #FEF3C7;
    --wf-warning-text:    #92400E;
    --wf-danger:          #EF4444;
    --wf-danger-bg:       #FEE2E2;
    --wf-danger-text:     #991B1B;

    /* ---- Shadows (light) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.12);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.15);

    /* ---- Radii ---- */
    --wf-r-sm:   4px;
    --wf-r-md:   8px;
    --wf-r-lg:   12px;
    --wf-r-xl:   16px;
    --wf-r-2xl:  24px;
    --wf-r-full: 9999px;

    /* ---- Transitions ---- */
    --wf-t-fast:   all 0.12s ease;
    --wf-t-base:   all 0.20s ease;
    --wf-t-smooth: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Gradients ---- */
    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
}


/* ================================================================
   BODY-LEVEL DARK TOKEN OVERRIDES
   Override light values with dark when body.wf-design-modern.wf-dark.
   ================================================================ */

body.wf-design-modern.wf-dark {

    /* ---- Surfaces (dark overrides) ---- */
    --wf-bg-canvas:       #1a1a2e;
    --wf-bg-surface:      #16213e;
    --wf-bg-elevated:     #1a2744;
    --wf-bg-sidebar:      #0f1629;
    --wf-bg-header:       rgba(15, 22, 41, 0.95);
    --wf-bg-statusbar:    #0f1629;
    --wf-bg-overlay:      rgba(0, 0, 0, 0.60);
    --wf-bg-input:        #0f1629;
    --wf-bg-card:         #1a2744;
    --wf-bg-card-hover:   #1f3050;

    /* ---- Text (dark overrides) ---- */
    --wf-text-primary:    #E2E8F0;
    --wf-text-secondary:  #94A3B8;
    --wf-text-muted:      #64748B;
    --wf-text-disabled:   #475569;
    --wf-text-inverse:    #0F172A;

    /* ---- Borders (dark overrides) ---- */
    --wf-border:          rgba(148, 163, 184, 0.15);
    --wf-border-strong:   rgba(148, 163, 184, 0.25);
    --wf-border-focus:    #60A5FA;

    /* ---- Accent (dark overrides) ---- */
    --wf-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status (dark overrides) ---- */
    --wf-success-bg:      rgba(16, 185, 129, 0.15);
    --wf-success-text:    #6EE7B7;
    --wf-warning-bg:      rgba(245, 158, 11, 0.15);
    --wf-warning-text:    #FCD34D;
    --wf-danger-bg:       rgba(239, 68, 68, 0.15);
    --wf-danger-text:     #FCA5A5;

    /* ---- Shadows (dark, deeper) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);
}


/*
 * CSS for template: workflow-builder-tpl.tpl
 * Source: javascripts/templates/modular/builder/main/workflow-builder-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow[data-view="mini"] .wf-main-container {
display: none;
}

div.workflow[data-view="mini"] .wf-main-container {
display: none;
}

div.workflow div.workflow-index-container.hasFooter div.wf-main-container div#birds-eye-view {
bottom: 40px;
}

div.workflow div.workflow-index-container.hasFooter div.wf-main-container .zoom {
bottom: 30px;
}

div.workflow .wf-footer ul.nav-tabs .footer-tabs-heading {
padding: 0 15px;
    background: #4f5359;
    background: #003471 -webkit-gradient(linear, left top, left bottom, color-stop(.49, rgba(255, 255, 255, .2)), color-stop(.5, rgba(255, 255, 255, .1)), color-stop(1, rgba(255, 255, 255, .1)));
    color: #FFF;
    height: 40px;
    display: flex;
    align-items: center;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item {
margin-bottom: -5px;
    height: 40px;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item:hover>a {
background-color: #f5f5f5;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item>a {
display: inline-block;
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 25px;
    font-weight: 400;
    border-bottom: 3px solid transparent;
    color: #333;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item.active a {
border-bottom: 3px solid #428bca;
    font-weight: bold;
    border-top-color: transparent;
    color: #428bca;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item:not(.active) a:hover {
background-color: #FFF;
    color: #555;
}

div.workflow .wf-footer ul.nav-tabs .add_wf {
color: grey;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
}

div.workflow .wf-footer ul.nav-tabs .add_wf:hover {
color: #428bca;
}

div.workflow .wf-main-container .wf-io-container .inputs-builder-container {
padding: 0;
}

div.workflow .wf-main-container .wf-io-container #wf-io-left .panel-body.hasInfo .inputs-container {
height: calc(100% - 30px);
}

div.workflow div.workflow-index[data-view="basic"] .wf-footer {
display: none;
}

/* div.workflow .wf-main-container[data-header-view="ribbon"] .d3view-wf-header {
height: 100px !important;
} */

div.workflow .wf-main-container[data-header-view="ribbon"] .wf-nav-menu {
top: 100px;
    height: calc(100% - 140px) !important;
}


div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-header-right {
padding: 0 20px !important;
}

div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-header-right.controls {
/* padding-top: 10px!important; */
    position: relative;
    bottom: -10px;
}

div.workflow[data-view="mini"] .wf-main-container {
display: none;
}

div.workflow div.workflow-index-container.hasFooter div.wf-main-container div#birds-eye-view {
bottom: 40px;
}

div.workflow .wf-footer ul.nav-tabs .footer-tabs-heading {
padding: 0 15px;
    background: #4f5359;
    background: #003471 -webkit-gradient(linear, left top, left bottom, color-stop(.49, rgba(255, 255, 255, .2)), color-stop(.5, rgba(255, 255, 255, .1)), color-stop(1, rgba(255, 255, 255, .1)));
    color: #FFF;
    height: 40px;
    display: flex;
    align-items: center;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item {
margin-bottom: -5px;
    height: 40px;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item:hover>a {
background-color: #f5f5f5;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item>a {
display: inline-block;
    max-width: 300px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 25px;
    font-weight: 400;
    border-bottom: 3px solid transparent;
    color: #333;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item.active a {
border-bottom: 3px solid #428bca;
    font-weight: bold;
    border-top-color: transparent;
    color: #428bca;
}

div.workflow .wf-footer ul.nav-tabs li.nav-item:not(.active) a:hover {
background-color: #FFF;
    color: #555;
}

div.workflow .wf-footer ul.nav-tabs .add_wf {
color: grey;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 1.2em;
}

div.workflow .wf-footer ul.nav-tabs .add_wf:hover {
color: #428bca;
}

div.workflow .wf-main-container .wf-io-container .inputs-builder-container {
padding: 0;
}

div.workflow .wf-main-container .wf-io-container #wf-io-left .panel-body.hasInfo .inputs-container {
height: calc(100% - 30px);
}

div.workflow div.workflow-index[data-view="basic"] .wf-footer {
display: none;
}

div.workflow .workflow-index-container.has-guide-open .wf-footer {
display: none;
}

div.workflow div.workflow-index-container.hasFooter .wf-main-container {
height: calc(100% - 40px);
}

div.workflow .workflow-index-container.hasFooter .wf-main-container[data-view="agentic"] {
height: calc(100% - 40px);
}


/* ================================================================
   DW-2774 — Modern Sidebar (pl-tabs-vertical pattern)
   Targets modern template classes in .wf-modern-left-nav-menu-tpl.
   48px collapsed (icon-only), drag-to-resize up to 240px.
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- Full-view becomes flex row so sidebar + content sit side-by-side ---- */
div.workflow.wf-design-modern .full-view,
body.wf-design-modern .full-view {
    display: flex !important;
    flex-direction: row !important;
}

/* ---- Sidebar container — no longer absolute, participates in flex ---- */
div.workflow.wf-design-modern .wf-nav-menu,
body.wf-design-modern .wf-nav-menu {
    position: relative !important;
    width: var(--wf-sidebar-w) !important;
    min-width: 48px !important;
    max-width: 240px !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
    background: var(--wf-bg-sidebar) !important;
    border-right: 1px solid var(--wf-border) !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: var(--wf-z-sidebar) !important;
    transition: width 0.15s ease;
    flex-shrink: 0 !important;
    -webkit-font-smoothing: antialiased;
}

/* ---- Tab content fills remaining space ---- */
div.workflow.wf-design-modern .full-view > .tab-content,
body.wf-design-modern .full-view > .tab-content,
div.workflow.wf-design-modern .full-view > .wf-tabs,
body.wf-design-modern .full-view > .wf-tabs,
body.wf-design-modern .full-view > .wf-data-view {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
}

/* ---- Other siblings inside full-view need proper stacking ---- */
div.workflow.wf-design-modern .full-view > .wf-view-toggle,
body.wf-design-modern .full-view > .wf-view-toggle {
    left: calc(var(--wf-sidebar-w, 48px) + 12px) !important;
}

/* ---- Nav menu groups — vertical flex ---- */
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
body.wf-design-modern .wf-nav-menu .wf-nav-menu-groups {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: var(--wf-sp-1) 0 !important;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical {
    list-style: none !important;
    padding: var(--wf-sp-1) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Bottom section pushed to bottom */
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-bottom,
body.wf-design-modern .wf-nav-menu .wf-sidebar-bottom {
    margin-top: auto;
    padding: var(--wf-sp-2) 0;
    border-top: 1px solid var(--wf-border);
}

/* ---- Sidebar items ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li {
    position: relative !important;
    overflow: visible !important;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 3px;
    color: var(--wf-text-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.12s ease;
    border-left: 3px solid transparent;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a > i,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a > i {
    font-size: 16px !important;
    color: inherit !important;
}

/* Override classic list-group-item padding and borders */
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id],
body.wf-design-modern .wf-nav-menu-groups li[data-id],
div.workflow.wf-design-modern .wf-nav-menu .list-group-item,
body.wf-design-modern .wf-nav-menu .list-group-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id]:hover,
body.wf-design-modern .wf-nav-menu-groups li[data-id]:hover,
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id].open,
body.wf-design-modern .wf-nav-menu-groups li[data-id].open {
    background: transparent !important;
}

/* Also style list-group-item anchors (classic nav items) */
div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a,
body.wf-design-modern .wf-nav-menu .list-group-item > a,
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id] > a,
body.wf-design-modern .wf-nav-menu-groups li[data-id] > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 3px !important;
    color: var(--wf-text-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.12s ease;
    border-left: 3px solid transparent;
    background: transparent !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a > i,
body.wf-design-modern .wf-nav-menu .list-group-item > a > i {
    font-size: 16px !important;
    color: inherit !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a:hover,
body.wf-design-modern .wf-nav-menu .list-group-item > a:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item.active > a,
body.wf-design-modern .wf-nav-menu .list-group-item.active > a {
    border-left-color: var(--wf-accent) !important;
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--wf-accent) !important;
}

/* ---- Labels — shown as small uppercase text below icon ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu .pl-tab-item-label {
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.12s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: inherit;
}

/* Force hide ALL labels in collapsed modern sidebar */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .nav-menu-item-label,
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tab-item-label {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Override classic data-show-labels="true" in collapsed state */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .wf-nav-menu-groups[data-show-labels="true"] .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .wf-nav-menu-groups[data-show-labels="true"] .nav-menu-item-label {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ---- Hover state ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a:hover,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a:hover {
    background: rgba(59, 130, 246, 0.08);
    color: var(--wf-text-secondary) !important;
}

/* ---- Active state — left accent border ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.active > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.active > a,
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a {
    border-left-color: var(--wf-accent);
    background: rgba(59, 130, 246, 0.12);
    color: var(--wf-accent) !important;
}

/* ---- Tooltip on hover (collapsed mode) ---- */
/* Hidden by default — fully suppress pseudo-element to prevent height/layout bleed */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]::after,
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li.list-group-item::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li.list-group-item::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    display: block !important;
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box;
    background-color: #1e293b !important;
    color: #fff !important;
    padding: 5px 12px !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    line-height: 1.4 !important;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    pointer-events: none;
    overflow: visible !important;
}

/* Tooltip arrow (pointing left toward the nav item) */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: calc(100% + 2px) !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border: 6px solid transparent !important;
    border-right-color: #1e293b !important;
    border-left: none !important;
    z-index: 9999;
    pointer-events: none;
}

/* Dark mode tooltip — lighter bg so it contrasts with dark sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after,
body.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after {
    background-color: #334155 !important;
    color: #F1F5F9 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before,
body.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before {
    border-right-color: #334155 !important;
}

/* Ensure sidebar overflow doesn't clip tooltips */
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
body.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-bottom,
body.wf-design-modern .wf-nav-menu .wf-sidebar-bottom {
    overflow: visible !important;
}

/* ---- Expanded state (.is-expanded via JS resize) ---- */
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a,
body.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 14px !important;
    gap: 10px !important;
    border-left: 3px solid transparent;
}

div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a > i,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a > i,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a > i,
body.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a > i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tab-item-label,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu.is-expanded .nav-menu-item-label {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    overflow: visible !important;
    white-space: nowrap;
    color: inherit;
    line-height: 1;
}

/* Hide tooltips when expanded */
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li::after,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li::after {
    display: none !important;
}

/* ---- Resize handle (included in modern template) ---- */
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: var(--wf-border);
    z-index: 20;
    transition: background 0.12s ease;
}

div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle:hover,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle:hover,
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle.is-dragging,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle.is-dragging {
    background: var(--wf-accent);
}

/* ---- Sidebar content wrapper (Shapes/Workers/Viz panels) ---- */
/* Override classic left: 75px to track modern sidebar width via CSS var */
div.workflow.wf-design-modern .wf-nav-menu-wrapper,
body.wf-design-modern .wf-nav-menu-wrapper {
    left: var(--wf-sidebar-w, 48px) !important;
    background: var(--wf-bg-surface) !important;
    border-right: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-md) !important;
}

/* All elements with hardcoded left: 75px must track sidebar width in modern mode */
div.workflow.wf-design-modern .wf-main-container .wf-top-alert,
body.wf-design-modern .wf-main-container .wf-top-alert,
div.workflow.wf-design-modern .wf-main-container #birds-eye-view,
body.wf-design-modern .wf-main-container #birds-eye-view,
div.workflow.wf-design-modern .enableFMView .fm-view,
body.wf-design-modern .enableFMView .fm-view,
div.workflow.wf-design-modern .workflow-toc-toggle-btn,
body.wf-design-modern .workflow-toc-toggle-btn {
    left: var(--wf-sidebar-w, 48px) !important;
}

div.workflow.wf-design-modern .wf-main-container .wf-top-alert,
body.wf-design-modern .wf-main-container .wf-top-alert,
div.workflow.wf-design-modern .enableFMView .fm-view,
body.wf-design-modern .enableFMView .fm-view {
    width: calc(100% - var(--wf-sidebar-w, 48px)) !important;
}

/* ---- Preserve .hidden ---- */
div.workflow.wf-design-modern .wf-nav-menu .list-group-item.hidden,
body.wf-design-modern .wf-nav-menu .list-group-item.hidden,
div.workflow.wf-design-modern .wf-nav-menu li.hidden,
body.wf-design-modern .wf-nav-menu li.hidden {
    display: none !important;
}

/* ---- Hide classic toggle chevron + nav dots ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-toggle-sidebar,
body.wf-design-modern .wf-nav-menu .pl-toggle-sidebar,
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-toggle,
body.wf-design-modern .wf-nav-menu .wf-nav-toggle {
    display: none !important;
}

/* Also hide the toggle when it appears inside the wrapper */
div.workflow.wf-design-modern .wf-nav-menu-wrapper .pl-toggle-sidebar,
body.wf-design-modern .wf-nav-menu-wrapper .pl-toggle-sidebar {
    display: none !important;
}

/* ---- Hide decision-validation-label overlays on canvas that bleed into nav area ---- */
div.workflow.wf-design-modern .wf-decision-validation-label,
body.wf-design-modern .wf-decision-validation-label {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    border-radius: var(--wf-r-sm) !important;
}

/* ---- Override classic nav-menu height that clips sidebar ---- */
div.workflow.wf-design-modern .wf-nav-menu,
body.wf-design-modern .wf-nav-menu {
    height: 100% !important;
}

/* ---- Absolutely-positioned children inside full-view must account for sidebar ---- */
div.workflow.wf-design-modern .full-view > .wf-nav-menu-wrapper,
body.wf-design-modern .full-view > .wf-nav-menu-wrapper,
div.workflow.wf-design-modern .full-view > #birds-eye-view,
body.wf-design-modern .full-view > #birds-eye-view,
div.workflow.wf-design-modern .full-view > .wf-modal-backdrop,
body.wf-design-modern .full-view > .wf-modal-backdrop,
div.workflow.wf-design-modern .full-view > .wf-timeline-view,
body.wf-design-modern .full-view > .wf-timeline-view,
div.workflow.wf-design-modern .full-view > .wf-data-view,
body.wf-design-modern .full-view > .wf-data-view,
div.workflow.wf-design-modern .full-view > .wf-ancestry-view,
body.wf-design-modern .full-view > .wf-ancestry-view,
div.workflow.wf-design-modern .full-view > .error-details-container,
body.wf-design-modern .full-view > .error-details-container,
div.workflow.wf-design-modern .full-view > .wf-dropzone,
body.wf-design-modern .full-view > .wf-dropzone,
div.workflow.wf-design-modern .full-view > .d3view-side-modal,
body.wf-design-modern .full-view > .d3view-side-modal,
div.workflow.wf-design-modern .full-view > #workflow-logs-container,
body.wf-design-modern .full-view > #workflow-logs-container {
    /* These remain absolutely positioned but already sit after sidebar in flex flow */
}



/*
 * CSS for template: wf-nav-menu-content-tpl.tpl
 * Source: javascripts/templates/modular/builder/navigation/wf-nav-menu-content-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-nav-menu .nav-menu,
div.workflow .wf-nav-menu .nav-submenu {
padding-bottom: 15px;
    color: #FFF;
    border-top: 1px solid #CCC;
}

div.workflow .wf-nav-menu .nav-menu .list-header {
margin: 10px 0;
    padding: 0 15px;
    letter-spacing: 0.1em;
    pointer-events: none;
}

div.workflow .wf-nav-menu .nav-menu,
div.workflow .wf-nav-menu .nav-submenu {
padding-bottom: 15px;
    color: #FFF;
    border-top: 1px solid #CCC;
}

div.workflow .wf-nav-menu .nav-menu .list-header {
margin: 10px 0;
    padding: 0 15px;
    letter-spacing: 0.1em;
    pointer-events: none;
}

div.workflow .wf-nav-menu .nav-menu,
div.workflow .wf-nav-menu .nav-submenu {
padding-bottom: 15px;
    color: #FFF;
    border-top: 1px solid #CCC;
}

div.workflow .wf-nav-menu .nav-menu .list-header {
margin: 10px 0;
    padding: 0 15px;
    letter-spacing: 0.1em;
    pointer-events: none;
}



/* ================================================================
   MODERN DESIGN — Nav menu content
   ================================================================ */

div.workflow.wf-design-modern .wf-nav-menu .nav-menu,
div.workflow.wf-design-modern .wf-nav-menu .nav-submenu {
    color: var(--wf-text-primary) !important;
    border-top-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern .wf-nav-menu .nav-menu .list-header {
    color: var(--wf-text-muted);
    font-size: var(--wf-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
}

/* ================================================================
   MODERN DESIGN — Viewers panel
   ================================================================ */

div.workflow.wf-design-modern .viewers-container {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .viewers-container:hover {
    border-color: var(--wf-border-strong);
    box-shadow: var(--wf-sh-sm);
}

div.workflow.wf-design-modern .viewers-container > label {
    font-size: var(--wf-fs-md);
    font-weight: 600;
    color: var(--wf-text-primary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

div.workflow.wf-design-modern .viewers-container > label > i {
    color: var(--wf-accent);
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wf-accent-light);
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern .viewers-container > .view_all {
    font-size: var(--wf-fs-sm);
    font-weight: 500;
    color: var(--wf-accent);
    text-decoration: none;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .viewers-container > .view_all:hover {
    color: var(--wf-accent-hover);
}

div.workflow.wf-design-modern .viewers-container > .view_all.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .viewers-container ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    min-height: auto;
}

div.workflow.wf-design-modern .viewers-container ul > li {
    padding: 6px 10px;
    border-radius: var(--wf-r-sm);
    font-size: var(--wf-fs-base);
    color: var(--wf-text-secondary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .viewers-container ul > li:not(.no-data):hover {
    background: var(--wf-bg-card-hover);
}

div.workflow.wf-design-modern .viewers-container ul > li a {
    color: var(--wf-text-primary);
    font-weight: 500;
    text-decoration: none;
}

div.workflow.wf-design-modern .viewers-container ul > li a:hover {
    color: var(--wf-accent);
}

div.workflow.wf-design-modern .viewers-container ul > li.no-data {
    color: var(--wf-text-muted);
    font-size: var(--wf-fs-sm);
    font-style: italic;
    padding: 8px 0 0 0;
}

/* ================================================================
   MODERN DESIGN — Logs panel
   ================================================================ */

/* Logs table */
div.workflow.wf-design-modern .wf-logs > table {
    border: none !important;
    border-collapse: separate;
    border-spacing: 0;
}

div.workflow.wf-design-modern .wf-logs > table > thead > tr > th {
    background: var(--wf-bg-card) !important;
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em;
    padding: 10px 14px !important;
    border: none !important;
    border-bottom: 2px solid var(--wf-border) !important;
}

div.workflow.wf-design-modern .wf-logs > table > thead > tr > th:first-child {
    border-radius: var(--wf-r-md) 0 0 0;
}

div.workflow.wf-design-modern .wf-logs > table > thead > tr > th:last-child {
    border-radius: 0 var(--wf-r-md) 0 0;
}

div.workflow.wf-design-modern .wf-logs > table > tbody > tr {
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-logs > table > tbody > tr:hover {
    background: var(--wf-bg-card-hover) !important;
}

div.workflow.wf-design-modern .wf-logs > table > tbody > tr > td,
div.workflow.wf-design-modern .wf-logs > table > tbody > tr > th {
    border: none !important;
    border-bottom: 1px solid var(--wf-border) !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    font-size: var(--wf-fs-base) !important;
    color: var(--wf-text-primary) !important;
}

/* Timestamp styling */
div.workflow.wf-design-modern .wf-logs .wf-log-item span.timestamp {
    font-weight: 600 !important;
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    font-variant-numeric: tabular-nums;
}

/* Log type label badges */
div.workflow.wf-design-modern .wf-logs .wf-log-item .label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 4px 10px !important;
    border-radius: var(--wf-r-full) !important;
    display: inline-block !important;
    width: auto !important;
    text-transform: uppercase;
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .label-error,
div.workflow.wf-design-modern .wf-logs .wf-log-item .label-danger {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .label-warning {
    background: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .label-success {
    background: var(--wf-success-bg) !important;
    color: var(--wf-success-text) !important;
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .label-info {
    background: rgba(59, 130, 246, 0.10) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .label-default {
    background: var(--wf-bg-card) !important;
    color: var(--wf-text-secondary) !important;
}

/* Node link styling inside log messages */
div.workflow.wf-design-modern .wf-logs .wf-log-item .node-link,
div.workflow.wf-design-modern .wf-logs .wf-log-item .node-ip-link,
div.workflow.wf-design-modern .wf-logs .wf-log-item .node-op-link {
    color: var(--wf-accent) !important;
    font-size: var(--wf-fs-sm) !important;
    font-weight: 500;
    text-decoration: none;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-logs .wf-log-item .node-link:hover,
div.workflow.wf-design-modern .wf-logs .wf-log-item .node-ip-link:hover,
div.workflow.wf-design-modern .wf-logs .wf-log-item .node-op-link:hover {
    color: var(--wf-accent-hover) !important;
    text-decoration: underline;
}

/* Nested start-worker-inputs table */
div.workflow.wf-design-modern .wf-logs .start-worker-inputs table {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-sm) !important;
    overflow: hidden;
}

div.workflow.wf-design-modern .wf-logs .start-worker-inputs table th,
div.workflow.wf-design-modern .wf-logs .start-worker-inputs table td {
    border-color: var(--wf-border) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 10px !important;
}

/* Empty state */
div.workflow.wf-design-modern .wf-logs tbody.no-data:after {
    color: var(--wf-text-muted) !important;
    font-size: var(--wf-fs-base) !important;
    font-style: italic;
    padding: 32px 16px !important;
}

/* Logs header controls */
div.workflow.wf-design-modern .wf-nav-tab-header .log-search {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) 0 0 var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-sm) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-header .log-search:focus {
    border-color: var(--wf-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern .wf-nav-tab-header .log-search + .clear-log-search {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .wf-nav-tab-header .input-group-addon {
    background: var(--wf-bg-card) !important;
    border: 1px solid var(--wf-border) !important;
    border-left: none !important;
    border-radius: 0 var(--wf-r-md) var(--wf-r-md) 0 !important;
    color: var(--wf-text-muted) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-header .input-group-addon:hover {
    color: var(--wf-accent) !important;
    background: var(--wf-accent-light) !important;
}

/* Log level dropdown */
div.workflow.wf-design-modern .log-levels-list {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 4px !important;
}

div.workflow.wf-design-modern .log-levels-list .log-level-item {
    border-radius: var(--wf-r-sm);
    padding: 4px 8px;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .log-levels-list .log-level-item:hover {
    background: var(--wf-bg-card-hover);
}

/* Reset button modern danger style */
div.workflow.wf-design-modern .wf-nav-tab-header .reset_logs {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
    border: 1px solid transparent !important;
    border-radius: var(--wf-r-md) !important;
    font-weight: 500;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-header .reset_logs:hover {
    background: var(--wf-danger) !important;
    color: var(--wf-text-inverse) !important;
}

/* Download, Enlarge, Reset — btn-group in logs header */
div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .btn {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .btn:first-child {
    border-radius: var(--wf-r-md) 0 0 var(--wf-r-md) !important;
}

div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .btn:last-child {
    border-radius: 0 var(--wf-r-md) var(--wf-r-md) 0 !important;
}

div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .btn:not(:first-child) {
    border-left: none !important;
}

div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Reset keeps its danger styling in the group */
div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .reset_logs {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern .wf-nav-tab-header .btn-group .reset_logs:hover {
    background: var(--wf-danger) !important;
    color: var(--wf-text-inverse) !important;
    border-color: var(--wf-danger) !important;
}

/* Standalone enlarge button (outside btn-group, e.g. in Settings/Docs) */
div.workflow.wf-design-modern .wf-nav-tab-header .enlarge_container:not(.btn-group .enlarge_container) {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    color: var(--wf-text-secondary) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-nav-tab-header .enlarge_container:not(.btn-group .enlarge_container):hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* ================================================================
   MODERN DESIGN — Settings (FormBuilder) panel
   Scoped under workflow modern to avoid affecting other plugins.
   ================================================================ */

/* ---- Header bar: View dropdown, Search, All Inputs badge ---- */
div.workflow.wf-design-modern .wf-settings-tree .fb-main-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--wf-border);
    margin-bottom: 0;
}

div.workflow.wf-design-modern .wf-settings-tree .fb-main-header .btn {
    border-radius: var(--wf-r-md) !important;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-secondary) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree .fb-main-header .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Search input */
div.workflow.wf-design-modern .wf-settings-tree .fb-search-dd input.search_by_name,
div.workflow.wf-design-modern .wf-settings-tree .fb-ai-search-input {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-full) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 4px 12px 4px 28px !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree .fb-search-dd input.search_by_name:focus,
div.workflow.wf-design-modern .wf-settings-tree .fb-ai-search-input:focus {
    border-color: var(--wf-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: var(--wf-bg-surface) !important;
}

/* All Inputs badge */
div.workflow.wf-design-modern .wf-settings-tree .all-inputs-cnt {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
    border-radius: var(--wf-r-full) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
}

div.workflow.wf-design-modern .wf-settings-tree .inputs-count {
    color: var(--wf-text-muted) !important;
    font-size: var(--wf-fs-sm) !important;
}

/* ---- Nested groups sidebar (left tree) ---- */
div.workflow.wf-design-modern .wf-settings-tree .nested-left.ui-layout-pane {
    background: var(--wf-bg-card) !important;
    border-right: 1px solid var(--wf-border) !important;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list {
    padding: 8px !important;
    list-style: none;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .item-label {
    padding: 8px 12px !important;
    border-radius: var(--wf-r-md) !important;
    margin-bottom: 2px;
    transition: var(--wf-t-fast);
    cursor: pointer;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .item-label:hover {
    background: var(--wf-bg-card-hover) !important;
}

/* Active group */
div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .tv-content.active {
    color: var(--wf-accent) !important;
    font-weight: 600;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .tv-content.active .item-label {
    background: var(--wf-accent-light) !important;
}

/* Group name */
div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .ti-name {
    font-size: var(--wf-fs-base) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .tv-content.active .ti-name {
    color: var(--wf-accent) !important;
}

/* Group folder icon */
div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .fa-folder {
    color: var(--wf-text-muted) !important;
    font-size: 13px !important;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .tv-content.active .fa-folder {
    color: var(--wf-accent) !important;
}

/* Group count badge */
div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .item-count {
    font-size: var(--wf-fs-xs) !important;
    color: var(--wf-text-muted) !important;
    background: var(--wf-bg-surface) !important;
    border-radius: var(--wf-r-full) !important;
    padding: 1px 8px !important;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

div.workflow.wf-design-modern .wf-settings-tree .tree-list-item .tv-content.active .item-count {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* ---- Form field items (right side) ---- */
div.workflow.wf-design-modern .wf-settings-tree .nested-inputs-list {
    background: var(--wf-bg-surface) !important;
    padding: 8px 16px !important;
}

div.workflow.wf-design-modern .wf-settings-tree ul.field-items {
    padding: 0 !important;
    list-style: none;
}

div.workflow.wf-design-modern .wf-settings-tree li.field-item {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    background: var(--wf-bg-surface) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree li.field-item:hover {
    border-color: var(--wf-border-strong) !important;
    box-shadow: var(--wf-sh-xs) !important;
}

/* Input label */
div.workflow.wf-design-modern .wf-settings-tree .input-name {
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-base) !important;
}

div.workflow.wf-design-modern .wf-settings-tree .input-name .field-name {
    font-weight: 500 !important;
}

/* Field type icon */
div.workflow.wf-design-modern .wf-settings-tree .input-name .field-type {
    color: var(--wf-text-muted) !important;
    margin-right: 6px !important;
}

/* Input description */
div.workflow.wf-design-modern .wf-settings-tree .input-desc-outer {
    font-size: var(--wf-fs-sm) !important;
    color: var(--wf-text-muted) !important;
}

/* ---- Form controls: inputs, selects, textareas ---- */
div.workflow.wf-design-modern .wf-settings-tree .input-value input.form-control,
div.workflow.wf-design-modern .wf-settings-tree .input-value textarea.form-control {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-base) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree .input-value input.form-control:focus,
div.workflow.wf-design-modern .wf-settings-tree .input-value textarea.form-control:focus {
    border-color: var(--wf-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    background: var(--wf-bg-surface) !important;
}

/* Toggle switches */
div.workflow.wf-design-modern .wf-settings-tree .input-value input.pl-checkbox + label {
    border-radius: var(--wf-r-full) !important;
}

/* Select2 containers */
div.workflow.wf-design-modern .wf-settings-tree .select2-container .select2-choice,
div.workflow.wf-design-modern .wf-settings-tree .ms-dd-toggle {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-base) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree .select2-container-active .select2-choice,
div.workflow.wf-design-modern .wf-settings-tree .ms-dd-toggle:focus {
    border-color: var(--wf-accent) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Select2 dropdown */
div.workflow.wf-design-modern .wf-settings-tree .select2-drop {
    border: 1px solid var(--wf-border) !important;
    border-radius: 0 0 var(--wf-r-md) var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
    background: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern .wf-settings-tree .select2-results .select2-highlighted {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* ---- Info icon (tooltip trigger) ---- */
div.workflow.wf-design-modern .wf-settings-tree .fa-info-circle {
    color: var(--wf-text-muted) !important;
    opacity: 0.6;
    transition: var(--wf-t-fast);
    cursor: help;
}

div.workflow.wf-design-modern .wf-settings-tree .fa-info-circle:hover {
    color: var(--wf-accent) !important;
    opacity: 1;
}

/* ---- Empty state ---- */
div.workflow.wf-design-modern .wf-settings-tree .no-data {
    color: var(--wf-text-muted) !important;
    font-size: var(--wf-fs-base) !important;
    font-style: italic;
    padding: 24px 16px !important;
    text-align: center;
}

/* ---- Layout splitter handle ---- */
div.workflow.wf-design-modern .wf-settings-tree .ui-layout-resizer {
    background: var(--wf-border) !important;
    opacity: 1 !important;
    width: 3px !important;
}

div.workflow.wf-design-modern .wf-settings-tree .ui-layout-resizer:hover {
    background: var(--wf-accent) !important;
}

/* ---- Dropdown menus inside FormBuilder ---- */
div.workflow.wf-design-modern .wf-settings-tree .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 4px !important;
}

div.workflow.wf-design-modern .wf-settings-tree .dropdown-menu > li > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 12px !important;
    border-radius: var(--wf-r-sm) !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-settings-tree .dropdown-menu > li > a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .wf-settings-tree .dropdown-menu > li.active > a {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* ---- Validation rows ---- */
div.workflow.wf-design-modern .wf-settings-tree .validations-list {
    border-top: 1px solid var(--wf-border) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}
div.workflow.wf-design-modern .wf-settings-tree .d3view-inputsBuilder .validations-list {
    border-top: none !important;
}

/* ============================================================
   Phase 13.d Stage A.1 — Docs panel tabs + markdown preview
   Tab bar above the existing TinyMCE editor; agent-file tabs
   render via marked() into .wf-md-preview panes.
   ============================================================ */
.wf-docs-tabs-bar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid #d0d7de;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
}
.wf-docs-tabs-bar .wf-docs-tab {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    padding: 6px 12px;
    font-size: 12px;
    color: #57606a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wf-docs-tabs-bar .wf-docs-tab > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-docs-tabs-bar .wf-docs-tab .fa {
    font-size: 11px;
    flex-shrink: 0;
}
.wf-docs-tabs-bar .wf-docs-tab:hover {
    background: #f4f6f8;
    color: #1f2328;
}
.wf-docs-tabs-bar .wf-docs-tab.active {
    background: #fff;
    color: #1f2328;
    border-color: #d0d7de;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    font-weight: 500;
}
.wf-docs-pane {
    display: none;
    height: calc(100% - 40px);
}
.wf-docs-pane.active {
    display: block;
}
.wf-docs-pane-doc.active {
    /* TinyMCE container needs height — calc above already handles it */
}
/* Phase 13.d Stage A.2 — markdown pane has a toolbar + content area. */
.wf-docs-pane-md.active {
    display: flex !important;
    flex-direction: column;
}
.wf-md-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px 0;
    flex-shrink: 0;
}
/* Modern segmented control — pill container, tight buttons, smooth swap. */
.wf-md-toolbar .wf-md-mode-group {
    display: inline-flex;
    background: #f4f6f8;
    border: 1px solid #d0d7de;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    box-shadow: none;
}
.wf-md-toolbar .wf-md-mode-group .btn,
.wf-md-toolbar .wf-md-mode {
    background: transparent !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-size: 12px !important;
    color: #57606a !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.4;
}
.wf-md-toolbar .wf-md-mode .fa {
    font-size: 11px;
    margin-right: 4px;
    opacity: 0.85;
}
.wf-md-toolbar .wf-md-mode:hover {
    color: #1f2328 !important;
    background: rgba(255, 255, 255, 0.6) !important;
}
.wf-md-toolbar .wf-md-mode.active {
    background: #fff !important;
    color: #1f2328 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    font-weight: 500;
}
.wf-md-toolbar .wf-md-mode.active .fa {
    opacity: 1;
    color: #2c5282;
}
.wf-md-toolbar .wf-md-mode:focus,
.wf-md-toolbar .wf-md-mode:active {
    outline: none !important;
}
.wf-md-toolbar .wf-md-save {
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.wf-md-toolbar .wf-md-save.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.wf-md-toolbar .wf-md-save.is-saved {
    background: #e6f4ea;
    color: #1e7e34;
    border-color: #c3e6cb;
}
.wf-md-content {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.wf-md-editor {
    position: absolute;
    inset: 0;
    border: 1px solid #d0d7de;
    border-radius: 4px;
}
.wf-md-preview {
    height: 100%;
    overflow-y: auto;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: #1f2328;
}
.wf-md-preview h1,
.wf-md-preview h2,
.wf-md-preview h3,
.wf-md-preview h4 {
    margin-top: 14px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1f2328;
}
.wf-md-preview h1 { font-size: 20px; border-bottom: 1px solid #d0d7de; padding-bottom: 4px; }
.wf-md-preview h2 { font-size: 17px; border-bottom: 1px solid #eaeef2; padding-bottom: 3px; }
.wf-md-preview h3 { font-size: 15px; }
.wf-md-preview h4 { font-size: 13px; }
.wf-md-preview p { margin: 8px 0; }
.wf-md-preview ul,
.wf-md-preview ol { margin: 8px 0; padding-left: 24px; }
.wf-md-preview li { margin: 3px 0; }
.wf-md-preview code {
    background: #f4f6f8;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    color: #cf222e;
}
.wf-md-preview pre {
    background: #f4f6f8;
    padding: 10px 12px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 10px 0;
}
.wf-md-preview pre code {
    background: transparent;
    padding: 0;
    color: #1f2328;
    font-size: 12px;
}
.wf-md-preview blockquote {
    border-left: 3px solid #d0d7de;
    padding: 2px 12px;
    color: #57606a;
    margin: 10px 0;
}
.wf-md-preview table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 12px;
}
.wf-md-preview th,
.wf-md-preview td {
    border: 1px solid #d0d7de;
    padding: 4px 10px;
    text-align: left;
}
.wf-md-preview th { background: #f4f6f8; font-weight: 600; }
.wf-md-preview a { color: #0969da; text-decoration: none; }
.wf-md-preview a:hover { text-decoration: underline; }
.wf-md-preview hr {
    border: none;
    border-top: 1px solid #d0d7de;
    margin: 14px 0;
}


/*
 * CSS for template: wf-tab-tpl.tpl
 * Source: javascripts/templates/modular/builder/navigation/wf-tab-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.wf-tabs .io-view {
position: relative;
    left: 60px;
    top: var(--wf-header-h, 80px);
    height: calc(100% - var(--wf-header-h, 80px) - 40px);
    width: calc(100% - 75px);
}

div.workflow-modal .wf-worker-config-view .wf-tabs ul.pl-tabs-vertical:first-child>li:first-child {
border-top: none;
}

div.workflow div.wf-tabs .io-view {
position: relative;
    left: 60px;
    top: var(--wf-header-h, 80px);
    height: calc(100% - var(--wf-header-h, 80px) - 40px);
    width: calc(100% - 75px);
}

div.workflow-modal .wf-worker-config-view .wf-tabs ul.pl-tabs-vertical:first-child>li:first-child {
border-top: none;
}

div.workflow div.wf-tabs .tab-pane .new-wf-container {
display: none;
}

div.workflow div.wf-tabs .tab-pane[data-is-brand-new="true"] .new-wf-container,
div.workflow .workflow-index-container.has-new-guide-open .new-wf-container {
position: absolute;
    height: 100%;
    top: 0;
    width: 100%;
    z-index: 200;
    background: #FFF;
    display: block !important;
}

/** Hide the top header only for the brand-new full-screen workflow chooser, not for Guide Me on a populated canvas **/
div.workflow .workflow-index-container.has-new-wf-guide .d3view-wf-header {
    display: none;
}

div.workflow div.wf-tabs .tab-pane[data-is-brand-new="temp"] .guide_btns {
display: inline-block !important;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-left {
flex: 1 0 65%;
    min-width: 200px;
    /* Minimum width for left panel */
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-body {
max-height: calc(100% - 42px) !important;
    position: relative;
    /* For absolute positioning of gutter */
}

div.workflow div.wf-tab-content .wf-tab-right {
display: none;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible {
display: block;
    flex: 0 0 35%;
    /* max-width: 35%; */
    min-width: 200px;
    border-left: 1px solid #DDD;
    position: relative;
    left: unset !important;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .ui-resizable-handle {
background: #f5f5f5;
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
    width: 6px;
    right: -4px;
    cursor: ew-resize;
    transition: all 0.2s ease;
    z-index: 6 !important;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .ui-resizable-handle:hover {
background: #e9ecef;
    border-left-color: #007bff;
    border-right-color: #007bff;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible.ui-resizable-resizing .ui-resizable-handle {
background: #007bff;
    border-left-color: #0056b3;
    border-right-color: #0056b3;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-body.wf-panel-resizing {
user-select: none;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-body.wf-panel-resizing .wf-tab-left,
div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-body.wf-panel-resizing .wf-tab-right {
transition: none;
    /* Disable transitions during resize for smooth dragging */
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal {
display: flex;
    flex-direction: column;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body {
flex: 1 1 auto;
    overflow: auto;
    height: auto !important;
    padding: 0;
    display: flex;
    flex-direction: column;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body .wf-worker-config-view,
div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body .wf-worker-iteration-view {
flex: 1 1 auto;
    overflow: auto;
    height: auto !important;
}

div.workflow div.wf-tab-right .workflow-modal #dock,
div.workflow div.wf-tab-right .workflow-modal #minimize {
display: none;
}

div.workflow div.wf-tab-content .wf-tab-footer {
display: none;
    position: absolute;
    height: 250px;
    bottom: 0;
    z-index: 10;
    /* R0-3800 - track the actual left-rail width instead of a static 75px so the split-layout
       footer lines up whether the rail is collapsed or expanded. */
    left: var(--wf-rail-w, var(--wf-sidebar-w, 75px));
    width: calc(100% - var(--wf-rail-w, var(--wf-sidebar-w, 75px)));
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-footer {
display: block;
}

div.workflow div.wf-tab-content .wf-tab-footer.collapsed {
height: 42px;
}

div.workflow div.wf-tab-content .wf-tab-footer.collapsed .workflow-activities-btn[data-action="top"],
div.workflow div.wf-tab-content .wf-tab-footer.collapsed .workflow-activities-btn[data-action="bottom"] {
opacity: 0;
    pointer-events: none;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal #wf-worker-inputs.tab-pane {
display: flex;
    flex-direction: column;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body .wf-tabs {
flex: 0 0 50px !important;
    border-right: none !important;
    border-left: 1px solid #DDD;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body .wf-worker-inputs-outputs {
flex-direction: row-reverse;
}

div.workflow div.wf-tab-content[data-split-layout="true"] .wf-tab-right.isVisible .workflow-modal .modal-body .wf-tabs .pl-tab-item-label {
display: none;
}

div.workflow .wf-main-container.timelineEnabled .wf-tabs,
div.workflow .wf-main-container.timelineEnabled .zoom,
div.workflow .wf-main-container.timelineEnabled #birds-eye-view {
display: none !important;
}

div.workflow .wf-main-container.dataEnabled .wf-tabs,
div.workflow .wf-main-container.dataEnabled .zoom,
div.workflow .wf-main-container.dataEnabled #birds-eye-view {
display: none !important;
}

div.workflow .wf-main-container.ancestryEnabled .wf-tabs,
div.workflow .wf-main-container.ancestryEnabled .zoom,
div.workflow .wf-main-container.ancestryEnabled #birds-eye-view {
display: none !important;
}


/** Added by shashank2104 on 2026-04-19 - DVFIV-2003 - Cert dataset column mapper styles.
    All selectors scoped under .cert-col-mapper (modal body) OR prefixed with
    .cert-map-* (builder toolbar button / per-viz overlay badge).
**/

/* ── Builder header: Map Columns button ───────────────────────────── */

.wf-certification-builder .cert-map-columns-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.wf-certification-builder .cert-map-columns-btn.has-mismatches {
    border-color: var(--d3v-status-warning, #f59e0b);
    color: var(--d3v-status-warning, #f59e0b);
    background: var(--d3v-bg-primary, #fff);
}

.wf-certification-builder .cert-map-columns-btn.has-mismatches:hover {
    background: rgba(245, 158, 11, 0.08);
}

.wf-certification-builder .cert-map-columns-btn.all-in-sync {
    opacity: 0.6;
    cursor: default;
}

.wf-certification-builder .cert-map-columns-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--d3v-status-warning, #f59e0b);
    color: #fff;
    line-height: 14px;
}

/* ── Per-viz warning overlay in preview ───────────────────────────── */

.wf-certification-builder .cert-viz-col-warning {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--d3v-status-danger, #ef4444);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    animation: cert-col-warning-pulse 1.6s ease-in-out infinite;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.wf-certification-builder .cert-viz-col-warning:hover {
    transform: scale(1.15);
}

@keyframes cert-col-warning-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35); }
    50%      { box-shadow: 0 2px 10px rgba(239, 68, 68, 0.75); }
}

/* ── Input button row: inline Map Columns button ──────────────────── */
/* DVFIV-2003 (2026-04-21): moved out of .wf-cert-summary-actions now
   that the summary card header has no action bar. The button lives in
   .cert-map-columns-container inside the outer input button row. */

.cert-map-columns-launch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--d3v-status-warning, #f59e0b);
    border-radius: var(--d3v-r-md, 6px);
    background: rgba(245, 158, 11, 0.08);
    color: var(--d3v-status-warning, #f59e0b);
    cursor: pointer;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.cert-map-columns-launch:hover {
    background: rgba(245, 158, 11, 0.15);
}

.cert-map-columns-launch .count {
    display: inline-block;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--d3v-status-warning, #f59e0b);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}

/* ── Modal body ───────────────────────────────────────────────────── */

.cert-col-mapper {
    padding: 4px 2px;
    font-size: 13px;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-summary {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--d3v-bg-tertiary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
}

.cert-col-mapper-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cert-col-mapper-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
}

.cert-col-mapper-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-intro {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--d3v-status-warning, #f59e0b);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    line-height: 1.5;
}

.cert-col-mapper-intro .fa {
    color: var(--d3v-status-warning, #f59e0b);
    margin-top: 2px;
}

.cert-col-mapper-nocols {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-status-danger, #ef4444);
}

.cert-col-mapper-nocols .fa {
    font-size: 24px;
}

.cert-col-mapper-nocols-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.cert-col-mapper-nocols-text {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.5;
}

/* ── Rows ─────────────────────────────────────────────────────────── */

.cert-col-mapper-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cert-col-mapper-row {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.cert-col-mapper-row:hover {
    border-color: var(--d3v-border-strong, #cbd5e1);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
}

.cert-col-mapper-row-param-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 4px;
}

.cert-col-mapper-row-old {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cert-col-mapper-old-name {
    font-family: var(--d3v-font-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-type-chip {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 10px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.cert-col-mapper-missing-tag {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--d3v-status-danger, #ef4444);
}

.cert-col-mapper-row-arrow {
    text-align: center;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 14px;
}

.cert-col-mapper-row-new .select2-container {
    width: 100% !important;
}

/*
 * CSS for template: d3view-wf-floating-bulk-actions-bar-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/d3view-wf-floating-bulk-actions-bar-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-floating-bulk-actions-bar {
height: 45px;
    width: calc(100% - 80px);
    margin: 0 auto;
    position: absolute;
    top: 80px;
    z-index: 200;
    background: #FFF;
    left: 75px;
    box-shadow: var(--plugin-box-shadow-light);
    padding: 0 20px;
    container-name: wf-bulk-actions-bar;
    container-type: inline-size;
}

.wf-floating-bulk-actions-bar[data-position="top"] {
position: fixed;
    z-index: 1000;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div {
display: flex;
    align-items: center;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div>button {
flex-grow: 1;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div>button .d3view-flex-v {
justify-content: center;
}

.wf-floating-bulk-actions-bar.overflowing .pl-ribbon-menu>div>button {
flex-grow: 0;
    margin: 2px;
}

.wf-floating-bulk-actions-bar.overflowing {
height: auto;
}



/*
 * CSS for template: d3view-wf-flow-modal-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/d3view-wf-flow-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal div.bootstrap-select.-wf .worker-location:hover {
color: #428bca;
}

div.workflow-modal div.bootstrap-select.-wf .worker-location:hover {
color: #428bca;
}


/** Added by shashank2104 on 2026-04-17 - DVFIV-2001 - Certification template summary card.
 *  Scoped under workflow plugin roots (.wf-builder and .workflow-modal) and uses only
 *  --d3v-* foundation tokens. Sits in the node config panel in place of the raw textarea
 *  when input_template has option renderAsSummary: true. Mirrors the reporter summary
 *  but uses a richer card layout with stat chips, dataset chips, chart-type list, and
 *  a pages table. **/

.wf-builder .wf-cert-summary,
.workflow-modal .wf-cert-summary {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, var(--d3v-border, #e2e8f0));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm);
    padding: 0;
    margin: 0 0 8px;
    overflow: hidden;
    transition: box-shadow var(--d3v-t-base, 180ms ease), border-color var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary:hover,
.workflow-modal .wf-cert-summary:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--d3v-border, #e2e8f0);
}

/* ---- Header ---- */
.wf-builder .wf-cert-summary-header,
.workflow-modal .wf-cert-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.wf-builder .wf-cert-summary-title,
.workflow-modal .wf-cert-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    letter-spacing: 0.2px;
}

.wf-builder .wf-cert-summary-title i,
.workflow-modal .wf-cert-summary-title i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 15px;
}

.wf-builder .wf-cert-summary-actions .btn,
.workflow-modal .wf-cert-summary-actions .btn {
    transition: transform var(--d3v-t-base, 180ms ease), box-shadow var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-actions .btn:hover,
.workflow-modal .wf-cert-summary-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-sm);
}

.wf-builder .wf-cert-summary-actions .btn:focus,
.workflow-modal .wf-cert-summary-actions .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ---- Stat chips ---- */
.wf-builder .wf-cert-summary-stats,
.workflow-modal .wf-cert-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

@media (max-width: 640px) {
    .wf-builder .wf-cert-summary-stats,
    .workflow-modal .wf-cert-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wf-builder .wf-cert-summary-stat,
.workflow-modal .wf-cert-summary-stat {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 10px;
    text-align: center;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-stat:hover,
.workflow-modal .wf-cert-summary-stat:hover {
    box-shadow: var(--d3v-sh-sm);
    transform: translateY(-1px);
}

.wf-builder .wf-cert-summary-stat-value,
.workflow-modal .wf-cert-summary-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.wf-builder .wf-cert-summary-stat-label,
.workflow-modal .wf-cert-summary-stat-label {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ---- Sections ---- */
.wf-builder .wf-cert-summary-section,
.workflow-modal .wf-cert-summary-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

.wf-builder .wf-cert-summary-section:last-child,
.workflow-modal .wf-cert-summary-section:last-child {
    border-bottom: 0;
}

.wf-builder .wf-cert-summary-section-title,
.workflow-modal .wf-cert-summary-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* ---- Dataset chips ---- */
.wf-builder .wf-cert-summary-chips,
.workflow-modal .wf-cert-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-builder .wf-cert-summary-chip,
.workflow-modal .wf-cert-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    max-width: 100%;
    cursor: default;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease), background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-chip:hover,
.workflow-modal .wf-cert-summary-chip:hover {
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-1px);
}

.wf-builder .wf-cert-summary-chip i,
.workflow-modal .wf-cert-summary-chip i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 10px;
}

.wf-builder .wf-cert-summary-chip-label,
.workflow-modal .wf-cert-summary-chip-label {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-builder .wf-cert-summary-chip-count,
.workflow-modal .wf-cert-summary-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--d3v-accent-primary, #3b82f6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}

/* ---- Chart list ---- */
.wf-builder .wf-cert-summary-chart-list,
.workflow-modal .wf-cert-summary-chart-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wf-builder .wf-cert-summary-chart-row,
.workflow-modal .wf-cert-summary-chart-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-chart-row:hover,
.workflow-modal .wf-cert-summary-chart-row:hover {
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
}

.wf-builder .wf-cert-summary-chart-icon,
.workflow-modal .wf-cert-summary-chart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    flex-shrink: 0;
}

.wf-builder .wf-cert-summary-chart-icon img,
.workflow-modal .wf-cert-summary-chart-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.wf-builder .wf-cert-summary-chart-icon i,
.workflow-modal .wf-cert-summary-chart-icon i {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 13px;
}

.wf-builder .wf-cert-summary-chart-name,
.workflow-modal .wf-cert-summary-chart-name {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-builder .wf-cert-summary-chart-count,
.workflow-modal .wf-cert-summary-chart-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 2px 8px;
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}

/* ---- Pages table ---- */
.wf-builder .wf-cert-summary-pages,
.workflow-modal .wf-cert-summary-pages {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.wf-builder .wf-cert-summary-pages thead th,
.workflow-modal .wf-cert-summary-pages thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 8px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

.wf-builder .wf-cert-summary-pages tbody tr,
.workflow-modal .wf-cert-summary-pages tbody tr {
    transition: background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-pages tbody tr:hover,
.workflow-modal .wf-cert-summary-pages tbody tr:hover {
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
}

.wf-builder .wf-cert-summary-pages tbody td,
.workflow-modal .wf-cert-summary-pages tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}

.wf-builder .wf-cert-summary-pages tbody tr:last-child td,
.workflow-modal .wf-cert-summary-pages tbody tr:last-child td {
    border-bottom: 0;
}

.wf-builder .wf-cert-summary-page-num,
.workflow-modal .wf-cert-summary-page-num {
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wf-builder .wf-cert-summary-page-viz,
.workflow-modal .wf-cert-summary-page-viz {
    text-align: right;
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Empty state ---- */
.wf-builder .wf-cert-summary-empty,
.workflow-modal .wf-cert-summary-empty {
    padding: 28px 20px;
    text-align: center;
}

.wf-builder .wf-cert-summary-empty-icon,
.workflow-modal .wf-cert-summary-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 50%;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 20px;
}

.wf-builder .wf-cert-summary-empty-title,
.workflow-modal .wf-cert-summary-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    margin-bottom: 4px;
}

.wf-builder .wf-cert-summary-empty-text,
.workflow-modal .wf-cert-summary-empty-text {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
    max-width: 320px;
    margin: 0 auto;
}

.wf-builder .wf-cert-summary-empty-text strong,
.workflow-modal .wf-cert-summary-empty-text strong {
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
}


/** Added by shashank2104 on 06/23/2026 - CS-469 - stale-rules banner inside the Parameter Rules summary **/
/** Rebuilt by shashank2104 on 06/24/2026 - CS-469 - stale banner is now the final card section (mirrors the cert card),
    yellow-tinted, hosting the Reconfigure/Clear actions. **/
.wf-builder .wf-ecs-card-stale,
.workflow-modal .wf-ecs-card-stale {
    background: var(--d3v-status-warning-bg, #fff8e6);
    border-left: 3px solid var(--d3v-status-warning, #e0a800);
}
.wf-builder .wf-ecs-card-stale-text,
.workflow-modal .wf-ecs-card-stale-text {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #475569);
}
.wf-builder .wf-ecs-card-stale-text > i,
.workflow-modal .wf-ecs-card-stale-text > i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--d3v-status-warning, #e0a800);
    font-size: 14px;
}
.wf-builder .wf-ecs-card-stale-text strong,
.workflow-modal .wf-ecs-card-stale-text strong {
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 600;
}
.wf-builder .wf-ecs-card-stale-actions,
.workflow-modal .wf-ecs-card-stale-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-left: 23px; /* align under the text, past the icon */
}
.wf-builder .wf-ecs-card-stale-actions .btn,
.workflow-modal .wf-ecs-card-stale-actions .btn {
    transition: var(--d3v-t-fast, all 0.15s ease);
}

/*
 * CSS for template: wf-collection-item-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-collection-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

 div.wf-collection.wf-collection-flex .collection-body {
    display: flex;
    flex-wrap: wrap;
 }

div.d3view-generic-modal-container.wf-collection .wf-panel,
div.wf-collection.wf-collection-flex .wf-panel {
    width: calc(33% - 20px);
    margin: 10px;
    border: 2px solid #DDD;
    cursor: pointer;
}

div.d3view-generic-modal-container.wf-collection .wf-panel.ui-selected,
div.wf-collection.wf-collection-flex .wf-panel.ui-selected {
border-color: steelblue;
    border-width: 2px;
    background: var(--dt-selection-color);
}

div.d3view-generic-modal-container.wf-collection .control-buttons button:not([data-id="view"]):not([data-id="edit"]),
div.wf-collection.wf-collection-flex .control-buttons button:not([data-id="view"]):not([data-id="edit"]) {
display: none;
}

.wf-collection.d3view-plugins-sidebar .wf-panel,
.wf-collection.wf-collection-flex .wf-panel {
display: flex;
    align-items: center;
}

.wf-collection.d3view-plugins-sidebar .wf-panel .control-buttons,
.wf-collection.wf-collection-flex .wf-panel .control-buttons {
opacity: 0;
}

.wf-collection.d3view-plugins-sidebar .wf-panel:hover .control-buttons,
.wf-collection.wf-collection-flex .wf-panel:hover .control-buttons {
opacity: 1;
}

/** Added by shashank2104 on 02/19/2026 - DW-2716 - RBAC-style card grid for displayType cards **/
/** Updated by shashank2104 on 02/25/2026 - DVFIV-1933 - 3 cards per row, min-width 0 so long input text does not overflow grid **/
/** Added by shashank2104 on 02/25/2026 - fix grid row height so wf-panel contains card content (card content out of wf-panel block) **/
/** No grid-template-rows: use grid-auto-rows only so rows can grow when See more is expanded **/
.wf-collection.wf-collection-cards .wf-collection-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
}

.wf-collection.wf-collection-cards .wf-collection-cards-grid .wf-collection-card {
    margin: 0;
    margin-bottom: 0;
    min-width: 0;
    height: 175px;
    display: flex;
    flex-direction: column;
}

/** Added by shashank2104 on 02/25/2026 - when See more is open, panel sizes to content so row expands **/
.wf-collection.wf-collection-cards .wf-collection-cards-grid .wf-collection-card.wf-collection-card-expanded {
    align-self: start;
    min-height: 0;
    height: auto;
    overflow: visible;
}

.wf-collection.wf-collection-cards .wf-collection-card {
    width: 100%;
    min-width: 0;
    min-height: 175px;
    cursor: pointer;
    overflow: hidden;
}

.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-inner {
    position: relative;
    transition: height 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    min-height: 175px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 2px solid #ddd;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

/** DVFIV-1933 - when See more is open, card height transitions to auto */
/** Added by shashank2104 on 02/25/2026 - flex 0 1 auto so inner card sizes by content and panel/row expand **/
.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-expanded .wf-collection-card-inner {
    height: auto;
    min-height: 175px;
    flex: 0 1 auto;
    overflow: visible;
}

.wf-collection.wf-collection-cards .wf-collection-card:hover .wf-collection-card-inner {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.wf-collection.wf-collection-cards .wf-collection-card.ui-selected .wf-collection-card-inner {
    border-color: steelblue;
    border-width: 2px;
    background: var(--dt-selection-color);

}

.wf-collection.wf-collection-cards .wf-collection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wf-collection.wf-collection-cards .wf-collection-card-header-left {
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    display: flex;
}

.wf-collection.wf-collection-cards .wf-collection-card-header-left .wf-collection-card-select-checkbox {
    margin: 0;
}

.wf-collection.wf-collection-cards .wf-collection-card-header-right {
    flex-shrink: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wf-collection.wf-collection-cards .wf-collection-card-header-right.control-buttons {
    opacity: 0;
}

.wf-collection.wf-collection-cards .wf-collection-card:hover .wf-collection-card-header-right.control-buttons {
    opacity: 1;
}

.wf-collection.wf-collection-cards .wf-collection-card-header-left .wf-collection-card-name.lead,
.wf-collection.wf-collection-cards .wf-collection-card-header-left a.wf-collection-card-name {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: break-word;
}

.wf-collection.wf-collection-cards .wf-collection-card-body {
    padding: 15px;
    min-width: 0;
    overflow: hidden;
}

/** Added by shashank2104 on 02/25/2026 - when See more is open, allow body to grow so row can expand **/
.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-expanded .wf-collection-card-body {
    overflow: visible;
    flex: 0 1 auto;
}

.wf-collection.wf-collection-cards .wf-collection-card-body-content {
    display: flex;
    gap: 12px;
    min-width: 0;
    align-items: flex-start;
}

.wf-collection.wf-collection-cards .wf-collection-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.wf-collection.wf-collection-cards .wf-collection-card-icon .fa {
    font-size: 18px;
}

.wf-collection.wf-collection-cards .wf-collection-card-info {
    flex: 1;
    min-width: 0;
}

.wf-collection.wf-collection-cards .wf-collection-card-description {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.wf-collection.wf-collection-cards .wf-collection-card-meta {
    margin-top: 8px;
    font-size: 12px;
    color: #777;
}

.wf-collection.wf-collection-cards .wf-collection-card-updated {
    margin-top: 4px;
}

.wf-collection.wf-collection-cards .wf-collection-card-current .wf-collection-card-inner {
    border-color: #5bc0de;
    border-width: 2px;
    box-shadow: 0 0 0 1px #5bc0de;
}

.wf-collection.wf-collection-cards .wf-collection-card-current-badge {
    margin-left: 8px;
    font-size: 11px;
    vertical-align: middle;
}

.wf-collection.wf-collection-cards .wf-collection-card.disabled {
    cursor: default;
    opacity: 0.5;
}

.wf-collection.wf-collection-cards .wf-collection-card.disabled .wf-collection-card-inner {
    background-color: #f9f9f9;
}

.wf-collection.wf-collection-cards .wf-collection-card.disabled:hover .wf-collection-card-inner {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.wf-collection.wf-collection-cards .wf-collection-card.disabled.wf-collection-card-current .wf-collection-card-inner {
    border-color: #5bc0de;
    background-color: #f4f9fb;
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - incompatible card: border-color only; DW-2716 02/23 - do not disable or restrict interaction */
.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-incompatible .wf-collection-card-inner {
    border-color: #8a6d3b;
}

/** Added by shashank2104 on 02/23/2026 - DW-2716 - big check/X compat badge top-right */
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-ok {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    animation: wf-compat-badge-in 0.25s ease-out;
}
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-fail {
    background: rgba(220, 53, 69, 0.2);
    color: #d9534f;
    animation: wf-compat-badge-in 0.25s ease-out;
}
@keyframes wf-compat-badge-in {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/** Added by shashank2104 on 02/23/2026 - DW-2716 - hover indication for compat badge (incompat badge shows tooltip) */
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-ok:hover,
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-fail:hover {
    cursor: help;
    transform: scale(1.15);
}
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-ok:hover {
    background: rgba(40, 167, 69, 0.35);
}
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-fail:hover {
    background: rgba(220, 53, 69, 0.35);
}

/** DW-2716 - hide compat badge until compat is known and card qualifies (Manual: selected; Auto: all) */
.wf-collection.wf-collection-cards .wf-collection-card .wf-collection-card-compat-badge.wf-collection-card-compat-badge-hidden {
    display: none;
}

/** Added by shashank2104 on 02/20/2026 - DW-2716 - spinner top-right while checking compatibility (no full-card fade) */
.wf-collection.wf-collection-cards .wf-collection-card-compat-spinner {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #555;
}
.wf-collection.wf-collection-cards .wf-collection-card-compat-spinner i {
    font-size: 14px;
    color: #333;
}
.wf-collection.wf-collection-cards .wf-collection-card-compat-spinner-text {
    white-space: nowrap;
}

/** Incompatible indicator: fa-exclamation-triangle with tooltip only on icon */
.wf-collection.wf-collection-cards .wf-collection-card-incompat-icon {
    margin-left: 6px;
    color: #8a6d3b;
    cursor: help;
}
.wf-collection.wf-collection-cards .wf-collection-card-incompat-icon .fa {
    font-size: 14px;
}

.wf-collection .tv-ext-filters-container .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.wf-collection .tv-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.wf-collection .tv-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.wf-collection .tv-ext-filters-container input[data-search-input] {
    height: 40px;
}
.wf-collection .tv-ext-filters-container .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.wf-collection .tv-ext-filters-container .d3view-filter-button .flex-l {
    display: none;
}
.wf-collection .tv-ext-filters-container .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.wf-collection .tv-ext-filters-container .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.wf-collection .tv-ext-filters-container .d3view-filter-button span.clear-search:hover {
    color: red;
}
.wf-collection .tv-ext-filters-container .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

/** Added by shashank2104 on 02/25/2026 at 03:29 PM - DVFIV-1933 - card inputs block: truncation and See more expanded area */
.wf-collection.wf-collection-cards .wf-collection-card-inputs-wrap {
    margin-top: 4px;
}
.wf-collection.wf-collection-cards .wf-collection-card-inputs-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}
.wf-collection.wf-collection-cards .wf-collection-card-inputs-label .fa {
    margin-right: 4px;
}
.wf-collection.wf-collection-cards .wf-collection-card-signature.wf-collection-card-inputs-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    font-size: 12px;
}
.wf-collection.wf-collection-cards .wf-collection-card-see-more-inputs {
    margin-top: 4px;
}
.wf-collection.wf-collection-cards .wf-collection-card-inputs-expanded {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 6px;
    padding: 6px 0;
    font-size: 12px;
    border-top: 1px solid #eee;
    word-wrap: break-word;
}

/** Added by shashank2104 on 02/25/2026 - executing/completed state for play-button workflow execution **/
.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-executing .wf-collection-card-inner {
    border-color: rgba(0, 123, 255, 0.85);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), 0 4px 12px rgba(0, 123, 255, 0.15);
    position: relative;
    animation: wf-card-executing-pulse 1.8s ease-in-out infinite;
}
.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-executing .wf-collection-card-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: wf-card-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes wf-card-executing-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2), 0 4px 12px rgba(0, 123, 255, 0.15); }
    50% { box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.35), 0 4px 16px rgba(0, 123, 255, 0.2); }
}
@keyframes wf-card-shimmer {
    0% { left: -100%; }
    100% { left: 150%; }
}

.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-completed .wf-collection-card-inner {
    border-color: rgba(40, 167, 69, 0.9);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25), 0 4px 14px rgba(40, 167, 69, 0.15);
    animation: wf-card-completed-pop 0.4s ease-out;
}
@keyframes wf-card-completed-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.wf-collection.wf-collection-cards .wf-collection-card.wf-collection-card-failed .wf-collection-card-inner {
    border-color: rgba(220, 53, 69, 0.85);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    animation: wf-card-failed-shake 0.5s ease-out;
}
@keyframes wf-card-failed-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
/*
 * CSS for template: wf-configuration-get-inputs-card-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-configuration-get-inputs-card-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .input-value-container>.input-group>.input-group-addon:first-child,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .initial_value_container {
/*display: none!important;*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .ip-type,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .ip-type,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .ip-type {
padding: 0 !important;
    margin: 0 !important;
    margin-right: 5px !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .input-value-container>.input-group>.input-group-addon:first-child,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .initial_value_container {
/*display: none!important;*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item {
display: block;
    /*margin: 0 10px;*/
    padding: 10px;
    /*border: none!important;*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .field-item-footer,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .field-item-footer,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .field-item-footer {
display: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.isEditing .field-item-footer,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item.isEditing .field-item-footer,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item.isEditing .field-item-footer {
display: block;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .field-right-menu {
opacity: 0;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .field-right-menu .btn-label {
display: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item:hover .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.hasPopoverOpen .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.isEditing .field-right-menu,

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item:hover .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item.hasPopoverOpen .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item.isEditing .field-right-menu,

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item:hover .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item.hasPopoverOpen .field-right-menu,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item.isEditing .field-right-menu {
opacity: 1 !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .field-item-footer .user-default-value button,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .field-item-footer .user-default-value button,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .field-item-footer .user-default-value button {
height: 34px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.isEditing .edit-input,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item.isEditing .edit-input,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item.isEditing .edit-input {
color: darkorange;
    opacity: 1 !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item>.field-item-contents>div,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item>.field-item-contents>div {
padding: 10px 20px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div.field-item-body,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item>.field-item-contents>div.field-item-body,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item>.field-item-contents>div.field-item-body {
padding-top: 0;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource-options>.row div.bootstrap-select,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource-options>.row div.select2-container,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .datasource-options>.row select.selectpicker-wf {
/*width: 150px!important;*/
    padding: 0;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.hasPopoverOpen,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item.hasPopoverOpen {
z-index: 3;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .ds-label,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] li.field-item .ds-label,
div.workflow-modal li.field-item .dynamic_op_value_dd .ds-label {
display: block !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] .inputs-card table {
table-layout: fixed;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] .inputs-card table thead th {
width: 400px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] .inputs-card table thead th:first-child {
width: 200px;
}



/*
 * CSS for template: wf-configuration-get-inputs-table-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-configuration-get-inputs-table-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="table"] .inputs-table {
padding: 10px 25px;
}



/*
 * CSS for template: wf-data-traversal-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-data-traversal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .data-traversal-view .field-ds-map.clickable:hover .worker-name,
div.workflow-modal .data-traversal-view .field-ds-map-op.clickable:hover .output-name {
color: #007bff;
    text-decoration: underline;
}



/*
 * CSS for template: wf-exec-stats-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-exec-stats-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.popover.wf-exec-stats {
max-width: none !important;
    max-height: none !important;
    width: 700px !important;
}

div.popover.wf-exec-stats .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
}

div.popover.wf-exec-stats .popover-header span {
padding: 6px;
    color: dimgray;
    cursor: pointer;
}

div.popover.wf-exec-stats .popover-header span:hover {
color: #428bca;
}

div.popover.wf-exec-stats .popover-header .popover-title {
background-color: transparent;
    border-bottom: none;
    display: inline-block;
}

div.popover.wf-exec-stats .popover-content {
width: 100%;
    height: 500px;
    max-height: unset;
    max-width: unset;
}

div.popover.wf-exec-stats.enlarged {
width: 69% !important;
    height: 91% !important;
    left: 20% !important;
}

div.popover.wf-exec-stats {
max-width: none !important;
    max-height: none !important;
    width: 700px !important;
}

div.popover.wf-exec-stats .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
}

div.popover.wf-exec-stats .popover-header span {
padding: 6px;
    color: dimgray;
    cursor: pointer;
}

div.popover.wf-exec-stats .popover-header span:hover {
color: #428bca;
}

div.popover.wf-exec-stats .popover-header .popover-title {
background-color: transparent;
    border-bottom: none;
    display: inline-block;
}

div.popover.wf-exec-stats .popover-content {
width: 100%;
    height: 500px;
}

div.popover.wf-exec-stats.enlarged {
width: 69% !important;
    height: 91% !important;
    left: 20% !important;
}

div.popover.wf-exec-stats {
max-width: none !important;
    max-height: none !important;
    width: 700px !important;
}

div.popover.wf-exec-stats .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
}

div.popover.wf-exec-stats .popover-header span {
padding: 6px;
    color: dimgray;
    cursor: pointer;
}

div.popover.wf-exec-stats .popover-header span:hover {
color: #428bca;
}

div.popover.wf-exec-stats .popover-header .popover-title {
background-color: transparent;
    border-bottom: none;
    display: inline-block;
}

div.popover.wf-exec-stats .popover-content {
width: 100%;
    height: 500px;
}

div.popover.wf-exec-stats.enlarged {
width: 69% !important;
    height: 91% !important;
    left: 20% !important;
}


/* Added by shashank2104 on 2026-07-06 - execution report empty-state placeholder */
/* Base is flex (the visible layout); the template's inline display:none + jQuery .hide()
   keep it hidden until renderViz calls .show() (which clears the inline none). */
.wf-exec-stats .wf-exec-empty,
div.popover.wf-exec-stats .wf-exec-empty {
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--d3v-sp-lg, 24px);
}

.wf-exec-stats .wf-exec-empty-inner {
    max-width: 340px;
    margin: 0 auto;
}

.wf-exec-stats .wf-exec-empty-icon {
    font-size: 34px;
    color: var(--d3v-text-muted, #9aa4ae);
    opacity: 0.55;
    margin-bottom: var(--d3v-sp-md, 12px);
}

.wf-exec-stats .wf-exec-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #2c3e50);
    margin-bottom: var(--d3v-sp-xs, 6px);
}

.wf-exec-stats .wf-exec-empty-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #6b7680);
}


/* Added by shashank2104 on 2026-04-09 - DVFIV-1991 - extraction config summary container */

.wf-builder .wf-extraction-config-summary {
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
    padding: var(--d3v-sp-md, 12px);
    margin-bottom: var(--d3v-sp-sm, 8px);
    transition: var(--d3v-t-fast, 150ms ease);
}

.wf-builder .wf-extraction-config-summary:hover {
    border-color: var(--d3v-border-medium);
    box-shadow: var(--d3v-sh-sm);
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-stats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-primary);
    padding: 4px 10px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-light);
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-stats li i {
    color: var(--d3v-accent-primary, #3498db);
    font-size: 11px;
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-stats li strong {
    color: var(--d3v-text-primary);
    font-weight: 600;
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-legacy-note {
    margin: 10px 0 0;
    font-size: 11px;
    font-style: italic;
}

.wf-builder .wf-extraction-config-summary-body .wf-extraction-config-legacy-note i {
    color: var(--d3v-status-warning, #f0ad4e);
    margin-right: 4px;
}


/*
 * CSS for template: wf-flow-modal-execution-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-flow-modal-execution-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.wf-main-container .plugin-header-right .play-controls .wf_restart .exec-rect,
div.wf-flow-modal-execution .play-controls .wf_restart .exec-rect {
width: 0;
    transition: width 0.3s linear;
    position: absolute;
    background-color: lightgreen;
    pointer-events: none;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

div.wf-flow-modal-execution[data-execution-mode="default"] .gi-stepper-nav {
display: none !important;
}

div.wf-flow-modal-execution[data-execution-mode="default"] .gi-body {
height: calc(100% - 56px) !important;
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .wf_restart .exec-rect,
div.wf-flow-modal-execution .play-controls .wf_restart .exec-rect {
width: 0;
    transition: width 0.3s linear;
    position: absolute;
    background-color: lightgreen;
    pointer-events: none;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

div.wf-flow-modal-execution[data-execution-mode="default"] .gi-stepper-nav {
display: none !important;
}

div.wf-flow-modal-execution[data-execution-mode="default"] .gi-body {
height: calc(100% - 56px) !important;
}

div.wf-flow-modal-execution .gi-pager .wf-status {
border: none;
    font-size: 14px;
}

div.wf-flow-modal-execution ul.pager.gi-pager {
font-size: 2em;
    margin: 10px;
}

div.wf-flow-modal-execution .generic-input-template {
padding: 0;
}

div.wf-flow-modal-execution.no-review .gi-stepper-nav {
height: calc(100% - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}

div.wf-flow-modal-execution.no-review .gi-body {
display: none;
}

div.wf-flow-modal-execution .d3view-inputsBuilder {
border: none !important;
}

.wf-flow-modal-execution div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div {
/*padding: 12px 0;*/
}

.wf-flow-modal-execution div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div.field-item-description {
/*padding: 0!important;*/
}

.wf-flow-modal-execution .gi-tab-container .inline-worker-title {
padding-left: 10px !important;
    height: 45px !important;
    margin-bottom: 0 !important;
}

.wf-flow-modal-execution .gi-body>.tab-content {
padding: 0 !important;
}

.wf-flow-modal-execution .gi-tab-container .wf-worker-config-view {
height: calc(100% - 50px) !important;
}

.wf-flow-modal-execution .generic-input-template .gi-main-container {
border: none;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel {
height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 6px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
    border-image: initial;
    border-radius: 29px;
    margin: 0 100px;
    flex: 1 1 auto;
    position: relative;
    cursor: pointer;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel:hover {
background-color: #f5f5f5;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="prev"] {
/*opacity: 0.6;*/
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-status="success"] {
border-color: #5c8b5c;
    border-width: 6px;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-status="processing"] {
/*animation: border-color-change 2.5s ease-in infinite;*/
    animation: border-opacity-change 2.5s ease-in infinite;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="prev"]:before {
content: 'Previous Worker';
    position: absolute;
    top: -25px;
    display: none;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="next"]:before {
content: 'Next Worker';
    position: absolute;
    top: -25px;
    display: none;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="current"]:before {
content: 'Current Worker';
    position: absolute;
    top: -25px;
    display: none;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="current"] {
/*font-weight: bold;*/
    /*font-size: 1.2em;*/
    height: 250px;
    width: 250px;
    border-width: 12px;
    border-color: #2196F3;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel[data-id="current"] .panel-icon {
position: absolute;
    bottom: 10px;
}

.wf-flow-modal-execution .wf-workers-container .worker-type {
font-size: 1.2em;
}

.wf-flow-modal-execution .wf-status .fa {
font-size: 85%;
}

div.wf-flow-modal-execution .wf-status-update .worker-panel svg {
position: absolute;
    left: 100%
}

.wf-flow-modal-execution .wf-status-progress {
margin-bottom: 0 !important;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul {
display: flex;
    justify-content: center;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li {
width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    border: 1px solid #DDD;
    border-radius: 50%;
    position: relative;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li:last-child {
margin-right: 0;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):after {
content: ' ';
    width: 0px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    transition: width 0.3s ease-in;
    border-radius: 2px;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
content: ' ';
    width: 32px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    border-radius: 2px;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
background: #59e069;
    color: #FFF;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
width: 32px;
    background: #59e069;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] {
background: none;
    box-shadow: none;
    border: 1px solid #DDD;
    border-radius: 5px;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] {
display: block;
    ;
}

div.wf-flow-modal-execution .wf-exec-message[data-viewtype="progressbar"] .common-msg-container {
text-align: left;
}

div.wf-flow-modal-execution .error-dv .d3view-textviz-container {
min-height: 250px;
}

div.wf-flow-modal-execution .ui-layout-resizer {
background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    position: relative;
    transition: background 0.2s ease;
}

div.wf-flow-modal-execution .ui-layout-resizer:hover {
background: linear-gradient(90deg, #d0d0d0 0%, #e8e8e8 50%, #d0d0d0 100%);
    cursor: ew-resize;
}

div.wf-flow-modal-execution .ui-layout-resizer::before {
content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 30px;
    background: repeating-linear-gradient(90deg,
            #999 0px,
            #999 2px,
            transparent 2px,
            transparent 4px);
    border-radius: 2px;
}

div.wf-flow-modal-execution .ui-layout-container.plugin-layout>div.ui-layout-pane.full-w {
width: 100% !important;
}

div.wf-flow-modal-execution .user-review-fb {
border-left: 1px solid #DDD;
}



/*
 * CSS for template: wf-info-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-info-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-info-tt {
display: none;
    max-width: unset;
}

div.workflow .wf-info-tt {
display: none;
    max-width: unset;
}

div.workflow .workflow-index .basic-view-container .wf-info-container {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
    background-color: #FFF;
}

div.workflow .workflow-index .wf-info {
height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

div.workflow .wf-info-tt {
display: none;
    max-width: unset;
}

div.workflow .workflow-index .basic-view-container .wf-info-container {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 2;
    background-color: #FFF;
}

div.workflow .workflow-index .wf-info {
height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

div.workflow .wf-info-header {
padding: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow .wf-info-content {
max-height: none;
    overflow-y: visible;
}

div.workflow .wf-info-item:last-child {
margin-bottom: 0;
}

div.workflow .wf-info-item .lead {
margin-bottom: 4px;
    font-size: 12px;
}

div.workflow .wf-info-item .wf-type-label {
margin-right: 4px;
    font-size: 10px;
}

div.workflow .wf-info-item .text-muted {
margin-bottom: 4px;
    font-size: 10px;
}

div.workflow .wf-info-empty {
font-size: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 12px 0;
}

div.workflow .wf-info-ellipsis {
background: #007bff;
    border: 1px solid #007bff;
    border-radius: 15px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    color: white;
    text-align: center;
    min-width: 30px;
    position: absolute;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

div.workflow .wf-info-ellipsis:hover {
background: #0056b3;
    border-color: #0056b3;
    color: white;
    transform: scale(1.05);
}

div.workflow .wf-info-overflow-popover {
position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
    max-width: 300px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1001;
    display: none;
}

div.workflow .wf-info-overflow-popover.visible {
display: block;
}

div.workflow .wf-info-overflow-item {
background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px 6px;
    margin-bottom: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* font-size: 10px; */
    line-height: 1.2;
}

div.workflow .wf-info-overflow-item:hover {
background: #f5f5f5;
}



/*
 * CSS for template: wf-ip-classifier-item-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-ip-classifier-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal li.field-item .ip-classifier-item {
border: 1px solid #DDD;
    margin-bottom: 10px;
    padding: 15px;
    overflow: auto;
}

div.workflow-modal li.field-item .ip-classifier-item td.index:before {
counter-increment: section;
    content: counter(section) ".";
}

div.workflow-modal li.field-item .ip-classifier-item .row {
border-bottom: none !important;
    padding: 0 !important;
    font-size: unset;
}

div.workflow-modal li.field-item .ip-classifier-item .flexFilters .filter-separator {
display: block !important;
    /*margin-top: 30px;*/
}

div.workflow-modal li.field-item .ip-classifier-item .filter-horizontal li.filter-hz-item {
width: 100% !important;
    display: block;
}



/*
 * CSS for template: wf-iteration-create-input-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-iteration-create-input-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-iteration-create .assign-to .datasource-options .col-md-12 {
width: 50%;
}

.wf-iteration-create .assign-to .datasource-options .col-md-12 {
width: 50%;
}



/*
 * CSS for template: wf-iteration-create-step_default-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-iteration-create-step_default-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .datasource-options>.row,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .datasource-options>.row {
display: flex !important;
    /*align-items: center;*/
    flex-wrap: wrap;
}



/*
 * CSS for template: wf-iteration-create-step-assignments-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-iteration-create-step-assignments-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-iterations-viewer .iterating-inputs div.it-input {
/* border: 1px solid #DDD; */
    /* padding: 10px; */
    margin-bottom: 50px;
}

.wf-iterations-viewer .iterating-inputs .d3view-inputsBuilder {
border: none;
}



/*
 * CSS for template: wf-iteration-create-step6-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-iteration-create-step6-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-iteration-create div.d3view-inputsBuilder .inputs-builder-container {
display: block;
}

.wf-iteration-create div.d3view-inputsBuilder .inputs-builder-container {
display: block;
}



/*
 * CSS for template: wf-iterations-merged-interactive-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-iterations-merged-interactive-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

.wf-workers-container ul.filters-list>li.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

.wf-workers-container ul.filters-list li.additional_types a.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

.wf-workers-container ul.filters-list>li.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

.wf-workers-container ul.filters-list li.additional_types a.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

.wf-workers-container .dropdown-menu li.active>a {
text-shadow: none;
}

div.wf-carousel div.flow-header ul.workers-nav>li.active>a {
color: #FFF !important;
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

.wf-workers-container ul.filters-list>li.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

.wf-workers-container ul.filters-list li.additional_types a.active {
color: #428BCA;
    border-bottom: 1px solid #428BCA;
}

.wf-workers-container .dropdown-menu li.active>a {
text-shadow: none;
}

div.wf-carousel div.flow-header ul.workers-nav>li.active>a {
color: #FFF !important;
}

.wf-navigation-split-layout .breadcrumb-item.active {
background: #007bff;
    border-color: #007bff;
    color: #fff;
}

.wf-navigation-split-layout .breadcrumb-item.active .text-muted {
color: rgba(255, 255, 255, 0.8) !important;
}

.wf-data-container .toggle-view-btn.active {
background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.wf-data-container .toggle-view-btn:not(.active):hover {
background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}



/*
 * CSS for template: wf-node-basic-iteration-item-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-node-basic-iteration-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .iterations-list .iteration-item {
margin: 10px;
    min-width: 200px;
    width: 24%;
}

div.workflow-modal .iterations-list .iteration-item.add_container {
box-shadow: none;
}

div.workflow-modal .iterations-list .iteration-item.valid {
border-color: green;
}

div.workflow-modal .iterations-list .iteration-item.invalid {
border-color: red;
}

div.workflow-modal .iterations-list .iteration-item.executed {
border-color: green;
}

div.workflow-modal .iterations-list .iteration-item {
margin: 10px;
    min-width: 200px;
    width: 24%;
}

div.workflow-modal .iterations-list .iteration-item.add_container {
box-shadow: none;
}

div.workflow-modal .iterations-list .iteration-item.valid {
border-color: green;
}

div.workflow-modal .iterations-list .iteration-item.invalid {
border-color: red;
}

div.workflow-modal .iterations-list .iteration-item.executed {
border-color: green;
}



/*
 * CSS for template: wf-previous-worker-outputs-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-previous-worker-outputs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-heading {
padding: 7px;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs {
margin-bottom: 0;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li {
padding: 8px;
    border-bottom: 1px solid #ddd;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li:last-child {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li .add-to-list {
position: relative;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group,
div.workflow-modal .worker-outputs .form-group {
padding: 15px 24px;
    margin-bottom: 0;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label,
div.workflow-modal .worker-outputs .form-group>label {
font-weight: 500;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label>span,
div.workflow-modal .worker-outputs .form-group>label>span {
display: none;
}

div#wf-execute-workflow-node-modal .edit_options .form-group .input-value-container,
div.workflow-modal .worker-outputs .form-group .input-value-container {
width: 98%;
    position: relative;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-heading {
padding: 7px;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs {
margin-bottom: 0;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li {
padding: 8px;
    border-bottom: 1px solid #ddd;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li:last-child {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li .add-to-list {
position: relative;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group,
div.workflow-modal .worker-outputs .form-group {
padding: 15px 24px;
    margin-bottom: 0;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label,
div.workflow-modal .worker-outputs .form-group>label {
font-weight: 500;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label>span,
div.workflow-modal .worker-outputs .form-group>label>span {
display: none;
}

div#wf-execute-workflow-node-modal .edit_options .form-group .input-value-container,
div.workflow-modal .worker-outputs .form-group .input-value-container {
width: 98%;
    position: relative;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-heading {
padding: 7px;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs {
margin-bottom: 0;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li {
padding: 8px;
    border-bottom: 1px solid #ddd;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li:last-child {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs .previous-worker-outputs .panel-collapse ul.worker-outputs li .add-to-list {
position: relative;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group,
div.workflow-modal .worker-outputs .form-group {
padding: 15px 24px;
    margin-bottom: 0;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label,
div.workflow-modal .worker-outputs .form-group>label {
font-weight: 500;
    font-size: 1.2em;
}

div#wf-execute-workflow-node-modal .edit_options .form-group>label>span,
div.workflow-modal .worker-outputs .form-group>label>span {
display: none;
}

div#wf-execute-workflow-node-modal .edit_options .form-group .input-value-container,
div.workflow-modal .worker-outputs .form-group .input-value-container {
width: 98%;
    position: relative;
}



/*
 * CSS for template: wf-remote-wf-io-mapper-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-remote-wf-io-mapper-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-remote-wf-io-mapper .generic-input-template {
padding: 0;
}

div.wf-remote-wf-io-mapper .generic-input-template .gi-body>.tab-content {
padding: 0;
}

div.wf-remote-wf-io-mapper .plugin-app-mapper ul.list-group {
box-shadow: none;
    overflow: auto;
}

div.wf-remote-wf-io-mapper .plugin-app-mapper li.list-group-item {
margin: 10px;
    height: 100px;
}

div.wf-remote-wf-io-mapper .generic-input-template {
padding: 0;
}

div.wf-remote-wf-io-mapper .generic-input-template .gi-body>.tab-content {
padding: 0;
}

div.wf-remote-wf-io-mapper .plugin-app-mapper ul.list-group {
box-shadow: none;
    overflow: auto;
}

div.wf-remote-wf-io-mapper .plugin-app-mapper li.list-group-item {
margin: 10px;
    height: 100px;
}



/*
 * CSS for template: wf-save-tpl.tpl
 * Modernized 5/7/26 — DW-2916
 *
 * Scoped under .wf-save-modal-form so nothing leaks. All colors / radii /
 * shadows / transitions go through --d3v-* foundation tokens.
 */

.wf-save-modal-form {
    --wf-save-label-w: 220px;
    --wf-save-row-gap: 12px;

    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 2px 8px;
    color: var(--d3v-text-primary, #1f2937);
    font-size: 13px;
}

/* ---- Section ---- */

.wf-save-modal-form .wf-save-section {
    display: flex;
    flex-direction: column;
    gap: var(--wf-save-row-gap);
}

.wf-save-modal-form .wf-save-section + .wf-save-section {
    padding-top: 16px;
    border-top: 1px solid var(--d3v-border-secondary, #e5e7eb);
}

.wf-save-modal-form .wf-save-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wf-save-modal-form .wf-save-section__title .fa {
    font-size: 13px;
    color: var(--d3v-accent-primary, #2563eb);
}

.wf-save-modal-form .wf-save-section__title--accent {
    color: var(--d3v-text-primary, #1f2937);
    font-size: 12px;
}

.wf-save-modal-form .wf-save-section__hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--d3v-text-tertiary, #9ca3af);
    text-transform: none;
    letter-spacing: normal;
}

/* ---- Row: label (fixed width) + control (flex) ---- */

.wf-save-modal-form .wf-save-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

.wf-save-modal-form .wf-save-row--top {
    align-items: flex-start;
}

.wf-save-modal-form .wf-save-row--top .wf-save-row__label {
    padding-top: 8px;
}

.wf-save-modal-form .wf-save-row--toggle {
    min-height: 30px;
}

.wf-save-modal-form .wf-save-row--hidden {
    display: none;
}

.wf-save-modal-form .wf-save-row__label {
    flex: 0 0 var(--wf-save-label-w);
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1f2937);
    line-height: 1.4;
}

.wf-save-modal-form .wf-save-row__label .fa-info-circle {
    margin-left: 4px;
    color: var(--d3v-text-tertiary, #9ca3af);
    font-size: 12px;
    cursor: help;
    transition: color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-save-row__label .fa-info-circle:hover {
    color: var(--d3v-accent-primary, #2563eb);
}

.wf-save-modal-form .wf-save-row__label--sub {
    padding-left: 18px;
    font-weight: 400;
    color: var(--d3v-text-secondary, #6b7280);
}

.wf-save-modal-form .wf-save-row__label--sub small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
}

.wf-save-modal-form .wf-save-row__control {
    flex: 1 1 auto;
    min-width: 0;
}

.wf-save-modal-form .wf-save-row__control--with-hint {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Inputs ---- */

.wf-save-modal-form .form-control {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border-primary, #d1d5db);
    background: var(--d3v-bg-primary, #fff);
    box-shadow: none;
    transition: border-color var(--d3v-t-fast, 120ms) ease, box-shadow var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .form-control:hover {
    border-color: var(--d3v-border-strong, #9ca3af);
}

.wf-save-modal-form .form-control:focus {
    border-color: var(--d3v-accent-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--d3v-accent-primary-soft, rgba(37, 99, 235, 0.16));
    outline: none;
}

.wf-save-modal-form textarea.form-control {
    height: auto;
    min-height: 64px;
    max-height: 200px;
    resize: vertical;
}

/* Password input group polish */

.wf-save-modal-form .wf-save-pw-input-group {
    width: 100%;
    display: flex;
}

.wf-save-modal-form .wf-save-pw-input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.wf-save-modal-form .wf-save-pw-input-group .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    padding: 0;
    cursor: pointer;
    background: var(--d3v-bg-secondary, #f9fafb);
    border: 1px solid var(--d3v-border-primary, #d1d5db);
    border-left: none;
    color: var(--d3v-text-secondary, #6b7280);
    transition: background var(--d3v-t-fast, 120ms) ease, color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-save-pw-input-group .input-group-addon + .input-group-addon {
    border-left: none;
}

.wf-save-modal-form .wf-save-pw-input-group .input-group-addon:last-child {
    border-top-right-radius: var(--d3v-r-md, 6px);
    border-bottom-right-radius: var(--d3v-r-md, 6px);
}

.wf-save-modal-form .wf-save-pw-input-group .input-group-addon:hover {
    background: var(--d3v-bg-tertiary, #f3f4f6);
    color: var(--d3v-text-primary, #1f2937);
}

.wf-save-modal-form .wf-save-pw-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--d3v-status-info-text, #1e40af);
    background: var(--d3v-status-info-bg, #eff6ff);
    border: 1px solid var(--d3v-status-info-border, #bfdbfe);
    border-radius: var(--d3v-r-md, 6px);
}

.wf-save-modal-form .wf-save-pw-info .fa-lock {
    color: var(--d3v-accent-primary, #2563eb);
}

/* ---- Branch Export Options ---- */

.wf-save-modal-form .wf-be-options-panel .wf-be-disabled-hint {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
}

/** Rich Unit Systems summary — system-pair pill, count badge, input chips with quantity badges.
 *  Designed to read at a glance without crowding: chips wrap onto a second line when needed
 *  rather than competing with the Configure button for a single-line slot. **/
.wf-save-modal-form .wf-be-options-panel .wf-save-row__control--us {
    flex-wrap: wrap;
    row-gap: 6px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-unit-systems-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
    min-width: 0;
}

/* Empty state — muted single-line hint. */
.wf-save-modal-form .wf-be-options-panel .wf-be-us-empty {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: italic;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-empty .fa {
    font-size: 10px;
    opacity: 0.6;
}

/* System-pair pill (e.g. "MKS → CGS"). */
.wf-save-modal-form .wf-be-options-panel .wf-be-us-system {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: var(--d3v-accent-subtle-bg, #eff6ff);
    color: var(--d3v-accent-primary, #2563eb);
    border: 1px solid var(--d3v-accent-subtle-border, #dbeafe);
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-system .fa {
    font-size: 10px;
    opacity: 0.85;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-system__arrow {
    margin: 0 1px;
    font-size: 9px !important;
    opacity: 0.7 !important;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-system__from,
.wf-save-modal-form .wf-be-options-panel .wf-be-us-system__to {
    font-family: var(--d3v-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* Compact count badge. */
.wf-save-modal-form .wf-be-options-panel .wf-be-us-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--d3v-bg-tertiary, #f3f4f6);
    color: var(--d3v-text-secondary, #6b7280);
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Input chip — input name on the left, quantity badge on the right. */
.wf-save-modal-form .wf-be-options-panel .wf-be-us-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 220px;
    padding: 3px 4px 3px 8px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-secondary, #e5e7eb);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-xs, 0 1px 1px rgba(0, 0, 0, 0.03));
    font-size: 11px;
    line-height: 1.3;
    color: var(--d3v-text-primary, #1f2937);
    transition: border-color var(--d3v-t-fast, 120ms) ease, box-shadow var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-chip:hover {
    border-color: var(--d3v-border-strong, #9ca3af);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-chip__input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 500;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-chip__quantity {
    flex-shrink: 0;
    padding: 1px 6px;
    background: var(--d3v-accent-subtle-bg, #eff6ff);
    color: var(--d3v-accent-primary, #2563eb);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "+N more" overflow pill — muted to defer to the visible chips. */
.wf-save-modal-form .wf-be-options-panel .wf-be-us-more {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--d3v-bg-tertiary, #f3f4f6);
    color: var(--d3v-text-secondary, #6b7280);
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 10px;
    font-weight: 600;
    cursor: default;
    transition: background var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-us-more:hover {
    background: var(--d3v-border-secondary, #e5e7eb);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-unit-systems {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--d3v-r-md, 6px);
    transition: background var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-unit-systems:hover {
    background: var(--d3v-bg-tertiary, #f3f4f6);
    border-color: var(--d3v-border-strong, #9ca3af);
}

/* Picker visibility — class-toggled by SaveView.onPromoteForUserToggle */
.wf-save-modal-form .wf-be-options-panel .wf-be-promote-picker {
    display: none;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-promote-picker.is-visible {
    display: flex;
}

/** Added by shashank2104 on 5/9/26 - DW-2916 - Revert-to-source toggle is hidden until the workflow
 *  has at least one unitSystemItems entry. SaveView._refreshBranchUnitSystemsSummary toggles
 *  .is-visible based on the live count (covers user-driven additions via the Configure sidebar). */
.wf-save-modal-form .wf-be-options-panel .unit-systems-revert-to-source-row {
    display: none;
}

.wf-save-modal-form .wf-be-options-panel .unit-systems-revert-to-source-row.is-visible {
    display: flex;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Configure button next to the branch-dependent toggle.
 *  Modern accent style that reads as a secondary action — flat default, primary accent on hover/active. */
.wf-save-modal-form .wf-be-options-panel .wf-be-configure-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--d3v-t-fast, 120ms) ease;
    cursor: pointer;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-toggle.is-active {
    color: var(--d3v-accent-primary, #2563eb);
    background: var(--d3v-accent-primary-soft, rgba(37, 99, 235, 0.1));
    border-color: var(--d3v-accent-primary, #2563eb);
    box-shadow: inset 0 1px 2px rgba(37, 99, 235, 0.08);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-toggle .fa {
    font-size: 11px;
}

/** Configure panel — hidden until the toggle button is clicked. Two-column gap stack of "blocks". */
.wf-save-modal-form .wf-be-options-panel .wf-be-configure-panel {
    display: none;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-panel.is-visible {
    display: flex;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-panel__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--d3v-border-secondary, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f9fafb);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-secondary, #e5e7eb);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    transition: box-shadow var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block:hover {
    border-color: var(--d3v-border-strong, #9ca3af);
    box-shadow: var(--d3v-sh-md, 0 2px 4px rgba(0, 0, 0, 0.06));
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__header .fa {
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 13px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__title {
    flex: 1;
    min-width: 0;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__count {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #6b7280);
    background: var(--d3v-bg-tertiary, #f3f4f6);
    border-radius: var(--d3v-r-pill, 999px);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__hint {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
    line-height: 1.5;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block__control {
    margin-top: 4px;
}

/** Carry-over preview warning — surfaces which references break when a preselected input is dropped. */
.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning {
    display: none;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning.is-visible {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--d3v-status-warning-border, #fde68a);
    background: var(--d3v-status-warning-bg, #fffbeb);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-status-warning-text, #92400e);
    font-size: 12px;
    line-height: 1.5;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__header .fa {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--d3v-status-warning-icon, #d97706);
    font-size: 13px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__list {
    margin: 8px 0 0 0;
    padding: 6px 0 0 24px;
    list-style: none;
    border-top: 1px dashed var(--d3v-status-warning-border, #fde68a);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__list li {
    padding: 3px 0;
    font-size: 11px;
    line-height: 1.5;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__from {
    font-weight: 500;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__arrow {
    margin: 0 4px;
    opacity: 0.7;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__to {
    font-style: italic;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning__more {
    margin-top: 2px;
    font-style: italic;
    opacity: 0.8;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Worker id pill inside the warning rows.
 *  Reuses the standard `wf-id-label worker` styling but compacts spacing for the inline context. **/
.wf-save-modal-form .wf-be-options-panel .wf-be-preview-warning .wf-id-label {
    margin: 0 2px;
    font-size: 10px;
    padding: 1px 5px;
    vertical-align: middle;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Per-branch fork-affected warning slot sits inline
 *  under each checkbox row, indented to align with the branch label so the cause-and-effect
 *  reads top-down. Tight padding + smaller font than the carry-over warning since it sits inside
 *  a busy list (one per branch row). **/
.wf-save-modal-form .wf-be-options-panel .wf-be-fork-branch-warning.is-visible {
    margin: 4px 0 6px 38px;
    padding: 8px 10px;
    font-size: 11px;
}

/** "Safe to drop" state — green confirmation pill instead of yellow warning. */
.wf-save-modal-form .wf-be-options-panel .wf-be-fork-branch-warning.is-visible.is-ok {
    border-color: var(--d3v-status-success-border, #bbf7d0);
    background: var(--d3v-status-success-bg, #f0fdf4);
    color: var(--d3v-status-success-text, #166534);
    padding: 6px 10px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-branch-warning .wf-be-preview-warning__header--ok .fa {
    color: var(--d3v-status-success-icon, #16a34a);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block--empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--d3v-status-success-text, #166534);
    background: var(--d3v-status-success-bg, #f0fdf4);
    border: 1px solid var(--d3v-status-success-border, #bbf7d0);
    border-radius: var(--d3v-r-md, 6px);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-configure-block--empty .fa {
    color: var(--d3v-status-success-icon, #16a34a);
    font-size: 13px;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Provider title row visibility — class-toggled by SaveView.onReplaceProviderToggle **/
.wf-save-modal-form .wf-be-options-panel .wf-be-provider-title-row {
    display: none;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-provider-title-row.is-visible {
    display: flex;
}

/* Decision-fork list */

.wf-save-modal-form .wf-be-options-panel .wf-be-decision-fork-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 280px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--d3v-border-secondary, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f9fafb);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-decision-fork-list::-webkit-scrollbar {
    width: 8px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-decision-fork-list::-webkit-scrollbar-thumb {
    background: var(--d3v-border-primary, #d1d5db);
    border-radius: 4px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-secondary, #e5e7eb);
    border-radius: var(--d3v-r-sm, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    transition: box-shadow var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork:hover {
    border-color: var(--d3v-border-strong, #9ca3af);
    box-shadow: var(--d3v-sh-md, 0 2px 4px rgba(0, 0, 0, 0.06));
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-title .fa {
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 14px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-title__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-id {
    flex-shrink: 0;
    font-weight: 400;
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
    font-family: var(--d3v-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-branches {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 22px;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Wrap that puts the row label and the navigate button on the same line **/
.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--d3v-r-sm, 6px);
    transition: background var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row-wrap:hover {
    background: var(--d3v-bg-tertiary, #f3f4f6);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row-wrap:has(input:not(:checked)) {
    opacity: 0.55;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 8px;
    font-weight: normal;
    border-radius: var(--d3v-r-sm, 6px);
    cursor: pointer;
    transition: opacity var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row:hover {
    background: transparent;
}

/** Added by shashank2104 on 5/8/26 - DW-2916 - Tiny launcher button next to each fork row to navigate to the sub-branch on canvas **/
.wf-save-modal-form .wf-be-options-panel .wf-be-fork-navigate {
    flex-shrink: 0;
    padding: 4px 8px;
    color: var(--d3v-accent-primary, #2563eb);
    border-radius: var(--d3v-r-sm, 6px);
    transition: background var(--d3v-t-fast, 120ms) ease, color var(--d3v-t-fast, 120ms) ease;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-navigate:hover {
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-accent-primary-strong, #1d4ed8);
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-edge {
    margin: 0;
    flex-shrink: 0;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-edge:focus-visible {
    outline: 2px solid var(--d3v-accent-primary, #2563eb);
    outline-offset: 1px;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row__edge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    white-space: normal;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row__target {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--d3v-text-primary, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-save-modal-form .wf-be-options-panel .wf-be-fork-row__count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--d3v-text-tertiary, #9ca3af);
}

/* ---- Responsive: stack label + control on narrow viewports ---- */

@media (max-width: 640px) {
    .wf-save-modal-form .wf-save-row,
    .wf-save-modal-form .wf-save-row--top {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .wf-save-modal-form .wf-save-row__label {
        flex-basis: auto;
        padding-top: 0;
    }
}

/*
 * CSS for template: wf-selection-from-dataset-cell.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-selection-from-dataset-cell.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal span.wf-selection-from-dataset {
display: flex;
    align-items: center;
}

div.workflow-modal span.wf-selection-from-dataset .choose_based_on_selection_options {
margin-left: 6px;
}

div.workflow-modal span.wf-selection-from-dataset {
display: flex;
    align-items: center;
}

div.workflow-modal span.wf-selection-from-dataset .choose_based_on_selection_options {
margin-left: 6px;
}



/*
 * CSS for template: wf-temp-worker-config.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-temp-worker-config.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-temp-config-modal .modal-body li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: none;
}

div#wf-temp-config-modal .modal-body li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: none;
}

div#wf-temp-config-modal .modal-body li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: none;
}



/*
 * CSS for template: wf-worker-bc-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-bc-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-navigation-split-layout .breadcrumb-item {
display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s ease;
}

.wf-navigation-split-layout .breadcrumb-item:hover {
border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}



/*
 * CSS for template: wf-worker-configuration-options-tab-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-configuration-options-tab-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal #wf-worker-configuration a.toggle-worker-info-group {
padding: 7px 12px;
    display: block;
    font-size: 110%;
    margin: 5px;
    color: #333;
    font-weight: 500;
}

div.workflow-modal #wf-worker-configuration .worker-info-group-container>.row,
div.workflow-modal #wf-worker-configuration .worker-info-group-container .polling-options>.row,
div.workflow-modal #wf-worker-configuration .worker-info-group-container .user-inspection-options>.row {
margin-left: 10px !important;
}



/*
 * CSS for template: wf-worker-configuration-options-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-configuration-options-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal #wf-worker-configuration .options-tv-container a.toggle-worker-info-group {
display: none;
}

div.workflow-modal #wf-worker-configuration .options-tv-container li.tree-list-item .option-list {
display: none;
}



/*
 * CSS for template: wf-worker-edit-modal-header-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-edit-modal-header-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-tooltip-modal .modal-header .modal-title {
width: calc(100% - 70px);
}

.wf-error-modal .wf-tooltip-modal .modal-header {
display: flex;
    justify-content: space-out;
}

.wf-tooltip-modal .modal-header .modal-title {
display: flex;
    align-items: center;
}



/*
 * CSS for template: wf-worker-info-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-info-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.popover.wf-worker-info-popover {
position: fixed;
    top: 0 !important;
    height: 100%;
    max-width: unset;
    margin-left: 10px;
}

div.popover.wf-worker-info-popover .popover-content {
height: calc(100% - 60px);
    overflow: auto;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax {
font-size: 2em;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax [data-id] {
cursor: help;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax [data-id].highlighted {
color: steelblue;
}

div.popover.wf-worker-info-popover .popover-content .table [data-id].highlighted {
font-weight: bold;
}

div.popover.wf-worker-info-popover {
position: fixed;
    top: 0 !important;
    height: 100%;
    max-width: unset;
    margin-left: 10px;
}

div.popover.wf-worker-info-popover .popover-content {
height: calc(100% - 60px);
    overflow: auto;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax {
font-size: 2em;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax [data-id] {
cursor: help;
}

div.popover.wf-worker-info-popover .popover-content .worker-syntax [data-id].highlighted {
color: steelblue;
}

div.popover.wf-worker-info-popover .popover-content .table [data-id].highlighted {
font-weight: bold;
}

div.workflow .wf-worker-info-top {
position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: #FFF;
    border: none;
    border-radius: 0;
    box-shadow: var(--plugin-box-shadow-lighter);
    padding: 0;
    min-width: auto;
    max-width: none;
    /* backdrop-filter: none; */
    pointer-events: auto;
}

div.workflow .wf-worker-info-left {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    max-width: none;
    backdrop-filter: none;
}

div.workflow .wf-worker-info-right {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    max-width: none;
    backdrop-filter: none;
}

div.workflow .wf-worker-info-left .wf-info-header {
position: absolute;
    top: 10px;
    left: 0;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-lighter);
}

div.workflow .wf-worker-info-right .wf-info-header {
position: absolute;
    top: 10px;
    right: 0;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-lighter);
}

div.workflow .wf-worker-info-left .wf-info-item {
background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: unset;
    ;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

div.workflow .wf-worker-info-left .wf-info-item:hover {
background: #e8f5e8;
    border-color: #4caf50;
    transform: scale(1.05);
}

div.workflow .wf-worker-info-right .wf-info-item {
background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

div.workflow .wf-worker-info-right .wf-info-item:hover {
background: #e3f2fd;
    border-color: #2196f3;
    transform: scale(1.05);
}

div.workflow .wf-worker-info-top .wf-info-content {
text-align: center;
}

div.workflow .wf-worker-info-top .wf-info-item {
background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    padding: 10px 15px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.workflow .wf-worker-info-top .wf-info-item:hover {
transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #e9ecef;
}

div.workflow .wf-worker-info-container .wf-worker-info-top {
max-width: 80vw;
    max-height: unset;
}

div.workflow .wf-worker-info-container .wf-worker-info-top .wf-info-content {
max-width: 100%;
    overflow: hidden;
}



/*
 * CSS for template: wf-worker-iteration-outputs-container-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-iteration-outputs-container-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer {
background: #CCC !important;
}

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer-south {
cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item:hover {
background-color: #EEE;
}

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer {
background: #CCC !important;
}

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer-south {
cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item:hover {
background-color: #EEE;
}

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer {
background: #CCC !important;
}

div#wf-execute-workflow-node-modal .outputs-container .ui-layout-resizer-south {
cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item:hover {
background-color: #EEE;
}



/*
 * CSS for template: wf-worker-iteration-view-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-iteration-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder .carousel-header,
div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder .carousel-footer {
display: none;
}

div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder ul.field-items {
height: auto !important;
}

div.workflow-modal .wf-worker-iteration-view .iterations-table li.field-item {
border: none;
}

div.workflow-modal .wf-worker-iteration-view .ht-table {
/*overflow: hidden!important;*/
    overflow: auto !important;
    min-height: 80px;
}

div.workflow-modal .wf-worker-iteration-view .ht-table .wtHolder {
height: auto !important;
}

div.workflow-modal.hasBreadCrumbs .wf-worker-config-view,
div.workflow-modal.hasBreadCrumbs .wf-worker-iteration-view {
height: calc(100% - 57px);
}

div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder .carousel-header,
div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder .carousel-footer {
display: none;
}

div.workflow-modal .wf-worker-iteration-view .d3view-inputsBuilder ul.field-items {
height: auto !important;
}

div.workflow-modal .wf-worker-iteration-view .ht-table {
/*overflow: hidden!important;*/
    overflow: auto !important;
    min-height: 80px;
}

div.workflow-modal .wf-worker-iteration-view .ht-table .wtHolder {
height: auto !important;
}

div.workflow-modal.hasBreadCrumbs .wf-worker-config-view,
div.workflow-modal.hasBreadCrumbs .wf-worker-iteration-view {
height: calc(100% - 57px);
}



/*
 * CSS for template: wf-worker-title-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-title-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal[data-autoplay='true'] .wf-tabs,
div.workflow-modal[data-autoplay='true'] ul.pagination,
div.workflow-modal[data-autoplay="true"] .name-container,
div.workflow-modal[data-autoplay="true"] .group-name,
div.workflow-modal[data-autoplay='true'] .wf-worker-title .worker-desc {
display: none !important;
}

div.workflow-modal[data-autoplay='true'] .wf-tabs,
div.workflow-modal[data-autoplay='true'] ul.pagination,
div.workflow-modal[data-autoplay="true"] .name-container,
div.workflow-modal[data-autoplay="true"] .group-name,
div.workflow-modal[data-autoplay='true'] .wf-worker-title .worker-desc {
display: none !important;
}



/*
 * CSS for template: wf-worker-viz-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-worker-viz-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .worker-visualizations .worker-viz {
margin: 10px;
    /*width: calc(50% - 20px);*/
    height: 600px;
    border: 1px solid #DDD;
    /*flex: 1 0 50%;*/
}

div.workflow-modal .worker-visualizations .worker-viz {
margin: 10px;
    /*width: calc(50% - 20px);*/
    height: 600px;
    border: 1px solid #DDD;
    /*flex: 1 0 50%;*/
}



/*
 * CSS for template: wf-workers-list-io-tpl.tpl
 * Source: javascripts/templates/modular/builder/partials/wf-workers-list-io-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-iterations-viewer .op-ds div.io-item {
margin-left: 20px;
}

div.wf-iterations-viewer .op-ds {
counter-reset: section;
}

div.wf-iterations-viewer .op-ds div.io-item:before {
counter-increment: section;
    content: counter(section) ".";
    position: absolute;
    left: -20px;
    top: 10px;
}


/*
 * Special CSS rules not matched to specific templates
 * Category: builder
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

div.wf-carousel div.d3view-inputsBuilder {
border: none;
}

div.wf-temp-canvas {
position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
}

.wf-canvas-tooltip.worker-error {
padding: 0;
}

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

div.wf-carousel div.d3view-inputsBuilder {
border: none;
}

div.wf-temp-canvas {
position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
}

.wf-canvas-tooltip.worker-error {
padding: 0;
}



/*
 * CSS for template: wf-worker-input-validation-operator-value-tpl.tpl
 * Source: javascripts/templates/modular/builder/validation/wf-worker-input-validation-operator-value-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .validations-list .operator-value .twitter-typeahead {
width: 100%;
}

div.workflow-modal .validations-list .operator-value .twitter-typeahead {
width: 100%;
}



/*
 * CSS for template: wf-worker-input-validations.tpl
 * Source: javascripts/templates/modular/builder/validation/wf-worker-input-validations.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .edit_options li.field-item .input-validations {
display: none;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
}

div#wf-execute-workflow-node-modal .edit_options li.field-item .input-validations {
display: none;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
}

div#wf-execute-workflow-node-modal .edit_options li.field-item .input-validations {
display: none;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
}



/*
 * CSS for template: wf-worker-ip-validations-tpl.tpl
 * Source: javascripts/templates/modular/builder/validation/wf-worker-ip-validations-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal.worker-ip .row:not(.row-default) {
padding: 12px 0;
    font-size: unset;
}



/*
 * CSS for template: wf-basic-view-tpl.tpl
 * Source: javascripts/templates/modular/builder/views/wf-basic-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .workflow-index[data-view="basic"] .basic-view div.d3view-inputsBuilder li.field-item .input-value-container {
padding: 0;
}

div.workflow .workflow-index[data-view="basic"] .basic-view div.d3view-inputsBuilder li.field-item .input-value-container>.input-group>.input-group-addon:first-child {
display: none;
}

div.workflow .workflow-index .basic-view[data-view="full"] .basic-view-buttons {
display: block;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .formbuilder-container .simple-inputs-list ul.field-items {
height: 100% !important;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .wf-worker-inputs-outputs div.d3view-inputsBuilder .inputs-builder-container {
padding: 0;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .wf-worker-inputs-outputs div.d3view-inputsBuilder .simple-inputs-list {
padding: 10px;
}

div.workflow .workflow-index[data-view="basic"] .basic-view div.d3view-inputsBuilder li.field-item .input-value-container {
padding: 0;
}

div.workflow .workflow-index[data-view="basic"] .basic-view div.d3view-inputsBuilder li.field-item .input-value-container>.input-group>.input-group-addon:first-child {
display: none;
}

div.workflow .workflow-index .basic-view[data-view="full"] .basic-view-buttons {
display: block;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .formbuilder-container .simple-inputs-list ul.field-items {
height: 100% !important;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .wf-worker-inputs-outputs div.d3view-inputsBuilder .inputs-builder-container {
padding: 0;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view .wf-worker-inputs-outputs div.d3view-inputsBuilder .simple-inputs-list {
padding: 10px;
}



/*
 * CSS for template: wf-io-view-tpl.tpl
 * Source: javascripts/templates/modular/builder/views/wf-io-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-io .custom-output-builder .outputs-container>.row {
padding: 10px 0 !important;
}

div#wf-io .custom-output-builder .outputs-container>.row {
padding: 10px 0 !important;
}


/* WorkflowBuilderAIView | Phase 6.2 — chat-first AI Workflow UI shell */

.wfb-ai-shell {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Phase 13.b — landing shell needs more breathing room since it now
   shows the conversation list AND the new-conversation entry-points
   side-by-side. Other shell variants (setup, picker, chat) keep the
   narrower 960px width. */
.wfb-ai-shell--landing {
    max-width: 1280px;
}

.wfb-ai-landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.wfb-ai-landing-col {
    min-width: 0; /* lets the left col actually shrink so its scroll works */
}

.wfb-ai-landing-col--right {
    /* Sticky stays in place while the conversation list scrolls
       independently in its own region. */
    position: sticky;
    top: 24px;
}

.wfb-ai-landing-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wfb-ai-landing-col-title .fa {
    color: #2c5282;
    font-size: 14px;
}

/* Right-column cards stack vertically. The existing .wfb-ai-setup-cards
   already does flex-direction: column with gap, so it just works inside
   the column at its native shape. */

/* Responsive: collapse to single column under ~860px (the right-col
   width + a comfortable left-col minimum). */
@media (max-width: 860px) {
    .wfb-ai-landing-grid {
        grid-template-columns: 1fr;
    }
    .wfb-ai-landing-col--right {
        position: static;
    }
}

/* Header — title + New Conversation CTA */
.wfb-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 18px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.wfb-ai-header-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wfb-ai-header-title .fa-wand-magic-sparkles {
    color: #2c5282;
    font-size: 22px;
}

.wfb-ai-new-conversation {
    font-weight: 600;
}

.wfb-ai-new-conversation .fa-plus {
    margin-right: 4px;
}

/* List region — Phase 13.b bento style: light-grey filled box at a
   fixed height. Conversation cards (white) sit inside this grey
   container, so a long list scrolls within the bento. */
.wfb-ai-list-region {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 480px;
    background: #f5f6f8;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    overflow: hidden;
}

.wfb-ai-list-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid #e6e8eb;
    background: transparent; /* let the bento's grey show through */
    flex-shrink: 0;
}

.wfb-ai-list-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ad;
    font-size: 13px;
    pointer-events: none;
}

.wfb-ai-list-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-list-search-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
}

.wfb-ai-list-empty-search {
    padding: 24px 12px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.wfb-ai-list-empty-search .fa {
    margin-right: 6px;
    color: #aaa;
}

/* Conversation list */
.wfb-ai-conversation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-conversation-item {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover-only action buttons (Phase 13.a). Container holds the delete
   icon (and later the star + rename pencil). Hidden until the card is
   hovered so cards stay clean at rest. */
.wfb-ai-conversation-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.wfb-ai-conversation-item:hover .wfb-ai-conversation-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Phase 13.a — while a star/unstar reorder animation is in flight,
   FLIP transforms put cards at positions that don't match their layout.
   Clicking through that window hits the wrong card's star. Block all
   action-button clicks across the list until the animation settles. */
.wfb-ai-conversation-list--reordering .wfb-ai-conversation-actions,
.wfb-ai-conversation-list--reordering .wfb-ai-conversation-actions * {
    pointer-events: none !important;
}

/* Top-right slot now holds [delete, star]. The container itself is
   hover-only (same as before). Special case: when a card is starred,
   the star icon stays visible at rest (it's both the state indicator
   AND the unstar trigger), but the delete button stays hover-only —
   we don't want delete fading in just because the card was starred. */
.wfb-ai-conversation-actions--top {
    top: 8px;
    bottom: auto;
}

.wfb-ai-conversation-item--starred .wfb-ai-conversation-actions--top {
    opacity: 1;
    pointer-events: auto;
}

/* Within a starred card, dim the delete button until hover. */
.wfb-ai-conversation-item--starred:not(:hover) .wfb-ai-card-btn--delete {
    opacity: 0;
    pointer-events: none;
}

.wfb-ai-card-btn--star.is-starred {
    color: #f5a623;
}

.wfb-ai-card-btn--star.is-starred:hover {
    background: #fff8e6;
    border-color: #f7d590;
    color: #d97706;
}

.wfb-ai-card-btn--star:hover {
    background: #fffaf0;
    border-color: #f7d590;
    color: #d97706;
}

.wfb-ai-card-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-card-btn:hover {
    background: #fff;
    border-color: #d6dbe0;
    color: #333;
}

.wfb-ai-card-btn--delete:hover {
    background: #fff5f5;
    border-color: #fbb;
    color: #c53030;
}

.wfb-ai-conversation-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-conversation-name {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    padding-right: 72px; /* leave room for the top-right [delete, star] buttons */
}

.wfb-ai-conversation-name-text {
    flex: 0 1 auto;
    min-width: 0;
}

/* Inline rename pencil — sits just to the right of the name. Hover-only;
   smaller than the corner cluster buttons so it reads as a name-row
   affordance, not part of the top-right action group. */
.wfb-ai-card-btn--rename {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 11px;
    align-self: center;
    opacity: 0;
    pointer-events: none;
}

.wfb-ai-conversation-item:hover .wfb-ai-card-btn--rename {
    opacity: 1;
    pointer-events: auto;
}

.wfb-ai-card-btn--rename:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    color: #2c5282;
}

.wfb-ai-conversation-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #888;
}

.wfb-ai-conversation-workflow .fa,
.wfb-ai-conversation-time .fa {
    color: #999;
    margin-right: 4px;
}

.wfb-ai-conversation-workflow {
    color: #555;
}

.wfb-ai-conversation-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-conversation-stale {
    color: #856404;
}

.wfb-ai-conversation-stale .fa {
    color: #d46b08;
    margin-right: 4px;
}

.wfb-ai-conversation-item--stale {
    background: #fff7e6;
    border-color: #ffe7ba;
}

.wfb-ai-conversation-item--stale:hover {
    background: #fff1d6;
    border-color: #ffd591;
}

/* Empty state */
.wfb-ai-empty-state {
    text-align: center;
    padding: 64px 16px;
    color: #555;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    background: #fafbfc;
}

.wfb-ai-empty-icon {
    font-size: 48px;
    color: #c6d9ec;
    margin-bottom: 16px;
}

.wfb-ai-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.wfb-ai-empty-state p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.wfb-ai-empty-state strong {
    color: #2c5282;
    font-weight: 600;
}

/* Loading + error states */
.wfb-ai-loading {
    text-align: center;
    padding: 48px 16px;
    color: #888;
    font-size: 13px;
}

.wfb-ai-loading .fa-spin {
    margin-right: 8px;
    color: #999;
}

.wfb-ai-error {
    margin: 24px auto;
    max-width: 640px;
}

.wfb-ai-error .fa {
    margin-right: 6px;
}

/* ====================================================================
   Phase 6.3 — setup chooser, pickers, existing-conversations modal
   ==================================================================== */

/* Header back button + spacer keep the title centered when a back
   button is present on non-list views. */
.wfb-ai-header .wfb-ai-back {
    flex: 0 0 auto;
}

.wfb-ai-header .wfb-ai-header-spacer {
    /* Mirrors the back-button width so the centered title stays
       centered. ~80px matches "← Back" in default Bootstrap sizing. */
    flex: 0 0 80px;
    display: inline-block;
}

/* When a back button is rendered, the title sits between back and
   spacer — keep it centered + bring its margin in. */
.wfb-ai-header .wfb-ai-back + .wfb-ai-header-title {
    flex: 1 1 auto;
    justify-content: center;
}


/* ----- Setup chooser ----- */

.wfb-ai-setup-lead {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: 720px;
    text-align: center;
}

.wfb-ai-setup-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wfb-ai-setup-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 18px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.wfb-ai-setup-card:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-setup-card:active {
    transform: translateY(1px);
}

.wfb-ai-setup-card-icon {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.wfb-ai-setup-card-icon--saved {
    background: #e0ecf8;
    color: #2c5282;
}

.wfb-ai-setup-card-icon--library {
    background: #e8daef;
    color: #6c3483;
}

.wfb-ai-setup-card-icon--empty {
    background: #d4edda;
    color: #155724;
}

.wfb-ai-setup-card-body {
    flex: 1 1 0;
    min-width: 0;
}

.wfb-ai-setup-card-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-setup-card-body p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}

.wfb-ai-setup-card-cta {
    font-size: 12px;
    font-weight: 600;
    color: #2c5282;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wfb-ai-setup-card-cta .fa {
    margin-left: 4px;
}


/* ----- Pickers (saved + library, shared template) ----- */

.wfb-ai-picker-search {
    position: relative;
    margin-bottom: 16px;
}

.wfb-ai-picker-search .fa-search {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 13px;
}

.wfb-ai-picker-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-picker-search-input:focus {
    outline: none;
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-picker-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-picker-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-picker-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wfb-ai-picker-item-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Phase 13.b — picker-item footer: workflow id + created + updated.
   Compact uppercase-style stat row, divides cleanly from the name +
   subtitle above with a hairline border so it reads as metadata. */
.wfb-ai-picker-item-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eef0f3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: #888;
}

.wfb-ai-picker-item-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.wfb-ai-picker-item-stat .fa {
    color: #aaa;
    font-size: 10px;
}

.wfb-ai-picker-item-stat--id strong {
    color: #333;
    font-weight: 700;
    font-size: 12px;
}


/* ----- Existing-conversations confirmation modal ----- */

.wfb-ai-existing-convos {
    padding: 4px 4px 0;
}

.wfb-ai-existing-convos-lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}

.wfb-ai-existing-convos-lead strong {
    color: #333;
}

.wfb-ai-existing-convos-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    max-height: 320px;
    overflow-y: auto;
}

.wfb-ai-existing-convos-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-existing-convos-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.wfb-ai-existing-convos-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-existing-convos-item-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.wfb-ai-existing-convos-item-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: #999;
}

.wfb-ai-existing-convos-item-meta .fa {
    margin-right: 4px;
}

.wfb-ai-existing-convos-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}


/* ====================================================================
   Modern button — replaces Bootstrap's btn-default / btn-primary on
   AI Workflow Builder surfaces. Two variants:
     wfb-ai-btn--primary  : filled, brand-blue, used for the New
                            Conversation CTA + "Start anyway" modal
                            action.
     wfb-ai-btn--ghost    : low-emphasis outline, used for the Back
                            buttons on the setup + picker views.
   ==================================================================== */

.wfb-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.1s ease;
    outline: none;
}

.wfb-ai-btn:focus { outline: none; }

.wfb-ai-btn .fa {
    font-size: 12px;
}

.wfb-ai-btn--primary {
    background: #2c5282;
    color: #fff;
    border-color: #2c5282;
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18);
}

.wfb-ai-btn--primary:hover,
.wfb-ai-btn--primary:focus {
    background: #234668;
    border-color: #234668;
    color: #fff;
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.28);
    transform: translateY(-1px);
}

.wfb-ai-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18);
}

.wfb-ai-btn--ghost {
    background: transparent;
    color: #555;
    border-color: #e0e0e0;
}

.wfb-ai-btn--ghost:hover,
.wfb-ai-btn--ghost:focus {
    background: #f0f0f0;
    color: #2c5282;
    border-color: #c6d9ec;
}

.wfb-ai-btn--ghost:active {
    background: #e8e8e8;
}


/* ====================================================================
   Picker skeleton loading — shimmer rows replace the centered spinner
   so the layout stays stable while data is being fetched. Per the
   frontend-style guide: #e9ecef background + a horizontally-sweeping
   white linear-gradient. The shimmer is a separate ::after layer on
   each skeleton-line so multiple lines stay in phase across a row.
   ==================================================================== */

.wfb-ai-picker-list--skeleton {
    list-style: none;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.wfb-ai-picker-item--skeleton {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: #fff;
}

.wfb-ai-skeleton-line {
    position: relative;
    overflow: hidden;
    background: #e9ecef;
    border-radius: 4px;
    height: 12px;
}

.wfb-ai-skeleton-line + .wfb-ai-skeleton-line {
    margin-top: 8px;
}

.wfb-ai-skeleton-line--name {
    width: 55%;
    height: 14px;
}

.wfb-ai-skeleton-line--meta {
    width: 35%;
    height: 10px;
}

.wfb-ai-skeleton-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent
    );
    transform: translateX(-100%);
    animation: wfb-ai-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes wfb-ai-skeleton-shimmer {
    100% { transform: translateX(100%); }
}


/* ====================================================================
   Phase 6.4 — chat surface (full-width shell, push-not-overlay sidebar)

   Layout:
     .wfb-ai-shell--chat        full viewport width, flex column
       .wfb-ai-chat-header      full-width top bar; back/hamburger anchor
                                at the absolute top-left of the screen
       .wfb-ai-chat-body        flex row that fills the remaining height
         .wfb-ai-chat-sidebar   width animates 0 ↔ 320px (push, not overlay)
         .wfb-ai-chat-content   flex 1, contains scrollable messages and
                                the input bar; both have an inner column
                                clamped to ~760px and centered in the
                                remaining content width

   When the sidebar opens it pushes the content right; the content's
   inner column re-centers in the new space so user/agent bubbles stay
   readable instead of slamming against the screen edges.
   ==================================================================== */

.wfb-ai-shell--chat {
    /* Use the full available width — override the default centered shell. */
    max-width: none;
    margin: 0;
    padding: 0;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ----- Header (full-width, anchored top-left)
   The only border line in the chat surface — separates the header from
   the conversation section below. ----- */

.wfb-ai-chat-header {
    flex: 0 0 auto;
    /* Phase 13.b Stage 3 — 3-column grid: left (1fr) | center (auto) |
       right (1fr). Center auto-sizes around its content but the equal
       fr columns on either side keep it optically centered regardless
       of side widths. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    z-index: 10;
}

.wfb-ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    min-width: 0;
}

.wfb-ai-chat-header-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-header-title .fa-sitemap {
    color: #2c5282;
}

.wfb-ai-chat-workflow-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60ch;
}

.wfb-ai-chat-workflow-id {
    color: #999;
    font-weight: 400;
    font-size: 13px;
    margin-left: 4px;
}

.wfb-ai-chat-header-spacer {
    /* Mirrors the combined width of the hamburger + back button on the
       left so the centered title actually centers on the screen. The
       width is approximate (icon-btn 36 + gap 8 + back ~84 = ~128). */
    flex: 0 0 128px;
    display: inline-block;
}


/* ----- Body
   Position-relative host for the absolutely-positioned sidebar. The
   sidebar overlays the content's left margin instead of being a flex
   sibling that pushes the content; the messages/input columns get a
   smart margin-left that only kicks in when the sidebar would actually
   collide with the centered message column on narrow screens. ----- */

.wfb-ai-chat-body {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}


/* ----- Sidebar (overlay-style, slide-in animation)
   Outer width animates 0 ↔ 320px with overflow:hidden. Inner is
   absolutely positioned and anchored to the outer's right edge — so as
   the outer expands, the inner's left edge translates from x=-320px
   (off-screen-left) to x=0 (on-screen). True slide-in feel. ----- */

.wfb-ai-chat-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.22s ease;
    /* Bumped to 100 so the sidebar reliably sits above the embedded
       workflow plugin's content (FORA chat, AgenticView panels). The
       embedded plugin's z-index hierarchy is hard to predict; 100
       puts us above everything except modals. */
    z-index: 100;
    background: #fafbfc;
}

.wfb-ai-shell--sidebar-open .wfb-ai-chat-sidebar {
    width: 320px;
}

/* Slide the chat content right when the sidebar is open so it doesn't
   sit on top of the sidebar. The embedded plugin's white background
   was covering the absolute-positioned sidebar. transition matches the
   sidebar's width transition for a synchronized slide feel. */
.wfb-ai-chat-content {
    transition: padding-left 0.22s ease;
}

.wfb-ai-shell--sidebar-open .wfb-ai-chat-content {
    padding-left: 320px;
}

.wfb-ai-chat-sidebar-inner {
    /* Anchored to the right edge of the outer so the contents slide
       into view as the outer width grows from 0 → 320px. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
}

.wfb-ai-chat-sidebar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 14px 16px;
}

.wfb-ai-chat-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-chat-sidebar-title .fa-wand-magic-sparkles {
    color: #2c5282;
}

.wfb-ai-chat-sidebar-actions {
    flex: 0 0 auto;
    padding: 12px 16px;
}

.wfb-ai-chat-sidebar-actions .wfb-ai-btn--primary {
    width: 100%;
    justify-content: center;
}

.wfb-ai-chat-sidebar-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
}


/* Sidebar list rows */

.wfb-ai-chat-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-chat-sidebar-item {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-chat-sidebar-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-chat-sidebar-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-sidebar-item-preview {
    margin-top: 3px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wfb-ai-chat-sidebar-item-workflow {
    margin-top: 3px;
    font-size: 11px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-sidebar-item-workflow .fa {
    color: #999;
    margin-right: 4px;
}

.wfb-ai-chat-sidebar-item-stale {
    margin-top: 3px;
    font-size: 11px;
    color: #856404;
}

.wfb-ai-chat-sidebar-item-stale .fa {
    color: #d46b08;
    margin-right: 4px;
}

.wfb-ai-chat-sidebar-item--stale {
    background: #fff7e6;
    border-color: #ffe7ba;
}

.wfb-ai-chat-sidebar-item--stale:hover {
    background: #fff1d6;
    border-color: #ffd591;
}

.wfb-ai-chat-sidebar-empty {
    padding: 24px 8px;
    text-align: center;
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

.wfb-ai-chat-sidebar-empty p {
    margin: 0 0 8px;
}

.wfb-ai-chat-sidebar-empty-hint {
    font-size: 12px;
    color: #999;
}


/* ----- Content
   Always full width of the body (sidebar is absolutely-positioned, not
   in flex flow). The messages-column and input-bar-column inside use a
   smart margin-left that auto-centers when there's room and only shifts
   right when the sidebar would actually collide with the column on
   narrow screens. ----- */

.wfb-ai-chat-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.wfb-ai-chat-messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 0;
}

.wfb-ai-chat-messages-column {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* When the sidebar is open, the column's left margin becomes the larger
   of the natural-centered margin or 320px (the sidebar's intrusion). On
   wide viewports the natural margin wins → no shift; on narrow viewports
   the 320px wins → shift just enough to clear the sidebar. The same
   rule applies to the input bar column so they stay aligned. */
.wfb-ai-shell--sidebar-open .wfb-ai-chat-messages-column,
.wfb-ai-shell--sidebar-open .wfb-ai-chat-input-bar-column {
    margin-left: max((100% - 760px) / 2, 320px);
    margin-right: auto;
}

.wfb-ai-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
    animation: wfb-ai-chat-msg-in 0.2s ease both;
}

@keyframes wfb-ai-chat-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wfb-ai-chat-msg--agent {
    align-self: flex-start;
}

.wfb-ai-chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wfb-ai-chat-msg-avatar {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(118, 75, 162, 0.25);
}

.wfb-ai-chat-msg-bubble {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.wfb-ai-chat-msg--agent .wfb-ai-chat-msg-bubble {
    background: #f0f0f0;
    color: #333;
    border-top-left-radius: 4px;
}

.wfb-ai-chat-msg--user .wfb-ai-chat-msg-bubble {
    background: #2c5282;
    color: #fff;
    border-top-right-radius: 4px;
}


/* ----- Typing indicator ----- */

.wfb-ai-chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.wfb-ai-chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #888;
    animation: wfb-ai-chat-typing 1.2s infinite ease-in-out both;
}

.wfb-ai-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.wfb-ai-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes wfb-ai-chat-typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}


/* ----- Input bar (full-width outer, clamped inner column)
   Borderless — the only border line in the chat surface is the header's
   bottom border. The visual separation between messages and input comes
   from the bubbles ending and the input pill standing out on its own. */

.wfb-ai-chat-input-bar {
    flex: 0 0 auto;
    padding: 4px 0 16px;
    background: #fff;
}

.wfb-ai-chat-input-bar-column {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wfb-ai-chat-input {
    flex: 1 1 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    background: #fff;
    color: #333;
    min-height: 42px;
    max-height: 160px;
    overflow-y: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.wfb-ai-chat-input:focus {
    outline: none;
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-chat-input::placeholder {
    color: #999;
}

.wfb-ai-chat-send {
    flex: 0 0 auto;
    height: 42px;
}

.wfb-ai-chat-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18) !important;
}


/* ----- Icon button (used for the chat header hamburger toggle) ----- */

.wfb-ai-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wfb-ai-icon-btn:hover,
.wfb-ai-icon-btn:focus {
    background: #f0f0f0;
    color: #2c5282;
    outline: none;
}

.wfb-ai-icon-btn .fa {
    font-size: 16px;
}

/* =====================================================================
   Phase 6.5 — embedded AgenticView chrome stripping
   The chat surface mounts a d3VIEW.WorkFlow plugin running lib 915 (the
   workflow_builder_ai_agent host) in agentic view mode, which renders
   AgenticView. AgenticView has its own chrome we don't want in the
   chat-first UI: a 250px left agent-tabs panel, a conversation drawer,
   a per-agent header bar (back-to-canvas / events / info / clear), and
   right-side events + info columns. We hide all of that so only the
   FORA chat surface (.agent-fora) shows. AgenticView mounts FORA via
   `new d3VIEW.Plugins.Fora($tab.find('.agent-fora'), ...)` directly —
   that's the chat the user sees and chats with.
   ===================================================================== */

.wfb-ai-chat-agent-mount {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Inner container we own — stretches to fill the slot. The embedded
   d3VIEW.WorkFlow plugin renders into this. */
.wfb-ai-chat-agent-mount .wfb-ai-embedded-plugin {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Hide the canvas — we never want it visible in the chat-first UI. The
   embedded plugin still mounts ChartView etc. (some 265+ canvas-dependent
   handlers depend on it) so we hide it via display:none rather than not
   rendering it. */
.wfb-ai-chat-agent-mount .wf-canvas-container,
.wfb-ai-chat-agent-mount .canvas-container,
.wfb-ai-chat-agent-mount .wf-canvas-section,
.wfb-ai-chat-agent-mount .wf-birdseye-container,
.wfb-ai-chat-agent-mount .floating-exec-controls {
    display: none !important;
}

/* Agentic view occupies the whole slot. Strip top-level workflow chrome
   (top settings bar, tabs, save/export ribbon) since we have our own
   header above the slot. */
.wfb-ai-chat-agent-mount .top-settings-container,
.wfb-ai-chat-agent-mount .wf-top-bar,
.wfb-ai-chat-agent-mount .wf-tabs-list,
.wfb-ai-chat-agent-mount .left-nav-menu,
.wfb-ai-chat-agent-mount .nav-tabs.wf-dropdowns-list,
.wfb-ai-chat-agent-mount .wf-toolbar,
.wfb-ai-chat-agent-mount .wf-status-bar {
    display: none !important;
}

/* Make the agentic-view container fill the slot. */
.wfb-ai-chat-agent-mount .wf-agentic-view {
    height: 100% !important;
    width: 100% !important;
}

/* Hide AgenticView chrome inside the slot:
   - .agentic-left-panel       : 250px left agent-tabs panel (single agent → no tabs needed)
   - .wf-agentic-convo-drawer  : conversation drawer (we have our own sidebar)
   - .agent-header             : per-tab header (back-to-canvas / events / info / clear)
   - .wf-agentic-events-column : events column (defer to Phase 6.6 / 6.7)
   - .wf-agentic-info-column   : tools/outputs column (defer)
   - .wf-agentic-status-overlay: pre-agent worker setup overlay (rare for our agent)
*/
.wfb-ai-chat-agent-mount .agentic-left-panel,
.wfb-ai-chat-agent-mount .pl-nav-tabs.pl-nav-tabs-vertical,
.wfb-ai-chat-agent-mount .wf-agentic-convo-drawer,
.wfb-ai-chat-agent-mount .agent-header,
.wfb-ai-chat-agent-mount .wf-agentic-events-column,
.wfb-ai-chat-agent-mount .wf-agentic-info-column,
.wfb-ai-chat-agent-mount .wf-agentic-status-overlay {
    display: none !important;
}

/* Center tab content takes everything, with the .agent-fora chat surface
   filling the available space inside it. */
.wfb-ai-chat-agent-mount .tab-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.wfb-ai-chat-agent-mount .tab-pane.active,
.wfb-ai-chat-agent-mount [data-agent-tab].active {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.wfb-ai-chat-agent-mount [data-agent-tab].active > .pl-flex-v {
    height: 100% !important;
    flex: 1 1 0 !important;
}

.wfb-ai-chat-agent-mount .agent-fora {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* If the embedded plugin still spawns AIAgentChatView via Ctrl+Shift+W
   or some auto-open path, hide its floating window — we don't want
   either chrome stack appearing in our chat-first UI. */
.wfb-ai-chat-agent-mount .wf-ai-fora,
.wfb-ai-chat-agent-mount .wf-ai-agent-chat-wrapper {
    display: none !important;
}


/* ====================================================================
   Phase 6.6 — chat header right-side actions (Save + Canvas toggle)
   ==================================================================== */

.wfb-ai-chat-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Phase 13.b Stage 3 — right-anchor inside the grid's 1fr cell. */
    justify-self: end;
}

.wfb-ai-chat-save {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                opacity 0.15s ease;
}

/* Phase 13.c Stage 3 — disabled Save (no unsaved changes). Greyed +
   non-clickable. is-saving / is-saved flashes outrank this state in
   _refreshSaveButtonState so they paint normally. */
.wfb-ai-chat-save.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Saving — light spinner-style; ghost button base state is enough */
.wfb-ai-chat-save.is-saving {
    pointer-events: none;
    opacity: 0.7;
}

.wfb-ai-chat-save.is-saving .fa {
    animation: wfb-ai-chat-save-spin 0.8s linear infinite;
}

@keyframes wfb-ai-chat-save-spin {
    100% { transform: rotate(360deg); }
}

/* Saved — brief success flash (green tint, ~3s) */
.wfb-ai-chat-save.is-saved {
    background: #e6f4ea;
    color: #1e7e34;
    border-color: #c3e6cb;
}

.wfb-ai-chat-save.is-saved .fa {
    color: #1e7e34;
}

/* Canvas toggle is-active state — brand-blue tint when canvas is open */
.wfb-ai-icon-btn.is-active {
    background: #e0ecf8;
    color: #2c5282;
    border-color: #c6d9ec;
}

.wfb-ai-icon-btn.is-active:hover,
.wfb-ai-icon-btn.is-active:focus {
    background: #d0e2f4;
    color: #2c5282;
}


/* ====================================================================
   Phase 6.6 — canvas slide-out pane (right side, 40% width)

   Layout: chat content gets a right padding equal to the canvas pane
   width when open, so the canvas pushes the chat (60/40 split) instead
   of overlaying it. Canvas pane is absolute-positioned to the right
   edge of the body so the slide animation is just a width 0 → 40%
   tween.

   The pane mounts a second d3VIEW.WorkFlow plugin (build view) lazily
   on first toggle. Both the agent's plugin and the canvas plugin
   share state.targetWfModel — agent mutations fire Backbone events
   on the shared wfModel and the canvas auto-renders.
   ==================================================================== */

.wfb-ai-chat-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.22s ease;
    z-index: 50;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.04);
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-canvas {
    width: 40%;
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-content {
    padding-right: 40%;
}

.wfb-ai-chat-content {
    transition: padding-right 0.22s ease, padding-left 0.22s ease;
}

.wfb-ai-chat-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wfb-ai-chat-canvas-mount {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Canvas plugin chrome stripping — same idea as the agent-mount.
   The build view ships its own top-bar / save button / dropdowns;
   we hide them since the wfb-ai shell owns the chrome (Save in our
   header, no toolbar churn). */
.wfb-ai-chat-canvas-mount .top-settings-container,
.wfb-ai-chat-canvas-mount .wf-top-bar,
.wfb-ai-chat-canvas-mount .wf-tabs-list,
.wfb-ai-chat-canvas-mount .left-nav-menu,
.wfb-ai-chat-canvas-mount .nav-tabs.wf-dropdowns-list,
.wfb-ai-chat-canvas-mount .wf-toolbar,
.wfb-ai-chat-canvas-mount .wf-status-bar,
.wfb-ai-chat-canvas-mount .floating-exec-controls {
    display: none !important;
}

/* Stretch the canvas + birdseye to fill the pane. */
.wfb-ai-chat-canvas-mount .wf-canvas-container,
.wfb-ai-chat-canvas-mount .canvas-container,
.wfb-ai-chat-canvas-mount .wf-canvas-section {
    width: 100% !important;
    height: 100% !important;
}

.wfb-ai-chat-canvas-mount .wfb-ai-embedded-plugin {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* ====================================================================
   Phase 6.6 — chat loading overlay (covers the entire chat content
   while the canvas + agent plugins boot at chat entry). Blocks user
   interaction with the agent slot underneath until the agent is
   reachable, and shows progress through the discrete setup steps so
   users have feedback rather than a blank chat for ~2-3 seconds.
   ==================================================================== */

.wfb-ai-chat-content {
    position: relative;
}

.wfb-ai-chat-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Hidden state — overlay fades out and stops intercepting clicks once
   both the canvas and agent plugins are ready. */
.wfb-ai-chat-loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wfb-ai-chat-loading-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.wfb-ai-chat-loading-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.wfb-ai-chat-loading-title .fa-wand-magic-sparkles {
    color: #2c5282;
}

.wfb-ai-chat-loading-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.wfb-ai-chat-loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: #888;
    transition: color 0.15s ease;
}

.wfb-ai-chat-loading-step-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wfb-ai-chat-loading-step-icon .fa {
    font-size: 14px;
    color: #c6d9ec;
}

/* Active step — dark text, blue spin icon. */
.wfb-ai-chat-loading-step.is-active {
    color: #333;
}

.wfb-ai-chat-loading-step.is-active .fa-spin,
.wfb-ai-chat-loading-step.is-active .fa-refresh {
    color: #2c5282;
}

/* Done step — checkmark, green tint, label fades to muted-but-readable. */
.wfb-ai-chat-loading-step.is-done {
    color: #555;
}

.wfb-ai-chat-loading-step.is-done .fa {
    color: #1e7e34;
}

.wfb-ai-chat-loading-hint {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

/* While our chat-loading overlay is up, suppress every loading
   indicator the workflow plugin renders. Two sources:
     1. Plugins.Helpers.showLoadingMessage appends .d3view-loading-msg
        + .d3view-plugins-backdrop to body. (Already monkey-patched in
        JS; this is the CSS safety net.)
     2. workflow.main.js:24761 + workflow-common.tpl:2089 append a
        bootstrap spinner `.wf-init-loader-wrapper > .wf-init-loader`
        directly into the plugin's $el. There's no opt to disable it,
        so we hide via CSS. This is the "agent workflow spinner" Rahul
        reported overlapping the checklist during the agent-load phase.
   The body class is toggled by WorkflowBuilderAIView._enterChat (on)
   and _hideLoadingOverlay (off). Scope is intentionally global:
   during this short window no other modal should be opening, and
   the wfb-ai overlay is the user's only feedback channel. */
body.wfb-ai-loading-active .d3view-loading-msg,
body.wfb-ai-loading-active .d3view-plugins-backdrop,
body.wfb-ai-loading-active .wf-init-loader-wrapper,
body.wfb-ai-loading-active .wf-init-loader {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.a — Centered confirm modal with darkened backdrop.
   Backdrop covers the entire viewport; panel is centered inside.
   Closes on Cancel button, backdrop click, or Escape.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-confirm-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wfbAiConfirmFadeIn 0.15s ease-out;
}

@keyframes wfbAiConfirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wfb-ai-confirm-panel {
    position: relative;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 20px 20px 18px;
    font-size: 14px;
    color: #333;
    animation: wfbAiConfirmPop 0.15s ease-out;
}

@keyframes wfbAiConfirmPop {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

.wfb-ai-confirm-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.wfb-ai-confirm-message {
    color: #555;
    line-height: 1.5;
    margin-bottom: 16px;
}

.wfb-ai-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wfb-ai-confirm-btn {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wfb-ai-confirm-btn--cancel {
    background: #eef0f2;
    color: #444;
    border-color: #d6dbe0;
}

.wfb-ai-confirm-btn--cancel:hover:not(:disabled) {
    background: #e2e6ea;
}

.wfb-ai-confirm-btn--conv {
    background: #f59e0b;
    color: #fff;
    border-color: #d97706;
}

.wfb-ai-confirm-btn--conv:hover:not(:disabled) {
    background: #d97706;
}

.wfb-ai-confirm-btn--all {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}

.wfb-ai-confirm-btn--all:hover:not(:disabled) {
    background: #b91c1c;
}

/* Phase 13.a — rename modal input + Save button. Reuses the centered
   confirm modal shell (.wfb-ai-confirm-backdrop / .wfb-ai-confirm-panel
   / .wfb-ai-confirm-actions); only the input style + Save variant are
   new. Save is the standard primary blue (#2c5282 family). */

.wfb-ai-rename-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    font-size: 14px;
    color: #222;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-rename-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-confirm-btn--save {
    background: #2c5282;
    color: #fff;
    border-color: #234166;
}

.wfb-ai-confirm-btn--save:hover:not(:disabled) {
    background: #234166;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b — right-column panel + in-place view transitions.
   The panel is the swap surface: a card-like container whose
   inner .wfb-ai-right-view nodes slide in/out when the user
   moves between cards / picker views. position: relative so
   leaving views can be pulled out of flow with absolute.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-right-panel {
    position: relative;
    overflow: hidden;
    /* Phase 13.b bento — outlined box matching the left column's
       fixed height for symmetric two-compartment layout. Cards
       inside float on the white fill; the slide animations still
       work because each .wfb-ai-right-view is positioned within
       the panel's content box. */
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 18px 18px 16px;
    height: calc(100vh - 200px);
    min-height: 480px;
}

.wfb-ai-right-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity   250ms ease;
}

/* Entering: stage off-axis + transparent, then settle. */
.wfb-ai-right-view--entering-right {
    transform: translateX(40px);
    opacity: 0;
}
.wfb-ai-right-view--entering-left {
    transform: translateX(-40px);
    opacity: 0;
}

/* Leaving: pull out of flow so it doesn't keep the panel tall,
   slide off the opposite axis, fade out. */
.wfb-ai-right-view--leaving-left {
    position: absolute;
    inset: 0;
    transform: translateX(-40px);
    opacity: 0;
    pointer-events: none;
}
.wfb-ai-right-view--leaving-right {
    position: absolute;
    inset: 0;
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
}

/* Right-column header — shared between cards + picker views. */
.wfb-ai-right-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin: 0 0 12px;
}

.wfb-ai-right-header .fa {
    color: #2c5282;
    font-size: 14px;
}

.wfb-ai-right-back {
    width: 24px;
    height: 24px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-right-back:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    color: #2c5282;
}

/* Right-column picker search — visually echoes the left-column
   search input but lives inside the panel. */
.wfb-ai-right-search {
    position: relative;
    margin-bottom: 10px;
}

.wfb-ai-right-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ad;
    font-size: 13px;
    pointer-events: none;
}

.wfb-ai-right-search .wfb-ai-picker-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-right-search .wfb-ai-picker-search-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

/* Right-column scroll area — fills the remaining space inside
   the bento panel so the picker list scrolls within the bento
   regardless of panel height. */
.wfb-ai-right-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.wfb-ai-right-empty {
    text-align: center;
    padding: 32px 12px;
    color: #888;
    font-size: 13px;
}

.wfb-ai-right-empty .fa {
    font-size: 32px;
    color: #c6d9ec;
    margin-bottom: 10px;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b — launch trace overlay (centered modal-style panel
   on a dimmed backdrop). Used during the three new-conversation
   launches: saved pick / library pick / from scratch. Step 1
   ("Verifying existing conversations") may stall (yellow), in
   which case a drawer slides out below the panel.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-trace-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 16px;
    animation: wfbAiConfirmFadeIn 0.18s ease-out;
}

.wfb-ai-trace-panel {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 24px 28px 22px;
    text-align: center;
    z-index: 9999;
    animation: wfbAiConfirmPop 0.2s ease-out;
}

.wfb-ai-trace-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #2c5282;
    margin-bottom: 10px;
}

.wfb-ai-trace-message {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    margin-bottom: 4px;
    transition: opacity 0.15s ease;
    min-height: 22px;
}
.wfb-ai-trace-message.is-updating { opacity: 0; }

.wfb-ai-trace-submessage {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 22px;
    min-height: 16px;
}

.wfb-ai-trace-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.wfb-ai-trace-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wfb-ai-trace-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f2f5;
    border: 2px solid #d6dbe0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wfb-ai-trace-step-num {
    font-weight: 600;
    font-size: 11px;
}

.wfb-ai-trace-step.is-active .wfb-ai-trace-step-dot {
    background: #2c5282;
    border-color: #2c5282;
    color: #fff;
    animation: wfbAiTracePulse 1.2s ease-in-out infinite;
}

.wfb-ai-trace-step.is-completed .wfb-ai-trace-step-dot {
    background: #155724;
    border-color: #155724;
    color: #fff;
}

.wfb-ai-trace-step.is-stalled .wfb-ai-trace-step-dot {
    background: #f59e0b;
    border-color: #d97706;
    color: #fff;
    animation: wfbAiTraceStallPulse 1.4s ease-in-out infinite;
}

.wfb-ai-trace-step-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #888;
    transition: color 0.2s ease;
}

.wfb-ai-trace-step.is-active   .wfb-ai-trace-step-label,
.wfb-ai-trace-step.is-stalled  .wfb-ai-trace-step-label {
    color: #333;
    font-weight: 600;
}

.wfb-ai-trace-step.is-completed .wfb-ai-trace-step-label {
    color: #555;
}

.wfb-ai-trace-step.is-stalled .wfb-ai-trace-step-label {
    color: #b06b00;
}

.wfb-ai-trace-connector {
    flex: 0 0 24px;
    height: 2px;
    background: #d6dbe0;
    margin-top: 12px;
    transition: background 0.25s ease;
}

.wfb-ai-trace-connector.is-active {
    background: #155724;
}

@keyframes wfbAiTracePulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(44, 82, 130, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(44, 82, 130, 0);    }
}

@keyframes wfbAiTraceStallPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.5); }
    50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);   }
}

/* Drawer below the panel — slides out when the trace stalls on
   "verifying existing conversations" with prior convos found. */
.wfb-ai-trace-drawer {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 18px 20px;
    z-index: 9999;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease,
                max-height 0.3s ease, padding 0.25s ease;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.wfb-ai-trace-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.wfb-ai-trace-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.wfb-ai-trace-drawer-sub {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.wfb-ai-trace-convo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.wfb-ai-trace-convo-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.wfb-ai-trace-convo-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-trace-convo-item.is-selected {
    background: #e0ecf8;
    border-color: #2c5282;
}

.wfb-ai-trace-convo-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wfb-ai-trace-convo-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.wfb-ai-trace-drawer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #eef0f3;
    padding-top: 12px;
}

.wfb-ai-trace-drawer-actions .wfb-ai-confirm-btn {
    width: auto;
    padding: 7px 14px;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b refinement #3 — left-bento loading skeleton.
   White card shape matching real conversation items so the
   layout doesn't jump when data lands; reuses the shared
   .wfb-ai-skeleton-line shimmer infrastructure.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-conversation-list--skeleton {
    pointer-events: none;
}

.wfb-ai-conversation-item--skeleton {
    cursor: default;
    background: #fff;
}

.wfb-ai-conversation-item--skeleton:hover {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: none;
}

/* Inline empty state — when the bento renders with 0 conversations,
   we drop the dashed-border framing and let the bento itself supply
   the visual container. The empty state then centers vertically
   inside the bento's available height. */
.wfb-ai-empty-state.wfb-ai-empty-state--inline {
    border: none;
    background: transparent;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

/* Phase 13.b Section A — workflow rename input inside the trace drawer.
   Sits below the drawer header + above the action buttons. Mirrors the
   delete-confirm rename input styling so the two share visual language. */
.wfb-ai-trace-rename-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    font-size: 14px;
    color: #222;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-trace-rename-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b Stage 3 — chat header rename pencils.
   Layout:  [hamburger][back]  [conv-name + pencil]  [wf-name + pencil + #id][save][canvas]
   The conversation chip flexes to fill the center; the workflow
   chip sits inside the existing right-cluster (.wfb-ai-chat-
   header-actions) just before save/canvas, with a hairline
   separator on its right edge so it reads as part of the
   workflow group, not the action buttons.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-chat-header-conversation {
    /* Sits in the centered grid cell. justify-self: center keeps the
       chip itself optically centered if it's narrower than the cell. */
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 480px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.wfb-ai-chat-header-conversation:hover {
    background: #f7fafd;
}

.wfb-ai-chat-conversation-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}

/* Workflow chip — clickable hover region with hover-only pencil.
   Phase 13.b Stage 3: name + id are flush-adjacent at rest; the
   pencil literally inserts itself between them on chip hover by
   animating its width 0 → 22px (and matching margin to override
   the flex `gap` so the rest position has no extra spacing). */
.wfb-ai-chat-header-workflow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fafbfc;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    max-width: 50ch;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-chat-header-workflow:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-id {
    /* No left margin — sits flush against the name when pencil is
       collapsed. Pencil's negative margins absorb the surrounding
       flex gaps so the name+id read as adjacent at rest. */
    margin-left: 0;
}

/* Hover-only pencils. At rest: width 0 + negative margins to absorb
   the flex gap on each side, so the column collapses to nothing.
   On hover: width grows to 22px and margins return to 0, restoring
   the natural flex gap and revealing the icon. */
.wfb-ai-chat-rename-conv,
.wfb-ai-chat-rename-wf {
    width: 0;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #888;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 -6px;          /* cancels the parent's 6px gap on each side */
    transition: width 0.2s ease, margin 0.2s ease, opacity 0.15s ease,
                background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-chat-header-conversation:hover .wfb-ai-chat-rename-conv,
.wfb-ai-chat-header-workflow:hover .wfb-ai-chat-rename-wf {
    width: 22px;
    margin: 0;
    opacity: 1;
}

.wfb-ai-chat-rename-conv:hover,
.wfb-ai-chat-rename-wf:hover {
    background: #fff;
    border-color: #c6d9ec;
    color: #2c5282;
}

/* Phase 13.b Stage 3 — workflow chip + save are wrapped in a slide-
   out container. Hidden by default; revealed only when the canvas
   pane is open (.wfb-ai-shell--canvas-open class on the chat shell).
   max-width animation + opacity gives a "slide out from the canvas
   button" effect since the wrapper sits to the LEFT of the canvas
   toggle in a right-anchored flex layout — as the wrapper expands,
   its left edge moves leftward while its right edge stays adjacent
   to the canvas button. */
.wfb-ai-chat-canvas-extras {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s,
                margin-right 0.3s ease;
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-canvas-extras {
    max-width: 800px;
    margin-right: 6px;
    opacity: 1;
    pointer-events: auto;
}

.wfb-ai-chat-header-workflow .fa-sitemap {
    color: #2c5282;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32ch;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-id {
    color: #999;
    font-weight: 400;
    font-size: 12px;
    margin-left: 2px;
    flex-shrink: 0;
}

/* Pencil buttons — small, ghost style, matching the existing icon-btn
   feel but slightly toned-down so they don't compete with the actual
   action buttons (save, canvas toggle). */
.wfb-ai-chat-rename-conv,
.wfb-ai-chat-rename-wf {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #888;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.wfb-ai-chat-rename-conv:hover,
.wfb-ai-chat-rename-wf:hover {
    background: #fff;
    border-color: #c6d9ec;
    color: #2c5282;
}

/*
 * CSS for: worker discipline chips + Discipline(s) filter row
 * Added by shashank2104 on 05/05/2026 - DVFIV-2029
 *
 * Chips show in flat mode (where discipline isn't otherwise visible on
 * the card) and hide in tree mode (tree position already conveys the
 * discipline — chips would be doubly redundant). Filter-row rules drive
 * the Discipline(s) multiselect inside the Settings & Filters dropdown
 * regardless of mode.
 */

/* ============================================================
   1. Discipline chips (flat-mode worker list card only)
   ============================================================ */

.wf-workers-container .worker-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 0 15px;
}

.wf-workers-container .wf-discipline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #555);
    background: var(--d3v-bg-secondary, #f4f6f8);
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-pill, 999px);
    transition: var(--d3v-t-fast, all 120ms ease);
    cursor: default;
    max-width: 100%;
}

.wf-workers-container .wf-discipline-chip:hover {
    color: var(--d3v-accent-primary, #2266cc);
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #2266cc);
}

.wf-workers-container .wf-discipline-chip > i.fa {
    font-size: 9px;
    opacity: 0.7;
}

.wf-workers-container .wf-discipline-chip-label {
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide chips when the picker is rendering as a discipline tree —
   the bucket already shows the discipline. */
.wf-workers-container .workers-list[data-mode="tree"] .worker-disciplines {
    display: none;
}

/* ============================================================
   2. Discipline(s) filter row (Settings & Filters dropdown)
   ============================================================ */

.wf-workers-container .wf-search-worker .filters-list .wf-disciplines-filter-row .multiselect-container {
    max-height: 240px;
    overflow-y: auto;
}

.wf-workers-container .wf-search-worker .filters-list .wf-disciplines-filter-row .multiselect-container > li > a > label {
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
}

/* Added by shashank2104 on 04/24/2026 - DW-2878 - Worker example preview modal styles */

.modal.wf-example-preview-modal .modal-body {
    padding: 0;
    min-height: 420px;
    background: var(--d3v-bg-secondary, #f6f7f9);
}

.modal.wf-example-preview-modal .wf-example-preview-loading {
    color: var(--d3v-text-muted, #888);
}

/* Palette example button — click opens preview, the right-side handle drags to canvas */
.wf-workers-container .worker-panel-options .worker-example-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: var(--d3v-border-subtle, #e2e5ea);
    transition: background var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
    padding: 7px 12px!important;
}

.worker-panel-options .worker-example-btn:hover {
    background: var(--d3v-bg-secondary, #f1f2f5);
    border-color: var(--d3v-border-strong, #c6ccd5);
}

.worker-panel-options .worker-example-btn .fa-question-circle {
    color: var(--d3v-accent-info, #3b82c4);
}

.worker-example-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    margin-left: 4px;
    border-left: 1px solid var(--d3v-border-subtle, #e2e5ea);
    color: var(--d3v-text-muted, #888);
    cursor: grab;
    transition: color var(--d3v-t-fast, 120ms) ease, background var(--d3v-t-fast, 120ms) ease;
}

.worker-example-drag-handle:hover {
    color: var(--d3v-accent-info, #3b82c4);
    background: var(--d3v-bg-tertiary, #eef0f3);
}

.worker-example-drag-handle:active {
    cursor: grabbing;
}

/* Drag helper variant for examples */
.drag-helper.worker.example {
    border-style: dashed;
    opacity: 0.9;
}

/*
 * CSS: Workers Picker — Group-by-Discipline tree view
 * Added by shashank2104 on 05/07/2026 - DVFIV-2029
 *
 * Scoped under .wf-workers-container; uses --d3v-* tokens; per-row accent
 * passed via --wf-disc-accent so the colored stripe + caret hover match
 * each top-level discipline.
 */

/* ============================================================
   1. Toggle button (next to search)
   ============================================================ */
.wf-workers-container .wf-search-worker .toggle-discipline-tree {
    cursor: pointer;
    transition: var(--d3v-t-fast, all 120ms ease);
}

.wf-workers-container .wf-search-worker .toggle-discipline-tree.is-active {
    background: var(--d3v-accent-primary, #2266cc)!important;
    color: #fff!important;
    border-color: var(--d3v-accent-primary, #2266cc)!important;
    text-shadow: none;
}

.wf-workers-container .wf-search-worker .toggle-discipline-tree.is-active:hover {
    background: var(--d3v-accent-primary-hover, #1d59b3)!important;
}

/* ============================================================
   2. Tree container (replaces flat list)
   ============================================================ */
.wf-workers-container .workers-list[data-mode="tree"] {
    padding: 4px 0;
}

.wf-workers-container .workers-list[data-mode="tree"] > .worker-panel {
    display: none !important;          /* tree mode hides flat panels */
}

/* ============================================================
   3. Bucket row (caret + stripe + label + count)
   ============================================================ */
.wf-workers-container .wf-disc-bucket {
    margin: 0;
}

.wf-workers-container .wf-disc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-right: 12px;
    color: var(--d3v-text-primary, #1f2937);
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #f1f5f9);
    cursor: pointer;
    transition: var(--d3v-t-fast, all 120ms ease);
    user-select: none;
}

.wf-workers-container .wf-disc-row:hover {
    background: var(--d3v-bg-secondary, #f8fafc);
}

.wf-workers-container .wf-disc-row.is-active,
.wf-workers-container .wf-disc-row.is-open {
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 500;
}

/* Color stripe on the left */
.wf-workers-container .wf-disc-row .wf-disc-stripe {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--wf-disc-accent, #cbd5e1);
}

/* Caret */
.wf-workers-container .wf-disc-row .wf-disc-caret {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    color: var(--d3v-text-secondary, #64748b);
    transition: transform 150ms ease;
    font-size: 10px;
}

.wf-workers-container .wf-disc-row.is-leaf .wf-disc-caret {
    visibility: hidden;
}

.wf-workers-container .wf-disc-row.is-open .wf-disc-caret {
    transform: rotate(90deg);
}

/* Label */
.wf-workers-container .wf-disc-row .wf-disc-label {
    flex: 1 1 auto;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Count badge */
.wf-workers-container .wf-disc-row .wf-disc-count {
    flex: 0 0 auto;
}

.wf-workers-container .wf-disc-row .wf-disc-count .badge {
    background: transparent;
    color: var(--d3v-text-secondary, #64748b);
    font-weight: 500;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-pill, 999px);
    transition: var(--d3v-t-fast, all 120ms ease);
}

.wf-workers-container .wf-disc-row:hover .wf-disc-count .badge,
.wf-workers-container .wf-disc-row.is-open .wf-disc-count .badge {
    color: var(--wf-disc-accent, #2266cc);
    border-color: var(--wf-disc-accent, #2266cc);
}

/* ============================================================
   4. Children container (collapsed/expanded)
   ============================================================ */
.wf-workers-container .wf-disc-children {
    display: none;
    padding-bottom: 4px;
}

.wf-workers-container .wf-disc-bucket > .wf-disc-row.is-open + .wf-disc-children {
    display: block;
}

/* Workers slot inside an expanded leaf — bounded scroll so a fat bucket
   (e.g. Deck Authoring with 346 workers) doesn't push the tree skeleton
   off-screen. min() keeps small buckets compact and large ones bounded
   to roughly 8 rows / 70vh, whichever is smaller. */
.wf-workers-container .wf-disc-workers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    padding-right: 12px;
    max-height: min(320px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wf-workers-container .wf-disc-workers > .worker-panel {
    width: 100%;
    margin: 0;
}

/* ============================================================
   5. Show-all link (Unclassified guard rail)
   ============================================================ */
.wf-workers-container .wf-disc-show-all {
    padding: 6px 12px 6px 0;
    font-size: 11px;
    color: var(--d3v-text-secondary, #64748b);
}

.wf-workers-container .wf-disc-show-all-link {
    color: var(--d3v-accent-primary, #2266cc);
    cursor: pointer;
}

/* ============================================================
   6. Local in-bucket search input
   ============================================================ */
.wf-workers-container .wf-disc-local-search-row {
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
}

.wf-workers-container .wf-disc-local-search {
    height: 28px;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-primary, #1f2937);
    transition: var(--d3v-t-fast, all 120ms ease);
    width: 100%;
}

.wf-workers-container .wf-disc-local-search:focus {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #2266cc);
    outline: none;
    box-shadow: 0 0 0 2px var(--d3v-accent-primary-faint, rgba(34, 102, 204, 0.15));
}

/* Hide non-matching panels under an active local search */
.wf-workers-container .worker-panel.wf-disc-local-hidden {
    display: none !important;
}

/* Empty-state message when local search yields zero matches inside a bucket */
.wf-workers-container .wf-disc-local-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin: 4px 0;
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-sm, 4px);
}

.wf-workers-container .wf-disc-local-empty > i.fa {
    color: var(--d3v-accent-primary, #2266cc);
    font-size: 11px;
    opacity: 0.7;
}

/* Highlight the row's count badge in accent while a local search is active */
.wf-workers-container .wf-disc-row.wf-disc-local-active .wf-disc-count .badge {
    color: var(--wf-disc-accent, #2266cc);
    border-color: var(--wf-disc-accent, #2266cc);
    font-weight: 600;
}


/*
 * CSS for template: wf-workers-list-actions-box-tpl.tpl
 * Source: javascripts/templates/modular/builder/workers/wf-workers-list-actions-box-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li {
position: relative;
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li {
position: relative;
}

div#wf-add-nodes-flex-modal .worker-position .dropdown-menu li {
position: relative;
}



/*
 * CSS for template: wf-workers-list-container-tpl.tpl
 * Source: javascripts/templates/modular/builder/workers/wf-workers-list-container-tpl.tpl
 */


/* ================================================================
   1. BASE STYLES (classic + modern shared)
   ================================================================ */

   .wf-workers-container .wf-search-worker .filters-list .dropdown-menu {
    height: 300px;
    width: 500px;
}

.wf-workers-container .wf-search-worker .filters-list .dropdown-menu .form-group > label {
    width: 150px;
    flex: 0 0 150px;
}

.wf-workers-container .wf-search-worker .filters-list .dropdown-menu .form-group > div {
    flex: 1 1 auto;
}

div.workflow .workers-list,
div.workflow .clusters-list,
.wf-workers-container .workers-list {
    overflow: auto;
    margin: 5px 0 0;
    padding-right: 0;
    transition: max-height 0.2s ease-out;
    min-height: 150px;
}

div.workflow .workers-list.no-count:after,
div.workflow .clusters-list.no-count:after,
.wf-workers-container .workers-list.no-count:after {
    content: 'No workers found';
    color: dimgrey;
    position: absolute;
    font-size: 1.2em;
    margin-left: 10px;
}

.wf-workers-container ul.filters-list li.additional_types ul li {
    border: none;
}

.wf-workers-container ul.filters-list li.additional_types ul li:hover {
    background-color: #f5f5f5;
}

.wf-workers-container ul.filters-list li.additional_types a {
    text-decoration: none;
    color: inherit;
    padding: 5px;
    border-radius: 3px;
}

.wf-workers-container ul.filters-list li.additional_types.open > a {
    background-color: #DDD;
}

.wf-workers-container .add_buttons.btn-group-vertical > button {
}

.wf-workers-container .add_buttons.floating_buttons {
    transform: translateY(-50%);
}

.wf-workers-container .workers-list[data-view="compact"] .thumbnail {
    display: none;
}

.wf-workers-container .workers-list[data-view="compact"] [data-id="preview"] {
    opacity: 0;
}

.wf-workers-container .workers-list[data-view="compact"] .worker-panel:hover [data-id="preview"] {
    opacity: 1;
}

.wf-workers-full-view .wf-workers-container .wf-search-worker .filters-list .dropdown-menu {
    height: 300px;
    width: 500px;
    right: 0;
    left: unset;
}

div.workflow-modal div.workers-list .worker-panel.active {
    border: 2px solid #0b7bff;
}

.wf-workers-container .wf-search-worker .fora-search {
    height: 300px !important;
}

.wf-workers-container .wf-search-worker .fora-search .fora-result-preview {
    white-space: normal;
}


/* ================================================================
   2. MODERN DESIGN -- WorkersListView
   Scoped under div.workflow.wf-design-modern
   ================================================================ */

div.workflow.wf-design-modern .wf-workers-container {
    background: var(--wf-bg-surface);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* -- Header area -- */
div.workflow.wf-design-modern .wf-workers-container .plugin-tabs {
    display: flex;
    flex-direction: column;
}

div.workflow.wf-design-modern .wf-workers-container .nav-tabs {
    border-bottom: 1px solid var(--wf-border);
    padding: 0 12px;
    gap: 0;
}

div.workflow.wf-design-modern .wf-workers-container .nav-tabs > li > a {
    font-size: 12px;
    font-weight: 600;
    padding: 10px 16px;
    color: var(--wf-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    transition: var(--wf-t-fast);
    margin-bottom: -1px;
    background: transparent;
}

div.workflow.wf-design-modern .wf-workers-container .nav-tabs > li > a:hover {
    color: var(--wf-text-primary);
    border-bottom-color: var(--wf-border-strong);
    background: transparent;
}

div.workflow.wf-design-modern .wf-workers-container .nav-tabs > li.active > a {
    color: var(--wf-accent);
    border-bottom-color: var(--wf-accent);
    background: transparent;
}

/* -- Search bar -- */
div.workflow.wf-design-modern .wf-workers-container .wf-search-worker {
    padding: 12px 12px 0;
    gap: 8px;
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    overflow: visible !important;
    background: var(--wf-bg-surface);
    transition: var(--wf-t-fast);
}

/* Clip inner elements to rounded corners without overflow:hidden */
div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group > .form-control:first-child {
    border-radius: var(--wf-r-md) 0 0 var(--wf-r-md);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group > .input-group-addon:last-child {
    border-radius: 0 var(--wf-r-md) var(--wf-r-md) 0;
}

/* Ensure filter dropdown appears above everything and fits within sidebar */
div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .filters-list.open .dropdown-menu {
    display: block;
    z-index: var(--wf-z-tooltip);
    /* left: auto !important; */
    /* right: -12px !important; */
    /* width: 340px !important; */
    padding: 15px!important;
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group-addon:not(.filters-list) {
    padding: 4px 12px!important
}
div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group:focus-within {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .form-control {
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    height: 38px;
    font-size: 13px;
    color: var(--wf-text-primary);
    padding: 0 12px;
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .form-control::placeholder {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group-addon {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group-addon > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .input-group-addon > a:hover {
    color: var(--wf-accent);
    background: var(--wf-accent-light);
}

div.workflow.wf-design-modern .wf-workers-container .wf-search-worker .reload_workers {
    border-radius: var(--wf-r-md);
    font-size: 12px;
    font-weight: 600;
    height: 38px;
    padding: 0 14px;
}

/* -- Count row -- */
div.workflow.wf-design-modern .wf-workers-container .workers-count {
    padding: 8px 12px;
    margin: 0 !important;
    font-size: 12px;
    color: var(--wf-text-muted);
    border-bottom: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.workflow.wf-design-modern .wf-workers-container .workers-count .badge {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--wf-r-full);
}

/* -- Workers list -- */
div.workflow.wf-design-modern .wf-workers-container .workers-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    margin: 0 !important;
    gap: 4px;
    display: flex;
    flex-direction: column;
}

/* -- Worker panel cards -- */
div.workflow.wf-design-modern .wf-workers-container .worker-panel {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel:hover {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: var(--wf-sh-xs);
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel.selected {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel.active {
    border-color: var(--wf-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-info > .row {
    margin: 0;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-info .col-md-12 {
    padding: 0;
}

/* Worker name / type */
div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-type {
    font-size: 13px;
    font-weight: 700;
    color: var(--wf-text-primary);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-asterisk {
    color: var(--wf-accent);
    margin-right: 2px;
    font-weight: 700;
}

/* Worker label/description */
div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-label {
    padding: 0 !important;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-label span {
    font-size: 11px;
    color: var(--wf-text-muted);
    line-height: 1.3;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .worker-description {
    display: none;
    padding: 0 !important;
}

/* Action buttons */
div.workflow.wf-design-modern .wf-workers-container .worker-panel .add_buttons {
    gap: 2px;
    margin-left: auto;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .add_buttons .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
    font-size: 12px;
}

div.workflow.wf-design-modern .wf-workers-container .worker-panel .add_buttons .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* Thumbnail (full view) */
div.workflow.wf-design-modern .wf-workers-container .worker-panel .thumbnail {
    margin: 6px 0 0;
    padding: 0;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-sm);
    overflow: hidden;
}

/* -- Filters dropdown (modern) -- */
div.workflow.wf-design-modern .wf-workers-container .filters-list .dropdown-menu {
    background: var(--wf-bg-elevated);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-lg);
    padding: 16px;
}

div.workflow.wf-design-modern .wf-workers-container .filters-list .dropdown-menu h1 {
    font-size: 14px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin: 0 0 12px;
}

div.workflow.wf-design-modern .wf-workers-container .filters-list .dropdown-menu .form-group {
    /* margin-bottom: 10px; */
}

div.workflow.wf-design-modern .wf-workers-container .filters-list .dropdown-menu label {
    font-size: 12px;
    font-weight: 500;
    color: var(--wf-text-secondary);
}

/* -- Bottom wizard buttons -- */
div.workflow.wf-design-modern .wf-workers-container .btn-group-justified {
    padding: 8px;
    border-top: 1px solid var(--wf-border);
    gap: 8px;
}

div.workflow.wf-design-modern .wf-workers-container .btn-group-justified .btn {
    border-radius: var(--wf-r-md);
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-workers-container .workers_wizard {
    background: var(--wf-grad-accent) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

div.workflow.wf-design-modern .wf-workers-container .workers_wizard:hover {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

/* -- No results (modern) -- */
div.workflow.wf-design-modern .workers-list.no-count:after {
    color: var(--wf-text-muted) !important;
    font-size: 13px !important;
    text-align: center;
    width: 100%;
    padding: 32px 0;
}

/* -- Filter list (additional_types) modern -- */
div.workflow.wf-design-modern .wf-workers-container ul.filters-list li.additional_types ul li:hover {
    background-color: var(--wf-accent-light);
}

div.workflow.wf-design-modern .wf-workers-container ul.filters-list li.additional_types a {
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern .wf-workers-container ul.filters-list li.additional_types.open > a {
    background-color: var(--wf-accent-light);
    color: var(--wf-accent);
}


/*
 * CSS for template: wf-workers-list-predictions-dropdown-tpl.tpl
 * Source: javascripts/templates/modular/builder/workers/wf-workers-list-predictions-dropdown-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.accordion-container.workers-list .panel-collapse .list-group-item:hover .add_to_wf {
opacity: 1 !important;
}

div.workflow div.accordion-container.workers-list .panel-collapse .list-group-item:hover .add_to_wf {
opacity: 1 !important;
}

.wf-workers-full-view .wf-workers-container .workers-list {
display: flex;
    flex-wrap: wrap;
}

div.workflow div.accordion-container.workers-list .panel-collapse .list-group-item:hover .add_to_wf {
opacity: 1 !important;
}

.wf-workers-full-view .wf-workers-container .workers-list {
display: flex;
    flex-wrap: wrap;
}



/*
 * CSS for template: wf-workers-selected-list-tpl.tpl
 * Source: javascripts/templates/modular/builder/workers/wf-workers-selected-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item.selected {
background-color: steelblue;
    color: #FFF;
}

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item.selected {
background-color: steelblue;
    color: #FFF;
}

.keyword-curves-container .curves-list>li.selected {
text-shadow: 0 -1px 0 #286090;
    background-image: -webkit-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -o-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
    background-image: linear-gradient(to bottom, #337ab7 0, #2b669a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    background-repeat: repeat-x;
    border-color: #2b669a;
}

.keyword-curves-container .curves-list>li.selected>a {
color: #FFF;
}

.keyword-curves-container .curves-list>li.active:not(.selected) {
background: none;
    border-color: #DDD;
}

.keyword-curves-container .curves-list>li.active:not(.selected)>a {
color: #23527c;
    text-shadow: none;
}

div#wf-temp-config-modal .modal-body div.outputs-container li.field-item.selected {
background-color: steelblue;
    color: #FFF;
}

.keyword-curves-container .curves-list>li.selected {
text-shadow: 0 -1px 0 #286090;
    background-image: -webkit-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -o-linear-gradient(top, #337ab7 0, #2b669a 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
    background-image: linear-gradient(to bottom, #337ab7 0, #2b669a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    background-repeat: repeat-x;
    border-color: #2b669a;
}

.keyword-curves-container .curves-list>li.selected>a {
color: #FFF;
}

.keyword-curves-container .curves-list>li.active:not(.selected) {
background: none;
    border-color: #DDD;
}

.keyword-curves-container .curves-list>li.active:not(.selected)>a {
color: #23527c;
    text-shadow: none;
}



/*
 * CSS for template: wf-curve-manager-tpl.tpl
 * Source: javascripts/templates/modular/common/managers/wf-curve-manager-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-curve-manager-modal .modal-body button.overlay_responses:focus,
div#wf-curve-manager-modal .modal-body button.overlay_responses:active {
outline: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item {
padding: 7px 15px;
    border: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item[data-id] {
cursor: pointer;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
padding: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
background: none;
    text-shadow: none;
    color: #000;
    border-color: #ddd;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
    background-color: #428BCA;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active a {
color: var(--indigo-blue-light);
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled {
opacity: 0.3;
    pointer-events: none !important;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled>a:after {
content: 'already rendered';
    font-size: 9px;
    color: #000;
    font-weight: bold;
    margin-left: 7px;
}

div#wf-curve-manager-modal .toggle_filters:hover {
color: green !important;
}

div#wf-curve-manager-modal .toggle_filters {
cursor: pointer;
    position: absolute;
    top: 7px;
    right: 7px;
}

div#wf-curve-manager-modal .toggle_filters.selected {
color: green !important;
}

div#wf-curve-manager-modal .export_options button {
margin-left: 3px;
}

div#wf-curve-manager-modal div#curve-options {
min-width: 350px;
}

div#wf-curve-manager-modal div#curve_rendering_area {
flex: 1 1 auto;
}

div#wf-execute-workflow-node-modal .simpleView .edit_options .inputs-outputs .wf-thumbnail #curve-manager {
/*height: 100px;*/
    /*opacity: 0.2;*/
    /*position: absolute;*/
    /*display: none;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%,-50%);*/
    /*transition: opacity 0.4s ease;*/
}

div#wf-curve-manager-modal .modal-body button.overlay_responses:focus,
div#wf-curve-manager-modal .modal-body button.overlay_responses:active {
outline: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item {
padding: 7px 15px;
    border: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item[data-id] {
cursor: pointer;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
padding: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
background: none;
    text-shadow: none;
    color: #000;
    border-color: #ddd;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
    background-color: #428BCA;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active a {
color: var(--indigo-blue-light);
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled {
opacity: 0.3;
    pointer-events: none !important;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled>a:after {
content: 'already rendered';
    font-size: 9px;
    color: #000;
    font-weight: bold;
    margin-left: 7px;
}

div#wf-curve-manager-modal .toggle_filters:hover {
color: green !important;
}

div#wf-curve-manager-modal .toggle_filters {
cursor: pointer;
    position: absolute;
    top: 7px;
    right: 7px;
}

div#wf-curve-manager-modal .toggle_filters.selected {
color: green !important;
}

div#wf-curve-manager-modal .export_options button {
margin-left: 3px;
}

div#wf-curve-manager-modal div#curve-options {
min-width: 350px;
}

div#wf-curve-manager-modal div#curve_rendering_area {
flex: 1 1 auto;
}

div#wf-execute-workflow-node-modal .simpleView .edit_options .inputs-outputs .wf-thumbnail #curve-manager {
/*height: 100px;*/
    /*opacity: 0.2;*/
    /*position: absolute;*/
    /*display: none;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%,-50%);*/
    /*transition: opacity 0.4s ease;*/
}

div#wf-curve-manager-modal .modal-body button.overlay_responses:focus,
div#wf-curve-manager-modal .modal-body button.overlay_responses:active {
outline: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item {
padding: 7px 15px;
    border: none;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item[data-id] {
cursor: pointer;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
padding: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
background: none;
    text-shadow: none;
    color: #000;
    border-color: #ddd;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
    background-color: #428BCA;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.active a {
color: var(--indigo-blue-light);
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled {
opacity: 0.3;
    pointer-events: none !important;
}

div#wf-curve-manager-modal .modal-body div.curves-list #curve_list_accordion .panel-collapse ul.list-group>li.list-group-item.disabled>a:after {
content: 'already rendered';
    font-size: 9px;
    color: #000;
    font-weight: bold;
    margin-left: 7px;
}

div#wf-curve-manager-modal .toggle_filters:hover {
color: green !important;
}

div#wf-curve-manager-modal .toggle_filters {
cursor: pointer;
    position: absolute;
    top: 7px;
    right: 7px;
}

div#wf-curve-manager-modal .toggle_filters.selected {
color: green !important;
}

div#wf-curve-manager-modal .export_options button {
margin-left: 3px;
}

div#wf-curve-manager-modal div#curve-options {
min-width: 350px;
}

div#wf-curve-manager-modal div#curve_rendering_area {
flex: 1 1 auto;
}

div#wf-execute-workflow-node-modal .simpleView .edit_options .inputs-outputs .wf-thumbnail #curve-manager {
/*height: 100px;*/
    /*opacity: 0.2;*/
    /*position: absolute;*/
    /*display: none;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%,-50%);*/
    /*transition: opacity 0.4s ease;*/
}

.workflow-modal .ui-layout-container.curve-manager:hover>.ui-layout-resizer {
background: #f5f5f5 !important;
    /* width: 3px!important; */
}

.workflow-modal .ui-layout-container.curve-manager:hover>.ui-layout-resizer:hover,
.workflow-modal .ui-layout-container.curve-manager:hover>.ui-layout-resizer.ui-layout-east-drag {
background: red !important;
}



/*
 * CSS for template: wf-file-uploader-tpl.tpl
 * Source: javascripts/templates/modular/common/managers/wf-file-uploader-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal li[data-type="file"] .wf-dropzone,
div#wf-execute-workflow-node-modal li[data-type="file"] .wf-dropzone {
border-style: solid;
    border-color: #CCC;
}

div#wf-execute-workflow-node-modal li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}

div.workflow-modal li[data-type="file"] .wf-dropzone,
div#wf-execute-workflow-node-modal li[data-type="file"] .wf-dropzone {
border-style: solid;
    border-color: #CCC;
}

div#wf-execute-workflow-node-modal li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}

div.workflow-modal li[data-type="file"] .wf-dropzone,
div#wf-execute-workflow-node-modal li[data-type="file"] .wf-dropzone {
border-style: solid;
    border-color: #CCC;
}

div#wf-execute-workflow-node-modal li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}



/*
 * CSS for template: wf-image-enlarge-tpl.tpl
 * Source: javascripts/templates/modular/common/managers/wf-image-enlarge-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

div#wf-execute-workflow-node-modal li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

div#wf-execute-workflow-node-modal li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}



/*
 * CSS for template: wf-simlytiks-manager-tpl.tpl
 * Source: javascripts/templates/modular/common/managers/wf-simlytiks-manager-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-simlytiks-manager-modal .modal-body .viz_renderingArea.bs_datatable_wrapper .row {
margin: 0;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item:nth-child(2) {
border-top: none !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item {
/*padding: 4px 15px;*/
    cursor: pointer;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
/*padding: 0 20px;*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
text-shadow: none;
    color: #000;
    border-color: #ddd;
    background: #428bca;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-simlytiks-manager-modal .viz_renderingArea .sl-page-tabs,
div#wf-simlytiks-manager-modal .viz_renderingArea .page-options {
display: none !important;
}

div#wf-simlytiks-manager-modal .modal-body .viz_renderingArea.bs_datatable_wrapper .row {
margin: 0;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item:nth-child(2) {
border-top: none !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item {
/*padding: 4px 15px;*/
    cursor: pointer;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
/*padding: 0 20px;*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
text-shadow: none;
    color: #000;
    border-color: #ddd;
    background: #428bca;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-simlytiks-manager-modal .viz_renderingArea .sl-page-tabs,
div#wf-simlytiks-manager-modal .viz_renderingArea .page-options {
display: none !important;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] div.simlytiks .viz-list-item .viz-thumbnail {
flex: 0 0 80px;
}

div#wf-simlytiks-manager-modal .modal-body .viz_renderingArea.bs_datatable_wrapper .row {
margin: 0;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item:nth-child(2) {
border-top: none !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item {
/*padding: 4px 15px;*/
    cursor: pointer;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item a {
/*padding: 0 20px;*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active {
text-shadow: none;
    color: #000;
    border-color: #ddd;
    background: #428bca;
    word-break: break-all;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a {
color: #FFF !important;
}

div#wf-simlytiks-manager-modal .modal-body div.charts-list #chart_list_accordion .panel-collapse ul.list-group>li.list-group-item.active>a:after {
content: '\f00c';
    margin-left: 10px;
    font-family: FontAwesome;
}

div#wf-simlytiks-manager-modal .viz_renderingArea .sl-page-tabs,
div#wf-simlytiks-manager-modal .viz_renderingArea .page-options {
display: none !important;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] div.simlytiks .viz-list-item .viz-thumbnail {
flex: 0 0 80px;
}

div.simlytiks div.formbuilder .curve-appearance-dd .dropdown-menu {
right: 0;
}

body.hasSimlytiksFullScreenViz .wf-simlytiks-manager .reporters-list,
body.hasSimlytiksFullScreenViz .wf-simlytiks-manager .ui-layout-resizer.ui-layout-resizer-east {
display: none !important;
}

div#wf-simlytiks-manager-modal .simlytiks-page .viewContent {
border: none !important;
}

div.workflow-modal .wf-generic-node-io-link,
div.simlytiks .wf-generic-node-io-link {
white-space: normal;
    text-align: left;
}



/*
 * CSS for template: wf-text-manager-tpl.tpl
 * Source: javascripts/templates/modular/common/managers/wf-text-manager-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-text-manager-modal .modal-body ul.text-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active a {
color: #fff;
}

div#wf-text-manager-modal .modal-body ul.text-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active a {
color: #fff;
}

div#wf-text-manager-modal .modal-body ul.text-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-text-manager-modal .modal-body ul.text-names li.active a {
color: #fff;
}


/*
 * Special CSS rules not matched to specific templates
 * Category: common/modals
 * Auto-generated by modularize_css.py
 */

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}

div.wf-workers-multi-edit-modal .generic-input-template {
padding: 0;
}

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}



/*
 * CSS for template: wf-checkpoints-alert-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-checkpoints-alert-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .exp-builder-container .alert {
display: none;
}

div.workflow-modal .exp-builder-container .alert {
display: none;
}



/*
 * CSS for template: wf-close-dialog-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-close-dialog-tpl.tpl
 * Auto-generated by modularize_css.py
 */

body .wf-alert.wf-close-dialog-alert {
background: #FFF !important;
    padding: 20px;
    border: none;
    color: #4f5359;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);

    transition: top 0.5s ease-in;

    /*-webkit-animation-duration: 0.5s;*/
    /*-moz-animation-duration: 0.5s;*/
    /*-o-animation-duration: 0.5s;*/
    /*animation-duration: 0.5s;*/
}

body .wf-close-dialog-alert.wf-custom-dialog-alert {
border: 1px solid #DDD !important;
    border-radius: 10px;
}

body .wf-alert.wf-close-dialog-alert {
background: #FFF !important;
    padding: 20px;
    border: none;
    color: #4f5359;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);

    transition: top 0.5s ease-in;

    /*-webkit-animation-duration: 0.5s;*/
    /*-moz-animation-duration: 0.5s;*/
    /*-o-animation-duration: 0.5s;*/
    /*animation-duration: 0.5s;*/
}

body .wf-close-dialog-alert.wf-custom-dialog-alert {
border: 1px solid #DDD !important;
    border-radius: 10px;
}

body .wf-alert.wf-close-dialog-alert {
background: #FFF !important;
    padding: 20px;
    border: none;
    color: #4f5359;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);

    transition: top 0.5s ease-in;

    /*-webkit-animation-duration: 0.5s;*/
    /*-moz-animation-duration: 0.5s;*/
    /*-o-animation-duration: 0.5s;*/
    /*animation-duration: 0.5s;*/
}



/*
 * CSS for template: wf-compare-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-compare-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-compare-modal .modal-body #json-comp-legend-svg {
width: auto !important;
    height: auto !important;
}

div#wf-compare-modal .modal-body #json-comp-legend-svg {
width: auto !important;
    height: auto !important;
}

div#wf-compare-modal .modal-body #json-comp-legend-svg {
width: auto !important;
    height: auto !important;
}



/*
 * CSS for template: wf-data-digitizer-modal-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-data-digitizer-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.modalContainer.excelresponseparser .modal-dialog-fullscreen {
width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
}

div.modalContainer.excelresponseparser .modal-dialog-fullscreen {
width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
}

div.modalContainer.excelresponseparser .modal-dialog-fullscreen {
width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
}



/*
 * CSS for template: wf-error-msg-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-error-msg-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-flow-modal-execution .wf-error-msg pre {
white-space: normal;
}

.wf-flow-modal-execution .wf-error-msg .wf-error {
max-height: 200px;
}



/*
 * CSS for template: wf-error-view-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-error-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip .wf-error {
max-height: 250px;
    overflow: auto;
}

body span.wf-canvas-tooltip .wf-error {
max-height: 250px;
    overflow: auto;
}

.d3view-exporting .wf-canvas-tooltip .wf-error {
max-height: unset !important;
}

body span.wf-canvas-tooltip .wf-error {
max-height: 250px;
    overflow: auto;
}

.d3view-exporting .wf-canvas-tooltip .wf-error {
max-height: unset !important;
}



/*
 * CSS for template: wf-exec-error-content-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-exec-error-content-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-iterations-viewer .it-objectives .validations-list li {
margin-bottom: 15px;
}

.wf-error-modal .enhanced-error-container .error-content {
overflow-y: auto;
    flex: 1;
}

.wf-error-modal .enhanced-error-container .error-content .form-group {
margin-top: 20px;
}



/*
 * CSS for template: wf-exec-message-modal-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-exec-message-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-tooltip-modal.modal {
display: block;
    position: relative;
}

.wf-tooltip-modal.modal {
display: block;
    position: relative;
}



/* wf-export-modal-tpl.css — Workflow Export -> ZIP modal v2 ("profile" layout, R0-3788).
 *
 * RE-AUTHORED (2026-06-19): Suri's original rules for these selectors were never
 * committed (they lived only in his local / 3092 working state) and are
 * unrecoverable from git or any deployed build. These rules were re-derived from
 * the surviving markup + the --wf-* modern token system; pixel values are fresh,
 * not the originals. Suri can fine-tune later.
 *
 * Markup: javascripts/templates/modular/common/modals/wf-export-modal-tpl.tpl
 *         (#wf-export-modal-tpl-v2, rendered on obj.type == 'zip')
 *         also mirrored in javascripts/templates/workflow-common.tpl
 *
 * Scoped under (the modal mounts on body.wf-design-modern;
 * the canvas root div.workflowalso carries the class). Uses the
 * --wf-* tokens from wf-modern-tokens.css, so light + dark both work for free.
 */

/* ---- Root container ------------------------------------------------------ */
.wfx {
    display: flex;
    flex-direction: column;
    gap: var(--wf-sp-4, 16px);
    color: var(--wf-text-primary, #1E293B);
    font-size: var(--wf-fs-base, 13px);
}

/* ---- Top row: file name + export profile --------------------------------- */
.wfx-top {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--wf-sp-4, 16px);
    align-items: start;
}

.wfx-top.single {
    grid-template-columns: 1fr;
}

.wfx-fld {
    display: flex;
    flex-direction: column;
    gap: var(--wf-sp-1, 4px);
}

.wfx-fld > label {
    margin: 0;
    font-size: var(--wf-fs-sm, 12px);
    font-weight: 600;
    color: var(--wf-text-secondary, #475569);
}

.wfx-fld .form-control {
    background: var(--wf-bg-surface, #FFFFFF);
    border: 1px solid var(--wf-border, #E2E8F0);
    border-radius: var(--wf-r-md, 8px);
    color: var(--wf-text-primary, #1E293B);
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wfx-fld .form-control:focus {
    border-color: var(--wf-border-focus, #3B82F6);
    box-shadow: 0 0 0 3px var(--wf-accent-light, rgba(59, 130, 246, 0.10));
}

/* ---- Segmented "export profile" control (#wfx-profile) ------------------- */
.wfx-seg {
    display: flex;
    gap: var(--wf-sp-1, 4px);
    padding: var(--wf-sp-1, 4px);
    background: var(--wf-bg-input, #F1F5F9);
    border: 1px solid var(--wf-border, #E2E8F0);
    border-radius: var(--wf-r-lg, 12px);
}

.wfx-seg button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--wf-sp-2, 8px) var(--wf-sp-2, 8px);
    border: 1px solid transparent;
    border-radius: var(--wf-r-md, 8px);
    background: transparent;
    color: var(--wf-text-secondary, #475569);
    font-size: var(--wf-fs-sm, 12px);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wfx-seg button:hover {
    background: var(--wf-bg-surface, #FFFFFF);
    color: var(--wf-text-primary, #1E293B);
}

.wfx-seg button .s {
    display: block;
    font-size: var(--wf-fs-xs, 11px);
    font-weight: 500;
    color: var(--wf-text-muted, #94A3B8);
}

.wfx-seg button.on {
    background: var(--wf-bg-surface, #FFFFFF);
    border-color: var(--wf-border-focus, #3B82F6);
    color: var(--wf-accent, #3B82F6);
    box-shadow: var(--wf-sh-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.wfx-seg button.on .s {
    color: var(--wf-accent, #3B82F6);
}

/* ---- Profile hint line --------------------------------------------------- */
.wfx-hint {
    margin: calc(-1 * var(--wf-sp-2, 8px)) 0 0 0;
    padding: var(--wf-sp-2, 8px) var(--wf-sp-3, 12px);
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.10));
    border-radius: var(--wf-r-md, 8px);
    font-size: var(--wf-fs-sm, 12px);
    color: var(--wf-text-secondary, #475569);
}

/* ---- Always-hidden bag of synced checkboxes ------------------------------ */
.wfx-hidden {
    display: none !important;
}

/* ---- Two-column options grid --------------------------------------------- */
.wfx-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wf-sp-5, 20px);
}

@media (max-width: 760px) {
    .wfx-cols,
    .wfx-top {
        grid-template-columns: 1fr;
    }
}

.wfx-col {
    display: flex;
    flex-direction: column;
}

/* ---- Group heading ------------------------------------------------------- */
.wfx-gh {
    margin: var(--wf-sp-3, 12px) 0 var(--wf-sp-1, 4px);
    padding-bottom: var(--wf-sp-1, 4px);
    border-bottom: 1px solid var(--wf-border, #E2E8F0);
    font-size: var(--wf-fs-xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wf-text-muted, #94A3B8);
}

.wfx-gh:first-child {
    margin-top: 0;
}

.wfx-gh .lite {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wf-text-muted, #94A3B8);
}

/* ---- Option row ---------------------------------------------------------- */
.wfx-opt {
    display: flex;
    align-items: flex-start;
    gap: var(--wf-sp-3, 12px);
    padding: var(--wf-sp-2, 8px) var(--wf-sp-2, 8px);
    border-radius: var(--wf-r-md, 8px);
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wfx-opt:hover {
    background: var(--wf-bg-card, #F8FAFC);
}

.wfx-opt.new {
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.10));
}

.wfx-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.wfx-nm {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2, 8px);
    font-size: var(--wf-fs-base, 13px);
    font-weight: 600;
    color: var(--wf-text-primary, #1E293B);
}

.wfx-nm .fa-info-circle {
    color: var(--wf-text-muted, #94A3B8);
    cursor: help;
}

.wfx-ds {
    margin-top: 2px;
    font-size: var(--wf-fs-sm, 12px);
    line-height: 1.4;
    color: var(--wf-text-muted, #94A3B8);
}

.wfx-ds code {
    padding: 1px 5px;
    background: var(--wf-bg-input, #F1F5F9);
    border: 1px solid var(--wf-border, #E2E8F0);
    border-radius: var(--wf-r-sm, 4px);
    font-size: 0.9em;
    color: var(--wf-text-secondary, #475569);
}

/* ---- "NEW" badge --------------------------------------------------------- */
.wfx-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--wf-r-full, 9999px);
    background: var(--wf-accent, #3B82F6);
    color: var(--wf-text-inverse, #FFFFFF);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Checkbox column alignment ------------------------------------------- */
.wfx-opt .input-group {
    flex: 0 0 auto;
    width: auto;
    padding-top: 2px;
}

/* ---- Password field group ------------------------------------------------ */
.wfx-pwd {
    margin-top: var(--wf-sp-2, 8px);
}

.wfx-pwd .form-control {
    background: var(--wf-bg-surface, #FFFFFF);
    border: 1px solid var(--wf-border, #E2E8F0);
    color: var(--wf-text-primary, #1E293B);
}

.wfx-pwd .input-group-addon {
    background: var(--wf-bg-input, #F1F5F9);
    border: 1px solid var(--wf-border, #E2E8F0);
    color: var(--wf-text-secondary, #475569);
    cursor: pointer;
    transition: var(--wf-t-fast, all 0.12s ease);
}

.wfx-pwd .input-group-addon:hover {
    background: var(--wf-bg-card-hover, #F1F5F9);
    color: var(--wf-text-primary, #1E293B);
}

/*
 * CSS for template: wf-file-manager-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-file-manager-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-file-manager-modal .modal-body ul.file-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active a {
color: #fff;
}

div#wf-file-manager-modal .modal-body div.category {
border: 1px solid #ddd;
    padding: 10px;
}

div#wf-file-manager-modal .modal-body div.category .category-title {
height: 25px;
}

div#wf-file-manager-modal .modal-body div.category-title h3 {
display: inline-block;
    position: relative;
    top: 4px;
}

div#wf-file-manager-modal .modal-body .wf-loader {
position: absolute;
    top: 50%;
    left: 50%;
}

div#wf-file-manager-modal .modal-body .file_renderingArea #peacock-display-container .row {
margin: 0;
}

div#wf-file-manager-modal .modal-body button.kwv,
div#wf-file-manager-modal .modal-body button.revert_kwv {
position: absolute;
    right: 2%;
    bottom: 3%;
    z-index: 2;
}

div#wf-file-manager-modal .modal-body ul.file-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active a {
color: #fff;
}

div#wf-file-manager-modal .modal-body div.category {
border: 1px solid #ddd;
    padding: 10px;
}

div#wf-file-manager-modal .modal-body div.category .category-title {
height: 25px;
}

div#wf-file-manager-modal .modal-body div.category-title h3 {
display: inline-block;
    position: relative;
    top: 4px;
}

div#wf-file-manager-modal .modal-body .wf-loader {
position: absolute;
    top: 50%;
    left: 50%;
}

div#wf-file-manager-modal .modal-body .file_renderingArea #peacock-display-container .row {
margin: 0;
}

div#wf-file-manager-modal .modal-body button.kwv,
div#wf-file-manager-modal .modal-body button.revert_kwv {
position: absolute;
    right: 2%;
    bottom: 3%;
    z-index: 2;
}

div#wf-file-manager-modal .modal-body ul.file-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active {
background: #428BCA;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

div#wf-file-manager-modal .modal-body ul.file-names li.active a {
color: #fff;
}

div#wf-file-manager-modal .modal-body div.category {
border: 1px solid #ddd;
    padding: 10px;
}

div#wf-file-manager-modal .modal-body div.category .category-title {
height: 25px;
}

div#wf-file-manager-modal .modal-body div.category-title h3 {
display: inline-block;
    position: relative;
    top: 4px;
}

div#wf-file-manager-modal .modal-body .wf-loader {
position: absolute;
    top: 50%;
    left: 50%;
}

div#wf-file-manager-modal .modal-body .file_renderingArea #peacock-display-container .row {
margin: 0;
}

div#wf-file-manager-modal .modal-body button.kwv,
div#wf-file-manager-modal .modal-body button.revert_kwv {
position: absolute;
    right: 2%;
    bottom: 3%;
    z-index: 2;
}



/*
 * CSS for template: wf-flow-modal-worker-panels-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-flow-modal-worker-panels-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .wf-search-worker {
padding: 0;
    /*margin-top: 10px;*/
    position: relative;
}

.wf-workers-container ul.filters-list>li {
display: inline;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.wf-workers-container ul.filters-list>li[data-id]:hover {
color: #428BCA;
}

.wf-workers-container .thumbnail img {
max-height: 100px;
}

.wf-workers-container .worker-image {
float: left;
    width: 100px;
}

.wf-workers-container .worker-image[alt] {
content: '\f013';
    width: 50px;
    font-family: FontAwesome;
}

.wf-workers-container .worker-panel-options {
/*flex: 0 0 auto;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*color: gray;*/
    color: gray;
    /*text-align: center;*/
    /*padding: 0;*/
    /*font-size: 1rem;*/
    opacity: 0.4;
}

.wf-workers-container .worker-panel:hover .worker-panel-options {
opacity: 1 !important;
}

.wf-workers-container .worker-panel-options [data-id] {
/*border: none;*/
    /*box-shadow: none;*/
    /*background: none;*/
    /*padding: 0;*/
}

.wf-workers-container .worker-description {
/*font-size: 10px;*/
    margin-bottom: 8px;
    color: gray;
}

.wf-workers-container .worker-panel {
border-bottom: 1px solid #DDD;
    margin: 0;
    padding: 2px 0px;
    cursor: pointer;
    user-select: none;
    height: 150px;
}

.wf-workers-container .worker-panel-heading {
display: flex;
    align-items: center;
}

.wf-workers-container .worker-panel:hover {
background: #d3f4ff73;
}

.wf-workers-container .worker-panel:hover .add_buttons,
.wf-workers-container .worker-panel.add_buttons_open .add_buttons {
display: block;
    pointer-events: all;
}

.wf-workers-container .worker-panel .add_buttons {
display: none;
    pointer-events: none;
    background-color: #FFF;
    /*transition: opacity 0.1s ease-in;*/
}

.wf-workers-container .worker-attrs {

}

.wf-workers-container .wf-search-worker {
padding: 0;
    /*margin-top: 10px;*/
    position: relative;
}

.wf-workers-container ul.filters-list>li {
display: inline;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.wf-workers-container ul.filters-list>li[data-id]:hover {
color: #428BCA;
}

.wf-workers-container .thumbnail img {
max-height: 100px;
}

.wf-workers-container .worker-image {
float: left;
    width: 100px;
}

.wf-workers-container .worker-image[alt] {
content: '\f013';
    width: 50px;
    font-family: FontAwesome;
}

.wf-workers-container .worker-panel-options {
/*flex: 0 0 auto;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*color: gray;*/
    color: gray;
    /*text-align: center;*/
    /*padding: 0;*/
    /*font-size: 1rem;*/
    opacity: 0.4;
}

.wf-workers-container .worker-panel:hover .worker-panel-options {
opacity: 1 !important;
}

.wf-workers-container .worker-panel-options [data-id] {
/*border: none;*/
    /*box-shadow: none;*/
    /*background: none;*/
    /*padding: 0;*/
}

.wf-workers-container .worker-description {
/*font-size: 10px;*/
    margin-bottom: 8px;
    color: gray;
}

.wf-workers-container .worker-panel {
border-bottom: 1px solid #DDD;
    margin: 0;
    padding: 2px 0px;
    cursor: pointer;
    user-select: none;
    height: 150px;
}

.wf-workers-container .worker-panel-heading {
display: flex;
    align-items: center;
}

.wf-workers-container .worker-panel:hover {
background: #d3f4ff73;
}

.wf-workers-container .worker-panel:hover .add_buttons,
.wf-workers-container .worker-panel.add_buttons_open .add_buttons {
display: block;
    pointer-events: all;
}

.wf-workers-container .worker-panel .add_buttons {
display: none;
    pointer-events: none;
    background-color: #FFF;
    /*transition: opacity 0.1s ease-in;*/
}

.wf-workers-container .worker-attrs {
color: gray;
    margin: 0;
}

.wf-workers-container .worker-attrs>div {
padding: 0;
    word-break: break-word;
}

.wf-workers-container .worker-panel {
position: relative;
}

.wf-workers-container .worker-panel-upper {
display: flex;
}

.wf-workers-container .worker-panel-options>div[data-id] {
padding: 7px 0;
    margin-right: 7px;
    display: flex;
    align-items: center;
}

.wf-workers-container .worker-panel-options .option-icon {
margin-right: 4px;
}

.wf-workers-container .toggle-worker-advanced-panel {
font-size: 1.3em;
    color: gray;
    cursor: pointer;
}

.wf-workers-container .toggle-worker-advanced-panel:hover {
color: #428BCA;
}

.wf-workers-container .worker-panel .worker-details {
display: none;
    margin-left: 13px;
}

.wf-workers-container .worker-panel .worker-details>div {
margin: 5px 0;
}

.wf-workers-container .close_dropdown {
padding: 4px 10px;
    position: absolute;
    right: 0px;
    top: 0;
    color: lightgray;
    font-size: 1.2em;
    z-index: 2;
}

.wf-workers-container .close_dropdown:hover {
color: gray;
}

.wf-workers-container .reset_search {
position: absolute;
    right: 115px;
    z-index: 6;
    top: 50%;
    transform: translateY(-50%);
    /* color: lightgray; */
    display: none;
}

.wf-workers-container .reset_search:hover {
color: gray;
}

.wf-workers-full-view .wf-workers-container .worker-panel {
position: relative;
    width: 32%;
    /* height: 200px; */
    margin: 10px;
}

div.workflow-modal div.workers-list .worker-panel {
border: 2px solid transparent;
}

.wf-workers-container .wf-search-worker .twitter-typeahead {
width: 100%;
}

.wf-workers-container .worker-panel button[data-id="select"] {
display: none;
}

.wf-workers-container .worker-panel:hover button[data-id="select"],
.wf-workers-container .worker-panel.selected button[data-id="select"] {
display: block;
}

.wf-workers-container .worker-panel:hover .worker-name {
width: calc(100% - 177px);
    white-space: nowrap;
}

.wf-workers-container .worker-description {
width: 100% !important;
}

.wf-workers-container .worker-label {
display: none;
}

.wf-workers-container.showWorkerLabels .worker-label {
display: block;
    margin-bottom: 8px;
    font-size: 1.4em;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-workers-container .wf-search-worker {
padding: 0;
    /*margin-top: 10px;*/
    position: relative;
}

.wf-workers-container ul.filters-list>li {
display: inline;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.wf-workers-container ul.filters-list>li[data-id]:hover {
color: #428BCA;
}

.wf-workers-container .thumbnail img {
max-height: 100px;
}

.wf-workers-container .worker-image {
float: left;
    width: 100px;
}

.wf-workers-container .worker-image[alt] {
content: '\f013';
    width: 50px;
    font-family: FontAwesome;
}

.wf-workers-container .worker-panel-options {
/*flex: 0 0 auto;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*color: gray;*/
    color: gray;
    /*text-align: center;*/
    /*padding: 0;*/
    /*font-size: 1rem;*/
    opacity: 0.4;
}

.wf-workers-container .worker-panel:hover .worker-panel-options {
opacity: 1 !important;
}

.wf-workers-container .worker-panel-options [data-id] {
/*border: none;*/
    /*box-shadow: none;*/
    /*background: none;*/
    /*padding: 0;*/
}

.wf-workers-container .worker-description {
/*font-size: 10px;*/
    margin-bottom: 8px;
    color: gray;
}

.wf-workers-container .worker-panel {
border-bottom: 1px solid #DDD;
    margin: 0;
    padding: 2px 0px;
    cursor: pointer;
    user-select: none;
    height: 150px;
}

.wf-workers-container .worker-panel-heading {
display: flex;
    align-items: center;
}

.wf-workers-container .worker-panel:hover {
background: #d3f4ff73;
}

.wf-workers-container .worker-panel:hover .add_buttons,
.wf-workers-container .worker-panel.add_buttons_open .add_buttons {
display: flex;
    pointer-events: all;
}

.wf-workers-container .worker-panel .add_buttons {
display: none;
    pointer-events: none;
    background-color: #FFF;
    /*transition: opacity 0.1s ease-in;*/
}

.wf-workers-container .worker-attrs {
color: gray;
    margin: 0;
}

.wf-workers-container .worker-attrs>div {
padding: 0;
    word-break: break-word;
}

.wf-workers-container .worker-panel {
position: relative;
}

.wf-workers-container .worker-panel-upper {
display: flex;
}

.wf-workers-container .worker-panel-options>div[data-id] {
padding: 7px 0;
    margin-right: 7px;
    display: flex;
    align-items: center;
}

.wf-workers-container .worker-panel-options .option-icon {
margin-right: 4px;
}

.wf-workers-container .toggle-worker-advanced-panel {
font-size: 1.3em;
    color: gray;
    cursor: pointer;
}

.wf-workers-container .toggle-worker-advanced-panel:hover {
color: #428BCA;
}

.wf-workers-container .worker-panel .worker-details {
display: none;
    margin-left: 13px;
}

.wf-workers-container .worker-panel .worker-details>div {
margin: 5px 0;
}

.wf-workers-container .close_dropdown {
padding: 4px 10px;
    position: absolute;
    right: 0px;
    top: 0;
    color: lightgray;
    font-size: 1.2em;
    z-index: 2;
}

.wf-workers-container .close_dropdown:hover {
color: gray;
}

.wf-workers-container .reset_search {
position: absolute;
    right: 50px;
    z-index: 6;
    top: 50%;
    transform: translateY(-50%);
    color: lightgray;
    display: none;
}

.wf-workers-container .reset_search:hover {
color: gray;
}

.wf-workers-full-view .wf-workers-container .worker-panel {
position: relative;
    width: 32%;
    /* height: 200px; */
    margin: 10px;
}

div.workflow div.workers-list.wfModel .worker-panel.ui-selecting,
div.workflow div.workers-list.wfModel .worker-panel.ui-selected,
div.workflow div.workers-list .worker-panel.selected,
.wf-workers-container div.workers-list .worker-panel.selected {
background-color: #d3f4ff73;
}

div.workflow-modal div.workers-list .worker-panel {
border: 2px solid transparent;
}

.wf-workers-container .wf-search-worker .twitter-typeahead {
width: 100%;
}

.wf-workers-container .worker-panel:hover .worker-name {
width: calc(100% - 177px);
    white-space: nowrap;
}

.wf-workers-container .worker-description {
width: 100% !important;
}

.wf-workers-container .fora-search .fora-print {
white-space: normal;
    word-break: break-all;
}



/*
 * CSS for template: wf-image-modal-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-image-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-image-modal .modal-body {
padding: 0 !important;
}

div#wf-image-modal .modal-body ul.image-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-image-modal .modal-body ul.image-names li.active {
background: #428BCA;
}

div#wf-image-modal .modal-body ul.image-names li.active a {
color: #fff;
}

div#wf-image-modal .modal-body .img-container {
min-height: 200px;
    margin-bottom: 2rem;
}

div#wf-image-modal .modal-body .wf-enlarged-image {
max-width: 100%;
}

div#wf-image-modal .modal-body .cropper-container {
margin: 0 auto;
}

div#wf-image-modal .modal-body .docs-data .input-group {
margin-bottom: 1em;
}

div#wf-image-modal .modal-body {
padding: 0 !important;
}

div#wf-image-modal .modal-body ul.image-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-image-modal .modal-body ul.image-names li.active {
background: #428BCA;
}

div#wf-image-modal .modal-body ul.image-names li.active a {
color: #fff;
}

div#wf-image-modal .modal-body .img-container {
min-height: 200px;
    margin-bottom: 2rem;
}

div#wf-image-modal .modal-body .wf-enlarged-image {
max-width: 100%;
}

div#wf-image-modal .modal-body .cropper-container {
margin: 0 auto;
}

div#wf-image-modal .modal-body .docs-data .input-group {
margin-bottom: 1em;
}

div#wf-image-modal .modal-body {
padding: 0 !important;
}

div#wf-image-modal .modal-body ul.image-names li {
cursor: pointer;
    margin: 2px;
    padding-left: 10px;
}

div#wf-image-modal .modal-body ul.image-names li.active {
background: #428BCA;
}

div#wf-image-modal .modal-body ul.image-names li.active a {
color: #fff;
}

div#wf-image-modal .modal-body .img-container {
min-height: 200px;
    margin-bottom: 2rem;
}

div#wf-image-modal .modal-body .wf-enlarged-image {
max-width: 100%;
}

div#wf-image-modal .modal-body .cropper-container {
margin: 0 auto;
}

div#wf-image-modal .modal-body .docs-data .input-group {
margin-bottom: 1em;
}



/*
 * CSS for template: wf-iterator-info-box-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-iterator-info-box-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-iterator-info .wf-iterator-label {
background: grey;
    color: #FFF;
    width: 70px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 2px 0;
    position: relative;
    top: 3px;
    z-index: 2;
    background: darkgrey;
    font-weight: bold;
}

div.workflow .wf-iterator-info .wf-iterator-buttons {
background: #FFF;
    border: 1px solid #DDD;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

body span.wf-iterator {
pointer-events: all !important;
}

div.workflow .wf-iterator-info .wf-iterator-label {
background: grey;
    color: #FFF;
    width: 70px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 2px 0;
    position: relative;
    top: 3px;
    z-index: 2;
    background: darkgrey;
    font-weight: bold;
}

div.workflow .wf-iterator-info .wf-iterator-buttons {
background: #FFF;
    border: 1px solid #DDD;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: space-between;
}

body span.wf-iterator {
pointer-events: all !important;
}

body span.wf-iterator {
pointer-events: all !important;
}



/*
 * CSS for template: wf-load-workflow-modal-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-load-workflow-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .inputs-view-container ul#field-items.has-input-widths {
    display: flex;
    flex-wrap: wrap;
}

div.workflow-modal .inputs-view-container ul#field-items.has-input-widths li.field-item {
    border-right: 1px solid #DDD;
}

div.workflow .wf-exec-message>.close {
pointer-events: all !important;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col {
cursor: pointer;
    z-index: 2;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col:hover {
color: red;
}

div.workflow .full-view>.wf-dropzone:not(.btn):not(.field-item-contents) {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .full-view>.wf-dropzone .wf-dropzone-box {
left: 0;
    top: 0;
    width: 98%;
    height: 95%;
    background: #428bca1a;
    border: 2px dashed #AAA;
}

div.workflow .wf-main-container.dz-drag-hover .full-view>.wf-dropzone {
opacity: 1 !important;
    visibility: visible !important;
}

div.workflow .wf-main-container.dropping .full-view>.wf-dropzone {
display: none !important;
}

div.workflow.workflow .modal-dialog {
width: 100% !important;
    margin: 0 !important;
}

div.workflow.workflow .modal-dialog .modal-body {
padding: 0 !important;
    padding-top: 10px !important;
}

div.workflow .modal-content {
height: auto;
    min-height: 100%;
    font-family: sans-serif !important;
}

div.workflow-modal #wf-worker-inputs .col-md-half {
position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 4.166666665%;
    float: left;
}

div.workflow-modal .execution-log,
div#wf-execute-workflow-node-modal div.outputs-container {
border: none !important;
    padding: 0 !important;
    overflow: auto;
}

div.workflow-modal span.op-value {
position: relative;
    top: 7px;
}

div.workflow-modal .wf-dropzone .fa,
div#wf-execute-workflow-node-modal .wf-dropzone .fa {
pointer-events: none;
}

div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-on,
div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-off {
font-size: 9px !important;
}

div.workflow-modal li.field-item textarea {
min-height: 70px;
    resize: vertical;
}

div.workflow-modal li.field-item .field-row:first-child {
padding: 12px 12px 0 12px;
}

div.workflow-modal li.field-item .field-row {
display: flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    text-align: center;
}

div.workflow-modal li.field-item .field-row .ds_dataset_option .prev_outputs.select-bs {
width: 100%;
    padding: 0;
}

div.workflow-modal li.field-item .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 50px);
}

div.workflow-modal li.field-item .hasOverlaySelection .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 175px);
}

div.workflow-modal li.field-item .op-option-label {
/*display: none;*/
}

div.workflow-modal li.field-item .field-row:last-child {
padding: 0 12px 12px 12px;
    /*border-bottom: 1px solid #e5e5e5;*/
}

div.workflow-modal li.field-item .field-name {
text-align: left;
    margin: 0;
    /*display: flex;*/
    align-items: center;
    width: 100%;
}

div.workflow-modal li.field-item .field-name .pl-editor-title {
padding: 3px 0;
}

div.workflow-modal li.field-item .field-name input[data-inputvalue="label"] {
flex: 1 1 auto;
}

div.workflow-modal li.field-item .field-type {
/*font-size: 0.9em;*/
    /*margin-right: 8px;*/
}

div.workflow-modal .modal-dialog .formbuilder-container .inputs-builder-container.row {
padding: 0;
}

div.workflow-modal .modal-dialog .formbuilder-container .row {
font-size: inherit;
}

div.workflow-modal .modal-dialog {
width: 90%;
    margin: 10px auto;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-body .wf-worker-config-view {
flex: 1 1 auto;
    overflow: auto;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-header .modal-title {
height: 60px;
}

div.workflow-modal .modal-body ul.nav-tabs li {
/*float: right;*/
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li {
float: right;
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li.sortable-placeholder {
height: 41px;
    width: 110px;
    background-color: #CCC;
}

div.workflow-modal #wf-node-configuration .inputs-header {
margin: 10px;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot {
position: fixed;
    top: 12px;
    left: 12px;
    cursor: pointer;
    /*background: rgba(43,48,54,0.95);*/
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    display: none;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot.toggled {
color: lightgreen !important;
}

div.workflow-modal .modal-body div.canvas-snapshot.toggled {
width: 35%;
    left: -35%;
}

div.workflow-modal .modal-body div.canvas-snapshot {
position: fixed;
    left: 0;
    width: 0;
    height: 90%;
    background: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow-modal .modal-body div.canvas-snapshot img {
position: relative;
    top: 35%;
}

div.workflow-modal .modal-body div.wf-builder-inputs-list>ul#field-items {
overflow: auto;
    margin-bottom: 0;
}

div.workflow-modal .modal-body span.node-input {
position: relative;
    top: 7px;
}

div.workflow-modal .worker-inputs.condensed {
border-right: 1px solid #ccc;
}

div.workflow-modal .modal-body .wf-grouping-context-menu {
position: absolute;
    display: none;
    background: #FFF;
    z-index: 2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #CCC;
}

div.workflow-modal .modal-body .wf-grouping-context-menu>li {
background-color: transparent;
    border: none;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover {
background-color: #428BCA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover a {
color: #FFF;
    text-decoration: none;
}

div.workflow-modal ul#field-items li.field-item {
/*border-right: 5px solid transparent;*/
    position: relative;
    /*display: flex;*/
    align-items: center;
    border-bottom: 1px solid #DDD;
}
/* <ticket>DW-2727</ticket> full-width editing row with order so edited item moves to start of its row only */
div.workflow-modal ul#field-items.has-input-widths {
    display: flex;
    flex-wrap: wrap;
}
div.workflow-modal ul#field-items.has-input-widths li.field-item.isEditing {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
}
div.workflow-modal ul#field-items li.field-item.isEditing {
    width: 100% !important;
}

div.workflow-modal ul#field-items li.field-with-siblings li.field-item {
border: none;
}

div.workflow-modal ul#field-items li.field-with-siblings {
border-bottom: 1px solid #DDD;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs.field-item {
display: block;
    padding: 0;
    z-index: 2;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs .field-item {
border-bottom: none;
}

div.workflow-modal ul.field-items li.field-item {
border-bottom: 1px solid #DDD;
}

div.workflow-modal.docked .modal-body ul#field-items li.field-item {
display: block;
}

div.workflow-modal li.field-item.highlighted {
background: lightyellow;
}

div.workflow-modal ul#field-items li.field-item .field-item-contents {
width: calc(100% - 0px);
    padding-bottom: 10px;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover {
background: #e6ffe6 !important;
    border: 1px solid var(--plugin-primary-color);
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover>div {
opacity: 0.5;
    pointer-events: none;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover:after {
content: 'Drop file(s) here';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 2em;
    color: gray;
    pointer-events: none;
}

div.workflow-modal ul#field-items li.ui-selecting {
background-color: lightblue;
}

div.workflow-modal ul#field-items li.ui-selected {
background-color: lightblue;
}

div.workflow-modal ul#field-items li.field-item .ip-type {
/*padding: 0 10px;*/
    /*margin-left: 10px;*/
    margin-right: 5px;
    display: flex;
    align-items: center;
}

div.workflow-modal li.field-item[data-invalid="true"] .field-name .required {
color: red;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight {
background-color: #428BCA;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight a {
color: #FFF !important;
}

div.workflow-modal .background-highlight,
div#wf-execute-workflow-node-modal .background-highlight {
background-color: #428BCA;
    color: #FFF !important;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}

div.workflow-modal #wf-worker-inputs li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

div.workflow-modal #wf-worker-inputs li.field-item .clear-textarea {
position: absolute;
    top: 4px;
    right: 30px;
    z-index: 3;
    cursor: pointer;
    display: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}

div.workflow-modal #wf-worker-inputs li.field-item .repeat-input {
cursor: pointer;
}

div.workflow-modal #wf-worker-inputs li.field-item .input_range_settings.active {
color: #5cb85c;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote-lookup-list {
padding: 0;
    margin-right: 0;
}

div.workflow-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item {
position: relative;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead {
width: 100%;
    /* display: block!important; */
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead input {
width: 100% !important;
}

div.workflow-modal .modal-body li.field-item .datasource-options .previous_outputs_operator.bootstrap-select,
div.workflow-modal .modal-body li.field-item .dynamic-worker-output .dynamic_outputs_operator.bootstrap-select {
float: left;
    padding: 0 5px;
}

div.workflow-modal .header-nav {
display: flex;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal .header-nav li {
font-size: 1.4em;
}

div.workflow-modal .header-nav li a {
padding: 6px 15px;
    height: 100%;
    border-bottom: 1px solid transparent;
    color: #4f5359;
}

div.workflow-modal .header-nav li.active>a {
color: #428BCA !important;
    border-bottom: 1px solid #428BCA !important;
    background: none;
    border-radius: 0;
}

div.workflow-modal .header-nav li.active>a .badge {
color: #FFF;
    background-color: #428bca;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value {
color: #777;
    cursor: not-allowed;
    background-color: #eee;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value input,
div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value .bootstrap-select {
pointer-events: none;
}

div.workflow-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

div.workflow-modal small.datasource_info {
/*margin-top: 17px;*/
    position: relative;
    top: 5px;
    display: block;
    margin: 6px 0;
}

div.workflow-modal small.datasource_info .ds-worker {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal small.datasource_info .ds-worker-output {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal li.field-item .ip-desc,
div.workflow-modal li.field-item .op-message {
/*color: dimgray;*/
    display: block;
    margin: 0 !important;
}

div.workflow-modal #wf-worker-inputs.hasFixedInput .name-container {
display: none;
}

div.workflow-modal li.field-item .field-name-container {
/*text-align: left;*/
}

div.workflow-modal div.wf-dropzone:not(.field-item-contents) {
min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, 0.3);
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-center {
padding: 0 !important;
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container.hasErrorLogs>.ui-layout-center {
height: calc(100% - 75px) !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-resizer {
background: #DDD !important;
    height: 3px !important;
    cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}

div.workflow-modal #wf-worker-switch .node-arguments {
color: #5f5f5f;
}

div#wf-execute-workflow-node-modal .modal-header .navigate,
div.workflow-modal .modal-header .navigate {
/*position: absolute;*/
    /*right: 7%;*/
    /*top: 10px;*/
    margin: 0 !important;
    display: inline-block;
    margin-right: 10px !important;
}

div#wf-execute-workflow-node-modal .modal-header .navigate.pagination li a,
div.workflow-modal .modal-header .pagination li a {
/*padding: 2px 6px;*/
    cursor: pointer;
}

div.workflow div.modal-header .navigation-tabs {
border-bottom: none;
}

div.workflow div.modal-header .navigation-tabs li.active>a {
color: #FFF;
    background-color: #164d82;
    border-color: transparent;
}

div.workflow div.modal-header .navigation-tabs li>a {
color: #FFF;
    padding: 7px 15px;
}

div.workflow div.modal-header .navigation-tabs li:not(.active)>a:hover {
border-color: transparent;
    background-color: #164d82;
}

div.workflow-modal .col-md-0-5,
div.workflow-modal .col-md-1-5 {
position: relative;
    float: left;
    padding: 0 15px;
    min-height: 1px;
}

div.workflow-modal .col-md-0-5 {
width: 4.166666665%;
}

div.workflow-modal .col-md-1-5 {
width: 12.499999995%;
}

div.workflow-modal .worker-lastupdated,
div.workflow-modal .worker-lastexecuted {
font-weight: 500;
    margin-left: 5px;
    position: relative;
    /*top: -2px;*/
    float: left;
}

div.workflow-modal .modal-body .operations_container,
div#wf-execute-workflow-node-modal .operations_container {
max-height: 300px;
    overflow: auto;
}

div.workflow-modal .modal-body [data-operation]:hover .delete_operation {
opacity: 1 !important;
}

div.workflow-modal .modal-body [data-operation] .operation_options,
div#wf-execute-workflow-node-modal [data-operation] .operation_options {
padding: 8px;
}

div.workflow-modal .modal-body [data-operation] .operation_options .row,
div#wf-execute-workflow-node-modal [data-operation] .operation_options .row {
padding: 0 !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
}

div.workflow-modal [data-operation] .operation-option,
div#wf-execute-workflow-node-modal [data-operation] .operation-option {
margin: 6px 0;
    position: relative;
}

div.workflow-modal .modal-body .reset-remote-base-url {
position: absolute;
    right: 7px;
    font-size: 1.2em;
    z-index: 2;
    color: #AAA;
    top: 9px;
    cursor: pointer;
}

div.workflow-modal .modal-body .reset-remote-base-url:hover {
color: red !important;
}

div.workflow-modal .modal-header {
background: #fff;
    color: #4f5359;
    position: relative;
}

div.workflow-modal .modal-header .modal-title {
float: left;
    font-size: 17px;
}

div.workflow-modal .modal-header .worker-type {
/*font-size: 0.8em!important;*/
    margin-bottom: 0;
    position: relative;
}

div.workflow-modal #toggle-canvas-snapshot {
cursor: pointer;
}

div.workflow-modal #toggle-canvas-snapshot:hover {
color: red;
}

div.workflow-modal #toggle-canvas-snapshot.toggled {
color: red !important;
}

div.workflow .wf-exec-message>.close {
pointer-events: all !important;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col {
cursor: pointer;
    z-index: 2;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col:hover {
color: red;
}

div.workflow .full-view>.wf-dropzone:not(.btn):not(.field-item-contents) {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .full-view>.wf-dropzone .wf-dropzone-box {
left: 0;
    top: 0;
    width: 98%;
    height: 95%;
    background: #428bca1a;
    border: 2px dashed #AAA;
}

div.workflow .wf-main-container.dz-drag-hover .full-view>.wf-dropzone {
opacity: 1 !important;
    visibility: visible !important;
}

div.workflow .wf-main-container.dropping .full-view>.wf-dropzone {
display: none !important;
}

div.workflow.workflow .modal-dialog {
width: 100% !important;
    margin: 0 !important;
}

div.workflow.workflow .modal-dialog .modal-body {
padding: 0 !important;
    padding-top: 10px !important;
}

div.workflow .modal-content {
height: auto;
    min-height: 100%;
    font-family: sans-serif !important;
}

div.workflow-modal #wf-worker-inputs .col-md-half {
position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 4.166666665%;
    float: left;
}

div.workflow-modal .execution-log,
div#wf-execute-workflow-node-modal div.outputs-container {
border: none !important;
    padding: 0 !important;
    overflow: auto;
}

div.workflow-modal span.op-value {
position: relative;
    top: 7px;
}

div.workflow-modal .wf-dropzone .fa,
div#wf-execute-workflow-node-modal .wf-dropzone .fa {
pointer-events: none;
}

div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-on,
div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-off {
font-size: 9px !important;
}

div.workflow-modal li.field-item textarea {
min-height: 70px;
    resize: vertical;
}

div.workflow-modal li.field-item .field-row:first-child {
padding: 12px 12px 0 12px;
}

div.workflow-modal li.field-item .field-row {
display: flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    text-align: center;
}

div.workflow-modal li.field-item .field-row .ds_dataset_option .prev_outputs.select-bs {
width: 100%;
    padding: 0;
}

div.workflow-modal li.field-item .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 50px);
}

div.workflow-modal li.field-item .hasOverlaySelection .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 175px);
}

div.workflow-modal li.field-item .op-option-label {
/*display: none;*/
}

div.workflow-modal li.field-item .field-row:last-child {
padding: 0 12px 12px 12px;
    /*border-bottom: 1px solid #e5e5e5;*/
}

div.workflow-modal li.field-item .field-name {
text-align: left;
    margin: 0;
    /*display: flex;*/
    align-items: center;
    width: 100%;
}

div.workflow-modal li.field-item .field-name .pl-editor-title {
padding: 3px 0;
}

div.workflow-modal li.field-item .field-name input[data-inputvalue="label"] {
flex: 1 1 auto;
}

div.workflow-modal li.field-item .field-type {
/*font-size: 0.9em;*/
    /*margin-right: 8px;*/
}

div.workflow-modal .modal-dialog .formbuilder-container .inputs-builder-container.row {
padding: 0;
}

div.workflow-modal .modal-dialog .formbuilder-container .row {
font-size: inherit;
}

div.workflow-modal .modal-dialog {
width: 90%;
    margin: 10px auto;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-header .modal-title {
height: 60px;
}

div.workflow-modal .modal-body ul.nav-tabs li {
/*float: right;*/
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li {
float: right;
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li.sortable-placeholder {
height: 41px;
    width: 110px;
    background-color: #CCC;
}

div.workflow-modal #wf-node-configuration .inputs-header {
margin: 10px;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot {
position: fixed;
    top: 12px;
    left: 12px;
    cursor: pointer;
    /*background: rgba(43,48,54,0.95);*/
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    display: none;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot.toggled {
color: lightgreen !important;
}

div.workflow-modal .modal-body div.canvas-snapshot.toggled {
width: 35%;
    left: -35%;
}

div.workflow-modal .modal-body div.canvas-snapshot {
position: fixed;
    left: 0;
    width: 0;
    height: 90%;
    background: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow-modal .modal-body div.canvas-snapshot img {
position: relative;
    top: 35%;
}

div.workflow-modal .modal-body div.wf-builder-inputs-list>ul#field-items {
overflow: auto;
    margin-bottom: 0;
}

div.workflow-modal .modal-body span.node-input {
position: relative;
    top: 7px;
}

div.workflow-modal .worker-inputs.condensed {
border-right: 1px solid #ccc;
}

div.workflow-modal .modal-body .wf-grouping-context-menu {
position: absolute;
    display: none;
    background: #FFF;
    z-index: 2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #CCC;
}

div.workflow-modal .modal-body .wf-grouping-context-menu>li {
background-color: transparent;
    border: none;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover {
background-color: #428BCA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover a {
color: #FFF;
    text-decoration: none;
}

div.workflow-modal ul#field-items li.field-item {
/*border-right: 5px solid transparent;*/
    position: relative;
    /*display: flex;*/
    align-items: center;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal ul#field-items li.field-with-siblings li.field-item {
border: none;
}

div.workflow-modal ul#field-items li.field-with-siblings {
border-bottom: 1px solid #DDD;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs.field-item {
display: block;
    padding: 0;
    z-index: 2;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs .field-item {
border-bottom: none;
}

div.workflow-modal ul.field-items li.field-item {
border-bottom: 1px solid #DDD;
}

div.workflow-modal.docked .modal-body ul#field-items li.field-item {
display: block;
}

div.workflow-modal li.field-item.highlighted {
background: lightyellow;
}

div.workflow-modal ul#field-items li.field-item .field-item-contents {
width: calc(100% - 0px);
    padding-bottom: 10px;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover {
background: #e6ffe6 !important;
    border: 1px solid var(--plugin-primary-color);
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover>div {
opacity: 0.5;
    pointer-events: none;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover:after {
content: 'Drop file(s) here';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 2em;
    color: gray;
    pointer-events: none;
}

div.workflow-modal ul#field-items li.ui-selecting {
background-color: lightblue;
}

div.workflow-modal ul#field-items li.ui-selected {
background-color: lightblue;
}

div.workflow-modal ul#field-items li.field-item .ip-type {
/*padding: 0 10px;*/
    /*margin-left: 10px;*/
    margin-right: 5px;
    display: flex;
    align-items: center;
}

div.workflow-modal li.field-item[data-invalid="true"] .field-name .required {
color: red;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight {
background-color: #428BCA;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight a {
color: #FFF !important;
}

div.workflow-modal .background-highlight,
div#wf-execute-workflow-node-modal .background-highlight {
background-color: #428BCA;
    color: #FFF !important;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}

div.workflow-modal #wf-worker-inputs li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

div.workflow-modal #wf-worker-inputs li.field-item .clear-textarea {
position: absolute;
    top: 4px;
    right: 30px;
    z-index: 3;
    cursor: pointer;
    display: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}

div.workflow-modal #wf-worker-inputs li.field-item .repeat-input {
cursor: pointer;
}

div.workflow-modal #wf-worker-inputs li.field-item .input_range_settings.active {
color: #5cb85c;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote-lookup-list {
padding: 0;
    margin-right: 0;
}

div.workflow-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item {
position: relative;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead {
width: 100%;
    /* display: block!important; */
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead input {
width: 100% !important;
}

div.workflow-modal .modal-body li.field-item .datasource-options .previous_outputs_operator.bootstrap-select,
div.workflow-modal .modal-body li.field-item .dynamic-worker-output .dynamic_outputs_operator.bootstrap-select {
float: left;
    padding: 0 5px;
}

div.workflow-modal .header-nav {
display: flex;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal .header-nav li {
font-size: 1.4em;
}

div.workflow-modal .header-nav li a {
padding: 6px 15px;
    height: 100%;
    border-bottom: 1px solid transparent;
    color: #4f5359;
}

div.workflow-modal .header-nav li.active>a {
color: #428BCA !important;
    border-bottom: 1px solid #428BCA !important;
    background: none;
    border-radius: 0;
}

div.workflow-modal .header-nav li.active>a .badge {
color: #FFF;
    background-color: #428bca;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value {
color: #777;
    cursor: not-allowed;
    background-color: #eee;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value input,
div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value .bootstrap-select {
pointer-events: none;
}

div.workflow-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

div.workflow-modal small.datasource_info {
/*margin-top: 17px;*/
    position: relative;
    top: 5px;
    display: block;
    margin: 6px 0;
}

div.workflow-modal small.datasource_info .ds-worker {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal small.datasource_info .ds-worker-output {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal li.field-item .ip-desc,
div.workflow-modal li.field-item .op-message {
/*color: dimgray;*/
    display: block;
    margin: 0 !important;
}

div.workflow-modal #wf-worker-inputs.hasFixedInput .name-container {
display: none;
}

div.workflow-modal li.field-item .field-name-container {
/*text-align: left;*/
}

div.workflow-modal div.wf-dropzone:not(.field-item-contents) {
min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, 0.3);
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-center {
padding: 0 !important;
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container.hasErrorLogs>.ui-layout-center {
height: calc(100% - 75px) !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-resizer {
background: #DDD !important;
    height: 3px !important;
    cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}

div.workflow-modal #wf-worker-switch .node-arguments {
color: #5f5f5f;
}

div#wf-execute-workflow-node-modal .modal-header .navigate,
div.workflow-modal .modal-header .navigate {
/*position: absolute;*/
    /*right: 7%;*/
    /*top: 10px;*/
    margin: 0 !important;
    display: inline-block;
    margin-right: 10px !important;
}

div#wf-execute-workflow-node-modal .modal-header .navigate.pagination li a,
div.workflow-modal .modal-header .pagination li a {
/*padding: 2px 6px;*/
    cursor: pointer;
}

div.workflow div.modal-header .navigation-tabs {
border-bottom: none;
}

div.workflow div.modal-header .navigation-tabs li.active>a {
color: #FFF;
    background-color: #164d82;
    border-color: transparent;
}

div.workflow div.modal-header .navigation-tabs li>a {
color: #FFF;
    padding: 7px 15px;
}

div.workflow div.modal-header .navigation-tabs li:not(.active)>a:hover {
border-color: transparent;
    background-color: #164d82;
}

div.workflow-modal .col-md-0-5,
div.workflow-modal .col-md-1-5 {
position: relative;
    float: left;
    padding: 0 15px;
    min-height: 1px;
}

div.workflow-modal .col-md-0-5 {
width: 4.166666665%;
}

div.workflow-modal .col-md-1-5 {
width: 12.499999995%;
}

div.workflow-modal .worker-lastupdated,
div.workflow-modal .worker-lastexecuted {
font-weight: 500;
    margin-left: 5px;
    position: relative;
    /*top: -2px;*/
    float: left;
}

div.workflow-modal .modal-body .operations_container,
div#wf-execute-workflow-node-modal .operations_container {
max-height: 300px;
    overflow: auto;
}

div.workflow-modal .modal-body [data-operation]:hover .delete_operation {
opacity: 1 !important;
}

div.workflow-modal .modal-body [data-operation] .operation_options,
div#wf-execute-workflow-node-modal [data-operation] .operation_options {
padding: 8px;
}

div.workflow-modal .modal-body [data-operation] .operation_options .row,
div#wf-execute-workflow-node-modal [data-operation] .operation_options .row {
padding: 0 !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
}

div.workflow-modal [data-operation] .operation-option,
div#wf-execute-workflow-node-modal [data-operation] .operation-option {
margin: 6px 0;
    position: relative;
}

div.workflow-modal .modal-body .reset-remote-base-url {
position: absolute;
    right: 7px;
    font-size: 1.2em;
    z-index: 2;
    color: #AAA;
    top: 9px;
    cursor: pointer;
}

div.workflow-modal .modal-body .reset-remote-base-url:hover {
color: red !important;
}

div.workflow-modal .modal-header {
background: #fff;
    color: #4f5359;
    position: relative;
}

div.workflow-modal .modal-header .modal-title {
float: left;
    font-size: 17px;
}

div.workflow-modal .modal-header .worker-type {
/*font-size: 0.8em!important;*/
    margin-bottom: 0;
    position: relative;
}

div.workflow-modal #toggle-canvas-snapshot {
cursor: pointer;
}

div.workflow-modal #toggle-canvas-snapshot:hover {
color: red;
}

div.workflow-modal #toggle-canvas-snapshot.toggled {
color: red !important;
}

div.workflow-modal[data-mode="preview"] #worker_sync,
div.workflow-modal[data-mode="preview"] ul.navigate,
div.workflow-modal[data-mode="preview"] #toggle-canvas-snapshot,
div.workflow-modal[data-mode="preview"] li.wf-worker-validations,
div.workflow-modal[data-mode="preview"] li.wf-worker-switch {
display: none;
}

div.workflow-modal li.field-item .fileAbsent .file-view {
display: none;
}

div#wf-execute-workflow-node-modal.workflow-modal.carouselView .modal-dialog.simpleView {
width: 100% !important;
    margin: 0;
}

div.workflow-modal.carouselView .modal-footer #apply,
div.workflow-modal.carouselView .modal-header #minimize {
display: none;
}

div.workflow-modal .modal-body .exp-builder-container {
padding: 15px;
}

div.workflow-modal .viz-fields #viz_preview_options {
border-right: none;
    margin-right: 0;
}

div.workflow-modal label,
div.workflow label {
display: inline-block !important;
}

div.workflow-modal li.field-item div.bootstrap-select.add_to_reporter {
display: inline-block !important;
    width: auto !important;
}

div.workflow-modal div:not(.formbuilder-container) li.field-item .add_to_reporter_list li.checked:before {
content: '\f00c';
    font-family: FontAwesome;
    color: #428bca;
    position: absolute;
    left: 2px;
    top: 0;
}

div.workflow-modal .iterations-list {
display: flex;
    flex-wrap: wrap;
}

div.workflow-modal .iterations-list .panel-body {
overflow: auto;
    padding: 0;
}

div.workflow-modal .iterations-list div.d3view-inputsBuilder {
border: none
}

div.workflow-modal li.field-item .handsontable_container .ht_master {
min-height: 100px;
}

div.workflow-modal>.modal-dialog {
transform: none !important;
}

div.workflow-modal li.field-with-siblings {
min-height: 150px;
}

div.workflow-modal ul#field-items li.field-item.isSibling {
border-bottom: none;
}

div.workflow-modal li.field-item .select2-container .select2-choice {
height: 34px;
    background: none;
    text-align: left;
    color: #000;
    font-weight: 500;
    border-width: 1.5px;
    border-color: #AAA;
    display: flex;
    align-items: center;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .btn.btn-sm {
height: 34px !important;
    padding: 10px 15px;
    border-radius: 0;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view div.workflow-modal .wf-worker-config-view li.field-item .field-name {
word-break: break-word;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view div.workflow-modal .wf-worker-config-view li.field-item .field-right-menu {
display: none;
}

div.workflow-modal .worker-visualizations {
display: flex;
    flex-wrap: wrap;
}

div.workflow-modal .wf-worker-config-container[data-locked="true"] .field-right-menu,
div.workflow-modal .wf-worker-config-container[data-locked="true"] .datasource_container,
div.workflow-modal .wf-worker-config-container[data-locked="true"] .worker-io-mapper,
div.workflow-modal .wf-worker-config-container[data-locked="true"] [data-id="worker_sync"],
div.workflow-modal .wf-worker-config-container[data-locked="true"] #verify {
display: none;
}

div.workflow-modal.modal.docked {
width: 40%;
    height: 100%;
    left: unset !important;
}

div.workflow-modal.modal.docked .modal-dialog {
width: 100% !important;
}

div.workflow-modal.modal.docked .modal-dialog .modal-content {
border-color: #DDD;
}

div.workflow-modal.modal.docked .wf-worker-config-view .wf-worker-config-container {
height: calc(100% - 120px) !important;
}

div.workflow-modal .modal-header #dock {

}

div.workflow-modal.modal.docked .modal-title-container {
width: 10px;
}

div.workflow-modal.modal.docked .modal-title-container .worker-name {
display: none !important;
}

div.workflow-modal.modal.docked .pagination.navigate .nav-text {
display: none;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list {
height: 100% !important;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items {
height: 100% !important;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .input-value-container>.input-group {
width: 100%;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .datasource_container {
display: block !important;
    margin-bottom: 5px;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .pl-editor-title {
padding: 4px 6px;
}

div.workflow-modal.modal.docked ul.validations-list li.field-item>div.row div[class*=col-md] {
width: 100%;
    margin-bottom: 6px;
}

div.workflow-modal.modal.docked ul.validations-list li.field-item[data-validation-status="success"] {

}

div.workflow-modal.modal.docked .decision_configs select.form-control {
width: auto !important;
}

div.workflow-modal.modal.docked .formbuilder-container li.field-item div[class*=col-md] {
width: 100%;
    margin-bottom: 8px;
}

div.workflow-modal.modal.docked .formbuilder-container .carousel-header .filter-container,
div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .sample-input-label,
div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .sample-input-options {
display: none;
}

div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .wf-input-label {
justify-content: center;
}

div.workflow-modal.modal.docked .formbuilder-container .d3view-form-builder-container {
height: 100%;
    overflow: auto;
}

div.workflow-modal div.dataviewer .toggle-text-view {
display: block;
}

div.workflow-modal li.field-item .ip-formfilters>.formfilters {
min-height: 500px;
}

div.workflow-modal li.field-item .form_table_container>.formfilters {
/*min-height: 300px!important;*/
}

div.workflow-modal li.field-item .form_table_container .flexFilters .filter-tree-container {
height: 100% !important;
}

div.workflow-modal li.field-item .form_table_container .flexFilters .filter-tree-container .filter-default,
div.workflow-modal li.field-item .form_table_container .flexFilters .filter-tree-container .filter-tree,
div.workflow-modal li.field-item .form_table_container .flexFilters .filter-tree-container .filter-accordion {
min-height: 300px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item {
display: block;
    /*margin: 0 10px;*/
    padding: 10px;
    /*border: none!important;*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .field-item-footer,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .field-item-footer {
display: none;
}

div.workflow-modal li.field-item .handsontable_container[data-uniform="true"] {
font-size: 1.2em;
}

div.workflow-modal li.field-item .handsontable_container[data-uniform="true"] th {
height: 41px !important;
    background: #FFF;
    vertical-align: middle;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents {
/*border: 1px solid #DDD;*/
    /*box-shadow: var(--plugin-box-shadow-lighter);*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .op-settings,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .op-decisions,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .op-button,

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .op-settings,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .op-decisions,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .op-button {
opacity: 1 !important
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item>.field-item-contents>div {
padding: 10px 20px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents>div.field-item-body,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item>.field-item-contents>div.field-item-body {
padding-top: 0;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item span.footer-tag,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item span.footer-tag {
padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    /* line-height: 1; */
    color: #555;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-weight: 500;
    height: 100%;
    display: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item {
z-index: 1;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item.hasPopoverOpen,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item.hasPopoverOpen {
z-index: 21;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .ds-label {
display: none;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item .ds-label,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item .ds-label,
div.workflow-modal li.field-item .dynamic_op_value_dd .ds-label {
display: block !important;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .dib.dynamic_op_value_dd .datasource-options div.col-md-6 {
width: 100% !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item {
padding: 20px;
}

div.workflow-modal li.field-item .datasource-options .twitter-typeahead {
flex: 1 1 auto;
}

div.workflow-modal li.field-item .datasource-options .tt-menu {
width: 100%;
    text-align: left;
}

div.workflow-modal li.field-item .output-no-data-icon {
color: darkorange;
}

div.workflow-modal li.field-item .curve-sparkline {
cursor: pointer;
}

div.workflow-modal li.field-item .dataset-preview .bs_datatable_wrapper {
min-height: unset !important;
}

div.workflow-modal li.field-item .dataset-preview,
div.workflow-modal li.field-item .define_table-preview,
div.workflow-modal li.field-item .kv-preview {
height: 200px;
}

div.workflow-modal li.field-item div.input-value-container:has(>.text-preview) {
display: block;
}

div.workflow-modal li.field-item div.text-preview {
word-wrap: break-word;
    width: 100%;
    text-overflow: e;
    max-height: 150px;
    overflow: auto;
}

div.workflow-modal li.field-item div.kv-preview {
/*max-height: 120px;*/
    /*overflow: auto;*/
}

div.workflow-modal .wf-worker-config-view .heading {
border-bottom: none !important;
}

div.workflow-modal.worker-ip li.field-item .field-row {
padding: 0 !important;
}

div.workflow-modal.worker-ip .field-item {
border-bottom: none !important;
}

div.workflow-modal li[data-id="reporter_dataset"] .select2-container.previous_outputs li.select2-search-choice:first-child {
border-color: steelblue;
}

div.worker-unsynced .modal-content {
/*border: 3px solid orange;*/
}

div.workflow-modal li.field-item .list-carousel-body {
height: 150px;
}

div.workflow-modal li.field-item .list-carousel-body .item-body .app-icon {
background-size: 80px;
}

div.workflow-modal li.field-item .list-carousel-body .item-content {
border: 1px solid #DDD;
    margin: 10px;
    border-radius: 5px;
}

div.workflow-modal li.field-item .list-carousel-body .item-content.selected {
border-color: steelblue;
    box-shadow: var(--plugin-box-shadow-lighter);
}

div.workflow .wf-tooltip-modal.modal .modal-body .wf-error {
/* padding: 15px!important; */
    padding-left: 15px;
    font-size: 1.1em;
}

div.workflow .wf-tooltip-modal.modal .modal-body .wf-error .open-worker {
text-decoration: underline;
}

div.workflow .wf-tooltip-modal.modal .modal-content {
border: none;
    box-shadow: none;
}

.d3view-exporting .workflow-modal .field-right-menu {
display: none !important;
}

div.workflow-modal .it-legends {
height: 60px;
    padding: 10px;
}

div.workflow-modal .it-legends .legends-wrapper {
position: relative;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item {
border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 10px !important;
    border-radius: 5px;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item .remove_validation:hover {
color: red;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item>div {
width: calc(100% - 40px);
    text-align: left;
    padding: 0;
    margin-bottom: 10px;
}

div.workflow .wf-exec-message>.close {
pointer-events: all !important;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col {
cursor: pointer;
    z-index: 2;
}

div.workflow-modal div.column_expression_options .remove_dataset_dropped_col:hover {
color: red;
}

div.workflow .full-view>.wf-dropzone:not(.btn):not(.field-item-contents) {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .full-view>.wf-dropzone .wf-dropzone-box {
left: 0;
    top: 0;
    width: 98%;
    height: 95%;
    background: #428bca1a;
    border: 2px dashed #AAA;
}

div.workflow .wf-main-container.dz-drag-hover .full-view>.wf-dropzone {
opacity: 1 !important;
    visibility: visible !important;
}

div.workflow .wf-main-container.dropping .full-view>.wf-dropzone {
display: none !important;
}

div.workflow.workflow .modal-dialog {
width: 100% !important;
    margin: 0 !important;
}

div.workflow.workflow .modal-dialog .modal-body {
padding: 0 !important;
    padding-top: 10px !important;
}

div.workflow .modal-content {
height: auto;
    min-height: 100%;
    font-family: sans-serif !important;
}

div.workflow-modal #wf-worker-inputs .col-md-half {
position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 4.166666665%;
    float: left;
}

div.workflow-modal .execution-log,
div#wf-execute-workflow-node-modal div.outputs-container {
border: none !important;
    padding: 0 !important;
    overflow: auto;
}

div.workflow-modal span.op-value {
position: relative;
    top: 7px;
}

div.workflow-modal .wf-dropzone .fa,
div#wf-execute-workflow-node-modal .wf-dropzone .fa {
pointer-events: none;
}

div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-on,
div.workflow-modal .modal-body li.field-item .bootstrap-switch-container .bootstrap-switch-handle-off {
font-size: 9px !important;
}

div.workflow-modal li.field-item textarea {
min-height: 70px;
    resize: vertical;
}

div.workflow-modal li.field-item .field-row:first-child {
padding: 12px 12px 0 12px;
}

div.workflow-modal li.field-item .field-row {
display: flex;
    align-items: center;
    padding: 0 12px;
    border: none;
    text-align: center;
}

div.workflow-modal li.field-item .field-row .ds_dataset_option .prev_outputs.select-bs {
width: 100%;
    padding: 0;
}

div.workflow-modal li.field-item .op-additional-options {
position: relative;
    right: 0;
    top: 0;
    opacity: 0;
    display: none;
}

div.workflow-modal li.field-item:hover .op-additional-options,
div.workflow-modal li.field-item.hasPopoverOpen .op-additional-options {
opacity: 1 !important;
    display: flex !important;
}

div.workflow-modal li.field-item .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 50px);
}

div.workflow-modal li.field-item .hasOverlaySelection .op-label {
text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 175px);
}

div.workflow-modal li.field-item .op-option-label {
/*display: none;*/
}

div.workflow-modal li.field-item .field-row:last-child {
padding: 0 12px 12px 12px;
    /*border-bottom: 1px solid #e5e5e5;*/
}

div.workflow-modal li.field-item .field-name {
text-align: left;
    margin: 0;
    /*display: flex;*/
    align-items: center;
    width: 100%;
}

div.workflow-modal li.field-item .field-name .pl-editor-title {
padding: 3px 0;
}

div.workflow-modal li.field-item .field-name input[data-inputvalue="label"] {
flex: 1 1 auto;
}

div.workflow-modal li.field-item .field-type {
/*font-size: 0.9em;*/
    /*margin-right: 8px;*/
}

div.workflow-modal .modal-dialog .formbuilder-container .inputs-builder-container.row {
padding: 0;
}

div.workflow-modal .modal-dialog .formbuilder-container .row {
font-size: inherit;
}

div.workflow-modal .modal-dialog {
width: 90%;
    margin: 10px auto;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
}

div.workflow-modal#wf-configure-workflow-node-modal .modal-header .modal-title {
height: 60px;
}

div.workflow-modal .modal-body ul.nav-tabs li {
/*float: right;*/
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li {
float: right;
}

div.workflow-modal .modal-body div.input-groups ul.nav-tabs li.sortable-placeholder {
height: 41px;
    width: 110px;
    background-color: #CCC;
}

div.workflow-modal #wf-node-configuration .inputs-header {
margin: 10px;
    font-weight: bold;
    border-bottom: 1px solid #000;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot {
position: fixed;
    top: 12px;
    left: 12px;
    cursor: pointer;
    /*background: rgba(43,48,54,0.95);*/
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    display: none;
}

div.workflow-modal .modal-body #toggle-canvas-snapshot.toggled {
color: lightgreen !important;
}

div.workflow-modal .modal-body div.canvas-snapshot.toggled {
width: 35%;
    left: -35%;
}

div.workflow-modal .modal-body div.canvas-snapshot {
position: fixed;
    left: 0;
    width: 0;
    height: 90%;
    background: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow-modal .modal-body div.canvas-snapshot img {
position: relative;
    top: 35%;
}

div.workflow-modal .modal-body div.wf-builder-inputs-list>ul#field-items {
overflow: auto;
    margin-bottom: 0;
}

div.workflow-modal .modal-body span.node-input {
position: relative;
    top: 7px;
}

div.workflow-modal .worker-inputs.condensed {
border-right: 1px solid #ccc;
}

div.workflow-modal .modal-body .wf-grouping-context-menu {
position: absolute;
    display: none;
    background: #FFF;
    z-index: 2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #CCC;
}

div.workflow-modal .modal-body .wf-grouping-context-menu>li {
background-color: transparent;
    border: none;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover {
background-color: #428BCA;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.workflow-modal .modal-body .wf-grouping-context-menu li:hover a {
color: #FFF;
    text-decoration: none;
}

div.workflow-modal ul#field-items li.field-item {
/*border-right: 5px solid transparent;*/
    position: relative;
    /*display: flex;*/
    align-items: center;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal ul#field-items li.field-item .non-default-hr {
height: 100%;
    border-right: 4px solid blue;
    width: 3px;
    position: absolute;
    left: 0;
    top: 0px;
}

div.workflow-modal ul#field-items li.field-with-siblings li.field-item {
border: none;
}

div.workflow-modal ul#field-items li.field-with-siblings {
border-bottom: 1px solid #DDD;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs.field-item {
display: block;
    padding: 0;
    z-index: 2;
}

div.workflow-modal ul#field-items li.field-with-repeated-inputs .field-item {
border-bottom: none;
}

div.workflow-modal ul.field-items li.field-item {
border-bottom: 1px solid #DDD;
}

div.workflow-modal.docked .modal-body ul#field-items li.field-item {
display: block;
}

div.workflow-modal li.field-item.highlighted {
background: lightyellow;
}

div.workflow-modal ul#field-items li.field-item .field-item-contents {
width: calc(100% - 0px);
    padding-bottom: 10px;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover {
background: #e6ffe6 !important;
    border: 1px solid var(--plugin-primary-color);
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover>div {
opacity: 0.5;
    pointer-events: none;
}

div.workflow-modal li.field-item .field-item-contents.dz-drag-hover:after {
content: 'Drop file(s) here';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 2em;
    color: gray;
    pointer-events: none;
}

div.workflow-modal ul#field-items li.ui-selecting {
background-color: var(--dt-selection-color);
}

div.workflow-modal ul#field-items li.ui-selected {
background-color: var(--dt-selection-color);
}

div.workflow-modal ul#field-items li.field-item .ip-type {
/*padding: 0 10px;*/
    /*margin-left: 10px;*/
    margin-right: 5px;
    display: flex;
    align-items: center;
}

div.workflow-modal li.field-item[data-invalid="true"] .field-name .required {
color: red;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight {
background-color: #428BCA;
}

div.workflow-modal .modal-body .nav-tabs li.navtab-highlight a {
color: #FFF !important;
}

div.workflow-modal .background-highlight,
div#wf-execute-workflow-node-modal .background-highlight {
background-color: #428BCA;
    color: #FFF !important;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}

div.workflow-modal #wf-worker-inputs li.field-item .enlarge-img {
position: absolute;
    top: 48%;
    left: 30%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    -moz-transition: opacity 0.35s;
    -ms-transition: opacity 0.35s;
    -o-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

div.workflow-modal #wf-worker-inputs li.field-item .clear-textarea {
position: absolute;
    top: 4px;
    right: 30px;
    z-index: 3;
    cursor: pointer;
    display: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}

div.workflow-modal #wf-worker-inputs li.field-item .repeat-input {
cursor: pointer;
}

div.workflow-modal #wf-worker-inputs li.field-item .input_range_settings.active {
color: #5cb85c;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote-lookup-list {
padding: 0;
    margin-right: 0;
}

div.workflow-modal li.field-item div.remote_lookup_list.disabled {
opacity: 1;
}

div.workflow-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item {
position: relative;
    border-bottom: 1px solid #DDD;
    border-left: 6px solid transparent;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item[data-validation-status="success"] {
border-left-color: lightgreen;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item[data-validation-status="fail"] {
border-left-color: red;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead {
width: 100%;
    /* display: block!important; */
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .dynamic-worker-output .twitter-typeahead input {
width: 100% !important;
}

div.workflow-modal .modal-body li.field-item .datasource-options .previous_outputs_operator.bootstrap-select,
div.workflow-modal .modal-body li.field-item .dynamic-worker-output .dynamic_outputs_operator.bootstrap-select {
float: left;
    padding: 0 5px;
}

div.workflow-modal .header-nav {
display: flex;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 1px solid #DDD;
}

div.workflow-modal .header-nav li {
font-size: 1.4em;
}

div.workflow-modal .header-nav li a {
padding: 6px 15px;
    height: 100%;
    border-bottom: 1px solid transparent;
    color: #4f5359;
}

div.workflow-modal .header-nav li.active>a {
color: #428BCA !important;
    border-bottom: 1px solid #428BCA !important;
    background: none;
    border-radius: 0;
}

div.workflow-modal .header-nav li.active>a .badge {
color: #FFF;
    background-color: #428bca;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value {
color: #777;
    cursor: not-allowed;
    background-color: #eee;
}

div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value input,
div.workflow-modal .modal-body #wf-worker-inputs li.field-item[data-editable="false"] .input-value .bootstrap-select {
pointer-events: none;
}

div.workflow-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

div.workflow-modal small.datasource_info {
/*margin-top: 17px;*/
    position: relative;
    top: 5px;
    display: block;
    margin: 6px 0;
}

div.workflow-modal small.datasource_info .ds-worker {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal small.datasource_info .ds-worker-output {
cursor: pointer;
    font-size: 1.3em;
}

div.workflow-modal li.field-item .ip-desc,
div.workflow-modal li.field-item .op-message {
/*color: dimgray;*/
    display: block;
    margin: 0 !important;
}

div.workflow-modal #wf-worker-inputs.hasFixedInput .name-container {
display: none;
}

div.workflow-modal li.field-item .field-name-container {
/*text-align: left;*/
}

div.workflow-modal div.wf-dropzone:not(.field-item-contents) {
min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 0, 0, 0.3);
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-center {
padding: 0 !important;
    margin: 0;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    border: none !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container.hasErrorLogs>.ui-layout-center {
height: calc(100% - 75px) !important;
}

div.workflow-modal #wf-worker-inputs>.ui-layout-container>.ui-layout-resizer {
background: #DDD !important;
    height: 3px !important;
    cursor: row-resize !important;
}

div#wf-temp-config-modal .modal-body li.field-item .has-error div.wf-dropzone:not(.field-item-contents) {
border: 1px dashed red;
}

div.workflow-modal #wf-worker-switch .node-arguments {
color: #5f5f5f;
}

div#wf-execute-workflow-node-modal .modal-header .navigate,
div.workflow-modal .modal-header .navigate {
/*position: absolute;*/
    /*right: 7%;*/
    /*top: 10px;*/
    margin: 0 !important;
    display: inline-block;
    margin-right: 10px !important;
}

div#wf-execute-workflow-node-modal .modal-header .navigate.pagination li a,
div.workflow-modal .modal-header .pagination li a {
/*padding: 2px 6px;*/
    cursor: pointer;
}

div.workflow div.modal-header .navigation-tabs {
border-bottom: none;
}

div.workflow div.modal-header .navigation-tabs li.active>a {
color: #FFF;
    background-color: #164d82;
    border-color: transparent;
}

div.workflow div.modal-header .navigation-tabs li>a {
color: #FFF;
    padding: 7px 15px;
}

div.workflow div.modal-header .navigation-tabs li:not(.active)>a:hover {
border-color: transparent;
    background-color: #164d82;
}

div.workflow-modal .col-md-0-5,
div.workflow-modal .col-md-1-5 {
position: relative;
    float: left;
    padding: 0 15px;
    min-height: 1px;
}

div.workflow-modal .col-md-0-5 {
width: 4.166666665%;
}

div.workflow-modal .col-md-1-5 {
width: 12.499999995%;
}

div.workflow-modal .worker-lastupdated,
div.workflow-modal .worker-lastexecuted {
font-weight: 500;
    margin-left: 5px;
    position: relative;
    /*top: -2px;*/
    float: left;
}

div.workflow-modal .modal-body .operations_container,
div#wf-execute-workflow-node-modal .operations_container {
max-height: 300px;
    overflow: auto;
}

div.workflow-modal .modal-body [data-operation]:hover .delete_operation {
opacity: 1 !important;
}

div.workflow-modal .modal-body [data-operation] .operation_options,
div#wf-execute-workflow-node-modal [data-operation] .operation_options {
padding: 8px;
}

div.workflow-modal .modal-body [data-operation] .operation_options .row,
div#wf-execute-workflow-node-modal [data-operation] .operation_options .row {
padding: 0 !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
}

div.workflow-modal [data-operation] .operation-option,
div#wf-execute-workflow-node-modal [data-operation] .operation-option {
margin: 6px 0;
    position: relative;
}

div.workflow-modal .modal-body .reset-remote-base-url {
position: absolute;
    right: 7px;
    font-size: 1.2em;
    z-index: 2;
    color: #AAA;
    top: 9px;
    cursor: pointer;
}

div.workflow-modal .modal-body .reset-remote-base-url:hover {
color: red !important;
}

div.workflow-modal .modal-header {
background: #fff;
    color: #4f5359;
    position: relative;
}

div.workflow-modal .modal-header .modal-title {
float: left;
    font-size: 17px;
}

div.workflow-modal .modal-header .worker-type {
/*font-size: 0.8em!important;*/
    margin-bottom: 0;
    position: relative;
}

div.workflow-modal #toggle-canvas-snapshot {
cursor: pointer;
}

div.workflow-modal #toggle-canvas-snapshot:hover {
color: red;
}

div.workflow-modal #toggle-canvas-snapshot.toggled {
color: red !important;
}

div.workflow-modal[data-mode="preview"] #worker_sync,
div.workflow-modal[data-mode="preview"] ul.navigate,
div.workflow-modal[data-mode="preview"] #toggle-canvas-snapshot,
div.workflow-modal[data-mode="preview"] li.wf-worker-validations,
div.workflow-modal[data-mode="preview"] li.wf-worker-switch {
display: none;
}

div.workflow-modal li.field-item .fileAbsent .file-view {
display: none;
}

div.workflow-modal li.field-item .remove-ip-file {
opacity: 0;
    pointer-events: none;
    cursor: pointer;
}

div.workflow-modal li.field-item .ip-file-item .pl-label-modern {
color: #555;
}

div.workflow-modal li.field-item .ip-file-item {
margin: 5px;
}

div.workflow-modal li.field-item .dropdown-menu .ip-file-item {
padding: 5px 10px;
}

div.workflow-modal li.field-item .ip-file-item.ui-sortable-placeholder {
width: 150px;
    height: 30px;
    background-color: yellow;
    visibility: visible !important;
    border-radius: 20px;
}

div.workflow-modal li.field-item .ip-file-item:hover .remove-ip-file {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal li.field-item .ip-file-item:hover .remove-ip-file:hover,
div.workflow-modal li.field-item .ip-file-item:hover .file-editor:hover {
color: red;
}

div.workflow-modal li.field-item .ip-file-item .file-view:hover {
background: #428bca;
    color: #FFF;
}

div.workflow-modal li.field-item .dropdown-menu .ip-file-item .pl-label-modern {
word-break: break-all;
    white-space: normal;
}

div.workflow-modal li.field-item .remove-textarea-file {
opacity: 0;
    pointer-events: none;
    cursor: pointer;
}

div.workflow-modal li.field-item .ip-file-item {
margin: 5px;
}

div.workflow-modal li.field-item .ip-file-item:hover .remove-textarea-file {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal li.field-item .ip-file-item:hover .remove-textarea-file:hover {
color: red;
}

div.workflow-modal li.field-item .ip-file-item .textview:hover {
background: #428bca;
    color: #FFF;
}

div#wf-execute-workflow-node-modal.workflow-modal.carouselView .modal-dialog.simpleView {
width: 100% !important;
    margin: 0;
}

div.workflow-modal.carouselView .modal-footer #apply,
div.workflow-modal.carouselView .modal-header #minimize {
display: none;
}

div.workflow-modal .modal-body .exp-builder-container {
padding: 15px;
}

div.workflow-modal .viz-fields #viz_preview_options {
border-right: none;
    margin-right: 0;
}

div.workflow-modal label,
div.workflow label {
display: inline-block !important;
}

div.workflow-modal li.field-item div.bootstrap-select.add_to_reporter {
display: inline-block !important;
    width: auto !important;
}

div.workflow-modal div:not(.formbuilder-container) li.field-item .add_to_reporter_list li.checked:before {
content: '\f00c';
    font-family: FontAwesome;
    color: #428bca;
    position: absolute;
    left: 2px;
    top: 0;
}

div.workflow-modal .iterations-list {
display: flex;
    flex-wrap: wrap;
}

div.workflow-modal .iterations-list .panel-body {
overflow: auto;
    padding: 0;
}

div.workflow-modal .iterations-list div.d3view-inputsBuilder {
border: none
}

div.workflow-modal li.field-item .handsontable_container .ht_master {
min-height: 100px;
}

div.workflow-modal>.modal-dialog {
transform: none !important;
}

div.workflow-modal li.field-with-siblings {
min-height: 150px;
}

div.workflow-modal ul#field-items li.field-item.isSibling {
border-bottom: none;
}

div.workflow-modal li.field-item .select2-container .select2-choice {
height: 34px;
    background: none;
    text-align: left;
    color: #000;
    font-weight: 500;
    border-width: 1.5px;
    border-color: #AAA;
    display: flex;
    align-items: center;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view div.workflow-modal .wf-worker-config-view li.field-item .field-name {
word-break: break-word;
}

div.workflow .workflow-index[data-view="basic"] .wf-basic-container .basic-inputs-view div.workflow-modal .wf-worker-config-view li.field-item .field-right-menu {
display: none;
}

div.workflow-modal .worker-visualizations {
display: flex;
    flex-wrap: wrap;
}

div.workflow-modal .wf-worker-config-container[data-locked="true"] .field-right-menu,
div.workflow-modal .wf-worker-config-container[data-locked="true"] .datasource_container,
div.workflow-modal .wf-worker-config-container[data-locked="true"] .worker-io-mapper,
div.workflow-modal .wf-worker-config-container[data-locked="true"] [data-id="worker_sync"],
div.workflow-modal .wf-worker-config-container[data-locked="true"] #verify {
display: none;
}

div.workflow-modal.modal.docked {
width: 35%;
    height: 100%;
    left: unset !important;
}

div.workflow-modal.modal.docked .modal-dialog {
width: 100% !important;
}

div.workflow-modal.modal.docked .modal-dialog .modal-content {
border-color: #DDD;
}

div.workflow-modal.modal.docked .wf-worker-config-view .wf-worker-config-container {
height: calc(100% - 120px) !important;
}

div.workflow-modal .modal-header #dock {

}

div.workflow-modal.modal.docked .modal-title-container {
width: 10px;
}

div.workflow-modal.modal.docked .modal-title-container .worker-name {
display: none !important;
}

div.workflow-modal.modal.docked .pagination.navigate .nav-text {
display: none;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list {
height: 100% !important;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items {
height: 100% !important;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .input-value-container>.input-group {
width: 100%;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .datasource_container {
display: block !important;
    margin-bottom: 5px;
}

div.workflow-modal.modal.docked .wf-builder-inputs-list>ul#field-items li.field-item .pl-editor-title {
padding: 4px 6px;
}

div.workflow-modal.modal.docked ul.validations-list li.field-item>div.row div[class*=col-md] {
width: 100%;
    margin-bottom: 6px;
}

div.workflow-modal.modal.docked .decision_configs select.form-control {
width: auto !important;
}

div.workflow-modal.modal.docked .formbuilder-container li.field-item div[class*=col-md] {
width: 100%;
    margin-bottom: 8px;
}

div.workflow-modal.modal.docked .formbuilder-container .carousel-header .filter-container,
div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .sample-input-label,
div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .sample-input-options {
display: none;
}

div.workflow-modal.modal.docked .formbuilder-container .sample-inputs-list .wf-input-label {
justify-content: center;
}

div.workflow-modal.modal.docked .formbuilder-container .d3view-form-builder-container {
height: 100%;
    overflow: auto;
}

div.workflow-modal div.dataviewer .toggle-text-view {
display: flex;
}

div.workflow-modal li.field-item .ip-formfilters>.formfilters {
min-height: 500px;
}

div.workflow-modal li.field-item .form_table_container>.formfilters {
min-height: 100px;
}

div.workflow-modal li.field-item .handsontable_container[data-uniform="true"] {
font-size: 1.2em;
}

div.workflow-modal li.field-item .handsontable_container[data-uniform="true"] th {
height: 41px !important;
    background: #FFF;
    vertical-align: middle;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item>.field-item-contents {
/*border: 1px solid #DDD;*/
    /*box-shadow: var(--plugin-box-shadow-lighter);*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="default"] li.field-item span.footer-tag,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="detailed"] li.field-item span.footer-tag {
padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    /* line-height: 1; */
    color: #555;
    text-align: center;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-weight: 500;
    height: 100%;
    display: none;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .ds-label {
display: none;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .dib.dynamic_op_value_dd .datasource-options div.col-md-6 {
width: 100% !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="compact"] li.field-item {
padding: 20px;
}

div.workflow-modal li.field-item .datasource-options .twitter-typeahead {
flex: 1 1 auto;
}

div.workflow-modal li.field-item .datasource-options .tt-menu {
width: 100%;
    text-align: left;
    z-index: 1000 !important;
}

div.workflow-modal li.field-item .output-no-data-icon {
color: darkorange;
}

div.workflow-modal li.field-item .curve-sparkline {
cursor: pointer;
}

div.workflow-modal li.field-item .dataset-preview .bs_datatable_wrapper {
min-height: unset !important;
}

div.workflow-modal li.field-item .dataset-preview,
div.workflow-modal li.field-item .define_table-preview,
div.workflow-modal li.field-item .kv-preview {
height: 200px;
}

div.workflow-modal li.field-item div.input-value-container:has(>.text-preview) {
display: block;
}

div.workflow-modal li.field-item div.text-preview {
word-wrap: break-word;
    width: 100%;
    text-overflow: e;
    max-height: 150px;
    overflow: auto;
}

div.workflow-modal li.field-item div.kv-preview {
/*max-height: 120px;*/
    /*overflow: auto;*/
}

div.workflow-modal .wf-worker-config-view .heading {
border-bottom: none !important;
}

div.workflow-modal li[data-id="reporter_dataset"] .select2-container.previous_outputs li.select2-search-choice:first-child {
border-color: steelblue;
}

div.worker-unsynced .modal-content {
/*border: 3px solid orange;*/
}

div.workflow-modal li.field-item .list-carousel-body {
height: 150px;
}

div.workflow-modal li.field-item .list-carousel-body .item-body .app-icon {
background-size: 80px;
}

div.workflow-modal li.field-item .list-carousel-body .item-content {
border: 1px solid #DDD;
    margin: 10px;
    border-radius: 5px;
}

div.workflow-modal li.field-item .list-carousel-body .item-content.selected {
border-color: steelblue;
    box-shadow: var(--plugin-box-shadow-lighter);
}

div.workflow .wf-tooltip-modal.modal .modal-body .wf-error {
/* padding: 15px!important; */
    padding-left: 15px;
    font-size: 1.1em;
}

div.workflow .wf-tooltip-modal.modal .modal-body .wf-error .open-worker {
text-decoration: underline;
}

div.workflow .wf-tooltip-modal.modal .modal-content {
border: none;
    box-shadow: none;
}

.d3view-exporting .workflow-modal .field-right-menu {
display: none !important;
}

div.workflow-modal .it-legends {
height: 60px;
    padding: 10px;
}

div.workflow-modal .it-legends .legends-wrapper {
position: relative;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item {
border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 10px !important;
    border-radius: 5px;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item .remove_validation:hover {
color: red;
}

div.workflow-modal li.field-item .conditions-container .validation-list-item>div {
width: calc(100% - 40px);
    text-align: left;
    padding: 0;
    margin-bottom: 10px;
}

div.workflow-modal.isExecuting .inputs-view-container {
cursor: progress;
}

div.workflow-modal.isExecuting .inputs-view-container .field-item {
pointer-events: none;
}

div.workflow-modal.isExecuting.not_current_worker #wfExecute,
div.workflow-modal.isExecuting.not_current_worker #apply,
div.workflow-modal.isWfExecuting #apply,
div.workflow-modal.isWfExecuting #wfExecute {
cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
    pointer-events: none;
}

div.workflow-modal.isExecuting .input-value-container input,
div.workflow-modal.isExecuting .input-value-container select {
background: #f5f5f5;
}

div.workflow-modal .outputs-container li.field-item .field-name {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding: 0 0 10px 0;
    /*text-transform: capitalize;*/
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="table"] tbody td,
div.workflow-modal .wf-builder-inputs-list[data-inputs-view="table"] thead th {
text-align: center;
    vertical-align: middle;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="table"] tbody td li.field-item {
padding: 20px;
}

.workflow-modal .curve-options .d3view-inputsBuilder {
border: none;
}

.workflow-modal .curve-options div.d3view-inputsBuilder li.field-item .input-name .field-name {
font-size: unset;
}

div.workflow-modal li.field-item .select2-container.workers_list .select2-choice .select2-chosen {
width: 100%;
}

div.workflow-modal.docked .field-item-header {
width: 100%;
    display: block;
}

div.workflow-modal.docked .field-item-header .field-right-menu {
display: flex;
    justify-content: flex-end;
}

div.workflow-modal .passed-data-value li.field-item {
border: none !important;
}

div.workflow-modal li.field-item .ip-classifiers {
counter-reset: section;
}

div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .input-bottom-row-outer,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .ip-desc-edit,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .ip-options,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .si-container,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .add_tab,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .add_new_group,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .allActions,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .main-import-dd,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .tabsView-dd,
div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .input-settings {
display: none;
}

div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .ip-desc-editor {
pointer-events: none;
}

div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container .inputs-list {
width: 100% !important;
}

div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container li.field-item {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs:not(.allow-inputs-editing) .formbuilder-container li.field-item .input-name-container input {
pointer-events: none;
}

div.workflow-modal .btn-outline.active {
color: #FFF;
    background-color: #265a88 !important;
    border-color: #245580;
}

div.workflow-modal .tour-item {
border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
}

div.workflow-modal .tour-item.ui-sortable-placeholder {
visibility: visible !important;
    width: 100% !important;
    background: lightyellow;
    display: block !important;
    pointer-events: none;
    height: 50px;
}

div.workflow-modal .tour-item .drag-handle {
opacity: 0;
    cursor: move;
}

div.workflow-modal .tour-item:hover .drag-handle {
opacity: 1;
}

div.workflow .chart-view .new-wf-btn-group .close {
opacity: 0;
}

div.workflow .chart-view .new-wf-btn-group:hover .close {
opacity: 1;
    color: red;
}

div.workflow-modal .guide-steps {
overflow: auto;
}

div.workflow-modal li.field-item {
container-type: inline-size;
    container-name: wf-ip-field-item;
}

div.workflow-modal div[data-full-outputs="true"] .op-additional-options {
display: none;
}

div.workflow .wf-search-row:hover .wf-search-options,
div.workflow-modal .wf-search-row:hover .wf-search-options,
div.workflow-modal .wf-search-row.hasDDOpen .wf-search-options {
opacity: 1 !important;
    display: inline-block !important;
}

div.workflow-modal .data-traversal-view {
background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 12px;
    margin-top: 8px;
}

div.workflow-modal .traversal-item {
margin-bottom: 8px;
}

div.workflow-modal .traversal-item:last-child {
margin-bottom: 0;
}

div.workflow-modal .traversal-header {
display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow-modal .traversal-content {
padding-left: 18px;
}

div.workflow-modal .traversal-separator {
text-align: center;
    margin: 8px 0;
    color: #6c757d;
}

div.workflow-modal .traversal-error {
display: flex;
    align-items: center;
    color: #dc3545;
    font-size: 12px;
    padding: 8px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 3px;
}

div.workflow-modal .traversal-empty {
display: flex;
    align-items: center;
    color: #6c757d;
    font-size: 12px;
    padding: 8px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    font-style: italic;
}

div.workflow-modal li.field-item .validation-decision-data-pass .passed-data-source .datasource-options {
margin: 0 !important;
}

div.workflow-modal .modal-body #wf-worker-validations li.field-item .validation-actions {
position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

div.workflow .wf-search-options,
div.workflow-modal .wf-search-options {
position: absolute;
    z-index: 2;
    right: 30px;
}

div.workflow .wf-search-row,
div.workflow-modal .wf-search-row {
position: relative;
}

div.workflow-modal .ip-references-container .dep-workers-list .wf-search-row:hover .wf-search-options {
opacity: 1 !important;
    display: inline-block !important;
}

div.workflow-modal .ip-references-container .dep-workers-list .wf-search-row {
cursor: pointer;
    height: 50px;
}

div.workflow .wf-id-label.input,
div.workflow-modal .wf-id-label.input,
div.workflow .wf-id-label.output,
div.workflow-modal .wf-id-label.output {
font-variant: small-caps;
    color: #000000;
    font-weight: 300
}

div.workflow .wf-id-label.worker,
div.workflow-modal .wf-id-label.worker {
font-variant: small-caps;
    color: #000000;
    font-weight: 300;
    font-size: 11px;
}

div.workflow-modal .wf-builder-inputs-list[data-inputs-view="card"] .ip-label-outer {
flex: 1 1 auto;
    flex-direction: column;
}

div.workflow-modal li.field-item .pl-editor-title,
div.workflow-modal li.field-item .pl-editable-input {
font-weight: 600;
}

div.workflow-modal li.field-item .field-name .required {
font-size: 0.5em;
}

div.workflow-modal li.field-item .reporter-layout-summary-container .viz-link>span {
white-space: normal;
    text-align: left;
}

.workflow-modal .workflow-input-summary .summary-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    min-width: 180px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.workflow-modal .workflow-input-summary .lead {
font-size: 1.1em;
    font-weight: 600;
}

.workflow-modal .workflow-input-summary .stat-list {
margin-top: 10px;
}

.workflow-modal .workflow-input-summary .stat-item {
display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 1em;
}

.workflow-modal .workflow-input-summary .stat-label {
color: #888;
}

.workflow-modal .workflow-input-summary .stat-value {
font-weight: bold;
    color: #333;
}

.workflow-modal .workflow-input-summary .side-by-side-container {
margin-top: 30px;
}

div.workflow .wf-type-label,
div.workflow-modal .wf-type-label {
display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .wf-type-label.worker,
div.workflow-modal .wf-type-label.worker {
background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

div.workflow .wf-type-label.input,
div.workflow-modal .wf-type-label.input {
background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

div.workflow .wf-type-label.output,
div.workflow-modal .wf-type-label.output {
background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

div.workflow .wf-type-label.iterator,
div.workflow-modal .wf-type-label.iterator {
background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

div.workflow .wf-type-label.reference,
div.workflow-modal .wf-type-label.reference {
background-color: #e1f5fe;
    color: #0277bd;
    border: 1px solid #81d4fa;
}

div.workflow .wf-type-label.assignment,
div.workflow-modal .wf-type-label.assignment {
background-color: #fce4ec;
    color: #c2185b;
    border: 1px solid #f8bbd9;
}

div.workflow .wf-type-label.edge,
div.workflow-modal .wf-type-label.edge {
background-color: #e0f2f1;
    color: #00695c;
    border: 1px solid #b2dfdb;
}

div.workflow .wf-type-label.action,
div.workflow-modal .wf-type-label.action {
background-color: #fffde7;
    color: #333;
    border: 1px solid yellow;
}

div.workflow .ancestry-path-compact,
div.workflow-modal .ancestry-path-compact {
max-height: 40px;
    /* Limit to 2 lines max */
    overflow: hidden;
    line-height: 1.2;
}

div.workflow .ancestry-chain-compact,
div.workflow-modal .ancestry-chain-compact {
max-width: 100%;
    overflow: hidden;
}

div.workflow .ancestry-pill,
div.workflow-modal .ancestry-pill {
transition: all 0.2s ease;
    cursor: pointer;
}

div.workflow .ancestry-pill:hover,
div.workflow-modal .ancestry-pill:hover {
transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .show-ancestry-path,
div.workflow-modal .show-ancestry-path {
transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #6c757d;
}

div.workflow .show-ancestry-path:hover,
div.workflow-modal .show-ancestry-path:hover {
background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
}

div.workflow .show-ancestry-path:disabled,
div.workflow-modal .show-ancestry-path:disabled {
opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

div.workflow .ancestry-popover,
div.workflow-modal .ancestry-popover {
max-width: 500px;
    min-width: 300px;
}

div.workflow .ancestry-popover-header,
div.workflow-modal .ancestry-popover-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
}

div.workflow .ancestry-popover-header h5,
div.workflow-modal .ancestry-popover-header h5 {
margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

div.workflow .ancestry-popover-close,
div.workflow-modal .ancestry-popover-close {
background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

div.workflow .ancestry-popover-close:hover,
div.workflow-modal .ancestry-popover-close:hover {
opacity: 1;
    color: #333;
}

div.workflow .ancestry-popover-body,
div.workflow-modal .ancestry-popover-body {
padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

div.workflow .ancestry-full-path,
div.workflow-modal .ancestry-full-path {
display: block;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
}

div.workflow .ancestry-full-pill,
div.workflow-modal .ancestry-full-pill {
transition: all 0.2s ease;
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 8px 12px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

div.workflow .ancestry-full-pill:hover,
div.workflow-modal .ancestry-full-pill:hover {
transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

div.workflow .wf-search-filter-info,
div.workflow-modal .wf-search-filter-info {
display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    padding: 8px 12px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 4px;
    font-size: 12px;
}

div.workflow .wf-search-filter-info .filter-label,
div.workflow-modal .wf-search-filter-info .filter-label {
color: #1976d2;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow .wf-search-filter-info .clear-ancestry-filter,
div.workflow-modal .wf-search-filter-info .clear-ancestry-filter {
padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #1976d2;
    color: #1976d2;
    background: transparent;
    border-radius: 3px;
    transition: all 0.2s ease;
}

div.workflow .wf-search-filter-info .clear-ancestry-filter:hover,
div.workflow-modal .wf-search-filter-info .clear-ancestry-filter:hover {
background: #1976d2;
    color: white;
}

div.workflow .wf-compact-ancestry,
div.workflow-modal .wf-compact-ancestry {
position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: 400px;
    min-width: 300px;
}

div.workflow .wf-compact-ancestry .ancestry-card,
div.workflow-modal .wf-compact-ancestry .ancestry-card {
background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    position: relative;
}

div.workflow .wf-compact-ancestry .ancestry-header,
div.workflow-modal .wf-compact-ancestry .ancestry-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

div.workflow .wf-compact-ancestry .ancestry-title,
div.workflow-modal .wf-compact-ancestry .ancestry-title {
font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

div.workflow .wf-compact-ancestry .ancestry-close,
div.workflow-modal .wf-compact-ancestry .ancestry-close {
background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

div.workflow .wf-compact-ancestry .ancestry-close:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-close:hover {
background: #f5f5f5;
    color: #333;
}

div.workflow .wf-compact-ancestry .ancestry-buttons,
div.workflow-modal .wf-compact-ancestry .ancestry-buttons {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

div.workflow .wf-compact-ancestry .ancestry-button,
div.workflow-modal .wf-compact-ancestry .ancestry-button {
border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

div.workflow .wf-compact-ancestry .ancestry-button.start,
div.workflow-modal .wf-compact-ancestry .ancestry-button.start {
background: #e8f5e8;
    border-color: #c3e6c3;
    color: #28a745;
}

div.workflow .wf-compact-ancestry .ancestry-button.start:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.start:hover {
background: #d4edda;
    border-color: #b8dacc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.worker,
div.workflow-modal .wf-compact-ancestry .ancestry-button.worker {
background: #e3f2fd;
    border-color: #bbdefb;
    color: #1976d2;
}

div.workflow .wf-compact-ancestry .ancestry-button.worker:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.worker:hover {
background: #bbdefb;
    border-color: #90caf9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.decision,
div.workflow-modal .wf-compact-ancestry .ancestry-button.decision {
background: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

div.workflow .wf-compact-ancestry .ancestry-button.decision:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.decision:hover {
background: #ffeaa7;
    border-color: #fdcb6e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(133, 100, 4, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.current,
div.workflow-modal .wf-compact-ancestry .ancestry-button.current {
background: #e1f5fe;
    border-color: #b3e5fc;
    color: #0277bd;
    font-weight: 600;
}

div.workflow .wf-compact-ancestry .ancestry-button.current:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.current:hover {
background: #b3e5fc;
    border-color: #81d4fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(2, 119, 189, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-arrow,
div.workflow-modal .wf-compact-ancestry .ancestry-arrow {
color: #999;
    font-size: 12px;
    margin: 0 4px;
}

div.workflow .wf-filter-panel,
div.d3view-inputsBuilder .wf-filter-panel,
div.workflow-modal .wf-filter-panel {
background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    overflow: hidden;
    min-width: 420px;
    width: 35vw;
    /** R0-3401 - cap width so panel never exceeds viewport when trigger sits at the right edge **/
    max-width: calc(100vw - 40px);
    /** R0-3401 - keep panel within viewport; content scrolls **/
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/** R0-3401 - right-anchor the Advanced Filters dropdown so it opens leftward from the
 *  trigger button and never overflows the viewport. The dropdown button sits near the right
 *  edge of the modern header; Bootstrap's default left-anchor would push the panel off-screen. **/
div.workflow [data-dd-type="wf-search-filters-by-usage"] > .dropdown-menu,
div.d3view-inputsBuilder [data-dd-type="wf-search-filters-by-usage"] > .dropdown-menu,
div.workflow-modal [data-dd-type="wf-search-filters-by-usage"] > .dropdown-menu {
    left: auto;
    right: 0;
}

div.workflow .wf-filter-header,
div.d3view-inputsBuilder .wf-filter-header,
div.workflow-modal .wf-filter-header {
background: #f8f9fa;
    color: #333;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    /** R0-3401 - keep header pinned when content scrolls **/
    flex: 0 0 auto;
}

div.workflow .wf-filter-title,
div.d3view-inputsBuilder .wf-filter-title,
div.workflow-modal .wf-filter-title {
display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}

div.workflow .wf-filter-close,
div.d3view-inputsBuilder .wf-filter-close,
div.workflow-modal .wf-filter-close {
background: transparent;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

div.workflow .wf-filter-close:hover,
div.d3view-inputsBuilder .wf-filter-close:hover,
div.workflow-modal .wf-filter-close:hover {
background: #e9ecef;
    color: #333;
}

div.workflow .wf-filter-content,
div.d3view-inputsBuilder .wf-filter-content,
div.workflow-modal .wf-filter-content {
padding: 16px;
    /** R0-3401 - scroll overflow when panel exceeds viewport **/
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

div.workflow .wf-filter-section,
div.d3view-inputsBuilder .wf-filter-section,
div.workflow-modal .wf-filter-section {
margin-bottom: 28px;
}

div.workflow .wf-filter-section:last-child,
div.d3view-inputsBuilder .wf-filter-section:last-child,
div.workflow-modal .wf-filter-section:last-child {
margin-bottom: 0;
}

div.workflow .wf-filter-section-title,
div.d3view-inputsBuilder .wf-filter-section-title,
div.workflow-modal .wf-filter-section-title {
display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .wf-filter-row,
div.d3view-inputsBuilder .wf-filter-row,
div.workflow-modal .wf-filter-row {
/*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    gap: 16px;
    margin-bottom: 16px;
}

div.workflow .wf-filter-row.d3view-flex-v .wf-filter-item,
div.d3view-inputsBuilder .wf-filter-row.d3view-flex-v .wf-filter-item,
div.workflow-modal .wf-filter-row.d3view-flex-v .wf-filter-item {
width: 50%;
    flex: 0 0 calc(50% - 16px);
}

div.workflow .wf-filter-row:last-child,
div.d3view-inputsBuilder .wf-filter-row:last-child,
div.workflow-modal .wf-filter-row:last-child {
margin-bottom: 0;
}

div.workflow .wf-filter-item,
div.d3view-inputsBuilder .wf-filter-item,
div.workflow-modal .wf-filter-item {
display: flex;
    flex-direction: column;
}

div.workflow .wf-filter-label,
div.d3view-inputsBuilder .wf-filter-label,
div.workflow-modal .wf-filter-label {
display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    color: #34495e;
    font-size: 13px;
}

div.workflow .wf-filter-select,
div.d3view-inputsBuilder .wf-filter-select,
div.workflow .wf-filter-input,
div.d3view-inputsBuilder .wf-filter-input,
div.workflow-modal .wf-filter-select,
div.workflow-modal .wf-filter-input {
/* border: 1px solid #ccc; */
    border-radius: 4px;
    /* padding: 8px 10px; */
    /* font-size: 14px; */
    transition: all 0.2s ease;
    background: white;
    color: #333;
    width: 100%;
}

div.workflow .wf-filter-select:focus,
div.d3view-inputsBuilder .wf-filter-select:focus,
div.workflow .wf-filter-input:focus,
div.d3view-inputsBuilder .wf-filter-input:focus,
div.workflow-modal .wf-filter-select:focus,
div.workflow-modal .wf-filter-input:focus {
outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

div.workflow .wf-filter-select:hover,
div.d3view-inputsBuilder .wf-filter-select:hover,
div.workflow .wf-filter-input:hover,
div.d3view-inputsBuilder .wf-filter-input:hover,
div.workflow-modal .wf-filter-select:hover,
div.workflow-modal .wf-filter-input:hover {
border-color: #999;
}

div.workflow .wf-filter-toggles,
div.d3view-inputsBuilder .wf-filter-toggles,
div.workflow-modal .wf-filter-toggles {
display: flex;
    /* flex-direction: column; */
    gap: 12px;
    flex-wrap: wrap;
}

div.workflow .wf-toggle-item,
div.d3view-inputsBuilder .wf-toggle-item,
div.workflow-modal .wf-toggle-item {
display: flex;
    align-items: center;
    flex: 0 0 calc(50% - 12px);
    /* flex-wrap: wrap; */
}

div.workflow .wf-toggle-switch,
div.d3view-inputsBuilder .wf-toggle-switch,
div.workflow-modal .wf-toggle-switch {
position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

div.workflow .wf-toggle-input,
div.d3view-inputsBuilder .wf-toggle-input,
div.workflow-modal .wf-toggle-input {
margin-right: 20px;
}

div.workflow .wf-toggle-label,
div.d3view-inputsBuilder .wf-toggle-label,
div.workflow-modal .wf-toggle-label {
display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
    position: relative;
}

div.workflow .wf-toggle-label:hover,
div.d3view-inputsBuilder .wf-toggle-label:hover,
div.workflow-modal .wf-toggle-label:hover {
background: #e9ecef;
    border-color: #ccc;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label,
div.d3view-inputsBuilder .wf-toggle-input:checked+.wf-toggle-label,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label {
background: #e3f2fd;
    border-color: #2196f3;
    color: #1976d2;
}

div.workflow .wf-toggle-slider,
div.d3view-inputsBuilder .wf-toggle-slider,
div.workflow-modal .wf-toggle-slider {
width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

div.workflow .wf-toggle-slider::before,
div.d3view-inputsBuilder .wf-toggle-slider::before,
div.workflow-modal .wf-toggle-slider::before {
content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider,
div.d3view-inputsBuilder .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider {
background: #2196f3;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider::before,
div.d3view-inputsBuilder .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider::before,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider::before {
transform: translateX(20px);
    background: white;
}

div.workflow .wf-toggle-text,   
div.d3view-inputsBuilder .wf-toggle-text,
div.workflow-modal .wf-toggle-text {
display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
}

div.workflow .wf-filter-footer,
div.d3view-inputsBuilder .wf-filter-footer,
div.workflow-modal .wf-filter-footer {
padding: 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
    /** R0-3401 - keep footer pinned when content scrolls **/
    flex: 0 0 auto;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu {
position: relative;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu>.dropdown-menu {
top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    display: none;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu:hover>.dropdown-menu {
display: block;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu>a:after {
display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu-left>.dropdown-menu {
left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu-left>a:after {
border-width: 5px 5px 5px 0;
    border-right-color: #ccc;
    border-left-color: transparent;
    margin-left: -10px;
    margin-right: auto;
    float: left;
}

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a {
padding: 8px 20px;
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a:hover {
background-color: #f5f5f5;
    color: #262626;
    text-decoration: none;
}

div.workflow .wf-split-nav-tab .modal {
position: static !important;
    overflow: visible !important;
    height: 100%;
}

div.workflow .wf-split-nav-tab .modal-dialog {
margin: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

div.workflow .wf-split-nav-tab .modal-content {
border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
}

div.workflow .wf-split-nav-tab .modal-header {
display: none !important;
}

div.workflow .wf-split-nav-tab .modal-body {
flex: 1;
    overflow-y: auto;
}

div.workflow .wf-split-nav-tab .d3view-plugins-sidebar .panel-heading,
div.workflow .wf-split-nav-tab .d3view-plugins-sidebar .panel-heading+button[data-dismiss="sidebar"] {
display: none;
}

div.workflow-modal .sample-inputs-list .wf-input-label {
border-radius: 0;
    border-left: none;
    border-top: none;
    cursor: move;
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover {
background: var(--neutralLighter);
}

div.workflow-modal .sample-inputs-list .wf-input-label .sample-input-label {
width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-label {
width: calc(100% - 53px);
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-label>span {
display: block;
    width: calc(100% - 0px);
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow-modal .sample-inputs-list .wf-input-label .sample-input-options {
display: none;
    position: absolute;
    right: 6px;
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-options {
display: flex;
    align-items: center;
    display: none;
}



/*
 * CSS for template: wf-minimized-modal.tpl
 * Source: javascripts/templates/modular/common/modals/wf-minimized-modal.tpl
 * Auto-generated by modularize_css.py
 */

ul.wf-minimized-modals {
position: fixed;
    bottom: 0;
    right: 0;
    z-index: 2000;
    margin-bottom: 0;
}

ul.wf-minimized-modals .wf-modal-min {
padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: inline-block;
    border: 2px solid darkorange;
    background: #FFF;
    width: 300px;
    cursor: move;
}

ul.wf-minimized-modals .wf-modal-min .modal-title {
font-weight: bold;
}

ul.wf-minimized-modals {
position: fixed;
    bottom: 0;
    right: 0;
    z-index: 2000;
    margin-bottom: 0;
}

ul.wf-minimized-modals .wf-modal-min {
padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: inline-block;
    align-items: center;
    border: 2px solid darkorange;
    background: #FFF;
    width: 300px;
}

ul.wf-minimized-modals .wf-modal-min .modal-title {
font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 63px);
    display: inline-block;
}

ul.wf-minimized-modals .wf-modal-min .control-buttons {
flex: 0 0 auto;
}



/*
 * CSS for template: wf-node-info-box-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-node-info-box-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-node-info>.close {
pointer-events: all !important;
}



/*
 * CSS for template: wf-workflow-main-modal-tpl.tpl
 * Source: javascripts/templates/modular/common/modals/wf-workflow-main-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-exec-message {
transition: opacity 0.3 ease-in;
}

div.workflow .wf-canvas-tooltip.node_polling {
width: 40vw;
    max-width: unset;
}

div.workflow .wf-iterator-info {
position: absolute;
    z-index: 3;
    /*box-shadow: var(--plugin-box-shadow-light);*/
    width: 170px;
    /*background: #FFF;*/
    overflow: visible;
}

div.workflow .wf-exec-message li[data-id].active {
color: green;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul {
display: flex;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li {
width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    border: 1px solid #DDD;
    border-radius: 50%;
    position: relative;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:last-child {
margin-right: 0;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):after {
content: ' ';
    width: 0px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    transition: width 0.3s ease-in;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
content: ' ';
    width: 32px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
background: #59e069;
    color: #FFF;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
width: 32px;
    background: #59e069;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] {
background: none;
    box-shadow: none;
    border: 1px solid #DDD;
    border-radius: 5px;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-btns {
display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 200;
    background: #FFF;
    border-radius: 8px;
}

div.workflow .worker-search-dd li.list-group-item {
border: none;
}

div.workflow .worker-search-dd li.list-group-item:hover,
div.workflow .worker-search-dd li.list-group-item.navigated,
div.workflow .worker-search-dd tbody tr:hover,
div.workflow .worker-search-dd tr.navigated {
background-color: var(--dt-selection-color);
}

div.workflow .worker-search-dd ul.list-group {
box-shadow: none;
}

div.workflow .worker-search-dd .toggle-info.active {
color: steelblue;
    ;
}

div.workflow .plugin-settings-line .wf-search-container {
position: relative;
}

div.workflow .plugin-settings-line .wf-search-container .main-dd {
width: 100%;
}

div.workflow .plugin-settings-line .wf-search-container .main-dd table tr[data-id] {
cursor: pointer;
}

div.workflow .plugin-settings-line .wf-search-container .main-dd table tbody td {
word-break: break-all;
    vertical-align: middle;
}

div.workflow .plugin-settings-line .wf-search-container input.wf-worker-search {
transition: width 0.2s linear;
    padding-right: 80px;
    padding-left: 47px !important;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-type-dd {
position: absolute;
    left: 5px;
    z-index: 10;
    top: 4px;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-type-dd .btn {
padding: 4px;
    color: grey;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-type-btn {
padding: 2px !important;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-type-btn .wf-type-label {
margin-right: 0;
}

div.workflow .plugin-settings-line .wf-search-container>.left-inner-addon>.twitter-typeahead {
width: 300px;
    /*border: 1px solid #bbb;*/
    /*border-radius: 22px !important;*/
}

div.workflow.progress {
cursor: progress !important;
}

div.workflow.progress div.wf-main-container {
pointer-events: none !important;
    opacity: 0.8;
}

div.workflow.workflow,
div.workflow.shown.fullscreen {
position: fixed;
    /*top: -100%;*/
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    -o-transition: all 1.3s;
    transition: all 1.3s;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    z-index: 1050;
}

div.workflow .wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
    opacity: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

div.workflow .wf-main-container .wf-modal-backdrop.enabled {
opacity: 0.3 !important;
    z-index: 5 !important;
}

div.workflow .btn-workflow {
background-color: #4f5359;
    color: #FFF;
    border: 1px solid #4f5359;
    vertical-align: middle;
    position: relative;
}

div.workflow .btn-workflow:focus {
outline: none !important;
}

div.workflow .btn-workflow:hover {
background: #FFF !important;
    color: #4f5359 !important;
}

div.workflow.shown {
min-height: 200px;
    opacity: 0;
}

div.workflow.shown.in {
opacity: 1 !important;
}

div.workflow.shown {
display: block;
}

div.workflow.shown.workflow,
div.workflow.shown.fullscreen {
top: 0;
}

div.workflow.shown.fullscreen {
position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
}

/* Rail-aware takeover (2026-07-11): when the editor takes over the viewport
   (the body.wf-modal-open contract set by ControlsView.toggleFullView), yield
   the d3VIEW pin-left app rail via --d3v-rail-w (style.css; 0 on rail-less
   pages) instead of rendering under its 44px overlay. Keyed on the body class
   -- NOT the bare div.workflow selectors -- because the page-mode editor is
   position:relative, where a nonzero left would double-shift it past the
   body's own rail gutter. */
/* 2026-08-20: gate on the ELEMENT as well as the body. Plugins.Utils.minimizeModal
   blanket-strips 'simlytiks-open modal-open wf-modal-open' when ANY modal is
   minimized, which un-gated this rule and dropped the workflow behind the rail
   until the modal was maximized again. wf-rail-aware is set on div.workflow at
   every site that manages the body class, so the two are equivalent -- the union
   only ADDS clearance where the body class was stripped from under us. */
body.wf-modal-open div.workflow.workflow,
div.workflow.workflow.wf-rail-aware,
body.wf-modal-open div.workflow.shown.fullscreen,
div.workflow.shown.fullscreen.wf-rail-aware {
    left: var(--d3v-rail-w, 0px);
    width: calc(100% - var(--d3v-rail-w, 0px)) !important;
}

div.workflow .wf-mini-container .d3view-mini-workflow-ui {
display: block !important;
    margin-top: 20px;
}

div.workflow .vizcontainer,
div.workflow .wf-main-container,
div.workflow .wf-main-container .chart-view {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*cursor: default;*/
}

div.workflow div.wf-main-container .history {
/*position: absolute;*/
    /*left: 48%;*/
    /*top: 10px;*/
    /*z-index: 2;*/
    margin-right: 10px;
    display: inline-block;
}

div.workflow div.wf-main-container div.center_elements {
/*position: absolute;*/
    /*left: 40%;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}

div.workflow div.wf-main-container .zoom {
position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container .additional_options {
position: absolute;
    bottom: 40px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
    display: flex;
    align-items: center;
}

div.workflow div.wf-main-container .zoom button {
display: block;
    width: 100%;
}

div.workflow div.wf_3d {
display: inline-block;
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 300px;*/
    /*z-index: 1;*/
}

div.workflow span.start_animation,
div.workflow span.stop_animation {
position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

div.workflow span.stop_animation {
left: 150px;
}

div.workflow div.chart-view .experiment-message {
font-size: 14px;
    font-weight: bold;
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #4f5359;
}

div.workflow div.wf-main-container .restructure {
position: absolute;
    top: 30px;
    right: 0;
}

div.workflow button:focus,
div.workflow button:active {
outline: none !important;
}

div.workflow .toggle_logs.btn-workflow:hover {
background: #4f5359 !important;
    color: #FFF !important;
}

div.workflow .toggle_logs {
/*position: absolute;*/
    /*bottom: 0;*/
    /*left: 50%;*/
    /*font-size: 17px;*/
    /*color: steelblue;*/
    cursor: pointer;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow .canvas_selection.active,
div.workflow .edgeDrawing.active {
background: #428bca;
    color: #FFF;
    text-shadow: none;
}

div.workflow .wf-main-container.hasCanvasSelection .additional_options button:not(.canvas_selection),
div.workflow .wf-main-container.hasCanvasSelection .zoom.btn-group button,
div.workflow .wf-main-container.edgeDrawing .zoom.btn-group button:not(.edgeDrawing) {
pointer-events: none;
    opacity: 0.4;
}

div.workflow .wf-main-container.canvasSelectionStart .additional_options,
div.workflow .wf-main-container.canvasSelectionStart #birds-eye-view {
pointer-events: none !important;
}

div.workflow .toggle_logs.moved {
background: #428BCA;
    color: #FFF;
    text-shadow: none;
}

div.workflow #birds-eye-view.moved {
bottom: 91px !important;
}

div.workflow .zoom.moved {
bottom: 130px !important;
}

div.workflow .additional_options.moved {
bottom: 101px !important;
}

div.workflow #workflow-logs-container {
position: fixed;
    bottom: -100px;
    width: calc(100% - 75px);
    left: 75px;
    opacity: 0;
    display: none;
    padding: 10px 0;
    border-top: 1px solid #EEE;
    background-color: #FFF;
    /*color: #FFF;*/
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

div.workflow #workflow-logs-container.enabled {
bottom: -1px;
    opacity: 1;
}

div.workflow .d3view-wf-header {
margin: 0;
    border-bottom: 1px solid #DDD;
    height: 80px !important;
}

div.workflow .wf-nav-menu {
/*top: 100px!important;*/
    height: calc(100% - 120px) !important;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups {
height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups>ul {
margin-bottom: 0;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups ul li[data-id].pl-hasValue>a {
color: orange;
}

div.workflow .d3view-wf-header .plugin-logo-container {

}

div.workflow div.top-settings-container {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 7;
    height: 70px;
    transition: background-color 0.3s ease-in;
}

div.workflow div.top-settings-container.needs-saving {
background-color: #ffa50038;
}

div.workflow div.top-settings-container.recently-saved {
background-color: lightgreen;
}

div.workflow #left_toggle {
/*display: flex;*/
    display: inline-block;
    align-items: center;
    width: 300px;
    height: 30px;
    cursor: pointer;
    padding: 4px;
    background-color: #4f5359;
    border-radius: 3px;
    font-size: 12px !important;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -ms-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

div.workflow .settings-left {
position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow .settings-right {
position: absolute;
    right: 15px;
    top: 12px;
}

div.workflow [data-mode="edit"] #left_toggle {
padding: 0 !important;
    background: transparent;
}

div.workflow .auto_save_container {
position: relative;
    top: 5px;
}

div.workflow .auto_save_container .bootstrap-switch {
border-radius: 30px;
}

div.workflow .import_options {
/*display: inline-block;*/
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*left: 150px;*/
    /*z-index: 6;*/
    border: none;
}

div.workflow .shapes_dropdown {

}

div.workflow .shapes_dropdown .dropdown-menu {
background: #4f5359;
    color: #FFF;
    padding: 15px;
    width: 400px;
}

div.workflow .insert_shapes:hover>i {
color: #4f5359 !important;
}

div.workflow li:hover {
/*background: #FFF;*/
    /*color: #4f5359;*/
}

div.workflow .shapes_dropdown .dropdown-menu:before,
div.workflow .shapes_dropdown .dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #4f5359;
}

div.workflow .shapes_dropdown .dropdown-menu:before {
left: 10px;
    top: -8px;
    border-width: 0 8px 8px 8px;
}

div.workflow .import_options .dropdown-menu {
margin-top: 0;
}

div.workflow .import_options:hover .dropdown-menu {
display: block;
}

div.workflow .toggle_nav_menu {
/*padding: 3px 5px!important;*/
    /*cursor: pointer;*/
    /*color: #FFF;*/
    /*font-size: 1.4em;*/
}

div.workflow .toggle_nav_menu.opened {
color: #428bca;
}

div.workflow .nav-menu-header .toggle_nav_menu {
/*position: absolute;*/
    left: 23px;
    top: 18px;
}

div.workflow .toggle_nav_menu:hover {
/*color: #DDD;*/
}

div.workflow .nav-menu-header img {
width: 30px;
    height: 25px;
}

div.workflow .wf-main-container .auto-save-alert {
overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*color: lightgreen;*/
    font-weight: 500;
    opacity: 1;
    margin-right: 5px;
    transition: opacity 0.5s ease-in;
}

div.workflow .wf-main-container .editable-container {
color: #000;
    margin-bottom: 5px;
}

div.workflow .wf-main-container .editable-container .editable-input input {
width: var(--nameW);
}

div.workflow .close_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 10px;*/
}

div.workflow .update_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 80px;*/
}

div.workflow .quick_save_workflow {
/*position: absolute;*/
    /*top: 12px;*/
    /*left: 325px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*height: 30px;*/
    /*padding: 8px;*/
    /*cursor: pointer;*/
}

div.workflow .quick_save_workflow:hover,
div.workflow .quick_save_workflow.hovered {
/*background: #EEE;*/
}

div.workflow .wf_reset {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 290px;*/
}

div.workflow .wf_tour {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 195px!important;*/
}

div.workflow .wf_keyboard_shortcuts {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 158px;*/
}

div.workflow .switch_workflows_list {
position: absolute;
    top: 12px;
    z-index: 1;
    right: 400px;
}

div.workflow div.switch_workflows_list .btn-workflow,
div.workflow div.switch_workflows_list .btn-workflow:focus,
div.workflow div.switch_workflows_list .btn-workflow:active {
color: #FFF;
}

div.workflow .wf_tour[data-mode="edit"] {
/*right: 360px!important;*/
}

div.workflow .wf_switch_mode {
/*position: absolute;*/
    /*bottom: 12px;*/
    /*z-index: 1;*/
    /*right: 50px;*/
}

div.workflow .wf-main-container .workers-addition {
display: inline-block;
}

div.workflow .wf-main-container .execution-controls {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 80px;*/
    /*z-index: 1;*/
}

div.workflow .wf-main-container .workers-addition.update_shown {
right: 160px;
}

div.workflow .wf-main-container .execution-controls {
/*right: 400px!important;*/
}

div.workflow .wf-main-container .workers-addition .workers-select-list {
display: inline-block;
}

div.workflow .wf-main-container .workers-select-list .advanced_worker_addition {
margin-left: 10px;
    position: absolute;
    top: 4px;
    z-index: 3;
    background-color: #FFF;
    border: 1px solid #DDD;
    right: 10px;
}

div.workflow .wf-main-container .canvas_worker_selection {
display: inline-block;
    /*margin-left: 20px;*/
}

div.workflow .wf-main-container .additional_options button:focus {
outline: none !important;
}

div.workflow .wf-main-container .additional_options button:hover {
color: inherit;
    background-color: #eee;
}

div.workflow .wf-main-container .additional_options button.active {
color: #FFF;
    border-color: #428bca;
    background-color: #428bca;
    outline: none !important;
    text-shadow: none;
}

div.workflow .wf-main-container .workers-addition .btn-workflow {
color: #FFF;
}

div.workflow .wf-nav-menu {
position: fixed;
    left: 0;
    width: 75px;
    top: 0px;
    margin-top: -1px;
    /*width: 300px;*/
    height: 100%;
    z-index: 6;
    background: #fff;
    border-right: 1px solid #DDD;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -ms-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s;
}

div.workflow[data-in-modal="false"] .wf-nav-menu {
position: absolute;
}

div.workflow .wf-nav-menu .nav-menu-header {
margin-left: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    display: flex;
    align-items: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li {
text-align: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li span.nav-menu-item-label {
display: block;
}

div.workflow .wf-main-container.nav_menu_opened .nav-menu-header {
opacity: 1;
}

div.workflow .wf-main-container.nav_menu_opened .wf-nav-menu {
left: 0;
    overflow: auto;
}

div.workflow .wf-nav-menu .nav-submenu {
background: #4f5359;
    width: 65%;
}

div.workflow .wf-nav-menu .nav-menu-header h3 {
vertical-align: middle;
    color: #FFF;
    margin-bottom: 0;
    font-size: 2em;
}

div.workflow #wf-structure {
display: none;
}

div.workflow .wf-nav-menu #wf-additional-options li:not(.list-header) {
margin: 10px 0;
    padding: 0 15px;
    font-size: 1em;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.03em;
}

div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) img {
height: 29px;
}

div.workflow .wf-nav-menu li:not(.list-header):hover {
color: #428BCA;
}

div.workflow .wf-nav-menu li:not(.list-header):hover .nav-submenu {
display: block !important;
    position: absolute;
    left: 100%;
    top: -10px;
}

div.workflow .wf-nav-menu #wf-structure li:not(.list-header) .nav-submenu>li.active:after {
content: '\f00c';
    font-family: FontAwesome;
}

div.workflow div.wf-main-container div.execution_params .status {
font-size: 14px;
    color: #4f5359;
    margin-right: 5px;
}

div.workflow div.wf-main-container div.execution_params .progress {
margin-bottom: 0;
    display: inline-block;
    width: 225px;
    vertical-align: middle;
}

div.workflow div.wf-main-container div.execution-controls .execution_stats {
margin-top: 5px;
    border: 1px solid #DDD;
    box-shadow: -1px 4px 9px -8px #444;
    border-radius: 5px;
    vertical-align: middle;
    /*font-size: 13px;*/
    padding: 10px;
    width: 300px;
    background: rgba(247, 247, 247, 1);
    /*position: absolute;*/
}

div.workflow div.wf-main-container div.execution-controls .exec_stats {
cursor: pointer;
}

div.workflow div.wf-main-container div.execution_stats>button {
width: 100%;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: default;
}

div.workflow .wf-main-container div.execution_stats .stats_info {
max-width: 250px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    max-height: 100px;
    overflow: auto;
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
}

div.workflow div.wf-main-container .play-controls {
display: inline-block;
    /*position: absolute;*/
    /*right: 80px;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}
div.workflow div.wf-main-container .plugin-header-right {
    max-width: 100%;
}
div.workflow div.wf-main-container .plugin-header-right .play-controls .wf_restart {

}

div.workflow div.wf-main-container .plugin-header-right .play-controls .hasError>i {
color: red;
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .noError>i {
color: green;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):beforew,
div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):afterw {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    right: 10px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:before {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
    top: -12px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:after {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent #FFF transparent;
    top: -11px;
}

div.workflow div.wf-main-container .execution_options div.bootstrap-select {
width: 150px;
}

div.workflow div.wf-notifications .dropdown-menu {
background-color: #4f5359;
    color: #FFF;
}

div.workflow.workflow {
padding-left: 0 !important;
}

div.workflow canvas.main_canvas {
position: absolute;
    left: 0;
    top: 0;
    /* background-image: radial-gradient(white, #eaebed, #DDD); */
    background-color: rgb(255, 255, 255);
    /*background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d0d0d0",GradientType=1);*/
}

div.workflow div.chart-view div.canvas-backdrop {
position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

div.workflow .disabled * {
pointer-events: none !important;
    color: inherit !important;
}

div.workflow div.canvas-comment-box {
position: absolute;
    padding-bottom: 10px;
    padding-top: 10px;
    /*width: 100%;*/
}

div.workflow div.canvas-node-options {
position: absolute;
    /*background: #FFF;*/
    /*font-size: 11px;*/
    /*border: 1px solid #ddd;*/
    /*-webkit-border-radius: 5px;*/
    /*-moz-border-radius: 5px;*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    min-width: 100px;
}

div.workflow div.canvas-comment-box textarea {
width: 150px;
    height: 80px;
}

div.workflow div.canvas-node-info {
position: absolute;
    background: #FFF;
    font-size: 11px;
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: 300px;
    max-height: 300px;
    overflow: auto;
    z-index: 2;
}

div.workflow .canvas-node-status-box {
position: absolute;
    opacity: 0.4;
    pointer-events: none;
    border-radius: 4px;
}

div.workflow .canvas-node-status-box .box-rect {
transition: width 0.3s ease-in;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu {
max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu button#add_workers {
margin-top: 5px;
    margin-right: 5px;
    float: right;
}

div.workflow div.workers-select-list .worker-position>ul.dropdown-menu>li:hover>ul.dropdown-menu {
display: block;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu {
position: relative;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu>.dropdown-menu {
top: 0;
    left: 100%;
    margin-top: -6px;
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

div.workflow div.workers-select-list div.bootstrap-select>div.dropdown-menu>ul.dropdown-menu.shadow {
opacity: 0.3;
    pointer-events: none;
}

div.workflow div.workers-select-list .wf-actionsbox>.btn-group.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.workers-select-list .bs-searchbox.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.flow-container div.wf-header .wf-managers div.popover {
width: 160px !important;
    font-weight: bold;
    z-index: 1054;
}

div.workflow div.flow-container div.wf-header .navigation-tabs li a {
padding: 6px 15px;
}

div.workflow div.flow-container div.wf-header .wf-managers .badge {
color: #337ab7;
    padding: 2px 4px;
}

div.workflow #sidebar-toggle {
position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    background: rgba(43, 48, 54, 0.95);
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow #sidebar-toggle.toggled {
right: 350px;
}

div.workflow .badge.badge-info {
background-color: #5bc0de;
}

div.workflow .badge.badge-success {
background-color: #5cb85c;
}

div.workflow div.canvas-controls {
position: absolute;
    top: 0;
    right: 3px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header {
padding: 15px;
    border-bottom: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header h4 {
transition: 0.4s;
    font-weight: bold;
}

div.workflow div.vizcontainer div.logs_container div.logs-body {
width: 300px;
    overflow: auto;
}

div.workflow div.vizcontainer div.logs_container div.logs-footer {
padding: 10px 0;
    text-align: center;
    border-top: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message {
font-size: 13px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 4px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message .log_time {
font-weight: bold;
}

div.workflow div.wf-main-container div.chart-view {
position: relative;
    /*overflow: hidden;*/
}

div.workflow div.wf-main-container div.chart-view .wf-exec-complete,
div.workflow div.wf-main-container .wf-top-alert {
position: absolute;
    top: 0px;
    left: 75px;
    width: calc(100% - 75px);
    z-index: 3;
    height: 50px;
}

div.workflow div.wf-main-container div.chart-view.commentBoxDragging,
div.workflow div.wf-main-container div.chart-view.commentBoxResizing {
pointer-events: none;
}

div.workflow div.wf-main-container div#birds-eye-view {
position: absolute;
    left: 75px;
    bottom: 0;
    z-index: 2;
    /*background: #FFF;*/
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container div#birds-eye-view #birds-eye-canvas {
/*border: 1px solid #CCC;*/
    display: flex;
    flex: 0 0 auto;
}

div.workflow div.wf-main-container div#birds-eye-view canvas {
background: #eaebed;
    /*display: none;*/
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
pointer-events: none !important;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip.in {
display: block;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
display: none;
}

div.workflow div#birds-eye-view .birdseye-box {
position: absolute;
    top: 0;
    left: 50px;
    width: 80px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
    z-index: 2;
}

div.workflow div.wf-main-container #birds-eye-view .minimize:focus {
outline: none !important;
}

div.workflow div.wf-main-container #birds-eye-view .minimize {
position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

div.workflow div.wf-main-container div.chart-view div.wf-canvas-dropzone {
visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

div.workflow .wf-main-container.nav_menu_opened div.wf-canvas-dropzone {
left: 300px !important;
}

div.workflow div.wf-main-container div.chart-view #toggle-workflow-rules {
position: absolute;
    right: 10px;
    top: 2px;
    font-size: 1.4em;
    cursor: pointer;
}

div.workflow div.wf-main-container div#workflow-rules ul {
list-style-type: disc;
    margin-left: 20px;
}

div.workflow div.wf-main-container div#workflow-rules .rules-title {
padding: 10px;
    font-weight: bold;
}

div.workflow div.wf-main-container div#workflow-rules {
position: absolute;
    top: 4px;
    right: 24px;
    pointer-events: none;
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffbe;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    display: none;
    width: 350px;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body {
height: 71px;
    overflow: auto;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p {
margin-bottom: 2px;
    padding-left: 10px;
    letter-spacing: 0.05em;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p .timestamp {
font-weight: bold;
}

div.workflow div.wf-main-container #toggle-workflow-logs {
cursor: pointer !important;
}

div.workflow div.wf-main-container #toggle-workflow-logs:hover {
text-decoration: underline;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list {
width: 100%;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list {
float: left;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list div.edge {
position: relative;
    border-left: 2px solid #ccc;
    left: 50%;
    height: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.executing:before {
content: '';
    position: absolute;
    border: 1px solid red;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item {
/*height: 50px;*/
    /*background: #eee;*/
    /*border-top: 1px solid #ccc;*/
    /*border-bottom: 1px solid #ccc;*/
    font-size: 15px;
    font-weight: 400;
    /*margin-top: 50px;*/
    position: relative;
    width: 100%;
    float: left;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.default {
background: #eee;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row {
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: 'Roboto,"DejaVu Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif';
    width: 100%;
    background-size: 50px 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.bg-primary {
background-color: #428bca;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
margin-top: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
height: 50px;
    background-color: rgba(0, 0, 0, 0.03);
    display: block !important;
    position: relative;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight:before {
content: '';
    position: absolute;
    border: 1px solid #ccc;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item>div.connector {
/*width: 100%!important;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list div.connector {
height: 50px;
    float: left;
    margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list div.connector {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list li.wf-item {
/*border: 1px solid #ccc;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item:first-child {
margin-top: 0;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.label {
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.badge {
background-color: #fff !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-primary span.badge {
color: #428BCA !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-success span.badge {
color: #5CB85C !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.active>div.row {
background: #428bca;
    color: #fff;
}

div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .edit-node,
div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .delete-node {
cursor: pointer;
    padding: 5px;
}

div.workflow div.wf-main-container div.chart-view .canvas-node-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .canvas-node-spinner.steelblue {
color: steelblue;
}

div.workflow div.wf-main-container div.chart-view .iterating-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .dependency-toggle {
position: absolute;
    right: 10px;
    top: 100px;
    z-index: 10;
}

div.workflow div.wf-main-container div.chart-view .wf-pointer-marker {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
}

div.workflow div.wf-main-container div.chart-view .current_execution {
position: absolute;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 4px;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after,
div.workflow div.wf-main-container div.chart-view .current_execution:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    top: 100%;
    position: absolute;
    left: 48%;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after {
border-color: #FFF transparent transparent transparent;
    border-width: 7px 8px 0 8px;
    ;
}

div.workflow div.wf-main-container div.chart-view .current_execution:before {
border-color: #CCC transparent transparent transparent;
    border-width: 8px 8px 0 8px;
}

div.workflow #wf-builder-help-pages {
position: absolute;
    left: 0;
    top: 0;
    overflow: auto;
}

div.workflow #wf-builder-help ul.help-list li:hover {
background: #428BCA;
}

div.workflow #wf-builder-help ul.help-list li:hover a {
color: #FFF;
}

.wf-init-loader-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}
.wf-init-loader {
    font-size: 84px;
    color: #2c5282;
}

div.workflow div.wf-main-container .predicted_worker_container {
position: absolute;
    display: none !important;
}

div.workflow div.wf-main-container .predicted_worker_container>label {
top: -20px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button {
width: 50px;
    height: 45px;
    border: 3px dotted #CCC;
    background-color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button.clicked {
background-color: #428BCA;
    color: #FFF;
}

div.workflow div.wf-main-container .predicted_worker_container>button:hover {
background-color: #efefef;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown {
left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0;
    width: 300px;
}

div.workflow div.predicted_workers_dropdown .predicted_workers_dropdown_heading {
background-color: #efefef;
    padding: 5px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a:focus {
outline: none;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a {
text-decoration: none;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.workflow div.predicted_workers_dropdown ul.workers-list {
max-height: 150px;
    overflow: auto;
}

div.workflow div.predicted_workers_dropdown li.list-group-item {
padding: 5px 15px;
    cursor: pointer;
    border: none;
}

div.workflow div.predicted_workers_dropdown li.list-group-item:hover {
background-color: #efefef;
}

div.workflow .workers-select-list>.dropdown-toggle {
/*width: 200px;*/
    /*text-align: left;*/
}

div.workflow .workers-list-dropdown {
/*left: 50%;*/
    /*width: 40vw;*/
    /*transform: translateX(-50%);*/
    margin-top: 12px;
    width: 100%;
}

div.workflow .workers-list-dropdown:before,
div.workflow .workers-list-dropdown:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -10px;
    left: 50%;
}

div.workflow .workers-list-dropdown:before {
border-color: transparent transparent #DDD transparent;
    border-width: 0 13px 13px 13px;
    left: 50%;
    margin-left: -4px;
    top: -13px;
}

div.workflow .workers-list-dropdown:after {
border-color: transparent transparent #FFF transparent;
    border-width: 0 12px 12px 12px;
    margin-left: -3px;
    top: -11px;
}

div.workflow .nav-content-label .plugin-spin {
font-size: 14px;
    color: dimgrey;
    margin-left: 5px;
}

div.workflow input.worker-search,
.wf-workers-container input.worker-search {
background-image: url("/images/searchicon.png");
    background-repeat: no-repeat;
    background-position: left;
    background-position-x: 4px;
    background-size: 15px;
    padding-left: 25px;
    font-size: 2em;
}

div.workflow .wf-exec-message {
transition: opacity 0.3 ease-in;
}

div.workflow .wf-canvas-tooltip.node_polling {
width: 40vw;
    max-width: unset;
}

div.workflow .wf-iterator-info {
position: absolute;
    z-index: 3;
    /*box-shadow: var(--plugin-box-shadow-light);*/
    width: 170px;
    /*background: #FFF;*/
    overflow: visible;
}

div.workflow .wf-exec-message li[data-id].active {
color: green;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul {
display: flex;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li {
width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    border: 1px solid #DDD;
    border-radius: 50%;
    position: relative;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:last-child {
margin-right: 0;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):after {
content: ' ';
    width: 0px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    transition: width 0.3s ease-in;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
content: ' ';
    width: 32px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
background: #59e069;
    color: #FFF;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
width: 32px;
    background: #59e069;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] {
background: none;
    box-shadow: none;
    border: 1px solid #DDD;
    border-radius: 5px;
}

div.workflow .plugin-settings-line .wf-search-container .wf-search-btns {
display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 200;
    background: #FFF;
    border-radius: 8px;
}

div.workflow .worker-search-dd li.list-group-item {
border: none;
}

div.workflow .worker-search-dd li.list-group-item:hover,
div.workflow .worker-search-dd li.list-group-item.navigated,
div.workflow .worker-search-dd tbody tr:hover,
div.workflow .worker-search-dd tr.navigated {
background-color: var(--dt-selection-color);
}

div.workflow .worker-search-dd ul.list-group {
box-shadow: none;
}

div.workflow .worker-search-dd .toggle-info.active {
color: steelblue;
    ;
}

div.workflow .plugin-settings-line .wf-search-container {
position: relative;
}

div.workflow .plugin-settings-line .wf-search-container .main-dd table tr[data-id] {
cursor: pointer;
}

div.workflow .plugin-settings-line .wf-search-container .main-dd table tbody td {
word-break: break-all;
    vertical-align: middle;
}

div.workflow .plugin-settings-line .wf-search-container input.wf-worker-search {
transition: width 0.2s linear;
    padding-right: 80px;
}

div.workflow .plugin-settings-line .wf-search-container>.left-inner-addon>.twitter-typeahead {
width: 300px;
    /*border: 1px solid #bbb;*/
    /*border-radius: 22px !important;*/
}

div.workflow.progress {
cursor: progress !important;
}

div.workflow.progress div.wf-main-container {
pointer-events: none !important;
    opacity: 0.8;
}

div.workflow.workflow,
div.workflow.shown.fullscreen {
position: fixed;
    /*top: -100%;*/
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    -o-transition: all 1.3s;
    transition: all 1.3s;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    z-index: 1050;
}

div.workflow .wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
    opacity: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

div.workflow .wf-main-container .wf-modal-backdrop.enabled {
opacity: 0.3 !important;
    z-index: 5 !important;
}

div.workflow .btn-workflow {
background-color: #4f5359;
    color: #FFF;
    border: 1px solid #4f5359;
    vertical-align: middle;
    position: relative;
}

div.workflow .btn-workflow:focus {
outline: none !important;
}

div.workflow .btn-workflow:hover {
background: #FFF !important;
    color: #4f5359 !important;
}

div.workflow.shown {
min-height: 200px;
    opacity: 0;
}

div.workflow.shown.in {
opacity: 1 !important;
}

div.workflow.shown {
display: block;
}

div.workflow.shown.workflow,
div.workflow.shown.fullscreen {
top: 0;
}

div.workflow.shown.fullscreen {
position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
}

/* Rail-aware takeover (2026-07-11): when the editor takes over the viewport
   (the body.wf-modal-open contract set by ControlsView.toggleFullView), yield
   the d3VIEW pin-left app rail via --d3v-rail-w (style.css; 0 on rail-less
   pages) instead of rendering under its 44px overlay. Keyed on the body class
   -- NOT the bare div.workflow selectors -- because the page-mode editor is
   position:relative, where a nonzero left would double-shift it past the
   body's own rail gutter. */
/* 2026-08-20: gate on the ELEMENT as well as the body. Plugins.Utils.minimizeModal
   blanket-strips 'simlytiks-open modal-open wf-modal-open' when ANY modal is
   minimized, which un-gated this rule and dropped the workflow behind the rail
   until the modal was maximized again. wf-rail-aware is set on div.workflow at
   every site that manages the body class, so the two are equivalent -- the union
   only ADDS clearance where the body class was stripped from under us. */
body.wf-modal-open div.workflow.workflow,
div.workflow.workflow.wf-rail-aware,
body.wf-modal-open div.workflow.shown.fullscreen,
div.workflow.shown.fullscreen.wf-rail-aware {
    left: var(--d3v-rail-w, 0px);
    width: calc(100% - var(--d3v-rail-w, 0px)) !important;
}

div.workflow .wf-mini-container .d3view-mini-workflow-ui {
display: block !important;
    margin-top: 20px;
}

div.workflow .vizcontainer,
div.workflow .wf-main-container,
div.workflow .wf-main-container .chart-view {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*cursor: default;*/
}

div.workflow div.wf-main-container .history {
/*position: absolute;*/
    /*left: 48%;*/
    /*top: 10px;*/
    /*z-index: 2;*/
    margin-right: 10px;
    display: inline-block;
}

div.workflow div.wf-main-container div.center_elements {
/*position: absolute;*/
    /*left: 40%;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}

div.workflow div.wf-main-container .zoom {
position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container .additional_options {
position: absolute;
    bottom: 40px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
    display: flex;
    align-items: center;
}

div.workflow div.wf-main-container .zoom button {
display: block;
    width: 100%;
}

div.workflow div.wf_3d {
display: inline-block;
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 300px;*/
    /*z-index: 1;*/
}

div.workflow span.start_animation,
div.workflow span.stop_animation {
position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

div.workflow span.stop_animation {
left: 150px;
}

div.workflow div.chart-view .experiment-message {
font-size: 14px;
    font-weight: bold;
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #4f5359;
}

div.workflow div.wf-main-container .restructure {
position: absolute;
    top: 30px;
    right: 0;
}

div.workflow button:focus,
div.workflow button:active {
outline: none !important;
}

div.workflow .toggle_logs.btn-workflow:hover {
background: #4f5359 !important;
    color: #FFF !important;
}

div.workflow .toggle_logs {
/*position: absolute;*/
    /*bottom: 0;*/
    /*left: 50%;*/
    /*font-size: 17px;*/
    /*color: steelblue;*/
    cursor: pointer;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow .canvas_selection.active,
div.workflow .edgeDrawing.active {
background: #428bca;
    color: #FFF;
    text-shadow: none;
}

div.workflow .wf-main-container.hasCanvasSelection .additional_options button:not(.canvas_selection),
div.workflow .wf-main-container.hasCanvasSelection .zoom.btn-group button,
div.workflow .wf-main-container.edgeDrawing .zoom.btn-group button:not(.edgeDrawing) {
pointer-events: none;
    opacity: 0.4;
}

div.workflow .wf-main-container.canvasSelectionStart .additional_options,
div.workflow .wf-main-container.canvasSelectionStart #birds-eye-view {
pointer-events: none !important;
}

div.workflow .toggle_logs.moved {
background: #428BCA;
    color: #FFF;
    text-shadow: none;
}

div.workflow #birds-eye-view.moved {
bottom: 91px !important;
}

div.workflow .zoom.moved {
bottom: 130px !important;
}

div.workflow .additional_options.moved {
bottom: 101px !important;
}

div.workflow #workflow-logs-container {
position: fixed;
    bottom: -100px;
    width: calc(100% - 75px);
    left: 75px;
    opacity: 0;
    padding: 10px 0;
    border-top: 1px solid #EEE;
    background-color: #FFF;
    /*color: #FFF;*/
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

div.workflow #workflow-logs-container.enabled {
bottom: -1px;
    opacity: 1;
}

div.workflow .wf-nav-menu {
/*top: 100px!important;*/
    height: calc(100% - 120px) !important;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups {
height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups>ul {
margin-bottom: 0;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups ul li[data-id].pl-hasValue>a {
color: orange;
}

div.workflow div.top-settings-container {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 7;
    height: 70px;
    transition: background-color 0.3s ease-in;
}

div.workflow div.top-settings-container.needs-saving {
background-color: #ffa50038;
}

div.workflow div.top-settings-container.recently-saved {
background-color: lightgreen;
}

div.workflow #left_toggle {
/*display: flex;*/
    display: inline-block;
    align-items: center;
    width: 300px;
    height: 30px;
    cursor: pointer;
    padding: 4px;
    background-color: #4f5359;
    border-radius: 3px;
    font-size: 12px !important;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -ms-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

div.workflow .settings-left {
position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow .settings-right {
position: absolute;
    right: 15px;
    top: 12px;
}

div.workflow [data-mode="edit"] #left_toggle {
padding: 0 !important;
    background: transparent;
}

div.workflow .auto_save_container {
position: relative;
    top: 5px;
}

div.workflow .auto_save_container .bootstrap-switch {
border-radius: 30px;
}

div.workflow .import_options {
/*display: inline-block;*/
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*left: 150px;*/
    /*z-index: 6;*/
    border: none;
}

div.workflow .shapes_dropdown {

}

div.workflow .shapes_dropdown .dropdown-menu {
background: #4f5359;
    color: #FFF;
    padding: 15px;
    width: 400px;
}

div.workflow .insert_shapes:hover>i {
color: #4f5359 !important;
}

div.workflow li:hover {
/*background: #FFF;*/
    /*color: #4f5359;*/
}

div.workflow .shapes_dropdown .dropdown-menu:before,
div.workflow .shapes_dropdown .dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #4f5359;
}

div.workflow .shapes_dropdown .dropdown-menu:before {
left: 10px;
    top: -8px;
    border-width: 0 8px 8px 8px;
}

div.workflow .import_options .dropdown-menu {
margin-top: 0;
}

div.workflow .import_options:hover .dropdown-menu {
display: block;
}

div.workflow .toggle_nav_menu {
/*padding: 3px 5px!important;*/
    /*cursor: pointer;*/
    /*color: #FFF;*/
    /*font-size: 1.4em;*/
}

div.workflow .toggle_nav_menu.opened {
color: #428bca;
}

div.workflow .nav-menu-header .toggle_nav_menu {
/*position: absolute;*/
    left: 23px;
    top: 18px;
}

div.workflow .toggle_nav_menu:hover {
/*color: #DDD;*/
}

div.workflow .nav-menu-header img {
width: 30px;
    height: 25px;
}

div.workflow .wf-main-container .editable-container {
color: #000;
    margin-bottom: 5px;
}

div.workflow .wf-main-container .editable-container .editable-input input {
width: var(--nameW);
}

div.workflow .close_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 10px;*/
}

div.workflow .update_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 80px;*/
}

div.workflow .quick_save_workflow {
/*position: absolute;*/
    /*top: 12px;*/
    /*left: 325px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*height: 30px;*/
    /*padding: 8px;*/
    /*cursor: pointer;*/
}

div.workflow .quick_save_workflow:hover,
div.workflow .quick_save_workflow.hovered {
/*background: #EEE;*/
}

div.workflow .wf_reset {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 290px;*/
}

div.workflow .wf_tour {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 195px!important;*/
}

div.workflow .wf_keyboard_shortcuts {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 158px;*/
}

div.workflow .switch_workflows_list {
position: absolute;
    top: 12px;
    z-index: 1;
    right: 400px;
}

div.workflow div.switch_workflows_list .btn-workflow,
div.workflow div.switch_workflows_list .btn-workflow:focus,
div.workflow div.switch_workflows_list .btn-workflow:active {
color: #FFF;
}

div.workflow .wf_tour[data-mode="edit"] {
/*right: 360px!important;*/
}

div.workflow .wf_switch_mode {
/*position: absolute;*/
    /*bottom: 12px;*/
    /*z-index: 1;*/
    /*right: 50px;*/
}

div.workflow .wf-main-container .workers-addition {
display: inline-block;
}

div.workflow .wf-main-container .execution-controls {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 80px;*/
    /*z-index: 1;*/
}

div.workflow .wf-main-container .workers-addition.update_shown {
right: 160px;
}

div.workflow .wf-main-container .execution-controls {
/*right: 400px!important;*/
}

div.workflow .wf-main-container .workers-addition .workers-select-list {
display: inline-block;
}

div.workflow .wf-main-container .workers-select-list .advanced_worker_addition {
margin-left: 10px;
    position: absolute;
    top: 4px;
    z-index: 3;
    background-color: #FFF;
    border: 1px solid #DDD;
    right: 10px;
}

div.workflow .wf-main-container .canvas_worker_selection {
display: inline-block;
    /*margin-left: 20px;*/
}

div.workflow .wf-main-container .additional_options button:focus {
outline: none !important;
}

div.workflow .wf-main-container .additional_options button:hover {
color: inherit;
    background-color: #eee;
}

div.workflow .wf-main-container .additional_options button.active {
color: #FFF;
    border-color: #428bca;
    background-color: #428bca;
    outline: none !important;
    text-shadow: none;
}

div.workflow .wf-main-container .workers-addition .btn-workflow {
color: #FFF;
}

div.workflow[data-in-modal="false"] .wf-nav-menu {
position: absolute;
}

div.workflow .wf-nav-menu .nav-menu-header {
margin-left: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    display: flex;
    align-items: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li {
text-align: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li span.nav-menu-item-label {
display: block;
}

div.workflow .wf-main-container.nav_menu_opened .nav-menu-header {
opacity: 1;
}

div.workflow .wf-main-container.nav_menu_opened .wf-nav-menu {
left: 0;
    overflow: auto;
}

div.workflow .wf-nav-menu .nav-submenu {
background: #4f5359;
    width: 65%;
}

div.workflow .wf-nav-menu .nav-menu-header h3 {
vertical-align: middle;
    color: #FFF;
    margin-bottom: 0;
    font-size: 2em;
}

div.workflow #wf-structure {
display: none;
}

div.workflow .wf-nav-menu #wf-additional-options li:not(.list-header) {
margin: 10px 0;
    padding: 0 15px;
    font-size: 1em;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.03em;
}

div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) img {
height: 29px;
}

div.workflow .wf-nav-menu li:not(.list-header):hover {
color: #428BCA;
}

div.workflow .wf-nav-menu li:not(.list-header):hover .nav-submenu {
display: block !important;
    position: absolute;
    left: 100%;
    top: -10px;
}

div.workflow .wf-nav-menu #wf-structure li:not(.list-header) .nav-submenu>li.active:after {
content: '\f00c';
    font-family: FontAwesome;
}

div.workflow div.wf-main-container div.execution_params .status {
font-size: 14px;
    color: #4f5359;
    margin-right: 5px;
}

div.workflow div.wf-main-container div.execution_params .progress {
margin-bottom: 0;
    display: inline-block;
    width: 225px;
    vertical-align: middle;
}

div.workflow div.wf-main-container div.execution-controls .execution_stats {
margin-top: 5px;
    border: 1px solid #DDD;
    box-shadow: -1px 4px 9px -8px #444;
    border-radius: 5px;
    vertical-align: middle;
    /*font-size: 13px;*/
    padding: 10px;
    width: 300px;
    background: rgba(247, 247, 247, 1);
    /*position: absolute;*/
}

div.workflow div.wf-main-container div.execution-controls .exec_stats {
cursor: pointer;
}

div.workflow div.wf-main-container div.execution_stats>button {
width: 100%;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: default;
}

div.workflow .wf-main-container div.execution_stats .stats_info {
max-width: 250px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    max-height: 100px;
    overflow: auto;
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
}

div.workflow div.wf-main-container .play-controls {
display: inline-block;
    /*position: absolute;*/
    /*right: 80px;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .wf_restart {

}

div.workflow div.wf-main-container .plugin-header-right .play-controls .hasError>i {
color: red;
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .noError>i {
color: green;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):beforew,
div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):afterw {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    right: 10px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:before {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
    top: -12px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:after {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent #FFF transparent;
    top: -11px;
}

div.workflow div.wf-main-container .execution_options div.bootstrap-select {
width: 150px;
}

div.workflow div.wf-notifications .dropdown-menu {
background-color: #4f5359;
    color: #FFF;
}

div.workflow.workflow {
padding-left: 0 !important;
}

div.workflow canvas.main_canvas {
position: absolute;
    left: 0;
    top: 0;
    /* background-image: radial-gradient(white, #eaebed, #DDD); */
    background-color: rgb(255, 255, 255);
    /*background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d0d0d0",GradientType=1);*/
}

div.workflow div.chart-view div.canvas-backdrop {
position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

div.workflow .disabled * {
pointer-events: none !important;
    color: inherit !important;
}

div.workflow div.canvas-comment-box {
position: absolute;
    padding-bottom: 10px;
    padding-top: 10px;
    /*width: 100%;*/
}

div.workflow div.canvas-node-options {
position: absolute;
    /*background: #FFF;*/
    /*font-size: 11px;*/
    /*border: 1px solid #ddd;*/
    /*-webkit-border-radius: 5px;*/
    /*-moz-border-radius: 5px;*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    min-width: 100px;
}

div.workflow div.canvas-comment-box textarea {
width: 150px;
    height: 80px;
}

div.workflow div.canvas-node-info {
position: absolute;
    background: #FFF;
    font-size: 11px;
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: 300px;
    max-height: 300px;
    overflow: auto;
    z-index: 2;
}

div.workflow .canvas-node-status-box {
position: absolute;
    opacity: 0.4;
    pointer-events: none;
    border-radius: 4px;
}

div.workflow .canvas-node-status-box .box-rect {
transition: width 0.3s ease-in;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu {
max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu button#add_workers {
margin-top: 5px;
    margin-right: 5px;
    float: right;
}

div.workflow div.workers-select-list .worker-position>ul.dropdown-menu>li:hover>ul.dropdown-menu {
display: block;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu {
position: relative;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu>.dropdown-menu {
top: 0;
    left: 100%;
    margin-top: -6px;
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

div.workflow div.workers-select-list div.bootstrap-select>div.dropdown-menu>ul.dropdown-menu.shadow {
opacity: 0.3;
    pointer-events: none;
}

div.workflow div.workers-select-list .wf-actionsbox>.btn-group.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.workers-select-list .bs-searchbox.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.flow-container div.wf-header .wf-managers div.popover {
width: 160px !important;
    font-weight: bold;
    z-index: 1054;
}

div.workflow div.flow-container div.wf-header .navigation-tabs li a {
padding: 6px 15px;
}

div.workflow div.flow-container div.wf-header .wf-managers .badge {
color: #337ab7;
    padding: 2px 4px;
}

div.workflow #sidebar-toggle {
position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    background: rgba(43, 48, 54, 0.95);
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow #sidebar-toggle.toggled {
right: 350px;
}

div.workflow .badge.badge-info {
background-color: #5bc0de;
}

div.workflow .badge.badge-success {
background-color: #5cb85c;
}

div.workflow div.canvas-controls {
position: absolute;
    top: 0;
    right: 3px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header {
padding: 15px;
    border-bottom: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header h4 {
transition: 0.4s;
    font-weight: bold;
}

div.workflow div.vizcontainer div.logs_container div.logs-body {
width: 300px;
    overflow: auto;
}

div.workflow div.vizcontainer div.logs_container div.logs-footer {
padding: 10px 0;
    text-align: center;
    border-top: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message {
font-size: 13px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 4px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message .log_time {
font-weight: bold;
}

div.workflow div.wf-main-container div.chart-view {
position: relative;
    /*overflow: hidden;*/
}

div.workflow div.wf-main-container div#birds-eye-view {
position: absolute;
    left: 75px;
    bottom: 0;
    z-index: 2;
    /*background: #FFF;*/
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container div#birds-eye-view #birds-eye-canvas {
/*border: 1px solid #CCC;*/
    display: flex;
    flex: 0 0 auto;
}

div.workflow div.wf-main-container div#birds-eye-view canvas {
background: #eaebed;
    /*display: none;*/
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
pointer-events: none !important;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip.in {
display: block;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
display: none;
}

div.workflow div#birds-eye-view .birdseye-box {
position: absolute;
    top: 0;
    left: 50px;
    width: 80px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
    z-index: 2;
}

div.workflow div.wf-main-container #birds-eye-view .minimize:focus {
outline: none !important;
}

div.workflow div.wf-main-container #birds-eye-view .minimize {
position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

div.workflow div.wf-main-container div.chart-view div.wf-canvas-dropzone {
visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

div.workflow .wf-main-container.nav_menu_opened div.wf-canvas-dropzone {
left: 300px !important;
}

div.workflow div.wf-main-container div.chart-view #toggle-workflow-rules {
position: absolute;
    right: 10px;
    top: 2px;
    font-size: 1.4em;
    cursor: pointer;
}

div.workflow div.wf-main-container div#workflow-rules ul {
list-style-type: disc;
    margin-left: 20px;
}

div.workflow div.wf-main-container div#workflow-rules .rules-title {
padding: 10px;
    font-weight: bold;
}

div.workflow div.wf-main-container div#workflow-rules {
position: absolute;
    top: 4px;
    right: 24px;
    pointer-events: none;
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffbe;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    display: none;
    width: 350px;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body {
height: 71px;
    overflow: auto;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p {
margin-bottom: 2px;
    padding-left: 10px;
    letter-spacing: 0.05em;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p .timestamp {
font-weight: bold;
}

div.workflow div.wf-main-container #toggle-workflow-logs {
cursor: pointer !important;
}

div.workflow div.wf-main-container #toggle-workflow-logs:hover {
text-decoration: underline;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list {
width: 100%;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list {
float: left;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list div.edge {
position: relative;
    border-left: 2px solid #ccc;
    left: 50%;
    height: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.executing:before {
content: '';
    position: absolute;
    border: 1px solid red;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item {
/*height: 50px;*/
    /*background: #eee;*/
    /*border-top: 1px solid #ccc;*/
    /*border-bottom: 1px solid #ccc;*/
    font-size: 15px;
    font-weight: 400;
    /*margin-top: 50px;*/
    position: relative;
    width: 100%;
    float: left;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.default {
background: #eee;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row {
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: 'Roboto,"DejaVu Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif';
    width: 100%;
    background-size: 50px 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.bg-primary {
background-color: #428bca;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
margin-top: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
height: 50px;
    background-color: rgba(0, 0, 0, 0.03);
    display: block !important;
    position: relative;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight:before {
content: '';
    position: absolute;
    border: 1px solid #ccc;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item>div.connector {
/*width: 100%!important;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list div.connector {
height: 50px;
    float: left;
    margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list div.connector {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list li.wf-item {
/*border: 1px solid #ccc;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item:first-child {
margin-top: 0;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.label {
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.badge {
background-color: #fff !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-primary span.badge {
color: #428BCA !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-success span.badge {
color: #5CB85C !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.active>div.row {
background: #428bca;
    color: #fff;
}

div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .edit-node,
div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .delete-node {
cursor: pointer;
    padding: 5px;
}

div.workflow div.wf-main-container div.chart-view .canvas-node-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .canvas-node-spinner.steelblue {
color: steelblue;
}

div.workflow div.wf-main-container div.chart-view .iterating-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .dependency-toggle {
position: absolute;
    right: 10px;
    top: 100px;
    z-index: 10;
}

div.workflow div.wf-main-container div.chart-view .wf-pointer-marker {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
}

div.workflow div.wf-main-container div.chart-view .current_execution {
position: absolute;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 4px;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after,
div.workflow div.wf-main-container div.chart-view .current_execution:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    top: 100%;
    position: absolute;
    left: 48%;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after {
border-color: #FFF transparent transparent transparent;
    border-width: 7px 8px 0 8px;
    ;
}

div.workflow div.wf-main-container div.chart-view .current_execution:before {
border-color: #CCC transparent transparent transparent;
    border-width: 8px 8px 0 8px;
}

div.workflow #wf-builder-help-pages {
position: absolute;
    left: 0;
    top: 0;
    overflow: auto;
}

div.workflow #wf-builder-help ul.help-list li:hover {
background: #428BCA;
}

div.workflow #wf-builder-help ul.help-list li:hover a {
color: #FFF;
}

div.workflow div.wf-main-container .predicted_worker_container {
position: absolute;
    display: none;
}

div.workflow div.wf-main-container .predicted_worker_container>label {
top: -20px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button {
width: 50px;
    height: 45px;
    border: 3px dotted #CCC;
    background-color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button.clicked {
background-color: #428BCA;
    color: #FFF;
}

div.workflow div.wf-main-container .predicted_worker_container>button:hover {
background-color: #efefef;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown {
left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0;
    width: 300px;
}

div.workflow div.predicted_workers_dropdown .predicted_workers_dropdown_heading {
background-color: #efefef;
    padding: 5px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a:focus {
outline: none;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a {
text-decoration: none;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.workflow div.predicted_workers_dropdown ul.workers-list {
max-height: 150px;
    overflow: auto;
}

div.workflow div.predicted_workers_dropdown li.list-group-item {
padding: 5px 15px;
    cursor: pointer;
    border: none;
}

div.workflow div.predicted_workers_dropdown li.list-group-item:hover {
background-color: #efefef;
}

div.workflow .workers-select-list>.dropdown-toggle {
/*width: 200px;*/
    /*text-align: left;*/
}

div.workflow .workers-list-dropdown {
/*left: 50%;*/
    /*width: 40vw;*/
    /*transform: translateX(-50%);*/
    margin-top: 12px;
    width: 100%;
}

div.workflow .workers-list-dropdown:before,
div.workflow .workers-list-dropdown:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -10px;
    left: 50%;
}

div.workflow .workers-list-dropdown:before {
border-color: transparent transparent #DDD transparent;
    border-width: 0 13px 13px 13px;
    left: 50%;
    margin-left: -4px;
    top: -13px;
}

div.workflow .workers-list-dropdown:after {
border-color: transparent transparent #FFF transparent;
    border-width: 0 12px 12px 12px;
    margin-left: -3px;
    top: -11px;
}

div.workflow .nav-content-label .plugin-spin {
font-size: 14px;
    color: dimgrey;
    margin-left: 5px;
}

div.workflow input.worker-search,
.wf-workers-container input.worker-search {
background-image: url("/images/searchicon.png");
    background-repeat: no-repeat;
    background-position: left;
    background-position-x: 4px;
    background-size: 15px;
    padding-left: 25px;
    font-size: 2em;
}

div.workflow .worker-panel .drag-handle {
opacity: 0;
    position: absolute;
    right: 10px;
    padding: 5px;
    top: 5px;
}

div.workflow .worker-panel:hover .drag-handle {
opacity: 1 !important;
}

div.workflow div.workers-list.wfModel .worker-panel-options {
display: none;
}

div.workflow div.workers-list.wfModel .worker-panel.ui-selecting,
div.workflow div.workers-list.wfModel .worker-panel.ui-selected,
div.workflow div.workers-list .worker-panel.selected {
background-color: #d3f4ff73;
}

div.workflow div.workers-list.wfModel .worker-panel.ui-selecting .worker-info *,
div.workflow div.workers-list.wfModel .worker-panel.ui-selected .worker-info *,
div.workflow div.workers-list .worker-panel.selected .worker-info * {
/*color: #FFF!important;*/
}

div.workflow .chart-view .worker-label {
display: inline-block;
    position: absolute;
    text-align: center;
    background: rgba(238, 238, 238, 0.8);
    color: #4f5359;
    padding: 1px 10px;
    border-radius: 5px;
    font-size: 1em;
    pointer-events: none;
}

div.workflow .chart-view .worker-label.faded {
opacity: 0.3 !important;
}

div.workflow .chart-view .worker-label:before,
div.workflow .chart-view .worker-label:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    left: 100%;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

div.workflow .chart-view .worker-label:before {
border-color: transparent transparent transparent #EEE;
    border-width: 7px 0 7px 7px;
}

div.workflow .chart-view .worker-label:after {
border-color: transparent transparent transparent #EEE;
    border-width: 8px 0 8px 8px;
}

div.workflow .chart-view .worker-label.left-arrow:before {
border-color: transparent #EEE transparent transparent;
    border-width: 7px 7px 7px 0;
}

div.workflow .chart-view .worker-label.left-arrow:after {
border-color: transparent #EEE transparent transparent;
    border-width: 8px 8px 8px 0;
}

div.workflow .chart-view .run_wf.floating_button {
padding: 0;
}

div.workflow .chart-view .run_wf.floating_button,
div.workflow .chart-view .wf-group-button {
position: absolute;
    z-index: 3;
    /* a touch higher so it clears nodes */
    color: #4f5359;
}

div.workflow .chart-view .wf-group-button {
/* previously commented display:none; – keep visible */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 999px;
    /* pill shape */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    cursor: pointer;
    user-select: none;
}

div.workflow .chart-view .wf-group-button i {
font-size: 12px;
}

div.workflow .chart-view .wf-group-button .wf-label {
font-size: 11px;
}

div.workflow .chart-view .wf-group-button:hover {
transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    background: #f9fafb;
}

div.workflow .chart-view .wf-group-button:active {
transform: translateY(0);
}

div.workflow .chart-view .wf-group-button:focus-visible {
outline: 2px solid #8aa0ff;
    outline-offset: 2px;
}

div.workflow .chart-view .wf-group-button.btn-default {
background: #f4f6f8;
}

div.workflow .chart-view .wf-group-button.btn-outline-on-hover {
border-color: rgba(79, 83, 89, .35);
}

div.workflow .chart-view .wf-group-button.btn-outline-on-hover:hover {
background: #eef2ff;
}

div.workflow .chart-view .run_wf.floating_button:hover {
color: green;
}

div.workflow div.wf-main-container .toggle_logs {
display: none;
}

div.workflow .error-details-container {
height: 100%;
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    z-index: 20;
    width: 320px;
    transition: all linear 300ms;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    background: #FFF;
    border: 1px solid #DDD;
    box-shadow: 7px 0px 15px #444;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div.workflow .error-details-container .error-container-header button {
border: none;
    box-shadow: none;
}

div.workflow .error-details-container .error-container-body {
height: 90%;
}

div.workflow div.wf-main-container.errorContainerOpen div.error-details-container {
transform: translate3d(0, 0, 0);
    visibility: visible;
}

div.workflow .play-controls .additional-workers {
display: block;
    text-align: left;
}

div.workflow .play-controls .additional-workers>a {
cursor: pointer;
}

div.workflow .play-controls .additional-workers>ul {
list-style: disc;
    padding-left: 25px;
    max-height: 200px;
    overflow: auto;
}

div.workflow .play-controls .additional-worker-item {
cursor: pointer;
}

div.workflow .play-controls .additional-worker-item:hover {
color: #428bca;
}

div.workflow div.d3view-filters {
height: auto !important;
}

div.workflow .wf-collection-container .wf-panel {
border-bottom: 1px solid #DDD;
    margin: 0;
    padding: 2px 0px;
    user-select: none;
    position: relative;
    cursor: grab;
}

div.workflow .wf-collection-container .wf-panel:hover {
background: #F5F5F5;
}

div.workflow .wf-collection-container .control-buttons {
opacity: 0;
}

div.workflow .wf-collection-container .wf-panel:hover .control-buttons {
opacity: 1 !important;
}

div.workflow .wf-dropdowns-list li.dropdown {
display: inline-block;
    cursor: pointer;
    padding: 8px 0px;
}

div.workflow .wf-dropdowns li.pin-view-header:hover,
div.workflow .wf-dropdowns li.pin-view-no-data:hover {
background: none !important;
}

div.workflow .wf-dropdowns-list li.dropdown>a {
padding: 8px 10px;
}

div.workflow .wf-dropdowns-list li.dropdown:hover,
div.workflow .wf-dropdowns-list li.dropdown.open {
background: #f1f3f4;
}

div.workflow .wf-dropdowns-list li.dropdown:hover>a,
div.workflow .wf-dropdowns-list li.dropdown.open>a {
/*color: #FFF!important;*/
}

div.workflow div.top-settings-container>div {
/*margin: 0 10px;*/
}

div.workflow .wf-dropdowns-list li.dropdown>a,
div.workflow .wf-nav-menu-groups li.list-group-item>a {
color: black;
    text-decoration: none;
}

div.workflow .wf-nav-menu-groups li[data-id] {
cursor: pointer;
    border-right: none;
    border-left: none;
    background-color: transparent;
    /*padding: 10px 0;*/

    padding: 15px 0;
    border: none;
}

div.workflow .wf-nav-menu .nav-menu-item-label {
display: none !important;
}

div.workflow .wf-nav-menu-groups li[data-id]:first-child {
/*border-top: none;*/
}

div.workflow .wf-nav-menu-groups li[data-id]:hover,
div.workflow .wf-nav-menu-groups li[data-id].open {
background: #f1f3f4 !important;
}

div.workflow .wf-nav-menu-groups li[data-id]:hover>a,
div.workflow .wf-nav-menu-groups li[data-id].open>a {
color: black;
}

div.workflow .wf-execution-status .status {
color: #4f5359;
    margin-right: 5px;
}

div.workflow .wf-execution-status .progress {
margin-bottom: 0;
    display: inline-block;
    width: 225px;
    vertical-align: middle;
    background: #CCC;
}

div.workflow .wf-execution-status .progress-bar-text {
width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 40px;
}

div.workflow .toggle_nav_menu {
cursor: pointer;
}

div.workflow .toggle_nav_menu:hover {
color: #428bca !important;
}

div.workflow .wf-nav-menu-wrapper {
position: absolute;
    left: 75px;
    top: 0;
    height: 100%;
    min-width: 200px;
    width: 400px;
    border: 1px solid #DDD;
    border-left: none;
    background-color: #fff;
    z-index: 2;
    padding-top: 0px;
    display: none;
    /*transition: width 0.3s ease-in;*/
}

div.workflow .wf-nav-menu-wrapper.full-width {
width: calc(100% - 75px) !important;
}

div.workflow .wf-nav-menu-wrapper.full-width .pl-toggle-sidebar {
display: none;
}

div.workflow .wf-main-container.hasFullNavMenu .pl-toggle-sidebar {
display: none;
}

div.workflow .wf-nav-menu-wrapper .pl-toggle-sidebar {
top: 113px;
}

div.workflow .wf-nav-menu-wrapper>.ui-resizable-handle.ui-resizable-e {
width: 24px;
    right: -24px;
    border-left: 2px solid transparent;
    transition: border-left-color 0.15s ease;
    display: block;
    cursor: ew-resize;
}

div.workflow .wf-nav-menu-wrapper>.ui-resizable-handle.ui-resizable-e:hover {
border-color: #66afe9;
}

div.workflow div.workflow-index-container.hasFooter .wf-nav-menu-wrapper {
height: calc(100% - 40px);
}

div.workflow .wf-nav-menu-wrapper.opened {
display: block !important;
    width: 325px;
}

div.workflow .viewers-container ul {
min-height: 30px;
}

div.workflow .viewers-container ul>li {
padding: 10px 0;
}

div.workflow .viewers-container .no-data {
font-size: 0.75em;
    color: dimgrey;
}

div.workflow .viewers-container .disabled {
opacity: 0.5;
    cursor: not-allowed;
}

div.workflow #wf-additional-options li {
padding: 10px 0;
}

div.workflow .wf-execution-status>span {
cursor: pointer;
}

div.workflow .wf-execution-status>span:hover {
color: #428bca;
}

div.workflow .wf-dependency-tooltip {
position: fixed;
    z-index: 20;
    box-shadow: var(--plugin-box-shadow);
    background: #FFFFFF;
    border: 1px solid #DDD;
    padding: 15px;
    max-height: 40vh;
    overflow: auto;
}

div.workflow .wf-dependency-tooltip:before {

}

div.workflow .wf-dependency-tooltip ul {
box-shadow: none;
}

div.workflow .wf-dependency-tooltip li {
/*width: 200px;*/
    word-break: break-all;
}

div.workflow .wf-dependency-tooltip .svg-gutter {
width: 100px;
}

div.workflow .wf-dependency-tooltip .svg-gutter path {
fill: none;
    stroke: steelblue;
}

div.workflow .wf-footer {
position: fixed;
}

div.workflow .wf-footer {
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: #FFF;
    height: 40px;
    border-top: 1px solid #DDD;
}

div.workflow .floating-execution-controls {
position: absolute;
    left: calc(50% - 200px);
    /*transform: translateX(-50%);*/
    top: calc(100vh - 180px);
    width: 400px;
    padding: 10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    border-radius: 8px;
    height: 80px;
    transition: width 0.15s linear, height 0.15s linear, top 0.35s linear, left 0.35s linear,
        opacity 0.15s linear;
}

div.workflow .floating-execution-controls.minimized {
width: 30px;
    height: 30px;
}

div.workflow .wf-main-container:hover .floating-execution-controls,
div.workflow .wf-main-container .floating-execution-controls.hasPopoverOpen {
opacity: 1 !important;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown-menu:before {
border-width: 11px 11px 0 11px;
    border-color: #FFF transparent transparent transparent;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    top: unset;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown-menu:after {
border-width: 11px 11px 0 11px;
    border-color: #FFF transparent transparent transparent;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    top: unset;
}

div.workflow .workflow-index .io-view-container {
display: none;
}

div.workflow div.io-view-container .d3view-wf-header {
height: 50px !important;
}

div.workflow div.io-view-container .plugin-logo-container {
cursor: pointer;
}

div.workflow .workflow-index .basic-view-container {
display: none;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container>.ui-layout-pane {
padding: 0 !important;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container .basic-inputs-view .panel-body.hasInfo .inputs-container {
/*height: calc(100% - 30px);*/
    padding: 0;
}

div.workflow .workflow-index .basic-view-buttons {
position: absolute;
    right: 18px;
    top: 10px;
    z-index: 2;
    display: none;
}

div.workflow .wf-outputs-view.worker-inputs.io-inputs[data-viewtype="grid"]>ul {
display: flex;
    flex-wrap: wrap;
}

div.workflow .wf-outputs-view.worker-inputs.io-inputs[data-viewtype="grid"]>ul>li {
width: 40%;
    /* height: 30%; */
    border: 1px solid #DDD;
    margin: 10px;
    padding: 10px;
    /* overflow: auto; */
}

div.workflow .workflow-index .widgets-view-container {
display: none;
}

div.workflow .workflow-index .widgets-view-container .field-item-body {
/*margin-top: 10px;*/
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .view_worker {
position: absolute;
    right: 5px;
    top: -3px;
    z-index: 2;
    cursor: pointer;
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .view_worker:hover {
color: red;
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .wf-classic-input {
border: 1px solid #DDD;
    padding: 15px;
    /*box-shadow: var(--plugin-box-shadow-lightest);*/
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"] {
display: flex;
    flex-wrap: wrap;
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"]>div {
flex: 1 1 calc(33% - 20px);
    margin: 0 10px;
    height: 100%;
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"] div[data-input] {
height: 100%;
}

div.workflow .workflow-index .keyword-view-container {
display: none;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item,
div.workflow .wf-nav-menu-wrapper div[data-app="Worker-Inputs"] .viz-list-item {
text-align: left;
    flex: 1 1 100%;
    cursor: pointer;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item a,
div.workflow .wf-nav-menu-wrapper div[data-app="Worker-Inputs"] .viz-list-item a {
display: flex;
    align-items: center;
    text-decoration: none;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item [data-inline-doc] {
position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item:hover [data-inline-doc] {
display: block;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item img {

}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item .viz-info,
div.workflow .wf-nav-menu-wrapper div[data-app="Worker-Inputs"] .viz-list-item .viz-info {
display: block !important;
    font-size: 90% !important;
    line-height: 2em;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item .viz-name,
div.workflow .wf-nav-menu-wrapper div[data-app="Worker-Inputs"] .viz-list-item .viz-name {
/*font-size: 16px;*/
    font-weight: bold;
    margin-left: 0 !important;
    margin-bottom: 5px;

    font-size: 2em;
    /*font-variant: small-caps;*/
    line-height: initial;
    /*color: #000;*/
    /*font-weight: bold;*/
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item img {
margin-right: 10px;

    /*height: 40px;*/
    /*width: 40px;*/
}

div.workflow .wf-nav-menu:hover .pl-toggle-sidebar {
opacity: 1;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container .wf-danger {
display: inline-block;
}

div.workflow .workflow-index-container.hasShapesInHeader div.top-settings-container {
height: 120px !important;
}

div.workflow .workflow-index-container.hasShapesInHeader .wf-nav-menu {
top: 120px;
}


div.workflow .wf-exec-message {
transition: opacity 0.3 ease-in;
}

div.workflow .node-quick-buttons {
background: none;
    box-shadow: none;
}

div.workflow[data-in-modal="false"] .wf-canvas-tooltip {
position: absolute;
}

div.workflow .wf-exec-message li[data-id].active {
color: green;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul {
display: flex;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li {
width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
    border: 1px solid #DDD;
    border-radius: 50%;
    position: relative;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:last-child {
margin-right: 0;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):after {
content: ' ';
    width: 0px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    transition: width 0.3s ease-in;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
content: ' ';
    width: 32px;
    background: #DDD;
    height: 5px;
    position: absolute;
    left: 100%;
    border-radius: 2px;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
background: #59e069;
    color: #FFF;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
width: 32px;
    background: #59e069;
}

div.workflow .wf-exec-message[data-viewtype="progressbar"] {
background: none;
    box-shadow: none;
    border: 1px solid #DDD;
    border-radius: 5px;
}

div.workflow .chart-view .wf-worker-label,
div.workflow .chart-view .wf-iterator-canvas-label,
div.workflow .chart-view .wf-decision-ann-label,
div.workflow .chart-view .wf-decision-validation-label {
/*position: fixed;*/
    position: absolute;
    /*font-size: 1.2em;*/
    color: inherit;
    z-index: 2;
    pointer-events: none;
    max-width: 200px;
    word-break: break-word;
    top: 0;
    left: 0;
    text-align: center;
    /*background-color: #FFF;*/
}

div.workflow .chart-view .wf-decision-ann-label {
/*display: none;*/
}

div.workflow .chart-view .wf-iterator-canvas-label {
text-align: left;
    max-width: unset;
    text-transform: capitalize;
    white-space: nowrap;
    display: block;
}

div.workflow .chart-view .wf-worker-label.isDecisionLabel {
font-variant: small-caps;
}

div.workflow[data-in-modal="false"] .wf-decision-validation-label {
position: absolute;
}

div.workflow .chart-view .wf-decision-validation-label {
background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    padding: 4px 8px;
    pointer-events: none;
    text-align: center;
    max-width: unset;
    word-break: break-word;
    min-width: 130px;
}

div.workflow .chart-view .wf-decision-validation-label .wf-decision-validation-content {
text-align: left;
}

div.workflow[data-in-modal="false"] .wf-iterating-input-label {
position: absolute !important;
}

div.workflow .chart-view .wf-iterating-input-label {
/*position: fixed;*/

    position: absolute;

    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    padding: 4px 8px;
    pointer-events: all;
    text-align: center;
    max-width: unset;
    word-break: break-word;
    min-width: 130px;
}

div.workflow .chart-view .wf-iterating-input-label .wf-iterating-input-content {
text-align: left;
}

div.workflow.progress {
cursor: progress !important;
}

div.workflow.progress div.wf-main-container {
pointer-events: none !important;
    opacity: 0.8;
}

div.workflow.workflow,
div.workflow.shown.fullscreen {
position: fixed;
    /*top: -100%;*/
    -webkit-transition: all 1.3s;
    -moz-transition: all 1.3s;
    -ms-transition: all 1.3s;
    -o-transition: all 1.3s;
    transition: all 1.3s;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    z-index: 1050;
}

div.workflow .wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: black;
    opacity: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

div.workflow .wf-main-container .wf-modal-backdrop.enabled {
opacity: 0.3 !important;
    z-index: 5 !important;
}

div.workflow .btn-workflow {
background-color: #4f5359;
    color: #FFF;
    border: 1px solid #4f5359;
    vertical-align: middle;
    position: relative;
}

div.workflow .btn-workflow:focus {
outline: none !important;
}

div.workflow .btn-workflow:hover {
background: #FFF !important;
    color: #4f5359 !important;
}

div.workflow.shown {
min-height: 200px;
    opacity: 0;
}

div.workflow.shown.in {
opacity: 1 !important;
}

div.workflow.shown {
display: block;
}

div.workflow.shown.workflow,
div.workflow.shown.fullscreen {
top: 0;
}

div.workflow.shown.fullscreen {
position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
}

/* Rail-aware takeover (2026-07-11): when the editor takes over the viewport
   (the body.wf-modal-open contract set by ControlsView.toggleFullView), yield
   the d3VIEW pin-left app rail via --d3v-rail-w (style.css; 0 on rail-less
   pages) instead of rendering under its 44px overlay. Keyed on the body class
   -- NOT the bare div.workflow selectors -- because the page-mode editor is
   position:relative, where a nonzero left would double-shift it past the
   body's own rail gutter. */
/* 2026-08-20: gate on the ELEMENT as well as the body. Plugins.Utils.minimizeModal
   blanket-strips 'simlytiks-open modal-open wf-modal-open' when ANY modal is
   minimized, which un-gated this rule and dropped the workflow behind the rail
   until the modal was maximized again. wf-rail-aware is set on div.workflow at
   every site that manages the body class, so the two are equivalent -- the union
   only ADDS clearance where the body class was stripped from under us. */
body.wf-modal-open div.workflow.workflow,
div.workflow.workflow.wf-rail-aware,
body.wf-modal-open div.workflow.shown.fullscreen,
div.workflow.shown.fullscreen.wf-rail-aware {
    left: var(--d3v-rail-w, 0px);
    width: calc(100% - var(--d3v-rail-w, 0px)) !important;
}

div.workflow .wf-mini-container .d3view-mini-workflow-ui {
display: block !important;
    margin-top: 20px;
}

div.workflow .vizcontainer,
div.workflow .wf-main-container,
div.workflow .wf-main-container .chart-view {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*cursor: default;*/
}

div.workflow div.wf-main-container .history {
/*position: absolute;*/
    /*left: 48%;*/
    /*top: 10px;*/
    /*z-index: 2;*/
    margin-right: 10px;
    display: inline-block;
}

div.workflow div.wf-main-container div.center_elements {
/*position: absolute;*/
    /*left: 40%;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}

div.workflow div.wf-main-container .zoom {
position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container .additional_options {
position: absolute;
    bottom: 4px;
    right: 10px;
    z-index: 1;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
    display: flex;
    align-items: center;
}

div.workflow div.workflow-index-container.hasFooter .additional_options {
bottom: 5px;
}

div.workflow div.wf-main-container .zoom button {
display: block;
    width: 100%;
}

div.workflow div.wf_3d {
display: inline-block;
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 300px;*/
    /*z-index: 1;*/
}

div.workflow span.start_animation,
div.workflow span.stop_animation {
position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}

div.workflow span.stop_animation {
left: 150px;
}

div.workflow div.chart-view .experiment-message {
font-size: 14px;
    font-weight: bold;
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #4f5359;
}

div.workflow div.wf-main-container .restructure {
position: absolute;
    top: 30px;
    right: 0;
}

div.workflow button:focus,
div.workflow button:active {
outline: none !important;
}

div.workflow .toggle_logs.btn-workflow:hover {
background: #4f5359 !important;
    color: #FFF !important;
}

div.workflow .toggle_logs {
/*position: absolute;*/
    /*bottom: 0;*/
    /*left: 50%;*/
    /*font-size: 17px;*/
    /*color: steelblue;*/
    cursor: pointer;
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow .canvas_selection.active,
div.workflow .edgeDrawing.active {
background: #428bca;
    color: #FFF;
    text-shadow: none;
}

div.workflow .wf-main-container.hasCanvasSelection .additional_options button:not(.canvas_selection),
div.workflow .wf-main-container.hasCanvasSelection .zoom.btn-group button,
div.workflow .wf-main-container.edgeDrawing .zoom.btn-group button:not(.edgeDrawing) {
pointer-events: none;
    opacity: 0.4;
}

div.workflow .wf-main-container.canvasSelectionStart .additional_options,
div.workflow .wf-main-container.canvasSelectionStart #birds-eye-view {
pointer-events: none !important;
}

div.workflow .toggle_logs.moved {
background: #428BCA;
    color: #FFF;
    text-shadow: none;
}

div.workflow #birds-eye-view.moved {
bottom: 91px !important;
}

div.workflow .zoom.moved {
bottom: 130px !important;
}

div.workflow .additional_options.moved {
bottom: 101px !important;
}

div.workflow #workflow-logs-container {
position: fixed;
    bottom: -100px;
    width: calc(100% - 75px);
    left: 75px;
    opacity: 0;
    padding: 10px 0;
    border-top: 1px solid #EEE;
    background-color: #FFF;
    /*color: #FFF;*/
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

div.workflow #workflow-logs-container.enabled {
bottom: -1px;
    opacity: 1;
}

div.workflow .wf-nav-menu {
/*top: 100px!important;*/
    height: calc(100% - 120px) !important;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups {
height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups>ul {
margin-bottom: 0;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups ul li[data-id].pl-hasValue>a {
color: orange;
}

div.workflow div.top-settings-container {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 7;
    height: 70px;
}

div.workflow #left_toggle {
/*display: flex;*/
    display: inline-block;
    align-items: center;
    width: 300px;
    height: 30px;
    cursor: pointer;
    padding: 4px;
    background-color: #4f5359;
    border-radius: 3px;
    font-size: 12px !important;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    -ms-transition: left 0.5s;
    -o-transition: left 0.5s;
    transition: left 0.5s;
}

div.workflow .settings-left {
position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow .settings-right {
position: absolute;
    right: 15px;
    top: 12px;
}

div.workflow [data-mode="edit"] #left_toggle {
padding: 0 !important;
    background: transparent;
}

div.workflow .auto_save_container {
position: relative;
    top: 5px;
}

div.workflow .auto_save_container .bootstrap-switch {
border-radius: 30px;
}

div.workflow .import_options {
/*display: inline-block;*/
    /*margin-left: 10px;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*left: 150px;*/
    /*z-index: 6;*/
    border: none;
}

div.workflow .shapes_dropdown {

}

div.workflow .shapes_dropdown .dropdown-menu {
background: #4f5359;
    color: #FFF;
    padding: 15px;
    width: 400px;
}

div.workflow .insert_shapes:hover>i {
color: #4f5359 !important;
}

div.workflow li:hover {
/*background: #FFF;*/
    /*color: #4f5359;*/
}

div.workflow .shapes_dropdown .dropdown-menu:before,
div.workflow .shapes_dropdown .dropdown-menu:after {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-color: transparent transparent #4f5359;
}

div.workflow .shapes_dropdown .dropdown-menu:before {
left: 10px;
    top: -8px;
    border-width: 0 8px 8px 8px;
}

div.workflow .import_options .dropdown-menu {
margin-top: 0;
}

div.workflow .import_options:hover .dropdown-menu {
display: block;
}

div.workflow .toggle_nav_menu {
/*padding: 3px 5px!important;*/
    /*cursor: pointer;*/
    /*color: #FFF;*/
    /*font-size: 1.4em;*/
}

div.workflow .toggle_nav_menu.opened {
color: #428bca;
}

div.workflow .nav-menu-header .toggle_nav_menu {
/*position: absolute;*/
    left: 23px;
    top: 18px;
}

div.workflow .toggle_nav_menu:hover {
/*color: #DDD;*/
}

div.workflow .nav-menu-header img {
width: 30px;
    height: 25px;
}

div.workflow .wf-main-container .editable-container {
color: #000;
}

div.workflow .close_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 10px;*/
}

div.workflow .update_workflow {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 80px;*/
}

div.workflow .quick_save_workflow {
/*position: absolute;*/
    /*top: 12px;*/
    /*left: 325px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*height: 30px;*/
    /*padding: 8px;*/
    /*cursor: pointer;*/
}

div.workflow .quick_save_workflow:hover,
div.workflow .quick_save_workflow.hovered {
/*background: #EEE;*/
}

div.workflow .wf_reset {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 290px;*/
}

div.workflow .wf_tour {
/*display: inline-block;*/
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 195px!important;*/
}

div.workflow .wf_keyboard_shortcuts {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*z-index: 1;*/
    /*right: 158px;*/
}

div.workflow .switch_workflows_list {
position: absolute;
    top: 12px;
    z-index: 1;
    right: 400px;
}

div.workflow div.switch_workflows_list .btn-workflow,
div.workflow div.switch_workflows_list .btn-workflow:focus,
div.workflow div.switch_workflows_list .btn-workflow:active {
color: #FFF;
}

div.workflow .wf_tour[data-mode="edit"] {
/*right: 360px!important;*/
}

div.workflow .wf_switch_mode {
/*position: absolute;*/
    /*bottom: 12px;*/
    /*z-index: 1;*/
    /*right: 50px;*/
}

div.workflow .wf-main-container .workers-addition {
display: inline-block;
}

div.workflow .wf-main-container .execution-controls {
display: inline-block;
    /*position: absolute;*/
    /*top: 12px;*/
    /*right: 80px;*/
    /*z-index: 1;*/
}

div.workflow .wf-main-container .workers-addition.update_shown {
right: 160px;
}

div.workflow .wf-main-container .execution-controls {
/*right: 400px!important;*/
}

div.workflow .wf-main-container .workers-addition .workers-select-list {
display: inline-block;
}

div.workflow .wf-main-container .workers-select-list .advanced_worker_addition {
margin-left: 10px;
    position: absolute;
    top: 4px;
    z-index: 3;
    background-color: #FFF;
    border: 1px solid #DDD;
    right: 10px;
}

div.workflow .wf-main-container .canvas_worker_selection {
display: inline-block;
    /*margin-left: 20px;*/
}

div.workflow .wf-main-container .additional_options button:focus {
outline: none !important;
}

div.workflow .wf-main-container .additional_options button:hover {
color: inherit;
    background-color: #eee;
}

div.workflow .wf-main-container .additional_options button.active {
color: #FFF;
    border-color: #428bca;
    background-color: #428bca;
    outline: none !important;
    text-shadow: none;
}

div.workflow .wf-main-container .workers-addition .btn-workflow {
color: #FFF;
}

div.workflow .wf-nav-menu {
position: fixed;
    left: 0;
    width: 75px;
    top: 80px;
    margin-top: -1px;
    /*width: 300px;*/
    height: 100%;
    z-index: 6;
    background: #fff;
    border-right: 1px solid #DDD;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -ms-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s;
}

div.workflow[data-in-modal="false"] .wf-nav-menu {
position: absolute;
top: 0px;
}

div.workflow .wf-nav-menu .nav-menu-header {
margin-left: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
    display: flex;
    align-items: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li {
text-align: center;
}

div.workflow .wf-nav-menu .wf-nav-menu-groups li span.nav-menu-item-label {
display: block;
}

div.workflow .wf-main-container.nav_menu_opened .nav-menu-header {
opacity: 1;
}

div.workflow .wf-main-container.nav_menu_opened .wf-nav-menu {
left: 0;
    overflow: auto;
}

div.workflow .wf-nav-menu .nav-submenu {
background: #4f5359;
    width: 65%;
}

div.workflow .wf-nav-menu .nav-menu-header h3 {
vertical-align: middle;
    color: #FFF;
    margin-bottom: 0;
    font-size: 2em;
}

div.workflow #wf-structure {
display: none;
}

div.workflow .wf-nav-menu #wf-additional-options li:not(.list-header) {
margin: 10px 0;
    padding: 0 15px;
    font-size: 1em;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.03em;
}

div.workflow .wf-nav-menu #wf-sample-visualizations li:not(.list-header) img {
height: 29px;
}

div.workflow .wf-nav-menu li:not(.list-header):hover {
color: #428BCA;
}

div.workflow .wf-nav-menu li:not(.list-header):hover .nav-submenu {
display: block !important;
    position: absolute;
    left: 100%;
    top: -10px;
}

div.workflow .wf-nav-menu #wf-structure li:not(.list-header) .nav-submenu>li.active:after {
content: '\f00c';
    font-family: FontAwesome;
}

div.workflow div.wf-main-container div.execution_params .status {
font-size: 14px;
    color: #4f5359;
    margin-right: 5px;
}

div.workflow div.wf-main-container div.execution_params .progress {
margin-bottom: 0;
    display: inline-block;
    width: 225px;
    vertical-align: middle;
}

div.workflow div.wf-main-container div.execution-controls .execution_stats {
margin-top: 5px;
    border: 1px solid #DDD;
    box-shadow: -1px 4px 9px -8px #444;
    border-radius: 5px;
    vertical-align: middle;
    /*font-size: 13px;*/
    padding: 10px;
    width: 300px;
    background: rgba(247, 247, 247, 1);
    /*position: absolute;*/
}

div.workflow div.wf-main-container div.execution-controls .exec_stats {
cursor: pointer;
}

div.workflow div.wf-main-container div.execution_stats>button {
width: 100%;
    letter-spacing: 0.1em;
    text-align: left;
    cursor: default;
}

div.workflow .wf-main-container div.execution_stats .stats_info {
max-width: 250px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    max-height: 100px;
    overflow: auto;
    /*overflow: hidden;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
}

div.workflow div.wf-main-container .play-controls {
display: inline-block;
    /*position: absolute;*/
    /*right: 80px;*/
    /*top: 12px;*/
    /*z-index: 2;*/
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .wf_restart {

}

div.workflow div.wf-main-container .plugin-header-right .play-controls .hasError>i {
color: red;
}

div.workflow div.wf-main-container .plugin-header-right .play-controls .noError>i {
color: green;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):beforew,
div.workflow div.wf-main-container .play-controls .dropdown-menu:not(.no-arrow):afterw {
content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    right: 10px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:before {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent rgba(0, 0, 0, 0.15) transparent;
    top: -12px;
}

div.workflow div.wf-main-container .play-controls .dropdown-menu:after {
border-width: 0 11px 11px 11px;
    border-color: transparent transparent #FFF transparent;
    top: -11px;
}

div.workflow div.wf-main-container .execution_options div.bootstrap-select {
width: 150px;
}

div.workflow div.wf-notifications .dropdown-menu {
background-color: #4f5359;
    color: #FFF;
}

div.workflow.workflow {
padding-left: 0 !important;
}

div.workflow canvas.main_canvas {
position: absolute;
    left: 0;
    top: 0;
    /* background-image: radial-gradient(white, #eaebed, #DDD); */
    background-color: rgb(255, 255, 255);
    /*background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 82%, rgba(213,213,213,1) 100%, rgba(208,208,208,1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d0d0d0",GradientType=1);*/
}

div.workflow div.chart-view div.canvas-backdrop {
position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

div.workflow .disabled * {
pointer-events: none !important;
    color: inherit !important;
}

div.workflow div.canvas-comment-box {
position: absolute;
    padding-bottom: 10px;
    padding-top: 10px;
    /*width: 100%;*/
}

div.workflow div.canvas-node-options {
position: absolute;
    /*background: #FFF;*/
    /*font-size: 11px;*/
    /*border: 1px solid #ddd;*/
    /*-webkit-border-radius: 5px;*/
    /*-moz-border-radius: 5px;*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);*/
    min-width: 100px;
}

div.workflow div.canvas-comment-box textarea {
width: 150px;
    height: 80px;
}

div.workflow div.canvas-node-info {
position: absolute;
    background: #FFF;
    font-size: 11px;
    border: 1px solid #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    width: 300px;
    max-height: 300px;
    overflow: auto;
    z-index: 2;
}

div.workflow .canvas-node-status-box {
position: absolute;
    opacity: 0.4;
    pointer-events: none;
    border-radius: 4px;
}

div.workflow .canvas-node-status-box .box-rect {
transition: width 0.3s ease-in;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu {
max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}

div.workflow div.workers-select-list div.bootstrap-select div.dropdown-menu button#add_workers {
margin-top: 5px;
    margin-right: 5px;
    float: right;
}

div.workflow div.workers-select-list .worker-position>ul.dropdown-menu>li:hover>ul.dropdown-menu {
display: block;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu {
position: relative;
}

div.workflow div.workers-select-list .worker-position .dropdown-submenu>.dropdown-menu {
top: 0;
    left: 100%;
    margin-top: -6px;
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active {
/*background-image: linear-gradient(to bottom,#08c,#0077b3);*/
    /*color: #fff;*/
}

div.workflow div.workers-select-list .worker-position .dropdown-menu li a.active:after {
content: "\f00C";
    right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    top: 6px;
}

div.workflow div.workers-select-list div.bootstrap-select>div.dropdown-menu>ul.dropdown-menu.shadow {
opacity: 0.3;
    pointer-events: none;
}

div.workflow div.workers-select-list .wf-actionsbox>.btn-group.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.workers-select-list .bs-searchbox.shadow {
pointer-events: none;
    opacity: 0.3;
}

div.workflow div.flow-container div.wf-header .wf-managers div.popover {
width: 160px !important;
    font-weight: bold;
    z-index: 1054;
}

div.workflow div.flow-container div.wf-header .navigation-tabs li a {
padding: 6px 15px;
}

div.workflow div.flow-container div.wf-header .wf-managers .badge {
color: #337ab7;
    padding: 2px 4px;
}

div.workflow #sidebar-toggle {
position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    background: rgba(43, 48, 54, 0.95);
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -ms-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}

div.workflow #sidebar-toggle.toggled {
right: 350px;
}

div.workflow .badge.badge-info {
background-color: #5bc0de;
}

div.workflow .badge.badge-success {
background-color: #5cb85c;
}

div.workflow div.canvas-controls {
position: absolute;
    top: 0;
    right: 3px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header {
padding: 15px;
    border-bottom: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-header h4 {
transition: 0.4s;
    font-weight: bold;
}

div.workflow div.vizcontainer div.logs_container div.logs-body {
width: 300px;
    overflow: auto;
}

div.workflow div.vizcontainer div.logs_container div.logs-footer {
padding: 10px 0;
    text-align: center;
    border-top: 1px solid #ccc;
    width: 300px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message {
font-size: 13px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 4px;
}

div.workflow div.vizcontainer div.logs_container div.logs-body p.log_message .log_time {
font-weight: bold;
}

div.workflow div.wf-main-container div.chart-view {
position: relative;
    /*overflow: hidden;*/
}

div.workflow div.wf-main-container .wf-top-alert .close-alert {
right: 60px;
    position: absolute;
}

div.workflow div.wf-main-container div.chart-view.commentBoxDragging,
div.workflow div.wf-main-container div.chart-view.commentBoxResizing {
pointer-events: none;
}

div.workflow div.wf-main-container div#birds-eye-view {
position: absolute;
    left: 75px;
    bottom: 0;
    z-index: 2;
    /*background: #FFF;*/
    -webkit-transition: bottom 0.5s;
    -moz-transition: bottom 0.5s;
    -ms-transition: bottom 0.5s;
    -o-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

div.workflow div.wf-main-container div#birds-eye-view #birds-eye-canvas {
/*border: 1px solid #CCC;*/
    display: flex;
    flex: 0 0 auto;
}

div.workflow div.wf-main-container div#birds-eye-view canvas {
background: #eaebed;
    /*display: none;*/
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
pointer-events: none !important;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip.in {
display: block;
}

div.workflow div.wf-main-container div#birds-eye-view div.tooltip {
display: none;
}

div.workflow div#birds-eye-view .birdseye-box {
position: absolute;
    top: 0;
    left: 50px;
    width: 80px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
    z-index: 2;
}

div.workflow div.wf-main-container #birds-eye-view .minimize:focus {
outline: none !important;
}

div.workflow div.wf-main-container #birds-eye-view .minimize {
position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

div.workflow div.wf-main-container div.chart-view div.wf-canvas-dropzone {
visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

div.workflow .wf-main-container.nav_menu_opened div.wf-canvas-dropzone {
left: 300px !important;
}

div.workflow div.wf-main-container div.chart-view #toggle-workflow-rules {
position: absolute;
    right: 10px;
    top: 2px;
    font-size: 1.4em;
    cursor: pointer;
}

div.workflow div.wf-main-container div#workflow-rules ul {
list-style-type: disc;
    margin-left: 20px;
}

div.workflow div.wf-main-container div#workflow-rules .rules-title {
padding: 10px;
    font-weight: bold;
}

div.workflow div.wf-main-container div#workflow-rules {
position: absolute;
    top: 4px;
    right: 24px;
    pointer-events: none;
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #ffffbe;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    display: none;
    width: 350px;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body {
height: 71px;
    overflow: auto;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p {
margin-bottom: 2px;
    padding-left: 10px;
    letter-spacing: 0.05em;
}

div.workflow div.wf-main-container #workflow-logs-container .logs-body p .timestamp {
font-weight: bold;
}

div.workflow div.wf-main-container #toggle-workflow-logs {
cursor: pointer !important;
}

div.workflow div.wf-main-container #toggle-workflow-logs:hover {
text-decoration: underline;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list {
width: 100%;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list {
float: left;
}

div.workflow div.wf-main-container div.flow-container ul.workers_list div.edge {
position: relative;
    border-left: 2px solid #ccc;
    left: 50%;
    height: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.executing:before {
content: '';
    position: absolute;
    border: 1px solid red;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item {
/*height: 50px;*/
    /*background: #eee;*/
    /*border-top: 1px solid #ccc;*/
    /*border-bottom: 1px solid #ccc;*/
    font-size: 15px;
    font-weight: 400;
    /*margin-top: 50px;*/
    position: relative;
    width: 100%;
    float: left;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.default {
background: #eee;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row {
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: 'Roboto,"DejaVu Sans Condensed","Helvetica Neue",Helvetica,Arial,sans-serif';
    width: 100%;
    background-size: 50px 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item>div.row.bg-primary {
background-color: #428bca;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
margin-top: 50px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight {
height: 50px;
    background-color: rgba(0, 0, 0, 0.03);
    display: block !important;
    position: relative;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.list-group-item-highlight:before {
content: '';
    position: absolute;
    border: 1px solid #ccc;
    height: 50px;
    width: 0;
    top: -51px;
    left: 50%;
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item>div.connector {
/*width: 100%!important;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list div.connector {
height: 50px;
    float: left;
    margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list div.connector {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list {
margin: 0 10px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li ul.workers_list li.wf-item {
/*border: 1px solid #ccc;*/
}

div.workflow div.wf-main-container div.flow-container div.list-view>ul.workers_list>li.wf-item:first-child {
margin-top: 0;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.label {
-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list span.badge {
background-color: #fff !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-primary span.badge {
color: #428BCA !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list .label-success span.badge {
color: #5CB85C !important;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item.active>div.row {
background: #428bca;
    color: #fff;
}

div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .edit-node,
div.workflow div.wf-main-container div.list-view ul.workers_list li.wf-item .delete-node {
cursor: pointer;
    padding: 5px;
}

div.workflow div.wf-main-container div.chart-view .canvas-node-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .iterating-spinner {
position: absolute;
    pointer-events: none !important;
    color: #4f5359;
    animation-duration: 2s;
}

div.workflow div.wf-main-container div.chart-view .current_execution {
position: absolute;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 4px;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after,
div.workflow div.wf-main-container div.chart-view .current_execution:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    top: 100%;
    position: absolute;
    left: 48%;
}

div.workflow div.wf-main-container div.chart-view .current_execution:after {
border-color: #FFF transparent transparent transparent;
    border-width: 7px 8px 0 8px;
    ;
}

div.workflow div.wf-main-container div.chart-view .current_execution:before {
border-color: #CCC transparent transparent transparent;
    border-width: 8px 8px 0 8px;
}

div.workflow #wf-builder-help-pages {
position: absolute;
    left: 0;
    top: 0;
    overflow: auto;
}

div.workflow #wf-builder-help ul.help-list li:hover {
background: #428BCA;
}

div.workflow #wf-builder-help ul.help-list li:hover a {
color: #FFF;
}

div.workflow div.wf-main-container .predicted_worker_container {
position: absolute;
    display: none;
}

div.workflow div.wf-main-container .predicted_worker_container>label {
top: -20px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    text-overflow: ellipsis;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button {
width: 50px;
    height: 45px;
    border: 3px dotted #CCC;
    background-color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_worker_button.clicked {
background-color: #428BCA;
    color: #FFF;
}

div.workflow div.wf-main-container .predicted_worker_container>button:hover {
background-color: #efefef;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown {
left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0;
    width: 300px;
}

div.workflow div.predicted_workers_dropdown .predicted_workers_dropdown_heading {
background-color: #efefef;
    padding: 5px;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a:focus {
outline: none;
}

div.workflow div.wf-main-container .predicted_worker_container .predicted_workers_dropdown li a {
text-decoration: none;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.workflow div.predicted_workers_dropdown ul.workers-list {
max-height: 150px;
    overflow: auto;
}

div.workflow div.predicted_workers_dropdown li.list-group-item {
padding: 5px 15px;
    cursor: pointer;
    border: none;
}

div.workflow div.predicted_workers_dropdown li.list-group-item:hover {
background-color: #efefef;
}

div.workflow .workers-select-list>.dropdown-toggle {
/*width: 200px;*/
    /*text-align: left;*/
}

div.workflow .workers-list-dropdown {
/*left: 50%;*/
    /*width: 40vw;*/
    /*transform: translateX(-50%);*/
    margin-top: 12px;
    width: 100%;
}

div.workflow .workers-list-dropdown:before,
div.workflow .workers-list-dropdown:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -10px;
    left: 50%;
}

div.workflow .workers-list-dropdown:before {
border-color: transparent transparent #DDD transparent;
    border-width: 0 13px 13px 13px;
    left: 50%;
    margin-left: -4px;
    top: -13px;
}

div.workflow .workers-list-dropdown:after {
border-color: transparent transparent #FFF transparent;
    border-width: 0 12px 12px 12px;
    margin-left: -3px;
    top: -11px;
}

div.workflow .nav-content-label .plugin-spin {
font-size: 14px;
    color: dimgrey;
    margin-left: 5px;
}

div.workflow input.worker-search {
background-image: url("/images/searchicon.png");
    background-repeat: no-repeat;
    background-position: left;
    background-position-x: 4px;
    background-size: 15px;
    padding-left: 25px;
    font-size: 2em;
}

div.workflow .worker-panel:hover .drag-handle {
opacity: 1 !important;
}

div.workflow div.workers-list.wfModel .worker-panel-options {
display: none;
}

div.workflow div.workers-list.wfModel .worker-panel.ui-selecting .worker-info *,
div.workflow div.workers-list.wfModel .worker-panel.ui-selected .worker-info *,
div.workflow div.workers-list .worker-panel.selected .worker-info * {
/*color: #FFF!important;*/
}

div.workflow .chart-view .worker-label {
display: inline-block;
    position: absolute;
    text-align: center;
    background: rgba(238, 238, 238, 0.8);
    color: #4f5359;
    padding: 1px 10px;
    border-radius: 5px;
    font-size: 1em;
    pointer-events: none;
}

div.workflow .chart-view .worker-label.faded {
opacity: 0.3 !important;
}

div.workflow .chart-view .worker-label:before,
div.workflow .chart-view .worker-label:after {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    left: 100%;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

div.workflow .chart-view .worker-label:before {
border-color: transparent transparent transparent #EEE;
    border-width: 7px 0 7px 7px;
}

div.workflow .chart-view .worker-label:after {
border-color: transparent transparent transparent #EEE;
    border-width: 8px 0 8px 8px;
}

div.workflow .chart-view .worker-label.left-arrow:before {
border-color: transparent #EEE transparent transparent;
    border-width: 7px 7px 7px 0;
}

div.workflow .chart-view .worker-label.left-arrow:after {
border-color: transparent #EEE transparent transparent;
    border-width: 8px 8px 8px 0;
}

div.workflow .chart-view .run_wf.floating_button {
padding: 0;
}

div.workflow .chart-view .run_wf.floating_button,
div.workflow .chart-view .wf-group-button {
position: absolute;
    z-index: 2;
    color: #4f5359;
}

div.workflow .chart-view .wf-group-button {
/*display: none;*/
}

div.workflow .chart-view .run_wf.floating_button:hover {
color: green;
}

div.workflow div.wf-main-container .toggle_logs {
display: none;
}

div.workflow .error-details-container {
height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    width: 320px;
    transition: all linear 300ms;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    background: #FFF;
    border: 1px solid #DDD;
    box-shadow: 7px 0px 15px #444;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

div.workflow .error-details-container .error-container-header button {
border: none;
    box-shadow: none;
}

div.workflow .error-details-container .error-container-body {
height: 90%;
}

div.workflow div.wf-main-container.errorContainerOpen div.error-details-container {
transform: translate3d(0, 0, 0);
    visibility: visible;
}

div.workflow .play-controls .additional-workers {
display: block;
    text-align: left;
}

div.workflow .play-controls .additional-workers>a {
cursor: pointer;
}

div.workflow .play-controls .additional-workers>ul {
list-style: disc;
    padding-left: 25px;
    max-height: 200px;
    overflow: auto;
}

div.workflow .play-controls .additional-worker-item {
cursor: pointer;
}

div.workflow .play-controls .additional-worker-item:hover {
color: #428bca;
}

div.workflow div.d3view-filters {
height: auto !important;
}

div.workflow .wf-collection-container .wf-panel {
border-bottom: 1px solid #DDD;
    margin: 0;
    padding: 2px 0px;
    user-select: none;
    position: relative;
    cursor: grab;
}

div.workflow .wf-collection-container .wf-panel:hover {
background: #F5F5F5;
}

div.workflow .wf-collection-container .control-buttons {
opacity: 0;
}

div.workflow .wf-collection-container .wf-panel:hover .control-buttons {
opacity: 1 !important;
}

div.workflow .wf-dropdowns-list li.dropdown {
display: inline-block;
    cursor: pointer;
    padding: 8px 0px;
}

div.workflow .wf-dropdowns li.pin-view-header:hover,
div.workflow .wf-dropdowns li.pin-view-no-data:hover {
background: none !important;
}

div.workflow .wf-dropdowns-list li.dropdown>a {
padding: 8px 10px;
}

div.workflow .wf-dropdowns-list li.dropdown:hover,
div.workflow .wf-dropdowns-list li.dropdown.open {
background: #f1f3f4;
}

div.workflow .wf-dropdowns-list li.dropdown:hover>a,
div.workflow .wf-dropdowns-list li.dropdown.open>a {
/*color: #FFF!important;*/
}

div.workflow div.top-settings-container>div {
/*margin: 0 10px;*/
}

div.workflow .wf-dropdowns-list li.dropdown>a,
div.workflow .wf-nav-menu-groups li.list-group-item>a {
color: black;
    text-decoration: none;
}

div.workflow .wf-nav-menu-groups li[data-id] {
cursor: pointer;
    border-right: none;
    border-left: none;
    background-color: transparent;
    padding: 10px 0;
    border: none;
}

div.workflow .wf-nav-menu-groups li[data-id]:first-child {
/*border-top: none;*/
}

div.workflow .wf-nav-menu-groups li[data-id]:hover,
div.workflow .wf-nav-menu-groups li[data-id].open {
background: #f1f3f4 !important;
}

div.workflow .wf-nav-menu-groups li[data-id]:hover>a,
div.workflow .wf-nav-menu-groups li[data-id].open>a {
color: black;
}

div.workflow .wf-execution-status .status {
color: #4f5359;
    margin-right: 5px;
}

div.workflow .wf-execution-status .progress {
margin-bottom: 0;
    display: inline-block;
    width: 225px;
    vertical-align: middle;
    background: #CCC;
}

div.workflow .wf-execution-status .progress-bar-text {
width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 40px;
}

div.workflow .toggle_nav_menu {
cursor: pointer;
}

div.workflow .toggle_nav_menu:hover {
color: #428bca !important;
}

div.workflow .wf-nav-menu-wrapper {
position: absolute;
    left: 75px;
    top: 0;
    height: 100%;
    min-width: 200px;
    width: auto;
    border: 1px solid #DDD;
    border-left: none;
    background-color: #fff;
    z-index: 6;
    padding-top: 0px;
    display: none;
    /*transition: width 0.3s ease-in;*/
}

div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app] {
width: 400px;
    padding: 5px 15px;
    background: #FFF;
}
div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Settings"] {
    width: 800px;
}
div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="AI Models"] {
width: 800px;
}

div.workflow[data-in-modal="false"] {
    container-type: inline-size;
}
div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app].full-width {
    width: calc(100cqw - 80px) !important;
}

div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app]:not(.full-width) .d3view-inputsBuilder li.field-item {
flex: 0 0 100% !important;
}

div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app]:not(.full-width) .wf-nav-tab-header .btn span,
div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app]:not(.full-width) .wf-nav-tab-header .pl-search {
display: none;
}

div.workflow .wf-nav-menu-wrapper.full-width .pl-toggle-sidebar {
display: none;
}

div.workflow .wf-main-container.hasFullNavMenu .pl-toggle-sidebar {
display: none;
}

div.workflow .wf-nav-menu-wrapper .pl-toggle-sidebar {
top: 113px;
}

div.workflow .wf-nav-menu-wrapper>.ui-resizable-handle.ui-resizable-e {
width: 24px;
    right: -24px;
    border-left: 2px solid transparent;
    transition: border-left-color 0.15s ease;
    display: block;
    cursor: ew-resize;
}

div.workflow .wf-nav-menu-wrapper>.ui-resizable-handle.ui-resizable-e:hover {
border-color: #66afe9;
}

div.workflow div.workflow-index-container.hasFooter .wf-nav-menu-wrapper {
height: 100% !important;
}

div.workflow .wf-nav-menu-wrapper.opened {
display: block !important;
    width: 325px;
}

div.workflow .viewers-container ul {
min-height: 30px;
}

div.workflow .viewers-container ul>li {
padding: 10px 0;
}

div.workflow .viewers-container .no-data {
font-size: 0.75em;
    color: dimgrey;
}

div.workflow .viewers-container .disabled {
opacity: 0.5;
    cursor: not-allowed;
}

div.workflow #wf-additional-options li {
padding: 10px 0;
}

div.workflow .wf-execution-status>span {
cursor: pointer;
}

div.workflow .wf-execution-status>span:hover {
color: #428bca;
}

div.workflow .wf-dependency-tooltip {
/*position: fixed;*/
    position: absolute;
    z-index: 20;
    box-shadow: var(--plugin-box-shadow);
    background: #FFFFFF;
    border: 1px solid #DDD;
    padding: 15px;
    max-height: 40vh;
    overflow: auto;
}

div.workflow .wf-dependency-tooltip:before {

}

div.workflow .wf-dependency-tooltip ul {
box-shadow: none;
}

div.workflow .wf-dependency-tooltip li {
/*width: 200px;*/
    word-break: break-all;
}

div.workflow .wf-dependency-tooltip .svg-gutter {
width: 100px;
}

div.workflow .wf-dependency-tooltip .svg-gutter path {
fill: none;
    stroke: steelblue;
}

div.workflow .wf-footer {
position: fixed;
}

div.workflow .wf-footer {
position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background: #FFF;
    height: 40px;
    border-top: 1px solid #DDD;
}

div.workflow .floating-execution-controls {
position: absolute;
    left: calc(50% - 200px);
    /*transform: translateX(-50%);*/
    top: calc(100vh - 180px);
    width: 400px;
    padding: 10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    border-radius: 8px;
    height: 80px;
    transition: width 0.15s linear, height 0.15s linear, top 0.35s linear, left 0.35s linear,
        opacity 0.15s linear;
}

div.workflow .floating-execution-controls.minimized {
width: 30px;
    height: 30px;
    overflow: hidden;
}

div.workflow .wf-main-container:hover .floating-execution-controls,
div.workflow .wf-main-container .floating-execution-controls.hasPopoverOpen {
opacity: 1 !important;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown-menu:before {
border-width: 11px 11px 0 11px;
    border-color: #FFF transparent transparent transparent;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    top: unset;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown-menu:after {
border-width: 11px 11px 0 11px;
    border-color: #FFF transparent transparent transparent;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    top: unset;
}

div.workflow .workflow-index .io-view-container {
display: none;
}

div.workflow div.io-view-container .plugin-logo-container {
cursor: pointer;
}

div.workflow .workflow-index .basic-view-container {
display: none;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container>.ui-layout-pane {
padding: 0 !important;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container .basic-inputs-view .panel-body.hasInfo .inputs-container {
/*height: calc(100% - 30px);*/
    padding: 0;
}

div.workflow .workflow-index .basic-view-buttons {
position: absolute;
    right: 18px;
    top: 10px;
    z-index: 2;
    display: none;
}

div.workflow .wf-outputs-view.worker-inputs.io-inputs[data-viewtype="grid"]>ul {
display: flex;
    flex-wrap: wrap;
}

div.workflow .wf-outputs-view.worker-inputs.io-inputs[data-viewtype="grid"]>ul>li {
width: 40%;
    /* height: 30%; */
    border: 1px solid #DDD;
    margin: 10px;
    padding: 10px;
    /* overflow: auto; */
}

div.workflow .workflow-index .widgets-view-container {
display: none;
}

div.workflow .workflow-index .widgets-view-container .field-item-body {
/*margin-top: 10px;*/
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .view_worker {
position: absolute;
    right: 5px;
    top: -3px;
    z-index: 2;
    cursor: pointer;
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .view_worker:hover {
color: red;
}

div.workflow .workflow-index .widgets-view-container div[data-type="worker_io"] .wf-classic-input {
border: 1px solid #DDD;
    padding: 15px;
    /*box-shadow: var(--plugin-box-shadow-lightest);*/
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"] {
display: flex;
    flex-wrap: wrap;
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"]>div {
flex: 1 1 calc(33% - 20px);
    margin: 0 10px;
    height: 100%;
}

div.workflow .widgets-view-container div[data-type="worker_io"] .inputs-fb[data-orientation="horizontal"] div[data-input] {
height: 100%;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item {
text-align: left;
    flex: 1 1 100%;
    cursor: pointer;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item a {
display: flex;
    align-items: center;
    text-decoration: none;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item [data-inline-doc] {
position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item:hover [data-inline-doc] {
display: block;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item img {

}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item .viz-info {
display: block !important;
    font-size: 90% !important;
    line-height: 2em;
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item .viz-name {
/*font-size: 16px;*/
    font-weight: bold;
    margin-left: 0 !important;
    margin-bottom: 5px;

    font-size: 2em;
    /*font-variant: small-caps;*/
    line-height: initial;
    /*color: #000;*/
    /*font-weight: bold;*/
}

div.workflow .wf-nav-menu-wrapper div[data-app="Utilities/Shapes"] .viz-list-item img {
margin-right: 10px;

    /*height: 40px;*/
    /*width: 40px;*/
}

div.workflow .wf-nav-menu:hover .pl-toggle-sidebar {
opacity: 1;
}

div.workflow .workflow-index .basic-view-container .wf-basic-container .wf-danger {
display: inline-block;
}

div.workflow .workflow-index-container.hasShapesInHeader div.top-settings-container {
height: 120px !important;
}

div.workflow .workflow-index-container.hasShapesInHeader .wf-nav-menu {
top: 120px;
}


.workflow .fora-search-dd .worker-view {
padding: 10px;
    border: 1px solid #DDD;
    cursor: move;
}

.workflow .fora-search-dd .worker-view .wf-worker-type {
font-size: 1.3em;
}

div.workflow div.workflow-index-container .wf-nav-menu-wrapper .wf-logs:empty:after {
content: 'No logs available.';
    padding: 15px;
    font-size: 1.2em;
}

div.workflow .enableFMView .fm-view {
position: absolute;
    left: 75px;
    top: 0;
    width: calc(100% - 75px);
    height: 100%;
    /*z-index: 10;*/
    display: block !important;
    padding: 0;
    z-index: 20;
}
div.workflow .enableFMView .fm-view .wf-flow-modal-top {
    background: #FFF;
}


div.workflow .enableFMView .chart-view,
div.workflow .enableFMView .zoom.btn-group,
div.workflow .enableFMView #birds-eye-view,
div.workflow .enableFMView .floating-execution-controls {
display: none;
}

div.workflow .docked-start {
position: fixed;
    /* padding: 15px; */
    color: inherit;
    z-index: 2;
    top: calc(50% - 30px);
    left: calc(var(--wf-rail-w, var(--wf-sidebar-w, 78px)) + 12px);
    font-size: 1.3em;
}

div.workflow[data-in-modal="false"] .docked-start {
position: absolute;
}

div.workflow .plugin-header-right.disable-name {
display: flex;
    align-items: center;
}

div.workflow .plugin-header-right.disable-name .plugin-header-level-2 {
flex: 1 1 auto;
}

div.workflow button.guide_me {
top: 0px;
    z-index: 6;
}

div.workflow .chart-view .wf-guide-div {
position: absolute;
    /*top: 80px;*/
    /*height: calc(100% - 120px);*/
    top: 0;
    height: 100%;
    width: 100%;
    background: #FFF;
    z-index: 20;
}

div.workflow .wf-guide-div .tour-input.animated.fadeOutUp {
animation-duration: 0.5s;
}

div.workflow .guide-step .ip-val-icon,
div.workflow .guide-step .btn-txt {
display: inline-block !important;
}

div.workflow .wf-nav-menu-groups[data-show-labels="true"] .nav-menu-item-label {
display: block !important;
}

div.workflow .new-wf-container .new-wf-btn-group {
display: flex;
    flex-wrap: wrap;
}

div.workflow .new-wf-container .new-wf-btn-group button {
flex: 0 0 calc(33% - 20px);
    margin: 10px;
    border-radius: 18px;
}

div.workflow .new-wf-container .new-wf-btn-group button:hover {
border-radius: 18px !important;
}

div.workflow div.wf-main-container div.chart-view .new-wf-container {
transition: background-color 0.3s ease-in;
}

div.workflow div.wf-main-container div.chart-view.dz-drag-hover .new-wf-container {
background-color: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

div.workflow div.wf-main-container div.chart-view.dz-drag-hover .new-wf-container>div {
opacity: 0;
}

div.workflow div.wf-main-container div.chart-view.dz-drag-hover .new-wf-container:after {
content: 'Drop file here';
    font-size: 2em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.workflow .wf-guide-div li.field-item .field-name {
font-size: 1.3em !important;
}

div.workflow .wf-guide-div li.field-item .input-desc-outer {
margin-top: 20px;
    font-size: 1.2em;
}

div.workflow .wf-guide-div li.field-item .field-type {
display: none;
}

div.workflow .guide-body .steps-summary {
box-shadow: none;
}

div.workflow .guide-body .steps-summary li {
border: none;
    margin: 10px 0;
}

div.workflow .guide-body .steps-summary li a {
color: #000;
    text-decoration: none;
    cursor: default;
}

div.workflow .guide-body .steps-summary li.completed a i {
color: green;
}

div.workflow .guide-body .steps-summary li.completed a {
color: green;
}

div.workflow .wf-toc ol {
/*display: block;*/
    /*list-style-type: decimal;*/
    /*margin-block-start: 1em;*/
    /*margin-block-end: 1em;*/
    /*padding-inline-start: 40px;*/
    /*unicode-bidi: isolate;*/
}

div.workflow .d3view-fora .worker-inputs-table,
div.workflow .d3view-fora .worker-outputs-table {
max-height: 300px;
    overflow: auto;
}

div.workflow .wf-logs tbody.no-data:after {
content: 'No logs available.';
    display: block;
    padding: 15px;
    font-size: 1.2em;
    text-align: center;
}

div.workflow .plugin-settings-line .wf-search-container .text-search-io {
width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left !important;
}

div.workflow .worker-search-dd .wf-search-row {
cursor: pointer;
}

div.workflow .plugin-settings-line .wf-search-container .input-group {
transition: width 0.2s linear;
    width: 200px;
}

div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
width: 40vw;
}

div.workflow .plugin-settings-line .wf-search-container .input-group .input-group-addon:first-child {
border-radius: 6px 0 0 6px;
}

div.workflow .plugin-settings-line .wf-search-container .input-group .input-group-addon:last-child {
border-radius: 0 6px 6px 0;
}

div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .input-group {
width: 40vw;
}

div.workflow div.wf-main-container div.wf-main-content>.top-settings-container {
position: relative !important;
}

div.workflow .wf-top-alert[data-source="notification"] {
max-height: 200px;
    overflow-y: auto;
    height: auto !important;
}

div.workflow .workflow-navigation-wheel {
position: fixed;
    right: 20px;
    top: calc(50% - 100px);
    z-index: 5;
    display: none;
    cursor: move;
}

div.workflow .workflow-navigation-wheel .nav-wheel-container {
position: relative;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-wheel .nav-btn {
position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-wheel .nav-btn:hover {
background: #f5f5f5;
    border-color: #999;
}

div.workflow .workflow-navigation-wheel .nav-btn:active {
background: #e0e0e0;
}

div.workflow .workflow-navigation-wheel .nav-btn-animate {
transform: scale(0.9);
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    transition: all 0.1s ease;
}

div.workflow .workflow-navigation-wheel .nav-up {
top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

div.workflow .workflow-navigation-wheel .nav-left {
left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

div.workflow .workflow-navigation-wheel .nav-center {
background: #007bff;
    color: white;
    border-color: #007bff;
    width: 35px;
    height: 35px;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.workflow .workflow-navigation-wheel .nav-center:hover {
background: #0056b3;
    border-color: #0056b3;
}

div.workflow .workflow-navigation-wheel .nav-right {
right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

div.workflow .workflow-navigation-wheel .nav-down {
bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

div.workflow .wf-main-container.timelineEnabled .play-controls .controls-btn-group {
opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-container {
height: calc(100% - 50px);
    position: relative;
    top: 50px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
    display: flex;
    flex-direction: column;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-container .timeline-body {
flex: 1 1 auto;
}

div.workflow .wf-main-container.dataEnabled .play-controls .controls-btn-group {
opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.dataEnabled .wf-data-container {
height: calc(100% - 50px);
    position: relative;
    top: 50px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
    display: flex;
    flex-direction: column;
}

div.workflow .wf-main-container.dataEnabled .wf-data-container .data-body {
flex: 1 1 auto;
}

div.workflow .wf-main-container.ancestryEnabled .play-controls .controls-btn-group {
opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-view {
display: block !important;
}

div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-container {
height: calc(100% - 160px);
    position: relative;
    top: 120px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
}

div.workflow .wf-main-container .timeline-view-toggle .btn {
border-radius: 0 !important;
}

div.workflow .wf-main-container .timeline-view-toggle .btn.active {
background: none !important;
    color: steelblue !important;
}

div.workflow div.wf-node-pointer {
position: absolute;
    max-height: 300px;
    z-index: 2;
}

div.workflow .io-value-container {
pointer-events: all !important;
    width: 25vw !important;
    height: 40vh;
    max-width: unset !important;
}

div.workflow .io-value-container li.field-item,
div.workflow .io-value-container li.field-item .row {
border: none !important;
}

div.workflow .io-value-container .worker-outputs {
width: 100% !important;
}

div.workflow .workflow-toc-toggle-btn {
position: fixed;
    top: calc(50% - 60px);
    left: 75px;
    width: 30px;
    height: 80px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2110;
    cursor: pointer;
}

div.workflow .workflow-toc-container.toc-collapsed {
left: -340px;
    opacity: 0;
    pointer-events: none;
}

div.workflow .workflow-toc-container {
position: fixed;
    top: 80px;
    left: -340px;
    /* Start off-screen */
    width: 320px;
    height: calc(100vh - 120px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2100;
    transition: left 0.3s, opacity 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

div.workflow .workflow-toc-container:not(.toc-collapsed) {
left: 80px;
    opacity: 1;
    pointer-events: auto;
}

div.workflow .workflow-toc-header {
padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

div.workflow .workflow-toc-header h3 {
margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

div.workflow .toc-header-actions {
display: flex;
    gap: 8px;
    align-items: center;
}

div.workflow .workflow-toc-list {
flex: 1;
    overflow-y: auto;
    padding: 10px;
}

div.workflow .toc-item-actions {
display: flex;
    padding: 8px;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 0 0 6px 6px;
}

div.workflow .toc-item-actions button {
background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

div.workflow .toc-item-actions button:hover {
background: #e3f2fd;
    color: #2196f3;
}

div.workflow .toc-item-actions .navigate-btn:hover {
background: #e8f5e9;
    color: #4caf50;
}

div.workflow .toc-item-actions .delete-btn:hover {
background: #ffebee;
    color: #f44336;
}

div.workflow .execution-flow-container {
background: white;
    border-radius: 8px;
    /*box-shadow: 0 2px 12px rgba(0,0,0,0.1);*/
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

div.workflow .execution-flow-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

div.workflow .execution-flow-header h3 {
margin: 0;
    color: #333;
    font-size: 18px;
}

div.workflow .execution-flow-actions {
display: flex;
    gap: 10px;
}

div.workflow .execution-flow-steps {
display: flex;
    flex-direction: column;
    gap: 15px;
}

div.workflow .execution-step {
background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

div.workflow .execution-step.expanded {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

div.workflow .step-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

div.workflow .step-number {
font-weight: 600;
    color: #2196f3;
    font-size: 14px;
}

div.workflow .step-actions button i {
transition: transform 0.3s ease;
}

div.workflow .execution-step.expanded .step-actions button i {
transform: rotate(180deg);
}

div.workflow .step-workers {
padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

div.workflow .execution-step.expanded .step-workers {
max-height: 500px;
    padding: 15px;
    overflow: auto;
}

div.workflow .worker-icon {
width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    color: #2196f3;
}

div.workflow .wf-matrix-flow {
position: fixed;
    top: 80px;
    right: -40vw;
    /* Start off-screen */
    height: calc(100% - 120px);
    z-index: 4;
    width: 40vw;
    background: #FFF;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
}

div.workflow .wf-matrix-flow.visible {
right: 0;
}

div.workflow .wf-matrix-flow.closing {
right: -40vw;
}

div.workflow .back-to-navigated {
pointer-events: all !important;
    cursor: pointer !important;
    top: 100px !important;
    right: 30px !important;
    left: unset !important;
}

div.workflow .viz-list-item.hasInputs {
border-left: 3px solid orange;
}

div.workflow .viz-list-item.hasOutputs {
border-right: 3px solid green;
}

div.workflow .node-resources-container {
pointer-events: all !important;
    width: 25vw !important;
    height: 40vh;
    max-width: unset !important;
}

div.workflow .ai-agent-chat-container {
background: white;
    border-radius: 8px;
    padding: 20px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

div.workflow .ai-agent-chat-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

div.workflow .ai-agent-chat-header h3 {
margin: 0;
    color: #333;
    font-size: 18px;
}

div.workflow .ai-agent-chat-messages {
flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.workflow .chat-message {
max-width: 80%;
    padding: 10px 15px;
    border-radius: 8px;
    position: relative;
}

div.workflow .user-message {
align-self: flex-end;
    background: #e3f2fd;
    margin-left: 20%;
}

div.workflow .agent-message {
align-self: flex-start;
    background: #f5f5f5;
    margin-right: 20%;
}

div.workflow .message-content {
margin-bottom: 5px;
    word-wrap: break-word;
}

div.workflow .message-timestamp {
font-size: 11px;
    color: #666;
    text-align: right;
}

div.workflow .ai-agent-chat-input {
margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

div.workflow .no-messages {
text-align: center;
    color: #666;
    padding: 20px;
}

div.workflow .wf-ai-continue-workflow-container {
/* display: flex;
    align-items: center; */
    padding: 10px;
    /* border-top: 1px solid #ddd; */
    background-color: #f9f9f9;
    border-radius: 8px 8px 8px 8px;
}

div.workflow .continue-workflow-btn {
flex-shrink: 0;
}

div.workflow .continue-workflow-btn:disabled {
cursor: not-allowed;
    opacity: 0.6;
}

div.workflow .continue-workflow-btn:not(:disabled):hover {
transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

div.workflow .continue-workflow-msg {
margin-left: 10px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

div.workflow .wf-ai-agent-tabs-list {
list-style: none;
    padding: 0;
    margin: 0;
}

div.workflow .wf-ai-agent-tab-item {
padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
    background-color: #f5f5f5;
}

div.workflow .wf-ai-agent-tab-item:hover {
background-color: #e8e8e8;
}

div.workflow .wf-ai-agent-tab-item.active {
background-color: #333;
    color: #fff;
    font-weight: 500;
}

div.workflow .wf-ai-agent-tab-item.active:hover {
background-color: #444;
}

div.workflow .wf-ai-agent-tab-name {
font-size: 13px;
    font-weight: 500;
    margin-bottom: 2px;
    display: block;
}

div.workflow .wf-ai-agent-tab-id {
font-size: 11px;
    opacity: 0.7;
    display: block;
    font-family: monospace;
}

div.workflow .wf-ai-agent-tab-item.active .wf-ai-agent-tab-id {
opacity: 0.9;
}

div.workflow .wf-floating-div.clickable.wf-polling-tooltip {
width: 40vw;
    max-width: unset;
}

div.workflow .wf-floating-div.clickable {
pointer-events: all;
}

div.workflow .workflow-index-container.search-focused .play-controls,
div.workflow .workflow-index-container.search-focused .wf-execution-status {
display: none !important;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary {
background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-item {
padding: 10px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-value {
font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-label {
font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .wf-search-filter-info .filter-label i,
div.workflow-modal .wf-search-filter-info .filter-label i {
color: #1976d2;
}

div.workflow .wf-compact-ancestry .ancestry-title i,
div.workflow-modal .wf-compact-ancestry .ancestry-title i {
margin-right: 5px;
    color: #666;
}

div.workflow .wf-compact-ancestry .ancestry-button i,
div.workflow-modal .wf-compact-ancestry .ancestry-button i {
margin-right: 4px;
}

div.workflow .pinned-views.btn-group-vertical {
position: absolute;
    top: 100px;
    right: 20px;
    z-index: 5;
}

div.workflow .pinned-views .dropdown-header {
padding: 8px 12px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

div.workflow .pinned-views .pinned-views-count-badge {
margin-left: 5px;
}

div.workflow .wf-count-badge {
background: #007bff;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
}

div.workflow .wf-pill-popover-content {
max-width: 300px;
    font-size: 12px;
}

div.workflow .wf-pill-popover-content .popover-section {
margin-bottom: 10px;
}

div.workflow .wf-pill-popover-content .popover-section:last-child {
margin-bottom: 0;
}

div.workflow .wf-pill-popover-content h6 {
margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow .wf-pill-popover-content h6 i {
color: #007bff;
}

div.workflow .wf-pill-popover-content p {
margin: 0 0 5px 0;
    line-height: 1.4;
}

div.workflow .wf-pill-popover-content hr {
margin: 8px 0;
    border-color: #eee;
}

div.workflow .wf-pill-popover-content ul {
margin: 0;
    padding-left: 0;
}

div.workflow .wf-pill-popover-content li {
margin-bottom: 3px;
    display: flex;
    align-items: center;
    font-size: 11px;
}

div.workflow .wf-ancestry-display {
/*display: flex;*/
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 100%;
}

div.workflow .wf-ancestry-display .wf-scroll-left,
div.workflow .wf-ancestry-display .wf-scroll-right {
padding: 2px 6px;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 3px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    min-width: 20px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}

div.workflow .wf-ancestry-display .wf-scroll-left:hover,
div.workflow .wf-ancestry-display .wf-scroll-right:hover {
background: #f5f5f5;
    color: #333;
}

div.workflow .wf-ancestry-display .wf-scroll-left.disabled,
div.workflow .wf-ancestry-display .wf-scroll-right.disabled {
color: #ccc;
    cursor: not-allowed;
    background: #f9f9f9;
}

div.workflow .wf-ancestry-display .wf-scroll-left.disabled:hover,
div.workflow .wf-ancestry-display .wf-scroll-right.disabled:hover {
background: #f9f9f9;
    color: #ccc;
}

div.workflow .wf-ancestry-display .wf-ancestry-current {
flex: 1;
    text-align: center;
    min-width: 0;
    /* Allow text to truncate */
    overflow: hidden;
}

div.workflow .wf-ancestry-display .ancestry-path {
display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

div.workflow .wf-ancestry-display .ancestry-pill {
flex-shrink: 1;
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
flex-shrink: 0;
    max-width: 20px;
}

div.workflow div.wf-main-container .wf-top-actions {
position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

div.workflow .collapsed-sequence-expanded-wrapper {
display: flex;
    flex-direction: column;
    align-items: center;
}

div.workflow .collapsed-sequence-expanded-wrapper .expanded-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 15px;
    background: white;
    border-radius: 8px;
    min-width: 400px;
}

div.workflow .collapsed-sequence-expanded-wrapper .expanded-header h4 {
margin: 0;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

div.workflow .collapsed-sequence-expanded-wrapper .header-actions {
display: flex;
    gap: 8px;
}

div.workflow .collapsed-sequence-expanded-wrapper .header-actions .btn {
width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .collapsed-sequence-expanded-container {
background: white;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e1e5e9;
    width: 400px;
    height: 400px;
    animation: expandFromCollapsed 0.3s ease-out;
    transform-origin: center bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

div.workflow .collapsed-sequence-expanded-container.collapsing {
animation: collapseToCollapsed 0.3s ease-in;
}

div.workflow .collapsed-sequence-expanded-container::before {
content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, #1a73e8, transparent);
    z-index: -1;
}

div.workflow .collapsed-sequence-expanded-container .sequence-info {
background: #f8f9fa;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 12px;
}

div.workflow .collapsed-sequence-expanded-container .search-container {
margin-bottom: 15px;
    width: 80%;
}

div.workflow .collapsed-sequence-expanded-container .search-container .input-group {
border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .collapsed-sequence-expanded-container .search-container .input-group-addon {
background: #f8f9fa;
    border: 1px solid #dadce0;
    border-right: none;
    color: #5f6368;
    padding: 8px 12px;
}

div.workflow .collapsed-sequence-expanded-container .search-container .form-control:focus {
border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

div.workflow .collapsed-sequence-expanded-container .workers-list-container {
margin: 2px 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.workflow .collapsed-sequence-expanded-container .workers-grid {
display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
}

div.workflow .collapsed-sequence-expanded-container .worker-circle-inner {
background: white;
    border: 2px solid #1a73e8;
    border-radius: 8px;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 6px;
}

div.workflow .collapsed-sequence-expanded-container .worker-icon {
font-size: 10px;
    color: #1a73e8;
    margin-bottom: 2px;
}

div.workflow .collapsed-sequence-expanded-container .worker-name {
font-size: 10px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1px;
}

div.workflow .collapsed-sequence-expanded-container .worker-type {
color: #666;
    text-align: center;
    line-height: 1.0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.workflow .collapsed-sequence-expanded-container .pagination-container {
margin-top: 10px;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid #e1e5e9;
}

div.workflow .collapsed-sequence-expanded-container .pagination-controls {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

div.workflow .collapsed-sequence-expanded-container .page-info {
font-size: 12px;
    color: #5f6368;
    font-weight: 500;
}

div.workflow .collapsed-sequence-expanded-container .no-results {
padding: 30px 20px;
    color: #5f6368;
}

div.workflow .collapsed-sequence-expanded-container .no-results i {
margin-bottom: 10px;
    opacity: 0.5;
}

div.workflow .collapsed-sequence-expanded-container .no-results p {
margin: 0;
    font-size: 14px;
}

div.workflow .workflow-navigation-container {
position: absolute;
    top: 0;
    right: -40vw;
    width: 40vw;
    height: 100%;
    background: #fff;
    z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

/** Added by shashank2104 on 2026-03-26 - Modern mode: offset navigation panel below the header **/
/* div.workflow.wf-design-modern .workflow-navigation-container,
body.wf-design-modern .workflow-navigation-container {
    top: var(--wf-header-h) !important;
    height: calc(100vh - var(--wf-header-h)) !important;
} */

div.workflow .workflow-navigation-container .error-data-container {
padding: 20px;
}

div.workflow .workflow-navigation-container .error-data-header {
margin-bottom: 20px;
}

div.workflow .workflow-navigation-container .error-data-header h5 {
color: #d32f2f;
    margin-bottom: 10px;
}

div.workflow .workflow-navigation-container .error-data-header .auto-fix-all-btn {
margin-left: 15px;
    white-space: nowrap;
}

div.workflow .workflow-navigation-container .error-data-header .auto-fix-all-btn:hover {
transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-container .error-summary {
margin-top: 10px;
}

div.workflow .workflow-navigation-container .error-summary .label {
margin-right: 10px;
    font-size: 12px;
}

div.workflow .workflow-navigation-container .error-workers-list {
/* max-height: 60vh; */
    overflow-y: auto;
}

div.workflow .workflow-navigation-container .error-actions {
display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

div.workflow .workflow-navigation-container.visible {
right: 0;
}

div.workflow .workflow-navigation-container .navigation-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    /*background: #f8f9fa;*/
}

div.workflow .workflow-navigation-container .navigation-header .header-buttons {
display: flex;
    gap: 8px;
    align-items: center;
}

div.workflow .workflow-navigation-container .navigation-title {
display: flex;
    align-items: center;
    font-weight: 600;
    color: #333;
}

div.workflow .workflow-navigation-container .navigation-title i {
margin-right: 8px;
    color: #007bff;
}

div.workflow .workflow-navigation-container .navigation-controls {
padding: 20px;
    border-bottom: 1px solid #eee;
}

div.workflow .workflow-navigation-container .control-group {
margin-bottom: 0;
}

div.workflow .workflow-navigation-container .control-label {
display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
}

div.workflow .workflow-navigation-container .navigation-content {
padding: 20px;
    flex: 1 1 auto;
    overflow-y: auto;
}

div.workflow .workflow-navigation-container .selection-label {
display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

div.workflow .workflow-navigation-container .form-group {
margin-bottom: 15px;
}

div.workflow .workflow-navigation-container .navigation-path-container {
padding: 25px;
    border-top: 1px solid #eee;
}

div.workflow .workflow-navigation-container .path-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

div.workflow .workflow-navigation-container .path-header h5 {
margin: 0;
    color: #333;
    font-weight: 600;
}

div.workflow .workflow-navigation-container .path-summary {
display: flex;
    gap: 15px;
    font-size: 12px;
    color: #666;
}

div.workflow .workflow-navigation-container .path-warnings {
margin-bottom: 15px;
}

div.workflow .workflow-navigation-container .path-warnings .alert {
margin-bottom: 0;
    padding: 10px 15px;
    font-size: 13px;
}

div.workflow .workflow-navigation-container .path-warnings i {
margin-right: 5px;
}

div.workflow .workflow-navigation-container .direction-step {
display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    position: relative;
    margin-bottom: 0;
    background: white;
    border-radius: 6px;
}

div.workflow .workflow-navigation-container .direction-step:hover {
background-color: #f8f9fa;
    cursor: pointer;
}

div.workflow .workflow-navigation-container .direction-step.navigated {
background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

div.workflow .workflow-navigation-container .direction-step.navigated .worker-icon {
color: #2196f3;
    transform: scale(1.1);
}

div.workflow .workflow-navigation-container .direction-step.navigated .worker-name {
color: #1976d2;
    font-weight: 600;
}

div.workflow .workflow-navigation-container .direction-step[data-in-flow="false"] {
/* Remove opacity and add better visual indicators */
    opacity: 0.8;
    position: relative;

    /* background-color: #fff3e0; */
    /* Light orange background */
}

div.workflow .workflow-navigation-container .direction-step[data-in-flow="false"] .worker-name {
/* color: #e65100; */
    /* Darker orange for better contrast */
    font-style: italic;
}

div.workflow .workflow-navigation-container .direction-step[data-in-flow="false"] .worker-meta::after {
content: " (Not in current flow)";
    color: #ff9800;
    font-size: 11px;
    font-style: italic;
}

div.workflow .workflow-navigation-container .flow-status-indicator {
display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .workflow-navigation-container .flow-status-indicator.out-of-flow {
background-color: #ff9800;
    color: white;
    border: 1px solid #f57c00;
}

div.workflow .workflow-navigation-container .flow-status-indicator i {
margin-right: 3px;
    font-size: 9px;
}

div.workflow .workflow-navigation-container .direction-step .worker-icon {
width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 12px;
    flex-shrink: 0;
}

div.workflow .workflow-navigation-container .direction-step.decision .worker-icon {
background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

div.workflow .workflow-navigation-container .direction-step .worker-content {
flex: 1;
    min-width: 0;
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

div.workflow .workflow-navigation-container .direction-step .worker-name {
font-weight: 400;
    color: #202124;
    font-size: 16px;
    line-height: 1.4;
}

div.workflow .workflow-navigation-container .direction-step .worker-meta {
color: #5f6368;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label {
display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f1f3f4;
    color: #5f6368;
    border: none;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label.start {
background: #e8f5e8;
    color: #137333;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label.decision {
background: #fef7e0;
    color: #b06000;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label.iterator {
background: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

div.workflow .workflow-navigation-container .step-connector {
/* text-align: center; */
    margin: 18px 0;
}

div.workflow .workflow-navigation-container .direction-step:last-child::after {
display: none;
}

div.workflow .workflow-navigation-container .path-header {
background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 20px;
    margin: -20px -20px 20px -20px;
}

div.workflow .workflow-navigation-container .path-header h5 {
margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 400;
    color: #202124;
}

div.workflow .workflow-navigation-container .path-summary {
display: flex;
    gap: 16px;
    font-size: 14px;
    color: #5f6368;
}

div.workflow .workflow-navigation-container .path-duration,
div.workflow .workflow-navigation-container .path-steps {
font-weight: 500;
}

div.workflow .workflow-navigation-container .direction-step:hover .worker-icon {
transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

div.workflow .workflow-navigation-container .direction-step:hover .worker-name {
color: #1a73e8;
}

div.workflow .workflow-navigation-container .no-path-message {
padding: 40px 20px;
    text-align: center;
}

div.workflow .workflow-navigation-container .no-path-message i {
color: #ccc;
    margin-bottom: 15px;
}

div.workflow .workflow-navigation-container .no-path-message p {
color: #666;
    margin: 0;
}

div.workflow .workflow-navigation-container .step-connector {
position: relative;
    margin: 10px 0;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.workflow .workflow-navigation-container .step-connector .step-plus-btn {
position: relative;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    /* Remove transitions for collapsed items */
}

div.workflow .workflow-navigation-container .step-connector .step-plus-btn .worker-count {
position: absolute;
    top: -8px;
    right: -8px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

div.workflow .workflow-navigation-container .step-connector .step-plus-btn i {
transition: none;
    /* Remove transitions for collapsed items */
}

div.workflow .workflow-navigation-container .step-connector .workers-list {
margin-top: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
}

div.workflow .workflow-navigation-container .direction-step .worker-actions {
margin-left: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

div.workflow .workflow-navigation-container .direction-step:hover .worker-actions {
opacity: 1;
}

div.workflow .workflow-navigation-container .direction-step .worker-actions .btn-group {
display: flex;
}

div.workflow .workflow-navigation-container .step-connector .workers-list .collapsed-worker-item:last-child {
border-bottom: none;
    margin-bottom: 0;
}

div.workflow .workflow-navigation-container .step-connector .workers-list .no-workers {
padding: 20px;
    color: #6c757d;
}

div.workflow .workflow-navigation-container .step-connector .workers-list .no-workers i {
margin-right: 6px;
}

div.workflow .workflow-navigation-container .workers-list-container {
padding: 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
}

div.workflow .wf-filter-title i,
div.workflow-modal .wf-filter-title i {
margin-right: 8px;
    font-size: 16px;
    color: #666;
}

div.workflow .wf-filter-section-title i,
div.workflow-modal .wf-filter-section-title i {
margin-right: 8px;
    color: #666;
    font-size: 14px;
}

div.workflow .wf-filter-label i,
div.workflow-modal .wf-filter-label i {
margin-right: 6px;
    color: #7f8c8d;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-text i,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-text i {
color: #1976d2;
}

div.workflow .wf-toggle-text i,
div.workflow-modal .wf-toggle-text i {
margin-right: 8px;
    color: #7f8c8d;
    font-size: 16px;
    width: 18px;
    text-align: center;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu {
position: relative;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>.dropdown-menu {
top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0;
    border-radius: 0;
    min-width: 200px;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu:hover>.dropdown-menu {
display: block;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown>a {
padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown>a:hover {
background-color: #f5f5f5;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-menu {
position: absolute;
    z-index: 1000;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>a {
position: relative;
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>a:hover {
background-color: #f5f5f5;
}

div.workflow .workflow-activities-container {
display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

div.workflow .workflow-activities-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    /* color: white; */
    padding: 8px 12px;
    /* border-bottom: 1px solid #5a6268; */
    min-height: 40px;
}

div.workflow .workflow-activities-header-left {
display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow .workflow-activities-toggle-icon {
cursor: pointer;
    font-size: 12px;
    transition: transform 0.2s ease;
}

div.workflow .workflow-activities-toggle-icon.collapsed {
transform: rotate(-90deg);
}

div.workflow .workflow-activities-title {
font-weight: 500;
    font-size: 14px;
}

div.workflow .workflow-activities-header-right {
display: flex;
    gap: 6px;
}

div.workflow .workflow-activities-btn {
padding: 4px 8px;
}

div.workflow .workflow-activities-content {
flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-content.collapsed {
display: none;
}

div.workflow .workflow-activities-view .workflow-activities-content.collapsed {
display: none;
}

div.workflow .workflow-activities-view {
height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-view .workflow-activities-container {
height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-logs-container {
flex: 1;
    overflow: auto;
    padding: 8px;
    background-color: white;
}

div.workflow .workflow-activities-logs-container .logs-table {
width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

div.workflow .workflow-activities-logs-container .logs-table th {
background-color: #f8f9fa;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-weight: 500;
    color: #495057;
}

div.workflow .workflow-activities-logs-container .logs-table td {
padding: 6px 8px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: top;
}

div.workflow .workflow-activities-logs-container .logs-table tr:hover {
background-color: #f8f9fa;
}

div.workflow .workflow-activities-logs-container .timestamp-column {
width: 80px;
    font-family: monospace;
    color: #6c757d;
}

div.workflow .workflow-activities-logs-container .activity-column {
flex: 1;
    word-wrap: break-word;
}

div.workflow .wf-split-nav-content .workflow-navigation-container {
position: relative;
    height: 100%;
    width: 100%;
}

div.workflow .wf-split-right-nav {
background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .wf-split-nav-breadcrumbs {
padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    flex-shrink: 0;
}

div.workflow .wf-split-nav-breadcrumb-items {
display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
}

div.workflow .breadcrumb-item {
cursor: pointer;
    color: #007bff;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

div.workflow .breadcrumb-item.active {
color: #495057;
    font-weight: 600;
    cursor: default;
    background: #e3f2fd;
    border-color: #bbdefb;
}

div.workflow .breadcrumb-item:not(.active):hover {
background: #e9ecef;
    border-color: #ced4da;
}

div.workflow .breadcrumb-separator {
margin: 0 6px;
    color: #6c757d;
    font-size: 12px;
    font-weight: bold;
}

div.workflow .wf-split-nav-close {
margin-left: 12px;
    padding: 6px 10px;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

div.workflow .wf-split-nav-close:hover {
background: #dc3545;
    color: #fff;
}

div.workflow .wf-split-nav-content {
flex: 1;
    position: relative;
    overflow: hidden;
}

div.workflow .wf-split-nav-tab {
display: none;
    height: 100%;
    width: 100%;
}

div.workflow .wf-split-nav-tab.active {
display: block;
}

div.workflow .dep-start-box {
border: 2px solid #007bff;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow .dep-start-title {
font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

div.workflow .dep-start-count {
font-size: 14px;
    color: #6c757d;
}

div.workflow .dep-start-count i {
margin-right: 5px;
}

div.workflow .marker-pairing-container {
height: 100%;
}

div.workflow .marker-pairing-header {
border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
}

div.workflow .marker-pairing-table-container {
border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

div.workflow .marker-pairing-table {
margin-bottom: 0;
    font-size: 13px;
}

div.workflow .marker-pairing-table th {
background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    padding: 12px 8px;
    white-space: nowrap;
}

div.workflow .marker-pairing-table td {
padding: 8px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

div.workflow .marker-pairing-table .form-control,
div.workflow .marker-pairing-table .sl-select2 {
width: 100%;
    min-width: 80px;
    font-size: 12px;
    padding: 4px 8px;
    height: 28px;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

div.workflow .marker-pairing-table .form-control:focus,
div.workflow .marker-pairing-table .sl-select2:focus {
border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

div.workflow .marker-pairing-table .color-input {
width: 60px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
}

div.workflow .marker-pairing-table .number-input {
width: 70px;
    text-align: center;
}

div.workflow .marker-pairing-table .text-input {
min-width: 100px;
}

div.workflow .marker-pairing-table .action-buttons {
text-align: center;
    white-space: nowrap;
}

div.workflow .marker-pairing-table .btn-remove {
padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
}

div.workflow .marker-pairing-actions {
text-align: left;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

div.workflow .marker-pairing-table tbody tr:hover {
background-color: #f8f9fa;
}

div.workflow .marker-pairing-table tbody tr:last-child td {
border-bottom: none;
}

div.workflow .workflow-navigation-container .issue-detail-toggle,
div.workflow .workflow-navigation-container .issue-auto-fix-btn {
display: none !important;
}

div.workflow .wf-split-nav-tab .modal-backdrop {
display: none !important;
}

div.workflow .wf-split-nav-tab .sidebar-view {
position: static !important;
    transform: none !important;
    height: 100%;
}

div.workflow .wf-split-nav-tab .d3view-plugins-sidebar {
position: static !important;
    box-shadow: none;
    width: 100% !important;
    border: none !important;
    animation: unset !important;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a > .nav-menu-item-label {
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
    margin: 0 !important;
    white-space: normal;
    text-align: left;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"].full-width {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
    max-width: unset!important;
}

div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app].full-width {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
}

/* Classic header menu: bold top-level labels (File/Edit/View/Run/Tools/Export/Options/Help)
   + space the leading icon. Nav-rail labels bolded via the rule above (Jun 2026). */
div.workflow .wf-dropdowns-list > li.dropdown > a {
    font-weight: 600;
}
div.workflow .wf-dropdowns-list > li.dropdown > a > i {
    margin-right: 6px;
}



/*
 * CSS for template: d3view-reporter-object-info-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/d3view-reporter-object-info-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-execution-node-side-panel.in .modal-content {
border-radius: 0;
    border: none;
    height: 100%;
}

div.wf-execution-node-side-panel.in .modal-content {
border-radius: 0;
    border: none;
    height: 100%;
}

div.wf-execution-node-side-panel.in .modal-content {
border-radius: 0;
    border: none;
    height: 100%;
}



/*
 * CSS for template: d3view-wf-guide-step-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/d3view-wf-guide-step-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .card.guide-step {
height: auto;
    overflow: auto;
}

div.workflow .guide-step .guide-input {
flex: 1 1 calc(33% - 20px);
    margin: 0 10px;
    padding-left: 0;
    box-shadow: var(--plugin-box-shadow-light);
    position: relative;
}

div.workflow-modal .card.guide-step h1.lead {
padding-left: 4px
}

div.workflow-modal .guide-step .input-tags [data-key]:hover .remove-ip {
opacity: 1;
    pointer-events: all;
}

div.workflow-modal .guide-step .input-tags [data-key]:hover .remove-ip:hover {
color: red;
}

div.workflow-modal .guide-step .input-tags .remove-ip {
position: absolute;
    ;
    right: 0;
    top: -10px;
    opacity: 0;
    pointer-events: none;
}

div.workflow-modal .guide-step .guide-inputs-grid {
width: 100%;
    min-height: 200px;
    background: #fafafa;
    padding: 10px;
}

div.workflow-modal .guide-step .guide-inputs-grid .grid-stack-item-content {
border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
}

div.workflow-modal .guide-step .guide-inputs-grid .grid-stack-item-content .input-value-container {
display: none;
}

div.workflow-modal .guide-step .guide-inputs-grid .grid-stack-item.showValue .input-value-container {
display: block;
}

div.workflow-modal .guide-step .guide-inputs-grid .grid-stack-item-content .ip-name {
width: calc(100% - 40px);
}

div.workflow-modal .guide-step .guide-inputs-grid .grid-stack-item-content .ip-name>div {
overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow-modal .guide-step .grid-item-buttons {
position: absolute;
    top: 5px;
    right: 5px;
    cursor: move;
    opacity: 0.5;
    display: flex;
    align-items: center;
}

div.workflow-modal .guide-step .grid-stack-item-handle:hover {
opacity: 1;
}



/*
 * CSS for template: d3view-wf-guided-view-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/d3view-wf-guided-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.bootstrap-select.-wf .dropdown-menu {
/*max-width: 100%!important;*/
    overflow: auto;
}

div.bootstrap-select.-wf .dropdown-menu {
/*max-width: 100%!important;*/
    overflow: auto;
}

div.wf-popover,
div.bootstrap-select.-wf .dropdown-menu,
div.fb-popover {
z-index: 1100 !important;
}

div.bootstrap-select.-wf .dropdown-menu {
/*max-width: 100%!important;*/
    overflow: auto;
}

div.wf-popover,
div.bootstrap-select.-wf .dropdown-menu,
div.fb-popover {
z-index: 1100 !important;
}



/*
 * CSS for template: d3view-wf-workers-tree-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/d3view-wf-workers-tree-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-tree .view-node {
display: none;
}

.wf-workers-tree .tv-content:hover .view-node {
display: inline !important;
}



/*
 * CSS for template: d3view-workflow-node-location-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/d3view-workflow-node-location-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-node-location {
position: fixed;
    width: 75%;
    top: 1px;
    right: 0;
    margin: 10px 0;
    z-index: 2000;
    background: #FFF;
    border: 1px solid #DDD;
}

div.workflow-node-location .close {
font-size: 3em;
    display: inline-block;
    position: absolute;
    right: 10px;
}

div.workflow-node-location {
position: fixed;
    width: 75%;
    top: 1px;
    right: 0;
    margin: 10px 0;
    z-index: 2000;
    background: #FFF;
    border: 1px solid #DDD;
}

div.workflow-node-location .close {
font-size: 3em;
    display: inline-block;
    position: absolute;
    right: 10px;
}

div.workflow div.wf-main-container[data-mode="view"] .wf_switch_mode,
div.workflow div.wf-main-container[data-mode="view"] .canvas_selection,
div.workflow div.wf-main-container[data-mode="view"] .toggle_logs,
div.workflow div.wf-main-container[data-mode="view"] .wf_keyboard_shortcuts,
div.workflow div.wf-main-container[data-mode="view"] .wf_tour {
display: none;
}

div.workflow div[data-mode="view"] .wf-footer {
display: none;
}

div.workflow .workflow-index[data-view="io"] .wf-footer,
div.workflow .workflow-index[data-view="io"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="io"] .io-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="io"] .back_to_full {
display: block !important;
}

div.workflow-node-location {
position: fixed;
    width: 75%;
    top: 1px;
    right: 0;
    margin: 10px 0;
    z-index: 2000;
    background: #FFF;
    border: 1px solid #DDD;
}

div.workflow-node-location .close {
font-size: 3em;
    display: inline-block;
    position: absolute;
    right: 10px;
}

div.workflow div.wf-main-container[data-mode="view"] .wf_switch_mode,
div.workflow div.wf-main-container[data-mode="view"] .canvas_selection,
div.workflow div.wf-main-container[data-mode="view"] .toggle_logs,
div.workflow div.wf-main-container[data-mode="view"] .wf_keyboard_shortcuts,
div.workflow div.wf-main-container[data-mode="view"] .wf_tour {
display: none;
}

div.workflow div[data-mode="view"] .wf-footer {
display: none;
}

div.workflow .workflow-index[data-view="io"] .wf-footer,
div.workflow .workflow-index[data-view="io"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="io"] .io-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="io"] .back_to_full {
display: block !important;
}



/*
 * CSS for template: wf-canvas-interfacer-custom-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-canvas-interfacer-custom-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.d3view-top-arrow:before,
.d3view-top-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -9px;
    border-style: solid;
}

.d3view-top-arrow:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #FFF transparent;
}

.d3view-top-arrow:after {
border-width: 0 9px 9px 9px;
    border-color: transparent transparent #EEE transparent;
}

.d3view-top-arrow:before,
.d3view-top-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -9px;
    border-style: solid;
}

.d3view-top-arrow:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #FFF transparent;
}

.d3view-top-arrow:after {
border-width: 0 9px 9px 9px;
    border-color: transparent transparent #EEE transparent;
}

div.wf-canvas-interfacer {
z-index: 2000 !important;
    position: fixed;
    border: 1px solid #DDD;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.wf-canvas-interfacer canvas {
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 82%, rgba(213, 213, 213, 1) 100%, rgba(208, 208, 208, 1) 100%);
}

div.wf-canvas-interfacer .close_ci {
position: absolute;
    top: 0;
    right: 2px;
    color: dimgray;
}

div.wf-canvas-interfacer .my-location {
position: absolute;
    bottom: 5px;
    right: 2px;
}

div.wf-canvas-interfacer .my-location:hover {
color: #428bca;
}

.d3view-top-arrow:before,
.d3view-top-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -9px;
    border-style: solid;
}

.d3view-top-arrow:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #FFF transparent;
}

.d3view-top-arrow:after {
border-width: 0 9px 9px 9px;
    border-color: transparent transparent #EEE transparent;
}

div.wf-canvas-interfacer {
z-index: 2000 !important;
    position: fixed;
    border: 1px solid #DDD;
    border-radius: 5px;
    margin-top: 10px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

div.wf-canvas-interfacer canvas {
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 82%, rgba(213, 213, 213, 1) 100%, rgba(208, 208, 208, 1) 100%);
}

div.wf-canvas-interfacer .close_ci {
position: absolute;
    top: 0;
    right: 2px;
    color: dimgray;
}

div.wf-canvas-interfacer .my-location {
position: absolute;
    bottom: 5px;
    right: 2px;
}

div.wf-canvas-interfacer .my-location:hover {
color: #428bca;
}



/*
 * CSS for template: wf-collected-outputs-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-collected-outputs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-collected-outputs .viz-containers.pl-flex.full-h {
max-width: 100%;
}



/*
 * CSS for template: wf-comment-box-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-comment-box-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .chart-view .wf-comment-box {
position: fixed;
    cursor: text;
    top: 0;
    left: 0;
    padding: 10px;
    min-width: 200px;
    /*max-width: 300px;*/
    min-height: 150px;
    max-height: 600px;
    /*transform: none!important;*/
}

div.workflow .chart-view .wf-comment-box .wf-comment-box-contents {
box-shadow: var(--plugin-box-shadow-light);
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

div.workflow .chart-view .wf-comment-box .drag-handle,
div.workflow .chart-view .wf-comment-box .close_comment,
div.workflow .chart-view .wf-comment-box .ui-resizable-handle,
div.workflow .chart-view .wf-comment-box .comment-box-footer {
opacity: 0;
}

div.workflow .chart-view .wf-comment-box:hover .drag-handle,
div.workflow .chart-view .wf-comment-box:hover .close_comment,
div.workflow .chart-view .wf-comment-box:hover .ui-resizable-handle,
div.workflow .chart-view .wf-comment-box:hover .comment-box-footer {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-resizable-resizing .ui-resizable-handle {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-draggable-dragging .drag-handle {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-draggable-dragging .wf-comment-box-contents {
border: 1px solid red;
}

div.workflow .chart-view .wf-comment-box .ui-resizable-handle.ui-resizable-se {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
    cursor: se-resize;
    z-index: 200;
    right: 12px;
    bottom: 12px;
    /* padding: 10px; */
}

div.workflow .chart-view .wf-comment-box.collapsed {
min-width: unset !important;
    min-height: unset !important;
    border-radius: 0;
    padding: 0;
    display: none;
}

div.workflow .chart-view .wf-comment-box.collapsed .close,
div.workflow .chart-view .wf-comment-box.collapsed .ui-resizable-handle {
display: none;
}

div.workflow .chart-view .wf-comment-box.highlighted {
border-color: #428bca;
    border-width: 3px;
}

div.workflow .wf-comment-box .comment-title {
display: inline-block;
}

div.workflow .wf-comment-box .comment-editor {
/*max-height: 100px;*/
    overflow: auto;
    height: 100%;
    word-break: break-all;
    line-height: initial;
}

div.workflow .chart-view .wf-comment-box {
/*position: fixed;*/
    position: absolute;
    cursor: text;
    top: 0;
    left: 0;
    padding: 10px;
    min-width: 200px;
    /*max-width: 300px;*/
    min-height: 150px;
    max-height: 600px;
    /*transform: none!important;*/
}

div.workflow .chart-view .wf-comment-box .wf-comment-box-contents {
box-shadow: var(--plugin-box-shadow-light);
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 10px;
    padding: 20px;
    position: relative;
}

div.workflow .chart-view .wf-comment-box .drag-handle,
div.workflow .chart-view .wf-comment-box .close_comment,
div.workflow .chart-view .wf-comment-box .ui-resizable-handle,
div.workflow .chart-view .wf-comment-box .comment-box-footer {
opacity: 0;
}

div.workflow .chart-view .wf-comment-box:hover .drag-handle,
div.workflow .chart-view .wf-comment-box:hover .close_comment,
div.workflow .chart-view .wf-comment-box:hover .ui-resizable-handle,
div.workflow .chart-view .wf-comment-box:hover .comment-box-footer {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-resizable-resizing .ui-resizable-handle {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-draggable-dragging .drag-handle {
opacity: 1
}

div.workflow .chart-view .wf-comment-box.ui-draggable-dragging .wf-comment-box-contents {
border: 1px solid red;
}

div.workflow .chart-view .wf-comment-box .ui-resizable-handle.ui-resizable-se {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
    cursor: se-resize;
    z-index: 200;
    right: 12px;
    bottom: 12px;
    /* padding: 10px; */
}

div.workflow .chart-view .wf-comment-box.collapsed {
min-width: unset !important;
    min-height: unset !important;
    border-radius: 0;
    padding: 0;
    display: none;
}

div.workflow .chart-view .wf-comment-box.collapsed .close,
div.workflow .chart-view .wf-comment-box.collapsed .ui-resizable-handle {
display: none;
}

div.workflow .chart-view .wf-comment-box.highlighted {
border-color: #428bca;
    border-width: 3px;
}

div.workflow .wf-comment-box .comment-title {
display: inline-block;
}

div.workflow .wf-comment-box .comment-editor {
/*max-height: 100px;*/
    overflow: auto;
    height: 100%;
    word-break: break-all;
    line-height: initial;
}

div.workflow .wf-comment-box .comment-buttons {
position: absolute;
    right: 7px;
    top: -19px;
    padding: 4px;
    cursor: move;
}

div.workflow .wf-comment-box .drag-handle {
position: absolute;
    cursor: move;
    z-index: 3;
}

div.workflow .wf-comment-box .drag-handle:hover {
color: red;
}



/*
 * CSS for template: wf-cora-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-cora-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-cora .cora-outputs .workflow-modal,
.wf-cora .cora-outputs .worker-inputs {
height: auto !important;
}



/*
 * CSS for template: wf-curve-events-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-curve-events-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-curve-events.is_rendering {
cursor: progress !important;
}

div.wf-curve-events.is_rendering div {
pointer-events: none
}

div.wf-curve-events.is_rendering .d3view-no-data {
display: block !important;
    color: dimgrey;
    z-index: 2;
}

div.wf-curve-events.is_rendering .d3view-no-data span:after {
content: 'Rendering';
    margin-left: 10px;
}

div#wf-curve-events.event-adding .add_new {
opacity: 0.3;
    pointer-events: none !important;
}

div.wf-curve-events.is_rendering {
cursor: progress !important;
}

div.wf-curve-events.is_rendering div {
pointer-events: none
}

div.wf-curve-events.is_rendering .d3view-no-data {
display: block !important;
    color: dimgrey;
    z-index: 2;
}

div.wf-curve-events.is_rendering .d3view-no-data span:after {
content: 'Rendering';
    margin-left: 10px;
}

div#wf-curve-events.event-adding .add_new {
opacity: 0.3;
    pointer-events: none !important;
}



/*
 * CSS for template: wf-curve-scalar-selector-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-curve-scalar-selector-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-curve-scalar-selector ul.scalars-list li a {
text-decoration: none;
}

div.wf-curve-scalar-selector ul.scalars-list li.active .dimgrey {
color: #FFF;
}

div.wf-curve-scalar-selector ul.scalars-list li a {
text-decoration: none;
}

div.wf-curve-scalar-selector ul.scalars-list li.active .dimgrey {
color: #FFF;
}



/*
 * CSS for template: wf-curve-traceability-list-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-curve-traceability-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-curve-traceability .d3view-inputsBuilder {
border: none;
}

div.wf-curve-traceability .tr-list li.list-group-item:hover {
background-color: #f5f5f5;
}

div.wf-curve-traceability .ui-layout-container>div {
height: 100% !important;
}



/*
 * CSS for template: wf-docked-start-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-docked-start-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .docked-start .run_wf {
position: relative;
    top: -40px !important;
    left: calc(50% - 12px) !important;
    font-size: 23px !important;
}

div.workflow .docked-start .ip-count {
position: absolute;
    top: -18px !important;
    left: 0;
    font-size: 12px !important;
    color: grey;
}

div.workflow .docked-start .op-count {
position: absolute;
    top: -18px !important;
    right: 0;
    font-size: 12px !important;
    color: grey;
}

div.workflow .docked-start>.box {
-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 100px;
    height: 60px;
    background-color: #eee;
    margin-bottom: 10px;
    border: 1px solid #4f5359;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .docked-start:hover>.box {
background-color: var(--dt-selection-color);
}



/*
 * CSS for template: wf-graph-info-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-graph-info-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.chart-view .wf-graph-info {
position: absolute;
    right: 60px;
    top: 10px;
    padding: 15px;
    z-index: 2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    max-width: 500px;
    word-break: break-word;
    background: #FFF;
    border-radius: 5px;
    /*box-shadow: var(--plugin-box-shadow-lightest);*/
    border: 1px solid transparent;
    cursor: move;
    overflow: hidden auto;
    max-height: 50vh;
    height: auto !important;
}

div.workflow div.chart-view .wf-graph-info:hover {
border-color: #DDD;
}

div.workflow div.chart-view .wf-graph-info .show_additionals.opened {
color: green;
}

div.workflow div.chart-view .wf-graph-info .panel-default>.panel-heading {
background-color: #FFF;
    background-image: none;
}

div.workflow div.chart-view .wf-graph-info [data-category] {
cursor: pointer;
}

div.workflow div.chart-view .wf-graph-info [data-category] .wf-worker-type {
flex: 1 1 auto !important;
}

div.workflow div.chart-view .wf-graph-info [data-category]:hover>* {
color: #aaa;
}

div.workflow div.chart-view .wf-graph-info [data-category].clicked>* {
color: steelblue;
}



/*
 * CSS for template: wf-history-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-history-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal li.field-item span.history.active i {
color: green;
}

div#wf-execute-workflow-node-modal li.field-item span.history.active i {
color: green;
}

div#wf-execute-workflow-node-modal li.field-item span.history.active i {
color: green;
}



/*
 * CSS for template: wf-individual-worker-output-value-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-individual-worker-output-value-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal li.field-item .curve-override-buttons {
position: absolute;
    right: 0;
    top: 0;
}

div#wf-execute-workflow-node-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div#wf-execute-workflow-node-modal .edit_options li.field-item div.remote-lookup-list {
padding: 0;
    /*width: 96%;*/
}

div#wf-execute-workflow-node-modal li.field-item .file-view {
cursor: pointer;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}

div#wf-execute-workflow-node-modal li.field-item .curve-override-buttons {
position: absolute;
    right: 0;
    top: 0;
}

div#wf-execute-workflow-node-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div#wf-execute-workflow-node-modal .edit_options li.field-item div.remote-lookup-list {
padding: 0;
    /*width: 96%;*/
}

div#wf-execute-workflow-node-modal li.field-item .file-view {
cursor: pointer;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}

div#wf-execute-workflow-node-modal li.field-item .curve-override-buttons {
position: absolute;
    right: 0;
    top: 0;
}

div#wf-execute-workflow-node-modal li.field-item textarea {
/*min-height: 50px;*/
    max-height: 200px;
    resize: vertical;
}

div#wf-execute-workflow-node-modal .edit_options li.field-item div.remote-lookup-list {
padding: 0;
    /*width: 96%;*/
}

div#wf-execute-workflow-node-modal li.field-item .file-view {
cursor: pointer;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs li.field-item .file-error {
text-align: left;
    font-weight: bold;
    padding-top: 9px;
    font-size: 12px;
    clear: both;
}



/*
 * CSS for template: wf-io-export-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-io-export-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.sl-select2#select2-drop .select2-results li.select2-highlighted .item-id {
color: #FFF;
}



/*
 * CSS for template: wf-newton-settings-list-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-newton-settings-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-newton.curve_plot {
position: absolute !important;
}

div#wf-newton.curve_plot {
position: absolute !important;
}

div#wf-newton.curve_plot {
position: absolute !important;
}



/*
 * CSS for template: wf-reporters-list-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-reporters-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-reporters .reporter-item-buttons {
opacity: 0;
    position: absolute;
    top: 50%;
    right: 4px;
    pointer-events: none;
    z-index: 1;
}

div.wf-reporters li.list-group-item:hover {
background-color: var(--d3neutralLighterAlt);
}

div.wf-reporters li.list-group-item:hover .reporter-item-buttons {
opacity: 1;
    position: absolute;
    pointer-events: all;
}



/*
 * CSS for template: wf-sanitize-worker-names-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-sanitize-worker-names-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .worker-name {
font-size: 1.3em;
    font-weight: bold;
    color: #333 !important;
    flex: 1 1 auto;
    margin-bottom: 0;

    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    display: inline-block;
    overflow: hidden;
}

.wf-workers-container .worker-name img {
vertical-align: top;
}

.wf-workers-container .worker-name {
font-size: 1.3em;
    font-weight: bold;
    color: #333 !important;
    flex: 1 1 auto;
    margin-bottom: 0;

    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    display: inline-block;
    overflow: hidden;
}

.wf-workers-container .worker-name img {
vertical-align: top;
}

.wf-workers-container .worker-name {
font-size: inherit !important;
    width: 100%;
    /*margin-right: 5px;*/
    margin: 4px 5px 4px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-workers-container .worker-name {
font-size: 1.3em;
    font-weight: bold;
    color: #333 !important;
    flex: 1 1 auto;
    margin-bottom: 0;

    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    display: inline-block;
    overflow: hidden;
}

.wf-workers-container .worker-name img {
vertical-align: top;
}

.wf-workers-container .worker-name {
font-size: inherit !important;
    width: 100%;
    /*margin-right: 5px;*/
    margin: 4px 5px 4px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/** Added by shashank2104 on 2026-07-10 - R0-3969 - Static branch-coverage verifier report **/

.wf-branch-coverage-report {
    --bc-bg: var(--d3v-bg-primary, #fff);
    --bc-bg2: var(--d3v-bg-secondary, #f8f9fa);
    --bc-border: var(--d3v-border, #e0e0e0);
    --bc-text: var(--d3v-text-primary, #212121);
    --bc-text2: var(--d3v-text-secondary, #546e7a);
    --bc-muted: var(--d3v-text-muted, #90a4ae);
    --bc-accent: var(--d3v-accent, #4285f4);
    --bc-ok: var(--d3v-status-success, #2e7d32);
    --bc-ok-bg: var(--d3v-status-success-bg, #e8f5e9);
    --bc-warn: var(--d3v-status-danger, #c62828);
    --bc-warn-bg: var(--d3v-status-danger-bg, #fdecea);
    --bc-info: var(--d3v-status-info, #1565c0);
    --bc-info-bg: var(--d3v-status-info-bg, #e3f2fd);
    --bc-r: var(--d3v-r-md, 6px);
    --bc-r-sm: var(--d3v-r-sm, 4px);
    --bc-sh: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    --bc-t: var(--d3v-t-fast, 0.15s ease);
    color: var(--bc-text);
    gap: 14px;
    padding: 16px;
    position: relative; /* anchor for the export toast */
}

/* ── PASS / FAIL banner ─────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--bc-r);
    border: 1px solid var(--bc-border);
    box-shadow: var(--bc-sh);
}
.wf-branch-coverage-report .wf-bc-status > .fa { font-size: 22px; }
.wf-branch-coverage-report .wf-bc-status-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.wf-branch-coverage-report .wf-bc-status-sub {
    font-size: 13px;
    color: var(--bc-text2);
}
.wf-branch-coverage-report .wf-bc-pass {
    background: var(--bc-ok-bg);
    border-color: color-mix(in srgb, var(--bc-ok) 30%, transparent);
}
.wf-branch-coverage-report .wf-bc-pass > .fa,
.wf-branch-coverage-report .wf-bc-pass .wf-bc-status-label { color: var(--bc-ok); }
.wf-branch-coverage-report .wf-bc-fail {
    background: var(--bc-warn-bg);
    border-color: color-mix(in srgb, var(--bc-warn) 30%, transparent);
}
.wf-branch-coverage-report .wf-bc-fail > .fa,
.wf-branch-coverage-report .wf-bc-fail .wf-bc-status-label { color: var(--bc-warn); }

.wf-branch-coverage-report .wf-bc-body { padding-right: 2px; }

/* ── Export actions (R0-3969) ───────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* push the export cluster to the right of the banner */
}
.wf-branch-coverage-report .wf-bc-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bc-text2);
    background: var(--bc-bg);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-r-sm);
    box-shadow: var(--bc-sh);
    cursor: pointer;
    transition: transform var(--bc-t), box-shadow var(--bc-t), border-color var(--bc-t), color var(--bc-t);
}
.wf-branch-coverage-report .wf-bc-export:hover {
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-md, 0 3px 8px rgba(0,0,0,0.12));
    color: var(--bc-text);
}
.wf-branch-coverage-report .wf-bc-export:active { transform: translateY(0); }
.wf-branch-coverage-report .wf-bc-export .fa { font-size: 13px; }
.wf-branch-coverage-report .wf-bc-export-csv:hover {
    border-color: color-mix(in srgb, var(--bc-accent) 40%, var(--bc-border));
    color: var(--bc-accent);
}
.wf-branch-coverage-report .wf-bc-export-xlsx .fa { color: #1d7044; }
.wf-branch-coverage-report .wf-bc-export-xlsx:hover {
    border-color: color-mix(in srgb, #1d7044 45%, var(--bc-border));
    color: #1d7044;
}
.wf-branch-coverage-report .wf-bc-export-loading { opacity: 0.55; pointer-events: none; }

/* ── Export confirmation toast (R0-3969) ────────────────────────────── */
.wf-branch-coverage-report .wf-bc-toast {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 90%;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    border-radius: 999px;
    box-shadow: var(--d3v-sh-lg, 0 6px 20px rgba(0,0,0,0.22));
    z-index: 20;
}
.wf-branch-coverage-report .wf-bc-toast .fa { font-size: 14px; }
.wf-branch-coverage-report .wf-bc-toast-ok { background: var(--bc-ok); }
.wf-branch-coverage-report .wf-bc-toast-warn { background: var(--bc-warn); }

/* ── Summary chips ──────────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.wf-branch-coverage-report .wf-bc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    background: var(--bc-bg2);
    border: 1px solid var(--bc-border);
    border-radius: 999px;
    color: var(--bc-text2);
}
.wf-branch-coverage-report .wf-bc-chip strong { color: var(--bc-text); }
.wf-branch-coverage-report .wf-bc-chip .fa { color: var(--bc-muted); }
.wf-branch-coverage-report .wf-bc-chip-ok .fa { color: var(--bc-ok); }
.wf-branch-coverage-report .wf-bc-chip-info .fa { color: var(--bc-info); }
.wf-branch-coverage-report .wf-bc-chip-warn .fa { color: var(--bc-warn); }

/* ── Per-selector card ──────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-selector {
    background: var(--bc-bg);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-r);
    box-shadow: var(--bc-sh);
    margin-bottom: 16px;
    overflow: hidden;
}
.wf-branch-coverage-report .wf-bc-selector-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bc-bg2);
    border-bottom: 1px solid var(--bc-border);
}
.wf-branch-coverage-report .wf-bc-selector-head .fa { color: var(--bc-accent); }
.wf-branch-coverage-report .wf-bc-selector-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bc-text);
}
.wf-branch-coverage-report .wf-bc-selector-meta {
    font-size: 12px;
    color: var(--bc-muted);
    margin-left: auto;
}

/* ── Option table ───────────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-table {
    margin: 0;
    font-size: 13px;
    table-layout: fixed;
    width: 100%;
}
.wf-branch-coverage-report .wf-bc-table > thead > tr > th {
    background: var(--bc-bg);
    color: var(--bc-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--bc-border);
}
.wf-branch-coverage-report .wf-bc-table > tbody > tr > td {
    vertical-align: top;
    color: var(--bc-text);
    padding: 11px 14px;
    border-top: 1px solid var(--bc-border);
}
.wf-branch-coverage-report .wf-bc-cell-option { font-weight: 500; word-break: break-word; }
.wf-branch-coverage-report .wf-bc-col-status { width: 118px; white-space: nowrap; }
.wf-branch-coverage-report .wf-bc-row-orphan > td { background: var(--bc-warn-bg); }
.wf-branch-coverage-report .wf-bc-row-fallthrough > td { background: var(--bc-info-bg); }

.wf-branch-coverage-report .wf-bc-option-id {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-family: monospace;
    color: var(--bc-text2);
    background: var(--bc-bg2);
    border: 1px solid var(--bc-border);
    border-radius: var(--bc-r-sm);
}
.wf-branch-coverage-report .wf-bc-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bc-muted);
    background: var(--bc-bg2);
    border-radius: var(--bc-r-sm);
}

/* ── Routes-to column (routing-path pills, ancestry style) ──────────── */
.wf-branch-coverage-report .wf-bc-table > thead > tr > th:first-child,
.wf-branch-coverage-report .wf-bc-table > tbody > tr > td:first-child { width: 34%; }
.wf-branch-coverage-report .wf-bc-pillpath {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.wf-branch-coverage-report .wf-bc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--bc-r-sm);
    border: 1px solid var(--bc-border);
    white-space: nowrap;
    transition: box-shadow var(--bc-t), transform var(--bc-t);
}
.wf-branch-coverage-report .wf-bc-pill:hover { box-shadow: var(--bc-sh); transform: translateY(-1px); }
.wf-branch-coverage-report .wf-bc-pill-decision { background: #fff3cd; border-color: #ffeaa7; color: #856404; }
.wf-branch-coverage-report .wf-bc-pill-worker { background: var(--bc-bg2); border-color: var(--bc-border); color: var(--bc-text); }
.wf-branch-coverage-report .wf-bc-pill-default { background: var(--bc-info-bg); border-color: color-mix(in srgb, var(--bc-info) 25%, var(--bc-border)); color: var(--bc-info); }
.wf-branch-coverage-report .wf-bc-pill .fa { font-size: 11px; opacity: 0.85; }
.wf-branch-coverage-report .wf-bc-pill-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wf-branch-coverage-report .wf-bc-pill-label:hover { text-decoration: underline; }
.wf-branch-coverage-report .wf-bc-locate {
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 3px;
    opacity: 0.55;
    transition: opacity var(--bc-t), color var(--bc-t), background var(--bc-t);
}
.wf-branch-coverage-report .wf-bc-locate:hover { opacity: 1; color: var(--bc-accent); background: rgba(0,0,0,0.05); }
.wf-branch-coverage-report .wf-bc-arrow { color: var(--bc-muted); font-size: 11px; margin: 0 1px; }
.wf-branch-coverage-report .wf-bc-route-none {
    font-size: 12px;
    font-style: italic;
    color: var(--bc-warn);
}

/* ── Compact option list (sidebar-friendly, replaces the wide table) ─── */
.wf-branch-coverage-report .wf-bc-optlist { list-style: none; margin: 0; padding: 0; }
.wf-branch-coverage-report .wf-bc-opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bc-border);
    font-size: 13px;
}
.wf-branch-coverage-report .wf-bc-opt:last-child { border-bottom: none; }
.wf-branch-coverage-report .wf-bc-opt-orphan { background: var(--bc-warn-bg); }
.wf-branch-coverage-report .wf-bc-opt-fallthrough { background: var(--bc-info-bg); }
.wf-branch-coverage-report .wf-bc-opt-badge {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 10px;
    margin-top: 1px;
}
.wf-branch-coverage-report .wf-bc-opt-covered .wf-bc-opt-badge { background: var(--bc-ok-bg); color: var(--bc-ok); }
.wf-branch-coverage-report .wf-bc-opt-fallthrough .wf-bc-opt-badge { background: #fff; color: var(--bc-info); }
.wf-branch-coverage-report .wf-bc-opt-orphan .wf-bc-opt-badge { background: #fff; color: var(--bc-warn); }
.wf-branch-coverage-report .wf-bc-opt-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.wf-branch-coverage-report .wf-bc-opt-name { font-weight: 500; color: var(--bc-text); word-break: break-word; }
.wf-branch-coverage-report .wf-bc-opt-orphan .wf-bc-opt-name { color: var(--bc-warn); }
.wf-branch-coverage-report .wf-bc-opt-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.wf-branch-coverage-report .wf-bc-opt-route .wf-bc-arrow { margin-right: 2px; }
.wf-branch-coverage-report .wf-bc-more { font-size: 11px; color: var(--bc-muted); }
.wf-branch-coverage-report .wf-bc-pill { padding: 2px 6px; max-width: 100%; min-width: 0; }
.wf-branch-coverage-report .wf-bc-pill-label { min-width: 0; }
.wf-branch-coverage-report .wf-bc-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ── Coverage badges ────────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
}
.wf-branch-coverage-report .wf-bc-badge-ok { color: var(--bc-ok); background: var(--bc-ok-bg); }
.wf-branch-coverage-report .wf-bc-badge-info { color: var(--bc-info); background: var(--bc-info-bg); }
.wf-branch-coverage-report .wf-bc-badge-warn { color: var(--bc-warn); background: var(--bc-warn-bg); }

/* ── Stale gates ────────────────────────────────────────────────────── */
.wf-branch-coverage-report .wf-bc-stale {
    padding: 12px 16px;
    border-top: 1px solid var(--bc-border);
    background: var(--bc-warn-bg);
}
.wf-branch-coverage-report .wf-bc-stale-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--bc-warn);
    margin-bottom: 6px;
}
.wf-branch-coverage-report .wf-bc-stale-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--bc-text);
}
.wf-branch-coverage-report .wf-bc-stale-list li { margin-bottom: 3px; }
.wf-branch-coverage-report .wf-bc-stale-list a { color: var(--bc-accent); }

/*
 * CSS for template: wf-settings-tpl-old.tpl
 * Source: javascripts/templates/modular/common/partials/wf-settings-tpl-old.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-execution-node-side-panel.in {
opacity: 1 !important;
    right: 0 !important;
}

div.wf-execution-node-side-panel.in {
opacity: 1 !important;
    right: 0 !important;
}

div.wf-execution-node-side-panel.in {
opacity: 1 !important;
    right: 0 !important;
}



/*
 * CSS for template: wf-settings-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-settings-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu {
width: 400px;
    font-size: 11px;
    top: 31px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after,
div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    right: 1px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after {
border-width: 0 7px 7px 7px;
    border-color: transparent transparent #F5F5F5 transparent;
    top: -6px;
    right: 2px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #DDD transparent;
    top: -8px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .nav-pills li>a {
padding: 5px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row {
margin: 0 !important;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row:last-child {
border: none;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu {
width: 400px;
    font-size: 11px;
    top: 31px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after,
div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    right: 1px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after {
border-width: 0 7px 7px 7px;
    border-color: transparent transparent #F5F5F5 transparent;
    top: -6px;
    right: 2px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #DDD transparent;
    top: -8px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .nav-pills li>a {
padding: 5px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row {
margin: 0 !important;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row:last-child {
border: none;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu {
width: 400px;
    font-size: 11px;
    top: 31px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after,
div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    right: 1px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:after {
border-width: 0 7px 7px 7px;
    border-color: transparent transparent #F5F5F5 transparent;
    top: -6px;
    right: 2px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu:before {
border-width: 0 8px 8px 8px;
    border-color: transparent transparent #DDD transparent;
    top: -8px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .nav-pills li>a {
padding: 5px;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row {
margin: 0 !important;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

div.workflow div.flow-container .wf-header .wf-settings .dropdown-menu .tab-content .tab-pane>.row:last-child {
border: none;
}



/* R0-3807 - Files => Library / My Workflows simple list panel. Scoped, token-based styling for the
   wf-simple-workflow-list template (the panel was empty because its templates were missing). */
.wf-simple-workflow-list {
    background: var(--d3v-bg-secondary, #f7f8fa);
}
.wf-simple-workflow-list .swl-toolbar {
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e6e9ee);
    background: var(--d3v-bg-primary, #fff);
}
.wf-simple-workflow-list .swl-search {
    position: relative;
}
.wf-simple-workflow-list .swl-search .fa-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d3v-text-muted, #9aa3ad);
    pointer-events: none;
}
.wf-simple-workflow-list .swl-q {
    padding-left: 30px;
    width: 100%;
    border-radius: var(--d3v-r-md, 8px);
}
.wf-simple-workflow-list .swl-meta {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--d3v-text-muted, #7a828c);
}
.wf-simple-workflow-list .swl-list {
    padding: 6px 8px;
}
.wf-simple-workflow-list .swl-row {
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #eceff3);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.wf-simple-workflow-list .swl-row:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    border-color: var(--d3v-accent, #2c5282);
}
.wf-simple-workflow-list .swl-row-main {
    min-width: 0;
}
.wf-simple-workflow-list .swl-row-title {
    font-weight: 600;
    color: var(--d3v-text-primary, #2b2b2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-simple-workflow-list .swl-agent-ic {
    color: var(--d3v-accent, #2c5282);
    margin-right: 5px;
}
.wf-simple-workflow-list .swl-row-sub {
    font-size: 11px;
    color: var(--d3v-text-muted, #9aa3ad);
    margin-top: 3px;
}
.wf-simple-workflow-list .swl-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #eef1f5);
    color: var(--d3v-text-secondary, #5a6470);
}
.wf-simple-workflow-list .swl-upd {
    margin-left: 8px;
}
.wf-simple-workflow-list .swl-row-actions {
    gap: 4px;
}
.wf-simple-workflow-list .swl-row-actions .btn {
    transition: background 0.15s ease, color 0.15s ease;
}

/*
 * CSS for template: wf-sl-layout-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-sl-layout-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-sl-layout .ui-draggable-dragging {
z-index: 20 !important;
    cursor: move;
}

div.wf-sl-layout .ui-draggable-dragging>* {
pointer-events: none;
}

div.wf-sl-layout a[data-toggle="collapse"] .fa-caret-right {
margin-right: 3px;
    transition: transform 0.3s ease-in;
}

div.wf-sl-layout a[data-toggle="collapse"][aria-expanded="true"] .fa-caret-right {
transform: rotate(90deg);
}

div.wf-sl-layout .inputsList .panel-collapse ul.list-group,
div.wf-sl-layout .inputsList .panel-collapse ul.list-group li.list-group-item {
border: none;
}

.sl-reporter-configs .data-filters-body,
.wf-sl-layout .sl-generic-settings .data-filters-body {
padding: 0 !important;
}

.wf-sl-layout .droppable {
transition: background-color 0.2s ease-in;
}

.wf-sl-layout .drop-map {
cursor: pointer;
}

.wf-sl-layout .drop-map:hover .label {
background-color: var(--plugin-primary-color);
}

.wf-sl-layout .droppable.drop-start,
.wf-sl-layout .pl-droppable.drop-start,
.wf-sl-layout .drop-start {
background-color: var(--d3neutralLighterAlt);
}

.wf-sl-layout .viz-params div.form-group.hovered div.select2-container ul.select2-choices,
.wf-sl-layout .viz-params div.form-group.hovered div.select2-container a.select2-choice,
.wf-sl-layout .viz-params div.form-group.hovered div.ms-dd-toggle {
background: #e6ffe6 !important;
}

.wf-sl-layout .page-panel,
.wf-sl-layout .vis-panel {
padding: 10px;
    border: 1px solid #DDD;
    transition: border-color 0.2s ease-in;
    margin-bottom: 10px;
    position: relative;
}

.wf-sl-layout .page-panel {
padding: 30px 10px
}

.wf-sl-layout .page-panel.active,
.wf-sl-layout .vis-panel.active {
border-color: var(--plugin-primary-color);
}

.wf-sl-layout .vis-item {
width: calc(100% / 5);
    height: 75px;
    border: 1px solid #DDD;
    margin: 7px;
    text-align: center;
}

.wf-sl-layout .vis-item {

}

.wf-sl-layout .ui-layout-container .ui-layout-west {
background-color: transparent !important;
    box-shadow: none !important;
}

.wf-sl-layout .droppable input,
.wf-sl-layout .droppable .plugin-bs-select button,
.wf-sl-layout .droppable {
transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
}

.wf-sl-layout .droppable.hovered input,
.wf-sl-layout .droppable.hovered button,
.wf-sl-layout .droppable.hovered {
background: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.wf-sl-layout .gi-body>.tab-content {
padding: 0 !important;
}

.wf-sl-layout .ui-layout-container>div.ui-layout-pane {
height: 100% !important;
    padding: 10px !important;
    border: none !important;
    border-right: 1px solid #DDD !important;
    background: unset !important;
}

.wf-sl-layout .ui-layout-container>div.ui-layout-pane:last-child {
border-right: none !important;
}

.wf-sl-layout .generic-input-template {
padding: 0;
}

.wf-sl-layout ul.pager.gi-pager {
font-size: 2em;
    margin: 10px;
}

.wf-sl-layout .ui-layout-resizer:hover {
background-color: #428bca !important;
}

.wf-sl-layout .sl-kpi-targets .data-filters-body {
padding: 0 !important;
}

.wf-sl-layout .ds-dropzone {
border-width: 3px;
}

.wf-sl-layout .ds-dropzone:hover {
background: #f5f5f5;
}

.wf-sl-layout .ds-dropzone:after {
content: 'Drop file here or click to upload';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 2em;
    transform: translate(-50%, -50%);
    color: dimgray;
}

.wf-sl-layout .grouped-layout.showVizPreview .reporter-options-preview {
display: block !important;
    width: 40%;
    float: left;
}

.wf-sl-layout .grouped-layout.showVizPreview .reporter-default-options {
flex: 1 1 auto;
    /* margin-right: 50px; */
    width: 60%;
    /*transition: width 0.4s ease-in;*/
    float: left;
}

.wf-sl-layout .grouped-layout .reporter-default-options {
width: 100%;
}

div.wf-sl-layout .ui-draggable-dragging {
z-index: 20 !important;
    cursor: move;
}

div.wf-sl-layout .ui-draggable-dragging>* {
pointer-events: none;
}

div.wf-sl-layout a[data-toggle="collapse"] .fa-caret-right {
margin-right: 3px;
    transition: transform 0.3s ease-in;
}

div.wf-sl-layout a[data-toggle="collapse"][aria-expanded="true"] .fa-caret-right {
transform: rotate(90deg);
}

div.wf-sl-layout .inputsList .panel-collapse ul.list-group,
div.wf-sl-layout .inputsList .panel-collapse ul.list-group li.list-group-item {
border: none;
}

.sl-reporter-configs .data-filters-body,
.wf-sl-layout .sl-generic-settings .data-filters-body {
padding: 0 !important;
}

.wf-sl-layout .droppable {
transition: background-color 0.2s ease-in;
}

.wf-sl-layout .drop-map {
cursor: pointer;
}

.wf-sl-layout .drop-map:hover .label {
background-color: var(--plugin-primary-color);
}

.wf-sl-layout .droppable.drop-start,
.wf-sl-layout .pl-droppable.drop-start,
.wf-sl-layout .drop-start {
background-color: var(--d3neutralLighterAlt);
}

.wf-sl-layout .viz-params div.form-group.hovered div.select2-container ul.select2-choices,
.wf-sl-layout .viz-params div.form-group.hovered div.select2-container a.select2-choice,
.wf-sl-layout .viz-params div.form-group.hovered div.ms-dd-toggle {
background: #e6ffe6 !important;
}

.wf-sl-layout .page-panel,
.wf-sl-layout .vis-panel {
padding: 10px;
    border: 1px solid #DDD;
    transition: border-color 0.2s ease-in;
    margin-bottom: 10px;
    position: relative;
}

.wf-sl-layout .page-panel {
padding: 30px 10px
}

.wf-sl-layout .page-panel.active,
.wf-sl-layout .vis-panel.active {
border-color: var(--plugin-primary-color);
}

.wf-sl-layout .vis-item {
width: calc(100% / 5);
    height: 75px;
    border: 1px solid #DDD;
    margin: 7px;
    text-align: center;
}

.wf-sl-layout .vis-item {

}

.wf-sl-layout .ui-layout-container .ui-layout-west {
background-color: transparent !important;
    box-shadow: none !important;
}

.wf-sl-layout .droppable input,
.wf-sl-layout .droppable .plugin-bs-select button,
.wf-sl-layout .droppable {
transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
}

.wf-sl-layout .droppable.hovered input,
.wf-sl-layout .droppable.hovered button,
.wf-sl-layout .droppable.hovered {
background: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.wf-sl-layout .gi-body>.tab-content {
padding: 0 !important;
}

.wf-sl-layout .ui-layout-container>div.ui-layout-pane {
height: 100% !important;
    padding: 10px !important;
    border: none !important;
    border-right: 1px solid #DDD !important;
    background: unset !important;
}

.wf-sl-layout .ui-layout-container>div.ui-layout-pane:last-child {
border-right: none !important;
}

.wf-sl-layout .generic-input-template {
padding: 0;
}

.wf-sl-layout ul.pager.gi-pager {
font-size: 2em;
    margin: 10px;
}

.wf-sl-layout .ui-layout-resizer:hover {
background-color: #428bca !important;
}

.wf-sl-layout .sl-kpi-targets .data-filters-body {
padding: 0 !important;
}

.wf-sl-layout .ds-dropzone {
border-width: 3px;
}

.wf-sl-layout .ds-dropzone:hover {
background: #f5f5f5;
}

.wf-sl-layout .ds-dropzone:after {
content: 'Drop file here or click to upload';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 2em;
    transform: translate(-50%, -50%);
    color: dimgray;
}

.wf-sl-layout .grouped-layout.showVizPreview .reporter-options-preview {
display: block !important;
    width: 40%;
    float: left;
}

.wf-sl-layout .grouped-layout.showVizPreview .reporter-default-options {
flex: 1 1 auto;
    /* margin-right: 50px; */
    width: 60%;
    /*transition: width 0.4s ease-in;*/
    float: left;
}

.wf-sl-layout .grouped-layout .reporter-default-options {
width: 100%;
}



/*
 * CSS for template: wf-summary-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-summary-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-summary-header,
.wf-summary-footer {
height: 120px;
}

.wf-summary-header .card,
.wf-summary-footer .card {
flex: 1 1 calc(33% - 16px);
    height: 100px;
    margin-bottom: 0;
}

.wf-summary-header .card:not([data-header-type="configure"]) {
cursor: pointer;
}

.wf-summary-header .card:not([data-header-type="configure"]):hover {
background-color: #f5f5f5;
}

.wf-summary .execute_wf .exec-rect {
width: 0;
    transition: width 0.3s linear;
    position: absolute;
    background-color: lightgreen;
    pointer-events: none;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 0;
}

.wf-summary section .table-view {
width: 100%;
}

.wf-summary .wf-workers-dd .worker-panel {

}

.wf-summary .wf-iterators-list li.list-group-item.it-panel.selected {
background-color: #d3f4ff73;
}

.wf-summary-container {
/*background: var(--d3neutralLighterAlt);*/
    position: relative;
}

.wf-summary-container.scrolling .wf-summary-header {
position: absolute;
    left: 0;
    width: 100%;
    background: #FFF;
    top: -5px;
    z-index: 2;
}



/*
 * CSS for template: wf-user-inspection-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-user-inspection-tpl.tpl
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip.wf-user-inspection {
padding: 15px;
    pointer-events: all;
    z-index: 1050;
}

div#wf-execute-workflow-node-modal li.field-item.user-inspection {
background: lightyellow !important;
}

body span.wf-canvas-tooltip.wf-user-inspection {
padding: 15px;
    pointer-events: all;
    z-index: 1050;
}

div#wf-execute-workflow-node-modal li.field-item.user-inspection {
background: lightyellow !important;
}

body span.wf-canvas-tooltip.wf-user-inspection {
padding: 15px;
    pointer-events: all;
    z-index: 1050;
}

div#wf-execute-workflow-node-modal li.field-item.user-inspection {
background: lightyellow !important;
}



/*
 * CSS for template: wf-worker-io-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-worker-io-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-worker-io ul.list-group {
box-shadow: none;
    height: calc(100% - 70px);
    overflow: auto;
}

.wf-worker-io li.list-group-item {
border: none;
}

.wf-worker-io [data-input] {
cursor: move;
    margin: 10px 10px 10px 0;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lightest);
    transition: background-color 0.2s ease-in;
}

.wf-worker-io [data-input].fulfilled {
background: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.wf-worker-io [data-input].pl-droppable {
cursor: default;
}

.wf-worker-io [data-input]:hover {
background-color: var(--d3neutralLighterAlt);
}

.wf-worker-io [data-input]:not(.pl-droppable):hover:after {
content: '\f58e';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: darkgrey;
}

.wf-worker-io ul.list-group {
box-shadow: none;
    height: calc(100% - 70px);
    overflow: auto;
}

.wf-worker-io li.list-group-item {
border: none;
}

.wf-worker-io li.list-group-item.mapped:after {
content: '\f058';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 10px;
    color: green;
    font-size: 1.2em;
}

.wf-worker-io [data-input] {
cursor: move;
    margin: 10px 10px 10px 0;
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
    box-shadow: var(--plugin-box-shadow-lightest);
    transition: background-color 0.2s ease-in;
}

.wf-worker-io [data-input].fulfilled {
background: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}

.wf-worker-io [data-input].pl-droppable {
cursor: default;
}

.wf-worker-io [data-input]:hover {
background-color: var(--d3neutralLighterAlt);
}

.wf-worker-io [data-input]:not(.pl-droppable):hover:after {
content: '\f58e';
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: darkgrey;
}



/*
 * CSS for template: wf-worker-tooltip-tpl.tpl
 * Source: javascripts/templates/modular/common/partials/wf-worker-tooltip-tpl.tpl
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip,
div.workflow .wf-exec-message,
div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip,
div.workflow .wf-node-info {
/*position: fixed;*/
    position: absolute;
    padding: 15px;
    /*background: #eee!important;*/
    color: inherit;
    z-index: 12;
    pointer-events: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 500px;
    word-break: break-word;
    top: 0;
    left: 0;
    cursor: default;

    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-duration: 0.7s;
    overflow: visible !important;
}

div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip {
pointer-events: all;
    transition: opacity 0.3 ease-in;
}

div.workflow[data-in-modal="false"] .wf-canvas-tooltip,
div.workflow[data-in-modal="false"] .wf-worker-tooltip,
div.workflow[data-in-modal="false"] .node-quick-buttons {
position: absolute !important;
    ;
}

body span.wf-canvas-tooltip,
div.workflow .wf-exec-message,
div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip,
div.workflow .wf-node-info {
position: fixed;
    padding: 15px;
    /*background: #eee!important;*/
    color: inherit;
    z-index: 12;
    pointer-events: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 500px;
    word-break: break-word;
    top: 0;
    left: 0;
    cursor: default;

    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-duration: 0.7s;
    overflow: visible !important;
}

div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip {
pointer-events: all;
    transition: opacity 0.3 ease-in;
}

div.workflow[data-in-modal="false"] .wf-canvas-tooltip,
div.workflow[data-in-modal="false"] .wf-worker-tooltip,
div.workflow[data-in-modal="false"] .node-quick-buttons {
position: absolute !important;
    ;
}

body span.wf-canvas-tooltip,
div.workflow .wf-exec-message,
div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip,
div.workflow .node-quick-buttons,
div.workflow .wf-floating-div {
position: absolute;
    padding: 15px;
    /*background: #eee!important;*/
    color: inherit;
    z-index: 12;
    pointer-events: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    max-width: 500px;
    word-break: break-word;
    top: 0;
    left: 0;
    cursor: default;

    background: #FFF;
    border-radius: 5px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-duration: 0.7s;
    overflow: visible !important;
}

div.workflow .wf-decision-tooltip,
div.workflow .wf-worker-tooltip {
pointer-events: all;
    transition: opacity 0.3 ease-in;
}

div.workflow[data-in-modal="false"] span.wf-canvas-tooltip,
div.workflow[data-in-modal="false"] .wf-exec-message,
div.workflow[data-in-modal="false"] .wf-decision-tooltip,
div.workflow[data-in-modal="false"] .wf-worker-tooltip,
div.workflow[data-in-modal="false"] .wf-floating-div {
position: absolute;
}

/** Added by shashank2104 on 07/15/2026 - R2026-39 - the canvas execution info box and the current-worker
 * map marker are positioned with transform, so they glide to their worker instead of jumping. Scoped to
 * .chart-view: the same .wf-exec-message markup is reused inside the flow-modal execution view, which must
 * not pick this up. Specificity is deliberate - it has to outrank the .wf-design-modern opacity transition,
 * which is concatenated later, so opacity is restated here. **/
div.workflow .chart-view .wf-exec-message[data-id],
body.wf-design-modern .chart-view .wf-exec-message[data-id],
div.workflow div.wf-main-container div.chart-view .wf-pointer-marker,
div.workflow .wf-floating-div.clickable.wf-polling-tooltip {
    transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

/* transform is the only positioning transport, so these boxes must sit at the container origin */
div.workflow div.wf-main-container div.chart-view .wf-pointer-marker,
div.workflow .wf-floating-div.clickable.wf-polling-tooltip {
    left: 0;
    top: 0;
}

/* During a zoom/pan gesture these are rewritten every frame - a transition would make them lag behind the canvas. */
div.workflow .chart-view.wf-zooming .wf-exec-message[data-id],
body.wf-design-modern .chart-view.wf-zooming .wf-exec-message[data-id],
div.workflow div.wf-main-container div.chart-view.wf-zooming .wf-pointer-marker,
div.workflow .chart-view.wf-zooming .wf-floating-div.clickable.wf-polling-tooltip {
    transition: none;
    will-change: transform;
}

/* First placement: a fresh element has no transform, which the browser reads as translate(0,0) - without
   this it would animate in from the canvas origin (the top-left fly-in). Land the transform silently... */
div.workflow .chart-view .wf-exec-message[data-id].wf-overlay-placing,
body.wf-design-modern .chart-view .wf-exec-message[data-id].wf-overlay-placing,
div.workflow div.wf-main-container div.chart-view .wf-pointer-marker.wf-overlay-placing,
div.workflow .wf-floating-div.clickable.wf-polling-tooltip.wf-overlay-placing {
    transition: none;
}

/* ...then fade it in on the spot. */
div.workflow .chart-view .wf-exec-message[data-id].wf-overlay-appear,
body.wf-design-modern .chart-view .wf-exec-message[data-id].wf-overlay-appear,
div.workflow div.wf-main-container div.chart-view .wf-pointer-marker.wf-overlay-appear,
div.workflow .wf-floating-div.clickable.wf-polling-tooltip.wf-overlay-appear {
    opacity: 0;
}

/** Added by shashank2104 on 07/15/2026 - R2026-39 - the polling panel has three states, decided by how
 * much room is left beside its worker: the full panel, this compact one, or hidden. It is never dragged
 * back into bounds - that used to clamp the full panel against the edge and cut its own buttons off.
 * Compact keeps what you need to read the run and act on it, and drops the rest. **/
div.workflow .wf-floating-div.clickable.wf-polling-tooltip.wf-polling-compact {
    width: 300px;
}

/* secondary chrome: the header actions and the summary line */
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-status-header .btn-group,
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-subtitle {
    display: none;
}

/* the Elapsed + Action columns - the per-row drill-in links do not fit and are not the point here */
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-status-table thead th:nth-child(3),
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-status-table thead th:nth-child(4),
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-status-table tbody td:nth-child(3),
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-status-table tbody td:nth-child(4) {
    display: none;
}

div.workflow .wf-polling-tooltip.wf-polling-compact .polling-title {
    font-size: 16px;
}

/* stack the controls - justified buttons in 300px would squeeze their labels to nothing */
div.workflow .wf-polling-tooltip.wf-polling-compact .polling-control-buttons .btn-group-justified {
    display: block;
}

div.workflow .wf-polling-tooltip.wf-polling-compact .polling-control-buttons .btn-group-justified > .btn {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    border-radius: var(--d3v-r-md, 4px);
}

/* Not even room for the compact panel, or the worker is off screen entirely. Only the polling panel
   needs this: the exec box and the marker are anchored outright, so they just leave with their worker. */
div.workflow .wf-floating-div.clickable.wf-polling-tooltip.wf-overlay-offscreen {
    display: none;
}



/*
 * CSS for template: wf-exec-progress-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/wf-exec-progress-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .execution-controls .progress {
width: 225px;
}

div#wf-execute-workflow-node-modal .execution-controls .progress {
width: 225px;
}



/*
 * CSS for template: wf-execute-workflow-node-side-panel.tpl
 * Source: javascripts/templates/modular/execution/components/wf-execute-workflow-node-side-panel.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow [data-mode="execute"] #left_toggle {
display: flex;
    position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid {
border-left: 3px solid #5cb85c;
}

div.workflow div.wf-main-container .play-controls .wf-execute.invalid {
border-left: 3px solid #b92c28;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid_with_missing {
border-left: 3px solid #f0ad4e;
}

div.workflow div.wf-main-container .play-controls .wf-execute[data-id="pause"] {
cursor: default;
    opacity: 0.5;
}

div.wf-execution-node-side-panel {
position: fixed;
    height: 100%;
    right: -500px;
    top: 0;
    width: 500px;
    z-index: 1051;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;

    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

div.workflow .canvas-controls:not(.execute) .btn-group.zoom {
/*top: 40px;*/
    /*right: 3px;*/
    /*position: absolute;*/
}

div.workflow div.vizcontainer div.logs_container.side-panel {
width: 0;
    position: absolute;
    right: 0;
    top: 2px;
    -webkit-transition: width 0.7s;
    -moz-transition: width 0.7s;
    -ms-transition: width 0.7s;
    -o-transition: width 0.7s;
    transition: width 0.7s;
    border: 1px solid #ccc;
    background: #ffffee;
}

div.workflow-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    cursor: pointer;
    /*flex: 1 1 auto;*/
}

div.workflow-modal .modal-body div.flex-container div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div.workflow-modal .modal-body div.flex-container div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-title {
font-size: 13px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    /*flex: 1 1 auto;*/
    cursor: pointer;
}

div#wf-add-nodes-flex-modal .modal-body div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-title {
font-size: 13px;
}

div.workflow [data-mode="execute"] #left_toggle {
display: flex;
    position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid {
border-left: 3px solid #5cb85c;
}

div.workflow div.wf-main-container .play-controls .wf-execute.invalid {
border-left: 3px solid #b92c28;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid_with_missing {
border-left: 3px solid #f0ad4e;
}

div.workflow div.wf-main-container .play-controls .wf-execute[data-id="pause"] {
cursor: default;
    opacity: 0.5;
}

div.wf-execution-node-side-panel {
position: fixed;
    height: 100%;
    right: -500px;
    top: 0;
    width: 500px;
    z-index: 1051;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;

    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

div.workflow .canvas-controls:not(.execute) .btn-group.zoom {
/*top: 40px;*/
    /*right: 3px;*/
    /*position: absolute;*/
}

div.workflow div.vizcontainer div.logs_container.side-panel {
width: 0;
    position: absolute;
    right: 0;
    top: 2px;
    -webkit-transition: width 0.7s;
    -moz-transition: width 0.7s;
    -ms-transition: width 0.7s;
    -o-transition: width 0.7s;
    transition: width 0.7s;
    border: 1px solid #ccc;
    background: #ffffee;
}

div.workflow-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    cursor: pointer;
    /*flex: 1 1 auto;*/
}

div.workflow-modal .modal-body div.flex-container div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div.workflow-modal .modal-body div.flex-container div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-title {
font-size: 13px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    /*flex: 1 1 auto;*/
    cursor: pointer;
}

div#wf-add-nodes-flex-modal .modal-body div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-title {
font-size: 13px;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown.open>.wf-execute {
border-radius: 4px !important;
    border: 1px solid #ddd !important;
    background-color: #eee !important;
}

div.workflow .workflow-index .basic-view-container .basic-inputs-view>.panel,
div.workflow .workflow-index .basic-view-container .ui-layout-center .panel {
margin-bottom: 0;
}

div.workflow [data-mode="execute"] #left_toggle {
display: flex;
    position: absolute;
    left: 15px;
    top: 12px;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid {
border-left: 3px solid #5cb85c;
}

div.workflow div.wf-main-container .play-controls .wf-execute.invalid {
border-left: 3px solid #b92c28;
}

div.workflow div.wf-main-container .play-controls .wf-execute.valid_with_missing {
border-left: 3px solid #f0ad4e;
}

div.workflow div.wf-main-container .play-controls .wf-execute[data-id="pause"] {
cursor: default;
    opacity: 0.5;
}

div.wf-execution-node-side-panel {
position: fixed;
    height: 100%;
    right: -500px;
    top: 0;
    width: 500px;
    z-index: 1051;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;

    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

div.workflow .canvas-controls:not(.execute) .btn-group.zoom {
/*top: 40px;*/
    /*right: 3px;*/
    /*position: absolute;*/
}

div.workflow div.vizcontainer div.logs_container.side-panel {
width: 0;
    position: absolute;
    right: 0;
    top: 2px;
    -webkit-transition: width 0.7s;
    -moz-transition: width 0.7s;
    -ms-transition: width 0.7s;
    -o-transition: width 0.7s;
    transition: width 0.7s;
    border: 1px solid #ccc;
    background: #ffffee;
}

div.workflow-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    cursor: pointer;
    /*flex: 1 1 auto;*/
}

div.workflow-modal .modal-body div.flex-container div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div.workflow-modal .modal-body div.flex-container div.panel.selected .panel-heading:after {
content: '\f058';
    font-family: FontAwesome, sans-serif;
    position: absolute;
    right: 10px;
    top: 5px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-title {
font-size: 13px;
}

div.workflow-modal .modal-body div.flex-container div.panel .panel-heading {
padding: 5px;
    cursor: pointer;
    background-image: none;
    position: relative;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container .panel {
width: 31.33333333%;
    margin: 5px;
    /*flex: 1 1 auto;*/
    cursor: pointer;
}

div#wf-add-nodes-flex-modal .modal-body div.panel.selected {
border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    background-color: transparent;
}

div#wf-add-nodes-flex-modal .modal-body div.panel .panel-title {
font-size: 13px;
}

div.workflow div.wf-main-container .floating-execution-controls .play-controls .dropdown.open>.wf-execute {
border-radius: 4px !important;
    border: 1px solid #ddd !important;
    background-color: #eee !important;
}

div.workflow .workflow-index .basic-view-container .basic-inputs-view>.panel,
div.workflow .workflow-index .basic-view-container .ui-layout-center .panel {
margin-bottom: 0;
}



/*
 * CSS for template: wf-execution-reporter-view-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/wf-execution-reporter-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected {
color: #FFF !important;
    background-color: #428BCA !important;
    text-shadow: none;
    border-color: #ddd;
}

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected>a {
color: #FFF !important;
}

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected {
color: #FFF !important;
    background-color: #428BCA !important;
    text-shadow: none;
    border-color: #ddd;
}

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected>a {
color: #FFF !important;
}

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected {
color: #FFF !important;
    background-color: #428BCA !important;
    text-shadow: none;
    border-color: #ddd;
}

div#wf-execution-reporter-view-modal .modal-body .wf_list ul.list-group>li.list-group-item.ui-selected>a {
color: #FFF !important;
}



/*
 * CSS for template: wf-flow-modal-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/wf-flow-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-carousel div.flow-header>span {
margin: 0 8px;
    font-size: 2em;
    cursor: not-allowed;
    opacity: 0.4;
    color: #777;
}

div.wf-carousel div.flow-header>span.shown {
color: #333;
    opacity: 1 !important;
    cursor: pointer;
}

div.wf-carousel div.flow-header>span.shown:hover {
color: red;
}

div.wf-carousel div.flow-header ul.workers-nav {
flex: 1 1 auto;
    display: flex;
}

div.wf-carousel div.flow-header ul.workers-nav>li {
flex: 1 1 auto;
    text-align: center;
    margin: 0 20px;
    background: #f5f5f5;
}

div.wf-carousel div.flow-header ul.workers-nav>li>a {
color: #333;
}

div.wf-carousel div.flow-header ul.workers-nav>li.disabled>a {
color: #777 !important;
}

div.wf-carousel div.flow-body {
border: 1px solid #efefef;
    margin: 10px 15px;
}

.wf-flow-modal-execution .d3view-inputsBuilder ul.field-items li.field-item>.row>div.input-name {
padding: 10px 6px;
    margin-bottom: 5px;
}

.wf-flow-modal-execution .d3view-inputsBuilder ul.field-items li.field-item>.row {
/*padding: 12px 0;*/
}

div.wf-carousel div.flow-header>span {
margin: 0 8px;
    font-size: 2em;
    cursor: not-allowed;
    opacity: 0.4;
    color: #777;
}

div.wf-carousel div.flow-header>span.shown {
color: #333;
    opacity: 1 !important;
    cursor: pointer;
}

div.wf-carousel div.flow-header>span.shown:hover {
color: red;
}

div.wf-carousel div.flow-header ul.workers-nav {
flex: 1 1 auto;
    display: flex;
}

div.wf-carousel div.flow-header ul.workers-nav>li {
flex: 1 1 auto;
    text-align: center;
    margin: 0 20px;
    background: #f5f5f5;
}

div.wf-carousel div.flow-header ul.workers-nav>li>a {
color: #333;
}

div.wf-carousel div.flow-header ul.workers-nav>li.disabled>a {
color: #777 !important;
}

div.wf-carousel div.flow-body {
border: 1px solid #efefef;
    margin: 10px 15px;
}

.wf-flow-modal-execution .wf-flow-modal-top .wf-status pre {
display: none;
}

div.workflow .d3view-wf-flow-modal .wf-status-progress .wf-exec-message[data-viewtype="progressbar"],
.wf-flow-modal-execution .wf-flow-modal-body .wf-status-progress .wf-exec-message[data-viewtype="progressbar"] {
position: relative;
    background: none;
    border: none;
    max-width: unset;
    display: flex;
    justify-content: center;
}

div.workflow .d3view-wf-flow-modal .wf-status-progress .wf-exec-message[data-viewtype="progressbar"] .close,
.wf-flow-modal-execution .wf-flow-modal-body .wf-status-progress .wf-exec-message[data-viewtype="progressbar"] .close {
display: none;
}



/*
 * CSS for template: wf-text-preview-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/wf-text-preview-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-full-view .wf-workers-container .workers_wizard,
.wf-workers-full-view .wf-workers-container [data-id="preview"] {
display: none !important;
}

div.workflow-modal li.field-item div.text-preview .preview-ace {
height: 150px;
}

.wf-workers-full-view .wf-workers-container .workers_wizard,
.wf-workers-full-view .wf-workers-container [data-id="preview"] {
display: none !important;
}

div.workflow-modal li.field-item div.text-preview .preview-ace {
height: 150px;
}

div.workflow-modal div[data-full-outputs="true"] .worker-output-preview.dataset-preview,
div.workflow-modal div[data-full-outputs="true"] li.field-item div.text-preview .preview-ace,
div.workflow-modal div[data-full-outputs="true"] li.field-item .define_table-preview,
div.workflow-modal div[data-full-outputs="true"] li.field-item .curve-sparkline,
div.workflow-modal div[data-full-outputs="true"] li.field-item .kv-preview {
height: 300px !important;
}



/*
 * CSS for template: wf-user-inspection-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/wf-user-inspection-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-user-inspection-container .modal-body {
padding: 0;
}

div.wf-user-inspection-container .modal-body .user-msg {
font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #DDD;
}

div.wf-user-inspection-container .modal-body>.row {
display: flex;
    padding: 2px;
}

div.wf-user-inspection-container .modal-body #node-inputs {
border-right: 1px solid #DDD;
}

div.wf-user-inspection-container .modal-body {
padding: 0;
}

div.wf-user-inspection-container .modal-body .user-msg {
font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #DDD;
}

div.wf-user-inspection-container .modal-body>.row {
display: flex;
    padding: 2px;
}

div.wf-user-inspection-container .modal-body #node-inputs {
border-right: 1px solid #DDD;
}

div.wf-user-inspection-container .modal-body {
padding: 0;
}

div.wf-user-inspection-container .modal-body .user-msg {
font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #DDD;
}

div.wf-user-inspection-container .modal-body>.row {
display: flex;
    padding: 2px;
}

div.wf-user-inspection-container .modal-body #node-inputs {
border-right: 1px solid #DDD;
}



/*
 * CSS for template: workflow-execution-keyboard-shortcuts-tpl.tpl
 * Source: javascripts/templates/modular/execution/components/workflow-execution-keyboard-shortcuts-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-keyboard-shortcuts {
left: 150px;
    top: 120px;
    border: 1px solid #DDD;
    /*background-color: #4f5359;*/
    /*color: #FFF;*/
    position: fixed;
    /*right: 150px;*/
    /*top: 50px;*/
    z-index: 1050;
    width: 200px;
}

div.workflow-keyboard-shortcuts .close_box {
cursor: pointer;
}

div.workflow-keyboard-shortcuts .close_box:hover {
color: red;
}

div.workflow-keyboard-shortcuts ul {
/*background-color: #4f5359;*/
    /*color: #FFF;*/
    border: none;
}

div.workflow-keyboard-shortcuts ul li {
padding: 3px 0;
}

div.workflow-keyboard-shortcuts {
left: 150px;
    top: 120px;
    border: 1px solid #DDD;
    /*background-color: #4f5359;*/
    /*color: #FFF;*/
    position: fixed;
    /*right: 150px;*/
    /*top: 50px;*/
    z-index: 1050;
    width: 200px;
}

div.workflow-keyboard-shortcuts .close_box {
cursor: pointer;
}

div.workflow-keyboard-shortcuts .close_box:hover {
color: red;
}

div.workflow-keyboard-shortcuts ul {
/*background-color: #4f5359;*/
    /*color: #FFF;*/
    border: none;
}

div.workflow-keyboard-shortcuts ul li {
padding: 3px 0;
}

div.workflow-keyboard-shortcuts {
left: 150px;
    top: 120px;
    border: 1px solid #DDD;
    /*background-color: #4f5359;*/
    /*color: #FFF;*/
    position: fixed;
    /*right: 150px;*/
    /*top: 50px;*/
    z-index: 1050;
    width: 200px;
}

div.workflow-keyboard-shortcuts .close_box {
cursor: pointer;
}

div.workflow-keyboard-shortcuts .close_box:hover {
color: red;
}

div.workflow-keyboard-shortcuts ul {
/*background-color: #4f5359;*/
    /*color: #FFF;*/
    border: none;
}

div.workflow-keyboard-shortcuts ul li {
padding: 3px 0;
}



/*
 * CSS for template: wf-execution-worker-grouped-inputs-tpl.tpl
 * Source: javascripts/templates/modular/execution/inputs/wf-execution-worker-grouped-inputs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal div#inputs-carousel .carousel-slide {
width: 100%;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading {
background-color: #efefef;
    padding: 8px;
    text-align: left;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading .group-title {
font-size: 1.2em;
    display: inline-block;
}

div#wf-execute-workflow-node-modal div#inputs-carousel .carousel-slide {
width: 100%;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading {
background-color: #efefef;
    padding: 8px;
    text-align: left;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading .group-title {
font-size: 1.2em;
    display: inline-block;
}

div#wf-execute-workflow-node-modal div#inputs-carousel .carousel-slide {
width: 100%;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading {
background-color: #efefef;
    padding: 8px;
    text-align: left;
}

div#wf-execute-workflow-node-modal div#inputs-carousel div.carousel-slide-heading .group-title {
font-size: 1.2em;
    display: inline-block;
}



/*
 * CSS for template: workflow-execution-tpl.tpl
 * Source: javascripts/templates/modular/execution/main/workflow-execution-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"] span.warning-text {
font-size: 10px;
    position: absolute;
    top: 22px;
    left: 0px;
    color: red;
    display: none;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"].invalid-item {
border: 1px solid red;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"] span.warning-text {
font-size: 10px;
    position: absolute;
    top: 22px;
    left: 0px;
    color: red;
    display: none;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"].invalid-item {
border: 1px solid red;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"] span.warning-text {
font-size: 10px;
    position: absolute;
    top: 22px;
    left: 0px;
    color: red;
    display: none;
}

div.workflow div.wf-main-container div.flow-container div.list-view ul.workers_list li.wf-item[data-mode="execution"].invalid-item {
border: 1px solid red;
}



/*
 * CSS for template: wf-execution-configure-modal-tpl.tpl
 * Source: javascripts/templates/modular/execution/modals/wf-execution-configure-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .user-inspection-msg {
margin-left: 3px;
    /*max-width: 50%;*/
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 0, 0, 0.7);
    /*display: inline-block;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div#wf-execute-workflow-node-modal .datasource-options {
text-align: left;
    word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-dialog.simpleView {
width: 50% !important;
}

div#wf-execute-workflow-node-modal .edit_options .curve-sparkline {
cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail {
top: 0 !important;
}

div#wf-execute-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
    min-height: 300px;
}

div#wf-execute-workflow-node-modal .field-name-container {
word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-body.executing {
opacity: 0.7;
    pointer-events: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs {
-webkit-transition: width 0.5s ease-out;
    -moz-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    -o-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 15px;
    background-color: #4f5359;
    color: #FFF;
    padding: 4px;
    z-index: 2;
    cursor: pointer;
    word-break: break-all;
    text-align: center;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen {
right: -15px;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen:before {
left: 100% !important;
    border-width: 7px 0 7px 7px !important;
    border-color: transparent transparent transparent #4f5359 !important;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab:before {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent #4f5359 transparent transparent;
}

div#wf-execute-workflow-node-modal .edit_options .textarea_type {
display: none;
}

div#wf-execute-workflow-node-modal .file-upload-icon .dz-preview {
display: none !important;
}

div#wf-execute-workflow-node-modal .user-inspection-msg {
margin-left: 3px;
    /*max-width: 50%;*/
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 0, 0, 0.7);
    /*display: inline-block;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div#wf-execute-workflow-node-modal .datasource-options {
text-align: left;
    word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-dialog.simpleView {
width: 50% !important;
}

div#wf-execute-workflow-node-modal .edit_options .curve-sparkline {
cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail {
top: 0 !important;
}

div#wf-execute-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
    min-height: 300px;
}

div#wf-execute-workflow-node-modal .field-name-container {
word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-body.executing {
opacity: 0.7;
    pointer-events: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs {
-webkit-transition: width 0.5s ease-out;
    -moz-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    -o-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 15px;
    background-color: #4f5359;
    color: #FFF;
    padding: 4px;
    z-index: 2;
    cursor: pointer;
    word-break: break-all;
    text-align: center;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen {
right: -15px;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen:before {
left: 100% !important;
    border-width: 7px 0 7px 7px !important;
    border-color: transparent transparent transparent #4f5359 !important;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab:before {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent #4f5359 transparent transparent;
}

div#wf-execute-workflow-node-modal .edit_options .textarea_type {
display: none;
}

div#wf-execute-workflow-node-modal .file-upload-icon .dz-preview {
display: none !important;
}

div#wf-execute-workflow-node-modal .user-inspection-msg {
margin-left: 3px;
    /*max-width: 50%;*/
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 0, 0, 0.7);
    /*display: inline-block;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div#wf-execute-workflow-node-modal .datasource-options {
text-align: left;
    word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-dialog.simpleView {
width: 50% !important;
}

div#wf-execute-workflow-node-modal .edit_options .curve-sparkline {
cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail {
top: 0 !important;
}

div#wf-execute-workflow-node-modal .modal-body {
-webkit-font-smoothing: antialiased;
    font-weight: 400;
    padding: 0 !important;
    min-height: 300px;
}

div#wf-execute-workflow-node-modal .field-name-container {
word-break: break-all;
}

div#wf-execute-workflow-node-modal .modal-body.executing {
opacity: 0.7;
    pointer-events: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs {
-webkit-transition: width 0.5s ease-out;
    -moz-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    -o-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab {
position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 15px;
    background-color: #4f5359;
    color: #FFF;
    padding: 4px;
    z-index: 2;
    cursor: pointer;
    word-break: break-all;
    text-align: center;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen {
right: -15px;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab.isOpen:before {
left: 100% !important;
    border-width: 7px 0 7px 7px !important;
    border-color: transparent transparent transparent #4f5359 !important;
}

div#wf-execute-workflow-node-modal .toggle_outputs_tab:before {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 7px 7px 0;
    border-style: solid;
    border-color: transparent #4f5359 transparent transparent;
}

div#wf-execute-workflow-node-modal .edit_options .textarea_type {
display: none;
}

div#wf-execute-workflow-node-modal .file-upload-icon .dz-preview {
display: none !important;
}

div.workflow-modal .traversal-header i {
margin-right: 6px;
    width: 12px;
    text-align: center;
}

div.workflow-modal .traversal-separator i {
font-size: 12px;
}

div.workflow-modal .traversal-error i {
margin-right: 6px;
}

div.workflow-modal .traversal-empty i {
margin-right: 6px;
}



/*
 * CSS for template: wf-execution-options-modal-tpl.tpl
 * Source: javascripts/templates/modular/execution/modals/wf-execution-options-modal-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execution-options-modal .wf-exec-info {
padding: 20px;
    font-size: 15px;
    text-align: center;
}

div#wf-execution-options-modal .wf-exec-info {
padding: 20px;
    font-size: 15px;
    text-align: center;
}

div#wf-execution-options-modal .wf-exec-info {
padding: 20px;
    font-size: 15px;
    text-align: center;
}



/*
 * CSS for template: wf-exec-controls-tpl.tpl
 * Source: javascripts/templates/modular/execution/settings/wf-exec-controls-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .execution-controls {
display: inline-block;
}

div.workflow .workflow-index[data-view="io"] .floating-execution-controls,
div.workflow .workflow-index[data-view="io"] .plugin-header-right .wf-exec-controls-container {
display: none;
}

div.workflow .workflow-index .basic-view-container .wf-exec-controls-container .progress {
width: 100%;
}

div.workflow .workflow-index .basic-view-container .wf-exec-controls-container .execution_params {
width: 50%;
}

div.workflow .workflow-index[data-view="basic"] .floating-execution-controls,
div.workflow .workflow-index[data-view="basic"] .plugin-header-right .wf-exec-controls-container {
display: none;
}

div#wf-execute-workflow-node-modal .execution-controls {
display: inline-block;
}

div.workflow .workflow-index[data-view="io"] .floating-execution-controls,
div.workflow .workflow-index[data-view="io"] .plugin-header-right .wf-exec-controls-container {
display: none;
}

div.workflow .workflow-index .basic-view-container .wf-exec-controls-container .progress {
width: 100%;
}

div.workflow .workflow-index .basic-view-container .wf-exec-controls-container .execution_params {
width: 50%;
}

div.workflow .workflow-index[data-view="basic"] .floating-execution-controls,
div.workflow .workflow-index[data-view="basic"] .plugin-header-right .wf-exec-controls-container {
display: none;
}



/*
 * CSS for template: wf-validation-button-tpl.tpl
 * Source: javascripts/templates/modular/execution/settings/wf-validation-button-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-validation-button {
/*display: none*/
}

div.workflow .wf-validation-button {
/*display: none*/
}


/*
 * Special CSS rules not matched to specific templates
 * Category: execution
 * Auto-generated by modularize_css.py
 */

.select2-dropdown.workflow-select2 {
z-index: 1054;
}

.select2-dropdown.workflow-select2 {
z-index: 1054;
}

.select2-dropdown.workflow-select2 {
z-index: 1054;
}



/*
 * CSS for template: wf-execution-logs-view.tpl
 * Source: javascripts/templates/modular/execution/views/wf-execution-logs-view.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .execution-log .logs-container p {
margin-bottom: 4px;
    display: flex;
}

div.workflow-modal .execution-log .logs-container p span.timestamp {
margin-right: 5px;
    flex: 0 0 auto;
}

div.workflow-modal .execution-log .logs-container .full-msg,
div.workflow-modal .execution-log .logs-container .hide-full-msg {
cursor: pointer;
    color: steelblue !important;
}

div.workflow-modal .execution-log .logs-container .log-msg {
max-height: 200px;
    overflow: auto;
    flex: 1 1 auto;
}

div.workflow-modal .execution-log .logs-container p {
margin-bottom: 4px;
    display: flex;
}

div.workflow-modal .execution-log .logs-container p span.timestamp {
margin-right: 5px;
    flex: 0 0 auto;
}

div.workflow-modal .execution-log .logs-container .full-msg,
div.workflow-modal .execution-log .logs-container .hide-full-msg {
cursor: pointer;
    color: steelblue !important;
}

div.workflow-modal .execution-log .logs-container .log-msg {
max-height: 200px;
    overflow: auto;
    flex: 1 1 auto;
}

div.workflow-modal .execution-log .logs-container p {
margin-bottom: 4px;
    display: flex;
}

div.workflow-modal .execution-log .logs-container p span.timestamp {
margin-right: 5px;
    flex: 0 0 auto;
}

div.workflow-modal .execution-log .logs-container .full-msg,
div.workflow-modal .execution-log .logs-container .hide-full-msg {
cursor: pointer;
    color: steelblue !important;
}

div.workflow-modal .execution-log .logs-container .log-msg {
max-height: 200px;
    overflow: auto;
    flex: 1 1 auto;
}



/*
 * CSS for template: wf-configure-execution-decision-worker-tpl.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-decision-worker-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item.error-item {
/*border: 1px dotted red;*/
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item.error-item {
/*border: 1px dotted red;*/
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item.error-item {
/*border: 1px dotted red;*/
}



/*
 * CSS for template: wf-configure-execution-worker-input-flexed-tpl.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-worker-input-flexed-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed {
display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-header {
display: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item {
width: 33.3333%;
    border-bottom: 1px solid #DDD;
    padding: 4px;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item:last-child {
border-right: 1px solid #DDD;
}

div#wf-execute-workflow-node-modal li.field-item .set_current {
position: absolute;
    top: 7px;
    right: 4px;
    z-index: 2;
    opacity: 0;
}

div#wf-execute-workflow-node-modal li.field-item .value-history>ul {
margin-bottom: 0 !important;
}

div#wf-execute-workflow-node-modal li.field-item div.value-history [disabled] {
background: #FFF;
    border: none;
    box-shadow: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed {
display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-header {
display: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item {
width: 33.3333%;
    border-bottom: 1px solid #DDD;
    padding: 4px;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item:last-child {
border-right: 1px solid #DDD;
}

div#wf-execute-workflow-node-modal li.field-item .set_current {
position: absolute;
    top: 7px;
    right: 4px;
    z-index: 2;
    opacity: 0;
}

div#wf-execute-workflow-node-modal li.field-item .value-history>ul {
margin-bottom: 0 !important;
}

div#wf-execute-workflow-node-modal li.field-item div.value-history [disabled] {
background: #FFF;
    border: none;
    box-shadow: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed {
display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-header {
display: none;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item {
width: 33.3333%;
    border-bottom: 1px solid #DDD;
    padding: 4px;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items.flexed li.field-item:last-child {
border-right: 1px solid #DDD;
}

div#wf-execute-workflow-node-modal li.field-item .set_current {
position: absolute;
    top: 7px;
    right: 4px;
    z-index: 2;
    opacity: 0;
}

div#wf-execute-workflow-node-modal li.field-item .value-history>ul {
margin-bottom: 0 !important;
}

div#wf-execute-workflow-node-modal li.field-item div.value-history [disabled] {
background: #FFF;
    border: none;
    box-shadow: none;
}



/*
 * CSS for template: wf-configure-execution-worker-input-panels-tpl.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-worker-input-panels-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info {
position: absolute;
    top: 7px;
    right: -20px;
    cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info:hover {
color: #333 !important;
}

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info {
position: absolute;
    top: 7px;
    right: -20px;
    cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info:hover {
color: #333 !important;
}

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info {
position: absolute;
    top: 7px;
    right: -20px;
    cursor: pointer;
}

div#wf-execute-workflow-node-modal .edit_options .input-value-container .datasource_info:hover {
color: #333 !important;
}



/*
 * CSS for template: wf-configure-execution-worker-input-value-tpl.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-worker-input-value-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail:hover .curve-sparkline {
opacity: 0.6;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail:hover .curve-sparkline {
opacity: 0.6;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}

div#wf-execute-workflow-node-modal .edit_options .wf-thumbnail:hover .curve-sparkline {
opacity: 0.6;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .enlarge-img {
opacity: 1;
}



/*
 * CSS for template: wf-configure-execution-worker-inputs.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-worker-inputs.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .worker-inputs.noInputs #field-items:after {
content: 'No inputs found';
    /* position: absolute; */
    left: 0;
    top: 0;
    padding: 25px;
    font-size: 1.2em;
    color: grey;
}

div.workflow-modal .worker-inputs.noInputs #field-items:after,
div.workflow-modal ul#field-items.noInputs:after {
content: 'No inputs found';
    position: absolute;
    left: 0;
    top: 0px;
    padding: 25px;
    font-size: 1.2em;
    color: grey;
}

div.workflow-modal .worker-inputs.noInputs #field-items:after {
content: 'No inputs found';
    /* position: absolute; */
    left: 0;
    top: 0;
    padding: 25px;
    font-size: 1.2em;
    color: grey;
}



/*
 * CSS for template: wf-configure-execution-worker-outputs.tpl
 * Source: javascripts/templates/modular/execution/workers/wf-configure-execution-worker-outputs.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .worker-outputs li.field-header,
div#wf-execute-workflow-node-modal div.outputs-container li.field-header {
text-align: left;
}

div.workflow-modal .worker-outputs li.field-header,
div#wf-execute-workflow-node-modal div.outputs-container li.field-header {
text-align: left;
}

div.workflow-modal .worker-outputs li.field-header,
div#wf-execute-workflow-node-modal div.outputs-container li.field-header {
text-align: left;
}



/** Added by shashank2104 on 2026-07-07 - R0-3925 - inline warning shown for a keyvalue output returned in the non-standard object format ({ key: value } instead of [{ name, value }] rows). Scoped under the worker-output containers. **/
div.workflow-modal .worker-outputs .wf-kv-format-warning,
div#wf-execute-workflow-node-modal div.outputs-container .wf-kv-format-warning {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-subtle);
    border-left: 3px solid var(--d3v-warning);
    border-radius: var(--d3v-r-md);
}

div.workflow-modal .worker-outputs .wf-kv-format-warning .wf-kv-format-warning-msg,
div#wf-execute-workflow-node-modal div.outputs-container .wf-kv-format-warning .wf-kv-format-warning-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-secondary);
}

div.workflow-modal .worker-outputs .wf-kv-format-warning .wf-kv-format-warning-msg i.fa,
div#wf-execute-workflow-node-modal div.outputs-container .wf-kv-format-warning .wf-kv-format-warning-msg i.fa {
    color: var(--d3v-warning);
}

div.workflow-modal .worker-outputs .wf-kv-format-warning .wf-kv-format-warning-msg code,
div#wf-execute-workflow-node-modal div.outputs-container .wf-kv-format-warning .wf-kv-format-warning-msg code {
    padding: 1px 5px;
    font-size: 11px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-sm);
    color: var(--d3v-text-primary);
}

div.workflow-modal .worker-outputs .wf-kv-format-warning .wf-kv-format-warning-raw,
div#wf-execute-workflow-node-modal div.outputs-container .wf-kv-format-warning .wf-kv-format-warning-raw {
    margin: 8px 0 0;
    padding: 8px 10px;
    max-height: 160px;
    overflow: auto;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    white-space: pre;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-sm);
    color: var(--d3v-text-primary);
}

/* Added by shashank2104 on 2026-07-10 - DW-3119 - compact JSON keys summary in the output card
   (dataset-style: "N keys · Keys: a, b, c …+N more"); the whole block is a click target that opens
   the View JSON viewer, mirroring how clicking a dataset opens it. */
div.workflow-modal .worker-outputs .wf-json-summary,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary {
    margin: 4px -4px 0;
    padding: 6px 8px;
    border-radius: var(--d3v-r-sm);
    cursor: pointer;
    transition: background var(--d3v-t-fast, .16s) ease;
}

div.workflow-modal .worker-outputs .wf-json-summary:hover,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary:hover {
    background: var(--d3v-bg-secondary);
}

div.workflow-modal .worker-outputs .wf-json-summary .wf-json-summary-count,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary .wf-json-summary-count {
    margin: 0 0 5px;
    font-size: 12px;
    color: var(--d3v-text-secondary);
}

div.workflow-modal .worker-outputs .wf-json-summary .wf-json-summary-keys,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary .wf-json-summary-keys {
    margin: 0;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.55;
    color: var(--d3v-text-muted);
    word-break: break-word;
}

div.workflow-modal .worker-outputs .wf-json-summary .wf-json-summary-label,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary .wf-json-summary-label {
    color: var(--d3v-text-secondary);
}

div.workflow-modal .worker-outputs .wf-json-summary .wf-json-summary-more,
div#wf-execute-workflow-node-modal div.outputs-container .wf-json-summary .wf-json-summary-more {
    color: var(--d3v-accent);
    font-weight: 600;
}


/** Added by shashank2104 on 2026-08-21 - R2026-189 #16 - Output rows now expose ONE action
 *  idiom: the name is the primary action, everything else lives behind the header ellipsis.
 *  The per-type button rows that used to sit under the value are proxied into that menu and
 *  hidden here. Scoped to the two worker-output containers only. **/

/** Added by shashank2104 on 08/26/2026 at 12:13 PM - hide harvested type:file view/download only. **/
div.workflow-modal .worker-outputs li.field-item .op-action-harvested,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-action-harvested {
    display: none !important;
}

/* --- the name (label only, not a viewer) --- */
div.workflow-modal .worker-outputs li.field-item .op-name-action,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-name-action {
    color: var(--d3v-text-primary);
    font-weight: 600;
    text-decoration: none;
    cursor: default;
}

/* rename swaps the link for the editable input that is already wired to data-op-attr="title" */
div.workflow-modal .worker-outputs li.field-item input.op-name-input,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item input.op-name-input {
    display: none;
}

div.workflow-modal .worker-outputs li.field-item.op-renaming input.op-name-input,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-renaming input.op-name-input {
    display: inline-block;
}

div.workflow-modal .worker-outputs li.field-item.op-renaming .op-name-action,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-renaming .op-name-action {
    display: none;
}

/* --- the actions ellipsis --- */
/* the shared .op-additional-options rule keeps the header chrome hidden until row hover. That is
   fine for the config/settings controls, but the ellipsis is now the ONLY route to an output's
   actions, so it has to stay visible - dimmed at rest, full strength on hover. */
div.workflow-modal .worker-outputs li.field-item.op-has-actions .op-additional-options,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-has-actions .op-additional-options {
    display: flex !important;
    /* NOTE: opacity stays 1 here on purpose - any value below 1 makes this a stacking context and
       traps the open dropdown behind the value body below it. The resting dim lives on the BUTTON. */
    opacity: 1 !important;
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
}

div.workflow-modal .worker-outputs li.field-item.op-has-actions .op-ellipsis-menu > .btn,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-has-actions .op-ellipsis-menu > .btn {
    opacity: 0.45;
    transition: opacity var(--d3v-t-fast);
}

div.workflow-modal .worker-outputs li.field-item.op-has-actions:hover .op-ellipsis-menu > .btn,
div.workflow-modal .worker-outputs li.field-item.op-menu-open .op-ellipsis-menu > .btn,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-has-actions:hover .op-ellipsis-menu > .btn,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-menu-open .op-ellipsis-menu > .btn {
    opacity: 1;
}

/* nothing behind the ellipsis - keep it out of the way entirely */
div.workflow-modal .worker-outputs li.field-item:not(.op-has-actions) .op-actions-only,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item:not(.op-has-actions) .op-actions-only {
    display: none !important;
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list {
    margin-bottom: 0;
    min-width: 220px;
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-action-item > a,
div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-rename-item > a,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-action-item > a,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-rename-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--d3v-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-action-item,
div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-rename-item,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-action-item,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-rename-item {
    cursor: pointer;
    border-radius: var(--d3v-r-sm);
    transition: background-color var(--d3v-t-fast);
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-action-item i,
div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-rename-item i,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-action-item i,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-rename-item i {
    width: 14px;
    text-align: center;
    color: var(--d3v-text-secondary);
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-action-danger > a,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-action-danger > a,
div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-action-danger i,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-action-danger i {
    color: var(--d3v-status-danger);
}

div.workflow-modal .worker-outputs li.field-item .op-actions-list li.op-actions-divider,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-actions-list li.op-actions-divider {
    list-style: none;
    height: 1px;
    margin: 6px 0;
    padding: 0;
    background: var(--d3v-border-subtle);
}

/* an open menu must clear this row's own value body AND the rows below it */
div.workflow-modal .worker-outputs li.field-item.op-menu-open,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item.op-menu-open {
    z-index: 30;
}

div.workflow-modal .worker-outputs li.field-item .op-ellipsis-menu.open > .dropdown-menu,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-ellipsis-menu.open > .dropdown-menu {
    z-index: 2200;
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-md);
}

/** Added by shashank2104 on 08/22/2026 - R2026-189 #16 - file values lead with the file NAME (clickable,
 *  opens the file) and carry the full server path underneath as subtext. **/
div.workflow-modal .worker-outputs li.field-item .op-file-ref,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-ref {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

div.workflow-modal .worker-outputs li.field-item .op-file-name,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-name {
    color: var(--d3v-text-primary);
    font-weight: 600;
    word-break: break-all;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: color var(--d3v-t-fast), border-color var(--d3v-t-fast);
}

div.workflow-modal .worker-outputs li.field-item .op-file-name:hover,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-name:hover {
    color: var(--d3v-accent-primary);
    border-bottom-color: var(--d3v-accent-primary);
    text-decoration: none;
}

/** Clicking a link leaves it focused, and the browser's default ring then boxes the text until you
 *  click elsewhere. `:focus-visible` is the mechanism built for exactly this - the ring is suppressed
 *  for pointer focus and kept for keyboard focus, so nothing is taken away from keyboard users. **/
div.workflow-modal .worker-outputs li.field-item .op-file-name:focus,
div.workflow-modal .worker-outputs li.field-item .op-name-action:focus,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-name:focus,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-name-action:focus {
    outline: none;
}

div.workflow-modal .worker-outputs li.field-item .op-file-name:focus-visible,
div.workflow-modal .worker-outputs li.field-item .op-name-action:focus-visible,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-name:focus-visible,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-name-action:focus-visible {
    outline: 2px solid var(--d3v-accent-primary);
    outline-offset: 2px;
    border-radius: var(--d3v-r-sm);
}

/* the path is reference text, not an action - only the file name is clickable */
div.workflow-modal .worker-outputs li.field-item .op-file-path,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-path {
    font-size: 11px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
    word-break: break-all;
}

div.workflow-modal .worker-outputs li.field-item .op-file-path-label,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-path-label {
    font-weight: 600;
    color: var(--d3v-text-secondary);
}

/* shown only while a download is actually in flight */
div.workflow-modal .worker-outputs li.field-item .op-file-busy,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-busy {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--d3v-accent-primary);
}

/* the backend id, when the value carries one */
div.workflow-modal .worker-outputs li.field-item .op-file-id,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-id {
    font-size: 11px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
    font-family: var(--d3v-font-mono, monospace);
}

/* a value with nothing openable in it must not look like a working link */
div.workflow-modal .worker-outputs li.field-item .op-file-name.is-unusable,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-name.is-unusable {
    color: var(--d3v-text-muted);
    font-weight: 500;
    font-style: italic;
    cursor: default;
    border-bottom: none;
}

div.workflow-modal .worker-outputs li.field-item .op-file-note,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-note {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
}

div.workflow-modal .worker-outputs li.field-item .op-file-note.is-warn,
div#wf-execute-workflow-node-modal div.outputs-container li.field-item .op-file-note.is-warn {
    color: var(--d3v-status-warning);
}

/**
 * Added by shashank2104 on 2026-09-08
 * Placeholder for output cards that have not been lazy-rendered yet.
 *
 * Deliberately IDENTICAL to the input placeholder (wf-configure-node-user-input-tpl.css):
 * same 16px padding, 12px gap, 34%-wide label bar, full-width 36px field bar, and the same
 * wf-input-skeleton-sheen animation - so inputs and outputs read as one loading state
 * rather than two. Only the reserved height differs, because an output card is shorter
 * than an input row.
 * See lazyLoadOutputItems() in ConfigureWfWorkerValidationFetchRender.js — only the
 * builder worker-config view opts in (obj.lazyLoadOutputs), so every other consumer of
 * wf-configure-execution-worker-outputs still renders every card eagerly.
 */
.workflow-modal li.field-item.wf-output-pending,
div.workflow li.field-item.wf-output-pending {
    height: 104px;
    overflow: hidden;
    border-color: transparent;
    background: var(--d3v-bg-primary);
}

.workflow-modal li.field-item.wf-output-pending .wf-output-skeleton,
div.workflow li.field-item.wf-output-pending .wf-output-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.workflow-modal li.field-item.wf-output-pending .wf-output-skeleton-line,
div.workflow li.field-item.wf-output-pending .wf-output-skeleton-line {
    display: block;
    border-radius: var(--d3v-r-sm);
    background-color: var(--d3v-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--d3v-bg-secondary) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: wf-input-skeleton-sheen 1.4s ease-in-out infinite;
}

.workflow-modal li.field-item.wf-output-pending .wf-output-skeleton-label,
div.workflow li.field-item.wf-output-pending .wf-output-skeleton-label {
    width: 34%;
    height: 12px;
}

.workflow-modal li.field-item.wf-output-pending .wf-output-skeleton-value,
div.workflow li.field-item.wf-output-pending .wf-output-skeleton-value {
    width: 100%;
    height: 36px;
}

@media (prefers-reduced-motion: reduce) {
    .workflow-modal li.field-item.wf-output-pending .wf-output-skeleton-line,
    div.workflow li.field-item.wf-output-pending .wf-output-skeleton-line {
        animation: none;
    }
}

/**
 * Added by shashank2104 on 2026-09-08
 * Skeleton for output PREVIEW panes that are still empty.
 *
 * Separate from .wf-output-pending above, which covers a whole deferred CARD. These are
 * preview containers INSIDE an already-rendered card (.dataset-preview / .kv-preview /
 * .define_table-preview / text / tree / sparkline). They are given a fixed height by
 * wf-load-workflow-modal-tpl.css and are lazy-filled by renderPreviews, so until that
 * runs the card shows a large blank box with no indication anything is coming.
 *
 * :empty does the gating on its own - the moment renderPreviews injects content the
 * selector stops matching and the shimmer disappears, so no JS is involved.
 * Same sheen as the input skeleton so the whole dialog reads as one loading state.
 */
div.workflow-modal li.field-item .worker-output-preview:empty,
div.workflow li.field-item .worker-output-preview:empty {
    border-radius: var(--d3v-r-sm);
    background-color: var(--d3v-bg-tertiary);
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        var(--d3v-bg-secondary) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: wf-input-skeleton-sheen 1.4s ease-in-out infinite;
}

/* A preview with no fixed height of its own still needs a body to shimmer. */
div.workflow-modal li.field-item .worker-output-preview.text-preview:empty,
div.workflow-modal li.field-item .worker-output-preview.output-tree:empty,
div.workflow-modal li.field-item .worker-output-preview.curve-sparkline:empty,
div.workflow li.field-item .worker-output-preview.text-preview:empty,
div.workflow li.field-item .worker-output-preview.output-tree:empty,
div.workflow li.field-item .worker-output-preview.curve-sparkline:empty {
    min-height: 56px;
}

@media (prefers-reduced-motion: reduce) {
    div.workflow-modal li.field-item .worker-output-preview:empty,
    div.workflow li.field-item .worker-output-preview:empty {
        animation: none;
    }
}

/*
 * CSS for template: d3view-wf-collapsed-sequence-expanded-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-collapsed-sequence-expanded-tpl.tpl
 * Auto-generated by modularize_css.py
 */

@media screen and (max-width: 1920px) {
div.workflow .plugin-settings-line .wf-search-container .main-dd {
        width: 100%;
    }
}

@media screen and (max-width: 1168px) {
div.workflow-modal li.field-item .field-row {
        display: block;
    }

    div.workflow-modal li.field-item .field-row>div[class*="col-md-"] {
        width: 100% !important;
    }

    div.workflow-modal li.field-item .op-label {
        max-width: unset !important;
    }

    div.workflow-modal li.field-item .op-options {
        position: relative;
        display: block !important;
        /*width: 100%!important;*/
    }

    div.workflow-modal li.field-item .op-options>div {
        margin-bottom: 10px;
    }

    div.workflow-modal li.field-item .op-options>div:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1520px) {
div.workflow .top-settings-container .btn-text,
    div.workflow .top-settings-container .btn-label {
        display: none;
    }

    /*div.workflow .top-settings-container input.wf-worker-search {*/
    /*    width: 120px !important;*/
    /*}*/
}

@media screen and (max-width: 1600px) {
div.workflow-modal span.nav-text {
        display: none !important;
    }

    div.workflow-modal button.worker-io-mapper span {
        display: none !important;
    }

    .wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1.2em !important;
    }
}

@media screen and (max-width: 1200px) {
.wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 1201px) {
div.workflow .workers-select-list {
        width: 300px;
    }

    /*div.workflow .workers-list-dropdown:before, div.workflow .workers-list-dropdown:after {*/
    /*left: 20%!important;*/
    /*}*/
}

@media screen and (max-width: 1168px) {
div.workflow-modal li.field-item .field-row {
        display: block;
    }

    div.workflow-modal li.field-item .field-row>div[class*="col-md-"] {
        width: 100% !important;
    }

    div.workflow-modal li.field-item .op-label {
        max-width: unset !important;
    }

    div.workflow-modal li.field-item .op-options {
        position: relative;
        display: block !important;
        /*width: 100%!important;*/
    }

    div.workflow-modal li.field-item .op-options>div {
        margin-bottom: 10px;
    }

    div.workflow-modal li.field-item .op-options>div:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1520px) {
div.workflow .top-settings-container .btn-text,
    div.workflow .top-settings-container .btn-label {
        display: none;
    }

    /*div.workflow .top-settings-container input.wf-worker-search {*/
    /*    width: 120px !important;*/
    /*}*/
}

@media screen and (max-width: 1600px) {
div.workflow-modal span.nav-text {
        display: none !important;
    }

    div.workflow-modal button.worker-io-mapper span {
        display: none !important;
    }

    .wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1.2em !important;
    }
}

@media screen and (max-width: 1200px) {
.wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 1201px) {
div.workflow .workers-select-list {
        width: 300px;
    }

    /*div.workflow .workers-list-dropdown:before, div.workflow .workers-list-dropdown:after {*/
    /*left: 20%!important;*/
    /*}*/
}

@media screen and (min-width: 2000px) {
div.popover.wf-worker-info-popover {
        width: 60%;
    }
}

@media screen and (min-width: 1600px) and (max-width: 2000px) {
div.popover.wf-worker-info-popover {
        width: 45%;
    }
}

@media screen and (max-width: 1300px) {
div.workflow-modal .worker_unsync_status .additional-info {
        display: none;
    }
}

@media screen and (max-width: 1168px) {
div.workflow-modal li.field-item .field-row {
        display: block;
    }

    div.workflow-modal li.field-item .field-row>div[class*="col-md-"] {
        width: 100% !important;
    }

    div.workflow-modal li.field-item .op-label {
        max-width: unset !important;
    }

    div.workflow-modal li.field-item .op-options {
        position: relative;
        display: block !important;
        /*width: 100%!important;*/
    }

    div.workflow-modal li.field-item .op-options>div {
        margin-bottom: 10px;
    }

    div.workflow-modal li.field-item .op-options>div:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1520px) {
div.workflow .top-settings-container .btn-text,
    div.workflow .top-settings-container .btn-label,
    div.wf-flow-modal-execution .btn-text,
    div.wf-flow-modal-execution .btn-label {
        display: none;
    }

    div.workflow .top-settings-container .wf_recently_used_workers {
        display: none;
    }

    div.workflow .top-settings-container .wf-search-container>.left-inner-addon>.twitter-typeahead {
        width: 120px !important;
    }

    div.workflow .top-settings-container .btn-text,
    div.workflow .top-settings-container .btn-label {
        display: none;
    }
}

@media screen and (max-width: 1600px) {
div.workflow-modal span.nav-text {
        display: none !important;
    }

    div.workflow-modal button.worker-io-mapper span {
        display: none !important;
    }

    .wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1.2em !important;
    }
}

@media screen and (max-width: 1200px) {
.wf-workers-container .worker-type,
    .wf-worker-type {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 1201px) {
div.workflow .workers-select-list {
        width: 300px;
    }

    /*div.workflow .workers-list-dropdown:before, div.workflow .workers-list-dropdown:after {*/
    /*left: 20%!important;*/
    /*}*/
}

@media screen and (min-width: 2000px) {
div.popover.wf-worker-info-popover {
        width: 60%;
    }
}

@media screen and (min-width: 1600px) and (max-width: 2000px) {
div.popover.wf-worker-info-popover {
        width: 45%;
    }
}

@media screen and (max-width: 1300px) {
div.workflow-modal .worker_unsync_status .additional-info {
        display: none;
    }
}

@media screen and (max-width:1568px) {
div.workflow-modal .op-label-outer[data-long-name="true"] {
        flex-direction: column;
        align-items: flex-start !important;
        ;
        height: auto !important;
    }

    div.workflow-modal .op-label-outer[data-long-name="true"] .op-additional-options {
        position: absolute !important;
        ;
        top: -20px !important;
        right: 0;

    }
}

@media (max-width: 1024px) and (max-height: 612px),
(max-width: 1024px) {
div.workflow .wf-dropdowns li.wf-execution-controls.play-controls-dropdown,
    div.workflow .wf-dropdowns-list>li.dropdown:last-child,
    div.workflow .wf-start-status,
    div.workflow .wf-execution-spinner.exec_info,
    div.workflow .pipe {
        display: none !important;
    }
}

@media (max-width: 1024px) and (max-height: 612px),
(max-width: 1024px) {
div.workflow .workflow-index-container.search-focused .wf-control-buttons {
        display: none !important;
    }
}

div.workflow .d3view-wf-collapsed-sequence-expanded {
position: fixed;
}

div.workflow[data-in-modal="false"] .d3view-wf-collapsed-sequence-expanded {
position: absolute !important;
}

/* R0-3718 - collapse the header into the hamburger ONLY in classic mode. The ribbon header
   is not collapsed at narrow widths (it manages its own width), so these rules are scoped to
   :not([data-header-view="ribbon"]). A workflow that was never toggled has no attr = classic. */
@media screen and (max-width: 1568px) {
div.workflow .wf-main-container:not([data-header-view="ribbon"]) .header-left-compact {
        display: inline-block !important;
    }

    div.workflow .wf-main-container:not([data-header-view="ribbon"]) .plugin-settings-line>.wf-dropdowns {
        display: none !important;
    }
}



/** do not show controls btn text on anything below 1700px width */
@media screen and (max-width: 1900px) {
    div.workflow .top-settings-container .controls-btn-group .btn-text {
        display: none;
    }
}

/** Classic header (now rendered from ribbon options): collapse the top-level menu
    buttons (File/View/Run/Tools/...) to icon-only on anything below 1700px. (Below
    1568px the wide bar is replaced by the hamburger, so this band is effectively
    1569-1700px, but max-width keeps it simple.) */
@media screen and (max-width: 1700px) {
    div.workflow .wf-dropdowns .wf-dropdowns-list > li.dropdown > a > .btn-txt {
        display: none;
    }
}
/*
 * CSS for template: d3view-wf-collapsed-sequence-workers-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-collapsed-sequence-workers-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .worker-type,
.wf-worker-type {
/*font-size: 0.7em!important;*/
    flex: 0 0 auto;
    font-size: 1.25em;
    word-break: break-word;
}

.wf-workers-container .worker-type,
.wf-worker-type {
/*font-size: 0.7em!important;*/
    flex: 0 0 auto;
    font-size: 1.25em;
    word-break: break-word;
}

div.bootstrap-select.-wf li a.opt:hover .text-muted {
color: #FFF !important;
}

.wf-workers-container .worker-type,
.wf-worker-type {
/*font-size: 1.4em!important;*/
    font-size: 2em;
    font-variant: small-caps;
    color: #000;
    font-weight: bold;
}

.wf-workers-container .worker-type,
.wf-worker-type {
/*font-size: 0.7em!important;*/
    flex: 0 0 auto;
    font-size: 1.25em;
    word-break: break-word;
}

div.bootstrap-select.-wf li a.opt:hover .text-muted {
color: #FFF !important;
}

.wf-workers-container .worker-type,
.wf-worker-type {
/*font-size: 1.4em!important;*/
    font-size: 2em;
    font-variant: small-caps;
    color: #000;
    font-weight: bold;
}



/*
 * CSS for template: d3view-wf-execution-flow-loading-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-execution-flow-loading-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .execution-flow-loading {
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: white;
    padding: 20px;
}

div.workflow .execution-flow-loading .spinner {
font-size: 2rem;
    color: #2196f3;
    margin-bottom: 15px;
}

div.workflow .execution-flow-loading .loading-message {
color: #666;
    font-size: 1rem;
    text-align: center;
}



/*
 * CSS for template: d3view-wf-execution-flow-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-execution-flow-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.d3view-wf-execution-flow .worker-item {
position: relative;
    padding-bottom: 40px !important;
    /* Make space for buttons */
}

.d3view-wf-execution-flow .worker-buttons {
position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.d3view-wf-execution-flow .worker-item:hover .worker-buttons {
opacity: 1;
}

.d3view-wf-execution-flow .worker-item.executing .spinner {
display: inline-block !important;
    font-size: 1.2rem;
    color: #2196f3;
}

.d3view-wf-execution-flow .worker-item.success {
background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.d3view-wf-execution-flow .worker-item.error {
background: #ffebee;
    border-left: 3px solid #f44336;
}

div.workflow .d3view-wf-execution-flow .nav-tabs {
margin-bottom: 10px;
}

div.workflow .d3view-wf-execution-flow .tab-content {
padding: 0;
    overflow: auto;
}

div.workflow .d3view-wf-execution-flow .tab-pane {
padding: 0;
}

div.workflow .d3view-wf-execution-flow .matrix-table {
width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

div.workflow .d3view-wf-execution-flow .matrix-table th,
div.workflow .d3view-wf-execution-flow .matrix-table td {
border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: center;
    font-size: 12px;
}

div.workflow .d3view-wf-execution-flow .matrix-table th {
background: #f5f5f5;
    font-weight: 600;
}

div.workflow .d3view-wf-execution-flow .matrix-table thead th {
position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 2;
}

.d3view-wf-execution-flow .worker-item.search-match {
background: #fffde7 !important;
    border-left: 3px solid #ffd600 !important;
    font-weight: bold;
    color: #333;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.08);
    z-index: 2;
}

.d3view-wf-execution-flow .worker-item.search-fade {
opacity: 0.4;
    filter: grayscale(0.3);
    pointer-events: none;
}



/*
 * CSS for template: d3view-wf-import-merge-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-import-merge-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-import-merge .right-panel .default-fb li.field-item {
height: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
}

.wf-import-merge .right-panel .default-fb li.field-item div.worker-output-preview.curve-sparkline {
display: none;
}



/*
 * CSS for template: d3view-wf-io-renderer-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-io-renderer-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-output-assign-to .popover-content .datasource_container>div.bootstrap-select.-wf {
display: none;
}

div.bootstrap-select.-wf .worker-location {
color: dimgrey;
    position: absolute;
    right: 20px;
}

body>div.bootstrap-select.-wf .worker-location:hover {
color: #FFF;
}

div.wf-output-assign-to .popover-content .datasource_container>div.bootstrap-select.-wf {
display: none;
}

div.bootstrap-select.-wf .worker-location {
color: dimgrey;
    position: absolute;
    right: 20px;
}

body>div.bootstrap-select.-wf .worker-location:hover {
color: #FFF;
}

.d3view-wf-io-renderer {
position: absolute;
    z-index: 2004;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.d3view-wf-io-renderer.visible {
opacity: 1;
    transform: scale(1);
}

.d3view-wf-io-renderer .io-renderer-container {
background: white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    max-width: 500px;
}

.d3view-wf-io-renderer .io-renderer-header {
display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.d3view-wf-io-renderer .io-renderer-title {
display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.d3view-wf-io-renderer .io-type-icon {
font-size: 16px;
    color: #666;
}

.d3view-wf-io-renderer .io-name {
color: #333;
}

.d3view-wf-io-renderer .close-io-renderer {
background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
    position: absolute;
    right: 10px;
    z-index: 2;
}

.d3view-wf-io-renderer .close-io-renderer:hover {
background-color: #f5f5f5;
}

.d3view-wf-io-renderer .close-io-renderer i {
color: #666;
    font-size: 14px;
}

.d3view-wf-io-renderer .io-renderer-content {
padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.d3view-wf-io-renderer .io-renderer-content .field-name {
display: none;
}



/*
 * CSS for template: d3view-wf-marker-pairing-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-marker-pairing-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .d3view-wf-marker-pairing {
padding: 20px;
}



/*
 * CSS for template: d3view-wf-worker-category-menu-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-worker-category-menu-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.d3view-wf-worker-category-menu {
position: fixed;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2000;
    background: none;
    cursor: move;
}

.d3view-wf-worker-category-menu.visible {
opacity: 1;
    pointer-events: auto;
}

.d3view-wf-worker-category-menu .category-menu-container {
position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.10);
    overflow: visible;
}

.d3view-wf-worker-category-menu .close-category-menu {
position: absolute;
    right: 18px;
    top: 18px;
    z-index: 10;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.d3view-wf-worker-category-menu .menu-drag-handle {
position: absolute;
    right: 55px;
    top: 18px;
    z-index: 10;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.d3view-wf-worker-category-menu .close-category-menu:hover {
background: #f5f5f5;
}

.d3view-wf-worker-category-menu .category-menu-center {
position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    /*background: #ddd;*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 0 24px rgba(0,0,0,0.10);*/
    z-index: 2;
}

.d3view-wf-worker-category-menu .category-menu-search {
width: 140px;
    height: 140px;
    border-radius: 50%;
    /*border: none;*/
    /*background: #fff;*/
    /*color: #fff;*/
    font-size: 20px;
    text-align: center;
    /*outline: none;*/
    /*box-shadow: 0 0 0 4px rgba(0,0,0,0.04);*/
    transition: box-shadow 0.2s;
}

.d3view-wf-worker-category-menu .category-menu-search::placeholder {
color: #bbb;
    opacity: 1;
}

.d3view-wf-worker-category-menu .category-items {
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.d3view-wf-worker-category-menu .category-item {
position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    margin-top: -45px;
    /*background: #fff;*/
    border-radius: 50%;
    /*box-shadow: 0 2px 12px rgba(0,0,0,0.10);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
    /*border: 2px solid #eee;*/
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s, opacity 0.3s;
}

.d3view-wf-worker-category-menu .category-item.visible {
opacity: 1 !important;
    transform: scale(1);
}

.d3view-wf-worker-category-menu .category-item:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    transform: scale(1.08);
    border-color: #2196f3;
    z-index: 2;
}

.d3view-wf-worker-category-menu .category-icon {
font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.d3view-wf-worker-category-menu .category-label {
font-size: 14px;
    color: #333;
    text-align: center;
    word-break: break-word;
    max-width: 70px;
    line-height: 1.2;
}

.d3view-wf-worker-category-menu .category-item:nth-child(2) {
transition-delay: 0s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(3) {
transition-delay: 0.1s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(4) {
transition-delay: 0.2s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(5) {
transition-delay: 0.3s;
}

.d3view-wf-worker-category-menu .category-dropdown {
background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 5px 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.d3view-wf-worker-category-menu .dropdown-item {
padding: 8px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-wf-worker-category-menu .dropdown-item:hover {
background: #f5f5f5;
}

.d3view-wf-worker-category-menu .dropdown-item .category-name {
font-weight: bold;
    color: #333;
}

.d3view-wf-worker-category-menu .dropdown-item .worker-count {
color: #666;
    font-size: 12px;
}

.d3view-wf-worker-category-menu .show-more-categories {
position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
}

.d3view-wf-worker-category-menu.visible .show-more-categories {
opacity: 1;
    transform: translate(0, calc(var(--menu-radius) / 2 - 50px)) scale(1);
}

.d3view-wf-worker-category-menu .show-more-categories:hover {
transform: translate(0, calc(var(--menu-radius) / 2 - 50px)) scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.d3view-wf-worker-category-menu .worker-list-container {
width: 400px;
    height: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.d3view-wf-worker-category-menu .worker-list-header {
padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.d3view-wf-worker-category-menu .back-to-categories {
background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.d3view-wf-worker-category-menu .back-to-categories:hover {
background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .category-title {
font-weight: bold;
    font-size: 16px;
    color: #333;
}

.d3view-wf-worker-category-menu .worker-list {
flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.d3view-wf-worker-category-menu .worker-item {
padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    word-wrap: break-word;
    white-space: normal;
}

.d3view-wf-worker-category-menu .worker-item:hover {
background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .worker-item.selected {
background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.d3view-wf-worker-category-menu .worker-item:hover {
background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .worker-item.selected:hover {
background-color: #e3f2fd;
}

.d3view-wf-worker-category-menu .worker-name {
font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.d3view-wf-worker-category-menu .worker-description {
font-size: 12px;
    color: #666;
    word-wrap: break-word;
}

.d3view-wf-worker-category-menu .category-count {
font-size: 12px;
    color: #666;
    margin-top: 4px;
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-list-container,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-list-container {
    background: var(--wf-bg-surface);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-list-header,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-list-header {
    border-bottom-color: var(--wf-border);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .category-title,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .category-title,
div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-name,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-name {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-description,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-description,
div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .category-count,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .category-count {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-item:hover,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-item:hover,
div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .back-to-categories:hover,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .back-to-categories:hover {
    background-color: var(--wf-bg-elevated);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-search.form-control,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-search.form-control {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    border-color: var(--wf-border);
}

div.workflow.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-search.form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-wf-worker-category-menu .worker-search.form-control::placeholder {
    color: var(--wf-text-muted);
}

.d3view-wf-worker-category-menu .no-results-message {
position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

.d3view-wf-worker-category-menu:has(.category-item.visible) .no-results-message {
display: none;
}

.d3view-wf-worker-category-menu .worker-search-results-container {
position: absolute;
    left: 50%;
    top: calc(50% + 70px);
    /* Position below the central search */
    transform: translateX(-50%);
    width: 100%;
    max-height: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 3;
    transition: all 0.3s ease;
}

.d3view-wf-worker-category-menu:not(:has(.category-item:nth-child(4))) .worker-search-results-container {
top: calc(50% + 70px);
    /* Keep consistent position below search */
}

.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item {
transform-origin: center center;
}

.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item:nth-child(1) {
transform: translate(-60px, -80px) scale(1);
}

.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item:nth-child(2) {
transform: translate(60px, -80px) scale(1);
}

.d3view-wf-worker-category-menu .category-item {
transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.d3view-wf-worker-category-menu .worker-search-results-header {
padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
    background: #f8f8f8;
}

.d3view-wf-worker-category-menu .worker-search-results-list {
max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    outline: none;
    /* Remove focus outline but keep keyboard focus */
}

.d3view-wf-worker-category-menu .category-item.selected {
background: #e6f0fa;
    border-radius: 50%;
    border: 2px solid #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
    transition: background 0.2s, border 0.2s;
}



/*
 * CSS for template: d3view-wf-worker-io-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/d3view-wf-worker-io-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .worker-io {
display: none;
}

.wf-workers-container .worker-io {
display: none;
}

.d3view-wf-worker-io {
position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.d3view-wf-worker-io.visible {
opacity: 1;
}

.d3view-wf-worker-io .worker-io-container {
position: relative;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 15px;
    z-index: 2;
    pointer-events: none;
}

.d3view-wf-worker-io .io-rendered {
color: #4CAF50;
}

.d3view-wf-worker-io .io-rendered>* {
transform: scale(1.1) !important;
}

.d3view-wf-worker-io .worker-box {
background: transparent;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    pointer-events: none;
    min-width: 100px;
    min-height: 50px;
    /*z-index: 2002;*/
}

.d3view-wf-worker-io .io-labels {
position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
    pointer-events: auto;
    /*z-index: 2003;*/
}

.d3view-wf-worker-io .input-labels {
left: 0;
    top: 0;
    margin-right: 10px;
}

.d3view-wf-worker-io .output-labels {
left: 100%;
    top: 0;
    margin-left: 10px;
}

.d3view-wf-worker-io .io-circles {
position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    /*z-index: 2003;*/
}

.d3view-wf-worker-io .input-circles {
top: 0;
    position: absolute;
    left: -35px;
    transform: translateY(-25%);
}

.d3view-wf-worker-io .output-circles {
top: 0;
    position: absolute;
    left: 100%;
    top: 0;
    position: absolute;
    right: 0;
    width: 200px;
    transform: translateY(-25%);
}

.d3view-wf-worker-io .io-circle {
width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    margin-bottom: 12px;
}

.d3view-wf-worker-io.visible .io-circle {
opacity: 1;
    transform: scale(1) translateY(0);
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(1) {
transition-delay: 0.1s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(2) {
transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(3) {
transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(4) {
transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(5) {
transition-delay: 0.5s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(1) {
transition-delay: 0.1s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(2) {
transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(3) {
transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(4) {
transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(5) {
transition-delay: 0.5s;
}

.d3view-wf-worker-io .ip-label,
.d3view-wf-worker-io .op-label {
opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.d3view-wf-worker-io.visible .ip-label,
.d3view-wf-worker-io.visible .op-label {
opacity: 1;
    transform: translateX(0);
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(1) .ip-label {
transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(2) .ip-label {
transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(3) .ip-label {
transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(4) .ip-label {
transition-delay: 0.5s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(5) .ip-label {
transition-delay: 0.6s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(1) .op-label {
transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(2) .op-label {
transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(3) .op-label {
transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(4) .op-label {
transition-delay: 0.5s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(5) .op-label {
transition-delay: 0.6s;
}

.d3view-wf-worker-io .io-circle.io-input {
border-color: #4CAF50;
}

.d3view-wf-worker-io .io-circle.io-output {
border-color: #2196F3;
}

.d3view-wf-worker-io .io-circle:hover {
transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.d3view-wf-worker-io .io-circle-inner {
width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.d3view-wf-worker-io .io-type {
font-size: 10px;
    color: #666;
    text-align: center;
    word-break: break-word;
    line-height: 1;
}

.d3view-wf-worker-io .io-label {
height: 24px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    pointer-events: auto;
    cursor: pointer;
}

.d3view-wf-worker-io .io-label:hover {
background-color: #f5f5f5;
}

.d3view-wf-worker-io .ip-type {
position: absolute;
    left: 1px;
}

.d3view-wf-worker-io .op-type {
position: absolute;
    left: 1px;
}

.d3view-wf-worker-io .ip-label {
position: absolute;
    left: -100px;
    max-width: 100px;
}

.d3view-wf-worker-io .op-label {
position: absolute;
    left: 35px;
}



/*
 * CSS for template: timeline-table-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/timeline-table-tpl.tpl
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip.clickable {
pointer-events: all !important;
}

body span.wf-canvas-tooltip.clickable {
pointer-events: all !important;
}

body span.wf-canvas-tooltip.clickable {
pointer-events: all !important;
}

.wf-navigation-split-layout .breadcrumb-item.clickable {
cursor: pointer;
}

.wf-error-modal .enhanced-error-container .worker-details .table {
margin-bottom: 0;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.wf-error-modal .enhanced-error-container .worker-details .table th {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    color: #495057;
    border-color: #dee2e6;
    padding: 12px 15px;
    font-size: 14px;
}

.wf-error-modal .enhanced-error-container .worker-details .table td {
padding: 12px 15px;
    border-color: #dee2e6;
    vertical-align: middle;
    font-size: 14px;
}

.wf-error-modal .enhanced-error-container .technical-details .table {
background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}



/*
 * CSS for template: wf-agentic-focussed-view-tpl.tpl
 * Styles moved to wf-agentic-view-tpl.css (unified toggle layout)
 */

/*
 * CSS for template: wf-agentic-view-tpl.tpl
 * Unified agentic view with toggleable Events and Info columns.
 * Columns controlled by data-show-events and data-show-info attributes on .wf-agentic-view
 */

/* ========================================
   Side Columns — Hidden by Default
   ======================================== */
div.wf-agentic-view .wf-agentic-events-column,
div.wf-agentic-view .wf-agentic-info-column,
div.wf-agentic-view .wf-agentic-convo-drawer {
    flex: 0 0 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: flex 0.3s ease, max-width 0.3s ease, opacity 0.2s ease;
}

/* Tab-content stretches to fill by default (already flex: 1 1 auto via inline style) */
div.wf-agentic-view > .plugin-tabs > .tab-content {
    transition: flex 0.3s ease, max-width 0.3s ease;
    min-width: 0;
}

/* ========================================
   Events Column Visible
   ======================================== */
div.wf-agentic-view[data-show-events] .wf-agentic-events-column {
    flex: 0 0 20%;
    max-width: 20%;
    opacity: 1;
    border-left: 1px solid #e3e6ea;
}

/* ========================================
   Info Column Visible
   ======================================== */
div.wf-agentic-view[data-show-info] .wf-agentic-info-column {
    flex: 0 0 20%;
    max-width: 20%;
    opacity: 1;
    border-left: 1px solid #e3e6ea;
}

/* ========================================
   Conversations Drawer Visible (left side)
   ======================================== */
div.wf-agentic-view[data-show-conversations] .wf-agentic-convo-drawer {
    flex: 0 0 280px;
    max-width: 280px;
    opacity: 1;
    border-right: 1px solid #e3e6ea;
}

div.wf-agentic-view .wf-agentic-convo-drawer {
    display: flex;
    flex-direction: column;
    background: #fafbfc;
    order: -1; /* appear before tab-content */
}

div.wf-agentic-view .wf-agentic-convo-drawer .wf-agentic-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.wf-agentic-view .wf-agentic-convo-drawer-actions {
    display: flex;
    gap: 6px;
}

/* Modern icon buttons */
.wf-agentic-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.wf-agentic-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333;
}

.wf-agentic-icon-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

div.wf-agentic-view .wf-agentic-convo-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
}

/* Conversation list items (modelassembler dropdown style) */
div.wf-agentic-view .wf-agentic-convo-item {
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}

div.wf-agentic-view .wf-agentic-convo-item:hover {
    background: #f0f4f8;
}

div.wf-agentic-view .wf-agentic-convo-item.active {
    background: #f0f0ff;
    border-left-color: #667eea;
}

div.wf-agentic-view .wf-agentic-convo-item-info {
    flex: 1;
    min-width: 0;
}

div.wf-agentic-view .wf-agentic-convo-item-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-agentic-convo-item-preview {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-agentic-convo-item-meta {
    font-size: 10px;
    color: #bbb;
    margin-top: 3px;
}

div.wf-agentic-view .wf-agentic-convo-delete {
    padding: 2px 5px;
    opacity: 0.3;
    flex-shrink: 0;
    margin-top: 2px;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.15s;
}

div.wf-agentic-view .wf-agentic-convo-delete:hover {
    opacity: 1;
    color: #d9534f;
}

div.wf-agentic-view .wf-agentic-convo-delete i {
    font-size: 10px;
}

div.wf-agentic-view .wf-agentic-convo-divider {
    margin: 4px 0;
    border-top: 1px solid #eee;
}

div.wf-agentic-view .wf-agentic-convo-delete-all {
    padding: 6px 14px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    color: #d9534f;
    transition: background 0.15s;
}

div.wf-agentic-view .wf-agentic-convo-delete-all:hover {
    background: #fff0f0;
}

/* ========================================
   Agent Header — Left Section (hamburger + convo name)
   ======================================== */
div.wf-agentic-view .agent-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 0 10px;
    min-width: 0;
    flex: 1;
}

div.wf-agentic-view .toggle-conversations {
    padding: 4px 7px;
}

div.wf-agentic-view .wf-agentic-convo-name-display {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

div.wf-agentic-view .wf-agentic-convo-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-agentic-convo-edit-name-btn {
    margin-left: 6px;
    cursor: pointer;
    color: #999;
    font-size: 11px;
    display: none;
    transition: color 0.15s;
}

div.wf-agentic-view .wf-agentic-convo-edit-name-btn:hover {
    color: #428BCA;
}

/* Show edit button when conversation is loaded */
div.wf-agentic-view[data-has-conversation] .wf-agentic-convo-edit-name-btn {
    display: inline;
}

div.wf-agentic-view .wf-agentic-convo-name-input {
    font-size: 13px;
    padding: 2px 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    width: 220px;
    display: none;
    outline: none;
}

div.wf-agentic-view .wf-agentic-convo-name-input:focus {
    border-color: #428BCA;
}

/* ========================================
   Chat Column Sizing
   Accounts for conversations drawer + events + info columns.
   ======================================== */

/* Background tint when any column is open */
div.wf-agentic-view[data-show-events],
div.wf-agentic-view[data-show-info],
div.wf-agentic-view[data-show-conversations] {
    background: #f4f7fa;
}

/* ========================================
   Toggle Button Active State
   ======================================== */
div.wf-agentic-view .toggle-events.active,
div.wf-agentic-view .toggle-info.active {
    background: #428BCA;
    color: #fff;
    border-color: #428BCA;
}

/* ========================================
   Column Internal Layout
   ======================================== */
div.wf-agentic-view .wf-agentic-events-column,
div.wf-agentic-view .wf-agentic-info-column {
    display: flex;
    flex-direction: column;
    background: #fafbfc;
}

/* ========================================
   Column Headers
   ======================================== */
div.wf-agentic-view .wf-agentic-column-header {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
    border-bottom: 1px solid #e3e6ea;
    background: #f5f6f8;
    flex: 0 0 auto;
}

/* ========================================
   Events Column Body
   ======================================== */
div.wf-agentic-view .wf-agentic-events-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
}

/* ========================================
   Info Column — Tabs
   ======================================== */
div.wf-agentic-view .wf-agentic-info-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e3e6ea;
    background: #f5f6f8;
    flex: 0 0 auto;
}

div.wf-agentic-view .wf-agentic-info-tabs li {
    flex: 1;
    text-align: center;
}

div.wf-agentic-view .wf-agentic-info-tabs li a {
    display: block;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

div.wf-agentic-view .wf-agentic-info-tabs li a:hover {
    color: #333;
}

div.wf-agentic-view .wf-agentic-info-tabs li.active a {
    color: #2196f3;
    border-bottom-color: #2196f3;
}

div.wf-agentic-view .wf-agentic-info-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
}

div.wf-agentic-view .wf-agentic-info-pane {
    display: none;
}

div.wf-agentic-view .wf-agentic-info-pane.active {
    display: block;
}

/* ========================================
   Tools Search
   ======================================== */
div.wf-agentic-view .wf-agentic-tools-search {
    position: relative;
    margin-bottom: 8px;
}

div.wf-agentic-view .wf-agentic-tools-search > i {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 11px;
}

div.wf-agentic-view .wf-agentic-tools-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px 6px 26px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
}

div.wf-agentic-view .wf-agentic-tools-search-input:focus {
    border-color: #428BCA;
}

/* ========================================
   Resource Cards (Tools tab)
   ======================================== */
div.wf-agentic-view .wf-agentic-tools-cards {
    overflow-y: auto;
}

div.wf-agentic-view .wf-agentic-tools-cards .wf-resource-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s, border-color 0.15s;
}

div.wf-agentic-view .wf-agentic-tools-cards .wf-resource-card:hover {
    border-color: #428BCA;
    box-shadow: 0 2px 8px rgba(66,139,202,0.18);
}

div.wf-agentic-view .wf-resource-card-type {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-resource-card-id {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   Empty State
   ======================================== */
div.wf-agentic-view .wf-agentic-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    text-align: center;
}

div.wf-agentic-view .wf-agentic-empty-state i {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.4;
}

div.wf-agentic-view .wf-agentic-empty-state p {
    font-size: 12px;
    margin: 0;
}

/* ========================================
   Events Column — Prompt Groups + Event Cards
   ======================================== */
div.wf-agentic-view .wf-events-column-inner {
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}

div.wf-agentic-view .wf-events-prompt-group {
    margin: 8px;
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    cursor: pointer;
}

div.wf-agentic-view .wf-events-prompt-header {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    background: #f5f7fa;
    border-bottom: 1px solid #eaedf1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-events-prompt-header i {
    color: #90a4ae;
}

div.wf-agentic-view .wf-events-group-cards {
    padding: 8px;
}

/* Event Cards */
div.wf-agentic-view .wf-event-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    margin-bottom: 4px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e8eaed;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

div.wf-agentic-view .wf-event-card:hover {
    border-color: #428BCA;
    box-shadow: 0 1px 4px rgba(66,139,202,0.12);
}

div.wf-agentic-view .wf-event-card-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

div.wf-agentic-view .wf-event-card-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 11px;
    color: #fff;
    background: #999;
}

div.wf-agentic-view .wf-event-card[data-ui-status="running"] .wf-event-card-icon {
    background: #428BCA;
    animation: fora-trace-pulse 1.5s ease-in-out infinite;
}

div.wf-agentic-view .wf-event-card[data-ui-status="success"] .wf-event-card-icon {
    background: #5cb85c;
}

div.wf-agentic-view .wf-event-card[data-ui-status="failure"] .wf-event-card-icon {
    background: #d9534f;
}

div.wf-agentic-view .wf-event-card[data-ui-status="resolved"] .wf-event-card-icon {
    background: #5cb85c;
}

div.wf-agentic-view .wf-event-card-info {
    min-width: 0;
    flex: 1;
}

div.wf-agentic-view .wf-event-card-name {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: monospace;
}

div.wf-agentic-view .wf-event-card-meta {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-event-card-eye {
    flex: 0 0 auto;
    color: #ccc;
    font-size: 13px;
    margin-left: 6px;
    transition: color 0.15s;
}

div.wf-agentic-view .wf-event-card:hover .wf-event-card-eye {
    color: #428BCA;
}

/* ========================================
   Outputs Tab
   ======================================== */
div.wf-agentic-view .wf-agentic-outputs-list {
    overflow-y: auto;
}

div.wf-agentic-view .wf-agentic-output-item {
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid #e8eaed;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

div.wf-agentic-view .wf-agentic-output-item:hover {
    border-color: #428BCA;
}

div.wf-agentic-view .wf-agentic-output-item-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.wf-agentic-view .wf-agentic-output-item-type {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
    font-family: monospace;
}

div.wf-agentic-view .wf-agentic-output-item-preview {
    font-size: 11px;
    color: #777;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   Pre-Agent Worker Status Overlay (centered)
   ======================================== */
.wf-agentic-status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
}

.wf-agentic-status-card {
    text-align: center;
}

.wf-agentic-status-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
}

.wf-agentic-status-worker-line {
    margin-top: 14px;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    white-space: nowrap;
}

.wf-agentic-status-worker-text {
    background: linear-gradient(90deg, #888 0%, #888 40%, #333 50%, #888 60%, #888 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: wf-status-text-shimmer 2s ease-in-out infinite;
}

.wf-agentic-status-dots {
    display: none;
}

@keyframes wf-status-text-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ========================================
   FORA Height Chain Fix (agentic view)
   Ensures FORA fills the flex container and scrolls properly
   ======================================== */
div.wf-agentic-view .agent-fora {
    overflow: hidden;
    min-height: 0;
}

div.wf-agentic-view .agent-fora > div.d3view-fora {
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.wf-agentic-view .agent-fora > div.d3view-fora > .fora-result-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

div.wf-agentic-view .agent-fora > div.d3view-fora > .fora-result-container > .fora-result {
    height: 100%;
}

/* ========================================
   FORA Disabled State (during pre-agent execution)
   ======================================== */
.agent-fora.fora-disabled {
    pointer-events: none !important;
    opacity: 0.4;
    user-select: none;
}

.agent-fora.fora-disabled * {
    pointer-events: none !important;
}

.agent-fora.fora-disabled .fora-input,
.agent-fora.fora-disabled textarea,
.agent-fora.fora-disabled [contenteditable] {
    pointer-events: none !important;
    -webkit-user-modify: read-only;
}

/* ========================================
   Other Worker Active (legacy fallback)
   ======================================== */
div.wf-agentic-view.other-worker-active {
    cursor: not-allowed;
}

/* Hide main content when in agentic view */
div.workflow .workflow-index[data-view="agentic"] .wf-main-content {
    display: none !important;
}

/*
 * CSS for template: wf-ai-fora-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-ai-fora-tpl.tpl
 * Auto-generated by modularize_css.py
 * Updated by shashank2104 on 01/22/2026 - DVFIV-1901 - Modern AI Chat UI
 * Updated by shashank2104 on 01/26/2026 at 01:20 PM - DVFIV-1906 - Add CSS variables for generic styling
 * DW-2699: layout classes wf-ai-fora-layout-horizontal / wf-ai-fora-layout-vertical
 */

/* CSS Variables for wf-ai-fora styling - can be overridden by parent containers */
:root {
	--wf-ai-fora-bg: #ffffff;
	--wf-ai-fora-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--wf-ai-fora-header-color: #ffffff;
	--wf-ai-fora-border-radius: 16px;
	--wf-ai-fora-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	--wf-ai-fora-shadow-hover: 0 6px 25px rgba(0, 0, 0, 0.2);
	--wf-ai-fora-width: 420px;
	--wf-ai-fora-height: 600px;
	--wf-ai-fora-header-height: 44px;
	--wf-ai-fora-header-padding: 0 16px;
	--wf-ai-fora-btn-bg: rgba(255, 255, 255, 0.15);
	--wf-ai-fora-btn-bg-hover: rgba(255, 255, 255, 0.25);
	--wf-ai-fora-tab-active-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--wf-ai-fora-tab-hover-bg: rgba(102, 126, 234, 0.1);
}

div.workflow .wf-ai-fora.wf-floating-div,
.wf-ai-fora.wf-floating-div {
    pointer-events: all;
    position: absolute!important;
    height: 600px;
    bottom: 0px;
    right: 0;
    left: unset;
    width: 420px;
    display: block;
    z-index: 100;
    overflow: hidden;
    min-width: 380px;
    max-width: 90vw;
    min-height: 400px;
    max-height: calc(100vh - var(--wf-header-h, 80px));
    opacity: 1;
    background: var(--wf-ai-fora-bg, #ffffff);
    border: none;
    box-shadow: var(--wf-ai-fora-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
    border-radius: var(--wf-ai-fora-border-radius, 16px);
    padding: 0;
}
div.workflow .wf-ai-fora.wf-floating-div,
.wf-ai-fora.wf-floating-div.wf-ai-fora-layout-horizontal {
    max-width: 100vw;
}

div.workflow .wf-ai-fora.wf-floating-div:not(.isVisible),
.wf-ai-fora.wf-floating-div:not(.isVisible) {
    display: none;
}

div.workflow .wf-ai-fora.wf-floating-div .fora-input {
    max-height: 100px;
    font-size: 1.2em;
}

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header {
    cursor: move;
    user-select: none;
    background: var(--wf-ai-fora-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: var(--wf-ai-fora-header-color, #ffffff);
    border-radius: var(--wf-ai-fora-border-radius, 16px) var(--wf-ai-fora-border-radius, 16px) 0 0;
    height: var(--wf-ai-fora-header-height, 56px);
    padding: var(--wf-ai-fora-header-padding, 0 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .lead,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .lead {
    color: var(--wf-ai-fora-header-color, #ffffff);
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .fa-robot,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .fa-robot {
    color: var(--wf-ai-fora-header-color, #ffffff);
}

/* Header button group — never wrap */
div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn-group,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn-group {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 2px;
}

/* Agent title should truncate before buttons wrap */
div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .wf-ai-fora-sidebar-toggle-btn,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .wf-ai-fora-sidebar-toggle-btn {
    min-width: 0;
    overflow: hidden;
}
div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .wf-ai-fora-sidebar-toggle-btn .lead,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .wf-ai-fora-sidebar-toggle-btn .lead {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
    background: var(--wf-ai-fora-btn-bg, rgba(255, 255, 255, 0.15));
    border: none;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    font-size: 12px;
    flex-shrink: 0;
}

/* top: unset removed — it was blocking jQuery UI draggable from moving on the Y axis */

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn:hover,
.wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn:hover {
    background: var(--wf-ai-fora-btn-bg-hover, rgba(255, 255, 255, 0.25));
}

div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn i {
    margin: 0;
}

/* Hide text in header buttons - icon only */
div.workflow .wf-ai-fora.wf-floating-div .wf-ai-fora-header .btn span:not(.sr-only) {
    display: none;
}

/* Sidebar toggle button styles */
div.workflow .wf-ai-fora-sidebar-toggle-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

div.workflow .wf-ai-fora-sidebar-toggle-btn:hover {
    background: transparent !important;
}

div.workflow .wf-ai-fora.wf-floating-div.minimized {
    height: 80px !important;
    /* collapsed height */
    max-height: 80px;
    min-height: 80px;
    /* jQuery UI resizable handles this functionality */
    overflow: hidden;
}

div.workflow .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-body,
div.workflow .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-content {
    display: none;
    /* hide body when minimized */
}

div.workflow .wf-ai-fora.wf-floating-div:hover,
.wf-ai-fora.wf-floating-div:hover {
    opacity: 1;
    /* full opacity on hover */
    box-shadow: var(--wf-ai-fora-shadow-hover, 0 6px 25px rgba(0, 0, 0, 0.2));
    /* stronger shadow on hover */
}

div.workflow .wf-ai-fora-tabs-sidebar {
    flex: 0 0 180px;
    width: 180px;
    border-right: 1px solid #eee;
    background-color: #fafafa;
    overflow-y: auto;
    transition: flex 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}

div.workflow .wf-ai-fora-tabs-sidebar .wf-ai-agent-tabs-list {
    list-style: none;
    padding: 8px;
    margin: 0;
}

div.workflow .wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-item {
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 13px;
}

div.workflow .wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-item:hover,
.wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-item:hover {
    background: var(--wf-ai-fora-tab-hover-bg, rgba(102, 126, 234, 0.1));
}

div.workflow .wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-item.active,
.wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-item.active {
    background: var(--wf-ai-fora-tab-active-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: #ffffff;
}

div.workflow .wf-ai-fora-tabs-sidebar .wf-ai-agent-tab-id {
    display: none;
}

div.workflow .wf-ai-fora-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #ffffff;
}

/** DW-2699 - Horizontal layout: tab bar on top (TabManager), full width content below **/
div.workflow .wf-ai-fora.wf-ai-fora-layout-horizontal .wf-ai-fora-content {
    flex-direction: column;
}

div.workflow .wf-ai-fora.wf-ai-fora-layout-horizontal .wf-ai-fora-tabs-sidebar {
    display: none !important;
}

div.workflow .wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-tabs-sidebar {
    display: none !important;
}

div.workflow .wf-ai-fora.wf-ai-fora-layout-horizontal .wf-ai-fora-tab-manager {
    display: block;
    flex-shrink: 0;
    overflow: hidden;
    min-height: 0;
}

div.workflow .wf-ai-fora.wf-ai-fora-layout-vertical .wf-ai-fora-tab-manager {
    display: none !important;
}

div.workflow .wf-ai-fora-content-area {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

div.workflow .wf-ai-fora-agent-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    overflow-y: auto;
    background: #ffffff;
}
div.workflow .wf-ai-fora-agent-body[data-agent-id="workflow_agent"] .agent-header {
    display: none;
}

div.workflow .wf-ai-fora-agent-body.active {
    display: block;
}

/** DW-2699 - Standalone: no div.workflow ancestor so duplicate visibility rules **/
.wf-ai-fora .wf-ai-fora-agent-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    overflow-y: auto;
    background: #ffffff;
}
.wf-ai-fora .wf-ai-fora-agent-body.active {
    display: block;
}
.wf-ai-fora .wf-ai-fora-agent-body .wf-embedded-workflow-container {
    min-height: 400px;
}

/* Continue workflow container */
div.workflow .wf-ai-continue-workflow-container {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
    display: flex;
    align-items: center;
    gap: 12px;
}

div.workflow .wf-ai-continue-workflow-container .continue-workflow-msg {
    font-size: 12px;
    color: #666;
}

/** DW-2699 - Hide continue workflow for virtual tabs (ontology, workflow agent) **/
div.workflow .wf-ai-continue-workflow-container.hidden {
    display: none !important;
}

div.workflow .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-content {
    display: none;
}

div.workflow .wf-ai-fora.wf-floating-div.minimized .wf-ai-continue-workflow-container {
    display: none;
}

/* Hidden sidebar state */
div.workflow .wf-ai-fora-tabs-sidebar.hidden {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    border-right: none !important;
    overflow: hidden !important;
    opacity: 0;
}

/* Fullscreen state - TRUE fullscreen with position: fixed */
div.workflow .wf-ai-fora.wf-floating-div.fullscreen {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    background: #ffffff !important;
}

div.workflow .wf-ai-fora.wf-floating-div.fullscreen .wf-ai-fora-header {
    border-radius: 0;
}

div.workflow .wf-ai-fora.wf-floating-div.fullscreen .ui-resizable-handle {
    display: none !important;
}

/* Docked state - pill shape at bottom right corner */
div.workflow .wf-ai-fora.wf-floating-div.docked {
    position: fixed !important;
    width: 250px !important;
    min-width: 180px !important;
    max-width: 320px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    top: auto !important;
    right: 24px !important;
    left: auto !important;
    bottom: 24px !important;
    border-radius: 24px !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header {
    height: 100%;
    padding: 0 12px;
    border-radius: 24px;
}

div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header .lead {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-content,
div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-continue-workflow-container,
div.workflow .wf-ai-fora.wf-floating-div.docked > .pl-flex-v > *:not(.wf-ai-fora-header) {
    display: none !important;
}

div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-sidebar-toggle-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-sidebar-toggle-btn h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

div.workflow .wf-ai-fora.wf-floating-div.docked .agent-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: inline-block;
}

/* Hide buttons when docked, only show maximize and close */
div.workflow .wf-ai-fora.wf-floating-div.docked .dock-btn,
div.workflow .wf-ai-fora.wf-floating-div.docked .maximize-restore-btn,
div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-expand-btns,
div.workflow .wf-ai-fora.wf-floating-div.docked .clear-conversation-btn,
div.workflow .wf-ai-fora.wf-floating-div.docked .wf-ai-convo-actions-dropdown {
    display: none !important;
}

/* Hide resize handles when docked */
div.workflow .wf-ai-fora.wf-floating-div.docked .ui-resizable-handle {
    display: none !important;
}

/** DVFIV-1917 - Expand horizontally: full width of container; only n/s handles active **/
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-e,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-w,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-ne,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-nw,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-se,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-sw,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-e,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-w,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-ne,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-nw,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-se,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-sw {
    display: none !important;
}

/** DVFIV-1917 - Expand vertically: full height of container; only e/w handles active **/
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v {
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-n,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-s,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-ne,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-nw,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-se,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-sw,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-n,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-s,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-ne,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-nw,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-se,
.wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-sw {
    display: none !important;
}

/* Expand width/height buttons removed from template */

/* Resize handle styles for horizontal and vertical expansion */
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-e,
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-w {
    cursor: ew-resize;
    width: 8px;
}

div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-n,
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-s {
    cursor: ns-resize;
    height: 8px;
}

div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-ne,
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-nw,
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-se,
div.workflow .wf-ai-fora.wf-floating-div .ui-resizable-sw {
    width: 12px;
    height: 12px;
}

/** DW-2699 - Dropdown layout: compact header with agent dropdown. Full specificity + !important to override generic .btn and sidebar-toggle rules. **/
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-wrap {
    flex: 0 1 auto;
    min-width: 0;
    position: relative;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle,
.wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle {
    width: auto !important;
    min-width: 120px !important;
    height: 32px !important;
    padding: 6px 10px !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    color: var(--wf-ai-fora-header-color, #ffffff);
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    text-shadow: none !important;
    gap: 6px !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle span.agent-title-text,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle span.agent-title-text {
    display: inline !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle:hover,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle:hover,
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle:focus,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-toggle:focus {
    color: var(--wf-ai-fora-header-color, #ffffff);
    background: var(--wf-ai-fora-btn-bg-hover, rgba(255, 255, 255, 0.25)) !important;
    border: none !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-wrap .dropdown-menu,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-wrap .dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
    z-index: 10001;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-wrap.open .dropdown-menu,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header .wf-ai-agent-dropdown-wrap.open .dropdown-menu {
    display: block !important;
    visibility: visible !important;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown .wf-ai-fora-header,
.wf-ai-fora.wf-ai-fora-layout-dropdown .wf-ai-fora-header {
    overflow: visible;
}
div.workflow .wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown,
.wf-ai-fora.wf-floating-div.wf-ai-fora-layout-dropdown {
    overflow: visible;
}

/** Added by shashank2104 - DW-2699 - Standalone workflow agent (Ctrl+Shift+W): wrapper does not block; chat at bottom-right like regular agent **/
.wf-global-agent-floating {
    pointer-events: none;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper {
    pointer-events: all;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone {
    position: relative;
    width: 0;
    height: 0;
    display: block;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora {
    position: absolute !important;
    bottom: 0;
    right: 0;
    left: auto;
}

/** Added by shashank2104 on 02/08/2026 at 11:28 PM - Standalone workflow agent: rules when not inside div.workflow (e.g. Ctrl+Shift+W) **/
/* ----- Standalone workflow agent: rules when not inside div.workflow ----- */

/* 1. Wrapper: do not clip the floating chat; ensure header and content are visible */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone {
    overflow: visible;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div {
    top: unset !important;
    bottom: 0 !important;
}

/* 1. Ensure wf-ai-fora-header is visible in standalone */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .wf-ai-fora-header,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .wf-ai-fora-header {
    display: flex !important;
    min-height: var(--wf-ai-fora-header-height, 56px);
    height: var(--wf-ai-fora-header-height, 56px);
    background: var(--wf-ai-fora-header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: var(--wf-ai-fora-header-color, #ffffff);
    padding: var(--wf-ai-fora-header-padding, 0 16px);
    align-items: center;
    justify-content: space-between;
    visibility: visible;
    opacity: 1;
}

/* Sidebar toggle in standalone (mirror div.workflow-only rules) */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-sidebar-toggle-btn,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-sidebar-toggle-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-sidebar-toggle-btn:hover,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-sidebar-toggle-btn:hover {
    background: transparent !important;
}

/* 2. Minimized state */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized {
    height: 80px !important;
    max-height: 80px;
    min-height: 80px;
    overflow: hidden;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-body,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-content,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-body,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-fora-content {
    display: none;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-continue-workflow-container,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.minimized .wf-ai-continue-workflow-container {
    display: none;
}

/* 2. Fullscreen state */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    background: #ffffff !important;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen .wf-ai-fora-header,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen .wf-ai-fora-header {
    border-radius: 0;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen .ui-resizable-handle,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.fullscreen .ui-resizable-handle {
    display: none !important;
}

/* 2. Docked state */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked {
    position: fixed !important;
    width: 250px !important;
    min-width: 180px !important;
    max-width: 320px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    top: auto !important;
    right: 24px !important;
    left: auto !important;
    bottom: 24px !important;
    border-radius: 24px !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header {
    height: 100%;
    padding: 0 12px;
    border-radius: 24px;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header .lead,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-header .lead {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-content,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-continue-workflow-container,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked > .pl-flex-v > *:not(.wf-ai-fora-header),
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-content,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-continue-workflow-container,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked > .pl-flex-v > *:not(.wf-ai-fora-header) {
    display: none !important;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .minimize-expand-btn,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .maximize-restore-btn,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .clear-conversation-btn,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .minimize-expand-btn,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .maximize-restore-btn,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-fora-expand-btns,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .clear-conversation-btn,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .wf-ai-convo-actions-dropdown {
    display: none !important;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .ui-resizable-handle,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .ui-resizable-handle {
    display: none !important;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .agent-title-text,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.docked .agent-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: inline-block;
}

/* 2. Expanded H/V - handle visibility already has .wf-ai-fora.wf-floating-div variants; ensure standalone gets same by scoping */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-e,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-w,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-ne,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-nw,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-se,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-sw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-e,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-w,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-ne,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-nw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-se,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-h .ui-resizable-sw {
    display: none !important;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-n,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-s,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-ne,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-nw,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-se,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-sw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-n,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-s,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-ne,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-nw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-se,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div.wf-ai-fora-expanded-v .ui-resizable-sw {
    display: none !important;
}

/* 2. Resize handle styles for standalone */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-e,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-w,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-e,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-w {
    cursor: ew-resize;
    width: 8px;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-n,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-s,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-n,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-s {
    cursor: ns-resize;
    height: 8px;
}
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-ne,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-nw,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-se,
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-sw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-ne,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-nw,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-se,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora.wf-floating-div .ui-resizable-sw {
    width: 12px;
    height: 12px;
}

/* 3. Hide agent-header (Run, Back to Canvas, Clear) inside workflow_agent tab when standalone */
.wf-global-agent-floating .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-agent-body[data-agent-id="workflow_agent"] .agent-header,
.wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora-agent-body[data-agent-id="workflow_agent"] .agent-header {
    display: none !important;
}

/* Conversation actions dropdown */
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-toggle {
    background: var(--wf-ai-fora-btn-bg);
    border: none;
    color: inherit;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-toggle:hover,
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-toggle:focus,
.wf-ai-fora .wf-ai-convo-actions-dropdown.open .dropdown-toggle {
    background: var(--wf-ai-fora-btn-bg-hover);
}
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-menu {
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
}
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-menu > li > a {
    padding: 8px 16px;
    font-size: 13px;
    color: #333;
}
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-menu > li > a:hover {
    background-color: #f5f5f5;
}
.wf-ai-fora .wf-ai-convo-actions-dropdown .dropdown-menu > li > a > .fa {
    width: 16px;
    text-align: center;
}

/* Load conversation modal */
.wf-convo-load-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}
.wf-convo-load-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wf-convo-load-list > li:hover {
    background: #f8f9fa;
}
.wf-convo-load-list > li:last-child {
    border-bottom: none;
}
.wf-convo-load-item-info {
    flex: 1;
    min-width: 0;
}
.wf-convo-load-item-name {
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-convo-load-item-date {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}


/*
 * CSS for template: wf-ancestry-popover-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-ancestry-popover-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.popover.tour-wf {
max-height: 100% !important;
}

div.popover.tour-wf .popover-title {
display: inline-block;
    background-color: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

div.popover.tour-wf .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

div.popover.tour-wf {
max-height: 100% !important;
}

div.popover.tour-wf .popover-title {
display: inline-block;
    background-color: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

div.popover.tour-wf .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

div.workflow-modal li.field-item [data-toggle="popover"]>* {
pointer-events: none;
}

div.popover.wf-dependent-info {
width: 400px;
    height: 250px;
    max-width: unset;
}

div.popover.wf-dependent-info .popover-header {
position: relative;
}

div.popover.wf-dependent-info .popover-header .close_popup {
position: absolute;
    top: 4px;
    z-index: 2;
    right: 5px;
}

.wf-dependent-info.popover .w-options {
opacity: 0;
    pointer-events: none;
}

.wf-dependent-info.popover li:hover .w-options {
opacity: 1;
    pointer-events: all;
}

.wf-dependent-info.popover .simlytiks-manager {
display: none;
}

div.popover.tour-wf {
max-height: 100% !important;
}

div.popover.tour-wf .popover-title {
display: inline-block;
    background-color: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
}

div.popover.tour-wf .popover-header {
background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

div.workflow-modal li.field-item [data-toggle="popover"]>* {
pointer-events: none;
}

div.popover.wf-dependent-info {
width: 400px;
    height: 250px;
    max-width: unset;
    z-index: 1052;
}

div.popover.wf-dependent-info .popover-header {
position: relative;
}

div.popover.wf-dependent-info .popover-header .close_popup {
position: absolute;
    top: 4px;
    z-index: 2;
    right: 5px;
}

.wf-dependent-info.popover .w-options {
opacity: 0;
    pointer-events: none;
}

.wf-dependent-info.popover li:hover .w-options {
opacity: 1;
    pointer-events: all;
}

div.popover.polling-worker-completed-po,
div.popover.polling-worker-remaining-po,
div.popover.polling-worker-all-simulations-po {
max-width: 800px;
    min-width: 600px;
    max-height: 600px;
    overflow: hidden;
}

div.popover.polling-worker-completed-po .popover-content,
div.popover.polling-worker-remaining-po .popover-content,
div.popover.polling-worker-all-simulations-po .popover-content {
padding: 15px;
    max-height: 550px;
    overflow: auto;
}

div.popover.polling-worker-completed-po .simulation-popover-content,
div.popover.polling-worker-remaining-po .simulation-popover-content,
div.popover.polling-worker-all-simulations-po .simulation-popover-content {
width: 100%;
    height: 100%;
}

div.popover.polling-worker-completed-po .d3view-form-builder-container,
div.popover.polling-worker-remaining-po .d3view-form-builder-container,
div.popover.polling-worker-all-simulations-po .d3view-form-builder-container {
max-height: 500px;
    overflow: auto;
}

div.popover.polling-worker-completed-po .d3view-form-builder-container .formbuilder-container,
div.popover.polling-worker-remaining-po .d3view-form-builder-container .formbuilder-container,
div.popover.polling-worker-all-simulations-po .d3view-form-builder-container .formbuilder-container {
padding: 0;
    margin: 0;
}

div.popover.polling-worker-completed-po,
div.popover.polling-worker-remaining-po,
div.popover.polling-worker-all-simulations-po {
z-index: 1060;
}



/*
 * CSS for template: wf-code-editor-sidebar-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-code-editor-sidebar-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.custom-editor .treeview .tree-list-item [data-isleaf="true"] {
cursor: move;
}



/*
 * CSS for template: wf-data-view-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-data-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .formbuilder-container div.d3view-inputsBuilder:not([data-view="simple"]) {
border: none;
}

div.workflow-modal .formbuilder-container div.d3view-inputsBuilder:not([data-view="simple"]) {
border: none;
}

div.workflow .workflow-index[data-view="basic"] .basic-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="basic"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="basic"] .level-2-center,
div.workflow .workflow-index[data-view="basic"] .level-2-right {
display: none;
}

div.workflow div.workflow-index[data-view="basic"] .wf-basic-container>.ui-layout-resizer:hover {
background-color: #66afe9;
}

div.workflow div.workflow-index[data-view="basic"] span.wf-canvas-tooltip {
position: absolute;
}

div.workflow .workflow-index[data-view="basic"] .back_to_full {
display: block !important;
}

div.workflow .workflow-index[data-view="widgetsUI"] .widgets-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="widgetsUI"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="keyword"] .keyword-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="keyword"] .full-view,
div.workflow .workflow-index[data-view="keyword"] .wf-execution-controls {
display: none;
}

div.workflow .workflow-index[data-view="keyword"] .keyword-view-container .ace_gutter,
div.workflow .workflow-index[data-view="keyword"] .keyword-view-container .ace_gutter>.ace_layer {
width: 75px !important;
}

div.workflow .workflow-index[data-view="keyword"] .keyword-view-container .ace_scroller {
left: 74px !important;
}

div.workflow-modal .formbuilder-container div.d3view-inputsBuilder:not([data-view="simple"]) {
border: none;
}

div.workflow .workflow-index[data-view="basic"] .basic-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="basic"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="basic"] .level-2-center,
div.workflow .workflow-index[data-view="basic"] .level-2-right {
display: none;
}

div.workflow div.workflow-index[data-view="basic"] .wf-basic-container>.ui-layout-resizer:hover {
background-color: #66afe9;
}

div.workflow div.workflow-index[data-view="basic"] span.wf-canvas-tooltip {
position: absolute;
}

div.workflow .workflow-index[data-view="basic"] .back_to_full {
display: block !important;
}

div.workflow .workflow-index[data-view="widgetsUI"] .widgets-view-container {
display: block !important;
}

div.workflow .workflow-index[data-view="widgetsUI"] .full-view {
display: none;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view {
display: block !important;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .node-name,
div.workflow .wf-main-container.dataEnabled .wf-data-view .worker-name {
display: block !important;
    max-width: calc(100% - 30px);
    left: 5px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .node-name .badge {
position: absolute;
    right: 4px;
    top: 0px;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt {
transition: all 0.2s ease-in-out;
    cursor: pointer;
    background-color: #FFF;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover {
background-color: rgba(0, 123, 255, 0.25);
    border-radius: 4px;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover .worker-name {
color: #007bff;
    font-weight: 600;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover .wf-worker-type {
color: #6c757d;
    font-weight: 500;
}

div.workflow .workflow-index[data-view="agentic"] .agentic-view-container {
display: block !important;
    position: relative;
    top: 0px;
    height: 100%;
}

div.workflow .workflow-index[data-view="agentic"] .full-view {
display: none;
}

div.workflow .workflow-index[data-view="agentic"] .start-agent-overlay {
position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

div.workflow .workflow-index[data-view="agentic"] [data-agent-tab]:hover .start-agent-overlay {
opacity: 1;
    pointer-events: all;
}

div.workflow .workflow-index[data-view="agentic"] .start-agent {
/*font-size: 2em;*/
    /*padding: 1em 2em;*/
    border-radius: 2em;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.wf-data-container .data-header-actions {
display: flex;
    gap: 5px;
}

.wf-data-container .toggle-view-btn {
display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.wf-data-container .study-simulation-graph-container {
position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wf-data-container .study-simulation-graph-container.hidden {
display: none;
}

div.workflow div.wf-data-view .dependencies-view-container {
padding: 20px;
    gap: 40px;
    overflow-x: auto;
    position: relative;
    align-items: start;
}

div.workflow div.wf-data-view .dep-start-column {
flex: 0 0 200px;
    position: relative;
}

div.workflow div.wf-data-view .dep-inputs-column,
div.workflow div.wf-data-view .dep-worker-column {
flex: 0 0 250px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

div.workflow div.wf-data-view .dep-column-header {
padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .dep-column-header h5 {
margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
}

div.workflow div.wf-data-view .dep-search {
margin-bottom: 0;
}

div.workflow div.wf-data-view .dep-inputs-list,
div.workflow div.wf-data-view .dep-workers-list {
flex: 1;
    overflow-y: auto;
    padding: 10px;
}

div.workflow div.wf-data-view .dep-input-item,
div.workflow div.wf-data-view .dep-worker-item {
padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

div.workflow div.wf-data-view .dep-input-item:hover,
div.workflow div.wf-data-view .dep-worker-item:hover {
background: #f0f7ff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .dep-input-item.selected,
div.workflow div.wf-data-view .dep-worker-item.selected {
background: #e3f2fd;
    border-color: #007bff;
    border-width: 2px;
}

div.workflow div.wf-data-view .dep-item-name {
font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

div.workflow div.wf-data-view .dep-item-type {
font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow div.wf-data-view .dep-dynamic-columns {
gap: 40px;
    height: 100%;
}

div.workflow div.wf-data-view .dep-worker-column .dep-column-header {
position: relative;
}

div.workflow div.wf-data-view .dep-close-column {
position: absolute;
    right: 5px;
    top: 5px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
}

div.workflow div.wf-data-view .dep-close-column:hover {
color: #dc3545;
}

div.workflow div.wf-data-view .dep-no-results {
text-align: center;
    padding: 30px;
    color: #6c757d;
}

div.workflow div.wf-data-view .dep-worker-actions {
margin-top: 8px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

div.workflow div.wf-data-view .dep-input-actions {
margin-top: 8px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

div.workflow div.wf-data-view .dependencies-view-container {
position: relative;
}

div.workflow div.wf-data-view .dep-start-column::after {
content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 1;
}

div.workflow div.wf-data-view .dep-start-column::before {
content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 0;
    height: 0;
    border-left: 8px solid #6c757d;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}

div.workflow div.wf-data-view .dep-inputs-column::after {
content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 1;
}

div.workflow div.wf-data-view .dep-inputs-column::before {
content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 0;
    height: 0;
    border-left: 8px solid #6c757d;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}

div.workflow div.wf-data-view .dep-dynamic-columns {
position: relative;
}

div.workflow div.wf-data-view .dep-dynamic-columns::before {
content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

div.workflow div.wf-data-view .dep-worker-column::after {
content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid #6c757d;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    transform: translateY(-50%);
    z-index: 3;
}

div.workflow div.wf-data-view .dep-worker-column:last-child::after {
display: none;
}

div.workflow div.wf-data-view .dep-worker-actions .btn {
font-size: 11px;
    padding: 4px 8px;
    line-height: 1.2;
}

div.workflow div.wf-data-view .dep-worker-actions .btn i {
margin-right: 3px;
}

div.workflow div.wf-data-view .dep-worker-item:hover .dep-worker-actions {
opacity: 1;
}

div.workflow div.wf-data-view .dep-worker-actions {
opacity: 0.7;
    transition: opacity 0.2s;
}

div.workflow div.wf-data-view .study-simulation-table-container {
padding: 20px;
    gap: 20px;
    overflow-x: auto;
}

div.workflow div.wf-data-view .studies-column,
div.workflow div.wf-data-view .simulations-column {
flex: 0 0 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow div.wf-data-view .studies-column-header,
div.workflow div.wf-data-view .simulations-column-header {
padding: 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .studies-column-header h5,
div.workflow div.wf-data-view .simulations-column-header h5 {
margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .study-search,
div.workflow div.wf-data-view .simulation-search {
margin-bottom: 0;
}

div.workflow div.wf-data-view .studies-list,
div.workflow div.wf-data-view .simulations-list {
flex: 1;
    overflow-y: auto;
    padding: 15px;
}

div.workflow div.wf-data-view .study-item,
div.workflow div.wf-data-view .simulation-item {
padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

div.workflow div.wf-data-view .study-item:hover,
div.workflow div.wf-data-view .simulation-item:hover {
background: #f0f7ff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .study-item.selected {
background: #e3f2fd;
    border-color: #007bff;
    border-width: 2px;
}

div.workflow div.wf-data-view .study-item-name,
div.workflow div.wf-data-view .simulation-item-name {
margin-bottom: 6px;
}

div.workflow div.wf-data-view .study-item-name h3,
div.workflow div.wf-data-view .simulation-item-name h3 {
margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

div.workflow div.wf-data-view .study-item-type,
div.workflow div.wf-data-view .simulation-item-type {
font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}

div.workflow div.wf-data-view .study-simulation-count {
font-size: 11px;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}

div.workflow div.wf-data-view .study-simulation-count i {
color: #28a745;
}

div.workflow div.wf-data-view .simulation-study-ref {
font-size: 11px;
    color: #6c757d;
    font-style: italic;
    margin-top: 4px;
}

div.workflow div.wf-data-view .study-sim-no-results {
text-align: center;
    padding: 30px;
    color: #6c757d;
}

div.workflow div.wf-data-view .study-sim-no-results i {
font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

div.workflow div.wf-data-view .dep-empty-column {
border: 2px dashed #dee2e6;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .dep-empty-state {
text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

div.workflow div.wf-data-view .dep-empty-state i {
font-size: 48px;
    color: #dee2e6;
    margin-bottom: 20px;
    display: block;
}

div.workflow div.wf-data-view .dep-empty-state h6 {
font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

div.workflow div.wf-data-view .dep-smart-group {
border: 2px solid #007bff;
    border-radius: 6px;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="critical"] {
border-color: #dc3545;
    background: #fff5f5;
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="terminal"] {
border-color: #28a745;
    background: #f0fff4;
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="intermediate"] {
border-color: #ffc107;
    background: #fffbf0;
}

div.workflow div.wf-data-view .dep-smart-worker {
position: relative;
    border-left: 3px solid #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="0"] {
border-left-color: #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="1"] {
border-left-color: #28a745;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="2"] {
border-left-color: #ffc107;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="3"] {
border-left-color: #6f42c1;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="4"] {
border-left-color: #fd7e14;
}

div.workflow div.wf-data-view .dep-level-badge {
display: inline-block;
    background: #007bff;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 8px;
    min-width: 20px;
    text-align: center;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="0"] .dep-level-badge {
background: #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="1"] .dep-level-badge {
background: #28a745;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="2"] .dep-level-badge {
background: #ffc107;
    color: #333;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="3"] .dep-level-badge {
background: #6f42c1;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="4"] .dep-level-badge {
background: #fd7e14;
}

div.workflow div.wf-data-view .dep-level-section {
margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
}

div.workflow div.wf-data-view .dep-level-header {
padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

div.workflow div.wf-data-view .dep-toggle-level {
width: 100%;
    text-align: left;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #495057;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

div.workflow div.wf-data-view .dep-toggle-level:hover {
background: #e9ecef;
    color: #007bff;
}

div.workflow div.wf-data-view .dep-toggle-level i {
margin-right: 6px;
    transition: transform 0.2s ease;
}

div.workflow div.wf-data-view .dep-level-content {
padding: 8px;
    background: #fff;
}

div.workflow div.wf-data-view .data-view-controls {
border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .data-view-controls .control-group {
display: flex;
    align-items: center;
    gap: 10px;
}

div.workflow div.wf-data-view .data-view-controls .checkbox-inline {
margin: 0;
    font-size: 12px;
    color: #666;
}

div.workflow div.wf-data-view .data-view-controls .checkbox-inline input[type="checkbox"] {
margin-right: 5px;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn {
font-size: 12px;
    padding: 4px 12px;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn.btn-warning {
background: #ffc107;
    border-color: #ffc107;
    color: #333;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn.btn-warning:hover {
background: #e0a800;
    border-color: #d39e00;
}

div.workflow div.wf-data-view .dep-empty-state p {
font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

div.workflow div.wf-data-view .study-sim-no-results h6 {
font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

div.workflow div.wf-data-view .study-sim-no-results p {
font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

div.workflow div.wf-data-view .rpt-reporters-container {
padding: 15px;
    gap: 15px;
}

div.workflow div.wf-data-view .rpt-reporters-column,
div.workflow div.wf-data-view .rpt-datasets-column {
flex: 0 0 350px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow div.wf-data-view .rpt-column-header {
padding: 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .rpt-column-header h5 {
margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .rpt-search,
div.workflow div.wf-data-view .rpt-dataset-search {
margin-bottom: 0;
}

div.workflow div.wf-data-view .rpt-reporters-list,
div.workflow div.wf-data-view .rpt-datasets-list {
flex: 1;
    overflow-y: auto;
    padding: 15px;
}

div.workflow div.wf-data-view .rpt-reporter-item {
padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

div.workflow div.wf-data-view .rpt-reporter-item:hover {
border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
    transform: translateY(-1px);
}

div.workflow div.wf-data-view .rpt-reporter-item.selected {
border-color: #007bff;
    background: #e7f3ff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

div.workflow div.wf-data-view .rpt-reporter-item-name h3 {
margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .rpt-reporter-item-name a {
color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

div.workflow div.wf-data-view .rpt-reporter-item-name a:hover {
color: #0056b3;
    text-decoration: underline;
}

div.workflow div.wf-data-view .rpt-reporter-item-type {
font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count {
font-size: 12px;
    color: #6c757d;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count i {
color: #007bff;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count .dataset-count {
font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .rpt-dataset-item {
padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: all 0.2s;
}

div.workflow div.wf-data-view .rpt-dataset-item:hover {
border-color: #28a745;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
    transform: translateY(-1px);
}

div.workflow div.wf-data-view .rpt-dataset-item-name {
font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow div.wf-data-view .rpt-dataset-item-name i {
color: #28a745;
}

div.workflow div.wf-data-view .rpt-dataset-source {
font-size: 11px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref {
font-size: 11px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref a {
color: #007bff;
    text-decoration: none;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref a:hover {
text-decoration: underline;
}

div.workflow div.wf-data-view .rpt-no-results {
text-align: center;
    padding: 30px;
    color: #6c757d;
}

div.workflow div.wf-data-view .rpt-no-results i {
font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

div.workflow div.wf-data-view .rpt-no-results h6 {
font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

div.workflow div.wf-data-view .rpt-no-results p {
font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

div.workflow div.wf-data-view .dep-branches-column {
flex: 1;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    border-left: 1px solid #ddd;
    overflow: hidden;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

div.workflow div.wf-data-view .dep-branches-column.visible {
display: flex;
}

div.workflow div.wf-data-view .dep-view-controls {
padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
}

div.workflow div.wf-data-view .dep-view-controls .checkbox-inline {
margin: 0;
    padding-top: 0;
}

div.workflow div.wf-data-view .dep-branches-container {
flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

div.workflow div.wf-data-view .dep-branches-container.pl-processing {
opacity: 0.5;
    pointer-events: none;
}

div.workflow div.wf-data-view .dep-branch {
margin-bottom: 30px;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

div.workflow div.wf-data-view .dep-branch.not-in-flow {
opacity: 0.5;
}

div.workflow div.wf-data-view .dep-branch-label {
font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 8px 12px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

div.workflow div.wf-data-view .dep-branch-workers {
display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 10px 0;
    gap: 0;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item {
flex: 0 0 180px;
    transition: opacity 0.3s ease;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
    min-width: 180px;
    /*max-width: 180px;*/
    width: 200px;
    height: 130px;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item .dep-item-name {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item:hover {
border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item.selected {
border-color: #007bff;
    border-width: 2px;
    background: #f0f7ff;
}

div.workflow div.wf-data-view .dep-worker-connector {
margin: 0 15px;
    color: #999;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state {
text-align: center;
    padding: 40px 20px;
    color: #888;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state i {
font-size: 48px;
    color: #ddd;
    margin-bottom: 15px;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state h6 {
margin: 10px 0 5px 0;
    color: #666;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state p {
margin: 0;
    color: #999;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs {
border-bottom: 2px solid #ddd;
    background-color: #f8f9fa;
    margin: 0;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li>a {
padding: 12px 20px;
    border-radius: 4px 4px 0 0;
    font-weight: 500;
    color: #666;
    text-decoration: none;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li>a:hover {
color: #007bff;
    background-color: #e9ecef;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li.active>a {
background-color: #fff;
    color: #007bff;
    border-bottom: 2px solid #007bff;
    font-weight: 600;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-flow-view {
height: 100%;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector-panel {
background: #f9f9f9;
    border-right: 2px solid #ddd;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector-header h5 {
color: #333;
    font-weight: 600;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector {
border: 2px solid #ddd;
    border-radius: 4px;
    padding: 8px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-grid {
display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box {
padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box:hover {
border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-2px);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box.selected {
border-color: #007bff;
    background: #f0f7ff;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box .option-label {
font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box .option-id {
font-size: 12px;
    color: #666;
    font-style: italic;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-panel {
background: #fff;
    padding: 20px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-container {
height: 100%;
    overflow-x: auto;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-category-section {
margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-category-title {
font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item {
padding: 8px 12px;
    margin: 5px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item .item-name {
font-weight: 500;
    color: #333;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item .item-meta {
font-size: 12px;
    color: #666;
    margin-top: 2px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-container {
margin-top: 15px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-container h6 {
margin: 0 0 10px 0;
    color: #666;
    font-weight: 500;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-clear-selection {
margin-top: 10px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-section {
display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    margin-top: 15px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section {
min-width: 250px;
    max-width: 350px;
    margin-right: 0px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section:not(:last-child)::after {
content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background: #007bff;
    z-index: 1;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section:not(:last-child)::before {
content: '→';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: #007bff;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section-header {
background: #f5f5f5;
    padding: 12px 15px;
    border-bottom: 2px solid #007bff;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section-content {
padding: 10px;
    max-height: 500px;
    overflow-y: auto;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card {
padding: 10px;
    margin: 5px 0;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    border-left: 3px solid #007bff;
    transition: all 0.2s ease;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-name {
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card:hover {
background: #f0f0f0;
    border-left-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-name {
font-weight: 500;
    color: #333;
    margin-bottom: 3px;
    font-size: 13px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-id {
font-size: 11px;
    color: #666;
    margin-bottom: 3px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-type {
font-size: 11px;
    color: #999;
    font-style: italic;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-icon {
margin-right: 8px;
    color: #007bff;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section .empty-message {
padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 13px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-panel {
min-width: 0;
    /* Fix flex container width calculation */
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-container {
min-width: 0;
    /* Fix flex container width calculation */
    width: 100%;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-section.flow-graph-view {
display: block !important;
    width: 100%;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-container {
width: 100%;
    overflow: auto;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-node {
cursor: pointer;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-node:hover rect {
stroke: #007bff;
    stroke-width: 2;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-edge {
transition: stroke-width 0.2s;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-edge:hover {
stroke-width: 3;
    stroke: #007bff;
}

div.workflow div.wf-data-view .study-simulation-table-view .categorize-workers-toggle {
margin-right: 5px;
}



/*
 * CSS for template: wf-dataset-dependency-item-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-dataset-dependency-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .worker-asterisk,
.wf-worker-type .worker-asterisk {
position: relative;
    top: 8px;
}

.wf-workers-container .worker-asterisk,
.wf-worker-type .worker-asterisk {
position: relative;
    top: 8px;
}

div.workflow-modal li.field-item .output-quick-view[data-type="dataset"] {
padding: 4px 10px;
    word-break: break-all;
}

div.workflow-modal li.field-item .output-quick-view[data-type="dataset"]:hover {
background: #f8f8f8;
    cursor: pointer;
}

div.workflow .workflow-navigation-container .direction-step.end .worker-icon {
background-color: #fce8e6;
    color: #d93025;
    border: 1px solid #f8bbd9;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label.end {
background: #fce8e6;
    color: #d93025;
}



/*
 * CSS for template: wf-enhanced-error-view-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-enhanced-error-view-tpl.tpl
 * Updated by shashank2104 on 05/05/2026 - DVFIV-2027 - Full rewrite using --d3v-* foundation tokens; modern severity strip,
 * hero, stat strip, server-response card, resolution card list, diagnostics drawer.
 *
 * All rules are scoped under .wf-error-modal so they don't leak into the rest of the workflow plugin.
 */

/* ====================================================================
   1. SHELL — top-level layout, severity-driven accent color
   ==================================================================== */

   .wf-error-modal .modal-dialog .modal-body {
    padding: 0;
    /** Updated by shashank2104 on 07/17/2026 - Drop the secondary (gray) surface — modal body is primary/white **/
    background: var(--d3v-bg-primary);
}

.wf-error-modal .wf-error-shell {
    --wf-err-accent: var(--d3v-danger);
    --wf-err-accent-soft: rgba(239, 68, 68, 0.08);
    --wf-err-accent-soft-strong: rgba(239, 68, 68, 0.16);
    display: flex;
    flex-direction: column;
    /** Updated by shashank2104 on 07/17/2026 - Error container is primary/white (no secondary surface) **/
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 13px;
    line-height: 1.5;
    /* height: 100%; */
}

.wf-error-modal .wf-error-shell.wf-error-sev-warning {
    --wf-err-accent: var(--d3v-warning);
    --wf-err-accent-soft: rgba(245, 158, 11, 0.10);
    --wf-err-accent-soft-strong: rgba(245, 158, 11, 0.18);
}

.wf-error-modal .wf-error-shell.wf-error-sev-info {
    --wf-err-accent: var(--d3v-info);
    --wf-err-accent-soft: rgba(59, 130, 246, 0.10);
    --wf-err-accent-soft-strong: rgba(59, 130, 246, 0.18);
}

/* ====================================================================
   2. SEVERITY STRIP — top band with pill, code, time, copy-bundle CTA
   ==================================================================== */

.wf-error-modal .wf-error-sev-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--wf-err-accent-soft);
    border-bottom: 1px solid var(--d3v-border);
    border-top: 3px solid var(--wf-err-accent);
    /* Full-width header fixed on top of the shell (07/06/2026) — never shrinks
       in the shell's flex column; the error/details split fills below it. */
    flex: 0 0 auto;
}

.wf-error-modal .wf-error-sev-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--wf-err-accent);
    color: var(--d3v-text-inverse);
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.wf-error-modal .wf-error-sev-pill .fa { font-size: 11px; }

.wf-error-modal .wf-error-code-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    color: var(--d3v-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
}

.wf-error-modal .wf-error-timestamp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--d3v-text-muted);
    font-size: 12px;
}

.wf-error-modal .wf-error-timestamp .fa { font-size: 11px; }

.wf-error-modal .wf-error-sev-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/** Updated by shashank2104 on 07/17/2026 - Header buttons keep the Bootstrap default transition (no custom override) **/
.wf-error-modal .wf-error-sev-actions .btn {
    border-radius: var(--d3v-r-sm);
}

/** Added by shashank2104 on 07/17/2026 - Unified header: the severity strip is the single modal header (native title bar suppressed). It carries the title text and the minimize/close window buttons. **/
.wf-error-modal .wf-error-sev-strip-header {
    padding: 15px;
    /** Updated by shashank2104 on 07/17/2026 - Drop the 3px accent top border on the unified header; the severity pill + light-red background already convey severity **/
    border-top: none;
}

.wf-error-modal .wf-error-sev-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Window buttons (minimize / close) sit at the far right, set off from the toolbar actions */
.wf-error-modal .wf-error-sev-winbtns {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--d3v-border);
}

/** Updated by shashank2104 on 07/17/2026 - Close button keeps the Bootstrap default hover (no red background override) **/

/** Icon-only share actions (copy bundle / download report / take screenshot) in the header. Square buttons, tooltip via native title. **/
.wf-error-modal .wf-error-sev-iconbtns {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wf-error-modal .wf-error-sev-iconbtns .btn {
    width: 32px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}
.wf-error-modal .wf-error-sev-iconbtns .btn .fa { margin: 0; }

/* ====================================================================
   3. HERO — title + plain-English subtitle + worker pill
   ==================================================================== */

.wf-error-modal .wf-error-hero {
    /** Updated by shashank2104 on 07/17/2026 - Dropped display:flex; subtitle + worker pill now stack in normal flow **/
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 16px;
    background: var(--d3v-bg-primary);
    border-bottom: 1px solid var(--d3v-border);
}

/** Added by shashank2104 on 07/17/2026 - With the hero no longer a flexbox, add a little space above the worker pill so it doesn't butt against the subtitle **/
.wf-error-modal .wf-error-hero .wf-error-worker-pill {
    margin-top: 10px;
}

.wf-error-modal .wf-error-hero-text {
    flex: 1;
    min-width: 0;
}

.wf-error-modal .wf-error-hero-title {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    letter-spacing: -0.2px;
}

.wf-error-modal .wf-error-hero-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--d3v-text-secondary);
    line-height: 1.55;
}

.wf-error-modal .wf-error-worker-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--d3v-bg-tertiary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    transition: var(--d3v-t-fast);
    flex-shrink: 0;
    max-width: 50%;
}

.wf-error-modal .wf-error-worker-pill:hover {
    background: var(--d3v-bg-hover);
    border-color: var(--d3v-border-strong);
}

.wf-error-modal .wf-error-worker-name {
    font-weight: 500;
    color: var(--d3v-text-primary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.wf-error-modal .wf-error-status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--d3v-r-full);
    background: var(--d3v-text-muted);
    flex-shrink: 0;
}

.wf-error-modal .wf-error-status-dot.wf-error-status-failure { background: var(--d3v-danger); }
.wf-error-modal .wf-error-status-dot.wf-error-status-completed { background: var(--d3v-success); }
.wf-error-modal .wf-error-status-dot.wf-error-status-processing { background: var(--d3v-info); }
.wf-error-modal .wf-error-status-dot.wf-error-status-polling_halt { background: var(--d3v-warning); }

/* ====================================================================
   4. STAT STRIP — 4 compact tiles
   ==================================================================== */

.wf-error-modal .wf-error-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--d3v-border);
    border-bottom: 1px solid var(--d3v-border);
}

.wf-error-modal .wf-error-stat {
    background: var(--d3v-bg-primary);
    padding: 12px 16px;
    transition: var(--d3v-t-fast);
}

.wf-error-modal .wf-error-stat:hover {
    background: var(--d3v-bg-secondary);
}

/** Added by shashank2104 on 07/17/2026 - Close the right edge of the stat strip (the 1px grid gaps only sit between tiles, so the last tile had no right border) — token equivalent of #DDD to match the rest of the strip **/
.wf-error-modal .wf-error-stat:last-child {
    border-right: 1px solid var(--d3v-border);
}

.wf-error-modal .wf-error-stat-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-muted);
    margin-bottom: 4px;
    font-weight: 700;
}

.wf-error-modal .wf-error-stat-label .fa { font-size: 10px; }

.wf-error-modal .wf-error-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.wf-error-modal .wf-error-stat-bad { color: var(--d3v-danger); }
.wf-error-modal .wf-error-stat-good { color: var(--d3v-success); }
.wf-error-modal .wf-error-stat-sep { color: var(--d3v-text-muted); margin: 0 2px; font-weight: 400; }

.wf-error-modal .wf-error-stat-sub {
    font-size: 11px;
    color: var(--d3v-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pills inside stat tiles */
.wf-error-modal .wf-error-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm);
    font-size: 12px;
    font-weight: 500;
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    text-transform: capitalize;
}

.wf-error-modal .wf-error-status-pill.wf-error-status-failure { background: rgba(239, 68, 68, 0.12); color: var(--d3v-danger); }
.wf-error-modal .wf-error-status-pill.wf-error-status-completed { background: rgba(16, 185, 129, 0.12); color: var(--d3v-success); }
.wf-error-modal .wf-error-status-pill.wf-error-status-processing { background: rgba(59, 130, 246, 0.12); color: var(--d3v-info); }
.wf-error-modal .wf-error-status-pill.wf-error-status-polling_halt { background: rgba(245, 158, 11, 0.12); color: var(--d3v-warning); }

/* ====================================================================
   5. PRIMARY ZONE — varies by error category
   ==================================================================== */

.wf-error-modal .wf-error-primary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /** Updated by shashank2104 on 07/17/2026 **/
    padding: 16px 0 16px 15px;
}

/* --- Card base --- */

.wf-error-modal .wf-error-card {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-sm);
    overflow: hidden;
}

.wf-error-modal .wf-error-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    gap: 8px;
    flex-wrap: wrap;
}

/** Updated by shashank2104 on 07/17/2026 - Unify every panel header to ONE style (matches .wf-error-detail-card-head): uppercase, weight 700, muted-secondary text, neutral gray icon. Was 13px/title-case/accent-red icon, which clashed with the right-column detail cards sitting beside it. **/
.wf-error-modal .wf-error-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-secondary);
}

.wf-error-modal .wf-error-card-title .fa {
    color: var(--d3v-text-secondary);
    font-size: 11px;
}

.wf-error-modal .wf-error-card-actions {
    display: flex;
    gap: 6px;
}

.wf-error-modal .wf-error-card-actions .btn {
    border-radius: var(--d3v-r-sm);
    font-size: 11px;
    transition: var(--d3v-t-fast);
}

/* --- Server response card --- */

.wf-error-modal .wf-error-server-card {
    border-left: 3px solid var(--wf-err-accent);
}

.wf-error-modal .wf-error-server-msg {
    margin: 0;
    padding: 14px 16px;
    background: var(--d3v-bg-primary);
    color: var(--d3v-danger);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0;
    border: none;
    max-height: 260px;
    overflow: auto;
}

.wf-error-modal .wf-error-shell.wf-error-sev-warning .wf-error-server-msg { color: var(--d3v-warning); }
.wf-error-modal .wf-error-shell.wf-error-sev-info .wf-error-server-msg { color: var(--d3v-info); }

.wf-error-modal .wf-error-server-msg-fallback { color: var(--d3v-text-secondary); }

.wf-error-modal .wf-error-server-logs {
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-n-900);
}

.wf-error-modal .wf-error-server-logs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    color: var(--d3v-n-300);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
    background: var(--d3v-n-800);
}

.wf-error-modal .wf-error-server-logs-more {
    color: var(--d3v-n-400);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.wf-error-modal .wf-error-server-logs-body {
    margin: 0;
    padding: 12px 16px;
    background: var(--d3v-n-900);
    color: var(--d3v-n-100);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.55;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    border: none;
    border-radius: 0;
}

/* --- Resolution card list --- */

.wf-error-modal .wf-error-resolution-list {
    display: flex;
    flex-direction: column;
}

.wf-error-modal .wf-error-resolution-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--d3v-border);
    transition: var(--d3v-t-fast);
}

.wf-error-modal .wf-error-resolution-row:last-child {
    border-bottom: none;
}

.wf-error-modal .wf-error-resolution-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    transition: var(--d3v-t-fast);
}

.wf-error-modal .wf-error-resolution-row:hover .wf-error-resolution-main {
    background: var(--d3v-bg-secondary);
}

.wf-error-modal .wf-error-resolution-row.wf-error-resolution-row-fixing .wf-error-resolution-main {
    background: var(--d3v-bg-secondary);
}

.wf-error-modal .wf-error-resolution-row.wf-error-resolution-row-resolved .wf-error-resolution-icon {
    background: rgba(16, 185, 129, 0.12);
    color: var(--d3v-success);
}

.wf-error-modal .wf-error-resolution-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wf-err-accent-soft);
    color: var(--wf-err-accent);
    border-radius: var(--d3v-r-sm);
    font-size: 14px;
}

.wf-error-modal .wf-error-resolution-body {
    flex: 1;
    min-width: 0;
}

.wf-error-modal .wf-error-resolution-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.wf-error-modal .wf-error-resolution-name {
    font-weight: 600;
    color: var(--d3v-text-primary);
    font-size: 13px;
}

.wf-error-modal .wf-error-resolution-type {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    border-radius: var(--d3v-r-sm);
    font-size: 11px;
    font-weight: 500;
    text-transform: lowercase;
}

.wf-error-modal .wf-error-resolution-value {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-tertiary);
    padding: 4px 8px;
    border-radius: var(--d3v-r-sm);
    margin: 4px 0;
    word-break: break-all;
}

.wf-error-modal .wf-error-resolution-value .fa {
    color: var(--d3v-text-muted);
    font-size: 9px;
    margin-top: 4px;
    flex-shrink: 0;
}

.wf-error-modal .wf-error-resolution-desc {
    font-size: 12px;
    color: var(--d3v-text-secondary);
    line-height: 1.5;
    margin: 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-error-modal .wf-error-resolution-msg {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--d3v-danger);
    font-size: 11px;
    margin-top: 6px;
}

.wf-error-modal .wf-error-resolution-msg .fa { font-size: 11px; }

.wf-error-modal .wf-error-resolution-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.wf-error-modal .wf-error-resolution-actions .btn {
    padding: 4px 10px;
    border-radius: var(--d3v-r-sm);
    font-size: 11px;
    transition: var(--d3v-t-fast);
    height: 28px;
    line-height: 1;
}

/* Resolved badge — appears when an inline Fix succeeds */
.wf-error-modal .wf-error-resolution-resolved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.12);
    color: var(--d3v-success);
    border-radius: var(--d3v-r-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wf-error-modal .wf-error-resolution-resolved-badge .fa { font-size: 11px; }

/* Inline fix pane — slides in below the row when the user clicks Fix */
.wf-error-modal .wf-error-resolution-fix-pane {
    background: var(--d3v-bg-secondary);
    border-top: 1px dashed var(--d3v-border);
    padding: 12px 16px 14px;
    animation: wfErrorFixOpen 0.18s ease;
}

@keyframes wfErrorFixOpen {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

.wf-error-modal .wf-error-resolution-fix-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-muted);
    font-weight: 700;
    margin-bottom: 8px;
}

.wf-error-modal .wf-error-resolution-fix-head .fa-pencil {
    color: var(--wf-err-accent);
}

.wf-error-modal .wf-error-resolution-fix-cancel {
    margin-left: auto;
    color: var(--d3v-text-muted);
    padding: 0 4px;
}

.wf-error-modal .wf-error-resolution-fix-cancel:hover {
    color: var(--d3v-text-primary);
}

.wf-error-modal .wf-error-resolution-fix-body {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    padding: 10px 12px;
}

/* Make the inner FormBuilder widget look at home in the inline pane */
.wf-error-modal .wf-error-resolution-fix-body .form-group { margin-bottom: 0; }
.wf-error-modal .wf-error-resolution-fix-body label { display: none; }
.wf-error-modal .wf-error-resolution-fix-body .form-control { font-size: 13px; }

/* Disabled "Fixed" button after successful inline fix */
.wf-error-modal .wf-error-resolution-actions .fix-single-input[disabled] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--d3v-success);
    border-color: rgba(16, 185, 129, 0.28);
    cursor: default;
    opacity: 1;
}

/* "Editing" state — the Fix button while its inline pane is open. Conveys the toggle relationship to the pane below. */
.wf-error-modal .wf-error-resolution-actions .fix-single-input.wf-error-fix-btn-editing {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
    border-color: var(--d3v-border-strong);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.wf-error-modal .wf-error-resolution-actions .fix-single-input.wf-error-fix-btn-editing:hover {
    background: var(--d3v-bg-hover);
    color: var(--wf-err-accent);
}

.wf-error-modal .wf-error-resolution-actions .fix-single-input.wf-error-fix-btn-editing .fa {
    color: var(--wf-err-accent);
}

/* --- Generic primary card --- */

.wf-error-modal .wf-error-generic-body {
    padding: 14px 16px;
}

/** Updated by shashank2104 on 07/17/2026 - The description holds the config sentence + the RAW server HTML (via <ORIGINAL_ERROR>), so it carries stray <h1>/<div>/<b> tags. Render it as one uniform 12px monospace log — matching the message block — so there's a single font size + family across the whole error body. **/
.wf-error-modal .wf-error-generic-desc {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--d3v-text-secondary);
    line-height: 1.55;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.wf-error-modal .wf-error-generic-msg {
    margin: 0;
    padding: 10px 12px;
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    border-radius: var(--d3v-r-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.55;
    border: 1px solid var(--d3v-border);
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/** Added by shashank2104 on 07/17/2026 - The raw server error is dumped as HTML and often carries stray <h1>/<b>/<div> tags (and literal </h1> text), which render at wildly different browser-default sizes — that's the font inconsistency in "What happened". Flatten every descendant to the block's own monospace scale so it reads as one uniform log; keep <b>/<strong> bold for emphasis only. Applied to both the generic message and the server-response card. **/
.wf-error-modal .wf-error-generic-desc *,
.wf-error-modal .wf-error-generic-msg *,
.wf-error-modal .wf-error-server-msg * {
    /* Font props are !important so inline styles in the raw server HTML can't reintroduce oversized/proportional text — this is the one place where taming untrusted markup justifies it. */
    font-size: 12px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: inherit;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    display: inline;
}
.wf-error-modal .wf-error-generic-desc br,
.wf-error-modal .wf-error-generic-msg br,
.wf-error-modal .wf-error-server-msg br { display: block; }
.wf-error-modal .wf-error-generic-desc b,
.wf-error-modal .wf-error-generic-desc strong,
.wf-error-modal .wf-error-generic-msg b,
.wf-error-modal .wf-error-generic-msg strong,
.wf-error-modal .wf-error-server-msg b,
.wf-error-modal .wf-error-server-msg strong { font-weight: 700 !important; }

/* --- Suggested fixes --- */
/** Updated by shashank2104 on 07/17/2026 - Suggested fixes now uses the standard .wf-error-card + .wf-error-card-head chrome (consistent header with the other panels); the button list is the card body. **/

.wf-error-modal .wf-error-fixes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
}

/** Updated by shashank2104 on 05/07/2026 - DVFIV-2027 - Suggested-fix buttons are positive actions (open worker editor / fill inputs / etc.). Style them as clean filled primary actions in the d3VIEW accent color rather than reusing the severity accent (which is red for critical errors and made the button look destructive). **/
.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d3v-accent);
    border: 1px solid var(--d3v-accent);
    color: var(--d3v-text-inverse);
    border-radius: var(--d3v-r-sm);
    font-weight: 500;
    transition: var(--d3v-t-fast);
    box-shadow: var(--d3v-sh-xs);
}

.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn .fa {
    color: var(--d3v-text-inverse);
    font-size: 12px;
}

.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn:hover,
.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn:focus {
    background: var(--d3v-accent-hover, var(--d3v-accent));
    border-color: var(--d3v-accent-hover, var(--d3v-accent));
    color: var(--d3v-text-inverse);
    box-shadow: var(--d3v-sh-sm);
    filter: brightness(1.05);
}

.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn[disabled],
.wf-error-modal .wf-error-fixes-list .btn.fix-action-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ====================================================================
   6. DIAGNOSTICS DRAWER
   ==================================================================== */

.wf-error-modal .wf-error-diagnostics {
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary);
}

.wf-error-modal .wf-error-diagnostics-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background: var(--d3v-bg-primary);
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--d3v-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--d3v-t-fast);
}

.wf-error-modal .wf-error-diagnostics-toggle:hover {
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-primary);
}

.wf-error-modal .wf-error-diagnostics-toggle.active {
    background: var(--d3v-bg-secondary);
    border-bottom-color: var(--d3v-border);
    color: var(--d3v-text-primary);
}

.wf-error-modal .wf-error-diag-chevron {
    color: var(--d3v-text-muted);
    transition: var(--d3v-t-fast);
}

.wf-error-modal .wf-error-diag-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 11px;
    color: var(--d3v-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.wf-error-modal .wf-error-diagnostics-drawer {
    display: none;
    background: var(--d3v-bg-secondary);
    border-top: 1px solid var(--d3v-border);
}

.wf-error-modal .wf-error-diagnostics-drawer.open {
    display: block;
    animation: wfErrorDrawerOpen 0.25s ease;
}

@keyframes wfErrorDrawerOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Metadata grid --- */

.wf-error-modal .wf-error-diag-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 20px;
}

.wf-error-modal .wf-error-diag-block {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    padding: 10px 12px;
    box-shadow: var(--d3v-sh-xs);
}

.wf-error-modal .wf-error-diag-block-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-muted);
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border);
}

.wf-error-modal .wf-error-diag-block-title .fa {
    color: var(--d3v-text-secondary);
    font-size: 11px;
}

.wf-error-modal .wf-error-diag-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}

.wf-error-modal .wf-error-diag-table th,
.wf-error-modal .wf-error-diag-table td {
    padding: 4px 0;
    text-align: left;
    vertical-align: top;
    border: none;
}

.wf-error-modal .wf-error-diag-table th {
    width: 35%;
    color: var(--d3v-text-muted);
    font-weight: 500;
    font-size: 11px;
}

.wf-error-modal .wf-error-diag-table td {
    color: var(--d3v-text-primary);
    word-break: break-word;
}

.wf-error-modal .wf-error-diag-table td code {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wf-error-modal .wf-error-diag-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
    display: inline-block;
}

/* --- Drawer sections --- */

.wf-error-modal .wf-error-diag-section {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    margin: 0 20px 12px;
    overflow: hidden;
}

.wf-error-modal .wf-error-diag-section-title {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
}

.wf-error-modal .wf-error-diag-section-title .fa {
    margin-right: 6px;
    color: var(--d3v-text-secondary);
}

.wf-error-modal .wf-error-diag-section .wf-error-execution-inputs-fb {
    padding: 10px 14px;
    max-height: 320px;
    overflow: auto;
}

.wf-error-modal .wf-error-diag-raw {
    margin: 0;
    padding: 12px 14px;
    background: var(--d3v-n-900);
    color: var(--d3v-n-100);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.55;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    border: none;
    border-radius: 0;
}

/* --- Inputs / Outputs side-by-side row (DW-3102) ---
   Uses flex + margin (NOT grid/gap) so the layout survives domtoimage's
   useLimitedStyles whitelist when the modal is captured to PNG. */
.wf-error-modal .wf-error-diag-io {
    display: flex;
    align-items: flex-start;
    margin: 0 20px 12px;
}

.wf-error-modal .wf-error-diag-io .wf-error-diag-io-col {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 0 0 12px;
}

.wf-error-modal .wf-error-diag-io .wf-error-diag-io-col:first-child {
    margin-left: 0;
}

/* ====================================================================
   DESIGN 1 · SPLIT LAYOUT (DW-3102) — error left | details right
   ==================================================================== */
/* Fill the ENTIRE modal body height (07/06/2026): the modal component sizes
   .modal-body to a fixed viewport-based height, so we flex the shell + split-body
   to fill it — removing the dead gap that the old fixed 760px cap left below the
   panes. The inner panes keep their own overflow:auto, so long content still
   scrolls within the filled height instead of growing the modal. */
.wf-error-modal .modal-dialog .modal-body {
    display: flex;
    flex-direction: column;
}

.wf-error-modal .wf-error-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.wf-error-modal .wf-error-split-body {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 420px;
}

.wf-error-modal .wf-error-pane-left {
    display: flex;
    flex-direction: column;
    /** Updated by shashank2104 on 07/07/2026 - DW-3102 - Give the details pane more room (was 56/44) so the inputs grid fits 3 columns on a laptop **/
    flex: 1 1 48%;
    min-width: 0;
    /** Updated by shashank2104 on 07/17/2026 - Removed the divider border between the two panes **/
    overflow: auto;
}

.wf-error-modal .wf-error-pane-right {
    display: flex;
    flex-direction: column;
    flex: 1 1 52%;
    min-width: 0;
    /** Updated by shashank2104 on 07/17/2026 - Right panel is primary/white (no secondary surface) **/
    background: var(--d3v-bg-primary);
}

/* collapsed by default: hide the right pane, error fills the body */
.wf-error-modal .wf-error-details-collapsed .wf-error-pane-right { display: none; }
.wf-error-modal .wf-error-details-collapsed .wf-error-pane-left { border-right: 0; flex-basis: 100%; }

/* the primary (server/resolution/generic) card should grow to fill the left pane */
.wf-error-modal .wf-error-pane-left .wf-error-primary { flex: 1; min-height: 0; }

.wf-error-modal .wf-error-details-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px 16px;
}

/* --- detail cards (Inputs / Outputs / Diagnostics) --- */
.wf-error-modal .wf-error-detail-card {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-xs);
    margin-bottom: 10px;
    overflow: hidden;
}
.wf-error-modal .wf-error-detail-card:last-child { margin-bottom: 0; }

/** Updated by shashank2104 on 07/07/2026 - DW-3102 - Tighter card head to reclaim vertical space for the inputs grid **/
.wf-error-modal .wf-error-detail-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-secondary);
}

.wf-error-modal .wf-error-detail-count {
    margin-left: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--d3v-text-muted);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: 999px;
    padding: 1px 8px;
}

/** Added by shashank2104 on 08/24/2026 at 06:20 PM - https://d3view.atlassian.net/browse/R2026-215 - Pin Show all to the right, immediately before the count **/
.wf-error-modal .wf-error-detail-card-head .wf-error-compact-show-all {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}
.wf-error-modal .wf-error-detail-card-head .wf-error-compact-show-all + .wf-error-detail-count {
    margin-left: 0;
}

/** Updated by shashank2104 on 07/07/2026 - DW-3102 - No per-card height cap: let inputs/outputs grow into the freed space and use the whole right pane (.wf-error-details-scroll) as the single scroll region **/
.wf-error-modal .wf-error-detail-card-body {
    padding: 8px 10px;
    overflow: visible;
}
.wf-error-modal .wf-error-detail-card-body .wf-error-diag-grid { padding: 0; }
.wf-error-modal .wf-error-detail-card-body .wf-error-diag-raw-wrap { margin-top: 12px; }

/* details toggle in the severity strip */
/* details-toggle keeps the Bootstrap default transition (custom override removed 07/17/2026) */

/* === Screenshot capture mode (DW-3102) ===
   downloadErrorScreenshot expands the details pane, adds .wf-error-capturing to the
   shell, and captures .wf-error-shell. We lift EVERY scroll clamp so the whole split
   (error + inputs + outputs + diagnostics) renders at full height; because the panes
   sit side by side, the captured height is max(left,right) — not the sum — so it stays
   within domtoimage's paintable range. Selector is unscoped from .wf-error-modal on
   purpose (the view can render inside a canvas tooltip too). */
.wf-error-shell.wf-error-capturing {
    /* Drop the flex-fill so the shell grows to the full content height for capture
       (normally it fills the fixed-height modal body and the panes scroll). */
    flex: 0 0 auto;
    height: auto;
    max-height: none;
}
.wf-error-shell.wf-error-capturing .wf-error-split-body {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-height: 0;
}
.wf-error-shell.wf-error-capturing .wf-error-pane-left,
.wf-error-shell.wf-error-capturing .wf-error-pane-right,
.wf-error-shell.wf-error-capturing .wf-error-details-scroll,
.wf-error-shell.wf-error-capturing .wf-error-detail-card-body,
.wf-error-shell.wf-error-capturing .wf-error-server-msg,
.wf-error-shell.wf-error-capturing .wf-error-server-logs-body,
.wf-error-shell.wf-error-capturing .wf-error-generic-msg,
.wf-error-shell.wf-error-capturing .wf-error-diag-raw {
    max-height: none;
    overflow: visible;
}

/* On a narrow viewport, stack the two panes */
@media (max-width: 860px) {
    .wf-error-modal .wf-error-split-body { flex-direction: column; height: auto; max-height: none; }
    .wf-error-modal .wf-error-pane-left { border-right: 0; border-bottom: 1px solid var(--d3v-border); }
}

/* ====================================================================
   MODERN SCROLLBARS (07/06/2026) — thin, rounded, and revealed only while
   the scroll area is hovered, so the split panes + detail cards stay clean.
   The 8px track is transparent and always reserved, so revealing the thumb
   on hover never shifts layout.
   ==================================================================== */

/* Firefox — hide the thumb until the scroll area is hovered. */
.wf-error-modal .wf-error-pane-left,
.wf-error-modal .wf-error-details-scroll,
.wf-error-modal .wf-error-detail-card-body,
.wf-error-modal .wf-error-execution-inputs-fb,
.wf-error-modal .wf-error-execution-outputs-fb,
.wf-error-modal .wf-error-server-msg,
.wf-error-modal .wf-error-server-logs-body,
.wf-error-modal .wf-error-generic-msg,
.wf-error-modal .wf-error-diag-raw {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.wf-error-modal .wf-error-pane-left:hover,
.wf-error-modal .wf-error-details-scroll:hover,
.wf-error-modal .wf-error-detail-card-body:hover,
.wf-error-modal .wf-error-execution-inputs-fb:hover,
.wf-error-modal .wf-error-execution-outputs-fb:hover,
.wf-error-modal .wf-error-server-msg:hover,
.wf-error-modal .wf-error-server-logs-body:hover,
.wf-error-modal .wf-error-generic-msg:hover,
.wf-error-modal .wf-error-diag-raw:hover {
    scrollbar-color: var(--d3v-border-strong) transparent;
}

/* WebKit (Chrome / Safari / Edge) — applies to every scroll area in the modal. */
.wf-error-modal ::-webkit-scrollbar { width: 8px; height: 8px; }
.wf-error-modal ::-webkit-scrollbar-track { background: transparent; }
.wf-error-modal ::-webkit-scrollbar-thumb {
    background-color: transparent;      /* hidden until hover */
    border: 2px solid transparent;      /* inset so the visible thumb reads ~4px thin */
    border-radius: 999px;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}
/* Reveal the thumb while the scroll area (or an ancestor) is hovered. */
.wf-error-modal :hover::-webkit-scrollbar-thumb { background-color: var(--d3v-border-strong); }
.wf-error-modal ::-webkit-scrollbar-thumb:hover { background-color: var(--d3v-text-muted); }
.wf-error-modal ::-webkit-scrollbar-corner { background: transparent; }

/* --- Drawer footer --- */

.wf-error-modal .wf-error-diag-footer {
    display: flex;
    gap: 8px;
    padding: 14px 20px 18px;
    flex-wrap: wrap;
}

.wf-error-modal .wf-error-diag-footer .btn {
    border-radius: var(--d3v-r-sm);
    transition: var(--d3v-t-fast);
}

/* ====================================================================
   7. RESPONSIVE — drop stat strip + diag grid to 2/1 cols on narrow modal
   ==================================================================== */

@media (max-width: 720px) {
    .wf-error-modal .wf-error-stat-strip { grid-template-columns: repeat(2, 1fr); }
    .wf-error-modal .wf-error-diag-grid { grid-template-columns: 1fr; }
    .wf-error-modal .wf-error-hero { flex-direction: column; align-items: stretch; }
    .wf-error-modal .wf-error-worker-pill { max-width: 100%; }
}

/* ====================================================================
   8. FOOTER — three-slot layout (debug actions left, primary actions right)
   ==================================================================== */

.wf-error-modal .modal-footer {
    background: var(--d3v-bg-primary);
    border-top: 1px solid var(--d3v-border);
    padding: 12px 20px;
}

.wf-error-modal .modal-footer .wf-error-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.wf-error-modal .modal-footer .wf-error-footer-left,
.wf-error-modal .modal-footer .wf-error-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    /** Updated by shashank2104 on 07/17/2026 - Footer left slot removed (actions moved to header icons); keep the primary actions right-aligned **/
    margin-left: auto;
}

.wf-error-modal .modal-footer .btn {
    border-radius: var(--d3v-r-sm);
    transition: var(--d3v-t-fast);
    margin: 0;
}

.wf-error-modal .modal-footer .btn-primary {
    box-shadow: var(--d3v-sh-xs);
}

.wf-error-modal .modal-footer .btn-primary:hover {
    box-shadow: var(--d3v-sh-sm);
}

/* ====================================================================
   9. LEGACY OVERRIDES — neutralize old gradient boxes if their classes
      still appear elsewhere (e.g. wf-canvas-tooltip / minimized states)
   ==================================================================== */

.wf-error-modal .enhanced-error-container { display: block; }


.wf-error-inputs { margin: 10px 0 14px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.wf-error-inputs-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #888; padding: 6px 10px; background: #f7f7f7; border-bottom: 1px solid #eee; }
.wf-error-inputs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.wf-error-inputs-table td { padding: 5px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.wf-error-inputs-table tr:last-child td { border-bottom: none; }
.wf-error-input-name { color: #555; font-weight: 600; white-space: nowrap; width: 38%; }
.wf-error-input-val { color: #222; font-family: monospace; word-break: break-all; }
.wf-error-input-bad { background: #fdf2f3; }

/* ====================================================================
   10. COMPACT INPUTS/OUTPUTS TABLE (DW-3102)
       Dense Name/Value table replacing the per-field FormBuilder in the
       error-view details pane, so 50+ inputs stay visible (and fit a
       native screenshot). Rich types (curve/dataset/…) show a summary
       chip + a hover-only "view" button that opens the full widget.
   ==================================================================== */

.wf-error-compact-wrap { width: 100%; }

.wf-error-compact-filter {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 6px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    transition: var(--d3v-t-fast);
}
.wf-error-compact-filter:focus {
    outline: none;
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* Multi-column grid: rows flow into as many ~200px columns as the pane fits,
   so 50+ inputs become 2–3 short columns instead of one tall scroll. */
.wf-error-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0 22px;
    font-size: 11px;
}
/** Added by shashank2104 on 08/24/2026 at 06:16 PM - https://d3view.atlassian.net/browse/R2026-215 - Inputs sent stacks one name/value row per line **/
.wf-error-compact-grid.pl-flex-v {
    display: flex;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
}
.wf-error-compact-row {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 4px;
    line-height: 1.55;
    border-radius: var(--d3v-r-sm);
}
.wf-error-compact-row:hover { background: var(--d3v-bg-hover); }

/* Taller, airier rows on larger screens where there's vertical room to spare */
@media (min-height: 880px) {
    .wf-error-compact-row { padding: 8px 4px; }
}
@media (min-height: 1100px) {
    .wf-error-compact-row { padding: 11px 4px; }
}

.wf-error-compact-grid .wf-cv-name {
    color: var(--d3v-text-secondary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.wf-cv-ic {
    color: var(--d3v-text-muted);
    font-size: 10px;
    width: 13px;
    margin-right: 4px;
    text-align: center;
    flex: none;
}
.wf-cv-bad-ic { color: var(--d3v-danger); margin-right: 2px; }

/* Diagnostics as two compact one-liners (Workflow / Worker) */
.wf-error-modal .wf-error-diag-oneliners { display: flex; flex-direction: column; gap: 4px; }
.wf-error-modal .wf-error-diag-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11px;
    line-height: 1.5;
    min-width: 0;
}
.wf-error-modal .wf-error-diag-line > .fa { color: var(--d3v-text-muted); font-size: 11px; flex: none; }
.wf-error-modal .wf-error-diag-line-lbl {
    flex: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
    color: var(--d3v-text-secondary);
    min-width: 58px;
}
.wf-error-modal .wf-error-diag-line-val {
    color: var(--d3v-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wf-error-modal .wf-error-diag-line-val code {
    font-size: 11px;
    padding: 0 4px;
    background: var(--d3v-bg-tertiary);
    border-radius: var(--d3v-r-sm);
}

/* Diagnostics hint pointing users to the full-detail bundle */
.wf-error-modal .wf-error-diag-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--d3v-text-muted);
}
.wf-error-modal .wf-error-diag-hint .fa { margin-right: 4px; }

.wf-error-compact-row-bad .wf-cv-name { color: var(--d3v-danger); }
.wf-error-compact-row-bad { background: rgba(220, 53, 69, 0.05); }

.wf-error-compact-grid .wf-cv-val {
    color: var(--d3v-text-primary);
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wf-cv-text { font-family: var(--d3v-font-mono, monospace); }
.wf-cv-empty { color: var(--d3v-text-muted); }
.wf-cv-bool { font-weight: 600; }
.wf-cv-bool .fa { margin-right: 3px; color: var(--d3v-text-secondary); }

.wf-cv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-tertiary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-full);
    white-space: nowrap;
}
.wf-cv-chip .fa { color: var(--d3v-accent); font-size: 10px; }
.wf-cv-chip-empty { color: var(--d3v-text-muted); }
.wf-cv-chip-empty .fa { color: var(--d3v-text-muted); }

/* Hover-only "view" affordance for rich rows */
.wf-cv-view {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    cursor: pointer;
    box-shadow: var(--d3v-sh-xs);
    transition: var(--d3v-t-fast);
}
.wf-cv-view .fa { font-size: 10px; }
.wf-error-compact-row:hover .wf-cv-view { display: inline-flex; }
.wf-cv-view:hover { color: var(--d3v-accent); border-color: var(--d3v-accent); }

/* When capturing a screenshot, un-clamp value cells so nothing is hidden */
.wf-error-capturing .wf-error-compact-grid .wf-cv-val,
.wf-error-capturing .wf-error-compact-grid .wf-cv-name { white-space: normal; overflow: visible; }
.wf-error-capturing .wf-cv-view { display: none !important; }
.wf-error-input-bad .wf-error-input-name, .wf-error-input-bad .wf-error-input-val { color: #721c24; }

/*
 * CSS for template: wf-error-data-container-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-error-data-container-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.modalContainer.excelresponseparser label {
display: inline-block !important;
}

div.modalContainer.excelresponseparser label {
display: inline-block !important;
}

div.modalContainer.excelresponseparser label {
display: inline-block !important;
}

@container wf-ip-field-item (max-width: 1000px) {
div.workflow-modal li.field-item .btn-label {
        display: none;
    }
}

@container wf-bulk-actions-bar (max-width: 1000px) {
.item-label {
        display: none;
    }
}

div.workflow .workflow-navigation-container .error-data-container .worker-item,
div.workflow .workflow-navigation-container .error-data-container .worker-item *,
div.workflow .workflow-navigation-container .error-data-container .workers-list,
div.workflow .workflow-navigation-container .error-data-container .workers-list * {
animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}



/*
 * CSS for template: wf-error-input-errors-table-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-error-input-errors-table-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .workflow-navigation-container .error-worker .input-errors-table .error-message {
color: #d32f2f;
    font-weight: 500;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table .label-cell {
width: 100px;
    font-weight: 600;
    color: #666;
    /* background: #f8f9fa; */
    /* border-right: 1px solid #e0e0e0; */
    vertical-align: top;
    padding: 8px 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table .input-separator-row td {
padding: 4px 0;
    border-bottom: none;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table .input-separator {
margin: 8px 0;
    border: none;
    border-top: 1px solid #e0e0e0;
}



/*
 * CSS for template: wf-error-logs-viewer-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-error-logs-viewer-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.success {
background-color: lightgreen !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.info {
background-color: lightblue !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.error {
background-color: lightcoral !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.success {
background-color: lightgreen !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.info {
background-color: lightblue !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.error {
background-color: lightcoral !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.success {
background-color: lightgreen !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.info {
background-color: lightblue !important;
}

div.workflow div.wf-main-container div.logs-view .logs-container table tbody tr.error {
background-color: lightcoral !important;
}



/*
 * CSS for template: wf-error-worker-item-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-error-worker-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-worker-type.wf-worker-type-sm {
font-size: 1.3em;
}

div.workflow .worker-item {
display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s, translate 0.2s;
}

div.workflow .worker-item:hover {
transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

div.workflow .collapsed-sequence-expanded-container .worker-item {
cursor: pointer;
    transition: all 0.2s ease;
    padding: 1px;
}

div.workflow .collapsed-sequence-expanded-container .worker-item:hover {
transform: scale(1.05);
    z-index: 10;
}

div.workflow .collapsed-sequence-expanded-container .worker-item:hover .worker-circle-inner {
background: #e8f0fe;
    border-color: #1557b0;
}

div.workflow .workflow-navigation-container .error-worker {
border-left: 4px solid #ff9800;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-container .error-worker.error-worker {
border-left-color: #f44336;
    background: #ffebee;
}

div.workflow .workflow-navigation-container .error-worker.warning-worker {
border-left-color: #ff9800 !important;
    background: #fff3e0 !important;
}

div.workflow .workflow-navigation-container .error-worker.info-worker {
border-left-color: #2196f3;
    background: #e3f2fd;
}

div.workflow .workflow-navigation-container .error-worker .worker-meta {
margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

div.workflow .workflow-navigation-container .error-worker .worker-type-label {
font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

div.workflow .workflow-navigation-container .error-worker .worker-type-label.error {
background: #f44336;
    color: white;
}

div.workflow .workflow-navigation-container .error-worker .worker-type-label.warning {
background: #ff9800;
    color: white;
}

div.workflow .workflow-navigation-container .error-worker .worker-type-label.info {
background: #2196f3;
    color: white;
}

div.workflow .workflow-navigation-container .error-worker .error-count,
div.workflow .workflow-navigation-container .error-worker .warning-count {
font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #f5f5f5;
    color: #666;
}

div.workflow .workflow-navigation-container .error-worker .worker-errors {
/* margin-top: 10px; */
    padding-top: 10px;
    /* border-top: 1px solid #e0e0e0; */
}

div.workflow .workflow-navigation-container .error-worker .error-detail-item {
margin-bottom: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    border-left: 3px solid #ddd;
}

div.workflow .workflow-navigation-container .error-worker .error-detail-item.error {
border-left-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

div.workflow .workflow-navigation-container .error-worker .error-detail-item.warning {
border-left-color: #ff9800;
    background: rgba(255, 152, 0, 0.05);
}

div.workflow .workflow-navigation-container .error-worker .error-header {
display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

div.workflow .workflow-navigation-container .error-worker .error-type-badge {
font-size: 10px;
    padding: 2px 6px;
}

div.workflow .workflow-navigation-container .error-worker .error-input {
font-size: 11px;
    color: #666;
    font-weight: 500;
}

div.workflow .workflow-navigation-container .error-worker .error-message {
font-size: 12px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 3px;
}

div.workflow .workflow-navigation-container .error-worker .error-type-detail {
font-size: 10px;
    color: #888;
    font-style: italic;
}

div.workflow .workflow-navigation-container .error-worker .input-error-group {
margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
}

div.workflow .workflow-navigation-container .error-worker .input-error-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 4px 4px 0 0;
}

div.workflow .workflow-navigation-container .error-worker .input-name {
font-weight: 600;
    color: #333;
    font-size: 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-error-count {
font-size: 11px;
    color: #666;
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
}

div.workflow .workflow-navigation-container .error-worker .input-error-details {
padding: 8px 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-error-details .error-detail-item {
margin-bottom: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    border-left: 3px solid #ddd;
}

div.workflow .workflow-navigation-container .error-worker .input-error-details .error-detail-item:last-child {
margin-bottom: 0;
}

div.workflow .workflow-navigation-container .error-worker .input-error-details .error-detail-item.error {
border-left-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

div.workflow .workflow-navigation-container .error-worker .input-error-details .error-detail-item.warning {
border-left-color: #ff9800;
    background: rgba(255, 152, 0, 0.05);
}

div.workflow .workflow-navigation-container .error-worker .input-error-actions {
margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

div.workflow .workflow-navigation-container .error-worker .input-error-actions .btn {
font-size: 10px;
    padding: 4px 8px;
}

div.workflow .workflow-navigation-container .error-worker .section-badge {
font-size: 10px;
    padding: 2px 6px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 3px;
    font-weight: 500;
}

div.workflow .workflow-navigation-container .error-worker .input-error-item {
margin-bottom: 8px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    border-left: 3px solid #ddd;
}

div.workflow .workflow-navigation-container .error-worker .input-error-header {
display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

div.workflow .workflow-navigation-container .error-worker .input-error-header .input-name {
font-weight: 600;
    color: #333;
    font-size: 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-error-header .input-error-count {
font-size: 10px;
    color: #666;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
}

div.workflow .workflow-navigation-container .error-worker .input-error-list {
margin-left: 20px;
}

div.workflow .workflow-navigation-container .error-worker .error-list-item {
display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    font-size: 11px;
}

div.workflow .workflow-navigation-container .error-worker .error-list-item:last-child {
margin-bottom: 0;
}

div.workflow .workflow-navigation-container .error-worker .error-list-item .error-message {
flex: 1;
    color: #333;
}

div.workflow .workflow-navigation-container .error-worker .error-list-item .error-type-detail {
font-size: 10px;
    color: #888;
    font-style: italic;
}

div.workflow .workflow-navigation-container .error-worker .worker-info-container {
display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

div.workflow .workflow-navigation-container .error-worker .worker-section-container {
margin-bottom: 8px;
}

div.workflow .workflow-navigation-container .error-worker .worker-error-label-container {
margin-bottom: 10px;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table {
margin-top: 10px;
    font-size: 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table th {
background: #f8f9fa;
    font-weight: 600;
    font-size: 11px;
    padding: 8px 6px;
    border-bottom: 2px solid #e0e0e0;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table td {
padding: 8px 6px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table .btn {
font-size: 10px;
    padding: 4px 8px;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-header h6 {
margin: 0;
    color: #d32f2f;
    font-weight: 600;
    font-size: 12px;
}

div.workflow .workflow-navigation-container .error-worker .input-errors-table td {
padding: 8px 12px;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}

div.workflow .workflow-navigation-container .direction-step .worker-type-label.worker {
background: #e8f0fe;
    color: #1a73e8;
}

div.workflow .workflow-navigation-container.unused-workers .worker-item {
margin-bottom: 20px !important;
    ;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item .worker-actions .btn:hover {
background-color: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item .worker-actions .btn.btn-outline-on-hover:hover {
background-color: transparent !important;
    border-color: inherit !important;
    color: inherit !important;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item {
transition: none !important;
    animation: none !important;
    transform: none !important;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item * {
transition: none !important;
    animation: none !important;
    transform: none !important;
}



/*
 * CSS for template: wf-generic-dropdown-list-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-generic-dropdown-list-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal li.field-item .op-settings.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal li.field-item .op-decisions.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .dropdown:last-child>.btn {
/* border-left:0; */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .dropdown:first-child>.btn {
border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.workflow-modal #wf-worker-switch .add_buttons button[data-toggle="dropdown"] {
display: none;
}

div.workflow-modal li.field-item .op-settings.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal li.field-item .op-decisions.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .dropdown:last-child>.btn {
/* border-left:0; */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .dropdown:first-child>.btn {
border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.workflow-modal #wf-worker-switch .add_buttons button[data-toggle="dropdown"] {
display: none;
}

div.workflow-modal li.field-item [data-toggle="dropdown"]>* {
pointer-events: none;
}

div.workflow-modal li.field-item .op-settings.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal li.field-item .op-decisions.hasSetting>[data-toggle="dropdown"] {
color: darkorange;
}

div.workflow-modal #wf-worker-inputs li.field-item div.remote_lookup_list .dropdown:first-child>.btn {
border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

div.workflow-modal #wf-worker-switch .add_buttons button[data-toggle="dropdown"] {
display: none;
}

div.workflow-modal li.field-item [data-toggle="dropdown"]>* {
pointer-events: none;
}



/*
 * CSS for template: wf-import-merge-overlay-row-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-import-merge-overlay-row-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.excelresponseparser .sidebarArea .chart_options div.row {
margin: 0;
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
}

div#wf-create-workflow-modal .modal-dialog .modal-body .row:not(.row-default) {
/*font-size: 13px;*/
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .row:not(.row-default) {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .formbuilder-container .field-header>.row {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div.workflow-modal #wf-worker-inputs li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item div.row {
border-bottom: none;
}

div#wf-temp-config-modal .modal-dialog .row {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div#wf-temp-config-modal .modal-dialog li.field-item:last-child .row {
border-bottom: none !important;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div#wf-execute-workflow-node-modal li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div.excelresponseparser .sidebarArea .chart_options div.row {
margin: 0;
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
}

div#wf-create-workflow-modal .modal-dialog .modal-body .row:not(.row-default) {
/*font-size: 13px;*/
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .row:not(.row-default) {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .formbuilder-container .field-header>.row {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div.workflow-modal #wf-worker-inputs li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item div.row {
border-bottom: none;
}

div#wf-temp-config-modal .modal-dialog .row {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div#wf-temp-config-modal .modal-dialog li.field-item:last-child .row {
border-bottom: none !important;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div#wf-execute-workflow-node-modal li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div.workflow-modal .exp-builder-container .row {
border-bottom: 0 !important;
}

div.workflow-modal .exp-builder-container .expression-maker>.row {
padding: 0;
}

div.workflow-modal .iteration-container .row {
font-size: inherit;
    border-bottom: none;
    margin: 0 !important;
    padding: 0;
}

div.workflow-modal .dataviewer .row {
padding: 0;
}

div.workflow-modal .ip-formfilters .formfilters .row,
div.workflow-modal .ip-formfilters .formfilters.row {
padding: 0;
    border-bottom: none;
}

div.workflow-modal .form_table_container .formfilters .row,
div.workflow-modal .form_table_container .formfilters.row {
padding: 0;
    border-bottom: none;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .dib.dynamic_op_value_dd .datasource-options>div.row {
display: block !important;
}

.wf-iterations-viewer .iterating-inputs .d3view-inputsBuilder li.field-item>div.row {
padding: 0 !important;
}

div.excelresponseparser .sidebarArea .chart_options div.row {
margin: 0;
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #DDD;
}

div#wf-create-workflow-modal .modal-dialog .modal-body .row:not(.row-default) {
/*font-size: 13px;*/
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .row:not(.row-default) {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div.workflow-modal .formbuilder-container .field-header>.row {
border-bottom: none;
}

div.workflow-modal #wf-worker-inputs li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div.workflow-modal #wf-worker-inputs li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div#wf-execute-workflow-node-modal #wf-worker-inputs ul.field-items li.field-item div.row {
border-bottom: none;
}

div#wf-temp-config-modal .modal-dialog .row {
font-size: 13px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 !important;
    padding: 12px;
}

div#wf-temp-config-modal .modal-dialog li.field-item:last-child .row {
border-bottom: none !important;
}

div#wf-execute-workflow-node-modal li.field-item .wf-thumbnail:hover .overlay {
display: block;
    background: rgba(0, 0, 0, 0.05);
}

div#wf-execute-workflow-node-modal li.field-item .overlay {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

div.workflow-modal .exp-builder-container .row {
border-bottom: 0 !important;
}

div.workflow-modal .exp-builder-container .expression-maker>.row {
padding: 0;
}

div.workflow-modal .iteration-container .row {
font-size: inherit;
    border-bottom: none;
    margin: 0 !important;
    padding: 0;
}

div.workflow-modal .dataviewer .row {
padding: 0;
}

div.workflow-modal .ip-formfilters .formfilters .row,
div.workflow-modal .ip-formfilters .formfilters.row {
padding: 0;
    border-bottom: none;
}

div.workflow-modal .form_table_container .formfilters .row,
div.workflow-modal .form_table_container .formfilters.row {
padding: 0;
    border-bottom: none;
}

div.workflow-modal .wf-builder-inputs-list li.field-item .dib.dynamic_op_value_dd .datasource-options>div.row {
display: block !important;
}

div.workflow-modal li.field-item .validation-decision-data-pass .passed-data-source .datasource-options>.row>.col-md-12 {
width: 50%;
    padding-right: 5px !important;
}

div.workflow-modal.split-layout .wf-builder-inputs-list li.field-item .datasource_container>.datasource-options>.row {
display: block !important;
}

div.workflow-modal.split-layout .wf-builder-inputs-list li.field-item .datasource_container>.datasource-options>.row>div {
width: 100% !important;
}

div.wf-import-merge .dt-container {
min-height: 400px;
    ;
}

div.wf-import-merge .workflow-type-toggle {
display: none;
}

div.wf-import-merge .or-divider {
display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

div.wf-import-merge .or-divider::before {
content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    z-index: 1;
}

div.wf-import-merge .or-text {
background: white;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

div.wf-import-merge div[data-use-value] {
position: relative;
}

div.wf-import-merge div[data-use-value].checked:after {
content: '\f00c';
    font-family: FontAwesome;
    font-size: 1.4em;
    left: -13px;
    top: calc(50% - 14px);
    z-index: 2;
    color: #5cb85c;
    position: absolute;
}

.wf-import-merge .merge-settings-option:hover {
background-color: transparent;
}

.wf-error-modal .enhanced-error-container .error-content .row {
margin: 0;
}

div.workflow-modal .sample-inputs-list .row {
border-bottom: none !important;
    /*font-size: 12px;*/
    margin: 0 !important;
    padding: 0 !important;
}



/*
 * CSS for template: wf-inline-ancestry-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-inline-ancestry-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .wf-inline-ancestry {
position: absolute;
    top: 10px;
    right: 60px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    padding: 8px 12px;
    display: block;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(5px);
    max-width: 30%;
    cursor: move;
}

div.workflow .wf-inline-ancestry .ancestry-path,
div.workflow-modal .wf-inline-ancestry .ancestry-path {
max-height: 220px;
    overflow: auto;
}

div.workflow .wf-inline-ancestry .ancestry-close,
div.workflow-modal .wf-inline-ancestry .ancestry-close {
position: absolute;
    right: 13px;
    top: 4px;
}

div.workflow .wf-inline-ancestry .ancestry-close:hover,
div.workflow-modal .wf-inline-ancestry .ancestry-close:hover {
color: #495057;
}

div.workflow .wf-inline-ancestry .ancestry-path,
div.workflow-modal .wf-inline-ancestry .ancestry-path {
display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 4px 0;
}

div.workflow .wf-inline-ancestry .ancestry-pill,
div.workflow-modal .wf-inline-ancestry .ancestry-pill {
display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 100px;
    max-width: unset;
    ;
    flex-shrink: 0;
    transition: all 0.2s ease;
    line-height: 1.2;
}

div.workflow .wf-inline-ancestry .ancestry-pill:hover,
div.workflow-modal .wf-inline-ancestry .ancestry-pill:hover {
transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow .wf-inline-ancestry .ancestry-pill.current,
div.workflow-modal .wf-inline-ancestry .ancestry-pill.current {
background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

div.workflow .wf-inline-ancestry .ancestry-pill.start,
div.workflow-modal .wf-inline-ancestry .ancestry-pill.start {
background: #e8f5e8;
    border: 1px solid #c3e6c3;
    color: #2e7d32;
}

div.workflow .wf-inline-ancestry .ancestry-pill.decision,
div.workflow-modal .wf-inline-ancestry .ancestry-pill.decision {
background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

div.workflow .wf-inline-ancestry .ancestry-pill.worker,
div.workflow-modal .wf-inline-ancestry .ancestry-pill.worker {
background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
}

div.workflow .wf-inline-ancestry .ancestry-pill i,
div.workflow-modal .wf-inline-ancestry .ancestry-pill i {
margin-right: 4px;
    /*font-size: 10px;*/
}

div.workflow .wf-inline-ancestry .ancestry-arrow,
div.workflow-modal .wf-inline-ancestry .ancestry-arrow {
color: #666;
    margin: 0 4px;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

div.workflow .wf-inline-ancestry .ancestry-pill[data-in-flow="false"],
div.workflow-modal .wf-inline-ancestry .ancestry-pill[data-in-flow="false"] {
opacity: 0.5;
}

div.workflow .wf-worker-info-container .wf-inline-ancestry,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry {
position: relative;
    top: unset;
    left: unset;
    right: unset;
    /* background: rgba(255,255,255,0.4); */
    box-shadow: unset;
    border: none;
    max-width: unset;
}

div.workflow .wf-worker-info-container .wf-inline-ancestry .lead,
div.workflow .wf-worker-info-container .wf-inline-ancestry .ancestry-close,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry .lead,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry .ancestry-close {
display: none;
}

/* ---- Modern design ancestry ---- */
div.workflow.wf-design-modern .wf-inline-ancestry {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-lg) !important;
    box-shadow: var(--wf-sh-md) !important;
    padding: 10px 14px !important;
    backdrop-filter: blur(8px);
}
div.workflow.wf-design-modern .wf-inline-ancestry .lead {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--wf-text-secondary);
}
div.workflow.wf-design-modern .wf-inline-ancestry .lead .fa-code-branch {
    color: var(--wf-accent);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-back-btn {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    color: var(--wf-text-secondary) !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-back-btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-close {
    color: var(--wf-text-muted);
    opacity: 0.6;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-close:hover {
    opacity: 1;
    color: var(--wf-text-primary);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill {
    border-radius: var(--wf-r-md) !important;
    font-size: 11px !important;
    font-weight: 500;
    padding: 5px 10px !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill.current {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill.start {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid var(--d3v-success, #10B981) !important;
    color: #065F46 !important;
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill.decision {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid var(--d3v-warning, #F59E0B) !important;
    color: #92400E !important;
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill.worker {
    background: var(--wf-bg-secondary) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-pill:hover {
    box-shadow: var(--wf-sh-sm);
    transform: translateY(-1px);
}
div.workflow.wf-design-modern .wf-inline-ancestry .ancestry-arrow {
    color: var(--wf-text-muted) !important;
    font-size: 12px !important;
}

/* Dark mode */
div.workflow.wf-design-modern.wf-dark .wf-inline-ancestry {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-strong) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-inline-ancestry .ancestry-pill.start {
    color: #A7F3D0 !important;
}
div.workflow.wf-design-modern.wf-dark .wf-inline-ancestry .ancestry-pill.decision {
    color: #FCD34D !important;
}



/*
 * CSS for template: wf-pinned-views-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-pinned-views-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow .pinned-views .dropdown-menu {
min-width: 250px;
    max-height: 300px;
    overflow-y: auto;
}

div.workflow .wf-pinned-views .pinned-view-name {
flex: 1;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

div.workflow .wf-pinned-views .pinned-view-actions {
display: flex;
    gap: 4px;
    flex-shrink: 0;
}

div.workflow .wf-pinned-views .pinned-view-item {
cursor: pointer;
}

div.workflow .wf-pinned-views .pinned-view-item:hover {
background: #f5f5f5;
}

div.workflow .wf-pinned-views .pin-view {
margin-right: 8px;
}

div.workflow .wf-pinned-views .close {
cursor: pointer;
    font-size: 16px;
    color: #6c757d;
    padding: 4px;
    line-height: 1;
}

div.workflow .wf-pinned-views .close:hover {
color: #dc3545;
}


/*
 * DVFIV-1933 - Step 1: reusable step title container (Mode Basic/Advanced + Go Back)
 */

 
.wf-predict-step-title-container {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.wf-predict-step-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-predict-step-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-predict-step-mode-btn.btn-primary.active,
.wf-predict-step-mode-btn.btn-success.active {
    font-weight: 500;
}

/*
 * DW-2716 - Step 1: selection count + View selected on same line; hide collection's own summary
 */
.wf-predict-flow-modal .wf-collection-selection-summary {
    display: none !important;
}

.wf-predict-step1-selection-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wf-predict-step1-selection-row .wf-predict-selection-count {
    font-size: 13px;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - prominent info icon with tooltip on step 1 */
.wf-predict-step1-info-icon {
    margin-left: 6px;
    cursor: help;
    font-size: 1.1em;
}

/** Added by shashank2104 on 02/26/2026 - DW_2733 - AI compatibility check loader overlay (one call for all workflows) */
.wf-predict-ai-compat-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

.wf-predict-ai-compat-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 14px;
}

.wf-predict-ai-compat-loader-content .fa-spinner {
    font-size: 28px;
    color: #5a9bd5;
}

/*
 * CSS for Predict from Historical - Review inputs step resizable settings sidebar
 * Added by shashank2104 on 02/19/2026 - DW-2716
 */
.wf-predict-review-inputs-wrap {
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.wf-predict-review-inputs-sidebar {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 450px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 12px;
}

.wf-predict-review-inputs-sidebar.hidden,
.wf-predict-review-inputs-resize-handle.hidden {
    display: none !important;
}

.wf-predict-review-inputs-sidebar-inner .help-block {
    font-size: 11px;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - sidebar nav-tabs and Selected Inputs multiselect pane full height **/
.wf-predict-review-inputs-sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-nav-tabs {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content > .tab-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content > .tab-pane.active {
    display: flex;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane {
    min-height: 0;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane .d3view-multiselect,
.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane .multiselect-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - nested Selected Inputs tree and floating bar **/
/** Updated - floating bar wrap absolute top; filter above tree; clean spacing **/
.wf-predict-review-inputs-tree-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wf-predict-review-inputs-tree-pane.has-floating-bar {
    padding-top: 46px;
}

.wf-predict-review-inputs-floating-bar-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    min-height: 0;
}

.wf-predict-review-inputs-floating-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.wf-predict-review-inputs-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.wf-predict-review-inputs-filter-row .control-label {
    margin: 0;
    font-weight: normal;
    font-size: 12px;
    color: #555;
}

.wf-predict-review-inputs-filter-row .wf-predict-review-inputs-filter-type {
    flex: 1;
    min-width: 0;
    max-width: 180px;
}

.wf-predict-review-inputs-nested-body {
    overflow-y: auto;
    padding: 12px 0;
    flex: 1;
    min-height: 0;
}

.wf-predict-review-inputs-tree {
    position: relative;
    padding-top: 4px;
}

.wf-predict-review-inputs-sidebar {
    padding: 0 12px;
}

.wf-predict-review-inputs-group {
    margin-bottom: 18px;
}

.wf-predict-review-inputs-group-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 6px;
}

.wf-predict-review-inputs-section-header {
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 2px solid #007bff;
    background: #f8f9fa;
}

.wf-predict-review-inputs-subgroup-section {
    border-bottom-color: #28a745;
}

.wf-predict-review-inputs-group-toggle,
.wf-predict-review-inputs-subgroup-toggle {
    cursor: pointer;
    color: #666;
    width: 16px;
    text-align: center;
}

.wf-predict-review-inputs-group-toggle:hover,
.wf-predict-review-inputs-subgroup-toggle:hover {
    color: #333;
}

.wf-predict-review-inputs-group-flat .wf-predict-review-inputs-group-header {
    background: #f8f9fa;
}

.wf-predict-review-inputs-group-flat .wf-predict-review-inputs-section-header {
    border-bottom-color: #6c757d;
}

.wf-predict-review-inputs-group-icon,
.wf-predict-review-inputs-subgroup-icon {
    color: #007bff;
}

.wf-predict-review-inputs-subgroup-icon {
    color: #9ca3af;
}

.wf-predict-review-inputs-subgroup {
    margin-left: 12px;
    margin-bottom: 14px;
}

.wf-predict-review-inputs-subgroup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #333;
    margin-bottom: 0;
}

.wf-predict-review-inputs-input-list {
    margin-left: 0;
}

.wf-predict-review-inputs-table {
    margin-bottom: 0;
    font-size: 13px;
}

.wf-predict-review-inputs-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
}

.wf-predict-review-inputs-table tbody tr.wf-predict-review-inputs-input-row {
    cursor: pointer;
}

.wf-predict-review-inputs-input-row .wf-predict-review-inputs-input-label {
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

.wf-predict-review-inputs-input-icon {
    color: #666;
    flex-shrink: 0;
}

.wf-predict-review-inputs-input-name {
    flex: 1;
    min-width: 0;
}

.wf-predict-review-inputs-input-row .wf-id-label.input {
    font-size: 11px;
    color: #777;
    line-height: 1.3;
    word-break: break-all;
}
.wf-predict-review-inputs-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
}
.wf-predict-review-inputs-resize-handle:hover {
    background: rgba(0, 0, 0, 0.06);
}

.wf-predict-review-inputs-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wf-predict-review-inputs-dt-container {
    padding-right: 12px;
}

/*
 * CSS for Predict from Historical - Review training dataset step
 * Added by shashank2104 on 02/20/2026 - DW-2716
 * Added by shashank2104 on 02/25/2026 at 05:58 PM - Option A: summary bar (sidebar removed)
 */
.wf-predict-training-dataset-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    margin: -16px -16px 12px -16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    color: #555;
}
.wf-predict-training-dataset-summary-sep {
    color: #bbb;
    margin: 0 2px;
}
.wf-predict-training-dataset-summary-actions {
    margin-left: auto;
}
.wf-predict-training-dataset-summary-actions .btn {
    font-size: 12px;
}

.wf-predict-training-dataset-summary-wfs,
.wf-predict-training-dataset-summary-inputs,
.wf-predict-training-dataset-summary-outputs {
    cursor: default;
}
.wf-predict-summary-tooltip-trigger {
    margin-right: 4px;
}
.wf-predict-training-dataset-raw-label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
.wf-predict-training-dataset-raw-label .pl-checkbox {
    margin-right: 4px;
}

.wf-predict-training-dataset-wrap {
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.wf-predict-training-dataset-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/*
 * Option B: Add output to predict - prominent card panel (modern rich UI/UX)
 * Full-height strip with card: soft gradient, shadow, clear CTA
 */
.wf-predict-add-output-card {
    flex-shrink: 0;
    width: 200px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.wf-predict-add-output-card-inner {
    width: 100%;
    padding: 20px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8ecf1;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.wf-predict-add-output-card-inner:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    border-color: #d0d7de;
}

.wf-predict-add-output-card-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

.wf-predict-add-output-card-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.wf-predict-add-output-card-desc {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    max-width: 100%;
}

.wf-predict-add-output-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wf-predict-add-output-card-btn:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

.wf-predict-add-output-card-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.wf-predict-training-dataset-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
}
.wf-predict-training-dataset-resize-handle:hover {
    background: rgba(0, 0, 0, 0.06);
}

.wf-predict-training-dataset-sidebar {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 450px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 12px;
}

.wf-predict-training-dataset-sidebar-inner .help-block {
    font-size: 11px;
}

/*
 * CSS for Predict from Historical dataset table - sticky Outputs column on the right
 * DW-2716
 */
.wf-predict-dataset-wrap.table-responsive {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}

.wf-predict-dataset-table th.wf-predict-outputs-col-sticky,
.wf-predict-dataset-table td.wf-predict-outputs-col-sticky {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}

.wf-predict-dataset-table thead th.wf-predict-outputs-col-sticky {
    background: #f5f5f5;
}

.wf-predict-dataset-table tbody td.wf-predict-outputs-col-sticky {
    min-width: 200px;
}

/** Highlight output row when selected from GlobalSearchView dropdown - DW-2716 **/
.wf-predict-output-item.wf-predict-output-item-highlight {
    background-color: rgba(33, 150, 243, 0.12);
    border-left: 3px solid #2196f3;
}

div.workflow .wf-predict-outputs-global-search-wrap .search-btns,
div.workflow .wf-predict-outputs-global-search-wrap .wf-search-type-dd {
    display: none;
}

/**
 * DW-2716 - Super modern steps 2-6: clean panels, one-line message, minimal chrome
 * Added by shashank2104 on 02/20/2026
 */
.wf-predict-step-modern {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wf-predict-step-modern .wf-predict-step-msg {
    font-size: 13px;
    line-height: 1.4;
    flex-shrink: 0;
}

.wf-predict-modern-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/** Added by shashank2104 on 02/25/2026 at 04:48 PM - modernized Basic mode prerun panel (Predict from Historical Run ML) **/
.wf-predict-ml-prerun-modern {
    margin-bottom: 16px;
}

.wf-predict-ml-prerun-modern .wf-predict-ml-prerun-card {
    flex: 0 0 auto;
    min-height: 0;
}

.wf-predict-ml-prerun-header {
    flex-shrink: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

.wf-predict-ml-prerun-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.wf-predict-ml-prerun-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6c757d;
}

.wf-predict-ml-prerun-form-section {
    padding: 16px 0 8px 0;
}

.wf-predict-ml-prerun-form-section .wf-predict-ml-basic-prerun-fb {
    margin-bottom: 0;
}

.wf-predict-ml-prerun-cta {
    padding-top: 20px;
    padding-bottom: 8px;
    text-align: center;
    border-top: 1px solid #eee;
}

.wf-predict-ml-run-cards-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
}

.wf-predict-ml-run-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wf-predict-ml-run-card:hover {
    border-color: #c0d8ee;
    box-shadow: 0 4px 12px rgba(51, 122, 183, 0.1);
}

.wf-predict-ml-run-card-selected {
    border-color: #337ab7;
    background-color: #f8fbff;
    box-shadow: 0 4px 14px rgba(51, 122, 183, 0.18);
}

.wf-predict-ml-run-card-selected:hover {
    border-color: #286090;
    box-shadow: 0 4px 14px rgba(51, 122, 183, 0.22);
}

.wf-predict-ml-run-card-icon-wrap {
    margin-bottom: 12px;
}

.wf-predict-ml-run-card-icon {
    font-size: 22px;
    color: #5a9bd5;
}

.wf-predict-ml-run-card-selected .wf-predict-ml-run-card-icon {
    color: #337ab7;
}

.wf-predict-ml-run-card-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.wf-predict-ml-run-card-desc {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    color: #5a6c7d;
}

.wf-predict-ml-run-card-desc strong {
    color: #333;
}

.wf-predict-ml-run-action-row {
    margin-bottom: 20px;
}

.wf-predict-ml-run-action-row .wf-predict-run-ml-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(51, 122, 183, 0.3);
}

.wf-predict-ml-run-action-row .wf-predict-run-ml-btn:hover {
    box-shadow: 0 3px 10px rgba(51, 122, 183, 0.4);
}

.wf-predict-dt-min-h {
    min-height: 260px;
}

.wf-predict-sidebar-settings .wf-predict-sidebar-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.wf-predict-choose-outputs-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.wf-predict-choose-outputs-with-sidebar .wf-predict-choose-outputs-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}
.wf-predict-choose-outputs-sidebar {
    width: 180px;
    flex-shrink: 0;
    border-right: 1px solid #e8e8e8;
    padding-right: 12px;
    margin-right: 12px;
}
.wf-predict-choose-outputs-sidebar .wf-predict-sidebar-title {
    font-size: 13px;
    font-weight: 600;
}

.wf-predict-review-inputs-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.wf-predict-review-inputs-view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-predict-review-inputs-view-toggle .wf-predict-view-toggle-label {
    font-size: 13px;
    color: #666;
}

.wf-predict-outputs-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.wf-predict-outputs-search-row .wf-predict-outputs-global-search-wrap {
    flex: 1;
    min-width: 200px;
}

.wf-predict-outputs-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wf-predict-outputs-table-wrap {
    min-height: 280px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}

.wf-predict-outputs-table {
    margin-bottom: 0;
}

.wf-predict-outputs-table .wf-predict-outputs-col-select {
    width: 70px;
    text-align: center;
}

.wf-predict-outputs-list-modern {
    flex: 1;
    min-height: 280px;
    max-height: 420px;
    overflow-y: auto;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 6px;
}

.wf-predict-outputs-list-modern .list-group-item {
    border-left: 0;
    border-right: 0;
}

.wf-predict-ml-actions {
    margin-top: 12px;
    flex-shrink: 0;
}

.wf-predict-progress-modern {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    flex-shrink: 0;
}

.wf-predict-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.wf-predict-progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.wf-predict-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #0d6efd;
    border-radius: 4px;
    transition: width 0.25s ease;
}

.wf-predict-progress-percent {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    min-width: 36px;
}

.wf-predict-result-wrap {
    margin-top: 16px;
    min-height: 200px;
}

.wf-predict-ml-result-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.wf-predict-ml-simple-summary.card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wf-predict-ml-simple-summary .dl-horizontal dt {
    width: 120px;
    text-align: left;
}

.wf-predict-ml-simple-summary .dl-horizontal dd {
    margin-left: 130px;
}

.wf-predict-ml-toolbar {
    flex-shrink: 0;
}

.wf-predict-training-dataset-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.wf-predict-training-dataset-toolbar .wf-predict-view-toggle-label {
    font-size: 13px;
    color: #666;
}

.wf-predict-results-card {
    display: block;
}

.wf-predict-results-block {
    margin-bottom: 16px;
}

/** DW-2733 - Rich Results step: summary card, dataset card, actions row */
.wf-predict-results-rich {
    gap: 16px;
    padding: 0 2px;
}

.wf-predict-results-summary-card {
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wf-predict-results-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e4ee;
}

.wf-predict-results-summary-icon {
    font-size: 20px;
    color: #5b6ee8;
}

.wf-predict-results-summary-title {
    font-weight: 600;
    font-size: 15px;
    color: #2c3e50;
}

.wf-predict-results-summary-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-predict-results-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.wf-predict-results-summary-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    min-width: 140px;
}

.wf-predict-results-summary-inputs,
.wf-predict-results-summary-targets {
    font-size: 13px;
    word-break: break-word;
}

.wf-predict-results-dataset-card {
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 200px;
}

.wf-predict-results-dataset-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
    border-radius: 10px 10px 0 0;
}

.wf-predict-results-dataset-icon {
    font-size: 18px;
    color: #28a745;
}

.wf-predict-results-dataset-title {
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
}

.wf-predict-results-dataset-body {
    padding: 12px 16px;
}

.wf-predict-results-dataset-wrap {
    min-height: 120px;
}

.wf-predict-results-dataset-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
}

/** Added by shashank2104 on 02/26/2026 - DW-2733 - Saved ML Model card: same rich UX as Summary/Predicted dataset */
.wf-predict-results-ml-model-card-wrap .wf-predict-results-ml-model-icon {
    color: #6f42c1;
}

.wf-predict-results-ml-model-card-wrap .wf-predict-results-ml-model-link {
    font-size: 13px;
}

.wf-predict-results-actions-row {
    flex-shrink: 0;
    align-items: flex-start;
}

.wf-predict-ml-model-panel .wf-predict-ml-model-header,
.wf-predict-ml-model-saved .wf-predict-ml-model-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.wf-predict-ml-model-icon {
    font-size: 18px;
    color: #6f42c1;
}

.wf-predict-ml-model-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.wf-predict-ml-model-body .form-group {
    margin-bottom: 12px;
}

.wf-predict-ml-model-body .form-group:last-of-type {
    margin-bottom: 16px;
}

.wf-predict-loading-card,
.wf-predict-empty-card {
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.wf-predict-loading-card .wf-step2-loading,
.wf-predict-empty-card .wf-predict-empty-text {
    color: #6c757d;
    font-size: 14px;
}

/** DW-2716 - View selected workflows modal: sidebar + main **/
.wf-predict-view-selected-modal {
    display: flex;
    flex-direction: row;
    min-height: 400px;
}
.wf-predict-view-selected-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #e8e8e8;
    overflow-y: auto;
    padding: 8px 0;
}
.wf-predict-view-selected-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
}
.wf-predict-view-selected-item:hover {
    background: #f5f5f5;
}
.wf-predict-view-selected-item.active {
    background: #e8f4fd;
    border-left-color: #2196f3;
}
.wf-predict-view-selected-main {
    min-width: 0;
    padding: 0;
}

.wf-predict-step1-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-predict-prefix-setting {
    font-weight: normal;
    font-size: 13px;
}

/** DW-2716 - Choose outputs step (Option 2): split-pane + FilterView 60px + selectable */
.wf-predict-step-modern {
    width: 100%;
}
.wf-predict-choose-outputs-step-view.wf-predict-choose-outputs-step-view-render {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
}
.wf-predict-choose-outputs-step-view .wf-predict-step-msg {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
}
.wf-predict-choose-outputs-card {
    padding: 15px 18px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/** Filter row: fixed 60px height, same pattern as WfCollectionView ext-filters (see wf-collection-body-tpl.css) */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-filter-row {
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters {
    flex: 0 0 25%;
    min-width: 180px;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters-container {
    flex: 1 1 auto;
}
/** Same CSS for filters container as wf-collection-body-tpl.css - mini view: Filter button + badge */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filter-button .clear-search {
    display: none;
}

/** Split panes: two columns */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-split {
    display: flex;
    flex-direction: row;
    min-height: 0;
    gap: 15px;
    margin-top: 10px;
}
.wf-predict-choose-outputs-available-pane,
.wf-predict-choose-outputs-selected-pane {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
    padding: 0;
}
.wf-predict-choose-outputs-available-header,
.wf-predict-choose-outputs-selected-header {
    flex-shrink: 0;
    padding: 10px 14px;
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wf-predict-choose-outputs-pane-title {
    font-weight: 600;
    font-size: 13px;
}
.wf-predict-choose-outputs-available-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
/** List container: count + list */
.wf-predict-choose-outputs-list-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 12px 12px 12px;
}
.wf-predict-choose-outputs-results-count {
    margin: 8px 0 6px 0;
    font-size: 12px;
}
.wf-predict-choose-outputs-available-list,
.wf-predict-choose-outputs-selected-list {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    padding: 0 4px;
}
.wf-predict-choose-outputs-selected-pane .wf-predict-choose-outputs-selected-list {
    padding: 10px 12px;
}
.wf-predict-choose-outputs-available-list .table {
    margin-bottom: 0;
}
.wf-predict-choose-outputs-available-row td,
.wf-predict-choose-outputs-row-cell {
    padding: 10px 14px;
    vertical-align: middle;
}
.wf-predict-choose-outputs-row-meta .wf-worker-type.wf-worker-type-sm {
    margin-left: 6px;
}
.wf-predict-choose-outputs-available-row {
    cursor: pointer;
}
.wf-predict-choose-outputs-available-row.ui-selected {
    background: #e3f2fd;
}
.wf-predict-choose-outputs-row-main {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
.wf-predict-choose-outputs-output-name {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}
.wf-predict-choose-outputs-row-meta {
    font-size: 12px;
    margin-bottom: 2px;
}
.wf-predict-choose-outputs-type-icon {
    margin-right: 6px;
    font-size: 12px;
}
.wf-predict-choose-outputs-current-value {
    font-size: 11px;
}
.wf-predict-choose-outputs-value-error .fa-exclamation-triangle {
    margin-right: 4px;
}

/** Selected pane rows */
.wf-predict-choose-outputs-selected-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}
.wf-predict-choose-outputs-selected-row:last-child {
    border-bottom: none;
}
.wf-predict-choose-outputs-remove-output {
    flex-shrink: 0;
    padding: 2px 6px;
}

.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container input[data-search-input] {
    height: 40px;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button .flex-l {
    display: none;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button span.clear-search:hover {
    color: red;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

/** Added by shashank2104 on 02/23/2026 - DW-2716 - Add output and Map output overlay cards: layout, buttons, container styling **/
.wf-predict-overlay-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.wf-predict-overlay-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wf-predict-add-output-overlay-card {
    width: 35vw;
    margin: 20px;
    padding: 0;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.wf-predict-add-output-overlay-card .panel-heading {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #e8e8e8;
    padding: 12px 16px;
}
.wf-predict-add-output-overlay-card .panel-body {
    padding: 16px;
}
.wf-predict-map-output-overlay.wf-predict-overlay-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.wf-predict-map-output-overlay .wf-predict-map-output-overlay-header {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
}
.wf-predict-map-output-overlay .wf-predict-map-output-overlay-body {
    min-height: 400px;
}

/** DVFIV-1933 - Add output sidebar: modern right-side panel (no overlay on main container) **/
/** Added by shashank2104 on 02/25/2026 at 03:22 PM - DVFIV-1933 - Wrapper vs container positioning, 500px width, gradient header, section dividers, saved-rule hover **/
.wf-predict-add-output-sidebar-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}
.wf-predict-add-output-sidebar-wrapper.wf-predict-add-output-sidebar-visible {
    pointer-events: auto;
}
.wf-predict-add-output-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35vw;
    max-width: 90%;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.wf-predict-add-output-sidebar-container.wf-predict-add-output-sidebar-visible {
    transform: translateX(0);
    pointer-events: auto;
}
/** Added by shashank2104 on 02/26/2026 - DVFIV-1933 - When appended to body: 100vh viewport, fixed position, high z-index **/
.wf-predict-add-output-sidebar-container-in-body {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 35vw;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.wf-predict-add-output-sidebar-container-in-body.wf-predict-add-output-sidebar-visible {
    transform: translateX(0);
}
.wf-predict-add-output-sidebar-container-in-body .wf-predict-add-output-sidebar-overlay {
    position: fixed;
    inset: 0;
}
.wf-predict-add-output-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.wf-predict-add-output-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}
.wf-predict-add-output-sidebar-resize-handle:hover,
.wf-predict-add-output-sidebar-resize-handle.resizing {
    background: #337ab7;
}
.wf-predict-add-output-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}
.wf-predict-add-output-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.wf-predict-add-output-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.wf-predict-add-output-sidebar-title i {
    color: #337ab7;
}
.wf-predict-add-output-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wf-predict-add-output-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 15px;
    min-height: 0;
}
.wf-predict-add-output-sidebar-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
}
.wf-predict-add-output-sidebar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.wf-predict-add-output-sidebar-section .control-label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}
/** Added by shashank2104 on 02/25/2026 - DVFIV-1933 - Parameterize section: distinct heading vs button, modern card + empty state **/
.wf-predict-add-output-parameterize-card {
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}
.wf-predict-add-output-parameterize-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.wf-predict-add-output-parameterize-header i {
    color: #6c757d;
    font-size: 14px;
}
.wf-predict-add-output-parameterize-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}
.wf-predict-add-output-parameterize-desc {
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.wf-predict-add-output-parameterize-card .wf-predict-add-output-sidebar-parameterize-btn {
    margin-bottom: 12px;
}
.wf-predict-add-output-parameterize-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    color: #6c757d;
}
.wf-predict-add-output-parameterize-empty i {
    font-size: 18px;
    color: #adb5bd;
}
/** Added by shashank2104 on 02/27/2026 - Rich empty state card: headline + 2 bullets + CTA **/
.wf-predict-add-output-parameterize-empty-card {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wf-predict-add-output-parameterize-empty-title {
    margin: 0 0 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
    line-height: 1.3;
}
.wf-predict-add-output-parameterize-empty-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #495057;
}
.wf-predict-add-output-parameterize-empty-item {
    margin-bottom: 8px;
}
.wf-predict-add-output-parameterize-empty-item:last-child {
    margin-bottom: 0;
}
.wf-predict-add-output-parameterize-empty-cta {
    padding-top: 4px;
}
.wf-predict-add-output-parameterize-empty-cta .btn {
    margin-bottom: 0;
}
.wf-predict-add-output-sidebar-saved-rules > .btn {
    margin-bottom: 10px;
}
.wf-predict-add-output-sidebar-saved-rules {
    margin-top: 0;
}
.wf-predict-add-output-sidebar-saved-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
}
.wf-predict-add-output-sidebar-saved-rules-table thead {
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-saved-rules-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #e9ecef;
}
.wf-predict-add-output-sidebar-saved-rules-table th.wf-predict-saved-rules-actions {
    text-align: right;
}
.wf-predict-add-output-sidebar-saved-rules-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f3f5;
}
.wf-predict-add-output-sidebar-saved-rules-table tbody tr:hover {
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-saved-rules-table tbody tr:last-child td {
    border-bottom: none;
}
.wf-predict-add-output-sidebar-saved-rules-table .wf-predict-saved-rules-td-actions {
    text-align: right;
}
.wf-predict-saved-rules-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-predict-add-output-sidebar-saved-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.wf-predict-add-output-sidebar-saved-rule:hover {
    background: #f0f2f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.wf-predict-add-output-sidebar-saved-rule-label {
    font-weight: 500;
    color: #333;
}
.wf-predict-add-output-sidebar-saved-rule-summary {
    flex: 1;
    min-width: 0;
}
.wf-predict-add-output-sidebar-saved-rule-clear {
    flex-shrink: 0;
}
.wf-predict-add-output-sidebar-parameterize-btn .wf-predict-param-btn-icon {
    margin-right: 4px;
}

/** Modern LS-DYNA cell in Choose outputs table: badge + Parameterize button **/
.wf-predict-output-cell-lsdyna {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-predict-lsdyna-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(13, 110, 253, 0.25);
}
.wf-predict-output-cell-lsdyna .wf-predict-parameterize-lsdyna-btn {
    white-space: nowrap;
}
.wf-predict-output-cell-lsdyna .wf-predict-parameterize-lsdyna-btn .fa {
    margin-right: 4px;
}
.wf-predict-lsdyna-cell-summary {
    margin-right: 4px;
}
.wf-predict-output-cell-lsdyna .wf-predict-lsdyna-view-text-btn {
    margin-left: 4px;
}
.wf-predict-output-cell-lsdyna .wf-predict-lsdyna-view-text-btn .fa {
    margin-right: 3px;
}

.wf-predict-add-output-sidebar-output-type-indicator {
    font-size: 12px;
}

/** Added by shashank2104 on 02/25/2026 at 05:11 PM - DVFIV-1933 - Add output sidebar: Pick from canvas in header, Save/Cancel in modern footer **/
.wf-predict-add-output-sidebar-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-footer .wf-predict-add-output-sidebar-cancel {
    order: 1;
}
.wf-predict-add-output-sidebar-footer .wf-predict-add-output-sidebar-save {
    order: 2;
}

/** DW-2733 - Modify Inputs sidebar: same pattern as Add output sidebar */
.wf-predict-inputs-sidebar-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}
.wf-predict-inputs-sidebar-wrapper.wf-predict-inputs-sidebar-visible {
    pointer-events: auto;
}
.wf-predict-inputs-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90%;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.wf-predict-inputs-sidebar-container.wf-predict-inputs-sidebar-visible {
    transform: translateX(0);
    pointer-events: auto;
}
.wf-predict-inputs-sidebar-container-in-body {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.wf-predict-inputs-sidebar-container-in-body.wf-predict-inputs-sidebar-visible {
    transform: translateX(0);
}
.wf-predict-inputs-sidebar-container-in-body .wf-predict-inputs-sidebar-overlay {
    position: fixed;
    inset: 0;
}
.wf-predict-inputs-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.wf-predict-inputs-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}
.wf-predict-inputs-sidebar-resize-handle:hover {
    background: #337ab7;
}
.wf-predict-inputs-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}
.wf-predict-inputs-sidebar-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.wf-predict-inputs-sidebar-title i {
    color: #337ab7;
}
.wf-predict-inputs-sidebar-subtitle {
    margin-top: 6px;
    font-size: 12px;
}
.wf-predict-inputs-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 15px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.wf-predict-inputs-sidebar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-toolbar .wf-predict-inputs-sidebar-search {
    flex: 1;
    max-width: 100%;
}
.wf-predict-inputs-sidebar-filters-wrap {
    flex-shrink: 0;
    margin-bottom: 10px;
}
.wf-predict-inputs-sidebar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.wf-predict-inputs-sidebar-list {
    position: relative;
}
.wf-predict-inputs-sidebar-list-inner {
    position: relative;
    width: 100%;
}
.wf-predict-inputs-sidebar-tree-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.wf-predict-inputs-sidebar-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.12s ease;
    flex:1 1 auto;
}
.wf-predict-inputs-sidebar-row:hover {
    background-color: #f5f5f5;
}
.wf-predict-inputs-sidebar-row.ui-selected {
    background-color: #e3f2fd;
}
.wf-predict-inputs-sidebar-row-cb {
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-row-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wf-predict-inputs-sidebar-row-type {
    flex-shrink: 0;
    font-size: 12px;
    color: #6c757d;
}

/** WorkerInputView inside row (no max-height so name/type are visible) */
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input {
    flex: 1;
    min-width: 0;
}
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input .worker-ip .formbuilder-container,
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input .worker-ip li.field-item {
    margin-bottom: 0;
    padding: 0 4px;
}

.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input.wf-predict-inputs-sidebar-row-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
}

/** Inputs sidebar: no border-bottoms on section headers (plan: clean modern UI) */
.wf-predict-inputs-sidebar .wf-predict-review-inputs-section-header,
.wf-predict-inputs-sidebar .wf-predict-review-inputs-subgroup-section {
    border-bottom: none;
}
.wf-predict-inputs-sidebar-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    background: #f8f9fa;
}
.wf-predict-training-dataset-summary-inputs .wf-predict-training-dataset-modify-inputs-btn {
    margin-left: 6px;
    vertical-align: middle;
}

/** DVFIV-1933 - WfPredictCollectionView: swap row (search | floating bar), no layout shift; compat table */
.wf-predict-collection-swap-row {
    flex-shrink: 0;
    min-height: 52px;
    position: relative;
}
.wf-predict-collection-swap-row .wf-predict-collection-search-row,
.wf-predict-collection-swap-row .wf-predict-collection-floating-bar-placeholder {
    min-height: 52px;
}
.wf-predict-collection-swap-row .wf-predict-collection-floating-bar-placeholder {
    display: none;
}
.wf-predict-collection-swap-row.wf-predict-collection-has-selection .wf-predict-collection-search-row {
    display: none !important;
}
.wf-predict-collection-swap-row.wf-predict-collection-has-selection .wf-predict-collection-floating-bar-placeholder {
    display: block;
}
.wf-predict-collection-floating-bar-placeholder {
    min-height: 0;
    flex-shrink: 0;
}
.wf-predict-collection .wf-collection-floating-bar {
    position: static;
    margin: 0;
    margin-bottom: 8px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/** Added by shashank2104 on 02/25/2026 at 09:24 PM - faded state while async compat runs */
.wf-predict-collection .wf-collection-floating-bar.wf-collection-floating-bar-pending {
    opacity: 0.65;
    pointer-events: auto;
}
.wf-predict-collection-table-wrap .wf-predict-collection-dt-container {
    min-height: 200px;
}
.wf-predict-collection-body-inner .filter-options {
    flex-shrink: 0;
}
.wf-predict-collection-compat-table-wrap .table {
    margin-bottom: 0;
}
.wf-predict-collection .wf-collection-card-compat-badge {
    display: inline-block;
}

/** DVFIV-1933 - table signature column: 2-line clamp + ellipsis */
.wf-predict-collection-table-wrap .wf-predict-collection-table-signature {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.35;
    max-width: 200px;
}

/** Added by shashank2104 on 02/25/2026 - Card view: items do not expand to 100% height; flow by content and grow with See more when expanded */
.wf-predict-collection .wf-collection-cards-grid {
    align-items: flex-start;
    align-content: flex-start;
}
.wf-predict-collection .wf-collection-cards-grid .wf-collection-card {
    align-self: flex-start;
    height: auto;
    min-height: 175px;
    flex: 0 1 calc(25% - 10px);
}
.wf-predict-collection .wf-collection-card .wf-collection-card-inner {
    height: auto;
    min-height: 175px;
    flex: 0 1 auto;
    justify-content: flex-start;
}
.wf-predict-collection .wf-collection-card.wf-collection-card-expanded .wf-collection-card-inner {
    min-height: 175px;
}

/** Added by shashank2104 on 02/26/2026 - DW-2733 - Saved predictions dropdown: modern table UI in nav-tab header */
.wf-predict-saved-dropdown-menu .wf-predict-saved-table-wrap {
    padding: 0;
}
.wf-predict-saved-dropdown .wf-predict-saved-table {
    margin-bottom: 0;
    font-size: 13px;
}
.wf-predict-saved-dropdown .wf-predict-saved-table thead th {
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 10px;
    white-space: nowrap;
}
.wf-predict-saved-dropdown .wf-predict-saved-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
}
.wf-predict-saved-dropdown .wf-predict-saved-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.wf-predict-saved-dropdown .wf-predict-saved-row:hover {
    background-color: #f5f5f5;
}
.wf-predict-saved-dropdown .wf-predict-saved-row.wf-predict-saved-active {
    background-color: #e8f4fc;
}
.wf-predict-saved-dropdown .wf-predict-saved-row.wf-predict-saved-active:hover {
    background-color: #d6eef9;
}
.wf-predict-saved-dropdown .wf-predict-saved-draft-icon {
    font-size: 6px;
    color: #999;
    vertical-align: middle;
}
.wf-predict-saved-dropdown .wf-predict-saved-name {
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-predict-saved-dropdown .wf-predict-saved-info {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.wf-predict-saved-dropdown .wf-predict-saved-remove {
    padding: 2px 6px;
}
.wf-predict-saved-dropdown .wf-predict-saved-empty td {
    padding: 16px;
    font-style: italic;
}

/*
 * CSS for template: wf-quick-fix-inputs-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-quick-fix-inputs-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.wf-execution-node-side-panel .modal-title {
float: left;
}

.modal-body div.wf-builder-inputs-list.backdrop {
background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list div.wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 500;
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list .inputs-list-spinner {
position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    font-size: 2em;
}

div#wf-file-explorer-modal .modal-body .file_explorer {
padding-top: 0px;
    width: 100%;
    margin: auto;
    background-color: inherit;
    box-shadow: none;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

div.wf-execution-node-side-panel .modal-title {
float: left;
}

.modal-body div.wf-builder-inputs-list.backdrop {
background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list div.wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 500;
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list .inputs-list-spinner {
position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    font-size: 2em;
}

div#wf-file-explorer-modal .modal-body .file_explorer {
padding-top: 0px;
    width: 100%;
    margin: auto;
    background-color: inherit;
    box-shadow: none;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

div.wf-execution-node-side-panel .modal-title {
float: left;
}

.modal-body div.wf-builder-inputs-list.backdrop {
background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list div.wf-modal-backdrop {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 500;
    pointer-events: none;
}

.modal-body div.wf-builder-inputs-list .inputs-list-spinner {
position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    font-size: 2em;
}

div#wf-file-explorer-modal .modal-body .file_explorer {
padding-top: 0px;
    width: 100%;
    margin: auto;
    background-color: inherit;
    box-shadow: none;
}

div#wf-add-nodes-flex-modal .modal-body .flex-container {
display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}



/*
 * CSS for template: wf-remove-input-view-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-remove-input-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal #wf-worker-inputs .remove-input:hover {
color: red !important;
}

div.workflow-modal #wf-worker-inputs .remove-input:hover {
color: red !important;
}

div.workflow-modal #wf-worker-inputs .remove-input:hover {
color: red !important;
}



/*
 * CSS for template: wf-server-response-viewer-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-server-response-viewer-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-server-response-viewer .server-response-viewer {
height: 100%;
    display: flex;
    flex-direction: column;
}

.wf-server-response-viewer .response-header {
background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.wf-server-response-viewer .response-title {
margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #495057;
}

.wf-server-response-viewer .response-actions {
display: flex;
    gap: 8px;
}

.wf-server-response-viewer .response-content {
flex: 1;
    overflow: hidden;
}

.wf-server-response-viewer .response-json {
background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 500px;
    overflow: auto;
    color: #495057;
}

.wf-server-response-viewer .response-json::-webkit-scrollbar {
width: 8px;
}

.wf-server-response-viewer .response-json::-webkit-scrollbar-track {
background: #f1f1f1;
    border-radius: 4px;
}

.wf-server-response-viewer .response-json::-webkit-scrollbar-thumb {
background: #c1c1c1;
    border-radius: 4px;
}

.wf-server-response-viewer .response-json::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}



/*
 * CSS for template: wf-timeline-view-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-timeline-view-tpl.tpl
 * Auto-generated by modularize_css.py
 */

 .wf-timeline-view {
    flex: 1;
 }
.wf-timeline-view .timeline-container {
position: relative;
    height: 35px;
    background: #f5f5f5;
    border-radius: 3px;
    margin: 5px 0;
}

.wf-timeline-view .timeline-bar-container {
position: relative;
    height: 100%;
    width: 100%;
}

.wf-timeline-view .timeline-time-labels {
position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    font-size: 11px;
    pointer-events: none;
}

.wf-timeline-view .timeline-time-labels .start-time,
.wf-timeline-view .timeline-time-labels .end-time {
position: absolute;
    color: #666;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.wf-timeline-view .worker-bar {
position: absolute;
    height: 100%;
    background: steelblue;
    border-radius: 2px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.wf-timeline-view .worker-bar:hover {
opacity: 0.8;
    transform: scaleY(1.05);
}

.wf-timeline-view .worker-bar.iterator-group {
background: #ff6b6b;
}

.wf-timeline-view .worker-bar.iteration-bar {
border: 1px solid rgba(0, 0, 0, 0.1);
}

.wf-timeline-view .worker-bar.iteration-bar.individual-iteration {
background-color: #4ecdc4;
    z-index: 2;
    transition: all 0.2s ease;
}

.wf-timeline-view .worker-bar.iteration-bar.individual-iteration:hover {
opacity: 0.8;
    transform: scaleY(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wf-timeline-view .worker-bar.iteration-bar.summary-group {
background-color: #ff6b6b;
    border: 2px solid #e74c3c;
    z-index: 1;
    opacity: 0.3;
}

.wf-timeline-view .iterator-group-container {
position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.wf-timeline-view .iterator-group-container:hover .worker-bar.iterator-group {
opacity: 0.4;
}

.wf-timeline-view .iterator-group-container:hover .worker-bar.iteration-bar.individual-iteration {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.wf-timeline-view .expanded-worker-row {
transition: all 0.3s ease;
}

.wf-timeline-view .expanded-worker-row .worker-name {
font-size: 12px;
    color: #666;
}

.wf-timeline-view .expanded-worker-row .execution-bar {
transition: all 0.2s ease;
}

.wf-timeline-view .expanded-worker-row .execution-bar:hover {
opacity: 0.8;
    transform: scaleY(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wf-timeline-view .iterator-info {
pointer-events: auto !important;
    z-index: 1000 !important;
}

.wf-timeline-view .iterator-group-label {
display: inline-block;
    transition: all 0.2s ease;
    pointer-events: auto !important;
    z-index: 1001 !important;
    position: relative;
}

.wf-timeline-view .iterator-group-label:hover {
background-color: rgba(0, 123, 255, 0.2) !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.wf-timeline-view .iteration-row {
border-top: 1px solid #dee2e6;
}

.wf-timeline-view .iteration-row .worker-name {
font-weight: bold;
    color: #495057;
}

.wf-timeline-view .iteration-worker-bar {
transition: all 0.2s ease;
}

.wf-timeline-view .iteration-worker-bar:hover {
opacity: 0.8;
    transform: scaleY(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wf-timeline-view .iteration-span-indicator {
border-radius: 1px;
}

.wf-timeline-view .iteration-row .timeline-container {
min-height: 35px;
}

.wf-timeline-view .iteration-worker-bar {
min-height: 3px;
}

.wf-timeline-view .timeline-time-labels .start-time {
text-align: left;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-timeline-view .timeline-time-labels .end-time {
text-align: right;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-timeline-view .timeline-scroll-controls {
display: flex;
    flex-direction: column;
    gap: 5px;
}

.wf-timeline-view .timeline-scroll-btn {
width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wf-timeline-view .timeline-scroll-btn:hover {
transform: scale(1.1);
    transition: transform 0.2s ease;
}

.wf-timeline-view .iteration-label {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.wf-timeline-view .iterator-info {
position: absolute;
    top: -35px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

.wf-timeline-view .iterator-info .iterator-label {
font-weight: bold;
    color: #e74c3c;
}

.wf-timeline-view .iterator-info .iteration-count {
color: #666;
    margin-left: 5px;
}

.wf-timeline-view .iterator-info small {
background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.wf-timeline-view .wf-worker-name {
font-weight: 500;
    color: #333;
}

.wf-timeline-view .wf-worker-type {
margin-top: 2px;
    font-size: 11px;
    color: #888;
}

.wf-timeline-view .timeline-summary .summary-item {
background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px 10px;
    margin-bottom: 10px;
}

.wf-timeline-view .timeline-summary .summary-value {
font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.wf-timeline-view .timeline-summary .summary-label {
font-size: 12px;
    color: #666;
    font-weight: 500;
}

.wf-timeline-view .timeline-time-axis {
background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 10px 15px;
}

.wf-timeline-view .timeline-table {
margin-bottom: 0;
}

.wf-timeline-view .timeline-visualization {
position: relative;
    min-height: 60px;
}

.wf-timeline-view .worker-name {
vertical-align: top;
    padding-top: 12px;
}

.wf-timeline-view .timeline-table th {
background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.wf-timeline-view .timeline-table td {
vertical-align: middle;
    border-top: 1px solid #e9ecef;
}

.wf-timeline-view .timeline-worker-row:hover {
background-color: #f8f9fa;
}

.wf-timeline-view .timeline-worker-row:hover .worker-bar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wf-timeline-view .timeline-search {
border-radius: 20px;
    border: 1px solid #ddd;
    padding: 8px 15px;
}

.wf-timeline-view .timeline-search:focus {
border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.wf-timeline-view .timeline-info {
background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 4px;
    padding: 10px 15px;
}

.wf-timeline-view .timeline-info small {
color: #0056b3;
}

.wf-timeline-view .timeline-info .text-primary {
color: #0056b3 !important;
    font-weight: 600;
}

.wf-timeline-view .timeline-info .text-info {
color: #17a2b8 !important;
    font-weight: 600;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-view {
display: block !important;
}



/*
 * CSS for template: wf-worker-info-container-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-worker-info-container-tpl.tpl
 * Auto-generated by modularize_css.py
 */

.wf-workers-container .worker-info {
flex: 1 1 auto;
}

.wf-workers-container .worker-info>div {
margin: 8px 0px;
    border-bottom: none !important;
    padding: 0 !important;
}

.wf-workers-container .worker-info {
flex: 1 1 auto;
}

.wf-workers-container .worker-info>div {
margin: 8px 0px;
    border-bottom: none !important;
    padding: 0 !important;
}

div.workflow .wf-worker-info-container {
position: absolute;
    z-index: 2;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.workflow .wf-worker-info-container .close {
position: absolute;
    top: -30px;
    right: 0px;
    z-index: 1001;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

div.workflow .wf-worker-info-container::before {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #2196f3;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.1);
    pointer-events: none;
    z-index: -1;
}

div.workflow .wf-worker-info-container::after {
content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(33, 150, 243, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
}



/*
 * CSS for template: wf-worker-item-tpl.tpl
 * Source: javascripts/templates/modular/misc/partials/wf-worker-item-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow-modal .wf-worker-item.mouseover {
font-weight: bold;
}

div.workflow-modal .wf-worker-item.mouseover {
font-weight: bold;
}


/*
 * Special CSS rules not matched to specific templates
 * Category: misc
 * Auto-generated by modularize_css.py
 */

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

@media (max-width: 1920px) {
/* div.workflow input.wf-worker-search {
        width: 200px !important;
    } */

    div.workflow .wf-name-container .wf-name {
        max-width: 500px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    div.workflow .plugin-header-center {
        position: relative;
        left: 0;
        transform: none;
    }

    div.workflow .plugin-header-center .wf-name-container {
        justify-content: center;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
div.workflow .chart-view .wf-group-button .wf-label {
        display: none;
    }
}

div.wf-popover.wf-output-assign-to {
width: 400px;
    max-width: unset;
}

span.wf-danger {
color: #d9534f;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}

div.wf-thumbnail-enlarged .thumbnail_heading {
display: none;
}

@keyframes border-opacity-change {
0% {
        border-color: rgba(221, 221, 221, 1)
    }

    30% {
        border-color: rgba(221, 221, 221, 0.5)
    }

    50% {
        border-color: rgba(221, 221, 221, 0.3)
    }

    70% {
        border-color: rgba(221, 221, 221, 0.5)
    }

    100% {
        border-color: rgba(221, 221, 221, 1);
    }
}

body .wf-objects-clone {
position: fixed;
    z-index: 2000;
    pointer-events: none;
}

.wf-objects-clone li {
margin-bottom: 6px;
}

.wf-objects-clone ul {
max-height: 300px;
    overflow: auto;
}

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

div.wf-popover.wf-output-assign-to {
width: 400px;
    max-width: unset;
}

span.wf-danger {
color: #d9534f;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}

div.wf-thumbnail-enlarged .thumbnail_heading {
display: none;
}

body .wf-objects-clone {
position: fixed;
    z-index: 2000;
    pointer-events: none;
}

.wf-objects-clone li {
margin-bottom: 6px;
}

.wf-objects-clone ul {
max-height: 300px;
    overflow: auto;
}

.item-content.it-output-viz {
max-width: calc(100% - 20px);
}

@media (max-width: 1200px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 500px;
    }
}

@media (max-width: 768px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 400px;
    }
}

@media (max-width: 480px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 300px;
    }
}

.wf-navigation-split-layout {
background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wf-navigation-split-layout .wf-navigation-header {
padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.wf-navigation-split-layout .wf-navigation-body {
position: relative;
}

.wf-navigation-split-layout .wf-navigation-left {
border-right: 1px solid #ddd;
    background: #fff;
}

.wf-navigation-split-layout .wf-navigation-right {
background: #f8f9fa;
    border-left: 1px solid #ddd;
    position: relative;
}

.wf-navigation-split-layout .navigation-breadcrumbs {
padding: 15px;
}

.wf-navigation-split-layout .breadcrumbs-header {
margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.wf-navigation-split-layout .breadcrumbs-header h6 {
margin: 0;
    color: #333;
    font-weight: 600;
}

.wf-navigation-split-layout .breadcrumb-content {
flex: 1;
}

.wf-navigation-split-layout .breadcrumb-title {
font-weight: 500;
    margin-bottom: 2px;
}

.wf-navigation-split-layout .breadcrumb-meta {
font-size: 11px;
}

.wf-navigation-split-layout .breadcrumb-actions {
margin-left: 10px;
}

.wf-navigation-split-layout .no-breadcrumbs {
padding: 20px;
    text-align: center;
}

.wf-navigation-split-layout .no-breadcrumbs p {
margin: 0;
    color: #666;
}

@media (max-width: 600px) {
div.workflow .workflow-toc-toggle-btn {
        top: 12vw;
        left: 2vw;
        width: 32px;
        height: 96px;
        font-size: 1rem;
    }
}

@keyframes pulse {
0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.2);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

div.custom-editor .new-plugin-template-ui {
background-color: #FFF;
}

@media (max-width: 900px) {
div.wf-agentic-view[data-view="focussed"] .agentic-chat-area,
    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        max-width: 100%;
        min-width: 0;
        border: none;
    }

    div.wf-agentic-view[data-view="focussed"] .row.no-gutters.flex-grow-1 {
        flex-direction: column;
    }

    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        border-top: 1px solid #e3e6ea;
        border-left: none;
        box-shadow: 0 -4px 24px rgba(33, 150, 243, 0.10);
        /*min-height: 180px;*/
        /*max-height: 50vh;*/
        height: auto;
    }
}

.simulations-popover {
max-width: 800px !important;
    min-width: 600px !important;
    width: auto !important;
}

.simulations-popover-container {
background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.simulations-popover .popover-header {
background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.simulations-popover .popover-controls {
display: flex;
    gap: 5px;
}

.simulations-popover .popover-body {
padding: 15px;
    max-height: 500px;
    overflow-y: auto;
}

.simulations-popover .simulations-table-container {
min-height: 200px;
    height: 300px;
}

.simulations-popover .table-loading {
text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.simulations-popover {
z-index: 1051 !important;
}

@media (max-width: 768px) {
.simulations-popover {
        max-width: 95vw !important;
        min-width: 95vw !important;
    }

    .simulations-popover .popover-body {
        max-height: 60vh;
    }
}

@media (max-width: 768px) {
div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 80px;
        font-size: 10px;
        padding: 4px 8px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 15px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 40vw;
    }
}

@media (max-width: 480px) {
div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 60px;
        font-size: 9px;
        padding: 2px 4px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 12px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 50vw;
    }
}

@media (max-width: 768px) {
div.workflow .wf-worker-info-container {
        width: 300px;
        height: 300px;
    }

    div.workflow .wf-worker-info-left,
    div.workflow .wf-worker-info-right {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    div.workflow .wf-worker-info-top {
        top: -50px;
    }

    /* Adjust pill sizes for mobile */
    div.workflow .wf-worker-info-left .wf-info-item,
    div.workflow .wf-worker-info-right .wf-info-item {
        max-width: 100px;
        font-size: 10px;
        padding: 3px 6px;
    }
}

@keyframes expandFromCollapsed {
0% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes collapseToCollapsed {
0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }
}

@media (max-width: 480px) {
div.workflow .collapsed-sequence-expanded-container {
        min-width: 320px;
        max-width: 350px;
        padding: 15px;
    }

    div.workflow .collapsed-sequence-expanded-container .workers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-circle-inner {
        height: 70px;
        padding: 6px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-name {
        font-size: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-type {
        font-size: 8px;
    }
}

@media (max-width: 768px) {
div.workflow .workflow-navigation-container .direction-step .worker-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
        margin-right: 12px;
    }

    div.workflow .workflow-navigation-container .direction-step .worker-name {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
div.workflow .workflow-navigation-container {
        width: 100vw;
        right: -100vw;
    }

    div.workflow .workflow-navigation-container.visible {
        right: 0;
    }

    div.workflow .workflow-navigation-container .path-summary {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 768px) {
div.workflow .wf-filter-panel,
    div.workflow-modal .wf-filter-panel {
        min-width: 320px;
        max-width: 100%;
    }

    div.workflow .wf-filter-row,
    div.workflow-modal .wf-filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    div.workflow .wf-filter-content,
    div.workflow-modal .wf-filter-content {
        padding: 12px;
    }

    div.workflow .wf-filter-header,
    div.workflow-modal .wf-filter-header {
        padding: 12px;
    }
}

@media (max-width: 1200px) {
div.workflow .marker-pairing-table th,
    div.workflow .marker-pairing-table td {
        padding: 6px 4px;
        font-size: 12px;
    }

    div.workflow .marker-pairing-table .form-control,
    div.workflow .marker-pairing-table .sl-select2 {
        font-size: 11px;
        padding: 3px 6px;
        height: 26px;
    }
}

@media (max-width: 768px) {
div.workflow .marker-pairing-table-container {
        overflow-x: auto;
    }

    div.workflow .marker-pairing-table {
        min-width: 1000px;
    }
}


/** Added by shashank2104 on 2026-05-12 - DW-2910 - Consolidated certificate preview tab strip.
 *  Scoped under .d3view-wf-cert-consol-modal (added to GenericModalView's customClass only when
 *  consolidated). Single-cert preview keeps only .d3view-wf-cert-preview-modal so these rules
 *  don't affect it. Each tab's pane runs the FULL rendering pipeline (var resolution, viz embeds,
 *  paginated styling) independently via renderCertContentInto, so charts render natively.
 *
 *  Layout: modal-body is given a fixed height so the .full-h flex column inside takes the full
 *  viewport. panes-wrap (flex-1) scrolls; tab strip sits at the bottom of the visible modal,
 *  not the bottom of the scrolled content. **/

.d3view-wf-cert-consol-modal .modal-body {
    padding: 0 !important;
    /* Height context for .full-h inside — keeps the modal from growing arbitrarily with content
       and lets the tab strip pin at the bottom of the visible body. */
    height: 75vh;
    max-height: 75vh;
    overflow: hidden;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs {
    flex-shrink: 0;
    background: var(--d3v-bg-primary);
    margin: 0;
    padding: 0 16px 8px;
    border: 0;
    border-top: 1px solid var(--d3v-border-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
    list-style: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li {
    margin: 0;
    float: none;
    list-style: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li > a {
    border: 1px solid transparent;
    border-top: 0;
    /* Tabs at bottom → rounded BOTTOM corners */
    border-radius: 0 0 var(--d3v-r-sm) var(--d3v-r-sm);
    padding: 8px 14px;
    margin: 0;
    color: var(--d3v-text-secondary);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    transition: var(--d3v-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    text-decoration: none;
    user-select: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li > a:hover {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a,
.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a:hover,
.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a:focus {
    background: var(--d3v-bg-secondary);
    color: var(--d3v-accent-primary);
    border: 1px solid var(--d3v-border-default);
    border-top: 0;
    margin-top: -1px;
    /* Accent indicator on the TOP edge */
    box-shadow: 0 2px 0 var(--d3v-accent-primary) inset;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs .cert-consol-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a .cert-consol-count {
    background: var(--d3v-accent-primary);
    color: #fff;
}

/** Pane container — flex-1 + o_auto_y come from utility classes; this just gives it
 *  the page-style background and ensures it minimum-zeroes correctly inside flex. **/
.d3view-wf-cert-consol-modal .cert-consol-panes-wrap {
    background: #f4f6f9;
    min-height: 0;
}

.d3view-wf-cert-consol-modal .cert-consol-pane {
    padding: 40px;
}

/** Added by shashank2104 on 03/26/2026 - DW-2783 - Certification Builder styles **/

/* Scoped under the modal custom class */
.d3view-wf-certification-builder .modal-body {
    padding: 0;
    display: flex;
    flex-direction: row;
    height: 70vh;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-builder-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.d3view-wf-certification-builder .cert-builder-editor .tox.tox-tinymce {
    border: none !important;
    flex: 1;
}

/* Sidebar — resizable */
.d3view-wf-certification-builder .cert-builder-sidebar {
    width: 320px;
    min-width: 220px;
    max-width: 600px;
    border-left: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #fafbfc);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

/* Resize handle */
.d3view-wf-certification-builder .cert-sidebar-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-resize-handle:hover,
.d3view-wf-certification-builder .cert-sidebar-resize-handle.active {
    background: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-builder-sidebar .sidebar-content {
    padding: 12px;
    padding-left: 16px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sidebar hint text */
.d3view-wf-certification-builder .cert-sidebar-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 8px;
}

/* Filters area in sidebar */
.d3view-wf-certification-builder .cert-sidebar-filters {
    margin-bottom: 8px;
}

.d3view-wf-certification-builder .cert-sidebar-filters .cert-filters-container {
    margin-top: 4px;
}

.d3view-wf-certification-builder .cert-sidebar-filters .pl-inline-filters .pl-filter-views-list {
    flex-wrap: wrap;
    gap: 4px;
}

/* Preview mode */
.d3view-wf-certification-builder .cert-builder-preview {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    background: var(--d3v-bg-secondary, #f4f6f9);
}

.d3view-wf-certification-builder .cert-builder-preview-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Variable chip styles (inside TinyMCE content) */
.d3view-wf-certification-builder .cert-var,
.cert-var {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    cursor: default;
    vertical-align: baseline;
    white-space: nowrap;
}

.cert-var[data-var-type="scalar"] {
    background: #ebf4ff;
    border: 1px solid #90cdf4;
    color: #2b6cb0;
}

.cert-var[data-var-type="vector"] {
    background: #fffaf0;
    border: 1px solid #fbd38d;
    color: #c05621;
}

.cert-var[data-var-type="dataset"] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}

/* Drop overlay */
.d3view-wf-certification-builder .cert-drop-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(49, 130, 206, 0.08);
    border: 2px dashed var(--d3v-accent, #3182ce);
    border-radius: var(--d3v-r-sm, 4px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.d3view-wf-certification-builder .cert-drop-overlay.active {
    display: flex;
}

.d3view-wf-certification-builder .cert-drop-overlay-label {
    background: #ebf4ff;
    color: #2b6cb0;
    padding: 8px 20px;
    border-radius: var(--d3v-r-full, 20px);
    font-weight: 600;
    font-size: 13px;
}

/* Draggable items in sidebar */
.d3view-wf-certification-builder .worker-io-item {
    cursor: grab;
    padding: 2px 4px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .worker-io-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

/* Sparkline / curve chart container in preview */
.d3view-wf-certification-builder .cert-sparkline-container {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 12px;
    margin: 10px 0;
    text-align: center;
}

.d3view-wf-certification-builder .cert-curve-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    margin-bottom: 4px;
    text-align: center;
}

.d3view-wf-certification-builder .cert-curve-placeholder {
    min-height: 180px;
}

/* Dataset table in preview */
.d3view-wf-certification-builder .cert-dataset-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.d3view-wf-certification-builder .cert-dataset-table th {
    background: var(--d3v-bg-tertiary, #f0f4f8);
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #4a5568);
}

.d3view-wf-certification-builder .cert-dataset-table td {
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-dataset-table tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #fafbfc);
}

/* Resize overlay — prevents iframe from stealing mouse events during drag */
.d3view-wf-certification-builder .cert-resize-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    cursor: col-resize;
}

.d3view-wf-certification-builder .cert-resize-overlay.active {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   Block Builder Mode — Added for DW-2783
   ═══════════════════════════════════════════════════════════════ */

/* Main block builder wrapper — hidden by default, shown via _switchMode */
.d3view-wf-certification-builder .cert-block-builder {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--d3v-bg-secondary, #f4f6f9);
    display: none;
    justify-content: center;
    align-items: flex-start;
}

/* White page canvas — flex column for header/body/footer zones */
.d3view-wf-certification-builder .cert-block-page {
    width: 816px;
    min-height: 100%;
    background: #fff;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.08));
    border-radius: var(--d3v-r-md, 8px);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header/Footer zones — pinned top/bottom of page */
.d3view-wf-certification-builder .cert-header-zone,
.d3view-wf-certification-builder .cert-footer-zone {
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-header-zone:empty,
.d3view-wf-certification-builder .cert-footer-zone:empty {
    display: none;
}

.d3view-wf-certification-builder .cert-footer-zone {
    margin-top: auto;
}

/* Body container fills remaining space */
.d3view-wf-certification-builder .cert-blocks-container {
    flex: 1 1 auto;
    padding: 48px;
}

/* Empty state */
.d3view-wf-certification-builder .cert-blocks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    padding: 60px 20px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 14px;
    text-align: center;
}

.d3view-wf-certification-builder .cert-blocks-empty i.fa-th-large {
    font-size: 36px;
    opacity: 0.4;
}

/* + button inside the empty state */
.d3view-wf-certification-builder .cert-blocks-empty .cert-empty-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    margin-top: 8px;
    border: 1px solid var(--d3v-accent, #3B82F6);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.d3view-wf-certification-builder .cert-blocks-empty .cert-empty-add-btn:hover {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
}

/* Drop overlay for block page */
.d3view-wf-certification-builder .cert-block-drop-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(49, 130, 206, 0.06);
    border: 2px dashed var(--d3v-accent, #3182ce);
    border-radius: var(--d3v-r-md, 8px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.d3view-wf-certification-builder .cert-block-drop-overlay.active {
    display: flex;
}

.d3view-wf-certification-builder .cert-drop-overlay-label {
    background: #ebf4ff;
    color: #2b6cb0;
    padding: 8px 20px;
    border-radius: var(--d3v-r-full, 20px);
    font-weight: 600;
    font-size: 13px;
}

/* ── Blocks Container — CSS Grid for stable row-based layout ── */

.d3view-wf-certification-builder .cert-blocks-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    align-items: start;
    align-content: start;
}

/* ── Individual Block ── */

.d3view-wf-certification-builder .cert-block {
    position: relative;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: border-color var(--d3v-t-fast, 0.12s), box-shadow var(--d3v-t-fast, 0.12s);
    grid-column: span 6; /* full width by default */
}

/* Width variants — grid-column spans */
.d3view-wf-certification-builder .cert-block[data-width="half"] {
    grid-column: span 3;
}

.d3view-wf-certification-builder .cert-block[data-width="third"] {
    grid-column: span 2;
}

.d3view-wf-certification-builder .cert-block[data-width="two-thirds"] {
    grid-column: span 4;
}

/* Additional width variants */
.d3view-wf-certification-builder .cert-block[data-width="one-sixth"] {
    grid-column: span 1;
}

.d3view-wf-certification-builder .cert-block[data-width="five-sixths"] {
    grid-column: span 5;
}


.d3view-wf-certification-builder .cert-block:hover {
    border-color: var(--d3v-border, #e2e8f0);
    z-index: 2;
}

.d3view-wf-certification-builder .cert-block.cb-selected {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    z-index: 3;
}

/* Block action toolbar — top-right corner, above badge */
.d3view-wf-certification-builder .cert-block-actions {
    position: absolute;
    top: -28px;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--d3v-t-fast, 0.12s);
    z-index: 5;
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-actions,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-actions {
    opacity: 1;
}

.d3view-wf-certification-builder .cert-block-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(255,255,255,0.95);
    color: var(--d3v-text-secondary, #64748B);
    cursor: pointer;
    font-size: 10px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-action-btn:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
    border-color: var(--d3v-border-strong, #cbd5e0);
}

.d3view-wf-certification-builder .cert-block-action-btn.drag-handle {
    cursor: grab;
}

.d3view-wf-certification-builder .cert-block-action-btn.danger:hover {
    color: var(--d3v-status-danger, #E53E3E);
    border-color: var(--d3v-status-danger, #E53E3E);
    background: #fff5f5;
}

/* Type badge — top-right corner */
.d3view-wf-certification-builder .cert-block-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: var(--d3v-r-full, 20px);
    background: var(--d3v-bg-tertiary, #f0f4f8);
    color: var(--d3v-text-muted, #94A3B8);
    border: 1px solid var(--d3v-border, #e2e8f0);
    opacity: 0;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-badge,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-badge {
    opacity: 1;
}

/* Block body — shared */
.d3view-wf-certification-builder .cert-block-body {
    padding: 12px 16px;
    min-height: 32px;
}

.d3view-wf-certification-builder .cert-block-body:focus {
    outline: none;
}

/* Placeholder text for empty contenteditable */
.d3view-wf-certification-builder .cert-block-body[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
    pointer-events: none;
}

/* ── Per-type block body styles ── */

/* Heading */
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body {
    font-size: 22px;
    font-weight: 700;
    color: #1a365d;
    line-height: 1.3;
}

/* Text */
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--d3v-text-primary, #1a202c);
}

/* Table — overflow protection */
.d3view-wf-certification-builder .cert-block[data-type="table"] .cert-block-body {
    overflow-x: auto;
}

.d3view-wf-certification-builder .cert-block-table {
    width: 100%;
    border-collapse: collapse;
}

.d3view-wf-certification-builder .cert-block-table th {
    background: var(--d3v-bg-tertiary, #f0f4f8);
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #4a5568);
}

.d3view-wf-certification-builder .cert-block-table td {
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 13px;
    min-width: 60px;
}

.d3view-wf-certification-builder .cert-block-table td:focus,
.d3view-wf-certification-builder .cert-block-table th:focus {
    outline: 2px solid var(--d3v-accent, #3B82F6);
    outline-offset: -2px;
}

.d3view-wf-certification-builder .cert-block-table tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #fafbfc);
}

/* HR / Divider */
.d3view-wf-certification-builder .cert-block-hr {
    padding: 8px 16px;
}

.d3view-wf-certification-builder .cert-block-hr hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--d3v-border-strong, #cbd5e0), transparent);
    margin: 0;
}

/* Image placeholder */
.d3view-wf-certification-builder .cert-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-image-placeholder:hover {
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-image-placeholder i {
    font-size: 28px;
}

/* Variable block body */
.d3view-wf-certification-builder .cert-block-var-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.d3view-wf-certification-builder .cert-block-var-empty {
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
    font-style: italic;
}

/* Variable chip (block builder version) */
.d3view-wf-certification-builder .cert-block-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #ebf4ff;
    border: 1px solid #90cdf4;
    color: #2b6cb0;
}

.d3view-wf-certification-builder .cert-block-var-chip[data-var-type="vector"] {
    background: #fffaf0;
    border-color: #fbd38d;
    color: #c05621;
}

.d3view-wf-certification-builder .cert-block-var-chip[data-var-type="dataset"] {
    background: #f0fff4;
    border-color: #9ae6b4;
    color: #276749;
}

.d3view-wf-certification-builder .cert-block-var-chip-icon {
    font-weight: 700;
}

.d3view-wf-certification-builder .cert-block-var-chip-remove {
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    padding: 0 0 0 2px;
    color: inherit;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-var-chip-remove:hover {
    opacity: 1;
}

/* ── Columns Block ── */
.d3view-wf-certification-builder .cert-block[data-type="columns"] .cert-columns-container {
    display: flex;
    gap: 16px;
}

.d3view-wf-certification-builder .cert-column {
    flex: 1;
    min-height: 60px;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 12px;
    transition: all 0.15s ease;
}

.d3view-wf-certification-builder .cert-column:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-column-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 6px;
}

.d3view-wf-certification-builder .cert-column [contenteditable] {
    min-height: 36px;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
}

/* ── jQuery UI Resizable Handles — GridStack-like all sides ── */

.d3view-wf-certification-builder .cert-block .ui-resizable-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease, opacity 0.15s ease;
    opacity: 0;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-handle,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-handle {
    opacity: 1;
}

/* Edge handles */
.d3view-wf-certification-builder .cert-block .ui-resizable-n {
    top: -3px; left: 0; right: 0; height: 6px; cursor: n-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-s {
    bottom: -3px; left: 0; right: 0; height: 6px; cursor: s-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-e {
    right: -4px; top: 0; bottom: 0; width: 8px; cursor: e-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-w {
    left: -4px; top: 0; bottom: 0; width: 8px; cursor: w-resize;
}

/* Corner handles */
.d3view-wf-certification-builder .cert-block .ui-resizable-ne {
    top: -4px; right: -4px; width: 10px; height: 10px; cursor: ne-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-nw {
    top: -4px; left: -4px; width: 10px; height: 10px; cursor: nw-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-se {
    bottom: -4px; right: -4px; width: 10px; height: 10px; cursor: se-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-sw {
    bottom: -4px; left: -4px; width: 10px; height: 10px; cursor: sw-resize;
}

/* Hover indicators — edge handles show accent line */
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-e,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-e {
    background: linear-gradient(to right, transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-w,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-w {
    background: linear-gradient(to left, transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-s,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-s {
    background: linear-gradient(transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
    border-radius: 0 0 6px 6px;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-n,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-n {
    background: linear-gradient(var(--d3v-accent, #3B82F6), transparent);
    opacity: 0.25;
    border-radius: 6px 6px 0 0;
}

/* Corner handles show dot indicator */
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-se,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-sw,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-ne,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-nw,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-se,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-sw,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-ne,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-nw {
    background: var(--d3v-accent, #3B82F6);
    border-radius: 50%;
    opacity: 0.5;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-handle:hover {
    opacity: 0.7 !important;
}

/* Active resizing state */
.d3view-wf-certification-builder .cert-block.cb-resizing {
    border-color: var(--d3v-accent, #3B82F6) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    z-index: 20;
}

.d3view-wf-certification-builder .cert-block.cb-resizing .cert-block-badge {
    opacity: 1;
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Inserter Row — hidden to allow grid side-by-side layout ── */

.d3view-wf-certification-builder .cert-block-inserter {
    display: none;
}

.d3view-wf-certification-builder .cert-block-inserter-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d3v-accent, #3B82F6);
    border-radius: 50%;
    background: #fff;
    color: var(--d3v-accent, #3B82F6);
    cursor: pointer;
    font-size: 10px;
    transition: all var(--d3v-t-fast, 0.12s);
    z-index: 5;
}

.d3view-wf-certification-builder .cert-block-inserter-btn:hover {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── SortableJS classes ── */

.d3view-wf-certification-builder .cert-block.sortable-ghost {
    opacity: 0.3;
    border: 2px dashed var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-block.sortable-chosen {
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
}

/* New block animation */
@keyframes cert-block-new {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.d3view-wf-certification-builder .cert-block--new {
    animation: cert-block-new 0.25s ease-out;
}

/* ── Sidebar Tabs ── */

.d3view-wf-certification-builder .cert-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-sidebar-tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--d3v-text-secondary, #64748B);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-tab:hover {
    color: var(--d3v-text-primary, #1a202c);
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-sidebar-tab.active {
    color: var(--d3v-accent, #3B82F6);
    border-bottom-color: var(--d3v-accent, #3B82F6);
}

/* Sidebar tab content */
.d3view-wf-certification-builder .cert-sidebar-tab-content {
    display: none;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-sidebar-tab-content.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

/* ── Block Palette Grid ── */

.d3view-wf-certification-builder .cert-blocks-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    height: 100%;
    overflow: auto;
}

.d3view-wf-certification-builder .cert-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: #fff;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-palette-item:hover {
    background: rgba(59, 130, 246, 0.04);
    border-color: var(--d3v-accent, #3B82F6);
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.06));
}

.d3view-wf-certification-builder .cert-palette-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 6px);
    font-size: 15px;
}

.d3view-wf-certification-builder .cert-palette-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748B);
}

/* Per-type palette icon colors */
.d3view-wf-certification-builder .cert-palette-icon.heading-icon {
    background: #e8e0f7;
    color: #5b21b6;
}

.d3view-wf-certification-builder .cert-palette-icon.text-icon {
    background: #dcfce7;
    color: #16a34a;
}

.d3view-wf-certification-builder .cert-palette-icon.table-icon {
    background: #ffedd5;
    color: #ea580c;
}

.d3view-wf-certification-builder .cert-palette-icon.hr-icon {
    background: #fce7f3;
    color: #db2777;
}

.d3view-wf-certification-builder .cert-palette-icon.image-icon {
    background: #cffafe;
    color: #0891b2;
}

.d3view-wf-certification-builder .cert-palette-icon.variable-icon {
    background: #fef3c7;
    color: #d97706;
}

.d3view-wf-certification-builder .cert-palette-icon.columns-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

/* ── Insert Menu Popover ── */

.d3view-wf-certification-builder .cert-insert-menu {
    position: absolute;
    background: #fff;
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    padding: 6px;
    width: 200px;
    z-index: 1000;
    display: none;
}

.d3view-wf-certification-builder .cert-insert-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--d3v-text-primary, #1a202c);
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-insert-menu-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-insert-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #64748B);
}

/* ── Disabled Sidebar Tab ── */

.d3view-wf-certification-builder .cert-sidebar-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Remote Data Tab ── */

.d3view-wf-certification-builder .cert-remote-source-select .select2-container {
    width: 100% !important;
}

.d3view-wf-certification-builder .cert-remote-item-select {
    min-height: 32px;
}

.d3view-wf-certification-builder .cert-remote-loading {
    text-align: center;
    padding: 20px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
}

/* Response group headers */
.d3view-wf-certification-builder .cert-remote-group {
    margin-bottom: 8px;
}

.d3view-wf-certification-builder .cert-remote-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #64748B);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    cursor: pointer;
    user-select: none;
}

.d3view-wf-certification-builder .cert-remote-group-header .fa-chevron-right {
    transition: transform var(--d3v-t-fast, 0.12s);
    font-size: 9px;
}

.d3view-wf-certification-builder .cert-remote-group.open .cert-remote-group-header .fa-chevron-right {
    transform: rotate(90deg);
}

.d3view-wf-certification-builder .cert-remote-group-body {
    display: none;
}

.d3view-wf-certification-builder .cert-remote-group.open .cert-remote-group-body {
    display: block;
}

/* Individual remote response item — draggable */
.d3view-wf-certification-builder .cert-remote-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px 6px 16px;
    cursor: grab;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-remote-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-remote-item-icon {
    width: 18px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.d3view-wf-certification-builder .cert-remote-item-content {
    flex: 1;
    min-width: 0;
}

.d3view-wf-certification-builder .cert-remote-item-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-wf-certification-builder .cert-remote-item-preview {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 2px;
    max-height: 60px;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-remote-sparkline {
    height: 30px;
    width: 100%;
}

/* Dataset expandable columns */
.d3view-wf-certification-builder .cert-remote-dataset-toggle {
    cursor: pointer;
    font-size: 11px;
    color: var(--d3v-accent, #3B82F6);
    padding: 4px 8px 4px 16px;
    user-select: none;
}

.d3view-wf-certification-builder .cert-remote-dataset-toggle:hover {
    text-decoration: underline;
}

.d3view-wf-certification-builder .cert-remote-dataset-cols {
    padding-left: 16px;
    display: none;
}

.d3view-wf-certification-builder .cert-remote-dataset-cols.open {
    display: block;
}

/* Empty/error state */
.d3view-wf-certification-builder .cert-remote-empty {
    text-align: center;
    padding: 30px 10px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   Landing Page — Mode Picker (DW-2783 enhancement)
   ═══════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-landing-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--d3v-bg-secondary, #f8fafc);
    overflow-y: auto;
}

.d3view-wf-certification-builder .cert-landing-header {
    text-align: center;
    margin-bottom: 36px;
}

.d3view-wf-certification-builder .cert-landing-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--d3v-r-xl, 16px);
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}

.d3view-wf-certification-builder .cert-landing-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0 0 8px;
}

.d3view-wf-certification-builder .cert-landing-subtitle {
    font-size: 14px;
    color: var(--d3v-text-muted, #94A3B8);
    margin: 0;
}

.d3view-wf-certification-builder .cert-landing-cards {
    display: flex;
    gap: 24px;
    max-width: 720px;
    width: 100%;
}

.d3view-wf-certification-builder .cert-landing-card {
    flex: 1;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-lg, 12px);
    padding: 28px 24px;
    cursor: pointer;
    transition: all var(--d3v-t-base, 0.2s);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
}

.d3view-wf-certification-builder .cert-landing-card:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
    transform: translateY(-3px);
}

.d3view-wf-certification-builder .cert-landing-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--d3v-r-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-landing-card-icon.editor-icon {
    background: #dbeafe;
    color: #2563eb;
}

.d3view-wf-certification-builder .cert-landing-card-icon.blocks-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.d3view-wf-certification-builder .cert-landing-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0 0 8px;
}

.d3view-wf-certification-builder .cert-landing-card-desc {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.5;
    margin: 0 0 14px;
}

.d3view-wf-certification-builder .cert-landing-card-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    width: 100%;
}

.d3view-wf-certification-builder .cert-landing-card-features span {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-landing-card-features span i {
    color: var(--d3v-success, #10B981);
    font-size: 10px;
}

.d3view-wf-certification-builder .cert-landing-card-btn {
    background: none;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    margin-top: auto;
}

.d3view-wf-certification-builder .cert-landing-card:hover .cert-landing-card-btn {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/** DW-2825 — Import from Reporter card + picker **/
.d3view-wf-certification-builder .cert-landing-card-icon.import-icon {
    background: #fef3c7;
    color: #d97706;
}

.d3view-wf-certification-builder .cert-reporter-picker {
    max-width: 520px;
    margin: 60px auto;
    padding: 32px;
}

.d3view-wf-certification-builder .cert-reporter-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.d3view-wf-certification-builder .cert-reporter-picker-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0;
}

.d3view-wf-certification-builder .cert-reporter-picker-desc {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-reporter-picker-select-wrap {
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-reporter-picker-empty {
    padding: 20px;
    text-align: center;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-radius: var(--d3v-r-md, 8px);
    border: 1px dashed var(--d3v-border, #e2e8f0);
}

/* ═══════════════════════════════════════════════════════════════
   Block Width Toolbar — easier than drag resizing (DW-2783)
   ═══════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-block-width-bar {
    display: none;
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-full, 20px);
    padding: 2px;
    gap: 2px;
    z-index: 5;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
    white-space: nowrap;
    flex-direction: row;
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-width-bar,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-width-bar {
    display: inline-flex;
}

.d3view-wf-certification-builder .cert-block-width-btn {
    width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--d3v-r-full, 20px);
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-width-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-block-width-btn.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Signature Block ── */

.d3view-wf-certification-builder .cert-signature-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 0;
}

.d3view-wf-certification-builder .cert-signature-line {
    border: none;
    border-top: 2px solid var(--d3v-text-primary, #1e293b);
    margin: 0;
}

.d3view-wf-certification-builder .cert-signature-fields {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.d3view-wf-certification-builder .cert-signature-field {
    flex: 1;
}

.d3view-wf-certification-builder .cert-signature-field [contenteditable] {
    font-size: 13px;
    color: var(--d3v-text-secondary, #64748b);
    padding: 4px 0;
    outline: none;
    min-height: 20px;
}

.d3view-wf-certification-builder .cert-signature-field [contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
}

.d3view-wf-certification-builder .cert-signature-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 2px;
}

/* ── Spacer Block ── */

.d3view-wf-certification-builder .cert-spacer-block {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
    cursor: ns-resize;
    position: relative;
}

.d3view-wf-certification-builder .cert-spacer-block:hover {
    background: var(--d3v-bg-hover, rgba(59,130,246,0.04));
}

.d3view-wf-certification-builder .cert-spacer-label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    pointer-events: none;
    user-select: none;
}

/* ── List Block ── */

.d3view-wf-certification-builder .cert-block-list {
    padding: 4px 0 4px 20px;
    margin: 0;
    list-style-position: outside;
}

.d3view-wf-certification-builder .cert-block-list li {
    padding: 4px 2px;
    outline: none;
    min-height: 22px;
    line-height: 1.6;
}

.d3view-wf-certification-builder .cert-block-list li:empty:before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
}

.d3view-wf-certification-builder .cert-block-list li:focus {
    background: var(--d3v-bg-hover, rgba(59,130,246,0.04));
    border-radius: var(--d3v-r-sm, 4px);
}

/* ── Properties Panel ── */

.d3view-wf-certification-builder .cert-props-panel {
    background: var(--d3v-bg-primary, #fff);
}

.d3view-wf-certification-builder .cert-props-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-wf-certification-builder .cert-props-header-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.d3view-wf-certification-builder .cert-props-cancel-btn,
.d3view-wf-certification-builder .cert-props-save-btn,
.d3view-wf-certification-builder .cert-props-reset-btn,
.d3view-wf-certification-builder .cert-table-props-cancel-btn,
.d3view-wf-certification-builder .cert-table-props-save-btn {
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-props-cancel-btn:hover,
.d3view-wf-certification-builder .cert-props-reset-btn:hover,
.d3view-wf-certification-builder .cert-table-props-cancel-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-wf-certification-builder .cert-props-save-btn,
.d3view-wf-certification-builder .cert-table-props-save-btn {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-props-save-btn:hover,
.d3view-wf-certification-builder .cert-table-props-save-btn:hover {
    opacity: 0.9;
}

.d3view-wf-certification-builder .cert-props-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-props-body {
    padding: 12px;
}

.d3view-wf-certification-builder .cert-props-section {
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-props-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-props-row {
    margin-bottom: 10px;
}

.d3view-wf-certification-builder .cert-props-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-props-row-inline {
    display: flex;
    gap: 10px;
}

.d3view-wf-certification-builder .cert-props-field {
    flex: 1;
    min-width: 0;
}

.d3view-wf-certification-builder .cert-prop-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, 0.12s);
    box-sizing: border-box;
}

.d3view-wf-certification-builder .cert-prop-input:focus {
    outline: none;
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.d3view-wf-certification-builder .cert-prop-color {
    padding: 2px;
    height: 32px;
    cursor: pointer;
}

.d3view-wf-certification-builder .cert-props-align-btns {
    display: flex;
    gap: 2px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: var(--d3v-r-md, 6px);
    padding: 2px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-prop-align-btn {
    flex: 1;
    height: 28px;
    border: none;
    border-radius: var(--d3v-r-sm, 4px);
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    font-size: 12px;
}

.d3view-wf-certification-builder .cert-prop-align-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-prop-align-btn.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Palette icon colors for new block types ── */

.d3view-wf-certification-builder .cert-palette-icon.list-icon {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

.d3view-wf-certification-builder .cert-palette-icon.spacer-icon {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}

.d3view-wf-certification-builder .cert-palette-icon.signature-icon {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* (resizable handles are defined above in the GridStack-like section) */

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Header/Footer blocks
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-header-block,
.d3view-wf-certification-builder .cert-footer-block {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px dashed var(--d3v-border-strong, #cbd5e1);
    border-radius: 0;
    margin: 0;
}

.d3view-wf-certification-builder .cert-header-block {
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 0;
}

.d3view-wf-certification-builder .cert-footer-block {
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 0 0 var(--d3v-r-md, 8px) var(--d3v-r-md, 8px);
}

.d3view-wf-certification-builder .cert-header-block .cert-block-body,
.d3view-wf-certification-builder .cert-footer-block .cert-block-body {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    padding: 8px 16px;
    min-height: 28px;
}

/* R0-3360 — inherit font/color so user property changes (font-size, color, font-style) on the footer block cascade to {page} of {pages} text */
.d3view-wf-certification-builder .cert-footer-pagenum {
    font-size: inherit;
    color: inherit;
    font-style: inherit;
}

.d3view-wf-certification-builder .cert-palette-icon.header-icon {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.d3view-wf-certification-builder .cert-palette-icon.footer-icon {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Variable Formatter badge
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-var-format-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0,0,0,0.08);
    color: inherit;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Variable Targets indicator
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-var-target-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Page Setup (sidebar panel)
   ══════════════════════════════════════════════════════════════════════ */

/* Paper preview mockup */
.d3view-wf-certification-builder .cert-ps-paper-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup {
    background: #fff;
    border: 1px solid var(--d3v-border-strong, #CBD5E1);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    border-radius: 2px;
    position: relative;
    transition: all var(--d3v-t-base, 0.20s);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-lines {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line {
    height: 2px;
    border-radius: 1px;
    background: var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line.short { width: 65%; }
.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line.medium { width: 85%; }

.d3view-wf-certification-builder .cert-ps-paper-size-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94A3B8);
    text-align: center;
    margin-top: 8px;
}

/* Orientation buttons in sidebar */
.d3view-wf-certification-builder .cert-ps-orientation-btns {
    display: flex;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    color: var(--d3v-text-secondary, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button.active {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* Margin grid */
.d3view-wf-certification-builder .cert-ps-margin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.d3view-wf-certification-builder .cert-ps-margin-field label {
    font-size: 10px;
    font-weight: 500;
    color: var(--d3v-text-muted, #94A3B8);
    display: block;
    margin-bottom: 2px;
}

.d3view-wf-certification-builder .cert-ps-margin-field input {
    width: 100%;
    height: 28px;
}

/* Margin guides on block page */
.d3view-wf-certification-builder .cert-block-page.cert-show-margin-guides {
    outline: 1px dashed rgba(59,130,246,0.25);
    outline-offset: -1px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Sidebar panels for Formatter / Targets (rendered in sidebar)
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-sidebar-panel {
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-wf-certification-builder .cert-sidebar-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-sidebar-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions {
    display: flex;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions button {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    color: var(--d3v-text-secondary, #475569);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions button:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions .cert-sp-save-btn {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions .cert-sp-save-btn:hover {
    background: var(--d3v-accent-hover, #2563EB);
}

.d3view-wf-certification-builder .cert-sidebar-panel-body {
    flex: 1;
    overflow-y: auto;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body .cert-sp-row {
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body .cert-sp-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body select,
.d3view-wf-certification-builder .cert-sidebar-panel-body input[type="number"],
.d3view-wf-certification-builder .cert-sidebar-panel-body input[type="text"] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-panel-body select:focus,
.d3view-wf-certification-builder .cert-sidebar-panel-body input:focus {
    border-color: var(--d3v-accent, #3B82F6);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}

.d3view-wf-certification-builder .cert-sp-preview {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    text-align: center;
}

/* Target rows */
.d3view-wf-certification-builder .cert-sp-target-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
}

.d3view-wf-certification-builder .cert-sp-target-row select { width: 70px; }
.d3view-wf-certification-builder .cert-sp-target-row input[type="number"] { width: 65px; }
.d3view-wf-certification-builder .cert-sp-target-row input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid var(--d3v-border, #e2e8f0); border-radius: var(--d3v-r-sm, 4px); cursor: pointer; }

.d3view-wf-certification-builder .cert-sp-target-remove {
    border: none;
    background: none;
    color: var(--d3v-danger, #EF4444);
    cursor: pointer;
    font-size: 13px;
    padding: 2px;
    opacity: 0.5;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sp-target-remove:hover { opacity: 1; }

/* Datum line rows */
.d3view-wf-certification-builder .cert-sp-datum-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
}

.d3view-wf-certification-builder .cert-sp-datum-row input[type="number"] { width: 60px; }
.d3view-wf-certification-builder .cert-sp-datum-row input[type="text"] { width: 70px; }
.d3view-wf-certification-builder .cert-sp-datum-row input[type="color"] { width: 32px; height: 28px; padding: 2px; cursor: pointer; }
.d3view-wf-certification-builder .cert-sp-datum-row select { width: 70px; }

.d3view-wf-certification-builder .cert-viz-block {
    padding: 0;
    min-height: 120px;
}

.d3view-wf-certification-builder .cert-viz-block .d3view-textviz {
    padding: 0!important;
}

.d3view-wf-certification-builder .cert-viz-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    cursor: pointer;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f8fafc);
    transition: var(--d3v-t-fast, 0.12s);
    min-height: 120px;
}

.d3view-wf-certification-builder .cert-viz-placeholder:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-viz-placeholder i {
    font-size: 28px;
    color: var(--d3v-text-muted, #94a3b8);
}

.d3view-wf-certification-builder .cert-viz-placeholder span {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-viz-render {
    position: relative;
    border-radius: var(--d3v-r-md, 8px);
    overflow: auto;
    resize: vertical;
    padding: 12px;
    padding-bottom: 20px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

/* Visible vertical resize handle bar at the bottom of viz blocks */
.d3view-wf-certification-builder .cert-viz-render::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: var(--d3v-text-muted, #94a3b8);
    border-radius: 3px;
    opacity: 0.4;
    cursor: ns-resize;
    pointer-events: none;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-viz-render:hover::after {
    opacity: 0.7;
}

.d3view-wf-certification-builder .cert-palette-icon.viz-icon {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff;
}

.d3view-wf-certification-builder .cert-palette-icon.pagebreak-icon {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   DW-2809 #6 — Viz Wizard Modal
   ═══════════════════════════════════════════════════════════ */

.cert-viz-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
}

.cert-viz-wizard-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

.cert-viz-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cert-viz-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-muted, #94a3b8);
    border: 2px solid var(--d3v-border, #e2e8f0);
    transition: var(--d3v-t-fast, 0.12s);
}

.cert-viz-step.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.cert-viz-step.done {
    background: var(--d3v-success, #10B981);
    color: #fff;
    border-color: var(--d3v-success, #10B981);
}

.cert-viz-step-line {
    flex: 1;
    height: 2px;
    background: var(--d3v-border, #e2e8f0);
    max-width: 40px;
}

.cert-viz-step-line.done {
    background: var(--d3v-success, #10B981);
}

.cert-viz-step-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-viz-wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.cert-viz-wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

/* Step 3 — Row Filters (baseline/optimized/reference) */

.cert-viz-row-filters-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.cert-viz-row-filter-group {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff);
    overflow: hidden;
    transition: var(--d3v-t-fast, 0.12s);
    /* max-height: 350px; */
    /* overflow: auto; */
    display: flex;
    flex-direction: column;
}

.cert-viz-row-filter-group:hover {
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.cert-viz-row-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.cert-viz-row-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    cursor: pointer;
    margin: 0;
}

.cert-viz-row-filter-toggle input[type="checkbox"] {
    margin: 0;
}

.cert-viz-row-filter-header input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 2px;
    cursor: pointer;
    background: transparent;
}

.cert-viz-dt-row-filters {
    padding: 12px 14px;
    /* max-height: 350px; */
    /* overflow: auto; */
    flex: 1 1 auto;
    overflow: auto;
}
.cert-viz-dt-row-filters .data-filters-body {
    padding: 0!important;
}
.cert-viz-dt-row-filters .filters-list {
    border: none!important;
    box-shadow: none!important;
}

/* Step 1 — Dataset choice */

.cert-viz-dataset-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cert-viz-dataset-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 12px 16px;
    transition: var(--d3v-t-fast, 0.12s);
    background: var(--d3v-bg-primary, #fff);
}

.cert-viz-dataset-option:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.cert-viz-dataset-option.active {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}
div.simlytiks .cert-viz-dataset-option > label {
    display: none!important;
}
.cert-viz-dataset-option input[type="radio"] {
    display: none;
}

.cert-viz-dataset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-wrap: wrap;
}

.cert-viz-dataset-card .wf-worker-type-sm {
    flex-shrink: 0;
}

.cert-viz-ds-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-viz-ds-io {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}

.cert-viz-ds-io i {
    font-size: 9px;
    margin-right: 2px;
    color: var(--d3v-accent, #3B82F6);
}

.cert-viz-ds-output i {
    color: var(--d3v-success, #10B981);
}

.cert-viz-dataset-card .wf-id-label {
    flex-shrink: 0;
    margin-left: auto;
}

/* Step 2 — Chart type grid */

.cert-viz-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.cert-viz-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s);
    background: var(--d3v-bg-primary, #fff);
    text-align: center;
}

.cert-viz-type-item:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
    transform: translateY(-1px);
}

.cert-viz-type-item img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--d3v-r-sm, 4px);
}

.cert-viz-type-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.3;
    word-break: break-word;
}

/* Step 3 — Viz preview container */

.cert-viz-preview-container .sl-viz-preview {
    width: 100%;
    height: 100%;
    min-height: 380px;
    position: relative!important
}

/* Step 4 — two-pane layout: VizParams (left) + Worker I/O drag source (right) */
.cert-viz-wizard-body.cert-viz-step4-body {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow: hidden;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff);
    overflow: auto;
    min-height: 420px;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane .sl-viz-preview,
.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane .viz-params {
    width: 100%;
    height: 100%;
    min-height: 420px;
    position: relative;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-io-pane {
    flex: 0 0 280px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f8fafc);
    overflow: auto;
    min-height: 420px;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-io-pane .wf-worker-io {
    height: 100%;
}

/* DW-2809 #14 — Force show Newton legends in cert builder containers even in tiny mode */
.cert-sparkline-container .d3view-newton .main_container.tiny .legends-wrapper {
    opacity: 1 !important;
}
.cert-sparkline-container .d3view-newton .chart_container.tiny div.d3view-legends-container {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════
   Page Break Block (Blocks Mode)
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-pagebreak-block {
    grid-column: span 6 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    cursor: default;
}

.d3view-wf-certification-builder .cert-pagebreak-block:hover {
    border: none;
    box-shadow: none;
}

.d3view-wf-certification-builder .cert-pagebreak-body {
    padding: 0;
}

.d3view-wf-certification-builder .cert-pagebreak-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    position: relative;
}

.d3view-wf-certification-builder .cert-pagebreak-indicator::before,
.d3view-wf-certification-builder .cert-pagebreak-indicator::after {
    content: '';
    flex: 1;
    height: 0;
    border-top: 2px dashed var(--d3v-border-strong, #94a3b8);
}

.d3view-wf-certification-builder .cert-pagebreak-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    white-space: nowrap;
}

.d3view-wf-certification-builder .cert-pagebreak-block .cert-block-badge {
    display: none;
}

.d3view-wf-certification-builder .cert-pagebreak-block .cert-block-actions {
    top: -8px;
    right: 4px;
}

/* ═══════════════════════════════════════════════════════
   Multi-Page Preview
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-preview-page {
    background: #fff;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.08));
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 2px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-preview-page-gap {
    height: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.d3view-wf-certification-builder .cert-preview-page-gap::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--d3v-border, #e2e8f0) 0, var(--d3v-border, #e2e8f0) 6px, transparent 6px, transparent 12px);
}

.d3view-wf-certification-builder .cert-preview-content {
    flex: 1;
}

/** Added by shashank2104 on 2026-04-14 - DW-2844 #3 - Rescue typography that TinyMCE iframe gets from UA defaults + content_style
    but the preview/PDF loses once content lives outside the editor. Covers preview pages (.cert-preview-content inside either
    the builder preview or the offscreen cert-pdf-render-container used for domtoimage capture). **/
/** Updated by shashank2104 on 2026-05-06 - Scope list typography to rich-text block types only (heading/text/header/footer/list).
    The previous broad `.cert-preview-content ul, ol` selectors leaked into embedded charts/legends/widgets that render <ul>/<ol>
    markup inside viz/occupant/injury blocks. **/
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ol {
    padding-left: 40px;
    margin: 0.5em 0;
}
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul { list-style: disc outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ol { list-style: decimal outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul ul { list-style: circle outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul ul ul { list-style: square outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] li { display: list-item; margin: 2px 0; }

/** Updated by shashank2104 on 2026-04-22 - DW-2866 - h3 gets :not(.legends-label) so the bubble/scatter legend header stops inheriting 1.17em and honors legendsFontSize; viz containers themselves are reset below via a higher-specificity rule. **/
.d3view-wf-certification-builder .cert-preview-content h1,
.cert-pdf-render-container .cert-preview-content h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h2,
.cert-pdf-render-container .cert-preview-content h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h3:not(.legends-label),
.cert-pdf-render-container .cert-preview-content h3:not(.legends-label) { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h4,
.cert-pdf-render-container .cert-preview-content h4 { font-size: 1em; font-weight: bold; margin: 1.12em 0; color: #1a365d; }
.d3view-wf-certification-builder .cert-preview-content h5,
.cert-pdf-render-container .cert-preview-content h5 { font-size: 0.83em; font-weight: bold; margin: 1.5em 0; color: #1a365d; }
.d3view-wf-certification-builder .cert-preview-content h6,
.cert-pdf-render-container .cert-preview-content h6 { font-size: 0.75em; font-weight: bold; margin: 1.67em 0; color: #1a365d; }

/** Added by shashank2104 on 2026-04-22 - DW-2866 - Reset heading metrics inside viz embeds so legend labels (h3.legends-label) aren't inflated by cert typography. **/
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h1,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h2,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h3,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h4,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h5,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h6,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h1,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h2,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h3,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h4,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h5,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h6,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h1,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h2,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h3,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h4,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h5,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h6,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h1,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h2,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h3,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h4,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h5,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
    line-height: inherit;
}

.d3view-wf-certification-builder .cert-preview-content p,
.cert-pdf-render-container .cert-preview-content p { margin: 0.5em 0; }

.d3view-wf-certification-builder .cert-preview-content strong,
.d3view-wf-certification-builder .cert-preview-content b,
.cert-pdf-render-container .cert-preview-content strong,
.cert-pdf-render-container .cert-preview-content b { font-weight: bold; }
.d3view-wf-certification-builder .cert-preview-content em,
.d3view-wf-certification-builder .cert-preview-content i,
.cert-pdf-render-container .cert-preview-content em,
.cert-pdf-render-container .cert-preview-content i { font-style: italic; }
.d3view-wf-certification-builder .cert-preview-content u,
.cert-pdf-render-container .cert-preview-content u { text-decoration: underline; }
.d3view-wf-certification-builder .cert-preview-content s,
.d3view-wf-certification-builder .cert-preview-content strike,
.cert-pdf-render-container .cert-preview-content s,
.cert-pdf-render-container .cert-preview-content strike { text-decoration: line-through; }

.d3view-wf-certification-builder .cert-preview-content table,
.cert-pdf-render-container .cert-preview-content table { border-collapse: collapse; }
.d3view-wf-certification-builder .cert-preview-content table th,
.cert-pdf-render-container .cert-preview-content table th { background: #f0f4f8; font-weight: 600; }
.d3view-wf-certification-builder .cert-preview-content table th,
.d3view-wf-certification-builder .cert-preview-content table td,
.cert-pdf-render-container .cert-preview-content table th,
.cert-pdf-render-container .cert-preview-content table td { border: 1px solid #e2e8f0; padding: 6px 8px; }

.d3view-wf-certification-builder .cert-preview-content hr,
.cert-pdf-render-container .cert-preview-content hr { border: none; border-top: 2px solid #e2e8f0; margin: 16px 0; }

/* Page break marker in preview (hidden — only used for pagination measurement) */
.d3view-wf-certification-builder .cert-page-break-marker {
    display: block;
    width: 100%;
    height: 0;
    border: none;
    margin: 0;
    padding: 0;
    page-break-after: always;
}

/* ═══════════════════════════════════════════════════════
   Page Setup — Header/Footer repeat checkboxes
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-ps-repeat-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.d3view-wf-certification-builder .cert-ps-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--d3v-text-primary, #1a202c);
    cursor: pointer;
}

.d3view-wf-certification-builder .cert-ps-checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   DW-2834 #1 — Occupant Dummy Block
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-occupant-body {
    text-align: center;
    padding: 16px;
}

.d3view-wf-certification-builder .cert-occupant-svg-wrap {
    display: block;
    width: 220px;
    margin: 0 auto;
}

.d3view-wf-certification-builder .cert-occupant-svg {
    width: 100%;
    height: auto;
    max-height: 360px;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region] {
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region] {
    pointer-events: all;
    transition: fill 0.12s ease, fill-opacity 0.12s ease, stroke 0.12s ease, stroke-width 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region]:hover {
    stroke: #3b82f6;
    stroke-width: 5;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, .85));
    cursor: pointer;
}

/* Keep the count badges out of the hover hit-test so they never block the
   underlying path's hover/right-click. */
.d3view-wf-certification-builder .cert-occupant-svg .cert-occ-builder-badge {
    pointer-events: none;
}

/* Live label that updates as the user hovers different body parts */
.d3view-wf-certification-builder .cert-occupant-hover-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-accent-primary, #3b82f6);
    min-height: 16px;
    margin-top: 4px;
    transition: opacity 0.12s ease;
}
.d3view-wf-certification-builder .cert-occupant-hover-label:empty::before {
    content: 'Hover a body part to highlight';
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-occupant-empty-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    margin-top: 10px;
}

.d3view-wf-certification-builder .cert-occupant-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.d3view-wf-certification-builder .cert-occupant-region-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-pill, 999px);
    color: var(--d3v-text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-region-chip:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(15, 23, 42, .08));
}

.d3view-wf-certification-builder .cert-occupant-region-chip-arrow {
    margin: 0 4px;
    color: var(--d3v-text-muted, #94a3b8);
}

.d3view-wf-certification-builder .cert-occupant-region-chip-var {
    color: var(--d3v-text-secondary, #64748b);
}

.d3view-wf-certification-builder .cert-occupant-region-chip-targets {
    margin-left: 8px;
    padding: 1px 7px;
    background: var(--d3v-accent-primary-soft, #dbeafe);
    color: var(--d3v-accent-primary, #1d4ed8);
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 10px;
    font-weight: 600;
}

.d3view-wf-certification-builder .cert-occupant-legend {
    margin-top: 10px;
}

/* ── Sidebar mapping panel ── */
.d3view-wf-certification-builder .cert-occ-cancel-btn,
.d3view-wf-certification-builder .cert-occ-save-btn {
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-occ-cancel-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-wf-certification-builder .cert-occ-save-btn {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-occ-save-btn:hover {
    opacity: 0.9;
}

.d3view-wf-certification-builder .cert-occ-topbar {
    padding: 0 8px 12px;
    border-bottom: 1px dashed var(--d3v-border, #e2e8f0);
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-occ-show-all-btn {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-show-all-btn:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occ-edit-targets {
    width: 100%;
    padding: 6px 10px;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-edit-targets:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occ-target-add {
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    background: transparent;
    color: var(--d3v-text-muted, #94a3b8);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-target-add:hover {
    border-style: solid;
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occupant-props-panel .cert-occ-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
}

.d3view-wf-certification-builder .cert-occ-row {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 8px 10px;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-row.focused {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px var(--d3v-accent-primary-soft, #dbeafe);
}

.d3view-wf-certification-builder .cert-occ-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.d3view-wf-certification-builder .cert-occ-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}

.d3view-wf-certification-builder .cert-occ-row-targets-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    background: var(--d3v-accent-primary-soft, #dbeafe);
    color: var(--d3v-accent-primary, #1d4ed8);
    border-radius: var(--d3v-r-pill, 999px);
}

.d3view-wf-certification-builder .cert-occ-row-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-occ-row-body .select2-container {
    width: 100% !important;
}

.d3view-wf-certification-builder .cert-occ-row-targets-editor {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-occ-target-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-occ-target-row input,
.d3view-wf-certification-builder .cert-occ-target-row select {
    height: 28px;
    padding: 2px 6px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
}

.d3view-wf-certification-builder .cert-occ-t-name { flex: 1.5; min-width: 0; }
.d3view-wf-certification-builder .cert-occ-t-op   { width: 56px; }
.d3view-wf-certification-builder .cert-occ-t-val,
.d3view-wf-certification-builder .cert-occ-t-val2 { width: 56px; }
.d3view-wf-certification-builder .cert-occ-t-color { width: 32px; padding: 0; }

.d3view-wf-certification-builder .cert-occ-t-remove {
    width: 24px;
    height: 28px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-t-remove:hover {
    background: var(--d3v-status-danger-soft, #fee2e2);
    color: var(--d3v-status-danger, #dc2626);
    border-color: var(--d3v-status-danger, #dc2626);
}

.d3view-wf-certification-builder .cert-occ-hint {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 14px 8px 0;
    padding: 8px 10px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: var(--d3v-r-sm, 4px);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   Print Support
   ═══════════════════════════════════════════════════════ */

@media print {
    .d3view-wf-certification-builder .cert-page-break-marker {
        page-break-after: always;
    }
    .d3view-wf-certification-builder .cert-preview-page {
        page-break-after: always;
        box-shadow: none;
        border: none;
    }
    .d3view-wf-certification-builder .cert-preview-page-gap {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════
   SIM-999 — Layouts sidebar tab
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-layouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.d3view-wf-certification-builder .cert-layout-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,.04));
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-wf-certification-builder .cert-layout-card:hover {
    border-color: var(--d3v-accent, #2563EB);
    box-shadow: var(--d3v-sh-md, 0 2px 6px rgba(0,0,0,.08));
    transform: translateY(-1px);
}
.d3view-wf-certification-builder .cert-layout-card.active {
    border-color: var(--d3v-accent, #2563EB);
    background: var(--d3v-accent-soft, #EFF6FF);
}
.d3view-wf-certification-builder .cert-layout-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-muted, #F3F4F6);
    color: var(--d3v-accent, #2563EB);
    font-size: 14px;
    flex-shrink: 0;
}
.d3view-wf-certification-builder .cert-layout-card-meta {
    min-width: 0;
    flex: 1;
}
.d3view-wf-certification-builder .cert-layout-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.3;
}
.d3view-wf-certification-builder .cert-layout-card-desc {
    font-size: 11px;
    color: var(--d3v-text-muted, #6B7280);
    margin-top: 2px;
}
.d3view-wf-certification-builder .cert-layouts-divider {
    height: 1px;
    background: var(--d3v-border-subtle, #E5E7EB);
    margin: 8px 0;
}
.d3view-wf-certification-builder .cert-layouts-empty {
    padding: 16px;
    text-align: center;
    color: var(--d3v-text-muted, #6B7280);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   DW-2854 — Injury Probability block
   ═══════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-injury-body {
    padding: 16px;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-md, 6px);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-body:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-injury-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-occupant-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    background: var(--d3v-bg-secondary, #f8fafc);
    padding: 2px 10px;
    border-radius: var(--d3v-r-sm, 4px);
}

/* R0-3468 — scope to div only; the preview shell uses a <table class="cert-injury-grid">
   (so rows stack as real table rows in PDF/output_html). Without this scope the grid
   display leaks onto the <table> and squishes the single-column stacked layout. */
.d3view-wf-certification-builder div.cert-injury-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
.d3view-wf-certification-builder div.cert-injury-grid.cert-injury-grid--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.d3view-wf-certification-builder .cert-injury-svg-wrap {
    text-align: center;
}
.d3view-wf-certification-builder .cert-injury-body .cert-occupant-svg {
    display: inline-block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.d3view-wf-certification-builder .cert-injury-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-table th,
.d3view-wf-certification-builder .cert-injury-table td {
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    padding: 5px 8px;
}
.d3view-wf-certification-builder .cert-injury-table th {
    background: var(--d3v-bg-secondary, #f8fafc);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--d3v-text-secondary, #4a5568);
    text-align: left;
}
.d3view-wf-certification-builder .cert-injury-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-secondary, #4a5568);
}
.d3view-wf-certification-builder .cert-injury-prob {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.d3view-wf-certification-builder .cert-injury-prob--empty {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
}
.d3view-wf-certification-builder .cert-injury-subtotal td {
    font-weight: 700;
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-wf-certification-builder .cert-injury-rr {
    margin-top: 18px;
    padding-bottom: 22px;
}
.d3view-wf-certification-builder .cert-injury-rr-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-rr-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-wf-certification-builder .cert-injury-rr-label {
    font-weight: 700;
    font-size: 14px;
    width: 28px;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-rr-bar {
    flex: 1;
    position: relative;
    height: 32px;
}
.d3view-wf-certification-builder .cert-injury-rr-bar-fill {
    position: absolute;
    inset: 0;
    display: grid;
    border-radius: var(--d3v-r-sm, 4px);
    overflow: hidden;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
}
.d3view-wf-certification-builder .cert-injury-rr-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
}
.d3view-wf-certification-builder .cert-injury-rr-marker {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--d3v-text-primary, #1a202c);
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    transition: left var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-rr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    display: grid;
    font-size: 10px;
    color: var(--d3v-text-secondary, #4a5568);
    font-variant-numeric: tabular-nums;
}

.d3view-wf-certification-builder .cert-injury-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.d3view-wf-certification-builder .cert-injury-metric-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: var(--d3v-accent-soft, #ebf4ff);
    color: var(--d3v-accent, #2b6cb0);
    border: 1px solid rgba(49, 130, 206, 0.3);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-metric-chip:hover {
    background: var(--d3v-accent, #3182ce);
    color: #fff;
}
.d3view-wf-certification-builder .cert-injury-metric-chip-arrow {
    margin: 0 5px;
    color: var(--d3v-text-muted, #94a3b8);
}
.d3view-wf-certification-builder .cert-injury-metric-chip-var {
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-injury-empty-hint {
    text-align: center;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-strong, #cbd5e0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    font-style: italic;
}

/* Preview variant — rendered inline in blocks/TinyMCE preview.
   Mirrors .cert-injury-body sans padding (caller controls margin). */
.d3view-wf-certification-builder .cert-injury-preview {
    padding: 16px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
}
/* R0-3468 — the preview shell emits a <table class="cert-injury-grid"> so rows map to real
   table rows in PDF/output_html. Only divs with this class should render as CSS grid. */
.d3view-wf-certification-builder .cert-injury-preview div.cert-injury-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
.d3view-wf-certification-builder .cert-injury-preview div.cert-injury-grid.cert-injury-grid--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-occupant-svg {
    width: 180px;
    height: auto;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table th,
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table td {
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    padding: 5px 8px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table th {
    background: var(--d3v-bg-secondary, #f8fafc);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--d3v-text-secondary, #4a5568);
    text-align: left;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-subtotal td {
    font-weight: 700;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-secondary, #4a5568);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-prob {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-prob--empty {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr {
    margin-top: 18px;
    padding-bottom: 22px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-bar {
    position: relative;
    height: 32px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-bar-fill {
    position: absolute;
    inset: 0;
    display: grid;
    border-radius: var(--d3v-r-sm, 4px);
    overflow: hidden;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-marker {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--d3v-text-primary, #1a202c);
    transform: translateX(-50%);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    display: grid;
    font-size: 10px;
    color: var(--d3v-text-secondary, #4a5568);
    font-variant-numeric: tabular-nums;
}

/* Palette icon color for injury block */
.d3view-wf-certification-builder .cert-palette-item .injury-icon {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

/* Properties sidebar — Injury Metrics panel */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #4a5568);
    margin: 0;
    flex: 1;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row select {
    width: 140px;
    height: 28px;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 0 8px;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section {
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    padding: 14px 16px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section:last-child {
    border-bottom: none;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 10px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row:last-child {
    margin-bottom: 0;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row.focused {
    background: var(--d3v-accent-soft, #ebf4ff);
    outline: 1px solid var(--d3v-accent, #3182ce);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-head {
    margin-bottom: 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-unit {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
    margin-left: 4px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 0;
    white-space: nowrap;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override-input {
    flex: 1;
    height: 26px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 0 8px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override-input:focus {
    outline: none;
    border-color: var(--d3v-accent, #3182ce);
    box-shadow: 0 0 0 2px var(--d3v-accent-soft, #ebf4ff);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-hint {
    margin: 14px 16px;
    padding: 10px 12px;
    background: var(--d3v-accent-soft, #ebf4ff);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    color: var(--d3v-text-secondary, #4a5568);
    line-height: 1.5;
}

/* R0-3468 #4 — dataset picker + column picker (independent from the worker-scalar dropdown above) */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-ds-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--d3v-border, #e2e8f0);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-ds-or {
    display: block;
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-column-wrap {
    margin-top: 6px;
}

/* R0-3468 #3 — combined rows (Femur/Neck Combined) render derivation + manual override */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row--combined {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border, #e2e8f0);
    margin-top: 10px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-combined-formula {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 4px 0 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-combined-formula code {
    background: transparent;
    padding: 0;
    color: var(--d3v-text-secondary, #4a5568);
    font-family: var(--d3v-font-mono, SFMono-Regular, Consolas, monospace);
    font-size: 10px;
}

/* ───────────────────────────────────────────────────────────────
   R0-3464 — Block Builder floating format toolbar
   Shown above the currently-focused contenteditable inside a
   block to provide bullet list, numbered list, and indentation
   controls (parity with the TinyMCE editor mode).
   Scoped to the block builder container so it never leaks.
   ─────────────────────────────────────────────────────────────── */
.d3view-wf-certification-builder .cert-block-builder {
    position: relative;
}

.d3view-wf-certification-builder .cert-block-format-toolbar {
    position: absolute;
    z-index: 20;
    display: none;
    gap: 2px;
    padding: 4px;
    background: var(--d3v-bg-primary, #ffffff) !important;
    border: 1px solid var(--d3v-border, #e2e8f0) !important;
    border-radius: var(--d3v-r-md, 6px) !important;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.12));
    transition: opacity var(--d3v-t-fast, 0.15s) ease;
    pointer-events: auto;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--d3v-r-sm, 4px) !important;
    padding: 4px 8px !important;
    width: auto !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--d3v-text-secondary, #475569) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background var(--d3v-t-fast, 0.15s) ease,
                color var(--d3v-t-fast, 0.15s) ease,
                border-color var(--d3v-t-fast, 0.15s) ease;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn:hover {
    background: var(--d3v-bg-hover, #f1f5f9) !important;
    color: var(--d3v-text-primary, #0f172a) !important;
    border-color: var(--d3v-border, #e2e8f0) !important;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn:active {
    background: var(--d3v-bg-active, #e2e8f0) !important;
}

/* ───────────────────────────────────────────────────────────────
   R0-3464 — List markers inside contenteditable block bodies
   Required because the Block Builder injects raw `<ul>`/`<ol>`
   via document.execCommand on a contenteditable. Without these
   rules the global Bootstrap/workflow resets swallow the markers.
   Mirrors .cert-preview-content in CertificationRenderer.js so
   the live editor matches preview + PDF.

   Updated 2026-05-06 — scoped to rich-text block types only
   (heading/text/header/footer/list). Previously the broad
   `.cert-block-body ul, ol` selectors leaked into <ul>/<ol>
   markup rendered by embedded charts/legends inside viz,
   occupant, injury and other widget blocks.
   ─────────────────────────────────────────────────────────────── */
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ol {
    padding-left: 40px;
    margin: 0.5em 0;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul {
    list-style: disc outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ol {
    list-style: decimal outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul ul {
    list-style: circle outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul ul ul {
    list-style: square outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body li {
    display: list-item;
    margin: 2px 0;
}

/* DW-2806 - Updated by shashank2104 on 2026-03-30 - Table layout for entity cleanup */
/* Scoped under .workflow-navigation-container.cleanup-entities */

.workflow-navigation-container.cleanup-entities {
    --wf-ce-bg: var(--d3v-bg-primary);
    --wf-ce-bg2: var(--d3v-bg-secondary);
    --wf-ce-bg3: var(--d3v-bg-tertiary);
    --wf-ce-hover: var(--d3v-bg-hover);
    --wf-ce-border: var(--d3v-border);
    --wf-ce-text: var(--d3v-text-primary);
    --wf-ce-text2: var(--d3v-text-secondary);
    --wf-ce-muted: var(--d3v-text-muted);
    --wf-ce-accent: var(--d3v-accent);
    --wf-ce-r: var(--d3v-r-md);
    --wf-ce-sh: var(--d3v-sh-sm);
    --wf-ce-t: var(--d3v-t-fast);
}

/* Hide header in cleanup mode — table header has select-all */
.workflow-navigation-container.cleanup-entities .workers-list-header {
    display: none !important;
}

/* ── TABLE (uses Bootstrap table table-hover — minimal overrides) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-table {
    font-size: 12px;
    margin-bottom: 0;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table > thead > tr > th {
    background: var(--wf-ce-bg2);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--wf-ce-text2);
    border-bottom-width: 2px;
    vertical-align: middle;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table > tbody > tr > td {
    vertical-align: middle;
    color: var(--wf-ce-text);
}

/* Column widths */
.workflow-navigation-container.cleanup-entities .wf-ce-col-cb {
    width: 36px;
    text-align: center;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-worker {
    width: 35%;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-entity {
    width: 90px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-actions {
    width: 70px;
    text-align: center;
}

/* Worker cell */
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-worker-type {
    word-break: break-all;
    white-space: normal;
    line-height: 1.3;
    display: inline !important;
    overflow-wrap: anywhere;
}
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-ce-wname {
    font-weight: 500;
    font-size: 12px;
    color: var(--wf-ce-text);
    line-height: 1.35;
    word-break: break-word;
}
/* Worker ID label — inline muted */
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-id-label {
    align-self: flex-start;
    font-size: 9px;
    padding: 1px 5px;
    margin-top: 2px;
}

/* Value cell */
.workflow-navigation-container.cleanup-entities .wf-ce-value-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    word-break: break-all;
}

/* Empty value placeholder */
.workflow-navigation-container.cleanup-entities .wf-ce-empty-value {
    font-size: 11px;
    font-style: italic;
    color: var(--wf-ce-muted);
}

/* Actions cell */
.workflow-navigation-container.cleanup-entities .wf-ce-actions-cell {
    white-space: nowrap;
    text-align: center;
}
.workflow-navigation-container.cleanup-entities .wf-ce-actions-cell .btn {
    padding: 4px 8px;
}

/* ID chips */
.workflow-navigation-container.cleanup-entities .wf-ce-id-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: var(--d3v-r-md);
    background: var(--wf-ce-bg3);
    border: 1px solid var(--wf-ce-border);
    font-size: 12px;
    font-family: monospace;
    color: var(--wf-ce-text);
    cursor: pointer;
    transition: all var(--wf-ce-t);
    word-break: break-all;
    max-width: 100%;
}
.workflow-navigation-container.cleanup-entities .wf-ce-id-chip:hover {
    border-color: var(--wf-ce-accent);
    color: var(--wf-ce-accent);
}

/* Nested entity block */
.workflow-navigation-container.cleanup-entities .wf-ce-nested-block {
    width: 100%;
    margin-top: 4px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--wf-ce-accent);
    cursor: pointer;
    padding: 2px 0;
    transition: opacity var(--wf-ce-t);
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle:hover {
    opacity: 0.8;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle strong {
    font-weight: 700;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-arrow {
    font-size: 10px;
    margin-left: 2px;
    transition: transform 0.2s;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table {
    font-size: 11px;
    margin-top: 6px;
    margin-bottom: 0;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table > thead > tr > th {
    font-size: 10px;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--wf-ce-muted);
    font-weight: 600;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table > tbody > tr > td {
    padding: 4px 8px;
}
.workflow-navigation-container.cleanup-entities tbody > tr > td i.app-icon {
    width: 24px;
    height: 24px;
}
/* Duplicate markers */
.workflow-navigation-container.cleanup-entities .wf-ce-dup-chip {
    text-decoration: line-through;
    opacity: 0.4;
}
.workflow-navigation-container.cleanup-entities .wf-ce-dup-note {
    font-size: 10px;
    color: var(--wf-ce-muted);
    font-style: italic;
}

/* ── FILTER ROW (pl-inline-filters) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-filter-row {
    flex-shrink: 0;
}

/* ── STATS ROW (pills only) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-stats-row {
    padding: 2px 12px 6px;
    flex-shrink: 0;
}

/* Entity type pills — small, subtle metadata */
.workflow-navigation-container.cleanup-entities .wf-ce-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full);
    background: transparent;
    font-size: 10px;
    color: var(--wf-ce-muted);
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill i {
    font-size: 10px;
    opacity: 0.5;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill i.app-icon {
    width: 24px;
    height: 24px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill strong {
    color: var(--wf-ce-text2);
    font-weight: 600;
}

/* Deletion order (in footer) */
.workflow-navigation-container.cleanup-entities .wf-ce-order-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--wf-ce-muted);
    white-space: nowrap;
}

/* ── FOOTER (Delete + Cancel) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--wf-ce-border);
    background: var(--wf-ce-bg);
    flex-shrink: 0;
}

/* Delete button */
.workflow-navigation-container.cleanup-entities .wf-ce-delete-selected-btn {
    transition: all var(--wf-ce-t);
}

/* Checkbox styling */
.workflow-navigation-container.cleanup-entities input[type="checkbox"] {
    cursor: pointer;
}

/** Added by shashank2104 on 2026-03-27 - DW-2761 - Worker Comparer **/

/* ── Scoped tokens ──────────────────────────────────────────────────── */
.wf-worker-comparer {
    --wc-bg: var(--d3v-bg-primary, #fff);
    --wc-bg2: var(--d3v-bg-secondary, #f8f9fa);
    --wc-border: var(--d3v-border, #e0e0e0);
    --wc-text: var(--d3v-text-primary, #212121);
    --wc-text2: var(--d3v-text-secondary, #546e7a);
    --wc-muted: var(--d3v-text-muted, #90a4ae);
    --wc-accent: var(--d3v-accent, #4285f4);
    --wc-r: var(--d3v-r-md, 6px);
    --wc-sh: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    --wc-t: var(--d3v-t-fast, 0.15s ease);
    background: var(--wc-bg);
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.wf-worker-comparer .wc-status-bar {
    padding: 8px 14px;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg2);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-status-text {
    font-size: 12px;
    color: var(--wc-text2);
    font-weight: 500;
}

/* ── Worker nav (outer carousel) ────────────────────────────────────── */
.wf-worker-comparer .wc-worker-nav {
    padding: 10px 14px;
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
    background: var(--wc-bg);
}

.wf-worker-comparer .wc-worker-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-text);
    text-align: center;
}

/* ── Content split ──────────────────────────────────────────────────── */
.wf-worker-comparer .wc-content {
    overflow: hidden;
}

.wf-worker-comparer .wc-inputs-pane,
.wf-worker-comparer .wc-outputs-pane {
    overflow: hidden;
}

.wf-worker-comparer .wc-pane-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--wc-text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg2);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-divider {
    width: 1px;
    background: var(--wc-border);
    flex-shrink: 0;
}

/* ── I/O nav (inner carousel) ───────────────────────────────────────── */
.wf-worker-comparer .wc-io-nav {
    padding: 6px 10px;
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
    background: var(--wc-bg);
}

.wf-worker-comparer .wc-input-label,
.wf-worker-comparer .wc-output-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--wc-text);
    text-align: center;
}

/* ── I/O body — take full remaining height ─────────────────────────── */
.wf-worker-comparer .wc-io-body {
    padding: 0;
    min-height: 0;
}

/* ── Compare item — full height ────────────────────────────────────── */
.wf-worker-comparer .wc-compare-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wf-worker-comparer .wc-compare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--wc-bg2);
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-io-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-text);
}

.wf-worker-comparer .wc-io-type-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--wc-bg);
    border: 1px solid var(--wc-border);
    color: var(--wc-text2);
    font-weight: 500;
}

/* ── Viz container — takes full remaining height ───────────────────── */
.wf-worker-comparer .wc-viz-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ── Match status badges ────────────────────────────────────────────── */
.wf-worker-comparer .wc-match-status {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: auto;
}

.wf-worker-comparer .wc-status-compared {
    background: var(--d3v-status-success-bg, rgba(40,167,69,0.1));
    color: var(--d3v-status-success, #28a745);
    border: 1px solid var(--d3v-status-success, #28a745);
}

.wf-worker-comparer .wc-status-missing {
    background: var(--d3v-status-warning-bg, rgba(255,193,7,0.12));
    color: var(--d3v-status-warning, #e0a800);
    border: 1px solid var(--d3v-status-warning, #e0a800);
}

/* ── Empty / not found states ───────────────────────────────────────── */
.wf-worker-comparer .wc-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--wc-muted);
    font-size: 12px;
}

/** Added by shashank2104 on 2026-03-27 - DW-2761 - Worker Inventory rework **/

/* ── Scoped tokens ──────────────────────────────────────────────────── */
.wf-worker-inventory {
    --wi-bg: var(--d3v-bg-primary, #fff);
    --wi-bg2: var(--d3v-bg-secondary, #f8f9fa);
    --wi-border: var(--d3v-border, #e0e0e0);
    --wi-text: var(--d3v-text-primary, #212121);
    --wi-text2: var(--d3v-text-secondary, #546e7a);
    --wi-muted: var(--d3v-text-muted, #90a4ae);
    --wi-accent: var(--d3v-accent, #4285f4);
    --wi-r: var(--d3v-r-md, 6px);
    --wi-r-sm: var(--d3v-r-sm, 4px);
    --wi-sh: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    --wi-sh-md: var(--d3v-sh-md, 0 2px 8px rgba(0,0,0,0.12));
    --wi-t: var(--d3v-t-fast, 0.15s ease);
    background: var(--wi-bg);
}

/* ── Grouped table ──────────────────────────────────────────────────── */
.wf-worker-inventory .wi-grouped-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow: auto;
}

/* ── Table header row ───────────────────────────────────────────────── */
.wf-worker-inventory .wi-table-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wi-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--wi-border);
}

.wf-worker-inventory .wi-table-header .wi-th-type {
    flex: 1;
}

.wf-worker-inventory .wi-table-header .wi-th-count {
    flex: 0 0 80px;
    text-align: right;
}

/* Type row (collapsed) */
.wf-worker-inventory .wi-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--wi-bg);
    border: 1px solid var(--wi-border);
    border-radius: var(--wi-r);
    cursor: pointer;
    transition: box-shadow var(--wi-t), background var(--wi-t);
    user-select: none;
}

.wf-worker-inventory .wi-type-row:hover {
    box-shadow: var(--wi-sh);
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-row.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-row .wi-type-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wf-worker-inventory .wi-type-row .wi-type-chevron {
    font-size: 10px;
    color: var(--wi-muted);
    transition: transform var(--wi-t);
    width: 14px;
    text-align: center;
}

.wf-worker-inventory .wi-type-row.expanded .wi-type-chevron {
    transform: rotate(90deg);
}

.wf-worker-inventory .wi-type-row .wi-type-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--wi-text2);
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
}

/* Expanded cards container */
.wf-worker-inventory .wi-type-cards {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--wi-border);
    border-top: none;
    border-bottom-left-radius: var(--wi-r);
    border-bottom-right-radius: var(--wi-r);
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-cards.visible {
    display: flex;
}

/* ── Worker card ────────────────────────────────────────────────────── */
.wf-worker-inventory .wi-worker-card {
    background: var(--wi-bg);
    border: 1px solid var(--wi-border);
    border-radius: var(--wi-r);
    padding: 10px 14px;
    transition: box-shadow var(--wi-t), border-color var(--wi-t);
    cursor: pointer;
    position: relative;
}

.wf-worker-inventory .wi-worker-card:hover {
    box-shadow: var(--wi-sh);
}

.wf-worker-inventory .wi-worker-card.ui-selected,
.wf-worker-inventory .wi-worker-card.selected {
    border-color: var(--wi-accent);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
    background: rgba(66, 133, 244, 0.03);
}

.wf-worker-inventory .wi-card-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wf-worker-inventory .wi-card-info {
    flex: 1;
    min-width: 0;
}

.wf-worker-inventory .wi-worker-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-worker-inventory .wi-worker-desc {
    font-size: 11px;
    color: var(--wi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.wf-worker-inventory .wi-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.wf-worker-inventory .wi-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--wi-border);
}

.wf-worker-inventory .wi-io-count {
    font-size: 11px;
    color: var(--wi-text2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wf-worker-inventory .wi-io-count .fa {
    font-size: 10px;
    color: var(--wi-muted);
}

/* ── Navigated highlight ────────────────────────────────────────────── */
.wf-worker-inventory .wi-navigated {
    background: rgba(66, 133, 244, 0.06);
    border-color: var(--wi-accent);
}

/* ── Empty state ────────────────────────────────────────────────────── */
.wf-worker-inventory .wi-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--wi-muted);
}

.wf-worker-inventory .wi-empty-state .fa {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    color: var(--wi-border);
}

/* ── Floating actions bar (same pattern as IncludeStructureView) ───── */
.wf-worker-inventory .wi-floating-actions-bar {
    position: absolute;
    top: 10px;
    width: calc(100% - 30px);
    z-index: 100;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 11px 15px;
    margin: 0 0 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: wi-fab-slide-down 0.2s ease-out;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

@keyframes wi-fab-slide-down {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── jQuery UI selectable lasso ───────────────────────────────────── */
.wf-worker-inventory .ui-selecting {
    background: rgba(66, 133, 244, 0.06);
}

/*
 * Special CSS rules not matched to specific templates
 * Category: view
 * Auto-generated by modularize_css.py
 */

.tree-view .tv-content span.ti-name {
text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wf-iterations-viewer .generic-input-template .gi-main-container {
border: none;
}

.d3view-wf-custom-editor .tree-view [data-isleaf="true"] .tv-content {
padding: 0;
}

.d3view-wf-custom-editor .tree-view .tv-content .worker-io-item {
pointer-events: all !important;
    padding: 5px 10px;
}

.tree-view .tv-content span.ti-name {
text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wf-iterations-viewer .generic-input-template .gi-main-container {
border: none;
}

.d3view-wf-custom-editor .tree-view .tv-content .worker-io-item {
pointer-events: all !important;
}



/*
 * CSS for template: wf-view-canvas-group-options.tpl
 * Source: javascripts/templates/modular/view/wf-view-canvas-group-options.tpl
 * Auto-generated by modularize_css.py
 */

div.d3view-context-menu-container.wf-context-menu {
width: 300px;
}

div.select2-drop.wf-previous_workers {
width: 300px !important;
}

div.d3view-context-menu-container.wf-context-menu {
width: 300px;
}

div.select2-drop.wf-previous_workers {
width: 300px !important;
}



/*
 * CSS for template: wf-view-canvas-node-options.tpl
 * Source: javascripts/templates/modular/view/wf-view-canvas-node-options.tpl
 * Auto-generated by modularize_css.py
 */

div.workflow div.canvas-node-options .nav-stacked-thin>li>a {
padding: 4px 6px;
}

div.workflow div.canvas-node-options .nav-stacked-thin>li>a {
padding: 4px 6px;
}

div.workflow div.canvas-node-options .nav-stacked-thin>li>a {
padding: 4px 6px;
}



/*
 * CSS for template: wf-view-settings-tpl-old.tpl
 * Source: javascripts/templates/modular/view/wf-view-settings-tpl-old.tpl
 * Auto-generated by modularize_css.py
 */

.simulations-popover .popover-controls .btn {
padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
}



/*
 * CSS for template: wf-view-settings-tpl.tpl
 * Source: javascripts/templates/modular/view/wf-view-settings-tpl.tpl
 * Auto-generated by modularize_css.py
 */

div.categories-filter .dropdown-menu {
max-height: 300px !important;
    overflow: auto;
}

.wf-workers-container .search-count {
/*margin: 5px;*/
    /*color: #4f5359;*/
    /*text-align: right;*/
    /*padding-right: 20px;*/
    /*position: absolute;*/
    top: 0;
    right: 0;
}

div.categories-filter .dropdown-menu {
max-height: 300px !important;
    overflow: auto;
}

.wf-workers-container .search-count {
/*margin: 5px;*/
    /*color: #4f5359;*/
    /*text-align: right;*/
    /*padding-right: 20px;*/
    /*position: absolute;*/
    top: 0;
    right: 0;
}

div.categories-filter .dropdown-menu {
max-height: 300px !important;
    overflow: auto;
}

.wf-workers-container .search-count {
/*margin: 5px;*/
    /*color: #4f5359;*/
    /*text-align: right;*/
    /*padding-right: 20px;*/
    /*position: absolute;*/
    top: 0;
    right: 0;
}


/**
 * Execution Progress View CSS
 * Added by shashank2104 on 01/15/2026 - DVFIV-1890
 * Purpose: Styles for the ExecutionProgressView used for embedded workflow execution progress display
 */

/* Main view container */
div.workflow .execution-progress-view-container .wf-execution-progress-view {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow .execution-progress-view-container .wf-execution-progress-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

/* Header section */
div.workflow .execution-progress-view-container .wf-execution-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

div.workflow .execution-progress-view-container .wf-execution-progress-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

div.workflow .execution-progress-view-container .wf-execution-progress-title i {
    color: #667eea;
}

/* Body section */
div.workflow .execution-progress-view-container .wf-execution-progress-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Steps indicator */
div.workflow .execution-progress-view-container .wf-execution-progress-steps-container {
    margin-bottom: 25px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 100px;
    padding: 0 10px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-line {
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e5e5e5;
    z-index: 0;
    transition: background 0.3s ease;
}

/* Completed step line - Added by shashank2104 on 01/15/2026 - DVFIV-1890 */
div.workflow .execution-progress-view-container .wf-execution-progress-step-line.completed {
    background: #5cb85c;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5e5;
    color: #999;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon i {
    font-size: 14px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.pending {
    background: #e5e5e5;
    color: #999;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.active {
    background: #667eea;
    color: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.completed {
    background: #5cb85c;
    color: white;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.error {
    background: #d9534f;
    color: white;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-text {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    text-align: center;
    max-width: 100px;
}

/* Progress bar section */
div.workflow .execution-progress-view-container .wf-execution-progress-status {
    margin-bottom: 20px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s ease;
}

div.workflow .execution-progress-view-container .wf-execution-progress-percent {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    min-width: 45px;
    text-align: right;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-label {
    text-align: center;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* Log section */
div.workflow .execution-progress-view-container .wf-execution-progress-log-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    min-height: 150px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log-header i {
    margin-right: 5px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    background: #fafafa;
}

div.workflow .execution-progress-view-container .wf-execution-log-entry {
    margin-bottom: 3px;
    padding: 2px 0;
}

/* Actions section */
div.workflow .execution-progress-view-container .wf-execution-progress-actions {
    padding-top: 15px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    margin-top: 15px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-cancel {
    min-width: 150px;
}

/**
 * View switching styles - similar to agentic view pattern
 * When data-view="execution_progress", hide full-view and show execution-progress-view-container
 */

/* Hide full-view when execution_progress view is active */
div.workflow .workflow-index[data-view="execution_progress"] .full-view {
    display: none !important;
}

/* Show execution-progress-view-container when execution_progress view is active */
div.workflow .workflow-index[data-view="execution_progress"] .execution-progress-view-container {
    display: block !important;
    position: relative;
    height: 100%;
    width: 100%;
}

/* Modal workflow support */
div.workflow-modal .workflow-index[data-view="execution_progress"] .full-view {
    display: none !important;
}

div.workflow-modal .workflow-index[data-view="execution_progress"] .execution-progress-view-container {
    display: block !important;
    position: relative;
    height: 100%;
    width: 100%;
}
div.workflow .workflow-index[data-view="execution_progress"] .wf-main-content {
    display: none !important;
}

/* Default state: hide execution-progress-view-container when not in execution_progress view */
.execution-progress-view-container {
    display: none;
}

/** Added by shashank2104 on 2026-04-22 - DW-2868 - Modal styling for the AI-workflow load validation report. **/

.wf-load-validation-modal .modal-body {
    padding: 0;
    background: var(--d3v-bg-secondary, #f5f6f7);
}

.wf-load-validation {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 13px;
    color: var(--d3v-text-primary, #23272e);
}

/* ============ Header ============ */

.wf-load-validation .wf-val-header {
    padding: 20px 24px 18px;
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e7e9ec);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
}

.wf-load-validation .wf-val-header-main {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wf-load-validation .wf-val-badge {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--d3v-r-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
}

.wf-load-validation .wf-val-badge.danger {
    background: linear-gradient(135deg, var(--d3v-status-danger, #d9534f), #b52b2b);
}

.wf-load-validation .wf-val-badge.warning {
    background: linear-gradient(135deg, var(--d3v-status-warning, #f0ad4e), #d98d21);
}

.wf-load-validation .wf-val-header-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.wf-load-validation .wf-val-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--d3v-text-secondary, #60666d);
}

.wf-load-validation .wf-val-subtitle code {
    background: var(--d3v-bg-tertiary, #eef0f3);
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-header-meta {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--d3v-bg-secondary, #f5f6f7);
    border-left: 3px solid var(--d3v-accent-primary, #326ece);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-secondary, #60666d);
    line-height: 1.5;
}

/* ============ Groups (Blockers / Auto-fix / Warnings) ============ */

.wf-load-validation .wf-val-groups {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wf-load-validation .wf-val-group {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e7e9ec);
    border-radius: var(--d3v-r-md, 10px);
    overflow: hidden;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
    transition: box-shadow var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-group:hover {
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
}

.wf-load-validation .wf-val-group.tone-danger {
    border-top: 3px solid var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-group.tone-warning {
    border-top: 3px solid var(--d3v-status-warning, #f0ad4e);
}

.wf-load-validation .wf-val-group.tone-info {
    border-top: 3px solid var(--d3v-accent-primary, #326ece);
}

.wf-load-validation .wf-val-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 13px;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-group-icon { color: var(--d3v-status-danger, #d9534f); }
.wf-load-validation .wf-val-group.tone-warning .wf-val-group-icon { color: var(--d3v-status-warning, #f0ad4e); }
.wf-load-validation .wf-val-group.tone-info .wf-val-group-icon { color: var(--d3v-accent-primary, #326ece); }

.wf-load-validation .wf-val-group-label {
    flex: 1 1 auto;
    color: var(--d3v-text-primary, #23272e);
    font-weight: 600;
}

.wf-load-validation .wf-val-group-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-text-secondary, #60666d);
    font-size: 11px;
    font-weight: 600;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-group-count {
    background: rgba(217, 83, 79, 0.12);
    color: var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-group.tone-warning .wf-val-group-count {
    background: rgba(240, 173, 78, 0.15);
    color: #b7791f;
}

.wf-load-validation .wf-val-group-chevron {
    color: var(--d3v-text-tertiary, #8b9199);
    font-size: 11px;
    transition: transform var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-group.collapsed .wf-val-group-chevron {
    transform: rotate(-90deg);
}

.wf-load-validation .wf-val-group.collapsed .wf-val-group-actions,
.wf-load-validation .wf-val-group.collapsed .wf-val-issue-list {
    display: none;
}

.wf-load-validation .wf-val-group-actions {
    padding: 4px 16px 0;
    font-size: 11.5px;
}

.wf-load-validation .wf-val-group-actions .btn-link {
    padding: 0;
    font-size: 11.5px;
    color: var(--d3v-accent-primary, #326ece);
}

.wf-load-validation .wf-val-group-actions .sep {
    color: var(--d3v-border-subtle, #e7e9ec);
    margin: 0 4px;
}

/* ============ Individual issue rows ============ */

.wf-load-validation .wf-val-issue-list {
    list-style: none;
    padding: 4px 0 12px;
    margin: 0;
    overflow: auto;
    max-height: 250px;
}

.wf-load-validation .wf-val-issue {
    padding: 10px 16px;
    border-top: 1px solid var(--d3v-border-subtle-lighter, #f0f2f4);
    transition: background var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-issue:hover {
    background: var(--d3v-bg-secondary, #f5f6f7);
}

.wf-load-validation .wf-val-issue-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wf-load-validation .wf-val-issue-check {
    flex: 0 0 auto;
    margin: 2px 0 0;
    cursor: pointer;
}

.wf-load-validation .wf-val-issue-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--d3v-accent-primary, #326ece);
    cursor: pointer;
}

.wf-load-validation .wf-val-issue-bullet {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    margin-top: 3px;
    font-size: 12px;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-issue-bullet { color: var(--d3v-status-danger, #d9534f); }
.wf-load-validation .wf-val-group.tone-info .wf-val-issue-bullet { color: var(--d3v-accent-primary, #326ece); }

.wf-load-validation .wf-val-issue-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wf-load-validation .wf-val-issue-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary, #23272e);
    line-height: 1.4;
}

.wf-load-validation .wf-val-issue-title code,
.wf-load-validation .wf-val-issue-detail code {
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-accent-primary, #326ece);
    padding: 1px 5px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.wf-load-validation .wf-val-issue-detail {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #60666d);
}

.wf-load-validation .wf-val-issue-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-load-validation .wf-val-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-text-secondary, #60666d);
    font-size: 11px;
    font-weight: 500;
}

.wf-load-validation .wf-val-chip code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 11px;
}

.wf-load-validation .wf-val-chip-expected {
    background: rgba(50, 152, 74, 0.12);
    color: #1f7a3a;
}

.wf-load-validation .wf-val-chip-actual {
    background: rgba(217, 83, 79, 0.12);
    color: var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-issue-fix {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(50, 110, 206, 0.08);
    border-left: 3px solid var(--d3v-accent-primary, #326ece);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-issue-fix .fa-magic {
    color: var(--d3v-accent-primary, #326ece);
    margin-right: 4px;
}

/* ============ Footer ============ */

.wf-load-validation .wf-val-footer {
    flex: 0 0 auto;
    padding: 14px 24px;
    background: var(--d3v-bg-primary, #fff);
    border-top: 1px solid var(--d3v-border-subtle, #e7e9ec);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.wf-load-validation .wf-val-footer .btn {
    font-size: 13px;
    padding: 7px 16px;
    border-radius: var(--d3v-r-md, 8px);
    font-weight: 500;
    transition: all var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-footer .btn-primary {
    background: linear-gradient(135deg, var(--d3v-accent-primary, #326ece), #2658b3);
    border-color: transparent;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(50,110,206,0.25));
}

.wf-load-validation .wf-val-footer .btn-primary:hover:not(:disabled) {
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(50,110,206,0.35));
    transform: translateY(-1px);
}

.wf-load-validation .wf-val-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wf-load-validation .wf-val-footer .btn-warning {
    background: var(--d3v-status-warning, #f0ad4e);
    border-color: transparent;
    color: #fff;
}

/* worker/START input mnemonic badge (R0-3645) */
div.workflow .field-name .wf-ip-mn, div.workflow .input-name .wf-ip-mn, .wf-ip-mn{
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px; font-weight: 700; letter-spacing: .4px;
    color: #2c5282; background: #e8f0fa; border: 1px solid #d3e2f4;
    border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: middle;
}


/* ================================================================
   DW-2774 — Workflow Modern Theme: Design Tokens
   Scoped under .wf-design-modern — zero impact on classic mode.
   Pattern: d3viewdashboard-v2-01-tokens.css (--db-* → --wf-*)
   All values alias --d3v-* foundation tokens where possible.
   ================================================================ */

div.workflow.wf-design-modern,
body.wf-design-modern {

    /* ---- Neutral scale (alias to foundation) ---- */
    --wf-n-50:   var(--d3v-n-50,  #F8FAFC);
    --wf-n-100:  var(--d3v-n-100, #F1F5F9);
    --wf-n-200:  var(--d3v-n-200, #E2E8F0);
    --wf-n-300:  var(--d3v-n-300, #CBD5E1);
    --wf-n-400:  var(--d3v-n-400, #94A3B8);
    --wf-n-500:  var(--d3v-n-500, #64748B);
    --wf-n-600:  var(--d3v-n-600, #475569);
    --wf-n-700:  var(--d3v-n-700, #334155);
    --wf-n-800:  var(--d3v-n-800, #1E293B);
    --wf-n-900:  var(--d3v-n-900, #0F172A);

    /* ---- Surfaces / backgrounds ---- */
    --wf-bg-canvas:       var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-surface:      var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-elevated:     var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-sidebar:      var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-header:       var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-statusbar:    var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-overlay:      rgba(15, 23, 42, 0.40);
    --wf-bg-input:        #F1F5F9;
    --wf-bg-card:         #F8FAFC;
    --wf-bg-card-hover:   #F1F5F9;

    /* ---- Text ---- */
    --wf-text-primary:    var(--d3v-text-primary,   #1E293B);
    --wf-text-secondary:  var(--d3v-text-secondary,  #475569);
    --wf-text-muted:      var(--d3v-text-muted,      #94A3B8);
    --wf-text-disabled:   var(--d3v-n-300, #CBD5E1);
    --wf-text-inverse:    var(--d3v-text-inverse,    #FFFFFF);

    /* ---- Borders ---- */
    --wf-border:          var(--d3v-border,        #E2E8F0);
    --wf-border-strong:   var(--d3v-border-strong,  #CBD5E1);
    --wf-border-focus:    var(--d3v-accent,         #3B82F6);

    /* ---- Accent ---- */
    --wf-accent:          var(--d3v-accent,       #3B82F6);
    --wf-accent-hover:    var(--d3v-accent-hover, #2563EB);
    --wf-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --wf-success:         var(--d3v-success, #10B981);
    --wf-success-bg:      #D1FAE5;
    --wf-success-text:    #065F46;
    --wf-warning:         var(--d3v-warning, #F59E0B);
    --wf-warning-bg:      #FEF3C7;
    --wf-warning-text:    #92400E;
    --wf-danger:          var(--d3v-danger, #EF4444);
    --wf-danger-bg:       #FEE2E2;
    --wf-danger-text:     #991B1B;
    --wf-info:            var(--d3v-info, #3B82F6);

    /* ---- Node type palette (canvas-level, fixed across themes) ---- */
    --wf-node-coral:      #EF4444;
    --wf-node-blue:       #3B82F6;
    --wf-node-teal:       #14B8A6;
    --wf-node-gold:       #F59E0B;
    --wf-node-purple:     #8B5CF6;
    --wf-node-green:      #10B981;
    --wf-node-pink:       #EC4899;
    --wf-node-gray:       #94A3B8;
    --wf-node-orange:     #F97316;
    --wf-node-indigo:     #6366F1;

    /* ---- Shadows (alias to foundation) ---- */
    --wf-sh-xs:  var(--d3v-sh-xs,  0 1px 2px rgba(0,0,0,0.05));
    --wf-sh-sm:  var(--d3v-sh-sm,  0 1px 3px rgba(0,0,0,0.08));
    --wf-sh-md:  var(--d3v-sh-md,  0 4px 12px rgba(0,0,0,0.10));
    --wf-sh-lg:  var(--d3v-sh-lg,  0 10px 25px rgba(0,0,0,0.12));
    --wf-sh-xl:  var(--d3v-sh-xl,  0 20px 40px rgba(0,0,0,0.15));

    /* ---- Border radii (alias to foundation) ---- */
    --wf-r-sm:   var(--d3v-r-sm,   4px);
    --wf-r-md:   var(--d3v-r-md,   8px);
    --wf-r-lg:   var(--d3v-r-lg,   12px);
    --wf-r-xl:   var(--d3v-r-xl,   16px);
    --wf-r-2xl:  var(--d3v-r-2xl,  24px);
    --wf-r-full: var(--d3v-r-full, 9999px);

    /* ---- Transitions (alias to foundation) ---- */
    --wf-t-fast:   var(--d3v-t-fast,   all 0.12s ease);
    --wf-t-base:   var(--d3v-t-base,   all 0.20s ease);
    --wf-t-smooth: var(--d3v-t-smooth, all 0.30s cubic-bezier(0.4, 0, 0.2, 1));

    /* ---- Gradients ---- */
    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: var(--d3v-grad-accent, linear-gradient(135deg, #3B82F6 0%, #6366F1 100%));

    /* ---- Layout dimensions ---- */
    --wf-sidebar-w:    48px;
    --wf-sidebar-min:  48px;
    --wf-sidebar-max:  240px;
    /* R0-3335 - --wf-header-h removed from the modern token block; it is now owned by the single
       shared rule (div.workflow .wf-main-container) so modern + classic use the same value. */
    --wf-statusbar-h:  32px;

    /* ---- Z-index scale ---- */
    --wf-z-statusbar:  5;
    --wf-z-sidebar:    10;
    --wf-z-header:     20;
    --wf-z-overlay:    50;
    --wf-z-tooltip:    100;
    --wf-z-modal:      1050;

    /* ---- Spacing (4px grid) ---- */
    --wf-sp-1:   4px;
    --wf-sp-2:   8px;
    --wf-sp-3:   12px;
    --wf-sp-4:   16px;
    --wf-sp-5:   20px;
    --wf-sp-6:   24px;
    --wf-sp-8:   32px;
    --wf-sp-10:  40px;
    --wf-sp-12:  48px;

    /* ---- Typography ---- */
    --wf-fs-xs:    11px;
    --wf-fs-sm:    12px;
    --wf-fs-base:  13px;
    --wf-fs-md:    14px;
    --wf-fs-lg:    16px;
    --wf-fs-xl:    18px;
}


/* ================================================================
   DARK MODE OVERRIDES
   Applied when .wf-dark is toggled alongside .wf-design-modern.
   Only override what changes — node palette, radii, transitions,
   spacing, z-index, and typography stay the same.
   ================================================================ */

div.workflow.wf-design-modern.wf-dark,
body.wf-design-modern.wf-dark {

    /* ---- Surfaces ---- */
    --wf-bg-canvas:       #1a1a2e;
    --wf-bg-surface:      #16213e;
    --wf-bg-elevated:     #1a2744;
    --wf-bg-sidebar:      #0f1629;
    --wf-bg-header:       rgba(15, 22, 41, 0.95);
    --wf-bg-statusbar:    #0f1629;
    --wf-bg-overlay:      rgba(0, 0, 0, 0.60);
    --wf-bg-input:        #0f1629;
    --wf-bg-card:         #1a2744;
    --wf-bg-card-hover:   #1f3050;

    /* ---- Text ---- */
    --wf-text-primary:    #E2E8F0;
    --wf-text-secondary:  #94A3B8;
    --wf-text-muted:      #64748B;
    --wf-text-disabled:   #475569;
    --wf-text-inverse:    #0F172A;

    /* ---- Borders ---- */
    --wf-border:          rgba(148, 163, 184, 0.15);
    --wf-border-strong:   rgba(148, 163, 184, 0.25);
    --wf-border-focus:    #60A5FA;

    /* ---- Accent (slightly brighter for dark bg) ---- */
    --wf-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status backgrounds (darkened) ---- */
    --wf-success-bg:      rgba(16, 185, 129, 0.15);
    --wf-success-text:    #6EE7B7;
    --wf-warning-bg:      rgba(245, 158, 11, 0.15);
    --wf-warning-text:    #FCD34D;
    --wf-danger-bg:       rgba(239, 68, 68, 0.15);
    --wf-danger-text:     #FCA5A5;

    /* ---- Shadows (deeper for dark surfaces) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);

    /* ---- Node palette (slightly adjusted gray for dark bg) ---- */
    --wf-node-gray: #94A3B8;
}

/* Force dark bg on all major containers */
div.workflow.wf-design-modern.wf-dark .d3view-wf-header,
body.wf-design-modern.wf-dark .d3view-wf-header {
    background: var(--wf-bg-header) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu,
body.wf-design-modern.wf-dark .wf-nav-menu {
    background: var(--wf-bg-sidebar) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar,
body.wf-design-modern.wf-dark .wf-modern-statusbar {
    background: var(--wf-bg-statusbar) !important;
}

div.workflow.wf-design-modern.wf-dark .full-view,
body.wf-design-modern.wf-dark .full-view {
    background: var(--wf-bg-canvas) !important;
}

div.workflow.wf-design-modern.wf-dark .chart-view::before,
body.wf-design-modern.wf-dark .chart-view::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
}

/* Dark mode text overrides */
div.workflow.wf-design-modern.wf-dark .wf-name-container .wf-name,
body.wf-design-modern.wf-dark .wf-name-container .wf-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-dropdowns .dropdown > a,
div.workflow.wf-design-modern.wf-dark .wf-dropdowns .pl-dropdown > a,
body.wf-design-modern.wf-dark .wf-dropdowns .dropdown > a,
body.wf-design-modern.wf-dark .wf-dropdowns .pl-dropdown > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-start-status,
body.wf-design-modern.wf-dark .wf-start-status {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* Dark right toolbars */
div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions,
div.workflow.wf-design-modern.wf-dark .full-view .zoom,
body.wf-design-modern.wf-dark .full-view .wf-top-actions,
body.wf-design-modern.wf-dark .full-view .zoom {
    background: var(--wf-bg-sidebar) !important;
    border-color: var(--wf-border) !important;
}

/* Dark footer */
div.workflow.wf-design-modern.wf-dark .wf-tab-footer,
body.wf-design-modern.wf-dark .wf-tab-footer {
    background: var(--wf-bg-statusbar) !important;
}


/* ================================================================
   BODY-LEVEL MODERN TOKENS (LIGHT)
   Re-declare --wf-* light values on body.wf-design-modern
   so modals/sidebars appended to <body> get modern design.
   ================================================================ */

body.wf-design-modern {

    /* ---- Neutral scale ---- */
    --wf-n-50:   #F8FAFC;
    --wf-n-100:  #F1F5F9;
    --wf-n-200:  #E2E8F0;
    --wf-n-300:  #CBD5E1;
    --wf-n-400:  #94A3B8;
    --wf-n-500:  #64748B;
    --wf-n-600:  #475569;
    --wf-n-700:  #334155;
    --wf-n-800:  #1E293B;
    --wf-n-900:  #0F172A;

    /* ---- Surfaces (light) ---- */
    --wf-bg-canvas:       #F8FAFC;
    --wf-bg-surface:      #FFFFFF;
    --wf-bg-elevated:     #FFFFFF;
    --wf-bg-sidebar:      #FFFFFF;
    --wf-bg-header:       #FFFFFF;
    --wf-bg-statusbar:    #F8FAFC;
    --wf-bg-overlay:      rgba(15, 23, 42, 0.40);
    --wf-bg-input:        #F1F5F9;
    --wf-bg-card:         #F8FAFC;
    --wf-bg-card-hover:   #F1F5F9;

    /* ---- Text (light) ---- */
    --wf-text-primary:    #1E293B;
    --wf-text-secondary:  #475569;
    --wf-text-muted:      #94A3B8;
    --wf-text-disabled:   #CBD5E1;
    --wf-text-inverse:    #FFFFFF;

    /* ---- Borders (light) ---- */
    --wf-border:          #E2E8F0;
    --wf-border-strong:   #CBD5E1;
    --wf-border-focus:    #3B82F6;

    /* ---- Accent ---- */
    --wf-accent:          #3B82F6;
    --wf-accent-hover:    #2563EB;
    --wf-accent-light:    rgba(59, 130, 246, 0.10);

    /* ---- Status ---- */
    --wf-success:         #10B981;
    --wf-success-bg:      #D1FAE5;
    --wf-success-text:    #065F46;
    --wf-warning:         #F59E0B;
    --wf-warning-bg:      #FEF3C7;
    --wf-warning-text:    #92400E;
    --wf-danger:          #EF4444;
    --wf-danger-bg:       #FEE2E2;
    --wf-danger-text:     #991B1B;

    /* ---- Shadows (light) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.12);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.15);

    /* ---- Radii ---- */
    --wf-r-sm:   4px;
    --wf-r-md:   8px;
    --wf-r-lg:   12px;
    --wf-r-xl:   16px;
    --wf-r-2xl:  24px;
    --wf-r-full: 9999px;

    /* ---- Transitions ---- */
    --wf-t-fast:   all 0.12s ease;
    --wf-t-base:   all 0.20s ease;
    --wf-t-smooth: all 0.30s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Gradients ---- */
    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
}


/* ================================================================
   BODY-LEVEL DARK TOKEN OVERRIDES
   Override light values with dark when body.wf-design-modern.wf-dark.
   ================================================================ */

body.wf-design-modern.wf-dark {

    /* ---- Surfaces (dark overrides) ---- */
    --wf-bg-canvas:       #1a1a2e;
    --wf-bg-surface:      #16213e;
    --wf-bg-elevated:     #1a2744;
    --wf-bg-sidebar:      #0f1629;
    --wf-bg-header:       rgba(15, 22, 41, 0.95);
    --wf-bg-statusbar:    #0f1629;
    --wf-bg-overlay:      rgba(0, 0, 0, 0.60);
    --wf-bg-input:        #0f1629;
    --wf-bg-card:         #1a2744;
    --wf-bg-card-hover:   #1f3050;

    /* ---- Text (dark overrides) ---- */
    --wf-text-primary:    #E2E8F0;
    --wf-text-secondary:  #94A3B8;
    --wf-text-muted:      #64748B;
    --wf-text-disabled:   #475569;
    --wf-text-inverse:    #0F172A;

    /* ---- Borders (dark overrides) ---- */
    --wf-border:          rgba(148, 163, 184, 0.15);
    --wf-border-strong:   rgba(148, 163, 184, 0.25);
    --wf-border-focus:    #60A5FA;

    /* ---- Accent (dark overrides) ---- */
    --wf-accent-light:    rgba(59, 130, 246, 0.15);

    /* ---- Status (dark overrides) ---- */
    --wf-success-bg:      rgba(16, 185, 129, 0.15);
    --wf-success-text:    #6EE7B7;
    --wf-warning-bg:      rgba(245, 158, 11, 0.15);
    --wf-warning-text:    #FCD34D;
    --wf-danger-bg:       rgba(239, 68, 68, 0.15);
    --wf-danger-text:     #FCA5A5;

    /* ---- Shadows (dark, deeper) ---- */
    --wf-sh-xs:  0 1px 2px rgba(0, 0, 0, 0.20);
    --wf-sh-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --wf-sh-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --wf-sh-lg:  0 10px 25px rgba(0, 0, 0, 0.50);
    --wf-sh-xl:  0 20px 40px rgba(0, 0, 0, 0.60);
}

/* ================================================================
   DW-2774 -- Workflow Modern Theme: Dark Mode Blanket Overrides
   Scoped under div.workflow.wf-design-modern.wf-dark
   Fixes common Bootstrap/third-party selectors that inherit
   white backgrounds and black text in dark mode.
   ================================================================ */


/* ----------------------------------------------------------------
   1. BOOTSTRAP CORE OVERRIDES
   ---------------------------------------------------------------- */

/* Panels */
div.workflow.wf-design-modern.wf-dark .panel,
body.wf-design-modern.wf-dark .panel,
div.workflow.wf-design-modern.wf-dark .panel-default,
body.wf-design-modern.wf-dark .panel-default,
div.workflow.wf-design-modern.wf-dark .panel-body,
body.wf-design-modern.wf-dark .panel-body,
div.workflow.wf-design-modern.wf-dark .panel-heading,
body.wf-design-modern.wf-dark .panel-heading,
div.workflow.wf-design-modern.wf-dark .panel-footer,
body.wf-design-modern.wf-dark .panel-footer {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Wells */
div.workflow.wf-design-modern.wf-dark .well,
body.wf-design-modern.wf-dark .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* List groups */
div.workflow.wf-design-modern.wf-dark .list-group-item,
body.wf-design-modern.wf-dark .list-group-item,
div.workflow.wf-design-modern.wf-dark li.list-group-item,
body.wf-design-modern.wf-dark li.list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .list-group-item:hover,
body.wf-design-modern.wf-dark .list-group-item:hover {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .list-group-item.active,
body.wf-design-modern.wf-dark .list-group-item.active,
div.workflow.wf-design-modern.wf-dark .list-group-item.active:hover,
body.wf-design-modern.wf-dark .list-group-item.active:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

/* Sidebar nav items must stay transparent — override generic list-group-item dark bg */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item {
    background-color: transparent !important;
    border-color: transparent !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a:hover,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item > a:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    color: var(--wf-text-secondary) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a,
body.wf-design-modern.wf-dark .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a {
    border-left-color: var(--wf-accent) !important;
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-accent) !important;
}

/* Modals (inside workflow container) */
div.workflow.wf-design-modern.wf-dark .modal-content,
body.wf-design-modern.wf-dark .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-header,
body.wf-design-modern.wf-dark .modal-header {
    border-bottom-color: var(--wf-border) !important;
    background-color: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-header .modal-title,
body.wf-design-modern.wf-dark .modal-header .modal-title,
div.workflow.wf-design-modern.wf-dark .modal-header h4,
body.wf-design-modern.wf-dark .modal-header h4 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-body,
body.wf-design-modern.wf-dark .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .modal-footer,
body.wf-design-modern.wf-dark .modal-footer {
    border-top-color: var(--wf-border) !important;
    background-color: var(--wf-bg-surface) !important;
}

/* Dropdowns — generalized for both light + dark (tokens handle color switching) */
div.workflow.wf-design-modern .dropdown-menu,
body.wf-design-modern .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border-radius: var(--wf-r-md) !important;
    padding: 4px 0 !important;
}

div.workflow.wf-design-modern .dropdown-menu > li > a,
body.wf-design-modern .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
    padding: 7px 16px !important;
    transition: var(--wf-t-fast);
}

/* Generic li:hover for ALL dropdown menus — overrides Bootstrap's #f5f5f5 default */
div.workflow.wf-design-modern ul.dropdown-menu > li:hover,
div.workflow.wf-design-modern .wf-dropdowns > li:hover,
div.workflow.wf-design-modern .dropdown-menu > li:hover:not(.divider):not(.disabled),
body.wf-design-modern ul.dropdown-menu > li:hover,
body.wf-design-modern .wf-dropdowns-list > li:hover,
body.wf-design-modern .wf-dropdowns-list > li.open,
body.wf-design-modern .dropdown-menu > li:hover:not(.divider):not(.disabled) {
    background-color: var(--wf-accent-light) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li > a:hover,
body.wf-design-modern .dropdown-menu > li > a:hover,
div.workflow.wf-design-modern .dropdown-menu > li > a:focus,
body.wf-design-modern .dropdown-menu > li > a:focus {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li.active > a,
body.wf-design-modern .dropdown-menu > li.active > a {
    background-color: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* .open state — parent <li> that triggered a dropdown */
div.workflow.wf-design-modern .dropdown.open > a,
body.wf-design-modern .dropdown.open > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* Dropdown submenu hover */
div.workflow.wf-design-modern .dropdown-submenu:hover > a,
body.wf-design-modern .dropdown-submenu:hover > a {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern .dropdown-submenu > .dropdown-menu,
body.wf-design-modern .dropdown-submenu > .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-md) !important;
}

div.workflow.wf-design-modern .dropdown-menu .divider,
body.wf-design-modern .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0;
}

div.workflow.wf-design-modern .dropdown-menu > li.disabled > a,
body.wf-design-modern .dropdown-menu > li.disabled > a {
    color: var(--wf-text-disabled) !important;
}

div.workflow.wf-design-modern .dropdown-menu > li.disabled:hover,
body.wf-design-modern .dropdown-menu > li.disabled:hover {
    background-color: transparent !important;
}

/* Dropdown checked items — add left padding so checkmark doesn't overlap text */
div.workflow.wf-design-modern .dropdown-menu li.checked > a,
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.checked a,
body.wf-design-modern .dropdown-menu li.checked > a {
    padding-left: 24px !important;
}

/* Checkmark color — uses accent for both themes */
div.workflow.wf-design-modern .dropdown-menu li.checked::after,
div.workflow.wf-design-modern .d3view-plugin-header li.checked::after,
body.wf-design-modern .dropdown-menu li.checked::after,
body.wf-design-modern .d3view-plugin-header li.checked::after {
    color: var(--wf-accent) !important;
}

/* Nav tabs */
div.workflow.wf-design-modern.wf-dark .nav-tabs,
body.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li > a,
body.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .nav-tabs > li > a:hover {
    border-color: transparent !important;
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a,
div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a:hover,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a:hover,
div.workflow.wf-design-modern.wf-dark .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .nav-tabs > li.active > a:focus {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    border-bottom-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Tab content / panes */
div.workflow.wf-design-modern.wf-dark .tab-content,
body.wf-design-modern.wf-dark .tab-content,
div.workflow.wf-design-modern.wf-dark .tab-pane,
body.wf-design-modern.wf-dark .tab-pane {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Alerts */
div.workflow.wf-design-modern.wf-dark .alert,
body.wf-design-modern.wf-dark .alert {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-info,
body.wf-design-modern.wf-dark .alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #93C5FD !important;
}

div.workflow.wf-design-modern.wf-dark .alert-warning,
body.wf-design-modern.wf-dark .alert-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-danger,
body.wf-design-modern.wf-dark .alert-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
}

div.workflow.wf-design-modern.wf-dark .alert-success,
body.wf-design-modern.wf-dark .alert-success {
    background-color: var(--wf-success-bg) !important;
    color: var(--wf-success-text) !important;
}

/* Tables */
div.workflow.wf-design-modern.wf-dark table,
body.wf-design-modern.wf-dark table,
div.workflow.wf-design-modern.wf-dark .table,
body.wf-design-modern.wf-dark .table {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > thead > tr > th,
body.wf-design-modern.wf-dark .table > thead > tr > th {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > tbody > tr > td,
body.wf-design-modern.wf-dark .table > tbody > tr > td {
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .table > tbody > tr:hover > td {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .table-striped > tbody > tr:nth-of-type(odd),
body.wf-design-modern.wf-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(148, 163, 184, 0.05) !important;
}

/* Badges and labels */
div.workflow.wf-design-modern.wf-dark .badge,
body.wf-design-modern.wf-dark .badge {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .label-default,
body.wf-design-modern.wf-dark .label-default {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}


/* ----------------------------------------------------------------
   2. FORM CONTROLS
   ---------------------------------------------------------------- */

/* Text inputs, selects, textareas */
div.workflow.wf-design-modern.wf-dark .form-control,
body.wf-design-modern.wf-dark .form-control,
div.workflow.wf-design-modern.wf-dark input[type="text"],
body.wf-design-modern.wf-dark input[type="text"],
div.workflow.wf-design-modern.wf-dark input[type="number"],
body.wf-design-modern.wf-dark input[type="number"],
div.workflow.wf-design-modern.wf-dark input[type="email"],
body.wf-design-modern.wf-dark input[type="email"],
div.workflow.wf-design-modern.wf-dark input[type="password"],
body.wf-design-modern.wf-dark input[type="password"],
div.workflow.wf-design-modern.wf-dark input[type="search"],
body.wf-design-modern.wf-dark input[type="search"],
div.workflow.wf-design-modern.wf-dark textarea,
body.wf-design-modern.wf-dark textarea,
div.workflow.wf-design-modern.wf-dark select,
body.wf-design-modern.wf-dark select {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .form-control:focus,
body.wf-design-modern.wf-dark .form-control:focus,
div.workflow.wf-design-modern.wf-dark input:focus,
body.wf-design-modern.wf-dark input:focus,
div.workflow.wf-design-modern.wf-dark textarea:focus,
body.wf-design-modern.wf-dark textarea:focus,
div.workflow.wf-design-modern.wf-dark select:focus,
body.wf-design-modern.wf-dark select:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    background-color: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .form-control::placeholder,
body.wf-design-modern.wf-dark .form-control::placeholder,
div.workflow.wf-design-modern.wf-dark input::placeholder,
body.wf-design-modern.wf-dark input::placeholder,
div.workflow.wf-design-modern.wf-dark textarea::placeholder,
body.wf-design-modern.wf-dark textarea::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Input group addons */
div.workflow.wf-design-modern.wf-dark .input-group-addon,
body.wf-design-modern.wf-dark .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Labels and general text */
div.workflow.wf-design-modern.wf-dark label,
body.wf-design-modern.wf-dark label {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark h1,
body.wf-design-modern.wf-dark h1,
div.workflow.wf-design-modern.wf-dark h2,
body.wf-design-modern.wf-dark h2,
div.workflow.wf-design-modern.wf-dark h3,
body.wf-design-modern.wf-dark h3,
div.workflow.wf-design-modern.wf-dark h4,
body.wf-design-modern.wf-dark h4,
div.workflow.wf-design-modern.wf-dark h5,
body.wf-design-modern.wf-dark h5 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark p,
body.wf-design-modern.wf-dark p,
div.workflow.wf-design-modern.wf-dark span,
body.wf-design-modern.wf-dark span,
div.workflow.wf-design-modern.wf-dark div,
body.wf-design-modern.wf-dark div {
    color: inherit;
}


/* ----------------------------------------------------------------
   3. SELECT2 (3.5.x) -- scoped inside workflow
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice,
body.wf-design-modern.wf-dark .select2-container .select2-choice,
div.workflow.wf-design-modern.wf-dark .select2-container .select2-choices,
body.wf-design-modern.wf-dark .select2-container .select2-choices {
    background-color: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow,
body.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow {
    background: var(--wf-bg-elevated) !important;
    border-left-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow b,
body.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow b {
    filter: invert(0.7);
}

div.workflow.wf-design-modern.wf-dark .select2-container .select2-chosen,
body.wf-design-modern.wf-dark .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}

/* Select2 dropdown (may be outside workflow container, so use body-level selector too) */
div.workflow.wf-design-modern.wf-dark .select2-drop,
body.wf-design-modern.wf-dark .select2-drop,
.workflow-select2.wf-dark-dropdown {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-results .select2-result-label,
body.wf-design-modern.wf-dark .select2-results .select2-result-label,
div.workflow.wf-design-modern.wf-dark .select2-results li,
body.wf-design-modern.wf-dark .select2-results li {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-results .select2-highlighted,
body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-search input,
body.wf-design-modern.wf-dark .select2-search input {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice,
body.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   4. ACE EDITOR
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .ace_editor,
body.wf-design-modern.wf-dark .ace_editor,
div.workflow.wf-design-modern.wf-dark .ace-tm,
body.wf-design-modern.wf-dark .ace-tm {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_gutter,
body.wf-design-modern.wf-dark .ace-tm .ace_gutter {
    background: #161b22 !important;
    color: var(--wf-text-muted) !important;
    border-right-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_print-margin,
body.wf-design-modern.wf-dark .ace-tm .ace_print-margin {
    background: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_cursor,
body.wf-design-modern.wf-dark .ace-tm .ace_cursor {
    color: #c9d1d9 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection,
body.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection {
    background: rgba(56, 139, 253, 0.25) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line,
body.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_gutter-active-line,
body.wf-design-modern.wf-dark .ace-tm .ace_gutter-active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_keyword,
body.wf-design-modern.wf-dark .ace-tm .ace_keyword {
    color: #ff7b72 !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_string,
body.wf-design-modern.wf-dark .ace-tm .ace_string {
    color: #a5d6ff !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_comment,
body.wf-design-modern.wf-dark .ace-tm .ace_comment {
    color: #8b949e !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric,
body.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric {
    color: #79c0ff !important;
}

div.workflow.wf-design-modern.wf-dark .ace-tm .ace_variable,
body.wf-design-modern.wf-dark .ace-tm .ace_variable {
    color: #ffa657 !important;
}


/* ----------------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .btn-default,
body.wf-design-modern.wf-dark .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
    background-image: none;
}

div.workflow.wf-design-modern.wf-dark .btn-default:hover,
body.wf-design-modern.wf-dark .btn-default:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-default:focus,
body.wf-design-modern.wf-dark .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-default:active,
body.wf-design-modern.wf-dark .btn-default:active,
div.workflow.wf-design-modern.wf-dark .btn-default.active,
body.wf-design-modern.wf-dark .btn-default.active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

/* Dropdown content: labels, text, radio/checkbox, footers */
div.workflow.wf-design-modern.wf-dark .dropdown-menu label,
body.wf-design-modern.wf-dark .dropdown-menu label,
div.workflow.wf-design-modern.wf-dark .dropdown-menu span,
body.wf-design-modern.wf-dark .dropdown-menu span,
div.workflow.wf-design-modern.wf-dark .dropdown-menu li,
body.wf-design-modern.wf-dark .dropdown-menu li {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .dropdown-menu .dd-footer,
body.wf-design-modern.wf-dark .dropdown-menu .dd-footer {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-outline,
body.wf-design-modern.wf-dark .btn-outline,
div.workflow.wf-design-modern.wf-dark .btn-outline-on-hover,
body.wf-design-modern.wf-dark .btn-outline-on-hover {
    color: var(--wf-text-secondary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-outline:hover,
body.wf-design-modern.wf-dark .btn-outline:hover,
div.workflow.wf-design-modern.wf-dark .btn-outline-on-hover:hover,
body.wf-design-modern.wf-dark .btn-outline-on-hover:hover {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   6. POPOVERS & TOOLTIPS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .popover,
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-title,
body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-sidebar) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-content,
body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.top > .arrow::after,
body.wf-design-modern.wf-dark .popover.top > .arrow::after {
    border-top-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.bottom > .arrow::after,
body.wf-design-modern.wf-dark .popover.bottom > .arrow::after {
    border-bottom-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.left > .arrow::after,
body.wf-design-modern.wf-dark .popover.left > .arrow::after {
    border-left-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.right > .arrow::after,
body.wf-design-modern.wf-dark .popover.right > .arrow::after {
    border-right-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-bg-sidebar) !important;
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   7. MISC HARDCODED COLOR OVERRIDES
   ---------------------------------------------------------------- */

/* Close buttons */
div.workflow.wf-design-modern.wf-dark .close,
body.wf-design-modern.wf-dark .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
}

div.workflow.wf-design-modern.wf-dark .close:hover,
body.wf-design-modern.wf-dark .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1 !important;
}

/* Breadcrumbs */
div.workflow.wf-design-modern.wf-dark .breadcrumb,
body.wf-design-modern.wf-dark .breadcrumb {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .breadcrumb > li > a,
body.wf-design-modern.wf-dark .breadcrumb > li > a {
    color: var(--wf-accent) !important;
}

/* Text utility overrides */
div.workflow.wf-design-modern.wf-dark .text-muted,
body.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .text-primary,
body.wf-design-modern.wf-dark .text-primary {
    color: var(--wf-accent) !important;
}

/* Pagination */
div.workflow.wf-design-modern.wf-dark .pagination > li > a,
body.wf-design-modern.wf-dark .pagination > li > a {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .pagination > li > a:hover,
body.wf-design-modern.wf-dark .pagination > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .pagination > .active > a,
body.wf-design-modern.wf-dark .pagination > .active > a {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: white !important;
}

/* Jumbotron / hero sections */
div.workflow.wf-design-modern.wf-dark .jumbotron,
body.wf-design-modern.wf-dark .jumbotron {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}


/* Removed by shashank2104 on 2026-07-23 - R2026-51 - the HANDSONTABLE section that used to sit here
   was deleted (hence the section-number gap). It duplicated FormBuilder's modern table skin
   (fb_list.css, [data-ui-theme="modern"] li.field-item .handsontable_container) but every declaration
   was !important, so it won inside the worker-config modal: curve / dataset grids there rendered with a
   different header, a smaller font and - under .wf-dark - a dark fill on a light form. FormBuilder owns
   that table everywhere now; style it in fb_list.css, not here. */


/* ----------------------------------------------------------------
   9. SIDE PANELS & GENERIC CONTAINERS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-side-panel,
body.wf-design-modern.wf-dark .wf-side-panel,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-content,
body.wf-design-modern.wf-dark .wf-side-panel-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-side-panel-header,
body.wf-design-modern.wf-dark .wf-side-panel-header {
    background-color: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* Generic white background containers */
div.workflow.wf-design-modern.wf-dark [style*="background: #FFF"],
body.wf-design-modern.wf-dark [style*="background: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background:#FFF"],
body.wf-design-modern.wf-dark [style*="background:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background: #fff"],
body.wf-design-modern.wf-dark [style*="background: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background:#fff"],
body.wf-design-modern.wf-dark [style*="background:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background: white"],
body.wf-design-modern.wf-dark [style*="background: white"],
div.workflow.wf-design-modern.wf-dark [style*="background:white"],
body.wf-design-modern.wf-dark [style*="background:white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #fff"],
body.wf-design-modern.wf-dark [style*="background-color: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: white"],
body.wf-design-modern.wf-dark [style*="background-color: white"] {
    background: var(--wf-bg-elevated) !important;
}

/* Inline border overrides */
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Inline color overrides */
div.workflow.wf-design-modern.wf-dark [style*="color: #000"],
body.wf-design-modern.wf-dark [style*="color: #000"],
div.workflow.wf-design-modern.wf-dark [style*="color:#000"],
body.wf-design-modern.wf-dark [style*="color:#000"],
div.workflow.wf-design-modern.wf-dark [style*="color: black"],
body.wf-design-modern.wf-dark [style*="color: black"],
div.workflow.wf-design-modern.wf-dark [style*="color:black"],
body.wf-design-modern.wf-dark [style*="color:black"],
div.workflow.wf-design-modern.wf-dark [style*="color: #333"],
body.wf-design-modern.wf-dark [style*="color: #333"],
div.workflow.wf-design-modern.wf-dark [style*="color:#333"],
body.wf-design-modern.wf-dark [style*="color:#333"] {
    color: var(--wf-text-primary) !important;
}

/* Scrollbar styling for dark mode */
div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar,
body.wf-design-modern.wf-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-track {
    background: transparent;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}


/* ----------------------------------------------------------------
   10. WORKFLOW-SPECIFIC SELECTORS WITH HARDCODED COLORS
   ---------------------------------------------------------------- */

/* Worker type badges */
div.workflow.wf-design-modern.wf-dark .wf-worker-type,
body.wf-design-modern.wf-dark .wf-worker-type {
    color: var(--wf-text-primary) !important;
}

/* Worker names -- overrides #333 !important from classic CSS */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-name,
body.wf-design-modern.wf-dark .wf-workers-container .worker-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-type,
body.wf-design-modern.wf-dark .wf-workers-container .worker-type {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-label span,
body.wf-design-modern.wf-dark .wf-workers-container .worker-label span {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-description,
body.wf-design-modern.wf-dark .wf-workers-container .worker-description {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-asterisk,
body.wf-design-modern.wf-dark .wf-workers-container .worker-asterisk {
    color: var(--wf-accent) !important;
}

/* Worker panels -- overrides hardcoded bg/border from classic CSS */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel:hover,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons {
    background-color: transparent !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn {
    color: var(--wf-text-muted) !important;
    background: transparent !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn:hover,
body.wf-design-modern.wf-dark .wf-workers-container .worker-panel .add_buttons .btn:hover {
    color: var(--wf-accent) !important;
    background: var(--wf-accent-light) !important;
}

/* Worker ID labels */
div.workflow.wf-design-modern.wf-dark .wf-id-label,
body.wf-design-modern.wf-dark .wf-id-label {
    border-color: transparent !important;
}

/* Help blocks */
div.workflow.wf-design-modern.wf-dark .help-block,
body.wf-design-modern.wf-dark .help-block {
    color: var(--wf-text-muted) !important;
}

/* Field items */
div.workflow.wf-design-modern.wf-dark li.field-item,
body.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark li.field-item .field-name,
body.wf-design-modern.wf-dark li.field-item .field-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark li.field-item .field-value,
body.wf-design-modern.wf-dark li.field-item .field-value {
    color: var(--wf-text-secondary) !important;
}

/* Grouping headers */
div.workflow.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a,
body.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a {
    color: var(--wf-text-primary) !important;
    background-color: var(--wf-bg-surface) !important;
}

/* Workflow settings panels */
div.workflow.wf-design-modern.wf-dark .wf-settings-panel,
body.wf-design-modern.wf-dark .wf-settings-panel {
    background-color: var(--wf-bg-surface) !important;
}

/* Pre/code blocks */
div.workflow.wf-design-modern.wf-dark pre,
body.wf-design-modern.wf-dark pre,
div.workflow.wf-design-modern.wf-dark code,
body.wf-design-modern.wf-dark code {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: var(--wf-border) !important;
}

/* Dividers / HRs */
div.workflow.wf-design-modern.wf-dark hr,
body.wf-design-modern.wf-dark hr {
    border-top-color: var(--wf-border) !important;
}


/* ----------------------------------------------------------------
   11. WORKFLOW MODAL (body-level) DARK OVERRIDES
   Same selectors as wf-modern-worker-config.css but for dark
   ---------------------------------------------------------------- */

/* These are for modals appended to body outside div.workflow */
.workflow-modal.wf-design-modern.wf-dark .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a:hover {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li.active > a {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    border-bottom-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

.workflow-modal.wf-design-modern.wf-dark .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark label {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:hover {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:active,
.workflow-modal.wf-design-modern.wf-dark .btn-default.active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

.workflow-modal.wf-design-modern.wf-dark .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
}

.workflow-modal.wf-design-modern.wf-dark h1,
.workflow-modal.wf-design-modern.wf-dark h2,
.workflow-modal.wf-design-modern.wf-dark h3,
.workflow-modal.wf-design-modern.wf-dark h4,
.workflow-modal.wf-design-modern.wf-dark h5 {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .panel,
.workflow-modal.wf-design-modern.wf-dark .panel-body,
.workflow-modal.wf-design-modern.wf-dark .panel-heading {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice,
.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choices {
    background-color: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice .select2-arrow {
    background: var(--wf-bg-elevated) !important;
    border-left-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container-multi .select2-choices .select2-search-choice {
    background-color: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
}

/* ACE editor inside modals */
.workflow-modal.wf-design-modern.wf-dark .ace_editor,
.workflow-modal.wf-design-modern.wf-dark .ace-tm {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_gutter {
    background: #161b22 !important;
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_cursor {
    color: #c9d1d9 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_selection {
    background: rgba(56, 139, 253, 0.25) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_marker-layer .ace_active-line {
    background: rgba(110, 118, 129, 0.12) !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_keyword {
    color: #ff7b72 !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_string {
    color: #a5d6ff !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_comment {
    color: #8b949e !important;
}

.workflow-modal.wf-design-modern.wf-dark .ace-tm .ace_constant.ace_numeric {
    color: #79c0ff !important;
}

/* Pre/code inside modals */
.workflow-modal.wf-design-modern.wf-dark pre,
.workflow-modal.wf-design-modern.wf-dark code {
    background-color: #0d1117 !important;
    color: #c9d1d9 !important;
    border-color: var(--wf-border) !important;
}

/* Scrollbars inside modals */
.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-track {
    background: transparent;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
}

.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
}


/* ----------------------------------------------------------------
   12. WORKER CONFIG MODAL -- DARK MODE SPECIFICS
   Fixes for the worker configuration view (ConfigureWfWorker)
   ---------------------------------------------------------------- */

/* Worker config container backgrounds */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-inputs-outputs {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Inputs heading area */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading,
.workflow-modal.wf-design-modern.wf-dark .worker-outputs .heading,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs .heading {
    border-bottom-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading span,
.workflow-modal.wf-design-modern.wf-dark .worker-outputs .heading span {
    color: var(--wf-text-primary) !important;
}

/* Search icon inside inputs heading */
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading .fa,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view .heading i {
    color: var(--wf-text-muted) !important;
}

/* Field items in inputs/outputs list */
.workflow-modal.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .field-name,
.workflow-modal.wf-design-modern.wf-dark li.field-item .field-name span {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .field-value,
.workflow-modal.wf-design-modern.wf-dark li.field-item .field-value span {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark li.field-item .help-block {
    color: var(--wf-text-muted) !important;
}

/* Input group (Customize worker name area) */
.workflow-modal.wf-design-modern.wf-dark .name-container {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .name-container .form-control {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* Docked heading / IO tabs */
.workflow-modal.wf-design-modern.wf-dark .docked-heading {
    background: var(--wf-bg-surface) !important;
}

/* Input groups tabs (Basic/Optional) */
.workflow-modal.wf-design-modern.wf-dark .input-groups .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-groups .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    border-bottom-color: var(--wf-accent) !important;
    background: transparent !important;
}

/* Outputs panel */
.workflow-modal.wf-design-modern.wf-dark .worker-outputs,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs {
    background: var(--wf-bg-surface) !important;
    border-left-color: var(--wf-border) !important;
}

/* Output preview area */
.workflow-modal.wf-design-modern.wf-dark .worker-output-preview {
    background: var(--wf-bg-input) !important;
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Output field badges */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-outputs .field-name {
    color: var(--wf-text-primary) !important;
}

/* View type selector buttons */
.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn {
    color: var(--wf-text-muted) !important;
    border-color: var(--wf-border) !important;
    background: transparent !important;
}

.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn:hover,
.workflow-modal.wf-design-modern.wf-dark .view-type-selector .btn.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Data source selects */
.workflow-modal.wf-design-modern.wf-dark li.field-item select {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* Datasource options area */
.workflow-modal.wf-design-modern.wf-dark .datasource-options {
    background: transparent !important;
}

/* Configuration tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv-container {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

/* Validations tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-validations {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Execution log */
.workflow-modal.wf-design-modern.wf-dark .execution-log {
    background: var(--wf-bg-input) !important;
    border-top-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .execution-log-header {
    background: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .logs-container {
    color: var(--wf-text-secondary) !important;
}

/* Inline border overrides (templates use inline border styles) */
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
.workflow-modal.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
.workflow-modal.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Inline background overrides */
.workflow-modal.wf-design-modern.wf-dark [style*="background: #FFF"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:#FFF"],
.workflow-modal.wf-design-modern.wf-dark [style*="background: #fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:#fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background: white"],
.workflow-modal.wf-design-modern.wf-dark [style*="background:white"],
.workflow-modal.wf-design-modern.wf-dark [style*="background-color: #fff"],
.workflow-modal.wf-design-modern.wf-dark [style*="background-color: white"] {
    background: var(--wf-bg-elevated) !important;
}

/* General text color override -- catch-all for hardcoded color:#000 */
.workflow-modal.wf-design-modern.wf-dark [style*="color: #000"],
.workflow-modal.wf-design-modern.wf-dark [style*="color:#000"],
.workflow-modal.wf-design-modern.wf-dark [style*="color: black"],
.workflow-modal.wf-design-modern.wf-dark [style*="color:black"] {
    color: var(--wf-text-primary) !important;
}

/* Tab pane backgrounds */
.workflow-modal.wf-design-modern.wf-dark .tab-content,
.workflow-modal.wf-design-modern.wf-dark .tab-pane {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Table inside modal */
.workflow-modal.wf-design-modern.wf-dark table,
.workflow-modal.wf-design-modern.wf-dark .table {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > thead > tr > th {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > tbody > tr > td {
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .table > tbody > tr:hover > td {
    background: var(--wf-bg-elevated) !important;
}

/* Badge styling */
.workflow-modal.wf-design-modern.wf-dark .badge {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Alert inside modal */
.workflow-modal.wf-design-modern.wf-dark .alert-warning {
    background: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #93C5FD !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .alert-danger {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
    border-color: var(--wf-border) !important;
}

/* Popover from worker config */
.workflow-modal.wf-design-modern.wf-dark .popover {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .popover-title {
    background: var(--wf-bg-sidebar) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

/* Breadcrumbs in worker config */
.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li,
.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li > a {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .breadcrumb > .active {
    color: var(--wf-text-primary) !important;
}

/* Text-muted override */
.workflow-modal.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

/* Generic spans/divs/p with text */
.workflow-modal.wf-design-modern.wf-dark p,
.workflow-modal.wf-design-modern.wf-dark span,
.workflow-modal.wf-design-modern.wf-dark div {
    color: inherit;
}


/* ----------------------------------------------------------------
   13. ADDITIONAL DARK MODE CATCH-ALL OVERRIDES
   Comprehensive fixes for remaining elements with hardcoded colors
   ---------------------------------------------------------------- */

/* Tab content areas — sidebar panels, shapes, viz, inputs, viewers */
div.workflow.wf-design-modern.wf-dark .wf-workers-container,
body.wf-design-modern.wf-dark .wf-workers-container,
div.workflow.wf-design-modern.wf-dark .wf-shapes-container,
body.wf-design-modern.wf-dark .wf-shapes-container,
div.workflow.wf-design-modern.wf-dark .wf-collection-body,
body.wf-design-modern.wf-dark .wf-collection-body,
div.workflow.wf-design-modern.wf-dark .wf-viz-container,
body.wf-design-modern.wf-dark .wf-viz-container,
div.workflow.wf-design-modern.wf-dark .wf-viewers-container,
body.wf-design-modern.wf-dark .wf-viewers-container,
div.workflow.wf-design-modern.wf-dark .wf-io-view,
body.wf-design-modern.wf-dark .wf-io-view,
div.workflow.wf-design-modern.wf-dark .wf-settings-view,
body.wf-design-modern.wf-dark .wf-settings-view,
div.workflow.wf-design-modern.wf-dark .wf-basic-view,
body.wf-design-modern.wf-dark .wf-basic-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Side panel header — used by multiple tab views */
div.workflow.wf-design-modern.wf-dark .wf-side-panel-header h3,
body.wf-design-modern.wf-dark .wf-side-panel-header h3,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-header h4,
body.wf-design-modern.wf-dark .wf-side-panel-header h4,
div.workflow.wf-design-modern.wf-dark .side-panel-title,
body.wf-design-modern.wf-dark .side-panel-title {
    color: var(--wf-text-primary) !important;
}

/* Generic containers with hardcoded white background */
div.workflow.wf-design-modern.wf-dark .plugin-tabs,
body.wf-design-modern.wf-dark .plugin-tabs,
div.workflow.wf-design-modern.wf-dark .plugin-tabs > .tab-pane,
body.wf-design-modern.wf-dark .plugin-tabs > .tab-pane,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-content,
body.wf-design-modern.wf-dark .wf-nav-menu-content {
    background: var(--wf-bg-surface) !important;
}

/* Canvas view toggle tabs */
div.workflow.wf-design-modern.wf-dark .wf-view-toggle .btn,
body.wf-design-modern.wf-dark .wf-view-toggle .btn {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-view-toggle .btn.active,
body.wf-design-modern.wf-dark .wf-view-toggle .btn.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Right-side action toolbars */
div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions .btn,
body.wf-design-modern.wf-dark .full-view .wf-top-actions .btn,
div.workflow.wf-design-modern.wf-dark .full-view .zoom .btn,
body.wf-design-modern.wf-dark .full-view .zoom .btn {
    color: var(--wf-text-secondary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .full-view .wf-top-actions .btn:hover,
body.wf-design-modern.wf-dark .full-view .wf-top-actions .btn:hover,
div.workflow.wf-design-modern.wf-dark .full-view .zoom .btn:hover,
body.wf-design-modern.wf-dark .full-view .zoom .btn:hover {
    color: var(--wf-accent) !important;
    background: var(--wf-accent-light) !important;
}

/* Shapes list — shape cards */
div.workflow.wf-design-modern.wf-dark .wf-shapes-container .shape-item,
body.wf-design-modern.wf-dark .wf-shapes-container .shape-item,
div.workflow.wf-design-modern.wf-dark .shape-item,
body.wf-design-modern.wf-dark .shape-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-shapes-container .shape-item:hover,
body.wf-design-modern.wf-dark .wf-shapes-container .shape-item:hover,
div.workflow.wf-design-modern.wf-dark .shape-item:hover,
body.wf-design-modern.wf-dark .shape-item:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

/* Shape icon backgrounds should be dark-aware */
div.workflow.wf-design-modern.wf-dark .shape-item img,
body.wf-design-modern.wf-dark .shape-item img,
div.workflow.wf-design-modern.wf-dark .shape-item svg,
body.wf-design-modern.wf-dark .shape-item svg {
    filter: invert(0.85);
}

/* Workers panel header (Reload / Done buttons area) */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .workers-header,
body.wf-design-modern.wf-dark .wf-workers-container .workers-header,
div.workflow.wf-design-modern.wf-dark .wf-side-panel-list-container,
body.wf-design-modern.wf-dark .wf-side-panel-list-container {
    background: var(--wf-bg-surface) !important;
}

/* Filter dropdown background fix */
div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu h1,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu h1 {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .filters-list .dropdown-menu label,
body.wf-design-modern.wf-dark .filters-list .dropdown-menu label {
    color: var(--wf-text-secondary) !important;
}

/* Canvas view sub-tabs (Canvas / Timeline / Data) */
div.workflow.wf-design-modern.wf-dark .wf-tabs .nav-pills > li > a,
body.wf-design-modern.wf-dark .wf-tabs .nav-pills > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-tabs .nav-pills > li.active > a,
body.wf-design-modern.wf-dark .wf-tabs .nav-pills > li.active > a {
    background: var(--wf-accent) !important;
    color: white !important;
}

/* Search worker input dark mode */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .input-group,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .input-group {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control::placeholder,
body.wf-design-modern.wf-dark .wf-workers-container .wf-search-worker .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Workers count badge */
div.workflow.wf-design-modern.wf-dark .workers-count,
body.wf-design-modern.wf-dark .workers-count {
    color: var(--wf-text-muted) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* "Run Wizard" button */
div.workflow.wf-design-modern.wf-dark .wf-workers-container .btn-group-justified,
body.wf-design-modern.wf-dark .wf-workers-container .btn-group-justified {
    border-top-color: var(--wf-border) !important;
}

/* Statusbar dark mode */
div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar,
body.wf-design-modern.wf-dark .wf-modern-statusbar {
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-node-count,
body.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-node-count,
div.workflow.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-edge-count,
body.wf-design-modern.wf-dark .wf-modern-statusbar .wf-status-edge-count {
    color: var(--wf-text-secondary) !important;
}

/* Tab footer bar */
div.workflow.wf-design-modern.wf-dark .wf-tab-footer span,
body.wf-design-modern.wf-dark .wf-tab-footer span,
div.workflow.wf-design-modern.wf-dark .wf-tab-footer a,
body.wf-design-modern.wf-dark .wf-tab-footer a {
    color: var(--wf-text-secondary) !important;
}

/* Workflow footer tab bar */
div.workflow.wf-design-modern.wf-dark .wf-footer,
body.wf-design-modern.wf-dark .wf-footer {
    background: var(--wf-bg-surface) !important;
    border-top-color: var(--wf-border) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .footer-tabs-heading > span,
body.wf-design-modern.wf-dark .wf-footer .footer-tabs-heading > span {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .nav-tabs > li > a,
body.wf-design-modern.wf-dark .wf-footer .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-footer .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .wf-footer .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
}

/* Classic graph info (above footer) */
div.workflow.wf-design-modern.wf-dark .wf-graph-info,
body.wf-design-modern.wf-dark .wf-graph-info {
    color: var(--wf-text-muted) !important;
}
div.workflow.wf-design-modern.wf-dark .wf-graph-info a,
body.wf-design-modern.wf-dark .wf-graph-info a {
    color: var(--wf-text-secondary) !important;
}

/* Body-level Select2 dropdowns for dark workflow */
body.wf-dark-active .select2-drop {
    background-color: #1a2744 !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #E2E8F0 !important;
}

body.wf-dark-active .select2-results .select2-result-label {
    color: #E2E8F0 !important;
}

body.wf-dark-active .select2-results .select2-highlighted {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #3B82F6 !important;
}

body.wf-dark-active .select2-search input {
    background-color: #16213e !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    color: #E2E8F0 !important;
}

/* Node info panel (right sidebar when clicking a node) */
div.workflow.wf-design-modern.wf-dark .canvas-node-info,
body.wf-design-modern.wf-dark .canvas-node-info,
div.workflow.wf-design-modern.wf-dark .wf-canvas-node-info,
body.wf-design-modern.wf-dark .wf-canvas-node-info {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic side modal / fullscreen overlays */
div.workflow.wf-design-modern.wf-dark .d3view-side-modal,
body.wf-design-modern.wf-dark .d3view-side-modal {
    background: var(--wf-bg-surface) !important;
}

div.workflow.wf-design-modern.wf-dark .d3view-side-modal .side-modal-header,
body.wf-design-modern.wf-dark .d3view-side-modal .side-modal-header {
    background: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .d3view-side-modal .side-modal-body,
body.wf-design-modern.wf-dark .d3view-side-modal .side-modal-body {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Ancestry view / data view */
div.workflow.wf-design-modern.wf-dark .wf-ancestry-view,
body.wf-design-modern.wf-dark .wf-ancestry-view,
div.workflow.wf-design-modern.wf-dark .wf-data-view,
body.wf-design-modern.wf-dark .wf-data-view,
div.workflow.wf-design-modern.wf-dark .wf-timeline-view,
body.wf-design-modern.wf-dark .wf-timeline-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic icon colors */
div.workflow.wf-design-modern.wf-dark .fa,
body.wf-design-modern.wf-dark .fa,
div.workflow.wf-design-modern.wf-dark .fas,
body.wf-design-modern.wf-dark .fas,
div.workflow.wf-design-modern.wf-dark .far,
body.wf-design-modern.wf-dark .far,
div.workflow.wf-design-modern.wf-dark .fab,
body.wf-design-modern.wf-dark .fab {
    color: inherit;
}

/* Fix header search in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search-outer,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search-outer {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search::placeholder,
body.wf-design-modern.wf-dark .wf-modern-header-search .wf-worker-search::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Separator lines */
div.workflow.wf-design-modern.wf-dark .wf-modern-header-divider,
body.wf-design-modern.wf-dark .wf-modern-header-divider {
    background: var(--wf-border) !important;
}

/* Context menu */
div.workflow.wf-design-modern.wf-dark .pl-context-menu,
body.wf-design-modern.wf-dark .pl-context-menu,
div.workflow.wf-design-modern.wf-dark .context-menu,
body.wf-design-modern.wf-dark .context-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

div.workflow.wf-design-modern.wf-dark .pl-context-menu li a,
body.wf-design-modern.wf-dark .pl-context-menu li a,
div.workflow.wf-design-modern.wf-dark .context-menu li a,
body.wf-design-modern.wf-dark .context-menu li a {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .pl-context-menu li a:hover,
body.wf-design-modern.wf-dark .pl-context-menu li a:hover,
div.workflow.wf-design-modern.wf-dark .context-menu li a:hover,
body.wf-design-modern.wf-dark .context-menu li a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ----------------------------------------------------------------
   14. SIDEBAR CONTENT WRAPPER — CRITICAL DARK FIX
   .wf-nav-menu-wrapper has hardcoded white bg in classic CSS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-pane,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-pane,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-content,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .tab-content {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Sidebar tab headers */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header {
    background: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header h4,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header h4,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-nav-tab-header span {
    color: var(--wf-text-primary) !important;
}

/* Shape items in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-name,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-name {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-info,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item .viz-info {
    color: var(--wf-text-muted) !important;
}

/* Shapes list items in dark mode */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li {
    border-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li:hover,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul#wf-viz-workers li:hover {
    background: var(--wf-accent-light) !important;
    border-color: var(--wf-accent) !important;
}

/* Invert dark shape icons so they're visible on dark bg */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li img,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper ul.wf-shapes li img,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item img,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .viz-list-item img {
    filter: invert(0.85) !important;
}

/* Shapes search input */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-search,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-search,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper input[type="text"],
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper input[type="text"] {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper input::placeholder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper input::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Sidebar toggle and resize handle */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-toggle-sidebar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .pl-toggle-sidebar {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper > .ui-resizable-handle,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper > .ui-resizable-handle {
    background: var(--wf-border) !important;
}

/* Log items in sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item {
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item .timestamp,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-log-item .timestamp {
    color: var(--wf-text-muted) !important;
}

/* Workflow guide panel */
div.workflow.wf-design-modern.wf-dark .wf-guide-panel,
body.wf-design-modern.wf-dark .wf-guide-panel,
div.workflow.wf-design-modern.wf-dark .wf-guide-container,
body.wf-design-modern.wf-dark .wf-guide-container {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Canvas group labels (DOM elements overlaying canvas) */
div.workflow.wf-design-modern.wf-dark .wf-group-label,
body.wf-design-modern.wf-dark .wf-group-label,
div.workflow.wf-design-modern.wf-dark .canvas-group-label,
body.wf-design-modern.wf-dark .canvas-group-label {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border-color: var(--wf-border) !important;
}

/* "Guide me" button dark mode — already styled, but ensure visibility */
div.workflow.wf-design-modern.wf-dark .wf-guide-me-btn,
body.wf-design-modern.wf-dark .wf-guide-me-btn {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}


/* ----------------------------------------------------------------
   15. SETTINGS TAB — FormBuilder white backgrounds
   The Settings tab renders via FormBuilder which has white bg/borders
   ---------------------------------------------------------------- */

/* Settings tab FormBuilder container and sections */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-builder-container,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-builder-container,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-settings-form,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .wf-settings-form,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-formbuilder,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-formbuilder {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Settings tab sidebar — group/folder list (Execution, Appearance, Controls, etc.) */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-list,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-list,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-sidebar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-groups-sidebar,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-3,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-3,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-4,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > .col-md-4,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > [class*="col-"],
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder > .row > [class*="col-"] {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Individual group items in settings sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item:hover,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item:hover {
    background: var(--wf-accent-light) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item.active,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .input-group-item.active,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item.active,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .d3view-inputsBuilder .list-group-item.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* FormBuilder field items */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-name span {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .field-value span {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .help-block,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper li.field-item .help-block {
    color: var(--wf-text-muted) !important;
}

/* FormBuilder form-controls inside settings */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control:focus,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

/* Checkbox / toggle switches */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .onoffswitch-label,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .onoffswitch-label,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .toggle-switch,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .toggle-switch {
    border-color: var(--wf-border) !important;
}

/* Select2 inside settings sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choice,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choice,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choices,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-choices {
    background: var(--wf-bg-elevated) !important;
    background-image: none !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-chosen,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .select2-container .select2-chosen {
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   16. TINYMCE EDITOR — Dark Mode (Docs/Info tab)
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-container,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-container,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-panel,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-panel {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-toolbar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-toolbar,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-menubar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-menubar {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn:hover,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button,
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button span,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-btn button span {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-edit-area,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-edit-area {
    border-color: var(--wf-border) !important;
}

/* TinyMCE iframe body — use JS to apply dark styles since iframe has its own doc */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-content-body,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-content-body {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-statusbar,
body.wf-design-modern.wf-dark .wf-nav-menu-wrapper .mce-statusbar {
    background: var(--wf-bg-sidebar) !important;
    border-top-color: var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   17. DECISION VALIDATION LABELS — Dark Mode
   Canvas-overlaid labels with white bg that bleeds in dark mode
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label,
body.wf-design-modern.wf-dark .wf-decision-validation-label {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-sm) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-content,
body.wf-design-modern.wf-dark .wf-decision-validation-content {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label .fa,
body.wf-design-modern.wf-dark .wf-decision-validation-label .fa,
div.workflow.wf-design-modern.wf-dark .wf-decision-validation-label i,
body.wf-design-modern.wf-dark .wf-decision-validation-label i {
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   18. COMPREHENSIVE CATCH-ALL — Any remaining white backgrounds
   Last resort: override inline style="background: #FFF" etc.
   ---------------------------------------------------------------- */

/* Force dark on any element with inline white background */
div.workflow.wf-design-modern.wf-dark [style*="background: #FFF"],
body.wf-design-modern.wf-dark [style*="background: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background:#FFF"],
body.wf-design-modern.wf-dark [style*="background:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background: #fff"],
body.wf-design-modern.wf-dark [style*="background: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background:#fff"],
body.wf-design-modern.wf-dark [style*="background:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background: white"],
body.wf-design-modern.wf-dark [style*="background: white"],
div.workflow.wf-design-modern.wf-dark [style*="background:white"],
body.wf-design-modern.wf-dark [style*="background:white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #fff"],
body.wf-design-modern.wf-dark [style*="background-color: #fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:#fff"],
body.wf-design-modern.wf-dark [style*="background-color:#fff"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: #FFF"],
body.wf-design-modern.wf-dark [style*="background-color: #FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:#FFF"],
body.wf-design-modern.wf-dark [style*="background-color:#FFF"],
div.workflow.wf-design-modern.wf-dark [style*="background-color: white"],
body.wf-design-modern.wf-dark [style*="background-color: white"],
div.workflow.wf-design-modern.wf-dark [style*="background-color:white"],
body.wf-design-modern.wf-dark [style*="background-color:white"] {
    background: var(--wf-bg-elevated) !important;
}

/* Force light text on elements with inline dark text colors */
div.workflow.wf-design-modern.wf-dark [style*="color: #000"],
body.wf-design-modern.wf-dark [style*="color: #000"],
div.workflow.wf-design-modern.wf-dark [style*="color:#000"],
body.wf-design-modern.wf-dark [style*="color:#000"],
div.workflow.wf-design-modern.wf-dark [style*="color: black"],
body.wf-design-modern.wf-dark [style*="color: black"],
div.workflow.wf-design-modern.wf-dark [style*="color:black"],
body.wf-design-modern.wf-dark [style*="color:black"],
div.workflow.wf-design-modern.wf-dark [style*="color: #333"],
body.wf-design-modern.wf-dark [style*="color: #333"],
div.workflow.wf-design-modern.wf-dark [style*="color:#333"],
body.wf-design-modern.wf-dark [style*="color:#333"],
div.workflow.wf-design-modern.wf-dark [style*="color: #555"],
body.wf-design-modern.wf-dark [style*="color: #555"],
div.workflow.wf-design-modern.wf-dark [style*="color:#555"],
body.wf-design-modern.wf-dark [style*="color:#555"] {
    color: var(--wf-text-primary) !important;
}

/* Force dark borders on elements with inline light borders */
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #DDD"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ddd"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #ccc"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #EEE"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #EEE"],
div.workflow.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #eee"],
body.wf-design-modern.wf-dark [style*="border-bottom: 1px solid #eee"] {
    border-color: var(--wf-border) !important;
}


/* ================================================================
   BODY-LEVEL MODERN DESIGN (structural)
   Applies to BOTH light and dark modern modes.
   Gives body-level modals/sidebars the same modern look as
   the in-workflow ConfigureWfWorkerView (wf-modern-worker-config.css).
   ================================================================ */


/* ----------------------------------------------------------------
   MODAL MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .modal-content,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-content {
    border-radius: var(--wf-r-xl) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border: 1px solid var(--wf-border) !important;
    overflow: hidden;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header,
body.wf-design-modern .d3view-generic-modal-container .d3view-modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header,
div.workflow.wf-design-modern .d3view-generic-modal-container .d3view-modal-header,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    padding: 0 20px !important;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    border-radius: 0 !important;
}

/* Added by shashank2104 on 03/28/2026 at 03:59 PM - Classic pull-right / float:right stacking inside flex modal-header (GenericModalView): first floated control is rightmost; flex row uses DOM order unless we assign order. nth-last-child maps last-in-DOM to lowest order among trailing siblings (leftmost in the right-side cluster). Scoped to d3view-generic-modal-container only. */
body.wf-design-modern .d3view-generic-modal-container .modal-header > .pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > .pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .pull-right,
body.wf-design-modern .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > .btn-group.pull-right,
body.wf-design-modern .d3view-generic-modal-container .modal-header > button.pull-right,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > button.pull-right,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > button.pull-right,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > button.pull-right {
    float: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(1):not(:first-child) {
    order: 2;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(2):not(:first-child) {
    order: 3;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(3):not(:first-child) {
    order: 4;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(4):not(:first-child) {
    order: 5;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(5):not(:first-child) {
    order: 6;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(6):not(:first-child) {
    order: 7;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(7):not(:first-child) {
    order: 8;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(8):not(:first-child) {
    order: 9;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(9):not(:first-child) {
    order: 10;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child),
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header > :nth-last-child(10):not(:first-child) {
    order: 11;
}

body.wf-design-modern .d3view-generic-modal-container .modal-title,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-title,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    line-height: 1.4;
    order: 0 !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header .close,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header .close,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close {
    font-size: 18px !important;
    opacity: 0.5;
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    transition: var(--wf-t-fast);
    margin: 0 !important;
    padding: 0 !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-header .close:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover,
div.workflow.wf-design-modern .d3view-generic-modal-container .modal-header .close:hover,
div.workflow.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover {
    opacity: 1;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-body,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-body {
    padding: 20px !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px !important;
    gap: 8px;
    border-top: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
}

/* Modal footer buttons */
body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn {
    height: 34px;
    padding: 0 16px !important;
    border-radius: var(--wf-r-md) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* btn-default: all locations in modals/sidebars (not just footer) */
body.wf-design-modern .d3view-generic-modal-container .btn-default,
body.wf-design-modern .d3view-plugins-sidebar .btn-default,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
    border: 1px solid var(--wf-border) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:hover {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:focus {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern .d3view-plugins-sidebar .btn-default.active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default.active {
    background: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn-primary,
body.wf-design-modern .d3view-generic-modal-container .modal-footer #apply,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-primary,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer #apply {
    background: var(--wf-accent) !important;
    color: #fff !important;
    border: 1px solid var(--wf-accent) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

body.wf-design-modern .d3view-generic-modal-container .modal-footer .btn-primary:hover,
body.wf-design-modern .d3view-generic-modal-container .modal-footer #apply:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-primary:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer #apply:hover {
    background: var(--wf-accent-hover) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

/* Modal backdrop */
body.wf-design-modern .modal-backdrop,
body.wf-design-modern.wf-dark .modal-backdrop {
    background-color: rgba(15, 23, 42, 0.40) !important;
}


/* ----------------------------------------------------------------
   FORM CONTROLS INSIDE MODERN MODALS/SIDEBARS
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .form-control,
body.wf-design-modern .d3view-plugins-sidebar .form-control,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none !important;
    box-shadow: none !important;
}

body.wf-design-modern .d3view-generic-modal-container textarea.form-control,
body.wf-design-modern .d3view-plugins-sidebar textarea.form-control,
body.wf-design-modern.wf-dark .d3view-generic-modal-container textarea.form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar textarea.form-control {
    height: auto;
    padding: 8px 12px;
    min-height: 64px;
}

body.wf-design-modern .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern .d3view-plugins-sidebar .form-control:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10) !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern .d3view-plugins-sidebar .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control::placeholder {
    color: var(--wf-text-disabled) !important;
}

/* Labels */
body.wf-design-modern .d3view-generic-modal-container label,
body.wf-design-modern .d3view-generic-modal-container .control-label,
body.wf-design-modern .d3view-plugins-sidebar label,
body.wf-design-modern .d3view-plugins-sidebar .control-label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .control-label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .control-label {
    color: var(--wf-text-secondary) !important;
    font-size: 12px;
    font-weight: 500;
}

/* Select2 modern styling */
body.wf-design-modern .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern .d3view-plugins-sidebar .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice {
    height: 36px !important;
    line-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-primary) !important;
    font-size: 13px;
    background-image: none !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern .d3view-plugins-sidebar .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-choices {
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    background: var(--wf-bg-input) !important;
    padding: 4px !important;
    min-height: 36px !important;
    background-image: none !important;
}

body.wf-design-modern .d3view-generic-modal-container .select2-container-multi .select2-search-choice,
body.wf-design-modern .d3view-plugins-sidebar .select2-container-multi .select2-search-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-search-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-search-choice {
    background: var(--wf-accent-light) !important;
    border: 1px solid transparent !important;
    border-radius: var(--wf-r-sm) !important;
    color: var(--wf-accent) !important;
    font-size: 12px;
    padding: 2px 8px !important;
    background-image: none !important;
}

/* Select2 dropdown (body-level) */
body.wf-design-modern .select2-drop,
body.wf-design-modern.wf-dark .select2-drop {
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    margin-top: 4px;
}

body.wf-design-modern .select2-results .select2-result-label,
body.wf-design-modern.wf-dark .select2-results .select2-result-label {
    font-size: 13px;
    padding: 6px 12px !important;
}

body.wf-design-modern .select2-results .select2-highlighted,
body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-radius: var(--wf-r-sm);
}

/* Modern buttons inside modals (not in footer) */
body.wf-design-modern .d3view-generic-modal-container .btn,
body.wf-design-modern .d3view-plugins-sidebar .btn,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn {
    border-radius: var(--wf-r-md) !important;
    transition: var(--wf-t-fast);
    font-weight: 500;
}


/* ----------------------------------------------------------------
   SIDEBAR MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-plugins-sidebar,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar {
    background: var(--wf-bg-surface) !important;
    border-left: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-xl) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    padding: 0 20px !important;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h1 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    flex: 1;
    margin: 0;
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading .close,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close {
    font-size: 18px !important;
    opacity: 0.5;
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-plugins-sidebar .panel-heading .close:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close:hover {
    opacity: 1;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-plugins-sidebar .content-wrapper,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .content-wrapper {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    padding: 16px;
}


/* ----------------------------------------------------------------
   TABLES MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .table,
body.wf-design-modern .d3view-plugins-sidebar .table,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table {
    border-collapse: separate;
    border-spacing: 0;
}

body.wf-design-modern .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern .d3view-plugins-sidebar .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th {
    background: var(--wf-bg-card) !important;
    color: var(--wf-text-secondary) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--wf-border) !important;
}

body.wf-design-modern .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern .d3view-plugins-sidebar .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--wf-border) !important;
    font-size: 13px;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern .d3view-plugins-sidebar .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr:hover > td {
    background: var(--wf-bg-card-hover) !important;
}


/* ----------------------------------------------------------------
   TABS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs {
    border-bottom: 1px solid var(--wf-border) !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a {
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0 !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--wf-text-secondary) !important;
    transition: var(--wf-t-fast);
    border: 1px solid transparent !important;
    padding: 8px 16px !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a:hover {
    background: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern .d3view-plugins-sidebar .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    font-weight: 600;
    border-color: var(--wf-border) var(--wf-border) var(--wf-bg-surface) !important;
}


/* ----------------------------------------------------------------
   PANELS / WELLS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .panel,
body.wf-design-modern .d3view-plugins-sidebar .panel,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel {
    border-radius: var(--wf-r-md) !important;
    border: 1px solid var(--wf-border) !important;
    box-shadow: none !important;
    background: var(--wf-bg-surface) !important;
}

body.wf-design-modern .d3view-generic-modal-container .well,
body.wf-design-modern .d3view-plugins-sidebar .well,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .well,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .well {
    border-radius: var(--wf-r-md) !important;
    border: 1px solid var(--wf-border) !important;
    background: var(--wf-bg-card) !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------------
   LIST GROUPS MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container .list-group-item,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item {
    border-color: var(--wf-border) !important;
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
    padding: 10px 16px !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:first-child,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:first-child,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:first-child,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:first-child {
    border-top-left-radius: var(--wf-r-md) !important;
    border-top-right-radius: var(--wf-r-md) !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:last-child,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:last-child,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:last-child,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:last-child {
    border-bottom-left-radius: var(--wf-r-md) !important;
    border-bottom-right-radius: var(--wf-r-md) !important;
}

body.wf-design-modern .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern .d3view-plugins-sidebar .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:hover {
    background: var(--wf-bg-card-hover) !important;
}


/* ----------------------------------------------------------------
   CONFIRM BOX MODERN STRUCTURE
   ---------------------------------------------------------------- */

body.wf-design-modern .bootbox.modal .modal-content,
body.wf-design-modern.wf-dark .bootbox.modal .modal-content {
    border-radius: var(--wf-r-xl) !important;
    box-shadow: var(--wf-sh-lg) !important;
    overflow: hidden;
}

body.wf-design-modern .bootbox.modal .modal-footer .btn,
body.wf-design-modern.wf-dark .bootbox.modal .modal-footer .btn {
    border-radius: var(--wf-r-md) !important;
    font-weight: 600;
    font-size: 12px;
    height: 34px;
    padding: 0 16px !important;
    transition: var(--wf-t-fast);
}


/* ----------------------------------------------------------------
   SCROLLBAR MODERN STYLING
   ---------------------------------------------------------------- */

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 3px;
}

body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.40);
}


/* ================================================================
   BODY-LEVEL DARK COLOR OVERRIDES
   For modals (GenericModalView) and sidebars (GenericSidebarView)
   appended to <body> outside div.workflow.
   Tokens are available via body.wf-design-modern.wf-dark
   defined in wf-modern-tokens.css.
   ================================================================ */


/* ----------------------------------------------------------------
   MODAL DARK OVERRIDES
   ---------------------------------------------------------------- */

/* Modal backdrop */
body.wf-design-modern.wf-dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.70) !important;
}

/* Modal content container */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-xl) !important;
}

/* Modal header */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .d3view-modal-header {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-title {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header button.close {
    color: var(--wf-text-muted) !important;
    opacity: 0.7;
    text-shadow: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-header .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1;
}

/* Modal body */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Modal footer */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer {
    background-color: var(--wf-bg-elevated) !important;
    border-top: 1px solid var(--wf-border) !important;
}


/* ----------------------------------------------------------------
   SIDEBAR DARK OVERRIDES
   ---------------------------------------------------------------- */

body.wf-design-modern.wf-dark .d3view-plugins-sidebar {
    background-color: var(--wf-bg-surface) !important;
    border-left: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-xl) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h2,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading h3 {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close {
    color: var(--wf-text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-heading .close:hover {
    color: var(--wf-text-primary) !important;
    opacity: 1;
}

body.wf-design-modern.wf-dark .d3view-plugins-sidebar .content-wrapper {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}


/* ----------------------------------------------------------------
   BOOTSTRAP COMPONENTS INSIDE BODY-LEVEL MODALS/SIDEBARS
   ---------------------------------------------------------------- */

/* Panels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-default,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-body,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-heading,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .panel-footer,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-body,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .panel-footer {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Wells */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .well,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .well {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Form controls */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control:focus {
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .form-control::placeholder,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .form-control::placeholder {
    color: var(--wf-text-muted) !important;
}

/* Labels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .control-label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .control-label {
    color: var(--wf-text-secondary) !important;
}

/* Tables */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr > th {
    background-color: transparent !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > thead > tr > th,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > thead > tr > th {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table-striped > tbody > tr:nth-of-type(odd),
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--wf-bg-elevated) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .table > tbody > tr:hover > td,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .table > tbody > tr:hover > td {
    background-color: var(--wf-bg-card-hover) !important;
}

/* List groups */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item:hover {
    background-color: var(--wf-bg-card-hover) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .list-group-item.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .list-group-item.active {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
}

/* Buttons -- all btn-default in dark modals/sidebars (header, body, footer) */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    transition: var(--wf-t-fast);
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:hover,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:hover {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:focus,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:focus {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default:active,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .btn-default.active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default:active,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .btn-default.active,
body.wf-design-modern.wf-dark .bootbox.modal .btn-default:active {
    background-color: var(--wf-bg-card-hover) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .modal-footer .btn-default {
    background-color: var(--wf-bg-card) !important;
}

/* Tabs */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a {
    color: var(--wf-text-secondary) !important;
    border-color: transparent !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .nav-tabs > li.active > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a:focus,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .nav-tabs > li.active > a:hover {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) var(--wf-border) var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .tab-content,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .tab-content {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

/* Select2 */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container-multi .select2-choices,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container-multi .select2-choices {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    background-image: none !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .select2-container .select2-choice .select2-chosen,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .select2-container .select2-choice .select2-chosen {
    color: var(--wf-text-primary) !important;
}

/* Select2 dropdown (appended to body) */
body.wf-design-modern.wf-dark .select2-drop {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .select2-drop .select2-search input {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-result-label {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-highlighted {
    background-color: var(--wf-accent) !important;
    color: #fff !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-result:hover .select2-result-label {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .select2-results .select2-no-results {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-muted) !important;
}

/* Alerts */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert {
    border-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-info,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-info {
    background-color: rgba(59, 130, 246, 0.10) !important;
    color: #93C5FD !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-warning,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning-text) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .alert-danger,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .alert-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger-text) !important;
}

/* Headings and text */
body.wf-design-modern.wf-dark .d3view-generic-modal-container h1,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h2,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h3,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h4,
body.wf-design-modern.wf-dark .d3view-generic-modal-container h5,
body.wf-design-modern.wf-dark .d3view-generic-modal-container p,
body.wf-design-modern.wf-dark .d3view-generic-modal-container span,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h1,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h2,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h3,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h4,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar h5,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar p,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar span {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .text-muted,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .text-muted {
    color: var(--wf-text-muted) !important;
}

/* HR dividers */
body.wf-design-modern.wf-dark .d3view-generic-modal-container hr,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar hr {
    border-color: var(--wf-border) !important;
}

/* Dropdown menus inside modals */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .dropdown-menu > li > a:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .dropdown-menu > li > a:hover {
    background-color: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

/* Input groups */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .input-group-addon,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .input-group-addon {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Checkboxes and radio labels */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .checkbox label,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .radio label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .checkbox label,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .radio label {
    color: var(--wf-text-primary) !important;
}

/* Pagination */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .pagination > li > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .pagination > li > a {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container .pagination > li.active > a,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .pagination > li.active > a {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
}

/* Tooltips (appended to body) */
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border: 1px solid var(--wf-border) !important;
}

/* Popovers (appended to body) */
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    box-shadow: var(--wf-sh-lg) !important;
}

body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-primary) !important;
}

/* Confirm box (Plugins.Helpers.ConfirmBox) */
body.wf-design-modern.wf-dark .bootbox.modal .modal-content {
    background-color: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-header {
    background-color: var(--wf-bg-elevated) !important;
    border-bottom-color: var(--wf-border) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-body {
    background-color: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .bootbox.modal .modal-footer {
    background-color: var(--wf-bg-elevated) !important;
    border-top-color: var(--wf-border) !important;
}

/* Inline style overrides for black text/borders in body-level modals */
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #333"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#333"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #000"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#000"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: black"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:black"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color: #555"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="color:#555"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #333"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#333"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #000"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#000"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: black"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:black"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color: #555"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="color:#555"] {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: #fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:#fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color: #fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color:#fff"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color: white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background-color:white"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background: #FFF"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="background:#FFF"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: #fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:#fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color: #fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color:#fff"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color: white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background-color:white"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background: #FFF"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="background:#FFF"] {
    background-color: var(--wf-bg-surface) !important;
}

body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-generic-modal-container [style*="border-bottom: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border: 1px solid #ccc"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #DDD"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #ddd"],
body.wf-design-modern.wf-dark .d3view-plugins-sidebar [style*="border-bottom: 1px solid #ccc"] {
    border-color: var(--wf-border) !important;
}

/* Generic catch-all for icons */
body.wf-design-modern.wf-dark .d3view-generic-modal-container .fa,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .fa-solid,
body.wf-design-modern.wf-dark .d3view-generic-modal-container .glyphicon,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .fa,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .fa-solid,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar .glyphicon {
    color: inherit !important;
}

/* Scrollbar styling moved to modern structural section above */


/* ================================================================
   DW-2795 — COMPREHENSIVE BOOTSTRAP 3 DARK OVERRIDES
   Covers ALL remaining Bootstrap components for full dark mode
   on the workflow page via body.wf-design-modern.wf-dark
   ================================================================ */

/* ----------------------------------------------------------------
   BUTTONS — All Bootstrap 3 variants
   ---------------------------------------------------------------- */

/* btn base — ensure all buttons pick up dark text */
div.workflow.wf-design-modern.wf-dark .btn,
body.wf-design-modern.wf-dark .btn {
    transition: var(--wf-t-fast);
}

/* btn-primary */
div.workflow.wf-design-modern.wf-dark .btn-primary,
body.wf-design-modern.wf-dark .btn-primary {
    background-color: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-primary:hover,
body.wf-design-modern.wf-dark .btn-primary:hover,
div.workflow.wf-design-modern.wf-dark .btn-primary:focus,
body.wf-design-modern.wf-dark .btn-primary:focus {
    background-color: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-primary:active,
body.wf-design-modern.wf-dark .btn-primary:active,
div.workflow.wf-design-modern.wf-dark .btn-primary.active,
body.wf-design-modern.wf-dark .btn-primary.active {
    background-color: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
}

/* btn-success */
div.workflow.wf-design-modern.wf-dark .btn-success,
body.wf-design-modern.wf-dark .btn-success {
    background-color: var(--wf-success, #10B981) !important;
    border-color: var(--wf-success, #10B981) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-success:hover,
body.wf-design-modern.wf-dark .btn-success:hover,
div.workflow.wf-design-modern.wf-dark .btn-success:focus,
body.wf-design-modern.wf-dark .btn-success:focus {
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* btn-info */
div.workflow.wf-design-modern.wf-dark .btn-info,
body.wf-design-modern.wf-dark .btn-info {
    background-color: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-info:hover,
body.wf-design-modern.wf-dark .btn-info:hover,
div.workflow.wf-design-modern.wf-dark .btn-info:focus,
body.wf-design-modern.wf-dark .btn-info:focus {
    background-color: #0369A1 !important;
    border-color: #0369A1 !important;
}

/* btn-warning */
div.workflow.wf-design-modern.wf-dark .btn-warning,
body.wf-design-modern.wf-dark .btn-warning {
    background-color: var(--wf-warning, #F59E0B) !important;
    border-color: var(--wf-warning, #F59E0B) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-warning:hover,
body.wf-design-modern.wf-dark .btn-warning:hover,
div.workflow.wf-design-modern.wf-dark .btn-warning:focus,
body.wf-design-modern.wf-dark .btn-warning:focus {
    background-color: #D97706 !important;
    border-color: #D97706 !important;
}

/* btn-danger */
div.workflow.wf-design-modern.wf-dark .btn-danger,
body.wf-design-modern.wf-dark .btn-danger {
    background-color: var(--wf-danger, #EF4444) !important;
    border-color: var(--wf-danger, #EF4444) !important;
    color: #fff !important;
}

div.workflow.wf-design-modern.wf-dark .btn-danger:hover,
body.wf-design-modern.wf-dark .btn-danger:hover,
div.workflow.wf-design-modern.wf-dark .btn-danger:focus,
body.wf-design-modern.wf-dark .btn-danger:focus {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}

/* btn-link */
div.workflow.wf-design-modern.wf-dark .btn-link,
body.wf-design-modern.wf-dark .btn-link {
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .btn-link:hover,
body.wf-design-modern.wf-dark .btn-link:hover,
div.workflow.wf-design-modern.wf-dark .btn-link:focus,
body.wf-design-modern.wf-dark .btn-link:focus {
    color: var(--wf-accent-hover) !important;
}

/* btn-group borders */
div.workflow.wf-design-modern.wf-dark .btn-group > .btn + .btn,
body.wf-design-modern.wf-dark .btn-group > .btn + .btn,
div.workflow.wf-design-modern.wf-dark .btn-group > .btn + .dropdown-toggle,
body.wf-design-modern.wf-dark .btn-group > .btn + .dropdown-toggle {
    border-left-color: var(--wf-border) !important;
}

/* Disabled buttons */
div.workflow.wf-design-modern.wf-dark .btn.disabled,
body.wf-design-modern.wf-dark .btn.disabled,
div.workflow.wf-design-modern.wf-dark .btn[disabled],
body.wf-design-modern.wf-dark .btn[disabled] {
    opacity: 0.5;
}

/* ----------------------------------------------------------------
   FORM ELEMENTS — comprehensive coverage
   ---------------------------------------------------------------- */

/* Fieldsets and legends */
div.workflow.wf-design-modern.wf-dark fieldset,
body.wf-design-modern.wf-dark fieldset {
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark legend,
body.wf-design-modern.wf-dark legend {
    color: var(--wf-text-primary) !important;
    border-bottom-color: var(--wf-border) !important;
}

/* Help blocks */
div.workflow.wf-design-modern.wf-dark .help-block,
body.wf-design-modern.wf-dark .help-block {
    color: var(--wf-text-muted) !important;
}

/* Input sizing variants */
div.workflow.wf-design-modern.wf-dark .input-lg,
body.wf-design-modern.wf-dark .input-lg,
div.workflow.wf-design-modern.wf-dark .input-sm,
body.wf-design-modern.wf-dark .input-sm {
    background-color: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* ----------------------------------------------------------------
   NAVIGATION — Navbars, pills, breadcrumbs
   ---------------------------------------------------------------- */

/* Navbar */
div.workflow.wf-design-modern.wf-dark .navbar-default,
body.wf-design-modern.wf-dark .navbar-default {
    background-color: var(--wf-bg-header) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a:hover,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > li > a:hover {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-nav > .active > a,
body.wf-design-modern.wf-dark .navbar-default .navbar-nav > .active > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .navbar-default .navbar-brand,
body.wf-design-modern.wf-dark .navbar-default .navbar-brand {
    color: var(--wf-text-primary) !important;
}

/* Nav pills */
div.workflow.wf-design-modern.wf-dark .nav-pills > li > a,
body.wf-design-modern.wf-dark .nav-pills > li > a {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-pills > li > a:hover,
body.wf-design-modern.wf-dark .nav-pills > li > a:hover {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .nav-pills > li.active > a,
body.wf-design-modern.wf-dark .nav-pills > li.active > a,
div.workflow.wf-design-modern.wf-dark .nav-pills > li.active > a:hover,
body.wf-design-modern.wf-dark .nav-pills > li.active > a:hover {
    background-color: var(--wf-accent) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------
   PROGRESS BARS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .progress,
body.wf-design-modern.wf-dark .progress {
    background-color: var(--wf-bg-input) !important;
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern.wf-dark .progress-bar,
body.wf-design-modern.wf-dark .progress-bar {
    background-color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-success,
body.wf-design-modern.wf-dark .progress-bar-success {
    background-color: var(--wf-success) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-warning,
body.wf-design-modern.wf-dark .progress-bar-warning {
    background-color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern.wf-dark .progress-bar-danger,
body.wf-design-modern.wf-dark .progress-bar-danger {
    background-color: var(--wf-danger) !important;
}

/* ----------------------------------------------------------------
   THUMBNAILS & MEDIA
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .thumbnail,
body.wf-design-modern.wf-dark .thumbnail {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

div.workflow.wf-design-modern.wf-dark .caption,
body.wf-design-modern.wf-dark .caption {
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .media-heading,
body.wf-design-modern.wf-dark .media-heading {
    color: var(--wf-text-primary) !important;
}

/* ----------------------------------------------------------------
   POPOVERS
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .popover,
body.wf-design-modern.wf-dark .popover {
    background-color: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-title,
body.wf-design-modern.wf-dark .popover-title {
    background-color: var(--wf-bg-surface) !important;
    border-bottom-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover-content,
body.wf-design-modern.wf-dark .popover-content {
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.top > .arrow:after,
body.wf-design-modern.wf-dark .popover.top > .arrow:after {
    border-top-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.bottom > .arrow:after,
body.wf-design-modern.wf-dark .popover.bottom > .arrow:after {
    border-bottom-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.left > .arrow:after,
body.wf-design-modern.wf-dark .popover.left > .arrow:after {
    border-left-color: var(--wf-bg-elevated) !important;
}

div.workflow.wf-design-modern.wf-dark .popover.right > .arrow:after,
body.wf-design-modern.wf-dark .popover.right > .arrow:after {
    border-right-color: var(--wf-bg-elevated) !important;
}

/* ----------------------------------------------------------------
   TOOLTIPS (comprehensive)
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .tooltip .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip .tooltip-inner {
    background-color: var(--wf-bg-elevated) !important;
    color: var(--wf-text-primary) !important;
    border: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-md);
}

/* ----------------------------------------------------------------
   ACCORDION / COLLAPSE
   ---------------------------------------------------------------- */

div.workflow.wf-design-modern.wf-dark .panel-group .panel + .panel,
body.wf-design-modern.wf-dark .panel-group .panel + .panel {
    margin-top: 0;
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern.wf-dark .panel-group .panel-heading + .panel-collapse > .panel-body,
body.wf-design-modern.wf-dark .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top-color: var(--wf-border) !important;
}

/* ----------------------------------------------------------------
   BODY BACKGROUND — ensure full page dark when active
   ---------------------------------------------------------------- */

body.wf-design-modern.wf-dark {
    background-color: var(--wf-bg-canvas) !important;
    color: var(--wf-text-primary) !important;
}

/* Generic text color overrides on body level */
body.wf-design-modern.wf-dark h1,
body.wf-design-modern.wf-dark h2,
body.wf-design-modern.wf-dark h3,
body.wf-design-modern.wf-dark h4,
body.wf-design-modern.wf-dark h5,
body.wf-design-modern.wf-dark h6 {
    color: var(--wf-text-primary) !important;
}

body.wf-design-modern.wf-dark p,
body.wf-design-modern.wf-dark span,
body.wf-design-modern.wf-dark label {
    color: var(--wf-text-primary);
}

body.wf-design-modern.wf-dark a {
    color: var(--wf-accent);
}

body.wf-design-modern.wf-dark a:hover {
    color: var(--wf-accent-hover);
}

body.wf-design-modern.wf-dark hr {
    border-top-color: var(--wf-border) !important;
}

/* ----------------------------------------------------------------
   MODERN (LIGHT) BODY-LEVEL OVERRIDES
   Ensure the modern light theme also styles page-level elements
   ---------------------------------------------------------------- */

body.wf-design-modern:not(.wf-dark) {
    background-color: var(--wf-bg-canvas, #F8FAFC) !important;
}

/* ================================================================
   MODERN .btn — ALL Bootstrap 3 button variants (light + dark)
   Polished, consistent styling matching #apply / modal footer pattern
   ================================================================ */

/* ---- Base btn ---- */
div.workflow.wf-design-modern .btn,
body.wf-design-modern .btn {
    border-radius: var(--wf-r-sm) !important;
    transition: var(--wf-t-fast) !important;
    font-weight: 500;
}

div.workflow.wf-design-modern .btn:focus,
body.wf-design-modern .btn:focus {
    box-shadow: 0 0 0 3px var(--wf-accent-light) !important;
    outline: none !important;
}

/* ---- btn-default (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-default:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default:not(.is-active) {
    background-color: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-default:hover:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default:hover:not(.is-active) {
    background-color: var(--wf-n-100) !important;
    border-color: var(--wf-border-strong) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-default:active,
body.wf-design-modern:not(.wf-dark) .btn-default:active:not(.is-active),
div.workflow.wf-design-modern:not(.wf-dark) .btn-default.active:not(.is-active),
body.wf-design-modern:not(.wf-dark) .btn-default.active:not(.is-active) {
    background-color: var(--wf-n-200) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ---- btn-primary (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-primary,
body.wf-design-modern:not(.wf-dark) .btn-primary {
    background: var(--wf-accent) !important;
    border-color: var(--wf-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-primary:hover,
body.wf-design-modern:not(.wf-dark) .btn-primary:hover {
    background: var(--wf-accent-hover) !important;
    border-color: var(--wf-accent-hover) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-primary:active,
body.wf-design-modern:not(.wf-dark) .btn-primary:active {
    background: #1D4ED8 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-success (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-success,
body.wf-design-modern:not(.wf-dark) .btn-success {
    background: var(--wf-success, #10B981) !important;
    border-color: var(--wf-success, #10B981) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-success:hover,
body.wf-design-modern:not(.wf-dark) .btn-success:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-success:active,
body.wf-design-modern:not(.wf-dark) .btn-success:active {
    background: #047857 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-info (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-info,
body.wf-design-modern:not(.wf-dark) .btn-info {
    background: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-info:hover,
body.wf-design-modern:not(.wf-dark) .btn-info:hover {
    background: #0369A1 !important;
    border-color: #0369A1 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-info:active,
body.wf-design-modern:not(.wf-dark) .btn-info:active {
    background: #075985 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-warning (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-warning,
body.wf-design-modern:not(.wf-dark) .btn-warning {
    background: var(--wf-warning, #F59E0B) !important;
    border-color: var(--wf-warning, #F59E0B) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-warning:hover,
body.wf-design-modern:not(.wf-dark) .btn-warning:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-warning:active,
body.wf-design-modern:not(.wf-dark) .btn-warning:active {
    background: #B45309 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-danger (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-danger,
body.wf-design-modern:not(.wf-dark) .btn-danger {
    background: var(--wf-danger, #EF4444) !important;
    border-color: var(--wf-danger, #EF4444) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-danger:hover,
body.wf-design-modern:not(.wf-dark) .btn-danger:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-danger:active,
body.wf-design-modern:not(.wf-dark) .btn-danger:active {
    background: #B91C1C !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ---- btn-link (modern light) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-link,
body.wf-design-modern:not(.wf-dark) .btn-link {
    color: var(--wf-accent) !important;
    text-decoration: none !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-link:hover,
body.wf-design-modern:not(.wf-dark) .btn-link:hover {
    color: var(--wf-accent-hover) !important;
    text-decoration: underline !important;
}

/* ---- btn-outline-on-hover (modern light — polish the existing class) ---- */
div.workflow.wf-design-modern:not(.wf-dark) .btn-outline-on-hover,
body.wf-design-modern:not(.wf-dark) .btn-outline-on-hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern:not(.wf-dark) .btn-outline-on-hover:hover,
body.wf-design-modern:not(.wf-dark) .btn-outline-on-hover:hover {
    background: var(--wf-n-100) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- Dark btn enhancements — add box-shadows matching #apply pattern ---- */
div.workflow.wf-design-modern.wf-dark .btn-primary,
body.wf-design-modern.wf-dark .btn-primary {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-primary:hover,
body.wf-design-modern.wf-dark .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-success,
body.wf-design-modern.wf-dark .btn-success {
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-success:hover,
body.wf-design-modern.wf-dark .btn-success:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-info,
body.wf-design-modern.wf-dark .btn-info {
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-danger,
body.wf-design-modern.wf-dark .btn-danger {
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

div.workflow.wf-design-modern.wf-dark .btn-danger:hover,
body.wf-design-modern.wf-dark .btn-danger:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}

div.workflow.wf-design-modern.wf-dark .btn-warning,
body.wf-design-modern.wf-dark .btn-warning {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* ====================================================================
   COMPREHENSIVE HTML SELECTOR COVERAGE — Modern Light + Dark
   Added to ensure every HTML element within div.workflow and body-level
   elements gets proper modern theme styling.
   ==================================================================== */

/* -------------------------------------------------------------------
   SECTION: Typography & Text Elements
   ------------------------------------------------------------------- */

/* h6 (h1-h5 already covered above) */
div.workflow.wf-design-modern h6,
body.wf-design-modern h6 {
    color: var(--wf-text-primary);
}

/* Paragraphs */
div.workflow.wf-design-modern p,
body.wf-design-modern p {
    color: var(--wf-text-primary);
    margin-bottom: 8px;
}

/* Links */
div.workflow.wf-design-modern a,
body.wf-design-modern a {
    color: var(--wf-accent);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern a:hover,
body.wf-design-modern a:hover {
    color: var(--wf-accent-hover);
}

div.workflow.wf-design-modern a:active,
body.wf-design-modern a:active {
    color: var(--wf-accent);
    opacity: 0.85;
}

/* Inline text elements */
div.workflow.wf-design-modern small,
body.wf-design-modern small {
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern strong,
body.wf-design-modern strong {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern em,
body.wf-design-modern em {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern mark,
body.wf-design-modern mark {
    background-color: var(--wf-warning-bg);
    color: var(--wf-text-primary);
    padding: 1px 4px;
    border-radius: var(--wf-r-sm);
}

div.workflow.wf-design-modern del,
body.wf-design-modern del {
    color: var(--wf-text-muted);
    text-decoration: line-through;
}

div.workflow.wf-design-modern ins,
body.wf-design-modern ins {
    color: var(--wf-success);
    text-decoration: underline;
}

div.workflow.wf-design-modern sub,
div.workflow.wf-design-modern sup,
body.wf-design-modern sub,
body.wf-design-modern sup {
    color: var(--wf-text-secondary);
}

/* Blockquote */
div.workflow.wf-design-modern blockquote,
body.wf-design-modern blockquote {
    border-left: 4px solid var(--wf-accent);
    padding: 12px 16px;
    margin: 12px 0;
    background: var(--wf-bg-card);
    color: var(--wf-text-secondary);
    border-radius: 0 var(--wf-r-md) var(--wf-r-md) 0;
}

div.workflow.wf-design-modern blockquote p,
body.wf-design-modern blockquote p {
    margin-bottom: 0;
}

/* Code / Pre / Kbd / Samp */
div.workflow.wf-design-modern pre,
body.wf-design-modern pre {
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 12px 16px;
    font-size: var(--wf-fs-sm);
}

div.workflow.wf-design-modern code,
body.wf-design-modern code {
    background: var(--wf-bg-input);
    color: var(--wf-danger);
    border-radius: var(--wf-r-sm);
    padding: 2px 6px;
    font-size: 90%;
    border: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern pre code,
body.wf-design-modern pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

div.workflow.wf-design-modern kbd,
body.wf-design-modern kbd {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border-strong);
    border-radius: var(--wf-r-sm);
    padding: 2px 6px;
    font-size: 90%;
    box-shadow: 0 1px 0 var(--wf-border);
}

div.workflow.wf-design-modern samp,
body.wf-design-modern samp {
    color: var(--wf-text-primary);
    font-family: monospace;
}

/* Abbreviation */
div.workflow.wf-design-modern abbr[title],
body.wf-design-modern abbr[title] {
    border-bottom: 1px dotted var(--wf-text-muted);
    cursor: help;
}

/* Horizontal rule */
div.workflow.wf-design-modern hr,
body.wf-design-modern hr {
    border-top: 1px solid var(--wf-border);
    margin: 16px 0;
}

/* -------------------------------------------------------------------
   SECTION: Lists
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ul,
div.workflow.wf-design-modern ol,
body.wf-design-modern ul,
body.wf-design-modern ol {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern li,
body.wf-design-modern li {
    color: var(--wf-text-primary);
    line-height: 1.6;
}

div.workflow.wf-design-modern dl,
body.wf-design-modern dl {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern dt,
body.wf-design-modern dt {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern dd,
body.wf-design-modern dd {
    color: var(--wf-text-secondary);
    margin-left: 20px;
}

/* -------------------------------------------------------------------
   SECTION: Tables (enhanced — striped, bordered, condensed, caption)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .table-striped > tbody > tr:nth-child(odd),
body.wf-design-modern .table-striped > tbody > tr:nth-child(odd) {
    background-color: var(--wf-bg-card);
}

div.workflow.wf-design-modern .table-bordered,
body.wf-design-modern .table-bordered {
    border-color: var(--wf-border);
}

div.workflow.wf-design-modern .table-bordered > thead > tr > th,
div.workflow.wf-design-modern .table-bordered > thead > tr > td,
div.workflow.wf-design-modern .table-bordered > tbody > tr > th,
div.workflow.wf-design-modern .table-bordered > tbody > tr > td,
div.workflow.wf-design-modern .table-bordered > tfoot > tr > th,
div.workflow.wf-design-modern .table-bordered > tfoot > tr > td,
body.wf-design-modern .table-bordered > thead > tr > th,
body.wf-design-modern .table-bordered > thead > tr > td,
body.wf-design-modern .table-bordered > tbody > tr > th,
body.wf-design-modern .table-bordered > tbody > tr > td,
body.wf-design-modern .table-bordered > tfoot > tr > th,
body.wf-design-modern .table-bordered > tfoot > tr > td {
    border-color: var(--wf-border);
}

div.workflow.wf-design-modern .table-condensed > thead > tr > th,
div.workflow.wf-design-modern .table-condensed > thead > tr > td,
div.workflow.wf-design-modern .table-condensed > tbody > tr > th,
div.workflow.wf-design-modern .table-condensed > tbody > tr > td,
body.wf-design-modern .table-condensed > thead > tr > th,
body.wf-design-modern .table-condensed > thead > tr > td,
body.wf-design-modern .table-condensed > tbody > tr > th,
body.wf-design-modern .table-condensed > tbody > tr > td {
    padding: 4px 8px;
}

div.workflow.wf-design-modern caption,
body.wf-design-modern caption {
    color: var(--wf-text-muted);
    padding: 8px 0;
}

div.workflow.wf-design-modern tfoot > tr > td,
div.workflow.wf-design-modern tfoot > tr > th,
body.wf-design-modern tfoot > tr > td,
body.wf-design-modern tfoot > tr > th {
    color: var(--wf-text-secondary);
    border-top: 2px solid var(--wf-border);
    background-color: var(--wf-bg-card);
}

/* -------------------------------------------------------------------
   SECTION: Forms (enhanced — validation states, checkbox/radio, file, range)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .radio label,
div.workflow.wf-design-modern .checkbox label,
body.wf-design-modern .radio label,
body.wf-design-modern .checkbox label {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .radio-inline,
div.workflow.wf-design-modern .checkbox-inline,
body.wf-design-modern .radio-inline,
body.wf-design-modern .checkbox-inline {
    color: var(--wf-text-primary);
}

/* Validation states */
div.workflow.wf-design-modern .has-error .form-control,
body.wf-design-modern .has-error .form-control {
    border-color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .has-error .control-label,
div.workflow.wf-design-modern .has-error .help-block,
body.wf-design-modern .has-error .control-label,
body.wf-design-modern .has-error .help-block {
    color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .has-warning .form-control,
body.wf-design-modern .has-warning .form-control {
    border-color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .has-warning .control-label,
div.workflow.wf-design-modern .has-warning .help-block,
body.wf-design-modern .has-warning .control-label,
body.wf-design-modern .has-warning .help-block {
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .has-success .form-control,
body.wf-design-modern .has-success .form-control {
    border-color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .has-success .control-label,
div.workflow.wf-design-modern .has-success .help-block,
body.wf-design-modern .has-success .control-label,
body.wf-design-modern .has-success .help-block {
    color: var(--wf-success) !important;
}

/* Input group */
div.workflow.wf-design-modern .input-group,
body.wf-design-modern .input-group {
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .input-group-btn .btn,
body.wf-design-modern .input-group-btn .btn {
    border-color: var(--wf-border);
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .input-group-btn .btn:hover,
body.wf-design-modern .input-group-btn .btn:hover {
    background: var(--wf-bg-card-hover);
}

/* Form group */
div.workflow.wf-design-modern .form-group,
body.wf-design-modern .form-group {
    margin-bottom: 12px;
}
div.workflow.wf-design-modern .editableform .form-group,
body.wf-design-modern .editableform .form-group {
    margin-bottom: 0px!important;
}

div.workflow.wf-design-modern .form-horizontal .control-label,
body.wf-design-modern .form-horizontal .control-label {
    color: var(--wf-text-primary);
}

/* Checkbox and radio accent */
div.workflow.wf-design-modern input[type="checkbox"],
div.workflow.wf-design-modern input[type="radio"],
body.wf-design-modern input[type="checkbox"],
body.wf-design-modern input[type="radio"] {
    accent-color: var(--wf-accent);
}

/* Range input */
div.workflow.wf-design-modern input[type="range"],
body.wf-design-modern input[type="range"] {
    accent-color: var(--wf-accent);
}

/* File input */
div.workflow.wf-design-modern input[type="file"],
body.wf-design-modern input[type="file"] {
    color: var(--wf-text-primary);
}

/* Placeholder */
div.workflow.wf-design-modern ::placeholder,
body.wf-design-modern ::placeholder {
    color: var(--wf-text-muted) !important;
    opacity: 1;
}

/* Multi-select */
div.workflow.wf-design-modern select[multiple],
body.wf-design-modern select[multiple] {
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Panels
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .panel,
body.wf-design-modern .panel {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-sm);
}

div.workflow.wf-design-modern .panel-heading,
body.wf-design-modern .panel-heading {
    background-color: var(--wf-bg-card);
    border-bottom-color: var(--wf-border);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0;
}

div.workflow.wf-design-modern .panel-title,
body.wf-design-modern .panel-title {
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern .panel-body,
body.wf-design-modern .panel-body {
    background-color: var(--wf-bg-surface);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .panel-footer,
body.wf-design-modern .panel-footer {
    background-color: var(--wf-bg-card);
    border-top-color: var(--wf-border);
    border-radius: 0 0 var(--wf-r-md) var(--wf-r-md);
}

div.workflow.wf-design-modern .panel-default > .panel-heading,
body.wf-design-modern .panel-default > .panel-heading {
    background-color: var(--wf-bg-card);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .panel-primary > .panel-heading,
body.wf-design-modern .panel-primary > .panel-heading {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Wells, Badges, Labels
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .well,
body.wf-design-modern .well {
    background-color: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .badge,
body.wf-design-modern .badge {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
    font-weight: 600;
    border-radius: var(--wf-r-full);
}

div.workflow.wf-design-modern .label-default,
body.wf-design-modern .label-default {
    background-color: var(--wf-n-200);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .label-primary,
body.wf-design-modern .label-primary {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .label-success,
body.wf-design-modern .label-success {
    background-color: var(--wf-success);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-info,
body.wf-design-modern .label-info {
    background-color: var(--wf-info);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-warning,
body.wf-design-modern .label-warning {
    background-color: var(--wf-warning);
    color: #fff!important;
}

div.workflow.wf-design-modern .label-danger,
body.wf-design-modern .label-danger {
    background-color: var(--wf-danger);
    color: #fff!important;
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — List Groups
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .list-group,
body.wf-design-modern .list-group {
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .list-group-item,
body.wf-design-modern .list-group-item {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .list-group-item:hover,
body.wf-design-modern .list-group-item:hover {
    background-color: var(--wf-bg-card-hover);
}

div.workflow.wf-design-modern .list-group-item.active,
div.workflow.wf-design-modern .list-group-item.active:hover,
body.wf-design-modern .list-group-item.active,
body.wf-design-modern .list-group-item.active:hover {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .list-group-item.disabled,
body.wf-design-modern .list-group-item.disabled {
    background-color: var(--wf-bg-card);
    color: var(--wf-text-disabled);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Breadcrumb, Pagination, Pager
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .breadcrumb,
body.wf-design-modern .breadcrumb {
    background-color: var(--wf-bg-card);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern .breadcrumb > .active,
body.wf-design-modern .breadcrumb > .active {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .breadcrumb > li + li::before,
body.wf-design-modern .breadcrumb > li + li::before {
    color: var(--wf-text-muted);
}

div.workflow.wf-design-modern .pagination > li > a,
div.workflow.wf-design-modern .pagination > li > span,
body.wf-design-modern .pagination > li > a,
body.wf-design-modern .pagination > li > span {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-accent);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .pagination > li > a:hover,
body.wf-design-modern .pagination > li > a:hover {
    background-color: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-accent-hover);
}

div.workflow.wf-design-modern .pagination > .active > a,
div.workflow.wf-design-modern .pagination > .active > span,
body.wf-design-modern .pagination > .active > a,
body.wf-design-modern .pagination > .active > span {
    background-color: var(--wf-accent);
    border-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

div.workflow.wf-design-modern .pagination > .disabled > a,
div.workflow.wf-design-modern .pagination > .disabled > span,
body.wf-design-modern .pagination > .disabled > a,
body.wf-design-modern .pagination > .disabled > span {
    background-color: var(--wf-bg-card);
    border-color: var(--wf-border);
    color: var(--wf-text-disabled);
}

div.workflow.wf-design-modern .pager > li > a,
body.wf-design-modern .pager > li > a {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    color: var(--wf-accent);
    border-radius: var(--wf-r-full);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .pager > li > a:hover,
body.wf-design-modern .pager > li > a:hover {
    background-color: var(--wf-bg-card-hover);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Thumbnail, Jumbotron, Media
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .thumbnail,
body.wf-design-modern .thumbnail {
    background-color: var(--wf-bg-surface);
    border-color: var(--wf-border);
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .jumbotron,
body.wf-design-modern .jumbotron {
    background-color: var(--wf-bg-card);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-lg);
}

div.workflow.wf-design-modern .media-body,
body.wf-design-modern .media-body {
    color: var(--wf-text-primary);
}

/* -------------------------------------------------------------------
   SECTION: Bootstrap Components — Popover, Tooltip
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .popover,
body.wf-design-modern .popover {
    background-color: var(--wf-bg-elevated);
    border-color: var(--wf-border);
    box-shadow: var(--wf-sh-lg);
    border-radius: var(--wf-r-md);
}

div.workflow.wf-design-modern .popover-title,
body.wf-design-modern .popover-title {
    background-color: var(--wf-bg-card);
    border-bottom-color: var(--wf-border);
    color: var(--wf-text-primary);
    font-weight: 600;
}

div.workflow.wf-design-modern .popover-content,
body.wf-design-modern .popover-content {
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .tooltip-inner,
body.wf-design-modern .tooltip-inner {
    background-color: var(--wf-n-800);
    color: #fff;
    border-radius: var(--wf-r-sm);
    font-size: var(--wf-fs-xs);
}

div.workflow.wf-design-modern .tooltip.top .tooltip-arrow,
body.wf-design-modern .tooltip.top .tooltip-arrow {
    border-top-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.bottom .tooltip-arrow,
body.wf-design-modern .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.left .tooltip-arrow,
body.wf-design-modern .tooltip.left .tooltip-arrow {
    border-left-color: var(--wf-n-800);
}

div.workflow.wf-design-modern .tooltip.right .tooltip-arrow,
body.wf-design-modern .tooltip.right .tooltip-arrow {
    border-right-color: var(--wf-n-800);
}

/* -------------------------------------------------------------------
   SECTION: Utility Classes — Text & Background Colors
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern .text-muted,
body.wf-design-modern .text-muted {
    color: var(--wf-text-muted) !important;
}

div.workflow.wf-design-modern .text-primary,
body.wf-design-modern .text-primary {
    color: var(--wf-accent) !important;
}

div.workflow.wf-design-modern .text-success,
body.wf-design-modern .text-success {
    color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .text-info,
body.wf-design-modern .text-info {
    color: var(--wf-info) !important;
}

div.workflow.wf-design-modern .text-warning,
body.wf-design-modern .text-warning {
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .text-danger,
body.wf-design-modern .text-danger {
    color: var(--wf-danger) !important;
}

div.workflow.wf-design-modern .bg-primary,
body.wf-design-modern .bg-primary {
    background-color: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

div.workflow.wf-design-modern .bg-success,
body.wf-design-modern .bg-success {
    background-color: var(--wf-success-bg) !important;
    color: var(--wf-success) !important;
}

div.workflow.wf-design-modern .bg-info,
body.wf-design-modern .bg-info {
    background-color: var(--wf-info-bg) !important;
    color: var(--wf-info) !important;
}

div.workflow.wf-design-modern .bg-warning,
body.wf-design-modern .bg-warning {
    background-color: var(--wf-warning-bg) !important;
    color: var(--wf-warning) !important;
}

div.workflow.wf-design-modern .bg-danger,
body.wf-design-modern .bg-danger {
    background-color: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}

/* Caret */
div.workflow.wf-design-modern .caret,
body.wf-design-modern .caret {
    border-top-color: var(--wf-text-secondary);
}

/* Close button (generic, not just modal) */
div.workflow.wf-design-modern .close,
body.wf-design-modern .close {
    color: var(--wf-text-muted);
    text-shadow: none;
    opacity: 0.6;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .close:hover,
body.wf-design-modern .close:hover {
    color: var(--wf-text-primary);
    opacity: 1;
}

/* -------------------------------------------------------------------
   SECTION: Scrollbar Styling
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ::-webkit-scrollbar,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div.workflow.wf-design-modern ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-track,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

div.workflow.wf-design-modern ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: var(--wf-n-300);
    border-radius: var(--wf-r-full);
}

div.workflow.wf-design-modern ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-n-400);
}

/* Dark scrollbar */
div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb {
    background: var(--wf-n-600);
}

div.workflow.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-generic-modal-container ::-webkit-scrollbar-thumb:hover,
body.wf-design-modern.wf-dark .d3view-plugins-sidebar ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-n-500);
}

/* -------------------------------------------------------------------
   SECTION: Selection & Focus
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern ::selection,
body.wf-design-modern ::selection {
    background: rgba(59, 130, 246, 0.25);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern.wf-dark ::selection,
body.wf-design-modern.wf-dark ::selection {
    background: rgba(96, 165, 250, 0.30);
}

/* Focus-visible: subtle ring, not heavy outline */
div.workflow.wf-design-modern *:focus-visible,
body.wf-design-modern *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--wf-bg-surface), 0 0 0 4px rgba(59, 130, 246, 0.35);
}

/* Inputs/textareas/selects: use border glow instead of box-shadow ring */
div.workflow.wf-design-modern input:focus,
div.workflow.wf-design-modern textarea:focus,
div.workflow.wf-design-modern select:focus,
div.workflow.wf-design-modern .form-control:focus,
body.wf-design-modern input:focus,
body.wf-design-modern textarea:focus,
body.wf-design-modern select:focus,
body.wf-design-modern .form-control:focus {
    outline: none !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

div.workflow.wf-design-modern.wf-dark input:focus,
div.workflow.wf-design-modern.wf-dark textarea:focus,
div.workflow.wf-design-modern.wf-dark select:focus,
div.workflow.wf-design-modern.wf-dark .form-control:focus,
body.wf-design-modern.wf-dark input:focus,
body.wf-design-modern.wf-dark textarea:focus,
body.wf-design-modern.wf-dark select:focus,
body.wf-design-modern.wf-dark .form-control:focus {
    outline: none !important;
    border-color: var(--wf-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}

/* -------------------------------------------------------------------
   SECTION: Images & Media
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern figure,
body.wf-design-modern figure {
    margin: 0;
}

div.workflow.wf-design-modern figcaption,
body.wf-design-modern figcaption {
    color: var(--wf-text-muted);
    font-size: var(--wf-fs-sm);
    margin-top: 4px;
}

/* -------------------------------------------------------------------
   SECTION: Interactive Elements — Details / Summary
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern details,
body.wf-design-modern details {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 8px 12px;
    background: var(--wf-bg-card);
}

div.workflow.wf-design-modern details[open],
body.wf-design-modern details[open] {
    padding-bottom: 12px;
}

div.workflow.wf-design-modern summary,
body.wf-design-modern summary {
    color: var(--wf-text-primary);
    cursor: pointer;
    font-weight: 600;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern summary:hover,
body.wf-design-modern summary:hover {
    color: var(--wf-accent);
}

/* -------------------------------------------------------------------
   SECTION: Nav-pills (enhanced — already have basic dark, add light)
   ------------------------------------------------------------------- */

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li > a,
body.wf-design-modern:not(.wf-dark) .nav-pills > li > a {
    color: var(--wf-text-secondary);
    border-radius: var(--wf-r-md);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li > a:hover,
body.wf-design-modern:not(.wf-dark) .nav-pills > li > a:hover {
    background-color: var(--wf-bg-card-hover);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a,
div.workflow.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a:hover,
body.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a,
body.wf-design-modern:not(.wf-dark) .nav-pills > li.active > a:hover {
    background-color: var(--wf-accent);
    color: var(--wf-text-inverse);
}

/* -------------------------------------------------------------------
   SECTION: Dark-Only Overrides (only for hardcoded values that tokens
   can't handle — inverted tooltips, specific dark colors, etc.)
   ------------------------------------------------------------------- */

/* Dark code — hardcoded red for syntax, not token-based */
div.workflow.wf-design-modern.wf-dark code,
body.wf-design-modern.wf-dark code {
    color: #F87171;
}

/* Dark label-default — needs specific neutral shades */
div.workflow.wf-design-modern.wf-dark .label-default,
body.wf-design-modern.wf-dark .label-default {
    background-color: var(--wf-n-700);
    color: var(--wf-n-200);
}

/* Dark mark — hardcoded translucent orange */
div.workflow.wf-design-modern.wf-dark mark,
body.wf-design-modern.wf-dark mark {
    background-color: rgba(245, 158, 11, 0.20);
    color: var(--wf-warning-text);
}

/* Dark tooltip — inverted (light bg, dark text) for contrast */
div.workflow.wf-design-modern.wf-dark .tooltip-inner,
body.wf-design-modern.wf-dark .tooltip-inner {
    background-color: var(--wf-n-100);
    color: var(--wf-n-900);
}

div.workflow.wf-design-modern.wf-dark .tooltip.top .tooltip-arrow,
body.wf-design-modern.wf-dark .tooltip.top .tooltip-arrow {
    border-top-color: var(--wf-n-100);
}

div.workflow.wf-design-modern.wf-dark .tooltip.bottom .tooltip-arrow,
body.wf-design-modern.wf-dark .tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--wf-n-100);
}

/* ----------------------------------------------------------------
   Flash messages — modern styling (light + dark)
   ---------------------------------------------------------------- */
body.wf-design-modern #flash {
    width: 480px;
    margin-left: -240px;
}

body.wf-design-modern #flash .flash_message {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 40px 12px 16px;
}

body.wf-design-modern #flash .flash_message .close {
    color: inherit;
    opacity: 0.6;
    font-size: 16px;
    top: 2px;
    right: 4px;
}

body.wf-design-modern #flash .flash_message .close:hover {
    opacity: 1;
}

body.wf-design-modern #flash .flash_message.alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

body.wf-design-modern #flash .flash_message.alert-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

body.wf-design-modern #flash .flash_message.alert-warning {
    background: #fefce8;
    border: 1px solid #fef08a;
    color: #a16207;
}

body.wf-design-modern #flash .flash_message.alert-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

/* Dark mode overrides */
body.wf-design-modern.wf-dark #flash .flash_message {
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-warning {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.3);
    color: #fde047;
}

body.wf-design-modern.wf-dark #flash .flash_message.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* ============================================================
   R0-3663 - Workers palette (WorkerPaletteView, .wl2-* family) dark theme.
   workflow-palette.css hardcodes light colors and has zero dark handling, so the
   modern Workers tab rendered fully light in dark mode. Override the .wl2-* surfaces,
   text, borders and group headers with the --wf-* dark tokens (alias to --d3v-*).
   ============================================================ */
div.workflow.wf-design-modern.wf-dark .wl2-panel,
body.wf-design-modern.wf-dark .wl2-panel {
    background: var(--wf-bg-surface, #1e242c);
}
div.workflow.wf-design-modern.wf-dark .wl2-ph,
body.wf-design-modern.wf-dark .wl2-ph {
    border-bottom-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-ph .wl2-h3,
body.wf-design-modern.wf-dark .wl2-ph .wl2-h3 {
    color: var(--wf-text-primary, #e6e9ee);
}
div.workflow.wf-design-modern.wf-dark .wl2-searchbar,
body.wf-design-modern.wf-dark .wl2-searchbar {
    background: var(--wf-bg-input, #161b21);
    border-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-search,
body.wf-design-modern.wf-dark .wl2-search {
    background: transparent;
    color: var(--wf-text-primary, #e6e9ee);
}
div.workflow.wf-design-modern.wf-dark .wl2-search::placeholder,
body.wf-design-modern.wf-dark .wl2-search::placeholder {
    color: var(--wf-text-muted, #8a929c);
}
div.workflow.wf-design-modern.wf-dark .wl2-count,
body.wf-design-modern.wf-dark .wl2-count,
div.workflow.wf-design-modern.wf-dark .wl2-empty,
body.wf-design-modern.wf-dark .wl2-empty {
    color: var(--wf-text-muted, #8a929c);
}
div.workflow.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-row,
body.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-row {
    background: var(--wf-bg-card, #20262e);
    border-bottom-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-row:hover,
body.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-row:hover {
    background: var(--wf-bg-card-hover, #2a313a);
}
div.workflow.wf-design-modern.wf-dark .wl2-nm,
body.wf-design-modern.wf-dark .wl2-nm {
    color: var(--wf-text-primary, #e6e9ee);
}
div.workflow.wf-design-modern.wf-dark .wl2-kw,
body.wf-design-modern.wf-dark .wl2-kw {
    color: var(--wf-text-secondary, #b3bac3);
}
div.workflow.wf-design-modern.wf-dark .wl2-io,
body.wf-design-modern.wf-dark .wl2-io {
    color: var(--wf-text-muted, #8a929c);
}
div.workflow.wf-design-modern.wf-dark .wl2-io b,
body.wf-design-modern.wf-dark .wl2-io b {
    color: var(--wf-text-secondary, #b3bac3);
}
div.workflow.wf-design-modern.wf-dark .wl2-detail,
body.wf-design-modern.wf-dark .wl2-detail {
    background: var(--wf-bg-elevated, #161b21);
    border-bottom-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-grp .wl2-gh,
body.wf-design-modern.wf-dark .wl2-grp .wl2-gh {
    background: var(--wf-bg-header, #1a2028);
    border-bottom-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-gname,
body.wf-design-modern.wf-dark .wl2-gname {
    color: var(--wf-text-primary, #e6e9ee);
}
div.workflow.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-card,
body.wf-design-modern.wf-dark .wl2-panel .worker-panel.wl2-card {
    background: var(--wf-bg-card, #20262e);
    border-color: var(--wf-border, #2c333d);
}
div.workflow.wf-design-modern.wf-dark .wl2-card .wl2-nm,
body.wf-design-modern.wf-dark .wl2-card .wl2-nm {
    color: var(--wf-text-primary, #e6e9ee);
}
div.workflow.wf-design-modern.wf-dark .wl2-ds,
body.wf-design-modern.wf-dark .wl2-ds {
    color: var(--wf-text-muted, #8a929c);
}
div.workflow.wf-design-modern.wf-dark .wl2-tag,
body.wf-design-modern.wf-dark .wl2-tag {
    background: var(--wf-bg-elevated, #161b21);
    color: var(--wf-text-secondary, #b3bac3);
}
div.workflow.wf-design-modern.wf-dark .wl2-addbtn,
body.wf-design-modern.wf-dark .wl2-addbtn,
div.workflow.wf-design-modern.wf-dark .wl2-dbtn,
body.wf-design-modern.wf-dark .wl2-dbtn {
    background: var(--wf-bg-input, #161b21);
    border-color: var(--wf-border-strong, #3a424d);
    color: var(--wf-accent, #6ea8fe);
}

/* ============================================================
   R0-3663 - Settings panel (the "Basic Settings" explorer, .dsp-* / .d3-settings-panel
   family rendered from settings_panel.tpl) dark theme. The panel's own CSS hardcodes
   LIGHT badge/chip/count backgrounds (Default/type pills #eee/#e8daef, D legend chip
   #ececec, count pills #f0f0f0) and white toggle/edit buttons. In dark mode the theme
   cascades light text onto them, leaving light-on-light, unreadable pills. Re-color the
   badge/chip/count surfaces, the List/Cards segment, the Edit button and the side-nav
   active/hover states with the --wf-* dark tokens so everything stays readable.
   ============================================================ */
/* Per-setting meta badges: Default value pill + value type pill */
div.workflow.wf-design-modern.wf-dark .dsp-b.def {
    background: var(--wf-bg-elevated, #1a2744);
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-b.ty {
    background: rgba(168, 85, 247, 0.16);
    color: #D8B4FE;
}
div.workflow.wf-design-modern.wf-dark .dsp-b.nd {
    background: var(--wf-warning-bg, rgba(245, 158, 11, 0.15));
    color: var(--wf-warning-text, #FCD34D);
}
div.workflow.wf-design-modern.wf-dark .dsp-b.ed {
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.18));
    color: #93C5FD;
}
/* Legend / per-row state chips: D is neutral (was light gray); C and S keep their colors */
div.workflow.wf-design-modern.wf-dark .dsp-chip.D {
    background: var(--wf-bg-elevated, #1a2744);
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-chip.C,
div.workflow.wf-design-modern.wf-dark .dsp-chip.S {
    color: #fff;
}
/* Category-nav and group-header count pills (were light #f0f0f0) */
div.workflow.wf-design-modern.wf-dark .dsp-nav .dsp-c,
div.workflow.wf-design-modern.wf-dark .dsp-gh .dsp-c {
    background: var(--wf-bg-elevated, #1a2744);
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-nav .dsp-c b,
div.workflow.wf-design-modern.wf-dark .dsp-gh .dsp-c b {
    color: var(--wf-warning-text, #FCD34D);
}
div.workflow.wf-design-modern.wf-dark .dsp-gh {
    border-bottom-color: var(--wf-border, rgba(148, 163, 184, 0.15));
}
/* Side category nav: base text, icons, hover and active states */
div.workflow.wf-design-modern.wf-dark .dsp-nav {
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-nav .dsp-ic {
    color: var(--wf-text-muted, #64748B);
}
div.workflow.wf-design-modern.wf-dark .dsp-nav:hover {
    background: var(--wf-bg-card-hover, #1f3050);
}
div.workflow.wf-design-modern.wf-dark .dsp-nav.active {
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.15));
    color: var(--wf-text-primary, #E2E8F0);
    border-left-color: var(--wf-border-focus, #60A5FA);
}
div.workflow.wf-design-modern.wf-dark .dsp-nav.active .dsp-ic {
    color: var(--wf-text-primary, #E2E8F0);
}
/* List / Cards segmented control (was a white pill) */
div.workflow.wf-design-modern.wf-dark .dsp-seg {
    background: var(--wf-bg-input, #0f1629);
}
div.workflow.wf-design-modern.wf-dark .dsp-seg button {
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-seg button.active {
    background: var(--wf-bg-card, #1a2744);
    color: var(--wf-text-primary, #E2E8F0);
    box-shadow: none;
}
/* Edit button on complex rows (was a white button) */
div.workflow.wf-design-modern.wf-dark .dsp-edit {
    background: var(--wf-bg-input, #0f1629);
    color: var(--wf-accent, #6ea8fe);
    border-color: var(--wf-border-strong, rgba(148, 163, 184, 0.25));
}
div.workflow.wf-design-modern.wf-dark .dsp-edit:hover {
    background: var(--wf-bg-card-hover, #1f3050);
}
/* Cards view: each setting card was a white box (#fff) — light title/desc text on it
   was unreadable. Dark-theme the card surface, border, hover and row separators. */
div.workflow.wf-design-modern.wf-dark .dsp-card {
    background: var(--wf-bg-card, #1a2744);
    border-color: var(--wf-border, rgba(148, 163, 184, 0.15));
}
div.workflow.wf-design-modern.wf-dark .dsp-card:hover {
    background: var(--wf-bg-card-hover, #1f3050);
}
div.workflow.wf-design-modern.wf-dark .dsp-row {
    border-bottom-color: var(--wf-border, rgba(148, 163, 184, 0.15));
}
div.workflow.wf-design-modern.wf-dark .dsp-row.edited,
div.workflow.wf-design-modern.wf-dark .dsp-card.edited {
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.10));
}
/* Color-picker hex value and range value pill (had dark/light-on-light text) */
div.workflow.wf-design-modern.wf-dark .dsp-hex {
    color: var(--wf-text-secondary, #94A3B8);
}
div.workflow.wf-design-modern.wf-dark .dsp-rv {
    background: var(--wf-accent-light, rgba(59, 130, 246, 0.15));
    color: #93C5FD;
}


body.wf-design-modern.wf-dark .d3view-context-menu-container {
    background: var(--wf-bg-surface);
}
body.wf-design-modern.wf-dark .d3view-context-menu-container .list-group-item.active .fa {
    color: var(--wf-text-primary);
}
/* ================================================================
   DW-2774 — Modern Header Bar
   Targets .wf-modern-header class from the modern template.
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- .hidden must always hide in modern mode ---- */
div.workflow.wf-design-modern .hidden,
body.wf-design-modern .hidden {
    display: none !important;
}

/* ---- Hide classic header elements in modern mode ---- */
div.workflow.wf-design-modern .d3view-wf-header .plugin-logo-container,
body.wf-design-modern .d3view-wf-header .plugin-logo-container {
    display: none !important;
}

/* ---- Header container — modern VISUAL theming only (R0-3335: layout/height
   removed so the classic header keeps its own classic sizing) ---- */
div.workflow.wf-design-modern .d3view-wf-header,
body.wf-design-modern .d3view-wf-header {
    /* R0-3335 - layout removed; classic header sizes itself
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
    padding: 0 !important;
    overflow: visible;
    */
    background: var(--wf-bg-header);
    border-bottom: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-xs);
    -webkit-font-smoothing: antialiased;
}

/* ---- R0-3335: layout-forcing on the classic header removed. We now render the
   CLASSIC header under the modern theme, so let it keep its own classic layout
   (two-level header, natural heights). Modern contributes visuals only. The old
   "force into single flex row" block is commented out below.
div.workflow.wf-design-modern .d3view-wf-header .plugin-header-right,
body.wf-design-modern .d3view-wf-header .plugin-header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 var(--wf-sp-3) !important;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-level-1,
body.wf-design-modern .d3view-wf-header .plugin-header-level-1 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: var(--wf-sp-2);
    width: 100%;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-left,
body.wf-design-modern .d3view-wf-header .plugin-header-left {
    flex-shrink: 0;
}

div.workflow.wf-design-modern .d3view-wf-header .plugin-header-right,
body.wf-design-modern .d3view-wf-header .plugin-header-right {
    flex: 1 1 auto !important;
}
---- end commented force-flex block ---- */

/* ---- Top settings container — modern VISUAL theming only (R0-3335: layout/height
   removed so the classic header keeps its own classic sizing) ---- */
div.workflow.wf-design-modern .top-settings-container,
body.wf-design-modern .top-settings-container {
    /* R0-3335 - layout removed; classic header sizes itself
    position: relative !important;
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
    padding: 0 !important;
    border: none !important;
    overflow: visible !important;
    z-index: var(--wf-z-header) !important;
    */
    background: var(--wf-bg-header) !important;
    border-bottom: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-xs) !important;
}

/* ---- Workflow name — modernize ---- */
div.workflow.wf-design-modern .wf-name-container,
body.wf-design-modern .wf-name-container {
    margin-left: 0 !important;
}

div.workflow.wf-design-modern .wf-name-container .wf-name,
body.wf-design-modern .wf-name-container .wf-name {
    font-size: var(--wf-fs-md) !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
}

/* ---- Execution controls — compact ---- */
div.workflow.wf-design-modern .wf-exec-controls-container,
body.wf-design-modern .wf-exec-controls-container {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
}

div.workflow.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn-group > .btn,
body.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn-group > .btn,
div.workflow.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn,
body.wf-design-modern .wf-exec-controls-container .controls-btn-group > .btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--wf-r-sm) !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

/* ---- Dropdowns — clean up for modern ---- */
div.workflow.wf-design-modern .wf-dropdowns,
body.wf-design-modern .wf-dropdowns {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown > a,
body.wf-design-modern .wf-dropdowns .dropdown > a,
div.workflow.wf-design-modern .wf-dropdowns .pl-dropdown > a,
body.wf-design-modern .wf-dropdowns .pl-dropdown > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 10px !important;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown > a:hover,
body.wf-design-modern .wf-dropdowns .dropdown > a:hover,
div.workflow.wf-design-modern .wf-dropdowns .pl-dropdown > a:hover,
body.wf-design-modern .wf-dropdowns .pl-dropdown > a:hover {
    color: var(--wf-text-primary) !important;
}

/* ---- Dropdown menus ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu,
body.wf-design-modern .wf-dropdowns .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li a,
body.wf-design-modern .wf-dropdowns .dropdown-menu li a {
    color: var(--wf-text-primary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 12px !important;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li a:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu li a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- wf-dropdowns: li:hover (generic hover bg for any <li>) ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu > li:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu > li:hover {
    background-color: var(--wf-accent-light) !important;
}

/* ---- wf-dropdowns: .open state on parent dropdown <li> ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown.open > a,
body.wf-design-modern .wf-dropdowns .dropdown.open > a,
div.workflow.wf-design-modern .wf-dropdowns-list > li.dropdown.open > a,
body.wf-design-modern .wf-dropdowns-list > li.dropdown.open > a {
    background-color: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

/* ---- wf-dropdowns: dropdown-submenu hover ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-submenu:hover > a,
body.wf-design-modern .wf-dropdowns .dropdown-submenu:hover > a {
    background: var(--wf-accent-light) !important;
    color: var(--wf-text-primary) !important;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-submenu > .dropdown-menu,
body.wf-design-modern .wf-dropdowns .dropdown-submenu > .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
}

/* ---- wf-dropdowns: disabled items ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled > a,
body.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled > a {
    color: var(--wf-text-disabled) !important;
    cursor: not-allowed;
}

div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled:hover,
body.wf-design-modern .wf-dropdowns .dropdown-menu li.disabled:hover {
    background-color: transparent !important;
}

/* ---- wf-dropdowns: divider ---- */
div.workflow.wf-design-modern .wf-dropdowns .dropdown-menu .divider,
body.wf-design-modern .wf-dropdowns .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0;
}

/* ---- Status indicator — compact inline ---- */
div.workflow.wf-design-modern .wf-start-status,
body.wf-design-modern .wf-start-status {
    font-size: var(--wf-fs-xs) !important;
    padding: 2px 8px !important;
    border-radius: var(--wf-r-full) !important;
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-muted) !important;
}

/* ---- Modern header — the actual flex container ---- */
div.workflow.wf-design-modern .wf-modern-header,
body.wf-design-modern .wf-modern-header {
    display: flex;
    align-items: center;
    height: var(--wf-header-h);
    padding: 0 var(--wf-sp-3);
    gap: var(--wf-sp-2);
    width: 100%;
}

/* R0-3335 - group the header into LEFT (title + menus) and RIGHT (search +
   status + run controls + window controls). Previously these were flat
   siblings whose only right-anchor was margin-left:auto on the search, so
   when ribbon mode relocates the search the run/window controls crumbed back
   to the left. Pin the whole right cluster with margin-left:auto on the group
   so it stays right in every mode. */
div.workflow.wf-design-modern .wf-modern-header-left,
body.wf-design-modern .wf-modern-header-left,
div.workflow.wf-design-modern .wf-modern-header-right,
body.wf-design-modern .wf-modern-header-right {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
    min-width: 0;
}
div.workflow.wf-design-modern .wf-modern-header-left,
body.wf-design-modern .wf-modern-header-left {
    flex: 0 1 auto;
}
div.workflow.wf-design-modern .wf-modern-header-right,
body.wf-design-modern .wf-modern-header-right {
    margin-left: auto;
    flex: 0 0 auto;
}

/* ---- Title ---- */
div.workflow.wf-design-modern .wf-modern-header-title,
body.wf-design-modern .wf-modern-header-title {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
    font-size: var(--wf-fs-md);
    font-weight: 600;
    color: var(--wf-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 0;
    margin-left: 0 !important;
}

/** Added by shashank2104 on 2026-04-02 - DW-2795 - Expand title area when inline editable is active **/
div.workflow.wf-design-modern .wf-modern-header.wf-name-editing .wf-modern-header-title,
body.wf-design-modern .wf-modern-header.wf-name-editing .wf-modern-header-title {
    max-width: 500px;
    overflow: visible;
}

div.workflow.wf-design-modern .wf-modern-header-title .wf-modern-header-icon,
body.wf-design-modern .wf-modern-header-title .wf-modern-header-icon {
    font-size: var(--wf-fs-sm);
    color: var(--wf-text-secondary);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-title .wf-name,
body.wf-design-modern .wf-modern-header-title .wf-name {
    color: var(--wf-text-primary) !important;
}

/* ---- Menu items (from reused classic dropdown template) ---- */
div.workflow.wf-design-modern .wf-modern-header-menus,
body.wf-design-modern .wf-modern-header-menus {
    gap: 0 !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Hide classic level-2 sections rendered inside modern menus — modern header has its own search/controls */
div.workflow.wf-design-modern .wf-modern-header-menus .level-2-center,
body.wf-design-modern .wf-modern-header-menus .level-2-center,
div.workflow.wf-design-modern .wf-modern-header-menus .level-2-right,
body.wf-design-modern .wf-modern-header-menus .level-2-right {
    display: none !important;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 6px 10px !important;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    white-space: nowrap;
    text-decoration: none;
}

div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a:hover,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li > a:hover,
div.workflow.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li.open > a,
body.wf-design-modern .wf-modern-header-menus .wf-dropdowns-list > li.open > a {
    color: var(--wf-text-primary) !important;
    background-color: unset !important;
}

/* Dropdown menus */
div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-md);
}

div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu li a,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu li a {
    color: var(--wf-text-secondary);
    font-size: var(--wf-fs-sm);
    padding: 6px 12px;
}

div.workflow.wf-design-modern .wf-modern-header-menus .dropdown-menu li a:hover,
body.wf-design-modern .wf-modern-header-menus .dropdown-menu li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-text-primary);
}

/* ---- Search bar — sits at the start of the right group (R0-3335: the right
   group itself is pinned right via margin-left:auto, so the search no longer
   needs its own auto margin, which would mis-space it inside the group) ---- */
div.workflow.wf-design-modern .wf-modern-header-search,
body.wf-design-modern .wf-modern-header-search {
    margin-left: 0;
    display: flex;
    align-items: center;
    position: relative;
    flex: 0 1 360px;
    min-width: 200px;
    max-width: 480px;
}

/* GlobalSearchView root inside modern search */
div.workflow.wf-design-modern .wf-modern-header-search .d3view-wf-global-search,
body.wf-design-modern .wf-modern-header-search .d3view-wf-global-search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
}

/* Search outer wrapper — flex row; override p-relative so dropdown sizes to wf-modern-header-search */
div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search-outer,
body.wf-design-modern .wf-modern-header-search .wf-worker-search-outer {
    display: flex !important;
    align-items: center;
    width: 100%;
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    height: 32px;
    padding: 0 8px;
    gap: 4px;
    transition: border-color var(--wf-t-fast);
    position: static !important;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search-outer:focus-within,
body.wf-design-modern .wf-modern-header-search .wf-worker-search-outer:focus-within {
    border-color: var(--wf-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search type dropdown button */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-dd,
body.wf-design-modern .wf-modern-header-search .wf-search-type-dd {
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-btn,
body.wf-design-modern .wf-modern-header-search .wf-search-type-btn {
    padding: 2px 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px;
    height: auto;
    min-width: 0;
}

/* Search input inside worker-search-dd */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd,
body.wf-design-modern .wf-modern-header-search .worker-search-dd {
    flex: 1;
    min-width: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-input-container,
body.wf-design-modern .wf-modern-header-search .wf-search-input-container {
    width: 100%;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search,
body.wf-design-modern .wf-modern-header-search .wf-worker-search {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    height: 28px !important;
    font-size: var(--wf-fs-sm) !important;
    color: var(--wf-text-secondary) !important;
    width: 100% !important;
    border-radius: 0 !important;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-worker-search:focus,
body.wf-design-modern .wf-modern-header-search .wf-worker-search:focus {
    color: var(--wf-text-primary) !important;
}

/* Search results dropdown — aligned to wf-modern-header-search (position: relative at line 340) */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu {
    position: absolute !important;
    top: 36px !important;
    left: -60px !important;
    right: auto !important;
    width: 100%;
    min-width: 360px;
    max-height: 400px !important;
    height: auto !important;
    overflow-y: auto;
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md)!important;
    box-shadow: var(--wf-sh-lg)!important;
    padding: var(--wf-sp-4)!important;
    z-index: var(--wf-z-tooltip);
}

/* Dropdown content styling — table, search info, close button */
div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .table,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .table {
    margin-bottom: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row td,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row td {
    padding: 10px 12px;
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:first-child td,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:first-child td {
    border-top: none;
}

div.workflow.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:hover,
body.wf-design-modern .wf-modern-header-search .worker-search-dd > .dropdown-menu .wf-search-row:hover {
    background: var(--wf-bg-card-hover);
    cursor: pointer;
}

/* Search filter buttons — compact */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-btns,
body.wf-design-modern .wf-modern-header-search .wf-search-btns {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-btns .btn,
body.wf-design-modern .wf-modern-header-search .wf-search-btns .btn {
    padding: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 11px;
}

/* AI search toggle — compact */
div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search {
    padding: 2px 6px !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--wf-text-muted);
    margin: 0 !important;
    flex-shrink: 0;
    transition: color var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search:hover,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search:hover {
    color: var(--wf-accent);
}

/* Revert zoom button */
div.workflow.wf-design-modern .wf-modern-header-search .revert-zoom,
body.wf-design-modern .wf-modern-header-search .revert-zoom {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    font-size: var(--wf-fs-xs);
}

/* AI search input overlay */
div.workflow.wf-design-modern .wf-modern-header-search .wf-ai-search-container,
body.wf-design-modern .wf-modern-header-search .wf-ai-search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

/* R0-3401 — keep the AI toggle clickable above the overlay so users can exit AI mode */
div.workflow.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search,
body.wf-design-modern .wf-modern-header-search .toggle-wf-ai-search {
    position: relative;
    z-index: 6;
}

/* Hide original dummy search content — replaced by GlobalSearchView */
div.workflow.wf-design-modern .wf-modern-header-search > .wf-search-badge,
body.wf-design-modern .wf-modern-header-search > .wf-search-badge,
div.workflow.wf-design-modern .wf-modern-header-search > .worker-search-input,
body.wf-design-modern .wf-modern-header-search > .worker-search-input,
div.workflow.wf-design-modern .wf-modern-header-search > .wf-search-settings-btn,
body.wf-design-modern .wf-modern-header-search > .wf-search-settings-btn {
    display: none;
}

/* ---- Status indicator ---- */
div.workflow.wf-design-modern .wf-modern-header-status,
body.wf-design-modern .wf-modern-header-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-status-dot,
body.wf-design-modern .wf-modern-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wf-success);
    box-shadow: 0 0 6px var(--wf-success);
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-modern-status-text,
body.wf-design-modern .wf-modern-status-text {
    font-size: var(--wf-fs-xs) !important;
    color: var(--wf-text-muted) !important;
    font-weight: 500;
    white-space: nowrap;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ---- Divider between button groups ---- */
div.workflow.wf-design-modern .wf-modern-header-divider,
body.wf-design-modern .wf-modern-header-divider {
    width: 1px;
    height: 24px;
    background: var(--wf-border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ---- Execution controls ---- */
div.workflow.wf-design-modern .wf-modern-header-exec,
body.wf-design-modern .wf-modern-header-exec {
    display: flex!important;
    align-items: center;
    gap: var(--wf-sp-1);
    flex-shrink: 0;
    margin: 0 !important;
}
div.workflow.wf-design-modern .wf-modern-header-exec .btn-text,
body.wf-design-modern .wf-modern-header-exec .btn-text {
    display: none;
}

div.workflow.wf-design-modern .wf-modern-header-exec .controls-btn-group,
body.wf-design-modern .wf-modern-header-exec .controls-btn-group {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
}

/* ---- Modern button base ---- */
div.workflow.wf-design-modern .wf-modern-btn,
body.wf-design-modern .wf-modern-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
}

div.workflow.wf-design-modern .wf-modern-btn:hover,
body.wf-design-modern .wf-modern-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Danger variant */
div.workflow.wf-design-modern .wf-modern-btn-danger,
body.wf-design-modern .wf-modern-btn-danger {
    border-color: var(--wf-danger);
    color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-modern-btn-danger:hover,
body.wf-design-modern .wf-modern-btn-danger:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* ---- Run button — green gradient ---- */
div.workflow.wf-design-modern .wf-modern-run-btn,
body.wf-design-modern .wf-modern-run-btn {
    background: var(--wf-grad-run) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    padding: 0 14px !important;
    height: 32px;
    border-radius: var(--wf-r-md) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--wf-fs-sm);
    white-space: nowrap;
}

div.workflow.wf-design-modern .wf-modern-run-btn:hover,
body.wf-design-modern .wf-modern-run-btn:hover {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px);
}

/* ---- Execution spinner ---- */
div.workflow.wf-design-modern .wf-execution-spinner,
body.wf-design-modern .wf-execution-spinner {
    flex-shrink: 0;
}

/* ---- Progress bar ---- */
div.workflow.wf-design-modern .wf-execution-status .progress,
body.wf-design-modern .wf-execution-status .progress {
    height: 24px;
    border-radius: var(--wf-r-md);
}

/* ---- Control buttons (right side) ---- */
div.workflow.wf-design-modern .wf-modern-header-controls,
body.wf-design-modern .wf-modern-header-controls,
div.workflow.wf-design-modern .wf-control-buttons,
body.wf-design-modern .wf-control-buttons {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-1);
    flex-shrink: 0;
    margin: 0 !important;
}

div.workflow.wf-design-modern .wf-modern-header-controls .btn-group,
body.wf-design-modern .wf-modern-header-controls .btn-group,
div.workflow.wf-design-modern .wf-control-buttons .btn-group,
body.wf-design-modern .wf-control-buttons .btn-group {
    display: flex;
    gap: var(--wf-sp-1);
}

/* Hide docs link in modern mode — not needed in compact header */
div.workflow.wf-design-modern .wf-control-buttons .docs,
body.wf-design-modern .wf-control-buttons .docs {
    display: none !important;
}

/* Modernize maximize/minimize/close buttons */
div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn,
body.wf-design-modern .wf-control-buttons .btn-group .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    box-shadow: none;
}

div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn:hover,
body.wf-design-modern .wf-control-buttons .btn-group .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Close button — danger variant */
div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger,
body.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger,
div.workflow.wf-design-modern .wf-control-buttons .btn-group .close_workflow,
body.wf-design-modern .wf-control-buttons .btn-group .close_workflow {
    color: var(--wf-danger);
    border-color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger:hover,
body.wf-design-modern .wf-control-buttons .btn-group .btn.btn-danger:hover,
div.workflow.wf-design-modern .wf-control-buttons .btn-group .close_workflow:hover,
body.wf-design-modern .wf-control-buttons .btn-group .close_workflow:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* Modernize execution control buttons (play, stop, reset) */
div.workflow.wf-design-modern .wf-execution-controls > .btn-group > .btn,
body.wf-design-modern .wf-execution-controls > .btn-group > .btn,
div.workflow.wf-design-modern .wf-execution-controls > .btn,
body.wf-design-modern .wf-execution-controls > .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    box-shadow: none;
    border-top-left-radius: var(--wf-r-sm)!important;
    border-bottom-left-radius: var(--wf-r-sm)!important;
}

div.workflow.wf-design-modern .wf-execution-controls .btn:hover,
body.wf-design-modern .wf-execution-controls .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Play button — green accent */
div.workflow.wf-design-modern .wf-execution-controls .wf-execute,
body.wf-design-modern .wf-execution-controls .wf-execute {
    color: var(--wf-success) !important;
    border-color: var(--wf-success);
}

div.workflow.wf-design-modern .wf-execution-controls .wf-execute:hover,
body.wf-design-modern .wf-execution-controls .wf-execute:hover {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Stop button — danger accent */
div.workflow.wf-design-modern .wf-execution-controls .wf-stop,
body.wf-design-modern .wf-execution-controls .wf-stop {
    color: var(--wf-danger) !important;
    border-color: var(--wf-danger);
}

div.workflow.wf-design-modern .wf-execution-controls .wf-stop:hover,
body.wf-design-modern .wf-execution-controls .wf-stop:hover {
    background: var(--wf-danger-bg) !important;
}

/* ---- Theme toggle ---- */
div.workflow.wf-design-modern .wf-theme-toggle,
body.wf-design-modern .wf-theme-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-theme-toggle:hover,
body.wf-design-modern .wf-theme-toggle:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Hide theme toggle in classic mode */
div.workflow .wf-theme-toggle {
    display: none;
}

/* ---- DW-2795: Design switch button ---- */
div.workflow.wf-design-modern .wf-switch-design,
body.wf-design-modern .wf-switch-design {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    cursor: pointer;
    font-size: 13px;
    transition: var(--wf-t-fast);
    padding: 0;
    flex-shrink: 0;
}

div.workflow.wf-design-modern .wf-switch-design:hover,
body.wf-design-modern .wf-switch-design:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Classic header: switch-to-modern button */
div.workflow .wf-switch-design {
    margin-left: 8px;
    font-size: 12px;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

div.workflow .wf-switch-design:hover {
    color: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
}

/* ---- Search type dropdown menu ---- */
div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-lg);
    min-width: 160px;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a {
    color: var(--wf-text-secondary);
    font-size: var(--wf-fs-sm);
    padding: 6px 12px;
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a:hover,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-text-primary);
}

div.workflow.wf-design-modern .wf-modern-header-search .wf-search-type-menu li.active a,
body.wf-design-modern .wf-modern-header-search .wf-search-type-menu li.active a {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ---- Bootstrap tooltip override for modern mode ---- */
div.workflow.wf-design-modern .tooltip .tooltip-inner,
body.wf-design-modern .tooltip .tooltip-inner {
    background: var(--wf-n-800, #1e293b);
    color: var(--wf-text-inverse, #fff);
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--wf-r-sm);
    padding: 4px 8px;
    box-shadow: var(--wf-sh-md);
    max-width: 220px;
}

div.workflow.wf-design-modern .tooltip .tooltip-arrow,
body.wf-design-modern .tooltip .tooltip-arrow {
    display: none;
}

/* ---- Reset dropdown styling ---- */
div.workflow.wf-design-modern .reset_dd .dropdown-menu,
body.wf-design-modern .reset_dd .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-md);
    color: var(--wf-text-secondary);
}

div.workflow.wf-design-modern .reset_dd .dd-footer,
body.wf-design-modern .reset_dd .dd-footer {
    border-color: var(--wf-border) !important;
}

/* ============================================================
   R0-3335 - Modern look for the CLASSIC header controls. We render the classic header
   under the modern theme, so re-skin its play / window / appearance buttons to the modern
   button language (rounded + tokenized, green-gradient run, red stop/close). Scoped to the
   header so it never touches buttons elsewhere.
   ============================================================ */
/* Base modern button look for every control button in the classic header */
div.workflow.wf-design-modern .d3view-wf-header .wf-execution-controls .btn,
body.wf-design-modern .d3view-wf-header .wf-execution-controls .btn,
div.workflow.wf-design-modern .d3view-wf-header .wf-control-buttons .btn,
body.wf-design-modern .d3view-wf-header .wf-control-buttons .btn,
div.workflow.wf-design-modern .d3view-wf-header .wf-switch-design,
body.wf-design-modern .d3view-wf-header .wf-switch-design,
div.workflow.wf-design-modern .d3view-wf-header .wf-theme-toggle,
body.wf-design-modern .d3view-wf-header .wf-theme-toggle {
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-secondary);
    font-size: 13px;
    box-shadow: none;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .d3view-wf-header .wf-execution-controls .btn:hover,
body.wf-design-modern .d3view-wf-header .wf-execution-controls .btn:hover,
div.workflow.wf-design-modern .d3view-wf-header .wf-control-buttons .btn:hover,
body.wf-design-modern .d3view-wf-header .wf-control-buttons .btn:hover,
div.workflow.wf-design-modern .d3view-wf-header .wf-switch-design:hover,
body.wf-design-modern .d3view-wf-header .wf-switch-design:hover,
div.workflow.wf-design-modern .d3view-wf-header .wf-theme-toggle:hover,
body.wf-design-modern .d3view-wf-header .wf-theme-toggle:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}
/* keep the control groups as tidy inline-flex rows with gaps */
div.workflow.wf-design-modern .d3view-wf-header .wf-execution-controls .controls-btn-group,
body.wf-design-modern .d3view-wf-header .wf-execution-controls .controls-btn-group,
div.workflow.wf-design-modern .d3view-wf-header .wf-control-buttons .btn-group,
body.wf-design-modern .d3view-wf-header .wf-control-buttons .btn-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Run / Autoplay -> green gradient run button */
div.workflow.wf-design-modern .d3view-wf-header .wf_restart,
body.wf-design-modern .d3view-wf-header .wf_restart,
div.workflow.wf-design-modern .d3view-wf-header .wf-autoplay,
body.wf-design-modern .d3view-wf-header .wf-autoplay {
    background: var(--wf-grad-run) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    padding: 0 14px !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
div.workflow.wf-design-modern .d3view-wf-header .wf_restart:hover,
body.wf-design-modern .d3view-wf-header .wf_restart:hover,
div.workflow.wf-design-modern .d3view-wf-header .wf-autoplay:hover,
body.wf-design-modern .d3view-wf-header .wf-autoplay:hover {
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px);
    color: #fff !important;
}
/* Stop + Close -> danger */
div.workflow.wf-design-modern .d3view-wf-header .wf-stop,
body.wf-design-modern .d3view-wf-header .wf-stop,
div.workflow.wf-design-modern .d3view-wf-header .close_workflow,
body.wf-design-modern .d3view-wf-header .close_workflow {
    border-color: var(--wf-danger) !important;
    color: var(--wf-danger) !important;
    background: transparent !important;
}
div.workflow.wf-design-modern .d3view-wf-header .wf-stop:hover,
body.wf-design-modern .d3view-wf-header .wf-stop:hover,
div.workflow.wf-design-modern .d3view-wf-header .close_workflow:hover,
body.wf-design-modern .d3view-wf-header .close_workflow:hover {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}
/* the design-switch pill reads as a primary-ish outline action */
div.workflow.wf-design-modern .d3view-wf-header .wf-switch-design,
body.wf-design-modern .d3view-wf-header .wf-switch-design {
    padding: 0 12px;
    font-weight: 500;
}

/* (a) icon-only play controls in modern - the text labels look cramped on the small buttons */
div.workflow.wf-design-modern .d3view-wf-header .wf-execution-controls .btn-text,
body.wf-design-modern .d3view-wf-header .wf-execution-controls .btn-text {
    display: none;
}
/* (b) green run/autoplay buttons keep white icon + text in every state */
div.workflow.wf-design-modern .d3view-wf-header .wf_restart,
body.wf-design-modern .d3view-wf-header .wf_restart,
div.workflow.wf-design-modern .d3view-wf-header .wf_restart i,
body.wf-design-modern .d3view-wf-header .wf_restart i,
div.workflow.wf-design-modern .d3view-wf-header .wf_restart span,
body.wf-design-modern .d3view-wf-header .wf_restart span,
div.workflow.wf-design-modern .d3view-wf-header .wf-autoplay,
body.wf-design-modern .d3view-wf-header .wf-autoplay,
div.workflow.wf-design-modern .d3view-wf-header .wf-autoplay i,
body.wf-design-modern .d3view-wf-header .wf-autoplay i,
div.workflow.wf-design-modern .d3view-wf-header .wf-autoplay span,
body.wf-design-modern .d3view-wf-header .wf-autoplay span {
    color: #fff !important;
}
/* (c) the run button's progress-fill rect is left-rounded for the joined classic group; with the
   modern gaps the button stands alone, so round all four corners to match the button radius */
div.workflow.wf-design-modern .d3view-wf-header .wf_restart .exec-rect,
body.wf-design-modern .d3view-wf-header .wf_restart .exec-rect {
    border-radius: var(--wf-r-md) !important;
}
/* (d) the divider pipe uses a hardcoded #333 - tokenize it for modern (light + dark) */
div.workflow.wf-design-modern .d3view-wf-header .pipe,
body.wf-design-modern .d3view-wf-header .pipe {
    border-right-color: var(--wf-border) !important;
}

/* ================================================================
   DW-2774 — Modern Status Bar (32px)
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* Hidden in classic mode */
.wf-modern-statusbar {
    display: none;
}

/* Shown in modern mode */
div.workflow.wf-design-modern .wf-modern-statusbar,
body.wf-design-modern .wf-modern-statusbar {
    height: var(--wf-statusbar-h, 32px);
    background: var(--wf-bg-statusbar);
    border-top: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    padding: 0 var(--wf-sp-4);
    gap: var(--wf-sp-4);
    font-size: var(--wf-fs-xs);
    color: var(--wf-text-muted);
    flex-shrink: 0;
    z-index: var(--wf-z-statusbar);
}

/* Graph info (node + edge counts) */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-graph-info,
body.wf-design-modern .wf-modern-statusbar .wf-status-graph-info {
    font-weight: 500;
    color: var(--wf-text-secondary);
}

/* Status indicator (dot + label) */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-indicator,
body.wf-design-modern .wf-modern-statusbar .wf-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-status-dot,
body.wf-design-modern .wf-modern-statusbar .wf-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
    flex-shrink: 0;
}

/* Spacer */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-statusbar-spacer,
body.wf-design-modern .wf-modern-statusbar .wf-statusbar-spacer {
    flex: 1;
}

/* Zoom controls */
div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-controls,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-btn,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wf-r-sm);
    border: 1px solid var(--wf-border);
    background: transparent;
    color: var(--wf-text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-btn:hover,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

div.workflow.wf-design-modern .wf-modern-statusbar .wf-zoom-percent,
body.wf-design-modern .wf-modern-statusbar .wf-zoom-percent {
    font-size: var(--wf-fs-xs);
    font-weight: 500;
    min-width: 36px;
    text-align: center;
    color: var(--wf-text-secondary);
}

/* ================================================================
   BOTTOM TAB BAR / FOOTER
   Now that .wf-design-modern is on div.workflow, .wf-footer is a
   descendant and can use --wf-* tokens directly.
   ================================================================ */
div.workflow.wf-design-modern .wf-footer,
body.wf-design-modern .wf-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    min-height: 34px;
    display: flex;
    align-items: stretch;
    -webkit-font-smoothing: antialiased;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs,
body.wf-design-modern .wf-footer .nav-tabs {
    background: transparent;
    border: none;
    display: flex;
    align-items: stretch;
    margin: 0;
    gap: 0;
}
/* Footer heading label */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading,
body.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--wf-border);
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading > span,
body.wf-design-modern .wf-footer .nav-tabs > li.footer-tabs-heading > span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--wf-text-muted);
}
/* Footer tab items */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a,
body.wf-design-modern .wf-footer .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
    font-size: 12px !important;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    padding: 7px 16px !important;
    transition: var(--wf-t-fast);
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a > i,
body.wf-design-modern .wf-footer .nav-tabs > li > a > i {
    font-size: 12px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li > a:hover,
body.wf-design-modern .wf-footer .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary) !important;
    background: var(--wf-accent-light) !important;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.active > a,
body.wf-design-modern .wf-footer .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--wf-accent) !important;
}
/* Add workflow button */
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf {
    padding: 0 8px;
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf > i,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf > i {
    font-size: 14px;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-footer .nav-tabs > li.add_wf:hover > i,
body.wf-design-modern .wf-footer .nav-tabs > li.add_wf:hover > i {
    color: var(--wf-accent);
}

/* Activities footer panel */
div.workflow.wf-design-modern .wf-tab-footer,
body.wf-design-modern .wf-tab-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
}

div.workflow.wf-design-modern .wf-tab-footer .workflow-activities-header-right,
body.wf-design-modern .wf-tab-footer .workflow-activities-header-right {
    background: var(--wf-bg-surface);
}

div.workflow.wf-design-modern .wf-tab-footer .btn,
body.wf-design-modern .wf-tab-footer .btn {
    color: var(--wf-text-secondary) !important;
    background: transparent !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-sm) !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .wf-tab-footer .btn:hover,
body.wf-design-modern .wf-tab-footer .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/*
 * CSS for template: wf-modern-shell-tpl
 * Source: agreed shell skeleton at /tests/workflow.shell.html (Skeleton B — flex)
 *
 * Every selector is scoped under .wf-modern-shell. No body.wf-design-modern
 * coupling — the shell renders independently of canvas style.
 *
 * Theme tokens live as CSS variables on the .wf-modern-shell root and can be
 * swapped via .wf-modern-shell[data-theme="dark|brand|compact"]. Adding a
 * future theme means adding a [data-theme="x"] block; no markup change.
 */

/* ============================================================
   Theme tokens — defaults (light)
   ============================================================ */
.wf-modern-shell {
    --wf-bg:           #f7f9fc;
    --wf-fg:           #1a2030;
    --wf-fg-muted:     #6b7280;
    --wf-accent:       #2c5282;
    --wf-accent-soft:  #e0ecf8;
    --wf-border:       #e8edf3;
    --wf-chrome-bg:    #ffffff;
    --wf-rail-bg:      #ffffff;
    --wf-canvas-bg:    #fafbfc;
    --wf-canvas-grid:  rgba(0, 0, 0, 0.04);
    --wf-success:      #2ea84f;
    --wf-warning:      #d46b08;
    --wf-danger:       #c0392b;
    --wf-header-h:     50px;
    --wf-footer-h:     28px;
    --wf-rail-w:       52px;
    --wf-rail-w-open:  220px;
    --wf-right-w:      320px;
    --wf-sp-1:         4px;
    --wf-sp-2:         8px;
    --wf-sp-3:         12px;
    --wf-sp-4:         16px;
    --wf-r-sm:         4px;
    --wf-r-md:         8px;

    background: var(--wf-bg);
    color: var(--wf-fg);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wf-modern-shell[data-theme="dark"] {
    --wf-bg:           #0f172a;
    --wf-fg:           #e2e8f0;
    --wf-fg-muted:     #94a3b8;
    --wf-accent:       #60a5fa;
    --wf-accent-soft:  rgba(96, 165, 250, 0.18);
    --wf-border:       #1e293b;
    --wf-chrome-bg:    #111827;
    --wf-rail-bg:      #111827;
    --wf-canvas-bg:    #0b1220;
    --wf-canvas-grid:  rgba(255, 255, 255, 0.04);
}

.wf-modern-shell[data-theme="brand"] {
    --wf-accent:       #6c3483;
    --wf-accent-soft:  #e8daef;
    --wf-canvas-bg:    #fffefb;
}

.wf-modern-shell[data-theme="compact"] {
    --wf-header-h:     40px;
    --wf-rail-w:       44px;
    --wf-sp-2:         6px;
    --wf-sp-3:         9px;
    font-size: 12px;
}

/* ============================================================
   Header
   ============================================================ */
.wf-modern-shell .wf-shell-header {
    background: var(--wf-chrome-bg);
    border-bottom: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    gap: var(--wf-sp-2);
    padding: 0 var(--wf-sp-3);
    height: var(--wf-header-h);
    flex-shrink: 0;
}

.wf-modern-shell .wf-shell-brand {
    width: 32px;
    height: 32px;
    border-radius: var(--wf-r-md);
    background: linear-gradient(135deg, #d4edda, #b8e0c0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c8a3c;
    flex-shrink: 0;
}
.wf-modern-shell .wf-shell-brand img { width: 28px; height: 28px; display: block; }

.wf-modern-shell .wf-name-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: var(--wf-r-md);
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    margin-right: 6px;
}
.wf-modern-shell .wf-name-block .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--wf-success);
    box-shadow: 0 0 0 3px rgba(46, 168, 79, 0.18);
}
.wf-modern-shell .wf-name-block .status-dot.idle     { background: #888;            box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.18); }
.wf-modern-shell .wf-name-block .status-dot.saved    { background: var(--wf-success); box-shadow: 0 0 0 3px rgba(46, 168, 79, 0.18); }
.wf-modern-shell .wf-name-block .status-dot.modified { background: #d4a017;          box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18); }
.wf-modern-shell .wf-name-block .status-dot.running  { background: var(--wf-warning); box-shadow: 0 0 0 3px rgba(212, 107, 8, 0.18); animation: wf-shell-pulse 1.2s ease-in-out infinite; }
.wf-modern-shell .wf-name-block .status-dot.failed   { background: var(--wf-danger);  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }
.wf-modern-shell .wf-name-block .info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.15;
    min-width: 0;
}
.wf-modern-shell .wf-name-block .info .wf-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-fg);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wf-modern-shell .wf-name-block .info .wf-name:hover { color: var(--wf-accent); }
.wf-modern-shell .wf-name-block .info .status-label {
    font-size: 10px;
    color: var(--wf-fg-muted);
    font-weight: 500;
}

@keyframes wf-shell-pulse {
    0%   { box-shadow: 0 0 0 3px rgba(212, 107, 8, 0.30); }
    50%  { box-shadow: 0 0 0 6px rgba(212, 107, 8, 0.05); }
    100% { box-shadow: 0 0 0 3px rgba(212, 107, 8, 0.30); }
}

/* ============================================================
   Menus — minimal dropdown system, native click toggle via JS adapter
   ============================================================ */
.wf-modern-shell .wf-shell-menus { display: inline-flex; gap: 0; align-items: center; }
.wf-modern-shell .wf-shell-menu { position: relative; }
.wf-modern-shell .wf-shell-menubtn {
    background: transparent;
    border: none;
    padding: 5px 10px;
    color: var(--wf-fg-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--wf-r-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wf-modern-shell .wf-shell-menubtn .fa-caret-down { font-size: 9px; opacity: 0.6; }
.wf-modern-shell .wf-shell-menubtn:hover { color: var(--wf-fg); background: var(--wf-bg); }
.wf-modern-shell .wf-shell-menu.open .wf-shell-menubtn { color: var(--wf-fg); background: var(--wf-bg); }

.wf-modern-shell .wf-shell-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 220px;
    background: var(--wf-chrome-bg);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    padding: 4px;
    z-index: 100;
    display: none;
}
.wf-modern-shell .wf-shell-menu.open > .wf-shell-dropdown { display: block; }

.wf-modern-shell .wf-shell-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--wf-r-sm);
    font-size: 12px;
    color: var(--wf-fg);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}
.wf-modern-shell .wf-shell-item i { width: 14px; text-align: center; font-size: 12px; color: var(--wf-fg-muted); }
.wf-modern-shell .wf-shell-item:hover { background: var(--wf-accent-soft); color: var(--wf-accent); }
.wf-modern-shell .wf-shell-item:hover i { color: var(--wf-accent); }
.wf-modern-shell .wf-shell-item.checked > i:first-child::before { content: "\f00c"; font-family: 'FontAwesome'; color: var(--wf-accent); }
.wf-modern-shell .wf-shell-item.wf-shell-danger { color: var(--wf-danger); }
.wf-modern-shell .wf-shell-item.wf-shell-danger i { color: var(--wf-danger); }
.wf-modern-shell .wf-shell-divider { height: 1px; background: var(--wf-border); margin: 4px 6px; }
.wf-modern-shell .wf-shell-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--wf-fg-muted);
    font-weight: 700;
    padding: 6px 10px 2px;
    opacity: 0.7;
}

.wf-modern-shell .wf-shell-submenu { position: relative; }
.wf-modern-shell .wf-shell-submenu-caret { margin-left: auto; font-size: 9px; }
.wf-modern-shell .wf-shell-subdropdown {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 4px;
    margin-top: 0;
}
.wf-modern-shell .wf-shell-submenu:hover > .wf-shell-subdropdown { display: block; }

/* ============================================================
   Exec controls
   ============================================================ */
.wf-modern-shell .wf-shell-spacer { flex: 1; }

.wf-modern-shell .wf-shell-exec {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-sp-1);
}
.wf-modern-shell .wf-shell-exec .wf-execution-controls {
    display: inline-flex;
    background: var(--wf-bg);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 2px;
    margin: 0 !important;
}
.wf-modern-shell .wf-shell-exec .wf-execution-controls .btn {
    background: transparent !important;
    border: none !important;
    padding: 6px 10px !important;
    border-radius: var(--wf-r-sm) !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.wf-modern-shell .wf-shell-exec .wf-execution-controls .btn:hover { background: var(--wf-chrome-bg) !important; }
.wf-modern-shell .wf-shell-exec .wf-execution-controls .wf-execute {
    background: #155724 !important;
    color: #fff !important;
    margin: 0 2px !important;
}
.wf-modern-shell .wf-shell-exec .wf-execution-controls .wf-execute:hover { background: #1c6b30 !important; }
.wf-modern-shell .wf-shell-exec .wf-execution-status { display: none !important; }

.wf-modern-shell .wf-shell-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--wf-sp-1);
}
.wf-modern-shell .wf-shell-controls .btn-group { display: inline-flex; gap: 2px; }

/* ============================================================
   Body: rail + canvas + right rail
   ============================================================ */
.wf-modern-shell .wf-shell-body {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    height: calc(100% - var(--wf-header-h));
}

/* ────────────────────────────────────────────────────────────
   Left rail — narrow with expand-on-hover overlay (Skeleton A's
   B-style behaviour). Rail sits in flex column; on hover it
   overflows to overlay canvas without pushing it.
   ──────────────────────────────────────────────────────────── */
.wf-modern-shell .wf-shell-rail-left {
    width: var(--wf-rail-w);
    flex-shrink: 0;
    background: var(--wf-rail-bg);
    border-right: 1px solid var(--wf-border);
    transition: none;
    position: relative;
    z-index: 5;
    overflow: visible;
}
.wf-modern-shell .wf-shell-rail-left .wf-nav-menu {
    height: 100%;
    width: var(--wf-rail-w);
    overflow: hidden;
    transition: width 0.2s ease;
    background: var(--wf-rail-bg);
}
.wf-modern-shell .wf-shell-rail-left.expand-hover:hover .wf-nav-menu {
    width: var(--wf-rail-w-open);
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.06);
}

/* Rail content — narrow state shows icons only, hover expands to icon + label + section header */
.wf-modern-shell .wf-shell-rail-left .wf-nav-menu-groups {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 4px 0 !important;
}
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical {
    list-style: none !important;
    padding: 4px 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.wf-modern-shell .wf-shell-rail-left .wf-sidebar-bottom {
    margin-top: auto;
    padding: 4px 0;
    border-top: 1px solid var(--wf-border);
}
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical > li {
    position: relative !important;
    overflow: visible !important;
}
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical > li > a,
.wf-modern-shell .wf-shell-rail-left li.list-group-item > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 14px !important;
    color: var(--wf-fg-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    border-left: 3px solid transparent;
    background: transparent !important;
}
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical > li > a > i,
.wf-modern-shell .wf-shell-rail-left li.list-group-item > a > i { font-size: 14px !important; color: inherit !important; width: 14px; text-align: center; }
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical > li > a:hover,
.wf-modern-shell .wf-shell-rail-left li.list-group-item > a:hover { background: var(--wf-bg) !important; color: var(--wf-fg) !important; }
.wf-modern-shell .wf-shell-rail-left .pl-tabs-vertical > li.active > a,
.wf-modern-shell .wf-shell-rail-left li.list-group-item.active > a { border-left-color: var(--wf-accent); background: var(--wf-accent-soft) !important; color: var(--wf-accent) !important; }
.wf-modern-shell .wf-shell-rail-left .wf-nav-menu-groups li[data-id] { padding: 0 !important; border: none !important; background: transparent !important; }

/* Narrow-state — hide labels; show only icons. Specificity bumped with
   .wf-nav-menu to beat div.workflow .wf-nav-menu .nav-menu-item-label
   !important rules in workflow-builder-tpl.css. */
.wf-modern-shell .wf-shell-rail-left:not(:hover) .wf-nav-menu .nav-menu-item-label,
.wf-modern-shell .wf-shell-rail-left:not(:hover) .wf-nav-menu .pl-tab-item-label { display: none !important; opacity: 0 !important; }
.wf-modern-shell .wf-shell-rail-left:not(:hover) .wf-nav-menu .pl-tabs-vertical > li > a,
.wf-modern-shell .wf-shell-rail-left:not(:hover) .wf-nav-menu li.list-group-item > a { justify-content: center !important; padding: 8px 0 !important; }
.wf-modern-shell .wf-shell-rail-left:not(:hover) .wf-nav-menu .wf-rail-section-header { visibility: hidden; height: 0; padding: 0; margin: 0; }

/* ────────────────────────────────────────────────────────────
   Canvas
   ──────────────────────────────────────────────────────────── */
.wf-modern-shell .wf-shell-canvas {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    background: var(--wf-canvas-bg);
}
.wf-modern-shell .wf-shell-canvas > .full-view {
    height: 100%;
    position: relative;
}

/* ────────────────────────────────────────────────────────────
   Right rail — drawer (closed by default, slides in)
   ──────────────────────────────────────────────────────────── */
.wf-modern-shell .wf-shell-rail-right {
    width: 0;
    flex-shrink: 0;
    background: var(--wf-chrome-bg);
    border-left: 1px solid var(--wf-border);
    transition: width 0.22s ease;
    overflow: hidden;
}
.wf-modern-shell .wf-shell-rail-right[data-state="open"] { width: var(--wf-right-w); }

/* ============================================================
   Footer
   ============================================================ */
.wf-modern-shell .wf-shell-footer {
    background: var(--wf-chrome-bg);
    border-top: 1px solid var(--wf-border);
    height: var(--wf-footer-h);
    display: flex;
    align-items: center;
    gap: var(--wf-sp-3);
    padding: 0 var(--wf-sp-3);
    font-size: 11px;
    color: var(--wf-fg-muted);
    flex-shrink: 0;
}
.wf-modern-shell .wf-shell-footer .wf-shell-divider-h { color: var(--wf-border); }

/* ================================================================
   DW-2774 — Modern Sidebar (pl-tabs-vertical pattern)
   Targets modern template classes in .wf-modern-left-nav-menu-tpl.
   48px collapsed (icon-only), drag-to-resize up to 240px.
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- Full-view becomes flex row so sidebar + content sit side-by-side ---- */
div.workflow.wf-design-modern .full-view,
body.wf-design-modern .full-view {
    display: flex !important;
    flex-direction: row !important;
}

/* ---- Sidebar container — no longer absolute, participates in flex ---- */
div.workflow.wf-design-modern .wf-nav-menu,
body.wf-design-modern .wf-nav-menu {
    position: relative !important;
    width: var(--wf-sidebar-w) !important;
    min-width: 48px !important;
    max-width: 240px !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important;
    background: var(--wf-bg-sidebar) !important;
    border-right: 1px solid var(--wf-border) !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: var(--wf-z-sidebar) !important;
    transition: width 0.15s ease;
    flex-shrink: 0 !important;
    -webkit-font-smoothing: antialiased;
}

/* ---- Tab content fills remaining space ---- */
div.workflow.wf-design-modern .full-view > .tab-content,
body.wf-design-modern .full-view > .tab-content,
div.workflow.wf-design-modern .full-view > .wf-tabs,
body.wf-design-modern .full-view > .wf-tabs,
body.wf-design-modern .full-view > .wf-data-view {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative;
    z-index: 1;
}

/* ---- Other siblings inside full-view need proper stacking ---- */
div.workflow.wf-design-modern .full-view > .wf-view-toggle,
body.wf-design-modern .full-view > .wf-view-toggle {
    left: calc(var(--wf-sidebar-w, 48px) + 12px) !important;
}

/* ---- Nav menu groups — vertical flex ---- */
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
body.wf-design-modern .wf-nav-menu .wf-nav-menu-groups {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: var(--wf-sp-1) 0 !important;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical {
    list-style: none !important;
    padding: var(--wf-sp-1) 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Bottom section pushed to bottom */
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-bottom,
body.wf-design-modern .wf-nav-menu .wf-sidebar-bottom {
    margin-top: auto;
    padding: var(--wf-sp-2) 0;
    border-top: 1px solid var(--wf-border);
}

/* ---- Sidebar items ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li {
    position: relative !important;
    overflow: visible !important;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 3px;
    color: var(--wf-text-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.12s ease;
    border-left: 3px solid transparent;
}

div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a > i,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a > i {
    font-size: 16px !important;
    color: inherit !important;
}

/* Override classic list-group-item padding and borders */
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id],
body.wf-design-modern .wf-nav-menu-groups li[data-id],
div.workflow.wf-design-modern .wf-nav-menu .list-group-item,
body.wf-design-modern .wf-nav-menu .list-group-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id]:hover,
body.wf-design-modern .wf-nav-menu-groups li[data-id]:hover,
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id].open,
body.wf-design-modern .wf-nav-menu-groups li[data-id].open {
    background: transparent !important;
}

/* Also style list-group-item anchors (classic nav items) */
div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a,
body.wf-design-modern .wf-nav-menu .list-group-item > a,
div.workflow.wf-design-modern .wf-nav-menu-groups li[data-id] > a,
body.wf-design-modern .wf-nav-menu-groups li[data-id] > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    gap: 3px !important;
    color: var(--wf-text-muted) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.12s ease;
    border-left: 3px solid transparent;
    background: transparent !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a > i,
body.wf-design-modern .wf-nav-menu .list-group-item > a > i {
    font-size: 16px !important;
    color: inherit !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item > a:hover,
body.wf-design-modern .wf-nav-menu .list-group-item > a:hover {
    background: rgba(59, 130, 246, 0.08) !important;
    color: var(--wf-text-secondary) !important;
}

div.workflow.wf-design-modern .wf-nav-menu .list-group-item.active > a,
body.wf-design-modern .wf-nav-menu .list-group-item.active > a {
    border-left-color: var(--wf-accent) !important;
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--wf-accent) !important;
}

/* ---- Labels — shown as small uppercase text below icon ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu .pl-tab-item-label {
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.12s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: inherit;
}

/* Force hide ALL labels in collapsed modern sidebar */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .nav-menu-item-label,
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tab-item-label {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Override classic data-show-labels="true" in collapsed state */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .wf-nav-menu-groups[data-show-labels="true"] .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .wf-nav-menu-groups[data-show-labels="true"] .nav-menu-item-label {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ---- Hover state ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a:hover,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li > a:hover {
    background: rgba(59, 130, 246, 0.08);
    color: var(--wf-text-secondary) !important;
}

/* ---- Active state — left accent border ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.active > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.active > a,
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical > li.list-group-item.active > a {
    border-left-color: var(--wf-accent);
    background: rgba(59, 130, 246, 0.12);
    color: var(--wf-accent) !important;
}

/* ---- Tooltip on hover (collapsed mode) ---- */
/* Hidden by default — fully suppress pseudo-element to prevent height/layout bleed */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]::after,
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li.list-group-item::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li.list-group-item::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after {
    content: attr(data-tooltip) !important;
    display: block !important;
    position: absolute !important;
    left: calc(100% + 8px) !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box;
    background-color: #1e293b !important;
    color: #fff !important;
    padding: 5px 12px !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    line-height: 1.4 !important;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    pointer-events: none;
    overflow: visible !important;
}

/* Tooltip arrow (pointing left toward the nav item) */
div.workflow.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before,
body.wf-design-modern .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: calc(100% + 2px) !important;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border: 6px solid transparent !important;
    border-right-color: #1e293b !important;
    border-left: none !important;
    z-index: 9999;
    pointer-events: none;
}

/* Dark mode tooltip — lighter bg so it contrasts with dark sidebar */
div.workflow.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after,
body.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::after {
    background-color: #334155 !important;
    color: #F1F5F9 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
div.workflow.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before,
body.wf-design-modern.wf-dark .wf-nav-menu:not(.is-expanded) .pl-tabs-vertical > li[data-tooltip]:hover::before {
    border-right-color: #334155 !important;
}

/* Ensure sidebar overflow doesn't clip tooltips */
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
body.wf-design-modern .wf-nav-menu .wf-nav-menu-groups,
div.workflow.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
body.wf-design-modern .wf-nav-menu .pl-tabs-vertical,
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-bottom,
body.wf-design-modern .wf-nav-menu .wf-sidebar-bottom {
    overflow: visible !important;
}

/* ---- Expanded state (.is-expanded via JS resize) ---- */
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a,
body.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 14px !important;
    gap: 10px !important;
    border-left: 3px solid transparent;
}

div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a > i,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li > a > i,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a > i,
body.wf-design-modern .wf-nav-menu.is-expanded .list-group-item > a > i {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tab-item-label,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tab-item-label,
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .nav-menu-item-label,
body.wf-design-modern .wf-nav-menu.is-expanded .nav-menu-item-label {
    display: inline !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    overflow: visible !important;
    white-space: nowrap;
    color: inherit;
    line-height: 1;
}

/* Hide tooltips when expanded */
div.workflow.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li::after,
body.wf-design-modern .wf-nav-menu.is-expanded .pl-tabs-vertical > li::after {
    display: none !important;
}

/* ---- Resize handle (included in modern template) ---- */
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: var(--wf-border);
    z-index: 20;
    transition: background 0.12s ease;
}

div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle:hover,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle:hover,
div.workflow.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle.is-dragging,
body.wf-design-modern .wf-nav-menu .wf-sidebar-resize-handle.is-dragging {
    background: var(--wf-accent);
}

/* ---- Sidebar content wrapper (Shapes/Workers/Viz panels) ---- */
/* Override classic left: 75px to track modern sidebar width via CSS var */
div.workflow.wf-design-modern .wf-nav-menu-wrapper,
body.wf-design-modern .wf-nav-menu-wrapper {
    left: var(--wf-sidebar-w, 48px) !important;
    /* R0-3766 - neutralize the stale static inline width (Settings 760px etc.) that the classic-view
       tab-open handler leaves on the wrapper, which left blank space between the list and canvas
       after switching to Modern view. */
    width: auto !important;
    background: var(--wf-bg-surface) !important;
    border-right: 1px solid var(--wf-border) !important;
    box-shadow: var(--wf-sh-md) !important;
}

/* All elements with hardcoded left: 75px must track sidebar width in modern mode */
div.workflow.wf-design-modern .wf-main-container .wf-top-alert,
body.wf-design-modern .wf-main-container .wf-top-alert,
div.workflow.wf-design-modern .wf-main-container #birds-eye-view,
body.wf-design-modern .wf-main-container #birds-eye-view,
div.workflow.wf-design-modern .enableFMView .fm-view,
body.wf-design-modern .enableFMView .fm-view,
div.workflow.wf-design-modern .workflow-toc-toggle-btn,
body.wf-design-modern .workflow-toc-toggle-btn {
    left: var(--wf-sidebar-w, 48px) !important;
}

div.workflow.wf-design-modern .wf-main-container .wf-top-alert,
body.wf-design-modern .wf-main-container .wf-top-alert,
div.workflow.wf-design-modern .enableFMView .fm-view,
body.wf-design-modern .enableFMView .fm-view {
    width: calc(100% - var(--wf-sidebar-w, 48px)) !important;
}

/* ---- Preserve .hidden ---- */
div.workflow.wf-design-modern .wf-nav-menu .list-group-item.hidden,
body.wf-design-modern .wf-nav-menu .list-group-item.hidden,
div.workflow.wf-design-modern .wf-nav-menu li.hidden,
body.wf-design-modern .wf-nav-menu li.hidden {
    display: none !important;
}

/* ---- Hide classic toggle chevron + nav dots ---- */
div.workflow.wf-design-modern .wf-nav-menu .pl-toggle-sidebar,
body.wf-design-modern .wf-nav-menu .pl-toggle-sidebar,
div.workflow.wf-design-modern .wf-nav-menu .wf-nav-toggle,
body.wf-design-modern .wf-nav-menu .wf-nav-toggle {
    display: none !important;
}

/* Also hide the toggle when it appears inside the wrapper */
div.workflow.wf-design-modern .wf-nav-menu-wrapper .pl-toggle-sidebar,
body.wf-design-modern .wf-nav-menu-wrapper .pl-toggle-sidebar {
    display: none !important;
}

/* ---- Hide decision-validation-label overlays on canvas that bleed into nav area ---- */
div.workflow.wf-design-modern .wf-decision-validation-label,
body.wf-design-modern .wf-decision-validation-label {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
    border-radius: var(--wf-r-sm) !important;
}

/* ---- Override classic nav-menu height that clips sidebar ---- */
div.workflow.wf-design-modern .wf-nav-menu,
body.wf-design-modern .wf-nav-menu {
    height: 100% !important;
}

/* ---- Absolutely-positioned children inside full-view must account for sidebar ---- */
div.workflow.wf-design-modern .full-view > .wf-nav-menu-wrapper,
body.wf-design-modern .full-view > .wf-nav-menu-wrapper,
div.workflow.wf-design-modern .full-view > #birds-eye-view,
body.wf-design-modern .full-view > #birds-eye-view,
div.workflow.wf-design-modern .full-view > .wf-modal-backdrop,
body.wf-design-modern .full-view > .wf-modal-backdrop,
div.workflow.wf-design-modern .full-view > .wf-timeline-view,
body.wf-design-modern .full-view > .wf-timeline-view,
div.workflow.wf-design-modern .full-view > .wf-data-view,
body.wf-design-modern .full-view > .wf-data-view,
div.workflow.wf-design-modern .full-view > .wf-ancestry-view,
body.wf-design-modern .full-view > .wf-ancestry-view,
div.workflow.wf-design-modern .full-view > .error-details-container,
body.wf-design-modern .full-view > .error-details-container,
div.workflow.wf-design-modern .full-view > .wf-dropzone,
body.wf-design-modern .full-view > .wf-dropzone,
div.workflow.wf-design-modern .full-view > .d3view-side-modal,
body.wf-design-modern .full-view > .d3view-side-modal,
div.workflow.wf-design-modern .full-view > #workflow-logs-container,
body.wf-design-modern .full-view > #workflow-logs-container {
    /* These remain absolutely positioned but already sit after sidebar in flex flow */
}


/* ================================================================
   DW-2774 — Modern Worker Config Modal
   Scoped under .workflow-modal.wf-design-modern — zero impact on classic.
   Modal lives outside div.workflow, so tokens are re-declared here.
   ================================================================ */


/* ----------------------------------------------------------------
   1. TOKEN DECLARATIONS (mirror wf-modern-tokens.css)
   The modal is appended to <body>, outside div.workflow,
   so --wf-* vars from wf-modern-tokens.css don't cascade in.
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern {
    --wf-n-50:   var(--d3v-n-50,  #F8FAFC);
    --wf-n-100:  var(--d3v-n-100, #F1F5F9);
    --wf-n-200:  var(--d3v-n-200, #E2E8F0);
    --wf-n-300:  var(--d3v-n-300, #CBD5E1);
    --wf-n-400:  var(--d3v-n-400, #94A3B8);
    --wf-n-500:  var(--d3v-n-500, #64748B);
    --wf-n-600:  var(--d3v-n-600, #475569);
    --wf-n-700:  var(--d3v-n-700, #334155);
    --wf-n-800:  var(--d3v-n-800, #1E293B);
    --wf-n-900:  var(--d3v-n-900, #0F172A);

    --wf-bg-canvas:    var(--d3v-bg-secondary, #F8FAFC);
    --wf-bg-surface:   var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-elevated:  var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-sidebar:   var(--d3v-bg-primary, #FFFFFF);
    --wf-bg-input:     #F1F5F9;
    --wf-bg-card:      #F8FAFC;
    --wf-bg-card-hover:#F1F5F9;

    --wf-text-primary:   var(--d3v-text-primary,   #1E293B);
    --wf-text-secondary: var(--d3v-text-secondary,  #475569);
    --wf-text-muted:     var(--d3v-text-muted,      #94A3B8);
    --wf-text-disabled:  var(--d3v-n-300, #CBD5E1);

    --wf-border:        var(--d3v-border,        #E2E8F0);
    --wf-border-strong: var(--d3v-border-strong,  #CBD5E1);
    --wf-border-focus:  var(--d3v-accent,         #3B82F6);

    --wf-accent:       var(--d3v-accent,       #3B82F6);
    --wf-accent-hover: var(--d3v-accent-hover, #2563EB);
    --wf-accent-light: rgba(59, 130, 246, 0.10);
    --wf-accent-subtle:rgba(59, 130, 246, 0.05);

    --wf-success:      var(--d3v-success, #10B981);
    --wf-success-bg:   #D1FAE5;
    --wf-warning:      var(--d3v-warning, #F59E0B);
    --wf-warning-bg:   #FEF3C7;
    --wf-danger:       var(--d3v-danger, #EF4444);
    --wf-danger-bg:    #FEE2E2;

    --wf-node-coral:   #EF4444;
    --wf-node-blue:    #3B82F6;
    --wf-node-teal:    #14B8A6;
    --wf-node-gold:    #F59E0B;
    --wf-node-purple:  #8B5CF6;
    --wf-node-green:   #10B981;
    --wf-node-pink:    #EC4899;
    --wf-node-gray:    #94A3B8;
    --wf-node-orange:  #F97316;
    --wf-node-indigo:  #6366F1;

    --wf-sh-xs:  var(--d3v-sh-xs,  0 1px 2px rgba(0,0,0,0.05));
    --wf-sh-sm:  var(--d3v-sh-sm,  0 1px 3px rgba(0,0,0,0.08));
    --wf-sh-md:  var(--d3v-sh-md,  0 4px 12px rgba(0,0,0,0.10));
    --wf-sh-lg:  var(--d3v-sh-lg,  0 10px 25px rgba(0,0,0,0.12));

    --wf-r-sm:   var(--d3v-r-sm,   4px);
    --wf-r-md:   var(--d3v-r-md,   8px);
    --wf-r-lg:   var(--d3v-r-lg,   12px);
    --wf-r-xl:   var(--d3v-r-xl,   16px);

    --wf-t-fast:   var(--d3v-t-fast,   all 0.12s ease);
    --wf-t-base:   var(--d3v-t-base,   all 0.20s ease);
    --wf-t-smooth: var(--d3v-t-smooth, all 0.30s cubic-bezier(0.4, 0, 0.2, 1));

    --wf-grad-run:    linear-gradient(135deg, #10B981 0%, #059669 100%);
    --wf-grad-accent: var(--d3v-grad-accent, linear-gradient(135deg, #3B82F6 0%, #6366F1 100%));

    --wf-modal-sidebar-w: 56px;
}


/* ----------------------------------------------------------------
   1b. DARK MODE TOKEN OVERRIDES
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern.wf-dark {
    --wf-bg-canvas:     #1a1a2e;
    --wf-bg-surface:    #16213e;
    --wf-bg-elevated:   #1a2744;
    --wf-bg-sidebar:    #0f1629;
    --wf-bg-input:      #0f1629;
    --wf-bg-card:       #1a2744;
    --wf-bg-card-hover: #1f3050;

    --wf-text-primary:   #E2E8F0;
    --wf-text-secondary: #94A3B8;
    --wf-text-muted:     #64748B;
    --wf-text-disabled:  #475569;

    --wf-border:        rgba(148, 163, 184, 0.15);
    --wf-border-strong: rgba(148, 163, 184, 0.25);
    --wf-border-focus:  #60A5FA;

    --wf-accent-light:  rgba(59, 130, 246, 0.15);
    --wf-accent-subtle: rgba(59, 130, 246, 0.08);

    --wf-success-bg:    rgba(16, 185, 129, 0.15);
    --wf-warning-bg:    rgba(245, 158, 11, 0.15);
    --wf-danger-bg:     rgba(239, 68, 68, 0.15);

    --wf-sh-xs:  0 1px 2px rgba(0,0,0,0.20);
    --wf-sh-sm:  0 1px 3px rgba(0,0,0,0.30);
    --wf-sh-md:  0 4px 12px rgba(0,0,0,0.40);
    --wf-sh-lg:  0 10px 25px rgba(0,0,0,0.50);
}


/* ----------------------------------------------------------------
   2. MODAL SHELL
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-content {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-xl);
    box-shadow: var(--wf-sh-lg);
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-backdrop {
    background: rgba(15, 23, 42, 0.40);
}


/* ----------------------------------------------------------------
   3. MODAL HEADER
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-header {
    height: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    border-radius: 0;
}

.workflow-modal.wf-design-modern .modal-header h4,
.workflow-modal.wf-design-modern .modal-header .modal-title {
    color: var(--wf-text-primary);
    font-size: 15px;
    font-weight: 600;
}

/* Modern header icon badge */
.workflow-modal.wf-design-modern .wf-modern-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--wf-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: white;
    flex-shrink: 0;
}

/* Modern header subtitle */
.workflow-modal.wf-design-modern .wf-modern-subtitle {
    font-size: 11px;
    color: var(--wf-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.workflow-modal.wf-design-modern .wf-modern-subtitle .wf-modern-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* Header action buttons */
.workflow-modal.wf-design-modern .wf-modern-header-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    cursor: pointer;
    font-size: 14px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .wf-modern-header-btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .wf-modern-header-btn.close-btn:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

/* Pagination nav arrows */
.workflow-modal.wf-design-modern .pagination-btns li {
    background: transparent;
    border: none;
}

.workflow-modal.wf-design-modern .pagination-btns li a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    padding: 0;
}

.workflow-modal.wf-design-modern .pagination-btns li a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* Classic header elements adapted for modern design */
.workflow-modal.wf-design-modern .modal-header .row {
    flex: 1;
    min-width: 0;
}

.workflow-modal.wf-design-modern .modal-header .modal-title-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-title {
    overflow: hidden;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-title > .d3view-flex-v {
    margin-top: 4px;
}

.workflow-modal.wf-design-modern .modal-header .wf-worker-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .modal-header .wf-id-label {
    font-size: 10px;
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn,
.workflow-modal.wf-design-modern .modal-header > .d3view-flex-v > .btn-group .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    padding: 0;
    font-size: 14px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn:hover,
.workflow-modal.wf-design-modern .modal-header > .d3view-flex-v > .btn-group .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .modal-header .btn-group .btn#cancel:hover {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
}

.workflow-modal.wf-design-modern .modal-header .worker-header-options .btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wf-text-muted);
    border-radius: var(--wf-r-sm);
    padding: 0;
    font-size: 14px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .modal-header .worker-header-options .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ----------------------------------------------------------------
   4. MODAL FOOTER
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-footer {
    height: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 20px !important;
    gap: 8px;
    border-top: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    margin-top: 0;
    border-radius: 0;
    text-align: left;
}

/* Footer info text */
.workflow-modal.wf-design-modern .modal-footer .worker-lastupdated {
    font-size: 11px;
    color: var(--wf-text-muted);
    text-align: left;
}

/* Footer buttons */
.workflow-modal.wf-design-modern .modal-footer .btn {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--wf-r-md);
    font-size: 12px;
    font-weight: 600;
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workflow-modal.wf-design-modern .modal-footer .btn-default,
.workflow-modal.wf-design-modern .modal-footer .btn-outline {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .modal-footer .btn-default:hover,
.workflow-modal.wf-design-modern .modal-footer .btn-outline:hover {
    background: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .modal-footer .btn-primary,
.workflow-modal.wf-design-modern .modal-footer #apply {
    background: var(--wf-accent);
    color: white;
    border-color: var(--wf-accent);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer .btn-primary:hover,
.workflow-modal.wf-design-modern .modal-footer #apply:hover {
    background: var(--wf-accent-hover);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute {
    background: var(--wf-grad-run);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}


/* ----------------------------------------------------------------
   5. SIDEBAR TABS (.wf-tabs .pl-tabs-vertical)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-tabs {
    width: var(--wf-modal-sidebar-w) !important;
    flex: 0 0 var(--wf-modal-sidebar-w) !important;
    background: var(--wf-bg-sidebar);
    border-right: 1px solid var(--wf-border) !important;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                flex 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: relative;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 4px;
    color: var(--wf-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: var(--wf-t-fast);
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    border-bottom: none;
    background: transparent;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a:hover {
    background: var(--wf-accent-subtle);
    color: var(--wf-text-secondary);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item.active > a,
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a.active {
    border-left-color: var(--wf-accent);
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > i {
    font-size: 15px;
}

/* Tab labels — hidden in collapsed, visible when expanded */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > .pl-tab-item-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.workflow-modal.wf-design-modern .wf-tabs.is-expanded .pl-tabs-vertical .list-group-item > a > .pl-tab-item-label {
    opacity: 1;
    width: auto;
}

/* Sidebar resize handle */
.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}

.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle:hover,
.workflow-modal.wf-design-modern .wf-modal-sidebar-resize-handle.dragging {
    background: var(--wf-accent);
}

/* Sidebar tooltip on hover (collapsed mode) */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--wf-modal-sidebar-w) + 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    padding: 4px 10px;
    border-radius: var(--wf-r-sm);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border-strong);
    z-index: 100;
}

.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item[data-tooltip]:hover::after {
    opacity: 1;
}

.workflow-modal.wf-design-modern .wf-tabs.is-expanded .pl-tabs-vertical .list-group-item[data-tooltip]::after {
    display: none;
}


/* ----------------------------------------------------------------
   6. TAB CONTENT AREA
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .tab-content {
    background: var(--wf-bg-surface);
    overflow: auto;
}

.workflow-modal.wf-design-modern .tab-pane {
    background: var(--wf-bg-surface);
}

/* Main flex container */
.workflow-modal.wf-design-modern .wf-worker-inputs-outputs {
    background: var(--wf-bg-surface);
}


/* ----------------------------------------------------------------
   7. INPUT CARDS (li.field-item)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern li.field-item {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern li.field-item:hover {
    border-color: var(--wf-border-strong);
    background: var(--wf-bg-card-hover);
    box-shadow: var(--wf-sh-xs);
}

/* Field name / label */
.workflow-modal.wf-design-modern li.field-item .field-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern li.field-item .field-name .label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* Required asterisk */
.workflow-modal.wf-design-modern li.field-item .required-asterisk {
    color: var(--wf-danger);
}

/* Help/description text */
.workflow-modal.wf-design-modern li.field-item .help-block {
    font-size: 10px;
    color: var(--wf-text-disabled);
    margin-top: 6px;
}


/* ----------------------------------------------------------------
   8. FORM INPUTS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern input.form-control,
.workflow-modal.wf-design-modern textarea.form-control {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none;
    box-shadow: none;
}

.workflow-modal.wf-design-modern textarea.form-control {
    height: auto;
    padding: 8px 12px;
    min-height: 64px;
}

.workflow-modal.wf-design-modern input.form-control:focus,
.workflow-modal.wf-design-modern textarea.form-control:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern input.form-control::placeholder,
.workflow-modal.wf-design-modern textarea.form-control::placeholder {
    color: var(--wf-text-disabled);
}

/* Labels */
.workflow-modal.wf-design-modern label {
    color: var(--wf-text-secondary);
    font-size: 12px;
    font-weight: 500;
}


/* ----------------------------------------------------------------
   9. FILE INPUT / BADGE
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-secondary);
    font-size: 12px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .file-badge:hover {
    border-color: var(--wf-accent);
    background: var(--wf-accent-subtle);
}


/* ----------------------------------------------------------------
   10. ACTION BUTTONS (Upload / Extract / Remove bar)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .btn-group-xs > .btn,
.workflow-modal.wf-design-modern .btn-xs {
    height: 32px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Upload/action buttons in field items */
.workflow-modal.wf-design-modern li.field-item .btn-default {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern li.field-item .btn-default:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

.workflow-modal.wf-design-modern li.field-item .btn-primary {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern li.field-item .btn-primary:hover {
    background: var(--wf-accent);
    color: white;
}

.workflow-modal.wf-design-modern li.field-item .btn-danger {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern li.field-item .btn-danger:hover {
    background: var(--wf-danger);
    color: white;
}


/* Removed by shashank2104 on 2026-07-23 - R2026-51 - the HANDSONTABLE section that used to sit here
   was deleted (hence the section-number gap). It duplicated FormBuilder's modern table skin
   (fb_list.css, [data-ui-theme="modern"] li.field-item .handsontable_container) but every declaration
   was !important, so it won inside the worker-config modal: curve / dataset grids there rendered with a
   different header, a smaller font and - under .wf-dark - a dark fill on a light form. FormBuilder owns
   that table everywhere now; style it in fb_list.css, not here. */


/* ----------------------------------------------------------------
   12. SELECT2
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .select2-container .select2-choice {
    height: 36px;
    line-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .select2-container .select2-choice:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .select2-container-active .select2-choice {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.workflow-modal.wf-design-modern .select2-container .select2-choice .select2-arrow {
    background: transparent;
    border-left: none;
}

/* Multi-select */
.workflow-modal.wf-design-modern .select2-container-multi .select2-choices {
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    padding: 4px;
    min-height: 36px;
    transition: var(--wf-t-fast);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .select2-container-multi .select2-choices:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

.workflow-modal.wf-design-modern .select2-container-multi .select2-choices .select2-search-choice {
    background: var(--wf-accent-light);
    border: 1px solid transparent;
    border-radius: var(--wf-r-sm);
    color: var(--wf-accent);
    font-size: 12px;
    padding: 2px 8px;
    box-shadow: none;
}

.workflow-modal .select2-results .select2-result-label,
.sl-select2.workflow-modal .select2-results .select2-result-label {
    color: var(--wf-text-primary);
    font-size: 13px;
    padding: 6px 12px;
}

.workflow-modal .select2-results .select2-highlighted,
.sl-select2.workflow-modal .select2-results .select2-highlighted {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* ----------------------------------------------------------------
   13. OUTPUT CARDS (#wf-worker-outputs li.field-item)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    overflow: hidden;
}

.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item:hover {
    border-color: var(--wf-border-strong);
    box-shadow: var(--wf-sh-xs);
}

/* Output preview area */
/** Updated by shashank2104 on 2026-04-02 - DW-2795 - Increase max-height so keyvalue outputs show full view **/
.workflow-modal.wf-design-modern .worker-output-preview {
    padding: 10px 14px;
    border-top: 1px solid var(--wf-border);
    background: var(--wf-bg-input);
    font-size: 11px;
    color: var(--wf-text-secondary);
    max-height: 300px;
    overflow-y: auto;
}

.workflow-modal.wf-design-modern .worker-output-preview.kv-preview {
    max-height: 400px;
}

/* Output field label */
.workflow-modal.wf-design-modern #wf-worker-outputs .field-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-primary);
}

/* Output label badges */
.workflow-modal.wf-design-modern #wf-worker-outputs .label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
}

/* Ellipsis menu button */
.workflow-modal.wf-design-modern .op-ellipsis-menu .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--wf-text-muted);
    border: none;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .op-ellipsis-menu .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}


/* ----------------------------------------------------------------
   14. OPTIONS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv-container {
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv {
    border-right-color: var(--wf-border) !important;
    background: var(--wf-bg-sidebar);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .basic-options-container {
    padding: 16px;
}

/* Option form inputs */
.workflow-modal.wf-design-modern #wf-worker-configuration .form-group {
    margin-bottom: 16px;
}


/* ----------------------------------------------------------------
   15. VALIDATIONS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-validations {
    padding: 16px;
}

.workflow-modal.wf-design-modern .validations-list li {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 14px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern .validations-list li:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern #add-validation-row {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border: 1px dashed var(--wf-accent);
    border-radius: var(--wf-r-md);
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern #add-validation-row:hover {
    background: var(--wf-accent);
    color: white;
    border-style: solid;
}


/* ----------------------------------------------------------------
   16. LOGS TAB
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .execution-log {
    background: var(--wf-bg-input);
    border-top: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .logs-container {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--wf-text-secondary);
    padding: 12px;
}

.workflow-modal.wf-design-modern .execution-log-header {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-muted);
    font-size: 11px;
    font-weight: 600;
}


/* ----------------------------------------------------------------
   17. GENERAL BUTTONS (inside modal)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .btn {
    transition: var(--wf-t-fast);
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern .btn-sm {
    /* height: 32px; */
    /* font-size: 12px; */
    /* font-weight: 500; */
    /* padding: 0 12px; */
    /* display: inline-flex; */
    align-items: center;
    gap: 5px;
}

.workflow-modal.wf-design-modern .btn-default {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-secondary);
    border: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .btn-default:hover {
    background: var(--wf-bg-card-hover);
    border-color: var(--wf-border-strong);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .btn-primary {
    background: var(--wf-accent);
    color: white;
    border-color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .btn-primary:hover {
    background: var(--wf-accent-hover);
}

.workflow-modal.wf-design-modern .btn-success {
    background: var(--wf-grad-run);
    color: white;
    border: none;
}

.workflow-modal.wf-design-modern .btn-danger {
    background: var(--wf-danger-bg);
    color: var(--wf-danger);
    border: 1px solid transparent;
}

.workflow-modal.wf-design-modern .btn-danger:hover {
    background: var(--wf-danger);
    color: white;
}

/* Dropdown menus */
.workflow-modal.wf-design-modern .dropdown-menu {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-sh-lg);
    padding: 4px;
}

.workflow-modal.wf-design-modern .dropdown-menu > li > a {
    color: var(--wf-text-primary);
    padding: 6px 12px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
}

.workflow-modal.wf-design-modern .dropdown-menu > li > a:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .dropdown-menu .divider {
    background: var(--wf-border);
    margin: 4px 0;
}


/* ----------------------------------------------------------------
   18. BREADCRUMBS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

.workflow-modal.wf-design-modern .breadcrumb > li {
    color: var(--wf-text-muted);
}

.workflow-modal.wf-design-modern .breadcrumb > li > a {
    color: var(--wf-accent);
}

.workflow-modal.wf-design-modern .breadcrumb > .active {
    color: var(--wf-text-primary);
}


/* ----------------------------------------------------------------
   19. INPUTS/OUTPUTS HEADER BAR
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-worker-config-view .row.io-header {
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    padding: 8px 16px;
}

/* View type buttons */
.workflow-modal.wf-design-modern .view-type-selector .btn {
    background: transparent;
    color: var(--wf-text-muted);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-sm);
    font-size: 11px;
}

.workflow-modal.wf-design-modern .view-type-selector .btn:hover,
.workflow-modal.wf-design-modern .view-type-selector .btn.active {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}

/* Nav tabs (input group tabs: Basic, Advanced, etc.) */
.workflow-modal.wf-design-modern .nav-tabs {
    border-bottom: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .nav-tabs > li > a {
    color: var(--wf-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary);
    background: transparent;
    border-bottom-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .nav-tabs > li.active > a,
.workflow-modal.wf-design-modern .nav-tabs > li.active > a:hover {
    color: var(--wf-accent);
    border-bottom-color: var(--wf-accent);
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

/* Tab badge/count */
.workflow-modal.wf-design-modern .nav-tabs .badge {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}


/* ----------------------------------------------------------------
   20. SCROLLBARS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-track {
    background: transparent;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-thumb {
    background: var(--wf-border);
    border-radius: 3px;
}

.workflow-modal.wf-design-modern ::-webkit-scrollbar-thumb:hover {
    background: var(--wf-border-strong);
}


/* ----------------------------------------------------------------
   21. PANELS & WELLS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .panel {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
}

.workflow-modal.wf-design-modern .panel-heading {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-primary);
    border-radius: var(--wf-r-md) var(--wf-r-md) 0 0;
}

.workflow-modal.wf-design-modern .well {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    box-shadow: none;
}


/* ----------------------------------------------------------------
   22. MODAL BODY
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-body {
    background: var(--wf-bg-surface);
    padding: 0;
}


/* ----------------------------------------------------------------
   23. TYPOGRAPHY OVERRIDES
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern {
    color: var(--wf-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.workflow-modal.wf-design-modern h1,
.workflow-modal.wf-design-modern h2,
.workflow-modal.wf-design-modern h3,
.workflow-modal.wf-design-modern h4 {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .text-muted {
    color: var(--wf-text-muted) !important;
}


/* ----------------------------------------------------------------
   24. TOOLTIPS
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .tooltip .tooltip-inner {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
    border: 1px solid var(--wf-border-strong);
    border-radius: var(--wf-r-sm);
    font-size: 12px;
    box-shadow: var(--wf-sh-md);
    padding: 4px 10px;
}

.workflow-modal.wf-design-modern .tooltip .tooltip-arrow {
    display: none;
}


/* ----------------------------------------------------------------
   25. WORKER NAME INPUT (Customize worker name)
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .wf-worker-config-view > .tab-content > .tab-pane > .input-group,
.workflow-modal.wf-design-modern .wf-worker-config-view input[placeholder*="worker name"],
.workflow-modal.wf-design-modern .wf-worker-config-view input[placeholder*="Customize"] {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .input-group {
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern .input-group .form-control {
    background: var(--wf-bg-input);
    border-color: var(--wf-border);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern .input-group .input-group-btn .btn,
.workflow-modal.wf-design-modern .input-group-addon {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border);
    color: var(--wf-text-secondary);
}


/* ----------------------------------------------------------------
   26. OPTIONS TAB — deeper styling for tree view + form controls
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-configuration {
    background: var(--wf-bg-surface);
}

/* Tree view sidebar items */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a {
    color: var(--wf-text-secondary);
    padding: 8px 12px;
    display: block;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
    text-decoration: none;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a:hover {
    background: var(--wf-accent-subtle);
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv a.active,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .active > a {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    font-weight: 600;
}

/* Toggle switch styling in options */
.workflow-modal.wf-design-modern .bootstrap-switch {
    border-color: var(--wf-border);
    border-radius: 12px;
}

.workflow-modal.wf-design-modern .bootstrap-switch .bootstrap-switch-handle-on {
    background: var(--wf-accent);
    color: white;
    border-radius: 10px;
}

.workflow-modal.wf-design-modern .bootstrap-switch .bootstrap-switch-handle-off {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-muted);
    border-radius: 10px;
}

/* Form rows in options */
.workflow-modal.wf-design-modern #wf-worker-configuration .row {
    border-bottom: 1px solid var(--wf-border);
    padding: 12px 0;
    margin: 0;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .row:last-child {
    border-bottom: none;
}

/* Select dropdowns in options */
.workflow-modal.wf-design-modern #wf-worker-configuration select.form-control {
    height: 36px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern #wf-worker-configuration select.form-control:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Option labels */
.workflow-modal.wf-design-modern #wf-worker-configuration label,
.workflow-modal.wf-design-modern #wf-worker-configuration .control-label {
    color: var(--wf-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

/* Options section headers */
.workflow-modal.wf-design-modern .toggle-worker-info-group {
    color: var(--wf-text-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 8px 0;
    display: block;
}


/* ----------------------------------------------------------------
   27. VALIDATIONS TAB — deeper styling for condition rows
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern #wf-worker-validations {
    background: var(--wf-bg-surface);
}

/* Decision name row */
.workflow-modal.wf-design-modern #wf-worker-validations .row {
    padding: 12px 16px;
    margin: 0;
}

/* Validation list items */
.workflow-modal.wf-design-modern #wf-worker-validations .validations-list {
    padding: 0 16px 16px;
    list-style: none;
}

/* Select inputs inside validations */
.workflow-modal.wf-design-modern #wf-worker-validations select.form-control,
.workflow-modal.wf-design-modern #wf-worker-validations .selectpicker-wf {
    height: 36px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
}


/* ----------------------------------------------------------------
   28. DARK MODE — comprehensive overrides for white backgrounds
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern.wf-dark {
    color: var(--wf-text-primary);
}

/* Force all common containers to dark bg */
.workflow-modal.wf-design-modern.wf-dark .modal-content,
.workflow-modal.wf-design-modern.wf-dark .modal-body,
.workflow-modal.wf-design-modern.wf-dark .tab-content,
.workflow-modal.wf-design-modern.wf-dark .tab-pane,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-inputs-outputs,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-view {
    background: var(--wf-bg-surface) !important;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .modal-header,
.workflow-modal.wf-design-modern.wf-dark .modal-footer {
    background: var(--wf-bg-surface) !important;
    border-color: var(--wf-border) !important;
}

/* Dark sidebar */
.workflow-modal.wf-design-modern.wf-dark .wf-tabs {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

/* Dark input cards */
.workflow-modal.wf-design-modern.wf-dark li.field-item {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark li.field-item:hover {
    background: var(--wf-bg-card-hover) !important;
}

/* Dark form controls */
.workflow-modal.wf-design-modern.wf-dark input.form-control,
.workflow-modal.wf-design-modern.wf-dark textarea.form-control,
.workflow-modal.wf-design-modern.wf-dark select.form-control {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark text everywhere */
.workflow-modal.wf-design-modern.wf-dark .field-name,
.workflow-modal.wf-design-modern.wf-dark h2,
.workflow-modal.wf-design-modern.wf-dark h3,
.workflow-modal.wf-design-modern.wf-dark h4,
.workflow-modal.wf-design-modern.wf-dark label,
.workflow-modal.wf-design-modern.wf-dark .control-label,
.workflow-modal.wf-design-modern.wf-dark span,
.workflow-modal.wf-design-modern.wf-dark p,
.workflow-modal.wf-design-modern.wf-dark a {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .help-block,
.workflow-modal.wf-design-modern.wf-dark .text-muted {
    color: var(--wf-text-muted) !important;
}

/* Dark options tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
    border-right-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .basic-options-container {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .row {
    border-bottom-color: var(--wf-border);
}

/* Dark validations tab */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-validations {
    background: var(--wf-bg-surface) !important;
}

.workflow-modal.wf-design-modern.wf-dark .validations-list li {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
}

/* Dark dropdown menus */
.workflow-modal.wf-design-modern.wf-dark .dropdown-menu {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a {
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .dropdown-menu > li > a:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Dark Select2 */
.workflow-modal.wf-design-modern.wf-dark .select2-container .select2-choice {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .select2-container-multi .select2-choices {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
}

/* Dark panels */
.workflow-modal.wf-design-modern.wf-dark .panel,
.workflow-modal.wf-design-modern.wf-dark .well {
    background: var(--wf-bg-card) !important;
    border-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .panel-heading {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark input-group */
.workflow-modal.wf-design-modern.wf-dark .input-group .form-control {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .input-group-addon,
.workflow-modal.wf-design-modern.wf-dark .input-group .input-group-btn .btn {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

/* Dark buttons */
.workflow-modal.wf-design-modern.wf-dark .btn-default {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .btn-default:hover {
    background: var(--wf-bg-card-hover) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark nav-tabs */
.workflow-modal.wf-design-modern.wf-dark .nav-tabs {
    border-bottom-color: var(--wf-border) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li > a {
    color: var(--wf-text-muted) !important;
}

.workflow-modal.wf-design-modern.wf-dark .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    background: transparent !important;
    border-bottom-color: var(--wf-accent) !important;
}

/* Dark breadcrumbs */
.workflow-modal.wf-design-modern.wf-dark .breadcrumb {
    background: transparent !important;
}

.workflow-modal.wf-design-modern.wf-dark .breadcrumb > li {
    color: var(--wf-text-muted) !important;
}

/* Dark execution log */
.workflow-modal.wf-design-modern.wf-dark .execution-log {
    background: var(--wf-bg-input) !important;
}

.workflow-modal.wf-design-modern.wf-dark .logs-container {
    color: var(--wf-text-secondary) !important;
}

/* Dark worker name input */
.workflow-modal.wf-design-modern.wf-dark input[placeholder*="worker name"],
.workflow-modal.wf-design-modern.wf-dark input[placeholder*="Customize"] {
    background: var(--wf-bg-input) !important;
    border-color: var(--wf-border) !important;
    color: var(--wf-text-primary) !important;
}

/* Dark output previews */
.workflow-modal.wf-design-modern.wf-dark .worker-output-preview {
    background: var(--wf-bg-input) !important;
    color: var(--wf-text-secondary) !important;
}

/* Dark scrollbars */
.workflow-modal.wf-design-modern.wf-dark ::-webkit-scrollbar-thumb {
    background: var(--wf-border-strong);
}


/* ================================================================
   29. DW-2774 COMPREHENSIVE MODERN POLISH
   Fixes gaps in dark mode, unstyled elements, and polish to
   match the worker-config-sketch.html design spec.
   ================================================================ */

/* ---- 29a. Page / body background when used standalone ---- */
/** Updated by shashank2104 on 2026-08-19 - R2026-189 - was `body:has(.workflow-modal...)`.
 *  A :has() whose SUBJECT is body is the worst-case selector: body's computed style inherits to the
 *  whole document, so Chrome re-tests it after ANY DOM mutation anywhere and then re-resolves
 *  everything beneath it. Measured on a Simlytiks page these rules alone made every forced layout
 *  read cost 11.2ms instead of 2.1ms - on every page that loads workflow.css, not just the builder.
 *  ConfigureWfWorker now mirrors the modal's state onto body as wf-modal-modern / wf-modal-dark. **/
body.wf-modal-modern.wf-modal-dark {
    background: #1a1a2e !important;
    color: #E2E8F0 !important;
}

/* Fallback for browsers without :has() — scope to worker.html test page */
.workflow-modal.wf-design-modern.wf-dark {
    background: var(--wf-bg-surface);
}

/* Also style the body-level file input that sits outside the modal scope */
body.wf-modal-modern.wf-modal-dark > input[type="file"] {
    background: #16213e !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    border-radius: 8px !important;
    color: #E2E8F0 !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 8px 16px !important;
}

/* Alert boxes */
.workflow-modal.wf-design-modern.wf-dark .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid var(--wf-border) !important;
    color: #93C5FD !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-warning {
    background: var(--wf-warning-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-warning) !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-danger {
    background: var(--wf-danger-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-danger) !important;
    border-radius: var(--wf-r-md);
}

.workflow-modal.wf-design-modern.wf-dark .alert-success {
    background: var(--wf-success-bg) !important;
    border: 1px solid var(--wf-border) !important;
    color: var(--wf-success) !important;
    border-radius: var(--wf-r-md);
}

/* ---- 29b. Worker name input group — modern inline treatment ---- */
.workflow-modal.wf-design-modern .name-container {
    padding: 12px 16px 8px;
    background: transparent;
}

/* Override Bootstrap table-layout so input + addon buttons sit inline */
.workflow-modal.wf-design-modern .name-container .input-group {
    display: flex !important;
    align-items: center;
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    overflow: hidden;
    transition: var(--wf-t-fast);
    box-shadow: var(--wf-sh-xs);
    height: 40px;
}

.workflow-modal.wf-design-modern .name-container .input-group:hover,
.workflow-modal.wf-design-modern .name-container .input-group:focus-within {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* The text input — stretches to fill */
.workflow-modal.wf-design-modern .name-container .input-group .form-control,
.workflow-modal.wf-design-modern .name-container .input-group .form-control.input-lg {
    flex: 1 1 auto;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 38px !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--wf-text-primary);
    padding: 0 14px;
    width: auto;
    display: block;
}

.workflow-modal.wf-design-modern .name-container .input-group .form-control::placeholder {
    color: var(--wf-text-disabled);
    font-weight: 400;
}

/* Addon buttons (edit, trash, refresh) — fixed-width icon buttons */
.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--wf-border) !important;
    border-radius: 0 !important;
    color: var(--wf-text-muted) !important;
    font-size: 13px;
    cursor: pointer;
    transition: var(--wf-t-fast);
    float: none !important;
}

.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Danger variant (trash button) */
.workflow-modal.wf-design-modern .name-container .input-group > .input-group-addon.btn-danger:hover {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}


/* ---- 29c. Docked heading (Inputs / Outputs header bar) ---- */
.workflow-modal.wf-design-modern .docked-heading {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    min-height: 44px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    gap: 12px;
}

.workflow-modal.wf-design-modern .docked-heading h5,
.workflow-modal.wf-design-modern .docked-heading .heading-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--wf-text-primary);
    margin: 0;
}

.workflow-modal.wf-design-modern .docked-heading .fa-search,
.workflow-modal.wf-design-modern .docked-heading .search-icon {
    color: var(--wf-text-muted);
    cursor: pointer;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern .docked-heading .fa-search:hover {
    color: var(--wf-accent);
}


/* ---- 29c2. Input/Output card containers — breathing room from edges ---- */

/* Input cards list — the UL wrapping li.field-item */
.workflow-modal.wf-design-modern .wf-builder-inputs-list ul.ui-selectable,
.workflow-modal.wf-design-modern .worker-groups .tab-pane > ul {
    padding: 12px 16px !important;
}

/* The scrollable input list wrapper */
.workflow-modal.wf-design-modern .wf-builder-inputs-list {
    padding: 0;
}

/* Output cards container — #wf-worker-outputs IS .worker-outputs */
.workflow-modal.wf-design-modern .worker-outputs,
.workflow-modal.wf-design-modern #wf-worker-outputs {
    padding: 12px 16px !important;
    border-left: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .worker-outputs > ul,
.workflow-modal.wf-design-modern #wf-worker-outputs > ul {
    list-style: none;
    padding: 0;
}


/* ---- 29d. Inputs/Outputs tab bar (horizontal tabs inside worker content) ---- */
.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs {
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    padding: 0 16px;
    margin: 0;
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li > a,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li > a {
    color: var(--wf-text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 10px 14px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: var(--wf-t-fast);
    margin: 0;
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li > a:hover,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li > a:hover {
    color: var(--wf-text-secondary);
    background: transparent;
    border-bottom-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern .wf-worker-config-container .nav-tabs > li.active > a,
.workflow-modal.wf-design-modern .ui-layout-container .nav-tabs > li.active > a {
    color: var(--wf-accent) !important;
    border-bottom-color: var(--wf-accent) !important;
    background: transparent !important;
    border-top: none;
    border-left: none;
    border-right: none;
}


/* ---- 29e. View Type / toolbar buttons ---- */
.workflow-modal.wf-design-modern .view-type-selector,
.workflow-modal.wf-design-modern .io-header .btn-group {
    display: inline-flex;
    gap: 2px;
}

.workflow-modal.wf-design-modern .io-header {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 8px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-surface);
    min-height: 40px;
}

.workflow-modal.wf-design-modern .io-header .btn {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--wf-r-sm);
    background: transparent;
    color: var(--wf-text-muted);
    border: 1px solid var(--wf-border);
    transition: var(--wf-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.workflow-modal.wf-design-modern .io-header .btn:hover {
    border-color: var(--wf-border-strong);
    color: var(--wf-text-secondary);
    background: var(--wf-accent-subtle);
}

.workflow-modal.wf-design-modern .io-header .btn.active,
.workflow-modal.wf-design-modern .io-header .btn.selected {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
    border-color: var(--wf-accent);
}


/* ---- 29f. File upload / dropzone area ---- */
.workflow-modal.wf-design-modern .dropzone-file-uploader,
.workflow-modal.wf-design-modern .dropzone,
.workflow-modal.wf-design-modern [class*="drop-zone"],
.workflow-modal.wf-design-modern .upload-area {
    background: var(--wf-bg-input);
    border: 1px dashed var(--wf-border-strong);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-muted);
    padding: 20px;
    text-align: center;
    transition: var(--wf-t-fast);
    cursor: pointer;
    font-size: 12px;
}

.workflow-modal.wf-design-modern .dropzone-file-uploader:hover,
.workflow-modal.wf-design-modern .dropzone:hover,
.workflow-modal.wf-design-modern [class*="drop-zone"]:hover,
.workflow-modal.wf-design-modern .upload-area:hover {
    border-color: var(--wf-accent);
    background: var(--wf-accent-subtle);
    color: var(--wf-accent);
}

/* Native file input — hide or style */
.workflow-modal.wf-design-modern input[type="file"] {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    color: var(--wf-text-primary);
    font-size: 12px;
    padding: 6px 10px;
}


/* ---- 29g. Native <select> elements ---- */
.workflow-modal.wf-design-modern select.form-control,
.workflow-modal.wf-design-modern select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background-color: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394A3B8' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.workflow-modal.wf-design-modern select.form-control:focus,
.workflow-modal.wf-design-modern select:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}

/* Select option styling for dark mode */
.workflow-modal.wf-design-modern.wf-dark select option {
    background: var(--wf-bg-elevated);
    color: var(--wf-text-primary);
}


/* ---- 29h. Sidebar polish — icon sizing and active state refinement ---- */
.workflow-modal.wf-design-modern .pl-tabs-vertical .list-group-item > a > i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    transition: var(--wf-t-fast);
}

/* Sidebar separator line */
.workflow-modal.wf-design-modern .wf-tabs .list-group-item:last-child {
    margin-top: auto;
}

/* Active sidebar item glow in dark mode */
.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item.active > a,
.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item > a.active {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    border-left-color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .pl-tabs-vertical .list-group-item > a:hover {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-secondary) !important;
}


/* ---- 29i. Outputs panel — clean dark treatment ---- */
.workflow-modal.wf-design-modern .wf-worker-outputs-panel,
.workflow-modal.wf-design-modern #wf-worker-outputs-container {
    background: var(--wf-bg-surface);
    border-left: 1px solid var(--wf-border);
}

.workflow-modal.wf-design-modern .wf-worker-outputs-panel h5,
.workflow-modal.wf-design-modern #wf-worker-outputs-container h5 {
    color: var(--wf-text-primary);
    font-size: 13px;
    font-weight: 600;
}

/* Output field item name */
.workflow-modal.wf-design-modern #wf-worker-outputs li.field-item .field-name {
    color: var(--wf-text-primary);
}

/* Output label badge */
.workflow-modal.wf-design-modern #wf-worker-outputs .label-warning,
.workflow-modal.wf-design-modern #wf-worker-outputs .label-info {
    background: var(--wf-warning-bg);
    color: var(--wf-warning);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 4px;
}

.workflow-modal.wf-design-modern #wf-worker-outputs .label-info {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* "No value received" text */
.workflow-modal.wf-design-modern .no-value-text,
.workflow-modal.wf-design-modern .text-warning {
    color: var(--wf-warning) !important;
    font-size: 11px;
}


/* ---- 29j. Checkbox styling ---- */
.workflow-modal.wf-design-modern input[type="checkbox"] {
    accent-color: var(--wf-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* ---- 29k. Search inputs ---- */
.workflow-modal.wf-design-modern input[type="text"][placeholder*="Search"],
.workflow-modal.wf-design-modern input[placeholder*="search"] {
    height: 34px;
    padding: 0 12px 0 32px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 12px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern input[type="text"][placeholder*="Search"]:focus,
.workflow-modal.wf-design-modern input[placeholder*="search"]:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}


/* ---- 29l. Options tab — deeper treatment ---- */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv-container {
    display: flex;
    height: 100%;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv {
    width: 180px;
    min-width: 180px;
    background: var(--wf-bg-sidebar);
    border-right: 1px solid var(--wf-border);
    overflow-y: auto;
    padding: 8px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .list-group-item {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 2px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .basic-options-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--wf-bg-surface);
}

/* Option form-group as cards */
.workflow-modal.wf-design-modern #wf-worker-configuration .form-group {
    background: var(--wf-bg-card);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: var(--wf-t-base);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .form-group:hover {
    border-color: var(--wf-border-strong);
}

.workflow-modal.wf-design-modern #wf-worker-configuration .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--wf-text-secondary);
    margin-bottom: 6px;
}

/* Tree-view items — uses div.item-label and span.tv-content, not <a> tags */
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item {
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    cursor: pointer;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item .tv-content {
    color: var(--wf-text-secondary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
    font-size: 13px;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item:hover .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item:hover .tv-content {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tv-content.active,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item.active .item-label,
.workflow-modal.wf-design-modern #wf-worker-configuration .options-tv .tree-list-item.active .tv-content {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
    font-weight: 600;
}

/* Force dark bg on the tree-view sidebar in dark mode */
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv {
    background: var(--wf-bg-sidebar) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item .item-label,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item .tv-content {
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item:hover .item-label,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item:hover .tv-content {
    background: var(--wf-accent-subtle) !important;
    color: var(--wf-text-primary) !important;
}

.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tv-content.active,
.workflow-modal.wf-design-modern.wf-dark #wf-worker-configuration .options-tv .tree-list-item.active .item-label {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Override tree_view.css base rules (.tree-view .active sets #e0f5fd).
   Must use background-color (longhand) to match and beat tree_view.css. */
.workflow-modal.wf-design-modern .tree-view .active,
.workflow-modal.wf-design-modern .tree-view span.active,
.workflow-modal.wf-design-modern .options-tv .tree-view .active {
    background-color: var(--wf-accent-light) !important;
    background: var(--wf-accent-light) !important;
}

.workflow-modal.wf-design-modern .tree-view .active *,
.workflow-modal.wf-design-modern .options-tv .tree-view .active * {
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern .tree-view .tv-content:hover,
.workflow-modal.wf-design-modern .options-tv .tree-view .tv-content:hover {
    background-color: var(--wf-accent-subtle) !important;
    background: var(--wf-accent-subtle) !important;
}

.workflow-modal.wf-design-modern .tree-view .tv-content.ui-selecting {
    background-color: var(--wf-accent-subtle) !important;
    background: var(--wf-accent-subtle) !important;
}


/* ---- 29m. Validations tab — card polish ---- */
.workflow-modal.wf-design-modern #wf-worker-validations .validations-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.workflow-modal.wf-design-modern #wf-worker-validations .validations-list li .btn-danger {
    flex-shrink: 0;
}


/* ---- 29n. Logs tab — terminal-style polish ---- */
.workflow-modal.wf-design-modern #wf-worker-logs {
    background: var(--wf-bg-surface);
}

.workflow-modal.wf-design-modern .execution-log {
    background: var(--wf-bg-input);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    margin: 12px;
    overflow: hidden;
}

.workflow-modal.wf-design-modern .execution-log-header {
    background: var(--wf-bg-elevated);
    border-bottom: 1px solid var(--wf-border);
    color: var(--wf-text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-modal.wf-design-modern .logs-container {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--wf-text-secondary);
    padding: 12px;
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
}

.workflow-modal.wf-design-modern .logs-container .log-timestamp {
    color: var(--wf-text-disabled);
    font-size: 10px;
    margin-right: 8px;
}


/* ---- 29o. Charts / Viz tab ---- */
.workflow-modal.wf-design-modern #wf-worker-viz {
    background: var(--wf-bg-surface);
    padding: 16px;
}


/* ---- 29p. Replace with / Switch tab ---- */
.workflow-modal.wf-design-modern #wf-worker-switch {
    background: var(--wf-bg-surface);
}


/* ---- 29q. Approvals tab ---- */
.workflow-modal.wf-design-modern #wf-worker-approvals {
    background: var(--wf-bg-surface);
    padding: 16px;
}


/* ---- 29r. Modal footer polish ---- */
.workflow-modal.wf-design-modern .modal-footer {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 56px;
    min-height: 56px;
}

.workflow-modal.wf-design-modern .modal-footer .worker-lastupdated {
    font-size: 11px;
    color: var(--wf-text-muted);
    flex: 1;
    text-align: left;
}


/* ---- 29s. Filter form inside inputs ---- */
.workflow-modal.wf-design-modern .wf-filter-form,
.workflow-modal.wf-design-modern .filter-inputs-form {
    background: var(--wf-bg-surface);
    border-bottom: 1px solid var(--wf-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-modal.wf-design-modern .wf-filter-form label,
.workflow-modal.wf-design-modern .filter-inputs-form label {
    font-size: 11px;
    color: var(--wf-text-muted);
    font-weight: 500;
}

/* Sort header row */
.workflow-modal.wf-design-modern .sort-header,
.workflow-modal.wf-design-modern .inputs-sort-header {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    gap: 12px;
    border-bottom: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wf-text-muted);
}


/* ---- 29t. Badge / label overrides for dark mode ---- */
.workflow-modal.wf-design-modern.wf-dark .label-default {
    background: var(--wf-bg-elevated) !important;
    color: var(--wf-text-secondary) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-primary {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-success {
    background: var(--wf-success-bg) !important;
    color: var(--wf-success) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-warning {
    background: var(--wf-warning-bg) !important;
    color: var(--wf-warning) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-danger {
    background: var(--wf-danger-bg) !important;
    color: var(--wf-danger) !important;
}

.workflow-modal.wf-design-modern.wf-dark .label-info {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}


/* ---- 29u. General text color catch-all for dark mode ---- */
.workflow-modal.wf-design-modern.wf-dark,
.workflow-modal.wf-design-modern.wf-dark div,
.workflow-modal.wf-design-modern.wf-dark li,
.workflow-modal.wf-design-modern.wf-dark td,
.workflow-modal.wf-design-modern.wf-dark th {
    color: var(--wf-text-primary);
}

.workflow-modal.wf-design-modern.wf-dark .help-block,
.workflow-modal.wf-design-modern.wf-dark small,
.workflow-modal.wf-design-modern.wf-dark .text-muted,
.workflow-modal.wf-design-modern.wf-dark .field-description {
    color: var(--wf-text-muted) !important;
}


/* ---- 29v. Input card action bar (Edit, Copy, Options buttons) ---- */
.workflow-modal.wf-design-modern li.field-item .field-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.workflow-modal.wf-design-modern li.field-item .btn-group {
    /* display: inline-flex; */
    gap: 2px;
}

.workflow-modal.wf-design-modern li.field-item .btn-group .btn {
    /* width: 28px;
    height: 28px; */
    /* padding: 0; */
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: var(--wf-r-sm);
    transition: var(--wf-t-fast);
}


/* ---- 29w. Input number type ---- */
.workflow-modal.wf-design-modern input[type="number"] {
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-md);
    background: var(--wf-bg-input);
    color: var(--wf-text-primary);
    font-size: 13px;
    transition: var(--wf-t-fast);
}

.workflow-modal.wf-design-modern input[type="number"]:focus {
    border-color: var(--wf-border-focus);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    outline: none;
}


/* ---- 29x. Catch-all for remaining white backgrounds in dark ---- */
.workflow-modal.wf-design-modern.wf-dark .row,
.workflow-modal.wf-design-modern.wf-dark .col-md-12,
.workflow-modal.wf-design-modern.wf-dark .col-md-6,
.workflow-modal.wf-design-modern.wf-dark .col-sm-12,
.workflow-modal.wf-design-modern.wf-dark .col-xs-12 {
    background: transparent;
}

/* Remove legacy bg white and borders that leak through */
.workflow-modal.wf-design-modern.wf-dark .list-group-item {
    background: transparent !important;
    border: none !important;
}

/* Force tab content backgrounds */
.workflow-modal.wf-design-modern.wf-dark .tab-content > .tab-pane {
    background: var(--wf-bg-surface) !important;
}

/* Container divs */
.workflow-modal.wf-design-modern.wf-dark .ui-layout-container,
.workflow-modal.wf-design-modern.wf-dark .wf-worker-config-container {
    background: var(--wf-bg-surface) !important;
}


/* ---- 29y. Outputs right panel — layout splitter bar ---- */
.workflow-modal.wf-design-modern .ui-layout-resizer {
    background: var(--wf-border) !important;
    border: none !important;
    opacity: 1 !important;
    width: 1px !important;
}

.workflow-modal.wf-design-modern .ui-layout-resizer:hover {
    background: var(--wf-accent) !important;
    width: 3px !important;
}

.workflow-modal.wf-design-modern .ui-layout-toggler {
    background: var(--wf-bg-elevated) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-sm);
}


/* ---- 29z. Light mode body fix (for standalone test page) ---- */
body.wf-modal-modern:not(.wf-modal-dark) {
    background: #F8FAFC !important;
}

body.wf-modal-modern:not(.wf-modal-dark) > input[type="file"] {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    color: #1E293B !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    margin: 8px 16px !important;
}


/* ---- 30. LIGHT MODE REFINEMENTS ---- */

/* Light mode input cards */
.workflow-modal.wf-design-modern:not(.wf-dark) li.field-item {
    box-shadow: var(--wf-sh-xs);
}

.workflow-modal.wf-design-modern:not(.wf-dark) li.field-item:hover {
    box-shadow: var(--wf-sh-sm);
}

/* Light mode name container */
.workflow-modal.wf-design-modern:not(.wf-dark) .name-container .input-group {
    box-shadow: var(--wf-sh-xs);
}

/* Light mode view type button */
.workflow-modal.wf-design-modern:not(.wf-dark) .io-header .btn:hover {
    background: rgba(59, 130, 246, 0.06);
}


/* ---- 31. FONT SMOOTHING & GLOBAL POLISH ---- */
.workflow-modal.wf-design-modern {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling */
.workflow-modal.wf-design-modern .tab-content,
.workflow-modal.wf-design-modern .tab-pane,
.workflow-modal.wf-design-modern .wf-tabs {
    scroll-behavior: smooth;
}

/* Focus visible ring for keyboard nav */
.workflow-modal.wf-design-modern :focus-visible {
    outline: 2px solid var(--wf-accent);
    outline-offset: 2px;
    border-radius: var(--wf-r-sm);
}

/* Remove default focus outlines when clicking */
.workflow-modal.wf-design-modern :focus:not(:focus-visible) {
    outline: none;
}

/* ----------------------------------------------------------------
   Classic footer layout fix for modern mode
   The classic template uses pull-left/pull-right floats + clearfix.
   Convert to flex so it sits cleanly in the modern footer container.
   ---------------------------------------------------------------- */
.workflow-modal.wf-design-modern .modal-footer .clearfix {
    display: none;
}

.workflow-modal.wf-design-modern .modal-footer .pull-left,
.workflow-modal.wf-design-modern .modal-footer .pull-right {
    float: none !important;
}

/* Left-side group: reset buttons + last-updated + split-start menu */
.workflow-modal.wf-design-modern .modal-footer > span.dib.pull-left {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
}

.workflow-modal.wf-design-modern .modal-footer > span.dib.pull-left > span.d3view-flex-v {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Exec progress bar inline */
.workflow-modal.wf-design-modern .modal-footer .exec-progress {
    margin: 0;
    order: 2;
}

/* Re-order footer buttons to match classic visual layout:
   [lastupdated] ... [exec-progress] [Cancel] [Verify] [Stop/Execute] [Save/Apply] */
.workflow-modal.wf-design-modern .modal-footer #cancel {
    order: 3;
}

.workflow-modal.wf-design-modern .modal-footer #verify {
    order: 4;
}

.workflow-modal.wf-design-modern .modal-footer #wfExecute {
    order: 5;
}

.workflow-modal.wf-design-modern .modal-footer #wfStop {
    order: 5;
}

.workflow-modal.wf-design-modern .modal-footer #apply,
.workflow-modal.wf-design-modern .modal-footer #save {
    order: 6;
}

/* Split-start workers dropup */
.workflow-modal.wf-design-modern .modal-footer .split-start-workers-menu .btn {
    height: 34px;
}

/* Unsync status — place next to lastupdated on the left */
.workflow-modal.wf-design-modern .modal-footer .worker_unsync_status {
    display: inline-flex;
    align-items: center;
    order: 1;
}

/* Default order for miscellaneous footer items (AI predict, preview, dependent workers, etc.) */
.workflow-modal.wf-design-modern .modal-footer .render_ai_model,
.workflow-modal.wf-design-modern .modal-footer .preview-guide,
.workflow-modal.wf-design-modern .modal-footer #previewResponses,
.workflow-modal.wf-design-modern .modal-footer .dependentWorkerButtons,
.workflow-modal.wf-design-modern .modal-footer .overlay_selected_curves,
.workflow-modal.wf-design-modern .modal-footer #togglePeriodicExecution,
.workflow-modal.wf-design-modern .modal-footer .decision-result-msg,
.workflow-modal.wf-design-modern .modal-footer #save_resume,
.workflow-modal.wf-design-modern .modal-footer .wf_resume {
    order: 4;
}

/* Stop button (danger) */
.workflow-modal.wf-design-modern .modal-footer #wfStop {
    background: var(--wf-danger);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.workflow-modal.wf-design-modern .modal-footer #wfStop:hover {
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}

/* Warning buttons (AI predict) */
.workflow-modal.wf-design-modern .modal-footer .btn-warning {
    background: var(--wf-warning);
    color: white;
    border: none;
}

/* Verify button green icon */
.workflow-modal.wf-design-modern .modal-footer .verify-icon.green {
    color: var(--wf-success);
}

/* =====================================================================
 * wf-worker-config-modern.css
 * Added by shashankdhanakshirur on 2026-07-24 - R2026-58
 *
 * Extends the FormBuilder modern skin (R2026-51) to the REGULAR
 * (non-FormBuilder) worker config view. The START worker renders through
 * FormBuilder (already modern-by-default); every other worker renders the
 * io-view / WorkerInputView `li.field-item` markup, which the FormBuilder
 * skin never reaches. This overlay realigns that markup to the same tokens
 * and control family as FormBuilder's `[data-ui-theme="modern"]`.
 *
 * SCOPE: opt-in via the `wf-worker-modern` class on the modal + the
 * `data-wf-worker-modern` marker on `.wf-worker-config-container`
 * (stamped in ConfigureWfWorker.setUpEl when uiTheme !== 'classic').
 * The modal lives OUTSIDE div.workflow, so the `--d3v-*` foundation
 * tokens (from plugins/plugins.css, declared on :root) are re-aliased to
 * local `--wfm-*` vars here, mirroring apps/fb_list/fb_list.css.
 *
 * NOTE on select2: the worker view now passes `fb-select2-modern` to its
 * select2 / multiselect controls. FormBuilder's `.fb-select2-modern` rules
 * only skin the CLOSED control under `.d3view-inputsBuilder` — an ancestor
 * that does NOT exist here — so only the body-mounted DROPDOWN (scoped by
 * the class alone, i.e. `.select2-drop.fb-select2-modern`) reaches this
 * view for free. The CLOSED control is therefore re-skinned below under
 * the worker-view scope so both controls read as one family.
 * ===================================================================== */

div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] {
    --wfm-accent:        var(--d3v-accent, #3b82f6);
    --wfm-accent-hover:  var(--d3v-accent-hover, #2563eb);
    --wfm-accent-soft:   var(--d3v-accent-soft, #e7f1ff);
    --wfm-border:        var(--d3v-border, #e2e8f0);
    --wfm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --wfm-bg:            var(--d3v-bg-primary, #ffffff);
    --wfm-bg-2:          var(--d3v-bg-secondary, #f8fafc);
    --wfm-bg-hover:      var(--d3v-bg-hover, #e2e8f0);
    --wfm-danger:        var(--d3v-danger, #ef4444);
    --wfm-danger-soft:   var(--d3v-danger-soft, #fee2e2);
    --wfm-text:          var(--d3v-text-primary, #1e293b);
    --wfm-text-2:        var(--d3v-text-secondary, #475569);
    --wfm-muted:         var(--d3v-text-muted, #94a3b8);
    --wfm-muted-2:       var(--d3v-text-tertiary, #64748b); /* mirrors FB --fbm-muted-2 (description tone) */
    --wfm-r:             var(--d3v-r-md, 8px);
    --wfm-r-sm:          var(--d3v-r-sm, 4px);
    --wfm-sh-sm:         var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .06));
    --wfm-sh-md:         var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, .08));
    --wfm-t:             var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* ---------------------------------------------------------------------
 * 1. Field-item rhythm — mirror FormBuilder modern EXACTLY: the base view
 *    separates rows with a 1px divider (`div.workflow-modal ul#field-items
 *    li.field-item { border-bottom: 1px solid #ddd }`). FormBuilder modern
 *    drops that divider and separates rows with plain spacing instead — no
 *    row hover, no per-row card, no selected-row tint. We do the same.
 *    (!important is required to beat the ID-scoped base divider rule.)
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] ul#field-items > li.field-item,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item > .row,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .field-item-contents {
    border-bottom: none !important;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] ul#field-items > li.field-item {
    margin-bottom: 16px;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] ul#field-items > li.field-item:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * 2. Field name / type — clear typographic hierarchy.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .field-name {
    color: var(--wfm-text);
    font-weight: 600;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .field-type {
    color: var(--wfm-muted);
}

/* ---------------------------------------------------------------------
 * 3. Input description — annotation-weight, mirroring FormBuilder modern's
 *    `.ip-desc-editor` (12px, muted, tighter leading, dimmed until the row
 *    is hovered / focused). BEFORE, the worker-view description rendered at
 *    full body size in near-black, reading as content rather than as an
 *    annotation. The worker view has two description markups depending on
 *    the input-contents view: `.ip-desc > span` (default/list) and
 *    `.field-item-description p.med` (simple/compact) — both are matched.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .ip-desc,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .field-item-description p.med {
    color: var(--wfm-muted-2);
    font-size: 12px;
    line-height: 1.5;
    opacity: .78;
    transition: opacity var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item:hover .ip-desc,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .ip-desc:focus-within,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item:hover .field-item-description p.med {
    opacity: 1;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .ip-desc .ip-info-url {
    color: var(--wfm-muted);
    transition: color var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .ip-desc .ip-info-url:hover {
    color: var(--wfm-accent);
}

/* ---------------------------------------------------------------------
 * 4. Inputs / textarea — border, radius, focus ring (mirror FB modern).
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .form-control {
    border: 1px solid var(--wfm-border);
    border-top-left-radius: var(--wfm-r);
    border-bottom-left-radius: var(--wfm-r);
    box-shadow: none;
    transition: border-color var(--wfm-t), box-shadow var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .form-control:focus {
    border-color: var(--wfm-accent);
    box-shadow: 0 0 0 3px var(--wfm-accent-soft);
    position: relative;
    z-index: 3;
}
/* input with no addon → round both sides */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .form-control:last-child {
    border-top-right-radius: var(--wfm-r);
    border-bottom-right-radius: var(--wfm-r);
}

/* ---------------------------------------------------------------------
 * 5. Input-group addon buttons (peek / attach / rich-edit / download /
 *    reset) — muted default, accent-soft on hover (mirror FB modern).
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .input-group-addon.btn,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-group .input-group-addon.btn {
    background: var(--wfm-bg-2);
    border: 1px solid var(--wfm-border);
    border-left: 0;
    color: var(--wfm-muted);
    min-width: 38px;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0;
    transition: background var(--wfm-t), color var(--wfm-t), border-color var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .input-group-addon.btn:hover,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-group .input-group-addon.btn:hover {
    background: var(--wfm-accent-soft);
    color: var(--wfm-accent);
    border-color: var(--wfm-border);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .input-group-addon.btn:last-child,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-group .input-group-addon.btn:last-child {
    border-top-right-radius: var(--wfm-r);
    border-bottom-right-radius: var(--wfm-r);
}

/* ---------------------------------------------------------------------
 * 6. select2 CLOSED control — mirrors FormBuilder's
 *    `.fb-select2-modern .select2-choice` block (fb_list.css R2026-51).
 *    FormBuilder scopes that under `.d3view-inputsBuilder`, which does not
 *    exist in the worker view, so the closed control would otherwise fall
 *    back to the stock select2 sprite look while its dropdown is already
 *    modern. Re-skinned here under the worker-view scope so both match.
 *    (`--wfm-*` cascade down from the container onto the enclosed control.)
 * ------------------------------------------------------------------- */

/* ---- single select ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r);
    background: var(--wfm-bg);
    background-image: none;
    filter: none;
    box-shadow: none;
    color: var(--wfm-text);
    font-size: 13.5px;
    line-height: 36px;
    transition: border-color var(--wfm-t), box-shadow var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice:hover {
    border-color: var(--wfm-border-strong);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern.select2-container-active .select2-choice,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern.select2-dropdown-open .select2-choice {
    border-color: var(--wfm-accent);
    box-shadow: 0 0 0 3px var(--wfm-accent-soft);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice > .select2-chosen {
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice .select2-arrow {
    position: static;
    flex: 0 0 auto;
    width: auto;
    border: none;
    background: none;
    background-image: none;
    filter: none;
    color: var(--wfm-muted);
    transition: transform var(--wfm-t);
}
/* swap the native arrow glyph (stock sprite `b` OR the workflow view's own
   `fa-caret-down .select2-caret` span) for the same chevron the modern
   FormBuilder control uses, so both controls point the same way and we
   never render two carets side by side. */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice .select2-arrow b,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice .select2-arrow .select2-caret {
    display: none;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice .select2-arrow:after {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 13px;
    line-height: 1;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern.select2-dropdown-open .select2-choice .select2-arrow {
    transform: rotate(180deg);
}
/* the clear (x) affordance */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-choice abbr {
    top: 50%;
    margin-top: -6px;
    right: 26px;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern.select2-container-disabled .select2-choice {
    background: var(--wfm-bg-2);
    color: var(--wfm-muted);
}
/* placeholder */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container.fb-select2-modern .select2-default .select2-chosen {
    color: var(--wfm-muted);
}

/* ---- multi select ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r);
    background: var(--wfm-bg);
    background-image: none;
    box-shadow: none;
    transition: border-color var(--wfm-t), box-shadow var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-choices:hover {
    border-color: var(--wfm-border-strong);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern.select2-container-active .select2-choices {
    border-color: var(--wfm-accent);
    box-shadow: 0 0 0 3px var(--wfm-accent-soft);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-choices li {
    float: none;
    margin: 0;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-search-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 22px;
    border: none;
    border-radius: var(--wfm-r-sm);
    background: var(--wfm-accent-soft);
    background-image: none;
    box-shadow: none;
    color: var(--wfm-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-search-choice-close {
    top: 50%;
    margin-top: -7px;
    left: 6px;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .select2-container-multi.fb-select2-modern .select2-choices .select2-search-field input {
    height: 26px;
    padding: 0 2px;
    font-size: 13px;
    color: var(--wfm-text);
}

/* ---------------------------------------------------------------------
 * 7. Datasource / input-option rows — light card surface so the
 *    "where does this value come from" block reads as a group.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .datasource-options,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .ip-options {
    border-radius: var(--wfm-r);
}

/* ---------------------------------------------------------------------
 * 8. Buttons — btn-default gains a modern border/hover; primary uses accent.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .btn-default {
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r-sm);
    background: var(--wfm-bg);
    color: var(--wfm-text-2);
    transition: background var(--wfm-t), border-color var(--wfm-t), color var(--wfm-t), box-shadow var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .btn-default:hover,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] .btn-default:focus {
    background: var(--wfm-bg-2);
    border-color: var(--wfm-border-strong);
    color: var(--wfm-text);
}

/* ---------------------------------------------------------------------
 * 9. Group / sub-group tabs — pill-ish active state (mirror FB group nav).
 * ------------------------------------------------------------------- */
div.workflow-modal.wf-worker-modern .worker-group-tabs li[data-group] > a,
div.workflow-modal.wf-worker-modern .wf-tabs .nav-tabs > li > a {
    border-radius: var(--wfm-r-sm) var(--wfm-r-sm) 0 0;
    transition: color var(--wfm-t), background var(--wfm-t), border-color var(--wfm-t);
}

/* ---------------------------------------------------------------------
 * 10. Dataset / curve grid (handsontable) — mirror FormBuilder modern
 *     (fb_list.css R2026-51: `[data-ui-theme="modern"] .handsontable_
 *     container`). The worker view renders the same handsontable inside
 *     `.input-value.input-value-container` but WITHOUT the `.pl-dataset-
 *     modern` class FormBuilder adds, so the grid otherwise keeps the raw
 *     handsontable look (hard 1px cell frame, no radius) while the rest of
 *     the row is modern. Wrap it in a token border + radius, tint the
 *     header + selection to accent-soft, and drop handsontable's own outer
 *     frame so the container radius is the only visible edge.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container {
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r);
    overflow: hidden;
    box-shadow: none;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container th {
    background: var(--wfm-bg-2);
    border-color: var(--wfm-border);
    color: var(--wfm-text-2);
    font-weight: 600;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container td {
    border-color: var(--wfm-border);
    color: var(--wfm-text);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container td.area,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container th.ht__highlight {
    background: var(--wfm-accent-soft);
}
/* handsontable paints its own 1px frame; drop the left/top edge so the
   container radius is the only visible border. */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .handsontable_container .ht_master > .wtHolder > .wtHider > .wtSpreader > table {
    border-left-width: 0;
    border-top-width: 0;
}

/* ---------------------------------------------------------------------
 * 11. Curve / dataset action buttons — port FormBuilder modern's curve
 *     toolbar treatment (fb_list.css R2026-51 sections 1-2) to the worker
 *     view. The worker view renders these buttons ("Open in Curve Viewer",
 *     "Edit Curve", "Reset"/"Remove value", "Upload file", "Choose from
 *     sample", "Hide table", "Edit in Sheets", "Edit using Splines",
 *     "Trace/overlay with") as plain `.btn.btn-sm.btn-{default,primary,
 *     danger}` inside `.input-value` — so BEFORE they read as stock
 *     Bootstrap (solid blue primary, solid red danger, 3px radius) against
 *     the modern rows. Match FormBuilder: a quiet token surface with an
 *     accent-SOFT primary and danger-SOFT reset that only saturate on
 *     hover. Excludes the input-group addon buttons (section 5 already
 *     skins those). Every JS hook class (.curve-manager, .edit_curve,
 *     .reset-ip-filters, .wf-dropzone, .manual_vector_input, …) is left
 *     untouched — this is visual only.
 * ------------------------------------------------------------------- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn:not(.input-group-addon) {
    min-width: 34px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r);
    background: var(--wfm-bg);
    background-image: none;
    box-shadow: none;
    color: var(--wfm-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    text-shadow: none;
    transition: background var(--wfm-t), border-color var(--wfm-t), color var(--wfm-t), box-shadow var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn:not(.input-group-addon):hover {
    background: var(--wfm-bg-2);
    border-color: var(--wfm-border-strong);
    color: var(--wfm-text);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn:not(.input-group-addon):focus,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn:not(.input-group-addon):focus-visible {
    outline: none;
    border-color: var(--wfm-accent);
    box-shadow: 0 0 0 3px var(--wfm-accent-soft);
}
/* muted caret on the split "Trace/overlay with" toggle */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn:not(.input-group-addon) .fa-caret-down {
    color: var(--wfm-muted);
    font-size: 11px;
}
/* primary action (Open in Curve Viewer) = accent tint, not solid blue */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn.btn-primary {
    background: var(--wfm-accent-soft);
    border-color: var(--wfm-accent-soft);
    color: var(--wfm-accent);
    font-weight: 600;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn.btn-primary:hover {
    background: var(--wfm-accent);
    border-color: var(--wfm-accent);
    color: #fff;
}
/* destructive action (Reset / Remove value) = danger tint until hover */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn.btn-danger {
    background: var(--wfm-danger-soft);
    border-color: var(--wfm-danger-soft);
    color: var(--wfm-danger);
    font-weight: 600;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .btn.btn-danger:hover {
    background: var(--wfm-danger);
    border-color: var(--wfm-danger);
    color: #fff;
}
/* open split-dropdown keeps the accent ring so the row reads as one family */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.field-item .input-value .dropdown.open > .btn {
    background: var(--wfm-accent-soft);
    border-color: var(--wfm-accent-soft);
    color: var(--wfm-accent);
}

/* ---------------------------------------------------------------------
 * 12. Dropdown panels — EVERY Bootstrap dropdown inside a modern worker
 *     row (the curve toolbar "Options" menu, "Trace/overlay with", the
 *     View / sort / filter menus, input-settings, output-assignments).
 *     Straight port of the FormBuilder modern dropdown skin (fb_list.css
 *     R2026-51 section 8), itself a port of the workflow header-dropdown
 *     skin, so all three read as one menu family: same panel surface, 9px/
 *     12px rows with a 16px icon gutter, inset rounded hover, divider.
 *     The worker-view menus are inline (not body-mounted — verified live),
 *     so the container marker reaches them. Same TWO guards as FormBuilder:
 *       :not(.pd15)          — `.pd15` menus are mini FORM panels (a
 *                              select2 + inputs); keep their own padding,
 *                              only the outer surface applies.
 *       :not(.bootstrap-select) > + :not(.inner) — bootstrap-select owns
 *                              its own .dropdown-menu / .inner metrics.
 * ------------------------------------------------------------------- */
/* ---- panel surface (applies to every menu incl. .pd15 form panels) ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner) {
    margin-top: 8px;
    background: var(--wfm-bg);
    border: 1px solid var(--wfm-border);
    border-radius: var(--wfm-r);
    box-shadow: var(--wfm-sh-md);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) {
    min-width: 220px;
    padding: 4px 0;
}
/* ---- rows: icon gutter + label, inset rounded hover ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 4px;
    border-radius: var(--wfm-r);
    color: var(--wfm-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    transition: background var(--wfm-t), color var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--wfm-muted);
    font-size: 13px;
    transition: color var(--wfm-t);
}
/* plugins.css paints a legacy #0088cc gradient + white text on every
   .dropdown-menu row hover; the shorthand clears the gradient but the
   white text only yields to !important (else the label vanishes). */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:hover,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:focus {
    background: var(--wfm-bg-hover);
    color: var(--wfm-text) !important;
    background-image: none;
    filter: none;
    text-shadow: none;
    text-decoration: none;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:hover > i {
    color: var(--wfm-accent);
}
/* ---- section headers ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) .dropdown-header {
    padding: 8px 16px 4px;
    color: var(--wfm-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* ---- divider ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) .divider {
    height: 1px;
    margin: 6px;
    background: var(--wfm-border);
}
/* ---- active / checked row ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.active > a,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.checked > a {
    background: var(--wfm-accent-soft);
    color: var(--wfm-accent) !important;
    font-weight: 500;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.active > a > i,
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.checked > a > i {
    color: var(--wfm-accent);
}
/* ---- disabled row ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.disabled > a {
    color: var(--wfm-muted);
    background: none;
}
/* ---- submenus ---- */
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.dropdown-submenu > a:after {
    float: none;
    margin: 0 0 0 auto;
    align-self: center;
    border-left-color: var(--wfm-muted);
    transition: border-color var(--wfm-t);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.dropdown-submenu:hover > a:after {
    border-left-color: var(--wfm-accent);
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.dropdown-submenu:hover > a {
    background: var(--wfm-bg-hover);
    color: var(--wfm-text) !important;
}
div.workflow-modal .wf-worker-config-container[data-wf-worker-modern] li.dropdown-submenu > .dropdown-menu {
    margin-top: -7px;
}

/* ---------------------------------------------------------------------
 * R2026-58 - per-input DATASOURCE edit SIDEBAR (modern worker view).
 * Clicking a modern worker input's Edit opens this slide-in panel; its body
 * hosts a proxy li.field-item carrying the input's live datasource_container
 * (see ConfigureWfWorkerInputSourceMapping.openInputDatasourcePanel). The
 * panel is mounted under #wf-worker-inputs so the datasource handlers keep
 * firing, and is position:fixed so it reads as a docked right sidebar.
 * ------------------------------------------------------------------- */
/* #wf-worker-inputs becomes the positioned containing block while the panel is open (position:fixed
 * is trapped by the modal's transformed ancestor, so the panel docks with position:absolute instead). */
div.workflow-modal.wf-worker-modern #wf-worker-inputs.wf-ds-panel-host {
    position: relative;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 460px;
    max-width: 92%;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--wfm-bg, #fff);
    border: 1px solid var(--wfm-border, #e2e8f0);
    border-radius: var(--wfm-r, 8px);
    box-shadow: var(--wfm-sh-md, 0 4px 12px rgba(15, 23, 42, .08)), 0 24px 60px rgba(15, 23, 42, .18);
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .18s;
    overflow: hidden;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel.is-open {
    transform: none;
    opacity: 1;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--wfm-border, #e2e8f0);
    background: var(--wfm-bg-2, #f8fafc);
    flex: 0 0 auto;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-head-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-head-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--wfm-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-head-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wfm-muted, #94a3b8);
    margin-top: 2px;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-close {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: var(--wfm-r-sm, 4px);
    background: transparent;
    color: var(--wfm-muted-2, #64748b);
    cursor: pointer;
    transition: background var(--wfm-t), color var(--wfm-t), border-color var(--wfm-t);
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-close:hover {
    background: var(--wfm-bg-hover, #e2e8f0);
    color: var(--wfm-text, #1e293b);
    border-color: var(--wfm-border, #e2e8f0);
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-proxy-body {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* the proxy is a bare host for the datasource_container - strip the row chrome it would otherwise inherit */
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-proxy-body > li.field-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
/* the datasource_container renders as a bootstrap grid column in the row; free it to fill the panel */
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .datasource_container {
    width: 100%;
    max-width: 100%;
    float: none;
    padding: 0;
    text-align: left;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .datasource_container .ds-label label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--wfm-muted, #94a3b8);
    margin: 0 0 6px;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .datasource-options {
    margin-top: 12px;
}
div.workflow-modal.wf-worker-modern .wf-ds-edit-panel .wf-ds-edit-empty {
    padding: 24px 8px;
    text-align: center;
    color: var(--wfm-muted, #94a3b8);
    font-size: 13px;
}
/* the edited row reads as active */
div.workflow-modal.wf-worker-modern li.field-item.wf-ds-editing {
    background: var(--wfm-accent-soft, #e7f1ff);
    border-radius: var(--wfm-r-sm, 4px);
}

/* ------------------------------------------------------------------------------------------------
 * BOM part picker — added by shashankdhanakshirur on 2026-07-24
 * The "Get parts (BOM)" button renders in the file-input action row (FormBuilder / fb_list.tpl) and
 * uses the same default btn styling as its Upload / Remove-all siblings, so it needs no rule of its
 * own here. The picker itself is a body-mounted GenericModalView scoped under .wf-bom-picker-modal.
 * ---------------------------------------------------------------------------------------------- */

/* body-mounted picker modal (DataTable + maps side list) */
.wf-bom-picker-modal .wf-bom-wrap { min-height: 380px; }
.wf-bom-picker-modal .wf-bom-state {
    display: flex; align-items: center; gap: 10px; padding: 40px 16px; justify-content: center;
    color: var(--d3v-text-secondary, #667085); font-size: 14px;
}
.wf-bom-picker-modal .wf-bom-state.is-err { color: var(--d3v-status-danger, #d92d20); flex-wrap: wrap; }

/** Added by shashank2104 on 07/28/2026 at 10:01 AM - R2026-60 - Table / 3D view toggle + host **/
.wf-bom-picker-modal .wf-bom-toolbar {
    display: flex; align-items: center; justify-content: flex-end; margin-bottom: 8px; flex: 0 0 auto;
}
.wf-bom-picker-modal .wf-bom-view-btn.is-active {
    background: var(--d3v-accent-soft, rgba(46,144,250,.12));
    color: var(--d3v-accent, #2e90fa);
    border-color: var(--d3v-accent, #2e90fa);
}
.wf-bom-picker-modal .wf-bom-body { display: flex; gap: 12px; min-height: 0; }
/** Table OR 3D — never stacked. Only the active host is visible. **/
.wf-bom-picker-modal .wf-bom-view-host {
    display: flex; flex-direction: column; min-width: 0; min-height: 420px;
    border: 1px solid var(--d3v-border-subtle, #eaecf0); border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
}
.wf-bom-picker-modal .wf-bom-table-host,
.wf-bom-picker-modal .wf-bom-3d-host {
    flex: 1 1 auto; min-width: 0; min-height: 420px; overflow: auto;
}
.wf-bom-picker-modal .wf-bom-table-host.is-hidden,
.wf-bom-picker-modal .wf-bom-3d-host.is-hidden,
.wf-bom-picker-modal .wf-bom-maps.is-hidden { display: none !important; }
.wf-bom-picker-modal .wf-bom-3d-host { position: relative; background: var(--d3v-bg-secondary, #f9fafb); }
.wf-bom-picker-modal .wf-bom-3d-state {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 100%; min-height: 420px; color: var(--d3v-text-secondary, #667085); font-size: 13px;
}
.wf-bom-picker-modal .wf-bom-hint { margin-top: 8px; font-size: 12px; color: var(--d3v-text-secondary, #667085); }

/* maps side list — every target is a drop zone */
.wf-bom-picker-modal .wf-bom-maps {
    width: 300px; flex: 0 0 300px; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--d3v-border-subtle, #eaecf0); border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-secondary, #f9fafb);
}
.wf-bom-picker-modal .wf-bom-maps-head {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-weight: 600;
    border-bottom: 1px solid var(--d3v-border-subtle, #eaecf0);
}
.wf-bom-picker-modal .wf-bom-reset-all { font-size: 12px; color: var(--d3v-status-danger, #d92d20); font-weight: 500; }
/** Added by shashank2104 on 08/10/2026 - Auto map (match rows to inputs by BOM part name) **/
.wf-bom-picker-modal .wf-bom-maps-acts { display: flex; align-items: center; gap: 12px; }
.wf-bom-picker-modal .wf-bom-auto-map {
    font-size: 12px; font-weight: 600; color: var(--d3v-accent, #2e90fa);
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.15s), color var(--d3v-t-fast, 0.15s);
}
.wf-bom-picker-modal .wf-bom-auto-map:hover,
.wf-bom-picker-modal .wf-bom-auto-map:focus {
    background: var(--d3v-accent-soft, rgba(46, 144, 250, .12)); text-decoration: none;
}
.wf-bom-picker-modal .wf-bom-map-auto {
    margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
    color: var(--d3v-accent, #2e90fa); background: var(--d3v-accent-soft, rgba(46, 144, 250, .12));
}
.wf-bom-picker-modal .wf-bom-maps-empty { padding: 24px 14px; color: var(--d3v-text-secondary, #667085); font-size: 13px; text-align: center; line-height: 1.7; }
.wf-bom-picker-modal .wf-bom-maps-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
/** Added by shashank2104 on 07/28/2026 at 10:09 AM - R2026-60 - droppable map targets **/
.wf-bom-picker-modal .wf-bom-map-drop,
.wf-bom-picker-modal .wf-bom-map-item {
    background: var(--d3v-bg-primary, #fff); border: 1px dashed var(--d3v-border-subtle, #eaecf0);
    border-radius: var(--d3v-r-md, 6px); padding: 8px 10px; margin-bottom: 8px;
    transition: border-color var(--d3v-t-fast, 0.15s), background var(--d3v-t-fast, 0.15s), box-shadow var(--d3v-t-fast, 0.15s);
}
.wf-bom-picker-modal .wf-bom-map-drop.has-values {
    border-style: solid; border-color: var(--d3v-border-default, #d0d5dd);
}
.wf-bom-picker-modal .wf-bom-map-drop.is-drop-active {
    border-color: var(--d3v-accent, #2e90fa);
}
.wf-bom-picker-modal .wf-bom-map-drop.is-drop-hover {
    border-color: var(--d3v-accent, #2e90fa);
    background: var(--d3v-accent-soft, rgba(46,144,250,.12));
    box-shadow: inset 0 0 0 1px var(--d3v-accent, #2e90fa);
}
.wf-bom-picker-modal .wf-bom-map-drop-hint {
    margin-top: 4px; font-size: 12px; color: var(--d3v-text-secondary, #98a2b3); font-style: italic;
}
.wf-bom-picker-modal .wf-bom-map-row { display: flex; align-items: center; justify-content: space-between; }
.wf-bom-picker-modal .wf-bom-map-target { font-weight: 600; color: var(--d3v-text-primary, #101828); font-size: 13px; }
.wf-bom-picker-modal .wf-bom-map-clear { color: var(--d3v-text-secondary, #98a2b3); padding: 2px 4px; }
.wf-bom-picker-modal .wf-bom-map-clear:hover { color: var(--d3v-status-danger, #d92d20); }
.wf-bom-picker-modal .wf-bom-map-vals { margin-top: 4px; font-size: 12px; color: var(--d3v-text-secondary, #667085); word-break: break-word; }
.wf-bom-picker-modal .wf-bom-map-col { display: inline-block; background: var(--d3v-accent-soft, rgba(46,144,250,.12)); color: var(--d3v-accent, #2e90fa); border-radius: 4px; padding: 0 5px; font-weight: 600; margin-right: 4px; }
.wf-bom-picker-modal .wf-bom-map-count { display: inline-block; background: var(--d3v-bg-hover, #eef1f5); border-radius: 10px; padding: 0 7px; font-weight: 600; margin-right: 6px; }

/** Added by shashank2104 on 07/28/2026 at 10:18 AM - R2026-60 - always show the row-drag handle
 *  in the BOM picker (DataTable defaults it to opacity:0 until hover — easy to miss). **/
.wf-bom-picker-modal .bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag {
    opacity: 1;
    color: var(--d3v-text-secondary, #98a2b3);
}
.wf-bom-picker-modal .bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag:hover {
    color: var(--d3v-accent, #2e90fa);
}
.wf-bom-drag-chip {
    padding: 6px 10px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-accent, #2e90fa);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(16,24,40,.12));
    font-size: 12px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-bom-drag-chip.is-multi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--d3v-accent, #2e90fa);
    font-weight: 600;
}

/* ------------------------------------------------------------------------------------------------
 * 3D selector — added by shashank2104 on 08/21/2026 - R2026-189
 * Two surfaces. The "Select in 3D" affordance is an `input-group-addon` on the input itself and
 * inherits its siblings' styling, so it needs no rule. The inline BOUNDS GRID (kind: 'extents')
 * renders under the input inside the worker-config panel, and the picker modal is a body-mounted
 * GenericModalView scoped under .wf-s3d-picker-modal.
 * ---------------------------------------------------------------------------------------------- */

/* inline bounds grid, inside the worker inputs list */
#wf-worker-inputs .wf-s3d-bounds {
    margin-top: 10px;
    padding: 10px 12px 12px;
    border: 1px solid var(--d3v-border-primary, #e4e7ec);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f9fafb);
    text-align: left;
}
/* ⭐ THE GRID IS A CHILD OF A BOOTSTRAP 3 `.input-group`, WHICH IS `display: table`.
   FormBuilder opens that wrapper around the whole input-value cell, and this template renders inside
   it — so a plain block child becomes an anonymous TABLE CELL and sits BESIDE the input instead of
   under it. `table-caption` + `caption-side: bottom` is the one form that renders a full-width block
   below a table box without needing to close a wrapper this template does not own. The plain-block
   rule above still governs any context that is not an input-group. */
#wf-worker-inputs .input-group > .wf-s3d-bounds {
    display: table-caption;
    caption-side: bottom;
    width: 100%;
}

#wf-worker-inputs .wf-s3d-bounds-head {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}
#wf-worker-inputs .wf-s3d-bounds-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--d3v-text-secondary, #667085);
}
#wf-worker-inputs .wf-s3d-bounds-note {
    flex: 1 1 200px; font-size: 11px; line-height: 1.45; color: var(--d3v-text-tertiary, #98a2b3);
}
#wf-worker-inputs .wf-s3d-bounds-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px;
}
#wf-worker-inputs .wf-s3d-bcell { display: flex; flex-direction: column; gap: 4px; margin: 0; font-weight: 400; }
#wf-worker-inputs .wf-s3d-blab {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--d3v-text-tertiary, #98a2b3);
}
#wf-worker-inputs .wf-s3d-binp {
    height: 32px; font-size: 12px; border-radius: var(--d3v-r-sm, 6px);
    border: 1px solid var(--d3v-border-primary, #e4e7ec);
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, .15s) ease, box-shadow var(--d3v-t-fast, .15s) ease;
}
#wf-worker-inputs .wf-s3d-binp:focus {
    border-color: var(--d3v-accent, #2e90fa);
    box-shadow: 0 0 0 3px var(--d3v-accent-subtle, rgba(46, 144, 250, .16));
    outline: none;
}
#wf-worker-inputs .wf-s3d-bounds.is-boxid .wf-s3d-binp { opacity: .5; cursor: not-allowed; }

/* two columns once the panel is narrow — three number fields side by side stop being readable */
@media (max-width: 1100px) {
    #wf-worker-inputs .wf-s3d-bounds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* body-mounted picker modal (Peacock viewport + its selector inspector) */
.wf-s3d-picker-modal .wf-s3d-wrap { min-height: 460px; }
.wf-s3d-picker-modal .wf-s3d-state {
    display: flex; align-items: center; gap: 10px; padding: 40px 16px; justify-content: center;
    color: var(--d3v-text-secondary, #667085); font-size: 14px;
}
.wf-s3d-picker-modal .wf-s3d-state.is-err { color: var(--d3v-status-danger, #d92d20); flex-wrap: wrap; }
.wf-s3d-picker-modal .wf-s3d-3d-host {
    position: relative; min-height: 0;
    border: 1px solid var(--d3v-border-primary, #e4e7ec);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f9fafb);
    overflow: hidden;
}
.wf-s3d-picker-modal .wf-s3d-hint {
    margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--d3v-text-secondary, #667085);
}
.wf-s3d-picker-modal .wf-s3d-hint .fa { margin-right: 4px; color: var(--d3v-accent, #2e90fa); }

/* ================================================================
   DW-2774 — Modern Canvas Area + Minimap
   All colors via --wf-* tokens for automatic dark mode.
   ================================================================ */

/* ---- Canvas background ---- */
div.workflow.wf-design-modern .full-view,
body.wf-design-modern .full-view {
    background: var(--wf-bg-canvas);
}

div.workflow.wf-design-modern .chart-view,
body.wf-design-modern .chart-view {
    position: relative;
    background: var(--wf-bg-canvas);
}

/* ---- Dot grid overlay (light mode) ---- */
div.workflow.wf-design-modern .chart-view::before,
body.wf-design-modern .chart-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 1;
}

/* Canvas element itself */
div.workflow.wf-design-modern .chart-view .main_canvas,
body.wf-design-modern .chart-view .main_canvas {
    background: transparent !important;
}

/* Node execution spinners — must stack above dot grid overlay */
div.workflow.wf-design-modern .chart-view .canvas-node-spinner,
body.wf-design-modern .chart-view .canvas-node-spinner,
div.workflow.wf-design-modern .chart-view .iterating-spinner,
body.wf-design-modern .chart-view .iterating-spinner {
    z-index: 3 !important;
}

/* SVG overlay (connections, zoom behavior) must sit above dot grid */
div.workflow.wf-design-modern .chart-view svg,
body.wf-design-modern .chart-view svg {
    z-index: 2;
}

/* Dark mode: lighter dots on dark canvas */
div.workflow.wf-design-modern.wf-dark .chart-view::before,
body.wf-design-modern.wf-dark .chart-view::before {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* ---- Minimap / birds-eye view ---- */
div.workflow.wf-design-modern .birds-eye-view,
body.wf-design-modern .birds-eye-view {
    border-radius: var(--wf-r-lg) !important;
    border: 1px solid var(--wf-border-strong) !important;
    box-shadow: var(--wf-sh-md) !important;
    background: var(--wf-bg-surface) !important;
    overflow: hidden;
}

/* ---- Navigation wheel ---- */
div.workflow.wf-design-modern .wf-navigation-wheel,
body.wf-design-modern .wf-navigation-wheel {
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
}

/* ---- Floating controls ---- */
div.workflow.wf-design-modern .wf-floating-container,
body.wf-design-modern .wf-floating-container {
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    border: 1px solid var(--wf-border);
    background: var(--wf-bg-elevated);
}

div.workflow.wf-design-modern .wf-floating-container .btn,
body.wf-design-modern .wf-floating-container .btn {
    border-radius: var(--wf-r-md);
    color: var(--wf-text-secondary);
    transition: var(--wf-t-fast);
}

div.workflow.wf-design-modern .wf-floating-container .btn:hover,
body.wf-design-modern .wf-floating-container .btn:hover {
    background: var(--wf-accent-light);
    color: var(--wf-accent);
}

/* ---- Connector animation overlay canvas ---- */
div.workflow.wf-design-modern .wf-anim-overlay,
body.wf-design-modern .wf-anim-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* ---- Right-side toolbar panels ---- */
div.workflow.wf-design-modern .wf-right-panel,
body.wf-design-modern .wf-right-panel {
    background: var(--wf-bg-elevated);
    border-left: 1px solid var(--wf-border);
    box-shadow: var(--wf-sh-md);
}

/* Right toolbar — floating dark panel */
div.workflow.wf-design-modern .full-view .wf-top-actions,
body.wf-design-modern .full-view .wf-top-actions {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
    padding: 4px !important;
    gap: 2px;
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn,
body.wf-design-modern .full-view .wf-top-actions .btn {
    border-radius: var(--wf-r-sm) !important;
    border: none !important;
    background: transparent !important;
    color: var(--wf-text-muted) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn:hover,
body.wf-design-modern .full-view .wf-top-actions .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .full-view .wf-top-actions .btn.btn-primary,
body.wf-design-modern .full-view .wf-top-actions .btn.btn-primary {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}

/* Zoom toolbar — floating dark panel */
div.workflow.wf-design-modern .full-view .zoom,
body.wf-design-modern .full-view .zoom {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-md) !important;
    padding: 4px !important;
    gap: 2px;
}
div.workflow.wf-design-modern .full-view .zoom .btn,
body.wf-design-modern .full-view .zoom .btn {
    border-radius: var(--wf-r-sm) !important;
    border: none !important;
    background: transparent !important;
    color: var(--wf-text-muted) !important;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .zoom .btn:hover,
body.wf-design-modern .full-view .zoom .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* Hide classic graph info in modern — shown in statusbar instead */
div.workflow.wf-design-modern .wf-graph-info,
body.wf-design-modern .wf-graph-info {
    display: none !important;
}

/* Modern docked start worker */
div.workflow.wf-design-modern .docked-start,
body.wf-design-modern .docked-start {
    z-index: 3;
}
div.workflow.wf-design-modern .docked-start > .box,
body.wf-design-modern .docked-start > .box {
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-sh-md);
    width: 88px;
    height: 52px;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .docked-start > .box > i,
body.wf-design-modern .docked-start > .box > i {
    color: var(--wf-accent);
    font-size: 1.1em !important;
}
div.workflow.wf-design-modern .docked-start:hover > .box,
body.wf-design-modern .docked-start:hover > .box {
    background: var(--wf-accent-light);
    border-color: var(--wf-accent);
    box-shadow: var(--wf-sh-lg);
}
div.workflow.wf-design-modern .docked-start > .center,
body.wf-design-modern .docked-start > .center {
    font-size: var(--wf-fs-xs);
    font-weight: 500;
    color: var(--wf-text-secondary);
    margin-top: 4px;
}
div.workflow.wf-design-modern .docked-start .run_wf,
body.wf-design-modern .docked-start .run_wf {
    top: -36px !important;
    font-size: 18px !important;
    color: var(--wf-accent);
    background: var(--wf-bg-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-r-full);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wf-sh-sm);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .docked-start .run_wf:hover,
body.wf-design-modern .docked-start .run_wf:hover {
    background: var(--wf-accent);
    color: var(--wf-text-inverse);
    border-color: var(--wf-accent);
}
div.workflow.wf-design-modern .docked-start .ip-count,
body.wf-design-modern .docked-start .ip-count,
div.workflow.wf-design-modern .docked-start .op-count,
body.wf-design-modern .docked-start .op-count {
    font-size: var(--wf-fs-xs);
    color: var(--wf-text-muted);
    font-weight: 500;
}

/* Dark mode overrides for docked start */
div.workflow.wf-design-modern.wf-dark .docked-start > .box,
body.wf-design-modern.wf-dark .docked-start > .box {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border-strong);
}
div.workflow.wf-design-modern.wf-dark .docked-start .run_wf,
body.wf-design-modern.wf-dark .docked-start .run_wf {
    background: var(--wf-bg-elevated);
    border-color: var(--wf-border-strong);
}

/* Additional options bar */
div.workflow.wf-design-modern .full-view .additional_options,
body.wf-design-modern .full-view .additional_options {
    background: var(--wf-bg-surface);
    border-top: 1px solid var(--wf-border);
    padding: 4px 8px;
}
div.workflow.wf-design-modern .full-view .additional_options .btn,
body.wf-design-modern .full-view .additional_options .btn {
    border-radius: var(--wf-r-sm) !important;
    border: 1px solid var(--wf-border) !important;
    background: transparent !important;
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-xs) !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .additional_options .btn:hover,
body.wf-design-modern .full-view .additional_options .btn:hover {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}

/* ---- Global dropdown-menu styling for all toolbar/action-group dropdowns ---- */
div.workflow.wf-design-modern .full-view .dropdown-menu,
body.wf-design-modern .full-view .dropdown-menu {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-md) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 4px 0 !important;
    min-width: 160px;
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a,
body.wf-design-modern .full-view .dropdown-menu > li > a {
    color: var(--wf-text-secondary) !important;
    font-size: var(--wf-fs-sm) !important;
    padding: 7px 14px !important;
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:hover,
body.wf-design-modern .full-view .dropdown-menu > li > a:hover,
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:focus,
body.wf-design-modern .full-view .dropdown-menu > li > a:focus {
    background: var(--wf-accent-light) !important;
    color: var(--wf-accent) !important;
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li.active > a,
body.wf-design-modern .full-view .dropdown-menu > li.active > a {
    background: var(--wf-accent) !important;
    color: var(--wf-text-inverse) !important;
}
div.workflow.wf-design-modern .full-view .dropdown-menu .divider,
body.wf-design-modern .full-view .dropdown-menu .divider {
    background-color: var(--wf-border) !important;
    margin: 4px 0 !important;
}
/* Dropdown menu icons */
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a > i,
body.wf-design-modern .full-view .dropdown-menu > li > a > i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    color: var(--wf-text-muted);
    transition: var(--wf-t-fast);
}
div.workflow.wf-design-modern .full-view .dropdown-menu > li > a:hover > i,
body.wf-design-modern .full-view .dropdown-menu > li > a:hover > i {
    color: var(--wf-accent);
}

/* ---- Modern Execution Message (wf-exec-message) ---- */
div.workflow.wf-design-modern .wf-exec-message,
body.wf-design-modern .wf-exec-message {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-lg) !important;
    box-shadow: var(--wf-sh-lg) !important;
    padding: 16px 20px !important;
    backdrop-filter: blur(8px);
    transition: opacity 0.2s ease;
}
div.workflow.wf-design-modern .wf-exec-message .close,
body.wf-design-modern .wf-exec-message .close {
    color: var(--wf-text-muted);
    opacity: 0.6;
    transition: var(--wf-t-fast);
    font-size: 18px;
}
div.workflow.wf-design-modern .wf-exec-message .close:hover,
body.wf-design-modern .wf-exec-message .close:hover {
    opacity: 1;
    color: var(--wf-text-primary);
}
div.workflow.wf-design-modern .wf-exec-message .worker-name,
body.wf-design-modern .wf-exec-message .worker-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wf-text-primary) !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
div.workflow.wf-design-modern .wf-exec-message .worker-name .fa-cog,
body.wf-design-modern .wf-exec-message .worker-name .fa-cog {
    color: var(--wf-text-muted);
    font-size: 12px;
}

/* Progress tracker steps - modern */
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"],
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] {
    background: var(--wf-bg-surface) !important;
    border: 1px solid var(--wf-border) !important;
    border-radius: var(--wf-r-lg) !important;
    box-shadow: var(--wf-sh-lg) !important;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li {
    width: 28px;
    height: 28px;
    border: 2px solid var(--wf-border-strong) !important;
    background: var(--wf-bg-secondary) !important;
    color: var(--wf-text-muted) !important;
    font-size: 11px;
    transition: all 0.3s ease;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.active,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.active {
    border-color: var(--wf-accent) !important;
    color: var(--wf-accent) !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed {
    background: var(--d3v-success, #10B981) !important;
    border-color: var(--d3v-success, #10B981) !important;
    color: #fff !important;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li:not(:last-child):before {
    background: var(--wf-border) !important;
    height: 3px !important;
    border-radius: 2px;
}
div.workflow.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after,
body.wf-design-modern .wf-exec-message[data-viewtype="progressbar"] ul li.completed:not(:last-child):after {
    background: var(--d3v-success, #10B981) !important;
    height: 3px !important;
}

/* Step-by-step checklist - modern */
div.workflow.wf-design-modern .wf-exec-message li[data-id],
body.wf-design-modern .wf-exec-message li[data-id] {
    font-size: 12px;
    color: var(--wf-text-muted);
    padding: 3px 0;
    transition: color 0.2s ease;
}
div.workflow.wf-design-modern .wf-exec-message li[data-id].active,
body.wf-design-modern .wf-exec-message li[data-id].active {
    color: var(--d3v-success, #10B981) !important;
    font-weight: 500;
}
div.workflow.wf-design-modern .wf-exec-message li[data-id] .status,
body.wf-design-modern .wf-exec-message li[data-id] .status {
    font-size: 13px;
    margin-right: 4px;
}
div.workflow.wf-design-modern .wf-exec-message .plugins-bottom-arrow,
body.wf-design-modern .wf-exec-message .plugins-bottom-arrow {
    border-top-color: var(--wf-bg-surface) !important;
}

/* Dark mode overrides */
div.workflow.wf-design-modern.wf-dark .wf-exec-message,
body.wf-design-modern.wf-dark .wf-exec-message {
    background: var(--wf-bg-elevated) !important;
    border-color: var(--wf-border-strong) !important;
}

/* ---- Disable search-focused hide rules in modern design ---- */
/* Modern design has search positioned on the right, so no need to hide controls */
div.workflow.wf-design-modern .workflow-index-container.search-focused .play-controls,
body.wf-design-modern .workflow-index-container.search-focused .play-controls,
div.workflow.wf-design-modern .workflow-index-container.search-focused .wf-execution-status,
body.wf-design-modern .workflow-index-container.search-focused .wf-execution-status,
div.workflow.wf-design-modern .workflow-index-container.search-focused .wf-control-buttons,
body.wf-design-modern .workflow-index-container.search-focused .wf-control-buttons {
    display: flex !important;
}

/* DW-2867 — JSON input sourced from another worker type's inputs.
   Scoped to `.wf-json-from-worker` (not `.wf-workflow-builder`) because the configure
   panel renders inside a modal/sidebar that sits outside the builder root. */

.wf-json-from-worker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.04));
    transition: var(--d3v-t-fast, 150ms ease);
}

.wf-json-from-worker:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(0,0,0,0.06));
}

.wf-json-from-worker .wf-jfw-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #6b7280);
    padding: 4px 0;
    border-bottom: 1px dashed var(--d3v-border-subtle, #e5e7eb);
}

.wf-json-from-worker .wf-jfw-header i.fa,
.wf-json-from-worker .wf-jfw-header i {
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 13px;
}

.wf-json-from-worker .wf-jfw-header b {
    color: var(--d3v-text-primary, #111827);
    font-weight: 600;
}

.wf-json-from-worker .wf-jfw-header .wf-jfw-header-label {
    color: var(--d3v-text-secondary, #6b7280);
}

.wf-json-from-worker .wf-jfw-header select.wf-jfw-worker-select {
    display: none !important;
}

.wf-json-from-worker .wf-jfw-header .select2-container {
    min-width: 220px;
}

.wf-json-from-worker .wf-jfw-header .select2-container .select2-choice {
    height: 28px;
    line-height: 26px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-primary, #fff);
    padding: 0 26px 0 10px;
    color: var(--d3v-text-primary, #111827);
    font-weight: 500;
    font-size: 12px;
}

.wf-json-from-worker .wf-jfw-header .select2-container .select2-choice .select2-arrow {
    border: none;
    background: transparent;
}

.wf-json-from-worker .wf-jfw-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
}

.wf-json-from-worker .wf-jfw-table thead th {
    text-align: left;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-tertiary, #9ca3af);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-subtle, #f9fafb);
}

.wf-json-from-worker .wf-jfw-table thead th.wf-jfw-th-name {
    width: 38%;
    border-top-left-radius: var(--d3v-r-sm, 4px);
}

.wf-json-from-worker .wf-jfw-table thead th.wf-jfw-th-value {
    border-top-right-radius: var(--d3v-r-sm, 4px);
}

.wf-json-from-worker .wf-jfw-row {
    transition: var(--d3v-t-fast, 150ms ease);
}

.wf-json-from-worker .wf-jfw-row:hover {
    background: var(--d3v-bg-hover, #f3f4f6);
}

.wf-json-from-worker .wf-jfw-row + .wf-jfw-row td {
    border-top: 1px solid var(--d3v-border-subtle, #e5e7eb);
}

.wf-json-from-worker .wf-jfw-name {
    padding: 8px 10px;
    vertical-align: middle;
    color: var(--d3v-text-primary, #111827);
    height: auto !important;
}

.wf-json-from-worker .wf-jfw-name .wf-jfw-icon {
    color: var(--d3v-accent-primary, #2563eb);
    margin-right: 8px;
    width: 14px;
    display: inline-block;
    text-align: center;
}

.wf-json-from-worker .wf-jfw-name .wf-jfw-label {
    font-weight: 500;
    word-break: break-word;
}

.wf-json-from-worker .wf-jfw-value {
    padding: 6px 10px;
    vertical-align: middle;
    height: auto !important;
}

/* Neutralize FormBuilder's `full-h` + inherited modal heights that inflate each cell. */
.wf-json-from-worker .wf-jfw-value .d3view-form-builder-container,
.wf-json-from-worker .wf-jfw-value .d3view-inputsBuilder,
.wf-json-from-worker .wf-jfw-value .inputs-builder-container,
.wf-json-from-worker .wf-jfw-value .inputs-list,
.wf-json-from-worker .wf-jfw-value .inputs-tab,
.wf-json-from-worker .wf-jfw-value .all-inputs-container,
.wf-json-from-worker .wf-jfw-value .all-inputs-body,
.wf-json-from-worker .wf-jfw-value .input-tab-content,
.wf-json-from-worker .wf-jfw-value .inputs-tabs-view,
.wf-json-from-worker .wf-jfw-value .inputs-view-content,
.wf-json-from-worker .wf-jfw-value .full-h {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
}

.wf-json-from-worker .wf-jfw-value .formbuilder-dz,
.wf-json-from-worker .wf-jfw-value .ib-backdrop,
.wf-json-from-worker .wf-jfw-value .fb-spinner,
.wf-json-from-worker .wf-jfw-value .no_message,
.wf-json-from-worker .wf-jfw-value .inputs-builder-header,
.wf-json-from-worker .wf-jfw-value .inputs-builder-footer,
.wf-json-from-worker .wf-jfw-value ul#field-items > .field-item + .field-item {
    display: none !important;
}

.wf-json-from-worker .wf-jfw-value ul#field-items,
.wf-json-from-worker .wf-jfw-value ul.field-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.wf-json-from-worker .wf-jfw-value li.field-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 0 !important;
    height: auto !important;
}

.wf-json-from-worker .wf-jfw-value li.field-item > .row {
    margin: 0 !important;
}

/* Hide FormBuilder's own icon+name column — left column of our table already shows them */
.wf-json-from-worker .wf-jfw-value li.field-item .col-md-5.input-name,
.wf-json-from-worker .wf-jfw-value li.field-item .input-name {
    display: none !important;
}

/* Promote the FB value column to full width */
.wf-json-from-worker .wf-jfw-value li.field-item .col-md-7.input-value-container,
.wf-json-from-worker .wf-jfw-value li.field-item .input-value-container {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    float: none !important;
}

.wf-json-from-worker .wf-jfw-value .input-group.input-value {
    margin: 0 !important;
    width: 100% !important;
}

.wf-json-from-worker .wf-jfw-value input.form-control,
.wf-json-from-worker .wf-jfw-value select.form-control,
.wf-json-from-worker .wf-jfw-value textarea.form-control,
.wf-json-from-worker .wf-jfw-value .input-group input,
.wf-json-from-worker .wf-jfw-value .input-group select,
.wf-json-from-worker .wf-jfw-value .input-group textarea {
    height: 32px;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    transition: var(--d3v-t-fast, 150ms ease);
    width: 100% !important;
    box-sizing: border-box;
}

.wf-json-from-worker .wf-jfw-value input.form-control:focus,
.wf-json-from-worker .wf-jfw-value select.form-control:focus,
.wf-json-from-worker .wf-jfw-value textarea.form-control:focus {
    border-color: var(--d3v-accent-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--d3v-accent-soft, rgba(37, 99, 235, 0.15));
    outline: none;
}

.wf-json-from-worker .wf-jfw-value textarea.form-control {
    min-height: 60px;
    height: auto;
}

.wf-json-from-worker .wf-jfw-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d3v-status-warning-bg, #fff6e0);
    color: var(--d3v-status-warning, #b07502);
    border: 1px solid var(--d3v-status-warning-border, #f2c770);
    border-radius: var(--d3v-r-md, 6px);
    font-size: 12px;
}

.wf-json-from-worker .wf-jfw-warning i.fa {
    font-size: 14px;
}

/* DW-2860 | Preprocessor Debug sidebar — scoped under the sidebar root class since
   Plugins.Views.GenericSidebarView appends to <body>, not under a plugin root. */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .content-wrapper {
    padding: 0 !important;
    background: var(--d3v-bg-muted, #f7f8fa);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug {
    font-size: 13px;
    color: var(--d3v-text-primary, #1f2937);
    background: var(--d3v-bg-muted, #f7f8fa);
}

/* ─────────── Header ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-head {
    padding: 12px 18px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-actions .btn {
    border-radius: var(--d3v-r-sm, 4px);
    font-weight: 500;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    line-height: 1.4;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-ok {
    background: rgba(16, 185, 129, .08);
    color: var(--d3v-status-success, #047857);
    border-color: rgba(16, 185, 129, .2);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-warn {
    background: rgba(245, 158, 11, .08);
    color: var(--d3v-status-warning, #b45309);
    border-color: rgba(245, 158, 11, .22);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-chip.wf-pp-chip-err {
    background: rgba(239, 68, 68, .08);
    color: var(--d3v-status-danger, #b91c1c);
    border-color: rgba(239, 68, 68, .22);
}

/* ─────────── Body ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-list {
    width: 240px;
    min-width: 240px;
    background: var(--d3v-bg-primary, #fff);
    border-right: 1px solid var(--d3v-border-subtle, #e4e7eb);
    padding: 8px 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item {
    padding: 10px 14px;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item:hover {
    background: var(--d3v-bg-muted, #f3f4f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-item.active {
    background: rgba(59, 130, 246, .06);
    border-left-color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-name i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 11px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-edge {
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-dc-meta {
    display: flex;
    gap: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-ok {
    background: rgba(16, 185, 129, .1);
    color: var(--d3v-status-success, #047857);
    border-color: rgba(16, 185, 129, .22);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-warn {
    background: rgba(245, 158, 11, .12);
    color: var(--d3v-status-warning, #b45309);
    border-color: rgba(245, 158, 11, .24);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-mini-chip.wf-pp-chip-err {
    background: rgba(239, 68, 68, .12);
    color: var(--d3v-status-danger, #b91c1c);
    border-color: rgba(239, 68, 68, .24);
}

/* ─────────── Main (tabs) ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-main {
    background: var(--d3v-bg-muted, #f7f8fa);
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs {
    margin: 0;
    padding: 0 16px;
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
    flex: 0 0 auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    color: var(--d3v-text-secondary, #4b5563);
    background: transparent;
    font-weight: 500;
    border-radius: 0;
    transition: var(--d3v-t-fast, all .15s ease);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li > a:hover {
    color: var(--d3v-accent-primary, #3b82f6);
    background: transparent;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-tabs > li.active > a {
    color: var(--d3v-accent-primary, #3b82f6);
    border-bottom-color: var(--d3v-accent-primary, #3b82f6);
    background: transparent;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-main-body {
    padding: 16px;
    min-height: 0;
}

/* ─────────── Cards / KV ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border-subtle, #eef0f3);
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-secondary, #374151);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-header i {
    color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-card-body {
    padding: 12px 14px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--d3v-border-subtle, #eef0f3);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row:last-child { border-bottom: 0; }

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kv-row > label {
    color: var(--d3v-text-muted, #6b7280);
    font-weight: 500;
    margin: 0;
}

/* ─────────── Stats grid ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15,23,42,.04));
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.1;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-label {
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-ok .wf-pp-stat-num { color: var(--d3v-status-success, #047857); }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-stat-warn .wf-pp-stat-num { color: var(--d3v-status-warning, #b45309); }

/* ─────────── Tables ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table {
    width: 100%;
    margin: 0;
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > thead > tr > th {
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #374151);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e4e7eb);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > tbody > tr > td {
    padding: 8px 10px;
    vertical-align: top;
    border-top: 1px solid var(--d3v-border-subtle, #eef0f3);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table > tbody > tr:first-child > td {
    border-top: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-warn {
    background: rgba(245, 158, 11, .05);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-ok:hover,
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-table tr.wf-pp-row-warn:hover {
    background: rgba(59, 130, 246, .04);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-input-name {
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-source-kind {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-parent-workflow { color: #7c3aed; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-upstream-remote { color: #2563eb; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-data-collector { color: #0891b2; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-assignment-map { color: #059669; }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-kind-unmapped { color: var(--d3v-status-warning, #b45309); }

/* ─────────── Values / code / json ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-code {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    color: var(--d3v-text-secondary, #4b5563);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-muted {
    color: var(--d3v-text-muted, #6b7280);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-cell {
    max-width: 480px;
    min-width: 260px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell {
    max-height: 320px;
    overflow: auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell .generic-worker-output-view,
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-fb-cell .form-group {
    margin: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-meta {
    font-size: 11px;
    color: var(--d3v-status-warning, #b45309);
    padding: 6px 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val-meta i {
    margin-right: 4px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-val {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    padding: 6px 8px;
    margin: 0;
    background: var(--d3v-bg-muted, #f3f4f6);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-primary, #111827);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow: auto;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-json {
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11px;
    padding: 10px 12px;
    margin: 0;
    background: var(--d3v-bg-muted, #f3f4f6);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-err-text {
    color: var(--d3v-status-danger, #b91c1c);
    font-weight: 500;
}

/* ─────────── Tags ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(59, 130, 246, .08);
    color: var(--d3v-accent-primary, #2563eb);
    font-size: 11px;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 2px;
    border: 1px solid rgba(59, 130, 246, .18);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-tag.wf-pp-tag-subtle {
    background: var(--d3v-bg-muted, #f3f4f6);
    color: var(--d3v-text-secondary, #4b5563);
    border-color: var(--d3v-border-subtle, #e4e7eb);
}

/* ─────────── Empty state ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-empty {
    padding: 24px;
    text-align: center;
    color: var(--d3v-text-muted, #6b7280);
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px dashed var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-debug-empty i {
    color: var(--d3v-accent-primary, #3b82f6);
    margin-right: 6px;
}

/* ─────────── Logs ─────────── */

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px 10px;
    font-size: 11px;
    color: var(--d3v-text-muted, #6b7280);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-toolbar .wf-pp-log-count i {
    margin-right: 6px;
    color: var(--d3v-accent-primary, #3b82f6);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-list {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e4e7eb);
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
    font-family: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;
    font-size: 11.5px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry {
    padding: 6px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #eef0f3);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry:last-child { border-bottom: 0; }

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-entry:hover {
    background: rgba(59, 130, 246, .04);
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-time {
    color: var(--d3v-text-muted, #9ca3af);
    flex: 0 0 auto;
    min-width: 100px;
    cursor: help;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-type {
    flex: 0 0 auto;
    min-width: 0;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-type .label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-msg {
    color: var(--d3v-text-primary, #111827);
    word-break: break-word;
    line-height: 1.5;
}

.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-warning .wf-pp-log-msg { color: var(--d3v-status-warning, #b45309); }
.d3view-plugins-sidebar.wf-pp-debug-sidebar .wf-pp-log-error .wf-pp-log-msg { color: var(--d3v-status-danger, #b91c1c); }

/**
 * Added by shashank2104 on 2026-05-08 - DW-2928
 * Author's note (customDescription) — workflow-author guidance for required empty inputs.
 *
 * UX: single-line italic help-text (Option A) — minimal vertical footprint.
 *  - Set state    : "💬 <text> ✎"  (~20px, hover reveals pencil)
 *  - Empty state  : subtle "✎ Add note for runners" link (~20px, qualifying inputs only)
 *  - Edit state   : inline textarea + Done button, toggled via .is-editing
 *
 * Scoped under .workflow / .workflow-modal / .workflow-page so the rules
 * only affect the workflow plugin surface.
 */

div.workflow .wf-input-author-note,
div.workflow-modal .wf-input-author-note,
.workflow-page .wf-input-author-note {
    margin-top: 6px;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.45;
}

/* --- Toggle: edit-row hidden by default --------------------------------- */

div.workflow .wf-input-author-note .wf-input-author-note-edit,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit,
.workflow-page .wf-input-author-note .wf-input-author-note-edit {
    display: none;
}

/* --- View row: SET state ------------------------------------------------ */

div.workflow .wf-input-author-note.has-content .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.has-content .wf-input-author-note-view,
.workflow-page .wf-input-author-note.has-content .wf-input-author-note-view {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--d3v-text-secondary, #5a6573);
    font-style: italic;
}

div.workflow .wf-input-author-note .wf-input-author-note-icon,
div.workflow-modal .wf-input-author-note .wf-input-author-note-icon,
.workflow-page .wf-input-author-note .wf-input-author-note-icon {
    color: var(--d3v-status-info, #4a90e2);
    font-size: 11px;
    flex: 0 0 auto;
    margin-top: 3px;
    opacity: 0.85;
}

div.workflow .wf-input-author-note .wf-input-author-note-text,
div.workflow-modal .wf-input-author-note .wf-input-author-note-text,
.workflow-page .wf-input-author-note .wf-input-author-note-text {
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

div.workflow .wf-input-author-note .wf-input-author-note-edit-btn,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-btn,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-btn {
    background: transparent;
    border: 0;
    padding: 0 4px;
    color: var(--d3v-text-subtle, #9aa3ad);
    font-size: 11px;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

div.workflow .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
div.workflow-modal .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
.workflow-page .wf-input-author-note.has-content:hover .wf-input-author-note-edit-btn,
div.workflow .wf-input-author-note .wf-input-author-note-edit-btn:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-btn:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-btn:focus {
    opacity: 1;
    color: var(--d3v-status-info, #4a90e2);
    outline: none;
}

/* --- View row: EMPTY state ('Add note' affordance) --------------------- */

div.workflow .wf-input-author-note.is-empty .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.is-empty .wf-input-author-note-view,
.workflow-page .wf-input-author-note.is-empty .wf-input-author-note-view {
    display: block;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn {
    background: transparent;
    border: 0;
    padding: 2px 0;
    color: var(--d3v-text-subtle, #9aa3ad);
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

/* Reveal the empty-state affordance only on row hover (or keyboard focus) so it
   stays out of the way until the author actually looks at the input. */
div.workflow li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn,
div.workflow-modal li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn,
.workflow-page li.field-item:hover .wf-input-author-note .wf-input-author-note-add-btn {
    opacity: 0.7;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn i,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn i,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn i {
    margin-right: 4px;
    font-size: 10px;
    font-style: normal;
}

div.workflow .wf-input-author-note .wf-input-author-note-add-btn:hover,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn:hover,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn:hover,
div.workflow .wf-input-author-note .wf-input-author-note-add-btn:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-add-btn:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-add-btn:focus {
    color: var(--d3v-status-info, #4a90e2);
    opacity: 1;
    outline: none;
}

/* --- Edit row ----------------------------------------------------------- */

div.workflow .wf-input-author-note .wf-input-author-note-textarea,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea {
    width: 100%;
    resize: vertical;
    min-height: 32px;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--d3v-border-default, rgba(0, 0, 0, 0.18));
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1f2937);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

div.workflow .wf-input-author-note .wf-input-author-note-textarea:focus,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea:focus,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea:focus {
    outline: none;
    border-color: var(--d3v-status-info, #4a90e2);
    box-shadow: 0 0 0 3px var(--d3v-status-info-bg, rgba(70, 130, 230, 0.18));
}

div.workflow .wf-input-author-note .wf-input-author-note-textarea::placeholder,
div.workflow-modal .wf-input-author-note .wf-input-author-note-textarea::placeholder,
.workflow-page .wf-input-author-note .wf-input-author-note-textarea::placeholder {
    color: var(--d3v-text-subtle, #9aa3ad);
    font-style: italic;
}

div.workflow .wf-input-author-note .wf-input-author-note-edit-actions,
div.workflow-modal .wf-input-author-note .wf-input-author-note-edit-actions,
.workflow-page .wf-input-author-note .wf-input-author-note-edit-actions {
    margin-top: 4px;
    text-align: right;
}

div.workflow .wf-input-author-note .wf-input-author-note-done,
div.workflow-modal .wf-input-author-note .wf-input-author-note-done,
.workflow-page .wf-input-author-note .wf-input-author-note-done {
    color: var(--d3v-status-info, #4a90e2);
    font-size: 11px;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    text-decoration: none;
}

div.workflow .wf-input-author-note .wf-input-author-note-done:hover,
div.workflow-modal .wf-input-author-note .wf-input-author-note-done:hover,
.workflow-page .wf-input-author-note .wf-input-author-note-done:hover {
    text-decoration: underline;
}

/* --- is-editing overrides (must come LAST to win specificity-tie with
   the .has-content / .is-empty view rules above) ------------------------- */

div.workflow .wf-input-author-note.is-editing .wf-input-author-note-view,
div.workflow-modal .wf-input-author-note.is-editing .wf-input-author-note-view,
.workflow-page .wf-input-author-note.is-editing .wf-input-author-note-view {
    display: none;
}

div.workflow .wf-input-author-note.is-editing .wf-input-author-note-edit,
div.workflow-modal .wf-input-author-note.is-editing .wf-input-author-note-edit,
.workflow-page .wf-input-author-note.is-editing .wf-input-author-note-edit {
    display: block;
}

/** DW-2867 - Added by shashank2104 on 04/22/2026 - Run Worker datasource picker styles **/
.d3view-workflow .wf-worker-execution-picker {
    padding: 8px;
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-sm);
    transition: var(--d3v-t-fast);
}
.d3view-workflow .wf-worker-execution-picker:hover {
    box-shadow: var(--d3v-sh-md);
}
.d3view-workflow .wf-worker-execution-picker .ds-label label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-muted);
    margin-bottom: 4px;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-summary {
    padding: 6px 8px;
    background: var(--d3v-bg-subtle);
    border-radius: var(--d3v-r-sm);
    font-size: 12px;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-configure-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-test-result {
    font-size: 11px;
    color: var(--d3v-text-muted);
    max-width: 60%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-workflow .wf-worker-execution-picker .wf-we-test-result.text-danger {
    color: var(--d3v-status-danger, #d9534f);
}

/** Added by shashank2104 on 2026-04-19 - DVFIV-2003 - Cert dataset column mapper styles.
    All selectors scoped under .cert-col-mapper (modal body) OR prefixed with
    .cert-map-* (builder toolbar button / per-viz overlay badge).
**/

/* ── Builder header: Map Columns button ───────────────────────────── */

.wf-certification-builder .cert-map-columns-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.wf-certification-builder .cert-map-columns-btn.has-mismatches {
    border-color: var(--d3v-status-warning, #f59e0b);
    color: var(--d3v-status-warning, #f59e0b);
    background: var(--d3v-bg-primary, #fff);
}

.wf-certification-builder .cert-map-columns-btn.has-mismatches:hover {
    background: rgba(245, 158, 11, 0.08);
}

.wf-certification-builder .cert-map-columns-btn.all-in-sync {
    opacity: 0.6;
    cursor: default;
}

.wf-certification-builder .cert-map-columns-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--d3v-status-warning, #f59e0b);
    color: #fff;
    line-height: 14px;
}

/* ── Per-viz warning overlay in preview ───────────────────────────── */

.wf-certification-builder .cert-viz-col-warning {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--d3v-status-danger, #ef4444);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    animation: cert-col-warning-pulse 1.6s ease-in-out infinite;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.wf-certification-builder .cert-viz-col-warning:hover {
    transform: scale(1.15);
}

@keyframes cert-col-warning-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35); }
    50%      { box-shadow: 0 2px 10px rgba(239, 68, 68, 0.75); }
}

/* ── Input button row: inline Map Columns button ──────────────────── */
/* DVFIV-2003 (2026-04-21): moved out of .wf-cert-summary-actions now
   that the summary card header has no action bar. The button lives in
   .cert-map-columns-container inside the outer input button row. */

.cert-map-columns-launch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--d3v-status-warning, #f59e0b);
    border-radius: var(--d3v-r-md, 6px);
    background: rgba(245, 158, 11, 0.08);
    color: var(--d3v-status-warning, #f59e0b);
    cursor: pointer;
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.cert-map-columns-launch:hover {
    background: rgba(245, 158, 11, 0.15);
}

.cert-map-columns-launch .count {
    display: inline-block;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--d3v-status-warning, #f59e0b);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
}

/* ── Modal body ───────────────────────────────────────────────────── */

.cert-col-mapper {
    padding: 4px 2px;
    font-size: 13px;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-summary {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--d3v-bg-tertiary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
}

.cert-col-mapper-summary-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cert-col-mapper-summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
}

.cert-col-mapper-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-intro {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--d3v-status-warning, #f59e0b);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    line-height: 1.5;
}

.cert-col-mapper-intro .fa {
    color: var(--d3v-status-warning, #f59e0b);
    margin-top: 2px;
}

.cert-col-mapper-nocols {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-status-danger, #ef4444);
}

.cert-col-mapper-nocols .fa {
    font-size: 24px;
}

.cert-col-mapper-nocols-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.cert-col-mapper-nocols-text {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.5;
}

/* ── Rows ─────────────────────────────────────────────────────────── */

.cert-col-mapper-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cert-col-mapper-row {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.cert-col-mapper-row:hover {
    border-color: var(--d3v-border-strong, #cbd5e1);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
}

.cert-col-mapper-row-param-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 4px;
}

.cert-col-mapper-row-old {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cert-col-mapper-old-name {
    font-family: var(--d3v-font-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-col-mapper-type-chip {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 10px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.cert-col-mapper-missing-tag {
    display: inline-block;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--d3v-status-danger, #ef4444);
}

.cert-col-mapper-row-arrow {
    text-align: center;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 14px;
}

.cert-col-mapper-row-new .select2-container {
    width: 100% !important;
}
/** Added by shashank2104 on 2026-04-17 - DVFIV-2001 - Certification template summary card.
 *  Scoped under workflow plugin roots (.wf-builder and .workflow-modal) and uses only
 *  --d3v-* foundation tokens. Sits in the node config panel in place of the raw textarea
 *  when input_template has option renderAsSummary: true. Mirrors the reporter summary
 *  but uses a richer card layout with stat chips, dataset chips, chart-type list, and
 *  a pages table. **/

.wf-builder .wf-cert-summary,
.workflow-modal .wf-cert-summary {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, var(--d3v-border, #e2e8f0));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm);
    padding: 0;
    margin: 0 0 8px;
    overflow: hidden;
    transition: box-shadow var(--d3v-t-base, 180ms ease), border-color var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary:hover,
.workflow-modal .wf-cert-summary:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--d3v-border, #e2e8f0);
}

/* ---- Header ---- */
.wf-builder .wf-cert-summary-header,
.workflow-modal .wf-cert-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.wf-builder .wf-cert-summary-title,
.workflow-modal .wf-cert-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    letter-spacing: 0.2px;
}

.wf-builder .wf-cert-summary-title i,
.workflow-modal .wf-cert-summary-title i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 15px;
}

.wf-builder .wf-cert-summary-actions .btn,
.workflow-modal .wf-cert-summary-actions .btn {
    transition: transform var(--d3v-t-base, 180ms ease), box-shadow var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-actions .btn:hover,
.workflow-modal .wf-cert-summary-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-sm);
}

.wf-builder .wf-cert-summary-actions .btn:focus,
.workflow-modal .wf-cert-summary-actions .btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* ---- Stat chips ---- */
.wf-builder .wf-cert-summary-stats,
.workflow-modal .wf-cert-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

@media (max-width: 640px) {
    .wf-builder .wf-cert-summary-stats,
    .workflow-modal .wf-cert-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wf-builder .wf-cert-summary-stat,
.workflow-modal .wf-cert-summary-stat {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 10px;
    text-align: center;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-stat:hover,
.workflow-modal .wf-cert-summary-stat:hover {
    box-shadow: var(--d3v-sh-sm);
    transform: translateY(-1px);
}

.wf-builder .wf-cert-summary-stat-value,
.workflow-modal .wf-cert-summary-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.wf-builder .wf-cert-summary-stat-label,
.workflow-modal .wf-cert-summary-stat-label {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ---- Sections ---- */
.wf-builder .wf-cert-summary-section,
.workflow-modal .wf-cert-summary-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

.wf-builder .wf-cert-summary-section:last-child,
.workflow-modal .wf-cert-summary-section:last-child {
    border-bottom: 0;
}

.wf-builder .wf-cert-summary-section-title,
.workflow-modal .wf-cert-summary-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* ---- Dataset chips ---- */
.wf-builder .wf-cert-summary-chips,
.workflow-modal .wf-cert-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-builder .wf-cert-summary-chip,
.workflow-modal .wf-cert-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    max-width: 100%;
    cursor: default;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease), background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-chip:hover,
.workflow-modal .wf-cert-summary-chip:hover {
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-1px);
}

.wf-builder .wf-cert-summary-chip i,
.workflow-modal .wf-cert-summary-chip i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 10px;
}

.wf-builder .wf-cert-summary-chip-label,
.workflow-modal .wf-cert-summary-chip-label {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-builder .wf-cert-summary-chip-count,
.workflow-modal .wf-cert-summary-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: var(--d3v-accent-primary, #3b82f6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}

/* ---- Chart list ---- */
.wf-builder .wf-cert-summary-chart-list,
.workflow-modal .wf-cert-summary-chart-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wf-builder .wf-cert-summary-chart-row,
.workflow-modal .wf-cert-summary-chart-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-chart-row:hover,
.workflow-modal .wf-cert-summary-chart-row:hover {
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
}

.wf-builder .wf-cert-summary-chart-icon,
.workflow-modal .wf-cert-summary-chart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    flex-shrink: 0;
}

.wf-builder .wf-cert-summary-chart-icon img,
.workflow-modal .wf-cert-summary-chart-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.wf-builder .wf-cert-summary-chart-icon i,
.workflow-modal .wf-cert-summary-chart-icon i {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 13px;
}

.wf-builder .wf-cert-summary-chart-name,
.workflow-modal .wf-cert-summary-chart-name {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-builder .wf-cert-summary-chart-count,
.workflow-modal .wf-cert-summary-chart-count {
    flex-shrink: 0;
    min-width: 22px;
    padding: 2px 8px;
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}

/* ---- Pages table ---- */
.wf-builder .wf-cert-summary-pages,
.workflow-modal .wf-cert-summary-pages {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.wf-builder .wf-cert-summary-pages thead th,
.workflow-modal .wf-cert-summary-pages thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 8px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}

.wf-builder .wf-cert-summary-pages tbody tr,
.workflow-modal .wf-cert-summary-pages tbody tr {
    transition: background var(--d3v-t-base, 180ms ease);
}

.wf-builder .wf-cert-summary-pages tbody tr:hover,
.workflow-modal .wf-cert-summary-pages tbody tr:hover {
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
}

.wf-builder .wf-cert-summary-pages tbody td,
.workflow-modal .wf-cert-summary-pages tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}

.wf-builder .wf-cert-summary-pages tbody tr:last-child td,
.workflow-modal .wf-cert-summary-pages tbody tr:last-child td {
    border-bottom: 0;
}

.wf-builder .wf-cert-summary-page-num,
.workflow-modal .wf-cert-summary-page-num {
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wf-builder .wf-cert-summary-page-viz,
.workflow-modal .wf-cert-summary-page-viz {
    text-align: right;
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Empty state ---- */
.wf-builder .wf-cert-summary-empty,
.workflow-modal .wf-cert-summary-empty {
    padding: 28px 20px;
    text-align: center;
}

.wf-builder .wf-cert-summary-empty-icon,
.workflow-modal .wf-cert-summary-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 50%;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 20px;
}

.wf-builder .wf-cert-summary-empty-title,
.workflow-modal .wf-cert-summary-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    margin-bottom: 4px;
}

.wf-builder .wf-cert-summary-empty-text,
.workflow-modal .wf-cert-summary-empty-text {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
    max-width: 320px;
    margin: 0 auto;
}

.wf-builder .wf-cert-summary-empty-text strong,
.workflow-modal .wf-cert-summary-empty-text strong {
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
}

/* Added by shashank2104 on 2026-04-09 - DVFIV-1991 - extraction config summary container */
/* Rebuilt by shashank2104 on 06/24/2026 - CS-469 - card design MIRRORING wf-cert-layout-summary
   (header + centered stat chips + name-chip section + integrated stale banner). Scoped under the
   workflow plugin roots and uses only --d3v-* foundation tokens. */

.wf-builder .wf-ecs-card,
.workflow-modal .wf-ecs-card {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, var(--d3v-border, #e2e8f0));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm);
    margin: 0 0 8px;
    overflow: hidden;
    transition: box-shadow var(--d3v-t-base, 180ms ease), border-color var(--d3v-t-base, 180ms ease);
}
.wf-builder .wf-ecs-card:hover,
.workflow-modal .wf-ecs-card:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--d3v-border, #e2e8f0);
}

/* ---- Header ---- */
.wf-builder .wf-ecs-card-header,
.workflow-modal .wf-ecs-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.wf-builder .wf-ecs-card-title,
.workflow-modal .wf-ecs-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    letter-spacing: 0.2px;
}
.wf-builder .wf-ecs-card-title i,
.workflow-modal .wf-ecs-card-title i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 15px;
}
.wf-builder .wf-ecs-card-badge,
.workflow-modal .wf-ecs-card-badge {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--d3v-accent-primary, #3b82f6);
    border-radius: 9999px;
    font-variant-numeric: tabular-nums;
}
.wf-builder .wf-ecs-card.is-stale .wf-ecs-card-badge,
.workflow-modal .wf-ecs-card.is-stale .wf-ecs-card-badge {
    background: var(--d3v-status-warning, #e0a800);
}

/* ---- Stat chips (centered: value on top, uppercase label below) ---- */
.wf-builder .wf-ecs-card-stats,
.workflow-modal .wf-ecs-card-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}
@media (max-width: 640px) {
    .wf-builder .wf-ecs-card-stats,
    .workflow-modal .wf-ecs-card-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.wf-builder .wf-ecs-card-stat,
.workflow-modal .wf-ecs-card-stat {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 10px;
    text-align: center;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease);
}
.wf-builder .wf-ecs-card-stat:hover,
.workflow-modal .wf-ecs-card-stat:hover {
    box-shadow: var(--d3v-sh-sm);
    transform: translateY(-1px);
}
.wf-builder .wf-ecs-card-stat-value,
.workflow-modal .wf-ecs-card-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wf-builder .wf-ecs-card-stat-label,
.workflow-modal .wf-ecs-card-stat-label {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ---- Sections ---- */
.wf-builder .wf-ecs-card-section,
.workflow-modal .wf-ecs-card-section {
    padding: 12px 14px;
    border-bottom: 1px solid var(--d3v-border-light, #e2e8f0);
}
.wf-builder .wf-ecs-card-section:last-child,
.workflow-modal .wf-ecs-card-section:last-child {
    border-bottom: 0;
}
.wf-builder .wf-ecs-card-section-title,
.workflow-modal .wf-ecs-card-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* ---- Name chips (pill: icon + label) ---- */
.wf-builder .wf-ecs-card-chips,
.workflow-modal .wf-ecs-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wf-builder .wf-ecs-card-chip,
.workflow-modal .wf-ecs-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--d3v-bg-subtle, var(--d3v-bg-secondary, #f1f5f9));
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    max-width: 100%;
    cursor: default;
    transition: box-shadow var(--d3v-t-base, 180ms ease), transform var(--d3v-t-base, 180ms ease), background var(--d3v-t-base, 180ms ease);
}
.wf-builder .wf-ecs-card-chip:hover,
.workflow-modal .wf-ecs-card-chip:hover {
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-1px);
}
.wf-builder .wf-ecs-card-chip i,
.workflow-modal .wf-ecs-card-chip i {
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 10px;
}
.wf-builder .wf-ecs-card-chip-label,
.workflow-modal .wf-ecs-card-chip-label {
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.wf-builder .wf-ecs-card-chip-val,
.workflow-modal .wf-ecs-card-chip-val {
    margin-left: 2px;
    padding: 1px 7px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-light, #e2e8f0);
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---- Legacy note ---- */
.wf-builder .wf-ecs-card-legacy,
.workflow-modal .wf-ecs-card-legacy {
    font-size: 11px;
    font-style: italic;
    color: var(--d3v-text-muted, #94a3b8);
}
.wf-builder .wf-ecs-card-legacy i,
.workflow-modal .wf-ecs-card-legacy i {
    color: var(--d3v-status-warning, #f0ad4e);
    margin-right: 4px;
}

/*
 * Special CSS rules not matched to specific templates
 * Category: builder
 * Auto-generated by modularize_css.py
 */

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

div.wf-carousel div.d3view-inputsBuilder {
border: none;
}

div.wf-temp-canvas {
position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
}

.wf-canvas-tooltip.worker-error {
padding: 0;
}

body span.wf-canvas-tooltip.maximized {
max-width: unset;
    left: 15% !important;
    top: 5% !important;
    width: 70%;
    height: 90%;
    z-index: 2000;
}

body span.wf-canvas-tooltip.maximized:before,
body span.wf-canvas-tooltip.maximized:after {
display: none;
}

body span.wf-canvas-tooltip .wf-danger {
font-size: 1.4em;
}

body span.wf-canvas-tooltip.bottom-arrow:before,
body span.wf-canvas-tooltip.bottom-arrow:after {
width: 0;
    height: 0;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border-style: solid;
}

body span.wf-canvas-tooltip.bottom-arrow:before {
border-width: 8px 8px 0 8px;
    border-color: #FFF transparent transparent transparent;
}

body span.wf-canvas-tooltip.bottom-arrow:after {
border-width: 9px 9px 0 9px;
    border-color: #EEE transparent transparent transparent;
}

span.wf-3d-node-label {
font-size: 13px;
    font-weight: 500;
    color: #4f5359;
    position: absolute;
    z-index: 20;
}

div.wf-carousel div.d3view-inputsBuilder {
border: none;
}

div.wf-temp-canvas {
position: fixed;
    top: 0;
    left: 0;
    z-index: 1051;
}

.wf-canvas-tooltip.worker-error {
padding: 0;
}


/* WorkflowBuilderAIView | Phase 6.2 — chat-first AI Workflow UI shell */

.wfb-ai-shell {
    max-width: 960px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Phase 13.b — landing shell needs more breathing room since it now
   shows the conversation list AND the new-conversation entry-points
   side-by-side. Other shell variants (setup, picker, chat) keep the
   narrower 960px width. */
.wfb-ai-shell--landing {
    max-width: 1280px;
}

.wfb-ai-landing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.wfb-ai-landing-col {
    min-width: 0; /* lets the left col actually shrink so its scroll works */
}

.wfb-ai-landing-col--right {
    /* Sticky stays in place while the conversation list scrolls
       independently in its own region. */
    position: sticky;
    top: 24px;
}

.wfb-ai-landing-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wfb-ai-landing-col-title .fa {
    color: #2c5282;
    font-size: 14px;
}

/* Right-column cards stack vertically. The existing .wfb-ai-setup-cards
   already does flex-direction: column with gap, so it just works inside
   the column at its native shape. */

/* Responsive: collapse to single column under ~860px (the right-col
   width + a comfortable left-col minimum). */
@media (max-width: 860px) {
    .wfb-ai-landing-grid {
        grid-template-columns: 1fr;
    }
    .wfb-ai-landing-col--right {
        position: static;
    }
}

/* Header — title + New Conversation CTA */
.wfb-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 18px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.wfb-ai-header-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wfb-ai-header-title .fa-wand-magic-sparkles {
    color: #2c5282;
    font-size: 22px;
}

.wfb-ai-new-conversation {
    font-weight: 600;
}

.wfb-ai-new-conversation .fa-plus {
    margin-right: 4px;
}

/* List region — Phase 13.b bento style: light-grey filled box at a
   fixed height. Conversation cards (white) sit inside this grey
   container, so a long list scrolls within the bento. */
.wfb-ai-list-region {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 480px;
    background: #f5f6f8;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    overflow: hidden;
}

.wfb-ai-list-search {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid #e6e8eb;
    background: transparent; /* let the bento's grey show through */
    flex-shrink: 0;
}

.wfb-ai-list-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ad;
    font-size: 13px;
    pointer-events: none;
}

.wfb-ai-list-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-list-search-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-list-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
}

.wfb-ai-list-empty-search {
    padding: 24px 12px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

.wfb-ai-list-empty-search .fa {
    margin-right: 6px;
    color: #aaa;
}

/* Conversation list */
.wfb-ai-conversation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-conversation-item {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover-only action buttons (Phase 13.a). Container holds the delete
   icon (and later the star + rename pencil). Hidden until the card is
   hovered so cards stay clean at rest. */
.wfb-ai-conversation-actions {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.wfb-ai-conversation-item:hover .wfb-ai-conversation-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Phase 13.a — while a star/unstar reorder animation is in flight,
   FLIP transforms put cards at positions that don't match their layout.
   Clicking through that window hits the wrong card's star. Block all
   action-button clicks across the list until the animation settles. */
.wfb-ai-conversation-list--reordering .wfb-ai-conversation-actions,
.wfb-ai-conversation-list--reordering .wfb-ai-conversation-actions * {
    pointer-events: none !important;
}

/* Top-right slot now holds [delete, star]. The container itself is
   hover-only (same as before). Special case: when a card is starred,
   the star icon stays visible at rest (it's both the state indicator
   AND the unstar trigger), but the delete button stays hover-only —
   we don't want delete fading in just because the card was starred. */
.wfb-ai-conversation-actions--top {
    top: 8px;
    bottom: auto;
}

.wfb-ai-conversation-item--starred .wfb-ai-conversation-actions--top {
    opacity: 1;
    pointer-events: auto;
}

/* Within a starred card, dim the delete button until hover. */
.wfb-ai-conversation-item--starred:not(:hover) .wfb-ai-card-btn--delete {
    opacity: 0;
    pointer-events: none;
}

.wfb-ai-card-btn--star.is-starred {
    color: #f5a623;
}

.wfb-ai-card-btn--star.is-starred:hover {
    background: #fff8e6;
    border-color: #f7d590;
    color: #d97706;
}

.wfb-ai-card-btn--star:hover {
    background: #fffaf0;
    border-color: #f7d590;
    color: #d97706;
}

.wfb-ai-card-btn {
    width: 28px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-card-btn:hover {
    background: #fff;
    border-color: #d6dbe0;
    color: #333;
}

.wfb-ai-card-btn--delete:hover {
    background: #fff5f5;
    border-color: #fbb;
    color: #c53030;
}

.wfb-ai-conversation-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-conversation-name {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    padding-right: 72px; /* leave room for the top-right [delete, star] buttons */
}

.wfb-ai-conversation-name-text {
    flex: 0 1 auto;
    min-width: 0;
}

/* Inline rename pencil — sits just to the right of the name. Hover-only;
   smaller than the corner cluster buttons so it reads as a name-row
   affordance, not part of the top-right action group. */
.wfb-ai-card-btn--rename {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    font-size: 11px;
    align-self: center;
    opacity: 0;
    pointer-events: none;
}

.wfb-ai-conversation-item:hover .wfb-ai-card-btn--rename {
    opacity: 1;
    pointer-events: auto;
}

.wfb-ai-card-btn--rename:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    color: #2c5282;
}

.wfb-ai-conversation-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #888;
}

.wfb-ai-conversation-workflow .fa,
.wfb-ai-conversation-time .fa {
    color: #999;
    margin-right: 4px;
}

.wfb-ai-conversation-workflow {
    color: #555;
}

.wfb-ai-conversation-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-conversation-stale {
    color: #856404;
}

.wfb-ai-conversation-stale .fa {
    color: #d46b08;
    margin-right: 4px;
}

.wfb-ai-conversation-item--stale {
    background: #fff7e6;
    border-color: #ffe7ba;
}

.wfb-ai-conversation-item--stale:hover {
    background: #fff1d6;
    border-color: #ffd591;
}

/* Empty state */
.wfb-ai-empty-state {
    text-align: center;
    padding: 64px 16px;
    color: #555;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    background: #fafbfc;
}

.wfb-ai-empty-icon {
    font-size: 48px;
    color: #c6d9ec;
    margin-bottom: 16px;
}

.wfb-ai-empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
}

.wfb-ai-empty-state p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.wfb-ai-empty-state strong {
    color: #2c5282;
    font-weight: 600;
}

/* Loading + error states */
.wfb-ai-loading {
    text-align: center;
    padding: 48px 16px;
    color: #888;
    font-size: 13px;
}

.wfb-ai-loading .fa-spin {
    margin-right: 8px;
    color: #999;
}

.wfb-ai-error {
    margin: 24px auto;
    max-width: 640px;
}

.wfb-ai-error .fa {
    margin-right: 6px;
}

/* ====================================================================
   Phase 6.3 — setup chooser, pickers, existing-conversations modal
   ==================================================================== */

/* Header back button + spacer keep the title centered when a back
   button is present on non-list views. */
.wfb-ai-header .wfb-ai-back {
    flex: 0 0 auto;
}

.wfb-ai-header .wfb-ai-header-spacer {
    /* Mirrors the back-button width so the centered title stays
       centered. ~80px matches "← Back" in default Bootstrap sizing. */
    flex: 0 0 80px;
    display: inline-block;
}

/* When a back button is rendered, the title sits between back and
   spacer — keep it centered + bring its margin in. */
.wfb-ai-header .wfb-ai-back + .wfb-ai-header-title {
    flex: 1 1 auto;
    justify-content: center;
}


/* ----- Setup chooser ----- */

.wfb-ai-setup-lead {
    color: #555;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: 720px;
    text-align: center;
}

.wfb-ai-setup-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wfb-ai-setup-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 18px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.wfb-ai-setup-card:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-setup-card:active {
    transform: translateY(1px);
}

.wfb-ai-setup-card-icon {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.wfb-ai-setup-card-icon--saved {
    background: #e0ecf8;
    color: #2c5282;
}

.wfb-ai-setup-card-icon--library {
    background: #e8daef;
    color: #6c3483;
}

.wfb-ai-setup-card-icon--empty {
    background: #d4edda;
    color: #155724;
}

.wfb-ai-setup-card-body {
    flex: 1 1 0;
    min-width: 0;
}

.wfb-ai-setup-card-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-setup-card-body p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}

.wfb-ai-setup-card-cta {
    font-size: 12px;
    font-weight: 600;
    color: #2c5282;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.wfb-ai-setup-card-cta .fa {
    margin-left: 4px;
}


/* ----- Pickers (saved + library, shared template) ----- */

.wfb-ai-picker-search {
    position: relative;
    margin-bottom: 16px;
}

.wfb-ai-picker-search .fa-search {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 13px;
}

.wfb-ai-picker-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-picker-search-input:focus {
    outline: none;
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-picker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-picker-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-picker-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.wfb-ai-picker-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wfb-ai-picker-item-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Phase 13.b — picker-item footer: workflow id + created + updated.
   Compact uppercase-style stat row, divides cleanly from the name +
   subtitle above with a hairline border so it reads as metadata. */
.wfb-ai-picker-item-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #eef0f3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: #888;
}

.wfb-ai-picker-item-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.wfb-ai-picker-item-stat .fa {
    color: #aaa;
    font-size: 10px;
}

.wfb-ai-picker-item-stat--id strong {
    color: #333;
    font-weight: 700;
    font-size: 12px;
}


/* ----- Existing-conversations confirmation modal ----- */

.wfb-ai-existing-convos {
    padding: 4px 4px 0;
}

.wfb-ai-existing-convos-lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #555;
}

.wfb-ai-existing-convos-lead strong {
    color: #333;
}

.wfb-ai-existing-convos-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    max-height: 320px;
    overflow-y: auto;
}

.wfb-ai-existing-convos-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wfb-ai-existing-convos-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.wfb-ai-existing-convos-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-existing-convos-item-preview {
    margin-top: 4px;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.wfb-ai-existing-convos-item-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    color: #999;
}

.wfb-ai-existing-convos-item-meta .fa {
    margin-right: 4px;
}

.wfb-ai-existing-convos-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid #f0f0f0;
}


/* ====================================================================
   Modern button — replaces Bootstrap's btn-default / btn-primary on
   AI Workflow Builder surfaces. Two variants:
     wfb-ai-btn--primary  : filled, brand-blue, used for the New
                            Conversation CTA + "Start anyway" modal
                            action.
     wfb-ai-btn--ghost    : low-emphasis outline, used for the Back
                            buttons on the setup + picker views.
   ==================================================================== */

.wfb-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.1s ease;
    outline: none;
}

.wfb-ai-btn:focus { outline: none; }

.wfb-ai-btn .fa {
    font-size: 12px;
}

.wfb-ai-btn--primary {
    background: #2c5282;
    color: #fff;
    border-color: #2c5282;
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18);
}

.wfb-ai-btn--primary:hover,
.wfb-ai-btn--primary:focus {
    background: #234668;
    border-color: #234668;
    color: #fff;
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.28);
    transform: translateY(-1px);
}

.wfb-ai-btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18);
}

.wfb-ai-btn--ghost {
    background: transparent;
    color: #555;
    border-color: #e0e0e0;
}

.wfb-ai-btn--ghost:hover,
.wfb-ai-btn--ghost:focus {
    background: #f0f0f0;
    color: #2c5282;
    border-color: #c6d9ec;
}

.wfb-ai-btn--ghost:active {
    background: #e8e8e8;
}


/* ====================================================================
   Picker skeleton loading — shimmer rows replace the centered spinner
   so the layout stays stable while data is being fetched. Per the
   frontend-style guide: #e9ecef background + a horizontally-sweeping
   white linear-gradient. The shimmer is a separate ::after layer on
   each skeleton-line so multiple lines stay in phase across a row.
   ==================================================================== */

.wfb-ai-picker-list--skeleton {
    list-style: none;
    padding: 0;
    margin: 0;
    pointer-events: none;
}

.wfb-ai-picker-item--skeleton {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: #fff;
}

.wfb-ai-skeleton-line {
    position: relative;
    overflow: hidden;
    background: #e9ecef;
    border-radius: 4px;
    height: 12px;
}

.wfb-ai-skeleton-line + .wfb-ai-skeleton-line {
    margin-top: 8px;
}

.wfb-ai-skeleton-line--name {
    width: 55%;
    height: 14px;
}

.wfb-ai-skeleton-line--meta {
    width: 35%;
    height: 10px;
}

.wfb-ai-skeleton-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.55),
        transparent
    );
    transform: translateX(-100%);
    animation: wfb-ai-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes wfb-ai-skeleton-shimmer {
    100% { transform: translateX(100%); }
}


/* ====================================================================
   Phase 6.4 — chat surface (full-width shell, push-not-overlay sidebar)

   Layout:
     .wfb-ai-shell--chat        full viewport width, flex column
       .wfb-ai-chat-header      full-width top bar; back/hamburger anchor
                                at the absolute top-left of the screen
       .wfb-ai-chat-body        flex row that fills the remaining height
         .wfb-ai-chat-sidebar   width animates 0 ↔ 320px (push, not overlay)
         .wfb-ai-chat-content   flex 1, contains scrollable messages and
                                the input bar; both have an inner column
                                clamped to ~760px and centered in the
                                remaining content width

   When the sidebar opens it pushes the content right; the content's
   inner column re-centers in the new space so user/agent bubbles stay
   readable instead of slamming against the screen edges.
   ==================================================================== */

.wfb-ai-shell--chat {
    /* Use the full available width — override the default centered shell. */
    max-width: none;
    margin: 0;
    padding: 0;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ----- Header (full-width, anchored top-left)
   The only border line in the chat surface — separates the header from
   the conversation section below. ----- */

.wfb-ai-chat-header {
    flex: 0 0 auto;
    /* Phase 13.b Stage 3 — 3-column grid: left (1fr) | center (auto) |
       right (1fr). Center auto-sizes around its content but the equal
       fr columns on either side keep it optically centered regardless
       of side widths. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    z-index: 10;
}

.wfb-ai-chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    min-width: 0;
}

.wfb-ai-chat-header-title {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-header-title .fa-sitemap {
    color: #2c5282;
}

.wfb-ai-chat-workflow-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60ch;
}

.wfb-ai-chat-workflow-id {
    color: #999;
    font-weight: 400;
    font-size: 13px;
    margin-left: 4px;
}

.wfb-ai-chat-header-spacer {
    /* Mirrors the combined width of the hamburger + back button on the
       left so the centered title actually centers on the screen. The
       width is approximate (icon-btn 36 + gap 8 + back ~84 = ~128). */
    flex: 0 0 128px;
    display: inline-block;
}


/* ----- Body
   Position-relative host for the absolutely-positioned sidebar. The
   sidebar overlays the content's left margin instead of being a flex
   sibling that pushes the content; the messages/input columns get a
   smart margin-left that only kicks in when the sidebar would actually
   collide with the centered message column on narrow screens. ----- */

.wfb-ai-chat-body {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}


/* ----- Sidebar (overlay-style, slide-in animation)
   Outer width animates 0 ↔ 320px with overflow:hidden. Inner is
   absolutely positioned and anchored to the outer's right edge — so as
   the outer expands, the inner's left edge translates from x=-320px
   (off-screen-left) to x=0 (on-screen). True slide-in feel. ----- */

.wfb-ai-chat-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.22s ease;
    /* Bumped to 100 so the sidebar reliably sits above the embedded
       workflow plugin's content (FORA chat, AgenticView panels). The
       embedded plugin's z-index hierarchy is hard to predict; 100
       puts us above everything except modals. */
    z-index: 100;
    background: #fafbfc;
}

.wfb-ai-shell--sidebar-open .wfb-ai-chat-sidebar {
    width: 320px;
}

/* Slide the chat content right when the sidebar is open so it doesn't
   sit on top of the sidebar. The embedded plugin's white background
   was covering the absolute-positioned sidebar. transition matches the
   sidebar's width transition for a synchronized slide feel. */
.wfb-ai-chat-content {
    transition: padding-left 0.22s ease;
}

.wfb-ai-shell--sidebar-open .wfb-ai-chat-content {
    padding-left: 320px;
}

.wfb-ai-chat-sidebar-inner {
    /* Anchored to the right edge of the outer so the contents slide
       into view as the outer width grows from 0 → 320px. */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
}

.wfb-ai-chat-sidebar-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 14px 16px;
}

.wfb-ai-chat-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.wfb-ai-chat-sidebar-title .fa-wand-magic-sparkles {
    color: #2c5282;
}

.wfb-ai-chat-sidebar-actions {
    flex: 0 0 auto;
    padding: 12px 16px;
}

.wfb-ai-chat-sidebar-actions .wfb-ai-btn--primary {
    width: 100%;
    justify-content: center;
}

.wfb-ai-chat-sidebar-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 12px;
}


/* Sidebar list rows */

.wfb-ai-chat-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wfb-ai-chat-sidebar-item {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-chat-sidebar-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-chat-sidebar-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-sidebar-item-preview {
    margin-top: 3px;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wfb-ai-chat-sidebar-item-workflow {
    margin-top: 3px;
    font-size: 11px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wfb-ai-chat-sidebar-item-workflow .fa {
    color: #999;
    margin-right: 4px;
}

.wfb-ai-chat-sidebar-item-stale {
    margin-top: 3px;
    font-size: 11px;
    color: #856404;
}

.wfb-ai-chat-sidebar-item-stale .fa {
    color: #d46b08;
    margin-right: 4px;
}

.wfb-ai-chat-sidebar-item--stale {
    background: #fff7e6;
    border-color: #ffe7ba;
}

.wfb-ai-chat-sidebar-item--stale:hover {
    background: #fff1d6;
    border-color: #ffd591;
}

.wfb-ai-chat-sidebar-empty {
    padding: 24px 8px;
    text-align: center;
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

.wfb-ai-chat-sidebar-empty p {
    margin: 0 0 8px;
}

.wfb-ai-chat-sidebar-empty-hint {
    font-size: 12px;
    color: #999;
}


/* ----- Content
   Always full width of the body (sidebar is absolutely-positioned, not
   in flex flow). The messages-column and input-bar-column inside use a
   smart margin-left that auto-centers when there's room and only shifts
   right when the sidebar would actually collide with the column on
   narrow screens. ----- */

.wfb-ai-chat-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.wfb-ai-chat-messages {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 0;
}

.wfb-ai-chat-messages-column {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* When the sidebar is open, the column's left margin becomes the larger
   of the natural-centered margin or 320px (the sidebar's intrusion). On
   wide viewports the natural margin wins → no shift; on narrow viewports
   the 320px wins → shift just enough to clear the sidebar. The same
   rule applies to the input bar column so they stay aligned. */
.wfb-ai-shell--sidebar-open .wfb-ai-chat-messages-column,
.wfb-ai-shell--sidebar-open .wfb-ai-chat-input-bar-column {
    margin-left: max((100% - 760px) / 2, 320px);
    margin-right: auto;
}

.wfb-ai-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
    animation: wfb-ai-chat-msg-in 0.2s ease both;
}

@keyframes wfb-ai-chat-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wfb-ai-chat-msg--agent {
    align-self: flex-start;
}

.wfb-ai-chat-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.wfb-ai-chat-msg-avatar {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(118, 75, 162, 0.25);
}

.wfb-ai-chat-msg-bubble {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.wfb-ai-chat-msg--agent .wfb-ai-chat-msg-bubble {
    background: #f0f0f0;
    color: #333;
    border-top-left-radius: 4px;
}

.wfb-ai-chat-msg--user .wfb-ai-chat-msg-bubble {
    background: #2c5282;
    color: #fff;
    border-top-right-radius: 4px;
}


/* ----- Typing indicator ----- */

.wfb-ai-chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}

.wfb-ai-chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #888;
    animation: wfb-ai-chat-typing 1.2s infinite ease-in-out both;
}

.wfb-ai-chat-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.wfb-ai-chat-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes wfb-ai-chat-typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}


/* ----- Input bar (full-width outer, clamped inner column)
   Borderless — the only border line in the chat surface is the header's
   bottom border. The visual separation between messages and input comes
   from the bubbles ending and the input pill standing out on its own. */

.wfb-ai-chat-input-bar {
    flex: 0 0 auto;
    padding: 4px 0 16px;
    background: #fff;
}

.wfb-ai-chat-input-bar-column {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wfb-ai-chat-input {
    flex: 1 1 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    background: #fff;
    color: #333;
    min-height: 42px;
    max-height: 160px;
    overflow-y: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.wfb-ai-chat-input:focus {
    outline: none;
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-chat-input::placeholder {
    color: #999;
}

.wfb-ai-chat-send {
    flex: 0 0 auto;
    height: 42px;
}

.wfb-ai-chat-send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(44, 82, 130, 0.18) !important;
}


/* ----- Icon button (used for the chat header hamburger toggle) ----- */

.wfb-ai-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wfb-ai-icon-btn:hover,
.wfb-ai-icon-btn:focus {
    background: #f0f0f0;
    color: #2c5282;
    outline: none;
}

.wfb-ai-icon-btn .fa {
    font-size: 16px;
}

/* =====================================================================
   Phase 6.5 — embedded AgenticView chrome stripping
   The chat surface mounts a d3VIEW.WorkFlow plugin running lib 915 (the
   workflow_builder_ai_agent host) in agentic view mode, which renders
   AgenticView. AgenticView has its own chrome we don't want in the
   chat-first UI: a 250px left agent-tabs panel, a conversation drawer,
   a per-agent header bar (back-to-canvas / events / info / clear), and
   right-side events + info columns. We hide all of that so only the
   FORA chat surface (.agent-fora) shows. AgenticView mounts FORA via
   `new d3VIEW.Plugins.Fora($tab.find('.agent-fora'), ...)` directly —
   that's the chat the user sees and chats with.
   ===================================================================== */

.wfb-ai-chat-agent-mount {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Inner container we own — stretches to fill the slot. The embedded
   d3VIEW.WorkFlow plugin renders into this. */
.wfb-ai-chat-agent-mount .wfb-ai-embedded-plugin {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Hide the canvas — we never want it visible in the chat-first UI. The
   embedded plugin still mounts ChartView etc. (some 265+ canvas-dependent
   handlers depend on it) so we hide it via display:none rather than not
   rendering it. */
.wfb-ai-chat-agent-mount .wf-canvas-container,
.wfb-ai-chat-agent-mount .canvas-container,
.wfb-ai-chat-agent-mount .wf-canvas-section,
.wfb-ai-chat-agent-mount .wf-birdseye-container,
.wfb-ai-chat-agent-mount .floating-exec-controls {
    display: none !important;
}

/* Agentic view occupies the whole slot. Strip top-level workflow chrome
   (top settings bar, tabs, save/export ribbon) since we have our own
   header above the slot. */
.wfb-ai-chat-agent-mount .top-settings-container,
.wfb-ai-chat-agent-mount .wf-top-bar,
.wfb-ai-chat-agent-mount .wf-tabs-list,
.wfb-ai-chat-agent-mount .left-nav-menu,
.wfb-ai-chat-agent-mount .nav-tabs.wf-dropdowns-list,
.wfb-ai-chat-agent-mount .wf-toolbar,
.wfb-ai-chat-agent-mount .wf-status-bar {
    display: none !important;
}

/* Make the agentic-view container fill the slot. */
.wfb-ai-chat-agent-mount .wf-agentic-view {
    height: 100% !important;
    width: 100% !important;
}

/* Hide AgenticView chrome inside the slot:
   - .agentic-left-panel       : 250px left agent-tabs panel (single agent → no tabs needed)
   - .wf-agentic-convo-drawer  : conversation drawer (we have our own sidebar)
   - .agent-header             : per-tab header (back-to-canvas / events / info / clear)
   - .wf-agentic-events-column : events column (defer to Phase 6.6 / 6.7)
   - .wf-agentic-info-column   : tools/outputs column (defer)
   - .wf-agentic-status-overlay: pre-agent worker setup overlay (rare for our agent)
*/
.wfb-ai-chat-agent-mount .agentic-left-panel,
.wfb-ai-chat-agent-mount .pl-nav-tabs.pl-nav-tabs-vertical,
.wfb-ai-chat-agent-mount .wf-agentic-convo-drawer,
.wfb-ai-chat-agent-mount .agent-header,
.wfb-ai-chat-agent-mount .wf-agentic-events-column,
.wfb-ai-chat-agent-mount .wf-agentic-info-column,
.wfb-ai-chat-agent-mount .wf-agentic-status-overlay {
    display: none !important;
}

/* Center tab content takes everything, with the .agent-fora chat surface
   filling the available space inside it. */
.wfb-ai-chat-agent-mount .tab-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.wfb-ai-chat-agent-mount .tab-pane.active,
.wfb-ai-chat-agent-mount [data-agent-tab].active {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.wfb-ai-chat-agent-mount [data-agent-tab].active > .pl-flex-v {
    height: 100% !important;
    flex: 1 1 0 !important;
}

.wfb-ai-chat-agent-mount .agent-fora {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* If the embedded plugin still spawns AIAgentChatView via Ctrl+Shift+W
   or some auto-open path, hide its floating window — we don't want
   either chrome stack appearing in our chat-first UI. */
.wfb-ai-chat-agent-mount .wf-ai-fora,
.wfb-ai-chat-agent-mount .wf-ai-agent-chat-wrapper {
    display: none !important;
}


/* ====================================================================
   Phase 6.6 — chat header right-side actions (Save + Canvas toggle)
   ==================================================================== */

.wfb-ai-chat-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Phase 13.b Stage 3 — right-anchor inside the grid's 1fr cell. */
    justify-self: end;
}

.wfb-ai-chat-save {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
                opacity 0.15s ease;
}

/* Phase 13.c Stage 3 — disabled Save (no unsaved changes). Greyed +
   non-clickable. is-saving / is-saved flashes outrank this state in
   _refreshSaveButtonState so they paint normally. */
.wfb-ai-chat-save.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Saving — light spinner-style; ghost button base state is enough */
.wfb-ai-chat-save.is-saving {
    pointer-events: none;
    opacity: 0.7;
}

.wfb-ai-chat-save.is-saving .fa {
    animation: wfb-ai-chat-save-spin 0.8s linear infinite;
}

@keyframes wfb-ai-chat-save-spin {
    100% { transform: rotate(360deg); }
}

/* Saved — brief success flash (green tint, ~3s) */
.wfb-ai-chat-save.is-saved {
    background: #e6f4ea;
    color: #1e7e34;
    border-color: #c3e6cb;
}

.wfb-ai-chat-save.is-saved .fa {
    color: #1e7e34;
}

/* Canvas toggle is-active state — brand-blue tint when canvas is open */
.wfb-ai-icon-btn.is-active {
    background: #e0ecf8;
    color: #2c5282;
    border-color: #c6d9ec;
}

.wfb-ai-icon-btn.is-active:hover,
.wfb-ai-icon-btn.is-active:focus {
    background: #d0e2f4;
    color: #2c5282;
}


/* ====================================================================
   Phase 6.6 — canvas slide-out pane (right side, 40% width)

   Layout: chat content gets a right padding equal to the canvas pane
   width when open, so the canvas pushes the chat (60/40 split) instead
   of overlaying it. Canvas pane is absolute-positioned to the right
   edge of the body so the slide animation is just a width 0 → 40%
   tween.

   The pane mounts a second d3VIEW.WorkFlow plugin (build view) lazily
   on first toggle. Both the agent's plugin and the canvas plugin
   share state.targetWfModel — agent mutations fire Backbone events
   on the shared wfModel and the canvas auto-renders.
   ==================================================================== */

.wfb-ai-chat-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    overflow: hidden;
    transition: width 0.22s ease;
    z-index: 50;
    background: #fff;
    border-left: 1px solid #e0e0e0;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.04);
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-canvas {
    width: 40%;
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-content {
    padding-right: 40%;
}

.wfb-ai-chat-content {
    transition: padding-right 0.22s ease, padding-left 0.22s ease;
}

.wfb-ai-chat-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wfb-ai-chat-canvas-mount {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
}

/* Canvas plugin chrome stripping — same idea as the agent-mount.
   The build view ships its own top-bar / save button / dropdowns;
   we hide them since the wfb-ai shell owns the chrome (Save in our
   header, no toolbar churn). */
.wfb-ai-chat-canvas-mount .top-settings-container,
.wfb-ai-chat-canvas-mount .wf-top-bar,
.wfb-ai-chat-canvas-mount .wf-tabs-list,
.wfb-ai-chat-canvas-mount .left-nav-menu,
.wfb-ai-chat-canvas-mount .nav-tabs.wf-dropdowns-list,
.wfb-ai-chat-canvas-mount .wf-toolbar,
.wfb-ai-chat-canvas-mount .wf-status-bar,
.wfb-ai-chat-canvas-mount .floating-exec-controls {
    display: none !important;
}

/* Stretch the canvas + birdseye to fill the pane. */
.wfb-ai-chat-canvas-mount .wf-canvas-container,
.wfb-ai-chat-canvas-mount .canvas-container,
.wfb-ai-chat-canvas-mount .wf-canvas-section {
    width: 100% !important;
    height: 100% !important;
}

.wfb-ai-chat-canvas-mount .wfb-ai-embedded-plugin {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* ====================================================================
   Phase 6.6 — chat loading overlay (covers the entire chat content
   while the canvas + agent plugins boot at chat entry). Blocks user
   interaction with the agent slot underneath until the agent is
   reachable, and shows progress through the discrete setup steps so
   users have feedback rather than a blank chat for ~2-3 seconds.
   ==================================================================== */

.wfb-ai-chat-content {
    position: relative;
}

.wfb-ai-chat-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Hidden state — overlay fades out and stops intercepting clicks once
   both the canvas and agent plugins are ready. */
.wfb-ai-chat-loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wfb-ai-chat-loading-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.wfb-ai-chat-loading-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.wfb-ai-chat-loading-title .fa-wand-magic-sparkles {
    color: #2c5282;
}

.wfb-ai-chat-loading-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.wfb-ai-chat-loading-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: #888;
    transition: color 0.15s ease;
}

.wfb-ai-chat-loading-step-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wfb-ai-chat-loading-step-icon .fa {
    font-size: 14px;
    color: #c6d9ec;
}

/* Active step — dark text, blue spin icon. */
.wfb-ai-chat-loading-step.is-active {
    color: #333;
}

.wfb-ai-chat-loading-step.is-active .fa-spin,
.wfb-ai-chat-loading-step.is-active .fa-refresh {
    color: #2c5282;
}

/* Done step — checkmark, green tint, label fades to muted-but-readable. */
.wfb-ai-chat-loading-step.is-done {
    color: #555;
}

.wfb-ai-chat-loading-step.is-done .fa {
    color: #1e7e34;
}

.wfb-ai-chat-loading-hint {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

/* While our chat-loading overlay is up, suppress every loading
   indicator the workflow plugin renders. Two sources:
     1. Plugins.Helpers.showLoadingMessage appends .d3view-loading-msg
        + .d3view-plugins-backdrop to body. (Already monkey-patched in
        JS; this is the CSS safety net.)
     2. workflow.main.js:24761 + workflow-common.tpl:2089 append a
        bootstrap spinner `.wf-init-loader-wrapper > .wf-init-loader`
        directly into the plugin's $el. There's no opt to disable it,
        so we hide via CSS. This is the "agent workflow spinner" Rahul
        reported overlapping the checklist during the agent-load phase.
   The body class is toggled by WorkflowBuilderAIView._enterChat (on)
   and _hideLoadingOverlay (off). Scope is intentionally global:
   during this short window no other modal should be opening, and
   the wfb-ai overlay is the user's only feedback channel. */
body.wfb-ai-loading-active .d3view-loading-msg,
body.wfb-ai-loading-active .d3view-plugins-backdrop,
body.wfb-ai-loading-active .wf-init-loader-wrapper,
body.wfb-ai-loading-active .wf-init-loader {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.a — Centered confirm modal with darkened backdrop.
   Backdrop covers the entire viewport; panel is centered inside.
   Closes on Cancel button, backdrop click, or Escape.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-confirm-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wfbAiConfirmFadeIn 0.15s ease-out;
}

@keyframes wfbAiConfirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.wfb-ai-confirm-panel {
    position: relative;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 20px 20px 18px;
    font-size: 14px;
    color: #333;
    animation: wfbAiConfirmPop 0.15s ease-out;
}

@keyframes wfbAiConfirmPop {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

.wfb-ai-confirm-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.wfb-ai-confirm-message {
    color: #555;
    line-height: 1.5;
    margin-bottom: 16px;
}

.wfb-ai-confirm-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wfb-ai-confirm-btn {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wfb-ai-confirm-btn--cancel {
    background: #eef0f2;
    color: #444;
    border-color: #d6dbe0;
}

.wfb-ai-confirm-btn--cancel:hover:not(:disabled) {
    background: #e2e6ea;
}

.wfb-ai-confirm-btn--conv {
    background: #f59e0b;
    color: #fff;
    border-color: #d97706;
}

.wfb-ai-confirm-btn--conv:hover:not(:disabled) {
    background: #d97706;
}

.wfb-ai-confirm-btn--all {
    background: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}

.wfb-ai-confirm-btn--all:hover:not(:disabled) {
    background: #b91c1c;
}

/* Phase 13.a — rename modal input + Save button. Reuses the centered
   confirm modal shell (.wfb-ai-confirm-backdrop / .wfb-ai-confirm-panel
   / .wfb-ai-confirm-actions); only the input style + Save variant are
   new. Save is the standard primary blue (#2c5282 family). */

.wfb-ai-rename-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    font-size: 14px;
    color: #222;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-rename-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

.wfb-ai-confirm-btn--save {
    background: #2c5282;
    color: #fff;
    border-color: #234166;
}

.wfb-ai-confirm-btn--save:hover:not(:disabled) {
    background: #234166;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b — right-column panel + in-place view transitions.
   The panel is the swap surface: a card-like container whose
   inner .wfb-ai-right-view nodes slide in/out when the user
   moves between cards / picker views. position: relative so
   leaving views can be pulled out of flow with absolute.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-right-panel {
    position: relative;
    overflow: hidden;
    /* Phase 13.b bento — outlined box matching the left column's
       fixed height for symmetric two-compartment layout. Cards
       inside float on the white fill; the slide animations still
       work because each .wfb-ai-right-view is positioned within
       the panel's content box. */
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 12px;
    padding: 18px 18px 16px;
    height: calc(100vh - 200px);
    min-height: 480px;
}

.wfb-ai-right-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity   250ms ease;
}

/* Entering: stage off-axis + transparent, then settle. */
.wfb-ai-right-view--entering-right {
    transform: translateX(40px);
    opacity: 0;
}
.wfb-ai-right-view--entering-left {
    transform: translateX(-40px);
    opacity: 0;
}

/* Leaving: pull out of flow so it doesn't keep the panel tall,
   slide off the opposite axis, fade out. */
.wfb-ai-right-view--leaving-left {
    position: absolute;
    inset: 0;
    transform: translateX(-40px);
    opacity: 0;
    pointer-events: none;
}
.wfb-ai-right-view--leaving-right {
    position: absolute;
    inset: 0;
    transform: translateX(40px);
    opacity: 0;
    pointer-events: none;
}

/* Right-column header — shared between cards + picker views. */
.wfb-ai-right-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin: 0 0 12px;
}

.wfb-ai-right-header .fa {
    color: #2c5282;
    font-size: 14px;
}

.wfb-ai-right-back {
    width: 24px;
    height: 24px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-right-back:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
    color: #2c5282;
}

/* Right-column picker search — visually echoes the left-column
   search input but lives inside the panel. */
.wfb-ai-right-search {
    position: relative;
    margin-bottom: 10px;
}

.wfb-ai-right-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa3ad;
    font-size: 13px;
    pointer-events: none;
}

.wfb-ai-right-search .wfb-ai-picker-search-input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-right-search .wfb-ai-picker-search-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

/* Right-column scroll area — fills the remaining space inside
   the bento panel so the picker list scrolls within the bento
   regardless of panel height. */
.wfb-ai-right-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.wfb-ai-right-empty {
    text-align: center;
    padding: 32px 12px;
    color: #888;
    font-size: 13px;
}

.wfb-ai-right-empty .fa {
    font-size: 32px;
    color: #c6d9ec;
    margin-bottom: 10px;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b — launch trace overlay (centered modal-style panel
   on a dimmed backdrop). Used during the three new-conversation
   launches: saved pick / library pick / from scratch. Step 1
   ("Verifying existing conversations") may stall (yellow), in
   which case a drawer slides out below the panel.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-trace-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 16px;
    animation: wfbAiConfirmFadeIn 0.18s ease-out;
}

.wfb-ai-trace-panel {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 24px 28px 22px;
    text-align: center;
    z-index: 9999;
    animation: wfbAiConfirmPop 0.2s ease-out;
}

.wfb-ai-trace-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #2c5282;
    margin-bottom: 10px;
}

.wfb-ai-trace-message {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    line-height: 1.3;
    margin-bottom: 4px;
    transition: opacity 0.15s ease;
    min-height: 22px;
}
.wfb-ai-trace-message.is-updating { opacity: 0; }

.wfb-ai-trace-submessage {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 22px;
    min-height: 16px;
}

.wfb-ai-trace-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
}

.wfb-ai-trace-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wfb-ai-trace-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f2f5;
    border: 2px solid #d6dbe0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wfb-ai-trace-step-num {
    font-weight: 600;
    font-size: 11px;
}

.wfb-ai-trace-step.is-active .wfb-ai-trace-step-dot {
    background: #2c5282;
    border-color: #2c5282;
    color: #fff;
    animation: wfbAiTracePulse 1.2s ease-in-out infinite;
}

.wfb-ai-trace-step.is-completed .wfb-ai-trace-step-dot {
    background: #155724;
    border-color: #155724;
    color: #fff;
}

.wfb-ai-trace-step.is-stalled .wfb-ai-trace-step-dot {
    background: #f59e0b;
    border-color: #d97706;
    color: #fff;
    animation: wfbAiTraceStallPulse 1.4s ease-in-out infinite;
}

.wfb-ai-trace-step-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #888;
    transition: color 0.2s ease;
}

.wfb-ai-trace-step.is-active   .wfb-ai-trace-step-label,
.wfb-ai-trace-step.is-stalled  .wfb-ai-trace-step-label {
    color: #333;
    font-weight: 600;
}

.wfb-ai-trace-step.is-completed .wfb-ai-trace-step-label {
    color: #555;
}

.wfb-ai-trace-step.is-stalled .wfb-ai-trace-step-label {
    color: #b06b00;
}

.wfb-ai-trace-connector {
    flex: 0 0 24px;
    height: 2px;
    background: #d6dbe0;
    margin-top: 12px;
    transition: background 0.25s ease;
}

.wfb-ai-trace-connector.is-active {
    background: #155724;
}

@keyframes wfbAiTracePulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(44, 82, 130, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(44, 82, 130, 0);    }
}

@keyframes wfbAiTraceStallPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.5); }
    50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);   }
}

/* Drawer below the panel — slides out when the trace stalls on
   "verifying existing conversations" with prior convos found. */
.wfb-ai-trace-drawer {
    width: 480px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 18px 20px;
    z-index: 9999;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease,
                max-height 0.3s ease, padding 0.25s ease;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.wfb-ai-trace-drawer.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.wfb-ai-trace-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.wfb-ai-trace-drawer-sub {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.wfb-ai-trace-convo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.wfb-ai-trace-convo-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    background: #fff;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.wfb-ai-trace-convo-item:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-trace-convo-item.is-selected {
    background: #e0ecf8;
    border-color: #2c5282;
}

.wfb-ai-trace-convo-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wfb-ai-trace-convo-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.wfb-ai-trace-drawer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #eef0f3;
    padding-top: 12px;
}

.wfb-ai-trace-drawer-actions .wfb-ai-confirm-btn {
    width: auto;
    padding: 7px 14px;
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b refinement #3 — left-bento loading skeleton.
   White card shape matching real conversation items so the
   layout doesn't jump when data lands; reuses the shared
   .wfb-ai-skeleton-line shimmer infrastructure.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-conversation-list--skeleton {
    pointer-events: none;
}

.wfb-ai-conversation-item--skeleton {
    cursor: default;
    background: #fff;
}

.wfb-ai-conversation-item--skeleton:hover {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: none;
}

/* Inline empty state — when the bento renders with 0 conversations,
   we drop the dashed-border framing and let the bento itself supply
   the visual container. The empty state then centers vertically
   inside the bento's available height. */
.wfb-ai-empty-state.wfb-ai-empty-state--inline {
    border: none;
    background: transparent;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

/* Phase 13.b Section A — workflow rename input inside the trace drawer.
   Sits below the drawer header + above the action buttons. Mirrors the
   delete-confirm rename input styling so the two share visual language. */
.wfb-ai-trace-rename-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d6dbe0;
    border-radius: 6px;
    font-size: 14px;
    color: #222;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wfb-ai-trace-rename-input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
}

/* ──────────────────────────────────────────────────────────────
   Phase 13.b Stage 3 — chat header rename pencils.
   Layout:  [hamburger][back]  [conv-name + pencil]  [wf-name + pencil + #id][save][canvas]
   The conversation chip flexes to fill the center; the workflow
   chip sits inside the existing right-cluster (.wfb-ai-chat-
   header-actions) just before save/canvas, with a hairline
   separator on its right edge so it reads as part of the
   workflow group, not the action buttons.
   ────────────────────────────────────────────────────────────── */

.wfb-ai-chat-header-conversation {
    /* Sits in the centered grid cell. justify-self: center keeps the
       chip itself optically centered if it's narrower than the cell. */
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 480px;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.wfb-ai-chat-header-conversation:hover {
    background: #f7fafd;
}

.wfb-ai-chat-conversation-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}

/* Workflow chip — clickable hover region with hover-only pencil.
   Phase 13.b Stage 3: name + id are flush-adjacent at rest; the
   pencil literally inserts itself between them on chip hover by
   animating its width 0 → 22px (and matching margin to override
   the flex `gap` so the rest position has no extra spacing). */
.wfb-ai-chat-header-workflow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fafbfc;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    max-width: 50ch;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wfb-ai-chat-header-workflow:hover {
    background: #f7fafd;
    border-color: #c6d9ec;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-id {
    /* No left margin — sits flush against the name when pencil is
       collapsed. Pencil's negative margins absorb the surrounding
       flex gaps so the name+id read as adjacent at rest. */
    margin-left: 0;
}

/* Hover-only pencils. At rest: width 0 + negative margins to absorb
   the flex gap on each side, so the column collapses to nothing.
   On hover: width grows to 22px and margins return to 0, restoring
   the natural flex gap and revealing the icon. */
.wfb-ai-chat-rename-conv,
.wfb-ai-chat-rename-wf {
    width: 0;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #888;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 -6px;          /* cancels the parent's 6px gap on each side */
    transition: width 0.2s ease, margin 0.2s ease, opacity 0.15s ease,
                background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfb-ai-chat-header-conversation:hover .wfb-ai-chat-rename-conv,
.wfb-ai-chat-header-workflow:hover .wfb-ai-chat-rename-wf {
    width: 22px;
    margin: 0;
    opacity: 1;
}

.wfb-ai-chat-rename-conv:hover,
.wfb-ai-chat-rename-wf:hover {
    background: #fff;
    border-color: #c6d9ec;
    color: #2c5282;
}

/* Phase 13.b Stage 3 — workflow chip + save are wrapped in a slide-
   out container. Hidden by default; revealed only when the canvas
   pane is open (.wfb-ai-shell--canvas-open class on the chat shell).
   max-width animation + opacity gives a "slide out from the canvas
   button" effect since the wrapper sits to the LEFT of the canvas
   toggle in a right-anchored flex layout — as the wrapper expands,
   its left edge moves leftward while its right edge stays adjacent
   to the canvas button. */
.wfb-ai-chat-canvas-extras {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-width 0.3s ease, opacity 0.2s ease 0.05s,
                margin-right 0.3s ease;
}

.wfb-ai-shell--canvas-open .wfb-ai-chat-canvas-extras {
    max-width: 800px;
    margin-right: 6px;
    opacity: 1;
    pointer-events: auto;
}

.wfb-ai-chat-header-workflow .fa-sitemap {
    color: #2c5282;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32ch;
}

.wfb-ai-chat-header-workflow .wfb-ai-chat-workflow-id {
    color: #999;
    font-weight: 400;
    font-size: 12px;
    margin-left: 2px;
    flex-shrink: 0;
}

/* Pencil buttons — small, ghost style, matching the existing icon-btn
   feel but slightly toned-down so they don't compete with the actual
   action buttons (save, canvas toggle). */
.wfb-ai-chat-rename-conv,
.wfb-ai-chat-rename-wf {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #888;
    font-size: 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.wfb-ai-chat-rename-conv:hover,
.wfb-ai-chat-rename-wf:hover {
    background: #fff;
    border-color: #c6d9ec;
    color: #2c5282;
}

/*
 * CSS for: worker alias labels ("previously known as")
 * Added by shashank2104 on 08/31/2026 - R0-4130
 *
 * A worker definition can carry an `alias` array listing every id the worker
 * was previously known by. The labels render on the worker-library card
 * (beside the discipline chips), in the Worker Info modal, and as the
 * "Previously" row in the worker configuration Options > Attributes group.
 *
 * Outline-only by design: no fill, so the label reads as a quiet historical
 * marker sitting on the panel rather than a live status tag competing with
 * the field values around it. Monospace because the content is an id, not
 * prose. Every surface already labels the list ("Previously" row label, the
 * card lead, the modal heading), so the label carries no icon of its own -
 * repeating a glyph per label is pure noise.
 *
 * .wf-worker-aliases / .wf-worker-alias-chip are written to be reusable for
 * any Options > Attributes row that moves off a readonly .form-control onto
 * this treatment - nothing in here is specific to the alias data.
 */

.wf-worker-aliases {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Options > Attributes row: keeps the row the same height as the 34px
   .form-control rows around it, so labels sit on the value baseline
   whether or not the neighbouring rows have moved off inputs yet. */
.wf-worker-aliases-row {
    min-height: 34px;
    padding: 4px 0;
}

.wf-worker-alias-chip {
    display: inline-block;
    max-width: 100%;
    padding: 3px 10px;
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: var(--d3v-text-secondary, #5a6470);
    background: transparent;
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-pill, 999px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--d3v-t-fast, all 120ms ease);
    cursor: default;
}

/* Hover stays neutral - the border and text firm up, nothing fills in. */
.wf-worker-alias-chip:hover {
    color: var(--d3v-text-primary, #2f3640);
    border-color: var(--d3v-border-default, #c8cfd7);
    background: transparent;
}

/* Worker-library card: its own row in the bootstrap column, with a small
   uppercase lead because the card has no field label to rely on. */
.wf-workers-container .worker-aliases {
    margin-top: 6px;
    padding: 0 15px;
}

.wf-worker-alias-lead {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #8a9099);
}

/* Match the discipline chips: the card is tight in tree mode, so the
   alias row stands down there too. */
.wf-workers-container .workers-list[data-mode="tree"] .worker-aliases {
    display: none;
}

/*
 * CSS for: worker discipline chips + Discipline(s) filter row
 * Added by shashank2104 on 05/05/2026 - DVFIV-2029
 *
 * Chips show in flat mode (where discipline isn't otherwise visible on
 * the card) and hide in tree mode (tree position already conveys the
 * discipline — chips would be doubly redundant). Filter-row rules drive
 * the Discipline(s) multiselect inside the Settings & Filters dropdown
 * regardless of mode.
 */

/* ============================================================
   1. Discipline chips (flat-mode worker list card only)
   ============================================================ */

.wf-workers-container .worker-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding: 0 15px;
}

.wf-workers-container .wf-discipline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #555);
    background: var(--d3v-bg-secondary, #f4f6f8);
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-pill, 999px);
    transition: var(--d3v-t-fast, all 120ms ease);
    cursor: default;
    max-width: 100%;
}

.wf-workers-container .wf-discipline-chip:hover {
    color: var(--d3v-accent-primary, #2266cc);
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #2266cc);
}

.wf-workers-container .wf-discipline-chip > i.fa {
    font-size: 9px;
    opacity: 0.7;
}

.wf-workers-container .wf-discipline-chip-label {
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide chips when the picker is rendering as a discipline tree —
   the bucket already shows the discipline. */
.wf-workers-container .workers-list[data-mode="tree"] .worker-disciplines {
    display: none;
}

/* ============================================================
   2. Discipline(s) filter row (Settings & Filters dropdown)
   ============================================================ */

.wf-workers-container .wf-search-worker .filters-list .wf-disciplines-filter-row .multiselect-container {
    max-height: 240px;
    overflow-y: auto;
}

.wf-workers-container .wf-search-worker .filters-list .wf-disciplines-filter-row .multiselect-container > li > a > label {
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
}

/* Added by shashank2104 on 04/24/2026 - DW-2878 - Worker example preview modal styles */

.modal.wf-example-preview-modal .modal-body {
    padding: 0;
    min-height: 420px;
    background: var(--d3v-bg-secondary, #f6f7f9);
}

.modal.wf-example-preview-modal .wf-example-preview-loading {
    color: var(--d3v-text-muted, #888);
}

/* Palette example button — click opens preview, the right-side handle drags to canvas */
.wf-workers-container .worker-panel-options .worker-example-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: var(--d3v-border-subtle, #e2e5ea);
    transition: background var(--d3v-t-fast, 120ms) ease, border-color var(--d3v-t-fast, 120ms) ease;
    padding: 7px 12px!important;
}

.worker-panel-options .worker-example-btn:hover {
    background: var(--d3v-bg-secondary, #f1f2f5);
    border-color: var(--d3v-border-strong, #c6ccd5);
}

.worker-panel-options .worker-example-btn .fa-question-circle {
    color: var(--d3v-accent-info, #3b82c4);
}

.worker-example-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    margin-left: 4px;
    border-left: 1px solid var(--d3v-border-subtle, #e2e5ea);
    color: var(--d3v-text-muted, #888);
    cursor: grab;
    transition: color var(--d3v-t-fast, 120ms) ease, background var(--d3v-t-fast, 120ms) ease;
}

.worker-example-drag-handle:hover {
    color: var(--d3v-accent-info, #3b82c4);
    background: var(--d3v-bg-tertiary, #eef0f3);
}

.worker-example-drag-handle:active {
    cursor: grabbing;
}

/* Drag helper variant for examples */
.drag-helper.worker.example {
    border-style: dashed;
    opacity: 0.9;
}

/*
 * CSS: Workers Picker — Group-by-Discipline tree view
 * Added by shashank2104 on 05/07/2026 - DVFIV-2029
 *
 * Scoped under .wf-workers-container; uses --d3v-* tokens; per-row accent
 * passed via --wf-disc-accent so the colored stripe + caret hover match
 * each top-level discipline.
 */

/* ============================================================
   1. Toggle button (next to search)
   ============================================================ */
.wf-workers-container .wf-search-worker .toggle-discipline-tree {
    cursor: pointer;
    transition: var(--d3v-t-fast, all 120ms ease);
}

.wf-workers-container .wf-search-worker .toggle-discipline-tree.is-active {
    background: var(--d3v-accent-primary, #2266cc)!important;
    color: #fff!important;
    border-color: var(--d3v-accent-primary, #2266cc)!important;
    text-shadow: none;
}

.wf-workers-container .wf-search-worker .toggle-discipline-tree.is-active:hover {
    background: var(--d3v-accent-primary-hover, #1d59b3)!important;
}

/* ============================================================
   2. Tree container (replaces flat list)
   ============================================================ */
.wf-workers-container .workers-list[data-mode="tree"] {
    padding: 4px 0;
}

.wf-workers-container .workers-list[data-mode="tree"] > .worker-panel {
    display: none !important;          /* tree mode hides flat panels */
}

/* ============================================================
   3. Bucket row (caret + stripe + label + count)
   ============================================================ */
.wf-workers-container .wf-disc-bucket {
    margin: 0;
}

.wf-workers-container .wf-disc-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding-right: 12px;
    color: var(--d3v-text-primary, #1f2937);
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #f1f5f9);
    cursor: pointer;
    transition: var(--d3v-t-fast, all 120ms ease);
    user-select: none;
}

.wf-workers-container .wf-disc-row:hover {
    background: var(--d3v-bg-secondary, #f8fafc);
}

.wf-workers-container .wf-disc-row.is-active,
.wf-workers-container .wf-disc-row.is-open {
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 500;
}

/* Color stripe on the left */
.wf-workers-container .wf-disc-row .wf-disc-stripe {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--wf-disc-accent, #cbd5e1);
}

/* Caret */
.wf-workers-container .wf-disc-row .wf-disc-caret {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    color: var(--d3v-text-secondary, #64748b);
    transition: transform 150ms ease;
    font-size: 10px;
}

.wf-workers-container .wf-disc-row.is-leaf .wf-disc-caret {
    visibility: hidden;
}

.wf-workers-container .wf-disc-row.is-open .wf-disc-caret {
    transform: rotate(90deg);
}

/* Label */
.wf-workers-container .wf-disc-row .wf-disc-label {
    flex: 1 1 auto;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Count badge */
.wf-workers-container .wf-disc-row .wf-disc-count {
    flex: 0 0 auto;
}

.wf-workers-container .wf-disc-row .wf-disc-count .badge {
    background: transparent;
    color: var(--d3v-text-secondary, #64748b);
    font-weight: 500;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-pill, 999px);
    transition: var(--d3v-t-fast, all 120ms ease);
}

.wf-workers-container .wf-disc-row:hover .wf-disc-count .badge,
.wf-workers-container .wf-disc-row.is-open .wf-disc-count .badge {
    color: var(--wf-disc-accent, #2266cc);
    border-color: var(--wf-disc-accent, #2266cc);
}

/* ============================================================
   4. Children container (collapsed/expanded)
   ============================================================ */
.wf-workers-container .wf-disc-children {
    display: none;
    padding-bottom: 4px;
}

.wf-workers-container .wf-disc-bucket > .wf-disc-row.is-open + .wf-disc-children {
    display: block;
}

/* Workers slot inside an expanded leaf — bounded scroll so a fat bucket
   (e.g. Deck Authoring with 346 workers) doesn't push the tree skeleton
   off-screen. min() keeps small buckets compact and large ones bounded
   to roughly 8 rows / 70vh, whichever is smaller. */
.wf-workers-container .wf-disc-workers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    padding-right: 12px;
    max-height: min(320px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wf-workers-container .wf-disc-workers > .worker-panel {
    width: 100%;
    margin: 0;
}

/* ============================================================
   5. Show-all link (Unclassified guard rail)
   ============================================================ */
.wf-workers-container .wf-disc-show-all {
    padding: 6px 12px 6px 0;
    font-size: 11px;
    color: var(--d3v-text-secondary, #64748b);
}

.wf-workers-container .wf-disc-show-all-link {
    color: var(--d3v-accent-primary, #2266cc);
    cursor: pointer;
}

/* ============================================================
   6. Local in-bucket search input
   ============================================================ */
.wf-workers-container .wf-disc-local-search-row {
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
}

.wf-workers-container .wf-disc-local-search {
    height: 28px;
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-primary, #1f2937);
    transition: var(--d3v-t-fast, all 120ms ease);
    width: 100%;
}

.wf-workers-container .wf-disc-local-search:focus {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #2266cc);
    outline: none;
    box-shadow: 0 0 0 2px var(--d3v-accent-primary-faint, rgba(34, 102, 204, 0.15));
}

/* Hide non-matching panels under an active local search */
.wf-workers-container .worker-panel.wf-disc-local-hidden {
    display: none !important;
}

/* Empty-state message when local search yields zero matches inside a bucket */
.wf-workers-container .wf-disc-local-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    margin: 4px 0;
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-subtle, #e1e4e8);
    border-radius: var(--d3v-r-sm, 4px);
}

.wf-workers-container .wf-disc-local-empty > i.fa {
    color: var(--d3v-accent-primary, #2266cc);
    font-size: 11px;
    opacity: 0.7;
}

/* Highlight the row's count badge in accent while a local search is active */
.wf-workers-container .wf-disc-row.wf-disc-local-active .wf-disc-count .badge {
    color: var(--wf-disc-accent, #2266cc);
    border-color: var(--wf-disc-accent, #2266cc);
    font-weight: 600;
}

/*
 * Special CSS rules not matched to specific templates
 * Category: common/modals
 * Auto-generated by modularize_css.py
 */

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}

div.wf-workers-multi-edit-modal .generic-input-template {
padding: 0;
}

body.wf-modal-open {
overflow: hidden !important;
}

div.modalContainer.excelresponseparser input {
font-size: 0.9em !important;
}

div.modalContainer.excelresponseparser .waitingForInteraction {
color: #FFF !important;
}


/** Added by shashank2104 on 2026-06-25 - Workflow -> when an Assembly / System Model / Load Case record
    is opened inside the workflow data-type modal (DataTypeView applies customClass 'wf-data-type-modal'),
    the embed is view-only. Hide the ModelAssembler creation / open-in-new-tab action buttons so users
    cannot create simulations, DOEs, system models, etc. from within the workflow context. **/
div.wf-data-type-modal .d3view-modelassembler-create-simulation-btn,
div.wf-data-type-modal .d3view-modelassembler-run-doe-btn,
div.wf-data-type-modal .d3view-modelassembler-lcd-header-right,
div.wf-data-type-modal .d3view-modelassembler-assembly-content-open-new-tab-btn,
div.wf-data-type-modal .d3view-modelassembler-create-systemmodel-btn {
    display: none !important;
}

/*
 * Special CSS rules not matched to specific templates
 * Category: execution
 * Auto-generated by modularize_css.py
 */

.select2-dropdown.workflow-select2 {
z-index: 1054;
}

.select2-dropdown.workflow-select2 {
z-index: 1054;
}

.select2-dropdown.workflow-select2 {
z-index: 1054;
}


/*
 * DVFIV-1933 - Step 1: reusable step title container (Mode Basic/Advanced + Go Back)
 */

 
.wf-predict-step-title-container {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.wf-predict-step-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-predict-step-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-predict-step-mode-btn.btn-primary.active,
.wf-predict-step-mode-btn.btn-success.active {
    font-weight: 500;
}

/*
 * DW-2716 - Step 1: selection count + View selected on same line; hide collection's own summary
 */
.wf-predict-flow-modal .wf-collection-selection-summary {
    display: none !important;
}

.wf-predict-step1-selection-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.wf-predict-step1-selection-row .wf-predict-selection-count {
    font-size: 13px;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - prominent info icon with tooltip on step 1 */
.wf-predict-step1-info-icon {
    margin-left: 6px;
    cursor: help;
    font-size: 1.1em;
}

/** Added by shashank2104 on 02/26/2026 - DW_2733 - AI compatibility check loader overlay (one call for all workflows) */
.wf-predict-ai-compat-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

.wf-predict-ai-compat-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 14px;
}

.wf-predict-ai-compat-loader-content .fa-spinner {
    font-size: 28px;
    color: #5a9bd5;
}

/*
 * CSS for Predict from Historical - Review inputs step resizable settings sidebar
 * Added by shashank2104 on 02/19/2026 - DW-2716
 */
.wf-predict-review-inputs-wrap {
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.wf-predict-review-inputs-sidebar {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 450px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 12px;
}

.wf-predict-review-inputs-sidebar.hidden,
.wf-predict-review-inputs-resize-handle.hidden {
    display: none !important;
}

.wf-predict-review-inputs-sidebar-inner .help-block {
    font-size: 11px;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - sidebar nav-tabs and Selected Inputs multiselect pane full height **/
.wf-predict-review-inputs-sidebar-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-nav-tabs {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content > .tab-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-tab-content > .tab-pane.active {
    display: flex;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane {
    min-height: 0;
}

.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane .d3view-multiselect,
.wf-predict-review-inputs-sidebar .wf-predict-review-inputs-ms-pane .multiselect-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/** Added by shashank2104 on 02/21/2026 - DW-2716 - nested Selected Inputs tree and floating bar **/
/** Updated - floating bar wrap absolute top; filter above tree; clean spacing **/
.wf-predict-review-inputs-tree-pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wf-predict-review-inputs-tree-pane.has-floating-bar {
    padding-top: 46px;
}

.wf-predict-review-inputs-floating-bar-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    min-height: 0;
}

.wf-predict-review-inputs-floating-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.wf-predict-review-inputs-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.wf-predict-review-inputs-filter-row .control-label {
    margin: 0;
    font-weight: normal;
    font-size: 12px;
    color: #555;
}

.wf-predict-review-inputs-filter-row .wf-predict-review-inputs-filter-type {
    flex: 1;
    min-width: 0;
    max-width: 180px;
}

.wf-predict-review-inputs-nested-body {
    overflow-y: auto;
    padding: 12px 0;
    flex: 1;
    min-height: 0;
}

.wf-predict-review-inputs-tree {
    position: relative;
    padding-top: 4px;
}

.wf-predict-review-inputs-sidebar {
    padding: 0 12px;
}

.wf-predict-review-inputs-group {
    margin-bottom: 18px;
}

.wf-predict-review-inputs-group-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 600;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 6px;
}

.wf-predict-review-inputs-section-header {
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 2px solid #007bff;
    background: #f8f9fa;
}

.wf-predict-review-inputs-subgroup-section {
    border-bottom-color: #28a745;
}

.wf-predict-review-inputs-group-toggle,
.wf-predict-review-inputs-subgroup-toggle {
    cursor: pointer;
    color: #666;
    width: 16px;
    text-align: center;
}

.wf-predict-review-inputs-group-toggle:hover,
.wf-predict-review-inputs-subgroup-toggle:hover {
    color: #333;
}

.wf-predict-review-inputs-group-flat .wf-predict-review-inputs-group-header {
    background: #f8f9fa;
}

.wf-predict-review-inputs-group-flat .wf-predict-review-inputs-section-header {
    border-bottom-color: #6c757d;
}

.wf-predict-review-inputs-group-icon,
.wf-predict-review-inputs-subgroup-icon {
    color: #007bff;
}

.wf-predict-review-inputs-subgroup-icon {
    color: #9ca3af;
}

.wf-predict-review-inputs-subgroup {
    margin-left: 12px;
    margin-bottom: 14px;
}

.wf-predict-review-inputs-subgroup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #333;
    margin-bottom: 0;
}

.wf-predict-review-inputs-input-list {
    margin-left: 0;
}

.wf-predict-review-inputs-table {
    margin-bottom: 0;
    font-size: 13px;
}

.wf-predict-review-inputs-table thead th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 12px;
}

.wf-predict-review-inputs-table tbody tr.wf-predict-review-inputs-input-row {
    cursor: pointer;
}

.wf-predict-review-inputs-input-row .wf-predict-review-inputs-input-label {
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

.wf-predict-review-inputs-input-icon {
    color: #666;
    flex-shrink: 0;
}

.wf-predict-review-inputs-input-name {
    flex: 1;
    min-width: 0;
}

.wf-predict-review-inputs-input-row .wf-id-label.input {
    font-size: 11px;
    color: #777;
    line-height: 1.3;
    word-break: break-all;
}
.wf-predict-review-inputs-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
}
.wf-predict-review-inputs-resize-handle:hover {
    background: rgba(0, 0, 0, 0.06);
}

.wf-predict-review-inputs-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wf-predict-review-inputs-dt-container {
    padding-right: 12px;
}

/*
 * CSS for Predict from Historical - Review training dataset step
 * Added by shashank2104 on 02/20/2026 - DW-2716
 * Added by shashank2104 on 02/25/2026 at 05:58 PM - Option A: summary bar (sidebar removed)
 */
.wf-predict-training-dataset-summary-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    margin: -16px -16px 12px -16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    color: #555;
}
.wf-predict-training-dataset-summary-sep {
    color: #bbb;
    margin: 0 2px;
}
.wf-predict-training-dataset-summary-actions {
    margin-left: auto;
}
.wf-predict-training-dataset-summary-actions .btn {
    font-size: 12px;
}

.wf-predict-training-dataset-summary-wfs,
.wf-predict-training-dataset-summary-inputs,
.wf-predict-training-dataset-summary-outputs {
    cursor: default;
}
.wf-predict-summary-tooltip-trigger {
    margin-right: 4px;
}
.wf-predict-training-dataset-raw-label {
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
.wf-predict-training-dataset-raw-label .pl-checkbox {
    margin-right: 4px;
}

.wf-predict-training-dataset-wrap {
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.wf-predict-training-dataset-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/*
 * Option B: Add output to predict - prominent card panel (modern rich UI/UX)
 * Full-height strip with card: soft gradient, shadow, clear CTA
 */
.wf-predict-add-output-card {
    flex-shrink: 0;
    width: 200px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 1px solid #e2e8f0;
    box-sizing: border-box;
}

.wf-predict-add-output-card-inner {
    width: 100%;
    padding: 20px 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8ecf1;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.wf-predict-add-output-card-inner:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    border-color: #d0d7de;
}

.wf-predict-add-output-card-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
}

.wf-predict-add-output-card-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.wf-predict-add-output-card-desc {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    max-width: 100%;
}

.wf-predict-add-output-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wf-predict-add-output-card-btn:hover {
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

.wf-predict-add-output-card-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
}

.wf-predict-training-dataset-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
}
.wf-predict-training-dataset-resize-handle:hover {
    background: rgba(0, 0, 0, 0.06);
}

.wf-predict-training-dataset-sidebar {
    flex-shrink: 0;
    min-width: 160px;
    max-width: 450px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    background: #fafafa;
    padding: 10px 12px;
}

.wf-predict-training-dataset-sidebar-inner .help-block {
    font-size: 11px;
}

/*
 * CSS for Predict from Historical dataset table - sticky Outputs column on the right
 * DW-2716
 */
.wf-predict-dataset-wrap.table-responsive {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}

.wf-predict-dataset-table th.wf-predict-outputs-col-sticky,
.wf-predict-dataset-table td.wf-predict-outputs-col-sticky {
    position: sticky;
    right: 0;
    z-index: 1;
    background: #fff;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.08);
}

.wf-predict-dataset-table thead th.wf-predict-outputs-col-sticky {
    background: #f5f5f5;
}

.wf-predict-dataset-table tbody td.wf-predict-outputs-col-sticky {
    min-width: 200px;
}

/** Highlight output row when selected from GlobalSearchView dropdown - DW-2716 **/
.wf-predict-output-item.wf-predict-output-item-highlight {
    background-color: rgba(33, 150, 243, 0.12);
    border-left: 3px solid #2196f3;
}

div.workflow .wf-predict-outputs-global-search-wrap .search-btns,
div.workflow .wf-predict-outputs-global-search-wrap .wf-search-type-dd {
    display: none;
}

/**
 * DW-2716 - Super modern steps 2-6: clean panels, one-line message, minimal chrome
 * Added by shashank2104 on 02/20/2026
 */
.wf-predict-step-modern {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wf-predict-step-modern .wf-predict-step-msg {
    font-size: 13px;
    line-height: 1.4;
    flex-shrink: 0;
}

.wf-predict-modern-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/** Added by shashank2104 on 02/25/2026 at 04:48 PM - modernized Basic mode prerun panel (Predict from Historical Run ML) **/
.wf-predict-ml-prerun-modern {
    margin-bottom: 16px;
}

.wf-predict-ml-prerun-modern .wf-predict-ml-prerun-card {
    flex: 0 0 auto;
    min-height: 0;
}

.wf-predict-ml-prerun-header {
    flex-shrink: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

.wf-predict-ml-prerun-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.wf-predict-ml-prerun-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6c757d;
}

.wf-predict-ml-prerun-form-section {
    padding: 16px 0 8px 0;
}

.wf-predict-ml-prerun-form-section .wf-predict-ml-basic-prerun-fb {
    margin-bottom: 0;
}

.wf-predict-ml-prerun-cta {
    padding-top: 20px;
    padding-bottom: 8px;
    text-align: center;
    border-top: 1px solid #eee;
}

.wf-predict-ml-run-cards-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
}

.wf-predict-ml-run-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wf-predict-ml-run-card:hover {
    border-color: #c0d8ee;
    box-shadow: 0 4px 12px rgba(51, 122, 183, 0.1);
}

.wf-predict-ml-run-card-selected {
    border-color: #337ab7;
    background-color: #f8fbff;
    box-shadow: 0 4px 14px rgba(51, 122, 183, 0.18);
}

.wf-predict-ml-run-card-selected:hover {
    border-color: #286090;
    box-shadow: 0 4px 14px rgba(51, 122, 183, 0.22);
}

.wf-predict-ml-run-card-icon-wrap {
    margin-bottom: 12px;
}

.wf-predict-ml-run-card-icon {
    font-size: 22px;
    color: #5a9bd5;
}

.wf-predict-ml-run-card-selected .wf-predict-ml-run-card-icon {
    color: #337ab7;
}

.wf-predict-ml-run-card-title {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.wf-predict-ml-run-card-desc {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    color: #5a6c7d;
}

.wf-predict-ml-run-card-desc strong {
    color: #333;
}

.wf-predict-ml-run-action-row {
    margin-bottom: 20px;
}

.wf-predict-ml-run-action-row .wf-predict-run-ml-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(51, 122, 183, 0.3);
}

.wf-predict-ml-run-action-row .wf-predict-run-ml-btn:hover {
    box-shadow: 0 3px 10px rgba(51, 122, 183, 0.4);
}

.wf-predict-dt-min-h {
    min-height: 260px;
}

.wf-predict-sidebar-settings .wf-predict-sidebar-title {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.wf-predict-choose-outputs-card {
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.wf-predict-choose-outputs-with-sidebar .wf-predict-choose-outputs-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}
.wf-predict-choose-outputs-sidebar {
    width: 180px;
    flex-shrink: 0;
    border-right: 1px solid #e8e8e8;
    padding-right: 12px;
    margin-right: 12px;
}
.wf-predict-choose-outputs-sidebar .wf-predict-sidebar-title {
    font-size: 13px;
    font-weight: 600;
}

.wf-predict-review-inputs-toolbar {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.wf-predict-review-inputs-view-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-predict-review-inputs-view-toggle .wf-predict-view-toggle-label {
    font-size: 13px;
    color: #666;
}

.wf-predict-outputs-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.wf-predict-outputs-search-row .wf-predict-outputs-global-search-wrap {
    flex: 1;
    min-width: 200px;
}

.wf-predict-outputs-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.wf-predict-outputs-table-wrap {
    min-height: 280px;
    max-height: 420px;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 6px;
}

.wf-predict-outputs-table {
    margin-bottom: 0;
}

.wf-predict-outputs-table .wf-predict-outputs-col-select {
    width: 70px;
    text-align: center;
}

.wf-predict-outputs-list-modern {
    flex: 1;
    min-height: 280px;
    max-height: 420px;
    overflow-y: auto;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 6px;
}

.wf-predict-outputs-list-modern .list-group-item {
    border-left: 0;
    border-right: 0;
}

.wf-predict-ml-actions {
    margin-top: 12px;
    flex-shrink: 0;
}

.wf-predict-progress-modern {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 6px;
    flex-shrink: 0;
}

.wf-predict-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.wf-predict-progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.wf-predict-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: #0d6efd;
    border-radius: 4px;
    transition: width 0.25s ease;
}

.wf-predict-progress-percent {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    min-width: 36px;
}

.wf-predict-result-wrap {
    margin-top: 16px;
    min-height: 200px;
}

.wf-predict-ml-result-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.wf-predict-ml-simple-summary.card {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wf-predict-ml-simple-summary .dl-horizontal dt {
    width: 120px;
    text-align: left;
}

.wf-predict-ml-simple-summary .dl-horizontal dd {
    margin-left: 130px;
}

.wf-predict-ml-toolbar {
    flex-shrink: 0;
}

.wf-predict-training-dataset-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.wf-predict-training-dataset-toolbar .wf-predict-view-toggle-label {
    font-size: 13px;
    color: #666;
}

.wf-predict-results-card {
    display: block;
}

.wf-predict-results-block {
    margin-bottom: 16px;
}

/** DW-2733 - Rich Results step: summary card, dataset card, actions row */
.wf-predict-results-rich {
    gap: 16px;
    padding: 0 2px;
}

.wf-predict-results-summary-card {
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: linear-gradient(135deg, #fafbff 0%, #f5f7ff 100%);
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wf-predict-results-summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e4ee;
}

.wf-predict-results-summary-icon {
    font-size: 20px;
    color: #5b6ee8;
}

.wf-predict-results-summary-title {
    font-weight: 600;
    font-size: 15px;
    color: #2c3e50;
}

.wf-predict-results-summary-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-predict-results-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.wf-predict-results-summary-label {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    min-width: 140px;
}

.wf-predict-results-summary-inputs,
.wf-predict-results-summary-targets {
    font-size: 13px;
    word-break: break-word;
}

.wf-predict-results-dataset-card {
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 200px;
}

.wf-predict-results-dataset-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #eee;
    background: #fafbfc;
    border-radius: 10px 10px 0 0;
}

.wf-predict-results-dataset-icon {
    font-size: 18px;
    color: #28a745;
}

.wf-predict-results-dataset-title {
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
}

.wf-predict-results-dataset-body {
    padding: 12px 16px;
}

.wf-predict-results-dataset-wrap {
    min-height: 120px;
}

.wf-predict-results-dataset-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
}

/** Added by shashank2104 on 02/26/2026 - DW-2733 - Saved ML Model card: same rich UX as Summary/Predicted dataset */
.wf-predict-results-ml-model-card-wrap .wf-predict-results-ml-model-icon {
    color: #6f42c1;
}

.wf-predict-results-ml-model-card-wrap .wf-predict-results-ml-model-link {
    font-size: 13px;
}

.wf-predict-results-actions-row {
    flex-shrink: 0;
    align-items: flex-start;
}

.wf-predict-ml-model-panel .wf-predict-ml-model-header,
.wf-predict-ml-model-saved .wf-predict-ml-model-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.wf-predict-ml-model-icon {
    font-size: 18px;
    color: #6f42c1;
}

.wf-predict-ml-model-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.wf-predict-ml-model-body .form-group {
    margin-bottom: 12px;
}

.wf-predict-ml-model-body .form-group:last-of-type {
    margin-bottom: 16px;
}

.wf-predict-loading-card,
.wf-predict-empty-card {
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.wf-predict-loading-card .wf-step2-loading,
.wf-predict-empty-card .wf-predict-empty-text {
    color: #6c757d;
    font-size: 14px;
}

/** DW-2716 - View selected workflows modal: sidebar + main **/
.wf-predict-view-selected-modal {
    display: flex;
    flex-direction: row;
    min-height: 400px;
}
.wf-predict-view-selected-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #e8e8e8;
    overflow-y: auto;
    padding: 8px 0;
}
.wf-predict-view-selected-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
}
.wf-predict-view-selected-item:hover {
    background: #f5f5f5;
}
.wf-predict-view-selected-item.active {
    background: #e8f4fd;
    border-left-color: #2196f3;
}
.wf-predict-view-selected-main {
    min-width: 0;
    padding: 0;
}

.wf-predict-step1-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.wf-predict-prefix-setting {
    font-weight: normal;
    font-size: 13px;
}

/** DW-2716 - Choose outputs step (Option 2): split-pane + FilterView 60px + selectable */
.wf-predict-step-modern {
    width: 100%;
}
.wf-predict-choose-outputs-step-view.wf-predict-choose-outputs-step-view-render {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
}
.wf-predict-choose-outputs-step-view .wf-predict-step-msg {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 10px;
}
.wf-predict-choose-outputs-card {
    padding: 15px 18px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/** Filter row: fixed 60px height, same pattern as WfCollectionView ext-filters (see wf-collection-body-tpl.css) */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-filter-row {
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 8px;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters {
    flex: 0 0 25%;
    min-width: 180px;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters-container {
    flex: 1 1 auto;
}
/** Same CSS for filters container as wf-collection-body-tpl.css - mini view: Filter button + badge */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filter-button .clear-search {
    display: none;
}

/** Split panes: two columns */
.wf-predict-choose-outputs-card .wf-predict-choose-outputs-split {
    display: flex;
    flex-direction: row;
    min-height: 0;
    gap: 15px;
    margin-top: 10px;
}
.wf-predict-choose-outputs-available-pane,
.wf-predict-choose-outputs-selected-pane {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    overflow: hidden;
    padding: 0;
}
.wf-predict-choose-outputs-available-header,
.wf-predict-choose-outputs-selected-header {
    flex-shrink: 0;
    padding: 10px 14px;
    background: #f0f0f0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wf-predict-choose-outputs-pane-title {
    font-weight: 600;
    font-size: 13px;
}
.wf-predict-choose-outputs-available-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
/** List container: count + list */
.wf-predict-choose-outputs-list-container {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 12px 12px 12px;
}
.wf-predict-choose-outputs-results-count {
    margin: 8px 0 6px 0;
    font-size: 12px;
}
.wf-predict-choose-outputs-available-list,
.wf-predict-choose-outputs-selected-list {
    flex: 1 1 auto;
    min-height: 200px;
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    padding: 0 4px;
}
.wf-predict-choose-outputs-selected-pane .wf-predict-choose-outputs-selected-list {
    padding: 10px 12px;
}
.wf-predict-choose-outputs-available-list .table {
    margin-bottom: 0;
}
.wf-predict-choose-outputs-available-row td,
.wf-predict-choose-outputs-row-cell {
    padding: 10px 14px;
    vertical-align: middle;
}
.wf-predict-choose-outputs-row-meta .wf-worker-type.wf-worker-type-sm {
    margin-left: 6px;
}
.wf-predict-choose-outputs-available-row {
    cursor: pointer;
}
.wf-predict-choose-outputs-available-row.ui-selected {
    background: #e3f2fd;
}
.wf-predict-choose-outputs-row-main {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
.wf-predict-choose-outputs-output-name {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 2px;
}
.wf-predict-choose-outputs-row-meta {
    font-size: 12px;
    margin-bottom: 2px;
}
.wf-predict-choose-outputs-type-icon {
    margin-right: 6px;
    font-size: 12px;
}
.wf-predict-choose-outputs-current-value {
    font-size: 11px;
}
.wf-predict-choose-outputs-value-error .fa-exclamation-triangle {
    margin-right: 4px;
}

/** Selected pane rows */
.wf-predict-choose-outputs-selected-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    gap: 8px;
}
.wf-predict-choose-outputs-selected-row:last-child {
    border-bottom: none;
}
.wf-predict-choose-outputs-remove-output {
    flex-shrink: 0;
    padding: 2px 6px;
}

.wf-predict-choose-outputs-card .wf-predict-choose-outputs-ext-filters .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container input[data-search-input] {
    height: 40px;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button .flex-l {
    display: none;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button span.clear-search:hover {
    color: red;
}
.wf-predict-choose-outputs-card .tv-ext-filters-container .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

/** Added by shashank2104 on 02/23/2026 - DW-2716 - Add output and Map output overlay cards: layout, buttons, container styling **/
.wf-predict-overlay-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.wf-predict-overlay-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wf-predict-add-output-overlay-card {
    width: 35vw;
    margin: 20px;
    padding: 0;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.wf-predict-add-output-overlay-card .panel-heading {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #e8e8e8;
    padding: 12px 16px;
}
.wf-predict-add-output-overlay-card .panel-body {
    padding: 16px;
}
.wf-predict-map-output-overlay.wf-predict-overlay-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.wf-predict-map-output-overlay .wf-predict-map-output-overlay-header {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 12px 16px;
}
.wf-predict-map-output-overlay .wf-predict-map-output-overlay-body {
    min-height: 400px;
}

/** DVFIV-1933 - Add output sidebar: modern right-side panel (no overlay on main container) **/
/** Added by shashank2104 on 02/25/2026 at 03:22 PM - DVFIV-1933 - Wrapper vs container positioning, 500px width, gradient header, section dividers, saved-rule hover **/
.wf-predict-add-output-sidebar-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}
.wf-predict-add-output-sidebar-wrapper.wf-predict-add-output-sidebar-visible {
    pointer-events: auto;
}
.wf-predict-add-output-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35vw;
    max-width: 90%;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.wf-predict-add-output-sidebar-container.wf-predict-add-output-sidebar-visible {
    transform: translateX(0);
    pointer-events: auto;
}
/** Added by shashank2104 on 02/26/2026 - DVFIV-1933 - When appended to body: 100vh viewport, fixed position, high z-index **/
.wf-predict-add-output-sidebar-container-in-body {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 35vw;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.wf-predict-add-output-sidebar-container-in-body.wf-predict-add-output-sidebar-visible {
    transform: translateX(0);
}
.wf-predict-add-output-sidebar-container-in-body .wf-predict-add-output-sidebar-overlay {
    position: fixed;
    inset: 0;
}
.wf-predict-add-output-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.wf-predict-add-output-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}
.wf-predict-add-output-sidebar-resize-handle:hover,
.wf-predict-add-output-sidebar-resize-handle.resizing {
    background: #337ab7;
}
.wf-predict-add-output-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}
.wf-predict-add-output-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.wf-predict-add-output-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.wf-predict-add-output-sidebar-title i {
    color: #337ab7;
}
.wf-predict-add-output-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wf-predict-add-output-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 15px;
    min-height: 0;
}
.wf-predict-add-output-sidebar-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
}
.wf-predict-add-output-sidebar-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.wf-predict-add-output-sidebar-section .control-label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}
/** Added by shashank2104 on 02/25/2026 - DVFIV-1933 - Parameterize section: distinct heading vs button, modern card + empty state **/
.wf-predict-add-output-parameterize-card {
    padding: 14px 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}
.wf-predict-add-output-parameterize-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.wf-predict-add-output-parameterize-header i {
    color: #6c757d;
    font-size: 14px;
}
.wf-predict-add-output-parameterize-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}
.wf-predict-add-output-parameterize-desc {
    margin: 0 0 12px 0;
    line-height: 1.4;
}
.wf-predict-add-output-parameterize-card .wf-predict-add-output-sidebar-parameterize-btn {
    margin-bottom: 12px;
}
.wf-predict-add-output-parameterize-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    color: #6c757d;
}
.wf-predict-add-output-parameterize-empty i {
    font-size: 18px;
    color: #adb5bd;
}
/** Added by shashank2104 on 02/27/2026 - Rich empty state card: headline + 2 bullets + CTA **/
.wf-predict-add-output-parameterize-empty-card {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.wf-predict-add-output-parameterize-empty-title {
    margin: 0 0 14px 0;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
    line-height: 1.3;
}
.wf-predict-add-output-parameterize-empty-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #495057;
}
.wf-predict-add-output-parameterize-empty-item {
    margin-bottom: 8px;
}
.wf-predict-add-output-parameterize-empty-item:last-child {
    margin-bottom: 0;
}
.wf-predict-add-output-parameterize-empty-cta {
    padding-top: 4px;
}
.wf-predict-add-output-parameterize-empty-cta .btn {
    margin-bottom: 0;
}
.wf-predict-add-output-sidebar-saved-rules > .btn {
    margin-bottom: 10px;
}
.wf-predict-add-output-sidebar-saved-rules {
    margin-top: 0;
}
.wf-predict-add-output-sidebar-saved-rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    background: #fff;
}
.wf-predict-add-output-sidebar-saved-rules-table thead {
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-saved-rules-table th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: #495057;
    border-bottom: 1px solid #e9ecef;
}
.wf-predict-add-output-sidebar-saved-rules-table th.wf-predict-saved-rules-actions {
    text-align: right;
}
.wf-predict-add-output-sidebar-saved-rules-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f3f5;
}
.wf-predict-add-output-sidebar-saved-rules-table tbody tr:hover {
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-saved-rules-table tbody tr:last-child td {
    border-bottom: none;
}
.wf-predict-add-output-sidebar-saved-rules-table .wf-predict-saved-rules-td-actions {
    text-align: right;
}
.wf-predict-saved-rules-cell-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-predict-add-output-sidebar-saved-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.wf-predict-add-output-sidebar-saved-rule:hover {
    background: #f0f2f5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.wf-predict-add-output-sidebar-saved-rule-label {
    font-weight: 500;
    color: #333;
}
.wf-predict-add-output-sidebar-saved-rule-summary {
    flex: 1;
    min-width: 0;
}
.wf-predict-add-output-sidebar-saved-rule-clear {
    flex-shrink: 0;
}
.wf-predict-add-output-sidebar-parameterize-btn .wf-predict-param-btn-icon {
    margin-right: 4px;
}

/** Modern LS-DYNA cell in Choose outputs table: badge + Parameterize button **/
.wf-predict-output-cell-lsdyna {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-predict-lsdyna-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(13, 110, 253, 0.25);
}
.wf-predict-output-cell-lsdyna .wf-predict-parameterize-lsdyna-btn {
    white-space: nowrap;
}
.wf-predict-output-cell-lsdyna .wf-predict-parameterize-lsdyna-btn .fa {
    margin-right: 4px;
}
.wf-predict-lsdyna-cell-summary {
    margin-right: 4px;
}
.wf-predict-output-cell-lsdyna .wf-predict-lsdyna-view-text-btn {
    margin-left: 4px;
}
.wf-predict-output-cell-lsdyna .wf-predict-lsdyna-view-text-btn .fa {
    margin-right: 3px;
}

.wf-predict-add-output-sidebar-output-type-indicator {
    font-size: 12px;
}

/** Added by shashank2104 on 02/25/2026 at 05:11 PM - DVFIV-1933 - Add output sidebar: Pick from canvas in header, Save/Cancel in modern footer **/
.wf-predict-add-output-sidebar-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
}
.wf-predict-add-output-sidebar-footer .wf-predict-add-output-sidebar-cancel {
    order: 1;
}
.wf-predict-add-output-sidebar-footer .wf-predict-add-output-sidebar-save {
    order: 2;
}

/** DW-2733 - Modify Inputs sidebar: same pattern as Add output sidebar */
.wf-predict-inputs-sidebar-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}
.wf-predict-inputs-sidebar-wrapper.wf-predict-inputs-sidebar-visible {
    pointer-events: auto;
}
.wf-predict-inputs-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 90%;
    z-index: 20;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}
.wf-predict-inputs-sidebar-container.wf-predict-inputs-sidebar-visible {
    transform: translateX(0);
    pointer-events: auto;
}
.wf-predict-inputs-sidebar-container-in-body {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.wf-predict-inputs-sidebar-container-in-body.wf-predict-inputs-sidebar-visible {
    transform: translateX(0);
}
.wf-predict-inputs-sidebar-container-in-body .wf-predict-inputs-sidebar-overlay {
    position: fixed;
    inset: 0;
}
.wf-predict-inputs-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.wf-predict-inputs-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}
.wf-predict-inputs-sidebar-resize-handle:hover {
    background: #337ab7;
}
.wf-predict-inputs-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
}
.wf-predict-inputs-sidebar-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #333;
    font-size: 15px;
}
.wf-predict-inputs-sidebar-title i {
    color: #337ab7;
}
.wf-predict-inputs-sidebar-subtitle {
    margin-top: 6px;
    font-size: 12px;
}
.wf-predict-inputs-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 15px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.wf-predict-inputs-sidebar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-toolbar .wf-predict-inputs-sidebar-search {
    flex: 1;
    max-width: 100%;
}
.wf-predict-inputs-sidebar-filters-wrap {
    flex-shrink: 0;
    margin-bottom: 10px;
}
.wf-predict-inputs-sidebar-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.wf-predict-inputs-sidebar-list {
    position: relative;
}
.wf-predict-inputs-sidebar-list-inner {
    position: relative;
    width: 100%;
}
.wf-predict-inputs-sidebar-tree-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.wf-predict-inputs-sidebar-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.12s ease;
    flex:1 1 auto;
}
.wf-predict-inputs-sidebar-row:hover {
    background-color: #f5f5f5;
}
.wf-predict-inputs-sidebar-row.ui-selected {
    background-color: #e3f2fd;
}
.wf-predict-inputs-sidebar-row-cb {
    flex-shrink: 0;
}
.wf-predict-inputs-sidebar-row-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wf-predict-inputs-sidebar-row-type {
    flex-shrink: 0;
    font-size: 12px;
    color: #6c757d;
}

/** WorkerInputView inside row (no max-height so name/type are visible) */
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input {
    flex: 1;
    min-width: 0;
}
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input .worker-ip .formbuilder-container,
.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input .worker-ip li.field-item {
    margin-bottom: 0;
    padding: 0 4px;
}

.wf-predict-inputs-sidebar-row .wf-predict-inputs-sidebar-row-worker-input.wf-predict-inputs-sidebar-row-fallback {
    display: flex;
    align-items: center;
    gap: 10px;
}

/** Inputs sidebar: no border-bottoms on section headers (plan: clean modern UI) */
.wf-predict-inputs-sidebar .wf-predict-review-inputs-section-header,
.wf-predict-inputs-sidebar .wf-predict-review-inputs-subgroup-section {
    border-bottom: none;
}
.wf-predict-inputs-sidebar-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    background: #f8f9fa;
}
.wf-predict-training-dataset-summary-inputs .wf-predict-training-dataset-modify-inputs-btn {
    margin-left: 6px;
    vertical-align: middle;
}

/** DVFIV-1933 - WfPredictCollectionView: swap row (search | floating bar), no layout shift; compat table */
.wf-predict-collection-swap-row {
    flex-shrink: 0;
    min-height: 52px;
    position: relative;
}
.wf-predict-collection-swap-row .wf-predict-collection-search-row,
.wf-predict-collection-swap-row .wf-predict-collection-floating-bar-placeholder {
    min-height: 52px;
}
.wf-predict-collection-swap-row .wf-predict-collection-floating-bar-placeholder {
    display: none;
}
.wf-predict-collection-swap-row.wf-predict-collection-has-selection .wf-predict-collection-search-row {
    display: none !important;
}
.wf-predict-collection-swap-row.wf-predict-collection-has-selection .wf-predict-collection-floating-bar-placeholder {
    display: block;
}
.wf-predict-collection-floating-bar-placeholder {
    min-height: 0;
    flex-shrink: 0;
}
.wf-predict-collection .wf-collection-floating-bar {
    position: static;
    margin: 0;
    margin-bottom: 8px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/** Added by shashank2104 on 02/25/2026 at 09:24 PM - faded state while async compat runs */
.wf-predict-collection .wf-collection-floating-bar.wf-collection-floating-bar-pending {
    opacity: 0.65;
    pointer-events: auto;
}
.wf-predict-collection-table-wrap .wf-predict-collection-dt-container {
    min-height: 200px;
}
.wf-predict-collection-body-inner .filter-options {
    flex-shrink: 0;
}
.wf-predict-collection-compat-table-wrap .table {
    margin-bottom: 0;
}
.wf-predict-collection .wf-collection-card-compat-badge {
    display: inline-block;
}

/** DVFIV-1933 - table signature column: 2-line clamp + ellipsis */
.wf-predict-collection-table-wrap .wf-predict-collection-table-signature {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.35;
    max-width: 200px;
}

/** Added by shashank2104 on 02/25/2026 - Card view: items do not expand to 100% height; flow by content and grow with See more when expanded */
.wf-predict-collection .wf-collection-cards-grid {
    align-items: flex-start;
    align-content: flex-start;
}
.wf-predict-collection .wf-collection-cards-grid .wf-collection-card {
    align-self: flex-start;
    height: auto;
    min-height: 175px;
    flex: 0 1 calc(25% - 10px);
}
.wf-predict-collection .wf-collection-card .wf-collection-card-inner {
    height: auto;
    min-height: 175px;
    flex: 0 1 auto;
    justify-content: flex-start;
}
.wf-predict-collection .wf-collection-card.wf-collection-card-expanded .wf-collection-card-inner {
    min-height: 175px;
}

/** Added by shashank2104 on 02/26/2026 - DW-2733 - Saved predictions dropdown: modern table UI in nav-tab header */
.wf-predict-saved-dropdown-menu .wf-predict-saved-table-wrap {
    padding: 0;
}
.wf-predict-saved-dropdown .wf-predict-saved-table {
    margin-bottom: 0;
    font-size: 13px;
}
.wf-predict-saved-dropdown .wf-predict-saved-table thead th {
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid #e5e5e5;
    padding: 8px 10px;
    white-space: nowrap;
}
.wf-predict-saved-dropdown .wf-predict-saved-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
}
.wf-predict-saved-dropdown .wf-predict-saved-row {
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.wf-predict-saved-dropdown .wf-predict-saved-row:hover {
    background-color: #f5f5f5;
}
.wf-predict-saved-dropdown .wf-predict-saved-row.wf-predict-saved-active {
    background-color: #e8f4fc;
}
.wf-predict-saved-dropdown .wf-predict-saved-row.wf-predict-saved-active:hover {
    background-color: #d6eef9;
}
.wf-predict-saved-dropdown .wf-predict-saved-draft-icon {
    font-size: 6px;
    color: #999;
    vertical-align: middle;
}
.wf-predict-saved-dropdown .wf-predict-saved-name {
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-predict-saved-dropdown .wf-predict-saved-info {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.wf-predict-saved-dropdown .wf-predict-saved-remove {
    padding: 2px 6px;
}
.wf-predict-saved-dropdown .wf-predict-saved-empty td {
    padding: 16px;
    font-style: italic;
}
/*
 * Special CSS rules not matched to specific templates
 * Category: misc
 * Auto-generated by modularize_css.py
 */

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

@media (max-width: 1920px) {
/* div.workflow input.wf-worker-search {
        width: 200px !important;
    } */

    div.workflow .wf-name-container .wf-name {
        max-width: 500px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    div.workflow .plugin-header-center {
        position: relative;
        left: 0;
        transform: none;
    }

    div.workflow .plugin-header-center .wf-name-container {
        justify-content: center;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

@media (max-width: 640px) {
div.workflow .chart-view .wf-group-button .wf-label {
        display: none;
    }
}

div.wf-popover.wf-output-assign-to {
width: 400px;
    max-width: unset;
}

span.wf-danger {
color: #d9534f;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}

div.wf-thumbnail-enlarged .thumbnail_heading {
display: none;
}

@keyframes border-opacity-change {
0% {
        border-color: rgba(221, 221, 221, 1)
    }

    30% {
        border-color: rgba(221, 221, 221, 0.5)
    }

    50% {
        border-color: rgba(221, 221, 221, 0.3)
    }

    70% {
        border-color: rgba(221, 221, 221, 0.5)
    }

    100% {
        border-color: rgba(221, 221, 221, 1);
    }
}

body .wf-objects-clone {
position: fixed;
    z-index: 2000;
    pointer-events: none;
}

.wf-objects-clone li {
margin-bottom: 6px;
}

.wf-objects-clone ul {
max-height: 300px;
    overflow: auto;
}

body .wf-alert {
z-index: 2000;
    position: fixed;
    left: 44%;
    font-family: sans-serif;
    top: 0;
}

body .wf-alert.shown {
top: 0;
}

body .wf-alert.alert-workflow {
background-color: #4f5359;
    color: #FFF;
}

div.tour-backdrop {
opacity: 0.35 !important;
}

div.excelresponseparser .sidebarArea .chart_options {
font-size: 11px;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction {
background-color: #428BCA;
    color: #FFF;
}

div.excelresponseparser .sidebarArea input.waitingForInteraction::placeholder {
color: #FFF;
}

@media (max-width: 1200px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 90% !important;
    }
}

@media (min-width: 1201px) {
div#wf-execute-workflow-node-modal .modal-dialog {
        width: 80% !important;
    }
}

.ui-selectable-helper {
z-index: 1200 !important;
}

div.wf-fe .file_explorer {
padding: 0;
    width: 100%;
    margin: auto;
    box-shadow: none;
}

div.wf-fe .file_explorer .fe-body-content {
max-height: initial !important;
}

div.wf-fe .file_explorer .fe-messages {
position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

div.wf-popover.wf-output-assign-to {
width: 400px;
    max-width: unset;
}

span.wf-danger {
color: #d9534f;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}

div.wf-thumbnail-enlarged .thumbnail_heading {
display: none;
}

body .wf-objects-clone {
position: fixed;
    z-index: 2000;
    pointer-events: none;
}

.wf-objects-clone li {
margin-bottom: 6px;
}

.wf-objects-clone ul {
max-height: 300px;
    overflow: auto;
}

.item-content.it-output-viz {
max-width: calc(100% - 20px);
}

@media (max-width: 1200px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 500px;
    }
}

@media (max-width: 768px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 400px;
    }
}

@media (max-width: 480px) {
div.workflow .plugin-settings-line .wf-search-container .worker-search-dd.open.focussed .left-inner-addon {
        width: 300px;
    }
}

.wf-navigation-split-layout {
background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.wf-navigation-split-layout .wf-navigation-header {
padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.wf-navigation-split-layout .wf-navigation-body {
position: relative;
}

.wf-navigation-split-layout .wf-navigation-left {
border-right: 1px solid #ddd;
    background: #fff;
}

.wf-navigation-split-layout .wf-navigation-right {
background: #f8f9fa;
    border-left: 1px solid #ddd;
    position: relative;
}

.wf-navigation-split-layout .navigation-breadcrumbs {
padding: 15px;
}

.wf-navigation-split-layout .breadcrumbs-header {
margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.wf-navigation-split-layout .breadcrumbs-header h6 {
margin: 0;
    color: #333;
    font-weight: 600;
}

.wf-navigation-split-layout .breadcrumb-content {
flex: 1;
}

.wf-navigation-split-layout .breadcrumb-title {
font-weight: 500;
    margin-bottom: 2px;
}

.wf-navigation-split-layout .breadcrumb-meta {
font-size: 11px;
}

.wf-navigation-split-layout .breadcrumb-actions {
margin-left: 10px;
}

.wf-navigation-split-layout .no-breadcrumbs {
padding: 20px;
    text-align: center;
}

.wf-navigation-split-layout .no-breadcrumbs p {
margin: 0;
    color: #666;
}

@media (max-width: 600px) {
div.workflow .workflow-toc-toggle-btn {
        top: 12vw;
        left: 2vw;
        width: 32px;
        height: 96px;
        font-size: 1rem;
    }
}

@keyframes pulse {
0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.2);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

div.custom-editor .new-plugin-template-ui {
background-color: #FFF;
}

@media (max-width: 900px) {
div.wf-agentic-view[data-view="focussed"] .agentic-chat-area,
    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        max-width: 100%;
        min-width: 0;
        border: none;
    }

    div.wf-agentic-view[data-view="focussed"] .row.no-gutters.flex-grow-1 {
        flex-direction: column;
    }

    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        border-top: 1px solid #e3e6ea;
        border-left: none;
        box-shadow: 0 -4px 24px rgba(33, 150, 243, 0.10);
        /*min-height: 180px;*/
        /*max-height: 50vh;*/
        height: auto;
    }
}

.simulations-popover {
max-width: 800px !important;
    min-width: 600px !important;
    width: auto !important;
}

.simulations-popover-container {
background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.simulations-popover .popover-header {
background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.simulations-popover .popover-controls {
display: flex;
    gap: 5px;
}

.simulations-popover .popover-body {
padding: 15px;
    max-height: 500px;
    overflow-y: auto;
}

.simulations-popover .simulations-table-container {
min-height: 200px;
    height: 300px;
}

.simulations-popover .table-loading {
text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.simulations-popover {
z-index: 1051 !important;
}

@media (max-width: 768px) {
.simulations-popover {
        max-width: 95vw !important;
        min-width: 95vw !important;
    }

    .simulations-popover .popover-body {
        max-height: 60vh;
    }
}

@media (max-width: 768px) {
div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 80px;
        font-size: 10px;
        padding: 4px 8px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 15px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 40vw;
    }
}

@media (max-width: 480px) {
div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 60px;
        font-size: 9px;
        padding: 2px 4px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 12px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 50vw;
    }
}

@media (max-width: 768px) {
div.workflow .wf-worker-info-container {
        width: 300px;
        height: 300px;
    }

    div.workflow .wf-worker-info-left,
    div.workflow .wf-worker-info-right {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    div.workflow .wf-worker-info-top {
        top: -50px;
    }

    /* Adjust pill sizes for mobile */
    div.workflow .wf-worker-info-left .wf-info-item,
    div.workflow .wf-worker-info-right .wf-info-item {
        max-width: 100px;
        font-size: 10px;
        padding: 3px 6px;
    }
}

@keyframes expandFromCollapsed {
0% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes collapseToCollapsed {
0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }
}

@media (max-width: 480px) {
div.workflow .collapsed-sequence-expanded-container {
        min-width: 320px;
        max-width: 350px;
        padding: 15px;
    }

    div.workflow .collapsed-sequence-expanded-container .workers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-circle-inner {
        height: 70px;
        padding: 6px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-name {
        font-size: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-type {
        font-size: 8px;
    }
}

@media (max-width: 768px) {
div.workflow .workflow-navigation-container .direction-step .worker-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
        margin-right: 12px;
    }

    div.workflow .workflow-navigation-container .direction-step .worker-name {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
div.workflow .workflow-navigation-container {
        width: 100vw;
        right: -100vw;
    }

    div.workflow .workflow-navigation-container.visible {
        right: 0;
    }

    div.workflow .workflow-navigation-container .path-summary {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 768px) {
div.workflow .wf-filter-panel,
    div.workflow-modal .wf-filter-panel {
        min-width: 320px;
        max-width: 100%;
    }

    div.workflow .wf-filter-row,
    div.workflow-modal .wf-filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    div.workflow .wf-filter-content,
    div.workflow-modal .wf-filter-content {
        padding: 12px;
    }

    div.workflow .wf-filter-header,
    div.workflow-modal .wf-filter-header {
        padding: 12px;
    }
}

@media (max-width: 1200px) {
div.workflow .marker-pairing-table th,
    div.workflow .marker-pairing-table td {
        padding: 6px 4px;
        font-size: 12px;
    }

    div.workflow .marker-pairing-table .form-control,
    div.workflow .marker-pairing-table .sl-select2 {
        font-size: 11px;
        padding: 3px 6px;
        height: 26px;
    }
}

@media (max-width: 768px) {
div.workflow .marker-pairing-table-container {
        overflow-x: auto;
    }

    div.workflow .marker-pairing-table {
        min-width: 1000px;
    }
}


/** Added by shashank2104 on 2026-05-12 - DW-2910 - Consolidated certificate preview tab strip.
 *  Scoped under .d3view-wf-cert-consol-modal (added to GenericModalView's customClass only when
 *  consolidated). Single-cert preview keeps only .d3view-wf-cert-preview-modal so these rules
 *  don't affect it. Each tab's pane runs the FULL rendering pipeline (var resolution, viz embeds,
 *  paginated styling) independently via renderCertContentInto, so charts render natively.
 *
 *  Layout: modal-body is given a fixed height so the .full-h flex column inside takes the full
 *  viewport. panes-wrap (flex-1) scrolls; tab strip sits at the bottom of the visible modal,
 *  not the bottom of the scrolled content. **/

.d3view-wf-cert-consol-modal .modal-body {
    padding: 0 !important;
    /* Height context for .full-h inside — keeps the modal from growing arbitrarily with content
       and lets the tab strip pin at the bottom of the visible body. */
    height: 75vh;
    max-height: 75vh;
    overflow: hidden;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs {
    flex-shrink: 0;
    background: var(--d3v-bg-primary);
    margin: 0;
    padding: 0 16px 8px;
    border: 0;
    border-top: 1px solid var(--d3v-border-default);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
    list-style: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li {
    margin: 0;
    float: none;
    list-style: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li > a {
    border: 1px solid transparent;
    border-top: 0;
    /* Tabs at bottom → rounded BOTTOM corners */
    border-radius: 0 0 var(--d3v-r-sm) var(--d3v-r-sm);
    padding: 8px 14px;
    margin: 0;
    color: var(--d3v-text-secondary);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    background: transparent;
    transition: var(--d3v-t-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
    text-decoration: none;
    user-select: none;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li > a:hover {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a,
.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a:hover,
.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a:focus {
    background: var(--d3v-bg-secondary);
    color: var(--d3v-accent-primary);
    border: 1px solid var(--d3v-border-default);
    border-top: 0;
    margin-top: -1px;
    /* Accent indicator on the TOP edge */
    box-shadow: 0 2px 0 var(--d3v-accent-primary) inset;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs .cert-consol-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
}

.d3view-wf-cert-consol-modal .cert-consol-tabs > li.active > a .cert-consol-count {
    background: var(--d3v-accent-primary);
    color: #fff;
}

/** Pane container — flex-1 + o_auto_y come from utility classes; this just gives it
 *  the page-style background and ensures it minimum-zeroes correctly inside flex. **/
.d3view-wf-cert-consol-modal .cert-consol-panes-wrap {
    background: #f4f6f9;
    min-height: 0;
}

.d3view-wf-cert-consol-modal .cert-consol-pane {
    padding: 40px;
}

/** Added by shashank2104 on 03/26/2026 - DW-2783 - Certification Builder styles **/

/* Scoped under the modal custom class */
.d3view-wf-certification-builder .modal-body {
    padding: 0;
    display: flex;
    flex-direction: row;
    height: 70vh;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-builder-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.d3view-wf-certification-builder .cert-builder-editor .tox.tox-tinymce {
    border: none !important;
    flex: 1;
}

/* Sidebar — resizable */
.d3view-wf-certification-builder .cert-builder-sidebar {
    width: 320px;
    min-width: 220px;
    max-width: 600px;
    border-left: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #fafbfc);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

/* Resize handle */
.d3view-wf-certification-builder .cert-sidebar-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-resize-handle:hover,
.d3view-wf-certification-builder .cert-sidebar-resize-handle.active {
    background: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-builder-sidebar .sidebar-content {
    padding: 12px;
    padding-left: 16px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Sidebar hint text */
.d3view-wf-certification-builder .cert-sidebar-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 8px;
}

/* Filters area in sidebar */
.d3view-wf-certification-builder .cert-sidebar-filters {
    margin-bottom: 8px;
}

.d3view-wf-certification-builder .cert-sidebar-filters .cert-filters-container {
    margin-top: 4px;
}

.d3view-wf-certification-builder .cert-sidebar-filters .pl-inline-filters .pl-filter-views-list {
    flex-wrap: wrap;
    gap: 4px;
}

/* Preview mode */
.d3view-wf-certification-builder .cert-builder-preview {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    background: var(--d3v-bg-secondary, #f4f6f9);
}

.d3view-wf-certification-builder .cert-builder-preview-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Variable chip styles (inside TinyMCE content) */
.d3view-wf-certification-builder .cert-var,
.cert-var {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    cursor: default;
    vertical-align: baseline;
    white-space: nowrap;
}

.cert-var[data-var-type="scalar"] {
    background: #ebf4ff;
    border: 1px solid #90cdf4;
    color: #2b6cb0;
}

.cert-var[data-var-type="vector"] {
    background: #fffaf0;
    border: 1px solid #fbd38d;
    color: #c05621;
}

.cert-var[data-var-type="dataset"] {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #276749;
}

/* Drop overlay */
.d3view-wf-certification-builder .cert-drop-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(49, 130, 206, 0.08);
    border: 2px dashed var(--d3v-accent, #3182ce);
    border-radius: var(--d3v-r-sm, 4px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.d3view-wf-certification-builder .cert-drop-overlay.active {
    display: flex;
}

.d3view-wf-certification-builder .cert-drop-overlay-label {
    background: #ebf4ff;
    color: #2b6cb0;
    padding: 8px 20px;
    border-radius: var(--d3v-r-full, 20px);
    font-weight: 600;
    font-size: 13px;
}

/* Draggable items in sidebar */
.d3view-wf-certification-builder .worker-io-item {
    cursor: grab;
    padding: 2px 4px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .worker-io-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

/* Sparkline / curve chart container in preview */
.d3view-wf-certification-builder .cert-sparkline-container {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 12px;
    margin: 10px 0;
    text-align: center;
}

.d3view-wf-certification-builder .cert-curve-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    margin-bottom: 4px;
    text-align: center;
}

.d3view-wf-certification-builder .cert-curve-placeholder {
    min-height: 180px;
}

/* Dataset table in preview */
.d3view-wf-certification-builder .cert-dataset-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}

.d3view-wf-certification-builder .cert-dataset-table th {
    background: var(--d3v-bg-tertiary, #f0f4f8);
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #4a5568);
}

.d3view-wf-certification-builder .cert-dataset-table td {
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-dataset-table tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #fafbfc);
}

/* Resize overlay — prevents iframe from stealing mouse events during drag */
.d3view-wf-certification-builder .cert-resize-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    cursor: col-resize;
}

.d3view-wf-certification-builder .cert-resize-overlay.active {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   Block Builder Mode — Added for DW-2783
   ═══════════════════════════════════════════════════════════════ */

/* Main block builder wrapper — hidden by default, shown via _switchMode */
.d3view-wf-certification-builder .cert-block-builder {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--d3v-bg-secondary, #f4f6f9);
    display: none;
    justify-content: center;
    align-items: flex-start;
}

/* White page canvas — flex column for header/body/footer zones */
.d3view-wf-certification-builder .cert-block-page {
    width: 816px;
    min-height: 100%;
    background: #fff;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.08));
    border-radius: var(--d3v-r-md, 8px);
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header/Footer zones — pinned top/bottom of page */
.d3view-wf-certification-builder .cert-header-zone,
.d3view-wf-certification-builder .cert-footer-zone {
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-header-zone:empty,
.d3view-wf-certification-builder .cert-footer-zone:empty {
    display: none;
}

.d3view-wf-certification-builder .cert-footer-zone {
    margin-top: auto;
}

/* Body container fills remaining space */
.d3view-wf-certification-builder .cert-blocks-container {
    flex: 1 1 auto;
    padding: 48px;
}

/* Empty state */
.d3view-wf-certification-builder .cert-blocks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 12px;
    padding: 60px 20px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 14px;
    text-align: center;
}

.d3view-wf-certification-builder .cert-blocks-empty i.fa-th-large {
    font-size: 36px;
    opacity: 0.4;
}

/* + button inside the empty state */
.d3view-wf-certification-builder .cert-blocks-empty .cert-empty-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    margin-top: 8px;
    border: 1px solid var(--d3v-accent, #3B82F6);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.d3view-wf-certification-builder .cert-blocks-empty .cert-empty-add-btn:hover {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
}

/* Drop overlay for block page */
.d3view-wf-certification-builder .cert-block-drop-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(49, 130, 206, 0.06);
    border: 2px dashed var(--d3v-accent, #3182ce);
    border-radius: var(--d3v-r-md, 8px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.d3view-wf-certification-builder .cert-block-drop-overlay.active {
    display: flex;
}

.d3view-wf-certification-builder .cert-drop-overlay-label {
    background: #ebf4ff;
    color: #2b6cb0;
    padding: 8px 20px;
    border-radius: var(--d3v-r-full, 20px);
    font-weight: 600;
    font-size: 13px;
}

/* ── Blocks Container — CSS Grid for stable row-based layout ── */

.d3view-wf-certification-builder .cert-blocks-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    align-items: start;
    align-content: start;
}

/* ── Individual Block ── */

.d3view-wf-certification-builder .cert-block {
    position: relative;
    border: 2px solid transparent;
    border-radius: 6px;
    transition: border-color var(--d3v-t-fast, 0.12s), box-shadow var(--d3v-t-fast, 0.12s);
    grid-column: span 6; /* full width by default */
}

/* Width variants — grid-column spans */
.d3view-wf-certification-builder .cert-block[data-width="half"] {
    grid-column: span 3;
}

.d3view-wf-certification-builder .cert-block[data-width="third"] {
    grid-column: span 2;
}

.d3view-wf-certification-builder .cert-block[data-width="two-thirds"] {
    grid-column: span 4;
}

/* Additional width variants */
.d3view-wf-certification-builder .cert-block[data-width="one-sixth"] {
    grid-column: span 1;
}

.d3view-wf-certification-builder .cert-block[data-width="five-sixths"] {
    grid-column: span 5;
}


.d3view-wf-certification-builder .cert-block:hover {
    border-color: var(--d3v-border, #e2e8f0);
    z-index: 2;
}

.d3view-wf-certification-builder .cert-block.cb-selected {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    z-index: 3;
}

/* Block action toolbar — top-right corner, above badge */
.d3view-wf-certification-builder .cert-block-actions {
    position: absolute;
    top: -28px;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--d3v-t-fast, 0.12s);
    z-index: 5;
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-actions,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-actions {
    opacity: 1;
}

.d3view-wf-certification-builder .cert-block-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(255,255,255,0.95);
    color: var(--d3v-text-secondary, #64748B);
    cursor: pointer;
    font-size: 10px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-action-btn:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
    border-color: var(--d3v-border-strong, #cbd5e0);
}

.d3view-wf-certification-builder .cert-block-action-btn.drag-handle {
    cursor: grab;
}

.d3view-wf-certification-builder .cert-block-action-btn.danger:hover {
    color: var(--d3v-status-danger, #E53E3E);
    border-color: var(--d3v-status-danger, #E53E3E);
    background: #fff5f5;
}

/* Type badge — top-right corner */
.d3view-wf-certification-builder .cert-block-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: var(--d3v-r-full, 20px);
    background: var(--d3v-bg-tertiary, #f0f4f8);
    color: var(--d3v-text-muted, #94A3B8);
    border: 1px solid var(--d3v-border, #e2e8f0);
    opacity: 0;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-badge,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-badge {
    opacity: 1;
}

/* Block body — shared */
.d3view-wf-certification-builder .cert-block-body {
    padding: 12px 16px;
    min-height: 32px;
}

.d3view-wf-certification-builder .cert-block-body:focus {
    outline: none;
}

/* Placeholder text for empty contenteditable */
.d3view-wf-certification-builder .cert-block-body[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
    pointer-events: none;
}

/* ── Per-type block body styles ── */

/* Heading */
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body {
    font-size: 22px;
    font-weight: 700;
    color: #1a365d;
    line-height: 1.3;
}

/* Text */
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--d3v-text-primary, #1a202c);
}

/* Table — overflow protection */
.d3view-wf-certification-builder .cert-block[data-type="table"] .cert-block-body {
    overflow-x: auto;
}

.d3view-wf-certification-builder .cert-block-table {
    width: 100%;
    border-collapse: collapse;
}

.d3view-wf-certification-builder .cert-block-table th {
    background: var(--d3v-bg-tertiary, #f0f4f8);
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #4a5568);
}

.d3view-wf-certification-builder .cert-block-table td {
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    font-size: 13px;
    min-width: 60px;
}

.d3view-wf-certification-builder .cert-block-table td:focus,
.d3view-wf-certification-builder .cert-block-table th:focus {
    outline: 2px solid var(--d3v-accent, #3B82F6);
    outline-offset: -2px;
}

.d3view-wf-certification-builder .cert-block-table tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #fafbfc);
}

/* HR / Divider */
.d3view-wf-certification-builder .cert-block-hr {
    padding: 8px 16px;
}

.d3view-wf-certification-builder .cert-block-hr hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--d3v-border-strong, #cbd5e0), transparent);
    margin: 0;
}

/* Image placeholder */
.d3view-wf-certification-builder .cert-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-image-placeholder:hover {
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-image-placeholder i {
    font-size: 28px;
}

/* Variable block body */
.d3view-wf-certification-builder .cert-block-var-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.d3view-wf-certification-builder .cert-block-var-empty {
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
    font-style: italic;
}

/* Variable chip (block builder version) */
.d3view-wf-certification-builder .cert-block-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: #ebf4ff;
    border: 1px solid #90cdf4;
    color: #2b6cb0;
}

.d3view-wf-certification-builder .cert-block-var-chip[data-var-type="vector"] {
    background: #fffaf0;
    border-color: #fbd38d;
    color: #c05621;
}

.d3view-wf-certification-builder .cert-block-var-chip[data-var-type="dataset"] {
    background: #f0fff4;
    border-color: #9ae6b4;
    color: #276749;
}

.d3view-wf-certification-builder .cert-block-var-chip-icon {
    font-weight: 700;
}

.d3view-wf-certification-builder .cert-block-var-chip-remove {
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    padding: 0 0 0 2px;
    color: inherit;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-var-chip-remove:hover {
    opacity: 1;
}

/* ── Columns Block ── */
.d3view-wf-certification-builder .cert-block[data-type="columns"] .cert-columns-container {
    display: flex;
    gap: 16px;
}

.d3view-wf-certification-builder .cert-column {
    flex: 1;
    min-height: 60px;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 12px;
    transition: all 0.15s ease;
}

.d3view-wf-certification-builder .cert-column:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-column-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 6px;
}

.d3view-wf-certification-builder .cert-column [contenteditable] {
    min-height: 36px;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
}

/* ── jQuery UI Resizable Handles — GridStack-like all sides ── */

.d3view-wf-certification-builder .cert-block .ui-resizable-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease, opacity 0.15s ease;
    opacity: 0;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-handle,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-handle {
    opacity: 1;
}

/* Edge handles */
.d3view-wf-certification-builder .cert-block .ui-resizable-n {
    top: -3px; left: 0; right: 0; height: 6px; cursor: n-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-s {
    bottom: -3px; left: 0; right: 0; height: 6px; cursor: s-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-e {
    right: -4px; top: 0; bottom: 0; width: 8px; cursor: e-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-w {
    left: -4px; top: 0; bottom: 0; width: 8px; cursor: w-resize;
}

/* Corner handles */
.d3view-wf-certification-builder .cert-block .ui-resizable-ne {
    top: -4px; right: -4px; width: 10px; height: 10px; cursor: ne-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-nw {
    top: -4px; left: -4px; width: 10px; height: 10px; cursor: nw-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-se {
    bottom: -4px; right: -4px; width: 10px; height: 10px; cursor: se-resize;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-sw {
    bottom: -4px; left: -4px; width: 10px; height: 10px; cursor: sw-resize;
}

/* Hover indicators — edge handles show accent line */
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-e,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-e {
    background: linear-gradient(to right, transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-w,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-w {
    background: linear-gradient(to left, transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-s,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-s {
    background: linear-gradient(transparent, var(--d3v-accent, #3B82F6));
    opacity: 0.25;
    border-radius: 0 0 6px 6px;
}

.d3view-wf-certification-builder .cert-block:hover .ui-resizable-n,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-n {
    background: linear-gradient(var(--d3v-accent, #3B82F6), transparent);
    opacity: 0.25;
    border-radius: 6px 6px 0 0;
}

/* Corner handles show dot indicator */
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-se,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-sw,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-ne,
.d3view-wf-certification-builder .cert-block:hover .ui-resizable-nw,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-se,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-sw,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-ne,
.d3view-wf-certification-builder .cert-block.cb-selected .ui-resizable-nw {
    background: var(--d3v-accent, #3B82F6);
    border-radius: 50%;
    opacity: 0.5;
}

.d3view-wf-certification-builder .cert-block .ui-resizable-handle:hover {
    opacity: 0.7 !important;
}

/* Active resizing state */
.d3view-wf-certification-builder .cert-block.cb-resizing {
    border-color: var(--d3v-accent, #3B82F6) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    z-index: 20;
}

.d3view-wf-certification-builder .cert-block.cb-resizing .cert-block-badge {
    opacity: 1;
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Inserter Row — hidden to allow grid side-by-side layout ── */

.d3view-wf-certification-builder .cert-block-inserter {
    display: none;
}

.d3view-wf-certification-builder .cert-block-inserter-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d3v-accent, #3B82F6);
    border-radius: 50%;
    background: #fff;
    color: var(--d3v-accent, #3B82F6);
    cursor: pointer;
    font-size: 10px;
    transition: all var(--d3v-t-fast, 0.12s);
    z-index: 5;
}

.d3view-wf-certification-builder .cert-block-inserter-btn:hover {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── SortableJS classes ── */

.d3view-wf-certification-builder .cert-block.sortable-ghost {
    opacity: 0.3;
    border: 2px dashed var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-block.sortable-chosen {
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
}

/* New block animation */
@keyframes cert-block-new {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.d3view-wf-certification-builder .cert-block--new {
    animation: cert-block-new 0.25s ease-out;
}

/* ── Sidebar Tabs ── */

.d3view-wf-certification-builder .cert-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-sidebar-tab {
    flex: 1;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--d3v-text-secondary, #64748B);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-tab:hover {
    color: var(--d3v-text-primary, #1a202c);
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-sidebar-tab.active {
    color: var(--d3v-accent, #3B82F6);
    border-bottom-color: var(--d3v-accent, #3B82F6);
}

/* Sidebar tab content */
.d3view-wf-certification-builder .cert-sidebar-tab-content {
    display: none;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-sidebar-tab-content.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

/* ── Block Palette Grid ── */

.d3view-wf-certification-builder .cert-blocks-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    height: 100%;
    overflow: auto;
}

.d3view-wf-certification-builder .cert-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: #fff;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-palette-item:hover {
    background: rgba(59, 130, 246, 0.04);
    border-color: var(--d3v-accent, #3B82F6);
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.06));
}

.d3view-wf-certification-builder .cert-palette-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 6px);
    font-size: 15px;
}

.d3view-wf-certification-builder .cert-palette-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748B);
}

/* Per-type palette icon colors */
.d3view-wf-certification-builder .cert-palette-icon.heading-icon {
    background: #e8e0f7;
    color: #5b21b6;
}

.d3view-wf-certification-builder .cert-palette-icon.text-icon {
    background: #dcfce7;
    color: #16a34a;
}

.d3view-wf-certification-builder .cert-palette-icon.table-icon {
    background: #ffedd5;
    color: #ea580c;
}

.d3view-wf-certification-builder .cert-palette-icon.hr-icon {
    background: #fce7f3;
    color: #db2777;
}

.d3view-wf-certification-builder .cert-palette-icon.image-icon {
    background: #cffafe;
    color: #0891b2;
}

.d3view-wf-certification-builder .cert-palette-icon.variable-icon {
    background: #fef3c7;
    color: #d97706;
}

.d3view-wf-certification-builder .cert-palette-icon.columns-icon {
    background: #f5f3ff;
    color: #7c3aed;
}

/* ── Insert Menu Popover ── */

.d3view-wf-certification-builder .cert-insert-menu {
    position: absolute;
    background: #fff;
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    padding: 6px;
    width: 200px;
    z-index: 1000;
    display: none;
}

.d3view-wf-certification-builder .cert-insert-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--d3v-text-primary, #1a202c);
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-insert-menu-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-insert-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #64748B);
}

/* ── Disabled Sidebar Tab ── */

.d3view-wf-certification-builder .cert-sidebar-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Remote Data Tab ── */

.d3view-wf-certification-builder .cert-remote-source-select .select2-container {
    width: 100% !important;
}

.d3view-wf-certification-builder .cert-remote-item-select {
    min-height: 32px;
}

.d3view-wf-certification-builder .cert-remote-loading {
    text-align: center;
    padding: 20px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
}

/* Response group headers */
.d3view-wf-certification-builder .cert-remote-group {
    margin-bottom: 8px;
}

.d3view-wf-certification-builder .cert-remote-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-secondary, #64748B);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    cursor: pointer;
    user-select: none;
}

.d3view-wf-certification-builder .cert-remote-group-header .fa-chevron-right {
    transition: transform var(--d3v-t-fast, 0.12s);
    font-size: 9px;
}

.d3view-wf-certification-builder .cert-remote-group.open .cert-remote-group-header .fa-chevron-right {
    transform: rotate(90deg);
}

.d3view-wf-certification-builder .cert-remote-group-body {
    display: none;
}

.d3view-wf-certification-builder .cert-remote-group.open .cert-remote-group-body {
    display: block;
}

/* Individual remote response item — draggable */
.d3view-wf-certification-builder .cert-remote-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px 6px 16px;
    cursor: grab;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-remote-item:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-remote-item-icon {
    width: 18px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.d3view-wf-certification-builder .cert-remote-item-content {
    flex: 1;
    min-width: 0;
}

.d3view-wf-certification-builder .cert-remote-item-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1a202c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-wf-certification-builder .cert-remote-item-preview {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 2px;
    max-height: 60px;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-remote-sparkline {
    height: 30px;
    width: 100%;
}

/* Dataset expandable columns */
.d3view-wf-certification-builder .cert-remote-dataset-toggle {
    cursor: pointer;
    font-size: 11px;
    color: var(--d3v-accent, #3B82F6);
    padding: 4px 8px 4px 16px;
    user-select: none;
}

.d3view-wf-certification-builder .cert-remote-dataset-toggle:hover {
    text-decoration: underline;
}

.d3view-wf-certification-builder .cert-remote-dataset-cols {
    padding-left: 16px;
    display: none;
}

.d3view-wf-certification-builder .cert-remote-dataset-cols.open {
    display: block;
}

/* Empty/error state */
.d3view-wf-certification-builder .cert-remote-empty {
    text-align: center;
    padding: 30px 10px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   Landing Page — Mode Picker (DW-2783 enhancement)
   ═══════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-landing-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--d3v-bg-secondary, #f8fafc);
    overflow-y: auto;
}

.d3view-wf-certification-builder .cert-landing-header {
    text-align: center;
    margin-bottom: 36px;
}

.d3view-wf-certification-builder .cert-landing-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--d3v-r-xl, 16px);
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}

.d3view-wf-certification-builder .cert-landing-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0 0 8px;
}

.d3view-wf-certification-builder .cert-landing-subtitle {
    font-size: 14px;
    color: var(--d3v-text-muted, #94A3B8);
    margin: 0;
}

.d3view-wf-certification-builder .cert-landing-cards {
    display: flex;
    gap: 24px;
    max-width: 720px;
    width: 100%;
}

.d3view-wf-certification-builder .cert-landing-card {
    flex: 1;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-lg, 12px);
    padding: 28px 24px;
    cursor: pointer;
    transition: all var(--d3v-t-base, 0.2s);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
}

.d3view-wf-certification-builder .cert-landing-card:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-lg, 0 8px 24px rgba(0,0,0,0.12));
    transform: translateY(-3px);
}

.d3view-wf-certification-builder .cert-landing-card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--d3v-r-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-landing-card-icon.editor-icon {
    background: #dbeafe;
    color: #2563eb;
}

.d3view-wf-certification-builder .cert-landing-card-icon.blocks-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.d3view-wf-certification-builder .cert-landing-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0 0 8px;
}

.d3view-wf-certification-builder .cert-landing-card-desc {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.5;
    margin: 0 0 14px;
}

.d3view-wf-certification-builder .cert-landing-card-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    width: 100%;
}

.d3view-wf-certification-builder .cert-landing-card-features span {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-landing-card-features span i {
    color: var(--d3v-success, #10B981);
    font-size: 10px;
}

.d3view-wf-certification-builder .cert-landing-card-btn {
    background: none;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    margin-top: auto;
}

.d3view-wf-certification-builder .cert-landing-card:hover .cert-landing-card-btn {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/** DW-2825 — Import from Reporter card + picker **/
.d3view-wf-certification-builder .cert-landing-card-icon.import-icon {
    background: #fef3c7;
    color: #d97706;
}

.d3view-wf-certification-builder .cert-reporter-picker {
    max-width: 520px;
    margin: 60px auto;
    padding: 32px;
}

.d3view-wf-certification-builder .cert-reporter-picker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.d3view-wf-certification-builder .cert-reporter-picker-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0;
}

.d3view-wf-certification-builder .cert-reporter-picker-desc {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-reporter-picker-select-wrap {
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-reporter-picker-empty {
    padding: 20px;
    text-align: center;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-radius: var(--d3v-r-md, 8px);
    border: 1px dashed var(--d3v-border, #e2e8f0);
}

/* ═══════════════════════════════════════════════════════════════
   Block Width Toolbar — easier than drag resizing (DW-2783)
   ═══════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-block-width-bar {
    display: none;
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-full, 20px);
    padding: 2px;
    gap: 2px;
    z-index: 5;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
    white-space: nowrap;
    flex-direction: row;
}

.d3view-wf-certification-builder .cert-block:hover .cert-block-width-bar,
.d3view-wf-certification-builder .cert-block.cb-selected .cert-block-width-bar {
    display: inline-flex;
}

.d3view-wf-certification-builder .cert-block-width-btn {
    width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--d3v-r-full, 20px);
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-block-width-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-block-width-btn.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Signature Block ── */

.d3view-wf-certification-builder .cert-signature-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 0;
}

.d3view-wf-certification-builder .cert-signature-line {
    border: none;
    border-top: 2px solid var(--d3v-text-primary, #1e293b);
    margin: 0;
}

.d3view-wf-certification-builder .cert-signature-fields {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.d3view-wf-certification-builder .cert-signature-field {
    flex: 1;
}

.d3view-wf-certification-builder .cert-signature-field [contenteditable] {
    font-size: 13px;
    color: var(--d3v-text-secondary, #64748b);
    padding: 4px 0;
    outline: none;
    min-height: 20px;
}

.d3view-wf-certification-builder .cert-signature-field [contenteditable]:empty:before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
}

.d3view-wf-certification-builder .cert-signature-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 2px;
}

/* ── Spacer Block ── */

.d3view-wf-certification-builder .cert-spacer-block {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 0.12s);
    cursor: ns-resize;
    position: relative;
}

.d3view-wf-certification-builder .cert-spacer-block:hover {
    background: var(--d3v-bg-hover, rgba(59,130,246,0.04));
}

.d3view-wf-certification-builder .cert-spacer-label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    pointer-events: none;
    user-select: none;
}

/* ── List Block ── */

.d3view-wf-certification-builder .cert-block-list {
    padding: 4px 0 4px 20px;
    margin: 0;
    list-style-position: outside;
}

.d3view-wf-certification-builder .cert-block-list li {
    padding: 4px 2px;
    outline: none;
    min-height: 22px;
    line-height: 1.6;
}

.d3view-wf-certification-builder .cert-block-list li:empty:before {
    content: attr(data-placeholder);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
}

.d3view-wf-certification-builder .cert-block-list li:focus {
    background: var(--d3v-bg-hover, rgba(59,130,246,0.04));
    border-radius: var(--d3v-r-sm, 4px);
}

/* ── Properties Panel ── */

.d3view-wf-certification-builder .cert-props-panel {
    background: var(--d3v-bg-primary, #fff);
}

.d3view-wf-certification-builder .cert-props-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-wf-certification-builder .cert-props-header-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.d3view-wf-certification-builder .cert-props-cancel-btn,
.d3view-wf-certification-builder .cert-props-save-btn,
.d3view-wf-certification-builder .cert-props-reset-btn,
.d3view-wf-certification-builder .cert-table-props-cancel-btn,
.d3view-wf-certification-builder .cert-table-props-save-btn {
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-props-cancel-btn:hover,
.d3view-wf-certification-builder .cert-props-reset-btn:hover,
.d3view-wf-certification-builder .cert-table-props-cancel-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-wf-certification-builder .cert-props-save-btn,
.d3view-wf-certification-builder .cert-table-props-save-btn {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-props-save-btn:hover,
.d3view-wf-certification-builder .cert-table-props-save-btn:hover {
    opacity: 0.9;
}

.d3view-wf-certification-builder .cert-props-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-props-body {
    padding: 12px;
}

.d3view-wf-certification-builder .cert-props-section {
    margin-bottom: 16px;
}

.d3view-wf-certification-builder .cert-props-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-props-row {
    margin-bottom: 10px;
}

.d3view-wf-certification-builder .cert-props-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-props-row-inline {
    display: flex;
    gap: 10px;
}

.d3view-wf-certification-builder .cert-props-field {
    flex: 1;
    min-width: 0;
}

.d3view-wf-certification-builder .cert-prop-input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, 0.12s);
    box-sizing: border-box;
}

.d3view-wf-certification-builder .cert-prop-input:focus {
    outline: none;
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

.d3view-wf-certification-builder .cert-prop-color {
    padding: 2px;
    height: 32px;
    cursor: pointer;
}

.d3view-wf-certification-builder .cert-props-align-btns {
    display: flex;
    gap: 2px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: var(--d3v-r-md, 6px);
    padding: 2px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-prop-align-btn {
    flex: 1;
    height: 28px;
    border: none;
    border-radius: var(--d3v-r-sm, 4px);
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    font-size: 12px;
}

.d3view-wf-certification-builder .cert-prop-align-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}

.d3view-wf-certification-builder .cert-prop-align-btn.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* ── Palette icon colors for new block types ── */

.d3view-wf-certification-builder .cert-palette-icon.list-icon {
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

.d3view-wf-certification-builder .cert-palette-icon.spacer-icon {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}

.d3view-wf-certification-builder .cert-palette-icon.signature-icon {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

/* (resizable handles are defined above in the GridStack-like section) */

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Header/Footer blocks
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-header-block,
.d3view-wf-certification-builder .cert-footer-block {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px dashed var(--d3v-border-strong, #cbd5e1);
    border-radius: 0;
    margin: 0;
}

.d3view-wf-certification-builder .cert-header-block {
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 0;
}

.d3view-wf-certification-builder .cert-footer-block {
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 0 0 var(--d3v-r-md, 8px) var(--d3v-r-md, 8px);
}

.d3view-wf-certification-builder .cert-header-block .cert-block-body,
.d3view-wf-certification-builder .cert-footer-block .cert-block-body {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    padding: 8px 16px;
    min-height: 28px;
}

/* R0-3360 — inherit font/color so user property changes (font-size, color, font-style) on the footer block cascade to {page} of {pages} text */
.d3view-wf-certification-builder .cert-footer-pagenum {
    font-size: inherit;
    color: inherit;
    font-style: inherit;
}

.d3view-wf-certification-builder .cert-palette-icon.header-icon {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
}

.d3view-wf-certification-builder .cert-palette-icon.footer-icon {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Variable Formatter badge
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-var-format-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0,0,0,0.08);
    color: inherit;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Variable Targets indicator
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-var-target-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Page Setup (sidebar panel)
   ══════════════════════════════════════════════════════════════════════ */

/* Paper preview mockup */
.d3view-wf-certification-builder .cert-ps-paper-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup {
    background: #fff;
    border: 1px solid var(--d3v-border-strong, #CBD5E1);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    border-radius: 2px;
    position: relative;
    transition: all var(--d3v-t-base, 0.20s);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-lines {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line {
    height: 2px;
    border-radius: 1px;
    background: var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line.short { width: 65%; }
.d3view-wf-certification-builder .cert-ps-paper-mockup .cert-ps-mockup-line.medium { width: 85%; }

.d3view-wf-certification-builder .cert-ps-paper-size-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94A3B8);
    text-align: center;
    margin-top: 8px;
}

/* Orientation buttons in sidebar */
.d3view-wf-certification-builder .cert-ps-orientation-btns {
    display: flex;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    color: var(--d3v-text-secondary, #475569);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-wf-certification-builder .cert-ps-orientation-btns button.active {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

/* Margin grid */
.d3view-wf-certification-builder .cert-ps-margin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.d3view-wf-certification-builder .cert-ps-margin-field label {
    font-size: 10px;
    font-weight: 500;
    color: var(--d3v-text-muted, #94A3B8);
    display: block;
    margin-bottom: 2px;
}

.d3view-wf-certification-builder .cert-ps-margin-field input {
    width: 100%;
    height: 28px;
}

/* Margin guides on block page */
.d3view-wf-certification-builder .cert-block-page.cert-show-margin-guides {
    outline: 1px dashed rgba(59,130,246,0.25);
    outline-offset: -1px;
}

/* ══════════════════════════════════════════════════════════════════════
   DW-2808 — Sidebar panels for Formatter / Targets (rendered in sidebar)
   ══════════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-sidebar-panel {
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-wf-certification-builder .cert-sidebar-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    margin-bottom: 12px;
    flex-shrink: 0;
}

.d3view-wf-certification-builder .cert-sidebar-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions {
    display: flex;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions button {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s);
    color: var(--d3v-text-secondary, #475569);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions button:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions .cert-sp-save-btn {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
}

.d3view-wf-certification-builder .cert-sidebar-panel-actions .cert-sp-save-btn:hover {
    background: var(--d3v-accent-hover, #2563EB);
}

.d3view-wf-certification-builder .cert-sidebar-panel-body {
    flex: 1;
    overflow-y: auto;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body .cert-sp-row {
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body .cert-sp-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: block;
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-sidebar-panel-body select,
.d3view-wf-certification-builder .cert-sidebar-panel-body input[type="number"],
.d3view-wf-certification-builder .cert-sidebar-panel-body input[type="text"] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sidebar-panel-body select:focus,
.d3view-wf-certification-builder .cert-sidebar-panel-body input:focus {
    border-color: var(--d3v-accent, #3B82F6);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}

.d3view-wf-certification-builder .cert-sp-preview {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    text-align: center;
}

/* Target rows */
.d3view-wf-certification-builder .cert-sp-target-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
}

.d3view-wf-certification-builder .cert-sp-target-row select { width: 70px; }
.d3view-wf-certification-builder .cert-sp-target-row input[type="number"] { width: 65px; }
.d3view-wf-certification-builder .cert-sp-target-row input[type="color"] { width: 32px; height: 28px; padding: 2px; border: 1px solid var(--d3v-border, #e2e8f0); border-radius: var(--d3v-r-sm, 4px); cursor: pointer; }

.d3view-wf-certification-builder .cert-sp-target-remove {
    border: none;
    background: none;
    color: var(--d3v-danger, #EF4444);
    cursor: pointer;
    font-size: 13px;
    padding: 2px;
    opacity: 0.5;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-sp-target-remove:hover { opacity: 1; }

/* Datum line rows */
.d3view-wf-certification-builder .cert-sp-datum-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
}

.d3view-wf-certification-builder .cert-sp-datum-row input[type="number"] { width: 60px; }
.d3view-wf-certification-builder .cert-sp-datum-row input[type="text"] { width: 70px; }
.d3view-wf-certification-builder .cert-sp-datum-row input[type="color"] { width: 32px; height: 28px; padding: 2px; cursor: pointer; }
.d3view-wf-certification-builder .cert-sp-datum-row select { width: 70px; }

.d3view-wf-certification-builder .cert-viz-block {
    padding: 0;
    min-height: 120px;
}

.d3view-wf-certification-builder .cert-viz-block .d3view-textviz {
    padding: 0!important;
}

.d3view-wf-certification-builder .cert-viz-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    cursor: pointer;
    border: 2px dashed var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f8fafc);
    transition: var(--d3v-t-fast, 0.12s);
    min-height: 120px;
}

.d3view-wf-certification-builder .cert-viz-placeholder:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-wf-certification-builder .cert-viz-placeholder i {
    font-size: 28px;
    color: var(--d3v-text-muted, #94a3b8);
}

.d3view-wf-certification-builder .cert-viz-placeholder span {
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-viz-render {
    position: relative;
    border-radius: var(--d3v-r-md, 8px);
    overflow: auto;
    resize: vertical;
    padding: 12px;
    padding-bottom: 20px;
    border: 1px solid var(--d3v-border, #e2e8f0);
}

/* Visible vertical resize handle bar at the bottom of viz blocks */
.d3view-wf-certification-builder .cert-viz-render::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    background: var(--d3v-text-muted, #94a3b8);
    border-radius: 3px;
    opacity: 0.4;
    cursor: ns-resize;
    pointer-events: none;
    transition: opacity var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-viz-render:hover::after {
    opacity: 0.7;
}

.d3view-wf-certification-builder .cert-palette-icon.viz-icon {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: #fff;
}

.d3view-wf-certification-builder .cert-palette-icon.pagebreak-icon {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   DW-2809 #6 — Viz Wizard Modal
   ═══════════════════════════════════════════════════════════ */

.cert-viz-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
}

.cert-viz-wizard-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

.cert-viz-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cert-viz-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-muted, #94a3b8);
    border: 2px solid var(--d3v-border, #e2e8f0);
    transition: var(--d3v-t-fast, 0.12s);
}

.cert-viz-step.active {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.cert-viz-step.done {
    background: var(--d3v-success, #10B981);
    color: #fff;
    border-color: var(--d3v-success, #10B981);
}

.cert-viz-step-line {
    flex: 1;
    height: 2px;
    background: var(--d3v-border, #e2e8f0);
    max-width: 40px;
}

.cert-viz-step-line.done {
    background: var(--d3v-success, #10B981);
}

.cert-viz-step-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-viz-wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.cert-viz-wizard-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}

/* Step 3 — Row Filters (baseline/optimized/reference) */

.cert-viz-row-filters-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: auto;
}

.cert-viz-row-filter-group {
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff);
    overflow: hidden;
    transition: var(--d3v-t-fast, 0.12s);
    /* max-height: 350px; */
    /* overflow: auto; */
    display: flex;
    flex-direction: column;
}

.cert-viz-row-filter-group:hover {
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.cert-viz-row-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.cert-viz-row-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    cursor: pointer;
    margin: 0;
}

.cert-viz-row-filter-toggle input[type="checkbox"] {
    margin: 0;
}

.cert-viz-row-filter-header input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 2px;
    cursor: pointer;
    background: transparent;
}

.cert-viz-dt-row-filters {
    padding: 12px 14px;
    /* max-height: 350px; */
    /* overflow: auto; */
    flex: 1 1 auto;
    overflow: auto;
}
.cert-viz-dt-row-filters .data-filters-body {
    padding: 0!important;
}
.cert-viz-dt-row-filters .filters-list {
    border: none!important;
    box-shadow: none!important;
}

/* Step 1 — Dataset choice */

.cert-viz-dataset-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cert-viz-dataset-option {
    display: block;
    cursor: pointer;
    border: 2px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 12px 16px;
    transition: var(--d3v-t-fast, 0.12s);
    background: var(--d3v-bg-primary, #fff);
}

.cert-viz-dataset-option:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.cert-viz-dataset-option.active {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}
div.simlytiks .cert-viz-dataset-option > label {
    display: none!important;
}
.cert-viz-dataset-option input[type="radio"] {
    display: none;
}

.cert-viz-dataset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-wrap: wrap;
}

.cert-viz-dataset-card .wf-worker-type-sm {
    flex-shrink: 0;
}

.cert-viz-ds-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

.cert-viz-ds-io {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}

.cert-viz-ds-io i {
    font-size: 9px;
    margin-right: 2px;
    color: var(--d3v-accent, #3B82F6);
}

.cert-viz-ds-output i {
    color: var(--d3v-success, #10B981);
}

.cert-viz-dataset-card .wf-id-label {
    flex-shrink: 0;
    margin-left: auto;
}

/* Step 2 — Chart type grid */

.cert-viz-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.cert-viz-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 2px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s);
    background: var(--d3v-bg-primary, #fff);
    text-align: center;
}

.cert-viz-type-item:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
    transform: translateY(-1px);
}

.cert-viz-type-item img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--d3v-r-sm, 4px);
}

.cert-viz-type-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.3;
    word-break: break-word;
}

/* Step 3 — Viz preview container */

.cert-viz-preview-container .sl-viz-preview {
    width: 100%;
    height: 100%;
    min-height: 380px;
    position: relative!important
}

/* Step 4 — two-pane layout: VizParams (left) + Worker I/O drag source (right) */
.cert-viz-wizard-body.cert-viz-step4-body {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    overflow: hidden;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff);
    overflow: auto;
    min-height: 420px;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane .sl-viz-preview,
.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-params-pane .viz-params {
    width: 100%;
    height: 100%;
    min-height: 420px;
    position: relative;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-io-pane {
    flex: 0 0 280px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f8fafc);
    overflow: auto;
    min-height: 420px;
}

.cert-viz-wizard-body.cert-viz-step4-body .cert-viz-io-pane .wf-worker-io {
    height: 100%;
}

/* DW-2809 #14 — Force show Newton legends in cert builder containers even in tiny mode */
.cert-sparkline-container .d3view-newton .main_container.tiny .legends-wrapper {
    opacity: 1 !important;
}
.cert-sparkline-container .d3view-newton .chart_container.tiny div.d3view-legends-container {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════
   Page Break Block (Blocks Mode)
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-pagebreak-block {
    grid-column: span 6 !important;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    cursor: default;
}

.d3view-wf-certification-builder .cert-pagebreak-block:hover {
    border: none;
    box-shadow: none;
}

.d3view-wf-certification-builder .cert-pagebreak-body {
    padding: 0;
}

.d3view-wf-certification-builder .cert-pagebreak-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    position: relative;
}

.d3view-wf-certification-builder .cert-pagebreak-indicator::before,
.d3view-wf-certification-builder .cert-pagebreak-indicator::after {
    content: '';
    flex: 1;
    height: 0;
    border-top: 2px dashed var(--d3v-border-strong, #94a3b8);
}

.d3view-wf-certification-builder .cert-pagebreak-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    white-space: nowrap;
}

.d3view-wf-certification-builder .cert-pagebreak-block .cert-block-badge {
    display: none;
}

.d3view-wf-certification-builder .cert-pagebreak-block .cert-block-actions {
    top: -8px;
    right: 4px;
}

/* ═══════════════════════════════════════════════════════
   Multi-Page Preview
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-preview-page {
    background: #fff;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.08));
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 2px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.d3view-wf-certification-builder .cert-preview-page-gap {
    height: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.d3view-wf-certification-builder .cert-preview-page-gap::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--d3v-border, #e2e8f0) 0, var(--d3v-border, #e2e8f0) 6px, transparent 6px, transparent 12px);
}

.d3view-wf-certification-builder .cert-preview-content {
    flex: 1;
}

/** Added by shashank2104 on 2026-04-14 - DW-2844 #3 - Rescue typography that TinyMCE iframe gets from UA defaults + content_style
    but the preview/PDF loses once content lives outside the editor. Covers preview pages (.cert-preview-content inside either
    the builder preview or the offscreen cert-pdf-render-container used for domtoimage capture). **/
/** Updated by shashank2104 on 2026-05-06 - Scope list typography to rich-text block types only (heading/text/header/footer/list).
    The previous broad `.cert-preview-content ul, ol` selectors leaked into embedded charts/legends/widgets that render <ul>/<ol>
    markup inside viz/occupant/injury blocks. **/
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ol {
    padding-left: 40px;
    margin: 0.5em 0;
}
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul { list-style: disc outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ol,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ol,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ol { list-style: decimal outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul ul { list-style: circle outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] ul ul ul,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] ul ul ul,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] ul ul ul { list-style: square outside; }
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="heading"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="text"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="header"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="footer"] li,
.d3view-wf-certification-builder .cert-preview-content .cert-block[data-type="list"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="heading"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="text"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="header"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="footer"] li,
.cert-pdf-render-container .cert-preview-content .cert-block[data-type="list"] li { display: list-item; margin: 2px 0; }

/** Updated by shashank2104 on 2026-04-22 - DW-2866 - h3 gets :not(.legends-label) so the bubble/scatter legend header stops inheriting 1.17em and honors legendsFontSize; viz containers themselves are reset below via a higher-specificity rule. **/
.d3view-wf-certification-builder .cert-preview-content h1,
.cert-pdf-render-container .cert-preview-content h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h2,
.cert-pdf-render-container .cert-preview-content h2 { font-size: 1.5em; font-weight: bold; margin: 0.75em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h3:not(.legends-label),
.cert-pdf-render-container .cert-preview-content h3:not(.legends-label) { font-size: 1.17em; font-weight: bold; margin: 0.83em 0; color: #1a365d; line-height: 1.3; }
.d3view-wf-certification-builder .cert-preview-content h4,
.cert-pdf-render-container .cert-preview-content h4 { font-size: 1em; font-weight: bold; margin: 1.12em 0; color: #1a365d; }
.d3view-wf-certification-builder .cert-preview-content h5,
.cert-pdf-render-container .cert-preview-content h5 { font-size: 0.83em; font-weight: bold; margin: 1.5em 0; color: #1a365d; }
.d3view-wf-certification-builder .cert-preview-content h6,
.cert-pdf-render-container .cert-preview-content h6 { font-size: 0.75em; font-weight: bold; margin: 1.67em 0; color: #1a365d; }

/** Added by shashank2104 on 2026-04-22 - DW-2866 - Reset heading metrics inside viz embeds so legend labels (h3.legends-label) aren't inflated by cert typography. **/
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h1,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h2,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h3,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h4,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h5,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-embed h6,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h1,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h2,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h3,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h4,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h5,
.d3view-wf-certification-builder .cert-preview-content .cert-viz-render h6,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h1,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h2,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h3,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h4,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h5,
.cert-pdf-render-container .cert-preview-content .cert-viz-embed h6,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h1,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h2,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h3,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h4,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h5,
.cert-pdf-render-container .cert-preview-content .cert-viz-render h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    color: inherit;
    line-height: inherit;
}

.d3view-wf-certification-builder .cert-preview-content p,
.cert-pdf-render-container .cert-preview-content p { margin: 0.5em 0; }

.d3view-wf-certification-builder .cert-preview-content strong,
.d3view-wf-certification-builder .cert-preview-content b,
.cert-pdf-render-container .cert-preview-content strong,
.cert-pdf-render-container .cert-preview-content b { font-weight: bold; }
.d3view-wf-certification-builder .cert-preview-content em,
.d3view-wf-certification-builder .cert-preview-content i,
.cert-pdf-render-container .cert-preview-content em,
.cert-pdf-render-container .cert-preview-content i { font-style: italic; }
.d3view-wf-certification-builder .cert-preview-content u,
.cert-pdf-render-container .cert-preview-content u { text-decoration: underline; }
.d3view-wf-certification-builder .cert-preview-content s,
.d3view-wf-certification-builder .cert-preview-content strike,
.cert-pdf-render-container .cert-preview-content s,
.cert-pdf-render-container .cert-preview-content strike { text-decoration: line-through; }

.d3view-wf-certification-builder .cert-preview-content table,
.cert-pdf-render-container .cert-preview-content table { border-collapse: collapse; }
.d3view-wf-certification-builder .cert-preview-content table th,
.cert-pdf-render-container .cert-preview-content table th { background: #f0f4f8; font-weight: 600; }
.d3view-wf-certification-builder .cert-preview-content table th,
.d3view-wf-certification-builder .cert-preview-content table td,
.cert-pdf-render-container .cert-preview-content table th,
.cert-pdf-render-container .cert-preview-content table td { border: 1px solid #e2e8f0; padding: 6px 8px; }

.d3view-wf-certification-builder .cert-preview-content hr,
.cert-pdf-render-container .cert-preview-content hr { border: none; border-top: 2px solid #e2e8f0; margin: 16px 0; }

/* Page break marker in preview (hidden — only used for pagination measurement) */
.d3view-wf-certification-builder .cert-page-break-marker {
    display: block;
    width: 100%;
    height: 0;
    border: none;
    margin: 0;
    padding: 0;
    page-break-after: always;
}

/* ═══════════════════════════════════════════════════════
   Page Setup — Header/Footer repeat checkboxes
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-ps-repeat-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.d3view-wf-certification-builder .cert-ps-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--d3v-text-primary, #1a202c);
    cursor: pointer;
}

.d3view-wf-certification-builder .cert-ps-checkbox-label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════
   DW-2834 #1 — Occupant Dummy Block
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-occupant-body {
    text-align: center;
    padding: 16px;
}

.d3view-wf-certification-builder .cert-occupant-svg-wrap {
    display: block;
    width: 220px;
    margin: 0 auto;
}

.d3view-wf-certification-builder .cert-occupant-svg {
    width: 100%;
    height: auto;
    max-height: 360px;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region] {
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region] {
    pointer-events: all;
    transition: fill 0.12s ease, fill-opacity 0.12s ease, stroke 0.12s ease, stroke-width 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-svg [data-region]:hover {
    stroke: #3b82f6;
    stroke-width: 5;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, .85));
    cursor: pointer;
}

/* Keep the count badges out of the hover hit-test so they never block the
   underlying path's hover/right-click. */
.d3view-wf-certification-builder .cert-occupant-svg .cert-occ-builder-badge {
    pointer-events: none;
}

/* Live label that updates as the user hovers different body parts */
.d3view-wf-certification-builder .cert-occupant-hover-label {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-accent-primary, #3b82f6);
    min-height: 16px;
    margin-top: 4px;
    transition: opacity 0.12s ease;
}
.d3view-wf-certification-builder .cert-occupant-hover-label:empty::before {
    content: 'Hover a body part to highlight';
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-occupant-empty-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    margin-top: 10px;
}

.d3view-wf-certification-builder .cert-occupant-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.d3view-wf-certification-builder .cert-occupant-region-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-pill, 999px);
    color: var(--d3v-text-primary, #0f172a);
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occupant-region-chip:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(15, 23, 42, .08));
}

.d3view-wf-certification-builder .cert-occupant-region-chip-arrow {
    margin: 0 4px;
    color: var(--d3v-text-muted, #94a3b8);
}

.d3view-wf-certification-builder .cert-occupant-region-chip-var {
    color: var(--d3v-text-secondary, #64748b);
}

.d3view-wf-certification-builder .cert-occupant-region-chip-targets {
    margin-left: 8px;
    padding: 1px 7px;
    background: var(--d3v-accent-primary-soft, #dbeafe);
    color: var(--d3v-accent-primary, #1d4ed8);
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 10px;
    font-weight: 600;
}

.d3view-wf-certification-builder .cert-occupant-legend {
    margin-top: 10px;
}

/* ── Sidebar mapping panel ── */
.d3view-wf-certification-builder .cert-occ-cancel-btn,
.d3view-wf-certification-builder .cert-occ-save-btn {
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: all var(--d3v-t-fast, 0.12s);
}

.d3view-wf-certification-builder .cert-occ-cancel-btn:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-wf-certification-builder .cert-occ-save-btn {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

.d3view-wf-certification-builder .cert-occ-save-btn:hover {
    opacity: 0.9;
}

.d3view-wf-certification-builder .cert-occ-topbar {
    padding: 0 8px 12px;
    border-bottom: 1px dashed var(--d3v-border, #e2e8f0);
    margin-bottom: 12px;
}

.d3view-wf-certification-builder .cert-occ-show-all-btn {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-show-all-btn:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occ-edit-targets {
    width: 100%;
    padding: 6px 10px;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-edit-targets:hover {
    background: var(--d3v-bg-primary, #fff);
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occ-target-add {
    margin-top: 6px;
    padding: 4px 10px;
    border: 1px dashed var(--d3v-border, #e2e8f0);
    background: transparent;
    color: var(--d3v-text-muted, #94a3b8);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-target-add:hover {
    border-style: solid;
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
}

.d3view-wf-certification-builder .cert-occupant-props-panel .cert-occ-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
}

.d3view-wf-certification-builder .cert-occ-row {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 8px 10px;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-row.focused {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px var(--d3v-accent-primary-soft, #dbeafe);
}

.d3view-wf-certification-builder .cert-occ-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.d3view-wf-certification-builder .cert-occ-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}

.d3view-wf-certification-builder .cert-occ-row-targets-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    background: var(--d3v-accent-primary-soft, #dbeafe);
    color: var(--d3v-accent-primary, #1d4ed8);
    border-radius: var(--d3v-r-pill, 999px);
}

.d3view-wf-certification-builder .cert-occ-row-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.d3view-wf-certification-builder .cert-occ-row-body .select2-container {
    width: 100% !important;
}

.d3view-wf-certification-builder .cert-occ-row-targets-editor {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--d3v-border, #e2e8f0);
}

.d3view-wf-certification-builder .cert-occ-target-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.d3view-wf-certification-builder .cert-occ-target-row input,
.d3view-wf-certification-builder .cert-occ-target-row select {
    height: 28px;
    padding: 2px 6px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
}

.d3view-wf-certification-builder .cert-occ-t-name { flex: 1.5; min-width: 0; }
.d3view-wf-certification-builder .cert-occ-t-op   { width: 56px; }
.d3view-wf-certification-builder .cert-occ-t-val,
.d3view-wf-certification-builder .cert-occ-t-val2 { width: 56px; }
.d3view-wf-certification-builder .cert-occ-t-color { width: 32px; padding: 0; }

.d3view-wf-certification-builder .cert-occ-t-remove {
    width: 24px;
    height: 28px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.12s ease;
}

.d3view-wf-certification-builder .cert-occ-t-remove:hover {
    background: var(--d3v-status-danger-soft, #fee2e2);
    color: var(--d3v-status-danger, #dc2626);
    border-color: var(--d3v-status-danger, #dc2626);
}

.d3view-wf-certification-builder .cert-occ-hint {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 14px 8px 0;
    padding: 8px 10px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: var(--d3v-r-sm, 4px);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════
   Print Support
   ═══════════════════════════════════════════════════════ */

@media print {
    .d3view-wf-certification-builder .cert-page-break-marker {
        page-break-after: always;
    }
    .d3view-wf-certification-builder .cert-preview-page {
        page-break-after: always;
        box-shadow: none;
        border: none;
    }
    .d3view-wf-certification-builder .cert-preview-page-gap {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════
   SIM-999 — Layouts sidebar tab
   ═══════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-layouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.d3view-wf-certification-builder .cert-layout-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,.04));
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-wf-certification-builder .cert-layout-card:hover {
    border-color: var(--d3v-accent, #2563EB);
    box-shadow: var(--d3v-sh-md, 0 2px 6px rgba(0,0,0,.08));
    transform: translateY(-1px);
}
.d3view-wf-certification-builder .cert-layout-card.active {
    border-color: var(--d3v-accent, #2563EB);
    background: var(--d3v-accent-soft, #EFF6FF);
}
.d3view-wf-certification-builder .cert-layout-card-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-muted, #F3F4F6);
    color: var(--d3v-accent, #2563EB);
    font-size: 14px;
    flex-shrink: 0;
}
.d3view-wf-certification-builder .cert-layout-card-meta {
    min-width: 0;
    flex: 1;
}
.d3view-wf-certification-builder .cert-layout-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.3;
}
.d3view-wf-certification-builder .cert-layout-card-desc {
    font-size: 11px;
    color: var(--d3v-text-muted, #6B7280);
    margin-top: 2px;
}
.d3view-wf-certification-builder .cert-layouts-divider {
    height: 1px;
    background: var(--d3v-border-subtle, #E5E7EB);
    margin: 8px 0;
}
.d3view-wf-certification-builder .cert-layouts-empty {
    padding: 16px;
    text-align: center;
    color: var(--d3v-text-muted, #6B7280);
    font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   DW-2854 — Injury Probability block
   ═══════════════════════════════════════════════════════════════════ */

.d3view-wf-certification-builder .cert-injury-body {
    padding: 16px;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-md, 6px);
    cursor: pointer;
    transition: background var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-body:hover {
    background: var(--d3v-bg-hover, #f0f4f8);
}

.d3view-wf-certification-builder .cert-injury-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-occupant-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    background: var(--d3v-bg-secondary, #f8fafc);
    padding: 2px 10px;
    border-radius: var(--d3v-r-sm, 4px);
}

/* R0-3468 — scope to div only; the preview shell uses a <table class="cert-injury-grid">
   (so rows stack as real table rows in PDF/output_html). Without this scope the grid
   display leaks onto the <table> and squishes the single-column stacked layout. */
.d3view-wf-certification-builder div.cert-injury-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
.d3view-wf-certification-builder div.cert-injury-grid.cert-injury-grid--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.d3view-wf-certification-builder .cert-injury-svg-wrap {
    text-align: center;
}
.d3view-wf-certification-builder .cert-injury-body .cert-occupant-svg {
    display: inline-block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.d3view-wf-certification-builder .cert-injury-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-table th,
.d3view-wf-certification-builder .cert-injury-table td {
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    padding: 5px 8px;
}
.d3view-wf-certification-builder .cert-injury-table th {
    background: var(--d3v-bg-secondary, #f8fafc);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--d3v-text-secondary, #4a5568);
    text-align: left;
}
.d3view-wf-certification-builder .cert-injury-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-secondary, #4a5568);
}
.d3view-wf-certification-builder .cert-injury-prob {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.d3view-wf-certification-builder .cert-injury-prob--empty {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
}
.d3view-wf-certification-builder .cert-injury-subtotal td {
    font-weight: 700;
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-wf-certification-builder .cert-injury-rr {
    margin-top: 18px;
    padding-bottom: 22px;
}
.d3view-wf-certification-builder .cert-injury-rr-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-rr-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-wf-certification-builder .cert-injury-rr-label {
    font-weight: 700;
    font-size: 14px;
    width: 28px;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-rr-bar {
    flex: 1;
    position: relative;
    height: 32px;
}
.d3view-wf-certification-builder .cert-injury-rr-bar-fill {
    position: absolute;
    inset: 0;
    display: grid;
    border-radius: var(--d3v-r-sm, 4px);
    overflow: hidden;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
}
.d3view-wf-certification-builder .cert-injury-rr-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
}
.d3view-wf-certification-builder .cert-injury-rr-marker {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--d3v-text-primary, #1a202c);
    transform: translateX(-50%);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    transition: left var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-rr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    display: grid;
    font-size: 10px;
    color: var(--d3v-text-secondary, #4a5568);
    font-variant-numeric: tabular-nums;
}

.d3view-wf-certification-builder .cert-injury-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}
.d3view-wf-certification-builder .cert-injury-metric-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    background: var(--d3v-accent-soft, #ebf4ff);
    color: var(--d3v-accent, #2b6cb0);
    border: 1px solid rgba(49, 130, 206, 0.3);
    cursor: pointer;
    transition: all var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-metric-chip:hover {
    background: var(--d3v-accent, #3182ce);
    color: #fff;
}
.d3view-wf-certification-builder .cert-injury-metric-chip-arrow {
    margin: 0 5px;
    color: var(--d3v-text-muted, #94a3b8);
}
.d3view-wf-certification-builder .cert-injury-metric-chip-var {
    font-weight: 500;
}

.d3view-wf-certification-builder .cert-injury-empty-hint {
    text-align: center;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border-strong, #cbd5e0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    font-style: italic;
}

/* Preview variant — rendered inline in blocks/TinyMCE preview.
   Mirrors .cert-injury-body sans padding (caller controls margin). */
.d3view-wf-certification-builder .cert-injury-preview {
    padding: 16px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
}
/* R0-3468 — the preview shell emits a <table class="cert-injury-grid"> so rows map to real
   table rows in PDF/output_html. Only divs with this class should render as CSS grid. */
.d3view-wf-certification-builder .cert-injury-preview div.cert-injury-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}
.d3view-wf-certification-builder .cert-injury-preview div.cert-injury-grid.cert-injury-grid--stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-occupant-svg {
    width: 180px;
    height: auto;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table th,
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table td {
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    padding: 5px 8px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-table th {
    background: var(--d3v-bg-secondary, #f8fafc);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--d3v-text-secondary, #4a5568);
    text-align: left;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-subtotal td {
    font-weight: 700;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-val {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-secondary, #4a5568);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-prob {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-prob--empty {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr {
    margin-top: 18px;
    padding-bottom: 22px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-bar {
    position: relative;
    height: 32px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-bar-fill {
    position: absolute;
    inset: 0;
    display: grid;
    border-radius: var(--d3v-r-sm, 4px);
    overflow: hidden;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-marker {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid var(--d3v-text-primary, #1a202c);
    transform: translateX(-50%);
}
.d3view-wf-certification-builder .cert-injury-preview .cert-injury-rr-ticks {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    display: grid;
    font-size: 10px;
    color: var(--d3v-text-secondary, #4a5568);
    font-variant-numeric: tabular-nums;
}

/* Palette icon color for injury block */
.d3view-wf-certification-builder .cert-palette-item .injury-icon {
    background: linear-gradient(135deg, #f97316, #ef4444);
}

/* Properties sidebar — Injury Metrics panel */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #4a5568);
    margin: 0;
    flex: 1;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-occupant-row select {
    width: 140px;
    height: 28px;
    border: 1px solid var(--d3v-border-strong, #cbd5e0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 0 8px;
    font-size: 12px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section {
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    padding: 14px 16px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section:last-child {
    border-bottom: none;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 10px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background var(--d3v-t-fast, 150ms);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row:last-child {
    margin-bottom: 0;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row.focused {
    background: var(--d3v-accent-soft, #ebf4ff);
    outline: 1px solid var(--d3v-accent, #3182ce);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-head {
    margin-bottom: 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1a202c);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row-unit {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
    margin-left: 4px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 0;
    white-space: nowrap;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override-input {
    flex: 1;
    height: 26px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 0 8px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-override-input:focus {
    outline: none;
    border-color: var(--d3v-accent, #3182ce);
    box-shadow: 0 0 0 2px var(--d3v-accent-soft, #ebf4ff);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-hint {
    margin: 14px 16px;
    padding: 10px 12px;
    background: var(--d3v-accent-soft, #ebf4ff);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    color: var(--d3v-text-secondary, #4a5568);
    line-height: 1.5;
}

/* R0-3468 #4 — dataset picker + column picker (independent from the worker-scalar dropdown above) */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-ds-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--d3v-border, #e2e8f0);
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-ds-or {
    display: block;
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-column-wrap {
    margin-top: 6px;
}

/* R0-3468 #3 — combined rows (Femur/Neck Combined) render derivation + manual override */
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-row--combined {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px dashed var(--d3v-border, #e2e8f0);
    margin-top: 10px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-combined-formula {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
    margin: 4px 0 6px;
}
.d3view-wf-certification-builder .cert-injury-props-panel .cert-inj-combined-formula code {
    background: transparent;
    padding: 0;
    color: var(--d3v-text-secondary, #4a5568);
    font-family: var(--d3v-font-mono, SFMono-Regular, Consolas, monospace);
    font-size: 10px;
}

/* ───────────────────────────────────────────────────────────────
   R0-3464 — Block Builder floating format toolbar
   Shown above the currently-focused contenteditable inside a
   block to provide bullet list, numbered list, and indentation
   controls (parity with the TinyMCE editor mode).
   Scoped to the block builder container so it never leaks.
   ─────────────────────────────────────────────────────────────── */
.d3view-wf-certification-builder .cert-block-builder {
    position: relative;
}

.d3view-wf-certification-builder .cert-block-format-toolbar {
    position: absolute;
    z-index: 20;
    display: none;
    gap: 2px;
    padding: 4px;
    background: var(--d3v-bg-primary, #ffffff) !important;
    border: 1px solid var(--d3v-border, #e2e8f0) !important;
    border-radius: var(--d3v-r-md, 6px) !important;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.12));
    transition: opacity var(--d3v-t-fast, 0.15s) ease;
    pointer-events: auto;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--d3v-r-sm, 4px) !important;
    padding: 4px 8px !important;
    width: auto !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--d3v-text-secondary, #475569) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background var(--d3v-t-fast, 0.15s) ease,
                color var(--d3v-t-fast, 0.15s) ease,
                border-color var(--d3v-t-fast, 0.15s) ease;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn:hover {
    background: var(--d3v-bg-hover, #f1f5f9) !important;
    color: var(--d3v-text-primary, #0f172a) !important;
    border-color: var(--d3v-border, #e2e8f0) !important;
}

.d3view-wf-certification-builder .cert-block-format-toolbar button.cert-block-format-btn:active {
    background: var(--d3v-bg-active, #e2e8f0) !important;
}

/* ───────────────────────────────────────────────────────────────
   R0-3464 — List markers inside contenteditable block bodies
   Required because the Block Builder injects raw `<ul>`/`<ol>`
   via document.execCommand on a contenteditable. Without these
   rules the global Bootstrap/workflow resets swallow the markers.
   Mirrors .cert-preview-content in CertificationRenderer.js so
   the live editor matches preview + PDF.

   Updated 2026-05-06 — scoped to rich-text block types only
   (heading/text/header/footer/list). Previously the broad
   `.cert-block-body ul, ol` selectors leaked into <ul>/<ol>
   markup rendered by embedded charts/legends inside viz,
   occupant, injury and other widget blocks.
   ─────────────────────────────────────────────────────────────── */
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ol {
    padding-left: 40px;
    margin: 0.5em 0;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul {
    list-style: disc outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ol,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ol {
    list-style: decimal outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul ul {
    list-style: circle outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body ul ul ul,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body ul ul ul {
    list-style: square outside;
}
.d3view-wf-certification-builder .cert-block[data-type="heading"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="text"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="header"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="footer"] .cert-block-body li,
.d3view-wf-certification-builder .cert-block[data-type="list"] .cert-block-body li {
    display: list-item;
    margin: 2px 0;
}

/* DW-2806 - Updated by shashank2104 on 2026-03-30 - Table layout for entity cleanup */
/* Scoped under .workflow-navigation-container.cleanup-entities */

.workflow-navigation-container.cleanup-entities {
    --wf-ce-bg: var(--d3v-bg-primary);
    --wf-ce-bg2: var(--d3v-bg-secondary);
    --wf-ce-bg3: var(--d3v-bg-tertiary);
    --wf-ce-hover: var(--d3v-bg-hover);
    --wf-ce-border: var(--d3v-border);
    --wf-ce-text: var(--d3v-text-primary);
    --wf-ce-text2: var(--d3v-text-secondary);
    --wf-ce-muted: var(--d3v-text-muted);
    --wf-ce-accent: var(--d3v-accent);
    --wf-ce-r: var(--d3v-r-md);
    --wf-ce-sh: var(--d3v-sh-sm);
    --wf-ce-t: var(--d3v-t-fast);
}

/* Hide header in cleanup mode — table header has select-all */
.workflow-navigation-container.cleanup-entities .workers-list-header {
    display: none !important;
}

/* ── TABLE (uses Bootstrap table table-hover — minimal overrides) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-table {
    font-size: 12px;
    margin-bottom: 0;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table > thead > tr > th {
    background: var(--wf-ce-bg2);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--wf-ce-text2);
    border-bottom-width: 2px;
    vertical-align: middle;
}
.workflow-navigation-container.cleanup-entities .wf-ce-table > tbody > tr > td {
    vertical-align: middle;
    color: var(--wf-ce-text);
}

/* Column widths */
.workflow-navigation-container.cleanup-entities .wf-ce-col-cb {
    width: 36px;
    text-align: center;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-worker {
    width: 35%;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-entity {
    width: 90px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-col-actions {
    width: 70px;
    text-align: center;
}

/* Worker cell */
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-worker-type {
    word-break: break-all;
    white-space: normal;
    line-height: 1.3;
    display: inline !important;
    overflow-wrap: anywhere;
}
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-ce-wname {
    font-weight: 500;
    font-size: 12px;
    color: var(--wf-ce-text);
    line-height: 1.35;
    word-break: break-word;
}
/* Worker ID label — inline muted */
.workflow-navigation-container.cleanup-entities .wf-ce-worker-cell .wf-id-label {
    align-self: flex-start;
    font-size: 9px;
    padding: 1px 5px;
    margin-top: 2px;
}

/* Value cell */
.workflow-navigation-container.cleanup-entities .wf-ce-value-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    word-break: break-all;
}

/* Empty value placeholder */
.workflow-navigation-container.cleanup-entities .wf-ce-empty-value {
    font-size: 11px;
    font-style: italic;
    color: var(--wf-ce-muted);
}

/* Actions cell */
.workflow-navigation-container.cleanup-entities .wf-ce-actions-cell {
    white-space: nowrap;
    text-align: center;
}
.workflow-navigation-container.cleanup-entities .wf-ce-actions-cell .btn {
    padding: 4px 8px;
}

/* ID chips */
.workflow-navigation-container.cleanup-entities .wf-ce-id-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: var(--d3v-r-md);
    background: var(--wf-ce-bg3);
    border: 1px solid var(--wf-ce-border);
    font-size: 12px;
    font-family: monospace;
    color: var(--wf-ce-text);
    cursor: pointer;
    transition: all var(--wf-ce-t);
    word-break: break-all;
    max-width: 100%;
}
.workflow-navigation-container.cleanup-entities .wf-ce-id-chip:hover {
    border-color: var(--wf-ce-accent);
    color: var(--wf-ce-accent);
}

/* Nested entity block */
.workflow-navigation-container.cleanup-entities .wf-ce-nested-block {
    width: 100%;
    margin-top: 4px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--wf-ce-accent);
    cursor: pointer;
    padding: 2px 0;
    transition: opacity var(--wf-ce-t);
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle:hover {
    opacity: 0.8;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-toggle strong {
    font-weight: 700;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-arrow {
    font-size: 10px;
    margin-left: 2px;
    transition: transform 0.2s;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table {
    font-size: 11px;
    margin-top: 6px;
    margin-bottom: 0;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table > thead > tr > th {
    font-size: 10px;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--wf-ce-muted);
    font-weight: 600;
}
.workflow-navigation-container.cleanup-entities .wf-ce-nested-table > tbody > tr > td {
    padding: 4px 8px;
}
.workflow-navigation-container.cleanup-entities tbody > tr > td i.app-icon {
    width: 24px;
    height: 24px;
}
/* Duplicate markers */
.workflow-navigation-container.cleanup-entities .wf-ce-dup-chip {
    text-decoration: line-through;
    opacity: 0.4;
}
.workflow-navigation-container.cleanup-entities .wf-ce-dup-note {
    font-size: 10px;
    color: var(--wf-ce-muted);
    font-style: italic;
}

/* ── FILTER ROW (pl-inline-filters) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-filter-row {
    flex-shrink: 0;
}

/* ── STATS ROW (pills only) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-stats-row {
    padding: 2px 12px 6px;
    flex-shrink: 0;
}

/* Entity type pills — small, subtle metadata */
.workflow-navigation-container.cleanup-entities .wf-ce-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full);
    background: transparent;
    font-size: 10px;
    color: var(--wf-ce-muted);
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill i {
    font-size: 10px;
    opacity: 0.5;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill i.app-icon {
    width: 24px;
    height: 24px;
}
.workflow-navigation-container.cleanup-entities .wf-ce-type-pill strong {
    color: var(--wf-ce-text2);
    font-weight: 600;
}

/* Deletion order (in footer) */
.workflow-navigation-container.cleanup-entities .wf-ce-order-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--wf-ce-muted);
    white-space: nowrap;
}

/* ── FOOTER (Delete + Cancel) ── */
.workflow-navigation-container.cleanup-entities .wf-ce-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--wf-ce-border);
    background: var(--wf-ce-bg);
    flex-shrink: 0;
}

/* Delete button */
.workflow-navigation-container.cleanup-entities .wf-ce-delete-selected-btn {
    transition: all var(--wf-ce-t);
}

/* Checkbox styling */
.workflow-navigation-container.cleanup-entities input[type="checkbox"] {
    cursor: pointer;
}

/** DW-3133 - Grid / Position layout modal. Scoped under .wf-grid-position. **/

.wf-grid-position {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.wf-grid-position .gp-intro {
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    padding: 10px 14px;
    line-height: 1.55;
    color: var(--d3v-text-secondary);
}

.wf-grid-position .gp-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: 320px;
}

/* Vertical tabs */
.wf-grid-position .gp-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 176px;
    border-right: 1px solid var(--d3v-border-subtle);
    padding-right: 12px;
}

.wf-grid-position .gp-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--d3v-r-md);
    background: transparent;
    color: var(--d3v-text-secondary);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}

.wf-grid-position .gp-tab i {
    width: 16px;
    text-align: center;
    color: var(--d3v-text-tertiary);
    transition: var(--d3v-t-fast, all .15s ease);
}

.wf-grid-position .gp-tab:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

.wf-grid-position .gp-tab.active {
    background: var(--d3v-accent-soft, var(--d3v-bg-hover));
    border-color: var(--d3v-accent-border, var(--d3v-border-strong));
    color: var(--d3v-accent, var(--d3v-text-primary));
    box-shadow: var(--d3v-sh-sm);
}

.wf-grid-position .gp-tab.active i {
    color: var(--d3v-accent, var(--d3v-text-primary));
}

/* Panes */
.wf-grid-position .gp-panes {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
}

.wf-grid-position .gp-pane {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.wf-grid-position .gp-pane.active {
    display: flex;
}

.wf-grid-position .gp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-grid-position .gp-label {
    font-weight: 600;
    color: var(--d3v-text-primary);
    margin: 0;
}

.wf-grid-position .gp-val {
    display: inline-block;
    min-width: 34px;
    padding: 1px 8px;
    border-radius: var(--d3v-r-sm);
    background: var(--d3v-accent-soft, var(--d3v-bg-secondary));
    color: var(--d3v-accent, var(--d3v-text-primary));
    font-family: var(--d3v-font-mono, monospace);
    font-weight: 700;
    text-align: center;
}

.wf-grid-position .gp-unit {
    color: var(--d3v-text-tertiary);
    font-weight: 500;
}

.wf-grid-position .gp-hint {
    color: var(--d3v-text-tertiary);
    font-size: 12px;
    line-height: 1.45;
}

/* Range sliders */
.wf-grid-position .gp-range {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--d3v-border-strong, var(--d3v-border-subtle));
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.wf-grid-position .gp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--d3v-accent, #4f7cff);
    border: 2px solid var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-sm);
    cursor: pointer;
}

.wf-grid-position .gp-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--d3v-accent, #4f7cff);
    border: 2px solid var(--d3v-bg-primary);
    cursor: pointer;
}

/* Radio / check cards */
.wf-grid-position .gp-strategy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-grid-position .gp-radio,
.wf-grid-position .gp-check {
    display: flex!important;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    cursor: pointer;
    font-weight: 400;
    transition: var(--d3v-t-fast, all .15s ease);
}

.wf-grid-position .gp-radio:hover,
.wf-grid-position .gp-check:hover {
    border-color: var(--d3v-border-strong);
    background: var(--d3v-bg-hover);
}

.wf-grid-position .gp-radio input,
.wf-grid-position .gp-check input {
    margin: 2px 0 0 0;
    accent-color: var(--d3v-accent, #4f7cff);
    cursor: pointer;
}

.wf-grid-position .gp-radio-body,
.wf-grid-position .gp-check-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-grid-position .gp-radio-body b,
.wf-grid-position .gp-check-body b {
    color: var(--d3v-text-primary);
    font-weight: 600;
}

.wf-grid-position .gp-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--d3v-accent-soft, var(--d3v-bg-secondary));
    color: var(--d3v-accent, var(--d3v-text-secondary));
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.wf-grid-position .gp-radio-body small,
.wf-grid-position .gp-check-body small {
    color: var(--d3v-text-tertiary);
    line-height: 1.45;
}

.wf-grid-position .gp-radio.gp-disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--d3v-bg-secondary);
}

.wf-grid-position .gp-radio-body em {
    color: var(--d3v-status-warning, #d08a1f);
    font-style: normal;
    font-weight: 600;
}

/* Selected radio/check highlight */
.wf-grid-position .gp-radio:has(input:checked),
.wf-grid-position .gp-check:has(input:checked) {
    border-color: var(--d3v-accent-border, var(--d3v-accent, #4f7cff));
    background: var(--d3v-accent-soft, var(--d3v-bg-hover));
    box-shadow: var(--d3v-sh-sm);
}

.wf-grid-position .gp-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-secondary);
    line-height: 1.5;
}

.wf-grid-position .gp-note i {
    margin-top: 2px;
    color: var(--d3v-accent, var(--d3v-text-tertiary));
}

/* Actions - relocated into the modal's own footer (scoped under the modal customClass,
   not the plugin root, since the modal is body-mounted). */
.wf-grid-position-modal .modal-footer.gp-modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-grid-position-modal .modal-footer.gp-modal-footer .gp-reset {
    margin-right: auto;
}

.wf-grid-position-modal .modal-footer.gp-modal-footer .fa {
    margin-right: 4px;
}

/** Added by shashank2104 on 2026-03-27 - DW-2761 - Worker Comparer **/

/* ── Scoped tokens ──────────────────────────────────────────────────── */
.wf-worker-comparer {
    --wc-bg: var(--d3v-bg-primary, #fff);
    --wc-bg2: var(--d3v-bg-secondary, #f8f9fa);
    --wc-border: var(--d3v-border, #e0e0e0);
    --wc-text: var(--d3v-text-primary, #212121);
    --wc-text2: var(--d3v-text-secondary, #546e7a);
    --wc-muted: var(--d3v-text-muted, #90a4ae);
    --wc-accent: var(--d3v-accent, #4285f4);
    --wc-r: var(--d3v-r-md, 6px);
    --wc-sh: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    --wc-t: var(--d3v-t-fast, 0.15s ease);
    background: var(--wc-bg);
}

/* ── Status bar ─────────────────────────────────────────────────────── */
.wf-worker-comparer .wc-status-bar {
    padding: 8px 14px;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg2);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-status-text {
    font-size: 12px;
    color: var(--wc-text2);
    font-weight: 500;
}

/* ── Worker nav (outer carousel) ────────────────────────────────────── */
.wf-worker-comparer .wc-worker-nav {
    padding: 10px 14px;
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
    background: var(--wc-bg);
}

.wf-worker-comparer .wc-worker-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-text);
    text-align: center;
}

/* ── Content split ──────────────────────────────────────────────────── */
.wf-worker-comparer .wc-content {
    overflow: hidden;
}

.wf-worker-comparer .wc-inputs-pane,
.wf-worker-comparer .wc-outputs-pane {
    overflow: hidden;
}

.wf-worker-comparer .wc-pane-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--wc-text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--wc-border);
    background: var(--wc-bg2);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-divider {
    width: 1px;
    background: var(--wc-border);
    flex-shrink: 0;
}

/* ── I/O nav (inner carousel) ───────────────────────────────────────── */
.wf-worker-comparer .wc-io-nav {
    padding: 6px 10px;
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
    background: var(--wc-bg);
}

.wf-worker-comparer .wc-input-label,
.wf-worker-comparer .wc-output-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--wc-text);
    text-align: center;
}

/* ── I/O body — take full remaining height ─────────────────────────── */
.wf-worker-comparer .wc-io-body {
    padding: 0;
    min-height: 0;
}

/* ── Compare item — full height ────────────────────────────────────── */
.wf-worker-comparer .wc-compare-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wf-worker-comparer .wc-compare-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--wc-bg2);
    border-bottom: 1px solid var(--wc-border);
    flex-shrink: 0;
}

.wf-worker-comparer .wc-io-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wc-text);
}

.wf-worker-comparer .wc-io-type-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--wc-bg);
    border: 1px solid var(--wc-border);
    color: var(--wc-text2);
    font-weight: 500;
}

/* ── Viz container — takes full remaining height ───────────────────── */
.wf-worker-comparer .wc-viz-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ── Match status badges ────────────────────────────────────────────── */
.wf-worker-comparer .wc-match-status {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    margin-left: auto;
}

.wf-worker-comparer .wc-status-compared {
    background: var(--d3v-status-success-bg, rgba(40,167,69,0.1));
    color: var(--d3v-status-success, #28a745);
    border: 1px solid var(--d3v-status-success, #28a745);
}

.wf-worker-comparer .wc-status-missing {
    background: var(--d3v-status-warning-bg, rgba(255,193,7,0.12));
    color: var(--d3v-status-warning, #e0a800);
    border: 1px solid var(--d3v-status-warning, #e0a800);
}

/* ── Empty / not found states ───────────────────────────────────────── */
.wf-worker-comparer .wc-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--wc-muted);
    font-size: 12px;
}

/** Added by shashank2104 on 2026-03-27 - DW-2761 - Worker Inventory rework **/

/* ── Scoped tokens ──────────────────────────────────────────────────── */
.wf-worker-inventory {
    --wi-bg: var(--d3v-bg-primary, #fff);
    --wi-bg2: var(--d3v-bg-secondary, #f8f9fa);
    --wi-border: var(--d3v-border, #e0e0e0);
    --wi-text: var(--d3v-text-primary, #212121);
    --wi-text2: var(--d3v-text-secondary, #546e7a);
    --wi-muted: var(--d3v-text-muted, #90a4ae);
    --wi-accent: var(--d3v-accent, #4285f4);
    --wi-r: var(--d3v-r-md, 6px);
    --wi-r-sm: var(--d3v-r-sm, 4px);
    --wi-sh: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    --wi-sh-md: var(--d3v-sh-md, 0 2px 8px rgba(0,0,0,0.12));
    --wi-t: var(--d3v-t-fast, 0.15s ease);
    background: var(--wi-bg);
}

/* ── Grouped table ──────────────────────────────────────────────────── */
.wf-worker-inventory .wi-grouped-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow: auto;
}

/* ── Table header row ───────────────────────────────────────────────── */
.wf-worker-inventory .wi-table-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wi-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--wi-border);
}

.wf-worker-inventory .wi-table-header .wi-th-type {
    flex: 1;
}

.wf-worker-inventory .wi-table-header .wi-th-count {
    flex: 0 0 80px;
    text-align: right;
}

/* Type row (collapsed) */
.wf-worker-inventory .wi-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--wi-bg);
    border: 1px solid var(--wi-border);
    border-radius: var(--wi-r);
    cursor: pointer;
    transition: box-shadow var(--wi-t), background var(--wi-t);
    user-select: none;
}

.wf-worker-inventory .wi-type-row:hover {
    box-shadow: var(--wi-sh);
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-row.expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-row .wi-type-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wf-worker-inventory .wi-type-row .wi-type-chevron {
    font-size: 10px;
    color: var(--wi-muted);
    transition: transform var(--wi-t);
    width: 14px;
    text-align: center;
}

.wf-worker-inventory .wi-type-row.expanded .wi-type-chevron {
    transform: rotate(90deg);
}

.wf-worker-inventory .wi-type-row .wi-type-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--wi-text2);
    flex-shrink: 0;
    min-width: 80px;
    text-align: right;
}

/* Expanded cards container */
.wf-worker-inventory .wi-type-cards {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--wi-border);
    border-top: none;
    border-bottom-left-radius: var(--wi-r);
    border-bottom-right-radius: var(--wi-r);
    background: var(--wi-bg2);
}

.wf-worker-inventory .wi-type-cards.visible {
    display: flex;
}

/* ── Worker card ────────────────────────────────────────────────────── */
.wf-worker-inventory .wi-worker-card {
    background: var(--wi-bg);
    border: 1px solid var(--wi-border);
    border-radius: var(--wi-r);
    padding: 10px 14px;
    transition: box-shadow var(--wi-t), border-color var(--wi-t);
    cursor: pointer;
    position: relative;
}

.wf-worker-inventory .wi-worker-card:hover {
    box-shadow: var(--wi-sh);
}

.wf-worker-inventory .wi-worker-card.ui-selected,
.wf-worker-inventory .wi-worker-card.selected {
    border-color: var(--wi-accent);
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15);
    background: rgba(66, 133, 244, 0.03);
}

.wf-worker-inventory .wi-card-hdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wf-worker-inventory .wi-card-info {
    flex: 1;
    min-width: 0;
}

.wf-worker-inventory .wi-worker-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-worker-inventory .wi-worker-desc {
    font-size: 11px;
    color: var(--wi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.wf-worker-inventory .wi-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.wf-worker-inventory .wi-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--wi-border);
}

.wf-worker-inventory .wi-io-count {
    font-size: 11px;
    color: var(--wi-text2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.wf-worker-inventory .wi-io-count .fa {
    font-size: 10px;
    color: var(--wi-muted);
}

/* ── Navigated highlight ────────────────────────────────────────────── */
.wf-worker-inventory .wi-navigated {
    background: rgba(66, 133, 244, 0.06);
    border-color: var(--wi-accent);
}

/* ── Empty state ────────────────────────────────────────────────────── */
.wf-worker-inventory .wi-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--wi-muted);
}

.wf-worker-inventory .wi-empty-state .fa {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
    color: var(--wi-border);
}

/* ── Floating actions bar (same pattern as IncludeStructureView) ───── */
.wf-worker-inventory .wi-floating-actions-bar {
    position: absolute;
    top: 10px;
    width: calc(100% - 30px);
    z-index: 100;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 11px 15px;
    margin: 0 0 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: wi-fab-slide-down 0.2s ease-out;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

@keyframes wi-fab-slide-down {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── jQuery UI selectable lasso ───────────────────────────────────── */
.wf-worker-inventory .ui-selecting {
    background: rgba(66, 133, 244, 0.06);
}

/*
 * Special CSS rules not matched to specific templates
 * Category: view
 * Auto-generated by modularize_css.py
 */

.tree-view .tv-content span.ti-name {
text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wf-iterations-viewer .generic-input-template .gi-main-container {
border: none;
}

.d3view-wf-custom-editor .tree-view [data-isleaf="true"] .tv-content {
padding: 0;
}

.d3view-wf-custom-editor .tree-view .tv-content .worker-io-item {
pointer-events: all !important;
    padding: 5px 10px;
}

.tree-view .tv-content span.ti-name {
text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wf-iterations-viewer .generic-input-template .gi-main-container {
border: none;
}

.d3view-wf-custom-editor .tree-view .tv-content .worker-io-item {
pointer-events: all !important;
}


/**
 * Execution Progress View CSS
 * Added by shashank2104 on 01/15/2026 - DVFIV-1890
 * Purpose: Styles for the ExecutionProgressView used for embedded workflow execution progress display
 */

/* Main view container */
div.workflow .execution-progress-view-container .wf-execution-progress-view {
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow .execution-progress-view-container .wf-execution-progress-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
}

/* Header section */
div.workflow .execution-progress-view-container .wf-execution-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

div.workflow .execution-progress-view-container .wf-execution-progress-title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

div.workflow .execution-progress-view-container .wf-execution-progress-title i {
    color: #667eea;
}

/* Body section */
div.workflow .execution-progress-view-container .wf-execution-progress-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Steps indicator */
div.workflow .execution-progress-view-container .wf-execution-progress-steps-container {
    margin-bottom: 25px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 100px;
    padding: 0 10px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-line {
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e5e5e5;
    z-index: 0;
    transition: background 0.3s ease;
}

/* Completed step line - Added by shashank2104 on 01/15/2026 - DVFIV-1890 */
div.workflow .execution-progress-view-container .wf-execution-progress-step-line.completed {
    background: #5cb85c;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e5e5;
    color: #999;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon i {
    font-size: 14px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.pending {
    background: #e5e5e5;
    color: #999;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.active {
    background: #667eea;
    color: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.completed {
    background: #5cb85c;
    color: white;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-icon.error {
    background: #d9534f;
    color: white;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-text {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    text-align: center;
    max-width: 100px;
}

/* Progress bar section */
div.workflow .execution-progress-view-container .wf-execution-progress-status {
    margin-bottom: 20px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

div.workflow .execution-progress-view-container .wf-execution-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 4px;
    transition: width 0.3s ease;
}

div.workflow .execution-progress-view-container .wf-execution-progress-percent {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    min-width: 45px;
    text-align: right;
}

div.workflow .execution-progress-view-container .wf-execution-progress-step-label {
    text-align: center;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* Log section */
div.workflow .execution-progress-view-container .wf-execution-progress-log-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    min-height: 150px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log-header i {
    margin-right: 5px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    background: #fafafa;
}

div.workflow .execution-progress-view-container .wf-execution-log-entry {
    margin-bottom: 3px;
    padding: 2px 0;
}

/* Actions section */
div.workflow .execution-progress-view-container .wf-execution-progress-actions {
    padding-top: 15px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    margin-top: 15px;
}

div.workflow .execution-progress-view-container .wf-execution-progress-cancel {
    min-width: 150px;
}

/**
 * View switching styles - similar to agentic view pattern
 * When data-view="execution_progress", hide full-view and show execution-progress-view-container
 */

/* Hide full-view when execution_progress view is active */
div.workflow .workflow-index[data-view="execution_progress"] .full-view {
    display: none !important;
}

/* Show execution-progress-view-container when execution_progress view is active */
div.workflow .workflow-index[data-view="execution_progress"] .execution-progress-view-container {
    display: block !important;
    position: relative;
    height: 100%;
    width: 100%;
}

/* Modal workflow support */
div.workflow-modal .workflow-index[data-view="execution_progress"] .full-view {
    display: none !important;
}

div.workflow-modal .workflow-index[data-view="execution_progress"] .execution-progress-view-container {
    display: block !important;
    position: relative;
    height: 100%;
    width: 100%;
}
div.workflow .workflow-index[data-view="execution_progress"] .wf-main-content {
    display: none !important;
}

/* Default state: hide execution-progress-view-container when not in execution_progress view */
.execution-progress-view-container {
    display: none;
}

/** Added by shashank2104 on 2026-04-22 - DW-2868 - Modal styling for the AI-workflow load validation report. **/

.wf-load-validation-modal .modal-body {
    padding: 0;
    background: var(--d3v-bg-secondary, #f5f6f7);
}

.wf-load-validation {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 13px;
    color: var(--d3v-text-primary, #23272e);
}

/* ============ Header ============ */

.wf-load-validation .wf-val-header {
    padding: 20px 24px 18px;
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e7e9ec);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
}

.wf-load-validation .wf-val-header-main {
    display: flex;
    gap: 16px;
    align-items: center;
}

.wf-load-validation .wf-val-badge {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--d3v-r-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
}

.wf-load-validation .wf-val-badge.danger {
    background: linear-gradient(135deg, var(--d3v-status-danger, #d9534f), #b52b2b);
}

.wf-load-validation .wf-val-badge.warning {
    background: linear-gradient(135deg, var(--d3v-status-warning, #f0ad4e), #d98d21);
}

.wf-load-validation .wf-val-header-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.wf-load-validation .wf-val-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-subtitle {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--d3v-text-secondary, #60666d);
}

.wf-load-validation .wf-val-subtitle code {
    background: var(--d3v-bg-tertiary, #eef0f3);
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-header-meta {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--d3v-bg-secondary, #f5f6f7);
    border-left: 3px solid var(--d3v-accent-primary, #326ece);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-secondary, #60666d);
    line-height: 1.5;
}

/* ============ Groups (Blockers / Auto-fix / Warnings) ============ */

.wf-load-validation .wf-val-groups {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wf-load-validation .wf-val-group {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e7e9ec);
    border-radius: var(--d3v-r-md, 10px);
    overflow: hidden;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
    transition: box-shadow var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-group:hover {
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(0,0,0,0.08));
}

.wf-load-validation .wf-val-group.tone-danger {
    border-top: 3px solid var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-group.tone-warning {
    border-top: 3px solid var(--d3v-status-warning, #f0ad4e);
}

.wf-load-validation .wf-val-group.tone-info {
    border-top: 3px solid var(--d3v-accent-primary, #326ece);
}

.wf-load-validation .wf-val-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 13px;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-group-icon { color: var(--d3v-status-danger, #d9534f); }
.wf-load-validation .wf-val-group.tone-warning .wf-val-group-icon { color: var(--d3v-status-warning, #f0ad4e); }
.wf-load-validation .wf-val-group.tone-info .wf-val-group-icon { color: var(--d3v-accent-primary, #326ece); }

.wf-load-validation .wf-val-group-label {
    flex: 1 1 auto;
    color: var(--d3v-text-primary, #23272e);
    font-weight: 600;
}

.wf-load-validation .wf-val-group-count {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-text-secondary, #60666d);
    font-size: 11px;
    font-weight: 600;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-group-count {
    background: rgba(217, 83, 79, 0.12);
    color: var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-group.tone-warning .wf-val-group-count {
    background: rgba(240, 173, 78, 0.15);
    color: #b7791f;
}

.wf-load-validation .wf-val-group-chevron {
    color: var(--d3v-text-tertiary, #8b9199);
    font-size: 11px;
    transition: transform var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-group.collapsed .wf-val-group-chevron {
    transform: rotate(-90deg);
}

.wf-load-validation .wf-val-group.collapsed .wf-val-group-actions,
.wf-load-validation .wf-val-group.collapsed .wf-val-issue-list {
    display: none;
}

.wf-load-validation .wf-val-group-actions {
    padding: 4px 16px 0;
    font-size: 11.5px;
}

.wf-load-validation .wf-val-group-actions .btn-link {
    padding: 0;
    font-size: 11.5px;
    color: var(--d3v-accent-primary, #326ece);
}

.wf-load-validation .wf-val-group-actions .sep {
    color: var(--d3v-border-subtle, #e7e9ec);
    margin: 0 4px;
}

/* ============ Individual issue rows ============ */

.wf-load-validation .wf-val-issue-list {
    list-style: none;
    padding: 4px 0 12px;
    margin: 0;
    overflow: auto;
    max-height: 250px;
}

.wf-load-validation .wf-val-issue {
    padding: 10px 16px;
    border-top: 1px solid var(--d3v-border-subtle-lighter, #f0f2f4);
    transition: background var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-issue:hover {
    background: var(--d3v-bg-secondary, #f5f6f7);
}

.wf-load-validation .wf-val-issue-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wf-load-validation .wf-val-issue-check {
    flex: 0 0 auto;
    margin: 2px 0 0;
    cursor: pointer;
}

.wf-load-validation .wf-val-issue-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--d3v-accent-primary, #326ece);
    cursor: pointer;
}

.wf-load-validation .wf-val-issue-bullet {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    margin-top: 3px;
    font-size: 12px;
}

.wf-load-validation .wf-val-group.tone-danger .wf-val-issue-bullet { color: var(--d3v-status-danger, #d9534f); }
.wf-load-validation .wf-val-group.tone-info .wf-val-issue-bullet { color: var(--d3v-accent-primary, #326ece); }

.wf-load-validation .wf-val-issue-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wf-load-validation .wf-val-issue-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary, #23272e);
    line-height: 1.4;
}

.wf-load-validation .wf-val-issue-title code,
.wf-load-validation .wf-val-issue-detail code {
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-accent-primary, #326ece);
    padding: 1px 5px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}

.wf-load-validation .wf-val-issue-detail {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #60666d);
}

.wf-load-validation .wf-val-issue-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-load-validation .wf-val-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d3v-bg-tertiary, #eef0f3);
    color: var(--d3v-text-secondary, #60666d);
    font-size: 11px;
    font-weight: 500;
}

.wf-load-validation .wf-val-chip code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: 11px;
}

.wf-load-validation .wf-val-chip-expected {
    background: rgba(50, 152, 74, 0.12);
    color: #1f7a3a;
}

.wf-load-validation .wf-val-chip-actual {
    background: rgba(217, 83, 79, 0.12);
    color: var(--d3v-status-danger, #d9534f);
}

.wf-load-validation .wf-val-issue-fix {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(50, 110, 206, 0.08);
    border-left: 3px solid var(--d3v-accent-primary, #326ece);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    color: var(--d3v-text-primary, #23272e);
}

.wf-load-validation .wf-val-issue-fix .fa-magic {
    color: var(--d3v-accent-primary, #326ece);
    margin-right: 4px;
}

/* ============ Footer ============ */

.wf-load-validation .wf-val-footer {
    flex: 0 0 auto;
    padding: 14px 24px;
    background: var(--d3v-bg-primary, #fff);
    border-top: 1px solid var(--d3v-border-subtle, #e7e9ec);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.wf-load-validation .wf-val-footer .btn {
    font-size: 13px;
    padding: 7px 16px;
    border-radius: var(--d3v-r-md, 8px);
    font-weight: 500;
    transition: all var(--d3v-t-fast, 160ms) ease;
}

.wf-load-validation .wf-val-footer .btn-primary {
    background: linear-gradient(135deg, var(--d3v-accent-primary, #326ece), #2658b3);
    border-color: transparent;
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(50,110,206,0.25));
}

.wf-load-validation .wf-val-footer .btn-primary:hover:not(:disabled) {
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(50,110,206,0.35));
    transform: translateY(-1px);
}

.wf-load-validation .wf-val-footer .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wf-load-validation .wf-val-footer .btn-warning {
    background: var(--d3v-status-warning, #f0ad4e);
    border-color: transparent;
    color: #fff;
}

/** Added by shashank2104 on 06/15/2026 at 10:09 AM - prod CSS parity - strip workflow-nav.css from style-prod.css **/
/** Moved by shashank2104 on 06/19/2026 - into modular/builder/navigation/ and registered LAST in
    workflow.concat-order.json so Grunt folds it into workflow.css (kept last to preserve cascade). **/

/* d3VIEW Classic workflow left-nav modernization.
   Scoped to body:not(.wf-design-modern) so Modern is never affected. Loaded after workflow.css. */

/* ---------- Worker list: compact, scannable (preview via the Quick View button) ---------- */

body:not(.wf-design-modern) div.workflow .wf-nav-tab-body .worker-panel .thumbnail,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .thumbnail {
    display: none !important;
}

body:not(.wf-design-modern) div.workflow .workers-list .worker-panel {
    padding: 4px 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s ease;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:hover {
    background: #f5f7fa;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-name .worker-type {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.1px;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-asterisk {
    color: #2c5282;
    margin-right: 2px;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-description,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .description {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .label,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .badge {
    font-weight: 500;
}

/* row action buttons reveal on hover for a cleaner default list */
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .add_buttons {
    opacity: 0;
    transition: opacity 0.12s ease;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:hover .add_buttons,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:focus-within .add_buttons {
    opacity: 1;
}

/* ---------- Nav panel shell polish (Classic) ---------- */

body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper {
    border-color: #e0e0e0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-header {
    border-bottom: 1px solid #e0e0e0;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body input.search_by_name,
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body .wf-search-input {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* visible thin scrollbar in the panel body */
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body,
body:not(.wf-design-modern) div.workflow .workers-list {
    scrollbar-width: thin;
    scrollbar-color: #c2cdd9 #eef1f5;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar-thumb,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar-thumb {
    background: #c2cdd9;
    border-radius: 5px;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar-track,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar-track {
    background: #eef1f5;
}

/* R0-3561 - classic view: the Worker-Inputs palette scroll viewport (.wl2-body) needs a definite-height
   ancestor. The tab-body's inline height:calc(100% - 50px) collapses because the classic-view nav wrapper
   has no definite height, so the long input list scrolls inconsistently. Pin the scroll container to the
   viewport directly (header + tab-header offset) so .wl2-panel height:100% resolves and .wl2-body scrolls. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body {
    overflow-y: auto;
}

/* icon rail: remove the browser focus-outline box (the "distortion" on the focused tab) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li:focus,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li:focus-visible,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li a:focus,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li a:focus-visible,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li button:focus {
    outline: none !important;
}

/* active (selected) tab — subtle accent only; icons untouched (no recolor/resize) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.open,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.clicked {
    background: #e0ecf8;
    box-shadow: inset 3px 0 0 #2c5282;
}

/* per-tab width transition (width is set per active tab in JS) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper {
    transition: width 0.15s ease;
}

body:not(.wf-design-modern) {
    --wf-rail-w: 150px;
}

/* Header-band height, scoped to the workflow container (NOT body) so it tracks the active
   header mode. .wf-main-container holds the data-header-view attr, and every offset consumer
   below it (nav menu, io/basic/widget views, AI fora) inherits this var.
   R0-3335 - the :not(.wf-design-modern) scope was dropped so MODERN uses the SAME header height
   as classic (modern now renders the classic header). This is the single source of --wf-header-h
   for both designs; the old fixed-48px modern token override was removed. */
div.workflow .wf-main-container {
    --wf-header-h: 80px;
}
/* Ribbon header mode — taller header. The attr-qualified rule is more specific, so it wins. */
div.workflow .wf-main-container[data-header-view="ribbon"] {
    --wf-header-h: 100px;
}

/* R0-3171 - when worker shapes are shown in the header the band grows ~40px (the shapes strip). Bump
   --wf-header-h to match so EVERY offset consumer (nav rail, tabs, io/basic/widget views, AI fora, modal)
   tracks the taller header instead of being overlapped. Previously only a few hardcoded 120px rules existed
   and --wf-header-h stayed 80px. */
div.workflow .workflow-index-container.hasShapesInHeader .wf-main-container {
    --wf-header-h: 120px;
}
div.workflow .workflow-index-container.hasShapesInHeader .wf-main-container[data-header-view="ribbon"] {
    --wf-header-h: 140px;
}

/* Size the header band itself to match the ribbon var so the header is tall enough for the
   ribbon. Loaded last, so it wins the cascade. Applies to both designs now. */
div.workflow .wf-main-container[data-header-view="ribbon"] .top-settings-container,
div.workflow .wf-main-container[data-header-view="ribbon"] .d3view-wf-header {
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu {
    top: 0;
    height: 100% !important;
    width: var(--wf-rail-w) !important;
}

/* The fullscreen workflow shell yields the pinned app rail, but its classic
   fixed nav remains viewport-relative. Carry the offset onto that escaped
   child during the takeover. Embedded page-mode workflows mark themselves
   data-in-modal="false" and keep an absolute nav inside the already-offset
   shell, so excluding them avoids a second rail-width shift. */
/* 2026-08-20: same element-gate union as the shell rule -- see the note in
   wf-workflow-main-modal-tpl.css. Without it, minimizing any modal left the
   workflow's fixed nav under the rail even while the shell itself was correct. */
body.wf-modal-open:not(.wf-design-modern) div.workflow:not([data-in-modal="false"]) .wf-nav-menu,
body:not(.wf-design-modern) div.workflow.wf-rail-aware:not([data-in-modal="false"]) .wf-nav-menu {
    left: var(--d3v-rail-w, 0px);
}

/* ============================================================
   Side-nav design B — horizontal mini-menu, header typography
   - icon left, label right, grouped by section
   - typography matches the workflow header (13px / 400 / #555,
     -apple-system font stack, no uppercase on item labels)
   - active item gets the same #e0ecf8 / #2c5282 accent the
     workflow header search uses
   ============================================================ */

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups > ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.wf-rail-section {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 12px 10px 4px;
    margin: 0;
    list-style: none;
    pointer-events: none;
    text-align: left;
    display: block;
}

/* Nav menu items restyled to match the modern header menu (muted icons,
   secondary labels, rounded bg-hover pill on hover, accent pill on active). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item {
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 4px !important;
    padding: 8px 10px !important;
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-radius: var(--d3v-r-md) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: var(--d3v-t-fast);
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a > i {
    color: var(--d3v-text-muted) !important;
    font-size: 14px !important;
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
    margin: 0 !important;
    transition: var(--d3v-t-fast);
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a > .nav-menu-item-label {
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: inherit !important;
    margin: 0 !important;
}

/* Hover — rounded bg-hover pill, darker label */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover {
    background: transparent !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover > a {
    background: var(--d3v-bg-hover) !important;
    color: var(--d3v-text-primary) !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover > a > i {
    color: var(--d3v-text-secondary) !important;
}

/* Active (panel open) — accent pill, matches the header's active chip */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active {
    background: transparent !important;
    border-left: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open > a,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked > a,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active > a {
    background: var(--d3v-bg-hover) !important;
    color: var(--d3v-accent) !important;
    font-weight: 500 !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open > a > i,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked > a > i,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active > a > i {
    color: var(--d3v-accent) !important;
}

/* Drop the chunky .plugin-logo-container (40px W logo + border) from the
   workflow editor header. The header gets a small app_workflows.svg
   inlined right before the workflow name via ::before below — same
   identity cue at a fraction of the visual weight. */
body:not(.wf-design-modern) div.workflow .d3view-wf-header > .plugin-logo-container {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .top-settings-container,
body:not(.wf-design-modern) div.workflow .top-settings-container .plugin-header-right,
body:not(.wf-design-modern) div.workflow .top-settings-container .plugin-header-left {
    padding-left: 3px !important;
    margin-left: 0 !important;
}
body:not(.wf-design-modern) div.workflow .d3view-wf-header .wf-name-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
body:not(.wf-design-modern) div.workflow .d3view-wf-header .wf-name-container::before {
    content: '';
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url('/svgs/apps/app_workflows.svg') no-repeat center / contain;
}

/* sections stack naturally from the top; rail itself scrolls internally
   if it ever outgrows the viewport, instead of pushing the document down.
   Override the legacy `justify-content: space-between` that splits the
   two ULs to the top and bottom of the rail container (and consequently
   pushes the second UL below the viewport when the rail's parent is
   sized to 100% of a taller-than-viewport box). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu .wf-nav-menu-groups {
    justify-content: flex-start !important;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups > ul:last-child {
    margin-top: 0;
}

/* Hide the expand/collapse chevron unless a side-panel is open. The
   chevron lives inside .wf-nav-menu but only makes sense once a panel
   has been triggered (rail item gets .open / .clicked class). */
body:not(.wf-design-modern) div.workflow .pl-toggle-sidebar {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu:has(li.list-group-item.open) .pl-toggle-sidebar,
body:not(.wf-design-modern) div.workflow .wf-nav-menu:has(li.list-group-item.clicked) .pl-toggle-sidebar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* ---- Reflow only the elements that today are positioned at left: 75px to
       track the wider rail. Do NOT add padding-left to ancestors of the
       rail — the rail itself is position: absolute; left: 0 relative to
       those ancestors, and padding-left would push the rail right too. ---- */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper { left: var(--wf-rail-w) !important; }
body:not(.wf-design-modern) div.workflow #workflow-logs-container { left: var(--wf-rail-w) !important; width: calc(100% - var(--wf-rail-w)) !important; }
body:not(.wf-design-modern) div.workflow div.wf-main-container div#birds-eye-view { left: var(--wf-rail-w) !important; }
body:not(.wf-design-modern) div.workflow div.wf-main-container div.chart-view .wf-exec-complete,
body:not(.wf-design-modern) div.workflow div.wf-main-container .wf-top-alert { left: var(--wf-rail-w) !important; width: calc(100% - var(--wf-rail-w)) !important; }
/* the Data view's main container (and its sibling timeline / ancestry
   views) are absolutely positioned at left: 75px in the legacy CSS —
   re-pin to the rail width so the body doesn't end up offset by the
   old 75px and overlapped by the wider rail. */
body:not(.wf-design-modern) div.workflow .wf-main-container.dataEnabled .wf-data-container,
body:not(.wf-design-modern) div.workflow .wf-main-container.timelineEnabled .wf-timeline-container,
body:not(.wf-design-modern) div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-container {
    left: var(--wf-rail-w) !important;
    width: calc(100% - var(--wf-rail-w)) !important;
}

/* ---- Canvas / Timeline / Data view-toggle: keep at top-left just past
       the rail, but flatten to a compact icon-only grouped pill. The
       inline `style="top:10px; left:95px"` in the template still wins
       on top: keeping its 10px; left tracks the rail width via the var. ---- */
body:not(.wf-design-modern) div.workflow .wf-view-toggle {
    left: calc(var(--wf-rail-w) + 10px) !important;
    top: 10px !important;
    z-index: 5;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .btn-group {
    display: inline-flex !important;
    gap: 2px !important;
    background: #f0f0f0 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn {
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #555 !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    line-height: 1 !important;
    min-width: 0 !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn > i {
    font-size: 13px !important;
    margin: 0 !important;
}
/* icon-only: hide the text label, keep tooltip via the existing `title` attr */
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn .btn-txt {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn:hover {
    color: #333 !important;
    background: #e8e8e8 !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn.active {
    background: #fff !important;
    color: #2c5282 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

/* R0-3744 + R0-3745 — the position: fixed overlay we tried here clashed
   with the workflow's internal coordinate assumptions (the JS sets
   inline `position: relative; min-height: 900px` for the in-document
   flow, plus rail / side-panel positions are computed against the
   relative parent). Reverted to the natural positioning; the library
   peek-through that motivated the overlay was itself a regression from
   the earlier `height: calc(100vh - 103px)` clamp, so leaving the
   workflow alone here keeps everything working. */

body:not(.wf-design-modern) .workflow-modal div.workflow .wf-nav-menu,
body:not(.wf-design-modern) div.workflow.workflow-modal .wf-nav-menu,
body:not(.wf-design-modern) .workflows-app-viewer-root div.workflow .wf-nav-menu {
    top: 0 !important;
    height: 100% !important;
}

body:not(.wf-design-modern) div.workflow.modalPresent .wf-nav-menu {
    top: var(--wf-header-h, 80px) !important;
    height: calc(100% - var(--wf-header-h, 80px)) !important;
}

/* canvas push: the panel shifts the canvas right by exactly (rail + panel width)
   via padding-left on .full-view (set in JS), so the canvas fills the remaining
   space precisely — no overlay, no horizontal scroll */
body:not(.wf-design-modern) div.workflow .full-view {
    transition: padding-left 0.15s ease;
}

/* docked panel content fills the wrapper (sized per-tab in JS). The template marks
   Settings/Logs/Predict tab-panes with .full-width (calc(100vw-80px)) and AI Models
   gets a fixed 800px — both overflow the docked wrapper and pushed the form controls
   off-screen with an x-scroll. Pin these to 100% of the wrapper in Classic. Only the
   per-tab-sized tabs are targeted; unmapped tabs keep their fixed width (the wrapper
   auto-sizes to it). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Settings"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Settings"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="AI Models"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="AI Models"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Logs"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Logs"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"].full-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body > .full-h,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-settings-tree {
    max-width: 100%;
    box-sizing: border-box;
}

/* R0-3770 - Predict from Historical must size to the viewport minus the rail width, not the
   shared 100% cap above (which lumps it with AI Models/Logs). Without this the long workflow
   names in step 1 and the dataset table in step 2 get clipped. Classic view only; AI Models /
   Logs are untouched. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"].full-width {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
    max-width: unset !important;
}

/* R0-3651 - Enlarge/Compress for the per-tab nav panels (Settings, Logs, AI Models, Info, ...).
   The per-tab inline width on the wrapper is the compressed default; the .enlarged class (toggled by
   the Enlarge button) overrides it to a rail-aware near-full width. !important beats the inline per-tab
   width; removing the class falls back to it. Classic view only. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper.enlarged {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
    max-width: unset !important;
}

/* /stylesheets/recorder.widget.css */
/** Added by shashank2104 on 2026-06-19 - R0-3693 - anchor the recorder widget bottom-LEFT (clear of the rail) so it no longer overlaps and blocks the worker-config panel Save button **/
.wf-recorder-widget-wrap {
    position: fixed;
    /* R0-3693 - anchor to the bottom-LEFT (clear of the rail) instead of bottom-right, where the
       fixed widget overlapped the worker-config panel Save button and blocked it. */
    left: calc(var(--wf-rail-w, var(--wf-sidebar-w, 80px)) + 16px);
    bottom: 16px;
    z-index: 1080;
}
.wf-recorder-widget {
    position: relative;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 11px;
    color: #555;
    min-width: 140px;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.wf-recorder-widget:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.wf-recorder-widget[data-state="recording"] {
    border-color: #f8d7da;
    background: #fff7f7;
}
.wf-recorder-widget[data-state="stopped"] {
    border-color: #d4edda;
    background: #f7fff8;
}
.wf-rec-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #2c5282;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-rec-btn:hover {
    background: #e0ecf8;
    border-color: #c6d9ec;
}
.wf-rec-start i { color: #d46b08; }
.wf-rec-stop  i { color: #721c24; }
.wf-rec-import i, .wf-rec-export i { color: #2c5282; }
.wf-rec-discard i { color: #999; }
.wf-rec-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #721c24;
}
.wf-rec-status-done {
    color: #155724;
}
.wf-rec-status-done i {
    color: #155724;
}
.wf-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0392b;
    animation: wf-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes wf-rec-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
.wf-rec-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wf-rec-last {
    font-size: 10px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wf-rec-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}
.wf-rec-name-input {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    width: 100%;
}

/* R0-3887 - "Record New Automation" modal: the import-a-recipe dropzone under the name/description
   fields. Unscoped because the GenericModalView body is mounted outside the plugin root. */
.wf-rec-or-divider {
    text-align: center;
    margin: 18px 0 12px;
    border-top: 1px solid var(--d3v-border-subtle, #eee);
}
.wf-rec-or-divider span {
    position: relative;
    top: -9px;
    background: var(--d3v-bg-primary, #fff);
    padding: 0 10px;
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wf-rec-dropzone {
    border: 2px dashed var(--d3v-border-strong, #cfd6dd);
    border-radius: 8px;
    background: var(--d3v-bg-subtle, #fafbfc);
    padding: 20px;
    min-height: 96px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wf-rec-dropzone:hover,
.wf-rec-dropzone.dz-drag-hover {
    border-color: var(--d3v-accent, #2c5282);
    background: var(--d3v-bg-accent-subtle, #f0f6ff);
}
.wf-rec-dropzone .dz-message {
    margin: 0;
    color: #666;
}
.wf-rec-dropzone .dz-message i {
    display: block;
    font-size: 22px;
    color: #9aa4ae;
    margin-bottom: 6px;
}
.wf-rec-dz-title {
    font-weight: 600;
    color: #444;
}

/* /stylesheets/recipe.drawer.css */
.wf-recipe-drawer-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.wf-recipe-drawer-wrap.open {
    transform: translateX(0);
    pointer-events: auto;
}
.wf-recipe-drawer {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e0e0e0;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08);
}
.wf-recipe-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}
.wf-recipe-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}
.wf-recipe-drawer-title i {
    color: #2c5282;
    margin-right: 6px;
}
.wf-recipe-drawer-close {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.wf-recipe-drawer-close:hover {
    background: #f0f0f0;
    color: #333;
}
.wf-recipe-tabs {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin: 10px 16px 4px;
    align-self: flex-start;
}
.wf-recipe-tab {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-tab:hover {
    color: #555;
}
.wf-recipe-tab.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.wf-recipe-filters {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wf-recipe-search-input,
.wf-recipe-category-filter {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    outline: none;
}
.wf-recipe-search-input { flex: 1 1 0; }
.wf-recipe-category-filter { flex: 0 0 140px; }
.wf-recipe-search-input:focus,
.wf-recipe-category-filter:focus {
    border-color: #c6d9ec;
    box-shadow: 0 0 0 3px rgba(44,82,130,0.08);
}
.wf-recipe-drawer-body {
    flex: 1 1 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.wf-recipe-list-pane {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 200px;
}
.wf-recipe-list-loading,
.wf-recipe-list-empty,
.wf-recipe-detail-empty {
    font-size: 12px;
    color: #888;
    padding: 24px 12px;
    text-align: center;
    font-style: italic;
}
.wf-recipe-list-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-list-item:hover {
    background: #fafbfc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-recipe-list-item.selected {
    border-color: #2c5282;
    background: #f3f8fd;
}
.wf-recipe-list-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.wf-recipe-cat-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}
.wf-recipe-list-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-recipe-list-count {
    font-size: 11px;
    color: #888;
    flex: 0 0 auto;
}
.wf-recipe-list-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    margin-top: 2px;
}
.wf-recipe-list-tags {
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}
.wf-recipe-list-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-pane {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
}
.wf-recipe-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.wf-recipe-detail-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0;
}
.wf-recipe-detail-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.wf-recipe-detail-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 6px;
}
.wf-recipe-detail-tags {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}
.wf-recipe-detail-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-recipe-detail-actions button {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #2c5282;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-recipe-apply-btn {
    background: #e0ecf8 !important;
    border-color: #c6d9ec !important;
}
.wf-recipe-apply-btn:hover {
    background: #c6d9ec !important;
}
.wf-recipe-share-btn:hover { background: #e8daef; border-color: #d2b4de; }
.wf-recipe-delete-btn:hover { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }

/* ============================================================
   R0-3718 — ribbon header layout.
   The worker search is mounted inline on the ribbon's tab row
   (placeRibbonHeaderControls() in SettingsView appends it after
   the tabs <ul>, which survives tab switches since only the
   level-2 row re-renders), and the run status + tracked-input
   are moved next to the execution controls in JS. These rules
   only lay them out; scoped to ribbon mode + classic design so
   the classic header is untouched.
   ============================================================ */

/* Let the ribbon band span the full header width so the inline
   search can be pushed to the far right of the tab row. */
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-header-level-2 .plugin-settings-line {
    flex: 1 1 auto;
    width: 100%;
}
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-settings-line .wf-ribbon-menu {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ribbon tab row is a flex row so the inline search sits centred
   next to the tabs; margin-left:auto pushes it to the right end. */
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 {
    display: flex;
    align-items: center;
}
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 > .wf-search-container {
    flex: 0 0 auto;
    max-width: 340px;
}

/* R0-3718 - on small screens the ribbon's level-2 actions already collapse to icon-only
   (.pl-ribbon-item .item-label hidden at <=1500px in plugins.css). Match that for the level-1
   TABS too: their label is a bare text node (icon + "File"), so collapse the anchor's font-size
   to hide the text and restore the icon glyph size. Scoped to the workflow ribbon header. */
@media screen and (max-width: 1500px) {
    body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 .pl-ribbon-list > li > a {
        font-size: 0;
    }
    body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 .pl-ribbon-list > li > a > i {
        font-size: 14px;
        margin: 0;
    }
}

/* R0-3335 - the modern-specific --wf-header-h overrides (and the duplicate band-sizing) were
   removed. Modern now inherits the single shared header-height rule near the top of this file
   (div.workflow .wf-main-container, no :not(.wf-design-modern) scope), so there is one source
   of truth for both designs. Keep only the ribbon-menu overflow guard below. */
div.workflow.wf-design-modern .wf-main-container[data-header-view="ribbon"] .wf-ribbon-menu {
    overflow: visible;
}

/* ============================================================
   R0-3335 (PART 2) — Dark Mode + Ribbon View: ribbon label/icon color.
   Once the ribbon shows, the shared ribbon CSS hardcodes label color
   #333 (plugins.css :8614 hover !important, :8625 li[data-is-button=
   false]>a). The classic ribbon rules above are scoped
   body:not(.wf-design-modern), so under Modern Dark nothing re-colors
   the ribbon and the #333 labels/icons sit invisible on the dark
   header band. Re-color them with the modern dark text token.
   ============================================================ */
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list li[data-is-button="false"] > a,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list li[data-is-button="false"] > a,
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .item-label,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .item-label,
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .pl-icon,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .pl-icon {
    color: var(--wf-text-primary) !important;
}

/* hover beats the #333!important hover rule in plugins.css:8614 */
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list > li:hover > a:not(.btn),
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list > li:hover > a:not(.btn) {
    color: var(--wf-text-primary) !important;
}

/* Added by Claude 2026-07-08 - Phase 5c Run History modal (headless-workflow-execution) */
.wf-executions-modal .wf-executions-wrap {
    display: flex;
    height: 60vh;
    min-height: 320px;
    gap: 12px;
}
.wf-executions-modal .wf-exec-left {
    flex: 0 0 300px;
    border-right: 1px solid var(--d3v-border-subtle, #e2e2e2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wf-executions-modal .wf-exec-left-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-weight: 600;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e2e2);
}
.wf-executions-modal .wf-exec-refresh { color: var(--d3v-text-secondary, #777); }
.wf-executions-modal .wf-exec-list { overflow-y: auto; flex: 1; }
.wf-executions-modal .wf-exec-right { flex: 1; overflow: hidden; display: flex; }
.wf-executions-modal .wf-exec-detail { flex: 1; overflow-y: auto; padding: 4px 8px; }

.wf-executions-modal .wf-exec-row {
    padding: 8px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #eee);
    cursor: pointer;
}
.wf-executions-modal .wf-exec-row:hover { background: var(--d3v-bg-hover, #f5f7fa); }
.wf-executions-modal .wf-exec-row.active { background: var(--d3v-bg-selected, #e8f0fe); }
.wf-executions-modal .wf-exec-row-top { display: flex; align-items: center; gap: 6px; }
.wf-executions-modal .wf-exec-row-sub {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--d3v-text-secondary, #888); margin-top: 3px;
}

.wf-executions-modal .wf-exec-status {
    text-transform: capitalize; font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 10px;
    background: var(--d3v-bg-muted, #eee); color: var(--d3v-text-primary, #444);
}
.wf-executions-modal .wf-exec-status-success { background: var(--d3v-status-success-bg, #e6f4ea); color: var(--d3v-status-success, #1e7e34); }
.wf-executions-modal .wf-exec-status-failure,
.wf-executions-modal .wf-exec-status-failed { background: var(--d3v-status-danger-bg, #fdecea); color: var(--d3v-status-danger, #c62828); }
.wf-executions-modal .wf-exec-status-running { background: var(--d3v-status-info-bg, #e7f1ff); color: var(--d3v-status-info, #1565c0); }
.wf-executions-modal .wf-exec-elapsed { margin-left: auto; font-size: 11px; color: var(--d3v-text-secondary, #888); }

.wf-executions-modal .wf-exec-badge {
    font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    background: var(--d3v-bg-muted, #eef); color: var(--d3v-text-secondary, #556);
}
.wf-executions-modal .wf-exec-badge-hpc { background: #ede7f6; color: #5e35b1; }
.wf-executions-modal .wf-exec-badge-shared { background: #fff3e0; color: #ef6c00; }
.wf-executions-modal .wf-exec-badge-collected { background: #e0f2f1; color: #00695c; }

.wf-executions-modal .wf-exec-empty { padding: 16px; color: var(--d3v-text-secondary, #999); font-style: italic; }
.wf-executions-modal .wf-exec-error { color: var(--d3v-status-danger, #c62828); font-style: normal; }
.wf-executions-modal .wf-exec-loading { padding: 16px; color: var(--d3v-text-secondary, #888); }

.wf-executions-modal .wf-exec-detail-header { font-weight: 600; margin: 4px 0 10px; }
.wf-executions-modal .wf-exec-section { margin-bottom: 16px; }
.wf-executions-modal .wf-exec-section-title {
    font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .5px;
    color: var(--d3v-text-secondary, #888); border-bottom: 1px solid var(--d3v-border-subtle, #eee);
    padding-bottom: 4px; margin-bottom: 8px;
}
.wf-executions-modal .wf-exec-worker {
    border: 1px solid var(--d3v-border-subtle, #e6e6e6); border-radius: 4px;
    margin-bottom: 10px; overflow: hidden;
}
.wf-executions-modal .wf-exec-worker-error { border-color: var(--d3v-status-danger, #e57373); }
.wf-executions-modal .wf-exec-worker-head {
    background: var(--d3v-bg-muted, #f5f5f5); padding: 6px 10px; font-weight: 600;
}
.wf-executions-modal .wf-exec-wtype { font-size: 11px; color: var(--d3v-text-secondary, #999); font-weight: 400; }
.wf-executions-modal table.wf-exec-ports { width: 100%; border-collapse: collapse; }
.wf-executions-modal table.wf-exec-ports th,
.wf-executions-modal table.wf-exec-ports td {
    text-align: left; padding: 5px 10px; border-top: 1px solid var(--d3v-border-subtle, #eee);
    vertical-align: top; font-size: 12px;
}
.wf-executions-modal table.wf-exec-ports th { color: var(--d3v-text-secondary, #888); font-weight: 600; }
.wf-executions-modal .wf-exec-scalar { font-family: monospace; }
.wf-executions-modal .wf-exec-null { color: var(--d3v-text-secondary, #bbb); }
.wf-executions-modal .wf-exec-toggle { font-size: 12px; }
.wf-executions-modal pre.wf-exec-json {
    max-height: 260px; overflow: auto; background: var(--d3v-bg-muted, #f7f7f7);
    border: 1px solid var(--d3v-border-subtle, #eee); border-radius: 3px;
    padding: 8px; margin: 4px 0 0; font-size: 11px;
}

/* Workers List options menu — the prepends that used to sit beside the search
   box (filters, view, group-by-discipline) were flattened into one ellipsis
   menu on 2026-08-16, leaving the AI toggle as the only addon. */
.wl-options-menu               { text-align: left; }
.wl-options-title              { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #888; margin: 8px 0 4px; }
.wl-options-title:first-child  { margin-top: 0; }
.wl-options-list               { list-style: none; margin: 0 0 6px; padding: 0; }
.wl-options-list > li          { border-radius: 6px; }
.wl-options-list > li > a      { display: block; padding: 5px 8px; color: #555; font-size: 12px; text-decoration: none; }
.wl-options-list > li:hover    { background: #f0f0f0; }
.wl-options-list > li.active > a { color: #2c5282; font-weight: 600; }
.wl-options-list > li.active   { background: #e0ecf8; }
.wl-options-filters            { border-top: 1px solid #f0f0f0; padding-top: 8px; }

/* Saved-settings indicator. The picker's settings persist and now sit behind the
   ellipsis, so a choice made once is invisible on the next visit and the list looks
   wrong for no apparent reason. The dot says "something here is not the default";
   the reset row inside the menu is how it is cleared. */
.wl-options > a                { position: relative; }
.wl-options.has-saved-settings > a::after {
    content: ''; position: absolute; top: 3px; right: 3px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #d46b08; box-shadow: 0 0 0 2px #ffffff;
}
.wl-options-reset-row          { border-top: 1px solid #f0f0f0; margin-top: 6px; padding-top: 6px; }
.wl-options-reset > a          { color: #856404; font-weight: 600; }
.wl-options-reset > a:hover    { color: #613400; }
.wl-options-reset i            { margin-right: 6px; }
.wl-options-reset-count:empty  { display: none; }
.wl-options-reset-count        { display: inline-block; margin-left: 6px; min-width: 16px; height: 16px;
    padding: 0 5px; border-radius: 999px; background: #fef3cd; color: #856404;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.wl-options-filters .form-group { margin-bottom: 8px; }
.wl-options-filters label      { font-size: 11px; color: #888; font-weight: 500; }

/* Worker palette (left-nav Workers panel) — the group toggle and the three view
   buttons folded into one options menu on 2026-08-16, leaving the AI toggle as
   the only control ahead of the input. */
.wl2-more                      { position: relative; display: inline-flex; }
.wl2-more-menu                 { display: none; position: absolute; top: calc(100% - 4px); right: 14px; z-index: 1060; min-width: 210px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); padding: 8px; text-align: left; }
.wl2-ph.wl2-more-open .wl2-more-menu { display: block; }
.wl2-more-title                { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #888; padding: 6px 6px 4px; }
.wl2-more-title:first-child    { padding-top: 0; }
.wl2-more-item                 { display: block; width: 100%; text-align: left; padding: 5px 8px; border: none; background: transparent; border-radius: 6px; font-size: 12px; color: #555; cursor: pointer; }
.wl2-more-item:hover           { background: #f0f0f0; color: #333; }
.wl2-more-item.is-active       { background: #e0ecf8; color: #2c5282; font-weight: 600; }
/* One keyword per line: the point of Compact is scanning *WORKER_ID down a column,
   which wrapping chips defeat -- ids are all different widths, so nothing lines up. */
.wl2-compact                   { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.wl2-compact .wl2-chip         { display: block; width: 100%; text-align: left; }
.wl2-chip                      { display: inline-block; padding: 3px 8px; background: transparent; border: 1px solid #e0e0e0; border-radius: 4px; font-family: Menlo, Consolas, monospace; font-size: 11px; color: #2c5282; cursor: pointer; }
.wl2-chip:hover                { background: #e0ecf8; }
.wf-basket-count               { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: 8px; background: #e0ecf8; color: #2c5282; font-size: 11px; font-weight: 600; text-align: center; }
.wf-basket-count.hidden        { display: none; }


/* ---------------------------------------------------------------------------
   Cleared outputs (R0-4200)

   An output whose value the size settings removed renders empty, which looks
   identical to a worker that failed or never ran. These rules say otherwise:
   a dashed edge and a small badge, muted rather than alarming, because nothing
   is wrong -- the value was given up on purpose.
   --------------------------------------------------------------------------- */

li.field-item.wf-output-cleared {
    border: 1px dashed #b6bcc4;
    border-radius: 3px;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(182, 188, 196, 0.08) 6px,
        rgba(182, 188, 196, 0.08) 12px
    );
}

li.field-item.wf-output-cleared .wf-cleared-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #c7ccd2;
    border-radius: 9px;
    background: #f4f5f7;
    color: #6b7480;
    font-size: 10px;
    font-weight: normal;
    line-height: 15px;
    vertical-align: middle;
    cursor: help;
}

li.field-item.wf-output-cleared .wf-cleared-badge i {
    margin-right: 3px;
    opacity: 0.75;
}

/* A worker holding at least one cleared output, on the canvas. */
.wf-worker-item.has-cleared-outputs,
.worker.has-cleared-outputs {
    border-style: dashed;
}

.wf-worker-item.has-cleared-outputs::after,
.worker.has-cleared-outputs::after {
    content: "\f12d";           /* fa-eraser */
    font-family: FontAwesome;
    position: absolute;
    right: 4px;
    bottom: 2px;
    color: #9aa2ad;
    font-size: 10px;
    opacity: 0.85;
    pointer-events: none;
}

/* /javascripts/plugins_src/workflow/workflow-palette.css */
/** Added by shashank2104 on 06/15/2026 at 10:09 AM - prod CSS parity - strip workflow-palette.css from style-prod.css **/

/* ===== R0-3645 WorkerPaletteView — prototype port (tests/workers.html), scoped under .wl2-panel ===== */
.wl2-panel{display:flex;flex-direction:column;height:100%;background:#fff;overflow:hidden}
.wl2-ph{flex:0 0 auto;padding:12px 14px 10px;border-bottom:1px solid #eef0f3;position:relative}
.wl2-ph .wl2-h3{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#333}
.wl2-searchbar{display:flex;align-items:stretch;border:1px solid #dfe3e8;border-radius:9px;overflow:hidden;background:#fff}
.wl2-searchbar:focus-within{border-color:#90b4e0;box-shadow:0 0 0 3px rgba(44,82,130,.10)}
.wl2-addon{display:flex;align-items:center}
.wl2-pre{border-right:1px solid #eef0f3}
.wl2-post{border-left:1px solid #eef0f3}
.wl2-search{flex:1;min-width:0;border:none;outline:none;padding:8px;font-size:13px}
.wl2-vbtn{border:none;background:transparent;color:#9aa3ad;width:34px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:background .12s,color .12s}
.wl2-vbtn:hover{background:#f2f5f8;color:#5a6470}
.wl2-vbtn.wl2-on{color:#2c5282;background:#e6eff9}
.wl2-ai{color:#9b6cb0}
.wl2-ai.wl2-on{color:#6c3483;background:#efe2f6}
.wl2-close{position:absolute;top:9px;right:10px;border:none;background:#f2f5f8;color:#5a6470;width:28px;height:28px;border-radius:7px;font-size:15px;cursor:pointer}
.wl2-close:hover{background:#e6eaef}
.wl2-count{flex:0 0 auto;font-size:11px;color:#888;padding:8px 14px 2px}
.wl2-body{flex:1 1 0;min-height:0;overflow:auto}
.wl2-empty{padding:30px;text-align:center;color:#999;font-size:13px}
.wl2-ic{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;background:var(--cat,#5d6d7e)}
.wl2-ic img{width:60%;height:60%;filter:brightness(0) invert(1);opacity:.92}
.wl2-addbtn{flex:0 0 auto;border:1px solid #c6d9ec;background:#fff;color:#2c5282;border-radius:6px;width:24px;height:24px;font-size:15px;line-height:1;padding:0;cursor:pointer;opacity:0;transition:opacity .12s;display:inline-flex;align-items:center;justify-content:center}
/* dense list row */
.wl2-panel .worker-panel.wl2-row{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 9px;border-bottom:1px solid #f3f4f6;border-left:3px solid var(--cat,#5d6d7e);cursor:grab;background:#fff}
.wl2-panel .worker-panel.wl2-row:hover{background:#f6f8fb}
.wl2-panel .worker-panel.wl2-row:hover .wl2-addbtn{opacity:1}
.wl2-meta{flex:1;min-width:0}
.wl2-nmrow{display:flex;align-items:baseline;gap:8px}
.wl2-nm{flex:1;min-width:0;font-size:13px;font-weight:600;color:#2b2b2b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl2-io{flex:0 0 auto;font-size:10px;color:#aab1ba;font-weight:600;white-space:nowrap}
.wl2-io b{color:#7a828c;font-weight:700}
.wl2-kw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#525a62;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;text-transform:lowercase;font-variant:small-caps}
/* click-to-explode detail */
.wl2-item.wl2-open > .worker-panel{background:#eef4fb}
.wl2-detail{padding:9px 14px 12px 38px;background:#fafbfc;border-bottom:1px solid #eef0f3;border-left:3px solid var(--cat,#5d6d7e)}
.wl2-dfull{font-size:12px;color:#5a6470;line-height:1.5}
.wl2-dgrid{display:flex;gap:18px;flex-wrap:wrap;margin:9px 0 2px}
.wl2-dk{font-size:9px;text-transform:uppercase;color:#aab1ba;font-weight:700;letter-spacing:.3px}
.wl2-dv{font-size:12px;color:#3a4250;font-weight:600;margin-top:1px}
.wl2-dv.wl2-kwv{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--cat,#2c5282);text-transform:lowercase}
.wl2-dacts{display:flex;gap:6px;margin-top:9px}
.wl2-dbtn{font-size:11px;font-weight:600;border:1px solid #c6d9ec;background:#fff;color:#2c5282;border-radius:6px;padding:4px 11px;cursor:pointer}
.wl2-dbtn:hover{background:#eaf2fb}
/* groups */
.wl2-grp .wl2-gh{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;position:sticky;top:0;background:#fbfbfc;border-bottom:1px solid #eef0f3;z-index:1}
.wl2-gbar{width:8px;height:8px;border-radius:3px;background:var(--cat,#5d6d7e)}
.wl2-gname{font-size:12px;font-weight:700;color:#333;text-transform:capitalize;letter-spacing:.2px}
.wl2-gct{margin-left:auto;font-size:10px;font-weight:700;color:#fff;background:var(--cat,#5d6d7e);border-radius:10px;padding:1px 8px}
.wl2-gchev{color:#aaa;transition:transform .15s}
.wl2-grp.wl2-collapsed .wl2-gchev{transform:rotate(-90deg)}
.wl2-grp.wl2-collapsed .wl2-item,.wl2-grp.wl2-collapsed .worker-panel{display:none}
/* cards */
.wl2-grid{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wl2-panel .worker-panel.wl2-card{border:1px solid #e8eaee;border-top:3px solid var(--cat,#5d6d7e);border-radius:9px;padding:10px;cursor:grab;background:#fff;display:flex;flex-direction:column;gap:6px;min-height:104px;transition:box-shadow .14s,transform .1s}
.wl2-panel .worker-panel.wl2-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-1px)}
.wl2-chead{display:flex;align-items:center;gap:8px}
.wl2-card .wl2-nm{font-size:12.5px;font-weight:700;color:#2b2b2b;line-height:1.25}
.wl2-ds{font-size:11px;color:#8a8f98;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wl2-tag{align-self:flex-start;margin-top:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--cat,#2c5282);background:#f0f3f7;padding:2px 7px;border-radius:5px}

/* Added by shashank2104 on 08/31/2026 - R0-4130 - "Previously" cell in the worker detail panel. A renamed
   worker keeps answering to its old ids; the cell is absent for workers that carry no alias. The cell spans
   the full detail grid because an id is long and wraps badly in a half-width column. */
.wl2-panel .wl2-dprev{grid-column:1/-1}
.wl2-panel .wl2-prevv{display:flex;flex-wrap:wrap;gap:4px}
.wl2-panel .wl2-prev-chip{display:inline-block;padding:1px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:#5a6470;background:#f2f5f8;border:1px solid #e3e8ee;border-radius:999px;transition:color .12s,background .12s,border-color .12s}
.wl2-panel .wl2-prev-chip:hover{color:#2c5282;background:#fff;border-color:#90b4e0}

/* /javascripts/plugins_src/workflow/workflow2.css */
/** Added by shashank2104 on 01/15/2025 - DW-2415 - Navigation wheel styling **/
div.workflow .workflow-navigation-wheel {
    position: fixed;
    right: 20px;
    top: calc(50% - 100px);
    z-index: 5;
    display: none;
    cursor: move;
}

div.workflow .workflow-navigation-wheel .nav-wheel-container {
    position: relative;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-wheel .nav-btn {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .workflow-navigation-wheel .nav-btn:hover {
    background: #f5f5f5;
    border-color: #999;
}

div.workflow .workflow-navigation-wheel .nav-btn:active {
    background: #e0e0e0;
}

/** Added by shashank2104 on 01/15/2025 - DW-2415 - Navigation wheel button animation **/
div.workflow .workflow-navigation-wheel .nav-btn-animate {
    transform: scale(0.9);
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    transition: all 0.1s ease;
}

div.workflow .workflow-navigation-wheel .nav-up {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

div.workflow .workflow-navigation-wheel .nav-left {
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}

div.workflow .workflow-navigation-wheel .nav-center {
    background: #007bff;
    color: white;
    border-color: #007bff;
    width: 35px;
    height: 35px;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

div.workflow .workflow-navigation-wheel .nav-center:hover {
    background: #0056b3;
    border-color: #0056b3;
}

div.workflow .workflow-navigation-wheel .nav-right {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

div.workflow .workflow-navigation-wheel .nav-down {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.d3view-wf-worker-category-menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2000;
    background: none;
    cursor: move;
}

.d3view-wf-worker-category-menu.visible {
    opacity: 1;
    pointer-events: auto;
}

.d3view-wf-worker-category-menu .category-menu-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.10);
    overflow: visible;
}

.d3view-wf-worker-category-menu .close-category-menu {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 10;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.d3view-wf-worker-category-menu .menu-drag-handle {
    position: absolute;
    right: 55px;
    top: 18px;
    z-index: 10;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}

.d3view-wf-worker-category-menu .close-category-menu:hover {
    background: #f5f5f5;
}

.d3view-wf-worker-category-menu .category-menu-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 180px;
    height: 180px;
    /*background: #ddd;*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 0 24px rgba(0,0,0,0.10);*/
    z-index: 2;
}

.d3view-wf-worker-category-menu .category-menu-search {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /*border: none;*/
    /*background: #fff;*/
    /*color: #fff;*/
    font-size: 20px;
    text-align: center;
    /*outline: none;*/
    /*box-shadow: 0 0 0 4px rgba(0,0,0,0.04);*/
    transition: box-shadow 0.2s;
}

/* Timeline View Styles */
div.workflow .wf-main-container.timelineEnabled .wf-tabs,
div.workflow .wf-main-container.timelineEnabled .zoom,
div.workflow .wf-main-container.timelineEnabled #birds-eye-view {
    display: none !important;
}

div.workflow .wf-main-container.timelineEnabled .play-controls .controls-btn-group {
    opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-view {
    display: block !important;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-container {
    height: calc(100% - 50px);
    position: relative;
    top: 50px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
    display: flex;
    flex-direction: column;
}

div.workflow .wf-main-container.timelineEnabled .wf-timeline-container .timeline-body {
    flex: 1 1 auto;
}

/* Data View Styles */
div.workflow .wf-main-container.dataEnabled .wf-tabs,
div.workflow .wf-main-container.dataEnabled .zoom,
div.workflow .wf-main-container.dataEnabled #birds-eye-view {
    display: none !important;
}

div.workflow .wf-main-container.dataEnabled .play-controls .controls-btn-group {
    opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view {
    display: block !important;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .node-name,
div.workflow .wf-main-container.dataEnabled .wf-data-view .worker-name {
    display: block !important;
    max-width: calc(100% - 30px);
    left: 5px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .node-name .badge {
    position: absolute;
    right: 4px;
    top: 0px;
}

/* Hover effects for plot-txt elements in data view */
div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background-color: #FFF;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover {
    background-color: rgba(0, 123, 255, 0.25);
    border-radius: 4px;
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover .worker-name {
    color: #007bff;
    font-weight: 600;
}

div.workflow .wf-main-container.dataEnabled .wf-data-view .plot-txt:hover .wf-worker-type {
    color: #6c757d;
    font-weight: 500;
}

div.workflow .wf-main-container.dataEnabled .wf-data-container {
    height: calc(100% - 50px);
    position: relative;
    top: 50px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
    display: flex;
    flex-direction: column;
}

div.workflow .wf-main-container.dataEnabled .wf-data-container .data-body {
    flex: 1 1 auto;
}

/* Ancestry View Styles */
div.workflow .wf-main-container.ancestryEnabled .wf-tabs,
div.workflow .wf-main-container.ancestryEnabled .zoom,
div.workflow .wf-main-container.ancestryEnabled #birds-eye-view {
    display: none !important;
}

div.workflow .wf-main-container.ancestryEnabled .play-controls .controls-btn-group {
    opacity: 0.5;
    pointer-events: none;
}

div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-view {
    display: block !important;
}

div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-container {
    height: calc(100% - 160px);
    position: relative;
    top: 120px;
    padding: 15px;
    left: 75px;
    width: calc(100% - 75px);
}

div.workflow .wf-main-container .timeline-view-toggle .btn {
    border-radius: 0 !important;
}

div.workflow .wf-main-container .timeline-view-toggle .btn.active {
    background: none !important;
    color: steelblue !important;
}

div.workflow .wf-main-container .timeline-view-toggle .btn:focus,
div.workflow .wf-main-container .timeline-view-toggle .btn:active {
    border: none !important;
}

.d3view-wf-worker-category-menu .category-menu-search::placeholder {
    color: #bbb;
    opacity: 1;
}

.d3view-wf-worker-category-menu .category-items {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.d3view-wf-worker-category-menu .category-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    margin-top: -45px;
    /*background: #fff;*/
    border-radius: 50%;
    /*box-shadow: 0 2px 12px rgba(0,0,0,0.10);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
    /*border: 2px solid #eee;*/
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.3s, opacity 0.3s;
}

.d3view-wf-worker-category-menu .category-item.visible {
    opacity: 1 !important;
    transform: scale(1);
}

.d3view-wf-worker-category-menu .category-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    transform: scale(1.08);
    border-color: #2196f3;
    z-index: 2;
}

.d3view-wf-worker-category-menu .category-icon {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.d3view-wf-worker-category-menu .category-label {
    font-size: 14px;
    color: #333;
    text-align: center;
    word-break: break-word;
    max-width: 70px;
    line-height: 1.2;
}

/* Animation delays for category items */
.d3view-wf-worker-category-menu .category-item:nth-child(2) {
    transition-delay: 0s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(3) {
    transition-delay: 0.1s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(4) {
    transition-delay: 0.2s;
}

.d3view-wf-worker-category-menu .category-item:nth-child(5) {
    transition-delay: 0.3s;
}

/* Category Dropdown Styles */
.d3view-wf-worker-category-menu .category-dropdown {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 5px 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.d3view-wf-worker-category-menu .dropdown-item {
    padding: 8px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-wf-worker-category-menu .dropdown-item:hover {
    background: #f5f5f5;
}

.d3view-wf-worker-category-menu .dropdown-item .category-name {
    font-weight: bold;
    color: #333;
}

.d3view-wf-worker-category-menu .dropdown-item .worker-count {
    color: #666;
    font-size: 12px;
}

.d3view-wf-worker-category-menu .show-more-categories {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background: #f5f5f5;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
}

.d3view-wf-worker-category-menu.visible .show-more-categories {
    opacity: 1;
    transform: translate(0, calc(var(--menu-radius) / 2 - 50px)) scale(1);
}

.d3view-wf-worker-category-menu .show-more-categories:hover {
    transform: translate(0, calc(var(--menu-radius) / 2 - 50px)) scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Worker List Styles */
.d3view-wf-worker-category-menu .worker-list-container {
    width: 400px;
    height: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.d3view-wf-worker-category-menu .worker-list-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.d3view-wf-worker-category-menu .back-to-categories {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.d3view-wf-worker-category-menu .back-to-categories:hover {
    background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .category-title {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}

.d3view-wf-worker-category-menu .worker-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.d3view-wf-worker-category-menu .worker-item {
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    word-wrap: break-word;
    white-space: normal;
}

.d3view-wf-worker-category-menu .worker-item:hover {
    background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .worker-item.selected {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.d3view-wf-worker-category-menu .worker-item:hover {
    background-color: #f5f5f5;
}

.d3view-wf-worker-category-menu .worker-item.selected:hover {
    background-color: #e3f2fd;
}

.d3view-wf-worker-category-menu .worker-name {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    word-wrap: break-word;
}

.d3view-wf-worker-category-menu .worker-description {
    font-size: 12px;
    color: #666;
    word-wrap: break-word;
}

.d3view-wf-worker-io {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.d3view-wf-worker-io.visible {
    opacity: 1;
}

.d3view-wf-worker-io .worker-io-container {
    position: relative;
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 15px;
    z-index: 2;
    pointer-events: none;
}

.d3view-wf-worker-io .io-rendered {
    color: #4CAF50;
}

.d3view-wf-worker-io .io-rendered>* {
    transform: scale(1.1) !important;
}

.d3view-wf-worker-io .worker-box {
    background: transparent;
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    pointer-events: none;
    min-width: 100px;
    min-height: 50px;
    /*z-index: 2002;*/
}

.d3view-wf-worker-io .io-labels {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
    pointer-events: auto;
    /*z-index: 2003;*/
}

.d3view-wf-worker-io .input-labels {
    left: 0;
    top: 0;
    margin-right: 10px;
}

.d3view-wf-worker-io .output-labels {
    left: 100%;
    top: 0;
    margin-left: 10px;
}

.d3view-wf-worker-io .io-circles {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
    /*z-index: 2003;*/
}

.d3view-wf-worker-io .input-circles {
    top: 0;
    position: absolute;
    left: -35px;
    transform: translateY(-25%);
}

.d3view-wf-worker-io .output-circles {
    top: 0;
    position: absolute;
    left: 100%;
    top: 0;
    position: absolute;
    right: 0;
    width: 200px;
    transform: translateY(-25%);
}

.d3view-wf-worker-io .io-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    margin-bottom: 12px;
}

.d3view-wf-worker-io.visible .io-circle {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Staggered animation for input circles */
.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(1) {
    transition-delay: 0.1s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(2) {
    transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(3) {
    transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(4) {
    transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(5) {
    transition-delay: 0.5s;
}

/* Staggered animation for output circles */
.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(1) {
    transition-delay: 0.1s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(2) {
    transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(3) {
    transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(4) {
    transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(5) {
    transition-delay: 0.5s;
}

/* Label animations */
.d3view-wf-worker-io .ip-label,
.d3view-wf-worker-io .op-label {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.d3view-wf-worker-io.visible .ip-label,
.d3view-wf-worker-io.visible .op-label {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation for input labels */
.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(1) .ip-label {
    transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(2) .ip-label {
    transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(3) .ip-label {
    transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(4) .ip-label {
    transition-delay: 0.5s;
}

.d3view-wf-worker-io.visible .input-circles .io-circle:nth-child(5) .ip-label {
    transition-delay: 0.6s;
}

/* Staggered animation for output labels */
.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(1) .op-label {
    transition-delay: 0.2s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(2) .op-label {
    transition-delay: 0.3s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(3) .op-label {
    transition-delay: 0.4s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(4) .op-label {
    transition-delay: 0.5s;
}

.d3view-wf-worker-io.visible .output-circles .io-circle:nth-child(5) .op-label {
    transition-delay: 0.6s;
}

.d3view-wf-worker-io .io-circle.io-input {
    border-color: #4CAF50;
}

.d3view-wf-worker-io .io-circle.io-output {
    border-color: #2196F3;
}

.d3view-wf-worker-io .io-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.d3view-wf-worker-io .io-circle-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.d3view-wf-worker-io .io-type {
    font-size: 10px;
    color: #666;
    text-align: center;
    word-break: break-word;
    line-height: 1;
}

.d3view-wf-worker-io .io-label {
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    pointer-events: auto;
    cursor: pointer;
}

.d3view-wf-worker-io .io-label:hover {
    background-color: #f5f5f5;
}

.d3view-wf-worker-io .ip-type {
    position: absolute;
    left: 1px;
}

.d3view-wf-worker-io .op-type {
    position: absolute;
    left: 1px;
}

.d3view-wf-worker-io .ip-label {
    position: absolute;
    left: -100px;
    max-width: 100px;
}

.d3view-wf-worker-io .op-label {
    position: absolute;
    left: 35px;
}

.d3view-wf-io-renderer {
    position: absolute;
    z-index: 2004;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.d3view-wf-io-renderer.visible {
    opacity: 1;
    transform: scale(1);
}

.d3view-wf-io-renderer .io-renderer-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    min-width: 300px;
    max-width: 500px;
}

.d3view-wf-io-renderer .io-renderer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.d3view-wf-io-renderer .io-renderer-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.d3view-wf-io-renderer .io-type-icon {
    font-size: 16px;
    color: #666;
}

.d3view-wf-io-renderer .io-name {
    color: #333;
}

.d3view-wf-io-renderer .close-io-renderer {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
    position: absolute;
    right: 10px;
    z-index: 2;
}

.d3view-wf-io-renderer .close-io-renderer:hover {
    background-color: #f5f5f5;
}

.d3view-wf-io-renderer .close-io-renderer i {
    color: #666;
    font-size: 14px;
}

.d3view-wf-io-renderer .io-renderer-content {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}

.d3view-wf-io-renderer .io-renderer-content .field-name {
    display: none;
}


div.workflow div.wf-node-pointer {
    position: absolute;
    max-height: 300px;
    z-index: 2;
}

.d3view-wf-worker-category-menu .category-count {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.d3view-wf-worker-category-menu .no-results-message {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

.d3view-wf-worker-category-menu:has(.category-item.visible) .no-results-message {
    display: none;
}

.d3view-wf-worker-category-menu .worker-search-results-container {
    position: absolute;
    left: 50%;
    top: calc(50% + 70px);
    /* Position below the central search */
    transform: translateX(-50%);
    width: 100%;
    max-height: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 3;
    transition: all 0.3s ease;
}

/* Adjust position when there are fewer categories */
.d3view-wf-worker-category-menu:not(:has(.category-item:nth-child(4))) .worker-search-results-container {
    top: calc(50% + 70px);
    /* Keep consistent position below search */
}

/* Adjust category items for better positioning in upper half */
.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item {
    transform-origin: center center;
}

.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item:nth-child(1) {
    transform: translate(-60px, -80px) scale(1);
}

.d3view-wf-worker-category-menu:has(.category-item:nth-child(3):not(.visible)) .category-item:nth-child(2) {
    transform: translate(60px, -80px) scale(1);
}

/* Ensure smooth transitions */
.d3view-wf-worker-category-menu .category-item {
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.d3view-wf-worker-category-menu .worker-search-results-header {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
    background: #f8f8f8;
}

.d3view-wf-worker-category-menu .worker-search-results-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    outline: none;
    /* Remove focus outline but keep keyboard focus */
}

.d3view-wf-worker-category-menu .category-item.selected {
    background: #e6f0fa;
    border-radius: 50%;
    border: 2px solid #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
    transition: background 0.2s, border 0.2s;
}

div.workflow .io-value-container {
    pointer-events: all !important;
    width: 25vw !important;
    height: 40vh;
    max-width: unset !important;
}

div.workflow .io-value-container li.field-item,
div.workflow .io-value-container li.field-item .row {
    border: none !important;
}

div.workflow .io-value-container .worker-outputs {
    width: 100% !important;
}

div.workflow .workflow-toc-toggle-btn {
    position: fixed;
    top: calc(50% - 60px);
    left: 75px;
    width: 30px;
    height: 80px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2110;
    cursor: pointer;
}

div.workflow .workflow-toc-container.toc-collapsed {
    left: -340px;
    opacity: 0;
    pointer-events: none;
}

div.workflow .workflow-toc-container {
    position: fixed;
    top: 80px;
    left: -340px;
    /* Start off-screen */
    width: 320px;
    height: calc(100vh - 120px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2100;
    transition: left 0.3s, opacity 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

div.workflow .workflow-toc-container:not(.toc-collapsed) {
    left: 80px;
    opacity: 1;
    pointer-events: auto;
}

div.workflow .workflow-toc-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

div.workflow .workflow-toc-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

div.workflow .toc-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

div.workflow .workflow-toc-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

div.workflow .toc-item-actions {
    display: flex;
    padding: 8px;
    gap: 8px;
    background: #f8f9fa;
    border-radius: 0 0 6px 6px;
}

div.workflow .toc-item-actions button {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

div.workflow .toc-item-actions button:hover {
    background: #e3f2fd;
    color: #2196f3;
}

div.workflow .toc-item-actions .navigate-btn:hover {
    background: #e8f5e9;
    color: #4caf50;
}

div.workflow .toc-item-actions .delete-btn:hover {
    background: #ffebee;
    color: #f44336;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    div.workflow .workflow-toc-toggle-btn {
        top: 12vw;
        left: 2vw;
        width: 32px;
        height: 96px;
        font-size: 1rem;
    }
}


/* Execution Flow View Styles */
div.workflow .execution-flow-container {
    background: white;
    border-radius: 8px;
    /*box-shadow: 0 2px 12px rgba(0,0,0,0.1);*/
    padding: 20px;
    max-height: 80vh;
    overflow-y: auto;
}

div.workflow .execution-flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

div.workflow .execution-flow-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

div.workflow .execution-flow-actions {
    display: flex;
    gap: 10px;
}

div.workflow .execution-flow-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.workflow .execution-step {
    background: #f8f9fa;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

div.workflow .execution-step.expanded {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

div.workflow .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

div.workflow .step-number {
    font-weight: 600;
    color: #2196f3;
    font-size: 14px;
}

div.workflow .step-actions button i {
    transition: transform 0.3s ease;
}

div.workflow .execution-step.expanded .step-actions button i {
    transform: rotate(180deg);
}

div.workflow .step-workers {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

div.workflow .execution-step.expanded .step-workers {
    max-height: 500px;
    padding: 15px;
    overflow: auto;
}

div.workflow .worker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s, translate 0.2s;
}

div.workflow .worker-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

div.workflow .worker-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 6px;
    color: #2196f3;
}

/*div.workflow .worker-info {*/
/*    flex: 1;*/
/*    min-width: 0;*/
/*}*/

/*div.workflow .worker-name {*/
/*    font-weight: 500;*/
/*    color: #333;*/
/*    margin-bottom: 2px;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/

/*div.workflow .worker-type {*/
/*    font-size: 12px;*/
/*    color: #666;*/
/*    white-space: nowrap;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/


div.workflow .wf-matrix-flow {
    position: fixed;
    top: 80px;
    right: -40vw;
    /* Start off-screen */
    height: calc(100% - 120px);
    z-index: 4;
    width: 40vw;
    background: #FFF;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
}

div.workflow .wf-matrix-flow.visible {
    right: 0;
}

div.workflow .wf-matrix-flow.closing {
    right: -40vw;
}

div.workflow .execution-flow-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: white;
    padding: 20px;
}

div.workflow .execution-flow-loading .spinner {
    font-size: 2rem;
    color: #2196f3;
    margin-bottom: 15px;
}

div.workflow .execution-flow-loading .loading-message {
    color: #666;
    font-size: 1rem;
    text-align: center;
}

div.workflow .back-to-navigated {
    pointer-events: all !important;
    cursor: pointer !important;
    top: 100px !important;
    right: 30px !important;
    left: unset !important;
}

/* Execution Flow Worker Buttons */
.d3view-wf-execution-flow .worker-item {
    position: relative;
    padding-bottom: 40px !important;
    /* Make space for buttons */
}

.d3view-wf-execution-flow .worker-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.d3view-wf-execution-flow .worker-item:hover .worker-buttons {
    opacity: 1;
}

/* Execution Flow Worker States */
/*.d3view-wf-execution-flow .worker-item.executing {*/
/*    background: #e3f2fd;*/
/*    border-left: 3px solid #2196f3;*/
/*    animation: pulse 1.5s infinite;*/
/*}*/

.d3view-wf-execution-flow .worker-item.executing .spinner {
    display: inline-block !important;
    font-size: 1.2rem;
    color: #2196f3;
}

.d3view-wf-execution-flow .worker-item.success {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.d3view-wf-execution-flow .worker-item.error {
    background: #ffebee;
    border-left: 3px solid #f44336;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.2);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

div.workflow .d3view-wf-execution-flow .nav-tabs {
    margin-bottom: 10px;
}

div.workflow .d3view-wf-execution-flow .tab-content {
    padding: 0;
    overflow: auto;
}

div.workflow .d3view-wf-execution-flow .tab-pane {
    padding: 0;
}

div.workflow .d3view-wf-execution-flow .matrix-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

div.workflow .d3view-wf-execution-flow .matrix-table th,
div.workflow .d3view-wf-execution-flow .matrix-table td {
    border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: center;
    font-size: 12px;
}

div.workflow .d3view-wf-execution-flow .matrix-table th {
    background: #f5f5f5;
    font-weight: 600;
}


div.workflow .d3view-wf-execution-flow .matrix-table thead th {
    position: sticky;
    top: 0;
    background: #f5f5f5;
    z-index: 2;
}

/* Highlight matched worker item in execution flow search */
.d3view-wf-execution-flow .worker-item.search-match {
    background: #fffde7 !important;
    border-left: 3px solid #ffd600 !important;
    font-weight: bold;
    color: #333;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(255, 214, 0, 0.08);
    z-index: 2;
}

/* Fade non-matching siblings in execution flow search */
.d3view-wf-execution-flow .worker-item.search-fade {
    opacity: 0.4;
    filter: grayscale(0.3);
    pointer-events: none;
}

div.workflow .viz-list-item.hasInputs {
    border-left: 3px solid orange;
}

div.workflow .viz-list-item.hasOutputs {
    border-right: 3px solid green;
}

div.workflow .node-resources-container {
    pointer-events: all !important;
    width: 25vw !important;
    height: 40vh;
    max-width: unset !important;
}

/* AI Agent Chat View Styles */
div.workflow .ai-agent-chat-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

div.workflow .ai-agent-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

div.workflow .ai-agent-chat-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

div.workflow .ai-agent-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.workflow .chat-message {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 8px;
    position: relative;
}

div.workflow .user-message {
    align-self: flex-end;
    background: #e3f2fd;
    margin-left: 20%;
}

div.workflow .agent-message {
    align-self: flex-start;
    background: #f5f5f5;
    margin-right: 20%;
}

div.workflow .message-content {
    margin-bottom: 5px;
    word-wrap: break-word;
}

div.workflow .message-timestamp {
    font-size: 11px;
    color: #666;
    text-align: right;
}

div.workflow .ai-agent-chat-input {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

div.workflow .no-messages {
    text-align: center;
    color: #666;
    padding: 20px;
}

div.custom-editor .new-plugin-template-ui {
    background-color: #FFF;
}

div.custom-editor .treeview .tree-list-item [data-isleaf="true"] {
    cursor: move;
}

/*div.custom-editor .treeview .tree-list-item [data-isleaf="true"]:hover {*/
/*    background-color: #f5f5f5;*/
/*}*/


/** Basic View **/

div.workflow .workflow-index-container.hasFooter .wf-main-container[data-view="agentic"] {
    height: calc(100% - 40px);
}


/*
div.workflow .workflow-index[data-view="agentic"] .top-settings-container {
    display: none;
} */


/* div.workflow .workflow-index[data-type="agentic"] .top-settings-container .wf-execution-controls, */

/* Focused Agentic View Styles */
div.wf-agentic-view[data-view="focussed"] {
    height: 100%;
    width: 100%;
    background: #f4f7fa;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px;
}

div.wf-agentic-view[data-view="focussed"] .wf-agentic-focussed-container {
    height: 100%;
    width: 100%;
    background: #f4f7fa;
    display: flex;
    flex-direction: column;
}

div.wf-agentic-view[data-view="focussed"] .row.no-gutters.align-items-center {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

div.wf-agentic-view[data-view="focussed"] .agent-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #222;
    margin: 0;
}

div.wf-agentic-view[data-view="focussed"] .agentic-chat-area {
    background: #fff;
    border-right: 1px solid #e3e6ea;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

div.wf-agentic-view[data-view="focussed"] .agent-fora {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 0.5rem 0.5rem 0.5rem;
    background: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
}

div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
    background: #f9fafb;
    border-left: 1px solid #e3e6ea;
    box-shadow: 0 0 16px rgba(33, 150, 243, 0.06);
    transition: box-shadow 0.3s, transform 0.3s;
    /*min-width: 260px;*/
    /*max-width: 420px;*/
    height: 100%;
    flex-direction: column;
    z-index: 2;
    display: none;
}

div.wf-agentic-view[data-view="focussed"] .tools-resources-area.in,
div.wf-agentic-view[data-view="focussed"] .tools-resources-area.collapse.in {
    box-shadow: -4px 0 24px rgba(33, 150, 243, 0.10);
    border-left: 2px solid #2196f3;
    display: flex;
}

div.wf-agentic-view[data-view="focussed"] .tools-placeholder {
    margin-top: 3rem;
    color: #888;
    font-size: 1.1rem;
}

div.wf-agentic-view[data-view="focussed"] .back-to-canvas {
    font-weight: 500;
    letter-spacing: 0.01em;
}

@media (max-width: 900px) {

    div.wf-agentic-view[data-view="focussed"] .agentic-chat-area,
    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        max-width: 100%;
        min-width: 0;
        border: none;
    }

    div.wf-agentic-view[data-view="focussed"] .row.no-gutters.flex-grow-1 {
        flex-direction: column;
    }

    div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
        border-top: 1px solid #e3e6ea;
        border-left: none;
        box-shadow: 0 -4px 24px rgba(33, 150, 243, 0.10);
        /*min-height: 180px;*/
        /*max-height: 50vh;*/
        height: auto;
    }
}

div.wf-agentic-view[data-view="focussed"] .tools-resources-area .p-3 {
    padding: 1.5rem !important;
}

div.wf-agentic-view[data-view="focussed"] .tools-resources-area {
    overflow-y: auto;
}

div.wf-agentic-view[data-view="focussed"] .start-agent,
div.wf-agentic-view[data-view="focussed"] .restart-agent {
    min-width: 90px;
}

div.wf-agentic-view.other-worker-active {
    opacity: 0.5;
    cursor: not-allowed;
}

div.wf-agentic-view.other-worker-active>.plugin-tabs {
    pointer-events: none;
}

div.wf-import-merge .dt-container {
    min-height: 400px;
    ;
}

/* Workflow Selection Container Styles */
/* Simple toggle icons at top border center */

/* Hide the button group */
div.wf-import-merge .workflow-type-toggle {
    display: none;
}

/* Form sections */
/* Legacy styles for backward compatibility */
div.wf-import-merge .or-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

div.wf-import-merge .or-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ddd;
    z-index: 1;
}

div.wf-import-merge .or-text {
    background: white;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    z-index: 2;
    position: relative;
}

/* Interactive Layout Resizer Styling */
div.wf-flow-modal-execution .ui-layout-resizer {
    background: linear-gradient(90deg, #e0e0e0 0%, #f5f5f5 50%, #e0e0e0 100%);
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    position: relative;
    transition: background 0.2s ease;
}

div.wf-flow-modal-execution .ui-layout-resizer:hover {
    background: linear-gradient(90deg, #d0d0d0 0%, #e8e8e8 50%, #d0d0d0 100%);
    cursor: ew-resize;
}

div.wf-flow-modal-execution .ui-layout-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 30px;
    background: repeating-linear-gradient(90deg,
            #999 0px,
            #999 2px,
            transparent 2px,
            transparent 4px);
    border-radius: 2px;
}

div.wf-flow-modal-execution .ui-layout-container.plugin-layout>div.ui-layout-pane.full-w {
    width: 100% !important;
}

div.wf-flow-modal-execution .user-review-fb {
    border-left: 1px solid #DDD;
}

/* Polling Worker Status View Styles - Simplified */



/** START AGent summary **/
.workflow-modal .workflow-input-summary .summary-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e0e0e0;
    min-width: 180px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.workflow-modal .workflow-input-summary .lead {
    font-size: 1.1em;
    font-weight: 600;
}

.workflow-modal .workflow-input-summary .stat-list {
    margin-top: 10px;
}

.workflow-modal .workflow-input-summary .stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 1em;
}

.workflow-modal .workflow-input-summary .stat-label {
    color: #888;
}

.workflow-modal .workflow-input-summary .stat-value {
    font-weight: bold;
    color: #333;
}

.workflow-modal .workflow-input-summary .side-by-side-container {
    margin-top: 30px;
}


/* Simulations Popover Styles */
.simulations-popover {
    max-width: 800px !important;
    min-width: 600px !important;
    width: auto !important;
}

.simulations-popover .popover-content {
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
}

.simulations-popover-container {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.simulations-popover .popover-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.simulations-popover .popover-title {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.simulations-popover .popover-title i {
    margin-right: 8px;
    color: #007bff;
}

.simulations-popover .popover-controls {
    display: flex;
    gap: 5px;
}

.simulations-popover .popover-controls .btn {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 3px;
}

.simulations-popover .popover-body {
    padding: 15px;
    max-height: 500px;
    overflow-y: auto;
}

.simulations-popover .simulations-table-container {
    min-height: 200px;
    height: 300px;
}

.simulations-popover .table-loading {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.simulations-popover .table-loading i {
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
}

/* Ensure popover appears above other elements */
.simulations-popover {
    z-index: 1051 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .simulations-popover {
        max-width: 95vw !important;
        min-width: 95vw !important;
    }

    .simulations-popover .popover-body {
        max-height: 60vh;
    }
}

div.workflow .wf-floating-div.clickable.wf-polling-tooltip {
    width: 40vw;
    max-width: unset;
}

div.workflow .wf-floating-div.clickable {
    pointer-events: all;
}


div.wf-import-merge div[data-use-value] {
    position: relative;
}

div.wf-import-merge div[data-use-value].checked:after {
    content: '\f00c';
    font-family: FontAwesome;
    font-size: 1.4em;
    left: -13px;
    top: calc(50% - 14px);
    z-index: 2;
    color: #5cb85c;
    position: absolute;
}

.wf-import-merge .right-panel .default-fb li.field-item {
    height: 100%;
    overflow: auto;
    display: flex;
    align-items: center;
}

.wf-import-merge .right-panel .default-fb li.field-item div.worker-output-preview.curve-sparkline {
    display: none;

}

/* Import and Merge View Styles */
.wf-import-merge .merge-settings-option:hover {
    background-color: transparent;
}

/**
 * Enhanced Error View Styles
 * Minimal styling for the consolidated workflow error handling system
 * Uses Bootstrap 3 classes where possible
 */


/* Fix Action Buttons */
.fixes-grid {
    margin-top: 0;
}


/*.d3view-generic-modal-container.wf-error-modal {*/
/*    z-index: 80001;*/
/*}*/

/* Enhanced Error View Styles */
.wf-error-modal .enhanced-error-container {
    display: flex;
    flex-direction: column;
}

.wf-error-modal .enhanced-error-container .error-content {
    overflow-y: auto;
    flex: 1;
}

.wf-error-modal .enhanced-error-container .error-description {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .enhanced-description-box {
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
    border: 2px solid #f5c6cb;
    border-left: 5px solid #dc3545;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    position: relative;
}

.wf-error-modal .enhanced-error-container .enhanced-description-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);
    border-radius: 8px 8px 0 0;
}

.wf-error-modal .enhanced-error-container .enhanced-description-text {
    margin-top: 12px;
    line-height: 1.6;
    color: #2c3e50;
    font-size: 1.2em;
    font-weight: 400;
}

.wf-error-modal .enhanced-error-container .original-error-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #dee2e6;
    border-left: 5px solid #6c757d;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.wf-error-modal .enhanced-error-container .original-error-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6c757d 0%, #adb5bd 100%);
    border-radius: 8px 8px 0 0;
}

.wf-error-modal .enhanced-error-container .original-error-code {
    display: block;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-top: 12px;
    color: #dc3545;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    position: relative;
}

.wf-error-modal .enhanced-error-container .original-error-code::before {
    content: 'ERROR CODE';
    position: absolute;
    top: -10px;
    left: 15px;
    background: #dc3545;
    color: white;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/*.wf-error-modal .enhanced-error-container .error-message-box {*/
/*    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);*/
/*    border: 2px solid #f5c6cb;*/
/*    border-left: 5px solid #dc3545;*/
/*    border-radius: 8px;*/
/*    padding: 20px;*/
/*    position: relative;*/
/*}*/

/*.wf-error-modal .enhanced-error-container .error-message-box::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 4px;*/
/*    background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);*/
/*    border-radius: 8px 8px 0 0;*/
/*}*/

.wf-error-modal .enhanced-error-container .error-message-text {
    line-height: 1.6;
    font-size: 1.2em;
    font-weight: 400;
    max-height: 300px;
    overflow: auto;
}

.wf-error-modal .enhanced-error-container .error-content .form-group {
    margin-top: 20px;
}

/* Panel Title Alignment - Left Aligned */
.wf-error-modal .enhanced-error-container .panel-heading {
    text-align: left;
}

.wf-error-modal .enhanced-error-container .panel-title {
    text-align: left;
    font-weight: 600;
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.wf-error-modal .enhanced-error-container .panel-title i {
    font-size: 20px;
}

/* Worker name link styling */
.wf-error-modal .enhanced-error-container .wf-worker-name {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
}

.wf-error-modal .enhanced-error-container .wf-worker-name:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wf-error-modal .enhanced-error-container .wf-worker-type {
    font-weight: 500;
    color: #495057;
}

/* Collapsible Sections */
.wf-error-modal .enhanced-error-container .collapsible-sections {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .collapsible-section {
    margin-bottom: 15px;
}

.wf-error-modal .enhanced-error-container .collapsible-section .panel {
    border: none;
}

.wf-error-modal .enhanced-error-container .collapsible-header {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: none;
    background: none;
}

.wf-error-modal .enhanced-error-container .error-content .row {
    margin: 0;
}

.wf-error-modal .enhanced-error-container .collapsible-header:hover {
    background: rgba(0, 0, 0, 0.05);
}

.wf-error-modal .enhanced-error-container .collapsible-header .panel-title {
    display: flex;
    align-items: center;

    margin: 0;
}

.wf-error-modal .enhanced-error-container .toggle-icon {
    font-size: 14px;
}

.wf-error-modal .enhanced-error-container .collapsible-content {
    overflow: hidden;
}

.wf-error-modal .enhanced-error-container .possible-fixes-section {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .fix-text {
    flex: 1;
    font-weight: 500;
    z-index: 1;
    position: relative;
}

.wf-error-modal .enhanced-error-container .worker-info-section {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .worker-details .table {
    margin-bottom: 0;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.wf-error-modal .enhanced-error-container .worker-details .table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    color: #495057;
    border-color: #dee2e6;
    padding: 12px 15px;
    font-size: 14px;
}

.wf-error-modal .enhanced-error-container .worker-details .table td {
    padding: 12px 15px;
    border-color: #dee2e6;
    vertical-align: middle;
    font-size: 14px;
}



.wf-error-modal .enhanced-error-container .invalid-inputs-section {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .technical-details-section {
    margin-bottom: 20px;
}

.wf-error-modal .enhanced-error-container .technical-details h5 {
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
    color: #495057;
    font-size: 16px;
    position: relative;
}

.wf-error-modal .enhanced-error-container .technical-details h5::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #6c757d 0%, #adb5bd 100%);
}

.wf-error-modal .enhanced-error-container .technical-details .table {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}

.wf-error-modal .enhanced-error-container .label {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.1);
}



/* Responsive adjustments */

/* Hide play controls and status when search is focused */
div.workflow .workflow-index-container.search-focused .play-controls,
div.workflow .workflow-index-container.search-focused .wf-execution-status {
    display: none !important;
}

/* Hide execution status elements on smaller screens (1024x612 and below) */
@media (max-width: 1024px) and (max-height: 612px),
(max-width: 1024px) {

    div.workflow .wf-dropdowns li.wf-execution-controls.play-controls-dropdown,
    div.workflow .wf-dropdowns-list>li.dropdown:last-child,
    div.workflow .wf-start-status,
    div.workflow .wf-execution-spinner.exec_info,
    div.workflow .pipe {
        display: none !important;
    }
}

/* Hide play controls and status when search is focused */
@media (max-width: 1024px) and (max-height: 612px),
(max-width: 1024px) {
    div.workflow .workflow-index-container.search-focused .wf-control-buttons {
        display: none !important;
    }
}

/* Timeline Summary Styles */
div.workflow .wf-main-container.timelineEnabled .timeline-summary {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-item {
    padding: 10px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-value {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

div.workflow .wf-main-container.timelineEnabled .timeline-summary .summary-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Workflow Type Labels */
div.workflow .wf-type-label,
div.workflow-modal .wf-type-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .wf-type-label.worker,
div.workflow-modal .wf-type-label.worker {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

div.workflow .wf-type-label.input,
div.workflow-modal .wf-type-label.input {
    background-color: #e8f5e8;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

div.workflow .wf-type-label.output,
div.workflow-modal .wf-type-label.output {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

div.workflow .wf-type-label.iterator,
div.workflow-modal .wf-type-label.iterator {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #ce93d8;
}

/** Added by shashank2104 on 2025-09-22 - Reference and Assignment type labels - Styling for reference and assignment workflow type labels **/
div.workflow .wf-type-label.reference,
div.workflow-modal .wf-type-label.reference {
    background-color: #e1f5fe;
    color: #0277bd;
    border: 1px solid #81d4fa;
}

div.workflow .wf-type-label.assignment,
div.workflow-modal .wf-type-label.assignment {
    background-color: #fce4ec;
    color: #c2185b;
    border: 1px solid #f8bbd9;
}

/** Added by shashank2104 on 09/28/2025 at 10:21 AM - JIRA-XXX - Add edge type label styling **/
div.workflow .wf-type-label.edge,
div.workflow-modal .wf-type-label.edge {
    background-color: #e0f2f1;
    color: #00695c;
    border: 1px solid #b2dfdb;
}

div.workflow .wf-type-label.action,
div.workflow-modal .wf-type-label.action {
    background-color: #fffde7;
    color: #333;
    border: 1px solid yellow;
}

/* Ancestry Path Compact Styles */
div.workflow .ancestry-path-compact,
div.workflow-modal .ancestry-path-compact {
    max-height: 40px;
    /* Limit to 2 lines max */
    overflow: hidden;
    line-height: 1.2;
}

div.workflow .ancestry-chain-compact,
div.workflow-modal .ancestry-chain-compact {
    max-width: 100%;
    overflow: hidden;
}

div.workflow .ancestry-pill,
div.workflow-modal .ancestry-pill {
    transition: all 0.2s ease;
    cursor: pointer;
}

div.workflow .ancestry-pill:hover,
div.workflow-modal .ancestry-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .show-ancestry-path,
div.workflow-modal .show-ancestry-path {
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #6c757d;
}

div.workflow .show-ancestry-path:hover,
div.workflow-modal .show-ancestry-path:hover {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    transform: scale(1.05);
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
}

div.workflow .show-ancestry-path:disabled,
div.workflow-modal .show-ancestry-path:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Ancestry Popover Styles */
div.workflow .ancestry-popover,
div.workflow-modal .ancestry-popover {
    max-width: 500px;
    min-width: 300px;
}

div.workflow .ancestry-popover-header,
div.workflow-modal .ancestry-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 4px 4px 0 0;
}

div.workflow .ancestry-popover-header h5,
div.workflow-modal .ancestry-popover-header h5 {
    margin: 0;
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

div.workflow .ancestry-popover-close,
div.workflow-modal .ancestry-popover-close {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

div.workflow .ancestry-popover-close:hover,
div.workflow-modal .ancestry-popover-close:hover {
    opacity: 1;
    color: #333;
}

div.workflow .ancestry-popover-body,
div.workflow-modal .ancestry-popover-body {
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;
}

div.workflow .ancestry-full-path,
div.workflow-modal .ancestry-full-path {
    display: block;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
}

div.workflow .ancestry-full-pill,
div.workflow-modal .ancestry-full-pill {
    transition: all 0.2s ease;
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 8px 12px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

div.workflow .ancestry-full-pill:hover,
div.workflow-modal .ancestry-full-pill:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Search Filter Info Styles */
div.workflow .wf-search-filter-info,
div.workflow-modal .wf-search-filter-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    padding: 8px 12px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 4px;
    font-size: 12px;
}

div.workflow .wf-search-filter-info .filter-label,
div.workflow-modal .wf-search-filter-info .filter-label {
    color: #1976d2;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow .wf-search-filter-info .filter-label i,
div.workflow-modal .wf-search-filter-info .filter-label i {
    color: #1976d2;
}

div.workflow .wf-search-filter-info .clear-ancestry-filter,
div.workflow-modal .wf-search-filter-info .clear-ancestry-filter {
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #1976d2;
    color: #1976d2;
    background: transparent;
    border-radius: 3px;
    transition: all 0.2s ease;
}

div.workflow .wf-search-filter-info .clear-ancestry-filter:hover,
div.workflow-modal .wf-search-filter-info .clear-ancestry-filter:hover {
    background: #1976d2;
    color: white;
}

/* Compact Ancestry Card Styles */
div.workflow .wf-compact-ancestry,
div.workflow-modal .wf-compact-ancestry {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    max-width: 400px;
    min-width: 300px;
}

div.workflow .wf-compact-ancestry .ancestry-card,
div.workflow-modal .wf-compact-ancestry .ancestry-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    position: relative;
}

div.workflow .wf-compact-ancestry .ancestry-header,
div.workflow-modal .wf-compact-ancestry .ancestry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

div.workflow .wf-compact-ancestry .ancestry-title,
div.workflow-modal .wf-compact-ancestry .ancestry-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

div.workflow .wf-compact-ancestry .ancestry-title i,
div.workflow-modal .wf-compact-ancestry .ancestry-title i {
    margin-right: 5px;
    color: #666;
}

div.workflow .wf-compact-ancestry .ancestry-close,
div.workflow-modal .wf-compact-ancestry .ancestry-close {
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

div.workflow .wf-compact-ancestry .ancestry-close:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-close:hover {
    background: #f5f5f5;
    color: #333;
}

div.workflow .wf-compact-ancestry .ancestry-buttons,
div.workflow-modal .wf-compact-ancestry .ancestry-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

div.workflow .wf-compact-ancestry .ancestry-button,
div.workflow-modal .wf-compact-ancestry .ancestry-button {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

div.workflow .wf-compact-ancestry .ancestry-button i,
div.workflow-modal .wf-compact-ancestry .ancestry-button i {
    margin-right: 4px;
}

div.workflow .wf-compact-ancestry .ancestry-button.start,
div.workflow-modal .wf-compact-ancestry .ancestry-button.start {
    background: #e8f5e8;
    border-color: #c3e6c3;
    color: #28a745;
}

div.workflow .wf-compact-ancestry .ancestry-button.start:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.start:hover {
    background: #d4edda;
    border-color: #b8dacc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.worker,
div.workflow-modal .wf-compact-ancestry .ancestry-button.worker {
    background: #e3f2fd;
    border-color: #bbdefb;
    color: #1976d2;
}

div.workflow .wf-compact-ancestry .ancestry-button.worker:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.worker:hover {
    background: #bbdefb;
    border-color: #90caf9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.decision,
div.workflow-modal .wf-compact-ancestry .ancestry-button.decision {
    background: #fff3cd;
    border-color: #ffeaa7;
    color: #856404;
}

div.workflow .wf-compact-ancestry .ancestry-button.decision:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.decision:hover {
    background: #ffeaa7;
    border-color: #fdcb6e;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(133, 100, 4, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-button.current,
div.workflow-modal .wf-compact-ancestry .ancestry-button.current {
    background: #e1f5fe;
    border-color: #b3e5fc;
    color: #0277bd;
    font-weight: 600;
}

div.workflow .wf-compact-ancestry .ancestry-button.current:hover,
div.workflow-modal .wf-compact-ancestry .ancestry-button.current:hover {
    background: #b3e5fc;
    border-color: #81d4fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(2, 119, 189, 0.2);
}

div.workflow .wf-compact-ancestry .ancestry-arrow,
div.workflow-modal .wf-compact-ancestry .ancestry-arrow {
    color: #999;
    font-size: 12px;
    margin: 0 4px;
}

/* Pinned Views Button Group Styles */
div.workflow .pinned-views.btn-group-vertical {
    position: absolute;
    top: 100px;
    right: 20px;
    z-index: 5;
}

div.workflow .pinned-views .dropdown-menu {
    min-width: 250px;
    max-height: 300px;
    overflow-y: auto;
}

div.workflow .pinned-views .dropdown-header {
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

div.workflow .pinned-views .pinned-views-count-badge {
    margin-left: 5px;
}

/* Legacy Pinned Views UI Styles (for backward compatibility) */


div.workflow .wf-pinned-views .pinned-view-name {
    flex: 1;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

div.workflow .wf-pinned-views .pinned-view-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

div.workflow .wf-pinned-views .pinned-view-item {
    cursor: pointer;
}

div.workflow .wf-pinned-views .pinned-view-item:hover {
    background: #f5f5f5;
}

div.workflow .wf-pinned-views .pin-view {
    margin-right: 8px;
}

div.workflow .wf-pinned-views .close {
    cursor: pointer;
    font-size: 16px;
    color: #6c757d;
    padding: 4px;
    line-height: 1;
}

div.workflow .wf-pinned-views .close:hover {
    color: #dc3545;
}

/* Worker Info on Hover Styles - Circular Layout */
/** Added by shashank2104 on  Circular layout redesign for worker info container **/
div.workflow .wf-worker-info-container {
    position: absolute;
    z-index: 2;
    width: 400px;
    height: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Close button positioned above wf-info-top container to the right */
div.workflow .wf-worker-info-container .close {
    position: absolute;
    top: -30px;
    right: 0px;
    z-index: 1001;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Ancestry container above the circle */
div.workflow .wf-worker-info-top {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -100%);
    background: #FFF;
    border: none;
    border-radius: 0;
    box-shadow: var(--plugin-box-shadow-lighter);
    padding: 0;
    min-width: auto;
    max-width: none;
    /* backdrop-filter: none; */
    pointer-events: auto;
}

/* Input pills positioned around the circle */
div.workflow .wf-worker-info-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    max-width: none;
    backdrop-filter: none;
}

/* Output pills positioned around the circle */
div.workflow .wf-worker-info-right {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    max-width: none;
    backdrop-filter: none;
}

/* Circle around the worker node */
div.workflow .wf-worker-info-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #2196f3;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.1);
    pointer-events: none;
    z-index: -1;
}

/* Connection lines from circle to containers */
div.workflow .wf-worker-info-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(33, 150, 243, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
}

div.workflow .wf-info-header {
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Count badge styling */
div.workflow .wf-count-badge {
    background: #007bff;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
}

/* Left section header positioning */
div.workflow .wf-worker-info-left .wf-info-header {
    position: absolute;
    top: 10px;
    left: 0;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-lighter);
}

/* Right section header positioning */
div.workflow .wf-worker-info-right .wf-info-header {
    position: absolute;
    top: 10px;
    right: 0;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-lighter);
}

div.workflow .wf-info-content {
    max-height: none;
    overflow-y: visible;
}

/* Input pills styling */
div.workflow .wf-worker-info-left .wf-info-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: unset;
    ;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

div.workflow .wf-worker-info-left .wf-info-item:hover {
    background: #e8f5e8;
    border-color: #4caf50;
    transform: scale(1.05);
}

/* Output pills styling */
div.workflow .wf-worker-info-right .wf-info-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-size: 11px;
    line-height: 1.2;
    transition: all 0.2s ease;
}

div.workflow .wf-worker-info-right .wf-info-item:hover {
    background: #e3f2fd;
    border-color: #2196f3;
    transform: scale(1.05);
}

div.workflow .wf-info-item:last-child {
    margin-bottom: 0;
}

div.workflow .wf-info-item .lead {
    margin-bottom: 4px;
    font-size: 12px;
}

div.workflow .wf-info-item .wf-type-label {
    margin-right: 4px;
    font-size: 10px;
}

div.workflow .wf-info-item .text-muted {
    margin-bottom: 4px;
    font-size: 10px;
}

div.workflow .wf-info-empty {
    font-size: 12px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 12px 0;
}

/* Ellipsis button for overflow */
div.workflow .wf-info-ellipsis {
    background: #007bff;
    border: 1px solid #007bff;
    border-radius: 15px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    color: white;
    text-align: center;
    min-width: 30px;
    position: absolute;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

div.workflow .wf-info-ellipsis:hover {
    background: #0056b3;
    border-color: #0056b3;
    color: white;
    transform: scale(1.05);
}

/* Overflow popover */
div.workflow .wf-info-overflow-popover {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px;
    max-width: 300px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1001;
    display: none;
}

div.workflow .wf-info-overflow-popover.visible {
    display: block;
}

div.workflow .wf-info-overflow-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px 6px;
    margin-bottom: 8px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* font-size: 10px; */
    line-height: 1.2;
}

div.workflow .wf-info-overflow-item:hover {
    background: #f5f5f5;
}

/* Pill popover styling */
div.workflow .wf-pill-popover-content {
    max-width: 300px;
    font-size: 12px;
}

div.workflow .wf-pill-popover-content .popover-section {
    margin-bottom: 10px;
}

div.workflow .wf-pill-popover-content .popover-section:last-child {
    margin-bottom: 0;
}

div.workflow .wf-pill-popover-content h6 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow .wf-pill-popover-content h6 i {
    color: #007bff;
}

div.workflow .wf-pill-popover-content p {
    margin: 0 0 5px 0;
    line-height: 1.4;
}

div.workflow .wf-pill-popover-content hr {
    margin: 8px 0;
    border-color: #eee;
}

div.workflow .wf-pill-popover-content ul {
    margin: 0;
    padding-left: 0;
}

div.workflow .wf-pill-popover-content li {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    font-size: 11px;
}

/* Ancestry styling */
div.workflow .wf-worker-info-top .wf-info-content {
    text-align: center;
}

/* Ancestry display with scroll buttons */
div.workflow .wf-ancestry-display {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 100%;
}

div.workflow .wf-ancestry-display .wf-scroll-left,
div.workflow .wf-ancestry-display .wf-scroll-right {
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.2;
    border-radius: 3px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    min-width: 20px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}

div.workflow .wf-ancestry-display .wf-scroll-left:hover,
div.workflow .wf-ancestry-display .wf-scroll-right:hover {
    background: #f5f5f5;
    color: #333;
}

div.workflow .wf-ancestry-display .wf-scroll-left.disabled,
div.workflow .wf-ancestry-display .wf-scroll-right.disabled {
    color: #ccc;
    cursor: not-allowed;
    background: #f9f9f9;
}

div.workflow .wf-ancestry-display .wf-scroll-left.disabled:hover,
div.workflow .wf-ancestry-display .wf-scroll-right.disabled:hover {
    background: #f9f9f9;
    color: #ccc;
}

div.workflow .wf-ancestry-display .wf-ancestry-current {
    flex: 1;
    text-align: center;
    min-width: 0;
    /* Allow text to truncate */
    overflow: hidden;
}

/* Ensure ancestry path items display horizontally and fit within container */
div.workflow .wf-ancestry-display .ancestry-path {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Make ancestry pills responsive to fit container */
div.workflow .wf-ancestry-display .ancestry-pill {
    flex-shrink: 1;
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure ellipsis item doesn't shrink */
div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
    flex-shrink: 0;
    max-width: 20px;
}

/* Responsive adjustments for smaller containers */
@media (max-width: 768px) {
    div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 80px;
        font-size: 10px;
        padding: 4px 8px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 15px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 40vw;
    }
}

/* For very small viewports */
@media (max-width: 480px) {
    div.workflow .wf-ancestry-display .ancestry-pill {
        max-width: 60px;
        font-size: 9px;
        padding: 2px 4px;
    }

    div.workflow .wf-ancestry-display .ancestry-pill[data-worker-id="ellipsis"] {
        max-width: 12px;
    }

    div.workflow .wf-worker-info-container .wf-worker-info-top {
        max-width: 50vw;
    }
}

div.workflow .wf-worker-info-top .wf-info-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 15px;
    padding: 10px 15px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

div.workflow .wf-worker-info-top .wf-info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #e9ecef;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    div.workflow .wf-worker-info-container {
        width: 300px;
        height: 300px;
    }

    div.workflow .wf-worker-info-left,
    div.workflow .wf-worker-info-right {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    div.workflow .wf-worker-info-top {
        top: -50px;
    }

    /* Adjust pill sizes for mobile */
    div.workflow .wf-worker-info-left .wf-info-item,
    div.workflow .wf-worker-info-right .wf-info-item {
        max-width: 100px;
        font-size: 10px;
        padding: 3px 6px;
    }
}

div.workflow .wf-worker-info-container .wf-worker-info-top {
    max-width: 80vw;
    max-height: unset;
}

/* Ensure the ancestry content fits within the container */
div.workflow .wf-worker-info-container .wf-worker-info-top .wf-info-content {
    max-width: 100%;
    overflow: hidden;
}

div.workflow .wf-worker-info-container .wf-inline-ancestry,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    /* background: rgba(255,255,255,0.4); */
    box-shadow: unset;
    border: none;
    max-width: unset;
}

div.workflow .wf-worker-info-container .wf-inline-ancestry .lead,
div.workflow .wf-worker-info-container .wf-inline-ancestry .ancestry-close,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry .lead,
div.workflow-modal .wf-worker-info-container .wf-inline-ancestry .ancestry-close {
    display: none;
}

div.workflow div.wf-main-container .wf-top-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

/* Enhanced Collapsed Sequence Expanded View Styles */
/* Added by shashank2104 on 09/22/25 - DW-2325 - Circular layout with pagination and search */
div.workflow .d3view-wf-collapsed-sequence-expanded {
    position: fixed;
}

div.workflow[data-in-modal="false"] .d3view-wf-collapsed-sequence-expanded {
    position: absolute !important;
}

div.workflow .collapsed-sequence-expanded-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.workflow .collapsed-sequence-expanded-wrapper .expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 15px;
    background: white;
    border-radius: 8px;
    min-width: 400px;
}

div.workflow .collapsed-sequence-expanded-wrapper .expanded-header h4 {
    margin: 0;
    color: #1a73e8;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

div.workflow .collapsed-sequence-expanded-wrapper .header-actions {
    display: flex;
    gap: 8px;
}

div.workflow .collapsed-sequence-expanded-wrapper .header-actions .btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.workflow .collapsed-sequence-expanded-container {
    background: white;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #e1e5e9;
    width: 400px;
    height: 400px;
    animation: expandFromCollapsed 0.3s ease-out;
    transform-origin: center bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

div.workflow .collapsed-sequence-expanded-container.collapsing {
    animation: collapseToCollapsed 0.3s ease-in;
}

@keyframes expandFromCollapsed {
    0% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes collapseToCollapsed {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }

    50% {
        transform: scale(0.7) translateY(10px);
        opacity: 0.7;
    }

    100% {
        transform: scale(0.1) translateY(20px);
        opacity: 0;
    }
}

/* Connection line from collapsed box to expanded view */
div.workflow .collapsed-sequence-expanded-container::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, #1a73e8, transparent);
    z-index: -1;
}



div.workflow .collapsed-sequence-expanded-container .sequence-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 12px;
}


div.workflow .collapsed-sequence-expanded-container .search-container {
    margin-bottom: 15px;
    width: 80%;
}

div.workflow .collapsed-sequence-expanded-container .search-container .input-group {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

div.workflow .collapsed-sequence-expanded-container .search-container .input-group-addon {
    background: #f8f9fa;
    border: 1px solid #dadce0;
    border-right: none;
    color: #5f6368;
    padding: 8px 12px;
}

div.workflow .collapsed-sequence-expanded-container .search-container .form-control:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

div.workflow .collapsed-sequence-expanded-container .workers-list-container {
    margin: 2px 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.workflow .collapsed-sequence-expanded-container .workers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
}

div.workflow .collapsed-sequence-expanded-container .worker-item {
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 1px;
}

div.workflow .collapsed-sequence-expanded-container .worker-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

div.workflow .collapsed-sequence-expanded-container .worker-circle-inner {
    background: white;
    border: 2px solid #1a73e8;
    border-radius: 8px;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 6px;
}

div.workflow .collapsed-sequence-expanded-container .worker-item:hover .worker-circle-inner {
    background: #e8f0fe;
    border-color: #1557b0;
}

div.workflow .collapsed-sequence-expanded-container .worker-icon {
    font-size: 10px;
    color: #1a73e8;
    margin-bottom: 2px;
}

div.workflow .collapsed-sequence-expanded-container .worker-name {
    font-size: 10px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1px;
}

div.workflow .collapsed-sequence-expanded-container .worker-type {
    color: #666;
    text-align: center;
    line-height: 1.0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.workflow .collapsed-sequence-expanded-container .pagination-container {
    margin-top: 10px;
    width: 100%;
    padding-top: 15px;
    border-top: 1px solid #e1e5e9;
}

div.workflow .collapsed-sequence-expanded-container .pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}


div.workflow .collapsed-sequence-expanded-container .page-info {
    font-size: 12px;
    color: #5f6368;
    font-weight: 500;
}

div.workflow .collapsed-sequence-expanded-container .no-results {
    padding: 30px 20px;
    color: #5f6368;
}

div.workflow .collapsed-sequence-expanded-container .no-results i {
    margin-bottom: 10px;
    opacity: 0.5;
}

div.workflow .collapsed-sequence-expanded-container .no-results p {
    margin: 0;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    div.workflow .collapsed-sequence-expanded-container {
        min-width: 320px;
        max-width: 350px;
        padding: 15px;
    }

    div.workflow .collapsed-sequence-expanded-container .workers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-circle-inner {
        height: 70px;
        padding: 6px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-name {
        font-size: 10px;
    }

    div.workflow .collapsed-sequence-expanded-container .worker-type {
        font-size: 8px;
    }
}

/* Added by shashank2104 on 09/30/2025 at 12:27 AM - JIRA-XXX - Modern filter panel styles */
div.workflow .wf-filter-panel,
div.workflow-modal .wf-filter-panel {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    overflow: hidden;
    min-width: 420px;
    width: 35vw;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

div.workflow .wf-filter-header,
div.workflow-modal .wf-filter-header {
    background: #f8f9fa;
    color: #333;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}

div.workflow .wf-filter-title,
div.workflow-modal .wf-filter-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
}

div.workflow .wf-filter-title i,
div.workflow-modal .wf-filter-title i {
    margin-right: 8px;
    font-size: 16px;
    color: #666;
}

div.workflow .wf-filter-close,
div.workflow-modal .wf-filter-close {
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

div.workflow .wf-filter-close:hover,
div.workflow-modal .wf-filter-close:hover {
    background: #e9ecef;
    color: #333;
}

div.workflow .wf-filter-content,
div.workflow-modal .wf-filter-content {
    padding: 16px;
}

div.workflow .wf-filter-section,
div.workflow-modal .wf-filter-section {
    margin-bottom: 28px;
}

div.workflow .wf-filter-section:last-child,
div.workflow-modal .wf-filter-section:last-child {
    margin-bottom: 0;
}

div.workflow .wf-filter-section-title,
div.workflow-modal .wf-filter-section-title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

div.workflow .wf-filter-section-title i,
div.workflow-modal .wf-filter-section-title i {
    margin-right: 8px;
    color: #666;
    font-size: 14px;
}

div.workflow .wf-filter-row,
div.workflow-modal .wf-filter-row {
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    gap: 16px;
    margin-bottom: 16px;
}

/** Added by shashank2104 on 09/30/2025 at 05:09 PM - Make Worker Classification and Worker Groups 50% each **/
div.workflow .wf-filter-row.d3view-flex-v .wf-filter-item,
div.workflow-modal .wf-filter-row.d3view-flex-v .wf-filter-item {
    width: 50%;
    flex: 0 0 calc(50% - 16px);
}

div.workflow .wf-filter-row:last-child,
div.workflow-modal .wf-filter-row:last-child {
    margin-bottom: 0;
}

div.workflow .wf-filter-item,
div.workflow-modal .wf-filter-item {
    display: flex;
    flex-direction: column;
}

div.workflow .wf-filter-label,
div.workflow-modal .wf-filter-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 500;
    color: #34495e;
    font-size: 13px;
}

div.workflow .wf-filter-label i,
div.workflow-modal .wf-filter-label i {
    margin-right: 6px;
    color: #7f8c8d;
    font-size: 14px;
    width: 16px;
    text-align: center;
}

div.workflow .wf-filter-select,
div.workflow .wf-filter-input,
div.workflow-modal .wf-filter-select,
div.workflow-modal .wf-filter-input {
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    /* padding: 8px 10px; */
    /* font-size: 14px; */
    transition: all 0.2s ease;
    background: white;
    color: #333;
    width: 100%;
}

div.workflow .wf-filter-select:focus,
div.workflow .wf-filter-input:focus,
div.workflow-modal .wf-filter-select:focus,
div.workflow-modal .wf-filter-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

div.workflow .wf-filter-select:hover,
div.workflow .wf-filter-input:hover,
div.workflow-modal .wf-filter-select:hover,
div.workflow-modal .wf-filter-input:hover {
    border-color: #999;
}

div.workflow .wf-filter-toggles,
div.workflow-modal .wf-filter-toggles {
    display: flex;
    /* flex-direction: column; */
    gap: 12px;
    flex-wrap: wrap;
}

div.workflow .wf-toggle-item,
div.workflow-modal .wf-toggle-item {
    display: flex;
    align-items: center;
    flex: 0 0 calc(50% - 12px);
    /* flex-wrap: wrap; */
}

div.workflow .wf-toggle-switch,
div.workflow-modal .wf-toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

div.workflow .wf-toggle-input,
div.workflow-modal .wf-toggle-input {
    margin-right: 20px;
}

div.workflow .wf-toggle-label,
div.workflow-modal .wf-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
    position: relative;
}

div.workflow .wf-toggle-label:hover,
div.workflow-modal .wf-toggle-label:hover {
    background: #e9ecef;
    border-color: #ccc;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label {
    background: #e3f2fd;
    border-color: #2196f3;
    color: #1976d2;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-text i,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-text i {
    color: #1976d2;
}

div.workflow .wf-toggle-slider,
div.workflow-modal .wf-toggle-slider {
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

div.workflow .wf-toggle-slider::before,
div.workflow-modal .wf-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider {
    background: #2196f3;
}

div.workflow .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider::before,
div.workflow-modal .wf-toggle-input:checked+.wf-toggle-label .wf-toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

div.workflow .wf-toggle-text,
div.workflow-modal .wf-toggle-text {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
}

div.workflow .wf-toggle-text i,
div.workflow-modal .wf-toggle-text i {
    margin-right: 8px;
    color: #7f8c8d;
    font-size: 16px;
    width: 18px;
    text-align: center;
}

div.workflow .wf-filter-footer,
div.workflow-modal .wf-filter-footer {
    padding: 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    div.workflow .wf-filter-panel,
    div.workflow-modal .wf-filter-panel {
        min-width: 320px;
        max-width: 100%;
    }

    div.workflow .wf-filter-row,
    div.workflow-modal .wf-filter-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    div.workflow .wf-filter-content,
    div.workflow-modal .wf-filter-content {
        padding: 12px;
    }

    div.workflow .wf-filter-header,
    div.workflow-modal .wf-filter-header {
        padding: 12px;
    }
}

div.workflow-modal .wf-generic-node-io-link,
div.simlytiks .wf-generic-node-io-link {
    white-space: normal;
    text-align: left;
}

/** Added by shashank2104 on 10/01/2025 at 11:35 PM - DW-2395 - Floating actions bar styles for selection mode **/
.wf-floating-bulk-actions-bar {
    height: 45px;
    width: calc(100% - 80px);
    margin: 0 auto;
    position: absolute;
    top: 80px;
    z-index: 200;
    background: #FFF;
    left: 75px;
    box-shadow: var(--plugin-box-shadow-light);
    padding: 0 20px;
    container-name: wf-bulk-actions-bar;
    container-type: inline-size;
}

@container wf-bulk-actions-bar (max-width: 1000px) {
    .item-label {
        display: none;
    }
}

.wf-floating-bulk-actions-bar[data-position="top"] {
    position: fixed;
    z-index: 1000;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div {
    display: flex;
    align-items: center;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div>button {
    flex-grow: 1;
}

.wf-floating-bulk-actions-bar .pl-ribbon-menu>div>button .d3view-flex-v {
    justify-content: center;
}

.wf-floating-bulk-actions-bar.overflowing .pl-ribbon-menu>div>button {
    flex-grow: 0;
    margin: 2px;
}

.wf-floating-bulk-actions-bar.overflowing {
    height: auto;
}

div.workflow .workflow-navigation-container.unused-workers .worker-item {
    margin-bottom: 20px !important;
    ;
}

/** Added by shashank2104 on 10/06/2025 - DVFIV-XXXX - Dropdown submenu hover styles for compact header **/
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu {
    position: relative;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 0;
    border-radius: 0;
    min-width: 200px;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/* Removed caret styles since we're not using carets anymore */

/* Ensure main dropdown stays open when hovering over submenus */
div.workflow .header-left-compact .wf-dropdowns .dropdown:hover>.dropdown-menu {
    display: block;
}

/* Style for the main menu button */
div.workflow .header-left-compact .wf-dropdowns .dropdown>a {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown>a:hover {
    background-color: #f5f5f5;
}

/* Ensure the main dropdown menu is always visible when the dropdown is open */
div.workflow .header-left-compact .wf-dropdowns .dropdown.open>.dropdown-menu,
div.workflow .header-left-compact .wf-dropdowns .dropdown:hover>.dropdown-menu {
    display: block !important;
}

/* Ensure submenus show on hover */
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu:hover>.dropdown-menu {
    display: block !important;
}

/* Prevent the main dropdown from closing when hovering over submenus */
div.workflow .header-left-compact .wf-dropdowns .dropdown-menu {
    position: absolute;
    z-index: 1000;
}

/* Style for submenu items */
div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>a {
    position: relative;
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
}

div.workflow .header-left-compact .wf-dropdowns .dropdown-submenu>a:hover {
    background-color: #f5f5f5;
}

/* R0-3718 - collapse the header into the hamburger ONLY in classic mode. The ribbon header
   is not collapsed at narrow widths (it manages its own width), so these rules are scoped to
   :not([data-header-view="ribbon"]). A workflow that was never toggled has no attr = classic. */
@media screen and (max-width: 1568px) {
    div.workflow .wf-main-container:not([data-header-view="ribbon"]) .header-left-compact {
        display: inline-block !important;
    }

    div.workflow .wf-main-container:not([data-header-view="ribbon"]) .plugin-settings-line>.wf-dropdowns {
        display: none !important;
    }

}

/** Added by shashank2104 on 01/09/2025 at 10:30 AM - ActivitiesView styling **/
div.workflow .workflow-activities-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

div.workflow .workflow-activities-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    /* color: white; */
    padding: 8px 12px;
    /* border-bottom: 1px solid #5a6268; */
    min-height: 40px;
}

div.workflow .workflow-activities-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow .workflow-activities-toggle-icon {
    cursor: pointer;
    font-size: 12px;
    transition: transform 0.2s ease;
}

div.workflow .workflow-activities-toggle-icon.collapsed {
    transform: rotate(-90deg);
}

div.workflow .workflow-activities-title {
    font-weight: 500;
    font-size: 14px;
}

div.workflow .workflow-activities-header-right {
    display: flex;
    gap: 6px;
}

div.workflow .workflow-activities-btn {
    padding: 4px 8px;
}

div.workflow .workflow-activities-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-content.collapsed {
    display: none;
}

div.workflow .workflow-activities-view .workflow-activities-content.collapsed {
    display: none;
}

div.workflow .workflow-activities-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-view .workflow-activities-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .workflow-activities-logs-container {
    flex: 1;
    overflow: auto;
    padding: 8px;
    background-color: white;
}

div.workflow .workflow-activities-logs-container .logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

div.workflow .workflow-activities-logs-container .logs-table th {
    background-color: #f8f9fa;
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-weight: 500;
    color: #495057;
}

div.workflow .workflow-activities-logs-container .logs-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: top;
}

div.workflow .workflow-activities-logs-container .logs-table tr:hover {
    background-color: #f8f9fa;
}

div.workflow .workflow-activities-logs-container .timestamp-column {
    width: 80px;
    font-family: monospace;
    color: #6c757d;
}

div.workflow .workflow-activities-logs-container .activity-column {
    flex: 1;
    word-wrap: break-word;
}

/** Added by shashank2104 on 10/10/2025 at 03:36 PM - Data view toggle button styles **/
.wf-data-container .data-header-actions {
    display: flex;
    gap: 5px;
}

.wf-data-container .toggle-view-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.wf-data-container .toggle-view-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.wf-data-container .toggle-view-btn:not(.active):hover {
    background-color: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
}

.wf-data-container .study-simulation-graph-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.wf-data-container .study-simulation-graph-container.hidden {
    display: none;
}

/* Added by shashank2104 on 10/14/2025 at 12:07 AM - DW-2495 - Error mode CSS to remove hover effects and animations */

div.workflow .workflow-navigation-container .error-data-container .worker-item .worker-actions .btn:hover {
    background-color: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item .worker-actions .btn.btn-outline-on-hover:hover {
    background-color: transparent !important;
    border-color: inherit !important;
    color: inherit !important;
}

/* Remove bounce/translate animations in error mode */
div.workflow .workflow-navigation-container .error-data-container .worker-item {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

div.workflow .workflow-navigation-container .error-data-container .worker-item * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Remove any bounce or translate effects */
div.workflow .workflow-navigation-container .error-data-container .worker-item,
div.workflow .workflow-navigation-container .error-data-container .worker-item *,
div.workflow .workflow-navigation-container .error-data-container .workers-list,
div.workflow .workflow-navigation-container .error-data-container .workers-list * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}


div.workflow .wf-split-nav-content .workflow-navigation-container {
    position: relative;
    height: 100%;
    width: 100%;
}


/** Added by shashank2104 on 01/27/2025 - DW-2475 - Split Layout Navigation History Styles **/
div.workflow .wf-split-right-nav {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.workflow .wf-split-nav-breadcrumbs {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    flex-shrink: 0;
}

div.workflow .wf-split-nav-breadcrumb-items {
    display: flex;
    align-items: center;
    flex: 1;
    overflow-x: auto;
    white-space: nowrap;
}

div.workflow .breadcrumb-item {
    cursor: pointer;
    color: #007bff;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    margin-right: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

div.workflow .breadcrumb-item.active {
    color: #495057;
    font-weight: 600;
    cursor: default;
    background: #e3f2fd;
    border-color: #bbdefb;
}

div.workflow .breadcrumb-item:not(.active):hover {
    background: #e9ecef;
    border-color: #ced4da;
}

div.workflow .breadcrumb-separator {
    margin: 0 6px;
    color: #6c757d;
    font-size: 12px;
    font-weight: bold;
}

div.workflow .wf-split-nav-close {
    margin-left: 12px;
    padding: 6px 10px;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

div.workflow .wf-split-nav-close:hover {
    background: #dc3545;
    color: #fff;
}

div.workflow .wf-split-nav-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}

div.workflow .wf-split-nav-tab {
    display: none;
    height: 100%;
    width: 100%;
}

div.workflow .wf-split-nav-tab.active {
    display: block;
}

/* Added by shashank2104 on 10/14/2025 at 10:50 AM - DW-2462 - Dependencies View Styles */
div.workflow div.wf-data-view .dependencies-view-container {
    padding: 20px;
    gap: 40px;
    overflow-x: auto;
    position: relative;
    align-items: start;
}

div.workflow div.wf-data-view .dep-start-column {
    flex: 0 0 200px;
    position: relative;
}

div.workflow .dep-start-box {
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow .dep-start-title {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

div.workflow .dep-start-count {
    font-size: 14px;
    color: #6c757d;
}

div.workflow .dep-start-count i {
    margin-right: 5px;
}

div.workflow div.wf-data-view .dep-inputs-column,
div.workflow div.wf-data-view .dep-worker-column {
    flex: 0 0 250px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

div.workflow div.wf-data-view .dep-column-header {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .dep-column-header h5 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
}

div.workflow div.wf-data-view .dep-search {
    margin-bottom: 0;
}

div.workflow div.wf-data-view .dep-inputs-list,
div.workflow div.wf-data-view .dep-workers-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

div.workflow div.wf-data-view .dep-input-item,
div.workflow div.wf-data-view .dep-worker-item {
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

div.workflow div.wf-data-view .dep-input-item:hover,
div.workflow div.wf-data-view .dep-worker-item:hover {
    background: #f0f7ff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .dep-input-item.selected,
div.workflow div.wf-data-view .dep-worker-item.selected {
    background: #e3f2fd;
    border-color: #007bff;
    border-width: 2px;
}

div.workflow div.wf-data-view .dep-item-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

div.workflow div.wf-data-view .dep-item-type {
    font-size: 11px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow div.wf-data-view .dep-dynamic-columns {
    gap: 40px;
    height: 100%;
}

div.workflow div.wf-data-view .dep-worker-column .dep-column-header {
    position: relative;
}

div.workflow div.wf-data-view .dep-close-column {
    position: absolute;
    right: 5px;
    top: 5px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
}

div.workflow div.wf-data-view .dep-close-column:hover {
    color: #dc3545;
}

div.workflow div.wf-data-view .dep-no-results {
    text-align: center;
    padding: 30px;
    color: #6c757d;
}

/* Added by shashank2104 on 10/14/2025 at 10:50 AM - DW-2462 - Worker action buttons */
div.workflow div.wf-data-view .dep-worker-actions {
    margin-top: 8px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

div.workflow div.wf-data-view .dep-input-actions {
    margin-top: 8px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

/* Added by shashank2104 on 10/14/2025 at 10:50 AM - DW-2462 - Connecting lines between columns */
div.workflow div.wf-data-view .dependencies-view-container {
    position: relative;
}

/* Connector from START to inputs column */
div.workflow div.wf-data-view .dep-start-column::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 1;
}

/* Arrow from START to inputs */
div.workflow div.wf-data-view .dep-start-column::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 0;
    height: 0;
    border-left: 8px solid #6c757d;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}

/* Connector from inputs to dynamic columns */
div.workflow div.wf-data-view .dep-inputs-column::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 1;
}

/* Arrow from inputs to dynamic columns */
div.workflow div.wf-data-view .dep-inputs-column::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 0;
    height: 0;
    border-left: 8px solid #6c757d;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
    z-index: 2;
}

/* Create a continuous line across all dynamic columns */
div.workflow div.wf-data-view .dep-dynamic-columns {
    position: relative;
}

div.workflow div.wf-data-view .dep-dynamic-columns::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #6c757d);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Add arrow indicators at the end of each worker column */
div.workflow div.wf-data-view .dep-worker-column::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid #6c757d;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    transform: translateY(-50%);
    z-index: 3;
}

/* Hide arrow for the last column */
div.workflow div.wf-data-view .dep-worker-column:last-child::after {
    display: none;
}

div.workflow div.wf-data-view .dep-worker-actions .btn {
    font-size: 11px;
    padding: 4px 8px;
    line-height: 1.2;
}

div.workflow div.wf-data-view .dep-worker-actions .btn i {
    margin-right: 3px;
}

div.workflow div.wf-data-view .dep-worker-item:hover .dep-worker-actions {
    opacity: 1;
}

div.workflow div.wf-data-view .dep-worker-actions {
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Added by shashank2104 on 10/14/2025 at 10:50 AM - DW-2462 - Study/Simulation Table Styles */
div.workflow div.wf-data-view .study-simulation-table-container {
    padding: 20px;
    gap: 20px;
    overflow-x: auto;
}

div.workflow div.wf-data-view .studies-column,
div.workflow div.wf-data-view .simulations-column {
    flex: 0 0 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow div.wf-data-view .studies-column-header,
div.workflow div.wf-data-view .simulations-column-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .studies-column-header h5,
div.workflow div.wf-data-view .simulations-column-header h5 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .study-search,
div.workflow div.wf-data-view .simulation-search {
    margin-bottom: 0;
}

div.workflow div.wf-data-view .studies-list,
div.workflow div.wf-data-view .simulations-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

div.workflow div.wf-data-view .study-item,
div.workflow div.wf-data-view .simulation-item {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

div.workflow div.wf-data-view .study-item:hover,
div.workflow div.wf-data-view .simulation-item:hover {
    background: #f0f7ff;
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .study-item.selected {
    background: #e3f2fd;
    border-color: #007bff;
    border-width: 2px;
}

div.workflow div.wf-data-view .study-item-name,
div.workflow div.wf-data-view .simulation-item-name {
    margin-bottom: 6px;
}

div.workflow div.wf-data-view .study-item-name h3,
div.workflow div.wf-data-view .simulation-item-name h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

div.workflow div.wf-data-view .study-item-type,
div.workflow div.wf-data-view .simulation-item-type {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 4px;
}

div.workflow div.wf-data-view .study-simulation-count {
    font-size: 11px;
    color: #28a745;
    display: flex;
    align-items: center;
    gap: 4px;
}

div.workflow div.wf-data-view .study-simulation-count i {
    color: #28a745;
}

div.workflow div.wf-data-view .simulation-study-ref {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
    margin-top: 4px;
}

div.workflow div.wf-data-view .study-sim-no-results {
    text-align: center;
    padding: 30px;
    color: #6c757d;
}

div.workflow div.wf-data-view .study-sim-no-results i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* Added by shashank2104 on 10/14/2025 at 10:50 AM - DW-2462 - Empty state styles for Dependencies tab */
div.workflow div.wf-data-view .dep-empty-column {
    border: 2px dashed #dee2e6;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .dep-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

div.workflow div.wf-data-view .dep-empty-state i {
    font-size: 48px;
    color: #dee2e6;
    margin-bottom: 20px;
    display: block;
}

div.workflow div.wf-data-view .dep-empty-state h6 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

/* Added by shashank2104 on 10/15/2025 at 12:07 AM - Smart grouping styles for full chain view */
div.workflow div.wf-data-view .dep-smart-group {
    border: 2px solid #007bff;
    border-radius: 6px;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="critical"] {
    border-color: #dc3545;
    background: #fff5f5;
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="terminal"] {
    border-color: #28a745;
    background: #f0fff4;
}

div.workflow div.wf-data-view .dep-smart-group[data-group-type="intermediate"] {
    border-color: #ffc107;
    background: #fffbf0;
}

div.workflow div.wf-data-view .dep-smart-worker {
    position: relative;
    border-left: 3px solid #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="0"] {
    border-left-color: #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="1"] {
    border-left-color: #28a745;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="2"] {
    border-left-color: #ffc107;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="3"] {
    border-left-color: #6f42c1;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="4"] {
    border-left-color: #fd7e14;
}

div.workflow div.wf-data-view .dep-level-badge {
    display: inline-block;
    background: #007bff;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-right: 8px;
    min-width: 20px;
    text-align: center;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="0"] .dep-level-badge {
    background: #007bff;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="1"] .dep-level-badge {
    background: #28a745;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="2"] .dep-level-badge {
    background: #ffc107;
    color: #333;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="3"] .dep-level-badge {
    background: #6f42c1;
}

div.workflow div.wf-data-view .dep-smart-worker[data-level="4"] .dep-level-badge {
    background: #fd7e14;
}

/* Collapsible level sections */
div.workflow div.wf-data-view .dep-level-section {
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
}

div.workflow div.wf-data-view .dep-level-header {
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

div.workflow div.wf-data-view .dep-toggle-level {
    width: 100%;
    text-align: left;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #495057;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

div.workflow div.wf-data-view .dep-toggle-level:hover {
    background: #e9ecef;
    color: #007bff;
}

div.workflow div.wf-data-view .dep-toggle-level i {
    margin-right: 6px;
    transition: transform 0.2s ease;
}

div.workflow div.wf-data-view .dep-level-content {
    padding: 8px;
    background: #fff;
}

/* Data view controls header */
div.workflow div.wf-data-view .data-view-controls {
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .data-view-controls .control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

div.workflow div.wf-data-view .data-view-controls .checkbox-inline {
    margin: 0;
    font-size: 12px;
    color: #666;
}

div.workflow div.wf-data-view .data-view-controls .checkbox-inline input[type="checkbox"] {
    margin-right: 5px;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn {
    font-size: 12px;
    padding: 4px 12px;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn.btn-warning {
    background: #ffc107;
    border-color: #ffc107;
    color: #333;
}

div.workflow div.wf-data-view .data-view-controls #show-full-chain-btn.btn-warning:hover {
    background: #e0a800;
    border-color: #d39e00;
}

div.workflow div.wf-data-view .dep-empty-state p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* Enhanced empty state for Study/Simulation Table */
div.workflow div.wf-data-view .study-sim-no-results h6 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

div.workflow div.wf-data-view .study-sim-no-results p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/** Added by shashank2104 on 10/17/2025 at 01:37 PM - DW-2503 - Reporters Tab Styles **/
/* Reporters Tab Container */
div.workflow div.wf-data-view .rpt-reporters-container {
    padding: 15px;
    gap: 15px;
}

/* Reporters and Datasets Columns */
div.workflow div.wf-data-view .rpt-reporters-column,
div.workflow div.wf-data-view .rpt-datasets-column {
    flex: 0 0 350px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

div.workflow div.wf-data-view .rpt-column-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

div.workflow div.wf-data-view .rpt-column-header h5 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .rpt-search,
div.workflow div.wf-data-view .rpt-dataset-search {
    margin-bottom: 0;
}

div.workflow div.wf-data-view .rpt-reporters-list,
div.workflow div.wf-data-view .rpt-datasets-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* Reporter Item */
div.workflow div.wf-data-view .rpt-reporter-item {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

div.workflow div.wf-data-view .rpt-reporter-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
    transform: translateY(-1px);
}

div.workflow div.wf-data-view .rpt-reporter-item.selected {
    border-color: #007bff;
    background: #e7f3ff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

div.workflow div.wf-data-view .rpt-reporter-item-name h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

div.workflow div.wf-data-view .rpt-reporter-item-name a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

div.workflow div.wf-data-view .rpt-reporter-item-name a:hover {
    color: #0056b3;
    text-decoration: underline;
}

div.workflow div.wf-data-view .rpt-reporter-item-type {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count {
    font-size: 12px;
    color: #6c757d;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count i {
    color: #007bff;
}

div.workflow div.wf-data-view .rpt-reporter-dataset-count .dataset-count {
    font-weight: 600;
    color: #333;
}

/* Dataset Item */
div.workflow div.wf-data-view .rpt-dataset-item {
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: all 0.2s;
}

div.workflow div.wf-data-view .rpt-dataset-item:hover {
    border-color: #28a745;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
    transform: translateY(-1px);
}

div.workflow div.wf-data-view .rpt-dataset-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

div.workflow div.wf-data-view .rpt-dataset-item-name i {
    color: #28a745;
}

div.workflow div.wf-data-view .rpt-dataset-source {
    font-size: 11px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref {
    font-size: 11px;
    color: #6c757d;
    margin-top: 5px;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref a {
    color: #007bff;
    text-decoration: none;
}

div.workflow div.wf-data-view .rpt-dataset-worker-ref a:hover {
    text-decoration: underline;
}

/* Empty state */
div.workflow div.wf-data-view .rpt-no-results {
    text-align: center;
    padding: 30px;
    color: #6c757d;
}

div.workflow div.wf-data-view .rpt-no-results i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

div.workflow div.wf-data-view .rpt-no-results h6 {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

div.workflow div.wf-data-view .rpt-no-results p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.4;
}

/* Added by shashank2104 on 01/27/2025 - Marker Pairing View Styles */
div.workflow .d3view-wf-marker-pairing {
    padding: 20px;
}

div.workflow .marker-pairing-container {
    height: 100%;
}

div.workflow .marker-pairing-header {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
}

div.workflow .marker-pairing-table-container {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}

div.workflow .marker-pairing-table {
    margin-bottom: 0;
    font-size: 13px;
}

div.workflow .marker-pairing-table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    padding: 12px 8px;
    white-space: nowrap;
}

div.workflow .marker-pairing-table td {
    padding: 8px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

div.workflow .marker-pairing-table .form-control,
div.workflow .marker-pairing-table .sl-select2 {
    width: 100%;
    min-width: 80px;
    font-size: 12px;
    padding: 4px 8px;
    height: 28px;
    border: 1px solid #ced4da;
    border-radius: 3px;
}

div.workflow .marker-pairing-table .form-control:focus,
div.workflow .marker-pairing-table .sl-select2:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

div.workflow .marker-pairing-table .color-input {
    width: 60px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
}

div.workflow .marker-pairing-table .number-input {
    width: 70px;
    text-align: center;
}

div.workflow .marker-pairing-table .text-input {
    min-width: 100px;
}

div.workflow .marker-pairing-table .action-buttons {
    text-align: center;
    white-space: nowrap;
}

div.workflow .marker-pairing-table .btn-remove {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
}

div.workflow .marker-pairing-actions {
    text-align: left;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

div.workflow .marker-pairing-table tbody tr:hover {
    background-color: #f8f9fa;
}

div.workflow .marker-pairing-table tbody tr:last-child td {
    border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 1200px) {

    div.workflow .marker-pairing-table th,
    div.workflow .marker-pairing-table td {
        padding: 6px 4px;
        font-size: 12px;
    }

    div.workflow .marker-pairing-table .form-control,
    div.workflow .marker-pairing-table .sl-select2 {
        font-size: 11px;
        padding: 3px 6px;
        height: 26px;
    }
}

@media (max-width: 768px) {
    div.workflow .marker-pairing-table-container {
        overflow-x: auto;
    }

    div.workflow .marker-pairing-table {
        min-width: 1000px;
    }
}

div.workflow .workflow-navigation-container .issue-detail-toggle,
div.workflow .workflow-navigation-container .issue-auto-fix-btn {
    display: none !important;
}

/** Added by shashank2104 on 10/20/2025 at 10:44 AM - DW-2505 - Reporter Actions Menu Styling **/
div.workflow-modal .reporter-actions-menu .dropdown-submenu {
    position: relative;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    display: none;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

/** Added by shashank2104 on 10/20/2025 at 10:44 AM - DW-2505 - Left-side dropdown submenu **/
div.workflow-modal .reporter-actions-menu .dropdown-submenu-left>.dropdown-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
}

div.workflow-modal .reporter-actions-menu .dropdown-submenu-left>a:after {
    border-width: 5px 5px 5px 0;
    border-right-color: #ccc;
    border-left-color: transparent;
    margin-left: -10px;
    margin-right: auto;
    float: left;
}

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a {
    padding: 8px 20px;
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a:hover {
    background-color: #f5f5f5;
    color: #262626;
    text-decoration: none;
}

div.workflow-modal .reporter-actions-menu .dropdown-menu>li>a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/** Added by shashank2104 on 01/13/2025 at 11:30 PM - DW-2462 - Branch visualization styles **/
div.workflow div.wf-data-view .dep-branches-column {
    flex: 1;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    border-left: 1px solid #ddd;
    overflow: hidden;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

div.workflow div.wf-data-view .dep-branches-column.visible {
    display: flex;
}

div.workflow div.wf-data-view .dep-view-controls {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f9f9f9;
}

div.workflow div.wf-data-view .dep-view-controls .checkbox-inline {
    margin: 0;
    padding-top: 0;
}

div.workflow div.wf-data-view .dep-branches-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

div.workflow div.wf-data-view .dep-branches-container.pl-processing {
    opacity: 0.5;
    pointer-events: none;
}

div.workflow div.wf-data-view .dep-branch {
    margin-bottom: 30px;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

div.workflow div.wf-data-view .dep-branch.not-in-flow {
    opacity: 0.5;
}

div.workflow div.wf-data-view .dep-branch-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    font-size: 14px;
    padding: 8px 12px;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

div.workflow div.wf-data-view .dep-branch-workers {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 10px 0;
    gap: 0;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item {
    flex: 0 0 180px;
    transition: opacity 0.3s ease;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
    min-width: 180px;
    /*max-width: 180px;*/
    width: 200px;
    height: 130px;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item .dep-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

div.workflow div.wf-data-view .dep-branch-workers .dep-worker-item.selected {
    border-color: #007bff;
    border-width: 2px;
    background: #f0f7ff;
}

div.workflow div.wf-data-view .dep-worker-connector {
    margin: 0 15px;
    color: #999;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 15px;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state h6 {
    margin: 10px 0 5px 0;
    color: #666;
}

div.workflow div.wf-data-view .dep-branch .dep-empty-state p {
    margin: 0;
    color: #999;
}

/** Added by shashank2104 on 10/27/2025 - DW-2462 - Study Simulation Flow View Styling **/
div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs {
    border-bottom: 2px solid #ddd;
    background-color: #f8f9fa;
    margin: 0;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li>a {
    padding: 12px 20px;
    border-radius: 4px 4px 0 0;
    font-weight: 500;
    color: #666;
    text-decoration: none;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li>a:hover {
    color: #007bff;
    background-color: #e9ecef;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-tabs>li.active>a {
    background-color: #fff;
    color: #007bff;
    border-bottom: 2px solid #007bff;
    font-weight: 600;
}

div.workflow div.wf-data-view .study-simulation-table-view .study-sim-flow-view {
    height: 100%;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector-panel {
    background: #f9f9f9;
    border-right: 2px solid #ddd;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector-header h5 {
    color: #333;
    font-weight: 600;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-input-selector {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 8px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box {
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box:hover {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-2px);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box.selected {
    border-color: #007bff;
    background: #f0f7ff;
    border-width: 3px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box .option-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-box .option-id {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-panel {
    background: #fff;
    padding: 20px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-container {
    height: 100%;
    overflow-x: auto;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-category-section {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-category-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #007bff;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item {
    padding: 8px 12px;
    margin: 5px 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item .item-name {
    font-weight: 500;
    color: #333;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-item .item-meta {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-container {
    margin-top: 15px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-options-container h6 {
    margin: 0 0 10px 0;
    color: #666;
    font-weight: 500;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-clear-selection {
    margin-top: 10px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-option-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    margin-top: 15px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section {
    min-width: 250px;
    max-width: 350px;
    margin-right: 0px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
    position: relative;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 2px;
    background: #007bff;
    z-index: 1;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section:not(:last-child)::before {
    content: '→';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: #007bff;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section-header {
    background: #f5f5f5;
    padding: 12px 15px;
    border-bottom: 2px solid #007bff;
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section-content {
    padding: 10px;
    max-height: 500px;
    overflow-y: auto;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card {
    padding: 10px;
    margin: 5px 0;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    border-left: 3px solid #007bff;
    transition: all 0.2s ease;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card:hover {
    background: #f0f0f0;
    border-left-color: #0056b3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
    font-size: 13px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-id {
    font-size: 11px;
    color: #666;
    margin-bottom: 3px;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-type {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-worker-card .worker-icon {
    margin-right: 8px;
    color: #007bff;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-section .empty-message {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 13px;
}

/** Added by shashank2104 on 10/28/2025 - DW-2462 - Flow Graph View Styles **/
/* Flow Graph View Styles */
div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-panel {
    min-width: 0;
    /* Fix flex container width calculation */
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-visualization-container {
    min-width: 0;
    /* Fix flex container width calculation */
    width: 100%;
}

/* Override flex display for graph view */
div.workflow div.wf-data-view .study-simulation-table-view .flow-option-section.flow-graph-view {
    display: block !important;
    width: 100%;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-container {
    width: 100%;
    overflow: auto;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-node {
    cursor: pointer;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-graph-node:hover rect {
    stroke: #007bff;
    stroke-width: 2;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-edge {
    transition: stroke-width 0.2s;
}

div.workflow div.wf-data-view .study-simulation-table-view .flow-edge:hover {
    stroke-width: 3;
    stroke: #007bff;
}

/* Categorize toggle */
div.workflow div.wf-data-view .study-simulation-table-view .categorize-workers-toggle {
    margin-right: 5px;
}

/** Added by shashank2104 on 10/28/2025 - DW-2554 - Split right panel inline modal/sidebar styles **/
/* Override bootstrap modal fixed positioning when rendered inline in split view */
div.workflow .wf-split-nav-tab .modal {
    position: static !important;
    overflow: visible !important;
    height: 100%;
}

div.workflow .wf-split-nav-tab .modal-dialog {
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

div.workflow .wf-split-nav-tab .modal-content {
    border-radius: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
}

div.workflow .wf-split-nav-tab .modal-header {
    display: none !important;
}

div.workflow .wf-split-nav-tab .modal-body {
    flex: 1;
    overflow-y: auto;
}

div.workflow .wf-split-nav-tab .modal-backdrop {
    display: none !important;
}

/* Sidebar styles for inline rendering */
div.workflow .wf-split-nav-tab .sidebar-view {
    position: static !important;
    transform: none !important;
    height: 100%;
}

div.workflow .wf-split-nav-tab .d3view-plugins-sidebar {
    position: static !important;
    box-shadow: none;
    width: 100% !important;
    border: none !important;
    animation: unset !important;
}

div.workflow .wf-split-nav-tab .d3view-plugins-sidebar .panel-heading,
div.workflow .wf-split-nav-tab .d3view-plugins-sidebar .panel-heading+button[data-dismiss="sidebar"] {
    display: none;
}


div.workflow-modal .sample-inputs-list .wf-input-label {
    border-radius: 0;
    border-left: none;
    border-top: none;
    cursor: move;
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover {
    background: var(--neutralLighter);
}

div.workflow-modal .sample-inputs-list .wf-input-label .sample-input-label {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-label {
    width: calc(100% - 53px);
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-label>span {
    display: block;
    width: calc(100% - 0px);
    overflow: hidden;
    text-overflow: ellipsis;
}

div.workflow-modal .sample-inputs-list .wf-input-label .sample-input-options {
    display: none;
    position: absolute;
    right: 6px;
}

div.workflow-modal .sample-inputs-list .wf-input-label:hover .sample-input-options {
    display: flex;
    align-items: center;
    display: none;
}

div.workflow-modal .sample-inputs-list .row {
    border-bottom: none !important;
    /*font-size: 12px;*/
    margin: 0 !important;
    padding: 0 !important;
}
/* /javascripts/plugins_src/gifPlayer/stylesheets/gif_player.css */
/*********** CSS specific for GIF player and controls *****************/
div.image_gallery div.gallery_container {
    position: relative;
    min-height: 100%;
    height: 100%;
    padding: 0 15px;
}
div.image_gallery div.gifplayer-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    margin: auto;
    text-align: center;
    height: 100%!important;
    width: 100%!important;
    /*background: rgba(0,0,0,0.05);*/
}
div.image_gallery div.gifplayer-backdrop div.playIcon {
    display: inline-block;
    top: 40%;
    left: 46.3%;
    position: absolute;
    text-align: center;
}
div.image_gallery #gallery .controls {
    height: 60px;
}
div.image_gallery div.gifplayer-backdrop div.playIcon:hover {
    color: #428bca;
}
div.image_gallery div.gifplayer-backdrop div.playIcon:hover #play-circle {
    opacity: 0.6;
}
div.image_gallery button#switch_thumbnail {
    /*position: absolute;*/
    /*left: 2px;*/
    /*top: 3px;*/
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}
div.image_gallery .single_image_gallery button#switch_thumbnail {
    position: absolute;
}
div.image_gallery button#switch_thumbnail.shown {
    pointer-events: all!important;
    opacity: 1!important;
}
div.image_gallery div.gifplayer {
    margin: 0 auto;
    height: 100%!important;
    overflow: hidden;
}
div.image_gallery span#play-circle {
    font-size: 8em;
    cursor: pointer;
    opacity: 0.2;
}
div.image_gallery span#play-icon {
    position: absolute;
    top: 29%;
    left: 34.6%;
    color: transparent;
    font-size: 3.5em;
    cursor: pointer;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: medium;
}
div.image_gallery span#play-icon:hover {
    -webkit-filter: brightness(1);
}
div.image_gallery span#spinIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.2em;
    font-weight: 500;
    display: none;
    align-items: center;
    transform: translate(-50%,-50%);
}
div.image_gallery span#spinIcon i {
    margin-right: 6px;
}
div.image_gallery span#spinIcon.shown {
    display: flex!important;
}
div.image_gallery div.gallery_container div.img {
    /*margin: 8px!important;*/
    height: 100%;
}
div.image_gallery div.gallery_container div.multiple_image_gallery div.img {
    width: 100%;
    margin-bottom: 0!important;
    position: relative;
    box-shadow: none;
}
div.image_gallery div.gallery_container div.multiple_image_gallery div.img img {
    /*width: 100%;*/
}

div.image_gallery div.gallery_container div.img div.gifplayer > canvas {
    max-width: 100% !important;
}

div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs ul.nav {
    display: inline-block;
    border-bottom:none!important;
}
div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs .panel-heading ul.nav li:not(.active) {
    border: 1px solid #ccc;
}
div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs .panel-heading ul.nav li:not(.active) a{
    color: #444;
}
div.image_gallery div.gallery_container div#gallerydiv.thumbnail_tabs .panel-heading ul.nav li.active a{
    padding: 6px!important;
    -webkit-border-radius:inherit;
    -moz-border-radius:inherit;
    border-radius:inherit;;
}
div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs .panel-heading ul.nav li:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs .panel-heading ul.nav li:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
div.image_gallery div.gallery_container div#gallery div.thumbnail_tabs .panel-heading ul.nav li a{
    padding: 5px!important;
    border: none!important;
    font-size: 11px;
}
div.image_gallery div.gallery_container div.thumbnail_heading {
    text-align: center;
    padding: 5px 2px;
    cursor: pointer;
    font-size: 15px;
}
div.image_gallery div.gallery_container div.thumbnail_heading > h4 {
    display: inline-block;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.image_gallery div.gallery_container div.thumbnail-body {
    text-align: center;
    padding: 2px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(100% - 40px)!important;
}
div.image_gallery div.gallery_container div.thumbnail-body.fetchingThumbnail .error-txt {
    display: none;
}
div.image_gallery div.gallery_container div.thumbnail-body.fetchingThumbnail:after {
    content: 'Fetching Thumbnail. Please wait...';
    font-size: 1.4em;
    font-weight: 500;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.image_gallery div.thumbnail-body.no_thumbnail, div.image_gallery div.thumbnail-body.simple_png {
    background-image: none!important;
}
div.image_gallery div.thumbnail-body div.magnify {
    display: flex;
    align-items: center;
}
div.image_gallery .single_image_gallery img.imageSrc {
    /*vertical-align: top;*/
}
div.image_gallery div.gallery_container div.controls .btn-group button#gallery_overlay.gallery i[data-id="2"] {
    opacity: 1;
}
div.image_gallery div.gallery_container div.controls .btn-group button#gallery_overlay.overlay i[data-id="2"] {
    opacity: 0;
}
div.image_gallery div.gallery_container div.img.selected {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
div.gallery_container .single_image_gallery > .col-md-12 {
    padding: 0;
}
div.gallery_container .single_image_gallery .gifplayer-container {
    height: calc(100% - 10px);
}
div.gallery_container .single_image_gallery .gifplayer-container .thumbnail-body,
div.gallery_container .single_image_gallery .gifplayer-container .img {
    height: 100%;
}
div.image_gallery div.gallery_container div.multiple_image_gallery.active, div.image_gallery div.gallery_container div.single_image_gallery {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    /*margin-top: 10px;*/
    /*align-items: center;*/
}
div.image_gallery div.gallery_container div.multiple_image_gallery.active > [class*="col-"] {
    display: flex;
    margin: 5px 0;
}
div.image_gallery div.gallery_container div.multiple_image_gallery div.gifplayer #gifplayer-controls, div.image_gallery div.gallery_container div.multiple_image_gallery div.gifplayer #gifplayer-controls-extended {
    display: none;
}
div.image_gallery div.gallery_container div.gifplayer.loading #gifplayer-controls, div.image_gallery div.gifplayer.loading #gifplayer-controls-extended {
    display: none;
}
div.image_gallery div.gallery_container div.gifplayer.loading .gifplayer-slider {
    display: none;
}
div.image_gallery div.gallery_container div.gifplayer div#gifplayer-controls-extended div.gifplayer-speed-slider {
    display: none!important;
}
div.image_gallery div.gallery_container div.controls div#range_slider, div.image_gallery div.gallery_container div.controls div#speed_slider {
    width: 8%;
    text-align: center;
    min-width: 150px;
    margin: 0 40px!important;
}
div.image_gallery div.gallery_container div.controls div#range_slider span.values, div.image_gallery div.gallery_container div.controls div#speed_slider span.values{
    font-size: 10px;
}
div.image_gallery div.gallery_container div.controls div.bootstrap-select.export {
    width: 80px;
}
div.image_gallery div.gallery_container div.controls button#changeSyncSettings {
    float: right;
    margin-left:6px;
    display: inline-block;
}
div.image_gallery div.gallery_container div.controls .popover div.arrow {
    left: 75%!important;
}
div.image_gallery div.gallery_container div.controls div#overlay {
    position: relative;
    float: right;
    display: inline-block;
}
div.image_gallery div.gallery_container div#overlay_container {
    /*display: none;*/
}
div.image_gallery div.gallery_container div#overlay_container div#overlay_images canvas{
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
}
div.image_gallery div.gallery_container .slider.slider-horizontal {
    background: none!important;
}
div.image_gallery div.gallery_container .ui-slider-handle {
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;;
}
div.image_gallery div.gallery_container .ui-slider.ui-widget-content {
    border: none!important;
    background: #E0E0E0;
}
div.image_gallery div.gallery_container .ui-slider-horizontal .ui-slider-range {
    background: #428bca;
}
div.image_gallery div.gallery_container div.opacity_slider {
    margin-right: 10px;
}
div.image_gallery div.gallery_container div.img div.gifplayer div#gifplayer-info {
    display: none;
}

/* Popover */
div.image_gallery div.gallery_container div.gifplayer div.popover {
    width: 170px!important;
}
div.image_gallery div.gallery_container div.gifplayer div.popover div.gifplayer-slider, div.image_gallery div.gallery_container div.gifplayer div.popover div.gifplayer-additional-options {
    display: block!important;
}

/* Export options */
div.image_gallery div.gallery_container + div.export_options {
    position: absolute;
    width: auto;
    left: 40%;
    top: 35%;
    display: none;
    font-size: 12px;
    z-index: 2000;
}
div.image_gallery div.gallery_container div.export_options div.panel-body div.row > span.name, div.image_gallery div.gallery_container div.export_options div.panel-body div.row> span.format {
    position: relative;
    top: 6px;
}
div.image_gallery div.gallery_container div#overlay_container table#overlay_image_names {
    margin-top: 10px;
}
/* Color sliders in overlay */
div.image_gallery div.gallery_container div#overlay_container table#overlay_image_names tbody tr.move {
    cursor: move;
}
div.image_gallery div.gallery_container div#overlay_container table#overlay_image_names tbody td.color span.input-group-addon {
    background: none;
    border: none;
    padding: 0;
    width: auto;
}

/* overlay view */
div.image_gallery div.tab-pane.overlay_container {
    position: relative;
    overflow: hidden;
    height: 100%;
}
div.image_gallery div.tab-pane.overlay_container .image_overlay {
    margin-top: 10px;
    position: relative;
}
div.image_gallery div.tab-pane.overlay_container .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    display: none;
}
div.image_gallery div.tab-pane.overlay_container div.canvas-containers canvas {
    /*background-color: #FFF;*/
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #DDD;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 250px;
    min-width: 25%;
    /*max-width: 30%;*/
    min-height: 100px;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings > .panel {
    width: 100%;
    height: 100%;
}
div.image_gallery div.tab-pane.overlay_container .panel-heading {
    cursor: move;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body {
    padding: 10px!important;
    /*max-height: 200px;*/
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings.minimized {
    bottom: 0!important;
    top: inherit!important;
    height: 30px!important;
    right: 0!important;
    left: inherit!important;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette.minimized {
    bottom: 0!important;
    top: inherit!important;
    left: 0!important;
    height: 30px!important;
}
div.image_gallery div.tab-pane.overlay_container .minimized div.panel-body {
    display: none;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul {
    border: none;
    box-shadow: none;
    margin-bottom: 1px;
    overflow: auto;
    max-height: 200px;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.row-item {
    border: none;
    padding: 6px 0;
    cursor: move;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.row-item.invalid {
    opacity: 0.4;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.row-item.invalid > * {
    pointer-events: none;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.row-item > div > div {
    flex: 1 1 auto;
    word-break: break-all;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.list-group-item:not(.invalid):hover {
    background-color: #f5f5f5;
}
div.image_gallery div.tab-pane.overlay_container .overlay_settings .panel-body ul li.list-group-item .row-color {
    cursor: pointer;
    width: 12px;
    height: 12px;
    border: 1px solid #DDD;
}
div.image_gallery div.tab-pane.overlay_container .sortable-handle {
    opacity: 0;
    position: absolute;
    left: 5px;
    top: 9px;
    font-size: 12px;
}
div.image_gallery div.tab-pane.overlay_container li:hover .sortable-handle {
    opacity: 1!important;
}
div.image_gallery div.tab-pane.overlay_container .reset_color:hover {
    color: red;
}
div.image_gallery div.tab-pane.overlay_container .image-colors {
    position: absolute;
    top: 0px;
    right: 0;
    cursor: pointer;
}
div.image_gallery div.tab-pane.overlay_container .ui-slider.ui-widget-content {
    /*width: 50px;*/
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200px;
    display: none;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette .panel-body {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding: 15px!important;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette .panel-body button.canvas-colors {
    margin: 3px;
    margin-bottom: 0;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette .palette-color {
    width: 25px;
    height: 25px;
    margin: 2px;
    display: inline-block;
    position: relative;
    border: 1px solid #4f5359;
    cursor: pointer;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette .palette-color.dominant:after {
    content: "\f063";
    font-family: FontAwesome;
    position: absolute;
    top: -13px;
    left: 7px;
    color: red;
}
div.image_gallery div.tab-pane.overlay_container .overlay-color-palette .palette-color.opaque {
    opacity: 0.2;
}


div.image_gallery div.tab-pane.multiple_image_gallery .items-list li.list-group-item {
    display: flex;
    align-items: center;
}
div.image_gallery .multiple_image_gallery .items-list {
    overflow: auto;
}
div.image_gallery .multiple_image_gallery .items-list .list-item-name {
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 6px;
    text-decoration: none;
    word-break: break-all;
}

div.image_gallery .multiple_image_gallery .items-list input {
    height: auto!important;
}
div.image_gallery .overlay-items-list .disabled {
    opacity: 0.3;
    pointer-events: none;
}
div.image_gallery div.tab-pane[data-view="gallery"] .gifplayer-containers {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
div.image_gallery div.tab-pane[data-view="gallery"] .gifplayer-containers > .gifplayer-container {
    margin: 5px;
    flex: 1 1 calc(33% - 10px)!important;
}
div.image_gallery .gifplayer-container {
    margin: 5px 0;
    /*flex: 1 1 auto;*/
    height: calc(100% - 10px);
}

div.image_gallery .single_image_gallery .thumbnail_heading > i {
    display: none;
}
div.image_gallery .gifplayer.loading {
    background: none!important;
}

div.image_gallery .overlay_settings.exporting .opacity-container,
div.image_gallery .overlay_settings.exporting .disabled,
div.image_gallery .overlay_settings.exporting .reset_color {
    display: none;
}






/* LIBRARY CSS */
div.image_gallery #gifplayer {
    z-index: 2147483647;
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
    border: none;
    background: black;
    text-align: center;
}
div.image_gallery #gifplayer * {
    text-transform: none;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

/* Loader / Status */

div.image_gallery #gifplayer-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
    border-radius: 7px;
    border: 1px solid #ddd;
    width: 50%;
    height: 10px;
    background: transparent;
}
div.image_gallery #gifplayer-status {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 60%;
    right: auto;
    text-align: center;
    font-weight: normal;
    font-size: 13px;
    line-height: 1.25em;
    width: 50%;
    margin: 0px -25%;
    color: #4f5359;
    word-break: break-all;
}
div.image_gallery div.gifplayer #gifplayer-status,
div.image_gallery div.gifplayer #gifplayer-loader {
    display: none;
}
div.image_gallery div.gifplayer.error > #gifplayer-status,
div.image_gallery div.gifplayer.loading > #gifplayer-status,
div.image_gallery div.gifplayer.loading > #gifplayer-loader {
    display: block;
}
div.image_gallery div.gifplayer.error > canvas,
div.image_gallery div.gifplayer.loading > canvas {
    opacity: 0.25;
}
div.image_gallery div.gifplayer.loading > #gifplayer-info,
div.image_gallery div.gifplayer.loading > #gifplayer-controls {
    display: none;
}

/* Info */

div.image_gallery #gifplayer-info {
    position: absolute;
    top: 20px;
    left: 30px;
    bottom: auto;
    right: auto;
    margin: 0 auto;
    white-space: nowrap;
    max-width: 250px;
    background: rgba(0,0,0,0.5);
    padding: 8px 16px;
    text-align: left;
    text-shadow: black 2px 2px 0px;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5em;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out, max-width 0.5s ease-in-out;
}
div.image_gallery #gifplayer-info:hover {
    max-width: calc(100% - 92px);
}
div.image_gallery #gifplayer.controls > #gifplayer-info {
    opacity: 1;
}
div.image_gallery #gifplayer-info p {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.image_gallery #gifplayer-info-url a {
    text-decoration: underline;
    color: #fff;
    font-size: 16px;
}


div.image_gallery div.thumbnail-body div#controls-container {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    opacity: 0.7
}
div.image_gallery:hover div.thumbnail-body div#controls-container {
    opacity: 1!important;
    background-color: #FFF;
}


/* svg image*/
/* image options */
div.image_gallery .image-options {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 2;
    opacity: 0.7;
    visibility: hidden;
}
div.image_gallery.pl-fixed .image-options {
    right: 50px;
}
div.image_gallery:hover .image-options {
    visibility: visible;
}
div.image_gallery .image-options:hover {
    opacity: 1!important;
    background-color: #FFF;
}

div.image_gallery div.img .annotations {
    position: absolute;
    top: 0;
    display: none;
}
div.image_gallery div.image_annotations.exporting svg image {
    display: none!important;
}
div.image_gallery div.image_annotations {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

div.image_gallery div.gallery_container div.multiple_image_gallery .carousel-inner div.img:not(.selected) {
    border-color: transparent;
}
div.image_gallery div.gallery_container div.multiple_image_gallery div.img.selected {
    box-shadow: none;
}

div.image_gallery.pl-fixed .gallery-close {
    display: block!important;
    z-index: 20!important;
    position: absolute;
    right: 50px;
    top: 10px;
}

.d3view-global-exporting div.image_gallery div.tab-pane.overlay_container .overlay_settings {
    display: none;
}

div.image_gallery .error-txt .popover .popover-content {
    width: 300px;
    word-wrap: break-word;
    /* overflow: hidden; */
    max-height: 200px;
    white-space: normal;
    overflow: auto;
}
/* /javascripts/plugins_src/video_analyzer/video_analyzer.css */
.video-analyser {
    --aspect_ratio: auto;
    position: relative;
    aspect-ratio: var(--aspect_ratio);
    /* background: #f4f4f4; */
    padding: 10px;
}

.video-analyser .va-top-nav {
    height: 45px;
    border-radius: 4px;
    background: #fff;
}

.video-analyser .va-main-container.no-top-nav {
    height: 100%;
}

.video-analyser .va-main-container:not(.no-top-nav) {
    height: calc(100% - 60px);
    margin-top: 15px;
}


.video-analyser p.br-4 {
    border-radius: 4px;
}

.video-analyser li.top-nav-list-item {
    padding: 3px 15px;
    border-bottom: 3px solid #fff;
    display: inline-flex;
    align-items: center;
}

.video-analyser li.top-nav-list-item:hover {
    background: #eee;
    cursor: pointer;
}

.video-analyser li.top-nav-list-item>i.tab-icon,
.video-analyser li.top-nav-list-item>span.tab-title {
    pointer-events: none;
}

.video-analyser li.top-nav-list-item.active {
    border-color: steelblue;
}

.video-analyser .tab-options {
    font-size: 1.1em;
    padding: 5px 5px;
}

.video-analyser .tab-options:hover {
    cursor: pointer;
    color: #fff;
    background: gray;
    border-radius: 4px;
}

.video-analyser .video-player {
    display: flex;
    height: 100%;
    /* gap: 1rem; */
    position: relative;
}

.video-analyser .va-player-renderer {
    width: 100%;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}

.video-analyser .va-player-controls {
    display: flex;
    flex-flow: column;
    background: #fff;
    border-radius: 4px;
    width: calc(23% - 1rem);
}

.video-analyser .va-control-container-1 {
    flex: 1 1 auto;
}

.video-analyser .va-control-container-2 {
    height: auto;
}

.video-analyser .va-pattern-list,
.video-analyser .va-regions-list {
    height: calc(100% - 110px);
}

.video-analyser .pattern-renderer {
    border: none !important;
}

.video-analyser .pattern-list-item {
    border-radius: 4px;
}

.video-analyser .pattern-list-item:hover {
    background-color: rgb(217, 244, 253);
}


.vp-dropzone {
    height: 100%;
    justify-content: center;
    border-radius: 4px;
    border: 3px dashed #ddd;
    color: gray;
}

.vp-dropzone:hover {
    cursor: ns-resize;
    user-select: none;
}

.vpd-icon {
    font-size: 60px;
}

.vp-dropzone * {
    pointer-events: none;
}

.va-player {
    position: relative;
    height: 100%;
}

.vp-video-container {
    height: calc(100% - 60px);
    position: relative;
}

.vp-video-controls {
    height: 60px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.va-video-controls {
    height: 100%;
    flex: 1 1 auto;
}

.va-video-info {
    height: 100%;
}

.va-animation-control {
    flex: 1 1 auto;
    margin: 0px 10px;
}

.va-range-controller {
    flex: 1 1 auto;
    margin: 0px 10px;
}

.va-animation-slider {
    height: 10px;
    background: gray;
    border: 1px solid #ddd;
    position: relative;
}

span.va-animation-complete {
    position: absolute;
    height: 10px;
    width: 0px;
    background: ghostwhite;
}

span.va-animation-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    left: 0px;
    box-shadow: 0px 0px 2px;
    background: #fff;
    top: -5px;
}

span.va-animation-handle:hover {
    cursor: ew-resize;
}

.vp-bounding-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0px;
    border: 2px solid steelblue;
    pointer-events: none !important;
}

.vp-info {
    position: absolute;
    top: 10px;
    left: calc(50% - 110px);
    pointer-events: none;
}

.vp-loader-bg {
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.region-renderer {
    border: none !important;
}

.region-list-item {
    border-left-style: solid;
    border-left-width: 4px;
}

.region-list-item:hover {
    cursor: pointer;
    background: #deecf8;
}

.vp-zoom {
    padding: 5px;
}



/* VP Modal CSS */

.va-modal-container .m0 {
    margin: 0px !important;
}

.va-modal-container .table-content {
    height: 200px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.va-modal-container .va-table {
    border: none !important;
}

.va-modal-container .va-table-row {
    height: 30px;
}

.va-modal-container .va-table-row:first-child {
    font-weight: 600;
    background-color: steelblue !important;
    color: whitesmoke;
}

.va-modal-container .va-table-row:nth-child(odd) {
    background-color: lightblue;
}

.va-modal-container .va-table-row>div {
    display: inline-flex;
    align-items: center;
    padding-left: 15px;
    height: 100%;
}

.va-modal-container .vp-modal-pattern-list {
    height: 200px;
    overflow: auto;
}

.va-modal-container .va-active>.img-thumbnail {
    border-color: steelblue !important;
}

.va-contextmenu>li.va-contextmenu-item {
    padding: 5px 10px;
}

.va-contextmenu>li.va-contextmenu-item:hover {
    cursor: pointer;
    background: #f4f4f4;
}

.va-contextmenu>li.va-contextmenu-item * {
    pointer-events: none;
}

.video-analyser .tm-config-info:hover {
    cursor: pointer;
    color: steelblue;
}

.video-analyser .va-loader-container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 30;
    left: 0;
    top: 0;
}

.video-analyser .va-loader-backdrop {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.video-analyser .va-loader-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-analyser .va-loader-content>h1 {
    color: whitesmoke;
}

.video-analyser .va-loader-progress-bar {
    width: 50%;
}

.video-analyser .video-edit-container {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}

.video-analyser .overlay-container {
    overflow: auto !important;
}

.video-analyser .new-plugin-template-ui .plugin-nav-overlay-container {
    width: 400px;
}
/* /javascripts/plugins_src/curvedigitizer/curvedigitizer.css */
/* inline image editor css */
.iie-plugin-backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, .45);
    transition: opacity .2s ease-in;
}

.iie-plugin-backdrop.in {
    opacity: 1 !important;
}

.iie-main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.iie-main-container .iie-canvas-container {
    background-color: #fff;
    position: absolute;
    outline: 1px solid #333;
    overflow: auto;
    scrollbar-gutter: stable;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.iie-controls {
    position: absolute;
}

.iie-controls button * {
    pointer-events: none;
}

.iie-dropdown {
    position: absolute;
    display: none;
}

.iie-dropdown .dropdown-menu {
    max-height: 350px;
    overflow-y: auto;
}

/* data digitizer css */

.curve-digitizer {
    position: relative;
}

.curve-digitizer .curve-digitizer-nav {
    height: 60px;
}

.curve-digitizer .curve-digitizer-body {
    height: calc(100% - 60px);
    display: flex;
    flex-flow: row nowrap;
}

.curve-digitizer .curve-digitizer-canvas-container {
    flex: 1 1 auto;
    box-shadow: 1px 1px 5px #ddd;
    border-radius: 6px;
}

.curve-digitizer .curve-digitizer-controls {
    width: max(20%, 350px);
}

.curve-digitizer .curve-digitizer-inputs {
    height: calc(50% - 25px);
}

.curve-digitizer .curve-digitizer-dataviewer {
    height: calc(100% - 100px);
}

.curve-digitizer .curve-digitizer-footer {
    height: 50px;
}

.curve-digitizer li.color-object {
    margin: 5px;
    padding: 5px;
    border: 2px solid #ddd;
}

.curve-digitizer li.color-object:hover {
    cursor: pointer;
}

/* New button styles for curve editing */
.curve-digitizer .btn-group .dropdown-menu {
    min-width: 200px;
}

.curve-digitizer .btn-group .dropdown-menu li a {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
}

.curve-digitizer .btn-group .dropdown-menu li a:hover {
    background-color: #f5f5f5;
}

.curve-digitizer .btn-group .dropdown-menu li a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Background opacity control styles */
.curve-digitizer .bg-opacity-label {
    font-weight: bold;
    color: #007bff;
}

.curve-digitizer input[name="backgroundOpacity"] {
    width: 100%;
    margin-top: 5px;
}

/* Render all curves mode styles */
.curve-digitizer .render-all-curves-btn {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}

.curve-digitizer .render-all-curves-btn:hover {
    background-color: #218838;
    border-color: #1e7e34;
    color: white;
}

.curve-digitizer .reset-all-curves-btn {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.curve-digitizer .reset-all-curves-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: white;
}

/* Context menu styles for curve selection */
.digitizer-dropdown {
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.digitizer-dropdown li a {
    padding: 8px 15px;
    display: block;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

.digitizer-dropdown li a:hover {
    background-color: #f5f5f5;
}

.digitizer-dropdown li:last-child a {
    border-bottom: none;
}

.curve-digitizer .color-object-rect {
    width: 20px;
    height: 20px;
}

.curve-digitizer .curve-digitizer-dataviewer .row.table-row {
    border: 1px solid #ddd;
    margin: 0px;
}

.curve-digitizer .curve-digitizer-dataviewer .row.table-row:first-child div.table-cell {
    font-weight: 500;
}

.curve-digitizer .curve-digitizer-dataviewer .row.table-row div.table-cell {
    padding: 5px 10px;
}

.curve-digitizer .curve-digitizer-dataviewer .row.table-row div.table-cell:not(:last-child) {
    border-right: 1px solid #ddd;
}

.curve-digitizer .curve-digitizer-dataviewer .cd-dv-table-body {
    height: calc(100% - 32px);
}

.curve-digitizer .cv-active {
    border-color: steelblue !important;
}

.curve-digitizer canvas.curve-digitizer-canvas.cd-panning:hover {
    cursor: move;
}

.curve-digitizer .cv-grab {
    cursor: grab !important;
}

.curve-digitizer .cv-default {
    cursor: pointer !important;
}

.curve-digitizer .cv-table-body {
    border: unset !important;
}

.curve-digitizer .cv-active-row {
    background: orangered;
    color: #fff;
    cursor: pointer;
}

.curve-digitizer datalist#point-count-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
    width: 100%;
}

.curve-digitizer datalist#point-count-labels>option {
    transform: rotate(-90deg);
    text-align: center;
}

.curve-digitizer datalist#point-count-labels>option:nth-child(1) {

    margin-left: -2px;
}

.curve-digitizer datalist#point-count-labels>option:nth-child(2) {

    margin-left: -7px;
}

.curve-digitizer datalist#point-count-labels>option:nth-child(3) {
    margin-left: 2px;
}

.curve-digitizer .plugin-nav-overlay-container {
    height: calc(100% - 4px) !important;
}


.curve-digitizer .overlay-container {
    overflow: auto;
}

/* Media Digitizer */

.media-digitizer {
    --color-black: hsl(0, 0%, 10%);
    --color-grays: hsl(0, 0%, 65%);
    --color-light: hsl(0, 0%, 96%);
    --color-white: hsl(0, 0%, 100%);
    --color-blues: hsl(225, 100%, 60%);
}

.media-digitizer {

    display: grid;
    grid-template-columns: auto 500px;
    position: relative;
}

.media-digitizer .media-digitizer-body {
    display: grid;
    grid-template-rows: 45px auto 50px;
    gap: 5px;
    border-right: 1px solid #DDD;
}

.media-digitizer .mbd-1 {
    border-bottom: 1px solid #DDD;
}

.media-digitizer .mbd-2 {
    border-bottom: 1px solid #DDD;
    position: relative;
}

.media-digitizer .mbd-controls {
    margin: 0 !important;
}

.media-digitizer .mbd-slide-controls {
    height: 10px;
    border-radius: 4px;
    background: #34495E;
    position: relative;
    flex: 1 1 auto;
}

.media-digitizer .display-time {
    width: 75px;
}

.media-digitizer span.mbd-handle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: -5px;
    background: #fff;
    border: 1px solid #DDD;
    z-index: 2;
    padding: 0px 0px 0px 6px;
}

.media-digitizer span.mbd-handle:hover {
    cursor: pointer;
}

.media-digitizer .mbd-slide-fill {
    position: absolute;
    left: 0;
    top: 0;
    background: #E84C3D;
    border-radius: 4px 0px 0px 4px;
    height: 10px;
}

.md-backdrop {
    position: fixed;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    cursor: progress;
    background-color: rgba(0, 0, 0, 0.3);
}

.media-digitizer .annotator-bounding-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 10;
    border: 2px solid steelblue;
    display: none;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    user-select: none;
    pointer-events: none;
}

.media-digitizer .md-hover {
    cursor: pointer;
}

.media-digitizer video {
    visibility: hidden;
    z-index: -2;
    position: absolute;
    left: 0;
    top: 0;
}

.media-digitizer .md-data-view {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
}

.media-digitizer .md-settings {
    border-bottom: 1px solid #DDD;
}

.video-analyser-manager .md-region-item>label.md-title {
    max-width: 75%;
    word-break: break-all;
}

.video-analyser-manager .md-region-item>div.btn-group {
    margin-left: auto;
}


.video-analyser-manager .md-icon {
    padding: 5px;
}

.video-analyser-manager .md-icon:hover {
    cursor: pointer;
}

.media-digitizer canvas.picked-region {
    visibility: hidden;
    z-index: -2;
    position: absolute;
    left: 0;
    top: 0;
}

.media-digitizer .media-analyser-canvas {
    visibility: hidden;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.video-analyser-manager {
    --search-bar-font-color: #333;
    --search-bar-bg-color: #f4f4f4;

    --color-black: hsl(0, 0%, 10%);
    --color-grays: hsl(0, 0%, 65%);
    --color-light: hsl(0, 0%, 96%);
    --color-white: hsl(0, 0%, 100%);
    --color-blues: hsl(225, 100%, 60%);
}

.video-analyser-manager .form-floating {
    position: relative;
    width: 100%;
    height: 3rem;
}

.media-digitizer .form-floating-textarea {

    height: 4rem !important;
}

.video-analyser-manager .form-floating-label {
    position: absolute;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    left: 1rem;
    top: 0.75rem;
    padding: 0 0.25rem;
    color: var(--color-gray);
    background: var(--color-white);
    transition: all 0.3s ease;
    margin-top: 0px;
}

.video-analyser-manager .form-floating-input {
    position: absolute;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    resize: none;
    width: 100%;
    height: auto;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.25rem !important;
    border: 1.5px solid var(--color-grays);
    color: var(--color-black) !important;
    background: transparent !important;
    transition: all 0.2s ease-in-out;
}


.video-analyser-manager .form-floating-input::placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent;
}

.video-analyser-manager .form-floating-input:focus {
    outline: none !important;
    border: 2px solid var(--color-blues) !important;
}

.video-analyser-manager .form-floating-input.gi-input-error {
    border-color: #dc3545 !important;
}


.video-analyser-manager .form-floating-input:focus+.form-floating-label {
    top: -0.75rem;
    left: 1rem;
    z-index: 5;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-blues);
    transition: all 0.2s ease-in-out;
}

.video-analyser-manager .form-floating-input.gi-input-error+.form-floating-label {
    color: #dc3545 !important;
    ;
}

.video-analyser-manager .form-floating-input:empty:not(:focus)+.form-floating-label {
    top: -0.75rem;
    left: 1rem;
    z-index: 9;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.media-digitizer .md-df-viewer {
    flex-direction: column;
    gap: 10px;
}

.media-digitizer .md-df-viewer div.tab-content {
    flex: 1 1 auto;
}

.media-digitizer .md-df-viewer div.tab-content div.tab-pane {
    overflow: auto;
}

.video-analyser-manager table {
    table-layout: fixed;
}

.md-group-datalist-view .md-table-cell,
.video-analyser-manager .md-table-cell {
    padding: 5px;
}

.md-group-datalist-view .md-table-body>div.row:nth-child(even),
.video-analyser-manager .md-table-body>div.row:nth-child(even) {
    background: lightblue;
}

.md-group-datalist-view .md-table-body,
.video-analyser-manager .md-table-body {
    border: 1px solid #ddd !important;
    margin: 0px 5px;
}

.media-digitizer i.display-path-icon {
    font-size: 21px;
    padding: 5px;
    border-radius: 4px;
}

.media-digitizer i.display-path-icon:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

.video-analyser-manager canvas.grab:hover {
    cursor: grab !important;
}

.media-digitizer .region-selection-controls :is(a:is(:focus, :hover)) {
    text-decoration: none;
}

.video-analyser-manager li.md-group-item {
    justify-content: space-between;
}

/* media digitizer export to ppt modal css */
.md-group-datalist-view {
    --aspectRatio: auto;
    aspect-ratio: var(--aspectRatio);
}

.media-digitizer .md-info-bar {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.digitizer-dropdown {
    padding: 5px !important;
}

.digitizer-dropdown:hover {
    cursor: pointer;
    background-color: #eee;
}

.media-digitizer .draw-canvas {
    z-index: 3;
    position: absolute;
    left: 0;
    top: 0;
}

.media-digitizer .draw-canvas:hover {
    cursor: pointer;
}

.media-digitizer .draw-canvas.grab:hover {
    cursor: grab !important;
}

.media-digitizer #md-regions ul.list-group {
    max-height: calc(100% - 40px);
    overflow: auto;
}

.media-digitizer #md-groups ul.list-group {
    max-height: calc(100% - 40px);
    overflow: auto;
}

.media-digitizer .groups-title-div>div {
    flex: 1 1 auto;
}

.media-digitizer .md-region-checkbox {
    margin: 0 10px 0 0;
}

.media-digitizer .md-video-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.media-digitizer .md-video-slider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: calc(100% - 10px);
    background: #eee;
}

.media-digitizer .md-slider-brush {
    background: #cbf0fc;
    border: 1px solid lightgray;
    z-index: 3;
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: calc(100% - 10px);
}

.media-digitizer .md-current-point {
    position: absolute;
    left: 0;
    top: 2.5px;
    width: 4px;
    height: calc(100% - 5px);
    background: steelblue;
    z-index: 4;
}

.media-digitizer .media-canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
}


.media-digitizer .md-current-point:hover {
    cursor: grab;
}

.media-digitizer .md-video-slider .ui-resizable-e {
    background: steelblue;
    border-radius: 0 6px 6px 0;
}

.media-digitizer .md-video-slider .ui-resizable-w {
    background: steelblue;
    border-radius: 6px 0 0 6px;
}

.media-digitizer .drawing-controls {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 11;
}

.media-digitizer .video-overlay-config {
    max-width: 250px !important;
    width: 250px;
}

.media-digitizer i.sort-icon:hover {
    cursor: pointer;
    background: #eee;
}


/* New Plugin UI CSS */

.new-plugin-template-ui {
    --aspect_ratio: auto;
    --bg_color: #F8F8FF;

    position: relative;
    display: flex;
    gap: 1rem;
    background-color: var(--bg_color);
    aspect-ratio: var(--aspect_ratio);
}

.new-plugin-template-ui .plugin-main-container {
    flex: 1 1 auto;
}

.new-plugin-template-ui .plugin-nav-controls {
    width: 85px;
    border-left: 1px solid #ddd;
}

.new-plugin-template-ui .plugin-nav-overlay-container {
    position: absolute;
    right: 85px;
    top: 2px;
    height: calc(100% - 65px);
    width: 300px;
    z-index: 20;
    background: #fff;
    border-radius: 5px 0px 0px 5px;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.new-plugin-template-ui ul.ui-right-nav {
    display: flex;
    flex-flow: column;
    gap: 10px;
}

.new-plugin-template-ui li.ui-right-nav-item.active {
    color: black;
    font-weight: bolder;
}

.new-plugin-template-ui li.ui-right-nav-item {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 10px 7px;
    border-radius: 4px;
    color: #555;
}

.new-plugin-template-ui li.ui-right-nav-item:not(.disabled):hover {
    cursor: pointer;
}

.new-plugin-template-ui li.ui-right-nav-item:not(.disabled, .active):hover {
    background-color: #ddd;
}

.new-plugin-template-ui li.ui-right-nav-item>small {
    line-height: 1.2;
    word-wrap: break-word;
}

.new-plugin-template-ui li.ui-right-nav-item * {
    pointer-events: none;
}

.new-plugin-template-ui span.close-panel-icon {
    background: #337ab7;
    color: whitesmoke;
    position: absolute;
    border-radius: 50%;
    padding: 8px 10px;
    left: -14px;
    top: 15px;
}

.new-plugin-template-ui span.close-panel-icon:hover {
    background: #0e538f;
    cursor: pointer;
}
/* /javascripts/plugins_src/folder_reader/folder_reader.css */
.folder-reader {
    position: relative;
    cursor: ns-resize;
}

.folder-reader .folder-dropzone {
    height: 160px;
    border: 4px dashed #DDD;
    overflow: auto;
    flex-flow: row wrap;
    position: relative;
    padding: 10px;
    gap: 10px;
    align-items: flex-start;
}

.folder-reader .folder-dropzone :is(p, span) {
    pointer-events: none;
}

.folder-dropzone-input {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: -2;
    width: 0;
    height: 0;
}

.folder-reader .btn-reset {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.folder-reader .folder-dropzone:is(.dropped:hover) :where(.btn-reset) {
    display: inline-block !important;
}

.folder-dropzone :is(.fv-item) {
    display: flex;
    flex-flow: column nowrap;
    gap: 5px;
}

.folder-dropzone :is(.fv-item>i) {
    font-size: 21px;
}

.folder-dropzone :is(.fv-item>span) {
    max-width: 150px;
    word-break: break-all;
}
/* /javascripts/plugins_src/json_editor/json_editor.css */
.node rect {
    cursor: pointer;
    fill: #fff;
    fill-opacity: .5;
    stroke: #3182bd;
    stroke-width: 1.5px;
}

.node text {
    font: 10px sans-serif;
    pointer-events: none;
}

/*path.link {*/
/*    fill: none;*/
/*    stroke: #9ecae1;*/
/*    stroke-width: 1.5px;*/
/*}*/

.add-item-form {
    height: 400px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.add-field-form {
    height: 300px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.edit-key-form {
    height: 225px;
    width: 400px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

h2, .edit, #fieldSingle {
    width: 90%;
    margin: 0 auto;
}

.add-item-dialog-btn {

}

.cancel-btn {
    background-color: #ff5c5c;
    border-radius: 5px;
}

.submit-btn {
    background-color: #4B9FEF;
    border-radius: 5px;
}

.add-field-btn {
    background-color: #88C791;
    border-radius: 5px;
}
/* /javascripts/plugins_src/keywordviewer/keywordviewer.main.css */
.node rect {
    cursor: pointer;
    fill: #fff;
    fill-opacity: .5;
    stroke: #3182bd;
    stroke-width: 1.5px;
}

.node text {
    font: 10px sans-serif;
    pointer-events: none;
}

path.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}

.add-item-form {
    height: 400px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.add-field-form {
    height: 300px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.edit-key-form {
    height: 225px;
    width: 400px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

h2, .edit, #fieldSingle {
    width: 90%;
    margin: 0 auto;
}

.add-item-dialog-btn {

}

.cancel-btn {
    background-color: #ff5c5c;
    border-radius: 5px;
}

.submit-btn {
    background-color: #4B9FEF;
    border-radius: 5px;
}

.add-field-btn {
    background-color: #88C791;
    border-radius: 5px;
}
/*#search-bar {*/
    /*width:100%;*/
/*}*/

/*.supp-ext-ul {*/
    /*list-style: none;*/
    /*padding-left: 0;*/
/*}*/

/*#globalSaveBtn {*/
    /*width: 110px !important;*/
/*}*/

#kwv-manual-details-popup {
    background-color: white;
    border: 2px solid black;
}

#variable-details-list {
    padding: 15px;
}

.kwv-loader, .kwv-init-loader {
    position: absolute;
    top: 40%;
    left: 40%;
}

#keyword-viewer > .drop-files-here-pos {
    width:389px;
    height:300px;
}

.kwv-drop-files-here {
    width: 100%;
    height: 100%;
}

#keyword-viewer > .view-toggle {
    float: right;
}

#keyword-viewer > .recent-files-view {
    width: 100%;
    height: 100%;
}

#keyword-viewer > .item-list-item {
    line-height: 20px;
    margin: 0px;
    border: 0px;
    background: transparent;
}

#keyword-viewer > .chev-btn {
    position: relative;
    top: 45%;
}

#keyword-viewer > file-preview-pane {
    width: 500px;
}

/*#recent-files-main-cont, #view-tour-cont {
    padding: 0px;
    height: 60px;
}*/

#keyword-viewer > #recent-files-main-cont > a {
    width: 100%;
    height: 60px;
    font-size: 30px;
}

/*#btnRecent, #btnTour, #btnSubmit {*/
    /*width: 95%;*/
    /*height: 100%;*/
/*}*/

#keyword-viewer > .selected {
    background-color: lightblue;
}

#keyword-viewer > #recent-files-list {
    height: 200px;
}

#keyword-viewer > .recent-files-popover-content {
    left: -75px;
}

#keyword-viewer > .kwv-slick-header {
    background-color: black;
    color: white;
}

#keyword-viewer > .dat-row {
    border-color: lightblue;
}

#keyword-viewer > .kwv-axis .tick > text {
    fill: black;
}

.kwv-axis > path  {
    stroke: black;
}

#keyword-viewer > #topbar {
    margin-left: 0px;
    padding-left: 0px;
    height: 30px !important;
    position: relative !important;
    top: 60px !important;
    left: -10px !important;
}

#keyword-viewer > .topbar-container {
    margin-left: 0px;
    padding-left: 0px;
    height: 30px !important;
}

#keyword-viewer > .btn.nohover:hover {
    background: lightsalmon;
}

#keyword-viewer > #add-files-pane, #file-preview-pane {
    height: 350px;
}

#keyword-viewer > .text_view_display {
    position: relative !important;
    top: 120px !important;
    left: -25px;
}

#keyword-viewer > .modal.left .modal-dialog,
#keyword-viewer > .modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

#keyword-viewer > .modal.left .modal-content,
#keyword-viewer > .modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

#keyword-viewer > .modal.left .modal-body,
#keyword-viewer > .modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
#keyword-viewer > .modal.left.fade .modal-dialog{
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

#keyword-viewer > .modal.left.fade.in .modal-dialog{
    left: 0;
}

/*Right*/
#keyword-viewer > .modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

#keyword-viewer > .modal.right.fade.in .modal-dialog {
    right: 0;
}

#keyword-viewer > .kwv-dock-tab {
    border-radius: 15px;
    position: fixed;
    left: 0px;
    bottom: -25px;
    width: 300px;
    height: 50px;

}

.kwv-dock-header {
    border-radius: 15px;
    position: relative;
    left: 0px;
    bottom: 47%;
    width: 300px;
    height: 50px;
}

.kwv-dock-tab-text {
    position: relative;
    left: 32%;
}

#kwv-dock-dialog {
    width: 300px;
}

#keyword-viewer > sidenav {
    height: 0%; /* 100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    bottom: 0;
    bottom: 0;
    left: 0;
    background-color: white; /* Black*/
    border: 1px solid #d9edf7;
    /*overflow-x: hidden; !* Disable horizontal scroll *!*/
    transition: all 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    z-index: 1;
}

/*!* The navigation menu links *!*/
/*.sidenav a {*/
    /*!*padding: 8px 8px 8px 32px;*!*/
    /*text-decoration: none;*/
    /*!*font-size: 25px;*!*/
    /*color: #818181;*/
    /*display: block;*/
    /*transition: 0.3s*/
/*}*/

/*!* When you mouse over the navigation links, change their color *!*/
/*.sidenav a:hover, .offcanvas a:focus{*/
    /*color: #f1f1f1;*/
/*}*/

/* Position and style the close button (top right corner) */
#keyword-viewer > .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#keyword-viewer > #main {
    transition: margin-bottom .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#keyword-viewer > @media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
}

#keyword-viewer > @media screen and (max-height: 450px)
    {
    .sidenav a {
        font-size: 18px;
    }
}

#keyword-viewer > #dockHeader {
    border-radius: 15px;
    position: relative;
    left: 0px;
    bottom: 7%;
    width: 300px;
    height: 50px;
    z-index: -1;
}

#keyword-viewer > #hider {
    position: relative;
    background-color: white;
    bottom: 13%;
    height: 35px;
    border-left: 1px solid #d9edf7;
    border-top: 1px solid #d9edf7;
}

#keyword-viewer > #hideDock {
    position: relative;
    right: 5px;
}

.kwv-modal-header {
    padding: 55px;
}

#keyword-viewer > #btnCloseAddFiles {
    position: relative;
    top:-50px;
    right:-45px;
}

#keyword-viewer > #supported-extensions, #keyword-viewer > .kwv-modal-title {
    position: relative;
    top: -35px;
}

.kwv-modal-body {
    width: 100% !important;
}

#keyword-viewer > .dz-message-text, .kwv-file-viewer-title {
    font-size: 40px;
}

/* Absolute Center Spinner */
#keyword-viewer > .loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Transparent Overlay */
#keyword-viewer > .loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
#keyword-viewer > .loading:not(:required) {
    /* hide "loading..." text */
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

#keyword-viewer > .loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    -webkit-animation: spinner 1500ms infinite linear;
    -moz-animation: spinner 1500ms infinite linear;
    -ms-animation: spinner 1500ms infinite linear;
    -o-animation: spinner 1500ms infinite linear;
    animation: spinner 1500ms infinite linear;
    border-radius: 0.5em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#keyword-viewer > .ui-button {
    padding: 6px !important;
}

#keyword-viewer > #panel_viewer {
    padding-top: 50px;
}

.kwv-panel-body {
    height: 350px;
    width: 100%;
    max-height: 350px;
    overflow: scroll;
}

/*.kwv-panel-heading {*/
    /*height: 75px;*/
/*}*/

/*.kwv-grid-item-name > a {
    color: white;
}*/

#keyword-viewer > .panel-search-container {
    padding-bottom: 20px;
    padding-left: 25px;
}

#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

/*ul { width: 300px; list-style: none; margin: 0; padding: 0; }*/
.kwv-panel-item { background: white; position:relative;margin: 1em 0; padding: 1em; list-style: none; padding-left: 42px; }
.kwv-handle { position: relative; left: -15px; top: -10px; bottom: 0; padding:8px; }
/*.ui-selecting { background: #eee; }*/
/*.ui-selecting .handle { background: #ddd; }*/
/*.ui-selected { background: #def; }*/
/*.ui-selected .handle { background: #cde; }*/

.kwv-panel-checkbox {
    padding-right: 5px !important;
}

/*#text_viewer, #tree_viewer {*/
    /*width: 50%;*/
/*}*/

#text_viewer {
    padding-top: 10px;
}

#tv-search-bar {
    width: 50%;
}

.tv-search-bar-container {
    padding-bottom: 15px;
}

.kwv-handle {
    padding-right: 10px;
}

.add-files-footer-pane {
    padding: 5px !important;
}

.kwv-link-tooltip {
    position: absolute;
    text-align: center;
    width: 60px;
    height: 28px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
}

#panel_viewer {
    padding: 15px;
}

.kwv-comp-type-selected {
    background-color: lightblue;
    border: 2px solid blue;
}

.keywordviewer.ui-dialog {
    padding: 0;
}

.keywordviewer.ui-dialog .ui-dialog-titlebar {
    background: #FFF;
    border: none;
    padding-bottom: 5px;
    border-bottom: 1px solid #DDD;
    border-radius: 0;
    margin-bottom: 5px;
}


/* /javascripts/plugins_src/datatable/datatable.css */
:root {
    --dt-selection-color: #d3f4ff73;
    --dt-selection-color-dark: #d3f4ffbf;
    --dt-selection-color-light: #f4f5f7;
    --dt-selection-color-dark2: #DDD;
}

div.datatable-container {
    position: relative;
}
div.datatable-container > .d3view-viz {
    min-height: inherit;
}
.bs_datatable_wrapper {
    /*position: absolute;*/
    /*overflow-y: hidden;*/
    /*overflow-x: hidden;*/
    /*position: relative;*/
    padding: 15px;
    height: 100%;
    width: 100%;
    background-color: #FFF;
    min-height: 300px;
    position: relative;
}
.bs_datatable_wrapper.disableYScroll  {
    /*overflow-y: auto!important;*/
}
.bs_datatable_wrapper .dataTables_wrapper {
    background-color: #FFF;
    position: relative;
    top: 40px;
    padding-left: 10px;
}

.bs_datatable_wrapper .dt-chart-container {
    position: relative;
    /*top: 40px;*/
    overflow: auto;
    flex: 1 1 auto;
    min-height: 250px;
}

.bs_datatable_wrapper.searchEnabled .dataTables_wrapper {
    top: 86px;
}

/*.bs_datatable_wrapper .d3view-side-modal {*/
/*    height: auto;*/
/*}*/
.bs_datatable_wrapper .d3view-side-modal .content-wrapper {
    height: auto;
}
.d3view-plugins-sidebar.viz-config-container .content-wrapper {
    height: 100%!important;
}
.d3view-plugins-sidebar.viz-config-container .config-body {
    height: calc(100% - 20px);
    overflow: auto;
}
.d3view-plugins-sidebar.viz-config-container.hasSettingsList .config-body {
    height: calc(100% - 114px);
}
.d3view-plugins-sidebar.viz-config-container .config-body label {
    margin-top: unset!important;
}

.bs_datatable_wrapper .scroll_button {
    display: none;
    /*position: absolute;*/
    z-index: 2;
    /*padding: 0 5px;*/
    /*top: 25px;*/
    cursor: pointer;
    font-size: 1.2em;
    /*color: darkslategray;*/
    /*background: #eee;*/
}
.bs_datatable_wrapper.scroll_enabled .scroll_buttons .scroll_button {
    display: inline-block!important;
}
.bs_datatable_wrapper.scroll_enabled .scroll_buttons .scroll_button:hover {
    color: red!important;
}
.bs_datatable_wrapper.scroll_enabled .dataTables_wrapper,
.bs_datatable_wrapper.scroll_enabled .setting_buttons {
    /*padding-right: 30px;*/
}
/*.bs_datatable_wrapper.searchEnabled .scroll_button {*/
/*    top: 82px;*/
/*}*/
.bs_datatable_wrapper .scrollLeft {
    right: 25px;
}
.bs_datatable_wrapper .scrollRight {
    right: 8px;
}
.bs_datatable_wrapper .scroll_button.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.bs_datatable_wrapper .scroll_button.disabled * {
    pointer-events: none;
}





.bs_datatable_wrapper div.dts div.dataTables_scrollBody {
    background: none;
}
.bs_datatable_wrapper .dataTables_scrollBody thead th,
.bs_datatable_wrapper div.DTFC_LeftBodyWrapper thead th {
    padding: 0 16px!important;
}

/* spinner */
.bs_datatable_wrapper .dt-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 4em;
    color: steelblue;
}
.bs_datatable_wrapper input {
    /*height: auto!important;*/
}
.bs_datatable_wrapper .isEditing input[type="date"]:after {
    content: '';
}
.bs_datatable_wrapper.isLoading {
    background-color: #f5f5f5;
    min-height: 400px;
}
.bs_datatable_wrapper.isLoading div.dataTables_wrapper {
    opacity: 0.4;
}

@media screen and (min-width: 992px) {
    .bs_datatable_wrapper .center_buttons {
        text-align: center;
    }
    .bs_datatable_wrapper .right_buttons {
        text-align: right;
    }
}
.bs_datatable_wrapper .warning_text {
    /*position: absolute;*/
    /*left: 45%;*/
    /*top: 50%;*/
    display: block !important;
}
.bs_datatable_wrapper table.bs-dt td, .bs_datatable_wrapper table.bs-dt th {
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs_datatable_wrapper table.bs-dt th {
    vertical-align: middle!important;
}

.bs_datatable_wrapper .table-settings-container .table-option {
    display: flex;
    align-items: center;
}
/* border */
.bs_datatable_wrapper table.renderingArea.border-none tbody td {
    border: none;
}
.bs_datatable_wrapper table.renderingArea.border-none thead tr th {
    border: none!important;
}
.bs_datatable_wrapper table.renderingArea thead tr th:hover {
    background-color: #f1f3f4;
    border-right: 1px solid #DDD!important;
}
.bs_datatable_wrapper table.renderingArea.border-all td:first-child {
    border-top: none!important;
}

.bs_datatable_wrapper table.renderingArea.border-all td {
    border: 1px solid #ddd !important;
    border-top: none !important;
    border-right: none !important;
}
.bs_datatable_wrapper table.renderingArea.border-all th {
    border: 1px solid #DDD!important;
    /*border-bottom: none !important;*/
    border-right: none !important;
}
.bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th,
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th {

    border-right: 1px solid #DDD!important;
    border-top: 1px solid #DDD!important;
    border-bottom: 1px solid #DDD!important;
}
.bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th:first-child,
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th:first-child {
    border-left: 1px solid #DDD!important;
}
.bs_datatable_wrapper table.renderingArea.border-header tbody td {
    border: none;
}
.bs_datatable_wrapper table.renderingArea.border-header tbody tr[data-id] td:first-child {
    border-left: 3px solid transparent;
}
.bs_datatable_wrapper table.renderingArea.border-hr td {
    border-bottom: 1px solid #ddd !important;
    border-top: none !important;
    border-right: none !important;
}
.bs_datatable_wrapper table.renderingArea.border-vr td {
    border-right: 1px solid #ddd !important;
    border-top: none !important;
    border-bottom: none !important;
}
.bs_datatable_wrapper table.renderingArea.border-vr th {
    /*border-right: 1px solid #ddd !important;*/
}
.bs_datatable_wrapper table.renderingArea.border-vr tr:last-child td {
    border-bottom: 1px solid #ddd !important;
}
.bs_datatable_wrapper table.renderingArea.border-vr td:first-child {
    border-left: 1px solid #DDD!important;
}


/* dropdown submenu */
div.bs_datatable_wrapper .dropdown-submenu {
    position:relative;
}
div.bs_datatable_wrapper .dropdown-submenu>.dropdown-menu {
    top:0;
    margin-top: -1px;
    margin-left:0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
div.bs_datatable_wrapper .dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

/* text align */
.bs_datatable_wrapper table.text-left.dataTable th,
.bs_datatable_wrapper table.text-left.dataTable td {
    text-align: left!important;
}
.bs_datatable_wrapper table.text-center.dataTable th,
.bs_datatable_wrapper table.text-center.dataTable td {
    text-align: center!important;
}
.bs_datatable_wrapper table.text-right.dataTable th,
.bs_datatable_wrapper table.text-right.dataTable td {
    text-align: right!important;
}
.bs_datatable_wrapper table.text-justify.dataTable th,
.bs_datatable_wrapper table.text-justify.dataTable td {
    text-align: justify!important;
}



.bs_datatable_wrapper table.bs-dt tbody td {
    position: relative;
    /*border: none;*/
    vertical-align: middle;
    padding: 8px 16px;



    /*padding: 1rem;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*font-family: 'RobotoDraft', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;*/

}

.bs_datatable_wrapper:not(.flipTable) table.bs-dt tbody td.collapsed,
.bs_datatable_wrapper:not(.flipTable) table.bs-dt thead th.collapsed {
    display: none;
}
.bs_datatable_wrapper div.dataTables_scrollHead {
    /*box-shadow: 0px 1px 15px -9px #444;*/
    z-index: 1;
    width: auto!important;
}

.bs_datatable_wrapper div.dataTables_scrollHead.scrolling {
    box-shadow: -1px 4px 9px -8px #444;
}


.bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th,
.bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th {
    overflow: hidden;
    text-overflow: ellipsis;

    /*padding: 8px 16px;*/



    /*color: #4b4a4a;*/
    /*letter-spacing: 0.01rem;*/
    border-bottom: 1px solid rgba(0, 0, 0, 0.12)!important;
    /*padding: 1.2rem;*/
    /*padding: 1.3rem;*/

    cursor: context-menu;

}

.bs_datatable_wrapper .dataTables_scrollHead thead tr:hover,
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper thead tr:hover {
    background-color: #FFF!important;
}


/*.bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th:hover,*/
/*.bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th:hover,*/
.bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th.th-selected,
.bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th.th-selected,
.bs_datatable_wrapper div.dataTables_scrollHead table.bs-dt th.popover_open,
.bs_datatable_wrapper .DTFC_LeftHeadWrapper table.bs-dt th.popover_open {
    background-color: var(--dt-selection-color);
}






.bs_datatable_wrapper .dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
    width: auto!important;
    margin-right: -15px;
}

.bs_datatable_wrapper.disableYScroll .dataTables_wrapper.no-footer .dataTables_scrollBody {
    overflow-x: hidden!important;
}




.bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr {
    background-color: #FFF;
    height: 50px;
    /*height: auto!important;*/
}
.bs_datatable_wrapper table.bs-dt:not(.placeholder) tbody tr.no-data {
    background: #f5f5f5!important;
    text-align: center!important;
}


.bs_datatable_wrapper.row_reordering table.bs-dt tbody tr.noreorder {
    cursor: not-allowed;
    background-color: #f5f5f5!important;
    opacity: 0.5;
}
/*.bs_datatable_wrapper table.renderingArea {*/
    /*table-layout: fixed;*/
/*}*/

.bs_datatable_wrapper table.bs-dt .hidden-col-border:hover {
    border-color: red!important;
}


/* rowspacing */
.bs_datatable_wrapper table.renderingArea[data-rowspacing="min"] tr td {
    padding: 4px 4px;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="min"] thead th:not(.checkbox_selection) {
    padding: 4px 4px!important;
}
.bs_datatable_wrapper .dataTables_scrollBody table.renderingArea[data-rowspacing="min"] thead th:not(.checkbox_selection) {
    padding: 0 4px!important;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="average"] tr td {
    padding: 8px 8px;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="average"] thead th:not(.checkbox_selection) {
    padding: 8px 8px!important;
}
.bs_datatable_wrapper .dataTables_scrollBody table.renderingArea[data-rowspacing="average"] thead th:not(.checkbox_selection) {
    padding: 0 8px!important;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td {
    padding: 16px;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td.isEditing {
    padding: 0;
}
.bs_datatable_wrapper table.renderingArea[data-rowspacing="max"] tr td.isEditing .td-span-input input:after {
    content: '';
}
/* word wrap */
.bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] span.td-span,
.bs_datatable_wrapper:not(.scroll_enabled) table.renderingArea span.td-span {
    white-space: normal;
    word-break: break-all;
    max-height: 200px;
    overflow: auto;
    display: inline-block;
}
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] span.td-span {
    white-space: nowrap;
}
.bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] td {
    overflow: unset;
    text-overflow: unset;
}
.bs_datatable_wrapper table.renderingArea[data-wordwrap="true"] .td-sc-fm {
    display: flex;
    flex-wrap: wrap;
}
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm,
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] h2.td-sc-fm,
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm h2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*display: block;*/
    /*height: 30px;*/
    /*width: 100%;*/
    position: relative;
}
.bs_datatable_wrapper table.renderingArea .isEditing .td-sc-fm:has(.isDate) {
    display: block;
    width: 100%;
    height: 30px;
}
/** tags **/
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm.d3view-tags-container {
    display: block;
}
.bs_datatable_wrapper table.renderingArea[data-wordwrap="false"] .td-sc-fm.d3view-tags-container .tag-item {
    white-space: nowrap;
}



.bs_datatable_wrapper table.bs-dt tr[data-static="true"] {
    height: 70px;
    text-align: center;
}

.bs_datatable_wrapper table.bs-dt tr[data-static="true"] td.ui-selecting,
.bs_datatable_wrapper table.bs-dt tr[data-static="true"] td.ui-selected {
    background-color: #428bca!important;
    color: #FFF!important;
}




.bs_datatable_wrapper:not(.flipTable) table.bs-dt td.checkbox_selection, .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.checkbox_selection,
.bs_datatable_wrapper:not(.flipTable) table.bs-dt td.collapsible_icon, .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.collapsible_icon,
.bs_datatable_wrapper:not(.flipTable) table.bs-dt td.row_number, .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.row_number {
    width: 49px;
    padding: 0!important;
    position: relative;
    background-image: none!important;
    text-align: center!important;
    font-size: initial;
}
.bs_datatable_wrapper:not(.flipTable) table.bs-dt td.row_number, .bs_datatable_wrapper:not(.flipTable) table.bs-dt th.row_number {
    border-left: 5px solid transparent;
}
.bs_datatable_wrapper table.bs-dt th.checkbox_selection .select_all {
    margin-top: 0;
    /*position: absolute;*/
    /*top: 8px;*/
    /*left: 45%;*/
}
/*.bs_datatable_wrapper table.bs-dt th[data-column] {*/
    /*min-width: 200px!important;*/
/*}*/
.bs_datatable_wrapper table.bs-dt td[data-type="image"], .bs_datatable_wrapper table.bs-dt td[data-type="curve"] {
    /*text-align: center;*/
}
/*.bs_datatable_wrapper table.bs-dt tfoot th {*/
/*    border: none!important;*/
/*    padding: 4px 0;*/
/*}*/
.bs_datatable_wrapper table.bs-dt tfoot th input {
    width: 90%!important;
}
.bs_datatable_wrapper table.bs-dt tbody tr.tr-dragging {
    background-color: lightblue!important;
}
.bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting, .bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting_asc,
.bs_datatable_wrapper table.dataTable thead th:not(.checkbox_selection).sorting_desc {
    padding-right: 15px!important;
    background-image: none!important;
    border-right-style: solid;
    border-right-width: 3px;
    border-right-color: transparent;
}
.bs_datatable_wrapper table.dataTable thead th.col_group {
    border-bottom: none;
    text-align: center;
}
.bs_datatable_wrapper table.dataTable thead th:last-child {
    border-right-width: 1px;
}
/* selectable rows */
.bs_datatable_wrapper table.bs-dt tbody tr {
    cursor: pointer;
}
.bs_datatable_wrapper table tbody tr td:first-child {
    border-left: 3px solid transparent;
}
.bs_datatable_wrapper table tbody tr.ui-selected, .bs_datatable_wrapper table tbody tr.ui-selecting {
    background-color: var(--dt-selection-color-light)!important;
    color: #000!important;
    /*color: #1967d2;*/
}
.bs_datatable_wrapper table tbody tr.temp-row-selected:not(.ui-selected) td {
    border-top: 1px solid blue!important;
    border-bottom: 1px solid blue !important;
}

.bs_datatable_wrapper table tbody tr.text-white {
    color: #FFF;
}
.bs_datatable_wrapper[data-checkbox="true"] table tbody tr td:first-child, .bs_datatable_wrapper[data-checkbox="true"] table tbody tr td:first-child {
    border-left: 3px solid transparent;
}
.bs_datatable_wrapper table tbody tr.ui-selected td:first-child, .bs_datatable_wrapper table tbody tr.ui-selecting td:first-child {
    border-left: 3px solid #428bca;
}
.bs_datatable_wrapper table tbody tr td:first-child, .bs_datatable_wrapper table tbody tr td:first-child {
    border-left: 3px solid transparent;
}

.bs_datatable_wrapper div.dataTables_paginate {
    margin-top: 10px!important;
    white-space: nowrap;
    float: right;
}
.bs_datatable_wrapper div.dataTables_info {
    margin-top: 10px;
    float: left;
    padding-top: 0!important;
}

/* sort icon */
.bs_datatable_wrapper table.bs-dt thead .sort_icon {
    position: relative!important;
    top: 3px!important;
    /*left: 8!important;*/
    padding: 0 5px;
    opacity: 0;
    cursor: pointer!important;
    display: none;



    /*display: none;*/

}

.bs_datatable_wrapper .sort_dropdown {
    position: relative;
    padding: 0 2px;
    margin: 0 3px;
}
.bs_datatable_wrapper .sort_dropdown > a {
    padding: 0 10px;
}
.bs_datatable_wrapper th.dropdown_open {
    background: #eee;
}
.bs_datatable_wrapper .sort_dropdown:hover > a {
    color: #428bca;
}
.bs_datatable_wrapper .sort_dropdown .dropdown-toggle {
    padding: 0 5px;
}
.bs_datatable_wrapper .sort_dropdown.open .dropdown-toggle {
    background-color: #efefef;
}

.bs_datatable_wrapper .warning_text img {
    cursor: pointer;
    min-height: 100px;
    /*width: 100%;*/
}

.bs_datatable_wrapper div.toggle_settings.disabled {
    cursor: not-allowed!important;
    opacity: 0.7;
}

.bs_datatable_wrapper div.toggle_settings.disabled * {
    pointer-events: none!important;
}

.bs_datatable_wrapper table.bs-dt thead .sort_icon:hover {
    background-color: #efefef;
}
.bs_datatable_wrapper table.dataTable thead th:after {
    content: ""!important;
    display: none!important;
}

.bs_datatable_wrapper div.dt-search-filters {
    padding: 0;
    margin-bottom: 8px;
}

.bs_datatable_wrapper div.dt-search-filters span.filter-tag > span.label {
    background-color: #e8f0fe!important;
    color: #4f5359!important;
}
.bs_datatable_wrapper div.dt-search-filters span.filter-tag .filter-value {
    color: #4169a7!important;
}
.bs_datatable_wrapper div.dt-search-filters .remove-filter-tag {
    color: initial!important;
}
.bs_datatable_wrapper div.dt-search-filters div.filters-container span.filter-value-tag {
    background-color: #ffffff;
    border: 1px solid;
}

    /* baseline */
.bs_datatable_wrapper table.bs-dt tbody tr.baseline {
    background-color: lightblue!important;
}
.bs_datatable_wrapper table.bs-dt tbody tr.hovered {
    background-color: #f4f5f7;
}
.bs_datatable_wrapper table.bs-dt tbody tr.row-highlight * {
    background-color: #007bff!important;
    color: #FFF!important;
}
.bs_datatable_wrapper table.bs-dt tbody tr input.checkbox_selection {
    /*vertical-align: middle;*/
    position: relative;
    margin: 0;
    /*top: 5px;*/
}

/* context menu */
.data-table.sg-context-menu, .data-table.sg-contextMenu {
    background: #fff;
    border: 1px solid #cdcdcd;
    padding: 10px 10px;
    display: inline-block;
    min-width: 300px;
    border-radius: 10px;
    z-index: 2000;
    position: absolute;
    font-size: 1.2em;
    box-shadow: var(--plugin-box-shadow);
}
.data-table.sg-context-menu .selection_count {
    font-weight: bold;

}
.data-table.sg-context-menu li, div.bs_datatable_wrapper .selectionOptions li {
    /*padding: 0px 0;*/
    width: 100%;
    /*-webkit-font-smoothing: antialiased;*/
    /*line-height: 1.6em;*/
    position: relative;
}
.data-table.sg-context-menu li.divider, div.bs_datatable_wrapper .selectionOptions li.divider {
    /*height: 2px;*/
    /*margin: 4px 0;*/
    /*overflow: hidden;*/
    /*background-color: #888;*/
    /*padding: 0;*/
}
.data-table.sg-context-menu li a.context-menu-item, div.bs_datatable_wrapper .selectionOptions a.context-menu-item {
    display: block;
    position: relative;
    /*padding-left: 10px;*/
}
.data-table.sg-context-menu .nav-stacked-thin li a, .data-table.sg-context-menu .selectionOptions li a {
    /*padding: 4px 6px;*/
}
.data-table.sg-context-menu li:hover > .submenu, div.bs_datatable_wrapper .selectionOptions li:hover > .submenu {
    min-width: 180px;
    display: block!important;
}
.data-table.sg-context-menu li .submenu li a.context-menu-item:hover,
div.bs_datatable_wrapper .selectionOptions li:hover > .submenu li a.context-menu-item:hover {
    text-decoration: none;
    background-color: #eee;
}


.bs_datatable_wrapper .selectionOptions .submenu > li > a,
.data-table.sg-context-menu .submenu > li > a,
.data-table.sg-context-menu > li > a {
    display: block;
    /*padding: 3px 20px;*/
    clear: both;
    /*font-weight: 400;*/
    /*line-height: 1.42857143;*/
    color: #333;
    white-space: nowrap;
}

/* table */
.bs_datatable_wrapper:not(.flipTable) table.dataTable {
    width: fit-content!important;
    margin: 0!important;
    border-bottom: none;
}
.bs_datatable_wrapper div.dataTables_scrollHeadInner {
    width: auto!important;
}
.bs_datatable_wrapper table .dt-center {
    text-align: center!important;
}
.bs_datatable_wrapper table .dataTypeIcon {
    cursor: pointer;
}
.bs_datatable_wrapper table span.difference_text {
    margin-left: 3px;
}
.bs_datatable_wrapper table span.difference_text.hasArrow:before {
    content: '(';
    color: #333;
}
.bs_datatable_wrapper table span.difference_text.hasArrow:after {
    content: ')';
    color: #333;
}


.bs_datatable_wrapper table .group_collapse {
    cursor: pointer;
    color: darkgrey;
}
.bs_datatable_wrapper table .group_collapse:hover {
    color: #4f5359;
}
.bs_datatable_wrapper table th.cancel_sorting:after {
    content: '';
}

.bs_datatable_wrapper table thead th.ui-selected, .bs_datatable_wrapper table thead th.ui-selecting {
    background-color: var(--dt-selection-color-light)!important;
    /*color: #fff!important;*/
}
.bs_datatable_wrapper div.dataTables_filter {
    display: none!important;
}
/* heatmap */
.bs_datatable_wrapper .heatMap-container {
    display: none;
}
/* settings container */
.bs_datatable_wrapper div.settings ul.columns_toggle,.bs_datatable_wrapper div.settings .selectedRows > ul, .bs_datatable_wrapper div.settings .dt-groups > ul {
    max-height: 250px;
    min-height: 35px;
    overflow: auto;
    box-shadow: none;
}
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li, .bs_datatable_wrapper div.settings .selectedRows li, .bs_datatable_wrapper div.settings .dt-groups li {
    padding: 5px 10px;
    border: none;
}
.bs_datatable_wrapper .dropdown .close_dropdown {
    /*position: absolute;*/
    /*right: 3px;*/
    /*top: 3px;*/
    /*color: #AAA;*/
    /*font-size: 1.2em;*/
    /*cursor: pointer;*/
    /*z-index: 2;*/
}
.bs_datatable_wrapper .toggle_settings .dropdown-menu .row {
    margin: 0; border-bottom: 1px solid #DDD; padding: 10px;
    display: flex;
    align-items: center;;
}
.bs_datatable_wrapper .toggle_settings .dropdown-menu .row.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.bs_datatable_wrapper .dropdown .close_dropdown:hover {
    color: red;
}
.bs_datatable_wrapper div.settings .dt-groups li:not(.list-group-header):hover {
    background-color: #f5f5f5;
}
.bs_datatable_wrapper div.settings .dt-groups li.ui-selected {
    background: #e8f0fe!important;
    color: #000;
}
.bs_datatable_wrapper div.settings .columns_toggle ul.list-group-nested {
    box-shadow: none;
    margin-bottom: 0;
}
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.disabled input,
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.disabled .sortable-handle{
    pointer-events: none!important;
}
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li .sortable-handle {
    cursor: move;
}
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li.ui-sortable-placeholder {
    display: block!important;
    height: 35px;
    background-color: #DDD;
}
.bs_datatable_wrapper div.settings .dropdown-menu .columns_toggle li:first-child, .bs_datatable_wrapper div.settings .selectedRows > ul li:first-child {
    border-top: none;
}
.bs_datatable_wrapper div.settings .dropdown-menu.selectionOptions li:not(.divider) {
    padding: 5px 0 0;
}
.bs_datatable_wrapper div.settings .selectionOptions li.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.bs_datatable_wrapper div.settings .selectionOptions li.dropdown-submenu:hover ul.dropdown-menu {
    display: block!important;
}
.bs_datatable_wrapper div.settings .selectedRows, .bs_datatable_wrapper div.settings .dt-groups {
    width: 400px;
    word-break: break-all;
}
.bs_datatable_wrapper div.settings .selectedRows li {
    position: relative;
}
.bs_datatable_wrapper div.settings .selectedRows li:hover {
    background-color: #f5f5f5;
}
.bs_datatable_wrapper div.settings .selectedRows li input[name="baseline"] {
    height: auto!important;
}
.bs_datatable_wrapper div.settings .selectedRows li .item-val {
    position: relative;
    top: 2px;
}
.bs_datatable_wrapper div.settings .selectedRows li .drag_handle {
    position: absolute;
    top: 5px;
    left: 2px;
    opacity: 0;
    cursor: pointer;
}
.bs_datatable_wrapper div.settings .selectedRows li:hover .drag_handle {
    opacity: 1;
}
.bs_datatable_wrapper div.settings .selectedRows li.ui-sortable-placeholder {
    display: block!important;
    height: 35px;
    background-color: #DDD;
    visibility: visible!important;
}

.bs_datatable_wrapper div.settings .dropdown-menu .vizIcon {
    width: 30px;
    height: 25px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    top: 5px;
}
.bs_datatable_wrapper div.settings .nav-tabs li > a {
    font-weight: bold;
}

.bs_datatable_wrapper .th-span {
    overflow: hidden;
    text-overflow: ellipsis;
    /*display: inline-block;*/
}
.bs_datatable_wrapper.capitalized .th-span {
    /*font-variant: small-caps;*/
    pointer-events: none;
}

.bs_datatable_wrapper div.setting_buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.bs_datatable_wrapper div.setting_buttons .btn-group.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.bs_datatable_wrapper div.setting_buttons .btn-group.disabled * {
    pointer-events: none;
}
.bs_datatable_wrapper div.setting_buttons div.viz-types .btn-group > button {
    padding: 1px 7px;
    border-radius: 4px!important;
}
.bs_datatable_wrapper div.setting_buttons .btn-group > button.selected {
    color: #FFF!important;
    margin-right: 12px;
    /*font-weight: normal;*/
    /*!*background-color: #007bff!important;*!*/
    /*!* padding: 0.5rem; *!*/
    /*box-shadow: none;*/
    /*text-shadow: none;*/
    /*border: none;*/
}
.bs_datatable_wrapper div.setting_buttons .btn-group > button {
    /*padding: 0.25rem;*/
    /*margin-right: 12px;*/
}
.bs_datatable_wrapper div.dt-settings > div > .btn-group > button {
    /*box-shadow: none;*/
    display: block;
    /*padding: 0.5rem;*/
    /*text-shadow: none;*/
    /*background-image: none;*/
    /*border-color: transparent;*/
    /*color: gray;*/
    /*background-color: #FFF;*/
    height: 30px;
}
@media screen and (max-width: 1400px) {
    .bs_datatable_wrapper div.setting_buttons .setting-button-text {
        display: none;
    }
}
.bs_datatable_wrapper div.setting_buttons .btn-group > button .setting-button-text {
    /*display: none;*/
}
.bs_datatable_wrapper.tiny .setting-button-text {
    display: none;
}
.bs_datatable_wrapper div.setting_buttons .btn-group > button:not(.selected):hover, .bs_datatable_wrapper div.setting_buttons div.dropdown.open .dropdown-toggle.btn-default {
    /*color: #000!important;*/
    /*background: #eee!important;*/
}
/*.bs_datatable_wrapper div.setting_buttons div.dropdown .dropdown-menu {*/
    /*margin-top: 0;*/
/*}*/
/*.bs_datatable_wrapper div.setting_buttons div.dropdown:hover .dropdown-menu {*/
    /*display: block!important;*/
/*}*/
.bs_datatable_wrapper div.setting_buttons div.dropdown .dropdown-toggle.btn-default:active, .bs_datatable_wrapper div.setting_buttons div.dropdown .dropdown-toggle.btn-default:focus {
    color: #000!important;
    background: #eee!important;
}

/*.bs_datatable_wrapper div.settings .heatmap_view_options {*/
    /*display: inline-block;*/
    /*position: absolute;*/
    /*left: 49%;*/
/*}*/
.bs_datatable_wrapper div.settings .viz-types {
    /*transform: translateX(50%);*/
    /*margin-left: -25%;*/
    display: inline-block;
    /*position: absolute;*/
    /*left: 40%;*/
}
.bs_datatable_wrapper div.settings button.viz_toggle:focus, .bs_datatable_wrapper div.settings button.viz_toggle:active {
    outline: none!important;
}
.bs_datatable_wrapper div.settings button.viz_toggle.active {
    background-color: #428bca;
    color: #FFF;
    text-shadow: none;
}
.bs_datatable_wrapper div.settings .heatmap_view_options button.viz_toggle:focus {
    outline: none;
}
.bs_datatable_wrapper div.viz-options .dropdown-menu {
    width: 250px;
}
.bs_datatable_wrapper div.viz-options .distribution_columns {
    max-height: 250px;
    overflow: auto;
}
.bs_datatable_wrapper div.viz-options .distribution_columns li {
    border: none;
}
.bs_datatable_wrapper div.settings .heatmap_view_options .dropdown-menu {
    max-height: 300px;
    overflow: auto;
}
/* popover */
div.popover.bs-datatable-header-viz {
    width: auto!important;
    height: auto!important;
    max-width: 1000px;
    max-height: 1000px;
    z-index: 200000;
}
div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-handle-on,
div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-handle-off,
div.popover.bs-datatable-header-viz .bootstrap-switch .bootstrap-switch-label {
    height: auto!important;
}
div.popover.bs-datatable-header-viz .popover-header {
    border-bottom: 1px solid #ebebeb;
    background-color: #f7f7f7;
}
div.popover.bs-datatable-header-viz .popover-title {
    display: inline-block;
    background-color: transparent;
    border-bottom: none;
}
div.popover.bs-datatable-header-viz .popover-header > button {
    position: relative;
    top: 3px;
}
div.popover.bs-datatable-header-viz .popover-content {
    width:500px;
    height:400px;
}
div.popover.bs-datatable-header-viz .popover_content .lastsearchkeywords {
    display: none;
}
div.popover.bs-datatable-header-viz svg.bar-chart .tick text {
    font-weight: 500;
}
div.popover.bs-datatable-header-viz .textviewer-options {
    display: none;
}
.dt-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 4px solid #000;
}
.ui-selectable-helper {
    border: 2px solid black;
}
.bs_datatable_wrapper span.td-span {
    pointer-events: none;
}
.bs_datatable_wrapper.isEditable span.td-span {
    pointer-events: all;
    border: 1px solid transparent;
    padding: 0px;
    position: relative;
    /*white-space: nowrap;*/
}
.bs_datatable_wrapper span.td-span.justEdited {
    background-color: #5CB85C!important;
    color: #FFF!important;
}
.bs_datatable_wrapper td.edited .td-span:before {
    content: '\f111';
    font-family: 'FontAwesome';
    position: absolute;
    left: -10px;
    font-size: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: steelblue;
}

.bs_datatable_wrapper.isEditable .td-span-input {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    /*display: inline-block;*/
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
}
.bs_datatable_wrapper.isEditable .td-span-input .td-input-options {
    position: absolute;
    right: 3px;
    z-index: 200;
}
.bs_datatable_wrapper.isEditable .td-span-input input {
    width: 100%;
    box-sizing: border-box;
}
.bs_datatable_wrapper.isEditable .edit-cell {
    opacity: 0;
    cursor: pointer;
}
.bs_datatable_wrapper.isEditable .edit-cell:hover {
    color: steelblue;
}
.bs_datatable_wrapper.isEditable td:hover .td-span:not(.non-editable) {
    opacity: 1!important;
    width: 100%;
    border: 1px solid #DDD;
}
/*.bs_datatable_wrapper.isEditable .cancel-editing {*/
/*    position: absolute;*/
/*    right: 3px;*/
/*    top: 7px;*/
/*    z-index: 8;*/
/*    color: lightgray;*/
/*    display: none;*/
/*}*/
.bs_datatable_wrapper.isEditable .cancel-editing:hover {
    color: darkgray!important;
}

.bs_datatable_wrapper.no_data .dataTypeIconAll, .bs_datatable_wrapper.no_data .sort_dropdown {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed!important;
}


/* override responsive css */
.bs_datatable_wrapper table.bs-dt td.checkbox_selection:before {
    content: ''!important;
}
.bs_datatable_wrapper th:hover span.dataTypeIconAll,
.bs_datatable_wrapper th:hover span.dataTypeIconAllEnlarged,
.bs_datatable_wrapper th:hover .sort-icon,
.bs_datatable_wrapper th:hover .filter_dropdown,
.bs_datatable_wrapper th.hovered span.dataTypeIconAll,
.bs_datatable_wrapper th.hovered span.dataTypeIconAllEnlarged,
.bs_datatable_wrapper th.hovered .sort_icon,
.bs_datatable_wrapper th.hovered .sort-icon,
.bs_datatable_wrapper th.hovered .filter_dropdown,
.bs_datatable_wrapper th .th-options.dropdown_open .filter_dropdown {
    /*display: inline-block;*/
    opacity: 1!important;
}
.bs_datatable_wrapper th .th-resize {
    position: absolute;
    right: 8px;
    width: 8px;
    z-index: 2;
    height: 100%;
}
.bs_datatable_wrapper span.dataTypeIconAll, .bs_datatable_wrapper span.dataTypeIconAllEnlarged,
.bs_datatable_wrapper .th-options .sort-icon,
.bs_datatable_wrapper .th-options .filter_dropdown {
    /*display: none;*/
    opacity: 0;
    cursor: pointer!important;
    padding: 0 2px;
}
.bs_datatable_wrapper span.dataTypeIconAll.clicked {
    color: red;
    opacity: 1!important;
}
/*.bs_datatable_wrapper span.dataTypeIconAll, .bs_datatable_wrapper span.newton_manager, .bs_datatable_wrapper span.dataTypeIconAllEnlarged {*/
/*    position: relative;*/
/*    top: 2px;*/
/*}*/
.bs_datatable_wrapper span.dataTypeIconAll:hover, .bs_datatable_wrapper span.newton_manager:hover, .bs_datatable_wrapper span.dataTypeIconAllEnlarged:hover,
.bs_datatable_wrapper .th-options .sort-icon:hover,
.bs_datatable_wrapper .th-options .filter-icon:hover,
.bs_datatable_wrapper th .th-options.dropdown_open .filter_dropdown {
    color: red;
}
.bs_datatable_wrapper .header-ctx-menu li {
    cursor: pointer;
    padding: 5px;
}
.bs_datatable_wrapper .header-ctx-menu li:hover {
    background-color: #ddd;
}
.bs_datatable_wrapper .header-ctx-menu li > a {
    text-decoration: none;
}

.bs_datatable_wrapper span.row-dragger {
    position: absolute;
    left: 0;
    top: 13px;
    opacity: 0;
    cursor: move;
}
.bs_datatable_wrapper td:hover .row-dragger {
    opacity: 1;
}
tr.dt-dragging-row {
    z-index: 1061;
}
tr.dt-dragging-row td {
    padding: 5px;
}

div.dt-drag-row-html {
    background: #FFF;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    border: 1px solid #CCC;
    border-radius: 7px;
    font-weight: bold;
    z-index: 1000;
    max-width: 300px;
    overflow: hidden;
    max-height: 300px;
    /*overflow: auto;*/
    pointer-events: none;
    height: auto!important;
}
div.dt-drag-row-html .selected_count {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1.2em;
}

div.data-viewer-modal div.vizcontainer .edit_color_palette {
    display: none;
}

div.data-viewer-modal .btn-success, div.data-viewer-modal .btn-info, div.data-viewer-modal .btn-primary, div.data-viewer-modal .btn-warning, div.data-viewer-modal .btn-danger {
    margin-right: 4px;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    font-weight: 500;
    border-color: transparent;
}

/* Fancy SPINNER */
.bs_datatable_wrapper .dt-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    z-index: 2;
}
.bs_datatable_wrapper .dt-loading.shown {
    display: block;
}
.bs_datatable_wrapper .loading-bar {
    display: inline-block;
    width: 4px;
    height: 30px;
    border-radius: 4px;
    animation: loading 1s ease-in-out infinite;
}
.bs_datatable_wrapper .loading-bar:nth-child(1) {
    background-color: #3498db;
    animation-delay: 0s;
}
.bs_datatable_wrapper .loading-bar:nth-child(2) {
    background-color: #c0392b;
    animation-delay: 0.09s;
}
.bs_datatable_wrapper .loading-bar:nth-child(3) {
    background-color: #f1c40f;
    animation-delay: .18s;
}
.bs_datatable_wrapper .loading-bar:nth-child(4) {
    background-color: #27ae60;
    animation-delay: .27s;
}

div.dt-newton-manager .columns_list a {
    text-decoration: none;
}
@keyframes loading {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1, 2.2);
    }
    40% {
        transform: scale(1);
    }
}


/*  placeholder */
.bs_datatable_wrapper table.bs-dt.placeholder {
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    width: 100%;
}
.bs_datatable_wrapper table.bs-dt.placeholder tbody tr {
    height: 80px;
}
.bs_datatable_wrapper table.bs-dt div.ph-item {
    padding: 8px;
    margin-bottom: 0;
    border: none;
    background: none;
}
.bs_datatable_wrapper table.bs-dt div.ph-item.no-anim::before {
    content: unset!important;
}


/* =========================================================================
 * FLIP TABLE -- modernized 2026-05-20 (DVFIV-2058)
 * In flipped mode each original column becomes a STACKED column-card with
 * a "label cell" (former <th>) on top and a "value cell" (former <td>) on
 * bottom. Two tables placed side by side keep identical row baselines.
 * ========================================================================= */

/* No outer card chrome -- the polish is in the row rhythm + zebra + typography. */
.bs_datatable_wrapper.flipTable {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.bs_datatable_wrapper.flipTable .table-container {
    flex: 1 1 auto !important;
    align-self: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: auto;
}
.bs_datatable_wrapper.flipTable .dt-tables {
    background: transparent;
    overflow: auto;
}
.bs_datatable_wrapper.flipTable .pl-ribbon-item[data-operation="collapsible_columns"],
.bs_datatable_wrapper.flipTable .pl-ribbon-item[data-operation="scroll"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* Hide row-info footer, scroll grip, and row-reorder handle in flip mode -- dev artifacts */
.bs_datatable_wrapper.flipTable .dt-page-info,
.bs_datatable_wrapper.flipTable .dataTables_info,
.bs_datatable_wrapper.flipTable .dt-pages,
.bs_datatable_wrapper.flipTable .row-reorder,
.bs_datatable_wrapper.flipTable .pl-ribbon-item[data-operation="scroll"] {
    display: none !important;
}
/* Inner table containers must stretch to wrapper width so cards aren't compressed */
.bs_datatable_wrapper.flipTable .table-container,
.bs_datatable_wrapper.flipTable .dt-tables {
    width: 100% !important;
    min-width: 0;
}
.bs_datatable_wrapper.flipTable table.bs-dt:not(.placeholder) {
    display: flex !important;
    margin: 0;
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    table-layout: fixed;
}
/* Hide the loading placeholder once the real table has rendered in flip mode */
.bs_datatable_wrapper.flipTable table.bs-dt.placeholder {
    display: none !important;
}
.bs_datatable_wrapper.flipTable table.bs-dt thead,
.bs_datatable_wrapper.flipTable table.bs-dt tbody {
    display: flex;
    flex-wrap: nowrap;
}
/* thead holds the LABEL column (auto-fit to content), tbody fills the rest with VALUES */
.bs_datatable_wrapper.flipTable table.bs-dt thead {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 40%;
}
.bs_datatable_wrapper.flipTable table.bs-dt tbody {
    flex: 1 1 auto;
}
/* Each <tr> is now a vertical "column card" (label on top, value below) */
.bs_datatable_wrapper.flipTable tr {
    display: flex;
    flex-direction: column;
    float: none;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
}
/* UNIFIED row height -- label and value cells in the SAME logical row must align.
   --flip-row-h is set on the table (which carries data-rowspacing per DataTable.js:9671). */
.bs_datatable_wrapper.flipTable table.bs-dt { --flip-row-h: 48px; }
.bs_datatable_wrapper.flipTable table.bs-dt[data-rowspacing="max"]     { --flip-row-h: 56px; }
.bs_datatable_wrapper.flipTable table.bs-dt[data-rowspacing="medium"]  { --flip-row-h: 44px; }
.bs_datatable_wrapper.flipTable table.bs-dt[data-rowspacing="compact"] { --flip-row-h: 36px; }

.bs_datatable_wrapper.flipTable tr th,
.bs_datatable_wrapper.flipTable tr td {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    height: var(--flip-row-h) !important;
    min-height: var(--flip-row-h) !important;
    max-height: var(--flip-row-h) !important;
    padding: 0 16px !important;
    border: 0;
    border-bottom: 1px solid var(--d3v-border-subtle, #eef0f3) !important;
    text-align: left;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 !important;
}
/** Updated by shashank2104 on 2026-05-29 - R0-3672 - !important on backgrounds.
 *  Cert PDF export wraps the flipTable inside `.cert-block[data-type="table"]`,
 *  and simlytiks-report.css ships a 4-class cert-block th rule that paints
 *  var(--d3v-bg-secondary) on every <th>. That out-specifies the 3-class
 *  flipTable rule and the label column reads as a tinted strip in PDFs.
 *  Force transparent so flipTable always wins regardless of container chrome. **/
/* Label cell (former <th>) -- smaller, lighter, uppercase tracking */
.bs_datatable_wrapper.flipTable tr th {
    background: transparent !important;
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Value cell -- primary text, semibold, tabular numbers */
.bs_datatable_wrapper.flipTable tr td {
    background: transparent !important;
    color: var(--d3v-text-primary, #0f172a);
    font-size: 14px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
.bs_datatable_wrapper tr th:last-child,
.bs_datatable_wrapper.flipTable tr td:last-child {
    border-bottom: none !important;
}
/* Hide scaffold cells that have no data-column (trailing empty placeholders) */
.bs_datatable_wrapper.flipTable tr th:not([data-column]),
.bs_datatable_wrapper.flipTable tr td:not([data-col]) {
    display: none !important;
}
/* Hide cells the user explicitly marked hidden (except `name` -- we keep that
   as a row-identifier header in flipped mode so 1-row tables still tell you
   which dataset / file the values belong to) */
.bs_datatable_wrapper.flipTable tr th.hidden:not([data-column="name"]),
.bs_datatable_wrapper.flipTable tr td.hidden:not([data-col="name"]) {
    display: none !important;
}
/* Header row -- the row-identifier (typically `name`) gets a heavier divider and
   slightly stronger label styling so it reads as a header, not a data row */
.bs_datatable_wrapper.flipTable tr th[data-column="name"],
.bs_datatable_wrapper.flipTable tr td[data-col="name"] {
    border-bottom: 2px solid var(--d3v-border-default, #d1d5db) !important;
    height: calc(var(--flip-row-h) + 8px) !important;
    min-height: calc(var(--flip-row-h) + 8px) !important;
    max-height: calc(var(--flip-row-h) + 8px) !important;
}
.bs_datatable_wrapper.flipTable tr th[data-column="name"] {
    background: transparent;
    color: var(--d3v-text-primary, #0f172a);
    font-size: 11px !important;
    font-weight: 700 !important;
}
.bs_datatable_wrapper.flipTable tr td[data-col="name"] {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 700 !important;
    font-size: 15px !important;
}
/** Updated by shashank2104 on 2026-05-21 - premium-deck feedback - zebra striping removed.
 *  The screenshot we got back showed the alternating tint reading as "background color" --
 *  customer wanted it gone. Row separation now relies purely on the cell border-bottom rule
 *  at the top of this section. Hover still gets a soft pulse for interactive use. **/
/* Subtle row hover: when user hovers any cell on a row, both label+value pulse together via attribute match (CSS-only, no JS handler needed) */
.bs_datatable_wrapper.flipTable tr th[data-column]:hover,
.bs_datatable_wrapper.flipTable tr td[data-col]:hover {
    background: var(--d3v-bg-hover, #eef2f7) !important;
}
/* Right-align numeric value cells (everything except `name`) for clean column
   edges when two flipped tables sit side-by-side */
.bs_datatable_wrapper.flipTable tr td[data-col]:not([data-col="name"]) {
    justify-content: flex-end;
    text-align: right;
    padding-right: 18px !important;
}
/* Subtle hover lift on a column card -- single hover tint now that the cells default to transparent */
.bs_datatable_wrapper.flipTable tr:hover th,
.bs_datatable_wrapper.flipTable tr:hover td {
    background: var(--d3v-bg-hover, #eef2f7);
}
/* Selection rows that are pinned to the left -- keep them clean in flip mode */
.bs_datatable_wrapper.flipTable table.dataTable tbody td.checkbox_selection,
.bs_datatable_wrapper.flipTable table.dataTable thead th.checkbox_selection,
.bs_datatable_wrapper.flipTable table.dataTable tbody td.row_number,
.bs_datatable_wrapper.flipTable table.dataTable thead th.row_number,
.bs_datatable_wrapper.flipTable table.dataTable tbody td.collapsible_icon,
.bs_datatable_wrapper.flipTable table.dataTable thead th.collapsible_icon {
    display: none !important;
}
.bs_datatable_wrapper th.checkbox_selection {
    vertical-align: middle;
}
/* Modern design overlay (when opt.design === 'modern' -- already wired to data-design) */
.bs_datatable_wrapper.flipTable[data-design="modern"] {
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04));
    border-color: transparent;
}
.bs_datatable_wrapper.flipTable[data-design="modern"] tr th {
    background: var(--d3v-bg-subtle, #f6f7f9);
    color: var(--d3v-text-primary, #0f172a);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.bs_datatable_wrapper.flipTable[data-design="modern"] tr:hover {
    background: var(--d3v-bg-hover, #eef2f7);
}
.bs_datatable_wrapper.flipTable[data-design="modern"] tr:hover th {
    border-bottom-color: var(--d3v-accent-primary, #2563eb);
    color: var(--d3v-accent-primary, #2563eb);
}

.bs_datatable_wrapper input.toggle-search {
    height: 10px!important;
}
.bs_datatable_wrapper tr.dt-search input {
    height: 24px!important;
    width: 100%;
}
.bs_datatable_wrapper tr.dt-search input::placeholder {
    font-family: FontAwesome;
}

/* columns list */
.bs_datatable_wrapper div.settings .toggle_columns .columns_list {
    max-height: 225px;
    overflow: auto;
}
.bs_datatable_wrapper div.settings .toggle_columns .tab-pane-footer {
    padding: 5px;
    border-top: 1px solid #DDD;
}
.bs_datatable_wrapper div.settings .dropdown-menu .toggle_columns li.ui-sortable-placeholder {
    display: block!important;
    height: 35px;
    background-color: #DDD;
}
.bs_datatable_wrapper div.settings .dropdown-menu .toggle_columns .sortable-handle {
    cursor: move;
}
.bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root {
    padding: 0;
    /*overflow: hidden;*/
    margin-bottom: 4px;
    box-shadow: none;
}

.bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
    padding: 7px 15px;
    cursor: move;
}

.bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.bs_datatable_wrapper div.settings .toggle_columns .list-group.list-group-root > .column_group > .list-group > .list-group-item {
    padding-left: 30px;
    border: none;
    padding-top: 0;
}
.bs_datatable_wrapper div.settings .toggle_columns .list-group-item .glyphicon {
    margin-right: 5px;
}
.bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols {
    background: none;
    border: none;
    box-shadow: none;
    color: gray;
}
.bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols:hover {
    color: #000!important;
}
.bs_datatable_wrapper div.settings .toggle_columns .column_group .toggle_group_cols:focus, .bs_datatable_wrapper div.settings #toggle_columns .column_group .toggle_group_cols:active {
    outline: none!important;
}

.bs_datatable_wrapper .column_options li[data-id] {
    position: relative;
}
.bs_datatable_wrapper .column_options li[data-id].checked:after {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    right: 5px;
    top: 3px;
    color: #428bca;
}

div.d3view-dt-tooltip .tooltip-inner {
    background-color: #4f5359;
    text-align: left;
}


.bs_datatable_wrapper div.gallery-container {
    overflow: auto;
}
.bs_datatable_wrapper div.row-images {
    padding-bottom: 15px;
}
.bs_datatable_wrapper div.row-images .images-flex {
    display: flex;
    flex-wrap: wrap;
}
.bs_datatable_wrapper div.row-images .row-caption {
    font-size: 1.2em;
    font-weight: 500;
}
.bs_datatable_wrapper div.row-images .image-card {
    width: 18rem;
    margin: 10px 20px 0 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.bs_datatable_wrapper div.row-images .image-card .image-enlarge {
    position: absolute;
    right: 3px;
    top: 4px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.bs_datatable_wrapper div.row-images .image-card:hover img {
    opacity: 0.7;
}
.bs_datatable_wrapper div.row-images .image-card:hover .image-enlarge {
    opacity: 1!important;
}
.bs_datatable_wrapper div.row-images .image-card .image-enlarge:hover {
    color: rgb(0, 123, 255);
    opacity: 1!important;
}
.bs_datatable_wrapper div.row-images .image-card img {
    width: 100%;
    height: 180px;
}
.bs_datatable_wrapper div.row-images .image-card .image-caption {
    padding: 5px;
    font-weight: 500;
}


.bs_datatable_wrapper div.summary-dropdown-menu {
    display: none;
    background: #FFF;
    /*border: 1px solid #eee;*/
    position: relative;
    top: 25px;
    margin: 0;
    margin-bottom: 10px;
    border-radius: 4px;
}
.bs_datatable_wrapper.searchEnabled div.summary-dropdown-menu {
    top: 65px;
}
.bs_datatable_wrapper table.summaryRow {
    table-layout: fixed;
}
.bs_datatable_wrapper td .quickView {
    color: gray;
    opacity: 0;
    cursor: pointer;
    bottom: -0.15em;
}
.bs_datatable_wrapper td .quickView:hover {
    color: #444!important;
}
.bs_datatable_wrapper td:hover .quickView {
    opacity: 1!important;
}
.bs_datatable_wrapper .quick-view-container .close_container {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
.bs_datatable_wrapper div.quick-view-container .content-wrapper {
    height: 100%;
}

.bs_datatable_wrapper .config-header .nav-pills-sm > li > a {
    padding:4px 8px;
}
.bs_datatable_wrapper.sidebaropen div.setting_buttons,
.bs_datatable_wrapper.sidebaropen div.dataTables_wrapper {
    transition: opacity ease-in-out 300ms;
}

.bs_datatable_wrapper.sidebaropen div.setting_buttons .summaryDropdown,
.bs_datatable_wrapper.sidebaropen div.dataTables_wrapper {
    opacity: 0.6!important;
}

/* summary dropdown */
.bs_datatable_wrapper .summaryDropdown .dropdown-toggle.selected {
    /*color: #FFF!important;*/
    /*background: #0b7bff!important;*/
}
.bs_datatable_wrapper .summaryDropdown .dropdown-toggle.selected > span {
    color: #FFF!important;
}
.bs_datatable_wrapper .summaryDropdown .dropdown-toggle.btn-primary span {
    color: #FFF!important;
}
.bs_datatable_wrapper .summaryDropdown .dropdown-menu {
    width: 100%;
    height: 450px;
    padding: 15px;
}
.bs_datatable_wrapper .summaryDropdown .dropdown-menu .viz-container {
    height: 390px;
}
/*.bs_datatable_wrapper .summary-dropdown-menu:after,*/
/*.bs_datatable_wrapper .summary-dropdown-menu:before {*/
    /*content: '';*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*border-style: solid;*/
/*}*/
/*.bs_datatable_wrapper .summary-dropdown-menu:after {*/
    /*border-width: 0 8px 8px 8px;*/
    /*border-color: transparent transparent #FFF transparent;*/
    /*left: 5px;*/
    /*top: -8px;*/
/*}*/
/*.bs_datatable_wrapper .summary-dropdown-menu:before {*/
    /*border-width: 0 9px 9px 9px;*/
    /*border-color: transparent transparent #DDD transparent;*/
    /*left: 4px;*/
    /*top: -9px;*/
/*}*/


/* columns configuration */
.bs_datatable_wrapper div.columns_configuration .columns_list {
    box-shadow: none;
    margin-left: 10px;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item {
    border-color: #eee;
    border-left: none;
    border-right: none;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item.ui-selected {
    background-color: var(--dt-selection-color-light);
    cursor: context-menu;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item .sortable-handle {
    opacity: 0;
    cursor: move;
    z-index: 2;
    position: relative;
    top: 6px;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item:hover .sortable-handle {
    opacity: 1!important;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item label {
    display: flex;
    align-items: center;
}
.bs_datatable_wrapper div.columns_configuration .columns_list .column_group_item input {
    margin-left: 4px;
    /*margin-right: 6px;*/
    /*vertical-align: bottom;*/
}
.d3view-plugins-sidebar.viz-config-container .config-body .row {
    padding: 15px;
    margin: 0;
}



/* Fixed columns */
.bs_datatable_wrapper div.DTFC_ScrollWrapper {
    height: auto!important;
}
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper {
    z-index: 2;
}
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper.scrollings, .bs_datatable_wrapper div.DTFC_LeftBodyWrapper.scrolling {
    box-shadow: 4px -1px 9px -8px #444;
    background: #FFF;
}

.bs_datatable_wrapper div.DTFC_LeftWrapper .DTFC_LeftBodyLiner {
    /*left: -15px!important;*/
    padding-right: 0!important;
    overflow-x: hidden;
    width: auto!important;
    height: auto!important;
    /*max-height: unset!important;*/
    overflow-y: hidden!important;
}
.bs_datatable_wrapper table.DTFC_Cloned thead,
.bs_datatable_wrapper table.DTFC_Cloned tfoot {
    background-color: white;
}

.bs_datatable_wrapper div.DTFC_Blocker {
    background-color: white;
}
.bs_datatable_wrapper div.DTFC_LeftWrapper,
.bs_datatable_wrapper div.DTFC_RightWrapper {
    width: auto!important;
}
.bs_datatable_wrapper .DTFC_LeftBodyWrapper,
.bs_datatable_wrapper .DTFC_RightBodyWrapper {
    height: auto!important;
}
.bs_datatable_wrapper div.DTFC_LeftWrapper table.dataTable,
.bs_datatable_wrapper div.DTFC_RightWrapper table.dataTable {
    margin-bottom: 0;
    z-index: 2;
    background: #FFF;
}
.bs_datatable_wrapper div.DTFC_LeftWrapper table.dataTable.no-footer,
.bs_datatable_wrapper div.DTFC_RightWrapper table.dataTable.no-footer {
    border-bottom: none;
}

.bs_datatable_wrapper table.dataTable.display tbody tr.DTFC_NoData {
    background-color: transparent;
}

.bs_datatable_wrapper .DTFC_LeftBodyWrapper table.DTFC_Cloned thead th {
    border-bottom: none!important;
}

div.datatable-ppt-export.processing {
    cursor: progress;
}
div.datatable-ppt-export.processing .moda-body {
    pointer-events: none;
}
div.datatable-ppt-export.processing .show-processing {
    display: inline-block!important;
}

div.datatable-ppt-export #col-actions-box button {
    width: auto;
}
div.datatable-ppt-export .columns.bootstrap-select div.dropdown-menu {
    max-height: initial!important;
}

div.bs_datatable_wrapper ul.dt-toolbar {
    position: absolute;
    right: 50px;
    opacity: 0;
    transform: translateY(-50%);
    background: #f4f5f7;
}
div.bs_datatable_wrapper.hasEditingCell ul.dt-toolbar {
    display: none;
}
div.bs_datatable_wrapper ul.dt-toolbar > li {
    display: inline;
    margin: 0 2px;
    padding: 0 5px;
}
div.bs_datatable_wrapper ul.dt-toolbar > li:hover > a {
    color: red!important;
}
div.bs_datatable_wrapper ul.dt-toolbar .toolbar-text {
    display: none;
}

div.bs_datatable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
    /*padding: 0!important;*/
    justify-content: center;
}
div.bs_datatable_wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    /*border: 1px solid #FFF!important;*/
    color: rgba(0,0,0,.95)!important;
}


div.dt-col-dropdown-menu {
    display: block;
    position: fixed;
    z-index: 5000;
    width: 300px;
}
div.dt-col-dropdown-menu .tab-pane > div {
    padding: 15px;
}
div.dt-col-dropdown-menu h3,
div.dt-col-dropdown-menu .btn-group,
div.dt-col-dropdown-menu .clearfix {
    padding: 0 15px;
}
div.dt-col-dropdown-menu ul[data-id] {
    max-height: 200px;
    overflow: auto;
    padding: 0 15px;
}
div.dt-col-dropdown-menu .col-multiselect {
    position: relative;
    margin-bottom: 20px;
}
div.dt-col-dropdown-menu .col-multiselect:after {
    content: "OR";
    width: 100%;
    text-align: center;
    position: absolute;
    color: dimgray;
    pointer-events: none;
    bottom: -20px;
    left: 0;
}

div.simlytiks.dt-viz-params .viz-description {
    padding: 10px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.viz-config-container .dt-viz-params div.viz-preview-tabs {
    height: calc(100% - 90px);
}
div.viz-config-container .dt-viz-params div.viz-preview-tabs > .tab-pane {
    height: 100%!important;
}


.bs_datatable_wrapper div.chart_type.open .dropdown-menu {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*width: 402px;*/
    max-height: 250px;
    overflow: auto;
    overflow-x: hidden;
    background: #FFF;
}

.bs_datatable_wrapper div.chart_type.open .dropdown-menu li.active a,
.bs_datatable_wrapper div.chart_type.open .dropdown-menu li:hover a {
    /*background: var(--dt-selection-color);*/
    /*color: #333!important;*/
}
.bs_datatable_wrapper div.chart_type.open .dropdown-menu li.disabled {
    opacity: 0.6;
}
/*.bs_datatable_wrapper div.chart_type.open .dropdown-menu li {*/
/*    width: 100px;*/
/*    text-align: center;*/
/*    margin: 2px 0;*/
/*}*/
.bs_datatable_wrapper .chart_type .dropdown-menu li img {
/*.bs_datatable_wrapper div.chart_type.open .dropdown-menu li .fa {*/
/*    height: 35px;*/
    /*width: 35px;*/
    /*margin-bottom: 4px;*/
    /*font-size: 3em;*/
    display: inline;
}
.bs_datatable_wrapper .chart_type .dropdown-menu li .viz-name {
    /*display: block;*/
    /*white-space: normal;*/
    /*!* word-break: break-all; *!*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

div.simlytiks .mainPanel .sl-charts-container .viz-name {
    display: block;
    /*font-size: 14px!important;*/
    /*font-weight: 500!important;*/
}

div.d3view-eb .eb-container .alert {
    display: none;
}
div.d3view-eb .modal-body {
    overflow: visible!important;
}

.bs_datatable_wrapper .dt-summary-rows {
    margin: 0;
    padding: 0 10px;
    position: relative;
    top: 40px;
}
.bs_datatable_wrapper .dt-summary-row-values {
    display: flex;
    flex-wrap: wrap;
}
.bs_datatable_wrapper .dt-summary-row-values .dt-sm-val {
    margin-right: 15px;
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    padding: 15px;
    /*box-shadow: var(--plugin-box-shadow);*/
}
.bs_datatable_wrapper .dt-summary-row-values .dt-sm-count {
    font-size: 2em;
}
.bs_datatable_wrapper .dt-summary-row-values .dt-sm-agg {
    font-weight: bold;
}

.bs_datatable_wrapper table.renderingArea .td-toggle {
    color: dimgrey;
    transition: transform 0.3s ease-in;
}
.bs_datatable_wrapper table.renderingArea .td-toggle:hover {
    color: #428bca;
}
.bs_datatable_wrapper table.renderingArea tr.shown .td-toggle {
    transform: rotate(90deg);
}
.bs_datatable_wrapper table.renderingArea tr.dt-detail-row .detail-row-cols {
    display: flex;
    flex-wrap: wrap;
}
.bs_datatable_wrapper table.renderingArea tr.dt-detail-row .detail-row-cols > div {
    margin: 10px;
    width: 15%;
}

/** row reorder **/
/*div.bs_datatable_wrapper .row-reorder {*/
/*    position: absolute;*/
/*    right: 50px;*/
/*    opacity: 0;*/
/*    transform: translateY(-50%);*/
/*    !*background: #f4f5f7;*!*/
/*}*/
div.bs_datatable_wrapper table.renderingArea tr.yellow-background-class {
    background: lightyellow!important;
}
div.bs_datatable_wrapper table.renderingArea tr.sortable-selected {
    background-color: #f9c7c8;
    border: solid red 1px !important;
    z-index: 1 !important;
}




/** Simple view within Simlytiks **/
div.simlytiks .bs_datatable_wrapper {
    background-color: unset!important;
}


/** Renderers **/
.bs_datatable_wrapper[data-renderer="d3"],
.bs_datatable_wrapper[data-renderer="simple"] {
    /*width: 100%!important;*/
}
.bs_datatable_wrapper[data-renderer="simple"] table.renderingArea,
.bs_datatable_wrapper[data-renderer="d3"] table.renderingArea {
    table-layout: fixed;
}
.bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea {
    display: flex!important;
    height: calc(100% - 12px);
}
.bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea tbody {
    display: flex;
}
.bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea > * {
    flex: 1 1 auto;
}
.bs_datatable_wrapper.flipTable[data-checkbox="true"] .dt-tables tbody tr[data-id] td:nth-child(2) {
    font-weight: bold;
}
.bs_datatable_wrapper.flipTable[data-checkbox="false"] .dt-tables tbody tr[data-id] td:nth-child(1) {
    font-weight: bold;
}
.bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea tr {
    width: calc(100% - 25px);
}
.bs_datatable_wrapper[data-renderer="d3"].flipTable table.renderingArea thead th:not(.checkbox_selection) {
    resize: none!important;
}
.bs_datatable_wrapper[data-renderer="simple"] table.renderingArea thead,
.bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead {
    position: sticky;
    top: 0;
    background: #FFF;
    z-index: 2;
}
.bs_datatable_wrapper[data-renderer="simple"] table.renderingArea thead th:not(.checkbox_selection):not(.non-resizable):not(.collapsible_icon),
.bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead th:not(.checkbox_selection):not(.non-resizable):not(.collapsible_icon) {
    resize: horizontal;
    position: relative;
    border-right: 1px solid transparent;
}

.bs_datatable_wrapper thead tr.thead_comparison th:hover .ui-resizable-handle {
    width: 10px;
    background: steelblue;
}
.bs_datatable_wrapper[data-renderer="simple"] div.table-container,
.bs_datatable_wrapper[data-renderer="d3"] div.table-container {
    height: calc(100% - 100px);
}
.bs_datatable_wrapper[data-renderer="simple"].hasPagination div.table-container,
.bs_datatable_wrapper[data-renderer="d3"].hasPagination div.table-container {
    height: calc(100% - 100px)!important;
}
.bs_datatable_wrapper[data-renderer="simple"].hasPagination.searchEnabled div.table-container,
.bs_datatable_wrapper[data-renderer="d3"].hasPagination.searchEnabled div.table-container {
    height: calc(100% - 165px)!important;
}
.bs_datatable_wrapper[data-renderer="simple"].hasPagination.hiddenSettings div.table-container,
.bs_datatable_wrapper[data-renderer="d3"].hasPagination.hiddenSettings div.table-container {
    height: calc(100% - 60px)!important;
}
.bs_datatable_wrapper[data-renderer="d3"].hiddenSettings:not(.hasPagination) div.table-container {
    height: calc(100% - 35px);
}

.bs_datatable_wrapper[data-renderer="simple"].searchEnabled div.table-container, .bs_datatable_wrapper[data-renderer="d3"].searchEnabled div.table-container {
    height: calc(100% - 145px);
}

.bs_datatable_wrapper[data-renderer="d3"] table.renderingArea thead th.th-selected {
    background-color: var(--dt-selection-color);

}
.bs_datatable_wrapper[data-renderer="d3"].hasPagination div.table-container .dt-tables {
    max-height: calc(100% - 0px);
}
.bs_datatable_wrapper[data-renderer="d3"].hasPagination div.dt-pagination {
    position: absolute;
    bottom: 8px;
    width: 100%;
}
.bs_datatable_wrapper[data-renderer="simple"] div.dt-tables,
.bs_datatable_wrapper[data-renderer="d3"] div.dt-tables {
    max-height: 100%;
    overflow: auto;
    padding: 0 10px;
}
.bs_datatable_wrapper[data-renderer="simple"] div.setting_buttons,
.bs_datatable_wrapper[data-renderer="d3"] div.setting_buttons {
    position: relative;
}
.bs_datatable_wrapper[data-renderer="d3"] div.dt-settings-contents {
    box-shadow: var(--plugin-box-shadow-lighter);
    /* background: #f3f2f1; */
    border: 1px solid #f3f2f1;
    height: 50px;
    display: flex;
    align-items: center;
    margin: 0 10px 10px 10px;
    flex: 1 1 auto;
}
.bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]) div.dt-settings-contents {
    display: none;
}
.bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]):hover div.dt-settings-contents {
    display: flex;
}
.bs_datatable_wrapper[data-renderer="d3"].tiny:not([data-design="d3view"]) div.table-container {
    height: calc(100% - 0px);
}
.bs_datatable_wrapper[data-renderer="d3"].tiny:not(.hiddenSettings):not([data-design="d3view"]):hover div.table-container {
    height: calc(100% - 60px);
}

.bs_datatable_wrapper[data-renderer="d3"] .dt-settings .selection_count {
    /*margin: 0 10px;*/
}
.bs_datatable_wrapper .dt-settings .selection_count_container.hasSelected > button {
    color: #007bff;
}
.bs_datatable_wrapper .dt-settings .selection_count_container.hasSelected .selection_count {
    background: #007bff;
}
.bs_datatable_wrapper[data-renderer="d3"] th {
    position: relative;
}
.bs_datatable_wrapper[data-renderer="d3"] th .resizer {
    /* Displayed at the right side of column */
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    cursor: col-resize;
    user-select: none;
}
.bs_datatable_wrapper[data-renderer="d3"] th .resizer:hover,
.bs_datatable_wrapper[data-renderer="d3"] th .resizing {
    border-right: 2px solid blue;
}

/*.bs_datatable_wrapper.hasSelectedColumn table.renderingArea thead th.ui-selected {*/
/*    background-color: var(--dt-selection-color);*/
/*}*/
/*.bs_datatable_wrapper.hasSelectedColumn tr.ui-selected td:not(.ui-selected) {*/
/*    background: #FFF;*/
/*}*/
/*.bs_datatable_wrapper.hasSelectedColumn:not(.hasSelectedRows) table.renderingArea tbody td.ui-selected {*/
/*    background-color: var(--dt-selection-color);*/
/*}*/
.bs_datatable_wrapper div.dataTables_scrollHead table.renderingArea.border-header th.disabled,
.bs_datatable_wrapper div.DTFC_LeftHeadWrapper table.renderingArea.border-header th.disabled {
    cursor: not-allowed;
}


/** Ribbon UI **/
.bs_datatable_wrapper div.settings .pl-ribbon-list {
    display: flex;
    align-items: center;
}
.bs_datatable_wrapper div.settings .pl-ribbon-item {
    display: flex;
    align-items: center;
}
.bs_datatable_wrapper div.settings .pl-ribbon-item > a {
    flex: 1 1 auto;
}

.bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened {
    color: steelblue;
}
.bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse {
    /*position: absolute;*/
    /*left: 10px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    padding: 6px;
    /*z-index: 2;*/
    cursor: pointer;
}
.bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened,
.bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse:hover {
    color: green;
}

.bs_datatable_wrapper.hasCollapsibleColumns table.bs-dt th.checkbox_selection,
.bs_datatable_wrapper.hasCollapsibleColumns table.bs-dt td.checkbox_selection {
    width: 50px!important;
}
.bs_datatable_wrapper [data-has-row-drag="true"] table.bs-dt th.checkbox_selection,
.bs_datatable_wrapper [data-has-row-drag="true"] table.bs-dt td.checkbox_selection {
    width: 70px!important;
}
.bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag {
    cursor: move;
    position: absolute;
    left: 0;
    color: lightgrey;
    opacity: 0;
}
.bs_datatable_wrapper [data-has-row-drag="true"] tr[data-id]:hover td.checkbox_selection .row-drag {
    opacity: 1;
}
.bs_datatable_wrapper [data-has-row-drag="true"] td.checkbox_selection .row-drag:hover {
    color: #333;
}
.bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols {
    display: flex;
    flex-wrap: wrap;
    box-shadow: none;
}
.bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols > li {
    flex: 0 0 calc(100% / 5 - 20px);
    margin: 7px 10px;
    width: calc(100% / 4 - 20px);
}
.bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols > li:first-child {
    margin-left: 0;
}
.bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols .dtr-title {
    font-weight: bold;
    display: block;
    word-wrap: break-word;
    /*min-width: 150px;*/
}
.bs_datatable_wrapper[data-renderer="d3"] .out_of_view_cols .dtr-value {

}
.bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name {
    cursor: pointer;
}
.bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name .edit-name {
    opacity: 0;
}
.bs_datatable_wrapper .dt-tables tr.group[data-editable="true"] .group-name:hover .edit-name {
    opacity: 1;
}

.bs_datatable_wrapper .custom_renderers {
    width: 200px;
    flex: 0 0 200px;
    padding-right: 10px;
}
.bs_datatable_wrapper .back_to_table {
    width: 100%;
}

.bs_datatable_wrapper:not(.scroll_enabled) table.renderingArea {
    /*width: 100%!important;*/
    /*table-layout: initial;*/
    width: fit-content!important;
    table-layout: fixed;
}
.bs_datatable_wrapper .custom_renderers li[data-id] {
    border-right: none;
}
.bs_datatable_wrapper .toggle_custom_renderers {
    /*margin: 0 10px;*/
}

.d3view-context-menu-container.dt-context-menu {
    width: 300px;
}


/** Material design **/
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] .dt-thead th {
    border-color: #ddd;
}
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings {
    position: fixed;
    bottom: 30px;
    z-index: 10;
    top: unset;
    width: auto;
    display: none;
    background: #FFF;
}
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
}
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.settings .dt-settings-contents {
    margin: 0;
}
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.table-container {
    height: 100%;
}
.bs_datatable_wrapper[data-renderer="d3"][data-design="d3view"] div.dt-tables {
    padding: 0;
}

.bs_datatable_wrapper .dt-color-legends {
    display: flex;
    /*justify-content: flex-end;*/
}
.bs_datatable_wrapper .dt-color-legends .legends-wrapper {
    position: relative;
    width: auto!important;
}
.bs_datatable_wrapper .dt-color-legends .legends-wrapper .legends-body {
    width: 100%;
}

.bs_datatable_wrapper .dt-tables .group-cards {
    display: flex;
    flex-wrap: wrap;
}
.bs_datatable_wrapper .dt-tables .group-card {
    width: calc(100% - 10px);
    height: unset;
    flex: 1 1 100%;
    /*transition: flex-basis 0.5s ease-in;*/
    box-shadow: none;
    background: #FFF;
    border-color: var(--neutralLight);
    /*margin: 20px;*/
    transition: border-color 0.3s ease-in;
}
.bs_datatable_wrapper .dt-tables .group-card .group-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    transition: color 0.3s ease-in;
}
.bs_datatable_wrapper .dt-tables .group-card.opened {
    height: auto;
    border-color: var(--plugin-primary-color);
}
.bs_datatable_wrapper .dt-tables .group-card .group-header:hover,
.bs_datatable_wrapper .dt-tables .group-card.opened .group-header {
    color: var(--plugin-primary-color);
}
.bs_datatable_wrapper .dt-tables .group-card.opened .group-rows {
    display: block;
    overflow: auto;
    min-height: 150px;
}
.bs_datatable_wrapper .dt-tables .group-card .group-rows {
    display: none;
}
.bs_datatable_wrapper .dt-tables .group-cards.hasOpenGroup.showInFull .group-card:not(.opened) {
    order: 0;
}
.bs_datatable_wrapper .dt-tables .group-cards.showInFull .group-card.opened {
    order: -1;
    flex-basis: 100%;
}
.bs_datatable_wrapper .dt-tables .group-card .group-summary {
    /*display: flex;*/
    /*align-items: center;*/
    /*flex-wrap: wrap;*/
}

div.child-rows .bs_datatable_wrapper {
    min-height: unset;
}
.child-rows .bs_datatable_wrapper .dt-chart-container {
    min-height: unset;
}
.bs_datatable_wrapper .child-rows {
    margin: 0 10px;
}

@container datatable (width < 1200px) {
    .setting-button-text {
        display: none;
    }
}
.bs_datatable_wrapper {
    container-name: datatable;
    container-type: inline-size;
}

/** Added by shashank2104 on 10/20/2025 at 05:23 PM - https://jira.d3view.com/browse/DW-2513 - Column search/jump to column feature **/
/* Column search dropdown styling */
.bs_datatable_wrapper .column-search-dropdown .column-jump-menu {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bs_datatable_wrapper.column-jump-item {
    transition: background-color 0.2s ease;
}

.bs_datatable_wrapper .column-jump-item:hover {
    background-color: #f5f5f5 !important;
}

.bs_datatable_wrapper .column-jump-item:active {
    background-color: #e8e8e8 !important;
}

/* Column highlight animation */
.bs_datatable_wrapper .column-highlight {
    animation: columnHighlight 2s ease;
}

@keyframes columnHighlight {
    0% {
        background-color: transparent;
    }
    10% {
        background-color: #fffacd;
        box-shadow: 0 0 10px rgba(255, 250, 205, 0.8);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Added by shashank2104 on 2026-04-20 - R0-3448 - JSON object cell viewer */
.dt-json-viewer {
    padding: 4px 0;
}
.dt-json-viewer .dt-json-table {
    margin-bottom: 0;
    font-size: 13px;
    border-color: var(--d3v-border-subtle, #e5e7eb);
}
.dt-json-viewer .dt-json-table > thead > tr > th {
    background: var(--d3v-bg-subtle, #f4f5f7);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
    border-bottom: 2px solid var(--d3v-border-subtle, #e5e7eb);
    padding: 8px 12px;
}
.dt-json-viewer .dt-json-table > tbody > tr > td {
    padding: 8px 12px;
    vertical-align: top;
}
.dt-json-viewer .dt-json-key {
    width: 35%;
    color: var(--d3v-text-primary, #1f2937);
    font-weight: 600;
    font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    word-break: break-word;
}
.dt-json-viewer .dt-json-value {
    color: var(--d3v-text-primary, #1f2937);
    font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    word-break: break-word;
}
.dt-json-viewer .dt-json-string { color: var(--d3v-accent-primary, #2563eb); }
.dt-json-viewer .dt-json-number { color: var(--d3v-status-success, #0f766e); }
.dt-json-viewer .dt-json-bool { color: var(--d3v-status-warning, #b45309); font-weight: 600; }
.dt-json-viewer .dt-json-null,
.dt-json-viewer .dt-json-empty {
    color: var(--d3v-text-tertiary, #9ca3af);
    font-style: italic;
}
.dt-json-viewer .dt-json-nested {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-subtle, #f9fafb);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    max-height: 200px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* =====================================================================================
   Added by shashank2104 on 2026-06-07 - SIM-1002 - DataTable PREMIUM "Option A" theme.
   ALL rules scoped under .bs_datatable_wrapper[data-viz-style-preset="premium"] so a
   non-premium DataTable is byte-identical. Matches plugins/datatable/table-*-sketch.html.
   Phase 1 = core grid (toolbar / filter row / header / rows / footer / pagination).
   ===================================================================================== */
.bs_datatable_wrapper[data-viz-style-preset="premium"] {
    /* token block (mirrors the sketch --c-* set) */
    --np-bg: #eef1f6;
    --np-card: #fff;
    --np-border: #e6eaf1;
    --np-surface-2: #f4f7fb;
    --np-row-alt: #fafbfd;
    --np-divider: #eef1f6;
    --np-divider-2: #cfd7e3;
    --np-tick: #7a8699;
    --np-ink: #0f172a;
    --np-ink-2: #334155;
    --np-ink-3: #64748b;
    --np-ink-4: #94a3b8;
    --np-accent: #2f6bff;
    --np-link: #2563eb;
    --np-pos: #16a34a;
    --np-neg: #dc2626;
    --np-warn: #d97706;
    --np-r-md: 10px;
    --np-r-pill: 999px;
    --np-sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --np-sh-md: 0 6px 22px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
    --np-sh-pop: 0 12px 30px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .10);
    background: var(--np-card);
    color: var(--np-ink-2);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- COMPONENT 1: settings header bar (.dt-settings → sketch .sk-toolbar) ----------
   Rebuilt 2026-06-10 component-by-component. KEY: the base CSS already gives `.dt-settings-contents`
   its own border + box-shadow surface — so we put the premium bar surface on the OUTER `.dt-settings`
   ONCE and NEUTRALIZE the inner contents' border/shadow/bg, instead of stacking a second surface
   (that stacking was the previous bug). Buttons are NOT touched in this component. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings {
    background: var(--np-surface-2);
    border-bottom: 1px solid var(--np-border);
    padding: 6px 14px;
    align-items: center;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-settings-contents {
    background: transparent;
    border: 0;
    box-shadow: none;
    /* base CSS (40-special-rows.css) hard-codes height:50px + a 10px bottom margin → the bar reads far
       too tall. Flatten margin/border/shadow AND override that height to a tight control row so idle and
       selection-mode are the SAME height (--dt-prem-bar-row) and the table never jumps on toggle. */
    margin: 0;
    padding: 0;
    height: 36px;
    align-items: center;
}

/* EVEN spacing across the right control cluster. The template hard-codes mixed margins
   (Download .mr5, the rest 0) so the buttons read as touching → uneven. Drive ALL gaps from a
   single flex `gap` (sketch toolbar gap:8px) and zero the per-button margins. Empty utility
   spans (.dt-alert) must not become gap-bearing flex items. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .right_buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .right_buttons > * {
    margin: 0 !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .right_buttons > .dt-alert:empty,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .right_buttons > .viz-options:empty {
    display: none !important;
}

/* ---------- COMPONENT 2: inline KEEPER buttons → ghost pills ----------
   Only the four controls that STAY inline in A1 (Type ▾ / Download ▾ / Customize / Save). The ribbon
   clutter (Keep highlighted, Compare, …) is removed to the ⋯ overflow in a later component, so it is
   intentionally NOT styled here. We set surface/border/radius/padding ONLY — NEVER `display` (that
   previously force-showed hidden buttons) — and target specific toggles so .dropdown-menu items are
   never affected. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .export_options .dropdown-toggle,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .toggle_settings .dropdown-toggle,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .save_btn {
    /* btn-outline-on-hover sets background:transparent !important, so these 4 keepers need a
       targeted !important on background ONLY (not a blanket rule) to read as solid white pills */
    background: var(--np-card) !important;
    border: 1px solid var(--np-border);
    border-radius: var(--np-r-md);
    color: var(--np-ink-2);
    padding: 6px 11px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: var(--np-sh-sm);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .export_options .dropdown-toggle:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .toggle_settings .dropdown-toggle:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .save_btn:hover {
    border-color: #c3ccdb;
    color: var(--np-accent);
    background: #f7f9fc !important;
}
/* disabled keeper (e.g. Save before changes) reads muted, not broken */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .save_btn.disabled {
    opacity: .5;
    box-shadow: none;
}

/* ---------- COMPONENT 2b: chart-type control (Type ▾ button + viz-type dropdown) ----------
   The `.selected_type` button gets the white-pill surface from Component 2 above; here we polish its
   inner glyphs (muted eye + "Type:" label, muted caret) and — the part that was raw Bootstrap — turn
   its `.dropdown-menu` viz-type list into a premium flyout (rounded, popover shadow, padded rows with
   hover + active states, framed thumbnails). Matches the sketch .sk-tb-btn + .sk-more-menu language. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type {
    gap: 6px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type .fa-eye {
    color: var(--np-ink-4);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type .setting-button-text {
    color: var(--np-ink-3);
    font-weight: 600;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type .fa-caret-down {
    color: var(--np-ink-4);
    font-size: 11px;
    margin-left: 2px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type:hover .fa-eye,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .selected_type:hover .fa-caret-down {
    color: var(--np-accent);
}
/* ONE premium surface for EVERY simple toolbar dropdown (Download / export submenu / chart-type
   picker) so they read identically — the chart-type picker just layers thumbnails on top. Scoped to
   .dt-settings so the grid's own menus (selection lists, groups) are untouched. Mirrors the generic
   `.d3view-viz[premium] ul.dropdown-menu` rule in visualizations.css; we duplicate it here because the
   datatable is not always wrapped in a premium .d3view-viz, and DataTable.css reliably reaches it. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .nested-dropdown-menu {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--np-border);
    border-radius: 12px;
    box-shadow: var(--np-sh-pop);
    background: var(--np-card);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .nested-dropdown-menu > li {
    margin: 0;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .nested-dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--np-ink-2);
    transition: background .12s ease, color .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a:focus,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .nested-dropdown-menu > li > a:hover {
    background: var(--np-surface-2) !important;
    /* base plugins.css forces `color:#fff!important` (blue-gradient hover) — override it back to accent */
    color: var(--np-accent) !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.active > a,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.active > a:hover {
    background: #eef4ff;
    color: var(--np-accent);
}
/* PowerPoint-style sub-menu → a clean cascading flyout. Base CSS (simlytiks-main.css) renders it as an
   always-open inline indented list (margin-left:20px); with the premium card surface that read as a
   broken floating box pushing the rows below it down. Here we detach it into a conventional hover flyout
   that opens to the RIGHT (the caret points the same way) and lines up with its parent row. The marker
   class .dt-has-submenu is on the PowerPoint <li> (template).
   KEY: the flyout sits FLUSH against the parent menu (no margin gap) — an 8px gap was a hover dead-zone
   where neither the item nor the submenu is :hover, so the submenu would flicker shut when you crossed
   it. With no gap, moving onto the submenu (a descendant of the item) keeps the item :hover. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu {
    position: relative;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu > a::after {
    content: "\f0da"; /* fa-caret-right — points the same way the flyout opens */
    font-family: FontAwesome;
    margin-left: auto;
    color: var(--np-ink-4);
    font-size: 12px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu:hover > a::after {
    color: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu > .nested-dropdown-menu {
    position: absolute;
    top: -7px;        /* align the flyout's first row with the parent row (card padding 6 + border 1) */
    left: 100%;
    right: auto;
    margin: 0;        /* FLUSH — no gap, so there's no un-hovered dead-zone between item and flyout */
    min-width: 210px;
    z-index: 1060;
    display: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu:hover > .nested-dropdown-menu,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.dt-has-submenu:focus-within > .nested-dropdown-menu {
    display: block;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li.divider {
    height: 1px;
    margin: 5px 6px;
    background: var(--np-border);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a > i,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a > .fa {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: var(--np-ink-4);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a:hover > i,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dropdown-menu > li > a:hover > .fa {
    color: var(--np-accent);
}
/* chart-type picker extras: thumbnail framing + viz-name + active highlight */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu {
    min-width: 236px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu img {
    border-radius: 6px;
    border: 1px solid var(--np-border);
    flex: 0 0 auto;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu .vizIcon {
    width: 20px;
    text-align: center;
    color: var(--np-ink-4);
    flex: 0 0 auto;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu li.active .vizIcon,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu li > a:hover .vizIcon {
    color: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .chart_type .dropdown-menu .viz-name {
    font-weight: 600;
}

/* ---------- COMPONENT 3: scroll pager («‹›») → compact square pills ----------
   .scroll_button is never display:none (disabled ones still show), so sizing is safe. Icons are
   centered via line-height (no flex needed on the buttons). */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .scroll_buttons {
    display: inline-flex;
    gap: 2px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .scroll_buttons .scroll_button {
    width: 30px;
    height: 30px !important;
    min-width: 0;
    padding: 0;
    margin: 0 !important;
    line-height: 28px;
    text-align: center;
    /* btn-outline-on-hover sets `border:...!important`, so the boxed sketch look (.sk-pgi) needs the
       border forced too — without this the buttons render as borderless chevrons. */
    border: 1px solid var(--np-border) !important;
    background: var(--np-card) !important;
    border-radius: 8px !important;
    color: var(--np-ink-3) !important;
    box-shadow: var(--np-sh-sm);
    font-size: 12px;
    transition: all .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .scroll_buttons .scroll_button:hover {
    border-color: #c3ccdb !important;
    color: var(--np-accent) !important;
    background: #f7f9fc !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .scroll_buttons .scroll_button.disabled {
    opacity: .4;
    box-shadow: none;
}

/* ---------- COMPONENT 4: ⋯ overflow trigger + premium "Table tools" MENU ----------
   The move logic lives in m.applyPremiumToolbar (premium-only): the secondary VIEW controls
   (Groups · Fit columns · Row density · Jump to Column — the sketch's set) are reparented into a
   single-section flyout. This block styles the trigger, the flyout surface, the title, and — the heart
   of it — turns every reparented control (`.dt-prem-mi`) into a uniform menu row: leading icon, label,
   trailing badge/caret. Inner Groups / Jump-to-Column dropdowns are re-skinned as premium sub-popovers.
   Mirrors the sketch .sk-more-menu / .sk-mi language. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-more-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-more {
    width: 30px;
    height: 30px;
    padding: 0;
    line-height: 26px;
    text-align: center;
    border: 1px solid var(--np-border);
    background: var(--np-card);
    border-radius: 8px;
    color: var(--np-ink-3);
    box-shadow: var(--np-sh-sm);
    cursor: pointer;
    font-size: 16px;
    transition: all .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-more:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-more-wrap.open .dt-prem-more {
    border-color: #c3ccdb;
    color: var(--np-accent);
    background: #f7f9fc;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-overflow {
    position: absolute;
    top: 38px;
    right: 0;
    min-width: 248px;
    background: var(--np-card);
    border: 1px solid var(--np-border);
    border-radius: 12px;
    box-shadow: var(--np-sh-pop);
    padding: 6px;
    z-index: 1050;
    display: none;
    flex-direction: column;
    gap: 0;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-more-wrap.open .dt-prem-overflow {
    display: flex;
}
/* hide the DataTable's NATIVE responsive overflow (.overlapping_options) — our ⋯ replaces it */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .pl-ribbon-list > .dropdown.overlapping_options {
    display: none !important;
}
/* premium declutter: a DISABLED selection action (Keep/Remove/Compare/… with no rows selected) reads as
   dead weight. Hide it in the ribbon — the ribbon re-renders on selection change, so each action
   reappears, enabled, the moment rows are selected. View tools (Groups/Fit/Density/Jump) live in the ⋯
   menu and are unaffected (they're under .dt-prem-overflow, not .pl-ribbon-list). */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .pl-ribbon-list .pl-ribbon-item.disabled {
    display: none !important;
}
/* an emptied ribbon group must not leave a stray divider/gap */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .pl-ribbon-list .pl-ribbon-group:empty,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .pl-ribbon-list .pl-ribbon-divider:last-child {
    display: none !important;
}

/* menu title */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--np-ink-3);
    padding: 7px 10px 5px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-sec {
    display: flex;
    flex-direction: column;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-sec-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* every reparented control → uniform full-width menu row (kills btn/btn-group base styling) */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
    min-width: 0;
    line-height: 1.25;
    padding: 8px 10px;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--np-ink-2) !important;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi:hover {
    background: var(--np-surface-2) !important;
    color: var(--np-accent) !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi.disabled {
    opacity: .42;
    cursor: default;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi.disabled:hover {
    background: transparent !important;
    color: var(--np-ink-2) !important;
}

/* leading icon (injected .dt-prem-mi-ico OR the control's own first glyph) */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi > i:first-child,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi > .fa:first-child,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi > .pl-icon,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi-ico {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: var(--np-ink-4);
    font-size: 13px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi:hover > i:first-child,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi:hover .pl-icon,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi:hover .dt-prem-mi-ico {
    color: var(--np-accent);
}
/* the Jump-to-Column button carries two leading icons — keep just the search glyph */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .column-search-dropdown .fa-columns {
    display: none;
}

/* labels: reveal sr-only text + unify the various label spans */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .item-label,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .setting-button-text,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .sr-only,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi-label {
    /* the ribbon hides .item-label (icon-only chrome) — force it visible inside the menu */
    display: inline-block !important;
    font-size: 12.5px;
    font-weight: 600;
    color: inherit;
}

/* trailing badge / caret pushed to the right edge */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .badge,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .groups_count {
    margin-left: auto;
    background: var(--np-surface-2);
    color: var(--np-ink-4);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
    box-shadow: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .fa-caret-down {
    margin-left: auto;
    color: var(--np-ink-4);
    font-size: 11px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .badge + .fa-caret-down,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-mi .groups_count + .fa-caret-down {
    margin-left: 6px;
}

/* Row-density row: label on the left, a compact segmented toggle on the right */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-row {
    cursor: default;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-row:hover {
    background: transparent !important;
    color: var(--np-ink-2) !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg {
    margin-left: auto;
    display: inline-flex;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn {
    height: 24px;
    min-width: 0;
    padding: 0 9px;
    margin: 0 !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    border: 1px solid var(--np-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn .pl-icon {
    display: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn:first-child {
    border-radius: 6px 0 0 6px !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn:last-child {
    border-radius: 0 6px 6px 0 !important;
    border-left: 0 !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn-primary {
    background: var(--np-accent) !important;
    border-color: var(--np-accent) !important;
    color: #fff !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-prem-density-seg .btn:not(.btn-primary) {
    background: var(--np-card) !important;
    color: var(--np-ink-3) !important;
}

/* inner sub-dropdowns (Groups list, Jump-to-Column search) re-skinned as premium sub-popovers */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dropdown-menu {
    border: 1px solid var(--np-border);
    border-radius: 10px;
    box-shadow: var(--np-sh-pop);
    padding: 6px;
    font-size: 12.5px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .column-jump-search,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-overflow .dt-groups .form-control {
    border-radius: 8px;
}

/* ---------- COMPONENT 5: selection-mode bar (Sketch 2 · S1) ----------
   When >=1 row is selected, m.applyPremiumSelectionBar adds `.dt-prem-selecting` to .dt-settings and
   appends a `.dt-prem-selbar`. We hide the idle toolbar contents and show the accent-tinted action bar
   in its place (the filter row below is untouched). Buttons are plain — all wiring is in the JS via
   m.contextMenuItemClick. */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings .dt-prem-selbar {
    display: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings.dt-prem-selecting {
    background: #eaf1ff;
    border-bottom-color: #d4e2ff;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings.dt-prem-selecting .dt-settings-contents {
    display: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-settings.dt-prem-selecting .dt-prem-selbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* match .dt-settings-contents height EXACTLY (36px) so swapping idle ↔ selection doesn't change the
       toolbar height — otherwise the grid below jumps. nowrap keeps it a single row at that height. */
    height: 36px;
    flex-wrap: nowrap;
}
/* count chip */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selcount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px 0 10px;
    background: var(--np-card);
    border: 1px solid #cfe0ff;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--np-ink);
    box-shadow: var(--np-sh-sm);
    white-space: nowrap;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selcount b {
    color: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selcheck {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selcheck::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-seldiv {
    width: 1px;
    height: 20px;
    background: #cfe0ff;
}
/* action buttons */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--np-border);
    background: var(--np-card);
    border-radius: 9px;
    color: var(--np-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--np-sh-sm);
    white-space: nowrap;
    transition: all .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact:hover {
    border-color: #c3ccdb;
    color: var(--np-accent);
    background: #f7f9fc;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact > i {
    color: var(--np-ink-4);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact:hover > i {
    color: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact .fa-caret-down {
    margin-left: 1px;
    font-size: 11px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selact.dt-prem-selmore {
    padding: 0;
    width: 30px;
    justify-content: center;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selgroup {
    display: inline-flex;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selspring {
    flex: 1 1 auto;
}
/* Clear (ghost danger) on the right */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selclear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 9px;
    color: var(--np-ink-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selclear:hover {
    color: var(--np-neg);
    background: #fef2f2;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selclear > i {
    font-size: 11px;
}
/* ⋯ selection flyout (reuses the .dt-prem-title / .dt-prem-mi row language) */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-wrap {
    position: relative;
    display: inline-flex;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu {
    position: absolute;
    top: 36px;
    left: 0;
    min-width: 200px;
    background: var(--np-card);
    border: 1px solid var(--np-border);
    border-radius: 12px;
    box-shadow: var(--np-sh-pop);
    padding: 6px;
    z-index: 1050;
    display: none;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-wrap.open .dt-prem-selmore-menu {
    display: block;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu .dt-prem-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--np-ink-4);
    padding: 4px 10px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu .dt-prem-mi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--np-ink-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu .dt-prem-mi:hover {
    background: var(--np-surface-2);
    color: var(--np-accent);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu .dt-prem-mi > i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: var(--np-ink-4);
    font-size: 13px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-prem-selmore-menu .dt-prem-mi:hover > i {
    color: var(--np-accent);
}

/* ---------- filter row (shared d3VIEW.Views.FilterView) ---------- */
.bs_datatable_wrapper[data-viz-style-preset="premium"] div.dt-search-filters-container {
    background: var(--np-card);
    border-bottom: 1px solid var(--np-border);
    padding: 8px 14px !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .d3view-filters .filters-container {
    gap: 8px 7px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-tag > .label,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-tag .label-filter-selected {
    background: var(--np-surface-2) !important;
    border: 1px solid var(--np-border) !important;
    border-radius: var(--np-r-pill) !important;
    color: var(--np-ink-3) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    box-shadow: none !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-tag .filter-value {
    color: var(--np-ink-2) !important;
    font-weight: 700 !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-tag:hover > .label {
    border-color: #c3ccdb !important;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .add-new-filter,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-editor .btn {
    border: 1px solid var(--np-border) !important;
    background: var(--np-card) !important;
    border-radius: var(--np-r-pill) !important;
    color: var(--np-ink-2) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    box-shadow: var(--np-sh-sm);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .add-new-filter:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .filter-editor .btn:hover {
    border-color: var(--np-accent) !important;
    color: var(--np-accent) !important;
    background: #f5f8ff !important;
}

/* ---------- header (.dt-thead) ---------- */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th {
    background: var(--np-card) !important;
    border-bottom: 1px solid var(--np-divider-2) !important;
    padding: 12px 16px !important;
    vertical-align: middle;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th .th-span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--np-ink-2) !important;
    letter-spacing: .01em;
    text-transform: none;
}
/* keep icons hover-only (already the default behaviour) but recolour for premium */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th .sort-icon,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th .filter_dropdown .filter-icon {
    color: var(--np-ink-4);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th:hover .sort-icon:hover,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th:hover .filter_dropdown:hover .filter-icon {
    color: var(--np-accent) !important;
}
/* a column WITH an active filter keeps its funnel visible + accented */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-thead th .filter-icon.pl-hasValue {
    color: var(--np-accent) !important;
    opacity: 1 !important;
}

/* ---------- body rows / cells ---------- */
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--np-divider) !important;
    font-size: 13px;
    color: var(--np-ink-2);
    vertical-align: middle;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr {
    transition: background .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr:nth-child(even) {
    background: var(--np-row-alt);
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr:hover {
    background: #eef4ff;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr.selected,
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr.row-selected,
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody tr.ui-selected {
    background: #e7f0ff !important;
    box-shadow: inset 3px 0 0 var(--np-accent);
}
/* numeric cells tabular */
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody td.dt-num,
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody td[data-coltype="number"],
.bs_datatable_wrapper[data-viz-style-preset="premium"] table.dataTable tbody td[data-coltype="float"] {
    font-variant-numeric: tabular-nums;
}
/* tag pills (.label-info) -> calm premium pill */
.bs_datatable_wrapper[data-viz-style-preset="premium"] .d3view-tags-container .label.label-info {
    background: var(--np-surface-2) !important;
    color: var(--np-ink-3) !important;
    border: 1px solid var(--np-border);
    border-radius: 999px;
    font-weight: 600;
    padding: 2px 9px;
}

/* ---------- footer / pagination (.dt-pagination) ---------- */
.bs_datatable_wrapper[data-viz-style-preset="premium"] div.dt-pagination {
    background: var(--np-surface-2);
    border-top: 1px solid var(--np-border);
    padding: 10px 16px;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-page-info {
    font-size: 12.5px;
    color: var(--np-ink-3);
    font-variant-numeric: tabular-nums;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-pages > * {
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--np-border);
    background: var(--np-card);
    color: var(--np-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    transition: all .12s ease;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-pages > *:hover {
    border-color: #c3ccdb;
    background: #f7f9fc;
}
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-pages > .active,
.bs_datatable_wrapper[data-viz-style-preset="premium"] .dt-pages > *.current {
    background: var(--np-accent) !important;
    border-color: var(--np-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(47, 107, 255, .28);
}

/* /javascripts/plugins_src/fast_datatable/fast_datatable.css */
/** Added by shashank2104 on 10/31/2025 at 03:24 PM - Fixed table overflow issue - Prevents table from overflowing parent container **/
.table-view {
    position: relative;
    --aspect_ratio: auto;
    aspect-ratio: var(--aspect_ratio);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}

.table-view .table-viewer-header {
    height: 100px;
    /* border-bottom: 1px solid #ddd; */
    gap: 1rem;
    /*z-index: 1049;*/
    background: #fff;
    border-radius: 4px;
    box-shadow: none;
    border: none;
}
.table-view.tv-design-issue-list-view .table-viewer-header {
    box-shadow: none;
}

/* .table-view .table-viewer-footer {
    height: 50px;
    border-top: 1px solid #ddd;
}
 */
.table-view .table-viewer-body {
    height: calc(100% - 60px - 1rem);
    overflow-x: hidden;
    position: relative;
}

.table-view .s-handle:hover {
    cursor: ns-resize;
}

.table-view .tv-scroll-btn-left {
    position: absolute;
    left: 0px;
    top: 20px;
}

.table-view .tv-scroll-btn-right {
    position: absolute;
    right: 0px;
    top: 20px;
}

.table-view .tv-scroll-btn-left:hover,
.table-view .tv-scroll-btn-right:hover {
    cursor: pointer;
    color: steelblue;
}

/* Center scroll buttons styling */
.table-view .tv-center-scroll-buttons {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.table-view .table-viewer-body:hover .tv-center-scroll-buttons {
    opacity: 1;
    pointer-events: auto;
}

.table-view .tv-center-scroll-btn-left {
    position: absolute;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.table-view .tv-center-scroll-btn-right {
    position: absolute;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.table-view .tv-center-scroll-btn-left:hover,
.table-view .tv-center-scroll-btn-right:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

.table-view .tv-center-scroll-btn-left.disabled,
.table-view .tv-center-scroll-btn-right.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /*pointer-events: none;*/
}

.table-view .tv-center-scroll-btn-left.disabled:hover,
.table-view .tv-center-scroll-btn-right.disabled:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hide header scroll buttons when center scroll buttons are enabled */
.table-view[data-center-scroll-buttons="true"] .scroll-btn {
    display: none !important;
}

/* When center scroll buttons are enabled alongside hideScrollBar, we still need
   the renderer to scroll horizontally (buttons call scrollTo({left})). Override
   the overflow-x:hidden from [data-hidescrollbar="true"] and hide the native
   scrollbar cosmetically so the buttons remain the only horizontal-scroll UI. */
.table-view[data-center-scroll-buttons="true"] .virtual-table-renderer[data-hidescrollbar="true"] {
    overflow-x: auto !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}
.table-view[data-center-scroll-buttons="true"] .virtual-table-renderer[data-hidescrollbar="true"]::-webkit-scrollbar {
    display: none; /* Chrome / Safari */
}

.table-view ul.dropdown-menu.group-by-configuration {
    width: 300px;
    padding: 10px;
    left: auto;
    right: 0px;
}

.table-view .group-autocomplete input.typeahead {
    width: 100%;
    height: 34px;
    border-width: 1px;
    padding: 6px 12px !important;
    border-radius: 4px !important;
}

.table-view .group-autocomplete div.tt-menu {
    margin: 2px 0px;
}

.table-view ul.group-by-columns {
    min-height: 80px;
    max-height: 160px;
    position: relative;
}

.table-view ul.group-by-columns:is(:empty)::before {
    content: "No groups select..";
    padding: 5px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: small;
    color: steelblue;
}

.table-view ul.group-by-columns li.group-by-column {
    padding: 5px;
}

.table-view ul.group-by-columns li.group-by-column>div {
    gap: 10px;
}

.table-view ul.group-by-columns li.group-by-column .group-column-label {
    flex: 1 1 auto;
}

.table-view ul.group-by-columns li.group-by-column:not(:last-child) {
    margin-bottom: 5px;
}

.table-view ul.group-by-columns li.group-by-column .handle-icon {
    cursor: move;
}

.table-view ul.group-by-columns li.group-by-column .remove-group-column {
    cursor: pointer;
}

.table-view .table-viewer-body .virtual-table-body-row,
.table-view .table-viewer-body .virtual-table-header-row {
    min-width: max-content;
    display: flex;
}

/* Table container background matches the header so there is no empty gap after the last column */
.table-view .virtual-table {
    background-color: #fff;
}



.table-view .vitual-table-header-column {
    position: relative;
}

.table-view .sort-icon-container {
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: x-large;
    color: slategray; */
}

.table-view .virtual-table-body-row.vt-baseline div.virtual-table-cell {
    background: lightblue;
}

.table-view .virtual-table-body-row.row-selected:not(.vt-baseline) div.virtual-table-cell {
    background: rgb(214, 242, 252) !important;
}
.table-view .virtual-table-body-row.temp-row-selected:not(.row-selected) {
    border: 1px solid blue;
    border-bottom: 1px solid blue !important;
}

/* Prevent text selection during row drag */
.table-view .virtual-table-body-row {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Copy-to-clipboard icon on text cells — visible on row hover */
.table-view .virtual-table-body-row .cell-copy-btn {
    display: none;
    cursor: pointer;
    color: #999;
    font-size: 11px;
    padding: 2px 4px;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.table-view .virtual-table-body-row:hover .cell-copy-btn {
    display: inline-flex;
}
.table-view .virtual-table-body-row .cell-copy-btn:hover {
    color: steelblue;
    background-color: rgba(70, 130, 180, 0.1);
}

/* Row hover text feedback. */
.table-view .virtual-table-body-row .cell-value:not(.label, .badge, .btn),
.table-view .virtual-table-body-row .cell-value a:not(.label, .badge, .btn) {
    --heading-hover-bg: transparent;
    --heading-hover-color: var(--tvm-accent, var(--mc-accent, steelblue));
    transition: color 0.15s ease;
}

.table-view .virtual-table-body-row:not(.ui-selected):not(.row-selected):hover .cell-value:not(.label, .badge, .btn),
.table-view .virtual-table-body-row:not(.ui-selected):not(.row-selected):hover .cell-value a:not(.label, .badge, .btn) {
    color: var(--tvm-accent, var(--mc-accent, steelblue));
}

.table-view .virtual-table-header-row .selection-checkbox {
    background-color: whitesmoke;
}

.table-view .vitual-table-cell-icon:hover {
    cursor: pointer;
    color: steelblue;
}

.table-view .vitual-table-body-column.virtual-table-cell input.form-control:not(.defaultStyles) {
    border: none;
    box-shadow: none;
    padding: 6px 12px 6px 0;
}

.table-view .selection-checkbox {
    /* position: sticky;
    left: 0;
    z-index: 1000; */
    background-color: #fff;

    display: inline-flex;
    align-items: center;
    padding: 0px 15px;
    height: 100% !important;

    /* box-shadow: 2px 0px 4px #eee; */
}


.table-view input.select-all-checkboxes,
.table-view input.row-selection-checkbox {
    height: 15px;
    width: 15px;
}


.table-view .table-viewer-body .vitual-table-body-column,
.table-view .table-viewer-body .vitual-table-header-column {
    display: inline-flex;
    align-items: center;
    padding: 0px 15px;
    height: 100% !important;
    flex-shrink: 0;
}
.table-view .vitual-table-header-column.ui-selected {
    background-color: var(--dt-selection-color)!important;
}

/* .table-view .vitual-table-header-column:not(.vt-group-by-column-header):active

    {
    background: #ddd;
} */

.table-view .virtual-table-cell:not([data-visibility="hidden"]) .vitual-table-header-column:not(.vt-group-by-column-header):hover .sort-handle {
    visibility: visible;
    display: block;
}

.table-view .sort-handle {
    visibility: hidden;
    display: none;
}

.table-view .sort-handle:hover {
    cursor: ew-resize;
}

.table-view .vt-group-by-column-header {
    background-color: steelblue;
    color: #fff;
}

.table-view .virtual-table {
    overflow-x: visible;
    overflow-y: auto;
}

.table-view .virtual-table::-webkit-scrollbar {
    display: none;
}

.table-view .virtual-table-renderer {
    border: none !important;

}

.table-view .virtual-table-renderer[data-hidescrollbar="true"] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


.table-view .dropdown.open .filter-btn,
.table-view .dropdown.open .vt-addon-btn {
    visibility: visible;
    display: block;
}

.table-view .filter-btn.active-filter {
    color: orangered;
}

.table-view .column-color:not(:focus),
.table-view .filter-btn:not(.active-filter),
.table-view .distribution-btn:not([aria-describedby]),
.table-view .vt-addon-btn {
    visibility: hidden;
    display: none;
}

.popover {
    max-width: unset;
}

.vt-custom-renderer {
    width: 300px;
    height: 300px;
}

.table-view .vitual-table-header-column:hover .column-color,
.table-view .vitual-table-header-column:hover .filter-btn,
.table-view .vitual-table-header-column:hover .distribution-btn,
.table-view .vitual-table-header-column:hover .vt-addon-btn {
    visibility: visible;
    display: block;
}

.table-view .cell-header {
    color: inherit;
    width: 100%;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
}

.table-view .th-header-icon {
    font-size: 11px;
}

.table-view i.pin-icon {
    font-size: 11px;
}

.table-view .th-vt-header {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    /* pointer-events: none; */
}

.table-view .virtual-table-renderer[data-border="both"] .virtual-table-body-row .virtual-table-cell,
.table-view .virtual-table-renderer[data-border="vertical"] .virtual-table-body-row .virtual-table-cell {
    border-right: 1px solid #ddd;
}

.table-view .virtual-table-renderer[data-border="none"] .virtual-table-header-row,
.table-view .virtual-table-renderer[data-border="none"] .virtual-table-body-row,
.table-view .virtual-table-renderer[data-border="none"] .virtual-table-cell {
    border: none;
}

.table-view .virtual-table-renderer[data-textwrap="yes"] .vitual-table-body-column {
    overflow: auto;
}

.table-view .virtual-table-renderer[data-textwrap="no"] .vitual-table-body-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-view .virtual-table-renderer[data-textwrap="no"] .vitual-table-body-column h2 {
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
}


.table-view .virtual-table-renderer[data-textwrap="no"] .cell-value {
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    flex: 1 1 auto;
}

.table-view .virtual-table-renderer[data-textwrap="yes"] .cell-value {
    overflow: auto;
    word-break: break-all;
}

.table-view .virtual-table-renderer[data-fontsize="tiny"] .cell-value {
    font-size: 50%;
}

.table-view .virtual-table-renderer[data-fontsize="small"] .cell-value {
    font-size: 75%;
}

.table-view .virtual-table-renderer[data-fontsize="normal"] .cell-value {
    font-size: 100%;
}

.table-view .virtual-table-renderer[data-fontsize="large"] .cell-value {
    font-size: 120%;
}

.table-view .virtual-table-renderer[data-fontsize="x-large"] .cell-value {
    font-size: 150%;
}

.table-view .virtual-table-renderer[data-fontweight="normal"] .cell-value {
    font-weight: 400;
}

.table-view .virtual-table-renderer[data-fontweight="bold"] .cell-value {
    font-weight: bold;
}

.table-view .virtual-table-renderer[data-align="left"] .cell-value {
    text-align: left;
    justify-content: flex-start;
}

.table-view .virtual-table-renderer[data-align="center"] .cell-value {
    text-align: center;
    justify-content: center;
}

.table-view .virtual-table-renderer[data-align="right"] .cell-value {
    text-align: right;
    justify-content: flex-end;
}


.table-view .virtual-table-renderer .cell-value {
    width: 100%;
}

.table-view .virtual-table-cell:hover .ui-resizable-e {
    background-color: #ccc;
    width: 3px !important;
    transition: background-color 0.15s ease;
}

.table-view .virtual-table-cell:active .ui-resizable-e,
.table-view .virtual-table-cell .ui-resizable-e:hover {
    background-color: #999;
    width: 3px !important;
}

.table-view .vt-filter-container {
    flex: 1 1 auto;
}

.table-view .virtual-table-cell:not(:last-child) {
    /* border-right: 1px solid #ddd; */
    border-right: none;
}

.table-view .vt-bordered .virtual-table-cell:not(:last-child) {
    border-right: 1px solid #ddd;
}


.table-view .ui-resizable-handle.ui-resizable-e {
    right: 0px;
    width: 6px !important;
    z-index: 1 !important;
    cursor: ew-resize;
    transition: background-color 0.15s ease;
}

.table-view .vt-last-pinned-cell {
    box-shadow: 4px 0px 2px #eee;
}

.table-view .virtual-table-cell.vt-group-column-cell.vt-last-group-cell {
    border-right: 3px;
    border-style: groove;
    border-color: #eee;
}

.table-view .dropdown-submenu {
    position: relative;
}

.table-view .dropdown-submenu>a::after {
    display: block;
    content: "";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-left-color: #000;
    margin-top: 6px;
    margin-right: -10px;
}

.table-view .dropdown-submenu>ul.dropdown-menu {
    position: absolute;
    left: 100%;
    top: 5px;
    margin-left: -10px;
}

.table-view .bg-icon {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}

.table-view li.bg-class-item.bg-active>a {
    position: relative;
}

.table-view li.bg-class-item.bg-active>a::after {
    position: absolute;
    right: 10px;
    top: 2px;
    content: '\f00c';
    font-family: 'FontAwesome';
    font-weight: bold;
}





.table-view .virtual-table-header-row .cell-bg-none {
    background-color: #fff;
}

.table-view .virtual-table-renderer .virtual-table-body-row.highlighted .vitual-table-body-column {
    background: #f5f5f5 !important;
}

.table-view:not(.row_reordering) .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-none {
    background-color: whitesmoke;
}

.table-view[data-zebra="true"] .virtual-table-body-row.row-odd .cell-bg-none {
    background-color: whitesmoke;
}
.table-view[data-zebra="true"] .virtual-table-body-row.row-even .cell-bg-none {
    background-color: whitesmoke;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-none {
    background-color: white;
}

.table-view.row_reordering .virtual-table-renderer .sortable-ghost * {
    background-color: whitesmoke!important;
}

.table-view.row_reordering .virtual-table-renderer .sortable-drag * {
    background-color: lightyellow!important;
}

.table-view.row_reordering .virtual-table-renderer .row-drop-target * {
    background-color: lightgreen!important;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-none {
    background-color: white;
}

.table-view.row_reordering .virtual-table-renderer .row-reorder-flash * {
    background-color: lightblue!important;
}



.table-view .virtual-table-header-row .cell-bg-dark-pink {
    background-color: rgb(228, 131, 252) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-dark-pink {
    background-color: rgb(246, 225, 252) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-dark-pink {
    background-color: white;
}


.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-dark-pink {
    background-color: rgb(246, 225, 252) !important;
}


.table-view .virtual-table-header-row .cell-bg-blue {
    background-color: rgb(115, 187, 250) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-blue {
    background-color: rgb(213, 233, 250) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-blue {
    background-color: white;
}


.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-blue {
    background-color: rgb(213, 233, 250) !important;
}


.table-view .virtual-table-header-row .cell-bg-green {
    background-color: rgb(149, 233, 194) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-green {
    background-color: rgb(175, 236, 208) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-green {
    background-color: white;
}


.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-green {
    background-color: rgb(175, 236, 208) !important;
}

.table-view .virtual-table-header-row .cell-bg-yellow {
    background-color: rgb(240, 221, 139) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-yellow {
    background-color: rgb(250, 240, 198) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-yellow {
    background-color: white;
}


.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-yellow {
    background-color: rgb(250, 240, 198) !important;
}

.table-view .virtual-table-header-row .cell-bg-orange {
    background-color: rgb(245, 186, 176) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-orange {
    background-color: rgb(247, 219, 214) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-orange {
    background-color: white;
}


.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-orange {
    background-color: rgb(247, 219, 214) !important;
}

.table-view .virtual-table-header-row .cell-bg-gray {
    background-color: gray !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-gray {
    background-color: lightgray !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-gray {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-gray {
    background-color: lightgray !important;
}


.table-view .virtual-table-header-row .cell-bg-teal {
    background-color: rgb(102, 208, 219) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-teal {
    background-color: rgb(188, 239, 245) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-teal {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-teal {
    background-color: rgb(188, 239, 245) !important;
}

.table-view .virtual-table-header-row .cell-bg-purple {
    background-color: rgb(155, 146, 223) !important;
}


.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-purple {
    background-color: rgb(218, 215, 236) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-purple {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-purple {
    background-color: rgb(218, 215, 236) !important;
}


.table-view .virtual-table-header-row .cell-bg-dark-red {
    background-color: rgb(209, 83, 144) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-dark-red {
    background-color: rgb(247, 193, 219) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-dark-red {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-dark-red {
    background-color: rgb(247, 193, 219) !important;
}

.table-view .virtual-table-header-row .cell-bg-dark-green {
    background-color: rgb(64, 145, 64) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-dark-green {
    background-color: rgb(191, 250, 191) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-dark-green {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-dark-green {
    background-color: rgb(191, 250, 191) !important;
}


.table-view .virtual-table-header-row .cell-bg-light-brown {
    background-color: rgb(204, 183, 130) !important;
}



.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-light-brown {
    background-color: rgb(243, 237, 220) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-light-brown {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-light-brown {
    background-color: rgb(243, 237, 220) !important;
}


.table-view .virtual-table-header-row .cell-bg-light-blue {
    background-color: lightblue !important;
}



.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n) .cell-bg-light-blue {
    background-color: rgb(222, 243, 250) !important;
}

.table-view .virtual-table-renderer[data-zebra="true"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline):nth-child(2n+1) .cell-bg-light-blue {
    background-color: white;
}

.table-view .virtual-table-renderer[data-zebra="false"]:not([data-headeronly="true"]) .virtual-table-body-row:not(.vt-baseline) .cell-bg-light-blue {
    background-color: rgb(222, 243, 250) !important;
}


.table-view input.vt-cell-input {
    height: 34px;
    padding: 6px 12px 6px 0px;
    border: none;
    border-radius: 4px;
}

.table-view .tt-menu {
    margin: 0;
}

.table-view .tt-dataset .tt-suggestion {
    word-break: break-all;
}

.table-view ul.addColumnContainer {
    min-width: 300px;
    padding: 15px 10px;
}

.table-view .add-new-column {
    background: whitesmoke;
}

.table-view .vt-highlight {
    animation: vtHighlight 2s infinite;
    color: whitesmoke;
}
.table-view .vt-highlight-static {
    color: whitesmoke;
    background-color: #428bca!important;
}

@keyframes vtHighlight {
    0% {
        background: lightblue;
    }

    50% {
        background: steelblue;
    }

    100% {
        background: blue;
    }
}

.table-view ul.dropdown-menu.header-options {
    left: auto;
    right: 0px;
    z-index: 2000;
}

.table-view ul.dropdown-menu.filter-menu {
    min-width: unset;
    width: 250px;
    padding: 10px;
    height: 300px;
    left: auto;
    right: 0px;
    z-index: 2000;
}

.table-view .dropdown-icon {
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    width: 20px;
}

.table-view .tv-customize {
    /*position: absolute;*/
    /*right: 0px;*/
    /*top: 5px;*/
    /*width: 450px;*/
    /*height: calc(100% - 10px);*/
    /*z-index: 20;*/
    /*background: #fff;*/
    /*box-shadow: 0px 0px 5px #ddd;*/
}

.table-view .tv-customize .column-item {
    cursor: move;
}
.table-view .tv-customize .column-item:hover {
    background-color: #f5f5f5;
}

.d3view-context-menu-container.dt-context-menu {
    width: 300px;
}

.table-view .table-viewer-body[data-hidden-cols-style="off"] .virtual-table-cell[data-visibility="hidden"] {
    width: 0px !important;
    display: none;
}
.table-view .virtual-table-cell[data-visibility="hidden"] {
    width: 20px !important;
}

.table-view .virtual-table-cell[data-visibility="hidden"] * {
    visibility: hidden;
}

.table-view .virtual-table-cell[data-visibility="hidden"] .ui-resizable-handle {
    pointer-events: none;
}

.table-view .tv-groups-container {
    width: 450px;
    height: 300px;
}

.table-view .vitual-table-header-column[data-visibility="hidden"]::before {
    content: '\f070';
    font-family: 'FontAwesome';
    font-weight: bolder;
    margin-left: -9px;
    color: gray;
}

.table-view .table-viewer-body::-webkit-scrollbar {
    display: none;
}

.table-view .tv-records-count-label {
    display: none;
}

.table-view .vt-selection-dropdown {
    width: max(35vw, 550px);
    height: 300px;
}

.table-view .vt-selection-list-renderer {
    height: calc(100% - 70px);
    overflow: auto;
}

.table-view .vt-selected-row-drag-handle {
    padding: 5px;
}

.table-view .vt-selected-row-drag-handle:hover {
    cursor: ns-resize;
}

.table-view li.active.vt-folder-breadcrumb-item {
    pointer-events: none;
}

.table-view .vt-folder-icon {
    /*font-size: larger;*/
}

.table-view .vt-folder-icon {
    color: #44b7e6;
}

.table-view .vt-file-icon {
    color: steelblue;
}

.table-view li.vt-folder-breadcrumb-item:not(.active) {
    font-weight: 600;
}

.table-view .row-highlight * {
    background-color: #007bff!important;
    color: #FFF!important;
}

.table-view .tv-detail-left {
    flex: 0 0 240px;
    border-right: 1px solid #DDD;
}
.table-view .tv-detail-left li[data-id]:not(.active) > a {
    color: unset;
    white-space: normal;
    word-break: break-all;
}
.table-view .tv-detail-left li[data-id] > a {
    text-decoration: none;
}
.table-view .tv-detail-left li[data-id] {
    cursor: pointer;
}
.table-view .tv-detail-left li[data-id]:hover:not(.active) {
    background-color: #f5f5f5;
}
.table-view .tv-detail-right {
    flex: 1 1 auto;
    padding: 15px;
}
.table-view .tv-detail-left li[data-id].ui-selecting {
    background-color: rgb(214, 242, 252, 0.4) !important;
}
.table-view .tv-detail-left li[data-id].ui-selected {
    background-color: rgb(214, 242, 252) !important;
}

.table-view .tv-detail-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.table-view .tl-formbuilder ul.field-items li.field-item > .row {
    padding-left: 0!important;
}

.table-view .tv-item-detail-container.full-h.tab-content .tv-detail-li {
    flex: 0 0 calc(33% - 10px);
    margin: 5px;
    padding: 10px;
}
.table-view .tv-ext-filters .d3view-filters[data-mode="ai"] {
    width: 60%;
}
.table-view .tv-ext-filters .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.table-view .tv-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.table-view .tv-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.table-view .tv-ext-filters input[data-search-input] {
    height: 40px;
}
.table-view .tv-ext-filters .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.table-view .tv-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.table-view .tv-ext-filters .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.table-view .vitual-table-header-column .col-opts {
    display: none;
    position: absolute;
    top: 4px;
    right: 14px;
}

.table-view .vitual-table-header-column:hover .col-opts {
    display: flex!important;
}

/** Added by shashank2104 on 2026-04-23 - R0-3377 - Keep the column options bar visible while any
 *  of its dropdowns (filter, sort, ellipsis) is open so moving the cursor into the dropdown menu
 *  doesn't hide the trigger buttons. **/
.table-view .vitual-table-header-column:has(.col-opts .dropdown.open) .col-opts {
    display: flex!important;
}

.table-view .tv-ext-filters .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.table-view .tv-ext-filters .d3view-filter-button span.clear-search:hover {
    color: red;
}
.table-view .tv-ext-filters .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

.table-view.smallW .table-viewer-header .btn-label {
    display: none;
}

.table-view .tv-thumbnail-container .row-cell-value {
    white-space: normal;
    word-wrap: break-word;
}
.table-view .tv-thumbnail-container .col-md-4.form-input-name {
    font-weight: 600;
}
.table-view .tv-thumbnail-container .col-md-4.form-input-name:after {
    content: ':';
}
.table-view .tv-thumbnail-container .tv-thumbnail-item.ui-selectee.ui-selecting .panel,
.table-view .tv-thumbnail-container .tv-thumbnail-item.ui-selectee.ui-selected .panel {
    border-color: #428bca;
    box-shadow: var(--plugin-box-shadow-lighter);
}



.table-view .d3view-viz[data-charttype="tree"] svg.tree .plot-txt {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.table-view .d3view-viz[data-charttype="tree"] svg.tree .plot-txt .node-info.opened {
    color: red;
}


.table-view .tv-floating-bulk-actions-bar {
    height: 45px;
    width: calc(100% - 20px);
    margin: 0 auto;
    position: absolute;
    top: 0;
    z-index: 200;
    background: #FFF;
    box-shadow: var(--plugin-box-shadow-light);
    padding: 0 20px;
    container-name: tv-bulk-actions-bar;
    container-type: inline-size;
}
@container tv-bulk-actions-bar (max-width: 1000px) {
    .item-label {
        display: none;
    }
}

.table-view .tv-floating-bulk-actions-bar[data-position="bottom"] {
    top: unset;
    left: unset;
    bottom: 30px;
    position: fixed;
    z-index: 1000;
}
.table-view .tv-floating-bulk-actions-bar .pl-ribbon-menu > div {
    display: flex;
    align-items: center;
}
.table-view .tv-floating-bulk-actions-bar .pl-ribbon-menu > div > button {
    flex-grow: 1;
}
.table-view .tv-floating-bulk-actions-bar .pl-ribbon-menu > div > button .d3view-flex-v {
    justify-content: center;
}
.table-view .table-viewer-header {
    container-name: tv-header;
    container-type: inline-size;
}
@container tv-header (max-width: 1500px) {
    .btn-label {
        display: none;
    }
}

.table-view .tv-floating-bulk-actions-bar.overflowing .pl-ribbon-menu > div > button {
    flex-grow: 0;
    margin: 2px;
}
.table-view .tv-floating-bulk-actions-bar.overflowing {
    height: auto;
}

.table-view  span.row-reorder {
    padding: 4px;
    position: relative;
    /* transform: translateY(-50%); */
    z-index: 20;
    cursor: move;
}


.table-view.row_reordering .noreorder {
    cursor: not-allowed;
    background-color: #f5f5f5!important;
    opacity: 0.5;
}

.table-view.row_reordering .select-all-checkboxes {
    display: none;
}
.table-view .cancel_reorder {
    visibility: hidden;
}
.table-view.row_reordering .cancel_reorder {
    visibility: visible!important;
}

.table-view.row_reordering .tvh-left,
.table-view.row_reordering .vt-pagination,
.table-view.row_reordering .tvh-right > *:not(.reorder-buttons) {
    opacity: 0.3;
    pointer-events: none;
}

.table-view.dt-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.table-view.dt-processing {
    position: relative;
}

.table-view.dt-processing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.table-view.dt-processing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: dt-spin 1s linear infinite;
    z-index: 1001;
}

@keyframes dt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.table-view .table-viewer-header.ai-search-active .tv-ext-filters {
    /* display: block; */
    flex: 1 1 auto;
}
.table-view .table-viewer-header.ai-search-active .tv-ext-filters-container {
    display: none;
}

.table-view .filter-dropdown .dropdown-menu[data-type="date"],
.table-view .filter-dropdown .dropdown-menu[data-type="datetime"] {
    width: 30vw!important;
}
.table-view .filter-dropdown .dropdown-menu .daterangepicker {
    position: relative;
    box-shadow: none;
    border: none;
    top: unset !important;
    left: unset !important;
}

.table-view .table-viewer-header .tvh-left {
    max-width: calc(100% - 300px);
    overflow: auto;
    overflow-y: hidden;
}
.table-view .table-viewer-header .tv-header-contents {
    max-width: 100%;
}
.table-view .tv-ext-filters-container .d3view-filters .advanced-filters .filters-container {flex-wrap: nowrap;/* overflow: visible; *//* max-width: calc(100% - 110px); *//* overflow-y: hidden; */}
.table-view .tv-ext-filters-container .d3view-filters div.filters-container > span.filter-editor {
    flex: 0 0 110px;
}
.table-view .tv-ext-filters-container {
    max-width: calc(100% - 70px);
    overflow-x: auto;
    overflow-y: hidden;
}

.table-view .virtual-table-cell.cell-bg-light-blue:active .ui-resizable-e,
.table-view .virtual-table-cell.cell-bg-light-blue:hover .ui-resizable-e {
    background-color: #428bca!important;
}


/* ================================================================
   Issue List View Design Styles - Added by shashank2104 on 10/29/2025 at 09:56 AM - AI-30
   Clean, minimal Issue List View-inspired table design
   ================================================================ */

/* CSS Variables for Issue List View design */
.table-view.tv-design-issue-list-view {
    --tv-border-color: #0B120E24;
    --tv-bg-color: #f8f8f8;
    max-width: 100%;
}

/* Main table - add border radius */
.table-view.tv-design-issue-list-view .virtual-table {
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

/* Remove zebra striping - all cells white background */
.table-view.tv-design-issue-list-view .virtual-table-cell {
    background: #ffffff !important;
    border-right: 1px solid var(--tv-border-color) !important;
}

/* Header columns - light gray background */
.table-view.tv-design-issue-list-view .vitual-table-header-column {
    background: var(--tv-bg-color) !important;
    font-weight: 500 !important;
}

/* Header label - capitalized 14px text */
.table-view.tv-design-issue-list-view .vitual-table-header-column .cell-header {
    text-transform: capitalize !important;
    font-size: 14px !important;
}

/* All borders use Issue List View border color */
.table-view.tv-design-issue-list-view .virtual-table-cell,
.table-view.tv-design-issue-list-view .vitual-table-header-column,
.table-view.tv-design-issue-list-view .virtual-table-body-row {
    border-color: var(--tv-border-color) !important;
}

/* Hide water drop (color picker) button in Issue List View design */
.table-view.tv-design-issue-list-view .vitual-table-header-column .column-color {
    display: none !important;
}

/* Sticky header for Issue List View design - Added by shashank2104 on 10/29/2025 at 12:54 PM - AI-30 - Fixed header that scrolls with table */
.table-view.tv-design-issue-list-view .virtual-table-header-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: var(--tv-bg-color) !important;
}

/** Added by shashank2104 on 02/09/2026 - DVFIV-1920 - Detail view iteration tree (parent_id) */
.tv-detail-list-tree {
    padding-left: 0;
    list-style: none;
}

.tv-detail-list-tree .tv-detail-tree-node {
    padding: 0;
    border: none;
    border-radius: 4px;
    margin-bottom: 2px;
}

.tv-detail-list-tree .tv-detail-tree-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.tv-detail-list-tree .tv-detail-tree-node.active {
    background: none;
    color: unset;
    text-shadow: none;
    filter: unset;
    border: none;
}
.tv-detail-list-tree .tv-detail-tree-node.active > div.tv-detail-tree-row {

    text-shadow: 0 -1px 0 #286090;
    background-image: -webkit-linear-gradient(top,#337ab7 0,#2b669a 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#2b669a 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2b669a));
    background-image: linear-gradient(to bottom,#337ab7 0,#2b669a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
    background-repeat: repeat-x;
    border-color: #2b669a;
    color: #FFF;
}
.tv-detail-list-tree .tv-detail-tree-node.active > div.tv-detail-tree-row .tv-detail-tree-icon {
    color: #FFF;
}

.tv-detail-list-tree .tv-detail-tree-node[data-level="0"] > .tv-detail-tree-row {
    padding-left: 10px;
}

.tv-detail-list-tree .tv-detail-tree-node[data-level="1"] > .tv-detail-tree-row {
    padding-left: 28px;
}

.tv-detail-list-tree .tv-detail-tree-node[data-level="2"] > .tv-detail-tree-row {
    padding-left: 46px;
}

.tv-detail-list-tree .tv-detail-tree-node[data-level="3"] > .tv-detail-tree-row {
    padding-left: 64px;
}

.tv-detail-list-tree .tv-detail-tree-node[data-level="4"] > .tv-detail-tree-row {
    padding-left: 82px;
}

.tv-detail-list-tree .tv-detail-tree-row:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.tv-detail-list-tree .tv-detail-tree-node.ui-selected > .tv-detail-tree-row {
    background-color: rgba(0, 123, 255, 0.1);
}

.tv-detail-list-tree .tv-detail-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    flex-shrink: 0;
    border-radius: 3px;
    transition: transform 0.2s ease, background-color 0.15s ease;
}

.tv-detail-list-tree .tv-detail-tree-toggle:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.tv-detail-list-tree .tv-detail-tree-toggle-placeholder {
    pointer-events: none;
}

.tv-detail-list-tree .tv-detail-tree-chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.tv-detail-list-tree .tv-detail-tree-chevron-expanded {
    transform: rotate(90deg);
}

.tv-detail-list-tree .tv-detail-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 6px;
    flex-shrink: 0;
    color: #6c757d;
}

/* ================================================================
   Modern Card Design Styles
   Card-styled table rows with hover effects, animations, and
   a modern filter bar UX.
   ================================================================ */

/* CSS Variables for Modern Card design */
.table-view.tv-design-modern-card {
    --mc-border: #e2e8f0;
    --mc-radius: 8px;
    --mc-accent: #2c5282;
    --mc-bg-subtle: #f7fafc;
    --mc-text-primary: #2d3748;
    --mc-text-muted: #718096;
    max-width: 100%;
}

/* Fix jQuery UI selectable cursor — override the upward arrow */
.table-view.tv-design-modern-card .virtual-table-renderer.ui-selectable {
    cursor: auto;
}

/* Table container */
.table-view.tv-design-modern-card .virtual-table {
    border-radius: var(--mc-radius);
    overflow: hidden;
    border: none;
}

/* Card-styled rows */
.table-view.tv-design-modern-card .virtual-table-body-row {
    background: #fff;
    border: none;
    border-radius: var(--mc-radius);
    margin: 6px 8px;
    animation: mcFadeIn 0.25s ease both;
}
.table-view.tv-design-modern-card .virtual-table-body-row:hover {
    cursor: pointer;
}
.table-view.tv-design-modern-card .virtual-table-body-row:not(.ui-selected):not(.row-selected):hover {
    background: rgba(99, 102, 241, 0.07);
}

/* Clean cells — no internal borders */
.table-view.tv-design-modern-card .virtual-table-cell {
    background: transparent !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Refined header columns */
.table-view.tv-design-modern-card .vitual-table-header-column {
    background: var(--mc-bg-subtle) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mc-text-muted);
}

/* Sticky header row */
.table-view.tv-design-modern-card .virtual-table-header-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 101 !important;
    background-color: var(--mc-bg-subtle) !important;
    border-bottom: none;
}

/* Header label — clean capitalized text */
.table-view.tv-design-modern-card .vitual-table-header-column .cell-header {
    text-transform: capitalize !important;
    font-size: 12px !important;
}

/* All borders use Modern Card border color */
.table-view.tv-design-modern-card .virtual-table-cell,
.table-view.tv-design-modern-card .vitual-table-header-column,
.table-view.tv-design-modern-card .virtual-table-body-row {
    border-color: var(--mc-border) !important;
}

/* Hide water drop (color picker) button */
.table-view.tv-design-modern-card .vitual-table-header-column .column-color {
    display: none !important;
}

/* Enhanced typography — bolder names */
.table-view.tv-design-modern-card .sim-row,
.table-view.tv-design-modern-card .sg-cell-title a {
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-text-primary);
}

/* Pill-shaped status badges */
.table-view.tv-design-modern-card .label {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Selection highlight */
.table-view.tv-design-modern-card .virtual-table-body-row.row-selected {
    border-color: var(--mc-accent) !important;
    box-shadow: inset 3px 0 0 var(--mc-accent);
}

/* --- Animations --- */

@keyframes mcFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered fade-in for first 10 visible rows */
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(1)  { animation-delay: 0.02s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(2)  { animation-delay: 0.04s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(3)  { animation-delay: 0.06s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(4)  { animation-delay: 0.08s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(5)  { animation-delay: 0.10s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(6)  { animation-delay: 0.12s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(7)  { animation-delay: 0.14s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(8)  { animation-delay: 0.16s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(9)  { animation-delay: 0.18s; }
.table-view.tv-design-modern-card .virtual-table-body-row:nth-child(10) { animation-delay: 0.20s; }

/* --- Modern Styling for Existing d3view-filters Component --- */

/* Filter button row — clean rounded input group */
.table-view.tv-design-modern-card .d3view-filter-button {
    border: 1px solid var(--mc-border, #e2e8f0);
    border-radius: 8px;
    overflow: visible;
    background: var(--mc-bg-subtle, #f7fafc);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.table-view.tv-design-modern-card .d3view-filter-button:focus-within {
    border-color: var(--mc-accent, #2c5282);
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.08);
}

/* Filter icon + label in the button */
.table-view.tv-design-modern-card .d3view-filter-button .flex-l {
    background: transparent;
    border: none;
    color: var(--mc-text-muted, #718096);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
}

/* Search input inside filter button */
.table-view.tv-design-modern-card .d3view-filter-button input.form-control {
    border: none;
    background: transparent;
    font-size: 13px;
    padding: 6px 10px;
    box-shadow: none;
    color: var(--mc-text-primary, #2d3748);
}

.table-view.tv-design-modern-card .d3view-filter-button input.form-control:focus {
    box-shadow: none;
    outline: none;
}

/* Toggle filter button — subtle when closed, dark accent when open */
.table-view.tv-design-modern-card .d3view-filter-button .toggle-fc {
    border: none;
    border-left: 1px solid var(--mc-border, #e2e8f0);
    border-radius: 0;
    background: var(--mc-bg-subtle, #f7fafc);
    color: var(--mc-text-muted, #718096);
    padding: 6px 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.table-view.tv-design-modern-card .d3view-filter-button .toggle-fc:hover {
    background: #ebf4ff;
    color: var(--mc-accent, #2c5282);
}

/* Active state (btn-primary) — dark background so white icon is visible */
.table-view.tv-design-modern-card .d3view-filter-button .toggle-fc.btn-primary {
    background: var(--mc-accent, #2c5282) !important;
    color: #fff !important;
    border-color: var(--mc-accent, #2c5282) !important;
}

/* Filter badge */
.table-view.tv-design-modern-card .d3view-filter-button .filters-badge {
    background: var(--mc-accent, #2c5282);
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
}

/* Advanced filters — no container box, just inline flow next to search */
.table-view.tv-design-modern-card .tv-ext-filters-container {
    overflow: visible !important;
}

.table-view.tv-design-modern-card .advanced-filters {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    box-shadow: none;
}

.table-view.tv-design-modern-card .advanced-filters:focus-within {
    border-color: transparent;
}

/* Hide the filters help icon inline */
.table-view.tv-design-modern-card .advanced-filters .filters-help-icon {
    display: none;
}

/* Filters container — inline flex, no wrapping chrome */
.table-view.tv-design-modern-card .advanced-filters .filters-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Filter tags — float-out animation from left */
@keyframes mcFilterFloatOut {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Filter tags — modern pill-shaped chips */
.table-view.tv-design-modern-card .filter-tag {
    margin: 2px 3px;
    animation: mcFilterFloatOut 0.3s ease both;
}

/* Staggered animation for filter tags */
.table-view.tv-design-modern-card .filter-tag:nth-child(1) { animation-delay: 0.03s; }
.table-view.tv-design-modern-card .filter-tag:nth-child(2) { animation-delay: 0.08s; }
.table-view.tv-design-modern-card .filter-tag:nth-child(3) { animation-delay: 0.13s; }
.table-view.tv-design-modern-card .filter-tag:nth-child(4) { animation-delay: 0.18s; }
.table-view.tv-design-modern-card .filter-tag:nth-child(5) { animation-delay: 0.23s; }
.table-view.tv-design-modern-card .filter-tag:nth-child(6) { animation-delay: 0.28s; }

/* "Add Filter" button also floats out */
.table-view.tv-design-modern-card .filter-editor {
    animation: mcFilterFloatOut 0.3s ease both;
    animation-delay: 0.15s;
}

.table-view.tv-design-modern-card .filter-tag .label-filter-selected {
    background: #ebf4ff;
    color: var(--mc-accent, #2c5282);
    border: 1px solid rgba(44, 82, 130, 0.15);
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.table-view.tv-design-modern-card .filter-tag .label-filter-selected:hover {
    background: #dbe8fc;
    border-color: rgba(44, 82, 130, 0.3);
}

/* Filter icon inside tag */
.table-view.tv-design-modern-card .filter-tag .filter-icon {
    font-size: 10px;
    opacity: 0.6;
}

/* Filter value text */
.table-view.tv-design-modern-card .filter-tag .filter-value {
    font-weight: 600;
    font-size: 13px;
    color: var(--mc-text-primary, #2d3748);
}

/* Remove filter X button */
.table-view.tv-design-modern-card .filter-tag .remove-filter-tag {
    opacity: 0.5;
    transition: opacity 0.15s ease;
    font-size: 11px;
    margin-left: 3px;
}

.table-view.tv-design-modern-card .filter-tag .remove-filter-tag:hover {
    opacity: 1;
}

/* Add Filter button */
.table-view.tv-design-modern-card .add-new-filter {
    border: 1px dashed var(--mc-border, #e2e8f0);
    border-radius: 16px;
    background: transparent;
    color: var(--mc-text-muted, #718096);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    transition: all 0.15s ease;
}

.table-view.tv-design-modern-card .add-new-filter:hover {
    border-color: var(--mc-accent, #2c5282);
    color: var(--mc-accent, #2c5282);
    background: #ebf4ff;
}

/* Filters help icon */
.table-view.tv-design-modern-card .filters-help-icon {
    color: var(--mc-text-muted, #718096);
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.table-view.tv-design-modern-card .filters-help-icon:hover {
    opacity: 1;
}

/* Clear search X icon */
.table-view.tv-design-modern-card .d3view-filter-button .clear-search {
    color: var(--mc-text-muted, #718096);
    font-size: 12px;
}

.tv-detail-list-tree .tv-detail-tree-node[data-has-children="true"] .tv-detail-tree-icon {
    color: #0d6efd;
}

.tv-detail-list-tree .tv-detail-tree-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-detail-list-tree .tv-detail-tree-content .row-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tv-detail-list-tree .tv-detail-tree-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.2s ease, opacity 0.15s ease;
}

.tv-detail-list-tree .tv-detail-tree-children.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: none;
}

/* --- Modern Card Design: Header Modernization --- */

/* Inner table-viewer-header */
.table-view.tv-design-modern-card .table-viewer-header {
    box-shadow: none;
    background: #fff;
    border: none;
    border-radius: var(--mc-radius, 8px);
    /* margin: 0 8px 8px 8px; */
    padding: 10px 12px;
    height: auto !important;
    min-height: 44px;
    gap: 8px;
    overflow: visible;
}

/* Allow filter badge to overflow above tvh-left */
.table-view.tv-design-modern-card .table-viewer-header .tvh-left {
    overflow: visible;
}

/* Header buttons: pill-shaped, consistent with modern card aesthetic */
.table-view.tv-design-modern-card .table-viewer-header .btn {
    border-radius: 6px;
    border: 1px solid #c1cad6;
    background: var(--mc-bg-subtle, #f7fafc);
    color: #4a5568;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    transition: all 0.15s ease;
    box-shadow: none;
}

.table-view.tv-design-modern-card .table-viewer-header .btn:hover {
    border-color: var(--mc-accent, #2c5282);
    color: var(--mc-accent, #2c5282);
    background: #ebf4ff;
}

/* Dropdown-toggle buttons: preserve height and ensure dropdown works */
.table-view.tv-design-modern-card .table-viewer-header .btn-group.dropdown {
    display: inline-flex;
    vertical-align: middle;
}

.table-view.tv-design-modern-card .table-viewer-header .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    line-height: normal;
}

.table-view.tv-design-modern-card .table-viewer-header .dropdown-toggle .fa-caret-down {
    font-size: 10px;
    margin-left: 2px;
}

/* Total count label */
.table-view.tv-design-modern-card .table-viewer-header .total-count {
    font-size: 13px;
    color: var(--mc-text-muted, #718096);
    font-weight: 500;
}

.table-view.tv-design-modern-card .table-viewer-header .total-count b {
    color: var(--mc-text-primary, #2d3748);
}

/* View type switcher — tv-views-bg is just a transparent wrapper */
.table-view.tv-design-modern-card .table-viewer-header .tv-views-bg {
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
}

.table-view.tv-design-modern-card .table-viewer-header .tv-views-bg .btn.active {
    background: var(--mc-accent, #2c5282);
    color: #fff;
}

/* Right-side icon buttons (view, export, ellipsis) — uniform sizing */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .dropdown > .btn.dropdown-toggle,
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .tv-views-bg .dropdown > .btn.dropdown-toggle {
    width: 34px;
    height: 34px !important; /* Override inline style="height: 30px" on view button */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    border-radius: 6px !important; /* Override Bootstrap .btn-group border-radius reset */
}

/* Remove mr5 margins from icons inside these compact buttons */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .dropdown > .btn .mr5,
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .tv-views-bg .dropdown > .btn .mr5 {
    margin-right: 0 !important;
}

/* Remove outer mr5 class on export button itself */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right > .dropdown > .btn.mr5 {
    margin-right: 0 !important;
}

/* Remove ml5/mr5 on ellipsis dropdown wrapper */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right > .dropdown.ml5 {
    margin-left: 0 !important;
}
.table-view.tv-design-modern-card .table-viewer-header .tvh-right > .dropdown.mr5 {
    margin-right: 0 !important;
}

/* Hide dropdown caret arrows inside compact icon buttons */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .dropdown > .btn.dropdown-toggle > .fa-caret-down,
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .tv-views-bg .dropdown > .btn.dropdown-toggle > .fa-caret-down {
    display: none;
}

/* Hide sr-only labels and empty .btn-label spans */
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .dropdown > .btn .sr-only,
.table-view.tv-design-modern-card .table-viewer-header .tvh-right .dropdown > .btn .btn-label:empty {
    display: none;
}

/* Dropdown menus within header */
.table-view.tv-design-modern-card .table-viewer-header .dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--mc-border, #e2e8f0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px;
}

.table-view.tv-design-modern-card .table-viewer-header .dropdown-menu > li > a {
    border-radius: 4px;
    font-size: 13px;
    padding: 6px 12px;
    transition: background 0.1s ease;
}

.table-view.tv-design-modern-card .table-viewer-header .dropdown-menu > li > a:hover {
    background: var(--mc-bg-subtle, #f7fafc);
}

/* Filter container within header */
.table-view.tv-design-modern-card .table-viewer-header .vt-filter-container {
    border-top: 1px solid var(--mc-border, #e2e8f0);
    margin-top: 4px;
    padding-top: 6px;
}

/* External filters area */
.table-view.tv-design-modern-card .table-viewer-header .tv-ext-filters {
    background: transparent;
}

/* Badge styling */
.table-view.tv-design-modern-card .table-viewer-header .badge {
    border-radius: 10px;
    font-size: 11px;
    padding: 2px 7px;
    font-weight: 600;
}

/* Reorder buttons */
.table-view.tv-design-modern-card .table-viewer-header .reorder-buttons .btn {
    border-radius: 6px;
}

/* tvh-left and tvh-right alignment */
.table-view.tv-design-modern-card .table-viewer-header .tvh-left {
    gap: 8px;
}

.table-view.tv-design-modern-card .table-viewer-header .tvh-right {
    gap: 4px;
}

/* --- Outer panel-sub-heading row (record count + pagination + refresh) --- */
/* Scoped via mc-parent-modern-card class propagated to .panel-body */

.mc-parent-modern-card > .panel-sub-heading {
    background: #dce7f5;
    border: 1px solid #b8cce4;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: none;
}

.mc-parent-modern-card > .panel-sub-heading .number-of-records {
    font-size: 1.1em !important;
    font-weight: 500 !important;
    color: #2a5a8e;
}

.mc-parent-modern-card > .panel-sub-heading .number-of-records strong {
    color: #1a3d6e;
    font-weight: 700;
}

.mc-parent-modern-card > .panel-sub-heading .refresh-widget {
    border-radius: 6px;
    border: 1px solid #b8cce4;
    background: #fff;
    color: #337ab7;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    transition: all 0.15s ease;
}

.mc-parent-modern-card > .panel-sub-heading .refresh-widget:hover {
    border-color: #337ab7;
    color: #1a5a8e;
    background: #ebf2fa;
}

/* Pagination controls within panel-sub-heading */
.mc-parent-modern-card > .panel-sub-heading .panel-pagination .btn {
    border-radius: 6px;
    border: 1px solid #b8cce4;
    background: #fff;
    color: #337ab7;
    font-size: 12px;
    padding: 4px 8px;
    transition: all 0.15s ease;
}

.mc-parent-modern-card > .panel-sub-heading .panel-pagination .btn:hover {
    border-color: #337ab7;
    color: #1a5a8e;
    background: #ebf2fa;
}

.mc-parent-modern-card > .panel-sub-heading .panel-pagination input {
    border-radius: 6px;
    border: 1px solid #b8cce4;
    background: #fff;
    color: #2a5a8e;
    font-size: 12px;
    padding: 4px 8px;
}

/* Hide duplicate footer pagination row (from dashboard.tpl) — header already has pagination */
.mc-parent-modern-card > .row:not(.panel-sub-heading) {
    display: none;
}

/* ───────────────────────────────────────────────────────────────
   R0-3474 — Modern card view: Set Background Color per column
   The modern-card view sets
     .table-view.tv-design-modern-card .virtual-table-cell         { background: transparent !important; }
     .table-view.tv-design-modern-card .vitual-table-header-column { background: var(--mc-bg-subtle) !important; }
   with !important, so the generic .cell-bg-* rules above couldn't
   win. Mirror each color under the modern-card scope so the
   chosen column color paints in both classic and modern views.
   ─────────────────────────────────────────────────────────────── */
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-dark-pink,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-dark-pink {
    background-color: rgb(228, 131, 252) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-blue,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-blue {
    background-color: rgb(115, 187, 250) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-green,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-green {
    background-color: rgb(149, 233, 194) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-yellow,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-yellow {
    background-color: rgb(240, 221, 139) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-orange,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-orange {
    background-color: rgb(245, 186, 176) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-gray,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-gray {
    background-color: lightgray !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-teal,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-teal {
    background-color: rgb(102, 208, 219) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-purple,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-purple {
    background-color: rgb(155, 146, 223) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-dark-red,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-dark-red {
    background-color: rgb(209, 83, 144) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-dark-green,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-dark-green {
    background-color: rgb(64, 145, 64) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-light-brown,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-light-brown {
    background-color: rgb(204, 183, 130) !important;
}
.table-view.tv-design-modern-card .virtual-table-header-row .cell-bg-light-blue,
.table-view.tv-design-modern-card .virtual-table-body-row .cell-bg-light-blue {
    background-color: lightblue !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   tv-modern — OPT-IN enterprise "Clean Lines" table skin (Added by shashank2104
   on 2026-07-02). Enabled via `opts.modernTheme` (adds the `tv-modern` class to
   the root .table-view, which is ALWAYS also .tv-design-modern-card). A dense
   hairline data-grid that OVERRIDES the default card look. Scoped entirely under
   .table-view.tv-modern — default tables are untouched. Tokens alias the app's
   --d3v-* foundation with self-contained fallbacks so it renders anywhere.
   ══════════════════════════════════════════════════════════════════════════ */
.table-view.tv-modern {
    --tvm-surface:        var(--d3v-bg-primary, #ffffff);
    --tvm-surface-2:      var(--d3v-bg-secondary, #f6f8fb);
    --tvm-surface-3:      var(--d3v-bg-tertiary, #eef2f7);
    --tvm-border:         var(--d3v-border-subtle, #e4e9f0);
    --tvm-border-strong:  var(--d3v-border-default, #d3dae4);
    --tvm-text:           var(--d3v-text-primary, #0f172a);
    --tvm-text-2:         var(--d3v-text-secondary, #475569);
    --tvm-text-3:         var(--d3v-text-tertiary, #8a97a8);
    --tvm-accent:         var(--d3v-accent-primary, #2563eb);
    --tvm-accent-bg:      var(--d3v-accent-subtle, rgba(37, 99, 235, .08));
    --tvm-accent-bg-2:    var(--d3v-accent-muted, rgba(37, 99, 235, .15));
    --tvm-bad:            var(--d3v-status-danger, #e5484d);
    --tvm-r-md:           var(--d3v-r-md, 9px);
    --tvm-mono:           'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --tvm-t:              var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
    --tvm-sh-sm:          var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .06));
}

/* ── Toolbar: flat, transparent (the panel header already frames it) ── */
.table-view.tv-modern .table-viewer-header {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Outer surface */
.table-view.tv-modern.tv-design-modern-card .virtual-table {
    border: none !important;
    border-radius: var(--tvm-r-md);
    background: var(--tvm-surface);
}

/* Dense rows align with the virtual list's slot height. */
.table-view.tv-modern.tv-design-modern-card .virtual-table-body-row {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--tvm-surface);
    animation: none !important;
    transform: none !important;
    transition: none;
}

/* ── Cells ── */
.table-view.tv-modern.tv-design-modern-card .vitual-table-body-column {
    transition: background-color var(--tvm-t);
}
.table-view.tv-modern .cell-value {
    font-size: 12.5px;
    color: var(--tvm-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
/* right-aligned monospace feel for numeric-looking cells is opt-in per consumer;
   keep default left align but always tabular so digits line up */

/* Sticky header */
.table-view.tv-modern.tv-design-modern-card .virtual-table-header-row {
    background: var(--tvm-surface) !important;
    border-bottom: none !important;
    box-shadow: none;
}
.table-view.tv-modern.tv-design-modern-card .vitual-table-header-column {
    background: var(--tvm-surface) !important;
    border-bottom: none !important;
}
.table-view.tv-modern.tv-design-modern-card .vitual-table-header-column .cell-header {
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .055em !important;
    color: var(--tvm-text-2) !important;
}
.table-view.tv-modern .th-header-icon {
    color: var(--tvm-text-3);
    font-size: 10px;
}
.table-view.tv-modern .pin-icon {
    color: var(--tvm-accent);
}
/* header action buttons reveal on hover, quiet by default */
.table-view.tv-modern .vitual-table-header-column .col-opts {
    opacity: 0;
    transition: opacity var(--tvm-t);
}
.table-view.tv-modern .vitual-table-header-column:hover .col-opts {
    opacity: 1;
}
/* # / index column: quiet the numeric type-icon + pin badge (they read as noisy
   "sort/pin always on" on the self-evident index column). Reveal on hover, same
   as the action buttons. Scoped to the id column so other headers keep their
   type icon. Added by shashank2104 on 2026-07-05 - R2026-31. */
.table-view.tv-modern .vitual-table-header-column[data-id="id"] .th-header-icon {
    opacity: 0;
    transition: opacity var(--tvm-t);
}
.table-view.tv-modern .vitual-table-header-column[data-id="id"]:hover .th-header-icon {
    opacity: 1;
}

/* ── Pinned column: quiet index look + clean divider shadow ── */
.table-view.tv-modern.tv-design-modern-card .vt-pinned-column-cell {
    background: var(--tvm-surface) !important;
}
.table-view.tv-modern.tv-design-modern-card .virtual-table-body-row:not(.ui-selected):not(.row-selected):hover .vt-pinned-column-cell.cell-bg-none {
    background: linear-gradient(rgba(99, 102, 241, 0.07), rgba(99, 102, 241, 0.07)), var(--tvm-surface) !important;
}
.table-view.tv-modern.tv-design-modern-card .vt-pinned-column-cell.vt-last-pinned-cell {
    box-shadow: 1px 0 0 var(--tvm-border), 6px 0 8px -6px rgba(15, 23, 42, .12);
}
.table-view.tv-modern .virtual-table-body-row .vt-pinned-column-cell .cell-value {
    color: var(--tvm-text-3);
    font-family: var(--tvm-mono);
    font-size: 11px;
}

/* Selection fill and left accent bar. */
.table-view.tv-modern.tv-design-modern-card .virtual-table-body-row.row-selected {
    border: 0 !important;
    box-shadow: inset 3px 0 0 var(--tvm-accent) !important;
}
.table-view.tv-modern.tv-design-modern-card .virtual-table-body-row.row-selected .virtual-table-cell {
    background: var(--tvm-accent-bg-2) !important;
}

/* ── Curve cells (IsACurveValue fa-chart-line) — accent the inline icon ── */
.table-view.tv-modern .virtual-table-body-row .fa-chart-line {
    color: var(--tvm-accent);
}

/* ── Skeleton shimmer: any lazy cell not yet rendered reads as an intentional
      loading placeholder instead of broken white (belt-and-suspenders on top of
      the synchronous prime fix) ── */
.table-view.tv-modern .virtual-table-cell:not([data-was-processed]) {
    position: relative;
    overflow: hidden;
}
.table-view.tv-modern .virtual-table-cell:not([data-was-processed])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 9px;
    transform: translateY(-50%);
    border-radius: 5px;
    background: var(--tvm-surface-3);
    /* opacity pulse is GPU-composited (no per-frame repaint), so many loading cells
       stay cheap while the IntersectionObserver fills them in. */
    animation: tvm-shimmer 1.2s ease-in-out infinite;
    will-change: opacity;
}
@keyframes tvm-shimmer {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* ── Slim, styled scrollbars ── */
.table-view.tv-modern .virtual-table-renderer {
    scrollbar-width: thin;
    scrollbar-color: var(--tvm-border-strong) transparent;
}
.table-view.tv-modern .virtual-table-renderer::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.table-view.tv-modern .virtual-table-renderer::-webkit-scrollbar-track {
    background: transparent;
}
.table-view.tv-modern .virtual-table-renderer::-webkit-scrollbar-thumb {
    background: var(--tvm-border-strong);
    border-radius: 999px;
    border: 3px solid var(--tvm-surface);
    background-clip: padding-box;
}
.table-view.tv-modern .virtual-table-renderer::-webkit-scrollbar-thumb:hover {
    background: var(--tvm-text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   tv-modern — CLEAN column colour-coding (Added by shashank2104 on 2026-07-02).
   The default cell-bg-* classes paint a saturated fill on EVERY cell of a
   coloured column (the schema even sets columnColorType:'header', but the base
   CSS ignores it) — with editable input cells on top it reads as heavy blocks.
   In tv-modern the colour identity moves to the HEADER (soft tint + a 2px
   coloured underline) and the body cells go clean, so column colour-coding is
   fully preserved without the clutter. Scoped to tv-modern only.
   ══════════════════════════════════════════════════════════════════════════ */

/* Body: neutralise every coloured column back to the clean surface so hover /
   selection / zebra read normally. High specificity to beat the base zebra
   nth-child !important rules. */
.table-view.tv-modern.tv-design-modern-card .virtual-table-renderer .virtual-table-body-row.virtual-table-body-row .virtual-table-cell.virtual-table-cell[class*="cell-bg-"]:not(.cell-bg-none) {
    background-color: transparent !important;
}

/* Header: replace the saturated fill with a whisper tint + a crisp 2px coloured
   underline (tab-indicator style) that carries the column's colour identity.
   Every palette colour is covered explicitly, so each rule out-specifies the base
   saturated fill on its own — clean, unmistakable colour-coding, zero body clutter. */
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-light-blue  { background-color: rgba(96, 165, 214, .10) !important; box-shadow: inset 0 -2px 0 rgb(96, 165, 214) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-blue        { background-color: rgba(59, 130, 246, .10) !important; box-shadow: inset 0 -2px 0 rgb(59, 130, 246) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-teal        { background-color: rgba(20, 166, 180, .10) !important; box-shadow: inset 0 -2px 0 rgb(20, 166, 180) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-green       { background-color: rgba(22, 163, 110, .10) !important; box-shadow: inset 0 -2px 0 rgb(22, 163, 110) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-dark-green  { background-color: rgba(21, 128, 61, .10)  !important; box-shadow: inset 0 -2px 0 rgb(21, 128, 61)  !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-yellow      { background-color: rgba(202, 138, 4, .12)  !important; box-shadow: inset 0 -2px 0 rgb(202, 138, 4)  !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-orange      { background-color: rgba(217, 119, 66, .10) !important; box-shadow: inset 0 -2px 0 rgb(217, 119, 66) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-dark-pink   { background-color: rgba(192, 86, 212, .10) !important; box-shadow: inset 0 -2px 0 rgb(192, 86, 212) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-purple      { background-color: rgba(124, 92, 246, .10) !important; box-shadow: inset 0 -2px 0 rgb(124, 92, 246) !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-gray        { background-color: rgba(100, 116, 139, .10)!important; box-shadow: inset 0 -2px 0 rgb(100, 116, 139)!important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-dark-red    { background-color: rgba(214, 64, 84, .10)  !important; box-shadow: inset 0 -2px 0 rgb(214, 64, 84)  !important; }
.table-view.tv-modern .virtual-table-header-row .vitual-table-header-column.cell-bg-light-brown { background-color: rgba(150, 120, 70, .10) !important; box-shadow: inset 0 -2px 0 rgb(150, 120, 70) !important; }

/* Editable cells: blend into the clean grid — no white-box-on-tint clutter.
   Border appears only on hover/focus with a soft accent ring. */
.table-view.tv-modern input.vt-cell-input,
.table-view.tv-modern .typeahead input.vt-cell-input {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px;
    height: 26px;
    padding: 0 8px !important;
    color: var(--tvm-text);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    box-shadow: none !important;
    transition: border-color var(--tvm-t), background-color var(--tvm-t), box-shadow var(--tvm-t);
}
.table-view.tv-modern input.vt-cell-input:hover {
    border-color: var(--tvm-border-strong) !important;
    background: var(--tvm-surface) !important;
}
.table-view.tv-modern input.vt-cell-input:focus {
    border-color: var(--tvm-accent) !important;
    background: var(--tvm-surface) !important;
    box-shadow: 0 0 0 3px var(--tvm-accent-bg) !important;
    outline: none !important;
}

/* ── Anchored-split pane titles (R2026-38) ─────────────────────────────────
   Added by shashank2104 on 2026-07-15 - R2026-38 - Captions for the two halves of the anchored split,
   rendered only when a caller passes opts.splitPaneTitles ({left, right}). The split already tells you
   the columns are two different kinds of thing; the title says which kind.

   These sit in the table header's own left region (.tvh-left), which is empty in a split table - every
   control lives in .tvh-right - so they cost no vertical space at all. An earlier cut put them in a band
   above the panes and that band was pure added chrome.

   Deliberately quiet: this labels a REGION, so it must not compete with the real column headers below it.
   Base styling is neutral for the default skin; the tv-modern block re-tints through that skin's tokens.
   The left width is set from JS (syncSplitTitleWidths) to track the pinned block + resizer. */
/* The captions must span the FULL header width to line up with the panes, but .tvh-left only gets what
   .tvh-right leaves behind - so as a flex child the left caption would push the right one to zero width
   the moment the pinned block grew past .tvh-left. They are therefore taken out of the flow and laid
   across the whole header; `right` is set from JS to stop at .tvh-right, so a wide split truncates the
   caption instead of sliding it under the buttons. pointer-events:none keeps them from stealing clicks.

   Both rules below are gated on .tv-has-split-titles (added from JS only when a caller passes
   splitPaneTitles) rather than applying to .tv-header-contents at large. Unscoped they would have
   touched EVERY table: `position:relative` re-parents any absolutely-positioned descendant, and
   `position:relative` + `z-index` on .tvh-right forms a stacking context, which is enough to re-order
   that header's dropdown menus against the rest of the page. No caller should pay for a feature it
   never asked for. */
.tv-header-contents.tv-has-split-titles {
    position: relative;
}
.tv-header-contents.tv-has-split-titles > .tvh-right {
    position: relative;
    z-index: 1;
}
.tv-split-titles {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 0;
}
.tv-split-titles .tv-pane-title {
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a97a8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    user-select: none;
}
.tv-split-titles .tv-pane-title--left {
    flex: 0 0 auto;
    padding-left: 12px;
    /* width comes from syncSplitTitleWidths */
}
.tv-split-titles .tv-pane-title--right {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 12px;
}

.table-view.tv-modern .tv-split-titles .tv-pane-title {
    color: var(--tvm-text-3);
}

/* Collection controls share the table's existing toolbar. */
.table-view.tv-unified-toolbar {
    container: collection-toolbar / inline-size;
    overflow: visible;
    gap: 0;
}
.table-view.tv-unified-toolbar .table-viewer-header {
    padding: 8px 0;
    min-height: 56px;
}
.table-view.tv-unified-toolbar .tv-header-contents {
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
}
.table-view.tv-unified-toolbar .tvh-left {
    order: 1;
    flex: 1 1 0 !important;
    min-width: 0;
    gap: 8px !important;
}
.table-view.tv-unified-toolbar .tv-ext-filters {
    margin: 0 !important;
    flex: 0 1 320px;
    min-width: 210px;
}
.table-view.tv-unified-toolbar .d3view-filter-button span.clear-search {
    right: 119px;
}
.table-view.tv-unified-toolbar .d3view-filter-button button.filter-picker-toggle {
    position: absolute;
    z-index: 4;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 0 6px 6px 0;
    background: #f7f8fc;
    color: #52638a;
}
.table-view.tv-unified-toolbar .d3view-filter-button button.filter-picker-toggle[aria-expanded="true"] {
    background: #eeedff;
    color: #4f46a5;
}
.table-view.tv-unified-toolbar .filter-active-count {
    border-radius: 9px;
    background: #e6eaf4;
    min-width: 18px;
    padding: 1px 4px;
    font-size: 11px;
}
.table-view.tv-unified-toolbar .d3view-filter-button {
    width: 100%;
    min-width: 0;
    height: 36px;
}
.table-view.tv-unified-toolbar .d3view-filter-button input.form-control {
    min-width: 0;
    height: 34px;
    width: 100%;
    padding-right: 138px;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar,
.table-view.tv-unified-toolbar .tv-collection-toolbar > .col-md-12,
.table-view.tv-unified-toolbar .tv-collection-toolbar > .col-md-12 > .col-md-4:not(.panel-pagination),
.table-view.tv-unified-toolbar .tv-collection-toolbar > .col-md-12 > .col-md-4:last-child > span {
    display: contents;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar::before,
.table-view.tv-unified-toolbar .tv-collection-toolbar::after {
    display: none;
}
.table-view.tv-unified-toolbar .number-of-records {
    order: 2;
    white-space: nowrap;
    color: #718096;
}
.table-view.tv-unified-toolbar .number-of-records[data-record-range] {
    font-size: 0 !important;
}
.table-view.tv-unified-toolbar .number-of-records[data-record-range]::before {
    content: attr(data-record-range);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.table-view.tv-unified-toolbar .tv-page-size {
    order: 3;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: 106px;
    height: 32px;
    padding: 0 4px;
    background: transparent;
    border: none;
    color: #718096;
    font-size: 12px;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination {
    order: 4;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination > span:first-child {
    position: absolute;
    right: 0;
    top: 100%;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination .form-group,
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination .input-group,
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination .input-group-btn {
    display: flex;
    align-items: center;
    float: none !important;
    width: auto;
    margin: 0;
    gap: 3px;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination .btn,
.table-view.tv-unified-toolbar .table-viewer-header .refresh-widget {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    background: transparent;
    border-color: transparent;
    color: #718096;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .panel-pagination .btn .fa,
.table-view.tv-unified-toolbar .refresh-widget .fa {
    font-size: 14px;
}
.table-view.tv-unified-toolbar .tv-collection-toolbar .target-page-num {
    width: 36px !important;
    height: 30px !important;
    padding: 0 3px;
    border: 1px solid var(--mc-border);
    border-radius: 5px !important;
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 400 !important;
    box-shadow: none;
    -moz-appearance: textfield;
}
.table-view.tv-unified-toolbar .target-page-num::-webkit-inner-spin-button,
.table-view.tv-unified-toolbar .target-page-num::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.table-view.tv-unified-toolbar .maxPageIndicator {
    width: auto;
    padding: 0 4px;
    font-size: 12px;
    color: #718096;
    background: transparent;
    border: none;
    white-space: nowrap;
}
.table-view.tv-unified-toolbar .maxPageIndicator::before {
    content: 'of ';
}
.table-view.tv-unified-toolbar .refresh-widget {
    order: 5;
    flex: 0 0 auto;
}
.table-view.tv-unified-toolbar .tvh-right {
    order: 6;
    flex: 0 0 auto;
    border-left: 1px solid #edf0f5;
    padding-left: 7px;
}
.table-view.tv-unified-toolbar .table-viewer-header .tvh-right .dropdown > .btn.dropdown-toggle {
    background: transparent;
    border-color: transparent;
    color: #718096;
}
.table-view.tv-unified-toolbar .tv-center-scroll-buttons {
    opacity: 1;
    pointer-events: none;
    z-index: 6;
}
.table-view.tv-unified-toolbar .tv-center-scroll-buttons button {
    pointer-events: auto;
    width: 36px;
    height: 36px;
    color: #4f46a5;
    border-color: #e0def3;
}
.table-view.tv-unified-toolbar .tv-center-scroll-buttons button.disabled {
    display: none;
}
@container collection-toolbar (max-width: 850px) {
    .table-view.tv-unified-toolbar .tv-header-contents { gap: 6px; }
    .table-view.tv-unified-toolbar .number-of-records { display: none; }
    .table-view.tv-unified-toolbar .panel-pagination .navNewest,
    .table-view.tv-unified-toolbar .panel-pagination .navOldest { display: none; }
}
@container collection-toolbar (max-width: 600px) {
    .table-view.tv-unified-toolbar .tv-page-size { display: none; }
    .table-view.tv-unified-toolbar .tvh-right { padding-left: 0; border: none; }
    .table-view.tv-unified-toolbar .tv-header-contents { gap: 4px; }
}

/* /javascripts/plugins_src/jsoncompare/jsoncompare.main.css */
.node rect {
    cursor: pointer;
    fill: #fff;
    fill-opacity: .5;
    stroke: #3182bd;
    stroke-width: 1.5px;
}

.node text {
    font: 10px sans-serif;
    pointer-events: none;
}

path.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}

.add-item-form {
    height: 400px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.add-field-form {
    height: 300px;
    width: 500px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

.edit-key-form {
    height: 225px;
    width: 400px;
    border-radius: 25px;
    background: #c6dbef;
    border: 2px solid #3182bd;
    display: none;
}

h2, .edit, #fieldSingle {
    width: 90%;
    margin: 0 auto;
}

.add-item-dialog-btn {

}

.cancel-btn {
    background-color: #ff5c5c;
    border-radius: 5px;
}

.submit-btn {
    background-color: #4B9FEF;
    border-radius: 5px;
}

.add-field-btn {
    background-color: #88C791;
    border-radius: 5px;
}

.kwv-loader, .kwv-init-loader {
    position: absolute;
    top: 40%;
    left: 40%;
    order: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /javascripts/plugins_src/simlytiks.dashboard/dashboard.css */
:root {
    --theme-dark-bg: rgba(0, 0, 0, 0.8);
    --theme-blue-bg: #008cba;
    --theme-dark-txt: #FFF;
    --theme-blue-txt: #FFF;
}

.d3view-pl-dashboard h1,
.d3view-pl-dashboard h2,
.d3view-pl-dashboard h3,
.d3view-pl-dashboard h4,
.d3view-pl-dashboard h5 {
    color: unset;
    width: 100%;
}
.d3view-pl-dashboard.fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #FFF;
}
.d3view-pl-dashboard {
    transition: background-color 0.3s ease-in;
}
.d3view-pl-dashboard .pl-db-welcome-heading h1 {
    font-size: 4em;
}
.d3view-pl-dashboard .pl-db-welcome-heading button {
    font-size: 2em;
}

.d3view-pl-dashboard .widgets-container .widget-group {
    margin-bottom: 20px;
}
.d3view-pl-dashboard .widgets-container .widget-group-header {
    padding: 10px 25px;
    cursor: pointer;
}
.d3view-pl-dashboard .widgets-container .widget-group > div {
    padding: 0 20px;
}
.d3view-pl-dashboard .widgets-container[data-viewType="grid"] .pl-db-widget img,
.d3view-pl-dashboard .widgets-container[data-viewType="carousel"] .pl-db-widget img,
.d3view-pl-dashboard .widgets-container[data-viewType="tabs"] .pl-db-widget img {
    height: 40px;
    display: inline-block;
}
.d3view-pl-dashboard .widgets-container[data-viewType="grid"] .widget-items,
.d3view-pl-dashboard .widgets-container[data-viewType="tabs"] .widget-items {
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-dashboard .widgets-container[data-viewType="carousel"] .carousel-inner .item .widget-items {
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-dashboard .widgets-container[data-viewType="list"] .pl-db-widget .db-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.d3view-pl-dashboard .widgets-container[data-viewType="list"] .pl-db-widget img {
    height: 30px;
    width: 50px;
    float: left;
    margin-right: 5px;
}
.d3view-pl-dashboard .widgets-container[data-viewType="tabs"] .widgets {
    height: 100%!important;
}
.d3view-pl-dashboard .widgets-container[data-viewType="tabs"] .visualizations {
    display: none!important;
}
.d3view-pl-dashboard .widgets-container[data-viewtype="list"] .widgets-vis-list .tab-pane > .widget-items,
.d3view-pl-dashboard .widgets-container[data-viewtype="carousel"] .widgets-vis-list .tab-pane > .widget-items {
    height: 100%;
    overflow: auto;
}

.d3view-pl-dashboard .grid-container .grid-stack-item,
.d3view-pl-dashboard .grid-stack-item.ui-draggable-dragging {
    min-height: 25px;
    min-width: 50px;
    height: 30%;
    width: 30%;
}
.d3view-pl-dashboard[data-mode="edit"] .grid-stack-item {
    border: 1px solid transparent;
}
.d3view-pl-dashboard .grid-stack-item.hovered,
.d3view-pl-dashboard .grid-stack-item.beingResized,
.d3view-pl-dashboard .grid-stack-item.grid-item-dragging {
    border-color: #DDD;
}
.d3view-pl-dashboard .grid-container.grid-stack-item[data-type="divider"]  {
    min-height: 30px!important;
    min-width: 50px!important;
}
.d3view-pl-dashboard .widgets-container[data-viewType="grid"] .pl-db-widget,
.d3view-pl-dashboard .widgets-container[data-viewType="carousel"] .pl-db-widget,
.d3view-pl-dashboard .widgets-container[data-viewType="tabs"] .pl-db-widget {
    padding: 20px;
    background: transparent;
    height: 100px;
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DDD;
    margin: 5px;
    box-shadow: var(--plugin-box-shadow-lighter);
}
.d3view-pl-dashboard .pl-db-widget.disabled {
    display: none;
}
.d3view-pl-dashboard .pl-db-widget:not(.hasChildren):not(.disabled) {
    cursor: move;
}
.d3view-pl-dashboard .pl-db-widget a {
    /*text-decoration: none;*/
    /*cursor: move;*/
    /*color: #333;*/
}
.d3view-pl-dashboard .pl-db-widget:hover {
    background: #f1f3f4;
}
/*.d3view-pl-dashboard .pl-db-widget:hover > a {*/
/*    !*background-color: #f1f3f4;*!*/
/*    color: var(--plugin-primary-color);*/
/*}*/
.d3view-pl-dashboard .pl-db-widget:first-child {
    /*border-top: none;*/
}
.d3view-pl-dashboard .pl-db-widget.hasChildren {
    overflow-x: hidden;
}
.d3view-pl-dashboard .pl-db-widget.hasChildren > a {
    cursor: pointer;
}
.d3view-pl-dashboard .pl-db-widget.child-item {
    font-size: 100%;
}
.d3view-pl-dashboard .widgets-container {
    border-left: 1px solid #DDD;
    padding: 0;
    width: 25%;
}
.d3view-pl-dashboard input[data-search] {
    margin-bottom: 2px;
}
.d3view-pl-dashboard .pl-db-widget.hasChildren .sub-list-group {
    box-shadow: none;
    margin-left: 10px;
}
.d3view-pl-dashboard .pl-db-widget.showChildren .sub-list-group {
    display: block!important;
}
.d3view-pl-dashboard .grid-stack {
    /*min-height: 100%;*/
    /*overflow-x: hidden;*/
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content {
    /*box-shadow: var(--plugin-box-shadow-lighter);*/
    padding: 0;
    border: 1px solid #DDD;
    /*box-shadow: 1px 1px 8px #ddd;*/
    overflow: visible;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content.border-none {
    border: none;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content[data-border="none"] {
    border: none;
}
.d3view-pl-dashboard .placeholder-content {
    border-width: 1.5px;
}
.d3view-pl-dashboard[data-theme="light"] .placeholder-content {
    border-color: var(--theme-blue-bg);
}
.d3view-pl-dashboard .grid-container {
    overflow: auto;
    /*padding-top: 20px;*/
}
.d3view-pl-dashboard .grid-container .add_grid {
    display: block;
    width: 100%;
    /*position: absolute;*/
    /*bottom: 10px;*/
    /*right: 20px;*/
    /*z-index: 2;*/
}
/*.d3view-pl-dashboard .add_grid {*/
/*    display: none;*/
/*}*/
.d3view-pl-dashboard .grid-page:first-child .remove_grid {
    display: none!important;
}
.d3view-pl-dashboard .remove_grid {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 2;
}
.d3view-pl-dashboard[data-mode="view"] .add_grid,
.d3view-pl-dashboard[data-mode="view"] .remove_grid {
    display: none;
}
.d3view-pl-dashboard .grid-container .grid-page {
    /*border: 1px solid #DDD;*/
    position: relative;
    padding-top: 20px;
}
.d3view-pl-dashboard[data-mode="view"] .grid-container .grid-page {
    padding-top: 0;
}
.d3view-pl-dashboard .grid-container .grid-page .db-placeholder {
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content .pl-widget {
    height: 100%;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content .pl-widget[data-type="imageannotator"] > .panel-body,
.d3view-pl-dashboard .grid-stack .grid-stack-item-content .pl-widget[data-type="heading"] > .panel-body,
.d3view-pl-dashboard .grid-stack .grid-stack-item-content .pl-widget[data-type="heading"] > .pl-widget-body {
    padding: 0;
}
.d3view-pl-dashboard .pl-widget-body #viz_preview_options {
    margin-right: 0!important;
    border-right: none!important;
}
/*.d3view-pl-dashboard .pl-widget {*/
/*    padding: 15px;*/
/*}*/
/*.d3view-pl-dashboard .edit-widget {*/
/*    position: absolute;*/
/*    right: 0;*/
/*    top: 0;*/
/*    z-index: 2;*/
/*}*/
.d3view-pl-dashboard .bootstrap-select.plugin-bs-select {
    min-width: unset;
}

.d3view-pl-dashboard[data-theme="default"] .grid-stack .grid-stack-placeholder .placeholder-content  {
    background-color: var(--dt-selection-color);
}
.d3view-pl-dashboard .grid-stack.hovered {
    /*background-color: #f2f2cf;*/
}
/*.d3view-pl-dashboard .grid-stack-item.db-panel[data-is-editing="true"] > .ui-resizable-handle {*/
/*    display: none!important;*/
/*}*/
.d3view-pl-dashboard .pl-widget .pl-widget-heading {
    position: relative;
    cursor: move;
    /*height: 30px;*/
}
.d3view-pl-dashboard .pl-widget .pl-widget-body,
.d3view-pl-dashboard .pl-widget .pl-widget-heading,
.d3view-pl-dashboard .pl-widget .pl-widget-footer {
    padding: 10px 15px;
    /*padding-top: 20px;*/
    /*padding: 10px 15px;*/
}
/*.d3view-pl-dashboard .pl-widget[data-mode="create"] .pl-widget-body {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
.d3view-pl-dashboard .pl-widget .pl-widget-heading .drag-widget {
    position: absolute;
    top: 3px;
    font-size: 1.2em;
    display: block;
    color: dimgrey;
    cursor: move;
    z-index: 2;
}
/*.d3view-pl-dashboard .pl-widget[data-mode="edit"],*/
/*!*.d3view-pl-dashboard .pl-widget[data-mode="create"],*!*/
/*.d3view-pl-dashboard .pl-widget[data-mode="editWidget"] {*/

.d3view-pl-dashboard .db-panel[data-is-editing="true"]:after,
.d3view-pl-dashboard .db-panel.hovered {
    content: " ";
    position: absolute;
    z-index: 1;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 3px dotted orange;
    pointer-events: none;
}
/*.d3view-pl-dashboard .db-panel[data-is-editing="true"] {*/
/*    border: 3px dotted orange!important;*/
/*    outline: 0;*/
/*    box-shadow: none;*/
/*}*/
.d3view-pl-dashboard .pl-widget[data-mode="create"] .pl-widget-heading .edit-widget-item,
.d3view-pl-dashboard .pl-widget[data-mode="edit"] .pl-widget-heading .edit-widget-item {
    display: none!important;
}
.d3view-pl-dashboard .pl-widget[data-mode="editWidget"] .pl-widget-heading .edit-widget {
    display: none!important;
}
.d3view-pl-dashboard .db-panel.grid-stack-item .widget-options-container {
    display: none;
    position: absolute;
    top: -6px;
    width: 100%;
}
.d3view-pl-dashboard .widget-item-edit-view .viz-params .form-group {
    border: 2px dotted transparent;

}
.d3view-pl-dashboard .widget-item-edit-view .viz-params .form-group.isRequired:not(.fulfilled) {
    border: 2px dotted orange;
    /*padding: 5px 10px;*/
}

.d3view-pl-dashboard .grid-container .floating-options-container {
    position: absolute;
    z-index: 1000;
    right: -2px;
    /* display: none; */
    top: -20px;
}
.d3view-pl-dashboard .grid-container .floating-options-container:hover {
    display: block!important;
}
.d3view-pl-dashboard .grid-pane.hasFixedItem .db-panel:not(.db-fixed) .floating-options-container {
    display: none;
}

.d3view-pl-dashboard .db-panel.db-fixed {
    position: absolute;
    left: 0!important;
    top: 0px!important;
    width: 100%!important;
    height: calc(100% - 2px)!important;
    z-index: 2000!important;
}
.d3view-pl-dashboard .db-panel.db-fixed .grid-stack-item-content {
    height: 100%!important;
}
.d3view-pl-dashboard .db-panel.grid-stack-item:hover, .d3view-pl-dashboard .grid-pane:not(.hasFixedItem) .db-panel.grid-stack-item[data-is-editing="true"] {
    z-index: 2!important;
}
.d3view-pl-dashboard .db-panel.grid-stack-item:hover .widget-options-container {
    display: block!important;
}

.d3view-pl-dashboard .pl-widget.hideHeader .widget-options-container .drag-widget {
    position: absolute;
    left: 0;
    top: -20px;
    cursor: move;
    padding-right: 30px;
    color: #333;
    display: none;
}
.d3view-pl-dashboard .pl-widget.hideHeader .widget-options-container .widget-editing-options {
    position: absolute;
    left: 50%;
    top: -34px;
    padding: 10px 30px;
    transform: translateX(-50%);
}
.d3view-pl-dashboard .pl-widget.hideHeader .widget-options-container .widget-item-editing-options {
    position: absolute;
    right: 0;
    top: -34px;
    padding-left: 40px;
    padding-top: 10px;
}

.d3view-pl-dashboard .pl-widget .pl-widget-heading .drag-widget {
    left: 1px;
}
.d3view-pl-dashboard .pl-widget .pl-widget-title[contenteditable] {
    cursor: text;
}
.d3view-pl-dashboard .pl-widget .pl-widget-title {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 5px;
    color: unset !important;
}
.d3view-pl-dashboard .pl-widget .pl-widget-title-container {
    padding: 10px 20px;
}
.d3view-pl-dashboard .widget-edit-body .pl-background-highlight .simlytiks {
    background: #428bca!important;
}

.d3view-pl-dashboard .pl-db-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.d3view-pl-dashboard .grid-stack-item-content {
    background-color: #FFF;
    overflow: visible;
    position: relative;
}
.d3view-pl-dashboard .db-bg {
    transition: background-color 0.2s ease-in;
}
.d3view-pl-dashboard .db-txt {
    /*transition: color 0.3s ease-in;*/
    position: relative;
}

/** themes **/
.d3view-pl-dashboard[data-theme="dark"] .pl-db-bg,
.d3view-pl-dashboard[data-theme="dark"] .db-bg {
    background-color: rgba(0, 0, 0, 0.8);
}
.d3view-pl-dashboard[data-theme="dark"] .grid-stack .grid-stack-item-content {
    box-shadow: 4px 4px 10px lightgrey;
}
.d3view-pl-dashboard[data-theme="dark"] .db-txt {
    color: #FFFFFF!important;
}
.d3view-pl-dashboard[data-theme="blue"] .pl-db-bg,
.d3view-pl-dashboard[data-theme="blue"] .db-bg {
    background-color: #008cba;
}
.d3view-pl-dashboard[data-theme="blue"] .db-txt {
    color: #FFFFFF!important;
}
.d3view-pl-dashboard[data-theme="blue"] .grid-stack .grid-stack-item-content {
    box-shadow: 4px 4px 10px lightgrey;
}

.d3view-pl-dashboard .widget-edit-view > div,
.d3view-pl-dashboard .widget-item-edit-view > div {
    padding: 10px 15px;
}
.d3view-pl-dashboard .widget-item-edit-view textarea.heading {
    font-size: 2em;
    font-weight: bold;
    height: 200px;
}
.d3view-pl-dashboard #viz_preview_options {
    margin-right: 0!important;
    border-right: none!important;
}
.d3view-pl-dashboard #viz_preview_options .viz-options .viz-params {
    padding: 0!important;
}
.d3view-pl-dashboard .pl-db-widget #viz_preview_options .viz-description,
.d3view-pl-dashboard .pl-widget #viz_preview_options .viz-description {
    padding: 10px 5px;
}

/** Image Widget **/
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container {
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-view="gallery"] {
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .img-container {
    position: relative;
    margin: 5px;
    border: 1px solid #DDD;
    width: calc( 100% / 3 - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 10px);
    /*height: 150px;*/
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-view="carousel"] .img-carousel {
    width: 100%;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-view="carousel"] .img-carousel .carousel-inner > .item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-border="false"] > .img-container {
    border: none;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-viewType="horizontal"] {
    display: flex;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-viewType="horizontal"] .img-container {
    height: 100%!important;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-viewType="vertical"] {
    display: flex;
    flex-wrap: wrap;
}
.d3view-pl-dashboard .pl-widget[data-type="image"] .widget-img-container[data-viewType="vertical"] .img-container {
    width: 100%!important;
}

.d3view-pl-dashboard .media-container {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
}
.d3view-pl-dashboard .img-container img {
    opacity: 1!important;
}
.d3view-pl-dashboard .media-container > .img-container {
    position: relative;
    height: 150px;
    margin: 5px;
    border: 1px solid #DDD;
    width: calc(100% / 3 - 15px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.d3view-pl-dashboard .media-container > .img-container.selected,
.d3view-pl-dashboard .media-container > .img-container.ui-selecting {
border-color: #428bca;
    border-width: 2px;
}

/* Divider */
.d3view-pl-dashboard .widget-divider-container .widget-divider {
    margin: 10px 0;
    border-bottom: 1px solid #aaa;
    width: 100%;
    height: 1px;
}
.d3view-pl-dashboard .widget-divider-container[data-viewType="vertical"] .widget-divider {
    border-bottom: none;
    border-left: 1px solid #AAA;
    width: 1px;
    height: 100%;
}

.d3view-pl-dashboard .img-container.ui-draggable-dragging {
    z-index: 10000!important;
    height: 100px!important;
    width: 100px!important;
    background: #FFF!important;
    border: 1px solid #DDD!important;
    opacity: 1!important;
}
.d3view-pl-dashboard[data-mode="view"] .pl-editor-title:focus,
.d3view-pl-dashboard[data-mode="view"] .pl-editor-title:hover {
    border-color: transparent!important;
    box-shadow: none!important;
}


/* Simple droppable */
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack-item {
    position: absolute;
    cursor: move;
    z-index: 1;
    /*padding-top: 20px;*/
}
.d3view-pl-dashboard[data-renderer="simple"][data-mode="edit"] .grid-container .grid-stack-item:hover {
    border-color: #DDD;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item > .ui-resizable-se {
    /*bottom: -20px;*/
    display: none;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item > .ui-resizable-se {
    display: none!important;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item:hover > .ui-resizable-se,
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item.beingResized > .ui-resizable-se {
    display: block!important;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item > .ui-resizable-s {
    left: 0;
    /*bottom: -20px;*/
    right: unset;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack > .grid-stack-item > .ui-resizable-e {
    top: 0;
}
.d3view-pl-dashboard[data-renderer="simple"][data-mode="view"] .grid-container .grid-stack-item {
    cursor: default;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container .grid-stack .grid-stack-item-content {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.d3view-pl-dashboard[data-renderer="simple"] .grid-container {
    overflow-x: hidden;
}
.d3view-pl-dashboard[data-renderer="simple"] .pl-db-widget.ui-draggable.ui-draggable-dragging {
    width: 200px!important;
    height: 200px!important;
    z-index: 20!important;
}
.pl-db-widget.ui-draggable-dragging {
    z-index: 20000 !important;
    /*     border: 1px solid #DDD; */
    /*     min-height: 150px!important;
        min-width: 10%!important;
    /*     height: 30%; */
    /*     width: 30%; */
    /*background-color: #f1f3f4;*/
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    height: 80px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DDD;
    margin: 5px;
    box-shadow: var(--plugin-box-shadow-lighter);
}

.d3view-pl-dashboard .pl-widget[data-type="heading"] .pl-editor-title {
    font-size: 2em;
    font-weight: bold;
    height: 100%;
    overflow: auto;
}

/* Canvas container */
.d3view-pl-dashboard .pl-db-canvas-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.d3view-pl-dashboard .pl-db-canvas-container canvas {
    /*background-color: #f1f3f4;*/
}
.d3view-pl-dashboard[data-mode="view"] .pl-editor-title {
    cursor: default;
}

.d3view-pl-dashboard div.simlytiks #viz_preview_options div.viz-preview-tabs {
    height: 100%;
}

.d3view-pl-dashboard div.imageann-viz .imagegallery {
    border: none;
}

@media screen and (max-width: 1800px) {
    div.d3view-pl-dashboard div.simlytiks .viz-options .option-group  > a > div {
        display: none;
    }
}

.d3view-exporting .d3view-pl-dashboard .ui-resizable-handle {
    display: none!important;
}

.d3view-pl-dashboard div.d3view-multiselect .search-container .dropdown-menu {
    right: 0;
    left: auto;
    width: 100px;
}

.d3view-pl-dashboard .widgets-container [data-search-container].opened .toggle-search {
    color: green;
}
.d3view-pl-dashboard .widgets-container [data-search-container].opened .search-container {
    display: block!important;
}
.d3view-pl-dashboard .widgets-container [data-search-container].opened .widget-tabs {
    height: calc(100% - 89px)!important;
}

.d3view-pl-dashboard .db-panel .gifplayer-container #magnify {
    display: none;
}
.d3view-pl-dashboard[data-mode="view"] .gifplayer-container .image-options {
    display: none;
}
.d3view-pl-dashboard[data-mode="view"] .gifplayer-container .thumbnail-body {
    height: 100%!important;
}

.d3view-pl-dashboard[data-mode="view"] .gifplayer-container .img-ann-header {
    display: none;
}

.d3view-pl-dashboard .tour-item {
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
}
.d3view-pl-dashboard .tour-item.ui-sortable-placeholder {
    visibility: visible!important;
    width: 100%!important;
    background: lightyellow;
    display: block!important;
    pointer-events: none;
    height: 50px;
}
.d3view-pl-dashboard .tour-item .drag-handle {
    opacity: 0;
    cursor: move;
}
.d3view-pl-dashboard .tour-item:hover .drag-handle {
    opacity: 1;
}
.d3view-pl-dashboard .guide_me {
    display: none;
}
.d3view-pl-dashboard[data-mode="view"] button.guide_me {
    display: block!important;
    position: absolute;
    color: #FFF;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 20;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    align-items: center;
    background-image: linear-gradient(-180deg, #00D775, #00BD68);
    border: 0;
    font-size: 18px;
}
.d3view-pl-dashboard[data-mode="view"] button.guide_me:hover {
    background: #00bd68;
}

.d3view-pl-dashboard[data-mode="view"] button.guide_me :active,
.d3view-pl-dashboard[data-mode="view"] button.guide_me :hover {
    outline: 0;
}

div.popover.tour-dashboard {
    z-index: 8000!important;
}
.sl-dashboard-backdrop .tour-backdrop {
    z-index: 2000;
}




/** For smaller screens **/
@media screen and (max-height: 1200px) {
    .d3view-pl-dashboard .pl-widget .widget-viz-container {
        height: calc(100% - 23px)!important;
        /*min-height: 20px;*/
    }
}


.d3view-pl-dashboard .grid-stack .grid-stack-item-content .pl-widget .db-widget-header .btn-group {
    opacity: 0;
}
.d3view-pl-dashboard .grid-stack .grid-stack-item-content:hover .pl-widget .db-widget-header .btn-group {
    opacity: 1;
}

.d3view-pl-dashboard .db-panel .d3view-newton {
    width: 100%!important;
    height: 100%!important;
}
/* /javascripts/plugins_src/formbuilder/formbuilder.css */
div.d3view-inputsBuilder {
    min-height: 200px;
}

/* Added by shashank2104 on 2026-05-08 - DW-2919 - inline validation pill below list/select inputs that have a dataset_columns rule */
div.d3view-inputsBuilder .fb-validation-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-subtle, #f5f7fa);
    color: var(--d3v-text-muted, #6b7280);
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    transition: var(--d3v-t-fast, all 0.15s ease);
}
div.d3view-inputsBuilder .fb-validation-note .fa {
    margin-top: 2px;
    flex: 0 0 auto;
}
div.d3view-inputsBuilder .fb-validation-note.has-error {
    background: var(--d3v-status-danger-bg, #fef2f2);
    color: var(--d3v-status-danger, #b91c1c);
    border-color: var(--d3v-status-danger-border, #fecaca);
}
div.d3view-inputsBuilder .fb-validation-note b {
    color: inherit;
    font-weight: 600;
}

div.d3view-inputsBuilder:not([data-view="simple"]) {
    border: 1px solid #DDD;
}
div.d3view-inputsBuilder div.ib-backdrop {
    background-color: #000;
    opacity: 0;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0; height: 0;
}
div.d3view-inputsBuilder .tt-menu {
    text-align: left;
}
div.d3view-inputsBuilder div.ib-backdrop.fade.in {
    opacity: 0.2!important;
    width: 100%;
    z-index: 2;
    display: inline-block;
    height: 100%;
}
div.d3view-inputsBuilder .fb-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
}
div.d3view-inputsBuilder .fb-spin-loader {
    display: inline-block;
    width: 4px;
    height: 30px;
    border-radius: 4px;
    animation: loading 1s ease-in-out infinite;
}
div.d3view-inputsBuilder .fb-spin-loader:nth-child(1) {
    background-color: #3498db;
    animation-delay: 0s;
}
div.d3view-inputsBuilder .fb-spin-loader:nth-child(2) {
    background-color: #c0392b;
    animation-delay: 0.09s;
}
div.d3view-inputsBuilder .fb-spin-loader:nth-child(3) {
    background-color: #f1c40f;
    animation-delay: .18s;
}
div.d3view-inputsBuilder .fb-spin-loader:nth-child(4) {
    background-color: #27ae60;
    animation-delay: .27s;
}
/*div.d3view-inputsBuilder li.field-item .ip-val-icon {*/
/*    display: none;*/
/*}*/
/*div.d3view-inputsBuilder li.field-item.actionBeingPerformed > .row {*/
/*    opacity: 0.3!important;*/
/*}*/
/*div.d3view-inputsBuilder li.field-item.actionBeingPerformed:after {*/
/*    content: 'Action being performed on this input. Please wait...';*/
/*    position: absolute;*/
/*    font-size: 1.3em;*/
/*    font-weight: 600;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    z-index: 2;*/
/*}*/
@keyframes loading {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1, 2.2);
    }
    40% {
        transform: scale(1);
    }
}

div.d3view-form-builder-container span.fb-alert-box {
    position: absolute;
    left: 48%;
    top: 0;
}
div.d3view-form-builder-container span.fb-alert {
    position: absolute;
    top: 4px;
    left: 50%;
    padding: 15px;
    background-color: #FFF;
    font-size: 11px;
    z-index: 3;
    width: 300px;
    text-align: left;
    margin-left: -150px;
    border-radius: 10px;
    animation-duration: 0.5s;
}
div.d3view-form-builder-container span.fb-alert button.disabled {
    cursor: not-allowed;
}
div.d3view-form-builder-container span.fb-alert span.heading {
    font-weight: bold;
}
div.d3view-form-builder-container span.fb-alert input.group-name {
    margin-top: 5px;
}
div.d3view-form-builder-container span.fb-alert .alert-footer {
    padding: 8px;
}
div.d3view-inputsBuilder .inputs-builder-container {
    display: flex;
}
div.d3view-inputsBuilder .row .wf-input-label {
    background: #fff;
    padding: 9px;
    border-radius: 0;
    border: none;
    text-align: left;
    -webkit-border-radius: 5px;
    /*width: 100px;*/
    /*cursor: move;*/
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*-webkit-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);*/
    /*-moz-box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);*/
    /*box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);*/
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;

    padding-left: 30px;
}
div.d3view-inputsBuilder .row .wf-input-label .app-icon {
    width: 13px;
    margin: 0;
    height: 22px;
}
div.d3view-inputsBuilder .row .wf-input-label .add_sample_input {
    opacity: 0;
    pointer-events: none;
    /*!*position: absolute;*!*/
    /*!*right: 5px;*!*/
    /*!*top: 5px;*!*/
    /*padding: 5px;*/
    /*border: 1px solid #DDD;*/
    /*!*border-bottom-right-radius: 5px;*!*/
    /*!*border-left: none;*!*/
    /*background: #428bca;*/
    /*color: #FFF;*/
    /*!*border-top-right-radius: 5px;*!*/
    /*border-radius: 3px;*/
    /*cursor: pointer;*/
}
div.d3view-inputsBuilder .row .wf-input-label .drag_sample_input {
    opacity: 0;
    pointer-events: none;
    /*position: absolute;*/
    /*right: 25px;*/
    /*top: 5px;*/
    padding: 5px 8px;
    cursor: move;
    /*transform: rotate(45deg);*/
}
div.d3view-inputsBuilder .row .wf-input-label .drag_sample_input:hover {
    color: red;
}
div.d3view-inputsBuilder .row .wf-input-label:hover .add_sample_input, div.d3view-inputsBuilder .row .wf-input-label:hover .drag_sample_input {
    opacity: 1!important;
    pointer-events: all!important;
}
div.d3view-inputsBuilder .wf-input-label .add_sample_input {
    padding: 5px 10px;
}
div.d3view-inputsBuilder .row .wf-input-label:hover {
    background-color: #f5f5f5;
}
div.d3view-inputsBuilder .sample-inputs .sample-inputs-list .row {
    padding: 0px!important;
    border-bottom: 1px solid #DDD!important;
}
div.d3view-inputsBuilder div.wf-input-label.ui-draggable-dragging {
    width: auto!important;
    height: auto!important;
}

div.d3view-inputsBuilder .sample-inputs-list .wf-input-label .sample-input-label {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.d3view-inputsBuilder .sample-inputs-list .wf-input-label:hover .sample-input-label {
    width: calc(100% - 53px);
}
div.d3view-inputsBuilder .sample-inputs-list .wf-input-label:hover .sample-input-label > span {
    display: block;
    width: calc(100% - 0px);
    overflow: hidden;
    text-overflow: ellipsis;
}
div.d3view-inputsBuilder .sample-inputs-list .wf-input-label .sample-input-options {
    display: none;
    position: absolute;
    right: 6px;
}
div.d3view-inputsBuilder .sample-inputs-list .wf-input-label:hover .sample-input-options {
    display: flex;
    align-items: center;
}

div.d3view-inputsBuilder .sample-inputs .sample-inputs-list .row, div.d3view-inputsBuilder ul.field-items > li .row , div.d3view-inputsBuilder div.validations-block .row {
    border-bottom: none;
    /*font-size: 12px;*/
    margin: 0!important;
    padding: 12px;
}

div.d3view-inputsBuilder .sample-inputs .toggle-subinputs {
    cursor: pointer;
}
div.d3view-inputsBuilder .sample-inputs .toggle-subinputs:hover {
    color: #428BCA;
}
div.d3view-inputsBuilder div.carousel-slide .no-data, div.d3view-inputsBuilder .inputs-group.nvg .no-data,
div.d3view-inputsBuilder ul.field-items + .no-data {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #4f5359;
    letter-spacing: 0.02em;
}
div.d3view-inputsBuilder div.inputs-list {
    position: relative;
    text-align: center;
    height: 100%;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items {
    padding-top: 0!important;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items,
div.d3view-inputsBuilder ul.field-items-header {
    margin-bottom: 0;
    padding: 10px 0;
    overflow: auto;
    width: 100%;
}

div.d3view-inputsBuilder ul.field-items.form-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Prevents stretching */
    align-content: flex-start; /* Controls spacing between rows */
    row-gap: 20px;
}

div.d3view-inputsBuilder ul.field-items.form-flex > li {
    max-width: 100%;
}

div.d3view-inputsBuilder ul.field-items-header {
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    /*height: 48px;*/
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item {
    transition: opacity 0.5s linear,background 0.5s ease-in;
    opacity: 1;
    border-left: 4px solid transparent;
    /*height: 100px;*/
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.disabled {
    opacity: 0.5;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.hasActions {
    border-left: 4px solid purple;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.parentActionHovered {
    border-left: 4px solid yellow;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.parentActionPerforming {
    border-left: 4px solid yellow;
    animation: border-color-change 1s infinite;
}

.d3view-inputsBuilder .inputs-builder-container li.field-item.temp_show {
    display: block!important;
}
.d3view-inputsBuilder .inputs-builder-container li.field-item > .hidden-ip-text {
    display: none;
}
.d3view-inputsBuilder .inputs-builder-container li.field-item.temp_show > .hidden-ip-text {
    display: block!important;
    text-align: left;
    color: grey;
    padding: 10px 25px;
}

@keyframes border-color-change {
    0% {
        border-left: 4px solid yellow;
    }
    50% {
        border-left: 4px solid red;
    }
    100% {
        border-left: 4px solid yellow;
    }
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.hasDDOpen {
    z-index: 1000;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item .multiselect-container .ms-dd-toggle {
    text-align: left;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.faded {
    opacity: 0.3;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item.overlay {
    background-color: #FFF;
    z-index: 3;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item .field-item-contents.dz-drag-hover {
    display: flex;
}
div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item .input-group.input-value.disabled {
    pointer-events: none;
    opacity: 0.3;
}
div.d3view-inputsBuilder div.sample-inputs {
    height: 100%;
    overflow: auto;
}
div.d3view-inputsBuilder div.sample-inputs-list {
    text-align: center;
}
div.d3view-inputsBuilder div.sample-inputs .info {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: 500;
}
div.d3view-inputsBuilder div.sample-inputs .switch-sample-inputs > button:focus, div.d3view-inputsBuilder div.sample-inputs .switch-sample-inputs > button:active {
    outline: none;
}
div.d3view-inputsBuilder div.sample-inputs-list {
    display: none;
}
div.d3view-inputsBuilder div.sample-inputs-list[data-id="sample"] {
    border-top: 1px solid #DDD;
    max-height: calc(100% - 0px);
}
div.d3view-inputsBuilder div.sample-inputs-list.active {
    display: block;
    overflow: auto;;
}
div.d3view-inputsBuilder div.workers-select-list {
    text-align: left;
}
div.d3view-inputsBuilder div.workers-select-list .list-group-item {
    border: none;
    border-top: 1px solid #DDD;
    cursor: move;
}
div.d3view-inputsBuilder div.workers-select-list .list-group-item span.worker-name {
    margin-left: 3px;
}

div.d3view-inputsBuilder ul.field-items li.field-header > div.row, div.d3view-inputsBuilder ul.field-items li.field-item > div.row,
div.d3view-inputsBuilder .flex-item-additional-options li > div.row {
    /*font-size: 12px;*/
    /*border-bottom: 1px solid #ddd;*/
    margin: 0!important;
    padding: 12px;
}

div.d3view-inputsBuilder [data-view-type="simple"] li.field-item .input-name,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-name {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 6px;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] [data-view-type="simple"] li.field-item .input-value-container {
    width: 100%;
}
div.d3view-inputsBuilder [data-view-type="simple"] li.field-item .input-type,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-type {
    width: auto;
    margin-right: 8px;
}
div.d3view-inputsBuilder [data-view-type="simple"] li.field-item  .sortable-handle,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .sortable-handle {
    top: 50%!important;
    transform: translateY(-50%);
}


div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item > div.row,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item > div.row {
    padding: 15px 10px;
}
div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item .input-group input.form-control,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-group input.form-control {
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
div.d3view-inputsBuilder li.field-item .file-upload-icon, div.d3view-inputsBuilder li.field-item .file-upload-icon {
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 3;
    cursor: pointer;
    background: 0 0;
    border: none;
}

div.d3view-inputsBuilder li.field-item .reset-remote-base-url {
    position: absolute;
    right: 7px;
    font-size: 1.2em;
    z-index: 2;
    color: #AAA;
    top: 9px;
    cursor: pointer;
}

div.d3view-inputsBuilder li.field-item .separator-options > div {
    flex: 1 1 50%;
}

div.d3view-inputsBuilder li.field-item .field-type .dropdown-toggle:focus {
    outline: none;
}
div.d3view-inputsBuilder li.field-item .field-type .dropdown-toggle {
    color: #000;
}
div.d3view-inputsBuilder li.field-item .field-type .dropdown-toggle:hover {
    color: #428BCA;
}
div.d3view-inputsBuilder .background-highlight > * {
    background: #428BCA!important;
    color: #FFF!important;
}
div.d3view-inputsBuilder [data-mode="build"] li.field-item .input-name {
    display: flex;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-name,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-name {
    position: relative;
    /*display: flex;*/
    text-align: left;
    align-items: center;
    padding-left: 0;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-value-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-desc-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-bottom-row-outer,

div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-value-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-desc-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-bottom-row-outer {
    /*padding-left: 33px;*/
}
div.d3view-inputsBuilder li.field-item .input-desc-outer .ip-desc-editor {
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: normal;
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
}
div.d3view-inputsBuilder li.field-item .input-desc-outer .ip-desc-editor:hover {
    border-color: #f5f5f5;
}
div.d3view-inputsBuilder li.field-item .input-desc-outer .ip-desc-editor:focus {
    border:1px solid  #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

div.d3view-inputsBuilder .inputs-view-content:not([data-id="simple"]) li.field-item .input-name-container input.form-control,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-name-container input.form-control {
    padding-left: 10px;
    font-size: 1.3em;
}
div.d3view-inputsBuilder .inputs-view-content:not([data-id="simple"]) li.field-item .input-edit-icons-container,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-edit-icons-container {
    position: relative!important;
    right: unset!important;
    transform: unset;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item > div.row,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item > div.row {
    padding: 30px 12px;
}

div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item .input-options-outer {
    display: none;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item:hover .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item :hover .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .inputs-view-content:not([data-id="simple"]) li.field-item.hasDDOpen .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="build"] .all-inputs-list li.field-item.hasDDOpen .input-options-outer {
    display: flex;
}

div.d3view-inputsBuilder .inputs-builder-container li.field-item .ip-val-updated {
    opacity: 0;
    padding-left: 12px;
    text-align: left;
    transition: opacity 0.3s ease;
}
div.d3view-inputsBuilder .inputs-builder-container li.field-item:hover .ip-val-updated {
    opacity: 1;
}

div.d3view-inputsBuilder li.field-item.highlighted {
    background-color: #f5f5f5;
}
div.d3view-inputsBuilder li.field-item .input-name .field-name {
    font-size: 1.2em;
}
div.d3view-inputsBuilder li.field-item span.field-type {
    width: 15px;
    margin-right: 4px;
}
div.d3view-inputsBuilder.fb-worker-config .worker-inputs:not(.condensed) {
    width: 100%;
}
div.d3view-inputsBuilder.fb-worker-config .worker-inputs {
    transition: width 0.5s ease;
    min-height: 400px;
}
div.d3view-inputsBuilder.fb-worker-config .worker-inputs.condensed {
    border-right: 1px solid #DDD;
}
div.d3view-inputsBuilder.fb-worker-config li.field-item .input-name {
    top: 7px;
}
div.d3view-inputsBuilder .field-item .required {
    color: red;
    font-size: 15px;
    position: relative;
    bottom: 2px;
    /*font-size: 18px;*/
}
div.d3view-inputsBuilder li.field-item .input-validations  {
    cursor: pointer;
}
div.d3view-inputsBuilder li.field-item .input-validations.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}
div.d3view-inputsBuilder li.field-item .list-grid-view {
    display: flex;
    flex-wrap: wrap;
    max-height: 200px;
    overflow: auto;
}
div.d3view-inputsBuilder li.field-item .list-grid-option {
    margin: 10px;
    width: 10%;
    text-align: left;
}
div.d3view-inputsBuilder li.field-item .list-grid-option label {
    cursor: pointer;
    font-weight: 400;
}

div.d3view-inputsBuilder ul.field-items li.ui-selecting {
    background-color: var(--dt-selection-color-dark);
}
div.d3view-inputsBuilder ul.field-items li.ui-selected {
    background-color: var(--dt-selection-color-dark);
}

div.d3view-form-builder-container .field-items-context-menu {
    position: fixed;
    display: none;
    background: #FFF;
    z-index: 2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #CCC;
}
div.d3view-form-builder-container .field-items-context-menu > li {
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
div.d3view-form-builder-container .field-items-context-menu li:hover {
    background-color: #428BCA;
}
div.d3view-form-builder-container .field-items-context-menu ul.list-group-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 100px;
}
div.d3view-form-builder-container .field-items-context-menu li:hover ul.list-group-submenu {
    display: block;
}
div.d3view-form-builder-container .field-items-context-menu li:hover > a {
    color: #FFF;
    text-decoration: none;
}

div.d3view-form-builder-container .col-md-0-5, div.d3view-inputs-builder-container .col-md-1-5, div.d3view-form-builder-container .col-md-3-5 {
    position: relative;
    float: left;
    padding: 0 15px;
    min-height: 1px;
}
div.d3view-form-builder-container .col-md-0-5 {
    width: 4.135%;
}
div.d3view-form-builder-container .col-md-1-5 {
    width: 12.499999995%;
}
div.d3view-form-builder-container .col-md-3-5 {
    width: 29.135%;
}
div.d3view-form-builder-container .input-groups {
    border-bottom: 1px solid #DDD;
}
div.d3view-form-builder-container .input-groups .group-tabs {
    border-bottom: none;
    float: right;
}
div.d3view-form-builder-container .input-groups .group-tabs > li {
    /*float: right;*/
}
div.d3view-inputsBuilder .visibility_options .dropdown-toggle {
    background: #f5f5f5;
    padding: 4px;
    border-radius: 6px;
}
div.d3view-inputsBuilder .visibility_options .dropdown-menu {
    padding: 10px;
}
div.d3view-inputsBuilder .visibility_options.open .dropdown-toggle {
    color: red;
}
div.popover.formbuilder .popover-body {
    padding: 10px;
}

/* validations */
div.d3view-inputsBuilder div.validations-block {
    position: absolute;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    background-color: #FFF;
    z-index: 3;
    border: 1px solid #DDD;
}
div.d3view-inputsBuilder div.validations-block:before, div.d3view-inputsBuilder div.validations-block:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -15px;
    left: 50%;
}
div.d3view-inputsBuilder div.validations-block:before {
    border-width: 0 13px 13px 13px;
    border-color: transparent transparent #DDD transparent;
}
div.d3view-inputsBuilder div.validations-block:after {
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent #FFF transparent;
}
div.d3view-inputsBuilder div.validations-block .validations-list {
    max-height: 250px;
    overflow: auto;
}
div.d3view-inputsBuilder div.validations-block .validation-list-item {
    position: relative;
}
div.d3view-inputsBuilder div.validations-block .validation-list-item .remove_validation {
    position: absolute;
    top: 50%;
    right: 10px;
}
div.formbuilder-tooltip {
    z-index: 1040;
}
div.formbuilder-tooltip .tooltip-inner {
    text-align: left;
    background-color: #4f5359;
    font-size: 12px;
}
div.formbuilder-tooltip .tooltip-arrow {
    border-bottom-color: #4f5359!important;
}
div.formbuilder-tooltip span.offset-text {
    display: block;
    margin-left: 10px;
}
div.formbuilder-tooltip span.offset-text:before {
    content: '-';
    margin-right: 3px;
}


div.d3view-inputsBuilder span.formbuilder-dz {
    position: absolute;
    top: 0;
    border: none;
}

/* submit mode */
div.d3view-inputsBuilder ul.field-items li.field-item {
    /*margin: 5px 0;*/
    position: relative;
}
div.d3view-inputsBuilder .field-name-container {
    width: 15%;
    float: left;
}
div.d3view-inputsBuilder .field-name-container .field-name {
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    top: 5px;
}
div.d3view-inputsBuilder .field-name-container span.field-type {
    position: relative;
    left: 0;
    top: 5px;
    margin-right: 5px;
}
div.d3view-inputsBuilder .field-name-container span.required {
    position: relative;
}
div.d3view-inputsBuilder .field-value-container {
    width: 85%;
    float: left;
}
div.d3view-inputsBuilder li.field-item .field-value-container {
    /*background: #DDD;*/
}
div.d3view-inputsBuilder .has-error .handsontable_container {
    border: 1px solid red;
}
div.d3view-inputsBuilder li.field-item .handsontable_container .bs_datatable_wrapper {
    min-height: 198px;
}

div.d3view-inputsBuilder .inputs-tab {
    /*font-size: 11px;*/
}
div.d3view-inputsBuilder .inputs-tab .inputs-view-content[data-id="flex"] {
    overflow: auto;
}
div.d3view-inputsBuilder .inputs-tab .inputs-view-content[data-id="simple"] .input-name,
div.d3view-inputsBuilder .all-inputs-list li.field-item .input-name {
    text-align: left;
    font-weight: bold;
}
div.d3view-inputsBuilder .inputs-tab .inputs-view {
    position: relative;
    top: 1px;
    margin-bottom: 3px;
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
}
div.d3view-inputsBuilder .inputs-tab .inputs-view.tabs {
    /*position: absolute;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
}
/*div.d3view-inputsBuilder .inputs-tab .inputs-view button:not(.active) {*/
/*background: lightblue;*/
/*color: #000;*/
/*text-shadow: none;*/
/*border-color: steelblue;*/
/*}*/
div.d3view-inputsBuilder .inputs-tab .inputs-view button:focus, div.d3view-inputsBuilder .inputs-tab .inputs-view button:active {
    outline: none;
}
div.d3view-inputsBuilder .inputs-tab .inputs-view-content {
    display: none;
}
div.d3view-inputsBuilder .inputs-tab .inputs-view-content.active {
    display: block;
}
div.d3view-inputsBuilder .inputs-tab .inputs-flex-view {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-inputsBuilder .inputs-tab .inputs-flex-view .inputs-group {
    margin: 10px;
    border: 1px solid #ddd;
    background: #FFF;
    position: relative;
    width: 23%;
    font-size: 11px!important;
    transition: width 0.4s ease;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading {
    padding: 6px 0;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .group-title {
    color: #428BCA;
    margin-bottom: 4px;
}
div.d3view-inputsBuilder .inputs-flex-view .inputs-group.create_new {
    background-color: #f7f7f7;
    min-height: 400px;
}
div.d3view-inputsBuilder .inputs-group .create-new-tab {
    font-size: 14px;
    position: relative;
    top: 50%;
    padding: 20px;
    border-radius: 20px;
    background: steelblue;
    color: #fff;
    text-decoration: none;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .options-container {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
    padding: 5px;
    display: none;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .options-container input.group-width {
    width: 35px!important;
    display: inline!important;
    padding: 0;
    padding-left: 2px;
    height: 17px;
}
div.d3view-inputsBuilder .inputs-group:hover .inputs-group-heading .sortable-handle {
    opacity: 1!important;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .sortable-handle {
    opacity: 0;
    position: absolute;
    left: 8px;
    top: 10px;
    cursor: move;
    color: #4f5359;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .group-options {
    position: absolute;
    opacity: 1;
    right: 8px;
    top: 10px;
    cursor: pointer;
    color: #4f5359;
}
div.d3view-inputsBuilder .inputs-group .inputs-group-heading .group-options:hover {
    color: #428BCA;
}
div.d3view-inputsBuilder .inputs-group li.field-item .input-options {
    position: absolute;
    right: 3px;
    top: 50%;
    opacity: 0;
    cursor: pointer;
}
div.d3view-inputsBuilder .inputs-flex-view li.field-item .input-name {
    position: relative;
    top: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
}
div.d3view-inputsBuilder .inputs-flex-view .bs-edit {
    border: none!important;
}
div.d3view-inputsBuilder .inputs-flex-view li.field-item .input-name .bs-edit {
    color: #000;
    text-decoration: none;
}
div.d3view-inputsBuilder .inputs-group li.field-item:hover .input-options {
    opacity: 1;
}
div.d3view-inputsBuilder .inputs-group li.field-item:hover .sortable-handle {
    opacity: 1!important;
}
div.d3view-inputsBuilder ul.field-items li.sortable-placeholder {
    display: block!important;
}
div.d3view-inputsBuilder ul.field-items li.field-item.flex-overlay {
    background: #FFF;
    z-index: 3;
}

div.d3view-inputsBuilder .flex-item-additional-options {
    position: absolute;
    background: #FFF;
    border: 1px solid #DDD;
    z-index: 3;
    display: none;
}
div.d3view-inputsBuilder div.flex-item-additional-options:before, div.d3view-inputsBuilder div.flex-item-additional-options:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    top: -15px;
    left: 50%;
}
div.d3view-inputsBuilder div.flex-item-additional-options:before {
    border-width: 0 13px 13px 13px;
    border-color: transparent transparent #DDD transparent;
}
div.d3view-inputsBuilder div.flex-item-additional-options:after {
    border-width: 0 14px 14px 14px;
    border-color: transparent transparent #FFF transparent;
}

/* carousel */
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: left;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading .edit-icons {
    /*position: absolute;*/
    /*font-size: 13px;*/
    display: inline-block;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading:hover .edit-icons > i {
    cursor: pointer;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading:hover .edit-icons > i:hover {
    color: red;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading .group-title {
    font-size: 1.3em;
    display: inline-block;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading .toggle-filters {
    position: absolute; right: 4px; top: 26px; cursor: pointer;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading .toggle-filters.shown {
    color: green;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading .toggle-filters:hover {
    color: green;
}
div.d3view-inputsBuilder div#formbuilder-carousel div.carousel-slide-heading-container div.filter-inputs {
    position: absolute;
    background-color: #FFF;
    padding: 5px;
    border-bottom: 1px solid #DDDDDD;
    width: 100%;
    z-index: 10;
    display: none;
    margin: 0;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-inner .carousel-slide.item {
    width: 100%;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-inner .carousel-slide.item.left,
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-inner .carousel-slide.item.right {
    margin-left: 0;
    float: none!important;
}

div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup .field-items {
    height: unset!important;
}

div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup {
    padding: 3px 20px;
    margin: 15px;
    border: 1px solid #DDD;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup li.field-item {
    /*border: none;*/
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup-header {
    cursor: pointer;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup.opened .sg-count {
    display: none;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup-header:hover {
    color: steelblue;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide .subgroup.opened .subgroup-header {
    /*color: steelblue;*/
}
div.d3view-inputsBuilder div.carousel-footer .toggle-filters {
    cursor: pointer;
}
div.d3view-inputsBuilder div.carousel-footer .toggle-filters.shown {
    color: green;
}
div.d3view-inputsBuilder div#formbuilder-carousel .carousel-slide-heading {
    /*border-top: 1px solid #DDD;*/
    border-bottom: 1px solid #DDD;
    padding: 8px 0;
}
div.d3view-inputsBuilder div.inputs-carousel-view .filter-order {
    position: absolute;
    right: 20px;
    z-index: 1;
    top: 17px;
    display: none;
}
div.d3view-inputsBuilder div.inputs-builder-container.filterView div.formfilters-list-container {
    display: block!important;
}
div.d3view-inputsBuilder div.inputs-builder-container.filterView div.carousel-body {
    display: none;
}
div.d3view-inputsBuilder div.inputs-builder-container.filterView div.carousel-footer *:not(.filter-order) {
    display: none;
}
div.d3view-inputsBuilder div.inputs-builder-container.filterView .formfilters-options {
    display: block!important;
}
div.d3view-inputsBuilder .carousel-footer {
    padding: 5px;
    border-top: 1px solid #CCC;
    position: relative;
    height: 41px;
}
div.d3view-inputsBuilder .carousel-footer div.filter-inputs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li.disabled {
    pointer-events: none;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li {
    position: relative;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li.active:before {
    content: '\f00c';
    font-family: FontAwesome, sans-serif;
    margin-right: 2px;
    position: absolute;
    top: 5px;
    left: 3px;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li.active a {
    background: none;
    color: #000;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li:hover {
    background-color: #DDD;
    cursor: pointer;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li.ui-sortable-placeholder {
    height: 25px;
    display: block!important;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li .drag_handle {
    position: absolute;
    right: 4px;
    top: 5px;
    opacity: 0;
}
div.d3view-inputsBuilder .carousel-footer .steps ul.dropdown-menu > li:hover .drag_handle {
    opacity: 1;
}
div.d3view-inputsBuilder .bold {
    font-weight: bold;
}

/* files list preview image*/
div.bs-container.files-list .preview-image-file {
    cursor: pointer;
}


/* input filters */
div.d3view-inputsBuilder .input-filters-container {
    /*height: 32px;*/
    position: absolute;
    left: 4px;
    top: 4px;
    user-select: none;
    z-index: 3;
}
div.d3view-inputsBuilder .toggle-filter-inputs.active {
    color: #428BCA;
}
div.d3view-inputsBuilder .toggle-filter-inputs {
    font-size: 12px;
    position: relative;
    left: 5px;
    float: left;
    cursor: pointer;
    top: 10px;
}
div.d3view-inputsBuilder div.input-filters {
    /*float: left;*/
    /*position: relative;*/
    /*left: 10px;*/
}
div.d3view-inputsBuilder .input-filters-container .input-filter {
    /*margin: 0 4px;*/
}

div.d3view-inputsBuilder li.field-item.temp_hide {
    display: none;
}

div.formbuilder-curve-manager div.inputs-list li {
    padding: 5px;
    cursor: pointer;
}
div.formbuilder-curve-manager div.inputs-list li:hover {
    background-color: #eee;
}
div.formbuilder-curve-manager div.inputs-list li a {
    text-decoration: none;
    color: #4f5359;
}
div.formbuilder-curve-manager div.inputs-list li.active:after {
    content: '\f00c';
    font-family: FontAwesome;
    margin-left: 3px;
    color: #428BCA;
}
div.formbuilder-curve-manager div.chart-container.error_message:after {
    content: 'No curves selected';
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: bold;
    color: red;
}

div.d3view-inputsBuilder .twitter-typeahead {
    width: 100%;
}
div.d3view-inputsBuilder .input-group .twitter-typeahead {
    display: table-cell!important;
}
div.d3view-inputsBuilder .wf-dropzone.file-upload.dz-clickable {
    border: 2px dashed #ddd;
}
div.d3view-inputsBuilder div.fb-select-worker {
    margin: 10px 0;
}
div.bs-container.fb-select-worker .dropdown-menu {
    width: 100%;
}
div.bs-container.fb-select-worker .dropdown-menu li {
    position: relative;
}
div.bs-container.fb-select-worker .dropdown-menu li .add-worker {
    position: absolute;
    right: 0;
    top: 3px;
    font-size: 9px;
}
div.bs-container.fb-select-worker .dropdown-menu li:hover .add-worker {
    display: block!important;
}

/* multiple extraction formbuilder */
div.d3view-inputsBuilder input#fb-multiple-file-ip {
    display: inline-block;
}

/* file extraction view */
div.fb-file-extraction div.modal-body div.files-container {
    display: flex;
    flex-wrap: wrap;
}
div.fb-file-extraction div.file-view {
    height: 200px;
    width: 18%;
    margin: 9px;
    border: 1px solid #DDD;
}
div.fb-file-extraction div.file-view.selected {
    border-color: #428BCA;
}


/* multiple fb */
div.d3view-inputsBuilder label {
    display: inline-block!important;
}
div.d3view-inputsBuilder div.fb-multiple-container .filter-inputs {
    padding: 6px 10px;
}
div.d3view-inputsBuilder div.fb-multiple-container .filter-inputs label {
    line-height: 24px;
    margin-left: 10px;
    position: relative;
    font-size: 12px;
    font-weight: 500;
}
div.d3view-inputsBuilder div.fb-multiple-container .filter-inputs input {
    display: inline-block;
    width: 19px;
    height: 17px;
    vertical-align: middle;
    margin: 0;
}
div.d3view-inputsBuilder div.fb-multiple-container .ht-container {
    margin-top: 20px;
}
/** DVFIV-1932 - uiTheme modern: top-notch dataset/handsontable UI */
div.d3view-inputsBuilder .pl-dataset-modern,
div.d3view-inputsBuilder .pl-dataset-modern.handsontable {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
div.d3view-inputsBuilder .pl-dataset-modern th {
    background: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}
div.d3view-inputsBuilder .bootstrap-select .dropdown-toggle:focus {
    outline: none!important;
    outline-offset: -2px;
    background-color: #FFF!important;
}
div.d3view-inputsBuilder .bootstrap-select .dropdown-toggle .bs-caret {
    display: none!important;
}
div.d3view-inputsBuilder .bootstrap-select .dropdown-toggle:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    margin-top: 3px;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
div.d3view-inputsBuilder .bootstrap-select .selectpicker-static-title {
    color: #4f5359;
    font-weight: bold;
    margin-right: 5px;
}

/* HT Table */
div.d3view-inputsBuilder .handsontable table,
div.d3view-inputsBuilder .handsontable tbody,
div.d3view-inputsBuilder .handsontable thead,
div.d3view-inputsBuilder .handsontable td,
div.d3view-inputsBuilder .handsontable th,
div.d3view-inputsBuilder .handsontable input,
div.d3view-inputsBuilder .handsontable textarea,
div.d3view-inputsBuilder .handsontable div {
    box-sizing: border-box!important;
    -webkit-box-sizing: border-box!important;
    -moz-box-sizing: border-box!important;
}
div.d3view-inputsBuilder .handsontable td {
    white-space: normal!important;
    vertical-align: middle;
    text-align: center;
}

div.d3view-inputsBuilder td.disabled, div.d3view-inputsBuilder td.disabled > *:not(.sparkline-container) {
    background-color: #eee;
    pointer-events: none;
}
/*div.d3view-inputsBuilder td.disabled button {*/
/*display: none;*/
/*}*/
div.d3view-inputsBuilder td.editable {
    padding: 0;
}
div.d3view-inputsBuilder td.ht-invalid {
    background-color: rgba(255,0,0,0.5)!important;
}
div.d3view-inputsBuilder td.required {
    border: 1px solid red!important;
}
div.d3view-inputsBuilder td.editable[data-type="text"],
div.d3view-inputsBuilder td.editable[data-type="number"],
div.d3view-inputsBuilder td.editable[data-type="date"],
div.d3view-inputsBuilder td.editable[data-type="datetime"] {
    border: 1px solid #4f5359;
    padding: 0;
    /*background-color: aliceblue;*/
}
div.d3view-inputsBuilder td.editable select {
    border: none;
}

div.d3view-inputsBuilder td div.cell-buttons {
    display: inline-block;
    padding: 20px;
    position: relative;
}

/* dropdowns within ht table */
div.d3view-inputsBuilder td.editable .select2-container.ht-select2 {
    height: 100%!important;
}
div.d3view-inputsBuilder td.editable .select2-container.ht-select2 a.select2-choice {
    height: 100%!important;
}
div.d3view-inputsBuilder td.editable .select2-container.ht-select2 a.select2-choice .select2-chosen {
    position: relative;
    top: 50%;
    margin-top: -10px;
}
div.d3view-inputsBuilder td.editable .select2-container.ht-select2 .select2-choice .select2-arrow b {
    position: relative;
    top: 35%;
}

div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .carousel-contents.hiddenFilters div#formbuilder-carousel .carousel-inner .carousel-slide.item ul.field-items {
    height: calc(100% - 0px)!important;
    padding: 0;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .carousel-contents.hiddenFilters div#formbuilder-carousel.carousel-body {
    height: calc(100% - 120px)!important;
}


/* SIMPLE VIEW */
div.d3view-inputsBuilder div.simple-view-heading {
    padding: 10px;
    background-color: #F5F5F5;
}
div.d3view-inputsBuilder .input-type {
    width: 10%;
    float: left;
    text-align: center;
}
div.d3view-inputsBuilder .input-name-container {
    width: 100%;
    position: relative;
    display: flex;
    float: left;
}

div.d3view-inputsBuilder div.inputs-builder-container[data-mode="build"] .input-name-container input.form-control {
    border-color: transparent;
    box-shadow: none;
}
div.d3view-inputsBuilder div.inputs-builder-container[data-mode="build"] .input-name-container input.form-control:hover {
    border-color: #ddd;
}
div.d3view-inputsBuilder div.inputs-builder-container[data-mode="build"] .input-name-container input.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

div.d3view-inputsBuilder .input-desc-popover:hover, div.d3view-inputsBuilder .input-desc-popover.open {
    color: #428bca;
}
div.d3view-inputsBuilder .input-desc-popover.hasValue {
    color: #5cb85c;
}
div.d3view-inputsBuilder .group-name {
    /*color: gray;*/
}
div.d3view-inputsBuilder select.dataSource {
    /*width: 90%;*/
}
div.d3view-inputsBuilder select.files_list {
    /*width: 90%;*/
    display: inline-block;
}
div.d3view-inputsBuilder .input-edit-icons-container.open {
    z-index: 2;
}
div.d3view-inputsBuilder:not([data-view="widgets"]) .input-edit-icons-container {
    right: 15px!important;
    top: 50%;
    transform: translateY(-50%);
}
div.d3view-inputsBuilder[data-view="widgets"] ul.field-items li.field-item {
    border: none!important;
}
/*div.d3view-inputsBuilder .input-edit-icons-container > .dropdown-toggle {*/
/*    padding: 10px;*/
/*}*/
/*div.d3view-inputsBuilder .input-edit-icons-container > .dropdown-toggle:hover,*/
/*div.d3view-inputsBuilder .input-edit-icons-container.open > .dropdown-toggle {*/
/*    background: #e8f0fe;*/
/*    color: #4f5359!important;*/
/*    border-radius: 5px;*/
/*}*/
div.d3view-inputsBuilder .input-edit-icons-container .dropdown-menu {
    width: 200px;
}

div.d3view-inputsBuilder .input-edit-icons li {
    position: relative;
}
div.d3view-inputsBuilder .input-edit-icons li > a {
    padding: 6px 20px;
    display: flex;
    align-items: center;
}
div.d3view-inputsBuilder .input-edit-icons li .pl-txt-icon {
    width: 20px;
    text-align: center;
    margin-right: 4px;
}
div.d3view-inputsBuilder .input-edit-icons li.checked:not(.disabled):after {
    position: absolute;
    content: '\f00c';
    right: 8px;
    font-family: FontAwesome;
    color: #428bca;
    top: 3px;
}
div.d3view-inputsBuilder .input-edit-icons li.checked:hover:not(.disabled):after {
    color: #FFF!important;
}

div.d3view-inputsBuilder .dropdown-submenu-left > a:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #ccc;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
}
div.d3view-inputsBuilder .dropdown-submenu-left > .dropdown-menu {
    left: -100%;
    margin-left: -2px;
    top: 0;
}
div.d3view-inputsBuilder .dropdown-submenu-left:hover > .dropdown-menu {
    display: block;
}
div.d3view-inputsBuilder .dropdown-submenu-left.disabled:hover > .dropdown-menu li {
    opacity: 0.3;
    pointer-events: none;
}
/*div.d3view-inputsBuilder .input-edit-icons-container.open > .dropdown-toggle {*/
/*    color: green;*/
/*}*/

div.d3view-inputsBuilder div.carousel-header {
    /*background: #f5f5f5;*/
    padding: 10px 0;
    /*height: 41px;*/
    border-bottom: 1px solid #DDD;
    /*display: flex;*/
    /*align-items: center;*/
    margin: 0;
}
div.d3view-inputsBuilder div.carousel-header .d3view-tab-manager {
    border-bottom: none;
    width: 100%;
}
div.d3view-inputsBuilder .inputs-view-content .carousel-contents {
    width: 100%;
}
div.d3view-inputsBuilder .inputs-view-content[data-tabs-view="vertical"] .carousel-contents {
    width: calc(100% - 180px);
}
div.d3view-inputsBuilder .inputs-view-content[data-tabs-view="vertical"] .header-contents > div {
    justify-content: flex-end;
}



div.d3view-inputsBuilder div.inputs-view-content[data-tabs-view="fb_widgets"] .nested-inputs-container .field-items {
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    max-height: 100%;
}
div.d3view-inputsBuilder .inputs-view-content[data-tabs-view="fb_widgets"] .field-items .field-item {
    position: absolute;
    /*margin-bottom: 5px;*/
    /*flex-grow: 1!important;*/
    /*flex-shrink: 1!important;*/
    /*margin-right: 10px;*/
}
div.d3view-inputsBuilder .inputs-view-content[data-tabs-view="fb_widgets"] .field-items .field-item .grid-stack-item-content {
    border: 1px solid #DDD;
}
div.d3view-inputsBuilder .inputs-view-content[data-tabs-view="fb_widgets"] .field-items .field-item .grid-stack-item-content > .row {
    height: 100%;
}

div.d3view-inputsBuilder  .inputs-view-content[data-tabs-view="fb_widgets"] .field-items .field-item .sortable-handle {
    top: 6px!important;
    right: 10px!important;
    transform: none;
    left: unset!important;
}



div.d3view-inputsBuilder .inputs-view-content .field-items .field-item.isSmall .input-options-outer {
    width: 100%!important;
    flex-wrap: wrap;
    margin-top: 10px;
}
div.d3view-inputsBuilder .inputs-view-content .field-items .field-item.isSmall .input-options-outer > * {
    flex: 0 0 calc(50% - 10px);
    text-align: center;
}

div.d3view-inputsBuilder div.carousel-header .group-title {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    margin: 0 5px;
    /*font-size: 1.3em;*/
}
div.d3view-inputsBuilder div.carousel-header .edit-icons {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
}
div.d3view-inputsBuilder div.carousel-header .edit-icons.invisible {
    visibility: hidden!important;
}
div.d3view-inputsBuilder div.carousel-header .header-title {
    display: flex;
    align-items: center;
}
div.d3view-inputsBuilder div.carousel-header .header-title .btn-group > .btn {
    padding: 3px 5px;
}
div.d3view-inputsBuilder div.carousel-header .header-title .group-title:hover .edit-icons {
    opacity: 1!important;
    visibility: visible!important;
}
div.d3view-inputsBuilder div.carousel-header .header-title .steps > .dropdown-toggle {
    /*background: none!important;*/
    /*box-shadow: none!important;*/
    /*border: none!important;*/
    /*width: 100px;*/
    /*display: flex;*/
    /*justify-content: center;*/
}
div.d3view-inputsBuilder div.carousel-header .header-title .group-name {
    display: inline-block;
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    font-size: 1.3em;
    font-weight: 500;
    white-space: nowrap;
}
div.d3view-inputsBuilder div.header-title .group-step {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}
div.d3view-inputsBuilder div.header-title .dropdown.open > .group-step,
div.d3view-inputsBuilder div.header-title .group-step:hover {
    background: #DDD;
}
div.d3view-inputsBuilder div.carousel-header .edit-icons > i {
    cursor: pointer;
}
div.d3view-inputsBuilder div.carousel-header .edit-icons > i:hover {
    color: red;
}
/*div.d3view-inputsBuilder div.carousel-header .input-search {*/
/*    display: inline-block;*/
/*    width: 60px;*/
/*    background-image: url(/images/searchicon.png);*/
/*    background-repeat: no-repeat;*/
/*    background-position: left;*/
/*    background-size: 10px;*/
/*    background-position-x: 3px;*/
/*    padding-left: 16px;*/
/*    transition: width 0.3s ease-in-out;*/
/*    height: 25px;*/
/*}*/
/*div.d3view-inputsBuilder div.carousel-header .input-search:focus {*/
/*    width: 150px!important;*/
/*}*/
/*div.d3view-inputsBuilder div.carousel-header .filters-dropdown .row {*/
/*    margin: 0;*/
/*    border-bottom: 1px solid #DDD;*/
/*    padding: 10px;*/
/*}*/
/*div.d3view-inputsBuilder div.carousel-header .filters-dropdown .row:last-child {*/
/*    border-bottom: none!important;*/
/*}*/

div.d3view-inputsBuilder div.carousel-header .inline-filters label {
    margin-bottom: 0;
}

div.d3view-inputsBuilder .required-container, div.d3view-inputsBuilder .primaryKey-container {
    text-align: left;
}
div.select2-drop .remove-tag {
    float: right;
    cursor: pointer;
    position: relative;
    top: -3px;
    right: 5px;
}
div.select2-drop .remove-tag:hover {
    color: red;
}
div.select2-drop .remove-tag > i {
    padding: 5px;
}
div.d3view-inputsBuilder li.field-item .edit-worker {
    background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%)!important;
    color: #FFF;
    font-size: 12px;
}
div.d3view-inputsBuilder .carousel-header .pagination > li > a {
    background: none;
    border: none;
}
div.d3view-inputsBuilder .carousel-header .pagination > li > a.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
div.d3view-inputsBuilder .carousel-header .pagination > li > a:hover {
    background: #DDD!important;
}

div.d3view-inputsBuilder .carousel-header .pagination,
div.d3view-inputsBuilder .carousel-header .pagination > li.steps {
    display: flex;
    align-items: center;
}
/*div.d3view-inputsBuilder li.field-item .input-value .dropdown-toggle:hover,*/
/*div.d3view-inputsBuilder li.field-item .input-value .dropdown-toggle.open > .dropdown-toggle {*/
/*    color: green;*/
/*}*/

div.d3view-inputsBuilder li.field-item .input-value-container {
    display: flex;
    align-items: center;
}
div.d3view-inputsBuilder li.field-item .input-value-container .input_dependency {
    color: dimgrey;
    margin-left: 7px;
    cursor: pointer;
}
div.d3view-inputsBuilder li.field-item .input-value-container .input_dependency[opened="1"] {
    color: #428bca;
}
/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - Value from map: not editable **/
div.d3view-inputsBuilder li.field-item .input-value-container.pl-value-from-map-disabled {
    pointer-events: none;
    opacity: 0.5;
}
div.d3view-inputsBuilder li.field-item .refresh-action,
div.d3view-inputsBuilder li.field-item .stop-action {
    color: #FFF;
}
div.fb-input-dependency.popover .worker-location {
    opacity: 0;
    /*display: none;*/
    cursor: pointer;
    color: dimgrey;
    /*max-height: initial!;*/
}
div.fb-input-dependency.popover li {
    cursor: pointer;
}
div.fb-input-dependency.popover li:hover, div.fb-input-dependency.popover li.selected {
    color: #428bca;
}
div.fb-input-dependency.popover li:hover .worker-location, div.fb-input-dependency.popover li.selected .worker-location {
    opacity: 1;
}

/*div.d3view-inputsBuilder li.field-item .input-group.input-value * {*/
/*    font-size: 10px!important;*/
/*}*/
div.d3view-inputsBuilder .geo-location-container {
    width: 100%;
    height: 200px;
}
div.d3view-inputsBuilder .input-value .select2-tag-container a.select2-choice {
    height: 30px;
}
div.d3view-inputsBuilder li.field-item .sortable-handle {
    opacity: 0;
    /*top: 50%!important;*/
    /*transform: translateY(-50%);*/

    top: 0px!important;
    left: 1px!important;
}
div.d3view-inputsBuilder li.field-item:hover .sortable-handle {
    opacity: 1!important;
}

div.d3view-inputsBuilder li.field-item .remove_from_selection {
    display: none;
}
div.d3view-inputsBuilder li.field-item.ui-selected .remove_from_selection {
    display: block!important;
}
div.d3view-inputsBuilder li.field-item.ui-selected .remove_from_selection:hover {
    color: red;
    cursor: pointer!important;
}


div.d3view-inputsBuilder li.field-item:hover {
    background-color: var(--neutralLighterAlt);
}
div.d3view-inputsBuilder li.field-item .dropdown-input-options {
    width: 35vw;
}
/*!*div.d3view-inputsBuilder li.field-item .input-config-dropdown {*!*/
/*!*    !*position: absolute;*!*!*/
/*!*    !*top: -1px;*!*!*/
/*!*    display: flex;*!*/
/*!*    !*right: -25px;*!*!*/
/*!*}*!*/
/*!*div.d3view-inputsBuilder li.field-item .input-config-dropdown > .dropdown-toggle {*!*/
/*!*    padding: 10px;*!*/
/*!*}*!*/
/*!*div.d3view-inputsBuilder li.field-item .input-config-dropdown > .dropdown-toggle:hover,*!*/
/*!*div.d3view-inputsBuilder li.field-item .input-config-dropdown.open > .dropdown-toggle {*!*/
/*!*    background: #e8f0fe;*!*/
/*!*    color: #4f5359!important;*!*/
/*!*    border-radius: 5px;*!*/
/*!*}*!*/
/*div.d3view-inputsBuilder li.field-item .input-config-dropdown ul.dropdown-menu li > a {*/
/*    font-size: 12px!important;*/
/*}*/
div.fb-input-visibility .modal-body .row {
    padding-bottom: 12px;
}

div.d3view-inputsBuilder li.field-item div.select2-container.form-control.dropdown-default-value {
    padding: 0;
    height: 28px;
    flex: 1 1 auto;
    width: auto!important;
}
div.d3view-inputsBuilder li.field-item div.select2-container.form-control.dropdown-default-value > a.select2-choice {
    height: 100%;
    border: none;
    border-radius: 0;
}
div.d3view-inputsBuilder .inputs-tab .tabmanager[data-view="vertical"] .d3view-tab-manager {
    border-bottom: none;
}

div.d3view-inputsBuilder .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse {
    opacity: 0;
}
div.d3view-inputsBuilder .bs_datatable_wrapper[data-renderer="d3"] tr:hover .column_collapse,
div.d3view-inputsBuilder .bs_datatable_wrapper[data-renderer="d3"] tr .column_collapse.opened {
    opacity: 1!important;
}

div.wf-validations-modal .selectpicker-wf a.select2-choice {
    height: 34px;
    display: flex;
    align-items: center;
}

div.ip-desc-popover {
    width: 400px!important;
    height: 250px;
}
div.ip-desc-popover .popover-content {
    height: calc(100% - 30px);
}
div.d3view-inputsBuilder li.field-item div.worker-output-preview {
    flex: 1 1 auto;
}
div.d3view-inputsBuilder li.field-item div.text-preview .preview-ace {
    height: 150px;
}
div.inputs-builder-container[data-mode="view"] li.field-item .input-value-container {
    display: block;
    width: 100%!important;
}

/** R2026-58 - compact read-only value + empty-state chips for view mode (remote_lookup value,
    dataset/curve "no data"). Kept lightweight so it reads as content, not a control. **/
div.d3view-inputsBuilder li.field-item .fb-view-value {
    padding: 6px 0;
    font-weight: 600;
    color: #1E293B;
    word-break: break-word;
}
div.d3view-inputsBuilder li.field-item .fb-view-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #94A3B8;
    background: #F8FAFC;
    border: 1px dashed #E2E8F0;
    border-radius: 8px;
}
div.d3view-inputsBuilder li.field-item .fb-view-empty .fa {
    opacity: 0.7;
}

/* ============================================================================
 * R2026-58 - view-mode modern prettify. Give each read-only input the same
 * card + clean-value-field look as the modern build editor, so view mode reads
 * as a polished summary instead of flat floating text. Scoped to the modern
 * theme + view mode so classic and build are untouched.
 * ========================================================================= */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item {
    height: auto !important;
    background: #fff;
    border: 1px solid #EEF2F6;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 6px 10px 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item:hover {
    border-color: #E2E8F0;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-name {
    margin-bottom: 10px;
    padding: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-name .field-name {
    font-weight: 600;
    color: #1E293B;
    font-size: 13px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-name .field-type {
    color: #94A3B8;
    margin-right: 6px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .fb-desc-info {
    color: #94A3B8;
    margin-left: 6px;
    font-size: 12px;
}
/* simple value types render as a clean read-only field box; complex types
   (dataset / curve / define_table / file) keep their own modern rendering. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="list"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="select"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="set"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="variety_list"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="scalar"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="number"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="integer"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="float"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="text"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="string"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="boolean"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="range"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="remote_lookup"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="unit_system"],
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value[data-type="date"] {
    background: #F8FAFC;
    border: 1px solid #E8EDF3;
    border-radius: 8px;
    padding: 9px 12px;
    color: #0F172A;
    font-weight: 500;
    min-height: 38px;
    display: flex;
    align-items: center;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value .fb-view-value {
    padding: 0;
    font-weight: 500;
}
/* the description now lives in the hover popover (fb-desc-info); drop the inline
   description block + any empty helper rows so the card stays tight. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item > .col-md-12.input-desc-outer {
    display: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .list-ip-selected-desc:empty {
    display: none;
}

div.d3view-inputsBuilder li.field-item .dataset-preview,
div.d3view-inputsBuilder li.field-item .define_table-preview,
div.d3view-inputsBuilder li.field-item .kv-preview {
    height: 200px;
}

/** DVFIV-1917 - modern-compact: scoped to li.field-item, ellipsis on hover, modern UI */
.d3view-inputsBuilder li.field-item .input-value-actions-modern-compact {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    background: #FFF;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.d3view-inputsBuilder li.field-item:hover .input-value-actions-modern-compact {
    opacity: 1;
}
.d3view-inputsBuilder li.field-item .input-value-actions-ellipsis .dropdown-toggle {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #475569;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.d3view-inputsBuilder li.field-item .input-value-actions-ellipsis .dropdown-toggle:hover {
    background: #F1F5F9;
    border-color: #cbd5e1;
    color: #1E293B;
}
.d3view-inputsBuilder li.field-item .input-value-actions-modern-compact .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border: 1px solid #E2E8F0;
}
.d3view-inputsBuilder li.field-item[data-field-items-view-type="modern-compact"] .input-name .field-name {
    color: #1E293B;
}
.d3view-inputsBuilder li.field-item[data-field-items-view-type="modern-compact"] .input-name .field-type {
    color: #94A3B8;
}

div.d3view-inputsBuilder .tree-view li.tree-list-item.unfilled > .item-label > .tv-content .ti-name {
    color: red!important;
}


























/* DATA FILTERS */
div.d3view-data-filters .twitter-typeahead {
    display: block!important;
}
div.d3view-data-filters .condition-remove {
    cursor: pointer;
}
div.d3view-data-filters .condition-remove:hover {
    color: red;
}
div.d3view-data-filters.tinyContainer .data-filters-body .filters-list div.form-group > div.row > div {
    width: 100%;
}
div.d3view-data-filters .data-filters-body .filters-list {
    max-height: calc(100% - 90px);
    overflow: auto;
    overflow-x: hidden;
    border: 1px solid #DDD;
    padding: 13px;
}

div.d3view-data-filters .data-filters-body .filters-list > .form-group:last-child .filter-separator {
    display: none;
}

div.d3view-data-filters .control-btn {
    display: inline-block;
    padding: 5px 0;
    cursor: pointer;
    text-decoration: none;
}
div.d3view-data-filters .control-btn-danger {
    color: red;
}
div.d3view-data-filters .control-btn:hover {
    background-color: #f5f5f5;
}
div.d3view-data-filters .control-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
div.d3view-data-filters .df-summary-panel {
    width: 250px;
    margin: 10px;
}
div.d3view-data-filters .df-summary-panel:first-child {
    margin-left: 0!important;
}
div.d3view-data-filters .df-summary-panel .vlist > div {
    max-height: 250px;
    border: none!important;
}
div.d3view-data-filters .df-summary-panel .vrow {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
    padding-left: 0;
    cursor: grab;
}
div.d3view-data-filters .df-summary-panel .vrow:hover {
    background-color: #f5f5f5;
}
div.d3view-data-filters .quick-picks-cont [data-key].ui-draggable-dragging {
    max-width: 200px!important;
}
div.d3view-data-filters .quick-picks-cont [data-key] {
    margin: 2px;
    cursor: pointer;
    /*max-width: 49%;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.d3view-data-filters .quick-picks-cont [data-key].active {
    background-color: #d3f4ff73;
}
div.d3view-data-filters .quick-picks-cont [data-key] .key {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    margin-right: 6px;
}
div.d3view-data-filters .quick-picks-cont [data-key]:hover {
    background-color: #f5f5f5;
}
.vrow-drag, .vrow.ui-draggable-dragging {
    z-index: 4000;
    position: fixed!important;
    width: auto!important;
    display: flex;
    background: #FFF;
    border: 1px solid #DDD;
    padding: 10px;
    height: auto!important;
}


/** from Subrata **/
.input-action-view .wf-input-action-title {
    /*border-bottom: 1px solid #ddd;*/
}
.input-action-view .ag-action.highlighted {
    background: lightyellow;
}

.input-action-view .modal-body {
    padding: 10px;
}

.input-action-view .wf-input-action-list {
    min-height: 200px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.input-action-view .wf-input-action-list:not([data-view="flex"]) {
    height: calc(100% - 50px);
}
.input-action-view .wf-input-action-list[data-view="table"] .wf-action-item {
    border: none;
}
.input-action-view .wf-input-action-list[data-view="table"] .toggle-action > .fa {
    display: none;
}
.input-action-view .wf-edit-action-name,
.input-action-view .wf-clone-action {
    display: none;
}
.input-action-view .wf-action-item.isEditingName .wf-edit-action-name {
    display: none!important;
}
.input-action-view .wf-action-item:hover .wf-edit-action-name,
.input-action-view .wf-action-item:hover .wf-clone-action {
    display: block;
}

.input-action-view .ag-action.hasError {
    border-left: 2px solid red;
}
.input-action-view .ag-action.hasError .toggle-action {
    color: red;
}

.input-action-view .dt-container tr.isEditing td:first-child {
    border-left-color: orange!important;
    border-left-width: 5px!important;
}

/*.input-action-view .wf-input-action-list:is(:empty)::before {*/
/*    content: 'No actions found.';*/
/*    padding: 10px;*/

/*    display: block;*/
/*    !* color: #777; *!*/

/*    background-image: -webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);*/
/*    background-image: -o-linear-gradient(top,#d9edf7 0,#b9def0 100%);*/
/*    background-image: -webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));*/
/*    background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);*/
/*    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);*/
/*    background-repeat: repeat-x;*/
/*    border-color: #9acfea;*/
/*    padding: 15px;*/
/*    border-radius: 4px;*/
/*    color: #31708f;*/
/*    text-shadow: 0 1px 0 rgba(255,255,255,.2);*/
/*    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);*/
/*    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);*/
/*}*/

.input-action-view .action-group {
    border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 15px;
}
.input-action-view .action-group .wf-action-item {
    border: none;
}

.input-action-view .wf-action-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    gap: 1rem;
    padding: 10px;
}

.input-action-view .wf-action-item:hover .action-handle-icon {
    visibility: visible;
}

.input-action-view .action-handle-icon {
    padding: 5px 10px;
    font-size: large;
    visibility: hidden;
}

.input-action-view .action-handle-icon:hover {
    cursor: move;
}

.input-action-view .action-list-item-main-container {
    flex: 1 1 auto;
}

.input-action-view .wf-action-item:not(:last-child) {
    margin-bottom: 20px;
}

.input-action-view .action-container {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}
.input-action-view .action-value span.twitter-typeahead, .input-action-view .action-value .tt-menu {
    width: 100%;
}


.input-action-view .wf-input-action-list[data-view="flex"] {
    display: flex;
    flex-wrap: wrap;
}
.input-action-view .wf-input-action-list[data-view="flex"]  > div {
    flex: 0 0 calc(50% - 20px);
    margin-right: 10px;
    height: 90%;
    overflow: auto;
    align-items: baseline;
}

.input-action-view .wf-input-action-list[data-view="flex"] div.action-row > .full-w {
    display: block;
    position: relative;
    padding-top: 30px;
}
.input-action-view .wf-input-action-list[data-view="flex"] div.action-row > .full-w .remove-condition {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 2;
}
.input-action-view .wf-input-action-list[data-view="flex"] div.action-row > .full-w > div {
    width: 100%!important;
    margin-bottom: 10px;
}
.input-action-view .wf-input-action-list[data-view="flex"] .wf-change-input {
    display: block;
    position: relative;
    padding-top: 30px;
}
.input-action-view .wf-input-action-list[data-view="flex"] .wf-change-input .action-change-input-remove {
    position: absolute;
    z-index: 2;
    top: 0px;
    right: 10px;
}
.input-action-view .wf-input-action-list[data-view="flex"] .wf-change-input  > div {
    width: 100%!important;
    margin-bottom: 10px;
}
.input-action-view .wf-input-action-list[data-view="flex"] .wf-after-change {
    display: block;
}
.input-action-view .wf-input-action-list[data-view="flex"] .wf-after-change  > div {
    margin-bottom: 10px;
}
.input-action-view .wf-input-action-list[data-view="flex"]  .action-handle-icon {
    display: none;
}

.input-action-view .action-value {
    flex: 1 1 auto;
}


.input-action-view .wf-change-input {
    display: flex;
    gap: 1rem;
    padding: 15px 0px;
    border-bottom: 1px solid #ddd;
    align-items: flex-start;
}
.input-action-view.d3view-plugins-sidebar .wf-change-input {
    flex-wrap: wrap;
}
.input-action-view.d3view-plugins-sidebar .wf-change-input > div {
    width: 50%!important;
    flex: 0 0 calc(50% - 20px);

}
.input-action-view.d3view-plugins-sidebar .wf-change-input > div.dependent-input-div {
    flex: 0 0 calc(100% - 20px);
}


.input-action-view .wf-after-change {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 1rem;
}


.input-action-view .dependent-input-name-lable {
    /*margin: 8px 0px 5px 0px;*/
}

.input-action-view a.select2-choice {
    height: 34px;
    display: flex;
    align-items: center;
}
.input-action-view .actions-table tbody tr {
    height: 60px;
}
.input-action-view .actions-table tbody tr th,
.input-action-view .actions-table tbody tr td {
    vertical-align: middle;
}
.input-action-view .actions-table tbody th:first-child {
    font-size: 1.2em;
}
.input-action-view .actions-table tbody tr.highlighted {
    background-color: lightyellow;
}
.input-action-view .d3view-viz[data-charttype="tree"] .plot-txt.clicked .node-name {
    color: #428bca;
}









.carousel-slide-body .fb-input-highlighter {
    position: absolute;
    height: 100%;
    width: 5px;
    background: steelblue;
    top: 0px;
    left: 3px;
    border-radius: 3px;
}

.wf-validations-modal .add_validation_item {
    margin-left: 6px;
}
.d3view-inputsBuilder li.field-item .conditions-container .validation-list-item {
    border: 1px solid #DDD;
    padding: 10px;
    margin-bottom: 10px !important;
    border-radius: 5px;
}
.d3view-inputsBuilder li.field-item .conditions-container .validation-list-item .remove_validation:hover {
    color: red;
}
.d3view-inputsBuilder li.field-item .conditions-container .validation-list-item > div {
    width: calc(100% - 40px);
    text-align: left;
    padding: 0;
    margin-bottom: 10px;
}


.fb-ext-workers-body .wf-workers-container .selected-count {
    display: none!important;
}

div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg {
    margin: 15px 0;
    text-align: left;
    padding: 0 15px;
    position: relative;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg.active .group-header:after {
    content: 'active';
    margin-left: 10px;
    color: lightgrey;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-name {
    text-align: left;
    padding: 10px;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-inputs {
    margin-left: 20px;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-inputs .subgroup .field-items {
    padding-left: 20px;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg li.field-item {
    border-bottom: none;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg li.field-item > .row {
    padding-left: 0;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-inputs .subgroup .subgroup-header {
    margin-bottom: 12px!important;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-inputs .subgroup .subgroup-header .lead {
    font-weight: 450;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-inputs .subgroup .subgroup-header:hover,
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg > .group-header:hover {
    color: steelblue;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .inputs-group.nvg ul.field-items {
    min-height: 200px;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .nested-inputs-container .field-items {
    height: 100%;
    padding-right: 10px;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .nested-left {
    background: #FFF!important;
    box-shadow: none;
}

div.d3view-inputsBuilder .nested-generic-list .nested-groups-header {
    display: flex;
    flex-wrap: wrap;
    box-shadow: none;
}
div.d3view-inputsBuilder .nested-generic-list .nested-groups-header li {
    border: 1px solid #DDD!important;
    border-radius: 10px;
    margin: 0 5px;
    cursor: pointer;
}
div.d3view-inputsBuilder .nested-generic-list .nested-groups-header li:hover {
    background-color: #f5f5f5;
}

div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .ui-layout-container > div {
    height: 100%!important;
}
div.d3view-inputsBuilder div.inputs-view-content[data-id="nested"] .ui-layout-container > div.nested-inputs-list {
    width: unset!important;
}

div.d3view-inputsBuilder .scheduler-inputs > div {
    margin: 0 10px;
    float: left;
}
div.d3view-inputsBuilder .scheduler-inputs > div:first-child {
    margin-left: 0;
}

div.d3view-inputsBuilder li.field-item .rm-link-fb .inputs-builder-container {
    padding: 0;
}
div.d3view-inputsBuilder li.field-item .rm-link-fb .field-name {
    font-size: unset;
}
div.d3view-inputsBuilder li.field-item .rm-link-fb li.field-item.required {
    color: unset;
}
div.d3view-inputsBuilder li.field-item .remove-ip-file {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}
div.d3view-inputsBuilder li.field-item .ip-file-item .pl-label-modern {
    color: #555;
}
div.d3view-inputsBuilder li.field-item .ip-file-item {
    margin: 5px;
}
div.d3view-inputsBuilder li.field-item .ip-file-item.ui-sortable-placeholder {
    width: 150px;
    height: 30px;
    background-color: yellow;
    visibility: visible!important;
    border-radius: 20px;
}
div.d3view-inputsBuilder li.field-item .ip-file-item:hover .remove-ip-file {
    opacity: 1;
    pointer-events: all;
}
div.d3view-inputsBuilder li.field-item .ip-file-item:hover .remove-ip-file:hover,
div.d3view-inputsBuilder li.field-item .ip-file-item:hover .file-editor:hover {
    color: red;
}
div.d3view-inputsBuilder li.field-item .ip-file-item .file-view:hover {
    background: #428bca;
    color: #FFF;
}

/** Added by shashank2104 on 2026-07-02 - responsive file-list wrapping (no inline flex-wrap) **/
div.d3view-inputsBuilder li.field-item .ip-files-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    /* let the list shrink inside its column so wide pills wrap instead of overflowing */
    min-width: 0;
    max-width: 100%;
}
/* gap owns the spacing now; drop the per-item margin to avoid double gaps */
div.d3view-inputsBuilder li.field-item .ip-files-list > .ip-file-item {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}
/* long filenames wrap within the pill rather than forcing horizontal overflow */
div.d3view-inputsBuilder li.field-item .ip-files-list > .ip-file-item .file-view {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    text-align: left;
    vertical-align: top;
}


/** textarea **/
div.d3view-inputsBuilder li.field-item .remove-textarea-file {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}
div.d3view-inputsBuilder li.field-item .ip-file-item {
    margin: 5px;
}
div.d3view-inputsBuilder li.field-item .ip-file-item:hover .remove-textarea-file {
    opacity: 1;
    pointer-events: all;
}
div.d3view-inputsBuilder li.field-item .ip-file-item:hover .remove-textarea-file:hover {
    color: red;
}
div.d3view-inputsBuilder li.field-item .ip-file-item .textview:hover {
    background: #428bca;
    color: #FFF;
}


@media screen and (max-width: 1440px) {
    div.d3view-inputsBuilder li.field-item .input-group.input-value .btn-group-justified .btn span:not(.fa) {
        display: none;
    }
}
div.d3view-inputsBuilder.miniWidth li.field-item .input-group.input-value .btn-group-justified .btn span:not(.fa) {
    display: none;
}

div.d3view-inputsBuilder li.field-item .fb-input-toolbar {
    clear: both;
}

div.d3view-inputsBuilder .fb-toolbar-options .dropdown-submenu-left > a:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #ccc;
    top: 14px;
    /*transform: translateY(-50%);*/
    left: 15px;
}
div.d3view-inputsBuilder .fb-toolbar-options .dropdown-submenu-left > .dropdown-menu {
    left: auto;
    right: 100%;
    margin-right: -2px;
    top: 0;
}
div.d3view-inputsBuilder .fb-toolbar-options .dropdown-submenu-left:hover > .dropdown-menu {
    display: block;
}
div.d3view-inputsBuilder .fb-toolbar-options .curve-appearance-dd.open > .dropdown-menu {
    display: block;
}


.d3view-context-menu-container.fb-inputs {
    width: 300px;
}

.d3view-ff-map .dt-table thead th {
    width: 50%;
}


.fb-cells-to-inputs .d3view-inputsBuilder {
    min-height: unset;
}

.fb-configure-main-ds span.word-tag {
    height: 34px;
    display: flex;
    align-items: center;
    margin: 5px;
    margin-top: 0;
    padding: 5px 10px;
    padding-right: 15px;
    background-color: rgba(91, 192, 222, 0.2);
    border: 1px solid rgb(91 192 222);
    border-radius: 6px;
    min-width: 50px;
    position: relative;
}
.fb-configure-main-ds span.word-tag .pl-editable {
    color: #000;
    width: 100%;
}


.fb-configure-main-ds .remove-word-tag {
    position: absolute;
    right: 0px;
    top: -7px;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.fb-configure-main-ds span.word-tag:hover .remove-word-tag {
    opacity: 1;
    pointer-events: all;
}
.fb-configure-main-ds span.word-tag:hover .remove-word-tag:hover {
    color: red;
}

.d3view-inputsBuilder li.field-item .output-quick-view[data-type="dataset"] {
    padding: 4px 10px;
    word-break: break-all;
}
.d3view-inputsBuilder li.field-item .output-quick-view[data-type="dataset"]:hover {
    background: #f8f8f8;
    cursor: pointer;
}

.fb-configure-main-ds .dropzone .file-info {
    border: 1px solid #DDD;
    padding: 5px;
    border-radius: 5px;
    max-width: 200px;
}
.fb-configure-main-ds .dropzone .file-info .view-main-file {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

.d3view-fb-file-rules-matcher .file-rules li[data-id].has-success {
    border-left: 5px solid green;
}
.d3view-fb-file-rules-matcher .file-rules li[data-id].has-error {
    border-left: 5px solid red;
}

div.d3view-inputsBuilder .fb-search-dd tbody tr:hover,
div.d3view-inputsBuilder .fb-search-dd tr.navigated {
    background-color: #f5f5f5;
}
div.d3view-inputsBuilder .fb-search-dd table tbody td {
    word-break: break-all;
    vertical-align: middle;
}

div.d3view-inputsBuilder .d3view-fb-modern-widgets ul.groups-list.nav.nav-pills li {
    width: calc(100% - 3px);
    margin-bottom: 5px;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets ul.groups-list.nav.nav-pills li.active > a {
    border-radius: 20px;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets ul.groups-list.nav.nav-pills li > a {
    padding-left: 15px;
    /*transition: background-color 0.3s ease-in;*/
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack {
    overflow: hidden!important;
    min-height: 100px;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack:empty:before {
    content: 'Drop inputs here';
    position: absolute;
    top: 10px;
    left: 10px;
    color: dimgrey;
    pointer-events: none;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item {
    width: calc(33% - 10px);
    margin: 5px;
    border-radius: 6px;
    padding: 4px;
    float: left;
    /*height: 150px!important;*/
    border-bottom: none;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets li.field-item:not(.editing) .manual_vector_input {
    display: none;
}
.d3view-fb-modern-widgets .widget-input-buttons {
    /* background: #FFF; */
    /* padding: 5px; */
    width: 70px;
}
.d3view-fb-modern-widgets li.field-item:not(.editing) .input-name {
    width: calc(100% - 70px)!important;
}
.d3view-fb-modern-widgets li.field-item:not(.editing) .input-value-container {
    padding-left: 0;
}
.d3view-fb-modern-widgets li.field-item:not(.editing) .widget-ip-edit {
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.d3view-fb-modern-widgets li.field-item:not(.editing):hover .widget-ip-edit {
    opacity: 1;
    pointer-events: all;
}
.d3view-fb-modern-widgets li.field-item:not(.editing) .widget-ip-edit:hover {
    color: red;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item.editing {
    width: 100%!important;
    height: auto!important;
    border-left: 3px solid orange !important;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item.editing .widget-ip-edit {
    display: none;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .btn-group.btn-group-justified .btn *:not(.fa):not(.fas) {
    display: none;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .ds-info-text p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .input-value[data-type="dataset"],
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .input-value[data-type="define_table"],
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .input-value[data-type="define_table_3d"],
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .input-value[data-type="keyvalue"] {
    display: block;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .ip-val-icon {
    display: inline;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item textarea[data-inputvalue="value"] {
    height: 50px!important;
    min-height: unset!important;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item .ui-resizable-handle {
    display: none!important;;
}
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item:not(.editing):hover .ui-resizable-handle,
div.d3view-inputsBuilder .d3view-fb-modern-widgets .grid-stack li.field-item:not(.editing).ui-resizable-resizing {
    display: block!important;;
}


/*div.d3view-inputsBuilder .input-desc-outer {*/
/*    display: none;*/
/*}*/
/*div.d3view-inputsBuilder li.field-item:hover .input-desc-outer {*/
/*    display: block;*/
/*}*/

/*div.d3view-inputsBuilder .inputs-tab[data-ip-desc-on-hover="true"] li.field-item .input-desc-outer {*/
/*    display: none;*/
/*}*/
/*div.d3view-inputsBuilder .inputs-tab[data-ip-desc-on-hover="true"] li.field-item:hover .input-desc-outer {*/
/*    display: block;*/
/*}*/


div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) .inputs-tab[data-ip-desc-on-hover="true"] li.field-item .input-desc-outer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 50%; /* or any desired width */
    max-width: 100%;

    /* Add a small arrow at the top */
    &:before {
        content: '';
        position: absolute;
        top: -8px;
        left: 20px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #ddd;
    }

    &:after {
        content: '';
        position: absolute;
        top: -7px;
        left: 20px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid white;
    }
}

/* Show description on hover */
div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) .inputs-tab[data-ip-desc-on-hover="true"] li.field-item:hover .input-desc-outer {
    display: block;
}

/* Optional: Add transition effect */
div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) .inputs-tab[data-ip-desc-on-hover="true"] li.field-item .input-desc-outer {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) .inputs-tab[data-ip-desc-on-hover="true"] li.field-item:hover .input-desc-outer {
    opacity: 1;
    visibility: visible;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - description hover,
 * redesigned (mockup Option A).
 *
 * BEFORE: hovering ANYWHERE on the row revealed .input-desc-outer at
 * top:100% — i.e. directly on top of the NEXT field's input. Reaching
 * for a control fired it and it blocked the control you were aiming at.
 *
 * NOW: only the info icon triggers it, and the panel is mounted on
 * <body> and positioned to the SIDE of the icon by JS (see
 * m.inputDescriptionTip in fb_list.js), so it never overlaps a field.
 * The in-row .input-desc-outer is kept as the hidden CONTENT SOURCE so
 * the template and any other consumers are untouched.
 * ===================================================================== */

/* The old row-hover overlay is fully retired. Its trigger attribute was renamed
 * (data-ip-desc-on-hover -> data-ip-desc-tip) in the template precisely so the
 * stale bundled CSS can no longer match anything; the in-row source div is also
 * hidden inline, so no rule is needed here to suppress it. */

/* the trigger */
div.d3view-inputsBuilder li.field-item .fb-desc-info {
    margin-left: 6px;
    color: var(--fbm-muted, #94a3b8);
    font-size: 13px;
    cursor: help;
    vertical-align: middle;
    transition: color var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
}
div.d3view-inputsBuilder li.field-item .fb-desc-info:hover,
div.d3view-inputsBuilder li.field-item .fb-desc-info:focus {
    color: var(--fbm-accent, #3b82f6);
    outline: none;
}
div.d3view-inputsBuilder li.field-item .fb-desc-info:focus-visible {
    outline: 2px solid var(--fbm-accent, #3b82f6);
    outline-offset: 2px;
    border-radius: 50%;
}

/* ---------------------------------------------------------------
 * The panel is BODY-MOUNTED, so it lives outside .d3view-inputsBuilder
 * and cannot be scoped under the plugin root — same documented
 * exception as select2's .select2-drop and the modern multiselect
 * menus. The --fbm-* tokens are declared on the FormBuilder root and
 * do NOT inherit here, so this block re-aliases them from --d3v-*.
 * --------------------------------------------------------------- */
.fb-desc-pop {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));

    position: fixed;
    z-index: 10050;                 /* above modals (bs3 modal = 1050) */
    width: 290px;
    max-width: calc(100vw - 24px);
    background: var(--fbm-bg);
    color: var(--fbm-text);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-y: auto;
    /* show/hide is driven by an INLINE display toggle from JS so the panel still
       behaves on pages whose bundled CSS predates this block; opacity only fades. */
    opacity: 0;
    transition: opacity var(--fbm-t);
}
.fb-desc-pop.is-open {
    opacity: 1;
}
.fb-desc-pop p {
    margin: 0;
}
/* arrow — side flips with the panel via .flip-left */
.fb-desc-pop:before {
    content: '';
    position: absolute;
    top: var(--fb-desc-arrow-top, 50%);
    left: -7px;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background: var(--fbm-bg);
    border-left: 1px solid var(--fbm-border);
    border-bottom: 1px solid var(--fbm-border);
    transform: rotate(45deg);
}
.fb-desc-pop.flip-left:before {
    left: auto;
    right: -7px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid var(--fbm-border);
    border-top: 1px solid var(--fbm-border);
}
/* no room either side -> panel sits below the icon, arrow points up */
.fb-desc-pop.flip-below:before {
    top: -7px;
    left: var(--fb-desc-arrow-left, 20px);
    right: auto;
    margin-top: 0;
    border-left: 1px solid var(--fbm-border);
    border-top: 1px solid var(--fbm-border);
    border-right: 0;
    border-bottom: 0;
}
/*div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) div.inputs-tab[data-ip-desc-on-hover="true"] ul.field-items li.field-item {*/
/*    border: 1px solid transparent;*/
/*}*/
/*div.d3view-inputsBuilder .inputs-builder-container:not([data-mode="build"]) div.inputs-tab[data-ip-desc-on-hover="true"] ul.field-items li.field-item:hover {*/
/*    box-shadow: var(--plugin-box-shadow-lightest);*/
/*}*/

div.d3view-inputsBuilder li.field-item button.reset-to-default {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 3;
}

div.d3view-inputsBuilder div.inputs-builder-container[data-mode="submit"] li.field-item.required[data-invalid="true"] {
    background-image: linear-gradient(135deg, rgb(252, 245, 245), rgb(252, 203, 203)) !important;
    border-radius: 6px;
}

div.d3view-inputsBuilder div.inputs-builder-container[data-mode="submit"] li.field-item.required[data-modified="true"] {
    background-image: linear-gradient(135deg, rgb(246, 246, 246), rgb(187, 213, 234))!important;
    border-radius: 6px;
}


div.d3view-inputsBuilder .sortable-ghost * {
    background-color: whitesmoke!important;
}

div.d3view-inputsBuilder .sortable-drag * {
    background-color: lightyellow!important;
}

div.d3view-inputsBuilder .row-drop-target * {
    background-color: lightgreen!important;
}

div.d3view-inputsBuilder li.before-sortable-placeholder:not(.ui-sortable-helper) {
    background-color: lightgreen!important;
}

.wf-input-label.list-group-item.ui-draggable.ui-draggable-handle.ui-draggable-dragging {
    pointer-events: none;
}

div.d3view-inputsBuilder li.field-item .remove-list-option {
    cursor: pointer;
}
div.d3view-inputsBuilder li.field-item .remove-list-option:hover {
    color: red;
}
div.d3view-inputsBuilder li.field-item  .list-input-tags.pl-search-tags > [data-key] {
    font-size: unset;
}


div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value [data-inputvalue="value"],
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .edit-curve-in-sheets,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .edit_curve,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .remove-from-default,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .curve-appearance-dd,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .wf-dropzone,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .choose_sample,
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .edit-curve-in-spline-editor {
    opacity: 0.5!important;
    pointer-events: none;
}
div.d3view-inputsBuilder li.field-item div[data-has-converted-value="true"][data-value-displayed="converted"] .input-group.input-value .handsontable_container {
    opacity: 0.5!important;
}

.d3view-inputsBuilder .original-value-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #FFF;
    z-index: 20;
}

/* References dropdown hover effects */
div.d3view-inputsBuilder .ip-references-container .dep-workers-list table tbody tr .btn-group {
    opacity: 0;
    transition: opacity 0.2s ease;
}

div.d3view-inputsBuilder .ip-references-container .dep-workers-list table tbody tr:hover .btn-group {
    opacity: 1;
}

div.d3view-inputsBuilder .ip-references-container .dep-workers-list table tbody tr .btn-group .btn {
    padding: 2px 6px;
    margin: 0 1px;
}

/* Tree view search filtering */
div.d3view-inputsBuilder .nested-tv .tree-list-item.tree-search-hidden {
    opacity: 0.3;
    pointer-events: none;
}
div.d3view-inputsBuilder .nested-inputs-list .nested-child-link.tree-search-hidden {
    opacity: 0.3;
    pointer-events: none;
}

/* Clear search button styling */
div.d3view-inputsBuilder .clear-search {
    color: #999;
    transition: color 0.2s ease;
}

div.d3view-inputsBuilder .clear-search:hover {
    color: #666;
}

/* Visual indicator for showing all filtered inputs */
div.d3view-inputsBuilder .nested-tv .tree-list-item.showing-all-filtered > .item-label {
    background-color: #e8f4fd;
    border-left: 3px solid #428bca;
    position: relative;
}

div.d3view-inputsBuilder .nested-tv .tree-list-item.showing-all-filtered > .item-label {
    color: #428bca;
    font-weight: 500;
}

div.d3view-inputsBuilder .nested-tv .tree-list-item.showing-all-filtered > .item-label:after {
    content: '\f0b0';
    font-family: FontAwesome;
    margin-left: 8px;
    color: #428bca;
    font-size: 12px;
}

div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .inputs-view-content:not([data-id="simple"]) li.field-item .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .all-inputs-list li.field-item .input-options-outer {
    opacity: 0;
    pointer-events: none;
}
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .inputs-view-content:not([data-id="simple"]) li.field-item:hover .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .all-inputs-list li.field-item :hover .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .inputs-view-content:not([data-id="simple"]) li.field-item.hasDDOpen .input-options-outer,
div.d3view-inputsBuilder .inputs-builder-container[data-mode="submit"] .all-inputs-list li.field-item.hasDDOpen .input-options-outer {
    opacity: 1;
    pointer-events: all;
}

/** Added by shashank2104 on 09/29/2025 at 01:45 PM - DW-2376 - sortable list options styling */
.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody.sortable-mode tr {
    cursor: move !important;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody.sortable-mode tr:hover {
    background-color: #f5f5f5;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody .sortable-ghost {
    opacity: 0.4;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody .sortable-chosen {
    background-color: #e3f2fd !important;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody .sortable-drag {
    background-color: #bbdefb !important;
}

.d3view-inputsBuilder li.field-item .reorder-list-options.active {
    background-color: #007bff;
    color: white;
}

.d3view-inputsBuilder li.field-item .list-option-grip {
    display: none;
    margin-right: 8px;
    color: #999;
    cursor: move;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody.sortable-mode .list-option-grip {
    display: inline-block;
}

.d3view-inputsBuilder li.field-item .dropdown-values-list table tbody.sortable-mode tr:hover .remove-list-option {
    display: none !important;
}

/** Added by shashank2104 on 09/30/2025 at 06:14 PM - DW-2396 - drag placeholder styling */
/** Updated by shashank2104 on 01/02/2026 at 12:51 PM - DW-2590 - added pointer-events none to prevent flickering **/
.d3view-inputsBuilder .drag-placeholder {
    height: 80px;
    background: lightyellow;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin: 0 10px;
    /* padding: 10px; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1976d2;
    font-weight: 500;
    font-size: 1.4em;
    position: relative;
    pointer-events: none;
    /* animation: dragPlaceholderPulse 2s ease-in-out infinite; */
    /* box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2); */
}

.d3view-inputsBuilder .drag-placeholder:before {
    content: '\f067';
    font-family: FontAwesome;
    margin-right: 8px;
    /* font-size: 16px; */
}

.d3view-inputsBuilder .drag-placeholder:after {
    content: 'Drop input here';
    /* font-size: 12px; */
    opacity: 0.8;
}

/*.d3view-inputsBuilder ul.field-items.drag-active {*/
/*    background-color: #f8f9fa;*/
/*    border: 1px dashed #dee2e6;*/
/*    border-radius: 4px;*/
/*    transition: background-color 0.2s ease;*/
/*}*/

/** Added by shashank2104 on 01/02/2026 at 12:51 PM - DW-2590 - ensure field-items container has enough space at bottom for easy dropping **/
.d3view-inputsBuilder ul.field-items.drag-active {
    padding-bottom: 100px;
}

/** Added by shashank2104 on 01/02/2026 at 12:51 PM - DW-2590 - show drag placeholder message when dragging over empty form **/
.d3view-inputsBuilder ul.field-items.drag-active.fb-empty:before,
.d3view-inputsBuilder ul.field-items.drag-active:empty:before {
    content: 'Drag inputs from the list and drop here';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: calc(100% - 20px);
    color: #6c757d;
    font-style: italic;
    font-size: 18px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background: lightyellow;
    margin: 20px 10px;
}

/** Hide the kickstarter no-data when dragging over empty form **/
.d3view-inputsBuilder ul.field-items.drag-active.fb-empty + .no-data,
.d3view-inputsBuilder ul.field-items.drag-active:empty + .no-data {
    display: none !important;
}
.d3view-inputsBuilder ul.field-items.drag-active.fb-empty:before {
    height: calc(100% - 50px);
}

/** Added by shashank2104 on 09/30/2025 at 06:14 PM - DW-2396 - hovered field item styling */
.d3view-inputsBuilder li.field-item.hovered {
    /*background-color: #e3f2fd !important;*/
}
.wf-input-label.list-group-item.ui-draggable.ui-draggable-handle.ui-draggable-dragging  .sample-input-options {
    display: none;
}
/* ===================================================================== *
 * Added by shashank2104 on 2026-07-20 - R2026-46 - Modern input-group
 * addons (peek / attach / rich-edit / download) + inputs. Opt-in: only
 * applies under the modern FormBuilder theme (data-ui-theme="modern");
 * default rendering everywhere else is untouched.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* input / textarea */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .form-control {
    border: 1px solid var(--fbm-border);
    border-top-left-radius: var(--fbm-r);
    border-bottom-left-radius: var(--fbm-r);
    box-shadow: none;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .form-control:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    position: relative;
    z-index: 3;
}
/* input with no addon -> round both sides */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .form-control:last-child {
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
}

/* addon icon buttons (eye / paperclip / download etc.) */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group-addon.btn {
    background: var(--fbm-bg-2);
    border: 1px solid var(--fbm-border);
    border-left: 0;
    color: var(--fbm-muted);
    min-width: 38px;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0;
    transition: background var(--fbm-t), color var(--fbm-t), border-color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group-addon.btn:hover {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    border-color: var(--fbm-border);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group-addon.btn:last-child {
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
}

/* rich-edit / configure pen = primary accent tint */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-config-dropdown .dropdown-toggle.btn {
    background: var(--fbm-bg-2);
    border: 1px solid var(--fbm-border);
    border-left: 0;
    color: var(--fbm-accent);
    min-width: 38px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0;
    transition: background var(--fbm-t), color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-config-dropdown:last-child .dropdown-toggle.btn {
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-config-dropdown .dropdown-toggle.btn:hover {
    background: var(--fbm-accent-soft);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - modern field-item
 * rhythm. Two scopes, deliberately different:
 *   - the row divider is dropped for the whole modern theme;
 *   - the extra breathing room applies ONLY to the end-user form modes
 *     (submit / view), where fields are read top-to-bottom. build mode
 *     keeps its tighter rhythm so the builder still fits on screen.
 * `data-ui-theme` lives on .d3view-inputsBuilder, `data-mode` on the
 * inner .inputs-builder-container — hence the split selector.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item > .row,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .field-item-contents {
    border-bottom: none !important;
}

/* submit / view only — looser vertical rhythm. ul.field-items.form-flex is a
   flex container with row-gap: 20px; bump it rather than adding margins so
   nothing double-counts. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] ul.field-items.form-flex,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] ul.field-items.form-flex {
    row-gap: 32px;
}

/* non-flex lists (older inputsViews) get the same spacing via margin */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] ul.field-items:not(.form-flex) > li.field-item,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] ul.field-items:not(.form-flex) > li.field-item {
    margin-bottom: 20px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * select2 controls that opt out of multiselect (`disableMultiSelect` /
 * `inputs-by-type`). Those inputs keep select2 for its inline type-to-
 * search, so this is a VISUAL match only: same radius / border / focus
 * ring / row rhythm as the modern multiselect (`ms-modern`), so the two
 * read as one control family.
 *
 * Opt-in via the `fb-select2-modern` class the submit path adds only when
 * uiTheme === 'modern'; classic select2 everywhere else is untouched.
 *
 * NOTE: the CLOSED control lives inside the builder, so it is scoped the
 * usual way. The DROPDOWN is appended to <body>, i.e. OUTSIDE
 * .d3view-inputsBuilder, so `.select2-drop.fb-select2-modern` cannot be
 * scoped under [data-ui-theme="modern"] — the class itself is the scope.
 * Same documented exception as body-mounted sidebars / popovers.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern,
.select2-drop.fb-select2-modern {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-sh: var(--d3v-sh-lg, 0 6px 20px rgba(15, 23, 42, .12));
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* ---- closed control (single select) — mirrors .ms-modern-select ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    background-image: none;
    filter: none;
    box-shadow: none;
    color: var(--fbm-text);
    font-size: 13.5px;
    line-height: 36px;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice:hover {
    border-color: var(--fbm-border-strong);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern.select2-container-active .select2-choice,
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern.select2-dropdown-open .select2-choice {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice > .select2-chosen {
    margin-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice .select2-arrow {
    position: static;
    flex: 0 0 auto;
    width: auto;
    border: none;
    background: none;
    background-image: none;
    filter: none;
    color: var(--fbm-muted);
    transition: transform var(--fbm-t);
}
/* the stock arrow is a sprite `b`; swap it for the same chevron glyph the
   modern multiselect uses so both controls point the same way. */
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice .select2-arrow b {
    display: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice .select2-arrow:after {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 13px;
    line-height: 1;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern.select2-dropdown-open .select2-choice .select2-arrow {
    transform: rotate(180deg);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-choice abbr {
    top: 50%;
    margin-top: -6px;
    right: 26px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern.select2-container-disabled .select2-choice {
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
}
/* placeholder */
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container.fb-select2-modern .select2-default .select2-chosen {
    color: var(--fbm-muted);
}

/* ---- closed control (multi select) — mirrors .ms-modern-chips ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    background-image: none;
    box-shadow: none;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-choices:hover {
    border-color: var(--fbm-border-strong);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern.select2-container-active .select2-choices {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-choices li {
    float: none;
    margin: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-search-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 22px;
    border: none;
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-accent-soft);
    background-image: none;
    box-shadow: none;
    color: var(--fbm-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-search-choice-close {
    top: 50%;
    margin-top: -7px;
    left: 6px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .select2-container-multi.fb-select2-modern .select2-choices .select2-search-field input {
    height: 26px;
    padding: 0 2px;
    font-size: 13px;
    color: var(--fbm-text);
}

/* ---- body-mounted dropdown — mirrors .ms-modern-menu ---- */
.select2-drop.fb-select2-modern {
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: var(--fbm-sh);
}
.select2-drop.fb-select2-modern.select2-drop-above {
    margin-top: 0;
    margin-bottom: 4px;
    border-radius: var(--fbm-r);
}
/* select2 pins the drop flush to the control; the 4px gap above needs the
   same visual separation without shifting the hit area, hence margin only. */
.select2-drop.fb-select2-modern .select2-search {
    padding: 2px 2px 6px;
}
.select2-drop.fb-select2-modern .select2-search input {
    /* select2 ships `height: auto !important` on this input, so size it with
       min-height rather than fighting the !important. */
    min-height: 32px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    background-color: var(--fbm-bg);
    color: var(--fbm-text);
    font-size: 13px;
    box-shadow: none;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.select2-drop.fb-select2-modern .select2-search input:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}
.select2-drop.fb-select2-modern .select2-results {
    margin: 0;
    padding: 0;
    max-height: 240px;
}
.select2-drop.fb-select2-modern .select2-results .select2-result-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--fbm-r-sm);
    font-size: 13px;
    color: var(--fbm-text-2);
    transition: background var(--fbm-t), color var(--fbm-t);
}
.select2-drop.fb-select2-modern .select2-results .select2-highlighted {
    background: transparent;
    color: inherit;
}
.select2-drop.fb-select2-modern .select2-results .select2-highlighted .select2-result-label {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}
.select2-drop.fb-select2-modern .select2-results .select2-selected > .select2-result-label,
.select2-drop.fb-select2-modern .select2-results .select2-result.select2-selected > .select2-result-label {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-weight: 600;
}
.select2-drop.fb-select2-modern .select2-results .select2-disabled,
.select2-drop.fb-select2-modern .select2-results .select2-disabled .select2-result-label {
    background: transparent;
    color: var(--fbm-muted);
}
.select2-drop.fb-select2-modern .select2-results .select2-no-results,
.select2-drop.fb-select2-modern .select2-results .select2-searching {
    padding: 8px 10px;
    background: transparent;
    color: var(--fbm-muted);
    font-size: 13px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * TYPEAHEAD used by the builder's default-value control on an editable
 * single-select list (free-text entry, so it cannot become a select2 or
 * a multiselect). Opt-in via the `fb-tt-modern` class fb_list.js adds to
 * the generated `.twitter-typeahead` wrapper only under the modern theme.
 * The suggestion menu is rendered INSIDE the wrapper (not body-mounted),
 * so it stays scoped under .d3view-inputsBuilder. Geometry/radius/hover
 * intentionally mirror `.select2-drop.fb-select2-modern` above.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-sh: var(--d3v-sh-lg, 0 6px 20px rgba(15, 23, 42, .12));
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-menu {
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: var(--fbm-sh);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-dataset {
    max-height: 240px;
    overflow-y: auto;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-suggestion {
    padding: 7px 10px;
    border-radius: var(--fbm-r-sm);
    font-size: 13px;
    color: var(--fbm-text-2);
    transition: background var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-suggestion:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-suggestion.tt-cursor {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}

/* typeahead bolds the matched substring; keep it aligned with the accent row */
.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-suggestion .tt-highlight {
    font-weight: 600;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-empty,
.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-menu .empty-message {
    padding: 8px 10px;
    color: var(--fbm-muted);
    font-size: 13px;
}

/* the ghost hint input must not paint a second border on top of the field */
.d3view-inputsBuilder[data-ui-theme="modern"] .twitter-typeahead.fb-tt-modern .tt-hint {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--fbm-muted);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * BUILDER-ONLY chrome on each input row: the bottom meta line carrying
 * DataSource / Required / Evt (actions count + add) / Options (kebab +
 * remove). Build mode is the only mode that paints this line, so every
 * rule is scoped to [data-mode="build"] and the modern theme — submit,
 * view and the classic theme are untouched. Purely visual: no geometry
 * that the JS relies on is changed (notably `.add-input-actions` keeps
 * the absolute positioning its inline style sets), and build mode keeps
 * its deliberately tighter vertical rhythm.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-danger: var(--d3v-status-danger, #ef4444);
    --fbm-danger-soft: var(--d3v-status-danger-soft, #fee2e2);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
    align-items: flex-end;
    gap: 14px;
}

/* the three cluster captions (Required / Evt / Options) read as one
   uniform micro-label instead of three different label treatments */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container > div > label,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .ip-actions-container > div > label,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-edit-icons-container > div > label {
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fbm-muted);
}

/* the "Evt" caption is a chip, not text — retire the hard amber outline
   for the same soft-accent chip the rest of the modern theme uses */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .wf-type-label.action {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* one hit-target treatment for every icon button on the line */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-actions,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .add-input-actions,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-edit-icons-container .dropdown-toggle,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .remove-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-text-2);
    font-size: 12px;
    line-height: 1;
    box-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-actions:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .add-input-actions:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-edit-icons-container .dropdown-toggle:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-edit-icons-container.open .dropdown-toggle {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-text);
}

/* a non-zero action count is the one number worth reading on this line */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-actions > span {
    font-weight: 600;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-actions .fa-bolt {
    color: var(--fbm-muted);
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .input-actions:hover .fa-bolt {
    color: var(--fbm-accent);
}

/* destructive action gets the danger tint, and only on hover */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .remove-input:hover {
    background: var(--fbm-danger-soft);
    border-color: transparent;
    color: var(--fbm-danger);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * SAMPLE-INPUTS palette (the right-hand "Inputs" rail that only build
 * mode shows). It shipped as stock `list-group-item` rows separated by a
 * hardcoded inline `#DDD` divider; this turns them into hover-lit pills
 * on the token palette. The inline divider can only be beaten with
 * !important — it is set on the element by the template.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
    padding: 0 6px 6px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list > .row > .col-md-12 {
    border-bottom: 1px solid transparent !important;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list > .row + .row > .col-md-12 {
    border-top: 1px solid var(--fbm-border) !important;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .wf-input-label {
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    transition: background var(--fbm-t), border-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .wf-input-label:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-border);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .sample-input-label {
    font-size: 13px;
    color: var(--fbm-text-2);
}

/* min-width, not width: a few palette icons are text glyphs ({x,y}) that
   are wider than an fa icon and must not be clipped */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .sample-input-label > i {
    min-width: 16px;
    text-align: center;
    color: var(--fbm-muted);
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .wf-input-label:hover .sample-input-label > i {
    color: var(--fbm-accent);
}

/* the row-hover affordances (drag grip + add) — display is owned by the
   existing hover rule, so only paint them here */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .drag_sample_input,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .add_sample_input {
    color: var(--fbm-muted);
    transition: color var(--fbm-t), background var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .add_sample_input {
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .add_sample_input:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .si-container .sample-inputs-list .drag_sample_input:hover {
    color: var(--fbm-accent);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - COLLAPSIBLE sample-
 * inputs rail. The palette is only reached occasionally, so it folds
 * down to a thin rail and gives its width back to the inputs list; the
 * panel body slides out to the left and back in. Modern theme only —
 * the toggle is not even rendered under classic. The `.si-collapsed`
 * class is stamped by the template from options.sampleInputsCollapsed
 * and flipped in place by toggleSampleInputsPanel.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
    --fbm-si-rail: 34px;
    position: relative;
    overflow: hidden;
    transition: width .24s cubic-bezier(.4, 0, .2, 1), flex-basis .24s cubic-bezier(.4, 0, .2, 1);
}

/* the row is display:flex, so letting the list grow is all that is needed
   for it to absorb the width the rail gives up */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .inputs-list {
    flex: 1 1 auto;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container.si-collapsed {
    flex: 0 0 var(--fbm-si-rail);
    width: var(--fbm-si-rail);
    min-width: var(--fbm-si-rail);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs {
    position: relative;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s cubic-bezier(.4, 0, .2, 1);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container.si-collapsed .sample-inputs {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* the toggle is the one thing that must survive the slide, so it is
   pinned to the container rather than carried by the sliding panel */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .toggle-sample-inputs {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-muted);
    font-size: 12px;
    line-height: 1;
    box-shadow: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), right var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .toggle-sample-inputs:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .toggle-sample-inputs:focus {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-border);
    color: var(--fbm-accent);
    outline: none;
}

/* centred in the rail once there is no panel to sit beside */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container.si-collapsed .toggle-sample-inputs {
    right: 5px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for CURVE
 * inputs (`vector` / `define_table`) — the controls in the "Force vs
 * Displacement" subgroup. These were the last stock-Bootstrap controls
 * left in the modern theme: a saturated blue/red `btn-group-justified`
 * pill bar, a flat 2px-dashed dropzone, an unstyled `.wf-thumbnail`
 * wrapper and a default-grey Handsontable — all sitting next to modern
 * selects / text inputs.
 *
 * VISUAL ONLY. Every hook the JS binds to is preserved untouched
 * (#curve-manager, .edit_curve, .remove-extracted-curve-value,
 * .remove-from-default, .manual_vector_input, .wf-dropzone, …); nothing
 * here changes which control an input gets or how it behaves.
 *
 * Everything is scoped under [data-ui-theme="modern"], so classic is
 * byte-for-byte unaffected in every mode. The couple of rules that are
 * end-user-only (looser card padding) additionally require
 * .inputs-builder-container[data-mode="submit"|"view"], matching the
 * field-item rhythm precedent above — build mode stays compact.
 * ===================================================================== */

/* extra aliases this block needs on top of the base modern token set */
.d3view-inputsBuilder[data-ui-theme="modern"] {
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-danger: var(--d3v-danger, #ef4444);
    --fbm-danger-soft: var(--d3v-danger-soft, #fee2e2);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-sh-sm: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, .08));
    --fbm-bg-hover: var(--d3v-bg-hover, #e2e8f0);
    --fbm-sh-md: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, .10));
}

/* --------------------------------------------------------------------
 * 1. The curve/define_table action toolbar (#fb-input-toolbar-tpl).
 *    Bootstrap's .btn-group-justified is a display:table that stretches
 *    4 buttons edge-to-edge into fat bars. Under modern it becomes a
 *    right-aligned, gap-separated row of auto-width buttons.
 *    NOTE: the button LABELS stay hidden/shown exactly as the existing
 *    responsive rules decide — that behaviour is not touched here.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn-group.btn-group-justified {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    border-collapse: separate;
    table-layout: auto;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn-group.btn-group-justified > .btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn-group.btn-group-justified > .btn-group {
    display: inline-flex;
    flex: 0 0 auto;
    float: none;
    width: auto;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn-group.btn-group-justified > .btn-group > .btn {
    display: inline-flex;
    width: auto;
}

/* base button treatment — quiet surface, token border, real transitions */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 38px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    background-image: none;
    box-shadow: none;
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn:hover {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border-strong);
    color: var(--fbm-text);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn:focus-visible {
    outline: none;
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn .btn-group-icon {
    margin: 0;
    font-size: 13px;
}
/* the stock caret next to "Options" is a border-triangle; keep it muted */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn .fa-caret-down {
    color: var(--fbm-muted);
    font-size: 11px;
}

/* primary action (View / Open in Curve Viewer) = accent tint, not solid blue */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn.btn-primary {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn.btn-primary:hover {
    background: var(--fbm-accent);
    border-color: var(--fbm-accent);
    color: #fff;
}

/* destructive action (Reset) = danger tint, only saturating on hover */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn.btn-danger {
    background: var(--fbm-danger-soft);
    border-color: var(--fbm-danger-soft);
    color: var(--fbm-danger);
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn.btn-danger:hover {
    background: var(--fbm-danger);
    border-color: var(--fbm-danger);
    color: #fff;
}

/* disabled placeholders in the toolbar (no value yet) */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .btn.disabled,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar span.btn.disabled {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-muted);
    opacity: 1;
}

/* open dropdown keeps the accent ring so the toolbar reads as one family */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-input-toolbar .fb-toolbar-options.open > .btn {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}

/* --------------------------------------------------------------------
 * 2. Standalone curve buttons rendered OUTSIDE the toolbar — the
 *    dataSource=workers / previous_inputs / existing_files branches
 *    ("Open in Curve Viewer", "Edit Curve in Digitizer", "Remove curve
 *    and store rule"). Same treatment, so both markup paths match.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right > .btn {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    background-image: none;
    box-shadow: none;
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    text-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .btn:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right > .btn:hover {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border-strong);
    color: var(--fbm-text);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn.btn-primary,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn.btn-primary,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .btn.btn-primary,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right > .btn.btn-primary {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn.btn-primary:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn.btn-primary:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .btn.btn-primary:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right > .btn.btn-primary:hover {
    background: var(--fbm-accent);
    border-color: var(--fbm-accent);
    color: #fff;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn.btn-danger,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn.btn-danger {
    background: var(--fbm-danger-soft);
    border-color: var(--fbm-danger-soft);
    color: var(--fbm-danger);
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn.btn-danger:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span > .btn.btn-danger:hover {
    background: var(--fbm-danger);
    border-color: var(--fbm-danger);
    color: #fff;
}
/* the "extract / edit in sheets / toggle table" row below the dropzone */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}
/* those buttons carry mr5 margins meant for the old inline flow; gap owns
   the spacing now, so drop them to keep the 4px grid honest. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .clearfix.text-right > .btn.mr5,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .btn.ml10 {
    margin: 0;
}

/* --------------------------------------------------------------------
 * 3. .wf-thumbnail — the curve preview / action wrapper. Give it the
 *    same card surface the rest of the modern theme uses so it reads as
 *    part of the field instead of a stray block.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: none;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail:hover {
    border-color: var(--fbm-border-strong);
    box-shadow: var(--fbm-sh-sm);
}
/* the toolbar / the inline <span> wrapper should own the full card width */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > .fb-input-toolbar,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > span {
    flex: 1 1 100%;
    margin: 0;
}
/* the curve thumbnail image inside the card */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail > img {
    flex: 0 1 auto;
    border-radius: var(--fbm-r-sm);
}
/* submit / view get a slightly roomier card; build stays compact */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] li.field-item .input-value .wf-thumbnail,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value .wf-thumbnail {
    padding: 12px;
    gap: 12px;
}
/* ...but when the wrapper holds ONLY the action toolbar (the manual-curve
   case, by far the most common `vector` shape) there is nothing to frame,
   and a card would just be a tall empty box. Drop the surface and let the
   buttons sit directly under the grid. Browsers without :has() simply keep
   the card above — a graceful, still-consistent fallback. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail:has(> .fb-input-toolbar:only-child),
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] li.field-item .input-value .wf-thumbnail:has(> .fb-input-toolbar:only-child),
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value .wf-thumbnail:has(> .fb-input-toolbar:only-child) {
    padding: 0;
    margin-top: 8px;
    border: none;
    background: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------
 * 4. Dropzone / file-upload drop target.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-dropzone.file-upload,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-dropzone.file-upload.dz-clickable {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--fbm-border-strong);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-dropzone.file-upload.dz-clickable:hover {
    border-color: var(--fbm-accent);
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-dropzone.file-upload .dz-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}
/* a real drop-target affordance — the markup is a bare <span>, so the icon
   is added in CSS rather than editing a template with live JS handlers. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-dropzone.file-upload .dz-message > span:before {
    content: '\f0ee';
    font-family: FontAwesome;
    margin-right: 8px;
    font-size: 15px;
    opacity: .75;
}

/* --------------------------------------------------------------------
 * 5. "Depends on previous worker/input but has no value" placeholder.
 *    Muted + dashed so it reads as "nothing here yet", not "broken".
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail input.form-control[disabled] {
    height: 36px;
    border: 1px dashed var(--fbm-border-strong);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    box-shadow: none;
    color: var(--fbm-muted);
    font-size: 13px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail input.form-control[disabled]::placeholder {
    color: var(--fbm-muted);
}
/* the cell_x / cell_y extraction-rule readouts */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail .input-group .input-group-addon {
    border: 1px solid var(--fbm-border);
    border-right: 0;
    border-top-left-radius: var(--fbm-r);
    border-bottom-left-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
    font-size: 12px;
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .wf-thumbnail .input-group input.form-control[disabled] {
    border-left: 0;
    border-style: solid;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --------------------------------------------------------------------
 * 6. Manual curve table (Handsontable). The inline curve grid never gets
 *    the .pl-dataset-modern class (that is added by the dataset editor
 *    views), so the modern surface is applied to the container itself —
 *    and .pl-dataset-modern is brought onto the same tokens so the two
 *    grids are indistinguishable.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-dataset-modern,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-dataset-modern.handsontable {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    overflow: hidden;
    box-shadow: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container th,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-dataset-modern th {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-text-2);
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container td,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-dataset-modern td {
    border-color: var(--fbm-border);
    color: var(--fbm-text);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container td.area,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container th.ht__highlight {
    background: var(--fbm-accent-soft);
}
/* handsontable paints its own 1px frame; drop it so the container radius
   is the only visible edge. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .handsontable_container .ht_master > .wtHolder > .wtHider > .wtSpreader > table {
    border-left-width: 0;
    border-top-width: 0;
}

/* --------------------------------------------------------------------
 * 7. Curve-count badge + view-mode preview surface.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > p .badge {
    background: var(--fbm-accent-soft);
    border-radius: 999px;
    color: var(--fbm-accent);
    font-size: 11px;
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > p {
    margin: 8px 0 0;
    color: var(--fbm-muted);
    font-size: 12px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item div.worker-output-preview {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    overflow: hidden;
}

/* --------------------------------------------------------------------
 * 8. Dropdown panels — EVERY dropdown in the builder under the modern
 *    theme: the curve toolbar "Options" menu, the extraction-rule
 *    config dropdown, input settings / edit-icons / references /
 *    output-assignments, the View + filter + group + tab-manager
 *    menus, and their submenus.
 *
 *    This is a straight port of the workflow header-dropdown skin in
 *    plugins/workflow/stylesheets/modular/builder/header/
 *    wf-header-compact-dropdowns-tpl.css, so the two plugins read as
 *    one menu family: same panel surface, same 9px/12px flex rows with
 *    a 16px icon gutter, same inset rounded hover, same divider, same
 *    submenu caret behaviour. The --fbm-* names below alias the exact
 *    same --d3v-* foundation tokens that file uses (bg-primary, border,
 *    r-md, sh-md, bg-hover, text-*, accent, t-fast) — the aliasing is
 *    only to stay consistent with this file's local convention.
 *
 *    TWO GUARDS keep third-party widgets out (both verified live):
 *      :not(.pd15)  — `.pd15` menus are mini FORM panels (a select2, a
 *                     label, inputs), not item lists. They keep their
 *                     own 15px padding; only the outer surface below
 *                     applies to them.
 *      :not(.inner) + the `:not(.bootstrap-select) >` parent guard —
 *                     bootstrap-select renders its own .dropdown-menu
 *                     and .dropdown-menu.inner and depends on their
 *                     padding/scroll metrics. Left alone.
 *    select2 needs no guard: its panel is .select2-drop, not
 *    .dropdown-menu, and already has its own modern skin above.
 * ------------------------------------------------------------------ */

/* ---- panel surface (applies to every menu incl. .pd15 form panels) ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner) {
    margin-top: 8px;
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: var(--fbm-sh-md);
}
/* item-list menus get the tighter vertical padding; .pd15 form panels
   keep the 15px they were authored with. */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) {
    min-width: 220px;
    padding: 4px 0;
}

/* ---- rows: icon gutter + label, inset rounded hover ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 4px;
    border-radius: var(--fbm-r);
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    transition: background var(--fbm-t), color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a > i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    color: var(--fbm-muted);
    font-size: 13px;
    transition: color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:focus {
    background: var(--fbm-bg-hover);
    /* plugins.css:4478 paints a legacy #0088cc gradient + `color:#fff!important`
       on every .dropdown-menu row hover. The shorthand above already clears the
       gradient, but the white text can only be beaten with !important — without
       it the label goes white on a light grey row and disappears. */
    color: var(--fbm-text) !important;
    background-image: none;
    filter: none;
    text-shadow: none;
    text-decoration: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li > a:hover > i {
    color: var(--fbm-accent);
}

/* ---- section headers ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) .dropdown-header {
    padding: 8px 16px 4px;
    color: var(--fbm-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---- divider ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) .divider {
    height: 1px;
    margin: 6px;
    background: var(--fbm-border);
}

/* ---- active / checked row ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.active > a,
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.checked > a {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent) !important;
    font-weight: 500;
}
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.active > a > i,
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.checked > a > i {
    color: var(--fbm-accent);
}

/* ---- disabled row ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] :not(.bootstrap-select) > .dropdown-menu:not(.inner):not(.pd15) > li.disabled > a {
    color: var(--fbm-muted);
    background: none;
}

/* ---- submenus (Options > appearance, context-style nested menus) ----
   The rows are flex now, so the legacy `float: right/left` caret is
   ignored; push it to the row edge with an auto margin instead. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu > a:after {
    float: none;
    margin: 0 0 0 auto;
    align-self: center;
    border-left-color: var(--fbm-muted);
    transition: border-color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu:hover > a:after {
    border-left-color: var(--fbm-accent);
}
/* left-opening variant keeps its caret on the left edge */
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu.dropdown-submenu-left > a:after,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-toolbar-options .dropdown-submenu-left > a:after {
    margin: 0 auto 0 0;
    top: 50%;
    margin-top: -5px;
    border-left-color: transparent;
    border-right-color: var(--fbm-muted);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu.dropdown-submenu-left:hover > a:after,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-toolbar-options .dropdown-submenu-left:hover > a:after {
    border-right-color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu:hover > a {
    background: var(--fbm-bg-hover);
    color: var(--fbm-text) !important;
}
/* a nested panel hangs off its parent row, so it needs no top gap */
.d3view-inputsBuilder[data-ui-theme="modern"] li.dropdown-submenu > .dropdown-menu {
    margin-top: -7px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - modern scrollbars,
 * matching d3viewdashboard v2 (see stylesheets/d3viewdashboard-v2-02-
 * base-layout.css .db-content). Same recipe: thin, transparent track,
 * rounded neutral thumb. The dashboard's --db-n-300 resolves to
 * --d3v-n-300 (#CBD5E1), the same value --fbm-border-strong already
 * aliases, so no new token is needed.
 *
 * NOTE: `scrollbar-color` inherits, but `scrollbar-width` DOES NOT — so
 * it has to be set on the descendants too, not just the root (verified:
 * the real scrollers reported `auto` when it was only on the root). The
 * ::-webkit-* pseudo-elements do not inherit either, hence the wildcard.
 * Body-mounted surfaces (select2 drop, modern multiselect menus) live
 * OUTSIDE .d3view-inputsBuilder and are targeted directly.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"],
.d3view-inputsBuilder[data-ui-theme="modern"] *,
.select2-drop.fb-select2-modern,
.select2-drop.fb-select2-modern *,
.ms-modern .ms-modern-menu,
.input-action-view.fb-actions-modern,
.input-action-view.fb-actions-modern * {
    scrollbar-width: thin;
    scrollbar-color: var(--fbm-border-strong, #cbd5e1) transparent;
}

.d3view-inputsBuilder[data-ui-theme="modern"] *::-webkit-scrollbar,
.d3view-inputsBuilder[data-ui-theme="modern"]::-webkit-scrollbar,
.select2-drop.fb-select2-modern *::-webkit-scrollbar,
.select2-drop.fb-select2-modern::-webkit-scrollbar,
.ms-modern .ms-modern-menu::-webkit-scrollbar,
.input-action-view.fb-actions-modern *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] *::-webkit-scrollbar-track,
.d3view-inputsBuilder[data-ui-theme="modern"]::-webkit-scrollbar-track,
.select2-drop.fb-select2-modern *::-webkit-scrollbar-track,
.select2-drop.fb-select2-modern::-webkit-scrollbar-track,
.ms-modern .ms-modern-menu::-webkit-scrollbar-track,
.input-action-view.fb-actions-modern *::-webkit-scrollbar-track {
    background: transparent;
}

.d3view-inputsBuilder[data-ui-theme="modern"] *::-webkit-scrollbar-thumb,
.d3view-inputsBuilder[data-ui-theme="modern"]::-webkit-scrollbar-thumb,
.select2-drop.fb-select2-modern *::-webkit-scrollbar-thumb,
.select2-drop.fb-select2-modern::-webkit-scrollbar-thumb,
.ms-modern .ms-modern-menu::-webkit-scrollbar-thumb,
.input-action-view.fb-actions-modern *::-webkit-scrollbar-thumb {
    background: var(--fbm-border-strong, #cbd5e1);
    border-radius: 999px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] *::-webkit-scrollbar-thumb:hover,
.d3view-inputsBuilder[data-ui-theme="modern"]::-webkit-scrollbar-thumb:hover,
.select2-drop.fb-select2-modern *::-webkit-scrollbar-thumb:hover,
.ms-modern .ms-modern-menu::-webkit-scrollbar-thumb:hover,
.input-action-view.fb-actions-modern *::-webkit-scrollbar-thumb:hover {
    background: var(--fbm-muted, #94a3b8);
}

/* both-axis corner should not show the default chequer */
.d3view-inputsBuilder[data-ui-theme="modern"] *::-webkit-scrollbar-corner {
    background: transparent;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * TEXT family of inputs: text / textarea / number / scalar. This is the
 * largest surface in a real form (text 96, textarea 20, number 3,
 * scalar 3 of the 296-input START fixture), so it sets the baseline the
 * select / multiselect controls were already matched to.
 *
 * Structure this relies on (verified live on the 013 START fixture):
 *   - text / number / scalar -> `div.input-value` IS the `.input-group`,
 *     and the control is a DIRECT child: `.input-value > input.form-control`.
 *   - textarea -> `.input-value > .input-group.fb-droppable > textarea`.
 *   - vector / dataset / define_table / select render NO
 *     `input.form-control` inside `.input-value`, so the direct-child
 *     selectors below cannot leak into the surfaces owned elsewhere.
 *
 * Everything is under [data-ui-theme="modern"] — classic is untouched.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] {
    /* control height + the danger border tone the existing --fbm-danger
       pair was missing. 38px is what .ms-modern / .fb-select2-modern
       already render at, so the whole field column lines up. */
    --fbm-ctl-h: 38px;
    --fbm-danger-border: var(--d3v-status-danger-border, #fecaca);
}

/* --- 1. single-line controls: text / number / scalar ----------------- */
/* NOTE on text colour: d3view.min.css ships a global
   `.form-control { color: #000 !important }`, so no rule here can set the
   value colour without matching that !important. Classic already lives
   with black, so the enabled states just inherit it — only the disabled
   state below is worth answering, because a disabled field rendered in
   full black does not read as disabled at all. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control {
    height: var(--fbm-ctl-h);
    padding: 0 12px;
    font-size: 13.5px;
    line-height: normal;
    background: var(--fbm-bg);
}

/* --- 2. textarea ---------------------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control {
    min-height: calc(var(--fbm-ctl-h) * 2 + 8px);
    padding: 8px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    background: var(--fbm-bg);
    resize: vertical;
    overflow-y: auto;
}
/* a textarea with no trailing addon rounds on all four corners; with one
   it keeps the left-only radius the shared .form-control rule gives it */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control:last-child {
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
}

/* --- 3. number spinners --------------------------------------------- */
/* keep the native stepper (it is a real affordance) but tone it down so
   it does not fight the value, and give it back the padding it eats */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[type="number"] {
    padding-right: 4px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[type="number"]::-webkit-inner-spin-button,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[type="number"]::-webkit-outer-spin-button {
    opacity: .45;
    margin-left: 4px;
    transition: opacity var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[type="number"]:hover::-webkit-inner-spin-button,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[type="number"]:focus::-webkit-inner-spin-button {
    opacity: 1;
}

/* --- 4. placeholder ------------------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control::placeholder,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control::placeholder {
    color: var(--fbm-muted);
    opacity: 1;
}

/* --- 5. hover ------------------------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control:hover:not(:focus):not([disabled]):not([readonly]),
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control:hover:not(:focus):not([disabled]):not([readonly]) {
    border-color: var(--fbm-border-strong);
}

/* --- 6. disabled / read-only ---------------------------------------- */
/* disabled = not yours to edit; read-only = yours to read and copy, so it
   keeps the normal text colour and a text cursor.
   The !important on the disabled colour is the only way past the global
   `.form-control { color: #000 !important }` in d3view.min.css — see the
   note in section 1. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[disabled],
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control[disabled] {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-muted) !important;
    cursor: not-allowed;
    box-shadow: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > input.form-control[readonly],
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value textarea.form-control[readonly] {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
}

/* --- 7. validation error -------------------------------------------- */
/* `has-error` is toggled by fb_list.js onto `div.input-value` and onto the
   inner `.input-group`. Bootstrap 3's own `.has-error .form-control` rule
   is only two classes, so the modern `.form-control` border above wins and
   the error frame silently disappears — these rules put it back. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value.has-error > input.form-control,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value.has-error textarea.form-control,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group.has-error > input.form-control,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group.has-error > textarea.form-control {
    border-color: var(--fbm-danger-border);
    background: var(--fbm-danger-soft);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value.has-error > input.form-control:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value.has-error textarea.form-control:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group.has-error > input.form-control:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .input-group.has-error > textarea.form-control:focus {
    border-color: var(--fbm-danger);
    box-shadow: 0 0 0 3px var(--fbm-danger-soft);
}

/* --- 8. addon seam --------------------------------------------------- */
/* The peek / attach addons are rendered with an INLINE `border: 1px solid
   #ccc`, which beats the R2026-46 addon rule — so in modern the addon kept
   a grey border a shade darker than the control and drew a double line at
   the seam. Inline styles can only be answered with !important; restricted
   to addons that are direct children of the text-family input-group so the
   file / thumbnail addons keep their own skin. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .input-group-addon.btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value > .input-group > .input-group-addon.btn {
    border-color: var(--fbm-border) !important;
    border-left-width: 0 !important;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - nested-view TREE, modern.
 *
 * The tree chrome (rows, caret, indent guides, hover/selected, kebab) lives
 * with the plugin that owns it: `subrata_plugins/tree_view/tree_view.css`,
 * under the `.tv-modern` class TreeView adds when the caller passes
 * `variant: 'modern'` (renderTreeView forwards uiTheme === 'modern', exactly
 * like the multiselect variant forward). Only the bits of markup FormBuilder
 * itself injects through `renderContent` — the folder icon, `.ti-name` and
 * the trailing `.item-count` — are styled here, double-scoped to the modern
 * builder AND to `.tv-modern` so no classic tree is affected.
 * ===================================================================== */
div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tv-content .ti-name {
    color: var(--fbm-text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tv-content i.fa-folder {
    color: var(--fbm-muted);
    font-size: 12px;
    transition: color var(--fbm-t);
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tv-content.active i.fa-folder {
    color: var(--fbm-accent);
}

/* count pill — the same soft chip the modern multiselect uses for chips */
div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tv-content .item-count {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    transition: background-color var(--fbm-t), color var(--fbm-t);
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tv-content.active .item-count {
    background: var(--fbm-bg);
    color: var(--fbm-accent);
}

/* --- search: the group whose filtered inputs are on screen ------------
 * `showing-all-filtered` is added by toggleNestedChild when you pick a group
 * WHILE a search/filter is active — it is the "you are looking at THIS group's
 * matches" band, and it must stay louder than the plain selected-row tint or
 * the two read as one thing. Classic paints a #e8f4fd band + a 3px #428bca
 * rail + the FontAwesome filter glyph; modern keeps that exact anatomy in
 * accent tokens, and the selected pill inside the band flips to a raised
 * white surface so both signals survive when they land on the same row. */
div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.showing-all-filtered > .item-label {
    background-color: var(--fbm-accent-soft);
    border-left: 3px solid var(--fbm-accent);
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-accent);
    font-weight: 600;
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.showing-all-filtered > .item-label .ti-name {
    color: var(--fbm-accent);
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.showing-all-filtered > .item-label:after {
    color: var(--fbm-accent);
    margin-right: 4px;
}

/* selected row sitting inside the band — lift it off the tint instead of
   tinting tint-on-tint (both were --fbm-accent-soft, so the pill vanished) */
div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.showing-all-filtered > .item-label .tv-content.active {
    background: var(--fbm-bg);
    box-shadow: var(--fbm-sh-sm);
}

div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.showing-all-filtered > .item-label .tv-content.active .item-count {
    background: var(--fbm-accent-soft);
}

/* dimmed non-matches: the existing .tree-search-hidden opacity rule stays the
   only thing that hides them — this just stops the pill from competing */
div.d3view-inputsBuilder[data-ui-theme="modern"] .nested-tv.tv-modern .tree-list-item.tree-search-hidden .item-count {
    background: transparent;
}

/* --- 9. read-only rendering (view mode) ------------------------------ */
/* In view mode the text family is not an <input> at all — it renders as
   `div.worker-output-preview.text-preview`. The shared preview rule gives
   it the modern border + radius but no padding, so the value sat in a
   cramped ~20px hairline strip. Give it the same inner rhythm as the
   editable control and a read-only surface tone. Scoped to view mode so
   the submit-mode previews (curve / dataset thumbnails) are untouched. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item div.worker-output-preview.text-preview {
    min-height: var(--fbm-ctl-h);
    padding: 8px 12px;
    background: var(--fbm-bg-2);
    color: var(--fbm-text);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Modern skin for the
 * DATASET / TABLE family (`dataset`, `define_table`). Completes the set
 * alongside the select / text / curve blocks above.
 *
 * The family has four distinct surfaces in the live DOM, and they are NOT
 * all Handsontable — that is the thing to know before editing this block:
 *
 *   a) the collapsed `dataset` summary card  -> `.ds-info-text`
 *      ("N rows, N columns." + "Column names …")
 *   b) the expanded `dataset` preview grid   -> `.handsontable_container
 *      .datatable-container`, which hosts the DataTable plugin
 *      (`.bs_datatable_wrapper` / `table.bs-dt`), not Handsontable. Only
 *      the frame + the grid rhythm are touched here; the DataTable
 *      plugin keeps ownership of everything inside it.
 *   c) the `define_table` inline grid        -> `.define-table-container`
 *      / `.define-table-content` / `table.define-table`, a plain
 *      Bootstrap table built by DefineTableRenderer
 *      (javascripts/renderers/InputRenderers.js).
 *   d) the real Handsontable grid            -> `.pl-dataset-modern`,
 *      added in FormBuilderEditView / FormBuilderMultipleView. Kept on
 *      the same tokens so a) - d) read as one grid family.
 *
 * VISUAL ONLY. Every class the JS binds to is preserved: .add-row-btn,
 * .clone-row-btn, .remove-row-btn, .toggle-ds-minified, .dataset-*,
 * .name-input/.value-input, .curve-input-container. Nothing here changes
 * schema handling or row add/remove/clone behaviour.
 *
 * Scoped under [data-ui-theme="modern"] so classic is untouched in every
 * mode. The two comfort rules that only make sense for an end user
 * additionally require .inputs-builder-container[data-mode="submit"|
 * "view"], matching the precedent set by the blocks above.
 *
 * The `curve` cell of a define_table row hosts a NESTED FormBuilder
 * (the vector control). Cell rules therefore use `> input.form-control`
 * direct-child selectors so nothing leaks into that nested form.
 * ===================================================================== */

/* --- 1. collapsed dataset summary ("4 rows, 4 columns.") ------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .ds-info-text {
    margin-bottom: 2px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .ds-info-text p {
    margin: 0 0 4px;
    color: var(--fbm-text-2);
    font-size: 12.5px;
    line-height: 1.6;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .ds-info-text p:last-child {
    margin-bottom: 0;
    color: var(--fbm-muted);
}
/* the row/column counters — stock .badge is a saturated grey pill */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .ds-info-text .badge {
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .ds-info-text b {
    color: var(--fbm-text-2);
    font-weight: 600;
}

/* --- 2. shared grid frame -------------------------------------------
 * One rounded, clipped surface for every grid in the family. `overflow:
 * hidden` on the FRAME (never on the scrolling child) is what keeps the
 * radius intact while the grid scrolls horizontally underneath it.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-container {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: none;
    overflow: hidden;
}

/* thin, unobtrusive scrollbars inside the grids (webkit) */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-content::-webkit-scrollbar,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container ::-webkit-scrollbar,
.pl-dataset-modern .wtHolder::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-content::-webkit-scrollbar-thumb,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container ::-webkit-scrollbar-thumb,
.pl-dataset-modern .wtHolder::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--fbm-border-strong);
    background-clip: content-box;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-content::-webkit-scrollbar-thumb:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container ::-webkit-scrollbar-thumb:hover,
.pl-dataset-modern .wtHolder::-webkit-scrollbar-thumb:hover {
    background: var(--fbm-muted);
    background-clip: content-box;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-content::-webkit-scrollbar-track,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container ::-webkit-scrollbar-track,
.pl-dataset-modern .wtHolder::-webkit-scrollbar-track {
    background: transparent;
}

/* --- 3. define_table inline grid ------------------------------------ */
/* the renderer ships padding + its own border/shadow on the container;
   the frame above replaces them, so the table can sit flush to the edge
   and the header can reach both sides. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-container {
    padding: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table {
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}
/* header — sticky inside .define-table-content, so it needs its own
   opaque background and a strong bottom rule to sit over scrolled rows */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > thead > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--fbm-border-strong);
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > thead > tr > th + th {
    border-left: 1px solid var(--fbm-border);
}
/* rows — horizontal separators only; vertical rules stay as light
   column dividers so wide tables remain readable */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td {
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid var(--fbm-border);
    background: transparent;
    color: var(--fbm-text);
    vertical-align: middle;
    transition: background var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td + td {
    border-left: 1px solid var(--fbm-border);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr:first-child > td {
    border-top: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr:hover > td {
    background: var(--fbm-bg-2);
}
/* the "No rows available" empty state */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td.text-muted {
    color: var(--fbm-muted);
    font-size: 12.5px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td.text-muted .fa-inbox,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td.text-muted .fas {
    margin-right: 6px;
    color: var(--fbm-border-strong);
}

/* cell editors — direct child only, so the nested curve FormBuilder in
   the `curve` column is left entirely to the curve block. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td > input.form-control {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-bg);
    box-shadow: none;
    color: var(--fbm-text);
    font-size: 13px;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td > input.form-control:hover {
    border-color: var(--fbm-border-strong);
}
/* the cell focus ring — the grid's only strong accent */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td > input.form-control:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table > tbody > tr > td > input.form-control[disabled] {
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
}

/* per-row clone / remove — quiet icon buttons until hovered */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .btn-group-sm {
    display: inline-flex;
    gap: 4px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .clone-row-btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .remove-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    box-shadow: none;
    color: var(--fbm-muted);
    font-size: 12px;
    transition: background var(--fbm-t), color var(--fbm-t), border-color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .clone-row-btn:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .remove-row-btn:hover {
    background: var(--fbm-danger-soft);
    border-color: var(--fbm-danger-soft);
    color: var(--fbm-danger);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .clone-row-btn:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table .remove-row-btn:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}

/* footer + Add Row — matched to the toolbar's accent-tint primary */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .define-table-footer {
    margin-top: 8px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--fbm-accent-soft);
    border-radius: var(--fbm-r);
    background: var(--fbm-accent-soft);
    background-image: none;
    box-shadow: none;
    color: var(--fbm-accent);
    font-size: 12.5px;
    font-weight: 600;
    text-shadow: none;
    transform: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .add-row-btn:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .add-row-btn:active {
    background: var(--fbm-accent);
    border-color: var(--fbm-accent);
    box-shadow: none;
    color: #fff;
    transform: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .add-row-btn:focus {
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .add-row-btn i {
    margin: 0;
    font-size: 11px;
}

/* the read-only "sourced from a dataset" notice */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .dataset-info .alert-info {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--fbm-border);
    border-left: 3px solid var(--fbm-accent);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 12.5px;
}

/* --- 4. expanded dataset preview (DataTable plugin) -----------------
 * Frame + grid rhythm only. Everything else inside .bs_datatable_wrapper
 * stays the DataTable plugin's own styling.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container table.bs-dt > thead > tr > th {
    border-color: var(--fbm-border);
    border-top: 0;
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container table.bs-dt > tbody > tr > td {
    border-color: var(--fbm-border);
    color: var(--fbm-text);
    transition: background var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container table.bs-dt > tbody > tr:hover > td {
    background: var(--fbm-bg-2);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value .datatable-container .dt-pagination {
    padding: 6px 10px;
    border-top: 1px solid var(--fbm-border);
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
    font-size: 12px;
}

/* --- 5. Handsontable (.pl-dataset-modern) ---------------------------
 * NOT scoped under [data-ui-theme="modern"], deliberately. The class is
 * added in FormBuilderEditView / FormBuilderMultipleView, whose template
 * roots (#d3view-fb-edit-records-tpl and friends) render a plain
 * `.d3view-inputsBuilder` WITHOUT the data-ui-theme attribute — only the
 * main #d3view-fb-list-tpl root carries it. `.pl-dataset-modern` is
 * itself the theme marker: the views add it only when
 * `m.options.uiTheme === 'modern'`, so classic never sees these rules
 * and the theme-root selector would simply never match. The --fbm-*
 * aliases therefore have to be declared locally here.
 * ------------------------------------------------------------------ */
.pl-dataset-modern {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-r: var(--d3v-r-md, 8px);

    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: none;
    overflow: hidden;
}
.pl-dataset-modern th,
.pl-dataset-modern .ht_clone_top th,
.pl-dataset-modern .ht_clone_left th {
    padding: 6px 10px;
    border-color: var(--fbm-border);
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}
.pl-dataset-modern td {
    padding: 6px 10px;
    border-color: var(--fbm-border);
    color: var(--fbm-text);
}
/* hover + selection states. Handsontable paints selection with `.area`
   on the cells and `.ht__highlight` on the headers, so both are tinted
   with the same accent-soft the rest of the theme uses. */
.pl-dataset-modern tbody tr:hover > td:not(.area) {
    background: var(--fbm-bg-2);
}
.pl-dataset-modern td.area,
.pl-dataset-modern th.ht__highlight {
    background: var(--fbm-accent-soft);
}
/* the cell focus ring — HT draws a 4-sided .wtBorder.current */
.pl-dataset-modern .wtBorder.current,
.pl-dataset-modern .wtBorder.area {
    background-color: var(--fbm-accent) !important;
}
/* HT paints its own outer 1px frame; drop the top/left edge so the
   container radius is the only visible boundary while scrolling. */
.pl-dataset-modern .ht_master > .wtHolder > .wtHider > .wtSpreader > table {
    border-top-width: 0;
    border-left-width: 0;
}
.pl-dataset-modern td.disabled {
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
}

/* --- 6. end-user comfort (submit / view only) -----------------------
 * A touch more row height where the form is being filled in, matching
 * the looser field rhythm those modes already use. build mode keeps the
 * compact grid so the builder still fits on screen.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] li.field-item .input-value .define-table > tbody > tr > td,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value .define-table > tbody > tr > td {
    padding: 10px 12px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="submit"] li.field-item .input-value .ds-info-text,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="view"] li.field-item .input-value .ds-info-text {
    margin-bottom: 6px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - SEARCH BAR, modern.
 *
 * Part 1 (theme-agnostic): the geometry that used to sit in `style="..."`
 * attributes on the .fb-search-dd icons / input and on the AI-search icon
 * is reproduced here 1:1. Inline styles beat stylesheet rules, so the
 * modern skin below could not have restyled them otherwise. Classic
 * renders byte-identically -- same values, just relocated.
 * ===================================================================== */
div.d3view-inputsBuilder .fb-search-dd > i.fa-search {
    position: absolute;
    left: 7px;
    top: 9px;
}

div.d3view-inputsBuilder .fb-search-dd > i.clear-search {
    position: absolute;
    right: 42px;
    top: 9px;
    cursor: pointer;
}

div.d3view-inputsBuilder .fb-search-dd > input.input-search {
    padding-left: 25px;
    padding-right: 25px;
}

div.d3view-inputsBuilder .fb-ai-search-container > span.fb-ai-search-icon {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 7;
    height: 30px;
    padding: 10px;
    color: grey;
}

/* ===================================================================== *
 * Part 2 (modern only): every search field in the builder -- the main
 * "Search input" bar, its AI twin, the group-mode ".search-responses"
 * box and the build-mode "Search by type" palette filter -- gets the one
 * control shape the rest of the modern theme already uses: --fbm-ctl-h
 * tall, --fbm-r radius, token border, accent focus ring, muted
 * placeholder. Both surfaces exist in build AND submit, so this is
 * scoped to the theme only, not to a [data-mode].
 *
 * `pl-rounded-input` (the global 22px !important pill) is no longer
 * emitted on these inputs under uiTheme === 'modern' -- see fb_list.tpl
 * -- which is why no !important is needed here.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > input.input-search,
.d3view-inputsBuilder[data-ui-theme="modern"] input.fb-ai-search-input,
.d3view-inputsBuilder[data-ui-theme="modern"] input.search-responses,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-search > div > input[data-search-input] {
    height: var(--fbm-ctl-h);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    box-shadow: none;
    color: var(--fbm-text);
    font-size: 13.5px;
    line-height: 1.5;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t), background-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > input.input-search::placeholder,
.d3view-inputsBuilder[data-ui-theme="modern"] input.fb-ai-search-input::placeholder,
.d3view-inputsBuilder[data-ui-theme="modern"] input.search-responses::placeholder,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-search > div > input[data-search-input]::placeholder {
    color: var(--fbm-muted);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > input.input-search:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] input.fb-ai-search-input:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] input.search-responses:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-search > div > input[data-search-input]:hover {
    border-color: var(--fbm-border-strong);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > input.input-search:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] input.fb-ai-search-input:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] input.search-responses:focus,
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-search > div > input[data-search-input]:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}

/* --- main bar: icon rail + clear button ------------------------------
 * The bar carries three affordances inside the field box -- the leading
 * magnifier, the trailing clear "x", and the sliders button that opens
 * the filter panel (positioned by the template at right:3px/top:4px).
 * Give the text a rail wide enough for all three so long queries never
 * run under them, and centre the two icons on the taller control. */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > input.input-search {
    padding-left: 34px;
    padding-right: 66px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > i.fa-search {
    left: 12px;
    top: 50%;
    margin-top: -6px;
    color: var(--fbm-muted);
    font-size: 12px;
    pointer-events: none;
    transition: color var(--fbm-t);
}

/* the magnifier picks up the accent while the field is focused. The icon
   is BEFORE the input in the DOM, so this has to hang off the wrapper's
   :focus-within -- a sibling combinator would never match. */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd:focus-within > i.fa-search {
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > i.clear-search {
    right: 38px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    transition: background-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-search-dd > i.clear-search:hover {
    background: var(--fbm-bg-hover);
    color: var(--fbm-text);
}

/* the filter/settings button sits inside the field -- flatten it so it
   reads as part of the bar instead of a button stuck on top of it */
.d3view-inputsBuilder[data-ui-theme="modern"] .regular-search > .dropdown > button.filters-dd-btn {
    height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-muted);
    box-shadow: none;
    transition: background-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .regular-search > .dropdown > button.filters-dd-btn:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .regular-search > .dropdown.open > button.filters-dd-btn {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}

/* --- AI variant: same bar, microchip glyph instead of a magnifier ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] input.fb-ai-search-input {
    padding-left: 34px;
    padding-right: 34px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-ai-search-container > span.fb-ai-search-icon {
    top: 50%;
    left: 12px;
    height: auto;
    margin-top: -6px;
    padding: 0;
    color: var(--fbm-muted);
    font-size: 12px;
    pointer-events: none;
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-ai-search-container:focus-within > span.fb-ai-search-icon {
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-ai-search-container > span.fb-ai-search-spinner {
    color: var(--fbm-accent);
}

/* --- group-mode search: the input sits in a Bootstrap .input-group
 * next to a view-type dropdown addon, so the two must share one shape
 * (radius only on the outer corners) rather than each rounding itself. */
.d3view-inputsBuilder[data-ui-theme="modern"] .search-container.input-group > input.search-responses {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .search-container.input-group > .input-group-addon.pl-dropdown {
    padding: 0 8px;
    border: 1px solid var(--fbm-border);
    border-left: none;
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    transition: background-color var(--fbm-t), border-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .search-container.input-group > .input-group-addon.pl-dropdown > button.btn {
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--fbm-muted);
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .search-container.input-group > .input-group-addon.pl-dropdown > button.btn:hover {
    color: var(--fbm-accent);
}

/* --- build mode: the "Search by type" filter above the Inputs palette */
.d3view-inputsBuilder[data-ui-theme="modern"] .pl-search > div > input[data-search-input] {
    padding-left: 12px;
    padding-right: 12px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - group / subgroup
 * NAVIGATION under the modern theme.
 *
 * This is the row of subgroup pills shown in the CONTENT pane when a
 * GROUP (not a subgroup) is selected, plus its heading. It is a distinct
 * surface from the left rail tree, and it renders in THREE different
 * markup variants depending on inputsView — all three are covered here
 * so no view is left on default Bootstrap:
 *
 *   1. #d3view-formBuilder-nested-list-generic-tpl
 *      .nested-generic-list > .lead.lead-sm  +  ul.nested-groups-header
 *      > li.list-group-item.nested-child-link
 *   2. ul.subgroups.nav.nav-pills > li.subgroup            (folder icon)
 *   3. div.subgroups > div.subgroup > .sg-label            (block form)
 *
 * NOTE on !important: the base rule at ~line 2348 sets
 * `border: 1px solid #DDD !important` on variant 1's <li> in order to
 * beat an inline `style="border:none"` in the template. Only the border
 * declarations below carry !important, purely to win against that; every
 * other property is plain. Dropping the base !important + the inline
 * style would be cleaner, but it would break classic rendering on the
 * 223 pages that still load the un-rebuilt formbuilder.css bundle.
 * ===================================================================== */

/* ---- group heading above the pills ---- */
/* font-size is deliberately NOT set: plugins.css has `.lead-sm { font-size: 17px !important }`,
   and 17px reads correctly as a section heading against the 13px pills below it — not worth a
   second !important to shave 2px. */
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list > .text-left > .lead.lead-sm {
    font-weight: 650;
    color: var(--fbm-text);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

/* ---- variant 1: nested-child-link pills ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header {
    gap: 8px;
    margin-bottom: 4px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link {
    border: 1px solid var(--fbm-border) !important;
    border-radius: 999px;
    background: var(--fbm-bg);
    margin: 0;
    padding: 6px 14px;
    transition: background var(--fbm-t), border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent) !important;
    box-shadow: var(--fbm-sh-sm);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link > a {
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link:hover > a {
    color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link.active {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent) !important;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .nested-generic-list .nested-groups-header li.nested-child-link.active > a {
    color: var(--fbm-accent);
    font-weight: 600;
}

/* ---- variant 2: nav-pills subgroups (carries a folder icon) ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup {
    float: none;
    margin: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup > a {
    border: 1px solid var(--fbm-border);
    border-radius: 999px;
    background: var(--fbm-bg);
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup > a:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup > a:focus {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
    box-shadow: var(--fbm-sh-sm);
}
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup.active > a,
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup.active > a:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup.active > a:focus {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
    font-weight: 600;
}
/* the folder glyph reads as a quiet affordance, accent only when selected */
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup > a .fa-folder {
    color: var(--fbm-muted);
    transition: color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup > a:hover .fa-folder,
.d3view-inputsBuilder[data-ui-theme="modern"] ul.subgroups.nav-pills > li.subgroup.active > a .fa-folder {
    color: var(--fbm-accent);
}

/* ---- variant 3: block subgroups with .sg-label ---- */
.d3view-inputsBuilder[data-ui-theme="modern"] div.subgroups > div.subgroup > .sg-label {
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--fbm-border);
    margin-bottom: 10px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] div.subgroups > div.subgroup > .sg-label > a {
    color: var(--fbm-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] div.subgroups > div.subgroup > .sg-label > a:hover {
    color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] div.subgroups > div.subgroup.active > .sg-label {
    border-bottom-color: var(--fbm-accent);
}
.d3view-inputsBuilder[data-ui-theme="modern"] div.subgroups > div.subgroup.active > .sg-label > a {
    color: var(--fbm-accent);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - DEFINE_TABLE empty /
 * error / toolbar states, modern theme only.
 *
 * The problem this fixes: a `define_table` whose grid is absent (no value,
 * or a value whose table is collapsed) rendered as a label, a floating
 * button row and a bare "Schema Validations" text link over a large empty
 * gap — it read as broken rather than as "no data yet".
 *
 * Three parts:
 *   1. the input becomes a real card SURFACE, with the action bar attached
 *      to the top of it instead of floating free;
 *   2. the empty / collapsed placeholder (#fb-define-table-state-tpl) fills
 *      the gap with a message and the primary next action;
 *   3. the "Schema Validations" disclosure gets a chevron affordance, a
 *      danger count badge that stays visible while collapsed, and a legible
 *      expanded table — with the card border turning danger when the field
 *      is failing, so it is findable while scrolling a long form.
 *
 * VISUAL ONLY. Every JS hook is preserved (.wf-dropzone, .toggle-ds-minified,
 * .reset_input_value, .view_define_table_curves, .toggle-schema-table,
 * .define_table_container, .ip-schema-table). Everything is scoped to
 * [data-ui-theme="modern"] AND to the define_table data-types, so classic is
 * byte-for-byte unaffected and the sibling dataset / curve skins are not
 * touched.
 * ===================================================================== */

/* aliases this block needs on top of the base modern token set (declared
   again rather than assumed, so the block stands on its own) */
.d3view-inputsBuilder[data-ui-theme="modern"] {
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-danger: var(--d3v-status-danger, var(--d3v-danger, #ef4444));
    --fbm-danger-soft: var(--d3v-danger-soft, #fee2e2);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-sh-sm: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, .08));
    --fbm-bg-hover: var(--d3v-bg-hover, #e2e8f0);
}

/* --------------------------------------------------------------------
 * 1. The card surface + the ONE-LINE summary row.
 *    `.input-value` is a Bootstrap .input-group (display:table). For these
 *    two types it becomes a wrapping flex row so that the summary text and
 *    the existing View / Reset / Upload / Options button group share a
 *    single line, with the grid (when shown) on the line below.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"],
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table_3d"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg);
    /* deliberately NOT overflow:hidden — the toolbar's "Options" menu is a
       child and would be clipped. */
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"]:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table_3d"]:hover {
    border-color: var(--fbm-border-strong);
    box-shadow: var(--fbm-sh-sm);
}

/* the summary — left of the button group, same line. No surface of its own:
   the card IS the surface, so this is just text. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state {
    order: 1;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0 4px 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-icon {
    flex: 0 0 auto;
    color: var(--fbm-muted);
    font-size: 13px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-title {
    color: var(--fbm-text);
    font-size: 13px;
    font-weight: 600;
}
/* the secondary facts — value range, curve count — separated by a middot */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-meta,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-warn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-meta {
    color: var(--fbm-muted);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-meta:before,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-warn:before {
    content: '\00b7';
    margin-right: 4px;
    color: var(--fbm-border-strong);
}
/* rows with no curve yet are the one thing worth flagging inline */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state .fb-dt-state-warn {
    color: var(--d3v-status-warning, #d97706);
    font-weight: 600;
}

/* nothing to summarise yet reads quieter than a row count */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-state-empty .fb-dt-state-title {
    color: var(--fbm-muted);
    font-weight: 500;
}

/* the button group keeps its place on the right of that line, and is pushed
   there on its own when there is no summary (a populated, expanded table).
   !important is needed only because the template carries an inline margin. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] > .fb-input-toolbar,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table_3d"] > .fb-input-toolbar {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    padding: 6px 8px;
}

/* the grid, when shown, sits on its own line under that row */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] > .define_table_container,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table_3d"] > .define_table_3d_container {
    order: 3;
    flex: 1 1 100%;
    padding: 10px;
    border-top: 1px solid var(--fbm-border);
}
/* the renderer's own bordered table would double up with the card edge */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] table.define-table {
    margin-bottom: 0;
    border-radius: var(--fbm-r-sm);
    overflow: hidden;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] table.define-table > thead > tr > th {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] table.define-table > tbody > tr > td {
    border-color: var(--fbm-border);
    color: var(--fbm-text);
    vertical-align: middle;
}

/* --------------------------------------------------------------------
 * 2. Empty grid.
 *    When the grid IS rendered but has no rows, the renderer paints a header
 *    row plus a "No rows available" cell — a tall empty box saying the same
 *    thing the summary line already says. Drop it and keep only the
 *    renderer's "Add Row" footer.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] .define-table-content:has(tbody td[colspan]) {
    display: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"] .define-table-footer {
    margin-top: 0 !important;
}
/* the renderer re-paints its own container on Add Row / delete without
   re-running the field template, so the summary has to follow the GRID's
   emptiness, not the value it was rendered with.
   `:has()` cannot nest, so this is two single-level rules: hide whenever a
   grid is present, then bring it back when that grid shows the empty marker. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"]:has(> .define_table_container) .fb-dt-state-empty {
    display: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-value[data-type="define_table"]:has(.define-table-content tbody td[colspan]) .fb-dt-state-empty {
    display: flex;
}


/* --------------------------------------------------------------------
 * 3. "Schema Validations" disclosure + validation state.
 *    The wrapper is emitted (modern + define_table only) so the badge can
 *    sit beside the collapsed disclosure. The badge is rendered AFTER the
 *    shared block in the markup (that block is owned by workflow and is not
 *    edited here) and pulled in front of it with `order`.
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap {
    position: relative;
    display: block;
    margin-top: 8px;
    /* the field-item row this sits in is itself a flex container in some
       inputsViews — claim the full line so the wrapper cannot collapse, and
       opt out of the stretch so its height is its own content (otherwise the
       empty validations row absorbs the whole field height). */
    width: 100%;
    flex: 1 1 100%;
    align-self: flex-start;
    /* the label / value columns above are Bootstrap floats. Clearing them on
       the WRAPPER (rather than letting the inner validations row clear them,
       as it did when it was a direct child) keeps the wrapper's box tight to
       its own content, which is what the badge is positioned against. */
    clear: both;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap > .validations-list,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap > .ip-schema {
    margin: 0;
}
/* the badge is emitted AFTER the shared block (that block is owned by workflow
   and is not edited here), so it is pinned to the top-right of the wrapper —
   i.e. the disclosure's own row — rather than reordered into it. The reserved
   gutter on the validations row keeps the two from ever colliding. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap > .validations-list {
    padding-right: 64px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap > .fb-dt-schema-badge {
    position: absolute;
    top: 4px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--fbm-danger-soft);
    color: var(--fbm-danger);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* the disclosure itself — a real affordance instead of bare link text */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema a.toggle-schema-table {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema a.toggle-schema-table:hover {
    border-color: var(--fbm-border-strong);
    background: var(--fbm-bg-hover);
    color: var(--fbm-text) !important;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema a.toggle-schema-table .pl-collapsible-icon {
    color: var(--fbm-muted);
    font-size: 12px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema a.toggle-schema-table:hover .pl-collapsible-icon {
    color: var(--fbm-accent);
}
/* failing schema: the disclosure carries the danger tint too, so the badge
   is not the only signal */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap.has-schema-error .ip-schema a.toggle-schema-table {
    border-color: var(--fbm-danger-soft);
    background: var(--fbm-danger-soft);
    color: var(--fbm-danger) !important;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap.has-schema-error .ip-schema a.toggle-schema-table .pl-collapsible-icon {
    color: var(--fbm-danger);
}

/* the expanded schema table — one readable row per column rule */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table {
    margin-top: 8px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table > table.table {
    margin-bottom: 0;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    overflow: hidden;
    background: var(--fbm-bg);
    font-size: 12px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table > table.table > thead > tr > th {
    padding: 6px 10px;
    border-color: var(--fbm-border);
    background: var(--fbm-bg-2);
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table > table.table > tbody > tr > td {
    padding: 6px 10px;
    border-color: var(--fbm-border);
    color: var(--fbm-text);
    vertical-align: middle;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table > table.table > tbody > tr:hover > td {
    background: var(--fbm-bg-2);
}
/* severity colours come from the status tokens, not from the stock labels */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table .label-info {
    background: var(--fbm-accent-soft);
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-accent);
    font-size: 11px;
    font-weight: 600;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table .fa-check-circle,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table .green {
    color: var(--d3v-status-success, #16a34a);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table .fa-times,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-dt-schema-wrap .ip-schema-table .red {
    color: var(--fbm-danger);
}

/* a failing field must be findable while scrolling: the card carries the
   danger border. :has() keeps this in CSS instead of adding a JS class. */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item:has(.fb-dt-schema-wrap.has-schema-error) .input-value[data-type="define_table"],
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item:has(.fb-dt-schema-wrap.has-schema-error) .input-value[data-type="define_table_3d"] {
    border-color: var(--fbm-danger);
    box-shadow: 0 0 0 3px var(--fbm-danger-soft);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Input Actions editor,
 * modern skin + readability.
 *
 * SCOPING: this editor is BODY-MOUNTED — `InputActionsView` renders into a
 * GenericModalView appended to <body>, so it lives OUTSIDE
 * .d3view-inputsBuilder and NO `[data-ui-theme="modern"] ...` rule can ever
 * reach it. Same documented exception as `.select2-drop.fb-select2-modern`,
 * `.ms-modern` and `.pl-dataset-modern`: the marker class is threaded
 * through the view's options (`modernClass`, set at BOTH construction sites
 * in fb_list.js) and the rules below are written DIRECTLY against it.
 *
 * The --fbm-* tokens are custom properties declared on the FormBuilder root
 * and do NOT inherit across the body mount, so they are re-aliased here
 * from --d3v-* exactly like .pl-dataset-modern does.
 *
 * Classic (uiTheme other than 'modern') never gets `fb-actions-modern`, so
 * every rule here is inert there and the default look is untouched.
 * ===================================================================== */
.input-action-view.fb-actions-modern {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-danger: var(--d3v-status-danger, #dc2626);
    --fbm-danger-soft: var(--d3v-status-danger-soft, #fef2f2);
    --fbm-warning: var(--d3v-status-warning, #d97706);
    --fbm-warning-soft: var(--d3v-status-warning-soft, #fffbeb);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 6px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* ---------------------------------------------------------------
 * Shell — the editor is a data surface, so it gets the full modal
 * height and scrolls INSIDE (never the page, never sideways).
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .modal-content {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
    overflow: hidden;
}
.input-action-view.fb-actions-modern .modal-header {
    background: var(--fbm-bg);
    border-bottom: 1px solid var(--fbm-border);
    padding: 14px 16px;
}
.input-action-view.fb-actions-modern .modal-header .modal-title {
    color: var(--fbm-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.input-action-view.fb-actions-modern .modal-body {
    background: var(--fbm-bg-2);
    padding: 12px 16px !important;
    overflow-x: hidden;
}
.input-action-view.fb-actions-modern .modal-footer {
    background: var(--fbm-bg);
    border-top: 1px solid var(--fbm-border);
    padding: 12px 16px;
}

/* ---------------------------------------------------------------
 * Toolbar (view-type dropdown, import/export, add/group/remove)
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .wf-input-action-title {
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--fbm-border);
    gap: 8px;
}
.input-action-view.fb-actions-modern .btn.btn-sm {
    border-radius: var(--fbm-r-sm);
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}
.input-action-view.fb-actions-modern .btn.btn-sm.btn-outline-on-hover {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    color: var(--fbm-text-2);
}
.input-action-view.fb-actions-modern .btn.btn-sm.btn-outline-on-hover:hover,
.input-action-view.fb-actions-modern .btn.btn-sm.btn-outline-on-hover:focus {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
}
.input-action-view.fb-actions-modern .btn.btn-sm:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
.input-action-view.fb-actions-modern .viewType > .dropdown-toggle {
    min-width: 132px;
    text-align: left;
}
.input-action-view.fb-actions-modern .viewType > .dropdown-toggle .fa-caret-down {
    float: right;
    margin-top: 2px;
}
.input-action-view.fb-actions-modern .dropdown-menu {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    padding: 6px;
    margin-top: 6px;
}
.input-action-view.fb-actions-modern .dropdown-menu > li > a {
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-text-2);
    font-size: 12.5px;
    padding: 7px 10px;
    transition: background var(--fbm-t), color var(--fbm-t);
}
.input-action-view.fb-actions-modern .dropdown-menu > li > a:hover {
    background: var(--fbm-bg-2);
    color: var(--fbm-text);
}
.input-action-view.fb-actions-modern .dropdown-menu > li.active > a,
.input-action-view.fb-actions-modern .dropdown-menu > li.active > a:hover {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-weight: 600;
}

/* ---------------------------------------------------------------
 * Filters strip + the groups (west) panel
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .actions-ff .d3view-filters,
.input-action-view.fb-actions-modern .wf-input-action-list > .actions-ff {
    border-radius: var(--fbm-r);
}
.input-action-view.fb-actions-modern .ui-layout-west {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    padding: 8px 4px;
}
.input-action-view.fb-actions-modern .ui-layout-west h3 {
    color: var(--fbm-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.input-action-view.fb-actions-modern .ui-layout-center {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    overflow: hidden;
}

/* ---------------------------------------------------------------
 * TABLE view — the one reported as unreadable. Header gets real
 * hierarchy, and the WIDE content
 * scrolls inside the table's own renderer (the modal itself never
 * scrolls horizontally: overflow-x is hidden on .modal-body above).
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .dt-container,
.input-action-view.fb-actions-modern .dt-container .table-view {
    height: 100%;
}
.input-action-view.fb-actions-modern .table-viewer-header {
    background: var(--fbm-bg);
}
.input-action-view.fb-actions-modern .virtual-table-header-row {
    background: var(--fbm-bg-2);
}
.input-action-view.fb-actions-modern .vitual-table-header-column {
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* the tiny type glyph the table viewer stacks above each header label */
.input-action-view.fb-actions-modern .vitual-table-header-column .th-header-icon {
    color: var(--fbm-muted);
    font-size: 10px;
    opacity: .6;
}
.input-action-view.fb-actions-modern .vitual-table-header-column .cell-header {
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Long input names must WRAP rather than truncate — the row is tall enough
   for two lines, and a name clipped to "Include Three-Point Bending In po"
   is the single biggest readability loss in this table. */
.input-action-view.fb-actions-modern .vitual-table-body-column .action-ip-link {
    display: block;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}
.input-action-view.fb-actions-modern .vitual-table-body-column {
    color: var(--fbm-text-2);
    font-size: 12.5px;
    padding: 8px 12px;
}
/* hierarchy: the action's own input is the row's subject -> strongest */
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="input"] .action-ip-link {
    color: var(--fbm-text);
    font-size: 13px;
    font-weight: 600;
}
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="dependent_input"] .action-ip-link {
    color: var(--fbm-accent);
    font-size: 12.5px;
    font-weight: 500;
}
.input-action-view.fb-actions-modern .action-ip-link {
    text-decoration: none;
    transition: color var(--fbm-t);
}
.input-action-view.fb-actions-modern .action-ip-link:hover {
    color: var(--fbm-accent);
    text-decoration: underline;
}
/* condition + target value read as metadata, not as the subject */
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="condition"] .text-muted {
    color: var(--fbm-text-2);
    font-size: 12px;
}
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="condition"] .fa-filter {
    color: var(--fbm-muted);
    margin-right: 4px;
}
.input-action-view.fb-actions-modern .vitual-table-body-column .label.pl-label-modern {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 4px 10px;
}
.input-action-view.fb-actions-modern .vitual-table-body-column .current-value-container {
    color: var(--fbm-muted);
    font-size: 11.5px;
}
/* row options: three icon buttons must all fit and stay reachable */
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="options"] .d3view-flex-v {
    gap: 4px;
}
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="options"] .btn {
    padding: 5px 8px;
}
.input-action-view.fb-actions-modern .vitual-table-body-column[data-id="options"] .remove-action:hover {
    background: var(--fbm-danger-soft);
    border-color: var(--fbm-danger);
    color: var(--fbm-danger);
}

/* ---------------------------------------------------------------
 * SIMPLE view — a plain table; same header/row treatment.
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .simple-actions-table,
.input-action-view.fb-actions-modern .actions-table {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.input-action-view.fb-actions-modern .simple-actions-table > thead > tr > th,
.input-action-view.fb-actions-modern .actions-table > thead > tr > th {
    background: var(--fbm-bg-2);
    border-bottom: 1px solid var(--fbm-border-strong);
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 10px 12px;
    text-transform: uppercase;
}
.input-action-view.fb-actions-modern .simple-actions-table > tbody > tr > td,
.input-action-view.fb-actions-modern .actions-table > tbody > tr > td,
.input-action-view.fb-actions-modern .simple-actions-table > tbody > tr > th,
.input-action-view.fb-actions-modern .actions-table > tbody > tr > th {
    border-top: 1px solid var(--fbm-border);
    color: var(--fbm-text-2);
    font-size: 12.5px;
    padding: 10px 12px;
    vertical-align: middle;
}
.input-action-view.fb-actions-modern .simple-actions-table > tbody > tr:hover,
.input-action-view.fb-actions-modern .actions-table > tbody > tr:hover {
    background: var(--fbm-bg-2);
}
/* first cell of a simple-view row is the action's own input -> strongest */
.input-action-view.fb-actions-modern .simple-actions-table > tbody > tr > td:first-child a,
.input-action-view.fb-actions-modern .simple-actions-table > tbody > tr > th:first-child a {
    color: var(--fbm-text);
    font-weight: 600;
    text-decoration: none;
}
.input-action-view.fb-actions-modern .simple-actions-table .label,
.input-action-view.fb-actions-modern .actions-table .label {
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
}

/* The "inputs that will update" cell is the densest thing in the editor: one
   pill per affected input, each carrying an action badge and three buttons.
   Saturated primary/warning/danger fills on every one of them is what makes
   the cell read as noise, so the pill becomes a quiet chip and its buttons
   are ghosted until the pill is hovered — the information stays, the shouting
   goes. */
.input-action-view.fb-actions-modern .dependent-input-pill {
    align-items: center;
    background: var(--fbm-bg-2);
    border: 1px solid var(--fbm-border);
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    padding: 3px 6px 3px 4px;
    transition: border-color var(--fbm-t), background var(--fbm-t);
}
.input-action-view.fb-actions-modern .dependent-input-pill:hover {
    background: var(--fbm-bg);
    border-color: var(--fbm-border-strong);
}
.input-action-view.fb-actions-modern .dependent-input-pill .action-type-badge.label {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 3px 8px;
}
.input-action-view.fb-actions-modern .dependent-input-pill .input-name-pill {
    color: var(--fbm-text);
    font-size: 12.5px;
}
.input-action-view.fb-actions-modern .dependent-input-pill .pill-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--fbm-t);
}
.input-action-view.fb-actions-modern .dependent-input-pill:hover .pill-actions,
.input-action-view.fb-actions-modern .dependent-input-pill:focus-within .pill-actions {
    opacity: 1;
}
.input-action-view.fb-actions-modern .dependent-input-pill .pill-actions .btn {
    background: transparent;
    border: none;
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
    color: var(--fbm-muted);
    padding: 3px 6px;
    transition: background var(--fbm-t), color var(--fbm-t);
}
.input-action-view.fb-actions-modern .dependent-input-pill .pill-actions .btn:hover {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}
.input-action-view.fb-actions-modern .dependent-input-pill .pill-actions .btn.btn-danger:hover {
    background: var(--fbm-danger-soft);
    color: var(--fbm-danger);
}
.input-action-view.fb-actions-modern .dependent-inputs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.input-action-view.fb-actions-modern .dependent-inputs-list .mr5,
.input-action-view.fb-actions-modern .dependent-inputs-list .mb5 {
    margin-right: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * FULL / FLEX views — the per-action cards.
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .wf-action-item {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding: 12px 16px;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.input-action-view.fb-actions-modern .wf-action-item:hover {
    border-color: var(--fbm-border-strong);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
.input-action-view.fb-actions-modern .action-group {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    padding: 12px;
}
.input-action-view.fb-actions-modern .wf-change-input {
    border-bottom: 1px solid var(--fbm-border);
    padding: 12px 0;
}
.input-action-view.fb-actions-modern .action-handle-icon {
    color: var(--fbm-muted);
    font-size: 14px;
    transition: color var(--fbm-t);
}
.input-action-view.fb-actions-modern .action-handle-icon:hover {
    color: var(--fbm-accent);
}

/* ---------------------------------------------------------------
 * States — legible, not garish. Danger uses the --d3v-status-*
 * tokens; highlight/editing stay in the warning family.
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .ag-action.hasError,
.input-action-view.fb-actions-modern .wf-action-item.hasError {
    background: var(--fbm-danger-soft);
    border-left: 3px solid var(--fbm-danger);
    border-radius: var(--fbm-r);
}
.input-action-view.fb-actions-modern .ag-action.hasError .toggle-action,
.input-action-view.fb-actions-modern .wf-action-item.hasError .toggle-action {
    color: var(--fbm-danger);
    font-weight: 600;
}
.input-action-view.fb-actions-modern .ag-action.highlighted,
.input-action-view.fb-actions-modern .wf-action-item.highlighted,
.input-action-view.fb-actions-modern .actions-table tbody tr.highlighted,
.input-action-view.fb-actions-modern .virtual-table-renderer .vrow.highlighted {
    background: var(--fbm-warning-soft);
    box-shadow: inset 3px 0 0 var(--fbm-warning);
}
.input-action-view.fb-actions-modern .wf-action-item.isEditingName {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
/* inline row editing must stay obvious AND usable */
.input-action-view.fb-actions-modern .dt-container tr.isEditing td:first-child,
.input-action-view.fb-actions-modern tr.isEditing td:first-child {
    border-left-color: var(--fbm-warning) !important;
    border-left-width: 3px !important;
}
.input-action-view.fb-actions-modern tr.isEditing {
    background: var(--fbm-warning-soft);
}
.input-action-view.fb-actions-modern tr.isEditing .form-control,
.input-action-view.fb-actions-modern tr.isEditing input[type="text"] {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
    height: 34px;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}
.input-action-view.fb-actions-modern tr.isEditing .form-control:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}
.input-action-view.fb-actions-modern .virtual-table-renderer .vrow.selected,
.input-action-view.fb-actions-modern .virtual-table-renderer .vrow.ui-selected {
    background: var(--fbm-accent-soft);
    box-shadow: inset 3px 0 0 var(--fbm-accent);
}

/* select2 inside the editor picks up the same modern skin the builder uses */
.input-action-view.fb-actions-modern a.select2-choice {
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
    height: 34px;
}

/* the "…show more (n)" chip belongs to the same quiet chip family as the pills */
.input-action-view.fb-actions-modern .show-more-pill.label {
    background: var(--fbm-bg-2);
    border: 1px dashed var(--fbm-border-strong);
    border-radius: 999px;
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}
.input-action-view.fb-actions-modern .show-more-pill.label:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
}

/* ---------------------------------------------------------------
 * FULL / FLEX views (continued) — action name hierarchy and the
 * per-row destructive control. The toolbar's own "Remove Groups"
 * stays a solid btn-danger; only the repeated per-row remove is
 * ghosted, so one loud red button per screen instead of dozens.
 * --------------------------------------------------------------- */
.input-action-view.fb-actions-modern .wf-action-item .toggle-action {
    color: var(--fbm-text);
    text-decoration: none;
}
.input-action-view.fb-actions-modern .wf-action-item .action-name {
    color: var(--fbm-text);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.input-action-view.fb-actions-modern .wf-action-item .toggle-action:hover .action-name {
    color: var(--fbm-accent);
}
.input-action-view.fb-actions-modern .wf-action-item .wf-action-remove.btn-danger,
.input-action-view.fb-actions-modern .ag-action .wf-action-remove.btn-danger {
    background: var(--fbm-bg);
    background-image: none;
    border: 1px solid var(--fbm-border);
    box-shadow: none;
    color: var(--fbm-muted);
    text-shadow: none;
}
.input-action-view.fb-actions-modern .wf-action-item .wf-action-remove.btn-danger:hover,
.input-action-view.fb-actions-modern .ag-action .wf-action-remove.btn-danger:hover {
    background: var(--fbm-danger-soft);
    border-color: var(--fbm-danger);
    color: var(--fbm-danger);
}
.input-action-view.fb-actions-modern .ag-action + .ag-action {
    margin-top: 8px;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the action-evaluation
 * panel: the toast that reports "Evaluating Actions" -> "Actions Complete"
 * after an input's actions run.
 *
 * SCOPING: the panel is appended to <body> by `_evaluateActionsForInput`,
 * so it sits outside .d3view-inputsBuilder and no `[data-ui-theme=...]`
 * rule can reach it. Same documented body-mount exception as
 * `.select2-drop.fb-select2-modern` / `.pl-dataset-modern`: the marker
 * class `fb-action-panel-modern` is emitted by the template (from
 * `m.options.uiTheme === 'modern'`) and every rule below hangs off it.
 * Classic keeps its original inline styles and matches NOTHING here.
 *
 * The --fbm-* tokens live on the FormBuilder root and do not inherit
 * across the body mount, so they are re-aliased from --d3v-* locally.
 * ===================================================================== */
.action-evaluation-panel.fb-action-panel-modern {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-success: var(--d3v-status-success, #16a34a);
    --fbm-success-soft: var(--d3v-status-success-soft, #f0fdf4);
    --fbm-danger: var(--d3v-status-danger, #dc2626);
    --fbm-danger-soft: var(--d3v-status-danger-soft, #fef2f2);
    --fbm-warning: var(--d3v-status-warning, #d97706);
    --fbm-warning-soft: var(--d3v-status-warning-soft, #fffbeb);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 6px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));

    /* 35vw was the inline width and it squeezed a 3-column table into ~560px,
       wrapping every input name onto three lines. Give it room to breathe but
       cap it so it never dominates a wide screen, and cap the height to the
       viewport so a long run scrolls INSIDE the body (below) rather than
       running off-screen. */
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    width: 620px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: 0 16px 48px rgba(15, 23, 42, .16);
    overflow: hidden;
}
.action-evaluation-panel.fb-action-panel-modern .panel {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-height: 0;
}

/* header ---------------------------------------------------------- */
.action-evaluation-panel.fb-action-panel-modern .panel-heading {
    background: var(--fbm-bg);
    background-image: none;
    border-bottom: 1px solid var(--fbm-border);
    border-radius: 0;
    flex: 0 0 auto;
    padding: 12px 14px;
}
.action-evaluation-panel.fb-action-panel-modern .panel-title {
    align-items: center;
    color: var(--fbm-text);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    letter-spacing: -.01em;
}
.action-evaluation-panel.fb-action-panel-modern .panel-title > .fa-check-circle {
    color: var(--fbm-success);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title > .fa-exclamation-triangle {
    color: var(--fbm-danger);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title > .fa-cogs {
    color: var(--fbm-accent);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
}
.action-evaluation-panel.fb-action-panel-modern .panel-title-actions .btn {
    background: var(--fbm-bg);
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-text-2);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title-actions .btn:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title-actions .close {
    color: var(--fbm-muted);
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: color var(--fbm-t);
}
.action-evaluation-panel.fb-action-panel-modern .panel-title-actions .close:hover {
    color: var(--fbm-text);
}

/* body ------------------------------------------------------------ */
.action-evaluation-panel.fb-action-panel-modern .panel-body {
    flex: 1 1 auto;
    min-height: 0;
    /* a global `.panel-body { max-height: 300px }` was previously beaten by the
       inline `max-height: 60vh`; the modern branch drops inline styles, so the
       cap has to be released here or the table is stuck at 5 visible rows. The
       real ceiling is the panel's own max-height + this flex item. */
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
}
.action-evaluation-panel.fb-action-panel-modern .alert-info {
    background: var(--fbm-accent-soft);
    background-image: none;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
    color: var(--fbm-text-2);
    filter: none;
    margin-bottom: 12px;
    padding: 8px 12px;
    text-shadow: none;
}
.action-evaluation-panel.fb-action-panel-modern .alert-info small {
    font-size: 12.5px;
}
.action-evaluation-panel.fb-action-panel-modern .alert-info b {
    color: var(--fbm-text);
    font-weight: 600;
}
.action-evaluation-panel.fb-action-panel-modern .alert-danger {
    background: var(--fbm-danger-soft);
    background-image: none;
    border: 1px solid var(--fbm-danger);
    border-radius: var(--fbm-r-sm);
    box-shadow: none;
    color: var(--fbm-danger);
    filter: none;
    text-shadow: none;
}
/* the table already scrolls inside .panel-body; the bootstrap wrapper's own
   scroller + border would double up */
.action-evaluation-panel.fb-action-panel-modern .table-responsive {
    border: none;
    margin-bottom: 0;
    overflow-x: visible;
}

/* status table ---------------------------------------------------- */
.action-evaluation-panel.fb-action-panel-modern .action-status-table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table > thead > tr > th {
    background: var(--fbm-bg-2);
    border-bottom: 1px solid var(--fbm-border-strong);
    border-top: none;
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 8px 10px;
    text-transform: uppercase;
}
/* the action badge and the status pill are fixed-size, so the input NAME —
   the only column with real prose — gets everything that is left over */
.action-evaluation-panel.fb-action-panel-modern .action-status-table .col-action {
    width: 130px;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table .col-input {
    width: auto;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table .col-status {
    width: 120px;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table > tbody > tr > td {
    border-top: 1px solid var(--fbm-border);
    color: var(--fbm-text);
    font-size: 12.5px;
    line-height: 1.4;
    padding: 8px 10px;
    vertical-align: middle;
    word-break: break-word;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table > tbody > tr:hover > td {
    background: var(--fbm-bg-2);
}
/* the action type is metadata about the row, not its subject: quiet chip */
.action-evaluation-panel.fb-action-panel-modern .action-status-table .label {
    background: var(--fbm-bg-2);
    border: 1px solid var(--fbm-border);
    border-radius: 999px;
    color: var(--fbm-text-2);
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 4px 10px;
    text-shadow: none;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table > tbody > tr > td:nth-child(2) {
    color: var(--fbm-text);
    font-weight: 500;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table .text-success {
    color: var(--fbm-success);
    font-weight: 600;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table .text-danger {
    color: var(--fbm-danger);
    font-weight: 600;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table .text-warning {
    color: var(--fbm-warning);
    font-weight: 600;
}
.action-evaluation-panel.fb-action-panel-modern .action-status-table > tbody > tr > td:last-child {
    font-size: 12px;
    white-space: nowrap;
}

/* footer ---------------------------------------------------------- */
.action-evaluation-panel.fb-action-panel-modern .panel-footer {
    background: var(--fbm-bg-2);
    border-top: 1px solid var(--fbm-border);
    border-radius: 0;
    flex: 0 0 auto;
    padding: 9px 14px;
}
.action-evaluation-panel.fb-action-panel-modern .panel-footer small,
.action-evaluation-panel.fb-action-panel-modern .action-progress-text {
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* modern scrollbar for the panel body (same recipe as the rest of the
   body-mounted modern surfaces above) */
.action-evaluation-panel.fb-action-panel-modern,
.action-evaluation-panel.fb-action-panel-modern * {
    scrollbar-width: thin;
    scrollbar-color: var(--fbm-border-strong, #cbd5e1) transparent;
}
.action-evaluation-panel.fb-action-panel-modern *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.action-evaluation-panel.fb-action-panel-modern *::-webkit-scrollbar-track {
    background: transparent;
}
.action-evaluation-panel.fb-action-panel-modern *::-webkit-scrollbar-thumb {
    background: var(--fbm-border-strong, #cbd5e1);
    border-radius: 999px;
}
.action-evaluation-panel.fb-action-panel-modern *::-webkit-scrollbar-thumb:hover {
    background: var(--fbm-muted, #94a3b8);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Builder shell polish,
 * modern theme only. Five things the earlier passes left stock:
 *   1. the collapsed sample-inputs rail still painted a panel border, so
 *      it read as an empty column instead of just a re-open affordance
 *   2. the sample-inputs panel produced TWO scrollbars (its own auto
 *      overflow plus the list's, off by the hardcoded calc() offsets)
 *   3. the input LABEL row (type-icon addon + label field) was still
 *      pure Bootstrap - #ccc borders, #eee addon - while the value row
 *      below it was already modern
 *   4. the drag handle was pinned to 50% of a tall row and landed on
 *      top of the DataSource label
 *   5. the footer reserved 77px for a 41px bar, leaving dead space, and
 *      its buttons were btn-default
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* --- 1. collapsed rail is just the button, no panel chrome ---------- */
/* the 1px #CCC left border is an inline style on .si-container, so it
   can only be neutralised with !important */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container.si-collapsed {
    border-left-color: transparent !important;
    background: transparent;
}

/* --- 2. one scrollbar: make the rail a real flex column ------------- */
/* .tab-content carries an inline height:calc(100% - 40px) and the list an
   inline max-height:calc(100% - 54px); neither matches the real header, so
   both boxes overflowed. Let flex do the measuring instead. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs > .info,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs > .nav-tabs {
    flex: 0 0 auto;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs > .tab-content {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .tab-content > .tab-pane.active,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .tab-pane.active > .pl-search {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .pl-search > .p10 {
    flex: 0 0 auto;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container .sample-inputs-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    overflow-y: auto;
}

/* --- 3. the input LABEL row: type-icon addon + label field ---------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container li.field-item .input-name .input-group > .input-group-addon.-input-type {
    padding: 0 9px;
    border: 1px solid var(--fbm-border);
    border-right-width: 0;
    border-top-left-radius: var(--fbm-r);
    border-bottom-left-radius: var(--fbm-r);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--fbm-bg-2);
    color: var(--fbm-muted);
    transition: color var(--fbm-t), background var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container li.field-item .input-name .input-group:hover > .input-group-addon.-input-type {
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container li.field-item .input-name .input-group > .form-control {
    height: 36px;
    border: 1px solid var(--fbm-border);
    border-top-right-radius: var(--fbm-r);
    border-bottom-right-radius: var(--fbm-r);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: var(--fbm-bg);
    color: var(--fbm-text);
    box-shadow: none;
    transition: border-color var(--fbm-t), box-shadow var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container li.field-item .input-name .input-group > .form-control:focus {
    border-color: var(--fbm-accent);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
    outline: none;
}

/* keep the addon the same height as the field it is fused to */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container li.field-item .input-name .input-group > .input-group-addon.-input-type {
    height: 36px;
    vertical-align: middle;
}

/* --- 4. drag handle sits in the top gutter, not over DataSource ----- */
/* the 50%-centring rule is !important, so this must be too */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .sortable-handle {
    top: 13px !important;
    left: 2px !important;
    transform: none !important;
    color: var(--fbm-muted);
    transition: color var(--fbm-t), opacity var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .sortable-handle:hover {
    color: var(--fbm-accent);
}

/* --- 5. footer sized by its content, not by a hardcoded 77px -------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .nested-inputs-container {
    display: flex;
    flex-direction: column;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .nested-inputs-container > .nested-inputs-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .nested-inputs-container > .carousel-footer {
    flex: 0 0 auto;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--fbm-border);
    background: var(--fbm-bg);
}

/* .pull-right + a flex row would reverse the visual order; the footer
   template relies on float order, so restore it explicitly */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer > .pull-right,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer > .dropdown.pull-right {
    float: none !important;
    margin: 0 !important;
}

/* every control the footer can hold - Add new group in the nested view,
   plus First / Previous / Next / Last and the Go-to-Group dropup that the
   carousel view adds - gets one button treatment */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .btn-default,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .add_new_group,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .step_to,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .steps > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-bg);
    color: var(--fbm-text-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-shadow: none;
    box-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .btn-default:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .add_new_group:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .step_to:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .carousel-footer .steps > .dropdown-toggle:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-border-strong);
    color: var(--fbm-accent);
}

/* adding a group is the footer's primary action in build mode */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .carousel-footer .add_new_group {
    border-color: transparent;
    background: var(--fbm-accent);
    color: #fff;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] .carousel-footer .add_new_group:hover {
    border-color: transparent;
    background: var(--fbm-accent);
    color: #fff;
    filter: brightness(1.08);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the builder's
 * "Required" control was a 50x25 pill toggle - far too much weight for a
 * binary flag sitting in a dense meta row. Restyled to the compact
 * checkbox the modern multiselect menus use (token square, accent fill,
 * white tick) so the row reads as one design language.
 *
 * The class is NOT changed: `pl-checkbox` is a global control defined in
 * plugins.css and used across the whole app, and the JS binds to it. Only
 * its appearance is overridden, and only inside the build-mode meta row
 * under the modern theme - every other pl-checkbox in d3VIEW, including
 * the ones in submit/view and in classic, keeps the pill.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container > div {
    display: flex;
    align-items: center;
    height: 30px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox[type="checkbox"] {
    /* height carries !important in plugins.css, so this one must too */
    width: 16px;
    min-width: 16px;
    height: 16px !important;
    margin: 0;
    border: 1px solid var(--fbm-border-strong);
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-bg);
    box-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox[type="checkbox"]:hover {
    border-color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox:checked[type="checkbox"] {
    border-color: var(--fbm-accent);
    background: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--fbm-accent-soft);
}

/* the pill's sliding knob becomes the tick - drawn with borders so it
   needs no icon font on a pseudo-element of an <input> */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox[type="checkbox"]::after {
    top: 1px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--fbm-t);
}

/* the base rule slides the knob to left:50% when checked - hold the tick */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-options-outer .required-container input.pl-checkbox:checked[type="checkbox"]::after {
    left: 5px;
    opacity: 1;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the kickstarter empty
 * state rendered as a data-source gallery. Opt-in: only applies under the
 * modern FormBuilder theme (data-ui-theme="modern"); the classic pill row
 * is untouched. All new selectors, no overrides.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 4px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-head {
    text-align: center;
    margin-bottom: 20px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-title {
    font-size: 19px;
    font-weight: 750;
    letter-spacing: -.015em;
    color: var(--d3v-text-primary, #1e293b);
    margin: 0 0 5px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--fbm-muted, #94a3b8);
    margin: 0;
}

/* auto-fit keys the column count off the CONTAINER, not the viewport. That
   matters because this panel renders in a narrow carousel body, in a modal
   and in the workflow START dialog while the window itself stays wide, so a
   viewport media query would leave three cramped columns in a 500px box. */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

/* Reworked by shashank2104 on 2026-07-26 - R2026-51 - card is now a horizontal
   icon + body row so the TYPE NAME reads as the hero headline. */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 16px 34px 16px 15px; /* extra right pad clears the trailing arrow */
    border: 1px solid var(--fbm-border, #e2e8f0);
    border-radius: var(--d3v-r-lg, 12px);
    background: var(--fbm-bg, #ffffff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0, 0, 0, .05));
    cursor: pointer;
    transition: var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
    overflow: hidden;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:focus-visible {
    border-color: var(--fbm-accent, #3b82f6);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, .10));
    transform: translateY(-2px);
    outline: none;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:focus-visible {
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, .10)), 0 0 0 3px var(--fbm-accent-soft, #e7f1ff);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:active {
    transform: translateY(0);
}

/* trailing arrow: the affordance that says this opens something */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 17px;
    font-size: 11px;
    color: var(--fbm-muted, #94a3b8);
    opacity: 0;
    transform: translateX(-4px);
    transition: var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:hover::after,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--fbm-accent, #3b82f6);
}

/* the type icon: a touch larger now that it anchors the whole card row */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--d3v-r-md, 8px);
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--fbm-accent, #3b82f6);
    background: var(--fbm-accent-soft, #e7f1ff);
    transition: var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card:hover .fbk-ic {
    background: var(--fbm-accent, #3b82f6);
    color: #ffffff;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* THE HERO: the concrete input type, big and unmistakable */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--d3v-text-primary, #1e293b);
    line-height: 1.2;
    margin-bottom: 3px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-desc {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #475569);
    white-space: normal;
}

/* the More card keeps the success accent the classic button used */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more .fbk-ic {
    color: var(--d3v-success, #10b981);
    background: rgba(16, 185, 129, .12);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more:focus-visible {
    border-color: var(--d3v-success, #10b981);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more:hover .fbk-ic {
    background: var(--d3v-success, #10b981);
    color: #ffffff;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more:hover::after,
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-kickstarter-modern .fbk-card.is-more:focus-visible::after {
    color: var(--d3v-success, #10b981);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - PER-INPUT EDIT
 * (Option C). Build + modern only.
 *
 * The row goes quiet: label, value, description, plus a readable SOURCE
 * chip and a pencil. The DataSource / Required / Actions / Options strip
 * is NOT moved in the DOM - it stays inside its own li.field-item and is
 * re-positioned by CSS into a panel docked to the right. That is the
 * whole safety argument: 232 of the 317 selectors in the events map are
 * prefixed `li.field-item`, and 133 handlers resolve their input with
 * `.parents('li.field-item')`. A body-mounted panel would break both;
 * a re-positioned child breaks neither.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item {
    /* R2026-51 - kept as the row's own local; the editor's width now lives with the editor */
    --fbc-w: 360px;
}

/* ---- 1. the quiet row -------------------------------------------- */
/* Updated by shashank2104 on 2026-07-22 - R2026-51 - the meta strip is now
   out of flow whenever the panel editor is opted into (`inputEditView:
   'panel'`), open or not: EditInputView owns DataSource / Required /
   Actions / Options, so leaving the strip on the editing row rendered a
   second copy of every one of them. With the default 'inline' the strip
   stays on the row exactly as it always has (wearing the modern skin),
   which is what makes the skin shippable independently of the editor. */
.d3view-inputsBuilder[data-ui-theme="modern"][data-input-edit-view="panel"] .inputs-builder-container[data-mode="build"] li.field-item .input-bottom-row-outer {
    display: none !important;
}

/* ---- 2. source chip + pencil, always visible ---------------------- */
/* deliberately NOT hover-only: hover-only controls fail WCAG 2.2 SC
   1.4.13 and are invisible to keyboard and touch users. */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid var(--fbm-border);
    border-radius: 999px;
    background: var(--fbm-bg);
    color: var(--fbm-text-2);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip > i {
    font-size: 11.5px;
    color: var(--fbm-muted);
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip:hover {
    border-color: var(--fbm-accent);
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip:hover > i {
    color: var(--fbm-accent);
}

/* sources other than plain user input get their own tint so the row is
   scannable without reading every chip */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip[data-src="workers"] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip[data-src="workers"] > i { color: #f59e0b; }

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip[data-src="previous_inputs"] {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-src-chip[data-src="previous_inputs"] > i { color: #8b5cf6; }

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-edit-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-text-2);
    font-size: 12px;
    box-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-edit-input:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-edit-input:focus-visible,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item.fb-editing .fb-edit-input {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-border);
    color: var(--fbm-accent);
    outline: none;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - BUILD-mode description,
 * modern skin only.
 *
 * BEFORE: the description was as loud as the field itself - full-size body
 * text plus a permanently-visible edit button on every row. On a 296-input
 * form that is 296 buttons competing with the actual controls, and the
 * description read as content rather than as annotation.
 *
 * NOW: the text is annotation-weight (12px, muted, tighter leading) and the
 * pencil only appears on row hover / keyboard focus. It is CSS only - the
 * `contenteditable` editor, its handlers and the classic skin are untouched,
 * and the button is hidden with opacity + visibility (never `display:none`)
 * so it stays focusable in the tab order and simply fades in when tabbed to.
 * ===================================================================== */

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-desc-outer {
    max-height: none;
    opacity: .78;
    transition: opacity var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item:hover .input-desc-outer,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-desc-outer:focus-within {
    opacity: 1;
}

/* the info glyph: a quiet marker, not an icon button */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .ip-desc-container > .fa-info-circle {
    top: 7px !important;
    color: var(--fbm-muted, #94a3b8) !important;
    font-size: 11px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-desc-outer .ip-desc-editor {
    padding: 3px 10px 3px 20px;
    color: var(--fbm-muted-2, #64748b);
    font-size: 12px;
    line-height: 1.5;
    border-radius: var(--fbm-r-sm, 4px);
}

/* placeholder rows should recede further than described ones */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .ip-desc-editor:empty::before {
    color: var(--fbm-muted, #94a3b8);
    font-style: italic;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-desc-outer .ip-desc-editor:hover {
    border-color: var(--fbm-border, #e2e8f0);
    background: var(--fbm-bg-2, #f8fafc);
}

/* editing IS the loud state - full contrast, accent ring, no dimming */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .input-desc-outer .ip-desc-editor:focus {
    color: var(--fbm-text, #1e293b);
    background: var(--fbm-bg, #fff);
    border-color: var(--fbm-accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--fbm-accent-soft, rgba(59, 130, 246, .12));
}

/* ---- the pencil: on hover / focus only ----------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .ip-desc-edit {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1)), visibility var(--fbm-t, .16s cubic-bezier(.4, 0, .2, 1));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item:hover .ip-desc-edit,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .ip-desc-container:focus-within .ip-desc-edit,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .ip-desc-edit:focus-visible {
    opacity: 1;
    visibility: visible;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the panel itself is no
 * longer built out of this row's markup. It is Views.EditInputView, body-
 * mounted, with its own stylesheet (javascripts/views/EditInputView.css).
 * Everything that used to live here - the re-positioned
 * `.input-bottom-row-outer`, the flattened `ul.input-edit-icons`, the
 * ::before/::after switches, the section `order` hack, the editor
 * header/footer and the actions-popover margin nudge - is gone with it.
 *
 * What stays above: the QUIET ROW (the bottom strip is out of flow while
 * `inputEditView: 'panel'` is on) and the row's source chip / sliders
 * button, which are the row-side affordances that open the panel.
 * ===================================================================== */


/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the row's ellipsis
 * (Duplicate / Remove only). It shares the `input-edit-icons` class with
 * the panel list so the same handler drives it, so every panel rule is
 * excluded from it via :not(.fb-row-menu-list).
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-text-2);
    font-size: 12px;
    box-shadow: none;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu > .dropdown-toggle:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu.open > .dropdown-toggle {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-text);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list {
    min-width: 176px;
    padding: 5px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: var(--fbm-sh, 0 6px 20px rgba(15, 23, 42, .12));
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-text-2);
    font-size: 13px;
    transition: background var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list > li > a .pl-txt-icon {
    width: 15px;
    text-align: center;
    color: var(--fbm-muted);
    font-size: 12px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list > li > a:hover {
    background: var(--fbm-accent-soft);
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list > li > a[data-id="remove"]:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container[data-mode="build"] li.field-item .fb-row-menu-list > li > a[data-id="remove"]:hover .pl-txt-icon {
    background: var(--fbm-danger-soft, #fee2e2);
    color: var(--fbm-danger, #ef4444);
}


/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - HORIZONTAL + VERTICAL
 * group navigation, modern.
 *
 * The nested view got its modern skin from tree_view.css (`.tv-modern`),
 * but the other two group navigations were never touched — they are drawn
 * by the SHARED TabManager plugin (`plugins/tabmanager`), which has no
 * theme hook of its own and is used by simlytiks/solverai/etc. So the skin
 * lives here instead, double-scoped to the modern builder AND to
 * FormBuilder's own `.tabmanager[data-view=...]` wrapper: no other host of
 * TabManager, and no classic FormBuilder, can see any of it.
 *
 * Anatomy (from the live DOM):
 *   horizontal -> .tabmanager[data-view="horizontal"] > .d3view-tab-manager
 *                 > .d3view-tabs-horizontal[data-design="material"]
 *                 > .nav-tabs-container > ul.nav-tabs > li.nav-tab-item
 *                   > a > .tab-name + .badge.tab-count, + .tab_options kebab
 *   vertical   -> .tabmanager[data-view="vertical"] > .d3view-tab-manager
 *                 > .d3view-tabs-vertical > .nav-tabs-container
 *                 > ul.nav-tabs-vertical > li.nav-tab-item > a  (+ a.add_tab)
 *
 * The classic vertical active row is a solid #428BCA bar with
 * `color: #FFF!important` — the only place below that needs !important back.
 * ===================================================================== */
.d3view-inputsBuilder[data-ui-theme="modern"] {
    --fbm-accent: var(--d3v-accent, #3b82f6);
    --fbm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --fbm-border: var(--d3v-border, #e2e8f0);
    --fbm-bg: var(--d3v-bg-primary, #ffffff);
    --fbm-bg-2: var(--d3v-bg-secondary, #f8fafc);
    --fbm-text: var(--d3v-text-primary, #1e293b);
    --fbm-text-2: var(--d3v-text-secondary, #475569);
    --fbm-muted: var(--d3v-text-muted, #94a3b8);
    --fbm-r: var(--d3v-r-md, 8px);
    --fbm-r-sm: var(--d3v-r-sm, 4px);
    --fbm-sh-sm: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .06));
    --fbm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
}

/* --- 1. shared: the manager frame ------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager,
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tab-manager {
    border-bottom-color: var(--fbm-border);
}

/* --- 2. HORIZONTAL: the tab strip ------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs-container {
    gap: 2px;
    padding: 0 4px;
}

/* the material underline is kept as the selected signal, but in accent
   tokens and with a soft tinted head so the tab reads as a surface too */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item {
    border-radius: var(--fbm-r-sm) var(--fbm-r-sm) 0 0;
    transition: background var(--fbm-t), border-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item > a {
    padding: 9px 14px;
    background: transparent;
    color: var(--fbm-text-2);
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item .tab-name {
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    transition: color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item:hover {
    background: var(--fbm-bg-2);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item:hover .tab-name {
    color: var(--fbm-text);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.nav-tab-item.active {
    background: var(--fbm-accent-soft);
    border-bottom: 2px solid var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.nav-tab-item.active > a,
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.nav-tab-item.active .tab-name {
    background: transparent;
    color: var(--fbm-accent);
    font-weight: 600;
}

/* count chip — same soft pill the nested tree uses for its item counts,
   instead of the bootstrap grey .badge-default lozenge. d3view.min.css ships
   `.badge-default { background: #eee !important }`, so the two background
   declarations here are the only ones in this block that need !important. */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item .badge.tab-count {
    min-width: 20px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fbm-bg-2) !important;
    color: var(--fbm-text-2);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-shadow: none;
    transition: background-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .nav-tabs > li.nav-tab-item.active .badge.tab-count {
    background: var(--fbm-bg) !important;
    color: var(--fbm-accent);
}

/* per-tab kebab — ghost by default, accent tint on hover (the classic rule
   forces a white circle with !important, hence the matching !important) */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager li.nav-tab-item .tab_options .dropdown-toggle {
    padding: 4px 8px;
    border: none;
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-muted);
    transition: background var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager li.nav-tab-item .tab_options .dropdown-toggle:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager li.nav-tab-item .tab_options.open .dropdown-toggle {
    background: var(--fbm-bg) !important;
    border-radius: var(--fbm-r-sm) !important;
    color: var(--fbm-accent) !important;
}

/* scroll arrows — the classic 2em carets are louder than the tabs */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .scroll_button {
    padding: 2px 8px;
    border: none;
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-text-2);
    transition: background var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .scroll_button > i {
    font-size: 1.3em;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .scroll_button:hover {
    background: var(--fbm-bg-2);
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal .scroll_button.disabled > i {
    color: var(--fbm-muted);
}

/* overflow ("bars") dropdown of tabs */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager .tabm-dd > ul.dropdown-menu {
    padding: 6px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: var(--fbm-sh-sm);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager .tabm-dd li.nav-tab-item {
    border-radius: var(--fbm-r-sm);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tab-manager .tabm-dd li.nav-tab-item > a {
    padding: 7px 10px;
    font-size: 13px;
}

/* add-group link in the strip */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="horizontal"] div.d3view-tabs-horizontal div.add_tab_container a.add_tab {
    color: var(--fbm-accent);
    font-size: 13px;
    font-weight: 500;
}

/* --- 3. VERTICAL: the group rail ------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical .nav-tabs-container {
    width: 190px;
    padding: 8px 6px;
    border-right: 1px solid var(--fbm-border);
    background: var(--fbm-bg-2);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical ul.nav-tabs-vertical > li.nav-tab-item {
    margin-bottom: 2px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical ul.nav-tabs-vertical > li.nav-tab-item > a {
    padding: 8px 10px;
    border: none;
    border-radius: var(--fbm-r-sm);
    background: transparent;
    color: var(--fbm-text-2);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--fbm-t), color var(--fbm-t), box-shadow var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical ul.nav-tabs-vertical > li.nav-tab-item:not(.active) > a:hover {
    background: var(--fbm-bg);
    color: var(--fbm-text);
}

/* selected group — accent tint + rail, replacing the solid #428BCA block.
   The classic rule sets `color: #FFF!important`, so this one has to match it. */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical ul li.nav-tab-item.active > a {
    background: var(--fbm-bg);
    box-shadow: inset 3px 0 0 0 var(--fbm-accent), var(--fbm-sh-sm);
    color: var(--fbm-accent) !important;
    font-weight: 600;
}

/* add-group affordance under the rail */
.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical a.add_tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px dashed var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-accent);
    font-size: 12px;
    font-weight: 500;
    transition: background var(--fbm-t), border-color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .tabmanager[data-view="vertical"] div.d3view-tabs-vertical a.add_tab:hover {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    text-decoration: none;
}

/* --- 4. the group stepper footer (shared by both views) --------------- */
/* `.carousel-footer` is FormBuilder's own markup, not TabManager's, but it
   only ever shows under the horizontal / vertical views — the nested view
   replaces it with the tree. It kept plain bootstrap `btn-default` chrome. */
.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer {
    padding: 6px 8px;
    border-top: 1px solid var(--fbm-border);
    background: var(--fbm-bg);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .btn.btn-default {
    margin-left: 4px;
    padding: 5px 12px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r-sm);
    background: var(--fbm-bg);
    box-shadow: none;
    color: var(--fbm-text-2);
    font-size: 12.5px;
    font-weight: 500;
    transition: background var(--fbm-t), border-color var(--fbm-t), color var(--fbm-t);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .btn.btn-default:hover,
.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .dropdown.open > .btn.btn-default {
    background: var(--fbm-accent-soft);
    border-color: var(--fbm-accent);
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .btn.btn-default.disabled,
.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .btn.btn-default[disabled] {
    background: var(--fbm-bg-2);
    border-color: var(--fbm-border);
    color: var(--fbm-muted);
    opacity: 1;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu {
    padding: 6px;
    border: 1px solid var(--fbm-border);
    border-radius: var(--fbm-r);
    box-shadow: var(--fbm-sh-sm);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li {
    border-radius: var(--fbm-r-sm);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li > a {
    padding: 6px 10px 6px 20px;
    border-radius: var(--fbm-r-sm);
    color: var(--fbm-text-2);
    font-size: 13px;
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li:hover {
    background-color: var(--fbm-accent-soft);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li:hover > a {
    background: transparent;
    color: var(--fbm-accent);
}

.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li.active:before,
.d3view-inputsBuilder[data-ui-theme="modern"] .carousel-footer .steps ul.dropdown-menu > li.active > a {
    color: var(--fbm-accent);
    font-weight: 600;
}

/* The empty-state wrapper (.no-data) is absolutely positioned and centred with
   left:50%/translate(-50%,-50%) and no width, so it shrink-wraps to its content.
   That was fine for the old pill row, but it starves the gallery: the grid's
   preferred width is one minmax column, so a 900px slide rendered a single 309px
   column. Stretch the wrapper horizontally when it holds the gallery, keeping the
   vertical centring and leaving `display` alone so the existing show/hide logic
   that reveals this wrapper still owns visibility. */
.d3view-inputsBuilder[data-ui-theme="modern"] div.carousel-slide .no-data:has(> .fb-kickstarter-modern),
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-group.nvg .no-data:has(> .fb-kickstarter-modern),
.d3view-inputsBuilder[data-ui-theme="modern"] ul.field-items + .no-data:has(> .fb-kickstarter-modern) {
    left: 0;
    right: 0;
    width: auto;
    padding: 0 16px;
    transform: translateY(-50%);
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - COLLAPSED curve input
 * (Options -> "Hide table").
 *
 * With the table hidden the value area used to render a "Number of
 * curves" line, a free-floating right-aligned toolbar and a description
 * far below it — three unrelated bands separated by a tall empty gap,
 * and no sight of the curve itself. It now collapses into ONE row:
 *   [ sparkline ][ curve stats chips ][ existing toolbar ]
 *
 * The row lives INSIDE .input-value-outer, so the full-width name band
 * above it is untouched and the field keeps the same skeleton as every
 * other input type (name band, then value, then description).
 *
 * Layout is theme-agnostic so classic degrades gracefully; the surface
 * treatment is scoped to [data-ui-theme="modern"].
 * ===================================================================== */
.d3view-inputsBuilder li.field-item .fb-curve-collapsed {
    display: flex;
    align-items: center;
    /* wrap on AVAILABLE WIDTH, not on viewport width - this row also lives in narrow
       columns, sidebars and modals inside a wide window, so a media query would be the
       wrong signal. When the toolbar no longer fits beside the curve it drops to its own
       line instead of overflowing the field. */
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
    min-width: 0;
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark {
    /* the curve is the point of this row, so it takes the free space rather than
       sitting at a fixed width with a dead gap to its right. Capped so it stays a
       sparkline on very wide forms instead of stretching into a full chart. */
    flex: 1 1 148px;
    min-width: 120px;
    max-width: 460px;
    height: 62px;
    overflow: hidden;
    cursor: pointer;
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark > svg,
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-stats {
    display: flex;
    align-items: center;
    /* grow: 0 so the sparkline (not the chips) absorbs any FREE space and the chips stay
       on one line. shrink: 1 so that when the field is genuinely too narrow they give way
       and wrap, instead of pushing the toolbar out of the row. */
    flex: 0 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    gap: 6px;
}
/* the toolbar already right-aligns its own buttons — it only needs to stop
   claiming a new line of its own */
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-input-toolbar {
    flex: 0 0 auto;
    margin-top: 0 !important;
    margin-left: auto;
    padding-left: 16px;
}

/* --------------------------------------------------------------------
 * modern surface treatment
 * ------------------------------------------------------------------ */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-curve-collapsed {
    /* no card, no border, no fill - the row is defined by spacing alone */
    padding: 2px 0;
    border: 0;
    background: none;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-curve-collapsed .fb-curve-spark {
    /* deliberately chrome-free: no border, background or shadow. The curve reads as
       the value itself, not as a widget sitting in a box. Hover is carried by opacity
       alone so the only thing that ever moves is the curve. */
    opacity: .92;
    transition: opacity var(--fbm-t);
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .fb-curve-collapsed .fb-curve-spark:hover {
    opacity: 1;
}

/* the plotted curve itself */
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark-area {
    fill: var(--fbm-accent-soft, #e7f1ff);
    stroke: none;
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark-line {
    fill: none;
    stroke: var(--fbm-accent, #3b82f6);
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
/* additional curves in the same input stay legible without competing */
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark-line.is-secondary {
    stroke: var(--fbm-muted, #94a3b8);
    stroke-width: 1.4;
    opacity: .75;
}

/* stat chips */
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--fbm-border, #e2e8f0);
    border-radius: 999px;
    background: var(--fbm-bg, #fff);
    color: var(--fbm-text-2, #475569);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-chip > i {
    font-size: 10px;
    color: var(--fbm-muted, #94a3b8);
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-chip.is-accent {
    border-color: transparent;
    background: var(--fbm-accent-soft, #e7f1ff);
    color: var(--fbm-accent, #3b82f6);
}
.d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-chip.is-accent > i {
    color: var(--fbm-accent, #3b82f6);
}

/* narrow value columns: the chips are the first thing worth dropping */
@media (max-width: 1200px) {
    .d3view-inputsBuilder li.field-item .fb-curve-collapsed .fb-curve-spark {
        max-width: 260px;
    }
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-23 - R2026-51 - RESPONSIVE modern skin.
 *
 * The modern theme was authored on a wide screen and had three hard
 * assumptions that all fail at ~1024px (a 13" laptop), where the builder
 * itself is only ~820px wide:
 *
 *   1. the row header put the id-chip / user / track / source / settings
 *      cluster in an ABSOLUTELY positioned `.ip-label-extras`, and cleared
 *      it with a fixed `padding-right: 120px` on the label input. In
 *      build+modern the cluster is ~220px, so the label ran straight under
 *      it ("LCSR Calibration Meth[isl_80930]"). It is a flex row now, so
 *      the two can never overlap at any width.
 *   2. the value row let its control (a select2 carrying an inline
 *      `width: 100%`) size from its own content, so a long option label
 *      pushed the refresh / config buttons past the card's right edge.
 *   3. the sample-inputs palette was a Bootstrap `col-md-2` percentage —
 *      137px at this width — and clips its own labels ("Color Picke",
 *      "Curve Inpu"). It gets a real width now and the inputs list takes
 *      whatever is left.
 *
 * Scoped to [data-ui-theme="modern"] throughout — classic is untouched.
 * ===================================================================== */

/* --- 1. row header: label + extras are a flex row, not an overlay ----- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-name > .row.row-default.p-relative {
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-name > .row.row-default.p-relative > .col-md-12 {
    /* basis 0, not auto: the label input carries an inline `width: 100%`, so an
       `auto` basis makes it claim the whole row and starve the id chip down to a
       single ellipsised letter. With basis 0 the two share the free space. */
    flex: 1 1 0%;
    /* a floor: the label is the row's identity, so it is the LAST thing allowed
       to shrink — the extras cluster gives up its width first */
    min-width: 110px;
}
/* `position: absolute` + right/bottom/height are inline on the element, so
   they can only be undone with !important */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .ip-label-extras {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    flex: 0 1 auto;
    min-width: 0;
}
/* the id chip is the widest and least load-bearing thing in the cluster, so it is
   the ONLY shrinkable item — the icons and the row menu keep their size, which is
   what stops a narrow row from clipping Duplicate/Remove off the right edge */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .ip-label-extras > * {
    flex: 0 0 auto;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .ip-label-extras > .text-muted {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    margin-left: 6px !important;
    margin-right: 6px !important;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .ip-label-extras .wf-id-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* the 120px of right padding existed only to clear the old overlay */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-name input[data-inputvalue="label"] {
    padding-right: 10px !important;
    min-width: 0;
}

/* --- 2. value row: the control shrinks, the buttons stay ------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value {
    min-width: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .select2-container,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .form-control,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > input,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > textarea {
    flex: 1 1 0%;
    min-width: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .select2-container .select2-chosen {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .btn,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .dropdown,
.d3view-inputsBuilder[data-ui-theme="modern"] li.field-item .input-group.input-value > .btn-group {
    flex: 0 0 auto;
}

/* --- 3. sample-inputs palette: a real width, not a percentage -------- *
 * `:not(.si-collapsed)` matters — this block sits AFTER the collapsed
 * rule, so without it the rail would never fold.
 * -------------------------------------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .si-container:not(.si-collapsed) {
    flex: 0 0 220px;
    width: 220px;
    min-width: 220px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .inputs-builder-container .inputs-list {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
}

/* --- 4. main header: wraps instead of spilling out of the builder ---- *
 * `.tabmanager-settings` holds All Inputs / Actions / Import From Workers /
 * File rules / settings — ~550px of non-shrinkable buttons. In a ~600px
 * builder it ran past the right edge and put a horizontal scrollbar on the
 * whole plugin. Letting the header wrap drops the cluster onto its own line
 * instead. Safe for the body height: the nested view computes its height
 * from `.input-tab-content` (flex), not from a constant header offset.
 * -------------------------------------------------------------------- */
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-main-header {
    flex-wrap: wrap;
    gap: 6px;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-main-header > .main-header-left {
    flex: 1 1 auto;
    min-width: 0;
}
.d3view-inputsBuilder[data-ui-theme="modern"] .fb-main-header > .tabmanager-settings {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

/* ==========================================================================
   R2026-58 - server-worker (regular-worker FormBuilder) input tweaks.
   Scoped to [data-server-worker] so START / every other FormBuilder consumer
   is untouched. Stamped on the root by fb_list.tpl from options.lockNonUserInputs.
   ========================================================================== */

/* (3) The inputs area is center-aligned by default (card layout); a server-worker
   row reads like a form, so left-align everything like the classic worker view.
   The field-item row's own inline text-align is switched to left in the template;
   this overrides the cascading .inputs-list rule for the remaining descendants. */
div.d3view-inputsBuilder[data-server-worker="true"] div.inputs-list {
    text-align: left;
}

/* (1) Non-user (mapped) input type icon: shown WITHOUT the bordered input-group-addon
   box - just the plain glyph next to the static label. */
div.d3view-inputsBuilder[data-server-worker="true"] li.field-item .input-name .-input-type-plain {
    display: inline-block;
    position: relative;
    top: 7px;
    margin-right: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--d3v-text-secondary, #64748b);
    font-size: 15px;
    line-height: 1;
}
div.d3view-inputsBuilder[data-server-worker="true"] li.field-item .input-name .-input-type-plain > span {
    pointer-events: none;
}

/**
 * Custom Input Renderers CSS for FormBuilder
 * Created by shashank2104 on 2024-12-19
 */

/* ==========================================================================
   Generic Renderer Base Styles
   ========================================================================== */

.pl-fb-input-renderer {
    position: relative;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pl-fb-input-renderer * {
    box-sizing: border-box;
}

/* ==========================================================================
   DefineTable Renderer Styles
   ========================================================================== */

.pl-fb-define-table-renderer {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
}

.pl-fb-define-table-renderer .define-table-container {
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pl-fb-define-table-renderer .define-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8f9fa;
}

.pl-fb-define-table-renderer .table-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}

.pl-fb-define-table-renderer .add-row-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    background: #007bff;
    border: 1px solid #007bff;
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pl-fb-define-table-renderer .add-row-btn:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.pl-fb-define-table-renderer .add-row-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}

.pl-fb-define-table-renderer .add-row-btn i {
    margin-right: 4px;
    font-size: 10px;
}

/* ==========================================================================
   DefineTable3D Renderer Styles
   ========================================================================== */

.pl-fb-define-table-3d-renderer {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
}

.pl-fb-define-table-3d-renderer .define-table-3d-container {
    padding: 15px;
    background: #ffffff;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pl-fb-define-table-3d-renderer .define-table-3d-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f8f9fa;
}

.pl-fb-define-table-3d-renderer .table-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.2;
}

.pl-fb-define-table-3d-renderer .add-row-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    background: #007bff;
    border: 1px solid #007bff;
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pl-fb-define-table-3d-renderer .add-row-btn:hover {
    background: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.pl-fb-define-table-3d-renderer .add-row-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}

.pl-fb-define-table-3d-renderer .add-row-btn i {
    margin-right: 4px;
    font-size: 10px;
}

/* ==========================================================================
   Table Styles
   ========================================================================== */

.pl-fb-define-table-renderer .define-table {
    margin-bottom: 0;
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
}

.pl-fb-define-table-renderer .define-table th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    font-size: 11px;
    padding: 10px 8px;
    border: 1px solid #dee2e6;
    color: #495057;
    text-align: left;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pl-fb-define-table-renderer .define-table td {
    vertical-align: middle;
    padding: 8px 6px;
    border: 1px solid #dee2e6;
    background: #ffffff;
    transition: background-color 0.15s ease;
}

.pl-fb-define-table-renderer .define-table tbody tr:hover td {
    background-color: #f8f9fa;
}

.pl-fb-define-table-renderer .define-table tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}

.pl-fb-define-table-renderer .define-table tbody tr:nth-child(even):hover td {
    background-color: #f1f3f4;
}

/* DefineTable3D Table Styles */
.pl-fb-define-table-3d-renderer .define-table-3d {
    margin-bottom: 0;
    font-size: 12px;
    border-collapse: collapse;
    width: 100%;
}

.pl-fb-define-table-3d-renderer .define-table-3d th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-weight: 600;
    font-size: 11px;
    padding: 10px 8px;
    border: 1px solid #dee2e6;
    color: #495057;
    text-align: left;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 10;
}

.pl-fb-define-table-3d-renderer .define-table-3d td {
    vertical-align: middle;
    padding: 8px 6px;
    border: 1px solid #dee2e6;
    background: #ffffff;
    transition: background-color 0.15s ease;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr:hover td {
    background-color: #f8f9fa;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr:nth-child(even) td {
    background-color: #fafbfc;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr:nth-child(even):hover td {
    background-color: #f1f3f4;
}

/* ==========================================================================
   Input Field Styles
   ========================================================================== */

.pl-fb-define-table-renderer .form-control {
    font-size: 11px;
    padding: 6px 8px;
    height: 32px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    transition: all 0.15s ease;
    width: 100%;
}

.pl-fb-define-table-renderer .form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.pl-fb-define-table-renderer .form-control:hover {
    border-color: #adb5bd;
}

.pl-fb-define-table-renderer .name-input {
    font-weight: 500;
}

.pl-fb-define-table-renderer .value-input {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* DefineTable3D Input Field Styles */
.pl-fb-define-table-3d-renderer .form-control {
    font-size: 11px;
    padding: 6px 8px;
    height: 32px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #ffffff;
    transition: all 0.15s ease;
    width: 100%;
}

.pl-fb-define-table-3d-renderer .form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.pl-fb-define-table-3d-renderer .form-control:hover {
    border-color: #adb5bd;
}

.pl-fb-define-table-3d-renderer .name-input {
    font-weight: 500;
}

.pl-fb-define-table-3d-renderer .value-input {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* ==========================================================================
   Curve Input Container
   ========================================================================== */

.pl-fb-define-table-renderer .curve-input-container {
    min-height: 35px;
    padding: 4px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #f8f9fa;
    position: relative;
}

.pl-fb-define-table-renderer .curve-input-container:hover {
    border-color: #adb5bd;
    background: #ffffff;
}

/* ==========================================================================
   Define Table Input Container
   ========================================================================== */

.pl-fb-define-table-3d-renderer .define-table-input-container {
    min-height: 35px;
    padding: 4px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background: #f8f9fa;
    position: relative;
}

.pl-fb-define-table-3d-renderer .define-table-input-container:hover {
    border-color: #adb5bd;
    background: #ffffff;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.pl-fb-define-table-renderer .remove-row-btn {
    padding: 4px 8px;
    font-size: 10px;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
}

.pl-fb-define-table-renderer .remove-row-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.pl-fb-define-table-renderer .remove-row-btn:active {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.2);
}

.pl-fb-define-table-renderer .remove-row-btn i {
    font-size: 9px;
}

/* DefineTable3D Action Buttons */
.pl-fb-define-table-3d-renderer .remove-row-btn {
    padding: 4px 8px;
    font-size: 10px;
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #ffffff;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1;
}

.pl-fb-define-table-3d-renderer .remove-row-btn:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}

.pl-fb-define-table-3d-renderer .remove-row-btn:active {
    transform: scale(1);
    box-shadow: 0 1px 2px rgba(220, 53, 69, 0.2);
}

.pl-fb-define-table-3d-renderer .remove-row-btn i {
    font-size: 9px;
}

/* ==========================================================================
   Context Menu Styles
   ========================================================================== */

.pl-fb-context-menu {
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1050;
    font-size: 12px;
}

.pl-fb-context-menu .dropdown-item {
    padding: 8px 16px;
    font-size: 12px;
    color: #495057;
    text-decoration: none;
    display: block;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.pl-fb-context-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #212529;
    text-decoration: none;
}

.pl-fb-context-menu .dropdown-item:active {
    background-color: #e9ecef;
    color: #000000;
}

.pl-fb-context-menu .dropdown-item i {
    margin-right: 8px;
    width: 12px;
    text-align: center;
    color: #6c757d;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .pl-fb-define-table-renderer .define-table-container {
        padding: 10px;
    }
    
    .pl-fb-define-table-renderer .define-table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .pl-fb-define-table-renderer .define-table {
        font-size: 11px;
    }
    
    .pl-fb-define-table-renderer .define-table th,
    .pl-fb-define-table-renderer .define-table td {
        padding: 6px 4px;
    }
    
    .pl-fb-define-table-renderer .form-control {
        font-size: 10px;
        padding: 4px 6px;
        height: 28px;
    }
    
    /* DefineTable3D Responsive */
    .pl-fb-define-table-3d-renderer .define-table-3d-container {
        padding: 10px;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d {
        font-size: 11px;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d th,
    .pl-fb-define-table-3d-renderer .define-table-3d td {
        padding: 6px 4px;
    }
    
    .pl-fb-define-table-3d-renderer .form-control {
        font-size: 10px;
        padding: 4px 6px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .pl-fb-define-table-renderer .define-table {
        font-size: 10px;
    }
    
    .pl-fb-define-table-renderer .define-table th,
    .pl-fb-define-table-renderer .define-table td {
        padding: 4px 2px;
    }
    
    .pl-fb-define-table-renderer .add-row-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .pl-fb-define-table-renderer .remove-row-btn {
        padding: 2px 6px;
        font-size: 9px;
    }
    
    /* DefineTable3D Responsive */
    .pl-fb-define-table-3d-renderer .define-table-3d {
        font-size: 10px;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d th,
    .pl-fb-define-table-3d-renderer .define-table-3d td {
        padding: 4px 2px;
    }
    
    .pl-fb-define-table-3d-renderer .add-row-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .pl-fb-define-table-3d-renderer .remove-row-btn {
        padding: 2px 6px;
        font-size: 9px;
    }
}

/* ==========================================================================
   Animation and Transitions
   ========================================================================== */

.pl-fb-define-table-renderer .define-table tbody tr {
    transition: all 0.2s ease;
}

.pl-fb-define-table-renderer .define-table tbody tr.adding {
    animation: slideDown 0.3s ease-out;
}

.pl-fb-define-table-renderer .define-table tbody tr.removing {
    animation: slideUp 0.3s ease-out;
}

/* DefineTable3D Animations */
.pl-fb-define-table-3d-renderer .define-table-3d tbody tr {
    transition: all 0.2s ease;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.adding {
    animation: slideDown 0.3s ease-out;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.removing {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.pl-fb-define-table-renderer.loading {
    opacity: 0.7;
    pointer-events: none;
}

.pl-fb-define-table-renderer.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

/* DefineTable3D Loading States */
.pl-fb-define-table-3d-renderer.loading {
    opacity: 0.7;
    pointer-events: none;
}

.pl-fb-define-table-3d-renderer.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Error States
   ========================================================================== */

.pl-fb-define-table-renderer .define-table tbody tr.error td {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.pl-fb-define-table-renderer .define-table tbody tr.error .form-control {
    border-color: #dc3545;
}

.pl-fb-define-table-renderer .define-table tbody tr.error .form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* DefineTable3D Error States */
.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.error td {
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.error .form-control {
    border-color: #dc3545;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.error .form-control:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* ==========================================================================
   Success States
   ========================================================================== */

.pl-fb-define-table-renderer .define-table tbody tr.success td {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.pl-fb-define-table-renderer .define-table tbody tr.success .form-control {
    border-color: #28a745;
}

.pl-fb-define-table-renderer .define-table tbody tr.success .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* DefineTable3D Success States */
.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.success td {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.success .form-control {
    border-color: #28a745;
}

.pl-fb-define-table-3d-renderer .define-table-3d tbody tr.success .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.pl-fb-define-table-renderer .define-table th:focus,
.pl-fb-define-table-renderer .define-table td:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.pl-fb-define-table-renderer .form-control:focus {
    outline: none;
}

.pl-fb-define-table-renderer .add-row-btn:focus,
.pl-fb-define-table-renderer .remove-row-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* DefineTable3D Accessibility */
.pl-fb-define-table-3d-renderer .define-table-3d th:focus,
.pl-fb-define-table-3d-renderer .define-table-3d td:focus {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.pl-fb-define-table-3d-renderer .form-control:focus {
    outline: none;
}

.pl-fb-define-table-3d-renderer .add-row-btn:focus,
.pl-fb-define-table-3d-renderer .remove-row-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .pl-fb-define-table-renderer .add-row-btn,
    .pl-fb-define-table-renderer .remove-row-btn {
        display: none;
    }
    
    .pl-fb-define-table-renderer .define-table-container {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    .pl-fb-define-table-renderer .define-table th {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
    
    /* DefineTable3D Print Styles */
    .pl-fb-define-table-3d-renderer .add-row-btn,
    .pl-fb-define-table-3d-renderer .remove-row-btn {
        display: none;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d-container {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    .pl-fb-define-table-3d-renderer .define-table-3d th {
        background: #f0f0f0 !important;
        color: #000 !important;
    }
} 
/* ==========================================================================
   Remote Host Renderer Styles - R0-3929 (added by shashank2104 on 2026-07-06)
   ========================================================================== */

.pl-fb-host-renderer .pl-fb-host {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
}

.pl-fb-host-renderer .pl-fb-host-source-toggle {
    display: inline-flex;
    align-self: flex-start;
}

.pl-fb-host-renderer .pl-fb-host-source {
    border: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-secondary);
    text-shadow: none;
    transition: var(--d3v-t-fast);
}

.pl-fb-host-renderer .pl-fb-host-source:hover {
    color: var(--d3v-text-primary);
    border-color: var(--d3v-accent);
}

.pl-fb-host-renderer .pl-fb-host-source.active {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
    color: #fff;
    box-shadow: var(--d3v-sh-sm);
}

.pl-fb-host-renderer .pl-fb-host-label {
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
}

.pl-fb-host-renderer .pl-fb-host-hint {
    font-weight: 400;
    color: var(--d3v-text-muted);
    font-size: 11px;
}

/* Own group class (NOT Bootstrap .form-group) so worker-modal .form-group rules can't reshape the control */
.pl-fb-host-renderer .pl-fb-host-fg {
    display: block;
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 0 10px 0;
}

/* Hard guards: the control and its parts always stack full-width regardless of inherited layout */
.pl-fb-host-renderer .pl-fb-host,
.pl-fb-host-renderer .pl-fb-host-saved,
.pl-fb-host-renderer .pl-fb-host-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pl-fb-host-renderer .pl-fb-host-select {
    width: 100%;
    display: block;
    float: none;
}

.pl-fb-host-renderer .pl-fb-host-saved-summary {
    width: 100%;
    clear: both;
}

.pl-fb-host-renderer .form-control {
    border-radius: var(--d3v-r-sm);
    border: 1px solid var(--d3v-border);
    transition: var(--d3v-t-fast);
}

.pl-fb-host-renderer .form-control:focus {
    border-color: var(--d3v-accent);
    box-shadow: var(--d3v-sh-sm);
}

.pl-fb-host-renderer .pl-fb-host-saved-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.pl-fb-host-renderer .pl-fb-host-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-full);
}

.pl-fb-host-renderer .pl-fb-host-chip .fa {
    color: var(--d3v-accent);
}

/* Remote Host - worker-dependent (mapped) read-only display - R0-3929 */
.pl-fb-host-mapped {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}

.pl-fb-host-mapped-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-full);
}

.pl-fb-host-mapped-chip .fa {
    color: var(--d3v-accent);
}

/* =====================================================================
 * Added by shashank2104 on 2026-07-22 - R2026-51 - Views.EditInputView.
 *
 * The panel is BODY-MOUNTED, so - like every other body-mounted surface in
 * this codebase (sidebars, popovers, select2 drops) - it is scoped under its
 * OWN root `.fb-edit-input-panel`, not under the plugin root: there is no
 * `.d3view-inputsBuilder` ancestor to scope to.
 *
 * Everything is drawn from the `--d3v-*` foundation tokens, aliased once at
 * the top into the panel-local `--eip-*` set (the `--db-*` / `--sl-*`
 * pattern) so the panel reads as one system with the modern builder skin.
 * ===================================================================== */

.fb-edit-input-panel {
    --eip-w: 380px;

    --eip-bg:        var(--d3v-bg-primary, #ffffff);
    --eip-bg-2:      var(--d3v-bg-secondary, #f8fafc);
    --eip-bg-3:      var(--d3v-bg-tertiary, #f1f5f9);
    --eip-border:    var(--d3v-border-light, #e2e8f0);
    --eip-border-2:  var(--d3v-border-medium, #cbd5e1);
    --eip-text:      var(--d3v-text-primary, #0f172a);
    --eip-text-2:    var(--d3v-text-secondary, #475569);
    --eip-text-3:    var(--d3v-text-tertiary, #94a3b8);
    --eip-accent:    var(--d3v-accent-primary, #2563eb);
    --eip-accent-sf: var(--d3v-accent-soft, rgba(37, 99, 235, .1));
    --eip-success:   var(--d3v-status-success, #10b981);
    --eip-danger:    var(--d3v-status-danger, #ef4444);
    --eip-danger-sf: var(--d3v-status-danger-soft, #fee2e2);

    --eip-r-sm: var(--d3v-r-sm, 4px);
    --eip-r-md: var(--d3v-r-md, 6px);
    --eip-r-lg: var(--d3v-r-lg, 10px);
    --eip-sh:   var(--d3v-sh-lg, 0 12px 32px rgba(15, 23, 42, .16));
    --eip-t:    var(--d3v-t-fast, 140ms ease);

    position: fixed;
    z-index: 1035;
    width: var(--eip-w);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--eip-bg);
    border: 1px solid var(--eip-border);
    border-radius: var(--eip-r-lg);
    box-shadow: var(--eip-sh);

    font-size: 12px;
    color: var(--eip-text);

    /* Added by shashank2104 on 2026-07-22 - R2026-51 - slide in from the docked edge.
       The panel starts off-screen and `is-open` is added on the next frame (see
       EditInputView.render), so the transition actually runs instead of being
       collapsed into the initial paint. `is-closing` plays it in reverse before
       the element is detached. */
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    will-change: transform;
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}

.fb-edit-input-panel.is-open { transform: none; opacity: 1; }

.fb-edit-input-panel.is-closing {
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
}

/* ---- header ------------------------------------------------------- */

.fb-edit-input-panel .fb-eip-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--eip-bg-2);
    border-bottom: 1px solid var(--eip-border);
}

.fb-edit-input-panel .fb-eip-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--eip-r-md);
    background: var(--eip-accent-sf);
    color: var(--eip-accent);
    font-size: 13px;
}

.fb-edit-input-panel .fb-eip-head-txt { min-width: 0; flex: 1 1 auto; }

.fb-edit-input-panel .fb-eip-head-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-edit-input-panel .fb-eip-head-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.fb-edit-input-panel .fb-eip-pill {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--eip-bg-3);
    color: var(--eip-text-2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

.fb-edit-input-panel .fb-eip-id { font-size: 10px; color: var(--eip-text-3); }

.fb-edit-input-panel .fb-eip-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--eip-r-md);
    background: transparent;
    color: var(--eip-text-2);
    transition: background var(--eip-t), color var(--eip-t), border-color var(--eip-t);
}

.fb-edit-input-panel .fb-eip-close:hover,
.fb-edit-input-panel .fb-eip-close:focus-visible {
    background: var(--eip-bg-3);
    border-color: var(--eip-border);
    color: var(--eip-text);
    outline: none;
}

/* ---- body / proxy host -------------------------------------------- */

/* the proxy `li.field-item` only exists so the two reused row fragments keep
   resolving `.parents('li.field-item')` - it must contribute NO layout. */
.fb-edit-input-panel .fb-eip-proxy,
.fb-edit-input-panel .fb-eip-proxy > li.field-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

.fb-edit-input-panel .fb-eip-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 14px 16px;
}

.fb-edit-input-panel .fb-eip-body::-webkit-scrollbar { width: 8px; }
.fb-edit-input-panel .fb-eip-body::-webkit-scrollbar-thumb {
    background: var(--eip-border-2);
    border-radius: 999px;
}

/* ---- sections ------------------------------------------------------ */

.fb-edit-input-panel .fb-eip-sec { padding: 14px 0 4px; }
.fb-edit-input-panel .fb-eip-sec + .fb-eip-sec { border-top: 1px solid var(--eip-border); }

.fb-edit-input-panel .fb-eip-sec-title {
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eip-text-3);
}

.fb-edit-input-panel .fb-eip-label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--eip-text-2);
}

.fb-edit-input-panel .fb-eip-field + .fb-eip-field { margin-top: 14px; }

/* ---- flags (one markup, one look, all six) ------------------------- */

.fb-edit-input-panel .fb-eip-flags { display: flex; flex-direction: column; gap: 2px; }

.fb-edit-input-panel .fb-eip-flag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--eip-r-md);
    transition: background var(--eip-t);
}

.fb-edit-input-panel .fb-eip-flag:hover { background: var(--eip-bg-2); }
.fb-edit-input-panel .fb-eip-flag.is-disabled { opacity: .5; }

.fb-edit-input-panel .fb-eip-flag-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 16px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
}

.fb-edit-input-panel .fb-eip-flag-txt > i {
    grid-row: 1 / span 2;
    color: var(--eip-text-3);
    font-size: 12px;
    text-align: center;
}

.fb-edit-input-panel .fb-eip-flag-label { font-size: 12px; font-weight: 600; }

.fb-edit-input-panel .fb-eip-flag-hint {
    font-size: 10px;
    line-height: 1.35;
    color: var(--eip-text-3);
}

.fb-edit-input-panel .fb-eip-switch {
    flex: 0 0 auto;
    position: relative;
    width: 40px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--eip-border-2);
    transition: background var(--eip-t);
}

.fb-edit-input-panel .fb-eip-switch:focus-visible {
    outline: 2px solid var(--eip-accent);
    outline-offset: 2px;
}

.fb-edit-input-panel .fb-eip-switch .fb-eip-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .2));
    transition: transform var(--eip-t);
}

.fb-edit-input-panel .fb-eip-switch.is-on { background: var(--eip-success); }
.fb-edit-input-panel .fb-eip-switch.is-on .fb-eip-knob { transform: translateX(18px); }
.fb-edit-input-panel .fb-eip-switch:disabled { cursor: not-allowed; }

/* ---- segmented control (I/O type, visibility) ---------------------- */

.fb-edit-input-panel .fb-eip-seg {
    display: flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--eip-border);
    border-radius: var(--eip-r-md);
    background: var(--eip-bg-2);
}

.fb-edit-input-panel .fb-eip-seg.is-disabled { opacity: .5; }

.fb-edit-input-panel .fb-eip-seg-btn {
    flex: 1 1 0;
    padding: 5px 6px;
    border: 0;
    border-radius: var(--eip-r-sm);
    background: transparent;
    color: var(--eip-text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--eip-t), color var(--eip-t), box-shadow var(--eip-t);
}

.fb-edit-input-panel .fb-eip-seg-btn:hover:not(.is-on):not(:disabled) { color: var(--eip-text); }

.fb-edit-input-panel .fb-eip-seg-btn.is-on {
    background: var(--eip-bg);
    color: var(--eip-accent);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .12));
}

.fb-edit-input-panel .fb-eip-seg-btn:focus-visible { outline: 2px solid var(--eip-accent); outline-offset: -2px; }

.fb-edit-input-panel .fb-eip-inline-link {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--eip-accent);
    font-size: 11px;
    font-weight: 600;
}

.fb-edit-input-panel .fb-eip-inline-link:hover { text-decoration: underline; }

/* ---- width --------------------------------------------------------- */

.fb-edit-input-panel .fb-eip-width-wrap { display: flex; align-items: center; gap: 8px; }

.fb-edit-input-panel .fb-eip-num { position: relative; flex: 0 0 88px; }

.fb-edit-input-panel input.fb-eip-width {
    width: 100%;
    height: 32px;
    padding: 0 22px 0 10px;
    border: 1px solid var(--eip-border-2);
    border-radius: var(--eip-r-md);
    background: var(--eip-bg);
    color: var(--eip-text);
    font-size: 12px;
    transition: border-color var(--eip-t), box-shadow var(--eip-t);
}

.fb-edit-input-panel input.fb-eip-width:focus {
    border-color: var(--eip-accent);
    box-shadow: 0 0 0 3px var(--eip-accent-sf);
    outline: none;
}

.fb-edit-input-panel .fb-eip-num-suffix {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    color: var(--eip-text-3);
    font-size: 11px;
    pointer-events: none;
}

.fb-edit-input-panel .fb-eip-chips { display: flex; gap: 4px; flex: 1 1 auto; }

.fb-edit-input-panel .fb-eip-chip {
    flex: 1 1 0;
    padding: 5px 0;
    border: 1px solid var(--eip-border);
    border-radius: var(--eip-r-md);
    background: var(--eip-bg);
    color: var(--eip-text-2);
    font-size: 10px;
    font-weight: 600;
    transition: background var(--eip-t), color var(--eip-t), border-color var(--eip-t);
}

.fb-edit-input-panel .fb-eip-chip:hover { border-color: var(--eip-border-2); color: var(--eip-text); }

.fb-edit-input-panel .fb-eip-chip.is-on {
    background: var(--eip-accent-sf);
    border-color: var(--eip-accent);
    color: var(--eip-accent);
}

/* ---- type ---------------------------------------------------------- */

.fb-edit-input-panel .fb-eip-type {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.fb-edit-input-panel .fb-eip-type-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--eip-r-md);
    background: var(--eip-bg-2);
    color: var(--eip-text);
    font-size: 12px;
    font-weight: 600;
}

.fb-edit-input-panel .fb-eip-type-name > i { color: var(--eip-text-3); }

/* ---- generic panel button ------------------------------------------ */

.fb-edit-input-panel .fb-eip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--eip-border-2);
    border-radius: var(--eip-r-md);
    background: var(--eip-bg);
    color: var(--eip-text-2);
    font-size: 11px;
    font-weight: 600;
    transition: background var(--eip-t), color var(--eip-t), border-color var(--eip-t);
}

.fb-edit-input-panel .fb-eip-btn:hover {
    background: var(--eip-accent-sf);
    border-color: var(--eip-accent);
    color: var(--eip-accent);
}

.fb-edit-input-panel .fb-eip-btn:focus-visible { outline: 2px solid var(--eip-accent); outline-offset: 2px; }

.fb-edit-input-panel .fb-eip-btn-wide { width: 100%; justify-content: center; margin-top: 6px; }

.fb-edit-input-panel .fb-eip-btn.fb-eip-danger { color: var(--eip-danger); }

.fb-edit-input-panel .fb-eip-btn.fb-eip-danger:hover {
    background: var(--eip-danger-sf);
    border-color: var(--eip-danger);
    color: var(--eip-danger);
}

/* ---- disclosure rows (Default / Tags / Validations / Actions) ------- */

.fb-edit-input-panel .fb-eip-rows { display: flex; flex-direction: column; gap: 2px; }
.fb-edit-input-panel .fb-eip-rows + .fb-eip-rows { margin-top: 10px; }

.fb-edit-input-panel .fb-eip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 8px;
    border: 0;
    border-radius: var(--eip-r-md);
    background: transparent;
    color: var(--eip-text);
    font-size: 12px;
    text-align: left;
    transition: background var(--eip-t);
}

.fb-edit-input-panel .fb-eip-row:hover:not(:disabled) { background: var(--eip-bg-2); }
.fb-edit-input-panel .fb-eip-row.is-disabled { opacity: .5; cursor: not-allowed; }
.fb-edit-input-panel .fb-eip-row:focus-visible { outline: 2px solid var(--eip-accent); outline-offset: -2px; }

.fb-edit-input-panel .fb-eip-row > i:first-child { width: 16px; text-align: center; color: var(--eip-text-3); }
.fb-edit-input-panel .fb-eip-row.is-active > i:first-child { color: var(--d3v-status-warning, #f59e0b); }

.fb-edit-input-panel .fb-eip-row-label { flex: 1 1 auto; font-weight: 600; }

.fb-edit-input-panel .fb-eip-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--eip-bg-3);
    color: var(--eip-text-3);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.fb-edit-input-panel .fb-eip-count.has-count { background: var(--eip-accent-sf); color: var(--eip-accent); }

.fb-edit-input-panel .fb-eip-row-go { color: var(--eip-text-3); font-size: 10px; }

/* ---- reporter checks ----------------------------------------------- */

.fb-edit-input-panel .fb-eip-checks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 190px;
    overflow-y: auto;
}

.fb-edit-input-panel .fb-eip-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--eip-r-md);
    background: transparent;
    color: var(--eip-text-2);
    font-size: 12px;
    text-align: left;
    transition: background var(--eip-t), color var(--eip-t);
}

.fb-edit-input-panel .fb-eip-check:hover { background: var(--eip-bg-2); }
.fb-edit-input-panel .fb-eip-check > i { color: var(--eip-text-3); }
.fb-edit-input-panel .fb-eip-check.is-on { color: var(--eip-text); }
.fb-edit-input-panel .fb-eip-check.is-on > i { color: var(--eip-accent); }

/* ---- links (references / assignments / cell map) ------------------- */

.fb-edit-input-panel .fb-eip-links { display: flex; flex-direction: column; gap: 10px; }

.fb-edit-input-panel .fb-eip-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fb-edit-input-panel .fb-eip-link .fb-eip-label { margin: 0; }

/* R2026-51 - References / Output-assignments as native COLLAPSIBLE LISTS (not a dropdown).
   The header reuses the .fb-eip-row look; expanding reveals a clean list that EditInputView
   renders itself, with an explicit remove per row and an explicit Add. */
.fb-edit-input-panel .fb-eip-links-list { display: flex; flex-direction: column; gap: 2px; }
.fb-edit-input-panel .fb-eip-linkctl { display: block; }
.fb-edit-input-panel .fb-eip-link-file { margin-top: 8px; }

.fb-edit-input-panel .fb-eip-linkhead { cursor: pointer; }
.fb-edit-input-panel .fb-eip-linkctl.is-open > .fb-eip-linkhead { background: var(--eip-bg-2); }
.fb-edit-input-panel .fb-eip-linkhead .wf-type-label { margin-right: 4px; }
.fb-edit-input-panel .fb-eip-linkhead .fb-eip-row-go { transition: transform var(--eip-t); }
.fb-edit-input-panel .fb-eip-linkctl.is-open .fb-eip-row-go { transform: rotate(90deg); }

/* the expanded body: a slightly inset well under the header */
.fb-edit-input-panel .fb-eip-linkbody {
    padding: 8px 8px 4px;
    margin: 2px 0 4px;
    border-radius: var(--eip-r-md);
    background: var(--eip-bg-2);
}
.fb-edit-input-panel .fb-eip-linkbody[hidden] { display: none; }

/* the list itself - one clean row per reference / assignment, like the reporter checks */
.fb-edit-input-panel .fb-eip-linklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow-y: auto;
}

.fb-edit-input-panel .fb-eip-linkitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--eip-r-md);
    background: var(--eip-bg);
    border: 1px solid var(--eip-border);
    transition: border-color var(--eip-t);
}
.fb-edit-input-panel .fb-eip-linkitem:hover { border-color: var(--eip-border-2); }

.fb-edit-input-panel .fb-eip-linkitem-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.fb-edit-input-panel .fb-eip-linkitem-main > a { text-decoration: none; color: var(--eip-text); }
.fb-edit-input-panel .fb-eip-linkitem-name { font-weight: 600; }

/* clickable worker / input / output links - navigate to that node (classic parity) */
.fb-edit-input-panel a.fb-eip-linknav { cursor: pointer; text-decoration: none; }
.fb-edit-input-panel a.fb-eip-linknav:hover,
.fb-edit-input-panel a.fb-eip-linknav:hover .fb-eip-linkitem-name { color: var(--eip-accent); text-decoration: none; }

.fb-edit-input-panel .fb-eip-linkitem-sub {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--eip-text-2);
    font-size: 11px;
}
.fb-edit-input-panel a.fb-eip-linkitem-sub:hover { color: var(--eip-accent); }
.fb-edit-input-panel .fb-eip-linkitem-tag {
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--eip-bg-3);
    color: var(--eip-text-3);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.fb-edit-input-panel .fb-eip-linkitem-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.fb-edit-input-panel .fb-eip-linkitem-btn,
.fb-edit-input-panel .fb-eip-linkitem-x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--eip-r-sm);
    background: transparent;
    color: var(--eip-text-3);
    cursor: pointer;
    transition: background var(--eip-t), color var(--eip-t);
}
.fb-edit-input-panel .fb-eip-linkitem-btn:hover { background: var(--eip-accent-sf); color: var(--eip-accent); }
.fb-edit-input-panel .fb-eip-linkitem-x:hover { background: var(--eip-danger-sf); color: var(--eip-danger); }

.fb-edit-input-panel .fb-eip-linkempty {
    padding: 12px 8px;
    color: var(--eip-text-3);
    font-size: 11.5px;
    text-align: center;
}
.fb-edit-input-panel .fb-eip-linkempty > i { margin-right: 5px; }

.fb-edit-input-panel .fb-eip-list-host { display: block; }

/* while an Add picker is open, hide the "+ Add" button (the form carries its own Done/Save) */
.fb-edit-input-panel .fb-eip-linkctl.is-adding .fb-eip-ref-add,
.fb-edit-input-panel .fb-eip-linkctl.is-adding .fb-eip-asg-add { display: none; }

/* the inline Add form (the reused picker renders into .fb-eip-addform-host) */
.fb-edit-input-panel .fb-eip-addform {
    margin-top: 8px;
    padding: 10px;
    border: 1px dashed var(--eip-border-2);
    border-radius: var(--eip-r-md);
    background: var(--eip-bg);
}
.fb-edit-input-panel .fb-eip-addform[hidden] { display: none; }
.fb-edit-input-panel .fb-eip-addform-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fb-edit-input-panel .fb-eip-addform-opt { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--eip-text-2); }
.fb-edit-input-panel .fb-eip-addform-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* ---- pinned footer (Duplicate / Remove) ---------------------------- */

.fb-edit-input-panel .fb-eip-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: var(--eip-bg-2);
    border-top: 1px solid var(--eip-border);
}

.fb-edit-input-panel .fb-eip-foot .fb-eip-btn {
    flex: 1 1 0;
    justify-content: center;
    background: var(--eip-bg);
}

/* Save is the primary action; Cancel stays quiet so it never competes with it */
.fb-edit-input-panel .fb-eip-btn.fb-eip-primary {
    background: var(--eip-accent);
    border-color: var(--eip-accent);
    color: #fff;
}

.fb-edit-input-panel .fb-eip-btn.fb-eip-primary:hover,
.fb-edit-input-panel .fb-eip-btn.fb-eip-primary:focus-visible {
    background: var(--d3v-accent-primary-hover, #1d4ed8);
    border-color: var(--d3v-accent-primary-hover, #1d4ed8);
    color: #fff;
}

/* an unsaved-changes dot on the header, so the state is visible while you scroll the body */
.fb-edit-input-panel .fb-eip-dirty {
    display: none;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--d3v-status-warning, #f59e0b);
}

.fb-edit-input-panel.is-dirty .fb-eip-dirty { display: inline-block; }

/* ---- the reused DataSource fragment -------------------------------- */

/* it renders its own "DataSource:" caption; the section already says it */
.fb-edit-input-panel .fb-eip-ds-host > div > label { display: none; }

.fb-edit-input-panel .fb-eip-ds-host .form-group { padding: 0; margin: 0 0 10px; }
.fb-edit-input-panel .fb-eip-ds-host label { font-size: 11px; color: var(--eip-text-2); }

.fb-edit-input-panel .fb-eip-ds-host .select2-container { width: 100% !important; }

.fb-edit-input-panel .fb-eip-ds-host .prev_workers_list,
.fb-edit-input-panel .fb-eip-ds-host .ds-db-filters-dd { margin-top: 10px; }

/* ---- spotlight ------------------------------------------------------ *
 * Added by shashank2104 on 2026-07-22 - R2026-51 - the row being edited is
 * cut OUT of a subtle page tint, rather than tinted along with everything
 * else. One element does it: it is sized to the row's rect and the tint is
 * an enormous spread `box-shadow`, so the hole is the element itself.
 *
 * That trick is what makes this possible at all — `.nested-inputs-list` is
 * `position:absolute; z-index:0` inline, which opens a stacking context, so
 * a plain body-level overlay could never be slipped UNDER one row while
 * staying over its neighbours.
 *
 * `pointer-events: none` on purpose: the tint marks focus, it does not trap
 * it. Clicking another row's sliders button still moves the editor there.
 * ---------------------------------------------------------------------- */

.fb-eip-spotlight {
    position: fixed;
    z-index: 1030;
    pointer-events: none;
    border-radius: var(--d3v-r-lg, 10px);
    box-shadow:
        0 0 0 9999px rgba(15, 23, 42, .16),
        0 0 0 2px var(--d3v-accent-primary, #2563eb);
    opacity: 0;
    transition: opacity 200ms ease,
                top 220ms cubic-bezier(.22, 1, .36, 1),
                left 220ms cubic-bezier(.22, 1, .36, 1),
                width 220ms cubic-bezier(.22, 1, .36, 1),
                height 220ms cubic-bezier(.22, 1, .36, 1);
}

.fb-eip-spotlight.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .fb-edit-input-panel,
    .fb-eip-spotlight { transition: opacity 120ms ease; }
    .fb-edit-input-panel { transform: none; }
    .fb-edit-input-panel.is-closing { transform: none; }
}

/* Body-mounted drops must stay above the panel — but ONLY while a panel is
   open. `body.fb-edit-input-open` is set by EditInputView.position() and
   cleared on close, so classic / submit / view never see this rule. */
body.fb-edit-input-open .select2-drop,
body.fb-edit-input-open .select2-drop-mask,
body.fb-edit-input-open .d3view-multiselect.ms-modern .ms-modern-menu {
    z-index: calc(var(--fb-eip-z, 1035) + 5);
}

div.fb-widgets-view .grid-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
div.fb-widgets-view .grid-placeholder img {
    margin: 0 auto;
    display: block;
}

.fb-widgets-view .widgets-container[data-viewType="grid"] .pl-db-widget img,
.fb-widgets-view .widgets-container[data-viewType="carousel"] .pl-db-widget img,
.fb-widgets-view .widgets-container[data-viewType="tabs"] .pl-db-widget img {
    height: 40px;
    display: inline-block;
}
.fb-widgets-view .widgets-container[data-viewType="grid"] .widget-items,
.fb-widgets-view .widgets-container[data-viewType="tabs"] .widget-items {
    display: flex;
    flex-wrap: wrap;
}
.fb-widgets-view .widgets-container[data-viewType="carousel"] .carousel-inner .item .widget-items {
    display: flex;
    flex-wrap: wrap;
}
.fb-widgets-view .widgets-container[data-viewType="list"] .pl-db-widget .db-txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fb-widgets-view .widgets-container[data-viewType="list"] .pl-db-widget img {
    height: 30px;
    width: 50px;
    float: left;
    margin-right: 5px;
}
.fb-widgets-view .widgets-container[data-viewType="tabs"] .widgets {
    height: 100%!important;
}
.fb-widgets-view .widgets-container[data-viewType="tabs"] .visualizations {
    display: none!important;
}
.fb-widgets-view .widgets-container[data-viewtype="list"] .widgets-vis-list .tab-pane > .widget-items,
.fb-widgets-view .widgets-container[data-viewtype="carousel"] .widgets-vis-list .tab-pane > .widget-items {
    height: 100%;
    overflow: auto;
}

.fb-widgets-view .widgets-container[data-viewType="grid"] .pl-db-widget,
.fb-widgets-view .widgets-container[data-viewType="carousel"] .pl-db-widget,
.fb-widgets-view .widgets-container[data-viewType="tabs"] .pl-db-widget {
    padding: 20px;
    background: transparent;
    height: 100px;
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DDD;
    margin: 5px;
    box-shadow: var(--plugin-box-shadow-lighter);
}
.fb-widgets-view .pl-db-widget.disabled {
    display: none;
}
.fb-widgets-view .pl-db-widget:not(.hasChildren):not(.disabled) {
    cursor: move;
}
.fb-widgets-view .pl-db-widget:hover {
    background: #f1f3f4;
}
.fb-widgets-view .pl-db-widget.hasChildren {
    overflow-x: hidden;
}
.fb-widgets-view .pl-db-widget.hasChildren > a {
    cursor: pointer;
}
.fb-widgets-view .pl-db-widget.child-item {
    font-size: 100%;
}
.fb-widgets-view .widgets-container {
    border-left: 1px solid #DDD;
    padding: 0;
    width: 25%;
}

.fb-widgets-view .grid-page:first-child .remove_grid {
    display: none!important;
}
.fb-widgets-view .remove_grid {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 2;
}
.fb-widgets-view[data-mode="view"] .add_grid,
.fb-widgets-view[data-mode="view"] .remove_grid {
    display: none;
}

.fb-widgets-view .grid-container .grid-stack-item {
    position: absolute;
    cursor: move;
    z-index: 1;
    /*padding-top: 20px;*/
}
.fb-widgets-view[data-mode="edit"] .grid-page:not([data-gridtype="grid-stack"]) .grid-stack-item,
.fb-widgets-view[data-mode="build"] .grid-page:not([data-gridtype="grid-stack"]) .grid-stack-item {
    border: 1px solid transparent;
}
.fb-widgets-view[data-mode="edit"] .grid-container .grid-page:not([data-gridtype="grid-stack"]) .grid-stack-item:hover,
.fb-widgets-view[data-mode="build"] .grid-container .grid-page:not([data-gridtype="grid-stack"]) .grid-stack-item:hover {
    border-color: #DDD;
}
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item > .ui-resizable-se {
    /*bottom: -20px;*/
    display: none;
}
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item > .ui-resizable-se {
    display: none!important;
}
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item:hover > .ui-resizable-se,
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item.beingResized > .ui-resizable-se {
    display: block!important;
}
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item > .ui-resizable-s {
    left: 0;
    /*bottom: -20px;*/
    right: unset;
}
.fb-widgets-view .grid-container .grid-stack > .grid-stack-item > .ui-resizable-e {
    top: 0;
}
.fb-widgets-view[data-mode="view"] .grid-container .grid-stack-item {
    cursor: default;
}
.fb-widgets-view .grid-container .grid-stack .grid-stack-item-content > .row {
    border-bottom: none;
}
.fb-widgets-view .grid-container .grid-page:not([data-gridtype="grid-stack"]) .grid-stack .grid-stack-item-content {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.fb-widgets-view .grid-container {
    overflow-x: hidden;
}
.fb-widgets-view .pl-db-widget.ui-draggable.ui-draggable-dragging {
    width: 200px!important;
    height: 200px!important;
    z-index: 20!important;
}
.fb-widgets-view .grid-container .floating-options-container {
    position: absolute;
    z-index: 1000;
    right: -2px;
    /* display: none; */
    top: -20px;
}
.fb-widgets-view .grid-container .floating-options-container:hover {
    display: block!important;
}

.fb-widgets-view .grid-container .grid-page[data-gridtype="grid-stack"] .grid-stack .grid-stack-item-content {
    border: 1px solid #DDD;
    width: calc(100% - 30px);
    margin: 0 auto;
    padding: 15px;
}

.fb-widgets-view .field-items  li.field-item > .ip-contents {
    padding-left: 30px!important;
}
.fb-widgets-view ul.field-items li.field-item > .field-type-cont {
    position: absolute;
    left: 6px;
    top: 12px;
}

div.d3view-inputsBuilder .fb-widgets-view li.field-item .input-value-container {
    display: block;
}
div.d3view-inputsBuilder .fb-widgets-view li.field-item .input-value-container > .input-group {
    height: auto;
}




.pl-tour-items .tour-item {
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
}
.pl-tour-items .tour-item.ui-sortable-placeholder {
    visibility: visible!important;
    width: 100%!important;
    background: lightyellow;
    display: block!important;
    pointer-events: none;
    height: 50px;
}
.pl-tour-items .tour-item .drag-handle {
    opacity: 0;
    cursor: move;
}
.pl-tour-items .tour-item:hover .drag-handle {
    opacity: 1;
}

.fb-widgets-view[data-mode="view"] button.guide_me,
.fb-widgets-view[data-mode="submit"] button.guide_me {
    display: block!important;
    position: absolute;
    color: #FFF;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
    z-index: 20;
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    align-items: center;
    background-image: linear-gradient(-180deg, #00D775, #00BD68);
    border: 0;
    font-size: 18px;
}
.fb-widgets-view[data-mode="view"] button.guide_me:hover,
.fb-widgets-view[data-mode="submit"] button.guide_me:hover {
    background: #00bd68;
}
.wf-fb-compact-controls {
    gap: 10px;
}

.wf-fb-compact-input-label-container {
    min-width: 400px;
    position: relative;
}

.wf-fb-compact-input-name {
    padding: 4px 12px !important;
    text-align: left !important;
    width: 100%;
    height: 29px;
    border-radius: 4px !important;
    font-weight: 500;
    border: none !important;
    outline: none !important;
}

.wf-fb-compact-input-name:hover {
    border: 1px solid #72b2ff !important;
}

.wf-fb-compact-input-name:focus,
.wf-fb-compact-input-name:active {
    border: 1px solid #72b2ff !important;
    box-shadow: 2px 2px 0px #77b3fc;
}

.has-error .wf-fb-compact-input-name {
    border: 1px solid #c0392b !important;
    box-shadow: 2px 2px 0px #c0392b !important;
}

.wf-fb-compact-input-ui {
    border: 1px solid #ddd;
    border-radius: 5px;
    gap: 10px;
    display: flex;
    align-items: flex-start;
}

.wf-fb-input-source {
    min-height: 34px;
    position: relative;
}

.wf-fb-input-value {
    flex: 1 1 auto;
    min-height: 34px;
    border-left: 2px solid #ddd;
}

.wf-fb-dropdown-icon:focus {
    cursor: pointer;
    color: steelblue;
}



.wf-fb-compact-input-ui .databases-list,
.wf-fb-compact-input-ui .existing_files_list,
.wf-fb-compact-input-ui .prev_inputs_list {
    width: 150px;
}


.wf-fb-v2-compact-input-list li.field-item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding-left: 5px;
    gap: 10px;
    margin-top: 10px;
    position: relative;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-compact-ui {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
}


.wf-fb-v2-compact-input-list .wf-fb-v2-input-name {
    flex: 1 1 auto;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-input-name-container {
    gap: 1rem;
}

.wf-fb-v2-compact-input-list .input-group-addon {
    width: 71px;
    height: 34px;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-input-name {
    width: calc(100% - 71px) !important;
    padding: 6px 12px !important;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-input-value {
    padding: 6px 12px !important;
}


.wf-fb-v2-compact-input-list .wf-fb-v2-input-addon-btns {
    visibility: hidden;
}

.wf-fb-v2-compact-input-list .dropdown.open .wf-fb-v2-input-addon-btns,
.wf-fb-v2-compact-input-list li.field-item:is(:hover) .wf-fb-v2-input-addon-btns {
    visibility: visible !important;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-input-name-container {
    flex: 1 1 auto;
}

.wf-fb-v2-compact-input-list .input-group-btn {
    vertical-align: top !important;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-custom-input-contatiner {
    position: relative;
    min-height: 65px;
}

.wf-fb-v2-compact-input-list .select2-container .select2-choice {
    height: 34px;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-custom-input-contatiner .input_range_settings_block {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-custom-input-contatiner img {
    height: 165px;
    object-fit: scale-down;
}

.wf-fb-v2-compact-input-list ul.dropdown-menu.wf-fb-v2-data-source-config-menu {
    min-width: 280px;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-pw-inputs {
    display: flex;
    gap: 10px;
}

.wf-fb-v2-compact-input-list .wf-fb-v2-pw-inputs>div {
    width: 210px;
    position: relative;
}

.wf-fb-v2-compact-input-list input.typeahead.tt-input {
    height: 30px;
    width: 210px;
}

.wf-fb-v2-compact-input-list input.typeahead {
    border: none;
}

.wf-fb-v2-compact-input-list .has-error .wf-dropzone.file-upload.dz-clickable {
    border-color: red !important;
}

.wf-fb-v2-compact-input-list .sortable-handle:hover {
    cursor: move;
}

div.d3view-inputsBuilder #fb-v2-autocomplete input.typeahead {
    height: 34px;
    border-radius: 0px 3px 3px 0px;
    padding-left: 25px;
    width: 100%;
}


div.d3view-inputsBuilder .fb-v2-search-icon {
    position: absolute;
    left: 7px;
    top: 10px;
    z-index: 2;
    color: gray;
    pointer-events: none;
}

div.d3view-inputsBuilder .fb-v2-reset-filter {
    position: absolute;
    right: 5px;
    top: 7px;
    font-size: large;
    z-index: 2;
}

div.d3view-inputsBuilder .fb-v2-reset-filter:hover {
    cursor: pointer;
}


div.d3view-inputsBuilder .fb-v2-input-addon-btns {
    height: 34px !important;
}

.wf-input-action-list .action-input-expression {
    height: auto;
    min-height: 40px;
}


.wf-action-expression-builder .expression-user-input {
    height: 36px;
    width: 100%;
    border-radius: 4px;
    border-width: 1px;
    padding: 6px 12px;
}

.wf-action-expression-builder .wf-action-eb input.typeahead {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

.wf-action-expression-builder .wf-action-eb .tt-menu {
    margin: -15px 0px !important;
}




/* FORM FILTERS */
div.d3view-filters-container[data-view="vertical"] {
    /*border: 1px solid #DDD;*/
    /*height: 100%;*/
}
div.d3view-filters-container .filter-item textarea {
    resize: vertical;
    max-height: 200px;
    min-height: 50px;
}
div.d3view-filters-container .filter-item .sortable-handle {
    display: none;
    position: absolute;
    left: 4px;
    opacity: 0;
    top: 4px;
    padding: 4px;
    cursor: move;
}
div.d3view-filters-container li.filter-item .filter-label {
    cursor: grab;
}
div.d3view-filters-container .page-header .btn {
    box-shadow: none;
    border: none;
}
div.d3view-filters-container .filter-item:hover .sortable-handle {
    opacity: 1;
}
div.d3view-filters-container li.filter-item:not(.filter-hz-item) .filter-separator {
    margin-top: 12px;
    border-top: 1px solid #DDD;
    text-align: center;
    display: none!important;
}
div.d3view-filters-container li:not(.filter-hz-item) .filter-separator > span.separator-flag {
    position: relative;
    top: -14px;
    background: #FFF;
    padding: 0 5px;
    color: #428BCA;
    cursor: pointer;
    user-select: none;
}
div.d3view-filters-container div.filters-list.no_filters ul.filter-items {
    background-color: #f5f5f5;
}
div.d3view-filters-container div.filters-list.no_filters div.filter-footer {
    display: none;
}
div.d3view-filters-container div.filters-list.no_filters {
    text-align: center;
}
div.d3view-filters-container div.filters-list.no_filters:before {
    content: 'No filters found';
    position: relative;
    top: 0;
    font-weight: bold;
}
div.d3view-filters-container div.filters-list.no_filters .no-filters {
    display: block!important;
    margin-right: 4px;
}
div.d3view-filters-container li.filter-item:last-child .filter-separator {
    display: none!important;
}
div.d3view-filters-container ul.filter-items {
    /*padding-top: 10px;*/
}
div.d3view-filters-container ul.filter-items:not(.filter-items-hz) {
    overflow: auto;
    min-height: 100px;
    max-height: 100%;
}
div.d3view-filters-container ul.filter-items:not(.filter-items-hz).ui-sortable > li.filter-item {
    /*padding-left: 25px;*/
    padding: 0 5px;
}
div.d3view-filters-container ul.filter-items:not(.filter-items-hz):not(.ui-sortable) > li.filter-item > a {
    padding-left: 10px;
}

div.d3view-filters-container ul.filter-items .filter-item:not(.filter-hz-item) {
    position: relative;
    /*margin-right: 15px;*/
}
div.d3view-filters-container .filter-item.ui-sortable-placeholder {
    display: inline-block!important;
    background-color: #f5f5f5!important;
    visibility: visible!important;
}
div.d3view-filters-container .filter-item:not(.filter-hz-item).ui-sortable-placeholder {
    display: block!important;
    height: 100px;
}
div.d3view-filters-container div.filters-list:not([data-accordion="false"]) ul.filter-items .filter-item .filter-item-container {
    padding: 0 15px;
    margin: 5px 0;
    position: relative;
}
div.d3view-filters-container div.filters-list:not([data-accordion="true"]) ul.filter-items .filter-item .filter-item-container {
    padding-right: 20px;
    position: relative;
    margin-top: 5px;
}
div.d3view-filters-container div.filters-list:not([data-accordion="true"]) ul.filter-items .filter-item {
    margin-bottom: 15px;
}
div.d3view-filters-container .filter-item:hover .hide-filter, div.d3view-filters-container .filter-item:hover .remove-dummy-filter {
    opacity: 1!important;
}
div.d3view-filters-container .filter-item .hide-filter, div.d3view-filters-container .filter-item .remove-dummy-filter {
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 20px;
    padding: 4px;
    color: red;
    opacity: 0;
}
div.d3view-filters-container .twitter-typeahead {
    width: 100%;
}
div.d3view-filters-container .input_range_default_value_slider {
    /*width: 90%;*/
    margin: 0 auto;
}
.flexFilters div.d3view-filters-container .input_range_default_value_slider {
    width: calc(100% - 30px)!important;
    margin: 0 auto;
    margin-top: 10px;
}

div.d3view-filters-container .range-min, div.d3view-filters-container .range-max {
    /*float: left;*/
    position: relative;
    bottom: 7px;
    font-weight: 500;
}
div.d3view-filters-container .range-max {
    float: right!important;
}
div.d3view-filters-container .filter-footer {
    padding: 5px;
}
div.d3view-filters-container .filter-stat {
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 18px;*/
    cursor: pointer;
    margin-right: 2px;
    color: dimgray;
}
div.d3view-filters-container .filter-item:hover .filter-stat {
    color: unset;
}
div.d3view-filters-container .filter-stat.shown {
    color: steelblue;
}
div.d3view-filters-container .filter-stat.shown .stat-arrow:after, div.d3view-filters-container .filter-stat.shown .stat-arrow:before {
    content: '';
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
}
div.d3view-filters-container .filter-stat.shown .stat-arrow:before {
    border-color: transparent #CCC transparent transparent;
    border-width: 8px 8px 8px 0;
}
div.d3view-filters-container .filter-stat.shown .stat-arrow:after {
    border-color: transparent #CCC transparent transparent;
    border-width: 9px 9px 9px 0;
}
div.d3view-filters-container .filter-hz-item .filter-stat.shown .stat-arrow:after, div.d3view-filters-container .filter-hz-item .filter-stat.shown .stat-arrow:before {
    top: 100%;
    left: 0;
}
div.d3view-filters-container .filter-hz-item .filter-stat.shown .stat-arrow:before {
    border-color: transparent transparent #CCC transparent;
    border-width: 0px 9px 9px 9px;
}
div.d3view-filters-container .filter-hz-item .filter-stat.shown .stat-arrow:after {
    border-color: transparent transparent #fff transparent;
    border-width: 0px 8px 8px 8px;
    margin-left: 1px;
    margin-top: 1px;
}

div.d3view-filters-container .filter-stat:hover {
    color: steelblue;
}
div.fb-stat-popover .popover-heading {
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    padding: 5px;
}
div.fb-stat-popover .popover-titles {
    display: inline-block;
}
div.fb-stat-popover .slider {
    top: 30%;
}
div.fb-stat-popover .range_text {
    position: absolute;
    top: 10px;
    float: left;
}
div.fb-stat-popover .max_text {
    float: right;
    right: 0;
}
div.fb-stat-popover button.apply {
    /*position: absolute;*/
    top: 5px;
    right: 4px;
}
div.fb-stat-popover #custom-handle {
    width: auto;
    min-width: 17px;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}

/* horizontal filters */
div.d3view-filters-container .filter-items-hz {
    display: inline-block;
    margin-right: 10px;
    padding-top: 0!important;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /*max-width: 90%;*/
}
div.d3view-filters-container[data-view="horizontal"] div.filters-list {
    display: flex;
    align-items: center;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item {
    min-width: 215px;
    display: inline-block;
    margin: 5px;
    position: relative;
    display: flex;
    align-items: center;
    /*padding-right: 15px;*/
}
div.d3view-filters-container .filter-items-hz .filter-hz-item:first-child {
    margin-left: 0;
}
div.d3view-filters-container li.filter-hz-item .filter-val-container {
    color: #428BCA;
    font-weight: 500;
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 4px;
    margin-right: 20px;
}
div.d3view-filters-container li.filter-hz-item .filter-val-container .empty-val {
    color: #aaa;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-toggle {
    border: 1px solid #ececec;
    padding: 7px;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    color: #4f5359;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    margin-right: 8px;
    /*width: 95%;*/
}
div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-toggle:hover {
    background-color: #d3f4ff73;
}
div.d3view-filters-container .filter-hz-item .filter-separator {
    /*position: absolute;*/
    /*right: -5px;*/
    /*top: 6px;*/
}
div.d3view-filters-container .filter-hz-item .filter-separator > .separator-flag {
    color: #428BCA;
    cursor: pointer;
    user-select: none;
    /*display: none;*/
}
div.d3view-filters-container .filter-hz-item.last .filter-separator > .separator-flag {
    display: none;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-menu {
    width: 100%;
    /*width: 400px;*/
    /*padding: 0px;*/
    /*transform: translate(-107.5px, 4px);*/
}
/*div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-menu.outofbounds {*/
/*    left: 107.5px!important;*/
/*}*/
/*div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-menu.outofbounds:before {*/
/*    left: 50px;*/
/*}*/
/*div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-menu.outofbounds:after {*/
/*    left: 51px;*/
/*}*/
/*div.d3view-filters-container .filter-items-hz .filter-hz-item-container:before {*/
/*    left: 200px;*/
/*}*/
/*div.d3view-filters-container .filter-items-hz .filter-hz-item-container:after {*/
/*    left: 201px;*/
/*}*/

div.d3view-filters-container .filter-items-hz .filter-hz-item-container:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item-container:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff!important;
    border-left: 6px solid transparent;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item-container:before,
div.d3view-filters-container .filter-items-hz .filter-hz-item-container:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
    left: 50%;
    transform: translateX(-50%);
}
div.d3view-filters-container .filter-items-hz .filter-hz-item .dropdown-menu .input_range_default_value_slider {
    /*width: 300px;*/
    margin: 20px 10px;
}
div.d3view-filters-container .filter-hz-item .search-input input.result-search {
    padding-left: 25px!important;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item .results-list {
    max-height: 220px;
    overflow: auto;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item .filter-item-container-footer {
    border-top: 1px solid #DDD;
    padding: 10px;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item .results-list-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item input[name="filter-item-check"] {
    margin: 0;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item .results-list-item-label {
    margin-bottom: 0;
    /*max-width: 150px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    font-weight: 500;
    cursor: pointer;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item span.filter-icon {
    margin-right: 4px;
}
div.d3view-filters-container .filter-items-hz .filter-hz-item span.filter-name {
    font-weight: bold;
    white-space: nowrap;
}
div.d3view-filters-container .filter-hz-item .filter-caret {
    /*position: absolute;*/
    right: 4px;
}
div.d3view-filters-container .filter-hz-item .filter-remove {
    opacity: 1;
    position: absolute;
    top: -5px;
    right: -4px;
    color: #b6b5b5;
    font-size: 1.1em;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}
/*div.d3view-filters-container .filter-hz-item:last-child .filter-remove {*/
/*    right: -1px!important;*/
/*}*/
div.d3view-filters-container li.filter-hz-item .dropdown-menu li.results-list-item:hover {
    background-color: #efefef;
}
div.d3view-filters-container .filter-hz-item .filter-remove:hover {
    color: red;
}
div.d3view-filters-container .filter-hz-item:hover .filter-remove {
    opacity: 1!important;
}
div.d3view-filters-container .filter-hz-item .filter-stat {
    top: auto!important;
    right: 33px;
}
div.d3view-filters-container .open > .add-filter {
    background: #f5f5f5;
}
div.d3view-filters-container .add-filter {
    padding: 3px;
    border: none;
    box-shadow: none;
    color: #428bca;
    cursor: pointer;
    text-decoration: none;
}

div.d3view-filters-container div.dropdown li {
    cursor: pointer;
    position: relative;
}
div.d3view-filters-container div.dropdown li.additional-filter, div.d3view-filters-container li.add-filter-item {
    padding: 0px;
}
div.d3view-filters-container div.dropdown li.additional-filter > a, div.d3view-filters-container li.add-filter-item > a {
    padding: 7px 20px;
}
div.d3view-filters-container div.dropdown li.additional-filter:hover {
    background-color: #efefef;
}
div.d3view-filters-container div.dropdown li.existing-filter.active {
    background-color: #428BCA;
    color: #FFF;
}
div.d3view-filters-container div.dropdown li.existing-filter .remove_existing_filter:hover {
    color: red;
}
div.d3view-filters-container div.dropdown li:hover {
    /*background-color: #DDD;*/
}
div.d3view-filters-container .filters-list {
    float: none!important;
}
div.d3view-filters-container div.additional_filters_container {
    padding: 10px;
}
div.d3view-filters-container.droppable {
    background-color: rgba(0, 0, 0, 0.05);
}
div.fb-filters-common-keys {
    z-index: 1051;
    position: absolute;
    background-color: #FFF;
    left: 50%;
    top: 30%;
    width: 30%;
    margin-left: -15%;
}

div.d3view-filters-container li.filter-item:not(.filter-hz-item) .filter-operators-dropdown,
div.d3view-filters-container li.filter-item:not(.filter-hz-item) .range-operator-dropdown {
    position: absolute;
    top: 4px;
    right: 0;
    padding: 0;
}
div.d3view-filters-container li.filter-item:not(.filter-hz-item) > a:hover {
    background-color: #f5f5f5;
}
div.d3view-filters-container div.filters-list:not([data-accordion="false"]) li.filter-item:not(.filter-hz-item).open > a {
    background-color: #428bca;
    color: #FFF;
    /*border-radius: 0!important;*/
}
div.d3view-filters-container li.filter-item:not(.filter-hz-item).open > .toggle_item {
    color: #FFF!important;
}
div.d3view-filters-container li.filter-hz-item .filter-operators-dropdown {
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 38px;*/
}
div.d3view-filters-container li.filter-hz-item:last-child .filter-operators-dropdown {
    right: 28px!important;
}
/*div.d3view-filters-container li.filter-hz-item .filter-operators-dropdown > .dropdown-toggle {*/
/*    padding: 10px 6px!important;*/
/*}*/
/*div.d3view-filters-container .filter-operators-dropdown > .dropdown-toggle,*/
/*div.d3view-filters-container .range-operator-dropdown > .dropdown-toggle {*/
/*    padding: 2px 6px;*/
/*}*/
div.d3view-filters-container li.filter-item .dropdown > .dropdown-toggle:hover,
div.d3view-filters-container li.filter-item .dropdown.open > .dropdown-toggle {
    background: #e8f0fe;
    color: #4f5359!important;
    border-radius: 5px;
}
div.d3view-filters-container li.filter-item .filter-operators-dropdown ul.dropdown-menu {
    user-select: none;
}
div.d3view-filters-container li.filter-item .filter-operators-dropdown ul.dropdown-menu li {
    position: relative;
}
div.d3view-filters-container li.filter-item .filter-operators-dropdown ul.dropdown-menu li > a {
    font-size: 12px!important;
}
div.d3view-filters-container li.filter-item .filter-operators-dropdown li.checked:not(.disabled):after {
    position: absolute;
    content: '\f00c';
    right: 8px;
    font-family: FontAwesome;
    color: #428bca;
    top: 3px;
}
div.d3view-filters-container div.filters-list li.filter-item > a {
    text-decoration: none;
    color: #333;
    cursor: default;
}
div.d3view-filters-container div.filters-list[data-accordion="true"] li.filter-item {
    margin-bottom: 10px;
}
div.d3view-filters-container div.filters-list[data-accordion="true"] li.filter-item > a {
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 10px 15px;
    margin-bottom: 0;
    border-radius: 4px;
    cursor: pointer;
}
div.d3view-filters-container div.filters-list[data-accordion="true"] li.filter-item .toggle_item {
    position: absolute;
    right: 4px;
    top: 4px;
    padding: 4px;
    cursor: pointer;
}

div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] .group-filters {
    /*padding-left: 12px;*/
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] ul.filter-items {
    max-height: 250px!important;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group {
    padding: 0;
    background-color: #FFF;
    margin-bottom: 5px;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group > a {
    text-decoration: none;
    padding: 7px 15px;
    /*display: block;*/
    background-color: #fff;
    color: inherit;
    justify-content: space-between;
    cursor: pointer;
}
/*div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group.expanded {*/
/*    border-color: #428bca;*/
/*}*/
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group:hover > a,
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group.expanded > a {
    background-color: #f5f5f5;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group:hover > a .group-name,
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group.expanded > a .group-name {
    color: steelblue;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] .group-name {
    text-transform: capitalize;
    cursor: pointer;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] .toggle_group {
    /*position: absolute;*/
    /*right: 10px;*/
    /*top: 4px;*/
    font-size: 1.5em;
    transition: transform 0.3s ease-in;
    color: gray;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] .expanded .toggle_group {
    /*transform: rotate(90deg);*/
}
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-group li.filter-item,
div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] li.accordion-individual-render li.filter-item {
    padding: 0;
}
div.d3view-filters-container div.filters-list[data-groupsviewtype='accordion'] .groups-accordion[data-usedropdowns="true"] li.filter-item > a {
    background-color: inherit!important;
    color: inherit!important;
}
div.d3view-filters-container .side-by-side-navigation {
    display: flex;
    flex-wrap: nowrap;
}

div.d3view-filters-container .side-by-side-navigation .filter-group.collapsed {
    width: 50px;
    background: #f5f5f5;
    border-right: 1px solid #DDD;
    cursor: pointer;
}
div.d3view-filters-container .side-by-side-navigation .filter-group.collapsed .filter-group-name {
    writing-mode: vertical-lr;
    text-align: end;
    margin-top: 10px;
}
div.d3view-filters-container .side-by-side-navigation .filter-group.collapsed .group-filters {
    display: none;
}
div.d3view-filters-container .side-by-side-navigation .filter-group.expanded {
    width: 250px;
    margin: 0 10px;
}
div.d3view-filters-container .side-by-side-navigation .filter-group-name {
    text-decoration: none;
}
div.d3view-filters-container .side-by-side-navigation .filter-group-name:hover {
    background: #f5f5f5;
    color: #253858;
}




/** Added by shashank2104 on 10/01/2025 at 05:08 PM - Simple Actions View Styles **/

/* Simple Actions View Styles */
.wf-input-action-list[data-view="simple"] .simple-actions-table-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.wf-input-action-list[data-view="simple"] .simple-actions-table {
    margin-bottom: 0;
}

.wf-input-action-list[data-view="simple"] .simple-actions-table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    padding: 12px 15px;
}

.wf-input-action-list[data-view="simple"] .simple-actions-table tbody td {
    padding: 15px;
    vertical-align: top;
    border-bottom: 1px solid #dee2e6;
}

/* Breadcrumb Styles */
.wf-input-action-list[data-view="simple"] .breadcrumb-container {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.wf-input-action-list[data-view="simple"] .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
}

.wf-input-action-list[data-view="simple"] .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
}

.wf-input-action-list[data-view="simple"] .breadcrumb-link {
    text-decoration: none;
    cursor: pointer;
}

.wf-input-action-list[data-view="simple"] .breadcrumb-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.wf-input-action-list[data-view="simple"] .breadcrumb-item.active .input-name {
    color: #495057;
    font-weight: 500;
}

/* Current Value Display */
.wf-input-action-list[data-view="simple"] .current-value-display-container {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 15px;
    margin: 10px 0;
}

.wf-input-action-list[data-view="simple"] .current-value-content {
    min-height: 30px;
}

/* Input Cell Styles */
.wf-input-action-list[data-view="simple"] .input-cell {
    
}

.wf-input-action-list[data-view="simple"] .input-info {
    padding: 5px 0;
}

/* Workflow Actions Styles */
.wf-input-action-list[data-view="simple"] .workflow-actions-cell {
    padding: 5px 0;
}

/* Ensure workflow actions column is always visible */
.wf-input-action-list[data-view="simple"] .simple-actions-table th:last-child,
.wf-input-action-list[data-view="simple"] .simple-actions-table td:last-child {
    display: table-cell !important;
    visibility: visible !important;
}

.wf-input-action-list[data-view="simple"] .input-name.clickable {
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.wf-input-action-list[data-view="simple"] .input-name.clickable:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Condition Cell Styles */
.wf-input-action-list[data-view="simple"] .condition-cell {
    
}

.wf-input-action-list[data-view="simple"] .condition-text {
    font-weight: 500;
    color: #495057;
    display: block;
    margin-bottom: 5px;
}

.wf-input-action-list[data-view="simple"] .operator-value {
    font-size: 12px;
    color: #6c757d;
}

.wf-input-action-list[data-view="simple"] .toggle-current-value {
    font-size: 11px;
    padding: 2px 6px;
}

/* Dependent Inputs Pills */
.wf-input-action-list[data-view="simple"] .dependent-inputs-cell {
    vertical-align: middle;
}

.wf-input-action-list[data-view="simple"] .dependent-inputs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.wf-input-action-list[data-view="simple"] .dependent-input-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 16px;
    white-space: nowrap;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.wf-input-action-list[data-view="simple"] .dependent-input-pill:hover {
    background: #bbdefb;
    border-color: #90caf9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Action type badge uses Bootstrap label classes - no custom CSS needed */

.wf-input-action-list[data-view="simple"] .input-name-pill {
    color: #1976d2;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pill Actions */
.wf-input-action-list[data-view="simple"] .pill-actions {
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
    gap: 2px;
    z-index: 10;
    pointer-events: all;
}

.wf-input-action-list[data-view="simple"] .dependent-input-pill:hover .pill-actions {
    display: flex;
    pointer-events: all!important;
}

.wf-input-action-list[data-view="simple"] .pill-action-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.wf-input-action-list[data-view="simple"] .pill-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.wf-input-action-list[data-view="simple"] .pill-action-btn i {
    font-size: 10px;
}

/* Disabled pill state */
.wf-input-action-list[data-view="simple"] .dependent-input-pill.disabled {
    opacity: 0.6;
    background: #f5f5f5;
    border-color: #ddd;
}
.wf-input-action-list[data-view="simple"] .dependent-input-pill.disabled .pill-action-btn[data-action="disable"] {
    pointer-events: auto !important; /* Allow clicks even when disabled */
}

.wf-input-action-list[data-view="simple"] .dependent-input-pill.disabled .input-name-pill {
    color: #999;
}

.wf-input-action-list[data-view="simple"] .show-more-pill, 
.wf-input-action-list[data-view="simple"] .show-less-pill {
    background: #6c757d;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wf-input-action-list[data-view="simple"] .show-more-pill:hover, 
.wf-input-action-list[data-view="simple"] .show-less-pill:hover {
    background: #5a6268;
}

.wf-input-action-list[data-view="simple"] .hidden-inputs-container {
    width: 100%;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wf-input-action-list[data-view="simple"] .simple-actions-table thead th,
    .wf-input-action-list[data-view="simple"] .simple-actions-table tbody td {
        padding: 8px 10px;
    }
    
    .wf-input-action-list[data-view="simple"] .dependent-input-pill {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    .wf-input-action-list[data-view="simple"] .action-type-badge {
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* Loading state */
.wf-input-action-list[data-view="simple"] .simple-actions-table.loading tbody {
    opacity: 0.6;
    pointer-events: none;
}

/* Hover effects */
.wf-input-action-list[data-view="simple"] .simple-actions-table tbody tr:hover {
    background-color: #f8f9fa;
}

.wf-input-action-list[data-view="simple"] .simple-actions-table tbody tr:hover .dependent-input-pill {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.input-action-view .d3view-filters {
    height: auto;
    margin-bottom: 10px;
}
/* /javascripts/plugins_src/responsebuilder/responsebuilder.css */
div.d3view-responsebuilder {
    width: 100%;
    position: relative;
    min-height: 200px;
}
div.d3view-responsebuilder .no-pages, div.d3view-responsebuilder .no-responses {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 500;
}

div.d3view-responsebuilder .rb-container {
    overflow: auto;
    position: relative;
    height: auto!important;
}
div.d3view-responsebuilder.constrain-height .rb-container {
    height: 100%!important;
}
/*div.d3view-responsebuilder.constrain-height .rb-container {*/
/*    height: 100% !important;*/
/*    overflow: hidden;*/
/*    max-width: 100vw;*/
/*    !*min-height: unset!important;*!*/
/*}*/
/*div.d3view-responsebuilder.constrain-height .rb-container .rb-rsp-panel {*/
/*    position: unset !important;;*/
/*    float: left;*/
/*    max-width: 50vw;*/
/*}*/
/*div.d3view-responsebuilder.constrain-height .rb-container .rb-rsp-panel .rb-rsp-panel-content {*/
/*    height: 100%;*/
/*}*/
/*div.d3view-responsebuilder.constrain-height .rb-container .rb-rsp-panel .rb-rsp-panel-content .response-content {*/
/*    height: calc(100% - 50px) !important;*/
/*}*/
/*div.d3view-responsebuilder.constrain-height .rb-container {*/
/*    !* height:100%!important; *!*/
/*    !* overflow:hidden; *!*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    max-width: 100%;*/
/*}*/
/*div.d3view-responsebuilder.constrain-height .rb-container .rb-rsp-panel {*/
/*    width: calc(50% - 10px)!important;*/
/*    flex: 0 0 calc(50% - 10px);*/
/*    max-width: calc(50% - 10px);*/
/*    height: 400px!important;;*/
/*    margin-bottom: 10px;*/
/*}*/




div.d3view-responsebuilder div.side-panel {
    padding: 0;
}
div.d3view-responsebuilder div.side-panel li.list-group-item {
    border-left: none;
    border-right: none;
    padding: 7px 14px;
    cursor: pointer;
    position: relative;
}
div.d3view-responsebuilder div.side-panel li.list-group-item:hover {
    background-color: #eee;
}

div.d3view-responsebuilder div.side-panel li.list-group-item.selected:after {
    content: '\f00c';
    position: absolute;
    right: 5px;
    top: 7px;
    font-family: FontAwesome;
    color: #428BCA;
}

div.d3view-responsebuilder div.side-panel li.widget-item {
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
    padding: 10px 15px;
}
div.d3view-responsebuilder .rb-container.hovered {
    background-color: #f5f5f5;
}


div.d3view-responsebuilder div.rb-views label {
    display: flex;
    align-items: center;
    padding: 4px 15px;
}
div.d3view-responsebuilder div.rb-views label input {
    margin-right: 4px;
}

div.d3view-responsebuilder .rb-rsp-panel {
    position: absolute;
    margin-bottom: 0;
    padding: 5px;
}
div.d3view-responsebuilder .rb-rsp-panel .rb-rsp-panel-content > .ui-resizable-handle {
    z-index: auto!important;
}
div.d3view-responsebuilder .rb-rsp-panel.ui-selected .rsp-panel-content,
div.d3view-responsebuilder .rb-rsp-panel.ui-selecting .rsp-panel-content {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
div.d3view-responsebuilder .rb-rsp-panel.fixed, div.d3view-responsebuilder .rb-container[data-view="grid"] .rb-rsp-panel.fixed {
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    z-index: 2000;
    margin: 0!important;
}
div.d3view-responsebuilder .rb-rsp-panel.fixed > .grid-stack-item-content {
    inset: 0!important;
}
div.d3view-responsebuilder .rsp-panel-content {
    padding-bottom: 0;
    height: 100%;
    width: 100%;
    margin-bottom: 0;
    overflow: auto;
    /*box-shadow: 2px 4px 14px 1px rgba(0,0,0,0.09), 2px 4px 14px 1px rgba(0,0,0,0.012), 0 5px 5px -3px rgba(0,0,0,0.2);*/
    /*border-color: transparent;*/
}
div.d3view-responsebuilder div.rb-container.grid-stack .rsp-panel-content {
    /*height: auto;*/
}
div.d3view-responsebuilder .rsp-panel-content .panel-options span.panel-option {
    padding: 6px;
    cursor: pointer;
    display: inline-block;
}
div.d3view-responsebuilder .rsp-panel-content .panel-options span.panel-option.active {
    color: green;
}
div.d3view-responsebuilder .rsp-panel-content .panel-options .dropdown-toggle {
    background: none!important;
    border: none!important;
    box-shadow: none!important;
    text-shadow: none!important;
}
div.d3view-responsebuilder .rsp-panel-content .panel-options .dropdown-toggle:hover {
    background: aliceblue!important;
}
div.d3view-responsebuilder .rsp-panel-content .panel-options .panel-option:hover {
    color: red;
}
div.d3view-responsebuilder .rb-rsp-panel .rsp-panel-heading {
    display: flex;
    /*padding: 0;*/
    align-items: center;
    /*background-image: none;*/
    /*background: #FFF;*/
    /*border-bottom: none;*/
}
div.d3view-responsebuilder .rb-rsp-panel .panel-body {
    /*padding: 5px;*/
}
div.d3view-responsebuilder .rb-rsp-panel .panel-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    margin-left: 10px;
}
div.d3view-responsebuilder[data-mode="create"] .rb-container[data-view="grid"] .panel-title {
    cursor: move;
}
div.d3view-responsebuilder[data-mode="create"] .rb-rsp-panel .panel-title .model-name {
    cursor: pointer;
}
div.d3view-responsebuilder[data-mode="create"] .rb-rsp-panel .panel-title .model-name:hover {
    color: #4f5359;
}
div.d3view-responsebuilder .rb-rsp-panel .panel-close {
    /*position: absolute;*/
    /*right: 10px;*/
}

div.d3view-responsebuilder .rb-rsp-panel .response-content {
    overflow: auto;
    position: relative;
}

div.d3view-responsebuilder .rb-container[data-view="grid"] {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /*flex-direction: column;*/
}
div.d3view-responsebuilder .rb-container[data-view="grid"] .rb-rsp-panel {
    position: relative!important;
    /*margin: 10px;*/
    top: unset!important;
    left: unset!important;
}

div.d3view-responsebuilder .rb-container[data-view="grid"] .rb-rsp-panel .ui-resizable-s {
    left: 50%;
    margin-left: -25px;
    bottom: -3px;
    width: 50px;
    background: #EEE;
    opacity: 0;
}
div.d3view-responsebuilder .rb-container[data-view="grid"] .rb-rsp-panel:hover .ui-resizable-s {
    opacity: 1!important;
}
div.d3view-responsebuilder .rb-container[data-view="grid"] .rb-rsp-panel.ui-sortable-placeholder {
    visibility: visible!important;
    background: lightyellow;
}

div.d3view-responsebuilder .rb-container .widget-item.sortable-ghost {
    width: 200px;
    background: lightyellow;
}

div.d3view-responsebuilder .page-navigation {

}

div.d3view-responsebuilder .page-title {
    display: flex;
    align-items: center;
}
div.d3view-responsebuilder .page-name {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 5px;
}
div.d3view-responsebuilder .page-title .badge {
    background: #428bca;
}



/* accordion */

div.d3view-responsebuilder #widget-accordion {
    padding: 0 15px;
}
div.d3view-responsebuilder #widget-accordion .panel {
    margin-bottom: 4px;
    border-color: transparent;
    box-shadow: 0 6px 14px 1px rgba(0,0,0,0.001), 0 1px 13px 2px rgba(0,0,0,0.06), 0 2px 6px -3px rgba(0,0,0,0.2);
    border-radius: 4px;
}
div.d3view-responsebuilder #widget-accordion .panel-body {
    padding: 0;
}
div.d3view-responsebuilder #widget-accordion .panel-body ul.list-group {
    max-height: 200px!important;
    overflow: auto;
}
div.d3view-responsebuilder #widget-accordion .panel-heading {
    padding: 0;
    border-bottom: none;
    background: none;
}
div.d3view-responsebuilder #widget-accordion .panel-title {
    font-size: 12px;
}
div.d3view-responsebuilder #widget-accordion .panel-heading a {
    display: block;
    padding: 10px 15px;
}
div.d3view-responsebuilder #widget-accordion .panel-heading .glyphicon.glyphicon-chevron-right {
    transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
div.d3view-responsebuilder #widget-accordion .panel-heading [aria-expanded=true] .glyphicon.glyphicon-chevron-right {
    transform: rotate(90deg);
    transition: transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
}


/* /javascripts/plugins_src/tabmanager/tabmanager.css */
div.d3view-tab-manager-container {
    /*height: 100%;*/
    width: 100%;
}
div.d3view-tab-manager {
    border-bottom: 1px solid #DDD;
    display: flex;
    height: 100%;
}
div.d3view-tab-manager div.d3view-tabs-vertical {
    display: flex;
}
div.d3view-tab-manager div.d3view-tabs-vertical .nav-tabs-container {
    width: 180px;
    border-right: 1px solid #DDD;
    float: left;
}
div.d3view-tab-manager div.d3view-tabs-vertical ul.nav-tabs-vertical li {
    display: block;
    width: 100%;
    margin: 0;
}
div.d3view-tab-manager div.d3view-tabs-vertical ul.nav-tabs-vertical {
    height: unset;
}
div.d3view-tab-manager div.d3view-tabs-vertical ul.nav-tabs-vertical li a {
    margin-right: 0;
}
div.d3view-tab-manager div.d3view-tabs-vertical ul li.active a {
    border: none;
    color: #FFF!important;
    background: #428BCA;
    border-radius: 0;
}

/* horizontal */
div.d3view-tab-manager .d3view-tabs-horizontal {
    flex: 1 1 auto;
    width: 100%;
}
div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: none;
    position: relative;
    margin-bottom: 0;


    flex: 1 1 auto;
}
div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs > li > a .tab-name {
    /*color: rgba(0,0,0,0.6);*/
}

/* standard design - nav pills */
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li.active > a,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li > a:hover,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li > a:focus {
    background: #eee;
     border-radius: 0;
    transition: background 150ms linear;
    border: 1px solid transparent;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li.active > a .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li > a:hover .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li > a:focus .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li:hover:after,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] .nav-tabs > li.active .tab_options_toggle {
    /* color: #FFF; */
    transition: color 150ms linear, background 150ms linear;
}

/* material design */
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.active > a,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a:hover,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a:focus {
    background: inherit;
    border-radius: 0;
    border-bottom-color: #007bff;
    font-weight: 500;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li {
    border-bottom: 2px solid transparent;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.active {
    border-bottom: 2px solid #007bff;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.active > a .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a:hover .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a:focus .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li:hover:after,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li.active .tab_options_toggle {
    transition: color 150ms linear;
    color: #007bff;
}



div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a {
    display: flex;
    align-items: center;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a .tab-name {
    margin-right: 6px;
}

div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs > li > a .tab-name {
    /*color: rgba(0,0,0,0.6);*/
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li > a {
    border: none!important;
    font-weight: 500;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] .nav-tabs > li {
    margin-bottom: 0;
}

/* bootstrap design */
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li.active > a,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li > a:hover,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li > a:focus {
    background: inherit;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li.active > a .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li > a:hover .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li > a:focus .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li:hover:after,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] .nav-tabs > li.active .tab_options_toggle {
    transition: color 150ms linear;
    color: inherit;
}

div.d3view-tab-manager li.nav-tab-item.isSyncing > a {
    background: #d3f4ff73;
}
div.d3view-tab-manager li.nav-tab-item.isSyncing:after {
    content: '\f021';
    font-family: 'FontAwesome';
    color: dimgray;
    position: absolute;
    right: 5px;
    top: 0;
    /*animation: fa-spin 2s infinite linear;*/
}

div.simlytiks .previewOpen .d3view-tab-manager li.nav-tab-item:not(.isEditing) > a {
    /*background: #f5f5f5;*/
}
div.d3view-tab-manager li.nav-tab-item.isEditing > a {
    /*background-color: #f5f5f5;*/
    /*background: orange!important;*/
    border-top: 3px solid orange;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] li.nav-tab-item.isEditing.active .tab-name {
    color: orange!important
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] li.nav-tab-item.isEditing.active .tab-name,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] li.nav-tab-item.isEditing.active .tab-name {
    color: orange;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="material"] li.nav-tab-item.isEditing:after,
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="bootstrap"] li.nav-tab-item.isEditing:after {
    color: orange;
}
div.d3view-tab-manager div.d3view-tabs-horizontal[data-design="standard"] li.nav-tab-item.isEditing:after {
    color: orange;
}
div.d3view-tab-manager li.nav-tab-item.isEditing .tab_options {
    display: none;
}
div.d3view-tab-manager li.nav-tab-item.isEditing:after {
    content: '\f044';
    font-family: 'FontAwesome';
    color: #FFF;
    position: absolute;
    right: 5px;
    top: 0;
    /*animation: fa-spin 2s infinite linear;*/
}
div.d3view-tab-manager li.nav-tab-item.isEditing:not(.active):after {
    color: #333;
}

div.d3view-tab-manager li.nav-tab-item.isSyncing.active:after {
    color: #FFF!important;
}

div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs > li > a {
    border-bottom: 1px solid transparent;
    padding: 5px 15px;
}
div.d3view-tab-manager div.d3view-tabs-horizontal .scroll_button > i {
    font-size: 2em;
}
div.d3view-tab-manager div.d3view-tabs-horizontal .scroll_button.disabled > i {
    color: #AAAAAA;
}
/*div.d3view-tab-manager div.d3view-tabs-horizontal .scroll_buttons {*/
/*    position: absolute;*/
/*    right: 0;*/
/*    top: 2px;*/
/*}*/
/*div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs-horizontal {*/
/*    float: left;*/
/*    margin-bottom: 0;*/
/*}*/
div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs-container {
    display: flex;
    align-items: center;
    /*margin: 10px 0 0 0;*/
}
div.d3view-tab-manager div.d3view-tabs-horizontal div.add_tab_container {
    float: left;
    padding: 7px 15px;

    flex: 0 0 125px;
    width: 125px;
}
div.d3view-tab-manager a.add_tab {
    /*color: #444;*/
}
/*div.d3view-tab-manager .nav-tabs-horizontal {*/
/*    border-bottom: none;*/
/*}*/
/*div.d3view-tab-manager .nav-tabs-horizontal > li.active > a {*/
/*    border-radius: 0;*/
/*    border-color: #428BCA;*/
/*}*/
/*div.d3view-tab-manager .nav-tabs-horizontal > li:not(.active) > a {*/
/*    border-radius: 0;*/
/*    border-color: #DDD;*/
/*    background-color: #f5f5f5;*/
/*}*/

/*div.d3view-tab-manager .nav-tabs-horizontal > li.additional_items_dropdown.active > a {*/
/*    background: none;*/
/*    color: inherit;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal li a {*/
/*    user-select: none;*/
/*    flex: 1 1 auto;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal li.dropdown {*/
/*    cursor: pointer;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal li.dropdown.hasActive > a {*/
/*    border-bottom: 2px solid #428bca;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal li.dropdown.highlighted > a {*/
/*    background-color: #428BCA!important;*/
/*    color: #FFF!important;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal .additional_items_dropdown .dropdown-menu {*/
/*    !*max-height: 250px;*!*/
/*    !*overflow: auto;*!*/
/*    z-index: 2000;*/
/*}*/
/*div.d3view-tab-manager ul.nav-tabs-horizontal li.dropdown > .dropdown-toggle:hover {*/
/*    background-color: #eee;*/
/*    text-decoration: none;*/
/*    border-color: #eee #eee #ddd;*/
/*}*/
/*div.d3view-tab-manager .nav-tabs-horizontal li.ui-sortable-placeholder {*/
/*    visibility: visible!important;*/
/*    padding: 10px 15px;*/
/*    width: 60px;*/
/*    height: 35px;*/
/*    background: lightblue;*/
/*}*/

div.d3view-tab-manager .default_tab_text {
    position: relative;
    top: 50%;
    left: 50%;
    font-size: 2em;
    font-weight: 600;
}

div.d3view-tab-manager li.nav-tab-item.hasEditOptions > a[data-toggle="tab"] {
    padding-right: 30px;
}
div.d3view-tab-manager .tabm-dd li.nav-tab-item.hasEditOptions > a[data-toggle="tab"] {
    width: 100%;
}
div.d3view-tab-manager li.nav-tab-item .tab_options {
    position: absolute;
    right: 3px;
    opacity: 0;
    pointer-events: none;

}
div.d3view-tab-manager li.nav-tab-item.active .tab_options {
    opacity: 1!important;
    pointer-events: all!important;
}
div.d3view-tab-manager li.nav-tab-item .dropdown {
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 11px;*/
    /*padding: 6px 0;*/
}
div.d3view-tab-manager li.nav-tab-item .dropdown .dropdown-toggle {
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}
div.d3view-tab-manager li.nav-tab-item .dropdown .dropdown-toggle:hover, div.d3view-tab-manager li.nav-tab-item .dropdown.open .dropdown-toggle {
    background: #FFF!important;
    color: #000!important;
    border-radius: 50%!important;
}
div.d3view-tab-manager li.nav-tab-item {
    display: flex;
    align-items: center;
}

div.d3view-tab-manager li.nav-tab-item.active.sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #f8f9fa;
    border-radius: 0 4px 4px 0;
}
div.d3view-tab-manager li.nav-tab-item.active.sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #eee;
    border-radius: 4px 0 0 4px;
}

div.d3view-tab-manager li.nav-tab-item > a {
    flex: 1 1 auto;
}
div.d3view-tab-manager li.nav-tab-item .tab-name {
    align-items: center;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    font-size: 1.2em;
    color: #000;
}
div.d3view-tab-manager .tabm-dd li.nav-tab-item .tab-name {
    align-items: center;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    font-size: unset;
    color: unset;
}
div.d3view-tab-manager span.additional_items_label {
    /*font-size: 1.2em;*/
    color: dimgray;
}

div.d3view-tab-manager li.submenu-item .tab_options {
    opacity: 0;
}
div.d3view-tab-manager li.submenu-item:hover .tab_options {
    opacity: 1!important;
    color: #FFF!important;
}
div.d3view-tab-manager li.submenu-item.active .tab_options {
    color: #FFF;
}
div.d3view-tab-manager li.submenu-item {
    position: relative;
}
div.d3view-tab-manager .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%!important;
    transform: unset!important;
}
div.d3view-tab-manager .dropdown-submenu>a:after {
    position: relative!important;
    border-color: transparent!important;
    border-style: solid!important;
    border-width: 5px 0 5px 5px!important;
    border-left-color: #ccc!important;
    /*margin-top: -3px!important;*/
}

div.d3view-tab-manager .tabm-dd.shownAlways {
    display: block!important;
}

.d3view-tab-manager .tabm-dd li .tab-name {
    white-space: normal;
    word-wrap: break-all;
    display: inline-block;
    max-width: 100% !important;
}
.d3view-tab-manager .tabm-dd > ul.dropdown-menu {
    background-color: #FFF;
    width: 400px;
    max-height: 40vh;
    max-width: 50vw;
    overflow: auto;
}

/** Added by shashank2104 on 01/21/2026 - DVFIV-1896 - Quick close button for tab items **/
/** Updated by shashank2104 on 01/21/2026 - DVFIV-1896 - Positioned outside on top right of tab item, overflow visible **/
div.d3view-tab-manager .nav-tabs-container {
    overflow: visible;
}
/* div.d3view-tab-manager .nav-tabs {
    overflow: visible !important;
} */
div.d3view-tab-manager li.nav-tab-item {
    overflow: visible;
    position: relative;
}
div.d3view-tab-manager li.nav-tab-item .d3view-tm-close-btn {
    position: absolute;
    top: 0px;
    right: -6px;
    opacity: 0;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
    font-size: 9px;
    color: #fff;
    background: #999;
    z-index: 10;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
div.d3view-tab-manager li.nav-tab-item:hover .d3view-tm-close-btn {
    opacity: 1;
}
div.d3view-tab-manager li.nav-tab-item .d3view-tm-close-btn:hover {
    color: #fff;
    background: #d9534f;
}
div.d3view-tab-manager li.nav-tab-item.active .d3view-tm-close-btn {
    background: #666;
}
div.d3view-tab-manager li.nav-tab-item.active .d3view-tm-close-btn:hover {
    background: #d9534f;
}
/** Added by shashank2104 on 01/21/2026 - DVFIV-1896 - Highlight tab item when hovering close button for better UX **/
div.d3view-tab-manager li.nav-tab-item:has(.d3view-tm-close-btn:hover) {
    background: #e9ecef;
    border-radius: 4px;
}
div.d3view-tab-manager li.nav-tab-item:has(.d3view-tm-close-btn:hover) > a {
    background: transparent !important;
}
/* /javascripts/plugins_src/rbac/rbac.css */
/** always have a prefix of d3view-rbac to avoid scoping issues **/

.d3view-rbac-container {
    padding: 15px;
}

.d3view-rbac-container .d3view-rbac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.d3view-rbac-container .d3view-rbac-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.d3view-rbac-container .d3view-rbac-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.d3view-rbac-container .d3view-rbac-search {
    flex: 1;
    max-width: 300px;
}

.d3view-rbac-container .d3view-rbac-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/** Added by shashank2104 on 11/19/2025 at 09:43 AM - Added padding to container to allow dragging from outside the grid area **/
.d3view-rbac-container .d3view-rbac-roles-grid-container {
    padding: 20px;
}

.d3view-rbac-container .d3view-rbac-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 15px 0;
}

.d3view-rbac-container .d3view-rbac-role-card-wrapper {
    width: 100%;
}

.d3view-rbac-container .d3view-rbac-role-card {
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; */
    justify-content: space-between;
    margin: 0;
}

.d3view-rbac-container .d3view-rbac-role-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

.d3view-rbac-container .d3view-rbac-role-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-rbac-container .d3view-rbac-role-card-header-left {
    align-items: center;
    gap: 10px;
    flex: 1;
}

.d3view-rbac-container .d3view-rbac-role-card-header-left .d3view-rbac-role-select-checkbox {
    margin: 0;
}



.d3view-rbac-container .d3view-rbac-role-card-header-left .d3view-rbac-role-name .lead {
    margin: 0;
    font-weight: 600;
}

.d3view-rbac-container .d3view-rbac-role-card-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.d3view-rbac-container .d3view-rbac-role-card-actions .btn {
    padding: 4px 8px;
    font-size: 12px;
}

.d3view-rbac-container .d3view-rbac-role-card-body {
    padding: 15px;
}

.d3view-rbac-container .d3view-rbac-role-card-body-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.d3view-rbac-container .d3view-rbac-role-card-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.d3view-rbac-container .d3view-rbac-role-permissions-wrapper {
    flex: 1;
    min-width: 0;
}

.d3view-rbac-container .d3view-rbac-role-users-container {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.d3view-rbac-container .d3view-rbac-role-users-container i {
    margin-right: 5px;
    color: #999;
}

/** Added by shashank2104 on 11/19/2025 at 11:38 AM - DVFIV-1853 - Added styles for clickable permissions and users count containers **/
.d3view-rbac-container .d3view-rbac-role-permissions-count-container,
.d3view-rbac-container .d3view-rbac-role-users-count-container {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease;
}

.d3view-rbac-container .d3view-rbac-role-permissions-count-container:hover,
.d3view-rbac-container .d3view-rbac-role-users-count-container:hover {
    color: #667eea;
}

.d3view-rbac-container .d3view-rbac-role-permissions-count-container i,
.d3view-rbac-container .d3view-rbac-role-users-count-container i {
    margin-right: 5px;
    color: #999;
}

.d3view-rbac-container .d3view-rbac-role-permissions-count-container:hover i,
.d3view-rbac-container .d3view-rbac-role-users-count-container:hover i {
    color: #667eea;
}

.d3view-rbac-container .d3view-rbac-role-users-list {
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    max-height: 200px;
    overflow-y: auto;
}

/** Added by shashank2104 on 11/19/2025 at 11:38 AM - DVFIV-1853 - Removed overflow hidden for permissions summary to allow natural flow like users list **/
.d3view-rbac-container .d3view-rbac-role-permissions-summary {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

.d3view-rbac-container .d3view-rbac-see-more-btn {
    color: #667eea;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

.d3view-rbac-container .d3view-rbac-see-more-btn:hover {
    color: #764ba2;
    text-decoration: underline;
}

.d3view-rbac-container .d3view-rbac-role-created {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-rbac-container .d3view-rbac-permissions-table {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.d3view-rbac-container .d3view-rbac-permissions-table th {
    background: #f8f9fa;
    font-weight: 600;
    padding: 12px;
    border-bottom: 2px solid #dee2e6;
}

.d3view-rbac-container .d3view-rbac-permissions-table td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}

.d3view-rbac-container .d3view-rbac-permissions-table tbody tr:hover {
    background-color: #f8f9fa;
}

.d3view-rbac-container .d3view-rbac-permission-app-select {
    width: 100%;
}

.d3view-rbac-container .d3view-rbac-permission-checkbox {
    text-align: center;
}

.d3view-rbac-container .d3view-rbac-permission-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.d3view-rbac-container .d3view-rbac-permission-remove {
    text-align: center;
}

.d3view-rbac-container .d3view-rbac-add-permission-row {
    margin-top: 10px;
}

.d3view-rbac-container .d3view-rbac-permissions-no-rows {
    padding: 20px;
    text-align: center;
    color: #999;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 4px;
    margin-top: 10px;
}


.d3view-rbac-container .d3view-rbac-users-select {
    width: 100%;

}

.d3view-rbac-container .d3view-rbac-selected-users {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.d3view-rbac-container .d3view-rbac-selected-user {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    background: #e7f3ff;
    border-radius: 3px;
    font-size: 12px;
}

/* Selectable styles */
/** Added by shashank2104 on 11/19/2025 at 09:43 AM - Updated selectable styles to work with container instead of grid **/
.d3view-rbac-container .d3view-rbac-roles-grid-container.ui-selectable {
    position: relative;
}

.d3view-rbac-container .d3view-rbac-roles-grid-container .ui-selectee {
    cursor: pointer;
}

.d3view-rbac-container .d3view-rbac-roles-grid-container .ui-selecting {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.d3view-rbac-container .d3view-rbac-roles-grid-container .ui-selected {
    background-color: #bbdefb;
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.d3view-rbac-container .d3view-rbac-role-card-wrapper.ui-selected .d3view-rbac-role-card {
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/* Floating actions bar */
.d3view-rbac-container .d3view-rbac-floating-actions-bar {
    height: 45px;
    width: calc(100% - 20px);
    margin: 0 auto;
    position: absolute;
    top: 30px;
    left: 10px;
    right: 10px;
    z-index: 200;
    background: #FFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}


.d3view-rbac-container .d3view-rbac-floating-actions-bar .close-bar {
    flex: 0 0 auto;
}

.d3view-rbac-container .d3view-rbac-floating-actions-bar .item-label {
    margin-left: 5px;
}

@media (max-width: 1000px) {
    .d3view-rbac-container .d3view-rbac-floating-actions-bar .item-label {
        display: none;
    }
}

.d3view-rbac-container .d3view-rbac-role-card.show_metadata {
    border-left: 4px solid #2196f3;
}


/* /javascripts/plugins_src/studies/studies.css */
/**
 * Added by shashank2104 on 03/27/2026 at 05:17 PM - DVFIV-1966
 * Studies list: HPC server card pattern, scoped under + .d3view-studiesnew-study-items-view
 */

/* -------------------------------------------------------------------------
   Grid (mirrors #admin-hpcserver .hpc-servers-grid)
   ------------------------------------------------------------------------- */
/* Added by shashank2104 on 03/27/2026 at 05:55 PM - DVFIV-1966 - pl-processing overlay needs height when grid is empty */
.d3view-studiesnew-study-items-view.pl-processing {
    min-height: 180px;
}

.d3view-studiesnew-study-items-view.studiesnew-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
    gap: 24px;
    padding: 12px 0 8px;
    box-sizing: border-box;
}

.d3view-studiesnew-study-items-view > .studiesnew-study-item {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 !important;
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Card shell
   ------------------------------------------------------------------------- */
/* Added by shashank2104 on 03/27/2026 at 05:27 PM - DVFIV-1966 - Card height follows content; avoid gap above footer */
.studiesnew-study-card {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    background: var(--d3v-bg-primary, #fff);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.studiesnew-study-item:hover .studiesnew-study-card {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.studiesnew-study-item.studiesnew-study-item--selected .studiesnew-study-card,
.studiesnew-study-item.ui-selected .studiesnew-study-card {
    box-shadow: 0 0 0 2px var(--d3v-accent, #3b82f6), 0 6px 20px rgba(59, 130, 246, 0.15);
    border-color: var(--d3v-accent-hover, #2563eb);
}

.studiesnew-study-item.ui-selecting .studiesnew-study-card {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.studiesnew-study-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: linear-gradient(180deg, var(--d3v-bg-secondary, #f8fafc) 0%, var(--d3v-bg-tertiary, #f1f5f9) 100%);
    border-radius: 10px 10px 0 0;
}

.studiesnew-study-card-header-left {
    flex: 1;
    min-width: 0;
}

.studiesnew-study-card-name {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--d3v-text-primary, #1e293b);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.studiesnew-study-card-name:hover {
    color: var(--d3v-accent-hover, #2563eb);
}

.studiesnew-study-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.studiesnew-study-card-actions .btn {
    padding: 4px 8px;
}

/* -------------------------------------------------------------------------
   Body / tags / stats / paths
   ------------------------------------------------------------------------- */
.studiesnew-study-card-body {
    padding: 10px 14px 8px;
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.studiesnew-study-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.studiesnew-study-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.studiesnew-study-tag-id {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.studiesnew-study-tag-type {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

.studiesnew-study-tag-scheduler {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.studiesnew-study-stats {
    padding: 6px 0 4px;
    border-top: 1px solid var(--d3v-bg-tertiary, #f1f5f9);
}

.studiesnew-study-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.studiesnew-study-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    font-variant: small-caps;
    color: var(--d3v-text-muted, #64748b);
}

.studiesnew-study-stat-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.studiesnew-study-stat-value .fa {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
}

.studiesnew-study-paths {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--d3v-bg-tertiary, #f1f5f9);
}

.studiesnew-study-path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.studiesnew-study-path-label {
    font-size: 11px;
    font-weight: 600;
    font-variant: small-caps;
    flex-shrink: 0;
    min-width: 64px;
    color: var(--d3v-text-muted, #64748b);
}

.studiesnew-study-path-value {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 4px 8px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: 6px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Footer actions (text links + icons, HPC-style)
   ------------------------------------------------------------------------- */
.studiesnew-study-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: 0 0 10px 10px;
}

.studiesnew-study-footer-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.studiesnew-study-footer-link:hover {
    color: var(--d3v-accent-hover, #2563eb);
    background: rgba(59, 130, 246, 0.08);
}

.studiesnew-study-footer-link-danger {
    color: var(--d3v-danger, #dc2626);
}

.studiesnew-study-footer-link-danger:hover {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.08);
}

/* -------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */
.studiesnew-empty-state {
    grid-column: 1 / -1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed var(--d3v-border-strong, #cbd5e1);
    border-radius: 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    padding: 24px;
}

.studiesnew-empty-icon {
    font-size: 4rem;
    color: var(--d3v-text-muted, #94a3b8);
    margin-bottom: 12px;
}

.studiesnew-empty-text {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--d3v-text-secondary, #475569);
    margin: 0;
}

/* -------------------------------------------------------------------------
   Floating bulk actions bar
   ------------------------------------------------------------------------- */
/* Added by shashank2104 on 03/27/2026 at 05:27 PM - DVFIV-1966 - Fixed to viewport so bar is visible when list is long */
.studiesnew-floating-actions-bar {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    min-height: 45px;
    min-width: 320px;
    max-width: calc(100% - 40px);
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 8px;
    box-shadow: var(--plugin-box-shadow-light);
    padding: 0 12px;
    animation: studiesnewFabIn 0.22s ease-out;
}

@keyframes studiesnewFabIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.studiesnew-fab-inner {
    min-height: 45px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.studiesnew-fab-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 4px !important;
    align-items: center;
    justify-content: flex-end;
}

.studiesnew-fab-actions .btn {
    font-size: 12px;
    white-space: nowrap;
}

.studiesnew-fab-dismiss {
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.studiesnew-fab-dismiss:hover {
    opacity: 1;
}

.studiesnew-fab-count {
    color: var(--d3v-text-primary, #1e293b);
}

/* /javascripts/plugins_src/d3storm/d3storm.css */
div.filestorm ul.files-list {
    overflow: auto;
}
div.filestorm ul.files-list li.file-item{
    padding: 3px;
    cursor: pointer;
    position: relative;
    width: auto!important;
    height: auto!important;
}
div.filestorm ul.files-list li.file-item.ui-draggable-dragging {
    z-index: 2;
}
div.filestorm ul.files-list li.file-item > div {
    padding: 3px;
    cursor: pointer;
}
div.filestorm ul.files-list li.file-item.clicked > div {
    background: steelblue!important;
}
div.filestorm ul.files-list li.file-item.clicked > div > a {
    color: #FFF;
}
div.filestorm ul.files-list li.file-item.clicked > .dir-toggle {
    color: #FFF!important;
}
div.filestorm ul.files-list #file-list-container:not(.has-context-menu) li.file-item > div:hover {
    background: #efefef;
}
div.filestorm ul.files-list li.file-item.hovered > div {
    background: #efefef!important;
}
div.filestorm ul.files-list li.file-item.disabled > div {
    cursor: not-allowed;
}
div.filestorm ul.files-list li.file-item.disabled > div * {
    color: #EEE;
}

div.filestorm li:not(.root) > ul.files-list {
    margin-left: 10px;
    max-height: 200px;
}
div.filestorm ul.files-list > li > div > a {
    text-decoration: none;
    padding-left: 14px;
}
div.filestorm li.dir > div > a > .file-icon {
    color: #44b7e6;
}
div.d3storm-container .filestorm-header {
    position: relative;
}
div.d3storm-container .filestorm .close {
    position: absolute;
    right: 9px;
    top: 1px;
    font-size: 2em;
}
div.d3storm-container .filestorm > .helper {
    position: absolute;
    right: 15px;
    bottom: 2px;
    color: darkslategray;
}
div.d3storm-container .filestorm > .container-fluid {
    padding: 0 15px;
}
div.d3storm-container .dir-toggle {
    cursor: pointer;
    color: gray;
    position: absolute;
    left: 5px;
    top: 4px;
    padding: 4px;
}
div.d3storm-container .dir-toggle:hover {
    color: darkslategray;
}
div.d3storm-container {
    width: 75%;
    background: #FFF;
    border: 1px solid #DDD;
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%,-50%);
}

div.filestorm .d3view-tab-manager-container {
    height: 100%!important;
}
div.filestorm .filestorm-header nav a.navbar-brand {
    padding: 12px!important;
}
div.filestorm li.divider {
    margin: 3px 0;
}

div.filestorm.filestorm-black .filestorm-header a:hover {
    background: #FFFFFF;
    color: #333;
}
div.filestorm.filestorm-black *:not(.ace_layer) {
    background: rgb(51,51,51);
    color: #FFF;
}

div.filestorm .d3view-textviz {
    padding: 0;
}

div.filestorm .ui-layout-container .ui-layout-center {
    padding: 0!important;
}
div.filestorm .ui-layout-pane {
    height: 100%!important;
}
div.filestorm .ui-layout-resizer {
    background: #efefef!important;
    width: 2px!important;
    height: 100%!important;
}
div.filestorm .ui-layout-resizer:hover {
    background: #ccc!important;
}
/* /javascripts/plugins_src/hpcconfigurator/hpcconfigurator.css */
/* =========================================================================
   VIEW BASE
   ========================================================================= */
   .d3view-hpcservers-edit-new-view.hpc-edit-new-view,
   .d3view-hpcservers-edit-new-view[data-view="edit-hpc-server-new"] {
       box-sizing: border-box;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-edit-new-tab-inner.full-h {
       min-height: 280px;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;
   }
   
   /* =========================================================================
      CRISP STEPPER NAV – responsive scrollable nav for 20+ steps
      Scoped so it only affects the HPC edit view's stepper.
      ========================================================================= */
   
   /* Make the stepper nav a flex row so items + scroll buttons sit side by side */
   .d3view-hpcservers-edit-new-view .gi-stepper-nav {
       display: flex;
       align-items: center;
       min-height: 44px;
       position: relative;
   }
   
   /* The UL: hide scrollbar, allow programmatic scrollLeft */
   .d3view-hpcservers-edit-new-view .gi-stepper-nav-items[data-crisp="true"] {
       flex: 1 1 auto;
       overflow-x: hidden;
       flex-wrap: nowrap;
       white-space: nowrap;
       /* Fade left/right edges to signal there are more steps (the "..." feel) */
       -webkit-mask-image: linear-gradient(
           to right,
           transparent 0%,
           #000 4%,
           #000 96%,
           transparent 100%
       );
       mask-image: linear-gradient(
           to right,
           transparent 0%,
           #000 4%,
           #000 96%,
           transparent 100%
       );
   }
   
   /* Nav items inside the crisp UL */
   .d3view-hpcservers-edit-new-view .gi-stepper-nav-items[data-crisp="true"] .gi-stepper-nav-item {
       display: inline-flex;
       align-items: center;
       vertical-align: top;
   }
   
   /* =========================================================================
      HPC STEP WRAPPERS – divs that contain Handsontable tables
      Apply all decorative chrome HERE, not on .handsontable itself,
      so HOT's internal absolute-positioned clones are never clipped.
      ========================================================================= */
   .d3view-hpcservers-edit-new-view .hpc-step-div {
       margin-bottom: 20px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-step-div label {
       display: block;
       font-weight: 600;
       color: #334155;
       margin-bottom: 8px;
       font-size: 13px;
   }
   
   /* The actual HOT mount point (e.g. <div id="queue">, <div id="interconnects">) */
   .d3view-hpcservers-edit-new-view .hpc-step-div > div[id] {
       min-height: 200px;
       border-radius: 10px;
       border: 1px solid #e2e8f0;
       box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
       overflow: hidden; /* clips the table neatly inside the rounded wrapper */
       background: #fff;
   }
   
   /* =========================================================================
      HANDSONTABLE – SAFE VISUAL-ONLY OVERRIDES
      Rules here MUST NOT set: overflow, height/line-height on td/th,
      display/position/width on .handsontable or its master/holder divs.
      Only: background, color, font, border-color, cursor.
      ========================================================================= */
   
   /* --- Column headers (safe: bg + color + font only) --- */
   .d3view-hpcservers-edit-new-view .handsontable thead th,
   .d3view-hpcservers-edit-new-view .handsontable .ht_clone_top thead th,
   .d3view-hpcservers-edit-new-view .handsontable .ht_clone_top_left_corner thead th {
       background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%) !important;
       color: #334155 !important;
       font-weight: 600 !important;
       font-size: 12px !important;
       letter-spacing: 0.01em;
       border-bottom-color: #d1d9e0 !important;
       border-right-color: #e2e8f0 !important;
   }

.d3view-hpcservers-edit-new-view .handsontable .htAutocompleteArrow {
     color: #334155 !important;
   }
.d3view-hpcservers-edit-new-view .handsontable .autocompleteEditor.handsontable.htMacScroll {
   height: 200px !important;
}

   /* Highlighted column header (selected column) */
   .d3view-hpcservers-edit-new-view .handsontable thead th.ht__highlight,
   .d3view-hpcservers-edit-new-view .handsontable .ht_clone_top thead th.ht__highlight {
       background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
       color: #fff !important;
       border-bottom-color: #1d4ed8 !important;
   }
   
   /* --- Row headers (safe: bg + color + font only) --- */
   .d3view-hpcservers-edit-new-view .handsontable tbody th,
   .d3view-hpcservers-edit-new-view .handsontable .ht_clone_left tbody th {
       background: #f8fafc !important;
       color: #64748b !important;
       font-weight: 500 !important;
       font-size: 12px !important;
       border-right-color: #dde3ea !important;
       border-bottom-color: #f1f5f9 !important;
   }
   
   /* Highlighted row header (selected row) */
   .d3view-hpcservers-edit-new-view .handsontable.ht__selection--rows tbody th.ht__highlight,
   .d3view-hpcservers-edit-new-view .handsontable .ht_clone_left tbody th.ht__highlight {
       background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
       color: #fff !important;
   }
   
   /* --- Body cells (safe: color + font + border-color only, NO height) --- */
   .d3view-hpcservers-edit-new-view .handsontable td,
   .d3view-hpcservers-edit-new-view .handsontable tbody td {
       color: #1e293b;
       font-size: 13px;
       border-bottom-color: #f1f5f9 !important;
       border-right-color: #f1f5f9 !important;
       background-color: #fff !important;
   }
   
   /* Alternating row shading */
   .d3view-hpcservers-edit-new-view .handsontable tbody tr:nth-child(even) td {
       background-color: #fafbfd !important;
   }
   
   /* Row hover – does not break HOT because background-color change is safe */
   .d3view-hpcservers-edit-new-view .handsontable tbody tr:hover td {
       background-color: #f0f6ff !important;
   }
   
   /* Selected area highlight */
   .d3view-hpcservers-edit-new-view .handsontable td.area {
       background-color: rgba(59, 130, 246, 0.1) !important;
       color: #1e40af;
   }
   
   /* Invalid cell */
   .d3view-hpcservers-edit-new-view .handsontable td.htInvalid {
       background-color: #fef2f2 !important;
       color: #b91c1c !important;
   }
   
   /* DVFIV-1932 - Faulty queue row (empty or duplicate name) */
   .d3view-hpcservers-edit-new-view .handsontable td.hpc-queue-row-error {
       background-color: #fef2f2 !important;
       color: #b91c1c !important;
   }
   
   /* Dimmed / placeholder */
   .d3view-hpcservers-edit-new-view .handsontable .htDimmed {
       color: #94a3b8 !important;
   }
   
   .d3view-hpcservers-edit-new-view .handsontable .htPlaceholder {
       color: #94a3b8 !important;
   }
   
   /* --- Column sorting indicators (safe: pseudo-element only) --- */
   .d3view-hpcservers-edit-new-view .handsontable .columnSorting:hover {
       text-decoration: none;
       color: #2563eb;
       cursor: pointer;
   }
   
   /* --- Editor input – only focus ring, no size changes --- */
   .d3view-hpcservers-edit-new-view .handsontableInput {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
       font-size: 13px !important;
       color: #1e293b !important;
       box-shadow: 0 0 0 2px #3b82f6 inset !important;
       border-radius: 4px !important;
   }
   
   /* --- Scrollbars inside wtHolder only (safe – HOT owns this element) --- */
   .d3view-hpcservers-edit-new-view .handsontable .wtHolder::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
   
   .d3view-hpcservers-edit-new-view .handsontable .wtHolder::-webkit-scrollbar-track {
       background: #f1f5f9;
   }
   
   .d3view-hpcservers-edit-new-view .handsontable .wtHolder::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 4px;
   }
   
   .d3view-hpcservers-edit-new-view .handsontable .wtHolder::-webkit-scrollbar-thumb:hover {
       background: #94a3b8;
   }
   
   /* --- Context menu – appended to body, safe to style (not clipped by any HOT container) --- */
   .d3view-hpcservers-edit-new-view .htContextMenu,
   .htContextMenu {
       border-radius: 10px !important;
       overflow: hidden !important;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.07) !important;
       border: 1px solid #e2e8f0 !important;
   }
   
   .htContextMenu table.htCore {
       border: none !important;
   }
   
   .htContextMenu table tbody tr td.htCustomMenuRenderer,
   .htContextMenu table tbody tr td {
       font-size: 13px !important;
       color: #334155 !important;
       border: none !important;
       border-bottom: 1px solid #f1f5f9 !important;
   }
   
   .htContextMenu table tbody tr td:hover,
   .htContextMenu table tbody tr td.current {
       background: #f1f5f9 !important;
       color: #0f172a !important;
   }
   
   .htContextMenu table tbody tr td.htSeparator {
       border-top: 1px solid #e2e8f0 !important;
   }
   
   .htContextMenu table tbody tr td.htDisabled {
       color: #94a3b8 !important;
   }
   
   /* --- Selection border color --- */
   .d3view-hpcservers-edit-new-view .handsontable .wtBorder.current,
   .d3view-hpcservers-edit-new-view .handsontable .wtBorder.area {
       background-color: #3b82f6 !important;
   }
   
   /* =========================================================================
      HPC EDIT SOLVER PANEL – Modern Solver Configuration (#hpcserver_editsolver)
      Scoped under .d3view-hpcservers-edit-new-view .hpc-editsolver-panel.
      Aligned with simlytiks-modern.css (sl-*) design tokens.
      Added by shashank2104 on 03/02/2026 - Modernize solver config UI
      ========================================================================= */
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel {
       --hpc-editsolver-bg: #FFFFFF;
       --hpc-editsolver-bg-secondary: #F8FAFC;
       --hpc-editsolver-bg-tertiary: #F1F5F9;
       --hpc-editsolver-text: #1E293B;
       --hpc-editsolver-text-secondary: #475569;
       --hpc-editsolver-text-muted: #94A3B8;
       --hpc-editsolver-border: #E2E8F0;
       --hpc-editsolver-accent: #3B82F6;
       --hpc-editsolver-accent-hover: #2563EB;
       --hpc-editsolver-success: #10B981;
       --hpc-editsolver-warning: #F59E0B;
       --hpc-editsolver-danger: #EF4444;
       --hpc-editsolver-radius-sm: 6px;
       --hpc-editsolver-radius-md: 8px;
       --hpc-editsolver-radius-lg: 12px;
       --hpc-editsolver-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
       --hpc-editsolver-shadow-md: 0 4px 12px rgba(0,0,0,0.12);
       --hpc-editsolver-shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
       --hpc-editsolver-transition: all 0.15s ease;
       --hpc-editsolver-input-height: 40px;
       --hpc-editsolver-input-padding: 10px 14px;
       --hpc-editsolver-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.2);
       box-sizing: border-box;
   }
   
   /* Import JSON button – modern success CTA */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .import-solver {
       display: inline-flex !important;
       align-items: center;
       width: 100%;
       justify-content: center;
       gap: 8px;
       padding: 12px 20px !important;
       border-radius: var(--hpc-editsolver-radius-md) !important;
       border: none !important;
       background: linear-gradient(135deg, var(--hpc-editsolver-success) 0%, #059669 100%) !important;
       color: #fff !important;
       font-weight: 600 !important;
       font-size: 14px !important;
       box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
       transition: var(--hpc-editsolver-transition) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .import-solver:hover {
       box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45) !important;
       transform: translateY(-1px);
       color: #fff !important;
   }
   
   /* Space below Import row so it doesn’t crowd name/desc or align with left list */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel > .row:first-child {
       margin-bottom: 16px;
   }
   
   /* Solver identity card (Name + Description) – extra margin below for separation from All Attributes */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer {
       background: var(--hpc-editsolver-bg);
       border: 1px solid var(--hpc-editsolver-border);
       border-radius: var(--hpc-editsolver-radius-lg);
       box-shadow: var(--hpc-editsolver-shadow-sm);
       padding: 24px !important;
       margin-bottom: 28px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer h3 {
       font-size: 12px !important;
       font-weight: 600 !important;
       color: var(--hpc-editsolver-text-secondary) !important;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       margin: 0 0 8px 0 !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer .form-control {
       height: var(--hpc-editsolver-input-height) !important;
       padding: var(--hpc-editsolver-input-padding) !important;
       border: 1.5px solid var(--hpc-editsolver-border) !important;
       border-radius: var(--hpc-editsolver-radius-md) !important;
       font-size: 14px !important;
       color: var(--hpc-editsolver-text) !important;
       background: var(--hpc-editsolver-bg) !important;
       transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer .form-control:focus {
       border-color: var(--hpc-editsolver-accent) !important;
       box-shadow: var(--hpc-editsolver-focus-ring) !important;
       outline: none !important;
   }
   
   /* All Attributes section */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea {
       padding: 24px !important;
       background: var(--hpc-editsolver-bg-secondary);
       border: 1px solid var(--hpc-editsolver-border);
       border-radius: var(--hpc-editsolver-radius-lg);
       box-shadow: var(--hpc-editsolver-shadow-sm);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea .row {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       margin-bottom: 16px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea h1 {
       font-size: 18px !important;
       font-weight: 700 !important;
       color: var(--hpc-editsolver-text) !important;
       margin: 0 !important;
       letter-spacing: -0.02em;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea .addattribute {
       display: inline-flex !important;
       align-items: center;
       gap: 6px;
       padding: 8px 16px !important;
       border-radius: var(--hpc-editsolver-radius-md) !important;
       border: none !important;
       background: linear-gradient(135deg, var(--hpc-editsolver-warning) 0%, #D97706 100%) !important;
       color: #fff !important;
       font-weight: 600 !important;
       font-size: 13px !important;
       box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
       transition: var(--hpc-editsolver-transition) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea .addattribute:hover {
       box-shadow: 0 4px 10px rgba(245, 158, 11, 0.45) !important;
       transform: translateY(-1px);
       color: #fff !important;
   }
   
   /* Attributes table – modern data grid */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes {
       margin-top: 12px;
       overflow-x: auto;
       border-radius: var(--hpc-editsolver-radius-md);
       border: 1px solid var(--hpc-editsolver-border);
       background: var(--hpc-editsolver-bg);
       box-shadow: var(--hpc-editsolver-shadow-sm);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table {
       margin: 0 !important;
       border: none !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table thead th {
       background: linear-gradient(180deg, var(--hpc-editsolver-bg-secondary) 0%, var(--hpc-editsolver-bg-tertiary) 100%) !important;
       color: var(--hpc-editsolver-text-secondary) !important;
       font-weight: 600 !important;
       font-size: 11px !important;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       padding: 12px 14px !important;
       border-bottom: 2px solid var(--hpc-editsolver-border) !important;
       border-right: 1px solid var(--hpc-editsolver-border) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table thead th:last-child {
       border-right: none;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody td {
       padding: 12px 14px !important;
       font-size: 13px !important;
       color: var(--hpc-editsolver-text) !important;
       border-bottom: 1px solid var(--hpc-editsolver-border) !important;
       border-right: 1px solid var(--hpc-editsolver-border) !important;
       background: var(--hpc-editsolver-bg) !important;
       vertical-align: middle !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody td:last-child {
       border-right: none;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody tr:nth-child(even) td {
       background: var(--hpc-editsolver-bg-secondary) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody tr:hover td {
       background: var(--hpc-editsolver-bg-tertiary) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody tr.attributeItem {
       cursor: pointer;
       transition: var(--hpc-editsolver-transition);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .primary_key h3,
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .primary_key H3 {
       font-size: 13px !important;
       font-weight: 600 !important;
       color: var(--hpc-editsolver-text) !important;
       margin: 0 !important;
       font-family: inherit;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .label.label-danger {
       background: var(--hpc-editsolver-danger) !important;
       color: #fff !important;
       border-radius: 4px;
       padding: 2px 8px;
       font-size: 11px;
       font-weight: 600;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .label.label-default {
       background: var(--hpc-editsolver-bg-tertiary) !important;
       color: var(--hpc-editsolver-text-secondary) !important;
       border-radius: 4px;
       padding: 2px 8px;
       font-size: 11px;
       font-weight: 500;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-check {
       color: var(--hpc-editsolver-success);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-times,
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-cross {
       color: var(--hpc-editsolver-text-muted);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-pencil.editattribute,
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-trash-o {
       padding: 6px 8px;
       border-radius: var(--hpc-editsolver-radius-sm);
       color: var(--hpc-editsolver-text-secondary);
       transition: var(--hpc-editsolver-transition);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-pencil.editattribute:hover {
       color: var(--hpc-editsolver-accent);
       background: rgba(59, 130, 246, 0.1);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table .fa-trash-o:hover {
       color: var(--hpc-editsolver-danger);
       background: rgba(239, 68, 68, 0.1);
   }
   
   /* Editing Attribute form (.solver-attributes-new-input) */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input {
       background: var(--hpc-editsolver-bg);
       border: 1px solid var(--hpc-editsolver-border);
       border-radius: var(--hpc-editsolver-radius-lg);
       box-shadow: var(--hpc-editsolver-shadow-md);
       padding: 24px !important;
       margin-top: 20px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .page-header {
       border-bottom: 2px solid var(--hpc-editsolver-border) !important;
       padding-bottom: 16px !important;
       margin: 0 0 20px 0 !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .page-header h2 {
       font-size: 16px !important;
       font-weight: 700 !important;
       color: var(--hpc-editsolver-text) !important;
       margin: 0 !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .back-to-all-attributes {
       border-radius: var(--hpc-editsolver-radius-sm) !important;
       border: 1px solid var(--hpc-editsolver-border) !important;
       padding: 6px 14px !important;
       font-weight: 500 !important;
       transition: var(--hpc-editsolver-transition) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .back-to-all-attributes:hover {
       background: var(--hpc-editsolver-bg-tertiary) !important;
       border-color: var(--hpc-editsolver-text-muted) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input h3 {
       font-size: 12px !important;
       font-weight: 600 !important;
       color: var(--hpc-editsolver-text-secondary) !important;
       text-transform: uppercase;
       letter-spacing: 0.04em;
       margin: 0 0 8px 0 !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .form-control {
       height: var(--hpc-editsolver-input-height) !important;
       padding: var(--hpc-editsolver-input-padding) !important;
       border: 1.5px solid var(--hpc-editsolver-border) !important;
       border-radius: var(--hpc-editsolver-radius-md) !important;
       font-size: 14px !important;
       color: var(--hpc-editsolver-text) !important;
       background: var(--hpc-editsolver-bg) !important;
       transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .form-control:focus {
       border-color: var(--hpc-editsolver-accent) !important;
       box-shadow: var(--hpc-editsolver-focus-ring) !important;
       outline: none !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .attribute_save {
       border-radius: var(--hpc-editsolver-radius-md) !important;
       border: none !important;
       padding: 10px 20px !important;
       font-weight: 600 !important;
       background: linear-gradient(135deg, var(--hpc-editsolver-warning) 0%, #D97706 100%) !important;
       color: #fff !important;
       box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
       transition: var(--hpc-editsolver-transition) !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .attribute_save:hover {
       box-shadow: 0 4px 10px rgba(245, 158, 11, 0.45) !important;
       transform: translateY(-1px);
       color: #fff !important;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .solver-attributes-new-input .row {
       margin-bottom: 16px;
   }
   
   /* Added by shashank2104 on 03/02/2026 - Editable values table (id/label) – same modern look as env vars table */
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table-wrap {
       margin-top: 8px;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-add-row {
       margin-bottom: 12px;
       border-radius: var(--hpc-editsolver-radius-md);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table {
       margin-bottom: 0;
       background: var(--hpc-editsolver-bg);
       border-radius: var(--hpc-editsolver-radius-md);
       border: 1px solid var(--hpc-editsolver-border);
       box-shadow: var(--hpc-editsolver-shadow-sm);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table thead th {
       background: linear-gradient(180deg, var(--hpc-editsolver-bg-secondary) 0%, var(--hpc-editsolver-bg-tertiary) 100%);
       color: var(--hpc-editsolver-text-secondary);
       border-bottom: 2px solid var(--hpc-editsolver-border);
       border-right: 1px solid var(--hpc-editsolver-border);
       font-weight: 600;
       padding: 10px 14px;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table thead th:last-child {
       border-right: none;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table tbody td {
       padding: 8px 12px;
       color: var(--hpc-editsolver-text);
       border-bottom: 1px solid var(--hpc-editsolver-border);
       border-right: 1px solid var(--hpc-editsolver-border);
       background: var(--hpc-editsolver-bg);
       vertical-align: middle;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table tbody td:last-child {
       border-right: none;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table tbody tr:nth-child(even) td {
       background: var(--hpc-editsolver-bg-secondary);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table tbody tr:hover td {
       background: var(--hpc-editsolver-bg-tertiary);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table .hpc-values-remove-row {
       border-radius: var(--hpc-editsolver-radius-sm);
       color: var(--hpc-editsolver-text-secondary);
       transition: var(--hpc-editsolver-transition);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table .hpc-values-remove-row:hover {
       color: var(--hpc-editsolver-danger);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table tbody tr.hpc-values-row-duplicate-id td {
       background: rgba(217, 83, 79, 0.08);
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .hpc-values-table .hpc-values-id-dup-msg {
       display: block;
       margin-top: 2px;
   }

   /** Added by shashank2104 on 03/03/2026 - DVFIV-1932 - Solver binaries Handsontable: highlight duplicate version_name rows (whole row, like queues); empty rows OK */
   .d3view-hpcservers-edit-new-view .handsontable tbody .hpc-solver-binaries-row-error {
       background: rgba(217, 83, 79, 0.12) !important;
   }

   /** Added by shashank2104 on 03/03/2026 - DVFIV-1932 - Available values header: title left, solver_version toggle button right */
   .d3view-hpcservers-edit-new-view .hpc-available-values-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-values-header .hpc-available-values-title {
       margin: 0 0 0.5em 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-values-header .hpc-solver-version-toggle-values-mode.pull-right {
       margin-left: auto;
       flex-shrink: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-values-header .hpc-solver-version-toggle-values-mode.hidden {
       display: none !important;
   }

   /** Added by shashank2104 on 03/03/2026 - DVFIV-1932 - Data-driven block header: title left, "Use custom values" button right (solver_version) */
   .d3view-hpcservers-edit-new-view .hpc-datadriven-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 4px;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-header h3 {
       margin: 0 0 0.5em 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-solver-version-toggle-wrap .hpc-solver-version-toggle-in-datadriven.hidden {
       display: none !important;
   }

   /* =========================================================================
      Solvers Configuration step – left sidebar (ul.solversList) and import button
      Prevent overlap between header/Add row and solver list; clear spacing.
      ========================================================================= */
   
   .d3view-hpcservers-edit-new-view .column-1 .divider {
       margin-bottom: 12px;
   }
   
   .d3view-hpcservers-edit-new-view .column-1 ul.solversList {
       margin-top: 12px;
       padding-left: 0;
       list-style: none;
   }
   
   .d3view-hpcservers-edit-new-view .column-1 ul.solversList .solverItem {
       margin-bottom: 4px;
   }
   
   /* Extra spacing so main content import button and left list don’t feel cramped */
   .d3view-hpcservers-edit-new-view .column-1 {
       padding-top: 8px;
       padding-bottom: 16px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column ul.solversList .solverItem {
       margin-bottom: 4px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-row {
       display: flex;
       align-items: stretch;
       overflow: auto;
       margin: 0;
       height: 100%;

   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-row .row {
        margin: 0;
   }
.d3view-hpcservers-edit-new-view .hpc-solvers-list-row .hpc-editsolver-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-row .hpc-editsolver-panel .attributesContainer {
    flex: 1;
    overflow: auto;
    margin-bottom: 0;
}
   .d3view-hpcservers-edit-new-view .hpc-solvers-column-1-wrap {
       display: flex;
       align-items: stretch;
       position: relative;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column {
       padding-top: 8px;
       padding-bottom: 16px;
       height: 100%!important;
       overflow-x: hidden;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-title {
       margin: 0 0 8px 0;
       font-size: 1.1em;
       font-weight: 600;
   }
   .d3view-hpcservers-edit-new-view .hpc-solver-item-link {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 8px 10px;
       text-decoration: none;
       color: inherit;
       border-radius: 4px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solver-item-link:hover {
       background: #f5f5f5;
   }
   .d3view-hpcservers-edit-new-view .solversList .solverItem.active .hpc-solver-item-link {
       background: #e7f1ff;
       font-weight: 500;
   }
.d3view-hpcservers-edit-new-view .hpc-values-table thead {
    position: sticky;
    top: 0;
    background:#FFF;
    z-index: 20;
}
   .d3view-hpcservers-edit-new-view .hpc-solver-item-name {
       flex: 1;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   .d3view-hpcservers-edit-new-view .hpc-solver-item-actions {
       flex-shrink: 0;
       margin-left: 4px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-column-1-resize-handle {
       width: 6px;
       cursor: col-resize;
       flex-shrink: 0;
       background: transparent;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-column-1-resize-handle:hover,
   .d3view-hpcservers-edit-new-view .hpc-solvers-column-1-resize-handle.resizing {
       background: rgba(0, 0, 0, 0.08);
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-editor-column {
       flex: 1;
       min-width: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-editor-column > .solver-editor {
       height: 100%;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer > div.row:first-child {
       margin-bottom: 20px;
   }
   
   /** DVFIV-1932 - Available values read-only display (pills) in Edit Attribute form */
   .d3view-hpcservers-edit-new-view .hpc-available-values {
       min-height: 34px;
       padding: 8px 12px;
       background: #f8f9fa;
       border: 1px solid #dee2e6;
       border-radius: 4px;
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       align-items: center;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-value-pill {
       display: inline-block;
       padding: 4px 10px;
       font-size: 13px;
       background: #e9ecef;
       color: #495057;
       border-radius: 16px;
       white-space: nowrap;
       cursor: pointer;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-value-pill:hover {
       background: #dee2e6;
       color: #212529;
   }
   .d3view-hpcservers-edit-new-view .hpc-available-values:empty::before {
       content: "—";
       color: #6c757d;
       font-style: italic;
   }
   
   /** DVFIV-1932 - Edit Attribute sidebar (modern rich UI, Save/Close) */
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar {
       position: absolute;
       right: 0;
       top: 0;
       height: 100%;
       width: 0;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       background: #fff;
       border-left: 1px solid #dee2e6;
       box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
       transition: width 0.25s ease;
       z-index: 100;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar.expanded {
       width: 50%;
       min-width: 380px;
       max-width: 720px;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar-header {
       flex-shrink: 0;
       padding: 12px 16px;
       border-bottom: 1px solid #dee2e6;
       background: #f8f9fa;
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar-title {
       font-weight: 600;
       font-size: 1.05em;
       color: #333;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar-actions {
       display: flex;
       gap: 8px;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar-body {
       flex: 1;
       overflow: auto;
       min-height: 0;
       padding: 16px;
   }
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar-body .row {
    margin-bottom: 30px!important;
}
   /** When attribute form is in sidebar, hide Back and duplicate Save/Cancel so only header Save/Close show */
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar.expanded .hpc-edit-attribute-sidebar-body .new_input .page-header,
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar.expanded .hpc-edit-attribute-sidebar-body .new_input .back-to-all-attributes,
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar.expanded .hpc-edit-attribute-sidebar-body .new_input .attribute_save,
   .d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar.expanded .hpc-edit-attribute-sidebar-body .new_input .attribute_cancel {
       display: none !important;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody tr.hpc-attribute-row-highlight {
       background: #e7f1ff !important;
   }
   .d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .table tbody tr.hpc-attribute-row-highlight td {
       background: #e7f1ff !important;
   }
   
   /* Added by shashank2104 on 03/02/2026 - DVFIV-1932 - Env vars table editor panel (key/value table) */
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel .attributesContainer,
   .hpc-envvars-editor-panel .attributesContainer {
       background: var(--hpc-editsolver-bg, #FFF);
       border: 1px solid var(--hpc-editsolver-border, #E2E8F0);
       border-radius: var(--hpc-editsolver-radius-lg, 12px);
       padding: 24px;
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel .existingAttributes,
   .hpc-envvars-editor-panel .existingAttributes {
       margin-bottom: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel .existingAttributes thead th,
   .hpc-envvars-editor-panel .existingAttributes thead th {
       background: var(--hpc-editsolver-bg-secondary, #F8FAFC);
       color: var(--hpc-editsolver-text-secondary, #475569);
       border-bottom: 2px solid var(--hpc-editsolver-border, #E2E8F0);
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel .form-control,
   .hpc-envvars-editor-panel .form-control {
       height: var(--hpc-editsolver-input-height, 40px);
       padding: var(--hpc-editsolver-input-padding, 10px 14px);
       border: 1.5px solid var(--hpc-editsolver-border, #E2E8F0);
       border-radius: var(--hpc-editsolver-radius-md, 8px);
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel .hpc-envvars-add-row,
   .hpc-envvars-editor-panel .hpc-envvars-add-row {
       border-radius: var(--hpc-editsolver-radius-md, 8px);
   }
   
   /* DVFIV-1932 - Tab that has env vars sidebar: position relative so overlay sidebar is positioned relative to tab */
   .d3view-hpcservers-edit-new-view .hpc-tab-has-envvars-sidebar {
       position: relative;
   }
   
   /* DVFIV-1932 - Env vars sidebar overlay: absolute position, slides in from right; left panel does not scroll or resize */
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-overlay {
       position: absolute;
       right: 0;
       top: 0;
       bottom: 0;
       width: 0;
       overflow: hidden;
       transition: width 0.2s ease-out;
       z-index: 200;
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-overlay.hpc-envvars-sidebar-open {
       box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
   }
   
   
   .d3view-hpcservers-edit-new-view .hpc-inline-envvars-editor-wrap .hpc-envvars-editor-panel .row {
       padding: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-inline-envvars-editor-wrap .hpc-envvars-editor-panel > .row .attributesContainer {
       padding: 0;
       border: none;
   }
   .d3view-hpcservers-edit-new-view .hpc-inline-envvars-editor-wrap .hpc-envvars-editor-panel .hpc-envvars-add-row {
       margin: 10px 0;
   }
   
   
   /* DVFIV-1932 - Env vars sidebar (same rich modern UI as EditSolver / Edit Attribute sidebar) */
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-container {
       background: var(--hpc-editsolver-bg, #FFF);
       border-left: 1px solid var(--hpc-editsolver-border, #E2E8F0);
       box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-header {
       background: var(--hpc-editsolver-bg-secondary, #F8FAFC);
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-title {
       font-weight: 600;
       font-size: 1.05em;
       color: var(--hpc-editsolver-text, #1E293B);
   }
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-actions {
       display: flex;
       gap: 8px;
       align-items: center;
   }
   /** When env vars editor is in sidebar, hide footer Save/Close so only header Save/Close show (same as Edit Attribute sidebar) */
   .d3view-hpcservers-edit-new-view .hpc-envvars-sidebar-content .hpc-envvars-editor-panel .attributesContainer > .row:last-child {
       display: none !important;
   }
   
   /** DVFIV-1932 - Inline env vars editor: hide Save/Close footer; updates via onChange */
   .d3view-hpcservers-edit-new-view .hpc-envvars-editor-panel.hpc-envvars-inline .attributesContainer > .row:last-child {
       display: none !important;
   }
   
   /* Added by shashank2104 on 03/02/2026 - Submit/Job command steps: Available variables header + sidebar */
   .d3view-hpcservers-edit-new-view .hpc-step-has-vars-sidebar {
       position: relative;
   }
   .d3view-hpcservers-edit-new-view .hpc-step-command-header {
       margin-bottom: 16px;
       padding-bottom: 12px;
       border-bottom: 1px solid var(--hpc-editsolver-border, #E2E8F0);
   }
   .d3view-hpcservers-edit-new-view .hpc-available-vars-btn {
       float: right;
       border-radius: var(--hpc-editsolver-radius-md, 8px);
       font-weight: 500;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-wrap {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 100;
       pointer-events: none;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-wrap.hpc-vars-sidebar-open {
       pointer-events: auto;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-wrap .hpc-vars-sidebar {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       width: 300px;
       max-width: 90vw;
       background: var(--hpc-editsolver-bg, #FFF);
       box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
       display: flex;
       flex-direction: column;
       transform: translateX(100%);
       transition: transform 0.3s ease;
       z-index: 101;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-wrap.hpc-vars-sidebar-open .hpc-vars-sidebar {
       transform: translateX(0);
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 16px;
       background: var(--hpc-editsolver-bg-secondary, #F8FAFC);
       border-bottom: 1px solid var(--hpc-editsolver-border, #E2E8F0);
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-title {
       margin: 0;
       font-weight: 600;
       font-size: 1.05em;
       color: var(--hpc-editsolver-text, #1E293B);
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-close {
       background: none;
       border: none;
       padding: 6px 8px;
       color: #64748B;
       cursor: pointer;
       border-radius: 6px;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-close:hover {
       background: rgba(0, 0, 0, 0.06);
       color: #1E293B;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-body {
       flex: 1;
       overflow-y: auto;
       padding: 16px;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 12px;
   }
   .d3view-hpcservers-edit-new-view .hpc-vars-sidebar-tags .label.ta-tag {
       user-select: none;
   }
   
   /* =========================================================================
      SOLVERS LIST (left column: list + actions dropdown)
      Scoped under .d3view-hpcservers-edit-new-view. Dropdown menu when moved
      to body uses .hpc-solver-actions-menu-in-body (see body rule below).
      ========================================================================= */
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList {
       padding-left: 0;
       padding-right: 0;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem {
       position: relative;
       list-style: none;
       margin-bottom: 2px;
       overflow: visible;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-inner {
       position: relative;
       display: block;
       padding: 8px 14px;
       min-height: 36px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem a.hpc-solver-item-link {
       display: block;
       padding-right: 36px;
       text-decoration: none;
       color: inherit;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-name {
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-actions {
       position: absolute;
       right: 8px;
       top: 50%;
       transform: translateY(-50%);
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-actions .dropdown-menu {
       min-width: 140px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-row .hpc-solvers-list-column > .row:first-child {
       padding: 8px 14px;
   }
   
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-title {
       margin: 0;
   }
   
   /* Empty state placeholder when no solvers in collection – takes over entire row */
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-row.hpc-solvers-row-empty .hpc-solvers-column-1-wrap,
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-row.hpc-solvers-row-empty .hpc-solvers-editor-column {
       display: none !important;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state-wrapper {
       flex: 1 1 100%;
       min-width: 0;
       min-height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 24px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-list-column.hpc-solvers-list-empty .solversList {
       display: none;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       min-height: 200px;
       padding: 32px 24px;
       background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
       border: 1px dashed #cbd5e1;
       border-radius: 10px;
       text-align: center;
       max-width: 420px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state-icon {
       width: 48px;
       height: 48px;
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #e2e8f0;
       border-radius: 12px;
       color: #64748b;
       font-size: 22px;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state-message {
       margin: 0 0 4px 0;
       font-size: 15px;
       font-weight: 600;
       color: #334155;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state-hint {
       margin: 0 0 16px 0;
       font-size: 13px;
       color: #64748b;
   }
   .d3view-hpcservers-edit-new-view .hpc-solvers-empty-state .add-new-solver {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }
   
   /* Solver actions dropdown when appended to body (avoids overflow clip in column) */
   body > .dropdown-menu.hpc-solver-actions-menu-in-body {
       display: block;
       min-width: 140px;
       z-index: 1054!important;
   }

   /* =========================================================================
      Data-driven values table (solver_mpi, solver_queues, solver_type) – DVFIV-1932
      Selectable rows + Info expand
      ========================================================================= */
   .d3view-hpcservers-edit-new-view .hpc-datadriven-table-container {
       max-height: 280px;
       overflow: auto;
       margin-top: 8px;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-table {
       margin-bottom: 0;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-row {
       cursor: pointer;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-row:hover {
       background-color: #f8fafc;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-row.ui-selected,
   .d3view-hpcservers-edit-new-view .hpc-datadriven-row.ui-selecting {
       background-color: #e0f2fe;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-info-td {
       background-color: #f1f5f9;
       padding: 10px 12px;
       border-top: none;
       vertical-align: top;
   }
   .d3view-hpcservers-edit-new-view .hpc-datadriven-info-pre {
       margin: 0;
       white-space: pre-wrap;
       word-break: break-word;
       font-size: 12px;
       color: #475569;
   }
   .d3view-hpcservers-edit-new-view .hpc-step-div > label {
    display: none!important;
}

/** Added by shashank2104 on 03/03/2026 - DVFIV-1932 - Filters container height and show/hide for remote_lookup (FlexFilter) */
.d3view-hpcservers-edit-new-view .hpc-attr-remote-lookup-filters-wrap {
    overflow: hidden;
}
.d3view-hpcservers-edit-new-view .hpc-attr-remote-lookup-filters-wrap.visible {
    min-height: 260px;
}
.d3view-hpcservers-edit-new-view .hpc-attr-remote-lookup-filters-wrap .hpc-attr-remote-lookup-filters,
.d3view-hpcservers-edit-new-view .hpc-attr-remote-lookup-filters-wrap .rm-filters {
    min-height: 220px;
}
.d3view-hpcservers-edit-new-view .hpc-attr-remote-lookup-filters-wrap .rm-filters.flexFilters {
    height: 100%;
}

/* =========================================================================
   HPC Server Item Card – modernized list item (Option A, RBAC-consistent)
   Scoped by #admin-hpcserver (prod container ID). Added by shashank2104 on 03/04/2026 - DVFIV-1932
   ========================================================================= */
div#admin-hpcserver .hpc-servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32%, 1fr));
    gap: 30px;
    padding: 15px 0;
}

/* Grid items: reset Bootstrap col-md-2 (float/width) so each takes one cell and does not overlap */
#admin-hpcserver .hpc-servers-grid > .serverItem {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 !important;
    border-radius: 10px;
    box-sizing: border-box;
}

/* Scoped from .serverItem inward; outer grid not in our control */
#admin-hpcserver .serverItem .hpc-server-item-card {
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    background: #fff;
    transition: box-shadow 0.2s ease;
}

#admin-hpcserver .serverItem .hpc-server-item-card:hover {
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

#admin-hpcserver .hpc-server-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 10px 10px 0 0;
}

#admin-hpcserver .hpc-server-item-card-header-left {
    flex: 1;
    min-width: 0;
    align-items: center;
}

#admin-hpcserver .hpc-server-item-card-header-left .hpc-server-item-name {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin: 0;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

#admin-hpcserver .hpc-server-item-card-header-left .hpc-server-item-name:hover {
    color: #2563eb;
}

#admin-hpcserver .hpc-server-item-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#admin-hpcserver .hpc-server-item-card-actions .btn {
    padding: 4px 8px;
}

#admin-hpcserver .hpc-server-item-card-body {
    padding: 10px 14px 8px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Subtitle: "V7 Prod (PBS)" */
#admin-hpcserver .hpc-server-item-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tag pills row */
#admin-hpcserver .hpc-server-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
#admin-hpcserver .hpc-server-item-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
}
#admin-hpcserver .hpc-server-item-tag-name {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}
#admin-hpcserver .hpc-server-item-tag-id {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}
#admin-hpcserver .hpc-server-item-tag-type {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}
#admin-hpcserver .hpc-server-item-tag-scheduler {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

/* Stats row: Solvers / Queues / Submithosts / Status */
#admin-hpcserver .hpc-server-item-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 4px;
    border-top: 1px solid #f1f5f9;
}
#admin-hpcserver .hpc-server-item-stat {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}
#admin-hpcserver .hpc-server-item-stat-label {
    font-size: 11px;
    font-weight: 600;
    /* color: #64748b; */
    /* text-transform: uppercase; */
    /* letter-spacing: 0.04em; */
    font-variant: small-caps;
}
#admin-hpcserver .hpc-server-item-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
#admin-hpcserver .hpc-server-item-stat-value .fa {
    font-size: 12px;
    color: #94a3b8;
}

/* Status button: clickable stat that toggles the collapsible detail */
#admin-hpcserver .hpc-server-item-stat-status-btn {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
#admin-hpcserver .hpc-server-item-stat-status-btn:hover {
    background: #f0f6ff;
    color: #2563eb;
}
#admin-hpcserver .hpc-server-item-stat-status-btn:hover .fa {
    color: #2563eb;
}

/* Collapsible status detail panel (cores progress + jobs) */
#admin-hpcserver .hpc-server-item-status-detail {
    padding: 8px 0 4px;
    border-top: 1px solid #f1f5f9;
}
#admin-hpcserver .hpc-server-item-status-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
#admin-hpcserver .hpc-server-item-status-detail-title {
    font-size: 10px;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#admin-hpcserver .hpc-server-item-refresh-status .fa-spin {
    animation: fa-spin 0.8s linear infinite;
}
#admin-hpcserver .hpc-server-item-status-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
#admin-hpcserver .hpc-server-item-status-detail-row:last-child {
    margin-bottom: 0;
}
#admin-hpcserver .hpc-server-item-status-detail-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    min-width: 64px;
}
/* Progress bar: Bootstrap 3 .progress overrides scoped to card */
#admin-hpcserver .hpc-server-item-progress {
    flex: 1;
    min-width: 0;
    height: 16px;
    margin: 0;
    border-radius: 8px;
    background: #f1f5f9;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
}
#admin-hpcserver .hpc-server-item-progress .progress-bar {
    font-size: 9px;
    font-weight: 600;
    line-height: 16px;
    box-shadow: none;
}
#admin-hpcserver .hpc-server-item-progress .progress-bar-success {
    background: #10b981;
}
#admin-hpcserver .hpc-server-item-progress .progress-bar-info {
    background: #60a5fa;
}
#admin-hpcserver .hpc-server-item-progress .progress-bar-danger {
    background: #f87171;
}
/* Jobs badges */
#admin-hpcserver .hpc-server-item-status-jobs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
#admin-hpcserver .hpc-server-item-status-jobs .label {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}
#admin-hpcserver .hpc-server-item-status-jobs .label-success {
    background: #dcfce7;
    color: #166534;
}
#admin-hpcserver .hpc-server-item-status-jobs .label-warning {
    background: #fef3c7;
    color: #92400e;
}

/* Path rows: Stage DIR / SUBMIT */
#admin-hpcserver .hpc-server-item-paths {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}
#admin-hpcserver .hpc-server-item-path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
#admin-hpcserver .hpc-server-item-path-label {
    font-size: 11px;
    font-weight: 600;
    /* color: #64748b; */
    font-variant: small-caps;
    /* letter-spacing: 0.02em; */
    flex-shrink: 0;
    min-width: 44px;
}
#admin-hpcserver .hpc-server-item-path-value {
    flex: 1;
    min-width: 0;
    padding: 3px 8px;
    font-size: 11px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    color: #1e293b;
    background: #f8fafc;
    border: none;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin: 0;
}
#admin-hpcserver .hpc-server-item-path-more {
    flex-shrink: 0;
    padding: 2px 6px;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #fff;
}
#admin-hpcserver .hpc-server-item-path-more:hover {
    color: #334155;
    border-color: #cbd5e1;
    background: #f8fafc;
}

#admin-hpcserver .hpc-server-item-card-footer {
    padding: 6px 10px;
    border-top: 1px solid #e2e8f0;
    background: #fafbfd;
    border-radius: 0 0 10px 10px;
    position: relative;
    bottom: unset;
}


#admin-hpcserver .hpc-server-item-footer-actions .btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

/* DVFIV-1946 - Custom table-type column edit button */
.d3view-hpcservers-edit-new-view [class*="hpc-custom-col-env-edit-"] {
    cursor: pointer;
    margin-left: 4px;
}

/* DVFIV-1954 - Selectable states and floating actions bar for server list */
#admin-hpcserver .serverItem.ui-selected .hpc-server-item-card {
    border: 2px solid var(--plugin-primary-color, #5b5ea6);
    box-shadow: 0 0 0 3px rgba(91, 94, 166, 0.15);
}
#admin-hpcserver .serverItem.ui-selecting .hpc-server-item-card {
    border: 2px solid var(--plugin-primary-color, #5b5ea6);
    opacity: 0.75;
}
#admin-hpcserver .hpcsrv-floating-actions-bar {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    height: 45px;
    min-width: 320px;
    max-width: calc(100% - 40px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    padding: 0 12px;
    display: flex;
    align-items: center;
}
#admin-hpcserver .hpcsrv-floating-actions-bar .hpcsrv-fab-actions .btn {
    font-size: 12px;
    white-space: nowrap;
}
#admin-hpcserver .hpcsrv-floating-actions-bar .hpcsrv-fab-dismiss {
    opacity: 0.6;
    transition: opacity 0.15s;
}
#admin-hpcserver .hpcsrv-floating-actions-bar .hpcsrv-fab-dismiss:hover {
    opacity: 1;
}
/* ------------------------------------------------------------------
   hpc-sim-management P01 — connection + scheduler audit results panel.
   Scoped under .hpc-audit-panel rather than the view root: the panel is
   mounted into the nearest modal container, which is not always inside
   .d3view-hpcservers-edit-new-view. The prefix is unique to this feature.
   ------------------------------------------------------------------ */
.hpc-audit-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin: 0 0 14px 0;
    overflow: hidden;
    animation: hpcAuditFadeIn 0.25s ease both;
}
@keyframes hpcAuditFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.hpc-audit-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}
.hpc-audit-title { font-size: 13px; font-weight: 600; color: #333; flex: 1 1 240px; min-width: 200px; }
.hpc-audit-dim   { color: #999; font-weight: 400; }
.hpc-audit-counts { display: flex; gap: 6px; flex-wrap: wrap; }

.hpc-audit-pill {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.hpc-audit-pill.hpc-audit-ok      { background: #d4edda; color: #155724; }
.hpc-audit-pill.hpc-audit-fail    { background: #f8d7da; color: #721c24; }
.hpc-audit-pill.hpc-audit-warn    { background: #fff3cd; color: #856404; }
.hpc-audit-pill.hpc-audit-blocked { background: #f0f0f0; color: #6c757d; }
.hpc-audit-pill.hpc-audit-skip    { background: #f0f0f0; color: #888; }

.hpc-audit-rows { max-height: 460px; overflow-y: auto; }

.hpc-audit-item { border-bottom: 1px solid #f0f0f0; border-left: 4px solid #ddd; }
.hpc-audit-item:last-child { border-bottom: none; }
.hpc-audit-item.hpc-audit-ok      { border-left-color: #155724; }
.hpc-audit-item.hpc-audit-fail    { border-left-color: #721c24; }
.hpc-audit-item.hpc-audit-warn    { border-left-color: #856404; }
.hpc-audit-item.hpc-audit-blocked { border-left-color: #c8c8c8; }
.hpc-audit-item.hpc-audit-skip    { border-left-color: #e0e0e0; }

.hpc-audit-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer;
    transition: background 0.2s ease;
}
.hpc-audit-row:hover { background: #f7f9fc; }
.hpc-audit-ico { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
.hpc-audit-ok      .hpc-audit-ico { color: #155724; }
.hpc-audit-fail    .hpc-audit-ico { color: #721c24; }
.hpc-audit-warn    .hpc-audit-ico { color: #856404; }
.hpc-audit-blocked .hpc-audit-ico { color: #adb5bd; }
.hpc-audit-skip    .hpc-audit-ico { color: #ccc; }

.hpc-audit-label  { font-weight: 600; color: #333; font-size: 12px; flex: 0 0 auto; min-width: 170px; }
.hpc-audit-state  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; flex: 0 0 auto; width: 60px; }
.hpc-audit-detail { font-size: 12px; color: #555; flex: 1 1 0; min-width: 0; }
.hpc-audit-caret  { color: #bbb; font-size: 11px; flex-shrink: 0; }

.hpc-audit-body { padding: 2px 12px 12px 38px; background: #fcfcfc; }
.hpc-audit-hint { font-size: 12px; color: #555; margin-bottom: 8px; }
.hpc-audit-hint-k { font-weight: 600; color: #2c5282; margin-right: 5px; }

.hpc-audit-cmd, .hpc-audit-out {
    display: block; margin: 5px 0 0 0; padding: 7px 9px;
    background: #2d3748; color: #e2e8f0;
    border: none; border-radius: 6px;
    font-family: Menlo, Monaco, Consolas, monospace; font-size: 11px;
    white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow-y: auto;
}
.hpc-audit-out { background: #f0f0f0; color: #444; }
.hpc-audit-copy { margin-left: 6px; vertical-align: middle; }

/** Added by shashank2104 on 07/17/2026 - R2026-46 P2 - local token block, aliased to the shared --d3v-*
 * foundation tokens wherever a matching one exists; the CONTRACT's frozen palette (slate + blue, with
 * "soft" tints the base --d3v-* set does not define) supplies the rest, matching the approved mockups. **/
.d3view-hpcservers-edit-new-view {
    --hpc-bg: var(--d3v-bg-tertiary, #f1f5f9);
    --hpc-surface: var(--d3v-bg-primary, #ffffff);
    --hpc-surface-2: var(--d3v-bg-secondary, #f8fafc);
    --hpc-surface-3: var(--d3v-bg-tertiary, #f1f5f9);
    --hpc-border: var(--d3v-border, #e2e8f0);
    --hpc-border-2: var(--d3v-border-strong, #cbd5e1);
    --hpc-text: var(--d3v-text-primary, #1e293b);
    --hpc-text-2: var(--d3v-text-secondary, #475569);
    --hpc-text-3: var(--d3v-text-muted, #94a3b8);
    --hpc-accent: #2563eb;
    --hpc-accent-2: var(--d3v-accent, #3b82f6);
    --hpc-accent-soft: #e7f1ff;
    --hpc-success: #16a34a;
    --hpc-success-soft: #dcfce7;
    --hpc-danger: #dc2626;
    --hpc-danger-soft: #fee2e2;
    --hpc-r-sm: 6px;
    --hpc-r-md: 9px;
    --hpc-r-lg: 14px;
    --hpc-sh-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --hpc-sh-md: 0 4px 12px rgba(15, 23, 42, .08);
    --hpc-t: .16s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   HEADER - server identity + status dot + Verify/Save (mockup "Tabs & Top Bar")
   ========================================================================= */
.d3view-hpcservers-edit-new-view .modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-bottom: 1px solid var(--hpc-border);
    padding: 14px 20px;
}

.d3view-hpcservers-edit-new-view .modal-header .modal-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto;
    order: 0;
    margin: 0;
    float: none;
}

/* Verify sits just left of the standard window controls */
.d3view-hpcservers-edit-new-view .modal-header .hpc-verify-btn {
    order: 1;
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

/* Window controls (minimize / close) stay pinned FAR RIGHT - standard modal position */
.d3view-hpcservers-edit-new-view .modal-header .btn-group.pull-right,
.d3view-hpcservers-edit-new-view .modal-header .closewindow,
.d3view-hpcservers-edit-new-view .modal-header .close {
    order: 2;
    flex: 0 0 auto;
    float: none;
    margin-left: 4px;
}

.d3view-hpcservers-edit-new-view .modal-header .close:hover {
    color: var(--hpc-text);
}

.d3view-hpcservers-edit-new-view .hpc-header-id {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.d3view-hpcservers-edit-new-view .hpc-header-ico {
    width: 38px;
    height: 38px;
    border-radius: var(--hpc-r-md);
    background: var(--hpc-accent-soft);
    color: var(--hpc-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex: 0 0 auto;
}

.d3view-hpcservers-edit-new-view .hpc-header-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.d3view-hpcservers-edit-new-view .hpc-header-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hpc-text);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.d3view-hpcservers-edit-new-view .hpc-header-sub {
    font-size: 12px;
    color: var(--hpc-text-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.d3view-hpcservers-edit-new-view .hpc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.d3view-hpcservers-edit-new-view .hpc-status-dot.hpc-status-ok {
    background: var(--hpc-success);
    box-shadow: 0 0 0 3px var(--hpc-success-soft);
}

.d3view-hpcservers-edit-new-view .hpc-status-dot.hpc-status-new {
    background: var(--hpc-text-3);
    box-shadow: 0 0 0 3px var(--hpc-surface-3);
}

.d3view-hpcservers-edit-new-view .modal-header .hpc-verify-btn,
.d3view-hpcservers-edit-new-view .modal-header .hpc-save-btn {
    border-radius: var(--hpc-r-sm);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 13px;
    transition: var(--hpc-t);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-width: 1px;
    border-style: solid;
}

.d3view-hpcservers-edit-new-view .modal-header .hpc-verify-btn {
    color: var(--hpc-success);
    border-color: var(--hpc-success-soft);
    background: var(--hpc-success-soft);
}

.d3view-hpcservers-edit-new-view .modal-header .hpc-verify-btn:hover,
.d3view-hpcservers-edit-new-view .modal-header .hpc-verify-btn:focus {
    border-color: var(--hpc-success);
    box-shadow: var(--hpc-sh-sm);
}

.d3view-hpcservers-edit-new-view .modal-header .hpc-save-btn {
    color: #fff;
    background: var(--hpc-accent);
    border-color: var(--hpc-accent);
}

.d3view-hpcservers-edit-new-view .modal-header .hpc-save-btn:hover,
.d3view-hpcservers-edit-new-view .modal-header .hpc-save-btn:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: var(--hpc-sh-sm);
}

/* =========================================================================
   INLINE MODE (render_in_modal:false) - compact header bar replacing the modal
   header, carrying the server identity block + the Verify button.
   ========================================================================= */
.d3view-hpcservers-edit-new-view.hpc-edit-inline {
    background: var(--hpc-surface, #fff);
    border: 1px solid var(--hpc-border, #e5e7eb);
    border-radius: var(--hpc-r-md, 10px);
    overflow: hidden;
}

.d3view-hpcservers-edit-new-view .hpc-edit-inline-header {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hpc-border, #e5e7eb);
    background: var(--hpc-surface-2, #f9fafb);
    gap: 12px;
}

.d3view-hpcservers-edit-new-view .hpc-edit-inline-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.d3view-hpcservers-edit-new-view .hpc-edit-inline-header .hpc-verify-btn {
    border-radius: var(--hpc-r-sm);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 13px;
    transition: var(--hpc-t);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--hpc-success-soft);
    color: var(--hpc-success);
    background: var(--hpc-success-soft);
}

.d3view-hpcservers-edit-new-view .hpc-edit-inline-header .hpc-verify-btn:hover,
.d3view-hpcservers-edit-new-view .hpc-edit-inline-header .hpc-verify-btn:focus {
    border-color: var(--hpc-success);
    box-shadow: var(--hpc-sh-sm);
}

/* controlsPosition:'top' - this scope forces .gi-main-container into a grid (below), so the shared
   flex-order rule can't move the controls; flip the grid rows instead (controls row above body). */
.d3view-hpcservers-edit-new-view .gi-main-container.gi-controls-top {
    grid-template-rows: auto 1fr;
}
.d3view-hpcservers-edit-new-view .gi-main-container.gi-controls-top > section.gi-controls {
    grid-column: 2;
    grid-row: 1;
    border-top: none;
    border-bottom: 1px solid var(--hpc-border, #e5e7eb);
}
.d3view-hpcservers-edit-new-view .gi-main-container.gi-controls-top > section.gi-body {
    grid-column: 2;
    grid-row: 2;
}

/* =========================================================================
   LEFT SECTION-RAIL (mockup "Tabs & Top Bar" Option B)
   .gi-main-container is the shared GenericInputTemplateViews stepper shell (flex-column by default via
   the .pl-flex-v utility class); flip it into a 2-column grid [rail | content] and let the rail span
   both the body row and the pager-controls footer row so it reads as a full-height side nav. **/
.d3view-hpcservers-edit-new-view .gi-main-container {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 1fr auto;
    height: 100%;
    background: var(--hpc-surface);
}

.d3view-hpcservers-edit-new-view .gi-main-container > nav.gi-stepper-nav {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.d3view-hpcservers-edit-new-view .gi-main-container > section.gi-body {
    grid-column: 2;
    grid-row: 1;
}

.d3view-hpcservers-edit-new-view .gi-main-container > section.gi-border-top {
    grid-column: 2;
    grid-row: 2;
}

/** !important on `display` only: the shared component's own crisp-nav CSS ships
 * `.gi-main-container[data-crisp-menu="true"] .gi-stepper-nav { display: flex; }` (4 class/attr
 * selectors, beats ours on the class-count tie-break even with an extra type selector) which - combined
 * with that rule's `align-items:center` sibling in a DIFFERENT stylesheet - vertically centers the
 * (much taller) nav list inside the short nav box, pushing roughly half of it above the visible area.
 * We cannot edit that shared file, so this is the one narrowly-scoped !important in this layer (matches
 * the existing precedent in EditHpcServerNewView.css for the same off-limits-shared-component reason). **/
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav {
    display: block !important;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    background: var(--hpc-surface-2);
    border-right: 1px solid var(--hpc-border);
    padding: 14px 10px;
    box-sizing: border-box;
}

/* The horizontal crisp-scroll paging arrows (« ‹ › ») have no place in a vertical rail - the mockup's
   left section rail has none ("no horizontal paging arrows to fight"). */
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav .scroll_buttons {
    display: none !important;
}

/** NOTE ON SPECIFICITY: the shared genericInputTemplateView.css ships breadcrumb-mode rules like
 * `.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item.active > a`
 * (5 classes + 3 type selectors). We cannot edit that file, so every rule below repeats the
 * `nav.gi-stepper-nav ul.` ancestor chain to reach an equal-or-higher class count with MORE type
 * selectors, which wins on the tie-break - no !important needed. **/
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    /** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 1) - stretch column items to full rail width so
     * the group-header <li> (which is not the full-width .gi-stepper-nav-item) isn't shrink-wrapped + centered
     * by the shared component's align-items:center on the nav list. Labels + headers now read left-aligned. **/
    align-items: stretch !important;
    gap: 2px;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Cancel the shared template's inline width/flex-basis (built for a horizontal breadcrumb strip)
   and STRETCH each item to the full rail width so labels never wrap / icon never stacks above text. */
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item {
    display: block !important;
    width: 100% !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    vertical-align: initial !important;
    text-align: left;
    margin-right: 0;
}

/* R2026-46 integration polish - hide the shared component's horizontal breadcrumb "/" separator
   (.gi-stepper-nav-item::after { content:"/" }) which is meaningless in the vertical rail. */
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item::after,
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item > a::after {
    content: none !important;
    display: none !important;
}

.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item > a {
    display: flex;
    align-items: center;
    /** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 1) - pin the icon+label row to the left edge */
    justify-content: flex-start;
    text-align: left;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    border-radius: var(--hpc-r-sm);
    color: var(--hpc-text-2);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--hpc-t);
    white-space: nowrap;
    background: transparent;
}

.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item > a:hover {
    background: var(--hpc-surface);
    color: var(--hpc-text);
}

.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item.active > a {
    background: var(--hpc-accent-soft);
    color: var(--hpc-accent);
}

/* The label markup is ONE span holding [<i> label] or [label <span.badge>]; make that span a
   flex row so icon + text + count sit inline, left-aligned, on a single line. */
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item > a > span {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}

.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item > a > span > i {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    margin-right: 0;
}

/* Count badge (injected via updateStepperNavAndStepLabelCount's <span class="badge">N</span>) */
.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups .badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    background: var(--hpc-surface-3);
    color: var(--hpc-text-2);
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: auto;
}

.d3view-hpcservers-edit-new-view nav.gi-stepper-nav ul.gi-stepper-nav-items.gi-groups > li.gi-stepper-nav-item.active > a .badge {
    background: #fff;
    color: var(--hpc-accent);
}

/* The shared component's numbered/checkmark ::before circles are already display:none !important
   under breadcrumb mode (its own CSS) - nothing left to suppress here. */

/* Section headers injected by _buildSideRailGroups() - not a .gi-stepper-nav-item so the shared
   stepper's position-based active/step-completed loop skips them entirely. */
.d3view-hpcservers-edit-new-view li.hpc-rail-group-header {
    display: flex;
    align-items: center;
    /** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 1) - full width + left-aligned so the section
     * header text isn't centered by the nav column's cross-axis alignment. **/
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    gap: 7px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hpc-text-3);
    font-weight: 700;
    margin: 14px 10px 6px;
    pointer-events: none;
}

.d3view-hpcservers-edit-new-view li.hpc-rail-group-header:first-child {
    margin-top: 2px;
}

/* =========================================================================
   FOOTER (Previous / Next / Save and Close pager) - keep functional, restyle to match the palette
   ========================================================================= */
.d3view-hpcservers-edit-new-view section.gi-border-top {
    background: var(--hpc-surface);
    border-top: 1px solid var(--hpc-border);
}

.d3view-hpcservers-edit-new-view section.gi-border-top .btn {
    border-radius: var(--hpc-r-sm);
    font-weight: 600;
    font-size: 13px;
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view section.gi-border-top .btn-primary {
    background: var(--hpc-accent);
    border-color: var(--hpc-accent);
}

.d3view-hpcservers-edit-new-view section.gi-border-top .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* =========================================================================
   CLEAN TABLES + ROW ACTIONS + ADD/EDIT MODAL (mockup "Tables" Option B)
   solver_binaries + interconnects: _renderCleanTable / _openTableRowModal in EditHpcServerNew.js,
   markup in javascripts/templates/modular/0090-hpc-table-modal.tpl.
   ========================================================================= */
/** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 3) - clean tables fill the full step height with an
 * internal scroll region + breathing room, instead of the old fixed 300px / max-height box. The mount + its
 * ancestor chain (tagged in _renderCleanTable) are forced into a flex-column full-height cascade so height:100%
 * resolves all the way down to the card. **/
/** IMPORTANT (fix): .tab-content is the SHARED parent of EVERY step's pane, so it must NOT be flexed and the
 * pane's display:flex must be gated to `.active` - otherwise, once a clean-table tab has been visited, its
 * (now-inactive) pane stays display:flex and stacks inside the tab area, pushing later FormBuilder tabs
 * (Bursting, etc.) down by a large empty band. tab-content only needs a definite height (it already has
 * full-h) so the active clean pane's height:100% resolves; keep it a plain block. **/
.d3view-hpcservers-edit-new-view .tab-content.hpc-clean-table-tabcontent {
    height: 100%;
    min-height: 0;
}
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .user-input-container.hpc-clean-table-pane,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-edit-new-tab-inner.hpc-clean-table-inner,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-step-div.hpc-clean-table-stepdiv,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-clean-table-mount {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/** The tagged descendants of the active clean pane must GROW to fill their flex-column parent (they default
 * to flex:0 1 auto = content height, so a short table would not fill). **/
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .user-input-container.hpc-clean-table-pane,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-edit-new-tab-inner.hpc-clean-table-inner,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-step-div.hpc-clean-table-stepdiv,
.d3view-hpcservers-edit-new-view .tab-pane.hpc-clean-table-tabpane.active .hpc-clean-table-mount {
    flex: 1 1 auto;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 16px;
    box-sizing: border-box;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hpc-text);
    margin: 0;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-count {
    color: var(--hpc-text-3);
    font-size: 12.5px;
    font-weight: 600;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-filter-wrap {
    position: relative;
    width: 220px;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-filter-wrap i.fa-search {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hpc-text-3);
    font-size: 12px;
    pointer-events: none;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-filter {
    width: 100%;
    height: 32px;
    border: 1px solid var(--hpc-border);
    border-radius: 999px;
    padding: 0 12px 0 30px;
    font-size: 12.5px;
    background: var(--hpc-surface);
    color: var(--hpc-text);
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-filter:focus {
    outline: 0;
    border-color: var(--hpc-accent);
    box-shadow: 0 0 0 3px var(--hpc-accent-soft);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-toolbar .btn-primary {
    background: var(--hpc-accent);
    border-color: var(--hpc-accent);
    border-radius: var(--hpc-r-sm);
    font-weight: 600;
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-toolbar .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: var(--hpc-sh-sm);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-card {
    border: 1px solid var(--hpc-border);
    border-radius: var(--hpc-r-md);
    background: var(--hpc-surface);
    box-shadow: var(--hpc-sh-sm);
    /** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 3) - the card is the scroll region; it flexes to
     * fill the remaining height under the toolbar and scrolls its own rows (sticky header stays put). **/
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/** Added by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 3) - keep the header row visible while the body scrolls. **/
.d3view-hpcservers-edit-new-view table.hpc-clean-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table th {
    background: var(--hpc-surface-2);
    text-align: left;
    padding: 11px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hpc-text-3);
    font-weight: 700;
    border-bottom: 1px solid var(--hpc-border);
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hpc-border);
    color: var(--hpc-text);
    vertical-align: middle;
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table td.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table td.muted {
    color: var(--hpc-text-3);
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table tbody tr {
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table tbody tr:last-child td {
    border-bottom: 0;
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table tbody tr:hover {
    background: var(--hpc-surface-2);
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table .hpc-clean-table-actions-col {
    width: 90px;
    text-align: right;
}

.d3view-hpcservers-edit-new-view .hpc-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    opacity: 0;
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view table.hpc-clean-table tbody tr:hover .hpc-row-actions,
.d3view-hpcservers-edit-new-view table.hpc-clean-table tbody tr:focus-within .hpc-row-actions {
    opacity: 1;
}

.d3view-hpcservers-edit-new-view .hpc-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--hpc-r-sm);
    border: 1px solid var(--hpc-border);
    background: var(--hpc-surface);
    color: var(--hpc-text-2);
    cursor: pointer;
    transition: var(--hpc-t);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.d3view-hpcservers-edit-new-view .hpc-icon-btn:hover,
.d3view-hpcservers-edit-new-view .hpc-icon-btn:focus {
    border-color: var(--hpc-border-2);
    color: var(--hpc-text);
    box-shadow: var(--hpc-sh-sm);
}

.d3view-hpcservers-edit-new-view .hpc-icon-btn.hpc-icon-btn-danger:hover,
.d3view-hpcservers-edit-new-view .hpc-icon-btn.hpc-icon-btn-danger:focus {
    color: var(--hpc-danger);
    border-color: var(--hpc-danger);
    background: var(--hpc-danger-soft);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-empty {
    text-align: center;
    padding: 44px 20px;
    border: 1px dashed var(--hpc-border-2);
    border-radius: var(--hpc-r-md);
    background: var(--hpc-surface-2);
    color: var(--hpc-text-2);
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-empty i {
    font-size: 26px;
    color: var(--hpc-text-3);
    margin-bottom: 8px;
    display: block;
}

.d3view-hpcservers-edit-new-view .hpc-clean-table-empty p {
    margin: 0 0 14px;
    font-size: 13px;
}

/* ---- Add/Edit + Delete-confirm modal form (rendered via 0090's #d3view-hpc-table-row-modal-tpl) ---- */
.d3view-hpcservers-edit-new-view .hpc-table-row-modal-form {
    display: block;
}

.d3view-hpcservers-edit-new-view .hpc-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/** Updated by shashank2104 on 07/17/2026 - R2026-46 P2 (fix 4) - the row modal now uses GenericModalView's
 * built-in footer (Apply/Cancel), so the old custom .hpc-modal-form-footer / .hpc-modal-save-btn /
 * .hpc-modal-cancel-btn rules were removed. Style the built-in footer's primary Apply to match the palette. */
.d3view-hpcservers-edit-new-view.hpc-table-row-modal .modal-footer #apply {
    background: var(--hpc-accent);
    border-color: var(--hpc-accent);
    font-weight: 600;
    border-radius: var(--hpc-r-sm);
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view.hpc-table-row-modal .modal-footer #apply:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.d3view-hpcservers-edit-new-view .hpc-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    flex: 0 0 calc(33.333% - 10px);
}

.d3view-hpcservers-edit-new-view .hpc-form-field-w49 {
    flex-basis: calc(49% - 7px);
}

.d3view-hpcservers-edit-new-view .hpc-form-field-w66 {
    flex-basis: calc(66% - 5px);
}

.d3view-hpcservers-edit-new-view .hpc-form-field-w100 {
    flex-basis: 100%;
}

.d3view-hpcservers-edit-new-view .hpc-form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--hpc-text-2);
}

.d3view-hpcservers-edit-new-view .hpc-form-required {
    color: var(--hpc-danger);
}

.d3view-hpcservers-edit-new-view .hpc-modal-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--hpc-border-2);
    border-radius: var(--hpc-r-md);
    padding: 0 12px;
    font-size: 13px;
    background: var(--hpc-surface);
    color: var(--hpc-text);
    transition: var(--hpc-t);
    box-sizing: border-box;
}

.d3view-hpcservers-edit-new-view select.hpc-modal-input {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.d3view-hpcservers-edit-new-view .hpc-modal-input:focus {
    outline: 0;
    border-color: var(--hpc-accent);
    box-shadow: 0 0 0 3px var(--hpc-accent-soft);
}

.d3view-hpcservers-edit-new-view textarea.hpc-modal-textarea {
    height: auto;
    min-height: 72px;
    padding: 8px 12px;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

.d3view-hpcservers-edit-new-view .hpc-form-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--hpc-text-muted, #888);
    word-break: break-word;
}

.hpc-edit-attribute-sidebar .hpc-form-hint,
.new_input .hpc-form-hint {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #888;
}

.new_input .twitter-typeahead {
    width: 100%;
}

.new_input .twitter-typeahead .tt-menu {
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 2100;
}

.new_input .twitter-typeahead .tt-suggestion {
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.new_input .twitter-typeahead .tt-suggestion.tt-cursor,
.new_input .twitter-typeahead .tt-suggestion:hover {
    background: #e0ecf8;
    color: #2c5282;
}

.new_input .twitter-typeahead .tt-hint {
    color: #bbb;
}

.d3view-hpcservers-edit-new-view .hpc-modal-browse-row {
    display: flex;
    gap: 6px;
}

.d3view-hpcservers-edit-new-view .hpc-modal-browse-row .hpc-modal-input {
    flex: 1 1 auto;
}

.d3view-hpcservers-edit-new-view .hpc-modal-browse-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--hpc-r-md);
    border: 1px solid var(--hpc-border-2);
    background: var(--hpc-surface);
    color: var(--hpc-text-2);
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view .hpc-modal-browse-btn:hover {
    border-color: var(--hpc-accent);
    color: var(--hpc-accent);
}

/* Embedded EnvVarsEditor (EnvVarsEditorView.js, shared/not-owned) - restyle to the redesign palette; its own
   Save/Close buttons are hidden by HpcTableRowModalView (saved via the outer modal's Apply instead). */
.d3view-hpcservers-edit-new-view .hpc-modal-env-container .hpc-envvars-editor-panel h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--hpc-text-2);
    text-transform: none;
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container .hpc-envvars-add-row {
    background: var(--hpc-surface-2);
    border: 1px solid var(--hpc-border);
    color: var(--hpc-text-2);
    border-radius: var(--hpc-r-sm);
    font-weight: 600;
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container .hpc-envvars-add-row:hover {
    border-color: var(--hpc-border-2);
    color: var(--hpc-text);
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container table.existingAttributes {
    border: 1px solid var(--hpc-border);
    border-radius: var(--hpc-r-md);
    overflow: hidden;
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container table.existingAttributes th {
    background: var(--hpc-surface-2);
    color: var(--hpc-text-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container .hpc-envvars-remove-row {
    border-radius: var(--hpc-r-sm);
    transition: var(--hpc-t);
}

.d3view-hpcservers-edit-new-view .hpc-modal-env-container .hpc-envvars-remove-row:hover {
    color: var(--hpc-danger);
    border-color: var(--hpc-danger);
}

/* =========================================================================
   R2026-46 - Shared right-docked slide-in SIDE PANEL. Hosts what were previously
   GenericModalViews (table-row Add/Edit, Import-from-server) as overlay panels,
   consistent with the env-vars sidebar. Built by module.Plugins.Hpcservers.SidePanel.
   ========================================================================= */
.d3view-hpcservers-edit-new-view .hpc-has-side-panel {
    position: relative;
}
.d3view-hpcservers-edit-new-view .hpc-side-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hpc-surface, #fff);
    border-left: 1px solid var(--hpc-border, #e2e8f0);
    transition: width var(--hpc-t, .16s cubic-bezier(.4, 0, .2, 1));
    z-index: 300;
}
.d3view-hpcservers-edit-new-view .hpc-side-panel.hpc-side-panel-open {
    box-shadow: -2px 0 16px rgba(15, 23, 42, .14);
}
.d3view-hpcservers-edit-new-view .hpc-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 16px;
    background: var(--hpc-surface-2, #f8fafc);
    border-bottom: 1px solid var(--hpc-border, #e2e8f0);
}
.d3view-hpcservers-edit-new-view .hpc-side-panel-title {
    font-weight: 600;
    font-size: 1.02em;
    color: var(--hpc-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-hpcservers-edit-new-view .hpc-side-panel-title i {
    margin-right: 6px;
    color: var(--hpc-accent, #2563eb);
}
.d3view-hpcservers-edit-new-view .hpc-side-panel-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.d3view-hpcservers-edit-new-view .hpc-side-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
}

/* R2026-46 - FormBuilder inputs container inside the HPC editor: drop the default
   1px border so the form reads cleaner (part of the form declutter direction). */
.d3view-hpcservers-edit-new-view .d3view-inputsBuilder {
    border: none !important;
}

/* ===================================================================== *
 * Added by shashank2104 on 2026-07-20 - R2026-46 - Modern config dropzone
 * (the per-step "Drop or Click to Add Files" area). Scoped to the editor
 * root; lightens the dark dashed frame, rounds it, adds a hover state.
 * ===================================================================== */
.d3view-hpcservers-edit-new-view .dropz.hpc-step-div {
    padding: 4px 0;
}
.d3view-hpcservers-edit-new-view .customInput #msgArea,
.d3view-hpcservers-edit-new-view #msgArea.dz-clickable {
    border: 2px dashed var(--d3v-border-strong, #cbd5e1);
    border-radius: var(--d3v-r-lg, 12px);
    background-color: var(--d3v-bg-secondary, #f8fafc);
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1), background-color .16s cubic-bezier(.4, 0, .2, 1), box-shadow .16s cubic-bezier(.4, 0, .2, 1);
}
.d3view-hpcservers-edit-new-view .customInput #msgArea:hover,
.d3view-hpcservers-edit-new-view #msgArea.dz-clickable:hover {
    border-color: var(--d3v-accent, #3b82f6);
    background-color: var(--d3v-accent-soft, #e7f1ff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

/* Added on 08/11/2026 - hpcserver-management - persistent Save + last-saved stamp */
.d3view-hpcservers-edit-new-view .hpc-last-saved {
    color: var(--d3v-text-muted, #8a94a6);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}
.d3view-hpcservers-edit-new-view .hpc-save-btn[disabled] {
    opacity: .55;
    cursor: default;
}

/* =========================================================================
   Tokens (aliased to the approved slate + blue palette from CONTRACT.md)
   ========================================================================= */
.d3view-hpcservers-edit-new-view {
    --hpc-solv-surface: #ffffff;
    --hpc-solv-surface-2: #f8fafc;
    --hpc-solv-surface-3: #f1f5f9;
    --hpc-solv-border: #e2e8f0;
    --hpc-solv-border-2: #cbd5e1;
    --hpc-solv-text: #1e293b;
    --hpc-solv-text-2: #475569;
    --hpc-solv-text-3: #94a3b8;
    --hpc-solv-accent: #2563eb;
    --hpc-solv-accent-2: #3b82f6;
    --hpc-solv-accent-soft: #e7f1ff;
    --hpc-solv-success: #16a34a;
    --hpc-solv-success-soft: #dcfce7;
    --hpc-solv-danger: #dc2626;
    --hpc-solv-danger-soft: #fee2e2;
    --hpc-solv-r-sm: 6px;
    --hpc-solv-r-md: 9px;
    --hpc-solv-r-lg: 14px;
    --hpc-solv-sh-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --hpc-solv-sh-md: 0 4px 12px rgba(15, 23, 42, .08);
    --hpc-solv-t: .16s cubic-bezier(.4, 0, .2, 1);
}

/* =========================================================================
   LEFT SOLVER LIST — fixed sensible width, search, clean alignment
   ========================================================================= */
.d3view-hpcservers-edit-new-view .hpc-solvers-column-1-wrap {
    flex: 0 0 auto;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column {
    width: 250px;
    min-width: 220px;
    max-width: 400px;
    flex: 0 0 auto;
    padding: 0;
    background: var(--hpc-solv-surface-2);
    border-right: 1px solid var(--hpc-solv-border);
    display: flex;
    flex-direction: column;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-editor-column {
    /** Updated by shashank2104 on 07/17/2026 - R2026-46 P1 (fix 6) - the editor column IS the single padded
     * surface now; the inner cards are flattened (see the de-clutter block below), so the breathing room lives
     * here instead of on three stacked boxes. **/
    padding: 16px 20px;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--hpc-solv-border);
    flex-shrink: 0;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-header .hpc-solvers-list-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--hpc-solv-text);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-size: 12px;
    border-radius: var(--hpc-solv-r-sm);
    border: 1px solid var(--hpc-solv-border);
    background: var(--hpc-solv-surface);
    color: var(--hpc-solv-text-2);
    padding: 5px 10px;
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-solvers-add-btn:hover,
.d3view-hpcservers-edit-new-view .hpc-solvers-add-btn:focus {
    border-color: var(--hpc-solv-accent);
    color: var(--hpc-solv-accent);
    background: var(--hpc-solv-accent-soft);
    text-decoration: none;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-wrap {
    position: relative;
    margin: 10px 12px;
    flex-shrink: 0;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hpc-solv-text-3);
    font-size: 12px;
    pointer-events: none;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--hpc-solv-border);
    border-radius: 999px;
    padding: 0 12px 0 30px;
    font-size: 12.5px;
    background: var(--hpc-solv-surface);
    color: var(--hpc-solv-text);
    transition: var(--hpc-solv-t);
    box-shadow: none;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-input:focus {
    outline: 0;
    border-color: var(--hpc-solv-accent);
    box-shadow: 0 0 0 3px var(--hpc-solv-accent-soft);
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-empty {
    padding: 14px 16px;
    text-align: center;
    color: var(--hpc-solv-text-3);
    font-size: 12.5px;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-search-empty i {
    margin-right: 6px;
}
/* Note: selectors below are qualified to match/exceed the specificity of the base
   ".column-1 ul.solversList"/".hpc-solvers-list-column ul.solversList .solverItem" rules in
   EditHpcServerNewView.css, so this later-loaded layer reliably wins the cascade per CONTRACT.md
   ("higher-specificity rules win overrides without touching the base file"). */
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column ul.solversList {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
    margin: 0;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column ul.solversList .solverItem {
    margin-bottom: 2px;
}
.d3view-hpcservers-edit-new-view .solversList .solverItem.hpc-solver-item-search-hidden {
    display: none;
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-inner {
    display: flex;
    align-items: center;
    gap: 4px;
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-inner .hpc-solver-item-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--hpc-solv-r-sm);
    color: var(--hpc-solv-text-2);
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-inner .hpc-solver-item-link:hover {
    background: var(--hpc-solv-surface);
    color: var(--hpc-solv-text);
    text-decoration: none;
}
.d3view-hpcservers-edit-new-view .solversList .solverItem.active .hpc-solver-item-inner .hpc-solver-item-link {
    background: var(--hpc-solv-accent-soft);
    color: var(--hpc-solv-accent);
    font-weight: 600;
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hpc-solv-surface-3);
    color: var(--hpc-solv-text-3);
    font-size: 11px;
}
.d3view-hpcservers-edit-new-view .solversList .solverItem.active .hpc-solver-item-icon {
    background: var(--hpc-solv-surface);
    color: var(--hpc-solv-accent);
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-actions-btn {
    flex-shrink: 0;
    /** Added by shashank2104 on 07/17/2026 - R2026-46 P1 (fix 8) - center the ellipsis <i> inside the button
     * (was offset); same recipe as the fixed .hpc-attr-action-btn. **/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: var(--hpc-solv-r-sm);
    background: transparent;
    color: var(--hpc-solv-text-3);
    cursor: pointer;
    opacity: 0;
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-inner:hover .hpc-solver-item-actions-btn,
.d3view-hpcservers-edit-new-view .hpc-solver-item-actions-btn:focus {
    opacity: 1;
}
.d3view-hpcservers-edit-new-view .hpc-solver-item-actions-btn:hover,
.d3view-hpcservers-edit-new-view .hpc-solver-item-actions-btn:focus {
    background: var(--hpc-solv-surface);
    border-color: var(--hpc-solv-border-2);
    color: var(--hpc-solv-text);
    outline: none;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-empty-state-wrapper {
    flex: 1;
}

/* R2026-46 - the base EditHpcServerNewView.css sets these to display:block at 5-class specificity
   (.hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-inner @ ~1118), which out-ranks
   the shorter selectors above and stacks the icon over the name. Re-assert the flex row at equal
   specificity so icon + name sit inline on one row and the actions button pins right. */
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    min-height: 0;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem a.hpc-solver-item-link {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 10px;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-list-column .solversList .solverItem .hpc-solver-item-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* =========================================================================
   R2026-46 (fix 6) - DE-CLUTTER Solvers Config tab
   The base EditHpcServerNewView.css boxes the solver editor in THREE nested cards
   (.attributesContainer > .attributesArea > .existingAttributes, each with its own
   bg + border + shadow) and re-skins the attributes table with gradient headers +
   gridlines (!important). Flatten it all to ONE clean surface (the editor column
   provides the padding): hierarchy from spacing + a hairline divider, with the
   premium .hpc-attributes-table as the only boxed element. Selectors match/exceed
   the base's specificity so this later-loaded layer wins.
   ========================================================================= */
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesContainer {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 !important;
    margin-bottom: 0;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .attributesArea {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--hpc-solv-border);
    border-radius: 0;
    box-shadow: none;
    padding: 22px 0 0 !important;
    margin-top: 22px;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    /** R2026-46 (fix) - .existingAttributes is a non-floated block sibling of the floated "All Attributes" +
     * Add header cols (col-md-10 + col-md-2 = 100% wide). overflow-x:auto makes it a block formatting context,
     * and a BFC sits BESIDE floats and shrinks to the 0px of remaining width, clipping the table to nothing.
     * clear:both drops it below the header row so it takes the full width and the attributes table shows. **/
    clear: both;
    width: 100%;
}
/* Re-assert the premium single-card table over the base's borderless/gridline !important skin. */
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table {
    border: 1px solid var(--hpc-solv-border) !important;
    border-radius: var(--hpc-solv-r-md);
    overflow: hidden;
    box-shadow: var(--hpc-solv-sh-sm);
    margin: 0 !important;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table thead th {
    background: var(--hpc-solv-surface-2) !important;
    color: var(--hpc-solv-text-3) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hpc-solv-border) !important;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table tbody td {
    padding: 10px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--hpc-solv-border) !important;
    background: transparent !important;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table tbody tr:nth-child(even) td {
    background: transparent !important;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table tbody tr:hover td {
    background: var(--hpc-solv-surface-2) !important;
}
.d3view-hpcservers-edit-new-view .hpc-editsolver-panel .existingAttributes .hpc-attributes-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* =========================================================================
   ALL ATTRIBUTES TABLE — own-rendered (replaces AttributesQuickView),
   critical columns first (Id, Type, Required, Maps To, Default), actions last
   ========================================================================= */
.d3view-hpcservers-edit-new-view .hpc-import-actions-group {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}
.d3view-hpcservers-edit-new-view .hpc-import-actions-group .import-solver,
.d3view-hpcservers-edit-new-view .hpc-import-actions-group .hpc-import-from-server {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--hpc-solv-r-md);
    font-weight: 600;
    font-size: 13px;
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-import-actions-group .hpc-import-from-server {
    background: var(--hpc-solv-surface);
    border: 1px solid var(--hpc-solv-border-2);
    color: var(--hpc-solv-text-2);
}
.d3view-hpcservers-edit-new-view .hpc-import-actions-group .hpc-import-from-server:hover,
.d3view-hpcservers-edit-new-view .hpc-import-actions-group .hpc-import-from-server:focus {
    background: var(--hpc-solv-accent-soft);
    border-color: var(--hpc-solv-accent);
    color: var(--hpc-solv-accent);
    text-decoration: none;
}

.d3view-hpcservers-edit-new-view .hpc-attributes-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--hpc-solv-border);
    border-radius: var(--hpc-solv-r-md);
    overflow: hidden;
    font-size: 13px;
    background: var(--hpc-solv-surface);
    box-shadow: var(--hpc-solv-sh-sm);
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table thead th {
    background: var(--hpc-solv-surface-2);
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hpc-solv-text-3);
    font-weight: 700;
    border-bottom: 1px solid var(--hpc-solv-border);
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--hpc-solv-border);
    vertical-align: middle;
    color: var(--hpc-solv-text);
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table tbody tr:last-child td {
    border-bottom: 0;
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table tbody tr {
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table tbody tr:hover td {
    background: var(--hpc-solv-surface-2);
}
.d3view-hpcservers-edit-new-view .hpc-attributes-table tbody tr.hpc-attribute-row-highlight td {
    background: var(--hpc-solv-accent-soft) !important;
}
.d3view-hpcservers-edit-new-view .hpc-attr-id-text {
    font-weight: 600;
    color: var(--hpc-solv-text);
}
.d3view-hpcservers-edit-new-view .hpc-attr-id-sub {
    display: block;
    font-size: 11px;
    color: var(--hpc-solv-text-3);
    font-weight: 500;
}
.d3view-hpcservers-edit-new-view .hpc-attr-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--hpc-solv-surface-3);
    color: var(--hpc-solv-text-2);
    text-transform: uppercase;
}
.d3view-hpcservers-edit-new-view .hpc-attr-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    display: inline-block;
}
.d3view-hpcservers-edit-new-view .hpc-attr-pill-required {
    background: var(--hpc-solv-danger-soft);
    color: var(--hpc-solv-danger);
}
.d3view-hpcservers-edit-new-view .hpc-attr-pill-recommended {
    background: #fef3c7;
    color: #b45309;
}
.d3view-hpcservers-edit-new-view .hpc-attr-pill-internal {
    background: var(--hpc-solv-surface-3);
    color: var(--hpc-solv-text-3);
}
.d3view-hpcservers-edit-new-view .hpc-attr-pill-optional {
    background: var(--hpc-solv-surface-3);
    color: var(--hpc-solv-text-2);
}
.d3view-hpcservers-edit-new-view .hpc-attr-empty-dash {
    color: var(--hpc-solv-text-3);
}
.d3view-hpcservers-edit-new-view .hpc-attr-col-actions {
    white-space: nowrap;
    text-align: right;
    width: 76px;
}
/* R2026-46 - clean borderless icon-buttons; icon centered so it never sits outside a box */
.d3view-hpcservers-edit-new-view .hpc-attr-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 13px;
    border: 0;
    background: transparent;
    color: var(--hpc-solv-text-3);
    border-radius: var(--hpc-solv-r-sm);
    cursor: pointer;
    transition: var(--hpc-solv-t);
    vertical-align: middle;
    margin-left: 2px;
}
.d3view-hpcservers-edit-new-view .hpc-attr-action-btn:hover,
.d3view-hpcservers-edit-new-view .hpc-attr-action-btn:focus {
    background: var(--hpc-solv-surface-3);
    color: var(--hpc-solv-text);
    outline: none;
}
.d3view-hpcservers-edit-new-view .hpc-attr-action-btn.hpc-attr-action-danger:hover,
.d3view-hpcservers-edit-new-view .hpc-attr-action-btn.hpc-attr-action-danger:focus {
    color: var(--hpc-solv-danger);
    background: var(--hpc-solv-danger-soft);
}
.d3view-hpcservers-edit-new-view .hpc-attr-empty-row td {
    text-align: center;
    padding: 24px 14px;
    color: var(--hpc-solv-text-3);
}

/* =========================================================================
   VALUES + DEFAULT TABLE — default folded into the values list (star a row)
   ========================================================================= */
.d3view-hpcservers-edit-new-view .hpc-values-default-hint {
    color: var(--hpc-solv-text-2);
    margin: 0 0 8px;
}
.d3view-hpcservers-edit-new-view .hpc-values-default-hint i {
    color: var(--hpc-solv-accent);
    margin-right: 4px;
}
.d3view-hpcservers-edit-new-view .hpc-values-table {
    border: 1px solid var(--hpc-solv-border);
    border-radius: var(--hpc-solv-r-md);
    overflow: hidden;
}
.d3view-hpcservers-edit-new-view .hpc-values-table tbody tr.hpc-values-row-default td {
    background: var(--hpc-solv-accent-soft);
}
.d3view-hpcservers-edit-new-view .hpc-values-default-cell {
    width: 40px;
    text-align: center;
}
.d3view-hpcservers-edit-new-view .hpc-values-star {
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    color: var(--hpc-solv-text-3);
    cursor: pointer;
    border-radius: var(--hpc-solv-r-sm);
    transition: var(--hpc-solv-t);
}
.d3view-hpcservers-edit-new-view .hpc-values-star:hover,
.d3view-hpcservers-edit-new-view .hpc-values-star:focus {
    color: #f59e0b;
    background: var(--hpc-solv-surface-2);
    outline: none;
}
.d3view-hpcservers-edit-new-view .hpc-values-row-default .hpc-values-star {
    color: var(--hpc-solv-accent);
}
.d3view-hpcservers-edit-new-view .hpc-values-default-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 800;
    color: var(--hpc-solv-accent);
    background: #fff;
    border: 1px solid var(--hpc-solv-accent);
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
}
/* R2026-46: the separate #default_value dropdown is superseded by the star column above for
   select/bool attributes (folded via JS toggling this class); the row/select still exist in the DOM
   as the hidden field the save path reads. Non-foldable types (scalar/limit/file/remote_lookup) keep
   this row visible via the existing .hidden class toggling done in checkType()/populateValuesDefaultSelects(). */
.d3view-hpcservers-edit-new-view .hpc-default-value-row.hpc-default-value-row-folded {
    display: none !important;
}

/* =========================================================================
   IMPORT-FROM-SERVER SOLVER PICKER (modal body content)
   ========================================================================= */
.hpc-import-solver-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hpc-import-solver-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    transition: .16s cubic-bezier(.4, 0, .2, 1);
}
.hpc-import-solver-picker-item:hover {
    border-color: #2563eb;
    background: #e7f1ff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.hpc-import-solver-picker-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hpc-import-solver-picker-item:hover .hpc-import-solver-picker-icon {
    background: #ffffff;
    color: #2563eb;
}
.hpc-import-solver-picker-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hpc-import-solver-picker-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 13.5px;
}
.hpc-import-solver-picker-meta {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hpc-import-solver-picker-go {
    flex-shrink: 0;
    color: #94a3b8;
}

/* =========================================================================
   R2026-46 (fix 7) - 2-step IMPORT FLOW (breadcrumb FlowModal in the modal body)
   ========================================================================= */
.hpc-import-flow-modal .hpc-import-flow {
    min-height: 320px;
}
.hpc-import-flow-modal .gi-body {
    padding: 16px 18px;
}

/* -------------------------------------------------------------------------
   Added by shashank2104 on 07/21/2026 - R2026-46 - Import flow now docked in a
   right-side panel INSIDE the editor root. The editor-scoped sidebar-rail rules
   (`.d3view-hpcservers-edit-new-view .gi-main-container` / `nav.gi-stepper-nav`
   in hpc-redesign-shell.css) otherwise capture this nested flow and force its
   breadcrumb stepper into the 240px vertical rail. Restore the horizontal
   breadcrumb layout for the import flow only. Higher specificity + later cascade
   (this file concats after the shell) win over those editor rules.
   ------------------------------------------------------------------------- */
.d3view-hpcservers-edit-new-view .hpc-import-flow .gi-main-container {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    border: none;
    background: transparent;
    height: 100%;
}
.d3view-hpcservers-edit-new-view .hpc-import-flow .gi-main-container > section.gi-body {
    flex: 1 1 auto;
    min-height: 0;
}
.d3view-hpcservers-edit-new-view .hpc-import-flow .gi-main-container > section.gi-controls,
.d3view-hpcservers-edit-new-view .hpc-import-flow .gi-main-container > .gi-controls {
    flex: 0 0 auto;
}
/* Breadcrumb bar: horizontal top strip, not the sidebar rail */
.d3view-hpcservers-edit-new-view .hpc-import-flow nav.gi-stepper-nav.gi-stepper-breadcrumbs {
    display: flex !important;
    flex: 0 0 auto;
    height: 40px;
    min-height: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    border-right: none;
    padding: 0 4px;
    align-items: center;
}
.d3view-hpcservers-edit-new-view .hpc-import-flow nav.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto;
    gap: 0;
}
.d3view-hpcservers-edit-new-view .hpc-import-flow nav.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items > li.gi-stepper-nav-item {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    float: none !important;
    text-align: center;
    margin-right: 8px;
}
/* selected server row carries the accent state */
.hpc-import-solver-picker-item.hpc-import-picker-selected {
    border-color: #2563eb;
    background: #e7f1ff;
}
.hpc-import-solver-picker-item.hpc-import-picker-selected .hpc-import-solver-picker-icon {
    background: #ffffff;
    color: #2563eb;
}
.hpc-import-flow-loading {
    padding: 40px 20px;
    text-align: center;
    color: #475569;
    font-size: 13px;
}
.hpc-import-flow-loading i {
    margin-right: 8px;
    color: #2563eb;
}
.hpc-import-flow-empty {
    padding: 40px 20px;
    text-align: center;
    color: #475569;
}
.hpc-import-flow-empty i {
    display: block;
    font-size: 26px;
    color: #94a3b8;
    margin-bottom: 8px;
}
.hpc-import-flow-empty p {
    margin: 0;
    font-size: 13px;
}

/* Execution Workflows step */
.hpc-exec-wf-wrap { min-height: 0; }

.hpc-exec-wf-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    max-width: 620px;
    margin: 0 auto;
}
.hpc-exec-wf-start-icon {
    font-size: 34px;
    color: #2c5282;
    background: #e0ecf8;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 8px;
    margin-bottom: 14px;
}
.hpc-exec-wf-start h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px;
}
.hpc-exec-wf-start p {
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 10px;
}
.hpc-exec-wf-start-hint { color: #2c5282; }
.hpc-exec-wf-start-note {
    font-size: 11px;
    color: #999;
    margin-top: 14px;
}
.hpc-exec-wf-start-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.hpc-exec-wf-list { padding: 4px 2px 12px; }
.hpc-exec-wf-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.hpc-exec-wf-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.hpc-exec-wf-card-main { flex: 1 1 0; min-width: 0; }
.hpc-exec-wf-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.hpc-exec-wf-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
}
.hpc-exec-wf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hpc-exec-wf-badge-solver { background: #e0ecf8; color: #2c5282; }
.hpc-exec-wf-badge-canvas { background: #d4edda; color: #155724; }
.hpc-exec-wf-badge-native { background: #fff3cd; color: #856404; }
.hpc-exec-wf-card-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 5px;
}
.hpc-exec-wf-card-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #888;
}
.hpc-exec-wf-card-meta i { margin-right: 3px; color: #999; }
.hpc-exec-wf-card-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.hpc-exec-wf-import-message {
    background: #d1ecf1;
    color: #0c5460;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.hpc-exec-wf-import-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 8px;
}
.hpc-exec-wf-import-all {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin: 0;
    cursor: pointer;
}
.hpc-exec-wf-import-all input { margin-right: 6px; }
.hpc-exec-wf-import-source { font-size: 11px; color: #888; }
.hpc-exec-wf-import-row {
    display: block;
    padding: 7px 8px;
    border-radius: 6px;
    font-weight: normal;
    margin: 0 0 2px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.hpc-exec-wf-import-row:hover { background: #f0f0f0; }
.hpc-exec-wf-import-row.already { background: #fff7e6; }
.hpc-exec-wf-import-row input { margin-right: 8px; }
.hpc-exec-wf-import-name { font-size: 12px; font-weight: 600; color: #333; }
.hpc-exec-wf-import-meta {
    display: block;
    font-size: 11px;
    color: #888;
    margin-left: 22px;
}
.hpc-exec-wf-import-empty {
    text-align: center;
    color: #999;
    font-size: 12px;
    padding: 30px 10px;
}
.hpc-exec-wf-import-empty i { display: block; font-size: 26px; margin-bottom: 8px; }

.hpc-exec-wf-steps-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}
.hpc-exec-wf-steps-name { font-size: 13px; font-weight: 600; color: #222; }
.hpc-exec-wf-steps-count { font-size: 11px; color: #888; }
.hpc-exec-wf-steps-list { padding-left: 22px; margin: 0; }
.hpc-exec-wf-steps-list li {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
}
.hpc-exec-wf-steps-list li:last-child { border-bottom: none; }
.hpc-exec-wf-step-worker {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: #2c5282;
}
.hpc-exec-wf-step-label {
    font-size: 11px;
    color: #555;
    margin-left: 8px;
}
.hpc-exec-wf-step-desc {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Solvers / Post-processors -- list across the top rather than down the side.
   A server has a handful of either, so a full-height column spent most of its
   space empty while the editor below it was cramped. The list is a horizontal
   strip that scrolls when it has to, and the editor gets the full width.
   Written as an override on .hpc-solvers-layout-top so the original column
   layout is still there and one class switches between them.
   --------------------------------------------------------------------------- */

.d3view-hpcservers-edit-new-view .hpc-solvers-list-row.hpc-solvers-layout-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* The side-by-side layout makes this a fixed-height scroll container (height:100%,
       overflow:auto). Stacked, that reserved the old column's full height above the
       editor and pushed it ~760px down the page -- the editor was in the DOM with all
       its rows and simply below the fold. Height follows content here; the editor panel
       already scrolls its own attribute list. */
    height: auto !important;
    overflow: visible;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-column-1-wrap {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-list-column {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding-bottom: 4px;
}

/* the drag-to-resize grip only means something for a side column */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-column-1-resize-handle {
    display: none;
}

/* one line: title | the list itself | search | actions */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-list-title {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-search-wrap {
    margin: 0;
    width: 168px;
    flex: 0 0 auto;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-list-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* the list is the part that gives -- it takes the space left over and scrolls */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 2px;
    scrollbar-width: thin;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.solverItem {
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
    max-width: 180px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.solverItem:hover {
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.solverItem.active {
    border-color: #2c5282;
    box-shadow: 0 2px 8px rgba(44, 82, 130, 0.15);
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.solverItem .hpc-solver-item-inner {
    padding: 2px 4px 2px 2px;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.solverItem .hpc-solver-item-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* hidden by the search filter -- must not leave a gap in a flex row */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList li.hpc-solver-item-search-hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-list-header {
        flex-wrap: wrap;
    }
    .d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList {
        order: 3;
        flex-basis: 100%;
    }
    .d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-search-wrap {
        margin-left: auto;
    }
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-editor-column {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    padding-left: 0 !important;
}

@media (max-width: 900px) {
    .d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-search-wrap {
        margin-left: 0;
        width: 100%;
    }
}

/* A strip that scrolls needs to look like one. Ten solvers cannot fit beside a title,
   a search box and the buttons at any sane width, so the overflow is expected -- what is
   not acceptable is it being invisible. The fade appears only while there is more to the
   right, driven by .has-overflow-right from the scroll handler. */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-strip-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-strip-wrap:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.97));
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-strip-wrap.has-overflow-right:after {
    opacity: 1;
}

.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top .hpc-solvers-strip-count {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    padding: 0 2px;
}

/* a visible, slim scrollbar beats an invisible one */
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList::-webkit-scrollbar {
    height: 6px;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList::-webkit-scrollbar-thumb {
    background: #d0d5dc;
    border-radius: 3px;
}
.d3view-hpcservers-edit-new-view .hpc-solvers-layout-top ul.solversList::-webkit-scrollbar-thumb:hover {
    background: #b6bdc7;
}

/* ---------------------------------------------------------------------------
   Relationship diagram -- the server as a picture. Opened from the Relationships
   button in the editor header; nothing else on the page changes while it is up.
   --------------------------------------------------------------------------- */

.hpc-topology-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10600;
}

.hpc-topology-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17, 24, 32, .62);
}

.hpc-topology-panel {
    position: absolute;
    top: 3%; left: 3%; right: 3%; bottom: 3%;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hpc-topology-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e4e8ec;
    flex: 0 0 auto;
}

.hpc-topology-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1f2933;
}

.hpc-topology-title .fa { color: #0296c8; margin-right: 4px; }

.hpc-topology-sub {
    font-size: 12px;
    color: #7b8794;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hpc-topology-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hpc-topology-toggle {
    font-size: 12px;
    font-weight: normal;
    color: #52606d;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
}

.hpc-topology-toggle input { margin-right: 5px; vertical-align: -1px; }

.hpc-topology-canvas {
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px 4px 4px;
    background:
        linear-gradient(90deg, rgba(0,0,0,.028) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(rgba(0,0,0,.028) 1px, transparent 1px) 0 0 / 28px 28px,
        #fcfdfe;
}

.hpc-topology-svg { display: block; }

.hpc-topology-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    fill: #9aa5b1;
}

.hpc-topology-empty,
.hpc-topology-more {
    font-size: 11px;
    fill: #9aa5b1;
    font-style: italic;
}

.hpc-topology-node { cursor: pointer; }
.hpc-topology-node[data-step=""] { cursor: default; }

.hpc-topology-node rect {
    fill: #fff;
    stroke: #cbd2d9;
    stroke-width: 1.4;
}

.hpc-topology-node:hover rect { stroke-width: 2.2; }

.hpc-topology-node-title {
    font-size: 12.5px;
    font-weight: 600;
    fill: #1f2933;
}

.hpc-topology-node-detail {
    font-size: 10.5px;
    fill: #7b8794;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hpc-topology-node-portal rect { stroke: #0296c8; fill: #f0fbff; }
.hpc-topology-node-host   rect { stroke: #8a94a6; fill: #f7f8fa; }
.hpc-topology-node-server rect { stroke: #1f2933; fill: #f4f6f8; stroke-width: 2; }
.hpc-topology-node-queue  rect { stroke: #f0a500; fill: #fffaf0; }
.hpc-topology-node-solver rect { stroke: #2f8f4e; fill: #f3fbf5; }
.hpc-topology-node-post   rect { stroke: #8054c8; fill: #f8f5fd; }

.hpc-topology-badge-bg { fill: #eef1f5; stroke: none; }

.hpc-topology-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    fill: #52606d;
    text-anchor: middle;
}

.hpc-topology-edge {
    fill: none;
    stroke: #b8c1cb;
    stroke-width: 1.3;
}

.hpc-topology-arrow-head { fill: #b8c1cb; stroke: none; }

.hpc-topology-edge-queue  { stroke: #f0a500; }
.hpc-topology-edge-solver { stroke: #2f8f4e; }
.hpc-topology-edge-binary { stroke: #0a7ea4; }
.hpc-topology-edge-post   { stroke: #8054c8; }

/* "no restriction" -- one line to the group instead of a curve per member */
.hpc-topology-edge-all { stroke-dasharray: 5 4; }

/* nothing names it, so it hangs off the server rather than floating unattached */
.hpc-topology-edge-unclaimed {
    stroke: #b8c1cb;
    stroke-dasharray: 2 3;
}

.hpc-topology-node-binary rect { stroke: #0a7ea4; fill: #f0f9fc; }

/* Hovering a solver lifts what it reaches and lets the rest fall back. */
.hpc-topology-svg.is-focusing .hpc-topology-edge { opacity: .12; }
.hpc-topology-svg.is-focusing .hpc-topology-node rect { opacity: .35; }
.hpc-topology-svg.is-focusing .hpc-topology-node text { opacity: .3; }

.hpc-topology-svg .hpc-topology-edge.is-lit {
    opacity: 1;
    stroke-width: 2.4;
}

.hpc-topology-svg .hpc-topology-node.is-lit rect,
.hpc-topology-svg .hpc-topology-node.is-lit text { opacity: 1; }

.hpc-topology-svg .hpc-topology-node.is-lit rect { stroke-width: 2.4; }

.hpc-topology-legend {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 18px;
    border-top: 1px solid #e4e8ec;
    background: #fafbfc;
}

.hpc-topology-key {
    font-size: 11px;
    color: #52606d;
    padding-left: 16px;
    position: relative;
    white-space: nowrap;
}

.hpc-topology-key:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1.4px solid #cbd2d9;
    background: #fff;
}

.hpc-topology-key-portal:before { border-color: #0296c8; background: #f0fbff; }
.hpc-topology-key-host:before   { border-color: #8a94a6; background: #f7f8fa; }
.hpc-topology-key-server:before { border-color: #1f2933; background: #f4f6f8; }
.hpc-topology-key-queue:before  { border-color: #f0a500; background: #fffaf0; }
.hpc-topology-key-binary:before { border-color: #0a7ea4; background: #f0f9fc; }
.hpc-topology-key-solver:before { border-color: #2f8f4e; background: #f3fbf5; }
.hpc-topology-key-post:before   { border-color: #8054c8; background: #f8f5fd; }

.hpc-topology-legend-note {
    font-size: 11px;
    color: #9aa5b1;
    margin-left: auto;
    max-width: 52%;
    text-align: right;
}

@media (max-width: 760px) {
    .hpc-topology-panel { top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; }
    .hpc-topology-head { flex-wrap: wrap; }
    .hpc-topology-head-actions { margin-left: 0; width: 100%; }
    .hpc-topology-legend-note { margin-left: 0; max-width: 100%; text-align: left; }
}

/* ---------------------------------------------------------------------------
   All Attributes: the list scrolls in place, and can be filtered and sorted.
   Sorting and filtering are a VIEW -- dragging to reorder is switched off while
   one is active, because the stored order is what the submit form lays out.
   --------------------------------------------------------------------------- */

.hpc-attr-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 1px solid #e4e8ec;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.hpc-attr-tools-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #9aa5b1;
}

.hpc-attr-tools-spacer { margin-left: auto; }

.hpc-attr-search { position: relative; flex: 0 0 240px; }

.hpc-attr-search .fa {
    position: absolute;
    left: 9px;
    top: 8px;
    font-size: 11px;
    color: #9aa5b1;
}

.hpc-attr-search input {
    width: 100%;
    padding: 5px 9px 5px 26px;
    border: 1px solid #cbd2d9;
    border-radius: 5px;
    font-size: 12px;
}

.hpc-attr-chip {
    border: 1px solid #dde3e9;
    background: #fff;
    border-radius: 13px;
    padding: 3px 10px;
    font-size: 11px;
    color: #52606d;
    line-height: 1.5;
}

.hpc-attr-chip b { color: #9aa5b1; font-weight: 600; margin-left: 3px; }
.hpc-attr-chip:hover { border-color: #b8c1cb; }
.hpc-attr-chip.is-on { background: #1f2933; border-color: #1f2933; color: #fff; }
.hpc-attr-chip.is-on b { color: #aeb9c4; }

.hpc-attr-sort {
    border: 1px solid #cbd2d9;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12px;
    background: #fff;
    color: #31404e;
}

.hpc-attr-viewnote {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #fff8e6;
    border: 1px solid #f3e2b8;
    border-bottom: 0;
    font-size: 11.5px;
    color: #7a5c00;
}

.hpc-attr-viewnote a { margin-left: auto; }

/* The list scrolls inside its own box, so Save and the step controls do not move
   when a solver carries two hundred attributes. */
.hpc-attr-tablewrap.is-scrolling {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e4e8ec;
    border-radius: 0 0 6px 6px;
}

/* The table itself carries overflow:hidden (for its rounded corners). An ancestor with a
   clipping overflow between a sticky element and the box that actually scrolls makes the
   sticky resolve against the table instead of the wrapper, so the header never moves
   relative to the rows and reads as "not sticky". Inside the scrolling wrapper the table
   gives that up; the wrapper carries the rounding instead. Measured, not assumed: before
   this the header scrolled away with the rows. */
.hpc-attr-tablewrap.is-scrolling .hpc-attributes-table {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.hpc-attr-tablewrap.is-scrolling .hpc-attributes-table thead th {
    position: sticky !important;
    top: 0;
    z-index: 3;
    background: #fff;
    box-shadow: inset 0 -1px 0 #dde3e9;
}

.hpc-attr-tablewrap.is-scrolling .hpc-attributes-table { margin-bottom: 0; }

/* Nothing about a row should suggest it can be dragged while it is a view. */
.hpc-attr-nodrag .attributeItem { cursor: default; }

.hpc-attr-tablefoot {
    padding: 7px 12px;
    font-size: 11px;
    color: #9aa5b1;
    background: #fafbfc;
    border: 1px solid #e4e8ec;
    border-top: 0;
    border-radius: 0 0 6px 6px;
}


/* --- Attribute editor: pinned identity + tabs ------------------------------
   The form ran to 1880px in an 890px panel, which is a long scroll to reach a
   condition. What identifies the setting stays pinned; the rest is one click
   away. */

.new_input .hpc-attr-pinned {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 4px 0 12px;
    margin-bottom: 0;
    background: #fff;
}

.new_input .hpc-attr-pinned h3 {
    margin-top: 8px;
}

.new_input .hpc-attr-tabs {
    margin: 0 0 16px;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 132px;
    z-index: 3;
    background: #fff;
}

.new_input .hpc-attr-tabs > li > a,
.hpc-solver-section-tabs > li > a {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #888;
    border: none;
    background: transparent;
    border-radius: 6px 6px 0 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.new_input .hpc-attr-tabs > li > a:hover,
.hpc-solver-section-tabs > li > a:hover {
    color: #555;
    background: #f0f0f0;
}

.new_input .hpc-attr-tabs > li.active > a,
.new_input .hpc-attr-tabs > li.active > a:hover,
.new_input .hpc-attr-tabs > li.active > a:focus,
.hpc-solver-section-tabs > li.active > a,
.hpc-solver-section-tabs > li.active > a:hover,
.hpc-solver-section-tabs > li.active > a:focus {
    color: #2c5282;
    background: #fff;
    border: none;
    box-shadow: inset 0 -2px 0 #2c5282;
}

.new_input .hpc-attr-tabpane > .hpc-form-hint:first-child {
    margin-bottom: 14px;
}

/* --- Solver page: Attributes | Actions ----------------------------------- */

.hpc-solver-section-tabs {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
}

.hpc-solver-section-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 9px;
    background: #f0f0f0;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.hpc-solver-section-tabs > li.active .hpc-solver-section-count {
    background: #e0ecf8;
    color: #2c5282;
}

/* The panel is anchored to the window, not to .solver-editor, whose box starts
   wherever the attributes table sits and runs past the bottom of the screen --
   an ancestor with overflow:hidden then clipped the last ~180px, which is the
   scrollbar that appeared to overlap. _sizeAttributeSidebar() sets top/height. */

.d3view-hpcservers-edit-new-view .hpc-edit-attribute-sidebar {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 1060;
}

.hpc-edit-attribute-sidebar-body {
    overscroll-behavior: contain;
}

/* Conditions read as one list, so every row is the same row. */

.new_input .vis-cond-head {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
}

.new_input #visibility_conditions .row.vis-extra-row {
    margin-bottom: 6px !important;
}

.new_input #visibility_conditions .vis-extra-remove {
    padding: 6px 4px;
}

/* --- Actions: a list of rules, not a stack of forms ---------------------- */

.hpc-solver-section[data-section="actions"] .solver-actions-list {
    max-height: calc(100vh - 430px);
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.hpc-action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hpc-action-row:hover {
    border-color: #c6d9ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.hpc-action-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.hpc-action-row-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.hpc-action-row-summary {
    margin-top: 2px;
    font-size: 12px;
    color: #555;
    word-break: break-word;
}

.hpc-action-row-kw {
    color: #888;
    font-style: italic;
}

.hpc-action-row-actions {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Empty states -------------------------------------------------------- */

.hpc-empty-state {
    padding: 36px 24px;
    text-align: center;
    border: 1px dashed #e0e0e0;
    border-radius: 8px;
    background: #fbfbfc;
}

.hpc-empty-state-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 10px;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 18px;
    line-height: 44px;
}

.hpc-empty-state-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.hpc-empty-state-body {
    max-width: 520px;
    margin: 6px auto 16px;
    font-size: 12px;
    line-height: 1.6;
    color: #888;
}

/* --- The action drawer --------------------------------------------------- */

.hpc-action-drawer .hpc-action-form h3 {
    margin-top: 18px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #2c5282;
}

.hpc-action-drawer .hpc-action-form .row.hpc-action-cond-row {
    margin-bottom: 6px !important;
}

.hpc-action-drawer .hpc-action-form .row {
    margin-bottom: 0 !important;
}

/* Conditions on a single value of a select.
   The cell states what the row has, so the rule is readable without opening it, and the
   editor sits directly under the value it governs rather than in a list elsewhere that
   has to be matched up by eye. */
.d3view-hpcservers-edit-new-view .hpc-opt-cond-cell {
    width: 150px;
    text-align: center;
    white-space: nowrap;
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-toggle {
    font-size: 11px;
    font-weight: 600;
    color: var(--hpc-solv-text-3);
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-toggle.hpc-opt-cond-set {
    color: #d46b08;
    border-color: #ffd591;
    background: #fff7e6;
}

.d3view-hpcservers-edit-new-view .hpc-values-cond-row > .hpc-opt-cond-body {
    background: var(--hpc-solv-surface-2);
    border-top: 0;
    padding: 12px 16px;
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #888;
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-match {
    width: auto;
    display: inline-block;
}

.d3view-hpcservers-edit-new-view .hpc-opt-cond-line:last-child {
    margin-bottom: 0 !important;
}

/* /javascripts/plugins_src/multiselect/multiselect.css */
div.multiselect-container {
    margin: 0;
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: middle;
    min-width: 120px;
    width: 100%;
}
div.d3view-multiselect .ms-dd-toggle {
    cursor: pointer;
    display: flex;
}
div.d3view-multiselect .ms-dd-toggle .ms-value.isPlaceholder {
    color: dimgrey;
}
div.d3view-multiselect .pl-tag {
    /*background-color: #5bc0de;*/
    margin: 2px;
    /*padding-right: 0;*/
    padding: 5px 3px 5px 13px;
    display: inline-block;


    color: #ffffff!important;
    text-shadow: none;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
    font-weight: normal;
}
div.d3view-multiselect .pl-tag-remove {
    margin: 0 4px;
    cursor: pointer;
}
div.d3view-multiselect .pl-tag-remove:hover {
    color: red;
}
div.d3view-multiselect .ms-value-dd {
    color: grey;
}
div.d3view-multiselect .multiselect-container.open .ms-dd-toggle {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
div.d3view-multiselect .multiselect-container .ms-dd-toggle .ms-caret {
    transition: transform 0.2s linear;
}
div.d3view-multiselect .multiselect-container.open .ms-dd-toggle .ms-caret {
    transform: rotate(-180deg);
}
div.d3view-multiselect .multiselect-container.open .ms-dd-toggle[data-position="right"] .ms-caret {
    transform: rotate(-90deg);
}
div.d3view-multiselect .multiselect-container.open .ms-dd-toggle[data-position="left"] .ms-caret {
    transform: rotate(90deg);
}
div.d3view-multiselect {
    overflow: unset!important;
}
div.d3view-multiselect .vlist {
    border: 1px solid #EEE!important;
}
div.d3view-multiselect .vlist > div {
    padding: 0!important;
    border: none!important;
}
div.d3view-multiselect .vlist .ui-selecting.vrow, div.d3view-multiselect .vlist .ui-selected.vrow {
    /*background-color: #d3f4ff73!important;*/
    /*color: #000!important;*/

    color: #ffffff!important;
    text-shadow: none;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
}
div.d3view-multiselect .multiselect-body:hover .ui-resizable-handle {
    background-color: #f5f5f5;
}
div.d3view-multiselect .multiselect-body:hover .ui-resizable-handle:hover,
div.d3view-multiselect .multiselect-body:hover .ui-resizable-handle.resizing {
    background-color: red;
}

div.d3view-multiselect .vlist {
    height: 100%;
    min-height: 130px;
}
div.d3view-multiselect .vlist .vrow {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 15px;
}
div.d3view-multiselect .vlist .vrow:hover {
    background-color: #f5f5f5;
}
div.d3view-multiselect .vlist .vrow .typeahead-item {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
div.d3view-multiselect .vlist .vrow:not(.disabled) {
    cursor: pointer;
}
div.d3view-multiselect .vlist .vrow.disabled {
    color: gray;
}
div.d3view-multiselect .vlist .vrow > p {
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.d3view-multiselect .selected_count {
    font-weight: 500;
}
div.d3view-multiselect .badge.hasValue {
    background-color: #428bca;
    color: #FFF!important;
    /*cursor: pointer;*/
}
div.d3view-multiselect .dropdown > span.hasValue {
    background-color: #d3f4ff73;
}
div.d3view-multiselect span.twitter-typeahead {
    width: 100%;
}
div.d3view-multiselect .buttons-group button:focus {
    outline: none;
}
div.d3view-multiselect .search-container .input-group-addon .btn {
    padding: 5px 12px;
    border: none;
}
div.d3view-multiselect .search-container .input-group-addon {
    padding: 0;
    z-index: 3;
}
div.d3view-multiselect .search-container .input-group-addon.open {
    background: #DDD;
}
div.d3view-multiselect .sort_container ul li a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
div.d3view-multiselect .sort_container ul li.dropdown-header {
    padding: 3px 0;
}
div.d3view-multiselect li.dropdown-header > a {
    color: #a5a5a5!important;
    text-decoration: none!important;
    cursor: default;
}
div.d3view-multiselect .sort_container ul li[data-id] a:hover{
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    background-color: #0081c2;
    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
    background-repeat: repeat-x;
}
div.d3view-multiselect .sort_container li.active > a {
    background-color: #2e6da4;
    background-image: -webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -o-linear-gradient(top,#337ab7 0,#2e6da4 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));
    background-image: linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
    background-repeat: repeat-x;
    color: #fff!important;
    text-decoration: none;
    outline: 0;
}

div.d3view-multiselect .options-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9em;
}
div.d3view-multiselect span.multiselect-option {
    /*border: 1px solid #ccc;*/
    padding: 0 6px;
    padding-right: 0;
    display: flex;
    align-items: center;
    /*border-radius: 3px;*/
    /*-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);*/
    /*box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);*/
    /*-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;*/
    /*-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
    /*transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
    margin-right: 10px;
}
div.d3view-multiselect .options-container button {
    margin-left: 5px;
}
div.d3view-multiselect .id_range_slider {
    width: 90%;
    margin: 0 auto;
}

div.d3view-multiselect .search-container .dropdown-menu {
    width: 25vw;
}
div.d3view-multiselect .multiselect-footer .count {
    margin: 4px 0;
    color: var(--plugin-primary-color);
    font-weight: 500;

}

.d3view-multiselect-dd {
    position: fixed;
    padding: 15px;
    z-index: 1200;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    min-width: 350px;
    min-height: 300px;
}
.d3view-multiselect-dd .vlist > div {
    min-height: 200px;
}
.d3view-multiselect .multiselect-footer .remove-group {
    cursor: pointer;
}
.d3view-multiselect .multiselect-footer .remove-group:hover {
    color: red;
}

.d3view-multiselect span.close-dd {
    position: absolute;
    right: -26px;
    top: -25px;
    background: #f5f5f5;
    color: #333;
    /* padding: 4px; */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}
.d3view-multiselect span.close-dd:hover {
    color: red;
}

.d3view-multiselect.allowsSorting .pl-tags {
    display: flex;
    flex-wrap: wrap;
}
.d3view-multiselect.allowsSorting .ms-dd-toggle.form-control {
    height: auto;
}


div.d3view-multiselect .multiselect-body.showCounter .vlist .vrow:before {
    content: attr(index) '.';
    margin-right: 5px;
}

/** https://xfinity.atlassian.net/browse/SIM-843 **/
div.d3view-multiselect .vlist > div {
    min-height: 130px;
}

/** Added by shashank2104 on 2026-04-22 - R0-3377 - sticky Apply/Close footer for enlarged multiselect sidebar **/
.d3view-multiselect-sidebar .d3view-multiselect .multiselect-sidebar-footer {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    margin-top: 8px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.08);
    z-index: 2;
}
.d3view-multiselect-sidebar .d3view-multiselect .multiselect-sidebar-footer .count {
    font-size: 12px;
}
.d3view-multiselect-sidebar .d3view-multiselect .multiselect-sidebar-footer .btn + .btn {
    margin-left: 6px;
}

/** Added by shashank2104 on 2026-07-20 - R2026-46 - opt-in modern multiselect variant (toggle / compact dropdown / chips). All rules scoped under .d3view-multiselect.ms-modern; --d3v-* tokens with fallbacks. **/
.d3view-multiselect.ms-modern {
    --msm-accent: var(--d3v-accent, #3b82f6);
    --msm-accent-soft: var(--d3v-accent-soft, #e7f1ff);
    --msm-bg: var(--d3v-bg-primary, #ffffff);
    --msm-bg-tertiary: var(--d3v-bg-tertiary, #f1f5f9);
    --msm-border: var(--d3v-border, #e2e8f0);
    --msm-border-strong: var(--d3v-border-strong, #cbd5e1);
    --msm-text: var(--d3v-text-primary, #1e293b);
    --msm-text-2: var(--d3v-text-secondary, #475569);
    --msm-text-muted: var(--d3v-text-muted, #94a3b8);
    --msm-success: var(--d3v-success, #10b981);
    --msm-radius: var(--d3v-r-md, 8px);
    --msm-radius-sm: var(--d3v-r-sm, 4px);
    --msm-radius-full: var(--d3v-r-full, 999px);
    --msm-shadow: var(--d3v-sh-lg, 0 6px 20px rgba(15, 23, 42, .12));
    --msm-t: var(--d3v-t-fast, .16s cubic-bezier(.4, 0, .2, 1));
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

/* toggle (boolean yes/no) */
.d3view-multiselect.ms-modern .ms-modern-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    cursor: pointer;
    user-select: none;
    outline: none;
}
.d3view-multiselect.ms-modern .ms-modern-switch {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: var(--msm-radius-full);
    background: var(--msm-border-strong);
    transition: background var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-toggle.on .ms-modern-switch {
    background: var(--msm-success);
}
.d3view-multiselect.ms-modern .ms-modern-toggle.on .ms-modern-knob {
    left: 20px;
}
.d3view-multiselect.ms-modern .ms-modern-toggle:focus .ms-modern-switch,
.d3view-multiselect.ms-modern .ms-modern-toggle:focus-visible .ms-modern-switch {
    box-shadow: 0 0 0 3px var(--msm-accent-soft);
}
.d3view-multiselect.ms-modern .ms-modern-toggle-label {
    font-size: 13px;
    color: var(--msm-text-2);
    min-width: 26px;
}

/* compact single-select dropdown (fully custom trigger + popover, no native <select>) */
.d3view-multiselect.ms-modern .ms-modern-select-wrap {
    position: relative;
    width: 100%;
}
.d3view-multiselect.ms-modern .ms-modern-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    background: var(--msm-bg);
    color: var(--msm-text);
    font-size: 13.5px;
    cursor: pointer;
    outline: none;
    transition: border-color var(--msm-t), box-shadow var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-select:hover {
    border-color: var(--msm-border-strong);
}
.d3view-multiselect.ms-modern .ms-modern-select:focus,
.d3view-multiselect.ms-modern .ms-modern-select:focus-visible {
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px var(--msm-accent-soft);
}
.d3view-multiselect.ms-modern .ms-modern-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-multiselect.ms-modern .ms-modern-select-value.placeholder {
    color: var(--msm-text-muted);
}
.d3view-multiselect.ms-modern .ms-modern-caret {
    flex: 0 0 auto;
    color: var(--msm-text-muted);
    font-size: 13px;
    transition: transform var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-select-wrap .ms-modern-menu.open ~ .ms-modern-select .ms-modern-caret,
.d3view-multiselect.ms-modern .ms-modern-select[aria-expanded="true"] .ms-modern-caret {
    transform: rotate(180deg);
}

/* small multi-select chips + light Add dropdown */
.d3view-multiselect.ms-modern .ms-modern-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    background: var(--msm-bg);
    transition: border-color var(--msm-t), box-shadow var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-chips:focus-within {
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px var(--msm-accent-soft);
}
.d3view-multiselect.ms-modern .ms-modern-placeholder {
    color: var(--msm-text-muted);
    font-size: 13px;
}
.d3view-multiselect.ms-modern .ms-modern-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--msm-accent-soft);
    color: var(--msm-accent);
    border-radius: var(--msm-radius-sm);
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
}
.d3view-multiselect.ms-modern .ms-modern-chip-remove {
    cursor: pointer;
    opacity: .65;
    font-size: 11px;
    transition: opacity var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-chip-remove:hover {
    opacity: 1;
}
.d3view-multiselect.ms-modern .ms-modern-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: var(--msm-text-muted);
    cursor: pointer;
    font-size: 12.5px;
    padding: 2px 6px;
    border-radius: var(--msm-radius-sm);
    outline: none;
    transition: color var(--msm-t), background var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-add:hover,
.d3view-multiselect.ms-modern .ms-modern-add:focus {
    color: var(--msm-accent);
    background: var(--msm-bg-tertiary);
}
.d3view-multiselect.ms-modern .ms-modern-menu {
    display: none;
    position: absolute;
    z-index: 1200;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    min-width: 0;
    max-width: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--msm-bg);
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    box-shadow: var(--msm-shadow);
    padding: 4px;
}
.d3view-multiselect.ms-modern .ms-modern-menu.open {
    display: block;
}
.d3view-multiselect.ms-modern .ms-modern-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--msm-radius-sm);
    font-size: 13px;
    color: var(--msm-text-2);
    cursor: pointer;
    transition: background var(--msm-t), color var(--msm-t);
}
.d3view-multiselect.ms-modern .ms-modern-menu-item:hover {
    background: var(--msm-accent-soft);
    color: var(--msm-accent);
}
.d3view-multiselect.ms-modern .ms-modern-menu-item.disabled {
    color: var(--msm-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}
.d3view-multiselect.ms-modern .ms-modern-menu-check {
    flex: 0 0 14px;
    width: 14px;
    font-size: 11px;
    color: var(--msm-accent);
    visibility: hidden;
}
.d3view-multiselect.ms-modern .ms-modern-menu-item.ms-modern-selected {
    color: var(--msm-accent);
    font-weight: 600;
    background: var(--msm-accent-soft);
}
.d3view-multiselect.ms-modern .ms-modern-menu-item.ms-modern-selected .ms-modern-menu-check {
    visibility: visible;
}

/* ------------------------------------------------------------------ *
 * Modern skin for the fallback PANEL (large list / ajax / searchable).
 * Only applies when the container/popover also carries .ms-modern, so
 * every default (non-modern) panel elsewhere is byte-for-byte unchanged.
 * ------------------------------------------------------------------ */
/* closed dropdown toggle */
.d3view-multiselect.ms-modern.ms-modern-panel .ms-dd-toggle,
.d3view-multiselect.ms-modern.ms-modern-panel .ms-dd-toggle.form-control {
    min-height: 38px;
    height: auto;
    padding: 4px 10px;
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    box-shadow: none;
    transition: border-color var(--msm-t), box-shadow var(--msm-t);
}
.d3view-multiselect.ms-modern.ms-modern-panel .multiselect-container.open .ms-dd-toggle {
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px var(--msm-accent-soft);
}
/* chips inside the toggle -> accent-soft pills (replace legacy blue gradient) */
.d3view-multiselect.ms-modern .pl-tag {
    background: var(--msm-accent-soft) !important;
    background-image: none !important;
    color: var(--msm-accent) !important;
    border-radius: var(--msm-radius-sm);
    padding: 3px 8px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
}
.d3view-multiselect.ms-modern .pl-tag-remove {
    color: var(--msm-accent);
    opacity: .7;
}
.d3view-multiselect.ms-modern .pl-tag-remove:hover {
    opacity: 1;
    color: var(--msm-accent);
}
.d3view-multiselect.ms-modern .ms-value-dd {
    color: var(--msm-text-muted);
}
.d3view-multiselect.ms-modern .ms-caret {
    color: var(--msm-text-muted);
}
/* body-mounted popover shell */
.d3view-multiselect-dd.ms-modern {
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    box-shadow: var(--msm-shadow);
}
/* search box */
.d3view-multiselect.ms-modern input.search_item {
    height: 36px;
    border: 1px solid var(--msm-border);
    border-radius: var(--msm-radius);
    box-shadow: none;
    transition: border-color var(--msm-t), box-shadow var(--msm-t);
}
.d3view-multiselect.ms-modern input.search_item:focus {
    border-color: var(--msm-accent);
    box-shadow: 0 0 0 3px var(--msm-accent-soft);
}
/* list */
.d3view-multiselect.ms-modern .vlist {
    border: 1px solid var(--msm-border) !important;
    border-radius: var(--msm-radius);
    overflow: hidden;
}
.d3view-multiselect.ms-modern .vlist .vrow {
    transition: background var(--msm-t);
}
.d3view-multiselect.ms-modern .vlist .vrow:hover {
    background: var(--msm-bg-tertiary);
}
.d3view-multiselect.ms-modern .vlist .ui-selected.vrow,
.d3view-multiselect.ms-modern .vlist .ui-selecting.vrow {
    background: var(--msm-accent-soft) !important;
    background-image: none !important;
    color: var(--msm-accent) !important;
    text-shadow: none;
    font-weight: 600;
}
/* header + footer chrome */
.d3view-multiselect.ms-modern .multiselect-header .btn,
.d3view-multiselect.ms-modern .multiselect-footer .btn {
    border-radius: var(--msm-radius-sm);
    transition: var(--msm-t);
}
.d3view-multiselect.ms-modern .multiselect-footer .count {
    color: var(--msm-accent);
}
/* popover action buttons */
.d3view-multiselect-dd.ms-modern .footer-btns .done {
    border-radius: var(--msm-radius-sm);
}
.d3view-multiselect-dd.ms-modern .close-dd {
    color: var(--msm-text-muted);
}
/* /stylesheets/filters.css */
div.d3view-filters {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
}
div.d3view-filters[data-mode="view"] .filters-container {
    overflow: unset;
}
div.d3view-filters.focussed {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
div.d3view-filters .switch-view {
    cursor: pointer;
}
div.d3view-filters .advanced-filters {
    width: auto;
    flex: 1 1 auto;
    position: relative;
    margin: 0 10px;
    margin-left: 0;
    display: flex;
    height: auto!important;
    align-items: center;
    padding: 0 12px;
}
div.d3view-filters .filters-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    flex: 1 1 0%;
    padding: 6px 0px;
    /*margin: 0 12px;*/
    height: auto;
    gap: 10px 3px;
}
div.d3view-filters .bootstrap-switch {
    margin-right: 10px;
    height: 25px;
    /*width: auto!important;*/
}
div.d3view-filters:not(.local) .filters-container {
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
}
div.d3view-filters .filters-icon {
    /*position: absolute;*/
    /*left: 4px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    z-index: 2;
    font-size: 1.3em;
}
div.d3view-filters .filters-help-icon {
    /*position: absolute;*/
    /*right: 10px;*/
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    cursor: pointer;
    z-index: 2;
    /*font-size: 1.3em;*/
}
div.d3view-filters .filters-help-icon:hover {
    color: red;
}

div.filters-container:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}
div.filters-container span.filter-tag {
    margin: 4px;
    cursor: pointer;
}
div.filters-container span.filter-tag[data-noneditable="true"], div.filters-container span.filter-tag[data-noneditable="true"] .filter-value {
    cursor: not-allowed;
    opacity: 0.65;
}
div.filters-container span.filter-tag.ui-sortable-placeholder {
    display: inline-block!important;
    width: 100px;
    visibility: visible;
}
div.filters-container span.filter-tag .filter-value {
    min-width: 30px;
    display: inline-block;
    min-height: 1em;
    font-weight: 700;
    /*color: #FFF!important;*/
    cursor: pointer;

    margin-left: 5px;
}
div.filters-container span.filter-tag .filter-value.isDefault {
    /*color: #79ff25;*/
    color: #FFF;
}
div.filters-container span.filter-tag > span.label {
    margin-right: 0;
    padding: 0.4em .8em .4em;
    padding-right: 20px;
    position: relative;
    line-height: 1;
    display: block;
    height: 100%;
    font-weight: normal;
    border-radius: 30px;

    display: flex;
    align-items: center;
}
div.filters-container span.filter-tag > span.label > .filter-icon {
    margin-right: 5px;
}
div.filters-container span.filter-value-tag {
    background-color: #f5f5f5;
    color: #4f5359;
    margin-right: 4px;
    cursor: pointer;
}
div.filters-container input.filter-input {
    height: 16px;
    padding: 3px;
    font-size: 9px;
    border: none;
    width: 125px;
}
div.filters-container span.filter-value-tag.label {
    font-size: 0.8em!important;
}
div.filters-container span.remove-filter-value-tag {
    cursor: pointer;
}
div.filters-container span.remove-filter-value-tag:hover {
    color: red;
}

div.filters-container span.remove-filter-tag {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    cursor: pointer;
    color: #333;
    background-color: #eee;
    padding:3px 4px;
    border-radius:12px;
    opacity: 0;
    pointer-events: none;
}
div.filters-container .filter-tag:hover span.remove-filter-tag {
    opacity: 1;
    pointer-events: all;
}

div.filters-container span.remove-filter-tag:hover {
    color: #eee!important;
    background-color: #333!important;
    border:1px solid #333!important;
}

div.filters-container > span.filter-editor {
    flex: 1 1 0;
    margin: 4px;
    min-width: 50px;
    position: relative;

    min-height: 30px;


    display: flex;
    align-items: center;
}
div.filters-container span.filter-editor > span[contenteditable] {
    display: block;
    height: 25px;
    cursor: text;
    top: 4px;
    position: relative;
}
div.filters-container span.filter-editor .filter-editor-search {
    position: absolute;
    left: 1px;
    top: 6px;
    color: gray;
}
div.filters-container span.filter-editor > span[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    position: absolute;
    color: gray;
    background-color: transparent;
    /*font-family: FontAwesome;*/
    margin-left: 18px;
}





div.d3view-filters-external {
    position: absolute;
    z-index: 8000;
    /*background-color: #4f5359;*/
    /*color: #FFF;*/
    background: #FFF;
    padding: 0;
    border: 1px solid #DDD;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    border-radius: 4px;
    width: 275px;
}
div.d3view-filters-external.d3view-filters-values-list-container:before,
div.d3view-filters-external.d3view-filters-values-list-container:after {
    content: '';
    position: absolute;
    left: 6px;
    top: -9px;
    width: 0;
    border-style: solid;
}
div.d3view-filters-external.d3view-filters-values-list-container:before {
    border-color: transparent transparent #DDD transparent;
    border-width: 0 8px 8px 8px;
}
div.d3view-filters-external.d3view-filters-values-list-container:after {
    border-color: transparent transparent #FFF transparent;
    border-width: 0 7px 7px 7px;
    top: -7px;
    left: 7px;
}

/* for date filter */
div.d3view-filters-external.d3view-filters-values-list-container.date_filter:before {
    content: unset!important;
}
div.d3view-filters-external.d3view-filters-values-list-container.date_filter {
    background-color: #FFF;
    border: none;
    width: auto;
}
div.d3view-filters-external.d3view-filters-values-list-container.date_filter input.filter_datepicker {
    display: none;
}
div.d3view-filters-external.d3view-filters-values-list-container.date_filter .daterangepicker {
    position: relative!important;
    top: 0!important;
    left: 0!important;
    color: initial!important;
}


div.d3view-filters-external .filters-external-header {
    margin-bottom: 6px;
    padding: 10px;
    border-bottom: 1px solid #DDD;
    position: relative;
}

div.d3view-filters-external h4.ext-filter-title {
    display: inline-block;
    /*color: #FFFF;*/
}
div.d3view-filters-external ul {
    margin-bottom: 0;
    max-height: 250px;
    overflow: auto;
    min-height: 50px;
}
div.d3view-filters-external ul li {
    /*padding: 5px 5px 5px 10px;*/
    border: none;
    cursor: pointer;
    position: relative;
    word-break: break-all;
}
div.d3view-filters-external ul li.selected:before {
    content: '\f00c';
    font-family: FontAwesome;
    color: #428bca;
    position: absolute;
    left: 3px;
}
div.d3view-filters-external ul li.selected:hover:before {
    color: #4f5359;
}
/*div.d3view-filters-external ul li.selected {*/
    /*background-color: #FFF;*/
/*}*/
/*div.d3view-filters-external ul li.selected a {*/
    /*color: #4f5359;*/
/*}*/
div.d3view-filters-external ul li:hover, div.d3view-filters-external ul.filter-group > li.highlighted {
    background-color: #E0E0E0;
    /*color: #333;*/
}
div.d3view-filters-external ul li:hover a, div.d3view-filters-external ul.filter-group > li.highlighted a {
    /*color: #4f5359;*/
}
div.d3view-filters-external ul.filter-group > li a {
    color: #333;
    /*font-weight: 500;*/
    text-decoration: none;
}
div.d3view-filters-external li:hover .href_link {
    opacity: 1!important;
}
div.d3view-filters-external li:hover .href_link:hover {
    color: red;
}
div.d3view-filters-external .href_link {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    padding: 2px;
    right: 5px;
}
div.d3view-filters-external div.nested_items li.treeview-item:hover {
    background-color: #E0E0E0;
}
div.d3view-filters-external span.close-external-filters {
    position: absolute;
    cursor: pointer;
    right: 6px;
    top: 0;
    cursor: pointer;
}
div.d3view-filters-external span.close-external-filters:hover {
    color: red;
}



/* external container tags */
div.d3view-filters-external .filter-group.filter-tags {
    display: flex;
    flex-wrap: wrap;
}
div.d3view-filters-external .filter-group .tag {
    /*font-size: 0.9em;*/
    margin: 6px;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    white-space: normal;
    word-break: break-all;
}
div.d3view-filters-external .tags-container {
    margin-top: 5px;
    display: none;
    width: 100%;
}
div.d3view-filters-external .tags-container.active {
    display: block;
    width: 200px;
    max-height: 200px;
    overflow: auto;
}
div.d3view-filters-external .margin-center {
    margin: 0 auto;
}
div.d3view-filters-external .toggle-tags-view > button:focus {
    outline: none;
}
div.d3view-filters-external .filter-group .tag.selected {
    background-color: #0b586d;
}
div.d3view-filters-external .filter-group .tag:hover {
    background-color: #0b586d;
}
div.d3view-filters-external .treeview ul {
    box-shadow: none;
}
div.d3view-filters-external .treeview .list-group-item {
    /*padding: 5px 5px;*/
    border: none!important;
}
div.d3view-filters-external .treeview .list-group-item.isAdded {
    background-color: #428BCA;
    color: #FFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
div.d3view-filters-external .treeview .list-group-item .tag-icon {
    color: #5bc0de;
}
div.d3view-filters-external .treeview .list-group-item .indent {
    margin-left: -5px;
    margin-right: 13px;
}








div.filters-container .btn-d3view-filter {
    /*background: #003471 -webkit-gradient(linear,left top,left bottom,color-stop(.49,rgba(255,255,255,.2)),color-stop(.5,rgba(255,255,255,.1)),color-stop(1,rgba(255,255,255,.1)));*/
    /*border-color: #003471;*/
    /*color: #FFF;*/
    background-color: #ffffff;
    border-color: #93d0e4;
    color: #716b6b;
    padding: 3px 10px;
}
div.filters-container .btn-d3view-filter:hover {
    /*background-color: #001c3c;*/
    /*border-color: #001c3c;*/
    background-color: #f9f9f9;
    border-color: #066c8e;
    color: #595454;
}
div.filters-container a.filter, div.filters-container a.additional_filters {
    margin: 2px;
}
div.filters-container a.filter .filter-icon {
    position: relative;
    top: 4px;
}
div.filters-container a.filter:hover .remove-filter {
    display: inline-block;
}
div.filters-container a.filter .remove-filter {
    position: absolute;top: -3px; color: #666; display: none;right: -2px; padding-left: 1px;
}
div.filters-container a.filter .remove-filter:hover {
    color: #444;
}
div.filters-container .filter-tooltip {
    position: absolute;
    right: 9px;
    top: 9px;
    color: #AAA;
}
div.filters-container .filter-tooltip:hover {
    color: #428BCA;
}
div.filters-container a.filter .filter-val {
    color: #0b586d;
}
div.filters-container .filter-val .tag {
    margin-right: 3px;
    padding-right: 3px;
}
div.filters-container .filter-val .tag .tag-remove {
    margin-left: 5px;
    cursor: pointer;
    font-size: 12px;
}
div.filters-container .filter-val .tag .tag-remove:hover {
    color: #444;
}
div.filters-container li.dropdown > div.search-input > input.search_val {
    border-radius: 24px;
    border-color: #93d0e4;
    height: 26px;
}
div.filters-container li.dropdown > div.search-input > input.search_val::placeholder {
    font-family: FontAwesome;
}
div.filters-container .filters-list {
    float: left;
}
div.filters-container .filters-list > li {
    float: left;
    margin: 2px;
}
div.filters-container ul.filter-group {
    margin-bottom: 5px;
    max-height: 220px;
    overflow: auto;
}
div.filters-container ul.filter-group > li {
    padding: 6px 11px;
    cursor: pointer;
}
div.filters-container ul.filter-group > li label {
    cursor: pointer;
}
div.filters-container ul.filter-group > li:hover {
    background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
    background-repeat: repeat-x;
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
div.filters-container ul.filter-group > li:hover a {
    /*color: #FFF;*/
}
div.filters-container ul.filter-group > li > a {
    text-decoration: none;
}
div.filters-container ul.filter-group > li > a:hover {
    color: #337ab7;
}
div.filters-container .filter-footer button {
    margin: 3px;
}
div.filter-options .search-separator {
    border-top: 1px solid #CCC;
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #CCC;
}
div.filter-options .search-separator .and_op, div.filter-options .search-separator .or_op {
    background-color: #FFF;
    padding: 0 4px;
    position: relative;
    bottom: 6px;
    cursor: pointer;
}
div.filter-options .search-separator .and_op.selected, div.filter-options .search-separator .or_op.selected {
    color: steelblue;
}

/* additional filters */
div.filters-container .additional-filters-container {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 2;
    width: 90%;
    overflow: auto;
    display: none;
    background: #FFF;
    border: 1px solid #DDD;
    padding: 5px;
}
div.filters-container .additional-filters-container.shown {
    display: block;
}
div.filters-container .additional-filters-container ul.filter-group > li {
    width: 50%;
    float: left;
    cursor: pointer;
}
div.filters-container .additional-filters-container ul.filter-group > li label {
    cursor: pointer;
}
div.filters-container ul.filters-list {
    max-width: 60%;
}
/* sortable */
div.filters-container ul.filters-list .d3view-filter-placeholder {
    display: inline-block!important;
    width: 80px!important;
    height: 26px;
    background: lightyellow;
    border: 1px solid #DDD;
}

/* filter groups */
div.filters-container .saved-filters-row .filter-name {
    font-size: 13px;
    padding-left: 10px;
    padding-right: 10px;
    color: #000;
    font-weight: 500;
    text-decoration: none;
}
div.filters-container .saved-filters-row .filter-name {
    cursor: default;
}
div.filters-container .saved-filters-list > li .remove-filtergroup {
    opacity: 0;
}
div.filters-container .saved-filters-list > li:hover .remove-filtergroup {
    opacity: 1;
}
div.filters-container .saved-filters-list > li {
    position: relative;
}
div.filters-container .saved-filters-list > li.selected:before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    top: 4px;
    left: 4px;
}
div.filters-container .saved-filters-list > li .remove-filtergroup:hover {
    color: #333;
}
div.filters-container .saved-filters-list > li.selected a {
}
div.filters-container .saved-filters-list > li.selected a:hover,div.filters-container .saved-filters-list > li.selected a:focus {
    background: none!important;
}

div.filters-container .filters-list .dropdown-menu {
    min-width: 200px;
}

div.filters-container .filters-list .dropdown-menu.dropdown-menu-wide {
    min-width: 420px;
}

.d3view-filters[data-render-in-button="true"] {
    flex-direction: column;
    align-items: unset;
    height: unset;
}

.d3view-filters .d3view-filter-button {
    background: #f5f5f5;
    padding: 10px;
    height: 35px;
    border-radius: 5px;
    /* min-width: 200px; */
    width: 200px;
    margin-bottom: 20px;
    position: relative;
}
.d3view-filters .d3view-filter-button .filters-badge {
    position: absolute;
    right: -15px;
    top: -5px;
}

.d3view-filters-iv-modal .d3view-filters .filters-list {
    flex-direction: column;
}
.d3view-filters-iv-modal .d3view-filters .filter-item {
    width: 100%;
    flex-direction: column;
}
.d3view-filters-iv-modal .d3view-filters .filter-item .dropdown-toggle {
    width: 100%;
    margin-bottom: 10px!important;
}
.d3view-filters-iv-modal .d3view-filters .add-filters-dropdown {
    width: 100%;
}
.d3view-filters-iv-modal .d3view-filters .add-filters-dropdown .add-filter {
    width: 100%!important;
    margin-right: 15px;
}

div.d3view-filters[data-style="modern"] span.filter-tag > span.label {
    background-color: #e8f0fe!important;
    color: #4f5359!important;
}
div.d3view-filters[data-style="modern"] span.filter-tag .filter-value {
    color: #4169a7!important;
}
div.d3view-filters[data-style="modern"] .remove-filter-tag {
    color: initial!important;
}

div.filters-container > span.filter-editor button.add-new-filter {
    position: absolute;
    z-index: 3;
}
div.d3view-filters-external .response-filter-fb-toggle-panel div.d3view-inputsBuilder ul.field-items li.field-item>div.row {
    padding: 4px;
}

/** Added by shashank2104 on 01/24/2026 at 12:05 AM - DVFIV-1905 - Modern Filters Application Styling **/

/** DVFIV-1905 - Modern Filters Theme Variables (references simlytiks-modern variables when available) **/
div.d3view-filters[data-theme="modern"],
div.d3view-filters-external[data-theme="modern"],
div.d3view-filters[data-style="modern"] {
    --fl-bg-primary: var(--sl-bg-primary, #FFFFFF);
    --fl-bg-secondary: var(--sl-bg-secondary, #F8FAFC);
    --fl-bg-tertiary: var(--sl-bg-tertiary, #F1F5F9);
    --fl-bg-hover: var(--sl-bg-hover, #E2E8F0);
    --fl-text-primary: var(--sl-text-primary, #1E293B);
    --fl-text-secondary: var(--sl-text-secondary, #475569);
    --fl-text-muted: var(--sl-text-muted, #94A3B8);
    --fl-border-color: var(--sl-border-color, #E2E8F0);
    --fl-accent-primary: var(--sl-accent-primary, #3B82F6);
    --fl-accent-hover: var(--sl-accent-hover, #2563EB);
    --fl-accent-success: var(--sl-accent-success, #10B981);
    --fl-accent-danger: var(--sl-accent-danger, #EF4444);
    --fl-border-radius-sm: var(--sl-border-radius-sm, 6px);
    --fl-border-radius-md: var(--sl-border-radius-md, 8px);
    --fl-border-radius-lg: var(--sl-border-radius-lg, 12px);
    --fl-shadow-sm: var(--sl-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    --fl-shadow-md: var(--sl-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    --fl-shadow-lg: var(--sl-shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    --fl-transition: var(--sl-transition, all 0.15s ease);
    --fl-spacing-xs: var(--sl-spacing-xs, 4px);
    --fl-spacing-sm: var(--sl-spacing-sm, 8px);
    --fl-spacing-md: var(--sl-spacing-md, 16px);
    --fl-spacing-lg: var(--sl-spacing-lg, 24px);
    --fl-input-height: var(--sl-input-height, 40px);
    --fl-input-padding: var(--sl-input-padding, 10px 14px);
    --fl-focus-ring: var(--sl-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.1));
    --fl-selected-bg: rgba(59, 130, 246, 0.1);
    --fl-selected-checkmark: var(--fl-accent-success);
}

/** DVFIV-1905 - Modern Filter Dropdown Container (.d3view-filters-external) - Added directly to body, not nested **/
div.d3view-filters-external[data-theme="modern"] {
    --fl-bg-primary: var(--sl-bg-primary, #FFFFFF);
    --fl-bg-secondary: var(--sl-bg-secondary, #F8FAFC);
    --fl-bg-tertiary: var(--sl-bg-tertiary, #F1F5F9);
    --fl-bg-hover: var(--sl-bg-hover, #E2E8F0);
    --fl-text-primary: var(--sl-text-primary, #1E293B);
    --fl-text-secondary: var(--sl-text-secondary, #475569);
    --fl-text-muted: var(--sl-text-muted, #94A3B8);
    --fl-border-color: var(--sl-border-color, #E2E8F0);
    --fl-accent-primary: var(--sl-accent-primary, #3B82F6);
    --fl-accent-hover: var(--sl-accent-hover, #2563EB);
    --fl-accent-success: var(--sl-accent-success, #10B981);
    --fl-accent-danger: var(--sl-accent-danger, #EF4444);
    --fl-border-radius-sm: var(--sl-border-radius-sm, 6px);
    --fl-border-radius-md: var(--sl-border-radius-md, 8px);
    --fl-border-radius-lg: var(--sl-border-radius-lg, 12px);
    --fl-shadow-sm: var(--sl-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    --fl-shadow-md: var(--sl-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    --fl-shadow-lg: var(--sl-shadow-lg, 0 10px 25px rgba(0,0,0,0.15));
    --fl-transition: var(--sl-transition, all 0.15s ease);
    --fl-spacing-xs: var(--sl-spacing-xs, 4px);
    --fl-spacing-sm: var(--sl-spacing-sm, 8px);
    --fl-spacing-md: var(--sl-spacing-md, 16px);
    --fl-spacing-lg: var(--sl-spacing-lg, 24px);
    --fl-selected-bg: rgba(59, 130, 246, 0.1);
    --fl-selected-checkmark: var(--fl-accent-success);
    
    background: var(--fl-bg-primary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    box-shadow: var(--fl-shadow-md) !important;
    padding: var(--fl-spacing-sm) !important;
    width: 275px;
}

div.d3view-filters-external[data-theme="modern"].d3view-filters-values-list-container:before {
    border-color: transparent transparent var(--fl-border-color) transparent !important;
}

div.d3view-filters-external[data-theme="modern"].d3view-filters-values-list-container:after {
    border-color: transparent transparent var(--fl-bg-primary) transparent !important;
}

/** DVFIV-1905 - Modern Filter Dropdown Header **/
div.d3view-filters-external[data-theme="modern"] .filters-external-header {
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    border-bottom: 1px solid var(--fl-border-color) !important;
    margin-bottom: var(--fl-spacing-xs) !important;
}

div.d3view-filters-external[data-theme="modern"] h4.ext-filter-title {
    color: var(--fl-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] span.close-external-filters {
    color: var(--fl-text-muted) !important;
    font-size: 18px !important;
    transition: color var(--fl-transition), background-color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
    padding: var(--fl-spacing-xs) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
}

div.d3view-filters-external[data-theme="modern"] span.close-external-filters:hover {
    color: var(--fl-bg-primary) !important;
    background: var(--fl-accent-danger) !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/** DVFIV-1905 - Modern Filter Dropdown List Items **/
div.d3view-filters-external[data-theme="modern"] ul.list-group {
    padding: var(--fl-spacing-xs) 0 !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li {
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    transition: background-color var(--fl-transition), border-color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition), color var(--fl-transition) !important;
    margin: 2px var(--fl-spacing-xs) !important;
    border-left: 3px solid transparent !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li:hover,
div.d3view-filters-external[data-theme="modern"] ul.list-group li.highlighted {
    background-color: var(--fl-bg-tertiary) !important;
    border-left-color: var(--fl-border-color) !important;
    transform: translateX(2px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li.selected {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
    color: var(--fl-accent-primary) !important;
    border-left: 3px solid var(--fl-accent-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    transition: background var(--fl-transition), border-color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition), color var(--fl-transition) !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li.selected:before {
    content: '✓' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--fl-selected-checkmark) !important;
    color: var(--fl-bg-primary) !important;
    border-radius: 50% !important;
    margin-right: var(--fl-spacing-sm) !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
    transition: background var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
    transform: scale(1) !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li.selected:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.15) 100%) !important;
    border-left-color: var(--fl-accent-hover) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li.selected:hover:before {
    background: var(--fl-accent-success) !important;
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.5) !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group a {
    color: var(--fl-text-secondary) !important;
    text-decoration: none !important;
    transition: color var(--fl-transition), transform var(--fl-transition) !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
}

div.d3view-filters-external[data-theme="modern"] ul.list-group li:hover a {
    color: var(--fl-text-primary) !important;
    transform: translateX(2px) !important;
}
div.d3view-filters[data-theme="modern"] .filters-container {
    align-items: center;
}

/** DVFIV-1905 - Modern Filter Tags/Badges - Top-Notch UI/UX **/
div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--fl-spacing-xs) !important;
    margin: 0 var(--fl-spacing-xs) 0 0 !important;
    position: relative !important;
    animation: filterTagFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    height: 90%;
}

@keyframes filterTagFadeIn {
    0% {
        opacity: 0 !important;
        transform: translateY(-4px) scale(0.95) !important;
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag > span.label,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag > span.label {
    background: var(--fl-bg-secondary) !important;
    color: var(--fl-text-primary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: 16px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background-color var(--fl-transition), border-color var(--fl-transition), box-shadow var(--fl-transition), transform var(--fl-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    white-space: nowrap !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag:hover > span.label,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag:hover > span.label {
    background: var(--fl-bg-secondary) !important;
    border-color: var(--fl-accent-primary) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.12) !important;
    transform: translateY(-1px) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag .filter-value,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag .filter-value {
    color: var(--fl-accent-primary) !important;
    font-weight: 500 !important;
    margin-left: 4px !important;
    transition: color var(--fl-transition) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag:hover .filter-value,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag:hover .filter-value {
    color: var(--fl-accent-hover) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag .filter-value.isDefault,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag .filter-value.isDefault {
    color: var(--fl-accent-primary) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.remove-filter-tag,
div.d3view-filters[data-style="modern"] .filters-container span.remove-filter-tag {
    color: var(--fl-text-muted) !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 2px !important;
    margin-left: var(--fl-spacing-xs) !important;
    transition: opacity var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition), color var(--fl-transition) !important;
    opacity: 0 !important;
    transform: scale(0.85) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag:hover span.remove-filter-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag:hover span.remove-filter-tag {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: scale(1) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.remove-filter-tag:hover,
div.d3view-filters[data-style="modern"] .filters-container span.remove-filter-tag:hover {
    color: var(--fl-accent-danger) !important;
    background-color: var(--fl-bg-tertiary) !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/** DVFIV-1905 - Modern Filter Value Tags - Top-Notch UI/UX **/
div.d3view-filters[data-theme="modern"] .filters-container span.filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-value-tag {
    background: var(--fl-bg-primary) !important;
    color: var(--fl-text-secondary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: 12px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
    transition: background-color var(--fl-transition), border-color var(--fl-transition), color var(--fl-transition), opacity var(--fl-transition), transform var(--fl-transition), max-width var(--fl-transition), margin var(--fl-transition), padding var(--fl-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    white-space: nowrap !important;
    animation: filterValueTagFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    opacity: 1 !important;
}

@keyframes filterValueTagFadeIn {
    0% {
        opacity: 0 !important;
        transform: scale(0.9) translateY(-2px) !important;
    }
    100% {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
    }
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-value-tag.filter-value-tag-removing,
div.d3view-filters[data-style="modern"] .filters-container span.filter-value-tag.filter-value-tag-removing {
    animation: filterValueTagFadeOut 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes filterValueTagFadeOut {
    0% {
        opacity: 1 !important;
        transform: scale(1) translateY(0) !important;
        max-width: 200px !important;
        margin-right: 4px !important;
        padding: 4px 10px !important;
    }
    100% {
        opacity: 0 !important;
        transform: scale(0.85) translateY(-4px) !important;
        max-width: 0 !important;
        margin-right: 0 !important;
        padding: 4px 0 !important;
    }
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-value-tag:hover,
div.d3view-filters[data-style="modern"] .filters-container span.filter-value-tag:hover {
    background: var(--fl-bg-tertiary) !important;
    border-color: var(--fl-accent-primary) !important;
    color: var(--fl-accent-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.12) !important;
}

/** DVFIV-1905 - Modern Filter Value Tags within grouped filters (like Status) **/
div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] > span.label,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] > span.label {
    background: var(--fl-accent-primary) !important;
    color: var(--fl-bg-primary) !important;
    border-color: var(--fl-accent-primary) !important;
    padding: 6px 12px !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] .filter-value,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] .filter-value {
    color: var(--fl-bg-primary) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--fl-bg-primary) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin-right: 4px !important;
    padding: 3px 8px !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag:hover,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.remove-filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.remove-filter-value-tag {
    color: var(--fl-text-muted) !important;
    margin-left: 6px !important;
    transition: color var(--fl-transition), background-color var(--fl-transition), transform var(--fl-transition) !important;
    cursor: pointer !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    opacity: 0.7 !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-value-tag:hover span.remove-filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-value-tag:hover span.remove-filter-value-tag {
    opacity: 1 !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.remove-filter-value-tag:hover,
div.d3view-filters[data-style="modern"] .filters-container span.remove-filter-value-tag:hover {
    color: var(--fl-accent-danger) !important;
    background-color: var(--fl-bg-tertiary) !important;
    transform: scale(1.15) rotate(90deg) !important;
}

/** DVFIV-1905 - Remove button styling within grouped filters **/
div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.remove-filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.remove-filter-value-tag {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.8 !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag:hover span.remove-filter-value-tag,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.filter-value-tag:hover span.remove-filter-value-tag {
    opacity: 1 !important;
}

div.d3view-filters[data-theme="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.remove-filter-value-tag:hover,
div.d3view-filters[data-style="modern"] .filters-container span.filter-tag[data-has-multiple-values="true"] span.remove-filter-value-tag:hover {
    color: var(--fl-bg-primary) !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.15) rotate(90deg) !important;
}

/** DVFIV-1905 - Modern Filter Buttons **/
div.d3view-filters[data-theme="modern"] .filters-container .btn-d3view-filter,
div.d3view-filters[data-style="modern"] .filters-container .btn-d3view-filter {
    background-color: var(--fl-bg-primary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    color: var(--fl-text-secondary) !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    transition: background-color var(--fl-transition), border-color var(--fl-transition), color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
}

div.d3view-filters[data-theme="modern"] .filters-container .btn-d3view-filter::before,
div.d3view-filters[data-style="modern"] .filters-container .btn-d3view-filter::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

div.d3view-filters[data-theme="modern"] .filters-container .btn-d3view-filter:hover::before,
div.d3view-filters[data-style="modern"] .filters-container .btn-d3view-filter:hover::before {
    left: 100% !important;
}

div.d3view-filters[data-theme="modern"] .filters-container .btn-d3view-filter:hover,
div.d3view-filters[data-style="modern"] .filters-container .btn-d3view-filter:hover {
    background-color: var(--fl-bg-tertiary) !important;
    border-color: var(--fl-accent-primary) !important;
    color: var(--fl-accent-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2) !important;
}

/** DVFIV-1905 - Modern Filter Search Inputs **/
div.d3view-filters[data-theme="modern"] .filters-container li.dropdown > div.search-input > input.search_val,
div.d3view-filters[data-style="modern"] .filters-container li.dropdown > div.search-input > input.search_val {
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    padding: var(--fl-input-padding) !important;
    height: var(--fl-input-height) !important;
    font-size: 13px !important;
    color: var(--fl-text-primary) !important;
    transition: border-color var(--fl-transition), box-shadow var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
    background: var(--fl-bg-primary) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container li.dropdown > div.search-input > input.search_val:focus,
div.d3view-filters[data-style="modern"] .filters-container li.dropdown > div.search-input > input.search_val:focus {
    border-color: var(--fl-accent-primary) !important;
    outline: none !important;
    box-shadow: var(--fl-focus-ring), 0 2px 4px rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-1px) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container li.dropdown > div.search-input > input.search_val::placeholder,
div.d3view-filters[data-style="modern"] .filters-container li.dropdown > div.search-input > input.search_val::placeholder {
    color: var(--fl-text-muted) !important;
}

/** DVFIV-1905 - Modern Filter Group List Items **/
div.d3view-filters[data-theme="modern"] .filters-container ul.list-group > li,
div.d3view-filters[data-style="modern"] .filters-container ul.list-group > li {
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    transition: background-color var(--fl-transition), background-image var(--fl-transition), color var(--fl-transition), transform var(--fl-transition) !important;
    background-image: none !important;
}

div.d3view-filters[data-theme="modern"] .filters-container ul.list-group > li:hover,
div.d3view-filters[data-style="modern"] .filters-container ul.list-group > li:hover {
    background-color: var(--fl-bg-tertiary) !important;
    background-image: none !important;
    color: var(--fl-text-primary) !important;
    transform: translateX(2px) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container ul.list-group > li > a,
div.d3view-filters[data-style="modern"] .filters-container ul.list-group > li > a {
    color: var(--fl-text-secondary) !important;
    transition: color var(--fl-transition), transform var(--fl-transition) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container ul.list-group > li:hover > a,
div.d3view-filters[data-style="modern"] .filters-container ul.list-group > li:hover > a {
    color: var(--fl-accent-primary) !important;
    transform: translateX(2px) !important;
}

/** DVFIV-1905 - Modern Filter Dropdown Menu **/
div.d3view-filters[data-theme="modern"] .filters-container .filters-list .dropdown-menu,
div.d3view-filters[data-style="modern"] .filters-container .filters-list .dropdown-menu {
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    box-shadow: var(--fl-shadow-md) !important;
    padding: var(--fl-spacing-xs) !important;
    background: var(--fl-bg-primary) !important;
    margin-top: var(--fl-spacing-xs) !important;
}

/** DVFIV-1905 - Modern Filter Options Search Input **/
div.d3view-filters[data-theme="modern"] .filter-options .search-input input.search_val,
div.d3view-filters[data-style="modern"] .filter-options .search-input input.search_val {
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    padding: var(--fl-input-padding) !important;
    height: var(--fl-input-height) !important;
    font-size: 13px !important;
    color: var(--fl-text-primary) !important;
    transition: border-color var(--fl-transition), box-shadow var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
    background: var(--fl-bg-primary) !important;
}

div.d3view-filters[data-theme="modern"] .filter-options .search-input input.search_val:focus,
div.d3view-filters[data-style="modern"] .filter-options .search-input input.search_val:focus {
    border-color: var(--fl-accent-primary) !important;
    outline: none !important;
    box-shadow: var(--fl-focus-ring), 0 2px 4px rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-1px) !important;
}

/** DVFIV-1905 - Modern Filter Options Search Separator **/
div.d3view-filters[data-theme="modern"] .filter-options .search-separator,
div.d3view-filters[data-style="modern"] .filter-options .search-separator {
    border-top: 1px solid var(--fl-border-color) !important;
    color: var(--fl-text-muted) !important;
    margin-top: var(--fl-spacing-md) !important;
}

div.d3view-filters[data-theme="modern"] .filter-options .search-separator .and_op,
div.d3view-filters[data-theme="modern"] .filter-options .search-separator .or_op,
div.d3view-filters[data-style="modern"] .filter-options .search-separator .and_op,
div.d3view-filters[data-style="modern"] .filter-options .search-separator .or_op {
    background-color: var(--fl-bg-primary) !important;
    color: var(--fl-text-muted) !important;
    padding: 0 var(--fl-spacing-xs) !important;
    transition: color var(--fl-transition), font-weight var(--fl-transition), transform var(--fl-transition) !important;
    cursor: pointer !important;
}

div.d3view-filters[data-theme="modern"] .filter-options .search-separator .and_op.selected,
div.d3view-filters[data-theme="modern"] .filter-options .search-separator .or_op.selected,
div.d3view-filters[data-style="modern"] .filter-options .search-separator .and_op.selected,
div.d3view-filters[data-style="modern"] .filter-options .search-separator .or_op.selected {
    color: var(--fl-accent-primary) !important;
    font-weight: 600 !important;
    transform: scale(1.05) !important;
}

/** DVFIV-1905 - Modern Additional Filters Container **/
div.d3view-filters[data-theme="modern"] .filters-container .additional-filters-container,
div.d3view-filters[data-style="modern"] .filters-container .additional-filters-container {
    background: var(--fl-bg-primary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    box-shadow: var(--fl-shadow-md) !important;
    padding: var(--fl-spacing-sm) !important;
}

/** DVFIV-1905 - Modern Filter Tooltip **/
div.d3view-filters[data-theme="modern"] .filters-container .filter-tooltip,
div.d3view-filters[data-style="modern"] .filters-container .filter-tooltip {
    color: var(--fl-text-muted) !important;
    transition: color var(--fl-transition), transform var(--fl-transition) !important;
    cursor: pointer !important;
}

div.d3view-filters[data-theme="modern"] .filters-container .filter-tooltip:hover,
div.d3view-filters[data-style="modern"] .filters-container .filter-tooltip:hover {
    color: var(--fl-accent-primary) !important;
    transform: scale(1.1) !important;
}

/** DVFIV-1905 - Modern Filter Value Color **/
div.d3view-filters[data-theme="modern"] .filters-container a.filter .filter-val,
div.d3view-filters[data-style="modern"] .filters-container a.filter .filter-val {
    color: var(--fl-accent-primary) !important;
}

/** DVFIV-1905 - Modern Filter Tag Icons **/
div.d3view-filters[data-theme="modern"] .filters-container a.filter .filter-icon,
div.d3view-filters[data-style="modern"] .filters-container a.filter .filter-icon {
    color: var(--fl-text-secondary) !important;
    transition: color var(--fl-transition), transform var(--fl-transition) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container a.filter:hover .filter-icon,
div.d3view-filters[data-style="modern"] .filters-container a.filter:hover .filter-icon {
    color: var(--fl-accent-primary) !important;
    transform: scale(1.1) !important;
}

/** DVFIV-1905 - Modern Filter Remove Icon **/
div.d3view-filters[data-theme="modern"] .filters-container a.filter .remove-filter,
div.d3view-filters[data-style="modern"] .filters-container a.filter .remove-filter {
    color: var(--fl-text-muted) !important;
    transition: color var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
}

div.d3view-filters[data-theme="modern"] .filters-container a.filter .remove-filter:hover,
div.d3view-filters[data-style="modern"] .filters-container a.filter .remove-filter:hover {
    color: var(--fl-accent-danger) !important;
    transform: scale(1.2) rotate(90deg) !important;
}

/** DVFIV-1905 - Modern Filter Tag Remove Icon **/
div.d3view-filters[data-theme="modern"] .filters-container .filter-val .tag .tag-remove,
div.d3view-filters[data-style="modern"] .filters-container .filter-val .tag .tag-remove {
    color: var(--fl-text-muted) !important;
    transition: color var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
    cursor: pointer !important;
    padding: 2px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
}

div.d3view-filters[data-theme="modern"] .filters-container .filter-val .tag .tag-remove:hover,
div.d3view-filters[data-style="modern"] .filters-container .filter-val .tag .tag-remove:hover {
    color: var(--fl-bg-primary) !important;
    background-color: var(--fl-accent-danger) !important;
    transform: scale(1.2) rotate(90deg) !important;
}

/** DVFIV-1905 - Modern Filter Help Icon **/
div.d3view-filters[data-theme="modern"] .filters-help-icon,
div.d3view-filters[data-style="modern"] .filters-help-icon {
    color: var(--fl-text-muted) !important;
    transition: color var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
    cursor: pointer !important;
    padding: var(--fl-spacing-xs) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
}

div.d3view-filters[data-theme="modern"] .filters-help-icon:hover,
div.d3view-filters[data-style="modern"] .filters-help-icon:hover {
    color: var(--fl-accent-primary) !important;
    background-color: var(--fl-bg-tertiary) !important;
    transform: scale(1.1) rotate(15deg) !important;
}

/** DVFIV-1905 - Modern Filter Button Container **/
div.d3view-filters[data-theme="modern"] .d3view-filter-button,
div.d3view-filters[data-style="modern"] .d3view-filter-button {
    transition: background-color var(--fl-transition), border-color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
}

div.d3view-filters[data-theme="modern"] .d3view-filter-button:hover,
div.d3view-filters[data-style="modern"] .d3view-filter-button:hover {
    background: var(--fl-bg-tertiary) !important;
    border-color: var(--fl-accent-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15) !important;
}

/** DVFIV-1905 - Modern Filter External Tags **/
div.d3view-filters-external[data-theme="modern"] .filter-group .tag {
    background-color: var(--fl-bg-tertiary) !important;
    color: var(--fl-text-secondary) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    transition: background-color var(--fl-transition), color var(--fl-transition), border-color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
    margin: var(--fl-spacing-xs) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

div.d3view-filters-external[data-theme="modern"] .filter-group .tag.selected,
div.d3view-filters-external[data-theme="modern"] .filter-group .tag:hover {
    background-color: var(--fl-accent-primary) !important;
    color: var(--fl-bg-primary) !important;
    border-color: var(--fl-accent-primary) !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25) !important;
}

/** DVFIV-1905 - Modern Treeview List Items **/
div.d3view-filters-external[data-theme="modern"] .treeview .list-group-item {
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    transition: background-color var(--fl-transition), color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
}

div.d3view-filters-external[data-theme="modern"] .treeview .list-group-item.isAdded {
    background-color: var(--fl-accent-primary) !important;
    color: var(--fl-bg-primary) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
    transform: scale(1.02) !important;
}

div.d3view-filters-external[data-theme="modern"] div.nested_items li.treeview-item:hover {
    background-color: var(--fl-bg-tertiary) !important;
    transform: translateX(2px) !important;
}

/** DVFIV-1905 - Modern Href Link **/
div.d3view-filters-external[data-theme="modern"] .href_link {
    color: var(--fl-text-muted) !important;
    transition: opacity var(--fl-transition), color var(--fl-transition), background-color var(--fl-transition), transform var(--fl-transition) !important;
    padding: var(--fl-spacing-xs) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    opacity: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] li:hover .href_link {
    opacity: 1 !important;
}

div.d3view-filters-external[data-theme="modern"] .href_link:hover {
    color: var(--fl-accent-primary) !important;
    background: var(--fl-bg-tertiary) !important;
    transform: scale(1.1) !important;
}

/** DVFIV-1905 - Modern Search Local Input (inside external div) **/
div.d3view-filters-external[data-theme="modern"] .search-local-input {
    margin: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    padding: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] .search-local-input input.search_val,
div.d3view-filters-external[data-theme="modern"] .search-input input.search_val,
div.d3view-filters-external[data-theme="modern"] .filter-remote input.search_val {
    width: 100% !important;
    height: var(--fl-input-height) !important;
    padding: var(--fl-input-padding) !important;
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-md) !important;
    background: var(--fl-bg-primary) !important;
    color: var(--fl-text-primary) !important;
    font-size: 13px !important;
    transition: border-color var(--fl-transition), box-shadow var(--fl-transition), transform var(--fl-transition), background-color var(--fl-transition) !important;
    box-shadow: none !important;
    position: relative !important;
}

div.d3view-filters-external[data-theme="modern"] .search-local-input input.search_val:focus,
div.d3view-filters-external[data-theme="modern"] .search-input input.search_val:focus,
div.d3view-filters-external[data-theme="modern"] .filter-remote input.search_val:focus {
    outline: none !important;
    border-color: var(--fl-accent-primary) !important;
    box-shadow: var(--fl-focus-ring), 0 2px 4px rgba(59, 130, 246, 0.1) !important;
    background: var(--fl-bg-primary) !important;
    transform: translateY(-1px) !important;
}

div.d3view-filters-external[data-theme="modern"] .search-local-input input.search_val::placeholder,
div.d3view-filters-external[data-theme="modern"] .search-input input.search_val::placeholder,
div.d3view-filters-external[data-theme="modern"] .filter-remote input.search_val::placeholder {
    color: var(--fl-text-muted) !important;
    opacity: 0.7 !important;
}

/** DVFIV-1905 - Modern Pagination Container **/
div.d3view-filters[data-theme="modern"] .filter-options .div-pagination,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination {
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: var(--fl-spacing-xs) !important;
}

/** DVFIV-1905 - Modern Pagination Container - FIXED horizontal layout **/
div.d3view-filters-external[data-theme="modern"] .div-pagination,
div.d3view-filters[data-theme="modern"] .filter-options .div-pagination,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: var(--fl-spacing-sm) var(--fl-spacing-md) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

div.d3view-filters-external[data-theme="modern"] .div-pagination .pagination,
div.d3view-filters[data-theme="modern"] .filter-options .div-pagination .pagination,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    gap: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] .div-pagination .pagination > li,
div.d3view-filters[data-theme="modern"] .filter-options .div-pagination .pagination > li,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination .pagination > li {
    float: none !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    clear: none !important;
}

/** DVFIV-1905 - Modern Bootstrap Pagination Styling - FIXED horizontal layout **/
div.d3view-filters-external[data-theme="modern"] .pagination,
div.d3view-filters[data-theme="modern"] .pagination,
div.d3view-filters[data-style="modern"] .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > li,
div.d3view-filters[data-theme="modern"] .pagination > li,
div.d3view-filters[data-style="modern"] .pagination > li {
    display: flex !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    clear: none !important;
    width: auto !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > li > a,
div.d3view-filters-external[data-theme="modern"] .pagination > li > span,
div.d3view-filters[data-theme="modern"] .pagination > li > a,
div.d3view-filters[data-theme="modern"] .pagination > li > span,
div.d3view-filters[data-style="modern"] .pagination > li > a,
div.d3view-filters[data-style="modern"] .pagination > li > span {
    border: 1px solid var(--fl-border-color) !important;
    border-radius: var(--fl-border-radius-sm) !important;
    color: var(--fl-text-secondary) !important;
    background: var(--fl-bg-primary) !important;
    padding: 6px 12px !important;
    margin-left: 4px !important;
    transition: background-color var(--fl-transition), border-color var(--fl-transition), color var(--fl-transition), transform var(--fl-transition), box-shadow var(--fl-transition) !important;
    text-decoration: none !important;
    display: inline-block !important;
    float: none !important;
    min-width: 36px !important;
    text-align: center !important;
    line-height: 1.5 !important;
    position: relative !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > li:first-child > a,
div.d3view-filters-external[data-theme="modern"] .pagination > li:first-child > span,
div.d3view-filters[data-theme="modern"] .pagination > li:first-child > a,
div.d3view-filters[data-theme="modern"] .pagination > li:first-child > span,
div.d3view-filters[data-style="modern"] .pagination > li:first-child > a,
div.d3view-filters[data-style="modern"] .pagination > li:first-child > span {
    margin-left: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > li:first-child > a,
div.d3view-filters-external[data-theme="modern"] .pagination > li:first-child > span,
div.d3view-filters[data-theme="modern"] .pagination > li:first-child > a,
div.d3view-filters[data-theme="modern"] .pagination > li:first-child > span,
div.d3view-filters[data-style="modern"] .pagination > li:first-child > a,
div.d3view-filters[data-style="modern"] .pagination > li:first-child > span {
    margin-left: 0 !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > li > a:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > li > span:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > li > a:focus,
div.d3view-filters-external[data-theme="modern"] .pagination > li > span:focus,
div.d3view-filters[data-theme="modern"] .pagination > li > a:hover,
div.d3view-filters[data-theme="modern"] .pagination > li > span:hover,
div.d3view-filters[data-theme="modern"] .pagination > li > a:focus,
div.d3view-filters[data-theme="modern"] .pagination > li > span:focus,
div.d3view-filters[data-style="modern"] .pagination > li > a:hover,
div.d3view-filters[data-style="modern"] .pagination > li > span:hover,
div.d3view-filters[data-style="modern"] .pagination > li > a:focus,
div.d3view-filters[data-style="modern"] .pagination > li > span:focus {
    background: var(--fl-bg-hover) !important;
    border-color: var(--fl-accent-primary) !important;
    color: var(--fl-accent-primary) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > .active > a,
div.d3view-filters-external[data-theme="modern"] .pagination > .active > span,
div.d3view-filters-external[data-theme="modern"] .pagination > .active > a:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > .active > span:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > .active > a:focus,
div.d3view-filters-external[data-theme="modern"] .pagination > .active > span:focus,
div.d3view-filters[data-theme="modern"] .pagination > .active > a,
div.d3view-filters[data-theme="modern"] .pagination > .active > span,
div.d3view-filters[data-theme="modern"] .pagination > .active > a:hover,
div.d3view-filters[data-theme="modern"] .pagination > .active > span:hover,
div.d3view-filters[data-theme="modern"] .pagination > .active > a:focus,
div.d3view-filters[data-theme="modern"] .pagination > .active > span:focus,
div.d3view-filters[data-style="modern"] .pagination > .active > a,
div.d3view-filters[data-style="modern"] .pagination > .active > span,
div.d3view-filters[data-style="modern"] .pagination > .active > a:hover,
div.d3view-filters[data-style="modern"] .pagination > .active > span:hover,
div.d3view-filters[data-style="modern"] .pagination > .active > a:focus,
div.d3view-filters[data-style="modern"] .pagination > .active > span:focus {
    background: var(--fl-accent-primary) !important;
    border-color: var(--fl-accent-primary) !important;
    color: var(--fl-bg-primary) !important;
    font-weight: 600 !important;
    z-index: 2 !important;
}

div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > span,
div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > span:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > span:focus,
div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > a,
div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > a:hover,
div.d3view-filters-external[data-theme="modern"] .pagination > .disabled > a:focus,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > span,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > span:hover,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > span:focus,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > a,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > a:hover,
div.d3view-filters[data-theme="modern"] .pagination > .disabled > a:focus,
div.d3view-filters[data-style="modern"] .pagination > .disabled > span,
div.d3view-filters[data-style="modern"] .pagination > .disabled > span:hover,
div.d3view-filters[data-style="modern"] .pagination > .disabled > span:focus,
div.d3view-filters[data-style="modern"] .pagination > .disabled > a,
div.d3view-filters[data-style="modern"] .pagination > .disabled > a:hover,
div.d3view-filters[data-style="modern"] .pagination > .disabled > a:focus {
    color: var(--fl-text-muted) !important;
    background: var(--fl-bg-secondary) !important;
    border-color: var(--fl-border-color) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}
/** ── Filter-dropdown pagination must fit INSIDE the dropdown ──────────────────
    filters.views.js drives the paginationjs plugin (`.pagination({...})`), which
    emits `.paginationjs > .paginationjs-pages > ul` -- NOT a Bootstrap
    `.pagination`. plugins.css then sizes each cell at `min-width:36px` plus
    `padding:0 10px` and FLOATS `.paginationjs-pages`.

    Two things then make a 10-page set spill out of a ~300px dropdown:
      * a float never shrinks to fit its container, and
      * a flex item defaults to `min-width:auto`, i.e. it refuses to go below its
        min-content width -- ~400px for 9-10 cells.
    With `justify-content:flex-end` the excess is pushed past the LEFT edge too,
    which is why the strip overhangs on both sides.

    NOTE: the DVFIV-1905 blocks above try to fix this via
    `.div-pagination .pagination` -- the Bootstrap class. paginationjs never
    emits it, so those rules have never matched anything in a filter dropdown.
    They are left alone (a filter surface elsewhere may render a real Bootstrap
    pagination); the rules below target the class that is actually present.

    Deliberately scoped to `.filter-options`: `div.div-pagination` is shared with
    reporter, workflow, expression_maker, simlytiks and the generic-collection
    sidebar, none of which are width-starved. The themed selectors are repeated
    verbatim so this block ties on specificity with the `!important` container
    rules above and wins on source order -- the same pattern that block already
    uses to override its own earlier copy. **/

div.d3view-filters[data-theme="modern"] .filter-options .div-pagination,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination,
div.d3view-filters-external[data-theme="modern"] .div-pagination,
div.filter-options .div-pagination {
    /* flex-START + an auto margin on the child, NOT flex-end: an overflowing
       flex line clips its LEADING edge, so with flex-end the first pages become
       unreachable no matter how far you scroll. This keeps the right alignment
       while leaving the overflow scrollable. */
    justify-content: flex-start !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
    /* 15px of side padding is redundant inside an already-padded dropdown
       (.filter-options.p10) and cost 18px of the ~250px actually available.
       Measured: at 8px the usable strip is 264px, which fits the common set. */
    padding: 10px 8px !important;
}

/* The strip keeps its NATURAL width and `.div-pagination` above does the
   scrolling. Do NOT cap these with `max-width:100%`: plugins.css already sets
   `overflow:hidden` on the <ul> (it is what clips the rounded corners), so a cap
   there does not scroll or wrap -- it CLIPS, and the extra page buttons become
   invisible and unreachable with no scrollbar to reveal them. Measured: at a
   300px box the ul reported 250px for both a 10- and a 14-button set, i.e. four
   pages silently gone. `flex-shrink:0` is what lets the natural width exceed the
   container so the scroll container above actually has something to scroll. */
/* These MUST carry the same three scopes as the container rule above.
   `.filter-options` dropdowns are also rendered detached inside
   `div.d3view-filters-external` (filters.views.js:681 -> showFilterValues),
   and the container rule flips that scope to `justify-content:flex-start`.
   Without a matching `margin-left:auto` here, the strip there would silently
   jump from right- to LEFT-aligned. */
div.d3view-filters[data-theme="modern"] .filter-options .div-pagination > .paginationjs,
div.d3view-filters[data-style="modern"] .filter-options .div-pagination > .paginationjs,
div.d3view-filters-external[data-theme="modern"] .div-pagination > .paginationjs,
div.filter-options .div-pagination > .paginationjs {
    margin-left: auto;   /* preserves the right alignment flex-end used to give */
    flex-shrink: 0;
    float: none;
}

div.d3view-filters-external[data-theme="modern"] .div-pagination .paginationjs .paginationjs-pages,
div.filter-options .div-pagination .paginationjs .paginationjs-pages,
div.d3view-filters-external[data-theme="modern"] .div-pagination .paginationjs .paginationjs-pages ul,
div.filter-options .div-pagination .paginationjs .paginationjs-pages ul {
    float: none;         /* a float sits outside the flex flow and breaks the alignment */
}

/* Compact cells so the common set fits with no scrollbar at all. The shared
   36px min-width + 20px of side padding made 10 cells ~370px of min-content;
   24px + 8px makes them 250px, inside the 264px a 300px dropdown leaves. The
   scroll above is the backstop for a longer page list, not the primary fix.
   Height is untouched (--pag-height, 36px), so these stay easy mouse targets. */
div.filter-options .div-pagination .paginationjs .paginationjs-pages li > a,
div.filter-options .div-pagination .paginationjs .paginationjs-pages li > span {
    min-width: 24px;
    padding: 0 4px;
}

div.d3view-filter-picker,
div.d3view-filter-picker-values {
    position: fixed !important;
    z-index: 1055;
    background: #fff;
    border: 1px solid #e1e5ef;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(33, 45, 75, 0.14);
    padding: 8px;
    width: min(248px, calc((100vw - 32px) * 0.44));
    height: auto;
    min-height: 0;
}
div.d3view-filter-picker .filter-name-search {
    height: 34px;
    margin-bottom: 6px;
    font-size: 13px;
}
div.d3view-filter-picker .filter-picker-list {
    max-height: min(320px, calc(100vh - 100px));
    overflow-y: auto;
}
div.d3view-filter-picker .filter-picker-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 5px;
    color: #44506a;
    font-size: 13px;
}
div.d3view-filter-picker .filter-picker-item:hover,
div.d3view-filter-picker .filter-picker-item:focus-visible,
div.d3view-filter-picker .filter-picker-item.is-current {
    background: #f0efff;
    outline: none;
}
div.d3view-filter-picker .filter-picker-value {
    font-size: 11px;
    color: #8a93a5;
    grid-row: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.d3view-filter-picker .filter-picker-item.has-value .filter-picker-value {
    color: #4f46a5;
    font-weight: 600;
}
div.d3view-filter-picker .filter-picker-item i {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 9px;
}
div.d3view-filter-picker .filter-picker-item:disabled { opacity: 0.5; }
div.d3view-filter-picker .filter-picker-empty { display: none; padding: 16px 10px; color: #8a93a5; }
div.d3view-filter-picker .no-results + .filter-picker-empty { display: block; }
div.d3view-filter-picker .filter-picker-footer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e1e5ef;
}
div.d3view-filter-picker .filter-picker-reset {
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #52638a;
    font-size: 12px;
}
div.d3view-filter-picker .filter-picker-reset:hover,
div.d3view-filter-picker .filter-picker-reset:focus-visible { background: #f0efff; }
div.d3view-filter-picker-values {
    --pag-height: 28px;
    --pag-bg-active: #eeedff;
    --pag-text-active: #4f46a5;
    --pag-bg-hover: #f5f5ff;
    width: min(330px, calc((100vw - 32px) * 0.56));
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}
div.d3view-filter-picker-values .paginationjs-pages ul { min-height: 0; }
div.d3view-filter-picker-values .filter-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 8px 10px;
    color: #44506a;
    font-size: 13px;
}
div.d3view-filter-picker-values .filter-picker-clear {
    background: transparent;
    border: none;
    color: #6366b0;
    padding: 2px 0;
    font-size: 12px;
}
div.d3view-filter-picker-values .filter-picker-clear:disabled { opacity: 0.4; }
div.d3view-filter-picker-values .list-group { margin-bottom: 0; }
div.d3view-filter-picker-values .list-group-item { border: none; padding: 8px 10px; }
div.d3view-filter-picker-values .list-group-item:hover { background: #f5f5ff; }
div.d3view-filter-picker-values .form-control { font-size: 13px; }
div.d3view-filter-picker-values .search-input { position: relative; }
div.d3view-filter-picker-values .search-input > span { top: 6px !important; right: 8px !important; }
div.d3view-filter-picker-values.date_filter .filter-options { display: none; }
div.d3view-filter-picker-values .daterangepicker {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: none;
    box-shadow: none;
}

/* /javascripts/plugins_src/flexfilters/flex.filters.css */
.formfilters {
    margin: 0px;
    height: 100%;
}

.flexFilters {
    height: 100%;
}

.formfilters .filter-tree-title-div {
    margin: 0px;
    height: auto;
    display: block;
    padding: 10px 10px;
    border-bottom: 0.5px solid #eee;
}

.formfilters .filter-tree-title {
    display: inline;
    padding: 2px 0px 0px 0px;
    font-size: 21px;
}

.formfilters .filter-buttons {
    display: inline;
    float: right;
}

.formfilters .filter-body {
    margin: 0px;
    /*height: 550px;*/
    overflow-y: auto;
}

.formfilters .formfilter-ornage {
    color: #72D0FB;
}

.formfilters .formfilter-gray {
    color: gray;
}
.flexFilters .ui-options li {
    position: relative;
}
.flexFilters .ui-options li.checked:after {
    content: '\f00c';
    font-family: 'FontAwesome';
    color: steelblue;
    position: absolute;
    left: 4px;
    top: -3px;
}

.flexFilters div.d3view-filters-container {
    padding: 15px;
}
.flexFilters div.d3view-filters-container ul.filter-items {
    margin-top: 0;
    margin-right: 0;
    margin: 0 4px;
}
.flexFilters div.d3view-filters-container li.filter-item:not(.filter-hz-item) > a {
    font-weight: bold;
}
.flexFilters div.d3view-filters-container li.filter-item:not(.filter-hz-item) {
    display: block;
    width: 100%;
    margin: 5px 0;
}
.flexFilters  div.d3view-filters-container .filter-items-hz .filter-hz-item > .dropdown-toggle {
    margin-right: 0;
}
.flexFilters div.d3view-filters-container:not([data-view="horizontal"]) div.add-filters-dropdown {
    text-align: center;
    width: 100%!important;
    display: block!important;
}
.flexFilters div.d3view-filters-container[data-view="horizontal"] div.filters-list {
    display: block;
}
.flexFilters .filter-separator {
    text-align: center;
    display: none!important;
}
.flexFilters div.d3view-filters-container li.filter-hz-item .filter-val-container {
    max-width: initial!important;
}
.flexFilters div.d3view-filters-container .select2-container.add-filter {
    width: 100%!important;
}
.flexFilters div.d3view-filters-container .select2-container.add-filter .select2-choice {
    height: auto;
}

.flexFilters label {
    display: inline-block!important;
}
.flexFilters .d3view-filters-container {
    padding: 0!important;
}

/* Modern Design Styles */
.flexFilters[data-design="modern"] {
    padding: 15px;
}

.flexFilters[data-design="modern"] .filter-item {
    margin-bottom: 20px!important;
    padding: 15px!important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.flexFilters[data-design="modern"] .filter-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #428bca;
}

.flexFilters[data-design="modern"] .filter-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: block;
    font-size: 1.2em;
}

.flexFilters[data-design="modern"] .filter-item-container {
    padding: 0;
}

.flexFilters[data-design="modern"] .input_range_default_value_slider {
    display: none;
}

.flexFilters[data-design="modern"] .input_range_default_value_slider.show-slider {
    display: block;
    margin: 20px 10px 30px 10px;
}
.flexFilters[data-design="modern"] .filter-item .range-operator-dropdown {
    position: relative!important;
    top: unset!important;
}
.flexFilters[data-design="modern"] .filter-operators-dropdown {
    display: inline-block;
    margin-left: 8px;
}

.flexFilters .d3view-filters-container .input_range_default_value_slider {
    width: auto!important;
}
/*.flexFilters .filter-accordion .d3view-multiselect .name-filters {*/
/*    width: auto!important;*/
/*}*/
.flexFilters .filter-body:not([data-type="horizontal"]) ul.filter-items {
    height: 100%;
    max-height: unset!important;
}

.flexFilters[data-view="mini"] {
    height: auto;
}
.flexFilters .d3view-filter-button {
    background: #f5f5f5;
    padding: 10px;
    height: 35px;
    border-radius: 5px;
    /* min-width: 200px; */
    width: 200px;
    margin-bottom: 20px;
    position: relative;
}
.flexFilters .d3view-filter-button .filters-badge {
    position: absolute;
    right: -15px;
    top: -5px;
}
/* /stylesheets/placeholder-loading.css */
/**
 * placeholder-loading v0.2.5
 * Author: Zalog (https://www.zalog.ro/)
 * License: MIT
 **/
.ph-item {
  direction: ltr;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 30px 15px 15px 15px;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2px; 
 }

 .ph-item, .ph-item *,
 .ph-item ::after, .ph-item ::before {
    box-sizing: border-box; 
}

 .ph-item::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    -webkit-animation: phAnimation 0.8s linear infinite;
            animation: phAnimation 0.8s linear infinite;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%; 
}


.ph-item > * {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    padding-right: 15px;
    padding-left: 15px;
}


.ph-row {
  margin-bottom: 7.5px;
}

  .ph-row div {
    height: 10px;
    margin-bottom: 7.5px;
    background-color: #ced4da; }
  .ph-row .big,
  .ph-row.big div {
    height: 20px;
    margin-bottom: 15px; }
  .ph-row .empty {
    background-color: rgba(255, 255, 255, 0); }

.ph-col-2 {
  flex: 0 0 16.66667%;
}

.ph-col-4 {
  flex: 0 0 33.33333%;
}

.ph-col-6 {
  flex: 0 0 50%;
}

.ph-col-8 {
  flex: 0 0 66.66667%;
}

.ph-col-10 {
  flex: 0 0 83.33333%;
}

.ph-col-12 {
  flex: 0 0 100%;
}

.ph-avatar {
  position: relative;
  width: 100%;
  min-width: 60px;
  background-color: #ced4da;
  margin-bottom: 15px;
  border-radius: 50%;
  overflow: hidden; }
  .ph-avatar::before {
    content: " ";
    display: block;
    padding-top: 100%; }


.ph-animation-container {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: #fff;
 }

 .ph-animation-container::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    -webkit-animation: phAnimation 0.8s linear infinite;
            animation: phAnimation 0.8s linear infinite;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%; 
}

@-webkit-keyframes phAnimation {
  0% {
    transform: translate3d(-30%, 0, 0); }
  100% {
    transform: translate3d(30%, 0, 0); } }

@keyframes phAnimation {
  0% {
    transform: translate3d(-30%, 0, 0); }
  100% {
    transform: translate3d(30%, 0, 0); } }
.ph-div {
 background:#f4f4f4;
 margin-bottom:2px;
}

.ph-picture {
  width: 100%;
  height: 120px;
  background-color: #f5f5f5;
  margin-bottom: 15px; 
}

.ph-picture-80h {
  width: 100%;
  height: 80px;
  background-color: #f5f5f5;
  margin-bottom: 15px; 
}

.ph-title {
     height:20px;
}

.ph-title-big {
     height:40px;
}

/* /stylesheets/plugins/expression_builder.css */
div.expressionbuilder .tt-menu {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px 0;
    width: 100%;
    overflow-y: auto;
   
    max-height: 300px;
    overflow-x: hidden;
    
}

/* div.expressionbuilder .tt-menu {
    max-height: 300px;
    overflow-x: hidden;
} */
div.expressionbuilder .twitter-typeahead {
    width: 100%;
    height : 34px;
}

div.expressionbuilder .twitter-typeahead .item-desc {
    word-break: break-word;
}


/*.tt-dataset .tt-suggestion {*/
/*    padding: 3px 15px*/
/*}*/



.tt-dataset .tt-suggestion:hover,
.tt-dataset .tt-suggestion.tt-cursor {
    background-color: #428bca;
    color: #fff;
    cursor: pointer
}

.expression-name-tooltip-title {
    width : 100%;
    font-size : 1.25em;
    border-bottom : 0.5px solid lightgray;
}
.expression-name-tooltip-dependencies {
    width : 100%; 
    height : auto; 
    display : flex; 
    flex-wrap : wrap;
    border-bottom : 0.5px solid lightgray;
}
.expression-name-tooltip-usedin {
    width : 100%; 
    height : auto; 
    display : flex; 
    flex-wrap : wrap;
}
.expression-name-tooltip-span {
    border : 0.5px solid grey; 
    padding : 5px 5px; 
    border-radius : 4px; 
    margin : 5px 5px;
}


/* /stylesheets/plugins/expression_maker.css */
.expression-maker .p-0 {
    padding: 0px;
}

.expression-maker .m-0 {
    margin: 0px;
}

.expression-maker .expression-item {
    margin: 10px 0px;
    padding: 10px 0px;
    display: flex;
    align-items: center;
}

.expression-maker .popover {
    max-width: 100% !important;
}

.expression-maker .tip {
    width: auto;
    max-width: 800px;
    height: 34px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    background-color: #fff;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.expression-maker .tip span {
    display: inline-flex;
}

.expression-maker .close-expression {
    position: absolute;
    right: 5px;
    top: 55px;
}
.expression-maker .hide-expression-list {
    display: none !important;
}
.expression-maker #expression.form-control {
    color: rgb(211, 211, 211)!important;
}
.expression-maker #expression.form-control.hasValue {
    color: rgb(44, 44, 44)!important;
}
.custom-dropdown {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    z-index: 20000;
    width: 100%;
    /* display: flex;
    flex-direction: column; */
}

.custom-dropdown:focus {
    outline: none !important;
    border: none !important;
}

.custom-dropdown #list-view li {
    list-style: none;
    /* border: 0.5px solid lightgray; */
}

.custom-dropdown #list-view li:hover {
    cursor: pointer;
}

.custom-dropdown .cd-selected {
    background-color: #428bca;
    color: #fff;
}

.custom-dropdown .slider-value {
    position: relative;
    top: 140%;
    left: -10%;
    padding: 5px;
    background-color: #eee;
    border: 0.5px solid lightgray;
    border-radius: 4px;
}

.custom-dropdown .list-group-ul {
    padding: 0px;
    margin: 0px;
    height: 350px;
    overflow: auto;
}

.custom-dropdown .div-pagination {
    /* padding: 10px 10px;
    position: absolute;
    bottom: 5px;
    right: 5px; */
    float: right;
    padding: 5px 10px;
}
.custom-dropdown .cd-select-type {
    position: absolute;
    bottom: 5px;
    left: 5px;
}

.custom-dropdown .select2-container .select2-choice {
    height: auto !important;
}

.custom-dropdown .select2-container .select2-choice>.select2-chosen {
    padding-top: 2px !important;
    height: 32px !important;
}
/* /stylesheets/plugins/sortable_collection.css */
.sortable-container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.sortable-container .container-nav {
    /*display: flex;*/
    /*width: 100%;*/
    /*align-items : center;*/
    /*border-bottom: 0.5px solid lightgray;*/
    /*padding: 5px 10px;*/
    margin-bottom: 10px;
}
.sortable-container .container-body {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 0px;
    min-height: 80%;
}
.sortable-container .sortable-drag {
    border: 2px solid #2c2c2c;
}
/* /javascripts/plugins_src/match_maker/match_maker.css */
.match-maker {
    height: 100%;
    min-height: 300px;
}

/* defualt_view CSS  */

.match-maker .flex-box-main {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    flex-direction: row;
    gap: 1rem;
}

.match-maker .flex-box-collection-1 {
    flex: 1 1 auto;
}

.match-maker table {
    table-layout: fixed !important;
}

.match-maker .collection-2-header,
.match-maker .collection-1-header {
    height: 65px;
    margin-bottom: 10px;
}

.match-maker .collection-2-body,
.match-maker .collection-1-body {
    height: calc(100% - 75px);
}

.match-maker .collection-2-body {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}

.match-maker .mm-icon {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
}

.match-maker .mm-icon.mm-active {
    background-color: grey;
    color: #fff;
}

.match-maker div#collection-2-filter {
    border-radius: 4px;
    border: 1px solid #ddd;
    margin: 0px 10px;
}

.match-maker .collection-1-body>.table-rederer {
    height: 100%;
    overflow-y: auto;
}

.match-maker .flex-box-collection-2 {
    width: 300px;
}

.match-maker .collection-2-list {
    height: calc(100% - 55px - 98px - 30px);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.match-maker .collection-2-nav {
    height: 55px;
    border-bottom: 1px solid #ddd;
}


.match-maker .pr-15 {
    padding-right: 15px;
}

.match-maker .pl-15 {
    padding-left: 15px;
}

.match-maker .mb-0 {
    margin-bottom: 0px;
}

.match-maker .table-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 999;
    height: 55px;
}

.match-maker .table-header>tr>th {
    vertical-align: middle;
}

.match-maker .table-header>tr>th:nth-child(2) {
    font-size: 1.2em;
    background-color: rgb(221, 237, 214);
}

.match-maker .title-collection-2 {
    width: 100%;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 999;
    height: 40px;
    min-height: 40px;
    font-size: 2em;
}

.match-maker .matcher-mapped-item {
    display: flex;
    width: auto;
    height: auto;
    padding: 5px 10px;
    margin: 5px 0px;
    /* border: 0.5px solid lightgray;
    border-radius: 4px; */
    align-items: center;
    justify-content: space-between;
}

.match-maker i:hover {
    cursor: pointer;
}

.match-maker .flex-box-td-matcher {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.match-maker .mm-icon {
    display: flex;
    width: 25px;
    height: 25px;
    justify-content: center;
    align-items: center;
}

.match-maker div.dropdown.open>i {
    background-color: grey;
    color: #fff;
}

.match-maker ul.dropdown-menu>li {
    /*padding: 5px 5px;*/
    /*cursor: pointer;*/
}

.match-maker ul.dropdown-menu>li:not(.list-sort-order):hover {
    background-color: #eee;
}

.match-maker div.list-group-item.drag-item {
    background-color: #d3f4ff73;
    border: 0.5px solid #333;
    cursor: move;
    word-break: break-all;
    width: 279px;
}

.match-maker div.list-group-item.drag-item.disabled {
    background-color: rgb(221, 237, 214);
    cursor: not-allowed;
}

.match-maker div#collection-2-mapping>button#mapped>span.badge {
    background-color: rgb(221, 237, 214);
    color: #333;
}

.match-maker div#collection-2-mapping>button#not_mapped>span.badge {
    background-color: #d3f4ff73;
    color: #333;
}

.match-maker div#collection-2-mapping>button.btn>span.badge {
    pointer-events: none;
}

.match-maker div#collection-1-mapping>button#mapped>span.badge {
    background-color: rgb(221, 237, 214);
    color: #333;
}

.match-maker div#collection-1-mapping>button#not_mapped>span.badge {
    background-color: #d3f4ff73;
    color: #333;
}

.match-maker div#collection-1-mapping>button.btn>span.badge {
    pointer-events: none;
}

.match-maker .from-item-input {
    width: calc(100% - 80px) !important;
    display: inline-block;
}

.match-maker .mm-autocomplete-container .twitter-typeahead {
    width: 100%;
}

.match-maker .mm-autocomplete-container .typeahead,
.tt-query,
.tt-hint {
    width: 100%;
    height: 30px;
    padding: 8px 12px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.match-maker .mm-autocomplete-container .typeahead,
.tt-query,
.tt-hint {
    width: 100%;
    height: 30px;
    padding: 8px 12px;

    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

element.style {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 100;
    display: none;
}

.tt-menu {
    width: 422px;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.match-maker .highlighted-dropzone {
    border: 3px double steelblue;
}

/* compact view css */

:root {
    --search-bar-font-color: #333;
    --search-bar-bg-color: #f4f4f4;
}

.match-maker {
    width: 100%;
    height: 100%;
    min-height: 300px;
    position: relative;
}

.match-maker .matcher-flex {
    display: flex;
}

.match-maker .align-v-center {
    align-items: center;
}

.match-maker .align-h-space-between {
    justify-content: space-between;
}

.match-maker .align-h-end {
    justify-content: flex-end;
}

.match-maker table>tbody>tr>td:first-child {
    vertical-align: middle;
}

.match-maker table>thead>tr:first-child {
    position: sticky;
    top: 0px;
    z-index: 2;
    background-color: #fff;
}

.match-maker .mapped-items {
    height: auto;
    display: inline-flex;
    flex-wrap: wrap;
}

.match-maker .chip {
    margin: 0px 5px;
    border-radius: 10px;
    background-color: #eee;
    display: flex;
    align-items: center;
}

.match-maker button * {
    pointer-events: none;
}

.match-maker .show-from-list {
    margin: auto 0px auto auto;
}


.match-maker .show-from-list i {
    font-size: 25px;
}

.match-maker .droppable-zone {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.match-maker .from-list-group {
    height: calc(100% - 64px);
    overflow-y: auto;
}

.match-maker .from-list-item:hover {
    cursor: pointer;
}


.match-maker .to-list-row.matched-item-auto {
    border-left: 5px solid #a7a7a7 !important;
}

.match-maker tr.to-list-row.matched-item-auto > .to-name::before {
    content: '\f121';
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    left: 4px;
    top: calc(50% - 8px);
}

.match-maker .to-list-row.matched-item-manual {
    border-left: 5px solid #5cd9ab !important;
}

.match-maker tr.to-list-row.matched-item-manual > .to-name::before {
    content: '\f007';
    position: absolute;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    left: 5px;
    top: calc(50% - 8px);
}

.match-maker .to-list-row.matched-item-required {
    border-left: 5px solid orangered !important;
}

.match-maker .to-list-row {
    border-left: 5px solid whitesmoke;
    height: 60px;
}
.match-maker .to-list-row.vrow {
    width: 100%;
}

.match-maker .to-list-row a:active,
.match-maker .to-list-row a:focus {
    text-decoration: none;
    outline: none;
}

.match-maker .row-item {
    padding: 5px;
    visibility: hidden;
    border-radius: 4px;
}

.match-maker .to-list-row:hover .row-item {
    visibility: visible;
}

.match-maker .to-list-row:hover .row-item:hover {
    background-color: #eee;
}

.match-maker .swap-icon {
    float: right;
}

.match-maker .to-item-div {
    /* width: calc(50%); */
    min-width: 250px;
    position: relative;
}

.match-maker .from-item-div {
    width: calc(50%);
    min-width: 200px;
}

.match-maker .list-view-collection {
    height: calc(100%);
    overflow-y: auto;
}



.match-maker .to-name {
    position: relative;
}

.match-maker .match-type-div {
    border-radius: 10px;
    border: 1px solid #eee;
}


/* 
    search bar css
*/

.cs-search-bar {
    height: auto;
    display: flex;
    align-items: center;
    border-radius: 35px;
    background-color: var(--search-bar-bg-color);
    color: var(--search-bar-font-color);
    padding: 5px 15px;
}

.cs-search-icon {
    border-radius: calc(50%);
}

.cs-search-icon:hover {
    background-color: rgb(211, 209, 209);
    cursor: pointer;
}

.cs-search-bar-input {
    width: calc(100% - 60px);
    height: 34px;
    border: none !important;
    background-color: transparent !important;
}

.cs-search-cancel {
    display: none;
    background-color: rgb(67, 63, 63);
    color: whitesmoke;
    padding: 6px 8px;
    border-radius: 50%;
}

.cs-search-bar-input:not(:placeholder-shown)+.cs-search-cancel {
    display: block;
    cursor: pointer;
}



.match-maker table.multi-column-table {
    table-layout: fixed;
    position: relative;
}

.match-maker table.multi-column-table thead>tr:first-child {
    position: relative !important;
}

.match-maker table.multi-column-table tr>th:first-child,
.match-maker table.multi-column-table tr>td:first-child {
    position: sticky;
    z-index: 2;
    left: 0px;
}

.match-maker table.multi-column-table tr>th:first-child {
    top: 0px;
    left: 0px;
}

.match-maker table.multi-column-table tr>td:first-child {
    background-color: #fff;
}

.match-maker table.multi-column-table tr>td:not(:first-child) {
    padding: 2px;
}


.match-maker .item-droppable-container {
    min-height: 45px;
    padding: 5px;
    height: auto;
    width: 100%;
    border: 2px solid ghostwhite;
}

.match-maker table.multi-column-table .mapped-item {
    position: relative;
    color: #333;
    cursor: grab;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px 15px;
    background-color: #f4f4f4;
    user-select: none;
    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgb(0 0 0 / 5%);
    min-width: 350px;
    word-break: break-all;
    word-wrap: break-word;
}

.match-maker .cell-highlight {
    border-color: rgb(134, 183, 223);
}

.match-maker div#tableToCollection th {
    vertical-align: middle;
}

.match-maker img.from-img-thumbnail,
.match-maker img.to-thumbnail {
    display: inline;
    margin-right: 10px;
    width: 100px;
}


.from-thumbnail {
    display: inline;
    margin-right: 10px;
    max-width: 25px;
}

.match-maker small.to-optional-info {
    font-style: italic;
    color: gray;
}

.match-maker .to-label-container {
    height: 40px;
    padding: 6px 12px;
}

.match-maker .collection-v-list .v-list-body > div {
    height: 100%!important;
    border: none!important;
}
.match-maker .collection-v-list .vrow {
    height: 60px!important;
    display: flex;
    border-bottom: 1px solid #DDD;
}
.match-maker .collection-v-list .vrow > div {
    flex: 0 0 calc(50% - 10px);
    align-items: center;
    padding: 0 10px;
    display: flex;
}
.match-maker .collection-v-list .vrow > div.to-name {
    border-right: 1px solid #DDD;
}
.match-maker .collection-v-list .vrow {
    height: 60px!important;
}
.match-maker .collection-v-list .header-row {
    display: flex;
    align-items: center;
}
.match-maker .collection-v-list .header-row > div {
    flex: 0 0 calc(50% - 10px);
    height: 100%;
    padding: 8px;
    font-weight: bold;
    font-size: 120%;
}
.match-maker .collection-v-list .header-row>div>div {
    flex: 1 1 auto;
}
/* /javascripts/plugins_src/text_parameterizer/text_parameterizer.css */
.text-parameterization {
    width: 100%;
    height: 100%;
    min-height: 450px;
    position: relative;
}

.text-parameterization .tp-header {
    height: 115px;
    margin-bottom: 15px;
}

.text-parameterization .tp-body {
    height: calc(100% - 200px);
}

.text-parameterization .tp-footer {
    height: 60px;
    margin-top: 10px;
}

.text-parameterization .tp-peacock-renderer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.text-parameterization .tp-pr-header {
    height: 65px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.text-parameterization .tp-pr-body {
    height: calc(100% - 75px);
}

.text-parameterization .tab-content {
    height: 100% !important;
    overflow: auto !important;
    max-height: 100% !important;
}

.text-parameterization .tab-pane {
    height: 100%;
}

.text-parameterization .parameter-editor-body,
.text-parameterization .text-parser-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.text-parameterization .text-parser-editor {
    width: calc(100% - 350px);
    height: 100%;
    position: relative;
}

.text-parameterization .text-parser-editor-expand {
    width: 100% !important;
}

.text-parameterization .text-parser-list-container {
    width: auto;
    height: 100%;
    position: relative;
}

.text-parameterization .text-parser-list {
    width: 350px;
    height: 100%;
    padding: 0px 15px;
    border-left: 5px double #eee;
}

.text-parameterization span.closing-handle {
    position: absolute;
    width: 25px;
    height: 70px;
    background-color: #686868;
    top: calc(50% - 35px);
    left: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0px 0px 10px;
    font-size: 1.2em;
    color: whitesmoke;
    z-index: 10023;
}

.text-parameterization span.closing-handle:hover {
    cursor: pointer;
}

.text-parameterization span.closing-handle * {
    pointer-events: none;
}

.text-parameterization .tp-list-item {
    width: 45%;
}

.text-parameterization .text-parser-editor-contextmenu {
    /* display: none; */
}

.text-parameterization .text-parser-editor-contextmenu .contextmenu-item>a * {
    pointer-events: none;
}

.text-parameterization .text-parser-editor-contextmenu .contextmenu-item>a i {
    width: 25px;
    text-align: center;
}

.text-parameterization .margin-0 {
    margin: 10px 0px;
}

.text-parameterization li.parametarization-list-item>a i {
    width: 25px;
    text-align: center;
}

.text-parameterization #text-parser-modal .tab-content>.active {
    display: flex;
}

#text-parameterization-modal .twitter-typeahead {
    width: 100%;
}

.text-parameterization input.parameter-name.tt-input {
    background-color: #fff !important;
}

.text-parameterization .d3view-context-menu-container li {
    width: 100%;
    padding: 5px 0px;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.margin-0 {
    margin: 0px;
}

.text-parameterization .tp-message {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 350px;
}

.tp-background-container {
    visibility: hidden;
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
}

/* 
    text parser newly added css
*/

.text-parameterization .tp-editor-main-container {
    width: calc(100%);
    height: calc(100%);
    display: flex;
    gap: 1rem;
}

.text-parameterization .tp-editor {
    height: calc(100%);
    position: relative;
}

.text-parameterization .tp-controllers {
    height: calc(100%);
    min-width: 300px;
    max-width: 750px;
    display: grid;
    grid-template-columns: 75px auto;
    border-left: 1px solid #333333;
    padding: 0px 10px 0px 20px;
}


.text-parameterization .tp-param-list-item,
.text-parameterization .tp-anchor-list-item {
    min-height: 75px;
}

.text-parameterization .tp-param-range-item,
.text-parameterization .tp-anchor-range-list-item {
    user-select: none;
    cursor: pointer;
}

.text-parameterization .panel-body.tp-anchor-item-body {
    max-height: 100px;
    overflow: auto;
}

.text-parameterization .panel-body.tp-param-body {
    max-height: 100px;
    overflow: auto;
}

.text-parameterization .tp-param-div {
    height: calc(100%);
    overflow: auto;
    position: relative;
}

.text-parameterization .btn-settings {
    position: absolute;
    right: -30px;
    top: 5px;
    z-index: 10;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: steelblue;
    display: flex;
    font-size: x-large;
    font-weight: bolder;
}

.text-parameterization .btn-settings:hover {
    cursor: pointer;
    background-color: #eee;
}


.text-parameterization .btn-settings * {
    pointer-events: none;
}

.text-parameterization .tp-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    z-index: 2;
    top: 0px;
    background-color: whitesmoke;
    padding: 15px 10px;
}



.text-parameterization .tp_params_type_name_separator,
.text-parameterization .tp-params-delimeter {
    width: 150px;
}

.text-parameterization .tp-ace-editor-renderer {
    width: calc(100%);
    height: calc(100% - 60px);
}

.text-parameterization .tp-suffix,
.text-parameterization .tp-prefix {
    width: 40px;
    display: inline-block;
}

/* new changes on 14/07/23 */

.text-parameterization .text-parameterizer-list {
    padding-left: 25px;
    list-style: upper-latin;
    max-height: calc(100% - 150px);
    overflow: auto;
}

.text-parameterization .tp-edit-parameter {
    height: 100%;
}

.text-parameterization section.tp-edit-parameter-config {
    height: 70px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0px 15px;
    margin-bottom: 10px;
}

.text-parameterization .tp-edit-parameter-footer {
    height: 50px;
    margin-top: 10px;
}

.text-parameterization .tp-edit-parameter-body {
    height: calc(100% - 140px);
}

.text-parameterization section.tp-edit-parameter-config>div {
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    align-items: center;

}

.text-parameterization .min-slider,
.text-parameterization .max-slider {
    flex: 1 1 auto;
}

.text-parameterization .max-percentage,
.text-parameterization .min-percentage {
    min-width: 50px;
    text-align: center;
}


.text-parameterization .tp-header {
    padding: 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 5px #eee;
}

.text-parameterization ul.tp-header-progress {
    --activeWidth: 0%;
    width: calc(90%);
    display: flex;
    justify-content: space-between;
    margin: 0px;
    position: relative;
}

.text-parameterization ul.tp-header-progress::before {
    position: absolute;
    content: '111';
    font-size: 0px;
    width: 100%;
    height: 4px;
    background: #eee;
    left: 0px;
    top: calc(50% - 2px);
}

.text-parameterization ul.tp-header-progress::after {
    position: absolute;
    content: '111';
    font-size: 0px;
    width: var(--activeWidth);
    height: 4px;
    background: steelblue;
    left: 0px;
    top: calc(50% - 2px);
}

.text-parameterization a.tp-progress-step {
    font-size: large;
    padding: 10px 12px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    z-index: 2;
    position: relative;
}


.text-parameterization a.tp-progress-step.active-step {
    color: steelblue;
    border-color: steelblue;
    font-weight: bolder;
    background: #ecfaff;
}

.text-parameterization a.tp-progress-step[data-order="0"]::before {
    content: 'Extract Parameter';
    position: absolute;
    font-size: 13px;
    top: -30px;
    left: -49px;
    white-space: nowrap;
    text-transform: uppercase;
}

.text-parameterization a.tp-progress-step[data-order="1"]::before {
    content: 'Modify Parameter';
    position: absolute;
    font-size: 13px;
    top: -30px;
    left: -44px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* .text-parameterization a.tp-progress-step[data-order="2"]::before {
    content: 'Review and Confirm';
    position: absolute;
    font-size: 13px;
    top: -35px;
    left: -51px;
    white-space: nowrap;
    text-transform: uppercase;
} */

.text-parameterization .tp-footer-btn-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0px 25px;
    box-shadow: 0px -2px 5px #eee;
}

.text-parameterization ul.tp-controller-list {
    display: flex;
    flex-flow: column wrap;
    gap: 1rem;
}

.text-parameterization li.to-controller-list-item i.fas {
    font-size: large;
}

.text-parameterization li.to-controller-list-item small {
    line-height: normal;
    padding-top: 5px;
    word-break: break-word;
}

.text-parameterization li.to-controller-list-item>a {
    color: #333;
    text-decoration: unset;
    padding: 5px 0px;
    display: flex;
    flex-direction: column;
}

.text-parameterization li.to-controller-list-item {
    padding: 5px 0px;
    width: calc(100%);
}

.text-parameterization li.to-controller-list-item:not(.active) * {
    color: #b1acac !important;
}


.text-parameterization li.to-controller-list-item:not(.active):hover {
    background: #ddd;
}

.text-parameterization li.to-controller-list-item.active {
    color: black;
}

.text-parameterization .tp-controller-side-nav {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.text-parameterization .tp-anchors-title,
.text-parameterization .tp-parameters-title {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: #333;
}

.text-parameterization .tp-info-icon {
    font-size: x-large;
}

.text-parameterization .tp-info-icon:hover {
    color: steelblue;
    cursor: pointer;
}

.text-parameterization .tp-hidden {
    visibility: hidden;
}

.text-parameterization .m0 {
    margin: 0px !important;
}

.tp-node-body,
.tp-node-list-body,
.tp-define-transform-body,
.tp-node-transform-body {
    height: calc(100% - 65px);
}

.tp-node-title,
.tp-set-node-title,
.tp-define-transform-title,
.tp-node-transform-title {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.tp-node-transform-list-controls,
.tp-transformation-list-controls,
.tp-node-list-controls,
.tp-node-controls {
    display: flex;
    align-items: self-end;
}

.tp-node-transform-list-control-body,
.tp-transformation-list-control-body,
.tp-node-list-control-body,
.tp-node-control-body {
    height: calc(100% - 90px);
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    overflow: auto;
    scrollbar-gutter: stable;
}

.tp-node-list-control-main,
.tp-node-control-main {
    height: calc(100% - 55px);
}

.tp-node-list-control-footer,
.tp-node-control-footer {
    height: 55px;
}

.tp-transformation-list-control-btns,
.tp-node-list-control-btns {
    margin: 10px 0px;
}

.vtransform-table,
.node-list-vlist {
    height: 150px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.vtransform-table>div,
.node-list-vlist>div {
    border: none !important;
}

.vlist-row,
.vlist-header {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
}

.vtransform-row {
    display: grid;
    grid-template-columns: 1fr 2fr repeat(7, 1fr);
    width: 100%;
}

.vtransform-cell,
.vlist-cell {
    padding: 5px;
}

.vtransform-row:hover,
.vlist-row:hover {
    cursor: pointer;
}

.vtransform-row:not(.vrow-active):hover,
.vlist-row:not(.vrow-active):hover {
    background-color: #eee;
}

.vrow-active {
    background-color: lightblue;
    font-weight: 500;
    color: darkslategray;
}

.vtransform-header>.vtransform-cell,
.vlist-header>.vlist-cell {
    font-weight: 500;
    background: #1c5483;
    color: #fff;
}

.vlist-info-hidden {
    visibility: hidden;
}

.tp-keyword-list-item {
    pointer-events: none;
}

.tp-keyword-list-item>.tp-keyword-item-label {
    width: calc(100% - 50px);
    word-break: break-all;
}

.text-parameterization ul.tp-anchors,
.text-parameterization ul.tp-parameters {
    overflow: auto;
    height: calc(100% - 65px);
}

.text-parameterization li.tp-anchor {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 15px;
    margin: 10px 10px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.text-parameterization li.tp-anchor :is(strong, i.tp-divider),
.text-parameterization li.tp-parameter :is(strong, i.tp-divider) {
    pointer-events: none;
}

.text-parameterization li.tp-anchor:hover,
.text-parameterization li.tp-parameter:hover {
    cursor: pointer;
    background: #c5e3f3;
}

.text-parameterization li.tp-anchor:hover::before,
.text-parameterization li.tp-parameter:hover::before {
    background: #c5e3f3;
}

li.tp-anchor:before {
    content: "\f13d";
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    left: -12px;
    top: calc(50% - 15px);
    color: #333;
    font-weight: 900;
    background: #fff;
    border-radius: 6px;
    padding: 5px;
}

.anchor-details-container {
    margin-left: auto;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    align-items: center;
}

.anchor-details-container>i.fas {
    font-size: 21px;
}

.text-parameterization .tp-flex-col {
    flex-direction: column;
}


.text-parameterization .tp-configs-flex {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.text-parameterization li.tp-parameter {
    display: flex;
    padding: 10px;
    margin: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd;
    border-radius: 6px;
    position: relative;
}

.text-parameterization li.tp-parameter::before {
    content: "\f22b";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: -11px;
    top: calc(50% - 14px);
    padding: 5px;
    background: #fff;
    border-radius: 6px;
}

.text-parameterization .tp-parameter-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.text-parameterization .tp-parameter-info i.fas {
    font-size: 21px;
}

.text-parameterization .tp-editor-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0px 40px 0px 25px;
    border-bottom: 1px solid #eee;
}

.text-parameterization .tp-title {
    padding: 6px 0px;
    min-width: 200px;
    max-width: unset;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-parameterization section.tp-edit-parameter-body {
    padding: 0px 15px;
}

.text-parameterization .colHeader {
    text-transform: uppercase !important;
}

.text-parameterization .wtHider {
    width: 100% !important;
}

.text-parameterization .wtSpreader {
    width: 100% !important;
}

.text-parameterization table.htCore {
    width: 100% !important;
}

.text-parameterization .tp-constant {
    background-color: #fff;
}

.text-parameterization .tp-continuous {
    background-color: lightblue;
}

.text-parameterization .tp-discrete {
    background-color: lightgreen;
}

.text-parameterization span.tp-constant-count {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.text-parameterization span.tp-continuous-count {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: lightblue;
    border: 1px solid #eee;
}

.text-parameterization span.tp-discrete-count {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: lightgreen;
    border: 1px solid #eee;
}

.text-parameterization .tp-handsontable {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.text-parameterization .tp-legends {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 0px;
    margin-left: 10px;
}

.text-parameterization .tp-legends>li.tp-legend {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

/** R0-770 */
.text-parameterization section.tp-edit-parameter-body .tp-handsontable table.htCore thead tr th {
    height: auto!important;
}
/* /javascripts/plugins_src/timeline/timeline.css */
.d3view-timeline svg .tick line {
    stroke: rgba(100,100,100,0.15);
    stroke-dasharray: 10;
}
.d3view-timeline svg .y.axis .tick line {
    display: none;
    stroke-dasharray: 0;
}
.d3view-timeline svg .y.axis .tick.hovered line {
    display: block;
}
.d3view-timeline svg .y.axis .tick text {
    pointer-events: all;
}
.d3view-timeline svg .tick.current line {
    stroke-dasharray: none;
    stroke: #000;
    stroke-width: 2px;
}
.d3view-timeline svg rect.resizer {
    fill: transparent;
}
.d3view-timeline svg rect.resizer.resizing {
    fill: red!important;
}
.d3view-timeline svg rect.resizer-shadow[data-type="start"] {
    cursor: w-resize;
}
.d3view-timeline svg rect.resizer-shadow[data-type="end"] {
    cursor: e-resize;
}
.d3view-timeline svg .bands rect {
    fill-opacity: 0.4;
}
.d3view-timeline ul.tl-legends-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.d3view-timeline ul.tl-legends-list li {
    margin: 0 2px;
}
.d3view-timeline svg g.block.clicked rect.block-rect {
    stroke: red!important;
    stroke-width: 2px;
}
.d3view-timeline svg .gantt-item-text {
    /*color: #FFF;*/
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-timeline svg .gantt-item-text span {
    /*background-color: #FFF;*/
}
.d3view-timeline .timeline-svg {

    height: calc(100% - 35px);
    overflow: auto;
    /*overflow-x: hidden;*/
}
.d3view-timeline .tl-heading {
    /*height: 60px;*/
}
.d3view-timeline svg text.completion-text {
    font-size: 10px;
    fill: gray;
}
.d3view-timeline path.deadline.in-block {
    fill: #FFF!important;
    stroke: red;
}
.d3view-timeline svg .block.mouseover foreignObject {
    opacity: 1!important;
}
.d3view-timeline svg .block.hasDDOpen foreignObject {
    opacity: 1!important;
}
.d3view-timeline .tl-tooltip {
    display: none;
}
.timeline-popover .close_popup {
    position: absolute;
    right: 5px;
    top: 5px;
}
.timeline-popover {
    max-width: unset;
    max-height: unset;
}
.timeline-popover .popover-content {
    max-height: 250px;
    overflow: auto;
}
.d3view-timeline .associated-icons {
    background-color: rgba(255, 255, 255, 0.3);
}
.d3view-timeline-item.d3view-plugins-sidebar .tab-content .tab-pane {
    padding: 0 10px;
}

.d3view-timeline g.partition .p-label {
    font-size: 85%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
/* /javascripts/plugins_src/ratings_calculator/ratings_calculator.css */
.evaluate-rating-module {
    width: 100%;
    height: 100%;
    min-height: 550px;
    display: flex;
    flex-direction: row;
}

.evaluate-rating-module .ratings-nav-bar {
    width: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: whitesmoke;
}

.evaluate-rating-module .ratings-nav-bar .extra-nav-bar {
    width: 60px;
    background-color: whitesmoke;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item>a {
    font-size: 21px;
    color: gray;
    padding: 10px 10px;
    border-right: 4px solid whitesmoke;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item.active {
    cursor: pointer;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item.disabled {

    cursor: not-allowed;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item.disabled a {
    pointer-events: none;
    color: lightgray;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item.active a {
    color: orange;
    border-right: 4px solid steelblue;
    border-radius: 4px;
}

.evaluate-rating-module .ratings-nav-bar .ratings-nav-bar-item>a * {
    pointer-events: none;
}


.evaluate-rating-module .tab-content {
    height: 100%;
    margin: 0px;
    width: calc(100% - 60px);
}

.evaluate-rating-module .tab-content .tab-pane {
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    position: relative;
}

.evaluate-rating-module .tab-content .tab-pane.active {
    display: flex;
    flex-direction: column;
}

.evaluate-rating-module .tab-content .tab-pane h1 {
    font-weight: 400;
}

.evaluate-rating-module ul.basic-rating-list {
    height: auto;
    max-height: calc(100% - 45px);
    margin: 5px 0px;
    overflow-y: auto;
}

.evaluate-rating-module .margin-0 {
    margin: 0px;
}

.evaluate-rating-module .score-view-btn-container {
    position: absolute;
    top: 20px;
    right: 30px;
}


.evaluate-rating-module .rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0px;
}

.evaluate-rating-module .rule-container {
    height: auto;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    width: calc(100% - 20px);
    box-shadow: 1.5px 0.5px 5px #eeee;
    margin: 0px 10px;
}


.evaluate-rating-module .select2-container .select2-choice {
    height: 30px !important;
}

.evaluate-rating-module input.form-control {
    height: 30px !important;
}

.evaluate-rating-module .select2-container .select2-choice>.select2-chosen {
    padding-top: 0px !important;
}

.evaluate-rating-module .rating-message {
    width: 100%;
    padding: 0px 15px;
    margin: 5px 15px;
    border-radius: 4px;
}

.evaluate-rating-module .rating-success-message {
    height: 30px;
    padding: 2px 15px;
    border-radius: 4px;
    margin-top: 8px;
}

.evaluate-rating-module .basic-rule-maker .empty-rule-list,
.evaluate-rating-module .empty-rating-list {
    margin: 20px 0px;
    padding: 0px 15px;
    border-radius: 4px;
}



/* basic rule maker css */

.evaluate-rating-module .basic-rule-maker {
    width: 100%;
    height: 100%;
}

.evaluate-rating-module .basic-rule-maker h2 {
    font-weight: 400;
}

.evaluate-rating-module .basic-rule-maker .basic-rule-nav {
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.evaluate-rating-module .basic-rule-maker .basic-rule-title {
    font-size: 15px;
    margin: 0px;
    padding: 5px 15px;
}

.evaluate-rating-module .basic-rule-maker .condition-list {
    width: 100%;
    height: auto;
    max-height: calc(100% - 75px);
    margin-top: 15px;
}

.evaluate-rating-module .basic-rule-maker .basic-rule {
    margin: 5px 0px;
    border: 0.5px solid #eee;
    border-radius: 7px;
    padding: 10px 15px;
}

.evaluate-rating-module .basic-rule-maker .conditions {
    border-right: 0.5px solid #eee;
}

.evaluate-rating-module .basic-rule-maker .condition-list .condition:first-child .condition-nav .bootstrap-switch {
    visibility: hidden !important;
}

.evaluate-rating-module .basic-rule-maker .basic-condition-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.evaluate-rating-module .basic-rule-maker .rule-title {
    font-size: 15px;
    margin: 0px;
}

.evaluate-rating-module .basic-rule-maker .rule-message {
    width: 100%;
    border-radius: 4px;
}

.evaluate-rating-module .basic-rule-maker .remove-condition {
    float: right;
}

.evaluate-rating-module .basic-rule-maker button *,
.evaluate-rating-module button * {
    pointer-events: none;
}

.evaluate-rating-module .basic-rule-maker .slider-count {
    display: inline-block;
    padding: 0px 15px;
    border-radius: 4px;
    margin: 0px 10px;
    font-size: 12px;
}



.evaluate-rating-module span.d3view-cp-rect.rating-color,
.evaluate-rating-module span.d3view-cp-rect.rating-color-dt {
    width: 100%;
    height: 30px;
    margin: 0px !important;
    border-radius: 4px;
    line-height: normal;
}

.evaluate-rating-module .rule-maker-option {
    margin: 4px 15px;
}

.evaluate-rating-module .tooltip,
.evaluate-rating-module .tooltip-inner {
    min-width: 150px;
    width: auto;
    max-width: 800px;
    
}


/* rule-expression-builder css */

.rule-expression-builder {
    width: 100%;
    height: 100%;
}

.rule-expression-builder .expression-builder-input {
    height: auto !important;
    min-height: 34px !important;
}

.rule-expression-builder .expression-builder-input:empty:before {
    content: attr(data-placeholder);
    color: lightgray;
    background-color: transparent;
    position: absolute;
}

.d3view-dropdown {
    background-color: #fff;
    color: #333;
    border: 0.5px solid lightgray;
    border-radius: 4px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    display: none;
    height: auto;
    padding: 10px 15px;
}

.d3view-dropdown .d3view-dropdown-menu-item {
    padding: 10px 15px;
    font-size: 20px;
    border-bottom: 0.5px solid #eee;
    user-select: none;
}

.d3view-dropdown .d3view-dropdown-menu-item:hover {
    background-color: whitesmoke;
    cursor: pointer;
}

.d3view-dropdown .paginationjs ul {
    display: flex;
}

.d3view-dropdown .paginationjs ul>li.paginationjs-page.active>a {
    background-color: steelblue;
    color: #fff;
}

.d3view-dropdown .paginationjs ul>li>a {
    text-decoration: none !important;
    padding: 5px 8px;
    background-color: whitesmoke;
}

/* decision-tree css */

.evaluate-rating-module .manual-decision-tree {
    width: 100%;
    height: 100%;
    position: relative;
}

.evaluate-rating-module .decision-tree-container {
    height: calc(100% - 55px);
    width: 100%;
    position: relative;
}

.evaluate-rating-module #decision-tree path.link {
    fill: none;
    stroke: darkgray;
}

.evaluate-rating-module #decision-tree text {
    pointer-events: none;
}

.evaluate-rating-module #decision-tree g.node circle.default {
    stroke: gray;
    stroke-width: 1;
    stroke-dasharray: 2px;
}

.evaluate-rating-module #decision-tree g.node circle.condition {
    stroke: gray;
    stroke-width: 2;
}

.evaluate-rating-module #decision-tree g.node circle.rating {
    stroke: gray;
    stroke-width: 2;
}

.evaluate-rating-module #decision-tree g.node circle:hover {
    cursor: pointer;
}


ul.rating-contextmenu {
    display: none;
    position: absolute;
}

ul.rating-contextmenu li>a * {
    pointer-events: none;
}

.evaluate-rating-module .left-slider-container {
    position: absolute;
    left: -15px;
    top: 0px;
    height: 100%;
    width: 300px;
    background: #f9f9f9;
    box-shadow: 3px 0px 5px rgba(0, 0, 0, 0.2);
}

.evaluate-rating-module .rating-btn-groups {
    position: absolute;
    bottom: 10px;
    left: 0px;
    width: 100%;
}

.evaluate-rating-module button * {
    pointer-events: none;
}

.evaluate-rating-module .bg-color-rect {
    width: 100%;
    height: 26px;
    border-radius: 4px;
}

.evaluate-rating-module .decision-tree-tooltip {
    width: auto;
    max-width: 250px;
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 100001;
    background-color: #fff;
}

.evaluate-rating-module .decision-tree-tooltip h2 {
    margin-bottom: 5px;
}

.evaluate-rating-module .decision-tree-tooltip h2,
.evaluate-rating-module .decision-tree-tooltip h4,
.evaluate-rating-module .decision-tree-tooltip h6 {
    font-weight: 400;
    color: steelblue;
    word-break: break-all;
    text-align: center;
}

.evaluate-rating-module .decision-tree-container .slider-count {
    display: inline-block;
    margin: 0px 10px;
    padding: 0px 15px;
    border-radius: 4px;
}

.evaluate-rating-module .decision-tree-error {
    margin: 0px;
    padding: 0px 15px;
    border-radius: 4px;
}

.evaluate-rating-module .htContainer {
    width: 100% !important;
}

.evaluate-rating-module .tree-orientation {
    position: absolute;
    right: 10px;
    top: 5px;
    margin: 0px;
}

.evaluate-rating-module .collapsing {
    transition: none !important;
}

.evaluate-rating-module .node-container {
    width: 175px;
    height: 100px;
    background-color: #fff;
    margin: 5px 2.5px;
    border: 1px solid steelblue;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 5px;
}

.evaluate-rating-module .node-icon-groups {
    position: absolute;
    bottom: -1px;
    left: 62px;

}

.evaluate-rating-module .node-icon-groups i {
    padding: 5px;
    background: steelblue;
    color: #fff;
    cursor: pointer;
}

.evaluate-rating-module small.node-small {
    font-size: 80%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evaluate-rating-module .rating-color {
    width: 50px;
    height: 24px;
    border-radius: 4px;
}

.evaluate-rating-module label.label {
    height: 30px;
    margin: 0px 2px;
}
.evaluate-rating-module label.label * {
    pointer-events: none;
    user-select:none;
}

.evaluate-rating-module .notflag-container {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /javascripts/plugins_src/gitgraph/gitgraph.css */
.git-graph {
    width: 100%;
    height: 100%;
    position: relative;
}

.git-graph .git-graph-container {
    width: 100%;
    height: 100%;
}
/* /javascripts/plugins_src/image_viewer_360/image_viewer_360.css */

/* 
    image 360 viewer css
*/
.image-viewer {
    width: calc(100%);
    height: calc(100%);
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.image-viewer .image-viewer-title-container {
    height: 50px;
    width: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer .image-viewer-slider-body {
    height: calc(100% - 50px);
    width: calc(100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.image-viewer .image360-renderer {
    height: calc(100%);
    width: calc(80%);
    border: 1px solid #eee;
    border-radius: 6px;
    position: relative;
}

.image-viewer .viewer360-change {
    font-size: 45px;
    padding: 5px 15px;
    margin: 0px 10px;
    border-radius: 6;
}

.image-viewer .viewer360-change:hover {
    cursor: pointer;
    background-color: #eee;
}

.image-viewer .image360-image-slide-view {
    position: absolute;
    left: 0px;
    bottom: 10px;
    min-height: 130px;
    height: auto;
    padding: 5px;
    width: calc(100%);
    display: flex;
    flex-direction: column;
}

.image-viewer .image-viewer-animation-controls ,
.image-viewer .gif-animation-control {
    width: calc(100%);
    height: auto;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-viewer .image-slide-view {
    height: 90px;
    width: calc(100%);
    max-width: calc(100%);
    overflow-y: hidden;
    overflow-x: auto;
    background-color: rgba(180, 180, 180, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.2;
}

.image-viewer .image-slide-view:hover {
    opacity: 1 !important;
}

.image-viewer .image-slide-view ul.image360-image-list {
    height: calc(100%);
    width: auto;
    display: flex;
    flex-direction: row;
    margin: 0px;
    align-items: center;
}

.image-viewer .image-slide-view ul.image360-image-list > li.image360-list-item {
    height: calc(100% - 4px);
    width: 100px;
    margin: 0px 5px;
    border: 2px solid #fff;
    position: relative;
    border-radius: 6px;
}

.image-viewer .image-slide-view ul.image360-image-list > li.image360-list-item * {
    pointer-events: none;
}

.image-viewer .image-slide-view ul.image360-image-list > li.image360-list-item:hover {
    cursor: pointer;
}

.image-viewer .image-slide-view ul.image360-image-list > li.image360-list-item.imgActive {
    border: 2px solid orangered;
}

.image-viewer .image360-title-span {
    padding: 5px 15px;
    border-radius: 4px;
}

.image-viewer .gif-play-btn-placeholder {
    font-size: 45px;
    color: lightblue;
    position: absolute;
    left: calc(50% - 20px);
    top: calc(50% - 23px);
}

.image-viewer .edit-controls,
.image-viewer .image360-controls {
    position: absolute;
    right: 5px;
    top: 5px;
}

.image-viewer .image360-edit-canvas,
.image-viewer .image360-renderer-canvas {
    width: calc(100%);
    height: calc(100%);
    background-color: #fff;
}

.image-viewer .edit-controls button.btn * {
    pointer-events: none;
}

/* 
    image360 loader css
*/
.image360-loader-bg {
    width: calc(100%) !important;
    height: calc(100%)!important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image360-loader-bg .image360-loader-spinner {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.image360-loader-bg .image360-loader-message {
    margin: 25px 0px;
    padding: 5px 15px;
    border-radius: 4px;
}

.image360-loader-bg .image360-loader-close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 25px;
}
/* /javascripts/plugins_src/assembly_builder/assembly_builder.css */
.assembly-builder {
    height: 100%;
    width: 100%;
    margin: 0px;
    position: relative;
}

.assembly-builder nav.assembly-header {
    padding: 10px 15px;
    min-height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.assembly-builder .row {
    margin: 0px;
}

.assembly-builder .assembly-builder-title {
    margin-bottom: 0px !important;
}

.assembly-builder .assembly-dropzone {
    width: 100%;
    height: 65px;
    margin: 10px 0px;
    border: 0.5px dashed #333;
    border-radius: 4px;
    vertical-align: middle;
    text-align: center;
    padding-top: 20px;
    overflow-y: auto;
    color: #ababab;
}

.assembly-builder .partIdsFromfile {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5px dashed #333;
    border-radius: 0px 4px 4px 0px;
}

.assembly-builder .thumbnail-single-entry,
.assembly-builder .thumbnail-bulk-entry {
    margin: 10px 0px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    border: 0.5px dashed #333;
    border-radius: 0px 4px 4px 0px;
}

.assembly-builder .thumbnail-single-entry:hover,
.assembly-builder .thumbnail-bulk-entry:hover {
    cursor: pointer;
}

.assembly-builder .select2-container .select2-choice {
    height: auto !important;
}

.assembly-builder .select2-container .select2-choice>.select2-chosen {
    padding-top: 2px !important;
    height: 32px !important;
}

.assembly-builder .select2-drop {
    z-index: 100001 !important;
}

.assembly-builder li.select2-result.select2-result-unselectable.select2-disabled div {
    cursor: not-allowed;
}

.assembly-builder .modal {
    z-index: 9999 !important;
}

.assembly-builder .cancel-popup {
    position: absolute;
    top: -15px;
    right: -15px;
    font-size: 40px;
    z-index: 99999;
    color: #333;
}

.assembly-builder .cancel-popup:hover {
    cursor: pointer;
}

.assembly-builder .active {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
}

.assembly-builder .nav-item:hover>a.active {
    background-color: #337ab7;
}


.assembly-builder th {
    height: 50px !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-size: 15px;
    font-weight: 600;
}

.assembly-builder td {
    text-align: center !important;
    word-break: break-all;
    max-height: 120px !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.assembly-builder .assembly-builder-table {
    max-height: 90%;
    overflow: auto;
}

.assembly-builder .popover {
    max-width: 600px !important;
    width: 600px !important;
    max-height: 90vh !important;
}

.assembly-builder .assembly-table-column {
    min-width: 200px;
    max-width: 250px;
    width: 250px;
}

.assembly-builder .table {
    margin-bottom: 0px !important;
}

.assembly-builder .context-menu {
    position: absolute;
    z-index: 999;
}

.assembly-builder .context-menu-thumbnail:hover {
    cursor: pointer;
}

.assembly-builder .image-viewer {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    height: 100%;
    width: 600px;
}

.assembly-builder .temp-editor {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
    height: 0px;
}

.assembly-builder span.slide-tooltip {
    position: absolute;
    top: -40px;
    left: -10px;
    z-index: 9999;
    background-color: #fff;
    padding: 5px;
    border: 0.5px solid #333;
    border-radius: 10px;
    width: 60px;
}

.assembly-builder .alert {
    margin-bottom: 10px !important;
}

.assembly-builder .highlighted {
    background-color: #d3f4ff73 !important;
}

.assembly-builder input[name="select-row"]:hover {
    cursor: pointer;
}

.assembly-builder .disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.assembly-builder .daterangepicker.dropdown-menu {
    z-index: 999999;
}

.assembly-builder .assembly-table-body td[data-column="thumbnail"] img {
    width: 250px;
}

.assembly-builder .popover .popover-content {
    max-height: 100% !important;
}

.assembly-builder .ab-filter {
    width: 300px;
    margin-top: 5px;
    display: inline-block;
    margin: 0px 15px;
}

.assembly-builder .dropdown-submenu {
    position: relative;
}

.assembly-builder .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}


.assembly-builder .dropdown-submenu {
    position: relative;
}

.assembly-builder .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.assembly-builder .dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.assembly-builder .dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.assembly-builder .dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.assembly-builder .dropdown-submenu.pull-left {
    float: none;
}

.assembly-builder .dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.assembly-builder img.thumbnail:hover {
    cursor: pointer;
}
.assembly-parser {
    position: relative;
    height: 100%;
    margin: 0px;
    min-height: 300px;
    width: 100%;
    display: flex;
}

.assembly-parser .side-nav {
    position: relative;
    height: 100%;
    padding: 0px;
    display: flex;
}

.assembly-parser .parser-editor {
    padding: 0px;
    position: relative;
    height: 100%;
    width : 98%
}

.assembly-parser .editor-div {
    position: relative;
    width : 100%;
    height: 100%;
}

.assembly-parser .tree-view {
    display: block;
    width: 90%;
    height: 100%;
    padding: 10px 10px;
    border-bottom: 0.5px solid #eee;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.assembly-parser button.show-tree:focus {
    outline: none !important;
    border-color: #fff !important;
}
.assembly-parser .side-nav-header {
    position: sticky;
    top: 0px;
    z-index: 9999;
    background-color: #fff;
}

.assembly-parser .list-view {
    width: 100%;
    height: auto;
    border-left: 1px solid #eee;
    margin-top: 10px;
}



.assembly-parser .active {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
}

.assembly-parser .nav-item:hover>a.active {
    background-color: #337ab7;
}

.assembly-parser .contextMenuSlider {
    position: absolute;
    display: block;
    width: 0px;
    height: 100%;
    right: 0px;
    top: 0px;
    transition: width 0.4s;
    transition-timing-function: ease-in-out;
    z-index: 9999;
    background-color: #fff;
    color: #333;
    /* box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    border-radius: 15px 0px 0px 15px;
    padding: 10px 0px;
    border: 1px solid #eee;
}

.assembly-parser .expandMenuSlider {
    width: 500px;
}

.assembly-parser .row {
    margin: 0px;
}

.assembly-parser .select2-container .select2-choice {
    height: auto !important;
}

.assembly-parser .select2-container .select2-choice>.select2-chosen {
    padding-top: 2px !important;
    height: 32px !important;
}

.assembly-parser .select2-drop {
    z-index: 100001 !important;
}

.assembly-parser .lead {
    margin-bottom: 5px;
}

.assembly-parser pre {
    background-color: #fff;
}

.assembly-parser .search-count {
    position: absolute;
    right: 15px;
    top: 10px;
}

.assembly-parser .contextmenu-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 0px 0px 0px 15px;
    width: 100%;
    padding: 10px 10px;
}

.assembly-parser .start-row {
    padding-left: 0px !important;
}

.assembly-parser .start-index {
    padding-right: 0px !important;
}

.assembly-parser .assembly {
    background-color: rgb(248, 232, 161);
    position: absolute;
}

.assembly-parser .part {
    background-color: #9ae4bb;
    position: absolute;
}

.assembly-parser li.list-view-item {
    padding: 0px 0px;
    display: flex;
    align-items: center;
}

.assembly-parser li.list-view-item span.list-content {
    padding: 10px 10px;
    border-radius: 4px;
}

.assembly-parser li.list-view-item span.list-content:hover {
    background-color: #e0eef7;
    cursor: pointer;
}

.carousel-view {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    /* background-color: rgb(19, 49, 77); */
}


.carousel-view .left-arrow-container,
.carousel-view .right-arrow-container {
    display: flex;
    width: 5%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.carousel-view .left-arrow-container:hover,
.carousel-view .right-arrow-container:hover {
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.carousel-view .left-arrow-container>span,
.carousel-view .right-arrow-container>span {
    font-size: 30px;
    opacity: 0.4;
    transition: opacity 0.4s;
    /* color: #fff; */
}


.carousel-view .left-arrow-container:hover>span,
.carousel-view .right-arrow-container:hover>span {
    opacity: 1;

}

.carousel-view .left-arrow-container>span:hover,
.carousel-view .right-arrow-container>span:hover {
    cursor: pointer;
}

.carousel-view .thumbnail-container {
    width: 90%;
    height: 100%;
    overflow-x: hidden;
    position: relative;
}

.carousel-view .dots-container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.carousel-view .thumbnail-slide {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding-top: 5%;
}

.carousel-view .slide-left {
    animation: 500ms left-slide;
}

@keyframes left-slide {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0%;
    }
}

.carousel-view .slide-right {
    animation: 500ms right-slide;
}

@keyframes right-slide {
    from {
        margin-left: 100%;
    }

    to {
        margin-left: 0%;
    }
}

.carousel-view .thumbnail-item {
    background-color: rgb(24, 65, 105);
    padding: 10px 10px;
    border-radius: 6px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #fff;
}

.carousel-view .thumbnail-item:hover .show-part-ids {
    display: block;
    opacity: 1;
}

.carousel-view .show-part-ids {
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
    min-height: 30px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
}

.carousel-view .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.carousel-view .selected, .dot:hover {
    background-color: #717171;
}

.carousel-view span.show-more:hover {
    cursor: pointer;
    text-decoration: underline;
}

.carousel-view .thumbnail-icon {
    font-size: 25px;
    padding: 5px;
}

.carousel-view .thumbnail-icon:hover {
    cursor: pointer;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.carousel-view .thumbnail-info {
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carousel-view .image-viewer {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    height: 100%;
    width: 600px;
}

.carousel-view .thumbnail-dropzone {
    width: 100%;
    height: 65px;
    margin: 10px 0px;
    border: 0.5px dashed #333;
    border-radius: 4px;
    vertical-align: middle;
    text-align: center;
    padding-top: 20px;
    overflow-y: auto;
    color : #ababab;
}
.image-editor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.image-editor .side-menu-bar {
    display: flex;
    width: 20%;
    height: 100%;
}

.image-editor .editor-body {
    display: flex;
    width: 70%;
    height: 100%;
    overflow: auto;
}

.image-editor .history {
    display: flex;
    width: 10%;
    height: 100%;
    overflow-y: auto;
    flex-direction: column;
}

.image-editor .change-tracker-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
    border-bottom-color: #2c2c2c;
    border-bottom-style: double;
    border-bottom-width: 2px;
    font-size: 21px;
}

.image-editor .change-tracker-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 90%;
}

.image-editor .side-nav {
    display: flex;
    width: 25%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: whitesmoke;
}

.image-editor .ribbon-area {
    display: flex;
    width: 75%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.image-editor .menu-icon {
    display: flex;
    width: 100%;
    height: 10%;
    font-size: 40px;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.image-editor .menu-icon:hover {
    background-color: gray;
    color: #fff;
    cursor: pointer;
}

.image-editor span.slide-tooltip {
    top: -45px !important;
    left: 5px !important;
    max-width: 65px !important;
    width: auto !important;
}

.image-editor .thumbnail {
    margin-bottom: 0px;
}

.image-editor .histroy-btn * {
    pointer-events: none;
}
.image-from-url {
    width: 100%;
    height: 100%;
}

.image-from-url * {
    box-sizing: border-box;
}

.image-from-url .thumbnail-container-title {
    font-size: 25px;
    font-weight: 400;
    position: sticky;
    top: 0px;
    z-index: 999999;
    background-color: #fff;
    padding: 15px;
    width: 100%;
}

.image-from-url .thumbnail-container-body {
    width: 100%;
    height: 90%;
    overflow-y: auto;
}

.image-from-url .img-thumbnail {
    padding: 10px 10px;
    border-radius: 6px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    min-height: 150px;
    width: 100%;
    text-align: center;
}

.image-from-url .img-thumbnail:hover {
    cursor: pointer;
}

.image-from-url .img-thumbnail * {
    pointer-events: none;
}

.image-from-url .img-thumbnail img {
    height: 150px;
}

.image-from-url .img-active {
    background-color: rgb(24, 65, 105);
    color: #fff;
}
.thumbnail-view {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.thumbnail-view .thumbnail-item {
    background-color: rgb(24, 65, 105);
    padding: 10px 10px;
    border-radius: 6px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #fff;
}

.thumbnail-view .thumbnail-item:hover .show-part-ids {
    display: block;
    opacity: 1;
}

.thumbnail-view .show-part-ids {
    width: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s;
    min-height: 30px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
}

.thumbnail-view span.show-more:hover {
    cursor: pointer;
    text-decoration: underline;
}

.thumbnail-view .thumbnail-icon {
    font-size: 25px;
    padding: 5px;
}

.thumbnail-view .thumbnail-icon:hover {
    cursor: pointer;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumbnail-view .thumbnail-info {
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* /javascripts/plugins_src/generic_parser/generic_parser.css */
.text-parser {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
}

.text-parser .editor-div {
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
    flex: 1;
    transition-property: width;
    transition-duration: 0.4s;
}

.text-parser .slider-div {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    /*max-width: 500px;*/
    background: #fff;
    z-index: 10001;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    border-radius: 16px 0 0 16px;
    overflow-y: auto;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
    padding: 0;
    display: flex;
    flex-direction: column;
}

.text-parser .slider-div.active {
    width: 400px;
    padding: 32px 32px 24px 32px;
}

.text-parser .slider-footer-div {
    background: #f8f9fa;
    border-radius: 0 0 0 16px;
    padding: 16px 32px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
    position: relative;
}

/* ── Static slider header ── */
.text-parser .gp-slider-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}

.text-parser .gp-slider-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-accent, #3B82F6);
    font-size: 15px;
    flex-shrink: 0;
}

.text-parser .gp-slider-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

/* ── Info chips for Row/Col ── */
.text-parser .gp-info-chips {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.text-parser .gp-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-full, 999px);
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.text-parser .gp-info-chip .fa {
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 11px;
}

.text-parser .gp-info-chip .gp-chip-value {
    color: var(--d3v-accent, #3B82F6);
    font-weight: 600;
}

.text-parser .slider-div label.tp-lead {
    font-size: 1.05em;
    font-weight: 500;
    margin-bottom: 6px;
}

.text-parser .slider-div .form-group {
    margin-bottom: 18px;
}

.text-parser .slider-div input,
.text-parser .slider-div select,
.text-parser .slider-div pre {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    font-size: 1em;
}

.text-parser .slider-div pre.pattern-slider {
    min-height: 36px;
    font-size: 1.1em;
    background: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
/* 
.text-parser .slider-div .btn {
    min-width: 80px;
    font-size: 1em;
    border-radius: 6px;
    margin-left: 8px;
}

.text-parser .slider-div .btn-success {
    background: #33b76e;
    border: none;
}

.text-parser .slider-div .btn-danger {
    background: #c12e2a;
    border: none;
} */

.text-parser .slider-div .close-slider {
    position: absolute;
    top: 18px;
    right: 24px;
    font-size: 2em;
    color: #888;
    cursor: pointer;
    z-index: 10002;
    background: none;
    border: none;
}

.text-parser .slider-div::-webkit-scrollbar {
    width: 8px;
    background: #f5f5f5;
}

.text-parser .slider-div::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}

.text-parser .slider-div .form-control:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 2px #337ab733;
}

.text-parser .slider-div .radio label {
    margin-right: 18px;
    font-weight: 400;
}

.text-parser .slider-div .badge {
    background: #337ab7;
    color: #fff;
    font-size: 0.95em;
    padding: 3px 8px;
    border-radius: 8px;
}

.text-parser .slider-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.18);
    z-index: 10000;
    display: none;
}

.text-parser .slider-overlay.active {
    display: block;
}

.text-parser .left-div {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    order: 3;
}

.text-parser .tree-view {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.text-parser .tree-view .nav {
    flex-shrink: 0;
}

.text-parser .gp-anchor-search-container,
.text-parser .gp-variable-search-container,
.text-parser .variable-list-header {
    flex-shrink: 0;
}

.text-parser .anchor-list,
.text-parser .variable-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Inline collapsible details panel inside each list item */
.text-parser .gp-item-details {
    display: none;
    padding: 10px 14px 14px 32px;
    background-color: #f9f9fb;
    border-top: 1px solid #e8e8ec;
    border-top: 1px solid #e8e8e8;
    font-size: 0.88em;
}

.text-parser .gp-item-details .tp-lead {
    font-size: 0.85em;
    color: #555;
    font-weight: 600;
    margin-top: 6px;
}

.text-parser .gp-item-details .form-control {
    font-size: 0.85em;
    height: 28px;
    padding: 3px 8px;
}

.text-parser .gp-item-details pre {
    font-size: 0.82em;
    max-height: 100px;
    overflow: auto;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 6px 8px;
}

.text-parser .gp-item-details .tp-chart-canvas {
    width: 100%;
    height: 120px;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Chevron toggle icon on list items */
.text-parser .gp-item-chevron {
    font-size: 11px;
    color: #bbb;
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 3px;
}

.text-parser .gp-item-chevron:hover {
    color: #337ab7;
    background-color: rgba(51, 122, 183, 0.08);
}

.text-parser li.selected .gp-item-chevron {
    transform: rotate(90deg);
    color: #337ab7;
}

/* .text-parser .active {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
} */

.text-parser .nav {
    margin-bottom: 10px;
}

.text-parser .nav>li>a {
    padding: 10px 15px;
}

.text-parser .nav-item:hover>a.active {
    background-color: #337ab7;
}

.text-parser .tree-headers {
    margin-bottom: 0px;
    position: sticky;
    top: 0px;
    background-color: #fff;
    z-index: 999;
    overflow: auto;
}

.text-parser .list-ul {
    padding-left: 20px;
    margin-bottom: 0px;
    margin-top: 10px;
}

.text-parser .anchor-list-item {
    list-style: none;
    border-left: 2px solid #c12e2a;
    display: block;
    width: auto;
    word-break: break-word;
    font-size: 0.9em;
    margin: 4px 0px;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.2s;
    overflow: hidden;
}

.text-parser .anchor-list-item:hover {
    background-color: #f8f9fa;
}

.text-parser .variable-list-item {
    list-style: none;
    border-left: 2px solid #419641;
    display: block;
    width: auto;
    word-break: break-word;
    font-size: 0.9em;
    margin: 4px 0px;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color 0.2s;
    overflow: hidden;
}

.text-parser .variable-list-item:hover {
    background-color: #f8f9fa;
}

/* Header row inside each list item */
.text-parser .gp-item-header {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
}

.text-parser span.tp-item {
    padding: 4px 6px;
    border-radius: 4px;
    flex: 1;
    min-width: 0;
    border: 0.5px solid #eee;
}

.text-parser .red>span.tp-item {
    background-color: #FFF;
    color: #c12e2a;
}

.text-parser .green>span.tp-item {
    background-color: #FFF;
    color: #419641;
}

.text-parser svg>line {
    stroke: #b9b3b3;
    stroke-width: 0.5px;
}

.text-parser svg>line {
    stroke: #b9b3b3;
    stroke-width: 0.5px;
}

.text-parser label.tp-lead {
    font-weight: 400;
}

.text-parser .slider-div th {
    font-weight: 400;
}

.text-parser .select2-container .select2-choice {
    height: auto !important;
}

.text-parser .select2-container .select2-choice>.select2-chosen {
    padding-top: 2px !important;
    height: 32px !important;
}

.text-parser .select2-drop {
    z-index: 100001 !important;
}

@keyframes gp-gutter-flash-anim {
    0%   { background-color: #f0c040; color: #000; }
    100% { background-color: transparent; color: inherit; }
}

.ace_gutter-cell.gp-gutter-flash {
    animation: gp-gutter-flash-anim 0.9s ease-out forwards;
}

.text-parser .anchor {
    background-color: rgb(255, 216, 43);
    position: absolute;
    visibility: visible;
}
.text-parser .ace_marker-layer .ace_selected-word {
    z-index: 2;
}
.text-parser .anchor {
    z-index: 1;
}
.text-parser .variable {
    background-color: #33b76e;
    position: absolute;
}
/* Added by shashank2104 on 2026-04-16 - DW-XXXX - General tab: blue marker for pattern-matched lines */
.text-parser .general {
    background-color: rgba(59, 130, 246, 0.25);
    border-left: 2px solid rgba(59, 130, 246, 0.65);
    position: absolute;
    z-index: 1;
}

.text-parser span.remove-skip-pattern {
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 25px;
}

.text-parser .details-view {
    display: none;
}

.text-parser path {
    fill: none;
    stroke: #999;
}

.text-parser .remove-replace-string {
    position: absolute;
    right: 15px;
    top: 13px;
    font-size: 25px;
}

.text-parser span.remove-sign {
    color: red;
    position: absolute;
    top: 45px;
    right: 10px;
    font-size: 21px;
}

.text-parser span.ok-sign {
    color: green;
    position: absolute;
    top: 35px;
    right: 10px;
    font-size: 21px;
}

.text-parser span.match-count {
    float: right;
}

.text-parser .tp-name-input {
    border: 2px solid #ddd;
    transition: border-color 0.3s;
}

.text-parser .tp-name-input:focus {
    border-color: #337ab7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
}

.text-parser .edit-name-icon {
    transition: opacity 0.2s;
}

.text-parser .anchor-list-item:hover .edit-name-icon,
.text-parser .variable-list-item:hover .edit-name-icon {
    opacity: 0.8;
}

/* .text-parser .btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.text-parser .btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
}

.text-parser .btn-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.text-parser .btn-success:hover {
    background-color: #449d44;
    border-color: #398439;
} */

.text-parser .left-div {
    background-color: #f9f9f9;
    border-right: 1px solid #ddd;
}

/* (gp-item-details base styles are above, near line 199) */

.text-parser .anchor-list-item:hover .delete-item-hover, .text-parser .variable-list-item:hover .delete-item-hover {
    opacity: 1;
}

.text-parser .variable-list-item:hover .gp-edit-btn {
    opacity: 1 !important;
}

.text-parser .gp-edit-btn {
    color: #337ab7;
    border-color: #c9d8e8;
}

.text-parser .gp-edit-btn:hover {
    background-color: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.text-parser .anchor-list-item[data-id="0"] .delete-item-hover {
    display: none;
}

/* DVFIV-1940 - Highlight text-type variables with a distinct background */
.text-parser .variable-list-item.gp-type-text {
    border-left-color: #337ab7;
    background-color: #f0f7ff;
}

.text-parser .variable-list-item.gp-type-text:hover {
    background-color: #e3effa;
}

.text-parser .variable-list-item.gp-type-text > span.tp-item {
    color: #337ab7;
}

/* DVFIV-1940 - SortableJS drag-and-drop ghost */
.text-parser .gp-sortable-ghost {
    opacity: 0.4;
    background: #e8f4fd;
}

.text-parser .gp-drag-handle:hover {
    color: #666;
}

/* DW-2813 - Delete all anchors/variables buttons */
.text-parser .gp-delete-all-anchors,
.text-parser .gp-delete-all-variables {
    padding: 2px 6px;
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    transition: var(--d3v-t-fast, 0.12s ease);
    flex-shrink: 0;
}
.text-parser .gp-delete-all-anchors:hover,
.text-parser .gp-delete-all-variables:hover {
    color: var(--d3v-danger, #EF4444);
}

/* DVFIV-1940 - Variable list header and sort buttons */
.text-parser .variable-list-header .gp-sort-variables {
    padding: 2px 5px;
    font-size: 11px;
    margin-left: 2px;
}

/* DVFIV-1940 - Inline editable name in list */
.text-parser .variable-list-item .value,
.text-parser .anchor-list-item .value {
    cursor: text;
}

.text-parser .variable-list-item .value:focus,
.text-parser .anchor-list-item .value:focus {
    outline: 1px solid #337ab7;
    border-radius: 2px;
    padding: 0 2px;
    background: #fff;
}

/* DW-2758 - Editor search bar */
.text-parser .editor-container {
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 100%;
    order: 1;
    border-right: 1px solid #DDD;
}

.text-parser .editor-container .editor-div {
    width: 100%;
    flex: 1;
    border-right: none;
}

.text-parser .gp-editor-search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f5f7fa;
    border-bottom: 1px solid #e0e0e0;
    gap: 4px;
}

.text-parser .gp-search-icon {
    color: #999;
    font-size: 12px;
}

.text-parser .gp-editor-search-input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    max-width: 250px;
}

.text-parser .gp-editor-search-input:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.15);
    outline: none;
}

.text-parser .gp-search-result-count {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

.text-parser .gp-search-prev,
.text-parser .gp-search-next {
    padding: 2px 6px;
    font-size: 11px;
}

/* DW-2758 - LS-DYNA column guide toggle */
.text-parser .gp-lsdyna-split-label {
    font-size: 11px;
    font-weight: normal;
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #555;
    user-select: none;
}

.text-parser .gp-lsdyna-split-active .ace_content {
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--gp-lsdyna-col-width, 70px) - 1px),
        rgba(0, 120, 212, 0.18) calc(var(--gp-lsdyna-col-width, 70px) - 1px),
        rgba(0, 120, 212, 0.18) var(--gp-lsdyna-col-width, 70px)
    );
    /* shift gradient right by Ace's left padding so guides align with text */
    background-position: var(--gp-lsdyna-col-offset, 4px) 0;
}

/* ── Slider form revamp ─────────────────────────────── */

.text-parser .gp-slider-row {
    margin: 0;
}

.text-parser .gp-slider-field {
    padding-left: 0;
}

.text-parser .gp-slider-field-r {
    padding-right: 0;
}

/* ── Card-style sections ── */
.text-parser .gp-card {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    margin-bottom: 12px;
    overflow: hidden;
    transition: var(--d3v-t-base, all 0.2s ease);
}

.text-parser .gp-card:hover {
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
}

.text-parser .gp-card-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    letter-spacing: 0.3px;
}

.text-parser .gp-card-header .fa {
    color: var(--d3v-text-muted, #94A3B8);
    margin-right: 6px;
    font-size: 11px;
}

.text-parser .gp-card-body {
    padding: 12px 14px;
}

.text-parser .gp-card-body .form-group {
    margin-bottom: 10px;
}

.text-parser .gp-card-body .form-group:last-child {
    margin-bottom: 0;
}

.text-parser .gp-card-body .tp-lead {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1E293B);
    margin-bottom: 4px;
}

/* ── Modern inputs ── */
.text-parser .gp-card-body .form-control {
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-sm, 4px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-size: 13px;
}

.text-parser .gp-card-body .form-control:focus {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* ── Modern occurrence pill group ── */
.text-parser .gp-occurrence-group {
    margin-bottom: 8px;
}

/* .text-parser .gp-occurrence-group .btn {
    font-size: 12px;
    padding: 5px 12px;
    border-color: var(--d3v-border, #E2E8F0);
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-primary, #fff);
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.text-parser .gp-occurrence-group .btn:hover {
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-text-primary, #1E293B);
}

.text-parser .gp-occurrence-group .btn.active {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
} */

/* Extractor type now uses Select2 dropdown — old radio styles removed */

/* ── Collapsible section (Advanced) ── */
.text-parser .gp-card.gp-collapsible .gp-card-header {
    cursor: pointer;
    user-select: none;
}

.text-parser .gp-card.gp-collapsible .gp-card-header:hover {
    background: var(--d3v-bg-tertiary, #F1F5F9);
}

.text-parser .gp-card.gp-collapsible .gp-collapse-icon {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    transition: transform 0.25s ease;
    margin-left: auto;
}

.text-parser .gp-card.gp-collapsible.open .gp-collapse-icon {
    transform: rotate(90deg);
}

.text-parser .gp-card.gp-collapsible .gp-card-body {
    display: none;
}

.text-parser .gp-card.gp-collapsible.open .gp-card-body {
    display: block;
}

/* ── Pattern editor ── */
.text-parser .gp-card-body .pattern-slider {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 0;
    transition: border-color 0.15s ease;
}

.text-parser .gp-card-body .pattern-slider:focus {
    border-color: var(--d3v-accent, #3B82F6);
    outline: none;
}

.text-parser .gp-match-badge {
    float: right;
}

.text-parser .gp-match-badge .badge {
    background: rgba(59, 130, 246, 0.1);
    color: var(--d3v-accent, #3B82F6);
    font-weight: 600;
}

/* ── Select inputs ── */
.text-parser .gp-select-full {
    width: 100%;
    height: 34px;
}

/* ── End condition grid ── */
.text-parser .gp-end-cond-item {
    padding-left: 0;
}

.text-parser .gp-end-cond-item:last-child {
    padding-right: 0;
}

/* ── Skip / replace table ── */
.text-parser .gp-skip-table {
    margin-bottom: 0;
}

.text-parser .gp-add-icon {
    float: right;
    font-size: 18px;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: color 0.15s ease;
}

.text-parser .gp-add-icon:hover {
    color: var(--d3v-accent, #3B82F6);
}

/* ── Footer ── */
.text-parser .slider-footer-div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

/* .text-parser .slider-footer-div .slider-save {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-radius: var(--d3v-r-sm, 4px);
    transition: var(--d3v-t-fast, all 0.12s ease);
}

.text-parser .slider-footer-div .slider-save:hover {
    background: var(--d3v-accent-hover, #2563EB);
    border-color: var(--d3v-accent-hover, #2563EB);
}

.text-parser .slider-footer-div .slider-cancel {
    border-radius: var(--d3v-r-sm, 4px);
} */

/* ── DW-2758: Extract LS-DYNA Variables sidebar ── */
.text-parser .gp-lsdyna-extract-sidebar {
    padding: 0;
}

.text-parser .gp-lsdyna-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 0.88em;
    flex-wrap: wrap;
}

.text-parser .gp-lsdyna-anchor,
.text-parser .gp-lsdyna-material {
    color: var(--plugin-primary-color, #337ab7);
    font-size: 0.85em;
    word-break: break-all;
}

.text-parser .gp-lsdyna-hint {
    margin: 0 0 6px;
}

.text-parser .gp-lsdyna-curve-resolved {
    color: #5a9e5a;
    font-style: italic;
}
.text-parser .gp-auto-parse-label {
    font-weight: normal;
    margin: 0;
    font-size: 0.88em;
    cursor: pointer;
}
.text-parser .gp-subcard-header {
    font-size: 0.82em;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── AI Parse panel ──────────────────────────────────────────────────────── */

.text-parser .gp-ai-parse-sidebar {
    padding: 0;
}

/* Phase container */
.text-parser .gp-ai-phase-container {
    padding: 12px 14px 6px;
}

/* Section label above each chip group */
.text-parser .gp-ai-chip-group {
    margin-bottom: 10px;
}
.text-parser .gp-ai-chip-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    margin-bottom: 5px;
}

/* Chips — pill-style tags with visible resting state */
.text-parser .js-ai-parse-chip {
    display: inline-block;
    margin: 0 4px 5px 0;
    padding: 3px 10px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 12px;
    border: 1px solid #d0d5dd;
    background: #f4f6f9;
    color: #444;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.text-parser .js-ai-parse-chip:hover {
    background: var(--plugin-primary-color, #337ab7);
    border-color: var(--plugin-primary-color, #337ab7);
    color: #fff;
}

/* Prompt textarea */
.text-parser .gp-ai-prompt-text {
    resize: vertical;
    font-size: 12px;
    border-radius: 4px;
}

/* File info bar */
.text-parser .gp-ai-file-info {
    display: flex;
    align-items: center;
    padding: 6px 0 2px;
    font-size: 11px;
    color: #aaa;
    border-top: 1px solid #f0f0f0;
    margin-top: 6px;
}

/* Inline error */
.text-parser .gp-ai-error {
    margin: 8px 0 4px;
    font-size: 12px;
    border-radius: 4px;
}

/* Review phase — checklist rows */
.text-parser .gp-ai-check-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 6px;
    margin: 0;
    border-radius: 4px;
    font-weight: normal;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: background 0.1s;
}
.text-parser .gp-ai-check-row:hover {
    background: #f5f7fa;
}
.text-parser .gp-ai-check-row input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.text-parser .gp-ai-check-name {
    flex: 1;
    word-break: break-all;
    font-family: monospace;
    font-size: 11px;
    color: #2c5282;
}
.text-parser .gp-ai-check-type {
    font-size: 10px;
    color: #888;
    background: #eef0f4;
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Review section labels */
.text-parser .gp-ai-review-section {
    margin-bottom: 12px;
}

/* Review summary line */
.text-parser .gp-ai-review-summary {
    font-size: 12px;
    color: #555;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* Panel header */
.text-parser .gp-ai-parse-sidebar > .gp-card-header {
    background: #f7f9fc;
    border-bottom: 1px solid #e0e5ec;
    font-size: 13px;
}

/* Loading phase */
.text-parser .gp-ai-phase[data-phase="loading"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Extraction card (LS-DYNA review phase) */
.text-parser .gp-ai-extraction-card {
    align-items: flex-start;
    padding: 8px 8px;
    margin-bottom: 4px;
    border: 1px solid #e8eaed;
    border-radius: 5px;
    background: #fafbfc;
}
.text-parser .gp-ai-extraction-card:hover {
    background: #f0f4f8;
    border-color: #d0d5dd;
}
.text-parser .gp-ai-extraction-info {
    flex: 1;
    min-width: 0;
}
.text-parser .gp-ai-check-count {
    font-size: 10px;
    color: #888;
    margin-left: 6px;
    background: #eef0f4;
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
}
.text-parser .gp-ai-field-preview {
    font-size: 10px;
    color: #777;
    margin-top: 4px;
    line-height: 1.4;
    word-break: break-word;
}
.text-parser .gp-ai-field-preview i {
    width: 12px;
    color: #999;
    margin-right: 3px;
}
.text-parser .gp-ai-field-preview.gp-ai-field-curves {
    color: #2c7a2c;
}

/* =====================================================================
   GenericParser Summary & Preview (Step 2 Wizard)
   All styles scoped under .text-parser (GenericParser root)
   ===================================================================== */

/* Wizard step 1 container */
.text-parser.gp-wizard-parser-container {
    height: 100%;
    width: 100%;
}

/* ---- Summary container layout ---- */
.gp-summary-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ---- Header: tabs + view toggles ---- */
.gp-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    flex-shrink: 0;
}

.gp-summary-tabs {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    height: 100%;
}

.gp-summary-tabs li {
    height: 100%;
    display: flex;
    align-items: center;
}

.gp-summary-tabs li a.gp-summary-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #6b7280);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .15s, border-color .15s;
    cursor: pointer;
    white-space: nowrap;
}

.gp-summary-tabs li a.gp-summary-tab:hover {
    color: var(--d3v-accent, #4361ee);
}

.gp-summary-tabs li.active a.gp-summary-tab {
    color: #FFF;
    border-bottom-color: var(--d3v-accent, #4361ee);
    font-weight: 600;
}

/* Tabs disabled in tree view mode — they're irrelevant since tree always shows all data */
.gp-summary-tabs.is-tree-mode > li > a.gp-summary-tab,
.gp-summary-tabs.is-tree-mode > li.active > a.gp-summary-tab {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

/* ---- View toggle buttons (table / tree) ---- */
.gp-summary-view-toggles {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.gp-summary-view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-subtle, #e8eaf0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #6b7280);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-size: 12px;
    text-decoration: none;
}

.gp-summary-view-toggle:hover {
    background: var(--d3v-bg-hover, #f0f2ff);
    border-color: var(--d3v-accent, #4361ee);
    color: var(--d3v-accent, #4361ee);
}

.gp-summary-view-toggle.active {
    background: var(--d3v-accent, #4361ee);
    border-color: var(--d3v-accent, #4361ee);
    color: #fff;
}

/* ---- Stats bar ---- */
.gp-summary-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    height: 36px;
    background: var(--d3v-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--d3v-border-subtle, #e8eaf0);
    font-size: 11px;
    color: var(--d3v-text-muted, #9ca3af);
    flex-shrink: 0;
}

.gp-summary-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gp-summary-stats span i {
    color: var(--d3v-accent, #4361ee);
    opacity: .7;
}

/* ---- Body: content + optional settings sidebar ---- */
.gp-summary-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ---- Main content area ---- */
.gp-summary-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ---- Empty state ---- */
.gp-summary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 10px;
    color: var(--d3v-text-muted, #9ca3af);
    font-size: 13px;
}

.gp-summary-empty i {
    font-size: 32px;
    opacity: .35;
}

.gp-summary-empty-hint {
    font-size: 11px;
    opacity: .7;
}

/* ---- Table container (full-height TableDataViewer) ---- */
.gp-summary-table-container {
    height: 100%;
    width: 100%;
}

/* ---- Simple table fallback ---- */
.gp-summary-simple-table-wrap {
    padding: 12px 16px;
    overflow-x: auto;
}

.gp-summary-simple-table {
    font-size: 12px;
    width: 100%;
}

.gp-summary-simple-table thead th {
    background: var(--d3v-bg-secondary, #f9fafb);
    color: var(--d3v-text-secondary, #6b7280);
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid var(--d3v-border-subtle, #e8eaf0);
    white-space: nowrap;
}

.gp-summary-simple-table tbody tr:nth-child(even) {
    background: var(--d3v-bg-secondary, #f9fafb);
}

.gp-summary-simple-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e8eaf0);
    font-size: 11px;
    color: var(--d3v-text-primary, #1f2937);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Settings sidebar ---- */
.gp-summary-settings {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary, #fff);
    border-left: 1px solid var(--d3v-border-subtle, #e8eaf0);
    box-shadow: -2px 0 8px rgba(0,0,0,.04);
    overflow-y: auto;
}

.gp-summary-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e8eaf0);
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
}

.gp-summary-settings-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--d3v-text-muted, #9ca3af);
    font-size: 13px;
    padding: 2px 4px;
    border-radius: var(--d3v-r-sm, 3px);
    transition: color .15s, background .15s;
    line-height: 1;
}

.gp-summary-settings-close:hover {
    color: var(--d3v-text-secondary, #6b7280);
    background: var(--d3v-bg-hover, #f0f2ff);
}

.gp-summary-settings-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gp-summary-setting-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gp-summary-setting-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

.gp-summary-setting-group .form-control {
    font-size: 12px;
    height: 32px;
    border-radius: var(--d3v-r-sm, 4px);
    border-color: var(--d3v-border-subtle, #e8eaf0);
    transition: border-color .15s, box-shadow .15s;
}

.gp-summary-setting-group .form-control:focus {
    border-color: var(--d3v-accent, #4361ee);
    box-shadow: 0 0 0 3px rgba(67,97,238,.12);
    outline: none;
}

.gp-summary-setting-group .checkbox {
    margin: 0;
    font-size: 12px;
    color: var(--d3v-text-primary, #1f2937);
}

.gp-summary-settings-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--d3v-border-subtle, #e8eaf0);
    margin-top: auto;
}

.gp-summary-apply-settings {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background .15s, box-shadow .15s;
}

/* ---- Tree view ---- */
.gp-tree-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gp-tree-node {
    position: relative;
}

/* ── Node row ── */
.gp-tree-node-row {
    display: flex;
    align-items: center;
    height: 34px;
    padding-right: 8px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    cursor: default;
    transition: background var(--d3v-t-fast, .12s), box-shadow var(--d3v-t-fast, .12s), border-color var(--d3v-t-fast, .12s);
    font-size: 12.5px;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
}

.gp-tree-node-row:hover {
    background: var(--d3v-bg-hover, #f0f2ff);
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: var(--d3v-sh-sm, 0 1px 4px rgba(0,0,0,.06));
}

/* ── Caret cell — fixed 28px, full-height click zone ── */
.gp-tree-caret-cell {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gp-tree-toggle {
    cursor: pointer;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 11px;
    transition: color var(--d3v-t-fast, .12s);
    padding: 4px;
}

.gp-tree-node-row:hover .gp-tree-toggle {
    color: var(--d3v-accent, #3b82f6);
}

/* Leaf indicator dot instead of caret */
.gp-tree-leaf-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--d3v-border, #e2e8f0);
    display: inline-block;
    transition: background var(--d3v-t-fast, .12s);
}

.gp-tree-node-row:hover .gp-tree-leaf-dot {
    background: var(--d3v-accent, #3b82f6);
}

/* ── Type icon — fixed 24px ── */
.gp-tree-node-icon {
    width: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.75;
}

/* ── Name ── */
.gp-tree-node-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px 0 4px;
}

/* ── Type badge — pill ── */
.gp-tree-node-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full, 999px);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 4px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border, #e2e8f0);
}

.gp-tree-node-badge--anchor {
    background: rgba(59,130,246,.1);
    color: var(--d3v-accent, #3b82f6);
    border-color: rgba(59,130,246,.25);
}

.gp-tree-node-badge--variable {
    background: rgba(16,185,129,.1);
    color: var(--d3v-success, #10b981);
    border-color: rgba(16,185,129,.25);
}

/* ── Value preview — monospace code chip ── */
code.gp-tree-node-meta {
    font-size: 10px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    color: var(--d3v-text-muted, #94a3b8);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 1px 6px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Actions (delete) — reveal on row hover ── */
.gp-tree-node-actions {
    display: none;
    align-items: center;
    flex-shrink: 0;
}

.gp-tree-node-row:hover .gp-tree-node-actions {
    display: flex;
}

.gp-tree-delete-btn {
    background: none;
    border: none;
    color: var(--d3v-danger, #ef4444);
    opacity: 0.6;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    transition: opacity var(--d3v-t-fast, .12s), background var(--d3v-t-fast, .12s);
    line-height: 1;
}

.gp-tree-delete-btn:hover {
    opacity: 1;
    background: rgba(239,68,68,.1);
}

/* ── Per-type accent: left border + icon color ── */
.gp-tree-node--anchor > .gp-tree-node-row {
    border-left: 3px solid var(--d3v-accent, #3b82f6);
    background: rgba(59,130,246,.02);
}
.gp-tree-node--anchor > .gp-tree-node-row:hover {
    background: rgba(59,130,246,.06);
}
.gp-tree-node--anchor .gp-tree-node-icon { color: var(--d3v-accent, #3b82f6); }

.gp-tree-node--variable > .gp-tree-node-row {
    border-left: 3px solid var(--d3v-success, #10b981);
}
.gp-tree-node--variable .gp-tree-node-icon { color: var(--d3v-success, #10b981); }

.gp-tree-node--group > .gp-tree-node-row {
    border-left: 3px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}
.gp-tree-node--group > .gp-tree-node-row:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}
.gp-tree-node--group .gp-tree-node-icon { color: var(--d3v-text-muted, #94a3b8); }

/* ── Children container — GitHub-style SVG connector lines ── */
.gp-tree-node-children {
    display: none; /* collapsed; jQuery slideToggle shows as display:block */
    position: relative;
    padding-left: 32px; /* indent for children */
    padding-bottom: 4px;
}

/* Vertical trunk — aligns under the parent's caret-cell center (14px from children left = 32-18) */
.gp-tree-node-children::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 0;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(to bottom, var(--d3v-border, #e2e8f0) 80%, transparent);
}

/* Each child node — horizontal arm from trunk to row */
.gp-tree-node-children > .gp-tree-node {
    position: relative;
    margin-bottom: 3px;
}

.gp-tree-node-children > .gp-tree-node:last-child {
    margin-bottom: 0;
}

.gp-tree-node-children > .gp-tree-node::before {
    content: '';
    position: absolute;
    left: -19px; /* from child row left-edge back to the trunk (32 - 13 = 19) */
    top: 16px;   /* vertically centered in 34px row */
    width: 16px; /* leaves a 3px gap before the row */
    height: 1px;
    background: var(--d3v-border, #e2e8f0);
}

/* ── End AI Parse ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   DW-2787: BOM 3-Step Redesign — Grouping & Summary Styles
   All scoped under .text-parser or .gp-* prefixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Category color tokens ── */
.text-parser {
    --gp-part: var(--d3v-accent, #3B82F6);
    --gp-part-bg: #EFF6FF;
    --gp-section: #8B5CF6;
    --gp-section-bg: #F5F3FF;
    --gp-material: var(--d3v-warning, #F59E0B);
    --gp-material-bg: #FFFBEB;
    --gp-contact: var(--d3v-success, #10B981);
    --gp-contact-bg: #ECFDF5;
}

/* ── Step 2: Grouping Container ── */
.gp-grouping-container {
    background: var(--d3v-bg-secondary, #F8FAFC);
}

/* Toolbar with view toggle */
.gp-grouping-toolbar {
    padding: 12px 24px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-primary, #fff);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.gp-grouping-view-toggle .btn.active {
    background: var(--d3v-accent, #3B82F6);
    color: var(--d3v-text-inverse, #fff);
    border-color: var(--d3v-accent, #3B82F6);
}

/* Card grid — 2 per row, wraps */
.gp-grouping-cards {
    position: relative;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: flex-start;
}

/* ERDiagram container */
.gp-erd-container {
    background: var(--d3v-bg-primary, #fff);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Info note — removed per feedback, kept class for future use */
.gp-info-note {
    background: #EEF2FF;
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: var(--d3v-r-md, 8px);
    padding: 10px 14px;
    font-size: 11px;
    color: #3730A3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gp-info-note i { font-size: 14px; flex-shrink: 0; }

/* Settings sidebar */
.gp-grouping-settings {
    width: 300px;
    background: var(--d3v-bg-primary, #fff);
    border-left: 1px solid var(--d3v-border, #E2E8F0);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.gp-grouping-settings-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gp-grouping-settings-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gp-setting-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gp-setting-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.gp-setting-help {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    line-height: 1.4;
    margin: 0;
}
.gp-setting-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 12px;
    color: var(--d3v-text-primary, #1E293B);
    background: var(--d3v-bg-primary, #fff);
    transition: border-color 0.12s ease;
    outline: none;
}
.gp-setting-select:focus {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.gp-setting-divider {
    height: 1px;
    background: var(--d3v-border, #E2E8F0);
}

/* ── Category Table Cards ── */
.gp-category-table-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 400px;
    max-width: 100%;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.gp-category-table-card:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 6px rgba(0,0,0,0.07));
}
.gp-cat-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.gp-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--d3v-r-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.gp-cat-icon--parts { background: var(--gp-part-bg); color: var(--gp-part); }
.gp-cat-icon--sections { background: var(--gp-section-bg); color: var(--gp-section); }
.gp-cat-icon--materials { background: var(--gp-material-bg); color: var(--gp-material); }
.gp-cat-icon--contacts { background: var(--gp-contact-bg); color: var(--gp-contact); }
.gp-cat-icon--other { background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-secondary, #475569); }

/* Hide join section when no joins available */
.gp-join-section.gp-hidden { display: none; }
.gp-cat-card-title { font-size: 14px; font-weight: 600; flex: 1; }
.gp-cat-card-count {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--d3v-r-full, 9999px);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
}
.gp-cat-collapse {
    border: none;
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 4px);
}
.gp-cat-collapse:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
    color: var(--d3v-text-primary, #1E293B);
}
.gp-cat-table-wrap {
    overflow: hidden;
}
.gp-cat-table-wrap .gp-tdv-container {
    height: 100%;
}

/* ── BOM Table (shared) ── */
.gp-bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.gp-bom-table thead th {
    background: var(--d3v-bg-tertiary, #F1F5F9);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    white-space: nowrap;
}
.gp-bom-table tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--d3v-n-100, #F1F5F9);
    color: var(--d3v-text-primary, #1E293B);
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 12px;
    white-space: nowrap;
}
.gp-bom-table tbody tr:hover td {
    background: var(--d3v-bg-hover, #E2E8F0);
}
.gp-bom-table tbody tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.gp-bom-table tbody tr:nth-child(even):hover td {
    background: var(--d3v-bg-hover, #E2E8F0);
}
.gp-name-cell {
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Column origin colors (merged table) */
.gp-th-parts { border-bottom: 3px solid var(--gp-part) !important; }
.gp-th-sections { border-bottom: 3px solid var(--gp-section) !important; }
.gp-th-materials { border-bottom: 3px solid var(--gp-material) !important; }
.gp-th-contacts { border-bottom: 3px solid var(--gp-contact) !important; }

/* ── Split Toggle Row ── */
/* Split By select uses standard .gp-setting-select styling via Select2 */

/* ── Join Rules Builder ── */
.gp-join-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.gp-add-join-rule {
    font-size: 10px; padding: 3px 10px;
    border: 1px dashed var(--d3v-accent, #3B82F6); border-radius: 6px;
    background: rgba(59,130,246,0.04); color: var(--d3v-accent, #3B82F6);
    cursor: pointer; font-weight: 600;
    transition: all 0.12s ease;
}
.gp-add-join-rule:hover { background: rgba(59,130,246,0.1); }

.gp-join-rules { display: flex; flex-direction: column; gap: 8px; }
.gp-join-rules-empty {
    display: flex; align-items: center; gap: 8px; padding: 14px 16px;
    border: 1px dashed var(--d3v-border, #CBD5E1); border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-muted, #94A3B8); font-size: 11px; line-height: 1.4;
}
.gp-join-rules-empty i { font-size: 14px; opacity: 0.5; flex-shrink: 0; }

.gp-join-rule-card {
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
    transition: all 0.12s ease;
}
.gp-join-rule-card:hover { border-color: var(--d3v-accent, #3B82F6); }
.gp-join-rule-card.active {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.08);
}
.gp-join-rule-top { display: flex; align-items: center; gap: 8px; }
.gp-join-rule-toggle {
    width: 32px; height: 18px;
    border-radius: var(--d3v-r-full, 9999px);
    background: var(--d3v-n-300, #CBD5E1);
    position: relative; cursor: pointer;
    transition: background 0.15s ease; flex-shrink: 0;
}
.gp-join-rule-toggle.on { background: var(--d3v-accent, #3B82F6); }
.gp-join-rule-toggle::after {
    content: '';
    position: absolute; width: 14px; height: 14px;
    border-radius: 50%; background: white;
    top: 2px; left: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: transform 0.15s ease;
}
.gp-join-rule-toggle.on::after { transform: translateX(14px); }
.gp-join-rule-label { font-size: 11px; font-weight: 600; color: var(--d3v-text-primary, #1E293B); flex: 1; }
.gp-join-rule-delete {
    border: none; background: transparent; color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px;
    transition: all 0.12s ease;
}
.gp-join-rule-delete:hover { background: #FEF2F2; color: var(--d3v-danger, #EF4444); }
.gp-join-rule-cols { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-join-rule-source, .gp-join-rule-target {
    flex: 1 1 80px; min-width: 80px; padding: 5px 8px;
    border: 1px solid var(--d3v-border, #E2E8F0); border-radius: 6px;
    font-size: 11px; color: var(--d3v-text-primary, #334155); background: var(--d3v-bg-primary, #fff);
}
.gp-join-eq { font-size: 12px; font-weight: 700; color: var(--d3v-text-muted, #94A3B8); }
.gp-join-rule-type {
    padding: 5px 8px;
    border: 1px solid var(--d3v-border, #E2E8F0); border-radius: 6px;
    font-size: 10px; color: var(--d3v-text-secondary, #475569); background: var(--d3v-bg-primary, #fff);
    width: 70px; flex-shrink: 0;
}
.gp-join-match-badge {
    font-size: 9px; color: #16A34A; font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.gp-match-dot { width: 5px; height: 5px; border-radius: 50%; background: #16A34A; display: inline-block; }

/* ── Customize Columns Button ── */
.gp-customize-cols-btn {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--d3v-border, #E2E8F0); border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff); color: var(--d3v-text-primary, #334155);
    font-size: 12px; font-weight: 500;
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: all 0.12s ease;
}
.gp-customize-cols-btn:hover {
    border-color: var(--d3v-accent, #3B82F6); color: var(--d3v-accent, #3B82F6);
    background: rgba(59,130,246,0.02);
}
.gp-customize-cols-btn .fa-bars { color: var(--d3v-text-muted, #64748B); font-size: 13px; }
.gp-cols-arrow { margin-left: auto; color: var(--d3v-text-muted, #94A3B8); font-size: 10px; }

/* ── DW-2843: Name Metadata ── */
.gp-name-metadata-config { padding: 8px 0 0 0; }
.gp-name-metadata-config .gp-setting-label { margin-top: 8px; }
.gp-name-metadata-config .gp-name-metadata-pattern {
    font-family: monospace; font-size: 11px;
    padding: 5px 8px; border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1E293B);
    width: 100%;
}
.gp-name-metadata-config .gp-name-metadata-pattern:focus {
    border-color: var(--d3v-accent, #3B82F6);
    outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.gp-name-metadata-preview { margin-top: 10px; }
.gp-name-metadata-preview .gp-bom-table {
    font-size: 11px; width: 100%;
}
.gp-name-metadata-preview .gp-bom-table th {
    background: var(--d3v-bg-secondary, #F8FAFC);
    font-weight: 600; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.3px; color: var(--d3v-text-muted, #64748B);
    padding: 4px 6px; border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}
.gp-name-metadata-preview .gp-bom-table td {
    padding: 3px 6px; color: var(--d3v-text-primary, #1E293B);
    border-bottom: 1px solid var(--d3v-border-light, #F1F5F9);
    font-family: monospace; font-size: 11px;
}
.gp-nm-badge {
    display: inline-block; padding: 1px 6px; border-radius: var(--d3v-r-sm, 4px);
    font-size: 10px; font-weight: 500; background: var(--d3v-status-info-bg, #EFF6FF);
    color: var(--d3v-status-info, #3B82F6);
}
/* DW-2843 (2026-04-15): multi-pattern list */
.gp-name-metadata-config { padding: 10px 0 0 0; }
.gp-name-metadata-config .gp-nm-patterns-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 6px 0;
}
.gp-name-metadata-config .gp-nm-help-toggle {
    background: transparent; border: none; padding: 2px 4px;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer; font-size: 13px;
    transition: var(--d3v-t-fast, color 0.15s ease);
}
.gp-name-metadata-config .gp-nm-help-toggle:hover,
.gp-name-metadata-config .gp-nm-help-toggle--active {
    color: var(--d3v-accent, #3B82F6);
}
.gp-name-metadata-config .gp-nm-help-panel {
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border-light, #F1F5F9);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 8px 10px; margin-bottom: 8px;
}
.gp-name-metadata-config .gp-nm-help-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--d3v-text-secondary, #475569);
    margin-bottom: 4px;
}
.gp-name-metadata-config .gp-nm-help-row:last-of-type { margin-bottom: 6px; }
.gp-name-metadata-config .gp-nm-help-example {
    font-size: 11px; color: var(--d3v-text-secondary, #475569);
    line-height: 1.5; padding-top: 4px;
    border-top: 1px solid var(--d3v-border-light, #F1F5F9);
}
.gp-name-metadata-config .gp-nm-code {
    font-family: monospace; font-size: 10.5px;
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1E293B);
    border: 1px solid var(--d3v-border-light, #F1F5F9);
    border-radius: 3px; padding: 1px 5px;
    white-space: nowrap;
}
.gp-name-metadata-config .gp-nm-patterns-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.gp-name-metadata-config .gp-nm-pattern-row {
    display: flex; align-items: center; gap: 6px; min-width: 0;
}
.gp-name-metadata-config .gp-nm-pattern-row .gp-nm-pattern-index {
    font-size: 10px; font-weight: 600;
    color: var(--d3v-text-muted, #94A3B8);
    min-width: 18px; flex: 0 0 18px;
    text-align: center; font-family: monospace;
}
.gp-name-metadata-config .gp-nm-pattern-row input.gp-name-metadata-pattern {
    flex: 1 1 auto; min-width: 0;
    font-family: monospace; font-size: 11px;
    padding: 5px 8px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1E293B);
    transition: var(--d3v-t-fast, all 0.15s ease);
}
.gp-name-metadata-config .gp-nm-pattern-row input.gp-name-metadata-pattern:focus {
    border-color: var(--d3v-accent, #3B82F6);
    outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.gp-name-metadata-config .gp-nm-remove-pattern {
    background: transparent; border: 1px solid var(--d3v-border, #E2E8F0);
    color: var(--d3v-text-muted, #94A3B8);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 4px 7px; flex: 0 0 auto;
    transition: var(--d3v-t-fast, all 0.15s ease);
    cursor: pointer;
}
.gp-name-metadata-config .gp-nm-remove-pattern:hover {
    color: var(--d3v-status-danger, #EF4444);
    border-color: var(--d3v-status-danger, #EF4444);
    background: var(--d3v-status-danger-bg, #FEF2F2);
}
.gp-name-metadata-config .gp-nm-add-pattern {
    background: transparent; border: 1px dashed var(--d3v-border, #E2E8F0);
    color: var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 5px 10px; width: 100%;
    font-size: 11px; font-weight: 500;
    transition: var(--d3v-t-fast, all 0.15s ease);
    cursor: pointer;
}
.gp-name-metadata-config .gp-nm-add-pattern:hover {
    border-color: var(--d3v-accent, #3B82F6);
    border-style: solid;
    background: var(--d3v-status-info-bg, #EFF6FF);
}
.gp-nm-badge.gp-nm-badge--idx {
    background: var(--d3v-accent-bg, var(--d3v-status-info-bg, #EFF6FF));
    color: var(--d3v-accent, #3B82F6);
    font-family: monospace;
}

/* ── Column Customizer Slide-in ── */
.gp-col-customizer {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 100%; background: var(--d3v-bg-primary, #fff);
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    z-index: 10; display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}
.gp-col-customizer.open { transform: translateX(0); }
.gp-col-customizer-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--d3v-text-primary, #1E293B);
}
.gp-col-customizer-close {
    margin-left: auto; border: none; background: none;
    color: var(--d3v-text-muted, #94A3B8); cursor: pointer; font-size: 14px;
    padding: 4px; border-radius: 4px;
}
.gp-col-customizer-close:hover { color: var(--d3v-danger, #EF4444); background: #FEF2F2; }
.gp-col-customizer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.gp-col-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; border-bottom: 1px solid var(--d3v-n-100, #F1F5F9);
}
.gp-col-toggles { display: flex; gap: 12px; }
.gp-col-toggle-label {
    font-size: 11px; color: var(--d3v-text-secondary, #64748B);
    display: flex; align-items: center; gap: 5px; cursor: pointer;
    user-select: none;
}
.gp-col-toggle-cb { accent-color: var(--d3v-accent, #3B82F6); }
.gp-col-show-all-link {
    font-size: 10px; color: var(--d3v-accent, #3B82F6);
    background: none; border: none; cursor: pointer; font-weight: 500;
    transition: color var(--d3v-t-fast, 0.12s) ease;
}
.gp-col-show-all-link:hover { color: var(--d3v-accent-hover, #2563EB); }
.gp-col-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    transition: background 0.1s ease;
    cursor: grab;
}
.gp-col-row:hover { background: var(--d3v-bg-secondary, #F8FAFC); }
.gp-col-row.gp-col-dragging { opacity: 0.5; background: #EEF2FF; }
.gp-col-row.gp-col-dragover { border-top: 2px solid var(--d3v-accent, #3B82F6); }
.gp-col-row.gp-col-hidden { opacity: 0.5; }
.gp-col-row.gp-col-hidden .gp-col-name { text-decoration: line-through; color: var(--d3v-text-muted, #94A3B8); }
.gp-col-drag-handle { color: var(--d3v-n-300, #CBD5E1); font-size: 11px; cursor: grab; }
.gp-col-name { flex: 1; font-size: 12px; color: var(--d3v-text-primary, #334155); font-weight: 500; }
.gp-col-name.gp-col-renamed { color: var(--d3v-accent, #3B82F6); }
.gp-col-rename-input {
    flex: 1; font-size: 12px; padding: 2px 6px;
    border: 1px solid var(--d3v-accent, #3B82F6); border-radius: 4px;
    outline: none; color: var(--d3v-text-primary, #1E293B);
}
.gp-col-vis-btn.gp-col-vis-hidden { color: var(--d3v-n-300, #CBD5E1); }
.gp-col-vis-btn.gp-col-vis-hidden:hover { color: var(--d3v-accent, #3B82F6); }

/* ── Origin Dots ── */
.gp-origin-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.gp-origin-dot--parts { background: var(--gp-part); }
.gp-origin-dot--sections { background: var(--gp-section); }
.gp-origin-dot--materials { background: var(--gp-material); }
.gp-origin-dot--contacts { background: var(--gp-contact); }

/* ── Merge Arrow ── */
.gp-merge-arrow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    flex-shrink: 0;
}
.gp-merge-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(59,130,246,0.06);
    border: 1px dashed var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-accent, #3B82F6);
}

/* ── Merged BOM Card ── */
.gp-merged-bom-card {
    background: var(--d3v-bg-primary, #fff);
    border: 2px solid var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-md, 0 4px 6px rgba(0,0,0,0.07));
    overflow: hidden;
}
.gp-merged-bom-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(59,130,246,0.06);
    border-bottom: 1px solid rgba(59,130,246,0.15);
}
.gp-merged-bom-header i { color: var(--d3v-accent, #3B82F6); font-size: 16px; }
.gp-merged-bom-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-accent, #3B82F6);
    flex: 1;
    margin: 0;
}

/* ── Modern Merge Animation (CSS3 keyframes) ── */

/* Phase 1: Cards slide toward each other */
.gp-merge-slide-right {
    animation: gp-slide-right 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 2;
}
.gp-merge-slide-left {
    animation: gp-slide-left 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 2;
}
@keyframes gp-slide-right {
    0%   { transform: translateX(0) scale(1); opacity: 1; }
    60%  { transform: translateX(40%) scale(0.92); opacity: 0.9; }
    100% { transform: translateX(50%) scale(0.85); opacity: 0; }
}
@keyframes gp-slide-left {
    0%   { transform: translateX(0) scale(1); opacity: 1; }
    60%  { transform: translateX(-40%) scale(0.92); opacity: 0.9; }
    100% { transform: translateX(-50%) scale(0.85); opacity: 0; }
}

/* Bystander cards (not involved in merge) fade out */
.gp-merge-bystander-out {
    animation: gp-bystander-fade 0.35s ease forwards;
    pointer-events: none;
}
@keyframes gp-bystander-fade {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); }
}

/* Flash overlay — white pulse when cards merge */
.gp-merge-flash {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: var(--d3v-r-lg, 12px);
    background: radial-gradient(ellipse at center,
        rgba(59,130,246,0.15) 0%,
        rgba(139,92,246,0.08) 40%,
        transparent 70%);
    opacity: 0;
    pointer-events: none;
}
.gp-merge-flash-active {
    animation: gp-flash-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes gp-flash-pulse {
    0%   { opacity: 0; transform: scale(0.9); }
    40%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.05); }
}

/* Phase 3: Merged card reveals */
.gp-merge-reveal {
    animation: gp-reveal-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes gp-reveal-in {
    0%   { opacity: 0; transform: scale(0.9) translateY(8px); }
    50%  { opacity: 1; transform: scale(1.015) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Modern Split Animation ── */

/* Merged card collapses before split */
.gp-split-collapse {
    animation: gp-split-shrink 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}
@keyframes gp-split-shrink {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.92) translateY(4px); }
}

/* Individual cards enter from alternating sides */
.gp-split-enter-left {
    animation: gp-enter-from-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.gp-split-enter-right {
    animation: gp-enter-from-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes gp-enter-from-left {
    0%   { opacity: 0; transform: translateX(-30px) scale(0.92); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes gp-enter-from-right {
    0%   { opacity: 0; transform: translateX(30px) scale(0.92); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Merged BOM card styling */
.gp-merged-bom-card-animated {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--d3v-bg-primary, #fff), var(--d3v-bg-primary, #fff)),
                      linear-gradient(135deg, var(--gp-part), var(--gp-section), var(--gp-material));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* DW-2787: Merged BOM — column flex + min heights for all merged cards (not only :only-child; avoids 0-height wrap when both joins + extra cards) */
.gp-grouping-cards > .gp-merged-bom-card-animated {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 240px;
}
.gp-grouping-cards > .gp-merged-bom-card-animated .gp-cat-table-wrap {
    flex: 1 1 auto;
    overflow: hidden;
}
.gp-grouping-cards > .gp-merged-bom-card-animated .gp-tdv-container {
    height: 100%;
    height: auto;
}
.gp-grouping-cards > .gp-merged-bom-card-animated:only-child {
    flex: 1 1 100%;
    min-height: min(360px, 50vh);
}
.gp-merged-bom-card-animated .gp-cat-card-header {
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(139,92,246,0.06), rgba(245,158,11,0.06));
    border-bottom-color: rgba(59,130,246,0.1);
}
.gp-merged-bom-card-animated .gp-cat-icon {
    background: linear-gradient(135deg, var(--gp-part), var(--gp-section));
    color: #fff;
}

/* Join badge */
.gp-join-badge {
    font-size: 10px;
    padding: 3px 10px;
    border-radius: var(--d3v-r-full, 9999px);
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
    color: var(--d3v-accent, #3B82F6);
    font-weight: 600;
    margin-left: auto;
}

/* DW-2787: Join on but no Part rows yet (re-open / re-parse) */
.gp-join-card.gp-join-needs-parts {
    border-left: 3px solid var(--d3v-warning, #F59E0B);
}
.gp-join-card .gp-join-hint {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
}

/* Category card icons for merged/combined */
.gp-cat-icon--merged {
    background: linear-gradient(135deg, var(--gp-part), var(--gp-section));
    color: #fff;
}
.gp-cat-icon--combined {
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
}

/* ── Category Badge ── */
.gp-cat-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    font-weight: 600;
    display: inline-block;
}
.gp-cat-badge--parts { background: var(--gp-part-bg); color: var(--gp-part); }
.gp-cat-badge--sections { background: var(--gp-section-bg); color: var(--gp-section); }
.gp-cat-badge--materials { background: var(--gp-material-bg); color: var(--gp-material); }
.gp-cat-badge--contacts { background: var(--gp-contact-bg); color: var(--gp-contact); }
.gp-cat-badge--other { background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-secondary, #475569); }

/* ═══════════════════════════════════════════
   STEP 3: Summary — Stat Cards + Slide Panels
   ═══════════════════════════════════════════ */
.gp-summary-container {
    background: var(--d3v-bg-secondary, #F8FAFC);
}

/* Stat cards row */
.gp-summary-stats-row {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
    padding: 24px 24px 0;
}
.gp-stat-card {
    flex: 1;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    padding: 20px;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.gp-stat-card:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 6px rgba(0,0,0,0.07));
    transform: translateY(-1px);
}
.gp-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--d3v-r-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.gp-stat-icon-wrap--anchors { background: var(--gp-part-bg); color: var(--gp-part); }
.gp-stat-icon-wrap--variables { background: var(--gp-section-bg); color: var(--gp-section); }
.gp-stat-icon-wrap--categories { background: var(--gp-material-bg); color: var(--gp-material); }
.gp-stat-icon-wrap--bom { background: #D1FAE5; color: #065F46; }
.gp-stat-text h4 { font-size: 22px; font-weight: 700; color: var(--d3v-text-primary, #1E293B); margin: 0; }
.gp-stat-text p { font-size: 12px; color: var(--d3v-text-muted, #94A3B8); margin: 2px 0 0; }
.gp-stat-view-btn {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-primary, #fff);
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.gp-stat-view-btn:hover {
    background: var(--d3v-accent, #3B82F6);
    color: #fff;
    border-color: var(--d3v-accent, #3B82F6);
}

/* Slide panels area */
.gp-summary-panels {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Slide container */
.gp-slide-container {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.gp-slide-collapsed {
    max-height: 0;
    opacity: 0;
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
}
.gp-slide-expanded {
    max-height: 600px;
    opacity: 1;
}
.gp-slide-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
    gap: 10px;
}
.gp-slide-header h4 { font-size: 13px; font-weight: 600; flex: 1; margin: 0; }
.gp-slide-header--bom { background: #D1FAE5; border-bottom-color: rgba(16,185,129,0.2); }
.gp-slide-header--bom h4 { color: #065F46; }
.gp-slide-header-icon { font-size: 16px; }
.gp-slide-header--bom .gp-slide-header-icon { color: #065F46; }
.gp-slide-header-info { font-size: 11px; color: var(--d3v-text-muted, #94A3B8); }
.gp-slide-header--bom .gp-slide-header-info { color: #065F46; }
.gp-slide-export-btns { display: flex; gap: 6px; margin-left: auto; }
.gp-export-csv-btn,
.gp-export-excel-btn {
    font-size: 10px;
    padding: 4px 10px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.12s ease;
}
.gp-export-csv-btn:hover { border-color: var(--d3v-accent, #3B82F6); color: var(--d3v-accent, #3B82F6); }
.gp-export-excel-btn {
    background: linear-gradient(135deg, #10B981, #06B6D4);
    color: #fff;
    border-color: transparent;
}
.gp-export-excel-btn:hover { box-shadow: var(--d3v-sh-sm); }
.gp-slide-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 16px;
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: all 0.12s ease;
}
.gp-slide-close:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
    color: var(--d3v-text-primary, #1E293B);
}
.gp-slide-body {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}

/* ── Summary empty state ── */
.gp-summary-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--d3v-text-muted, #94A3B8);
}
.gp-summary-empty i { font-size: 36px; margin-bottom: 12px; opacity: 0.4; display: block; }
.gp-summary-empty div { font-size: 13px; line-height: 1.5; }

/* ────────────────────────────────────────────────────────────
   DVFIV-1997: Stat cards as tabs + Summary toolbar + dataset
   container + Relationships step layout
   ──────────────────────────────────────────────────────────── */

/* Active stat-card (acts as a tab) */
.gp-summary-container .gp-stat-card {
    position: relative;
    border: 1px solid var(--d3v-border, #E2E8F0);
}
.gp-summary-container .gp-stat-card.active {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), var(--d3v-sh-md, 0 4px 6px rgba(0,0,0,0.07));
    transform: translateY(-1px);
}
.gp-summary-container .gp-stat-card.active::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 3px;
    background: var(--d3v-accent, #3B82F6);
    border-radius: 2px 2px 0 0;
}

/* Summary body wraps the main dataset + right-hand settings sidebar */
.gp-summary-container .gp-summary-body {
    padding: 16px 24px 24px;
    gap: 16px;
    overflow: hidden;
}
.gp-summary-container .gp-summary-main {
    overflow: hidden;
}

/* Summary settings sidebar — mirrors Grouping step's sidebar for consistency */
.gp-summary-container .gp-summary-settings {
    width: 300px;
    flex-shrink: 0;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gp-summary-container .gp-summary-settings .gp-grouping-settings-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}
.gp-summary-container .gp-summary-settings .gp-grouping-settings-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}

/* Summary dataset container — single container that swaps content per tab */
.gp-summary-container .gp-summary-dataset-container {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
}
.gp-summary-container .gp-summary-dataset-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Relationships step layout (step 3) */
.gp-relationships-container { background: var(--d3v-bg-secondary, #F8FAFC); }
.gp-relationships-main {
    background: var(--d3v-bg-primary, #fff);
    margin: 16px 0 16px 16px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.06));
}
.gp-relationships-sidebar {
    width: 340px;
    flex-shrink: 0;
    background: var(--d3v-bg-primary, #fff);
    border-left: 1px solid var(--d3v-border, #E2E8F0);
    display: flex;
    flex-direction: column;
}
.gp-relationships-sidebar .gp-grouping-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-secondary, #F8FAFC);
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}
.gp-relationships-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
}
.gp-relationships-help {
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    line-height: 1.4;
}
/* /javascripts/plugins_src/image_classifier_ui/image_classifier_ui.css */
/* image annotator */
.feature-classifier {
    --aspactRatio: 1;
}

.feature-classifier {
    width: 100%;
    aspect-ratio: var(--aspactRatio, 1);
    position: relative;
}

.feature-classifier.image-annotator-grid-type-1 {}

.feature-classifier.image-annotator-grid-type-1>.img-annotator-nav {
    display: flex;
    height: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.feature-classifier.image-annotator-grid-type-1>.img-annotator-main {
    position: relative;
    height: calc(100% - 60px);
    display: grid;
    grid-template-columns: auto max(300px, 15%);
}

.feature-classifier .ia-editor {
    background: whitesmoke;
}

.feature-classifier .ia-domain-config {
    border-left: 1px solid #ddd;
}

.feature-classifier .ia-nav-border {
    width: auto;
    border-right: 1px solid #ddd;
    margin: 5px 15px;
    height: calc(100% - 10px);
}

.feature-classifier.image-annotator-grid-type-1>.img-annotator-nav>div {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.feature-classifier.image-annotator-grid-type-1>.img-annotator-nav>div.control-cols-1 {
    justify-content: flex-start;
}

.feature-classifier.image-annotator-grid-type-1>.img-annotator-nav>div.control-cols-2 {
    justify-content: flex-end;
}

.feature-classifier.image-annotator-grid-type-1 .img-action-label {
    padding: 8px 15px;
}

.feature-classifier .annotator-bounding-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 10;
    border: 3px dashed steelblue;
    display: none;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    user-select: none;
    pointer-events: none;
}

.feature-classifier .annotator-bounding-box>span.bounding-box-label {
    /* background-color: steelblue; */
    color: steelblue;
    word-wrap: break-word;
    word-break: break-all;
}

.feature-classifier .ia-move {
    cursor: move;
}

.feature-classifier .ia-hover {
    cursor: pointer;
}

.feature-classifier .img-annotator {
    position: absolute;
    left: 0;
    top: 0;
}

.feature-classifier .point-canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.feature-classifier input[data-element="zoom"] {
    line-height: unset;
    width: 60px !important;
    text-align: center;
}

.feature-classifier .dropdown-menu-left {
    right: 0px;
    left: auto;
    padding-left: 1px;
}

/* image annotator viewer */

.image-annotator-viewer {
    --aspectRatio: auto;
}

.image-annotator-viewer {
    position: relative;
    aspect-ratio: var(--aspectRatio);
}

.image-annotator-viewer .ia-header {
    height: 55px;
    border-bottom: 1px solid #ddd;
}

.image-annotator-viewer .ia-container {
    height: calc(100% - 55px);
    max-height: calc(100% - 55px);
}

.image-annotator-viewer .ia-filters {
    height: 70px;
    max-height: 70px;
}

.image-annotator-viewer .ia-img-list {
    min-height: 150px;
    height: auto;
    max-height: calc(100% - 45px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.image-annotator-viewer .img-grid-item {
    border: 2px solid #fff;
}

.image-annotator-viewer .img-grid-item:hover {
    cursor: pointer;
    border-color: lightblue;
}

.image-annotator-viewer .img-grid-item>div.img-div {
    width: 100%;
    aspect-ratio: var(--aspectRatio);
    padding: 5px;
}

.image-annotator-viewer .img-grid-item>div.img-div img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.image-annotator-viewer .ia-annotation-config {
    height: calc(100% - 40px);
}
/* /javascripts/plugins_src/text_classifier/text_classifier.css */
div.d3view-text-classifier .floating-attrs-container {
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
    z-index: 10;
    /* padding: 10px; */
    border-left: 1px solid #DDD;
    background-color: #FFF;
    display: none;
    /* border-radius: 10px; */
}
div.d3view-text-classifier .floating-attrs-container .d3view-inputsBuilder {
    border: none;
}
div.d3view-text-classifier .ace_gutter-cell.gutter-marker {
    background: lightgreen;
    cursor: pointer;
    /* color: #FFF; */
}
div.d3view-text-classifier .ace_gutter-cell.gutter-marker:hover {
    background-color: #DDD;
}

div.d3view-text-classifier .text-marker {
    position: absolute;
    background-color: lightgreen;
    z-index: 50;
}
/* /javascripts/plugins_src/data_profiler/dataprofiler.css */
.d3view-data-profiler {
    /*margin-right: 10px;*/
    overflow: auto;
}
.d3view-data-profiler .data-profiler-header [data-header-type] {
    flex: 1 1 auto;
    height: 100px;
    box-shadow: none;
    background: #FFF;
    border-color: var(--neutralLight);
}

.d3view-data-profiler > div {
    padding: 0 15px;
}

.d3view-data-profiler .table_summary > div {
    flex: 1 1 calc(50% - 10px);
    overflow: auto;
    margin: 0 5px;
}
.d3view-data-profiler .data-profiler-header {
    padding: 10px 60px 10px 60px;
    border-bottom: 1px solid #DDD;
}
.d3view-data-profiler .data-profiler-header.sticky {
    position: absolute;
    top: 0!important;
    width: calc(100% - 10px);
    z-index: 200;
    background: var(--d3neutralLighterAlt);
}
.d3view-data-profiler .data-profiler-header.sticky + .data-profiler-body {
    padding-top: 100px;
}
.d3view-data-profiler .data-profiler-header .pl-tags > span:first-child {
    margin-left: 0!important;
}
.d3view-data-profiler .section-label {
    margin: 5px 0;
    padding: 0 40px;
}
.d3view-data-profiler .table_summary {
    max-height: 350px;
    overflow: auto;
}
/*.d3view-data-profiler .data-profiler-body {*/
/*    height: calc(100% - 70px);*/
/*    overflow: auto;*/
/*}*/

.d3view-data-profiler .relationship-viz {
    flex: 1 1 calc(33% - 10px);
    margin: 0 5px;
    min-height: 300px;
}

.ml-ops div.ops-body .viz-params.clearfix.tab-content {
    padding: 0!important;
}

.d3view-data-profiler .data-profiler-body {
    height: calc(100% - 100px);
}

.d3view-data-profiler section.data-profile {
    height: 100%;
    min-height: 60vh;
}

.d3view-data-profiler .profiler-page .page-contents {
    height: calc(100% - 40px);
}
.d3view-data-profiler .profile-viz.viewContent {
    position: relative!important;
    margin: 0 10px;
    overflow: auto;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
}
.d3view-data-profiler .profile-viz.viewContent .floating-btn.top {
    top: 0;
}
.d3view-data-profiler .profile-viz.viewContent .floating-btn.bottom {
    bottom: 0;
}
.d3view-data-profiler .profile-viz .bs_datatable_wrapper {
    min-height: unset;
}
.d3view-data-profiler .profile-item-view {
    overflow: auto;
}

.data-profiler-item div.simlytiks #viz_preview_options {
    margin: 0;
}

.data-profiler-data-groups .data-groups-container > div,
.data-profiler-sidebar .content-wrapper > div > div {
    padding: 10px;
}
.data-profiler-data-groups .data-groups-container > div.data-groups-header {
    /*border-bottom: 1px solid #DDD;*/
}
.data-profiler-data-groups .data-groups-container .data-filters-body {
    padding: 0!important;
}
.d3view-data-profiler .profiler-page .data-profile-carousel > .carousel-inner > .item.temp_display {
    display: block!important;
}

.data-profiler-sidebar .basket-items .basket-item {
    border: 1px solid #DDD;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* R0-3849 - Enlarge in the Data Profiler scopes hasFullScreenViz to the
   profiler container (NOT the whole div.simlytiks root) so the Simlytiks nav
   chrome stays visible. Hide the profiler header in either case. */
div.simlytiks.hasFullScreenViz .data-profiler-header,
.sl-data-overview-container.hasFullScreenViz .data-profiler-header,
.d3view-data-profiler.hasFullScreenViz .data-profiler-header {
    display: none;
}

/* R0-3849 - The .sl-data-overview-container carries the `animated fadeIn`
   class, which creates a stacking context that traps the position:fixed
   enlarged viz inside the container. When entering full-screen, neutralize the
   animation/transform so .viewContent.fixed can escape to the real viewport,
   and lift the container above the surrounding chrome. */
.sl-data-overview-container.hasFullScreenViz {
    animation: none !important;
    transform: none !important;
    perspective: none !important;
    z-index: 103;
}

.d3view-data-profiler .sl-page .sl-page-tabs {
    width: 70px;
}
.d3view-data-profiler .sl-page .sl-page-tabs .pl-tab-item-label {
    font-size: unset;
}
.dp-exec-message li[data-id] {
    padding: 10px;
    font-size: 1.2em;
}
.dp-exec-message li[data-id].active {
    color: green;
}

.d3view-data-profiler .data-profile .sl-viz-preview {
    position: absolute!important;
    left: 30px;
    width: calc(100% - 60px);
}
/* /javascripts/plugins_src/chatapi/chatapi.css */
.d3view-chat-api-container.fullscreen {
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-duration: 0.4s;
}
.d3view-chat-api-container.pl-loading {
    cursor: progress;
}
.d3view-chat-api-container.pl-loading .chat-placeholder {
    display: block;
}
.d3view-chat-api-container .d3view-chat-api-wrapper > div {
    padding: 10px 20px;
}
.d3view-chat-api-container .d3view-chat-api-wrapper .d3view-chat-title {
    display: inline;
    margin-bottom: 0;
}



.d3view-chat-api .chat-input-container {
    position: relative;
    padding: 10px;
}
.d3view-chat-api .enter-text {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/*.d3view-chat-api > div {*/
/*    padding: 10px;*/
/*}*/
.d3view-chat-api .chat-api-header {
    border-bottom: 1px solid #DDD;
    padding: 10px;
}
.d3view-chat-api .chat-input-container .twitter-typeahead {
    width: 100%;
}
.d3view-chat-api input.chat-input {
    height: 50px!important;
}
.d3view-chat-api .chat-api-contents {
    height: calc(100% - 80px);
    overflow: auto;
    /*margin-bottom: 10px;*/
}
.d3view-chat-api .chat-api-contents.empty:after {
    content: 'Please enter a text in the input field to generate results';
    color: grey;
    pointer-events: none;
    padding: 20px;
    display: block;
}

/*.d3view-chat-api .chat-result-item {*/
/*    margin-bottom: 5px;*/
/*    border: 1px solid #f5f5f5;*/
/*    padding: 10px;*/
/*    box-shadow: var(--plugin-box-shadow-lightest);*/
/*}*/
.d3view-chat-api-container[data-theme="light"] .d3view-chat-api .chat-result-item .chat-text {
    color: var(--plugin-text-color);
}
.d3view-chat-api ul.result-items-list {
    display: flex;
    flex-wrap: wrap;
}
.d3view-chat-api ul.result-items-list > li {
    margin: 5px;
}

.d3view-chat-api .chat-result-item .viz-container {
    width: 100%;
    height: 300px;
}
.d3view-chat-api-container .d3view-chat-api-wrapper > div.d3view-chat-body {
    padding: 0;
    position: relative;
}

.d3view-chat-api-container .chat-placeholder {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.d3view-chat-api-wrapper .pl-loading-bars {
    position: relative;
    transform: none;
    left: unset;
    top: unset;
}

.d3view-chat-api .chat-result-item .chat-query {
    padding: 20px;
    border-bottom: 1px solid #DDD;
    margin-bottom: 0;

}
.d3view-chat-api .chat-result-item .chat-result-contents {
    font-size: 1.6em;
}

.d3view-chat-api .chat-result-item .chat-answer {
    padding: 20px;
    background: var(--neutralLight);
    margin-bottom: 0;
    /* border-bottom: 1px solid #DDD; */
}
.d3view-chat-api .chat-result-item .chat-icon {
    margin-right: 10px;
    display: none;
}
.d3view-chat-api .tt-menu {
    bottom: 100%!important;
    top: auto!important;
}

.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api-wrapper {
    background: var(--plugin-dark-background)!important;
    color: var(--plugin-dark-color)!important;
}
.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api .chat-result-item .chat-icon > i {
    color: var(--plugin-dark-color);
}
.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api .chat-result-item .chat-answer {
    background-color: var(--plugin-dark-container-bg);
}

.d3view-chat-api-container label {
    display: inline-block!important;
}
.d3view-chat-api-container .plugin-options label {
    display: flex!important;
    align-items: center;
}

.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api-wrapper .d3view-chat-title,
.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api-wrapper .d3view-chat-header .close {
    color: var(--plugin-dark-color);
}

.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api input.chat-input,
.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api .tt-menu {
    background: var(--plugin-dark-container-bg)!important;
    color: var(--plugin-dark-color)!important;
}

.d3view-chat-api .chat-result-item .chat-query .chat-icon > i {
    color: darkorange;
}
.d3view-chat-api .chat-result-item .chat-answer .chat-icon > i {
    color: green;
}
/*.d3view-chat-api .chat-result-item .chat-answer .chat-result-contents {*/
/*    display: none;*/
/*}*/

.d3view-chat-api .chat-api-contents.empty .chat-samples-container {
    display: block;
}
.d3view-chat-api .chat-samples-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
.d3view-chat-api .chat-samples-container .chat-samples {
    display: flex;
    flex-wrap: wrap;
}

.d3view-chat-api .chat-sample {
    width: calc(50% - 10px);
    margin: 5px;
    padding: 10px;
    background-color: var(--neutralLighter);
    border: 1px solid #DDD;
    border-radius: 5px;
    cursor: pointer;
}
.d3view-chat-api-container[data-theme="dark"] .d3view-chat-api .chat-sample {
    background-color: unset;
}
.d3view-chat-api .chat-sample:hover {
    background-color: #DDD;
    color: var(--plugin-primary-color);
}


.d3view-chat-api .chat-input-container .typeahead.dropdown-menu {
    width: calc(100% - 20px);
    bottom: calc(100% - 10px)!important;
    top: unset!important;
}

/* /javascripts/plugins_src/graphr/graphr.css */
div.d3view-graphr {
    position: relative;
}
.d3view-graphr .graphr-main .graphr-new-instance {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background: #FFF;
}
.d3view-graphr .graphr-main[data-is-brand-new="true"] .graphr-new-instance {
    display: block!important;
}

div.d3view-graphr div.d3view-tab-manager div.d3view-tabs-horizontal .nav-tabs {
    flex-grow: 0;
}

div.d3view-graphr .image_gallery video {
    width: 100%!important;
    height: 100%!important;
}

div.d3view-graphr div.simlytiks[data-management="standalone"] div.viewContent.active {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);

    background-color: var(--dt-selection-color);
}
div.d3view-graphr div.simlytiks div.viewContent.active .vc-blank-options > img {
    opacity: 1!important;
}
div.d3view-graphr div.simlytiks div.viewContent .vc-blank-options > img {
   pointer-events: none;
}

.ds-container .add-remove-row {
    opacity: 0;
}
.ds-container tr:hover .add-remove-row {
    opacity: 1;
}

div.d3view-graphr .viewContent .vc-blank-options {
    /*width: 60%;*/
}
div.d3view-graphr .viewContent .vc-blank-options .graphr-buttons {
    opacity: 0;
    transition: opacity 0.3s;
}
div.d3view-graphr .viewContent:hover .vc-blank-options .graphr-buttons {
    opacity: 1;
}

.d3view-plugins-sidebar.graphr-data-sources .flex-item {
    /*border: 1px solid #DDD;*/
    margin-bottom: 10px;
    padding: 10px 15px;
    /*overflow: auto;*/
}

.graphr-data-sources .bs_datatable_wrapper .warning_text {
    width: 70%;
}

.d3view-plugins-sidebar.graphr-data-sources {
    padding: 0;
}
.d3view-plugins-sidebar.graphr-data-sources .panel-heading {
    padding: 10px!important;
}

/*.graphr-data-sources .main-ds-container,*/
.graphr-data-sources .extraction-container,
.graphr-data-sources .source-responses-container,
.graphr-data-sources .ds-transformations-container{
    flex: 1 0 calc(50% - 10px);
    padding: 6px 20px;
}

.graphr-data-sources .bs_datatable_wrapper {
    /*min-height: unset;*/
}
.graphr-data-sources .sources-options button {
    flex: 1 0 calc(25% - 20px)!important;
}
.d3view-plugins-sidebar.graphr-data-sources .import-options button {
    margin: 0 10px;
    flex: 1 0 calc(25% - 20px)!important;
}

.graphr-data-sources .import-options-container.hasActive button:not(.active) {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.graphr-data-sources .import-options-container.hasActive button:hover {
    opacity: 1!important;
}

.graphr-data-sources .rm-pagination .btn-text {
    display: none;
}

.graphr-data-sources .ds-item-flex > * {
    flex: 0 0 33%;
    padding: 0 10px;
    margin: 0;

}
.graphr-data-sources .ds-item-flex .ds-type {
    text-transform: capitalize;
}
.graphr-data-sources .items-container li:not(.dragging):not(.editing):hover .ds-name:hover {
    text-decoration: underline;
}
.graphr-data-sources .ds-name-edit {
    display: none;
}
.graphr-data-sources .items-container li:not(.dragging):not(.editing):hover .ds-name-edit {
    display: inline-block;
}
.graphr-data-sources .items-container li.editing input[name="ds-select"] {
    visibility: hidden;
}
.graphr-data-sources .items-container li:not(.dragging):not(.editing):hover .ds-name-edit:hover {
    color: red;
}
.graphr-data-sources .items-container li.editing .ds-name-edit {
    display: none;
}
.graphr-data-sources .items-container li.editing .plugin-cp {
    display: inline-block!important;
}

.multiple-drag-helper {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 14px;
    color: #666;
}
.drag-count {
    font-weight: bold;
    color: #333;
}

.graphr-single-drag-helper {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 200px;
    max-width: 300px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.graphr-single-drag-helper .item-icon {
    color: #666;
    font-size: 16px;
}
.graphr-single-drag-helper .item-details {
    flex: 1;
    overflow: hidden;
}
.graphr-single-drag-helper .item-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.graphr-single-drag-helper .item-type {
    font-size: 12px;
    color: #666;
    text-transform: capitalize;
}
.dragging {
    opacity: 0.7;
    z-index: 1000;
}
.items-container li[data-id] {
    transition: left 0.1s ease-out;
}

/*.pl-generic-selections .simple-list-view .items-container > li.ui-selected .item-actions {*/
/*    display: none!important;*/
/*}*/

div.d3view-graphr .viewContent .graphr-button._blank {
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
    z-index: 10;
}
div.d3view-graphr .viewContent:hover .graphr-button._blank {
    display: inline-block;
}
div.d3view-graphr .viewContent.active .graphr-button[data-id="set_as_active"] {
    color: green;
}

.graphr-data-sources .items-container .ds-status {
    padding: 0 10px;
}
.graphr-data-sources input[name="ds-select"] {
    margin-right: 10px;
}
.graphr-data-sources .empty-data-sources .import-options-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 70%
}
.graphr-data-sources .empty-data-sources .import-options-container button {
    /*flex: 0 0 calc(33% - 10px);*/
    margin: 5px;
}

.d3view-graphr.hasFullScreenVizInSimlytiks {
    z-index: 2000;
}
.graphr-data-sources .newton-operations .newton-operation-cont {
    height: auto;
    border: none;
    display: flex;
    flex-direction: column;
}

.graphr-data-sources .ds-body li[data-id] {
    border-left: 4px solid transparent;
}

.d3view-graphr .graphr-dropzone.dropzone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px dashed #ccc;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
}

.d3view-graphr .graphr-main.dz-drag-hover .graphr-dropzone {
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-color: #66afe9;
}

.d3view-graphr .graphr-main .graphr-dropzone.dropzone .dz-message {
    text-align: center;
    color: #666;
}

.d3view-graphr .graphr-main .graphr-dropzone.dropzone .dz-message i {
    font-size: 48px;
    color: #66afe9;
    margin-bottom: 10px;
    display: block;
}

.d3view-graphr .graphr-main .graphr-dropzone.dropzone .dz-message span {
    font-size: 16px;
    display: block;
}

.d3view-graphr .graphr-main .graphr-dropzone.dropzone .dz-preview {
    display: none;
}

.mme-preview-handling {
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 20px;
}

.mme-preview-handling .alert {
    margin-bottom: 15px;
}

.mme-preview-handling .alert i {
    margin-right: 8px;
}

.mme-responses-table {
    margin-top: 15px;
}

.mme-responses-table table {
    margin-bottom: 0;
}

.mme-responses-table th {
    background-color: #e9ecef;
    font-weight: 600;
}

.mme-responses-table td {
    vertical-align: middle;
}

.mme-responses-table .badge {
    font-size: 0.85em;
    padding: 5px 10px;
}

.mme-responses-table tr.success {
    background-color: #d4edda !important;
}

/* MME Import Template Styles */
.mme-import-container {
    padding: 0 20px;
}

.mme-file-info .alert {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mme-file-info .badge {
    font-size: 0.9em;
    padding: 5px 10px;
}

.mme-responses-preview {
}

.mme-responses-preview h5 {
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mme-responses-preview table {
    margin-bottom: 0;
}

.mme-responses-preview th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

.mme-responses-preview td {
    vertical-align: middle;
}

.mme-responses-preview .badge {
    font-size: 0.85em;
    padding: 5px 10px;
}

.mme-grid-preview {
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mme-grid-preview h5 {
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}

.grid-preview-container {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
}

.grid-preview-row {
    display: flex;
    height: 100px;
}

.grid-preview-cell {
    flex: 1;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    transition: all 0.2s ease;
}

.grid-preview-cell:hover {
    background: #e9ecef;
}

.cell-content {
    text-align: center;
}

.cell-content i {
    font-size: 1.2em;
    margin-bottom: 5px;
    display: block;
}

.cell-label {
    font-size: 0.9em;
    color: #495057;
}

.mme-additional-info .alert {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mme-responses-preview tbody tr {
    cursor: move;
}

.mme-responses-preview tbody tr.dragging {
    opacity: 0.5;
}

.grid-preview-cell {
    transition: all 0.2s ease;
}

.grid-preview-cell.drop-hover {
    background-color: #e9ecef;
    border-color: #66afe9;
}

.grid-preview-cell .response-name {
    font-weight: bold;
    word-break: break-word;
    margin-bottom: 8px;
    max-height: 40px;
    overflow: hidden;
}

.grid-preview-cell .response-details {
    font-size: 0.9em;
    color: #666;
}

.graphr-mme .option input[type="radio"]:checked ~ .edit-layout {
    display: inline-block; /* Show when radio button is checked */
}

/* Container for checkbox, icon, and file name */
.graphr-data-sources .ds-name-container {
    display: flex;
    align-items: center;
    overflow: hidden; /* Ensure truncation works */
    max-width: calc(100% - 20px); /* Prevent overflow */
}

/* File name text */
.graphr-data-sources .ds-name {
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for long text */
}

/** Added by shashank2104 on 01/02/2026 at 01:56 PM - R0-3013 - set z-index to unset for all divs in graphr-main-layout to fix responses side bar and visualizations are overlapping. **/
.d3view-graphr .graphr-main-layout > div {
    z-index: unset!important;
}
/* /javascripts/plugins_src/graphanalyzer/graphanalyzer.css */
/** Added by shashank2104 on 11/03/2025 at 09:33 AM - SIM-979 - Graph comparison plugin styles **/

.d3view-graphanalyzerapp .graphanalyzerapp-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.d3view-graphanalyzerapp .graphanalyzerapp-header {
    flex-shrink: 0;
}

.d3view-graphanalyzerapp .graphanalyzerapp-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.d3view-graphanalyzerapp .graphanalyzerapp-tab {
    cursor: pointer;
    transition: all 0.2s ease;
}

.d3view-graphanalyzerapp .graphanalyzerapp-tab.active {
    font-weight: bold;
}

.d3view-graphanalyzerapp .graphanalyzerapp-content {
    position: relative;
    overflow: hidden;
}

.d3view-graphanalyzerapp .graphanalyzerapp-graph-container {
    width: 100%;
    height: 100%;
}

.d3view-graphanalyzerapp .graphanalyzerapp-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-control {
    margin-left: auto;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-view {
    width: 100%;
    height: 100%;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-container {
    width: 100%;
    height: 100%;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-left,
.d3view-graphanalyzerapp .graphanalyzerapp-compare-right {
    overflow: hidden;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-left-container,
.d3view-graphanalyzerapp .graphanalyzerapp-compare-right-container {
    width: 100%;
    height: calc(100% - 40px); /* Subtract header height */
    overflow: auto;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-header {
    flex-shrink: 0;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Vertical stacking layout for comparison **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1px;
    background: #ddd;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-grid.graphanalyzerapp-vertical-stack {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, 1fr);
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Visual indicator colors for graph comparison **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-cell.graph-indicator-red {
    border-left: 4px solid #dc3545;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-cell.graph-indicator-green {
    border-left: 4px solid #28a745;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-cell.graph-indicator-yellow {
    border-left: 4px solid #ffc107;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-cell.graph-indicator-blue {
    border-left: 4px solid #17a2b8;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Split layout styles for inline comparison **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-layout {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: white;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-left,
.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-right {
    position: relative;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-left-content,
.d3view-graphanalyzerapp .graphanalyzerapp-compare-split-right-content {
    overflow: auto;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Changes panel styles **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-view {
    display: flex;
    flex-direction: row;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-panel {
    transition: width 0.3s ease;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    border-right: none;
    padding: 0;
    visibility: hidden;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-panel.collapsed .graphanalyzerapp-changes-header,
.d3view-graphanalyzerapp .graphanalyzerapp-changes-panel.collapsed .graphanalyzerapp-changes-content {
    display: none;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Expand button when collapsed **/
.d3view-graphanalyzerapp .graphanalyzerapp-changes-expand-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 4px 4px 0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    font-size: 16px;
    color: #666;
    padding: 0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}


.d3view-graphanalyzerapp .graphanalyzerapp-changes-expand-btn:hover {
    background: #e9ecef;
    color: #333;
}

.d3view-graphanalyzerapp .graphanalyzerapp-graphs-panel {
    transition: margin-left 0.3s ease;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Overlay container styles **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    border: 2px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

.d3view-graphanalyzerapp .graphanalyzerapp-overlay-header {
    flex-shrink: 0;
    border-bottom: 1px solid #ddd;
}

.d3view-graphanalyzerapp .graphanalyzerapp-overlay-content {
    flex: 1;
    overflow: auto;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.d3view-graphanalyzerapp .graphanalyzerapp-details-panel-unified  .graphanalyzerapp-changes-list  {
    flex-direction: row;
    flex-wrap: wrap;
}
.d3view-graphanalyzerapp .graphanalyzerapp-details-panel-unified  .graphanalyzerapp-changes-list  > div {
    flex: 1 0 calc(200px - 16px);
}
.d3view-graphanalyzerapp .graphanalyzerapp-details-panel-unified .graphanalyzerapp-changes-summary {
    flex: 0 0 250px;
}
.d3view-graphanalyzerapp .graphanalyzerapp-change-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item:hover {
    background: #f8f9fa;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item.added {
    border-left: 4px solid #28a745;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item.removed {
    border-left: 4px solid #dc3545;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item.modified {
    border-left: 4px solid #ffc107;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-type {
    font-weight: bold;
    color: #333;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-status.added {
    background: #d4edda;
    color: #155724;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-status.removed {
    background: #f8d7da;
    color: #721c24;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-status.modified {
    background: #fff3cd;
    color: #856404;
}

.d3view-graphanalyzerapp .graphanalyzerapp-change-item-name {
    font-size: 12px;
    color: #666;
    word-break: break-word;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-summary {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 15px;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-summary-item-label {
    color: #666;
}

.d3view-graphanalyzerapp .graphanalyzerapp-changes-summary-item-value {
    font-weight: bold;
    color: #333;
}


.d3view-graphanalyzerapp .boxplot .boxplot-item {
    margin: 0;
}

/** Added by shashank2104 on 11/13/2025 at 11:00 AM - SIM-979 - Animation active state styles **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-header.graphanalyzerapp-animating-active {
    background: #e7f3ff !important;
    border-left: 4px solid #007bff;
    font-weight: bold;
}

.d3view-graphanalyzerapp .graphanalyzerapp-animate-progress {
    font-size: 11px;
    color: #007bff;
    font-weight: normal;
    margin-left: 10px;
}

/** Added by shashank2104 on 11/13/2025 at 12:20 PM - SIM-979 - Min-height for split view cells to ensure clickability **/
.d3view-graphanalyzerapp .graphanalyzerapp-compare-cell {
    min-height: 300px;
}

/** Added by shashank2104 on 11/13/2025 at 12:20 PM - SIM-979 - jQuery UI selectable styles **/
.d3view-graphanalyzerapp .graphanalyzerapp-thumbnail-grid .ui-selected {
    border: 2px solid #007bff !important;
    background-color: #e7f3ff;
}

.d3view-graphanalyzerapp .graphanalyzerapp-thumbnail-grid .ui-selecting {
    border: 2px solid #007bff !important;
}

.d3view-graphanalyzerapp .graphanalyzerapp-split-view-layout .graphanalyzerapp-details-panel-split.collapsed .graphanalyzerapp-details-title {
    display: none;
}
.d3view-graphanalyzerapp div.d3view-tab-manager {
    border-bottom: none;
}
/* /javascripts/plugins_src/graphdiff_raw/graphdiff.css */
/** Added by shashank2104 on 11/03/2025 at 09:33 AM - SIM-979 - Graph comparison plugin styles **/

.d3view-graphdiff .graphdiff-container {
    width: 100%;
    height: 100%;
}

.d3view-graphdiff .graphdiff-header {
    flex-shrink: 0;
}

.d3view-graphdiff .graphdiff-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
}

.d3view-graphdiff .graphdiff-tab {
    cursor: pointer;
    transition: all 0.2s ease;
}

.d3view-graphdiff .graphdiff-tab.active {
    font-weight: bold;
}

.d3view-graphdiff .graphdiff-content {
    position: relative;
    overflow: hidden;
}

.d3view-graphdiff .graphdiff-graph-container {
    width: 100%;
    height: 100%;
}

.d3view-graphdiff .graphdiff-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.d3view-graphdiff .graphdiff-compare-control {
    margin-left: auto;
}

.d3view-graphdiff .graphdiff-compare-view {
    width: 100%;
    height: 100%;
}

.d3view-graphdiff .graphdiff-compare-container {
    width: 100%;
    height: 100%;
}

.d3view-graphdiff .graphdiff-compare-left,
.d3view-graphdiff .graphdiff-compare-right {
    overflow: hidden;
}

.d3view-graphdiff .graphdiff-compare-left-container,
.d3view-graphdiff .graphdiff-compare-right-container {
    width: 100%;
    height: calc(100% - 40px); /* Subtract header height */
    overflow: auto;
}

.d3view-graphdiff .graphdiff-compare-header {
    flex-shrink: 0;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Vertical stacking layout for comparison **/
.d3view-graphdiff .graphdiff-compare-grid {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1px;
    background: #ddd;
}

.d3view-graphdiff .graphdiff-compare-grid.graphdiff-vertical-stack {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto-fit, 1fr);
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Visual indicator colors for graph comparison **/
.d3view-graphdiff .graphdiff-compare-cell.graph-indicator-red {
    border-left: 4px solid #dc3545;
}

.d3view-graphdiff .graphdiff-compare-cell.graph-indicator-green {
    border-left: 4px solid #28a745;
}

.d3view-graphdiff .graphdiff-compare-cell.graph-indicator-yellow {
    border-left: 4px solid #ffc107;
}

.d3view-graphdiff .graphdiff-compare-cell.graph-indicator-blue {
    border-left: 4px solid #17a2b8;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Split layout styles for inline comparison **/
.d3view-graphdiff .graphdiff-compare-split-layout {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: white;
}

.d3view-graphdiff .graphdiff-compare-split-left,
.d3view-graphdiff .graphdiff-compare-split-right {
    position: relative;
}

.d3view-graphdiff .graphdiff-compare-split-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.d3view-graphdiff .graphdiff-compare-split-left-content,
.d3view-graphdiff .graphdiff-compare-split-right-content {
    overflow: auto;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Changes panel styles **/
.d3view-graphdiff .graphdiff-compare-view {
    display: flex;
    flex-direction: row;
}

.d3view-graphdiff .graphdiff-changes-panel {
    transition: width 0.3s ease;
}

.d3view-graphdiff .graphdiff-changes-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
    border-right: none;
    padding: 0;
    visibility: hidden;
}

.d3view-graphdiff .graphdiff-changes-panel.collapsed .graphdiff-changes-header,
.d3view-graphdiff .graphdiff-changes-panel.collapsed .graphdiff-changes-content {
    display: none;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Expand button when collapsed **/
.d3view-graphdiff .graphdiff-changes-expand-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 60px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-left: none;
    border-radius: 0 4px 4px 0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    font-size: 16px;
    color: #666;
    padding: 0;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}


.d3view-graphdiff .graphdiff-changes-expand-btn:hover {
    background: #e9ecef;
    color: #333;
}

.d3view-graphdiff .graphdiff-graphs-panel {
    transition: margin-left 0.3s ease;
}

/** Added by shashank2104 on 11/04/2025 at 07:15 AM - SIM-979 - Overlay container styles **/
.d3view-graphdiff .graphdiff-compare-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    border: 2px solid #007bff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

.d3view-graphdiff .graphdiff-overlay-header {
    flex-shrink: 0;
    border-bottom: 1px solid #ddd;
}

.d3view-graphdiff .graphdiff-overlay-content {
    flex: 1;
    overflow: auto;
}

.d3view-graphdiff .graphdiff-changes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.d3view-graphdiff .graphdiff-change-item {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.d3view-graphdiff .graphdiff-change-item:hover {
    background: #f8f9fa;
}

.d3view-graphdiff .graphdiff-change-item.added {
    border-left: 4px solid #28a745;
}

.d3view-graphdiff .graphdiff-change-item.removed {
    border-left: 4px solid #dc3545;
}

.d3view-graphdiff .graphdiff-change-item.modified {
    border-left: 4px solid #ffc107;
}

.d3view-graphdiff .graphdiff-change-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.d3view-graphdiff .graphdiff-change-item-type {
    font-weight: bold;
    color: #333;
}

.d3view-graphdiff .graphdiff-change-item-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: bold;
}

.d3view-graphdiff .graphdiff-change-item-status.added {
    background: #d4edda;
    color: #155724;
}

.d3view-graphdiff .graphdiff-change-item-status.removed {
    background: #f8d7da;
    color: #721c24;
}

.d3view-graphdiff .graphdiff-change-item-status.modified {
    background: #fff3cd;
    color: #856404;
}

.d3view-graphdiff .graphdiff-change-item-name {
    font-size: 12px;
    color: #666;
    word-break: break-word;
}

.d3view-graphdiff .graphdiff-changes-summary {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 15px;
}

.d3view-graphdiff .graphdiff-changes-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
}

.d3view-graphdiff .graphdiff-changes-summary-item-label {
    color: #666;
}

.d3view-graphdiff .graphdiff-changes-summary-item-value {
    font-weight: bold;
    color: #333;
}


/* /javascripts/plugins_src/sheets/sheets.css */
/* Sheets Plugin Styles */
.d3view-sheets {
    color: #333;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Container */
.d3view-sheets .sheets-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    min-height: 0;
}

/* Ensure m.$el inherits min-height */
.d3view-sheets > * {
    min-height: inherit;
}

/* Toolbar */
.d3view-sheets .sheets-toolbar {
    display: flex;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    height: 40px;
    align-items: center;
}

.d3view-sheets .sheets-formatting-toolbar {
    display: flex;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    height: 40px;
    align-items: center;
}

.d3view-sheets .toolbar-menu {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
}

.d3view-sheets .toolbar-menu:hover {
    background-color: #e0e0e0;
}

.d3view-sheets .toolbar-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 150px;
}

.d3view-sheets .dropdown-item {
    padding: 8px 15px;
    cursor: pointer;
}

.d3view-sheets .dropdown-item:hover {
    background-color: #f0f0f0;
}

.d3view-sheets .dropdown-divider {
    height: 1px;
    background-color: #ddd;
    margin: 5px 0;
}

.d3view-sheets .toolbar-button {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
}

.d3view-sheets .toolbar-button:hover {
    background-color: #e0e0e0;
}

.d3view-sheets .toolbar-button i {
    margin-right: 5px;
}

/* Formatting Toolbar Styles */
.d3view-sheets .formatting-group {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.d3view-sheets .format-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 2px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
}

.d3view-sheets .format-button:hover {
    background-color: #e0e0e0;
    border-color: #ddd;
}

.d3view-sheets .format-button.active {
    background-color: #e0e0e0;
    border-color: #ddd;
}

.d3view-sheets .separator {
    width: 1px;
    height: 24px;
    background-color: #ddd;
    margin: 0 10px;
}

.d3view-sheets .font-family-select,
.d3view-sheets .font-size-select {
    height: 30px;
    padding: 0 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: white;
    margin-right: 5px;
}

/* Sheet Tabs */
.d3view-sheets .sheets-tabs {
    display: flex;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    height: 40px;
    align-items: center;
}

.d3view-sheets .sheet-tab {
    padding: 5px 15px;
    margin-right: 5px;
    background-color: #e0e0e0;
    border: 1px solid #ddd;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    position: relative;
}

.d3view-sheets .sheet-tab.active {
    background-color: white;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}

.d3view-sheets .sheet-name {
    margin-right: 5px;
}

.d3view-sheets .delete-sheet {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background-color: #ddd;
    color: #666;
    font-size: 12px;
    margin-left: 5px;
}

.d3view-sheets .delete-sheet:hover {
    background-color: #ccc;
    color: #333;
}

.d3view-sheets .add-sheet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #e0e0e0;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 5px;
}

.d3view-sheets .add-sheet:hover {
    background-color: #d0d0d0;
}

/* Formula Bar */
.d3view-sheets .sheets-formula-bar {
    display: flex;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    height: 40px;
    align-items: center;
}

.d3view-sheets .formula-input {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Grid */
.d3view-sheets .sheets-grid {
    flex: 1;
    overflow: auto;
    position: relative;
    min-height: 0;
    margin-bottom: 24px;
}

.d3view-sheets .grid-row {
    display: flex;
    height: 25px;
}

.d3view-sheets .grid-cell {
    width: 100px;
    min-width: 100px;
    height: 25px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 0 5px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-sheets .grid-cell.corner {
    width: 40px;
    min-width: 40px;
    background-color: #f0f0f0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.d3view-sheets .grid-cell.header {
    background-color: #f0f0f0;
    font-weight: bold;
    justify-content: center;
}

.d3view-sheets .grid-cell.cell {
    cursor: pointer;
}

.d3view-sheets .grid-cell.cell:hover {
    background-color: #f5f5f5;
}

.d3view-sheets .grid-cell.selected {
    background-color: #e6f2ff;
    border: 1px solid #99ccff;
}

.d3view-sheets .grid-cell.cell.selected {
    background-color: #e3f2fd !important;
    border: 1px solid #2196f3 !important;
}

.d3view-sheets .grid-cell.cell.selected:focus {
    background-color: #bbdefb !important;
    border: 2px solid #1976d2 !important;
}

/* jQuery UI Selectable styles */
.d3view-sheets .ui-selectable-helper {
    border: 2px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.1);
}

.d3view-sheets .ui-selecting {
    background-color: rgba(0, 123, 255, 0.2) !important;
}

.d3view-sheets .ui-selected {
    background-color: #e3f2fd !important;
    border: 1px solid #2196f3 !important;
}



/* Context menu styles */
.d3view-sheets .context-menu {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 10000;
    min-width: 150px;
}

.d3view-sheets .context-menu-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
}

.d3view-sheets .context-menu-item:last-child {
    border-bottom: none;
}

.d3view-sheets .context-menu-item:hover {
    background-color: #f5f5f5;
}

.d3view-sheets .context-menu-item i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Clear filters button */
.d3view-sheets .clear-filters-button {
    background-color: #dc3545;
    color: white;
    border: 1px solid #dc3545;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 5px;
}

.d3view-sheets .clear-filters-button:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.d3view-sheets .cell-input {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 5px;
    outline: none;
}

/* Charts */
.d3view-sheets .sheets-charts {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
}

.d3view-sheets .chart-container {
    width: 400px;
    height: 300px;
    margin: 10px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
}

/* Chart Dialog */
.d3view-sheets .chart-dialog {
    padding: 15px;
}

.d3view-sheets .chart-dialog .form-group {
    margin-bottom: 15px;
}

.d3view-sheets .chart-dialog label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.d3view-sheets .chart-dialog .form-control {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .d3view-sheets .sheets-toolbar {
        flex-wrap: wrap;
    }
    
    .d3view-sheets .toolbar-button {
        margin-bottom: 4px;
    }
    
    .d3view-sheets .chart-container {
        width: 100%;
        height: 250px;
    }
}

/* Summary Footer Styles */
.d3view-sheets .sheets-summary-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    margin-top: auto;
}

.d3view-sheets .summary-item {
    margin-right: 16px;
    font-size: 12px;
    color: #495057;
}

.sheets-history {
    margin-left: auto;
}

/* /javascripts/plugins_src/ontdashboard/ontdashboard.css */
/** Added by shashank2104 on 02/27/2026 - DVFIV-1934 - Dashboard v2 Modern Design System **/

/* =========================================================
   d3VIEW Dashboard v2 - Full Design System
   Modern, widget-based, drag-and-drop dashboard
   ========================================================= */

/* ===== 1. CSS DESIGN TOKENS ===== */

/* Shared tokens aliased from --d3v-* foundation (plugins.css); dashboard-specific tokens kept local */
.d3view-dashboard-v2.db-root {
    /* Brand (dashboard-specific) */
    --db-brand:          #30487f;
    --db-brand-dark:     #172144;
    --db-brand-light:    #5b7db8;
    --db-brand-pale:     #e8eef7;
    --db-brand-alt:      #253764;

    /* Neutral scale — aliased to foundation */
    --db-n-50:  var(--d3v-n-50);
    --db-n-100: var(--d3v-n-100);
    --db-n-200: var(--d3v-n-200);
    --db-n-300: var(--d3v-n-300);
    --db-n-400: var(--d3v-n-400);
    --db-n-500: var(--d3v-n-500);
    --db-n-600: var(--d3v-n-600);
    --db-n-700: var(--d3v-n-700);
    --db-n-800: var(--d3v-n-800);
    --db-n-900: var(--d3v-n-900);

    /* Surfaces — LIGHT THEME (default) */
    --db-bg-canvas:          var(--d3v-n-100);
    --db-bg-surface:         var(--d3v-bg-primary);
    --db-bg-elevated:        var(--d3v-bg-primary);
    --db-bg-sidebar:         var(--d3v-bg-primary);
    --db-bg-sidebar-hover:   rgba(48,72,127,0.07);
    --db-bg-sidebar-active:  rgba(48,72,127,0.10);
    --db-bg-header:          rgba(255,255,255,0.95);
    --db-bg-overlay:         rgba(15,23,42,0.40);

    /* Text — LIGHT THEME */
    --db-text-primary:       var(--d3v-n-900);
    --db-text-secondary:     var(--d3v-text-secondary);
    --db-text-muted:         var(--d3v-text-muted);
    --db-text-disabled:      var(--d3v-n-300);
    --db-text-inverse:       var(--d3v-text-inverse);
    --db-text-brand:         #30487f;
    --db-text-sidebar:       var(--d3v-n-800);
    --db-text-sidebar-muted: var(--d3v-n-500);

    /* Borders */
    --db-border:         var(--d3v-border);
    --db-border-strong:  var(--d3v-border-strong);
    --db-border-focus:   #30487f;
    --db-border-brand:   rgba(48,72,127,0.28);

    /* Status — aliased to foundation */
    --db-success:      var(--d3v-success); --db-success-bg: #D1FAE5; --db-success-text: #065F46;
    --db-warning:      var(--d3v-warning); --db-warning-bg: #FEF3C7; --db-warning-text: #92400E;
    --db-danger:       var(--d3v-danger);  --db-danger-bg:  #FEE2E2; --db-danger-text:  #991B1B;
    --db-info:         #06B6D4;            --db-info-bg:    #CFFAFE; --db-info-text:    #0E7490;

    /* Widget type palette (dashboard-specific) */
    --db-wt-simulations:   #6366F1; --db-wt-simulations-bg:   #EEF2FF;
    --db-wt-physicaltests: #EC4899; --db-wt-physicaltests-bg: #FDF2F8;
    --db-wt-files:         #F59E0B; --db-wt-files-bg:         #FFFBEB;
    --db-wt-projects:      #10B981; --db-wt-projects-bg:      #ECFDF5;
    --db-wt-hpcjobs:       #06B6D4; --db-wt-hpcjobs-bg:       #ECFEFF;
    --db-wt-workflows:     #8B5CF6; --db-wt-workflows-bg:     #F5F3FF;
    --db-wt-templates:     #F97316; --db-wt-templates-bg:     #FFF7ED;
    --db-wt-studies:       #14B8A6; --db-wt-studies-bg:       #F0FDFA;
    --db-wt-databases:     #64748B; --db-wt-databases-bg:     #F1F5F9;
    --db-wt-mathmodels:    #EF4444; --db-wt-mathmodels-bg:    #FEF2F2;
    --db-wt-mlactions:     #84CC16; --db-wt-mlactions-bg:     #F7FEE7;
    --db-wt-assemblies:    #0EA5E9; --db-wt-assemblies-bg:    #F0F9FF;
    --db-wt-systemmodels:  #22C55E; --db-wt-systemmodels-bg:  #F0FDF4;
    --db-wt-designsteps:   #FB923C; --db-wt-designsteps-bg:   #FFF7ED;
    --db-wt-responses:     #A855F7; --db-wt-responses-bg:     #FAF5FF;
    --db-wt-loadcases:     #78716C; --db-wt-loadcases-bg:     #FAFAF9;
    --db-wt-users:         #3B82F6; --db-wt-users-bg:         #EFF6FF;
    --db-wt-tags:          #D946EF; --db-wt-tags-bg:          #FDF4FF;

    /* Spacing (4px grid) */
    --db-sp-1:  4px;  --db-sp-2:  8px;  --db-sp-3:  12px;
    --db-sp-4:  16px; --db-sp-5:  20px; --db-sp-6:  24px;
    --db-sp-8:  32px; --db-sp-10: 40px; --db-sp-12: 48px;

    /* Layout (dashboard-specific) */
    --db-sidebar-w:    224px;
    --db-sidebar-min:  60px;
    --db-header-h:     54px;
    --db-palette-w:    35vw;

    /** Added by shashank2104 on 2026-07-15 - R2026-38 - ONE width for every ML viz-widget control
     *  sidebar (2D scatter / parallel / 3D surface). They had drifted to 260 / 240 / 280px, so
     *  switching viz type visibly jumped the chart's edge. Each widget keeps its own namespaced
     *  classes; only the measurement is shared. **/
    --db-ml-sidebar-w:      260px;
    --db-ml-sidebar-rail-w: 28px;

    /* Typography */
    /* --db-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, 'Helvetica Neue', sans-serif;
    --db-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    --db-fs-xs:   11px; --db-fs-sm:  12px; --db-fs-base: 13px;
    --db-fs-md:   14px; --db-fs-lg:  16px; --db-fs-xl:   18px;
    --db-fs-2xl:  22px; --db-fs-3xl: 28px;
    --db-fw-normal: 400; --db-fw-medium: 500;
    --db-fw-semi:   600; --db-fw-bold:   700;
    --db-lh-tight:  1.25; --db-lh-base: 1.5; --db-lh-loose: 1.75; */

    /* Border radius — aliased to foundation */
    --db-r-sm: var(--d3v-r-sm); --db-r-md: var(--d3v-r-md); --db-r-lg: var(--d3v-r-lg);
    --db-r-xl: var(--d3v-r-xl); --db-r-2xl: var(--d3v-r-2xl); --db-r-full: var(--d3v-r-full);

    /* Shadows — aliased to foundation */
    --db-sh-xs: var(--d3v-sh-xs);
    --db-sh-sm: var(--d3v-sh-sm);
    --db-sh-md: var(--d3v-sh-md);
    --db-sh-lg: var(--d3v-sh-lg);
    --db-sh-xl: var(--d3v-sh-xl);
    --db-sh-brand: 0 4px 14px rgba(23,33,68,0.30);
    --db-sh-inset: inset 0 1px 3px rgba(0,0,0,0.06);

    /* Transitions — aliased to foundation */
    --db-t-fast:   var(--d3v-t-fast);
    --db-t-base:   var(--d3v-t-base);
    --db-t-slow:   var(--d3v-t-smooth);
    --db-t-spring: var(--d3v-t-spring);

    /* Gradients (dashboard-specific) */
    --db-grad-brand:   linear-gradient(135deg, #172144 0%, #30487f 100%);
    --db-grad-canvas:  linear-gradient(160deg, #F1F5F9 0%, #E8EDF5 100%);
    --db-grad-sidebar: none;

    /* Z-index scale (dashboard-specific) */
    --db-z-raised:   10;
    --db-z-dropdown: 100;
    --db-z-panel:    200;
    --db-z-overlay:  300;
    --db-z-modal:    1050;
    --db-z-toast:    500;

    /* Gradients + animation easing — aliased to foundation where possible */
    --db-gradient-primary: var(--d3v-grad-accent);
    --db-gradient-success: var(--d3v-grad-success);
    --db-gradient-warning: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
    --db-gradient-danger: var(--d3v-grad-danger);
    --db-gradient-info: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    --db-anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 2. RESET & BASE ===== */

.d3view-dashboard-v2 *,
.d3view-dashboard-v2 *::before,
.d3view-dashboard-v2 *::after {
    box-sizing: border-box;
}

.d3view-dashboard-v2 {
    font-family: var(--db-font);
    font-size: var(--db-fs-base);
    color: var(--db-text-primary);
    line-height: var(--db-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 3. APP SHELL ===== */

/* .d3view-dashboard-v2 is the IndexView's el — it IS the app shell.
   DVFIV-1934 - Updated on 03/04/2026 - Changed to column layout (sidebar removed) */
.d3view-dashboard-v2 {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: var(--db-grad-canvas); */
}

/* Legacy alias kept for clarity */
.d3view-dashboard-v2 .db-app-shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--db-grad-canvas);
    position: relative;
    overflow: hidden;
}

/* ===== 4. SIDEBAR ===== */

.d3view-dashboard-v2 .db-sidebar {
    width: var(--db-sidebar-w);
    min-width: var(--db-sidebar-w);
    height: 100%;
    background: var(--db-bg-sidebar);
    border-right: 1px solid var(--db-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: var(--db-z-raised);
    transition: width var(--db-t-slow);
    overflow: hidden;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed {
    width: var(--db-sidebar-min);
    min-width: var(--db-sidebar-min);
}

/* Sidebar brand header */
.d3view-dashboard-v2 .db-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--db-sp-3);
    padding: var(--db-sp-4) var(--db-sp-4) var(--db-sp-3);
    height: var(--db-header-h);
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
    text-decoration: none;
}

.d3view-dashboard-v2 .db-sidebar-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--db-grad-brand);
    border-radius: var(--db-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--db-sh-brand);
}

.d3view-dashboard-v2 .db-sidebar-brand-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.d3view-dashboard-v2 .db-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-brand-text {
    opacity: 0;
    width: 0;
}

.d3view-dashboard-v2 .db-sidebar-brand-name {
    font-size: var(--db-fs-md);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-inverse);
    line-height: 1.2;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-sidebar-brand-tagline {
    font-size: var(--db-fs-xs);
    color: var(--db-text-sidebar-muted);
    white-space: nowrap;
}

/* Sidebar section label */
.d3view-dashboard-v2 .db-sidebar-section-label {
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--db-text-sidebar-muted);
    padding: var(--db-sp-4) var(--db-sp-4) var(--db-sp-1);
    white-space: nowrap;
    overflow: hidden;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-section-label {
    opacity: 0;
}

/* Sidebar dashboard list */
.d3view-dashboard-v2 .db-sidebar-dash-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--db-sp-1) var(--db-sp-2) var(--db-sp-2);
    scrollbar-width: thin;
    scrollbar-color: var(--db-border-strong) transparent;
}

.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar {
    width: 4px;
}
.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar-thumb {
    background: var(--db-border-strong);
    border-radius: var(--db-r-full);
}

/* Sidebar dashboard item */
.d3view-dashboard-v2 .db-sidebar-dash-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 7px var(--db-sp-3);
    border-radius: var(--db-r-md);
    cursor: pointer;
    position: relative;
    transition: var(--db-t-fast);
    min-height: 36px;
    margin-bottom: 2px;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-sidebar-dash-item:hover {
    background: var(--db-bg-sidebar-hover);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active {
    background: var(--db-bg-sidebar-active);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--db-brand);
    border-radius: 0 var(--db-r-sm) var(--db-r-sm) 0;
}

.d3view-dashboard-v2 .db-sidebar-dash-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--db-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active .db-sidebar-dash-icon {
    background: rgba(48,72,127,0.30);
    color: var(--db-brand-light);
}

.d3view-dashboard-v2 .db-sidebar-dash-name {
    flex: 1 1 auto;
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-dash-name {
    opacity: 0;
    width: 0;
}

.d3view-dashboard-v2 .db-sidebar-dash-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-sidebar-dash-item:hover .db-sidebar-dash-actions {
    opacity: 1;
}

.d3view-dashboard-v2 .db-sidebar-icon-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--db-text-sidebar-muted);
    border-radius: var(--db-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--db-t-fast);
    font-size: 11px;
    padding: 0;
}

.d3view-dashboard-v2 .db-sidebar-icon-btn:hover {
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
}

.d3view-dashboard-v2 .db-sidebar-icon-btn.is-danger:hover {
    background: rgba(239,68,68,0.18);
    color: #FCA5A5;
}

/* Sidebar new dashboard button */
.d3view-dashboard-v2 .db-sidebar-new-btn {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 8px var(--db-sp-3);
    margin: var(--db-sp-2);
    border-radius: var(--db-r-md);
    border: 1px dashed var(--db-border-strong);
    cursor: pointer;
    transition: var(--db-t-fast);
    text-decoration: none;
    color: var(--db-text-sidebar-muted);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    background: transparent;
    width: calc(100% - 16px);
}

.d3view-dashboard-v2 .db-sidebar-new-btn:hover {
    border-color: rgba(48,72,127,0.5);
    color: var(--db-brand-light);
    background: rgba(48,72,127,0.08);
}

/* Sidebar collapse toggle */
.d3view-dashboard-v2 .db-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--db-text-sidebar-muted);
    cursor: pointer;
    border-top: 1px solid var(--db-border);
    transition: var(--db-t-fast);
    font-size: 14px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-sidebar-toggle:hover {
    color: var(--db-text-sidebar);
    background: var(--db-bg-sidebar-hover);
}

/* ===== 5. MAIN AREA ===== */

.d3view-dashboard-v2 .db-main-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ===== 6. HEADER ===== */

.d3view-dashboard-v2 .db-header {
    height: var(--db-header-h);
    background: var(--db-bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--db-border);
    display: flex;
    align-items: center;
    padding: 0 var(--db-sp-5);
    gap: var(--db-sp-3);
    flex-shrink: 0;
    position: relative;
    z-index: var(--db-z-raised);
}

.d3view-dashboard-v2 .db-header-dash-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-header-dash-name {
    font-size: var(--db-fs-lg);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--db-r-sm);
    transition: var(--db-t-fast);
    border: 1px solid transparent;
    outline: none;
}

.d3view-dashboard-v2 .db-header-dash-name:hover {
    background: var(--db-n-100);
}

.d3view-dashboard-v2 .db-header-dash-name:focus {
    border-color: var(--db-border-focus);
    background: var(--db-bg-surface);
    box-shadow: 0 0 0 3px rgba(48,72,127,0.12);
}

.d3view-dashboard-v2 .db-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
    font-size: var(--db-fs-sm);
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-header-breadcrumb a {
    color: var(--db-text-muted);
    text-decoration: none;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-header-breadcrumb a:hover {
    color: var(--db-text-brand);
}

.d3view-dashboard-v2 .db-header-breadcrumb-sep {
    font-size: 10px;
    color: var(--db-text-disabled);
}

.d3view-dashboard-v2 .db-header-actions {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    flex-shrink: 0;
}

/* Header buttons */
.d3view-dashboard-v2 .db-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 6px 14px;
    border-radius: var(--db-r-md);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--db-t-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    height: 32px;
    font-family: var(--db-font);
}

.d3view-dashboard-v2 .db-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(48,72,127,0.18);
}

.d3view-dashboard-v2 .db-btn-primary {
    background: var(--db-grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--db-sh-brand);
}

.d3view-dashboard-v2 .db-btn-primary:hover {
    background: var(--db-brand-dark);
    box-shadow: 0 4px 16px rgba(48,72,127,0.40);
    transform: translateY(-1px);
    color: #fff;
}

.d3view-dashboard-v2 .db-btn-primary:active {
    transform: translateY(0);
}

.d3view-dashboard-v2 .db-btn-secondary {
    background: var(--db-bg-surface);
    color: var(--db-text-secondary);
    border-color: var(--db-border);
    box-shadow: var(--db-sh-xs);
}

.d3view-dashboard-v2 .db-btn-secondary:hover {
    border-color: var(--db-border-strong);
    color: var(--db-text-primary);
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-btn-ghost {
    background: transparent;
    color: var(--db-text-secondary);
    border-color: transparent;
}

.d3view-dashboard-v2 .db-btn-ghost:hover {
    background: var(--db-n-100);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2 .db-btn-danger {
    background: var(--db-danger);
    color: #fff;
    border-color: transparent;
}

.d3view-dashboard-v2 .db-btn-danger:hover {
    background: #DC2626;
    color: #fff;
}

.d3view-dashboard-v2 .db-btn-sm {
    padding: 4px 10px;
    height: 26px;
    font-size: var(--db-fs-xs);
}

.d3view-dashboard-v2 .db-btn-icon {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--db-r-md);
    justify-content: center;
}

.d3view-dashboard-v2 .db-btn-icon.db-btn-sm {
    width: 26px;
    height: 26px;
}

/* Divider */
.d3view-dashboard-v2 .db-header-divider {
    width: 1px;
    height: 20px;
    background: var(--db-border);
}

/* Autosave status */
.d3view-dashboard-v2 .db-autosave-status {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--db-r-full);
    background: var(--db-success);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-autosave-dot.is-saving {
    background: var(--db-warning);
    animation: db-pulse 1s ease infinite;
}

/* ===== 7. CONTENT / CANVAS ===== */

/* DashboardView el — fills the content area */
.d3view-dashboard-v2 .db-dashboard-canvas {
    width: 100%;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .db-dashboard-canvas .db-gridstack-wrap{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Embedded mode: lock the grid to
 * the available viewport height instead of scrolling. DashboardView._recomputeCellHeight
 * sizes cells dynamically so widgets fit. **/
.d3view-dashboard-v2 .db-dashboard-canvas[data-constrain-height="true"] {
    overflow: hidden;
}
.d3view-dashboard-v2 .db-dashboard-canvas[data-constrain-height="true"] .db-gridstack-wrap {
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
/** Gridstack sets an inline `height: Npx` on `.db-gridstack-inner` (the actual
 * .grid-stack element) based on total rows × cellHeight. In constrain-height mode we
 * override that so the grid never grows past the wrap — widgets that don't fit are
 * clipped instead of forcing a scrollbar the size of the universe. **/
.d3view-dashboard-v2 .db-dashboard-canvas[data-constrain-height="true"] .db-gridstack-inner {
    height: 100% !important;
    min-height: 0 !important;
    overflow: auto !important;
}
/** Empty page (layout picker visible): collapse the gridstack wrap so the picker owns
 * the full canvas. Without this the empty grid still claims flex:1 and the picker
 * shrinks to whatever is left. **/
.d3view-dashboard-v2 .db-dashboard-canvas.db-canvas-picker-open .db-gridstack-wrap {
    display: none;
}
.d3view-dashboard-v2 .db-dashboard-canvas.db-canvas-picker-open .db-layout-picker,
.d3view-dashboard-v2 .db-dashboard-canvas.db-canvas-picker-open .db-freeform-empty {
    flex: 1 1 auto;
    min-height: 0;
}
/** Drop-hover outline for responses-panel → widget drop (DVFIV-1997) **/
.d3view-dashboard-v2 .db-widget-body.db-widget-drop-hover {
    outline: 2px dashed var(--d3v-accent-500, #5B8DEF);
    outline-offset: -4px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-accent-50, rgba(91, 141, 239, 0.08));
    transition: background var(--d3v-t-fast, 120ms) ease;
}

/* Hidden dashboards keep their DOM but are invisible */
.d3view-dashboard-v2 .db-dashboard-canvas[style*="display: none"],
.d3view-dashboard-v2 .db-dashboard-canvas[style*="display:none"] {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
}

.d3view-dashboard-v2 .db-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--db-sp-5);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300) transparent;
}

.d3view-dashboard-v2 .db-content::-webkit-scrollbar { width: 6px; }
.d3view-dashboard-v2 .db-content::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-content::-webkit-scrollbar-thumb {
    background: var(--db-n-300);
    border-radius: var(--db-r-full);
}

/* ===== 8. GRIDSTACK OVERRIDES ===== */
/* GridStack layout (width/left/height/top) comes from plugins.lib.css; do not set width on .grid-stack-item here so data-gs-width rules apply */

.d3view-dashboard-v2 .grid-stack {
    background: transparent;
}

.d3view-dashboard-v2 .grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-radius: var(--db-r-lg);
    overflow: hidden;
    /* leave width to gridstack; content fills cell via position absolute */
    /* Added by shashank2104 on 2026-07-15 - R2026-38 - G4: override gridstack's injected inset (top/right/bottom/left)
       so left/right sit flush at 0 while top/bottom keep the 12px row gap. Kept in sync with the
       byte-identical duplicate in d3viewdashboard-v2-06-themes-advanced.css (~line 2076) — update both. */
    inset: 12px 0px;
}

.d3view-dashboard-v2 .grid-stack-placeholder > .placeholder-content {
    background: var(--db-brand-pale);
    border: 2px dashed var(--db-brand-light);
    border-radius: var(--db-r-lg);
    opacity: 0.7;
}

.d3view-dashboard-v2 .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: var(--db-sh-xl);
    transform: rotate(1deg) scale(1.01);
    opacity: 0.92;
    cursor: grabbing;
}

/* ===== 9. WIDGET CARD ===== */


/* ===== 10. SUMMARY PAGE ===== */

/* GridStack container below the stat cards on the Summary page */
.d3view-dashboard-v2 .db-summary-gridstack-wrap {
    flex: 1 1 auto;
    margin-top: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.d3view-dashboard-v2 .db-widget-card {
    --widget-color:    var(--db-brand);
    --widget-color-bg: var(--db-brand-pale);
    --widget-color-muted: rgba(48,72,127,0.12);
}

.d3view-dashboard-v2 .db-widget-card {
    width: 100%;
    height: 100%;
    background: var(--db-bg-surface);
    border-radius: var(--db-r-lg);
    box-shadow: var(--db-sh-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: box-shadow var(--db-t-base);
    border: 1px solid var(--db-border);
}

.d3view-dashboard-v2 .db-widget-card:hover {
    box-shadow: var(--db-sh-md);
}

/* Added by shashank2104 on 2026-07-15 - R2026-38 - G2b (C2): a single-widget page reads as the
   page itself, not a card among peers, so drop the border. Base box-shadow (--db-sh-sm) stays so
   the widget still reads as a raised surface against .db-content's canvas background even without
   a border — but the hover elevation to --db-sh-md is suppressed here since there's no sibling
   card to distinguish it from and a lone "page" shifting on hover reads as an unintentional glitch. */
.d3view-dashboard-v2 .db-single-widget .db-widget-card {
    border-color: transparent;
}

.d3view-dashboard-v2 .db-single-widget .db-widget-card:hover {
    box-shadow: var(--db-sh-sm);
}

/* Widget fullscreen state — applied on .grid-stack-item so grid-stack-item-content
   is never emptied (GTM16_24 fix).  The inner .db-widget-card already has
   width:100%; height:100% so it fills the fixed-position wrapper automatically. */
.d3view-dashboard-v2 .grid-stack-item.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: var(--db-z-modal);
}
.d3view-dashboard-v2 .grid-stack-item.is-fullscreen > .grid-stack-item-content {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: 100%;
}
.d3view-dashboard-v2 .grid-stack-item.is-fullscreen .db-widget-card {
    border-radius: 0;
    box-shadow: var(--db-sh-xl);
}
/* Standalone fallback (widget not inside gridstack) */
.d3view-dashboard-v2 .db-widget-card.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--db-z-modal);
    border-radius: 0;
    box-shadow: var(--db-sh-xl);
}

/* Widget header */
.d3view-dashboard-v2 .db-widget-header {
    display: flex;
    align-items: center;
    padding: var(--db-sp-3) var(--db-sp-4);
    /* border-bottom: 1px solid var(--db-border); */
    gap: var(--db-sp-2);
    flex-shrink: 0;
    min-height: 48px;
    cursor: default;
}

/* Added by shashank2104 on 2026-07-15 - R2026-38 - widgetOptionsByType -> disableWidgetHeader.
   The node stays in the DOM so every header code path keeps working (see WidgetView.render); this
   only takes it out of the layout. */
.d3view-dashboard-v2 .db-widget-card.db-widget-no-header > .db-widget-header { display: none; }

/* Drag handle */
.d3view-dashboard-v2 .db-widget-drag-handle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--db-n-500);
    cursor: grab;
    flex-shrink: 0;
    border-radius: var(--db-r-sm);
    transition: var(--db-t-fast);
    font-size: 16px;
}

.d3view-dashboard-v2 .db-widget-drag-handle:hover {
    color: var(--db-text-muted);
    background: var(--db-n-100);
}

.d3view-dashboard-v2 .db-widget-drag-handle:active {
    cursor: grabbing;
}

/* Widget type icon badge */
.d3view-dashboard-v2 .db-widget-type-badge {
    width: 28px;
    height: 28px;
    border-radius: var(--db-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--widget-color-bg);
    color: var(--widget-color);
    transition: var(--db-t-fast);
}
/** Added by shashank2104 on 2026-04-14 - Simlytiks per-viz image in header badge **/
.d3view-dashboard-v2 .db-widget-type-badge .db-widget-badge-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.d3view-dashboard-v2 .db-widget-header-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .db-widget-title {
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .db-widget-subtitle {
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 1px;
}

.d3view-dashboard-v2 .db-widget-header-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-widget-card:hover .db-widget-header-controls {
    opacity: 1;
}

/* + New entity button — always visible, not hidden with the other controls */
.d3view-dashboard-v2 .db-widget-create-btn {
    opacity: 1 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--d3v-r-md, 8px);
    gap: 4px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    transition: background var(--d3v-t-fast, 0.12s), box-shadow var(--d3v-t-fast, 0.12s);
}
.d3view-dashboard-v2 .db-widget-create-btn:hover {
    box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}

/* DVFIV-1934 - Removed db-widget-ctrl-btn (replaced by btn btn-sm btn-outline-on-hover) */

/* DVFIV-1934 - Removed db-widget-filters bar (filters handled by tableDataViewer) */

/* Filter chips */
.d3view-dashboard-v2 .db-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--widget-color-bg);
    color: var(--widget-color);
    border-radius: var(--db-r-full);
    font-size: 11px;
    font-weight: var(--db-fw-medium);
    white-space: nowrap;
    cursor: default;
    border: 1px solid var(--widget-color-muted);
}

.d3view-dashboard-v2 .db-filter-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 10px;
    line-height: 1;
    transition: var(--db-t-fast);
    padding: 0 2px;
}

.d3view-dashboard-v2 .db-filter-chip-remove:hover {
    opacity: 1;
}

/* Widget body */
.d3view-dashboard-v2 .db-widget-body {
    flex: 1 1 auto;
    min-height: 0;        /* Critical: allows flex item to shrink in a column */
    overflow: auto;       /* Scroll if content overflows */
    position: relative;
}

.d3view-dashboard-v2 .db-widget-body.is-loading {
    pointer-events: none;
}

/* Widget footer */
.d3view-dashboard-v2 .db-widget-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--db-sp-4);
    border-top: 1px solid var(--db-border);
    flex-shrink: 0;
    background: var(--db-n-50);
    gap: var(--db-sp-3);
    min-height: 36px;
}

.d3view-dashboard-v2 .db-widget-count {
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
}

.d3view-dashboard-v2 .db-widget-count-num {
    font-weight: var(--db-fw-semi);
    color: var(--widget-color);
}

.d3view-dashboard-v2 .db-widget-last-refresh {
    font-size: 10px;
    color: var(--db-text-disabled);
}

.d3view-dashboard-v2 .db-widget-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
}

/* ===== 10. SKELETON LOADING ===== */

.d3view-dashboard-v2 .db-widget-skeleton {
    padding: var(--db-sp-3) var(--db-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--db-sp-3);
    height: 38px;
    padding: 0 var(--db-sp-2);
    border-radius: var(--db-r-sm);
}

.d3view-dashboard-v2 .db-skeleton-row:nth-child(even) {
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-skeleton-cell {
    height: 12px;
    border-radius: var(--db-r-sm);
    background: linear-gradient(90deg, var(--db-n-200) 25%, var(--db-n-100) 50%, var(--db-n-200) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-skeleton-cell--xs  { width: 32px; }
.d3view-dashboard-v2 .db-skeleton-cell--sm  { width: 60px; }
.d3view-dashboard-v2 .db-skeleton-cell--md  { width: 110px; }
.d3view-dashboard-v2 .db-skeleton-cell--lg  { width: 180px; }
.d3view-dashboard-v2 .db-skeleton-cell--xl  { width: 240px; }
.d3view-dashboard-v2 .db-skeleton-cell--flex { flex: 1 1 auto; }

@keyframes db-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== 11. EMPTY STATES ===== */

.d3view-dashboard-v2 .db-empty-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    padding: var(--db-sp-12);
    text-align: center;
}

.d3view-dashboard-v2 .db-empty-dashboard-art {
    width: 120px;
    height: 120px;
    border-radius: var(--db-r-2xl);
    background: var(--db-grad-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--db-sp-6);
    opacity: 0.12;
    font-size: 52px;
    color: #fff;
    position: relative;
}

.d3view-dashboard-v2 .db-empty-dashboard-art::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px dashed var(--db-brand-light);
    opacity: 0.5;
}

.d3view-dashboard-v2 .db-empty-dashboard-title {
    font-size: var(--db-fs-xl);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    margin-bottom: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-empty-dashboard-desc {
    font-size: var(--db-fs-md);
    color: var(--db-text-muted);
    margin-bottom: var(--db-sp-6);
    max-width: 360px;
    line-height: var(--db-lh-loose);
}

/* R2026-38 - Boot failure: shown in place of the whole dashboard when a host loading step or the
   preset resolver rejects (see main.js m._failBoot). */
.d3view-dashboard-v2 .db-boot-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    padding: var(--db-sp-12);
    text-align: center;
    gap: var(--db-sp-4);
}

.d3view-dashboard-v2 .db-boot-error-icon {
    font-size: 32px;
    color: var(--db-danger);
    opacity: 0.55;
}

/* 14px/1.75: the --db-fs-md and --db-lh-loose tokens are commented out in the tokens file, so
   spell out the values they were meant to carry rather than reference dead vars. */
.d3view-dashboard-v2 .db-boot-error-msg {
    font-size: 14px;
    color: var(--db-text-muted);
    max-width: 420px;
    line-height: 1.75;
}

.d3view-dashboard-v2 .db-empty-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    padding: var(--db-sp-6);
    text-align: center;
}

.d3view-dashboard-v2 .db-empty-widget-icon {
    font-size: 28px;
    margin-bottom: var(--db-sp-2);
    opacity: 0.25;
    color: var(--widget-color);
}

.d3view-dashboard-v2 .db-empty-widget-text {
    font-size: var(--db-fs-sm);
    color: var(--db-text-muted);
    padding: 20px;
}

.d3view-dashboard-v2 .db-empty-no-dashboards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--db-sp-12);
    text-align: center;
}

/* ===== 12. WIDGET PALETTE PANEL ===== */

.d3view-dashboard-v2 .db-palette-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--db-palette-w);
    background: var(--db-bg-surface);
    box-shadow: var(--db-sh-xl);
    z-index: var(--db-z-panel);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    border-left: 1px solid var(--db-border);
}

.d3view-dashboard-v2 .db-palette-panel.is-open {
    transform: translateX(0);
}

/* Header: title + inline search + close */
.d3view-dashboard-v2 .db-palette-header {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: var(--db-sp-3) var(--db-sp-4);
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
    min-height: var(--db-header-h);
}

.d3view-dashboard-v2 .db-palette-header-left {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    flex: 1 1 auto; /* pushes search + close to the right */
}

.d3view-dashboard-v2 .db-palette-header-left > i {
    color: var(--db-brand, #30487f);
    font-size: 15px;
}

.d3view-dashboard-v2 .db-palette-close {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-palette-title {
    font-size: var(--db-fs-md);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    white-space: nowrap;
}

/* Search field — flexible so close button always stays visible */
.d3view-dashboard-v2 .db-palette-search-wrap {
    flex: 1 1 160px;
    max-width: 300px;
    min-width: 0;
    position: relative;
}

.d3view-dashboard-v2 .db-palette-search-field {
    width: 100%;
    height: 30px;
    /* override form-control defaults to clear the icon */
    padding: 0 10px 0 30px !important;
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-full);
    font-size: var(--db-fs-xs);
    font-family: var(--db-font);
    color: var(--db-text-primary);
    background: var(--db-n-50);
    box-shadow: none;
    outline: none;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-palette-search-field:focus {
    background: var(--db-bg-surface);
    border-color: var(--db-border-focus);
    box-shadow: 0 0 0 3px rgba(48,72,127,0.10) !important;
}

.d3view-dashboard-v2 .db-palette-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--db-text-muted);
    font-size: 11px;
    pointer-events: none;
    z-index: 1;
}

/* ===== TYPEAHEAD DROPDOWN ===== */
.d3view-dashboard-v2 .db-palette-typeahead {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--db-bg-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-md);
    box-shadow: var(--db-sh-lg);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
    padding: var(--db-sp-1) 0;
}

.d3view-dashboard-v2 .db-palette-typeahead-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.12s;
}

.d3view-dashboard-v2 .db-palette-typeahead-item:hover {
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-palette-typeahead-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--db-r-sm);
    background: var(--db-n-100, #f1f5f9);
    color: var(--db-n-500, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-palette-typeahead-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 1px;
}

.d3view-dashboard-v2 .db-palette-typeahead-label {
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .db-palette-typeahead-desc {
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .db-palette-typeahead-more {
    padding: 5px 10px;
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    text-align: center;
    border-top: 1px solid var(--db-border);
    margin-top: 2px;
}

/* ===== CATEGORY TAGS STRIP ===== */
.d3view-dashboard-v2 .db-palette-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: var(--db-sp-2) var(--db-sp-4);
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
    background: var(--db-n-50, #f8fafc);
}

.d3view-dashboard-v2 .db-palette-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid var(--db-n-200, #e2e8f0);
    border-radius: var(--db-r-full);
    background: var(--db-bg-surface);
    color: var(--db-text-muted);
    font-size: 10px;
    font-weight: var(--db-fw-medium);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.d3view-dashboard-v2 .db-palette-tag:hover {
    border-color: var(--db-brand, #30487f);
    color: var(--db-brand, #30487f);
    background: rgba(48,72,127,0.05);
}

.d3view-dashboard-v2 .db-palette-tag.is-active {
    border-color: var(--db-brand, #30487f);
    background: var(--db-brand, #30487f);
    color: #fff;
}

/* Body */
.d3view-dashboard-v2 .db-palette-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--db-sp-3) var(--db-sp-3);
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300) transparent;
}

.d3view-dashboard-v2 .db-palette-body::-webkit-scrollbar { width: 4px; }
.d3view-dashboard-v2 .db-palette-body::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-palette-body::-webkit-scrollbar-thumb {
    background: var(--db-n-300);
    border-radius: var(--db-r-full);
}

/* ===== COLLAPSIBLE CATEGORY SECTIONS ===== */
.d3view-dashboard-v2 .db-palette-category-label {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--db-text-muted);
    padding: 10px var(--db-sp-2) 10px var(--db-sp-2);
    border-top: 1px solid var(--db-border);
    margin-top: var(--db-sp-3);
    border-radius: var(--db-r-sm);
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}

.d3view-dashboard-v2 .db-palette-category-label:first-child {
    border-top: none;
    margin-top: 0;
}

.d3view-dashboard-v2 .db-palette-category-label:hover {
    color: var(--db-text-primary);
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-palette-chevron {
    font-size: 9px;
    width: 14px;
    text-align: center;
    transition: transform 0.2s ease;
    color: var(--db-n-400, #94a3b8);
}

.d3view-dashboard-v2 .db-palette-category-count {
    margin-left: auto;
    font-size: 9px;
    color: var(--db-n-400, #94a3b8);
    background: var(--db-n-100, #f1f5f9);
    border-radius: var(--db-r-full);
    padding: 1px 6px;
    line-height: 1.4;
}

.d3view-dashboard-v2 .db-palette-section {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.d3view-dashboard-v2 .db-palette-section.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* Palette widget item — green only when .is-selected (widget on dashboard); default neutral */
.d3view-dashboard-v2 .db-palette-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-3);
    padding: var(--db-sp-3);
    border-radius: var(--db-r-md);
    cursor: pointer;
    transition: var(--db-t-fast);
    margin-bottom: 6px;
    position: relative;
    border: 2px solid var(--db-n-200, #e2e8f0);
    background: #fff;
}

.d3view-dashboard-v2 .db-palette-item:not(.is-selected) .db-creator__monitor-check {
    color: var(--db-n-300, #cbd5e1);
}

.d3view-dashboard-v2 .db-palette-item:not(.is-selected) .db-creator__entity-icon {
    background: var(--db-n-100, #f1f5f9) !important;
    color: var(--db-n-500, #64748b) !important;
}

.d3view-dashboard-v2 .db-palette-item:hover {
    background: var(--db-n-50);
    border-color: var(--db-border);
}

.d3view-dashboard-v2 .db-palette-item:not(.is-selected):hover {
    border-color: var(--db-n-300, #cbd5e1);
}

.d3view-dashboard-v2 .db-palette-item-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--db-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--widget-color-bg, var(--db-brand-pale));
    color: var(--widget-color, var(--db-brand));
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-palette-item:hover .db-palette-item-icon {
    transform: scale(1.08);
}

.d3view-dashboard-v2 .db-palette-item-info {
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-dashboard-v2 .db-palette-item-name {
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-palette-item-desc {
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.d3view-dashboard-v2 .db-palette-add-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--db-r-sm);
    border: 1px solid var(--db-border);
    background: var(--db-bg-surface);
    color: var(--db-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--db-t-fast);
    flex-shrink: 0;
    opacity: 0;
    font-size: 14px;
}

.d3view-dashboard-v2 .db-palette-item:hover .db-palette-add-btn {
    opacity: 1;
}

.d3view-dashboard-v2 .db-palette-add-btn:hover {
    background: var(--db-brand);
    border-color: var(--db-brand);
    color: #fff;
    box-shadow: var(--db-sh-brand);
}

/* ===== PALETTE CHECK ICONS (monitor-card style) ===== */

/* Default: show circle-o, hide check-circle */
.d3view-dashboard-v2 .db-palette-check-on  { display: none; }
.d3view-dashboard-v2 .db-palette-check-off { display: inline; }

/* Selected: swap to check-circle and show green border + check icon */
.d3view-dashboard-v2 .db-palette-item.is-selected {
    border-color: var(--db-wt-emerald, #10B981);
    background: rgba(16, 185, 129, 0.04);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.d3view-dashboard-v2 .db-palette-item.is-selected .db-creator__monitor-check {
    color: var(--db-wt-emerald, #10B981);
}
.d3view-dashboard-v2 .db-palette-item.is-selected .db-palette-check-on  { display: inline; }
.d3view-dashboard-v2 .db-palette-item.is-selected .db-palette-check-off { display: none; }

/* Hover on selected: hint removal with a red tint */
.d3view-dashboard-v2 .db-palette-item.is-selected:not(.is-primary-locked):hover .db-creator__monitor-check {
    color: var(--db-danger, #c0392b);
}

/* Intent primary: always selected, no hover effect, no pointer */
.d3view-dashboard-v2 .db-palette-item.is-primary-locked {
    cursor: default;
}
.d3view-dashboard-v2 .db-palette-item.is-primary-locked:hover {
    border-color: var(--db-wt-emerald, #10B981) !important;
    background: rgba(16, 185, 129, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}
.d3view-dashboard-v2 .db-palette-item.is-primary-locked .db-creator__monitor-check {
    color: var(--db-wt-emerald, #10B981);
}

/* Drag ghost shown while dragging a palette item.
   The .d3view-dashboard-v2 rule uses --db-* tokens (available inside the app).
   The body > rule uses --d3v-* / literals because --db-* are NOT defined on <body>. */
.d3view-dashboard-v2 .db-palette-drag-helper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--db-bg-surface);
    border: 2px solid var(--db-brand);
    border-radius: var(--db-r-md);
    box-shadow: var(--db-sh-lg);
    opacity: 0.88;
    pointer-events: none;
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-primary);
    white-space: nowrap;
    max-width: 220px;
    z-index: 9999;
}
body > .db-palette-drag-helper {
    /* --db-* tokens are scoped to .d3view-dashboard-v2 and unavailable here —
       use --d3v-* (defined at :root in plugins.css) or literal values instead */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 2px solid #30487f;
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-lg, 0 10px 25px -5px rgba(0,0,0,0.18));
    opacity: 0.88;
    pointer-events: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1E293B);
    white-space: nowrap;
    max-width: 220px;
    z-index: 9999;
    overflow: hidden;
}

/* Palette footer icon */
.d3view-dashboard-v2 .db-palette-footer-help .fa {
    margin-right: 5px;
    opacity: 0.6;
}

/* ===== 13. LOCK WIDGET (DVFIV-1947) ===== */

/* Disabled state for locked widget controls */
.d3view-dashboard-v2 .db-widget-btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

/* Lock button icon color when locked */
.d3view-dashboard-v2 .db-widget-locked .db-widget-lock-btn i {
    color: var(--db-brand, #30487f);
}

/* ===== 14. ROW FLASH (new entity highlight) ===== */
@keyframes db-row-flash {
    0%   { background-color: var(--d3v-accent, #3B82F6); color: var(--d3v-text-inverse, #fff); }
    100% { background-color: transparent; color: inherit; }
}
.d3view-dashboard-v2 .db-widget-row-flash {
    animation: db-row-flash 2s ease-out;
}

/* ===== 15. BACKDROP ===== */

.d3view-dashboard-v2 .db-backdrop {
    position: fixed;
    inset: 0;
    background: var(--db-bg-overlay);
    z-index: calc(var(--db-z-panel) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--db-t-slow);
    backdrop-filter: blur(2px);
}

.d3view-dashboard-v2 .db-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===== 14. WIDGET SETTINGS PANEL ===== */

.d3view-dashboard-v2 .db-settings-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    background: var(--db-bg-surface);
    border-left: 1px solid var(--db-border);
    box-shadow: var(--db-sh-lg);
    z-index: var(--db-z-dropdown);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--db-t-slow);
    border-radius: 0 var(--db-r-lg) var(--db-r-lg) 0;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-settings-panel.is-open {
    transform: translateX(0);
}

.d3view-dashboard-v2 .db-settings-header {
    padding: var(--db-sp-4);
    border-bottom: 1px solid var(--db-border);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-settings-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--db-sp-3) var(--db-sp-4);
}

/* Footer action buttons — flex-shrink:0 ensures they are never clipped by the panel */
.d3view-dashboard-v2 .db-settings-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--db-sp-3) var(--db-sp-4);
    border-top: 1px solid var(--db-border);
}

.d3view-dashboard-v2 .db-settings-btn--primary {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: var(--plugin-primary-color, #30487f);
    color: #fff;
    border: none;
    border-radius: var(--db-r-sm, 4px);
    font-size: var(--db-fs-sm, 12px);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.15s;
}
.d3view-dashboard-v2 .db-settings-btn--primary:hover { opacity: 0.88; }

.d3view-dashboard-v2 .db-settings-btn--ghost {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    color: var(--db-text-secondary, #475569);
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: var(--db-r-sm, 4px);
    font-size: var(--db-fs-sm, 12px);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.d3view-dashboard-v2 .db-settings-btn--ghost:hover {
    background: var(--db-n-100, #f1f5f9);
}

.d3view-dashboard-v2 .db-settings-field {
    margin-bottom: var(--db-sp-4);
}

.d3view-dashboard-v2 .db-settings-label {
    font-size: var(--db-fs-xs);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-secondary);
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.d3view-dashboard-v2 .db-settings-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-sm);
    font-size: var(--db-fs-sm);
    font-family: var(--db-font);
    color: var(--db-text-primary);
    background: var(--db-n-50);
    outline: none;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-settings-input:focus {
    background: var(--db-bg-surface);
    border-color: var(--db-border-focus);
    box-shadow: 0 0 0 2px rgba(48,72,127,0.10);
}

/* ===== 15. WIDGET TYPE SPECIFIC COLORS ===== */

.d3view-dashboard-v2 .db-widget-type-simulations   { --widget-color: var(--db-wt-simulations);   --widget-color-bg: var(--db-wt-simulations-bg);   --widget-color-muted: rgba(99,102,241,0.12); }
.d3view-dashboard-v2 .db-widget-type-physicaltests { --widget-color: var(--db-wt-physicaltests); --widget-color-bg: var(--db-wt-physicaltests-bg); --widget-color-muted: rgba(236,72,153,0.12); }
.d3view-dashboard-v2 .db-widget-type-files         { --widget-color: var(--db-wt-files);         --widget-color-bg: var(--db-wt-files-bg);         --widget-color-muted: rgba(245,158,11,0.12); }
.d3view-dashboard-v2 .db-widget-type-projects      { --widget-color: var(--db-wt-projects);      --widget-color-bg: var(--db-wt-projects-bg);      --widget-color-muted: rgba(16,185,129,0.12); }
.d3view-dashboard-v2 .db-widget-type-hpcjobs       { --widget-color: var(--db-wt-hpcjobs);       --widget-color-bg: var(--db-wt-hpcjobs-bg);       --widget-color-muted: rgba(6,182,212,0.12); }
.d3view-dashboard-v2 .db-widget-type-workflows     { --widget-color: var(--db-wt-workflows);     --widget-color-bg: var(--db-wt-workflows-bg);     --widget-color-muted: rgba(139,92,246,0.12); }
.d3view-dashboard-v2 .db-widget-type-templates     { --widget-color: var(--db-wt-templates);     --widget-color-bg: var(--db-wt-templates-bg);     --widget-color-muted: rgba(249,115,22,0.12); }
.d3view-dashboard-v2 .db-widget-type-studies       { --widget-color: var(--db-wt-studies);       --widget-color-bg: var(--db-wt-studies-bg);       --widget-color-muted: rgba(20,184,166,0.12); }
.d3view-dashboard-v2 .db-widget-type-databases     { --widget-color: var(--db-wt-databases);     --widget-color-bg: var(--db-wt-databases-bg);     --widget-color-muted: rgba(100,116,139,0.12); }
.d3view-dashboard-v2 .db-widget-type-mathmodels    { --widget-color: var(--db-wt-mathmodels);    --widget-color-bg: var(--db-wt-mathmodels-bg);    --widget-color-muted: rgba(239,68,68,0.12); }
.d3view-dashboard-v2 .db-widget-type-mlactions     { --widget-color: var(--db-wt-mlactions);     --widget-color-bg: var(--db-wt-mlactions-bg);     --widget-color-muted: rgba(132,204,22,0.12); }
.d3view-dashboard-v2 .db-widget-type-assemblies    { --widget-color: var(--db-wt-assemblies);    --widget-color-bg: var(--db-wt-assemblies-bg);    --widget-color-muted: rgba(14,165,233,0.12); }
.d3view-dashboard-v2 .db-widget-type-systemmodels  { --widget-color: var(--db-wt-systemmodels);  --widget-color-bg: var(--db-wt-systemmodels-bg);  --widget-color-muted: rgba(34,197,94,0.12); }
.d3view-dashboard-v2 .db-widget-type-designsteps   { --widget-color: var(--db-wt-designsteps);   --widget-color-bg: var(--db-wt-designsteps-bg);   --widget-color-muted: rgba(251,146,60,0.12); }
.d3view-dashboard-v2 .db-widget-type-responses     { --widget-color: var(--db-wt-responses);     --widget-color-bg: var(--db-wt-responses-bg);     --widget-color-muted: rgba(168,85,247,0.12); }
.d3view-dashboard-v2 .db-widget-type-loadcases     { --widget-color: var(--db-wt-loadcases);     --widget-color-bg: var(--db-wt-loadcases-bg);     --widget-color-muted: rgba(120,113,108,0.12); }
.d3view-dashboard-v2 .db-widget-type-users         { --widget-color: var(--db-wt-users);         --widget-color-bg: var(--db-wt-users-bg);         --widget-color-muted: rgba(59,130,246,0.12); }
.d3view-dashboard-v2 .db-widget-type-tags          { --widget-color: var(--db-wt-tags);          --widget-color-bg: var(--db-wt-tags-bg);          --widget-color-muted: rgba(217,70,239,0.12); }

/* ===== 16. STATUS BADGES ===== */

.d3view-dashboard-v2 .db-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--db-r-full);
    font-size: 11px;
    font-weight: var(--db-fw-medium);
    white-space: nowrap;
    line-height: 1.4;
}

.d3view-dashboard-v2 .db-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--db-r-full);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-badge-success { background: var(--db-success-bg); color: var(--db-success-text); }
.d3view-dashboard-v2 .db-badge-success .db-badge-dot { background: var(--db-success); }
.d3view-dashboard-v2 .db-badge-warning { background: var(--db-warning-bg); color: var(--db-warning-text); }
.d3view-dashboard-v2 .db-badge-warning .db-badge-dot { background: var(--db-warning); }
.d3view-dashboard-v2 .db-badge-danger  { background: var(--db-danger-bg);  color: var(--db-danger-text); }
.d3view-dashboard-v2 .db-badge-danger  .db-badge-dot { background: var(--db-danger); }
.d3view-dashboard-v2 .db-badge-info    { background: var(--db-info-bg);    color: var(--db-info-text); }
.d3view-dashboard-v2 .db-badge-info    .db-badge-dot { background: var(--db-info); }
.d3view-dashboard-v2 .db-badge-neutral { background: var(--db-n-100); color: var(--db-n-600); }
.d3view-dashboard-v2 .db-badge-neutral .db-badge-dot { background: var(--db-n-400); }

/* ===== 16b. CELL LINK (name formatter — clickable link style) — Added by shashank2104 on 03/11/2026 ===== */
.d3view-dashboard-v2 .db-cell-link {
    color: var(--db-brand, #30487f);
    cursor: pointer;
    font-weight: var(--db-fw-medium, 500);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.d3view-dashboard-v2 .db-cell-link:hover {
    color: var(--db-brand-dark, #172144);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.d3view-dashboard-v2 .db-cell-link:focus {
    outline: 2px solid var(--db-brand-pale, #e8eef7);
    outline-offset: 2px;
}

/* ===== 17. DASHBOARD META BAR ===== */

.d3view-dashboard-v2 .db-meta-bar {
    display: flex;
    align-items: center;
    gap: var(--db-sp-4);
    padding: var(--db-sp-2) var(--db-sp-5);
    border-bottom: 1px solid var(--db-border);
    background: var(--db-n-50);
    flex-shrink: 0;
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-meta-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-dashboard-v2 .db-meta-stat-value {
    font-weight: var(--db-fw-semi);
    color: var(--db-text-secondary);
}

.d3view-dashboard-v2 .db-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: var(--db-r-full);
    background: var(--db-border-strong);
}

/* ===== 18. TOOLTIP ===== */

.d3view-dashboard-v2 [data-db-tooltip] {
    position: relative;
}

.d3view-dashboard-v2 [data-db-tooltip]::after {
    content: attr(data-db-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--db-n-900);
    color: #fff;
    font-size: 11px;
    font-weight: var(--db-fw-medium);
    padding: 4px 8px;
    border-radius: var(--db-r-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--db-t-fast);
    z-index: var(--db-z-toast);
}

.d3view-dashboard-v2 [data-db-tooltip]:hover::after {
    opacity: 1;
}

/* ===== 19. ANIMATIONS ===== */

@keyframes db-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

@keyframes db-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes db-slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes db-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.d3view-dashboard-v2 .db-widget-card {
    animation: db-fade-in 0.25s ease forwards;
}

.d3view-dashboard-v2 .db-anim-spin {
    animation: db-spin 0.8s linear infinite;
}

/* ===== 20. LOADING SPINNER ===== */

.d3view-dashboard-v2 .db-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--db-border);
    border-top-color: var(--widget-color, var(--db-brand));
    border-radius: 50%;
    animation: db-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 1.5px;
}

.d3view-dashboard-v2 .db-spinner-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    gap: var(--db-sp-3);
}

.d3view-dashboard-v2 .db-spinner-label {
    font-size: var(--db-fs-sm);
    color: var(--db-text-muted);
}

/* ===== 21. TABLE OVERRIDE FOR WIDGET CONTEXT ===== */

.d3view-dashboard-v2 .db-widget-body .d3view-table-container {
    height: 100%;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-widget-body .d3view-table-header-row {
    background: var(--db-n-50) !important;
    border-bottom: 1px solid var(--db-border) !important;
    font-size: var(--db-fs-xs) !important;
    font-weight: var(--db-fw-semi) !important;
    color: var(--db-text-muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.d3view-dashboard-v2 .db-widget-body .d3view-table-row:hover {
    background: var(--widget-color-bg) !important;
    cursor: pointer;
}

/* ===== 22. RESPONSIVE ===== */

@media (max-width: 1024px) {
    .d3view-dashboard-v2 {
        --db-sidebar-w: 180px;
    }
}

@media (max-width: 768px) {
    .d3view-dashboard-v2 .db-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--db-z-panel);
        transform: translateX(-100%);
        transition: transform var(--db-t-slow);
    }

    .d3view-dashboard-v2 .db-sidebar.is-open {
        transform: translateX(0);
    }

    .d3view-dashboard-v2 .db-main-area {
        width: 100%;
    }
}

/* ===== 23. SCROLLBAR (GLOBAL) ===== */

.d3view-dashboard-v2 ::-webkit-scrollbar { width: 6px; height: 6px; }
.d3view-dashboard-v2 ::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 ::-webkit-scrollbar-thumb {
    background: var(--db-n-300);
    border-radius: var(--db-r-full);
}
.d3view-dashboard-v2 ::-webkit-scrollbar-thumb:hover { background: var(--db-n-400); }

/* ===== COMBINED FILTER CHIPS (Settings Panel) ===== */

.d3view-dashboard-v2 .db-combined-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

.d3view-dashboard-v2 .db-combined-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--db-bg-muted, #f1f5f9);
    border: 1px solid var(--db-border-color, #e2e8f0);
    font-size: 12px;
    line-height: 1.4;
    color: var(--db-text-primary, #334155);
    transition: border-color 0.15s;
}

.d3view-dashboard-v2 .db-combined-filter-chip:hover {
    border-color: var(--db-n-400, #94a3b8);
}

.d3view-dashboard-v2 .db-combined-filter-chip-key {
    font-weight: 600;
}

.d3view-dashboard-v2 .db-combined-filter-chip-count {
    font-size: 11px;
    color: var(--db-text-muted, #94a3b8);
}

.d3view-dashboard-v2 .db-combined-filter-chip-remove {
    cursor: pointer;
    margin-left: 2px;
    color: var(--db-text-muted, #94a3b8);
    font-size: 11px;
}

.d3view-dashboard-v2 .db-combined-filter-chip-remove:hover {
    color: var(--db-danger, #ef4444);
}

/* ===== 24. MISC UTILITIES ===== */

/* ===== 25. INITIAL DASHBOARD LOADER ===== */

.d3view-dashboard-v2 .db-initial-loader {
    position: absolute;
    inset: 0;
    background: var(--db-bg-canvas);
    z-index: 180;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: opacity 0.42s ease, visibility 0.42s ease;
    pointer-events: all;
}

.d3view-dashboard-v2 .db-initial-loader.is-fading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.d3view-dashboard-v2 .db-initial-loader .db-loader-icon {
    font-size: 26px;
    color: var(--db-brand);
    opacity: 0.65;
}

.d3view-dashboard-v2 .db-initial-loader .db-loader-label {
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-muted);
    letter-spacing: 0.025em;
}

.d3view-dashboard-v2 .db-initial-loader .db-loader-progress {
    width: 140px;
    height: 3px;
    background: var(--db-border);
    border-radius: 99px;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-initial-loader .db-loader-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--db-brand);
    border-radius: 99px;
    transition: width 0.28s ease;
}

.d3view-dashboard-v2.db-dark .db-initial-loader {
    background: var(--db-bg-canvas);
}

.d3view-dashboard-v2 #db-page-body {
    position: relative;
}

.d3view-dashboard-v2 .db-hidden    { display: none !important; }
.d3view-dashboard-v2 .db-disabled  { opacity: 0.5; cursor: not-allowed; }
.d3view-dashboard-v2 .db-invisible { visibility: hidden !important; }
.d3view-dashboard-v2 .db-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-dashboard-v2 .db-flex      { display: flex; }
.d3view-dashboard-v2 .db-flex-center { display: flex; align-items: center; justify-content: center; }
.d3view-dashboard-v2 .db-gap-1  { gap: var(--db-sp-1); }
.d3view-dashboard-v2 .db-gap-2  { gap: var(--db-sp-2); }
.d3view-dashboard-v2 .db-gap-3  { gap: var(--db-sp-3); }
.d3view-dashboard-v2 .db-ml-auto { margin-left: auto; }
.d3view-dashboard-v2 .db-mt-1 { margin-top: var(--db-sp-1); }
.d3view-dashboard-v2 .db-mt-2 { margin-top: var(--db-sp-2); }

/* Icon glyphs used as CSS content */
.d3view-dashboard-v2 .db-icon-grip::before     { content: '⠿'; }
.d3view-dashboard-v2 .db-icon-close::before    { content: '✕'; }
.d3view-dashboard-v2 .db-icon-expand::before   { content: '⤢'; }
.d3view-dashboard-v2 .db-icon-settings::before { content: '⚙'; }
.d3view-dashboard-v2 .db-icon-refresh::before  { content: '↺'; }
.d3view-dashboard-v2 .db-icon-add::before      { content: '+'; }
.d3view-dashboard-v2 .db-icon-filter::before   { content: '⧉'; }

/* =========================================================
   DARK THEME  —  add class "db-theme-dark" to .d3view-dashboard-v2 e.g.  indexView.$el.addClass('db-theme-dark');
   ========================================================= */
/* In dark theme the sidebar border-right uses the dark border token */
.d3view-dashboard-v2.db-root.db-theme-dark .db-sidebar {
    border-right-color: var(--db-border);
}

.d3view-dashboard-v2.db-root.db-theme-dark {
    --db-bg-canvas:          #0F172A;
    --db-bg-surface:         #1E293B;
    --db-bg-elevated:        #1E293B;
    --db-bg-sidebar:         #141417;
    --db-bg-sidebar-hover:   rgba(255,255,255,0.07);
    --db-bg-sidebar-active:  rgba(48,72,127,0.22);
    --db-bg-header:          rgba(30,41,59,0.95);
    --db-bg-overlay:         rgba(0,0,0,0.60);

    --db-text-primary:       #F1F5F9;
    --db-text-secondary:     #94A3B8;
    --db-text-muted:         #64748B;
    --db-text-disabled:      #475569;
    --db-text-sidebar:       rgba(255,255,255,0.85);
    --db-text-sidebar-muted: rgba(255,255,255,0.42);

    --db-border:             #334155;
    --db-border-strong:      #475569;

    --db-grad-canvas:        linear-gradient(160deg, #0F172A 0%, #1A2438 100%);
    --db-grad-sidebar:       linear-gradient(180deg, #18181B 0%, #09090B 100%);

    --db-sh-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --db-sh-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -1px rgba(0,0,0,0.20);
}

/* =========================================================
   DVFIV-1934 — Dashboard v2 Modular Refactor Additions
   Added by shashank on 02/28/2026
   All new components for: topbar, tabs, stats cards,
   widget view modes, auto-save toggle, inline create,
   cards/chart/list modes, sidebar footer
   Scoped under .d3view-dashboard-v2 (IndexView el class)
   ========================================================= */

/* ── CSS scope alias ─────────────────────────────────────────
   .d3view-dashboard-v2 is the SAME element as .d3view-dashboard-v2 (className: 'd3view-dashboard-v2 db-root').
   Tokens declared here make .d3view-dashboard-v2 self-contained. */
.d3view-dashboard-v2 {
    /* Inherits all tokens from .d3view-dashboard-v2 (same element) */
    /* Additional tab-bar layout vars */
    --db-topbar-h:   44px;
    --db-tab-h:      36px;
    --db-tab-max-w:  200px;
    --db-stat-card-h: 140px;
}

/* ===== 25. TOPBAR (tab row + right actions) ===== */

.d3view-dashboard-v2 .db-topbar {
    display: flex;
    align-items: center;
    height: var(--db-topbar-h);
    background: var(--db-bg-surface);
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
    position: relative;
    z-index: var(--db-z-raised);
    overflow: hidden;
    gap: 0;
}

.d3view-dashboard-v2 .db-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
    padding: 0 var(--db-sp-4);
    flex-shrink: 0;
    margin-left: auto;
    border-left: 1px solid var(--db-border);
    height: 100%;
}

.d3view-dashboard-v2 .db-topbar-divider {
    width: 1px;
    height: 18px;
    background: var(--db-border);
    flex-shrink: 0;
    margin: 0 var(--db-sp-1);
}

/* Topbar icon buttons */
.d3view-dashboard-v2 .db-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--db-sp-1);
    height: 28px;
    padding: 0 10px;
    border: none;
    border-radius: var(--db-r-md);
    background: transparent;
    color: var(--db-text-secondary);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    font-family: var(--db-font);
    cursor: pointer;
    transition: var(--db-t-fast);
    white-space: nowrap;
    outline: none;
}

.d3view-dashboard-v2 .db-topbar-btn:hover {
    background: var(--db-n-100);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2 .db-topbar-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(48,72,127,0.25);
}

/* Primary action button (Add Widget) */
.d3view-dashboard-v2 .db-topbar-btn--primary {
    background: var(--db-grad-brand);
    color: #fff !important;
    box-shadow: var(--db-sh-brand);
    padding: 0 14px;
}

.d3view-dashboard-v2 .db-topbar-btn--primary:hover {
    background: var(--db-brand-dark);
    box-shadow: 0 4px 16px rgba(48,72,127,0.40);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .db-topbar-btn--primary:active {
    transform: translateY(0);
}

/* ===== 26. TAB BAR ===== */

.d3view-dashboard-v2 .db-tab-bar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 var(--db-sp-2) 0 var(--db-sp-3);
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.d3view-dashboard-v2 .db-tab-bar::-webkit-scrollbar {
    display: none;
}

/* Individual tab */
.d3view-dashboard-v2 .db-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--db-sp-2);
    height: var(--db-tab-h);
    max-width: var(--db-tab-max-w);
    min-width: 80px;
    padding: 0 var(--db-sp-3) 0 var(--db-sp-4);
    border-radius: var(--db-r-md) var(--db-r-md) 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    cursor: pointer;
    background: transparent;
    color: var(--db-text-muted);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    font-family: var(--db-font);
    transition: var(--db-t-fast);
    flex-shrink: 0;
    position: relative;
    bottom: 0;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    animation: db-tab-appear 0.18s ease forwards;
}

@keyframes db-tab-appear {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d3view-dashboard-v2 .db-tab:hover {
    background: var(--db-n-100);
    color: var(--db-text-secondary);
    border-color: var(--db-border);
}

.d3view-dashboard-v2 .db-tab.is-active {
    background: var(--db-bg-canvas);
    color: var(--db-text-primary);
    border-color: var(--db-border);
    border-bottom-color: var(--db-bg-canvas);
    font-weight: var(--db-fw-semi);
    box-shadow: 0 -2px 0 0 var(--db-brand) inset;
}

/* Tab name */
.d3view-dashboard-v2 .db-tab-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
}

/* Tab close (×) button */
.d3view-dashboard-v2 .db-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--db-r-sm);
    flex-shrink: 0;
    opacity: 0;
    transition: var(--db-t-fast);
    color: var(--db-text-muted);
    cursor: pointer;
}

.d3view-dashboard-v2 .db-tab:hover .db-tab-close,
.d3view-dashboard-v2 .db-tab.is-active .db-tab-close {
    opacity: 1;
}

.d3view-dashboard-v2 .db-tab-close:hover {
    background: var(--db-danger-bg);
    color: var(--db-danger);
    opacity: 1;
}

/* "New Dashboard" button (+ inside tab bar) */
.d3view-dashboard-v2 .db-tab-new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 4px;
    border-radius: var(--db-r-md);
    border: 1px dashed var(--db-border-strong);
    background: transparent;
    color: var(--db-text-muted);
    font-size: var(--db-fs-xs);
    font-weight: var(--db-fw-medium);
    font-family: var(--db-font);
    cursor: pointer;
    transition: var(--db-t-fast);
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
}

.d3view-dashboard-v2 .db-tab-new:hover {
    border-color: var(--db-brand-light);
    color: var(--db-brand);
    background: var(--db-brand-pale);
}

.d3view-dashboard-v2 .db-tab-new-label {
    font-size: var(--db-fs-xs);
}

/* ===== 27. INLINE DASHBOARD CREATE FORM ===== */

.d3view-dashboard-v2 .db-tab-create-form {
    display: inline-flex;
    align-items: center;
    gap: var(--db-sp-1);
    height: 32px;
    padding: 0 var(--db-sp-2);
    margin-bottom: 2px;
    border-radius: var(--db-r-md);
    background: var(--db-n-50);
    border: 1px solid var(--db-border-focus);
    box-shadow: 0 0 0 3px rgba(48,72,127,0.08);
    flex-shrink: 0;
    animation: db-fade-in 0.15s ease forwards;
}

.d3view-dashboard-v2 .db-tab-create-input {
    width: 180px;
    height: 24px;
    padding: 0 8px;
    border: none;
    border-radius: var(--db-r-sm);
    background: var(--db-bg-surface);
    border: 1px solid var(--db-border);
    font-size: var(--db-fs-sm);
    font-family: var(--db-font);
    color: var(--db-text-primary);
    outline: none;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-tab-create-input:focus {
    border-color: var(--db-border-focus);
    box-shadow: 0 0 0 2px rgba(48,72,127,0.12);
}

.d3view-dashboard-v2 .db-tab-create-input::placeholder {
    color: var(--db-text-muted);
}

/* Add / Cancel buttons */
.d3view-dashboard-v2 .db-tab-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--db-r-sm);
    font-size: 11px;
    font-weight: var(--db-fw-medium);
    font-family: var(--db-font);
    cursor: pointer;
    transition: var(--db-t-fast);
    border: 1px solid transparent;
    white-space: nowrap;
    outline: none;
}

.d3view-dashboard-v2 .db-tab-create-btn--add {
    background: var(--db-brand);
    color: #fff;
}

.d3view-dashboard-v2 .db-tab-create-btn--add:hover {
    background: var(--db-brand-dark);
    box-shadow: var(--db-sh-brand);
}

.d3view-dashboard-v2 .db-tab-create-btn--cancel {
    background: transparent;
    color: var(--db-text-muted);
    border-color: var(--db-border);
}

.d3view-dashboard-v2 .db-tab-create-btn--cancel:hover {
    background: var(--db-n-100);
    color: var(--db-text-secondary);
}

/* ===== 28. AUTO-SAVE CONTROL ===== */

.d3view-dashboard-v2 .db-autosave-ctrl {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-autosave-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--db-text-muted);
    white-space: nowrap;
}

/* Toggle switch (custom checkbox) */
.d3view-dashboard-v2 .db-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: var(--db-sp-1);
    cursor: pointer;
    user-select: none;
}

.d3view-dashboard-v2 .db-autosave-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.d3view-dashboard-v2 .db-toggle-track {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    border-radius: var(--db-r-full);
    background: var(--db-n-300);
    transition: background var(--db-t-fast);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-autosave-toggle:checked + .db-toggle-track {
    background: var(--db-brand);
}

.d3view-dashboard-v2 .db-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: var(--db-r-full);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: left var(--db-t-fast);
}

.d3view-dashboard-v2 .db-autosave-toggle:checked ~ .db-toggle-track .db-toggle-thumb,
.d3view-dashboard-v2 .db-toggle-track:has(+ .db-autosave-toggle:checked) .db-toggle-thumb {
    left: 16px;
}

/* Fallback: JS-driven checked class on label */
.d3view-dashboard-v2 .db-toggle-label.is-checked .db-toggle-track {
    background: var(--db-brand);
}

.d3view-dashboard-v2 .db-toggle-label.is-checked .db-toggle-thumb {
    left: 16px;
}

.d3view-dashboard-v2 .db-toggle-label-text {
    font-size: 11px;
    color: var(--db-text-muted);
    white-space: nowrap;
}

/* ===== 29. SIDEBAR FOOTER + DIVIDER (new in modular shell) ===== */

.d3view-dashboard-v2 .db-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--db-border);
}

.d3view-dashboard-v2 .db-sidebar-divider {
    height: 1px;
    background: var(--db-border);
    margin: var(--db-sp-2) 0;
    flex-shrink: 0;
}

/* Collapse button in sidebar footer */
.d3view-dashboard-v2 .db-sidebar-collapse-btn {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    width: 100%;
    height: 40px;
    padding: 0 var(--db-sp-4);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--db-text-sidebar-muted);
    font-size: var(--db-fs-sm);
    font-family: var(--db-font);
    transition: var(--db-t-fast);
    white-space: nowrap;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-sidebar-collapse-btn:hover {
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
}

.d3view-dashboard-v2 .db-sidebar-collapse-icon {
    flex-shrink: 0;
    transition: transform var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-collapse-icon {
    transform: rotate(180deg);
}

.d3view-dashboard-v2 .db-sidebar-label {
    transition: opacity var(--db-t-slow), width var(--db-t-slow);
    overflow: hidden;
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-label {
    opacity: 0;
    width: 0;
}

/* ===== 30. STATS CARDS ROW ===== */

.d3view-dashboard-v2 .db-stats-row {
    display: flex;
    gap: var(--db-sp-4);
    padding: var(--db-sp-5) var(--db-sp-5) 0;
    flex-shrink: 0;
    min-height: 0;
    width: 100%;
}

/* Stats row children (pills/cards) flex-grow to fill full line */
.d3view-dashboard-v2 .db-stats-row > *,
.d3view-dashboard-v2 #db-stats-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Base stat card (shared by skeleton + live) */
.d3view-dashboard-v2 .db-stat-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--db-stat-card-h);
    background: var(--db-bg-surface);
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-lg);
    padding: var(--db-sp-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: var(--db-sh-sm);
    /* Glassmorphic tint */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow var(--db-t-base), transform var(--db-t-base);
}

.d3view-dashboard-v2 .db-stat-card:hover {
    box-shadow: var(--db-sh-md);
    transform: translateY(-1px);
}

/* Skeleton state */
.d3view-dashboard-v2 .db-stat-card--skeleton {
    pointer-events: none;
}

.d3view-dashboard-v2 .db-stat-skeleton-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--db-r-md);
    background: linear-gradient(90deg, var(--db-n-200) 25%, var(--db-n-100) 50%, var(--db-n-200) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite;
}

.d3view-dashboard-v2 .db-stat-skeleton-value {
    width: 64px;
    height: 22px;
    border-radius: var(--db-r-sm);
    margin-top: var(--db-sp-2);
    background: linear-gradient(90deg, var(--db-n-200) 25%, var(--db-n-100) 50%, var(--db-n-200) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite 0.1s;
}

.d3view-dashboard-v2 .db-stat-skeleton-label {
    width: 88px;
    height: 12px;
    border-radius: var(--db-r-sm);
    background: linear-gradient(90deg, var(--db-n-200) 25%, var(--db-n-100) 50%, var(--db-n-200) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite 0.2s;
}

/* Live card entrance animation */
@keyframes db-fade-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d3view-dashboard-v2 .db-stat-anim {
    animation: db-fade-slide-up 0.30s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Live card top row (icon + badge) */
.d3view-dashboard-v2 .db-stat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* Stat icon */
.d3view-dashboard-v2 .db-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--db-r-md);
    background: var(--db-brand-pale);
    color: var(--db-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

/* Stat value */
.d3view-dashboard-v2 .db-stat-value {
    font-size: var(--db-fs-2xl);
    font-weight: var(--db-fw-bold);
    color: var(--db-text-primary);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-stat-value-row .db-stat-value {
    margin-top: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.d3view-dashboard-v2 .db-stat-meta-stats {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-stat-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}

.d3view-dashboard-v2 .db-stat-meta-row .db-stat-meta-label,
.d3view-dashboard-v2 .db-stat-meta-row .db-stat-meta-value {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.d3view-dashboard-v2 .db-stat-meta-label {
    font-size: 11px;
    font-weight: 600;
    font-variant: small-caps;
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-stat-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--db-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.d3view-dashboard-v2 .db-stat-meta-value .fa {
    font-size: 12px;
    color: var(--db-text-muted);
}

/* Stat label */
.d3view-dashboard-v2 .db-stat-label {
    font-size: var(--db-fs-xs);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Stat badge (trend indicator) */
.d3view-dashboard-v2 .db-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: var(--db-r-full);
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-stat-badge--up,
.d3view-dashboard-v2 .db-stat-badge--success {
    background: var(--db-success-bg);
    color: var(--db-success-text);
}

.d3view-dashboard-v2 .db-stat-badge--down,
.d3view-dashboard-v2 .db-stat-badge--danger {
    background: var(--db-danger-bg);
    color: var(--db-danger-text);
}

.d3view-dashboard-v2 .db-stat-badge--neutral {
    background: var(--db-n-100);
    color: var(--db-text-muted);
}

/* ===== 30b. SUMMARY PAGE CONTENT ===== */

.d3view-dashboard-v2 .db-summary-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--db-sp-5);
}

.d3view-dashboard-v2 .db-summary-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-sp-4);
    width: 100%;
}

/* Summary stat cards: plain (no colored border), flex-grow to fill full line */
.d3view-dashboard-v2 .db-summary-stats-row .db-stat-card,
.d3view-dashboard-v2 .db-summary-stats-row .db-stat-card--skeleton {
    flex: 1 1 0;
    min-width: 120px;
    max-width: none;
    border-bottom: 1px solid var(--db-border, #e2e8f0);
}

/* ===== 31. GRIDSTACK WRAP (new) ===== */

.d3view-dashboard-v2 .db-gridstack-wrap {
    flex: 1 1 auto;
    min-height: 200px;
    /* padding: var(--db-sp-5); */
    padding: 0;
}

/* ===== 32. WIDGET VIEW MODE BUTTONS ===== */

/* Container positioned in widget header controls */
.d3view-dashboard-v2 .db-widget-view-modes {
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--db-n-100);
    border-radius: var(--db-r-sm);
    padding: 2px;
}



/* Active mode button */
.d3view-dashboard-v2 .db-widget-view-mode-btn.is-active-mode {
    background: var(--db-bg-surface)!important;
    color: var(--db-brand);
    box-shadow: var(--db-sh-xs);
}

/* ===== 33. CARDS VIEW MODE BODY ===== */

.d3view-dashboard-v2 .db-widget-body .db-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-sp-3);
    padding: var(--db-sp-3);
    align-content: flex-start;
}

.d3view-dashboard-v2 .db-cards-item {
    flex: 1 1 calc(33.333% - var(--db-sp-3));
    min-width: 160px;
    max-width: 100%;
    background: var(--db-n-50);
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-md);
    padding: var(--db-sp-3) var(--db-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--db-sp-2);
    transition: box-shadow var(--db-t-fast), transform var(--db-t-fast);
}

.d3view-dashboard-v2 .db-cards-item:hover {
    box-shadow: var(--db-sh-sm);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .db-cards-item-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d3view-dashboard-v2 .db-cards-item-field--primary .db-cards-item-val {
    font-size: var(--db-fs-md);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2 .db-cards-item-field--secondary .db-cards-item-val {
    font-size: var(--db-fs-sm);
    color: var(--db-text-secondary);
}

.d3view-dashboard-v2 .db-cards-item-key {
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    color: var(--db-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.d3view-dashboard-v2 .db-cards-item-val {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 34. CHART VIEW MODE BODY ===== */

.d3view-dashboard-v2 .db-widget-body .db-chart-container {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 120px;
    padding: var(--db-sp-3);
}

.d3view-dashboard-v2 .db-widget-body .db-chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}

/* ===== 35. LIST VIEW MODE BODY ===== */

.d3view-dashboard-v2 .db-widget-body .db-widget-list {
    list-style: none;
    margin: 0;
    padding: var(--db-sp-1) 0;
}

.d3view-dashboard-v2 .db-list-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-3);
    padding: 8px var(--db-sp-4);
    border-bottom: 1px solid var(--db-border);
    transition: background var(--db-t-fast);
    cursor: default;
}

.d3view-dashboard-v2 .db-list-item:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-list-item:hover {
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-list-item-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--db-r-sm);
    background: var(--widget-color-bg, var(--db-brand-pale));
    color: var(--widget-color, var(--db-brand));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-list-item-primary {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge on list item */
.d3view-dashboard-v2 .db-list-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--db-r-full);
    font-size: 10px;
    font-weight: var(--db-fw-medium);
    background: var(--db-n-100);
    color: var(--db-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Common status-specific badge colors */
.d3view-dashboard-v2 .db-list-item-badge--complete,
.d3view-dashboard-v2 .db-list-item-badge--completed,
.d3view-dashboard-v2 .db-list-item-badge--success { background: var(--db-success-bg); color: var(--db-success-text); }
.d3view-dashboard-v2 .db-list-item-badge--running,
.d3view-dashboard-v2 .db-list-item-badge--active   { background: var(--db-info-bg);    color: var(--db-info-text); }
.d3view-dashboard-v2 .db-list-item-badge--failed,
.d3view-dashboard-v2 .db-list-item-badge--error    { background: var(--db-danger-bg);  color: var(--db-danger-text); }
.d3view-dashboard-v2 .db-list-item-badge--pending,
.d3view-dashboard-v2 .db-list-item-badge--queued   { background: var(--db-warning-bg); color: var(--db-warning-text); }

/* =========================================================
   VERTICAL TABS (Home / Ontology) — left sidebar navigation
   ========================================================= */
.d3view-dashboard-v2 .db-tabs-wrapper {
    display: flex;
    flex: 1;
    overflow: auto;
}

.d3view-dashboard-v2 .db-tabs-wrapper .pl-tabs-vertical-outer .pl-tab-item-label {
    font-variant: small-caps;
    font-size: 75%;
}

.d3view-dashboard-v2 .db-tabs-wrapper .pl-tabs-vertical-outer li.list-group-item {
    border: none;
}

.d3view-dashboard-v2 .db-tab-content-wrapper {
    position: relative;
}

.d3view-dashboard-v2 .db-ontology-content {
    position: relative;
    overflow: hidden;
}
.d3view-dashboard-v2 .db-ontology-content .agent-header {
    /* display: none; */
}

.d3view-dashboard-v2 .db-landing-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* ===== 36. NO-DASHBOARDS & EMPTY-DASHBOARD SHARED STATES ===== */

.d3view-dashboard-v2 .db-no-dashboards-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    padding: var(--db-sp-12);
    text-align: center;
}

.d3view-dashboard-v2 .db-empty-art {
    width: 100px;
    height: 100px;
    border-radius: var(--db-r-2xl);
    background: var(--db-brand-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--db-sp-6);
    color: var(--db-brand);
    box-shadow: 0 0 0 8px rgba(48,72,127,0.06), 0 0 0 16px rgba(48,72,127,0.03);
}

.d3view-dashboard-v2 .db-empty-title {
    font-size: var(--db-fs-xl);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    margin-bottom: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-empty-desc {
    font-size: var(--db-fs-md);
    color: var(--db-text-muted);
    margin-bottom: var(--db-sp-6);
    max-width: 380px;
    line-height: var(--db-lh-loose);
}

/* ===== 37. PALETTE FOOTER HINT ===== */

.d3view-dashboard-v2 .db-palette-footer {
    padding: var(--db-sp-3) var(--db-sp-4);
    border-top: 1px solid var(--db-border);
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
    text-align: center;
    flex-shrink: 0;
    background: var(--db-n-50);
}

/* Palette empty state */
.d3view-dashboard-v2 .db-palette-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--db-sp-8);
    gap: var(--db-sp-2);
    text-align: center;
}

.d3view-dashboard-v2 .db-palette-empty-icon {
    font-size: 28px;
    opacity: 0.25;
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-palette-empty-text {
    font-size: var(--db-fs-sm);
    color: var(--db-text-muted);
}

/* ===== 38. WIDGET SETTINGS PANEL BUTTONS ===== */

.d3view-dashboard-v2 .db-settings-footer {
    display: flex;
    gap: var(--db-sp-2);
    padding: var(--db-sp-3) var(--db-sp-4);
    border-top: 1px solid var(--db-border);
    background: var(--db-n-50);
    flex-shrink: 0;
}


/* ===== 38. WIDGET EDIT SIDEBAR OVERLAY ===== */

/* Backdrop overlay when widget edit sidebar is open (reuses db-creator__widget-sidebar) */
.d3view-dashboard-v2 .db-widget-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0,0,0,0.18);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.d3view-dashboard-v2 .db-widget-edit-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== 39. WIDGET FOOTER PAGINATION (compact prev/next) ===== */

.d3view-dashboard-v2 .db-widget-pagination {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-widget-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: var(--db-r-sm);
    background: transparent;
    color: var(--db-text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: background var(--db-t-fast), color var(--db-t-fast);
    line-height: 1;
    outline: none;
}

.d3view-dashboard-v2 .db-widget-page-btn:hover:not([disabled]) {
    background: var(--db-n-100);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2 .db-widget-page-btn[disabled] {
    opacity: 0.3;
    cursor: default;
}

.d3view-dashboard-v2 .db-widget-page-indicator {
    font-size: 11px;
    font-weight: var(--db-fw-medium);
    color: var(--db-text-muted);
    padding: 0 2px;
    white-space: nowrap;
    user-select: none;
}

.d3view-dashboard-v2 .db-widget-page-sep {
    color: var(--db-text-disabled);
    margin: 0 1px;
}


.d3view-dashboard-v2 .db-settings-btn {
    flex: 1 1 auto;
    height: 32px;
    border-radius: var(--db-r-md);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    font-family: var(--db-font);
    cursor: pointer;
    transition: var(--db-t-fast);
    border: 1px solid transparent;
    outline: none;
}

.d3view-dashboard-v2 .db-settings-btn--primary {
    background: var(--db-brand);
    color: #fff;
}

.d3view-dashboard-v2 .db-settings-btn--primary:hover {
    background: var(--db-brand-dark);
}

.d3view-dashboard-v2 .db-settings-btn--ghost {
    background: transparent;
    color: var(--db-text-secondary);
    border-color: var(--db-border);
}

.d3view-dashboard-v2 .db-settings-btn--ghost:hover {
    background: var(--db-n-100);
    border-color: var(--db-border-strong);
}

/* ===== 39. ENHANCED GLASSMORPHIC WIDGET CARD ===== */

/* The existing .db-widget-card already has box-shadow and border.
   Layer a subtle glassmorphic overlay for the new design. */
.d3view-dashboard-v2 .db-widget-card {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ===== 40. DARK THEME ADDITIONS FOR NEW COMPONENTS ===== */

.d3view-dashboard-v2.db-theme-dark .db-topbar,
.d3view-dashboard-v2.db-root.db-theme-dark .db-topbar {
    background: var(--db-bg-surface);
    border-bottom-color: var(--db-border);
}

.d3view-dashboard-v2.db-theme-dark .db-topbar-btn:hover,
.d3view-dashboard-v2.db-root.db-theme-dark .db-topbar-btn:hover {
    background: rgba(255,255,255,0.06);
}

.d3view-dashboard-v2.db-theme-dark .db-tab.is-active,
.d3view-dashboard-v2.db-root.db-theme-dark .db-tab.is-active {
    background: var(--db-bg-canvas);
    border-color: var(--db-border);
    border-bottom-color: var(--db-bg-canvas);
}

.d3view-dashboard-v2.db-theme-dark .db-tab:hover,
.d3view-dashboard-v2.db-root.db-theme-dark .db-tab:hover {
    background: rgba(255,255,255,0.05);
}

.d3view-dashboard-v2.db-theme-dark .db-tab-new:hover,
.d3view-dashboard-v2.db-root.db-theme-dark .db-tab-new:hover {
    background: rgba(48,72,127,0.12);
}

.d3view-dashboard-v2.db-theme-dark .db-stat-card,
.d3view-dashboard-v2.db-root.db-theme-dark .db-stat-card {
    background: var(--db-bg-elevated);
    border-color: var(--db-border);
}

.d3view-dashboard-v2.db-theme-dark .db-stat-skeleton-icon,
.d3view-dashboard-v2.db-theme-dark .db-stat-skeleton-value,
.d3view-dashboard-v2.db-theme-dark .db-stat-skeleton-label,
.d3view-dashboard-v2.db-root.db-theme-dark .db-stat-skeleton-icon,
.d3view-dashboard-v2.db-root.db-theme-dark .db-stat-skeleton-value,
.d3view-dashboard-v2.db-root.db-theme-dark .db-stat-skeleton-label {
    background: linear-gradient(90deg, var(--db-n-700) 25%, var(--db-n-800) 50%, var(--db-n-700) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite;
}

.d3view-dashboard-v2.db-theme-dark .db-cards-item,
.d3view-dashboard-v2.db-root.db-theme-dark .db-cards-item {
    background: rgba(255,255,255,0.03);
    border-color: var(--db-border);
}

.d3view-dashboard-v2.db-theme-dark .db-list-item:hover,
.d3view-dashboard-v2.db-root.db-theme-dark .db-list-item:hover {
    background: rgba(255,255,255,0.04);
}

.d3view-dashboard-v2.db-theme-dark .db-tab-create-form,
.d3view-dashboard-v2.db-root.db-theme-dark .db-tab-create-form {
    background: var(--db-bg-elevated);
    border-color: var(--db-border-focus);
}

.d3view-dashboard-v2.db-theme-dark .db-tab-create-input,
.d3view-dashboard-v2.db-root.db-theme-dark .db-tab-create-input {
    background: var(--db-bg-surface);
    border-color: var(--db-border-strong);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2.db-theme-dark .db-widget-view-modes,
.d3view-dashboard-v2.db-root.db-theme-dark .db-widget-view-modes {
    background: rgba(255,255,255,0.06);
}

.d3view-dashboard-v2.db-theme-dark .db-widget-view-mode-btn.is-active-mode,
.d3view-dashboard-v2.db-root.db-theme-dark .db-widget-view-mode-btn.is-active-mode {
    background: rgba(48,72,127,0.22);
    color: var(--db-brand-light);
}

/* ===== 41. RESPONSIVE ADDITIONS ===== */

@media (max-width: 1200px) {
    .d3view-dashboard-v2 .db-stats-row {
        gap: var(--db-sp-3);
        padding: var(--db-sp-4) var(--db-sp-4) 0;
    }
    .d3view-dashboard-v2 .db-gridstack-wrap {
        padding: var(--db-sp-4);
    }
}

@media (max-width: 900px) {
    .d3view-dashboard-v2 .db-stats-row {
        flex-wrap: wrap;
    }
    .d3view-dashboard-v2 .db-stat-card {
        flex: 1 1 calc(50% - var(--db-sp-3));
    }
    .d3view-dashboard-v2 .db-toggle-label-text {
        display: none;
    }
    .d3view-dashboard-v2 .db-autosave-indicator {
        display: none;
    }
    .d3view-dashboard-v2 .db-tab-new-label {
        display: none;
    }
}

@media (max-width: 640px) {
    .d3view-dashboard-v2 .db-stat-card {
        flex: 1 1 100%;
    }
    .d3view-dashboard-v2 .db-cards-item {
        flex: 1 1 100%;
    }
}

/* =========================================================
   DVFIV-1934 — Part 2 Additions
   Added by shashank on 02/28/2026
   Sidebar sections, dark mode alias, BS3 mode, sparklines,
   animations, filter host, settings rows
   ========================================================= */

/* ===== 42. DARK MODE alias (.db-dark = same vars as .db-theme-dark) ===== */

.d3view-dashboard-v2.db-root.db-dark {
    --db-bg-canvas:          #0F172A;
    --db-bg-surface:         #1E293B;
    --db-bg-elevated:        #1E293B;
    --db-bg-sidebar:         #141417;
    --db-bg-sidebar-hover:   rgba(255,255,255,0.07);
    --db-bg-sidebar-active:  rgba(48,72,127,0.22);
    --db-bg-header:          rgba(30,41,59,0.95);
    --db-bg-overlay:         rgba(0,0,0,0.60);

    --db-text-primary:       #F1F5F9;
    --db-text-secondary:     #94A3B8;
    --db-text-muted:         #64748B;
    --db-text-disabled:      #475569;
    --db-text-sidebar:       rgba(255,255,255,0.85);
    --db-text-sidebar-muted: rgba(255,255,255,0.42);

    --db-border:             #334155;
    --db-border-strong:      #475569;

    --db-grad-canvas:        linear-gradient(160deg, #0F172A 0%, #1A2438 100%);
    --db-grad-sidebar:       linear-gradient(180deg, #18181B 0%, #09090B 100%);

    --db-sh-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --db-sh-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -1px rgba(0,0,0,0.20);

    --db-n-50:  #1E293B;
    --db-n-100: #334155;
}

.d3view-dashboard-v2.db-root.db-dark .db-sidebar {
    border-right-color: var(--db-border);
}

/* Dark skeleton shimmer */
.d3view-dashboard-v2.db-root.db-dark .db-stat-skeleton-icon,
.d3view-dashboard-v2.db-root.db-dark .db-stat-skeleton-value,
.d3view-dashboard-v2.db-root.db-dark .db-stat-skeleton-label {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite;
}

.d3view-dashboard-v2.db-root.db-dark .db-topbar,
.d3view-dashboard-v2.db-root.db-dark .db-tab-create-form { background: var(--db-bg-surface); }

.d3view-dashboard-v2.db-root.db-dark .db-tab.is-active {
    background: var(--db-bg-canvas);
    border-color: var(--db-border);
    border-bottom-color: var(--db-bg-canvas);
}

.d3view-dashboard-v2.db-root.db-dark .db-widget-view-modes { background: rgba(255,255,255,0.06); }

.d3view-dashboard-v2.db-root.db-dark .db-widget-view-mode-btn.is-active-mode {
    background: rgba(48,72,127,0.22);
    color: var(--db-brand-light);
}

/* ===== 43. BOOTSTRAP 3 CLASSIC STYLE (.db-theme-bs3) ===== */

.d3view-dashboard-v2.db-root.db-theme-bs3 {
    /* Softer, more traditional colors */
    --db-brand:       #337ab7;
    --db-brand-dark:  #286090;
    --db-brand-light: #5b9bd5;
    --db-brand-pale:  #d9edf7;
    --db-grad-brand:  linear-gradient(135deg, #337ab7 0%, #286090 100%);
    --db-sh-brand:    0 4px 14px rgba(51,122,183,0.30);

    /* Smaller radii — more rectangular BS3 look */
    --db-r-sm:  2px;
    --db-r-md:  4px;
    --db-r-lg:  4px;
    --db-r-xl:  6px;
    --db-r-2xl: 8px;

    /* Slightly stronger borders */
    --db-border: #ddd;
    --db-border-strong: #ccc;
    --db-border-focus: #66afe9;
}

.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-card,
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-stat-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* DVFIV-1934 - added by shashank: Classic mode — Bootstrap-default button appearance */
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-topbar-btn:not(.db-topbar-btn--primary),
.d3view-dashboard-v2.db-root.db-theme-bs3 .btn.btn-outline-on-hover:not(.btn-primary) {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    box-shadow: none;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-topbar-btn:not(.db-topbar-btn--primary):hover,
.d3view-dashboard-v2.db-root.db-theme-bs3 .btn.btn-outline-on-hover:not(.btn-primary):hover {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-topbar-btn:not(.db-topbar-btn--primary).is-active {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-view-mode-btn {
    background-color: #fff;
    border-color: #ccc;
    color: #555;
    box-shadow: none;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-view-mode-btn:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-view-mode-btn.is-active-mode {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-footer-btn {
    background-color: #fff;
    border-color: #ccc;
    color: #555;
    box-shadow: none;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-widget-footer-btn:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-topbar-btn--primary,
.d3view-dashboard-v2.db-root.db-theme-bs3 .btn.btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}
.d3view-dashboard-v2.db-root.db-theme-bs3 .db-topbar-btn--primary:hover,
.d3view-dashboard-v2.db-root.db-theme-bs3 .btn.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
    color: #fff;
}

/* ===== 44. SIDEBAR BODY + SECTIONS (collapsible) ===== */

.d3view-dashboard-v2 .db-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--db-border-strong) transparent;
}

.d3view-dashboard-v2 .db-sidebar-body::-webkit-scrollbar { width: 3px; }
.d3view-dashboard-v2 .db-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-sidebar-body::-webkit-scrollbar-thumb {
    background: var(--db-border-strong);
    border-radius: var(--db-r-full);
}

/* Sidebar brand sub-label */
.d3view-dashboard-v2 .db-sidebar-brand-sub {
    font-size: 10px;
    color: var(--db-text-sidebar-muted);
    white-space: nowrap;
}

/* Collapsible section wrapper */
.d3view-dashboard-v2 .db-sidebar-section {
    border-bottom: 1px solid var(--db-border);
}

/* Section toggle button (always visible) */
.d3view-dashboard-v2 .db-sidebar-section-toggle {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    width: 100%;
    padding: 8px var(--db-sp-3) 8px var(--db-sp-3);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--db-text-sidebar-muted);
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    font-family: var(--db-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: var(--db-t-fast);
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-sidebar-section-toggle:hover {
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
}

.d3view-dashboard-v2 .db-sidebar-section-icon {
    flex-shrink: 0;
}

/* Section chevron rotates when open */
.d3view-dashboard-v2 .db-sidebar-chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--db-t-base);
}

.d3view-dashboard-v2 .db-sidebar-section.is-open .db-sidebar-chevron {
    transform: rotate(180deg);
}

/* Collapsible body */
.d3view-dashboard-v2 .db-sidebar-section-body {
    overflow: hidden;
    max-height: 600px;
    transition: max-height var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar-section-body--collapsed {
    max-height: 0;
}

/* My Dashboards list fills section body */
.d3view-dashboard-v2 .db-sidebar-dash-list {
    padding: var(--db-sp-1) var(--db-sp-2) var(--db-sp-2);
}

/* Compact item variant (recent list) */
.d3view-dashboard-v2 .db-sidebar-dash-item--compact {
    min-height: 30px;
    padding: 5px var(--db-sp-3);
}

/* Library list item */
.d3view-dashboard-v2 .db-sidebar-lib-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 8px var(--db-sp-3);
    cursor: pointer;
    transition: var(--db-t-fast);
    overflow: hidden;
}

.d3view-dashboard-v2 .db-sidebar-lib-item:hover {
    background: var(--db-bg-sidebar-hover);
}

.d3view-dashboard-v2 .db-sidebar-lib-item .db-sidebar-dash-name {
    flex: 1 1 auto;
}

/* Empty hint in sidebar section */
.d3view-dashboard-v2 .db-sidebar-empty-hint {
    font-size: var(--db-fs-xs);
    color: var(--db-text-disabled);
    padding: 6px var(--db-sp-4) 8px;
    font-style: italic;
}

/* Favorite star button — filled when active */
.d3view-dashboard-v2 .db-sidebar-favorite-btn.is-favorited {
    color: #F59E0B;
}

.d3view-dashboard-v2 .db-sidebar-favorite-btn.is-favorited:hover {
    color: #D97706;
}

/* DVFIV-1934 - fixed by shashank: hide section content + labels when collapsed, but keep section toggle icons visible */
.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-section-label,
.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-section-body {
    opacity: 0;
    pointer-events: none;
}

/* Center section toggle icons and hide chevrons in collapsed mode */
.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-section-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-chevron {
    display: none;
}

/* ===== 45. SETTINGS ROWS (sidebar settings section) ===== */

.d3view-dashboard-v2 .db-settings-list {
    padding: var(--db-sp-2) var(--db-sp-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d3view-dashboard-v2 .db-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px var(--db-sp-2);
    border-radius: var(--db-r-md);
    cursor: pointer;
    transition: var(--db-t-fast);
    gap: var(--db-sp-2);
    /* Reset label font to inherit sidebar style */
    font-size: var(--db-fs-sm);
    color: var(--db-text-sidebar);
    user-select: none;
}

.d3view-dashboard-v2 .db-settings-row:hover {
    background: var(--db-bg-sidebar-hover);
}

.d3view-dashboard-v2 .db-settings-row-label {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    flex: 1 1 auto;
    font-size: var(--db-fs-xs);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-sidebar);
    white-space: nowrap;
}

/* Toggle wrap — hides actual checkbox, shows custom track */
.d3view-dashboard-v2 .db-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-toggle-wrap input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Checked state for any toggle in sidebar */
.d3view-dashboard-v2 .db-toggle-wrap input[type=checkbox]:checked + .db-toggle-track {
    background: var(--db-brand);
}

.d3view-dashboard-v2 .db-toggle-wrap input[type=checkbox]:checked + .db-toggle-track .db-toggle-thumb {
    left: 16px;
}

/* ===== 46. TOPBAR ACTIVE STATE for dark/bs3 buttons ===== */

.d3view-dashboard-v2 .db-topbar-btn.is-active {
    background: var(--db-brand-pale);
    color: var(--db-brand);
}

.d3view-dashboard-v2.db-root.db-dark .db-topbar-btn.is-active {
    background: rgba(48,72,127,0.20);
    color: var(--db-brand-light);
}

/* ===== 47. WIDGET FILTER HOST (FilterView container) ===== */

/* DVFIV-1934 - Removed db-widget-filter-host (filters moved to tableDataViewer) */

/* ===== 48. WIDGET FOOTER additions ===== */

.d3view-dashboard-v2 .db-widget-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-sm);
    background: transparent;
    color: var(--db-text-muted);
    font-size: 11px;
    font-family: var(--db-font);
    cursor: pointer;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-widget-footer-btn:hover {
    border-color: var(--db-border-strong);
    color: var(--db-text-primary);
    background: var(--db-n-100);
}

.d3view-dashboard-v2 .db-widget-footer-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
}

.d3view-dashboard-v2 .db-widget-ctrl-sep {
    width: 1px;
    height: 16px;
    background: var(--db-border);
    flex-shrink: 0;
    margin: 0 2px;
}

.d3view-dashboard-v2 .db-widget-initial-loading {
    position: absolute;
    inset: 0;
    background: var(--db-bg-surface);
    z-index: 1;
}

.d3view-dashboard-v2 .db-widget-refresh-time {
    font-size: 10px;
    color: var(--db-text-disabled);
    white-space: nowrap;
}

/* ===== 49. STAT CARD — sparkline + trend + stagger animations ===== */

/* Value row: big number, meta-stats (gap filler), sparkline on right */
.d3view-dashboard-v2 .db-stat-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--db-sp-3);
    margin-top: var(--db-sp-2);
    min-height: 0;
}

.d3view-dashboard-v2 .db-stat-value-row .db-stat-value {
    flex: 0 0 auto;
}

/* DVFIV-1934 - Meta-stats block fills gap between value and sparkline (labels row + values row) */
.d3view-dashboard-v2 .db-stat-meta-stats {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-stat-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}

.d3view-dashboard-v2 .db-stat-meta-row .db-stat-meta-label,
.d3view-dashboard-v2 .db-stat-meta-row .db-stat-meta-value {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.d3view-dashboard-v2 .db-stat-meta-label {
    font-size: 11px;
    font-weight: 600;
    font-variant: small-caps;
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-stat-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--db-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.d3view-dashboard-v2 .db-stat-meta-value .fa {
    font-size: 12px;
    color: var(--db-text-muted);
}

/* Sparkline on the right — in-flow so SVG is visible; fixed width for consistent bar chart */
.d3view-dashboard-v2 .db-stat-sparkline-wrap {
    flex-shrink: 0;
    width: 120px;
    height: 32px;
    pointer-events: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.d3view-dashboard-v2 .db-stat-sparkline-canvas {
    width: 100%;
    height: 28px;
    opacity: 0.65;
    overflow: hidden;
}

/* Trend arrow badge */
.d3view-dashboard-v2 .db-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 5px;
    border-radius: var(--db-r-full);
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-stat-trend--up {
    background: var(--db-success-bg);
    color: var(--db-success-text);
}

.d3view-dashboard-v2 .db-stat-trend--down {
    background: var(--db-danger-bg);
    color: var(--db-danger-text);
}


/* ===== 50. ANIMATIONS — entry, stagger, count pulse ===== */

/* Widget card entrance */
@keyframes db-widget-enter {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.d3view-dashboard-v2 .db-widget-card {
    animation: db-widget-enter 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Stat card entrance — already defined as db-stat-anim/db-fade-slide-up */
/* Stagger nth-child delays */
.d3view-dashboard-v2 .db-stat-card--live:nth-child(1) { animation-delay: 0s; }
.d3view-dashboard-v2 .db-stat-card--live:nth-child(2) { animation-delay: 0.06s; }
.d3view-dashboard-v2 .db-stat-card--live:nth-child(3) { animation-delay: 0.12s; }
.d3view-dashboard-v2 .db-stat-card--live:nth-child(4) { animation-delay: 0.18s; }

/* Sidebar item entrance */
@keyframes db-sidebar-item-enter {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.d3view-dashboard-v2 .db-sidebar-dash-item {
    animation: db-sidebar-item-enter 0.20s ease both;
}

/* Count pulse when value updates */
@keyframes db-count-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.10); color: var(--db-brand); }
    100% { transform: scale(1); }
}

.d3view-dashboard-v2 .db-stat-value--updated {
    animation: db-count-pulse 0.38s ease;
}


/* ===== 45. DASHBOARD HEADER ===== */

.d3view-dashboard-v2 .db-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    /* Header is dashboard-level; background is neutral — the accent strip below carries the cover gradient */
    background: var(--db-bg-surface, #fff);
    gap: 12px;
}
.d3view-dashboard-v2 .db-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-dashboard-v2 .db-header-logo {
    height: 36px;
    width: auto;
    display: block;
}
.d3view-dashboard-v2 .db-all-dashboards-btn {
    flex-shrink: 0;
    color: var(--db-n-400, #94A3B8);
    border-radius: 6px;
}
.d3view-dashboard-v2 .db-header-title {

    font-size: 28px;
    font-weight: 700;
    color: var(--db-n-900);
    margin: 0;
    letter-spacing: -0.5px;
}
.d3view-dashboard-v2 .db-header-subtitle {
    font-size: var(--db-fs-sm);
    color: var(--db-n-400);
    margin: 4px 0 0;
}
/* Advanced mode: purple gradient title */
.d3view-dashboard-v2 .db-mode-advanced .db-header-title {
    background: var(--db-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/* ===== 47. THEME TOKENS ===== */
/*
 * Two-level theming:
 *   --db-cover-gradient  dashboard-level gradient from dashboard.coverStyle
 *                        set once by IndexView._applyDashboardTheme() when a dashboard opens
 *   --db-page-accent     page-level solid color from page.theme
 *                        set per page-switch by DashboardView/AdvancedDashboardView.setPageConfig()
 *                        scoped to the content-area view el, never bleeds into the header
 */
.d3view-dashboard-v2 {
    --db-cover-gradient: linear-gradient(135deg, #F97316, #EF4444); /* default Sunset; overridden per dashboard */
    --db-page-accent: #F97316;                                        /* default; overridden per page */
}

/* Header accent strip — carries the dashboard cover gradient, stable across page switches */
/* Shown when headerStyle is 'border' (class db-header-style-border on root) */
.d3view-dashboard-v2.db-header-style-border .db-header-accent-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--db-cover-gradient);
}

/* Hide accent strip when gradient mode is active */
.d3view-dashboard-v2.db-header-style-gradient .db-header-accent-strip {
    display: none;
}

/* Gradient header — a soft, light gradient overlay on db-dashboard-header */
.d3view-dashboard-v2.db-header-style-gradient .db-dashboard-header {
    background: var(--db-header-gradient, linear-gradient(135deg, rgba(249,115,22,0.12) 0%, rgba(239,68,68,0.06) 100%));
    border-bottom-color: rgba(249,115,22,0.15);
}

/* Dark theme gradient header adjustments */
.d3view-dashboard-v2.db-header-style-gradient.db-theme-dark .db-dashboard-header,
.d3view-dashboard-v2.db-header-style-gradient.db-root.db-theme-dark .db-dashboard-header {
    background: var(--db-header-gradient, linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(239,68,68,0.08) 100%));
    border-bottom-color: rgba(249,115,22,0.2);
}

/* Make header position relative so the strip anchors correctly */
.d3view-dashboard-v2 .db-dashboard-header {
    position: relative;
}

/* Widget card top accent bar reflects the page theme color */
/* .d3view-dashboard-v2 .db-widget-card::before {
    background: var(--db-page-accent);
    transition: background 0.35s ease;
} */

/* Stats row left accent strip */
.d3view-dashboard-v2 #db-stats-row {
    border-left: 3px solid var(--db-page-accent);
    padding-left: 12px;
    transition: border-color 0.35s ease;
}


/* ===== 48. ACTION BAR ===== */

.d3view-dashboard-v2 .db-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    min-height: 48px;
}
.d3view-dashboard-v2 .db-action-bar-simple,
.d3view-dashboard-v2 .db-action-bar-edit,
.d3view-dashboard-v2 .db-action-bar-advanced {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.d3view-dashboard-v2 .db-action-bar-count {
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-semibold);
    color: var(--db-n-700);
}
.d3view-dashboard-v2 .db-action-bar-hint {
    font-size: var(--db-fs-xs);
    color: var(--db-n-400);
}
.d3view-dashboard-v2 .db-action-bar-simple .db-action-bar-right,
.d3view-dashboard-v2 .db-action-bar-edit .db-action-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Edit mode Done button - purple filled */
.d3view-dashboard-v2 .db-done-editing-btn {
    background: var(--db-brand) !important;
    color: #fff !important;
    border-color: var(--db-brand) !important;
    font-weight: var(--db-fw-medium);
}
.d3view-dashboard-v2 .db-done-editing-btn:hover {
    background: var(--db-brand-dark) !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
/* Reset button */
.d3view-dashboard-v2 .db-reset-layout-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* Advanced mode filters */
.d3view-dashboard-v2 .db-action-bar-advanced {
    flex-wrap: wrap;
    gap: 12px;
}
.d3view-dashboard-v2 .db-project-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}
.d3view-dashboard-v2 .db-project-filter-wrap .db-filter-icon {
    color: var(--db-n-400);
}
.d3view-dashboard-v2 .db-advanced-search {
    max-width: 340px;
    width: auto;
    border-radius: 8px !important;
    padding: 7px 12px 7px 32px !important;
    background: var(--db-n-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .db-date-range-wrap {
    margin-left: auto;
}
.d3view-dashboard-v2 .db-date-range-picker {
    border-radius: 8px !important;
    border: 1px solid var(--db-n-200) !important;
    font-size: var(--db-fs-sm) !important;
    padding: 7px 12px !important;
    max-width: 180px;
    cursor: pointer;
}


/* ===== 48. EDIT MODE ===== */

/* Hide drag handle + remove button by default */
.d3view-dashboard-v2 .db-widget-drag-handle,
.d3view-dashboard-v2 .db-widget-remove {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--db-anim-ease);
    display: none;
}
/* Show in edit mode — prominent colors so icons are clearly visible */
.d3view-dashboard-v2 .db-widget-editing .db-widget-drag-handle,
.d3view-dashboard-v2 .db-widget-editing .db-widget-remove {
    opacity: 1;
    pointer-events: auto;
    display: inline-flex;
}
.d3view-dashboard-v2 .db-widget-editing .db-widget-drag-handle {
    color: var(--db-n-600);
    font-size: 16px;
    background: var(--db-n-100);
}
.d3view-dashboard-v2 .db-widget-editing .db-widget-drag-handle:hover {
    color: var(--db-brand);
    background: var(--db-brand-pale);
}
.d3view-dashboard-v2 .db-widget-editing .db-widget-remove {
    color: var(--db-danger);
    font-size: 15px;
    background: var(--db-danger-bg);
    border-radius: var(--db-r-sm);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.d3view-dashboard-v2 .db-widget-editing .db-widget-remove:hover {
    background: var(--db-danger);
    color: #fff;
}
/* Outline on widget being edited via sidebar */
.d3view-dashboard-v2 .db-widget-sidebar-editing {
    outline: 2px solid var(--db-brand);
    outline-offset: -2px;
    border-radius: var(--db-radius);
    z-index: 2;
}
/* No outlines on grid-stack-item — clean look */
/* Drag placeholder */
.d3view-dashboard-v2 .db-edit-active .grid-stack-placeholder > .placeholder-content {
    background: rgba(99,102,241,0.06) !important;
    border: 2px dashed var(--db-brand) !important;
    border-radius: var(--db-radius) !important;
}


/* ===== 48b. STATS OVERVIEW WIDGET CARDS (flex wrap) ===== */

.d3view-dashboard-v2 .db-stats-overview-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px;
    height: 100%;
    align-content: flex-start;
}

/* ===== 49. SIMPLE STATS GRID (Overview Cards in 3x2) ===== */

.d3view-dashboard-v2 .db-stats-grid-3x2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 0 16px;
}

/* 4 stat cards in one row (25% each) — simple dashboard */
.d3view-dashboard-v2 .db-stats-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 0 16px;
}
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.2s var(--db-anim-ease), box-shadow 0.2s var(--db-anim-ease);
    animation: db-slideUp 0.35s var(--db-anim-ease) backwards;
    flex: none;
    min-height: auto;
}
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card:nth-child(1) { animation-delay: 0.03s; }
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card:nth-child(2) { animation-delay: 0.06s; }
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card:nth-child(3) { animation-delay: 0.09s; }
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card:nth-child(4) { animation-delay: 0.12s; }
.d3view-dashboard-v2 .db-stats-grid-4 .db-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
}
@media (max-width: 900px) {
    .d3view-dashboard-v2 .db-stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .d3view-dashboard-v2 .db-stats-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===== COMPACT STAT STRIP (pill bar — simple mode) ===== */

.d3view-dashboard-v2 .db-stats-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--db-bg-surface, #fff);
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 10px;
    padding: 0 4px;
    margin: 0 0 16px;
    height: 40px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    white-space: nowrap;
    position: relative;
    animation: db-fade-slide-up 0.25s ease forwards;
}

/* Divider between pills */
.d3view-dashboard-v2 .db-stat-pill + .db-stat-pill::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--db-border, #e2e8f0);
}

.d3view-dashboard-v2 .db-stat-pill-icon {
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.d3view-dashboard-v2 .db-stat-pill-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--db-text-primary, #1e293b);
    line-height: 1;
}

.d3view-dashboard-v2 .db-stat-pill-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--db-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Skeleton pill placeholder */
.d3view-dashboard-v2 .db-stat-pill--skeleton {
    pointer-events: none;
    gap: 6px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    height: 100%;
}

.d3view-dashboard-v2 .db-stat-pill--skeleton + .db-stat-pill--skeleton::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--db-border, #e2e8f0);
}

.d3view-dashboard-v2 .db-stat-pill--skeleton .db-skel-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--db-n-200, #e2e8f0) 25%, var(--db-n-100, #f1f5f9) 50%, var(--db-n-200, #e2e8f0) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite;
}

.d3view-dashboard-v2 .db-stat-pill--skeleton .db-skel-val {
    width: 28px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--db-n-200, #e2e8f0) 25%, var(--db-n-100, #f1f5f9) 50%, var(--db-n-200, #e2e8f0) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite 0.1s;
}

.d3view-dashboard-v2 .db-stat-pill--skeleton .db-skel-lbl {
    width: 52px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--db-n-200, #e2e8f0) 25%, var(--db-n-100, #f1f5f9) 50%, var(--db-n-200, #e2e8f0) 75%);
    background-size: 200% 100%;
    animation: db-shimmer 1.6s infinite 0.2s;
}

/* Dark theme */
.d3view-dashboard-v2.db-theme-dark .db-stats-strip,
.d3view-dashboard-v2.db-root.db-theme-dark .db-stats-strip {
    background: var(--db-bg-elevated, #1e293b);
    border-color: var(--db-border, #334155);
}

@media (max-width: 640px) {
    .d3view-dashboard-v2 .db-stats-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* DVFIV-1934 - Apply overview card styling to stat cards inside 3x2 grid */
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.2s var(--db-anim-ease), box-shadow 0.2s var(--db-anim-ease);
    animation: db-slideUp 0.35s var(--db-anim-ease) backwards;
    flex: none;
    min-height: auto;
}
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(1) { animation-delay: 0.03s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(2) { animation-delay: 0.06s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(3) { animation-delay: 0.09s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(4) { animation-delay: 0.12s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(5) { animation-delay: 0.15s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:nth-child(6) { animation-delay: 0.18s; }
.d3view-dashboard-v2 .db-stats-grid-3x2 .db-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
}
.d3view-dashboard-v2 .db-overview-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.2s var(--db-anim-ease), box-shadow 0.2s var(--db-anim-ease);
    animation: db-slideUp 0.35s var(--db-anim-ease) backwards;
}
.d3view-dashboard-v2 .db-overview-card:nth-child(1) { animation-delay: 0.03s; }
.d3view-dashboard-v2 .db-overview-card:nth-child(2) { animation-delay: 0.06s; }
.d3view-dashboard-v2 .db-overview-card:nth-child(3) { animation-delay: 0.09s; }
.d3view-dashboard-v2 .db-overview-card:nth-child(4) { animation-delay: 0.12s; }
.d3view-dashboard-v2 .db-overview-card:nth-child(5) { animation-delay: 0.15s; }
.d3view-dashboard-v2 .db-overview-card:nth-child(6) { animation-delay: 0.18s; }
.d3view-dashboard-v2 .db-overview-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
}
/* Gradient bottom border */
.d3view-dashboard-v2 .db-overview-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-gradient, var(--db-brand));
    border-radius: 0 0 12px 12px;
}
.d3view-dashboard-v2 .db-overview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.d3view-dashboard-v2 .db-overview-card-label {

    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--db-n-500);
}
.d3view-dashboard-v2 .db-overview-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
}
.d3view-dashboard-v2 .db-overview-card-count {

    font-size: 36px;
    font-weight: 700;
    color: var(--db-n-900);
    line-height: 1.1;
    margin-bottom: 6px;
}
.d3view-dashboard-v2 .db-overview-card-subtitle {
    font-size: 12px;
    color: var(--db-n-400);
}


/* ===== 50. ADVANCED DASHBOARD LAYOUT ===== */

.d3view-dashboard-v2 .db-advanced-dashboard {
    padding: 0 0 32px;
    animation: db-fadeIn 0.3s var(--db-anim-ease);
}
.d3view-dashboard-v2 .db-advanced-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
/* Floating AI assistant FAB (bottom-right, shown in all modes) */
.d3view-dashboard-v2 .db-ai-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1049;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--db-brand, #6366F1);
    color: #fff;
    border: none;
    box-shadow: 0 4px 16px rgba(99,102,241,0.35);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.d3view-dashboard-v2 .db-ai-fab:hover {
    background: var(--db-brand-dark, #4F46E5);
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(99,102,241,0.45);
}
.d3view-dashboard-v2 .wf-ai-agent-chat-wrapper.wf-ai-fora-standalone .wf-ai-fora {
    z-index: 1050;
}
.d3view-dashboard-v2 .db-panel {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--db-n-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.d3view-dashboard-v2 .db-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--db-n-100);
}
.d3view-dashboard-v2 .db-panel-header h3 {

    font-size: 15px;
    font-weight: 600;
    color: var(--db-n-800);
    margin: 0;
}
.d3view-dashboard-v2 .db-panel-body {
    padding: 20px;
}


/* ===== 51. ADVANCED STAT CARDS (5 horizontal) ===== */

.d3view-dashboard-v2 .db-advanced-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.d3view-dashboard-v2 .db-adv-stat-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--db-n-100);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.2s var(--db-anim-ease), box-shadow 0.2s var(--db-anim-ease);
    animation: db-slideUp 0.35s var(--db-anim-ease) backwards;
}
.d3view-dashboard-v2 .db-adv-stat-card:nth-child(1) { animation-delay: 0.03s; }
.d3view-dashboard-v2 .db-adv-stat-card:nth-child(2) { animation-delay: 0.06s; }
.d3view-dashboard-v2 .db-adv-stat-card:nth-child(3) { animation-delay: 0.09s; }
.d3view-dashboard-v2 .db-adv-stat-card:nth-child(4) { animation-delay: 0.12s; }
.d3view-dashboard-v2 .db-adv-stat-card:nth-child(5) { animation-delay: 0.15s; }
.d3view-dashboard-v2 .db-adv-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}
.d3view-dashboard-v2 .db-adv-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--db-n-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--db-n-500);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-adv-stat-icon .glyphicon {
    font-size: 16px;
}
.d3view-dashboard-v2 .db-adv-stat-info {
    flex: 1;
    min-width: 0;
}
.d3view-dashboard-v2 .db-adv-stat-value {

    font-size: 24px;
    font-weight: 700;
    color: var(--db-n-900);
    line-height: 1.1;
}
.d3view-dashboard-v2 .db-adv-stat-label {
    font-size: 11px;
    color: var(--db-n-400);
    margin-top: 2px;
}
.d3view-dashboard-v2 .db-adv-stat-trend {

    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-adv-stat-trend--up {
    color: #059669;
    background: #ECFDF5;
}
.d3view-dashboard-v2 .db-adv-stat-trend--down {
    color: #DC2626;
    background: #FEF2F2;
}
.d3view-dashboard-v2 .db-adv-stat-trend--flat {
    color: var(--db-n-400);
    background: var(--db-n-50);
}


/* ===== 52. ACTIVITY TIMELINE ===== */

.d3view-dashboard-v2 .db-timeline-chart-container {
    width: 100%;
    height: 280px;
    padding: 16px 20px;
    position: relative;
}
.d3view-dashboard-v2 .db-timeline-chart-container svg {
    width: 100%;
    height: 100%;
}
.d3view-dashboard-v2 .db-timeline-chart-container .db-chart-area {
    fill-opacity: 0.15;
}
.d3view-dashboard-v2 .db-timeline-chart-container .db-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}
.d3view-dashboard-v2 .db-timeline-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 20px 16px;
}
.d3view-dashboard-v2 .db-timeline-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--db-n-500);
}
.d3view-dashboard-v2 .db-timeline-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.d3view-dashboard-v2 .db-timeline-axis text {
    font-size: 11px;
    fill: var(--db-n-400);
}
.d3view-dashboard-v2 .db-timeline-axis .domain,
.d3view-dashboard-v2 .db-timeline-axis line {
    stroke: var(--db-n-200);
}
.d3view-dashboard-v2 .db-timeline-grid line {
    stroke: rgba(148,163,184,0.15);
    stroke-dasharray: 3,3;
}
.d3view-dashboard-v2 .db-timeline-grid .domain {
    display: none;
}
/* Timeline brush selection */
.d3view-dashboard-v2 .db-timeline-brush .selection {
    fill: var(--db-brand, #30487f);
    fill-opacity: 0.12;
    stroke: var(--db-brand, #30487f);
    stroke-opacity: 0.4;
    stroke-width: 1;
}
.d3view-dashboard-v2 .db-timeline-brush .handle {
    fill: var(--db-brand, #30487f);
    fill-opacity: 0.6;
    width: 4px;
    rx: 2;
}
.d3view-dashboard-v2 .db-timeline-brush .overlay {
    cursor: crosshair;
}


/* ===== 53. AI CHAT PANEL ===== */

.d3view-dashboard-v2 .db-ai-chat-panel {
    display: flex;
    flex-direction: column;
    height: 380px;
}
.d3view-dashboard-v2 .db-ai-chat-panel .db-panel-header {
    flex-shrink: 0;
}
.d3view-dashboard-v2 *,
.d3view-dashboard-v2 *::before,
.d3view-dashboard-v2 *::after {
    box-sizing: border-box;
}

.d3view-dashboard-v2 {
    font-family: var(--db-font);
    font-size: var(--db-fs-base);
    color: var(--db-text-primary);
    line-height: var(--db-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 3. APP SHELL ===== */

/* .d3view-dashboard-v2 is the IndexView's el — it IS the app shell.
   DVFIV-1934 - Updated on 03/04/2026 - Changed to column layout (sidebar removed) */
.d3view-dashboard-v2 {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: var(--db-grad-canvas); */
}

/* Legacy alias kept for clarity */
.d3view-dashboard-v2 .db-app-shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--db-grad-canvas);
    position: relative;
    overflow: hidden;
}

/* ===== 4. SIDEBAR ===== */

.d3view-dashboard-v2 .db-sidebar {
    width: var(--db-sidebar-w);
    min-width: var(--db-sidebar-w);
    height: 100%;
    background: var(--db-bg-sidebar);
    border-right: 1px solid var(--db-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: var(--db-z-raised);
    transition: width var(--db-t-slow);
    overflow: hidden;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed {
    width: var(--db-sidebar-min);
    min-width: var(--db-sidebar-min);
}

/* Sidebar brand header */
.d3view-dashboard-v2 .db-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--db-sp-3);
    padding: var(--db-sp-4) var(--db-sp-4) var(--db-sp-3);
    height: var(--db-header-h);
    border-bottom: 1px solid var(--db-border);
    flex-shrink: 0;
    text-decoration: none;
}

.d3view-dashboard-v2 .db-sidebar-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--db-grad-brand);
    border-radius: var(--db-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--db-sh-brand);
}

.d3view-dashboard-v2 .db-sidebar-brand-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.d3view-dashboard-v2 .db-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-brand-text {
    opacity: 0;
    width: 0;
}

.d3view-dashboard-v2 .db-sidebar-brand-name {
    font-size: var(--db-fs-md);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-inverse);
    line-height: 1.2;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-sidebar-brand-tagline {
    font-size: var(--db-fs-xs);
    color: var(--db-text-sidebar-muted);
    white-space: nowrap;
}

/* Sidebar section label */
.d3view-dashboard-v2 .db-sidebar-section-label {
    font-size: 10px;
    font-weight: var(--db-fw-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--db-text-sidebar-muted);
    padding: var(--db-sp-4) var(--db-sp-4) var(--db-sp-1);
    white-space: nowrap;
    overflow: hidden;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-section-label {
    opacity: 0;
}

/* Sidebar dashboard list */
.d3view-dashboard-v2 .db-sidebar-dash-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--db-sp-1) var(--db-sp-2) var(--db-sp-2);
    scrollbar-width: thin;
    scrollbar-color: var(--db-border-strong) transparent;
}

.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar {
    width: 4px;
}
.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-sidebar-dash-list::-webkit-scrollbar-thumb {
    background: var(--db-border-strong);
    border-radius: var(--db-r-full);
}

/* Sidebar dashboard item */
.d3view-dashboard-v2 .db-sidebar-dash-item {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 7px var(--db-sp-3);
    border-radius: var(--db-r-md);
    cursor: pointer;
    position: relative;
    transition: var(--db-t-fast);
    min-height: 36px;
    margin-bottom: 2px;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-sidebar-dash-item:hover {
    background: var(--db-bg-sidebar-hover);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active {
    background: var(--db-bg-sidebar-active);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--db-brand);
    border-radius: 0 var(--db-r-sm) var(--db-r-sm) 0;
}

.d3view-dashboard-v2 .db-sidebar-dash-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--db-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-sidebar-dash-item.is-active .db-sidebar-dash-icon {
    background: rgba(48,72,127,0.30);
    color: var(--db-brand-light);
}

.d3view-dashboard-v2 .db-sidebar-dash-name {
    flex: 1 1 auto;
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    color: var(--db-text-sidebar);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--db-t-slow);
}

.d3view-dashboard-v2 .db-sidebar.is-collapsed .db-sidebar-dash-name {
    opacity: 0;
    width: 0;
}

.d3view-dashboard-v2 .db-sidebar-dash-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-sidebar-dash-item:hover .db-sidebar-dash-actions {
    opacity: 1;
}

.d3view-dashboard-v2 .db-sidebar-icon-btn {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--db-text-sidebar-muted);
    border-radius: var(--db-r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--db-t-fast);
    font-size: 11px;
    padding: 0;
}

.d3view-dashboard-v2 .db-sidebar-icon-btn:hover {
    background: var(--db-bg-sidebar-hover);
    color: var(--db-text-sidebar);
}

.d3view-dashboard-v2 .db-sidebar-icon-btn.is-danger:hover {
    background: rgba(239,68,68,0.18);
    color: #FCA5A5;
}

/* Sidebar new dashboard button */
.d3view-dashboard-v2 .db-sidebar-new-btn {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 8px var(--db-sp-3);
    margin: var(--db-sp-2);
    border-radius: var(--db-r-md);
    border: 1px dashed var(--db-border-strong);
    cursor: pointer;
    transition: var(--db-t-fast);
    text-decoration: none;
    color: var(--db-text-sidebar-muted);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    background: transparent;
    width: calc(100% - 16px);
}

.d3view-dashboard-v2 .db-sidebar-new-btn:hover {
    border-color: rgba(48,72,127,0.5);
    color: var(--db-brand-light);
    background: rgba(48,72,127,0.08);
}

/* Sidebar collapse toggle */
.d3view-dashboard-v2 .db-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--db-text-sidebar-muted);
    cursor: pointer;
    border-top: 1px solid var(--db-border);
    transition: var(--db-t-fast);
    font-size: 14px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-sidebar-toggle:hover {
    color: var(--db-text-sidebar);
    background: var(--db-bg-sidebar-hover);
}

/* ===== 5. MAIN AREA ===== */

.d3view-dashboard-v2 .db-main-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* ===== 6. HEADER ===== */

.d3view-dashboard-v2 .db-header {
    height: var(--db-header-h);
    background: var(--db-bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--db-border);
    display: flex;
    align-items: center;
    padding: 0 var(--db-sp-5);
    gap: var(--db-sp-3);
    flex-shrink: 0;
    position: relative;
    z-index: var(--db-z-raised);
}

.d3view-dashboard-v2 .db-header-dash-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
}

.d3view-dashboard-v2 .db-header-dash-name {
    font-size: var(--db-fs-lg);
    font-weight: var(--db-fw-semi);
    color: var(--db-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: var(--db-r-sm);
    transition: var(--db-t-fast);
    border: 1px solid transparent;
    outline: none;
}

.d3view-dashboard-v2 .db-header-dash-name:hover {
    background: var(--db-n-100);
}

.d3view-dashboard-v2 .db-header-dash-name:focus {
    border-color: var(--db-border-focus);
    background: var(--db-bg-surface);
    box-shadow: 0 0 0 3px rgba(48,72,127,0.12);
}

.d3view-dashboard-v2 .db-header-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
    font-size: var(--db-fs-sm);
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-header-breadcrumb a {
    color: var(--db-text-muted);
    text-decoration: none;
    transition: var(--db-t-fast);
}

.d3view-dashboard-v2 .db-header-breadcrumb a:hover {
    color: var(--db-text-brand);
}

.d3view-dashboard-v2 .db-header-breadcrumb-sep {
    font-size: 10px;
    color: var(--db-text-disabled);
}

.d3view-dashboard-v2 .db-header-actions {
    display: flex;
    align-items: center;
    gap: var(--db-sp-2);
    flex-shrink: 0;
}

/* Header buttons */
.d3view-dashboard-v2 .db-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--db-sp-2);
    padding: 6px 14px;
    border-radius: var(--db-r-md);
    font-size: var(--db-fs-sm);
    font-weight: var(--db-fw-medium);
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--db-t-fast);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    height: 32px;
    font-family: var(--db-font);
}

.d3view-dashboard-v2 .db-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(48,72,127,0.18);
}

.d3view-dashboard-v2 .db-btn-primary {
    background: var(--db-grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--db-sh-brand);
}

.d3view-dashboard-v2 .db-btn-primary:hover {
    background: var(--db-brand-dark);
    box-shadow: 0 4px 16px rgba(48,72,127,0.40);
    transform: translateY(-1px);
    color: #fff;
}

.d3view-dashboard-v2 .db-btn-primary:active {
    transform: translateY(0);
}

.d3view-dashboard-v2 .db-btn-secondary {
    background: var(--db-bg-surface);
    color: var(--db-text-secondary);
    border-color: var(--db-border);
    box-shadow: var(--db-sh-xs);
}

.d3view-dashboard-v2 .db-btn-secondary:hover {
    border-color: var(--db-border-strong);
    color: var(--db-text-primary);
    background: var(--db-n-50);
}

.d3view-dashboard-v2 .db-btn-ghost {
    background: transparent;
    color: var(--db-text-secondary);
    border-color: transparent;
}

.d3view-dashboard-v2 .db-btn-ghost:hover {
    background: var(--db-n-100);
    color: var(--db-text-primary);
}

.d3view-dashboard-v2 .db-btn-danger {
    background: var(--db-danger);
    color: #fff;
    border-color: transparent;
}

.d3view-dashboard-v2 .db-btn-danger:hover {
    background: #DC2626;
    color: #fff;
}

.d3view-dashboard-v2 .db-btn-sm {
    padding: 4px 10px;
    height: 26px;
    font-size: var(--db-fs-xs);
}

.d3view-dashboard-v2 .db-btn-icon {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--db-r-md);
    justify-content: center;
}

.d3view-dashboard-v2 .db-btn-icon.db-btn-sm {
    width: 26px;
    height: 26px;
}

/* Divider */
.d3view-dashboard-v2 .db-header-divider {
    width: 1px;
    height: 20px;
    background: var(--db-border);
}

/* Autosave status */
.d3view-dashboard-v2 .db-autosave-status {
    display: flex;
    align-items: center;
    gap: var(--db-sp-1);
    font-size: var(--db-fs-xs);
    color: var(--db-text-muted);
}

.d3view-dashboard-v2 .db-autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--db-r-full);
    background: var(--db-success);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-autosave-dot.is-saving {
    background: var(--db-warning);
    animation: db-pulse 1s ease infinite;
}

/* ===== 7. CONTENT / CANVAS ===== */

/* DashboardView el — fills the content area */
.d3view-dashboard-v2 .db-dashboard-canvas {
    width: 100%;
    min-height: 100%;
    overflow: auto;
}

/* Hidden dashboards keep their DOM but are invisible */
.d3view-dashboard-v2 .db-dashboard-canvas[style*="display: none"],
.d3view-dashboard-v2 .db-dashboard-canvas[style*="display:none"] {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
}

.d3view-dashboard-v2 .db-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Added by shashank2104 on 2026-07-15 - R2026-38 - G3: tighten outer canvas padding 20px -> 4px */
    padding: var(--db-sp-1);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300) transparent;
}

.d3view-dashboard-v2 .db-content::-webkit-scrollbar { width: 6px; }
.d3view-dashboard-v2 .db-content::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .db-content::-webkit-scrollbar-thumb {
    background: var(--db-n-300);
    border-radius: var(--db-r-full);
}

/* ===== 8. GRIDSTACK OVERRIDES ===== */
/* GridStack layout (width/left/height/top) comes from plugins.lib.css; do not set width on .grid-stack-item here so data-gs-width rules apply */

.d3view-dashboard-v2 .grid-stack {
    background: transparent;
}

.d3view-dashboard-v2 .grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-radius: var(--db-r-lg);
    overflow: hidden;
    /* leave width to gridstack; content fills cell via position absolute */
    /* Added by shashank2104 on 2026-07-15 - R2026-38 - G4: override gridstack's injected inset (top/right/bottom/left)
       so left/right sit flush at 0 while top/bottom keep the 12px row gap. Kept in sync with the
       byte-identical duplicate in d3viewdashboard-v2-02-base-layout.css (~line 616) — update both. */
    inset: 12px 0px;
}

.d3view-dashboard-v2 .grid-stack-placeholder > .placeholder-content {
    background: var(--db-brand-pale);
    border: 2px dashed var(--db-brand-light);
    border-radius: var(--db-r-lg);
    opacity: 0.7;
}

.d3view-dashboard-v2 .grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: var(--db-sh-xl);
    transform: rotate(1deg) scale(1.01);
    opacity: 0.92;
    cursor: grabbing;
}

/* ===== 9. WIDGET CARD ===== */

/* Override workflow's position:fixed when embedded in dashboard */
.d3view-dashboard-v2 div.workflow.workflow {
    position: relative !important;
    z-index: unset !important;
}

.d3view-dashboard-v2 .wf-agentic-view .agent-header {
    /* display: none!important; */
}
.d3view-dashboard-v2 .db-ai-chat-panel .db-panel-header h3::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--db-gradient-primary);
    margin-right: 8px;
    vertical-align: middle;
}
.d3view-dashboard-v2 .db-ai-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: unset !important;
}
.d3view-dashboard-v2 .db-ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-200) transparent;
}
.d3view-dashboard-v2 .db-ai-chat-greeting {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.d3view-dashboard-v2 .db-ai-chat-greeting-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--db-gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-ai-chat-greeting-bubble {
    background: var(--db-n-50);
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--db-n-700);
    max-width: 85%;
    line-height: 1.5;
}
.d3view-dashboard-v2 .db-ai-chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--db-n-100);
    background: var(--db-n-50);
}
.d3view-dashboard-v2 .db-ai-chat-input {
    flex: 1;
    border: 1px solid var(--db-n-200);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.d3view-dashboard-v2 .db-ai-chat-input:focus {
    border-color: var(--db-brand);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.d3view-dashboard-v2 .db-ai-chat-input::placeholder {
    color: var(--db-n-400);
}
.d3view-dashboard-v2 .db-ai-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--db-brand);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-ai-chat-send:hover {
    background: var(--db-brand-dark);
    transform: scale(1.05);
}
.d3view-dashboard-v2 .db-ai-chat-send .fa {
    font-size: 14px;
}


/* ===== 54. WIDGET MARKETPLACE UPDATES ===== */

.d3view-dashboard-v2 .db-palette-panel .db-palette-header-title {

    font-size: 18px;
    font-weight: 700;
}
/* Updated 03/16/2026 - search moved to header (fixed 300px pill); icon at left:10px; cat label padding from -03 */
.d3view-dashboard-v2 .db-palette-search {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.d3view-dashboard-v2 .db-palette-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    color: var(--db-n-400);
    font-size: 11px;
    pointer-events: none;
}
.d3view-dashboard-v2 .db-palette-item-size {
    font-size: 11px;
    color: var(--db-n-400);
    background: var(--db-n-100);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}
.d3view-dashboard-v2 .db-palette-add-btn.is-added {
    color: var(--db-brand);
}
.d3view-dashboard-v2 .db-palette-add-btn.is-added .db-icon-plus {
    display: none;
}
.d3view-dashboard-v2 .db-palette-add-btn.is-added .db-icon-check {
    display: inline;
}
.d3view-dashboard-v2 .db-palette-add-btn .db-icon-check {
    display: none;
}

/* ===== 54b. STATUS BREAKDOWN (stat cards) ===== */

.d3view-dashboard-v2 .db-stat-status-breakdown {
    font-size: 11px;
    color: var(--db-n-400);
    margin-top: 4px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 54c. PANEL HEADER CONTROLS ===== */

.d3view-dashboard-v2 .db-panel-header-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.d3view-dashboard-v2 .btn.is-active {
    background: var(--db-brand)!important;
    color: #fff!important;
    border-color: var(--db-brand);
}

/* ===== 54d. TIMELINE TABLE VIEW ===== */

.d3view-dashboard-v2 .db-timeline-table-container {
    padding: 16px 20px;
    overflow: auto;
    max-height: 300px;
}
.d3view-dashboard-v2 .db-timeline-table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--db-fs-sm);
}
.d3view-dashboard-v2 .db-timeline-table-container th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--db-n-200);
    color: var(--db-n-600);
    font-weight: var(--db-fw-semi);
    font-size: var(--db-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.d3view-dashboard-v2 .db-timeline-table-container td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--db-n-100);
    color: var(--db-n-700);
}

/* ===== 54e. ADVANCED WIDGETS AREA ===== */

.d3view-dashboard-v2 .db-advanced-widgets-area {
    margin-top: 20px;
}
.d3view-dashboard-v2 .db-advanced-widgets-header {
    margin-bottom: 12px;
}
.d3view-dashboard-v2 .db-advanced-widgets-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--db-n-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-dashboard-v2 .db-advanced-widgets-header h3 .fa {
    color: var(--db-n-400);
}
.d3view-dashboard-v2 .db-advanced-gridstack-wrap {
    min-height: 200px;
}

/* ===== 54f. GRID STACK ITEM — No outlines ===== */

.d3view-dashboard-v2 .grid-stack > .grid-stack-item {
    outline: none !important;
    border: none;
}
.d3view-dashboard-v2 .grid-stack > .grid-stack-item:hover {
    outline: none !important;
}
.d3view-dashboard-v2 .db-edit-active .grid-stack-item-content {
    outline: 2px dashed #428bca !important;
    outline-offset: 0px;
    border-radius: 8px;
    transition: outline-color 0.15s;
}
.d3view-dashboard-v2 .db-edit-active .grid-stack-item:hover > .grid-stack-item-content {
    outline-color: var(--db-brand, #30487f) !important;
}


/* ===== 55. ANIMATIONS ===== */

@keyframes db-slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes db-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes db-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes db-pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
@keyframes db-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
/* Mode switch cross-fade */
.d3view-dashboard-v2 .db-mode-transition-enter {
    animation: db-fadeIn 0.25s var(--db-anim-ease);
}
.d3view-dashboard-v2 .db-mode-transition-exit {
    animation: db-fadeIn 0.25s var(--db-anim-ease) reverse;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .d3view-dashboard-v2 .db-overview-card,
    .d3view-dashboard-v2 .db-adv-stat-card,
    .d3view-dashboard-v2 .db-mode-transition-enter,
    .d3view-dashboard-v2 .db-mode-transition-exit {
        animation: none !important;
    }
    .d3view-dashboard-v2 .db-overview-card:hover,
    .d3view-dashboard-v2 .db-adv-stat-card:hover {
        transform: none !important;
    }
}


/* ===== 56. SELECT2 + DATERANGEPICKER OVERRIDES ===== */

/* Select2 overrides for project filter */
.d3view-dashboard-v2 .db-action-bar-advanced .select2-container {
    min-width: 200px;
}
.d3view-dashboard-v2 .db-action-bar-advanced .select2-choice {
    border-radius: 8px !important;
    border: 1px solid var(--db-n-200) !important;
    padding: 6px 12px !important;
    font-size: var(--db-fs-sm) !important;
    background: var(--db-n-50) !important;
    height: auto !important;
    line-height: 1.5 !important;
}
.d3view-dashboard-v2 .db-action-bar-advanced .select2-choice:hover,
.d3view-dashboard-v2 .db-action-bar-advanced .select2-container-active .select2-choice {
    border-color: var(--db-brand) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}
.d3view-dashboard-v2 .db-action-bar-advanced .select2-drop {
    border-radius: 8px !important;
    border: 1px solid var(--db-n-200) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
    margin-top: 4px !important;
}
.d3view-dashboard-v2 .db-action-bar-advanced .select2-results .select2-highlighted {
    background: rgba(99,102,241,0.08) !important;
    color: var(--db-brand) !important;
}
/* DateRangePicker overrides — modern, readable styling */
.daterangepicker {
    border-radius: var(--d3v-r-lg, 12px) !important;
    border: 1px solid var(--d3v-border, #e2e8f0) !important;
    box-shadow: var(--d3v-sh-lg, 0 10px 30px rgba(0,0,0,0.14)) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--d3v-text-primary, #1e293b) !important;
    padding: 0 !important;
    background: var(--d3v-bg-primary, #fff) !important;
}
/* Hide the caret arrows */
.daterangepicker:before,
.daterangepicker:after { display: none !important; }

/* ---- Ranges sidebar (preset list) ---- */
.daterangepicker .ranges { padding: 8px 0; }
.daterangepicker .ranges ul { padding: 4px 8px; }
.daterangepicker .ranges li {
    font-size: 13px !important;
    font-weight: 500;
    padding: 8px 14px !important;
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-primary, #1e293b);
    transition: background var(--d3v-t-fast, 0.12s), color var(--d3v-t-fast, 0.12s);
    margin-bottom: 2px;
}
.daterangepicker .ranges li:hover {
    background: var(--d3v-bg-hover, #e2e8f0) !important;
    color: var(--d3v-text-primary, #1e293b);
}
.daterangepicker .ranges li.active {
    background: var(--d3v-accent, #3b82f6) !important;
    color: var(--d3v-text-inverse, #fff) !important;
    font-weight: 600;
}

/* ---- Calendar header (month/year selects) ---- */
.daterangepicker .calendar-table th.month { font-weight: 600; font-size: 13px; }
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    font-size: 12px !important;
    padding: 4px 6px !important;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-primary, #1e293b);
    outline: none;
    cursor: pointer;
    height: auto;
}
.daterangepicker select.monthselect:focus,
.daterangepicker select.yearselect:focus {
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
}

/* ---- Calendar day cells ---- */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    font-size: 12px !important;
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    border-radius: var(--d3v-r-md, 8px) !important;
    border: none !important;
}
/* Day-of-week headers */
.daterangepicker .calendar-table thead th {
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 600;
    font-size: 11px !important;
    text-transform: uppercase;
}
/* Hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background: var(--d3v-bg-hover, #e2e8f0) !important;
    border-color: transparent !important;
}
/* In-range */
.daterangepicker td.in-range {
    background: rgba(59,130,246,0.08) !important;
    color: var(--d3v-text-primary, #1e293b) !important;
    border-radius: 0 !important;
}
/* Start/end date pills */
.daterangepicker td.start-date { border-radius: var(--d3v-r-md, 8px) 0 0 var(--d3v-r-md, 8px) !important; }
.daterangepicker td.end-date   { border-radius: 0 var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 !important; }
.daterangepicker td.start-date.end-date { border-radius: var(--d3v-r-md, 8px) !important; }
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--d3v-accent, #3b82f6) !important;
    color: var(--d3v-text-inverse, #fff) !important;
    font-weight: 600;
}
/* Off-month days */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: var(--d3v-text-muted, #94a3b8) !important;
    background: transparent !important;
}
/* Disabled */
.daterangepicker td.disabled { color: var(--d3v-n-300, #cbd5e1) !important; }

/* ---- Prev/Next arrows ---- */
.daterangepicker .calendar-table .prev span,
.daterangepicker .calendar-table .next span {
    border-color: var(--d3v-text-secondary, #475569) !important;
    border-width: 0 2px 2px 0 !important;
    padding: 3px !important;
}

/* ---- Buttons bar (Apply / Cancel) ---- */
.daterangepicker .drp-buttons {
    border-top: 1px solid var(--d3v-border, #e2e8f0) !important;
    padding: 10px 12px !important;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: 0 0 var(--d3v-r-lg, 12px) var(--d3v-r-lg, 12px);
}
.daterangepicker .drp-selected {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}
.daterangepicker .drp-buttons .btn {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-radius: var(--d3v-r-md, 8px) !important;
    transition: background var(--d3v-t-fast, 0.12s), box-shadow var(--d3v-t-fast, 0.12s);
}
.daterangepicker .drp-buttons .cancelBtn {
    background: var(--d3v-bg-secondary, #f8fafc) !important;
    border: 1px solid var(--d3v-border, #e2e8f0) !important;
    color: var(--d3v-text-secondary, #475569) !important;
}
.daterangepicker .drp-buttons .cancelBtn:hover {
    background: var(--d3v-bg-hover, #e2e8f0) !important;
}
.daterangepicker .drp-buttons .applyBtn {
    background: var(--d3v-accent, #3b82f6) !important;
    border: 1px solid var(--d3v-accent, #3b82f6) !important;
    color: var(--d3v-text-inverse, #fff) !important;
}
.daterangepicker .drp-buttons .applyBtn:hover {
    background: var(--d3v-accent-hover, #2563eb) !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}

/* ---- Calendar borders between left/right ---- */
.daterangepicker .drp-calendar.left { padding: 12px 4px 12px 12px !important; }
.daterangepicker .drp-calendar.right { padding: 12px 12px 12px 4px !important; }
.daterangepicker .calendar-table {
    border: none !important;
    background: transparent !important;
}
/* Separator between ranges sidebar and calendar */
.daterangepicker.show-ranges.ltr .drp-calendar.left,
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left: 1px solid var(--d3v-border, #e2e8f0) !important;
}


/* ===== 57. RESPONSIVE ===== */

@media (max-width: 1200px) {
    .d3view-dashboard-v2 .db-ai-fab {
        bottom: 16px;
        right: 16px;
    }
}
@media (max-width: 1024px) {
    .d3view-dashboard-v2 .db-stats-grid-3x2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .d3view-dashboard-v2 .db-advanced-stats-row {
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }
    .d3view-dashboard-v2 .db-adv-stat-card {
        min-width: 160px;
        flex-shrink: 0;
    }
    .d3view-dashboard-v2 .db-dashboard-header {
        padding: 10px 16px;
    }
    .d3view-dashboard-v2 .db-stats-grid-3x2 {
        padding: 0 20px 12px;
    }
    .d3view-dashboard-v2 .db-advanced-dashboard {
        padding: 0 20px 20px;
    }
}
@media (max-width: 768px) {
    .d3view-dashboard-v2 .db-stats-grid-3x2 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .d3view-dashboard-v2 .db-overview-card {
        padding: 14px 16px;
    }
    .d3view-dashboard-v2 .db-overview-card-count {
        font-size: 28px;
    }
    .d3view-dashboard-v2 .db-header-title {
        font-size: 22px;
    }
    .d3view-dashboard-v2 .db-dashboard-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
    }
    .d3view-dashboard-v2 .db-header-right {
        flex-wrap: wrap;
    }
    .d3view-dashboard-v2 .db-advanced-stats-row {
        gap: 10px;
    }
    .d3view-dashboard-v2 .db-adv-stat-card {
        padding: 12px 14px;
    }
    .d3view-dashboard-v2 .db-adv-stat-value {
        font-size: 20px;
    }
}
/* Hidden utility */
.d3view-dashboard-v2 .db-hidden { display: none !important; }


/* ===== 58. TOGGLE SWITCH (from dashboard-v2.tpl) ===== */
.d3view-dashboard-v2 .db-toggle-label { display: inline-flex; align-items: center; cursor: pointer; }
.d3view-dashboard-v2 .db-toggle-label input { display: none; }
.d3view-dashboard-v2 .db-toggle-track {
    width: 30px;
    height: 16px;
    background: var(--db-n-300);
    border-radius: var(--db-r-full);
    position: relative;
    transition: var(--db-t-fast);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-toggle-label input:checked ~ .db-toggle-track {
    /* Optional per-instance ON color via --db-toggle-on (e.g. group-tinted switches);
       defaults to --db-brand so every existing consumer is unchanged. R2026-31. */
    background: var(--db-toggle-on, var(--db-brand));
}
.d3view-dashboard-v2 .db-toggle-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: var(--db-t-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.d3view-dashboard-v2 .db-toggle-label input:checked ~ .db-toggle-track .db-toggle-thumb {
    transform: translateX(14px);
}


/* ===== 59. PALETTE FOOTER + CREATE FORM + SETTINGS (split templates) ===== */
.d3view-dashboard-v2 .db-palette-footer-help {
    padding: var(--db-sp-3) var(--db-sp-4);
    border-top: 1px solid var(--db-border);
    font-size: 11px;
    color: var(--db-text-muted);
    line-height: 1.5;
}

.d3view-dashboard-v2 .db-create-dashboard-form-wrap { padding: 4px 0; }
.d3view-dashboard-v2 .db-create-field { margin-bottom: 20px; }
.d3view-dashboard-v2 .db-create-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-dashboard-v2 .db-create-label .db-required { color: var(--db-danger); }
.d3view-dashboard-v2 .db-create-dash-name { height: 38px; font-size: 13px; }
.d3view-dashboard-v2 .db-create-dash-desc { font-size: 13px; resize: none; }
.d3view-dashboard-v2 .db-layout-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.d3view-dashboard-v2 .db-layout-option {
    border: 2px solid var(--db-border);
    border-radius: 8px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.d3view-dashboard-v2 .db-layout-option.is-selected { border-color: var(--db-brand); }
.d3view-dashboard-v2 .db-layout-option input { display: none; }
.d3view-dashboard-v2 .db-layout-icon { font-size: 20px; margin-bottom: 4px; opacity: 0.6; }
.d3view-dashboard-v2 .db-layout-name { font-size: 11px; font-weight: 600; color: var(--db-text-secondary); }

.d3view-dashboard-v2 .db-settings-title-flex { flex: 1; }
.d3view-dashboard-v2 .db-settings-select { cursor: pointer; }
.d3view-dashboard-v2 .db-settings-actions-sep {
    padding-top: var(--db-sp-2);
    border-top: 1px solid var(--db-border);
    margin-top: var(--db-sp-2);
}
.d3view-dashboard-v2 .db-settings-btn-full { width: 100%; justify-content: center; }
.d3view-dashboard-v2 .db-settings-btn-ghost { color: var(--db-text-muted); }

.d3view-dashboard-v2 .db-filter-chip-label { font-weight: 600; opacity: 0.8; }

/* ===== OPERATIONS CENTER: Split View ===== */

.d3view-dashboard-v2 .db-splitview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-splitview-top {
    flex: 0 0 40%;
    min-height: 120px;
    overflow: hidden;
    padding: 4px;
}

.d3view-dashboard-v2 .db-splitview-divider {
    height: 1px;
    background: var(--db-border, #E2E8F0);
    margin: 0 8px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-splitview-bottom {
    flex: 1 1 60%;
    overflow-y: auto;
    padding: 4px 8px;
}

.d3view-dashboard-v2 .db-splitview-mini-table {
    font-size: 12px;
    margin-bottom: 0;
}

.d3view-dashboard-v2 .db-splitview-mini-table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--db-text-muted, #64748B);
    font-weight: 600;
    border-bottom-width: 1px;
    padding: 4px 6px;
}

.d3view-dashboard-v2 .db-splitview-mini-table td {
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    border-top: 1px solid var(--db-border, #F1F5F9);
}

/* ===== OPERATIONS CENTER: HPC Status ===== */

.d3view-dashboard-v2 .db-hpc-status-container {
    padding: 8px;
    overflow-y: auto;
    height: 100%;
}

.d3view-dashboard-v2 .db-hpc-server-row {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--db-border, #E2E8F0);
}

.d3view-dashboard-v2 .db-hpc-server-row:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-hpc-server-name {
    font-size: 13px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .db-hpc-server-name i {
    color: var(--db-brand, #30487f);
}

.d3view-dashboard-v2 .db-hpc-cores-row {
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .db-hpc-label {
    font-size: 11px;
    color: var(--db-text-muted, #64748B);
    display: block;
    margin-bottom: 2px;
}

.d3view-dashboard-v2 .db-hpc-utilization-bar {
    height: 18px;
    margin-bottom: 4px;
    border-radius: 3px;
}

.d3view-dashboard-v2 .db-hpc-utilization-bar .progress-bar {
    font-size: 10px;
    line-height: 18px;
}

.d3view-dashboard-v2 .db-hpc-jobs-row {
    display: flex;
    gap: 6px;
}

.d3view-dashboard-v2 .db-hpc-jobs-row .label {
    font-size: 11px;
    padding: 3px 8px;
}

.d3view-dashboard-v2 .db-hpc-recent-jobs {
    margin-top: 8px;
}

.d3view-dashboard-v2 .db-hpc-recent-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--db-text-muted, #64748B);
    font-weight: 600;
    margin-bottom: 4px;
}

/* ===== OPERATIONS CENTER: Alerts Strip ===== */

.d3view-dashboard-v2 .db-alerts-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--db-bg-elevated, #FFFBEB);
    border: 1px solid #FDE68A;
    border-radius: var(--db-r-md, 6px);
    margin: 0 16px 8px;
    font-size: 12px;
    transition: all 0.25s ease;
    overflow-x: auto;
}

.d3view-dashboard-v2 .db-alerts-strip.db-hidden {
    display: none;
}

.d3view-dashboard-v2 .db-alert-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
}

.d3view-dashboard-v2 .db-alert-item--danger {
    color: var(--db-danger, #EF4444);
    background: rgba(239, 68, 68, 0.08);
}

.d3view-dashboard-v2 .db-alert-item--warning {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.08);
}

.d3view-dashboard-v2 .db-alert-item--success {
    color: #10B981;
    background: rgba(16, 185, 129, 0.08);
}

.d3view-dashboard-v2 .db-alerts-dismiss {
    margin-left: auto;
    flex-shrink: 0;
}

/* FAB state: chat is open */
.d3view-dashboard-v2 .db-ai-fab--active {
    box-shadow: 0 4px 16px rgba(99,102,241,0.45), 0 0 0 3px rgba(99,102,241,0.2);
}
/* FAB state: chat is minimized — amber pulse badge + chevron-up hint */
.d3view-dashboard-v2 .db-ai-fab--minimized::before {
    content: '\f106';
    font-family: FontAwesome;
    font-size: 10px;
    position: absolute;
    top: 2px;
    right: 5px;
    color: rgba(255,255,255,0.8);
    pointer-events: none;
}
.d3view-dashboard-v2 .db-ai-fab--minimized::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid #fff;
    animation: db-ai-fab-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes db-ai-fab-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.3); opacity: 0.7; }
}

/* ── View mode buttons (always-visible group in widget header) ──── */
.d3view-dashboard-v2 .db-widget-view-btns {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    margin-left: auto;
}

.d3view-dashboard-v2 .db-widget-view-btns .db-widget-view-mode-btn {
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 4px;
    color: var(--db-n-400, #94A3B8);
    transition: color 0.15s, background 0.15s;
}

.d3view-dashboard-v2 .db-widget-view-btns .db-widget-view-mode-btn:hover {
    color: var(--db-brand, #30487f);
    background: rgba(99,102,241,0.08);
}

.d3view-dashboard-v2 .db-widget-view-btns .db-widget-view-mode-btn.is-active-mode {
    color: var(--db-brand, #30487f);
    background: rgba(99,102,241,0.12);
    font-weight: 600;
}

/* ── Viz container (full width/height inside widget body) ──────── */
.d3view-dashboard-v2 .db-viz-container {
    width: 100%;
    height: 100%;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

/* Ensure Viz SVG fills the container */
.d3view-dashboard-v2 .db-viz-container svg {
    display: block;
}

/* ── Action bar left (refresh timestamp) ───────────────────────── */
.d3view-dashboard-v2 .db-action-bar-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.d3view-dashboard-v2 .db-action-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-mc-last-updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--db-n-400, #94A3B8);
}

/* ── Viz legend adjustments inside widget cards ────────────────── */
.d3view-dashboard-v2 .db-widget-body-content .viz-legend {
    font-size: 11px;
}

.d3view-dashboard-v2 .db-widget-body-content .viz-legend .legend-item {
    margin-right: 8px;
}

/* ── Responsive: compact view buttons on narrow widgets ─────────── */
.grid-stack-item[gs-w="3"] .db-widget-view-btns .db-widget-view-mode-btn,
.grid-stack-item[gs-w="4"] .db-widget-view-btns .db-widget-view-mode-btn {
    padding: 1px 4px;
    font-size: 10px;
}

/* ================================================================
   OVERVIEW MODE — Rich per-widget-type renderers
   Added for DVFIV-1934 — modernized dashboard widget cards
   ================================================================ */

/* ── Header: large total count ───────────────────────────────────── */
.d3view-dashboard-v2 .db-widget-header-total {
    margin-left: auto;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.d3view-dashboard-v2 .db-widget-total-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--widget-color, var(--db-brand, #30487f));
    line-height: 1;
    letter-spacing: -0.5px;
}

/* ── Header: inline meta stat pills ─────────────────────────────── */
.d3view-dashboard-v2 .db-widget-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-overview-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--db-n-500, #64748B);
    white-space: nowrap;
    background: var(--db-bg-subtle, rgba(148,163,184,0.08));
    padding: 2px 7px;
    border-radius: 10px;
}

.d3view-dashboard-v2 .db-overview-meta-pill strong {
    color: var(--db-n-700, #334155);
    font-weight: 600;
}

.d3view-dashboard-v2 .db-overview-meta-pill i {
    font-size: 10px;
    opacity: 0.7;
}

/* ── Overview body: split layout (chart + list) ──────────────────── */
.d3view-dashboard-v2 .db-overview-split {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-overview-chart-area {
    flex: 0 0 45%;
    min-height: 100px;
    position: relative;
    padding: 8px 12px 4px;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-overview-chart-area svg {
    display: block;
}

.d3view-dashboard-v2 .db-overview-list-area {
    flex: 1 1 55%;
    overflow-y: auto;
    padding: 0 12px 8px;
}

/* Section label (e.g. RECENT JOBS, CLUSTER NODES) */
.d3view-dashboard-v2 .db-overview-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--db-n-400, #94A3B8);
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--db-border-soft, rgba(148,163,184,0.12));
    margin-bottom: 2px;
}

/* ── Item rows (shared base) ─────────────────────────────────────── */
.d3view-dashboard-v2 .db-overview-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--db-border-soft, rgba(148,163,184,0.08));
    font-size: 12px;
    color: var(--db-n-600, #475569);
    min-height: 28px;
}

.d3view-dashboard-v2 .db-overview-item-row:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-overview-item-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.d3view-dashboard-v2 .db-overview-item-sub {
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Type badges ─────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-overview-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--db-bg-subtle, rgba(148,163,184,0.1));
    color: var(--db-n-500, #64748B);
}

.d3view-dashboard-v2 .db-overview-badge--running,
.d3view-dashboard-v2 .db-overview-badge--active,
.d3view-dashboard-v2 .db-overview-badge--deployed,
.d3view-dashboard-v2 .db-overview-badge--success,
.d3view-dashboard-v2 .db-overview-badge--completed {
    background: rgba(16,185,129,0.12);
    color: #059669;
}

.d3view-dashboard-v2 .db-overview-badge--failed,
.d3view-dashboard-v2 .db-overview-badge--error,
.d3view-dashboard-v2 .db-overview-badge--down {
    background: rgba(239,68,68,0.12);
    color: #DC2626;
}

.d3view-dashboard-v2 .db-overview-badge--queued,
.d3view-dashboard-v2 .db-overview-badge--pending,
.d3view-dashboard-v2 .db-overview-badge--training,
.d3view-dashboard-v2 .db-overview-badge--warning {
    background: rgba(245,158,11,0.12);
    color: #D97706;
}

.d3view-dashboard-v2 .db-overview-badge--primary,
.d3view-dashboard-v2 .db-overview-badge--default {
    background: rgba(99,102,241,0.1);
    color: #4F46E5;
}

.d3view-dashboard-v2 .db-overview-badge--replica,
.d3view-dashboard-v2 .db-overview-badge--secondary {
    background: rgba(148,163,184,0.12);
    color: #64748B;
}

/* ── Progress bars (overview items) ──────────────────────────────── */
.d3view-dashboard-v2 .db-overview-progress-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 80px;
    margin-left: auto;
}

.d3view-dashboard-v2 .db-overview-progress {
    height: 5px;
    border-radius: 3px;
    margin-bottom: 0;
    background: var(--db-bg-subtle, rgba(148,163,184,0.12));
    flex: 1;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-overview-progress .progress-bar {
    border-radius: 3px;
    transition: width 0.3s ease;
}

.d3view-dashboard-v2 .db-overview-progress-pct {
    font-size: 10px;
    font-weight: 600;
    color: var(--db-n-500, #64748B);
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

/* ── Thin progress bars (utilization, pipelines) ─────────────────── */
.d3view-dashboard-v2 .db-overview-progress-thin {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 0;
    background: var(--db-bg-subtle, rgba(148,163,184,0.12));
    overflow: hidden;
}

.d3view-dashboard-v2 .db-overview-progress-thin .progress-bar {
    border-radius: 0;
    transition: width 0.3s ease;
}

/* ── Modern HPC Cluster Nodes ──────────────────────────────────── */
.d3view-dashboard-v2 .db-hpc-nodes-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.d3view-dashboard-v2 .db-hpc-node-card {
    background: var(--db-bg-surface, #fff);
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
    transition: box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .db-hpc-node-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.d3view-dashboard-v2 .db-hpc-node-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.d3view-dashboard-v2 .db-hpc-node-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-hpc-node-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-hpc-node-sched {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    color: var(--db-n-400, #94a3b8);
    background: var(--db-n-100, #f1f5f9);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Cores utilization row */
.d3view-dashboard-v2 .db-hpc-cores-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .db-hpc-cores-label {
    font-size: 10px;
    color: var(--db-n-400, #94a3b8);
    font-weight: 500;
}

.d3view-dashboard-v2 .db-hpc-cores-label .fa {
    margin-right: 2px;
}

.d3view-dashboard-v2 .db-hpc-cores-pct {
    font-size: 10px;
    font-weight: 600;
    color: var(--db-n-500, #64748b);
}

/* Segmented bar track */
.d3view-dashboard-v2 .db-hpc-bar-track {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--db-n-100, #f1f5f9);
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .db-hpc-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
}

.d3view-dashboard-v2 .db-hpc-bar-busy  { background: #10B981; }
.d3view-dashboard-v2 .db-hpc-bar-idle  { background: #6366F1; }
.d3view-dashboard-v2 .db-hpc-bar-down  { background: #EF4444; }

/* Bar legend */
.d3view-dashboard-v2 .db-hpc-bar-legend {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.d3view-dashboard-v2 .db-hpc-bar-legend span {
    font-size: 10px;
    color: var(--db-n-400, #94a3b8);
    display: flex;
    align-items: center;
    gap: 3px;
}

.d3view-dashboard-v2 .db-hpc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.d3view-dashboard-v2 .db-hpc-dot-busy { background: #10B981; }
.d3view-dashboard-v2 .db-hpc-dot-idle { background: #6366F1; }
.d3view-dashboard-v2 .db-hpc-dot-down { background: #EF4444; }

/* Jobs row */
.d3view-dashboard-v2 .db-hpc-jobs-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.d3view-dashboard-v2 .db-hpc-job-badge {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.d3view-dashboard-v2 .db-hpc-job-badge .fa {
    font-size: 9px;
}

.d3view-dashboard-v2 .db-hpc-job-running {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.d3view-dashboard-v2 .db-hpc-job-queued {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.d3view-dashboard-v2 .db-hpc-job-total {
    margin-left: auto;
    font-size: 10px;
    color: var(--db-n-400, #94a3b8);
    font-weight: 500;
}

.d3view-dashboard-v2 .db-hpc-node-down {
    font-size: 11px;
    color: var(--db-n-400, #94a3b8);
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-hpc-node-down .fa {
    margin-right: 4px;
}

/* Dark theme */
.d3view-dashboard-v2.db-theme-dark .db-hpc-node-card {
    background: var(--db-bg-elevated, #1e293b);
    border-color: var(--db-border, #334155);
}

.d3view-dashboard-v2.db-theme-dark .db-hpc-bar-track {
    background: var(--db-n-700, #334155);
}

.d3view-dashboard-v2.db-theme-dark .db-hpc-node-sched {
    background: var(--db-n-700, #334155);
    color: var(--db-n-300, #94a3b8);
}

/* ── Donut + Legend (Physical Tests) ─────────────────────────────── */
.d3view-dashboard-v2 .db-overview-donut-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.d3view-dashboard-v2 .db-overview-donut-chart {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
}

.d3view-dashboard-v2 .db-overview-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.d3view-dashboard-v2 .db-overview-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--db-n-600, #475569);
}

.d3view-dashboard-v2 .db-overview-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-overview-legend-count {
    margin-left: auto;
    font-weight: 600;
    color: var(--db-n-700, #334155);
}

/* ── Pipeline rows (Workflows) ───────────────────────────────────── */
.d3view-dashboard-v2 .db-overview-pipeline-row {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 6px 0;
}

.d3view-dashboard-v2 .db-overview-pipeline-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.d3view-dashboard-v2 .db-overview-pipeline-header i {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-overview-pipeline-pct {
    margin-left: auto;
    font-weight: 700;
    font-size: 12px;
    color: var(--db-success, #10B981);
}

.d3view-dashboard-v2 .db-overview-pipeline-status {
    font-size: 10px;
    color: var(--db-n-400, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.d3view-dashboard-v2 .db-overview-pipeline-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    padding-left: 14px;
}

.d3view-dashboard-v2 .db-overview-pipeline-meta i {
    font-size: 10px;
    margin-right: 2px;
}

.d3view-dashboard-v2 .db-overview-pipeline-bar {
    margin-top: 2px;
}

/* ── Instance rows (Databases) ───────────────────────────────────── */
.d3view-dashboard-v2 .db-overview-instance-row {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 6px 0;
}

.d3view-dashboard-v2 .db-overview-instance-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.d3view-dashboard-v2 .db-overview-instance-header i {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-overview-instance-actions {
    margin-left: auto;
    color: var(--db-n-300, #CBD5E1);
    font-size: 11px;
    cursor: pointer;
}

.d3view-dashboard-v2 .db-overview-instance-actions:hover {
    color: var(--db-n-500, #64748B);
}

.d3view-dashboard-v2 .db-overview-instance-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    padding-left: 14px;
}

.d3view-dashboard-v2 .db-overview-instance-meta i {
    font-size: 10px;
    margin-right: 2px;
}

/* ── Model rows (AI / ML Actions) ────────────────────────────────── */
.d3view-dashboard-v2 .db-overview-model-row {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 6px 0;
}

.d3view-dashboard-v2 .db-overview-model-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.d3view-dashboard-v2 .db-overview-model-header i {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-overview-model-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    padding-left: 14px;
    align-items: center;
}

.d3view-dashboard-v2 .db-overview-model-accuracy {
    font-weight: 700;
    font-size: 12px;
    color: var(--db-success, #10B981);
}

.d3view-dashboard-v2 .db-overview-model-acc-label {
    font-size: 10px;
    color: var(--db-n-400, #94A3B8);
}

.d3view-dashboard-v2 .db-overview-model-sparkline {
    height: 24px;
    margin-left: 14px;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-overview-model-sparkline svg {
    display: block;
}

/* ── Activity Timeline section ───────────────────────────────────── */
.d3view-dashboard-v2 .db-activity-timeline-section {
    background: var(--db-bg-card, #fff);
    border-radius: 12px;
    height: 100%;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.d3view-dashboard-v2 .db-widget-open-full {
    display: none!important;
}
.d3view-dashboard-v2 .db-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.d3view-dashboard-v2 .db-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--db-n-700, #334155);
}

.d3view-dashboard-v2 .db-timeline-controls {
    display: flex;
    gap: 2px;
}

.d3view-dashboard-v2 .db-timeline-controls .db-timeline-view-btn {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    color: var(--db-n-400, #94A3B8);
    transition: color 0.15s, background 0.15s;
}

.d3view-dashboard-v2 .db-timeline-controls .db-timeline-view-btn:hover {
    color: var(--db-brand, #30487f);
    background: rgba(99,102,241,0.08);
}

.d3view-dashboard-v2 .db-timeline-controls .db-timeline-view-btn.is-active {
    color: var(--db-brand, #30487f);
    background: rgba(99,102,241,0.12);
    font-weight: 600;
}

.d3view-dashboard-v2 .db-timeline-chart-wrap {
    flex: 1;
    position: relative;
    min-height: 0;
}

.d3view-dashboard-v2 .db-timeline-chart-wrap svg {
    display: block;
}

.d3view-dashboard-v2 .db-timeline-table-wrap {
    max-height: 300px;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-timeline-table-wrap table {
    margin-bottom: 0;
}

.d3view-dashboard-v2 .db-timeline-calendar-wrap {
    min-height: 200px;
    flex: 1;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-timeline-legend-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}

.d3view-dashboard-v2 .db-timeline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--db-n-500, #64748B);
}

.d3view-dashboard-v2 .db-timeline-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Heatmap strip (GitHub-style contribution heatmap) ──────────── */

.d3view-dashboard-v2 .db-heatmap-strip-wrap {
    padding: 4px 0;
}

/* Flex row: heatmap left, summary stats right */
.d3view-dashboard-v2 .db-heatmap-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.d3view-dashboard-v2 .db-heatmap-left {
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-heatmap-right {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-heatmap-svg {
    display: block;
}

.d3view-dashboard-v2 .db-heatmap-day-label,
.d3view-dashboard-v2 .db-heatmap-month-label {
    font-size: 10px;
    fill: var(--db-n-400, #94A3B8);
    font-family: inherit;
}

.d3view-dashboard-v2 .db-heatmap-cell {
    cursor: default;
    transition: stroke 0.1s;
}

/* Heatmap legend row */
.d3view-dashboard-v2 .db-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 0 0 28px;
}
.d3view-dashboard-v2 .db-heatmap-legend-label {
    font-size: 10px;
    color: var(--db-n-400, #94A3B8);
    margin: 0 4px;
}
.d3view-dashboard-v2 .db-heatmap-legend-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

/* ── Heatmap summary stats (right panel) ──────────────────────────── */

.d3view-dashboard-v2 .db-heatmap-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}
.d3view-dashboard-v2 .db-heatmap-stat-row {
    display: flex;
    gap: 20px;
}
.d3view-dashboard-v2 .db-heatmap-stat {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    background: var(--db-n-50, #F8FAFC);
    border-radius: 8px;
    border: 1px solid var(--db-border-soft, rgba(148,163,184,0.15));
}
.d3view-dashboard-v2 .db-heatmap-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--db-n-800, #1E293B);
    line-height: 1.2;
}
.d3view-dashboard-v2 .db-heatmap-stat-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--db-n-400, #94A3B8);
}
.d3view-dashboard-v2 .db-heatmap-stat-label {
    font-size: 11px;
    color: var(--db-n-500, #64748B);
    margin-top: 2px;
}
.d3view-dashboard-v2 .db-heatmap-busiest {
    font-size: 12px;
    color: var(--db-n-500, #64748B);
    padding: 0 2px;
}
.d3view-dashboard-v2 .db-heatmap-busiest .fa {
    color: var(--db-brand, #6366F1);
    margin-right: 4px;
}

/* Per-series breakdown bars */
.d3view-dashboard-v2 .db-heatmap-series-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d3view-dashboard-v2 .db-heatmap-series-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.d3view-dashboard-v2 .db-heatmap-series-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-heatmap-series-label {
    width: 90px;
    color: var(--db-n-600, #475569);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-heatmap-series-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--db-n-100, #F1F5F9);
    border-radius: 3px;
    overflow: hidden;
}
.d3view-dashboard-v2 .db-heatmap-series-bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.d3view-dashboard-v2 .db-heatmap-series-value {
    font-weight: 600;
    color: var(--db-n-700, #334155);
    min-width: 36px;
    text-align: right;
}

/* ── Bottom summary stat cards ───────────────────────────────────── */
.d3view-dashboard-v2 .db-bottom-stats-row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.d3view-dashboard-v2 .db-bottom-stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--db-bg-card, #fff);
    border-radius: 10px;
    border: 1px solid var(--db-border-soft, rgba(148,163,184,0.15));
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 12px 14px;
    min-width: 0;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.d3view-dashboard-v2 .db-bottom-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: rgba(148,163,184,0.25);
}

.d3view-dashboard-v2 .db-bottom-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--widget-color, rgba(99,102,241,0.1));
    color: var(--db-brand, #30487f);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-bottom-stat-info {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-bottom-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--db-n-800, #1E293B);
    line-height: 1.2;
}

.d3view-dashboard-v2 .db-bottom-stat-label {
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-bottom-stat-trend {
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.d3view-dashboard-v2 .db-bottom-stat-trend--up {
    color: var(--db-success, #10B981);
}

.d3view-dashboard-v2 .db-bottom-stat-trend--down {
    color: var(--db-danger, #EF4444);
}

/* ── HPC Status container (splitview mode) ───────────────────────── */
.d3view-dashboard-v2 .db-hpc-status-container {
    padding: 8px 12px;
    overflow-y: auto;
    height: 100%;
}

.d3view-dashboard-v2 .db-hpc-server-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--db-border-soft, rgba(148,163,184,0.1));
}

.d3view-dashboard-v2 .db-hpc-server-row:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-hpc-server-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .db-hpc-server-name i {
    color: var(--db-n-400, #94A3B8);
    font-size: 11px;
}

.d3view-dashboard-v2 .db-hpc-server-name .label {
    font-size: 9px;
    padding: 1px 4px;
}

.d3view-dashboard-v2 .db-hpc-cores-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .db-hpc-label {
    font-size: 10px;
    color: var(--db-n-400, #94A3B8);
    min-width: 60px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-hpc-utilization-bar {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 0;
    flex: 1;
    background: var(--db-bg-subtle, rgba(148,163,184,0.1));
}

.d3view-dashboard-v2 .db-hpc-utilization-bar .progress-bar {
    font-size: 0;
    line-height: 6px;
}

.d3view-dashboard-v2 .db-hpc-jobs-row {
    display: flex;
    gap: 6px;
    padding-top: 2px;
}

.d3view-dashboard-v2 .db-hpc-jobs-row .label {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
}

.d3view-dashboard-v2 .db-hpc-recent-jobs {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--db-border-soft, rgba(148,163,184,0.1));
}

.d3view-dashboard-v2 .db-hpc-recent-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--db-n-400, #94A3B8);
    margin-bottom: 4px;
}

/* ── Responsive: compact layout for 4-col widgets in overview ────── */
.grid-stack-item[gs-w="4"] .db-overview-split {
    flex-direction: column;
}

.grid-stack-item[gs-w="4"] .db-overview-chart-area {
    flex: 0 0 35%;
    min-height: 80px;
}

.grid-stack-item[gs-w="4"] .db-overview-donut-area {
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.grid-stack-item[gs-w="4"] .db-overview-donut-chart {
    width: 80px;
    height: 80px;
}

.grid-stack-item[gs-w="4"] .db-overview-item-row {
    padding: 4px 0;
    font-size: 11px;
}

.grid-stack-item[gs-w="4"] .db-overview-section-label {
    font-size: 9px;
}

.grid-stack-item[gs-w="4"] .db-widget-total-count {
    font-size: 18px;
}

.grid-stack-item[gs-w="4"] .db-overview-meta-pill {
    font-size: 10px;
    padding: 1px 5px;
}

/* ── Responsive: bottom stats stack on narrow viewports ──────────── */
@media (max-width: 992px) {
    .db-bottom-stats-row {
        flex-wrap: wrap;
    }
    .db-bottom-stat-card {
        flex: 1 1 calc(50% - 6px);
    }
}

@media (max-width: 600px) {
    .db-bottom-stats-row {
        flex-direction: column;
    }
    .db-bottom-stat-card {
        flex: 1 1 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DETAIL SIDEBAR (slide-in panel from right)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .db-detail-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 35vw;
    min-width: 320px;
    max-width: 80vw;
    height: 100vh;
    background: var(--db-bg-surface, #fff);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--db-border, #e2e8f0);
}

.d3view-dashboard-v2 .db-detail-sidebar.is-open {
    transform: translateX(0);
}

/* Resize handle on left edge */
.d3view-dashboard-v2 .db-sidebar-resize {
    position: absolute;
    left: -3px;
    top: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
}

.d3view-dashboard-v2 .db-sidebar-resize:hover {
    background: var(--db-brand, #6366F1);
    opacity: 0.3;
}

/* Header */
.d3view-dashboard-v2 .db-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--db-border, #e2e8f0);
    flex-shrink: 0;
    background: var(--db-bg-surface, #fff);
}

.d3view-dashboard-v2 .db-sidebar-header-info {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-sidebar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-sidebar-subtitle {
    font-size: 12px;
    color: var(--db-n-400, #94A3B8);
    margin-top: 2px;
}

.d3view-dashboard-v2 .db-sidebar-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Body */
.d3view-dashboard-v2 .db-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.d3view-dashboard-v2 .db-sidebar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--db-n-400, #94A3B8);
}

.d3view-dashboard-v2 .db-sidebar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 200px;
    color: var(--db-n-400, #94A3B8);
    font-size: 13px;
}

.d3view-dashboard-v2 .db-sidebar-basic-info {
    padding: 16px;
}

.d3view-dashboard-v2 .db-sidebar-info-row {
    padding: 6px 0;
    font-size: 13px;
    color: var(--db-n-600, #475569);
    border-bottom: 1px solid var(--db-border-soft, rgba(148,163,184,0.08));
}

/* Footer */
.d3view-dashboard-v2 .db-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px;
    border-top: 1px solid var(--db-border, #e2e8f0);
    flex-shrink: 0;
    background: var(--db-bg-surface, #fff);
}

/* Backdrop for sidebar */
.d3view-dashboard-v2 .db-sidebar-backdrop {
    display: none;
}

.d3view-dashboard-v2 .db-sidebar-backdrop.is-visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
    z-index: 1055;
}

/* ── Clickable overview items ─────────────────────────────────────── */

a.db-overview-item-link {
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    border-radius: 4px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
}

a.db-overview-item-link:hover {
    background: var(--db-bg-subtle, rgba(148,163,184,0.08));
    color: inherit;
    text-decoration: none;
}

a.db-overview-item-link:active {
    background: var(--db-bg-subtle, rgba(148,163,184,0.15));
}

/* ── Viz breakdown pill strip (per-queue / per-user / per-solver) ── */
.d3view-dashboard-v2 .db-widget-breakdown-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 4px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-widget-breakdown-btn {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--db-n-400, #94A3B8);
    border: 1px solid var(--db-border, rgba(148,163,184,0.25));
    background: transparent;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.d3view-dashboard-v2 .db-widget-breakdown-btn:hover {
    color: var(--db-brand, #30487f);
    border-color: var(--db-brand, #30487f);
    background: rgba(99,102,241,0.07);
}

.d3view-dashboard-v2 .db-widget-breakdown-btn.active {
    color: #fff;
    background: var(--db-brand, #30487f);
    border-color: var(--db-brand, #30487f);
}

/* ================================================================
   USER ACTIVITY FEED — db-widget-type-user-activity
   ================================================================ */

.d3view-dashboard-v2 .db-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    height: 100%;
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--db-border, rgba(148,163,184,0.15));
    transition: background 0.1s;
}

.d3view-dashboard-v2 .db-activity-item:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-activity-item:hover {
    background: var(--db-surface-hover, rgba(99,102,241,0.04));
}

.d3view-dashboard-v2 .db-activity-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.d3view-dashboard-v2 .db-activity-content {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-activity-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--db-text, #1E293B);
    word-break: break-word;
}

.d3view-dashboard-v2 .db-activity-icon {
    font-size: 11px;
    margin-right: 2px;
}

.d3view-dashboard-v2 .db-activity-type-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--db-surface-2, rgba(148,163,184,0.15));
    color: var(--db-n-400, #94A3B8);
    font-weight: 500;
    margin: 0 2px;
    vertical-align: middle;
}

.d3view-dashboard-v2 .db-activity-parent {
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
}

.d3view-dashboard-v2 .db-activity-time {
    font-size: 10px;
    color: var(--db-n-400, #94A3B8);
    margin-top: 2px;
}

/* Activity table (User Activity widget) */
.d3view-dashboard-v2 .db-activity-table {
    font-size: 12px;
    table-layout: fixed;
    width: 100%;
}
.d3view-dashboard-v2 .db-activity-table th {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--db-n-500, #64748B);
    border-bottom: 2px solid var(--db-n-200, #E2E8F0);
    white-space: nowrap;
}
/* Column widths: User 12%, Action 10%, Type 14%, Title auto, Parent 14%, Date 12% */
.d3view-dashboard-v2 .db-activity-table th:nth-child(1),
.d3view-dashboard-v2 .db-activity-table td:nth-child(1) { width: 12%; }
.d3view-dashboard-v2 .db-activity-table th:nth-child(2),
.d3view-dashboard-v2 .db-activity-table td:nth-child(2) { width: 10%; }
.d3view-dashboard-v2 .db-activity-table th:nth-child(3),
.d3view-dashboard-v2 .db-activity-table td:nth-child(3) { width: 14%; }
.d3view-dashboard-v2 .db-activity-table th:nth-child(5),
.d3view-dashboard-v2 .db-activity-table td:nth-child(5) { width: 14%; }
.d3view-dashboard-v2 .db-activity-table th:nth-child(6),
.d3view-dashboard-v2 .db-activity-table td:nth-child(6) { width: 12%; }
.d3view-dashboard-v2 .db-activity-table td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-dashboard-v2 .db-activity-table td .db-activity-type-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}
.d3view-dashboard-v2 .db-activity-table td.db-activity-time {
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
    margin-top: 0;
}

/* ===== LANDING PAGE: Create New + Netflix-style dashboards slider ===== */

.d3view-dashboard-v2 .db-landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 40px 20px;
    background: var(--db-bg-canvas);
    /* DVFIV-1954 - needed so the floating actions bar positions relative to landing */
    position: relative;
}

.d3view-dashboard-v2 .db-landing-inner {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -- Main row: Create New + existing dashboards side by side -- */

.d3view-dashboard-v2 .db-landing-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    justify-content: center;
}

/* -- Existing Dashboards Section (takes remaining space) -- */

.d3view-dashboard-v2 .db-landing-existing-section {
    /* flex: 1; */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -- Netflix-style horizontal slider -- */

.d3view-dashboard-v2 .db-landing-dash-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300, #cbd5e1) transparent;
    animation: db-templates-fade-in 0.22s ease both;
}

.d3view-dashboard-v2 .db-landing-dash-slider::-webkit-scrollbar {
    height: 4px;
}

.d3view-dashboard-v2 .db-landing-dash-slider::-webkit-scrollbar-track {
    background: transparent;
}

.d3view-dashboard-v2 .db-landing-dash-slider::-webkit-scrollbar-thumb {
    background: var(--db-n-300, #cbd5e1);
    border-radius: 2px;
}

/* -- Dashboard cards (fixed-width for slider) -- */

.d3view-dashboard-v2 .db-landing-dash-card {
    flex: 0 0 190px;
    height: 160px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    background: var(--db-bg-surface, #fff);
    box-shadow: var(--db-sh-sm);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .db-landing-dash-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.18);
    border-color: #6366F1;
}

.d3view-dashboard-v2 .db-landing-dash-card__cover {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.d3view-dashboard-v2 .db-landing-dash-card__cover-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.d3view-dashboard-v2 .db-landing-dash-card__delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border: none;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 2px 6px;
    line-height: 1.4;
    z-index: 2;
}

.d3view-dashboard-v2 .db-landing-dash-card:hover .db-landing-dash-card__delete {
    opacity: 1;
}

.d3view-dashboard-v2 .db-landing-dash-card__delete:hover {
    background: rgba(220, 38, 38, 0.85);
}

.d3view-dashboard-v2 .db-landing-dash-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.d3view-dashboard-v2 .db-landing-dash-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--db-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-landing-dash-card__meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
}

.d3view-dashboard-v2 .db-landing-dash-card__meta i {
    margin-right: 3px;
}

/* DVFIV-1954 - Selected state from jQuery UI selectable */

.d3view-dashboard-v2 .db-landing-dash-card.ui-selected,
.d3view-dashboard-v2 .db-landing-dash-card.ui-selecting {
    outline: 2.5px solid var(--db-brand, #6366F1);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
    transform: translateY(-2px);
}

/* "+N more" overflow card */
.d3view-dashboard-v2 .db-landing-dash-overflow {
    border-style: dashed;
    background: var(--db-n-50, #f8fafc);
    cursor: pointer;
}

.d3view-dashboard-v2 .db-landing-dash-overflow:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.18);
    border-color: var(--db-brand, #6366F1);
    background: rgba(99, 102, 241, 0.04);
}

.d3view-dashboard-v2 .db-landing-dash-overflow:hover .db-landing-dash-overflow__count {
    color: var(--db-brand, #6366F1);
    transform: scale(1.1);
    transition: transform 0.18s ease;
}

.d3view-dashboard-v2 .db-landing-dash-overflow__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.d3view-dashboard-v2 .db-landing-dash-overflow__count {
    font-size: 28px;
    font-weight: 700;
    color: var(--db-brand, #6366F1);
    line-height: 1;
    transition: transform 0.18s ease;
    display: inline-block;
}

.d3view-dashboard-v2 .db-landing-dash-overflow__label {
    font-size: 12px;
    color: var(--db-text-muted, #64748B);
}

/* -- Create New card -- */

.d3view-dashboard-v2 .db-landing-nav-card {
    flex: 0 0 190px;
    height: 160px;
    border: 2px dashed var(--db-n-300, #CBD5E1);
    border-radius: 12px;
    background: var(--db-bg-surface, #fff);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.d3view-dashboard-v2 .db-landing-nav-card:hover {
    border-color: var(--db-brand, #6366F1);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}

.d3view-dashboard-v2 .db-landing-nav-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--db-n-100, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--db-brand, #6366F1);
    transition: background 0.2s ease, transform 0.2s ease;
}

.d3view-dashboard-v2 .db-landing-nav-card:hover .db-landing-nav-card__icon {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.08);
}

.d3view-dashboard-v2 .db-landing-nav-card__label {
    font-size: 13px;
    font-weight: var(--db-fw-semi, 600);
    color: var(--db-text-primary, #1e293b);
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
    .d3view-dashboard-v2 .db-landing-row {
        flex-direction: column;
    }
    .d3view-dashboard-v2 .db-landing-nav-card {
        flex: none;
        width: 100%;
        flex-direction: row;
        gap: 12px;
        padding: 16px;
        justify-content: flex-start;
    }
}

/* ===== TEMPLATES VIEW ===== */

.d3view-dashboard-v2 .db-templates-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 40px 28px;
    background: var(--db-bg-canvas);
}

.d3view-dashboard-v2 .db-templates-view__inner {
    width: 100%;
    max-width: 1100px;
}

.d3view-dashboard-v2 .db-templates-view__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.d3view-dashboard-v2 .db-templates-view__header h4 {
    font-size: var(--db-fs-xl, 18px);
    font-weight: var(--db-fw-semi, 600);
    color: var(--db-text-primary, #1e293b);
    margin: 0;
}

.d3view-dashboard-v2 .db-templates-view__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
    animation: db-templates-fade-in 0.22s ease both;
}

@keyframes db-templates-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== PRESET CARD (shared by Templates View) ===== */

.d3view-dashboard-v2 .db-preset-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    background: var(--db-bg-surface, #fff);
    box-shadow: var(--db-sh-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .db-preset-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.18);
    border-color: #6366F1;
}

.d3view-dashboard-v2 .db-preset-card__cover {
    height: 110px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-preset-card__cover-icon {
    font-size: 36px;
    color: rgba(255, 255, 255, 0.92);
    z-index: 1;
    position: relative;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.d3view-dashboard-v2 .db-preset-card__cover-pattern {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 14px;
    opacity: 0.18;
}

.d3view-dashboard-v2 .db-preset-card__pattern-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
}

.d3view-dashboard-v2 .db-preset-card__pattern-bar:nth-child(1) { width: 80%; }
.d3view-dashboard-v2 .db-preset-card__pattern-bar:nth-child(2) { width: 55%; }
.d3view-dashboard-v2 .db-preset-card__pattern-bar:nth-child(3) { width: 68%; }

.d3view-dashboard-v2 .db-preset-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.d3view-dashboard-v2 .db-preset-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--db-text-primary, #1e293b);
    line-height: 1.3;
}

.d3view-dashboard-v2 .db-preset-card__desc {
    font-size: 12px;
    color: var(--db-text-muted, #64748B);
    line-height: 1.45;
    flex: 1;
}

.d3view-dashboard-v2 .db-preset-card__meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--db-n-400, #94A3B8);
}

.d3view-dashboard-v2 .db-preset-card__meta i {
    margin-right: 3px;
}

.d3view-dashboard-v2 .db-preset-card__use {
    margin-top: 6px;
    width: 100%;
    font-size: 12px;
}

.d3view-dashboard-v2 .db-preset-card--empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px;
    color: var(--db-text-muted);
}

/* ===== DARK MODE ===== */

.d3view-dashboard-v2.db-theme-dark .db-landing-nav-card {
    background: var(--db-bg-surface);
    border-color: var(--db-n-600, #475569);
}

.d3view-dashboard-v2.db-theme-dark .db-landing-nav-card:hover {
    border-color: var(--db-brand, #6366F1);
}

.d3view-dashboard-v2.db-theme-dark .db-landing-nav-card__icon {
    background: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2.db-theme-dark .db-preset-card {
    background: var(--db-bg-surface);
    border-color: var(--db-n-700);
}

.d3view-dashboard-v2.db-theme-dark .db-landing-dash-card {
    background: var(--db-bg-surface);
    border-color: var(--db-n-700);
}

/* ===== DASHBOARD SWITCHER DROPDOWN ===== */

.d3view-dashboard-v2 .db-dash-switcher {
    display: inline-block;
}

.d3view-dashboard-v2 .db-dash-switcher-btn {
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
}

.d3view-dashboard-v2 .db-dash-switcher-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--db-bg-surface, #fff);
    border: 1px solid var(--db-n-200, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    margin-top: 4px;
}

.d3view-dashboard-v2 .db-dash-switcher-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-dash-switcher-item:hover {
    background: var(--db-n-100, #f1f5f9);
}

.d3view-dashboard-v2 .db-dash-switcher-item.is-active {
    background: rgba(99, 102, 241, 0.08);
    color: var(--db-brand, #6366F1);
    font-weight: 600;
}

.d3view-dashboard-v2 .db-dash-switcher-divider {
    height: 1px;
    background: var(--db-n-200, #e2e8f0);
    margin: 4px 0;
}

.d3view-dashboard-v2 .db-dash-switcher-create-item {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--db-brand, #6366F1);
    cursor: pointer;
    transition: background 0.12s ease;
}

.d3view-dashboard-v2 .db-dash-switcher-create-item:hover {
    background: rgba(99, 102, 241, 0.06);
}

/* Dark mode switcher */
.d3view-dashboard-v2.db-theme-dark .db-dash-switcher-dropdown {
    background: var(--db-bg-surface);
    border-color: var(--db-n-700);
}

.d3view-dashboard-v2.db-theme-dark .db-dash-switcher-item:hover {
    background: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2.db-theme-dark .db-dash-switcher-divider {
    background: var(--db-n-700);
}

/* ── Creator Shell ────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 50vw;
    width: 100%;
    margin: 0 auto;
    padding: 32px 36px 24px;
    background: var(--db-n-50, #f8fafc);
    border-radius: 14px;
    border: 1px solid var(--db-n-200, #e2e8f0);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* ── Header ───────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__header {
    margin-bottom: 24px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-creator__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-creator__subtitle {
    font-size: 13px;
    margin: 0;
}

/* ── Body (scrollable) ────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 0;
}

.d3view-dashboard-v2 .db-creator__body .form-group {
    margin-bottom: 20px;
}

/* ── Labels ───────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.d3view-dashboard-v2 .db-creator__label i {
    margin-right: 4px;
}

/* ── Name Input ───────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator .js-dash-name {
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.d3view-dashboard-v2 .db-creator .js-dash-name:focus {
    border-color: var(--db-wt-indigo, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.d3view-dashboard-v2 .db-creator__name-error {
    font-size: 12px;
    margin: 4px 0 0;
}

/* ── Name Tags ────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__name-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.d3view-dashboard-v2 .db-creator__name-tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 12px;
    border: 1px solid var(--db-n-200, #e2e8f0);
    background: #fff;
    color: var(--db-n-600, #475569);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.d3view-dashboard-v2 .db-creator__name-tag:hover {
    border-color: var(--db-wt-indigo, #6366F1);
    color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.04);
}

.d3view-dashboard-v2 .db-creator__name-tag.is-active {
    border-color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.08);
    color: var(--db-wt-indigo, #6366F1);
    font-weight: 600;
}

/* ── AI Mode Toggle Pill ──────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__ai-toggle {
    display: flex;
    gap: 2px;
    background: var(--db-n-100, #f1f5f9);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-creator__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--db-n-500, #64748b);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-creator__toggle-btn:hover {
    color: var(--db-n-700, #334155);
}

.d3view-dashboard-v2 .db-creator__toggle-btn.is-active {
    background: #fff;
    color: var(--db-n-800, #1e293b);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Label optional hint ──────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__label-optional {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--db-n-400, #94a3b8);
    margin-left: 6px;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard Type Grid (4 cards, 2x2)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.d3view-dashboard-v2 .db-creator__mode-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.d3view-dashboard-v2 .db-creator__mode-card:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .db-creator__mode-card:active {
    transform: translateY(0);
    box-shadow: none;
}

.d3view-dashboard-v2 .db-creator__mode-card.is-selected {
    border-color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.04);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ── Mode Icons ───────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__mode-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.d3view-dashboard-v2 .db-creator__mode-card:hover .db-creator__mode-icon {
    transform: scale(1.08);
}

.d3view-dashboard-v2 .db-mode-icon--empty {
    background: linear-gradient(135deg, #94a3b815, #64748b20);
    color: #64748b;
}

.d3view-dashboard-v2 .db-mode-icon--template {
    background: linear-gradient(135deg, #3B82F615, #6366F120);
    color: #3B82F6;
}

.d3view-dashboard-v2 .db-mode-icon--tracker {
    background: linear-gradient(135deg, #6366F115, #8B5CF620);
    color: #6366F1;
}

.d3view-dashboard-v2 .db-mode-icon--monitor {
    background: linear-gradient(135deg, #10B98115, #059E6820);
    color: #10B981;
}

.d3view-dashboard-v2 .db-mode-icon--ai {
    background: linear-gradient(135deg, #EC489915, #8B5CF620);
    color: #8B5CF6;
}

/* ── Mode Text ────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__mode-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__mode-text strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-creator__mode-text .text-muted {
    font-size: 10px;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════
   Inline Config Area
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__inline-config {
    min-height: 0;
}

.d3view-dashboard-v2 .db-creator__inline-config:empty {
    display: none;
}

.d3view-dashboard-v2 .db-creator__config-section {
    padding: 16px;
    background: #fff;
    border: 1px solid var(--db-n-200, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 16px;
}

/* ── Entity Grid (Tracker) ────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.d3view-dashboard-v2 .db-creator__entity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 10px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    text-align: center;
    position: relative;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.d3view-dashboard-v2 .db-creator__entity-card:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.d3view-dashboard-v2 .db-creator__entity-card.is-selected {
    border-color: var(--plugin-primary-color);
    background: var(--dt-selection-color);
}

.d3view-dashboard-v2 .db-creator__entity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.d3view-dashboard-v2 .db-creator__entity-card:hover .db-creator__entity-icon {
    transform: scale(1.1);
}

.d3view-dashboard-v2 .db-creator__entity-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--db-n-700, #334155);
    line-height: 1.2;
}

.d3view-dashboard-v2 .db-creator__entity-check {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px;
    color: var(--db-wt-indigo, #6366F1);
}

/* ── Related Entities: Visual Tree (Tracker + AI) ─────────── */
.d3view-dashboard-v2 .db-creator__related-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--db-n-100, #f1f5f9);
}

.d3view-dashboard-v2 .db-creator__tree {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-dashboard-v2 .db-creator__tree-group {
    display: flex;
    flex-direction: column;
}

/* Shared L1 + L2 item base */
.d3view-dashboard-v2 .db-creator__tree-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    margin: 0;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.d3view-dashboard-v2 .db-creator__tree-item:hover {
    background: var(--db-n-50, #f8fafc);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.d3view-dashboard-v2 .db-creator__tree-item.is-checked {
    border-color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.03);
}

.d3view-dashboard-v2 .db-creator__tree-item input[type="checkbox"] {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-creator__tree-item > i {
    font-size: 15px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Name + description block */
.d3view-dashboard-v2 .db-creator__tree-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__tree-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--db-n-700, #334155);
    line-height: 1.3;
}

.d3view-dashboard-v2 .db-creator__tree-desc {
    font-size: 11px;
    color: var(--db-n-400, #94a3b8);
    line-height: 1.3;
}

/* L2 children: indented with tree connector lines */
.d3view-dashboard-v2 .db-creator__tree-children {
    margin-left: 24px;
    padding-left: 18px;
    border-left: 2px solid var(--db-n-200, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    padding-bottom: 2px;
}

.d3view-dashboard-v2 .db-creator__tree-l2 {
    position: relative;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Horizontal branch connector from vertical line to L2 item */
.d3view-dashboard-v2 .db-creator__tree-l2::before {
    content: '';
    position: absolute;
    left: -18px;
    top: 50%;
    width: 16px;
    height: 0;
    border-top: 2px solid var(--db-n-200, #e2e8f0);
}

/* Highlight connector when L2 is checked */
.d3view-dashboard-v2 .db-creator__tree-l2.is-checked::before {
    border-top-color: rgba(99, 102, 241, 0.3);
}

/* ── Monitor Grid ─────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__monitor-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.d3view-dashboard-v2 .db-creator__monitor-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.d3view-dashboard-v2 .db-creator__monitor-card:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
}

.d3view-dashboard-v2 .db-creator__monitor-card.is-selected {
    border-color: var(--plugin-primary-color);
    background: var(--dt-selection-color);
}

.d3view-dashboard-v2 .db-creator__monitor-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__monitor-info strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-creator__monitor-info .text-muted {
    font-size: 11px;
}

.d3view-dashboard-v2 .db-creator__monitor-check {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--db-n-300, #cbd5e1);
    transition: color 0.15s;
}

.d3view-dashboard-v2 .db-creator__monitor-card.is-selected .db-creator__monitor-check {
    color: var(--db-wt-emerald, #10B981);
}

/* ── Refresh Row ──────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__refresh-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.d3view-dashboard-v2 .db-creator__refresh-row .db-creator__label {
    margin-bottom: 0;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-creator__refresh-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Template Gallery ─────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.d3view-dashboard-v2 .db-creator__template-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.d3view-dashboard-v2 .db-creator__template-card:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .db-creator__template-card.is-selected {
    border-color: var(--plugin-primary-color);
    background: var(--dt-selection-color);
    box-shadow: 0 0 0 3px var(--plugin-primary-color);
}

.d3view-dashboard-v2 .db-creator__template-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}

.d3view-dashboard-v2 .db-creator__template-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__template-body strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-creator__template-body .text-muted {
    font-size: 10px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.d3view-dashboard-v2 .db-creator__template-check {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 14px;
    color: var(--db-wt-indigo, #6366F1);
}

/* ── AI Section ───────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__config-section .js-nl-input {
    border-radius: 10px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    padding: 12px;
    font-size: 13px;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.d3view-dashboard-v2 .db-creator__config-section .js-nl-input:focus {
    border-color: var(--plugin-primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.d3view-dashboard-v2 .db-creator__ai-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.d3view-dashboard-v2 .db-creator__ai-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--plugin-primary-color);
}

.d3view-dashboard-v2 .db-creator__ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.d3view-dashboard-v2 .db-creator__ai-chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 14px;
    border: 1px solid var(--db-n-200, #e2e8f0);
    background: var(--db-n-50, #f8fafc);
    color: var(--db-n-600, #475569);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.d3view-dashboard-v2 .db-creator__ai-chip:hover {
    border-color: var(--plugin-primary-color);
    color: var(--plugin-primary-color);
    background: rgba(99, 102, 241, 0.04);
}

.d3view-dashboard-v2 .db-creator__ai-chip.is-active {
    border-color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.08);
    color: var(--db-wt-indigo, #6366F1);
    font-weight: 600;
}

/* ── Theme (Cover Dots) ───────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__theme-row {
    margin-bottom: 0 !important;
}

.d3view-dashboard-v2 .db-creator__cover-dots {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-dashboard-v2 .db-creator__cover-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    color: #fff;
    font-size: 10px;
}

.d3view-dashboard-v2 .db-creator__cover-dot:hover {
    transform: scale(1.15);
}

.d3view-dashboard-v2 .db-creator__cover-dot.is-selected {
    border-color: var(--db-n-800, #1e293b);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

/* ── Footer ───────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    margin-top: 8px;
    flex-shrink: 0;
    border-top: 1px solid var(--db-n-200, #e2e8f0);
}

/* ══════════════════════════════════════════════════════════════
   Global Scope Row (collapsible in AI mode = "Additional filters")
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__scope-wrap--collapsed .db-creator__scope-row {
    display: none;
}

.d3view-dashboard-v2 .db-creator__scope-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 0;
    user-select: none;
}

.d3view-dashboard-v2 .db-creator__scope-toggle .db-creator__label-optional {
    margin-left: 0;
}

.d3view-dashboard-v2 .db-creator__scope-wrap--collapsed .db-creator__scope-toggle {
    margin-bottom: 0;
}

.d3view-dashboard-v2 .db-creator__scope-chevron {
    margin-left: auto;
    color: var(--db-n-400, #94a3b8);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.d3view-dashboard-v2 .db-creator__scope-wrap:not(.db-creator__scope-wrap--collapsed) .db-creator__scope-chevron {
    transform: rotate(-180deg);
}

.d3view-dashboard-v2 .db-creator__scope-wrap:not(.db-creator__scope-wrap--collapsed) .db-creator__scope-row {
    margin-top: 8px;
}

.d3view-dashboard-v2 .db-creator__scope-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.d3view-dashboard-v2 .db-creator__scope-field {
    flex: 1;
    position: relative;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__scope-field--date {
    flex: 0 0 auto;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__scope-date-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__scope-date-wrap .form-control {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-creator__scope-date-wrap .btn-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.d3view-dashboard-v2 .db-creator__scope-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--db-n-400, #94a3b8);
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}

/* Select2 project picker: let Select2 own its width */
.d3view-dashboard-v2 .db-creator__scope-field .select2-container {
    width: 100% !important;
}

.d3view-dashboard-v2 .db-creator__scope-field .select2-choice {
    height: 34px;
    line-height: 32px;
    border-radius: 8px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    font-size: 13px;
    background: #fff;
    transition: border-color 0.15s;
}

.d3view-dashboard-v2 .db-creator__scope-field .select2-container.select2-container-active .select2-choice {
    border-color: var(--db-wt-indigo, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Date + search text inputs with icon padding */
.d3view-dashboard-v2 .db-creator__scope-field .form-control {
    padding-left: 30px;
    font-size: 13px;
    border-radius: 8px;
    height: 34px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.d3view-dashboard-v2 .db-creator__scope-field .form-control:focus {
    border-color: var(--db-wt-indigo, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.d3view-dashboard-v2 .db-creator__scope-field .js-scope-date {
    padding: 0 10px 0 30px;
    font-size: 13px;
    border-radius: 8px;
    height: 34px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    background: #fff;
    color: var(--db-n-700, #334155);
    cursor: pointer;
    width: 136px;
    transition: border-color 0.15s;
}

.d3view-dashboard-v2 .db-creator__scope-field .js-scope-date:focus {
    border-color: var(--db-wt-indigo, #6366F1);
    outline: none;
}

/* ══════════════════════════════════════════════════════════════
   Track Applications: Data Summary + Edit Panel
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__data-summary {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--db-n-100, #f1f5f9);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.d3view-dashboard-v2 .db-creator__data-summary-label {
    font-size: 12px;
    color: var(--db-n-500, #64748b);
    margin: 0 0 8px 0;
}

.d3view-dashboard-v2 .db-creator__data-bullets {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.d3view-dashboard-v2 .db-creator__data-bullet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--db-n-700, #334155);
}

.d3view-dashboard-v2 .db-creator__data-bullet i {
    font-size: 13px;
}

.d3view-dashboard-v2 .db-creator__data-bullet--primary {
    font-weight: 600;
}

.d3view-dashboard-v2 .db-creator__data-summary > .btn {
    flex-shrink: 0;
    align-self: center;
}

/* Wrap label + bullets vertically, button to the right */
.d3view-dashboard-v2 .db-creator__data-summary {
    flex-direction: column;
}

.d3view-dashboard-v2 .db-creator__data-summary > .btn {
    align-self: flex-start;
    margin-top: 8px;
}

/* ── Edit Panel ───────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__edit-panel {
    margin-top: 10px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-creator__edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-n-100, #f1f5f9);
    background: var(--db-n-50, #f8fafc);
}

.d3view-dashboard-v2 .db-creator__edit-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.d3view-dashboard-v2 .db-creator__edit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-n-100, #f1f5f9);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    transition: background 0.12s;
}

.d3view-dashboard-v2 .db-creator__edit-item:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .db-creator__edit-item:hover {
    background: var(--db-n-50, #f8fafc);
}

.d3view-dashboard-v2 .db-creator__edit-item.is-checked {
    background: rgba(99, 102, 241, 0.02);
}

.d3view-dashboard-v2 .db-creator__edit-item--primary {
    opacity: 0.75;
    cursor: default;
}

.d3view-dashboard-v2 .db-creator__edit-item--primary:hover {
    background: transparent;
}

.d3view-dashboard-v2 .db-creator__edit-item > i {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-creator__edit-item > span:first-of-type {
    flex: 1;
    font-size: 13px;
    color: var(--db-n-700, #334155);
}

.d3view-dashboard-v2 .db-creator__edit-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--db-wt-indigo, #6366F1);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── AI Hint Text ─────────────────────────────────────────── */
.d3view-dashboard-v2 .db-creator__ai-hint {
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Wizard Enter Animation (reused by IndexView) ─────────── */
.d3view-dashboard-v2 .db-wizard-enter {
    opacity: 0;
    transform: translateY(24px);
}

.d3view-dashboard-v2 .db-wizard-enter.db-wizard-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── Page Tab Bar (preserved from previous version) ───────── */
.d3view-dashboard-v2 .db-page-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-bottom: 1px solid var(--db-n-200, #e2e8f0);
    background: var(--db-n-50, #f8fafc);
    min-height: 38px;
}

.d3view-dashboard-v2 .db-page-tabs__list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    flex: 1;
}

.d3view-dashboard-v2 .db-page-tabs__tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--db-n-600, #475569);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-page-tabs__tab:hover {
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-page-tabs__tab.is-active {
    color: var(--db-n-800, #1e293b);
    font-weight: 600;
    border-bottom-color: var(--tab-color, var(--db-wt-indigo, #6366F1));
}

.d3view-dashboard-v2 .db-page-tabs__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-page-tabs__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-page-tabs__actions {
    flex-shrink: 0;
    padding-left: 8px;
}

/* ══════════════════════════════════════════════════════════════
   Color/Theme Picker Addon (DVFIV-1938)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__name-input-group .form-control {
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.d3view-dashboard-v2 .db-creator__color-addon {
    cursor: pointer;
    padding: 0 20px;
    border-radius: 0 10px 10px 0;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    border-left: none;
    background: var(--db-n-50, #f8fafc);
    transition: border-color 0.15s, background 0.15s;
    line-height: 1;
    vertical-align: middle;
}

.d3view-dashboard-v2 .db-creator__color-addon:hover {
    background: var(--db-n-100, #f1f5f9);
}

.d3view-dashboard-v2 .db-creator__color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}


/* ══════════════════════════════════════════════════════════════
   Netflix-style Template Slider (DVFIV-1938)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__template-slider {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300, #cbd5e1) transparent;
}

.d3view-dashboard-v2 .db-creator__template-slider::-webkit-scrollbar {
    height: 4px;
}

.d3view-dashboard-v2 .db-creator__template-slider::-webkit-scrollbar-track {
    background: transparent;
}

.d3view-dashboard-v2 .db-creator__template-slider::-webkit-scrollbar-thumb {
    background: var(--db-n-300, #cbd5e1);
    border-radius: 2px;
}

.d3view-dashboard-v2 .db-creator__tpl-card {
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 12px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    text-align: center;
    scroll-snap-align: start;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.d3view-dashboard-v2 .db-creator__tpl-card:hover {
    border-color: var(--db-n-300, #cbd5e1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.d3view-dashboard-v2 .db-creator__tpl-card:active {
    box-shadow: none;
}

.d3view-dashboard-v2 .db-creator__tpl-card.is-selected {
    border-color: var(--plugin-primary-color);
    background: rgba(99, 102, 241, 0.04);
}

.d3view-dashboard-v2 .db-creator__tpl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--db-n-100, #f1f5f9);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.d3view-dashboard-v2 .db-creator__tpl-card:hover .db-creator__tpl-icon {
    transform: scale(1.08);
}

.d3view-dashboard-v2 .db-creator__tpl-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
    line-height: 1.2;
}

.d3view-dashboard-v2 .db-creator__tpl-desc {
    font-size: 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   Custom Mode: Entity Slider (DVFIV-1938)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__entity-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    padding-top: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--db-n-300, #cbd5e1) transparent;
}

.d3view-dashboard-v2 .db-creator__entity-slider::-webkit-scrollbar {
    height: 4px;
}

.d3view-dashboard-v2 .db-creator__entity-slider::-webkit-scrollbar-thumb {
    background: var(--db-n-300, #cbd5e1);
    border-radius: 2px;
}

/* Entity cards inside the slider get a fixed snap width */
.d3view-dashboard-v2 .db-creator__entity-slider .db-creator__entity-card {
    flex: 0 0 100px;
    scroll-snap-align: start;
}

/* Extra breathing room for the custom applications section */
.d3view-dashboard-v2 .db-creator__config-section.js-custom-config {
    padding: 20px 18px 18px;
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════
   Options Section (DVFIV-1938)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .db-creator__options-section {
    margin-top: 4px;
}

.d3view-dashboard-v2 .db-creator__option-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.d3view-dashboard-v2 .db-creator__option {
    display: flex!important;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    transition: border-color 0.15s, background 0.15s;
}

.d3view-dashboard-v2 .db-creator__option:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
}

.d3view-dashboard-v2 .db-creator__option input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    cursor: pointer;
}

.d3view-dashboard-v2 .db-creator__option strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-creator__option .text-muted {
    font-size: 11px;
    line-height: 1.3;
}

/* ── Page Tab Bar: tabs (flex:1) + right-side action buttons ── */

.d3view-dashboard-v2 .db-page-tab-bar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
}

.d3view-dashboard-v2 #db-page-tabs-inner {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-page-tab-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 0 6px;
    border-left: 1px solid var(--db-border, #E2E8F0);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .d3view-dashboard-v2 .db-creator {
        padding: 20px 16px 16px;
        border-radius: 0;
        max-width: 100%;
    }

    .d3view-dashboard-v2 .db-creator__scope-row {
        flex-direction: column;
        align-items: stretch;
    }

    .d3view-dashboard-v2 .db-creator__scope-field--date .js-scope-date {
        width: 100%;
    }

    .d3view-dashboard-v2 .db-creator__entity-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* ── Widget Config Sidebar (Custom entity right-click) ──── */
.d3view-dashboard-v2 .db-creator__widget-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 35vw;
    height: 100%;
    background: var(--db-bg-surface, #fff);
    box-shadow: -4px 0 16px rgba(0,0,0,0.1);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.d3view-dashboard-v2 .db-creator__widget-sidebar.is-open {
    transform: translateX(0);
}
.d3view-dashboard-v2 .db-creator__widget-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--db-border, #eee);
}
.d3view-dashboard-v2 .db-creator__widget-sidebar-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--db-text-primary, #1e293b);
}
.d3view-dashboard-v2 .db-creator__widget-sidebar-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
}
.d3view-dashboard-v2 .db-creator__widget-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--db-border, #eee);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.d3view-dashboard-v2 .db-creator__sidebar-section {
    margin-bottom: 20px;
}
.d3view-dashboard-v2 .db-creator__sidebar-section .db-creator__label {
    margin-bottom: 6px;
}
.d3view-dashboard-v2 .db-creator__dim-row {
    display: flex;
    gap: 12px;
}
.d3view-dashboard-v2 .db-creator__dim-field {
    flex: 1;
}
.d3view-dashboard-v2 .db-creator__dim-field .form-control {
    height: 32px;
    font-size: 13px;
}
.d3view-dashboard-v2 .db-creator__entity-card {
    cursor: pointer;
    position: relative;
}
.d3view-dashboard-v2 .db-creator__entity-configured {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: var(--db-brand, #30487f);
    opacity: 0.7;
}

/* Select2 column picker inside widget config sidebar */
/* .d3view-dashboard-v2 .db-creator__widget-sidebar .select2-container-multi {
    width: 100% !important;
}
.d3view-dashboard-v2 .db-creator__widget-sidebar .select2-choices {
    min-height: 80px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 4px;
    background: var(--db-bg-surface, #fff);
    padding: 4px;
}
.d3view-dashboard-v2 .db-creator__widget-sidebar .select2-choices .select2-search-choice {
    cursor: move;
    margin: 3px;
    padding: 3px 20px 3px 8px;
    font-size: 12px;
    border-radius: 3px;
    background: var(--db-bg-muted, #f1f5f9);
    border: 1px solid var(--db-border, #e2e8f0);
}
.d3view-dashboard-v2 .db-creator__widget-sidebar .select2-choices .select2-search-choice.ui-sortable-helper {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
} */

/* Styles for: page tab bar, context menu, inline edit, settings panel, */
/* theme picker, toast notification, edit toolbar, sortable drag */

/* ===== PAGE TAB BAR ===== */

.d3view-dashboard-v2 .db-page-tab-bar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    /* background: color-mix(in srgb, var(--db-page-accent) 4%, var(--db-bg-surface, #fff));
    border-bottom: 1px solid var(--db-border-default, #E2E8F0); */
    min-height: 46px;
    position: relative;
    z-index: 5;
    transition: background 0.35s ease;
}
.d3view-dashboard-v2 .db-page-tab-bar .d3view-tab-manager {
    width: 100%;
    border-bottom: none;
}
.d3view-dashboard-v2 .db-page-tabs-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.d3view-dashboard-v2 .db-page-tabs-list {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.d3view-dashboard-v2 .db-page-tabs-list::-webkit-scrollbar {
    display: none;
}

.d3view-dashboard-v2 .db-page-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--db-text-secondary, #475569);
    white-space: nowrap;
    position: relative;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    border: 1px solid transparent;
    border-bottom: none;
}

.d3view-dashboard-v2 .db-page-tab:hover {
    background: var(--db-n-100, #F1F5F9);
    color: var(--db-text-primary, #0F172A);
}

.d3view-dashboard-v2 .db-page-tab.is-active {
    /* Active tab picks up the header tint so it blends into the header seamlessly */
    background: color-mix(in srgb, var(--db-page-accent) 7%, var(--db-bg-surface, #fff));
    color: var(--db-page-accent, #6366F1);
    font-weight: 600;
    border-color: var(--db-border-default, #E2E8F0);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--db-page-accent) 7%, var(--db-bg-surface, #fff));
    z-index: 1;
    transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.d3view-dashboard-v2 .db-page-tab-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-page-tab-icon {
    font-size: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}

.d3view-dashboard-v2 .db-page-tab.is-active .db-page-tab-icon {
    opacity: 1;
}

.d3view-dashboard-v2 .db-page-tab-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-page-tab-drag {
    cursor: grab;
    color: var(--db-n-400, #94A3B8);
    font-size: 11px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.d3view-dashboard-v2 .db-page-tab-drag:hover {
    opacity: 1;
}

.d3view-dashboard-v2 .db-page-tab-menu-btn {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--db-n-400, #94A3B8);
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}

.d3view-dashboard-v2 .db-page-tab:hover .db-page-tab-menu-btn,
.d3view-dashboard-v2 .db-page-tab.is-active .db-page-tab-menu-btn {
    opacity: 1;
}

.d3view-dashboard-v2 .db-page-tab-menu-btn:hover {
    color: var(--db-text-primary, #0F172A);
}

.d3view-dashboard-v2 .db-page-add-btn {
    flex-shrink: 0;
    margin-left: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--db-n-400, #94A3B8);
    border: 1px dashed var(--db-n-300, #CBD5E1);
    background: transparent;
    transition: all 0.15s;
}

.d3view-dashboard-v2 .db-page-add-btn:hover {
    color: var(--db-brand, #30487f);
    border-color: var(--db-brand, #30487f);
    background: var(--db-brand-pale, #e8eef7);
}

/* Sortable placeholder */
.d3view-dashboard-v2 .db-page-tab-placeholder {
    display: inline-block;
    width: 80px;
    height: 32px;
    border: 2px dashed var(--db-brand-light, #5b7db8);
    border-radius: 6px 6px 0 0;
    background: var(--db-brand-pale, #e8eef7);
    opacity: 0.5;
}

/* Sortable dragging state */
.d3view-dashboard-v2 .db-page-tab.ui-sortable-helper {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 6px;
}


/* ===== INLINE RENAME INPUT ===== */

.d3view-dashboard-v2 .db-page-tab-input {
    border: 1px solid var(--db-brand, #30487f);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 13px;
    font-weight: 600;
    width: 120px;
    outline: none;
    background: var(--db-bg-surface, #fff);
    color: var(--db-text-primary, #0F172A);
}


/* ===== PAGE CONTEXT MENU ===== */

.d3view-dashboard-v2 .db-page-menu {
    display: block;
    /* position:fixed and top/left set by JS to avoid overflow-x:auto clipping */
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: 6px;
    border: 1px solid var(--db-border-default, #E2E8F0);
    background: var(--db-bg-surface, #fff);
    padding: 4px 0;
    font-size: 13px;
}

.d3view-dashboard-v2 .db-page-menu > li > a {
    padding: 6px 14px;
    display: block;
    color: var(--db-text-primary, #0F172A);
    text-decoration: none;
}

.d3view-dashboard-v2 .db-page-menu > li > a:hover {
    background: var(--db-n-100, #F1F5F9);
}

.d3view-dashboard-v2 .db-page-menu > li.disabled > a {
    color: var(--db-text-disabled, #CBD5E1);
    pointer-events: none;
}

.d3view-dashboard-v2 .db-page-menu > li.divider {
    margin: 4px 0;
    height: 0;
    border-top: 1px solid var(--db-border-default, #E2E8F0);
}


/* ===== DELETE CONFIRM ===== */

.d3view-dashboard-v2 .db-page-delete-confirm {
    /* position:fixed and top/left set by JS */
    background: var(--db-bg-surface, #fff);
    border: 1px solid var(--db-border-default, #E2E8F0);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 13px;
}


/* ===== THEME PICKER POPOVER ===== */

.d3view-dashboard-v2 .db-page-theme-picker {
    /* position:fixed and top/left set by JS */
    background: var(--db-bg-surface, #fff);
    border: 1px solid var(--db-border-default, #E2E8F0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 10px 14px;
    min-width: 200px;
}

.d3view-dashboard-v2 .db-theme-picker-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--db-text-muted, #94A3B8);
    margin-bottom: 8px;
}

.d3view-dashboard-v2 .db-theme-picker-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.d3view-dashboard-v2 .db-theme-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}

.d3view-dashboard-v2 .db-theme-color-dot:hover {
    transform: scale(1.15);
}

.d3view-dashboard-v2 .db-theme-color-dot.is-selected {
    border-color: var(--db-text-primary, #0F172A);
    box-shadow: 0 0 0 2px var(--db-bg-surface, #fff), 0 0 0 3px var(--db-text-primary, #0F172A);
}


/* ===== DASHBOARD SETTINGS PANEL ===== */

.d3view-dashboard-v2 .db-settings-panel-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35vw;
    min-width: 320px;
    max-width: 680px;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    background: var(--db-bg-surface, #fff);
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
}

.d3view-dashboard-v2 .db-settings-panel-container.is-open {
    transform: translateX(0);
}

/* Reset legacy absolute/transform styles that .d3view-dashboard-v2 .db-settings-panel applies */
/* Note: container is position:fixed which acts as containing block for the resize handle */
.d3view-dashboard-v2 .db-settings-panel-container .db-settings-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: static;
    width: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
    flex: 1 1 auto;
}

.d3view-dashboard-v2 .db-settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--db-border-default, #E2E8F0);
}

.d3view-dashboard-v2 .db-settings-panel__header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--db-text-primary, #0F172A);
}

.d3view-dashboard-v2 .db-settings-panel__body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-settings-field {
    margin-bottom: 16px;
}

.d3view-dashboard-v2 .db-settings-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text-secondary, #475569);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.d3view-dashboard-v2 .db-settings-toggle-row {
    display: flex;
    align-items: center;
}

.d3view-dashboard-v2 .db-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--db-text-primary, #0F172A);
    cursor: pointer;
    font-weight: 400;
}

.d3view-dashboard-v2 .db-settings-divider {
    border-top: 1px solid var(--db-border-default, #E2E8F0);
    margin: 16px 0;
}

.d3view-dashboard-v2 .db-settings-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--db-border-default, #E2E8F0);
    background: var(--db-n-50, #F8FAFC);
    flex-shrink: 0;
    gap: 8px;
}

.d3view-dashboard-v2 .db-settings-footer-delete {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-settings-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-settings-delete-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}


/* ===== SETTINGS PANEL: resize handle ===== */

.d3view-dashboard-v2 .db-settings-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
}

.d3view-dashboard-v2 .db-settings-resize-handle:hover {
    background: rgba(48, 72, 127, 0.12);
}

/* ===== SETTINGS PANEL: scope date select ===== */

.d3view-dashboard-v2 .db-settings-panel .js-settings-scope-date {
    padding: 0 10px 0 30px;
    font-size: 13px;
    border-radius: 8px;
    height: 34px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    background: #fff;
    color: var(--db-n-700, #334155);
    cursor: pointer;
    width: 150px;
    transition: border-color 0.15s;
}

.d3view-dashboard-v2 .db-settings-panel .js-settings-scope-date:focus {
    border-color: var(--db-brand, #30487f);
    outline: none;
}

/* ===== SETTINGS PANEL: spaced toggle row ===== */

.d3view-dashboard-v2 .db-settings-toggle-row--spaced {
    margin-top: 10px;
}

/* ===== SETTINGS PANEL: remove button in footer ===== */

.d3view-dashboard-v2 .db-settings-remove-btn {
    color: var(--db-danger, #EF4444);
    border-color: var(--db-danger, #EF4444);
}

.d3view-dashboard-v2 .db-settings-remove-btn:hover {
    background: var(--db-danger-bg, #FEE2E2);
}

.d3view-dashboard-v2 .db-settings-delete-confirm {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* ===== TOAST NOTIFICATION (undo) ===== */

.d3view-dashboard-v2 .db-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    z-index: 2000;
    background: var(--db-n-800, #1E293B);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}

.d3view-dashboard-v2 .db-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.d3view-dashboard-v2 .db-toast-undo {
    color: var(--db-brand-light, #5b7db8);
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
}

.d3view-dashboard-v2 .db-toast-undo:hover {
    color: #fff;
}


/* ===== EDIT MODE BUTTON TOGGLE (inline within action bar) ===== */

/* Buttons hidden in edit mode */
.d3view-dashboard-v2.db-editing .db-hide-in-edit {
    display: none !important;
}

/* Buttons shown only in edit mode */
.d3view-dashboard-v2 .db-show-in-edit {
    display: none !important;
}
.d3view-dashboard-v2.db-editing .db-show-in-edit {
    display: inline-flex !important;
    align-items: center;
}


/* ===== FLOATING ACTION PILL (vertical tab layout) ===== */
/* When vertical page tabs are active, the tab bar is hidden and these actions float */
.d3view-dashboard-v2 .db-fab-pill {
    position: absolute; bottom: 20px; right: 20px; z-index: 50;
    display: flex; align-items: center; gap: 2px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-full);
    box-shadow: var(--d3v-sh-lg);
    padding: 4px;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--d3v-t-smooth), transform var(--d3v-t-smooth);
}
/* Show on page body hover */
.d3view-dashboard-v2 .db-page-body:hover .db-fab-pill,
.d3view-dashboard-v2 .db-fab-pill:hover {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.d3view-dashboard-v2 .db-fab-pill .db-fab-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: none; border-radius: var(--d3v-r-full);
    background: transparent; color: var(--d3v-text-secondary);
    font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background var(--d3v-t-fast), color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .db-fab-pill .db-fab-btn:hover {
    background: var(--d3v-bg-hover); color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .db-fab-pill .db-fab-btn .fa { font-size: 13px; }
.d3view-dashboard-v2 .db-fab-pill .db-fab-divider {
    width: 1px; height: 20px; background: var(--d3v-border); flex-shrink: 0;
}
/* Edit-mode variant: show Done/Cancel in the pill */
.d3view-dashboard-v2.db-editing .db-fab-pill .db-fab-btn-done {
    background: var(--d3v-accent); color: var(--d3v-text-inverse);
}
.d3view-dashboard-v2.db-editing .db-fab-pill .db-fab-btn-done:hover {
    background: var(--d3v-accent-hover);
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Right-rail FAB variant used by
 * Simlytiks Advanced Dashboard. Stacks buttons vertically on the right edge, icon-only,
 * always visible (no hover reveal). **/
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail {
    flex-direction: column;
    align-items: stretch;
    top: 50%;
    right: 12px;
    bottom: auto;
    left: auto;
    /* Hidden by default — slide in from the right on page hover. Vertical centering
       via translateY(-50%) is preserved across both states. */
    transform: translate(8px, -50%);
    padding: 6px 4px;
    gap: 4px;
    border-radius: var(--d3v-r-lg, 14px);
}
.d3view-dashboard-v2 .db-page-body:hover .db-fab-pill.db-fab-right-rail,
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail:hover {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail .db-fab-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
}
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail .db-fab-btn .db-fab-label {
    display: none;
}
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail .db-fab-btn .fa {
    font-size: 15px;
}
.d3view-dashboard-v2 .db-fab-pill.db-fab-right-rail .db-fab-divider {
    width: 20px;
    height: 1px;
    margin: 2px auto;
}
/* DVFIV-1997 - Reserve a right gutter on the page body when the right-rail FAB is
   present so the floating column never overlaps gridstack widgets / brushes. */
.d3view-dashboard-v2 .db-page-body:has(.db-fab-pill.db-fab-right-rail) {
    padding-right: 60px;
}

/* ===== EDIT MODE ROOT STATE ===== */

/* .d3view-dashboard-v2.db-root.db-editing .db-page-tab-bar {
    background: var(--db-brand-pale, #e8eef7);
} */

/* Highlight the header to signal edit mode */
.d3view-dashboard-v2.db-editing .db-dashboard-header {
    background: var(--db-brand-pale, #e8eef7);
}


/* ===== SETTINGS BUTTON IN HEADER ===== */

.d3view-dashboard-v2 .db-settings-btn {
    color: var(--db-n-400, #94A3B8);
    transition: color 0.15s;
}

.d3view-dashboard-v2 .db-settings-btn:hover {
    color: var(--db-text-primary, #0F172A);
}


/* ===== ICON PICKER SIDEBAR (DVFIV-1938) ===== */

.d3view-dashboard-v2 .db-icon-picker-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 35vw;
    min-width: 320px;
    max-width: 520px;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    background: var(--db-bg-surface, #fff);
    box-shadow: -4px 0 24px rgba(0,0,0,0.1);
}

.d3view-dashboard-v2 .db-icon-picker-container.is-open {
    transform: translateX(0);
}

.d3view-dashboard-v2 .db-icon-picker-container .db-settings-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: static;
    width: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Search input wrapper */
.d3view-dashboard-v2 .db-icon-picker-search-wrap {
    position: relative;
}

.d3view-dashboard-v2 .db-icon-picker-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--db-n-400, #94a3b8);
    font-size: 12px;
    pointer-events: none;
}

.d3view-dashboard-v2 .db-icon-picker-search-wrap .form-control {
    padding-left: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.d3view-dashboard-v2 .db-icon-picker-search-wrap .form-control:focus {
    border-color: var(--db-wt-indigo, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Preview area */
.d3view-dashboard-v2 .db-icon-picker-preview {
    padding: 8px 12px;
    border: 1.5px solid var(--db-n-200, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    background: var(--db-n-50, #f8fafc);
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-icon-picker-preview i {
    font-size: 18px;
    color: var(--db-wt-indigo, #6366F1);
}

/* Icon grid */
.d3view-dashboard-v2 .db-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 10px;
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-icon-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 12px 4px 8px;
    border: 2px solid var(--db-n-200, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    color: var(--db-n-600, #475569);
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}

.d3view-dashboard-v2 .db-icon-picker-item i {
    font-size: 20px;
}

.d3view-dashboard-v2 .db-icon-picker-caption {
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    color: var(--db-n-400, #94a3b8);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

.d3view-dashboard-v2 .db-icon-picker-item:hover {
    border-color: var(--db-n-300, #cbd5e1);
    background: var(--db-n-50, #f8fafc);
    transform: scale(1.06);
    color: var(--db-n-800, #1e293b);
}

.d3view-dashboard-v2 .db-icon-picker-item:hover .db-icon-picker-caption {
    color: var(--db-n-600, #475569);
}

.d3view-dashboard-v2 .db-icon-picker-item.is-selected {
    border-color: var(--db-wt-indigo, #6366F1);
    background: rgba(99, 102, 241, 0.04);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    color: var(--db-wt-indigo, #6366F1);
}

.d3view-dashboard-v2 .db-icon-picker-item.is-selected .db-icon-picker-caption {
    color: var(--db-wt-indigo, #6366F1);
}

/* Empty state */
.d3view-dashboard-v2 .db-icon-picker-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: var(--db-n-400, #94a3b8);
    font-size: 13px;
}

/* ============================================================
   DVFIV-2002 - Dashboard color scheme picker
   Added by shashank2104 on 2026-04-17
   ------------------------------------------------------------
   - Select2 dropdown rows show name + a strip of swatches.
   - Below the select we render the active scheme's full swatch row.
   ============================================================ */

.d3view-dashboard-v2 .db-settings-color-scheme {
    margin-bottom: 8px;
}

.d3view-dashboard-v2 .db-color-scheme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 6px 8px;
    background: var(--db-bg-secondary, var(--d3v-bg-secondary, #F8FAFC));
    border: 1px solid var(--db-border-default, var(--d3v-border, #E2E8F0));
    border-radius: var(--db-r-md, var(--d3v-r-md, 8px));
    min-height: 28px;
    transition: var(--d3v-t-fast, 0.12s);
}

.d3view-dashboard-v2 .db-color-scheme-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: var(--db-r-sm, var(--d3v-r-sm, 4px));
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    transition: transform var(--d3v-t-fast, 0.12s);
}

.d3view-dashboard-v2 .db-color-scheme-swatch:hover {
    transform: scale(1.12);
}

.d3view-dashboard-v2 .db-color-scheme-swatch--xs {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Select2 option rendering (name + inline swatches) */
.d3view-dashboard-v2 .db-color-scheme-option,
.db-color-scheme-dropdown .db-color-scheme-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.d3view-dashboard-v2 .db-color-scheme-option__name,
.db-color-scheme-dropdown .db-color-scheme-option__name {
    font-size: 13px;
    color: var(--db-text-primary, var(--d3v-text-primary, #1E293B));
    font-weight: 500;
}

.d3view-dashboard-v2 .db-color-scheme-option__swatches,
.db-color-scheme-dropdown .db-color-scheme-option__swatches {
    display: inline-flex;
    gap: 3px;
}

.db-color-scheme-dropdown .select2-result-label {
    padding: 6px 10px;
}

/* ── Suggested Questions ──────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--db-n-100, #f0f0f0);
    background: var(--db-s-50, #fafbfc);
}

.d3view-dashboard-v2 .db-chat-suggestion-btn {
    font-size: 11px;
    border-radius: 12px;
    padding: 4px 10px;
    background: var(--db-s-100, #f5f5f5);
    border: 1px solid var(--db-n-200, #e5e5e5);
    color: var(--db-t-secondary, #666);
    transition: all 0.15s ease;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-chat-suggestion-btn:hover {
    background: var(--db-brand, #6366F1);
    color: #fff;
    border-color: var(--db-brand, #6366F1);
}

.d3view-dashboard-v2 .db-chat-suggestion-btn .fa {
    margin-right: 3px;
    font-size: 10px;
    opacity: 0.7;
}

/* ── Rich Table Response ──────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-rich-table {
    margin: 8px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--db-n-200, #e5e5e5);
}

.d3view-dashboard-v2 .db-chat-table {
    margin-bottom: 0;
    font-size: 11px;
}

.d3view-dashboard-v2 .db-chat-table-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--db-t-secondary, #666);
}

.d3view-dashboard-v2 .db-chat-table-th:hover {
    background: var(--db-s-100, #f5f5f5);
}

.d3view-dashboard-v2 .db-chat-table-expand {
    padding: 6px;
    text-align: center;
    background: var(--db-s-50, #fafbfc);
    border-top: 1px solid var(--db-n-100, #f0f0f0);
}

/* ── Rich KPI Number ──────────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-rich-kpi {
    text-align: center;
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--db-brand, #6366F1) 0%, #818cf8 100%);
    color: #fff;
}

.d3view-dashboard-v2 .db-chat-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.d3view-dashboard-v2 .db-chat-kpi-label {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 2px;
}

.d3view-dashboard-v2 .db-chat-kpi-sublabel {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 2px;
}

/* ── Entity Card ──────────────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-entity-card {
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--db-brand, #6366F1);
    background: var(--db-s-50, #fafbfc);
    border: 1px solid var(--db-n-200, #e5e5e5);
    border-left: 3px solid var(--db-brand, #6366F1);
}

.d3view-dashboard-v2 .db-chat-entity-card-header {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .db-chat-entity-card-header i {
    color: var(--db-brand, #6366F1);
}

.d3view-dashboard-v2 .db-chat-entity-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.d3view-dashboard-v2 .db-chat-entity-field {
    font-size: 11px;
}

.d3view-dashboard-v2 .db-chat-entity-field-label {
    color: var(--db-t-secondary, #888);
    margin-right: 4px;
}

.d3view-dashboard-v2 .db-chat-entity-field-value {
    font-weight: 500;
}

.d3view-dashboard-v2 .db-chat-entity-card-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

/* ── Action Buttons ───────────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.d3view-dashboard-v2 .db-chat-action-btn {
    font-size: 11px;
    border-radius: 4px;
}

.d3view-dashboard-v2 .db-chat-action-btn .fa {
    margin-right: 3px;
}

/* ── Bar Chart ────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-rich-bar-chart {
    margin: 8px 0;
    height: 140px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--db-s-50, #fafbfc);
    border: 1px solid var(--db-n-200, #e5e5e5);
}

.d3view-dashboard-v2 .db-chat-rich-bar-chart svg {
    width: 100%;
    height: 100%;
}

/* ── Pattern/Anomaly Card ─────────────────────────────────── */
.d3view-dashboard-v2 .db-chat-rich-pattern {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--db-s-50, #fafbfc);
    border: 1px solid var(--db-n-200, #e5e5e5);
}

.d3view-dashboard-v2 .db-chat-rich-pattern-header {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .db-chat-rich-pattern-header .fa {
    color: var(--db-warning, #F59E0B);
}

.d3view-dashboard-v2 .db-chat-pattern-message {
    font-size: 12px;
    color: var(--db-t-secondary, #666);
    margin-bottom: 6px;
}

.d3view-dashboard-v2 .db-chat-pattern-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.d3view-dashboard-v2 .db-chat-pattern-stat {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--db-s-100, #eee);
    border-radius: 4px;
}

.d3view-dashboard-v2 .db-chat-pattern-stat em {
    font-style: normal;
    color: var(--db-t-secondary, #888);
    margin-right: 3px;
}

/* ── Rich Response: fora-print polish ────────────────────── */
/* Styles for AI-generated HTML rendered inside the fora chat panel */

.d3view-dashboard-v2 .fora-print h4,
.d3view-dashboard-v2 .fora-print h3 {
    font-size: 12px;
    font-weight: 600;
    margin: 10px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--db-n-100, #f0f0f0);
    color: var(--db-t-primary, #333);
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-dashboard-v2 .fora-print h4 .fa,
.d3view-dashboard-v2 .fora-print h3 .fa {
    color: var(--db-brand, #6366F1);
    font-size: 11px;
}

/* Section heading injected by AI responses */
.d3view-dashboard-v2 .fora-print .db-res-heading {
    font-size: 12px;
    font-weight: 600;
    margin: 8px 0 5px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--db-brand, #6366F1);
    color: var(--db-t-primary, #333);
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-dashboard-v2 .fora-print .db-res-heading .fa {
    color: var(--db-brand, #6366F1);
    font-size: 11px;
}

/* Tables generated by AI responses */
.d3view-dashboard-v2 .fora-print table {
    font-size: 11px;
    margin: 6px 0 10px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--db-n-200, #e5e5e5);
}

.d3view-dashboard-v2 .fora-print table thead th {
    background: var(--db-brand, #6366F1);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 5px 8px;
    border: none;
    white-space: nowrap;
}

.d3view-dashboard-v2 .fora-print table tbody td {
    padding: 4px 8px;
    vertical-align: middle;
    border-color: var(--db-n-100, #f0f0f0);
    color: var(--db-t-primary, #333);
}

.d3view-dashboard-v2 .fora-print table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--db-s-50, #fafbfc);
}

/* Bootstrap labels in AI responses */
.d3view-dashboard-v2 .fora-print .label {
    font-size: 10px;
    font-weight: 500;
    border-radius: 3px;
    padding: 2px 6px;
    letter-spacing: 0.2px;
}

/* Progress bar in grouped aggregate tables */
.d3view-dashboard-v2 .fora-print .progress {
    height: 8px;
    margin: 3px 0 0;
    border-radius: 4px;
    background-color: var(--db-n-100, #f0f0f0);
}

.d3view-dashboard-v2 .fora-print .progress-bar {
    background-color: var(--db-brand, #6366F1);
    border-radius: 4px;
}

/* Icons inside AI response text */
.d3view-dashboard-v2 .fora-print p > .fa,
.d3view-dashboard-v2 .fora-print li > .fa {
    color: var(--db-brand, #6366F1);
    margin-right: 4px;
    font-size: 12px;
}

.d3view-dashboard-v2 .fora-print .text-success .fa,
.d3view-dashboard-v2 .fora-print p > .fa.text-success {
    color: #3c763d;
}

.d3view-dashboard-v2 .fora-print p > .fa.text-danger,
.d3view-dashboard-v2 .fora-print .text-danger > .fa {
    color: #a94442;
}

/* Blockquote for insights / highlighted notes */
.d3view-dashboard-v2 .fora-print blockquote {
    font-size: 11px;
    border-left: 3px solid var(--db-brand, #6366F1);
    background: var(--db-s-50, #fafbfc);
    padding: 6px 10px;
    margin: 8px 0;
    color: var(--db-t-secondary, #666);
    border-radius: 0 4px 4px 0;
}

/* Widget list cards rendered inline by AI */
.d3view-dashboard-v2 .fora-print .db-chat-widget-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0;
}

.d3view-dashboard-v2 .fora-print .db-chat-widget-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--db-s-50, #fafbfc);
    border: 1px solid var(--db-n-200, #e5e5e5);
    font-size: 12px;
}

.d3view-dashboard-v2 .fora-print .db-chat-widget-item .fa {
    color: var(--db-brand, #6366F1);
    font-size: 13px;
    width: 16px;
    text-align: center;
}

/* Relation list (ontology graph display) */
.d3view-dashboard-v2 .fora-print .db-chat-relation-list {
    list-style: none;
    padding: 0;
    margin: 6px 0;
}

.d3view-dashboard-v2 .fora-print .db-chat-relation-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--db-n-100, #f0f0f0);
}

.d3view-dashboard-v2 .fora-print .db-chat-relation-list li:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .fora-print .db-chat-relation-list .fa {
    color: var(--db-brand, #6366F1);
}

/* Follow-up suggestion text */
.d3view-dashboard-v2 .fora-print p.text-muted em {
    font-size: 10px;
    font-style: italic;
    color: var(--db-t-muted, #999);
    border-top: 1px solid var(--db-n-100, #f0f0f0);
    display: block;
    padding-top: 5px;
    margin-top: 4px;
}

/* ── Chat History Clear Button ────────────────────────────── */
.d3view-dashboard-v2 .db-ai-chat-clear-btn {
    font-size: 11px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.d3view-dashboard-v2 .db-ai-chat-clear-btn:hover {
    opacity: 1;
}

/* ── AI note shown below rich tool output ─────────────────── */
.d3view-dashboard-v2 .fora-print .db-ai-note {
    font-size: 11px;
    color: var(--db-t-muted, #999);
    border-top: 1px solid var(--db-n-100, #f0f0f0);
    margin-top: 8px;
    padding-top: 6px;
}

/* ── Rich tool output wrapper ─────────────────────────────── */
.d3view-dashboard-v2 .fora-print .db-chat-relation-section {
    padding: 4px 0 2px;
    font-size: 11px;
    color: var(--db-t-primary, #444);
}

.d3view-dashboard-v2 .fora-print .db-chat-relation-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 3px 0 3px 12px;
    border-bottom: 1px solid var(--db-n-100, #f0f0f0);
}

.d3view-dashboard-v2 .fora-print .db-chat-relation-item:last-child {
    border-bottom: none;
}

/* ── Graph tab container ─────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-data-graph {
    background: #ffffff;
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-toolbar {
    display: flex;
    align-items: center;
    padding: 7px 14px;
    border-bottom: 1px solid var(--db-border, #e0e6ef);
    background: var(--db-surface, #fff);
    flex-shrink: 0;
    gap: 12px;
    min-height: 42px;
}

.d3view-dashboard-v2 .db-graph-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-graph-toolbar-icon {
    color: var(--plugin-primary-color, #6366f1);
    font-size: 15px;
}

.d3view-dashboard-v2 .db-graph-toolbar-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--db-text-primary, #1e293b);
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-graph-stats {
    font-size: 11px;
    color: var(--db-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-graph-toolbar-center {
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-graph-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Mode buttons active state */
.d3view-dashboard-v2 .db-graph-mode-group .btn.active {
    background: var(--plugin-primary-color, #6366f1);
    color: #fff;
    border-color: var(--plugin-primary-color, #6366f1);
}



/* ── Legend ──────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--db-border, #e0e6ef);
    background: var(--db-surface, #fff);
    flex-shrink: 0;
    min-height: 34px;
}

.d3view-dashboard-v2 .db-graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--db-text-secondary, #475569);
    cursor: default;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-graph-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Canvas body ─────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-body {
    background: #ffffff;
    position: relative;
}

.d3view-dashboard-v2 .db-graph-canvas-container {
    width: 100%;
    height: 100%;
}

/* Viz.GraphViz inner elements */
.d3view-dashboard-v2 .db-graph-canvas-container .graph {
    width: 100%;
    height: 100%;
}

/* ── Expand/collapse fade transition ─────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-canvas-container.db-graph-canvas-fading {
    opacity: 0.15;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.d3view-dashboard-v2 .db-graph-canvas-container {
    opacity: 1;
    transition: opacity 0.18s ease;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--db-text-muted, #94a3b8);
    z-index: 2;
    background: #ffffff;
}

.d3view-dashboard-v2 .db-graph-empty-icon {
    font-size: 48px;
    opacity: 0.25;
    display: block;
}

.d3view-dashboard-v2 .db-graph-empty-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--db-text-secondary, #64748b);
}

.d3view-dashboard-v2 .db-graph-empty-sub {
    font-size: 13px;
    margin: 0;
    text-align: center;
    max-width: 320px;
}

/* ── Hint bar ────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .db-graph-hint-bar {
    flex-shrink: 0;
    padding: 5px 14px;
    font-size: 11px;
    color: var(--db-text-muted, #94a3b8);
    border-top: 1px solid var(--db-border, #e0e6ef);
    background: var(--db-surface, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-graph-hint-bar .fa-info-circle {
    color: var(--plugin-primary-color, #6366f1);
    margin-right: 4px;
}

/* ── Detail panel (rendered inside GenericSidebarView) ───────────────── */
.d3view-dashboard-v2 .db-graph-detail-panel {
    font-size: 13px;
}

.d3view-dashboard-v2 .db-graph-detail-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 0;
    border-radius: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.d3view-dashboard-v2 .db-graph-detail-props {
    padding: 8px 0;
    max-height: 60vh;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-graph-detail-row {
    display: flex;
    padding: 5px 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    align-items: flex-start;
}

.d3view-dashboard-v2 .db-graph-detail-key {
    flex: 0 0 130px;
    font-weight: 500;
    color: #64748b;
    font-size: 12px;
    word-break: break-word;
}

.d3view-dashboard-v2 .db-graph-detail-val {
    flex: 1;
    color: #1e293b;
    word-break: break-word;
    font-size: 12px;
}

/* ── Responsive: hide hint text on small containers ─────────────────── */
@media (max-width: 600px) {
    .d3view-dashboard-v2 .db-graph-hint-bar {
        display: none;
    }
    .d3view-dashboard-v2 .db-graph-legend {
        display: none;
    }
}

/* ── Global Filters Bar ── */

.d3view-dashboard-v2 .db-global-filters-bar {
    flex-shrink: 0;
    min-height: 48px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 200px;
    opacity: 1;
    background: var(--db-bg-surface, #fff);
    border-bottom: 1px solid var(--db-border, #E2E8F0);
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.d3view-dashboard-v2 .db-global-filters-bar.hidden {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    overflow: hidden;
}

/* ── Intent dashboard badge in header ────────────────────────────── */

.d3view-dashboard-v2 .db-intent-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    background: linear-gradient(135deg, #6366F120, #8B5CF620);
    color: #6366F1;
    margin-left: 8px;
}

/* ── Scope chips in global filters bar ────────────────────────────── */

.d3view-dashboard-v2 .db-scope-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #E2E8F0;
    margin-right: 6px;
    white-space: nowrap;
}

.d3view-dashboard-v2.db-dark .db-scope-chip {
    background: #1E293B;
    color: #CBD5E1;
    border-color: #334155;
}

/* Widget role indicators (primary/secondary) removed */

/* ── Widget waiting state (secondary waiting for upstream) ──────── */

.d3view-dashboard-v2 .db-widget-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 20px;
    text-align: center;
    color: #a0aec0;
}

.d3view-dashboard-v2 .db-widget-waiting i {
    font-size: 28px;
    opacity: 0.5;
    animation: db-intent-pulse 1.5s ease-in-out infinite;
}

.d3view-dashboard-v2 .db-widget-waiting span {
    font-size: 13px;
}

@keyframes db-intent-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.7; }
}

/* ── Settings Panel: Intent Configuration Section ──────────────────── */

.d3view-dashboard-v2 .db-settings-intent-section {
    border: 1px solid #e8eaee;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.d3view-dashboard-v2 .db-settings-intent-section h5 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #555;
}

.d3view-dashboard-v2 .db-settings-intent-entity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.d3view-dashboard-v2 .db-settings-intent-entity-icon {
    width: 20px;
    text-align: center;
}

/* ── Compact header adjustments for intent dashboards ──────────── */

.d3view-dashboard-v2.db-intent-active .db-dashboard-header {
    padding: 6px 16px;
}

.d3view-dashboard-v2.db-intent-active .db-header-title {
    font-size: 16px;
    line-height: 1.2;
}

.d3view-dashboard-v2.db-intent-active .db-header-subtitle {
    display: none;
}

.d3view-dashboard-v2.db-intent-active .db-header-logo {
    width: 24px;
    height: 24px;
}

/* ── Widget Stats Footer ─────────────────────────────────────────── */

.d3view-dashboard-v2 .db-widget-stats-footer {
    display: flex;
    gap: 12px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--db-n-500, #64748b);
    border-top: 1px solid var(--db-n-100, #f1f5f9);
}

.d3view-dashboard-v2 .db-widget-stats-footer span {
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-widget-stats-footer strong {
    font-weight: 600;
    color: var(--db-n-700, #334155);
}

@keyframes db-fab-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes db-fab-pill-pop {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes db-fab-source-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--fab-source-color, rgba(48, 72, 127, 0.3)); }
    50%      { box-shadow: 0 0 0 4px transparent; }
}

.d3view-dashboard-v2 .db-floating-actions-bar {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    min-height: 45px;
    min-width: 320px;
    max-width: calc(100% - 40px);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    padding: 0 12px;
    display: flex;
    align-items: center;
    animation: db-fab-slide-up 0.3s ease-out both;
}

/* ── Source pill (the filtered/selected entity) ── */

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-source-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--fab-source-color, #30487f) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--fab-source-color, #30487f) 25%, transparent);
    flex-shrink: 0;
    white-space: nowrap;
    animation: db-fab-source-pulse 1.8s ease-in-out 1;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-source-pill-icon {
    font-size: 13px;
    color: var(--fab-source-color, #30487f);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-source-pill-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--fab-source-color, #30487f);
    line-height: 1;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-source-pill-label {
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--fab-source-color, #30487f) 80%, #000);
    line-height: 1;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-source-pill-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: var(--fab-source-color, #30487f);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    margin-left: 2px;
}

/* ── Action buttons ── */

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-actions {
    gap: 4px;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-actions .btn {
    font-size: 12px;
    white-space: nowrap;
}

/* ── Divider ── */

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-divider {
    width: 1px;
    height: 24px;
    background: var(--db-border, #e2e8f0);
    flex-shrink: 0;
    margin: 0 8px;
}

/* ── Downstream stat pills ── */

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-stats {
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-stats .db-stat-pill {
    padding: 0 10px;
    height: 30px;
    font-size: 12px;
    background: var(--db-bg-offset, #f8fafc);
    border-radius: 6px;
    flex-shrink: 0;
    animation: db-fab-pill-pop 0.3s ease-out both;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-stats .db-stat-pill-value {
    font-size: 13px;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-stats .db-stat-pill-label {
    font-size: 11px;
}

/* ── Dismiss button ── */

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-dismiss {
    opacity: 0.6;
    transition: opacity 0.15s;
}

.d3view-dashboard-v2 .db-floating-actions-bar .db-fab-dismiss:hover {
    opacity: 1;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-toolbar {
    padding: var(--db-sp-2, 8px) var(--db-sp-3, 12px);
    border-bottom: 1px solid var(--db-border, #e2e8f0);
    flex-shrink: 0;
    gap: 8px;
}

.d3view-dashboard-v2 .db-ssm-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.d3view-dashboard-v2 .db-ssm-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--db-brand-pale, #e8eef7);
    color: var(--db-brand, #30487f);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-ssm-stat-badge i {
    font-size: 10px;
    opacity: 0.7;
}

.d3view-dashboard-v2 .db-ssm-toolbar-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Groups container ────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-groups {
    padding: var(--db-sp-2, 8px);
}

/* ── Group card ──────────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-group {
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: var(--db-radius, 8px);
    margin-bottom: var(--db-sp-2, 8px);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .db-ssm-group:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── Group header ────────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--db-n-50, #f8fafc), var(--db-bg-surface, #fff));
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.d3view-dashboard-v2 .db-ssm-group-header:hover {
    background: linear-gradient(135deg, var(--db-brand-pale, #e8eef7), rgba(99, 102, 241, 0.04));
}

.d3view-dashboard-v2 .db-ssm-chevron {
    transition: transform 0.2s ease;
    font-size: 11px;
    color: var(--db-n-400, #94a3b8);
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.d3view-dashboard-v2 .db-ssm-group.collapsed .db-ssm-chevron {
    transform: rotate(-90deg);
}

.d3view-dashboard-v2 .db-ssm-group-color {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-ssm-group-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--db-text-primary, #1e293b);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-ssm-group-meta {
    margin-left: auto;
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-ssm-meta-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    background: var(--db-n-100, #f1f5f9);
    color: var(--db-n-600, #475569);
}

.d3view-dashboard-v2 .db-ssm-meta-badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.d3view-dashboard-v2 .db-ssm-meta-badge-muted {
    background: var(--db-n-100, #f1f5f9);
    color: var(--db-n-400, #94a3b8);
}

/* ── Group body ──────────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-group-body {
    padding: var(--db-sp-2, 8px) var(--db-sp-3, 12px) var(--db-sp-3, 12px);
    border-top: 1px solid var(--db-n-100, #f1f5f9);
}

/* ── Matrix table ────────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.d3view-dashboard-v2 .db-ssm-matrix-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.d3view-dashboard-v2 .db-ssm-matrix-table th {
    background: var(--db-n-50, #f8fafc);
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--db-border, #e2e8f0);
    white-space: nowrap;
    color: var(--db-n-500, #64748b);
    position: sticky;
    top: 0;
    z-index: 1;
}

.d3view-dashboard-v2 .db-ssm-matrix-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--db-n-100, #f1f5f9);
    color: var(--db-text-primary, #1e293b);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-ssm-matrix-table tr:hover td {
    background: rgba(99, 102, 241, 0.04);
}

/* Sticky sim name column */
.d3view-dashboard-v2 .db-ssm-matrix-table th.db-ssm-sim-col,
.d3view-dashboard-v2 .db-ssm-matrix-table td.db-ssm-sim-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--db-bg-surface, #fff);
    min-width: 140px;
    max-width: 220px;
    font-weight: 600;
    border-right: 2px solid var(--db-border, #e2e8f0);
}

.d3view-dashboard-v2 .db-ssm-matrix-table th.db-ssm-sim-col {
    background: var(--db-n-50, #f8fafc);
    z-index: 3;
}

/* Clickable simulation name */
.d3view-dashboard-v2 .db-ssm-sim-name-link {
    cursor: pointer;
    transition: color 0.15s ease;
}

.d3view-dashboard-v2 .db-ssm-sim-name-link:hover {
    color: var(--db-brand, #30487f);
    text-decoration: underline;
}

/* Value cells */
.d3view-dashboard-v2 .db-ssm-cell-value {
    font-variant-numeric: tabular-nums;
}

.d3view-dashboard-v2 .db-ssm-cell-empty {
    color: var(--db-n-300, #cbd5e1);
    font-style: italic;
}

.d3view-dashboard-v2 .db-ssm-cell-curve {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* ── Inline cell viz (curve/complex responses) ──────────── */

.d3view-dashboard-v2 .db-ssm-cell-viz-wrap {
    min-width: 150px;
    height: 80px;
    position: relative;
}

/* ── Uncommon responses section ──────────────────────────── */

.d3view-dashboard-v2 .db-ssm-uncommon-section {
    margin-top: var(--db-sp-2, 8px);
    padding-top: var(--db-sp-2, 8px);
    border-top: 1px dashed var(--db-n-200, #e2e8f0);
}

/* ── Simulation picker (empty state) ─────────────────────── */

.d3view-dashboard-v2 .db-ssm-picker {
    height: 100%;
    gap: 14px;
    padding: 12px;
}
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-picker-input .multiselect-container,
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-picker-input .multiselect-container .d3view-multiselect {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-picker-input .multiselect-container .multiselect-body {
    flex: 1;
}
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-picker-input .multiselect-container .multiselect-body .vlist,
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-picker-input .multiselect-container .multiselect-body .vlist .ui-selectable {
    height: 100%!important;
}

/* ── Application type selector row ───────────────────────── */
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-app-type-row {
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-ssm-picker .db-ssm-app-type-select {
    height: 30px;
    font-size: 13px;
    border-radius: 4px;
}

/* ── Loading skeleton ────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-loading {
    animation: db-ssm-fadein 0.3s ease;
}

.d3view-dashboard-v2 .db-ssm-skeleton-bar {
    background: linear-gradient(90deg, var(--db-n-100, #f1f5f9) 25%, var(--db-n-50, #f8fafc) 50%, var(--db-n-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: db-ssm-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.d3view-dashboard-v2 .db-ssm-skeleton-group {
    border: 1px solid var(--db-n-100, #f1f5f9);
    border-radius: var(--db-radius, 8px);
    overflow: hidden;
}

@keyframes db-ssm-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes db-ssm-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Timeline view ──────────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-timeline-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-ssm-tl-ctrl-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--db-n-500, #64748b);
}

.d3view-dashboard-v2 .db-ssm-tl-scale-mode-select {
    font-size: 11px;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 4px;
    background: var(--db-bg-surface, #fff);
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
}

.d3view-dashboard-v2 .db-ssm-timeline-body {
    padding: var(--db-sp-2, 8px);
    min-height: 0;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-ssm-timeline-charts {
    display: flex;
    flex-direction: row;
    min-height: 0;
}

.d3view-dashboard-v2 .db-ssm-tl-xaxis-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--db-n-100, #f1f5f9);
    padding: 0 8px;
}

.d3view-dashboard-v2 .db-ssm-tl-chart-area {
    flex: 1;
    min-width: 0;
    padding: 8px;
}

.d3view-dashboard-v2 .db-ssm-tl-chart-area svg {
    width: 100%;
}

.d3view-dashboard-v2 .db-ssm-tl-legend-sidebar {
    width: 180px;
    flex-shrink: 0;
    border-left: 1px solid var(--db-n-100, #f1f5f9);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-ssm-tl-legend-sidebar .db-ssm-tl-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--db-n-600, #475569);
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-ssm-tl-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-ssm-tl-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Grouped mode band styles */
.d3view-dashboard-v2 .db-ssm-tl-band-sep {
    stroke: var(--db-n-200, #e2e8f0);
    stroke-width: 1;
    stroke-dasharray: 4, 3;
}

.d3view-dashboard-v2 .db-ssm-tl-band-label {
    font-size: 10px;
    font-weight: 600;
    fill: var(--db-n-500, #64748b);
}

/* ── Timeline daterange input ────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-tl-daterange-input {
    font-size: 11px;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 4px;
    background: var(--db-bg-surface, #fff);
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
    width: 180px;
}

/* ── Timeline brush bar ─────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-tl-brush-bar {
    height: 64px;
    flex: 0 0 64px;
    border-top: 1px solid var(--db-border, #e2e8f0);
    padding: 0;
}

.d3view-dashboard-v2 .db-ssm-tl-brush-area {
    fill: rgba(99, 102, 241, 0.12);
}

.d3view-dashboard-v2 .db-ssm-tl-brush-line {
    fill: none;
    stroke: #6366F1;
    stroke-width: 1.5;
}

.d3view-dashboard-v2 .db-ssm-tl-brush-axis .domain,
.d3view-dashboard-v2 .db-ssm-tl-brush-axis .tick line {
    stroke: var(--db-n-200, #e2e8f0);
}

.d3view-dashboard-v2 .db-ssm-tl-brush-axis .tick text {
    font-size: 9px;
    fill: var(--db-n-500, #64748b);
}

.d3view-dashboard-v2 .db-ssm-tl-brush-g .selection {
    fill: rgba(99, 102, 241, 0.25);
    stroke: #6366F1;
    stroke-width: 1;
}

.d3view-dashboard-v2 .db-ssm-tl-brush-handle {
    fill: #6366F1;
    stroke: #fff;
    stroke-width: 1.5;
    cursor: ew-resize;
}

/* ── Curves evolution view ─────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-curves-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-ssm-curves-toolbar-controls select {
    font-size: 11px;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 4px;
    background: var(--db-bg-surface, #fff);
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
}

.d3view-dashboard-v2 .db-ssm-curves-toolbar-controls input.db-ssm-curves-daterange-input {
    font-size: 11px;
    height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 4px;
    background: var(--db-bg-surface, #fff);
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
    width: 180px;
}

.d3view-dashboard-v2 .db-ssm-curves-body {
    padding: var(--db-sp-2, 8px);
}

/* Cards container — horizontal scroll */
.d3view-dashboard-v2 .db-ssm-curves-cards-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Card panel — grows to fill when few, min 420px base */
.d3view-dashboard-v2 .db-ssm-curves-card {
    flex: 1 1 420px;
    min-width: 320px;
    border: 1px solid var(--db-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                padding 0.35s ease,
                margin 0.35s ease;
}

/* Card header */
.d3view-dashboard-v2 .db-ssm-curves-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--db-bg-surface, #f8fafc);
    border-bottom: 1px solid var(--db-border, #e2e8f0);
    position: relative;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-ssm-curves-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--db-text-primary, #1e293b);
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.d3view-dashboard-v2 .db-ssm-curves-card-title.exit-up {
    transform: translateY(-100%);
    opacity: 0;
}

.d3view-dashboard-v2 .db-ssm-curves-card-title.enter-up {
    transform: translateY(100%);
    opacity: 0;
}

.d3view-dashboard-v2 .db-ssm-curves-card-meta {
    font-size: 11px;
    color: var(--db-n-500, #64748b);
}

/* Card body — Newton charts stacked vertically, scrollable */
.d3view-dashboard-v2 .db-ssm-curves-card-body {
    flex: 1 1 auto;
    min-height: 200px;
    overflow-y: auto;
}

.d3view-dashboard-v2 .db-ssm-curves-nm-wrap {
    min-height: 200px;
    width: 100%;
}

/* Collapsed state during animation — shrink horizontally */
.d3view-dashboard-v2 .db-ssm-curves-card.collapsed-anim {
    flex-basis: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    padding: 0;
    border-color: transparent;
    overflow: hidden;
}

/* Active animation card — expand to fill and glow */
.d3view-dashboard-v2 .db-ssm-curves-card.anim-active {
    flex: 1 1 100%;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3),
                0 4px 12px rgba(99, 102, 241, 0.1);
    border-color: #6366F1;
}

/* ── Phase 2 placeholder ─────────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    color: var(--db-n-400, #94a3b8);
    font-size: 13px;
}

.d3view-dashboard-v2 .db-ssm-coming-soon i {
    font-size: 32px;
    opacity: 0.5;
}

/* ── Apply Template sidebar ─────────────────────────────── */

.d3view-dashboard-v2 .db-ssm-apply-tpl-btn {
    margin-left: 6px;
    flex-shrink: 0;
    font-size: 11px;
}

/* Overlay */
.d3view-dashboard-v2 .db-ssm-atp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.d3view-dashboard-v2 .db-ssm-atp-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar container */
.d3view-dashboard-v2 .db-ssm-atp-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 100%;
    background: var(--db-bg-surface, #fff);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.d3view-dashboard-v2 .db-ssm-atp-sidebar.is-open {
    transform: translateX(0);
}

/* Header */
.d3view-dashboard-v2 .db-ssm-atp-sidebar-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--db-border, #e2e8f0);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .db-ssm-atp-sidebar-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--db-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-dashboard-v2 .db-ssm-atp-sidebar-title i {
    color: var(--plugin-primary-color, #6366f1);
}

/* Body */
.d3view-dashboard-v2 .db-ssm-atp-sidebar-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Sections */
.d3view-dashboard-v2 .db-ssm-atp-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--db-n-500, #64748b);
    margin-bottom: 8px;
}

/* Mode cards */
.d3view-dashboard-v2 .db-ssm-atp-mode-cards {
    display: flex;
    gap: 8px;
}
.d3view-dashboard-v2 .db-ssm-atp-mode-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    font-size: 12px;
    color: var(--db-text-primary, #1e293b);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.d3view-dashboard-v2 .db-ssm-atp-mode-card:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}
.d3view-dashboard-v2 .db-ssm-atp-mode-card.is-active {
    border-color: var(--plugin-primary-color, #6366f1);
    background: #eef2ff;
    box-shadow: 0 0 0 1px var(--plugin-primary-color, #6366f1);
}
.d3view-dashboard-v2 .db-ssm-atp-mode-card.is-active i {
    color: var(--plugin-primary-color, #6366f1);
}

/* Sim list container */
.d3view-dashboard-v2 .db-ssm-atp-sim-list-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.d3view-dashboard-v2 .db-ssm-atp-sim-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.d3view-dashboard-v2 .db-ssm-atp-sim-filter-bar .form-control {
    flex: 1;
    height: 28px;
    font-size: 12px;
}
.d3view-dashboard-v2 .db-ssm-atp-bulk-links {
    white-space: nowrap;
    font-size: 11px;
}
.d3view-dashboard-v2 .db-ssm-atp-bulk-links a {
    color: var(--plugin-primary-color, #6366f1);
    text-decoration: none;
}
.d3view-dashboard-v2 .db-ssm-atp-bulk-links a:hover {
    text-decoration: underline;
}
.d3view-dashboard-v2 .db-ssm-atp-bulk-sep {
    color: #cbd5e1;
    margin: 0 4px;
}

/* Sim list items */
.d3view-dashboard-v2 .db-ssm-atp-sim-list {
    max-height: 250px;
    overflow-y: auto;
}
.d3view-dashboard-v2 .db-ssm-atp-sim-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--db-text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.1s;
}
.d3view-dashboard-v2 .db-ssm-atp-sim-item:hover {
    background: #f1f5f9;
}
.d3view-dashboard-v2 .db-ssm-atp-sim-item label {
    margin: 0;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Footer */
.d3view-dashboard-v2 .db-ssm-atp-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--db-border, #e2e8f0);
    flex-shrink: 0;
}

/* Status message */
.d3view-dashboard-v2 .db-ssm-atp-status-msg {
    font-size: 11px;
    color: var(--db-error, #ef4444);
    min-height: 16px;
}

/* ── SSM header ellipsis dropdown ────────────────────────── */

.d3view-dashboard-v2 .db-widget-ssm-actions-wrap {
    position: relative;
}

.d3view-dashboard-v2 .db-widget-ssm-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    background: var(--db-surface, #fff);
    border: 1px solid var(--db-border);
    border-radius: var(--db-r-md, 6px);
    box-shadow: var(--db-shadow-md, 0 4px 12px rgba(0,0,0,0.12));
    min-width: 170px;
    padding: 4px 0;
    white-space: nowrap;
}

.d3view-dashboard-v2 .db-widget-ssm-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    background: transparent;
    border: none;
    font-size: 13px;
    color: var(--db-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background var(--db-t-fast);
}
.d3view-dashboard-v2 .db-widget-ssm-menu-item:hover {
    background: var(--db-n-50, #f8fafc);
}
.d3view-dashboard-v2 .db-widget-ssm-menu-item i {
    width: 14px;
    text-align: center;
    color: var(--db-text-secondary);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-widget-ssm-dropdown-sep {
    height: 1px;
    background: var(--db-border);
    margin: 4px 0;
}

.d3view-dashboard-v2 .db-iw-picker-list {
    padding: 4px 0;
}

.d3view-dashboard-v2 .db-iw-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.d3view-dashboard-v2 .db-iw-picker-row:hover {
    background: var(--db-hover-bg, #f3f4f6);
}

.d3view-dashboard-v2 .db-iw-picker-row.selected {
    background: var(--db-brand-bg, #eef2ff);
    border-left-color: var(--db-brand, #30487f);
}

.d3view-dashboard-v2 .db-iw-picker-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.d3view-dashboard-v2 .db-iw-picker-id {
    color: #999;
    font-size: 11px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-iw-picker-status {
    font-size: 10px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-aap-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-content: center;
    padding: 24px;
    flex: 1 1 auto;
}

.d3view-dashboard-v2 .db-aap-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 130px;
    min-height: 110px;
    padding: 18px 12px;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.d3view-dashboard-v2 .db-aap-type-card:hover {
    box-shadow: var(--plugin-box-shadow, 0 4px 14px rgba(0,0,0,0.12));
    border-color: var(--plugin-primary-color, #30487f);
    transform: translateY(-2px);
}

.d3view-dashboard-v2 .db-aap-type-icon {
    font-size: 28px;
    color: var(--plugin-primary-color, #30487f);
    opacity: 0.85;
}

.d3view-dashboard-v2 .db-aap-type-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

.d3view-dashboard-v2 .db-aap-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.d3view-dashboard-v2 .db-aap-agent-bar {
    padding: 5px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-aap-agent-body {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.d3view-dashboard-v2 .db-aap-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: #6b7280;
    text-align: center;
    padding: 24px;
}

.d3view-dashboard-v2 .db-aap-placeholder i {
    font-size: 40px;
    opacity: 0.4;
}

.d3view-dashboard-v2 .db-aap-placeholder-title {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

.d3view-dashboard-v2 .db-aap-placeholder-sub {
    font-size: 12px;
    color: #9ca3af;
}

/* Simlytiks AI Agent two-panel layout */
.d3view-dashboard-v2 .db-aap-sl-agent,
.d3view-dashboard-v2 .db-aap-sl-canvas {
    position: relative;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-aap-sl-canvas .simlytiks {
    height: 100%;
}

.d3view-dashboard-v2 .js-aap-toggle-view {
    gap: 4px;
}

.d3view-dashboard-v2 .turings-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    align-items: stretch;
}

.d3view-dashboard-v2 .turings-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 6px;
    padding: 14px 16px;
    min-width: 140px;
    flex: 1 1 140px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .turings-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.d3view-dashboard-v2 .turings-stat-icon {
    font-size: 22px;
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .turings-stat-body {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .turings-stat-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #1e293b;
}

.d3view-dashboard-v2 .turings-stat-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Embedded mode: hide chrome that never applies inside a host app */
.d3view-dashboard-v2.db-embedded > .db-header { display: none; }
.d3view-dashboard-v2.db-embedded .db-tabs-wrapper { display: flex !important; }
.d3view-dashboard-v2.db-embedded #db-detail-sidebar { display: none; }
.d3view-dashboard-v2.db-embedded .pl-tabs-vertical-outer { display: none; }
.d3view-dashboard-v2.db-embedded .db-ai-fab { display: none; }

/* hideChrome mode: hide all dashboard chrome (header + page tabs) for fully embedded use */
.d3view-dashboard-v2.db-hide-chrome .db-header,
.d3view-dashboard-v2.db-hide-chrome .db-page-tab-bar { display: none !important; }

/* Embedded mode: establish containing block so overlays stay within the container */
.d3view-dashboard-v2.db-embedded { position: relative; overflow: hidden; }

/* Embedded mode: convert fixed overlays to absolute so they scope to the container */
.d3view-dashboard-v2.db-embedded .db-backdrop,
.d3view-dashboard-v2.db-embedded .db-sidebar-backdrop.is-visible,
.d3view-dashboard-v2.db-embedded .db-panel-backdrop,
.d3view-dashboard-v2.db-embedded .db-widget-edit-overlay,
.d3view-dashboard-v2.db-embedded .db-toast {
    position: absolute;
}

/* Embedded mode: slide-in panels hidden by default, absolute when open */
.d3view-dashboard-v2.db-embedded .db-palette-panel,
.d3view-dashboard-v2.db-embedded .db-settings-panel-container,
.d3view-dashboard-v2.db-embedded .db-icon-picker-container,
.d3view-dashboard-v2.db-embedded .db-creator__widget-sidebar {
    display: none;
}
.d3view-dashboard-v2.db-embedded .db-palette-panel.is-open,
.d3view-dashboard-v2.db-embedded .db-settings-panel-container.is-open,
.d3view-dashboard-v2.db-embedded .db-icon-picker-container.is-open,
.d3view-dashboard-v2.db-embedded .db-creator__widget-sidebar.is-open {
    display: flex;
    position: absolute;
}

/* Dashboard container inside Turings modal */
.turings-dashboard-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Filter bar above dashboard grid in Turings dashboard mode */
.turings-dashboard-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.turings-dashboard-filter-bar .filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.turings-dashboard-filter-bar .filter-group label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    white-space: nowrap;
}

/* ===================================================================
   Turings Dashboard v2 — New Widget Styles (10 widgets)
   All scoped under .d3view-dashboard-v2
   =================================================================== */

/* --- Shared Widget Header --- */
.d3view-dashboard-v2 .tw-widget-header {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .tw-widget-header label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
}

.d3view-dashboard-v2 .tw-widget-header select {
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    outline: none;
}

.d3view-dashboard-v2 .tw-widget-header select:focus {
    border-color: #6366f1;
}

.d3view-dashboard-v2 .tw-chart-body {
    overflow: hidden;
    position: relative;
}

.d3view-dashboard-v2 .tw-table-body {
    overflow: auto;
    padding: 8px;
}

/* --- 1. Summary Chart --- */
.d3view-dashboard-v2 .tw-xaxis-select,
.d3view-dashboard-v2 .tw-yaxis-select {
    min-width: 80px;
}

/* --- 2. Top Users / 3. Top Util Days — shared toggle styles --- */
.d3view-dashboard-v2 .tw-view-donut,
.d3view-dashboard-v2 .tw-view-table {
    transition: background 0.15s ease, color 0.15s ease;
}

.d3view-dashboard-v2 .tw-view-donut.active,
.d3view-dashboard-v2 .tw-view-table.active {
    background: #6366f1;
    color: #fff;
    border-color: #6366f1;
}

.d3view-dashboard-v2 .tw-table-body .table {
    margin-bottom: 0;
}

/* --- 4. Utilization Gauge --- */
.d3view-dashboard-v2 .tw-gauge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@keyframes turings-gauge-pulse {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.6; }
}

/* --- 5. Queue Efficiency --- */
.d3view-dashboard-v2 .js-queue-sort {
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    outline: none;
}

.d3view-dashboard-v2 .js-queue-sort:focus {
    border-color: #6366f1;
}

.d3view-dashboard-v2 .tw-qe-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.d3view-dashboard-v2 .bar-wait,
.d3view-dashboard-v2 .bar-run {
    transition: opacity 0.15s ease;
}

.d3view-dashboard-v2 .bar-wait:hover,
.d3view-dashboard-v2 .bar-run:hover {
    opacity: 0.85;
}

.d3view-dashboard-v2 .x-axis path,
.d3view-dashboard-v2 .x-axis line,
.d3view-dashboard-v2 .y-axis path,
.d3view-dashboard-v2 .y-axis line {
    stroke: #d1d5db;
}

.d3view-dashboard-v2 .x-axis text,
.d3view-dashboard-v2 .y-axis text {
    fill: #6b7280;
}

/* --- 6. Solver Distribution Treemap --- */
.d3view-dashboard-v2 .tw-solver-treemap {
    position: relative;
    overflow: hidden;
}

.d3view-dashboard-v2 .tw-solver-tile {
    position: absolute;
    overflow: hidden;
    border-radius: 4px;
    padding: 6px 8px;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.d3view-dashboard-v2 .tw-solver-tile:hover {
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* --- 7. Peak Hours Heatmap --- */
.d3view-dashboard-v2 .hm-cell {
    transition: opacity 0.15s ease;
}

/* --- 8. User Leaderboard --- */
.d3view-dashboard-v2 .tw-lb-header {
    padding: 8px 12px;
    font-size: 12px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .tw-lb-body {
    overflow-x: auto;
}

.d3view-dashboard-v2 .tw-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.d3view-dashboard-v2 .tw-leaderboard-table thead tr {
    border-bottom: 2px solid #e2e8f0;
}

.d3view-dashboard-v2 .tw-leaderboard-table th {
    padding: 8px 10px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.d3view-dashboard-v2 .tw-leaderboard-table th.tw-lb-sortable {
    cursor: pointer;
    user-select: none;
}

.d3view-dashboard-v2 .tw-leaderboard-table th.tw-lb-sortable:hover {
    color: #1e40af;
}

.d3view-dashboard-v2 .tw-lb-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.d3view-dashboard-v2 .tw-lb-row:hover {
    background: #f8fafc;
}

.d3view-dashboard-v2 .tw-lb-row td {
    padding: 8px 10px;
}

.d3view-dashboard-v2 .tw-lb-medal {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 22px;
    font-size: 11px;
    font-weight: 700;
}

/* --- 9. Utilization Trend Sparklines --- */
.d3view-dashboard-v2 .tw-trend-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.d3view-dashboard-v2 .js-trend-window {
    transition: background 0.15s ease, color 0.15s ease;
}

/* --- 10. Job Status Flow (Sankey) --- */
.d3view-dashboard-v2 .tw-status-flow {
    position: relative;
}

.d3view-dashboard-v2 .tw-flow-link {
    transition: stroke-opacity 0.2s ease;
}

.d3view-dashboard-v2 .tw-flow-node rect {
    transition: opacity 0.15s ease;
}

.d3view-dashboard-v2 .tw-flow-node:hover rect {
    opacity: 0.85;
}

/* --- Shared D3 Tooltip --- */
.d3view-dashboard-v2 .tw-d3-tooltip,
.tw-solver-tooltip,
.tw-flow-tooltip {
    position: fixed;
    display: none;
    pointer-events: none;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-width: 280px;
}

/* --- Responsive: smaller widgets get tighter padding --- */
.d3view-dashboard-v2 .grid-stack-item[data-gs-width="3"] .tw-widget-header,
.d3view-dashboard-v2 .grid-stack-item[gs-w="3"] .tw-widget-header {
    padding: 4px 8px;
    gap: 6px;
}

.d3view-dashboard-v2 .grid-stack-item[data-gs-width="3"] .tw-widget-header label,
.d3view-dashboard-v2 .grid-stack-item[gs-w="3"] .tw-widget-header label {
    font-size: 10px;
}

.d3view-dashboard-v2 .grid-stack-item[data-gs-width="3"] .tw-widget-header select,
.d3view-dashboard-v2 .grid-stack-item[gs-w="3"] .tw-widget-header select {
    font-size: 10px;
    padding: 1px 3px;
}

/* ── Modern Server Util, Core-Hours Trend, Job Turnaround ── */

.d3view-dashboard-v2 .db-widget-type-turings-server-util-modern .db-widget-body-content,
.d3view-dashboard-v2 .db-widget-type-turings-core-hours-trend .db-widget-body-content,
.d3view-dashboard-v2 .db-widget-type-turings-job-turnaround .db-widget-body-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-widget-type-turings-server-util-modern svg,
.d3view-dashboard-v2 .db-widget-type-turings-core-hours-trend svg,
.d3view-dashboard-v2 .db-widget-type-turings-job-turnaround svg {
    flex: 1 1 auto;
}

.d3view-dashboard-v2 .db-widget-type-turings-server-util-modern .domain,
.d3view-dashboard-v2 .db-widget-type-turings-core-hours-trend .domain,
.d3view-dashboard-v2 .db-widget-type-turings-job-turnaround .domain {
    stroke: #e5e7eb;
}

.d3view-dashboard-v2 .db-widget-type-turings-server-util-modern .tick line,
.d3view-dashboard-v2 .db-widget-type-turings-core-hours-trend .tick line,
.d3view-dashboard-v2 .db-widget-type-turings-job-turnaround .tick line {
    display: none;
}

.d3view-dashboard-v2 .db-comparison-form {
    padding: 8px 16px;
}

.d3view-dashboard-v2 .db-compare-section {
    margin-bottom: 20px;
}

.d3view-dashboard-v2 .db-compare-section h5 {
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .db-compare-section h5 i {
    color: var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-match-count {
    background: var(--plugin-primary-color, #6366F1);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.d3view-dashboard-v2 .db-compare-current-dash {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    font-weight: 500;
}

.d3view-dashboard-v2 .db-compare-current-dash i {
    color: var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-widgets-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
}

/* DVFIV-1951 - Modern selectable widget cards */
.d3view-dashboard-v2 .db-compare-widget-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    min-width: 160px;
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 4px);
    position: relative;
}

.d3view-dashboard-v2 .db-compare-widget-card:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selected {
    border-color: var(--plugin-primary-color, #6366F1);
    background: #eef2ff;
    box-shadow: 0 0 0 1px var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selecting {
    border-color: var(--plugin-primary-color, #6366F1);
    background: #f0f0ff;
}

.d3view-dashboard-v2 .db-compare-widget-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selected .db-compare-widget-card-icon {
    background: var(--plugin-primary-color, #6366F1);
    color: #fff;
}

.d3view-dashboard-v2 .db-compare-widget-card-icon i {
    font-size: 14px;
    color: #64748b;
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selected .db-compare-widget-card-icon i {
    color: #fff;
}

/* DVFIV-1951 - Card body wrapper for label + summary */
.d3view-dashboard-v2 .db-compare-widget-card-body {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .db-compare-widget-card-label {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DVFIV-1951 - Config summary line under widget label */
.d3view-dashboard-v2 .db-compare-widget-card-summary {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

/* DVFIV-1951 - Cog/config button on widget card */
.d3view-dashboard-v2 .js-cmp-widget-config-btn {
    padding: 2px 6px;
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
    z-index: 2;
    transition: color 0.15s;
}
.d3view-dashboard-v2 .js-cmp-widget-config-btn:hover,
.d3view-dashboard-v2 .js-cmp-widget-config-btn.is-configured {
    color: var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-widget-card-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.d3view-dashboard-v2 .db-compare-widget-card-check i {
    font-size: 10px;
    color: transparent;
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selected .db-compare-widget-card-check {
    border-color: var(--plugin-primary-color, #6366F1);
    background: var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-widget-card.ui-selected .db-compare-widget-card-check i {
    color: #fff;
}

/* Hide jQuery UI selectable helper lasso */
.d3view-dashboard-v2 .db-compare-widgets-list .ui-selectable-helper {
    display: none;
}

.d3view-dashboard-v2 .db-compare-no-match {
    font-style: italic;
    padding: 12px;
    text-align: center;
}

/* Mode radio cards */
.d3view-dashboard-v2 .db-compare-mode-section .radio {
    margin: 8px 0;
}

.d3view-dashboard-v2 .db-compare-mode-section .radio label {
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.d3view-dashboard-v2 .db-compare-mode-section .radio label:hover {
    border-color: var(--plugin-primary-color, #6366F1);
    background: #fafafe;
}

.d3view-dashboard-v2 .db-compare-mode-section .radio input:checked ~ strong {
    color: var(--plugin-primary-color, #6366F1);
}

.d3view-dashboard-v2 .db-compare-loading {
    text-align: center;
    color: #888;
    padding: 20px;
}

.d3view-dashboard-v2 .db-compare-loading i {
    margin-bottom: 8px;
}

/* ================================================================
   DVFIV-1951 - Comparison Attribute Config Sidebar
   ================================================================ */

.db-cmp-attr-sidebar {
    position: absolute;
    top: 0;
    right: -380px;
    width: 360px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
    z-index: 10600;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    overflow: hidden;
}
.db-cmp-attr-sidebar.is-open {
    right: 0;
}

.db-cmp-attr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.db-cmp-attr-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.db-cmp-attr-header h5 i {
    color: var(--plugin-primary-color, #6366F1);
}

.db-cmp-attr-config {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.db-cmp-attr-section {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
}

.db-cmp-attr-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

/* Column list */
.db-cmp-attr-col-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fafbfc;
}

.db-cmp-attr-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #f1f5f9;
    cursor: grab;
    transition: background 0.1s;
}
.db-cmp-attr-col-item:last-child { border-bottom: none; }
.db-cmp-attr-col-item:hover { background: #f1f5f9; }
.db-cmp-attr-col-item.is-checked { background: #eef2ff; }

.db-cmp-attr-col-grip {
    color: #cbd5e1;
    font-size: 8px;
    cursor: grab;
    flex-shrink: 0;
    display: flex;
    gap: 1px;
}

.db-cmp-attr-col-item label {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.db-cmp-attr-col-item label input[type="checkbox"] {
    margin: 0;
}

/* Preview summary */
.db-cmp-attr-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.6;
}

/* Footer */
.db-cmp-attr-footer {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-top: auto;
}

/* ================================================================
   DVFIV-1951 - Comparison Dashboard Widgets
   ================================================================ */

/* Stats widget — side-by-side KPI cards */
.d3view-dashboard-v2 .cmp-stats-widget {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    overflow: hidden;
}

/* Tab bar — centered with sliding indicator */
.d3view-dashboard-v2 .cmp-stats-tab-bar {
    display: flex;
    justify-content: center;
    gap: 4px;
    position: relative;
    padding-bottom: 3px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-stats-tab {
    background: none;
    border: none;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.25s, background 0.25s;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.d3view-dashboard-v2 .cmp-stats-tab i {
    font-size: 11px;
}
.d3view-dashboard-v2 .cmp-stats-tab:hover {
    color: #334155;
    background: #f1f5f9;
}
.d3view-dashboard-v2 .cmp-stats-tab.is-active {
    color: var(--plugin-primary-color, #6366F1);
    font-weight: 600;
}
.d3view-dashboard-v2 .cmp-stats-tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--plugin-primary-color, #6366F1);
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panels — animated fade+slide */
.d3view-dashboard-v2 .cmp-stats-panels {
    flex: 1;
    overflow-y: auto;
    position: relative;
}
.d3view-dashboard-v2 .cmp-stats-panel {
    display: none;
    animation: cmpStatsFadeIn 0.3s ease;
}
.d3view-dashboard-v2 .cmp-stats-panel.is-active {
    display: block;
}
.d3view-dashboard-v2 .cmp-stats-panel.is-entering {
    display: block;
    opacity: 0;
    transform: translateY(6px);
}
@keyframes cmpStatsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d3view-dashboard-v2 .cmp-stats-dash-row {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 12px;
    background: #fff;
}

.d3view-dashboard-v2 .cmp-stats-dash-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.d3view-dashboard-v2 .cmp-stats-dash-header .cmp-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .cmp-stats-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.d3view-dashboard-v2 .cmp-stat-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 6px;
    background: #f8fafc;
    border-left: 3px solid var(--cmp-dash-color, #6366F1);
    min-width: 120px;
    flex: 1 1 120px;
    transition: box-shadow 0.2s;
}
.d3view-dashboard-v2 .cmp-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.d3view-dashboard-v2 .cmp-stat-card-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.d3view-dashboard-v2 .cmp-stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
}

.d3view-dashboard-v2 .cmp-stat-card-delta {
    font-size: 10px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
}
.d3view-dashboard-v2 .cmp-stat-card-delta.is-positive {
    color: #059669;
    background: #ecfdf5;
}
.d3view-dashboard-v2 .cmp-stat-card-delta.is-negative {
    color: #dc2626;
    background: #fef2f2;
}
.d3view-dashboard-v2 .cmp-stat-card-delta.is-neutral {
    color: #64748b;
    background: #f1f5f9;
}

.d3view-dashboard-v2 .cmp-stat-card-spark {
    width: 100%;
    height: 28px;
    margin-top: auto;
}

/* Bar chart widget */
.d3view-dashboard-v2 .cmp-barchart-widget {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .cmp-barchart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-barchart-header-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.d3view-dashboard-v2 .cmp-barchart-controls {
    display: flex;
    gap: 4px;
}
.d3view-dashboard-v2 .cmp-barchart-svg-wrap {
    flex: 1;
    min-height: 0;
}

/* Radar widget */
.d3view-dashboard-v2 .cmp-radar-widget {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .cmp-radar-header {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-radar-svg-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Heatmap widget */
.d3view-dashboard-v2 .cmp-heatmap-widget {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .cmp-heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-heatmap-header-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.d3view-dashboard-v2 .cmp-heatmap-table-wrap {
    flex: 1;
    overflow-y: auto;
}
.d3view-dashboard-v2 .cmp-heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.d3view-dashboard-v2 .cmp-heatmap-table th,
.d3view-dashboard-v2 .cmp-heatmap-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.d3view-dashboard-v2 .cmp-heatmap-table th {
    font-weight: 600;
    color: #64748b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 1;
}
.d3view-dashboard-v2 .cmp-heatmap-table .cmp-cell-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}
.d3view-dashboard-v2 .cmp-heatmap-table .cmp-delta-positive { color: #059669; }
.d3view-dashboard-v2 .cmp-heatmap-table .cmp-delta-negative { color: #dc2626; }
.d3view-dashboard-v2 .cmp-heatmap-table .cmp-delta-neutral  { color: #64748b; }
.d3view-dashboard-v2 .cmp-heatmap-table tr.cmp-row-improved { background: rgba(5, 150, 105, 0.04); }
.d3view-dashboard-v2 .cmp-heatmap-table tr.cmp-row-regressed { background: rgba(220, 38, 38, 0.04); }

/* Timeline widget */
.d3view-dashboard-v2 .cmp-timeline-widget {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .cmp-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-timeline-header-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.d3view-dashboard-v2 .cmp-timeline-svg-wrap {
    flex: 1;
    min-height: 0;
}

/* Diff table widget */
.d3view-dashboard-v2 .cmp-table-widget {
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.d3view-dashboard-v2 .cmp-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .cmp-table-header-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Shared comparison legend */
.d3view-dashboard-v2 .cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
    font-size: 11px;
    color: #64748b;
}
.d3view-dashboard-v2 .cmp-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.d3view-dashboard-v2 .cmp-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* D3 chart tooltip */
.cmp-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.5;
    z-index: 10700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.d3view-dashboard-v2 .tcmp-side-by-side {
    display: flex;
    gap: 16px;
    height: 100%;
    align-items: stretch;
}
.d3view-dashboard-v2 .tcmp-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.d3view-dashboard-v2 .tcmp-panel-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    padding: 6px 0;
    border-bottom: 2px solid var(--tcmp-server-color, #6366F1);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .tcmp-panel-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* KPI Stats Delta Cards */
.d3view-dashboard-v2 .tcmp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding: 10px;
    height: 100%;
    align-content: start;
}
.d3view-dashboard-v2 .tcmp-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d3view-dashboard-v2 .tcmp-stat-card .tcmp-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.d3view-dashboard-v2 .tcmp-stat-values {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.d3view-dashboard-v2 .tcmp-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}
.d3view-dashboard-v2 .tcmp-stat-value .tcmp-server-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.d3view-dashboard-v2 .tcmp-stat-delta {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.d3view-dashboard-v2 .tcmp-stat-delta.tcmp-delta-up {
    color: #DC2626;
    background: #FEF2F2;
}
.d3view-dashboard-v2 .tcmp-stat-delta.tcmp-delta-down {
    color: #059669;
    background: #F0FDF4;
}
.d3view-dashboard-v2 .tcmp-stat-delta.tcmp-delta-neutral {
    color: #6b7280;
    background: #F3F4F6;
}

/* Controls header bar */
.d3view-dashboard-v2 .tcmp-header {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .tcmp-header label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
}
.d3view-dashboard-v2 .tcmp-header select {
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.d3view-dashboard-v2 .tcmp-header .btn-group .btn {
    font-size: 11px;
    padding: 2px 8px;
}

/* Server color legend */
.d3view-dashboard-v2 .tcmp-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 10px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .tcmp-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #374151;
}
.d3view-dashboard-v2 .tcmp-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Loading state */
.d3view-dashboard-v2 .tcmp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    gap: 10px;
}

/* Sparkline overlay styles */
.d3view-dashboard-v2 .tcmp-sparkline-row {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.d3view-dashboard-v2 .tcmp-sparkline-panel {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid #f3f4f6;
    min-height: 0;
}
.d3view-dashboard-v2 .tcmp-sparkline-panel:last-child {
    border-bottom: none;
}
.d3view-dashboard-v2 .tcmp-sparkline-meta {
    width: 120px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .tcmp-sparkline-title {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}
.d3view-dashboard-v2 .tcmp-sparkline-values {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.d3view-dashboard-v2 .tcmp-sparkline-val {
    font-size: 14px;
    font-weight: 700;
}
.d3view-dashboard-v2 .tcmp-sparkline-chart {
    flex: 1;
    min-width: 0;
    height: 100%;
}

/* Merged leaderboard table */
.d3view-dashboard-v2 .tcmp-table-wrap {
    overflow-y: auto;
    height: 100%;
}
.d3view-dashboard-v2 .tcmp-table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
}
.d3view-dashboard-v2 .tcmp-table th {
    position: sticky;
    top: 0;
    background: #f9fafb;
    font-weight: 600;
    font-size: 11px;
    color: #374151;
    padding: 6px 8px;
    border-bottom: 2px solid #e5e7eb;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.d3view-dashboard-v2 .tcmp-table th:hover {
    background: #f3f4f6;
}
.d3view-dashboard-v2 .tcmp-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
}
.d3view-dashboard-v2 .tcmp-table tr:hover td {
    background: #f9fafb;
}

/* Inline bar for leaderboard/activity */
.d3view-dashboard-v2 .tcmp-bar-cell {
    position: relative;
}
.d3view-dashboard-v2 .tcmp-bar-bg {
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    border-radius: 2px;
    opacity: 0.15;
    transition: width 0.4s ease;
}
.d3view-dashboard-v2 .tcmp-bar-value {
    position: relative;
    z-index: 1;
}

/* Side-by-side Sankey / Treemap / Heatmap specific */
.d3view-dashboard-v2 .tcmp-side-by-side .tcmp-panel-body svg {
    width: 100%;
    height: 100%;
}

/* Queue Efficiency comparison — grouped rows */
.d3view-dashboard-v2 .tcmp-diverging-row {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 11px;
}

/* Window toggle buttons */
.d3view-dashboard-v2 .tcmp-window-btns {
    display: flex;
    gap: 2px;
}
.d3view-dashboard-v2 .tcmp-window-btns .btn {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
}
.d3view-dashboard-v2 .tcmp-window-btns .btn.active {
    background: #374151;
    color: #fff;
    border-color: #374151;
}

/* All rules scoped inside .d3view-dashboard-v2 */

/* ── Simulation Summary KPI Strip ──────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-sim-kpi-strip {
    display: flex;
    gap: 12px;
    height: 100%;
    padding: 12px 16px;
    overflow-x: auto;
    align-items: stretch;
}

.d3view-dashboard-v2 .pw-sim-kpi-loading {
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 20px;
}

.d3view-dashboard-v2 .pw-kpi-spinner {
    font-size: 24px;
    color: #9ca3af;
}

.d3view-dashboard-v2 .pw-kpi-card {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.d3view-dashboard-v2 .pw-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--pw-kpi-color, #6366F1);
    border-radius: 10px 10px 0 0;
}

.d3view-dashboard-v2 .pw-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.06);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .pw-kpi-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .pw-kpi-icon {
    font-size: 16px;
    opacity: 0.8;
}

.d3view-dashboard-v2 .pw-kpi-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
}

.d3view-dashboard-v2 .pw-kpi-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}

.d3view-dashboard-v2 .pw-kpi-spark {
    display: block;
    height: 32px;
    width: 100%;
    margin-top: auto;
}

/* ── Team Members: Shared Elements ────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    position: relative;
}
.d3view-dashboard-v2 .pw-avatar-lg { width: 40px; height: 40px; font-size: 14px; }

.d3view-dashboard-v2 .pw-active-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--d3v-success, #10B981);
    border: 2px solid var(--d3v-bg-primary, #fff);
}

.d3view-dashboard-v2 .pw-role-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--db-accent, #3B82F6);
    background: var(--db-accent-bg, rgba(59, 130, 246, 0.08));
    border-radius: var(--d3v-r-sm, 4px);
    padding: 2px 8px;
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

.d3view-dashboard-v2 .pw-muted { color: var(--d3v-text-muted, #94A3B8); }

/* ── Compact Summary Mode (home page widget) ─────────────────────────────── */

.d3view-dashboard-v2 .pw-compact { gap: 0; }

.d3view-dashboard-v2 .pw-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .pw-compact-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-dashboard-v2 .pw-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-muted, #94A3B8);
    background: none;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 3px 8px;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .pw-sort-btn:hover {
    color: var(--d3v-text-primary, #1E293B);
    border-color: var(--d3v-border-strong, #CBD5E1);
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.d3view-dashboard-v2 .pw-sort-btn .fa { font-size: 10px; }

.d3view-dashboard-v2 .pw-compact-list { padding: 4px 0; }

.d3view-dashboard-v2 .pw-compact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .pw-compact-row:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-dashboard-v2 .pw-compact-info { flex: 1; min-width: 0; }

.d3view-dashboard-v2 .pw-compact-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.d3view-dashboard-v2 .pw-compact-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-dashboard-v2 .pw-compact-role {
    font-size: 10px;
    font-weight: 500;
    color: var(--db-accent, #3B82F6);
    background: var(--db-accent-bg, rgba(59, 130, 246, 0.08));
    border-radius: var(--d3v-r-sm, 4px);
    padding: 1px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Name + role group (left side of top row) */
.d3view-dashboard-v2 .pw-compact-name-group {
    display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
}
/* Last active timestamp (right side of top row) */
.d3view-dashboard-v2 .pw-compact-last-active {
    font-size: 10.5px;
    color: var(--d3v-text-muted, #94A3B8);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
/* Workload stats row: Sims | Jobs | Files */
.d3view-dashboard-v2 .pw-compact-stats {
    display: flex; gap: 12px;
}
.d3view-dashboard-v2 .pw-compact-stat {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    display: flex; align-items: center; gap: 4px;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .pw-compact-stat i {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
}

/* ── App Permission Badges ────────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.d3view-dashboard-v2 .pw-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    transition: var(--d3v-t-fast, 0.12s ease);
    white-space: nowrap;
    cursor: default;
}
.d3view-dashboard-v2 .pw-app-badge .fa { font-size: 10px; }

.d3view-dashboard-v2 .pw-app-name { font-weight: 600; }
.d3view-dashboard-v2 .pw-app-level {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.7;
    margin-left: 2px;
}

/* Permission level badge backgrounds */
.d3view-dashboard-v2 .pw-perm-full  { background: #D1FAE5; color: #065F46; }
.d3view-dashboard-v2 .pw-perm-write { background: #DBEAFE; color: #1E40AF; }
.d3view-dashboard-v2 .pw-perm-read  { background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-secondary, #475569); }

.d3view-dashboard-v2 .pw-app-badge:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

/* ── Table Mode ──────────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-tbl-wrap { gap: 0; }

.d3view-dashboard-v2 .pw-tbl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pw-search-box {
    position: relative;
    flex: 1;
    max-width: 320px;
}
.d3view-dashboard-v2 .pw-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    pointer-events: none;
}
.d3view-dashboard-v2 .pw-search-input {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 30px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 12px;
    color: var(--d3v-text-primary, #1E293B);
    background: var(--d3v-bg-primary, #fff);
    outline: none;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .pw-search-input:focus {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.d3view-dashboard-v2 .pw-search-count {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    white-space: nowrap;
}

.d3view-dashboard-v2 .pw-tbl-header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.d3view-dashboard-v2 .pw-tbl-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .pw-tbl-row:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}
.d3view-dashboard-v2 .pw-tbl-row:last-child { border-bottom: none; }

/* Column widths */
.d3view-dashboard-v2 .pw-col-user  { flex: 2; min-width: 0; display: flex; align-items: center; gap: 10px; }
.d3view-dashboard-v2 .pw-col-role  { flex: 0.8; min-width: 0; }
.d3view-dashboard-v2 .pw-col-apps  { flex: 2.5; min-width: 0; }
.d3view-dashboard-v2 .pw-col-stats { flex: 1.2; min-width: 0; }
.d3view-dashboard-v2 .pw-col-status { flex: 1; min-width: 0; }

.d3view-dashboard-v2 .pw-user-meta { min-width: 0; }
.d3view-dashboard-v2 .pw-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-dashboard-v2 .pw-user-subtitle {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Stat chips in table */
.d3view-dashboard-v2 .pw-stat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.d3view-dashboard-v2 .pw-stat-chip {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-secondary, #F8FAFC);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.d3view-dashboard-v2 .pw-stat-chip .fa {
    font-size: 9px;
    color: var(--d3v-text-muted, #94A3B8);
}

/* Status indicators */
.d3view-dashboard-v2 .pw-status-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-success, #10B981);
}
.d3view-dashboard-v2 .pw-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--d3v-success, #10B981);
    animation: pw-pulse 2s ease-in-out infinite;
}
.d3view-dashboard-v2 .pw-status-last {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.d3view-dashboard-v2 .pw-status-last .fa { font-size: 10px; }

/* Empty state */
.d3view-dashboard-v2 .pw-tbl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
}
.d3view-dashboard-v2 .pw-tbl-empty .fa { font-size: 24px; opacity: 0.4; }

@keyframes pw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Activity Feed ─────────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-activity-wrap {
    height: 100%;
}

.d3view-dashboard-v2 .pw-activity-feed {
    padding: 4px 12px 8px;
}

.d3view-dashboard-v2 .pw-activity-day-sep {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.d3view-dashboard-v2 .pw-activity-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f9fafb;
    align-items: flex-start;
}

.d3view-dashboard-v2 .pw-activity-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.d3view-dashboard-v2 .pw-activity-body {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .pw-activity-line {
    font-size: 12px;
    color: #374151;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
}

.d3view-dashboard-v2 .pw-activity-user {
    font-weight: 600;
}

.d3view-dashboard-v2 .pw-activity-verb {
    color: #6b7280;
}

.d3view-dashboard-v2 .pw-activity-entity-badge {
    display: inline-block;
    font-size: 10px;
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    font-weight: 500;
}

.d3view-dashboard-v2 .pw-activity-title {
    font-size: 11px;
    color: #374151;
    margin-top: 2px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .pw-activity-time {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ── HPC Server Status ─────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-hpc-wrap {
    height: 100%;
}

.d3view-dashboard-v2 .pw-hpc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
    align-content: flex-start;
}

.d3view-dashboard-v2 .pw-hpc-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .pw-hpc-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

.d3view-dashboard-v2 .pw-hpc-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.d3view-dashboard-v2 .pw-hpc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    flex-shrink: 0;
    animation: pw-hpc-pulse 2s ease-in-out infinite;
}

.d3view-dashboard-v2 .pw-hpc-offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    flex-shrink: 0;
}

@keyframes pw-hpc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

.d3view-dashboard-v2 .pw-hpc-server-name {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .pw-hpc-status-badge {
    font-size: 10px;
    border-radius: 4px;
    padding: 2px 6px;
    background: #f3f4f6;
    color: #6b7280;
    text-transform: capitalize;
}

.d3view-dashboard-v2 .pw-hpc-status-online,
.d3view-dashboard-v2 .pw-hpc-status-active,
.d3view-dashboard-v2 .pw-hpc-status-up {
    background: #dcfce7;
    color: #15803d;
}

.d3view-dashboard-v2 .pw-hpc-status-offline,
.d3view-dashboard-v2 .pw-hpc-status-down {
    background: #fee2e2;
    color: #dc2626;
}

.d3view-dashboard-v2 .pw-hpc-gauge-svg {
    display: block;
}

.d3view-dashboard-v2 .pw-hpc-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-dashboard-v2 .pw-hpc-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #374151;
}

.d3view-dashboard-v2 .pw-hpc-stat-row .fa {
    width: 14px;
    text-align: center;
    color: #9ca3af;
}

.d3view-dashboard-v2 .pw-hpc-stat-row span {
    font-weight: 600;
    color: #111827;
}

.d3view-dashboard-v2 .pw-hpc-stat-row small {
    color: #9ca3af;
}

/* ── Project Notes / Comments ──────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-comments-wrap {
    height: 100%;
}

.d3view-dashboard-v2 .pw-comment-list {
    padding: 12px;
}

.d3view-dashboard-v2 .pw-comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: flex-start;
}

.d3view-dashboard-v2 .pw-comment-item:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .pw-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.d3view-dashboard-v2 .pw-comment-body {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .pw-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.d3view-dashboard-v2 .pw-comment-author {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

.d3view-dashboard-v2 .pw-comment-time {
    font-size: 10px;
    color: #9ca3af;
}

.d3view-dashboard-v2 .pw-comment-text {
    font-size: 12px;
    color: #374151;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.d3view-dashboard-v2 .pw-comment-form {
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: #fafafa;
}

.d3view-dashboard-v2 .pw-comment-input {
    flex: 1;
    resize: none;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    color: #111827;
    transition: border-color 0.15s ease;
    min-height: 52px;
}

.d3view-dashboard-v2 .pw-comment-input:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}

.d3view-dashboard-v2 .pw-comment-submit {
    flex-shrink: 0;
    align-self: flex-end;
}

.d3view-dashboard-v2 .pw-comment-no-project {
    border-top: 1px solid #e5e7eb;
    background: #fafafa;
}

/* ── Tooltip Content (Viz.Helpers.Tooltip) ───────────────────────────────── */

.d3view-viz-tooltip .pw-tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.d3view-viz-tooltip .pw-tip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.d3view-viz-tooltip .pw-tip-identity {
    min-width: 0;
}

.d3view-viz-tooltip .pw-tip-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1E293B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-viz-tooltip .pw-tip-title {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 1px;
}

.d3view-viz-tooltip .pw-tip-details {
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    padding-top: 5px;
    margin-bottom: 5px;
}

.d3view-viz-tooltip .pw-tip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    padding: 2px 0;
}

.d3view-viz-tooltip .pw-tip-row .fa {
    width: 14px;
    text-align: center;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 10px;
}

.d3view-viz-tooltip .pw-tip-stats {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
}

.d3view-viz-tooltip .pw-tip-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
}

.d3view-viz-tooltip .pw-tip-stat .fa {
    font-size: 9px;
}

.d3view-viz-tooltip .pw-tip-stat span {
    font-weight: 700;
    color: var(--d3v-text-primary, #1E293B);
}

.d3view-viz-tooltip .pw-tip-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 0;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
}
.d3view-viz-tooltip .pw-perm-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 9999px;
    white-space: nowrap;
}
.d3view-viz-tooltip .pw-perm-pill .fa { font-size: 9px; opacity: 0.8; }
.d3view-viz-tooltip .pw-perm-full  { background: #D1FAE5; color: #065F46; }
.d3view-viz-tooltip .pw-perm-write { background: #DBEAFE; color: #1E40AF; }
.d3view-viz-tooltip .pw-perm-read  { background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-secondary, #475569); }

.d3view-viz-tooltip .pw-tip-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    border-top: 1px solid var(--d3v-border, #E2E8F0);
    padding-top: 5px;
    margin-top: 2px;
}

.d3view-viz-tooltip .pw-tip-footer .fa {
    font-size: 10px;
}

.d3view-viz-tooltip .pw-tip-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    display: inline-block;
    animation: pw-hpc-pulse 2s ease-in-out infinite;
}

/* ── Word Cloud view ───────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .pw-user-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 12px;
    align-content: flex-start;
}

.d3view-dashboard-v2 .pw-user-cloud-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid transparent;
    cursor: default;
    white-space: nowrap;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    line-height: 1.4;
}

.d3view-dashboard-v2 .pw-user-cloud-tag:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   TASKS SUMMARY WIDGET  (.ts-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ts-wrap { padding: 12px 14px; gap: 10px; }
.d3view-dashboard-v2 .ts-kpi-row { display: flex; gap: 6px; }
.d3view-dashboard-v2 .ts-kpi {
    flex: 1; text-align: center; padding: 8px 4px;
    border-radius: var(--d3v-r-md, 8px); background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    transition: box-shadow 0.12s, transform 0.12s;
}
.d3view-dashboard-v2 .ts-kpi:hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); transform: translateY(-1px); }
.d3view-dashboard-v2 .ts-kpi-val { display: block; font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.d3view-dashboard-v2 .ts-kpi-accent  { color: #6366f1; }
.d3view-dashboard-v2 .ts-kpi-success { color: #10b981; }
.d3view-dashboard-v2 .ts-kpi-warning { color: #f59e0b; }
.d3view-dashboard-v2 .ts-kpi-danger  { color: #ef4444; }
.d3view-dashboard-v2 .ts-kpi-lbl { display: block; font-size: 9px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }

.d3view-dashboard-v2 .ts-progress-section { display: flex; flex-direction: column; gap: 4px; }
.d3view-dashboard-v2 .ts-progress-track { height: 8px; border-radius: 20px; background: #f1f5f9; overflow: hidden; }
.d3view-dashboard-v2 .ts-progress-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, #6366f1, #818cf8); transition: width 1s cubic-bezier(0.34, 1.2, 0.64, 1); position: relative; }
.d3view-dashboard-v2 .ts-progress-fill::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3)); border-radius: 0 20px 20px 0; }
.d3view-dashboard-v2 .ts-progress-meta { display: flex; justify-content: space-between; align-items: center; }
.d3view-dashboard-v2 .ts-progress-pct { font-size: 11px; font-weight: 700; color: #6366f1; }
.d3view-dashboard-v2 .ts-progress-rem { font-size: 10px; color: #94a3b8; }

.d3view-dashboard-v2 .ts-section-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.d3view-dashboard-v2 .ts-upcoming-list { display: flex; flex-direction: column; gap: 2px; }
.d3view-dashboard-v2 .ts-upcoming-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; transition: background 0.12s; }
.d3view-dashboard-v2 .ts-upcoming-item:hover { background: #f8fafc; }
.d3view-dashboard-v2 .ts-upcoming-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.d3view-dashboard-v2 .ts-dot-over { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
.d3view-dashboard-v2 .ts-dot-soon { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.15); }
.d3view-dashboard-v2 .ts-dot-ok { background: #f1f5f9; border: 2px solid #cbd5e1; }
.d3view-dashboard-v2 .ts-upcoming-name { flex: 1; font-size: 11px; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d3view-dashboard-v2 .ts-upcoming-due { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.d3view-dashboard-v2 .ts-due-over { background: rgba(239,68,68,0.1); color: #ef4444; }
.d3view-dashboard-v2 .ts-due-soon { background: rgba(245,158,11,0.1); color: #d97706; }
.d3view-dashboard-v2 .ts-due-ok { background: #f1f5f9; color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════
   PROJECT SUMMARY v4  (.ps-*)  — DVFIV-1959
   Layout: horizontal stat cards + 2-col (activity | calendar+notes)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ps-layout {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
}

/* ── Horizontal stat cards with inline sparklines ── */
.d3view-dashboard-v2 .ps-stats-strip {
    display: flex; gap: 8px; flex-shrink: 0;
    padding: 12px 16px; background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ps-stat {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xs);
    transition: all var(--d3v-t-fast);
    position: relative; overflow: hidden;
}
.d3view-dashboard-v2 .ps-stat:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--ps-accent);
    transform: translateY(-2px);
}
/* Bottom accent bar on hover */
.d3view-dashboard-v2 .ps-stat::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: transparent; transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-stat:hover::after { background: var(--ps-accent); }

.d3view-dashboard-v2 .ps-stat-icon {
    width: 34px; height: 34px; border-radius: var(--d3v-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    background: var(--ps-accent-bg); color: var(--ps-accent);
    transition: transform var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-stat:hover .ps-stat-icon { transform: scale(1.1); }
.d3view-dashboard-v2 .ps-stat-meta { flex-shrink: 0; }
.d3view-dashboard-v2 .ps-stat-val {
    font-size: 20px; font-weight: 800; line-height: 1;
    color: var(--d3v-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.d3view-dashboard-v2 .ps-stat-lbl {
    font-size: 10px; font-weight: 500; color: var(--d3v-text-muted); margin-top: 2px;
    white-space: nowrap;
}
/* Inline sparkline fills remaining card space */
.d3view-dashboard-v2 .ps-stat-sparkline {
    flex: 1; min-width: 0; height: 28px;
    display: flex; align-items: flex-end; gap: 2px;
}
.d3view-dashboard-v2 .ps-spark-bar {
    flex: 1; border-radius: 2px 2px 0 0; min-height: 0;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Spinner shown while entity status data loads */
.d3view-dashboard-v2 .ps-spark-loading {
    justify-content: center; align-items: center;
}
.d3view-dashboard-v2 .ps-spark-spinner {
    font-size: 11px; color: var(--d3v-text-muted); opacity: 0.5;
    animation: ps-spark-fade-in 0.3s ease;
}
@keyframes ps-spark-fade-in {
    from { opacity: 0; } to { opacity: 0.5; }
}
.d3view-dashboard-v2 .ps-stat-arrow {
    font-size: 14px; color: var(--d3v-text-muted);
    opacity: 0; transition: opacity var(--d3v-t-fast);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ps-stat:hover .ps-stat-arrow { opacity: 1; }

/* ── Two-column layout (replaces three-col) ── */
.d3view-dashboard-v2 .ps-two-col {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
}

/* Panel base */
.d3view-dashboard-v2 .ps-panel {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    background: var(--d3v-bg-primary);
}
.d3view-dashboard-v2 .ps-activity-panel {
    flex: 1; min-width: 0; border-right: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ps-right-panel {
    width: 380px; flex-shrink: 0;
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* Panel header */
.d3view-dashboard-v2 .ps-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary); flex-shrink: 0; gap: 8px;
    min-height: 44px;
}
.d3view-dashboard-v2 .ps-panel-title {
    font-size: 13px; font-weight: 700; color: var(--d3v-text-primary);
    letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0;
}

/* ── Team members summary (rich cards) ── */
.d3view-dashboard-v2 .ps-contributors {
    padding: 12px 16px; border-bottom: 1px solid var(--d3v-border); flex-shrink: 0;
}
.d3view-dashboard-v2 .ps-contrib-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.d3view-dashboard-v2 .ps-contrib-header .ps-contrib-label {
    font-size: 12px; font-weight: 700; color: var(--d3v-text-primary);
    display: flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .ps-contrib-header .ps-contrib-label i {
    font-size: 13px; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .ps-contrib-header .ps-contrib-count {
    font-size: 11px; font-weight: 500; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .ps-contrib-empty {
    padding: 20px; text-align: center; color: var(--d3v-text-muted); font-size: 12px;
}
.d3view-dashboard-v2 .ps-contrib-empty i {
    margin-right: 6px; font-size: 14px;
}
.d3view-dashboard-v2 .ps-contrib-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 8px; border-radius: var(--d3v-r-md);
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-contrib-row:hover {
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ps-contrib-avatar {
    width: 32px; height: 32px; border-radius: 50%; font-size: 11px;
    font-weight: 700; color: var(--d3v-text-inverse);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-top: 1px;
}
.d3view-dashboard-v2 .ps-contrib-info {
    flex: 1; min-width: 0;
}
.d3view-dashboard-v2 .ps-contrib-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 6px; gap: 8px;
}
.d3view-dashboard-v2 .ps-contrib-name-group {
    display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1;
}
.d3view-dashboard-v2 .ps-contrib-name {
    font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ps-contrib-role {
    font-size: 9.5px; font-weight: 600; padding: 1px 6px;
    border-radius: var(--d3v-r-full); white-space: nowrap; flex-shrink: 0;
    letter-spacing: 0.02em;
}
.d3view-dashboard-v2 .ps-contrib-last-active {
    font-size: 10.5px; color: var(--d3v-text-muted); white-space: nowrap; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ps-contrib-stats {
    display: flex; gap: 12px; margin-bottom: 6px;
}
.d3view-dashboard-v2 .ps-contrib-stat {
    font-size: 11px; font-weight: 500; color: var(--d3v-text-secondary);
    display: flex; align-items: center; gap: 4px;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ps-contrib-stat i {
    font-size: 10px; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .ps-contrib-sparkline {
    display: flex; align-items: flex-end; gap: 2px; height: 18px;
}
.d3view-dashboard-v2 .ps-contrib-spark-bar {
    width: 4px; min-height: 2px; border-radius: 1px;
    transition: height 0.4s ease;
}

/* ── Recent Activity feed (center column) ── */
.d3view-dashboard-v2 .ps-act-filter-tabs {
    display: flex; gap: 2px; background: var(--d3v-bg-tertiary);
    border-radius: var(--d3v-r-md); padding: 2px;
}
.d3view-dashboard-v2 .ps-act-filter-tab {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
    cursor: pointer; border: none; background: transparent;
    color: var(--d3v-text-muted); transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-act-filter-tab:hover {
    color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ps-act-filter-tab.active {
    background: var(--d3v-bg-primary); color: var(--d3v-text-primary);
    box-shadow: var(--d3v-sh-xs);
}
.d3view-dashboard-v2 .ps-act-feed { flex: 1; overflow-y: auto; padding: 0; }

/* Feed item — modern card-style rows */
.d3view-dashboard-v2 .ps-feed-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d3v-bg-tertiary);
    transition: background var(--d3v-t-fast); cursor: pointer;
}
.d3view-dashboard-v2 .ps-feed-item:last-child { border-bottom: none; }
.d3view-dashboard-v2 .ps-feed-item:hover { background: var(--d3v-bg-secondary); }

.d3view-dashboard-v2 .ps-feed-avatar {
    width: 32px; height: 32px; border-radius: var(--d3v-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--d3v-text-inverse);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ps-feed-body {
    flex: 1; min-width: 0;
}
.d3view-dashboard-v2 .ps-feed-text {
    font-size: 13px; color: var(--d3v-text-secondary); line-height: 1.4;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.d3view-dashboard-v2 .ps-feed-user {
    font-weight: 700; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ps-feed-action {
    color: var(--d3v-text-muted); font-weight: 500;
}
.d3view-dashboard-v2 .ps-feed-entity {
    font-size: 12px; font-weight: 500; color: var(--d3v-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
/* Entity type badge in activity feed */
.d3view-dashboard-v2 .ps-feed-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: var(--d3v-r-full); white-space: nowrap;
    letter-spacing: 0.02em;
}
.d3view-dashboard-v2 .ps-feed-type-badge .fa { font-size: 9px; }
.d3view-dashboard-v2 .ps-feed-time {
    font-size: 11px; color: var(--d3v-text-muted); white-space: nowrap;
    flex-shrink: 0;
}
/* Ellipsis action button on feed items */
.d3view-dashboard-v2 .ps-feed-ellipsis {
    width: 28px; height: 28px; border: none; background: transparent;
    border-radius: var(--d3v-r-md); color: var(--d3v-text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; opacity: 0;
    transition: opacity var(--d3v-t-fast), background var(--d3v-t-fast), color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-feed-item:hover .ps-feed-ellipsis { opacity: 1; }
.d3view-dashboard-v2 .ps-feed-ellipsis:hover {
    background: var(--d3v-bg-hover); color: var(--d3v-text-primary);
}
/* Ellipsis dropdown */
.ps-feed-dropdown {
    min-width: 160px; background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-lg); padding: 4px 0; z-index: 9999;
}
.ps-feed-drop-item {
    padding: 8px 14px; font-size: 13px; color: var(--d3v-text-primary);
    cursor: pointer; display: flex; align-items: center; gap: 8px;
    transition: background var(--d3v-t-fast);
}
.ps-feed-drop-item:hover { background: var(--d3v-bg-hover); }
.ps-feed-drop-item .fa { color: var(--d3v-text-muted); width: 14px; text-align: center; }
/* Inline comment input below feed item */
.d3view-dashboard-v2 .ps-feed-comment-inline {
    padding: 10px 16px 12px 56px;
    border-bottom: 1px solid var(--d3v-bg-tertiary);
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ps-feed-comment-inline .ps-comment-context {
    font-size: 11px; color: var(--d3v-text-muted); margin-bottom: 6px;
    display: flex; align-items: center; gap: 4px;
}
.d3view-dashboard-v2 .ps-comment-context .fa { font-size: 10px; opacity: 0.6; }
.d3view-dashboard-v2 .ps-comment-ctx-label { font-weight: 600; color: var(--d3v-text-secondary); }
.d3view-dashboard-v2 .ps-comment-ctx-action { font-weight: 500; }
.d3view-dashboard-v2 .ps-comment-ctx-type { font-weight: 600; color: var(--d3v-accent); }
.d3view-dashboard-v2 .ps-feed-comment-textarea {
    width: 100%; border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-md);
    padding: 8px 10px; font-size: 13px; resize: none;
    background: var(--d3v-bg-primary); color: var(--d3v-text-primary);
    transition: border-color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-feed-comment-textarea:focus {
    outline: none; border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.d3view-dashboard-v2 .ps-feed-comment-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
}
.d3view-dashboard-v2 .ps-feed-comment-cancel,
.d3view-dashboard-v2 .ps-feed-comment-post {
    padding: 4px 14px; font-size: 12px; font-weight: 600;
    border-radius: var(--d3v-r-md); border: none; cursor: pointer;
    transition: background var(--d3v-t-fast), color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-feed-comment-cancel {
    background: transparent; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .ps-feed-comment-cancel:hover {
    background: var(--d3v-bg-hover); color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ps-feed-comment-post {
    background: var(--d3v-accent); color: var(--d3v-text-inverse);
}
.d3view-dashboard-v2 .ps-feed-comment-post:hover {
    background: var(--d3v-accent-hover);
}
.d3view-dashboard-v2 .ps-feed-comment-post:disabled {
    opacity: 0.6; cursor: not-allowed;
}

.d3view-dashboard-v2 .ps-feed-empty {
    padding: 32px; text-align: center; color: var(--d3v-text-muted); font-size: 13px;
}
/* Most recent activity highlight */
.d3view-dashboard-v2 .ps-feed-most-recent {
    background: linear-gradient(90deg, rgba(99,102,241,0.06) 0%, transparent 100%);
    border-left: 3px solid var(--d3v-accent);
}
.d3view-dashboard-v2 .ps-feed-new-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--d3v-accent); margin-right: 4px; vertical-align: middle;
    animation: ps-pulse 2s infinite;
}
@keyframes ps-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Calendar body: takes initial share, shrinks when notes grow ── */
.d3view-dashboard-v2 .ps-cal-body {
    flex: 1 1 50%; min-height: 80px; overflow-y: auto;
}

/* ── Drag-to-resize handle between calendar and notes ── */
.d3view-dashboard-v2 .ps-resize-handle {
    height: 8px; flex-shrink: 0; cursor: row-resize;
    display: flex; align-items: center; justify-content: center;
    background: var(--d3v-bg-secondary);
    border-top: 1px solid var(--d3v-border);
    border-bottom: 1px solid var(--d3v-border);
    transition: background var(--d3v-t-fast);
    user-select: none;
}
.d3view-dashboard-v2 .ps-resize-handle:hover,
.d3view-dashboard-v2 .ps-resize-handle.is-dragging {
    background: var(--d3v-bg-tertiary);
}
.d3view-dashboard-v2 .ps-resize-grip {
    width: 32px; height: 3px; border-radius: var(--d3v-r-full);
    background: var(--d3v-border-strong); opacity: 0.5;
    transition: opacity var(--d3v-t-fast), width var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-resize-handle:hover .ps-resize-grip,
.d3view-dashboard-v2 .ps-resize-handle.is-dragging .ps-resize-grip {
    opacity: 1; width: 48px;
}

/* ── Notes & Discussion section ── */
.d3view-dashboard-v2 .ps-notes-section {
    display: flex; flex-direction: column;
    flex: 1 1 50%; min-height: 80px; overflow: hidden;
}
.d3view-dashboard-v2 .ps-notes-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; cursor: pointer; flex-shrink: 0;
    background: var(--d3v-bg-secondary);
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-notes-header:hover { background: var(--d3v-bg-tertiary); }
.d3view-dashboard-v2 .ps-notes-title-row {
    display: flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .ps-notes-caret {
    font-size: 12px; color: var(--d3v-accent); width: 12px;
}
.d3view-dashboard-v2 .ps-notes-title {
    font-size: 12px; font-weight: 700; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ps-notes-count {
    font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
    background: rgba(99,102,241,0.1); color: var(--d3v-accent);
}
.d3view-dashboard-v2 .ps-notes-add-btn {
    font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 6px;
    border: 1px solid var(--d3v-border); background: var(--d3v-bg-primary);
    color: var(--d3v-accent); cursor: pointer;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-notes-add-btn:hover {
    background: var(--d3v-accent); color: var(--d3v-text-inverse);
    border-color: var(--d3v-accent);
}
.d3view-dashboard-v2 .ps-notes-body {
    flex: 1; overflow-y: auto; padding: 8px 16px;
}
.d3view-dashboard-v2 .ps-notes-empty {
    padding: 16px; text-align: center; color: var(--d3v-text-muted); font-size: 12px;
}
.d3view-dashboard-v2 .ps-note-item {
    display: flex; gap: 8px; margin-bottom: 10px;
}
.d3view-dashboard-v2 .ps-note-avatar {
    width: 26px; height: 26px; border-radius: 50%; font-size: 9px;
    font-weight: 700; color: var(--d3v-text-inverse); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.d3view-dashboard-v2 .ps-note-content { flex: 1; min-width: 0; }
.d3view-dashboard-v2 .ps-note-meta {
    font-size: 11px; color: var(--d3v-text-primary); margin-bottom: 2px;
}
.d3view-dashboard-v2 .ps-note-meta span { color: var(--d3v-text-muted); font-weight: 400; }
.d3view-dashboard-v2 .ps-note-text {
    font-size: 12px; color: var(--d3v-text-secondary); padding: 6px 10px;
    background: var(--d3v-bg-secondary); border-radius: var(--d3v-r-md);
    line-height: 1.4; word-break: break-word;
}
/* Inline note input */
.d3view-dashboard-v2 .ps-notes-input {
    margin-bottom: 10px;
}
.d3view-dashboard-v2 .ps-notes-textarea {
    width: 100%; border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-md);
    padding: 8px 10px; font-size: 12px; resize: none; font-family: inherit;
    transition: border-color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-notes-textarea:focus {
    outline: none; border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.d3view-dashboard-v2 .ps-notes-actions {
    display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px;
}
.d3view-dashboard-v2 .ps-notes-cancel-btn {
    padding: 4px 12px; border-radius: 6px; border: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary); font-size: 11px; cursor: pointer;
    color: var(--d3v-text-secondary); transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-notes-cancel-btn:hover { background: var(--d3v-bg-tertiary); }
.d3view-dashboard-v2 .ps-notes-post-btn {
    padding: 4px 12px; border-radius: 6px; border: none;
    background: var(--d3v-accent); color: var(--d3v-text-inverse);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-notes-post-btn:hover { background: var(--d3v-accent-hover); }

/* Status pill colors (shared) */
.d3view-dashboard-v2 .ps-st-completed, .d3view-dashboard-v2 .ps-st-passed,
.d3view-dashboard-v2 .ps-st-succeeded { background: var(--db-success-bg); color: var(--db-success-text); }
.d3view-dashboard-v2 .ps-st-running, .d3view-dashboard-v2 .ps-st-executing,
.d3view-dashboard-v2 .ps-st-in_progress { background: var(--db-info-bg); color: var(--db-info-text); }
.d3view-dashboard-v2 .ps-st-failed, .d3view-dashboard-v2 .ps-st-errored,
.d3view-dashboard-v2 .ps-st-deleted { background: var(--db-danger-bg); color: var(--db-danger-text); }
.d3view-dashboard-v2 .ps-st-pending, .d3view-dashboard-v2 .ps-st-queued,
.d3view-dashboard-v2 .ps-st-scheduled { background: var(--db-warning-bg); color: var(--db-warning-text); }
.d3view-dashboard-v2 .ps-st-updated, .d3view-dashboard-v2 .ps-st-created,
.d3view-dashboard-v2 .ps-st-uploaded { background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary); }

/* ── Calendar panel ── */
.d3view-dashboard-v2 .ps-cal-badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
    background: var(--db-success-bg); color: var(--db-success-text);
}
/* Calendar body — compact, shares space with notes */
.d3view-dashboard-v2 .ps-cal-body { padding: 10px 14px; flex-shrink: 1; overflow: hidden; }

.d3view-dashboard-v2 .ps-cal-nav {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.d3view-dashboard-v2 .ps-cal-month {
    font-size: 14px; font-weight: 700; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ps-cal-arrows { display: flex; gap: 4px; }
.d3view-dashboard-v2 .ps-cal-nav-btn {
    width: 28px; height: 28px; border-radius: var(--d3v-r-md);
    border: 1px solid var(--d3v-border); background: var(--d3v-bg-primary);
    cursor: pointer; font-size: 11px; color: var(--d3v-text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-cal-nav-btn:hover {
    background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary);
    border-color: var(--d3v-border-strong);
}
.d3view-dashboard-v2 .ps-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center;
}
.d3view-dashboard-v2 .ps-cal-dn {
    font-size: 11px; font-weight: 700; color: var(--d3v-text-muted);
    padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.d3view-dashboard-v2 .ps-cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 500; color: var(--d3v-text-secondary);
    border-radius: var(--d3v-r-md); position: relative; cursor: default;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ps-cal-day:hover { background: var(--d3v-bg-tertiary); }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-today {
    background: var(--db-brand); color: var(--d3v-text-inverse);
    font-weight: 700; box-shadow: 0 2px 8px rgba(48,72,127,0.35);
}
.d3view-dashboard-v2 .ps-cal-day.ps-cal-other { opacity: 0.25; }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-has-activity { cursor: pointer; font-weight: 700; }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-has-activity::after {
    content: ''; position: absolute; bottom: 3px; left: 50%;
    transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%;
}
.d3view-dashboard-v2 .ps-cal-day.ps-cal-lo {
    background: rgba(16,185,129,0.08);
}
.d3view-dashboard-v2 .ps-cal-day.ps-cal-lo::after { background: var(--d3v-success); }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-md {
    background: rgba(245,158,11,0.08);
}
.d3view-dashboard-v2 .ps-cal-day.ps-cal-md::after { background: var(--d3v-warning); }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-hi {
    background: rgba(239,68,68,0.08);
}
.d3view-dashboard-v2 .ps-cal-day.ps-cal-hi::after { background: var(--d3v-danger); }
.d3view-dashboard-v2 .ps-cal-day.ps-cal-today.ps-cal-has-activity::after { background: rgba(255,255,255,0.8); }

.d3view-dashboard-v2 .ps-cal-legend {
    display: flex; gap: 12px; justify-content: center;
    padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ps-cal-legend-item {
    display: flex; align-items: center; gap: 5px; font-size: 11px;
    color: var(--d3v-text-secondary); font-weight: 500;
}
.d3view-dashboard-v2 .ps-cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Loading spinner */
.d3view-dashboard-v2 .ps-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--d3v-text-muted); font-size: 18px;
}


/* Sidebar container — starts collapsed (icon-only, 56px) */
.d3view-dashboard-v2 .db-vertical-page-sidebar {
    width: 56px;
    min-width: 56px;
    max-width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--db-border, #E2E8F0);
    background: var(--db-bg-secondary, #F8FAFC);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: width 0.15s ease;
}

/* Override base pl-tabs-vertical styles for dashboard theming */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical {
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 4px 0;
    list-style: none;
}

/* Reset Bootstrap list-group-item borders — they conflict with our left-accent pattern */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li.list-group-item {
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--db-r-sm, 4px);
    margin: 2px 4px;
    padding: 0;
    background: transparent;
    transition: all var(--db-transition-fast, 0.12s ease);
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li > a {
    padding: 10px 6px;
    color: var(--db-text-secondary, #475569);
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li > a > i {
    font-size: 16px;
    width: auto;
    color: var(--db-text-muted, #94A3B8);
    transition: color var(--db-transition-fast, 0.12s ease);
}

/* Labels — hidden when collapsed, visible when expanded */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li > a .pl-tab-item-label {
    font-size: 10px;
    color: var(--db-text-muted, #94A3B8);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    transition: opacity 0.15s ease, max-width 0.15s ease;
}

/* Expanded state — labels visible */
.d3view-dashboard-v2 .db-vertical-page-sidebar.is-expanded .pl-tabs-vertical > li > a .pl-tab-item-label {
    max-width: 200px;
    opacity: 1;
}

/* Active state — bold accent left border + tinted background + blue icon */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li.list-group-item.active {
    background: rgba(59, 130, 246, 0.10) !important;
    border-left: 3px solid var(--db-accent, #3B82F6) !important;
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li.active > a > i {
    color: var(--db-accent, #3B82F6) !important;
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li.active > a .pl-tab-item-label {
    color: var(--db-text-primary, #1E293B);
    font-weight: 500;
}

/* Hover state */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li.list-group-item:hover {
    background: var(--db-bg-tertiary, #F1F5F9) !important;
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li:hover > a > i {
    color: var(--db-text-secondary, #475569);
}

/* Resize handle — inside sidebar at right edge, visible grip dots */
.d3view-dashboard-v2 .db-sidebar-resize-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d3view-dashboard-v2 .db-sidebar-resize-wrap .db-sidebar-resize-grip {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--db-border, #CBD5E1);
    transition: background var(--db-transition-fast, 0.12s ease), height 0.12s ease;
}

.d3view-dashboard-v2 .db-sidebar-resize-wrap:hover .db-sidebar-resize-grip,
.d3view-dashboard-v2 .db-sidebar-resize-wrap.is-dragging .db-sidebar-resize-grip {
    background: var(--db-accent, #3B82F6);
    height: 40px;
}

/* Add page button */
.d3view-dashboard-v2 .db-vertical-page-sidebar .db-vpage-add-btn {
    border: 1px dashed var(--db-border, #E2E8F0);
    border-radius: var(--db-r-md, 8px);
    color: var(--db-text-muted, #94A3B8);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto 8px;
    transition: all var(--db-transition-fast, 0.12s ease);
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .db-vpage-add-btn:hover {
    border-color: var(--db-accent, #3B82F6);
    color: var(--db-accent, #3B82F6);
    background: var(--db-bg-tertiary, #F1F5F9);
}

/* When vertical sidebar is active, the horizontal tab bar only shows action buttons.
   Remove the left-border separator and let actions fill the bar end-justified. */
.d3view-dashboard-v2 .db-vertical-page-sidebar ~ #db-content .db-page-tab-actions {
    border-left: none;
    margin-left: auto;
}

/* R2026-38 - "Updated" marker (added by shashank2104 on 2026-07-15).
   Set when the active model / comparison set changes while you are on another tab, and
   cleared the moment that tab is revisited. It means "this now reflects a different
   model than when you last looked" — NOT that the content is stale: inactive pages are
   torn down on switch and rebuilt from live data on return
   (DashboardView.reloadPageWidgets), so what you come back to is always current. */
.d3view-dashboard-v2 .db-vertical-page-sidebar .pl-tabs-vertical > li > a {
    position: relative;
}

.d3view-dashboard-v2 .db-vertical-page-sidebar .db-page-updated-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--db-accent, var(--d3v-accent, #6366f1));
    border: 1.5px solid var(--db-bg-surface, var(--d3v-bg-primary, #fff));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    pointer-events: none;
}

/* Expanded rail shows labels, so tuck the dot beside the label rather than over the icon. */
.d3view-dashboard-v2 .db-vertical-page-sidebar.is-expanded .db-page-updated-dot {
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

/* ── Collection wrapper ── */

.d3view-dashboard-v2 .db-widget-collection {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Collection header: title truncated with ellipsis ── */

.d3view-dashboard-v2 .db-widget-collection .db-collection-header-info {
    min-width: 0;   /* allow flex shrink for ellipsis to work */
    flex: 1 1 auto;
    overflow: hidden;
}

.d3view-dashboard-v2 .db-widget-collection .db-collection-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

.d3view-dashboard-v2 .db-collection-counter {
    font-size: 11px;
    color: var(--db-text-muted, #94A3B8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Bootstrap 3 carousel within the collection ── */

/* Explicit flex growth when inside a db-widget-card flex column */
.d3view-dashboard-v2 .db-widget-card .db-collection-carousel {
    flex: 1 1 auto;
}

/* Carousel fills remaining height after the header */
.d3view-dashboard-v2 .db-collection-carousel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* .carousel-inner fills the carousel height */
.d3view-dashboard-v2 .db-collection-carousel .carousel-inner {
    height: 100%;
    width: 100%;
}

/* Each .item fills the inner — Bootstrap sets display:block on active */
.d3view-dashboard-v2 .db-collection-carousel .item {
    height: 100%;
}

/* Child widget cards fill the slide; remove duplicate chrome */
.d3view-dashboard-v2 .db-collection-carousel .item .db-widget-card {
    height: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* ── Bootstrap carousel indicators: reposition & restyle ── */

.d3view-dashboard-v2 .db-collection-carousel > .carousel-indicators {
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.d3view-dashboard-v2 .db-collection-carousel .carousel-indicators li {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--db-r-full, 9999px);
    background: var(--db-n-300, #CBD5E1);
    border: none;
    margin: 0;
    text-indent: 0;
    cursor: pointer;
    transition: all var(--db-transition-fast, 0.12s ease);
}

.d3view-dashboard-v2 .db-collection-carousel .carousel-indicators li:hover {
    background: var(--db-n-400, #94A3B8);
    transform: scale(1.3);
}

.d3view-dashboard-v2 .db-collection-carousel .carousel-indicators li.active {
    width: 9px;
    height: 9px;
    background: var(--db-brand, #30487f);
}

/* ── Unstack / remove-child button hover accents ── */

.d3view-dashboard-v2 .db-carousel-unstack:hover {
    color: var(--db-accent, #3B82F6);
}

.d3view-dashboard-v2 .db-carousel-remove-child:hover {
    color: var(--db-danger, #EF4444);
}

/* ── Drag-over-widget drop target indicator (DVFIV-1956) ── */

/* Blue ring on the widget card currently hovered during a palette drag */
.d3view-dashboard-v2 .db-drag-drop-target {
    box-shadow: 0 0 0 2px var(--db-accent, #3B82F6), var(--db-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    transition: box-shadow var(--db-transition-fast, 0.12s ease);
    position: relative;
}

/* "Add to carousel" pill badge shown inside the hovered card during drag */
.d3view-dashboard-v2 .db-drag-carousel-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--db-accent, #3B82F6);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--db-r-full, 9999px);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
    letter-spacing: 0.2px;
}

/* Suppress any residual GridStack placeholder when dragging from the palette */
body.db-palette-dragging .grid-stack-placeholder {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   §1  PROJECT HEALTH SCORE  (.ph-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ph-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px 16px 12px;
    gap: 0;
    overflow: hidden;
}

/* Gauge area */
.d3view-dashboard-v2 .ph-gauge-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 2px;
    position: relative;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ph-gauge-svg-wrap {
    position: relative;
    width: 190px;
    height: 115px;
    overflow: visible;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ph-gauge-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    width: 120px;
}

.d3view-dashboard-v2 .ph-gauge-track {
    fill: none;
    stroke: var(--d3v-bg-tertiary);
    stroke-width: 14;
    stroke-linecap: round;
}

.d3view-dashboard-v2 .ph-gauge-fill {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.34, 1.20, 0.64, 1);
}

.d3view-dashboard-v2 .ph-gauge-fill.ph-score-success { stroke: url(#phGaugeGradSuccess); }
.d3view-dashboard-v2 .ph-gauge-fill.ph-score-warning  { stroke: url(#phGaugeGradWarning); }
.d3view-dashboard-v2 .ph-gauge-fill.ph-score-danger   { stroke: url(#phGaugeGradDanger); }

.d3view-dashboard-v2 .ph-score-value {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ph-score-value.ph-score-success { color: var(--d3v-success); }
.d3view-dashboard-v2 .ph-score-value.ph-score-warning  { color: var(--d3v-warning); }
.d3view-dashboard-v2 .ph-score-value.ph-score-danger   { color: var(--d3v-danger); }

.d3view-dashboard-v2 .ph-score-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--d3v-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Status badge */
.d3view-dashboard-v2 .ph-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 600;
}
.d3view-dashboard-v2 .ph-status-badge.ph-badge-success {
    background: rgba(16, 185, 129, 0.10);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.20);
}
.d3view-dashboard-v2 .ph-status-badge.ph-badge-warning {
    background: rgba(245, 158, 11, 0.10);
    color: #D97706;
    border: 1px solid rgba(245, 158, 11, 0.20);
}
.d3view-dashboard-v2 .ph-status-badge.ph-badge-danger {
    background: rgba(239, 68, 68, 0.10);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.20);
}

.d3view-dashboard-v2 .ph-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: phPulseDot 2s ease-in-out infinite;
}
.d3view-dashboard-v2 .ph-badge-success .ph-badge-dot { background: var(--d3v-success); }
.d3view-dashboard-v2 .ph-badge-warning .ph-badge-dot { background: var(--d3v-warning); }
.d3view-dashboard-v2 .ph-badge-danger  .ph-badge-dot { background: var(--d3v-danger); }

@keyframes phPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}

/* Divider */
.d3view-dashboard-v2 .ph-divider {
    height: 1px;
    background: var(--d3v-border);
    margin: 12px 0 10px;
    flex-shrink: 0;
}

/* Factors section */
.d3view-dashboard-v2 .ph-factors-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--d3v-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ph-factor-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.d3view-dashboard-v2 .ph-factor-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.d3view-dashboard-v2 .ph-factor-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}
.d3view-dashboard-v2 .ph-factor-icon.ph-fi-success {
    background: rgba(16, 185, 129, 0.10);
    color: #059669;
}
.d3view-dashboard-v2 .ph-factor-icon.ph-fi-warning {
    background: rgba(245, 158, 11, 0.10);
    color: #D97706;
}

.d3view-dashboard-v2 .ph-factor-meta {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .ph-factor-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d3v-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .ph-factor-track {
    height: 5px;
    border-radius: 99px;
    background: var(--d3v-bg-tertiary);
    overflow: hidden;
}

.d3view-dashboard-v2 .ph-factor-bar {
    height: 100%;
    border-radius: 99px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.d3view-dashboard-v2 .ph-factor-bar.ph-fb-success {
    background: linear-gradient(90deg, #10B981, #34D399);
}
.d3view-dashboard-v2 .ph-factor-bar.ph-fb-warning {
    background: linear-gradient(90deg, #F59E0B, #FCD34D);
}

.d3view-dashboard-v2 .ph-factor-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--d3v-text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

/* Footer */
.d3view-dashboard-v2 .ph-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--d3v-border);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ph-footer-ts {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ph-footer-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 6px;
    padding: 2px 7px;
}


/* ═══════════════════════════════════════════════════════════════════
   §2  PROJECT TIMELINE  (.pt-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .pt-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 12px 16px 10px;
}

/* Legend in header area (rendered inside widget body, not header) */
.d3view-dashboard-v2 .pt-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pt-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d3v-text-secondary);
}

.d3view-dashboard-v2 .pt-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .pt-legend-dot.pt-running  { background: #6366F1; }
.d3view-dashboard-v2 .pt-legend-dot.pt-queued   { background: #F59E0B; }
.d3view-dashboard-v2 .pt-legend-dot.pt-finished { background: #10B981; }
.d3view-dashboard-v2 .pt-legend-dot.pt-error    { background: #EF4444; }

/* Chart container */
.d3view-dashboard-v2 .pt-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
}

/* X-axis tick row */
.d3view-dashboard-v2 .pt-x-axis {
    display: flex;
    padding-left: 160px;
    padding-right: 4px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pt-x-inner {
    flex: 1;
    position: relative;
    height: 18px;
}

.d3view-dashboard-v2 .pt-x-tick {
    position: absolute;
    font-size: 10px;
    font-weight: 500;
    color: var(--d3v-text-muted);
    transform: translateX(-50%);
    white-space: nowrap;
    top: 2px;
    letter-spacing: 0.01em;
}

/* Gantt rows area */
.d3view-dashboard-v2 .pt-gantt-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Vertical grid lines layer */
.d3view-dashboard-v2 .pt-grid-layer {
    position: absolute;
    top: 0;
    left: 160px;
    right: 4px;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.d3view-dashboard-v2 .pt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--d3v-border);
    opacity: 0.7;
}

.d3view-dashboard-v2 .pt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--d3v-accent);
    opacity: 0.75;
    z-index: 2;
    border-radius: 1px;
}

/* Gantt row */
.d3view-dashboard-v2 .pt-gantt-row {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
    min-height: 0;
    z-index: 1;
}

.d3view-dashboard-v2 .pt-row-bg {
    position: absolute;
    inset: 1px 0;
    border-radius: 4px;
    z-index: 0;
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .pt-gantt-row:nth-child(odd) .pt-row-bg {
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .pt-gantt-row:hover .pt-row-bg {
    background: var(--d3v-bg-hover) !important;
}

.d3view-dashboard-v2 .pt-sim-label {
    width: 154px;
    padding-right: 10px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d3v-text-secondary);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.d3view-dashboard-v2 .pt-sim-track {
    flex: 1;
    position: relative;
    height: 100%;
    padding-right: 4px;
    z-index: 1;
}

.d3view-dashboard-v2 .pt-bar-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    display: flex;
    align-items: center;
}

.d3view-dashboard-v2 .pt-bar {
    height: 100%;
    border-radius: var(--d3v-r-full);
    cursor: pointer;
    position: relative;
    min-width: 6px;
    overflow: hidden;
    transition: box-shadow var(--d3v-t-fast), filter var(--d3v-t-fast), transform var(--d3v-t-fast);
}

.d3view-dashboard-v2 .pt-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 60%);
    pointer-events: none;
}

.d3view-dashboard-v2 .pt-bar:hover {
    filter: brightness(1.08);
    transform: scaleY(1.08);
}

.d3view-dashboard-v2 .pt-bar.pt-running {
    background-size: 200% auto;
    animation: ptShimmer 2.4s linear infinite;
    background-image: linear-gradient(90deg, #6366F1 0%, #818CF8 40%, #a5b4fc 50%, #818CF8 60%, #6366F1 100%);
}
.d3view-dashboard-v2 .pt-bar.pt-running:hover  { box-shadow: 0 0 0 3px rgba(99,102,241,0.30); }

.d3view-dashboard-v2 .pt-bar.pt-queued {
    background: linear-gradient(90deg, #F59E0B 0%, #FCD34D 100%);
}
.d3view-dashboard-v2 .pt-bar.pt-queued:hover   { box-shadow: 0 0 0 3px rgba(245,158,11,0.30); }

.d3view-dashboard-v2 .pt-bar.pt-finished {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}
.d3view-dashboard-v2 .pt-bar.pt-finished:hover { box-shadow: 0 0 0 3px rgba(16,185,129,0.30); }

.d3view-dashboard-v2 .pt-bar.pt-error {
    background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
}
.d3view-dashboard-v2 .pt-bar.pt-error:hover    { box-shadow: 0 0 0 3px rgba(239,68,68,0.30); }

@keyframes ptShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Tooltip (fixed positioning, outside widget) */
.d3view-dashboard-v2 .pt-tooltip {
    position: fixed;
    background: var(--d3v-text-primary);
    color: #fff;
    border-radius: var(--d3v-r-md);
    padding: 9px 12px;
    font-size: 11px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    min-width: 190px;
    opacity: 0;
    transition: opacity 0.12s ease;
    line-height: 1.5;
}
.d3view-dashboard-v2 .pt-tooltip.pt-tt-visible { opacity: 1; }

.d3view-dashboard-v2 .pt-tt-name {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .pt-tt-badge {
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--d3v-r-full);
    text-transform: capitalize;
}
.d3view-dashboard-v2 .pt-tt-badge.pt-running  { background: #6366F1; color: #fff; }
.d3view-dashboard-v2 .pt-tt-badge.pt-queued   { background: #F59E0B; color: #fff; }
.d3view-dashboard-v2 .pt-tt-badge.pt-finished { background: #10B981; color: #fff; }
.d3view-dashboard-v2 .pt-tt-badge.pt-error    { background: #EF4444; color: #fff; }

.d3view-dashboard-v2 .pt-tt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: rgba(255,255,255,0.75);
    font-size: 10.5px;
}
.d3view-dashboard-v2 .pt-tt-row strong { color: rgba(255,255,255,0.95); font-weight: 600; }

.d3view-dashboard-v2 .pt-tt-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin: 5px 0;
}

/* Footer */
.d3view-dashboard-v2 .pt-footer {
    border-top: 1px solid var(--d3v-border);
    padding: 7px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    margin-top: 6px;
}

.d3view-dashboard-v2 .pt-footer-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.d3view-dashboard-v2 .pt-footer-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .pt-footer-stat strong {
    font-weight: 700;
    color: var(--d3v-text-secondary);
}

.d3view-dashboard-v2 .pt-footer-sep {
    width: 1px;
    height: 10px;
    background: var(--d3v-border);
}

.d3view-dashboard-v2 .pt-footer-ts {
    font-size: 10px;
    color: var(--d3v-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ═══════════════════════════════════════════════════════════════════
   §3  PROJECT STUDIES SUMMARY  (.ps-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ps-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Summary row */
.d3view-dashboard-v2 .ps-summary-row {
    padding: 6px 14px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
}

.d3view-dashboard-v2 .ps-summary-text {
    font-size: 11px;
    color: var(--d3v-text-muted);
    font-weight: 500;
}

.d3view-dashboard-v2 .ps-summary-text strong {
    color: var(--d3v-text-secondary);
    font-weight: 600;
}

.d3view-dashboard-v2 .ps-summary-refresh {
    font-size: 10px;
    color: var(--d3v-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Study list */
.d3view-dashboard-v2 .ps-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.d3view-dashboard-v2 .ps-list::-webkit-scrollbar { width: 4px; }
.d3view-dashboard-v2 .ps-list::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .ps-list::-webkit-scrollbar-thumb {
    background: var(--d3v-border);
    border-radius: var(--d3v-r-full);
}

/* Study card */
.d3view-dashboard-v2 .ps-study-card {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-left: 3px solid transparent;
    border-radius: var(--d3v-r-md);
    padding: 9px 11px;
    cursor: pointer;
    transition:
        box-shadow var(--d3v-t-base),
        border-color var(--d3v-t-base),
        transform var(--d3v-t-base);
    position: relative;
}

.d3view-dashboard-v2 .ps-study-card:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--d3v-accent);
    border-left-color: var(--d3v-accent);
    transform: translateX(1px);
}

/* Card top row */
.d3view-dashboard-v2 .ps-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.d3view-dashboard-v2 .ps-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    letter-spacing: -0.01em;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .ps-card-date {
    font-size: 10px;
    color: var(--d3v-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card middle row */
.d3view-dashboard-v2 .ps-card-mid {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

/* Status bar */
.d3view-dashboard-v2 .ps-status-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.d3view-dashboard-v2 .ps-status-bar {
    height: 5px;
    border-radius: var(--d3v-r-full);
    overflow: hidden;
    background: var(--d3v-bg-tertiary);
    display: flex;
}

.d3view-dashboard-v2 .ps-status-seg {
    height: 100%;
    transition: width var(--d3v-t-base);
}
.d3view-dashboard-v2 .ps-status-seg.ps-seg-finished { background: var(--d3v-success); }
.d3view-dashboard-v2 .ps-status-seg.ps-seg-running  { background: #6366F1; }
.d3view-dashboard-v2 .ps-status-seg.ps-seg-error    { background: var(--d3v-danger); }

.d3view-dashboard-v2 .ps-status-legend {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-dashboard-v2 .ps-status-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ps-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.d3view-dashboard-v2 .ps-status-dot.ps-dot-finished { background: var(--d3v-success); }
.d3view-dashboard-v2 .ps-status-dot.ps-dot-running  { background: #6366F1; }
.d3view-dashboard-v2 .ps-status-dot.ps-dot-error    { background: var(--d3v-danger); }

/* Sim count pill */
.d3view-dashboard-v2 .ps-sim-pill {
    background: var(--d3v-bg-tertiary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-full);
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card bottom row */
.d3view-dashboard-v2 .ps-card-bottom {
    display: flex;
    align-items: center;
    gap: 7px;
}

.d3view-dashboard-v2 .ps-sparkline-label {
    font-size: 9.5px;
    color: var(--d3v-text-muted);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ps-sparkline-wrap { flex: 1; }

.d3view-dashboard-v2 .ps-sparkline-svg {
    display: block;
    width: 100%;
    height: 18px;
}

.d3view-dashboard-v2 .ps-chevron-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--d3v-bg-tertiary);
    border: 1px solid var(--d3v-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d3v-text-muted);
    font-size: 8px;
    flex-shrink: 0;
    transition: background var(--d3v-t-base), color var(--d3v-t-base), border-color var(--d3v-t-base);
    cursor: pointer;
}
.d3view-dashboard-v2 .ps-study-card:hover .ps-chevron-btn {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════
   §4  PROJECT FILES RECENT  (.pf-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .pf-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Filter chips row */
.d3view-dashboard-v2 .pf-filter-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px 0;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--d3v-border);
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    transition: all var(--d3v-t-fast);
    user-select: none;
}

.d3view-dashboard-v2 .pf-chip:hover {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: var(--d3v-accent);
}

.d3view-dashboard-v2 .pf-chip.pf-active {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(59,130,246,0.28);
}

.d3view-dashboard-v2 .pf-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    border-radius: var(--d3v-r-full);
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 13px;
    padding: 0 3px;
}

.d3view-dashboard-v2 .pf-chip:not(.pf-active) .pf-chip-count {
    background: var(--d3v-text-muted);
    color: #fff;
    opacity: 0.65;
}

/* Divider below chips */
.d3view-dashboard-v2 .pf-chips-divider {
    height: 1px;
    background: var(--d3v-border);
    margin: 8px 0 0;
    flex-shrink: 0;
}

/* File list */
.d3view-dashboard-v2 .pf-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.d3view-dashboard-v2 .pf-list::-webkit-scrollbar { width: 4px; }
.d3view-dashboard-v2 .pf-list::-webkit-scrollbar-track { background: transparent; }
.d3view-dashboard-v2 .pf-list::-webkit-scrollbar-thumb {
    background: var(--d3v-border);
    border-radius: 2px;
}

/* File row */
.d3view-dashboard-v2 .pf-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    cursor: pointer;
    position: relative;
    transition: background var(--d3v-t-fast);
}

.d3view-dashboard-v2 .pf-row:hover {
    background: var(--d3v-bg-secondary);
}

.d3view-dashboard-v2 .pf-row:hover .pf-download-btn {
    opacity: 1;
    transform: translateX(0);
}

.d3view-dashboard-v2 .pf-row:hover .pf-time {
    opacity: 0;
}

.d3view-dashboard-v2 .pf-row + .pf-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 57px;
    right: 14px;
    height: 1px;
    background: var(--d3v-border);
    opacity: 0.55;
}

/* File type icon */
.d3view-dashboard-v2 .pf-type-icon {
    width: 33px;
    height: 33px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-type-icon.pf-type-k   { background: #FEE2E2; color: #DC2626; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-pdf  { background: #FEE2E2; color: #DC2626; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-xls  { background: #D1FAE5; color: #059669; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-csv  { background: #EDE9FE; color: #7C3AED; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-bin  { background: #DBEAFE; color: #2563EB; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-zip  { background: #FEF3C7; color: #D97706; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-dat  { background: #ECFDF5; color: #10B981; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-log  { background: #F3F4F6; color: #6B7280; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-png  { background: #FCE7F3; color: #DB2777; }
.d3view-dashboard-v2 .pf-type-icon.pf-type-other { background: var(--d3v-bg-tertiary); color: var(--d3v-text-muted); }

/* File info */
.d3view-dashboard-v2 .pf-file-info {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .pf-file-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .pf-file-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.d3view-dashboard-v2 .pf-file-size {
    font-size: 10px;
    color: var(--d3v-text-muted);
    font-weight: 500;
}

.d3view-dashboard-v2 .pf-file-tag {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.d3view-dashboard-v2 .pf-file-tag.pf-tag-input   { background: #EFF6FF; color: #3B82F6; }
.d3view-dashboard-v2 .pf-file-tag.pf-tag-output  { background: #ECFDF5; color: #10B981; }
.d3view-dashboard-v2 .pf-file-tag.pf-tag-report  { background: #FDF4FF; color: #A855F7; }

/* Uploader avatar */
.d3view-dashboard-v2 .pf-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--d3v-r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-uploader-name {
    font-size: 9px;
    color: var(--d3v-text-muted);
    white-space: nowrap;
    font-weight: 500;
}

/* Time / download overlay */
.d3view-dashboard-v2 .pf-time-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 50px;
    flex-shrink: 0;
    position: relative;
}

.d3view-dashboard-v2 .pf-time {
    font-size: 10px;
    color: var(--d3v-text-muted);
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
    transition: opacity var(--d3v-t-fast);
}

.d3view-dashboard-v2 .pf-download-btn {
    position: absolute;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d3v-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity var(--d3v-t-fast), transform var(--d3v-t-fast), background var(--d3v-t-fast);
    box-shadow: 0 2px 6px rgba(59,130,246,0.28);
    cursor: pointer;
}
.d3view-dashboard-v2 .pf-download-btn:hover {
    background: #2563EB;
}

/* Footer */
.d3view-dashboard-v2 .pf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-footer-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--d3v-t-fast), color var(--d3v-t-fast);
    cursor: pointer;
}
.d3view-dashboard-v2 .pf-footer-link:hover {
    color: #2563EB;
    gap: 7px;
}

.d3view-dashboard-v2 .pf-footer-stats {
    font-size: 10px;
    color: var(--d3v-text-muted);
    font-weight: 500;
}

/* DVFIV-1958 — File preview sidebar with DataViewer */

.d3view-dashboard-v2 .pf-sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1070;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d3v-t-fast);
}

.d3view-dashboard-v2 .pf-sidebar-container.is-open {
    pointer-events: auto;
    opacity: 1;
}

.d3view-dashboard-v2 .pf-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.35);
    cursor: pointer;
}

.d3view-dashboard-v2 .pf-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    max-width: 720px;
    min-width: 380px;
    height: 100%;
    background: var(--d3v-bg-primary);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.d3view-dashboard-v2 .pf-sidebar-container.is-open .pf-sidebar {
    transform: translateX(0);
}

.d3view-dashboard-v2 .pf-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    flex-shrink: 0;
    gap: 12px;
}

.d3view-dashboard-v2 .pf-sidebar-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.d3view-dashboard-v2 .pf-sidebar-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-sidebar-title-area {
    min-width: 0;
    flex: 1;
}

.d3view-dashboard-v2 .pf-sidebar-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .pf-sidebar-meta {
    font-size: 11px;
    color: var(--d3v-text-muted);
    margin-top: 1px;
}

.d3view-dashboard-v2 .pf-sidebar-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pf-sidebar-action {
    width: 32px;
    height: 32px;
    border-radius: var(--d3v-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--d3v-text-secondary);
    cursor: pointer;
    transition: background var(--d3v-t-fast), color var(--d3v-t-fast);
}

.d3view-dashboard-v2 .pf-sidebar-action:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

.d3view-dashboard-v2 .pf-sidebar-action.js-pf-sidebar-open-viewer:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--d3v-accent);
}

.d3view-dashboard-v2 .pf-sidebar-action.js-pf-sidebar-download:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--d3v-success);
}

.d3view-dashboard-v2 .pf-sidebar-close:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--d3v-danger);
}

.d3view-dashboard-v2 .pf-sidebar-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.d3view-dashboard-v2 .pf-sidebar-body .db-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 24px;
    color: var(--d3v-text-muted);
}

/* Scoped to .db-widget-cleanup-view (not .d3view-dashboard-v2) because the modal renders at body level */

/* Local token aliases — fallback to --d3v-* foundation so this works outside .d3view-dashboard-v2 */
.db-widget-cleanup-view {
    --db-border:            var(--d3v-border, #e2e8f0);
    --db-border-focus:      #30487f;
    --db-bg-canvas:         var(--d3v-n-100, #f1f5f9);
    --db-bg-surface:        var(--d3v-bg-primary, #fff);
    --db-bg-sidebar-hover:  rgba(48,72,127,0.07);
    --db-text-primary:      var(--d3v-n-900, #0f172a);
    --db-text-muted:        var(--d3v-text-muted, #94a3b8);
    --db-brand:             #30487f;
    --db-brand-pale:        #e8eef7;
    --db-success:           var(--d3v-success, #28a745);
}

.db-widget-cleanup-view .db-wc-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    max-height: 70vh;
    font-size: 13px;
}

/* Toolbar */
.db-widget-cleanup-view .db-wc-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--db-border);
    background: var(--db-bg-canvas);
    flex-shrink: 0;
}

.db-widget-cleanup-view .db-wc-search-wrap {
    position: relative;
    flex: 1;
}

.db-widget-cleanup-view .db-wc-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--db-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.db-widget-cleanup-view .db-wc-search-input {
    width: 100%;
    height: 32px;
    padding: 0 10px 0 28px;
    border: 1px solid var(--db-border);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--db-bg-surface);
    color: var(--db-text-primary);
    font-size: 12px;
    transition: border-color 0.15s;
    outline: none;
}

.db-widget-cleanup-view .db-wc-search-input:focus {
    border-color: var(--db-border-focus);
    box-shadow: 0 0 0 2px var(--db-brand-pale);
}

.db-widget-cleanup-view .db-wc-type-filter {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--db-border);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--db-bg-surface);
    color: var(--db-text-primary);
    font-size: 12px;
    min-width: 150px;
    cursor: pointer;
    outline: none;
}

.db-widget-cleanup-view .db-wc-summary {
    font-size: 11px;
    white-space: nowrap;
    color: var(--db-text-muted);
    flex-shrink: 0;
}

/* Sections wrapper */
.db-widget-cleanup-view .db-wc-sections {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0;
}

/* Each widget section */
.db-widget-cleanup-view .db-wc-section {
    border-bottom: 1px solid var(--db-border);
}

.db-widget-cleanup-view .db-wc-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
    background: var(--db-bg-surface);
}

.db-widget-cleanup-view .db-wc-section-header:hover {
    background: var(--db-bg-sidebar-hover);
}

.db-widget-cleanup-view .db-wc-section-check-label {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.db-widget-cleanup-view .db-wc-section-icon {
    font-size: 13px;
    color: var(--db-brand);
    width: 24px;
    height: 20px;
    margin: 0;
    text-align: center;
    flex-shrink: 0;
}

.db-widget-cleanup-view .db-wc-section-label {
    font-weight: 600;
    color: var(--db-text-primary);
    font-size: 12.5px;
}

.db-widget-cleanup-view .db-wc-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--db-brand-pale);
    color: var(--db-brand);
    font-size: 10px;
    font-weight: 700;
}

.db-widget-cleanup-view .db-wc-section-empty-note {
    font-size: 11px;
    font-style: italic;
}

.db-widget-cleanup-view .db-wc-section-toggle {
    color: var(--db-text-muted);
    padding: 2px 6px;
    font-size: 11px;
}

.db-widget-cleanup-view .db-wc-section-toggle:hover {
    color: var(--db-text-primary);
}

/* Section body */
.db-widget-cleanup-view .db-wc-section-body {
    background: var(--db-bg-canvas);
}

.db-widget-cleanup-view .db-wc-empty-section {
    padding: 12px 20px;
    color: var(--db-text-muted);
    font-size: 12px;
    font-style: italic;
}

/* Table */
.db-widget-cleanup-view .db-wc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.db-widget-cleanup-view .db-wc-table thead th {
    padding: 6px 12px;
    border-bottom: 1px solid var(--db-border);
    background: var(--db-bg-surface);
    color: var(--db-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.db-widget-cleanup-view .db-wc-table .db-wc-col-check {
    width: 36px;
    text-align: center;
    padding: 6px 4px;
}

.db-widget-cleanup-view .db-wc-table .db-wc-col-name {
    min-width: 160px;
}

.db-widget-cleanup-view .db-wc-table .db-wc-col-extra {
    font-size: 11px;
    color: var(--db-text-muted);
}

.db-widget-cleanup-view .db-wc-row {
    border-bottom: 1px solid var(--db-border);
    transition: background 0.1s;
}

.db-widget-cleanup-view .db-wc-row:last-child {
    border-bottom: none;
}

.db-widget-cleanup-view .db-wc-row:hover {
    background: var(--db-bg-sidebar-hover);
}

.db-widget-cleanup-view .db-wc-row td {
    padding: 6px 12px;
    vertical-align: middle;
}

.db-widget-cleanup-view .db-wc-row-name {
    display: block;
    font-weight: 500;
    color: var(--db-text-primary);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-widget-cleanup-view .db-wc-row-sub {
    display: block;
    font-size: 11px;
    color: var(--db-text-muted);
    margin-top: 1px;
}

/* No widgets empty state */
.db-widget-cleanup-view .db-wc-no-widgets {
    padding: 40px 24px;
    text-align: center;
    color: var(--db-text-muted);
    font-size: 13px;
}

.db-widget-cleanup-view .db-wc-no-widgets .fa {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
    color: var(--db-success);
}

/* Footer */
.db-widget-cleanup-view .db-wc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--db-border);
    background: var(--db-bg-surface);
    flex-shrink: 0;
    gap: 8px;
}

.db-widget-cleanup-view .db-wc-footer-left {
    display: flex;
    gap: 6px;
}

.db-widget-cleanup-view .db-wc-selected-label {
    font-size: 12px;
}

.db-widget-cleanup-view .db-wc-selected-count {
    font-weight: 700;
    color: var(--db-text-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   §1  TASKS SUMMARY WIDGET  (.ts-*)
   ═══════════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ts-wrap {
    padding: 12px 14px;
    gap: 10px;
}

/* KPI row */
.d3view-dashboard-v2 .ts-kpi-row {
    display: flex;
    gap: 6px;
}

.d3view-dashboard-v2 .ts-kpi {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border, #e2e8f0);
    transition: box-shadow var(--d3v-t-fast, 0.12s), transform var(--d3v-t-fast, 0.12s);
}

.d3view-dashboard-v2 .ts-kpi:hover {
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.06));
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .ts-kpi-val {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.d3view-dashboard-v2 .ts-kpi-accent  { color: var(--d3v-accent, #6366f1); }
.d3view-dashboard-v2 .ts-kpi-success { color: var(--d3v-success, #10b981); }
.d3view-dashboard-v2 .ts-kpi-warning { color: var(--d3v-warning, #f59e0b); }
.d3view-dashboard-v2 .ts-kpi-danger  { color: var(--d3v-danger, #ef4444); }

.d3view-dashboard-v2 .ts-kpi-lbl {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 3px;
}

/* Progress bar */
.d3view-dashboard-v2 .ts-progress-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-dashboard-v2 .ts-progress-track {
    height: 8px;
    border-radius: 20px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    overflow: hidden;
}

.d3view-dashboard-v2 .ts-progress-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 1s cubic-bezier(0.34, 1.2, 0.64, 1);
    position: relative;
}

.d3view-dashboard-v2 .ts-progress-fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    border-radius: 0 20px 20px 0;
}

.d3view-dashboard-v2 .ts-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-dashboard-v2 .ts-progress-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--d3v-accent, #6366f1);
}

.d3view-dashboard-v2 .ts-progress-rem {
    font-size: 10px;
    color: var(--d3v-text-muted, #94a3b8);
}

/* Section label */
.d3view-dashboard-v2 .ts-section-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d3v-text-muted, #94a3b8);
}

/* Upcoming list */
.d3view-dashboard-v2 .ts-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d3view-dashboard-v2 .ts-upcoming-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px;
    border-radius: var(--d3v-r-sm, 6px);
    transition: background var(--d3v-t-fast, 0.12s);
}

.d3view-dashboard-v2 .ts-upcoming-item:hover {
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-dashboard-v2 .ts-upcoming-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ts-dot-over {
    background: var(--d3v-danger, #ef4444);
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15);
}

.d3view-dashboard-v2 .ts-dot-soon {
    background: var(--d3v-warning, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15);
}

.d3view-dashboard-v2 .ts-dot-ok {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border: 2px solid var(--d3v-border-strong, #cbd5e1);
}

.d3view-dashboard-v2 .ts-upcoming-name {
    flex: 1;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .ts-upcoming-due {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ts-due-over {
    background: rgba(239,68,68,0.1);
    color: var(--d3v-danger, #ef4444);
}

.d3view-dashboard-v2 .ts-due-soon {
    background: rgba(245,158,11,0.1);
    color: #d97706;
}

.d3view-dashboard-v2 .ts-due-ok {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-muted, #94a3b8);
}


/* §2 ENHANCED PROJECT SUMMARY — moved to d3viewdashboard-v2-21-project-widgets.css */

/* Root */
.d3view-dashboard-v2 .pt-wrap { gap: 0; }

/* ── 1. Completion bar ── */
.d3view-dashboard-v2 .pt-completion-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--d3v-border);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .pt-completion-ring {
    width: 48px; height: 48px; position: relative; flex-shrink: 0;
}
.d3view-dashboard-v2 .pt-completion-ring svg { display: block; }
.d3view-dashboard-v2 .pt-ring-pct {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--d3v-success);
}
.d3view-dashboard-v2 .pt-completion-info { flex: 1; min-width: 0; }
.d3view-dashboard-v2 .pt-completion-label {
    font-size: 12px; font-weight: 600; color: var(--d3v-text-primary); margin-bottom: 6px;
}
.d3view-dashboard-v2 .pt-completion-detail {
    font-weight: 400; color: var(--d3v-text-muted); margin-left: 6px;
}
.d3view-dashboard-v2 .pt-segmented-bar {
    height: 7px; border-radius: 4px; overflow: hidden;
    display: flex; background: var(--d3v-bg-tertiary);
}
.d3view-dashboard-v2 .pt-seg { height: 100%; transition: width 0.6s; }
.d3view-dashboard-v2 .pt-seg-done { background: var(--d3v-success); }
.d3view-dashboard-v2 .pt-seg-open { background: var(--d3v-warning); }
.d3view-dashboard-v2 .pt-seg-overdue { background: var(--d3v-danger); }
.d3view-dashboard-v2 .pt-seg-legend {
    display: flex; gap: 14px; margin-top: 4px;
}
.d3view-dashboard-v2 .pt-seg-legend-item {
    font-size: 10px; color: var(--d3v-text-muted); display: flex; align-items: center; gap: 4px;
}
.d3view-dashboard-v2 .pt-seg-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}

/* ── 2. Toolbar: toggle cards + group-by ── */
.d3view-dashboard-v2 .pt-toolbar {
    display: flex; align-items: stretch; gap: 12px;
    padding: 10px 18px; border-bottom: 1px solid var(--d3v-border);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .pt-toggle-cards {
    display: flex; gap: 6px; flex: 1;
}
.d3view-dashboard-v2 .pt-groupby-bar {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding-left: 12px; border-left: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .pt-groupby-label {
    font-size: 10px; font-weight: 600; color: var(--d3v-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.d3view-dashboard-v2 .pt-groupby-select {
    font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--d3v-border); background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary); cursor: pointer;
    transition: border-color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .pt-groupby-select:focus {
    outline: none; border-color: var(--d3v-accent);
}
.d3view-dashboard-v2 .pt-toggle-card {
    flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--d3v-r-md);
    border: 2px solid transparent; cursor: pointer;
    transition: all var(--d3v-t-fast); min-width: 0;
}
.d3view-dashboard-v2 .pt-toggle-card:hover { border-color: var(--d3v-accent); }
.d3view-dashboard-v2 .pt-toggle-card.active {
    border-color: var(--d3v-accent); background: rgba(99,102,241,0.05);
}
.d3view-dashboard-v2 .pt-tc-val {
    font-size: 22px; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .pt-tc-lbl {
    font-size: 10px; font-weight: 500; color: var(--d3v-text-muted);
    text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px;
}
.d3view-dashboard-v2 .pt-tc-accent { color: var(--d3v-accent); }
.d3view-dashboard-v2 .pt-tc-success { color: var(--d3v-success); }
.d3view-dashboard-v2 .pt-tc-warning { color: var(--d3v-warning); }
.d3view-dashboard-v2 .pt-tc-danger { color: var(--d3v-danger); }

/* ── 3. Task table ── */
.d3view-dashboard-v2 .pt-table-wrap {
    padding: 0;
}
.d3view-dashboard-v2 .pt-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.d3view-dashboard-v2 .pt-table th {
    text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 700;
    color: var(--d3v-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid var(--d3v-border); background: var(--d3v-bg-primary);
    position: sticky; top: 0; z-index: 1;
}
.d3view-dashboard-v2 .pt-table td {
    padding: 8px 10px; border-bottom: 1px solid var(--d3v-bg-tertiary);
    vertical-align: middle;
}
.d3view-dashboard-v2 .pt-table tbody tr {
    transition: background var(--d3v-t-fast); cursor: default;
}
.d3view-dashboard-v2 .pt-table tbody tr:hover { background: var(--d3v-bg-secondary); }
.d3view-dashboard-v2 .pt-row-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}
.d3view-dashboard-v2 .pt-row-name {
    font-weight: 600; color: var(--d3v-text-primary); font-size: 12px;
}
.d3view-dashboard-v2 .pt-row-desc {
    font-size: 11px; color: var(--d3v-text-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.d3view-dashboard-v2 .pt-row-assignee {
    display: flex; align-items: center; gap: 5px;
}
.d3view-dashboard-v2 .pt-row-avatar {
    width: 22px; height: 22px; border-radius: 50%; font-size: 9px;
    font-weight: 700; color: var(--d3v-text-inverse); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.d3view-dashboard-v2 .pt-row-assignee-name {
    font-size: 11px; color: var(--d3v-text-secondary); white-space: nowrap;
}
.d3view-dashboard-v2 .pt-row-unassigned { color: var(--d3v-text-muted); font-size: 11px; }
.d3view-dashboard-v2 .pt-row-due { font-size: 11px; color: var(--d3v-text-muted); white-space: nowrap; }
.d3view-dashboard-v2 .pt-status-pill {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 600;
}
.d3view-dashboard-v2 .pt-st-done { background: rgba(16,185,129,0.1); color: #065f46; }
.d3view-dashboard-v2 .pt-st-open { background: rgba(245,158,11,0.1); color: #92400e; }
.d3view-dashboard-v2 .pt-st-overdue { background: rgba(239,68,68,0.1); color: #991b1b; }

/* Entity badges (shared with summary) */
.d3view-dashboard-v2 .pt-entity-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; padding: 2px 7px;
    border-radius: var(--d3v-r-full); white-space: nowrap;
}
.d3view-dashboard-v2 .pt-entity-badge .fa { font-size: 9px; }
.d3view-dashboard-v2 .pt-type-sim { background: rgba(99,102,241,0.1); color: #6366f1; }
.d3view-dashboard-v2 .pt-type-wf { background: rgba(245,158,11,0.1); color: #f59e0b; }
.d3view-dashboard-v2 .pt-type-db { background: rgba(20,184,166,0.1); color: #14b8a6; }
.d3view-dashboard-v2 .pt-type-file { background: rgba(59,130,246,0.1); color: #3b82f6; }
.d3view-dashboard-v2 .pt-type-hpc { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.d3view-dashboard-v2 .pt-type-simlytiks { background: rgba(6,182,212,0.1); color: #06b6d4; }
.d3view-dashboard-v2 .pt-type-ml { background: rgba(249,115,22,0.1); color: #f97316; }
.d3view-dashboard-v2 .pt-type-other { background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary); }

/* ── 4. Tasks per user ── */
.d3view-dashboard-v2 .pt-per-user-section {
    border-top: 1px solid var(--d3v-border); padding: 12px 18px; flex-shrink: 0;
}
.d3view-dashboard-v2 .pt-per-user-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.d3view-dashboard-v2 .pt-per-user-title {
    font-size: 12px; font-weight: 700; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .pt-per-user-toggle { display: flex; gap: 3px; }
.d3view-dashboard-v2 .pt-pu-btn {
    padding: 3px 10px; border-radius: 6px; font-size: 10px; font-weight: 600;
    border: 1px solid var(--d3v-border); background: var(--d3v-bg-primary);
    color: var(--d3v-text-muted); cursor: pointer; transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .pt-pu-btn.active {
    background: rgba(99,102,241,0.08); color: var(--d3v-accent); border-color: var(--d3v-accent);
}
.d3view-dashboard-v2 .pt-pu-btn:hover { border-color: var(--d3v-accent); color: var(--d3v-accent); }

/* Horizontal stacked bars */
.d3view-dashboard-v2 .pt-pu-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.d3view-dashboard-v2 .pt-pu-user {
    width: 85px; font-size: 11px; font-weight: 500; text-align: right;
    flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .pt-pu-bars {
    display: flex; height: 22px; border-radius: 4px; overflow: hidden;
    transition: width 0.5s;
}
.d3view-dashboard-v2 .pt-pu-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--d3v-text-inverse);
    min-width: 18px; transition: flex var(--d3v-t-smooth);
}
.d3view-dashboard-v2 .pt-pu-done { background: var(--d3v-success); }
.d3view-dashboard-v2 .pt-pu-open { background: var(--d3v-warning); }
.d3view-dashboard-v2 .pt-pu-overdue { background: var(--d3v-danger); }
.d3view-dashboard-v2 .pt-pu-total {
    font-size: 11px; font-weight: 700; width: 28px; flex-shrink: 0;
    color: var(--d3v-text-primary); font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .pt-pu-legend {
    display: flex; gap: 14px; margin-top: 8px; font-size: 10px; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .pt-pu-legend span { display: flex; align-items: center; gap: 4px; }
.d3view-dashboard-v2 .pt-pu-legend-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 2px;
}

/* Per-user table mode */
.d3view-dashboard-v2 .pt-pu-table {
    width: 100%; border-collapse: collapse; font-size: 11px;
}
.d3view-dashboard-v2 .pt-pu-table th {
    text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 600;
    color: var(--d3v-text-muted); border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .pt-pu-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--d3v-bg-tertiary);
}

/* Per-user wrap (chart + table combined in user view) */
.d3view-dashboard-v2 .pt-pu-wrap { padding: 14px 18px; }
.d3view-dashboard-v2 .pt-pu-wrap .pt-pu-table { margin-top: 14px; }

/* View container */
.d3view-dashboard-v2 .pt-view-container { padding: 0; }

/* ── Right-click context menu ── */
.pt-ctx-menu {
    background: var(--d3v-bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    border: 1px solid var(--d3v-border, #e2e8f0);
    padding: 4px 0;
    min-width: 180px;
}
.pt-ctx-item {
    padding: 8px 14px;
    font-size: 12px;
    color: var(--d3v-accent, #6366f1);
    font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.1s;
}
.pt-ctx-item:hover { background: var(--d3v-bg-secondary, #f8fafc); }
.pt-ctx-item .fa { font-size: 13px; width: 16px; text-align: center; }

/* ── DVFIV-1961: Per-user breakdown ── */
.d3view-dashboard-v2 .pt-user-breakdown {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d3view-dashboard-v2 .pt-user-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: var(--d3v-r-md, 8px);
    transition: box-shadow 0.15s ease;
}

.d3view-dashboard-v2 .pt-user-row:hover {
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
}

.d3view-dashboard-v2 .pt-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 1px;
}

.d3view-dashboard-v2 .pt-user-info {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .pt-user-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .pt-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .pt-status-chips {
    flex-shrink: 0;
}

/* Chip rows */
.d3view-dashboard-v2 .pt-user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.d3view-dashboard-v2 .pt-task-chips {
    margin-top: 4px;
}

/* Base chip */
.d3view-dashboard-v2 .pt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-dashboard-v2 .pt-chip .fa { font-size: 10px; }

/* Status chips */
.d3view-dashboard-v2 .pt-chip-done {
    background: rgba(16,185,129,0.10);
    color: var(--d3v-success, #10b981);
}
.d3view-dashboard-v2 .pt-chip-open {
    background: rgba(99,102,241,0.10);
    color: var(--d3v-accent, #6366f1);
}
.d3view-dashboard-v2 .pt-chip-overdue {
    background: rgba(239,68,68,0.10);
    color: var(--d3v-danger, #ef4444);
}

/* Task name chips */
.d3view-dashboard-v2 .pt-chip-task {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}
.d3view-dashboard-v2 .pt-chip-task .fa {
    color: var(--d3v-text-muted, #94a3b8);
}
.d3view-dashboard-v2 .pt-chip-task-overdue {
    background: rgba(239,68,68,0.08);
    color: var(--d3v-danger, #ef4444);
}
.d3view-dashboard-v2 .pt-chip-task-overdue .fa {
    color: var(--d3v-danger, #ef4444);
}

/* Expand/collapse toggle */
.d3view-dashboard-v2 .pt-tasks-toggle {
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-accent, #3b82f6);
    cursor: pointer;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    background: rgba(59,130,246,0.08);
    transition: background var(--d3v-t-fast, 0.12s);
}
.d3view-dashboard-v2 .pt-tasks-toggle:hover {
    background: rgba(59,130,246,0.15);
    text-decoration: none;
}

/* Task chip status variants — left border accent */
.d3view-dashboard-v2 .pt-chip-task-open {
    border-left: 3px solid var(--d3v-accent, #6366f1);
}
.d3view-dashboard-v2 .pt-chip-task-overdue {
    border-left: 3px solid var(--d3v-danger, #ef4444);
}
.d3view-dashboard-v2 .pt-chip-task-done {
    border-left: 3px solid var(--d3v-success, #10b981);
    opacity: 0.6;
    text-decoration: line-through;
}

/* Footer with See All link */
.d3view-dashboard-v2 .pt-footer {
    padding: 6px 14px;
    text-align: right;
    border-top: 1px solid var(--d3v-border, #e2e8f0);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .pt-see-more-link {
    font-size: 12px;
    color: var(--d3v-accent, #6366f1);
    text-decoration: none;
    transition: color 0.15s ease;
}

.d3view-dashboard-v2 .pt-see-more-link:hover {
    color: var(--d3v-accent-hover, #4f46e5);
    text-decoration: underline;
}

.d3view-dashboard-v2 .pt-see-more-link .fa {
    margin-left: 4px;
}

/* Root */
.d3view-dashboard-v2 .ptf-wrap {
    gap: 0;
}

/* ---- Header bar ---- */
.d3view-dashboard-v2 .ptf-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary);
    flex-shrink: 0;
}

/* Search */
.d3view-dashboard-v2 .ptf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.d3view-dashboard-v2 .ptf-search-wrap > .fa-search {
    position: absolute;
    left: 10px;
    color: var(--d3v-text-muted);
    font-size: 12px;
    pointer-events: none;
}

.d3view-dashboard-v2 .ptf-search {
    width: 180px;
    height: 32px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-secondary);
    transition: all var(--d3v-t-fast);
    outline: none;
}

.d3view-dashboard-v2 .ptf-search:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: var(--d3v-bg-primary);
}

/* Filter chips */
.d3view-dashboard-v2 .ptf-filter-chips {
    display: flex;
    gap: 4px;
    flex: 1;
}

.d3view-dashboard-v2 .ptf-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-secondary);
    cursor: pointer;
    transition: all var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-chip:hover {
    background: var(--d3v-bg-tertiary);
    border-color: var(--d3v-border-strong, #cbd5e1);
}

.d3view-dashboard-v2 .ptf-chip-active {
    background: var(--d3v-accent);
    color: var(--d3v-text-inverse);
    border-color: var(--d3v-accent);
}

.d3view-dashboard-v2 .ptf-chip-active:hover {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
}

.d3view-dashboard-v2 .ptf-chip-danger.ptf-chip-active {
    background: var(--d3v-danger);
    border-color: var(--d3v-danger);
}

.d3view-dashboard-v2 .ptf-chip-count {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.2);
    padding: 0 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
}

.d3view-dashboard-v2 .ptf-chip:not(.ptf-chip-active) .ptf-chip-count {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-muted);
}

/* Create button */
.d3view-dashboard-v2 .ptf-create-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: var(--d3v-text-inverse);
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
    transition: all var(--d3v-t-fast);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-create-btn:hover {
    box-shadow: 0 4px 14px rgba(99,102,241,.4);
    transform: translateY(-1px);
}

/* ---- KPI strip ---- */
.d3view-dashboard-v2 .ptf-kpi-strip {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 20px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-kpi-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .ptf-kpi-val {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.d3view-dashboard-v2 .ptf-kpi-val-accent  { color: var(--d3v-accent); }
.d3view-dashboard-v2 .ptf-kpi-val-success { color: var(--d3v-success); }
.d3view-dashboard-v2 .ptf-kpi-val-warning { color: var(--d3v-warning); }
.d3view-dashboard-v2 .ptf-kpi-val-danger  { color: var(--d3v-danger); }

.d3view-dashboard-v2 .ptf-kpi-lbl {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ptf-kpi-divider {
    width: 1px;
    height: 24px;
    background: var(--d3v-border);
}

.d3view-dashboard-v2 .ptf-mini-progress {
    width: 80px;
    height: 6px;
    background: var(--d3v-bg-tertiary);
    border-radius: var(--d3v-r-full);
    overflow: hidden;
}

.d3view-dashboard-v2 .ptf-mini-fill {
    height: 100%;
    border-radius: var(--d3v-r-full);
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width .6s cubic-bezier(.34, 1.2, .64, 1);
}

/* ---- Table ---- */
.d3view-dashboard-v2 .ptf-table-wrap {
    overflow-x: auto;
}

.d3view-dashboard-v2 .ptf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.d3view-dashboard-v2 .ptf-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.d3view-dashboard-v2 .ptf-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d3v-text-muted);
    background: var(--d3v-bg-tertiary);
    border-bottom: 1px solid var(--d3v-border);
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-th-name {
    min-width: 220px;
}

.d3view-dashboard-v2 .ptf-th-actions {
    width: 72px;
}

.d3view-dashboard-v2 .ptf-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-bg-tertiary);
    vertical-align: middle;
}

.d3view-dashboard-v2 .ptf-row {
    transition: background var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-row:hover {
    background: var(--d3v-bg-secondary);
}

.d3view-dashboard-v2 .ptf-row-overdue {
    background: rgba(239,68,68,.03);
}

.d3view-dashboard-v2 .ptf-row-overdue:hover {
    background: rgba(239,68,68,.06);
}

.d3view-dashboard-v2 .ptf-row-done {
    opacity: .6;
}

.d3view-dashboard-v2 .ptf-row-done:hover {
    opacity: .85;
}

.d3view-dashboard-v2 .ptf-empty-row {
    text-align: center;
    padding: 32px 12px;
    color: var(--d3v-text-muted);
    font-size: 13px;
}

.d3view-dashboard-v2 .ptf-empty-row .fa {
    margin-right: 6px;
}

/* Task name cell */
.d3view-dashboard-v2 .ptf-cell-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d3view-dashboard-v2 .ptf-task-name {
    font-weight: 600;
    color: var(--d3v-text-primary);
}

.d3view-dashboard-v2 .ptf-task-desc {
    font-size: 11px;
    color: var(--d3v-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Status badges */
.d3view-dashboard-v2 .ptf-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-status-progress   { background: rgba(99,102,241,.1);  color: #6366f1; }
.d3view-dashboard-v2 .ptf-status-notstarted  { background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary); }
.d3view-dashboard-v2 .ptf-status-complete    { background: rgba(16,185,129,.1);  color: #059669; }

/* Priority badges */
.d3view-dashboard-v2 .ptf-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-priority-high   { color: var(--d3v-danger); }
.d3view-dashboard-v2 .ptf-priority-medium  { color: var(--d3v-warning); }
.d3view-dashboard-v2 .ptf-priority-low    { color: var(--d3v-text-muted); }
.d3view-dashboard-v2 .ptf-priority-none   { color: var(--d3v-text-muted); }

/* Assignee */
.d3view-dashboard-v2 .ptf-assignee {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .ptf-avatar-xs {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--d3v-text-inverse);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-assignee span {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary);
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-unassigned {
    font-size: 11px;
    color: var(--d3v-text-muted);
}

/* Category badges */
.d3view-dashboard-v2 .ptf-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-cat-sim       { background: rgba(99,102,241,.1);  color: #6366f1; }
.d3view-dashboard-v2 .ptf-cat-wf        { background: rgba(16,185,129,.1);  color: #10b981; }
.d3view-dashboard-v2 .ptf-cat-db        { background: rgba(6,182,212,.1);   color: #06b6d4; }
.d3view-dashboard-v2 .ptf-cat-file      { background: rgba(245,158,11,.1);  color: #d97706; }
.d3view-dashboard-v2 .ptf-cat-hpc       { background: rgba(239,68,68,.1);   color: #ef4444; }
.d3view-dashboard-v2 .ptf-cat-simlytiks { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.d3view-dashboard-v2 .ptf-cat-ml        { background: rgba(236,72,153,.1);  color: #ec4899; }
.d3view-dashboard-v2 .ptf-cat-other     { background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary); }

/* Due date */
.d3view-dashboard-v2 .ptf-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-due-overdue { color: var(--d3v-danger); }
.d3view-dashboard-v2 .ptf-due-soon    { color: #d97706; }
.d3view-dashboard-v2 .ptf-due-normal  { color: var(--d3v-text-secondary); }

/* Progress cell */
.d3view-dashboard-v2 .ptf-progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .ptf-progress-mini-track {
    width: 60px;
    height: 5px;
    background: var(--d3v-bg-tertiary);
    border-radius: var(--d3v-r-full);
    overflow: hidden;
}

.d3view-dashboard-v2 .ptf-progress-mini-fill {
    height: 100%;
    border-radius: var(--d3v-r-full);
    background: var(--d3v-accent);
    transition: width .4s;
}

.d3view-dashboard-v2 .ptf-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
}

/* Action buttons — visible on hover */
.d3view-dashboard-v2 .ptf-cell-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.d3view-dashboard-v2 .ptf-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--d3v-r-sm);
    background: transparent;
    color: var(--d3v-text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--d3v-t-fast);
    opacity: 0;
}

.d3view-dashboard-v2 .ptf-row:hover .ptf-action-btn {
    opacity: 1;
}

.d3view-dashboard-v2 .ptf-action-btn:hover {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
}

/* Footer */
.d3view-dashboard-v2 .ptf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-footer-count {
    font-size: 11px;
    color: var(--d3v-text-muted);
}

/* Worker container inside create modal */
.d3view-dashboard-v2 .ptf-worker-container {
    min-height: 200px;
}

/* ---- Body area (shared by all view modes) ---- */
.d3view-dashboard-v2 .ptf-body-area {
    overflow-x: auto;
}

/* ============================================================
   Kanban View
   ============================================================ */
.d3view-dashboard-v2 .ptf-kanban {
    display: flex;
    gap: 12px;
    padding: 12px;
    height: 100%;
    overflow-x: auto;
    align-items: flex-start;
}

.d3view-dashboard-v2 .ptf-kanban-col {
    flex: 1;
    min-width: 260px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-secondary);
    border-radius: var(--d3v-r-lg);
    border: 1px solid var(--d3v-border);
    overflow: hidden;
    max-height: 100%;
}

.d3view-dashboard-v2 .ptf-kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--d3v-border);
}

.d3view-dashboard-v2 .ptf-kanban-col-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .ptf-kanban-col-count {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,.5);
    padding: 1px 7px;
    border-radius: var(--d3v-r-full);
    min-width: 20px;
    text-align: center;
}

/* Column header color variants */
.d3view-dashboard-v2 .ptf-kanban-hdr-notstarted {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ptf-kanban-hdr-notstarted .ptf-kanban-col-count {
    background: var(--d3v-bg-hover);
}

.d3view-dashboard-v2 .ptf-kanban-hdr-progress {
    background: rgba(99,102,241,.08);
    color: #6366f1;
}
.d3view-dashboard-v2 .ptf-kanban-hdr-progress .ptf-kanban-col-count {
    background: rgba(99,102,241,.15);
}

.d3view-dashboard-v2 .ptf-kanban-hdr-complete {
    background: rgba(16,185,129,.08);
    color: #059669;
}
.d3view-dashboard-v2 .ptf-kanban-hdr-complete .ptf-kanban-col-count {
    background: rgba(16,185,129,.15);
}

.d3view-dashboard-v2 .ptf-kanban-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kanban card */
.d3view-dashboard-v2 .ptf-kanban-card {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    padding: 12px;
    box-shadow: var(--d3v-sh-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--d3v-t-fast), transform var(--d3v-t-fast);
    cursor: default;
}

.d3view-dashboard-v2 .ptf-kanban-card:hover {
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .ptf-kanban-card-overdue {
    border-left: 3px solid var(--d3v-danger);
}

.d3view-dashboard-v2 .ptf-kanban-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.d3view-dashboard-v2 .ptf-kanban-card-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3v-text-primary);
    line-height: 1.35;
    flex: 1;
    word-break: break-word;
}

.d3view-dashboard-v2 .ptf-kanban-card-desc {
    font-size: 11px;
    color: var(--d3v-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.d3view-dashboard-v2 .ptf-kanban-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-dashboard-v2 .ptf-kanban-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--d3v-bg-tertiary);
}

.d3view-dashboard-v2 .ptf-kanban-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--d3v-text-muted);
    font-size: 12px;
}

/* ============================================================
   Gantt View
   ============================================================ */
.d3view-dashboard-v2 .ptf-gantt {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap {
    flex: 1;
    overflow: auto;
    padding: 8px 0;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap svg {
    display: block;
}

/* Axis styling */
.d3view-dashboard-v2 .ptf-gantt-svg-wrap .axis text {
    font-size: 10px;
    fill: var(--d3v-text-muted);
    font-weight: 500;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .axis line,
.d3view-dashboard-v2 .ptf-gantt-svg-wrap .axis path {
    stroke: var(--d3v-border);
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-grid line {
    stroke: var(--d3v-bg-tertiary);
    stroke-dasharray: 2 3;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-bar {
    rx: 4;
    ry: 4;
    transition: opacity var(--d3v-t-fast);
    cursor: pointer;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-bar:hover {
    opacity: 0.85;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-progress {
    rx: 4;
    ry: 4;
    pointer-events: none;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-today {
    stroke: var(--d3v-danger);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-today-label {
    font-size: 9px;
    fill: var(--d3v-danger);
    font-weight: 700;
    text-transform: uppercase;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-label {
    font-size: 11px;
    fill: var(--d3v-text-primary);
    font-weight: 500;
}

.d3view-dashboard-v2 .ptf-gantt-svg-wrap .ptf-gantt-avatar {
    font-size: 8px;
    font-weight: 700;
    fill: var(--d3v-text-inverse);
    text-anchor: middle;
    dominant-baseline: central;
}

.d3view-dashboard-v2 .ptf-gantt-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--d3v-text-muted);
    font-size: 13px;
    gap: 6px;
}

/* Gantt tooltip */
.d3view-dashboard-v2 .ptf-gantt-tooltip {
    position: fixed;
    z-index: 1000;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-lg);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--d3v-text-primary);
    pointer-events: none;
    max-width: 280px;
    line-height: 1.5;
}

.d3view-dashboard-v2 .ptf-gantt-tooltip strong {
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.d3view-dashboard-v2 .ptf-gantt-tooltip .ptf-tt-row {
    display: flex;
    gap: 6px;
    color: var(--d3v-text-secondary);
    font-size: 11px;
}

.d3view-dashboard-v2 .ptf-gantt-tooltip .ptf-tt-row span:first-child {
    color: var(--d3v-text-muted);
    min-width: 55px;
}

/* ============================================================
   Bar Chart View
   ============================================================ */
.d3view-dashboard-v2 .ptf-chart {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.d3view-dashboard-v2 .ptf-chart-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-primary);
}

.d3view-dashboard-v2 .ptf-chart-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
    margin: 0;
}

.d3view-dashboard-v2 .ptf-chart-groupby {
    height: 32px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    padding: 0 28px 0 10px;
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-primary);
    outline: none;
    transition: border-color var(--d3v-t-fast);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.d3view-dashboard-v2 .ptf-chart-groupby:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap {
    flex: 1;
    overflow: hidden;
    padding: 16px;
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap svg {
    display: block;
}

/* Chart bar styling */
.d3view-dashboard-v2 .ptf-chart-svg-wrap .ptf-chart-bar {
    transition: opacity var(--d3v-t-fast);
    cursor: pointer;
    rx: 4;
    ry: 4;
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap .ptf-chart-bar:hover {
    opacity: 0.8;
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap .ptf-chart-bar-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--d3v-text-primary);
    font-variant-numeric: tabular-nums;
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap .axis text {
    font-size: 11px;
    fill: var(--d3v-text-secondary);
    font-weight: 500;
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap .axis line,
.d3view-dashboard-v2 .ptf-chart-svg-wrap .axis path {
    stroke: var(--d3v-border);
}

.d3view-dashboard-v2 .ptf-chart-svg-wrap .ptf-chart-grid line {
    stroke: var(--d3v-bg-tertiary);
    stroke-dasharray: 2 3;
}

.d3view-dashboard-v2 .ptf-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--d3v-text-muted);
    font-size: 13px;
    gap: 6px;
}

/* ============================================================
   Edit Task Sidebar
   ============================================================ */
.d3view-dashboard-v2 .ptf-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.35);
    z-index: 1000;
    transition: opacity var(--d3v-t-base);
}

.d3view-dashboard-v2 .ptf-edit-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--d3v-bg-primary);
    box-shadow: var(--d3v-sh-xl);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.d3view-dashboard-v2 .ptf-edit-sidebar.is-open {
    transform: translateX(0);
}

.d3view-dashboard-v2 .ptf-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--d3v-border);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-edit-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--d3v-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .ptf-edit-title .fa {
    color: var(--d3v-text-muted);
    font-size: 13px;
}

.d3view-dashboard-v2 .ptf-edit-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--d3v-r-md);
    background: transparent;
    color: var(--d3v-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-edit-close-btn:hover {
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-primary);
}

.d3view-dashboard-v2 .ptf-edit-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.d3view-dashboard-v2 .ptf-edit-row {
    display: flex;
    gap: 12px;
}

.d3view-dashboard-v2 .ptf-edit-half {
    flex: 1;
    min-width: 0;
}

.d3view-dashboard-v2 .ptf-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-dashboard-v2 .ptf-edit-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ptf-edit-required {
    color: var(--d3v-danger);
    margin-left: 2px;
}

.d3view-dashboard-v2 .ptf-edit-input,
.d3view-dashboard-v2 .ptf-edit-select,
.d3view-dashboard-v2 .ptf-edit-textarea {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    font-size: 13px;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-secondary);
    outline: none;
    transition: border-color var(--d3v-t-fast), box-shadow var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-edit-textarea {
    height: auto;
    padding: 8px 10px;
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

.d3view-dashboard-v2 .ptf-edit-select {
    padding-right: 28px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.d3view-dashboard-v2 .ptf-edit-input:focus,
.d3view-dashboard-v2 .ptf-edit-select:focus,
.d3view-dashboard-v2 .ptf-edit-textarea:focus {
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    background: var(--d3v-bg-primary);
}

.d3view-dashboard-v2 .ptf-edit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-edit-save-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: var(--d3v-text-inverse);
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
    transition: all var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-edit-save-btn:hover {
    box-shadow: 0 4px 14px rgba(99,102,241,.4);
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .ptf-edit-save-btn.disabled {
    opacity: .6;
    pointer-events: none;
}

/* ============================================================
   More Dropdown Menu
   ============================================================ */
.d3view-dashboard-v2 .ptf-dropdown {
    position: fixed;
    min-width: 190px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-lg);
    z-index: 1050;
    padding: 4px 0;
    animation: ptf-dropdown-in .12s ease-out;
}

@keyframes ptf-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d3view-dashboard-v2 .ptf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary);
    cursor: pointer;
    transition: background var(--d3v-t-fast);
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-dropdown-item:hover {
    background: var(--d3v-bg-secondary);
}

.d3view-dashboard-v2 .ptf-dropdown-item .fa {
    width: 16px;
    text-align: center;
    color: var(--d3v-text-muted);
    font-size: 13px;
}

.d3view-dashboard-v2 .ptf-dropdown-divider {
    height: 1px;
    background: var(--d3v-border);
    margin: 4px 0;
}

.d3view-dashboard-v2 .ptf-dropdown-item.ptf-dropdown-danger:hover {
    background: rgba(239,68,68,.06);
    color: var(--d3v-danger);
}

.d3view-dashboard-v2 .ptf-dropdown-item.ptf-dropdown-danger:hover .fa {
    color: var(--d3v-danger);
}

/* ============================================================
   Inline comment popover (chip + textarea, replaces modal)
   body > … = portaled to body so fixed + viewport coords match (GridStack transform)
   ============================================================ */
.d3view-dashboard-v2 .ptf-comment-popover,
body > .ptf-comment-popover {
    position: fixed;
    z-index: 1060;
    min-width: 288px;
    max-width: min(400px, calc(100vw - 24px));
    animation: ptf-comment-pop-in .14s ease-out;
}

@keyframes ptf-comment-pop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.d3view-dashboard-v2 .ptf-comment-popover-card,
body > .ptf-comment-popover .ptf-comment-popover-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-lg);
}

.d3view-dashboard-v2 .ptf-comment-popover-head,
body > .ptf-comment-popover .ptf-comment-popover-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.d3view-dashboard-v2 .ptf-comment-task-chip,
body > .ptf-comment-popover .ptf-comment-task-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--d3v-r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--d3v-text-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(129, 140, 248, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.d3view-dashboard-v2 .ptf-comment-task-chip > .fa,
body > .ptf-comment-popover .ptf-comment-task-chip > .fa {
    flex-shrink: 0;
    color: var(--d3v-accent);
    font-size: 13px;
}

.d3view-dashboard-v2 .ptf-comment-task-chip-text,
body > .ptf-comment-popover .ptf-comment-task-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-comment-textarea,
body > .ptf-comment-popover .ptf-comment-textarea {
    width: 100%;
    min-height: 96px;
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--d3v-text-primary);
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    resize: vertical;
    outline: none;
    transition: border-color var(--d3v-t-fast), box-shadow var(--d3v-t-fast);
}

.d3view-dashboard-v2 .ptf-comment-textarea::placeholder,
body > .ptf-comment-popover .ptf-comment-textarea::placeholder {
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ptf-comment-textarea:focus,
body > .ptf-comment-popover .ptf-comment-textarea:focus {
    border-color: var(--d3v-accent);
    background: var(--d3v-bg-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.d3view-dashboard-v2 .ptf-comment-popover-actions,
body > .ptf-comment-popover .ptf-comment-popover-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-dashboard-v2 .ptf-comment-popover-actions .btn-primary .fa,
body > .ptf-comment-popover .ptf-comment-popover-actions .btn-primary .fa {
    margin-right: 4px;
}

/* DVFIV-1961 - Attachment file chips */
.d3view-dashboard-v2 .ptf-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.d3view-dashboard-v2 .ptf-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-accent, #6366f1);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ptf-file-chip:hover {
    background: var(--d3v-bg-tertiary, #e2e8f0);
    border-color: var(--d3v-accent, #6366f1);
}

.d3view-dashboard-v2 .ptf-file-chip .fa {
    font-size: 10px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ptf-file-more {
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
}

.d3view-dashboard-v2 .db-date-range-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    white-space: nowrap;
}
.d3view-dashboard-v2 .db-date-range-btn .fa {
    font-size: 14px;
}
.d3view-dashboard-v2 .db-date-range-btn .db-date-range-text {
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}

/* ── Export Options Modal Body ────────────────────────────────────── */

.db-export-modal .db-export-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.db-export-modal .db-export-format-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    align-self: flex-start;
}

.db-export-modal .db-export-format-badge .fa {
    color: var(--d3v-accent, #3B82F6);
}

.db-export-modal .db-export-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.db-export-modal .db-export-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    margin: 0;
}

/* Added by shashank2104 on 2026-07-17 - R2026-47 - Per-widget preselect banner + Format/Theme selectors */
.db-export-modal .db-export-single-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-left: 3px solid var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-md, 8px);
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
}

.db-export-modal .db-export-single-banner .fa {
    color: var(--d3v-accent, #3B82F6);
}

.db-export-modal .db-export-single-banner strong {
    color: var(--d3v-text-primary, #1E293B);
    font-weight: 600;
}

/* All rules scoped inside .d3view-dashboard-v2 */

/* ── Study Summary: Layout ──────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-layout {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
}

.d3view-dashboard-v2 .ss-loading {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--d3v-text-muted); font-size: 20px;
}

.d3view-dashboard-v2 .ss-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; color: var(--d3v-text-muted); font-size: 13px; gap: 8px;
    text-align: center; padding: 24px;
}
.d3view-dashboard-v2 .ss-empty .fa {
    font-size: 24px; opacity: 0.4;
}

/* ── Solver Info Line ────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-solver-info {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 16px; flex-shrink: 0;
    font-size: 11px; color: var(--d3v-text-muted);
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-solver-info .fa {
    font-size: 10px; opacity: 0.6;
}
.d3view-dashboard-v2 .ss-solver-text {
    font-weight: 500;
}

/* ── Horizontal Stat Cards (mirror of ps-stat) ───────────────────────── */

.d3view-dashboard-v2 .ss-stats-strip {
    display: flex; gap: 8px; flex-shrink: 0;
    padding: 12px 16px; background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-stat {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; cursor: pointer;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xs);
    transition: all var(--d3v-t-fast);
    position: relative; overflow: hidden;
}
.d3view-dashboard-v2 .ss-stat:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--ss-accent);
    transform: translateY(-2px);
}
/* Bottom accent bar on hover */
.d3view-dashboard-v2 .ss-stat::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: transparent; transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-stat:hover::after { background: var(--ss-accent); }

.d3view-dashboard-v2 .ss-stat-icon {
    width: 34px; height: 34px; border-radius: var(--d3v-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    background: var(--ss-accent-bg); color: var(--ss-accent);
    transition: transform var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-stat:hover .ss-stat-icon { transform: scale(1.1); }
.d3view-dashboard-v2 .ss-stat-meta { flex-shrink: 0; }
.d3view-dashboard-v2 .ss-stat-val {
    font-size: 20px; font-weight: 800; line-height: 1;
    color: var(--d3v-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.d3view-dashboard-v2 .ss-stat-lbl {
    font-size: 10px; font-weight: 500; color: var(--d3v-text-muted); margin-top: 2px;
    white-space: nowrap;
}
/* Inline sparkline fills remaining card space */
.d3view-dashboard-v2 .ss-stat-sparkline {
    flex: 1; min-width: 0; height: 28px;
    display: flex; align-items: flex-end; gap: 2px;
}
.d3view-dashboard-v2 .ss-spark-bar {
    flex: 1; border-radius: 2px 2px 0 0; min-height: 0;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Spinner shown while loading */
.d3view-dashboard-v2 .ss-spark-loading {
    justify-content: center; align-items: center;
}
.d3view-dashboard-v2 .ss-spark-spinner {
    font-size: 11px; color: var(--d3v-text-muted); opacity: 0.5;
}
.d3view-dashboard-v2 .ss-stat-arrow {
    font-size: 14px; color: var(--d3v-text-muted);
    opacity: 0; transition: opacity var(--d3v-t-fast);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-stat:hover .ss-stat-arrow { opacity: 1; }

/* Non-clickable stat cards */
.d3view-dashboard-v2 .ss-stat-no-action {
    cursor: default;
}
.d3view-dashboard-v2 .ss-stat-no-action:hover {
    box-shadow: var(--d3v-sh-xs);
    border-color: var(--d3v-border);
    transform: none;
}
.d3view-dashboard-v2 .ss-stat-no-action::after { display: none; }
.d3view-dashboard-v2 .ss-stat-no-action:hover .ss-stat-icon { transform: none; }

/* Widget scroll-to highlight animation */
.d3view-dashboard-v2 .db-widget-highlight {
    animation: db-widget-pulse 1.5s ease-out;
}
@keyframes db-widget-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ── Three-column body (inside study-summary widget) ──────────────────── */
.d3view-dashboard-v2 .ss-three-col {
    display: flex; flex: 1; min-height: 0; overflow: hidden;
    border-top: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-panel {
    display: flex; flex-direction: column; overflow: hidden;
    border-right: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-panel:last-child { border-right: none; }
.d3view-dashboard-v2 .ss-donut-panel { flex: 0 0 240px; }
.d3view-dashboard-v2 .ss-about-panel { flex: 1.2; min-width: 0; }
.d3view-dashboard-v2 .ss-activity-panel { flex: 1; min-width: 0; }

.d3view-dashboard-v2 .ss-panel-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-bottom: 1px solid var(--d3v-border);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-panel-title {
    font-size: 11px; font-weight: 600; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-panel-badge {
    font-size: 9.5px; color: var(--d3v-text-muted); margin-left: auto;
}

/* Donut inside summary */
.d3view-dashboard-v2 .ss-donut-body {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px; gap: 10px; overflow-y: auto;
}
.d3view-dashboard-v2 .ss-donut-chart { flex-shrink: 0; }
.d3view-dashboard-v2 .ss-donut-legend {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
}
.d3view-dashboard-v2 .ss-donut-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ss-donut-dot {
    width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-donut-label { flex: 1; }
.d3view-dashboard-v2 .ss-donut-count { font-weight: 700; min-width: 16px; text-align: right; }
.d3view-dashboard-v2 .ss-donut-pct { font-size: 10px; color: var(--d3v-text-muted); min-width: 28px; text-align: right; }

/* About panel inside summary */
.d3view-dashboard-v2 .ss-about-body {
    flex: 1; overflow-y: auto; padding: 10px 14px;
}
.d3view-dashboard-v2 .ss-about-grid {
    display: flex; flex-direction: column; gap: 0;
}
.d3view-dashboard-v2 .ss-about-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: var(--d3v-r-sm);
    transition: background var(--d3v-t-fast);
    border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-about-row:last-child { border-bottom: none; }
.d3view-dashboard-v2 .ss-about-row:hover {
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-about-icon {
    width: 24px; height: 24px; border-radius: var(--d3v-r-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--d3v-text-muted); font-size: 11px;
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-about-label {
    width: 100px; flex-shrink: 0;
    font-size: 11px; font-weight: 600; color: var(--d3v-text-muted);
    white-space: nowrap;
}
.d3view-dashboard-v2 .ss-about-val {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 500; color: var(--d3v-text-primary);
    word-break: break-word; line-height: 1.4;
}

/* Activity feed inside summary */
.d3view-dashboard-v2 .ss-act-feed {
    flex: 1; overflow-y: auto; padding: 2px 0;
}
.d3view-dashboard-v2 .ss-feed-item {
    display: flex; gap: 8px; padding: 5px 12px;
    border-bottom: 1px solid var(--d3v-border);
    transition: background 0.15s ease;
}
.d3view-dashboard-v2 .ss-feed-item:hover { background: var(--d3v-bg-secondary); }
.d3view-dashboard-v2 .ss-feed-item:last-child { border-bottom: none; }
.d3view-dashboard-v2 .ss-feed-dot {
    width: 6px; height: 6px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-feed-content { flex: 1; min-width: 0; }
.d3view-dashboard-v2 .ss-feed-text {
    font-size: 11px; font-weight: 500; color: var(--d3v-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d3view-dashboard-v2 .ss-feed-time {
    font-size: 9px; color: var(--d3v-text-muted); margin-top: 1px;
}

/* Notes inside summary */
.d3view-dashboard-v2 .ss-notes-section {
    border-top: 1px solid var(--d3v-border); flex-shrink: 0;
    max-height: 120px; overflow-y: auto;
}
.d3view-dashboard-v2 .ss-notes-header {
    padding: 6px 12px; font-size: 10px; font-weight: 600;
    color: var(--d3v-text-muted); border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-notes-body { padding: 4px 10px; }
.d3view-dashboard-v2 .ss-note-card {
    padding: 5px 8px; background: var(--d3v-bg-secondary);
    border-radius: 4px; border-left: 3px solid var(--d3v-accent, #3B82F6);
    margin-bottom: 4px;
}
.d3view-dashboard-v2 .ss-note-text {
    font-size: 10.5px; color: var(--d3v-text-secondary); line-height: 1.3;
}
.d3view-dashboard-v2 .ss-note-meta {
    font-size: 9px; color: var(--d3v-text-muted); margin-top: 2px;
}

/* ── Targets Table ───────────────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-targets-layout {
    gap: 0;
}

.d3view-dashboard-v2 .ss-targets-progress {
    display: flex; height: 6px; flex-shrink: 0;
    overflow: hidden; border-radius: 0;
    background: var(--d3v-bg-tertiary);
}
.d3view-dashboard-v2 .ss-progress-seg {
    height: 100%;
    transition: width var(--d3v-t-base);
}

.d3view-dashboard-v2 .ss-targets-table-wrap {
    padding: 0;
}

.d3view-dashboard-v2 .ss-targets-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.d3view-dashboard-v2 .ss-targets-table thead th {
    padding: 8px 12px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--d3v-text-muted);
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
}
.d3view-dashboard-v2 .ss-targets-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border);
    color: var(--d3v-text-primary);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.d3view-dashboard-v2 .ss-targets-table tbody tr:hover {
    background: var(--d3v-bg-hover, rgba(0,0,0,.02));
}
.d3view-dashboard-v2 .ss-targets-table tbody tr:nth-child(even) {
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-targets-table tbody tr:nth-child(even):hover {
    background: var(--d3v-bg-hover, rgba(0,0,0,.03));
}

/* Target name link */
.d3view-dashboard-v2 .ss-target-name {
    color: var(--db-accent, #3B82F6);
    cursor: pointer; font-weight: 500;
    transition: color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-target-name:hover {
    color: var(--db-accent-strong, #2563EB);
    text-decoration: underline;
}

/* Type badges */
.d3view-dashboard-v2 .ss-type-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--d3v-r-full);
    letter-spacing: 0.02em;
}
.d3view-dashboard-v2 .ss-type-sim {
    color: #4338CA; background: rgba(99,102,241,.1);
}
.d3view-dashboard-v2 .ss-type-test {
    color: #9D174D; background: rgba(236,72,153,.1);
}

/* Status badges */
.d3view-dashboard-v2 .ss-status-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--d3v-r-full);
}
.d3view-dashboard-v2 .ss-status-finished {
    color: #065F46; background: #D1FAE5;
}
.d3view-dashboard-v2 .ss-status-running {
    color: #1E40AF; background: #DBEAFE;
}
.d3view-dashboard-v2 .ss-status-error {
    color: #991B1B; background: #FEE2E2;
}
.d3view-dashboard-v2 .ss-status-queued {
    color: #92400E; background: #FEF3C7;
}
.d3view-dashboard-v2 .ss-status-new {
    color: var(--d3v-text-secondary); background: var(--d3v-bg-tertiary);
}
.d3view-dashboard-v2 .ss-status-submitted {
    color: #1E40AF; background: #DBEAFE;
}

/* ── Activity Timeline ───────────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-activity-layout {
    gap: 0;
}

.d3view-dashboard-v2 .ss-activity-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-activity-title {
    font-size: 12px; font-weight: 600; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-activity-title .fa {
    margin-right: 4px; opacity: 0.6;
}
.d3view-dashboard-v2 .ss-activity-count {
    font-size: 10px; font-weight: 500; color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ss-timeline {
    padding: 12px 14px;
}

.d3view-dashboard-v2 .ss-timeline-item {
    display: flex; gap: 10px; padding-bottom: 14px;
    position: relative;
}
/* Vertical line connecting dots */
.d3view-dashboard-v2 .ss-timeline-item:not(:last-child)::before {
    content: ''; position: absolute;
    left: 5px; top: 14px; bottom: 0;
    width: 1px; background: var(--d3v-border);
}

.d3view-dashboard-v2 .ss-timeline-dot {
    width: 11px; height: 11px; border-radius: 50%;
    flex-shrink: 0; margin-top: 2px;
    border: 2px solid var(--d3v-bg-primary);
    box-shadow: 0 0 0 1px var(--d3v-border);
}

.d3view-dashboard-v2 .ss-timeline-content {
    flex: 1; min-width: 0;
}
.d3view-dashboard-v2 .ss-timeline-text {
    font-size: 12px; font-weight: 500; color: var(--d3v-text-primary);
    line-height: 1.4;
}
.d3view-dashboard-v2 .ss-timeline-time {
    font-size: 10px; color: var(--d3v-text-muted); margin-top: 2px;
}

/* Notes section */
.d3view-dashboard-v2 .ss-notes-section {
    border-top: 1px solid var(--d3v-border);
    flex-shrink: 0; max-height: 140px; overflow-y: auto;
}
.d3view-dashboard-v2 .ss-notes-header {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; font-size: 11px; font-weight: 600;
    color: var(--d3v-text-secondary); background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-notes-header .fa {
    opacity: 0.6;
}
.d3view-dashboard-v2 .ss-notes-body {
    padding: 8px 14px;
}
.d3view-dashboard-v2 .ss-note-card {
    padding: 8px 10px; margin-bottom: 6px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
}
.d3view-dashboard-v2 .ss-note-text {
    font-size: 11.5px; color: var(--d3v-text-primary); line-height: 1.4;
}
.d3view-dashboard-v2 .ss-note-meta {
    font-size: 10px; color: var(--d3v-text-muted); margin-top: 4px;
}

/* ── Widget Viz: Picker Grid + Active Chart ──────────────────────────────── */

.d3view-dashboard-v2 .ss-viz-layout {
    gap: 0;
}

.d3view-dashboard-v2 .ss-viz-picker-header {
    display: flex; align-items: center;
    padding: 10px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-viz-picker-title {
    font-size: 12px; font-weight: 600; color: var(--d3v-text-primary);
}

.d3view-dashboard-v2 .ss-viz-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px; padding: 12px 14px;
}

.d3view-dashboard-v2 .ss-viz-type-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 14px 8px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xs);
    cursor: pointer;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-viz-type-card:hover {
    border-color: var(--db-accent, #3B82F6);
    box-shadow: var(--d3v-sh-md);
    transform: translateY(-2px);
}
.d3view-dashboard-v2 .ss-viz-type-card .fa {
    font-size: 20px; color: var(--db-accent, #3B82F6); opacity: 0.7;
    transition: opacity var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-viz-type-card:hover .fa {
    opacity: 1;
}
.d3view-dashboard-v2 .ss-viz-type-label {
    font-size: 10.5px; font-weight: 500; color: var(--d3v-text-secondary);
    text-align: center; line-height: 1.2;
}

.d3view-dashboard-v2 .ss-viz-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-viz-chart-label {
    font-size: 12px; font-weight: 600; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-viz-chart-label .fa {
    margin-right: 4px; opacity: 0.6;
}
/** Added by shashank2104 on 2026-04-14 - Simlytiks per-viz image in picker + toolbar **/
.d3view-dashboard-v2 .ss-viz-chart-label {
    display: inline-flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .ss-viz-chart-label .ss-viz-chart-img {
    width: 18px; height: 18px; object-fit: contain; opacity: 0.85;
}
.d3view-dashboard-v2 .ss-viz-type-card .ss-viz-type-img {
    width: 36px; height: 36px; object-fit: contain;
    opacity: 0.85;
    transition: opacity var(--d3v-t-fast), transform var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-viz-type-card:hover .ss-viz-type-img {
    opacity: 1; transform: scale(1.04);
}

.d3view-dashboard-v2 .ss-viz-change-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 500;
    color: var(--db-accent, #3B82F6);
    background: none; border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-sm);
    padding: 4px 10px; cursor: pointer;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-viz-change-btn:hover {
    background: var(--db-accent-bg, rgba(59,130,246,.08));
    border-color: var(--db-accent, #3B82F6);
}

/** Added by shashank2104 on 2026-04-08 - SIM-997 - Empty picker state for simlytiks widget-viz **/
.d3view-dashboard-v2 .ss-viz-picker-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 24px; height: 100%; width: 100%;
    background: var(--d3v-bg-primary);
    border: 1px dashed var(--d3v-border);
    border-radius: var(--d3v-r-md);
    color: var(--d3v-text-secondary);
    text-align: center;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-viz-picker-empty:hover {
    border-color: var(--db-accent, #3B82F6);
    background: var(--db-accent-bg, rgba(59,130,246,.04));
}
.d3view-dashboard-v2 .ss-viz-picker-empty .ss-viz-picker-icon {
    font-size: 32px;
    color: var(--db-accent, #3B82F6);
    opacity: 0.7;
}
.d3view-dashboard-v2 .ss-viz-picker-empty .ss-viz-picker-title {
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-viz-picker-empty .ss-viz-picker-sub {
    font-size: 11px; color: var(--d3v-text-secondary);
    max-width: 320px; line-height: 1.4;
}
.d3view-dashboard-v2 .ss-viz-picker-empty .js-viz-open-picker {
    margin-top: 4px;
    display: inline-flex; align-items: center; gap: 6px;
}

.d3view-dashboard-v2 .ss-viz-container {
    position: relative; overflow: hidden;
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - two-choice empty-slot picker **/
/** Updated by shashank2104 on 2026-04-15 - DVFIV-1997 - Container-query-driven sizing
 * so the picker adapts to the host tile (2-col slots are spacious, 4-col/3-row slots
 * are tight). Three breakpoints: compact (< 520px wide), tiny (< 340px wide OR short),
 * full (default). **/
.d3view-dashboard-v2 .ss-viz-choice-wrap {
    padding: 14px;
    background: var(--d3v-bg-primary);
    border: 1px dashed var(--d3v-border);
    border-radius: var(--d3v-r-md);
    transition: border-color var(--d3v-t-fast), background var(--d3v-t-fast);
    container-type: inline-size;
    container-name: ss-viz-choice;
}
.d3view-dashboard-v2 .ss-viz-choice-wrap:hover {
    border-color: var(--db-accent, #3B82F6);
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1995 (followup) - Cancel footer for
 * freeform CTA-spawned widgets in their empty-picker state. Compact, low-emphasis. **/
.d3view-dashboard-v2 .ss-viz-choice-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px dashed var(--d3v-border, #e5e7eb);
}
.d3view-dashboard-v2 .ss-viz-choice-cancel {
    color: var(--d3v-text-muted, #6b7689);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: color var(--d3v-t-fast, 120ms) ease,
                background var(--d3v-t-fast, 120ms) ease;
}
.d3view-dashboard-v2 .ss-viz-choice-cancel:hover,
.d3view-dashboard-v2 .ss-viz-choice-cancel:focus {
    color: var(--d3v-status-danger, #dc2626);
    background: var(--d3v-status-danger-soft, rgba(220, 38, 38, 0.08));
    text-decoration: none;
}

.d3view-dashboard-v2 .ss-viz-choice-cards {
    display: grid;
    /* All cards (2 or 3) share the row equally. Container query below
     * collapses to icon-only row when the tile gets narrow / short. */
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 14px;
    align-content: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
}
.d3view-dashboard-v2 .ss-viz-choice-card {
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xs);
    cursor: pointer;
    text-align: center;
    transition: opacity var(--d3v-t-fast), transform var(--d3v-t-fast),
                box-shadow var(--d3v-t-fast), border-color var(--d3v-t-fast),
                background var(--d3v-t-fast);
    position: relative; overflow: hidden;
    min-height: 0; min-width: 0;
    outline: none;
    /* Faded by default; brighten when the parent widget card is hovered. */
    opacity: 0.45;
}
.d3view-dashboard-v2 .db-widget-card:hover .ss-viz-choice-card {
    opacity: 1;
}
.d3view-dashboard-v2 .ss-viz-choice-card:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: var(--d3v-sh-md);
    border-color: var(--db-accent, #3B82F6);
    background: var(--db-accent-bg, rgba(59,130,246,.04));
}
.d3view-dashboard-v2 .ss-viz-choice-card:focus-visible {
    border-color: var(--db-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.d3view-dashboard-v2 .ss-viz-choice-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--d3v-r-md);
    font-size: 18px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-viz-choice-card-icon--viz {
    background: rgba(59,130,246,.12);
    color: #2563EB;
}
.d3view-dashboard-v2 .ss-viz-choice-card-icon--widget {
    background: rgba(139,92,246,.12);
    color: #7C3AED;
}
.d3view-dashboard-v2 .ss-viz-choice-card-icon--ml {
    background: rgba(16,185,129,.14);
    color: #059669;
}
.d3view-dashboard-v2 .ss-viz-choice-card-title {
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Adaptive sizing.
 * Two modes:
 *   - Full (default): icon + title centered in each card.
 *   - Icon-only: shown when tile is narrow OR short — title hidden, cards
 *     collapse to compact icon buttons centered in a row.
 **/
@container ss-viz-choice (max-width: 420px) or (max-height: 160px) {
    .d3view-dashboard-v2 .ss-viz-choice-wrap {
        padding: 8px;
        justify-content: center;
        align-items: center;
    }
    .d3view-dashboard-v2 .ss-viz-choice-cards {
        grid-template-columns: repeat(3, max-content) !important;
        justify-content: center;
        gap: 10px !important;
        width: auto;
    }
    .d3view-dashboard-v2 .ss-viz-choice-card {
        padding: 0;
        gap: 0;
        width: 44px;
        height: 44px;
    }
    .d3view-dashboard-v2 .ss-viz-choice-card-icon {
        width: 32px; height: 32px; font-size: 14px;
    }
    .d3view-dashboard-v2 .ss-viz-choice-card-title {
        display: none;
    }
}

/* Ultra-tiny: shrink icons further for 4-col × 3-row grids. */
@container ss-viz-choice (max-width: 200px) or (max-height: 110px) {
    .d3view-dashboard-v2 .ss-viz-choice-wrap {
        padding: 4px;
    }
    .d3view-dashboard-v2 .ss-viz-choice-cards {
        gap: 6px !important;
    }
    .d3view-dashboard-v2 .ss-viz-choice-card {
        width: 32px; height: 32px;
        border-radius: var(--d3v-r-md);
    }
    .d3view-dashboard-v2 .ss-viz-choice-card-icon {
        width: 24px; height: 24px; font-size: 11px;
    }
}

/** DVFIV-1997 - Inline widget palette host inside an empty widget-viz tile **/
.d3view-dashboard-v2 .ss-viz-inline-palette-host {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    overflow: hidden;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary, var(--d3v-bg-primary));
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-bar-title {
    font-size: 12px; font-weight: 600;
    color: var(--d3v-text-primary);
    display: inline-flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-bar-title .fa {
    color: #7C3AED;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-back {
    display: inline-flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-body {
    position: relative; min-height: 0; overflow: hidden;
}

/** Neutralize the slide-in panel positioning when the palette is embedded
 *  inside an empty widget-viz slot. Instead of sliding in from the right,
 *  it fills its host container. **/
.d3view-dashboard-v2 .ss-viz-inline-palette-body .db-palette-panel--inline {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    transform: none !important;
    box-shadow: none;
    border-left: none;
    z-index: auto;
}
.d3view-dashboard-v2 .ss-viz-inline-palette-body .db-palette-panel--inline.is-open {
    transform: none !important;
}

/* ── Target Summary Cards (home page view mode) ────────────────────────── */

.d3view-dashboard-v2 .ss-targets-cards-layout {
    gap: 0;
}

.d3view-dashboard-v2 .ss-target-cards-grid {
    display: grid;
    /* min(100%, 200px) ensures the track never exceeds the container width
     * in narrow tiles (e.g. 4-col grids), preventing horizontal overflow. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 10px; padding: 12px 14px;
    align-content: start;
}

.d3view-dashboard-v2 .ss-target-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xs);
    cursor: pointer;
    transition: all var(--d3v-t-fast);
    position: relative; overflow: hidden;
}
.d3view-dashboard-v2 .ss-target-card:hover {
    box-shadow: var(--d3v-sh-md);
    border-color: var(--db-accent, #3B82F6);
    transform: translateY(-2px);
}
.d3view-dashboard-v2 .ss-target-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: transparent;
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-target-card:hover::after {
    background: var(--db-accent, #3B82F6);
}

.d3view-dashboard-v2 .ss-target-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
}

.d3view-dashboard-v2 .ss-target-card-name {
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}

.d3view-dashboard-v2 .ss-target-card-metrics {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ss-target-metric .fa {
    margin-right: 3px; font-size: 10px; opacity: 0.6;
}

.d3view-dashboard-v2 .ss-target-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; color: var(--d3v-text-muted);
    padding-top: 4px;
    border-top: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-target-solver {
    font-weight: 500;
}
.d3view-dashboard-v2 .ss-target-node .fa {
    margin-right: 2px; opacity: 0.5;
}

/* ── Status Donut Chart ────────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-donut-layout {
    gap: 0; align-items: center; justify-content: center;
    padding: 12px;
}

.d3view-dashboard-v2 .ss-donut-chart-wrap {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 140px;
}

.d3view-dashboard-v2 .ss-donut-svg {
    width: 100%; height: auto;
}
.d3view-dashboard-v2 .ss-donut-svg path {
    transition: opacity var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-donut-svg path:hover {
    opacity: 0.8;
}

.d3view-dashboard-v2 .ss-donut-count {
    font-size: 16px; font-weight: 800;
    fill: var(--d3v-text-primary);
    font-family: inherit;
}
.d3view-dashboard-v2 .ss-donut-label {
    font-size: 7px; font-weight: 500;
    fill: var(--d3v-text-muted);
    font-family: inherit;
}

.d3view-dashboard-v2 .ss-donut-legend {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; padding: 8px 4px 0;
}

.d3view-dashboard-v2 .ss-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: var(--d3v-r-sm);
    transition: background var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ss-legend-item:hover {
    background: var(--d3v-bg-secondary);
}

.d3view-dashboard-v2 .ss-legend-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-legend-text {
    flex: 1; font-weight: 500; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-legend-count {
    font-weight: 700; color: var(--d3v-text-primary);
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ss-legend-pct {
    font-size: 10px; color: var(--d3v-text-muted);
    min-width: 28px; text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── HPC Summary Table ─────────────────────────────────────────────────── */

.d3view-dashboard-v2 .ss-hpc-layout {
    gap: 0;
}

.d3view-dashboard-v2 .ss-hpc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--d3v-border);
}
.d3view-dashboard-v2 .ss-hpc-title {
    font-size: 12px; font-weight: 600; color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ss-hpc-title .fa {
    margin-right: 4px; opacity: 0.6;
}
.d3view-dashboard-v2 .ss-hpc-count {
    font-size: 10px; font-weight: 500; color: var(--d3v-text-muted);
}

.d3view-dashboard-v2 .ss-hpc-table-wrap {
    padding: 0;
}

.d3view-dashboard-v2 .ss-hpc-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}
.d3view-dashboard-v2 .ss-hpc-table thead th {
    padding: 8px 10px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--d3v-text-muted);
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border);
    position: sticky; top: 0; z-index: 1;
    white-space: nowrap;
}
.d3view-dashboard-v2 .ss-hpc-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--d3v-border);
    color: var(--d3v-text-primary);
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 160px;
}
.d3view-dashboard-v2 .ss-hpc-table tbody tr:hover {
    background: var(--d3v-bg-hover, rgba(0,0,0,.02));
}
.d3view-dashboard-v2 .ss-hpc-table tbody tr:nth-child(even) {
    background: var(--d3v-bg-secondary);
}
.d3view-dashboard-v2 .ss-hpc-table tbody tr:nth-child(even):hover {
    background: var(--d3v-bg-hover, rgba(0,0,0,.03));
}

.d3view-dashboard-v2 .ss-hpc-jobid {
    font-family: monospace; font-size: 11px;
    color: var(--d3v-text-secondary);
}

/* ── Mini targets table (home page) ───────────────────────────────────── */
.d3view-dashboard-v2 .ss-targets-mini {
    gap: 0;
}
.d3view-dashboard-v2 .ss-targets-table--mini thead th {
    padding: 6px 8px; font-size: 9px;
}
.d3view-dashboard-v2 .ss-targets-table--mini tbody td {
    padding: 5px 8px; font-size: 11px;
}
.d3view-dashboard-v2 .ss-targets-table--mini .ss-target-name {
    max-width: 140px; display: inline-block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    vertical-align: middle;
}
.d3view-dashboard-v2 .ss-targets-see-all {
    padding: 6px 12px;
    border-top: 1px solid var(--d3v-border);
    text-align: center; flex-shrink: 0;
}
.d3view-dashboard-v2 .ss-see-all-btn {
    font-size: 11px; font-weight: 600;
    color: var(--d3v-accent, #3B82F6);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color 0.15s ease;
}
.d3view-dashboard-v2 .ss-see-all-btn:hover {
    color: var(--d3v-accent-hover, #2563EB);
    text-decoration: underline;
}

/* ── All styles scoped under .d3view-dashboard-v2 ── */

/* Loading & empty states */
.d3view-dashboard-v2 .doe-loading,
.d3view-dashboard-v2 .doe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    min-height: 200px;
    color: var(--d3v-text-muted, #94A3B8);
    font-size: 13px;
}

.d3view-dashboard-v2 .doe-loading i,
.d3view-dashboard-v2 .doe-empty i {
    font-size: 28px;
    opacity: .5;
}

.d3view-dashboard-v2 .doe-empty span {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
    opacity: .7;
}

/* ── Widget layout ── */
.d3view-dashboard-v2 .doe-widget {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: 0;
}

/* ── Stat cards row ── */
.d3view-dashboard-v2 .doe-stats-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
}

.d3view-dashboard-v2 .doe-stats-compact {
    padding: 12px 20px;
    gap: 10px;
}

.d3view-dashboard-v2 .doe-stat-spacer {
    flex: 1;
}

.d3view-dashboard-v2 .doe-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--db-bg-primary, var(--d3v-bg-primary, #FFFFFF));
    border: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    border-radius: var(--d3v-r-md, 8px);
    min-width: 120px;
    transition: all var(--d3v-t-fast, .12s);
}

.d3view-dashboard-v2 .doe-stat-card:hover {
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08));
    border-color: var(--d3v-border-strong, #CBD5E1);
}

.d3view-dashboard-v2 .doe-stat-sm {
    padding: 8px 12px;
    min-width: 100px;
}

.d3view-dashboard-v2 .doe-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--d3v-r-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-stat-icon-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.d3view-dashboard-v2 .doe-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1E293B);
    line-height: 1.1;
}

.d3view-dashboard-v2 .doe-stat-sm .doe-stat-value {
    font-size: 16px;
}

.d3view-dashboard-v2 .doe-stat-file {
    font-size: 13px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

.d3view-dashboard-v2 .doe-stat-of {
    font-size: 12px;
    font-weight: 400;
    color: var(--d3v-text-muted, #94A3B8);
}

.d3view-dashboard-v2 .doe-stat-label {
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 2px;
}

/* ── Icon button (CSV export) ── */
.d3view-dashboard-v2 .doe-btn-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    background: transparent;
    color: var(--d3v-text-muted, #94A3B8);
    cursor: pointer;
    transition: all var(--d3v-t-fast, .12s);
    font-size: 13px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-btn-icon:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
    color: var(--d3v-text-primary, #1E293B);
    border-color: var(--d3v-border-strong, #CBD5E1);
}

/* ── Split layout (side-by-side) ── */
.d3view-dashboard-v2 .doe-split-layout {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.d3view-dashboard-v2 .doe-split-panel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.d3view-dashboard-v2 .doe-split-ranges {
    flex: 1 1 50%;
    border-right: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
}

.d3view-dashboard-v2 .doe-split-pc {
    flex: 1 1 50%;
}

.d3view-dashboard-v2 .doe-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    background: var(--d3v-bg-secondary, #F8FAFC);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-panel-header i {
    color: var(--d3v-accent, #3B82F6);
    font-size: 12px;
}

/* ── Range bars ── */
.d3view-dashboard-v2 .doe-range-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.d3view-dashboard-v2 .doe-range-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    transition: background var(--d3v-t-fast, .12s);
}

.d3view-dashboard-v2 .doe-range-card:last-child {
    border-bottom: none;
}

.d3view-dashboard-v2 .doe-range-card:hover {
    background: var(--d3v-bg-secondary, #F8FAFC);
}

.d3view-dashboard-v2 .doe-range-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.d3view-dashboard-v2 .doe-range-name-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .doe-range-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
}

.d3view-dashboard-v2 .doe-range-type-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--d3v-r-full, 9999px);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.d3view-dashboard-v2 .doe-type-continuous {
    background: rgba(16, 185, 129, .1);
    color: #10B981;
}

.d3view-dashboard-v2 .doe-type-discrete {
    background: rgba(245, 158, 11, .1);
    color: #F59E0B;
}

.d3view-dashboard-v2 .doe-range-file {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm, 4px);
}

/* Range track */
.d3view-dashboard-v2 .doe-range-track-wrap {
    padding: 2px 0;
}

.d3view-dashboard-v2 .doe-range-track {
    position: relative;
    height: 6px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-radius: 3px;
    margin: 10px 0 6px;
}

.d3view-dashboard-v2 .doe-range-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--d3v-accent, #3B82F6), #818CF8);
    opacity: .12;
}

.d3view-dashboard-v2 .doe-range-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    z-index: 2;
    cursor: pointer;
    transition: transform var(--d3v-t-fast, .12s);
}

.d3view-dashboard-v2 .doe-range-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    z-index: 3;
}

.d3view-dashboard-v2 .doe-range-dot-default {
    background: var(--d3v-n-900, #0F172A);
    border-color: #fff;
    z-index: 1;
    width: 12px;
    height: 12px;
}

.d3view-dashboard-v2 .doe-range-dot-sample {
    z-index: 2;
}

/* Range labels */
.d3view-dashboard-v2 .doe-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--d3v-text-muted, #94A3B8);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.d3view-dashboard-v2 .doe-range-step {
    opacity: .6;
}

.d3view-dashboard-v2 .doe-range-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
}

.d3view-dashboard-v2 .doe-range-legend > span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-dashboard-v2 .doe-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-legend-dot-default {
    background: var(--d3v-n-900, #0F172A);
}

/* ── Parallel Coordinates ── */
.d3view-dashboard-v2 .doe-pc-container {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .doe-pc-svg {
    width: 100%;
    flex: 1;
    min-height: 180px;
}

.d3view-dashboard-v2 .doe-pc-line {
    cursor: pointer;
    transition: opacity var(--d3v-t-fast, .12s), stroke-width var(--d3v-t-fast, .12s);
}

.d3view-dashboard-v2 .doe-pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
}

.d3view-dashboard-v2 .doe-pc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.d3view-dashboard-v2 .doe-pc-legend-name {
    color: var(--d3v-text-secondary, #475569);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .doe-pc-legend-status {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--d3v-r-full, 9999px);
    text-transform: capitalize;
}

/* ── Status badges ── */
.d3view-dashboard-v2 .doe-status-finished  { background: rgba(16, 185, 129, .1); color: #10B981; }
.d3view-dashboard-v2 .doe-status-running   { background: rgba(59, 130, 246, .1); color: #3B82F6; }
.d3view-dashboard-v2 .doe-status-error     { background: rgba(239, 68, 68, .1);  color: #EF4444; }
.d3view-dashboard-v2 .doe-status-queued    { background: rgba(245, 158, 11, .1); color: #F59E0B; }
.d3view-dashboard-v2 .doe-status-new       { background: rgba(148, 163, 184, .1); color: #94A3B8; }
.d3view-dashboard-v2 .doe-status-submitted { background: rgba(99, 102, 241, .1);  color: #6366F1; }

.d3view-dashboard-v2 .doe-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

/* ── Table view ── */
.d3view-dashboard-v2 .doe-table-wrap {
    padding: 0 20px;
    overflow-x: auto;
    flex: 1;
}

.d3view-dashboard-v2 .doe-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
}

.d3view-dashboard-v2 .doe-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    white-space: nowrap;
}

.d3view-dashboard-v2 .doe-th-param-name {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.d3view-dashboard-v2 .doe-th-param-meta {
    font-size: 10px;
    font-weight: 400;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 2px;
}

.d3view-dashboard-v2 .doe-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    vertical-align: middle;
}

.d3view-dashboard-v2 .doe-table tbody tr:last-child td {
    border-bottom: none;
}

.d3view-dashboard-v2 .doe-table tbody tr:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
}

.d3view-dashboard-v2 .doe-td-target {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.d3view-dashboard-v2 .doe-target-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-target-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1E293B);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .doe-td-value {
    min-width: 100px;
}

.d3view-dashboard-v2 .doe-param-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1E293B);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.d3view-dashboard-v2 .doe-param-na {
    color: var(--d3v-text-muted, #94A3B8);
}

/* Mini bar in table cells */
.d3view-dashboard-v2 .doe-mini-bar {
    height: 3px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.d3view-dashboard-v2 .doe-mini-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--d3v-accent, #3B82F6), #818CF8);
    border-radius: 2px;
    transition: width .4s ease;
}

/* Table footer */
.d3view-dashboard-v2 .doe-table-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    border-top: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    flex-wrap: wrap;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .doe-table-footer-label {
    font-weight: 500;
}

.d3view-dashboard-v2 .doe-default-chip {
    padding: 2px 8px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-radius: var(--d3v-r-sm, 4px);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

.d3view-dashboard-v2 .doe-default-chip strong {
    color: var(--d3v-text-primary, #1E293B);
}

/* ── Tooltip ── */
.d3view-dashboard-v2 .doe-tooltip {
    position: absolute;
    background: var(--d3v-n-900, #0F172A);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,.15));
}

/* ── Responsive: stack on narrow ── */
@media (max-width: 900px) {
    .d3view-dashboard-v2 .doe-split-layout {
        flex-direction: column;
    }
    .d3view-dashboard-v2 .doe-split-ranges {
        border-right: none;
        border-bottom: 1px solid var(--db-border, var(--d3v-border, #E2E8F0));
    }
}

/* ── Dark theme overrides ── */
.d3view-dashboard-v2.db-theme-dark .doe-range-file {
    background: rgba(255, 255, 255, .06);
    color: var(--d3v-text-muted);
}

.d3view-dashboard-v2.db-theme-dark .doe-default-chip {
    background: rgba(255, 255, 255, .06);
}

.d3view-dashboard-v2.db-theme-dark .doe-panel-header {
    background: rgba(255, 255, 255, .03);
}

/* ── KPI Cards ── */
.d3view-dashboard-v2 .ml-inv-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px;
    height: 100%;
}

.d3view-dashboard-v2 .ml-inv-kpi-card {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-inv-kpi-card:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}

.d3view-dashboard-v2 .ml-inv-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-inv-kpi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.d3view-dashboard-v2 .ml-inv-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-inv-kpi-value {
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.d3view-dashboard-v2 .ml-inv-kpi-context {
    font-size: 10px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-weight: 500;
}

.d3view-dashboard-v2 .ml-inv-kpi-grade {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 9px;
    font-weight: 700;
    margin-top: 2px;
}

/* ── Widget card internals ── */
.d3view-dashboard-v2 .ml-inv-canvas-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-canvas-wrap canvas {
    width: 100%;
    height: 100%;
}

/* Axis labels */
.d3view-dashboard-v2 .ml-inv-axl {
    position: absolute;
    font-size: 8px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.3px;
    pointer-events: none;
    font-weight: 600;
}

.d3view-dashboard-v2 .ml-inv-axl.x {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.d3view-dashboard-v2 .ml-inv-axl.y {
    top: 50%;
    left: 2px;
    transform: translateY(-50%) rotate(-90deg);
}

/* Highlight dot for cross-highlighting */
.d3view-dashboard-v2 .ml-inv-hl-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--db-accent, var(--d3v-accent));
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    display: none;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
}

/* Tooltip */
.d3view-dashboard-v2 .ml-inv-tip {
    position: absolute;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border-strong, var(--d3v-border-strong));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    padding: 8px 10px;
    font-size: 10px;
    box-shadow: var(--db-shadow-lg, var(--d3v-sh-lg));
    pointer-events: none;
    z-index: 10;
    display: none;
    min-width: 140px;
}

.d3view-dashboard-v2 .ml-inv-tip .ml-inv-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

.d3view-dashboard-v2 .ml-inv-tip .ml-inv-tip-key {
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-weight: 500;
}

.d3view-dashboard-v2 .ml-inv-tip .ml-inv-tip-val {
    color: var(--db-text-primary, var(--d3v-text-primary));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Tables ── */
.d3view-dashboard-v2 .ml-inv-tbl {
    width: 100%;
    border-collapse: collapse;
}

.d3view-dashboard-v2 .ml-inv-tbl th {
    text-align: left;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    padding: 8px 10px;
    border-bottom: 2px solid var(--db-border, var(--d3v-border));
    font-weight: 700;
    position: sticky;
    top: 0;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    z-index: 1;
}

.d3view-dashboard-v2 .ml-inv-tbl td {
    padding: 7px 10px;
    font-size: 11px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    font-variant-numeric: tabular-nums;
}

.d3view-dashboard-v2 .ml-inv-tbl tr:hover td {
    background: var(--db-bg-hover, var(--d3v-bg-hover));
}

/* Grade badges */
.d3view-dashboard-v2 .ml-inv-grade {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 9px;
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-inv-grade.good {
    background: var(--d3v-status-success-bg, #D1FAE5);
    color: var(--d3v-status-success-text, #065F46);
}

.d3view-dashboard-v2 .ml-inv-grade.ok {
    background: var(--d3v-status-warning-bg, #FEF3C7);
    color: var(--d3v-status-warning-text, #92400E);
}

.d3view-dashboard-v2 .ml-inv-grade.bad {
    background: var(--d3v-status-danger-bg, #FEE2E2);
    color: var(--d3v-status-danger-text, #991B1B);
}

/* Model color dot for multi-model comparison */
.d3view-dashboard-v2 .ml-inv-model-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--d3v-r-full, 9999px);
    margin-right: 6px;
    vertical-align: middle;
}

/* ── Worst predictions rows ── */
.d3view-dashboard-v2 .ml-inv-worst-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-inv-worst-row:hover {
    background: var(--db-bg-hover, var(--d3v-bg-hover));
}

.d3view-dashboard-v2 .ml-inv-worst-rank {
    width: 24px;
    height: 24px;
    border-radius: var(--d3v-r-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-inv-worst-vals {
    flex: 1;
    display: flex;
    gap: 12px;
    font-size: 10px;
}

.d3view-dashboard-v2 .ml-inv-worst-vals span {
    color: var(--db-text-muted, var(--d3v-text-muted));
}

.d3view-dashboard-v2 .ml-inv-worst-vals strong {
    color: var(--db-text-primary, var(--d3v-text-primary));
}

.d3view-dashboard-v2 .ml-inv-worst-resid {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Coefficient bars ── */
.d3view-dashboard-v2 .ml-inv-coeff-wrap {
    padding: 12px;
    overflow-y: auto;
    height: 100%;
}

.d3view-dashboard-v2 .ml-inv-coeff-target-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--db-text-primary, var(--d3v-text-primary));
    padding: 4px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .ml-inv-coeff-target-header .fa {
    color: var(--db-accent, var(--d3v-accent));
    font-size: 10px;
}

.d3view-dashboard-v2 .ml-inv-coeff-divider {
    height: 1px;
    background: var(--db-border, var(--d3v-border));
    margin: 12px 0;
}

.d3view-dashboard-v2 .ml-inv-coeff-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    transition: background var(--d3v-t-fast, 0.12s);
    padding: 2px 4px;
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
}

.d3view-dashboard-v2 .ml-inv-coeff-row:hover {
    background: var(--db-bg-hover, var(--d3v-bg-hover));
}

.d3view-dashboard-v2 .ml-inv-coeff-row.intercept {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--db-border, var(--d3v-border));
}

.d3view-dashboard-v2 .ml-inv-coeff-name {
    width: 80px;
    min-width: 80px;
    text-align: right;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.d3view-dashboard-v2 .ml-inv-coeff-row.intercept .ml-inv-coeff-name {
    font-style: italic;
    color: var(--d3v-accent, #6366f1);
}

.d3view-dashboard-v2 .ml-inv-coeff-track {
    flex: 1;
    height: 16px;
    background: var(--db-bg-tertiary, var(--d3v-bg-tertiary));
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
    position: relative;
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-coeff-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--db-border-strong, var(--d3v-border-strong));
    opacity: 0.5;
}

.d3view-dashboard-v2 .ml-inv-coeff-fill {
    position: absolute;
    top: 2px;
    height: calc(100% - 4px);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.d3view-dashboard-v2 .ml-inv-coeff-fill.pos {
    background: linear-gradient(90deg, var(--db-accent, var(--d3v-accent)), #818cf8);
    left: 50%;
}

.d3view-dashboard-v2 .ml-inv-coeff-fill.neg {
    background: linear-gradient(270deg, var(--d3v-danger, #EF4444), #f87171);
    right: 50%;
}

.d3view-dashboard-v2 .ml-inv-coeff-val {
    width: 70px;
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 11px;
}

.d3view-dashboard-v2 .ml-inv-coeff-val.text-pos {
    color: var(--db-accent, var(--d3v-accent));
}

.d3view-dashboard-v2 .ml-inv-coeff-val.text-neg {
    color: var(--d3v-danger, #EF4444);
}

/* ── Rank badges ── */
.d3view-dashboard-v2 .ml-inv-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--d3v-r-full, 9999px);
    font-size: 9px;
    font-weight: 800;
}

.d3view-dashboard-v2 .ml-inv-rank.r1 {
    background: var(--d3v-status-success-bg, #D1FAE5);
    color: var(--d3v-status-success-text, #065F46);
}

.d3view-dashboard-v2 .ml-inv-rank.r2 {
    background: var(--d3v-status-info-bg, #CFFAFE);
    color: var(--d3v-status-info-text, #0E7490);
}

.d3view-dashboard-v2 .ml-inv-rank.r3 {
    background: var(--d3v-status-warning-bg, #FEF3C7);
    color: var(--d3v-status-warning-text, #92400E);
}

/* ── Sensitivity bars (sidebar + importance widget) ── */
.d3view-dashboard-v2 .ml-inv-sens-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.d3view-dashboard-v2 .ml-inv-sens-name {
    width: 65px;
    font-size: 9px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.d3view-dashboard-v2 .ml-inv-sens-track {
    flex: 1;
    height: 8px;
    background: var(--db-bg-tertiary, var(--d3v-bg-tertiary));
    border-radius: var(--d3v-r-full, 9999px);
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-sens-fill {
    height: 100%;
    border-radius: var(--d3v-r-full, 9999px);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.d3view-dashboard-v2 .ml-inv-sens-pct {
    width: 32px;
    font-size: 9px;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    font-weight: 700;
    text-align: right;
}

/* ── Correlation matrix ── */
/* DW-2908: root flex column so the curve toggle bar sits above the canvas */
.d3view-dashboard-v2 .ml-inv-corr-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
/* Updated by shashank2104 on 2026-07-31 - R2026-96 - This element carries BOTH .ml-inv-pdp-viz and
   .ml-inv-corr-wrap. The shared .ml-inv-pdp-viz rule further down sets `overflow: hidden` at the same
   specificity and later in the cascade, so the `overflow: auto` written here never actually applied and an
   oversized matrix was silently clipped instead of scrolled. Doubling the class wins that tie.

   Centring moved off the flex container and onto the canvas's own auto margins: a centred flex item that
   overflows its container gets cut off at BOTH ends and the overflowing top/left can never be scrolled to,
   which would have hidden the very tick labels this ticket is about. `margin: auto` centres while it fits
   and degrades to a normal scrollable overflow when it does not. */
.d3view-dashboard-v2 .ml-inv-corr-wrap.ml-inv-corr-wrap {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.d3view-dashboard-v2 .ml-inv-corr-wrap canvas {
    cursor: crosshair;
    margin: auto;
}

/* DW-2908: curve-points toggle bar above the correlation matrix */
.d3view-dashboard-v2 .ml-inv-corr-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-inv-corr-toggle-help {
    font-size: 11px;
    color: var(--d3v-text-secondary, #64748b);
    line-height: 1.4;
}

.d3view-dashboard-v2 .ml-inv-corr-toggle-help b {
    color: var(--d3v-text-primary, #334155);
    font-weight: 600;
}

/* DW-2908: shared opt-in checkbox styling (corr matrix + PDP sidebar) */
.d3view-dashboard-v2 .ml-inv-ctrl-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #334155);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.d3view-dashboard-v2 .ml-inv-ctrl-check input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.d3view-dashboard-v2 .ml-inv-ctrl-check span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .ml-inv-ctrl-check i.fa {
    color: var(--d3v-accent, #6366f1);
}

/* DW-2908: PDP sidebar curve-toggle section */
.d3view-dashboard-v2 .ml-inv-curve-toggle {
    border-top: 1px dashed var(--d3v-border-subtle, #e2e8f0);
    padding: 10px;
    margin-top: 6px;
}

.d3view-dashboard-v2 .ml-inv-curve-toggle .ml-inv-ctrl-help {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #64748b);
}

.d3view-dashboard-v2 .ml-inv-curve-toggle .ml-inv-ctrl-help b {
    color: var(--d3v-text-primary, #334155);
    font-weight: 600;
}

/* ── Mini distribution bars (schema) ── */
.d3view-dashboard-v2 .ml-inv-mini-box {
    height: 14px;
    background: var(--db-bg-tertiary, var(--d3v-bg-tertiary));
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 70px;
    vertical-align: middle;
}

.d3view-dashboard-v2 .ml-inv-mini-box .bfill {
    position: absolute;
    height: 100%;
    background: var(--db-accent, var(--d3v-accent));
    opacity: 0.15;
    border-radius: 3px;
}

.d3view-dashboard-v2 .ml-inv-mini-box .bmed {
    position: absolute;
    height: 100%;
    width: 2px;
    background: var(--db-accent, var(--d3v-accent));
    top: 0;
}

/* ── Feature distributions mini histograms ── */
.d3view-dashboard-v2 .ml-inv-dist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    align-content: start;
}
.d3view-dashboard-v2 .ml-inv-dist-card {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border-radius: var(--d3v-r-md, 8px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 120px;
}
.d3view-dashboard-v2 .ml-inv-dist-card-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--d3v-text-muted, #94a3b8);
    padding: 8px 10px 4px;
}
.d3view-dashboard-v2 .ml-inv-dist-card-body {
    flex: 1;
    position: relative;
    min-height: 80px;
}
.d3view-dashboard-v2 .ml-inv-dist-card-body canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Dataset split ── */
.d3view-dashboard-v2 .ml-inv-ds-split {
    display: flex;
    gap: 12px;
    height: 100%;
    padding: 0 12px 12px;
}

.d3view-dashboard-v2 .ml-inv-ds-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-ds-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--db-bg-tertiary, var(--d3v-bg-tertiary));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg)) var(--db-radius-lg, var(--d3v-r-lg)) 0 0;
    font-size: 11px;
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-inv-ds-header .ml-inv-ds-cnt {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-full, 9999px);
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-inv-ds-body {
    flex: 1;
    overflow: auto;
}

/* ── Column stat cards ── */
.d3view-dashboard-v2 .ml-inv-stat-card {
    padding: 8px 12px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
}

.d3view-dashboard-v2 .ml-inv-stat-card:hover {
    background: var(--db-bg-hover, var(--d3v-bg-hover));
}

.d3view-dashboard-v2 .ml-inv-stat-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--db-text-primary, var(--d3v-text-primary));
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ml-inv-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    margin-bottom: 1px;
}

.d3view-dashboard-v2 .ml-inv-stat-row span:first-child {
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-weight: 500;
}

.d3view-dashboard-v2 .ml-inv-stat-row span:last-child {
    color: var(--db-text-primary, var(--d3v-text-primary));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Detail panel ── */
.d3view-dashboard-v2 .ml-inv-detail-panel {
    height: 0;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border-top: 1px solid var(--db-border, var(--d3v-border));
    overflow: hidden;
    transition: height 0.3s ease;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-inv-detail-panel.open {
    height: 120px;
}

.d3view-dashboard-v2 .ml-inv-detail-inner {
    padding: 10px 14px;
    display: flex;
    gap: 14px;
    height: 100%;
}

.d3view-dashboard-v2 .ml-inv-detail-section {
    flex: 1;
    overflow-y: auto;
}

.d3view-dashboard-v2 .ml-inv-detail-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-weight: 700;
    margin-bottom: 4px;
}

/* ── Empty/placeholder state ── */
.d3view-dashboard-v2 .ml-inv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 8px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-size: 12px;
}

.d3view-dashboard-v2 .ml-inv-empty i {
    font-size: 24px;
    opacity: 0.4;
}

/* ── Hint overlay ── */
.d3view-dashboard-v2 .ml-inv-hint {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 7px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    display: flex;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    font-weight: 500;
    opacity: 0.6;
}

/* ── DVFIV-2010 — Target carousel picker ── */
/* Scoped polish for #plugin-generic-carousel-tpl when used for target navigation */
.d3view-dashboard-v2 .ml-inv-target-carousel {
    height: 100%;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-inner {
    height: 100%;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .item {
    height: 100%;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .viz-containers {
    height: 100%;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-control {
    background: var(--d3v-bg-primary, #fff) !important;
    background-image: none !important;
    border: 1px solid var(--d3v-border, rgba(0,0,0,0.08));
    border-radius: 50%;
    width: 34px !important;
    height: 34px;
    top: 50%;
    bottom: auto;
    margin-top: -17px;
    opacity: 0.9;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.1));
    transition: var(--d3v-t-fast, all 0.15s ease);
    color: var(--d3v-text-primary, #333) !important;
    text-shadow: none;
    z-index: 3;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-control.left {
    left: 6px;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-control.right {
    right: 6px;
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-control:hover {
    opacity: 1;
    box-shadow: var(--d3v-sh-md, 0 2px 6px rgba(0,0,0,0.15));
    transform: scale(1.05);
}
.d3view-dashboard-v2 .ml-inv-target-carousel .carousel-control .glyphicon {
    font-size: 14px;
    margin: 0;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.d3view-dashboard-v2 .ml-inv-target-carousel .ml-inv-viz-wrap {
    padding: 0 44px;
}
.d3view-dashboard-v2 .ml-inv-target-slide {
    height: 100%;
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Model Comparison Widgets
   ══════════════════════════════════════════════════════════════ */

/** Removed by shashank2104 on 2026-04-16 - DVFIV-2000 - ml-inv-cmp-header / ml-inv-cmp-subtitle
 *  styles removed; ranking table renders directly with no chrome. **/

/* ── Ranking table row click ── */
.d3view-dashboard-v2 .ml-inv-tbl tr[data-algo] {
    cursor: pointer;
    transition: opacity .15s ease;
}

.d3view-dashboard-v2 .ml-inv-tbl tr[data-algo].deselected {
    opacity: 0.45;
}

/* ── Rank badges ── */
.d3view-dashboard-v2 .ml-inv-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-inv-rank.r1 {
    background: rgba(245,158,11,.15);
    color: #d97706;
}

.d3view-dashboard-v2 .ml-inv-rank.r2 {
    background: rgba(148,163,184,.15);
    color: #64748b;
}

.d3view-dashboard-v2 .ml-inv-rank.r3 {
    background: rgba(234,88,12,.15);
    color: #ea580c;
}

/* ── R² metric bar ── */
.d3view-dashboard-v2 .ml-inv-metric-bar-bg {
    height: 6px;
    border-radius: 3px;
    background: var(--db-bg-surface, var(--d3v-bg-tertiary, #f1f5f9));
    overflow: hidden;
    min-width: 80px;
}

.d3view-dashboard-v2 .ml-inv-metric-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

/* ── Color dot for model legend ── */
.d3view-dashboard-v2 .ml-inv-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Compare DataTable wrapper ── */
.d3view-dashboard-v2 .ml-inv-cmp-dt-container {
    padding: 0 8px 8px;
}

.d3view-dashboard-v2 .ml-inv-cmp-dt-container .d3-data-table th {
    font-size: 11px;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ml-inv-cmp-dt-container .d3-data-table td {
    padding: 6px 12px;
    vertical-align: middle;
}

.d3view-dashboard-v2 .ml-inv-cmp-dt-container .d3-data-table tr:hover {
    background: var(--db-bg-hover, var(--d3v-bg-secondary, rgba(0,0,0,.02)));
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Flatten the TableDataViewer frame inside
 *  the ranking widget so the table blends with the widget body (no outer rectangular border). */
.d3view-dashboard-v2 .ml-inv-cmp-dt-container .table-view,
.d3view-dashboard-v2 .ml-inv-cmp-dt-container .virtual-table,
.d3view-dashboard-v2 .ml-inv-cmp-dt-container .virtual-table-renderer {
    border: none !important;
    background: transparent;
    box-shadow: none;
}
.d3view-dashboard-v2 .ml-inv-cmp-dt-container .virtual-table-cell {
    border-right: none !important;
}

/* ── Bar Chart View ── */
/** Updated by shashank2104 on 2026-04-12 - DVFIV-1992 - bar-chart view now hosts one Viz.vBarChart
 *  per metric card (was: custom HTML bars). Radar view now hosts one Viz.radarChart. **/
.d3view-dashboard-v2 .ml-inv-chart-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
    height: 100%;
}

.d3view-dashboard-v2 .ml-inv-chart-card {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    min-height: 0;
}

.d3view-dashboard-v2 .ml-inv-chart-card:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
}

.d3view-dashboard-v2 .ml-inv-chart-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--db-text-primary, var(--d3v-text-primary));
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    flex: 0 0 auto;
}

.d3view-dashboard-v2 .ml-inv-chart-canvas {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
}

/* ── Radar View ── */
.d3view-dashboard-v2 .ml-inv-radar-host {
    padding: 12px 16px;
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Quick Predict Widget
   ══════════════════════════════════════════════════════════════ */

/** Predict Classic widget needs body-content to be a flex column so full-h propagates */
.d3view-dashboard-v2 .db-widget-type-ml-predict-classic .db-widget-body-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.d3view-dashboard-v2 .ml-inv-predict-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.d3view-dashboard-v2 .ml-inv-predict-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-inv-predict-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--db-text-primary, var(--d3v-text-primary));
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-dashboard-v2 .ml-inv-predict-title .fa {
    color: var(--d3v-info, #06B6D4);
}

.d3view-dashboard-v2 .ml-inv-predict-mode-btn {
    padding: 4px 10px;
    border-radius: var(--db-radius-full, var(--d3v-r-full, 9999px));
    border: 1px solid var(--db-border, var(--d3v-border));
    background: transparent;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}

.d3view-dashboard-v2 .ml-inv-predict-mode-btn:hover {
    border-color: var(--db-border-strong, var(--d3v-border-strong));
    color: var(--db-text-primary, var(--d3v-text-primary));
    background: var(--db-bg-surface, var(--d3v-bg-secondary));
}

.d3view-dashboard-v2 .ml-inv-classic-container {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.d3view-dashboard-v2 .ml-inv-qp-card {
    max-width: 480px;
    margin: 24px auto;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-xl, var(--d3v-r-xl, 16px));
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}

.d3view-dashboard-v2 .ml-inv-qp-sub {
    font-size: 12px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    text-align: center;
}

.d3view-dashboard-v2 .ml-inv-qp-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-dashboard-v2 .ml-inv-qp-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
}

.d3view-dashboard-v2 .ml-inv-qp-input {
    width: 100%;
    height: 36px;
    background: var(--db-bg-input, var(--d3v-bg-secondary, #f8fafc));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md, 8px));
    color: var(--db-text-primary, var(--d3v-text-primary));
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    padding: 0 12px;
    outline: none;
    transition: all .2s ease;
}

.d3view-dashboard-v2 .ml-inv-qp-input:focus {
    border-color: var(--db-accent, var(--d3v-accent));
    box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}

.d3view-dashboard-v2 .ml-inv-qp-btn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: var(--db-radius-lg, var(--d3v-r-lg, 12px));
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 12px rgba(6,182,212,.2);
    font-family: inherit;
}

.d3view-dashboard-v2 .ml-inv-qp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(6,182,212,.3);
}

.d3view-dashboard-v2 .ml-inv-qp-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.d3view-dashboard-v2 .ml-inv-qp-result {
    background: rgba(8,145,178,.08);
    border: 1px solid rgba(8,145,178,.2);
    border-radius: var(--db-radius-lg, var(--d3v-r-lg, 12px));
    padding: 16px;
    text-align: center;
}

.d3view-dashboard-v2 .ml-inv-qp-result-label {
    font-size: 11px;
    color: var(--db-text-muted, var(--d3v-text-muted));
    text-transform: uppercase;
    letter-spacing: .8px;
}

.d3view-dashboard-v2 .ml-inv-qp-result-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1E293B);
    line-height: 1.4;
}

/* ── Quick-predict multi-model results table ── */
.d3view-dashboard-v2 .ml-inv-qp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
    text-align: left;
    font-size: 13px;
}
.d3view-dashboard-v2 .ml-inv-qp-table thead th {
    background: var(--d3v-bg-tertiary, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
}
.d3view-dashboard-v2 .ml-inv-qp-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-border, #E2E8F0);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: var(--d3v-text-primary, #1E293B);
}
.d3view-dashboard-v2 .ml-inv-qp-table tbody tr:last-child td {
    border-bottom: none;
}
.d3view-dashboard-v2 .ml-inv-qp-table tbody tr:nth-child(even) td {
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.d3view-dashboard-v2 .ml-inv-qp-table tbody tr:hover td {
    background: var(--d3v-bg-hover, #E2E8F0);
    transition: var(--d3v-t-fast, all .12s ease);
}
.d3view-dashboard-v2 .ml-inv-qp-table-model {
    font-family: inherit;
    font-weight: 600;
    color: var(--d3v-accent, #3B82F6);
}

/* ── Partial Dependence Widget ── */
.d3view-dashboard-v2 .ml-inv-pdp-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/* DW-2904 - Left control sidebar (mirrors WidgetML3DSurfaceView for consistency) */
.d3view-dashboard-v2 .ml-inv-pdp-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: 100%;
    min-height: 0;
}
.d3view-dashboard-v2 .ml-inv-pdp-sidebar {
    position: relative;
    /* R2026-38 - shared ML control-sidebar width (was a local 240px). */
    flex: 0 0 var(--db-ml-sidebar-w, 260px);
    width: var(--db-ml-sidebar-w, 260px);
    min-width: var(--db-ml-sidebar-w, 260px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .08));
    background: var(--d3v-bg-primary, #fff);
    transition: flex-basis 220ms cubic-bezier(.4, 0, .2, 1),
                width       220ms cubic-bezier(.4, 0, .2, 1),
                min-width   220ms cubic-bezier(.4, 0, .2, 1);
    min-height: 0;
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-inv-pdp-sidebar.ml-inv-pdp-sidebar--rail {
    flex: 0 0 var(--db-ml-sidebar-rail-w, 28px);
    width: var(--db-ml-sidebar-rail-w, 28px);
    min-width: var(--db-ml-sidebar-rail-w, 28px);
    background: var(--d3v-bg-subtle, #f8fafc);
}
.d3view-dashboard-v2 .ml-inv-pdp-sidebar-toggle {
    position: absolute;
    top: 8px;
    right: -10px;
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .12));
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #475569);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    transition: background 160ms, color 160ms, transform 160ms;
}
.d3view-dashboard-v2 .ml-inv-pdp-sidebar--rail .ml-inv-pdp-sidebar-toggle {
    right: 4px;
}
.d3view-dashboard-v2 .ml-inv-pdp-sidebar-toggle:hover {
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    border-color: var(--d3v-accent, #3b82f6);
    transform: scale(1.1);
}
.d3view-dashboard-v2 .ml-inv-pdp-viz {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
}

/* ── 3D Surface Widget ── */
.d3view-dashboard-v2 .ml-inv-3d-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.d3view-dashboard-v2 .ml-inv-3d-canvas {
    flex: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    cursor: grab;
}
.d3view-dashboard-v2 .ml-inv-3d-canvas:active { cursor: grabbing; }
.d3view-dashboard-v2 .ml-inv-surface-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-top: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-inv-surface-controls label {
    display: flex!important;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}
.d3view-dashboard-v2 .ml-inv-surface-controls label i {
    font-size: 10px;
    opacity: 0.7;
}
.d3view-dashboard-v2 .ml-inv-surface-controls input[type="range"] {
    width: 80px;
    height: 3px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--d3v-border-medium, rgba(0,0,0,.14));
    border-radius: 99px;
    outline: none;
    cursor: pointer;
}
.d3view-dashboard-v2 .ml-inv-surface-controls input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--d3v-accent-indigo, #6366f1);
    cursor: pointer;
}
.d3view-dashboard-v2 .ml-inv-surface-controls input[type="checkbox"] {
    margin-left: 4px;
    cursor: pointer;
    accent-color: var(--d3v-accent-indigo, #6366f1);
}
.d3view-dashboard-v2 .ml-inv-surface-controls .ml-inv-surface-val {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    color: var(--d3v-accent-blue, #3b82f6);
    font-weight: 600;
    font-size: 10px;
    min-width: 30px;
}

/* ── 3D Surface Subtitle (Inputs → Target) ── */
.d3view-dashboard-v2 .ml-inv-3d-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    background: var(--d3v-bg-secondary, #f8fafc);
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-inv-3d-subtitle strong {
    color: var(--d3v-text-primary, #1a1a2e);
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
}
.d3view-dashboard-v2 .ml-inv-3d-subtitle-label {
    color: var(--d3v-text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-inv-3d-subtitle-sep {
    color: var(--d3v-accent-blue, #3b82f6);
    font-weight: 700;
    margin: 0 4px;
}

/** Added by shashank2104 on 04/10/2026 - DVFIV-1992 - Curve point selector in 3D surface subtitle **/
.d3view-dashboard-v2 .ml-inv-3d-curve-select {
    padding: 3px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a1a2e);
    background: var(--d3v-bg-primary, #fff);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .12s ease);
    max-width: 200px;
}
.d3view-dashboard-v2 .ml-inv-3d-curve-select:focus {
    border-color: var(--d3v-accent-blue, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    outline: none;
}

/* ── 3D Surface Loading Spinner ── */
.d3view-dashboard-v2 .ml-inv-3d-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--d3v-bg-primary, #fff);
    z-index: 5;
    color: var(--d3v-text-secondary, #475569);
    font-size: 13px;
    font-weight: 500;
}
.d3view-dashboard-v2 .ml-inv-3d-loading .fa-spinner {
    font-size: 22px;
    color: var(--d3v-accent-blue, #3b82f6);
}

/* ── Config Sidebar (matches V3 sketch: .db-config-sidebar) ── */
.ml-inv-config-sidebar {
    width: 320px;
    min-width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    background: var(--d3v-bg-primary, #fff);
    overflow: hidden;
}
@media (max-width: 1400px) {
    .ml-inv-config-sidebar { width: 280px; min-width: 280px; }
}
.ml-inv-config-sidebar .ml-inv-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    font-size: 12px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1a1a2e);
}
.ml-inv-config-sidebar .ml-inv-config-title {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}
.ml-inv-config-sidebar .ml-inv-config-header i {
    color: var(--d3v-accent-indigo, #6366f1);
    margin-right: 6px;
}
.ml-inv-config-sidebar .ml-inv-sidebar-slide-track {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.ml-inv-config-sidebar .ml-inv-config-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ml-inv-config-sidebar .ml-inv-ctrl-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ml-inv-config-sidebar .ml-inv-ctrl-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--d3v-text-muted, #94a3b8);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
}
.ml-inv-config-sidebar .ml-inv-ctrl-section-header i {
    font-size: 9px;
    opacity: .6;
}
.ml-inv-config-sidebar .ml-inv-ctrl-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ml-inv-config-sidebar .ml-inv-ctrl-label {
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ml-inv-config-sidebar .ml-inv-ctrl-val {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--d3v-accent-blue, #3b82f6);
    font-weight: 600;
}
.ml-inv-config-sidebar .ml-inv-ctrl-select {
    width: 100%;
    height: 32px;
    padding: 0 28px 0 10px;
    background: var(--d3v-bg-input, #f4f5f7);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-primary, #1a1a2e);
    font-size: 12px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: var(--d3v-t-base, all .2s ease);
    outline: none;
}
.ml-inv-config-sidebar .ml-inv-ctrl-select:focus {
    border-color: var(--d3v-accent-indigo, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}
.ml-inv-config-sidebar .ml-inv-ctrl-select option {
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1a1a2e);
}
.ml-inv-config-sidebar .ml-inv-ctrl-slider {
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--d3v-border-medium, rgba(0,0,0,.14));
    border-radius: 99px;
    outline: none;
    cursor: pointer;
}
.ml-inv-config-sidebar .ml-inv-ctrl-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--d3v-accent-blue, #3b82f6);
    box-shadow: 0 0 6px rgba(59,130,246,.4);
    cursor: pointer;
}
.ml-inv-config-sidebar .ml-inv-ctrl-toggle-group {
    display: flex;
    gap: 2px;
    background: var(--d3v-bg-input, #f4f5f7);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    border-radius: var(--d3v-r-md, 8px);
    padding: 2px;
}
.ml-inv-config-sidebar .ml-inv-ctrl-toggle-opt {
    flex: 1;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--d3v-t-fast, all .12s ease);
    text-align: center;
}
.ml-inv-config-sidebar .ml-inv-ctrl-toggle-opt.active {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.06));
}
.ml-inv-config-sidebar .ml-inv-ctrl-toggle-opt:not(.active):hover {
    background: var(--d3v-bg-input-focus, #eef0f4);
    color: var(--d3v-text-primary, #1a1a2e);
}
.ml-inv-config-sidebar .ml-inv-config-footer {
    flex-shrink: 0;
    padding: 14px;
    border-top: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
}
.ml-inv-config-sidebar .ml-inv-sidebar-pin-btn {
    flex-shrink: 0;
}
.ml-inv-config-sidebar .ml-inv-run-btn {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: var(--d3v-r-lg, 12px);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--d3v-t-smooth, all .3s cubic-bezier(.4,0,.2,1));
    box-shadow: 0 0 16px rgba(59,130,246,.2), 0 4px 16px rgba(59,130,246,.2);
    position: relative;
    overflow: hidden;
}
.ml-inv-config-sidebar .ml-inv-run-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
    border-radius: inherit;
}
.ml-inv-config-sidebar .ml-inv-run-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(99,102,241,.3), 0 8px 24px rgba(99,102,241,.3);
}
.ml-inv-config-sidebar .ml-inv-run-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/** Added by shashank2104 on 2026-07-15 - R2026-38 - The unified shell (dashboard + config sidebar) moved
 *  from an inline-styled string in MLModelView to #sl-ml-dashboard-shell-tpl; its layout lives here now. **/
.ml-dashboard-outer {
    display: flex;
    flex-direction: row;
    min-height: 0;
}
.ml-dashboard-outer .ml-dashboard-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/** Added by shashank2104 on 04/03/2026 at 01:47 PM - DW-2776 - Collapsible ML config sidebar (slides toward the right) **/
/** Updated by shashank2104 on 04/03/2026 at 01:54 PM - DW-2776 - Shell wraps sidebar only; slide track + pin live inside .ml-inv-config-sidebar **/
.ml-dashboard-outer .ml-inv-sidebar-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    flex-shrink: 0;
    width: 340px;
    min-width: 340px;
    max-width: 340px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--d3v-bg-primary, #fff);
    border-left: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ml-dashboard-outer .ml-inv-sidebar-shell > .ml-inv-config-sidebar {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    min-width: 0;
    border-left: none;
}
.ml-dashboard-outer .ml-inv-sidebar-shell.is-collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    border-left: none;
    overflow: hidden;
}
.ml-dashboard-outer .ml-inv-sidebar-shell.is-collapsed .ml-inv-config-title {
    display: none;
}
.ml-dashboard-outer .ml-inv-sidebar-shell.is-collapsed .ml-inv-sidebar-tabs {
    display: none;
}
.ml-dashboard-outer .ml-inv-sidebar-shell.is-collapsed .ml-inv-config-header {
    display: none;
}
.ml-dashboard-outer .ml-inv-sidebar-shell:not(.is-collapsed) .ml-inv-sidebar-slide-track {
    transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ml-dashboard-outer .ml-inv-sidebar-shell.is-collapsed .ml-inv-sidebar-slide-track {
    display: none;
}
@media (max-width: 1400px) {
    .ml-dashboard-outer .ml-inv-sidebar-shell {
        width: 300px;
        min-width: 300px;
        max-width: 300px;
    }
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Sidebar Tabs (Configuration | Models)
   ══════════════════════════════════════════════════════════════ */
.ml-inv-config-sidebar .ml-inv-sidebar-tabs {
    display: flex;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.ml-inv-config-sidebar .ml-inv-sidebar-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-muted, #94a3b8);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--d3v-t-fast, 0.12s ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ml-inv-config-sidebar .ml-inv-sidebar-tab-btn:hover {
    color: var(--d3v-text-secondary, #475569);
    background: var(--d3v-bg-hover, #e2e8f0);
}
.ml-inv-config-sidebar .ml-inv-sidebar-tab-btn.active {
    color: var(--d3v-accent, #3b82f6);
    border-bottom-color: var(--d3v-accent, #3b82f6);
    font-weight: 600;
}
.ml-inv-config-sidebar .ml-inv-sidebar-tab-btn i {
    margin-right: 4px;
}

/* Tab panes */
.ml-inv-config-sidebar .ml-inv-tab-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Models tab ── */
.ml-inv-config-sidebar .ml-inv-models-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ml-inv-config-sidebar .ml-inv-models-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: var(--d3v-text-muted, #94a3b8);
    text-align: center;
}
.ml-inv-config-sidebar .ml-inv-models-empty i {
    font-size: 28px;
    opacity: 0.5;
}
.ml-inv-config-sidebar .ml-inv-models-empty-hint {
    font-size: 11px;
    max-width: 200px;
    line-height: 1.4;
}

/* Model card */
.ml-inv-config-sidebar .ml-inv-model-card {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    padding: 10px 12px;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.ml-inv-config-sidebar .ml-inv-model-card:hover {
    border-color: var(--d3v-border-strong, #cbd5e1);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08));
    transform: translateY(-1px);
}
.ml-inv-config-sidebar .ml-inv-model-card.is-active {
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59,130,246,.15), var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08));
}
.ml-inv-config-sidebar .ml-inv-model-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.ml-inv-config-sidebar .ml-inv-model-card-algo {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ml-inv-config-sidebar .ml-inv-model-card-metrics {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
}
.ml-inv-config-sidebar .ml-inv-model-card-metrics b {
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}
.ml-inv-config-sidebar .ml-inv-model-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
}
.ml-inv-config-sidebar .ml-inv-model-card-tag {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 10px;
    font-weight: 500;
}
.ml-inv-config-sidebar .ml-inv-model-card-time {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ml-inv-config-sidebar .ml-inv-model-card-active-badge {
    margin-left: auto;
    color: var(--d3v-accent, #3b82f6);
    font-weight: 600;
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Models-first sidebar refinements
   (card hover actions, compare checkbox, config pane header)
   ══════════════════════════════════════════════════════════════ */

/** Header title + add button row */
.ml-inv-config-sidebar .ml-inv-config-header {
    justify-content: space-between;
}
.ml-inv-config-sidebar .ml-inv-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    letter-spacing: 0.2px;
}
.ml-inv-config-sidebar .ml-inv-sidebar-title i {
    color: var(--d3v-accent, #3b82f6);
}
.ml-inv-config-sidebar .ml-inv-sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ml-inv-config-sidebar .ml-inv-add-btn {
    padding: 3px 8px;
    border-radius: var(--d3v-r-sm, 4px);
}

/** Models pane fills remaining height and scrolls */
.ml-inv-config-sidebar .ml-inv-models-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/** Config pane slides in when training/editing */
.ml-inv-config-sidebar .ml-inv-config-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ml-inv-config-sidebar .ml-inv-config-subheader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
}
.ml-inv-config-sidebar .ml-inv-config-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ml-inv-config-sidebar .js-ml-back-to-list {
    padding: 3px 10px;
    font-size: 11px;
}

/** Card: make it a positioning context for the hover action bar */
.ml-inv-config-sidebar .ml-inv-model-card {
    position: relative;
}

/** Excluded (compare checkbox unchecked) */
.ml-inv-config-sidebar .ml-inv-model-card.is-excluded {
    opacity: 0.55;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.ml-inv-config-sidebar .ml-inv-model-card.is-excluded .ml-inv-model-card-metrics {
    filter: grayscale(0.6);
}

/** Added by shashank2104 on 2026-04-09 - DW-2829 - selectable + floating-actions-bar
 *  Replaces per-card checkbox. Selection is decoupled from include/exclude state:
 *  ui-selected = currently selected for batch action; is-excluded = excluded from compare. */
.ml-inv-config-sidebar .ml-inv-models-pane { position: relative; }

/** Status dot — green = included in comparison, gray = excluded */
.ml-inv-config-sidebar .ml-inv-model-card-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d3v-text-muted, #cbd5e1);
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
    transition: var(--d3v-t-fast, 0.12s ease);
}
.ml-inv-config-sidebar .ml-inv-model-card-status-dot.is-on {
    background: var(--d3v-success, #10b981);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}

.ml-inv-config-sidebar .ml-inv-model-card.ui-selected {
    border-color: var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08));
}
.ml-inv-config-sidebar .ml-inv-model-card.ui-selected.is-excluded {
    background: rgba(148, 163, 184, 0.10);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25), var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08));
}

.ml-inv-config-sidebar .ml-inv-fab {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    max-width: calc(100% - 16px);
    overflow-x: auto;
}
.ml-inv-config-sidebar .ml-inv-fab .ml-inv-fab-count {
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
    padding-right: 4px;
    border-right: 1px solid var(--d3v-border, #e2e8f0);
    margin-right: 2px;
}
.ml-inv-config-sidebar .ml-inv-fab .ml-inv-fab-count strong {
    color: var(--d3v-accent, #3b82f6);
    font-weight: 700;
}
.ml-inv-config-sidebar .ml-inv-fab .btn {
    font-size: 11px;
    padding: 3px 8px;
}
.ml-inv-config-sidebar .ml-inv-fab .btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

/** Hover action bar (edit / remove) — revealed on card hover */
.ml-inv-config-sidebar .ml-inv-model-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-2px);
    transition: var(--d3v-t-fast, 0.12s ease);
    pointer-events: none;
    z-index: 2;
}
.ml-inv-config-sidebar .ml-inv-model-card:hover .ml-inv-model-card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.ml-inv-config-sidebar .ml-inv-card-action-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
    padding: 0;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s ease);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,.06));
}
.ml-inv-config-sidebar .ml-inv-card-action-btn:hover {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
    color: #fff;
}
.ml-inv-config-sidebar .ml-inv-card-action-btn.js-ml-remove-model:hover {
    background: var(--d3v-status-danger, #ef4444);
    border-color: var(--d3v-status-danger, #ef4444);
}

/** Compare tag gets accent color */
.ml-inv-config-sidebar .ml-inv-model-card-tag-compare {
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Training Overlay (shown on all ML widgets)
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .ml-inv-training-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: inherit;
    pointer-events: none;
}
.d3view-dashboard-v2 .ml-inv-training-bar {
    width: 60%;
    max-width: 200px;
    height: 4px;
    border-radius: var(--d3v-r-full, 9999px);
    background: var(--d3v-bg-tertiary, #f1f5f9);
    overflow: hidden;
    position: relative;
}
.d3view-dashboard-v2 .ml-inv-training-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--d3v-accent, #3b82f6), #7c3aed);
    animation: ml-inv-training-slide 1.2s ease-in-out infinite;
}
@keyframes ml-inv-training-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}
.d3view-dashboard-v2 .ml-inv-training-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-dashboard-v2 .ml-inv-training-label i {
    margin-right: 4px;
    color: var(--d3v-accent, #3b82f6);
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 — Compare Ranking Expansion Rows
   ══════════════════════════════════════════════════════════════ */
.d3view-dashboard-v2 .ml-inv-tbl .js-ml-expand-row {
    cursor: pointer;
    text-align: center;
    padding: 6px 4px;
}
.d3view-dashboard-v2 .ml-inv-tbl .js-ml-expand-row:hover i {
    color: var(--d3v-accent, #3b82f6) !important;
}

.d3view-dashboard-v2 .ml-inv-expand-row td {
    padding: 0;
    border-top: none;
}
.d3view-dashboard-v2 .ml-inv-expand-content {
    padding: 8px 12px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.d3view-dashboard-v2 .ml-inv-param-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 3px 8px;
    font-size: 11px;
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 500;
}
.d3view-dashboard-v2 .ml-inv-param-chip-key {
    font-weight: 400;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Feature vs Target Carousel Controls ── */
.d3view-dashboard-v2 .ml-inv-carousel-controls {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    border-radius: var(--d3v-r-md, 6px);
    padding: 2px 8px;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.06));
}
.d3view-dashboard-v2 .ml-inv-carousel-controls .btn {
    padding: 2px 6px;
    font-size: 11px;
    border: none;
    background: transparent;
    color: var(--d3v-text-secondary, #64748b);
    cursor: pointer;
    border-radius: var(--d3v-r-sm, 4px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-inv-carousel-controls .btn:hover {
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .ml-inv-carousel-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    white-space: nowrap;
    user-select: none;
}
.d3view-dashboard-v2 .ml-inv-carousel-dots {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}
.d3view-dashboard-v2 .ml-inv-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--d3v-border, #cbd5e1);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-inv-carousel-dot:hover {
    background: var(--d3v-text-muted, #94a3b8);
}
.d3view-dashboard-v2 .ml-inv-carousel-dot.active {
    background: var(--d3v-accent, #6366f1);
    transform: scale(1.3);
}

/* ══════════════════════════════════════════════════════════════
   DW-2776 Revamp — Multi-model overlay, sparklines, model selector, worker view
   Added by shashank2104 on 2026-04-06
   ══════════════════════════════════════════════════════════════ */

/* ── KPI Sparklines ── */
.d3view-dashboard-v2 .ml-inv-kpi-val-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-dashboard-v2 .ml-inv-kpi-sparkline {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ── Model Selector (Prediction page) ── */
.d3view-dashboard-v2 .ml-inv-model-selector-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 0 16px;
}
.d3view-dashboard-v2 .ml-inv-model-selector-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    white-space: nowrap;
}
.d3view-dashboard-v2 .ml-inv-model-selector {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #1e293b);
    font-size: 12px;
    min-width: 180px;
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-inv-model-selector:focus {
    outline: none;
    border-color: var(--d3v-accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* ── Sidebar Worker View (ConfigureWfWorker) ── */
.d3view-dashboard-v2 .ml-inv-worker-view {
    padding: 4px 0;
}
.d3view-dashboard-v2 .ml-inv-worker-view .wf-input-row,
.d3view-dashboard-v2 .ml-inv-worker-view .form-group {
    margin-bottom: 8px;
    padding: 0 12px;
}
.d3view-dashboard-v2 .ml-inv-worker-view .wf-input-row label,
.d3view-dashboard-v2 .ml-inv-worker-view .form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    margin-bottom: 4px;
}
.d3view-dashboard-v2 .ml-inv-hidden-input {
    display: none !important;
}

/* ── Worker-config loading state (R2026-38) — centered spinner + message shown while
      _loadAndRenderWorker fetches remote lookups + the ml_learn_auto worker definition,
      so the Add-Model / Train panel is never a blank white box. Mirrors .ml-inv-3d-loading. ── */
.d3view-dashboard-v2 .ml-inv-worker-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 220px;
    padding: 32px 16px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
.d3view-dashboard-v2 .ml-inv-worker-loading .fa-spinner {
    font-size: 22px;
    color: var(--d3v-accent-blue, #3b82f6);
}

/* ── Predict header flex ── */
.d3view-dashboard-v2 .ml-inv-predict-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── 3D Surface legend overlay ── */
.d3view-dashboard-v2 .ml-3d-surface-legend {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: var(--db-bg-primary, var(--d3v-bg-primary, #fff));
    border: 1px solid var(--db-border-subtle, var(--d3v-border-subtle, rgba(0,0,0,.08)));
    border-radius: var(--db-radius-md, var(--d3v-r-md, 8px));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.08)));
    z-index: 10;
    pointer-events: none;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/** Added by shashank2104 on 2026-07-07 - CS-544 - legend entries are clickable to
 *  show/hide their surface. Re-enable pointer events (the legend container is
 *  pointer-events:none so it never blocks the 3D canvas) and give click affordance.
 *  Hidden state dims the item and strikes the label. **/
.d3view-dashboard-v2 .ml-3d-surface-legend-item {
    cursor: pointer;
    pointer-events: auto;
    border-radius: var(--db-radius-sm, var(--d3v-r-sm, 4px));
    padding: 2px 4px;
    margin: -2px -4px;
    transition: opacity var(--d3v-t-fast, .15s) ease, background var(--d3v-t-fast, .15s) ease;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-item:hover {
    background: var(--db-bg-hover, var(--d3v-bg-hover, rgba(0,0,0,.04)));
}

.d3view-dashboard-v2 .ml-3d-surface-legend-item.is-hidden {
    opacity: .4;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-item.is-hidden .ml-3d-surface-legend-label {
    text-decoration: line-through;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.85;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--db-text-secondary, var(--d3v-text-secondary, #475569));
    white-space: nowrap;
}

/** Added by shashank2104 on 04/06/2026 - DW-2776 - 3D surface header + accuracy legend **/
.d3view-dashboard-v2 .ml-3d-surface-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    padding: 0 12px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-3d-surface-acc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--db-text-secondary, var(--d3v-text-secondary, #475569));
    cursor: pointer;
    margin: 0;
    user-select: none;
    transition: color var(--d3v-t-fast, 0.12s);
}

.d3view-dashboard-v2 .ml-3d-surface-acc-label:hover {
    color: var(--db-text-primary, var(--d3v-text-primary, #1e293b));
}

.d3view-dashboard-v2 .ml-3d-surface-acc-label input[type="checkbox"] {
    margin: 0;
    accent-color: var(--d3v-accent, #3b82f6);
}

.d3view-dashboard-v2 .ml-3d-surface-legend--accuracy {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .ml-3d-accuracy-gradient {
    width: 80px;
    height: 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: linear-gradient(to right, #22c55e, #eab308, #ef4444);
}

/** Added by shashank2104 on 04/06/2026 - DW-2776 - Model wireframe legend shown alongside accuracy gradient **/
.d3view-dashboard-v2 .ml-3d-surface-legend--models {
    top: 42px;
}

.d3view-dashboard-v2 .ml-3d-surface-legend-wire {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 2px solid;
    background: transparent;
    opacity: 0.85;
}

/** Added by shashank2104 on 04/07/2026 - DW-2776 - Accuracy/surfaces/raw-data toggle buttons in widget header **/
.d3view-dashboard-v2 .db-widget-ml-accuracy-btn.active,
.d3view-dashboard-v2 .db-widget-ml-3d-surfaces-btn.active,
.d3view-dashboard-v2 .db-widget-ml-3d-rawdata-btn.active {
    background: var(--d3v-accent, #3b82f6);
    color: var(--d3v-text-inverse, #fff);
    border-color: var(--d3v-accent, #3b82f6);
}

/* ══════════════════════════════════════════════════════════════
   DW-XXXX — Model Summary widget (single-model)
   Added by shashank2104 on 07/01/2026
   Stat cards + config chips + resizable Independents/Targets panels
   ══════════════════════════════════════════════════════════════ */

.d3view-dashboard-v2 .ml-mls-wrap {
    gap: 10px;
    padding: 10px 12px 12px;
    min-height: 0;
}

/* ── Stat cards ── */
.d3view-dashboard-v2 .ml-mls-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.d3view-dashboard-v2 .ml-mls-kpi-card {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    /* border: 1px solid var(--db-border, var(--d3v-border)); */
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    /* box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm)); */
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    min-width: 0;
}

.d3view-dashboard-v2 .ml-mls-kpi-card:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}

.d3view-dashboard-v2 .ml-mls-kpi-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 auto;
}

.d3view-dashboard-v2 .ml-mls-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.d3view-dashboard-v2 .ml-mls-kpi-label {
    /* font-size: 10px; */
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--db-text-muted, var(--d3v-text-tertiary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .ml-mls-kpi-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--db-text, var(--d3v-text-primary));
}

.d3view-dashboard-v2 .ml-mls-kpi-sub {
    font-size: 10px;
    color: var(--db-text-muted, var(--d3v-text-tertiary));
    white-space: nowrap;
}

/* ── Training-config chips ── */
.d3view-dashboard-v2 .ml-mls-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.d3view-dashboard-v2 .ml-mls-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    /* Borderless — tinted fill alone separates the chip (presentable pass) */
    border-radius: 999px;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    font-size: 11px;
    line-height: 1.5;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-chip:hover {
    background: var(--db-bg-hover, var(--d3v-bg-hover));
}

.d3view-dashboard-v2 .ml-mls-chip-label {
    color: var(--db-text-muted, var(--d3v-text-tertiary));
    text-transform: capitalize;
}

.d3view-dashboard-v2 .ml-mls-chip-value {
    color: var(--db-text, var(--d3v-text-primary));
    font-weight: 600;
}

/* ── Dataset panels + resizer ── */
.d3view-dashboard-v2 .ml-mls-panels {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}

.d3view-dashboard-v2 .ml-mls-panels.is-resizing {
    cursor: col-resize;
    user-select: none;
}

.d3view-dashboard-v2 .ml-mls-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    /* Flat, borderless card — no outline and no shadow (presentable pass) */
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-mls-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    flex: 0 0 auto;
}

.d3view-dashboard-v2 .ml-mls-panel-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text, var(--d3v-text-primary));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ml-mls-panel-title .fa {
    color: var(--db-text-muted, var(--d3v-text-tertiary));
}

.d3view-dashboard-v2 .ml-mls-count {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--db-brand-bg, rgba(59,130,246,.12));
    color: var(--db-brand, var(--d3v-accent));
}

.d3view-dashboard-v2 .ml-mls-head-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.d3view-dashboard-v2 .ml-mls-heat-lbl {
    font-size: 10px;
    font-weight: 400;
    color: var(--db-text-muted, var(--d3v-text-tertiary));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.d3view-dashboard-v2 .ml-mls-heat-input {
    width: 52px;
    height: 22px;
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    color: var(--db-text, var(--d3v-text-primary));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-heat-input:focus {
    outline: none;
    border-color: var(--db-brand, var(--d3v-accent));
    box-shadow: 0 0 0 2px var(--db-brand-bg, rgba(59,130,246,.15));
}

/* Segmented control — subtle track holds borderless pills (presentable pass) */
.d3view-dashboard-v2 .ml-mls-viewtype.btn-group,
.d3view-dashboard-v2 .ml-mls-cmp-toolbar.btn-group {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
}

.d3view-dashboard-v2 .ml-mls-viewtype .btn,
.d3view-dashboard-v2 .ml-mls-cmp-toolbar .btn {
    font-size: 11px;
    padding: 2px 9px;
    background: transparent;
    border: none;
    border-radius: var(--db-radius-sm, var(--d3v-r-sm)) !important;
    color: var(--db-text-muted, var(--d3v-text-secondary));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-viewtype .btn:hover,
.d3view-dashboard-v2 .ml-mls-cmp-toolbar .btn:hover {
    color: var(--db-text, var(--d3v-text-primary));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
}

.d3view-dashboard-v2 .ml-mls-viewtype .btn.active,
.d3view-dashboard-v2 .ml-mls-cmp-toolbar .btn.active {
    background: var(--db-brand, var(--d3v-accent));
    color: var(--d3v-text-inverse, #fff);
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}

.d3view-dashboard-v2 .ml-mls-panel-body {
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.d3view-dashboard-v2 .ml-mls-viz {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 6px;
}

/* Borderless TableDataViewer toolbar (pagination + eye/download/…) inside the
   summary panels — transparent border keeps geometry, fill appears on hover
   (presentable pass). Scoped to .ml-mls-viz so other TDV instances are untouched. */
.d3view-dashboard-v2 .ml-mls-viz .table-viewer-header .btn {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.d3view-dashboard-v2 .ml-mls-viz .table-viewer-header .btn:hover {
    border-color: transparent;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
}

.d3view-dashboard-v2 .ml-mls-resizer {
    flex: 0 0 10px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d3view-dashboard-v2 .ml-mls-resizer-grip {
    width: 3px;
    height: 44px;
    border-radius: 3px;
    background: var(--db-border, var(--d3v-border));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-resizer:hover .ml-mls-resizer-grip,
.d3view-dashboard-v2 .ml-mls-panels.is-resizing .ml-mls-resizer-grip {
    background: var(--db-brand, var(--d3v-accent));
    height: 64px;
}

/* ── Compare-delegation shell ── */
.d3view-dashboard-v2 .ml-mls-cmp-wrap {
    min-height: 0;
    gap: 6px;
    padding: 8px 12px 12px;
}

.d3view-dashboard-v2 .ml-mls-cmp-toolbar {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.d3view-dashboard-v2 .ml-mls-cmp-host {
    overflow: auto;
}

/* Values toggle switch in the heatmap controls (prettified checkbox) */
.d3view-dashboard-v2 .ml-mls-switch-lbl {
    cursor: pointer;
    user-select: none;
}

.d3view-dashboard-v2 .ml-mls-switch-lbl input.js-mls-show-values {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.d3view-dashboard-v2 .ml-mls-switch {
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: var(--db-border-strong, var(--d3v-border-strong));
    display: inline-flex;
    align-items: center;
    padding: 2px;
    flex: 0 0 auto;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-switch-lbl:hover .ml-mls-switch {
    box-shadow: 0 0 0 2px var(--db-brand-bg, rgba(59,130,246,.15));
}

.d3view-dashboard-v2 .ml-mls-switch-knob {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--d3v-text-inverse, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-mls-switch-lbl input:checked + .ml-mls-switch {
    background: var(--db-brand, var(--d3v-accent));
}

.d3view-dashboard-v2 .ml-mls-switch-lbl input:checked + .ml-mls-switch .ml-mls-switch-knob {
    transform: translateX(11px);
}

/* Kill Bootstrap's embossed white text-shadow on the panel controls + prevent wrap */
.d3view-dashboard-v2 .ml-mls-viewtype .btn,
.d3view-dashboard-v2 .ml-mls-cmp-toolbar .btn {
    text-shadow: none;
    background-image: none;
    white-space: nowrap;
}

.d3view-dashboard-v2 .ml-mls-head-controls {
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.d3view-dashboard-v2 .ml-mls-panel-head {
    min-width: 0;
}

.d3view-dashboard-v2 .ml-mls-panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Compact mode via container queries — each panel is an inline-size container, so the
   controls respond to the PANEL width (resizer, widget or window), no JS involved */
.d3view-dashboard-v2 .ml-mls-panel {
    container-type: inline-size;
}

@container (max-width: 620px) {
    .d3view-dashboard-v2 .ml-mls-btn-txt {
        display: none;
    }

    .d3view-dashboard-v2 .ml-mls-viewtype .btn {
        padding: 2px 7px;
    }

    .d3view-dashboard-v2 .ml-mls-heat-input {
        width: 40px;
    }
}

@container (max-width: 380px) {
    .d3view-dashboard-v2 .ml-mls-count {
        display: none;
    }
}

/* =====================================================================
   WidgetMLParallelView — Option A sidebar extras (search / grouped axis
   checkboxes / sortable active-axis reorder). Reuses ml-inv-pdp shell +
   ml-inv-ctrl-* controls; only the parallel-specific bits are added here.
   Added by shashank2104 on 2026-07-06 - R2026-31.
   ===================================================================== */
/** Added by shashank2104 on 2026-07-15 - R2026-38 - sidebar-on-the-RIGHT for the parallel widget
 *  (chart on the left), matching WidgetML2DScatterView's `.ml-inv-2d-layout--right`. Scoped to
 *  `.ml-inv-par--right` so the PDP widget, which shares the `.ml-inv-pdp-*` shell, keeps its
 *  left-mounted sidebar. DOM order is unchanged — row-reverse only flips the VISUAL order — so
 *  the border and the toggle button both have to move to the other edge to follow it. **/
.d3view-dashboard-v2 .ml-inv-pdp-layout.ml-inv-par--right {
    flex-direction: row-reverse;
}
.d3view-dashboard-v2 .ml-inv-par--right .ml-inv-pdp-sidebar {
    border-right: 0;
    border-left: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .08));
}
/* Toggle now sits on the sidebar's LEFT edge (the seam against the chart). */
.d3view-dashboard-v2 .ml-inv-par--right .ml-inv-pdp-sidebar-toggle {
    right: auto;
    left: -10px;
}
.d3view-dashboard-v2 .ml-inv-par--right .ml-inv-pdp-sidebar--rail .ml-inv-pdp-sidebar-toggle {
    right: auto;
    left: 4px;
}

.ml-inv-par .ml-inv-par-search {
    position: relative;
    margin-bottom: 12px;
}
.ml-inv-par .ml-inv-par-search .fa {
    position: absolute; left: 9px; top: 9px; font-size: 11px;
    color: var(--db-text-muted, var(--d3v-text-muted));
}
.ml-inv-par .ml-inv-par-search input {
    width: 100%; height: 30px; padding: 0 8px 0 26px;
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    color: var(--db-text-primary, var(--d3v-text-primary));
    font-size: 12.5px;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}
.ml-inv-par .ml-inv-par-search input:focus {
    outline: none;
    border-color: var(--db-accent, var(--d3v-accent));
    box-shadow: 0 0 0 3px var(--db-accent-bg, rgba(50,102,173,.12));
}
.ml-inv-par .ml-inv-par-lbl {
    display: block; font-size: 11px; margin: 0 0 5px;
    color: var(--db-text-muted, var(--d3v-text-muted));
}
.ml-inv-par .ml-inv-ctrl-section-header { display: flex; align-items: center; gap: 7px; }
.ml-inv-par .ml-inv-par-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.ml-inv-par .ml-inv-par-dot.teal { background: #0f9e75; }
.ml-inv-par .ml-inv-par-dot.blue { background: #185fa5; }
.ml-inv-par .ml-inv-par-dot.gray { background: #7a8794; }
.ml-inv-par .ml-inv-par-count {
    margin-left: auto; font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0;
    color: var(--db-text-muted, var(--d3v-text-muted));
}
.ml-inv-par .ml-inv-par-allnone { font-size: 11px; text-transform: none; letter-spacing: 0; }
.ml-inv-par .ml-inv-par-allnone a { color: var(--db-accent, var(--d3v-accent)); margin: 0 2px; }
/* Axis rows: color dot + label + the SHARED .db-toggle switch (see v2-06). The group
   color is passed via --db-toggle-on (inline), which tints both the dot and the switch's
   ON track — so the switch primitive stays generic and reusable. */
.ml-inv-par .ml-inv-par-row {
    display: flex !important; align-items: center; gap: 9px; margin: 0 0 5px; padding: 6px 9px;
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    background: var(--db-bg-surface-2, var(--d3v-bg-secondary));
    cursor: pointer; transition: border-color .15s;
}
.ml-inv-par .ml-inv-par-row:hover { border-color: var(--db-border-strong, var(--d3v-border-strong)); }
.ml-inv-par .ml-inv-par-rdot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; background: var(--db-toggle-on, #888); }
.ml-inv-par .ml-inv-par-lab {
    flex: 1; min-width: 0; font-size: 12px; color: var(--db-text-primary, var(--d3v-text-primary));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ml-inv-par .ml-inv-par-empty {
    font-size: 11px; padding: 4px 6px;
    color: var(--db-text-muted, var(--d3v-text-muted));
}
.ml-inv-par .ml-inv-par-order { list-style: none; margin: 0; padding: 0; }
.ml-inv-par .ml-inv-par-ord {
    display: flex; align-items: center; gap: 8px; padding: 6px 7px; margin-bottom: 5px;
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    font-size: 12px; color: var(--db-text-primary, var(--d3v-text-primary));
}
.ml-inv-par .ml-inv-par-ord .fa-grip-vertical {
    color: var(--db-text-muted, var(--d3v-text-muted)); cursor: grab; font-size: 11px;
}
.ml-inv-par .ml-inv-par-ord .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-inv-par .ml-inv-par-ord.ui-sortable-helper {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}


/* =====================================================================
   R2026-38 — Models tab (WidgetMLModelsManagerView)
   Added by shashank2104 on 2026-07-15.
   The models library as a full-width tab (page_models / page_curve_models)
   rather than the old header toggle + slide-out sidebar. Editing renders in
   this same shell — there is no modal in this flow.
   ===================================================================== */

.d3view-dashboard-v2 .dbp-models-shell {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    /* The cards grid responds to the PANEL width, not the viewport — this pane is far
       narrower than the window whenever the rails are expanded. */
    container-type: inline-size;
}

/* ── Header ── */

.d3view-dashboard-v2 .dbp-models-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    min-height: 52px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}

.d3view-dashboard-v2 .dbp-models-head-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.d3view-dashboard-v2 .dbp-models-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--db-text, var(--d3v-text-primary));
    white-space: nowrap;
}

.d3view-dashboard-v2 .dbp-models-title i {
    color: var(--db-accent, var(--d3v-accent));
    margin-right: 4px;
}

.d3view-dashboard-v2 .dbp-models-sub {
    font-size: 12px;
    color: var(--db-text-muted, var(--d3v-text-secondary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .dbp-models-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Cards grid ── */

/* min-height:0 is load-bearing: a flex child defaults to min-height:auto and refuses to
   shrink below its content, so the pane would grow to the full list/form height instead of
   scrolling — which pushes the editor's Cancel/Accept footer off-screen. */
.d3view-dashboard-v2 .dbp-models-body {
    padding: 16px;
    min-height: 0;
}

/* min() on the track floor is the bounds guard: a bare minmax(360px, 1fr) keeps a 360px
   track even in a 300px panel and overflows horizontally. min(360px, 100%) lets the track
   collapse to the panel instead. Vertical overflow scrolls via .dbp-models-body. */
.d3view-dashboard-v2 .dbp-models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 14px;
    align-content: start;
}

/* Column layout on purpose: a grid cell is only ~360-520px, and side-by-side actions
   starve the model name into an ellipsis long before the card looks full. */
.d3view-dashboard-v2 .dbp-model-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px 12px 22px;
    min-height: 158px;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    overflow: hidden;
}

.d3view-dashboard-v2 .dbp-model-card:hover {
    border-color: var(--db-border-strong, var(--d3v-border-strong));
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    transform: translateY(-1px);
}

/* The active model is the one every other tab is showing — make that unmissable. */
.d3view-dashboard-v2 .dbp-model-card.is-active {
    border-color: var(--db-accent, var(--d3v-accent));
    box-shadow: 0 0 0 1px var(--db-accent, var(--d3v-accent)), var(--db-shadow-md, var(--d3v-sh-md));
}

/* Excluded from comparison — recede, but stay legible and actionable. */
.d3view-dashboard-v2 .dbp-model-card.is-excluded {
    opacity: 0.62;
}

.d3view-dashboard-v2 .dbp-model-card.is-excluded:hover {
    opacity: 1;
}

/* Per-model colour rail — same MODEL_COLORS the charts use, so a card maps to its series. */
.d3view-dashboard-v2 .dbp-model-accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
}

.d3view-dashboard-v2 .dbp-model-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Same colour as the rail, repeated inline so the name reads as "this model's series". */
.d3view-dashboard-v2 .dbp-model-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.d3view-dashboard-v2 .dbp-model-name {
    flex: 1 1 auto;
    min-width: 0; /* let the badges keep their size and the name ellipsize, not collapse */
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--db-text, var(--d3v-text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .dbp-model-badge {
    flex-shrink: 0;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    color: var(--db-text-muted, var(--d3v-text-secondary));
    border: 1px solid var(--db-border, var(--d3v-border));
}

.d3view-dashboard-v2 .dbp-model-badge--active {
    background: var(--d3v-status-success-bg, rgba(16, 185, 129, 0.12));
    color: var(--d3v-status-success, #10b981);
    border-color: var(--d3v-status-success, #10b981);
}

/* Stat blocks rather than an inline run of text — the numbers are the reason this card
   exists, so they get their own tiles and read across models at a glance. */
.d3view-dashboard-v2 .dbp-model-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: auto; /* pin metrics + actions to the bottom on taller cards */
}

.d3view-dashboard-v2 .dbp-model-metric {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 8px 10px;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
}

.d3view-dashboard-v2 .dbp-model-metric-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--db-text-muted, var(--d3v-text-secondary));
}

.d3view-dashboard-v2 .dbp-model-metric-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--db-text, var(--d3v-text-primary));
    font-variant-numeric: tabular-nums;
    /* Curve models render errors as 2.50e-11 — never let that bleed out of its tile. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-dashboard-v2 .dbp-model-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 8px;
    border-top: 1px solid var(--db-border, var(--d3v-border));
}

/* Compare is the card's primary switch — anchor it away from the buttons.
   Declared after the .dbp-model-compare base rule above, so it wins without !important. */
.d3view-dashboard-v2 .dbp-model-actions .dbp-model-compare {
    margin-right: auto;
}

.d3view-dashboard-v2 .dbp-model-compare {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    color: var(--db-text-muted, var(--d3v-text-secondary));
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.d3view-dashboard-v2 .dbp-model-compare input {
    margin: 0;
    cursor: pointer;
}

/* Destructive, and only ever shown when the host can absorb it — keep it quiet until hover. */
.d3view-dashboard-v2 .dbp-model-remove:hover {
    color: var(--d3v-status-danger, #ef4444);
    border-color: var(--d3v-status-danger, #ef4444);
}

/* Single model — nothing to compare against, so the control reads as unavailable
   rather than silently doing nothing. */
.d3view-dashboard-v2 .dbp-model-compare.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.d3view-dashboard-v2 .dbp-model-compare.is-disabled input {
    cursor: not-allowed;
}

.d3view-dashboard-v2 .dbp-model-card.is-active .dbp-model-compare,
.d3view-dashboard-v2 .dbp-model-card:hover .dbp-model-compare {
    color: var(--db-text, var(--d3v-text-primary));
}

/* ── Add tile — the last cell in the grid ── */

.d3view-dashboard-v2 .dbp-model-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 158px;
    padding: 16px;
    background: transparent;
    border: 1.5px dashed var(--db-border-strong, var(--d3v-border-strong));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    color: var(--db-text-muted, var(--d3v-text-secondary));
    cursor: pointer;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .dbp-model-add-tile:hover,
.d3view-dashboard-v2 .dbp-model-add-tile:focus {
    border-color: var(--db-accent, var(--d3v-accent));
    color: var(--db-accent, var(--d3v-accent));
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    outline: none;
}

.d3view-dashboard-v2 .dbp-model-add-tile:focus-visible {
    box-shadow: 0 0 0 2px var(--db-accent, var(--d3v-accent));
}

.d3view-dashboard-v2 .dbp-model-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    font-size: 14px;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .dbp-model-add-tile:hover .dbp-model-add-icon {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
}

.d3view-dashboard-v2 .dbp-model-add-label {
    font-size: 13px;
    font-weight: 600;
}

.d3view-dashboard-v2 .dbp-model-add-hint {
    font-size: 11px;
    opacity: 0.75;
    text-align: center;
}

/* ── Empty state ── */

.d3view-dashboard-v2 .dbp-models-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--db-text-muted, var(--d3v-text-secondary));
    font-size: 13px;
}

.d3view-dashboard-v2 .dbp-models-empty i {
    font-size: 28px;
    opacity: 0.45;
}

.d3view-dashboard-v2 .dbp-models-empty-hint {
    font-size: 12px;
    opacity: 0.8;
}

/* ── Inline editor (same container — never a modal) ── */

/* See .dbp-models-body — min-height:0 lets this scroll so the footer stays pinned.
   The ConfigureWfWorker markup inside is .full-height (height:100%), so it only sizes
   correctly once this box has a definite height to resolve against. */
.d3view-dashboard-v2 .dbp-models-editor-body {
    padding: 16px;
    min-height: 0;
}

/* The reused worker form is height:100% and expects a bounded scroll parent (the sidebar
   gives it .ml-inv-config-scroll). This pane is that parent here. */
.d3view-dashboard-v2 .dbp-models-editor-body .ml-inv-worker-view,
.d3view-dashboard-v2 .dbp-models-editor-body .wf-worker-config-view {
    height: auto;
    min-height: 0;
}

.d3view-dashboard-v2 .dbp-models-worker-error {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--d3v-status-warning, #d97706);
    background: var(--d3v-status-warning-bg, rgba(217, 119, 6, 0.1));
    border: 1px solid var(--d3v-status-warning, #d97706);
    border-radius: var(--db-radius-md, var(--d3v-r-md));
}

.d3view-dashboard-v2 .dbp-models-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
}

.d3view-dashboard-v2 .dbp-models-editor-hint {
    font-size: 11px;
    color: var(--db-text-muted, var(--d3v-text-secondary));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .dbp-models-editor-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Panel-width responsiveness (container query — the pane is much narrower
      than the viewport whenever the page + widget rails are expanded) ── */

@container (max-width: 560px) {
    /* One card per row well before the track floor, so a half-width panel shows whole
       cards rather than one card plus a sliver. */
    .d3view-dashboard-v2 .dbp-models-grid {
        grid-template-columns: 1fr;
    }

    /* A full-width dashed banner reads better than a tall empty tile in one column. */
    .d3view-dashboard-v2 .dbp-model-add-tile {
        flex-direction: row;
        gap: 10px;
        min-height: 0;
        padding: 12px 16px;
    }

    .d3view-dashboard-v2 .dbp-model-add-hint {
        display: none;
    }

    .d3view-dashboard-v2 .dbp-models-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .d3view-dashboard-v2 .dbp-models-editor-btns {
        justify-content: flex-end;
    }
}

@container (max-width: 380px) {
    .d3view-dashboard-v2 .dbp-models-sub {
        display: none;
    }

    .d3view-dashboard-v2 .dbp-models-editor-hint {
        display: none;
    }
}

/* --- Dataset Color Coding Tokens --- */
.d3view-dashboard-v2 {
    --ds-primary:   #3b82f6;
    --ds-joined-1:  #8b5cf6;
    --ds-joined-2:  #0d9488;
}

/* =====================================================
   KPI STRIP
   ===================================================== */
.d3view-dashboard-v2 .sl-kpi-strip {
    display: flex; gap: 10px; padding: 6px; height: 100%;
}
.d3view-dashboard-v2 .sl-kpi-item {
    flex: 1;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-lg);
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 4px;
    position: relative; overflow: hidden;
    transition: var(--d3v-t-smooth);
}
.d3view-dashboard-v2 .sl-kpi-item::after {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    border-radius: var(--d3v-r-lg) var(--d3v-r-lg) 0 0;
}
.d3view-dashboard-v2 .sl-kpi-item.kpi-records::after { background: linear-gradient(90deg, #16a34a, #0d9488); }
.d3view-dashboard-v2 .sl-kpi-item.kpi-columns::after { background: linear-gradient(90deg, #3b82f6, #6366f1); }
.d3view-dashboard-v2 .sl-kpi-item.kpi-joins::after  { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.d3view-dashboard-v2 .sl-kpi-item.kpi-match::after  { background: linear-gradient(90deg, #0891b2, #0d9488); }
.d3view-dashboard-v2 .sl-kpi-item:hover { border-color: var(--d3v-border-medium); transform: translateY(-1px); box-shadow: var(--d3v-sh-md); }
.d3view-dashboard-v2 .kpi-label {
    font-size: 10px; color: var(--d3v-text-muted); text-transform: uppercase;
    letter-spacing: .8px; font-weight: 700; display: flex; align-items: center; gap: 6px;
}
.d3view-dashboard-v2 .kpi-label .fa { font-size: 9px; }
.d3view-dashboard-v2 .kpi-value {
    font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1;
}
.d3view-dashboard-v2 .kpi-value.green  { color: var(--d3v-accent-green); }
.d3view-dashboard-v2 .kpi-value.blue   { color: var(--d3v-accent-blue); }
.d3view-dashboard-v2 .kpi-value.indigo { color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .kpi-value.teal   { color: var(--d3v-accent-teal); }
.d3view-dashboard-v2 .kpi-sub { font-size: 10px; color: var(--d3v-text-muted); }

/* =====================================================
   PAGE 1: DATA HUB — Import Dropzone
   Also works inside GenericModalView (no .d3view-dashboard-v2 ancestor)
   ===================================================== */
.d3view-dashboard-v2 .import-dropzone,
.sl-import-modal .import-dropzone {
    border: 2px dashed var(--d3v-border, #CBD5E1);
    border-radius: var(--d3v-r-lg, 12px);
    padding: 32px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    transition: var(--d3v-t-base, 0.2s);
    cursor: pointer;
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.d3view-dashboard-v2 .import-dropzone:hover,
.sl-import-modal .import-dropzone:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59,130,246,.04);
}
.d3view-dashboard-v2 .import-dropzone .drop-icon,
.sl-import-modal .import-dropzone .drop-icon {
    font-size: 36px;
    color: var(--d3v-accent, #3B82F6);
    opacity: 0.6;
}
.d3view-dashboard-v2 .import-dropzone .drop-text,
.sl-import-modal .import-dropzone .drop-text {
    font-size: 14px;
    color: var(--d3v-text-primary, #1E293B);
    font-weight: 600;
}
.d3view-dashboard-v2 .import-dropzone .drop-hint,
.sl-import-modal .import-dropzone .drop-hint {
    font-size: 12px;
    color: var(--d3v-text-muted, #94A3B8);
}
.d3view-dashboard-v2 .import-sources,
.sl-import-modal .import-sources {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px;
}
.d3view-dashboard-v2 .import-source-btn,
.sl-import-modal .import-source-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: var(--d3v-r-full, 9999px);
    border: 1px solid var(--d3v-border, #E2E8F0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px; font-weight: 500;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s);
}
.d3view-dashboard-v2 .import-source-btn:hover,
.sl-import-modal .import-source-btn:hover {
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-accent, #3B82F6);
    background: rgba(59,130,246,.06);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.d3view-dashboard-v2 .import-source-btn .fa,
.sl-import-modal .import-source-btn .fa {
    font-size: 11px;
}

/* =====================================================
   PAGE 1: DATA HUB — Dataset Cards
   ===================================================== */
.d3view-dashboard-v2 .ds-cards-row {
    display: flex; gap: 12px; padding: 4px 0;
}
.d3view-dashboard-v2 .ds-card {
    flex: 1;
    background: var(--db-card-bg);
    border: 1px solid var(--db-card-border);
    border-radius: var(--d3v-r-lg);
    overflow: hidden;
    transition: var(--d3v-t-smooth);
    cursor: pointer;
    position: relative;
}
.d3view-dashboard-v2 .ds-card:hover { border-color: var(--d3v-border-medium); box-shadow: var(--db-card-hover-shadow); transform: translateY(-2px); }
.d3view-dashboard-v2 .ds-card .ds-card-bar { height: 3px; }
.d3view-dashboard-v2 .ds-card .ds-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.d3view-dashboard-v2 .ds-card .ds-card-name { font-size: 13px; font-weight: 700; color: var(--d3v-text-primary); display: flex; align-items: center; gap: 6px; }
.d3view-dashboard-v2 .ds-card .ds-card-badge {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 1px 7px; border-radius: var(--d3v-r-full);
}
.d3view-dashboard-v2 .ds-card .ds-card-stats { display: flex; gap: 12px; font-size: 11px; color: var(--d3v-text-secondary); }
.d3view-dashboard-v2 .ds-card .ds-card-stats .fa { font-size: 10px; margin-right: 3px; }
.d3view-dashboard-v2 .ds-card .ds-card-types { display: flex; gap: 4px; flex-wrap: wrap; }
.d3view-dashboard-v2 .ds-card .type-tag {
    font-size: 9px; font-weight: 600; padding: 1px 6px;
    border-radius: var(--d3v-r-sm);
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .ds-card .ds-card-source { font-size: 10px; color: var(--d3v-text-muted); display: flex; align-items: center; gap: 4px; }
.d3view-dashboard-v2 .ds-card-add {
    flex: 0 0 160px;
    border: 2px dashed var(--d3v-border-medium);
    border-radius: var(--d3v-r-lg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--d3v-text-muted); font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .ds-card-add:hover { border-color: var(--d3v-accent-indigo); color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .ds-card-add .fa { font-size: 18px; }

/* =====================================================
   PAGE 1: DATA HUB — Relationship Summary Strip
   ===================================================== */
.d3view-dashboard-v2 .rel-summary-strip {
    display: flex; gap: 10px; padding: 8px 0; flex-wrap: wrap;
}
.d3view-dashboard-v2 .rel-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-full);
    font-size: 11px; color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .rel-pill .rel-dot { width: 6px; height: 6px; border-radius: 50%; }
.d3view-dashboard-v2 .rel-pill .rel-match { font-weight: 600; color: var(--d3v-accent-green); margin-left: 4px; }
.d3view-dashboard-v2 .rel-pill code {
    font-size: 10px; font-weight: 600; color: var(--d3v-text-primary);
}

/* =====================================================
   PAGE 1: DATA HUB — Data Tables
   ===================================================== */
.d3view-dashboard-v2 .data-table-wrap { 
    overflow: auto;
     flex: 1; 
     height: 100% !important;
}
.d3view-dashboard-v2 table.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.d3view-dashboard-v2 table.data-table th {
    padding: 8px 14px; text-align: left;
    background: rgba(99,102,241,.06);
    color: var(--d3v-text-secondary);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    border-bottom: 1px solid var(--d3v-border-accent); white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
.d3view-dashboard-v2 table.data-table td {
    padding: 7px 14px;
    border-bottom: 1px solid var(--d3v-border-light);
    color: var(--d3v-text-primary);
    font-size: 11px;
}
.d3view-dashboard-v2 table.data-table tr:nth-child(even) td { background: var(--d3v-bg-secondary); }
.d3view-dashboard-v2 table.data-table tr:hover td { background: rgba(99,102,241,.06); }
.d3view-dashboard-v2 table.data-table th.col-blue { color: var(--ds-primary); border-bottom-color: var(--ds-primary); }
.d3view-dashboard-v2 table.data-table th.col-purple { color: var(--ds-joined-1); border-bottom-color: var(--ds-joined-1); }
.d3view-dashboard-v2 table.data-table th.col-teal { color: var(--ds-joined-2); border-bottom-color: var(--ds-joined-2); }

/* =====================================================
   PAGE 2: CHARTS — Filter Bar
   ===================================================== */
.d3view-dashboard-v2 .chart-filter-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px;
    border-bottom: 1px solid var(--d3v-border-light);
    flex-shrink: 0;
    background: var(--db-card-bg);
}
.d3view-dashboard-v2 .filter-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    border-radius: var(--d3v-r-full);
    border: 1px solid var(--d3v-border-light);
    background: var(--d3v-bg-secondary);
    font-size: 11px; font-weight: 500; color: var(--d3v-text-secondary);
    cursor: pointer; transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .filter-pill:hover { border-color: var(--d3v-border-medium); }
.d3view-dashboard-v2 .filter-pill .fa { font-size: 9px; }
.d3view-dashboard-v2 .filter-pill.active { background: rgba(99,102,241,.1); border-color: var(--d3v-border-accent); color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .filter-sep { width: 1px; height: 20px; background: var(--d3v-border-light); }

/* =====================================================
   PAGE 2: CHARTS — Heatmap Table
   ===================================================== */
.d3view-dashboard-v2 .heatmap-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.d3view-dashboard-v2 .heatmap-table th {
    padding: 6px 8px; text-align: center;
    font-size: 10px; font-weight: 700; color: var(--d3v-text-muted);
    text-transform: uppercase; letter-spacing: .4px;
}
.d3view-dashboard-v2 .heatmap-table td {
    padding: 8px; text-align: center;
    font-weight: 600; font-size: 11px;
    border-radius: var(--d3v-r-sm);
}

/* =====================================================
   PAGE 3: RELATIONSHIPS — ER Diagram
   ===================================================== */
.d3view-dashboard-v2 .er-canvas-wrap {
    width: 100%; height: 100%; position: relative;
}
.d3view-dashboard-v2 .er-canvas-wrap svg { width: 100%; height: 100%; }

/* --- Join Rules Panel --- */
.d3view-dashboard-v2 .join-rules-panel {
    display: flex; flex-direction: column; gap: 10px; padding: 4px;
}
.d3view-dashboard-v2 .join-rule-card {
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .join-rule-card:hover { border-color: var(--d3v-border-medium); }
.d3view-dashboard-v2 .join-rule-label { font-size: 11px; font-weight: 600; color: var(--d3v-text-primary); }
.d3view-dashboard-v2 .join-rule-detail {
    font-size: 10px; color: var(--d3v-text-muted);
}
.d3view-dashboard-v2 .join-type-toggle {
    display: inline-flex; border-radius: var(--d3v-r-full); overflow: hidden; border: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .join-type-toggle button {
    padding: 3px 10px; border: none; background: transparent;
    font-size: 10px; font-weight: 600;
    color: var(--d3v-text-muted); cursor: pointer;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .join-type-toggle button.active { background: rgba(99,102,241,.12); color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .join-match-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--d3v-r-full);
    background: rgba(22,163,74,.12); color: var(--d3v-accent-green);
}
.d3view-dashboard-v2 .join-toggle-switch {
    width: 32px; height: 18px; border-radius: 9px;
    background: var(--d3v-accent-green);
    position: relative; cursor: pointer; border: none;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .join-toggle-switch::after {
    content: ''; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; position: absolute; top: 2px; left: 16px;
    transition: var(--d3v-t-fast);
}

/* =====================================================
   PAGE 4: ONTOLOGY
   ===================================================== */
.d3view-dashboard-v2 .ontology-graph svg { width: 100%; height: 100%; }
.d3view-dashboard-v2 .ai-chat-panel {
    display: flex; flex-direction: column; height: 100%;
}
.d3view-dashboard-v2 .ai-chat-messages {
    flex: 1; overflow-y: auto; padding: 10px;
    display: flex; flex-direction: column; gap: 10px;
}
.d3view-dashboard-v2 .ai-chat-bubble {
    max-width: 90%; padding: 10px 14px;
    border-radius: var(--d3v-r-lg);
    font-size: 12px; line-height: 1.5;
}
.d3view-dashboard-v2 .ai-chat-bubble.user {
    align-self: flex-end;
    background: var(--d3v-accent-indigo); color: #fff;
    border-bottom-right-radius: var(--d3v-r-sm);
}
.d3view-dashboard-v2 .ai-chat-bubble.agent {
    align-self: flex-start;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    color: var(--d3v-text-primary);
    border-bottom-left-radius: var(--d3v-r-sm);
}
.d3view-dashboard-v2 .ai-chat-input-wrap {
    display: flex; gap: 6px; padding: 10px;
    border-top: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .ai-chat-input {
    flex: 1; height: 34px; padding: 0 12px;
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-input);
    color: var(--d3v-text-primary);
    font-size: 12px;
    outline: none; transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .ai-chat-input:focus { border-color: var(--d3v-accent-indigo); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.d3view-dashboard-v2 .ai-chat-send {
    width: 34px; height: 34px; border: none;
    border-radius: var(--d3v-r-md);
    background: var(--d3v-accent-indigo); color: #fff;
    cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ai-chat-send:hover { background: #4f46e5; }

/* --- Suggestion Cards --- */
.d3view-dashboard-v2 .suggestion-cards {
    display: flex; gap: 10px; padding: 4px;
}
.d3view-dashboard-v2 .suggestion-card {
    flex: 1; padding: 12px 14px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
    display: flex; flex-direction: column; gap: 8px;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .suggestion-card:hover { border-color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .suggestion-card .sugg-text { font-size: 11px; color: var(--d3v-text-secondary); line-height: 1.4; }
.d3view-dashboard-v2 .suggestion-card .sugg-conf {
    font-size: 10px; font-weight: 700; color: var(--d3v-accent-green);
}
.d3view-dashboard-v2 .suggestion-card .btn-apply-sugg {
    align-self: flex-start;
    padding: 4px 12px; border-radius: var(--d3v-r-full);
    border: 1px solid var(--d3v-accent-indigo);
    background: rgba(99,102,241,.08); color: var(--d3v-accent-indigo);
    font-size: 10px; font-weight: 600;
    cursor: pointer; transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .suggestion-card .btn-apply-sugg:hover { background: rgba(99,102,241,.18); }

/* =====================================================
   PAGE 5: SUMMARY — Completeness Bars
   ===================================================== */
.d3view-dashboard-v2 .completeness-bar-wrap {
    display: flex; flex-direction: column; gap: 8px; padding: 4px;
}
.d3view-dashboard-v2 .completeness-row {
    display: flex; align-items: center; gap: 10px;
}
.d3view-dashboard-v2 .completeness-row .col-name {
    font-size: 11px; font-weight: 500; color: var(--d3v-text-secondary);
    min-width: 100px; text-align: right;
}
.d3view-dashboard-v2 .completeness-row .bar-bg {
    flex: 1; height: 8px; border-radius: 4px;
    background: var(--d3v-bg-tertiary); overflow: hidden;
}
.d3view-dashboard-v2 .completeness-row .bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.d3view-dashboard-v2 .completeness-row .bar-pct {
    font-size: 10px; font-weight: 600; color: var(--d3v-text-muted); min-width: 35px;
}

/* =====================================================
   PAGE 6: EXPLORE — Search bar
   ===================================================== */
.d3view-dashboard-v2 .explore-search-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border-light);
    flex-shrink: 0;
}
.d3view-dashboard-v2 .explore-search-input {
    flex: 1; height: 34px; padding: 0 12px 0 34px;
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-input);
    color: var(--d3v-text-primary);
    font-size: 12px;
    outline: none; transition: var(--d3v-t-base);
    position: relative;
}
.d3view-dashboard-v2 .explore-search-input:focus { border-color: var(--d3v-accent-indigo); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.d3view-dashboard-v2 .search-input-wrap {
    position: relative; flex: 1;
}
.d3view-dashboard-v2 .search-input-wrap .fa-search {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d3v-text-muted); font-size: 12px; pointer-events: none;
}

/* =====================================================
   PAGE 7: SETTINGS
   ===================================================== */
.d3view-dashboard-v2 .settings-panel {
    max-width: 600px; margin: 24px auto; padding: 0 20px;
    display: flex; flex-direction: column; gap: 20px;
}
.d3view-dashboard-v2 .settings-group {
    display: flex; flex-direction: column; gap: 10px;
}
.d3view-dashboard-v2 .settings-group-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--d3v-text-muted); padding-bottom: 6px;
    border-bottom: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--d3v-bg-secondary);
    border: 1px solid var(--d3v-border-light);
    border-radius: var(--d3v-r-md);
}
.d3view-dashboard-v2 .settings-row .setting-label { font-size: 12px; font-weight: 500; color: var(--d3v-text-primary); }
.d3view-dashboard-v2 .settings-row .setting-desc { font-size: 10px; color: var(--d3v-text-muted); margin-top: 2px; }
.d3view-dashboard-v2 .toggle-group {
    display: inline-flex; border-radius: var(--d3v-r-full); overflow: hidden; border: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .toggle-group button {
    padding: 4px 12px; border: none; background: transparent;
    font-size: 11px; font-weight: 500;
    color: var(--d3v-text-muted); cursor: pointer;
    transition: var(--d3v-t-fast);
}
.d3view-dashboard-v2 .toggle-group button.active { background: rgba(99,102,241,.12); color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .toggle-group button:hover:not(.active) { color: var(--d3v-text-secondary); }
.d3view-dashboard-v2 .btn-back-classic-big {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px;
    border-radius: var(--d3v-r-lg);
    border: 1px solid var(--d3v-border-medium);
    background: transparent;
    color: var(--d3v-text-secondary);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--d3v-t-base);
    margin-top: 10px;
}
.d3view-dashboard-v2 .btn-back-classic-big:hover { border-color: var(--d3v-accent-indigo); color: var(--d3v-accent-indigo); background: rgba(99,102,241,.04); }

/* =====================================================
   LAYOUT HELPERS
   ===================================================== */
.d3view-dashboard-v2 .split-layout {
    display: flex; gap: var(--db-widget-gap); flex: 1; min-height: 0;
}
.d3view-dashboard-v2 .split-layout .split-main { flex: 1; min-width: 0; }
.d3view-dashboard-v2 .split-layout .split-side { width: 280px; flex-shrink: 0; }

/* --- Back to Classic header button --- */
.d3view-dashboard-v2 .btn-back-classic {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border-radius: var(--d3v-r-md);
    border: 1px solid var(--d3v-border-medium);
    background: transparent;
    color: var(--d3v-text-secondary);
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .btn-back-classic:hover { border-color: var(--d3v-accent-indigo); color: var(--d3v-accent-indigo); background: rgba(99,102,241,.06); }

/* =====================================================
   HOME PAGE — SIMLYTIKS EMBED + DATASET CAROUSEL
   ===================================================== */
.d3view-dashboard-v2 .sl-home-wrap { position: relative; }

.d3view-dashboard-v2 .sl-home-carousel {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 16px; height: 36px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .sl-home-carousel .btn {
    width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--d3v-r-full);
    border: 1px solid var(--d3v-border-medium);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-secondary);
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .sl-home-carousel .btn:hover {
    border-color: var(--d3v-accent-indigo);
    color: var(--d3v-accent-indigo);
    background: rgba(99,102,241,.06);
}
.d3view-dashboard-v2 .sl-home-carousel-label {
    font-size: 12px; font-weight: 600;
    color: var(--d3v-text-primary);
    min-width: 160px; text-align: center;
}
.d3view-dashboard-v2 .sl-home-carousel-dots {
    display: flex; gap: 5px; margin-left: 8px;
}
.d3view-dashboard-v2 .sl-home-carousel-dot {
    width: 8px; height: 8px;
    border-radius: var(--d3v-r-full);
    background: var(--d3v-border-medium);
    cursor: pointer;
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .sl-home-carousel-dot:hover { background: var(--d3v-text-muted); }
.d3view-dashboard-v2 .sl-home-carousel-dot.active { background: var(--d3v-accent-indigo); }

.d3view-dashboard-v2 .sl-home-simlytiks-wrap {
    position: relative;
}
.d3view-dashboard-v2 .sl-home-simlytiks-wrap .simlytiks-embedded {
    overflow: hidden;
}

.d3view-dashboard-v2 .sl-home-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; gap: 8px;
    color: var(--d3v-text-muted); font-size: 13px;
}
.d3view-dashboard-v2 .sl-home-empty i {
    font-size: 48px; opacity: .3;
}

/* =====================================================
   RELATIONSHIP BUILDER — ADD DATA TOOLBAR
   ===================================================== */
.d3view-dashboard-v2 .rb-canvas-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 4px 8px; height: 36px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border-light);
}
.d3view-dashboard-v2 .rb-canvas-toolbar .btn {
    font-size: 11px; font-weight: 600;
    border-radius: var(--d3v-r-md);
    border: 1px solid var(--d3v-border-medium);
    color: var(--d3v-text-secondary);
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .rb-canvas-toolbar .btn:hover {
    border-color: var(--d3v-accent-green);
    color: var(--d3v-accent-green);
    background: rgba(22,163,74,.06);
}

/* =====================================================
   GLOBAL IMPORT BUTTON
   ===================================================== */
.d3view-dashboard-v2 .db-sl-import-btn {
    font-size: 12px; font-weight: 600;
    border-radius: var(--d3v-r-md);
    border: 1px solid var(--d3v-border-medium);
    padding: 4px 12px;
    transition: var(--d3v-t-base);
}
.d3view-dashboard-v2 .db-sl-import-btn:hover {
    border-color: var(--d3v-accent-indigo);
    color: var(--d3v-accent-indigo);
    background: rgba(99,102,241,.06);
}

/* =====================================================
   DARK THEME OVERRIDES
   ===================================================== */
[data-theme="dark"] .d3view-dashboard-v2 {
    --ds-primary:   #60a5fa;
    --ds-joined-1:  #a78bfa;
    --ds-joined-2:  #2dd4bf;
}

/* =====================================================
   SIM-998 — Inline ChartsListView host inside widget-viz
   Added by shashank2104 on 2026-04-11
   -----------------------------------------------------
   We mount Simlytiks ChartsListView inline inside a
   widget body (no modal). All ChartsListView CSS is
   scoped under `div.simlytiks` so we wrap our host in
   `div.simlytiks.ss-viz-inline-picker-wrap`.

   Problem: when this widget is rendered inside the
   Advanced Dashboard view, the OUTER `div.simlytiks`
   carries `sl-view-advanced-dashboard`, which has
   `.sl-charts-container { display: none !important; }`
   to hide the classic charts list. That cascades into
   our nested wrapper and hides the inline picker too.
   Override it back to visible with higher specificity.
   ===================================================== */
div.simlytiks.sl-view-advanced-dashboard .ss-viz-inline-picker-wrap,
div.simlytiks.sl-view-advanced-dashboard .ss-viz-inline-picker-wrap .sl-charts-container,
div.simlytiks.sl-view-advanced-dashboard .ss-viz-inline-picker-wrap .sl-side-bar-container,
div.simlytiks.sl-view-advanced-dashboard .ss-viz-inline-picker-wrap .sl-side-bar {
    display: flex !important;
}
div.simlytiks .ss-viz-inline-picker-wrap {
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-picker {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
div.simlytiks .ss-viz-inline-picker-wrap .sl-charts-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1997 - Inline Run ML picker host.
 *  Two-column split inside the widget:
 *    - left: MachineLearningVisListView (search + items; swaps to VizParams on pick)
 *    - right: VizPreview (columns-used table + chart preview) — appears on pick
 *  Both panes are flex children of .ss-viz-inline-ml-body with explicit bases so
 *  neither collapses to zero width. **/
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: row;
    overflow: hidden;
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-host {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-body.has-preview .ss-viz-inline-ml-host {
    flex: 0 0 380px;
    border-right: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-host > .ml-vis-list {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-host > .ml-vis-list > .ml-charts-preview:not(.hidden) {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
/* VizPreview lives here — MachineLearningVisListView renders the preview into
   activeEl (routed to this node via our proxy parentView). Hidden until it has
   content (after the user picks an ML item in the list). */
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-preview {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: auto;
    background: var(--d3v-bg-primary, #FFF);
}
div.simlytiks .ss-viz-inline-picker-wrap .ss-viz-inline-ml-body.has-preview .ss-viz-inline-ml-preview {
    display: block;
}

/* Added by shashank2104 on 04/13/2026 - SIM-998 - ensure floating brush actions
   bar is visible inside dashboard widget cards. Classic CSS positions it at
   top: 0 inside .vizviewContainer, but dashboard widget cards clip their body
   and the widget header competes for the same space, so brushes from other
   charts never showed the Keep/Remove ribbon on the source widget. */
.d3view-dashboard-v2 .sl-dashboard-widget-viz-host {
    position: relative;
    overflow: visible;
}
.d3view-dashboard-v2 .sl-dashboard-widget-viz-host .vizviewContainer {
    position: relative;
    overflow: visible;
}
.d3view-dashboard-v2 div.simlytiks .vizviewContainer .viz-floating-actions-bar {
    top: 4px;
    left: 8px;
    width: calc(100% - 16px);
    height: 40px;
    z-index: 500;
    box-shadow: var(--d3v-sh-md);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
}

/* All rules scoped under .d3view-dashboard-v2 to avoid leakage.
   Uses only --db-* / --d3v-* tokens. Agents C and D append below these sections. */

/* ============================================================
   Shared: header, select, empty state, canvas surface
   ============================================================ */

.d3view-dashboard-v2 .ml-curve-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    width: 100%;
    color: var(--db-text-muted, var(--d3v-text-muted));
    font-size: 12px;
    padding: 24px;
    text-align: center;
}

.d3view-dashboard-v2 .ml-curve-empty i {
    font-size: 22px;
    opacity: 0.5;
}

.d3view-dashboard-v2 .ml-curve-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    box-shadow: 0 1px 0 0 var(--db-border, var(--d3v-border));
    min-height: 48px;
    gap: 12px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .ml-curve-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--db-text-primary, var(--d3v-text-primary));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.2px;
}

.d3view-dashboard-v2 .ml-curve-title i {
    color: var(--db-accent, var(--d3v-accent));
    font-size: 14px;
}

.d3view-dashboard-v2 .ml-curve-header-ctrls {
    gap: 8px;
}

.d3view-dashboard-v2 .ml-curve-select {
    height: 32px;
    min-width: 120px;
    max-width: 180px;
    font-size: 12px;
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    border: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-primary, var(--d3v-bg-secondary));
    color: var(--db-text-primary, var(--d3v-text-primary));
    padding: 0 10px;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-curve-select:hover {
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}

.d3view-dashboard-v2 .ml-curve-select:focus {
    outline: none;
    border-color: var(--db-accent, var(--d3v-accent));
    box-shadow: 0 0 0 3px var(--db-accent-soft, rgba(99, 102, 241, 0.15));
}

.d3view-dashboard-v2 .ml-curve-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-curve-canvas > svg,
.d3view-dashboard-v2 .ml-curve-canvas > div {
    width: 100%;
    height: 100%;
}

/* ============================================================
   Section: Newton curveplot widgets (Agent B)
   ============================================================ */

/* --- Actual vs Predicted --- */
.d3view-dashboard-v2 .ml-curve-actual-vs-pred,
.d3view-dashboard-v2 .ml-curve-actual-vs-pred-inner {
    height: 100%;
    width: 100%;
}

/* --- Worst Predictions grid --- */
.d3view-dashboard-v2 .ml-curve-worst,
.d3view-dashboard-v2 .ml-curve-worst-inner {
    height: 100%;
    width: 100%;
}

.d3view-dashboard-v2 .ml-curve-worst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 12px;
}

.d3view-dashboard-v2 .ml-curve-worst-cell {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-curve-worst-cell:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .ml-curve-worst-canvas {
    height: 140px;
    width: 100%;
    background: var(--db-bg-primary, var(--d3v-bg-secondary));
    border-radius: var(--db-radius-sm, var(--d3v-r-sm));
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-curve-worst-canvas > svg,
.d3view-dashboard-v2 .ml-curve-worst-canvas > div {
    width: 100%;
    height: 100%;
}

.d3view-dashboard-v2 .ml-curve-worst-meta {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    padding: 0 2px;
    gap: 8px;
}

.d3view-dashboard-v2 .ml-curve-worst-rowid {
    font-weight: 700;
    color: var(--db-text-primary, var(--d3v-text-primary));
}

.d3view-dashboard-v2 .ml-curve-worst-dist {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--db-status-warning-soft, rgba(245, 158, 11, 0.12));
    color: var(--db-status-warning, var(--d3v-status-warning, #f59e0b));
    border-radius: var(--d3v-r-full, 9999px);
    font-weight: 700;
}

.d3view-dashboard-v2 .ml-curve-worst-dist i {
    font-size: 9px;
    opacity: 0.8;
}

/* --- Input vs Output side-by-side --- */
.d3view-dashboard-v2 .ml-curve-input-output,
.d3view-dashboard-v2 .ml-curve-io-inner {
    height: 100%;
    width: 100%;
}

.d3view-dashboard-v2 .ml-curve-io {
    display: flex;
    gap: 12px;
    padding: 12px;
    min-height: 0;
}

.d3view-dashboard-v2 .ml-curve-io > div {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}

.d3view-dashboard-v2 .ml-curve-io > div:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}

/* ============================================================
   Section: Tabular / metric widgets (Agent C)
   ============================================================ */

/* --- Curve KPI cards ------------------------------------------------ */
.d3view-dashboard-v2 .ml-curve-kpi {
    padding: var(--d3v-sp-sm, 8px);
    box-sizing: border-box;
}
.d3view-dashboard-v2 .ml-curve-kpi-row {
    display: flex;
    gap: var(--d3v-sp-md, 12px);
    flex-wrap: wrap;
    height: 100%;
    align-items: stretch;
}
.d3view-dashboard-v2 .ml-curve-kpi-card {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: var(--d3v-sp-md, 12px);
    padding: var(--d3v-sp-md, 14px) var(--d3v-sp-lg, 16px);
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .04));
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-curve-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, .08));
    border-color: var(--d3v-border-strong, #d1d5db);
}
.d3view-dashboard-v2 .ml-curve-kpi-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-accent-soft, rgba(99, 102, 241, .12));
    color: var(--d3v-accent, #6366f1);
    font-size: 18px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-curve-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.d3view-dashboard-v2 .ml-curve-kpi-value {
    font-size: var(--d3v-fs-xl, 22px);
    font-weight: 700;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-dashboard-v2 .ml-curve-kpi-label {
    font-size: var(--d3v-fs-xs, 11px);
    color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 2px;
}

/* --- Prediction scores table --------------------------------------- */
.d3view-dashboard-v2 .ml-curve-pred-scores {
    padding: var(--d3v-sp-sm, 8px);
    box-sizing: border-box;
}
.d3view-dashboard-v2 .ml-curve-pred-scores-header {
    padding: var(--d3v-sp-sm, 8px) var(--d3v-sp-md, 12px);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
    margin-bottom: var(--d3v-sp-sm, 8px);
    gap: var(--d3v-sp-md, 12px);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-title {
    font-weight: 700;
    color: var(--d3v-text-primary, #111827);
    font-size: var(--d3v-fs-md, 14px);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-title i {
    color: var(--d3v-accent, #6366f1);
    margin-right: 6px;
}
.d3view-dashboard-v2 .ml-curve-select {
    height: 32px;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-primary, #111827);
    padding: 0 var(--d3v-sp-sm, 8px);
    font-size: var(--d3v-fs-sm, 12px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-curve-select:focus {
    outline: none;
    border-color: var(--d3v-accent, #6366f1);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(99, 102, 241, .15));
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--d3v-fs-sm, 12px);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--d3v-bg-secondary, #f9fafb);
    color: var(--d3v-text-secondary, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: var(--d3v-fs-xs, 11px);
    padding: var(--d3v-sp-sm, 8px) var(--d3v-sp-md, 12px);
    text-align: left;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
    user-select: none;
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table thead th:hover {
    background: var(--d3v-bg-hover, #f3f4f6);
    color: var(--d3v-text-primary, #111827);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table thead th.is-sorted {
    color: var(--d3v-accent, #6366f1);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table tbody td {
    padding: var(--d3v-sp-sm, 8px) var(--d3v-sp-md, 12px);
    border-bottom: 1px solid var(--d3v-border-subtle, #f3f4f6);
    color: var(--d3v-text-primary, #111827);
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table tbody tr {
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table tbody tr:nth-child(even) {
    background: var(--d3v-bg-secondary, #fafbfc);
}
.d3view-dashboard-v2 .ml-curve-pred-scores-table tbody tr:hover {
    background: var(--d3v-bg-hover, #eef2ff);
}
.d3view-dashboard-v2 .ml-curve-rowid {
    font-family: var(--d3v-font-mono, ui-monospace, Menlo, monospace);
    color: var(--d3v-text-secondary, #6b7280);
    font-size: var(--d3v-fs-xs, 11px);
}
.d3view-dashboard-v2 .ml-curve-model-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.d3view-dashboard-v2 .ml-curve-grade {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--d3v-r-pill, 999px);
    font-weight: 700;
    font-size: var(--d3v-fs-xs, 11px);
}
.d3view-dashboard-v2 .ml-curve-grade-a { background: rgba(16, 185, 129, .12); color: #059669; }
.d3view-dashboard-v2 .ml-curve-grade-b { background: rgba(59, 130, 246, .12); color: #2563eb; }
.d3view-dashboard-v2 .ml-curve-grade-c { background: rgba(245, 158, 11, .12); color: #d97706; }
.d3view-dashboard-v2 .ml-curve-grade-d { background: rgba(239, 68, 68, .12);  color: #dc2626; }
.d3view-dashboard-v2 .ml-curve-grade-na { background: var(--d3v-bg-muted, #f3f4f6); color: var(--d3v-text-secondary, #6b7280); }

/* --- Schema table --------------------------------------------------- */
.d3view-dashboard-v2 .ml-curve-schema {
    padding: var(--d3v-sp-sm, 8px);
    box-sizing: border-box;
}
.d3view-dashboard-v2 .ml-curve-schema-body {
    padding: var(--d3v-sp-sm, 8px);
}
.d3view-dashboard-v2 .ml-curve-schema-section {
    margin-bottom: var(--d3v-sp-lg, 18px);
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .04));
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-curve-schema-section-title {
    font-weight: 700;
    color: var(--d3v-text-primary, #111827);
    font-size: var(--d3v-fs-sm, 13px);
    padding: var(--d3v-sp-sm, 10px) var(--d3v-sp-md, 14px);
    background: var(--d3v-bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.d3view-dashboard-v2 .ml-curve-schema-section-title i {
    color: var(--d3v-accent, #6366f1);
    margin-right: 6px;
}
.d3view-dashboard-v2 .ml-curve-schema-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--d3v-fs-sm, 12px);
}
.d3view-dashboard-v2 .ml-curve-schema-table thead th {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: var(--d3v-fs-xs, 11px);
    color: var(--d3v-text-secondary, #6b7280);
    padding: var(--d3v-sp-sm, 8px) var(--d3v-sp-md, 12px);
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.d3view-dashboard-v2 .ml-curve-schema-table tbody td {
    padding: var(--d3v-sp-sm, 8px) var(--d3v-sp-md, 12px);
    border-bottom: 1px solid var(--d3v-border-subtle, #f3f4f6);
    color: var(--d3v-text-primary, #111827);
}
.d3view-dashboard-v2 .ml-curve-schema-table tbody tr:last-child td {
    border-bottom: none;
}
.d3view-dashboard-v2 .ml-curve-schema-table tbody tr:hover {
    background: var(--d3v-bg-hover, #eef2ff);
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .ml-curve-schema-prefix {
    font-family: var(--d3v-font-mono, ui-monospace, Menlo, monospace);
    color: var(--d3v-accent, #6366f1);
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-curve-schema-sample {
    color: var(--d3v-text-secondary, #6b7280);
    font-family: var(--d3v-font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--d3v-fs-xs, 11px);
}
.d3view-dashboard-v2 .ml-curve-schema-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--d3v-r-pill, 999px);
    background: var(--d3v-accent-soft, rgba(99, 102, 241, .12));
    color: var(--d3v-accent, #6366f1);
    font-size: var(--d3v-fs-xs, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ============================================================
   Section: Carousel / metadata widgets (Agent D — append below)
   ============================================================ */

/* ============================================================
   Section: Carousel & metadata curve widgets (Agent D)
   ============================================================ */

/* -- Shared header row inside these widgets -- */
.d3view-dashboard-v2 .ml-curve-feat-resp,
.d3view-dashboard-v2 .ml-curve-dataset-split,
.d3view-dashboard-v2 .ml-curve-coefs {
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-lg, var(--d3v-r-lg));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-curve-feat-resp:hover,
.d3view-dashboard-v2 .ml-curve-dataset-split:hover,
.d3view-dashboard-v2 .ml-curve-coefs:hover {
    box-shadow: var(--db-shadow-md, var(--d3v-sh-md));
    border-color: var(--db-border-strong, var(--d3v-border-strong));
}

/* ============================================================
   Curve Feature vs Response (carousel)
   ============================================================ */
.d3view-dashboard-v2 .ml-curve-feat-resp-inner {
    padding: 0;
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-canvas {
    min-height: 0;
    position: relative;
    padding: 8px 12px 4px;
}

.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-controls {
    gap: 10px;
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    padding: 0;
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-btn:hover {
    background: var(--db-accent, var(--d3v-accent));
    border-color: var(--db-accent, var(--d3v-accent));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-btn:active {
    transform: translateY(0);
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text-primary, var(--d3v-text-primary));
    min-width: 140px;
    text-align: center;
}

.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 6px 12px 10px;
    flex-wrap: wrap;
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--db-border-strong, rgba(148, 163, 184, 0.45));
    cursor: pointer;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
    display: inline-block;
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-dot:hover {
    background: var(--db-accent, var(--d3v-accent));
    transform: scale(1.25);
}
.d3view-dashboard-v2 .ml-curve-feat-resp .ml-curve-carousel-dot.active {
    background: var(--db-accent, var(--d3v-accent));
    transform: scale(1.35);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

/* ============================================================
   Curve Dataset Split (metrics + stacked bar)
   ============================================================ */
.d3view-dashboard-v2 .ml-curve-dataset-split-inner {
    padding: 0;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--db-radius-pill, 999px);
    border: 1px solid transparent;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-badge-ok {
    background: var(--d3v-status-success-bg, rgba(16, 185, 129, 0.1));
    color: var(--d3v-status-success, #10b981);
    border-color: rgba(16, 185, 129, 0.25);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-badge-warn {
    background: var(--d3v-status-warning-bg, rgba(245, 158, 11, 0.1));
    color: var(--d3v-status-warning, #f59e0b);
    border-color: rgba(245, 158, 11, 0.25);
}

.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 14px 8px;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-metric {
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.08));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--db-radius-md, var(--d3v-r-md));
    padding: 12px 10px;
    text-align: center;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-metric:hover {
    border-color: var(--db-accent, var(--d3v-accent));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    transform: translateY(-1px);
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-metric-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--db-text-primary, var(--d3v-text-primary));
    line-height: 1.1;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-metric-lbl {
    margin-top: 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    font-weight: 600;
}

.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-bar-wrap {
    padding: 6px 14px 14px;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-bar {
    display: flex;
    height: 26px;
    border-radius: var(--db-radius-pill, 999px);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    transition: filter var(--db-transition-fast, 0.18s ease);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-seg:hover {
    filter: brightness(1.08);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-seg-train {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-seg-val {
    background: linear-gradient(135deg, #10b981, #059669);
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-seg-test {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-legend {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-legend-item strong {
    color: var(--db-text-primary, var(--d3v-text-primary));
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-curve-dataset-split .ml-curve-split-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* ============================================================
   Curve Coefficients (table + heatmap)
   ============================================================ */
.d3view-dashboard-v2 .ml-curve-coefs-inner {
    padding: 0;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-shape {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--db-radius-pill, 999px);
    background: var(--d3v-status-info-bg, rgba(99, 102, 241, 0.1));
    color: var(--db-accent, var(--d3v-accent));
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-scroll {
    padding: 8px 12px 12px;
}

.d3view-dashboard-v2 .ml-curve-coefs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.d3view-dashboard-v2 .ml-curve-coefs-table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    padding: 8px 10px;
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.08));
    border-bottom: 1px solid var(--db-border, var(--d3v-border));
    position: sticky;
    top: 0;
    z-index: 1;
}
.d3view-dashboard-v2 .ml-curve-coefs-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--db-border-subtle, rgba(148, 163, 184, 0.15));
    color: var(--db-text-primary, var(--d3v-text-primary));
    transition: background var(--db-transition-fast, 0.18s ease);
}
.d3view-dashboard-v2 .ml-curve-coefs-table tbody tr:hover td {
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.06));
}

.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-name {
    font-weight: 500;
    color: var(--db-text-primary, var(--d3v-text-primary));
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-val-pos {
    color: var(--d3v-status-success, #10b981);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-val-neg {
    color: var(--d3v-status-danger, #ef4444);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-bar-track {
    width: 100%;
    height: 6px;
    border-radius: var(--db-radius-pill, 999px);
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.12));
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width var(--db-transition-base, 0.25s ease);
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-bar-pos {
    background: linear-gradient(90deg, #10b981, #059669);
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-bar-neg {
    background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-group {
    margin-bottom: 14px;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-group:last-child {
    margin-bottom: 0;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--db-text-primary, var(--d3v-text-primary));
    padding: 6px 2px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-group-title i {
    color: var(--db-accent, var(--d3v-accent));
}
.d3view-dashboard-v2 .ml-curve-coefs .ml-curve-coefs-intercept-row td {
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.05));
    font-style: italic;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
}

/* -- Heatmap variant (per-output-point) -- */
.d3view-dashboard-v2 .ml-curve-coefs-heatmap {
    font-size: 11px;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap thead th {
    white-space: nowrap;
    padding: 6px 8px;
    text-align: center;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap tbody td {
    padding: 6px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap .ml-curve-coefs-target-col {
    text-align: left;
    font-weight: 600;
    color: var(--db-text-primary, var(--d3v-text-primary));
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap .ml-curve-coefs-cell-pos {
    background: rgba(16, 185, 129, var(--ml-curve-coef-alpha, 0.1));
    color: var(--d3v-status-success, #10b981);
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap .ml-curve-coefs-cell-neg {
    background: rgba(239, 68, 68, var(--ml-curve-coef-alpha, 0.1));
    color: var(--d3v-status-danger, #ef4444);
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-curve-coefs-heatmap .ml-curve-coefs-intercept {
    background: var(--db-bg-subtle, rgba(148, 163, 184, 0.08));
    font-style: italic;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
}

/* ---------- DVFIV-1992: Coefficient model tabs ---------- */
.d3view-dashboard-v2 .ml-curve-coef-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--d3v-r-full);
    font-size: 11px; font-weight: 600; cursor: pointer;
    background: var(--d3v-bg-tertiary); color: var(--d3v-text-secondary);
    border: 1px solid transparent;
    transition: all var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ml-curve-coef-tab:hover {
    background: var(--d3v-bg-hover);
}
.d3view-dashboard-v2 .ml-curve-coef-tab--active {
    background: var(--d3v-bg-primary);
    border-color: var(--tab-color, var(--d3v-accent));
    color: var(--d3v-text-primary);
    box-shadow: var(--d3v-sh-xs);
}

/* ============================================================
   Added by shashank2104 on 04/07/2026 - DW-XXXX - Curve Home v2 widgets
   ============================================================ */

/* ---------- Error heatmap ---------- */
.d3view-dashboard-v2 .ml-curve-heatmap-body { padding: 6px 8px; gap: 6px; }
.d3view-dashboard-v2 .ml-curve-heatmap-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 11px;
    color: var(--d3v-text-muted);
    padding: 2px 4px 4px;
    border-bottom: 1px dashed var(--d3v-border-light);
}
.d3view-dashboard-v2 .ml-curve-heatmap-controls {
    display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.d3view-dashboard-v2 .ml-curve-hm-select {
    font-size: 10px; padding: 2px 6px; height: 24px;
    border: 1px solid var(--d3v-border); border-radius: var(--d3v-r-sm);
    background: var(--d3v-bg-primary); color: var(--d3v-text-secondary);
    cursor: pointer; transition: border-color var(--d3v-t-fast);
}
.d3view-dashboard-v2 .ml-curve-hm-select:hover { border-color: var(--d3v-border-strong); }
.d3view-dashboard-v2 .ml-curve-hm-select:focus { border-color: var(--d3v-accent); outline: none; }
.d3view-dashboard-v2 .ml-curve-heatmap-sub { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.d3view-dashboard-v2 .ml-curve-heatmap-grid {
    display: flex; flex-direction: column; gap: 2px;
    padding: 4px 2px;
}
.d3view-dashboard-v2 .ml-curve-heatmap-cols,
.d3view-dashboard-v2 .ml-curve-heatmap-row {
    display: grid;
    grid-template-columns: 64px repeat(auto-fit, minmax(24px, 1fr));
    gap: 2px;
    align-items: center;
}
.d3view-dashboard-v2 .ml-curve-heatmap-cols { margin-bottom: 2px; }
.d3view-dashboard-v2 .ml-curve-heatmap-col {
    font-size: 9.5px;
    color: var(--d3v-text-muted);
    text-align: center;
    font-family: ui-monospace, monospace;
}
.d3view-dashboard-v2 .ml-curve-heatmap-rowlbl {
    font-size: 10px;
    color: var(--d3v-text-secondary);
    font-family: ui-monospace, monospace;
    text-align: right;
    padding-right: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/** Updated by shashank2104 on 04/10/2026 - DVFIV-1992 - Replace scale hover with outline to prevent scrollbar flicker **/
.d3view-dashboard-v2 .ml-curve-heatmap-cell {
    height: 14px;
    border-radius: 2px;
    transition: box-shadow var(--d3v-t-fast);
    cursor: default;
}
.d3view-dashboard-v2 .ml-curve-heatmap-cell:hover { box-shadow: 0 0 0 1.5px var(--d3v-text-primary); z-index: 2; }
.d3view-dashboard-v2 .ml-curve-heatmap-scale {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; color: var(--d3v-text-muted);
    padding: 4px 6px;
}
.d3view-dashboard-v2 .ml-curve-heatmap-grad {
    flex: 1; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, #dcfce7, #fef3c7, #fca5a5, #dc2626);
}
.d3view-dashboard-v2 .ml-curve-heatmap-grad--signed {
    background: linear-gradient(90deg, #3b82f6, #93c5fd, #dcfce7, #fca5a5, #dc2626);
}

/* ---------- Per-point R² ---------- */
.d3view-dashboard-v2 .ml-curve-pp-body { padding: 8px 12px; }
.d3view-dashboard-v2 .ml-curve-pp-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 6px;
    padding: 8px 4px 4px;
    border-bottom: 1px solid var(--d3v-border-light);
    min-height: 0;
}
.d3view-dashboard-v2 .ml-curve-pp-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    min-width: 0;
}
.d3view-dashboard-v2 .ml-curve-pp-fill {
    width: 100%;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
    transition: height .3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.d3view-dashboard-v2 .ml-curve-pp-neg {
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%);
    color: var(--d3v-accent-red);
    font-size: 10px;
}
.d3view-dashboard-v2 .ml-curve-pp-val {
    font-size: 9.5px;
    color: var(--d3v-text-secondary);
    font-family: ui-monospace, monospace;
    margin-top: 4px;
    white-space: nowrap;
}
.d3view-dashboard-v2 .ml-curve-pp-lbl {
    font-size: 9.5px;
    color: var(--d3v-text-muted);
    font-family: ui-monospace, monospace;
    margin-top: 2px;
}

/* ---------- CV summary ---------- */
.d3view-dashboard-v2 .ml-curve-cv-body { padding: 10px 12px; gap: 8px; }
.d3view-dashboard-v2 .ml-curve-cv-head {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--d3v-border-light);
}
.d3view-dashboard-v2 .ml-curve-cv-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border-light);
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary);
}
.d3view-dashboard-v2 .ml-curve-cv-pill i { color: var(--d3v-accent-indigo); }
.d3view-dashboard-v2 .ml-curve-cv-pill.bad {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}
.d3view-dashboard-v2 .ml-curve-cv-pill.bad i { color: #b91c1c; }
.d3view-dashboard-v2 .ml-curve-cv-list { display: flex; flex-direction: column; gap: 4px; }
.d3view-dashboard-v2 .ml-curve-cv-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light);
    border-radius: 6px;
    font-size: 11.5px;
}
.d3view-dashboard-v2 .ml-curve-cv-name { color: var(--d3v-text-secondary); }
.d3view-dashboard-v2 .ml-curve-cv-val {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--d3v-text-primary);
}
.d3view-dashboard-v2 .ml-curve-cv-val.good { color: var(--d3v-accent-green, #16a34a); }
.d3view-dashboard-v2 .ml-curve-cv-val.ok { color: var(--d3v-text-primary); }
.d3view-dashboard-v2 .ml-curve-cv-val.bad { color: var(--d3v-accent-red, #dc2626); }

/* ---------- Mean ± σ band ---------- */
.d3view-dashboard-v2 .ml-curve-band-body { padding: 8px 10px; gap: 6px; }
.d3view-dashboard-v2 .ml-curve-band-chart {
    position: relative;
    min-height: 100px;
    border: 1px solid var(--d3v-border-light);
    border-radius: 6px;
    background:
        linear-gradient(var(--d3v-bg-secondary, #f8fafc) 1px, transparent 1px) 0 0 / 100% 20px,
        linear-gradient(90deg, var(--d3v-bg-secondary, #f8fafc) 1px, transparent 1px) 0 0 / 40px 100%;
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-curve-band-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.d3view-dashboard-v2 .ml-curve-band-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 10.5px;
    color: var(--d3v-text-muted);
    padding: 4px 2px 0;
}
.d3view-dashboard-v2 .ml-curve-band-item { display: inline-flex; align-items: center; gap: 5px; }
.d3view-dashboard-v2 .ml-curve-band-item .sw {
    display: inline-block;
    width: 14px; height: 3px; border-radius: 2px;
}
.d3view-dashboard-v2 .ml-curve-band-item .sw-actual { background: #475569; }
.d3view-dashboard-v2 .ml-curve-band-item .sw-pred { background: #6366f1; }
.d3view-dashboard-v2 .ml-curve-band-item .sw-band {
    background: linear-gradient(90deg, rgba(100,116,139,.2), rgba(99,102,241,.25));
    height: 8px;
}
.d3view-dashboard-v2 .ml-curve-band-count { margin-left: auto; font-family: ui-monospace, monospace; }

/* ---------- Shape scatter ---------- */
.d3view-dashboard-v2 .ml-curve-shape-body { padding: 8px 10px; gap: 6px; }
.d3view-dashboard-v2 .ml-curve-shape-head {
    gap: 8px;
    padding-bottom: 4px;
}
.d3view-dashboard-v2 .ml-curve-shape-head .ml-curve-select { min-width: 140px; }
.d3view-dashboard-v2 .ml-curve-shape-chart {
    position: relative;
    min-height: 100px;
    border: 1px solid var(--d3v-border-light);
    border-radius: 6px;
    background:
        linear-gradient(var(--d3v-bg-secondary, #f8fafc) 1px, transparent 1px) 0 0 / 100% 24px,
        linear-gradient(90deg, var(--d3v-bg-secondary, #f8fafc) 1px, transparent 1px) 0 0 / 32px 100%;
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-curve-shape-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   DVFIV-1992: Gallery viewType (best-first small multiples)
   ============================================================ */
.d3view-dashboard-v2 .ml-curve-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.d3view-dashboard-v2 .ml-curve-gallery-cell {
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 130px;
    transition: var(--d3v-t-fast, all .12s ease);
    position: relative;
}
.d3view-dashboard-v2 .ml-curve-gallery-cell:hover {
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,.08));
    border-color: var(--d3v-border-medium, rgba(0,0,0,.14));
}
/** Added by shashank2104 on 04/14/2026 - DVFIV-1992 - gallery enlarge button **/
.d3view-dashboard-v2 .ml-curve-gallery-enlarge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,.06));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    transition: var(--d3v-t-fast, all .12s ease);
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
}
.d3view-dashboard-v2 .ml-curve-gallery-cell:hover .ml-curve-gallery-enlarge {
    opacity: 1;
}
.d3view-dashboard-v2 .ml-curve-gallery-enlarge:hover {
    background: var(--d3v-accent-blue, #3b82f6);
    color: #fff;
    border-color: var(--d3v-accent-blue, #3b82f6);
}
/** Added by shashank2104 on 04/14/2026 - DVFIV-1992 - in-place gallery enlarge **/
.d3view-dashboard-v2 .ml-curve-gallery-enlarged {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .2s ease, transform .2s ease;
}
.d3view-dashboard-v2 .ml-curve-gallery-enlarged--visible {
    opacity: 1;
    transform: scale(1);
}
.d3view-dashboard-v2 .ml-curve-gallery-enlarged-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-curve-gallery-enlarged-title {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
}
.d3view-dashboard-v2 .ml-curve-gallery-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
    background: var(--d3v-bg-primary, #fff);
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .12s ease);
}
.d3view-dashboard-v2 .ml-curve-gallery-back:hover {
    border-color: var(--d3v-accent-blue, #3b82f6);
    color: var(--d3v-accent-blue, #3b82f6);
}
.d3view-dashboard-v2 .ml-curve-gallery-enlarged-plot {
    flex: 1;
    min-height: 0;
    position: relative;
}

.d3view-dashboard-v2 .ml-curve-gallery-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--d3v-border-light, rgba(0,0,0,.08));
}
.d3view-dashboard-v2 .ml-curve-gallery-plot {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* ============================================================
   DVFIV-1992: 3D Error Terrain viewType
   ============================================================ */
.d3view-dashboard-v2 .ml-curve-terrain-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--d3v-r-md, 8px);
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1992 - Point-drill toggle pill **/
.d3view-dashboard-v2 .ml-curve-drill-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-light, #e4e9f0);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #5b6878);
    transition: box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.d3view-dashboard-v2 .ml-curve-drill-pill:hover {
    border-color: #cdd6e3;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(20, 30, 50, .04));
}
.d3view-dashboard-v2 .ml-curve-drill-pill .ml-curve-drill-sw {
    width: 24px;
    height: 14px;
    background: #cfd6e1;
    border-radius: 999px;
    position: relative;
    transition: background 160ms ease;
}
.d3view-dashboard-v2 .ml-curve-drill-pill .ml-curve-drill-sw::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: left 160ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.d3view-dashboard-v2 .ml-curve-drill-pill.ml-curve-drill-on {
    background: var(--d3v-accent-soft, #e7eeff);
    border-color: #c4d4f8;
    color: var(--d3v-accent, #3b6df0);
}
.d3view-dashboard-v2 .ml-curve-drill-pill.ml-curve-drill-on .ml-curve-drill-sw {
    background: var(--d3v-accent, #3b6df0);
}
.d3view-dashboard-v2 .ml-curve-drill-pill.ml-curve-drill-on .ml-curve-drill-sw::after {
    left: 12px;
}
.d3view-dashboard-v2 .ml-curve-drill-pill .ml-curve-drill-idx {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    padding: 1px 6px;
    background: var(--d3v-accent, #3b6df0);
    color: #fff;
    border-radius: 999px;
}

/** Widget dim state when drill is active and widget is N/A (e.g. CV summary) **/
.d3view-dashboard-v2 .db-widget.ml-curve-drill-dimmed {
    opacity: .55;
    transition: opacity 200ms ease;
}

/** 3D surface: drill-indicator replacing the curve point dropdown **/
.d3view-dashboard-v2 .ml-inv-3d-drill-ind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    background: var(--d3v-accent-soft, #e7eeff);
    color: var(--d3v-accent, #3b6df0);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-inv-3d-drill-ind em {
    font-style: normal;
    font-weight: 500;
    opacity: .75;
}

/** Drill column highlight — heatmap **/
.d3view-dashboard-v2 .ml-curve-heatmap-cell.drill-col {
    outline: 2px solid var(--d3v-accent, #3b6df0);
    outline-offset: -2px;
    z-index: 2;
    position: relative;
}
.d3view-dashboard-v2 .ml-curve-heatmap-col.drill-col {
    color: var(--d3v-accent, #3b6df0);
    font-weight: 600;
}

/** Drill point highlight — per-point R² bar **/
.d3view-dashboard-v2 .ml-curve-pp-chart rect.bar.drill-hl,
.d3view-dashboard-v2 .ml-curve-pp-chart .bar.drill-hl {
    fill: var(--d3v-accent, #3b6df0) !important;
}

/** Drill marker — mean-band curve **/
.d3view-dashboard-v2 circle.ml-curve-mean-band-marker {
    fill: var(--d3v-accent, #3b6df0);
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 2px 4px rgba(59, 109, 240, .35));
}

/** Drill row highlight — prediction scores table **/
.d3view-dashboard-v2 tr.ml-curve-scores-row.drill-hl td {
    background: var(--d3v-accent-soft, #e7eeff);
    color: var(--d3v-accent, #3b6df0);
    font-weight: 600;
}

/** Drill point — residuals scatter **/
.d3view-dashboard-v2 circle.drill-hl {
    stroke: var(--d3v-accent, #3b6df0);
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 4px rgba(59, 109, 240, .35));
}

/** Added by shashank2104 on 2026-04-15 - DVFIV-1992 - Stacked-bar overlay on curves view
 *  Newton exposes the caller-owned overlay group; these styles decorate the SVG the
 *  widget paints into it. Transitions keep hover → leave → pin from feeling abrupt. **/
.d3view-dashboard-v2 .point-hover-overlay g.ml-curve-hover,
.d3view-dashboard-v2 .point-hover-overlay g.ml-curve-pin {
    transition: opacity 120ms cubic-bezier(.4, 0, .2, 1);
}
.d3view-dashboard-v2 .point-hover-overlay g.ml-curve-hover { opacity: 0.96; }
.d3view-dashboard-v2 .point-hover-overlay g.ml-curve-pin   { opacity: 1; }

.d3view-dashboard-v2 .point-hover-overlay .ml-curve-overlay-card {
    transition: stroke 120ms cubic-bezier(.4, 0, .2, 1);
}
.d3view-dashboard-v2 .point-hover-overlay .ml-curve-overlay-seg {
    shape-rendering: crispEdges;
}
.d3view-dashboard-v2 .point-hover-overlay line.ml-curve-pin-x {
    pointer-events: none;
}

/** Keep Newton's point-select anchors slightly more prominent when drill is active
 *  so users notice they're interactive before hovering. **/
.d3view-dashboard-v2 .ml-curve-canvas .point-select-overlay circle {
    transition: r 120ms cubic-bezier(.4, 0, .2, 1), stroke-width 120ms cubic-bezier(.4, 0, .2, 1);
}

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - Pulsing halo around clicked point.
 *  Drawn by _drawPointHighlight on pin; cleared by _clearPinnedBar. SMIL would be simpler
 *  but CSS keyframes on SVG work everywhere we ship. **/
.d3view-dashboard-v2 .point-hover-overlay circle.ml-curve-point-halo {
    animation: ml-curve-point-halo-pulse 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes ml-curve-point-halo-pulse {
    0%   { r: 6;  stroke-opacity: 0.85; stroke-width: 2; }
    60%  { r: 18; stroke-opacity: 0.05; stroke-width: 1; }
    100% { r: 18; stroke-opacity: 0;    stroke-width: 1; }
}

/* DVFIV-1997: 3D Ribbons side legend
 * Right-side panel paired with the 3D viz wrap inside .ml-curve-terrain-body.
 * Lists "Actual" reference, models sorted best→worst with err values, and a
 * green→red gradient legend tying tube/ribbon/band colors together. */
.d3view-dashboard-v2 .ml-curve-terrain-legend {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    background: var(--d3v-bg-primary, #ffffff);
    overflow-y: auto;
    padding: 0;
}
.d3view-dashboard-v2 .ml-3d-legend-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    font-size: 11px;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-dashboard-v2 .ml-3d-legend-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.d3view-dashboard-v2 .ml-3d-legend-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d3v-text-muted, #64748b);
    margin-bottom: 2px;
}
.d3view-dashboard-v2 .ml-3d-legend-section-hint {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
    color: var(--d3v-text-subtle, #94a3b8);
}
.d3view-dashboard-v2 .ml-3d-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    transition: background 120ms cubic-bezier(.4, 0, .2, 1),
                opacity 120ms cubic-bezier(.4, 0, .2, 1);
}
.d3view-dashboard-v2 .ml-3d-legend-row:hover {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04));
}
.d3view-dashboard-v2 .ml-3d-legend-row--dim {
    opacity: 0.35;
}
.d3view-dashboard-v2 .ml-3d-legend-swatch {
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.d3view-dashboard-v2 .ml-3d-legend-swatch--actual {
    background: #0f172a;
    border-color: #0f172a;
}
.d3view-dashboard-v2 .ml-3d-legend-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.d3view-dashboard-v2 .ml-3d-legend-err {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--d3v-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-3d-legend-row--actual .ml-3d-legend-name {
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-3d-legend-scale .ml-3d-legend-gradient {
    height: 8px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid rgba(15, 23, 42, 0.1);
}
.d3view-dashboard-v2 .ml-3d-legend-scale .ml-3d-legend-gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--d3v-text-muted, #64748b);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-3d-legend-toggles {
    gap: 6px;
}
.d3view-dashboard-v2 .ml-3d-legend-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin: 0;
    border-radius: var(--d3v-r-sm, 4px);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-primary, #0f172a);
    transition: background 120ms cubic-bezier(.4, 0, .2, 1);
}
.d3view-dashboard-v2 .ml-3d-legend-toggle:hover {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04));
}
.d3view-dashboard-v2 .ml-3d-legend-toggle input[type="checkbox"] {
    margin: 0;
    width: 13px;
    height: 13px;
    accent-color: var(--d3v-accent-primary, #3b82f6);
    cursor: pointer;
}

/** ───────────────────────────────────────────────────────────────
 *  Added by shashank2104 on 2026-04-16 - DVFIV-2000 - 3D surface widget
 *  left control sidebar. Body reuses `.ml-inv-config-sidebar .ml-inv-ctrl-*`
 *  and `.ml-inv-model-card` classes from d3viewdashboard-v2-33-ml-investigation.css
 *  — this file only carries the outer layout/rail/toggle chrome.
 *  ─────────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-inv-3d-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: 100%;
    min-height: 0;
}

/** Added by shashank2104 on 2026-07-15 - R2026-38 - sidebar-on-the-right modifier (new default). DOM
 *  order stays sidebar-then-canvas (collapse/rail logic, the ui-selectable point picker, and the canvas
 *  mount order all depend on it) — `row-reverse` only flips the VISUAL order, placing the sidebar on
 *  the right edge and the chart on the left. **/
.d3view-dashboard-v2 .ml-inv-3d-layout.ml-inv-3d-layout--right {
    flex-direction: row-reverse;
}

/** Our width + border + background win over ml-inv-config-sidebar via the
 *  `.d3view-dashboard-v2` prefix (specificity 0,2,0 vs 0,1,0). **/
.d3view-dashboard-v2 .ml-inv-3d-sidebar {
    position: relative;
    /* R2026-38 - shared ML control-sidebar width (was a local 280px). */
    flex: 0 0 var(--db-ml-sidebar-w, 260px);
    width: var(--db-ml-sidebar-w, 260px);
    min-width: var(--db-ml-sidebar-w, 260px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .08));
    border-left: 0;
    background: var(--d3v-bg-primary, #fff);
    transition: flex-basis 220ms cubic-bezier(.4, 0, .2, 1),
                width       220ms cubic-bezier(.4, 0, .2, 1),
                min-width   220ms cubic-bezier(.4, 0, .2, 1);
    min-height: 0;
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-3d-sidebar.ml-inv-3d-sidebar--rail {
    flex: 0 0 var(--db-ml-sidebar-rail-w, 28px);
    width: var(--db-ml-sidebar-rail-w, 28px);
    min-width: var(--db-ml-sidebar-rail-w, 28px);
    background: var(--d3v-bg-subtle, #f8fafc);
}

/** Collapse/expand toggle sitting on the sidebar's trailing edge **/
.d3view-dashboard-v2 .ml-inv-3d-sidebar-toggle {
    position: absolute;
    top: 8px;
    right: -10px;
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .12));
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #475569);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    transition: background 160ms, color 160ms, transform 160ms;
}
.d3view-dashboard-v2 .ml-inv-3d-sidebar--rail .ml-inv-3d-sidebar-toggle {
    right: 4px;
}
.d3view-dashboard-v2 .ml-inv-3d-sidebar-toggle:hover {
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    border-color: var(--d3v-accent, #3b82f6);
    transform: scale(1.1);
}

/** Added by shashank2104 on 2026-07-15 - R2026-38 - right-mounted sidebar mirror. The default
 *  left mount puts the divider + toggle on the sidebar's RIGHT edge (the seam against the canvas
 *  on its right); mirrored here so the right mount puts them on the sidebar's LEFT edge (the seam
 *  against the canvas, now on its left) instead of leaving a divider/button floating on the
 *  wrong, outward-facing edge. **/
.d3view-dashboard-v2 .ml-inv-3d-layout--right .ml-inv-3d-sidebar {
    border-right: 0;
    border-left: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .08));
}
.d3view-dashboard-v2 .ml-inv-3d-layout--right .ml-inv-3d-sidebar-toggle {
    right: auto;
    left: -10px;
}
.d3view-dashboard-v2 .ml-inv-3d-layout--right .ml-inv-3d-sidebar--rail .ml-inv-3d-sidebar-toggle {
    right: auto;
    left: 4px;
}

/** Make the Z points section fill remaining height so the card list scrolls **/
.d3view-dashboard-v2 .ml-inv-3d-sidebar .ml-inv-3d-points-section {
    flex: 1 1 auto;
    min-height: 0;
}

/** Select-all / Clear action row (Bootstrap btn classes on the buttons) **/
.d3view-dashboard-v2 .ml-inv-3d-points-actions {
    display: flex;
    gap: 6px;
}
.d3view-dashboard-v2 .ml-inv-3d-points-actions .btn {
    flex: 1 1 auto;
}

/** Scrollable tile list (tiles themselves use .ml-inv-model-card styling).
 *  $.fn.selectable needs a positioned parent so the rubber-band lasso paints
 *  inside this container, not the page. **/
.d3view-dashboard-v2 .ml-inv-3d-point-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
    position: relative;
    user-select: none;
}

/** Apply button sits full-width under the tile list **/
.d3view-dashboard-v2 .ml-inv-3d-points-apply {
    width: 100%;
    margin-top: 4px;
}

.d3view-dashboard-v2 .ml-inv-3d-sidebar-hint {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-style: italic;
}

.d3view-dashboard-v2 .ml-inv-3d-sidebar-target {
    padding: 6px 10px;
    background: var(--d3v-bg-subtle, #f1f5f9);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/** Point-color legend on the canvas overlay **/
.d3view-dashboard-v2 .ml-3d-surface-legend--points {
    top: 10px;
    right: 10px;
    left: auto;
    max-height: calc(100% - 20px);
    overflow-y: auto;
}
.d3view-dashboard-v2 .ml-3d-surface-legend--models {
    top: 10px;
    left: 10px;
    right: auto;
}
.d3view-dashboard-v2 .ml-3d-surface-legend-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
    margin-bottom: 4px;
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Drill bar hover outline (clickable cue).
 *  Updated by shashank2104 on 2026-04-18 - DVFIV-2002 - Dropped the total-error selector since
 *  that chart uses hBarChart's built-in tooltip (custom hover was removed). */
.d3view-dashboard-v2 .ml-drill-bar-host svg rect.is-hover {
    stroke: var(--d3v-accent, #3b82f6);
    stroke-width: 2px;
    filter: brightness(1.08);
}

/** Added by shashank2104 on 2026-04-20 - DVFIV-2002 - Drill-point sidebar DUAL layout.
 *  Replaces the 3-way header viewTypes toggle (Table / Horizontal Bar / Metamodel) with a
 *  stacked two-section body: top section has an internal Table ↔ Bar btn-group; bottom
 *  section shows the Metamodel prediction surface directly.
 *
 *  IMPORTANT: Plugins.Helpers.RightSidebar appends `.pl-sidebar` to `<body>`, NOT to
 *  `.d3view-dashboard-v2`. All rules below must scope via `.pl-sidebar.ml-curve-point-sidebar-dual`
 *  (or descendants) — NOT via the dashboard root. */
.pl-sidebar.ml-curve-point-sidebar-dual .pl-sidebar-body {
    padding: 12px 14px;
    gap: 0;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-section {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #ffffff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-section--top {
    flex: 0 0 auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-section--bottom {
    flex: 0 0 auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-secondary, #f8fafc);
    flex: 0 0 auto;
    min-height: 42px;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--d3v-text-primary, #1e293b);
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-title > i {
    color: var(--d3v-text-muted, #64748b);
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    margin-left: auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-toggle .btn {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    letter-spacing: 0.02em;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-toggle .btn > i {
    font-size: 11px;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-top-body {
    padding: 10px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-top-body > .pl-vt-pane {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-dual-bottom-body {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    flex: 0 0 auto;
}
/** Fixed heights on the chart hosts — `.full-h` / `.d3view-viz` children use
 *  `height: 100%`, which resolves only against an explicit parent height. */
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-pop-bar {
    height: 300px;
    flex: 0 0 auto;
}
.pl-sidebar.ml-curve-point-sidebar-dual .ml-curve-point-pop-3d {
    height: 300px;
    flex: 0 0 auto;
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Drill-point Table pane header chip
 *  carrying the Actual reference Y value (moved out of the "Error" column). */
.d3view-dashboard-v2 .ml-curve-point-sidebar .ml-curve-point-table-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.d3view-dashboard-v2 .ml-curve-point-table-head-actual {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-secondary, #f8fafc);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-curve-point-table-head-actual .ml-pt-head-lbl {
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-dashboard-v2 .ml-curve-point-table-head-actual b {
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 700;
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 - Terrain left collapsible settings sidebar
 *  (mirrors WidgetML3DSurfaceView pattern). Hosts Error Band / Vertical Bands / Color By Error. */
.d3view-dashboard-v2 .ml-terrain-sidebar {
    flex: 0 0 230px;
    background: var(--d3v-bg-primary, #ffffff);
    border-right: 1px solid var(--d3v-border, #e2e8f0);
    padding: 12px 0 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: 260px;
}
.d3view-dashboard-v2 .ml-terrain-layout.is-collapsed .ml-terrain-sidebar {
    flex: 0 0 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
}
.d3view-dashboard-v2 .ml-terrain-layout.is-collapsed .ml-curve-terrain-wrap {
    flex: 1 1 100%;
}
.d3view-dashboard-v2 .ml-terrain-sidebar .ml-inv-3d-sidebar-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--d3v-text-muted, #64748b);
    transition: var(--d3v-t-fast, 0.15s ease);
    z-index: 2;
}
.d3view-dashboard-v2 .ml-terrain-sidebar .ml-inv-3d-sidebar-toggle:hover {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .ml-terrain-sidebar .ml-inv-ctrl-section {
    margin-top: 32px;
    padding: 0 4px;
}
.d3view-dashboard-v2 .ml-terrain-sidebar .ml-inv-ctrl-section-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
}
/* DVFIV-2002 — terrain sidebar rows: "Label ........ [ On/Off ]" */
.d3view-dashboard-v2 .ml-terrain-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 6px;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: var(--d3v-r-md, 8px);
    transition: background var(--d3v-t-fast, 0.15s ease);
}
.d3view-dashboard-v2 .ml-terrain-row:hover {
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-dashboard-v2 .ml-terrain-row-lbl {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    user-select: none;
}
.d3view-dashboard-v2 .ml-terrain-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 26px;
    padding: 0 12px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--d3v-r-full, 999px);
    border: 1px solid var(--d3v-border, #e2e8f0);
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-muted, #64748b);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: background var(--d3v-t-fast, 0.15s ease),
                color var(--d3v-t-fast, 0.15s ease),
                border-color var(--d3v-t-fast, 0.15s ease),
                box-shadow var(--d3v-t-fast, 0.15s ease),
                transform var(--d3v-t-fast, 0.15s ease);
}
.d3view-dashboard-v2 .ml-terrain-row-btn:hover {
    border-color: var(--d3v-border-strong, #cbd5e1);
    color: var(--d3v-text-primary, #1e293b);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.d3view-dashboard-v2 .ml-terrain-row-btn:active {
    transform: translateY(1px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}
/* ON state — filled with accent */
.d3view-dashboard-v2 .ml-terrain-row-btn.is-on {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}
.d3view-dashboard-v2 .ml-terrain-row-btn.is-on:hover {
    background: var(--d3v-accent-hover, #2563eb);
    border-color: var(--d3v-accent-hover, #2563eb);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.d3view-dashboard-v2 .ml-terrain-row-btn:focus-visible {
    outline: 2px solid var(--d3v-accent, #3b82f6);
    outline-offset: 2px;
}
.d3view-dashboard-v2 .ml-terrain-layout.is-collapsed .ml-terrain-sidebar .ml-inv-ctrl-section {
    display: none;
}

/* ============================================================
   Added by shashank2104 on 2026-07-17 - R2026-47 (Batch B) - Curve legends
   1.12 compact legends in small containers, 1.14 shared page-level legend,
   1.6 curve/target chooser. Scoped to curve viz surfaces so ONLY the ML
   curve widgets + the prediction curve row are affected.
   ============================================================ */

/* -- 1.12 Compact Newton color legend inside small curve containers -------
   Newton renders its legend as `.legends-wrapper > .legends-body > ul.legends-list
   > li.legend-item` inside the viz element. Densify it so it fits narrow widgets
   and the per-target prediction panels without stealing the plot area. */
.d3view-dashboard-v2 .ml-curve-canvas .legends-wrapper,
.d3view-dashboard-v2 .ml-curve-band-canvas .legends-wrapper,
.d3view-dashboard-v2 .curve-viz .legends-wrapper,
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-wrapper {
    font-size: 10px;
    line-height: 1.25;
}
.d3view-dashboard-v2 .ml-curve-canvas .legends-list li.legend-item,
.d3view-dashboard-v2 .ml-curve-band-canvas .legends-list li.legend-item,
.d3view-dashboard-v2 .curve-viz .legends-list li.legend-item,
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-list li.legend-item {
    margin: 1px 6px 1px 0;
    padding: 1px 2px;
}
.d3view-dashboard-v2 .ml-curve-canvas .legends-list li.legend-item span.curve-name,
.d3view-dashboard-v2 .ml-curve-band-canvas .legends-list li.legend-item span.curve-name,
.d3view-dashboard-v2 .curve-viz .legends-list li.legend-item span.curve-name,
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-list li.legend-item span.curve-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Shrink the legend swatch line/marker so rows pack tighter. */
.d3view-dashboard-v2 .ml-curve-canvas .legends-list li.legend-item svg.legend-line,
.d3view-dashboard-v2 .ml-curve-band-canvas .legends-list li.legend-item svg.legend-line,
.d3view-dashboard-v2 .curve-viz .legends-list li.legend-item svg.legend-line,
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-list li.legend-item svg.legend-line {
    width: 16px;
}

/* -- 1.6 Curve/target chooser toolbar ------------------------------------ */
.d3view-dashboard-v2 .ml-multi-curves-wrap {
    min-height: 0;
}
.d3view-dashboard-v2 .ml-mc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-mc-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
}
.d3view-dashboard-v2 .ml-mc-toolbar-label i {
    color: var(--db-accent, var(--d3v-accent));
}
.d3view-dashboard-v2 .ml-mc-choice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--d3v-r-full, 999px);
    border: 1px solid var(--db-border, var(--d3v-border));
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    color: var(--db-text-secondary, var(--d3v-text-secondary));
    cursor: pointer;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}
.d3view-dashboard-v2 .ml-mc-choice i {
    font-size: 9px;
    opacity: 0;
    transition: var(--db-transition-fast, var(--d3v-t-fast));
}
.d3view-dashboard-v2 .ml-mc-choice:hover {
    border-color: var(--db-border-strong, var(--d3v-border-strong));
    color: var(--db-text-primary, var(--d3v-text-primary));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
}
.d3view-dashboard-v2 .ml-mc-choice:focus-visible {
    outline: none;
    border-color: var(--db-accent, var(--d3v-accent));
    box-shadow: 0 0 0 3px var(--db-accent-soft, rgba(99, 102, 241, 0.15));
}
.d3view-dashboard-v2 .ml-mc-choice.is-active {
    background: var(--db-accent-soft, rgba(99, 102, 241, 0.12));
    border-color: var(--db-accent, var(--d3v-accent));
    color: var(--db-accent, var(--d3v-accent));
}
.d3view-dashboard-v2 .ml-mc-choice.is-active i {
    opacity: 1;
}

/* -- 1.14 Shared page-level legend strip above the curve row ------------- */
/* Updated by shashank2104 on 2026-07-17 - R2026-47 - render it as a proper full-width
   legend bar (was a tiny auto-width blob floating centered, which read as broken). */
.d3view-dashboard-v2 .ml-multi-curves-legend {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 10px;
    margin-bottom: 4px;
    min-height: 0;
    background: var(--db-bg-subtle, var(--d3v-bg-secondary));
    border: 1px solid var(--db-border, var(--d3v-border));
    border-radius: var(--d3v-r-md, 6px);
}
.d3view-dashboard-v2 .ml-multi-curves-legend:empty {
    display: none;
}
/* The lifted donor legend keeps Newton's markup; neutralise absolute
   positioning + let it span the full strip width. */
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-wrapper {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
}
.d3view-dashboard-v2 .ml-multi-curves-legend .legends-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 14px;
}

/* ── Added by shashank2104 on 2026-07-17 - R2026-47 - Prediction curve-panel polish ─── */

/* #3 - Even panel tiling. The per-target curve panels were flex:1 0 33% + full-h, so
   wrapping into 2+ rows left uneven gaps and blank space after removing a curve or
   re-predicting. A grid with equal auto-rows tiles N panels cleanly and shares the
   height across rows, so there is never a dangling empty row/column. */
.d3view-dashboard-v2 .ml-multi-curves {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    align-content: stretch;
    overflow: auto;
    min-height: 0;
}
.d3view-dashboard-v2 .ml-multi-curves > [data-curve-by] {
    margin: 0 !important;   /* the grid gap handles spacing; drop the inline 5px margin */
    min-width: 0;
    min-height: 0;
}

/* #4 - Keep Newton's per-panel simple-settings header out of the way in the prediction
   curve panels: collapse it (reclaiming vertical space) and reveal it as a top overlay
   on hover, so the controls stay reachable without permanently eating the plot area. */
.d3view-dashboard-v2 .curve-viz .d3view-newton,
.d3view-dashboard-v2 .pred-chart .d3view-newton {
    position: relative;
}
.d3view-dashboard-v2 .curve-viz .d3view-newton .newton-simple-settings-header,
.d3view-dashboard-v2 .pred-chart .d3view-newton .newton-simple-settings-header {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.d3view-dashboard-v2 .curve-viz .d3view-newton:hover .newton-simple-settings-header,
.d3view-dashboard-v2 .pred-chart .d3view-newton:hover .newton-simple-settings-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 6;
    max-height: none;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    background: var(--db-bg-surface, var(--d3v-bg-primary));
    box-shadow: var(--db-shadow-sm, var(--d3v-sh-sm));
    border-radius: var(--d3v-r-sm, 4px);
}


/* ── Modern footer ─────────────────────────────────────────── */
.d3view-dashboard-v2 .db-widget-footer.db-widget-footer-modern {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--db-border, var(--d3v-border-primary, #e2e8f0));
    background: var(--db-bg-soft, var(--d3v-bg-secondary, #f8fafc));
}

.d3view-dashboard-v2 .db-widget-footer-modern .db-widget-footer-desc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--db-text-muted, var(--d3v-text-secondary, #64748b));
    font-style: italic;
    align-self: flex-start;
}

.d3view-dashboard-v2 .db-widget-footer-modern .db-widget-footer-desc i.fa {
    color: var(--db-brand, var(--d3v-accent-primary, #3b82f6));
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.d3view-dashboard-v2 .db-widget-footer-modern .db-widget-footer-desc-text {
    flex: 1;
}

.d3view-dashboard-v2 .db-widget-footer-modern .db-widget-footer-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
}

.d3view-dashboard-v2 .db-widget-footer-modern .db-widget-footer-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Widget body padding (Item 6) ──────────────────────────── */
/* .d3view-dashboard-v2 .db-widget-card[data-category="ml-investigation"] .db-widget-body-content {
    padding: 16px 18px 14px;
} */

/* Added by shashank2104 on 2026-07-15 - R2026-38 - The Predict widget is not a card of content, it is a
   full app (its own rails, header and canvas) mounted in the slot - so it goes edge to edge. It already
   asks for padding:0 in -33-ml-investigation.css, but the category rule above matches at the same
   specificity from a later file and won. Restated here to settle it where the conflict is. */
/* .d3view-dashboard-v2 .db-widget-card[data-category="ml-investigation"].db-widget-type-ml-predict-classic .db-widget-body-content {
    padding: 0;
}

.d3view-dashboard-v2 .db-widget-card[data-category="ml-investigation"] .db-widget-header {
    padding-left: 16px;
    padding-right: 16px;
} */
 .d3view-dashboard-v2 .db-widget-card[data-category="ml-investigation"].db-widget-type-ml-model-summary {
    border: none!important;
 }

/* ── Ranking table pills (Item 4) ──────────────────────────── */
/** Updated by shashank2104 on 2026-04-16 - DVFIV-2000 - explicit row-gap + align-items so
 *  multi-row chip wrapping lays out cleanly (no cropping across rows). **/
.d3view-dashboard-v2 .ml-inv-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
    align-items: center;
    padding: 2px 0;
    white-space: normal;
}

.d3view-dashboard-v2 .ml-inv-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border-primary, #e2e8f0);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.d3view-dashboard-v2 .ml-inv-pill:hover {
    background: var(--d3v-bg-elevated, #ffffff);
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}

.d3view-dashboard-v2 .ml-inv-pill.is-target {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.30);
    color: var(--d3v-status-success, #10b981);
}

.d3view-dashboard-v2 .ml-inv-pill.is-target:hover {
    border-color: var(--d3v-status-success, #10b981);
}

.d3view-dashboard-v2 .ml-inv-pill > i.fa,
.d3view-dashboard-v2 .ml-inv-pill > i.glyphicon {
    font-size: 10px;
    opacity: 0.85;
}

/* ── Curve group chip (compact representation of XX_0..XX_9 etc.) ── */
.d3view-dashboard-v2 .ml-inv-pill-curve-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    font-size: 10.5px;
    font-weight: 600;
    color: #6366f1;
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.12s) ease;
    user-select: none;
}
.d3view-dashboard-v2 .ml-inv-pill-curve-group:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}
.d3view-dashboard-v2 .ml-inv-pill-curve-group.is-target {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--d3v-status-success, #10b981);
}
.d3view-dashboard-v2 .ml-inv-pill-curve-group.is-target:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--d3v-status-success, #10b981);
}
.d3view-dashboard-v2 .ml-inv-pill-curve-group > i.fa {
    font-size: 10px;
    opacity: 0.8;
}
.ml-inv-pill-curve-count {
    background: rgba(255,255,255,0.6);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 0 4px;
    font-size: 9.5px;
    font-weight: 700;
    opacity: 0.85;
}

/** Removed by shashank2104 on 2026-04-16 - DVFIV-2000 - ml-inv-pill-overflow + ml-inv-pill-more
 *  styles removed; chips now wrap naturally across rows without "+N more" cap. **/

/* ── Curve group sidebar — Newton overlay with per-x variance box plots ──
 *  Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - removed the separate
 *  per-column boxplot scroll section (.ml-inv-group-scroll-body and
 *  .ml-inv-group-boxplot-card/-label/-chart/-stats). Newton's built-in
 *  variancePoints now draws a box plot per x-column directly on the overlay. */

/** Updated by shashank2104 on 2026-04-16 - DVFIV-2000 - host now mounts a Newton curveplot
 *  (migrated from hand-rolled SVG). Newton needs an explicit height to render.
 *  Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - host grows vertically now that it's
 *  the only visual in the sidebar body (replaces prior 200px fixed height). */
.ml-inv-curve-overlay-host {
    position: relative;
    width: 100%;
    /* Larger height now that this is the sole visual in the sidebar body — more
       room for per-x variance box plots to breathe. */
    flex: 1 1 auto;
    min-height: 260px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}
.ml-inv-curve-overlay-host > * { width: 100%; height: 100%; }

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - Mean Curve Error cell + drilldown popover. **/
.d3view-dashboard-v2 .ml-inv-mean-err-drill {
    width: 24px;
    height: 24px;
    border-radius: var(--d3v-r-sm, 6px);
    border: 1px solid var(--d3v-border-primary, #e2e8f0);
    background: var(--d3v-bg-primary, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.d3view-dashboard-v2 .ml-inv-mean-err-drill:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--d3v-accent-primary, #3b82f6);
    border-color: var(--d3v-accent-primary, #3b82f6);
}

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - % Error cell.
 *  Two-row stat: prominent mean on top, min/max/σ chips on bottom. */
.d3view-dashboard-v2 .ml-inv-err-pct-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
    line-height: 1.2;
}
.d3view-dashboard-v2 .ml-inv-err-pct-mean {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .ml-inv-err-pct-mean.is-best {
    color: var(--d3v-status-success, #10b981);
}
.d3view-dashboard-v2 .ml-inv-err-pct-mean .fa-check-circle {
    color: var(--d3v-status-success, #10b981);
    font-size: 11px;
}
/* Drill button inside the % Error cell — sits to the right of the mean value */
.d3view-dashboard-v2 .ml-inv-err-pct-mean .ml-inv-mean-err-drill {
    margin-left: auto;
    width: 22px;
    height: 22px;
}
.d3view-dashboard-v2 .ml-inv-err-pct-stats {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.d3view-dashboard-v2 .ml-inv-err-pct-stats .stat {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 1px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .ml-inv-err-pct-stats .stat:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    border-color: var(--d3v-border-strong, #cbd5e1);
}
.d3view-dashboard-v2 .ml-inv-err-pct-stats .stat .lbl {
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.d3view-dashboard-v2 .ml-inv-err-pct-stats .stat .num {
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
}

/* Drilldown popover bars */
.ml-inv-err-drill-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 4px;
    padding-right: 2px;
}
.ml-inv-err-drill-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.ml-inv-err-drill-bar:hover {
    background: var(--d3v-bg-secondary, #f1f5f9);
}
.ml-inv-err-drill-bar.selected {
    background: rgba(59, 130, 246, 0.08);
}
.ml-inv-err-drill-bar.selected .lbl {
    color: var(--d3v-accent-primary, #3b82f6);
    font-weight: 600;
}
.ml-inv-err-drill-bar .lbl {
    width: 90px;
    color: var(--d3v-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ml-inv-err-drill-bar .track {
    flex: 1;
    height: 10px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}
.ml-inv-err-drill-bar .fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #93b8ff, var(--d3v-accent-primary, #3b82f6));
    transition: width 0.2s ease;
}
.ml-inv-err-drill-bar .val {
    font-size: 10.5px;
    color: var(--d3v-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}

/* Selected record curve preview inside the drilldown popover */
.ml-inv-err-curve-title {
    margin-top: 14px !important;
}
/** Updated by shashank2104 on 2026-04-16 - DVFIV-2000 - host now mounts a Newton curveplot
 *  (not inline SVG), so explicit height is required. Newton populates the container. **/
.ml-inv-err-curve-host {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}
.ml-inv-err-curve-host > * { width: 100%; height: 100%; }

/** Added by shashank2104 on 2026-04-16 - DVFIV-2000 - Point-click popover (actual-vs-predicted).
 *  Bar viewType uses inline SVG; 3D Surface viewType hosts a Viz.ScatterPlot3d instance. */
.ml-curve-point-pop-bar {
    width: 100%;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-soft, #eef1f6);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 6px 4px;
}
.ml-curve-point-pop-bar svg { display: block; }

/** Updated by shashank2104 on 2026-04-16 - DVFIV-2000 - Plain white background for the popover's
 *  3D surface host (was a dark-blue gradient — too heavy inside a popover and competed with the
 *  surface colors). Loading overlay text flipped to dark so it reads on white. */
.ml-curve-point-pop-3d {
    background: var(--d3v-bg-primary, #ffffff);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}
.ml-curve-point-pop-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.ml-curve-point-pop-3d-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    gap: 6px;
}
.ml-curve-point-pop-3d-loading i { margin-right: 4px; }

/** Removed by shashank2104 on 2026-04-17 - DVFIV-2002 - .ml-inv-group-boxplot-card,
 *  -label, -chart, -stats styles removed; per-column box plots are now rendered by
 *  Newton's variancePoints directly on the curve overlay. */

/* ── Pill popover (Item 4) ─────────────────────────────────── */
.ml-inv-pill-popover {
    position: fixed;
    z-index: 10010;
    min-width: 260px;
    max-width: 360px;
    background: var(--d3v-bg-elevated, #ffffff);
    border: 1px solid var(--d3v-border-primary, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-lg, 0 12px 32px rgba(15, 23, 42, 0.18));
    padding: 12px 14px;
    animation: mlInvPillPopFadeIn 0.16s ease-out;
}

@keyframes mlInvPillPopFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ml-inv-pill-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d3v-border-primary, #e2e8f0);
}

.ml-inv-pill-popover-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1e293b);
    flex: 1;
    word-break: break-word;
}

.ml-inv-pill-popover-type {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ml-inv-pill-popover-close {
    border: none;
    background: transparent;
    color: var(--d3v-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
}
.ml-inv-pill-popover-close:hover { color: var(--d3v-status-danger, #ef4444); }

.ml-inv-pill-popover-body {
    min-height: 80px;
}

.ml-inv-pill-popover-body svg { display: block; }

.ml-inv-pill-popover-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--d3v-text-secondary, #64748b);
}

.ml-inv-pill-popover-stats b {
    color: var(--d3v-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

/* Sparkline bars (text/categorical column) */
.ml-inv-sparkline-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    margin-bottom: 3px;
}
.ml-inv-sparkline-label {
    width: 80px;
    color: var(--d3v-text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ml-inv-sparkline-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border-radius: 2px;
    overflow: hidden;
}
.ml-inv-sparkline-bar-fill {
    height: 100%;
    background: var(--d3v-accent-primary, #3b82f6);
    border-radius: 2px;
}
.ml-inv-sparkline-count {
    color: var(--d3v-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
    width: 28px;
    text-align: right;
}

/* Declarative header action button spacing (matches existing outline buttons). */
.d3view-dashboard-v2 .db-widget-header-controls .wv-action {
    margin-left: 4px;
}
.d3view-dashboard-v2 .db-widget-header-controls .wv-action .wv-action-label {
    margin-left: 4px;
    font-size: 12px;
}

/* Filter viz menu — mirrors classic simlytiks `.filter-viz-menu`:
 * orange filter icon + inline brushed-count badge. Bounce animates on
 * every label update (triggered by refreshHeaderActions when
 * DataHighlighters change). */
.d3view-dashboard-v2 .db-widget-header-controls .wv-action.wv-filter-menu > .dropdown-toggle .fa-filter {
    color: var(--d3v-warning, darkorange);
}
.d3view-dashboard-v2 .db-widget-header-controls .wv-action.wv-filter-menu .wv-action-label {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: #fff;
    background: var(--d3v-warning, darkorange);
    border-radius: 8px;
    text-align: center;
    animation: wv-filter-bounce 0.25s ease;
}
.d3view-dashboard-v2 .db-widget-header-controls .wv-action.wv-filter-menu .wv-action-label:empty {
    display: none;
}
@keyframes wv-filter-bounce {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

/* Inline title edit input sits in place of the title text. */
.d3view-dashboard-v2 .db-widget-title.wv-title-editable {
    cursor: text;
}
.d3view-dashboard-v2 .db-widget-title .js-wv-title-input {
    width: 100%;
    padding: 2px 6px;
    font: inherit;
    color: inherit;
    border: 1px solid var(--d3v-border-subtle, #D1D5DB);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    transition: border-color var(--d3v-t-fast, .15s) ease,
                box-shadow   var(--d3v-t-fast, .15s) ease;
}
.d3view-dashboard-v2 .db-widget-title .js-wv-title-input:focus {
    outline: none;
    border-color: var(--d3v-accent-primary, #30487f);
    box-shadow: 0 0 0 3px var(--d3v-accent-ring, rgba(48, 72, 127, .18));
}

/* Footer layout: filter chips on the left, brushed count on the right. */
.d3view-dashboard-v2 .db-widget-footer .wv-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 28px;
}
.d3view-dashboard-v2 .db-widget-footer .wv-footer-left,
.d3view-dashboard-v2 .db-widget-footer .wv-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Filter chips (active DataFilters). */
.d3view-dashboard-v2 .db-widget-footer .wv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    font-size: 11px;
    border: 1px solid var(--d3v-border-subtle, #D1D5DB);
    border-radius: 999px;
    background: var(--d3v-bg-muted, #F3F4F6);
    color: var(--d3v-text-primary, #111827);
    transition: background var(--d3v-t-fast, .15s) ease,
                border-color var(--d3v-t-fast, .15s) ease;
}
.d3view-dashboard-v2 .db-widget-footer .wv-filter-chip:hover {
    background: var(--d3v-bg-hover, #E5E7EB);
    border-color: var(--d3v-border-strong, #9CA3AF);
}
.d3view-dashboard-v2 .db-widget-footer .wv-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--d3v-text-secondary, #6B7280);
    cursor: pointer;
    transition: background var(--d3v-t-fast, .15s) ease,
                color      var(--d3v-t-fast, .15s) ease;
}
.d3view-dashboard-v2 .db-widget-footer .wv-filter-chip-remove:hover {
    background: var(--d3v-status-danger-bg, #FEE2E2);
    color:      var(--d3v-status-danger,    #EF4444);
}
.d3view-dashboard-v2 .db-widget-footer .wv-filter-chip-remove .fa {
    font-size: 10px;
}

/* Footer tags (Primary, recordsToUse) — mirror VizView .vis-tag styling at a
   smaller scale, using foundation tokens. */
.d3view-dashboard-v2 .db-widget-footer .wv-footer-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: var(--d3v-bg-muted, #F3F4F6);
    color: var(--d3v-text-secondary, #6B7280);
    border: 1px solid var(--d3v-border-subtle, #D1D5DB);
}
.d3view-dashboard-v2 .db-widget-footer .wv-footer-tag-primary {
    background: var(--d3v-accent-soft, rgba(48, 72, 127, .10));
    color:      var(--d3v-accent-primary, #30487f);
    border-color: transparent;
}

/* Records-in-use pill (right side). */
.d3view-dashboard-v2 .db-widget-footer .wv-records-used {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--d3v-bg-muted, #F3F4F6);
    color: var(--d3v-text-secondary, #6B7280);
}
.d3view-dashboard-v2 .db-widget-footer .wv-records-used-value {
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}

/* Brushed count pill. */
.d3view-dashboard-v2 .db-widget-footer .wv-brushed-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--d3v-accent-soft, rgba(48, 72, 127, .10));
    color:      var(--d3v-accent-primary, #30487f);
}
.d3view-dashboard-v2 .db-widget-footer .wv-brushed-count-value {
    font-weight: 600;
}

.d3view-dashboard-v2 .db-layout-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 32px 32px;
    box-sizing: border-box;
}

.d3view-dashboard-v2 .db-layout-picker-card {
    width: 100%;
    height: 100%;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-md, 0 10px 30px rgba(15, 23, 42, 0.08));
    padding: 36px 40px 28px;
    box-sizing: border-box;
}

.d3view-dashboard-v2 .db-layout-picker-head {
    text-align: center;
    margin-bottom: 28px;
}

.d3view-dashboard-v2 .db-layout-picker-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    letter-spacing: -0.015em;
}

.d3view-dashboard-v2 .db-layout-picker-sub {
    margin-top: 8px;
    font-size: 14px;
    color: var(--d3v-text-secondary, #64748b);
}

.d3view-dashboard-v2 .db-layout-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 960px) {
    .d3view-dashboard-v2 .db-layout-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .d3view-dashboard-v2 .db-layout-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .d3view-dashboard-v2 .db-layout-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.d3view-dashboard-v2 .db-layout-tile {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 16px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    cursor: pointer;
    transition: transform var(--d3v-t-fast, 150ms) ease,
                box-shadow var(--d3v-t-fast, 150ms) ease,
                border-color var(--d3v-t-fast, 150ms) ease,
                background var(--d3v-t-fast, 150ms) ease;
    outline: none;
}

.d3view-dashboard-v2 .db-layout-tile:hover {
    background: var(--d3v-bg-primary, #ffffff);
    border-color: var(--d3v-accent, #30487f);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, 0.08));
    transform: translateY(-2px);
}

.d3view-dashboard-v2 .db-layout-tile:focus-visible {
    border-color: var(--d3v-accent, #30487f);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(48, 72, 127, 0.18));
}

.d3view-dashboard-v2 .db-layout-tile--active,
.d3view-dashboard-v2 .db-layout-tile:active {
    background: var(--d3v-accent-soft, rgba(48, 72, 127, 0.12));
    border-color: var(--d3v-accent, #30487f);
    transform: translateY(0);
}

.d3view-dashboard-v2 .db-layout-tile__preview {
    display: block;
    width: 100%;
    aspect-ratio: 120 / 84;
    background: var(--d3v-bg-primary, #ffffff);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}

.d3view-dashboard-v2 .db-layout-tile__preview svg {
    display: block;
    width: 100%;
    height: 100%;
}

.d3view-dashboard-v2 .db-layout-tile__cell {
    fill: var(--d3v-accent-soft, rgba(48, 72, 127, 0.16));
    stroke: var(--d3v-accent, #30487f);
    stroke-width: 1;
    transition: fill var(--d3v-t-fast, 150ms) ease;
}

.d3view-dashboard-v2 .db-layout-tile:hover .db-layout-tile__cell {
    fill: var(--d3v-accent, #30487f);
    fill-opacity: 0.28;
}

.d3view-dashboard-v2 .db-layout-tile__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-dashboard-v2 .db-layout-tile:hover .db-layout-tile__label {
    color: var(--d3v-text-primary, #0f172a);
}

/* Editor (confirm) variant: Save/Cancel footer */
.d3view-dashboard-v2 .db-layout-picker-foot {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--d3v-border-subtle, #e5e7eb);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.d3view-dashboard-v2 .db-layout-picker-foot .btn {
    border-radius: var(--d3v-r-md, 8px);
    transition: background var(--d3v-t-fast, 150ms) ease,
                box-shadow var(--d3v-t-fast, 150ms) ease;
}

.d3view-dashboard-v2 .db-layout-picker-foot .btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* DVFIV-1995 - Remove Page action: floats at the top-right of the picker card
 * on the blank-page flow when the dashboard has more than one page. Subtle by
 * default, danger styling on hover so destructive intent is clear. */
.d3view-dashboard-v2 .db-layout-picker-card {
    position: relative;
}

.d3view-dashboard-v2 .db-layout-picker-remove {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-muted, #64748b);
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    cursor: pointer;
    transition: color var(--d3v-t-fast, 150ms) ease,
                border-color var(--d3v-t-fast, 150ms) ease,
                background var(--d3v-t-fast, 150ms) ease,
                box-shadow var(--d3v-t-fast, 150ms) ease;
}

.d3view-dashboard-v2 .db-layout-picker-remove:hover,
.d3view-dashboard-v2 .db-layout-picker-remove:focus {
    color: var(--d3v-status-danger, #dc2626);
    border-color: var(--d3v-status-danger, #dc2626);
    background: var(--d3v-status-danger-soft, rgba(220, 38, 38, 0.08));
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    outline: none;
}

/* Inline editor (replaces the grid body when the user chooses Edit Layout) */
.d3view-dashboard-v2 .db-layout-picker--editor {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: var(--d3v-bg-secondary, #f8fafc);
}

/* DVFIV-1995 - Empty widget-viz state: hide all header controls except Remove +
 * Fullscreen. Fullscreen stays (updated 2026-04-15 - DVFIV-1997) so the user can
 * enlarge the inline chart picker to full viewport while browsing chart types.
 * Applied by WidgetVizView._applyDeclarativeChrome when there's no active chart. */
.d3view-dashboard-v2 .db-widget-card.wv-viz-empty .db-widget-header-controls > *:not(.db-widget-remove):not(.db-widget-fullscreen):not(.db-widget-ctrl-sep) {
    display: none !important;
}
.d3view-dashboard-v2 .db-widget-card.wv-viz-empty .db-widget-type-badge {
    opacity: 0.4;
}

/* ── Locked widget (slot-backed, sortable, no resize) ──────── */
.d3view-dashboard-v2 .grid-stack-item.db-widget-slot-locked
    > .grid-stack-item-content
    > .db-widget-card {
    border-top: 2px solid var(--d3v-accent-500, #4f7cff);
}

/* Hide gridstack's resize handles on locked slots — drag (sort) stays enabled */
.d3view-dashboard-v2 .grid-stack-item.db-widget-slot-locked .ui-resizable-handle,
.d3view-dashboard-v2 .grid-stack-item.db-widget-slot-locked > .grid-stack-item-resizable-handle {
    display: none !important;
}

/* While dragging a locked tile to swap, give it a clear lifted look */
.d3view-dashboard-v2 .grid-stack-item.db-widget-slot-locked.ui-draggable-dragging,
.d3view-dashboard-v2 .grid-stack-item.db-widget-slot-locked.grid-stack-item-moving {
    box-shadow: var(--d3v-sh-lg, 0 14px 36px rgba(20, 30, 50, .12));
    transform: rotate(-1deg) scale(1.02);
    z-index: 30;
}

/* ── Freeform widget — accent border, full gridstack ───────── */
.d3view-dashboard-v2 .grid-stack-item.db-widget-freeform
    > .grid-stack-item-content
    > .db-widget-card {
    border-top: 2px solid var(--d3v-status-warning, #d99206);
}

/* ── Empty placeholder widget (dashed slot) ─────────────────── */
.d3view-dashboard-v2 .grid-stack-item.db-widget-placeholder
    > .grid-stack-item-content
    > .db-widget-card,
.d3view-dashboard-v2 .db-widget-viz--empty-slot {
    border: 1.5px dashed var(--d3v-border-strong, #b6bccb) !important;
    background: var(--d3v-bg-secondary, #f8f9fb) !important;
    box-shadow: none !important;
    transition: border-color var(--d3v-t-fast, 120ms ease),
                background var(--d3v-t-fast, 120ms ease);
}
.d3view-dashboard-v2 .grid-stack-item.db-widget-placeholder:hover
    > .grid-stack-item-content
    > .db-widget-card,
.d3view-dashboard-v2 .db-widget-viz--empty-slot:hover {
    border-color: var(--d3v-accent-500, #4f7cff) !important;
    background: var(--d3v-accent-50, #ecf0ff) !important;
}

/* Inside an empty slot the WidgetVizView's externalData picker turns into a
   centered call-to-action that reads as "click to fill this slot". */
.d3view-dashboard-v2 .db-widget-viz--empty-slot .ss-viz-picker-empty {
    background: transparent;
    border: none;
    padding: 24px 16px;
    text-align: center;
}
.d3view-dashboard-v2 .db-widget-viz--empty-slot .ss-viz-picker-icon {
    font-size: 26px;
    color: var(--d3v-accent-500, #4f7cff);
    opacity: .8;
    margin-bottom: 8px;
    transition: transform var(--d3v-t-base, 180ms ease);
}
.d3view-dashboard-v2 .db-widget-viz--empty-slot:hover .ss-viz-picker-icon {
    transform: scale(1.12);
    opacity: 1;
}
.d3view-dashboard-v2 .db-widget-viz--empty-slot .ss-viz-picker-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #4a5568);
    margin-bottom: 4px;
}
.d3view-dashboard-v2 .db-widget-viz--empty-slot .ss-viz-picker-sub {
    font-size: 11px;
    color: var(--d3v-text-muted, #8693a8);
    margin-bottom: 12px;
}

/* Hide the regular widget header chrome on placeholders — the slot itself is the CTA */
.d3view-dashboard-v2 .grid-stack-item.db-widget-placeholder .db-widget-header {
    background: transparent;
    border-bottom: none;
    opacity: .65;
}

/* ── Freeform tile in LayoutPickerView ──────────────────────── */
.d3view-dashboard-v2 .db-layout-tile--freeform {
    border-style: dashed;
    border-color: #f0d9a8;
    background: linear-gradient(135deg, #fffaf0 0%, #fff5e1 100%);
}
.d3view-dashboard-v2 .db-layout-tile--freeform:hover {
    border-color: var(--d3v-status-warning, #d99206);
    background: linear-gradient(135deg, #fff8ed 0%, #ffeacb 100%);
}
.d3view-dashboard-v2 .db-layout-tile--freeform .db-layout-tile__cell {
    fill: var(--d3v-status-warning, #d99206);
    opacity: .55;
}
.d3view-dashboard-v2 .db-layout-tile--freeform.db-layout-tile--active {
    border-color: var(--d3v-status-warning, #d99206);
    box-shadow: 0 0 0 2px rgba(217, 146, 6, .2);
}
.d3view-dashboard-v2 .db-layout-tile__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: var(--d3v-status-warning, #d99206);
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    vertical-align: middle;
}

/* ── Freeform empty-state CTA ───────────────────────────────────
 * Shown by DashboardView._mountFreeformEmpty when the active page is on the
 * freeform layout but has no widgets. Reads as a drop zone — accepts response
 * items dragged from div.responses-panel (wired in _wireFreeformResponseDrop).
 */
.d3view-dashboard-v2 .db-freeform-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    margin: 24px;
    border: 2px dashed var(--d3v-border-strong, #b6bccb);
    border-radius: var(--d3v-r-lg, 12px);
    background: linear-gradient(135deg,
                    var(--d3v-bg-secondary, #f8f9fb) 0%,
                    var(--d3v-bg-primary, #ffffff) 100%);
    transition: border-color var(--d3v-t-base, 180ms ease),
                background var(--d3v-t-base, 180ms ease),
                box-shadow var(--d3v-t-base, 180ms ease);
}
.d3view-dashboard-v2 .db-freeform-empty:hover {
    border-color: var(--d3v-status-warning, #d99206);
    background: linear-gradient(135deg, #fffaf0 0%, #fff5e1 100%);
}

.d3view-dashboard-v2 .db-freeform-empty-art {
    width: 88px;
    height: 88px;
    border-radius: var(--d3v-r-2xl, 20px);
    background: rgba(217, 146, 6, 0.10);
    color: var(--d3v-status-warning, #d99206);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 36px;
    box-shadow: 0 0 0 8px rgba(217, 146, 6, 0.05),
                0 0 0 16px rgba(217, 146, 6, 0.025);
    transition: transform var(--d3v-t-base, 180ms ease);
}
.d3view-dashboard-v2 .db-freeform-empty:hover .db-freeform-empty-art {
    transform: scale(1.06) rotate(-4deg);
}

.d3view-dashboard-v2 .db-freeform-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1a2638);
    margin-bottom: 8px;
}
.d3view-dashboard-v2 .db-freeform-empty-desc {
    font-size: 14px;
    color: var(--d3v-text-muted, #6b7689);
    line-height: 1.55;
    max-width: 460px;
    margin-bottom: 24px;
}

.d3view-dashboard-v2 .db-freeform-empty-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.d3view-dashboard-v2 .db-freeform-empty-actions .btn {
    padding: 8px 18px;
    font-weight: 500;
    border-radius: var(--d3v-r-md, 8px);
    transition: all var(--d3v-t-fast, 120ms ease);
}
.d3view-dashboard-v2 .db-freeform-empty-actions .btn-primary {
    box-shadow: 0 2px 6px rgba(48, 72, 127, 0.18);
}
.d3view-dashboard-v2 .db-freeform-empty-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(48, 72, 127, 0.24);
}

.d3view-dashboard-v2 .db-freeform-empty-hint {
    font-size: 12px;
    color: var(--d3v-text-muted, #8693a8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.03);
}
.d3view-dashboard-v2 .db-freeform-empty-hint i {
    color: var(--d3v-status-warning, #d99206);
}

/* Drop-hover state — when a responses-panel item is dragged over the CTA */
.d3view-dashboard-v2 .db-freeform-empty.db-freeform-empty-drop-hover {
    border-color: var(--d3v-accent-500, #4f7cff);
    border-style: solid;
    background: var(--d3v-accent-50, #ecf0ff);
    box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}
.d3view-dashboard-v2 .db-freeform-empty.db-freeform-empty-drop-hover .db-freeform-empty-art {
    background: rgba(79, 124, 255, 0.14);
    color: var(--d3v-accent-500, #4f7cff);
    transform: scale(1.1);
}

/* ── Grid-level response drop hover (freeform pages with widgets) ────
 * Wired by DashboardView._wireGridResponseDrop on .db-gridstack-inner.
 * Provides a subtle accent outline so the user knows blank grid space
 * accepts drops; the drop creates a new widget at the drop coordinates.
 * Per-widget drop hover (.db-widget-drop-hover) is handled separately
 * inside WidgetVizView with greedy:true so it pre-empts this hover.
 */
.d3view-dashboard-v2 .db-gridstack-inner.db-grid-drop-hover {
    outline: 2px dashed var(--d3v-accent-500, #4f7cff);
    outline-offset: -6px;
    background: linear-gradient(135deg,
                    rgba(79, 124, 255, 0.04) 0%,
                    rgba(79, 124, 255, 0.08) 100%);
    border-radius: var(--d3v-r-md, 8px);
    transition: background var(--d3v-t-fast, 120ms) ease,
                outline-color var(--d3v-t-fast, 120ms) ease;
}

/** All rules scoped under .db-ml-page so they never leak outside the widget. **/

.db-ml-page {
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    border-radius: var(--d3v-r-md);
    overflow: hidden;
}

.db-ml-page .db-ml-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle);
    background: var(--d3v-bg-secondary);
    flex: 0 0 auto;
}

.db-ml-page .db-ml-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.db-ml-page .db-ml-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.db-ml-page .db-ml-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-sm);
}

.db-ml-page .db-ml-chip .fa {
    color: var(--d3v-accent);
    font-size: 11px;
}

.db-ml-page .db-ml-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 6px 10px 0;
    border-bottom: 1px solid var(--d3v-border-subtle);
    background: var(--d3v-bg-primary);
    flex: 0 0 auto;
    overflow-x: auto;
}

.db-ml-page .db-ml-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--d3v-r-sm) var(--d3v-r-sm) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--d3v-t-fast, all 120ms ease);
}

.db-ml-page .db-ml-tab:hover {
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-primary);
}

.db-ml-page .db-ml-tab.active {
    color: var(--d3v-accent);
    border-bottom-color: var(--d3v-accent);
    background: var(--d3v-bg-primary);
}

.db-ml-page .db-ml-tab .fa {
    font-size: 13px;
}

.db-ml-page .db-ml-body {
    padding: 10px;
    background: var(--d3v-bg-primary);
}

.db-ml-page .db-ml-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 120px;
    color: var(--d3v-text-muted);
    font-size: 13px;
    text-align: center;
}

.db-ml-page .db-ml-empty .fa {
    color: var(--d3v-text-muted);
    font-size: 18px;
}

/* Charts carousel (Home tab) — single-chart-at-a-time, prev/next + dot navigation. */
.db-ml-page .db-ml-carousel-wrap {
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.db-ml-page .db-ml-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--d3v-border-subtle);
    flex: 0 0 auto;
}

.db-ml-page .db-ml-carousel-controls .btn {
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-sm);
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    color: var(--d3v-text-secondary);
    transition: var(--d3v-t-fast, all 120ms ease);
}

.db-ml-page .db-ml-carousel-controls .btn:hover:not([disabled]) {
    background: var(--d3v-bg-hover);
    color: var(--d3v-accent);
    border-color: var(--d3v-accent);
}

.db-ml-page .db-ml-carousel-controls .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.db-ml-page .db-ml-carousel-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--d3v-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.db-ml-page .db-ml-carousel-count {
    font-weight: 500;
    color: var(--d3v-text-muted);
}

.db-ml-page .db-ml-primary-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--d3v-r-sm);
}

.db-ml-page .db-ml-carousel-dots {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    align-items: center;
}

.db-ml-page .db-ml-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d3v-border-subtle);
    cursor: pointer;
    transition: var(--d3v-t-fast, all 120ms ease);
    display: inline-block;
}

.db-ml-page .db-ml-carousel-dot:hover {
    transform: scale(1.2);
    background: var(--d3v-text-muted);
}

.db-ml-page .db-ml-carousel-dot.active {
    background: var(--d3v-accent);
    transform: scale(1.15);
}

.db-ml-page .db-ml-carousel-dot.is-primary::after {
    content: '';
    position: relative;
    display: block;
    width: 4px;
    height: 4px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--d3v-accent);
}

.db-ml-page .db-ml-carousel-stage {
    position: relative;
    min-height: 0;
    width: 100%;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    box-shadow: var(--d3v-sh-sm);
    overflow: hidden;
}

.db-ml-page .sl-dashboard-widget-ml-viz-host {
    width: 100%;
    height: 100%;
}

/* Responses tab */
.db-ml-page .db-ml-resp-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.db-ml-page .db-ml-resp-search {
    flex: 0 0 auto;
}

.db-ml-page .db-ml-resp-search input {
    height: 32px;
}

.db-ml-page .db-ml-resp-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.db-ml-page .db-ml-response {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-md);
    padding: 8px;
    transition: var(--d3v-t-fast, box-shadow 120ms ease);
}

.db-ml-page .db-ml-response:hover {
    box-shadow: var(--d3v-sh-sm);
}

/* Plugins.Views.ResponseView renders a Bootstrap panel inside .db-ml-response.
   Without an explicit height the inner DataTable / <pre> collapse to 0 — mirror
   classic Simlytiks (.ml-responses .panel-body { height: 340px }) so content paints. */
.db-ml-page .db-ml-response .panel {
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.db-ml-page .db-ml-response .panel-heading {
    padding: 6px 8px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-sm) var(--d3v-r-sm) 0 0;
}

.db-ml-page .db-ml-response .panel-body {
    height: 340px;
    padding: 8px;
    overflow: auto;
    background: var(--d3v-bg-primary);
}

.db-ml-page .db-ml-response .panel-body > div.full-h,
.db-ml-page .db-ml-response .panel-body > div.full-h > pre.full-h {
    height: 100%;
    margin: 0;
}

/* Meta Info / Logs */
.db-ml-page .db-ml-meta-wrap {
    width: 100%;
}

.db-ml-page .db-ml-meta-table {
    width: 100%;
    font-size: 13px;
}

.db-ml-page .db-ml-meta-table thead th {
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-secondary);
    font-weight: 600;
}

.db-ml-page .db-ml-meta-table tbody tr:hover {
    background: var(--d3v-bg-hover);
}

.db-ml-page .db-ml-logs-pre {
    margin: 0;
    padding: 10px;
    font-family: var(--d3v-font-mono, monospace);
    font-size: 12px;
    line-height: 1.5;
    background: var(--d3v-bg-secondary);
    color: var(--d3v-text-primary);
    border: 1px solid var(--d3v-border-subtle);
    border-radius: var(--d3v-r-sm);
    white-space: pre-wrap;
    overflow: auto;
    max-height: 100%;
}

/* Inline Edit mode (VizParams overlay) */
.db-ml-page .db-ml-edit-host {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--d3v-bg-primary);
}

/* Sidebar container — starts collapsed (icon-only, 56px) */
.d3view-dashboard-v2 .db-widget-nav-sidebar {
    width: 56px;
    min-width: 56px;
    max-width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--db-border, #E2E8F0);
    background: var(--db-bg-primary, #FFFFFF);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: width 0.15s ease;
}

/* Override base pl-tabs-vertical styles for dashboard theming */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical {
    flex: 1 1 auto;
    margin-bottom: 0;
    padding: 4px 0;
    list-style: none;
    /* Counter is OFF by default — re-enabled via .db-widget-nav-sidebar--counter */
    counter-reset: db-widget-nav-counter;
}

/* Reset Bootstrap list-group-item borders — they conflict with our left-accent pattern */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li.list-group-item {
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--db-r-sm, 4px);
    margin: 2px 4px;
    padding: 0;
    background: transparent;
    transition: all var(--db-transition-fast, 0.12s ease);
    counter-increment: db-widget-nav-counter;
}

/* The anchor inside each item — icon + label stacked vertically (matches page sidebar) */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li > a {
    padding: 10px 6px;
    color: var(--db-text-secondary, #475569);
    font-size: 12px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    display: flex;
    text-decoration: none;
    position: relative;
}

.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li > a > i {
    font-size: 16px;
    width: auto;
    color: var(--db-text-muted, #94A3B8);
    transition: color var(--db-transition-fast, 0.12s ease);
}

/* Labels — hidden when collapsed, visible when expanded (under the icon) */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li > a .pl-tab-item-label {
    font-size: 10px;
    color: var(--db-text-muted, #94A3B8);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    transition: opacity 0.15s ease, max-width 0.15s ease;
}

/* Expanded state — labels visible under icon (same column layout, just revealed) */
.d3view-dashboard-v2 .db-widget-nav-sidebar.is-expanded .pl-tabs-vertical > li > a .pl-tab-item-label {
    max-width: 200px;
    opacity: 1;
}

/* Active state — bold accent left border + tinted background + accent icon */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li.list-group-item.active {
    background: rgba(59, 130, 246, 0.10) !important;
    border-left: 3px solid var(--db-accent, #3B82F6) !important;
}

.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li.active > a > i {
    color: var(--db-accent, #3B82F6) !important;
}

.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li.active > a .pl-tab-item-label {
    color: var(--db-text-primary, #1E293B);
    font-weight: 600;
}

/* Hover state */
.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li.list-group-item:hover {
    background: var(--db-bg-tertiary, #F1F5F9) !important;
}

.d3view-dashboard-v2 .db-widget-nav-sidebar .pl-tabs-vertical > li:hover > a > i {
    color: var(--db-text-secondary, #475569);
}

/* Optional counter badges — only when sidebar has --counter modifier class */
.d3view-dashboard-v2 .db-widget-nav-sidebar--counter .pl-tabs-vertical > li > a::before {
    content: counter(db-widget-nav-counter);
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: var(--db-r-full, 999px);
    background: var(--db-bg-tertiary, #F1F5F9);
    color: var(--db-text-muted, #94A3B8);
    font-size: 9px;
    font-weight: 700;
    transition: background var(--db-transition-fast, 0.12s ease),
                color var(--db-transition-fast, 0.12s ease);
}

.d3view-dashboard-v2 .db-widget-nav-sidebar--counter .pl-tabs-vertical > li:hover > a::before {
    background: var(--db-accent, #3B82F6);
    color: var(--db-text-inverse, #FFFFFF);
}

.d3view-dashboard-v2 .db-widget-nav-sidebar--counter .pl-tabs-vertical > li.active > a::before {
    background: var(--db-accent, #3B82F6);
    color: var(--db-text-inverse, #FFFFFF);
}

/* Empty state */
.d3view-dashboard-v2 .db-widget-nav-sidebar .db-widget-nav-empty > a {
    color: var(--db-text-muted, #94A3B8) !important;
    cursor: default;
}

/* Resize handle — inside sidebar at right edge, visible grip dots */
.d3view-dashboard-v2 .db-widget-nav-resize-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d3view-dashboard-v2 .db-widget-nav-resize-wrap .db-widget-nav-resize-grip {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: var(--db-border, #CBD5E1);
    transition: background var(--db-transition-fast, 0.12s ease), height 0.12s ease;
}

.d3view-dashboard-v2 .db-widget-nav-resize-wrap:hover .db-widget-nav-resize-grip,
.d3view-dashboard-v2 .db-widget-nav-resize-wrap.is-dragging .db-widget-nav-resize-grip {
    background: var(--db-accent, #3B82F6);
    height: 40px;
}

/* Scroll target highlight — a widget pulses briefly when navigated to */
.d3view-dashboard-v2 .grid-stack-item.db-widget-nav-pulse > .grid-stack-item-content {
    animation: db-widget-nav-pulse-kf 1.1s ease;
}

@keyframes db-widget-nav-pulse-kf {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.00); }
    30%  { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.00); }
}

/* When widget nav is visible, keep the horizontal tab bar cleared of left-padding issues */
.d3view-dashboard-v2 .db-widget-nav-sidebar ~ #db-content .db-page-tab-actions {
    border-left: none;
}

/* Tooltip body — rendered inside Viz.Helpers.Tooltip */
.db-widget-nav-tip {
    max-width: 280px;
    padding: 2px 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--d3v-text-primary, #1E293B);
}

.db-widget-nav-tip-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--d3v-text-primary, #0F172A);
}

.db-widget-nav-tip-desc {
    color: var(--d3v-text-secondary, #475569);
    margin-bottom: 6px;
}

.db-widget-nav-tip-vt-title {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d3v-text-muted, #94A3B8);
    margin-top: 6px;
    margin-bottom: 4px;
}

.db-widget-nav-tip-vt-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.db-widget-nav-tip-vt-list > li {
    padding: 2px 0;
    color: var(--d3v-text-secondary, #475569);
}

.db-widget-nav-tip-vt-list > li > strong {
    color: var(--d3v-text-primary, #1E293B);
}

/* ─────────────────────────────────────────────────────────────────────
   Sidebar body — consistent flex column so the panel fills remaining
   height regardless of how tall the caption row is.
   ───────────────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-inv-err-drill-sidebar .pl-sidebar-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
    height: 100%;
    background: var(--d3v-bg-secondary, #f8fafc);
}

/* Caption row (records count) ─────────────────────────────────────── */
.d3view-dashboard-v2 .ml-drill-caption {
    flex: 0 0 auto;
    gap: 8px;
}

.d3view-dashboard-v2 .ml-drill-mode-count {
    font-size: 11px;
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* Active panel ─────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-drill-panel {
    min-height: 0;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(15, 23, 42, 0.05));
    padding: 12px;
    overflow: hidden;
}

/* Bar host ─────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-drill-bar-host {
    width: 100%;
    height: 100%;
    min-height: 300px;
}
.d3view-dashboard-v2 .ml-drill-bar-host > svg { width: 100%; height: 100%; }

/* Table mode ───────────────────────────────────────────────────────── */
/** Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - Polished table styling:
 *  sticky header with sort indicator, striped rows, hover highlight, selected-row
 *  accent bar, tabular-nums for numeric columns. Matches dashboard table patterns. */
.d3view-dashboard-v2 .ml-drill-table-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.d3view-dashboard-v2 .ml-drill-table-scroll {
    min-height: 0;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #fff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04)) inset;
}
.d3view-dashboard-v2 .ml-drill-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .ml-drill-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    user-select: none;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s ease);
    white-space: nowrap;
}
.d3view-dashboard-v2 .ml-drill-table thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.d3view-dashboard-v2 .ml-drill-table thead th:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .ml-drill-sort-icon {
    margin-left: 6px;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 11px;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .ml-drill-sort-icon.is-active {
    color: var(--d3v-accent, #3b82f6);
}
.d3view-dashboard-v2 .ml-drill-table tbody tr {
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .ml-drill-table tbody tr:nth-child(even) {
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-dashboard-v2 .ml-drill-table tbody tr:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
}
.d3view-dashboard-v2 .ml-drill-table tbody tr.selected {
    background: rgba(59, 130, 246, 0.10);
    box-shadow: inset 3px 0 0 0 var(--d3v-accent, #3b82f6);
}
.d3view-dashboard-v2 .ml-drill-table tbody tr.selected:hover {
    background: rgba(59, 130, 246, 0.16);
}
.d3view-dashboard-v2 .ml-drill-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
    vertical-align: middle;
    line-height: 1.3;
}
.d3view-dashboard-v2 .ml-drill-table tbody td.num {
    text-align: right;
    font-weight: 500;
    color: var(--d3v-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-drill-table tbody tr:last-child td { border-bottom: none; }

/* Curve mode ───────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-drill-curve-header {
    flex: 0 0 auto;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}
.d3view-dashboard-v2 .ml-drill-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: var(--d3v-t-fast, 0.12s ease);
}
.d3view-dashboard-v2 .ml-drill-back-btn i {
    font-size: 12px;
}
.d3view-dashboard-v2 .ml-drill-curve-caption {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    font-variant-numeric: tabular-nums;
}
.d3view-dashboard-v2 .ml-drill-curve-caption b {
    color: var(--d3v-text-primary, #1e293b);
    font-weight: 600;
}
.d3view-dashboard-v2 .ml-drill-curve-host {
    width: 100%;
    min-height: 0;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    overflow: hidden;
}
.d3view-dashboard-v2 .ml-drill-curve-host > * {
    width: 100%;
    height: 100%;
}

/* Empty + error states ─────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-drill-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 160px;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    padding: 20px;
    text-align: center;
    gap: 6px;
}
.d3view-dashboard-v2 .ml-drill-empty i {
    color: var(--d3v-accent, #3b82f6);
    opacity: 0.7;
}

/* Source row highlight ─────────────────────────────────────────────────
   When the drill sidebar is open, the triggering Mean-Err cell gets a
   persistent accent outline so the user can visually trace back to the
   model being inspected. Scoped to the drill button itself since that
   carries the data-run-id.
   ───────────────────────────────────────────────────────────────────── */
.d3view-dashboard-v2 .ml-inv-mean-err-drill.is-drill-open {
    background: var(--d3v-accent, #3b82f6);
    color: var(--d3v-text-inverse, #fff);
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.d3view-dashboard-v2 .ml-inv-mean-err-drill.is-drill-open:hover {
    background: var(--d3v-accent-hover, #2563eb);
    color: var(--d3v-text-inverse, #fff);
    border-color: var(--d3v-accent-hover, #2563eb);
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 Pass 3 - Transient flash applied when
 *  the user returns from the internal Curve drill-in via the Back button. Lets them
 *  visually trace which bar / row they were just viewing. ~900ms one-shot animation,
 *  token-driven accent background. Scoped under the drill sidebar + dashboard root. */
@keyframes ml-drill-just-viewed-pulse {
    0%   { background-color: transparent; box-shadow: none; }
    15%  { background-color: rgba(59, 130, 246, 0.22); box-shadow: inset 3px 0 0 0 var(--d3v-accent, #3b82f6); }
    55%  { background-color: rgba(59, 130, 246, 0.14); box-shadow: inset 3px 0 0 0 var(--d3v-accent, #3b82f6); }
    100% { background-color: transparent; box-shadow: none; }
}

@keyframes ml-drill-just-viewed-rect {
    0%   { filter: none; stroke: transparent; stroke-width: 0; }
    15%  { filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.70)); stroke: var(--d3v-accent, #3b82f6); stroke-width: 2; }
    55%  { filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.45)); stroke: var(--d3v-accent, #3b82f6); stroke-width: 2; }
    100% { filter: none; stroke: transparent; stroke-width: 0; }
}

.d3view-dashboard-v2 .ml-inv-err-drill-sidebar .ml-drill-table tbody tr.ml-drill-row.is-flash {
    animation: ml-drill-just-viewed-pulse 900ms ease-out 1;
}

/* SVG rect flash — inside the vBarChart host. Paint-order stroke so the glow sits
 * on top of the bar fill without shifting layout. */
.d3view-dashboard-v2 .ml-inv-err-drill-sidebar .ml-drill-bar-host rect.is-flash {
    animation: ml-drill-just-viewed-rect 900ms ease-out 1;
    paint-order: stroke fill;
}

/* =====================================================================================
 *  Point-drill sidebar — Table viewType (replaces the legacy Stacked SVG)
 * ===================================================================================== */

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-pop-table {
    padding: 4px 0 6px;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--d3v-border-soft, var(--d3v-border, #eef1f6));
    margin-bottom: 6px;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-head-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--d3v-text-primary, #0f172a);
    letter-spacing: -0.01em;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-head-metric {
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--d3v-text-secondary, #64748b);
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-head-metric b {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 700;
    margin-left: 4px;
}

/** Updated by shashank2104 on 2026-04-17 - DVFIV-2002 - Table viewType is now a standard
 *  Bootstrap 3 table (.table.table-striped.table-hover.ml-curve-pt-table) with just
 *  Model + Error columns. Dropped segment-share column + segment bar styling. Actual
 *  row uses a black accent; predicted rows show a palette swatch before the name. */
.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-table {
    margin-bottom: 0;
    font-size: 12px;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-table thead th {
    padding: 8px 14px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d3v-text-muted, #94a3b8);
    background: var(--d3v-bg-tertiary, var(--d3v-bg-muted, #f7f9fc));
    border-bottom: 1px solid var(--d3v-border, #e2e8f0);
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-table thead .ml-pt-col-model { width: 60%; }
.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-table thead .ml-pt-col-error {
    width: 40%;
    text-align: right;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-trow {
    transition: background var(--d3v-t-fast, 0.12s) ease;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-trow td {
    padding: 10px 14px;
    border-top: 1px solid var(--d3v-border-soft, var(--d3v-border, #eef1f6));
    vertical-align: middle;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-trow td.ml-pt-col-error {
    text-align: right;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-pt-trow--actual td {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04), transparent);
    font-weight: 600;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-col-model {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-accent {
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--row-accent, #000);
    flex: 0 0 3px;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--row-accent, var(--d3v-accent, #3b82f6));
    flex: 0 0 10px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06) inset;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-name {
    font-weight: 500;
    color: var(--d3v-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-badge {
    padding: 2px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-tertiary, #f1f5f9);
    color: var(--d3v-text-muted, #64748b);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-signed {
    display: inline-block;
    margin-left: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 1px 5px;
    border-radius: var(--d3v-r-sm, 4px);
    font-weight: 500;
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-signed-pos {
    color: var(--d3v-info, #0284c7);
    background: rgba(2, 132, 199, 0.08);
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-signed-neg {
    color: var(--d3v-danger, #dc2626);
    background: rgba(220, 38, 38, 0.08);
}

.pl-sidebar.ml-curve-point-sidebar .ml-pt-signed-zero {
    color: var(--d3v-text-muted, #64748b);
    background: var(--d3v-bg-tertiary, #f1f5f9);
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--d3v-text-muted, #94a3b8);
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-table-empty i {
    margin-right: 6px;
}

/* =====================================================================================
 *  Point-drill sidebar — Horizontal Bar viewType (Viz.hBarChart host + legend)
 * ===================================================================================== */

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-pop-bar {
    width: 100%;
    min-height: 260px;
    padding: 6px 10px 8px;
    background: var(--d3v-bg-primary, #ffffff);
    border-radius: var(--d3v-r-sm, 6px);
    flex: 1;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-pop-bar svg {
    display: block;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 14px 4px;
    font-size: 11px;
    color: var(--d3v-text-secondary, #475569);
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pl-sidebar.ml-curve-point-sidebar .ml-curve-point-legend-sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* =====================================================================================
 *  Browse-records button (inline header). Opens the reusable RecordSelector sidebar.
 * ===================================================================================== */

.d3view-dashboard-v2 .ml-curve-record-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: var(--d3v-r-md, 8px);
    transition: background var(--d3v-t-fast, 0.12s) ease,
                color var(--d3v-t-fast, 0.12s) ease,
                border-color var(--d3v-t-fast, 0.12s) ease;
    position: relative;
}

.d3view-dashboard-v2 .ml-curve-record-filter-btn i.fa {
    font-size: 10px;
}

/** Added by shashank2104 on 2026-04-17 - DVFIV-2002 Pass 3 - Selected-count badge on the
 *  Select Record button. Reflects the current pin count (0 = hidden; > 0 = visible pill). */
.d3view-dashboard-v2 .ml-curve-record-filter-btn .ml-curve-record-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: var(--d3v-r-full, 999px);
    background: var(--d3v-accent, #3b82f6);
    color: var(--d3v-text-inverse, #ffffff);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.24);
}

/* ── Plugin-scoped tokens (alias --d3v-* foundation, own semantic status) ── */
.db-prediction {
    --dbp-brand:      var(--d3v-accent, #2563EB);
    --dbp-brand-str:  var(--d3v-accent-hover, #1D4ED8);
    --dbp-brand-bg:   rgba(37, 99, 235, .10);

    --dbp-good:       var(--d3v-success, #10B981);
    --dbp-good-bg:    rgba(16, 185, 129, .12);
    --dbp-warn:       var(--d3v-warning, #F59E0B);
    --dbp-warn-bg:    rgba(245, 158, 11, .13);
    --dbp-bad:        var(--d3v-status-danger, #EF4444);
    --dbp-bad-bg:     rgba(239, 68, 68, .12);

    --dbp-surface:    var(--d3v-bg-primary, #FFFFFF);
    --dbp-surface-2:  var(--d3v-bg-secondary, #F9FAFB);
    --dbp-surface-3:  var(--d3v-bg-tertiary, #F3F4F6);
    --dbp-line:       var(--d3v-border, #E5E7EB);
    --dbp-line-2:     var(--d3v-border-subtle, #EEF0F3);
    --dbp-line-str:   var(--d3v-border-strong, #D1D5DB);

    --dbp-text:       var(--d3v-text-primary, #111827);
    --dbp-text-2:     var(--d3v-text-secondary, #4B5563);
    --dbp-text-3:     var(--d3v-text-muted, #9CA3AF);

    --dbp-r-sm:       var(--d3v-r-sm, 6px);
    --dbp-r-md:       var(--d3v-r-md, 8px);
    --dbp-r-lg:       var(--d3v-r-lg, 12px);
    --dbp-sh-sm:      var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
    --dbp-sh-md:      var(--d3v-sh-md, 0 4px 12px rgba(0, 0, 0, .10));
    --dbp-t:          var(--d3v-t-base, all .18s ease);

    --dbp-right-w:    306px;
    --mono:           ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Slider fill accent (brand -> cyan), to match the mockup track */
    --dbp-accent2:    var(--d3v-info, #06B6D4);
}

/* ── Shell: header (top) · cards (strip) · main (inputs | canvas | analysis) ── */
.db-prediction.dbp-ready {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: #FFF;
}

/** Added by shashank2104 on 08/19/2026 at 12:33 PM - R2026-43 - standalone Prediction/Settings
 *  host rail sits beside .dbp-main when this view is not inside the dashboard shell. **/
.db-prediction.dbp-ready.dbp-host-rail-on {
    flex-direction: row;
    position: relative;
}
.db-prediction.dbp-host-rail-on .dbp-host-rail {
    flex: 0 0 148px;
    width: 148px;
    align-self: stretch;
    min-height: 0;
    overflow: auto;
    background: var(--d3v-bg-primary, #fff);
    border-right: 1px solid var(--d3v-border, #E5E7EB);
    padding: 8px 6px;
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical {
    list-style: none;
    margin: 0;
    padding: 0;
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 2px;
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li > a.db-pred-rail-btn,
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li > a.db-pred-settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-secondary, #64748b);
    text-decoration: none;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li > a > i {
    width: 16px;
    text-align: center;
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li > a:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
    color: var(--d3v-text-primary, #1e293b);
}
.db-prediction.dbp-host-rail-on .dbp-host-rail .pl-tabs-vertical > li.active > a,
.db-prediction.dbp-host-rail-on .dbp-host-rail .db-pred-settings-tab.active {
    background: var(--d3v-accent-soft, #eff6ff);
    color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: inset 2px 0 0 var(--d3v-accent-primary, #3b82f6);
}
.db-prediction.dbp-host-rail-on > .dbp-main {
    min-width: 0;
}

/* Updated by shashank2104 on 2026-07-07 - Prediction V2 - flush shell: no
   padding/gaps around the body; panels are flush and delineated only by the
   left rail's right-hand divider (the widgets carry their own headers). */
.db-prediction.dbp-ready .dbp-main {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
    position: relative;
    gap: 0;
    padding: 0;
    background: transparent;
}

.db-prediction.dbp-ready .dbp-main > .mlp-body {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    column-gap: 0;   /* panels sit flush; the left rail's border-right is the divider */
}

/* ── The 3 panels (inputs | canvas | analysis) sit flush ──
   Updated by shashank2104 on 2026-07-07 - Prediction V2 - drop the card
   border/radius/shadow (each widget already renders its own header). Only the
   left rail keeps a right-hand divider, highlighted on resize/hover. */
.db-prediction.dbp-ready .mlp-left,
.db-prediction.dbp-ready .mlp-right {
    background: var(--dbp-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    overflow: hidden;   /* clip content to the panel; the table scrolls internally */
    /** Added by shashank2104 on 08/21/2026 at 02:33 PM - z-index so the right pane stacks above the left rail **/
    z-index: 2;
}
.db-prediction.dbp-ready .mlp-left {
    border-right: 1px solid var(--dbp-line);
    transition: border-right-color .15s ease;
}
/* Highlight the divider while dragging the resizer, or when hovering it. */
.db-prediction.dbp-ready.mlp-resizing .mlp-left,
.db-prediction.dbp-ready .mlp-body:has(> .mlp-resizer:hover) .mlp-left {
    border-right-color: var(--dbp-brand);
}
/* Updated by shashank2104 on 2026-07-07 - Prediction V2 - drop the header's
   bottom rule so the top bar reads flush with the flattened shell below.
   Specificity must beat the shared base rule .pl-ml-prediction.modern .mlp-header. */
.db-prediction.pl-ml-prediction.modern .mlp-header {
    border-bottom: 0;
}

/* ═══════════════════ CHART-TYPE SWITCH (R2026-38) ═══════════════════ */
/* Added by shashank2104 on 2026-07-15 - R2026-38 - The header is an inline-size
   container so the chart-type buttons can shed their labels on a narrow canvas
   WITHOUT a JS resize listener. The prediction canvas is resized by the left-rail
   drag handle and by both side rails collapsing, so a viewport media query would
   be measuring the wrong box entirely - the header's own width is what decides
   whether the labels fit.

   Note on containment: container-type: inline-size implies `contain: layout`,
   which makes .mlp-header a containing block for absolutely-positioned
   descendants. That is already true here (the base rule sets position: relative),
   so the .mlp-dd-menu overflow menu anchors exactly as before. Layout containment
   does not clip - only `contain: paint` would - so the menu still overflows the
   header visually. */
.db-prediction.pl-ml-prediction.modern .mlp-header {
    container-type: inline-size;
    container-name: mlp-header;
}

/* True centring, not "centred in the leftover space". Flex spacers on either side
   split the space that is LEFT OVER by the title and the right-hand controls, so
   the group only lands dead-centre when those two happen to be the same width -
   and worse, it MOVES when they change. The .mlp-title "Inferences" chip renders
   in table view only, so switching Table -> Parallel dropped 100px off the left
   and slid the whole group 50px sideways: the buttons shift under the cursor as
   you click across them. Taking .viz-switch out of flow pins it to the header's
   real centre, so it stays put no matter what the title does. The header is
   already position: relative (and container-type makes it a containing block
   regardless), so this anchors to the header itself. */
.db-prediction.pl-ml-prediction.modern .mlp-header .viz-switch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Below this width the centred group would collide with the title / ⋯ controls,
   because an out-of-flow box reserves no space of its own. Drop back into the
   flex flow: the spacers push it off-centre again, but overlapping controls are
   a real bug where a few px of drift is not. */
@container mlp-header (max-width: 560px) {
    .db-prediction.pl-ml-prediction.modern .mlp-header .viz-switch {
        position: static;
        transform: none;
    }
}

/* Labels are hidden by default: icon-only is the safe state at any width. */
.db-prediction.pl-ml-prediction.modern .viz-switch button .vs-label {
    display: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Wide enough for icon + label. 720px is measured against the header, not the
   window: below it the labels start crowding the title and the ⋯ menu. */
@container mlp-header (min-width: 720px) {
    .db-prediction.pl-ml-prediction.modern .viz-switch button {
        width: auto;
        gap: 6px;
        padding: 0 9px;
    }
    .db-prediction.pl-ml-prediction.modern .viz-switch button .vs-label {
        display: inline;
    }
}

/* Keep the classic center content from bleeding past the card edge (fixes the
   "middle overlaps the analysis rail / table doesn't fit" cramping). */
.db-prediction.dbp-ready .mlp-right .mlp-viz-body,
.db-prediction.dbp-ready .mlp-right .pred-chart-container,
.db-prediction.dbp-ready .mlp-right .pred-chart {
    min-width: 0;
    max-width: 100%;
}

/* ═══════════════════ TOP STAT CARDS ═══════════════════ */
.db-prediction.dbp-ready .db-prediction-cards-region {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 12px 16px;
    overflow-x: auto;
    background: var(--dbp-surface);
    border-bottom: 1px solid var(--dbp-line);
}
.db-prediction.dbp-ready .db-prediction-cards-region::-webkit-scrollbar { height: 6px; }
.db-prediction.dbp-ready .db-prediction-cards-region::-webkit-scrollbar-thumb { background: var(--dbp-line-str); border-radius: 4px; }
.db-prediction.dbp-ready .db-prediction-cards-region:empty { display: none; }

/* Scalar prediction card */
.db-prediction .dbp-card {
    flex: 1 0 168px;
    min-width: 168px;
    max-width: 260px;
    text-align: left;
    background: var(--dbp-surface);
    /* border: 1px solid var(--dbp-line); */
    border: none;
    border-radius: var(--dbp-r-md);
    /* box-shadow: var(--dbp-sh-sm); */
    box-shadow: none;
    padding: 10px 12px 9px;
    cursor: pointer;
    transition: var(--dbp-t);
    position: relative;
    font-family: inherit;
}
.db-prediction .dbp-card:hover { box-shadow: var(--dbp-sh-md); transform: translateY(-1px); border-color: var(--dbp-line-str); }
.db-prediction .dbp-card:focus { outline: none; }
.db-prediction .dbp-card.is-sel { border-color: var(--dbp-brand); box-shadow: 0 0 0 3px var(--dbp-brand-bg), var(--dbp-sh-sm); }

.db-prediction .dbp-card-top { display: flex; align-items: center; gap: 8px; }
.db-prediction .dbp-card-name {
    flex: 1; min-width: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--dbp-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-prediction .dbp-card.is-sel .dbp-card-name { color: var(--dbp-brand-str); }

.db-prediction .dbp-chip {
    flex: 0 0 auto;
    font-size: 9.5px; font-weight: 700; line-height: 1;
    padding: 3px 7px; border-radius: 999px; white-space: nowrap; font-family: var(--mono);
}
.db-prediction .dbp-chip.g { color: var(--dbp-good); background: var(--dbp-good-bg); }
.db-prediction .dbp-chip.a { color: var(--dbp-warn); background: var(--dbp-warn-bg); }
.db-prediction .dbp-chip.b { color: var(--dbp-bad);  background: var(--dbp-bad-bg); }
.db-prediction .dbp-chip.n { color: var(--dbp-text-3); background: var(--dbp-surface-3); }

.db-prediction .dbp-card-val {
    font-family: var(--mono);
    font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--dbp-text);
    margin-top: 5px; line-height: 1.05;
    display: flex; align-items: baseline; gap: 7px;
}
.db-prediction .dbp-card-val .dbp-band { font-size: 11px; font-weight: 600; color: var(--dbp-text-3); }
.db-prediction .dbp-card-val.is-empty { color: var(--dbp-text-3); font-size: 15px; font-weight: 600; }

.db-prediction .dbp-card-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.db-prediction .dbp-delta {
    font-size: 9.5px; font-weight: 700; font-family: var(--mono);
    padding: 2px 7px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 3px;
}
.db-prediction .dbp-delta.up   { color: var(--dbp-good); background: var(--dbp-good-bg); }
.db-prediction .dbp-delta.down { color: var(--dbp-bad);  background: var(--dbp-bad-bg); }
.db-prediction .dbp-delta.flat { color: var(--dbp-text-3); background: var(--dbp-surface-3); }

.db-prediction .dbp-card-foot {
    margin-top: 7px; font-size: 9.5px; color: var(--dbp-text-3); font-family: var(--mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Curve summary card (peak / time / grade / accuracy / envelope) */
.db-prediction .dbp-sum {
    flex: 1 0 150px; min-width: 150px; max-width: 240px;
    background: var(--dbp-surface);
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-md);
    box-shadow: var(--dbp-sh-sm);
    padding: 10px 13px 9px;
    transition: var(--dbp-t);
}
.db-prediction .dbp-sum:hover { box-shadow: var(--dbp-sh-md); }
.db-prediction .dbp-sum-k {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--dbp-text-3); white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.db-prediction .dbp-sum-k .fa { font-size: 10px; opacity: .7; }
.db-prediction .dbp-sum-v {
    font-family: var(--mono); font-size: 19px; font-weight: 700; letter-spacing: -.02em;
    color: var(--dbp-text); margin-top: 4px; display: flex; align-items: baseline; gap: 5px;
}
.db-prediction .dbp-sum-v small { font-size: 11px; font-weight: 600; color: var(--dbp-text-3); }
.db-prediction .dbp-sum-v.grade-g { color: var(--dbp-good); }
.db-prediction .dbp-sum-v.grade-a { color: var(--dbp-warn); }
.db-prediction .dbp-sum-v.grade-b { color: var(--dbp-bad); }
.db-prediction .dbp-sum-s { font-size: 10px; color: var(--dbp-text-3); font-family: var(--mono); margin-top: 3px; }

/* ═══════════════════ RIGHT ANALYSIS RAIL ═══════════════════ */
.db-prediction.dbp-ready .db-prediction-analysis-region {
    flex: 0 0 var(--dbp-right-w);
    width: var(--dbp-right-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--dbp-surface);
    /* Spaced card (matches inputs + canvas panels) instead of a butted-on rail. */
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-lg);
    box-shadow: var(--dbp-sh-sm);
    overflow: hidden;
    transition: flex-basis .22s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1);
}
.db-prediction.dbp-ready.dbp-right-collapsed .db-prediction-analysis-region {
    flex-basis: 0; width: 0; border: 0; box-shadow: none;
}
.db-prediction .dbp-rail-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid var(--dbp-line);
    background: var(--dbp-surface);
}
.db-prediction .dbp-rail-title {
    flex: 1; min-width: 0;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--dbp-text);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.db-prediction .dbp-rail-title .fa { color: var(--dbp-brand); font-size: 11px; }
.db-prediction .dbp-rail-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 12px;
}
.db-prediction .dbp-rail-scroll::-webkit-scrollbar { width: 6px; }
.db-prediction .dbp-rail-scroll::-webkit-scrollbar-thumb { background: var(--dbp-line-str); border-radius: 4px; }

/* Analysis cards */
.db-prediction .dbp-ac {
    background: var(--dbp-surface);
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-lg);
    box-shadow: var(--dbp-sh-sm);
    overflow: hidden;
}
.db-prediction .dbp-ac-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 13px 8px;
    font-size: 11px; font-weight: 700; color: var(--dbp-text);
}
.db-prediction .dbp-ac-head .fa { color: var(--dbp-text-3); font-size: 10px; margin-right: 6px; }
.db-prediction .dbp-ac-body { padding: 2px 13px 12px; }

/* Trust rows (per-target R2 bars) */
.db-prediction .dbp-trust-row { padding: 6px 0; }
.db-prediction .dbp-trust-row + .dbp-trust-row { border-top: 1px dashed var(--dbp-line-2); }
.db-prediction .dbp-trust-top { display: flex; align-items: center; gap: 8px; }
.db-prediction .dbp-trust-name {
    flex: 1; min-width: 0; font-size: 11px; font-weight: 600; color: var(--dbp-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-prediction .dbp-trust-val { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--dbp-text); }
.db-prediction .dbp-trust-bar { display: block; height: 5px; border-radius: 3px; background: var(--dbp-surface-3); margin-top: 5px; overflow: hidden; }
.db-prediction .dbp-trust-fill { display: block; height: 100%; border-radius: 3px; transition: width .3s ease; }
.db-prediction .dbp-trust-fill.g { background: var(--dbp-good); }
.db-prediction .dbp-trust-fill.a { background: var(--dbp-warn); }
.db-prediction .dbp-trust-fill.b { background: var(--dbp-bad); }

/* Key/value list */
.db-prediction .dbp-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 11px; }
.db-prediction .dbp-kv + .dbp-kv { border-top: 1px dashed var(--dbp-line-2); }
.db-prediction .dbp-kv .k { color: var(--dbp-text-3); }
.db-prediction .dbp-kv .v { font-family: var(--mono); color: var(--dbp-text); font-weight: 650; text-align: right; }

/* Accuracy bins */
.db-prediction .dbp-bins { display: flex; gap: 5px; }
.db-prediction .dbp-bin { display: block; flex: 1; border-radius: var(--dbp-r-sm); padding: 7px 4px; text-align: center; }
.db-prediction .dbp-bin .n { display: block; font-size: 15px; font-weight: 700; font-family: var(--mono); line-height: 1; }
.db-prediction .dbp-bin .t { display: block; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; opacity: .85; margin-top: 3px; }
.db-prediction .dbp-bin.b1 { background: var(--dbp-good-bg); color: var(--dbp-good); }
.db-prediction .dbp-bin.b2 { background: var(--dbp-brand-bg); color: var(--dbp-brand-str); }
.db-prediction .dbp-bin.b3 { background: var(--dbp-warn-bg); color: var(--dbp-warn); }
.db-prediction .dbp-bin.b4 { background: var(--dbp-bad-bg); color: var(--dbp-bad); }

.db-prediction .dbp-ac-note { font-size: 9.5px; color: var(--dbp-text-3); line-height: 1.45; margin-top: 8px; }
.db-prediction .dbp-ac-empty { font-size: 10.5px; color: var(--dbp-text-3); padding: 4px 0 2px; line-height: 1.45; }

/* ═══════════════════ RAIL EDGE TOGGLES (one per rail, vertically centered) ═══════════════════
 * A single toggle per rail, anchored to the center panel's inner edges (= the boundaries
 * with each rail). They move with the center panel, so they hold the SAME centered position
 * in both the open and collapsed states - consistent + mirrored left/right. */
.db-prediction.dbp-ready .mlp-body  { position: relative; }
.db-prediction.dbp-ready .mlp-right { position: relative; }

.db-prediction .dbp-edge-toggle {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 22px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-md);
    background: var(--dbp-surface); color: var(--dbp-text-3);
    cursor: pointer; padding: 0; z-index: 9;
    box-shadow: var(--dbp-sh-sm); transition: var(--dbp-t); opacity: .5;
}
.db-prediction .mlp-right:hover .dbp-edge-toggle { opacity: .9; }
.db-prediction .dbp-edge-toggle:hover { opacity: 1; color: var(--dbp-brand); border-color: var(--dbp-brand); background: var(--dbp-brand-bg); }
.db-prediction .dbp-edge-toggle .fa { font-size: 14px; transition: transform .2s ease; }
.db-prediction .dbp-edge-toggle.left  { left: 6px; }
.db-prediction .dbp-edge-toggle.right { right: 6px; }
/* Collapsed → the chevron flips to point back toward the hidden rail = "expand". */
.db-prediction.dbp-left-collapsed  .dbp-edge-toggle.left  .fa { transform: rotate(180deg); }
.db-prediction.dbp-right-collapsed .dbp-edge-toggle.right .fa { transform: rotate(180deg); }
/* Left rail collapse: shrink the modern grid's first column to 0 */
.db-prediction.dbp-ready.dbp-left-collapsed .mlp-body { grid-template-columns: 0 1fr !important; }
.db-prediction.dbp-ready.dbp-left-collapsed .mlp-left { opacity: 0; pointer-events: none; }
.db-prediction.dbp-ready.dbp-left-collapsed .mlp-resizer { display: none; }

/* Focus / collapse toolbar buttons (rendered into the P1 toolbar region) */
.db-prediction .db-prediction-toolbar {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
}
.db-prediction .db-prediction-toolbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px;
    border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-md);
    background: var(--dbp-surface); color: var(--dbp-text-2);
    font-size: 11.5px; font-weight: 600; cursor: pointer; transition: var(--dbp-t); white-space: nowrap;
}
.db-prediction .db-prediction-toolbar-btn:hover { color: var(--dbp-brand-str); border-color: var(--dbp-brand); background: var(--dbp-brand-bg); }
.db-prediction .db-prediction-toolbar-btn.is-active {
    color: #fff; background: var(--dbp-brand); border-color: var(--dbp-brand);
    /* inset shadow fills the button so the active state survives the global dark
       "background-color: #333 !important" override (shadows are not overridden). */
    box-shadow: inset 0 0 0 999px var(--dbp-brand);
}
.db-prediction .db-prediction-toolbar-btn.is-active:hover { background: var(--dbp-brand-str); border-color: var(--dbp-brand-str); color: #fff; box-shadow: inset 0 0 0 999px var(--dbp-brand-str); }

/* Added by shashank2104 on 2026-07-17 - R2026-47 - The per-widget Export button (headerless predict
   widget) is an icon-only action; drop the toolbar-pill border/background override so it reads as a
   plain btn-outline-on-hover icon button (the default already looks good; outline appears on hover).
   Selector carries the .pl-ml-prediction.modern .mlp-header ancestry so it outweighs the broad
   `.pl-ml-prediction.modern .mlp-header .btn { border: 1px solid var(--mlp-line-2) }` rule in plugins.css. */
.pl-ml-prediction.modern .mlp-header .db-prediction-toolbar-btn[data-pred-action="widget-export"],
.db-prediction .db-prediction-toolbar-btn[data-pred-action="widget-export"] {
    border-color: transparent;
    background: transparent;
    padding: 0 8px;
}

/* ═══════════════════ SIDE PANEL (P1 seam - P3 feature UIs) ═══════════════════ */
/* Added by shashank2104 on 07/05/2026 - R2026-31 (QA #2) - The DOE/Upload/Inverse side
   panel was overlapped by the virtual table (its sticky pinned columns / header dropdowns
   carry z-index 100-2000) and by the floating Widget/Edit fab (z-index 50). Cap the table
   inside its own stacking context so those inner z-indexes can never escape above the drawer,
   and lift the drawer above the fab. */
.db-prediction .pred-chart {
    position: relative;
    z-index: 0;
    isolation: isolate;
}
/* Updated by shashank2104 on 2026-07-08 - CS-543 - wider default so the DOE sweep
   builder covers most of the center (.mlp-right) panel, with a maximize toggle to
   near-full-width for models with many input variables. Width transitions smoothly. */
.db-prediction .db-prediction-side-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 58%; min-width: 500px; max-width: 880px;
    background: var(--dbp-surface);
    border-left: 1px solid var(--dbp-line);
    box-shadow: -6px 0 24px rgba(0, 0, 0, .12);
    z-index: 60; display: flex; flex-direction: column;
    animation: dbp-slide-in .22s cubic-bezier(.4, 0, .2, 1);
    transition: width .22s cubic-bezier(.4, 0, .2, 1), max-width .22s cubic-bezier(.4, 0, .2, 1);
}
/* Maximized: near-full-width overlay for wide DOE sweeps. */
.db-prediction .db-prediction-side-panel.is-maximized {
    width: 98%; max-width: 1600px;
}
/* Added by shashank2104 on 2026-07-14 - DW-3157 - The z-index:60 above alone can't clear the
   dashboard's floating Widget/Edit FAB (z-index 50): the panel is trapped inside .db-widget-card's
   transform stacking context, which paints at level 0 within the shared modal context, so the FAB
   always won. Lift the whole widget card above the FAB while a panel is open (class toggled by
   openSidePanel/closeSidePanel) - the panel and its "Add points to grid" button then sit above it.
   Selector targets the host widget card (an ancestor of .db-prediction), so it can't be scoped
   under the plugin root. */
.db-widget-card.dbp-side-panel-open {
    position: relative;
    z-index: 60;
}
@keyframes dbp-slide-in { from { transform: translateX(102%); } to { transform: none; } }
.db-prediction .db-prediction-side-panel-header {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 15px; border-bottom: 1px solid var(--dbp-line);
}
.db-prediction .db-prediction-side-panel-title { font-size: 13px; font-weight: 700; color: var(--dbp-text); }
/* Header action cluster (maximize + close). */
.db-prediction .db-prediction-side-panel-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.db-prediction .db-prediction-side-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 15px; }

/* ═══════════════════ LEFT-RAIL FIELD POLISH ═══════════════════
 * Overlays on the existing noUiSlider fields: envelope band, extrapolation
 * zones, per-record ticks, out/near states, per-input lock, PDP sparkline. */

/* Field card state ring */
.db-prediction .dbp-field { border-radius: var(--dbp-r-md); transition: box-shadow .18s ease, border-color .18s ease; }
.db-prediction .dbp-field.is-near { box-shadow: inset 0 0 0 1px var(--dbp-warn); }
.db-prediction .dbp-field.is-out  { box-shadow: inset 0 0 0 1px var(--dbp-bad), 0 0 0 3px var(--dbp-bad-bg); }
.db-prediction .dbp-field.is-extrap { box-shadow: inset 0 0 0 1px var(--dbp-warn); }

/* Field head: top row is icon + name + unit + OUT/NEAR flag; the numeric
   range hint drops to its own line beneath the name (indented to align under
   the label) so long field names read cleaner instead of fighting the range.
   Selectors mirror the base plugins.css `.pl-ml-prediction.modern
   .pred-sliders > .form-group ...` chain (plus the `.db-prediction` root) so
   they outrank the base `.mlp-fh-range { flex: 0 0 auto }` rule and the range
   actually wraps to its own line. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh {
    display: flex; align-items: center; column-gap: 7px; row-gap: 3px; flex-wrap: wrap;
}
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .mlp-fh-icon { order: 0; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh > h1         { order: 1; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .mlp-fh-unit  { order: 2; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .dbp-flag     { order: 3; margin-left: auto; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .mlp-fh-range { order: 4; flex: 0 0 100%; margin-left: 29px; }

.db-prediction .dbp-flag {
    display: none; font-size: 8.5px; font-weight: 700; letter-spacing: .03em;
    padding: 1px 6px; border-radius: 999px; line-height: 1.4;
}
.db-prediction .dbp-flag.near { color: var(--dbp-warn); background: var(--dbp-warn-bg); }
.db-prediction .dbp-flag.out  { color: var(--dbp-bad);  background: var(--dbp-bad-bg); }
.db-prediction .dbp-field.is-near  .dbp-flag.near { display: inline-block; }
.db-prediction .dbp-field.is-out   .dbp-flag.out  { display: inline-block; }
.db-prediction .dbp-field.is-extrap .dbp-flag.near { display: inline-block; color: var(--dbp-warn); }

.db-prediction .dbp-lock {
    width: 22px; height: 22px; flex: 0 0 auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface); color: var(--dbp-text-3);
    cursor: pointer; font-size: 9.5px; transition: var(--dbp-t);
    /* Pin the lock to the far right of the field head - R2026-31 */
    margin-left: auto; order: 99;
}
.db-prediction .dbp-lock:hover { color: var(--dbp-brand); border-color: var(--dbp-brand); }
.db-prediction .dbp-lock.unlocked { color: var(--dbp-warn); border-color: var(--dbp-warn); background: var(--dbp-warn-bg); }

/** Added by shashank2104 on 08/19/2026 at 08:55 AM - R2026-43 - 3D measure control beside the lock. */
.db-prediction .dbp-measure {
    width: 22px; height: 22px; flex: 0 0 auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface); color: var(--dbp-text-3);
    cursor: pointer; font-size: 9.5px; transition: var(--dbp-t);
    margin-left: 4px; order: 100;
}
.db-prediction .dbp-measure:hover { color: var(--dbp-brand); border-color: var(--dbp-brand); }
.db-prediction .dbp-measure.is-armed {
    color: var(--dbp-brand); border-color: var(--dbp-brand); background: var(--dbp-brand-bg);
}
/** Added by shashank2104 on 08/19/2026 at 09:37 AM - R2026-43 - reset slider to training mean. **/
.db-prediction .dbp-mean {
    width: 22px; height: 22px; flex: 0 0 auto; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface); color: var(--dbp-text-3);
    cursor: pointer; font-size: 9.5px; transition: var(--dbp-t);
    margin-left: 4px; order: 100;
}
.db-prediction .dbp-mean:hover { color: var(--dbp-brand); border-color: var(--dbp-brand); }
.db-prediction .dbp-field .mlp-fh .dbp-mean { flex: 0 0 auto; margin-left: 4px; order: 6; }
.db-prediction .dbp-field .mlp-fh .dbp-measure { flex: 0 0 auto; margin-left: 4px; order: 7; }

/* Envelope overlay injected into the noUiSlider base */
.db-prediction .dbp-field .noUi-base { position: relative; }
.db-prediction .dbp-envwrap {
    position: absolute; left: 0; right: 0; top: 50%; height: 6px;
    transform: translateY(-50%); pointer-events: none; z-index: 1;
    border-radius: 3px; overflow: hidden;
}
.db-prediction .dbp-ext { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--dbp-line-2) 3px, var(--dbp-line-2) 4px); }
.db-prediction .dbp-envband {
    position: absolute; top: 0; bottom: 0;
    background: var(--dbp-brand-bg);
    border-left: 1px solid var(--dbp-brand); border-right: 1px solid var(--dbp-brand);
}
.db-prediction .dbp-field.is-out .dbp-envband,
.db-prediction .dbp-field.is-extrap .dbp-envband { background: var(--dbp-warn-bg); border-color: var(--dbp-warn); }
/* Fill from envelope-min to the live value (progress within the envelope) */
.db-prediction .dbp-envfill {
    position: absolute; top: 0; bottom: 0; border-radius: 3px;
    background: var(--dbp-brand); opacity: .5; transition: left .12s ease, width .12s ease;
}
.db-prediction .dbp-field.is-out .dbp-envfill,
.db-prediction .dbp-field.is-extrap .dbp-envfill { background: var(--dbp-warn); }
/* R2026-190 - ticks live in their own layer so the whole set can be replaced with one
   innerHTML write when the track range changes (see _dbpLayoutEnvelope). Stretched over the
   wrap so tick `left` percentages mean exactly what they did as direct children. */
.db-prediction .dbp-ticks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.db-prediction .dbp-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--dbp-line-str); opacity: .9; }

/* Keep the noUiSlider handle above the overlay */
.db-prediction .dbp-field .noUi-origin, .db-prediction .dbp-field .noUi-handle { z-index: 5; }

/* PDP sparkline under the slider */
.db-prediction .dbp-pdp { display: block; width: 100%; height: 24px; margin-top: 6px; opacity: .9; }
.db-prediction .dbp-pdp-line { stroke: var(--dbp-brand-str); stroke-width: 1.4; }
.db-prediction .dbp-pdp-dot  { fill: var(--dbp-brand); }
.db-prediction .dbp-field.is-out .dbp-pdp-dot, .db-prediction .dbp-field.is-extrap .dbp-pdp-dot { fill: var(--dbp-warn); }

/* ═══════════════════ CURVE-INPUT WIDGET (FormBuilder vector input) ═══════════════════
 * The curve input is a FormBuilder FormInputRenderer (type:'vector') - a full
 * Bootstrap-grid "simple" form crammed into the rail. We can't slim it structurally
 * from P2 (that's a FormInputRenderer/PredictionUtil change), so we skin the rendered
 * DOM under the field to read as a first-class Option A field. Tightly scoped to
 * `.mlp-curve-field` / `.curve-input-container` so nothing leaks to other FB inputs. */
.db-prediction .mlp-curve-field .d3view-form-builder-container,
.db-prediction .mlp-curve-field .d3view-inputsBuilder,
.db-prediction .mlp-curve-field .inputs-builder-container,
.db-prediction .mlp-curve-field .col-md-12,
.db-prediction .mlp-curve-field .field-item,
.db-prediction .mlp-curve-field .input-value-container,
.db-prediction .mlp-curve-field .input-value {
    margin: 0 !important; padding: 0 !important; background: transparent;
}
.db-prediction .mlp-curve-field .field-item { border: 0 !important; box-shadow: none !important; }

/* Added by shashank2104 on 09/08/2026 - let the widget's own menus escape the field.
   formbuilder.css sets `div.d3view-inputsBuilder div.inputs-list ul.field-items { overflow: auto }`
   and `.full-h` bounds its height, which inside this narrow rail did two unwanted things: the field
   grew its OWN inner scrollbar next to the curve, and it clipped every dropdown the curve actions
   open (the ⋮ menu was cut off mid-item, per the screenshot). This field holds exactly one input,
   so it has nothing of its own to scroll - `.pred-input-container` already owns scrolling for the
   whole inputs pane. Hand it back and let the menus overflow.
   !important is needed because formbuilder's rule carries `.full-h`/height rules we cannot outrank
   on specificity alone; scoped to `.mlp-curve-field` so no other FormBuilder input is affected. */
.db-prediction .mlp-curve-field ul.field-items,
.db-prediction .mlp-curve-field .inputs-list,
.db-prediction .mlp-curve-field .inputs-view-content,
.db-prediction .mlp-curve-field .inputs-builder-container,
.db-prediction .mlp-curve-field .d3view-inputsBuilder {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* The escaped menu has to paint ABOVE the fields below it, and Bootstrap's own
   `.dropdown-menu` z-index is scoped to its stacking context, not this rail. */
.db-prediction .mlp-curve-field .dropdown-menu,
.db-prediction .mlp-curve-field .btn-group .dropdown-menu {
    z-index: 1060;
}

/* The upload dropzone - premium, rounded, compact */
.db-prediction .mlp-curve-field .wf-dropzone.file-upload {
    /* !important: overrides Dropzone.js's more-specific `border: 2px dashed #ddd` */
    border: 1.5px dashed var(--dbp-line-str) !important;
    border-radius: var(--dbp-r-md);
    background: var(--dbp-surface-2);
    padding: 14px 10px;
    min-height: 62px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; cursor: pointer; transition: var(--dbp-t);
}
.db-prediction .mlp-curve-field .wf-dropzone.file-upload:hover {
    border-color: var(--dbp-brand) !important; background: var(--dbp-brand-bg);
}
.db-prediction .mlp-curve-field .wf-dropzone.file-upload .dz-message {
    margin: 0; font-size: 11px; font-weight: 600; color: var(--dbp-text-3); line-height: 1.4;
}
.db-prediction .mlp-curve-field .wf-dropzone.file-upload:hover .dz-message { color: var(--dbp-brand-str); }

/* Action buttons (Extract / Edit / Toggle) - compact, tokenized, wrap in the rail */
.db-prediction .mlp-curve-field .clearfix.text-right,
.db-prediction .mlp-curve-field .curve-actions {
    display: flex; flex-wrap: wrap; gap: 6px; text-align: left; margin-top: 8px;
}
.db-prediction .mlp-curve-field .btn.btn-default {
    background: var(--dbp-surface); color: var(--dbp-text-2);
}
.db-prediction .mlp-curve-field .btn.btn-default:hover {
    border-color: var(--dbp-brand); color: var(--dbp-brand-str); background: var(--dbp-brand-bg);
}
.db-prediction .mlp-curve-field .btn.btn-primary {
    background: var(--dbp-brand); border-color: var(--dbp-brand); color: #fff;
}
.db-prediction .mlp-curve-field .btn.btn-primary:hover { background: var(--dbp-brand-str); border-color: var(--dbp-brand-str); }

/* Handsontable (shown on "Toggle table") - tokenized, contained */
.db-prediction .mlp-curve-field .handsontable_container:not(.hidden) { margin-top: 8px; border: 1px solid var(--dbp-line); border-radius: var(--dbp-r-sm); overflow: hidden; }
.db-prediction .mlp-curve-field .handsontable { font-size: 11px; }

/* ═══════════════════ RUN-HISTORY STRIP ═══════════════════ */
.db-prediction .dbp-history {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; overflow-x: auto;
    border-bottom: 1px solid var(--dbp-line); background: var(--dbp-surface);
}
.db-prediction .dbp-history::-webkit-scrollbar { height: 5px; }
.db-prediction .dbp-history::-webkit-scrollbar-thumb { background: var(--dbp-line-str); border-radius: 4px; }
.db-prediction .dbp-history-lbl {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--dbp-text-3);
}
.db-prediction .dbp-hchip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--dbp-line); border-radius: 999px;
    background: var(--dbp-surface); color: var(--dbp-text-2);
    padding: 3px 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
    cursor: pointer; transition: var(--dbp-t);
}
.db-prediction .dbp-hchip:hover { border-color: var(--dbp-brand); color: var(--dbp-brand-str); box-shadow: var(--dbp-sh-sm); }
.db-prediction .dbp-hchip.is-sel { border-color: var(--dbp-brand); color: var(--dbp-brand-str); background: var(--dbp-brand-bg); }
.db-prediction .dbp-hchip.is-sel .fa { color: var(--dbp-brand); }
.db-prediction .dbp-hchip .fa { font-size: 9px; color: var(--dbp-text-3); }
.db-prediction .dbp-hchip b { color: var(--dbp-text); font-family: var(--mono); font-weight: 700; }

/* ═══════════════════ DARK THEME ═══════════════════
 * This app's dark mode is a brute-force global override
 * (body[data-theme="dark"] * { background:#333 !important; color:#fff }) rather
 * than token-driven - the --d3v-* foundation vars do NOT flip. So we flip our
 * own --dbp-* tokens here (text/borders/surfaces) to keep text + borders legible.
 * Solid backgrounds are already forced to #333 by the global rule (consistent);
 * <span> elements are excluded from that rule, which is why chips/trust-fills/bins
 * are rendered as spans so their semantic color survives. */
body[data-theme="dark"] .db-prediction {
    --dbp-surface:   #333333;
    --dbp-surface-2: #2c2c2c;
    --dbp-surface-3: #3d3d3d;
    --dbp-line:      rgba(255, 255, 255, .14);
    --dbp-line-2:    rgba(255, 255, 255, .08);
    --dbp-line-str:  rgba(255, 255, 255, .26);
    --dbp-text:      var(--dark-text-color, #F3F4F6);
    --dbp-text-2:    rgba(255, 255, 255, .74);
    --dbp-text-3:    rgba(255, 255, 255, .50);
}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width: 1180px) {
    .db-prediction { --dbp-right-w: 264px; }
}
@media (max-width: 980px) {
    .db-prediction.dbp-ready .db-prediction-analysis-region { flex-basis: 0; width: 0; border-left: 0; }
}

/* ============================================================================
   R2026-31 - Prediction canvas empty-state (modern enterprise placeholder).
   Rendered by the view (#d3view-db-prediction-empty-tpl) when there are no rows
   to predict. Buttons forward to the Upload / DOE / Inverse toolbar actions.
   Scoped under .db-prediction; all colour/shadow/radius via --d3v-* tokens so it
   adapts to light + dark automatically.
   ============================================================================ */
.db-prediction .dbp-empty {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.db-prediction .dbp-empty-card {
    width: 100%;
    max-width: 560px;
    text-align: center;
}
.db-prediction .dbp-empty-badge {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--d3v-accent-primary, #2563EB), var(--d3v-accent-primary-hover, #1D4ED8));
    box-shadow: var(--d3v-sh-md, 0 6px 16px rgba(37, 99, 235, .28));
}
.db-prediction .dbp-empty-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--d3v-text-primary, #0F172A);
}
.db-prediction .dbp-empty-sub {
    margin: 8px auto 0;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--d3v-text-tertiary, #64748B);
}
.db-prediction .dbp-empty-sub b { color: var(--d3v-text-secondary, #334155); font-weight: 700; }
.db-prediction .dbp-empty-targets { color: var(--d3v-accent-primary, #2563EB); font-weight: 600; }

/** Added by shashank2104 on 2026-07-17 - R2026-47 - Simple "use the left panel" hint that replaces the
 *  Upload / Sampling CTA buttons in the empty state. Soft info banner, tokenized, scoped under .db-prediction. */
.db-prediction .dbp-empty-hint {
    margin: 22px auto 0;
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #334155);
    background: var(--d3v-accent-soft, #EFF6FF);
    border: 1px solid var(--d3v-border-default, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
}
.db-prediction .dbp-empty-hint > i {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--d3v-accent-primary, #2563EB);
}
.db-prediction .dbp-empty-hint b { color: var(--d3v-text-primary, #0F172A); font-weight: 700; }

/** Added by shashank2104 on 2026-07-17 - R2026-47 - With zero input rows the main canvas shows the
 *  "Ready to predict" empty-state, so the header controls that address a chart that isn't there are
 *  meaningless: the chart-type switch (Table / Curve / Heatmap) AND the ... overflow menu (whose rows are
 *  all chart/view settings - reference data, curve-input, heatmap, plot-against-input). Hide both while
 *  the canvas is empty (flag set in renderVizByType); they return the moment there are rows to plot. */
.db-prediction.dbp-canvas-empty .ml-predict-header .viz-switch,
.db-prediction.dbp-canvas-empty .ml-predict-header .mlp-dd.settings-dd { display: none; }

/** Added by shashank2104 on 07/20/2026 at 03:12 PM - consistent in-chart spinner while Wall Force /
 *  sparkline_matrix / Render-in-Simlytiks builds (Prediction tab blank-canvas fix). */
/** Updated by shashank2104 on 07/20/2026 at 04:39 PM - absolute overlay so Predicting/Building
 *  stay visible while the matrix mounts underneath (no empty flash). */
.db-prediction .pred-chart.dbp-chart-busy,
.db-prediction .pred-chart {
    position: relative;
}
.db-prediction .wf-sparkline-mount {
    min-height: 100%;
    height: 100%;
    width: 100%;
}
.db-prediction .dbp-chart-loading,
.db-prediction .dbp-chart-loading-overlay,
.dbp-sl-pane .dbp-chart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    padding: 24px;
    color: var(--d3v-text-secondary, #64748B);
    background: var(--d3v-bg-surface, #fff);
}
.db-prediction .dbp-chart-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    min-height: 100%;
    background: var(--d3v-bg-surface, rgba(255, 255, 255, 0.96));
}
.db-prediction .dbp-chart-loading-icon,
.dbp-sl-pane .dbp-chart-loading-icon {
    color: var(--d3v-accent-primary, #2563EB);
    opacity: 0.85;
}
.db-prediction .dbp-chart-loading-msg,
.dbp-sl-pane .dbp-chart-loading-msg {
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    max-width: 280px;
}

.db-prediction .dbp-empty-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.db-prediction .dbp-empty-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--d3v-border-default, #E2E8F0);
    border-radius: var(--d3v-r-lg, 12px);
    background: var(--d3v-bg-primary, #FFFFFF);
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}
.db-prediction .dbp-empty-action:hover {
    border-color: var(--d3v-accent-primary, #2563EB);
    box-shadow: var(--d3v-sh-md, 0 6px 18px rgba(15, 23, 42, .10));
    transform: translateY(-1px);
    background: var(--d3v-bg-primary, #FFFFFF);
}
.db-prediction .dbp-empty-action:focus-visible {
    outline: none;
    border-color: var(--d3v-accent-primary, #2563EB);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, #EFF6FF);
}
.db-prediction .dbp-ea-ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    color: var(--d3v-accent-primary, #2563EB);
    background: var(--d3v-accent-soft, #EFF6FF);
    transition: transform .16s ease;
}
.db-prediction .dbp-empty-action:hover .dbp-ea-ic { transform: scale(1.05); }
.db-prediction .dbp-ea-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-prediction .dbp-ea-t { font-size: 14px; font-weight: 600; color: var(--d3v-text-primary, #0F172A); }
.db-prediction .dbp-ea-d { font-size: 12px; color: var(--d3v-text-tertiary, #64748B); }
.db-prediction .dbp-ea-go {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--d3v-text-quaternary, #94A3B8);
    transition: transform .16s ease, color .16s ease;
}
.db-prediction .dbp-empty-action:hover .dbp-ea-go { color: var(--d3v-accent-primary, #2563EB); transform: translateX(3px); }

/* Per-action accent tinting of the icon chip for quick visual scanning. */
.db-prediction .dbp-empty-action[data-pred-action="dbp-doe"] .dbp-ea-ic {
    color: var(--d3v-accent-violet, #7C3AED);
    background: var(--d3v-accent-violet-soft, rgba(124, 58, 237, .10));
}
.db-prediction .dbp-empty-action[data-pred-action="dbp-doe"]:hover { border-color: var(--d3v-accent-violet, #7C3AED); }
.db-prediction .dbp-empty-action[data-pred-action="dbp-doe"]:hover .dbp-ea-go { color: var(--d3v-accent-violet, #7C3AED); }
.db-prediction .dbp-empty-action[data-pred-action="dbp-inverse"] .dbp-ea-ic {
    color: var(--d3v-status-warning, #D97706);
    background: var(--d3v-status-warning-soft, rgba(217, 119, 6, .10));
}
.db-prediction .dbp-empty-action[data-pred-action="dbp-inverse"]:hover { border-color: var(--d3v-status-warning, #D97706); }
.db-prediction .dbp-empty-action[data-pred-action="dbp-inverse"]:hover .dbp-ea-go { color: var(--d3v-status-warning, #D97706); }

/* =====================================================================
 * R2026-31 - Field-head enhancements (moved here from plugins.css; these
 * belong with Prediction V2). Scoped under `.db-prediction` (the view
 * root, which also carries `.pl-ml-prediction.modern`), so the extra
 * `.db-prediction` class raises specificity above the base plugins.css
 * `.pl-ml-prediction.modern ...` rule and the override wins. The
 * `--mlp-*` tokens resolve from the same root, so they still apply.
 * ===================================================================== */

/* Larger field label (base plugins.css sets 13px). */
/* .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group h1,
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group h1.mb20 {
    font-size: 16px !important;
} */

/* Leading type icon on the field head (number / curve / text). */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: var(--mlp-r-sm, 6px);
    background: var(--mlp-surface-2);
    color: var(--mlp-accent);
    font-size: 12px;
    line-height: 1;
}
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh-icon i {
    font-size: 12px;
}

/* =====================================================================
 * R2026-31 - Left-rail segmented toggle: [ Inputs ][ Optimize ].
 * .mlp-left becomes a flex column: [ segmented pill | active panel(fills) ].
 * Only one panel is visible at a time (toggle, not collapsible):
 *   Inputs   -> .pred-container  (sliders + NAME + Predict button)
 *   Optimize -> .dbp-lsec-optimize  (goal-seek / inverse solver)
 * Scoped + token-driven (light/dark).
 * ===================================================================== */
.db-prediction.dbp-ready .mlp-left.dbp-left-sectioned {
    display: flex;
    flex-direction: column;
}

/* ── Segmented pill (matches the viz switcher styling) ── */
.db-prediction .dbp-lseg {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    margin: 10px 10px 8px;
    padding: 3px;
    background: var(--dbp-surface-2);
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-md);
}
.db-prediction .dbp-lseg-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--dbp-r-sm);
    background: transparent;
    color: var(--dbp-text-2);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--dbp-t);
}
.db-prediction .dbp-lseg-btn i { font-size: 11px; color: var(--dbp-text-3); transition: var(--dbp-t); }
.db-prediction .dbp-lseg-btn:hover { color: var(--dbp-text); background: var(--dbp-surface-3); }
.db-prediction .dbp-lseg-btn.is-active {
    background: var(--dbp-surface);
    color: var(--dbp-brand-str);
    box-shadow: var(--dbp-sh-sm);
}
.db-prediction .dbp-lseg-btn.is-active i { color: var(--dbp-brand); }

/* ── Inputs ⋯ menu (R2026-38) ──────────────────────────────────────────────
   Added by shashank2104 on 2026-07-15 - R2026-38 - The rail's own overflow, minted into the pill by
   PredictionView.layout.js (_dbpEnsureLeftMenu). Sized to the pill's segments so it reads as the pill's
   trailing affordance rather than a third tab; the menu body itself is the shared .mlp-dd-menu.
   Input-scoped options only, so it is irrelevant on the Optimize panel - hidden there. */
.db-prediction .dbp-lseg-dd { flex: 0 0 auto; display: flex; }
.db-prediction .mlp-left.dbp-lmode-optimize .dbp-lseg-dd { display: none; }
/* Updated by shashank2104 on 07/15/2026 at 12:01 PM - R2026-38 - Inputs ⋯ (value boxes / PDP
   sparklines) only applies to the Sliders pane; hide on Upload and Sampling. */
.db-prediction .mlp-left.dbp-imode-upload .dbp-lseg-dd,
.db-prediction .mlp-left.dbp-imode-sampling .dbp-lseg-dd { display: none; }
/* The shared .mlp-dd-menu is right-anchored, which suits a ⋯ at the far right of a header. This one
   sits mid-pill (right after Inputs), where right-anchoring would throw the menu off the rail's left
   edge - so open it rightward from the trigger instead.
   Updated by shashank2104 on 07/15/2026 at 12:00 PM - R2026-38 - Narrow menu: label above checkbox
   so it does not overflow the rail on small screens. Must out-specify
   .pl-ml-prediction.modern .mlp-dd-row (display:flex !important / nowrap). */
.db-prediction .dbp-lseg-dd .mlp-dd-menu {
    right: auto;
    left: 0;
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 24px);
}
.db-prediction.pl-ml-prediction.modern .dbp-lseg-dd .mlp-dd-row,
.db-prediction.pl-ml-prediction.modern .dbp-lseg-dd label.mlp-dd-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
}
.db-prediction.pl-ml-prediction.modern .dbp-lseg-dd .mlp-dd-row > span:first-child {
    flex: 0 0 auto;
    white-space: normal;
}
.db-prediction.pl-ml-prediction.modern .dbp-lseg-dd .mlp-dd-row > .sw {
    margin-left: 0;
}

/* "New points" top/bottom segmented control (R2026-38).
   Added by shashank2104 on 2026-07-15 - deliberately NOT a checkbox: its siblings here are true
   on/off toggles, and "Add at bottom: off" does not tell you where the point actually goes.
   Borrows the header .viz-switch segmented language so the two read as the same kind of control.
   The rail menu stacks label-above-control (rule above), so this sits under its "New points" label. */
.db-prediction.pl-ml-prediction.modern .dbp-newpos-seg {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    background: var(--mlp-surface-2);
    border: 1px solid var(--mlp-line-2);
    border-radius: var(--mlp-r-md);
    padding: 3px;
    gap: 2px;
}
.db-prediction.pl-ml-prediction.modern .dbp-newpos-btn {
    flex: 1 1 0;
    border: 0;
    background: transparent;
    height: 24px;
    padding: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--mlp-text-3);
    transition: var(--mlp-t);
}
.db-prediction.pl-ml-prediction.modern .dbp-newpos-btn:hover {
    color: var(--mlp-text-2);
}
.db-prediction.pl-ml-prediction.modern .dbp-newpos-btn.is-active {
    background: var(--mlp-surface);
    color: var(--mlp-accent);
    box-shadow: var(--mlp-sh-xs);
}
.db-prediction.pl-ml-prediction.modern .dbp-newpos-btn:focus-visible {
    outline: 2px solid var(--mlp-accent);
    outline-offset: 1px;
}
.db-prediction .dbp-lseg-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--dbp-r-sm);
    background: transparent;
    color: var(--dbp-text-3);
    font-size: 12px;
    cursor: pointer;
    transition: var(--dbp-t);
}
.db-prediction .dbp-lseg-more:hover { color: var(--dbp-text); background: var(--dbp-surface-3); }
.db-prediction .dbp-lseg-dd.open .dbp-lseg-more {
    color: var(--dbp-brand-str);
    background: var(--dbp-surface);
    box-shadow: var(--dbp-sh-sm);
}
.db-prediction .dbp-lseg-more:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbp-brand-bg);
}

/* ── Input-mode switch (R2026-38) ──────────────────────────────────────────
   Updated by shashank2104 on 2026-07-15 - R2026-38 - The three ways to add input rows are one
   switch, not two buttons that opened a sidebar. Sliders / Upload / Sampling are peers, so they
   read as a switch and swap the pane below. Quieter than the [Inputs][Optimize] pill above it
   (no tray background, underline instead of a raised chip) so the rail has one primary toggle and
   one secondary — two identical pills stacked would fight each other for the eye.
   Filled by PredictionView.features.js (INPUT_MODES); container minted by PredictionView.layout.js. */
.db-prediction .dbp-imode {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
    margin: 0 10px 8px;
    border-bottom: 1px solid var(--dbp-line);
}
/* _dbpSetLeftPanel toggles dbp-lmode-* on .mlp-left (the rail), not on the view root. */
.db-prediction .mlp-left.dbp-lmode-optimize .dbp-imode { display: none; }
.db-prediction .dbp-imode-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--dbp-text-2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--dbp-t);
}
.db-prediction .dbp-imode-btn i { font-size: 11px; color: var(--dbp-text-3); transition: var(--dbp-t); }
.db-prediction .dbp-imode-btn:hover { color: var(--dbp-text); }
.db-prediction .dbp-imode-btn:hover i { color: var(--dbp-brand); }
.db-prediction .dbp-imode-btn.is-active {
    color: var(--dbp-brand-str);
    border-bottom-color: var(--dbp-brand);
    font-weight: 700;
}
.db-prediction .dbp-imode-btn.is-active i { color: var(--dbp-brand); }
.db-prediction .dbp-imode-btn:focus-visible {
    outline: none;
    border-radius: var(--dbp-r-sm) var(--dbp-r-sm) 0 0;
    box-shadow: 0 0 0 3px var(--dbp-brand-bg);
}

/* Added by shashank2104 on 2026-07-07 - Prediction V2 - count badge on the Inputs / Model outputs
   tabs (replaces the old header io-chips). Neutral by default, brand-tinted on the active tab. */
.db-prediction .dbp-seg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--dbp-surface-3);
    color: var(--dbp-text-3);
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--mono);
    line-height: 1;
    transition: var(--dbp-t);
}
.db-prediction .dbp-lseg-btn.is-active .dbp-seg-badge,
.db-prediction .dbp-rseg-btn.is-active .dbp-seg-badge {
    background: var(--dbp-brand-bg);
    color: var(--dbp-brand-str);
}

/* Added by shashank2104 on 2026-07-07 - Prediction V2 - hide relocated ⋯ settings rows.
   .pl-ml-prediction.modern .mlp-dd-row is display:flex !important (0,3,1), so this hide rule
   must out-specify it (0,4,0) while also being !important. */
.db-prediction.pl-ml-prediction.modern .dbp-dd-hidden { display: none !important; }

/* Updated by shashank2104 on 2026-07-07 - Prediction V2 - name is a plain stacked
   field (label on top, input below) with no card/border/shadow - reads like any
   other input. Strips the modern .pred-sliders > .form-group card treatment. */
.db-prediction .dbp-name-row {
    display: block;
    margin: 0 0 14px;
}
.db-prediction .dbp-name-lbl {
    display: block;
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dbp-text-3);
    white-space: nowrap;
}
.db-prediction .dbp-name-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 34px;
    font-size: 12.5px;
}
/* Beat the plugins.css card rule (.pl-ml-prediction.modern .pred-sliders > .form-group,
   which is !important) the same way .dbp-field does - high specificity + !important. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.dbp-name-row {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}

/* ── Panel visibility (toggle) ── */
.db-prediction.dbp-ready .mlp-left.dbp-left-sectioned > .pred-container {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: auto;
}
.db-prediction.dbp-ready .mlp-left.dbp-lmode-optimize > .pred-container { display: none; }
.db-prediction.dbp-ready .mlp-left.dbp-lmode-inputs   > .dbp-lsec-optimize { display: none; }

/* ── The rail's one run control (R2026-38) ─────────────────────────────────
   Added by shashank2104 on 2026-07-15. Pinned below whichever pane is showing, outside them all, because
   it belongs to the panel rather than to any one mode. Filled by PredictionView.features.js. */
.db-prediction.dbp-ready .mlp-left.dbp-left-sectioned > .dbp-foot {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--dbp-line);
    background: var(--dbp-surface);
}
/* Carries the modern Predict skin forward. That skin lives in plugins.css keyed on the CLASS
   `.pl-ml-prediction.modern button.btn.predict` (accent fill, 36px, 650 weight, --mlp-r-md, no
   shadow), so moving the control to .dbp-foot-btn silently dropped it back to stock Bootstrap
   btn-primary. Re-stated here rather than by adding `.predict` to the button, for two reasons: that
   class is what predictUtil greps for (harmless while its lookups stay scoped to .pred-container,
   but not something to depend on), and the skin's `background: ... !important` would out-rank
   .btn-danger and repaint the Stop state accent-blue. The --dbp-* tokens below resolve to the very
   same --d3v-* values as the --mlp-* ones the original used. */
.db-prediction .dbp-foot-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Height + vertical padding intentionally left to btn-sm (default) - Shashank, 2026-07-17. */
    font-size: 13px;
    font-weight: 650;
    border-radius: var(--dbp-r-md);
    box-shadow: none;
    transition: var(--dbp-t);
}
.db-prediction .dbp-foot-btn i { font-size: 13px; }
/* Accent fill for every state EXCEPT Stop, which must stay red — that is the whole point of it. */
.db-prediction .dbp-foot-btn.btn-primary {
    background: var(--dbp-brand);
    border-color: var(--dbp-brand);
    color: #fff;
}
.db-prediction .dbp-foot-btn.btn-primary:hover:not(:disabled),
.db-prediction .dbp-foot-btn.btn-primary:focus:not(:disabled) {
    background: var(--dbp-brand-str);
    border-color: var(--dbp-brand-str);
    color: #fff;
}
/* Stop state. Flat red to match the flat accent above it: Bootstrap paints .btn-danger with a
   background-IMAGE gradient, which survives a background-color override (it is a different property)
   and would leave Stop looking like a stock BS3 button next to a modern one. The `background`
   shorthand resets background-image to none. */
.db-prediction .dbp-foot-btn.btn-danger {
    background: var(--d3v-danger, #EF4444);
    border-color: var(--d3v-danger, #EF4444);
    color: #fff;
}
.db-prediction .dbp-foot-btn.btn-danger:hover:not(:disabled),
.db-prediction .dbp-foot-btn.btn-danger:focus:not(:disabled) {
    background: var(--d3v-status-danger, #DC2626);
    border-color: var(--d3v-status-danger, #DC2626);
    color: #fff;
}
.db-prediction .dbp-foot-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbp-brand-bg);
}
.db-prediction .dbp-foot-btn:disabled { opacity: .55; cursor: default; }

/* predictUtil renders its own .predict inside .pred-container. It stays in the DOM and keeps its whole
   Predict/Stop state machine — the footer button drives it and mirrors it back (features.js
   _onFooterClick / _watchPredictState) — but it must not be a SECOND visible run button in the sliders
   pane. Hidden, not removed: removing it would strip the machine the footer depends on. */
.db-prediction.dbp-ready .mlp-left .pred-container .predict { display: none !important; }
/* ...and reclaim the space it was holding. The helper template hard-codes
   `height: calc(100% - 90px)` inline on .pred-input-container to leave room for that button, so hiding it
   alone would leave a 90px dead strip under the sliders. Inline style, hence !important. */
.db-prediction.dbp-ready .mlp-left .pred-container .pred-input-container { height: 100% !important; }

/* Added by shashank2104 on 2026-07-15 - R2026-38 - Input-mode panes. Same flex contract as
   .pred-container so all three modes fill the rail identically and scroll internally rather than
   growing it. Default-hidden: _dbpSetInputMode reveals exactly one via dbp-imode-* on the rail, and
   the optimize toggle (dbp-lmode-optimize) hides the whole set regardless of which mode is active —
   the two toggles compose without either needing to know about the other. */
.db-prediction.dbp-ready .mlp-left.dbp-left-sectioned > .dbp-ipane {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 10px 10px;
}
.db-prediction.dbp-ready .mlp-left.dbp-lmode-inputs.dbp-imode-upload   > .dbp-ipane-upload,
.db-prediction.dbp-ready .mlp-left.dbp-lmode-inputs.dbp-imode-sampling > .dbp-ipane-sampling {
    display: flex;
    flex-direction: column;
}
/* Sliders are the .pred-container itself — hide it whenever another mode owns the pane area. */
.db-prediction.dbp-ready .mlp-left.dbp-imode-upload   > .pred-container,
.db-prediction.dbp-ready .mlp-left.dbp-imode-sampling > .pred-container { display: none; }

/* Optimize panel */
.db-prediction .dbp-lsec-optimize {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    background: var(--dbp-surface);
    display: flex;
    flex-direction: column;
}
.db-prediction .dbp-opt-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dbp-text);
    border-bottom: 1px solid var(--dbp-line);
    z-index: 2;
    overflow: visible;
}
.db-prediction .dbp-opt-head i { color: var(--dbp-brand); }
/** Added by shashank2104 on 08/20/2026 at 04:26 PM - R2026-47 - import + clear sit on the right of Compute Inputs **/
.db-prediction .dbp-opt-head-actions {
    margin-left: auto;
}

.db-prediction .dbp-lsec-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px 14px;
    overflow: auto;
}
.db-prediction .dbp-opt-objline {
    /** Updated by shashank2104 on 2026-07-08 - R2026-31 - override the global
     *  `div.simlytiks label { display:inline-block !important }` rule so the Objective
     *  label and dropdown sit at opposite ends (label left, select right). */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dbp-text-2);
    margin: 4px 0 12px;
}
.db-prediction .dbp-opt-objective {
    padding: 6px 9px;
    border: 1px solid var(--dbp-line-str);
    border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface);
    color: var(--dbp-text);
    font-size: 12px;
    font-weight: 600;
}
.db-prediction .dbp-opt-rows-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dbp-text-3);
    margin-bottom: 6px;
}
.db-prediction .dbp-opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.db-prediction .dbp-opt-t {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--dbp-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-prediction .dbp-opt-val {
    flex: 0 0 92px;
    width: 92px;
    padding: 5px 8px;
    border: 1px solid var(--dbp-line-str);
    border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface);
    color: var(--dbp-text);
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.db-prediction .dbp-opt-val:focus {
    outline: none;
    border-color: var(--dbp-brand);
    box-shadow: 0 0 0 3px var(--dbp-brand-bg);
}
/* R2026-38 - .dbp-opt-run is gone; the rail footer runs the optimize. */
.db-prediction .dbp-opt-note {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--dbp-text-3);
}

/* =====================================================================
 * R2026-31 Phase 1 - input SLIDER skin (match the mockup exactly).
 * CSS-only: the field DOM already has every piece (col-slider.noUi-target,
 * dbp-envband/dbp-envfill, noUi-handle, dbp-tick, mlp-mm, dbp-flag).
 * Thin gradient track + small white knob + clean mono ends + no pip clutter.
 * ===================================================================== */
/* Input ROW - flush one after another, no card, no grey (match mockup).
   High specificity (.pl-ml-prediction.modern ...) to beat the existing modern field rules. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.dbp-field {
    border: 0 !important;
    border-bottom: 1px solid var(--dbp-line-2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 2px 13px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.dbp-field:last-child { border-bottom: 0; }

/* Updated by shashank2104 on 2026-07-07 - R2026-31 - flatten the curve-input field:
   strip the card border/radius/shadow/grey so it reads as clean as the numeric rows. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.mlp-curve-field {
    border: 0 !important;
    border-bottom: 1px solid var(--dbp-line-2) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 2px 13px !important;
    margin: 0 !important;
}
/* Also flatten the inner grey wrapper (plugins.css gives it a dashed border + radius
   + grey fill) so the dropzone/buttons sit clean with no nested box. */
.db-prediction.pl-ml-prediction.modern .pred-sliders .mlp-curve-field .curve-input-container {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.db-prediction .dbp-field.is-near,
.db-prediction .dbp-field.is-out,
.db-prediction .dbp-field.is-extrap { box-shadow: none; }

/* Declutter the head: drop the redundant range sub-line (the min/max ends already
   show the range). The leading type icon is kept - see .mlp-fh-icon rule above. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh-range { display: none !important; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh > h1 { flex: 1 1 auto; }

/* Inline value in the head (shown when the <input> box is hidden) */
.db-prediction .dbp-fh-val {
    order: 5;
    margin-left: 8px;
    font-size: 13px; font-weight: 700; color: var(--dbp-brand-str);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The numeric value/stepper box is HIDDEN by default (toggle in the ... menu) */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-field-val { display: none !important; }
.db-prediction.pl-ml-prediction.modern.dbp-show-valinput .pred-sliders > .form-group .mlp-field-val { display: flex !important; }
.db-prediction.dbp-show-valinput .dbp-fh-val { display: none; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .col-slider-container.hasSliders { margin-top: 6px; }

/* =====================================================================
 * R2026-31 - Field-head polish (single-line head + on-demand lock/input).
 *   - Head never wraps: the label truncates with an ellipsis, and the flag /
 *     inline value / lock stay on ONE line (fixes the value + lock dropping
 *     to a 2nd line and the lock's own-line whitespace).
 *   - Lock shows ONLY on field hover or while the field is unlocked.
 *   - Unlocking a field reveals its numeric <input> for manual entry (and
 *     hides the inline value). The global "Value input box" ... toggle still
 *     reveals ALL input boxes at once.
 * ===================================================================== */
/* Single-line head; label takes the slack and truncates. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh { flex-wrap: nowrap; }
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh > h1 {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Keep the flag + value + lock tight together on the right (only the flag pushes off
   the label via margin-left:auto; the value + lock butt up against it). */
.db-prediction .dbp-field .mlp-fh .dbp-fh-val { flex: 0 0 auto; margin-left: 8px; order: 5; }
.db-prediction .dbp-field .mlp-fh .dbp-lock   { flex: 0 0 auto; margin-left: 6px; order: 6; }

/* Lock: reserved in layout at all times (so hover NEVER reflows the label / flag / value -
   no flicker), just hidden via visibility+opacity; fades in on field hover or when unlocked. */
/** Updated by shashank2104 on 08/19/2026 at 09:52 AM - R2026-43 - reset-to-mean uses the same hover show as lock. **/
.db-prediction .dbp-field .dbp-lock,
.db-prediction .dbp-field .dbp-mean {
    display: inline-flex;
    visibility: hidden;
    opacity: 0;
    transition: opacity .14s ease, color var(--dbp-t), border-color var(--dbp-t), background var(--dbp-t);
}
.db-prediction .dbp-field:hover .dbp-lock,
.db-prediction .dbp-field.dbp-unlocked .dbp-lock,
.db-prediction .dbp-field:hover .dbp-mean { visibility: visible; opacity: 1; }

/* Unlock reveals THIS field's manual-entry input (hide the read-only inline value).
   Specificity intentionally exceeds the base `.mlp-field-val { display:none !important }`. */
.db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group.dbp-unlocked .mlp-field-val { display: flex !important; }
.db-prediction .dbp-field.dbp-unlocked .dbp-fh-val { display: none; }

/* The segmented pill already labels the rail, so the in-region "Analysis" head is
   redundant here - hide it to give the cards more room (they scroll in .dbp-rail-scroll). */
.db-prediction .dbp-rightrail .dbp-rail-head { display: none; }

/* R2026-31 - Flat white input-slider panel: drop the grey wash from the prediction-utility
   container + its gear top-bar. The base plugins.css paints the container with
   `var(--mlp-bg) !important`, so this scoped override (4 classes > base 3) also needs
   !important to win. Scoped under .db-prediction so the classic MLPredictionView is untouched. */
.db-prediction.pl-ml-prediction.modern .pl-predict-container,
.db-prediction.pl-ml-prediction.modern .pl-predict-container > .d3view-flex-v.flex-space-out {
    background: transparent !important;
}

/* Label (id) + badge */
.db-prediction .pred-sliders > .form-group .mlp-fh > h1 {
    font-size: 12.5px; font-weight: 650; color: var(--dbp-text);
    margin: 0; line-height: 1.25; letter-spacing: 0;
}
.db-prediction .dbp-flag {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px; line-height: 1.5;
}
/* IN RANGE (green) shown by default; hidden when the value is near-edge / out-of-bounds */
.db-prediction .dbp-flag.inrange { display: inline-block; color: var(--dbp-good); background: var(--dbp-good-bg); }
.db-prediction .dbp-field.is-near   .dbp-flag.inrange,
.db-prediction .dbp-field.is-out    .dbp-flag.inrange,
.db-prediction .dbp-field.is-extrap .dbp-flag.inrange { display: none; }

/* =====================================================================
 * Added by shashank2104 on 08/19/2026 - UI - NARROW INPUTS RAIL: the NAME
 * outranks the IN RANGE pill.
 *
 * The field head is a single nowrap row and every item in it except the
 * label is fixed-width: type icon (22) + flag (~62) + value chip (~50) +
 * lock (22) + reset-to-mean (22) + gaps ~= 220px. The label is the only
 * flex item, so it absorbs ALL of the shortfall: measured on this rail it
 * is already an ellipsis stub at 307px (100px of label for a 15-char name)
 * and is exactly ZERO wide at 207px - the field then
 * shows an IN RANGE pill over a slider with NO NAME, which is the one
 * piece of text that identifies the input. The flag is the item that can
 * go: it repeats what the envelope shading and the handle state already
 * show, and IN RANGE (the default, non-actionable state) says nothing the
 * user has to act on.
 *
 * Measured against .pred-sliders itself, not the viewport: this rail is
 * resized by its drag handle, by either side rail collapsing, and by
 * small hosts embedding the view - a media query would be sizing the
 * wrong box entirely. Same container-query approach as the header's
 * chart-type switch above.
 * ===================================================================== */
.db-prediction.pl-ml-prediction.modern .pred-sliders {
    container-type: inline-size;
    container-name: dbp-inputs;
}

/* Tier 1 - drop the IN RANGE pill and tighten the head so the label keeps a
   readable width. NEAR / OUT stay: those are the states worth interrupting for. */
@container dbp-inputs (max-width: 360px) {
    .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh { gap: 6px; }
    .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .dbp-flag.inrange,
    .db-prediction .dbp-field .mlp-fh .dbp-flag.inrange { display: none !important; }
    .db-prediction .dbp-field .mlp-fh .dbp-flag { white-space: nowrap; }
    .db-prediction .dbp-field .mlp-fh .dbp-fh-val { margin-left: 6px; }
}

/* Tier 2 - below this even name + value + actions no longer share a line, so the
   head wraps: the label owns line 1 in full and the flag / value / actions drop to
   line 2. Nothing is hidden and the name is never an ellipsis-only stub.

   The break is forced through flex-BASIS, not min-width: flexbox decides where to wrap
   from an item's hypothetical size, so a wide label with `min-width` still wrapped whole
   and left the type icon stranded alone on line 1. A basis of "the line minus the 22px
   icon, its 6px gap and 6px of slack" makes icon + label the exact content of line 1;
   the slack stays under one gap width so the next item - the value chip is only ~9px on
   a single-digit input - can never squeeze up next to it. */
@container dbp-inputs (max-width: 260px) {
    .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh {
        flex-wrap: wrap;
        row-gap: 2px;
        margin-bottom: 18px !important;
    }
    .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh > h1 {
        flex: 1 1 calc(100% - 34px);
        min-width: 0;
        /* At this width a long input name still does not fit one line, and an ellipsis
           stub ("sBACK_LOWER_CM..." ) is exactly the failure this block exists to fix -
           so let it use a second line instead of truncating. */
        white-space: normal;
        overflow: visible;
        word-break: break-word;
    }
    /* Line 2 reads as the label's own second line: the flag (NEAR / OUT) and the value
       start under the label, not floated right - a right-floated value looks centred
       here because the lock + reset buttons keep their reserved slots at the right
       edge. 28px = the icon column, so line 2 hangs off the same left edge as the name.
       The value only carries the indent when no flag precedes it. */
    .db-prediction.pl-ml-prediction.modern .pred-sliders > .form-group .mlp-fh .dbp-flag { margin-left: 28px; }
    .db-prediction .dbp-field .mlp-fh .dbp-fh-val { margin-left: 28px; }
    .db-prediction .dbp-field.is-near   .mlp-fh .dbp-fh-val,
    .db-prediction .dbp-field.is-out    .mlp-fh .dbp-fh-val,
    .db-prediction .dbp-field.is-extrap .mlp-fh .dbp-fh-val { margin-left: 6px; }
}

/* Value + stepper */
.db-prediction .mlp-field-val .input-range-min {
    font-weight: 650; font-variant-numeric: tabular-nums; text-align: center;
    border-radius: var(--dbp-r-sm); border-color: var(--dbp-line-str); color: var(--dbp-text);
}

/* The track */
.db-prediction .dbp-field .col-slider.noUi-target {
    height: 4px;
    border: 0;
    border-radius: 3px;
    background: var(--dbp-line);
    box-shadow: none;
    margin: 11px 6px 5px;
}
.db-prediction .dbp-field .col-slider .noUi-base,
.db-prediction .dbp-field .col-slider .noUi-connects { height: 4px; border-radius: 3px; }

/* Envelope band (subtle) + gradient fill to the current value */
.db-prediction .dbp-field .dbp-envband { background: var(--dbp-brand-bg); border: 0; border-radius: 3px; }
.db-prediction .dbp-field .dbp-envfill {
    background: linear-gradient(90deg, var(--dbp-brand), var(--dbp-accent2));
    border-radius: 3px;
}
.db-prediction .dbp-field .dbp-tick { width: 2px; background: var(--dbp-line-str); opacity: .5; border-radius: 1px; }

/* The knob - small white circle with brand ring (overrides vendor noUi handle) */
.db-prediction .dbp-field .noUi-handle {
    width: 13px !important;
    height: 13px !important;
    right: -6px !important;
    top: -5px !important;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--dbp-brand);
    box-shadow: var(--dbp-sh-sm);
    cursor: grab;
}
.db-prediction .dbp-field .noUi-handle:active { cursor: grabbing; }
.db-prediction .dbp-field .noUi-handle::before,
.db-prediction .dbp-field .noUi-handle::after { display: none; }

/* min/max ends - mono, muted */
.db-prediction .dbp-field .mlp-mm { display: flex; justify-content: space-between; margin-top: 2px; }
.db-prediction .dbp-field .mlp-mm .mn,
.db-prediction .dbp-field .mlp-mm .mx {
    font-size: 9.5px; color: var(--dbp-text-3); font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* Declutter: hide the noUi pip markers/value labels (the mockup has none) */
.db-prediction .dbp-field .noUi-pips { display: none; }

/* =====================================================================
 * R2026-31 - RIGHT RAIL: 3-way segmented toggle over swappable panels
 *   [ Model outputs ]  -> the target/stat cards region  (default active)
 *   [ History ]        -> the run-history chips (vertical)
 *   [ Analysis ]       -> the analysis summary region
 * One panel visible at a time. Same clean pill styling as the left rail.
 * ===================================================================== */
.db-prediction.dbp-ready .dbp-rightrail {
    flex: 0 0 var(--dbp-right-w);
    width: var(--dbp-right-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--dbp-surface);
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-lg);
    box-shadow: var(--dbp-sh-sm);
    overflow: hidden;
    transition: flex-basis .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
}
.db-prediction.dbp-ready.dbp-right-collapsed .dbp-rightrail {
    flex-basis: 0; width: 0; border: 0; box-shadow: none;
}

/* ── Segmented pill (matches the left-rail / viz switcher styling) ── */
.db-prediction .dbp-rseg {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    margin: 10px 10px 8px;
    padding: 3px;
    background: var(--dbp-surface-2);
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-md);
}
.db-prediction .dbp-rseg-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 6px;
    border: 0;
    border-radius: var(--dbp-r-sm);
    background: transparent;
    color: var(--dbp-text-2);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: var(--dbp-t);
}
.db-prediction .dbp-rseg-btn i { font-size: 10.5px; color: var(--dbp-text-3); transition: var(--dbp-t); }
.db-prediction .dbp-rseg-btn span { overflow: hidden; text-overflow: ellipsis; }
.db-prediction .dbp-rseg-btn:hover { color: var(--dbp-text); background: var(--dbp-surface-3); }
.db-prediction .dbp-rseg-btn.is-active {
    background: var(--dbp-surface);
    color: var(--dbp-brand-str);
    box-shadow: var(--dbp-sh-sm);
}
.db-prediction .dbp-rseg-btn.is-active i { color: var(--dbp-brand); }

/* ── Panels: one visible at a time, fills the rail below the pill ── */
.db-prediction .dbp-rightrail .dbp-rr-panels { flex: 1 1 auto; min-height: 0; display: flex; }
.db-prediction .dbp-rightrail .dbp-rr-panel { display: none; flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; }
.db-prediction .dbp-rightrail .dbp-rr-panel.is-active { display: flex; flex-direction: column; }

/* Cards region, when inside its panel -> vertical stack, full-width cards, fills the panel */
.db-prediction.dbp-ready .dbp-rightrail .db-prediction-cards-region {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
}
.db-prediction.dbp-ready .dbp-rightrail .dbp-card,
.db-prediction.dbp-ready .dbp-rightrail .dbp-sum {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-md);
}
.db-prediction.dbp-ready .dbp-rightrail .dbp-card:hover { border-color: var(--dbp-line-str); }

/* Analysis region, when inside its panel -> borderless (the rail is the card) */
.db-prediction.dbp-ready .dbp-rightrail .db-prediction-analysis-region {
    flex: 1 1 auto;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* History panel: chips stacked vertically to suit the narrow rail. */
.db-prediction .dbp-rightrail .dbp-rr-panel[data-rpanel="history"] .dbp-history {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 10px 12px;
    overflow-x: hidden;
    overflow-y: auto;
    border-bottom: 0;
}
.db-prediction .dbp-rightrail .dbp-history .dbp-hchip {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--dbp-r-md);
    padding: 8px 11px;
}
.db-prediction .dbp-rightrail .dbp-history .dbp-history-lbl { display: none; }
.db-prediction .dbp-hist-empty {
    padding: 16px 12px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--dbp-text-3);
    text-align: center;
}


/* ── "Inferences" table title (R2026-38) ───────────────────────────────────
   Added by shashank2104 on 2026-07-15 - R2026-38 - The chart types are self-describing; the grid of
   rows was not. Names the table in the header, table view only. */
/* Updated by shashank2104 on 2026-07-15 - R2026-38 - Matches an active rail segment (.dbp-lseg-btn
   .is-active): same size / weight / gap / brand-str label / brand icon, on its own tray so it holds
   as a standalone chip. */
.db-prediction .mlp-inferences-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--dbp-line);
    border-radius: var(--dbp-r-md);
    background: var(--dbp-surface-2);
    color: var(--dbp-brand-str);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    margin: 0;
}
.db-prediction .mlp-inferences-title i {
    font-size: 11px;
    color: var(--dbp-brand);
}

/* ── Source meta cell (R2026-38) ───────────────────────────────────────────
   Added by shashank2104 on 2026-07-15 - R2026-38 - One cell replacing four columns
   (status / id / _sourceType / validity). See PredictionView.core.js _renderSourceCell.
   Rule of thumb: a healthy row should read as just its source name — the dot is small, the chip is
   quiet, and the validity marker is absent entirely unless something is actually wrong. */
.db-prediction .dbp-src-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.db-prediction .dbp-src-name {
    color: var(--dbp-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-prediction .dbp-src-dot { font-size: 7px; flex: 0 0 auto; }
.db-prediction .dbp-src-dot--ok      { color: var(--dbp-good); }
.db-prediction .dbp-src-dot--fail    { color: var(--dbp-bad); }
.db-prediction .dbp-src-dot--pending { color: var(--dbp-line-str); }

.db-prediction .dbp-src-star { font-size: 10px; color: var(--dbp-warn); flex: 0 0 auto; }

.db-prediction .dbp-src-chip {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: var(--dbp-r-sm);
    background: var(--dbp-surface-3);
    color: var(--dbp-text-3);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
}
.db-prediction .dbp-src-chip--out { background: var(--dbp-brand-bg); color: var(--dbp-brand-str); }

.db-prediction .dbp-src-flag { font-size: 11px; flex: 0 0 auto; cursor: help; }
.db-prediction .dbp-src-flag--bad { color: var(--dbp-bad); }
.db-prediction .dbp-src-flag--dup { color: var(--dbp-warn); }

/* ── Row meta: status edge-bar + hover popover (R2026-38) ──────────────────
   Added by shashank2104 on 2026-07-15 - R2026-38 - status / source / _sourceType / validity are no
   longer columns at all; they moved OFF the column axis and ONTO the row so the table can be purely
   inputs -> targets. See PredictionView.core.js _getRowMeta / _applyRowMeta / _showRowMetaPopover.

   Same rule of thumb as the old Source cell, taken further: a healthy row should read as JUST its
   numbers. The edge-bar is 3px and sits in padding the row already had, so it costs zero horizontal
   space, and an all-green table reads as quiet colour rather than decoration. Only problems tint.

   Updated by shashank2104 on 2026-07-15 - R2026-38 - The bar is a real element, not a ::before on the
   row, because it is now the popover's hover target and a pseudo-element cannot be an event target.
   The popover hangs off the BAR rather than the whole row: row-wide hover meant you could not move
   the pointer across the table without firing popovers. */
.db-prediction .virtual-table-body-row.dbp-row-meta {
    position: relative;
}

/* The element is a ~9px hit strip; only the inner 3px is painted. A 3px target is too small to hit
   reliably, so the strip is wider than the mark it draws. It sits over the first cell's existing left
   padding, so it covers no text, and clicks still bubble to the row - row selection is unaffected. */
.db-prediction .virtual-table-body-row .dbp-row-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
    background: transparent;
    cursor: help;
    z-index: 2;
}
.db-prediction .virtual-table-body-row .dbp-row-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: width var(--d3v-t-fast, .15s) ease, background var(--d3v-t-fast, .15s) ease;
}
.db-prediction .virtual-table-body-row.dbp-row--ok      .dbp-row-bar::before { background: var(--dbp-good); }
.db-prediction .virtual-table-body-row.dbp-row--fail    .dbp-row-bar::before { background: var(--dbp-bad); }
.db-prediction .virtual-table-body-row.dbp-row--pending .dbp-row-bar::before { background: var(--dbp-line-str); }
/* Sampling rows are idle by definition — no mark. The element still exists and stays hoverable, or
   their source / type / id would have no way to surface at all. */
.db-prediction .virtual-table-body-row.dbp-row--idle    .dbp-row-bar::before { background: transparent; }

/* Affordance: a 3px strip does not read as interactive, so widen the mark when the pointer is on the
   row. That advertises the target before the user has to guess it is there. Idle rows have nothing to
   widen, so give them a faint ghost on hover instead. */
.db-prediction .virtual-table-body-row.dbp-row-meta:hover .dbp-row-bar::before { width: 5px; }
.db-prediction .virtual-table-body-row.dbp-row--idle:hover .dbp-row-bar::before { background: var(--dbp-line, #E5E7EB); }

/* In the anchored split the row generator runs once per pane, so BOTH panes' row nodes get the
   status classes and a bar. That is what we want for the tint (it must span the full row across the
   split), but the bar must not be drawn again at the right pane's left edge - that would put a stray
   coloured bar in the middle of the table. Anchor it to the left pane only; the plain, unsplit table
   has no .tv-right-pane, so it is unaffected. */
.db-prediction .tv-right-pane .virtual-table-body-row .dbp-row-bar { display: none; }

.db-prediction .virtual-table-body-row.dbp-row--invalid { background: var(--dbp-bad-bg); }
.db-prediction .virtual-table-body-row.dbp-row--dup     { background: var(--dbp-warn-bg); }

/* ── Row meta popover ──────────────────────────────────────────────────────
   Plugins.Helpers.Popover mounts to BODY, so this is intentionally NOT scoped under .db-prediction —
   scoping it there would never match. It is namespaced by the popover's own className instead.
   Body-mounting is required, not stylistic: the anchored split's panes are overflow-x:auto and would
   clip a popover rendered inside the row. */
.dbp-rowmeta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dbp-rowmeta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.4;
}
.dbp-rowmeta-k {
    color: var(--d3v-text-muted, #9CA3AF);
    flex: 0 0 auto;
}
.dbp-rowmeta-v {
    color: var(--d3v-text-primary, #111827);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}
.dbp-rowmeta-v--ok      { color: var(--d3v-success, #10B981); }
.dbp-rowmeta-v--fail    { color: var(--d3v-status-danger, #EF4444); }
.dbp-rowmeta-v--pending { color: var(--d3v-text-secondary, #4B5563); }
.dbp-rowmeta-v--dup     { color: var(--d3v-warning, #F59E0B); }
.dbp-rowmeta-v--id {
    font-family: var(--d3v-font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-secondary, #4B5563);
}
.dbp-rowmeta-msg {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(239, 68, 68, .10);
    color: var(--d3v-status-danger, #EF4444);
    font-size: 11.5px;
    line-height: 1.45;
}

/** Added by shashank2104 on 2026-07-15 - DW-3146 - failure state for the predict loading box.
    Scoped to .d3view-loading-msg (NOT the plugin root): the box is appended to <body>. **/
.d3view-loading-msg.dbp-preprocess-failed .d3v-loading-track .progress-bar {
    background: var(--d3v-status-danger, #d9534f);
}

.d3view-loading-msg.dbp-preprocess-failed span.msg {
    color: var(--d3v-status-danger, #d9534f);
    font-weight: 600;
}

.d3view-loading-msg .dbp-preprocess-error-actions {
    display: flex;
    gap: var(--d3v-sp-2, 8px);
    margin-top: var(--d3v-sp-3, 12px);
}

.d3view-loading-msg .dbp-preprocess-error-actions .btn {
    flex: 1 1 auto;
    border-radius: var(--d3v-r-md, 6px);
    transition: var(--d3v-t-fast, all .15s ease);
}

/** Added by shashank2104 on 2026-07-15 - DW-3146 - fallback preprocessing-workflow picker, revealed
    above the Predict button when this server serves no workflow that can drive the model. Reads as an
    attention card rather than a plain field: it only ever appears because a predict just failed. **/
/* DW-3146 - compact, always-on picker. Neutral (info) by default; the .--warn modifier turns it
   amber for the "no drivable workflow" state. */
.db-prediction .dbp-preprocess-wf-picker {
    margin-top: var(--d3v-sp-2, 8px);
    padding: var(--d3v-sp-2, 8px) var(--d3v-sp-3, 12px);
    border: 1px solid var(--dbp-line-str, var(--d3v-border-strong, #CBD5E1));
    border-left: 3px solid var(--d3v-accent, var(--d3v-accent-primary, #3B82F6));
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-secondary, #F8FAFC);
    box-shadow: var(--dbp-sh-sm, var(--d3v-sh-sm));
}

.db-prediction .dbp-preprocess-wf-picker.dbp-preprocess-wf-picker--warn {
    border-left-color: var(--d3v-status-warning, #F59E0B);
}

/* The field's own label comes from FormBuilder - this line says why the field is here at all. */
.db-prediction .dbp-preprocess-wf-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--d3v-sp-2, 8px);
    margin-bottom: var(--d3v-sp-2, 8px);
    font-size: 11px;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #64748B);
}

.db-prediction .dbp-preprocess-wf-hint .fa {
    margin-top: 2px;
    color: var(--d3v-accent, var(--d3v-accent-primary, #3B82F6));
}

.db-prediction .dbp-preprocess-wf-picker--warn .dbp-preprocess-wf-hint--warn .fa {
    color: var(--d3v-status-warning, #F59E0B);
}

/* Short container: don't let the remote-lookup Select2 stretch the full prediction panel width. */
.db-prediction .dbp-preprocess-wf-input .form-group { margin-bottom: 0; }
.db-prediction .dbp-preprocess-wf-input .select2-container { max-width: 340px; }

/* ── imported-input flash (R2026-163) ────────────────────────────────────────
   Added by shashank2104 on 2026-08-14 - R2026-163 - After a single-row import the rail switches back
   to Sliders and the inputs the import actually wrote pulse once, so the user can SEE which values
   moved instead of reading a list of column names off a toast.

   Two constraints drive the shape of this rule:
     - OUTLINE, not box-shadow. `.db-prediction.pl-ml-prediction.modern .pred-sliders >
       .form-group.dbp-field` sets `box-shadow: none !important` above, and the is-near / is-out range
       states drive box-shadow themselves, so a shadow here would either lose or fight them.
     - outline-offset is NEGATIVE so the ring is drawn INSIDE the row. Rows sit ~4px apart, so an
       outset ring on consecutive inputs overlaps its neighbour and reads as a rendering fault.
   The animation ends on transparent and the class is removed after it finishes, so nothing is left
   behind and a second import re-triggers cleanly. */
@keyframes dbpJustUpdated {
    0%   { outline-color: rgba(59, 130, 246, 0);   background-color: rgba(59, 130, 246, 0); }
    18%  { outline-color: rgba(59, 130, 246, .70); background-color: rgba(59, 130, 246, .10); }
    72%  { outline-color: rgba(59, 130, 246, .70); background-color: rgba(59, 130, 246, .10); }
    100% { outline-color: rgba(59, 130, 246, 0);   background-color: rgba(59, 130, 246, 0); }
}

.db-prediction .dbp-field.dbp-just-updated {
    outline: 2px solid rgba(59, 130, 246, 0);
    outline-offset: -2px;
    border-radius: var(--d3v-r-md, 8px);
    animation: dbpJustUpdated 1600ms ease-in-out 1;
}

/* Respect a reduced-motion preference: keep the highlight, drop the animation. */
@media (prefers-reduced-motion: reduce) {
    .db-prediction .dbp-field.dbp-just-updated {
        animation: none;
        outline-color: rgba(59, 130, 246, .70);
        background-color: rgba(59, 130, 246, .10);
    }
}

/** Added by shashank2104 on 08/19/2026 at 05:21 PM - R2026-190 - Tools > Run workflow canvas. */
.db-prediction.dbp-rwf-active .viz-switch { display: none; }
/** Updated by shashank2104 on 08/20/2026 at 04:29 PM - R2026-190 - Run workflow covers the Simlytiks root. */
.db-prediction .dbp-rwf-sl-rel { position: relative; }
.db-prediction .dbp-rwf-sl-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    background: #fff;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.db-prediction .dbp-rwf-host,
.db-prediction .dbp-rwf,
.db-prediction .dbp-rwf-view { height: 100%; min-height: 0; }
.db-prediction .dbp-rwf-strip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.db-prediction .dbp-rwf-srclab {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
}
.db-prediction .dbp-rwf-flow { min-height: 0; }
.db-prediction .dbp-rwf-flow .tab-content { flex: 1; min-height: 0; }
.db-prediction .dbp-rwf-flow .tab-content > .tab-pane.active,
.db-prediction .dbp-rwf-flow .user-input-container { height: 100%; min-height: 0; }
.db-prediction .dbp-rwf-step { padding: 14px 16px 6px; }
.db-prediction .dbp-rwf-reg {
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    margin-bottom: 12px;
}
.db-prediction .dbp-rwf-reg-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.db-prediction .dbp-rwf-reg-b { padding: 13px 14px; }
/** Updated by shashank2104 on 08/20/2026 at 04:31 PM - R2026-190 - Saved | Library cards match peacock .wb-rwf-card. */
.db-prediction .dbp-rwf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 720px) {
    .db-prediction .dbp-rwf-cards { grid-template-columns: 1fr; }
}
.db-prediction .dbp-rwf-card {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    border: 1.5px solid var(--d3v-border, var(--d3v-border-subtle, #e5e7eb));
    border-radius: var(--d3v-r-sm, 6px);
    padding: 12px 14px;
    transition: background var(--d3v-t, 0.16s) ease, border-color var(--d3v-t, 0.16s) ease;
}
.db-prediction .dbp-rwf-card:hover {
    background: var(--d3v-bg-hover, rgba(48, 72, 127, 0.06));
}
.db-prediction .dbp-rwf-card.is-on {
    border-color: var(--d3v-accent, #30487f);
    background: var(--d3v-accent-soft, rgba(48, 72, 127, 0.08));
    box-shadow: inset 0 0 0 1px var(--d3v-accent, #30487f);
}
.db-prediction .dbp-rwf-card .ct {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
}
.db-prediction .dbp-rwf-card .ct > i {
    color: var(--d3v-text-muted);
    font-size: 15px;
}
.db-prediction .dbp-rwf-card.is-on .ct > i {
    color: var(--d3v-accent, #30487f);
}
.db-prediction .dbp-rwf-card .ct > b {
    font-size: 13px;
    font-weight: 600;
}
.db-prediction .dbp-rwf-card .cd {
    display: block;
    font-size: 11.5px;
    color: var(--d3v-text-muted);
    line-height: 1.5;
}
.db-prediction .dbp-rwf-card .api {
    display: inline-block;
    margin-top: 7px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10px;
    color: var(--d3v-text-muted);
    background: var(--d3v-bg-secondary, var(--d3v-n-50, #f8fafc));
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    padding: 2px 6px;
    border-radius: 4px;
}
.db-prediction .dbp-rwf-step--source > .dbp-rwf-reg,
.db-prediction .dbp-rwf-step--finish > .dbp-rwf-reg { flex: 0 0 auto; }
.db-prediction .dbp-rwf-step--source > .dbp-rwf-reg--picker,
.db-prediction .dbp-rwf-step--finish > .dbp-rwf-reg--out { flex: 1 1 auto; min-height: 0; }
.db-prediction .dbp-rwf-picker { min-height: 260px; }
.db-prediction .dbp-rwf-picker > .pl-rm-generic-selections { height: 100%; min-height: 0; }
.db-prediction .dbp-rwf-sel {
    margin-left: auto;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-muted);
}
.db-prediction .dbp-rwf-sel.is-on { color: var(--d3v-accent, #30487f); }
.db-prediction .dbp-rwf-mapgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    align-items: center;
}
.db-prediction .dbp-rwf-maplab {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
}
.db-prediction .dbp-rwf-deckcard {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    background: var(--d3v-bg-secondary, #f9fafb);
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    padding: 8px 12px;
}
.db-prediction .dbp-rwf-deckcard .d { min-width: 0; display: flex; flex-direction: column; }
.db-prediction .dbp-rwf-wfhost { min-height: 360px; }
.db-prediction .dbp-rwf-err {
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.db-prediction .dbp-rwf-vbanner {
    display: flex;
    gap: 10px;
    padding: 11px 13px;
    margin-bottom: 12px;
    border: 1px solid var(--d3v-status-danger, #d92d20);
}
.db-prediction .dbp-rwf-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.db-prediction .dbp-rwf-tools { margin-right: 6px; position: relative; display: inline-block; vertical-align: middle; }
/** Added by shashank2104 on 08/19/2026 at 06:05 PM - R2026-190 - muted row when nothing is saved yet. */
.db-prediction .dbp-rwf-tools .mlp-dd-item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
/** Updated by shashank2104 on 08/20/2026 at 03:56 PM - R2026-190 - Bootstrap `.dropdown-menu` owns show/hide. */
.db-prediction .dbp-sl-pane .dbp-rwf-sl-menu {
    min-width: 220px;
    margin: 4px 0 0;
    padding: 4px 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.db-prediction .dbp-sl-pane .dbp-rwf-sl-menu a {
    display: block;
    padding: 8px 14px;
    color: #1e293b;
    text-decoration: none;
}
.db-prediction .dbp-sl-pane .dbp-rwf-tools a[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}
.db-prediction .dbp-rwf-tag { margin-left: auto; font-size: 10px; color: var(--d3v-text-muted); }

/** Added by shashank2104 on 08/20/2026 - R2026-190 - "View all workflow inputs" disclosure on step 2.
    Mirrors peacock.workbench's .wb-rwf-disc, in --d3v-* tokens. */
.db-prediction .dbp-rwf-disc-h {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--d3v-t-fast, .16s) ease;
}
.db-prediction .dbp-rwf-disc-h:hover { background: var(--d3v-bg-hover, #f3f4f6); }
.db-prediction .dbp-rwf-disc-h b { flex: 0 0 auto; }
.db-prediction .dbp-rwf-disc-c {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--d3v-text-muted, #6b7280);
    font-size: 11px;
    transition: transform var(--d3v-t-fast, .16s) ease;
}
.db-prediction .dbp-rwf-disc.is-open .dbp-rwf-disc-c { transform: rotate(180deg); }
/* The body stays in the DOM once mounted (FormBuilder is expensive to rebuild), so collapse it. */
.db-prediction .dbp-rwf-disc > .dbp-rwf-disc-b { display: none; }
.db-prediction .dbp-rwf-disc.is-open > .dbp-rwf-disc-b { display: block; }
/** A START worker can carry 70+ inputs, so the form gets its own bounded box — otherwise opening the
    disclosure pushes the curve mapping (the point of the step) off the top of the pane.
    ⭐ height MUST BE DEFINITE, not min/max-height. FormBuilder's `inputsView: 'nested'` renders a
    jQuery-UI layout whose panes are absolutely positioned off a `height: 100%` chain; with an auto-height
    host that chain resolves to 0 and the form paints its search bar and NOTHING ELSE — the "View all
    workflow inputs is empty" bug. Same fix as .wb-rwf-allfb in peacock.workbench. */
.db-prediction .dbp-rwf-allfb { height: 46vh; min-height: 300px; overflow: hidden; }

/** Added by shashank2104 on 08/20/2026 - R2026-190 - the Score card on Results & save. It leads the step
    (the star rating is why the workflow was run), so it gets an accent rail and a large value chip. */
.db-prediction .dbp-rwf-score { border-color: var(--d3v-accent-primary, #3b82f6); }
.db-prediction .dbp-rwf-score > .dbp-rwf-reg-h { color: var(--d3v-accent-primary, #3b82f6); }
.db-prediction .dbp-rwf-score-vals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.db-prediction .dbp-rwf-score-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 132px;
    padding: 10px 14px;
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-left: 3px solid var(--d3v-accent-primary, #3b82f6);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-secondary, #f9fafb);
}
.db-prediction .dbp-rwf-score-chip .v {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction .dbp-rwf-score-chip .k {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--d3v-text-muted, #6b7280);
}
.db-prediction .dbp-rwf-score-note {
    margin: 0 0 10px;
    color: var(--d3v-text-secondary, #4b5563);
}
/* The one decision on this step, so it reads as a choice rather than a checkbox in a list. */
.db-prediction .dbp-rwf-check--hero {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--d3v-accent-primary, #3b82f6);
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, .08));
    cursor: pointer;
    transition: background var(--d3v-t-fast, .16s) ease;
}
.db-prediction .dbp-rwf-check--hero:hover { background: var(--d3v-accent-subtle-hover, rgba(59, 130, 246, .14)); }
.db-prediction .dbp-rwf-check--hero input { margin: 3px 0 0; }

/** Added by shashank2104 on 08/20/2026 at 04:36 PM - R2026-190 - Saved workflows list matches peacock rail pane. */
.db-prediction .db-prediction-side-panel-body:has(.dbp-rwf-savedpane) {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.db-prediction .dbp-rwf-savedpane {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--d3v-bg-primary);
}
.db-prediction .dbp-rwf-saved-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
    background: var(--d3v-bg-secondary, #f8fafc);
}
.db-prediction .dbp-rwf-saved-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.db-prediction .dbp-rwf-saved-search-wrap > i {
    position: absolute;
    left: 8px;
    color: var(--d3v-text-muted);
    font-size: 11px;
    pointer-events: none;
}
.db-prediction .dbp-rwf-saved-search {
    width: 100%;
    padding: 4px 8px 4px 24px;
    font-size: 12px;
    border: 1px solid var(--d3v-border-subtle, #e5e7eb);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    outline: none;
}
.db-prediction .dbp-rwf-saved-search:focus {
    border-color: var(--d3v-accent, #30487f);
}
.db-prediction .dbp-rwf-saved-empty {
    padding: 16px 14px;
    color: var(--d3v-text-muted);
    font-size: 12px;
    font-style: italic;
}
.db-prediction .dbp-rwf-saved-empty.is-err {
    color: var(--d3v-status-danger, #d92d20);
    font-style: normal;
}
.db-prediction .dbp-rwf-saved-list {
    padding: 6px 0;
}
.db-prediction .dbp-rwf-saved-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--d3v-text-primary);
}
.db-prediction .dbp-rwf-saved-row:hover {
    background: var(--d3v-bg-hover, rgba(48, 72, 127, 0.06));
}
.db-prediction .dbp-rwf-saved-row.is-expanded {
    background: var(--d3v-accent-soft, rgba(48, 72, 127, 0.08));
}
.db-prediction .dbp-rwf-saved-row > .fa-caret-right,
.db-prediction .dbp-rwf-saved-row > .fa-caret-down {
    width: 10px;
    color: var(--d3v-text-muted);
    font-size: 11px;
}
.db-prediction .dbp-rwf-saved-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-prediction .dbp-rwf-saved-id {
    color: var(--d3v-text-muted);
    font-size: 11px;
    font-family: ui-monospace, Menlo, monospace;
}
/** Added by shashank2104 on 08/20/2026 - R2026-190 - when this workflow last ran on this model. */
.db-prediction .dbp-rwf-saved-when {
    flex: 0 0 auto;
    color: var(--d3v-text-muted);
    font-size: 11px;
    white-space: nowrap;
}
.db-prediction .dbp-rwf-saved-view {
    color: var(--d3v-text-muted);
    cursor: pointer;
    font-size: 12px;
}
.db-prediction .dbp-rwf-saved-view:hover,
.db-prediction .dbp-rwf-saved-view.is-busy {
    color: var(--d3v-accent, #30487f);
}
.db-prediction .dbp-rwf-saved-children {
    padding: 0 0 6px 22px;
}
.db-prediction .dbp-rwf-saved-att {
    font-size: 11.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   R2026-38 - IN-RAIL INPUT PANES.
   Upload + Sampling render inside the left rail's ~280px input pane instead of a side panel, so
   everything below is tuned for one narrow column: tighter gaps, drop zones that don't eat the
   fold, and one action row pinned to the bottom. Added by shashank2104 on 2026-07-15.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Quiet, text-first button for secondary pane actions ("Full configuration", "View rows",
   "Import a single row from…", "View in Peacock"). Deliberately not a .btn: each pane already has
   exactly one filled primary button, and a second bordered control beside it reads as a peer. */
.db-prediction .dbp-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: var(--d3v-accent-primary, #2563EB);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--d3v-r-sm, 4px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-linkbtn:hover { text-decoration: underline; }
.db-prediction .dbp-linkbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }
.db-prediction .dbp-linkbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--d3v-accent-subtle, #DBEAFE);
}
.db-prediction .dbp-linkbtn i { font-size: 11px; }

/* Pane action row: pinned to the bottom of the pane. The status/secondary line sits ABOVE a
   full-width primary — side by side there isn't room for both without truncating one. */
.db-prediction .dbp-ipane-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
.db-prediction .dbp-ipane-foot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 20px;
}
.db-prediction .dbp-ipane-foot > .btn { width: 100%; }

/* Drop zones: same treatment as before, ~half the vertical padding and a two-line message, so the
   zone plus the validation summary both fit above the fold in the rail. */
.db-prediction .dbp-ipane .dbp-upload-dz,
.db-prediction .dbp-ipane .dbp-keyword-dz { padding: 14px 10px; }
.db-prediction .dbp-ipane .dbp-upload-dz .dz-message i,
.db-prediction .dbp-ipane .dbp-keyword-dz .dz-message i { font-size: 17px; margin-bottom: 5px; }
.db-prediction .dbp-ipane .dz-message span { font-size: 12px; line-height: 1.4; }
.db-prediction .dbp-ipane .dz-message small {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--d3v-text-tertiary, #9CA3AF);
}

.db-prediction .dbp-ipane .dbp-feat { min-height: 0; }

/* The trimmed ConfigureWfWorker (3 inputs, no heading, no tabs). It ships a full-height layout sized
   for a modal: an inline height:100% on .workflow-modal over a chain of .full-h / .full-height /
   ui-layout panes. In the rail that chain has no definite height to resolve against, and the
   percentage fed back into the flex column that was sizing it — the builder computed to ~13950px,
   which grew the rail, the widget and the gridstack item to ~14240px and pushed the action row
   thousands of pixels below the fold. Collapsing the chain to auto breaks the loop: with `variables`
   hidden the form is always three short fields, so content height is exactly right and the flex
   column can size normally. */
.db-prediction .dbp-ipane-sampling .dbp-doe-builder {
    padding: 0;
    border: 0;
    min-height: 0;
    flex: 0 0 auto;   /* content-sized, so the foot's margin-top:auto pins it to the pane bottom */
    overflow: visible;
}

/* R2026-38 - condensed worker-inputs */
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .condensed.worker-inputs {
    border-bottom: none!important;
}
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .condensed.worker-inputs li.field-item {
    border-bottom: none!important;
}
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .modal-footer {
    display: none!important;
}

.db-prediction .dbp-ipane-sampling .dbp-doe-builder > .workflow-modal,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .wf-worker-config-view,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .wf-worker-inputs-outputs,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .tab-content > .tab-pane,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .ui-layout-container,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .worker-inputs,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .wf-builder-inputs-list,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .inputs-view-container,
.db-prediction .dbp-ipane-sampling .dbp-doe-builder ul#field-items { height: auto !important; }
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .row { margin: 0; }
/* Full-width single column: the config view lays inputs out on a Bootstrap grid sized for a modal. */
.db-prediction .dbp-ipane-sampling .dbp-doe-builder .worker-inputs { width: 100%; padding: 0 !important; }

/* "View rows" modal - let the table own the body height. Not scoped under .db-prediction: the modal
   is body-mounted, so its own customClass is the scope. */
.dbp-upload-table-modal .dbp-upload-modal { display: flex; gap: 10px; }
.dbp-upload-table-modal .dbp-upload-table { height: 60vh; }

/* ── Shared feature-panel bits ─────────────────────────────────────────────── */
.db-prediction .dbp-feat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
/* R2026-38 - tighter rhythm in the rail than the old side panel's 14px. */
.db-prediction .dbp-ipane .dbp-feat { gap: 10px; }
.db-prediction .dbp-feat-intro {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #374151);
}
.db-prediction .dbp-feat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--d3v-border-subtle, #E5E7EB);
    margin-top: auto;
}
.db-prediction .dbp-feat-status {
    font-size: 12px;
    color: var(--d3v-text-tertiary, #6B7280);
}
.db-prediction .dbp-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--d3v-text-tertiary, #6B7280);
}

/* ── DOE panel ─────────────────────────────────────────────────────────────── */
.db-prediction .dbp-doe-builder {
    flex: 1 1 auto;
    min-height: 160px;
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 8px);
    padding: 12px;
    overflow: auto;
    /* background: var(--d3v-bg-secondary, #F9FAFB); */
}
.db-prediction .dbp-doe-builder .wf-worker-config-view {
    height: calc(100% - 22px)!important;
}
/* R2026-38 - .dbp-doe-count is gone; the footer's own label says what the run will do. */

/* ── Upload panel ──────────────────────────────────────────────────────────── */
.db-prediction .dbp-upload-dz {
    border: 2px dashed var(--d3v-border-default, #D1D5DB);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-secondary, #F9FAFB);
    padding: 26px 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #374151);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-upload-dz:hover {
    border-color: var(--d3v-accent-primary, #2563EB);
    background: var(--d3v-accent-soft, #EFF6FF);
}
.db-prediction .dbp-upload-dz .dz-message i {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
    color: var(--d3v-accent-primary, #2563EB);
}
.db-prediction .dbp-upload-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Updated by shashank2104 on 07/15/2026 at 12:09 PM - R2026-38 - After parse, hide the drop zones
   (Dropzone leaves broken previews) and show only the summary pane. */
.db-prediction .dbp-upload.is-showing-results > .dbp-upload-source { display: none; }
.db-prediction .dbp-upload:not(.is-showing-results) > .dbp-upload-results:empty { display: none; }

/* Added by shashank2104 on 2026-07-31 - R2026-94 - Keep the drop-zone placeholder visible.

   Dropzone stamps `dz-started` on a zone the moment a file is added, and the shipped
   stylesheets/lib/dropzone.css (in lib.min.css / d3view.latest.2026.css) then hides `.dz-message`
   outright. That is right for a zone that shows file previews; ours never does - the shared default
   previewTemplate is `<span></span>` - so the only visible effect was the placeholder disappearing and
   the zone reading as broken. JS (_resetDropZones) clears the class on every path back to this pane;
   this is the safety net so no half-state can ever render an empty box. Same override simlytiks.css
   already applies to its add-data drop zone. Only the placeholder is forced back: the `.dz-preview`
   nodes stay hidden, and while a parse is running `.is-showing-results` hides this whole subtree. */
.db-prediction .plugin-dz.dropzone.dz-started .dz-message { display: block; }
.db-prediction .plugin-dz.dropzone .dz-preview { display: none; }
.db-prediction .dbp-upload-parsed {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.db-prediction .dbp-upload-back {
    align-self: flex-start;
}
.db-prediction .dbp-upload-source-line {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.4;
    word-break: break-word;
}
.db-prediction .dbp-upload-fname {
    font-weight: 700;
    color: var(--d3v-accent-primary, #2563EB);
}
/* R2026-38 - also matched under .dbp-upload-table-modal: GenericModalView mounts on <body>, OUTSIDE
   .db-prediction, so a .db-prediction-scoped selector alone would leave the modal's summary chips and
   Duplicate cells unstyled. The modal's own class is the scope there. */
.db-prediction .dbp-chip,
.dbp-upload-table-modal .dbp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: var(--d3v-r-pill, 999px);
    border: 1px solid transparent;
}
.db-prediction .dbp-chip-valid,
.dbp-upload-table-modal .dbp-chip-valid {
    color: var(--d3v-status-success, #16A34A);
    background: var(--d3v-status-success-soft, rgba(22, 163, 74, .1));
    border-color: var(--d3v-status-success-soft, rgba(22, 163, 74, .25));
}
.db-prediction .dbp-chip-dup,
.dbp-upload-table-modal .dbp-chip-dup {
    color: var(--d3v-status-warning, #D97706);
    background: var(--d3v-status-warning-soft, rgba(217, 119, 6, .1));
    border-color: var(--d3v-status-warning-soft, rgba(217, 119, 6, .25));
}
.db-prediction .dbp-chip-invalid,
.dbp-upload-table-modal .dbp-chip-invalid {
    color: var(--d3v-status-danger, #DC2626);
    background: var(--d3v-status-danger-soft, rgba(220, 38, 38, .1));
    border-color: var(--d3v-status-danger-soft, rgba(220, 38, 38, .25));
}
.db-prediction .dbp-dup-txt,
.dbp-upload-table-modal .dbp-dup-txt { color: var(--d3v-status-warning, #D97706); font-weight: 600; }
.db-prediction .dbp-upload-summary,
.dbp-upload-table-modal .dbp-upload-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.db-prediction .dbp-upload-table {
    height: 320px;
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
}

/* DW-3150 - "missing values filled with the model mean" note above the validation summary.
   Updated by shashank2104 on 07/15/2026 at 12:03 PM - R2026-38 - Stacked input list + See more
   (scroll-capped when expanded) so long autofill lists stay readable in the rail. */
.db-prediction .dbp-autofill-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--d3v-accent-primary, #2563EB);
    background: var(--d3v-accent-bg, #F0F7FF);
    border: 1px solid var(--d3v-accent-subtle, #DBEAFE);
    border-radius: var(--d3v-r-md, 8px);
    padding: 8px 10px;
    min-width: 0;
}
.db-prediction .dbp-autofill-note > .fa {
    flex: 0 0 auto;
    margin-top: 2px;
}
.db-prediction .dbp-autofill-body {
    flex: 1 1 auto;
    min-width: 0;
}
.db-prediction .dbp-autofill-msg {
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
}
.db-prediction .dbp-autofill-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.db-prediction .dbp-autofill-list > li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    line-height: 1.4;
    color: var(--d3v-text-secondary, #4B5563);
}
.db-prediction .dbp-autofill-name {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.db-prediction .dbp-autofill-mean {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction .dbp-autofill-extra {
    max-height: 120px;
    overflow-y: auto;
    margin-top: 0;
    padding-right: 2px;
}
.db-prediction .dbp-autofill-extra[hidden] {
    display: none !important;
}
.db-prediction .dbp-autofill-toggle {
    padding: 2px 0 0;
    margin: 2px 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    border: 0;
    box-shadow: none;
    color: var(--d3v-accent-primary, #2563EB);
}

/* ── Import sources (R2026-38) ─────────────────────────────────────────────────
   Updated by shashank2104 on 2026-07-15 - R2026-38 - The eight sources were eight chips that wrapped
   onto four rows in the rail and out-shouted the drop zone above them. They are now one menu behind a
   quiet link. .dbp-import styles the menu ANCHORS (was the chip buttons). */
.db-prediction .dbp-import-block {
    padding-top: 10px;
    border-top: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
.db-prediction .dbp-import-menu {
    min-width: 200px;
    padding: 4px;
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-md, 0 8px 24px rgba(0,0,0,.12));
}
.db-prediction .dbp-import-menu > li > a.dbp-import {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-import-menu > li > a.dbp-import i {
    width: 14px;
    text-align: center;
    color: var(--d3v-text-tertiary, #9CA3AF);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-import-menu > li > a.dbp-import:hover i { color: var(--d3v-accent-primary, #2563EB); }

/* ── Import from Keyword (R0-3943) ─────────────────────────────────────────────
   Updated by shashank2104 on 2026-07-15 - R2026-38 - The tinted card (heading + paragraph + zone +
   action row) collapsed to the zone plus its reveal button: in the rail that stack pushed the
   validation summary below the fold, and the zone's own text already says what it does. */
.db-prediction .dbp-keyword-import {
    margin-top: 10px;
}
.db-prediction .dbp-upload-source .dbp-import-block {
    margin-top: 0;
}
/* DW-3150 - reveals once metrics land, so the deck can be inspected with the metric lines overlaid. */
.db-prediction .dbp-view-peacock i {
    color: var(--d3v-accent, #2563EB);
}
/* DW-3150 - pretty keyword drop zone (mirrors the top upload zone, tinted to the accent card). */
.db-prediction .dbp-keyword-dz {
    margin: 4px 0 10px;
    border: 2px dashed var(--d3v-accent-subtle, #BFDBFE);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #FFFFFF);
    padding: 22px 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #374151);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-keyword-dz:hover {
    border-color: var(--d3v-accent, #2563EB);
    background: var(--d3v-accent-soft, #EFF6FF);
}
.db-prediction .dbp-keyword-dz .dz-message i {
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--d3v-accent, #2563EB);
}
.db-prediction .dbp-keyword-dz .dz-message code {
    font-size: 11px;
    padding: 0 4px;
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-secondary, #F3F4F6);
}

/* R2026-47 - "Import from Peacock" drop zone (the drop zone IS the button). Mirrors the keyword
   zone, tinted to an indigo accent so the two sources read as distinct. */
.db-prediction .dbp-peacock-import {
    margin-top: 10px;
}
.db-prediction .dbp-peacock-dz {
    margin: 4px 0 10px;
    border: 2px dashed var(--d3v-accent-subtle, #C7D2FE);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #FFFFFF);
    padding: 22px 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #374151);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-peacock-dz:hover {
    border-color: var(--d3v-accent, #4F46E5);
    background: var(--d3v-accent-soft, #EEF2FF);
    box-shadow: var(--d3v-sh-xs);
}
.db-prediction .dbp-peacock-dz .dz-message i {
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--d3v-accent, #4F46E5);
}

/* Added by shashank2104 on 2026-07-20 - R2026-47 - "Import reference data" flow step 1 (Source). Two
   choice cards (file / worker); picking "file" reveals the dropzone below. */
.db-prediction .dbp-refsrc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 6px 0 14px;
}
.db-prediction .dbp-refsrc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 16px 16px 14px;
    text-align: left;
    background: var(--d3v-bg-primary, #FFFFFF);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-xs);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-refsrc-card:hover {
    border-color: var(--d3v-accent, #4F46E5);
    box-shadow: var(--d3v-sh-sm);
}
.db-prediction .dbp-refsrc-card.is-active {
    border-color: var(--d3v-accent, #4F46E5);
    background: var(--d3v-accent-soft, #EEF2FF);
}
.db-prediction .dbp-refsrc-card > i {
    font-size: 20px;
    color: var(--d3v-accent, #4F46E5);
    margin-bottom: 4px;
}
.db-prediction .dbp-refsrc-t {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction .dbp-refsrc-card small {
    font-size: 11px;
    line-height: 1.4;
    color: var(--d3v-text-tertiary, #9CA3AF);
}
.db-prediction .dbp-refsrc-file {
    margin: 2px 0 10px;
    border: 2px dashed var(--d3v-accent-subtle, #C7D2FE);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #FFFFFF);
    padding: 24px 16px;
    text-align: center;
    color: var(--d3v-text-secondary, #374151);
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-refsrc-file:hover {
    border-color: var(--d3v-accent, #4F46E5);
    background: var(--d3v-accent-soft, #EEF2FF);
    box-shadow: var(--d3v-sh-xs);
}
.db-prediction .dbp-refsrc-file .dz-message i {
    display: block;
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--d3v-accent, #4F46E5);
}
.db-prediction .dbp-refsrc-loaded {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--d3v-status-success, #16A34A);
    background: var(--d3v-status-success-soft, #F0FDF4);
    border: 1px solid var(--d3v-status-success-subtle, #BBF7D0);
    border-radius: var(--d3v-r-md, 8px);
}
.db-prediction .dbp-refsrc-loaded i { font-size: 14px; }
.db-prediction .dbp-if-refmap { min-height: 0; }
.db-prediction .dbp-refmap-host { min-height: 0; padding-top: 4px; }

/* R2026-47 - the 3D-annotate + map steps fill their step body; the workbench shell needs real height. */
.db-prediction .dbp-if-annotate,
.db-prediction .dbp-if-map { min-height: 0; }
.db-prediction .dbp-if-annotate-host {
    min-height: 0;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
    background: var(--d3v-bg-secondary, #F8FAFC);
}
.db-prediction .dbp-if-annotate-host .peacock-workbench { height: 100%; }
.db-prediction .dbp-if-map-host { min-height: 0; padding-top: 4px; }

/* Added by shashank2104 on 2026-07-20 - R2026-47 - upload column-mapping step host (MatchCollection). */
.db-prediction .dbp-upload-map { min-height: 0; }
.db-prediction .dbp-upload-map-host { min-height: 0; padding-top: 4px; }

/* ── Inverse / goal-seek panel ─────────────────────────────────────────────── */
.db-prediction .dbp-goal-head,
.db-prediction .dbp-goal-row {
    display: grid;
    grid-template-columns: 1fr 62px 1.1fr 68px;
    gap: 8px;
    align-items: center;
}
.db-prediction .dbp-goal-head {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--d3v-text-tertiary, #9CA3AF);
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
.db-prediction .dbp-goal-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 8px;
}
.db-prediction .dbp-goal-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-prediction .dbp-goal-op,
.db-prediction .dbp-goal-val,
.db-prediction .dbp-goal-weight {
    height: 32px;
    font-size: 12px;
    border-radius: var(--d3v-r-sm, 6px);
    border: 1px solid var(--d3v-border-default, #D1D5DB);
    padding: 2px 8px;
    background: var(--d3v-bg-primary, #FFF);
    color: var(--d3v-text-primary, #111827);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-goal-op:focus,
.db-prediction .dbp-goal-val:focus,
.db-prediction .dbp-goal-weight:focus {
    outline: none;
    border-color: var(--d3v-accent-primary, #2563EB);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(37, 99, 235, .15));
}

/* R2026-31 - 3D Response Surface (Profiler). Unified into the viz switcher: the "3D Scatter" viz-type
   renders the shared WidgetML3DSurfaceView straight into the main chart container (.pred-chart). The
   widget draws its own axis rail + canvas and sets height:100% on its el, so the host just fills
   .pred-chart. Prediction's left input panel + right rail stay visible around it. */
.db-prediction .pred-chart > .db-prediction-surface3d {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-primary, #FFFFFF);
}
/* Added by shashank2104 on 2026-07-14 - DW-3157 - Hybrid View mounts the same immersive scatter widget
   into its right pane (.dt-container), which is not a direct child of .pred-chart, so it needs its own
   fill sizing to match the standalone 3D view. */
.db-prediction .db-prediction-surface3d-hybrid {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-primary, #FFFFFF);
}
/* The shared widget supersedes the legacy 3D-only "Show Predicted Surfaces" control (it owns the
   surface + coloring in its own rail), so hide that control while the widget is active. */
.db-prediction.dbp-surf3d-active .d3view-flex-v:has(> [data-id="generateSurfaces"]) {
    display: none;
}

/* R2026-31 - "Generate Surface" / "Contour floor" left-rail toggles (surface opt-in in the cockpit).
   Row layout mirrors WidgetMLParallelView's .ml-inv-par-row: a bordered pill, label flex:1 so the shared
   .db-toggle-* switch sits flush right and stays aligned across both rows. */
.db-prediction .ml-inv-3d-gensurface-row {
    /* flex !important overrides .db-toggle-label's inline-flex (which would shrink the row to content
       width and misalign the switches) - same technique as .ml-inv-par-row. */
    display: flex !important;
    width: 100%;
    align-items: center;
    gap: 9px;
    margin: 0 0 5px;
    padding: 7px 10px;
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-secondary, #F8FAFC);
    cursor: pointer;
    transition: border-color .15s;
}
.db-prediction .ml-inv-3d-gensurface-row:hover {
    border-color: var(--d3v-border-strong, #CBD5E1);
}
.db-prediction .ml-inv-3d-gensurface-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-prediction .ml-inv-3d-gensurface-hint {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #94A3B8);
    margin: 2px 0 8px;
    line-height: 1.4;
}
/* Contour-floor sub-toggle sits directly under Generate Surface. Full width (no horizontal inset) so
   its switch lines up exactly with the Generate-Surface switch. */
.db-prediction .ml-inv-3d-subtoggle {
    margin-top: 0;
}

/* ── DW-3150 (Step 3) - PedPro Scorecard "cockpit" (Option A) ───────────────────
   Scoped under .db-prediction-scorecard, the scorecard's own wrapper.
   Updated by shashank2104 on 2026-07-15 - R2026-38 - This used to be the GenericModalView body wrapper,
   and the wrapper class was the scope root precisely BECAUSE the modal was body-mounted (outside
   .db-prediction). The scorecard is now the "Scorecard" chart type and renders inside .pred-chart, so it
   IS under .db-prediction - but the rules stay keyed on .db-prediction-scorecard: the selector is already
   plugin-specific, and re-rooting ~280 lines would be churn with no behaviour change. */
.db-prediction-scorecard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    font-family: inherit;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction-scorecard .dbp-sc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d3v-text-secondary, #6B7280);
    padding: 18px 4px;
}
.db-prediction-scorecard .dbp-sc-status.is-error {
    color: var(--d3v-status-danger, #DC2626);
    align-items: flex-start;
    flex-direction: column;
}
.db-prediction-scorecard .dbp-sc-status code {
    font-size: 11px;
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 1px 6px;
}

/* Shared card shell */
.db-prediction-scorecard .dbp-sc-card {
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(16, 24, 40, .05));
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.db-prediction-scorecard .dbp-sc-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--d3v-text-primary, #111827);
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF1F6);
}
.db-prediction-scorecard .dbp-sc-card-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--d3v-text-tertiary, #9CA3AF);
}

/* ── Rating strip ── */
.db-prediction-scorecard .dbp-sc-rating {
    display: flex;
    gap: 14px;
    align-items: stretch;
    flex-wrap: wrap;
}
.db-prediction-scorecard .dbp-sc-hero,
.db-prediction-scorecard .dbp-sc-kpi-tile {
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(16, 24, 40, .05));
    padding: 15px 18px;
}
.db-prediction-scorecard .dbp-sc-hero {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.db-prediction-scorecard .dbp-sc-hero-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.db-prediction-scorecard .dbp-sc-grade {
    font-size: 34px;
    font-weight: 750;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--d3v-status-success, #22a06b);
    font-variant-numeric: tabular-nums;
}
.db-prediction-scorecard .dbp-sc-grade small { font-size: 16px; font-weight: 600; color: var(--d3v-text-tertiary, #9CA3AF); }
.db-prediction-scorecard .dbp-sc-grade-l {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6B7280);
    line-height: 1.3;
}
.db-prediction-scorecard .dbp-sc-grade-l em { font-style: normal; font-weight: 500; color: var(--d3v-text-tertiary, #9CA3AF); font-size: 11px; }
.db-prediction-scorecard .dbp-sc-verify {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--d3v-r-pill, 999px);
    border: 1px solid transparent;
    white-space: nowrap;
}
.db-prediction-scorecard .dbp-sc-verify.is-wait { background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-tertiary, #9CA3AF); }
.db-prediction-scorecard .dbp-sc-verify.is-match { background: var(--d3v-status-success-soft, #e4f6ee); color: var(--d3v-status-success, #22a06b); border-color: #c7ebda; }
.db-prediction-scorecard .dbp-sc-verify.is-diff { background: var(--d3v-status-warning-soft, #fbf4d9); color: var(--d3v-status-warning, #b45309); border-color: #f0e0b8; }
.db-prediction-scorecard .dbp-sc-bandbar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
.db-prediction-scorecard .dbp-sc-bandbar i { display: block; }
.db-prediction-scorecard .dbp-sc-bandkeys { display: flex; gap: 14px; flex-wrap: wrap; }
.db-prediction-scorecard .dbp-sc-bandkey { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d3v-text-secondary, #6B7280); }
.db-prediction-scorecard .dbp-sc-bandkey b { color: var(--d3v-text-primary, #111827); }
.db-prediction-scorecard .dbp-sc-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.db-prediction-scorecard .dbp-sc-kpi-tile {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
.db-prediction-scorecard .dbp-sc-kpi-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-prediction-scorecard .dbp-sc-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--d3v-text-tertiary, #9CA3AF); font-weight: 600; }
.db-prediction-scorecard .dbp-sc-kpi-h { font-size: 11px; color: var(--d3v-text-tertiary, #9CA3AF); }
.db-prediction-scorecard .dbp-sc-checks { gap: 7px; }
.db-prediction-scorecard .dbp-sc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d3v-text-secondary, #6B7280); }
.db-prediction-scorecard .dbp-sc-check.is-ok { color: var(--d3v-status-success, #22a06b); }
.db-prediction-scorecard .dbp-sc-check.is-bad { color: var(--d3v-status-danger, #e0483d); }

/* ── Cockpit body: map hero (full height) + right pane (Opportunity | Per-point toggle) ── */
.db-prediction-scorecard .dbp-sc-cockpit {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr);
    gap: 14px;
    align-items: stretch;
    min-height: 640px;
}
.db-prediction-scorecard .dbp-sc-mapmount {
    padding: 8px;
    flex: 1 1 auto;
    min-height: 560px;   /* premium chrome reserves ~190px, so the scatter still gets ~370px */
    overflow: hidden;
}
/* right pane: segmented Opportunity | Per-point toggle keeps both lists off the map */
.db-prediction-scorecard .dbp-sc-rtabs {
    display: inline-flex; padding: 2px; gap: 2px;
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-tertiary, #F1F5F9);
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
}
.db-prediction-scorecard .dbp-sc-rtab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; font-size: 12px; font-weight: 600;
    color: var(--d3v-text-secondary, #6B7280);
    background: transparent; border: none; border-radius: var(--d3v-r-sm, 6px);
    cursor: pointer; font-family: inherit; transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction-scorecard .dbp-sc-rtab:hover { color: var(--d3v-text-primary, #111827); }
.db-prediction-scorecard .dbp-sc-rtab.is-active {
    color: var(--d3v-accent-primary, #2f6df6);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(16, 24, 40, .08));
}
.db-prediction-scorecard .dbp-sc-rtab-n {
    font-size: 10.5px; font-weight: 700; padding: 0 5px; border-radius: 999px;
    background: var(--d3v-bg-tertiary, #F1F5F9); color: var(--d3v-text-tertiary, #9CA3AF);
}
.db-prediction-scorecard .dbp-sc-rtab.is-active .dbp-sc-rtab-n { background: var(--d3v-accent-soft, #eaf1ff); color: var(--d3v-accent-primary, #2f6df6); }
.db-prediction-scorecard .dbp-sc-rbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.db-prediction-scorecard .dbp-sc-opp {
    padding: 4px 12px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.db-prediction-scorecard .dbp-sc-opp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-bottom: 1px solid var(--d3v-border-subtle, #EEF1F6);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.db-prediction-scorecard .dbp-sc-opp-row:last-child { border-bottom: 0; }
.db-prediction-scorecard .dbp-sc-opp-row:hover { background: var(--d3v-bg-secondary, #F8FAFC); }
.db-prediction-scorecard .dbp-sc-opp-row.is-hi { background: var(--d3v-accent-soft, #eaf1ff); box-shadow: inset 3px 0 0 var(--d3v-accent-primary, #2f6df6); }
.db-prediction-scorecard .dbp-sc-rank {
    width: 22px; height: 22px; flex: 0 0 auto;
    border-radius: 6px;
    background: var(--d3v-bg-secondary, #F8FAFC);
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--d3v-text-secondary, #6B7280);
}
.db-prediction-scorecard .dbp-sc-opp-name { font-weight: 600; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.db-prediction-scorecard .dbp-sc-opp-pos { color: var(--d3v-text-tertiary, #9CA3AF); font-size: 11px; font-weight: 400; }
.db-prediction-scorecard .dbp-sc-opp-hic { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-prediction-scorecard .dbp-sc-pill {
    padding: 2px 8px;
    border-radius: var(--d3v-r-pill, 999px);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* ── Per-point table (fills the right pane when toggled on) ── */
.db-prediction-scorecard .dbp-sc-tablewrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.db-prediction-scorecard .dbp-sc-tablewrap[hidden], .db-prediction-scorecard .dbp-sc-opp[hidden] { display: none; }
.db-prediction-scorecard .dbp-sc-clear {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--d3v-border-subtle, #E5E7EB);
    background: var(--d3v-bg-primary, #FFFFFF);
    border-radius: var(--d3v-r-pill, 999px);
    padding: 4px 11px; font-size: 11.5px; font-weight: 600;
    color: var(--d3v-text-secondary, #6B7280); cursor: pointer;
    transition: opacity var(--d3v-t-fast, .15s) ease, color var(--d3v-t-fast, .15s) ease;
}
.db-prediction-scorecard .dbp-sc-clear:hover:not(:disabled) { color: var(--d3v-text-primary, #111827); }
/* DW-3150 - disabled = no active highlight (init / after clear) */
.db-prediction-scorecard .dbp-sc-clear:disabled { opacity: .45; cursor: not-allowed; }
.db-prediction-scorecard .dbp-sc-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.db-prediction-scorecard .dbp-sc-tbl th {
    position: sticky;
    top: 0;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--d3v-text-tertiary, #9CA3AF);
    background: var(--d3v-bg-primary, #FFFFFF);
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3v-border-subtle, #E5E7EB);
    white-space: nowrap;
}
.db-prediction-scorecard .dbp-sc-tbl th:first-child,
.db-prediction-scorecard .dbp-sc-tbl th.dbp-sc-th-band { text-align: left; }
.db-prediction-scorecard .dbp-sc-tbl td {
    padding: 7px 12px;
    text-align: right;
    color: var(--d3v-text-primary, #111827);
    border-bottom: 1px solid var(--d3v-border-subtle, #F1F5F9);
    white-space: nowrap;
}
.db-prediction-scorecard .dbp-sc-tbl td.dbp-sc-td-name,
.db-prediction-scorecard .dbp-sc-tbl td.dbp-sc-td-band { text-align: left; }
.db-prediction-scorecard .dbp-sc-tbl tbody tr { cursor: pointer; }
.db-prediction-scorecard .dbp-sc-tbl tbody tr:hover { background: var(--d3v-bg-secondary, #F8FAFC); }
.db-prediction-scorecard .dbp-sc-tbl tbody tr.is-hi { background: var(--d3v-accent-soft, #eaf1ff); box-shadow: inset 3px 0 0 var(--d3v-accent-primary, #2f6df6); }
.db-prediction-scorecard .dbp-sc-tbl tbody tr:last-child td { border-bottom: none; }
.db-prediction-scorecard .dbp-sc-err-pos { color: var(--d3v-status-warning, #f08c2e); }
.db-prediction-scorecard .dbp-sc-err-neg { color: var(--d3v-accent-primary, #2f6df6); }

/* Responsive: stack when the scorecard itself is narrow.
   Updated by shashank2104 on 2026-07-15 - R2026-38 - Was @media (max-width: 900px), which asked the
   VIEWPORT. That was right for a 90%-wide modal (modal width tracked the window) and wrong now the
   scorecard renders inside .pred-chart: on a 1920px window the viz container is ~700px once both rails
   are open, so the media query stayed false and the two columns stayed cramped. Ask the host instead. */
@container dbp-sc-host (max-width: 900px) {
    .db-prediction-scorecard .dbp-sc-cockpit { grid-template-columns: 1fr; }
}
/* Fallback for any mount that is NOT the inline host (no container context -> @container never matches). */
@media (max-width: 900px) {
    .db-prediction-scorecard .dbp-sc-cockpit { grid-template-columns: 1fr; }
}

/* ── R2026-38 - INLINE HOST ─────────────────────────────────────────────────────
   The scorecard used to be a GenericModalView body; it now renders straight into
   .pred-chart as the "Scorecard" chart type. .dbp-sc-host is that container. */
.db-prediction .pred-chart.dbp-sc-host {
    container-type: inline-size;
    container-name: dbp-sc-host;
    overflow: hidden;
}
/* In the modal the cockpit could push a 640px floor and let the modal body scroll.
   Inline it should FILL the viz container like every other chart type, and only fall
   back to the floor when the container is genuinely too short to be usable. */
.db-prediction .pred-chart.dbp-sc-host .dbp-sc-cockpit {
    min-height: 0;
    flex: 1 1 auto;
}
.db-prediction .pred-chart.dbp-sc-host .db-prediction-scorecard {
    padding: 14px;
}

/* Empty state - shown when no rows have been predicted yet. */
.db-prediction-scorecard.dbp-sc-empty {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.db-prediction-scorecard .dbp-sc-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    text-align: center;
    padding: 24px;
}
.db-prediction-scorecard .dbp-sc-empty-box > .fa {
    font-size: 26px;
    color: var(--d3v-text-tertiary, #9CA3AF);
    margin-bottom: 2px;
}
.db-prediction-scorecard .dbp-sc-empty-t {
    font-size: 14px;
    font-weight: 650;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction-scorecard .dbp-sc-empty-d {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #6B7280);
}

/* ── R2026-38 - INLINE KEYWORD IMPORT FLOW ────────────────────────────────────
   Added by shashank2104 on 2026-07-15. The PedPro keyword import was three modals
   (ConfigureWfWorker / peacock DataViewer / rows table); it is now one stepper rendered
   into .pred-chart. .dbp-if-host is that container. Mirrors the .dbp-sc-host block above. */
.db-prediction .pred-chart.dbp-if-host {
    container-type: inline-size;
    container-name: dbp-if-host;
    overflow: hidden;
}

/* ── The flow owns the WHOLE prediction body while it is open ───────────────────
   Not just the viz container, and not just the right panel:

   - .ml-predict-header is the chart-type switch (Table / Parallel / 3D / Scorecard) + the viz settings
     menu. Every control in it acts on a chart that is not rendered during an import, and picking one
     would silently discard the flow.
   - .mlp-left is the input rail: the Sliders/Upload/Sampling switch and the shared run footer. Those are
     THE OTHER WAYS TO ADD ROWS, and leaving them live meant you could start a DOE sweep, add its points
     to the grid and predict them while the pedpro import you were halfway through sat there unfinished -
     two "add rows" flows racing, with the finished one landing behind the unfinished one. An import is a
     modal ACT (one errand, start to finish) even though it is not a modal WINDOW; the stepper's own
     Cancel/Continue/Save is the only way out, which is what makes "Cancel leaves the cockpit exactly as
     it was" a promise we can actually keep.

   Scoped to the view root so rerenderMainHeader - which rebuilds that header - cannot resurrect it.

   Mechanically this MIRRORS the existing left-rail collapse (.dbp-left-collapsed in db-prediction.css
   ~409) rather than inventing a second way to hide the rail. That matters: .mlp-body is a GRID, so
   display:none on .mlp-left alone would hide the rail but leave its 340px column track standing and the
   flow would not actually get the width. The track has to go to 0 too. */
.db-prediction.dbp-import-active .mlp-header.ml-predict-header {
    display: none;
}
/* Shrink the modern grid's first column to nothing, exactly as the collapse toggle does. */
.db-prediction.dbp-ready.dbp-import-active .mlp-body {
    grid-template-columns: 0 1fr !important;
}
/* visibility - NOT display:none. The rail is a grid ITEM, so display:none takes it out of auto-placement
   and .mlp-right slides up into track 1, which we just set to 0 - the panel collapses to nothing. (This is
   why the collapse toggle above uses opacity:0 and not display:none; same trap.) visibility:hidden keeps
   the slot while making the rail unclickable AND untabbable, which opacity:0 alone would not - opacity
   still takes keyboard focus, so Sampling would remain reachable by Tab+Enter, which is the bug this is
   here to fix. Needs .dbp-ready + .dbp-import-active to outrank
   `.db-prediction.dbp-ready .mlp-left.dbp-left-sectioned { display: flex }` (equal specificity, and this
   file loads after db-prediction.css). */
.db-prediction.dbp-ready.dbp-import-active .mlp-left {
    visibility: hidden;
    pointer-events: none;
}
/* Nothing to resize while the rail is gone. */
.db-prediction.dbp-ready.dbp-import-active .mlp-resizer {
    display: none;
}
/* With the header gone the flow is the whole panel, so let it reach the full height rather than sitting
   under a gap where the header used to be. */
.db-prediction.dbp-import-active .pred-chart-container.mlp-viz-body {
    padding-top: 0;
}
/* The flow needs ONE bounded ancestor to resolve against: .pred-chart is content-sized, so without a
   bound the flow grows to its content - 14130px with a 56-row review table - and the stepper's pinned
   pager rendered 13,000px below the fold, putting "Add 56 rows & Predict" out of reach. The stepper
   already ships the right structure (breadcrumbs / section.gi-body .flex-1.o_auto_y / pinned pager).
   Updated by shashank2104 on 08/10/2026 - R0-4078 - 100% of the panel, not 84vh: the viewport unit
   ignored the panel it actually sits in, so the flow over/under-shot its container wherever the panel
   was not ~the viewport height (embedded, split view, a host with its own chrome). */
.db-prediction .dbp-import-flow {
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
    height: 100%;
    min-height: 480px;
}
/* R0-4078 - the generator's failure report, pinned above the worker form on the positions step. Danger
   tinted but not alarming: this is a "one input is wrong" state, and the input is directly below it. */
.db-prediction .dbp-if-diag {
    flex: 0 0 auto;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--d3v-status-danger-border, #f5c6c2);
    border-left-width: 3px;
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-status-danger-bg, #fdf3f2);
}
.db-prediction .dbp-if-diag-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-status-danger, #c0392b);
}
.db-prediction .dbp-if-diag-why {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #475569);
}
.db-prediction .dbp-if-diag-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-primary, #1e293b);
}
.db-prediction .dbp-if-diag-more {
    margin-top: 8px;
    font-size: 12px;
}
.db-prediction .dbp-if-diag-more > summary {
    cursor: pointer;
    color: var(--d3v-accent, #3b82f6);
    transition: color var(--d3v-t-fast, .15s) ease;
}
.db-prediction .dbp-if-diag-more > summary:hover {
    color: var(--d3v-accent-hover, #2563eb);
}
.db-prediction .dbp-if-diag-more > pre {
    margin: 6px 0 0;
    max-height: 220px;
    overflow: auto;
    padding: 8px 10px;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-secondary, #f8fafc);
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Hand the bounded height down to the stepper's own flex column so ITS scroller does the work. */
.db-prediction .dbp-if-body > .generic-input-template {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.db-prediction .dbp-if-body .gi-main-container {
    flex: 1 1 auto;
    min-height: 0;
}
.db-prediction .dbp-if-body .gi-body {
    min-height: 0;
}

/* Header: names the deck being imported, so the step bodies don't each have to repeat it. */
.db-prediction .dbp-if-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--d3v-border-subtle, #F3F4F6);
    background: var(--d3v-bg-secondary, #F9FAFB);
    flex: 0 0 auto;
}
.db-prediction .dbp-if-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--d3v-text-primary, #111827);
    min-width: 0;
}
.db-prediction .dbp-if-title > .fa { color: var(--d3v-accent-primary, #2563EB); }
.db-prediction .dbp-if-file {
    font-weight: 500;
    color: var(--d3v-text-secondary, #6B7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.db-prediction .dbp-if-body { min-height: 0; overflow: hidden; }
.db-prediction .dbp-if-step { min-height: 0; }

/* R2026-38 - loading state shown in the flow body while the worker definition is fetched. */
.db-prediction .dbp-if-loading {
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
}
.db-prediction .dbp-if-loading-spinner {
    font-size: 26px;
    color: var(--d3v-accent-primary, #2563EB);
    margin-bottom: 8px;
}
.db-prediction .dbp-if-loading-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--d3v-text-primary, #111827);
}
.db-prediction .dbp-if-loading-sub {
    font-size: 12.5px;
    color: var(--d3v-text-tertiary, #6B7280);
}

/* R2026-38 - carry the flow's bounded height all the way down to the step bodies. The stepper's tab
   plumbing (.tab-content > .tab-pane > .user-input-container) is height:auto by default, so `full-h` on a
   step resolved against nothing and `flex: 1` inside it had no height to divide up. */
.db-prediction .dbp-if-body .gi-body > .tab-content,
.db-prediction .dbp-if-body .gi-body > .tab-content > .tab-pane.active,
.db-prediction .dbp-if-body .gi-body .user-input-container {
    height: 100%;
    min-height: 0;
}

/* One-line orientation per step. Deliberately a hint, not a paragraph: the step names carry the flow. */
.db-prediction .dbp-if-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #6B7280);
    background: var(--d3v-accent-subtle, #EFF6FF);
    border: 1px solid var(--d3v-accent-soft, #DBEAFE);
    border-radius: var(--d3v-r-sm, 6px);
    flex: 0 0 auto;
}
.db-prediction .dbp-if-hint > .fa {
    color: var(--d3v-accent-primary, #2563EB);
    margin-top: 1px;
}
.db-prediction .dbp-if-hint b { color: var(--d3v-text-primary, #111827); font-weight: 600; }

/* Step 1 host. The worker view brings its own chrome; give it room and let it scroll. */
.db-prediction .dbp-if-cfg { min-height: 0; }

/* R2026-38 - the inputs are pinned to the 'form' view type (node.set('inputs-format-type','form') in
   _renderKeywordConfigStep), so the "View Type" dropdown offers to undo a decision we just made for the
   step. Hidden here rather than via an option because there is no working option for it:
   `disableViewTypes` is assigned in two workflow call sites but never read anywhere, and `disableHeading`
   (what the DOE's simple mode uses) would take the search + type filter with it - which this step wants,
   since it carries the worker's full input set across four groups. */
.db-prediction .dbp-if-cfg .dropdown.viewType,
.db-prediction .dbp-if-cfg .card-size {
    display: none !important;
}

/* Step 2 - counts line above the read-only rows table. */
.db-prediction .dbp-if-rowsline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

/* Step 3 - the peacock host.
   The height is EXPLICIT rather than `flex: 1`, which is the usual rule here (full-h + pl-flex-v +
   flex-1). That rule needs a height-constrained ancestor chain, and .pred-chart has none: it is
   content-sized, so it grows to whatever it holds (~14000px with a long table). DataViewer measures
   this element and builds its WebGL canvas to match, so `flex: 1` produced a 13690px-tall canvas -
   a deck rendered at 1/20th scale, mostly off-screen. A viewport-relative height is the honest unit
   here: unlike the WIDTH (which the rails shrink, hence the @container query below), this element's
   height really is bounded by the window. */
/* Fills whatever the step has left after the hint. `flex: 1` rather than the calc(84vh - 190px) it
   replaces: that number silently encoded the height of the header + breadcrumbs + hint + pager, so any
   change to those (dropping the sub-line, say) quietly desynced it. Now the chain above carries a real
   height (see the .tab-content rule) and the step just divides it. DataViewer measures this element and
   builds its WebGL canvas to match, so it must resolve to a real height - hence min-height as the floor. */
.db-prediction .dbp-if-peacock-host {
    flex: 1;
    min-height: 300px;
    border: 1px solid var(--d3v-border-subtle, #F3F4F6);
    border-radius: var(--d3v-r-sm, 6px);
    overflow: hidden;
}

/* Ask the HOST, not the viewport. .pred-chart is ~700px inside a 1920px window once both rails are
   open, so a media query measures the wrong box - the same bug already fixed twice for dbp-sc-host. */
@container dbp-if-host (max-width: 720px) {
    .db-prediction .dbp-if-peacock-host { min-height: 240px; }
}
/* Fallback for any mount that is NOT the inline host (no container context -> @container never matches). */
@media (max-width: 720px) {
    .db-prediction .dbp-if-host-none { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   R2026-47 (1.18) - DOE SAMPLING PREVIEW.
   Rendered into .pred-chart (main container) by renderDOEPreview, behind .dbp-import-active - the same
   takeover the keyword import flow uses. .pred-chart is content-sized, so an EXPLICIT bounded height is
   required for `full-h` + the flex-1 table scroller to resolve (identical reasoning to .dbp-import-flow
   above). Added by shashank2104 on 2026-07-17.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Flat full-panel takeover, matching the keyword import flow (.dbp-import-flow): background + radius +
   bounded height (.pred-chart is content-sized), NO card border/shadow. Header (title + hint) on top,
   borderless table in the middle, action footer at the bottom. */
.db-prediction .dbp-doe-preview {
    height: 84vh;
    min-height: 480px;
    max-height: 960px;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-md, 8px);
    overflow: hidden;
}
.db-prediction .dbp-doe-preview-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d3v-border-subtle, #F3F4F6);
    background: var(--d3v-bg-secondary, #F9FAFB);
    flex: 0 0 auto;
}
.db-prediction .dbp-doe-preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--d3v-text-primary, #111827);
    min-width: 0;
}
.db-prediction .dbp-doe-preview-title > .fa { color: var(--d3v-accent-primary, #2563EB); }
.db-prediction .dbp-doe-preview-count {
    padding: 2px 8px;
    border-radius: var(--d3v-r-pill, 999px);
    background: var(--d3v-accent-subtle, #DBEAFE);
    color: var(--d3v-accent-primary, #2563EB);
    font-size: 11.5px;
    font-weight: 700;
}
.db-prediction .dbp-doe-preview-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #6B7280);
}
.db-prediction .dbp-doe-preview-hint > .fa { color: var(--d3v-accent-primary, #2563EB); }
.db-prediction .dbp-doe-preview-table {
    padding: 4px 12px;
    min-height: 0;
}

/* ── Upload review: Append / Replace (R2026-254) ───────────────────────────────
   Added by shashank2104 on 2026-08-28. Sits in the review header, directly above the rows table, and is
   rendered only when the grid already holds rows. Same raised-chip segmented control as the rail's
   Inputs / Optimize pill (.dbp-lseg) so the two read as one control family, sized for a header row
   (auto-width segments, no rail margins). */
/* Updated by shashank2104 on 2026-08-28 - R2026-254 - TWO-COLUMN header: the parse summary (file, selected
   count, chips, autofill note) keeps the left, the operation choice takes the width that summary leaves
   empty on the right. Only the review step's header turns into a row - the DOE preview and the mapping step
   share .dbp-doe-preview-head and stay stacked. */
.db-prediction .dbp-upload-review .dbp-doe-preview-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
}
.db-prediction .dbp-upload-review-head-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
    min-width: 0;
}
/* Right column: label + segmented control on one line, the consequence spelled out under it - two lines,
   the same height as the summary beside it. */
.db-prediction .dbp-upload-mode-row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    font-size: 12px;
    color: var(--dbp-text-2, #4B5563);
}
.db-prediction .dbp-upload-mode-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.db-prediction .dbp-upload-mode-label { font-weight: 600; color: var(--dbp-text, #111827); }
.db-prediction .dbp-upload-mode-hint { color: var(--dbp-text-3, #9CA3AF); text-align: right; }
.db-prediction .dbp-upload-mode {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--dbp-surface-2, #F9FAFB);
    border: 1px solid var(--dbp-line, #E5E7EB);
    border-radius: var(--dbp-r-md, 8px);
}
.db-prediction .dbp-upload-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    border-radius: var(--dbp-r-sm, 6px);
    background: transparent;
    color: var(--dbp-text-2, #4B5563);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--dbp-t, all .18s ease);
}
.db-prediction .dbp-upload-mode-btn i { font-size: 11px; color: var(--dbp-text-3, #9CA3AF); transition: var(--dbp-t, all .18s ease); }
.db-prediction .dbp-upload-mode-btn:hover { color: var(--dbp-text, #111827); background: var(--dbp-surface-3, #F3F4F6); }
.db-prediction .dbp-upload-mode-btn:hover i { color: var(--dbp-brand, #2563EB); }
.db-prediction .dbp-upload-mode-btn.is-active {
    background: var(--dbp-surface, #fff);
    color: var(--dbp-brand-str, #1D4ED8);
    box-shadow: var(--dbp-sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
}
.db-prediction .dbp-upload-mode-btn.is-active i { color: var(--dbp-brand, #2563EB); }
.db-prediction .dbp-upload-mode-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dbp-brand-bg, rgba(37, 99, 235, .10));
}
/* The chips carry their own display, which out-ranks the UA `[hidden]` rule - so a chip that drops to
   zero (duplicates, when Replace stops counting grid matches) needs this to actually disappear. */
.db-prediction .dbp-chip[hidden] { display: none; }

/* Flatten the TableDataViewer inside the preview: it ships as a bordered "modern card" and the
   virtual-table carries its own 1px frame - both are noise when the table IS the whole panel body. */
.db-prediction .dbp-doe-preview-table .table-view.tv-design-modern-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}
/* tableDataViewer.css frames .virtual-table with `border: 1px !important` at high specificity, so this
   override has to out-specify AND carry !important to flatten it - the one place !important is warranted. */
.db-prediction .dbp-doe-preview-table .table-view.tv-modern.tv-design-modern-card .virtual-table {
    border: none !important;
    border-radius: 0 !important;
}

/* Confirm loading state: the table just dims (non-interactive) while the shared "Predicting… X%" progress
   toast owns the loader - no second spinner here. Stays until the predict completes. */
.db-prediction .dbp-doe-preview.dbp-committing .dbp-doe-preview-table {
    opacity: .5;
    pointer-events: none;
    transition: opacity var(--d3v-t-fast, .15s ease);
}

/* Action footer, right-aligned like a modal footer. Cancel (secondary) then Add and Predict (primary). */
.db-prediction .dbp-doe-preview-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--d3v-border-subtle, #F3F4F6);
    background: var(--d3v-bg-secondary, #F9FAFB);
    flex: 0 0 auto;
}
.db-prediction .dbp-doe-preview-foot .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Two-button Sampling footer: secondary "Preview" beside the primary "Run". When the secondary is
   hidden (every non-sampling mode) the primary flexes back to the full width it always had, so the
   single-button footer is visually unchanged. The width override outranks db-prediction.css's
   `.dbp-foot-btn { width:100% }` via the extra .dbp-ready/.dbp-foot classes. */
.db-prediction .dbp-foot { display: flex; gap: 8px; align-items: stretch; }
.db-prediction.dbp-ready .dbp-foot > .dbp-foot-btn { width: auto; flex: 1 1 auto; }
.db-prediction .dbp-foot-btn-secondary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Height + vertical padding left to btn-sm (default), matching the primary .dbp-foot-btn. */
    font-size: 13px;
    font-weight: 650;
    border-radius: var(--d3v-r-md, 8px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-prediction .dbp-foot-btn-secondary i { font-size: 13px; }
.db-prediction .dbp-foot-btn-secondary.dbp-hidden { display: none; }

.d3view-dashboard-v2 .ml-inv-2d-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: 100%;
    min-height: 0;
}

/** Sidebar-on-the-right (new DEFAULT, per R2026-38 contract). DOM order stays
 *  sidebar-then-canvas; `row-reverse` only flips the VISUAL order. **/
.d3view-dashboard-v2 .ml-inv-2d-layout.ml-inv-2d-layout--right {
    flex-direction: row-reverse;
}

.d3view-dashboard-v2 .ml-inv-2d-sidebar {
    position: relative;
    /* R2026-38 - shared ML control-sidebar width (was a local 260px). */
    flex: 0 0 var(--db-ml-sidebar-w, 260px);
    width: var(--db-ml-sidebar-w, 260px);
    min-width: var(--db-ml-sidebar-w, 260px);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .08));
    border-right: 0;
    background: var(--d3v-bg-primary, #fff);
    transition: flex-basis 220ms cubic-bezier(.4, 0, .2, 1),
                width       220ms cubic-bezier(.4, 0, .2, 1),
                min-width   220ms cubic-bezier(.4, 0, .2, 1);
    min-height: 0;
    overflow: hidden;
}

.d3view-dashboard-v2 .ml-inv-2d-sidebar.ml-inv-2d-sidebar--rail {
    flex: 0 0 var(--db-ml-sidebar-rail-w, 28px);
    width: var(--db-ml-sidebar-rail-w, 28px);
    min-width: var(--db-ml-sidebar-rail-w, 28px);
    background: var(--d3v-bg-subtle, #f8fafc);
}

/** Collapse/expand toggle. Right-mounted default -> button sits on the sidebar's LEFT edge
 *  (the seam against the canvas). Flipped vs the 3D file's left-mounted default on purpose. **/
.d3view-dashboard-v2 .ml-inv-2d-sidebar-toggle {
    position: absolute;
    top: 8px;
    left: -10px;
    z-index: 2;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, .12));
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #475569);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0, 0, 0, .06));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    transition: background 160ms, color 160ms, transform 160ms;
}
.d3view-dashboard-v2 .ml-inv-2d-sidebar--rail .ml-inv-2d-sidebar-toggle {
    left: 4px;
}
.d3view-dashboard-v2 .ml-inv-2d-sidebar-toggle:hover {
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    border-color: var(--d3v-accent, #3b82f6);
    transform: scale(1.1);
}

/** Reserved: if a future left-mounted mode is ever added, mirror the 3D file's
 *  `--right` override block here (border + toggle side flip). Not needed today —
 *  `--right` is this widget's only supported placement. **/

.d3view-dashboard-v2 .ml-inv-2d-sidebar .ml-inv-2d-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px;
}

.db-pred-settings-flyout {
    /* Updated by shashank2104 on 2026-07-18 - R2026-47 (#2) - absolute WITHIN the dashboard content
       wrapper (mounted there by IndexView), so the panel sizes to the dashboard container height, not
       the browser viewport. left is set by JS to the live rail's right edge (relative to the wrapper).
       Updated 2026-07-19 - R2026-47 (#7) - premium elevated surface matched to the dashboard --db-*
       tokens (was a plain white slab that read as foreign next to the rail + cards). */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 52px;               /* JS re-anchors to the live tab-rail edge on every show */
    width: 420px;
    z-index: 60;              /* above the dashboard content, within the dashboard stacking context */
    display: flex;
    flex-direction: column;
    background: var(--db-bg-elevated, var(--d3v-bg-primary, #fff));
    border-right: 1px solid var(--db-border, var(--d3v-border-secondary, #e2e8f0));
    box-shadow: var(--db-sh-xl, var(--d3v-sh-xl, 0 24px 48px -12px rgba(15, 23, 42, .28)));
}

/* ── header ─────────────────────────────────────────────────────────── */
.db-pred-settings-flyout .dbps-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--db-border, var(--d3v-border-secondary, #e2e8f0));
    /** Updated by shashank2104 on 2026-08-14 - R2026-164 - was a brand-pale gradient wash. The dashboard
     *  around it is a flat white surface with hairline borders, so the tinted header made the panel read
     *  as a foreign slab. Plain elevated surface; the border alone separates it. */
    background: var(--db-bg-elevated, var(--d3v-bg-primary, #fff));
    flex: none;
}
.db-pred-settings-flyout .dbps-head > .fa-cog { color: var(--db-brand, var(--d3v-accent-primary, #3b82f6)); }
.db-pred-settings-flyout .dbps-title {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--d3v-text-primary, #1e293b);
}
.db-pred-settings-flyout .dbps-live {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--d3v-status-success, #10b981);
    background: var(--d3v-status-success-bg, #ecfdf5);
    border: 1px solid var(--d3v-status-success-border, #a7f3d0);
}
.db-pred-settings-flyout .dbps-close {
    margin-left: auto;
    color: var(--d3v-text-tertiary, #94a3b8);
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 6px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-close:hover {
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-tertiary, #f0f3f7);
}

/* ── search ─────────────────────────────────────────────────────────── */
.db-pred-settings-flyout .dbps-search-wrap {
    position: relative;
    margin: 10px 14px 6px;
    flex: none;
}
.db-pred-settings-flyout .dbps-search-wrap .fa-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 11px;
}
.db-pred-settings-flyout .dbps-search {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 30px;
    font-size: 12px;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-secondary, #e2e8f0);
    border-radius: var(--d3v-r-md, 8px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-search:focus {
    outline: none;
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(59, 130, 246, .12));
}

/* ── body: group tabs + items ───────────────────────────────────────── */
.db-pred-settings-flyout .dbps-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.db-pred-settings-flyout .dbps-groups {
    width: 128px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    /** Updated by shashank2104 on 2026-08-14 - R2026-164 - canvas grey here stacked a second tone on top
     *  of the (previously tinted) header and the page rail sitting immediately left of it, so the panel
     *  showed three greys in 130px. One surface, one hairline. */
    background: var(--db-bg-elevated, var(--d3v-bg-primary, #fff));
    border-right: 1px solid var(--db-border, var(--d3v-border-secondary, #e2e8f0));
    overflow-y: auto;
}
.db-pred-settings-flyout .dbps-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #64748b);
    border-radius: var(--d3v-r-md, 8px);
    text-decoration: none;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-group i { width: 14px; text-align: center; font-size: 11px; }
.db-pred-settings-flyout .dbps-group:hover {
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-tertiary, #f0f3f7);
}
/** Updated by shashank2104 on 2026-08-14 - R2026-164 - the active group was a dark navy gradient pill,
 *  the single heaviest element in an otherwise white panel. Match the page rail's own active treatment
 *  (soft accent tint + 3px left accent bar, see d3viewdashboard-v2-22-vertical-pages.css) so the two
 *  vertical navs sitting side by side read as one system. */
.db-pred-settings-flyout .dbps-group.active {
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-accent-soft, rgba(59, 130, 246, .10));
    box-shadow: inset 3px 0 0 var(--db-accent, var(--d3v-accent-primary, #3b82f6));
}
.db-pred-settings-flyout .dbps-group.active i { color: var(--db-accent, var(--d3v-accent-primary, #3b82f6)); }

.db-pred-settings-flyout .dbps-items {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── item rows ──────────────────────────────────────────────────────── */
.db-pred-settings-flyout .dbps-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-tertiary, #eef2f6);
    border-radius: var(--d3v-r-md, 8px);
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-row:hover { border-color: var(--d3v-border-secondary, #e2e8f0); }
.db-pred-settings-flyout .dbps-row-main { flex: 1 1 auto; min-width: 0; }
.db-pred-settings-flyout .dbps-row-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #1e293b);
}
.db-pred-settings-flyout .dbps-row-desc {
    font-size: 10.5px;
    color: var(--d3v-text-tertiary, #94a3b8);
    margin-top: 1px;
    line-height: 1.4;
}
.db-pred-settings-flyout .dbps-row-wide { margin-top: 8px; }
.db-pred-settings-flyout .dbps-row-ctrl { flex: none; padding-top: 2px; }

.db-pred-settings-flyout .dbps-number,
.db-pred-settings-flyout .dbps-select {
    height: 30px;
    font-size: 11.5px;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 1px solid var(--d3v-border-secondary, #e2e8f0);
    border-radius: var(--d3v-r-sm, 6px);
    padding: 0 8px;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-number { width: 84px; }
.db-pred-settings-flyout .dbps-select { max-width: 210px; }
/* list rows stack vertically — an inline select would starve the label column on narrow widths */
.db-pred-settings-flyout .dbps-row[data-type="list"] { flex-direction: column; align-items: stretch; }
.db-pred-settings-flyout .dbps-row[data-type="list"] .dbps-row-ctrl { padding-top: 8px; }
.db-pred-settings-flyout .dbps-row[data-type="list"] .dbps-select { max-width: 100%; width: 100%; }
.db-pred-settings-flyout .dbps-number:focus,
.db-pred-settings-flyout .dbps-select:focus {
    outline: none;
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 3px var(--d3v-accent-soft, rgba(59, 130, 246, .12));
}

/* toggle switch */
.db-pred-settings-flyout .dbps-switch { position: relative; display: inline-block; cursor: pointer; margin: 0; }
.db-pred-settings-flyout .dbps-switch input { position: absolute; opacity: 0; pointer-events: none; }
.db-pred-settings-flyout .dbps-switch-ui {
    display: inline-block;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--d3v-border-primary, #cbd5e1);
    position: relative;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-switch-ui::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .12));
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout .dbps-switch input:checked + .dbps-switch-ui { background: var(--d3v-accent-primary, #3b82f6); }
.db-pred-settings-flyout .dbps-switch input:checked + .dbps-switch-ui::after { left: 16px; }

/* ── empty state / no match ─────────────────────────────────────────── */
.db-pred-settings-flyout .dbps-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--d3v-text-tertiary, #94a3b8);
    padding: 24px;
    text-align: center;
}
.db-pred-settings-flyout .dbps-empty .fa-brain { font-size: 26px; color: var(--d3v-accent-primary, #3b82f6); opacity: .5; }
.db-pred-settings-flyout .dbps-empty-title { font-weight: 700; font-size: 13px; color: var(--d3v-text-secondary, #64748b); }
.db-pred-settings-flyout .dbps-empty-sub { font-size: 11.5px; max-width: 260px; line-height: 1.5; }
.db-pred-settings-flyout .dbps-no-match {
    text-align: center;
    font-size: 11.5px;
    color: var(--d3v-text-tertiary, #94a3b8);
    padding: 18px 0;
}

/* ── resize grip ────────────────────────────────────────────────────── */
.db-pred-settings-flyout .dbps-resize-grip {
    position: absolute;
    top: 0; bottom: 0; right: -4px;
    width: 8px;
    cursor: ew-resize;
}
.db-pred-settings-flyout .dbps-resize-grip::after {
    content: '';
    position: absolute;
    top: 50%; left: 3px;
    transform: translateY(-50%);
    width: 3px; height: 44px;
    border-radius: 2px;
    background: var(--d3v-border-primary, #cbd5e1);
    opacity: 0;
    transition: var(--d3v-t-fast, all .15s ease);
}
.db-pred-settings-flyout:hover .dbps-resize-grip::after { opacity: 1; }

/* ── the Settings entry in the vertical page tab rail ───────────────────
   Updated by shashank2104 on 2026-07-18 - R2026-47 (#1) - Settings is now a REGULAR nav entry sitting
   right below the last page (Models), styled like the page nav items (.db-vertical-page-btn) but with
   a subtle accent so it reads as a tool. NOT bottom-pinned anymore. */
#db-vertical-page-sidebar .db-pred-settings-item .db-pred-settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-accent-primary, #3b82f6);
    text-decoration: none;
    transition: var(--d3v-t-fast, all .15s ease);
}
#db-vertical-page-sidebar .db-pred-settings-item .db-pred-settings-tab i { width: 16px; text-align: center; }
#db-vertical-page-sidebar .db-pred-settings-item .db-pred-settings-tab:hover {
    background: var(--d3v-accent-soft, #eff6ff);
    color: var(--d3v-accent-primary, #3b82f6);
}
#db-vertical-page-sidebar .db-pred-settings-item .db-pred-settings-tab.active {
    background: var(--d3v-accent-soft, #eff6ff);
    color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: inset 2px 0 0 var(--d3v-accent-primary, #3b82f6);
}

/* ── standalone Settings gear for prediction-only ML surfaces (R2026-47) ─
   Rail + FAB are both gone on prediction-only models (multi-target curve models land here); this
   floating gear keeps the Prediction Settings panel reachable. Pinned to the top-right of the
   dashboard page body. */
#db-page-body .db-pred-settings-gear {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 55;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--d3v-r-md, 8px);
    border: 1px solid var(--d3v-border-secondary, #e2e8f0);
    background: var(--d3v-bg-primary, #fff);
    color: var(--d3v-text-secondary, #64748b);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, .08));
    cursor: pointer;
    transition: var(--d3v-t-fast, all .15s ease);
}
#db-page-body .db-pred-settings-gear:hover {
    color: var(--d3v-accent-primary, #3b82f6);
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(15, 23, 42, .12));
}

/* ── Simlytiks-rendered prediction pane (R2026-47 #7 + #9) ──────────────
   Scoped under the dashboard prediction root. #7 hides the classic mlp-header while the pane is active;
   #9 chains height:100% all the way down so the embedded Simlytiks instance fills the pane with no
   whitespace at the bottom. */
.dbp-sl-mode .mlp-header,
.dbp-sl-mode .ml-predict-header { display: none !important; }

.pred-chart.dbp-sl-active { height: 100%; display: flex; }
.pred-chart.dbp-sl-active > .dbp-sl-pane { flex: 1 1 auto; min-height: 0; height: 100%; width: 100%; }
.dbp-sl-pane > * { height: 100%; width: 100%; }
/* the SimlytiksManager mount + its shell must all stretch to fill the pane */
.dbp-sl-pane .simlytiks-outer-container,
.dbp-sl-pane .simlytiks,
.dbp-sl-pane .slBody,
.dbp-sl-pane .sl-main-window,
.dbp-sl-pane .viewContent { height: 100%; min-height: 0; }

/* R2026-47 (B3) — the embed keeps disableHeader OFF so each chart shows its VizView edit header
   (title + Edit Chart + panel-options). Hide only the Simlytiks MANAGER shell header bar (dataset
   name / save / views dropdown) which is redundant inside the dashboard prediction pane. */
.dbp-sl-pane div.sl-header { display: none !important; }

/** Added by shashank2104 on 2026-08-19 - R2026-189 - ONE loading indicator per chart.
 *  Two independent things reported "this chart is drawing": the visualizer's own in-panel message
 *  (newton's "Importing Curves. Please wait..."), and Simlytiks' page-level `is_rendering` state,
 *  which force-shows each viz's .d3view-no-data element and appends the word "Rendering" to it. In
 *  the prediction pane the visualizer message is the more informative of the two and is the one the
 *  chart itself controls, so suppress the page-level duplicate here. Scoped to .dbp-sl-pane, so
 *  regular Simlytiks keeps its rendering label. **/
.dbp-sl-pane div.page-container.is_rendering div.viewContent .d3view-no-data { display: none !important; }

/* ── prediction-only rail (R2026-47 P1) ─────────────────────────────────
   NHTSA / no-training-data models show a minimal rail (Prediction + Settings, + optional Summary)
   instead of a rail-less surface. Always label-expanded, styled like the page rail items. */
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail { width: 148px; flex: 0 0 148px; }
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail .pl-tabs-vertical > li > a.db-pred-rail-btn,
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail .pl-tabs-vertical > li > a.db-pred-settings-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-secondary, #64748b);
    text-decoration: none;
    transition: var(--d3v-t-fast, all .15s ease);
}
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail .pl-tabs-vertical > li > a > i { width: 16px; text-align: center; }
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail .pl-tabs-vertical > li > a:hover {
    background: var(--db-bg-sidebar-hover, rgba(48,72,127,0.07));
    color: var(--d3v-text-primary, #1e293b);
}
.d3view-dashboard-v2 .db-vertical-page-sidebar.db-pred-only-rail .pl-tabs-vertical > li.active > a {
    background: var(--db-bg-sidebar-active, rgba(48,72,127,0.10));
    color: var(--db-brand, #30487f);
    box-shadow: inset 2px 0 0 var(--db-brand, #30487f);
}
.d3view-dashboard-v2 .db-pred-summary-overlay { background: var(--db-bg-canvas, #f1f5f9); }

/* ── dark mode (R2026-47 #7) ────────────────────────────────────────────
   The dashboard drives dark mode with body[data-theme="dark"] (see db-prediction.css). Give the flyout,
   its group rail and the standalone gear dark surfaces so it stays cohesive in either theme. */
body[data-theme="dark"] .db-pred-settings-flyout {
    background: var(--db-bg-elevated, #1e2433);
    border-right-color: var(--db-border, #33405c);
}
/** Updated by shashank2104 on 2026-08-14 - R2026-164 - dark mode follows the same flat-surface rule as
 *  light: no brand wash on the header, no second tone behind the group rail. */
body[data-theme="dark"] .db-pred-settings-flyout .dbps-head {
    background: var(--db-bg-elevated, #1e2433);
    border-bottom-color: var(--db-border, #33405c);
}
body[data-theme="dark"] .db-pred-settings-flyout .dbps-groups {
    background: var(--db-bg-elevated, #1e2433);
    border-right-color: var(--db-border, #33405c);
}
body[data-theme="dark"] .db-pred-settings-flyout .dbps-group.active {
    color: var(--d3v-text-primary, #e8edf5);
    background: rgba(59, 130, 246, .18);
}
body[data-theme="dark"] .db-pred-settings-flyout .dbps-row {
    background: var(--db-bg-surface, #232a3b);
    border-color: var(--db-border, #33405c);
}
body[data-theme="dark"] .db-pred-settings-flyout .dbps-search,
body[data-theme="dark"] .db-pred-settings-flyout .dbps-number,
body[data-theme="dark"] .db-pred-settings-flyout .dbps-select {
    background: rgba(0,0,0,0.22);
    border-color: var(--db-border, #33405c);
    color: var(--d3v-text-primary, #e8edf5);
}
body[data-theme="dark"] #db-page-body .db-pred-settings-gear {
    background: var(--db-bg-elevated, #232a3b);
    border-color: var(--db-border, #33405c);
    color: var(--d3v-text-secondary, #9fb0cc);
}

/* Added by shashank2104 on 2026-07-20 - R2026-47 - "Add reference source" action row (Settings → Data & Rows). */
.db-pred-settings-flyout .dbps-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.db-pred-settings-flyout .dbps-action-row .dbps-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.db-pred-settings-flyout .dbps-action-row .dbps-action-btn > .fa {
    color: var(--d3v-accent-primary, #2563EB);
}

/* /javascripts/plugins_src/tree_view/tree_view.css */
.tree-view {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.tree-view ul.tree-list {
    padding-left: 30px;
}

.tree-view ul.tree-list>li.tree-list-item {
    list-style: none;
    border-left: 0.5px solid #ccc;
}

.tree-view li.tree-list-item>div:hover {
    cursor: pointer;
}

.tree-view .flex {
    display: flex;
}

.tree-view .my-5 {
    padding: 5px 0px;
}

.tree-view .ml-10 {
    padding-left: 10px;
}

.tree-view .mr-5 {
    margin-right: 5px;
}

.tree-view .pr-5 {
    padding-right: 5px;
}

.tree-view .px-10 {
    padding: 0px 10px;
}

.tree-view .vertical-center {
    align-items: center;
}

ul.dropdown-menu li:hover {
    background-color: #eee;
}

.tree-view .tv-content *:not(.dataset-marker):not(.clickable) {
    pointer-events: none;
    word-break: break-all;
}

.tree-view li.tree-list-item>div>i.option-list:not(.show-dropdown) {
    opacity: 0;
    transition: opacity 0.4s;
}

.tree-view li.tree-list-item>div:hover>i.option-list {
    opacity: 1;
}

.tree-view li.tree-list-item>div>i.option-list.show-dropdown {
    background-color: #1366ae;
    color: #fff;
    border-radius: 4px;
}

.tree-view li.tree-list-item>div>span.options {
    opacity: 0;
    transition: opacity 0.4s;
}

.tree-view li.tree-list-item>div:hover>span.options {
    opacity: 1;
    color: #eee;
}

.tree-view li.tree-list-item>div:hover>span.options:hover {
    color: steelblue;
}

.tree-view .active {
    color: #fff;
    text-decoration: none;
    background-color: #337ab7;
}

.tree-view .tv-content {
    padding: 5px 10px;
    border-radius: 4px;
}

.tree-view .no-border {
    border-left: none !important;
}


.tree-view {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.tree-view ul.tree-list {
    padding-left: 30px;
    width: 100%;
    margin: 0px !important;
    white-space: nowrap;
}

.tree-view ul.tree-list>li.tree-list-item {
    list-style: none;
    border-left: none;
    margin: 0px;
    height: 50px;
}

.tree-view ul.tree-list>li.tree-list-item[data-leaf="true"] .show-children {
    display: none;
}

.tree-view ul.tree-list>li.tree-list-item[data-leaf="true"] .item-icon {
    display: none;
}

.tree-view ul.tree-list>li.tree-list-item>.vertical-center.groups .tv-content {
    text-transform: capitalize;
}

.tree-view li.tree-list-item>div:hover {
    cursor: pointer;
}

.tree-view .flex {
    display: flex;
}

.tree-view .my-5 {
    padding: 5px 0px;
}

.tree-view .ml-10 {
    padding-left: 10px;
}

.tree-view .mr-5 {
    margin-right: 5px;
}

.tree-view .pr-5 {
    padding-right: 5px;
}

.tree-view .px-10 {
    padding: 0px 10px;
}

.tree-view .vertical-center {
    align-items: center;
}

ul.dropdown-menu li:hover {
    background-color: #eee;
}

.tree-view .tv-content *:not(.dataset-marker):not(.clickable) {
    pointer-events: none;
    word-break: break-all;
}

.tree-view .tv-content .clickable.overlay-items.selected {
    color: #428bca!important;
}
.tree-view li.tree-list-item>div>i.option-list:not(.show-dropdown) {
    opacity: 0;
    transition: opacity 0.4s;
}

.tree-view li.tree-list-item>div:hover>i.option-list {
    opacity: 1;
}

.tree-view li.tree-list-item>div>i.option-list.show-dropdown {
    background-color: #1366ae;
    color: #fff;
    border-radius: 4px;
}

.tree-view li.tree-list-item>div>span.options {
    opacity: 0;
    transition: opacity 0.4s;
}

.tree-view li.tree-list-item>div:hover>span.options {
    opacity: 1;
    color: #eee;
}

.tree-view li.tree-list-item>div:hover>span.options:hover {
    color: steelblue;
}

.tree-view .active {
    text-decoration: none;
    background-color: #e0f5fd;
    font-weight: 600;
}

.tree-view .active * {
    color: #179ed2;
}

.tree-view .tv-content {
    padding: 5px 10px;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
    word-break: break-all;
    white-space: break-spaces;
    flex: 1 1 auto;
}

.tree-view .tv-content:hover {
    background-color: #e0eef7;
}

.tree-view .tv-content.ui-selecting {
    background-color: #e0eef7;
}

.tree-view .no-border {
    border-left: none !important;
}

.tree-view .badge {
    /*background-color: #e0f5fd !important;*/
    /*color: #179ed2 !important;*/
    /*position: absolute;*/
    /*right: 2px;*/
}

#tree-view-dropdown-menu .dropdown-menu {
    z-index: 2000;
}

/* classic tree view */

.tree-view .classic-tree-list {
    list-style: none;
    width: 100%;
    height: auto;
}

.tree-view .classic-tree-list>.classic-tree-list-item {
    width: 100%;
    height: auto;
    margin: 5px 0px;
}

.tree-view .classic-tree-list:empty:after {
    content: attr(data-placeholder);
    color: dimgrey;
    width: 100%;
    display: block;
    margin: 5px 0;
    padding: 0 25px;
}
.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-content {
    width: 100%;
    height: auto;
    border-radius: 4px;

}

.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-content:hover {
    background-color: #e7f3fe;
}

.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-content.tv-active {
    background-color: #a4d5ff !important;
}

.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-children-container {
    width: calc(100% - 12px);
    height: auto;
    margin-left: 12px;
}

.tree-view .classic-tree-list .tv-exapnd-folder {
    /*font-size: x-large;*/
    color: var(--d3view-secondary-color);
    width: 10px;
}

.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-content:hover,
.tree-view .classic-tree-list>.classic-tree-list-item div.list-item-content:hover * {
    cursor: pointer;
}

.tree-view span.tv-add-item {
    color: var(--ribbon-active);
}
.tree-view .add-container {
    padding: 10px 25px;
    cursor: pointer;
}
.tree-view .add-container:hover {
    background-color: var(--dt-selection-color-light);
}
.tree-view span.tv-add-item:hover {
    cursor: pointer;
}

.filter-tree-container .tree-view ul.tree-list>li.tree-list-item {
    height: auto;
}


#tree-view-dropdown-menu .dropdown-submenu ul.dropdown-menu {
    max-height: 250px;
    overflow: auto;
}
#tree-view-dropdown-menu .dropdown-submenu ul.dropdown-menu li a {
    white-space: normal;
    word-break: break-all;
}


/** IMPROVED UI **/
.tree-view .tree-list-item > .vertical-center[data-isleaf="true"] > .tv-content {
    position: relative;
    /*left: 17px;*/
}
.tree-view .tree-list-item > .vertical-center span.show-children {
    /* width: 20px!important; */
    flex: 0 0 17px;
}
/* /javascripts/plugins_src/rule_maker/rule_maker.css */
.flex-box-rule-maker {
    display: flex;
    width: 100%;
}

/* typeahead CSS */
#rule-container .tt-menu {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 5px 0;
    width: 100%;
    overflow-y: auto;
   
    max-height: 300px;
    overflow-x: hidden;
    
    
}
#rule-container .twitter-typeahead {
    width: 100%;
    height : 34px;
    vertical-align: bottom;
    
}
#rule-container .tt-dataset .tt-suggestion:hover,
#rule-container .tt-dataset .tt-suggestion.tt-cursor {
    background-color: #428bca;
    color: #fff;
    cursor: pointer
}

/* select 2 CSS */

#rule-container .select2-container {
    height: 34px !important;
}

#rule-container .select2-container--default .select2-selection--single {
    height: 34px !important;
}

#rule-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 31px !important;
}
/* /javascripts/plugins_src/3dscatter/3dscatter.css */
.scatter-plot-3d {
    width: 100%;
    height: 100%;
    position: relative;
}

.scatter-plot-3d .legend-container {
    width: 180px;
    height: 190px;
    background-color: whitesmoke;
    z-index: 9999;
    display: block;
}


.scatter-plot-3d .options-container {
    position: absolute;
    right: 10px;
    top: 10px;
    width: auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    z-index: 20;
    background-color: #FFF;
    flex-direction: column;
}

.scatter-plot-3d .x-axis .tick {
    display: none !important;
}

.scatter-plot-3d .x-axis .tick:first-child,
.scatter-plot-3d .x-axis .tick:last-of-type {
    display: block !important;
}

.scatter-plot-3d .scatter-dropzone {
    width: 100%;
    height: 65px;
    margin: 10px 0px;
    border: 0.5px dashed #333;
    border-radius: 4px;
    vertical-align: middle;
    text-align: center;
    padding-top: 20px;
    overflow-y: auto;
    color: #ababab;
}

.scatter-plot-3d .selected-points-list {
    width: 180px;
    height: auto;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 10px 0px;
}

.scatter-plot-3d .remove-point {
    position: absolute;
    top: -7px;
    right: 0px;
    font-size: 35px;
}

.scatter-plot-3d .plot-3d-context-menu {
    position: absolute;
}

.scatter-plot-3d li a.context-menu-item:hover {
    cursor: pointer;
}

.scatter-plot-3d li a.context-menu-item * {
    pointer-events: none;
}

.scatter-plot-3d .d3view-autofit-icon {
    font-size: 10px !important;
}

.scatter-plot-3d .dropdown-submenu {
    position: relative;
}

.scatter-plot-3d .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: 2px;
}

.scatter-plot-3d .scaling-item {
    display: block;
    position: relative;
    color: #4f5359;
    padding-left: 10px;
}

.scatter-plot-3d .popover-title {
    display: none;
}

.scatter-plot-3d .row {
    margin: 0px;
}

.scatter-plot-3d div.popover {
    max-height: 90vh !important;
}

.scatter-plot-3d .scatter-configuration:hover {
    background-color: #f5f5f5;
}

/* Point movement styles */
.scatter-plot-3d .points-movable {
    cursor: grab;
}

.scatter-plot-3d .points-movable:active {
    cursor: grabbing;
}

.scatter-plot-3d .point-movement-active {
    position: relative;
}

.scatter-plot-3d .point-movement-active::after {
    content: "🖱️";
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 12px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    pointer-events: none;
}

.scatter-plot-3d .pred-table {
    position: absolute !important;
    right: 100px;
    top: 100px;
    /*width: 400px;*/
    height: 250px;
    cursor: move;
}

.scatter-plot-3d .pred-table .table-container {
    height: 100%;
    overflow: auto;
}

.scatter-plot-3d .pred-table table thead {
    position: sticky;
    top: -1px;
    background: #FFF;
    z-index: 3;
}

.scatter-plot-3d .surface-color {
    width: 100%;
    height: 26px;
    border-radius: 4px;
}

.scatter-plot-3d .surface-data-dropzone {
    width: 100%;
    height: 34px;
    border: 1px dashed #333;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
}

.scatter-plot-3d .surface-data-dropzone small {
    pointer-events: none;
}

.scatter-plot-3d .scatter-legend-container {
    position: absolute;
    right: 15px;
    bottom: 15px;
    height: 300px;
    width: 180px;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 50%);
    border-radius: 4px;
    
}

.scatter-plot-3d .legend-header {
    font-size: 0.75em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    border-bottom: 1px solid #eee;
}

.scatter-plot-3d .legend-header:hover {
    cursor: pointer;
}

.scatter-plot-3d text.legend-text {
    font-size: 0.8em;
    font-weight: 400;
}

.scatter-plot-3d .pr-container {
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.scatter-plot-3d .pr-container label.alert {
    width: 300px;
    padding: 2px 10px;
}

.scatter-plot-3d .sp-pr-message {
    font-size: 0.85em;
}

.scatter-plot-3d .margin-0 {
    margin: 0px;
}

.scatter-plot-3d .toggle-pr-btn * {
    pointer-events: none;
}

.scatter-plot-3d button * {
    pointer-events: none;
}

.scatter-plot-3d .curve-line-contextmenu {
    position: absolute;
}

.scatter-plot-3d li.cl-contextmenu-item * {
    pointer-events: none;
}

.scatter-plot-3d li.cl-contextmenu-item:hover {
    background-color: #eee;
    cursor: pointer;
}

.scatter-3d-loader-bg {
    width: calc(100%) !important;
    height: calc(100%)!important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scatter-3d-loader-bg .scatter-3d-loader-spinner {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.scatter-3d-loader-bg .scatter-3d-loader-message {
    margin: 25px 0px;
    padding: 5px 15px;
    border-radius: 4px;
}

.scatter-3d-loader-bg .scatter-3d-loader-close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 25px;
}

.mt5 {
    margin-top: 5px !important;
}

#scatter-helper-modal .scatter-render-editor {
    visibility: hidden;
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
}

.scatter-plot-3d .d3view-no-data {
    position: absolute;
    left: calc(48%);
    top: calc(49%);
    z-index: 10001;
}

.d3view-context-menu-container.scatter-3d-ctxmenu {
    width: 250px;
}
/* /javascripts/plugins_src/datasetcomparison/datasetcomparison.css */
.flex-box-dashboard {
    display : flex;
    width : 100%;
}
.flex-box-item-50 {
    display : flex;
    width : 50%;
    flex-direction : column;
}
/* /javascripts/plugins_src/d3view_calendar/d3view_calendar.css */
.calendar-view {
    --aspectRatio: auto;
}

.calendar-view {
    position: relative;
    aspect-ratio: var(--aspectRatio);
    display: grid;
    grid-template-rows: 50px auto;
    gap: 15px;
}

.calendar-view .calendar-nav {
    justify-content: space-between;
}

.calendar-view ul.calendar-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.calendar-view ul.calendar-week-header[data-viewtype="weekly"] {
    border-bottom: unset !important;
}



.calendar-view ul.calendar-week-header>li {
    text-align: left;
    padding: 10px;
    color: #333;
    font-weight: 500;
    font-size: 1.2em;
}

.calendar-view ul.calendar-week-header>li:is(:first-child, :last-child) {
    color: gray !important;
}


.calendar-view ul.calendar-week-header>li:not(:last-child) {
    border-right: 1px solid #ddd;
}

.calendar-view .calendar-legends {
    flex: 1 1 auto;
}

.calendar-view li.calendar-pagination-icon {
    padding: 8px;
}

.calendar-view li.calendar-pagination-icon>a {
    font-size: x-large;
}

.calendar-view .weekly-container,
.calendar-view .month-container {
    overflow: auto;
}

.calendar-view .calendar-body {
    display: flex;
    flex-flow: column nowrap;
}

.calendar-view .week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #ddd;
    position: relative;
    min-height: 160px;
}

.calendar-view .week-row>.weekday:not(:last-child) {
    border-right: 1px solid #ddd;
}

.calendar-view .week-row>.weekday:is(:first-child, :last-child)>.date-label {
    color: #333;
}

.calendar-view .week-row>.weekday:is(:first-child, :last-child)>.date-label {
    color: #ddd !important;
}

.calendar-view .weekday {
    position: relative;
}

.calendar-view .event-label {
    position: absolute;
    padding: 1px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--dt-selection-color-dark);
    border-radius: 4px;
    /*font-size: 11px;*/
}
.calendar-view .event-item .event-label {
    position: relative;
}
.calendar-view .popover-content .list-group {
    max-height: 250px;
    overflow: auto;
}
/*.calendar-view .event-label:hover {*/
/*    background: #428bca;*/
/*    color: #FFF;*/
/*}*/

.calendar-view .event-label .event-name {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 15px);
    overflow: hidden;
}
.calendar-view .event-label .event-info {
    /*position: absolute;*/
    /*right: 5px;*/
}
.calendar-view .event-label .event-info:hover,
.calendar-view .event-label .event-info.opened {
    color: red;
}

.calendar-view .event-selected,
.calendar-view .temp-event-selected {
    background: green !important;
    color: #fff !important;
}

.calendar-view .weekday-droppable::after {
    content: '"Drop Here"';
    left: calc(50% - 50px);
    top: calc(50% - 20px);
    position: absolute;
    color: lightblue;
    opacity: 0.6;
    padding: 10px;
    border: 1px dashed lightblue;
    border-radius: 5px;
}

.calendar-view .event-label:hover {
    cursor: pointer;
}

.calendar-view .show-more-events {
    position: absolute;
    font-size: 1.1em;
    padding-left: 5px;
}

.calendar-view .create-event {
    position: absolute;
    bottom: 5px;
    width: calc(100% - 30px);
    left: 10px;
    text-align: right;
    font-size: 1.1em;
    text-transform: capitalize;
    /* font-weight: 500; */
    display: none
}

.calendar-view .weekly-container .create-event {
    display: block !important;
    text-align: center !important;
}

.calendar-view .week-row>.weekday:hover>.create-event {
    display: block;
}

.calendar-view .create-event:hover {
    cursor: pointer;
}

.calendar-view .show-more-events:hover {
    cursor: pointer;
}

.calendar-view .event-item:hover {
    cursor: pointer;
}

.calendar-view .event-item {
    word-break: break-all;
}


.calendar-view .date-label {
    margin-left: 8px;
    margin-top: 10px !important;
}

.calendar-view .date-label>span {
    font-size: 1.2em;
}

.calendar-view .event-on-focus {
    background-color: steelblue !important;
    color: #fff;
}

.calendar-view span[data-element="calendar-label"] input {
    /* width: 150px; */
}
.calendar-view  span[data-element="calendar-label"] input[name="update-calendar"]::-webkit-calendar-picker-indicator {
    background: transparent;
}
/* /javascripts/plugins_src/dynamic_column_selector/dynamic_column_selector.css */
.column-selection {
    width: 100%;
    height: auto;
}

.column-selection .column-selection-title {
    margin: 10px 0px;
}

.column-selection .column-selection-body {
    margin-left: 0px;
    margin-right: 0px;
}

.column-selection .column-row {
    display: flex;
    align-items: center;
}

.column-selection .column-row>.column-icon {
    width: 100px;
}

.column-selection .column-row>.inputs {
    width: calc(100% - 100px);
    margin-left: 0px;
    margin-right: 0px;
}

.column-selection .column-row>.column-icon>i {
    font-size: 18px;
}

.column-selection .column-row>.column-icon>i:hover {
    cursor: pointer;
    background-color: #eee;
    border-radius: 4px;
}

.column-selection .colum-selection-input {
    width: 100%;
}
/* /javascripts/spa/databases/database.css */
.database-item-view {
    background-color: #fff;
    z-index:2;
}

/* ─── Databases list shell ────────────────────────────────────────────────────
   Databases is on the same shell as Simulations / Physical Tests: the rail, the
   Chrome-style tab strip and the flush content column. The STRIP itself is not
   styled here -- #databases was added to the existing #physicaltests selector
   groups in stylesheets/style.css as a selector-list change with zero new
   declarations, because AppPage.Strip emits the same markup shape PT does
   (.db-tab-name + .remove-db-tab INSIDE the anchor). Do not copy the
   #responsetemplates/#studies block instead: those pages get their chips from
   GenericTabContents, where the close button is a SIBLING of the anchor.

   NOTE the page root is #user-datarecords (app/views/user/datarecords.tpl), not
   #user-databases -- the app is "Databases" but the route and the record model
   are datarecord/Datarecord. */

#databases.content-col { padding: 0; }

/* House rule 2: no persistent "All Databases" home tab. The <li> stays in the
   DOM (AppPage.Strip pins it and the router toggles it) but is hidden; the back
   arrow AppPage injects into each detail pane is the way back to the list. */
#databases #tabsList > li.Table_view { display: none; }

/* The rail is for the LIST, so it collapses whenever a detail pane is visible.
   Panes toggle the .hidden CLASS (never inline display), which is exactly what
   makes this selector work -- see house rule 1 in apppage.js. Mirrors
   physicaltest.css:1254. */
#user-datarecords .two-col-flex:has(#databases #tabsContent > .tabContent[class*="db-tab-view-"]:not(.hidden)) .sim-left-col {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-right-width: 0;
    opacity: 0;
}
#user-datarecords .two-col-flex:has(#databases #tabsContent > .tabContent[class*="db-tab-view-"]:not(.hidden)) .sim-left-col-inner {
    display: none;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */

.db-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e6e8eb;
}

.db-fp { flex: 1 1 320px; min-width: 260px; }

.db-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.db-toolbar-right .number-of-records { color: #5f6368; font-size: 12px; white-space: nowrap; }

/* NOT relying on default <label> layout -- d3VIEW's core stylesheet carries an
   unscoped `label { display: block !important }`, so flex/gap on a <label> is
   dead on arrival unless this rule is !important too. Deliberate, not cargo
   cult; see .claude/rules/jquery-hide-does-not-work-on-a-label.md. */
.db-perpage {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    color: #5f6368;
    font-size: 12px;
    white-space: nowrap;
}

.db-limit {
    height: 28px;
    padding: 0 6px;
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: #fff;
    color: #202124;
    font-size: 12px;
}

/* ─── Pager: flat, no .input-group / .btn ────────────────────────────────────
   Ported from #studies (spa/study.css) so the two toolbars match. setUpPagination
   toggles a `disabled` CLASS on .pagenav (not the attribute) and a `hidden` class
   on .paginationArea, so both are styled here rather than relying on Bootstrap. */
#databases .paginationArea { display: inline-flex; align-items: center; }
#databases .paginationInputContainer {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid #dfe1e6; border-radius: 6px; background: #fff;
    padding: 2px 4px; height: 30px; box-sizing: border-box;
}
#databases .paginationInputContainer .pagenav {
    border: none; background: transparent; color: #6b7280;
    width: 24px; height: 24px; padding: 0; border-radius: 4px;
    font-size: 12px; line-height: 1; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
#databases .paginationInputContainer .pagenav:hover  { background: #f4f5f7; color: #0052cc; }
#databases .paginationInputContainer .pagenav:active { background: #e9ecef; }
/* a CLASS, not [disabled] -- see setUpPagination */
#databases .paginationInputContainer .pagenav.disabled {
    opacity: .35; pointer-events: none; cursor: default;
}
#databases .paginationInputContainer #targetPageNumber {
    width: 44px; height: 24px; padding: 0 4px; margin: 0 2px;
    border: 1px solid #e5e7eb; border-radius: 4px; background: #fff;
    color: #1f2328; font-size: 12px; text-align: center; box-shadow: none;
}
#databases .paginationInputContainer #targetPageNumber:focus { border-color: #4c9aff; outline: none; }
#databases .db-pagesep      { color: #c1c7d0; font-size: 11px; padding: 0 1px; }
#databases .maxPageIndicator {
    min-width: 16px; padding: 0 4px; color: #6b7280; font-size: 12px;
    background: transparent; border: none; text-align: center;
}

/* search fallback when the FilterPanel component is unavailable */
#databases .db-fallback {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    border: 1px solid #dfe1e6; border-radius: 6px; padding: 5px 10px; background: #fff;
}

.db-bulk .bulk-action {
    border: 1px solid #dadce0;
    border-radius: 6px;
    background: #fff;
    color: #202124;
    font-size: 12px;
}
.db-bulk .bulk-action.disabled { opacity: .5; pointer-events: none; }

.database-collection { padding: 14px; }

/* ─── Legacy filter controls: PARKED, not removed ─────────────────────────────
   These are still the source of truth. Views.Index's delegated
   'change .database-filter' handler, getFilterParameters() and
   setPreviouslyUsedFilters() all read these exact classes, and FilterPanel
   pushes values into them. Moved off-screen rather than display:none so they
   stay settable and .val() keeps reporting real values; tabindex="-1" in the
   markup keeps them out of the tab order. */
.db-legacy-filters {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .db-toolbar { gap: 8px; padding: 8px 10px; }
    .db-toolbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
    .db-fp { flex: 1 1 100%; }
}

/* ─── Cards ───────────────────────────────────────────────────────────────────
   Visual language ported from the Studies cards (PLUGINS studiesnew.css
   .studiesnew-study-card). Deliberately re-expressed as db-* classes instead of
   reusing the studiesnew-* ones: that stylesheet belongs to the studies plugin
   and is not guaranteed to be loaded on this page, so borrowing its class names
   would make the Databases cards silently unstyled the day it stops shipping. */

#databases .db-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 0;
    box-sizing: border-box;
}

/* CollectionView.onModelAdd appends one of these per model */
#databases .db-cards-grid > .database-container {
    float: none; width: 100%; max-width: 100%; min-width: 0;
    padding: 0; margin: 0; box-sizing: border-box;
}

#databases .db-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}
#databases .db-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

/* header */
#databases .db-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
#databases .db-card-header-left { flex: 1; min-width: 0; }
#databases .db-card-name {
    font-size: 14px; font-weight: 600; text-decoration: none; color: #1e293b;
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.2s ease;
}
#databases .db-card-name:hover { color: #2563eb; }
#databases .db-card-name-plain { color: #475569; cursor: default; }
#databases .db-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
#databases .db-card-actions .btn { padding: 4px 8px; cursor: pointer; }

/* body */
#databases .db-card-body {
    padding: 10px 14px 8px;
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
}
#databases .db-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#databases .db-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px; font-size: 11px; font-weight: 600;
    border-radius: 20px; white-space: nowrap; border: 1px solid transparent;
}
#databases .db-tag-id   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
#databases .db-tag-type { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
#databases .db-tag-vis  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

#databases .db-stats { padding: 6px 0 4px; border-top: 1px solid #f1f5f9; }
#databases .db-stat-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;
}
#databases .db-stat { min-width: 0; }
#databases .db-stat-label {
    display: block; font-size: 11px; font-weight: 600;
    font-variant: small-caps; color: #64748b;
}
#databases .db-stat-value {
    font-size: 12px; font-weight: 700; color: #1e293b;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#databases .db-stat-value .fa { font-size: 12px; color: #94a3b8; }

#databases .db-paths {
    display: flex; flex-direction: column; gap: 6px;
    padding-top: 6px; border-top: 1px solid #f1f5f9;
}
#databases .db-path-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
#databases .db-path-label {
    font-size: 11px; font-weight: 600; font-variant: small-caps;
    flex-shrink: 0; min-width: 60px; color: #64748b;
}
#databases .db-path-value {
    flex: 1; min-width: 0; font-size: 11px; padding: 4px 8px;
    background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0; color: #334155;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* footer */
#databases .db-card-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around;
    gap: 4px; padding: 8px 10px;
    border-top: 1px solid #e2e8f0; background: #f8fafc;
    min-height: 37px;                     /* keeps a card with no footer links aligned */
}
#databases .db-footer-link {
    font-size: 12px; font-weight: 600; color: #475569; text-decoration: none;
    padding: 4px 8px; border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}
#databases .db-footer-link:hover { color: #2563eb; background: rgba(59,130,246,0.08); }
#databases .db-footer-note { font-size: 12px; font-weight: 600; color: #166534; padding: 4px 8px; }

/* Selection. ThumbnailView.onToggleSelection puts `selected` (+ btn-success,
   - btn-default) on the BUTTON itself -- $(evt.currentTarget) -- not on the
   container, so the card ring has to be driven from the button upward. */
#databases .db-card:has(.toggle-selection.selected) {
    box-shadow: 0 0 0 2px #3b82f6, 0 6px 20px rgba(59,130,246,0.15);
    border-color: #2563eb;
}
#databases .db-card-actions .toggle-selection.selected {
    background: #16a34a; border-color: #15803d; color: #fff;
}

/* empty state */
#databases .db-empty-state {
    grid-column: 1 / -1;
    text-align: center; padding: 48px 16px; color: #64748b;
}
#databases .db-empty-icon  { font-size: 32px; color: #cbd5e1; display: block; margin-bottom: 10px; }
#databases .db-empty-title { font-size: 15px; font-weight: 600; color: #334155; }
#databases .db-empty-text  { font-size: 12px; margin-top: 4px; }

/* ─── Loading skeleton ────────────────────────────────────────────────────────
   #ph-databases-thumbnails-view. Every band below is sized to the element it
   stands in for in the REAL card, so the grid does not re-flow when data lands:
     name   13px  <- .db-card-name        (14px text)
     tag    18px  <- .db-tag              (2px pad + 11px text), 20px radius
     label   9px  <- .db-stat-label       (11px small-caps)
     value  12px  <- .db-stat-value       (12px bold)
     path   21px  <- .db-path-value       (4px pad + 11px + 1px border)
     footer 20px  <- .db-footer-link      (4px pad + 12px text)
   The card shell itself is NOT restated -- the skeleton reuses .db-card and
   .db-cards-grid directly, which is what guarantees identical geometry. */

#databases .db-card-skeleton { pointer-events: none; }
/* no hover lift on a placeholder -- it reads as an interactive card */
#databases .db-card-skeleton:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    border-color: #e2e8f0;
}

#databases .db-card-skeleton .sim-skeleton-block { border-radius: 4px; }

#databases .db-sk-name  { height: 13px; width: 62%; border-radius: 4px; }
#databases .db-sk-btn   { height: 24px; width: 26px; border-radius: 4px; }

#databases .db-sk-tag        { height: 18px; width: 62px; border-radius: 20px !important; }
#databases .db-sk-tag-sm     { width: 46px; }
#databases .db-sk-tag-lg     { width: 78px; }

#databases .db-card-skeleton .db-stat { text-align: center; }
#databases .db-sk-stat-label { display: block; height: 9px;  width: 60%; margin: 0 auto 5px; }
#databases .db-sk-stat-value { display: block; height: 12px; width: 78%; margin: 0 auto; }

#databases .db-sk-path-label { height: 9px;  width: 52px; flex-shrink: 0; }
#databases .db-sk-path-value { height: 21px; flex: 1; border-radius: 6px !important; }

#databases .db-sk-footer { height: 20px; width: 84px; }

/* Stagger the columns so the grid shimmers as a wave rather than one flat pulse.
   nth-child on the GRID ITEM, because the card itself is the animated element's
   ancestor -- .sim-skeleton-block carries the animation. */
#databases .db-cards-skeleton > .database-container:nth-child(3n+2) .sim-skeleton-block { animation-delay: 0.12s; }
#databases .db-cards-skeleton > .database-container:nth-child(3n+3) .sim-skeleton-block { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    #databases .db-card-skeleton .sim-skeleton-block { animation: none; background: #eceff3; }
}

/* /javascripts/plugins_src/color_conditions/color_conditions.css */
.d3view-color-gradient {
    height: 100%;
}
.gradient-color {
    border: 1px solid #ddd;
    border-radius: 4px;
}

.grdient-slider {
    height: 14px;
    background: whitesmoke;
    border-radius: 4px;
    position: relative;
    margin-top: 5px;
}

.cbc-handle {
    position: absolute;
    top: -3px;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.cbc-handle:hover {
    cursor: pointer;
}

.handle-value-input {
    position: absolute;
    top: 25px;
    left: -15px;
    width: 150px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    z-index: 999;
    background: white;
}

.handle-value-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

span.cbc-handle::before {
    content: attr(data-value);
    width: 50px;
    position: absolute;
    top: 120%;
    left: -15px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    z-index: 999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.cbc-handle::after {
    content: '\f362';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0px;
    font-size: 0.8em;
    color: whitesmoke;
    top: -1px;
}

/* span.cbc-handle:first-child::before {
    left: 0px !important;
}

span.cbc-handle:last-child::before {
    left: -30px !important;
} */
/* /javascripts/plugins_src/generic_inputs_view/generic_inputs_view.css */
/* 
    generic css
*/

.generic-input-template {
    --search-bar-font-color: #333;
    --search-bar-bg-color: #f4f4f4;

    --color-black: hsl(0, 0%, 10%);
    --color-grays: hsl(0, 0%, 65%);
    --color-light: hsl(0, 0%, 96%);
    --color-white: hsl(0, 0%, 100%);
    --color-blues: hsl(225, 100%, 60%);

}

.generic-input-template {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
}

.generic-input-template .gi-body>.tab-content>.tab-pane.active {
    display: flex !important;
    flex-flow: row wrap !important;
}

.generic-input-template .gi-main-container {
    border-radius: 10px;
    /* border: 0.5px solid #eee; */
    border: none;
    width: calc(100%);
    height: calc(100%);
}

/* controlsPosition: 'top' - reorder the flex column so the pager controls sit
   directly under the stepper nav, above the gi body (nav -> controls -> body). */
.generic-input-template .gi-main-container.gi-controls-top {
    display: flex;
    flex-direction: column;
}
.generic-input-template .gi-main-container.gi-controls-top > .gi-stepper-nav {
    order: 0;
}
.generic-input-template .gi-main-container.gi-controls-top > section.gi-controls {
    order: 1;
    border-top: none;
    border-bottom: 1px solid var(--d3v-border-subtle, #e5e7eb);
}
.generic-input-template .gi-main-container.gi-controls-top > section.gi-body {
    order: 2;
}

.generic-input-template .gi-side-nav {
    background-image: linear-gradient(45deg, #DCBAE8, #EEBBE7, #E2E1E4);
    border-radius: 10px 0px 0px 10px;


    background-color: #7ee8fa;
    background-image: linear-gradient(315deg, #7ee8fa 0%, #80ff72 74%);
    z-index: 0;

}

.generic-input-template .gi-top-nav {
    background-image: linear-gradient(-45deg, #DCBAE8, #EEBBE7, #E2E1E4);
    opacity: 0.75;
    border-radius: 10px 10px 0px 0px;
    height: 60px;
}

.generic-input-template .user-input-container {
    overflow: auto;
    /*scrollbar-gutter: stable;*/
}

.generic-input-template .rating-star {
    margin-right: 10px;
}

.generic-input-template .column-edited {
    border-left: 5px solid mediumorchid;
}

.generic-input-template .rating-star:hover {
    cursor: pointer;
}

.generic-input-template .rating-star.selected-star {
    color: orange !important;
}

.generic-input-template .rating-star.hovered-star {
    color: rgb(253, 209, 128);
}

.generic-input-template .gi-user-modified-input {
    background-image: linear-gradient(135deg, #f6f6f6, #bbd5ea);
}

.generic-input-template .reset-gi-input:hover {
    cursor: pointer;
}

.generic-input-template .gi-description:hover {
    cursor: pointer;
    color: steelblue;
}

.generic-input-template .gi-error {
    background-image: linear-gradient(135deg, #fcf5f5, #fccbcb) !important;
}

/* 
    tree-view css
*/
.generic-input-template .gi-tree-view-side-nav {
    border-radius: 10px 0px 0px 10px;
    opacity: 0.75;
    background-color: whitesmoke;
}


.generic-input-template .gi-breadcrumb {
    margin: 0px -6px !important;
    border-radius: 0px 10px 0px 0px;
}

/* 
    side nav search bar css specific css similar to chrome 
*/



.generic-input-template .ct-tab-list-item.active {
    /* background-color: #349AFE; */
    background-color: #e8f0fe;
}


.generic-input-template .ct-tab-list-item.active>a,
.generic-input-template .ct-tab-list-item.active>a:focus,
.generic-input-template .ct-tab-list-item.active>a:active {
    background-color: transparent;
    /* color: #fff; */
    color: #1967d2;
}

.generic-input-template .ct-tab-list-item>a:hover {
    background-color: transparent !important;
    border: none !important;
}

.generic-input-template .ct-tab-list-item>a {
    text-decoration: none;
    width: 100%;
    height: 100%;
    border: none !important;
}

.generic-input-template .ct-tab-list-item>a * {
    pointer-events: none;
}


/* 
    input field custom css
*/

.generic-input-template .gi-form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: #212529;
    /* background-color: #fff; */
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.generic-input-template .gi-form-control:focus {
    color: #212529;
    /*  background-color: #fff; */
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.generic-input-template .gi-form-control.gi-input-error {
    border-color: #dc3545 !important;
}

.generic-input-template .gi-form-control.gi-input-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%) !important;
}


.generic-input-template .gi-form-label {
    /* font-size: 15px; */
    font-weight: 400;
}

.generic-input-template .form-floating {
    position: relative;
    width: 100%;
    height: 3rem;
}

.generic-input-template .form-floating-textarea {

    height: 4rem !important;
}

.generic-input-template .form-floating-label {
    position: absolute;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    left: 1rem;
    top: 0.75rem;
    padding: 0 0.25rem;
    color: var(--color-gray);
    background: var(--color-white);
    transition: all 0.3s ease;
    margin-top: 0px;
}

.generic-input-template .form-floating-input {
    position: absolute;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    resize: none;
    width: 100%;
    height: auto;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.25rem !important;
    border: 1.5px solid var(--color-grays) !important;
    color: var(--color-black) !important;
    background: transparent !important;
    transition: all 0.2s ease-in-out;
}


.generic-input-template .form-floating-input::placeholder {
    opacity: 0;
    visibility: hidden;
    color: transparent;
}

.generic-input-template .form-floating-input:focus {
    outline: none !important;
    border: 2px solid var(--color-blues) !important;
}

.generic-input-template .form-floating-input.gi-input-error:focus {
    border-color: #dc3545 !important;
}


.generic-input-template .form-floating-input:focus+.form-floating-label {
    top: -0.75rem;
    left: 1rem;
    z-index: 5;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-blues);
    transition: all 0.2s ease-in-out;
}

.generic-input-template .form-floating-input.gi-input-error:focus+.form-floating-label {
    color: #dc3545 !important;
    ;
}

.generic-input-template .form-floating-input:not(:placeholder-shown):not(:focus)+.form-floating-label {
    top: -0.75rem;
    left: 1rem;
    z-index: 9;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}


.generic-input-template .gi-table {
    table-layout: fixed !important;
}

/* 
    divider css
*/

.generic-input-template .gi-container {
    display: inline-block;
    position: relative;
    padding: 10px 10px 20px 10px;
    max-width: 100%;
}



/* 
    checkbox switch css
*/

.generic-input-template .gi-input {
    display: inline-flex;
    justify-content: flex-start;
    border-radius: 4px;
}

.generic-input-template .check-box {
    display: flex;
    align-items: center;
}

/*.generic-input-template input[type="checkbox"] {*/
/*    position: relative;*/
/*    appearance: none;*/
/*    width: 50px;*/
/*    height: 25px;*/
/*    background: #eee;*/
/*    border-radius: 50px;*/
/*    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);*/
/*    cursor: pointer;*/
/*    transition: 0.4s;*/
/*    text-decoration: none;*/
/*}*/

/*.generic-input-template input:checked[type="checkbox"] {*/
/*    background: #7da6ff;*/
/*}*/

/*.generic-input-template input[type="checkbox"]::after {*/
/*    position: absolute;*/
/*    content: "";*/
/*    width: 25px;*/
/*    height: 25px;*/
/*    top: 0;*/
/*    left: 0;*/
/*    background: #fff;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 0 5px rgb(0 0 0 / 20%);*/
/*    transform: scale(1.1);*/
/*    transition: 0.4s;*/
/*}*/

/*.generic-input-template input:checked[type="checkbox"]::after {*/
/*    left: 50%;*/
/*}*/

/* 
    color css
*/

.circle-picker .clr-field button {
    width: 22px;
    height: 22px;
    left: 5px;
    right: auto;
    border-radius: 5px;
}


.circle-picker .clr-field input {
    padding-left: 36px;
}

.circle-picker .clr-field button {
    border-radius: 50%;
}

.circle-picker .clr-field {
    width: 100%;
}

/* 
    dropzone buttons
*/

button * {
    pointer-events: none;
}

/* 
    input error message css
*/

.generic-input-template .gi-error-message {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 2.5px 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 
    select css
*/

.generic-input-template .select2-container .select2-choice {
    height: 34px;
}

.generic-input-template .select2-container .select2-choice>.select2-chosen {
    padding-top: 2px;
}

.generic-input-template .gi-input-hidden {
    visibility: hidden;
}


/*  
    stepper css
*/

.gi-stepper-nav {
    /*background-image: linear-gradient(-45deg, #DCBAE8, #EEBBE7, #E2E1E4);*/
    /*opacity: 0.75;*/
    border-radius: 10px 10px 0px 0px;
    padding: 20px 0px;
    /* background-color: #7ee8fa;
    background-image: linear-gradient(315deg, #7ee8fa 0%, #80ff72 74%); */
    z-index: 1;

    height: 120px;
}

.gi-stepper-nav ul.gi-stepper-nav-items {
    counter-reset: step;
    display: flex;
    width: 100%;
}

.gi-stepper-nav ul.gi-stepper-nav-items[data-crisp="true"] > li {
    flex: 0 0 calc(100% / 5);
}
.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.crisp-dd:before {
    display: none;
}

.generic-input-template .gi-main-container[data-crisp-menu="true"] .gi-stepper-nav {
    display: flex;
    /* align-items: center; */
}
.generic-input-template .gi-main-container[data-crisp-menu="true"] .gi-stepper-nav > ul {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: none;
    position: relative;
}
.generic-input-template .gi-main-container[data-crisp-menu="true"] .gi-stepper-nav .scroll_buttons {
    width: 150px;
}
.generic-input-template .gi-main-container[data-crisp-menu="true"] .gi-stepper-nav .scroll_buttons.btn-group > button {
    padding: 5px 10px;
}
.gi-stepper-nav li.crisp-dd .crisp-step-tt {
    position: absolute;
    top: 39px;
    left: -84px;
    width: 200px;
    pointer-events: all;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item {
    list-style-type: none;
    float: left;
    position: relative;
    text-align: center;
    font-weight: 600;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item>a {
    text-decoration: none;
    font-size: 1.2em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: calc(100% - 30px);
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item::before {
    content: counter(step);
    counter-increment: step;
    height: 30px;
    width: 30px;
    border: 2px solid #ddd;
    display: block;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    margin: 0px auto 10px auto;
    padding: 4px;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed:not(.crisp-dd)::before {
    /*content: counter(step);*/

    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    height: 30px;
    width: 30px;
    display: block;
    text-align: center;
    border-radius: 50%;
    margin: 0px auto 10px auto;
    padding: 4px;
    background-color: lightgreen;
    border-color: #27ae60;
    /*color: #fff;*/
}
.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed.crisp-dd button[data-toggle="dropdown"] {
    color: #FFF;
    background: #27ae60;
    text-shadow: none;
}
.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed.crisp-dd li.gi-pager-control:after {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 10px;
    top: 7px;
    color: green;
}
.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item:first-child::after {
    content: none;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.active {
    color: #27ae60;
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.active::before {
    /*border-color: #27ae60;*/
    animation: bgd-color-change 2s ease-in infinite;
    background-color: #27ae60;
    border-color: #27ae60;
    color: #FFF;
}

@keyframes bgd-color-change {
    50% {
        background-color: lightgreen;
        border-color: lightgreen;

    }
}

@keyframes border-color-change {
    10% {
        border-color: #f6f
    }

    30% {
        border-color: #0e0;
    }

    50% {
        border-color: #0dd
    }

    100% {
        border-color: #f90;
        ;
    }
}

.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed+li.gi-stepper-nav-item::after {
    /*.gi-stepper-nav ul.gi-stepper-nav-items li.gi-stepper-nav-item.active+li.gi-stepper-nav-item::after {*/
    background-color: #27ae60;
}


/* 
    Breadcrumb style for stepper
    Transforms the stepper into a breadcrumb-like appearance
*/

.gi-stepper-nav.gi-stepper-breadcrumbs {
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0 !important;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    margin-right: 8px;
    width: auto !important;
    flex: 0 0 auto !important;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item::before {
    display: none !important;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item::after {
    content: "/";
    position: absolute;
    right: -6px;
    color: #000;
    font-weight: 300;
    font-size: 14px;
    background-color: transparent !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item:last-child::after {
    content: none;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed+li.gi-stepper-nav-item::after {
    background-color: transparent !important;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item > a {
    color: inherit;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: visible;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item > a:hover {
    background-color: transparent;
    color: inherit;
}

/* .gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item > a::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
} */

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item.step-completed > a::after {
    opacity: 1;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item.active > a {
    background-color: transparent;
    border: none;
    color: #27ae60;
}

.gi-stepper-nav.gi-stepper-breadcrumbs ul.gi-stepper-nav-items li.gi-stepper-nav-item.active > a::before {
    display: none !important;
}




/* typeahead */

.generic-input-template .gi-container .twitter-typeahead {
    width: 100% !important;
}

.generic-input-template .gi-img-group {
    display: grid;
    grid-template-columns: auto 50px;
}

.generic-input-template .gi-img-group>div.gi-img {
    height: 130px;
    outline: 1px solid #eee;
}

.generic-input-template .gi-img-group>div.gi-img>img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: scale-down;
}

.generic-input-template .gi-img-group>div.gi-img-btns>button {
    margin: 2.5px 10px;
}

.generic-input-template .gi-input-group {
    display: flex;
    flex-flow: row nowrap;
}

.generic-input-template .gi-input-group>div:first-child {
    flex: 1 1 calc(100% - 35px);
}

.generic-input-template .gi-input-group>div:last-child {
    flex: 1 1 35px;
}

.generic-input-template .gi-dataset-group {
    display: grid;
    grid-template-columns: auto 50px;
}

.generic-input-template .gi-dataset-group>.gi-dataset {
    height: 130px;
    outline: 1px solid #eee;
    overflow: auto;
}

.generic-input-template .gi-dataset-group>div:last-child>button {
    margin: 2.5px 10px;
}

.generic-input-template .gi-container>span.d3view-cp-rect {
    height: 34px;
}


.generic-input-template .cs-search-bar {

    --flex: flex;
    --flex-column: column;
    --w100: calc(100%);
    --vAlign-center: center;
    --hAlign-center: center;
    --search-bar-font-color: #333;
    --search-bar-bg-color: #f4f4f4;
    --bg-transparent: transparent;

    width: 400px;
    height: auto;
    display: var(--flex);
    align-items: var(--vAlign-center);
    border-radius: 35px;
    background-color: var(--search-bar-bg-color);
    color: var(--search-bar-font-color);
    padding: 5px 15px;
}

.generic-input-template .cs-search-icon {
    border-radius: calc(50%);
}

.generic-input-template .cs-search-icon:hover {
    background-color: rgb(211, 209, 209);
    cursor: pointer;
}

.generic-input-template .cs-search-bar-input {
    width: calc(100% - 70px);
    height: 34px;
    border: none;
    background-color: var(--bg-transparent);
}

.cs-search-cancel {
    display: none;
    background-color: rgb(67, 63, 63);
    color: whitesmoke;
    padding: 6px 8px;
    border-radius: 50%;
}

.generic-input-template .cs-search-bar-input:not(:placeholder-shown)+.cs-search-cancel {
    display: block;
    cursor: pointer;
}

.generic-input-template .gi-table-view {
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
}

.generic-input-template .gi-table-nav {
    justify-content: space-between;
}

.generic-input-template .gi-table-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: auto;
}

.generic-input-template .gi-table-body {
    height: calc(100% - 55px);
    max-width: 100%;
    overflow: auto;
}

.generic-input-template .gi-table {
    table-layout: fixed !important;
    max-width: unset !important;
}

.generic-input-template .gi-table-cell {
    min-width: 350px;
}

.generic-input-template .gi-img-container {
    width: calc(100% - 40px);
    height: 200px;
}

.generic-input-template .gi-img-container>img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border: 3px double #ddd;
    border-radius: 4px;
}

.generic-input-template .gi-img-controls>li {
    display: block;
    margin: 5px 0px;
}

.generic-input-template .btn>i {
    pointer-events: none;
}

.generic-input-template .gi-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: scale-down;
    pointer-events: none;
}

.generic-input-template .gi-color-btn.disabled {
    pointer-events: none;
}

.generic-input-template .gi-input-container {
    max-width: calc(100% - 35px);
    flex: 1 1 auto;
}

.generic-input-template .btn-groups {
    display: inline-block;
}

.generic-input-template .gi-container .twitter-typeahead {
    width: 100%;
}

.generic-input-template .gi-container .typeahead,
.generic-input-template .gi-container .tt-query,
.generic-input-template .gi-container .tt-hint {
    width: 100%;
    height: 30px;
    padding: 8px 12px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.generic-input-template input[type=text][readonly] {
    background-color: #fff;
}

.generic-input-template .gi-input-droppable {
    border: 2px dashed #ddd;
    position: relative;
}

.generic-input-template .gi-input-droppable::before {
    content: 'Drop Here.';
    position: absolute;
    left: calc(50% - 30px);
    top: calc(50% - 15px);
    font-size: x-large;
    color: #ddd;
    z-index: 1000023;
}

.generic-input-template .gi-section {
    border: 1px solid #ddd;
    border-radius: 6px;
}

.generic-input-template .gi-border-top {
    border-top: 1px solid #ddd;

    padding: 10px!important;
}

.generic-input-template .gi-pager-controls :is(button, div) {
    display: inline-block;
}

.generic-input-template ul.chrome-tabs {
    padding: 0px 10px !important;
    border: none !important;
    min-height: auto !important;
}


.generic-input-template span.range-count::before {
    content: '\f30b';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
}
/* /javascripts/plugins_src/turings3/turings3.css */
.hpc-server-config-container {
    --aspect_ratio: auto;
}

.hpc-server-config-container {
    position: relative;
    aspect-ratio: var(--aspect_ratio);
    display: flex;
    flex-flow: row nowrap;
    gap: 10px;
}

.hpc-server-config-container .hpc-job-preview-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 999;
}

.hpc-server-config-container .hpc-server-config-left-nav-bar {
    width: 80px;
    height: 100%;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 2px 0px 3px #ddd;
}

.hpc-server-config-container .hpc-server-section-viewer {
    width: 200px;
}

.hpc-server-config-container .hpcs-section-viewer {
    border-radius: 10px;
    box-shadow: 0px 0px 4px #ddd;
}

.hpc-server-config-container .hpcs-section-content-item {
    padding: 6px 10px;
    margin: 10px 10px;
    width: calc(100% - 20px);
    border-radius: 4px;
    border: 1px solid #eee;
    background-image: linear-gradient(135deg, #FFF, #ddd);
    font-size: 13px;
    font-weight: 500;
}

.hpc-server-config-container .hpcs-section-content-item:hover {
    cursor: pointer;
}

.hpc-server-config-container .hpcs-section-active {
    background-image: linear-gradient(135deg, lightblue, #004176);
    color: ghostwhite;
}

.hpc-server-config-container .hpc-server-config-viewer {
    width: calc(100% - 300px);
}

.hpc-server-config-container ul.hpc-server-side-nav-list {
    padding: 15px 0px;
    height: calc(100% - 70px);
    overflow: auto;
}

.hpc-server-config-container ul.hpc-server-side-nav-list::-webkit-scrollbar {
    display: none;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item {
    width: 100%;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item:not(:last-child) {
    margin-bottom: 5px;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item>i {
    font-size: x-large;
    margin-top: -10px;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item::before {
    content: attr(data-id);
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-weight: bold;
    background: #fff;
    padding: 3px 5px;
    border-radius: 50%;
    font-size: x-small;
    color: #333;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item:hover {
    cursor: pointer;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item.hpcs-active {
    background-image: linear-gradient(135deg, #7fdaf9, #5fa4dc, #005092);
    color: #f9f9f9;
}

.hpc-server-config-container li.hpc-server-side-nav-list-item:not(.hpcs-active):hover {
    background: #ddd;
}

.hpc-server-config-container .hpc-server-config-top-nav-bar {
    height: 70px;
    border-radius: 20px;
    box-shadow: 0px 3px 2px #eee;
    border: 1px solid #eee;
}

.hpc-server-config-container .hpc-server-config-main-container {
    height: calc(100% - 160px);
    margin-top: 10px;
    position: relative;
}

.hpc-server-config-container .hpc-server-inputs {
    width: 100%;
}

.hpc-server-config-container .hpc-server-inputs.hpc-w60 {
    width: 60% !important;
}

.hpc-server-config-container .hpc-server-d3view-drive-container {
    width: 40%;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    padding: 10px;
}

.hpc-server-config-container .hpc-server-config-footer {
    margin-top: 10px;
    height: 70px;
    border-top: 1px solid #ddd;
}


.hpc-server-config-container .hpcs-top-nav {
    width: 75%;
    height: 100%;
}

.hpc-server-config-container .hpcs-info-container {
    width: 25%;
    height: 100%;
}

.hpc-server-config-container ul.hpc-solver-tabs {
    width: calc(100% - 70px);
    height: 100%;
    max-width: unset;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.hpc-server-config-container ul.hpc-solver-tabs::-webkit-scrollbar {
    display: none;
}

.hpc-server-config-container li.hpc-solver-tab-item {
    min-width: 300px;
    display: inline-flex;
    padding: 10px 15px;
    font-size: large;
    font-weight: 500;
    text-transform: uppercase;
    background: #f9f9f9;
    border-radius: 10px;
    margin: 14px 5px 0px 5px;
    height: 40px;
    justify-content: center;
    align-items: center;
    width: auto;
}

.hpc-server-config-container li.hpc-solver-tab-item.hpcs-active {
    background-image: linear-gradient(135deg, #7fdaf9, #5fa4dc, #005092);
    color: #f9f9f9;
}

.hpc-server-config-container li.hpc-solver-tab-item:not(.hpcs-active):hover {
    background: #ddd;
}

.hpc-server-config-container li.hpc-solver-tab-item:hover {
    cursor: pointer;
}


.hpc-server-config-container .hpcs-saved-settings-comtainer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
}

.hpc-server-config-container .saved-settings-dropdown-container {
    width: 350px;
}

/* .hpc-server-config-container .custom-folder-dropzone {
    height: 200px;
} */

.hpc-server-config-container .browse-drive {
    box-shadow: 0px 0px 2px gray;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hpc-server-config-container .browse-drive:hover {
    cursor: pointer;
}

.hpc-server-config-container .browse-drive * {
    pointer-events: none;
}


.hpc-server-config-container .hpc-server-inputs .user-input-container::-webkit-scrollbar {
    display: none;
}

.hpc-server-config-container .hpc-server-inputs .text-bold {
    font-weight: bold !important;
}

.hpc-server-config-container .hpcs-warn-highlight {
    border-color: orangered !important;
}

.hpc-server-config-container .hpc-job-submission-preview {
    aspect-ratio: var(--aspect_ratio);
}

.hpc-server-config-container .preview-page-title {
    border-bottom: 1px solid #ddd;
}

.hpc-server-config-container .preview-page-body {
    height: calc(100% - 140px);
    overflow: auto;
    scrollbar-gutter: stable;
    padding: 0px 15px;
}

.hpc-server-config-container .preview-page-footer {
    height: 50px;
    margin-top: 9px;
    border-top: 1px solid #ddd;
}

.hpc-server-config-container .preview-page-body>h2 {
    margin: 15px 0px 15px 0px;
}

.hpc-server-config-container ul.img-attachments {
    max-height: 250px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.hpc-server-config-container .img-attachment {
    margin: 0px !important;
}

.hpc-server-config-container tbody.model-info-tbody>tr>td:nth-child(1) {
    font-weight: 500;
}

.hpc-server-config-container tbody.model-info-tbody>tr>td {
    width: 50%;
}

.hpc-server-config-container tbody>tr>td:empty::before {
    content: '-------------';
}

.hpc-server-config-container .solver-attrs {
    margin: 0px !important;
}

.hpc-server-config-container .solver-attrs>.solver-attr {
    font-weight: 500;
}

.hpc-server-config-container table.submission-table tr :is(th, td) {
    width: calc(100%/6);
    vertical-align: middle;
}

.hpc-server-config-container .model-file-label {
    word-break: break-all;
}

.hpc-server-config-container table.response-table {
    table-layout: fixed;
}

.hpc-server-config-container table.response-table tr :is(th, td) {
    width: 50%;
    word-break: break-all;
}

.hpc-server-config-container .job-submission-output .panel-body {
    max-height: 450px;
    overflow: auto;
    scrollbar-gutter: stable;
}

.hpc-server-config-container .submit_command_editor,
.hpc-server-config-container .submit_output_editor {
    height: 200px;
}

.hpc-server-config-container h2.hpcs-server-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpc-server-config-container ul.dropdown-menu.hpcs-status-dropdown {
    left: auto;
    right: 0px;
    width: 35vw;
    height: auto;
    padding: 10px;
}


.hpc-server-config-container .gi-section {
    position: relative;
}

.hpc-server-config-container .d3drive-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
}

.hpc-server-config-container .d3drive-container .d3drive-renderer {
    height: calc(100% - 50px);
}

.hpc-server-config-container .d3drive-container .d3drive-footer {
    height: 50px;
    border-top: 1px solid #ddd;
}

.hpc-server-config-container .custom-folder-dropzone {
    height: calc(100% - 30px);
}

.hpc-server-config-container .job-submission-output {
    height: calc(100% - 200px);
    overflow: auto;
}
/* /javascripts/plugins_src/d3drive/d3drive.css */
/* Folder Dropzone CSS */

.folder-dz-input {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: -2;
    width: 0;
    height: 0;
}

.fdz-drop {
    display: none;
}

.fdz-placeholder {
    border: 1px solid #eee;
    border-radius: 4px;
    position: relative;
}

.fdz-placeholder::before {
    content: '\f07c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 200px;
    position: absolute;
    left: 45%;
    top: 45%;
    color: gray;
}


.file-folder-dropzone {
    height: 125px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.fdz-dropzone {
    border: 2px dashed #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.fdz-dropzone:hover {
    cursor: ns-resize;
}

.fdz-dropzone * {
    pointer-events: none;
}

.fdz-icon {
    font-size: 55px !important;
    color: gray;
}

.fdz-label {
    color: gray;
}

.fdz-file-info {
    font-size: 1.4em;
}

.fdz-file-info:hover {
    color: steelblue;
    cursor: pointer;
}

.fdz-tooltip-table td {
    word-break: break-all;
}

.fdz-custom-list {
    height: calc(100% - 145px);
    overflow: auto;
    scrollbar-gutter: stable;
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #ddd;
    border-radius: 4px;
    position: relative;
}

.fdz-custom-list:empty::before {
    position: absolute;
    content: 'Empty File List.';
    font-size: 21px;
    color: gray;
    left: 45%;
    top: 40%;
}

.fdz-custom-list ul.list-group:empty:after {
    position: absolute;
    content: 'Empty File List.';
    font-size: 21px;
    color: gray;
    left: 45%;
    top: 40%;
}


.fdz-custom-list-row-item {
    display: grid;
    grid-template-columns: 6fr 2fr 1fr 1fr;
}

.fdz-remove-uploaded-file-btn>i {
    pointer-events: none;
}

/* One Drive CSS */

.d3view-drive {
    --aspect_ratio: auto;
}

.d3view-drive {
    position: relative;
    aspect-ratio: var(--aspect_ratio);
}

.d3view-drive .drive-topnav {
    height: 55px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 5px #eee;
    border-radius: 5px;
}

.d3view-drive .drive-bredcrumb {
    height: 45px;
    margin-bottom: 10px;
}

.d3view-drive .drive-view {
    height: calc(100% - 120px);
    position: relative;
    overflow: auto;
    scrollbar-gutter: auto;
}


.d3view-drive .fdz-active {
    background: #c5e7f1;
}

.d3view-drive .file-view-icons {
    padding: 10px;
    font-size: large;
    border-radius: 4px;
    margin: 0px 5px;
}

.d3view-drive .file-view-icons:not(.drive-active-icon):hover {
    cursor: pointer;
    background: #eee;
}

.d3view-drive .file-view-icons.drive-active-icon {
    background: #ddd;
}


.d3view-drive .drive-list-view-item {
    height: 65px;
    margin: 5px 0px;
    border: 1px solid #ddd;
    border-radius: 4px;
    user-select: none;
}

.d3view-drive .drive-list-view-item:hover {
    cursor: pointer;
}

.d3view-drive .drive-list-view-item:not(.fdz-active):hover {
    background-color: #eee;
}

@keyframes drive-spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.d3view-drive .drive-spinner {
    animation: fdz-spinner 2s infinite linear;
    color: orange;
}

.d3view-drive .drive-complete {
    color: green;
}

.d3view-drive .fdz-folder {
    color: orange;
}

.d3view-drive .fdz-file {
    color: steelblue;
}

.d3view-drive .drive-list-icon {
    font-size: x-large;
}

.d3view-drive .d3view-drive .m0 {
    margin: 0px !important;
}


.d3view-drive .m0 {
    margin: 0px !important;
}

.d3view-drive .pl10 {
    padding-left: 20px !important;
}

.d3view-drive .drive-no-pointer-event {
    pointer-events: none;
}

.d3view-drive .list-view-header {
    position: sticky;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 2;
}

.d3view-drive .drive-droppable {
    border: 1px dashed steelblue;
    background-color: rgb(198, 232, 243);
}

.d3view-drive ul.drive-breadcrumb {
    background: #fff;
}

.d3view-drive li.drive-breadcrumb-item {
    font-size: large;
}

.d3view-drive li.drive-breadcrumb-item:not(.active) {
    font-weight: 500;
}

.d3view-drive .drive-thumbnail-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-direction: row;
}

.d3view-drive .drive-thumbanil-list-item {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 143px;
}

.d3view-drive .drive-thumbanil-list-item:hover {
    cursor: pointer;
}

.d3view-drive .drive-thumbanil-list-item:not(.fdz-active):hover {
    background-color: #eee;
}

.d3view-drive .thumbnail-icon {
    font-size: xxx-large;
}

.d3view-drive .thumbnail-label {
    word-break: break-all;
    text-align: center;
}

.drive-native-file-viewer {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #fff;
}

.native-viewer-footer {
    height: 55px;
    border-top: 1px solid #ddd;
}

.native-viewer-nav {
    height: 55px;
    border-bottom: 1px solid #ddd;
}

.native-viewer-body {
    height: calc(100% - 55px);
    overflow: auto;
    scrollbar-gutter: stable;
    position: relative;
}

.nv-bg-image {
    height: 100%;
    width: 100%;
    overflow: hidden;
    object-fit: scale-down;
}

.nv-editor-renderer {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
}
/* /javascripts/plugins_src/fora/fora.css */
div.d3view-fora {
    position: relative;
}

div.d3view-fora .fora-input {
    min-height: 45px;
    max-height: 250px;
    resize: none;
    padding: 6px 20px;
}

div.d3view-fora .fora-input-resize-handle {
    display: block;
    height: 8px;
    width: 100%;
    cursor: ns-resize;
    background: var(--d3neutralLighterAlt, #f3f2f1);
    border-top: 1px solid var(--d3neutralLight, #edebe9);
}

div.d3view-fora .fora-input:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

div.d3view-fora .fora-input-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

/* Uniform sizing for all input-area action buttons */
div.d3view-fora .fora-input-buttons .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: #666;
    transition: background 0.15s ease, color 0.15s ease;
}
div.d3view-fora .fora-input-buttons .btn:hover {
    background: #f0f0f0;
    color: #333;
}

/* Input action bar (attach, voice, submit) */
div.d3view-fora .fora-input-level-2 {
    margin: 2px 0;
    padding: 0 4px;
}
div.d3view-fora .fora-input-level-2 .inline-file-upload {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: #666;
}
div.d3view-fora .fora-input-level-2 .inline-file-upload:hover {
    background: #f0f0f0;
    color: #333;
}

div.d3view-fora .fora-input-attach-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

div.d3view-fora .fora-input-attach-buttons .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
    color: #666;
    transition: background 0.15s ease, color 0.15s ease;
}

div.d3view-fora .fora-input-attach-buttons .btn:hover {
    background: #f0f0f0;
    color: #333;
}

div.d3view-fora .fora-result {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border-radius: 6px;
    padding: 8px 15px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
    box-sizing: border-box;
}

div.d3view-fora .fora-preview .img-preview img {
    height: 80px;
}

div.d3view-fora .fora-result-container.hasPreview .fora-result {
    height: calc(100% - 150px);
}

div.d3view-fora .fora-result-container.hasPreview .fora-preview {
    display: flex;
    align-items: center;
}

div.d3view-fora .fora-file {
    flex-direction: column;
    height: 110px;
    display: block;
    text-align: center;
    margin-right: 20px;
    width: 200px;
    box-shadow: var(--plugin-box-shadow-lightest);
    position: relative;
    background: var(--d3neutralLighterAlt);
}

div.d3view-fora .fora-file:hover .btn-group {
    opacity: 1;
    pointer-events: all;
}

div.d3view-fora .fora-file .btn-group {
    position: absolute;
    opacity: 0;
    top: -30px;
    right: 0;
    z-index: 1;
    pointer-events: none;
    /* left: 50%; */
    /* transform: translateX(-50%); */
}

.d3view-fora .fora-file .file-name {
    background-color: #FFF;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    padding: 2px 10px;
    text-align: left;
}

.d3view-fora .fora-upload-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    position: relative;
    margin-top: 1px;
}

.d3view-fora .fora-upload-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--d3themePrimary, #007bff);
    transition: width 0.3s ease;
}

.d3view-fora .fora-upload-status .fora-upload-label {
    z-index: 1;
}

.d3view-fora .fora-file .fora-file-main {
    height: calc(100% - 35px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: background 0.3s;
}

.d3view-fora .fora-file:hover .fora-file-main {
    background: #eee;
    cursor: pointer;
}

div.d3view-fora .fora-result .fora-answer {
    margin: 6px 0;
    border-radius: 5px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Agent answer — clean layout, no icon */
div.d3view-fora .fora-answer-query {
    margin: 0;
}
div.d3view-fora .fora-answer-body {
    flex: 1 1 auto;
    min-width: 0;
}
div.d3view-fora .fora-answer-container {
    margin-bottom: 12px;
}

/* Generating indicator — wraps typing dots when system messages are hidden */
div.d3view-fora .fora-generating-indicator {
    padding: 8px 16px;
}

/* Typing indicator (bouncing dots) — replaces old dot-typing */
div.d3view-fora .fora-fetching-padded {
    padding: 6px 0;
}
div.d3view-fora .fora-typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 0;
    width: fit-content;
}
div.d3view-fora .fora-typing-indicator .fora-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
    animation: foraMainTypingBounce 1.2s ease-in-out infinite;
}
div.d3view-fora .fora-typing-indicator .fora-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
div.d3view-fora .fora-typing-indicator .fora-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes foraMainTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}
div.d3view-fora .fora-still-working-label {
    font-size: 12px;
    color: var(--d3v-text-secondary, #888);
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
div.d3view-fora .fora-still-working-label.visible {
    opacity: 1;
}

/* Feedback buttons — always visible under agent messages */
div.d3view-fora .fora-feedback-wrapper {
    margin-top: 2px;
}
div.d3view-fora .fora-feedback-container {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}
div.d3view-fora .fora-feedback-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
div.d3view-fora .fora-feedback-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.d3view-fora .fora-additionals {
    display: none;
    height: 200px;
}

.d3view-fora .hook-vis {
    height: 200px;
    flex: 0 0 calc(33% - 10px);
    margin: 5px;
    position: relative;
}

.d3view-fora .hook-vizs {
    display: flex;
    flex-wrap: wrap;
}

.d3view-fora .fora-iv {
    z-index: 1;
    position: relative;
    pointer-events: all !important;
    /* Prevent flex children from overflowing the chat panel */
    min-width: 0;
    overflow: hidden;
}

/* fora-tabs is a flex container; its items must be allowed to shrink */
.d3view-fora .fora-tabs {
    min-width: 0;
}

/* Without min-width:0, flex items default to min-width:auto and refuse to shrink
   below their content size, causing wide text/tables to blow out the panel */
.d3view-fora .fora-tabs-content {
    min-width: 0;
    overflow: hidden;
}

.d3view-fora .fora-dz {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.d3view-fora .fora-query-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 12px;
}

.d3view-fora .fora-query-container .fora-query-files {
    margin-top: 10px;
    display: flex;
}

.d3view-fora .fora-query-container .fora-query-files .fora-file:last-child {
    margin: 0 !important;
    ;
}

/* Right-align uploaded files for user messages */
.d3view-fora .fora-answer[data-from="user"] .fora-query-files-container {
    display: flex;
    justify-content: flex-end;
}

/* (optional) keep assistant/llm files on the left */
.d3view-fora .fora-answer[data-from="llm"] .fora-query-files-container,
.d3view-fora .fora-answer[data-from="assistant"] .fora-query-files-container {
    display: flex;
    justify-content: flex-start;
}


.d3view-fora .fora-query-files .remove-file {
    display: none !important;
}

.d3view-fora .fora-query-container .fora-query {
    padding: 0;
    border-radius: 10px;
}

.d3view-fora .fora-input-container .inline-file-upload {
    z-index: 2;
}

.d3view-fora .fora-input-container {
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 6px;
    display: flex;

    flex-direction: column;

    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Submit button icon: slightly larger for primary action */
.d3view-fora .fora-input-container .fora-input-buttons .submit > i {
    font-size: 16px;
}

/* Stop Agent button */
.d3view-fora .fora-input-container .fora-input-buttons .stop-agent > i {
    font-size: 16px;
    color: #d9534f;
}
.d3view-fora .fora-input-container .fora-input-buttons .stop-agent:hover {
    background: #fbe8e8;
}

/* "Execution interrupted" — lightweight inline text */
.d3view-fora .fora-answer[data-ui-status="stopped"] {
    background: none;
    border: none;
    box-shadow: none;
    padding: 4px 0;
    margin: 4px 0;
}
.d3view-fora .fora-answer[data-ui-status="stopped"] .fora-answer-container {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.d3view-fora .fora-answer[data-ui-status="stopped"] .fora-print {
    font-size: 12px;
    font-style: italic;
    color: #999;
}
.d3view-fora .fora-answer[data-ui-status="stopped"] .fora-feedback-wrapper,
.d3view-fora .fora-answer[data-ui-status="stopped"] .fora-answer-hooks {
    display: none;
}

.d3view-fora .fora-input-container .fora-preview {
    padding: 10px 20px;
    align-items: center;
    display: none;
}

.d3view-fora .fora-input-container.hasPreview .fora-preview {
    display: flex;
}

.d3view-fora .fora-input-container textarea.fora-input {
    background: none;
    border: none;
    font-size: 1.5em;
    border-radius: 10px;
}

.d3view-fora ul.fora-init>li {
    padding: 10px 10px;
    margin-bottom: 10px;
    border: 1px solid #DDD;
    /* display: inline; */
    border-radius: 5px;
    width: 33%;
    box-shadow: var(--plugin-box-shadow-lightest);
    height: 100px;
    margin: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.d3view-fora ul.fora-init>li a {
    text-decoration: none;
}

.d3view-fora ul.fora-init>li:hover {
    background-color: #F5f5f5;
}

.d3view-fora .cg-by-date .cg-item {
    /*padding: 1px 5px;*/
    margin-bottom: 5px;
    cursor: pointer;
}

.d3view-fora .cg-by-date .cg-item.active {
    background-color: #f5f5f5;
}

.d3view-fora .cg-by-date .cg-item:hover {
    background-color: #f5f5f5;
}

.d3view-fora .worker-preview .modal-dialog {
    margin: 0;
    width: 100%;
    box-shadow: none;
    height: 100%;
}

.d3view-fora .worker-preview .modal-content {
    border: none;
    height: 100%;
}

.d3view-fora .worker-preview .d3view-inputsBuilder {
    border: none;
}

.d3view-fora .worker-preview .workflow-modal.modal.docked {
    width: 100% !important;
}

.d3view-fora div.workflow-modal#wf-configure-workflow-node-modal .modal-body {
    height: calc(100% - 60px) !important;
    overflow: auto;
}

.d3view-fora div.workflow-modal .wf-builder-inputs-list[data-inputs-view="table"] .inputs-table {
    padding: 0;
}

.d3view-fora .workflow-modal .inline-worker-title {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.d3view-fora .fora-input.dz-drag-hover,
.d3view-fora .inline-file-upload.dz-drag-hover {
    background: #e6ffe6 !important;
    border-color: #428bca;
    outline-color: #428bca;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 5px rgb(102 175 233 / 60%);
}


div.d3view-fora div.workflow div.wf-main-container div.execution-controls .execution_stats {
    width: 100% !important;
}

/* Remote Lookup Chips (preview area) */
.fora-rl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 4px;
}

.fora-rl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--d3neutralLighterAlt, #f3f2f1);
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    border-radius: 16px;
    padding: 4px 8px 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    max-width: 260px;
}

.fora-rl-chip-domain {
    font-weight: 600;
    color: var(--d3themePrimary, #0078d4);
    white-space: nowrap;
}

.fora-rl-chip-name {
    color: var(--d3neutralPrimary, #323130);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fora-rl-chip-remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--d3neutralSecondary, #605e5c);
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.fora-rl-chip-remove:hover {
    color: var(--d3red, #d13438);
}

/* Remote Lookup Chips in Chat Messages */
.fora-query-rl-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.fora-query-rl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--d3neutralLighterAlt, #f3f2f1);
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
}

.fora-query-rl-domain {
    font-weight: 600;
    color: var(--d3themePrimary, #0078d4);
}

.fora-query-rl-name {
    color: var(--d3neutralPrimary, #323130);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Remote Lookup Modal Styles */
.d3view-fora .remote-lookup-modal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.d3view-fora .remote-lookup-modal .modal-title {
    color: #495057;
    font-weight: 500;
}

.d3view-fora .remote-lookup-modal .lookup-type-item {
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    margin-bottom: 5px;
}

.d3view-fora .remote-lookup-modal .lookup-type-item:hover {
    background-color: #e3f2fd;
    border-color: #2196f3;
    text-decoration: none;
}

.d3view-fora .remote-lookup-modal .item-list-item {
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
}

.d3view-fora .remote-lookup-modal .item-list-item:hover {
    background-color: #f0f8ff;
    border-color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.d3view-fora .remote-lookup-modal .search-box {
    margin-bottom: 15px;
}

.d3view-fora .remote-lookup-modal .back-to-apps {
    float: right;
}

.d3view-fora .remote-lookup-modal .items-container {
    max-height: 400px;
    overflow-y: auto;
}

.d3view-fora .remote-lookup-modal .loading-items {
    color: #6c757d;
}

.d3view-fora .remote-lookup-modal .fa-pie-chart {
    color: #007bff;
    margin-right: 8px;
}

.d3view-fora .remote-lookup-modal .fa-plus {
    font-size: 16px;
}



.d3view-fora .fora-iv[data-view-type="floating"] .fora-input-container {
    position: relative;
    /* top: 0; */
}

.d3view-fora[data-view-type="floating"] {
    position: absolute;
    left: calc(50% - 15%);
    top: calc(50% - 30px);
    z-index: 200000;
    height: auto;
    width: 30%;
    /* background: #FFF; */
    min-width: 400px;
}

/*.d3view-fora[data-view-type="floating"]:not(.hasResult) .fora-input-container {
    border-radius: 0;
}*/

.d3view-fora[data-view-type="floating"]:not(.hasResult) textarea.fora-input {
    box-shadow: var(--plugin-box-shadow);
    background-color: #f5f5f5;
    overflow-y: hidden;
}

.d3view-fora[data-view-type="floating"] .fora-tabs-content {
    padding: 0;
}

.d3view-fora[data-view-type="floating"] .fora-tab {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.d3view-fora[data-view-type="floating"]:not(.hasResult) .fora-result-container {
    display: none;
}

.d3view-fora[data-view-type="floating"] .fora-input-container {
    border-radius: 0;
    border: none;
    background: none;
}

.d3view-fora[data-view-type="floating"].hasResult .fora-result-container {
    height: 300px;
    overflow: auto;
}

.d3view-fora[data-view-type="floating"].hasResult.resized .fora-result-container {
    height: auto;
}

.d3view-fora[data-view-type="floating"] .close-global-fora {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 2;
    display: none;
}

.d3view-fora[data-view-type="floating"].hasResult .close-global-fora {
    display: block;
}

.d3view-fora[data-view-type="floating"] .close-global-fora:hover {
    color: red;
}

.d3view-fora[data-view-type="floating"]:not(.hasResult) .ui-resizable-handle {
    display: none !important;
}

.d3view-fora[data-view-type="floating"].hasResult {
    background-color: #FFF;
    border: 1px solid #DDD;
    box-shadow: var(--plugin-box-shadow);
    border-radius: 10px;
}

.d3view-fora[data-view-type="floating"].hasResult textarea.fora-input {
    box-shadow: none;
    border-bottom: 1px solid #DDD;
    border-radius: 0;
    background-color: #f5f5f5;
}

.d3view-fora .fora-input-container.hasInteractiveHook {
    opacity: 0.5;
    cursor: not-allowed;
}

.d3view-fora .fora-input-container.hasInteractiveHook * {
    pointer-events: none;
}

.d3view-fora .worker-inputs-table table td,
.d3view-fora .worker-inputs-table table th,
.d3view-fora .worker-outputs-table table td,
.d3view-fora .worker-outputs-table table th {
    vertical-align: middle;
}

.d3view-fora .worker-inputs-table .fora-node-link-container,
.d3view-fora .worker-outputs-table .fora-node-link-container {
    display: none;
}

/* System message styling */
.d3view-fora .fora-query-container .fora-answer[data-chat-type="system"] {
    margin: 2px 0;
}

.d3view-fora .fora-query-container .fora-query.system {
    color: #495057;
}

/* System message icon styling */
.d3view-fora .fora-query-container .fora-query.system i {
    font-size: 1.1em;
}

.d3view-fora .fora-query-container .fora-query.system i:not(.text-success) {
    color: #6c757d;
}

/* System message animation
.d3view-fora .fora-query-container .fora-query.system {
    animation: fadeIn 0.3s ease-in-out;
}

/* System message loading spinner */
.d3view-fora .fora-query-container .fora-query.system .fa-spinner {
    color: #6c757d;
    margin-right: 8px;
}

.d3view-fora .fora-query .m-spinner {
    position: absolute;
    left: 1px;
}

.d3view-fora .fora-answer[data-chat-type="system"] .fora-query .fora-query-text,
.d3view-fora .fora-answer[data-from="user"][data-chat-type="system"] .fora-query .fora-query-text {
    margin-left: 20px;
}

.d3view-fora .fora-answer[data-chat-type="system"] .fora-query .m-spinner,
.d3view-fora .fora-answer[data-from="user"][data-chat-type="system"] .fora-query .m-spinner {
    position: absolute;
    top: 5px;
    margin-right: 5px;
}

/* System message container — override for system messages (left-align) */
.d3view-fora .fora-answer[data-chat-type="system"] .fora-query-container {
    align-items: flex-start;
}

.d3view-fora .fora-answer[data-chat-type="system"] {
    margin: 2px 0 !important;
}

.d3view-fora .fora-answer[data-chat-type="system"] .fora-query-container {
    margin-bottom: 0 !important;
}

.d3view-fora .fora-answer .fora-query {
    position: relative;
    word-break: break-word;
}

.d3view-fora .fora-answer[data-chat-type="system"] .fora-query {
    padding: 2px;
}

/* Non-user, non-system messages (error, etc.) — left-align */
.d3view-fora .fora-answer[data-chat-type="error"] .fora-query-container {
    align-items: flex-start;
}

/* User message bubble — light blue background, right-aligned */
.d3view-fora .fora-answer[data-chat-type="user"] .fora-query {
    font-size: 0.95em;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 18px 18px 4px 18px;
    max-width: 85%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
.d3view-fora .fora-answer[data-chat-type="user"] .fora-query-container {
    align-items: flex-end;
}
/* Edit button below user bubble — show on hover, only on latest message */
.d3view-fora .fora-answer[data-chat-type="user"] .edit-query {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    margin-top: 2px;
}
.d3view-fora .fora-answer[data-chat-type="user"]:hover .edit-query {
    opacity: 1;
}
.d3view-fora .fora-answer[data-chat-type="user"] .edit-query:hover {
    background: #f0f0f0;
    color: #333;
}

/* Edit mode within user bubble */
.d3view-fora .fora-edit-textarea {
    width: 100%;
    min-width: 250px;
    max-width: 100%;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.95em;
    background: #fff;
    margin-bottom: 6px;
}
.d3view-fora .fora-edit-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}
.d3view-fora .fora-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.d3view-fora .fora-answer[data-chat-type="system"] .fora-query {
    font-size: 0.9em;
}

/* Agent answer messages — plain text on white */
div.d3view-fora .fora-result .fora-answer[data-chat-type="answer"] {
    margin-top: 4px;
    font-size: 0.95em;
    color: #1a1a1a;
    line-height: 1.6;
}

.d3view-fora .fora-result .fora-hook.disableEvents {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}



div.d3view-fora .fora-result .fora-answer[data-from="user"][data-chat-type="user"] .fora-query {
    /* alignment handled by fora-query-container flex-end */
}

div.d3view-fora .fora-result .fora-answer[data-chat-type="error"] .q-icon {
    color: red;
}

div.d3view-fora .tab-pane.fora-tab {
    display: flex;
    flex-direction: column;
}

.d3view-fora .fora-tab .fora-result-container {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    margin-bottom: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.d3view-fora .fora-input-container.fora-input-focused {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* Inline output block in agent answers (DVFIV-1915) */
.d3view-fora .fora-inline-output {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}

/* Keep code blocks pretty */
.fora-print {
    max-width: 100%;
    overflow-x: auto;
}

.fora-print pre {
    position: relative;
}

.fora-print .lang-badge {
    position: absolute;
    top: 6px;
    left: 8px;
    font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: .7;
    background: rgba(0, 0, 0, .08);
}

.fora-print .copy-btn {
    right: 8px;
    top: 6px;
}

/* already have this */
.fora-print code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Your JSON prettifier wrapper */
.fora-print .fora-json-block pre {
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap table.fora-values-display-table {
    table-layout: fixed;
    width: 100%;
}
.table-wrap table.fora-values-display-table th:first-child,
.table-wrap table.fora-values-display-table td:first-child {
    width: 25%;
}
.table-wrap table.fora-values-display-table th:last-child,
.table-wrap table.fora-values-display-table td:last-child {
    width: 75%;
}

.fora-print ul,
.fora-print ol {
    margin: .5em 0 .75em;
    padding-left: 1.5em;
}
.fora-print ol {
    list-style: decimal;
}

.fora-print li {
    margin: .15em 0;
}

.fora-print li>ul,
.fora-print li>ol {
    margin: .25em 0 .5em;
}

.fora-print .katex-display {
    margin: .75em 0;
    overflow: auto hidden;
}

/* Base markdown polish */
.fora-print h1 {
    font-size: 1.6rem;
    margin: 1rem 0 .5rem;
    font-weight: 700;
}

.fora-print h2 {
    font-size: 1.35rem;
    margin: .85rem 0 .45rem;
    font-weight: 650;
}

.fora-print h3 {
    font-size: 1.15rem;
    margin: .7rem 0 .4rem;
    font-weight: 600;
}

.fora-print h4 {
    font-size: 1rem;
    margin: .6rem 0 .35rem;
    font-weight: 600;
}

.fora-print blockquote {
    margin: .6rem 0;
    padding: .4rem .8rem;
    border-left: 4px solid #ddd;
    color: #555;
    background: rgba(0, 0, 0, .02);
}

.fora-print hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 1rem 0;
}

.fora-print table {
    border-collapse: collapse;
}

.fora-print th,
.fora-print td {
    border: 1px solid #e5e5e5;
    padding: 6px 8px;
}

/* Lists */
.fora-print ul,
.fora-print ol {
    padding-left: 1.5em;
    margin: .5rem 0 .75rem;
}

/* ============================================================================ *
 * Added by shashank2104 on 07/25/2026 - R2026-58 - Premium DEFAULT styling for
 * AI AGENT prose answers (the markdown the LLM emits into `.fora-print`).
 * GENERIC: scoped to the agent chat root `.agent-fora` (set by AgenticView), so
 * EVERY host that renders the agent (workflow, peacock.workbench, solverai,
 * modelassembler, ...) gets the same look, and non-agent fora chats keep the
 * plain baseline above. Self-contained LIGHT palette (the agent chat panel is
 * white in every host, independent of any app theme) that aliases the --d3v-*
 * foundation tokens where present and falls back to fixed light values. Each
 * markdown heading becomes an accented section band (blue -> teal -> amber),
 * lists get custom markers, `code` chips, `pre` panels, `blockquote` callouts,
 * premium tables (`:not(.pk-ai-tbl)` keeps peacock tool-result cards untouched)
 * and suggestion chips.
 * ============================================================================ */
.agent-fora .fora-print,
.agent-fora .pk-ai-answer-md {
    --fa-fg:        var(--d3v-text-primary, #1e293b);
    --fa-muted:     var(--d3v-text-muted, #64748b);
    --fa-surface:   var(--d3v-bg-primary, #ffffff);
    --fa-surface-2: var(--d3v-bg-secondary, #f1f5f9);
    --fa-border:    var(--d3v-border, #e2e8f0);
    --fa-row-hover: var(--d3v-bg-hover, #eef2f8);
    --fa-a1:        var(--d3v-accent, #2563eb);
    --fa-a2:        #0d9488;
    --fa-a3:        #b45309;
    color: var(--fa-fg);
    font-size: 13px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.agent-fora .fora-print p { margin: 0 0 .6em; }
.agent-fora .fora-print strong { font-weight: 700; color: var(--fa-fg); }
.agent-fora .fora-print a {
    color: var(--fa-a1); text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, .35); transition: border-color .15s ease;
}
.agent-fora .fora-print a:hover { border-bottom-color: var(--fa-a1); }

/* section header bands (each markdown heading), accent cycles a1 -> a2 -> a3 */
.agent-fora .fora-print :is(h1, h2, h3, h4) {
    --fa-sec: var(--fa-a1);
    display: block; margin: 14px 0 9px; padding: 7px 12px 7px 13px;
    border-left: 3px solid var(--fa-sec); border-radius: 8px;
    background: color-mix(in srgb, var(--fa-sec) 9%, var(--fa-surface));
    color: var(--fa-fg); font-weight: 700; line-height: 1.3; letter-spacing: .005em;
}
.agent-fora .fora-print :is(h1, h2, h3, h4):first-child { margin-top: 2px; }
.agent-fora .fora-print h1 { font-size: 16px; }
.agent-fora .fora-print h2 { font-size: 14.5px; }
.agent-fora .fora-print :is(h3, h4) { font-size: 13px; }
.agent-fora .fora-print :is(h1, h2, h3, h4):nth-of-type(3n + 2) { --fa-sec: var(--fa-a2); }
.agent-fora .fora-print :is(h1, h2, h3, h4):nth-of-type(3n + 3) { --fa-sec: var(--fa-a3); }

/* bulleted list - accent dots */
.agent-fora .fora-print ul { list-style: none; margin: .35em 0 .7em; padding-left: 0; }
.agent-fora .fora-print ul > li { position: relative; padding-left: 20px; margin: .3em 0; }
.agent-fora .fora-print ul > li::before {
    content: ""; position: absolute; left: 5px; top: .62em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--fa-a1);
}
/* numbered list - accent counters */
.agent-fora .fora-print ol { list-style: none; counter-reset: fa; margin: .35em 0 .7em; padding-left: 0; }
.agent-fora .fora-print ol > li { position: relative; counter-increment: fa; padding-left: 26px; margin: .3em 0; }
.agent-fora .fora-print ol > li::before {
    content: counter(fa); position: absolute; left: 0; top: .02em;
    width: 18px; height: 18px; border-radius: 50%;
    background: color-mix(in srgb, var(--fa-a1) 16%, transparent); color: var(--fa-a1);
    font: 800 10.5px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center;
}
.agent-fora .fora-print li > ul,
.agent-fora .fora-print li > ol { margin: .2em 0 .35em; }

/* inline code chip */
.agent-fora .fora-print code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
    background: color-mix(in srgb, var(--fa-a1) 8%, var(--fa-surface-2)); color: var(--fa-a1);
    border: 1px solid var(--fa-border); border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
/* fenced code block */
.agent-fora .fora-print pre {
    background: var(--fa-surface-2); border: 1px solid var(--fa-border); border-radius: 10px;
    padding: 12px 14px; overflow-x: auto; margin: .5em 0 .7em;
}
.agent-fora .fora-print pre code {
    background: none; border: 0; padding: 0; white-space: pre;
    color: var(--fa-fg); font-size: 12px; line-height: 1.55;
}

/* blockquote -> callout / note */
.agent-fora .fora-print blockquote {
    margin: .5em 0; padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--fa-a1) 22%, var(--fa-border));
    border-left: 3px solid var(--fa-a1); border-radius: 10px;
    background: color-mix(in srgb, var(--fa-a1) 7%, var(--fa-surface)); color: var(--fa-fg);
}
.agent-fora .fora-print blockquote p:last-child { margin-bottom: 0; }

/* markdown tables (NOT the peacock tool-result .pk-ai-tbl cards) */
.agent-fora .fora-print table:not(.pk-ai-tbl) {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
    border: 1px solid var(--fa-border); border-radius: 10px; overflow: hidden;
    margin: .4em 0 .6em; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); background: var(--fa-surface);
}
.agent-fora .fora-print table:not(.pk-ai-tbl) thead th {
    background: var(--fa-surface-2); font: 800 9.5px/1.4 inherit; text-transform: uppercase;
    letter-spacing: .05em; color: var(--fa-muted); padding: 8px 12px;
    border-bottom: 1px solid var(--fa-border); text-align: left;
}
.agent-fora .fora-print table:not(.pk-ai-tbl) td {
    padding: 8px 12px; border-bottom: 1px solid var(--fa-border); color: var(--fa-fg); vertical-align: top;
}
.agent-fora .fora-print table:not(.pk-ai-tbl) tbody tr:last-child td { border-bottom: 0; }
.agent-fora .fora-print table:not(.pk-ai-tbl) tbody tr:hover td { background: var(--fa-row-hover); }

/* hr */
.agent-fora .fora-print hr { border: 0; border-top: 1px solid var(--fa-border); margin: 12px 0; }

/* suggestion chips (if the agent emits [data-fora-prompt] / .pk-ai-chip) */
.agent-fora .fora-print [data-fora-prompt],
.agent-fora .fora-print .pk-ai-chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--fa-a1) 8%, var(--fa-surface-2)); color: var(--fa-a1);
    border: 1px solid color-mix(in srgb, var(--fa-a1) 22%, var(--fa-border));
    transition: transform .16s ease, box-shadow .16s ease; margin: 3px 6px 3px 0;
}
.agent-fora .fora-print [data-fora-prompt]::before,
.agent-fora .fora-print .pk-ai-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7;
}
.agent-fora .fora-print [data-fora-prompt]:hover,
.agent-fora .fora-print .pk-ai-chip:hover {
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16, 24, 40, .14);
}

/* prose note wrapper under a tool-result card */
.agent-fora .pk-ai-answer-md { margin-top: 10px; }
.agent-fora .pk-ai-answer-md > *:first-child { margin-top: 0; }
.agent-fora .fora-print :is(h1, h2, h3, h4, p, ul, ol, pre, blockquote, table):last-child { margin-bottom: 0; }

/* ============================================================================ *
 * Added by shashank2104 on 07/26/2026 - R2026-58 - STARTER CARDS for the agent
 * opening screen (replaces the bare "Hello! How may I assist you today?"). An
 * agent supplies a greeting + a `<ul class="fora-init fora-starters">` of cards
 * as its placeholder; fora's existing `'click .fora-init li'` handler submits
 * each card's `data-fora-prompt`. GENERIC and scoped to `.agent-fora`, same
 * self-contained light palette as the answer styling above.
 * ============================================================================ */
.agent-fora .fora-starter,
.agent-fora .fora-init {
    --fa-fg:      var(--d3v-text-primary, #1e293b);
    --fa-muted:   var(--d3v-text-muted, #64748b);
    --fa-surface: var(--d3v-bg-primary, #ffffff);
    --fa-border:  var(--d3v-border, #e2e8f0);
    --fa-a1:      var(--d3v-accent, #2563eb);
}
/* the placeholder container centers a short greeting vertically; a full starter
 * block needs to be TOP-aligned and full width, or the greeting clips under the
 * header and the cards read as centered.
 *
 * Updated by shashank2104 on 2026-08-19 - R2026-189 - was `:has(.fora-starter)`, now the
 * `has-fora-starter` class that fora stamps on the preview after it renders the init template
 * (fora.js onReset). Same styling, but `:has()` whose subject is a bare universal (`> *`) puts
 * Blink on a document-wide style-invalidation path: with this one selector present, ANY DOM
 * insertion anywhere on the page made the next layout read cost ~62ms instead of ~12ms, on
 * EVERY page that loads fora.css - the peacock workbench and the ML prediction view included,
 * where a 9-panel curveplot pays it dozens of times. Measured 62.6ms -> 12.1ms from removing
 * this rule alone. Keep starter styling class-driven; do not reintroduce :has() here. */
.agent-fora .fora-result-preview.has-fora-starter {
    align-items: stretch; justify-content: flex-start; height: auto; padding: 4px 2px 8px;
}
.agent-fora .fora-result-preview.has-fora-starter > * {
    align-items: stretch; width: 100%; text-align: left;
}
.agent-fora .fora-starter { width: 100%; text-align: left; }
.agent-fora .fora-starter-head {
    font-size: 13px; font-weight: 600; color: var(--fa-fg); line-height: 1.5; margin: 2px 0 13px;
}
.agent-fora ul.fora-init.fora-starters {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 9px; width: 100%; padding: 0; margin: 0; list-style: none;
}
/* override the default sample-question card look (centered, fixed 100px height) */
.agent-fora ul.fora-init.fora-starters > li {
    width: auto; height: auto; min-height: 0; margin: 0; padding: 11px 13px; text-align: left;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    border: 1px solid var(--fa-border); border-radius: 12px;
    background: var(--fa-surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.agent-fora ul.fora-init.fora-starters > li:hover {
    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .12);
    border-color: color-mix(in srgb, var(--fa-a1) 45%, var(--fa-border));
}
.agent-fora .fora-starters .fs-ic {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--fa-a1) 15%, transparent); color: var(--fa-a1); font-size: 14px;
}
.agent-fora .fora-starters .fs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.agent-fora .fora-starters .fs-t { font-size: 12.5px; font-weight: 700; color: var(--fa-fg); line-height: 1.25; }
.agent-fora .fora-starters .fs-h { font-size: 11.5px; color: var(--fa-muted); line-height: 1.3; }

/* "See more" disclosure that folds the extra starter cards (native <details>) */
.agent-fora .fora-starters-more { margin-top: 9px; }
.agent-fora .fora-starters-more > ul.fora-starters { margin-top: 9px; }
.agent-fora .fora-starters-more summary {
    list-style: none; cursor: pointer; user-select: none; width: fit-content;
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 4px; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: var(--fa-a1); transition: color .15s ease;
}
.agent-fora .fora-starters-more summary::-webkit-details-marker { display: none; }
.agent-fora .fora-starters-more summary::marker { content: ""; }
.agent-fora .fora-starters-more summary:hover { color: color-mix(in srgb, var(--fa-a1) 72%, #000); }
.agent-fora .fora-starters-more .fs-more-chev { font-size: 10px; transition: transform .2s ease; }
.agent-fora .fora-starters-more[open] .fs-more-chev { transform: rotate(180deg); }
.agent-fora .fora-starters-more .fs-more-less { display: none; }
.agent-fora .fora-starters-more[open] .fs-more-more { display: none; }
.agent-fora .fora-starters-more[open] .fs-more-less { display: inline; }

/* ============================================ */
/* Template Creator Styles */
/* ============================================ */

.fora-template-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
}

.fora-template-modal .modal-body {
    min-height: auto !important;
    max-height: 300px;
}

.fora-template-options .template-option button {
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fora-template-options .template-option button:hover {
    background-color: #f5f5f5;
    border-color: #007bff;
}

.fora-template-creator-content .template-inputs-list {
    max-height: 400px;
    overflow-y: auto;
}

.fora-template-creator-content .template-input-item {
    transition: all 0.2s ease;
}

.fora-template-creator-content .template-input-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fora-template-creator-modal .modal-dialog {
    max-width: 900px;
}

.input-types-grid .input-type-option {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.input-types-grid .input-type-option:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

/** DVFIV-1917 - Inline input value display for .fora-node-link-value (FORAInlineInputView) */
div.d3view-fora .fora-node-link-value[data-inline="true"] {
    display: inline-block;
    max-width: 320px;
    vertical-align: middle;
}

/** DVFIV-1917 - Expand + ellipsis btn-group (top-right, visible on hover) **/
div.d3view-fora .fora-inline-value-wrapper {
    display: inline-block;
    position: relative;
}

div.d3view-fora .fora-inline-value-wrapper .fora-inline-actions-bar {
    position: absolute;
    top: -20px;
    right: 0px;
    z-index: 2;
    opacity: 0;
    background: #FFF;
}

div.d3view-fora .fora-inline-value-wrapper:hover .fora-inline-actions-bar {
    opacity: 1;
}

div.d3view-fora .fora-inline-value-wrapper .fora-inline-actions-bar .btn {
    padding: 2px 6px;
    min-width: 24px;
    border-color: var(--d3neutralLight, #edebe9);
    background: var(--d3neutralLighterAlt, #f3f2f1);
}

div.d3view-fora .fora-inline-value-wrapper .fora-inline-actions-bar .btn:hover {
    background: var(--d3neutralLight, #edebe9);
    border-color: var(--d3neutralTertiaryAlt, #c8c6c4);
}

/* Inline image preview in AI-Agent chat */
div.d3view-fora .fora-inline-image-preview {
    display: inline-block;
    max-width: 280px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--d3neutralLight, #edebe9);
    background: var(--d3neutralLighterAlt, #faf9f8);
}
div.d3view-fora .fora-inline-image-thumb {
    display: block;
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    cursor: pointer;
    background: #fff;
}
div.d3view-fora .fora-inline-image-actions {
    padding: 4px 6px;
    text-align: right;
    border-top: 1px solid var(--d3neutralLight, #edebe9);
}

div.d3view-fora .fora-inline-value {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--d3neutralLighterAlt, #f3f2f1);
    border: 1px solid var(--d3neutralLight, #edebe9);
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.d3view-fora .fora-inline-value:hover {
    background: var(--d3neutralLight, #edebe9);
    border-color: var(--d3neutralTertiaryAlt, #c8c6c4);
}

div.d3view-fora .fora-inline-value .fa,
div.d3view-fora .fora-inline-value .fas {
    margin-right: 4px;
    opacity: 0.85;
}

div.d3view-fora .fora-inline-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--d3view-secondary-color);

}

div.d3view-fora .fora-inline-value-sparkline {
    display: inline-block;
    width: 48px;
    height: 24px;
    vertical-align: middle;
    margin-right: 4px;
}

/** DVFIV-1918 - Full-width Newton curve container (replaces sparkline for curve/vector when Simlytiks available) **/
div.d3view-fora .fora-inline-value-wrapper.fora-inline-value-wrapper--has-curve {
    display: block;
    width: 100%;
    min-width: 250px;
}

div.d3view-fora .fora-inline-curve-container {
    display: block;
    width: 100%;
    height: 240px;
    margin-top: 6px;
    min-height: 200px;
}

/** Inline Simlytiks rendering in fora chat messages */
div.d3view-fora .fora-inline-simlytiks-container {
    margin: 10px 0;
    display: block;
    width: 100%;
}

div.d3view-fora .fora-inline-simlytiks-view {
    display: block;
    width: 100%;
    height: 400px;
    border: 1px solid var(--d3neutralLight, #edebe9);
    border-radius: 4px;
    overflow: hidden;
    background: var(--d3neutralLighterAlt, #faf9f8);
}

div.d3view-fora .fora-inline-simlytiks-actions {
    text-align: right;
    padding: 4px 0;
}

div.d3view-fora .fora-inline-simlytiks-loading,
div.d3view-fora .fora-inline-simlytiks-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--d3view-secondary-color, #605e5c);
    font-size: 0.9em;
    opacity: 0.8;
}

.fora-inline-value-expanded .simple-inputs-list li.field-item, 
.fora-inline-value-expanded .simple-inputs-list li.field-item .worker-output-preview,
.fora-inline-value-expanded .simple-inputs-list li.field-item .worker-output-preview .preview-ace {
    height: 100%!important;
}
.fora-inline-value-expanded .simple-inputs-list li.field-item > .row {
    height: 100%!important;
    display: flex;
    flex-direction: column;
}
.fora-inline-value-expanded .simple-inputs-list li.field-item > .row .input-value-container {
    flex: 1;
}

/* ================================================ */
/* Tool Trace Group                                  */
/* ================================================ */

.d3view-fora .fora-trace-group {
    margin: 8px 0;
}

/* Summary header (collapsed view) */
.d3view-fora .fora-trace-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    user-select: none;
    padding: 2px 0;
}

.d3view-fora .fora-trace-summary .fora-trace-summary-text {
    font-family: monospace;
    font-weight: 400;
    font-size: 12px;
    color: #999;
    cursor: pointer;
}

.d3view-fora .fora-trace-summary .fora-trace-summary-text:hover {
    color: #666;
    text-decoration: underline;
}

.d3view-fora .fora-trace-summary .fora-trace-summary-time {
    font-size: 10px;
    color: #999;
    font-family: monospace;
}

.d3view-fora .fora-trace-summary .fora-trace-summary-chevron {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
    cursor: pointer;
}

.d3view-fora .fora-trace-group.fora-trace-expanded .fora-trace-summary-chevron {
    transform: rotate(180deg);
}

/* Timeline body (expanded view) */
.d3view-fora .fora-trace-timeline {
    padding: 8px 6px 0 4px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.d3view-fora .fora-trace-group:not(.fora-trace-expanded) .fora-trace-timeline {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
}

.d3view-fora .fora-trace-group.fora-trace-expanded .fora-trace-timeline {
    max-height: 9999px;
    opacity: 1;
}

/* ================================================ */
/* Timeline Nodes                                    */
/* ================================================ */

.d3view-fora .fora-trace-node {
    position: relative;
    padding-left: 24px;
}

/* Circle node */
.d3view-fora .fora-trace-circle {
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e3e8;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d0d5dd;
    z-index: 1;
}

/* Node header line */
.d3view-fora .fora-trace-node-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: 12px;
}

.d3view-fora .fora-trace-label {
    font-family: monospace;
    font-weight: 500;
    color: #444;
    font-size: 11px;
    animation: fora-trace-slide-in 0.3s ease;
}

.d3view-fora .fora-trace-timer {
    font-size: 10px;
    color: #999;
    font-family: monospace;
}

/* Pipe + I/O segment (inserted between nodes after completion) */
.d3view-fora .fora-trace-segment {
    position: relative;
    padding-left: 24px;
    margin-left: 5px;
    border-left: 2px solid #5cb85c;
    animation: fora-trace-grow 0.3s ease;
    transform-origin: top;
    margin-top: -1px;
    margin-bottom: -1px;
}

.d3view-fora .fora-trace-segment .fora-trace-node-io {
    margin: 6px 0;
    padding: 8px 10px;
    background: #f8f9fb;
    border: 1px solid #e8eaed;
    border-radius: 6px;
    font-size: 11px;
    color: #555;
    animation: fora-trace-fade-in 0.3s ease 0.15s both;
}

.d3view-fora .fora-trace-segment .fora-trace-node-io:empty {
    display: none;
}

/* Trace I/O Panel */
.d3view-fora .fora-trace-io-panel {
    display: flex;
    gap: 0;
}

.d3view-fora .fora-trace-io-col {
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
}

.d3view-fora .fora-trace-io-divider {
    width: 1px;
    background: #e8eaed;
    flex: 0 0 1px;
}

.d3view-fora .fora-trace-io-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
    padding: 0 6px 4px 6px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.d3view-fora .fora-trace-io-body {
    padding: 0 6px;
    max-height: 200px;
    overflow-y: auto;
}

.d3view-fora .fora-trace-io-row {
    display: flex;
    flex-direction: column;
    padding: 3px 0;
    border-bottom: 1px solid #f2f3f5;
}

.d3view-fora .fora-trace-io-row:last-child {
    border-bottom: none;
}

.d3view-fora .fora-trace-io-key {
    font-size: 10px;
    font-weight: 600;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.d3view-fora .fora-trace-io-val {
    font-size: 11px;
    color: #444;
    word-break: break-word;
}

.d3view-fora .fora-trace-io-empty {
    font-size: 10px;
    color: #bbb;
    font-style: italic;
    padding: 4px 0;
}

.d3view-fora .fora-trace-io-pre {
    margin: 0;
    font-size: 10px;
    white-space: pre-wrap;
    word-break: break-word;
    color: #555;
    max-height: 80px;
    overflow-y: auto;
}

/* Segment with failure */
.d3view-fora .fora-trace-segment.fora-trace-segment-failure {
    border-left-color: #d9534f;
}

/* Done node (last in chain) */
.d3view-fora .fora-trace-done {
    position: relative;
    padding-left: 24px;
    animation: fora-trace-fade-in 0.2s ease;
}

.d3view-fora .fora-trace-done .fora-trace-circle {
    top: 2px;
}

.d3view-fora .fora-trace-done .fora-trace-done-label {
    font-family: monospace;
    font-size: 11px;
    font-weight: 500;
    color: #999;
    padding: 0 4px 0 4px;
}

.d3view-fora .fora-trace-done .fora-trace-timer {
    margin-left: 4px;
}

/* ================================================ */
/* Status Colors                                     */
/* ================================================ */

/* Running */
.d3view-fora .fora-trace-node[data-ui-status="running"] .fora-trace-circle {
    background: #428BCA;
    box-shadow: 0 0 0 1px #428BCA;
    animation: fora-trace-pulse 1.5s ease-in-out infinite;
}

.d3view-fora .fora-trace-node[data-ui-status="running"] .fora-trace-label {
    color: #428BCA;
}

.d3view-fora .fora-trace-node[data-ui-status="running"]::before {
    background: #428BCA;
}

/* Success */
.d3view-fora .fora-trace-node[data-ui-status="success"] .fora-trace-circle {
    background: #5cb85c;
    box-shadow: 0 0 0 1px #5cb85c;
}

.d3view-fora .fora-trace-node[data-ui-status="success"]::before {
    background: #5cb85c;
}

/* Failure */
.d3view-fora .fora-trace-node[data-ui-status="failure"] .fora-trace-circle {
    background: #d9534f;
    box-shadow: 0 0 0 1px #d9534f;
}

.d3view-fora .fora-trace-node[data-ui-status="failure"] .fora-trace-label {
    color: #d9534f;
}

.d3view-fora .fora-trace-node[data-ui-status="failure"]::before {
    background: #d9534f;
}

/* Done node colors - inherits from group state */
.d3view-fora .fora-trace-group.fora-trace-complete .fora-trace-done .fora-trace-circle {
    background: #5cb85c;
    box-shadow: 0 0 0 1px #5cb85c;
}

.d3view-fora .fora-trace-group.fora-trace-has-failure .fora-trace-done .fora-trace-circle {
    background: #d9534f;
    box-shadow: 0 0 0 1px #d9534f;
}

/* Waiting bubble (pre-emptive next node) */
.d3view-fora .fora-trace-waiting {
    position: relative;
    padding-left: 24px;
    height: 20px;
    margin-top: -1px;
}

.d3view-fora .fora-trace-waiting .fora-trace-circle {
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #428BCA;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #428BCA;
    animation: fora-trace-pulse 1.5s ease-in-out infinite;
}

/* ================================================ */
/* Agent trace stop button                           */
/* ================================================ */

.d3view-fora .fora-trace-stop-btn {
    padding: 1px 6px;
    font-size: 10px;
    color: #d9534f;
    border: 1px solid #d9534f;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    line-height: 1.2;
}

.d3view-fora .fora-trace-stop-btn:hover {
    background: #d9534f;
    color: #fff;
}

/* ================================================ */
/* Animations                                        */
/* ================================================ */

@keyframes fora-trace-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fora-trace-pulse {
    0%, 100% { box-shadow: 0 0 0 1px #428BCA; }
    50% { box-shadow: 0 0 0 4px rgba(66, 139, 202, 0.3); }
}

@keyframes fora-trace-grow {
    from { max-height: 0; opacity: 0; }
    to { max-height: 200px; opacity: 1; }
}

@keyframes fora-trace-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fora-trace-slide-in {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Highlight flash (triggered from events column click) */
/* Base transitions on elements so removal fades out smoothly */
.d3view-fora .fora-answer .fora-query {
    transition: box-shadow 0.5s ease;
}

.d3view-fora .fora-trace-node .fora-trace-label {
    transition: color 0.5s ease;
}

.d3view-fora .fora-trace-segment .fora-trace-node-io {
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.d3view-fora .fora-tool-card {
    transition: box-shadow 0.5s ease;
}

/* User prompt highlight: glow on the chat bubble */
.d3view-fora .fora-answer.fora-trace-highlight .fora-query {
    box-shadow: 0 0 0 3px rgba(66, 139, 202, 0.4);
    border-radius: 12px;
}

/* Tool trace highlight: label turns blue, I/O panel gets border glow */
.d3view-fora .fora-trace-node.fora-trace-highlight .fora-trace-label {
    color: #428BCA !important;
}

.d3view-fora .fora-trace-segment.fora-trace-highlight .fora-trace-node-io {
    box-shadow: 0 0 0 2px rgba(66, 139, 202, 0.35);
    border-color: rgba(66, 139, 202, 0.4);
}

/* Agent / action full card highlight */
.d3view-fora .fora-tool-card.fora-trace-highlight {
    box-shadow: 0 0 0 2px rgba(66, 139, 202, 0.4);
}

/* ================================================ */
/* Tool Execution Card                               */
/* ================================================ */

.d3view-fora .fora-tool-card {
    margin: 8px 0 !important;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    padding: 0 !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.d3view-fora .fora-tool-card .fora-tool-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-height: 56px;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.d3view-fora .fora-tool-card .fora-tool-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-fora .fora-tool-card .fora-tool-card-main:hover {
    opacity: 0.8;
}

.d3view-fora .fora-tool-card .fora-tool-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    font-size: 1.1em;
    color: #555;
    flex: 0 0 36px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.d3view-fora .fora-tool-card .fora-tool-card-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.d3view-fora .fora-tool-card .fora-tool-card-type {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-fora .fora-tool-card .fora-tool-card-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.d3view-fora .fora-tool-card .fora-tool-card-id {
    color: #aaa;
    font-family: monospace;
    font-size: 10px;
}

.d3view-fora .fora-tool-card .fora-tool-card-inputs i {
    color: #5cb85c;
    margin-right: 2px;
}

.d3view-fora .fora-tool-card .fora-tool-card-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.d3view-fora .fora-tool-card .fora-tool-card-actions .btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
}

.d3view-fora .fora-tool-card .fora-tool-card-actions .btn:hover {
    background: #f5f5f5;
}

/* Running state: shimmer animation */
.d3view-fora .fora-tool-card[data-ui-status="running"] {
    background: linear-gradient(110deg, #ffffff 30%, #f0f7ff 50%, #ffffff 70%);
    background-size: 200% 100%;
    animation: toolCardShimmer 2s linear infinite;
    border-color: #cce0f5;
}

@keyframes toolCardShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Success state: green tinge */
.d3view-fora .fora-tool-card[data-ui-status="success"] {
    background-color: #f6fef6;
    border-color: #c3e6cb;
    animation: none;
}

.d3view-fora .fora-tool-card[data-ui-status="success"] .fora-tool-card-icon {
    background: #d4edda;
    color: #155724;
}

/* Failure state: red tinge */
.d3view-fora .fora-tool-card[data-ui-status="failure"] {
    background-color: #fef6f6;
    border-color: #f5c6cb;
    animation: none;
}

.d3view-fora .fora-tool-card[data-ui-status="failure"] .fora-tool-card-icon {
    background: #f8d7da;
    color: #721c24;
}

.d3view-fora .fora-tool-card .fora-tool-card-error-btn {
    color: #d9534f !important;
    border-color: #d9534f !important;
}

.d3view-fora .fora-tool-card .fora-tool-card-error-btn:hover {
    background-color: #d9534f !important;
    color: #fff !important;
}

/* ================================================ */
/* Utility Tool Card                                 */
/* ================================================ */

.d3view-fora .fora-tool-card.fora-utility-tool .fora-tool-card-icon {
    background: #e8e0f0;
    color: #6a4c93;
}
.d3view-fora .fora-tool-card.fora-utility-tool[data-ui-status="success"] .fora-tool-card-icon {
    background: #d4edda;
    color: #155724;
}
.d3view-fora .fora-tool-card.fora-utility-tool[data-ui-status="failure"] .fora-tool-card-icon {
    background: #f8d7da;
    color: #721c24;
}
.d3view-fora .fora-tool-card.fora-utility-tool .fora-tool-card-main {
    cursor: default;
}
.d3view-fora .fora-tool-card.fora-utility-tool .fora-tool-card-main:hover {
    opacity: 1;
}
.d3view-fora .fora-tool-card .fora-tool-card-utility-label {
    color: #6a4c93;
    font-style: italic;
    font-size: 10px;
}

/* ================================================ */
/* Agent Tool Card                                   */
/* ================================================ */

.d3view-fora .fora-tool-card.fora-agent-tool .fora-tool-card-icon {
    background: #e0ecf8;
    color: #2c5282;
}
.d3view-fora .fora-tool-card.fora-agent-tool[data-ui-status="success"] .fora-tool-card-icon {
    background: #d4edda;
    color: #155724;
}
.d3view-fora .fora-tool-card.fora-agent-tool[data-ui-status="failure"] .fora-tool-card-icon {
    background: #f8d7da;
    color: #721c24;
}
.d3view-fora .fora-tool-card.fora-agent-tool .fora-tool-card-main {
    cursor: default;
}
.d3view-fora .fora-tool-card.fora-agent-tool .fora-tool-card-main:hover {
    opacity: 1;
}
.d3view-fora .fora-tool-card .fora-tool-card-agent-label {
    color: #2c5282;
    font-style: italic;
    font-size: 10px;
}
.d3view-fora .fora-tool-card .fora-tool-card-chat-btn {
    color: #2c5282 !important;
    border-color: #2c5282 !important;
}
.d3view-fora .fora-tool-card .fora-tool-card-chat-btn:hover {
    background-color: #2c5282 !important;
    color: #fff !important;
}

/* Stop button for child agent tool cards */
.d3view-fora .fora-tool-card .fora-tool-card-stop-btn {
    color: #d9534f !important;
    border-color: #d9534f !important;
}
.d3view-fora .fora-tool-card .fora-tool-card-stop-btn:hover {
    background-color: #d9534f !important;
    color: #fff !important;
}
.d3view-fora .fora-tool-card .fora-tool-card-stop-btn.hidden {
    display: none;
}
.d3view-fora .fora-tool-card .fora-tool-card-stop-btn.stopping {
    opacity: 0.6;
    pointer-events: none;
}

/* Stopped state: orange/amber tinge */
.d3view-fora .fora-tool-card[data-ui-status="stopped"] {
    background-color: #fff8f0;
    border-color: #f0c27a;
    animation: none;
}

/* Agent Chat Panel (inline expansion) */
.d3view-fora .fora-tool-card-chat-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.d3view-fora .fora-tool-card-chat-panel.open {
    max-height: 400px;
    overflow: auto;
    border-top: 1px solid #e0e0e0;
    padding: 12px;
}
.d3view-fora .fora-agent-chat-header {
    font-weight: 600;
    font-size: 12px;
    color: #2c5282;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-fora .fora-agent-chat-readonly {
    font-weight: 400;
    font-size: 10px;
    color: #999;
    font-style: italic;
}
.d3view-fora .fora-agent-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.d3view-fora .fora-agent-chat-msg {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    max-width: 85%;
}
.d3view-fora .fora-agent-chat-msg-parent {
    background: #e8f0fe;
    align-self: flex-end;
}
.d3view-fora .fora-agent-chat-msg-child {
    background: #f0f0f0;
    align-self: flex-start;
}
.d3view-fora .fora-agent-chat-msg-tool {
    background: transparent;
    align-self: flex-start;
    font-size: 10px;
    color: #888;
    padding: 4px 12px;
    border-left: 2px solid #ddd;
}
.d3view-fora .fora-agent-chat-role {
    font-weight: 600;
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}
.d3view-fora .fora-agent-chat-content {
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}
.d3view-fora .fora-agent-chat-empty {
    color: #999;
    font-style: italic;
    font-size: 11px;
    text-align: center;
    padding: 16px;
}

/* Typing indicator (bouncing dots) */
.d3view-fora .fora-agent-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    align-self: flex-start;
    background: #f0f0f0;
    border-radius: 12px;
    width: fit-content;
}
.d3view-fora .fora-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #999;
    animation: foraTypingBounce 1.2s ease-in-out infinite;
}
.d3view-fora .fora-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.d3view-fora .fora-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes foraTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ================================================ */
/* Action Card (timeout, error, confirmation, etc.)  */
/* ================================================ */

/* Waiting state: subtle pulse animation */
.d3view-fora .fora-tool-card.fora-action-card[data-ui-status="waiting"] {
    background: linear-gradient(110deg, #ffffff 30%, #fff9e6 50%, #ffffff 70%);
    background-size: 200% 100%;
    animation: actionCardPulse 3s ease-in-out infinite;
    border-color: #f0e0a0;
}

@keyframes actionCardPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Resolved state: faded */
.d3view-fora .fora-tool-card.fora-action-card[data-ui-status="resolved"] {
    opacity: 0.7;
    animation: none;
    border-color: #c3e6cb;
    background-color: #f6fef6;
}
.d3view-fora .fora-tool-card.fora-action-card[data-ui-status="resolved"] .fora-tool-card-icon {
    background: #d4edda;
    color: #155724;
}

/* Non-clickable main area for action cards */
.d3view-fora .fora-tool-card.fora-action-card .fora-tool-card-main {
    cursor: default;
}
.d3view-fora .fora-tool-card.fora-action-card .fora-tool-card-main:hover {
    opacity: 1;
}

/* Timeout variant */
.d3view-fora .fora-tool-card.fora-action-timeout .fora-tool-card-icon {
    background: #fef3cd;
    color: #856404;
}
.d3view-fora .fora-tool-card .fora-tool-card-action-label.action-label-timeout {
    color: #856404;
    font-style: italic;
    font-size: 10px;
}

/* Error variant */
.d3view-fora .fora-tool-card.fora-action-error .fora-tool-card-icon {
    background: #f8d7da;
    color: #721c24;
}
.d3view-fora .fora-tool-card .fora-tool-card-action-label.action-label-error {
    color: #721c24;
    font-style: italic;
    font-size: 10px;
}

/* Confirmation variant */
.d3view-fora .fora-tool-card.fora-action-confirmation .fora-tool-card-icon {
    background: #cce5ff;
    color: #004085;
}
.d3view-fora .fora-tool-card .fora-tool-card-action-label.action-label-confirmation {
    color: #004085;
    font-style: italic;
    font-size: 10px;
}

/* Verification variant */
.d3view-fora .fora-tool-card.fora-action-verification .fora-tool-card-icon {
    background: #d1ecf1;
    color: #0c5460;
}
.d3view-fora .fora-tool-card .fora-tool-card-action-label.action-label-verification {
    color: #0c5460;
    font-style: italic;
    font-size: 10px;
}

/* Action buttons */
.d3view-fora .fora-tool-card .fora-action-card-btn {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #ccc;
    background: transparent;
    color: #555;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.d3view-fora .fora-tool-card .fora-action-card-btn i {
    margin-right: 4px;
}
.d3view-fora .fora-tool-card .fora-action-card-btn.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Button variants by action ID */
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="wait"] {
    border-color: #d4a84b;
    color: #856404;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="wait"]:hover {
    background-color: #fef3cd;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="retry"] {
    border-color: #17a2b8;
    color: #0c5460;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="retry"]:hover {
    background-color: #d1ecf1;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="stop"],
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="no"],
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="skip"] {
    border-color: #d9534f;
    color: #721c24;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="stop"]:hover,
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="no"]:hover,
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="skip"]:hover {
    background-color: #f8d7da;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="yes"],
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="continue"] {
    border-color: #28a745;
    color: #155724;
}
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="yes"]:hover,
.d3view-fora .fora-tool-card .fora-action-card-btn[data-action-id="continue"]:hover {
    background-color: #d4edda;
}

/* Resolved label */
.d3view-fora .fora-tool-card .fora-action-resolved-label {
    color: #888;
    font-style: italic;
    font-size: 11px;
}
.d3view-fora .fora-tool-card .fora-action-resolved-label i {
    color: #28a745;
    margin-right: 4px;
}

/* Action card message area */
.d3view-fora .fora-tool-card .fora-action-card-message {
    border-top: 1px solid #e8e8e8;
    padding: 8px 16px;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    background: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow-x: auto;
    word-break: break-word;
}
.d3view-fora .fora-tool-card .fora-action-card-message pre {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}
.d3view-fora .fora-tool-card .fora-action-card-message .worker-outputs-table {
    width: 100%;
    font-size: 11px;
}
.d3view-fora .fora-tool-card .fora-action-card-message .worker-outputs-table td {
    padding: 2px 4px;
    vertical-align: top;
}

/* ================================================ */
/* Todo Card                                          */
/* ================================================ */

.d3view-fora .fora-todo-card {
    margin: 8px 0;
    border-radius: 8px;
    border: 1px solid #c3e6cb;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
.d3view-fora .fora-todo-card .fora-todo-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    min-height: 48px;
}
.d3view-fora .fora-todo-card .fora-todo-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
}
.d3view-fora .fora-todo-card .fora-todo-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: #e8f5e9;
    color: #2e7d32;
}
.d3view-fora .fora-todo-card .fora-todo-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.d3view-fora .fora-todo-card .fora-todo-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.d3view-fora .fora-todo-card .fora-todo-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #666;
}
.d3view-fora .fora-todo-card .fora-todo-card-active {
    color: #1976d2;
}
.d3view-fora .fora-todo-card .fora-pulse-dot {
    font-size: 6px;
    vertical-align: middle;
    animation: foraTodoPulse 1.5s ease-in-out infinite;
}
@keyframes foraTodoPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.d3view-fora .fora-todo-card .fora-todo-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.d3view-fora .fora-todo-card .fora-todo-card-progress-bar {
    width: 60px;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}
.d3view-fora .fora-todo-card .fora-todo-card-progress-fill {
    height: 100%;
    background: #4caf50;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.d3view-fora .fora-todo-card .fora-todo-card-expand-btn {
    border: 1px solid transparent;
    background: transparent;
    color: #888;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.d3view-fora .fora-todo-card:hover .fora-todo-card-expand-btn {
    border-color: #ccc;
    color: #555;
}

/* Todo card: running state (shimmer) */
.d3view-fora .fora-todo-card[data-ui-status="running"] {
    background: linear-gradient(110deg, #ffffff 30%, #f0fff0 50%, #ffffff 70%);
    background-size: 200% 100%;
    animation: toolCardShimmer 2s linear infinite;
}

/* Todo card: success/completed state */
.d3view-fora .fora-todo-card[data-ui-status="success"] {
    background-color: #f6fef6;
    border-color: #a3d9a5;
}
.d3view-fora .fora-todo-card[data-ui-status="success"] .fora-todo-card-icon {
    background: #4caf50;
    color: #fff;
}

/* Todo card: frozen completed — stays in chat with reduced opacity */
.d3view-fora .fora-todo-card.fora-todo-completed {
    opacity: 0.7;
}

/* Expandable todo panel */
.d3view-fora .fora-todo-card-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fafafa;
    border-top: 0 solid transparent;
}
.d3view-fora .fora-todo-card-panel.open {
    max-height: 400px;
    overflow: auto;
    border-top: 1px solid #e0e0e0;
}

/* Individual todo items */
.d3view-fora .fora-todo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    color: #333;
}
.d3view-fora .fora-todo-item:last-child {
    border-bottom: none;
}
.d3view-fora .fora-todo-item .fa {
    font-size: 13px;
    flex-shrink: 0;
}
.d3view-fora .fora-todo-item.todo-pending .fa {
    color: #bdbdbd;
}
.d3view-fora .fora-todo-item.todo-in_progress .fa {
    color: #1976d2;
}
.d3view-fora .fora-todo-item.todo-completed .fa {
    color: #4caf50;
}
.d3view-fora .fora-todo-item.todo-completed .fora-todo-item-text {
    text-decoration: line-through;
    color: #999;
}
.d3view-fora .fora-todo-item.todo-in_progress {
    background: #f0f7ff;
}

/* ================================================ */
/* I/O Button (hover-reveal)                         */
/* ================================================ */

.d3view-fora .fora-tool-card .fora-tool-card-io-btn {
    border-color: transparent;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.d3view-fora .fora-tool-card:hover .fora-tool-card-io-btn,
.d3view-fora .fora-tool-card .fora-tool-card-io-btn.active {
    border-color: #ccc;
    opacity: 1;
}
.d3view-fora .fora-tool-card .fora-tool-card-io-btn.active {
    background-color: #e8f4fd;
    border-color: #428bca;
    color: #428bca;
}

/* ================================================ */
/* Verify / Confirm / Validate Buttons (hover-reveal)*/
/* ================================================ */

.d3view-fora .fora-tool-card .fora-tool-card-verify-btn,
.d3view-fora .fora-tool-card .fora-tool-card-confirm-btn,
.d3view-fora .fora-tool-card .fora-tool-card-validate-btn {
    border-color: transparent;
    opacity: 0.5;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.d3view-fora .fora-tool-card:hover .fora-tool-card-verify-btn,
.d3view-fora .fora-tool-card:hover .fora-tool-card-confirm-btn,
.d3view-fora .fora-tool-card:hover .fora-tool-card-validate-btn {
    border-color: #ccc;
    opacity: 1;
}

/* Active (panel open) */
.d3view-fora .fora-tool-card .fora-tool-card-verify-btn.active,
.d3view-fora .fora-tool-card .fora-tool-card-confirm-btn.active,
.d3view-fora .fora-tool-card .fora-tool-card-validate-btn.active {
    background-color: #e8f4fd;
    border-color: #428bca;
    color: #428bca;
    opacity: 1;
}

/* Running / Waiting — shimmer + blue border */
.d3view-fora .fora-tool-card .fora-tool-card-verify-btn[data-verify-status="running"],
.d3view-fora .fora-tool-card .fora-tool-card-confirm-btn[data-verify-status="waiting"],
.d3view-fora .fora-tool-card .fora-tool-card-validate-btn[data-verify-status="running"] {
    opacity: 1;
    border-color: #428bca;
    color: #428bca;
    background: linear-gradient(110deg, #e8f4fd 30%, #ffffff 50%, #e8f4fd 70%);
    background-size: 200% 100%;
    animation: toolCardShimmer 2s linear infinite;
}

/* Success / Confirmed — green */
.d3view-fora .fora-tool-card .fora-tool-card-verify-btn[data-verify-status="success"],
.d3view-fora .fora-tool-card .fora-tool-card-confirm-btn[data-verify-status="confirmed"],
.d3view-fora .fora-tool-card .fora-tool-card-validate-btn[data-verify-status="success"] {
    opacity: 1;
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

/* Failure / Rejected — red */
.d3view-fora .fora-tool-card .fora-tool-card-verify-btn[data-verify-status="failure"],
.d3view-fora .fora-tool-card .fora-tool-card-confirm-btn[data-verify-status="rejected"],
.d3view-fora .fora-tool-card .fora-tool-card-validate-btn[data-verify-status="failure"] {
    opacity: 1;
    background-color: #f8d7da;
    border-color: #d9534f;
    color: #721c24;
}

/* ================================================ */
/* Verification / Confirmation Slide-Down Panels     */
/* ================================================ */

.d3view-fora .fora-tool-card-verification-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.d3view-fora .fora-tool-card-verification-panel.open {
    max-height: 400px;
    overflow: auto;
    border-top: 1px solid #e0e0e0;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-content {
    padding: 10px 14px;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status i {
    font-size: 14px;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-running {
    color: #428bca;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-success {
    color: #155724;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-failure {
    color: #721c24;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-waiting {
    color: #004085;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-confirmed {
    color: #155724;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-status.vp-rejected {
    color: #721c24;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-message {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-word;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-message .worker-outputs-table {
    width: 100%;
    font-size: 11px;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-message .worker-outputs-table td {
    padding: 2px 4px;
    vertical-align: top;
}
.d3view-fora .fora-tool-card-verification-panel .fora-vp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Green flash on success auto-close */
.d3view-fora .fora-tool-card-verification-panel.vp-flash-success {
    background-color: #d4edda;
    transition: background-color 0.3s ease;
}

/* ================================================ */
/* I/O Slide-Down Panel                              */
/* ================================================ */

.d3view-fora .fora-tool-card.io-expanded {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
}
.d3view-fora .fora-tool-card-io-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-top: none;
    background: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.d3view-fora .fora-tool-card-io-panel.open {
    max-height: 500px;
    overflow: auto;
    border-top: 1px solid #e0e0e0;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-content {
    display: flex;
    gap: 0;
    padding: 10px 12px;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-col {
    flex: 1;
    min-width: 0;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-col + .io-panel-col {
    border-left: 1px solid #e0e0e0;
    padding-left: 12px;
    margin-left: 12px;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-col-header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-row-label {
    flex: 0 0 auto;
    max-width: 40%;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-row-value {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-empty {
    color: #aaa;
    font-style: italic;
    font-size: 11px;
    padding: 4px 0;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-expand-link {
    color: #428bca;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
}
.d3view-fora .fora-tool-card-io-panel .io-panel-expand-link:hover {
    text-decoration: underline;
}

/* Utility tool output result */
.d3view-fora .io-panel-result-pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 11px;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px 0;
    word-break: break-word;
}

/* Stale I/O notice */
.d3view-fora .io-panel-stale-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    color: #795548;
    margin: 8px 12px 0;
}

/* Args panel — reuses io-panel styles */
.d3view-fora .fora-tool-card-args-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-top: 1px solid var(--d3neutralLight, #edebe9);
}
.d3view-fora .fora-tool-card-args-panel.open {
    max-height: 500px;
    overflow-y: auto;
}

/* ================================================ */
/* Error Popover                                     */
/* ================================================ */

.fora-error-popover {
    max-width: 450px;
}

.fora-error-popover .popover-title {
    background-color: #f8d7da;
    border-bottom-color: #f5c6cb;
}

/* ================================================ */
/* Ask Panel (pseudo-tool UI)                       */
/* ================================================ */

.fora-ask-panel {
    background: var(--d3neutralLighterAlt, #f8f9fa);
    border-bottom: 1px solid var(--d3neutralLight, #edebe9);
    padding: 10px 15px;
    animation: foraAskPanelSlideIn 0.2s ease-out;
    position: relative;
    z-index: 10;
}

@keyframes foraAskPanelSlideIn {
    from { opacity: 0; max-height: 0; padding: 0 15px; }
    to   { opacity: 1; max-height: 300px; padding: 10px 15px; }
}

.fora-ask-panel-header {
    margin-bottom: 10px;
    padding-right: 30px;
}

.fora-ask-question {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}

.fora-ask-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d3red, #d13438);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 11;
}

.fora-ask-dismiss:hover {
    background: #a4262c;
    transform: scale(1.1);
    color: #fff;
}

.fora-ask-minimize {
    position: absolute;
    top: 8px;
    right: 34px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d3neutralTertiary, #a19f9d);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 11;
}

.fora-ask-minimize:hover {
    background: var(--d3neutralSecondary, #605e5c);
    transform: scale(1.1);
    color: #fff;
}

.fora-ask-panel.minimized .fora-ask-panel-header,
.fora-ask-panel.minimized .fora-ask-panel-body {
    display: none;
}

.fora-ask-panel.minimized {
    padding: 6px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fora-ask-panel.minimized .fora-ask-minimize {
    display: none;
}

.fora-ask-panel.minimized .fora-ask-dismiss {
    position: static;
    flex-shrink: 0;
    order: 2;
    margin-left: auto;
}

.fora-ask-panel.minimized .fora-ask-minimized-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d3neutralSecondary, #605e5c);
    order: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.fora-ask-panel.minimized .fora-ask-minimized-label i {
    color: var(--d3themePrimary, #0078d4);
}

.fora-ask-minimized-label {
    display: none;
}

.fora-ask-context {
    color: var(--d3neutralSecondary, #605e5c);
    margin-bottom: 8px;
}

/* Multiple Choice Options — vertical radio list, scrollable when too many */
.fora-mc-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.fora-mc-option {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    background: var(--d3white, #fff);
    color: var(--d3neutralPrimary, #323130);
    transition: all 0.15s ease;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}

.fora-mc-option:hover {
    border-color: var(--d3themePrimary, #0078d4);
    background: var(--d3neutralLighterAlt, #f8f9fa);
}

.fora-mc-option input[type="radio"] {
    display: none;
}

.fora-mc-option.active,
.fora-mc-option:has(input:checked) {
    border-color: var(--d3themePrimary, #0078d4);
    background: rgba(0, 120, 212, 0.06);
}

.fora-mc-letter {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    background: var(--d3neutralLighterAlt, #f0f0f0);
    color: var(--d3neutralSecondary, #605e5c);
    flex-shrink: 0;
    transition: all 0.15s ease;
    line-height: 1;
}

.fora-mc-option.active .fora-mc-letter,
.fora-mc-option:has(input:checked) .fora-mc-letter {
    background: var(--d3themePrimary, #0078d4);
    color: #fff;
}

.fora-mc-label {
    flex: 1;
    line-height: 26px;
    display: inline;
}

/* Ask File Upload */
.fora-ask-file-upload {
    width: 100%;
}

.fora-ask-file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 20px;
    border: 2px dashed var(--d3neutralLight, #d2d0ce);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--d3white, #fff);
    width: 100%;
}

.fora-ask-file-dropzone:hover {
    border-color: var(--d3themePrimary, #0078d4);
    background: rgba(0, 120, 212, 0.03);
}

.fora-ask-file-icon {
    font-size: 24px;
    color: var(--d3neutralTertiary, #a19f9d);
}

.fora-ask-file-dropzone:hover .fora-ask-file-icon {
    color: var(--d3themePrimary, #0078d4);
}

.fora-ask-file-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fora-ask-file-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--d3neutralPrimary, #323130);
}

.fora-ask-file-hint {
    color: var(--d3neutralSecondary, #605e5c);
    font-size: 11px;
}

.fora-ask-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.fora-ask-file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    background: var(--d3white, #fff);
    font-size: 13px;
}

.fora-ask-file-card i.fa-file {
    color: var(--d3themePrimary, #0078d4);
}

.fora-ask-file-card .fora-ask-fc-name {
    flex: 1;
    font-weight: 500;
    color: var(--d3neutralPrimary, #323130);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fora-ask-file-card .fora-ask-fc-status {
    color: var(--d3neutralSecondary, #605e5c);
    font-size: 12px;
    flex-shrink: 0;
}

.fora-ask-file-card .fora-ask-fc-status.uploaded {
    color: #4CAF50;
}

.fora-ask-file-card .fora-ask-fc-delete {
    color: var(--d3neutralTertiary, #a19f9d);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.fora-ask-file-card .fora-ask-fc-delete:hover {
    color: var(--d3red, #d13438);
    background: rgba(209, 52, 56, 0.08);
}

/* Ask Remote Lookup */
.fora-ask-remote-lookup {
    max-width: 100%;
}

/* Select2 v3 overrides within ask panel (same as RL panel) */
.fora-ask-panel .select2-container {
    width: 100% !important;
}

.fora-ask-panel .select2-container .select2-choice {
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    border-radius: 8px;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    background: var(--d3white, #fff);
    box-shadow: none;
    font-size: 13px;
    color: var(--d3neutralPrimary, #323130);
    transition: border-color 0.15s ease;
}

.fora-ask-panel .select2-container .select2-choice:hover,
.fora-ask-panel .select2-container.select2-container-active .select2-choice {
    border-color: var(--d3themePrimary, #0078d4);
}

.fora-ask-panel .select2-container .select2-choice .select2-arrow {
    display: none;
}

/* ================================================ */
/* Remote Lookup Domain Picker                      */
/* ================================================ */

.fora-rl-picker {
    background: var(--d3white, #fff);
    border: 1px solid var(--d3neutralLight, #edebe9);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-height: 320px;
    overflow-y: auto;
    min-width: 200px;
    z-index: 1050;
}

.fora-rl-picker-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--d3neutralLight, #edebe9);
}

.fora-rl-picker-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: background 0.1s ease;
}

.fora-rl-picker-item:hover {
    background: var(--d3neutralLighterAlt, #f3f2f1);
}

.fora-rl-picker-item i {
    width: 20px;
    text-align: center;
    color: var(--d3neutralSecondary, #605e5c);
}

/* hasAskPanel class — adjusts result container like hasPreview */
.fora-input-container.hasAskPanel .fora-preview {
    display: block;
}

/* ================================================ */
/* Remote Lookup Inline Panel                       */
/* ================================================ */

/* fora-preview becomes the positioning context when RL panel is open */
.fora-input-container.hasPreview .fora-preview {
    position: relative;
    z-index: 10;
    max-width: 100%;
    overflow: hidden;
}

/* Override the default flex-row layout when RL panel or ask panel is inside */
.fora-preview:has(.fora-rl-panel),
.fora-preview:has(.fora-ask-panel) {
    flex-direction: column;
    align-items: stretch !important;
    padding: 0 !important;
}

.fora-rl-panel {
    background: var(--d3white, #fff);
    padding: 0 20px 14px;
    max-width: 100%;
    box-sizing: border-box;
    animation: foraAskPanelSlideIn 0.2s ease-out;
    position: relative;
    z-index: 10;
}

.fora-rl-panel-title {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--d3neutralSecondary, #605e5c);
    text-align: center;
    padding: 14px 20px 10px;
}

.fora-rl-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d3red, #d13438);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 11;
}

.fora-rl-panel-close:hover {
    background: #a4262c;
    transform: scale(1.1);
    color: #fff;
}

/* Active state on the remote lookup button when panel is open */
.inline-d3view-file-upload.fora-rl-active i {
    color: var(--d3themePrimary, #0078d4);
}

/* Active state on the task template button when panel is open */
.inline-task-template-btn.fora-tt-active i {
    color: var(--d3themePrimary, #0078d4);
}

/* Panel step containers — constrain width so domain grid scrolls instead of expanding */
.fora-rl-panel-step {
    min-width: 0;
    overflow: hidden;
}

/* Fade edges on the domain grid to hint at scrollable overflow */
.fora-rl-step-domain {
    position: relative;
}
.fora-rl-step-domain::before,
.fora-rl-step-domain::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 1;
    pointer-events: none;
}
.fora-rl-step-domain::before {
    left: 0;
    background: linear-gradient(to right, var(--d3white, #fff), transparent);
}
.fora-rl-step-domain::after {
    right: 0;
    background: linear-gradient(to left, var(--d3white, #fff), transparent);
}

/* Domain card grid — single row, horizontally scrollable via wheel */
.fora-rl-domain-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fora-rl-domain-grid::-webkit-scrollbar {
    display: none;
}

.fora-rl-domain-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 120px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.fora-rl-domain-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.fora-rl-domain-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d3neutralSecondary, #555);
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.fora-rl-domain-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.fora-rl-domain-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--d3neutralPrimary, #323130);
    white-space: nowrap;
    text-transform: capitalize;
}

/* Search step */
.fora-rl-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fora-rl-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--d3neutralSecondary, #605e5c);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.fora-rl-back:hover {
    color: var(--d3themePrimary, #0078d4);
    background: var(--d3neutralLighterAlt, #f3f2f1);
}

.fora-rl-search-domain-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--d3neutralPrimary, #323130);
    text-transform: capitalize;
}

.fora-rl-search-body {
    max-width: 100%;
}

/* Select2 v3 overrides within the RL panel */
.fora-rl-panel .select2-container {
    width: 100% !important;
}

.fora-rl-panel .select2-container .select2-choice {
    border: 1px solid var(--d3neutralLight, #e0e0e0);
    border-radius: 8px;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    background: var(--d3white, #fff);
    box-shadow: none;
    font-size: 13px;
    color: var(--d3neutralPrimary, #323130);
    transition: border-color 0.15s ease;
}

.fora-rl-panel .select2-container .select2-choice:hover,
.fora-rl-panel .select2-container.select2-container-active .select2-choice {
    border-color: var(--d3themePrimary, #0078d4);
}

.fora-rl-panel .select2-container .select2-choice .select2-arrow {
    display: none;
}

/* ========================================
   Task Template Panel & Chips
   ======================================== */
.fora-task-template-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    margin-bottom: 8px;
    z-index: 10;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    animation: fora-trace-fade-in 0.15s ease;
}

.fora-tt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.fora-tt-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.fora-tt-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 14px;
    padding: 2px 4px;
}

.fora-tt-close:hover {
    color: #333;
}

.fora-tt-body {
    overflow-y: auto;
    padding: 8px;
    flex: 1;
}

.fora-tt-loading,
.fora-tt-empty {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

.fora-tt-card {
    padding: 10px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.fora-tt-card:last-child {
    margin-bottom: 0;
}

.fora-tt-card:hover {
    background: #f0f4ff;
    border-color: #2c5282;
}

.fora-tt-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.fora-tt-card-desc {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Task Template Chip (attached to input) */
.fora-tt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0ecf8;
    border: 1px solid #b0c8e8;
    border-radius: 16px;
    padding: 4px 8px 4px 10px;
    font-size: 12px;
    line-height: 1.4;
    margin: 4px 4px 4px 0;
}

.fora-tt-chip i.fa-tasks {
    color: #2c5282;
    font-size: 11px;
}

.fora-tt-chip-name {
    color: #2c5282;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.fora-tt-chip-remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #6b8db8;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.fora-tt-chip-remove:hover {
    color: #d13438;
}

/*
 * M3 | Embedded-mode opt-in.
 * When a FORA instance is mounted inside a container with the `fora-embedded`
 * class, relax the default `full-height` behaviour so flex parents can size it
 * naturally. Pane-specific layout (scrolling message list, sticky input, etc.)
 * lives in the hosting plugin's CSS, not here.
 */
.fora-embedded > .d3view-fora {
    height: 100%;
    width: 100%;
    min-height: 0;
}

.fora-embedded .fora-iv {
    height: 100%;
    min-height: 0;
}


/* /stylesheets/agent-chat.css */
/*
 * agent-chat.css - generic AgentChatView styling, extracted from fora.css
 * (honda-assembler-agent-audit phase 07-D follow-up, 2026-07-05).
 *
 * Scope: every selector under .agentchat-shell so legacy modelassembler.css is untouched.
 * Tokens: consumed via var(--token) from stylesheets/shell/tokens.css. Never
 * redefined here. Mono stack = var(--font-mono) (Menlo, Monaco, Consolas, monospace).
 *
 * This file owns everything shared by ANY agent chat pane: the app root, chat
 * scroller, message bubbles + avatars, tool/todo cards, ask panel, composer +
 * context pill, busy/typing/error states, and the chat-loading skeleton.
 * Fora-only pieces (suggestion chips, history panel, pane-head conversation
 * title/rename, compact-mode variants) stay in fora/fora.css.
 */

/* ------------------------------------------------------------------ */
/* Self-contained design tokens — d3VIEW navy / white / grey scheme.  */
/* Defined locally (scoped to the widget root) so the plugin is fully  */
/* drop-in and never depends on a host token stylesheet. Also makes    */
/* the root a flex column that fills its host-sized container.         */
/* ------------------------------------------------------------------ */

.agentchat-shell {
  /* surfaces */
  --panel: #ffffff;
  --panel-soft: #f6f8fa;
  /* navy accent family — avatars, send button, active/emphasis */
  --navy: #2c5282;
  --indigo: #2c5282;
  --indigo-2: #1e3a5f;
  --indigo-soft: #e8eef5;
  --indigo-bd: #c5d5e8;
  /* text greys */
  --ink: #2d3748;
  --ink-mut: #57606a;
  --ink-dim: #8a93a0;
  /* borders / lines */
  --line: #e4e8ec;
  --line-hi: #cbd5e0;
  /* functional status */
  --green: #2f855a;
  --red: #c53030;
  /* error box — greyed rather than warm, per the navy/white/grey scheme */
  --orange-soft: #eef2f6;
  --orange-bd: #d6dee6;
  --orange-strong: #c53030;
  /* geometry */
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 3px rgba(20, 40, 70, 0.08);
  --font-mono: Menlo, Monaco, Consolas, monospace;
  --token: #2c5282;
  --agentchat-accent: var(--indigo);
  --agentchat-effort-high: #b58aff;
  --agentchat-code-bg: #172033;
  --agentchat-danger: var(--red);

  /* Root layout: flex column filling the host-sized container so the chat
     scroller (flex:1) fills and the composer pins to the bottom — no gap. */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
}

/* ------------------------------------------------------------------ */
/* Conversation-management toolbar (New / Clear / History).           */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.agentchat-shell .agentchat-tb-spacer { flex: 1 1 auto; }
.agentchat-shell .agentchat-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.agentchat-shell .agentchat-tb-btn:hover {
  background: var(--indigo-soft);
  color: var(--navy);
  border-color: var(--indigo-bd);
}
.agentchat-shell .agentchat-tb-new { color: var(--navy); border-color: var(--indigo-bd); }
.agentchat-shell .agentchat-tb-btn svg { display: block; }
.agentchat-shell .agentchat-fora-convtitle {
  position: absolute;
  left: 50%;
  display: none;
  align-items: center;
  gap: 5px;
  max-width: 46%;
  transform: translateX(-50%);
}
.agentchat-shell .agentchat-fora-convtitle-text {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-fora-convtitle-edit {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  padding: 5px;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.agentchat-shell .agentchat-conv-id {
  flex: none;
  color: var(--ink-dim);
  font-size: 11px;
  white-space: nowrap;
  user-select: text;
}
.agentchat-shell .agentchat-conv-id:empty { display: none; }
.agentchat-shell .agentchat-fora-convtitle-edit:hover { color: var(--agentchat-accent); background: var(--indigo-soft); }
.agentchat-shell .agentchat-fora-convtitle-edit svg { width: 13px; height: 13px; }
.agentchat-shell .agentchat-fora-convtitle-input {
  width: min(360px, 40vw);
  padding: 5px 8px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--indigo-bd);
  border-radius: 6px;
  outline: 0;
}

.agentchat-shell.agentchat-shell--fora-composer .agentchat-toolbar {
  height: 44px; box-sizing: border-box; gap: 4px; padding: 6px 10px; z-index: 65;
}
.agentchat-shell.agentchat-shell--fora-composer .agentchat-tb-btn {
  justify-content: center; flex: none; width: 30px; height: 30px; padding: 6px;
  border: 0; background: transparent; color: var(--ink-dim);
}
.agentchat-shell--fora-composer .agentchat-tb-btn svg { width: 18px; height: 18px; }
.agentchat-shell.agentchat-shell--fora-composer .agentchat-tb-btn.agentchat-active,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-tb-btn[aria-pressed="true"] {
  background: var(--indigo-soft); color: var(--indigo);
}
.agentchat-shell--fora-composer .agentchat-tb-btn[hidden] { display: none; }
.agentchat-shell.agentchat-shell--fora-composer .agentchat-fora-history,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-artpanel { top: 44px; }
.agentchat-shell--fora-composer .agentchat-fora-convtitle { max-width: calc(100% - 240px); }
.agentchat-shell--fora-composer .agentchat-toolbar :focus-visible,
.agentchat-shell--landing .agentchat-nav-panel :focus-visible {
  outline: 1px solid var(--agentchat-accent); outline-offset: 2px;
}
.agentchat-shell.agentchat-shell--unified.agentchat-shell--fora-composer.is-temporary {
  --panel: #111923; --panel-soft: #17212c; --ink: #f1f5f9; --ink-mut: #c0cad5; --ink-dim: #9aa8b8;
  --line: rgba(241,245,249,.08); --line-hi: rgba(241,245,249,.15);
  --navy: #29abe2; --indigo: #29abe2; --indigo-soft: rgba(41,171,226,.12); --indigo-bd: rgba(95,200,240,.32);
  --green: #6ee7b7; --red: #fda4af; --orange-strong: #fda4af;
}
.agentchat-shell--landing { --agentchat-navigation-width: 320px; }
.agentchat-shell.agentchat-shell--landing .agentchat-nav-panel {
  inset: 0 auto 0 0; width: var(--agentchat-navigation-width); max-width: calc(100% - 44px);
  box-sizing: border-box; z-index: 70; border-right: 1px solid var(--line);
  transform: translateX(-100%); visibility: hidden; pointer-events: none;
  transition: transform .2s ease, visibility .2s;
}
.agentchat-shell--landing .agentchat-nav-panel.is-open { transform: none; visibility: visible; pointer-events: auto; }
.agentchat-shell--landing .agentchat-nav-panel .agentchat-artpanel-tools { flex-wrap: wrap; }
.agentchat-shell--landing .agentchat-nav-panel .agentchat-artpanel-search { width: 100%; flex-basis: 100%; order: 1; }
.agentchat-shell--landing .agentchat-nav-panel .agentchat-artpanel-item { flex-wrap: wrap; }
.agentchat-shell--landing .agentchat-nav-panel .agentchat-artpanel-actions { margin-left: auto; }
@media (min-width: 761px) {
  .agentchat-shell--landing.has-navigation-panel .agentchat-chat {
    margin-left: var(--agentchat-navigation-width);
    --agentchat-transcript-width: calc(100% - var(--agentchat-navigation-width));
  }
  /* The panel runs the full height, so the toolbar starts beside it rather than above it. */
  .agentchat-shell--landing.has-navigation-panel .agentchat-toolbar { margin-left: var(--agentchat-navigation-width); }
  .agentchat-shell.agentchat-shell--landing.has-navigation-panel .agentchat-composer,
  .agentchat-shell.agentchat-shell--landing.has-navigation-panel .agentchat-welcome {
    left: calc(50% + var(--agentchat-navigation-width) / 2);
    width: min(900px, calc(100% - var(--agentchat-navigation-width) - 48px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .agentchat-shell--landing .agentchat-nav-panel { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Template-not-found fallback.                                       */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-error {
  margin: 16px;
  padding: 12px 14px;
  border: 1px solid var(--orange-bd);
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* App root (body-only: fills the workspace pane body)               */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* containing block for a subclass's own overlay (e.g. ForaView's
     .agentchat-fora-history history panel) */
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Chat body                                                         */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-chat {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--panel-soft);
}

.agentchat-shell.agentchat-shell--fora-composer .agentchat-chat {
  padding-inline: max(16px, calc((var(--agentchat-transcript-width, 100%) - 900px) / 2));
}

/* ------------------------------------------------------------------ */
/* Messages                                                          */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-msg {
  display: flex;
  gap: 11px;
  max-width: 96%;
}

.agentchat-shell .agentchat-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.agentchat-shell .agentchat-msg.agentchat-msg--agent:not(.agentchat-typing) {
  width: 100%;
  max-width: 100%;
}

/* Avatars */
.agentchat-shell .agentchat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.agentchat-shell .agentchat-avatar--user {
  background: linear-gradient(145deg, #334155, var(--navy));
}

.agentchat-shell .agentchat-avatar--agent {
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 6px rgba(79, 70, 229, .25);
}

.agentchat-shell .agentchat-avatar--agent svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------------------------ */
/* Bubbles                                                           */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-bubble {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.agentchat-shell .agentchat-msg--user .agentchat-bubble {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  background: #344352;
  color: #f1f5f9;
  border: 0;
}

.agentchat-shell .agentchat-turnchips {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.agentchat-shell .agentchat-turnchips:first-child { margin-top: 0; }

.agentchat-shell .agentchat-msg > .agentchat-turnchips { margin: 0 0 4px; }
.agentchat-shell .agentchat-msg[data-send-status]::after {
  content: attr(data-send-status);
  color: var(--ink-dim);
  font-size: 11px;
}

.agentchat-shell .agentchat-turnchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  padding: 4px 8px;
  border: 1px solid var(--indigo-bd);
  border-radius: 999px;
  background: rgba(41, 171, 226, .08);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
}

.agentchat-shell .agentchat-turnchip--skill { color: var(--agentchat-accent); }
.agentchat-shell button.agentchat-turnchip { cursor: pointer; box-shadow: none; }
.agentchat-shell button.agentchat-turnchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentchat-shell button.agentchat-turnchip:hover,
.agentchat-shell button.agentchat-turnchip:focus-visible { border-color: var(--agentchat-accent); }

.agentchat-shell .agentchat-turnchip-kind {
  color: var(--agentchat-accent);
  font-size: 9px;
  font-weight: 700;
}

/* Agent prose belongs to the transcript surface, not a second card. */
.agentchat-shell .agentchat-msg.agentchat-msg--agent:not(.agentchat-typing) .agentchat-bubble {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.agentchat-shell .agentchat-bubble-who {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-mut);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.agentchat-shell .agentchat-bubble-who strong {
  color: var(--indigo);
  font-weight: 700;
  font-style: normal;
}

.agentchat-shell .agentchat-bubble-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: .2px;
  line-height: 1.6;
}

.agentchat-shell .agentchat-bubble-foot strong {
  color: var(--ink-mut);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ------------------------------------------------------------------ */
/* Inline atoms used inside bubbles (chips, metrics)                 */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-bubble .agentchat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
}

.agentchat-shell .agentchat-bubble .agentchat-chip .agentchat-cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.agentchat-shell .agentchat-bubble .agentchat-metric {
  font-family: var(--font-mono);
  color: var(--navy);
  font-weight: 600;
}

.agentchat-shell .agentchat-bubble .agentchat-metric.agentchat-up {
  color: var(--green);
}

/* ------------------------------------------------------------------ */
/* Composer                                                          */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-composer {
  flex: none;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.agentchat-shell .agentchat-composer-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  border-radius: 11px;
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.agentchat-shell .agentchat-composer-box:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
  background: var(--panel);
}

.agentchat-shell .agentchat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  line-height: 1.5;
  max-height: 160px;
  box-sizing: border-box;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}

.agentchat-shell .agentchat-input::placeholder {
  color: var(--ink-dim);
}

.agentchat-shell .agentchat-upload-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 5px;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.agentchat-shell .agentchat-upload-btn:hover,
.agentchat-shell .agentchat-upload-btn:focus-visible {
  color: var(--navy);
  background: var(--panel);
}
.agentchat-shell .agentchat-upload-btn:disabled { opacity: .45; cursor: default; }
.agentchat-shell .agentchat-upload-btn svg { width: 17px; height: 17px; }

.agentchat-shell .agentchat-add-btn {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 6px;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.agentchat-shell .agentchat-add-btn:hover,
.agentchat-shell .agentchat-add-btn:focus-visible {
  color: var(--agentchat-accent);
  background: rgba(41, 171, 226, .08);
}
.agentchat-shell .agentchat-add-btn svg { width: 19px; height: 19px; }

.agentchat-shell .agentchat-send-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}

.agentchat-shell .agentchat-send-btn svg {
  width: 15px;
  height: 15px;
}

.agentchat-shell--constellation .agentchat-send-btn.is-stop {
  background: var(--panel-soft);
  border: 1px solid var(--agentchat-accent);
  color: var(--agentchat-accent);
  box-shadow: 0 0 10px rgba(41, 171, 226, .18);
}

/* Composer context pills (Agent / Skill / Docs scope) */
.agentchat-shell .agentchat-composer-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.agentchat-shell .agentchat-ctx-pill {
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
}

.agentchat-shell .agentchat-ctx-pill svg {
  width: 11px;
  height: 11px;
  color: var(--ink-mut);
}

/* ------------------------------------------------------------------ */
/* Welcome hero (empty conversation)                                  */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-welcome {
  margin: auto;
  max-width: 440px;
  text-align: center;
  padding: 24px 16px;
}

.agentchat-shell .agentchat-welcome-avatar {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 3px 10px rgba(79, 70, 229, .3);
}

.agentchat-shell .agentchat-welcome-avatar svg {
  width: 22px;
  height: 22px;
}

.agentchat-shell .agentchat-landing-orb { display: none; }

/* Full-page FORA landing. The host opts in explicitly; dock and generic chat
   retain the normal bottom composer and static welcome. */
.agentchat-shell--landing { position: relative; }
.agentchat-shell--landing .agentchat-add-btn { display: grid; }
.agentchat-shell--landing .agentchat-landing-caption {
  display: none;
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 11px;
  text-align: center;
}
.agentchat-shell--landing.is-landing-empty .agentchat-chat {
  overflow: hidden;
  padding-bottom: 170px;
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome {
  position: absolute;
  top: 24%;
  left: 50%;
  width: min(760px, calc(100% - 48px));
  max-width: none;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome-avatar,
.agentchat-shell--fora-composer.is-landing-empty .agentchat-welcome-avatar {
  width: 114px;
  height: 114px;
  margin: 0 auto 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1);
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome-avatar.is-orb-hovered {
  transform: scale(1.045);
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome-avatar.is-orb-pressed {
  transform: scale(.975);
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome-avatar svg,
.agentchat-shell--fora-composer.is-landing-empty .agentchat-welcome-avatar svg { display: none; }
.agentchat-shell--landing.is-landing-empty .agentchat-landing-orb,
.agentchat-shell--fora-composer.is-landing-empty .agentchat-landing-orb {
  display: block;
  width: 114px;
  height: 114px;
  cursor: grab;
  touch-action: none;
}
.agentchat-shell--landing.is-landing-empty .agentchat-landing-orb:active { cursor: grabbing; }
.agentchat-shell--landing.is-landing-empty .agentchat-landing-orb:focus-visible {
  outline: 1px solid rgba(41, 171, 226, .75);
  outline-offset: 4px;
  border-radius: 50%;
}
.agentchat-shell--landing.is-landing-empty .agentchat-welcome-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 3.2vw, 42px);
  font-weight: 560;
  letter-spacing: -.025em;
}
.agentchat-shell--landing.is-landing-empty .agentchat-composer {
  position: absolute;
  top: 55%;
  left: 50%;
  width: min(900px, calc(100% - 48px));
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  transition: top .44s cubic-bezier(.22,.8,.24,1), bottom .44s cubic-bezier(.22,.8,.24,1);
  z-index: 20;
}
.agentchat-shell--landing.is-landing-empty.has-landing-context .agentchat-composer {
  top: auto;
  bottom: 20px;
}
.agentchat-shell.agentchat-shell--fora-composer .agentchat-send-btn,
.agentchat-shell.agentchat-shell--landing .agentchat-send-btn {
  width: 35px;
  height: 35px;
  padding: 0;
  border-radius: 50%;
}
.agentchat-shell--fora-composer .agentchat-send-btn:not(.is-stop),
.agentchat-shell--landing .agentchat-send-btn:not(.is-stop) {
  color: #101b25;
  border: 0;
  background: rgba(255, 255, 255, .91);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 5px 16px rgba(0, 0, 0, .16);
}
.agentchat-shell--fora-composer .agentchat-send-btn:not(.is-stop):hover,
.agentchat-shell--fora-composer .agentchat-send-btn:not(.is-stop):focus-visible,
.agentchat-shell--landing .agentchat-send-btn:not(.is-stop):hover,
.agentchat-shell--landing .agentchat-send-btn:not(.is-stop):focus-visible {
  background: #fff;
  transform: translateY(-1px);
}
.agentchat-shell--fora-composer .agentchat-send-btn svg,
.agentchat-shell--landing .agentchat-send-btn svg { width: 16px; height: 16px; }
.agentchat-shell--landing.is-landing-empty .agentchat-composer-ctx { display: none; }
.agentchat-shell--landing.is-landing-empty .agentchat-landing-caption { display: block; }
.agentchat-shell--landing.is-landing-active .agentchat-landing-caption { display: none; }
.agentchat-shell--landing .agentchat-selection-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 7px;
  scrollbar-width: thin;
}
.agentchat-shell--landing .agentchat-selection-strip > div {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0;
}
.agentchat-shell--landing .agentchat-file-card.task-file-preview {
  width: 178px;
  flex-direction: row;
  padding: 6px 8px;
}
.agentchat-shell--landing .agentchat-file-card .tskp-file-thumb { width: 30px; height: 30px; }
.agentchat-shell--landing .agentchat-file-card .tskp-ico { width: 23px; height: 23px; }
.agentchat-shell--landing .agentchat-file-card .tskp-file-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: left;
}
.agentchat-shell--landing .agentchat-file-card .tskp-file-actions { flex: none; }

.agentchat-shell .agentchat-landing-caption { display: none; }
.agentchat-shell .agentchat-addmenu {
  position: absolute;
  flex-direction: column;
  left: 0;
  bottom: calc(100% + 9px);
  width: min(620px, 100%);
  max-height: min(480px, 62vh);
  overflow: hidden;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(3, 10, 19, .32);
  z-index: 55;
}
.agentchat-shell .agentchat-addmenu-head,
.agentchat-shell .agentchat-addmenu-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.agentchat-shell .agentchat-addmenu-title { flex: 1; font-size: 13px; font-weight: 650; }
.agentchat-shell .agentchat-addmenu-back,
.agentchat-shell .agentchat-addmenu-close {
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ink-mut);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.agentchat-shell .agentchat-addmenu-back:hover,
.agentchat-shell .agentchat-addmenu-close:hover { color: var(--agentchat-accent); background: var(--indigo-soft); }
.agentchat-shell .agentchat-addmenu-search-wrap input {
  flex: 1;
  min-width: 0;
  padding: 3px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}
.agentchat-shell .agentchat-addmenu-body { flex: 1 1 auto; min-height: 0; max-height: 360px; overflow-y: auto; padding: 9px; }
.agentchat-shell .agentchat-addmenu-primary-grid,
.agentchat-shell .agentchat-addmenu-categories,
.agentchat-shell .agentchat-addmenu-file-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.agentchat-shell .agentchat-addmenu-file-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agentchat-shell button.agentchat-addmenu-primary-item,
.agentchat-shell .agentchat-addmenu-file-action,
.agentchat-shell .agentchat-addmenu-category,
.agentchat-shell .agentchat-addmenu-result {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  color: var(--ink);
  text-align: left;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.agentchat-shell button.agentchat-addmenu-primary-item:hover,
.agentchat-shell .agentchat-addmenu-file-action:hover,
.agentchat-shell .agentchat-addmenu-category:hover,
.agentchat-shell .agentchat-addmenu-result:hover { border-color: var(--indigo-bd); background: var(--indigo-soft); }
.agentchat-shell .agentchat-addmenu-primary-item b,
.agentchat-shell .agentchat-addmenu-category b,
.agentchat-shell .agentchat-addmenu-result b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--agentchat-accent);
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  font-size: 11px;
}
.agentchat-shell .agentchat-addmenu-primary-item span,
.agentchat-shell .agentchat-addmenu-result span { min-width: 0; flex: 1; }
.agentchat-shell .agentchat-addmenu-primary-item strong,
.agentchat-shell .agentchat-addmenu-primary-item small,
.agentchat-shell .agentchat-addmenu-file-action strong,
.agentchat-shell .agentchat-addmenu-file-action small,
.agentchat-shell .agentchat-addmenu-result strong,
.agentchat-shell .agentchat-addmenu-result small { display: block; }
.agentchat-shell .agentchat-addmenu-primary-item small,
.agentchat-shell .agentchat-addmenu-file-action small,
.agentchat-shell .agentchat-addmenu-result small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-addmenu-result { width: 100%; margin-bottom: 5px; }
.agentchat-shell .agentchat-addmenu-result i { color: var(--agentchat-accent); font-size: 17px; font-style: normal; }
.agentchat-shell .agentchat-addmenu-empty { padding: 34px 12px; color: var(--ink-dim); text-align: center; }
.agentchat-shell .agentchat-addmenu-cloud-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 2px 9px;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-addmenu-cloud-crumb,
.agentchat-shell .agentchat-addmenu-cloud-connect {
  padding: 5px 8px;
  color: var(--agentchat-accent);
  background: transparent;
  border: 1px solid var(--indigo-bd);
  border-radius: 6px;
  cursor: pointer;
}
.agentchat-shell .agentchat-addmenu-cloud-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.agentchat-shell .agentchat-addmenu-cloud-row:hover { background: var(--indigo-soft); }
.agentchat-shell .agentchat-addmenu-cloud-row i { width: 16px; color: var(--agentchat-accent); }
.agentchat-shell .agentchat-addmenu-cloud-row small { margin-left: auto; color: var(--ink-dim); }
.agentchat-shell .agentchat-addmenu-cloud-row:disabled { opacity: .42; cursor: not-allowed; }

.agentchat-shell .agentchat-welcome-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.agentchat-shell .agentchat-welcome-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mut);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Tool-trace groups (Wave 2, 2026-07-11) -- ported from the original fora  */
/* bar's trace-group UX (Rahul: "I absolutely LOVE the fora tool call       */
/* trace"). Consecutive tool-card rows render as ONE collapsible group: a   */
/* clickable summary ("Ran N tools · Xs total") + a timeline of compact     */
/* per-call nodes (status dot + label + duration). Click a node to reveal   */
/* its in/out excerpt. Expand/collapse is a class toggle + max-height       */
/* transition -- NEVER slideToggle (see the fora recon + jQuery idiom).     */
/* Replaces the old flat .agentchat-toolcard-* strip (superseded).         */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-trace-group {
  align-self: flex-start;
  margin-left: 0;
  max-width: 88%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.agentchat-shell .agentchat-trace-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mut);
  cursor: pointer;
  user-select: none;
}

.agentchat-shell .agentchat-trace-summary:hover {
  background: var(--panel-soft);
}

.agentchat-shell .agentchat-trace-summary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--indigo);
}

.agentchat-shell .agentchat-trace-summary-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron hints expanded/collapsed state -- pure CSS, no extra markup. */
.agentchat-shell .agentchat-trace-summary::after {
  content: '\25BE';
  flex: none;
  font-size: 10px;
  color: var(--ink-dim);
  transition: transform .15s ease;
  transform: rotate(-90deg);
}

.agentchat-shell .agentchat-trace-group.is-expanded .agentchat-trace-summary::after {
  transform: rotate(0deg);
}

.agentchat-shell .agentchat-trace-timeline {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
}

.agentchat-shell .agentchat-trace-group.is-expanded .agentchat-trace-timeline {
  max-height: 9999px !important;
  opacity: 1;
  border-top: 1px solid var(--line);
}

.agentchat-shell .agentchat-trace-node {
  border-bottom: 1px solid var(--line);
}

.agentchat-shell .agentchat-trace-node:last-child {
  border-bottom: none;
}

.agentchat-shell .agentchat-trace-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-size: 11.5px;
  color: var(--ink);
}

/* Only nodes with an in/out excerpt to reveal invite a click. */
.agentchat-shell .agentchat-trace-node.has-io .agentchat-trace-node-header {
  cursor: pointer;
}

.agentchat-shell .agentchat-trace-node.has-io .agentchat-trace-node-header:hover {
  background: var(--panel-soft);
}

.agentchat-shell .agentchat-trace-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--green);
}

.agentchat-shell .agentchat-trace-node[data-status="failure"] .agentchat-trace-node-dot {
  background: var(--red);
}

.agentchat-shell .agentchat-trace-node[data-status="interrupted"] .agentchat-trace-node-dot {
  background: var(--orange-strong);
}

.agentchat-shell .agentchat-trace-node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentchat-shell .agentchat-trace-node-dur {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
}

.agentchat-shell .agentchat-trace-node-io {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  padding: 0 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-mut);
  background: var(--panel-soft);
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}

.agentchat-shell .agentchat-trace-node.is-open .agentchat-trace-node-io {
  max-height: 9999px !important;
  opacity: 1;
  padding: 7px 11px 9px;
}

.agentchat-shell .agentchat-trace-node-io-line {
  word-break: break-word;
  white-space: pre-wrap;
}

.agentchat-shell .agentchat-trace-node-io-line + .agentchat-trace-node-io-line {
  margin-top: 3px;
}

/* Todo card — frozen snapshot of the agent's task list */
.agentchat-shell .agentchat-todocard {
  align-self: flex-start;
  margin-left: 0;
  max-width: 88%;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mut);
  padding: 5px 0;
  margin-top: 10px;
  margin-bottom: 10px;
}
.agentchat-todocard > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; width: fit-content; }
.agentchat-todocard > summary::-webkit-details-marker { display: none; }
.agentchat-todocard > summary .fa-angle-right { transition: transform .15s; }
.agentchat-todocard[open] > summary .fa-angle-right { transform: rotate(90deg); }
.agentchat-todocard-current { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agentchat-todocard-list { border-left: 1px solid var(--line); padding: 8px 0 4px 18px; margin-top: 8px; }
.agentchat-todocard-item { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.agentchat-todocard-item.is-active { color: var(--agentchat-accent, #29abe2); }

.agentchat-shell .agentchat-todocard-item.is-done {
  color: var(--ink-dim);
  text-decoration: line-through;
}

/* Ask panel — the loop paused on a question; next message answers it */
.agentchat-shell .agentchat-ask {
  align-self: flex-start;
  margin-left: 0;
  max-width: 88%;
  padding: 12px 14px;
  border: 1px solid var(--indigo-bd);
  border-radius: 12px;
  background: var(--indigo-soft);
  box-shadow: var(--shadow-sm);
}

.agentchat-shell .agentchat-ask-q {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}

/* Header bar: minimized label + minimize / don't-answer controls */
.agentchat-shell .agentchat-ask-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px 2px 0;
}

.agentchat-shell .agentchat-ask-bar-spacer {
  flex: 1;
}
.agentchat-shell .agentchat-ask-cancel-hint { color: var(--agentchat-muted, #8e9eac); font-size: 11px; white-space: nowrap; margin-right: 8px; }
.agentchat-shell .agentchat-ask-cancel-hint kbd { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; box-shadow: none; }
.agentchat-shell .agentchat-upload-image { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

.agentchat-shell .agentchat-ask-minlabel {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.agentchat-shell .agentchat-ask-min,
.agentchat-shell .agentchat-ask-dismiss {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}

.agentchat-shell .agentchat-ask-min:hover {
  background: #e0e7ff;
  color: var(--indigo);
}

.agentchat-shell .agentchat-ask-dismiss:hover {
  background: #e0e7ff;
  color: var(--red);
}

/* Minimized: collapse to a thin clickable bar carrying the question */
.agentchat-shell .agentchat-ask.minimized {
  padding: 7px 12px;
  cursor: pointer;
}

.agentchat-shell .agentchat-ask.minimized .agentchat-ask-q,
.agentchat-shell .agentchat-ask.minimized .agentchat-ask-options,
.agentchat-shell .agentchat-ask.minimized .agentchat-ask-actions,
.agentchat-shell .agentchat-ask.minimized .agentchat-ask-min {
  display: none;
}

.agentchat-shell .agentchat-ask.minimized .agentchat-ask-bar {
  margin: 0;
}

.agentchat-shell .agentchat-ask.minimized .agentchat-ask-minlabel {
  display: block;
}

/* One row per possible answer (original-fora parity) */
.agentchat-shell .agentchat-ask-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.agentchat-shell .agentchat-ask-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--panel);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.agentchat-shell .agentchat-ask-row:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

.agentchat-shell .agentchat-ask-row.active {
  background: #e0e7ff;
  border-color: var(--indigo);
  box-shadow: inset 0 0 0 1px var(--indigo);
}

.agentchat-shell .agentchat-ask-letter {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.agentchat-shell .agentchat-ask-row.active .agentchat-ask-letter {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.agentchat-shell .agentchat-ask-optlabel {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
  min-width: 0;
}

.agentchat-shell .agentchat-ask-other .agentchat-ask-optlabel {
  color: var(--ink-dim);
  font-style: italic;
}

/* Submit row */
.agentchat-shell .agentchat-ask-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.agentchat-shell .agentchat-ask-submit {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.agentchat-shell .agentchat-ask-submit[disabled] {
  opacity: .45;
  cursor: default;
}

/* Error row */
.agentchat-shell .agentchat-errorrow {
  align-self: flex-start;
  margin-left: 0;
  max-width: 88%;
  padding: 8px 12px;
  border: 1px solid var(--orange-bd);
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 12px;
  line-height: 1.5;
}

.agentchat-shell .agentchat-error-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agentchat-shell .agentchat-error-text {
  flex: 1;
  min-width: 0;
}

.agentchat-shell .agentchat-error-copy,
.agentchat-shell .agentchat-error-details-toggle,
.agentchat-shell .agentchat-error-report {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  color: var(--text-dim);
}

.agentchat-shell .agentchat-error-copy:hover,
.agentchat-shell .agentchat-error-copy:focus-visible,
.agentchat-shell .agentchat-error-details-toggle:hover,
.agentchat-shell .agentchat-error-details-toggle:focus-visible {
  color: inherit;
  outline: none;
}

.agentchat-shell .agentchat-error-report:hover,
.agentchat-shell .agentchat-error-report:focus-visible {
  background: rgba(176, 48, 48, .12);
  outline: none;
}

.agentchat-shell .agentchat-error-copy svg,
.agentchat-shell .agentchat-error-details-toggle svg,
.agentchat-shell .agentchat-error-report svg {
  display: block;
  width: 16px;
  height: 16px;
}

.agentchat-shell .agentchat-error-details {
  max-width: min(760px, 76vw);
  max-height: 320px;
  margin: 7px 0 2px;
  padding: 9px 10px;
  overflow: auto;
  border-radius: 7px;
  background: rgba(14, 22, 31, .28);
  color: var(--text-dim);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Typing indicator */
.agentchat-shell .agentchat-typing .agentchat-bubble {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 12px 14px;
}

.agentchat-shell--constellation .agentchat-typing .agentchat-bubble.has-constellation {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.agentchat-shell .agentchat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
  animation: agentchat-typing-bounce 1.2s infinite ease-in-out;
}

.agentchat-shell .agentchat-typing-dot:nth-child(2) { animation-delay: .15s; }
.agentchat-shell .agentchat-typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes agentchat-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.agentchat-shell .agentchat-typing-constellation {
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--agentchat-accent);
}

.agentchat-shell .agentchat-typing-constellation canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.agentchat-shell .agentchat-typing-constellation[data-state="stopping"] {
  color: var(--agentchat-danger);
}

.agentchat-shell .agentchat-thinking-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  white-space: nowrap;
}

.agentchat-shell .agentchat-thinking-label,
.agentchat-work-group .agentchat-trace-node[data-status="running"] .agentchat-trace-node-label {
  color: transparent;
  background: linear-gradient(100deg,
    var(--ink-dim) 0%, var(--ink-dim) 24%,
    var(--agentchat-accent) 42%, #d3f6ff 50%,
    var(--agentchat-accent) 58%, var(--ink-dim) 76%, var(--ink-dim) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: agentchat-thinking-text 1.55s ease-in-out infinite;
}

@keyframes agentchat-thinking-text {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.agentchat-shell--constellation .agentchat-typing.is-output-active .agentchat-thinking-copy {
  display: none;
}

.agentchat-shell--constellation .agentchat-msg--agent {
  position: relative;
}

.agentchat-shell--constellation .agentchat-msg--user {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.agentchat-shell--constellation .agentchat-msg.agentchat-msg--agent:not(.agentchat-typing) {
  display: block;
}

.agentchat-shell .agentchat-response-actions {
  display: flex;
  gap: 4px;
  margin-top: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.agentchat-shell--constellation .agentchat-msg:hover .agentchat-response-actions,
.agentchat-shell--constellation .agentchat-msg:focus-within .agentchat-response-actions,
.agentchat-shell--constellation .agentchat-msg--agent.is-latest-response .agentchat-response-actions {
  opacity: 1;
  pointer-events: auto;
}

.agentchat-shell .agentchat-response-actions button {
  border: 0;
  border-radius: 5px;
  width: 32px;
  height: 32px;
  padding: 8px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}

.agentchat-shell .agentchat-response-actions button svg {
  display: block;
  width: 100%;
  height: 100%;
}

.agentchat-shell .agentchat-response-info-panel {
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 4px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 12px;
}
.agentchat-shell .agentchat-response-info-panel > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; }
.agentchat-shell .agentchat-response-info-panel small { display: block; margin-top: 8px; color: var(--ink-dim); line-height: 1.4; }

.agentchat-shell .agentchat-msg--user .agentchat-response-actions {
  justify-content: flex-end;
}

.agentchat-shell .agentchat-user-edit-save,
.agentchat-shell .agentchat-user-edit-cancel,
.agentchat-shell .agentchat-msg--user.is-editing .agentchat-message-copy,
.agentchat-shell .agentchat-msg--user.is-editing .agentchat-user-edit {
  display: none;
}

.agentchat-shell .agentchat-msg--user.is-editing .agentchat-user-edit-save,
.agentchat-shell .agentchat-msg--user.is-editing .agentchat-user-edit-cancel {
  display: inline-flex;
}

.agentchat-shell .agentchat-user-edit-input {
  width: min(420px, 68vw);
  min-height: 76px;
  resize: vertical;
  border: 1px solid rgba(41, 171, 226, .45);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(10, 21, 32, .72);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.agentchat-shell .agentchat-user-edit-input.is-invalid {
  border-color: var(--agentchat-danger);
}

.agentchat-shell .agentchat-response-actions button:hover,
.agentchat-shell .agentchat-response-actions button:focus-visible {
  background: rgba(41, 171, 226, .1);
  color: var(--agentchat-accent);
  outline: none;
}

.agentchat-shell .agentchat-response-actions .agentchat-response-export.is-downloaded {
  color: var(--green);
}

.agentchat-shell .agentchat-response-orb {
  display: block;
  width: 38px;
  height: 38px;
  margin-top: 7px;
  opacity: 1;
}

.agentchat-shell .agentchat-response-orb canvas {
  display: block;
  width: 38px;
  height: 38px;
}

/* Live progress strip (14-B2) -- replaces the dots once the first poll lands */
.agentchat-shell .agentchat-typing .agentchat-bubble.has-progress {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 220px;
}

.agentchat-shell .agentchat-typing .agentchat-bubble.has-progress.has-constellation {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
}

.agentchat-shell .agentchat-typing .agentchat-bubble.has-progress .agentchat-typing-dot {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .agentchat-shell--landing.is-landing-empty .agentchat-welcome-avatar { transition: none; }
  .agentchat-shell .agentchat-typing-constellation { opacity: .82; }
  .agentchat-shell .agentchat-thinking-label {
    animation: none;
    background: none;
    color: var(--ink-dim);
    -webkit-text-fill-color: var(--ink-dim);
  }
}

.agentchat-shell .agentchat-progress {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.agentchat-shell .agentchat-progress-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.agentchat-shell .agentchat-progress-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange-strong);
  animation: agentchat-progress-pulse 1.4s infinite ease-in-out;
  flex: none;
}

@keyframes agentchat-progress-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.agentchat-shell .agentchat-progress-label strong {
  color: var(--ink);
  font-weight: 600;
}

.agentchat-shell .agentchat-progress-iter {
  margin-left: auto;
  padding-left: 10px;
  font-size: 10.5px;
  color: var(--ink-mut);
  white-space: nowrap;
}

.agentchat-shell .agentchat-progress-row {
  font-size: 11px;
  color: var(--ink-mut);
}

.agentchat-shell .agentchat-progress-row.is-error {
  color: var(--red);
}

.agentchat-shell .agentchat-progress-mark {
  display: inline-block;
  width: 12px;
  color: var(--green);
}

.agentchat-shell .agentchat-progress-row.is-error .agentchat-progress-mark {
  color: inherit;
}

/* 14-B3.2: live token ticker -- the in-flight assistant message streaming in */
.agentchat-shell .agentchat-progress-streamtext {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 7.5em;
  overflow: hidden;
}

/* 14-B3.0: Stop button on the live strip + the post-interrupt marker row */
.agentchat-shell .agentchat-progress-stop {
  margin-left: auto;
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 10.5px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.agentchat-shell .agentchat-progress-iter + .agentchat-progress-stop {
  margin-left: 8px;
}

.agentchat-shell .agentchat-progress-stop:hover:not([disabled]) {
  color: var(--red);
  border-color: var(--red);
}

.agentchat-shell .agentchat-progress-stop[disabled] {
  opacity: .55;
  cursor: default;
}

.agentchat-shell .agentchat-stoprow,
.agentchat-shell .agentchat-decision-action {
  align-self: flex-start;
  margin-left: 0;
  font-size: 11px;
  color: var(--ink-mut);
  font-style: italic;
}

/* Busy composer */
.agentchat-shell .agentchat-composer-box.is-busy {
  opacity: .6;
  pointer-events: none;
}

.agentchat-shell--constellation .agentchat-composer-box.is-busy {
  opacity: 1;
  pointer-events: auto;
}

/* Optimistic user bubble (pre-server-echo) */
.agentchat-shell .agentchat-msg--optimistic {
  opacity: .7;
}

/* Conversation id in the ctx strip */
.agentchat-shell .agentchat-ctx-conv {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  align-self: center;
}

/* ------------------------------------------------------------------ */
/* Skeleton shimmer (chat-loading skeleton; also reused by a           */
/* subclass's own skeleton cards, e.g. Fora's history-list skeleton)   */
/* ------------------------------------------------------------------ */

@keyframes agentchat-shimmer {
  0%   { background-position: -260px 0; }
  100% { background-position: 260px 0; }
}

.agentchat-shell .agentchat-skel-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--line) 25%, var(--panel-soft) 50%, var(--line) 75%);
  background-size: 520px 100%;
  animation: agentchat-shimmer 1.2s infinite linear;
}

.agentchat-shell .agentchat-skel-bar + .agentchat-skel-bar { margin-top: 7px; }

.agentchat-shell .agentchat-skel-bar--dim { opacity: .55; }

/* Chat-window loading skeleton (existing conversation being fetched). */
.agentchat-shell .agentchat-chatloading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.agentchat-shell .agentchat-skelmsg {
  display: flex;
  gap: 11px;
  max-width: 78%;
}

.agentchat-shell .agentchat-skelmsg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.agentchat-shell .agentchat-skelmsg:not(.agentchat-skelmsg--user) {
  width: 100%;
  max-width: 100%;
}

.agentchat-shell .agentchat-skel-bubble {
  flex: 1;
  min-width: 120px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
}

.agentchat-shell .agentchat-skelmsg:not(.agentchat-skelmsg--user) .agentchat-skel-bubble {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.agentchat-shell .agentchat-skelmsg--user .agentchat-skel-bubble {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}

/* ------------------------------------------------------------------ */
/* Rendered markdown inside bubbles (AgentMessageRenderer output)     */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-bubble h1:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h2:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h3:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h4:not(.agentchat-entity-slot *) {
  margin: 14px 0 6px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 700;
}

.agentchat-shell .agentchat-bubble h1:first-child:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h2:first-child:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h3:first-child:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble h4:first-child:not(.agentchat-entity-slot *) {
  margin-top: 0;
}

.agentchat-shell .agentchat-bubble p:not(.agentchat-entity-slot *) {
  margin: 0 0 8px;
}

.agentchat-shell .agentchat-bubble p:last-child:not(.agentchat-entity-slot *) {
  margin-bottom: 0;
}

.agentchat-shell .agentchat-bubble strong:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble a:not(.agentchat-entity-slot *) {
  color: var(--agentchat-accent);
}

.agentchat-shell .agentchat-bubble a:not(.agentchat-entity-slot *) {
  text-decoration-color: var(--agentchat-accent);
  text-underline-offset: 2px;
}

.agentchat-shell .agentchat-bubble em:not(.agentchat-entity-slot *) {
  color: var(--ink-mut);
}

.agentchat-shell .agentchat-bubble ul:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble ol:not(.agentchat-entity-slot *) {
  margin: 6px 0 10px;
  padding-left: 20px;
}

.agentchat-shell .agentchat-bubble ul:not(.agentchat-entity-slot *) { list-style: disc outside; }
.agentchat-shell .agentchat-bubble ol:not(.agentchat-entity-slot *) { list-style: decimal outside; }

.agentchat-shell .agentchat-bubble li:not(.agentchat-entity-slot *) {
  display: list-item;
  margin-bottom: 3px;
}

.agentchat-shell .agentchat-bubble code:not(.agentchat-entity-slot *) {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--agentchat-accent);
}

.agentchat-shell .agentchat-bubble pre:not(.agentchat-entity-slot *) {
  position: relative;
  margin: 8px 0;
  padding: 12px 32px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--agentchat-code-bg);
  overflow-x: auto;
}

.agentchat-shell .agentchat-bubble pre[data-language]:not(.agentchat-entity-slot *) {
  padding-top: 30px;
}

.agentchat-shell .agentchat-bubble pre[data-language]:not(.agentchat-entity-slot *)::before {
  content: attr(data-language);
  position: absolute;
  top: 9px;
  left: 14px;
  color: #91a4ba;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.agentchat-shell .agentchat-bubble pre code:not(.agentchat-entity-slot *) {
  background: none;
  border: none;
  padding: 0;
  color: #e2e8f0;
  font-size: 11.5px;
  line-height: 1.6;
}

.agentchat-shell .agentchat-bubble blockquote:not(.agentchat-entity-slot *) {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--agentchat-accent);
  color: var(--ink-mut);
  font-style: italic;
}

.agentchat-shell .agentchat-bubble table:not(.agentchat-entity-slot *) {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.agentchat-shell .agentchat-bubble th:not(.agentchat-entity-slot *),
.agentchat-shell .agentchat-bubble td:not(.agentchat-entity-slot *) {
  border: 1px solid var(--line);
  padding: 5px 9px;
  text-align: left;
}

.agentchat-shell .agentchat-bubble th:not(.agentchat-entity-slot *) {
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Table wrap (responsive scroll for wide tables)                    */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
}

.agentchat-shell .agentchat-table-wrap table {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Copy button (per rendered <pre>)                                   */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10.5px;
  font-family: inherit;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}

.agentchat-shell .agentchat-copy-btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .32);
}

.agentchat-shell .agentchat-copy-btn.is-copied {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.agentchat-shell .agentchat-copy-btn.is-copy-failed {
  background: var(--agentchat-danger);
  border-color: var(--agentchat-danger);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Via-chip on the live token ticker (streaming_agent prefix, when a  */
/* delegated sub-agent's text is streaming rather than the agent's own) */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-progress-streamvia {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 10px;
  font-style: italic;
  font-family: inherit;
  white-space: nowrap;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Welcome hero entrance -- staggered fade+rise on avatar -> title ->  */
/* sub -> suggestion buttons. display:none -> block (the welcome block */
/* is re-shown via jQuery .show() after a conversation clear) restarts */
/* these animations, which is the desired behavior -- no JS needed.    */
/* ------------------------------------------------------------------ */

@keyframes agentchat-welcome-fade-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agentchat-shell .agentchat-welcome-avatar,
.agentchat-shell .agentchat-welcome-title,
.agentchat-shell .agentchat-welcome-sub,
.agentchat-shell .agentchat-fora-suggestions {
  animation: agentchat-welcome-fade-rise 350ms ease-out backwards;
}

.agentchat-shell .agentchat-welcome-avatar { animation-delay: 0ms; }
.agentchat-shell .agentchat-welcome-title  { animation-delay: 70ms; }
.agentchat-shell .agentchat-welcome-sub    { animation-delay: 140ms; }
.agentchat-shell .agentchat-fora-suggestions     { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .agentchat-shell .agentchat-welcome-avatar,
  .agentchat-shell .agentchat-welcome-title,
  .agentchat-shell .agentchat-welcome-sub,
  .agentchat-shell .agentchat-fora-suggestions {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Entity chips (Wave 3, 2026-07-11) -- inline references to a concrete */
/* d3VIEW entity, rendered from an agent's [[entity:...]] token, an     */
/* inline-render "Open full" fallback, or an auto-citation row. Click   */
/* -> EventBus entity:open (open-as-tab).                               */
/* ------------------------------------------------------------------ */

.agentchat-shell .agentchat-ent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.agentchat-shell .agentchat-ent-chip:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* Auto-citations row ("Looked at: <chip> <chip> ...") under an answer bubble */
.agentchat-shell .agentchat-citations {
  align-self: flex-start;
  flex-shrink: 0;
  margin-left: 0;
  max-width: 88%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mut);
}

.agentchat-shell .agentchat-citations > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.agentchat-shell .agentchat-citations-label {
  font-style: italic;
}

/* Artifact downloads row ("Files: <link> <link> ...") under an answer bubble.
   Same alignment/metrics as the citations row above; a link rather than a chip
   because it navigates to bytes instead of opening a workspace tab. */
.agentchat-shell .agentchat-artifacts {
  align-self: flex-start;
  margin-left: 0;
  max-width: 88%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mut);
}

.agentchat-shell .agentchat-artifacts-label {
  font-style: italic;
}

.agentchat-shell .agentchat-artifact-chip {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--indigo);
  font-size: 11px;
  line-height: 1.5;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentchat-shell .agentchat-artifact-chip:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
  text-decoration: none;
}

.agentchat-shell .agentchat-artifacts-more {
  font-style: italic;
  color: var(--ink-dim);
}

/* Inline render slots ([[render:...]] tokens) -- block spacing while empty
   (before postProcess mounts anything, or when no resolver is wired) and
   while holding a mounted .agentchat-iv-card (InlineViewers). */
.agentchat-shell .agentchat-render-slot {
  display: block;
  margin: 8px 0;
}

.agentchat-shell .agentchat-render-unavailable {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed var(--line-hi);
  border-radius: 8px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-dim);
  background: var(--panel-soft);
}

/* ------------------------------------------------------------------ */
/* Conversation history overlay (BLOCKER 2b — ported from the FORA bar */
/* into this self-contained plugin so the History toolbar button has   */
/* real styling here, not only inside modelassembler). Rows carry both */
/* .agentchat-card and .agentchat-fora-history-item; skeleton atoms     */
/* (@keyframes agentchat-shimmer + .agentchat-skel-bar) already live    */
/* above and are reused. Navy/white/grey tokens from .agentchat-shell.  */
/* ------------------------------------------------------------------ */
.agentchat-shell .agentchat-fora-history {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Grouped panel: the head carries only the sidebar toggle, at the same
   top-left spot the toolbar's sits at when the panel is shut. */
.agentchat-shell .agentchat-history-head--toggle { justify-content: flex-start; height: 44px; padding: 0 6px; border-bottom: 0; }
.agentchat-shell .agentchat-history-head--toggle .agentchat-fora-history-title { display: none; }
.agentchat-shell .agentchat-history-head--toggle .agentchat-fora-history-close {
  order: -1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 0;
  border-radius: 7px;
}
.agentchat-shell .agentchat-history-head--toggle .agentchat-fora-history-close svg { width: 16px; height: 16px; }
.agentchat-shell .agentchat-history-head--toggle .agentchat-fora-history-close.agentchat-active { color: var(--agentchat-accent, var(--indigo)); }
.agentchat-shell .agentchat-fora-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.agentchat-shell .agentchat-fora-history-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.agentchat-shell .agentchat-fora-history-close {
  border: none;
  background: none;
  color: var(--ink-mut);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.agentchat-shell .agentchat-fora-history-close:hover {
  color: var(--ink);
  background: var(--panel-soft);
}
.agentchat-shell .agentchat-fora-history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.agentchat-shell .agentchat-history-tools { flex: none; padding: 8px 10px; }
/* New / Artifacts live in the panel on the app-wide surface; Settings is
   appended into .agentchat-history-foot by the FORA host. */
.agentchat-shell .agentchat-history-actions { flex: none; padding: 8px 7px 2px; }
.agentchat-shell .agentchat-history-foot { flex: none; padding: 4px 7px 7px; border-top: 1px solid var(--line); }
.agentchat-shell .agentchat-history-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.agentchat-shell .agentchat-history-action:hover { background: var(--panel-soft); }
.agentchat-shell .agentchat-history-action > i { width: 15px; flex: none; color: var(--ink-dim); text-align: center; }
.agentchat-shell .agentchat-history-action > svg { width: 15px; height: 15px; flex: none; color: var(--ink-dim); }
.agentchat-shell .agentchat-history-action:hover > svg { color: var(--agentchat-accent, var(--indigo)); }
.agentchat-shell .agentchat-history-action:hover > i { color: var(--agentchat-accent, var(--indigo)); }
/* Session state. Blue pulses while a turn runs, green when it finished, red for
   anything that needs the user -- a pending ask or a failure read the same. */
/* ---- Artifacts as a page -------------------------------------------- */
/* On the app-wide surface artifacts take over the conversation area and sit
   BESIDE the conversations panel, rather than replacing it. */
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page {
  position: absolute;
  inset: 0 0 0 0;
  width: auto;
  max-width: none;
  transform: none;
  pointer-events: auto;
  z-index: 65;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
  display: flex;
  flex-direction: column;
  border-right: 0;
  color-scheme: light;
  --panel: #ffffff;
  --panel-soft: #f6f7f9;
  --ink: #1f2933;
  --ink-mut: #4b5563;
  --ink-dim: #6b7280;
  --line: #e2e5ea;
  --line-hi: #c9ced6;
  --indigo: #2a6fb8;
  --indigo-soft: #e8f0fa;
  --indigo-bd: #bcd4ec;
  background: #f6f7f9;
  color: var(--ink);
}
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease;
}
.agentchat-shell.agentchat-shell--landing.has-navigation-panel .agentchat-artpanel--page { left: var(--agentchat-navigation-width); }
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page .agentchat-artpanel-list,
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page .agentchat-artpanel-tools {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page .agentchat-artpanel-tools { flex-wrap: nowrap; }
.agentchat-shell.agentchat-shell--landing .agentchat-artpanel--page .agentchat-artpanel-search {
  flex: 1 1 auto;
  width: auto;
  order: 0;
}
.agentchat-shell .agentchat-artpanel-make { flex: none; max-width: 1080px; width: 100%; margin: 0 auto; padding: 18px 16px 4px; box-sizing: border-box; }
.agentchat-shell .agentchat-artpanel-make h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-dim); }
.agentchat-shell .agentchat-artpanel-starters { display: flex; flex-wrap: wrap; gap: 10px; }
.agentchat-shell .agentchat-artpanel-starter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 158px;
  flex: 0 1 190px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.agentchat-shell .agentchat-artpanel-starter:hover { border-color: var(--indigo-bd); background: var(--indigo-soft, var(--panel-soft)); }
.agentchat-shell .agentchat-artpanel-starter svg { width: 22px; height: 22px; margin-bottom: 7px; color: var(--agentchat-accent, var(--indigo)); }
.agentchat-shell .agentchat-artpanel-starter b { font-size: 12.5px; font-weight: 600; }
.agentchat-shell .agentchat-artpanel-starter small { color: var(--ink-dim); font-size: 11px; }
.agentchat-shell .agentchat-artpanel-sort {
  flex: none;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-size: 11.5px;
}
.agentchat-shell .agentchat-artpanel-daygroup {
  padding: 14px 4px 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-artpanel-format {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-dim);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.agentchat-shell .agentchat-history-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-hi, var(--line));
}
.agentchat-shell .agentchat-history-dot.is-running {
  background: var(--agentchat-accent, var(--indigo));
  box-shadow: 0 0 0 0 var(--indigo-soft);
  animation: agentchatHistoryPulse 1.6s ease-out infinite;
}
.agentchat-shell .agentchat-history-dot.is-complete { background: var(--green, #2f7d4f); box-shadow: none; }
.agentchat-shell .agentchat-history-dot.is-blocked { background: var(--red, #dc2626); box-shadow: none; }
@keyframes agentchatHistoryPulse {
  0%   { box-shadow: 0 0 0 0 var(--indigo-soft); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .agentchat-shell .agentchat-history-dot.is-running { animation: none; }
}
.agentchat-shell .agentchat-history-section {
  flex: none;
  padding: 2px 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-history-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  width: 100%;
  margin-top: 2px;
  padding: 5px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.agentchat-shell .agentchat-history-group:hover { background: var(--panel-soft); color: var(--ink); }
.agentchat-shell .agentchat-history-group > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentchat-shell .agentchat-history-group > small { margin-left: auto; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.agentchat-shell .agentchat-history-group .fa-chevron-down { flex: none; font-size: 9px; transition: transform .15s ease; }
.agentchat-shell .agentchat-history-group.is-collapsed .fa-chevron-down { transform: rotate(-90deg); }
.agentchat-shell .agentchat-fora-history-item { position: relative; }
.agentchat-shell .agentchat-history-more {
  flex: none;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  visibility: hidden;
}
.agentchat-shell .agentchat-fora-history-item:hover .agentchat-history-more,
.agentchat-shell .agentchat-history-more[aria-expanded="true"] { visibility: visible; }
.agentchat-shell .agentchat-history-more:hover { background: var(--panel-soft); color: var(--ink); }
.agentchat-shell .agentchat-history-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 4px);
  right: 6px;
  min-width: 132px;
  padding: 4px;
  border: 1px solid var(--line-hi, var(--line));
  border-radius: 9px;
  background: var(--panel, #fff);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.agentchat-shell .agentchat-history-menu[hidden] { display: none; }
.agentchat-shell .agentchat-history-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  visibility: visible;
}
.agentchat-shell .agentchat-history-menu button:hover { background: var(--panel-soft); }
.agentchat-shell .agentchat-history-menu .agentchat-fora-history-del { font-size: 12px; padding: 6px 8px; }
.agentchat-shell .agentchat-history-menu .agentchat-fora-history-del:hover { color: var(--red, #dc2626); }
.agentchat-shell .agentchat-history-search { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); }
.agentchat-shell .agentchat-history-bulk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.agentchat-shell .agentchat-history-bulk button { border: 0; background: transparent; color: var(--ink-dim); padding: 4px; font-size: 11px; }
.agentchat-shell .agentchat-history-bulk button:disabled { opacity: .45; cursor: default; }
.agentchat-shell .agentchat-history-status { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.agentchat-shell .agentchat-history-select { flex: none; margin: 0 7px 0 0; accent-color: var(--agentchat-accent); }
.agentchat-shell .agentchat-history-pin { flex: none; padding: 4px; border: 0; background: transparent; color: var(--ink-dim); }
.agentchat-shell .agentchat-history-pin svg { display: block; width: 15px; height: 15px; }
.agentchat-shell .agentchat-history-pin[aria-pressed="true"] { color: var(--agentchat-accent); }
.agentchat-shell .agentchat-history-pin:disabled { opacity: .45; }
.agentchat-shell .agentchat-fora-history-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-fora-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.agentchat-shell .agentchat-fora-history-item:hover {
  background: var(--panel-soft);
  border-color: var(--line);
}
.agentchat-shell .agentchat-fora-history-item.agentchat-active {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft, var(--panel-soft));
}
.agentchat-shell .agentchat-fora-history-item-main {
  flex: 1;
  min-width: 0;
}
.agentchat-shell .agentchat-fora-history-item-name {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agentchat-shell .agentchat-fora-history-item-meta {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.agentchat-shell .agentchat-fora-history-del {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
  visibility: hidden;
}
.agentchat-shell .agentchat-fora-history-item:hover .agentchat-fora-history-del {
  visibility: visible;
}
.agentchat-shell .agentchat-fora-history-del:hover {
  color: var(--red, #dc2626);
  background: var(--panel-soft);
}
.agentchat-shell .agentchat-fora-history-del.agentchat-confirm {
  visibility: visible;
  color: #fff;
  background: var(--red, #dc2626);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
}
.agentchat-shell .agentchat-fora-history-skel { padding: 13px 12px; }
.agentchat-shell .agentchat-fora-history-item.agentchat-card {
  border: 1px solid var(--line);
}
.agentchat-shell .agentchat-fora-history-item.agentchat-card:hover {
  border-color: var(--line-hi);
  background: var(--panel-soft);
}
.agentchat-shell .agentchat-fora-history-item.agentchat-card.agentchat-active {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft, var(--panel-soft));
}

/* ------------------------------------------------------------------ */
/* Artifacts panel — files the agent saved (reports, charts, datasets).*/
/* Same full-bleed overlay geometry as .agentchat-fora-history so the  */
/* two toolbar panels behave identically; rows reuse .agentchat-card   */
/* and the .agentchat-skel-bar shimmer atoms defined above.            */
/* ------------------------------------------------------------------ */
.agentchat-shell .agentchat-artpanel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.agentchat-shell .agentchat-artpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.agentchat-shell .agentchat-artpanel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.agentchat-shell .agentchat-artpanel-close {
  border: none;
  background: none;
  color: var(--ink-mut);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.agentchat-shell .agentchat-artpanel-close:hover {
  color: var(--ink);
  background: var(--panel-soft);
}

/* Scope toggle + search */
.agentchat-shell .agentchat-artpanel-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.agentchat-shell .agentchat-artpanel-scope {
  display: inline-flex;
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex: none;
}
.agentchat-shell .agentchat-artpanel-scope-btn {
  border: none;
  background: transparent;
  color: var(--ink-dim);
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.agentchat-shell .agentchat-artpanel-scope-btn:hover { color: var(--ink); }
.agentchat-shell .agentchat-artpanel-scope-btn.agentchat-active {
  background: var(--panel);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.agentchat-shell .agentchat-artpanel-search {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  padding: 5px 9px;
  outline: none;
}
.agentchat-shell .agentchat-artpanel-search:focus { border-color: var(--indigo-bd); }

/* List + rows */
.agentchat-shell .agentchat-artpanel-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.agentchat-shell .agentchat-artpanel-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-artpanel-skel { padding: 13px 12px; }
.agentchat-shell .agentchat-artpanel-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.agentchat-shell .agentchat-artpanel-item:hover {
  border-color: var(--line-hi);
  background: var(--panel-soft);
}
.agentchat-shell .agentchat-artpanel-type {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--indigo-soft, var(--panel-soft));
  color: var(--navy);
}
.agentchat-shell .agentchat-artpanel-type > svg { width: 15px; height: 15px; }
.agentchat-shell .agentchat-artpanel-type[data-type="image"] { background: #e8daef; color: #6c3483; }
.agentchat-shell .agentchat-artpanel-type[data-type="report"],
.agentchat-shell .agentchat-artpanel-type[data-type="file"]  { background: #fef3cd; color: #856404; }
.agentchat-shell .agentchat-artpanel-type[data-type="dataset"],
.agentchat-shell .agentchat-artpanel-type[data-type="json"]  { background: #d1ecf1; color: #0c5460; }
.agentchat-shell .agentchat-artpanel-type[data-type="curve"] { background: #d4edda; color: #155724; }
.agentchat-shell .agentchat-artpanel-item-main { flex: 1; min-width: 0; }
.agentchat-shell .agentchat-artpanel-item-name {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agentchat-shell .agentchat-artpanel-item-meta {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Always visible, deliberately NOT hover-revealed like the history panel's
   delete button. There, hiding is right: delete is destructive and secondary.
   Here Download IS the reason the panel exists, and hover-to-discover would
   also put it out of reach on touch. */
.agentchat-shell .agentchat-artpanel-actions {
  flex: none;
  display: inline-flex;
  gap: 4px;
}
.agentchat-shell .agentchat-artpanel-act {
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mut);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.agentchat-shell .agentchat-artpanel-act:hover {
  color: var(--navy);
  background: var(--indigo-soft, var(--panel-soft));
  border-color: var(--indigo-bd);
  text-decoration: none;
}
.agentchat-shell .agentchat-artpanel-act--dl { color: var(--navy); border-color: var(--indigo-bd); }

/* -------------------------------------------------------------------------
   Artifacts panel -- filter facets.

   Deliberately mirrors the home page's filter chrome (hamburger button, count
   badge, sectioned dropdown, checkbox facets, Clear footer) so the gesture is
   the same one users already know. The tokens differ because agentchat has no
   --panel-hover/--shadow: neutral hover is --panel-soft, accented is
   --indigo-soft + --navy, and the shadow token is --shadow-sm.
   ------------------------------------------------------------------------- */
.agentchat-shell .agentchat-artpanel-filter {
  position: relative;
  flex: none;
}
.agentchat-shell .agentchat-artpanel-filter-btn {
  position: relative;
  height: 27px;
  width: 27px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
.agentchat-shell .agentchat-artpanel-filter-btn svg { width: 13px; height: 13px; }
.agentchat-shell .agentchat-artpanel-filter-btn:hover {
  background: var(--panel-soft);
  color: var(--ink);
}
.agentchat-shell .agentchat-artpanel-filter-btn.agentchat-active,
.agentchat-shell .agentchat-artpanel-filter-btn.agentchat-open {
  background: var(--indigo-soft);
  color: var(--navy);
  border-color: var(--indigo-bd);
}
.agentchat-shell .agentchat-artpanel-filter-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}

/* Dropdown */
.agentchat-shell .agentchat-artpanel-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;              /* above the panel body, which is z-index 5 */
  min-width: 190px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 5px;
}
.agentchat-shell .agentchat-artpanel-menu-sec { padding: 3px 0; }
.agentchat-shell .agentchat-artpanel-menu-sec + .agentchat-artpanel-menu-sec {
  border-top: 1px solid var(--line);
  margin-top: 3px;
}
.agentchat-shell .agentchat-artpanel-menu-h {
  padding: 5px 9px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-artpanel-menu-empty {
  padding: 4px 9px 7px;
  font-size: 11.5px;
  color: var(--ink-dim);
}
.agentchat-shell .agentchat-artpanel-menu-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  padding: 6px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: background .12s;
}
.agentchat-shell .agentchat-artpanel-menu-opt:hover { background: var(--panel-soft); }
.agentchat-shell .agentchat-artpanel-menu-opt.agentchat-on { font-weight: 600; }
.agentchat-shell .agentchat-artpanel-check {
  flex: none;
  width: 13px;
  color: var(--navy);
  font-size: 11px;
}
.agentchat-shell .agentchat-artpanel-cb {
  flex: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  position: relative;
  transition: border-color .12s, background .12s;
}
.agentchat-shell .agentchat-artpanel-cb.agentchat-checked {
  border-color: var(--navy);
  background: var(--navy);
}
.agentchat-shell .agentchat-artpanel-cb.agentchat-checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 3px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.agentchat-shell .agentchat-artpanel-menu-foot {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding: 5px 4px 2px;
}
.agentchat-shell .agentchat-artpanel-filter-clear {
  width: 100%;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-mut);
  background: none;
  border: none;
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.agentchat-shell .agentchat-artpanel-filter-clear:hover:not([disabled]) {
  background: var(--panel-soft);
  color: var(--ink);
}
.agentchat-shell .agentchat-artpanel-filter-clear[disabled] { opacity: .4; cursor: default; }

/* The same control offered inside the "filters excluded everything" empty
   state, where it needs to read as a button rather than a menu footer row. */
.agentchat-shell .agentchat-artpanel-empty-clear {
  display: inline-block;
  width: auto;
  margin: 9px auto 0;
  padding: 5px 12px;
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--navy);
}

/* ------------------------------------------------------------------ */
/* @ mention picker + reference tray (app-wide entity references).      */
/* The composer is position:relative's anchor for the picker, which     */
/* floats ABOVE the input so it never pushes the transcript around.     */
/* ------------------------------------------------------------------ */
.agentchat-shell .agentchat-composer {
  position: relative;
}

.agentchat-shell.agentchat-shell--fora-composer:not(.agentchat-shell--landing) .agentchat-composer {
  align-self: center;
  width: min(900px, calc(100% - 32px));
  padding-inline: 0;
}

.agentchat-shell.agentchat-shell--landing .agentchat-composer {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: min(900px, calc(100% - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  z-index: 20;
}
.agentchat-shell.agentchat-shell--landing .agentchat-chat { padding-bottom: var(--agentchat-composer-space, 110px); }
.agentchat-shell--landing.is-landing-empty:not(.has-landing-context) .agentchat-composer { bottom: auto; }
.agentchat-shell--landing .agentchat-composer-glass,
.agentchat-shell .agentchat-ask--composer,
.agentchat-shell--landing .agentchat-addsurface,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-goal-strip,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-shelf-popup {
  background: rgba(25, 40, 55, .58);
  border: 1px solid rgba(221, 243, 252, .16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
  backdrop-filter: blur(20px) saturate(1.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .105), inset 0 -1px 0 rgba(255, 255, 255, .025), 0 14px 38px rgba(5, 14, 23, .18);
}
.agentchat-shell.agentchat-shell--fora-composer .agentchat-goal-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px -6px;
  padding: 10px 14px 15px;
  border-radius: 16px 16px 0 0;
  color: var(--ink-dim);
  font-size: 13px;
}
.agentchat-shell .agentchat-goal-strip[hidden],
.agentchat-shell .agentchat-goal-strip [hidden] { display: none; }
.agentchat-shell .agentchat-goal-strip button {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.agentchat-shell .agentchat-goal-strip button:focus-visible { outline: 1px solid var(--agentchat-accent); outline-offset: 3px; }
.agentchat-shell .agentchat-goal-strip button:disabled { opacity: .5; cursor: default; }
.agentchat-shell .agentchat-goal-strip .agentchat-goal-strip-summary { flex: 1; min-width: 0; text-align: left; }
.agentchat-shell .agentchat-goal-status { color: var(--ink); }
.agentchat-shell .agentchat-goal-count { margin-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.agentchat-shell .agentchat-goal-reason { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.agentchat-shell .agentchat-goal-strip .agentchat-goal-control,
.agentchat-shell .agentchat-goal-strip .agentchat-goal-edit,
.agentchat-shell .agentchat-goal-strip .agentchat-goal-clear,
.agentchat-shell .agentchat-goal-strip .agentchat-goal-refresh { flex: none; color: var(--agentchat-accent); }
.agentchat-shell .agentchat-goal-strip .agentchat-goal-edit svg,
.agentchat-shell .agentchat-goal-strip .agentchat-goal-control svg,
.agentchat-shell .agentchat-goal-strip .agentchat-goal-clear svg { display: block; width: 16px; height: 16px; }
.agentchat-shell .agentchat-goal-progress { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 2px; background: var(--line); }
.agentchat-shell .agentchat-goal-progress span { display: block; height: 100%; background: var(--agentchat-accent); }
.agentchat-shell .agentchat-goal-strip[data-state="paused"] .agentchat-goal-status,
.agentchat-shell .agentchat-goal-strip[data-state="waiting"] .agentchat-goal-status { color: var(--agentchat-accent); }
.agentchat-shell--landing .agentchat-composer-glass:focus-within {
  border-color: rgba(139, 228, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(41, 171, 226, .16), 0 14px 38px rgba(5, 14, 23, .18);
}
.agentchat-shell .agentchat-project-shelf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -6px 12px 0;
  padding: 10px 6px 4px;
  border-radius: 0 0 12px 12px;
  background: rgba(25, 40, 55, .38);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.agentchat-shell .agentchat-project-shelf button,
.agentchat-shell .agentchat-project-pages button,
.agentchat-shell--fora-composer button.agentchat-permissions-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.agentchat-shell .agentchat-project-shelf button:hover,
.agentchat-shell .agentchat-project-shelf button:focus-visible,
.agentchat-shell .agentchat-project-pages button:hover,
.agentchat-shell--fora-composer button.agentchat-permissions-btn:hover { background: var(--indigo-soft); color: var(--ink); }
.agentchat-shell .agentchat-project-shelf button:disabled,
.agentchat-shell .agentchat-project-pages button:disabled,
.agentchat-shell--fora-composer .agentchat-composer-controls select:disabled,
.agentchat-shell--fora-composer button.agentchat-permissions-btn:disabled { opacity: .4; cursor: default; }
.agentchat-shell .agentchat-project-btn { max-width: 45%; }
.agentchat-shell .agentchat-project-shelf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentchat-shell .agentchat-project-shelf [data-shelf-mode="container"] { margin-left: auto; }
.agentchat-shell .agentchat-project-pages { display: flex; align-items: center; justify-content: space-between; color: var(--ink-mut); }
.agentchat-shell.agentchat-shell--landing .agentchat-composer-box,
.agentchat-shell.agentchat-shell--landing .agentchat-composer-box:focus-within {
  box-sizing: border-box;
  min-height: 50px;
  gap: 5px;
  padding: 7px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.agentchat-shell.agentchat-shell--landing .agentchat-input {
  padding: 5px 4px;
  font-size: 12px;
  line-height: 1.45;
}
.agentchat-shell.agentchat-shell--landing .agentchat-input,
.agentchat-shell.agentchat-shell--landing .agentchat-input:focus { outline: none; box-shadow: none; border: 0; }
.agentchat-shell.agentchat-shell--fora-composer .agentchat-composer-box,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-composer-box:focus-within {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.agentchat-shell.agentchat-shell--fora-composer .agentchat-input {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 5px 7px;
}

.agentchat-input-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.agentchat-input-wrap > .agentchat-input { display: block; }

.agentchat-input-highlight {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: solid transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
}

.agentchat-shell.agentchat-shell--fora-composer .agentchat-input.has-token-highlight {
  position: relative;
  color: transparent;
  caret-color: var(--ink);
}

.agentchat-input-token {
  color: #69caff;
  /* Paint heavier text without shifting the native textarea caret. */
  text-shadow: .35px 0 currentColor, -.35px 0 currentColor;
}
.agentchat-shell--fora-composer .agentchat-composer-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 35px;
}
.agentchat-shell--fora-composer .agentchat-model-select,
.agentchat-shell--fora-composer .agentchat-effort-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  height: 28px;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell--fora-composer .agentchat-model-select::after,
.agentchat-shell--fora-composer .agentchat-effort-select::after {
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  content: '';
}
.agentchat-shell--fora-composer button.agentchat-permissions-btn { flex: none; padding: 4px 6px; font-size: 11px; white-space: nowrap; }
.agentchat-shell--fora-composer button.agentchat-model-select { max-width: 40%; margin-left: auto; }
.agentchat-shell--fora-composer button.agentchat-effort-select { max-width: 140px; }
.agentchat-shell--fora-composer button.agentchat-context-btn {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.agentchat-context-btn > span {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  background: conic-gradient(var(--agentchat-context-color, var(--agentchat-accent)) var(--agentchat-context-percent, 0%), var(--line-hi) 0);
  transition: background .2s ease;
}
.agentchat-context-btn > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--panel, #162334);
  content: '';
}
.agentchat-shell--fora-composer .agentchat-effort-select,
.agentchat-shell--fora-composer .agentchat-effort-result { color: var(--agentchat-effort-color, var(--ink-dim)); }
.agentchat-shell--fora-composer .agentchat-effort-select:disabled { opacity: .45; cursor: default; }
.agentchat-model-providers { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 8px; }
.agentchat-model-providers button { flex: none; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 4px 8px; font: inherit; font-size: 12px; }
.agentchat-model-providers button[aria-pressed="true"] { background: var(--line-hi); }
.agentchat-model-prices { display: flex; gap: 12px; margin-bottom: 8px; }
.agentchat-model-prices label, .agentchat-budget-label { display: block; min-width: 0; color: var(--ink-mut); font-size: 11px; }
.agentchat-model-prices input { box-sizing: border-box; width: 100%; max-width: 140px; height: 28px; background: transparent; color: var(--ink); border: 1px solid var(--line-hi); border-radius: 6px; }
.agentchat-model-results small, .agentchat-permission-result small { white-space: normal; }
.agentchat-permission-result:disabled { opacity: .5; cursor: default; }
.agentchat-permission-icon { width: 16px; height: 16px; flex: none; }
.agentchat-permission-result .agentchat-permission-icon { width: 21px; height: 21px; }
.agentchat-budget-error { color: var(--ink-mut); font-size: 12px; }
.agentchat-shell--fora-composer .agentchat-composer-controls :focus-visible,
.agentchat-shell--fora-composer .agentchat-shelf-popup :focus-visible { outline: 1px solid var(--agentchat-accent); outline-offset: 2px; }
.agentchat-shell--fora-composer .agentchat-composer-glass,
.agentchat-shell--fora-composer .agentchat-composer-box { position: relative; z-index: 1; }
.agentchat-shell--fora-composer .agentchat-project-shelf { border: 1px solid var(--line-hi); border-top: 0; }
.agentchat-shell.agentchat-shell--fora-composer .agentchat-shelf-popup {
  box-sizing: border-box;
  max-height: min(240px, 30vh);
  margin: 6px 12px 0;
  padding: 10px;
  overflow-y: auto;
  color: var(--ink);
  border-radius: 12px;
}
.agentchat-shell--fora-composer .agentchat-shelf-popup[hidden] { display: none; }
.agentchat-shell--fora-composer .agentchat-shelf-popup:not([hidden]) { animation: agentchat-welcome-fade-rise 200ms ease-out; }
.agentchat-shell.agentchat-shell--fora-composer [data-shelf-popup="models"],
.agentchat-shell.agentchat-shell--fora-composer [data-shelf-popup="permissions"],
.agentchat-shell.agentchat-shell--fora-composer [data-shelf-popup="effort"],
.agentchat-shell.agentchat-shell--fora-composer [data-shelf-popup="context"] { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 55; margin: 0; }
.agentchat-context-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0 8px; }
.agentchat-context-total strong { font-size: 13px; font-weight: 600; }
.agentchat-context-total span, .agentchat-context-note { color: var(--ink-dim); font-size: 11px; }
.agentchat-context-bar { display: flex; width: 100%; height: 7px; margin-bottom: 8px; overflow: hidden; border-radius: 5px; background: var(--line); }
.agentchat-context-bar span { display: block; min-width: 1px; height: 100%; }
.agentchat-context-rows { padding: 2px 0 5px; }
.agentchat-context-row { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; padding: 2px 0; color: var(--ink-mut); font-size: 12px; }
.agentchat-context-label, .agentchat-context-value { display: flex; align-items: center; min-width: 0; }
.agentchat-context-label { gap: 7px; }
.agentchat-context-label i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--ink-dim); }
.agentchat-context-value { gap: 10px; font-variant-numeric: tabular-nums; }
.agentchat-context-value strong { min-width: 42px; color: var(--ink-mut); font-weight: 400; text-align: right; }
.agentchat-context-value em { min-width: 34px; color: var(--ink); font-style: normal; text-align: right; }
.agentchat-context-row.is-subrow { padding-left: 15px; color: var(--ink-dim); font-size: 11px; }
.agentchat-context-row.is-subrow .agentchat-context-label i { width: 6px; height: 6px; opacity: .65; }
.agentchat-context-bar .is-conversation, .agentchat-context-label .is-conversation { background: #3b9cff; }
.agentchat-context-bar .is-system, .agentchat-context-label .is-system { background: #8b7cf6; }
.agentchat-context-bar .is-tools, .agentchat-context-label .is-tools { background: #22b98a; }
.agentchat-context-bar .is-reserve, .agentchat-context-label .is-reserve { background: #d79213; }
.agentchat-context-bar .is-free, .agentchat-context-label .is-free { background: rgba(154, 169, 187, .22); }
.agentchat-context-label .is-core { background: #a99ffc; }
.agentchat-context-label .is-environment { background: #64c6c2; }
.agentchat-context-label .is-skills { background: #56b98a; }
.agentchat-context-label .is-instructions { background: #e57b45; }
.agentchat-context-label .is-project { background: #62a7dd; }
.agentchat-context-label .is-memory { background: #c178d8; }
.agentchat-context-note { margin: 4px 0 0; line-height: 1.45; }
.agentchat-shell--fora-composer .agentchat-effort-result[hidden] { display: none; }
.agentchat-shell--fora-composer.is-landing-empty:not(.has-landing-context) .agentchat-shelf-popup {
  max-height: min(240px, 30vh, var(--agentchat-shelf-space, 240px));
}
.agentchat-shell--fora-composer .agentchat-shelf-heading { margin: 0 0 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
.agentchat-shell--fora-composer input.agentchat-project-search,
.agentchat-shell--fora-composer input.agentchat-model-search,
.agentchat-shell--fora-composer input.agentchat-effort-search,
.agentchat-shell--fora-composer input.agentchat-thinking-budget {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin: 0 0 8px;
  padding: 5px 8px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  box-shadow: none;
}
.agentchat-shell--fora-composer .agentchat-project-search::placeholder { color: var(--ink-dim); }
.agentchat-shell--fora-composer .agentchat-shelf-note { margin: 0; color: var(--ink-mut); font-size: 12px; line-height: 1.5; }
.agentchat-shell--fora-composer .agentchat-project-shelf [data-shelf-mode="agents"] { margin-left: auto; }
.agentchat-shell--fora-composer .agentchat-project-shelf [data-shelf-mode="container"] { margin-left: 0; }
.agentchat-shell--fora-composer .agentchat-agent-icon { width: 18px; height: 18px; flex: none; color: var(--agentchat-accent); }
.agentchat-shell--fora-composer .agentchat-agents-btn .agentchat-agent-icon { color: inherit; }
.agentchat-shell--fora-composer .agentchat-agents-btn.has-active-agents .agentchat-agent-icon { color: var(--agentchat-accent); animation: agentchat-agents-pulse 2.6s ease-in-out infinite; }
@keyframes agentchat-agents-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.agentchat-shell--fora-composer .agentchat-agents-roster h4 { margin: 10px 3px 8px; color: var(--ink-dim); font-size: 11px; font-weight: 500; }
.agentchat-shell--fora-composer .agentchat-agent-card,
.agentchat-shell--fora-composer .agentchat-agent-minimize {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%;
  padding: 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.agentchat-shell--fora-composer .agentchat-agent-card { margin-bottom: 8px; border: 1px solid var(--line); background: rgba(18, 33, 48, .24); }
.agentchat-shell--fora-composer .agentchat-agent-card:hover,
.agentchat-shell--fora-composer .agentchat-agent-minimize:hover { background: var(--indigo-soft); }
.agentchat-shell--fora-composer .agentchat-agent-fields { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agentchat-shell--fora-composer .agentchat-agent-name { display: block; font-size: 12px; font-weight: 550; }
.agentchat-shell--fora-composer .agentchat-agent-task,
.agentchat-shell--fora-composer .agentchat-agent-meta { display: block; margin-top: 3px; color: var(--ink-dim); font-size: 11px; font-weight: 400; }
.agentchat-shell--fora-composer .agentchat-agent-status { color: var(--agentchat-accent); font-size: 11px; white-space: nowrap; }
.agentchat-shell--fora-composer .agentchat-agent-status[data-status="complete"],
.agentchat-shell--fora-composer .agentchat-agent-status[data-status="stopped"],
.agentchat-shell--fora-composer .agentchat-agent-status[data-status="stopping"] { color: var(--ink-dim); }
.agentchat-shell--fora-composer .agentchat-agent-status[data-status="failed"] { color: var(--agentchat-danger); }
.agentchat-shell.agentchat-shell--fora-composer .agentchat-shelf-popup[data-shelf-popup="agents"].is-inspecting {
  height: min(420px, 50vh, var(--agentchat-shelf-space, 420px));
  max-height: min(420px, 50vh, var(--agentchat-shelf-space, 420px));
  overflow: hidden;
}
.agentchat-shell--fora-composer .agentchat-agent-detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.agentchat-shell--fora-composer .is-inspecting .agentchat-agents-heading,
.agentchat-shell--fora-composer .is-inspecting .agentchat-agents-roster,
.agentchat-shell--fora-composer .agentchat-agent-detail[hidden] { display: none; }
.agentchat-shell--fora-composer .agentchat-agent-minimize { flex: none; }
.agentchat-shell--fora-composer .agentchat-agent-minimize > svg:last-child { width: 15px; height: 15px; flex: none; color: var(--ink-dim); }
.agentchat-shell--fora-composer .agentchat-agent-toolbar {
  display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 11px;
}
.agentchat-shell--fora-composer .agentchat-agent-stop {
  margin-left: auto; padding: 4px 8px; border: 1px solid var(--line-hi); border-radius: 6px;
  background: transparent; color: var(--agentchat-danger); font: inherit; cursor: pointer;
}
.agentchat-shell--fora-composer .agentchat-agent-stop:disabled { opacity: .5; cursor: default; }
.agentchat-shell--fora-composer .agentchat-agent-history { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px; scrollbar-width: thin; }
.agentchat-shell--fora-composer .agentchat-agents-error { margin: 0 0 8px; color: var(--agentchat-danger); font-size: 12px; }
.agentchat-shell--fora-composer .agentchat-agents-error[hidden] { display: none; }
.agentchat-shell--fora-composer .agentchat-agent-message { margin: 12px 0 18px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.agentchat-shell--fora-composer .agentchat-agent-detail .agentchat-bubble { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; }
.agentchat-shell--fora-composer .agentchat-agent-message.is-user { padding-left: 10px; border-left: 2px solid var(--line-hi); }
.agentchat-shell--fora-composer .agentchat-agent-message.is-tool { color: var(--ink-dim); font-size: 11px; }
.agentchat-shell--fora-composer .agentchat-agent-message.is-error { color: var(--agentchat-danger); }
.agentchat-shell--fora-composer .agentchat-agent-readonly { flex: none; margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 11px; }
.agentchat-shell--fora-composer .agentchat-agent-event { display: flex; gap: 8px; margin: 10px 0; color: var(--ink-dim); font-size: 12px; line-height: 1.6; }
.agentchat-shell--fora-composer .agentchat-agent-event > svg { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.agentchat-shell--fora-composer .agentchat-agent-event small { display: block; font-size: 11px; }
.agentchat-shell--fora-composer .agentchat-agent-reference { margin-left: 6px; padding: 0; border: 0; background: transparent; color: var(--agentchat-accent); font: inherit; font-weight: 550; text-align: left; cursor: pointer; }
.agentchat-shell--fora-composer .agentchat-agent-reference:hover { text-decoration: underline; text-underline-offset: 3px; }
.agentchat-shell--fora-composer .agentchat-agent-reference:focus-visible { outline: 1px solid var(--agentchat-accent); outline-offset: 3px; }
.agentchat-shell--landing .agentchat-msg--user .agentchat-bubble { border: 0; }
.agentchat-shell--landing .agentchat-composer-ctx { display: none; }
.agentchat-shell--landing .agentchat-addsurface {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  box-sizing: border-box;
  z-index: 55;
  display: flex;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.agentchat-shell--landing .is-add-open .agentchat-addsurface { opacity: 1; visibility: visible; transform: none; }
.agentchat-shell--landing .agentchat-addmenu {
  position: static;
  min-height: 0;
  width: 100%;
  max-height: min(390px, 48vh);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.agentchat-shell--landing .agentchat-addmenu-primary-grid,
.agentchat-shell--landing .agentchat-addmenu-categories,
.agentchat-shell--landing .agentchat-addmenu-file-actions { grid-template-columns: 1fr; gap: 0; }
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-primary-item,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-category,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-result,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-file-action,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-project-result {
  min-height: 34px;
  padding: 4px 8px;
  gap: 7px;
  font-size: 13px;
  border: 0;
  background: transparent;
}
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-primary-item:hover,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-category:hover,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-result:hover,
.agentchat-shell.agentchat-shell--landing .agentchat-addmenu-file-action:hover,
.agentchat-shell.agentchat-shell--fora-composer .agentchat-project-result:hover { background: rgba(255, 255, 255, .065); }
.agentchat-shell--landing .agentchat-addmenu-primary-item span { display: flex; align-items: baseline; gap: 8px; }
.agentchat-shell--landing .agentchat-addmenu-primary-item strong { font-weight: 500; }
.agentchat-shell--landing .agentchat-addmenu-primary-item small { margin: 0; font-size: 11px; }
.agentchat-shell--landing .agentchat-addmenu-primary-item b,
.agentchat-shell--landing .agentchat-addmenu-category b { width: 25px; height: 25px; border: 0; background: transparent; color: var(--ink-dim); }
.agentchat-shell--landing .agentchat-addmenu-primary-item svg { width: 20px; height: 20px; }
.agentchat-shell--landing .agentchat-addmenu-category .fa { font-size: 18px; color: var(--ink); }
.agentchat-shell--landing .agentchat-addmenu-head { padding: 6px 12px; border: 0; }
.agentchat-shell--landing .agentchat-addmenu-head,
.agentchat-shell--landing .agentchat-addmenu-search-wrap { flex-shrink: 0; }
.agentchat-shell--landing .agentchat-send-btn:disabled { opacity: .4; cursor: default; }
.agentchat-shell .agentchat-ask--composer { max-width: none; margin: 0 0 8px; padding: 0; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-bar { height: 42px; box-sizing: border-box; margin: 0; padding: 0 15px; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-minlabel { display: block; color: var(--agentchat-accent); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-min { display: block; transition: opacity .16s, visibility .16s; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-min svg { width: 16px; height: 16px; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s ease, opacity .16s; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-body { min-height: 0; overflow: hidden; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-body > * { margin: 0 15px 12px; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-q { font-weight: 400; font-size: 12px; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-options { max-height: min(260px, 30vh); overflow-y: auto; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-row { text-align: left; background: transparent; border-color: transparent; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-row.active { background: rgba(41,171,226,.09); border-color: rgba(139,228,255,.24); box-shadow: none; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-row:hover { background: rgba(41,171,226,.06); }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-files { padding: 10px; border: 1px dashed rgba(207,235,247,.15); border-radius: 8px; font-size: 11px; color: var(--ink-dim); }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-upload,
.agentchat-shell .agentchat-ask--composer .agentchat-ask-entity { background: transparent; border: 0; color: var(--agentchat-accent); font: inherit; cursor: pointer; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-upload { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.agentchat-shell .agentchat-ask--composer .agentchat-ask-upload svg { width: 15px; height: 15px; vertical-align: middle; }
.agentchat-shell .agentchat-ask--composer.minimized .agentchat-ask-content { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.agentchat-shell .agentchat-ask--composer.minimized { padding: 0; }
.agentchat-shell .agentchat-ask--composer.minimized .agentchat-ask-q,
.agentchat-shell .agentchat-ask--composer.minimized .agentchat-ask-options { display: block; }
.agentchat-shell .agentchat-ask--composer.minimized .agentchat-ask-min { display: block; visibility: hidden; opacity: 0; }
.agentchat-shell .agentchat-capacity-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.agentchat-shell .agentchat-capacity-comparison > div { display: grid; gap: 3px; padding: 10px; border: 1px solid rgba(207,235,247,.12); border-radius: 8px; }
.agentchat-shell .agentchat-capacity-comparison strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; font-weight: 500; }
.agentchat-shell .agentchat-capacity-comparison span,
.agentchat-shell .agentchat-capacity-ask p { color: var(--ink-dim); font-size: 11px; }
.agentchat-shell .agentchat-capacity-actions { display: flex; justify-content: flex-end; gap: 8px; }
.agentchat-shell .agentchat-capacity-actions button { border: 1px solid rgba(207,235,247,.18); border-radius: 8px; padding: 6px 12px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.agentchat-shell .agentchat-capacity-actions .agentchat-capacity-continue { background: rgba(41,171,226,.14); border-color: rgba(139,228,255,.28); color: var(--agentchat-accent); }
.agentchat-shell--landing .agentchat-goals { border: 0; padding: 0; min-width: 0; }
.agentchat-shell .agentchat-goal-proposal { max-height: min(300px, 35vh); overflow-y: auto; }
.agentchat-shell .agentchat-goal-proposal .agentchat-goal-row { align-items: flex-start; }
.agentchat-shell .agentchat-goal-proposal button { border: 0; padding: 0; background: transparent; color: var(--agentchat-accent); cursor: pointer; }
.agentchat-shell .agentchat-goal-proposal input,
.agentchat-shell .agentchat-goal-proposal textarea,
.agentchat-shell .agentchat-goal-proposal select { color: var(--ink); background: transparent; border: 1px solid rgba(207,235,247,.08); border-radius: 6px; padding: 5px; font: inherit; font-size: 12px; }
.agentchat-shell .agentchat-goal-proposal option { background: var(--panel); }
.agentchat-shell .agentchat-goal-decision { margin-left: 8px; border: 1px solid rgba(207,235,247,.18); border-radius: 8px; padding: 6px 16px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.agentchat-shell .agentchat-goal-decision[data-value="accept"] { background: rgba(207,235,247,.12); }
.agentchat-shell .agentchat-goal-decision:disabled { opacity: .45; cursor: default; }
.agentchat-shell--landing .agentchat-goal-summary { font-size: 11px; color: var(--ink-dim); padding: 4px 7px 10px; }
.agentchat-shell--landing .agentchat-goal-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.agentchat-shell--landing .agentchat-goal-fields { flex: 1; min-width: 0; display: grid; gap: 5px; }
.agentchat-shell--landing .agentchat-goal-fields input,
.agentchat-shell--landing .agentchat-goal-fields textarea,
.agentchat-shell--landing .agentchat-goal-fields select { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 5px; color: var(--ink); background: transparent; border: 1px solid rgba(207,235,247,.08); border-radius: 6px; font: inherit; font-size: 12px; }
.agentchat-shell--landing .agentchat-goal-fields textarea { min-height: 52px; resize: vertical; }
.agentchat-shell--landing .agentchat-goal-fields option { background: var(--panel); }
.agentchat-shell--landing .agentchat-goal-deliverable { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px; }
.agentchat-shell--landing .agentchat-goal-add,
.agentchat-shell--landing .agentchat-goal-control,
.agentchat-shell--landing .agentchat-goal-delete { border: 0; background: transparent; color: var(--agentchat-accent); cursor: pointer; }
.agentchat-shell--landing .agentchat-goal-check { accent-color: var(--agentchat-accent); }
.agentchat-shell--unified .agentchat-goal-deliverable { grid-template-columns: 110px minmax(0, 1fr) auto; }
.agentchat-shell--unified .agentchat-goal-deliverable-add,
.agentchat-shell--unified .agentchat-goal-deliverable-delete { border: 0; background: transparent; color: var(--agentchat-accent); cursor: pointer; text-align: left; }
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goals { border: 0; padding: 0; min-width: 0; }
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-row { display: flex; gap: 8px; margin-bottom: 12px; }
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-fields { display: grid; gap: 5px; flex: 1; min-width: 0; }
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-fields input,
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-fields textarea,
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-fields select { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; }
.agentchat-shell--unified:not(.agentchat-shell--landing) .agentchat-goal-deliverable { display: grid; gap: 6px; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goals-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; background: var(--panel); }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-addmenu-head { flex-shrink: 0; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goals-heading .agentchat-goal-summary { flex: 1; min-width: 0; margin: 0; padding: 0; color: var(--ink-dim); font-size: 11px; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-row { padding: 10px; border: 1px solid rgba(207,235,247,.18); border-radius: 9px; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-state { padding-top: 4px; color: var(--ink-dim); font-size: 11px; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-fields input,
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-fields textarea,
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-fields select { margin: 0; padding: 5px; color: var(--ink); background: transparent; border: 1px solid rgba(207,235,247,.08); border-radius: 6px; font: inherit; font-size: 12px; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-fields textarea { min-height: 52px; resize: vertical; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-fields option { background: var(--panel); }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-delete { flex: none; align-self: flex-start; width: 20px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--agentchat-accent); font: inherit; cursor: pointer; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-addmenu .agentchat-goal-control { margin: 0 0 8px; padding: 4px 0; border: 0; background: transparent; color: var(--agentchat-accent); font: inherit; font-size: 12px; cursor: pointer; }
.agentchat-shell.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-add,
.agentchat-shell.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-set { flex: none; padding: 6px 12px; border: 1px solid rgba(207,235,247,.24); border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.agentchat-shell.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-set { color: var(--agentchat-accent); }
.agentchat-shell.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-add:disabled,
.agentchat-shell.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-set:disabled { opacity: .45; cursor: default; }
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-add:focus-visible,
.agentchat-shell--fora-composer:not(.is-temporary) .agentchat-goal-set:focus-visible { outline: 1px solid var(--agentchat-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .agentchat-shell--fora-composer .agentchat-shelf-popup:not([hidden]) { animation: none; }
  .agentchat-shell--fora-composer .agentchat-agents-btn.has-active-agents .agentchat-agent-icon { animation: none; }
  .agentchat-shell--landing .agentchat-addsurface,
  .agentchat-shell .agentchat-ask--composer .agentchat-ask-content,
  .agentchat-shell .agentchat-ask--composer .agentchat-ask-min { transition: none; }
}

.agentchat-shell .agentchat-refpicker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  z-index: 40;
  padding: 4px;
}
.agentchat-shell .agentchat-refpicker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.agentchat-shell .agentchat-refpicker-item:hover,
.agentchat-shell .agentchat-refpicker-item.is-active {
  background: var(--panel-soft);
}
.agentchat-shell .agentchat-refpicker-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-refpicker-type {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .62;
}
.agentchat-shell .agentchat-refpicker-msg {
  padding: 10px 11px;
  font-size: 12.5px;
  opacity: .7;
}

/* `/` skill command palette. Deliberately borrows the left-nav charcoal/navy
   surface so the palette reads as an extension of navigation, not a modal. */
.agentchat-shell .agentchat-skillpicker {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 100%;
  margin-bottom: 7px;
  max-height: 286px;
  overflow-y: auto;
  padding: 5px;
  color: #e7edf6;
  background: #172033;
  border: 1px solid #2b3850;
  border-radius: 7px;
  box-shadow: 0 14px 36px rgba(8, 15, 28, .28);
  z-index: 41;
}
.agentchat-shell .agentchat-skillpicker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 5px;
  cursor: pointer;
}
.agentchat-shell .agentchat-skillpicker-section {
  padding: 8px 9px 4px;
  color: #8290a6;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.agentchat-shell .agentchat-skillpicker-item:hover,
.agentchat-shell .agentchat-skillpicker-item.is-active {
  background: #243149;
}
.agentchat-shell .agentchat-skillpicker-glyph {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid #43526d;
  border-radius: 5px;
  color: #a9c7f5;
  font: 600 13px var(--font-mono);
}
.agentchat-shell .agentchat-skillpicker-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.agentchat-shell .agentchat-skillpicker-name {
  overflow: hidden;
  color: #f7f9fc;
  font-size: 12.5px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-skillpicker-desc {
  overflow: hidden;
  color: #9eabc0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-skillpicker-mode {
  flex: 0 0 auto;
  color: #8fa0b9;
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.agentchat-shell .agentchat-skillpicker-msg {
  padding: 10px;
  color: #aeb9ca;
  font-size: 12px;
}
.agentchat-shell .agentchat-skilltray {
  display: flex;
  margin-bottom: 7px;
}
.agentchat-shell .agentchat-skillcontract { width: 100%; }
.agentchat-shell .agentchat-skillchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px 4px 4px;
  color: #e8eef8;
  background: #1b263a;
  border: 1px solid #34445f;
  border-radius: 6px;
  font-size: 11.5px;
}
.agentchat-shell .agentchat-skillchip-name {
  font-family: var(--font-mono);
}
.agentchat-shell .agentchat-skillchip-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #b5cff5;
  background: #273650;
  border-radius: 4px;
  font: 600 12px var(--font-mono);
}
.agentchat-shell .agentchat-skillchip-mode {
  color: #90a0b8;
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.agentchat-shell .agentchat-skillchip-job {
  padding: 2px 6px;
  color: #b8cae4;
  background: transparent;
  border: 1px solid #435675;
  border-radius: 4px;
  cursor: pointer;
  font-size: 9.5px;
}
.agentchat-shell .agentchat-skillchip-job:hover,
.agentchat-shell .agentchat-skillchip-job:focus-visible {
  color: #fff;
  border-color: #6b86ad;
}
.agentchat-shell .agentchat-skillchip-x {
  padding: 0;
  color: #8f9db2;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.agentchat-shell .agentchat-skillpicker-needs,
.agentchat-shell .agentchat-skillrequirements {
  color: #91a4c0;
  font-size: 10px;
}
.agentchat-shell .agentchat-skillrequirements {
  display: block;
  margin: 5px 2px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.agentchat-shell .agentchat-skillrequirements:hover { color: #bdd2ef; }
.agentchat-shell .agentchat-skillfield {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: #aebbd0;
  font-size: 10.5px;
  text-transform: capitalize;
}
.agentchat-shell .agentchat-skillfield span { min-width: 92px; }
.agentchat-shell .agentchat-skillfield em { opacity: .65; font-style: normal; text-transform: none; }
.agentchat-shell .agentchat-skillfield-input {
  min-width: 0;
  flex: 1 1 auto;
  padding: 5px 7px;
  color: #eef3fb;
  background: #131d2e;
  border: 1px solid #34445f;
  border-radius: 5px;
  outline: 0;
}
.agentchat-shell .agentchat-skillresult {
  width: min(760px, calc(100% - 44px));
  margin: 8px 0 8px 36px;
  overflow: hidden;
  color: #e8eef8;
  background: #172033;
  border: 1px solid #2b3850;
  border-radius: 8px;
}
.agentchat-shell .agentchat-skillresult-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  color: #f4f7fb;
  border-bottom: 1px solid #2b3850;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.agentchat-shell .agentchat-skillresult-head span { color: #a9c7f5; font-family: var(--font-mono); }
.agentchat-shell .agentchat-skillresult-head small { margin-left: auto; color: #8fa0b9; font-weight: 400; text-transform: none; }
.agentchat-shell .agentchat-skillresult-body { padding: 11px 12px; color: #dce5f2; font-size: 12.5px; line-height: 1.55; }
.agentchat-shell .agentchat-skillresult--failed { border-color: #68404b; }
.agentchat-shell .agentchat-skillapprove {
  margin: 0 12px 12px;
  padding: 6px 12px;
  color: #eef6ff;
  background: #176fa8;
  border: 1px solid #2b91cf;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.agentchat-shell .agentchat-skillapprove:hover { background: #1d80bd; }

.agentchat-shell .agentchat-reftray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}
.agentchat-shell .agentchat-uploadtray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}
.agentchat-shell .agentchat-file-card.task-file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 132px;
  padding: 10px 9px 8px;
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  background: var(--panel-soft);
  box-shadow: none;
  transition: border-color .12s ease, background .12s ease;
}
.agentchat-shell .agentchat-file-card.task-file-preview:hover {
  border-color: var(--agentchat-accent);
  background: rgba(41, 171, 226, .08);
}
.agentchat-shell .agentchat-file-card .tskp-file-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--agentchat-accent);
}
.agentchat-shell .agentchat-file-card .tskp-ico { width: 32px; height: 32px; }
.agentchat-shell .agentchat-file-card .agentchat-file-extension {
  position: absolute;
  right: -5px;
  bottom: 1px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--panel);
  color: var(--agentchat-accent);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.35;
}
.agentchat-shell .agentchat-file-card .tskp-file-name {
  width: 100%;
  margin: 4px 0 6px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agentchat-shell .agentchat-file-card .tskp-file-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.agentchat-shell .agentchat-file-card .tskp-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 11px;
  line-height: 25px;
}
.agentchat-shell .agentchat-file-card .tskp-file-btn:hover,
.agentchat-shell .agentchat-file-card .tskp-file-btn:focus-visible {
  border-color: var(--agentchat-accent);
  color: var(--agentchat-accent);
  outline: none;
}
.agentchat-shell .agentchat-file-card .tskp-file-btn-danger {
  padding: 0 7px;
}
.agentchat-shell .agentchat-file-card .tskp-file-btn-danger:hover,
.agentchat-shell .agentchat-file-card .tskp-file-btn-danger:focus-visible {
  border-color: rgba(248, 113, 113, .5);
  color: #f87171;
}
.agentchat-shell .agentchat-turnchips .agentchat-file-card--sent {
  margin-left: auto;
}
.agentchat-shell .agentchat-refchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 6px 3px 3px;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
}
.agentchat-shell .agentchat-refchip-glyph {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-align: center;
}
.agentchat-shell .agentchat-refchip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
/* A <button> inherits none of the chip's typography, and the global
   `label { display:block !important }` trap in this app means never
   wrapping chip text in a <label>. See
   .claude/rules/jquery-hide-does-not-work-on-a-label.md */
.agentchat-shell .agentchat-refchip-x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.agentchat-shell .agentchat-refchip-x:hover { opacity: 1; }

.agentchat-shell .agentchat-work-group {
  width: 100%; max-width: 100%; border: 0; background: transparent; overflow: visible;
}
.agentchat-shell .agentchat-work-group .agentchat-trace-summary {
  width: auto; gap: 9px; padding: 0 0 12px; border: 0; background: transparent;
  font: inherit; font-size: 14px; color: var(--ink-dim);
}
.agentchat-shell .agentchat-work-group .agentchat-trace-summary:hover { background: transparent; box-shadow: none; }
.agentchat-work-group .agentchat-trace-summary-text { flex: none; }
.agentchat-work-group .agentchat-trace-summary::after { font-size: 19px; }
.agentchat-shell .agentchat-work-group.is-expanded .agentchat-trace-timeline { border-top: 0; }
.agentchat-trace-live > .agentchat-trace-summary { display: none; }
.agentchat-action-group { margin: 0 0 20px; }
.agentchat-action-group > summary {
  display: flex; align-items: center; gap: 7px; width: fit-content; padding: 3px 0;
  color: var(--ink-dim); font-size: 13px; cursor: pointer; list-style: none;
}
.agentchat-action-group > summary::-webkit-details-marker { display: none; }
.agentchat-action-group > summary:hover { color: var(--ink); }
.agentchat-action-group > summary:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
.agentchat-action-group > summary svg { width: 16px; height: 16px; flex: none; }
.agentchat-action-group > summary::after { content: '\203A'; font-size: 22px; line-height: 1; margin-left: 2px; transition: transform .2s; }
.agentchat-action-group[open] > summary::after { transform: rotate(90deg); }
.agentchat-action-nodes { padding: 9px 0 0 5px; }
.agentchat-work-group .agentchat-trace-timeline > .agentchat-work-step {
  position: relative; margin: 0; padding: 0 0 20px; border: 0;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere;
}
.agentchat-trace-live > .agentchat-trace-timeline > :last-child { margin-bottom: 0; padding-bottom: 0; }
.agentchat-work-group .agentchat-trace-node-header { padding: 0; min-height: 22px; }
.agentchat-work-group .agentchat-action-nodes > .agentchat-trace-node { position: relative; padding: 0 0 6px 17px; }
.agentchat-work-group .agentchat-trace-node-header { flex-wrap: wrap; gap: 6px; }
.agentchat-work-group .agentchat-trace-node-dur { white-space: normal; overflow-wrap: anywhere; }
.agentchat-work-group .agentchat-work-step > .agentchat-bubble { max-width: 100%; }
.agentchat-work-group .agentchat-trace-node-dot {
  content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ink-dim);
}
.agentchat-work-group .agentchat-action-nodes > :not(:last-child)::after {
  content: ''; position: absolute; left: 2.5px; top: 18px; bottom: -4px; width: 1px;
  background: var(--line); transform-origin: top; animation: agentchat-trace-grow .28s ease-out both;
}
@keyframes agentchat-trace-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.agentchat-work-group .agentchat-trace-node-label { font-family: var(--font-mono); transition: color .25s; }
.agentchat-work-group .agentchat-trace-node[data-status="success"] .agentchat-trace-node-label { color: var(--green); }
.agentchat-work-group .agentchat-trace-node[data-status="failure"] .agentchat-trace-node-label { color: var(--agentchat-danger); }
.agentchat-work-group .agentchat-trace-node[data-status="success"] .agentchat-trace-node-dot { background: var(--green); }
.agentchat-work-group .agentchat-trace-node[data-status="failure"] .agentchat-trace-node-dot { background: var(--agentchat-danger); }
.agentchat-work-timer,
.agentchat-work-tokens { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.agentchat-work-tokens::before { margin-right: 7px; content: '\00b7'; }
.agentchat-work-tokens[hidden] { display: none; }
.agentchat-follow-latest {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: var(--agentchat-composer-space, 110px); z-index: 5; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); cursor: pointer;
}
.agentchat-follow-latest[hidden] { display: none; }
.agentchat-message-queue { max-height: 180px; overflow-y: auto; margin-bottom: 8px; }
.agentchat-message-queue[hidden], .agentchat-shell .agentchat-queue-stop[hidden] { display: none; }
.agentchat-queued-message {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13px;
}
.agentchat-queued-message + .agentchat-queued-message { margin-top: 6px; }
.agentchat-queue-status { color: var(--ink-dim); font-size: 11px; }
.agentchat-queue-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.agentchat-queue-edit { flex: 1; min-width: 0; color: var(--ink); background: transparent; border: 1px solid var(--line); }
.agentchat-queue-actions { display: flex; gap: 4px; }
.agentchat-shell .agentchat-queue-actions button {
  padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-mut); cursor: pointer;
}
.agentchat-shell .agentchat-queue-actions button:hover { background: var(--indigo-soft); }
.agentchat-shell .agentchat-queue-actions button:disabled { opacity: .4; cursor: default; }
.agentchat-shell button.agentchat-queue-stop {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--agentchat-accent); border-radius: 50%; background: transparent;
  color: var(--agentchat-accent); cursor: pointer;
}
.agentchat-queue-stop svg { width: 24px; height: 24px; }
@media (max-width: 600px) {
  .agentchat-queued-message { flex-wrap: wrap; }
  .agentchat-queue-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .agentchat-work-group .agentchat-trace-timeline > *::after,
  .agentchat-work-group .agentchat-trace-node-label { animation: none !important; }
  .agentchat-work-group .agentchat-trace-node[data-status="running"] .agentchat-trace-node-label {
    background: none; color: var(--ink-dim); -webkit-text-fill-color: var(--ink-dim);
  }
}
/* Artifact previews share one card between the transcript and full-screen view. */
.agentchat-artifacts.agentchat-artifacts--previews { display: block; width: 100%; }
.agentchat-artifact-host { display: flow-root; position: static; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.agentchat-artifact-preview { margin: 10px 0; width: var(--compact-width, max-content); max-width: 100%; box-sizing: border-box; border: 1px solid var(--line-hi, rgba(207,235,247,.12)); border-radius: 13px; background: rgba(17,31,45,.36); color: var(--ink, #edf7fc); overflow: hidden; font-size: 13px; line-height: 1.5; transition: width .24s ease; }
.agentchat-artifact-preview.is-open { width: 100%; }
.agentchat-ap-header { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.agentchat-ap-header > i { flex: none; color: var(--agentchat-accent, #8be4ff); font-size: 19px; }
.agentchat-ap-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.agentchat-ap-name small { display: block; margin-top: 3px; font-size: 10px; color: var(--ink-dim, #8299a9); }
.agentchat-ap-actions { display: flex; flex: none; gap: 3px; margin-left: auto; padding-left: 8px; }
.agentchat-ap-reveal { display: grid; grid-template-rows: 0fr; contain: inline-size; opacity: 0; transition: grid-template-rows .24s ease, opacity .18s ease; }
.agentchat-artifact-preview.is-open .agentchat-ap-reveal { grid-template-rows: 1fr; opacity: 1; }
.agentchat-ap-content { min-height: 0; overflow: hidden; }
.agentchat-ap-tools, .agentchat-ap-special { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.agentchat-ap-tools { padding: 7px 12px; border-top: 1px solid rgba(207,235,247,.12); font-size: 11px; }
.agentchat-ap-spacer { flex: 1; }
.agentchat-artifact-preview button, .agentchat-artifact-preview .agentchat-artifact-chip { border: 0; background: transparent; color: var(--ink-mut, #b8c9d4); border-radius: 5px; padding: 5px 7px; font: inherit; cursor: pointer; text-decoration: none; }
.agentchat-artifact-preview .agentchat-ap-actions > * { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; font-size: 14px; }
.agentchat-artifact-preview [hidden] { display: none; }
.agentchat-artifact-preview button:hover, .agentchat-artifact-preview a:hover { background: rgba(139,228,255,.08); color: #8be4ff; }
.agentchat-artifact-preview button:focus-visible, .agentchat-artifact-preview a:focus-visible { outline: 2px solid #8be4ff; outline-offset: -2px; }
.agentchat-ap-special input, .agentchat-ap-special select { min-width: 0; max-width: 170px; border: 0; border-radius: 5px; padding: 5px; color: inherit; background: rgba(17,31,45,.7); font: inherit; }
.agentchat-ap-body { height: 280px; overflow: auto; border-top: 1px solid rgba(207,235,247,.12); scrollbar-width: thin; }
.agentchat-ap-body > img, .agentchat-ap-document { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; }
.agentchat-ap-body > img { padding: 16px; box-sizing: border-box; }
.agentchat-ap-body > iframe { background: #fff; }
.agentchat-ap-body pre { margin: 0; padding: 20px; background: transparent; border: 0; color: inherit; font: 12px/1.8 Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.agentchat-ap-state { margin: 0; padding: 24px; color: var(--ink-mut, #b8c9d4); }
.agentchat-ap-caption { margin: 0; padding: 8px 16px; border-top: 1px solid rgba(207,235,247,.12); font-size: 10px; color: var(--ink-dim, #8299a9); }
.agentchat-ap-caption:empty { display: none; }
.agentchat-ap-body table { min-width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 12px; }
.agentchat-ap-body th { position: sticky; top: 0; background: #213246; font-weight: 500; }
.agentchat-ap-body th, .agentchat-ap-body td { padding: 9px 14px; text-align: left; border-bottom: 1px solid rgba(207,235,247,.07); }
.agentchat-ap-body td { max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.agentchat-ap-curve { height: 100%; min-height: 260px; }
.agentchat-ap-curve div.d3view-newton .chart_container { background: transparent; }
.agentchat-ap-curve svg.newton-svg text { fill: var(--ink-mut, #b8c9d4); }
.agentchat-ap-curve svg.newton-svg .curve_label { fill: var(--ink-mut, #b8c9d4) !important; }
.agentchat-ap-curve svg.newton-svg .tick line, .agentchat-ap-curve svg.newton-svg path.domain { stroke: var(--line-hi, #536576); }
.agentchat-artifact-dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #14212f; color: #edf7fc; }
.agentchat-artifact-dialog::backdrop { background: rgba(5,13,22,.7); backdrop-filter: blur(16px); }
.agentchat-artifact-dialog .agentchat-artifact-preview { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; transition: none; }
.agentchat-artifact-dialog .agentchat-ap-reveal { display: flex; flex: 1; min-height: 0; }
.agentchat-artifact-dialog .agentchat-ap-content { display: flex; flex-direction: column; width: 100%; }
.agentchat-artifact-dialog .agentchat-ap-header { padding: 20px 24px; }
.agentchat-artifact-dialog .agentchat-ap-view { display: none; }
.agentchat-artifact-dialog .agentchat-ap-body { flex: 1; min-height: 0; height: auto; }
.agentchat-artifact-dialog .agentchat-ap-tools { padding: 10px 20px; }
@media (prefers-reduced-motion: reduce) { .agentchat-artifact-preview, .agentchat-ap-reveal { transition: none; } }
.agentchat-artifact-card .agentchat-artifact-preview { width: 440px; max-width: 100%; margin: 6px 0; border-radius: 8px; background: #354b5e; border-color: #52697d; color: #edf3f8; }
.agentchat-artifact-card .agentchat-ap-header { padding: 10px 12px; gap: 10px; }
.agentchat-artifact-card .agentchat-ap-header > i { color: #95cfe9; }
.agentchat-artifact-card .agentchat-ap-name small { color: #c4d0db; font-size: 11px; }
.agentchat-artifact-card .agentchat-ap-actions > * { width: auto; height: auto; padding: 5px 9px; font-size: 12px; border: 1px solid #6b8295; background: #2b4153; color: #d6edf8; }
.agentchat-artifact-card .agentchat-ap-actions > *:hover { background: #455f74; border-color: #95cfe9; }
.agentchat-artifact-card .agentchat-ap-reveal { display: none; }
.agentchat-preview-loading { width: 100%; padding: 24px; box-sizing: border-box; }
.agentchat-preview-loading .agentchat-skel-bar { height: 16px; margin-bottom: 20px; }
.agentchat-preview-loading .agentchat-skel-bar:last-child { width: 65%; }
@media (prefers-reduced-motion: reduce) { .agentchat-shell .agentchat-skel-bar { animation: none; } }

/* ---- Artifact detail, inside the page ------------------------------- */
.agentchat-shell .agentchat-artdetail {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(1280px, calc(100vw - 40px));
  height: min(820px, calc(100dvh - 64px));
  max-width: none;
  max-height: none;
  border: 1px solid #dce3ea;
  border-radius: 14px;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.agentchat-shell .agentchat-artdetail,
.agentchat-shell .agentchat-inline-artifact-body {
  color-scheme: light;
  --panel: #fff;
  --panel-soft: #f6f7f9;
  --ink: #263746;
  --ink-mut: #617384;
  --ink-dim: #6b7987;
  --line: #dce3ea;
  --line-hi: #c9d3dd;
  --navy: #225c83;
  --indigo-bd: #90bbd4;
  --indigo-soft: #edf6fb;
  color: var(--ink);
}
.agentchat-shell .agentchat-artdetail[open] { display: flex; }
.agentchat-artpanel.has-artifact-detail > :not(.agentchat-artdetail) { visibility: hidden; }
.agentchat-shell .agentchat-artdetail--page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.agentchat-artdetail::backdrop { background: #07121d99; }
.agentchat-shell .agentchat-artdetail-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.agentchat-shell .agentchat-artdetail-acts > :not([hidden]) {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
.agentchat-shell .agentchat-artdetail-acts > :is(:hover, :focus-visible) { color: #167ca8; background: #e7f1f7; }
.agentchat-shell .agentchat-artdetail-acts > :focus-visible { outline: 2px solid #29abe2; outline-offset: 2px; }
.agentchat-shell .agentchat-artdetail-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.agentchat-shell .agentchat-artdetail-acts { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.agentchat-shell .agentchat-artdetail-meta {
  flex: none;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 11.5px;
}
.agentchat-shell .agentchat-artdetail-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: stretch;
  justify-content: center;
  padding: 22px;
  overflow: auto;
  background: var(--panel-soft);
}
.agentchat-artdetail-preview { min-width: 0; min-height: 0; }
.agentchat-artdetail-preview > * { height: 100%; }
.agentchat-artdetail-info { font-size: 13px; overflow-wrap: anywhere; }
.agentchat-artdetail-info h3 { margin: 0 0 14px; font-size: 14px; }
.agentchat-artdetail-info dl { margin: 0 0 25px; }
.agentchat-artdetail-info dt { color: #697988; font-size: 12px; margin: 10px 0 4px; }
.agentchat-artdetail-info dd { margin: 0; }
.agentchat-artdetail-info details { margin-bottom: 16px; }
.agentchat-artdetail-info summary { cursor: pointer; }
.agentchat-artdetail-info pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.agentchat-artdetail-info p { color: #627382; font-size: 12px; }
.agentchat-artdetail-info .agentchat-artshare-toggle { display: block; margin: 0 0 16px; padding: 7px 13px; border: 1px solid #dfe3e8; border-radius: 8px; background: #f7f9fb; color: #334155; cursor: pointer; }
.agentchat-artifact-detail-preview .agentchat-artifact-preview { height: 100%; margin: 0; display: flex; flex-direction: column; background: #fff; }
.agentchat-artifact-detail-preview .agentchat-ap-reveal, .agentchat-artifact-detail-preview .agentchat-ap-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.agentchat-artifact-detail-preview .agentchat-ap-body { flex: 1; min-height: 260px; height: auto; scrollbar-color: #b5bfca transparent; }
.agentchat-artifact-detail-preview .agentchat-ap-special input, .agentchat-artifact-detail-preview .agentchat-ap-special select, .agentchat-artifact-detail-preview .agentchat-ap-body th { background: #edf2f6; }
.agentchat-artifact-detail-preview .agentchat-ap-body td, .agentchat-artifact-detail-preview .agentchat-ap-body th { border-color: #e1e7ed; }
.agentchat-shell .agentchat-entity-slot { display: block; width: 100%; min-width: 0; margin: 16px 0; }
.agentchat-shell .agentchat-entity-slot--pending { min-height: clamp(320px, 65vh, 640px); }
.agentchat-shell .agentchat-inline-artifact { border: 1px solid var(--line-hi); border-radius: 12px; overflow: hidden; background: var(--panel-soft); color: var(--ink); }
.agentchat-shell .agentchat-inline-artifact > header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.agentchat-shell .agentchat-inline-artifact > header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentchat-shell .agentchat-inline-artifact > header a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: inherit; text-decoration: none; }
.agentchat-shell .agentchat-inline-artifact > header a:hover { background: var(--line); color: var(--agentchat-accent); }
.agentchat-shell .agentchat-inline-artifact > header a:focus-visible { outline: 2px solid var(--agentchat-accent); }
.agentchat-shell .agentchat-inline-artifact-body { height: clamp(320px, 65vh, 640px); overflow: auto; }
.agentchat-shell .agentchat-inline-artifact-body > * { height: 100%; }
.agentchat-shell .agentchat-inline-artifact-body > p { height: auto; padding: 16px; }
.agentchat-shell .agentchat-report-status { font-size: 12px; color: var(--ink-mut); }
.agentchat-report-export { position: fixed; left: -100000px; top: 0; width: 900px; padding: 0; background: #fff; color: #263746; font: 16px/1.55 Arial, sans-serif; }
.agentchat-report-export .agentchat-bubble { width: 100%; max-width: none; margin: 0; padding: 0; color: inherit; background: #fff; }
.agentchat-report-export p, .agentchat-report-export ul, .agentchat-report-export ol { margin: 0 0 12px; }
.agentchat-report-export h1, .agentchat-report-export h2, .agentchat-report-export h3 { color: #183d58; margin: 16px 0 10px; }
.agentchat-report-export a, .agentchat-report-export .agentchat-ent-chip { color: #176d9b; }
.agentchat-report-export pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f4f6f8; border: 1px solid #dce3ea; padding: 12px; }
.agentchat-report-export table { width: 100%; border-collapse: collapse; }
.agentchat-report-export th, .agentchat-report-export td { padding: 6px; border: 1px solid #dce3ea; }
.agentchat-report-export figure { margin: 12px 0; }
.agentchat-report-export img { display: block; max-width: 100%; height: auto; }
.agentchat-report-export figcaption { font-size: 12px; color: #617384; margin-top: 6px; }
@media (max-width: 900px) { .agentchat-shell .agentchat-artdetail-body { grid-template-columns: minmax(0, 1fr); } .agentchat-artdetail-preview { min-height: 360px; } }
.agentchat-shell .agentchat-artdetail-frame {
  width: 100%;
  max-width: 1080px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.agentchat-shell .agentchat-artdetail-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.agentchat-shell .agentchat-artdetail-noview {
  margin: auto;
  color: var(--ink-dim);
  font-size: 12.5px;
}
/* A rendered document (markdown) or an unzipped deck, in the same column the
   frame uses. */
.agentchat-shell .agentchat-artdetail-doc {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  align-self: flex-start;
  padding: 20px 24px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.agentchat-shell .agentchat-artdetail-doc > :first-child { margin-top: 0; }
.agentchat-shell .agentchat-artdetail-doc img { max-width: 100%; }
.agentchat-shell .agentchat-artdetail-doc table { border-collapse: collapse; }
.agentchat-shell .agentchat-artdetail-doc th,
.agentchat-shell .agentchat-artdetail-doc td { border: 1px solid var(--line); padding: 5px 9px; }
.agentchat-shell .agentchat-artdetail-doc pre {
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--panel-soft);
  overflow: auto;
}
.agentchat-shell .agentchat-artdetail-note {
  margin: 0 0 16px;
  padding: 8px 11px;
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-size: 11.5px;
}
.agentchat-shell .agentchat-artdetail-slide {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.agentchat-shell .agentchat-artdetail-slide-n {
  flex: none;
  width: 64px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.agentchat-shell .agentchat-artdetail-slide-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agentchat-shell .agentchat-artdetail-slide-body h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.agentchat-shell .agentchat-artdetail-slide-body p { margin: 0 0 4px; }
.agentchat-shell .agentchat-artdetail-slide-body img { display: block; max-width: 100%; margin: 10px 0 0; border-radius: 6px; }
.agentchat-shell .agentchat-artdetail-slide-empty { color: var(--ink-dim); font-style: italic; }
.agentchat-shell .agentchat-artdetail-note--warn {
  border: 1px solid #f0c36d;
  background: #fdf6e3;
  color: #7a5c14;
}

/* Notes-style access dialog, using the artifact's view-only sharing contract. */
.agentchat-shell .agentchat-artshare {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #333;
  color-scheme: light;
  box-shadow: 0 12px 40px #0003;
  --panel: #fff;
  --line: #ddd;
  --ink: #333;
  --ink-mut: #555;
  --ink-dim: #767676;
  --navy: #2c5282;
  --indigo-soft: #e0ecf8;
}
.agentchat-artshare::backdrop { background: #050e1757; }
.agentchat-artshare > header { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid #eee; }
.agentchat-artshare > header h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.agentchat-artshare > header > i { color: #2c5282; }
.agentchat-artshare-close { border: 0; border-radius: 6px; padding: 4px 8px; background: transparent; color: #767676; cursor: pointer; }
.agentchat-artshare-close:hover { background: #f0f0f0; }
.agentchat-artshare-body { padding: 18px 20px; font-size: 13px; }
.agentchat-artshare-body h3 { margin: 16px 0 5px; color: #555; font-size: 12px; font-weight: 600; }
.agentchat-artshare-body p { color: #767676; font-size: 12px; }
.agentchat-artshare-body .agentchat-artshare-lead { color: #555; font-size: 13px; margin: 0 0 14px; }
.agentchat-artshare-level { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #2c5282; border-radius: 8px; background: #e0ecf8; }
.agentchat-artshare-level > i { color: #2c5282; }
.agentchat-artshare-level > div { flex: 1; }
.agentchat-artshare-level small { display: block; color: #555; margin-top: 2px; }
.agentchat-artshare > footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid #eee; }
.agentchat-artshare > footer button { border: 1px solid #ddd; padding: 6px 16px; color: #555; font-size: 12.5px; font-weight: 600; }
.agentchat-artshare button:disabled, .agentchat-artshare input:disabled { opacity: .5; cursor: default; }
.agentchat-artshare :focus-visible, .agentchat-artdetail :focus-visible { outline: 2px solid #2c5282; outline-offset: 2px; }
.agentchat-shell .agentchat-artshare-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12.5px;
}
.agentchat-shell .agentchat-artshare-row span { flex: 1; min-width: 0; }
.agentchat-shell .agentchat-artshare-remove {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.agentchat-shell .agentchat-artshare-remove:hover { color: var(--red, #b23); border-color: var(--red, #b23); }
.agentchat-shell .agentchat-artshare-empty { color: var(--ink-dim); font-size: 12px; }
.agentchat-shell .agentchat-artshare-search {
  width: 100%;
  margin-top: 10px;
  padding: 6px 9px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}
.agentchat-shell .agentchat-artshare-result {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff;
  color: #333;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.agentchat-shell .agentchat-artshare-result:hover { background: var(--indigo-soft, var(--panel)); color: var(--navy); }
.agentchat-shell .agentchat-artpanel-shared { border-style: dashed; }

.agentchat-shell .agentchat-ask-server { display: flex; align-items: center; gap: 10px; }
.agentchat-shell .agentchat-ask-server-paths { flex: 1; min-width: 0; resize: vertical; padding: 9px 12px; border: 1px solid var(--border, #607587); border-radius: 8px; color: inherit; background: transparent; font: inherit; }
.agentchat-shell .agentchat-ask-server-browse { flex: none; padding: 8px 12px; border: 1px solid var(--border, #607587); border-radius: 8px; background: transparent; color: inherit; }
dialog.agentchat-server-browser { position: fixed; inset: 0; margin: auto; box-sizing: border-box; color-scheme: light; color: #243646; background: #fff; border: 1px solid #dfe5ec; border-radius: 12px; padding: 0; width: min(1000px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; font: 14px/1.5 "Avenir Next", "Segoe UI", sans-serif; box-shadow: 0 24px 90px #08101b66; }
.agentchat-server-browser[open] { display: flex; flex-direction: column; }
.agentchat-server-browser::backdrop { background: #07142199; backdrop-filter: blur(3px); }
.agentchat-server-browser * { box-sizing: border-box; }
.agentchat-server-browser [hidden] { display: none !important; }
.agentchat-server-browser svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.agentchat-server-browser button, .agentchat-server-browser input, .agentchat-server-browser select { font: inherit; color: inherit; margin: 0; }
.agentchat-server-browser button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dfe5ec; border-radius: 7px; background: transparent; padding: 7px 10px; cursor: pointer; }
.agentchat-server-browser button:hover:not(:disabled) { background: #e4f3fb; }
.agentchat-server-browser button:disabled { opacity: .45; cursor: default; }
.agentchat-server-browser :focus-visible { outline: 2px solid #168bbb; outline-offset: 2px; }
.agentchat-server-browser .acsb-head { position: relative; padding: 12px 135px 12px 18px; border-bottom: 1px solid #dfe5ec; flex: none; }
.agentchat-server-browser h2 { font-size: 16px; line-height: 1.5; font-weight: 600; margin: 0; }
.agentchat-server-browser .acsb-head p { margin: 2px 0 0; color: #687c8d; font-size: 13px; }
.agentchat-server-browser .acsb-close { position: absolute; top: 10px; right: 10px; font-size: 12px; border: 0; padding: 5px 7px; gap: 5px; color: #687c8d; }
.agentchat-server-browser kbd { background: transparent; color: inherit; box-shadow: none; border: 1px solid #dfe5ec; border-radius: 4px; font: inherit; padding: 1px 4px; }
.agentchat-server-browser .acsb-body { display: grid; grid-template-columns: 184px minmax(0, 1fr); flex: 1; min-height: 0; }
.agentchat-server-browser .acsb-roots { background: #f7f9fc; border-right: 1px solid #dfe5ec; padding: 15px 9px; overflow: auto; }
.agentchat-server-browser .acsb-roots > small { display: block; color: #687c8d; font-size: 12px; margin: 0 10px 13px; }
.agentchat-server-browser .acsb-roots button { border: 0; justify-content: start; text-align: left; width: 100%; margin-bottom: 5px; overflow-wrap: anywhere; }
.agentchat-server-browser .acsb-roots .active { background: #e4f3fb; color: #086d9a; }
.agentchat-server-browser .acsb-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.agentchat-server-browser .acsb-navigation, .agentchat-server-browser .acsb-filterbar { display: flex; gap: 8px; padding: 10px 14px; }
.agentchat-server-browser input { min-width: 0; flex: 1; background: #fff; border: 1px solid #dfe5ec; border-radius: 7px; padding: 7px 10px; height: auto; box-shadow: none; }
.agentchat-server-browser .acsb-filterbar { padding-top: 0; }
.agentchat-server-browser select { background: #fff; border: 0; width: auto; font-size: 12px; }
.agentchat-server-browser .acsb-error { margin: 0; padding: 0 14px 8px; color: #a8293c; font-size: 13px; }
.agentchat-server-browser .acsb-list { flex: 1; min-height: 0; overflow: auto; padding: 0 9px 9px; }
.agentchat-server-browser .acsb-list, .agentchat-server-browser .acsb-roots { scrollbar-width: thin; scrollbar-color: #b8c7d3 transparent; }
.agentchat-server-browser ::-webkit-scrollbar { width: 7px; height: 7px; }
.agentchat-server-browser ::-webkit-scrollbar-thumb { background: #b8c7d3; border-radius: 9px; }
.agentchat-server-browser ::-webkit-scrollbar-track { background: transparent; }
.agentchat-server-browser .acsb-entry { display: flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 7px; margin: 2px 0; }
.agentchat-server-browser .acsb-entry.selected { border-color: #29abe280; background: #29abe21a; }
.agentchat-server-browser .acsb-entry-open { flex: 1; min-width: 0; border: 0; justify-content: start; text-align: left; gap: 12px; padding: 9px 10px; }
.agentchat-server-browser .acsb-entry svg { color: #168bbb; }
.agentchat-server-browser .acsb-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.agentchat-server-browser .acsb-entry small { color: #687c8d; font-size: 12px; }
.agentchat-server-browser .acsb-select { border: 0; padding: 8px; margin-right: 4px; }
.agentchat-server-browser .acsb-empty { padding: 32px 20px; color: #687c8d; text-align: center; }
.agentchat-server-browser .acsb-pages { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px; font-size: 12px; }
.agentchat-server-browser .acsb-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid #dfe5ec; background: #f7f9fc; padding: 6px 13px; flex: none; min-height: 42px; }
.agentchat-server-browser .acsb-current { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #45596a; font-size: 12px; }
.agentchat-server-browser .acsb-current-select { padding: 2px; border: 0; color: #168bbb; }
.agentchat-server-browser .acsb-use { font-size: 12px; background: #167ead; border-color: #259cd0; color: #fff; padding: 4px 10px; flex: none; }
.agentchat-server-browser .acsb-use:hover:not(:disabled) { background: #198cbc; }
@media (max-width: 650px) {
  .agentchat-server-browser .acsb-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .agentchat-server-browser .acsb-roots { display: flex; gap: 5px; padding: 6px 10px; border-right: 0; border-bottom: 1px solid #dfe5ec; }
  .agentchat-server-browser .acsb-roots > small { display: none; }
  .agentchat-server-browser .acsb-roots button { width: auto; white-space: nowrap; margin: 0; }
  .agentchat-server-browser .acsb-entry small { display: none; }
  .agentchat-shell .agentchat-ask-server { flex-wrap: wrap; }
  .agentchat-shell .agentchat-ask-server-paths { flex-basis: 100%; }
}

/* /stylesheets/app-wide-fora.css */
/* App-wide FORA extension surface.  Generic AgentChat styles remain shared. */
.d3v-fora-loading-orb {
    width: 56px;
    height: 56px;
    background: url('/images/fora-loading-orb.svg') center / contain no-repeat;
    filter: brightness(1.4);
    animation: fora-loading-breathe 3s ease-in-out infinite;
}

.d3v-fora-loading .d3v-fora-loading-retry {
    color: #29abe2;
    text-decoration: underline;
}
.d3v-fora-loading-retry[hidden] { display: none; }
.d3v-fora-loading-retry:focus-visible { outline: 2px solid #29abe2; outline-offset: 4px; }
.d3v-fora-loading.is-error .d3v-fora-loading-orb { animation: none; }

@keyframes fora-loading-breathe {
    0%, 100% { transform: scale(.94); opacity: .7; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .d3v-fora-loading-orb,
    .app-loading-screen.d3v-fora-loading img { animation: none; }
}

.appwide-fora-pending-interaction {
    margin: 0 0 8px;
}

.appwide-fora-interaction-summary {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.appwide-fora-interaction-state {
    margin-top: 5px;
    color: #63769a;
    font-size: 12px;
}

.appwide-fora-interaction-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.appwide-fora-interaction-actions button {
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #b8c6e0;
    border-radius: 7px;
    background: #fff;
    color: #31486f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.appwide-fora-interaction-actions button:hover,
.appwide-fora-interaction-actions button:focus-visible {
    border-color: #6d8ed0;
    outline: none;
    box-shadow: 0 0 0 2px rgba(109, 142, 208, .18);
}

.appwide-fora-interaction-actions .appwide-fora-interaction-confirm {
    border-color: #587bc4;
    background: #587bc4;
    color: #fff;
}

.appwide-fora-interaction-actions .appwide-fora-interaction-deny {
    color: #6a4b58;
}

.appwide-fora-browser-target-preview {
    outline: 2px solid #29abe2 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(41, 171, 226, .18) !important;
}

.appwide-fora-worker-approval {
    --fora-approval-ease: cubic-bezier(.333333, 0, .666667, 1);
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(221, 243, 252, .16);
    border-radius: 16px;
    background: rgba(25, 40, 55, .95);
    color: #e8f3f9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .105), 0 14px 38px rgba(5, 14, 23, .18);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .appwide-fora-worker-approval {
        background: rgba(25, 40, 55, .58);
        -webkit-backdrop-filter: blur(20px) saturate(1.22);
        backdrop-filter: blur(20px) saturate(1.22);
    }
}

.appwide-fora-worker-approval .appwide-fora-approval-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 8px 0 14px;
}

.appwide-fora-worker-approval .appwide-fora-approval-toggle,
.appwide-fora-worker-approval .appwide-fora-approval-inputs-toggle {
    flex-shrink: 0;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #c4d9e6;
    cursor: pointer;
}

.appwide-fora-worker-approval .appwide-fora-approval-heading {
    flex-shrink: 1;
    padding: 6px 0;
    font-size: 12px;
    text-align: left;
}

.appwide-fora-worker-approval .appwide-fora-approval-body,
.appwide-fora-worker-approval .appwide-fora-approval-inputs {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 320ms var(--fora-approval-ease), opacity 320ms var(--fora-approval-ease);
}

.appwide-fora-worker-approval .appwide-fora-approval-content {
    min-height: 0;
    max-height: min(380px, 40vh);
    overflow: auto;
    overscroll-behavior: contain;
}

.appwide-fora-worker-approval .appwide-fora-approval-content > * {
    margin-right: 14px;
    margin-left: 14px;
}

.appwide-fora-worker-approval .appwide-fora-interaction-summary {
    margin-top: 0;
    overflow-wrap: anywhere;
}

.appwide-fora-worker-approval .appwide-fora-approval-worker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow-wrap: anywhere;
}

.appwide-fora-worker-approval .appwide-fora-approval-worker span {
    min-width: 0;
}

.appwide-fora-worker-approval .appwide-fora-approval-inputs,
.appwide-fora-worker-approval.is-minimized .appwide-fora-approval-body {
    grid-template-rows: 0fr;
    opacity: 0;
}

.appwide-fora-worker-approval .appwide-fora-approval-inputs.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}

.appwide-fora-worker-approval .appwide-fora-approval-inputs > div {
    min-height: 0;
    overflow: hidden;
}

.appwide-fora-worker-approval .appwide-fora-approval-inputs pre {
    max-height: 150px;
    overflow: auto;
    margin: 10px 0 0;
    padding: 12px;
    border: 0;
    border-radius: 9px;
    background: rgba(9, 20, 31, .25);
    color: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.6;
}

.appwide-fora-worker-approval .appwide-fora-interaction-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.appwide-fora-worker-approval .appwide-fora-interaction-actions button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    background: transparent;
    border-color: rgba(207, 235, 247, .24);
    color: #e8f3f9;
}

.appwide-fora-worker-approval [data-decision="deny"] { margin-right: auto; }
.appwide-fora-worker-approval .appwide-fora-interaction-actions .appwide-fora-approval-once { background: rgba(232, 246, 255, .9); color: #172c3b; border-color: transparent; }
.appwide-fora-worker-approval button:focus-visible { outline: 2px solid #8be4ff; outline-offset: 2px; }
.appwide-fora-worker-approval button:disabled { opacity: .55; cursor: default; }
.appwide-fora-worker-approval .appwide-fora-interaction-state { color: #afc5d4; }
.appwide-fora-worker-approval .appwide-fora-approval-scope { margin-top: 10px; margin-bottom: 14px; font-size: 10px; line-height: 1.6; color: #afc5d4; }
.appwide-fora-worker-approval.is-minimized .appwide-fora-approval-minimize { visibility: hidden; }
.appwide-fora-worker-approval.is-minimized .appwide-fora-approval-heading::after { content: ' · review'; }

@media (prefers-reduced-motion: reduce) {
    .appwide-fora-worker-approval .appwide-fora-approval-body,
    .appwide-fora-worker-approval .appwide-fora-approval-inputs { transition: none; }
}

/* ---- FORA settings: full-surface panel under the toolbar, toggled by the gear ---- */
/* Settings is a floating modal over a dimmed page, not a takeover of the shell:
   the conversation stays visible behind it and the chrome keeps working. */
.agentchat-shell .appwide-fora-settings {
    /* Above the toolbar (65) and the conversations panel (70), or they paint
       over the top of the card. */
    /* Positioned against the chat shell, not the viewport: the shell already
       starts below the application's nav bar, so the scrim covers exactly FORA's
       area and the card centres there with nothing to measure. */
    position: absolute; inset: 0; z-index: 90;
    display: grid; place-items: center; padding: 28px 48px;
    background: rgba(15, 23, 32, .55);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;
}
.agentchat-shell.appwide-fora-settings-open .appwide-fora-settings { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.appwide-fora-settings-modal {
    position: relative;
    display: grid; grid-template-columns: 180px minmax(0, 1fr);
    width: min(1280px, 100%); height: min(820px, 100%);
    overflow: hidden; border-radius: 14px;
    --s-bg: #f6f7f9; --s-panel: #ffffff; --s-rail: #eef0f3; --s-ink: #1f2933; --s-ink-soft: #4b5563; --s-muted: #6b7280;
    --s-line: #e2e5ea; --s-line-strong: #c9ced6; --s-accent: #2a6fb8; --s-accent-soft: #e8f0fa; --s-green: #2f7d4f;
    color-scheme: light; background: var(--s-bg); color: var(--s-ink);
    box-shadow: 0 30px 80px rgba(3, 9, 16, .55);
    transform: translateY(8px) scale(.99); transition: transform .22s cubic-bezier(.333333, 0, .666667, 1);
}
.agentchat-shell.appwide-fora-settings-open .appwide-fora-settings-modal { transform: none; }
.appwide-fora-settings-close {
    position: absolute; z-index: 3; top: 12px; right: 16px;
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--s-muted); cursor: pointer;
}
.appwide-fora-settings-close svg { width: 15px; height: 15px; }
.appwide-fora-settings-close:hover { background: rgba(31, 41, 51, .12); color: var(--s-ink); }
.appwide-fora-settings-nav { display: flex; flex-direction: column; gap: 1px; min-height: 0; padding: 14px 8px; border-right: 1px solid var(--s-line); background: var(--s-rail); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c2c8d0 transparent; }
.appwide-fora-settings-nav button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--s-ink-soft); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.appwide-fora-settings-nav button svg { width: 15px; height: 15px; flex: none; color: var(--s-muted); }
.appwide-fora-settings-nav button:hover { background: rgba(0, 0, 0, .04); color: var(--s-ink); }
.appwide-fora-settings-nav button.agentchat-active { background: var(--s-panel); color: var(--s-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--s-accent); }
.appwide-fora-settings-nav button.agentchat-active svg { color: var(--s-accent); }
.appwide-fora-settings-body { min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 22px 40px; scrollbar-width: thin; scrollbar-color: #c2c8d0 transparent; }
.appwide-fora-settings-nav::-webkit-scrollbar,
.appwide-fora-settings-body::-webkit-scrollbar { width: 10px; }
.appwide-fora-settings-nav::-webkit-scrollbar-track,
.appwide-fora-settings-body::-webkit-scrollbar-track { background: transparent; }
.appwide-fora-settings-nav::-webkit-scrollbar-thumb,
.appwide-fora-settings-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 8px; background-clip: content-box; background-color: #c2c8d0; }
.appwide-fora-settings-nav::-webkit-scrollbar-thumb:hover,
.appwide-fora-settings-body::-webkit-scrollbar-thumb:hover { background-color: #98a1ad; }
.appwide-fora-settings-body h1 { margin: 0 0 2px; font-size: 16px; font-weight: 600; color: var(--s-ink); }
.appwide-fora-settings-lead { margin: 0 0 16px; color: var(--s-muted); font-size: 12.5px; line-height: 1.5; }
.appwide-fora-settings-card { margin: 0 0 14px; border: 1px solid var(--s-line); border-radius: 4px; background: var(--s-panel); }
.appwide-fora-settings-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--s-line); }
.appwide-fora-settings-card-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--s-ink); }
.appwide-fora-settings-card-head small { color: var(--s-muted); font-size: 11px; }
.appwide-fora-settings-card-body { padding: 12px 14px; }
.appwide-fora-settings-card-body label { display: block; font-size: 12px; color: var(--s-ink-soft); }
.appwide-fora-settings-card-body select { margin-left: 8px; }
.appwide-fora-settings-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--s-line); background: #fafbfc; }
.appwide-fora-settings-toolbar input[type="search"], .appwide-fora-settings-toolbar select, .appwide-fora-settings-card-body select,
.appwide-fora-memory-form input[type="text"], .appwide-fora-memory-form textarea {
    min-height: 30px; padding: 4px 9px; border: 1px solid var(--s-line-strong); border-radius: 4px; background: var(--s-panel); color: var(--s-ink); font: inherit; font-size: 12px; box-sizing: border-box;
}
.appwide-fora-settings-toolbar input[type="search"] { flex: 1; min-width: 140px; }
.appwide-fora-settings-primary { min-height: 30px; padding: 0 12px; border: 1px solid var(--s-accent); border-radius: 4px; background: var(--s-accent); color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.appwide-fora-settings-primary:hover { background: #245f9e; }
.appwide-fora-memory-form { padding: 12px 14px; border-bottom: 1px solid var(--s-line); background: #fafbfc; }
.appwide-fora-memory-form label { display: block; margin-bottom: 8px; font-size: 11.5px; color: var(--s-ink-soft); }
.appwide-fora-memory-form input[type="text"], .appwide-fora-memory-form textarea { display: block; width: 100%; margin-top: 3px; }
.appwide-fora-settings-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appwide-fora-settings-actions { display: flex; justify-content: flex-end; gap: 8px; }
.appwide-fora-settings-actions button:not(.appwide-fora-settings-primary) { min-height: 30px; padding: 0 12px; border: 1px solid var(--s-line-strong); border-radius: 4px; background: var(--s-panel); color: var(--s-ink-soft); font: inherit; font-size: 12px; cursor: pointer; }
.appwide-fora-settings-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--s-line); }
.appwide-fora-settings-item:last-child { border-bottom: 0; }
.appwide-fora-settings-item:hover { background: #fafbfc; }
.appwide-fora-settings-item-main { flex: 1; min-width: 0; }
.appwide-fora-settings-item-title { font-size: 13px; font-weight: 500; color: var(--s-ink); overflow-wrap: anywhere; }
.appwide-fora-settings-item-copy { margin-top: 3px; color: var(--s-ink-soft); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.appwide-fora-settings-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; color: var(--s-muted); font-size: 11px; }
.appwide-fora-settings-item-actions { display: flex; gap: 2px; flex: none; }
.appwide-fora-settings-item-actions button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--s-muted); cursor: pointer; }
.appwide-fora-settings-item-actions button:hover { background: rgba(0, 0, 0, .05); color: var(--s-ink); }
.appwide-fora-settings-item-actions svg { width: 15px; height: 15px; }
.appwide-fora-chip { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--s-line); border-radius: 3px; background: var(--s-accent-soft); color: var(--s-accent); font-size: 10.5px; font-weight: 400; }
.appwide-fora-chip.is-muted { background: #f1f2f4; color: var(--s-ink-soft); }
.appwide-fora-chip.is-violet { background: #f1eefa; color: #5b4a9e; }
.appwide-fora-chip.is-green { background: #e6f3ea; color: var(--s-green); }
.appwide-fora-mode-options { display: grid; gap: 8px; }
.appwide-fora-mode-option { display: flex; gap: 12px; align-items: flex-start; padding: 10px 13px; border: 1px solid var(--s-line); border-radius: 4px; background: var(--s-panel); cursor: pointer; }
.appwide-fora-mode-option:hover { border-color: var(--s-line-strong); }
.appwide-fora-mode-option.is-selected { border-color: var(--s-accent); background: var(--s-accent-soft); }
.appwide-fora-mode-option input { margin: 3px 0 0; accent-color: var(--s-accent); }
.appwide-fora-mode-option strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--s-ink); }
.appwide-fora-mode-option span { display: block; margin-top: 2px; color: var(--s-ink-soft); font-size: 11.5px; line-height: 1.45; }
.appwide-fora-settings-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--s-ink); }
.appwide-fora-settings-check input { margin: 0; accent-color: var(--s-accent); }
.appwide-fora-settings-more { display: block; width: 100%; padding: 9px; border: 0; border-top: 1px solid var(--s-line); background: transparent; color: var(--s-accent); font: inherit; font-size: 11.5px; cursor: pointer; }
.appwide-fora-settings-more[hidden] { display: none; }
.appwide-fora-settings-note { margin: 8px 0 0; color: var(--s-muted); font-size: 11.5px; line-height: 1.5; }
.appwide-fora-settings-empty { padding: 20px 14px; margin: 0; text-align: center; color: var(--s-muted); font-size: 12px; }
.appwide-fora-settings-error { padding: 14px; margin: 0; color: #b42318; font-size: 12px; }
@media (max-width: 640px) {
    .agentchat-shell .appwide-fora-settings { grid-template-columns: 48px minmax(0, 1fr); }
    .appwide-fora-settings-nav button span { display: none; }
    .appwide-fora-settings-nav button { justify-content: center; padding: 9px 0; }
    .appwide-fora-settings-row2 { grid-template-columns: 1fr; }
}

/* settings: loading, metrics, management lists */
.appwide-fora-skeleton { padding: 12px 14px; border-bottom: 1px solid var(--s-line); }
.appwide-fora-skeleton span { display: block; height: 10px; margin: 0 0 7px; border-radius: 3px; background: linear-gradient(90deg, #eceef1 25%, #f7f8fa 50%, #eceef1 75%); background-size: 200% 100%; animation: appwide-fora-shimmer 1.2s ease-in-out infinite; }
.appwide-fora-skeleton span:last-child { margin-bottom: 0; }
@keyframes appwide-fora-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.appwide-fora-settings-item.is-new { animation: appwide-fora-rise .22s ease-out both; }
@keyframes appwide-fora-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.appwide-fora-memory-list.is-loading { opacity: .55; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .appwide-fora-skeleton span, .appwide-fora-settings-item.is-new { animation: none; } }
.appwide-fora-settings-count { margin-left: auto; color: var(--s-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.appwide-fora-settings-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.appwide-fora-settings-stat { padding: 10px 13px; border: 1px solid var(--s-line); border-radius: 4px; background: var(--s-panel); min-width: 0; }
.appwide-fora-settings-stat b { display: block; font-size: 18px; font-weight: 600; color: var(--s-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.appwide-fora-settings-stat span { color: var(--s-muted); font-size: 11px; }
.appwide-fora-settings-item > .appwide-fora-mgmt-pick { flex: none; margin: 3px 0 0; accent-color: var(--s-accent); }
.appwide-fora-settings-danger { min-height: 30px; padding: 0 12px; border: 1px solid var(--s-line-strong); border-radius: 4px; background: var(--s-panel); color: #b42318; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.appwide-fora-settings-danger:hover:not(:disabled) { border-color: #b42318; background: #fdf2f1; }
.appwide-fora-settings-danger:disabled { color: var(--s-muted); cursor: default; }
.appwide-fora-settings-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.appwide-fora-settings-kv label { display: block; font-size: 11.5px; color: var(--s-ink-soft); }
.appwide-fora-settings-kv select { display: block; width: 100%; margin: 3px 0 0; }
.appwide-fora-settings-dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; margin: 0; font-size: 12px; }
.appwide-fora-settings-dl dt { color: var(--s-muted); }
.appwide-fora-settings-dl dd { margin: 0; color: var(--s-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .appwide-fora-settings-stats, .appwide-fora-settings-kv { grid-template-columns: 1fr; } .appwide-fora-settings-dl { grid-template-columns: 1fr; } }

/* settings: token usage chart */
.appwide-fora-usage-period { min-height: 26px; padding: 2px 6px; border: 1px solid var(--s-line-strong); border-radius: 4px; background: var(--s-panel); color: var(--s-ink); font: inherit; font-size: 11.5px; }
.appwide-fora-usage-chart { padding: 10px 14px 6px; }
.appwide-fora-usage-summary { margin: 0 0 6px; color: var(--s-muted); font-size: 11.5px; }
.appwide-fora-usage-summary b { color: var(--s-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.appwide-fora-usage-chart svg { display: block; width: 100%; height: auto; }
.appwide-fora-usage-chart .grid { stroke: var(--s-line); stroke-width: 1; }
.appwide-fora-usage-chart .tick { fill: var(--s-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.appwide-fora-usage-chart .area { fill: var(--s-accent); fill-opacity: .12; }
.appwide-fora-usage-chart .line { fill: none; stroke: var(--s-accent); stroke-width: 1.8; stroke-linejoin: round; }
.appwide-fora-usage-chart .dot { fill: var(--s-panel); stroke: var(--s-accent); stroke-width: 1.5; }

/* Settings row: Settings takes the width, Documentation and Report a bug sit
   at its right as icons. */
.agentchat-shell .agentchat-history-foot { display: flex; align-items: center; gap: 2px; }
.agentchat-shell .appwide-fora-foot-link {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-dim);
    font-size: 13px;
    cursor: pointer;
}
.agentchat-shell .appwide-fora-foot-link:hover {
    background: var(--panel-soft);
    color: var(--agentchat-accent, var(--indigo));
}

/* Guided project-skill form (phase 48) */
.appwide-fora-pskill-form { padding: 12px 14px; border-bottom: 1px solid var(--s-line); display: grid; gap: 10px; }
.appwide-fora-settings-card .appwide-fora-pskill-form label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--s-ink-soft); }
.appwide-fora-pskill-form input[type="text"], .appwide-fora-pskill-form input[type="search"], .appwide-fora-pskill-form select, .appwide-fora-pskill-form textarea { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 11px; border: 1px solid var(--s-line); border-radius: 8px; background: #fbfcfd; color: var(--s-ink); font: inherit; font-size: 13px; line-height: 1.4; transition: border-color .12s ease, box-shadow .12s ease; }
.appwide-fora-pskill-form textarea { resize: vertical; }
.appwide-fora-pskill-form input:focus, .appwide-fora-pskill-form select:focus, .appwide-fora-pskill-form textarea:focus { outline: 0; border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); background: var(--s-panel); }
.appwide-fora-pskill-form ::placeholder { color: var(--s-muted); }
.appwide-fora-pskill-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.appwide-fora-pskill-label { font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--s-ink-soft); margin-top: 2px; }
.appwide-fora-pskill-apps { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.appwide-fora-pskill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.appwide-fora-pskill-chips .appwide-fora-chip { gap: 6px; font-size: 11.5px; }
.appwide-fora-pskill-chip-remove { border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; }
.appwide-fora-pskill-picker { display: grid; grid-template-columns: auto 1fr; gap: 6px; position: relative; }
.appwide-fora-pskill-picker input[type="search"] { grid-column: 1 / -1; }
.appwide-fora-pskill-picker select + input[type="search"] { grid-column: 2; }
.appwide-fora-pskill-results { grid-column: 1 / -1; display: grid; gap: 2px; }
.appwide-fora-pskill-pick { text-align: left; padding: 6px 10px; border: 1px solid var(--s-line); border-radius: 8px; background: #fafbfc; font: inherit; font-size: 12px; color: var(--s-ink); cursor: pointer; }
.appwide-fora-pskill-pick:hover { background: var(--s-accent-soft); }
.appwide-fora-pskill-items { display: grid; gap: 6px; }
.appwide-fora-pskill-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px; align-items: center; }
.appwide-fora-pskill-row select { grid-column: 1; width: 110px; }
.appwide-fora-pskill-row select + .appwide-fora-pskill-row-text { grid-column: 1; }
.appwide-fora-pskill-items[data-kind="deliverables"] .appwide-fora-pskill-row { grid-template-columns: 110px 1fr auto auto auto; }
.appwide-fora-pskill-items[data-kind="deliverables"] .appwide-fora-pskill-row select, .appwide-fora-pskill-items[data-kind="deliverables"] .appwide-fora-pskill-row-text { grid-column: auto; }
.appwide-fora-pskill-row button, .appwide-fora-pskill-add { min-height: 30px; padding: 0 10px; border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-panel); color: var(--s-ink-soft); font: inherit; font-size: 12px; cursor: pointer; }
.appwide-fora-pskill-add { justify-self: start; }
.appwide-fora-pskill-details { border: 1px solid var(--s-line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 10px; background: #fafbfc; }
.appwide-fora-pskill-details summary { cursor: pointer; font-size: 12px; color: var(--s-ink-soft); }
.appwide-fora-pskill-form textarea[readonly] { background: #f6f7f9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
@media (max-width: 640px) { .appwide-fora-pskill-grid { grid-template-columns: 1fr; } }

/* /stylesheets/entity-preview.css */
.entity-preview-frame .modal-dialog { --entity-panel-width: 280px; --entity-panel-gap: 12px; --entity-frame-width: min(1600px, calc(100vw - 64px), calc((100dvh - 56px) * 4 / 3)); width: var(--entity-frame-width); max-width: none; height: calc(var(--entity-frame-width) * 3 / 4); margin: 28px auto; }
.entity-preview-frame .modal-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 0; border: 1px solid #d3dde5; border-radius: 12px; overflow: hidden; background: #fff; color: #33485a; }
.entity-preview-frame .entity-preview-header { position: relative; z-index: 10; display: flex; flex: none; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #e1e7ec; background: #fafbfc; }
.entity-preview-header > span { font-size: 12px; color: #718190; white-space: nowrap; }
.entity-preview-header > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.entity-preview-header > button, .entity-preview-header > a { flex: none; padding: 6px; border: 0; border-radius: 4px; background: transparent; color: #617485; font-size: 12px; }
.entity-preview-header > button:hover, .entity-preview-header > a:hover { background: #eaf0f4; }
.entity-preview-header [data-preview-application] { margin-left: auto; }
.entity-preview-header [data-preview-close] { white-space: nowrap; }
.entity-preview-frame .entity-preview-body { position: relative; isolation: isolate; display: flex; flex: 1; min-height: 0; overflow: hidden; }
.entity-preview-frame .entity-preview-mount { flex: 1; width: 0; height: 100%; min-width: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #b5bfca transparent; }
.entity-preview-frame .entity-preview-mount.maw-shell { display: block; grid-template-rows: none; }
.entity-preview-frame .entity-preview-loading { padding: 24px; color: #718190; }
.entity-preview-notices.maw-shell { position: fixed; top: 16px; right: 16px; z-index: 20; display: block; width: 340px; max-width: calc(100vw - 32px); height: auto; background: transparent; overflow: visible; pointer-events: none; }
.entity-preview-notices .maw-toast { background: #1d2c3b; color: #e2eaf1; border-color: #405669; border-left-color: #29abe2; }
.entity-preview-notices .maw-toast-info .maw-toast-icon { background: #29abe2; }
.entity-preview-notices .maw-toast-msg, .entity-preview-notices .maw-toast-close { color: #c1cfdb; }
.entity-preview-notices a { display: inline-block; margin-top: 6px; color: #67caff; font-weight: 600; }
.entity-preview-notices a:hover { color: #a4dfff; text-decoration: underline; }
.entity-preview-frame div.workflow .wf-main-container:not([data-header-view="ribbon"]) .header-left-compact { display: inline-block !important; }
.entity-preview-frame div.workflow .wf-main-container:not([data-header-view="ribbon"]) .plugin-settings-line > .wf-dropdowns { display: none !important; }
.entity-preview-frame div.workflow .wf-main-container:not([data-header-view="ribbon"]) .wf-main-content > .top-settings-container { height: auto !important; min-height: var(--wf-header-h, 80px); flex-shrink: 0; }
.entity-preview-frame .entity-preview-details { position: absolute; top: 0; bottom: 0; left: calc(100% + var(--entity-panel-gap)); width: var(--entity-panel-width); box-sizing: border-box; padding: 20px; border: 1px solid #d3dde5; border-radius: 12px; box-shadow: 0 8px 24px #14243226; background: #fafbfc; color: #33485a; overflow: auto; transform: translateX(-100%); opacity: 0; visibility: hidden; transition: transform .24s ease, opacity .2s ease, visibility 0s .24s; }
.entity-preview-frame .entity-preview-details.is-open { transform: translateX(0); opacity: 1; visibility: visible; transition-delay: 0s; }
.entity-preview-details h2 { font-size: 13px; font-weight: 600; margin: 0 0 16px; }
.entity-preview-details dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; margin-bottom: 30px; font-size: 12px; }
.entity-preview-details dt { font-weight: 400; color: #718190; overflow-wrap: anywhere; }
.entity-preview-details dd { overflow-wrap: anywhere; }
.entity-preview-details summary { cursor: pointer; }
.entity-preview-details pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; padding: 8px; font-size: 11px; }
.entity-preview-details p { font-size: 12px; color: #617485; line-height: 1.7; }
.entity-preview-details .entity-preview-access { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 8px 11px; border: 1px solid #c8dce6; border-radius: 6px; background: #edf5f9; color: #256381; font: inherit; font-size: 12px; cursor: pointer; }
.entity-preview-details .entity-preview-access:hover { background: #dfedf4; border-color: #90bdd2; }
.entity-preview-details .entity-preview-access:disabled { opacity: .5; cursor: default; }
.entity-preview-frame.fade { transition: opacity .16s ease; }
.entity-preview-frame.fade .modal-dialog { transform: translateY(8px); transition: transform .24s ease, width .24s ease, height .24s ease; }
.entity-preview-frame.in .modal-dialog { transform: translateY(0); }
.entity-preview-frame.in.details-visible .modal-dialog { --entity-frame-width: min(1600px, calc(100vw - 64px - var(--entity-panel-width) - var(--entity-panel-gap)), calc((100dvh - 56px) * 4 / 3)); transform: translateX(calc((var(--entity-panel-width) + var(--entity-panel-gap)) / -2)); }
.entity-preview-frame :focus-visible { outline: 2px solid #29abe2; outline-offset: 2px; }
body.entity-preview-open .d3v-side-rail, body.entity-preview-open .d3v-agent-dock,
body.modal-open:has(.entity-preview-inline) .d3v-side-rail, body.modal-open:has(.entity-preview-inline) .d3v-agent-dock { z-index: 1039 !important; }
.entity-preview-frame.entity-preview-inline { width: 100%; min-width: 0; font-size: 13px; line-height: 1.4; }
.entity-preview-frame.entity-preview-inline .modal-dialog { width: 100%; height: auto; margin: 0; }
.entity-preview-frame.entity-preview-inline .modal-content { height: clamp(320px, 65vh, 640px); }
.entity-preview-frame.entity-preview-inline .entity-preview-details { position: relative; top: auto; bottom: auto; left: auto; width: 100%; height: 0; padding: 0 16px; border-width: 0; box-shadow: none; transform: none; }
.entity-preview-frame.entity-preview-inline .entity-preview-details.is-open { height: 260px; padding: 16px; margin-top: 8px; border-width: 1px; }
@media (max-width: 700px) {
    .entity-preview-frame .modal-dialog { --entity-panel-width: min(240px, 44vw); --entity-panel-gap: 8px; --entity-frame-width: calc(100vw - 16px); height: calc(100dvh - 16px); margin: 8px auto; }
    .entity-preview-frame.in.details-visible .modal-dialog { --entity-frame-width: calc(100vw - 16px - var(--entity-panel-width) - var(--entity-panel-gap)); }
    .entity-preview-frame .entity-preview-header { gap: 6px; padding: 8px; }
    .entity-preview-header > span { font-size: 11px; }
    .entity-preview-frame .entity-preview-details { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .entity-preview-frame.fade, .entity-preview-frame.fade .modal-dialog, .entity-preview-frame .entity-preview-details, .entity-preview-notices .maw-toast { transition: none; }
}

/* /javascripts/plugins_src/llmgovernance/llmgovernance.css */
/* LLM Governance admin plugin (CS-480 Phase 6 frontend).
   All selectors are llmgov-prefixed to guarantee zero collision with other
   plugins (modelassembler and others). Direct-edit source, no concat. */

.llmgov-root { padding: 12px; box-sizing: border-box; }

.llmgov-header { align-items: flex-start; flex-direction: column; gap: 8px; border-bottom: 1px solid #e2e2e2; margin-bottom: 12px; flex-shrink: 0; }
.llmgov-title { font-size: 16px; font-weight: 600; color: #2c3e50; padding-bottom: 6px; }
.llmgov-title .fa { color: #e0a800; margin-right: 6px; }

.llmgov-tabs { border-bottom: none; display: flex; flex-wrap: wrap; }
.llmgov-tabs li { cursor: pointer; }
.llmgov-tabs li a { padding: 6px 12px; font-size: 13px; }
.llmgov-tabs li.active a { font-weight: 600; }

.llmgov-body { flex: 1; min-height: 0; overflow: auto; }
.llmgov-tab-pane { height: 100%; }
.llmgov-tab-pane.hidden { display: none; }
.hidden { display: none; }

/* toolbar */
.llmgov-toolbar { align-items: flex-end; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.llmgov-filter { display: flex; flex-direction: column; }
.llmgov-filter label { font-size: 11px; color: #888; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.llmgov-filter .form-control { min-width: 130px; }
.llmgov-apply { align-self: flex-end; }
.llmgov-status { font-size: 12px; color: #888; align-self: center; }

/* KPI cards (Usage tab) — scoped under .llmgov-cards so they don't collide
   with the block .llmgov-card used in Settings/Budgets. */
.llmgov-cards { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.llmgov-cards .llmgov-card { flex: 1; min-width: 150px; background: #f7f9fb; border: 1px solid #e2e8ee; border-radius: 6px; padding: 12px 14px; margin-bottom: 0; }
.llmgov-card-label { font-size: 11px; color: #8a98a8; text-transform: uppercase; letter-spacing: .04em; }
.llmgov-card-value { font-size: 22px; font-weight: 700; color: #2c3e50; margin-top: 4px; }
.llmgov-card-warn { background: #fff7e6; border-color: #ffe0a3; }
.llmgov-card-warn .llmgov-card-value { color: #b06a00; }

/* trend */
.llmgov-section-label { font-size: 12px; font-weight: 600; color: #5a6b7b; margin-bottom: 6px; }
.llmgov-trend { margin-bottom: 18px; }
.llmgov-trend-chart svg { display: block; }
.llmgov-bar { fill: #4a90d9; }
.llmgov-bar:hover { fill: #2f74bd; }
.llmgov-bar-segment { cursor: pointer; shape-rendering: crispEdges; transition: opacity .14s ease; }
.llmgov-bar-segment.is-muted { opacity: .18; }
.llmgov-bar-segment.is-highlighted { opacity: 1; stroke: #172333; stroke-width: 1px; }
.llmgov-bar-segment:focus { outline: none; stroke: #172333; stroke-width: 1.5px; }
.llmgov-trend-empty { font-size: 12px; color: #aaa; padding: 18px 0; }

/* table */
.llmgov-table-wrap { position: relative; }
.llmgov-table { font-size: 13px; }
.llmgov-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #8a98a8; border-bottom: 2px solid #e2e8ee; }
.llmgov-series-color-col { width: 28px; min-width: 28px; padding-left: 8px !important; padding-right: 4px !important; text-align: center; }
.llmgov-series-swatch { display: inline-block; width: 11px; height: 11px; border: 1px solid rgba(23, 35, 51, .18); border-radius: 2px; vertical-align: middle; }
.llmgov-breakdown-row { transition: opacity .14s ease, background-color .14s ease; }
.llmgov-breakdown-row.is-muted { opacity: .38; }
.llmgov-breakdown-row.is-highlighted td { background-color: #f3f7fb; }
.llmgov-empty { font-size: 13px; color: #aaa; padding: 16px 0; }

/* placeholder tabs */
.llmgov-placeholder { text-align: center; padding: 60px 20px; color: #9aa7b4; }
.llmgov-placeholder .fa { font-size: 34px; opacity: .5; }
.llmgov-placeholder-text { font-size: 15px; font-weight: 600; margin-top: 12px; color: #6a7884; }
.llmgov-placeholder-sub { font-size: 12px; margin-top: 4px; }

/* Settings tab — full-width responsive layout (uses available width on wide
   screens; functional styling, polish deferred per Rahul). */
.llmgov-settings { padding: 8px 4px; width: 100%; box-sizing: border-box; }
.llmgov-settings-note { font-size: 12px; color: #8a98a8; margin: 4px 0 14px; line-height: 1.5; }
.llmgov-settings-loading, .llmgov-settings-error { font-size: 13px; color: #8a98a8; padding: 18px 4px; }
.llmgov-settings-error { color: #b04a4a; }

.llmgov-card { background: #f7f9fb; border: 1px solid #e2e8ee; border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; }
.llmgov-provider-title { font-weight: 600; color: #2c3e50; font-size: 13px; cursor: pointer; padding: 4px 0; }
.llmgov-provider-title span { margin-left: 16px; font-weight: 400; color: #6a7884; overflow-wrap: anywhere; }
.llmgov-provider-card[open] .llmgov-provider-title { margin-bottom: 16px; }
.llmgov-settings-search { margin-bottom: 16px; max-width: 420px; }
.llmgov-field-key { color: #6a7884; font: 10px ui-monospace, monospace; overflow-wrap: anywhere; margin-top: 4px; }
.llmgov-test-status { font-size: 12px; overflow-wrap: anywhere; }
.llmgov-catalog-select { margin-top: 6px; }
.llmgov-field { margin-bottom: 10px; }
.llmgov-field label { display: block; font-size: 12px; color: #5a6b7b; margin-bottom: 3px; font-weight: 600; }
.llmgov-field .form-control { width: 100%; max-width: 100%; }
.llmgov-field select.form-control { max-width: 320px; }
.llmgov-field-desc { font-size: 11px; color: #8a98a8; margin: 4px 0 0; line-height: 1.4; }
.llmgov-settings-footer { margin-top: 14px; display: flex; align-items: center; gap: 12px; position: sticky; bottom: 0; background: #fff; padding: 8px 0; border-top: 1px solid #eef1f4; z-index: 2; }
.llmgov-settings-status { font-size: 12px; color: #2e8b57; }

/* Provider credential cards in a responsive grid — fills wide screens,
   collapses to 1 column on narrow ones. */
.llmgov-provider-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
.llmgov-provider-grid .llmgov-card { margin-bottom: 0; }
.llmgov-provider-card { background: #fbfcfd; }

/* Budgets tab — CRUD list + form (functional styling). */
.llmgov-budgets { padding: 8px 4px; width: 100%; box-sizing: border-box; }
.llmgov-budgets-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.llmgov-budgets-note { font-size: 11px; color: #8a98a8; }
.llmgov-budget-actions { white-space: nowrap; }
.llmgov-table td, .llmgov-table th { vertical-align: middle; font-size: 13px; }

/* Chains & Tiers + Catalog tabs (functional styling). */
.llmgov-chains, .llmgov-catalog { padding: 8px 4px; width: 100%; box-sizing: border-box; }
.llmgov-chains-toolbar { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.llmgov-tier-card { border: 1px solid #e2e8ee; border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; background: #fbfcfd; }
.llmgov-tier-head { font-size: 14px; margin-bottom: 8px; }
.llmgov-tier-rank { font-size: 11px; color: #8a98a8; margin-left: 6px; }
.llmgov-tier-disabled { font-size: 11px; color: #b06a00; }
.llmgov-tier-empty, .llmgov-entry-add-row { font-size: 12px; color: #8a98a8; padding: 6px 0; }
.llmgov-entry-add-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.llmgov-entry-table td { font-size: 13px; vertical-align: middle; }
.llmgov-entry-pos { width: 30px; color: #8a98a8; font-weight: 600; }
.llmgov-entry-actions, .llmgov-budget-actions { white-space: nowrap; }
.llmgov-price-editing td { background: #fff7e6; }

/* admin-btn-danger — danger/delete variant for buttons inside llmgovernance.
   admin-btn base + admin-btn-primary/outline are defined in admin.css (globally
   loaded). The danger variant isn't in admin.css yet, so it lives here. */
.admin-btn-danger {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}
.admin-btn-danger:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff;
}

/* Needs-pricing worklist — scrollable so a long (165+) list stays scannable
   without silently hiding rows; per-provider group labels for orientation. */
.llmgov-unpriced-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #e2e8ee;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fcfdfe;
}
.llmgov-unpriced-group-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6b7b;
    margin: 10px 0 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.llmgov-unpriced-scroll table:first-of-type { margin-top: 0; }
.llmgov-unpriced-scroll .llmgov-table { margin-bottom: 6px; }

/* ── Modern polish (CS-480 Ph7 UI pass) ──────────────────────────────── */

/* Cards: rounded with subtle depth + hover lift */
.llmgov-card { border-radius: 8px; box-shadow: 0 1px 2px rgba(20,40,70,.04); transition: box-shadow .15s ease; }
.llmgov-provider-card:hover { box-shadow: 0 2px 10px rgba(20,40,70,.08); }

/* Tables: row hover + comfortable padding */
.llmgov-table tbody tr { border-top: 1px solid #eef1f5; transition: background .12s ease; }
.llmgov-table tbody tr:hover { background: #f6f9fc; }
.llmgov-table td, .llmgov-table th { padding: 6px 10px; }
.llmgov-dim { color: #c2ccd6; }

/* Status badges + provider chips */
.llmgov-badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.llmgov-badge-ok   { background: #e3f3e8; color: #1f7a44; }
.llmgov-badge-warn { background: #fef3cd; color: #946c00; }
.llmgov-prov-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: #eef2f7; color: #5a6b7b; font-size: 11px; }

/* Secret (API key) field — masked with a reveal toggle.
   Masking is CSS-only (-webkit-text-security) on a type=text input, so NO
   browser/password-manager treats it as a credential (which would otherwise
   offer to save the live API key). Toggling .llmgov-secret-shown reveals it. */
.llmgov-secret-wrap { position: relative; }
.llmgov-secret-wrap .llmgov-secret {
    padding-right: 34px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em;
    -webkit-text-security: disc; text-security: disc;
}
.llmgov-secret-wrap .llmgov-secret.llmgov-secret-shown { -webkit-text-security: none; text-security: none; }
.llmgov-secret-toggle {
    position: absolute; top: 0; right: 0; height: 100%; width: 32px;
    border: none; background: transparent; color: #9aa7b4; cursor: pointer;
    border-radius: 0 4px 4px 0; transition: color .12s ease;
}
.llmgov-secret-toggle:hover { color: #4a90d9; }

/* Catalog — action toolbar + sticky filter bar */
.llmgov-catalog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.llmgov-catalog-version { font-size: 11px; color: #8a98a8; margin-left: auto; }
.llmgov-catalog-filters {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; margin-bottom: 12px;
    background: #f7f9fb; border: 1px solid #e8edf3; border-radius: 8px;
    position: sticky; top: 0; z-index: 3;
}
.llmgov-catalog-filters select.form-control { width: auto; min-width: 150px; }
.llmgov-cat-count { font-size: 12px; color: #8a98a8; margin-left: auto; white-space: nowrap; }

/* Search box with leading icon */
.llmgov-search { position: relative; flex: 1 1 220px; max-width: 360px; }
.llmgov-search .fa { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #aab4c0; font-size: 12px; pointer-events: none; }
.llmgov-search .llmgov-cat-search {
    width: 100%; padding: 6px 10px 6px 28px; font-size: 13px;
    border: 1px solid #d7dee6; border-radius: 6px; background: #fff; outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.llmgov-search .llmgov-cat-search:focus { border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74,144,217,.12); }

.llmgov-cat-table { margin-top: 4px; width: 100%; }
.llmgov-cat-table td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.llmgov-catalog-progress { margin: 8px 0 16px; font-size: 12px; line-height: 1.6; }
.llmgov-update-error { color: #b04a4a; }
.llmgov-cap-effort { max-width: 180px; white-space: normal; }
.llmgov-catalog .cf-context, .llmgov-catalog .cf-output { width: 160px; display: inline-block; }

/* /javascripts/plugins_src/assembler/assembler.css */
.maw-shell {
  /* ---- Surfaces (warm editorial paper) ---- */
  --bg:            #f1ece2;
  --panel:         #fbf8f2;
  --panel-soft:    #f4efe4;
  --panel-hover:   #ece5d6;

  /* ---- Lines ---- */
  --line:          #e5ddcd;
  --line-hi:       #d4c9b3;

  /* ---- Ink / text ---- */
  --navy:          #16233d;
  --navy2:         #26334f;
  --ink:           #34302a;
  --ink-mut:       #6d6759;
  --ink-dim:       #9c9480;

  /* ---- Primary brand - indigo/blue (data) ---- */
  --indigo:        #4f46e5;
  --indigo-2:      #667eea;
  --indigo-soft:   #edecfb;
  --indigo-bd:     #c9c8f0;

  /* ---- Data blue + green ---- */
  --blue:          #2f5fc4;
  --blue-soft:     #e9edfa;
  --green:         #3f7d4f;
  --green-soft:    #e9efdf;

  /** Added by rahul.suri on 06/18/2026 - Honda Assembler M4 - status red (failed/error chips); was referenced as var(--red) with no definition **/
  --red:           #c0392b;
  --red-soft:      #f7e3e0;

  /* ---- Emphasis - editorial clay / terracotta ---- */
  --orange:        #c2562f;
  --orange-strong: #a8431f;
  --orange-soft:   #f6e6d8;
  --orange-bd:     #e7c3a6;

  /* ---- Entity-type palette (color = type, everywhere) ---- */
  --t-sm:     #5048c6;   /* System Model  - indigo  */
  --t-asm:    #3f7d4f;   /* Assembly      - green   */
  --t-lc:     #c2562f;   /* Load Case     - clay    */
  --t-sim:    #2f5fc4;   /* Simulation    - blue    */
  --t-doe:    #0f857b;   /* DOE           - teal    */
  --t-rt:     #2f86b0;   /* Response Tpl  - sky     */
  --t-ds:     #9c9480;   /* Design Step   - grey    */
  --t-task:   #b45309;   /* Task          - amber   */
  --t-agent:  #7c3aed;   /* Agent         - violet  */
  --t-note:   #0891b2;   /* Note          - cyan    */
  --t-report: #475569;   /* Report        - slate   */
  --t-file:   #6c757d;   /* File          - grey    */
  /** Added by rahul.suri on 07/10/2026 - honda-assembler-workflows Phase 04 - Run (workflowexecution) node base/fallback color; the rendered node is normally status-tinted (see GraphStyle.statusColor -- green/red/blue), this is only shown for stopped/unknown status **/
  --t-we:     #475569;   /* Workflow Execution - slate, same family as --t-report (status-tinted per node) */

  /* ---- Elevation + geometry ---- */
  --radius:    12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(60,48,28,.06), 0 1px 3px rgba(60,48,28,.05);
  --shadow:    0 1px 3px rgba(60,48,28,.08), 0 10px 26px rgba(60,48,28,.08);

  /* ---- Mono stack (data / IDs / metrics / kbd) ---- */
  --font-mono: Menlo, Monaco, Consolas, monospace;

  /* ---- Base typography ---- */
  font-size: 14px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;

  /* Lets width/height transitions animate TO keyword sizes (max-content) --
     the topbar tab strip's 160px <-> full-name expand rides this. Inherited;
     Chrome 129+; older browsers ignore it and the swap snaps instead. */
  interpolate-size: allow-keywords;
}

/* ============================================================
   1. GRID SKELETON
   ============================================================ */

.maw-shell {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Utils.mount: a full-page overlay fills the page box (#main_content, or the layer it opened from) between the
   d3VIEW nav and footer, not the viewport; height:auto undoes the 100vh above. A full-screen include card lifts
   #main_content over the whole viewport, and overlays stay viewport-sized over it. */
#main_content:not(:has(.maw-incl-fullscreen)) .maw-page-layer {
  position: absolute;
  inset: 0;
  height: auto;
}

.maw-shell *,
.maw-shell *::before,
.maw-shell *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Region containers - ShellView injects TopBarView / RailView / WorkspaceView here */
.maw-shell .maw-region-topbar   { display: contents; }
.maw-shell .maw-region-rail     { display: contents; }
.maw-shell .maw-region-workspace{ display: contents; }

/* Body row: rail + workspace side-by-side */
.maw-shell .maw-body {
  display: grid;
  grid-template-columns: 228px 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  /* Sliding collapse of the left rail (hamburger in the topbar). */
  transition: grid-template-columns .22s ease;
  min-height: 0;
  /* Fill the shell's remaining height. The page's `body.app-shell-frozen
     #main_content > div` global forces .maw-shell to flex-column (overriding
     our grid), so the body must grow as a flex item; harmless under grid
     (flex is ignored on grid items). Without this the body sits at content
     height and leaves an empty band below it. */
  flex: 1 1 auto;
}

.maw-shell .maw-repository-readiness {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 1.35;
  z-index: 4;
}

.maw-shell .maw-repository-readiness[hidden] { display: none; }

.maw-shell .maw-repository-readiness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-strong);
  flex: none;
}

.maw-shell .maw-repository-readiness-copy {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}

.maw-shell .maw-repository-readiness-copy strong {
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}

.maw-shell .maw-repository-readiness.is-ready {
  background: var(--green-soft);
  color: var(--green);
}

.maw-shell .maw-repository-readiness.is-ready .maw-repository-readiness-dot {
  background: var(--green);
}

.maw-shell .maw-repository-readiness.is-recovery-needed {
  background: #fff3f1;
  color: #9f241c;
}

.maw-shell .maw-repository-readiness.is-recovery-needed .maw-repository-readiness-dot {
  background: #c43228;
}

.maw-shell .maw-repository-readiness.is-status-unavailable {
  background: var(--panel-hover);
}

.maw-shell .maw-repository-readiness.is-status-unavailable .maw-repository-readiness-dot,
.maw-shell .maw-repository-readiness.is-checking .maw-repository-readiness-dot {
  background: var(--ink-dim);
}

.maw-shell .maw-repository-readiness-action {
  appearance: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 4px 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  flex: none;
}

.maw-shell .maw-repository-readiness-action:hover {
  background: rgba(255, 255, 255, .55);
}


/* ============================================================
   2. TOP BAR
   ============================================================ */

/* Shortened + simplified 2026-08-19 (Rahul): the topbar carries ONLY the
   hamburger, the tab strip (with its "..." fold + favorites star), and the
   search trigger -- project pill and Import/Settings moved to the rail. Fixed
   44px height (was ~58px), no shadow: the active tab connects FLUSH to the
   content pane below by painting over the border-bottom (chrome-strip look,
   same technique as the Simulations page strip in spa/simulation.css). */
.maw-shell .maw-topbar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 10px 0 0;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 5;
  position: relative;
}

/* ---- Left cluster: hamburger + search (2026-08-20, Rahul) ----
   While the rail is OPEN the cluster spans EXACTLY the rail column (228px,
   the .maw-body grid) so the tab band -- and the Home tab -- start flush
   with the workspace's left edge instead of floating over the navy rail.
   The project card grows to fill the span (Phase 57). Collapsed, the
   cluster shrinks back to hamburger + a narrower card. Both widths are
   numeric so the .22s width transition tracks the rail's own grid
   animation; the hamburger still carries the open/closed color signal
   (see .maw-rail-toggle in section 3). */
.maw-shell .maw-topbar-left {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 6px;
  width: 228px;   /* == the rail column in .maw-body */
  transition: width .22s ease;
}
.maw-shell.is-rail-collapsed .maw-topbar-left { width: 138px; }

/* Spotlight trigger (top-right cluster since Phase 57): magnifier + Search... text +
   command-K chip. Clicking (or Cmd/Ctrl+K anywhere) opens the centered spotlight
   search (see SPOTLIGHT SEARCH below). */
.maw-shell .maw-cmd {
  flex: none;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 9px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.maw-shell .maw-cmd-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ink-mut);
  transition: opacity .18s ease;
}

.maw-shell .maw-cmd:hover {
  border-color: var(--line-hi);
  background: var(--panel);
}

.maw-shell .maw-cmd svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.maw-shell .maw-kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--panel);
}

/* ---- SPOTLIGHT SEARCH (SpotlightSearchView, 2026-08-20) ----
   Centered command-K overlay over the SAME engine as the @ mention picker.
   The option rows inside reuse the picker's unscoped .maw-ref-* classes
   (stylesheets/references/project-references.css); the .maw-spot overrides
   below only enlarge them for the centered context. */
.maw-shell .maw-spot-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(15, 23, 42, .34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* Flex-center the panel (launcher idiom) -- vertical centering, and the
     panel re-centers itself automatically as the animated body height
     changes, so growth repositions smoothly instead of hanging off the top. */
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.maw-shell .maw-spot-overlay.is-open {
  display: flex;
  /* display:none -> flex restarts the animation, so every open fades in. */
  animation: maw-spot-fade .16s ease-out;
}

.maw-shell .maw-spot {
  width: min(640px, 92vw);
  max-height: 100%;
  animation: maw-spot-float .2s cubic-bezier(.2, .7, .3, 1);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.maw-shell .maw-spot-inputrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  height: 52px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-spot-inputrow svg {
  width: 18px;
  height: 18px;
  color: var(--ink-dim);
  flex: none;
}

.maw-shell .maw-spot-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.maw-shell .maw-spot-input::placeholder { color: var(--ink-dim); }

.maw-shell .maw-spot-close {
  cursor: pointer;
  flex: none;
}

.maw-shell .maw-spot-body {
  max-height: min(420px, 52vh);
  overflow: auto;
  padding: 6px;
  /* SpotlightSearchView._syncBodyHeight pins an explicit px height after
     every render (height:auto cannot transition) -- this is what animates
     the grow/shrink as results change, keeping the centered panel's
     reposition smooth. The max-height above stays as the clamp. */
  transition: height .18s ease;
}

@keyframes maw-spot-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes maw-spot-float {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Enlarge the reused picker rows for the centered context. */
.maw-shell .maw-spot .maw-ref-option { padding: 8px 10px; }
.maw-shell .maw-spot .maw-ref-option-copy strong { font-size: 12.5px; }
.maw-shell .maw-spot .maw-ref-option-copy small { font-size: 10.5px; }
.maw-shell .maw-spot .maw-ref-glyph {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.maw-shell .maw-spot .maw-ref-state { padding: 18px 12px; font-size: 12px; }

.maw-shell .maw-spot-foot {
  display: flex;
  gap: 14px;
  padding: 7px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-size: 10.5px;
  flex: none;
}

/* Project card (Phase 57): right of the hamburger, filling the left cluster; the
   name truncates and the caret says it opens the project menu. */
.maw-shell .maw-proj {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px 0 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.maw-shell .maw-proj:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
}

.maw-shell .maw-proj:focus-visible {
  box-shadow: 0 0 0 2px var(--indigo-soft), 0 0 0 3px var(--indigo-bd);
  outline: none;
}

.maw-shell .maw-proj .maw-proj-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  /* background comes inline from TopBarView._projLogoStyle -- the project's
     own chosen color when set, else the indigo gradient. */
  flex: none;
}

.maw-shell .maw-proj .maw-proj-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-proj .maw-proj-caret {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ink-mut);
}
/* Collapsed rail: the tile and the caret only (the name stays in the tooltip). */
.maw-shell.is-rail-collapsed .maw-proj .maw-proj-meta { display: none; }

/* Project menu (Phase 57): a page layer holding the panel under the project card
   (TopBarView._toggleProjectMenu places it). */
.maw-shell.maw-projmenu-layer { position: absolute; inset: 0; z-index: 60; background: transparent; }  /* .maw-shell paints the page background */
.maw-shell .maw-projmenu {
  position: absolute;
  width: 340px;
  max-height: calc(100% - 64px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .18);
  overflow: hidden;
}
.maw-shell .maw-projmenu-search {
  margin: 10px 10px 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
}
.maw-shell .maw-projmenu-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 6px;
}
.maw-shell .maw-projmenu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.maw-shell .maw-projmenu-row:hover { background: var(--panel-soft); }
.maw-shell .maw-projmenu-row.is-current { background: var(--indigo-soft); font-weight: 600; }
.maw-shell .maw-projmenu-row:focus-visible { outline: 2px solid var(--indigo-bd); outline-offset: -2px; }
.maw-shell .maw-projmenu-row .maw-proj-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.maw-shell .maw-projmenu-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-projmenu-count {
  flex: none;
  font-size: 12px;
  color: var(--ink-mut);
  font-variant-numeric: tabular-nums;
}
/* A count still on its way is a faint bar, not a number. */
.maw-shell .maw-projmenu-count:empty::before {
  content: '';
  display: inline-block;
  width: 52px;
  height: 9px;
  border-radius: 5px;
  background: var(--line);
}
.maw-shell .maw-projmenu-more {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 7px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: none;
  font-size: 12.5px;
  color: var(--indigo);
  cursor: pointer;
}
.maw-shell .maw-projmenu-note {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--ink-mut);
}
.maw-shell .maw-projmenu-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}

/* ---- Brand ---- */
.maw-shell .maw-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 206px;
}

.maw-shell .maw-brand .maw-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 6px rgba(79,70,229,.3);
  flex: none;
}

.maw-shell .maw-brand .maw-mark svg {
  width: 17px;
  height: 17px;
}

.maw-shell .maw-brand .maw-name {
  font-weight: 700;
  letter-spacing: -.2px;
  font-size: 16px;
  color: var(--navy);
}

.maw-shell .maw-brand .maw-sub {
  color: var(--ink-dim);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- Scalable tab strip ----
   Flush chrome strip (tab-strip rebuild): tabs sit edge-to-edge with a
   hairline divider (no floating-pill gap); each tab shrinks along a fixed
   ladder (FLOOR 36px .. its own text width) as more tabs open, and the active tab
   is width-protected (ACTIVE_MIN 132px) so it always keeps a readable label.
   The strip no longer scrolls -- TopBarView folds anything that would shrink
   past FLOOR into the "..." menu (see .maw-tab-overflow below) instead.

   Idle button gutter (2026-07-12 refinement): an idle, non-hovered,
   non-active tab reserves NO space for its star/close buttons -- padding is
   a flat 6px on both sides always, so hovering never changes it (no
   reflow). On hover, and permanently on .maw-active, the buttons fade/slide
   in over the tab's right edge and the label gets a right-edge mask (see
   .maw-tab-label below) so truncated text recedes under them instead of
   colliding. The favorite star is HOVER-ONLY, same trigger as the close
   button (2026-07-12 follow-up) -- a bookmarked tab is gold ONLY while
   shown on hover/active; it no longer persists visible at rest, so idle
   tabs are fully tight whether favorited or not. */
.maw-shell .maw-tabs-shell {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  position: relative;
}

.maw-shell .maw-tabs-viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  /* overflow VISIBLE (chrome-strip restyle 2026-08-19): the strip never
     scrolls by design -- TopBarView folds anything that doesn't fit into the
     "..." menu -- and hidden overflow would clip the active tab's -1px bottom
     overlap onto the topbar border (same reason the Simulations strip has no
     overflow:hidden). */
  overflow: visible;
}

/* The recessed idle BAND (chrome-strip restyle 2026-08-19): the whole tab row
   is filled with the darker closed-tab color and anchored to the bottom of
   the topbar, so empty space to the right of the tabs reads as the strip
   (not the topbar behind it). Idle tabs are transparent ON this band and
   separate via the lighter divider pills below; the active tab is a --panel
   pill that rises above the band and connects flush into the content pane. */
.maw-shell .maw-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 38px;
  margin-top: 6px;
  align-self: flex-end;
  /* Left breathing room so the band's rounded corner shows to the LEFT of
     the permanent Home tab instead of being hidden behind it. 4px so the
     left gap matches the 4px gap ABOVE the raised chips (their margin-top)
     (2026-08-20, Rahul). */
  padding: 0 6px 0 4px;
  background: var(--panel-hover);
  border-radius: 9px 9px 0 0;
}

.maw-shell .maw-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Fixed-width tab model (2026-08-19, Rahul, matches the AppPage strip):
     idle tabs are a FIXED 160px pill and never shrink (TopBarView folds
     anything that does not fit into the "..." menu -- keep TAB_FLOOR there
     in sync with this width). Only the ACTIVE tab expands, to the full
     length of its name (width: max-content below). */
  flex: 0 0 auto;
  width: 160px;
  position: relative;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--ink-mut);
  font-size: 12.5px;
  font-weight: 500;
  cursor: grab;
  /* Stacking context so the ::after hover glow's z-index:-1 stays INSIDE the
     tab (above the band) instead of dropping behind the band's background. */
  z-index: 0;
  /* Transition width ONLY for the size change -- with interpolate-size on
     .maw-shell (modern Chrome) the 160px <-> max-content swap animates as the
     smooth opening movement; elsewhere it degrades to an instant snap.
     padding is transitioned too so the active tab's 10px -> 44px right-gutter
     change (button gutter, see .maw-active) rides the same movement.
     Never `transition: all` here. */
  transition: width .18s ease, padding .18s ease, color .15s ease, opacity .15s ease;
  outline: none;
}

.maw-shell .maw-tab.maw-tab-hidden { display: none; }

/* Permanent Home tab (2026-08-19; peer-styled 2026-08-20, Rahul): renders
   exactly like every other tab -- same band color idle, same hover glow and
   divider, same 160px footprint, same connected active pill. Its ONLY
   differences: no close/favorite buttons (the template renders none, and
   the symmetric active-padding override below compensates for the missing
   44px button gutter) and it is not draggable. */
.maw-shell .maw-tab--home {
  cursor: pointer;   /* activate-only -- the one non-peer behavior kept */
}
.maw-shell .maw-tab--home .maw-tab-label {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Lighter divider pill between adjacent idle tabs (chrome-style); the
   general-sibling form skips .maw-tab-hidden entries so a folded tab never
   leaves a stray divider. Hidden next to the active or a hovered tab so the
   highlighted tab reads as one clean pill. */
.maw-shell .maw-tab:not(.maw-tab-hidden) ~ .maw-tab:not(.maw-tab-hidden)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 1px;
  background: var(--panel);
  z-index: 3;
  transition: opacity .12s ease;
}
.maw-shell .maw-tab.maw-active::before,
.maw-shell .maw-tab.maw-active + .maw-tab::before,
.maw-shell .maw-tab:hover::before,
.maw-shell .maw-tab:hover + .maw-tab::before {
  opacity: 0;
}

/* Idle hover: an inset rounded glow that does NOT fill the tab (the band
   stays visible around it), plus darker text. */
.maw-shell .maw-tab::after {
  content: "";
  position: absolute;
  inset: 5px 4px;
  border-radius: 7px;
  background: transparent;
  transition: background .15s ease;
  z-index: -1;
  pointer-events: none;
}

.maw-shell .maw-tab:hover {
  color: var(--ink);
}

.maw-shell .maw-tab:not(.maw-active):hover::after {
  background: rgba(60, 48, 28, .08);
}

.maw-shell .maw-tab:focus-visible {
  box-shadow: 0 0 0 2px var(--indigo-soft), 0 0 0 3px var(--indigo-bd);
}

/* Active tab: a --panel pill visually CONNECTED to the content below.
   margin-top 4px lets the band color show above it and through the rounded
   corners; margin-bottom -1px drops it over the topbar's border-bottom and
   its own background paints that 1px out, so the separator line is "broken"
   under the active tab and it reads as one continuous surface with the pane
   (Chrome-style). width: max-content = the ENTIRE tab name (2026-08-19,
   Rahul) -- the label's 360px cap bounds monsters, and the width transition
   above animates the 160px <-> full-name swap.

   padding-right 44px (2026-08-20, Rahul): the active tab reserves a REAL
   gutter for the close x (right 6..22) + hover star (right 24..40) instead
   of letting them overlay the label -- that overlay + the 42px fade mask
   was hiding the tail of the name on exactly the tab that expanded to show
   it. Idle tabs keep the flat 10px + overlay + mask model (no reflow on
   hover). Keep this 44px in sync with the .maw-tab-action right offsets. */
.maw-shell .maw-tab.maw-active {
  width: max-content;
  min-width: 160px;
  max-width: 440px;
  padding-right: 44px;
  margin-top: 4px;
  margin-bottom: -1px;
  background: var(--panel);
  border: none;
  border-radius: 9px 9px 0 0;
  color: var(--navy);
  font-weight: 600;
  z-index: 2;
}

.maw-shell .maw-tab.maw-active:hover {
  background: var(--panel);
  color: var(--navy);
}

/* The Home tab has NO action buttons, so the active button gutter above
   would just be a lopsided 44px hole -- restore its symmetric padding.
   (Must sit AFTER .maw-tab.maw-active: same 0,3,0 specificity, later
   declaration wins.) */
.maw-shell .maw-tab--home.maw-active {
  padding-right: 10px;
}

.maw-shell .maw-tab .maw-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* Entity-type icon (2026-07-12) -- replaces the plain dot in the chip, the
   "..." overflow rows, and the favorites rows whenever the tab/bookmark's
   type has a known icon in TopBarView's TAB_ICON_SVG map; unknown types keep
   rendering the dot above instead (see TopBarView._tabIcon). Tinted via the
   wrapping span's `color` (inline style = the tab's own color, same value the
   dot used for `background`), inherited by the svg's stroke/fill=currentColor.
   Sized to sit inside the 34px-tall idle chip with the SAME flex:none
   footprint the dot had -- no extra width is reserved, so the idle-tight chip
   (no fixed right gutter) is unaffected. */
.maw-shell .maw-tab-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.maw-shell .maw-tab-icon svg {
  width: 14px;
  height: 14px;
}

.maw-shell .maw-tab .maw-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  /* Caps the expanded tab (max-width:max-content on .maw-tab) so a very long
     name ellipsises instead of growing the tab huge. 360px (2026-08-20, was
     280) so real DOE run names -- measured 325px on the live cohort -- show
     in FULL on the active tab; only true monsters still ellipsise. Keep the
     .maw-active max-width (440px = 10 + 14 icon + 5 gap + this + 44 gutter)
     in sync. TopBarView no longer mirrors these numbers -- its fold budget
     MEASURES each tab's live width (2026-08-22), so widening either cap here
     costs nothing there. */
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Idle tabs reserve no button gutter (padding is flat 10px always -- see
   .maw-tab above). On hover the label's right edge fades out under the
   overlaid buttons instead of reflowing the tab -- no padding/width change
   ever happens on an IDLE tab. The ACTIVE tab is excluded (2026-08-20): it
   reserves a real 44px gutter (.maw-active padding-right), so its buttons
   never overlap the label and masking it would re-hide the tail of the very
   name the expansion exists to show. (The bookmarked-idle exception was
   removed 2026-07-12 -- the star no longer shows at rest, so the label never
   needs to recede for it while idle.) */
.maw-shell .maw-tab:not(.maw-active):hover .maw-tab-label {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent);
}

.maw-shell .maw-tab .maw-tab-action {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-dim);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease, color .12s ease, background .12s ease;
}

.maw-shell .maw-tab .maw-tab-action svg {
  width: 11px;
  height: 11px;
}

/* On an IDLE tab the icons overlay the tab's right edge (no reserved gutter
   -- see .maw-tab padding above) -- close flush right, the favorite star
   just left of it with a 2px gap. The 42px label mask above matches this
   footprint (6..40px from the right edge) so the label recedes exactly
   where these buttons sit on hover. The ACTIVE tab instead reserves a real
   44px padding-right gutter for the same offsets (2026-08-20), so there the
   buttons sit BESIDE the label, never over it.

   Reveal triggers are SPLIT per button (2026-07-12 follow-up 2, Rahul):
   close (.maw-tab-close) keeps BOTH triggers -- hover OR .maw-active -- so
   the active tab can always be closed without hovering. The favorite star
   (.maw-tab-bookmark-toggle) is HOVER-ONLY even on the active tab -- an
   idle active tab shows ONLY the close x; hovering it (active or inactive)
   reveals the star alongside. */
.maw-shell .maw-tab .maw-tab-close { right: 6px; }
.maw-shell .maw-tab .maw-tab-bookmark-toggle { right: 24px; }

.maw-shell .maw-tab:hover .maw-tab-close,
.maw-shell .maw-tab.maw-active .maw-tab-close {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.maw-shell .maw-tab:hover .maw-tab-bookmark-toggle {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Solid chip background (2026-07-12 follow-up 2): a revealed action button
   now paints an OPAQUE surface matching whatever the tab itself looks like
   at that spot, so the button reads as a solid chip cleanly covering the
   label underneath instead of the (masked) text bleeding through a
   half-transparent button -- the label mask above still recedes the text,
   but this opaque bg is now the primary "don't fight the text" mechanism.
   A hovered INACTIVE tab's own surface is --panel-hover (.maw-tab:hover,
   section above); the ACTIVE tab's own surface is --panel, whether idle or
   hovered (.maw-active's background wins that tie -- same specificity,
   declared after .maw-tab:hover below, so an active+hovered tab still
   matches --panel, not --panel-hover). Declaration order matters here. */
.maw-shell .maw-tab:hover .maw-tab-action {
  background: var(--panel-hover);
}

.maw-shell .maw-tab.maw-active .maw-tab-action {
  background: var(--panel);
}

/* Gold color when favorited -- applies only while the button is actually
   shown (hover/active, per the opacity rule above); no idle-visibility rule
   here anymore, so a favorited star on an idle tab stays hidden like the
   close button. */
.maw-shell .maw-tab .maw-tab-bookmark-toggle.is-bookmarked {
  color: #b7791f;
}

.maw-shell .maw-tab .maw-tab-bookmark-toggle.is-bookmarked svg { fill: currentColor; }

.maw-shell .maw-tab .maw-tab-bookmark-toggle:hover {
  color: #9a6700;
  background: #fff8db;
}

.maw-shell .maw-tab .maw-tab-close:hover {
  color: #b42318;
  background: #fee4e2;
}

/* Split-group chip (phase 13.6): ONE merged chip standing for a 2-slot
   side-by-side. Dashed border + overlapping member dots distinguish it from
   a single-entity tab (line-hi so the dashes read against the darker band);
   active state reuses the normal connected-pill look. */
.maw-shell .maw-tab--split {
  border: 1px dashed var(--line-hi);
  border-radius: 8px 8px 0 0;
}
.maw-shell .maw-tab--split.maw-active {
  border: 1px dashed var(--line-hi);
  border-bottom-color: transparent;
}

/* The split chip carries a THIRD action (2026-08-21, Rahul): "split apart",
   which dissolves the group and keeps both member tabs open -- so right-to-
   left the trio reads unsplit(42) / favorite(24) / close(6). Everything here
   is scoped to .maw-tab--split so an ordinary 2-button tab is untouched.

   Both gutters below are the 2-button values + 18px, matching the extra
   button's own 16px + 2px gap: the active chip's reserved padding-right
   (44 -> 62, see the .maw-tab.maw-active note) and the idle-hover label mask
   (42 -> 60), which must keep covering exactly the button footprint. Reveal
   is hover-only, like the favorite star -- ungrouping is deliberate, and an
   idle active chip should still show only its close x. */
.maw-shell .maw-tab--split .maw-tab-unsplit { right: 42px; }

.maw-shell .maw-tab--split.maw-active { padding-right: 62px; }

.maw-shell .maw-tab--split:not(.maw-active):hover .maw-tab-label {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
}

.maw-shell .maw-tab--split:hover .maw-tab-unsplit {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.maw-shell .maw-tab--split .maw-tab-unsplit:hover {
  color: var(--indigo);
  background: var(--panel-hover);
}

.maw-shell .maw-tab .maw-tab-dots {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.maw-shell .maw-tab .maw-tab-dots .maw-tab-dot + .maw-tab-dot {
  margin-left: -3px;
  box-shadow: 0 0 0 1.5px var(--panel);
}

.maw-shell.is-tab-reordering,
.maw-shell.is-tab-reordering * {
  -webkit-user-select: none;
  user-select: none;
  cursor: grabbing;
}

.maw-shell .maw-tab.is-reordering { opacity: .35; }

.maw-shell .maw-tab.is-drop-before {
  box-shadow: -3px 0 0 var(--indigo);
}

.maw-shell .maw-tab.is-drop-after {
  box-shadow: 3px 0 0 var(--indigo);
}

/* ---- Tab overflow ("..." N) menu ----
   Replaces the old scroll arrows. TopBarView measures .maw-tabs-shell and
   folds any tabs that would shrink below FLOOR into this menu instead of
   scrolling -- see TopBarView._updateTabOverflow. Hidden entirely (no
   .is-visible) when every open tab already fits in the strip. */
.maw-shell .maw-tab-overflow {
  position: relative;
  flex: none;
  display: none;
  margin-left: 3px;
}

.maw-shell .maw-tab-overflow.is-visible {
  display: flex;
  align-items: center;
}

.maw-shell .maw-tab-overflow-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}

.maw-shell .maw-tab-overflow-toggle:hover,
.maw-shell .maw-tab-overflow-toggle[aria-expanded="true"] {
  color: var(--indigo);
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-tab-overflow-toggle svg { width: 16px; height: 16px; }

.maw-shell .maw-tab-overflow-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--indigo);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--panel);
}

.maw-shell .maw-tab-overflow-popover {
  position: absolute;
  top: 42px;
  right: 0;
  width: 300px;
  max-height: 360px;
  display: none;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(30, 41, 59, .18);
  z-index: 40;
}

.maw-shell .maw-tab-overflow-popover.is-open { display: block; }

.maw-shell .maw-tab-overflow-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .maw-tab-overflow-search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.maw-shell .maw-tab-overflow-search:focus {
  border-color: var(--indigo-bd);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

.maw-shell .maw-tab-overflow-list {
  max-height: 314px;
  padding: 6px;
  overflow-y: auto;
}

.maw-shell .maw-tab-overflow-row {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-tab-overflow-row:hover { background: var(--panel-hover); }

.maw-shell .maw-tab-overflow-row.is-filtered-out { display: none; }

.maw-shell .maw-tab-overflow-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
}

.maw-shell .maw-tab-overflow-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-tab-overflow-kind {
  flex: none;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.maw-shell .maw-tab-overflow-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
}

/* ---- Flat favorites (star) popover ----
   Replaces the old bookmark folder-tree popover + folder-editor modal with a
   single flat, searchable list. Favoriting a tab is done from the chip's own
   hover-star (.maw-tab-bookmark-toggle, above) which calls
   appState.toggleTabBookmark; this popover only lists/opens/removes. */
.maw-shell .maw-tab-favorites {
  position: relative;
  flex: none;
  margin-left: 3px;
}

.maw-shell .maw-favorites-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}

.maw-shell .maw-favorites-toggle:hover,
.maw-shell .maw-favorites-toggle[aria-expanded="true"] {
  color: #9a6700;
  background: #fff8db;
  border-color: #f2d675;
}

.maw-shell .maw-favorites-toggle.has-favorites { color: #b7791f; }
.maw-shell .maw-favorites-toggle.has-favorites svg { fill: currentColor; }
.maw-shell .maw-favorites-toggle svg { width: 16px; height: 16px; }

/* ---- Clear-all-tabs trash (right of the favorites star, 2026-08-19) ----
   Hidden entirely while no tabs are open; red-tinted hover, matching the
   per-tab close button's danger colors. */
.maw-shell .maw-tab-clear-all {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0;
  transition: color .12s, background .12s, border-color .12s;
}

.maw-shell .maw-tab-clear-all.is-visible { display: inline-flex; }

.maw-shell .maw-tab-clear-all:hover {
  color: #b42318;
  background: #fee4e2;
  border-color: #f6c8c3;
}

.maw-shell .maw-tab-clear-all svg { width: 16px; height: 16px; }

.maw-shell .maw-favorites-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--indigo);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--panel);
}

.maw-shell .maw-favorites-popover {
  position: absolute;
  top: 42px;
  right: 0;
  width: 320px;
  max-height: 390px;
  display: none;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(30, 41, 59, .18);
  z-index: 40;
}

.maw-shell .maw-favorites-popover.is-open { display: block; }

.maw-shell .maw-favorites-head {
  height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.maw-shell .maw-favorites-head-count {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.maw-shell .maw-favorites-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .maw-favorites-search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.maw-shell .maw-favorites-search:focus {
  border-color: var(--indigo-bd);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

.maw-shell .maw-favorites-list {
  max-height: 296px;
  padding: 6px;
  overflow-y: auto;
}

.maw-shell .maw-favorites-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
}

.maw-shell .maw-favorite-row {
  min-width: 0;
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.maw-shell .maw-favorite-row:hover { background: var(--panel-hover); }

.maw-shell .maw-favorite-row.is-filtered-out { display: none; }

.maw-shell .maw-favorite-open {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-favorite-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.maw-shell .maw-favorite-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.maw-shell .maw-favorite-kind {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.maw-shell .maw-favorite-label {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-favorite-remove {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}

.maw-shell .maw-favorite-row:hover .maw-favorite-remove { opacity: 1; }
.maw-shell .maw-favorite-remove:hover { color: #b42318; background: #fee4e2; }
.maw-shell .maw-favorite-remove svg { width: 13px; height: 13px; }

/* ---- Top-right cluster: Import · search · Tours · Settings (phase 57) ----
   (.maw-import-open keeps its chip styling from import.css; .maw-icon-btn
   below styles Tours and the Settings gear.) */
.maw-shell .maw-top-right {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 10px;
  flex: none;
}

/* (.maw-proj lives in the topbar's LEFT cluster -- see the
   .maw-topbar-left block in section 2.) */

/* Icon button (settings, etc.) */
.maw-shell .maw-icon-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink-mut);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.maw-shell .maw-icon-btn:hover {
  color: var(--ink);
  border-color: var(--line-hi);
  background: var(--panel);
}

.maw-shell .maw-icon-btn svg {
  width: 17px;
  height: 17px;
}

/* Avatar */
.maw-shell .maw-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(145deg, #334155, var(--navy));
  cursor: pointer;
  flex: none;
}


/* ============================================================
   3. RAIL (left navigation)
   ============================================================ */

.maw-shell .maw-rail {
  grid-row: 2;
  grid-column: 1;
  background: linear-gradient(180deg, var(--navy2), var(--navy));
  border-right: 1px solid #0a1120;
  /* Top padding tightened 14px -> 6px (2026-08-20, Rahul) so Fora sits
     closer to the topbar seam. */
  padding: 6px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: auto;
  min-width: 0;   /* allow the grid cell to shrink to 0 on collapse */
  transition: padding .22s ease, border-color .22s ease;
}

/* ---- Collapsed rail (hamburger toggle) ---- */
.maw-shell.is-rail-collapsed .maw-body { grid-template-columns: 0 1fr; }
.maw-shell.is-rail-collapsed .maw-rail {
  padding-left: 0; padding-right: 0;
  overflow: hidden;
  border-right-color: transparent;
}

/* ---- Hamburger sidebar toggle (topbar left cluster) ----
   The hamburger IS the rail-state indicator (2026-08-20, Rahul -- the navy
   cluster fill is gone): navy2 (the rail's own top color) + white glyph
   while the rail is OPEN, tab-band beige when collapsed. */
.maw-shell .maw-rail-toggle {
  flex: none;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy2);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.maw-shell .maw-rail-toggle:hover { background: var(--navy); color: #fff; }
/* Collapsed: the same beige as the tab band (2026-08-19, Rahul). */
.maw-shell.is-rail-collapsed .maw-rail-toggle { background: var(--panel-hover); color: var(--ink-mut); }
.maw-shell.is-rail-collapsed .maw-rail-toggle:hover { background: var(--line); color: var(--ink); }
.maw-shell .maw-rail-toggle svg { width: 19px; height: 19px; }

.maw-shell .maw-group-label {
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #64748b;
  padding: 12px 10px 6px;
  font-weight: 700;
}

.maw-shell .maw-navitem {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: #aeb8c9;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}

.maw-shell .maw-navitem svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.maw-shell .maw-navitem:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.maw-shell .maw-navitem.maw-active {
  color: #fff;
  background: rgba(99,102,234,.22);
  border-color: rgba(124,131,237,.45);
}

.maw-shell .maw-navitem.maw-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--indigo-2);
}

.maw-shell .maw-navitem.maw-active svg {
  color: #c3c9f7;
}

/* Badge in rail */
.maw-shell .maw-navitem .maw-badge {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #fff;
  background: var(--orange);
  border-radius: 20px;
  padding: 1px 7px;
  font-weight: 600;
}

/* Rail spacer */
.maw-shell .maw-rail .maw-spacer {
  flex: 1;
}

/* (The rail foot's Import/Settings items moved back to the topbar's right
   cluster 2026-08-19 -- see .maw-top-right in section 2.) */


/* ============================================================
   4. WORKSPACE + PANES
   ============================================================ */

.maw-shell .maw-workspace {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  gap: 0;
  min-height: 0;
  /* min-width:0 + overflow:hidden -- without these the workspace (a flex child
     of .maw-body) adopts the MIN-CONTENT of wide pane content (e.g. the Graph
     canvas) and silently grows past the viewport (observed 2021px in a 1568px
     window), pushing the resize seam under overflowing content so it never
     receives its mousedown. Panes carry the same guards below. */
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  /* Anchor for the absolutely-positioned 3-zone tab dropper overlay (section 10). */
  position: relative;
}

/* While a top-bar tab chip is being dragged, kill text selection everywhere in
   the shell -- the drag otherwise paints native selection across rail labels
   and chips (the chip mousedown deliberately does NOT preventDefault, to keep
   plain chip clicks byte-identical). Toggled by WorkspaceView on
   shell:tab-drag-start/end. */
.maw-shell.is-tab-dragging,
.maw-shell.is-tab-dragging * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hook classes (batch3 C-B3.1) -- intentionally NO rules in this file:
   - .maw-workspace--pinned : toggled on .maw-workspace whenever
     appState.layout.foraPinned is true, so future chrome can key off "are we
     in a fora-split" without inspecting layout state directly.
   - .maw-pane--compact     : applied to the fora slot pane when pinned.
     P-CONTEXT's fora.css scopes the compact chat treatment under this hook. */

/* Individual pane - flex child of workspace */
.maw-shell .maw-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  overflow: hidden;
}

/* Pane header (product decision 2026-07-12, Rahul): scoped OFF only for the
   5 entity DETAIL view types (WorkspaceView.js DETAIL_VIEW_TYPES) -- those
   panes go straight from .maw-pane to .maw-page-body with no header row.
   Every other pane (fora, tasks, home, dashboard, graph, library, activities,
   calendar, notes, reports, agents, studio, split, import, ...) keeps this
   header: dot+kind+label / icon+label title cluster, the renderPaneCenter()/
   renderPaneActions() mount points (Fora's History/New-conversation/rename,
   Tasks' "New Task" button), and minimize/close window controls. See
   WorkspaceView.js _buildPane / _buildTabPane for the gate. */
.maw-shell .maw-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}

.maw-shell .maw-pane-head .maw-ttl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}

/* Centered per-view region in the pane head (e.g. Fora's conversation title).
   Views opt in via renderPaneCenter(); empty otherwise. flex:1 + min-width:0
   so it absorbs the middle and truncates rather than pushing the actions out. */
.maw-shell .maw-pane-head .maw-pane-center {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right-aligned per-view action region in the pane head (e.g. Tasks' "New
   task" button). Views opt in via renderPaneActions(); empty otherwise. */
.maw-shell .maw-pane-head .maw-pane-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.maw-shell .maw-pane-head .maw-ttl .maw-ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}

.maw-shell .maw-pane-head .maw-ttl .maw-ic svg {
  width: 14px;
  height: 14px;
}

.maw-shell .maw-pane-head .maw-ttl small {
  color: var(--ink-dim);
  font-weight: 400;
  font-size: 11px;
}

/* Window controls */
.maw-shell .maw-wctrl {
  margin-left: auto;
  display: flex;
  gap: 5px;
}

.maw-shell .maw-wctrl button,
.maw-shell .maw-wctrl [role="button"] {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 12px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}

.maw-shell .maw-wctrl button:hover,
.maw-shell .maw-wctrl [role="button"]:hover {
  background: var(--panel-hover);
  color: var(--ink);
  border-color: var(--line);
}

.maw-shell .maw-wctrl button svg,
.maw-shell .maw-wctrl [role="button"] svg {
  width: 13px;
  height: 13px;
}

/* Page body (content area inside a pane) */
.maw-shell .maw-page-body {
  flex: 1;
  overflow: auto;
  /* padding: 20px; */
}


/* ============================================================
   5. PANE SEAM (static divider between the 2 split panes)
   ------------------------------------------------------------
   Resize was removed by request (2026-07-02): splits are fixed
   at their layout sizes (50/50, fora-pinned 32/68), so no
   overflow handling is needed. The seam is a plain 1px hairline
   (grip pip also removed by request); width must match
   WorkspaceView's SEAM_WIDTH_PX.
   ============================================================ */

.maw-shell .maw-drag-seam {
  width: 1px;
  align-self: stretch;
  flex: none;
  background: var(--line);
}


/* ============================================================
   6. COMMAND PALETTE
   ============================================================ */

/* Full-screen scrim */
.maw-shell .maw-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15,23,42,.34);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}

.maw-shell .maw-overlay.maw-show {
  display: flex;
}

/* Palette panel */
.maw-shell .maw-palette {
  width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,23,42,.28);
  overflow: hidden;
}

.maw-shell .maw-palette .maw-palette-pin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .maw-palette .maw-palette-pin svg {
  width: 18px;
  height: 18px;
  color: var(--indigo);
  flex: none;
}

.maw-shell .maw-palette .maw-palette-pin input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  font-family: inherit;
}

.maw-shell .maw-palette .maw-palette-grp {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ink-dim);
  padding: 12px 18px 6px;
  font-weight: 700;
}

.maw-shell .maw-palette .maw-palette-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13.5px;
  color: var(--ink-mut);
  cursor: pointer;
  transition: background .1s, color .1s;
}

.maw-shell .maw-palette .maw-palette-row:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .maw-palette .maw-palette-row svg {
  width: 16px;
  height: 16px;
  color: var(--ink-mut);
  flex: none;
}

.maw-shell .maw-palette .maw-palette-row .maw-palette-k {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}


/* ============================================================
   7. REUSABLE ATOMS
   Consumed by both shell chrome AND page views.
   All class names maw-* as required by the spec.
   ============================================================ */

/* ---- Chip - mono tag with optional color dot ---- */
.maw-shell .maw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
}

.maw-shell .maw-chip .maw-cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

/* ---- Metric - numeric readout (mono, colored) ---- */
.maw-shell .maw-metric {
  font-family: var(--font-mono);
  color: var(--navy);
  font-weight: 600;
}

.maw-shell .maw-metric.maw-up   { color: var(--green); }
.maw-shell .maw-metric.maw-down { color: var(--orange-strong); }

/* ---- Stat - small circular status indicator ---- */
.maw-shell .maw-stat {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
  font-weight: 700;
}

.maw-shell .maw-stat.maw-ok  { background: var(--green-soft); color: var(--green); }
.maw-shell .maw-stat.maw-run { background: var(--orange-soft); color: var(--orange-strong); }

/* ---- sg - suggestion / AI action chip ---- */
.maw-shell .maw-sg {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-weight: 500;
  font-family: inherit;
}

.maw-shell .maw-sg:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* ---- Pill - context tag with optional icon ---- */
.maw-shell .maw-pill {
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
}

.maw-shell .maw-pill svg {
  width: 11px;
  height: 11px;
  color: var(--ink-mut);
  flex: none;
}

/* ---- Btn - action button ---- */
.maw-shell .maw-btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, border-color .12s;
}

.maw-shell .maw-btn:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover);
}

.maw-shell .maw-btn.maw-primary {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}

.maw-shell .maw-btn.maw-primary:hover {
  background: linear-gradient(145deg, #7b8ff0, var(--indigo));
  box-shadow: 0 3px 12px rgba(79,70,229,.4);
}

.maw-shell .maw-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---- Card - inner content container ---- */
.maw-shell .maw-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---- Badge - standalone counter (outside rail context) ---- */
.maw-shell .maw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: var(--font-mono);
  color: #fff;
  background: var(--orange);
  border-radius: 20px;
  padding: 1px 7px;
  font-weight: 600;
  line-height: 1.4;
}


/* ============================================================
   9. PLACEHOLDER (panes for views not yet built - "coming soon")
   ============================================================ */

.maw-shell .maw-placeholder {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--panel-soft);
}
.maw-shell .maw-placeholder-inner {
  text-align: center;
  color: var(--ink-dim);
  max-width: 360px;
}
.maw-shell .maw-placeholder-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--ink-mut);
  background: var(--panel-hover);
  border: 1px dashed var(--line-hi);
}
.maw-shell .maw-placeholder-icon svg { width: 22px; height: 22px; }

/* (The 1450px topbar media block died with .maw-cmd 2026-08-19 -- the tab
   strip's own overflow fold is the space management now.) */
.maw-shell .maw-placeholder-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-mut);
}
.maw-shell .maw-placeholder-sub {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-top: 4px;
}

/* ===================================================================== */
/* Reusable scrollbar (project-wide v2 default)                          */
/* A thin, inset, rounded scrollbar for every scroll area under the v2   */
/* shell. The 3px transparent border + background-clip:padding-box gives */
/* the thumb an inset gap that reads correctly on any background.        */
/* (Webkit/Blink + modern Chromium; other engines fall back to native.)  */
/* ===================================================================== */
.maw-shell ::-webkit-scrollbar { width: 12px; height: 12px; }
.maw-shell ::-webkit-scrollbar-track { background: transparent; }
.maw-shell ::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.maw-shell ::-webkit-scrollbar-thumb:hover {
  background: var(--ink-dim);
  background-clip: padding-box;
}
/* Firefox */
.maw-shell * { scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; }

/* ===================================================================== */
/* Toasts -- top-right flash notifications (Utils.Toast)                  */
/* Host lives on <body> (.maw-shell .maw-toast-host) so tokens apply.     */
/* ===================================================================== */
.maw-toast-host {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  pointer-events: none;            /* host is click-through; toasts opt back in */
  /* The host also carries .maw-shell (for the design tokens), so neutralize the
     shell's visual base -- otherwise it paints a full-height --bg grid panel. */
  height: auto;
  background: transparent;
  overflow: visible;
}

.maw-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line, rgba(60, 48, 28, 0.10));
  border-left: 3px solid var(--ink-dim);
  border-radius: var(--radius-sm, 9px);
  box-shadow: var(--shadow, 0 1px 3px rgba(60,48,28,.08), 0 10px 26px rgba(60,48,28,.08));
  font-size: 13px;
  line-height: 1.4;
  /* entrance: slide in from the right + fade */
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.maw-toast.is-in      { opacity: 1; transform: translateX(0); }
.maw-toast.is-leaving { opacity: 0; transform: translateX(16px); }

.maw-toast-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--ink-dim);
}

.maw-toast-body  { flex: 1 1 auto; min-width: 0; }
.maw-toast-title { font-weight: 600; margin-bottom: 1px; }
.maw-toast-msg   { color: var(--ink-mut); word-wrap: break-word; }

.maw-toast-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  margin: -2px -2px 0 0;
  cursor: pointer;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.maw-toast-close:hover { color: var(--ink); background: var(--panel-hover); }

/* Per-type accents */
.maw-toast-success { border-left-color: var(--green, #3f7d4f); }
.maw-toast-success .maw-toast-icon { background: var(--green, #3f7d4f); }
.maw-toast-error   { border-left-color: var(--red, #c0392b); }
.maw-toast-error .maw-toast-icon   { background: var(--red, #c0392b); }
.maw-toast-warning { border-left-color: var(--t-task, #b45309); }
.maw-toast-warning .maw-toast-icon { background: var(--t-task, #b45309); }
.maw-toast-info    { border-left-color: var(--indigo, #4f46e5); }
.maw-toast-info .maw-toast-icon    { background: var(--indigo, #4f46e5); }

/* ============================================================
   10. TAB DROPPER (batch3 C-B3.1)
   3-zone (left / center / right) overlay shown over the workspace while a top
   tab chip is being dragged (TopBarView is the drag source; WorkspaceView
   owns this overlay + resolves the drop -> appState.dropTab). Purely visual --
   pointer-events:none throughout, since the zone is resolved from tracked
   cursor coordinates (EventBus 'shell:tab-drag-move'), not from this element
   receiving mouse events.
   ============================================================ */

.maw-shell .maw-dropper {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* ONE preview panel whose footprint mirrors the drop RESULT (batch3.1
   refinement 2): hovering the left/right third previews that HALF of the
   workspace; hovering the middle third previews the WHOLE workspace.
   Hidden entirely (no is-visible) for zones whose drop would be a no-op. */
.maw-shell .maw-dropper-preview {
  position: absolute;
  top: 8px;
  bottom: 8px;
  border-radius: 10px;
  border: 2px dashed var(--indigo);
  background: var(--indigo-soft);
  opacity: 0;
  transition: left .12s, right .12s, opacity .12s;
}

.maw-shell .maw-dropper-preview.is-visible {
  opacity: .9;
}

.maw-shell .maw-dropper-preview--left   { left: 8px;          right: calc(50% + 4px); }
.maw-shell .maw-dropper-preview--right  { left: calc(50% + 4px); right: 8px; }
.maw-shell .maw-dropper-preview--center { left: 8px;          right: 8px; }

/* ============================================================
   Full-pane busy overlay (DetailedViewBase._showEntityBusy).
   Immediate feedback for Lock/Unlock (Rahul, 2026-08-21): shown
   the moment the action is confirmed; the arrival repaint of
   load() wipes it, so it lives exactly as long as the operation.
   ============================================================ */
.maw-shell .maw-busy-host { position: relative; }
.maw-shell .maw-detail-busy {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(1.5px);
}
.maw-shell .maw-detail-busy-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(20, 24, 40, 0.14);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.maw-shell .maw-detail-busy-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 2.5px solid var(--line-hi);
  border-top-color: var(--t-sm);
  animation: maw-detail-busy-rot .8s linear infinite;
}
@keyframes maw-detail-busy-rot { to { transform: rotate(360deg); } }

/* ============================================================
   Lock badge + shared lock-info modal (Rahul, 2026-08-22).
   One vocabulary across the SM / assembly / file detail views:
   plain Locked/Unlocked + info affordance; the modal (rooted on
   document.body, so it carries .maw-shell itself) names every
   entity currently locking the one on screen, each with a
   lock/unlock toggle.
   ============================================================ */
.maw-shell .maw-lockinfo-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft, #5a6172);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.maw-shell .maw-lockinfo-badge:hover,
.maw-shell .maw-lockinfo-badge:focus-visible {
  border-color: var(--t-sm);
  color: var(--t-sm);
  outline: none;
}
.maw-shell .maw-lockinfo-badge.locked {
  color: #a13232;
  border-color: rgba(161, 50, 50, 0.45);
  background: rgba(161, 50, 50, 0.07);
}
.maw-shell .maw-lockinfo-badge.locked:hover,
.maw-shell .maw-lockinfo-badge.locked:focus-visible {
  border-color: #a13232;
  color: #a13232;
}
.maw-shell .maw-lockinfo-badge.loading { opacity: 0.65; }
.maw-shell .maw-lockinfo-ic {
  width: 12px;
  height: 12px;
  flex: none;
}
.maw-shell .maw-lockinfo-info {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.6;
}
.maw-shell .maw-lockinfo-badge:hover .maw-lockinfo-info { opacity: 1; }

.maw-shell.maw-lockmodal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 18, 26, 0.45);
}
.maw-shell .maw-lockmodal {
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(20, 24, 40, 0.28);
  outline: none;
}
.maw-shell .maw-lockmodal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-lockmodal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.maw-shell .maw-lockmodal-close {
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft, #5a6172);
  cursor: pointer;
  padding: 2px 6px;
}
.maw-shell .maw-lockmodal-close:hover { color: var(--ink); }
.maw-shell .maw-lockmodal-body { padding: 12px 18px 16px; }
.maw-shell .maw-lockmodal-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 4px;
  font-size: 12px;
  color: var(--ink-soft, #5a6172);
}
.maw-shell .maw-lockmodal-warn {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(176, 128, 32, 0.5);
  border-radius: 8px;
  background: rgba(176, 128, 32, 0.08);
  color: #8a6414;
  font-size: 11.5px;
}
.maw-shell .maw-lockmodal-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-soft, #5a6172);
}
.maw-shell .maw-lockmodal-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 2px;
}
.maw-shell .maw-lockmodal-row + .maw-lockmodal-row {
  border-top: 1px solid var(--line);
}
.maw-shell .maw-lockmodal-chip {
  flex: none;
  margin-top: 1px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
.maw-shell .maw-lockmodal-chip.is-sm  { background: var(--t-sm, #5048c6); }
.maw-shell .maw-lockmodal-chip.is-asm { background: var(--t-asm, #3f7d4f); }
.maw-shell .maw-lockmodal-rowmain { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-lockmodal-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.maw-shell .maw-lockmodal-id {
  font-family: Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-soft, #5a6172);
  margin-left: 4px;
}
.maw-shell .maw-lockmodal-tag {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-soft, #5a6172);
  vertical-align: 1px;
}
.maw-shell .maw-lockmodal-reason {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-soft, #5a6172);
}
.maw-shell .maw-lockmodal-error {
  margin-top: 4px;
  font-size: 11px;
  color: #a13232;
}
.maw-shell .maw-lockmodal-confirm {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(161, 50, 50, 0.4);
  border-radius: 8px;
  background: rgba(161, 50, 50, 0.06);
  font-size: 11.5px;
}
.maw-shell .maw-lockmodal-confirm .maw-btn { margin-left: 6px; }

/* Pure-CSS toggle switch: checked = locked. */
.maw-shell .maw-toggle {
  flex: none;
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}
.maw-shell .maw-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.maw-shell .maw-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line-hi, #c9ceda);
  transition: background 0.15s ease;
  pointer-events: none;
}
.maw-shell .maw-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 40, 0.3);
  transition: transform 0.15s ease;
}
.maw-shell .maw-toggle input:checked + .maw-toggle-track { background: #a13232; }
.maw-shell .maw-toggle input:checked + .maw-toggle-track::after { transform: translateX(16px); }
.maw-shell .maw-toggle input:focus-visible + .maw-toggle-track {
  box-shadow: 0 0 0 2px rgba(80, 72, 198, 0.35);
}

/* ============================================================
   Tab id chip (Rahul, 2026-08-23): the entity's DB id beside
   every tab name, so two same-named entities (a branch clone
   and its source) are tellable apart at a glance.
   ============================================================ */
.maw-shell .maw-tab-id,
.maw-shell .maw-tab-overflow-row .maw-tab-id {
  flex: none;
  font-family: var(--font-mono, Menlo, monospace);
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--ink-dim);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 4px;
  margin-left: 2px;
}
.maw-shell .maw-tab.maw-active .maw-tab-id {
  color: var(--ink-mut);
  border-color: var(--line-hi);
}

/* The hover-revealed tab actions are absolutely anchored over the tab's
   right edge; an inactive tab reserves no room for them, so the id chip
   yields while they show (Rahul, 2026-08-23). The active tab keeps both. */
.maw-shell .maw-tab:not(.maw-active):hover .maw-tab-id { display: none; }

/* ============================================================
   14. COMING SOON (launch gating - ShellView.COMING_SOON)
   Gated apps are left out of the rail. ComingSoonView is the
   courteous pane every route into a gated app lands on.
   ============================================================ */

.maw-shell .maw-coming-soon {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 40px;
  background: var(--panel-soft);
}
.maw-shell .maw-coming-soon-inner {
  text-align: center;
  color: var(--ink-dim);
  max-width: 400px;
}
.maw-shell .maw-coming-soon-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: var(--ink-mut);
  background: var(--panel-hover);
  border: 1px dashed var(--line-hi);
}
.maw-shell .maw-coming-soon-icon svg { width: 22px; height: 22px; }
.maw-shell .maw-coming-soon-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-mut);
}
.maw-shell .maw-coming-soon-sub {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-top: 6px;
  line-height: 1.55;
}
.maw-shell .maw-coming-soon-home { margin-top: 18px; }

/* ===== chip (mono, bordered tag with optional color dot) ===== */
.maw-shell .maw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  white-space: nowrap;
}
.maw-shell .maw-chip .maw-cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.maw-shell .maw-chip.maw-chip-clickable { cursor: pointer; transition: .12s; }
.maw-shell .maw-chip.maw-chip-clickable:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* ===== pill (soft rounded label) ===== */
.maw-shell .maw-pill {
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
  white-space: nowrap;
}
.maw-shell .maw-pill svg { width: 11px; height: 11px; color: var(--ink-mut); }

/* ===== metric (mono numeric value) ===== */
.maw-shell .maw-metric {
  font-family: Menlo, Monaco, Consolas, monospace;
  color: var(--navy);
  font-weight: 600;
}
.maw-shell .maw-metric.maw-up { color: var(--green); }
.maw-shell .maw-metric.maw-down { color: var(--orange-strong); }

/* ===== stat (small round status glyph) ===== */
.maw-shell .maw-stat {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
  font-weight: 700;
}
.maw-shell .maw-stat.maw-ok  { background: var(--green-soft);  color: var(--green); }
.maw-shell .maw-stat.maw-run { background: var(--orange-soft); color: var(--orange-strong); }
.maw-shell .maw-stat.maw-err { background: var(--orange-soft); color: var(--orange-strong); }
.maw-shell .maw-stat.maw-idle{ background: var(--line);        color: var(--ink-dim); }

/* ===== btn (default + primary) ===== */
.maw-shell .maw-btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .15s;
}
.maw-shell .maw-btn:hover { border-color: var(--line-hi); background: var(--panel-hover); }
.maw-shell .maw-btn svg { width: 14px; height: 14px; }
.maw-shell .maw-btn.maw-primary {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
}
.maw-shell .maw-btn.maw-primary:hover { background: linear-gradient(145deg, var(--indigo-2), var(--indigo)); filter: brightness(1.04); }
.maw-shell .maw-btn:disabled,
.maw-shell .maw-btn.maw-stub { opacity: .55; cursor: not-allowed; }

/* ===== card (panel surface) ===== */
.maw-shell .maw-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ===== sg (small ghost/secondary action) ===== */
.maw-shell .maw-sg {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  transition: .15s;
  font-weight: 500;
}
.maw-shell .maw-sg:hover { background: #e0e7ff; border-color: var(--indigo); }

/* ------------------------------------------------------------------ */
/* Template-not-found fallback.                                       */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-error {
  margin: 16px;
  padding: 12px 14px;
  border: 1px solid var(--orange-bd);
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* App root (body-only: fills the workspace pane body)               */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* containing block for a subclass's own overlay (e.g. ForaView's
     .maw-fora-history history panel) */
  position: relative;
}

/* ------------------------------------------------------------------ */
/* Chat body                                                         */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-chat {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--panel-soft);
}

/* ------------------------------------------------------------------ */
/* Messages                                                          */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-msg {
  display: flex;
  gap: 11px;
  max-width: 96%;
}

.maw-shell .maw-agent-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Avatars */
.maw-shell .maw-agent-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.maw-shell .maw-agent-avatar--user {
  background: linear-gradient(145deg, #334155, var(--navy));
}

.maw-shell .maw-agent-avatar--agent {
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 6px rgba(79, 70, 229, .25);
}

.maw-shell .maw-agent-avatar--agent svg {
  width: 15px;
  height: 15px;
}

/* ------------------------------------------------------------------ */
/* Bubbles                                                           */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-bubble {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* User bubbles get the indigo wash. */
.maw-shell .maw-agent-msg--user .maw-agent-bubble {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-agent-bubble-who {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-mut);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.maw-shell .maw-agent-bubble-who strong {
  color: var(--indigo);
  font-weight: 700;
  font-style: normal;
}

.maw-shell .maw-agent-bubble-foot {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  letter-spacing: .2px;
  line-height: 1.6;
}

.maw-shell .maw-agent-bubble-foot strong {
  color: var(--ink-mut);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* ------------------------------------------------------------------ */
/* Inline atoms used inside bubbles (chips, metrics)                 */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-bubble .maw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
}

.maw-shell .maw-agent-bubble .maw-chip .maw-cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.maw-shell .maw-agent-bubble .maw-metric {
  font-family: var(--font-mono);
  color: var(--navy);
  font-weight: 600;
}

.maw-shell .maw-agent-bubble .maw-metric.maw-up {
  color: var(--green);
}

/* ------------------------------------------------------------------ */
/* Composer                                                          */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-composer {
  flex: none;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.maw-shell .maw-agent-composer-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  border-radius: 11px;
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.maw-shell .maw-agent-composer-box:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
  background: var(--panel);
}

.maw-shell .maw-agent-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}

.maw-shell .maw-agent-input::placeholder {
  color: var(--ink-dim);
}

.maw-shell .maw-agent-send-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79, 70, 229, .35);
}

.maw-shell .maw-agent-send-btn svg {
  width: 15px;
  height: 15px;
}

/* Composer context pills (Agent / Skill / Docs scope) */
.maw-shell .maw-agent-composer-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.maw-shell .maw-agent-ctx-pill {
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-soft);
}

.maw-shell .maw-agent-ctx-pill svg {
  width: 11px;
  height: 11px;
  color: var(--ink-mut);
}

/* ------------------------------------------------------------------ */
/* Welcome hero (empty conversation)                                  */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-welcome {
  margin: auto;
  max-width: 440px;
  text-align: center;
  padding: 24px 16px;
}

.maw-shell .maw-agent-welcome-avatar {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 3px 10px rgba(79, 70, 229, .3);
}

.maw-shell .maw-agent-welcome-avatar svg {
  width: 22px;
  height: 22px;
}

.maw-shell .maw-agent-welcome-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.maw-shell .maw-agent-welcome-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-mut);
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------ */
/* Tool-trace groups (Wave 2, 2026-07-11) -- ported from the original fora  */
/* bar's trace-group UX (Rahul: "I absolutely LOVE the fora tool call       */
/* trace"). Consecutive tool-card rows render as ONE collapsible group: a   */
/* clickable summary ("Ran N tools · Xs total") + a timeline of compact     */
/* per-call nodes (status dot + label + duration). Click a node to reveal   */
/* its in/out excerpt. Expand/collapse is a class toggle + max-height       */
/* transition -- NEVER slideToggle (see the fora recon + jQuery idiom).     */
/* Replaces the old flat .maw-agent-toolcard-* strip (superseded).         */
/* ------------------------------------------------------------------ */

.maw-shell .maw-trace-group {
  align-self: flex-start;
  margin-left: 41px; /* aligns with agent bubble (30px avatar + 11px gap) */
  max-width: 88%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.maw-shell .maw-trace-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mut);
  cursor: pointer;
  user-select: none;
}

.maw-shell .maw-trace-summary:hover {
  background: var(--panel-soft);
}

.maw-shell .maw-trace-summary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--indigo);
}

.maw-shell .maw-trace-summary-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron hints expanded/collapsed state -- pure CSS, no extra markup. */
.maw-shell .maw-trace-summary::after {
  content: '\25BE';
  flex: none;
  font-size: 10px;
  color: var(--ink-dim);
  transition: transform .15s ease;
  transform: rotate(-90deg);
}

.maw-shell .maw-trace-group.is-expanded .maw-trace-summary::after {
  transform: rotate(0deg);
}

.maw-shell .maw-trace-timeline {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .2s ease;
}

.maw-shell .maw-trace-group.is-expanded .maw-trace-timeline {
  max-height: 9999px !important;
  opacity: 1;
  border-top: 1px solid var(--line);
}

.maw-shell .maw-trace-node {
  border-bottom: 1px solid var(--line);
}

.maw-shell .maw-trace-node:last-child {
  border-bottom: none;
}

.maw-shell .maw-trace-node-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-size: 11.5px;
  color: var(--ink);
}

/* Only nodes with an in/out excerpt to reveal invite a click. */
.maw-shell .maw-trace-node.has-io .maw-trace-node-header {
  cursor: pointer;
}

.maw-shell .maw-trace-node.has-io .maw-trace-node-header:hover {
  background: var(--panel-soft);
}

.maw-shell .maw-trace-node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--green);
}

.maw-shell .maw-trace-node[data-status="failure"] .maw-trace-node-dot {
  background: var(--red);
}

.maw-shell .maw-trace-node[data-status="interrupted"] .maw-trace-node-dot {
  background: var(--orange-strong);
}

.maw-shell .maw-trace-node-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-trace-node-dur {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-trace-node-io {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
  padding: 0 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-mut);
  background: var(--panel-soft);
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}

.maw-shell .maw-trace-node.is-open .maw-trace-node-io {
  max-height: 9999px !important;
  opacity: 1;
  padding: 7px 11px 9px;
}

.maw-shell .maw-trace-node-io-line {
  word-break: break-word;
  white-space: pre-wrap;
}

.maw-shell .maw-trace-node-io-line + .maw-trace-node-io-line {
  margin-top: 3px;
}

/* Todo card — frozen snapshot of the agent's task list */
.maw-shell .maw-agent-todocard {
  align-self: flex-start;
  margin-left: 41px;
  max-width: 88%;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-mut);
  padding: 8px 12px;
  border: 1px dashed var(--line-hi);
  border-radius: 10px;
  background: var(--panel);
}

.maw-shell .maw-agent-todocard-item.is-done {
  color: var(--ink-dim);
  text-decoration: line-through;
}

/* Ask panel — the loop paused on a question; next message answers it */
.maw-shell .maw-agent-ask {
  align-self: flex-start;
  margin-left: 41px;
  max-width: 88%;
  padding: 12px 14px;
  border: 1px solid var(--indigo-bd);
  border-radius: 12px;
  background: var(--indigo-soft);
  box-shadow: var(--shadow-sm);
}

.maw-shell .maw-agent-ask-q {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}

/* Header bar: minimized label + minimize / don't-answer controls */
.maw-shell .maw-agent-ask-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -4px -6px 2px 0;
}

.maw-shell .maw-agent-ask-bar-spacer {
  flex: 1;
}

.maw-shell .maw-agent-ask-minlabel {
  display: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.maw-shell .maw-agent-ask-min,
.maw-shell .maw-agent-ask-dismiss {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}

.maw-shell .maw-agent-ask-min:hover {
  background: #e0e7ff;
  color: var(--indigo);
}

.maw-shell .maw-agent-ask-dismiss:hover {
  background: #e0e7ff;
  color: var(--red);
}

/* Minimized: collapse to a thin clickable bar carrying the question */
.maw-shell .maw-agent-ask.minimized {
  padding: 7px 12px;
  cursor: pointer;
}

.maw-shell .maw-agent-ask.minimized .maw-agent-ask-q,
.maw-shell .maw-agent-ask.minimized .maw-agent-ask-options,
.maw-shell .maw-agent-ask.minimized .maw-agent-ask-actions,
.maw-shell .maw-agent-ask.minimized .maw-agent-ask-min {
  display: none;
}

.maw-shell .maw-agent-ask.minimized .maw-agent-ask-bar {
  margin: 0;
}

.maw-shell .maw-agent-ask.minimized .maw-agent-ask-minlabel {
  display: block;
}

/* One row per possible answer (original-fora parity) */
.maw-shell .maw-agent-ask-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.maw-shell .maw-agent-ask-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--panel);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.maw-shell .maw-agent-ask-row:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

.maw-shell .maw-agent-ask-row.active {
  background: #e0e7ff;
  border-color: var(--indigo);
  box-shadow: inset 0 0 0 1px var(--indigo);
}

.maw-shell .maw-agent-ask-letter {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}

.maw-shell .maw-agent-ask-row.active .maw-agent-ask-letter {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.maw-shell .maw-agent-ask-optlabel {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
  min-width: 0;
}

.maw-shell .maw-agent-ask-other .maw-agent-ask-optlabel {
  color: var(--ink-dim);
  font-style: italic;
}

/* Submit row */
.maw-shell .maw-agent-ask-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.maw-shell .maw-agent-ask-submit {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.maw-shell .maw-agent-ask-submit[disabled] {
  opacity: .45;
  cursor: default;
}

/* Error row */
.maw-shell .maw-agent-errorrow {
  align-self: flex-start;
  margin-left: 41px;
  max-width: 88%;
  padding: 8px 12px;
  border: 1px solid var(--orange-bd);
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 12px;
  line-height: 1.5;
}

/* Typing indicator */
.maw-shell .maw-agent-typing .maw-agent-bubble {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 12px 14px;
}

.maw-shell .maw-agent-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-dim);
  animation: maw-agent-typing-bounce 1.2s infinite ease-in-out;
}

.maw-shell .maw-agent-typing-dot:nth-child(2) { animation-delay: .15s; }
.maw-shell .maw-agent-typing-dot:nth-child(3) { animation-delay: .3s; }

@keyframes maw-agent-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Live progress strip (14-B2) -- replaces the dots once the first poll lands */
.maw-shell .maw-agent-typing .maw-agent-bubble.has-progress {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 220px;
}

.maw-shell .maw-agent-typing .maw-agent-bubble.has-progress .maw-agent-typing-dot {
  display: none;
}

.maw-shell .maw-agent-progress {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.maw-shell .maw-agent-progress-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.maw-shell .maw-agent-progress-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange-strong);
  animation: maw-agent-progress-pulse 1.4s infinite ease-in-out;
  flex: none;
}

@keyframes maw-agent-progress-pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.maw-shell .maw-agent-progress-label strong {
  color: var(--ink);
  font-weight: 600;
}

.maw-shell .maw-agent-progress-iter {
  margin-left: auto;
  padding-left: 10px;
  font-size: 10.5px;
  color: var(--ink-mut);
  white-space: nowrap;
}

.maw-shell .maw-agent-progress-row {
  font-size: 11px;
  color: var(--ink-mut);
}

.maw-shell .maw-agent-progress-row.is-error {
  color: var(--red);
}

.maw-shell .maw-agent-progress-mark {
  display: inline-block;
  width: 12px;
  color: var(--green);
}

.maw-shell .maw-agent-progress-row.is-error .maw-agent-progress-mark {
  color: inherit;
}

/* 14-B3.2: live token ticker -- the in-flight assistant message streaming in */
.maw-shell .maw-agent-progress-streamtext {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 7.5em;
  overflow: hidden;
}

/* 14-B3.0: Stop button on the live strip + the post-interrupt marker row */
.maw-shell .maw-agent-progress-stop {
  margin-left: auto;
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 10.5px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}

.maw-shell .maw-agent-progress-iter + .maw-agent-progress-stop {
  margin-left: 8px;
}

.maw-shell .maw-agent-progress-stop:hover:not([disabled]) {
  color: var(--red);
  border-color: var(--red);
}

.maw-shell .maw-agent-progress-stop[disabled] {
  opacity: .55;
  cursor: default;
}

.maw-shell .maw-agent-stoprow {
  align-self: flex-start;
  margin-left: 41px;
  font-size: 11px;
  color: var(--ink-mut);
  font-style: italic;
}

/* Busy composer */
.maw-shell .maw-agent-composer-box.is-busy {
  opacity: .6;
  pointer-events: none;
}

/* Optimistic user bubble (pre-server-echo) */
.maw-shell .maw-agent-msg--optimistic {
  opacity: .7;
}

/* Conversation id in the ctx strip */
.maw-shell .maw-agent-ctx-conv {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  align-self: center;
}

/* ------------------------------------------------------------------ */
/* Skeleton shimmer (chat-loading skeleton; also reused by a           */
/* subclass's own skeleton cards, e.g. Fora's history-list skeleton)   */
/* ------------------------------------------------------------------ */

@keyframes maw-shimmer {
  0%   { background-position: -260px 0; }
  100% { background-position: 260px 0; }
}

.maw-shell .maw-skel-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--line) 25%, var(--panel-soft) 50%, var(--line) 75%);
  background-size: 520px 100%;
  animation: maw-shimmer 1.2s infinite linear;
}

.maw-shell .maw-skel-bar + .maw-skel-bar { margin-top: 7px; }

.maw-shell .maw-skel-bar--dim { opacity: .55; }

/* Chat-window loading skeleton (existing conversation being fetched). */
.maw-shell .maw-agent-chatloading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.maw-shell .maw-agent-skelmsg {
  display: flex;
  gap: 11px;
  max-width: 78%;
}

.maw-shell .maw-agent-skelmsg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.maw-shell .maw-skel-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  background: linear-gradient(90deg, var(--line) 25%, var(--panel-soft) 50%, var(--line) 75%);
  background-size: 520px 100%;
  animation: maw-shimmer 1.2s infinite linear;
}

.maw-shell .maw-skel-bubble {
  flex: 1;
  min-width: 120px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
}

/* ------------------------------------------------------------------ */
/* Rendered markdown inside bubbles (AgentMessageRenderer output)     */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-bubble h1,
.maw-shell .maw-agent-bubble h2,
.maw-shell .maw-agent-bubble h3,
.maw-shell .maw-agent-bubble h4 {
  margin: 14px 0 6px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 700;
}

.maw-shell .maw-agent-bubble h1:first-child,
.maw-shell .maw-agent-bubble h2:first-child,
.maw-shell .maw-agent-bubble h3:first-child,
.maw-shell .maw-agent-bubble h4:first-child {
  margin-top: 0;
}

.maw-shell .maw-agent-bubble p {
  margin: 0 0 8px;
}

.maw-shell .maw-agent-bubble p:last-child {
  margin-bottom: 0;
}

.maw-shell .maw-agent-bubble ul,
.maw-shell .maw-agent-bubble ol {
  margin: 6px 0 10px;
  padding-left: 20px;
}

.maw-shell .maw-agent-bubble li {
  margin-bottom: 3px;
}

.maw-shell .maw-agent-bubble code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.maw-shell .maw-agent-bubble pre {
  position: relative;
  margin: 8px 0;
  padding: 12px 32px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--navy);
  overflow-x: auto;
}

.maw-shell .maw-agent-bubble pre code {
  background: none;
  border: none;
  padding: 0;
  color: #e2e8f0;
  font-size: 11.5px;
  line-height: 1.6;
}

.maw-shell .maw-agent-bubble blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--indigo-bd);
  color: var(--ink-mut);
  font-style: italic;
}

.maw-shell .maw-agent-bubble table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.maw-shell .maw-agent-bubble th,
.maw-shell .maw-agent-bubble td {
  border: 1px solid var(--line);
  padding: 5px 9px;
  text-align: left;
}

.maw-shell .maw-agent-bubble th {
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Table wrap (responsive scroll for wide tables)                    */
/* ------------------------------------------------------------------ */

.maw-shell .maw-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
}

.maw-shell .maw-table-wrap table {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Copy button (per rendered <pre>)                                   */
/* ------------------------------------------------------------------ */

.maw-shell .maw-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10.5px;
  font-family: inherit;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #e2e8f0;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}

.maw-shell .maw-copy-btn:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .32);
}

.maw-shell .maw-copy-btn.is-copied {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Via-chip on the live token ticker (streaming_agent prefix, when a  */
/* delegated sub-agent's text is streaming rather than the agent's own) */
/* ------------------------------------------------------------------ */

.maw-shell .maw-agent-progress-streamvia {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 10px;
  font-style: italic;
  font-family: inherit;
  white-space: nowrap;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Welcome hero entrance -- staggered fade+rise on avatar -> title ->  */
/* sub -> suggestion buttons. display:none -> block (the welcome block */
/* is re-shown via jQuery .show() after a conversation clear) restarts */
/* these animations, which is the desired behavior -- no JS needed.    */
/* ------------------------------------------------------------------ */

@keyframes maw-welcome-fade-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.maw-shell .maw-agent-welcome-avatar,
.maw-shell .maw-agent-welcome-title,
.maw-shell .maw-agent-welcome-sub,
.maw-shell .maw-fora-suggestions {
  animation: maw-welcome-fade-rise 350ms ease-out backwards;
}

.maw-shell .maw-agent-welcome-avatar { animation-delay: 0ms; }
.maw-shell .maw-agent-welcome-title  { animation-delay: 70ms; }
.maw-shell .maw-agent-welcome-sub    { animation-delay: 140ms; }
.maw-shell .maw-fora-suggestions     { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .maw-shell .maw-agent-welcome-avatar,
  .maw-shell .maw-agent-welcome-title,
  .maw-shell .maw-agent-welcome-sub,
  .maw-shell .maw-fora-suggestions {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* Entity chips (Wave 3, 2026-07-11) -- inline references to a concrete */
/* d3VIEW entity, rendered from an agent's [[entity:...]] token, an     */
/* inline-render "Open full" fallback, or an auto-citation row. Click   */
/* -> EventBus entity:open (open-as-tab).                               */
/* ------------------------------------------------------------------ */

.maw-shell .maw-ent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.maw-shell .maw-ent-chip:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* Auto-citations row ("Looked at: <chip> <chip> ...") under an answer bubble */
.maw-shell .maw-agent-citations {
  align-self: flex-start;
  margin-left: 41px; /* aligns with agent bubble (30px avatar + 11px gap) */
  max-width: 88%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-mut);
}

.maw-shell .maw-agent-citations-label {
  font-style: italic;
}

/* Inline render slots ([[render:...]] tokens) -- block spacing while empty
   (before postProcess mounts anything, or when no resolver is wired) and
   while holding a mounted .maw-iv-card (InlineViewers). */
.maw-shell .maw-render-slot {
  display: block;
  margin: 8px 0;
}

.maw-shell .maw-render-unavailable {
  display: inline-block;
  padding: 6px 10px;
  border: 1px dashed var(--line-hi);
  border-radius: 8px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-dim);
  background: var(--panel-soft);
}

/* ------------------------------------------------------------------ */
/* Card shell                                                         */
/* ------------------------------------------------------------------ */

.maw-shell .maw-iv-card {
  display: flex;
  flex-direction: column;
  height: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  margin: 6px 0;
}

.maw-shell .maw-iv-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.maw-shell .maw-iv-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-iv-open-btn {
  flex: none;
  font-family: inherit;
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: transparent;
  color: var(--ink-mut);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}

.maw-shell .maw-iv-open-btn:hover {
  color: var(--indigo);
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
}

.maw-shell .maw-iv-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
}

.maw-shell .maw-iv-muted {
  margin: auto;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-dim);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* image                                                               */
/* ------------------------------------------------------------------ */

.maw-shell .maw-iv-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* curve sparkline                                                     */
/* ------------------------------------------------------------------ */

.maw-shell .maw-iv-sparkline {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ------------------------------------------------------------------ */
/* dataset table                                                       */
/* ------------------------------------------------------------------ */

.maw-shell .maw-iv-table-wrap {
  margin: 0;
  flex: 1;
  min-height: 0;
}

.maw-shell .maw-iv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.maw-shell .maw-iv-table th,
.maw-shell .maw-iv-table td {
  border: 1px solid var(--line);
  padding: 3px 7px;
  text-align: left;
  white-space: nowrap;
}

.maw-shell .maw-iv-table th {
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-weight: 700;
  position: sticky;
  top: 0;
}

.maw-shell .maw-iv-footer {
  flex: none;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-dim);
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* report                                                               */
/* ------------------------------------------------------------------ */

.maw-shell .maw-iv-report-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 4px;
  background: #fff;
}

.maw-shell .maw-iv-report-fallback {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.maw-shell .maw-iv-doc-icon {
  width: 26px;
  height: 26px;
  color: var(--t-report);
}

.maw-shell .maw-iv-report-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-iv-report-open {
  font-size: 11px;
  padding: 4px 12px;
}

.maw-ref-picker-host {
    position: relative;
    z-index: 30;
    width: 100%;
    height: 0;
}

/* Notes portals to <body> so modal overflow cannot clip a caret-anchored panel. */
.maw-ref-picker-host--notes-caret {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11000;
    width: 0;
    height: 0;
    pointer-events: none;
}

.maw-ref-picker {
    position: absolute;
    right: 0;
    bottom: 6px;
    left: 0;
    max-height: min(360px, 46vh);
    overflow: hidden;
    border: 1px solid #dce4ec;
    border-radius: 8px;
    background: #fff;
    color: #24364b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.maw-ref-picker--caret { pointer-events: auto; }

.maw-ref-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 9px 11px 7px;
    border-bottom: 1px solid #edf1f5;
}
.maw-ref-picker-head strong {
    overflow: hidden;
    color: #24364b;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-ref-picker-head span {
    flex: none;
    color: #8a97a6;
    font-size: 9px;
    white-space: nowrap;
}

.maw-ref-options {
    max-height: 318px;
    overflow-y: auto;
    padding: 4px;
}

.maw-ref-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #30465d;
    text-align: left;
    cursor: default;
}
.maw-ref-option:hover,
.maw-ref-option.is-active {
    background: #f1f5f9;
    color: #20364e;
    outline: none;
}

.maw-ref-glyph {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f3f6f9;
    color: var(--ref-color);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.maw-ref-option-copy { flex: 1; min-width: 0; }
.maw-ref-option-copy strong,
.maw-ref-option-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-ref-option-copy strong { color: inherit; font-size: 11px; font-weight: 600; }
.maw-ref-option-copy small { margin-top: 1px; color: #78889a; font-size: 9px; font-weight: 400; }
.maw-ref-option-enter,
.maw-ref-result-id { flex: none; color: #94a0ad; font-size: 9px; }
.maw-ref-back-arrow {
    flex: 0 0 24px;
    color: #65788b;
    font-size: 14px;
    text-align: center;
}
.maw-ref-option--back { border-bottom: 1px solid #edf1f5; border-radius: 6px 6px 0 0; }

.maw-ref-state { padding: 24px 14px; color: #78889a; text-align: center; font-size: 10px; }
.maw-ref-state--error { color: #b13f3f; }
.maw-ref-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid #dbe7f2;
    border-top-color: #2f6fa8;
    border-radius: 50%;
    animation: maw-ref-spin .7s linear infinite;
    vertical-align: -2px;
}
@keyframes maw-ref-spin { to { transform: rotate(360deg); } }

.maw-ref-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.maw-project-ref {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 1px 5px;
    border: 1px solid #d6e0ea;
    border-radius: 5px;
    background: #f5f8fb;
    color: #34516f;
    font: inherit;
    line-height: 1.35;
    vertical-align: baseline;
}
button.maw-project-ref { cursor: pointer; }
button.maw-project-ref:hover,
button.maw-project-ref:focus-visible { background: #edf5fb; outline: 2px solid #c5def2; }
.maw-project-ref--unavailable { color: #8a96a3; text-decoration: line-through; opacity: .78; }

.maw-agent-ref-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 2px 7px;
}
.maw-agent-ref-tray:empty { display: none; }
.maw-agent-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 240px;
    min-height: 24px;
    padding: 2px 5px 2px 7px;
    border: 1px solid #d5e1eb;
    border-radius: 999px;
    background: #f5f8fb;
    color: #34516f;
    font-size: 10px;
}
.maw-agent-ref-open {
    min-width: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.maw-agent-ref-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #738297;
    cursor: pointer;
}
.maw-agent-ref-remove:hover,
.maw-agent-ref-remove:focus-visible { background: #dde8f1; color: #273f58; outline: none; }
.maw-agent-ref-remove:disabled { opacity: .42; cursor: default; background: transparent; }

@media (max-width: 560px) {
    .maw-ref-picker { max-height: min(320px, 42vh); }
    .maw-ref-picker-head span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .maw-ref-spinner { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Pane root                                                          */
/* ------------------------------------------------------------------ */

.maw-shell .maw-pane--fora {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Fora-specific icon tint for the shared maw-ic chrome span. */
.maw-shell .maw-pane-head .maw-ttl .maw-ic--fora {
  background: var(--indigo-soft);
}

.maw-shell .maw-pane-head .maw-ttl .maw-ic--fora svg {
  stroke: var(--indigo);
}

/* ------------------------------------------------------------------ */
/* Suggestion chips (Fora's own welcome hero content)                 */
/* ------------------------------------------------------------------ */

.maw-shell .maw-fora-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.maw-shell .maw-fora-suggestion {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}

.maw-shell .maw-fora-suggestion:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* Suggestion chips live inside the shared .maw-agent-welcome hero -- center
   them there (Fora-specific placement of a Fora-only element). */
.maw-shell .maw-agent-welcome .maw-fora-suggestions {
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Compact mode (narrow FORA-bar pane) — batch3 C-B3.1. WorkspaceView   */
/* applies maw-pane--compact to the fora slot's pane when               */
/* layout.foraPinned is true (P-SHELL); this file only styles the       */
/* fora internals under it. Narrower paddings, smaller avatars,         */
/* suggestions hidden, composer tightened — chat stays fully functional.*/
/* Descendant selectors target the SHARED agent-chat.css markup classes */
/* (that's what actually renders); .maw-fora-suggestions stays as-is    */
/* since suggestions are Fora-only.                                     */
/* ------------------------------------------------------------------ */

.maw-shell .maw-pane--compact .maw-agent-chat {
  padding: 12px 10px;
  gap: 12px;
}

.maw-shell .maw-pane--compact .maw-agent-msg {
  gap: 8px;
  max-width: 100%;
}

.maw-shell .maw-pane--compact .maw-agent-avatar {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 9px;
}

.maw-shell .maw-pane--compact .maw-agent-avatar--agent svg {
  width: 12px;
  height: 12px;
}

.maw-shell .maw-pane--compact .maw-agent-bubble {
  padding: 8px 10px;
  font-size: 12.5px;
}

.maw-shell .maw-pane--compact .maw-agent-toolcard,
.maw-shell .maw-pane--compact .maw-agent-todocard,
.maw-shell .maw-pane--compact .maw-agent-ask,
.maw-shell .maw-pane--compact .maw-agent-errorrow {
  margin-left: 30px; /* aligns with the compact 22px avatar + 8px gap */
  max-width: 100%;
}

.maw-shell .maw-pane--compact .maw-fora-suggestions,
.maw-shell .maw-pane--compact .maw-agent-composer-ctx {
  display: none;
}

.maw-shell .maw-pane--compact .maw-agent-composer {
  padding: 8px 10px;
}

.maw-shell .maw-pane--compact .maw-agent-composer-box {
  padding: 6px 8px;
  border-radius: 9px;
}

.maw-shell .maw-pane--compact .maw-agent-send-btn {
  width: 26px;
  height: 26px;
}

.maw-shell .maw-pane--compact .maw-agent-send-btn svg {
  width: 12px;
  height: 12px;
}

.maw-shell .maw-pane--compact .maw-agent-welcome {
  max-width: 100%;
  padding: 16px 10px;
}

/* ------------------------------------------------------------------ */
/* Conversation history panel (History button in the composer ctx row).*/
/* Overlay over the whole pane body; rows built in ForaView.           */
/* Compact mode note: the ctx row (and so the History button) is       */
/* hidden under .maw-pane--compact -- restore full width to browse.    */
/* ------------------------------------------------------------------ */

.maw-shell .maw-fora-history-btn {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 8px;
  background: var(--panel-soft);
  cursor: pointer;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}

.maw-shell .maw-fora-history-btn:hover {
  color: var(--indigo);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-fora-history {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.maw-shell .maw-fora-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-fora-history-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}

.maw-shell .maw-fora-history-close {
  border: none;
  background: none;
  color: var(--ink-mut);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.maw-shell .maw-fora-history-close:hover {
  color: var(--ink);
  background: var(--panel-soft);
}

.maw-shell .maw-fora-history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.maw-shell .maw-fora-history-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}

.maw-shell .maw-fora-history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.maw-shell .maw-fora-history-item:hover {
  background: var(--panel-soft);
  border-color: var(--line);
}

.maw-shell .maw-fora-history-item.maw-active {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft, var(--panel-soft));
}

.maw-shell .maw-fora-history-item-main {
  flex: 1;
  min-width: 0;
}

.maw-shell .maw-fora-history-item-name {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-fora-history-item-meta {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* W4: per-conversation scoped-entity chips (e.g. "System Model #826"). */
.maw-shell .maw-fora-history-parents {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.maw-shell .maw-fora-history-parent {
  display: inline-block;
  max-width: 100%;
  padding: 1px 7px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-dim);
  background: var(--panel-soft);
  border: 1px solid var(--hair, var(--panel-soft));
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-fora-history-del {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: 6px;
  visibility: hidden;
}

.maw-shell .maw-fora-history-item:hover .maw-fora-history-del {
  visibility: visible;
}

.maw-shell .maw-fora-history-del:hover {
  color: var(--red, #dc2626);
  background: var(--panel-soft);
}

.maw-shell .maw-fora-history-del.maw-confirm {
  visibility: visible;
  color: #fff;
  background: var(--red, #dc2626);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 8px;
}

/* ------------------------------------------------------------------ */
/* Pane-head regions: centered conversation title (inline rename) +   */
/* History / New Conversation actions (renderPaneCenter/Actions).     */
/* ------------------------------------------------------------------ */

.maw-shell .maw-fora-convtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.maw-shell .maw-fora-convtitle-text {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.maw-shell .maw-fora-convtitle-edit {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .15s, color .15s;
}

.maw-shell .maw-fora-convtitle:hover .maw-fora-convtitle-edit { opacity: 1; }

.maw-shell .maw-fora-convtitle-edit:hover {
  color: var(--indigo);
  background: var(--panel-soft);
}

.maw-shell .maw-fora-convtitle-edit svg {
  width: 13px;
  height: 13px;
}

.maw-shell .maw-fora-convtitle-input {
  width: 260px;
  max-width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--indigo);
  border-radius: 7px;
  padding: 4px 9px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .1);
}

.maw-shell .maw-fora-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------------ */
/* Pane-center wrapper + "Refresh Data" (assembler FORA opt-in).      */
/* The conversation title is display:none until a conversation is     */
/* named, so the button is its SIBLING here and stays visible either  */
/* way.                                                               */
/* ------------------------------------------------------------------ */

.maw-shell .maw-fora-panecenter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.maw-shell .maw-fora-graphrefresh-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
}

.maw-shell .maw-fora-graphrefresh {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 26px;
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.maw-shell .maw-fora-graphrefresh:hover:not(:disabled) {
  color: var(--indigo);
  border-color: var(--indigo-bd);
  background: var(--panel-soft);
}

.maw-shell .maw-fora-graphrefresh:disabled {
  cursor: default;
  opacity: .7;
}

.maw-shell .maw-fora-graphrefresh svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* Spin the icon only, so the label stays readable while it runs. */
.maw-shell .maw-fora-graphrefresh.is-spinning svg {
  transform-origin: 50% 50%;
  animation: maw-fora-refresh-spin .9s linear infinite;
}

@keyframes maw-fora-refresh-spin { to { transform: rotate(360deg); } }

/* Transient outcome text: fades out, truncates, full text in the title. */
.maw-shell .maw-fora-graphrefresh-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-dim);
  max-width: 200px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .3s;
}

.maw-shell .maw-fora-graphrefresh-note.is-shown { opacity: 1; }
.maw-shell .maw-fora-graphrefresh-note.is-error { color: var(--red); }

/* ------------------------------------------------------------------ */
/* Skeleton shimmer -- Fora-only pieces (history cards). The shared    */
/* @keyframes maw-shimmer + .maw-skel-bar atoms live in agent-chat.css  */
/* (loaded alongside) and are reused here.                             */
/* ------------------------------------------------------------------ */

.maw-shell .maw-fora-history-skel {
  padding: 13px 12px;
}

/* History rows as cards: column stack with breathing room. */
.maw-shell .maw-fora-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.maw-shell .maw-fora-history-item.maw-card {
  border: 1px solid var(--line);
}

.maw-shell .maw-fora-history-item.maw-card:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover, var(--panel-soft));
}

.maw-shell .maw-fora-history-item.maw-card.maw-active {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft, var(--panel-soft));
}

/* Compact (pinned fora-bar): icon-only head buttons, tighter title. */
.maw-shell .maw-pane--compact .maw-fora-btn-txt { display: none; }
.maw-shell .maw-pane--compact .maw-fora-convtitle-text { font-size: 12px; }
/* Refresh Data goes icon-only with the rest (it uses .maw-fora-btn-txt); the
   outcome note has no room here and its tooltip stays on the button. */
.maw-shell .maw-pane--compact .maw-fora-graphrefresh-note { display: none; }
.maw-shell .maw-pane--compact .maw-fora-graphrefresh { padding: 0 6px; }

/* TasksView body-only wrapper (mounts into pane body, no pane chrome) */
.maw-shell .maw-tasks-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Two-region interior layout */
.maw-shell .tasks-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
  overflow: hidden;
}

/* ---- LEFT master panel ---- */
.maw-shell .tasks-master {
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Status summary row */
.maw-shell .tasks-status-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex: none;
}
.maw-shell .tasks-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  transition: .12s;
  font-weight: 500;
}
.maw-shell .tasks-stat-chip:hover { border-color: var(--line-hi); background: var(--panel-hover); color: var(--ink); }
.maw-shell .tasks-stat-chip.active-st { background: var(--green-soft); border-color: #b7d8c2; color: var(--green); }
.maw-shell .tasks-stat-chip.blocked-st { background: var(--orange-soft); border-color: var(--orange-bd); color: var(--orange-strong); }
.maw-shell .tasks-stat-chip.open-st { background: var(--panel); color: var(--ink-mut); }
.maw-shell .tasks-stat-chip.done-st { background: #f0f0ed; color: var(--ink-dim); }
.maw-shell .tasks-stat-chip .tasks-sc-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.maw-shell .tasks-due-hint {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--orange);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.maw-shell .tasks-due-hint svg { width: 11px; height: 11px; }

/* Escalations inbox */
.maw-shell .tasks-inbox-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 6px;
  flex: none;
}
.maw-shell .tasks-inbox-head .tih-label {
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-strong);
  display: flex;
  align-items: center;
  gap: 5px;
}
.maw-shell .tasks-inbox-head .tih-count {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  background: var(--orange);
  color: #fff;
  border-radius: 20px;
  padding: 1px 6px;
  font-weight: 700;
}
.maw-shell .tasks-inbox-head .tih-expand {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-dim);
  cursor: pointer;
}

/* Escalation card */
.maw-shell .tasks-esc-card {
  margin: 0 10px 8px;
  background: var(--panel);
  border: 1px solid var(--orange-bd);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 11px 9px;
  flex: none;
}
.maw-shell .tasks-esc-card.indigo-esc {
  border-color: var(--indigo-bd);
  border-left-color: var(--indigo);
}
.maw-shell .tasks-esc-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.maw-shell .tasks-agent-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--t-agent);
  flex: none;
}
.maw-shell .tasks-esc-agent {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t-agent);
  font-family: Menlo,Monaco,Consolas,monospace;
}
.maw-shell .tasks-esc-task-link {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-left: 2px;
}
.maw-shell .tasks-esc-task-link span {
  color: var(--t-task);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--orange-bd);
  text-underline-offset: 2px;
}
.maw-shell .tasks-esc-question {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 8px;
}
.maw-shell .tasks-esc-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.maw-shell .tasks-esc-choices .btn {
  height: 27px;
  font-size: 11.5px;
  padding: 0 10px;
}
.maw-shell .tasks-esc-choices .btn.clay {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .tasks-esc-choices .btn.clay:hover { background: #f0d5c0; }
/* free-text variant */
.maw-shell .tasks-esc-input-row {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.maw-shell .tasks-esc-input {
  flex: 1;
  height: 28px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}
.maw-shell .tasks-esc-input:focus { border-color: var(--indigo-bd); background: var(--panel); }
.maw-shell .tasks-esc-input::placeholder { color: var(--ink-dim); }

/* Scrollable list area */
.maw-shell .tasks-list-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 0 8px;
}

/* Group header */
.maw-shell .tasks-group-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 4px;
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
  cursor: pointer;
}
.maw-shell .tasks-group-hd svg { width: 12px; height: 12px; color: var(--ink-dim); }
.maw-shell .tasks-group-hd .tgh-count {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 10px;
  padding: 1px 6px;
}

/* Task row */
.maw-shell .tasks-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  border-radius: 8px;
  margin: 1px 6px;
  cursor: pointer;
  transition: background .1s;
  border: 1px solid transparent;
  position: relative;
}
.maw-shell .tasks-row:hover { background: var(--panel-hover); }
.maw-shell .tasks-row.selected {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}
.maw-shell .tasks-row.selected::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--indigo);
}
.maw-shell .tasks-row-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px;
  flex: none;
}
.maw-shell .tasks-row-body { flex: 1; min-width: 0; }
.maw-shell .tasks-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.maw-shell .tasks-row.selected .tasks-row-title { color: var(--indigo); }
.maw-shell .tasks-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
/* mini progress bar */
.maw-shell .tasks-mini-prog {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--ink-dim);
}
.maw-shell .tasks-mini-bar {
  width: 44px; height: 4px;
  border-radius: 2px;
  background: var(--line-hi);
  overflow: hidden;
}
.maw-shell .tasks-mini-fill {
  height: 100%; border-radius: 2px;
  background: var(--green);
}
/* deadline chip */
.maw-shell .tasks-dl {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
}
.maw-shell .tasks-dl.soon { border-color: var(--orange-bd); background: var(--orange-soft); color: var(--orange-strong); }
/* owner mini-avatar */
.maw-shell .tasks-owner-av {
  width: 17px; height: 17px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 8px; font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg,#334155,var(--navy));
  flex: none;
}
/* entity count pill */
.maw-shell .tasks-link-cnt {
  font-size: 10px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 3px;
}
.maw-shell .tasks-link-cnt svg { width: 10px; height: 10px; }
/* escalation badge on row */
.maw-shell .tasks-esc-badge {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 9.5px;
  background: var(--orange);
  color: #fff;
  border-radius: 10px;
  padding: 1px 5px;
  font-weight: 700;
}

/* ---- RIGHT detail panel ---- */
.maw-shell .tasks-detail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
}

/* Detail header */
.maw-shell .tasks-detail-hd {
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .tasks-detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
}
/* Title + pencil wrapper (click-to-edit name) */
.maw-shell .tasks-detail-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.maw-shell .tasks-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  min-width: 0;
  cursor: text;
  border-radius: 5px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background .1s;
}
.maw-shell .tasks-detail-title:hover { background: var(--panel-soft); }
.maw-shell .tasks-title-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: none;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.maw-shell .tasks-detail-title-row:hover .tasks-title-edit { opacity: 1; }
.maw-shell .tasks-title-edit:hover { background: var(--panel-soft); color: var(--indigo); }
.maw-shell .tasks-title-input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  border: 1px solid var(--indigo-bd);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--panel);
  outline: none;
}
/* Delete button (right of the status pill) */
.maw-shell .tasks-act-delete {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin-top: 1px;
  border: none;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.maw-shell .tasks-act-delete:hover { background: var(--red-soft); color: var(--red); }
.maw-shell .tasks-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  margin-top: 2px;
}
.maw-shell .tasks-status-pill.active { background: var(--green-soft); color: var(--green); border: 1px solid #b7d8c2; }
.maw-shell .tasks-status-pill.blocked { background: var(--orange-soft); color: var(--orange-strong); border: 1px solid var(--orange-bd); }

/* ---- Full-page Task detail tab (TaskDetailedView / detail:task) ---- */
/* "Open in Graph" isn't meaningful for a task -- hide the inherited hero action. */
.maw-shell .maw-detail-task .maw-detail-act-graph { display: none; }
/* Rich sub-views sit in the wide main column; give them a little breathing room. */
.maw-shell .maw-detail-task .td-desc-host { min-height: 320px; }
.maw-shell .maw-detail-task .td-rel-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.maw-shell .maw-detail-task .td-empty {
  color: var(--ink-dim); font-size: 12.5px; padding: 6px 0;
}
.maw-shell .maw-detail-task .td-muted { color: var(--ink-dim); }

/* Due-date distinct label (under the title, click to edit via calendar dropdown) */
.maw-shell .tasks-detail-due-row {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Inline milestone progress (right of the due label): bar + percent, or N/A */
.maw-shell .tasks-progress-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.maw-shell .tasks-progress-inline .tpi-bar {
  width: 96px;
  height: 6px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  flex: none;
}
.maw-shell .tasks-progress-inline .tpi-fill {
  height: 100%;
  background: var(--green);
  border-radius: 4px;
  transition: width .3s ease;
}
.maw-shell .tasks-progress-inline .tpi-pct {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mut);
}
.maw-shell .tasks-progress-inline .tpi-na {
  font-size: 11.5px;
  color: var(--ink-dim);
}
.maw-shell .tasks-due-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mut);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.maw-shell .tasks-due-label:hover { background: var(--panel-hover); border-color: var(--line-hi); }
.maw-shell .tasks-due-label .tasks-pill-caret { color: var(--ink-dim); }
.maw-shell .tasks-due-label.is-empty {
  color: var(--ink-dim);
  border-style: dashed;
  background: transparent;
}
.maw-shell .tasks-due-input {
  font-size: 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 2px 8px;
  outline: none;
}

/* Target progress block */
.maw-shell .tasks-target-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.maw-shell .tasks-target-label {
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  min-width: 60px;
  flex: none;
}
.maw-shell .tasks-target-bar-wrap {
  flex: 1;
  min-width: 0;
}
.maw-shell .tasks-target-bar-track {
  height: 7px;
  border-radius: 4px;
  background: var(--line-hi);
  overflow: hidden;
  margin-bottom: 3px;
}
.maw-shell .tasks-target-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), #5baa72);
}
.maw-shell .tasks-target-nums {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 11px;
  color: var(--ink-dim);
  display: flex;
  justify-content: space-between;
}
.maw-shell .tasks-target-nums .tn-cur { color: var(--green); font-weight: 700; }
.maw-shell .tasks-target-nums .tn-goal { color: var(--ink-mut); }

/* Meta row (owner, deadline, etc) */
.maw-shell .tasks-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.maw-shell .tasks-detail-meta .tdm-sep { color: var(--line-hi); font-size: 14px; }
.maw-shell .tasks-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-mut);
}
.maw-shell .tasks-meta-item svg { width: 12px; height: 12px; color: var(--ink-dim); }
.maw-shell .tasks-owner-av-sm {
  width: 19px; height: 19px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg,#334155,var(--navy));
  flex: none;
}
.maw-shell .tasks-owner-av-sm.collab {
  background: linear-gradient(145deg,#3b6ea5,var(--blue));
}
.maw-shell .tasks-detail-entities {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.maw-shell .tasks-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
  font-weight: 500;
}
.maw-shell .tasks-entity-chip:hover { background: var(--panel-hover); border-color: var(--line-hi); }
.maw-shell .tasks-entity-chip .tec-dot {
  width: 7px; height: 7px; border-radius: 2px; flex: none;
}
.maw-shell .tasks-detail-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Sub-tabs */
.maw-shell .tasks-subtabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 18px;
  flex: none;
  background: var(--panel);
}
.maw-shell .tasks-subtab {
  height: 37px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mut);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.maw-shell .tasks-subtab:hover { color: var(--ink); }
.maw-shell .tasks-subtab.active { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.maw-shell .tasks-subtab svg { width: 13px; height: 13px; }

/* Tab body container */
.maw-shell .tasks-tab-body {
  flex: 1;
  overflow: auto;
}
.maw-shell .tasks-tab-panel {
  display: none;
  padding: 18px 20px;
}
.maw-shell .tasks-tab-panel.active { display: block; }

/* ---- Trace panel ---- */
.maw-shell .tasks-trace {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Run header */
.maw-shell .tasks-run-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.maw-shell .tasks-run-hd .trh-agent {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--t-agent);
  display: flex;
  align-items: center;
  gap: 5px;
}
.maw-shell .tasks-run-hd .trh-agent .ad { width: 7px; height: 7px; border-radius: 50%; background: var(--t-agent); }
.maw-shell .tasks-run-hd .trh-ts {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  color: var(--ink-dim);
  margin-left: auto;
}

/* Agent message bubble -- editorial style */
.maw-shell .tasks-msg {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.maw-shell .tasks-msg-av {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(145deg,#6d45c9,var(--t-agent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}
.maw-shell .tasks-msg-body {
  flex: 1;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-bd);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.52;
  color: var(--ink);
  position: relative;
}
.maw-shell .tasks-msg-who {
  font-size: 10.5px;
  color: var(--t-agent);
  font-weight: 700;
  font-style: italic;
  margin-bottom: 4px;
}
/* citation markers */
.maw-shell sup.cite {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 8.5px;
  color: var(--indigo);
  vertical-align: super;
  cursor: help;
  padding: 0 1px;
}
/* footnote line */
.maw-shell .foot {
  display: block;
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--indigo-bd);
  line-height: 1.45;
}

/* Tool-run card */
.maw-shell .tasks-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px 11px;
  margin: 0 0 12px 36px;
  font-size: 12px;
}
.maw-shell .tasks-tool-ic {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex: none;
}
.maw-shell .tasks-tool-ic svg { width: 12px; height: 12px; color: var(--ink-dim); }
.maw-shell .tasks-tool-body { flex: 1; min-width: 0; }
.maw-shell .tasks-tool-name {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.maw-shell .tasks-tool-input {
  font-size: 11.5px;
  color: var(--ink-mut);
  line-height: 1.35;
}
.maw-shell .tasks-tool-input .ti-key {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
}
.maw-shell .tasks-tool-result {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.maw-shell .tasks-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--green-soft);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
}
.maw-shell .tasks-result-chip.neutral {
  background: var(--panel-soft);
  border-color: var(--line-hi);
  color: var(--ink-mut);
}
.maw-shell .tasks-result-chip.warn {
  background: var(--orange-soft);
  border-color: var(--orange-bd);
  color: var(--orange-strong);
}
.maw-shell .tasks-tool-expand {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 4px;
  flex: none;
  margin-top: 1px;
  transition: .1s;
}
.maw-shell .tasks-tool-expand:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .tasks-tool-expand svg { width: 12px; height: 12px; }

/* Inline escalation in trace */
.maw-shell .tasks-trace-esc {
  margin: 4px 0 0 36px;
  background: var(--panel);
  border: 1px solid var(--orange-bd);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 11px 13px 10px;
}
.maw-shell .tasks-trace-esc .tte-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 700;
  color: var(--orange-strong);
}
.maw-shell .tasks-trace-esc .tte-header svg { width: 12px; height: 12px; }
.maw-shell .tasks-trace-esc .tte-q {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* Overview tab */
.maw-shell .tasks-obj-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.maw-shell .tasks-obj-card .toc-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.maw-shell .tasks-obj-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  padding: 3px 0;
}
.maw-shell .tasks-obj-row .tor-lbl { color: var(--ink-dim); min-width: 90px; font-size: 11.5px; }
.maw-shell .tasks-checklist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.maw-shell .tasks-check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink);
  padding: 2px 0;
}
.maw-shell .tasks-check-item.done { color: var(--ink-dim); text-decoration: line-through; }
.maw-shell .tasks-cb-sq {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--line-hi);
  background: var(--panel);
  display: grid; place-items: center;
  flex: none;
}
.maw-shell .tasks-cb-sq.checked {
  background: var(--green);
  border-color: var(--green);
}
.maw-shell .tasks-cb-sq.checked::after {
  content: "";
  width: 7px; height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* Artifacts tab */
.maw-shell .tasks-artifact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.maw-shell .tasks-artifact-row:last-child { border-bottom: none; }
.maw-shell .tasks-artifact-ic {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  flex: none;
}
.maw-shell .tasks-artifact-ic svg { width: 14px; height: 14px; }
.maw-shell .tasks-artifact-name { font-weight: 600; color: var(--ink); }
.maw-shell .tasks-artifact-meta { font-size: 11px; color: var(--ink-dim); margin-top: 1px; }

/* Activity tab */
.maw-shell .tasks-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
}
.maw-shell .tasks-activity-item:last-child { border-bottom: none; }
.maw-shell .tasks-act-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-hi);
  margin-top: 4px;
  flex: none;
}
.maw-shell .tasks-act-dot.hi { background: var(--indigo-2); }
.maw-shell .tasks-act-dot.agent { background: var(--t-agent); }
.maw-shell .tasks-act-text { color: var(--ink-mut); line-height: 1.4; flex: 1; }
.maw-shell .tasks-act-text b { color: var(--ink); font-weight: 600; }
.maw-shell .tasks-act-ts {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
  margin-top: 1px;
}

/* Notes tab */
.maw-shell .tasks-note-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--t-note);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
}
.maw-shell .tasks-note-card .tnc-meta {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 6px;
  display: flex;
  gap: 8px;
}

/* ---- M2 frontend state/helper classes (added at Wave-2 reconcile; not in the
   mockup, which had no loading/empty/error/answered states). All scoped to
   .maw-shell, ASCII, reuse shell tokens. ---- */
.maw-shell .maw-tasks-loading,
.maw-shell .maw-tasks-empty,
.maw-shell .maw-tasks-error,
.maw-shell .tasks-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}
.maw-shell .maw-tasks-empty,
.maw-shell .tasks-detail-empty { color: var(--ink-mut); }
.maw-shell .maw-tasks-error { color: var(--orange-strong); }
.maw-shell .maw-tasks-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}
.maw-shell .maw-tasks-retry:hover { background: var(--indigo-soft); }
.maw-shell .maw-tasks-scroll-sentinel { height: 1px; width: 100%; }
.maw-shell .tasks-trace-body { display: flex; flex-direction: column; }
.maw-shell .tasks-esc-answered {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid #b7d8c2;
  border-radius: 6px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
.maw-shell .tasks-esc-err {
  font-size: 11px;
  color: var(--orange-strong);
  margin-top: 6px;
}
.maw-shell .tasks-entity-chip-add {
  border-style: dashed;
  color: var(--ink-mut);
}

/* ============================================================
   DETAILING PASS -- fidelity additions (2026-06-18)
   Brings Tasks to mockup parity with the Home pilot bar.
   All scoped to .maw-shell; ASCII-only; tokens only.
   ============================================================ */

/* ---- .btn alias (templates use .btn, atoms uses .maw-btn) ----
   Tasks templates emit .btn / .btn.clay / .btn.primary directly
   (same as mockup source). Alias here so they render correctly
   inside the shell without touching the shared atom definitions. */
.maw-shell .tasks-esc-card .btn,
.maw-shell .tasks-trace-esc .btn,
.maw-shell .tasks-detail-actions .btn,
.maw-shell .tasks-artifact-row .btn,
.maw-shell .tasks-tab-panel .btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .15s;
}
.maw-shell .tasks-esc-card .btn:hover,
.maw-shell .tasks-trace-esc .btn:hover,
.maw-shell .tasks-detail-actions .btn:hover,
.maw-shell .tasks-artifact-row .btn:hover,
.maw-shell .tasks-tab-panel .btn:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover);
}
/* clay = orange-tinted action (first escalation choice) */
.maw-shell .btn.clay,
.maw-shell .tasks-esc-choices .clay {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .btn.clay:hover,
.maw-shell .tasks-esc-choices .clay:hover { background: #f0d5c0; }
/* primary = indigo gradient */
.maw-shell .tasks-esc-input-row .primary,
.maw-shell .tasks-detail-actions .primary {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.maw-shell .tasks-esc-input-row .primary:hover,
.maw-shell .tasks-detail-actions .primary:hover {
  filter: brightness(1.04);
}
/* smaller btn used inside escalation cards */
.maw-shell .tasks-esc-choices .btn {
  height: 27px;
  font-size: 11.5px;
  padding: 0 10px;
}
.maw-shell .tasks-esc-input-row .primary {
  height: 28px;
  font-size: 12px;
}

/* ---- Inbox empty state ---- */
.maw-shell .maw-inbox-empty {
  font-size: 11.5px;
  color: var(--ink-dim);
  padding: 8px 14px 10px;
  font-style: italic;
}

/* ---- EscalationInboxView flex order: inbox is flex:none; list fills rest ---- */
/* The master panel is a flex-column; inbox (maw-escalation-inbox) is flex:none,
   list panel (maw-task-list-panel) takes the remaining height via flex:1. */
.maw-shell .maw-escalation-inbox {
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-shell .maw-task-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- tasks-status-pill additional states ---- */
.maw-shell .tasks-status-pill.open   { background: var(--panel-soft); color: var(--ink-mut); border: 1px solid var(--line-hi); }
.maw-shell .tasks-status-pill.review { background: var(--indigo-soft); color: var(--indigo); border: 1px solid var(--indigo-bd); }
.maw-shell .tasks-status-pill.done   { background: #f0f0ed; color: var(--ink-dim); border: 1px solid var(--line); }

/* ---- Loading spinner for detail pane ---- */
@keyframes maw-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.maw-shell .tasks-detail-spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-spin .8s linear infinite;
}

/* ---- Metric value helpers (used in overview tab) ---- */
.maw-shell .tasks-tab-panel .metric    { font-family: Menlo,Monaco,Consolas,monospace; color: var(--navy); font-weight: 600; }
.maw-shell .tasks-tab-panel .metric.up { color: var(--green); }

/* ---- tasks-result-chip inside overview (tasks-tab-panel) ---- */
.maw-shell .tasks-obj-row .tasks-result-chip {
  font-family: Menlo,Monaco,Consolas,monospace;
  font-size: 10px;
  padding: 1px 6px;
}

/* ---- Pane header icon color for task entity type ---- */
.maw-shell .tasks-pane-ic { background: rgba(180,83,9,.12); }

/* ---- Run header pill (maw-pill variant inside trace) ---- */
.maw-shell .tasks-run-hd .maw-pill {
  font-size: 10.5px;
  padding: 2px 7px;
}

/* ---- tasks-group-hd blocked count accent ---- */
.maw-shell .tasks-group-hd .tgh-count.blocked {
  background: var(--orange-soft);
  color: var(--orange);
}

/* ---- Due-hint hint: align right of status-bar ---- */
.maw-shell .tasks-status-bar {
  position: relative;
}

/* ---- trace-esc inside detail: bottom margin ---- */
.maw-shell .tasks-trace-esc {
  margin-bottom: 16px;
}

/* ---- task-detail-actions: "more" overflow button ---- */
.maw-shell .tasks-act-overflow {
  height: 32px;
  padding: 0 10px;
  font-size: 16px;
  letter-spacing: 2px;
}

/* ---- entity chip add: lighter cursor style ---- */
.maw-shell .tasks-entity-chip-add:hover {
  background: var(--panel-hover);
  border-color: var(--line-hi);
  color: var(--ink-mut);
}

/* ---- artifact icon color variants ---- */
.maw-shell .tasks-artifact-ic.blue  { background: var(--blue-soft); }
.maw-shell .tasks-artifact-ic.green { background: var(--green-soft); }
.maw-shell .tasks-artifact-ic.muted { background: var(--panel-soft); }

/* ---- activity tab: tighter layout ---- */
.maw-shell .tasks-activity-item {
  min-height: 28px;
}

/* ---- note card edit link ---- */
.maw-shell .tnc-meta .tnc-edit {
  margin-left: auto;
  cursor: pointer;
  color: var(--indigo);
  font-size: 10.5px;
}
.maw-shell .tnc-meta .tnc-edit:hover { text-decoration: underline; }

/* ---- class-drift gap-fill (detailing pass, 06-18-2026) ---- */

/* Activity tab: list wrapper + rows */
.maw-shell .tasks-act-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 14px;
}
.maw-shell .tasks-act-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.maw-shell .tasks-act-row:last-child { border-bottom: none; }
.maw-shell .tasks-act-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

/* Activity tab: action buttons row */
.maw-shell .tasks-act-add-note,
.maw-shell .tasks-act-add-entity,
.maw-shell .tasks-act-run-agent {
  height: 27px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}
.maw-shell .tasks-act-add-note:hover,
.maw-shell .tasks-act-add-entity:hover,
.maw-shell .tasks-act-run-agent:hover { background: var(--panel); }

/* Overview tab: section / label / value / chips */
.maw-shell .tasks-ov-section {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .tasks-ov-section:last-child { border-bottom: none; }
.maw-shell .tasks-ov-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.maw-shell .tasks-ov-val {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.maw-shell .tasks-ov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

/* Note card body + edit link (scoped via tasks-tnc-* prefix) */
.maw-shell .tasks-tnc-body {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.55;
  padding: 8px 14px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.maw-shell .tasks-tnc-edit {
  margin-left: auto;
  cursor: pointer;
  color: var(--indigo);
  font-size: 10.5px;
}
.maw-shell .tasks-tnc-edit:hover { text-decoration: underline; }

/* ============================================================
   Phase 26 Tasks -- Phase A (CRUD + link entity) controls.
   Added by rahul.suri 06/30/2026.
   ============================================================ */

/* .tasks-detail is the positioning context for the floating status/overflow menus. */
.maw-shell .tasks-detail { position: relative; }

/* New-task button (pushed to the right of the status bar) */
/* The "New task" button now lives in the pane head (.maw-pane-actions) and
   uses the shared .maw-btn.maw-primary styling from shell.css -- no bespoke
   .tasks-new-btn rules needed. */

/* Empty-state create CTA */
.maw-shell .maw-tasks-empty .tasks-empty-create {
  display: inline-flex; align-items: center; gap: 6px;
}

/* cancelled pill state (now reachable via the edit form + status menu) */
.maw-shell .tasks-status-pill.cancelled {
  background: #f0f0ed; color: var(--ink-dim); border: 1px solid var(--line);
  text-decoration: line-through;
}

/* Status pill -> clickable dropdown affordance */
.maw-shell .tasks-status-pill { cursor: pointer; }
.maw-shell .tasks-status-pill:hover { filter: brightness(0.97); }
.maw-shell .tasks-status-pill .tasks-pill-caret {
  width: 11px; height: 11px; opacity: .55; margin-left: 1px;
}

/* Entity chip badge (SM-788) */
.maw-shell .tasks-entity-chip .tec-badge {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Floating menu (status pill + overflow ...) */
.maw-shell .tasks-menu {
  position: absolute;
  z-index: 50;
  min-width: 150px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(40, 34, 24, .16);
  padding: 5px;
}
.maw-shell .tasks-menu-item {
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: .1s;
}
.maw-shell .tasks-menu-item:hover { background: var(--panel-hover); }
.maw-shell .tasks-menu-item.danger { color: var(--orange-strong); }
.maw-shell .tasks-menu-item.danger:hover { background: var(--orange-soft); }

/* ---- Delete-confirm overlay (body-appended; className carries maw-shell) ---- */
.maw-shell.tasks-confirm-root {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 26, 20, .42);
}
.maw-shell .tasks-confirm {
  width: 380px; max-width: calc(100vw - 40px);
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(30, 26, 20, .30);
  border: 1px solid var(--line);
  padding: 20px 20px 16px;
}
.maw-shell .tasks-confirm-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 7px; }
.maw-shell .tasks-confirm-msg { font-size: 12.5px; color: var(--ink-mut); line-height: 1.5; margin-bottom: 16px; }
.maw-shell .tasks-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.maw-shell .tasks-confirm .btn {
  height: 30px; padding: 0 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-hi); background: var(--panel); color: var(--ink);
}
.maw-shell .tasks-confirm .btn:hover { background: var(--panel-hover); }
.maw-shell .tasks-confirm .btn.danger { background: var(--orange-strong); color: #fff; border-color: transparent; }
.maw-shell .tasks-confirm .btn.danger:hover { filter: brightness(1.05); }
.maw-shell .tasks-confirm .btn.danger:disabled { opacity: .6; cursor: default; }

/* ============================================================
   Task entity picker (link entities) -- body-appended overlay.
   Root className carries maw-shell so the tokens cascade.
   ============================================================ */
.maw-shell.maw-task-picker-root {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 26, 20, .42);
}
.maw-shell .mtp-panel {
  width: 520px; max-width: calc(100vw - 40px);
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(30, 26, 20, .30);
  border: 1px solid var(--line);
  overflow: hidden;
}
.maw-shell .mtp-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); flex: none; }
.maw-shell .mtp-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.maw-shell .mtp-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; margin-bottom: 10px; }
.maw-shell .mtp-search { position: relative; }
.maw-shell .mtp-search-ic {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-dim);
}
.maw-shell .mtp-search-input {
  width: 100%; height: 32px; padding: 0 10px 0 30px;
  border: 1px solid var(--line-hi); border-radius: 8px;
  background: var(--panel-soft); color: var(--ink); font-size: 12.5px; outline: none;
  box-sizing: border-box;
}
.maw-shell .mtp-search-input:focus { border-color: var(--indigo); background: var(--panel); }
.maw-shell .mtp-body { flex: 1; overflow-y: auto; padding: 8px 10px; }
.maw-shell .mtp-loading { padding: 26px; text-align: center; color: var(--ink-dim); font-size: 12.5px; }
.maw-shell .mtp-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid var(--line-hi); border-top-color: var(--ink-mut);
  border-radius: 50%; animation: mtp-spin .7s linear infinite;
}
@keyframes mtp-spin { to { transform: rotate(360deg); } }
.maw-shell .mtp-empty { padding: 26px 18px; text-align: center; color: var(--ink-dim); font-size: 12.5px; line-height: 1.5; }
.maw-shell .mtp-group { margin-bottom: 8px; }
.maw-shell .mtp-group-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 700; color: var(--ink-dim);
  padding: 6px 8px 4px;
}
.maw-shell .mtp-group-count { font-size: 10px; color: var(--indigo); font-weight: 700; }
.maw-shell .mtp-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.maw-shell .mtp-opt:hover { background: var(--panel-hover); }
.maw-shell .mtp-opt-cb { width: 15px; height: 15px; cursor: pointer; flex: none; accent-color: var(--indigo); }
.maw-shell .mtp-badge {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px; font-weight: 600; color: var(--ink-mut);
  background: var(--panel-soft); border: 1px solid var(--line-hi);
  padding: 1px 6px; border-radius: 5px; flex: none;
}
.maw-shell .mtp-opt-name { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .mtp-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-top: 1px solid var(--line); flex: none;
}
.maw-shell .mtp-sel-count { font-size: 11.5px; color: var(--ink-dim); }
.maw-shell .mtp-foot-actions { display: flex; gap: 8px; }
.maw-shell .mtp-foot .btn {
  height: 30px; padding: 0 14px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line-hi); background: var(--panel); color: var(--ink);
}
.maw-shell .mtp-foot .btn:hover { background: var(--panel-hover); }
.maw-shell .mtp-foot .btn.primary { background: var(--navy); color: #fff; border-color: transparent; }
.maw-shell .mtp-foot .btn.primary:hover { background: var(--ink); }

/* ============================================================
   Phase 26 Tasks -- detail reshape (2026-07-01):
   Description tab (rich-text note) + Milestones tab (to-do list).
   ============================================================ */

/* Header milestone roll-up chip */
.maw-shell .tasks-ms-rollup-hd {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-mut); margin: 2px 0 9px;
}
.maw-shell .tasks-ms-rollup-hd svg { color: var(--green); }
.maw-shell .tasks-ms-rollup-hd .tmrh-n { font-weight: 700; color: var(--ink); }

/* ---- Description tab: fill the pane so the editor is roomy ---- */
.maw-shell .tasks-tab-panel#tab-description.active {
  display: flex; flex-direction: column; height: 100%; padding: 12px 14px;
}
.maw-shell #tab-description .js-description-mount { flex: 1; min-height: 0; display: flex; }
.maw-shell #tab-description .js-description-mount > * { flex: 1; min-height: 0; width: 100%; }
.maw-shell .tm-desc-wrap { display: flex; flex-direction: column; height: 100%; width: 100%; }
/* Footer action bar: last-updated (+ status) on the left, Save on the right. */
.maw-shell .tm-desc-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 10px; flex: none;
}
.maw-shell .tm-desc-meta {
  margin-right: auto; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.maw-shell .tm-desc-updated { font-size: 11px; color: var(--ink-mut); }
.maw-shell .tm-desc-status { font-size: 11px; color: var(--ink-dim); }
.maw-shell .tm-desc-save {
  height: 28px; padding: 0 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; background: var(--navy); color: #fff;
}
.maw-shell .tm-desc-save:hover { background: var(--ink); }
.maw-shell .tm-desc-body { flex: 1; min-height: 0; }
.maw-shell .tm-desc-rte { height: 100%; }
.maw-shell .tm-desc-loading { padding: 24px; text-align: center; color: var(--ink-dim); font-size: 12.5px; }
.maw-shell .tm-desc-fallback {
  width: 100%; height: 100%; min-height: 320px; box-sizing: border-box;
  border: 1px solid var(--line-hi); border-radius: 8px; padding: 10px;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--panel); resize: none;
}

/* ---- Milestones tab: a checkable to-do list ---- */
.maw-shell .tm-ms-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 10px;
}
.maw-shell .tm-ms-rollup { font-size: 12.5px; color: var(--ink-mut); }
.maw-shell .tm-ms-rollup .tm-ms-rollup-n { font-weight: 700; color: var(--ink); }
.maw-shell .tm-ms-addbtn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line-hi); background: var(--panel); color: var(--ink);
}
.maw-shell .tm-ms-addbtn:hover { background: var(--panel-hover); }
.maw-shell .tm-ms-empty {
  color: var(--ink-dim); font-size: 12.5px; line-height: 1.5;
  padding: 18px 0; text-align: center;
}
.maw-shell .tm-ms-list { display: flex; flex-direction: column; gap: 2px; }
.maw-shell .tm-ms-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 8px; border-radius: 8px; transition: background .1s;
}
.maw-shell .tm-ms-item:hover { background: var(--panel-soft); }
.maw-shell .tm-ms-item:hover .tm-ms-row-actions { opacity: 1; }
.maw-shell .tm-ms-check { padding-top: 1px; flex: none; }
.maw-shell .tm-ms-cb { width: 15px; height: 15px; cursor: pointer; accent-color: var(--green); }
.maw-shell .tm-ms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.maw-shell .tm-ms-text { font-size: 13px; color: var(--ink); line-height: 1.35; }
.maw-shell .tm-ms-item.done .tm-ms-text { text-decoration: line-through; color: var(--ink-dim); }
.maw-shell .tm-ms-untitled { color: var(--ink-dim); font-style: italic; }
.maw-shell .tm-ms-target {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: Menlo, Monaco, Consolas, monospace; font-size: 11px;
}
.maw-shell .tm-ms-target .tm-ms-metric { color: var(--indigo); }
.maw-shell .tm-ms-target .tm-ms-cmp { color: var(--ink-dim); }
.maw-shell .tm-ms-target .tm-ms-tgt { color: var(--ink-mut); font-weight: 600; }
.maw-shell .tm-ms-row-actions {
  display: flex; align-items: center; gap: 4px; flex: none;
  opacity: 0; transition: opacity .12s;
}
.maw-shell .tm-ms-kpi {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; border: 1px dashed var(--line-hi); background: transparent; color: var(--ink-dim);
}
.maw-shell .tm-ms-kpi:hover { border-color: var(--indigo); color: var(--indigo); }
.maw-shell .tm-ms-edit, .maw-shell .tm-ms-del {
  width: 24px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer; border: none; background: transparent; color: var(--ink-dim);
}
.maw-shell .tm-ms-edit:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .tm-ms-del:hover { background: var(--orange-soft); color: var(--orange-strong); }
/* add / edit form */
.maw-shell .tm-ms-form {
  margin-top: 10px; padding: 12px; border: 1px solid var(--line-hi);
  border-radius: 10px; background: var(--panel-soft);
}
.maw-shell .tm-ms-form-row { display: flex; gap: 8px; margin-bottom: 8px; }
.maw-shell .tm-ms-form-strict { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.maw-shell .tm-ms-form input[type="text"],
.maw-shell .tm-ms-form input[type="number"],
.maw-shell .tm-ms-form select {
  height: 30px; padding: 0 9px; border: 1px solid var(--line-hi); border-radius: 7px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 12.5px; box-sizing: border-box;
}
.maw-shell .tm-ms-form input:focus, .maw-shell .tm-ms-form select:focus { outline: none; border-color: var(--indigo); }
.maw-shell .tm-ms-f-text { flex: 1; }
.maw-shell .tm-ms-f-kind { flex: none; min-width: 150px; }
.maw-shell .tm-ms-f-metric { flex: 1; min-width: 160px; }
.maw-shell .tm-ms-f-cmp { flex: none; width: 62px; }
.maw-shell .tm-ms-f-target { flex: none; width: 96px; }
.maw-shell .tm-ms-f-unit { flex: none; width: 80px; }
.maw-shell .tm-ms-form-actions { display: flex; align-items: center; gap: 8px; }
.maw-shell .tm-ms-kpi-note { font-size: 10.5px; color: var(--ink-dim); margin-right: auto; font-style: italic; }
.maw-shell .tm-ms-cancel, .maw-shell .tm-ms-save {
  height: 30px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line-hi); background: var(--panel); color: var(--ink);
}
.maw-shell .tm-ms-cancel:hover { background: var(--panel-hover); }
.maw-shell .tm-ms-save { background: var(--navy); color: #fff; border-color: transparent; }
.maw-shell .tm-ms-save:hover { background: var(--ink); }

/*
 * graph.css - Assembler Workspace Graph view styles
 *
 * Scoped to .maw-shell. References tokens declared in shell/tokens.css.
 * No :root block -- reuse var(--token) from .maw-shell.
 * ASCII-only.
 *
 * P6 packet -- M3 Graph view.
 * Ported from artifacts/page-mockups/graph.html <style> g-* block.
 * Added: .g-nodes-layer, .g-viewport, .maw-graph-loading/empty/error state classes.
 */

/* ============================================================
   Graph page root
   ============================================================ */
/** Added by rahul.suri on 06/18/2026 - Honda Assembler M3 - Graph - view root must fill the WorkspaceView pane body (mirrors .maw-tasks-app) so .g-page/.g-middle flex-height resolves; without this the canvas collapses to a thin strip **/
.maw-shell .maw-graph-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.maw-shell .g-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================================================
   Filter bar -- LEFT SIDEBAR (folded out of the old top bar 2026-06-24)
   Holds Search + Layout toggle + Node-type chips + Edge-types legend,
   stacked vertically down the left edge of .g-middle.
   ============================================================ */
.maw-shell .g-filter-bar {
  display: flex;
  flex-direction: column;
  width: 216px;
  flex: none;
  height: 100%;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sidebar sections + labels */
.maw-shell .g-sb-section {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .g-sb-legend-section {
  border-bottom: none;
}
.maw-shell .g-sb-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.maw-shell .g-filter-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .13s;
  white-space: nowrap;
  color: var(--ink-mut);
  user-select: none;
}

.maw-shell .g-filter-chip .gfc-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.maw-shell .g-filter-chip.active {
  color: var(--ink);
  border-color: var(--line-hi);
  background: var(--panel);
}

.maw-shell .g-filter-chip.active .gfc-label {
  color: var(--ink);
}

.maw-shell .g-filter-chip:not(.active) {
  opacity: .45;
}

.maw-shell .g-filter-chip:hover {
  opacity: 1 !important;
}

.maw-shell .g-filter-sep {
  width: 1px;
  height: 20px;
  background: var(--line-hi);
  flex: none;
  margin: 0 3px;
}

.maw-shell .g-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ink-dim);
  width: 100%;
  cursor: text;
}

.maw-shell .g-search svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.maw-shell .g-search input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}

.maw-shell .g-search input::placeholder {
  color: var(--ink-dim);
}

/* Added by rahul.suri on 08/02/2026 - Phase 18-E3 B2 - hit count.
   The input needs min-width:0 to be allowed to shrink: an <input> has an
   intrinsic min-content width, so inside a flex row it refuses to give way and
   pushes the count clean out of the rounded box instead. */
.maw-shell .g-search input {
  min-width: 0;
  flex: 1 1 auto;
}

.maw-shell .g-search-count {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  color: var(--ink-dim);
  white-space: nowrap;
  user-select: none;
}

.maw-shell .g-search-count.g-search-none {
  color: var(--orange-strong);
}

/* Phase 18-E3 A5 - "Most connected" shelf (force layout only). */
.maw-shell .g-hot-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-shell .g-hot-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--ink-mut);
  cursor: pointer;
  transition: .13s;
  user-select: none;
}

.maw-shell .g-hot-row:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .g-hot-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
  display: inline-block;
}

/* min-width:0 is what makes the ellipsis work -- a flex item defaults to
   min-width:auto, which is its content width, so the name would push the
   degree badge out of the sidebar rather than truncate. */
.maw-shell .g-hot-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .g-hot-deg {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 15px;
}

/* Layout toggle -- full-width segmented control in the sidebar */
.maw-shell .g-layout-toggle {
  display: flex;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  overflow: hidden;
  width: 100%;
}

.maw-shell .g-layout-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-mut);
  background: var(--panel-soft);
  transition: .13s;
  border: none;
  white-space: nowrap;
  text-align: center;
}

/* Force-density slider (2026-08-19, Rahul) -- sits under the Layout toggle,
   shown only while Force is active (GraphFilterBarView toggles it). Own
   classes on purpose: .g-display-range is swept back to defaults by the
   Display Reset handler, and density is a layout setting that reset must not
   touch. The label is a <span>, never a <label> -- the global
   `label { display:block !important }` rule would kill this row's flex
   (see .claude/rules/jquery-hide-does-not-work-on-a-label.md). */
.maw-shell .g-density-row {
  display: flex; align-items: center; gap: 4px; margin-top: 7px; padding: 1px 0;
}
.maw-shell .g-density-label {
  flex: 0 0 62px; font-size: 11px; color: var(--ink-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .g-density-range {
  flex: 1 1 0; min-width: 0; height: 15px; margin: 0; cursor: pointer;
}
.maw-shell .g-density-val {
  flex: 0 0 30px; font-size: 10px; text-align: right; opacity: .6;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.maw-shell .g-layout-btn + .g-layout-btn {
  border-left: 1px solid var(--line-hi);
}

.maw-shell .g-layout-btn.active {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .g-layout-btn:hover:not(.active) {
  background: var(--panel-hover);
  color: var(--ink);
}

/* ============================================================
   Middle row: canvas + detail pane
   ============================================================ */
.maw-shell .g-middle {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   Graph canvas
   ============================================================ */
.maw-shell .g-canvas-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  /* subtle dot-grid */
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  /** Added by rahul.suri on 06/18/2026 - Honda Assembler M3 - whole canvas is pannable (drag affordance) **/
  cursor: grab;
}
.maw-shell .g-canvas-wrap:active {
  cursor: grabbing;
}
/** Added by rahul.suri on 06/18/2026 - Honda Assembler M3 - view root must FILL .g-canvas-wrap (transparent) so mousedown-to-pan fires across the whole visible area, not just the content box; parent dot-grid shows through **/
/** Added by rahul.suri on 07/27/2026 - Phase 18-E3 - overflow:hidden still makes
    this a SCROLL CONTAINER: it only blocks user scrolling, not programmatic. The
    .g-tools column is 200px tall, so in a pane shorter than that, clicking any
    tool button focuses it and the browser scrolls the canvas to reveal it --
    displacing the graph under its own transform (measured: scrollTop 78 at a
    122px canvas, nodes 71px outside the frame after a correct Fit). clip is not
    a scroll container, so scrollTop can never leave 0. Browsers that do not know
    the keyword drop the declaration and keep the hidden above. **/
.maw-shell .maw-graph-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
}

/* Pan/zoom viewport wrapper -- absolute, fills canvas; JS applies transform */
.maw-shell .g-viewport {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

/* Phase 18-E2: auto-pan easing. JS adds this class only for the animated
   ensure-visible pan (_panTo), removes it on transitionend/fallback. Manual
   pan/zoom never carries the class, so drag stays 1:1 immediate. */
.maw-shell .g-viewport--pan-anim {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .g-viewport--pan-anim {
    transition: none;
  }
}

/* SVG edge layer -- absolute, anchored at the viewport origin (0,0). Its px
   width/height are sized by JS (_sizeLayers) to the content canvas so it shares
   the EXACT coordinate space of .g-nodes-layer. Do NOT set width/height:100%
   here -- that collapses the SVG to the viewport's rendered size and overrides
   the JS sizing (edges then paint in the wrong coordinate space; see
   GraphCanvasView _sizeLayers FIX #6). */
.maw-shell .g-edge-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  /* Neutralize the global `img,svg { max-width:100% }` reset, which otherwise
     clamps the JS-sized SVG to the viewport width (~2765px) and breaks the 1:1
     px coordinate space the edges rely on. */
  max-width: none;
  max-height: none;
  /* Never clip edges to the SVG's own viewport box -- a dragged node (or a node
     in a far layout column) can sit beyond the content bbox the SVG is sized to,
     and the default svg overflow:hidden would otherwise cut those edges. */
  overflow: visible;
}

/* Transient expansion-animation overlay (Phase 18-E1c, sol B6). Its OWN svg so
   _paintEdges (which empties only .g-edge-svg) can repaint mid-animation without
   destroying the grow-lines. Same sizing discipline as .g-edge-svg above. */
.maw-shell .g-anim-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; /* above real edges, below nodes */
  pointer-events: none;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.maw-shell .g-anim-svg line {
  transition: stroke-dashoffset .26s ease-out;
}

/* Nodes layer -- absolute, fills canvas; node boxes positioned inside */
.maw-shell .g-nodes-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ============================================================
   Node boxes
   ============================================================ */
.maw-shell .g-node {
  position: absolute;
  width: 168px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  /* --g-scale is written per node type by the Display controls. A variable
     rather than a whole transform, so every OTHER transform rule on .g-node
     (the hover lift below) composes with it instead of being overridden --
     a per-type `transform: ... scale()` rule would out-specify :hover and
     silently kill the lift on exactly the types the user emphasised. */
  transform: translate(-50%, -50%) scale(var(--g-scale, 1));
}

.maw-shell .g-node:hover {
  box-shadow: 0 3px 12px rgba(60,48,28,.14);
  transform: translate(-50%, -50%) translateY(-1px) scale(var(--g-scale, 1));
  z-index: 4;
}

.maw-shell .g-node.selected {
  outline: 2.5px solid var(--indigo);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(79,70,229,.12);
  z-index: 3;
}

/** Removed by rahul.suri on 08/04/2026 - Phase 18-E3 C4 - the .g-pinned dot is
 *  gone along with stored placements. A drag is still sticky for the session,
 *  but it is no longer a mode the user has to be told they are in: there is
 *  nothing to release and nothing to reset, so a badge would be marking a
 *  state with no exit. */

/* Temporary glow pulse applied by GraphCanvasView.focusNode() when a node is
   focused programmatically (e.g. an "Open in Graph" action elsewhere in the
   app) so the eye finds it immediately. Settles into the plain .selected
   ring once the class is removed (~2.4s later). */
@keyframes g-node-focus-glow {
  0%   { box-shadow: 0 0 0 0 rgba(79,70,229,.5), 0 0 0 4px rgba(79,70,229,.12); }
  60%  { box-shadow: 0 0 0 14px rgba(79,70,229,0), 0 0 0 4px rgba(79,70,229,.12); }
  100% { box-shadow: 0 0 0 14px rgba(79,70,229,0), 0 0 0 4px rgba(79,70,229,.12); }
}

.maw-shell .g-node.g-node-focus-pulse {
  animation: g-node-focus-glow 1.2s ease-out 2;
  z-index: 5;
}

.maw-shell .g-node-head {
  border-radius: 8px 8px 0 0;
  padding: 3px 8px;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
}

.maw-shell .g-node-body {
  padding: 5px 8px 6px;
}

.maw-shell .g-node-body .g-node-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 3px;
  /* Wrap to at most 2 lines so the trailing identifier (e.g. _D02_Rail...) stays
     visible -- names are long + similar and the distinguishing part is at the end. */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.maw-shell .g-node-body .g-node-deg {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  color: var(--ink-dim);
  display: flex;
  gap: 8px;
}

/* ------------------------------------------------------------
   Minimap (Phase 18-E2 step 7)
   Bottom-right; the toolbar owns top-right. Sits ABOVE the viewport so it
   never scales or pans with the graph -- it is chrome, not content.
   ------------------------------------------------------------ */
.maw-shell .g-minimap {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 180px;
  height: 120px;
  z-index: 7;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  /* The whole box is a click target for repositioning, so a drag across it
     must not start a text selection. */
  user-select: none;
  -webkit-user-select: none;
}

.maw-shell .g-minimap-canvas {
  display: block;
  width: 180px;
  height: 120px;
}

/* The current view. Deliberately a light wash rather than a dark one: it marks
   where you ARE, and dimming that would invert the figure/ground. */
.maw-shell .g-minimap-view {
  position: absolute;
  border: 1.5px solid var(--indigo);
  background: rgba(79, 70, 229, .10);
  border-radius: 2px;
  pointer-events: none;   /* the click must reach .g-minimap underneath */
}

/* ------------------------------------------------------------
   Level of detail (Phase 18-E2 step 6b)
   The viewport is CSS-scaled, so card text renders at font-size * scale.
   GraphCanvasView._updateLod puts .g-lod-mid / .g-lod-min on .g-viewport
   once the text drops below a few on-screen pixels. At .g-lod-min the head
   bar becomes the whole card -- a solid rounded block in the node's type
   colour, which is the only per-node signal that survives that zoom.
   ------------------------------------------------------------ */
.maw-shell .g-lod-mid .g-node-body .g-node-deg {
  display: none;
}

.maw-shell .g-lod-min .g-node-body {
  display: none;
}

.maw-shell .g-lod-min .g-node-head {
  border-radius: 8px;
  /* Keep the text in flow so every block keeps one consistent height --
     hiding it would collapse the bar to its padding. */
  color: transparent;
  overflow: hidden;
}

/* A +N pill is ~2px on screen down here: unreadable and far too small to be
   a click target, so it is pure speckle along the right edge of every card. */
.maw-shell .g-lod-min .g-node-badges {
  display: none;
}

/* ============================================================
   Expand badges (Phase 18-E1 click-to-expand)
   The +N pill hangs off the node's right edge; states: +N collapsed,
   spinner loading, "-" expanded, "+R" load-more, "!" error retry.
   ============================================================ */
.maw-shell .g-node-badges {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 6;
}

.maw-shell .g-expand-badge,
.maw-shell .g-expand-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border: 1.5px solid #fff;
  border-radius: 11px;
  background: var(--indigo);
  color: #fff;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,.22);
  transition: transform .12s, box-shadow .12s, background .12s;
}

.maw-shell .g-expand-badge:hover,
.maw-shell .g-expand-more:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(15,23,42,.3);
}

.maw-shell .g-expand-badge:focus-visible,
.maw-shell .g-expand-more:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Expanded: quiet neutral "-" so collapse reads as secondary */
.maw-shell .g-expand-badge.is-open {
  background: var(--panel);
  color: var(--ink-dim);
  border-color: var(--line-hi);
}

/* Load-more companion pill under the "-" */
.maw-shell .g-expand-more {
  background: var(--navy);
}

/* Error: retry affordance */
.maw-shell .g-expand-badge.is-error {
  background: var(--orange-strong, #c2562f);
}

/* Loading spinner */
.maw-shell .g-expand-badge.is-loading {
  cursor: default;
  background: var(--indigo);
  opacity: .85;
}

@keyframes g-badge-spin {
  to { transform: rotate(360deg); }
}

.maw-shell .g-badge-spin {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: g-badge-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .g-badge-spin { animation-duration: 1.4s; }
}

/* ============================================================
   Expansion spawn / despawn animation (Phase 18-E1c, sol B6)
   ============================================================ */

/* Spawn: the node's CONTENT is wrapped in a transient .g-spawn-inner that
   scales/fades to identity. The wrapper (not .g-node) animates so the node's
   left/top px position and its base translate(-50%,-50%) stay untouched. */
.maw-shell .g-node .g-spawn-inner {
  transform-origin: 50% 50%;
}

.maw-shell .g-node.g-spawn-pre .g-spawn-inner {
  transform: scale(.6);
  opacity: 0;
}

.maw-shell .g-node.g-spawning .g-spawn-inner {
  transition: transform .18s ease-out, opacity .18s ease-out;
  transform: scale(1);
  opacity: 1;
}

/* Despawn: the reverse of spawn (sol B6 #5). The node itself only fades
   (its base translate(-50%,-50%) position transform stays untouched); the
   motion back INTO the clicked parent runs on a transient .g-despawn-inner
   wrapper whose target transform (translate(parent - final) scale(.6)) is
   set inline by _animateDespawn. */
.maw-shell .g-node.g-despawn {
  transition: opacity .15s ease-in;
  opacity: 0;
  pointer-events: none;
}

.maw-shell .g-node.g-despawn .g-despawn-inner {
  transform-origin: 50% 50%;
  transition: transform .15s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .g-anim-svg line,
  .maw-shell .g-node.g-spawning .g-spawn-inner,
  .maw-shell .g-node.g-despawn,
  .maw-shell .g-node.g-despawn .g-despawn-inner {
    transition: none;
  }
}

/* ============================================================
   Hover tooltip
   ============================================================ */
.maw-shell .g-tooltip {
  position: absolute;
  z-index: 10;
  background: var(--navy);
  color: #e8ecf7;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(15,23,42,.28);
  pointer-events: none;
  min-width: 180px;
}

.maw-shell .g-tooltip .gt-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-bottom: 5px;
}

.maw-shell .g-tooltip .gt-row {
  display: flex;
  gap: 8px;
  font-size: 10.5px;
  color: #aab0d4;
}

.maw-shell .g-tooltip .gt-row b {
  color: #d4d8f0;
  font-weight: 600;
}

.maw-shell .g-tooltip .gt-arr {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--navy);
}

/* ============================================================
   Edge legend overlay
   ============================================================ */
.maw-shell .g-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 6;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
  min-width: 170px;
}

.maw-shell .g-legend-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--ink-dim);
  margin-bottom: 7px;
}

.maw-shell .g-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--ink-mut);
  margin-bottom: 4px;
}

.maw-shell .g-legend-item:last-child {
  margin-bottom: 0;
}

.maw-shell .g-legend-line {
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  flex: none;
}

/* ============================================================
   Graph tools overlay
   ============================================================ */
.maw-shell .g-tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.maw-shell .g-tool-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  transition: .12s;
}

.maw-shell .g-tool-btn:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .g-tool-btn svg {
  width: 13px;
  height: 13px;
}

.maw-shell .g-tool-sep {
  height: 6px;
}

/* ============================================================
   Right detail pane
   ============================================================ */
.maw-shell .g-detail-pane {
  width: 0;                 /* collapsed by default -- only opens on node select */
  flex: none;
  border-left: 1px solid transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  transition: width .22s ease, border-color .22s ease;
}

/* Slid open when a node is selected (.g-detail-open set on .g-middle).
   DIRECT CHILD only: GraphDetailView renders its own .g-detail-pane inside this
   slot, and this selector carries FOUR classes to the inner pane's override
   (.maw-graph-detail > .g-detail-pane {width:auto}) three -- so a descendant
   match pins the inner pane to 320px and wins. That is invisible while the slot
   is also 320px, and clips the content the moment it is not (sol E3 r3). The
   collapsed base rule above stays descendant-scoped: width:0 there is correctly
   overridden by the inner pane's width:auto on specificity.

   Do NOT let a descendant-scoped twin of this rule back in. There was one, and
   reconciling this file against origin as a union of both sides restored it
   (290be3cf10) -- it sat directly below, same specificity, so it simply won on
   source order and silently undid the fix. A union merge is the wrong operation
   on a rule whose fix IS a deletion. */
.maw-shell .g-middle.g-detail-open > .g-detail-pane {
  width: 320px;
  border-left-color: var(--line);
}

/* The GraphDetailView's root (.maw-graph-detail) sits BETWEEN the 320px slot
   and the inner .g-detail-pane it builds. Without an explicit fill + min-height:0
   the flex height chain breaks here, so .g-dp-scroll (flex:1; overflow:auto) has
   no constrained height to scroll against. Make the wrapper + inner pane fill the
   slot so only .g-dp-scroll scrolls -- header (.g-dp-head) + actions stay pinned. */
.maw-shell .maw-graph-detail {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.maw-shell .maw-graph-detail > .g-detail-pane {
  flex: 1 1 auto;
  min-height: 0;
  width: auto;        /* override the 320px slot width for the inner pane */
  border-left: none;  /* the slot already draws the divider */
}

.maw-shell .g-dp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .g-dp-head .hd-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}

.maw-shell .g-dp-head .hd-ic svg {
  width: 17px;
  height: 17px;
}

.maw-shell .g-dp-head .hd-id {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.maw-shell .g-dp-head .hd-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.maw-shell .g-dp-head .hd-close:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .g-dp-scroll {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.maw-shell .g-dp-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-shell .g-dp-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--ink-dim);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.maw-shell .g-dp-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--line);
}

.maw-shell .g-dp-meta-row:last-child {
  border-bottom: none;
}

.maw-shell .g-dp-meta-lbl {
  color: var(--ink-dim);
  min-width: 106px;
  font-size: 11.5px;
  flex: none;
}

.maw-shell .g-dp-meta-val {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--navy);
  font-weight: 600;
}

.maw-shell .g-dp-meta-val.text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.maw-shell .g-dp-meta-val.good {
  color: var(--green);
}

.maw-shell .g-dp-rel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Cap the relationships list so a node with many edges scrolls WITHIN this
     box instead of pushing Recent Activity / Notes off the bottom of the pane. */
  max-height: 232px;
  overflow-y: auto;
  padding-right: 3px;
}
/* Slim scrollbar for the relationships list (WebKit). */
.maw-shell .g-dp-rel-list::-webkit-scrollbar {
  width: 7px;
}
.maw-shell .g-dp-rel-list::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 4px;
}
.maw-shell .g-dp-rel-list::-webkit-scrollbar-track {
  background: transparent;
}

.maw-shell .g-dp-rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.maw-shell .g-dp-rel-arrow {
  color: var(--ink-dim);
  font-size: 11px;
  white-space: nowrap;
  min-width: 82px;
}

.maw-shell .g-dp-rel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 7px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
  font-weight: 500;
}

.maw-shell .g-dp-rel-chip:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .g-dp-rel-chip .cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.maw-shell .g-dp-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.maw-shell .g-dp-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
}

.maw-shell .g-dp-feed-item:last-child {
  border-bottom: none;
}

.maw-shell .g-dp-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-hi);
  margin-top: 5px;
  flex: none;
}

.maw-shell .g-dp-feed-dot.hi {
  background: var(--indigo-2);
}

.maw-shell .g-dp-feed-text {
  color: var(--ink-mut);
  line-height: 1.4;
}

.maw-shell .g-dp-feed-text b {
  color: var(--ink);
  font-weight: 600;
}

.maw-shell .g-dp-feed-time {
  margin-left: auto;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.maw-shell .g-dp-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
  background: var(--panel-soft);
}

/* ============================================================
   Bottom Insights panel
   ============================================================ */
.maw-shell .g-insights {
  border-top: 1px solid var(--line);
  background: var(--panel);
  flex: none;
  overflow: hidden;
  transition: height .2s ease;
}

.maw-shell .g-insights.open {
  height: 50%;
}

.maw-shell .g-insights.closed {
  height: 36px;
}

.maw-shell .g-insights-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 36px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .g-insights-head .gi-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .g-insights-head .gi-title svg {
  width: 13px;
  height: 13px;
  color: var(--indigo);
}

/* Insights config controls (type toggle / select / scope label / generate btn) */
.maw-shell .g-insight-config {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  flex: 1;
}

.maw-shell .g-ins-toggle {
  display: flex;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  overflow: hidden;
  flex: none;
}

.maw-shell .g-ins-btn {
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-mut);
  background: var(--panel-soft);
  transition: .12s;
  border: none;
  white-space: nowrap;
}

.maw-shell .g-ins-btn + .g-ins-btn {
  border-left: 1px solid var(--line-hi);
}

.maw-shell .g-ins-btn.active {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .g-ins-btn:hover:not(.active) {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .g-ins-select {
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.maw-shell .g-ins-scope {
  font-size: 11.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.maw-shell .g-ins-scope b {
  color: var(--indigo);
  font-weight: 600;
}

.maw-shell .g-insights-collapse {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: .12s;
  user-select: none;
}

.maw-shell .g-insights-collapse:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .g-insights-body {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  overflow: auto;
  height: calc(210px - 36px);
}

/* Insight card (ML / Statistical) */
.maw-shell .g-insight-card {
  flex: 1;
  min-width: 0;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .g-insight-card .gic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.maw-shell .g-insight-card .gic-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.maw-shell .g-insight-card .gic-badge {
  font-size: 9.5px;
  font-family: Menlo, Monaco, Consolas, monospace;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

.maw-shell .gic-badge.ml {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .gic-badge.stat {
  background: var(--green-soft);
  color: var(--green);
}

/* Feature importance bars */
.maw-shell .g-feat-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.maw-shell .g-feat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.maw-shell .g-feat-name {
  font-family: Menlo, Monaco, Consolas, monospace;
  color: var(--ink-mut);
  min-width: 100px;
  font-size: 10.5px;
}

.maw-shell .g-feat-bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.maw-shell .g-feat-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--indigo-2), var(--indigo));
  transition: width .3s ease;
}

.maw-shell .g-feat-val {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--navy);
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

.maw-shell .g-insight-foot {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  color: var(--ink-dim);
  padding-top: 4px;
  border-top: 1px dotted var(--line-hi);
}

/* Statistical card grid */
.maw-shell .g-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.maw-shell .g-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-shell .g-stat-item .gsi-label {
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .g-stat-item .gsi-val {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.maw-shell .g-stat-item .gsi-val .gsi-sub {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-mut);
}

.maw-shell .g-stat-item .gsi-note {
  font-size: 10px;
  color: #a8431f;
  font-weight: 600;
}

/* M3 honest "coming soon" placeholder inside g-insights-body */
.maw-shell .g-insights-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12.5px;
  color: var(--ink-dim);
  font-style: italic;
}

/* ============================================================
   v2 state classes (emitted by GraphWorkspaceView / GraphCanvasView)
   Mirror the tasks.css state-class look (muted centered text).
   ============================================================ */
.maw-shell .maw-graph-loading,
.maw-shell .maw-graph-empty,
.maw-shell .maw-graph-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
  height: 100%;
}

.maw-shell .maw-graph-empty {
  color: var(--ink-mut);
}

/* Error state uses clay/orange per spec */
.maw-shell .maw-graph-error {
  color: #a8431f;
}

.maw-shell .maw-graph-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}

.maw-shell .maw-graph-retry:hover {
  background: var(--indigo-soft);
}

/* ============================================================
   Detail pane -- empty state
   ============================================================ */
.maw-shell .g-dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px 20px;
  text-align: center;
}
.maw-shell .g-dp-empty-text {
  font-size: 12.5px;
  color: var(--ink-dim);
  font-style: italic;
  line-height: 1.5;
}

/* ============================================================
   Detail pane -- header badge (text fallback when no SVG icon)
   ============================================================ */
.maw-shell .g-dp-head .hd-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
}
.maw-shell .g-dp-head .hd-badge {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 28px;
  text-align: center;
  line-height: 1.1;
}
.maw-shell .g-dp-head .hd-info { flex: 1; min-width: 0; }

/* ============================================================
   Detail pane -- action buttons using shared maw-btn atoms
   (bridge rule: .btn/.primary inside g-dp-actions mirror maw-btn/maw-primary
    so older GraphDetailView markup works without editing all callers)
   ============================================================ */
.maw-shell .g-dp-actions .btn {
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .15s;
}
.maw-shell .g-dp-actions .btn:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover);
}
.maw-shell .g-dp-actions .btn svg { width: 12px; height: 12px; }
.maw-shell .g-dp-actions .btn.primary {
  border: none;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
}
.maw-shell .g-dp-actions .btn.primary:hover {
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  filter: brightness(1.04);
}
.maw-shell .g-dp-actions .btn.stub { opacity: .55; cursor: not-allowed; }

/* ============================================================
   Filter bar -- chip count badge
   ============================================================ */
.maw-shell .g-filter-chip .gfc-count {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-dim);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  line-height: 14px;
  flex: none;
  margin-left: auto;   /* push the count to the right edge of the chip row */
}
.maw-shell .g-filter-chip.active .gfc-count {
  background: var(--panel);
  border-color: var(--line-hi);
  color: var(--ink-mut);
}

/* Filter chips -- vertical list in the left sidebar */
.maw-shell .g-filter-chips {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

/* Sidebar edge-types legend */
.maw-shell .g-sb-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maw-shell .g-sb-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.maw-shell .g-sb-legend-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}
.maw-shell .g-sb-legend-label {
  font-size: 11px;
  color: var(--ink-mut);
  white-space: nowrap;
}

/* The old floating in-canvas legend is superseded by the sidebar legend. */
.maw-shell .g-canvas-wrap .g-legend {
  display: none !important;
}

/* ============================================================
   Canvas loading state -- spinner + message (no more blank-then-pop)
   ============================================================ */
.maw-shell .maw-graph-loading-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-dim);
  pointer-events: none;
  text-align: center;
}
.maw-shell .maw-graph-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--line-hi);
  border-top-color: var(--indigo, #5048c6);
  animation: maw-graph-spin 0.8s linear infinite;
}
@keyframes maw-graph-spin {
  to { transform: rotate(360deg); }
}
.maw-shell .maw-graph-loading-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mut);
}
.maw-shell .maw-graph-loading-sub {
  font-size: 11.5px;
  color: var(--ink-dim);
}

/* Non-blocking "Refreshing" badge -- floats over the live graph (data stays). */
.maw-shell .maw-graph-refreshing {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  box-shadow: 0 4px 14px rgba(20, 18, 14, 0.12);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mut);
  pointer-events: none;
}
.maw-shell .maw-graph-spinner--sm {
  width: 13px;
  height: 13px;
  border-width: 2px;
}
/* Spin the toolbar refresh icon while a refresh is in flight. */
.maw-shell .g-tool-btn[data-action="refresh"].is-spinning svg {
  animation: maw-graph-spin 0.8s linear infinite;
}

/* ============================================================
   Graph tools overlay -- "Mode" button label tooltip
   ============================================================ */
.maw-shell .g-tool-btn[data-action="mode"] {
  position: relative;
}

/* ============================================================
   Detail pane -- Recent Activity feed
   (styles already in graph.css as g-dp-feed-* -- confirmed present;
    this block is a no-op guard so the section renders even if the
    outer g-dp-section gap is different from home.css)
   ============================================================ */
.maw-shell .g-dp-section + .g-dp-section {
  margin-top: 0;
}

/* ============================================================
   Detail pane -- Notes stub section
   ============================================================ */
.maw-shell .g-dp-notes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* ============================================================
   Detail pane -- workflowexecution (Run) status chip
   Added by rahul.suri on 07/10/2026 - honda-assembler-workflows Phase 04.
   Mirrors the existing .g-dp-meta-val.good soft-color convention, extended
   with a small palette so a Run's status reads at a glance in the Metadata
   section. Class names match GraphDetailView's status classification.
   ============================================================ */
.maw-shell .g-dp-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.4;
}
.maw-shell .g-dp-status-chip.status-success {
  color: var(--green);
  background: var(--green-soft);
}
.maw-shell .g-dp-status-chip.status-failed {
  color: var(--red);
  background: var(--red-soft);
}
.maw-shell .g-dp-status-chip.status-running,
.maw-shell .g-dp-status-chip.status-submitted {
  color: var(--blue);
  background: var(--blue-soft);
}
.maw-shell .g-dp-status-chip.status-stopped,
.maw-shell .g-dp-status-chip.status-unknown {
  color: var(--ink-dim);
  background: var(--panel-soft);
}

/* ============================================================
   Responsive chrome -- Phase 18-E3b
   Added by rahul.suri on 07/27/2026.

   GraphWorkspaceView measures .g-middle and stamps .g-narrow /
   .g-xnarrow on it (container-relative -- a media query would read the
   whole viewport and miss a split pane). Everything below is driven by
   those two classes; the JS sets no sizes itself.

   Resizing .g-canvas-wrap here is the POINT, not a side effect:
   GraphCanvasView's own ResizeObserver answers it with the camera
   (Phase 18-E3a). World-space layout constants never move, so E1's
   deterministic slots stay pinned through every breakpoint.
   ============================================================ */

/* Anchor for the floating detail pane below. .g-canvas-wrap is already
   position:relative, so its own overlays are unaffected by this. */
.maw-shell .g-middle {
  position: relative;
}

/* -- Narrow: give the canvas back the sidebar's surplus width. -------- */
.maw-shell .g-middle.g-narrow .g-filter-bar {
  width: 168px;
}
.maw-shell .g-middle.g-xnarrow .g-filter-bar {
  width: 148px;
}

/* The legend toggle. At full width it is exactly the label it replaced:
   no caret, no pointer, no hover -- so the button markup is invisible to
   anyone who is not short on room. */
.maw-shell .g-sb-legend-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  pointer-events: none;
  font: inherit;
  color: inherit;
}
.maw-shell .g-sb-legend-caret {
  display: none;
  font-size: 9px;
  line-height: 1;
  transition: transform .15s ease;
}

/* Narrow: the legend is the most expendable thing in the sidebar, so it
   collapses behind the toggle and gives its vertical space to the search
   box and the node-type chips. Scoping the collapse to .g-narrow means a
   left-closed legend cannot follow the user back out to the wide layout. */
.maw-shell .g-middle.g-narrow .g-sb-legend-toggle {
  pointer-events: auto;
  cursor: pointer;
}
.maw-shell .g-middle.g-narrow .g-sb-legend-caret {
  display: inline-block;
}
.maw-shell .g-middle.g-narrow .g-sb-legend-section .g-sb-legend {
  display: none;
}
.maw-shell .g-middle.g-narrow .g-sb-legend-section.g-sb-legend-open .g-sb-legend {
  display: flex;
}
.maw-shell .g-middle.g-narrow .g-sb-legend-section.g-sb-legend-open .g-sb-legend-caret {
  transform: rotate(90deg);
}

/* -- Extra narrow: float the detail pane instead of starving the canvas.
   The child combinator is load-bearing: GraphDetailView renders its OWN inner
   .g-detail-pane inside this slot, so a descendant selector would absolutely
   position and re-size that one too, breaking its flex/scroll chain.
   In flow, 148px of sidebar plus 320px of pane leaves almost nothing for
   the graph itself. Floating it keeps the canvas at full width and costs
   only an overlap while the pane is open. */
.maw-shell .g-middle.g-xnarrow > .g-detail-pane {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 0;
}
.maw-shell .g-middle.g-xnarrow.g-detail-open > .g-detail-pane {
  width: 300px;
  max-width: 86%;
  box-shadow: var(--shadow-sm);
}

/* The floating pane would otherwise sit straight on top of the zoom/fit
   tools, which are top-RIGHT. Move them to the opposite corner for as
   long as it is open so they stay reachable rather than merely visible. */
.maw-shell .g-middle.g-xnarrow.g-detail-open .g-tools {
  right: auto;
  left: 14px;
}

/* Added by rahul.suri on 08/01/2026 - Phase 18-E2 step 8c - display controls.
   A plain always-open section styled like Node types, NOT the legend's
   disclosure: it is a primary control, and hiding a control behind a caret in a
   sidebar that already has room is how the gear overlay went wrong. */
.maw-shell .g-display-group {
  margin: 8px 0 3px; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; opacity: .55;
}
.maw-shell .g-display-cols {
  display: flex; align-items: center; gap: 4px;
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .45; padding-bottom: 2px;
}
.maw-shell .g-display-cols .gdc-t { flex: 0 0 62px; }
.maw-shell .g-display-cols .gdc-s { flex: 1 1 0; text-align: center; }
.maw-shell .g-display-row {
  display: flex; align-items: center; gap: 4px; padding: 1px 0;
}
/* Deliberately a <span>, not a <label>: a global `label { display:block
   !important }` in the core stylesheet beats any flex we could put on one.
   See .claude/rules/jquery-hide-does-not-work-on-a-label.md */
.maw-shell .g-display-label {
  flex: 0 0 62px; display: flex; align-items: center; gap: 4px;
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .g-display-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; display: inline-block;
}
.maw-shell .g-display-range {
  flex: 1 1 0; min-width: 0; height: 15px; margin: 0; cursor: pointer;
}
.maw-shell .g-display-foot {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line);
  text-align: right;
}
.maw-shell .g-display-reset {
  background: none; border: 1px solid var(--line-hi); border-radius: 5px;
  padding: 2px 9px; font-size: 11px; cursor: pointer; color: inherit;
}
.maw-shell .g-display-reset:hover { border-color: var(--indigo); color: var(--indigo); }

/* Added by rahul.suri on 08/01/2026 - Phase 18-E2 step 8d - cost of a card at
   the lowest LOD. The existing LOD rules hide each card's CONTENTS, but all ~236
   .g-node elements stay in the document, each carrying a box-shadow, a 9px
   radius and a transition. Inside a scaled viewport that is what the compositor
   re-rasterizes on every zoom step, and none of it is visible at this scale --
   a shadow under a 20px-tall bar reads as nothing at all. Removing decoration
   nobody can see is free visually and strictly less work. */
.maw-shell .g-lod-min .g-node {
  box-shadow: none;
  border-radius: 3px;
  transition: none;
}

/* Removed by rahul.suri on 08/04/2026 - Phase 18-E3 C4 ask 2 - the .g-shove
   transition (C3) is gone, along with its LOD and reduced-motion overrides.

   Rahul: "the edges of the nodes that are moving move faster than the node
   itself. These should be moving at the same time." That was this rule. It
   eased left/top over .16s in the compositor, while _paintEdges recomputed
   edge geometry instantly from the MODEL position -- which the relaxer had
   already set to the destination. So the edge snapped to where the card was
   going and waited for it there. No timing value fixes that: the browser owned
   one half of the motion and JS owned the other.

   GraphCanvasView._animateNodesTo owns both halves now. Each frame it writes
   the DOM style and the model position from the same interpolated value, then
   repaints the edges from the model, so a card and its edges are drawn from
   identical numbers in identical frames. It also honours prefers-reduced-motion
   in JS (landing on the final positions immediately), which is what the media
   query below used to do. */

/** Added by rahul.suri on 08/02/2026 - Honda Assembler Phase 21d (packet D2) - evolution drawer **/

/* ============================================================
   Drawer shell
   ============================================================ */

.maw-shell .g-evolution {
  border-top: 1px solid var(--line);
  background: var(--panel);
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height .2s ease;
}

.maw-shell .g-evolution.closed {
  height: 36px;
}

.maw-shell .g-evolution.open {
  height: 46%;
}

/* ---- head ---- */

.maw-shell .g-ev-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 36px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .g-ev-head .gi-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.maw-shell .g-ev-head .gi-title svg {
  width: 13px;
  height: 13px;
  color: var(--indigo);
}

.maw-shell .g-ev-subject {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.maw-shell .g-ev-subject-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.maw-shell .g-ev-subject-type {
  font-size: 10.5px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex: none;
}

.maw-shell .g-ev-head .g-ev-refresh {
  font-size: 11.5px;
  padding: 2px 10px;
  flex: none;
}

.maw-shell .g-ev-collapse {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-mut);
  cursor: pointer;
  font-size: 11px;
  flex: none;
}

.maw-shell .g-ev-collapse:hover {
  background: var(--panel-hover);
  color: var(--navy);
}

/* ---- body ---- */

.maw-shell .g-ev-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 14px;
}

/* The drawer is 36px tall when collapsed; the body must not spill out of it
   or the rows paint over the canvas above. */
.maw-shell .g-evolution.closed .g-ev-body {
  display: none;
}

/* ============================================================
   Notices (idle / unsupported / loading / empty / error)
   ============================================================ */

.maw-shell .g-ev-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.maw-shell .g-ev-notice-text {
  flex: 1;
  min-width: 0;
}

.maw-shell .g-ev-notice-error .g-ev-notice-text {
  color: var(--orange-strong);
}

/* ============================================================
   Summary strip
   ============================================================ */

.maw-shell .g-ev-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .g-ev-stat {
  font-size: 11.5px;
  color: var(--ink-mut);
}

.maw-shell .g-ev-stat b {
  color: var(--navy);
  font-weight: 700;
}

.maw-shell .g-ev-tag {
  font-size: 10px;
  line-height: 1.6;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
  white-space: nowrap;
}

.maw-shell .g-ev-tag-warn {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.maw-shell .g-ev-tag-stale {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* ============================================================
   Timeline rows
   ============================================================ */

.maw-shell .g-ev-list {
  display: flex;
  flex-direction: column;
}

.maw-shell .g-ev-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.maw-shell .g-ev-row.is-diffable {
  cursor: pointer;
}

.maw-shell .g-ev-row.is-diffable:hover {
  background: var(--panel-hover);
}

.maw-shell .g-ev-row.is-open {
  background: var(--panel-soft);
  border-color: var(--line-hi);
}

/* The lane dot: indigo for a revision (something changed the entity), blue for
   a run (something was submitted FROM it). Same type-colour language as the
   graph nodes themselves. */
.maw-shell .g-ev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex: none;
  background: var(--t-sm);
}

.maw-shell .g-ev-row-provenance .g-ev-dot {
  background: var(--t-sim);
}

.maw-shell .g-ev-main {
  flex: 1;
  min-width: 0;
}

.maw-shell .g-ev-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.maw-shell .g-ev-change {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}

.maw-shell .g-ev-summary-text {
  font-size: 12px;
  color: var(--ink-mut);
  min-width: 0;
  overflow-wrap: anywhere;
}

.maw-shell .g-ev-metas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}

.maw-shell .g-ev-meta {
  font-size: 10.5px;
  color: var(--ink-dim);
}

.maw-shell .g-ev-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.maw-shell .g-ev-path {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink-mut);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .g-ev-path-more {
  background: transparent;
  border-style: dashed;
}

.maw-shell .g-ev-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-top: 1px;
}

.maw-shell .g-ev-sha {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
  padding: 0 6px;
}

.maw-shell .g-ev-time {
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ============================================================
   Diff panel (expanded under a row)
   ============================================================ */

.maw-shell .g-ev-diff {
  margin: 0 0 8px 26px;
  padding: 8px 10px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.maw-shell .g-ev-diff-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.maw-shell .g-ev-diff-vs {
  font-size: 10.5px;
  color: var(--ink-dim);
}

.maw-shell .g-ev-diff-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.maw-shell .g-ev-add {
  color: var(--green);
  font-weight: 700;
  font-family: var(--font-mono);
}

.maw-shell .g-ev-del {
  color: var(--red);
  font-weight: 700;
  font-family: var(--font-mono);
}

.maw-shell .g-ev-diff-note {
  font-size: 11px;
  color: var(--ink-dim);
  padding: 4px 0;
}

.maw-shell .g-ev-diff-error {
  color: var(--orange-strong);
}

.maw-shell .g-ev-hunk {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  margin-top: 6px;
}

.maw-shell .g-ev-hunk-head {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.maw-shell .g-ev-hunk-cols {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.maw-shell .g-ev-col {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}

.maw-shell .g-ev-col-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-dim);
  padding: 2px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.maw-shell .g-ev-col-before .g-ev-col-label {
  color: var(--red);
}

.maw-shell .g-ev-col-after .g-ev-col-label {
  color: var(--green);
}

/* A deck line is long and MUST NOT wrap - wrapping destroys column alignment
   between the two sides. It scrolls inside its own column instead, so the
   drawer itself never scrolls horizontally. */
.maw-shell .g-ev-lines {
  overflow-x: auto;
  max-height: 260px;
  overflow-y: auto;
}

.maw-shell .g-ev-ln {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  white-space: pre;
}

.maw-shell .g-ev-ln-no {
  flex: none;
  width: 44px;
  text-align: right;
  color: var(--ink-dim);
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  padding-right: 5px;
  position: sticky;
  left: 0;
}

.maw-shell .g-ev-ln-tx {
  color: var(--ink);
  padding-right: 8px;
}

/* ============================================================
   Narrow chrome (GraphWorkspaceView stamps .g-narrow / .g-xnarrow on
   .g-middle; the drawer is a sibling, so key off the page instead)
   ============================================================ */

@media (max-height: 720px) {
  .maw-shell .g-evolution.open {
    height: 56%;
  }
}

/** Updated by rahul.suri on 06/18/2026 - Honda Assembler detailing pass - raised to mockup fidelity **/

/*
 * home.css - Assembler Workspace Home view styles
 *
 * Scoped to .maw-shell. References tokens declared in shell/tokens.css.
 * Atoms (.maw-chip, .maw-pill, .maw-btn, .maw-stat, .maw-metric) come from atoms.css.
 * No :root block. ASCII-only.
 *
 * Class inventory (emitted by JS / TPL, styled here):
 *   Layout:      .maw-home-app, .home-layout, .home-rail, .home-list, .home-detail
 *   Rail:        .home-cat (alias slot), .home-cat-breadcrumb, .home-cat-section,
 *                .home-cat-item, .home-cat-all, .home-cat-divider, .hci-ic, .hci-cnt,
 *                .home-filter-chips, .home-filter-chip
 *   List:        .maw-home-list, .home-list-toolbar, .home-list-bc, .hbc-ic,
 *                .home-list-count, .home-tb-spacer, .home-search, .home-search-input,
 *                .home-toggle-btn, .home-sort-btn, .home-tb-btn,
 *                .home-table-wrap, .home-table, .ht-chk, .home-cb,
 *                .home-name-cell, .home-entity-ic, .hn-label, .hn-id, .hn-name,
 *                .home-status, .stat-lbl, .home-term-cell, .home-created-cell,
 *                .home-table-loading, .home-table-body,
 *                .home-table-footer, .home-footer-count, .home-footer-sep,
 *                .home-footer-sel, .home-pager, .home-pg-btn
 *   Detail:      .home-detail-head, .hd-ic, .hd-id, .hd-close,
 *                .home-detail-scroll, .home-dp-close (event alias for .hd-close),
 *                .home-ds, .home-ds-title, .home-meta-row, .home-meta-lbl, .home-meta-val,
 *                .home-rel-list, .home-rel-row, .home-rel-arrow, .home-rel-chip, .home-dp-rel-chip,
 *                .home-feed, .home-feed-item, .home-feed-dot, .home-feed-text, .home-feed-time,
 *                .home-detail-actions, .home-dp-act-open, .home-dp-empty, .home-dp-empty-text
 *   States:      .maw-home-loading, .maw-home-empty, .maw-home-error, .maw-home-retry
 */

/* ============================================================
   Home page root -- fills the WorkspaceView pane body
   ============================================================ */
.maw-shell .maw-home-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Home is a full-bleed 3-pane app -- drop the shared .maw-page-body 20px inset
   so the rail/list/detail run edge-to-edge inside the pane. Scoped via :has so
   other views keep their pane padding. */
.maw-shell .maw-page-body:has(> .maw-home-app) {
  padding: 0;
}

/* ============================================================
   3-column interior layout
   Left rail (210px fixed) + center list (flex) + right detail (300px fixed).

   Full-bleed toolbar (2026-08-20, Rahul): the list's toolbar spans the WHOLE
   top of the surface, over the category rail too. Mechanically: the grid
   gains an explicit toolbar-height row; .home-list spans cols 1-2 + both
   rows with 210px left padding, its toolbar pulls itself into that padding
   with a matching negative margin (inside the padding box, so the two
   overflow:hidden ancestors never clip it), and the rail overlays row 2 /
   col 1 (z-index 1, under the toolbar's z-index 5). --home-toolbar-h MUST
   equal .home-list-toolbar's pinned height below.
   ============================================================ */
.maw-shell .home-layout {
  --home-toolbar-h: 51px;
  display: grid;
  /* Detail column collapses to 0 until a row is selected (slide-out). */
  grid-template-columns: 210px 1fr 0px;
  grid-template-rows: var(--home-toolbar-h) 1fr;
  height: 100%;
  overflow: hidden;
  transition: grid-template-columns .28s cubic-bezier(.4, 0, .2, 1);
}
.maw-shell .home-layout.detail-open {
  grid-template-columns: 210px 1fr 320px;
}
/* Detail slot: no left border until expanded (avoids a 1px seam at width 0). */
.maw-shell .home-layout.detail-open .home-detail {
  border-left: 1px solid var(--line);
}

/* Slot containers */
.maw-shell .home-rail {
  grid-area: 2 / 1 / 3 / 2;   /* below the full-bleed toolbar */
  position: relative;
  z-index: 1;                 /* above .home-list's background */
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  padding: 0;
}
.maw-shell .home-list {
  grid-area: 1 / 1 / 3 / 3;   /* whole surface left of the detail column */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  min-height: 0;
  background: var(--panel);
}
.maw-shell .home-detail {
  grid-area: 1 / 3 / 3 / 4;   /* full height -- keeps its own header row */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  min-height: 0;
  /* min-width:0 lets the 0px grid track actually collapse (grid items default
     to min-width:auto, which would otherwise pin the pane to its content width). */
  min-width: 0;
}

/* ============================================================
   A. Category rail  (HomeCategoryRailView)
   .home-cat is aliased on the slot (both classes on same el).
   ============================================================ */

/* Project breadcrumb header */
.maw-shell .home-cat-breadcrumb {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-dim);
  font-weight: 600;
  letter-spacing: .2px;
  flex: none;
}
.maw-shell .home-cat-breadcrumb span {
  color: var(--ink-mut);
}

/* Section label (Browse / Filters / Design Step / Tags) */
.maw-shell .home-cat-section {
  padding: 10px 10px 4px;
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  flex: none;
}

/* Entity-type row */
.maw-shell .home-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  margin: 1px 6px;
  font-size: 13px;
  color: var(--ink-mut);
  cursor: pointer;
  transition: .13s;
  border: 1px solid transparent;
  position: relative;
  flex: none;
}
.maw-shell .home-cat-item:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.maw-shell .home-cat-item.active {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
  color: var(--indigo);
}
.maw-shell .home-cat-item.active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--indigo);
}

/* All-items row -- slightly bolder */
.maw-shell .home-cat-item.home-cat-all {
  font-weight: 600;
  color: var(--ink);
}

/* Icon container inside a category row */
.maw-shell .hci-ic {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: none;
}
.maw-shell .hci-ic svg {
  width: 13px;
  height: 13px;
}

/* Count badge inside a category row */
.maw-shell .hci-cnt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 10px;
  padding: 1px 6px;
  flex: none;
}
.maw-shell .home-cat-item.active .hci-cnt {
  background: var(--indigo-bd);
  color: var(--indigo);
}

/* Horizontal divider between Browse and Filters */
.maw-shell .home-cat-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 12px;
  flex: none;
}

/* Tags chips row (stub) */
.maw-shell .home-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 12px 10px;
  flex: none;
}
.maw-shell .home-filter-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  transition: .13s;
}
.maw-shell .home-filter-chip:hover {
  border-color: var(--indigo-bd);
  color: var(--indigo);
  background: var(--indigo-soft);
}

/* ============================================================
   B. Simulation list  (SimulationListView)
   ============================================================ */

/* View element fill (fills .home-list slot). padding-left clears the rail
   overlay (full-bleed toolbar, 2026-08-20) -- everything but the toolbar
   stays in the center column. */
.maw-shell .maw-home-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-left: 210px;
  box-sizing: border-box;
}

/* ---- Toolbar ----------------------------------------------------------- */
/* Full-bleed (2026-08-20): pulls itself over the category rail via the
   negative margin matching .maw-home-list's padding-left; height is PINNED
   and must equal --home-toolbar-h on .home-layout (30px controls + 10px
   vertical padding x2 + 1px border). z-index 2 beats the rail's z-index 1. */
/* z-index 5 (2026-08-20) beats BOTH the rail (1) and the sticky table header
   (.home-table thead tr, also 2) -- at equal z-index the thead won on DOM
   order and painted over the open filter/sort dropdowns.
   overflow-x:auto keeps every control reachable in a narrow pane. CSS forces
   overflow-y to auto alongside it, which is exactly why .home-menu is
   position:fixed rather than absolute -- see its rule. */
.maw-shell .home-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 51px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--panel);
  margin-left: -210px;
  position: relative;
  z-index: 5;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.maw-shell .home-list-toolbar::-webkit-scrollbar { height: 6px; }
.maw-shell .home-list-toolbar::-webkit-scrollbar-track { background: transparent; }
.maw-shell .home-list-toolbar::-webkit-scrollbar-thumb {
  background: var(--line-hi);
  border-radius: 3px;
}
.maw-shell .home-list-toolbar::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

/* Breadcrumb "Simulations N items" */
.maw-shell .home-list-bc {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex: none;
}
.maw-shell .hbc-ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--blue-soft);
  display: grid;
  place-items: center;
  flex: none;
}
.maw-shell .hbc-ic svg {
  width: 12px;
  height: 12px;
}
.maw-shell .home-list-count {
  font-weight: 400;
  color: var(--ink-dim);
  font-size: 12px;
}

/* Non-blocking "Refreshing" badge (SWR revalidation in flight; rows stay visible).
   Phase 24 -- mirrors the graph's .maw-graph-refreshing. A shared shell atom is the
   Phase 3 follow-up; for now it lives with the list. */
.maw-shell .home-refreshing-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
}
.maw-shell .home-refreshing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  border-top-color: transparent;
  animation: maw-home-refresh-spin 0.7s linear infinite;
}
@keyframes maw-home-refresh-spin { to { transform: rotate(360deg); } }

/* Flex spacer */
.maw-shell .home-tb-spacer { flex: 1; }

/* Manual refresh chip (2026-08-20, Rahul) -- sits LEFT of the search box,
   same 30px chip language as .home-filter-btn. While a refetch is in flight
   (this button or an SWR revalidate) ListView._setRefreshing adds
   .is-refreshing and the icon spins alongside the breadcrumb badge. */
.maw-shell .home-refresh-btn {
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-mut);
  cursor: pointer;
  transition: .13s;
}
.maw-shell .home-refresh-btn svg { width: 14px; height: 14px; }
.maw-shell .home-refresh-btn:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .home-refresh-btn.is-refreshing {
  color: var(--blue);
  cursor: default;
}
.maw-shell .home-refresh-btn.is-refreshing svg {
  animation: maw-home-refresh-spin 0.9s linear infinite;
}

/* Search box */
.maw-shell .home-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  flex: none;
  padding: 0 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  min-width: 160px;
  transition: .13s;
}
.maw-shell .home-search:focus-within {
  border-color: var(--indigo-bd);
  background: var(--panel);
}
.maw-shell .home-search svg { width: 13px; height: 13px; flex: none; }
.maw-shell .home-search-input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.maw-shell .home-search-input::placeholder { color: var(--ink-dim); }

/* List/grid toggle button */
.maw-shell .home-toggle-btn {
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  flex: none;
}
.maw-shell .home-toggle-btn svg { width: 13px; height: 13px; }

/* Sort button */
.maw-shell .home-sort-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  transition: .13s;
}
.maw-shell .home-sort-btn:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .home-sort-btn svg { width: 12px; height: 12px; }

/* New/Import toolbar buttons (use maw-btn/maw-primary/maw-stub from atoms.css) */
.maw-shell .home-tb-btn {
  height: 30px !important;
  font-size: 12px !important;
  flex: none;
}

/* Honest "coming soon" affordance for not-yet-wired toolbar controls
   (grid/list toggle, Sort) -- dimmed, neutral, non-interactive cursor.
   Overrides the toggle's default active look so it doesn't read as "selected". */
.maw-shell .home-toggle-btn.home-tb-soon,
.maw-shell .home-sort-btn.home-tb-soon {
  opacity: .45;
  cursor: not-allowed;
  background: var(--panel-soft);
  color: var(--ink-dim);
  border-color: var(--line);
}
.maw-shell .home-toggle-btn.home-tb-soon:hover,
.maw-shell .home-sort-btn.home-tb-soon:hover {
  background: var(--panel-soft);
  color: var(--ink-dim);
}
/* Disabled New/Import buttons read as disabled. */
.maw-shell .home-tb-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- Table ------------------------------------------------------------ */
.maw-shell .home-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.maw-shell .home-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.maw-shell .home-table thead tr {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  z-index: 2;
}
.maw-shell .home-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: .4px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.maw-shell .home-table th.ht-chk { width: 32px; padding: 8px 12px; }
.maw-shell .home-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
.maw-shell .home-table td.ht-chk { padding: 10px 12px; }
.maw-shell .home-table tbody tr {
  cursor: pointer;
  transition: background .1s;
}
.maw-shell .home-table tbody tr:hover {
  background: var(--panel-hover);
  box-shadow: inset 3px 0 0 var(--indigo-bd);
}
/* The empty-state row is a message, not a clickable entity row -- strip the
   clickable affordances (pointer cursor + hover highlight) so it doesn't read
   as a button. */
.maw-shell .home-table tbody tr.home-empty-row { cursor: default; }
.maw-shell .home-table tbody tr.home-empty-row:hover { background: transparent; box-shadow: none; }
.maw-shell .home-table tbody tr.selected {
  background: var(--indigo-soft);
  box-shadow: inset 3px 0 0 var(--indigo);
}
.maw-shell .home-table tbody tr.selected td { border-bottom-color: var(--indigo-bd); }

/* Checkbox cell */
.maw-shell .home-cb {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--line-hi);
  background: var(--panel);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.maw-shell .home-cb.checked {
  background: var(--indigo);
  border-color: var(--indigo);
}
.maw-shell .home-cb.checked::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

/* Name cell */
.maw-shell .home-name-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}
.maw-shell .home-entity-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}
.maw-shell .home-entity-ic svg { width: 13px; height: 13px; }
.maw-shell .hn-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.maw-shell .hn-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.maw-shell .hn-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.maw-shell .home-table tbody tr.selected .hn-name { color: var(--indigo); }

/* Phase 37 Packet F: row-level Edit -> the shared compose surface.
   Faded out until the row is hovered so the table stays quiet -- opacity,
   NOT visibility:hidden, which would drop the button from tab navigation
   (astra F R1); keyboard focus reveals it too. */
.maw-shell .home-row-edit {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  border-radius: 6px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
}
.maw-shell .home-table tbody tr:hover .home-row-edit,
.maw-shell .home-row-edit:focus { opacity: 1; }
.maw-shell .home-row-edit:hover { background: var(--panel-hover); color: var(--ink); }

/* Status cell */
.maw-shell .home-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.maw-shell .home-status .stat-lbl { color: var(--ink-mut); }
.maw-shell .home-status .maw-stat.maw-ok  ~ .stat-lbl { color: var(--green); }
.maw-shell .home-status .maw-stat.maw-run ~ .stat-lbl { color: var(--orange); }
.maw-shell .home-status .maw-stat.maw-err ~ .stat-lbl { color: var(--orange-strong); }

/* ---- Status pill badges ------------------------------------------------ */
/* A .home-status-pill wraps dot + label into a colored pill capsule.
   Used by SimulationListView rows to color-code job status at a glance. */
.maw-shell .home-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px 2px 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.maw-shell .home-status-pill .home-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
/* Normal / finished / complete -- green */
.maw-shell .home-status-pill.pill-ok {
  background: #d4edda;
  border-color: #b8dacc;
  color: #155724;
}
.maw-shell .home-status-pill.pill-ok .home-status-dot { background: #28a745; }
/* Running / queued -- blue */
.maw-shell .home-status-pill.pill-run {
  background: #d0e8ff;
  border-color: #b0d0f0;
  color: #0d47a1;
}
.maw-shell .home-status-pill.pill-run .home-status-dot { background: #1976d2; }
/* Error / failed -- red */
.maw-shell .home-status-pill.pill-err {
  background: #f8d7da;
  border-color: #f0b8be;
  color: #721c24;
}
.maw-shell .home-status-pill.pill-err .home-status-dot { background: #dc3545; }
/* Neutral / unknown */
.maw-shell .home-status-pill.pill-neutral {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--ink-mut);
}
.maw-shell .home-status-pill.pill-neutral .home-status-dot { background: var(--line-hi); }

/* Termination cell */
.maw-shell .home-term-cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mut);
}

/* Created cell */
.maw-shell .home-created-cell {
  font-size: 11.5px;
  color: var(--ink-mut);
  white-space: nowrap;
}

/** Added by rahul.suri on 07/26/2026 - Home browse: default Tags + Updated
    columns and a real timestamp for Created. **/

/* Stacked timestamp: date over time, so a full "Jul 26, 2026 / 14:37" costs
   no more column width than the old date-only "Jul 26". */
.maw-shell .home-stamp {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.3;
}
.maw-shell .home-stamp-d { white-space: nowrap; }
.maw-shell .home-stamp-t {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Tags cell: up to 3 chips then "+N". The chip max-width is what stops one
   verbose tag from pushing the later columns off screen -- the full list is
   on the cell's title attribute. */
.maw-shell .home-tags-cell { white-space: nowrap; }
.maw-shell .home-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 210px;
}
.maw-shell .home-tag-chip {
  display: inline-block;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.45;
  padding: 2px 8px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink-mut);
}
.maw-shell .home-tag-more {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Table loading state inside td */
.maw-shell .home-table-loading {
  padding: 0 !important;
  border: none !important;
}

/* ---- Footer ----------------------------------------------------------- */
.maw-shell .home-table-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  font-size: 11.5px;
  color: var(--ink-dim);
  flex: none;
}
.maw-shell .home-pager {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.maw-shell .home-pg-btn {
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 11.5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .12s;
  user-select: none;
}
.maw-shell .home-pg-btn:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .home-pg-btn.active {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
  color: var(--indigo);
  font-weight: 700;
}

/* ============================================================
   C. Simulation detail pane  (SimulationDetailView)
   Head fixed; body scrolls; actions fixed at bottom.
   ============================================================ */

/* View element fill (fills .home-detail slot).
   Fixed width = the open track width so the content is laid out at full width
   immediately and simply REVEALED by the clipping .home-detail track as it
   slides 0 -> 320px. Without this, the content reflows/compacts during the
   animation (text wrapping then un-wrapping as the container grows). */
.maw-shell .maw-home-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 320px;
  flex: none;
}

/* ---- Detail header --------------------------------------------------- */
.maw-shell .home-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
/* Entity icon in header */
.maw-shell .hd-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--blue-soft);
  display: grid;
  place-items: center;
  flex: none;
}
.maw-shell .hd-ic svg {
  width: 17px;
  height: 17px;
}
/* ID mono label */
.maw-shell .hd-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
/* Close button */
.maw-shell .hd-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: .12s;
  flex: none;
}
.maw-shell .hd-close:hover { background: var(--panel-hover); color: var(--ink); }
/* event alias on the same element (both hd-close and home-dp-close) */
.maw-shell .home-dp-close { cursor: pointer; }

/* ---- Scrollable body -------------------------------------------------- */
.maw-shell .home-detail-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Detail sections -------------------------------------------------- */
.maw-shell .home-ds {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maw-shell .home-ds-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--ink-dim);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* ---- Metadata rows ---------------------------------------------------- */
.maw-shell .home-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--line);
}
.maw-shell .home-meta-row:last-child { border-bottom: none; }
.maw-shell .home-meta-lbl {
  color: var(--ink-dim);
  min-width: 110px;
  font-size: 11.5px;
  flex: none;
}
.maw-shell .home-meta-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--navy);
  font-weight: 600;
}
.maw-shell .home-meta-val.normal { color: var(--green); }
.maw-shell .home-meta-val.text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

/* ---- Relationship chips ----------------------------------------------- */
.maw-shell .home-rel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maw-shell .home-rel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.maw-shell .home-rel-arrow {
  color: var(--ink-dim);
  font-size: 11px;
  white-space: nowrap;
  min-width: 90px;
}
/* Relationship chip: extends .maw-chip .maw-chip-clickable from atoms.css */
.maw-shell .home-rel-chip {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  padding: 3px 9px;
}

/* ---- Activity feed ---------------------------------------------------- */
.maw-shell .home-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.maw-shell .home-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
}
.maw-shell .home-feed-item:last-child { border-bottom: none; }
.maw-shell .home-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-hi);
  margin-top: 5px;
  flex: none;
}
.maw-shell .home-feed-dot.hi { background: var(--indigo-2); }
.maw-shell .home-feed-text { color: var(--ink-mut); line-height: 1.4; flex: 1; }
.maw-shell .home-feed-text b { color: var(--ink); font-weight: 600; }
.maw-shell .home-feed-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ---- Actions footer --------------------------------------------------- */
.maw-shell .home-detail-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
  background: var(--panel-soft);
}
/* Primary action (extends maw-btn maw-primary via atoms.css) */
.maw-shell .home-dp-act-open { }

/* ---- Empty state ------------------------------------------------------ */
.maw-shell .home-dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--ink-dim);
  text-align: center;
  padding: 40px 24px;
}
.maw-shell .home-dp-empty svg {
  width: 32px;
  height: 32px;
  color: var(--ink-dim);
}
.maw-shell .home-dp-empty-text {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ============================================================
   State classes (emitted by all three panels).
   ============================================================ */
.maw-shell .maw-home-loading,
.maw-shell .maw-home-empty,
.maw-shell .maw-home-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
  height: 100%;
}
.maw-shell .maw-home-empty { color: var(--ink-mut); }
/* A project with no entities (Phase 57): Suri's panel in place of the one-line message. */
.maw-shell .maw-home-start { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; }
.maw-shell .maw-home-start-ic { width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); }
.maw-shell .maw-home-start-ic svg { width: 22px; height: 22px; }
.maw-shell .maw-home-start strong { font-size: 17px; color: var(--navy); }
.maw-shell .maw-home-start > span { font-size: 13.5px; color: var(--ink-mut); }
.maw-shell .maw-home-start-acts { display: flex; gap: 10px; margin-top: 12px; }
.maw-shell .maw-home-error { color: var(--orange-strong); }
.maw-shell .maw-home-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}
.maw-shell .maw-home-retry:hover { background: var(--indigo-soft); }

/* ============================================================
   Skeleton loading (shimmer) -- shown in the table tbody + cells
   while a list worker is in flight, instead of plain "Loading..." text.
   ============================================================ */
.maw-shell .maw-skel {
  display: inline-block;
  border-radius: 5px;
  background: var(--panel-hover);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0)   100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: maw-skel-shimmer 1.25s ease-in-out infinite;
  vertical-align: middle;
}
.maw-shell .maw-skel-cb {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.maw-shell .maw-skel-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}
/* Skeleton rows are non-interactive (no data-row-id, so no click handler). */
.maw-shell .home-table tbody tr.home-skel-row {
  cursor: default;
}
.maw-shell .home-table tbody tr.home-skel-row:hover {
  background: transparent;
}
@keyframes maw-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================ */
/* Toolbar filter + sort dropdowns (functional)                  */
/* ============================================================ */
.maw-shell .home-filter,
.maw-shell .home-sort { position: relative; flex: none; }

/* Filter (hamburger) button -- mirrors the toggle button look */
.maw-shell .home-filter-btn {
  position: relative;
  height: 30px;
  width: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-mut);
  cursor: pointer;
  transition: .13s;
}
.maw-shell .home-filter-btn svg { width: 14px; height: 14px; }
.maw-shell .home-filter-btn:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .home-filter-btn.is-active,
.maw-shell .home-filter-btn.is-open {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}
.maw-shell .home-filter-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--indigo);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-sizing: border-box;
}
.maw-shell .home-sort-btn.is-open {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}
.maw-shell .home-sort-cur { color: var(--ink); font-weight: 600; }

/* Dropdown panel.
   FIXED, not absolute (2026-08-20): .home-list-toolbar is overflow-x:auto so a
   narrow pane can still reach every control, and CSS forces overflow-y to auto
   alongside it -- an absolutely positioned menu would be clipped to the 51px
   bar. Nothing in the .maw-shell ancestor chain sets transform/filter, so a
   fixed child escapes that clip. Real top/left are written on open by each
   host's _anchorMenu(); the 0/0 here is only a pre-paint default.
   z-index 50 sits inside .home-list-toolbar's z-index 5 context, which is what
   puts it over the sticky table header. */
.maw-shell .home-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  min-width: 200px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 5px;
}
.maw-shell .home-menu-sec { padding: 3px 0; }
.maw-shell .home-menu-sec + .home-menu-sec { border-top: 1px solid var(--line); margin-top: 3px; }
.maw-shell .home-menu-h {
  padding: 5px 9px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.maw-shell .home-menu-empty { padding: 4px 9px 7px; font-size: 12px; color: var(--ink-dim); }
.maw-shell .home-menu-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  padding: 6px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: background .12s;
}
.maw-shell .home-menu-opt:hover { background: var(--panel-hover); }
.maw-shell .home-menu-opt.is-on { color: var(--ink); font-weight: 600; }
.maw-shell .home-menu-check {
  flex: none;
  width: 14px;
  color: var(--indigo);
  font-size: 12px;
}
.maw-shell .home-menu-cb {
  flex: none;
  width: 15px; height: 15px;
  border: 1.5px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  position: relative;
  transition: border-color .12s, background .12s;
}
.maw-shell .home-menu-cb.checked { border-color: var(--indigo); background: var(--indigo); }
.maw-shell .home-menu-cb.checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.maw-shell .home-menu-foot {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding: 5px 4px 2px;
}
.maw-shell .home-filter-clear {
  width: 100%;
  font: inherit;
  font-size: 12px;
  color: var(--ink-mut);
  background: none;
  border: none;
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.maw-shell .home-filter-clear:hover:not([disabled]) { background: var(--panel-hover); color: var(--ink); }
.maw-shell .home-filter-clear[disabled] { opacity: .4; cursor: default; }

/* Created By column cell */
.maw-shell .home-by-cell {
  color: var(--ink-mut);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ============================================================ */
/* Mass-selection action bar + checked rows                      */
/* ============================================================ */
.maw-shell .home-sel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 0 2px;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
}
.maw-shell .home-sel-bar-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--indigo);
}
.maw-shell .home-sel-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.maw-shell .home-sel-bar-actions .maw-btn { height: 28px; font-size: 12px; }
.maw-shell .maw-btn.maw-danger {
  border: none;
  color: #fff;
  background: var(--red);
}
.maw-shell .maw-btn.maw-danger:hover { background: var(--red); filter: brightness(1.06); }
.maw-shell .maw-btn.maw-danger:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* Checked (mass-op) rows -- distinct from the single detail-pane .selected row */
.maw-shell .home-table tbody tr.is-checked td { background: var(--indigo-soft); }
.maw-shell .home-table tbody tr.is-checked:hover td { background: var(--indigo-soft); }

/* Header select-all checkbox shares the row checkbox look */
.maw-shell .home-tb-all-cb { cursor: pointer; }

/* Suppress text selection while drag-selecting rows */
.maw-shell .home-table tbody { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* "All items" view -- per-row entity-type chip (color set inline per type) */
.maw-shell .home-type-cell { white-space: nowrap; }
.maw-shell .home-type-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.45;
}

/** Added by rahul.suri on 07/27/2026 - Home browse: simulation Status shows the
    exact status with a live spinner, and DOE study rows carry a child-simulation
    rollup (progress bar + per-bucket counts). **/

/* ------------------------------------------------------------------------ *
 * Simulation Status
 * ------------------------------------------------------------------------ */
.maw-shell .home-simstatus-cell { white-space: nowrap; }

/* Spinner replaces .home-status-dot while a job is NOT in a terminal state.
   Same 6px box as the dot so the pill does not change width when a job moves
   from solving to finished -- a row that resizes on every poll is noise. The
   1px ring needs a slightly larger box to stay legible, so it is inset by the
   border rather than grown. */
.maw-shell .home-status-pill .home-status-spin {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(25, 118, 210, 0.30);
  border-top-color: #1976d2;
  animation: maw-home-spin 0.7s linear infinite;
}
@keyframes maw-home-spin { to { transform: rotate(360deg); } }

/* Respect the OS setting: keep the ring (it still reads as "in progress"
   because it is open, not a filled dot) but stop it moving. */
@media (prefers-reduced-motion: reduce) {
  .maw-shell .home-status-pill .home-status-spin { animation: none; }
}

/* ------------------------------------------------------------------------ *
 * DOE study rollup
 * ------------------------------------------------------------------------ */
.maw-shell .home-num-cell {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  /* Numeric columns are narrow on purpose -- five of them sit side by side. */
  width: 1%;
  padding-left: 10px;
  padding-right: 10px;
}
.maw-shell .home-num { font-weight: 700; }
.maw-shell .home-num.n-ok   { color: #1e7e34; }
.maw-shell .home-num.n-run  { color: #1565c0; }
.maw-shell .home-num.n-idle { color: var(--ink-mut); font-weight: 600; }
.maw-shell .home-num.n-err  { color: #c62828; }
/* A zero is a dash, not "0": on a healthy study the Failed column should read
   as empty at a glance so a real failure is the only number that shouts. */
.maw-shell .home-num-zero { color: var(--line-hi); }

.maw-shell .home-progress-cell { width: 150px; white-space: nowrap; }
.maw-shell .home-prog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}
.maw-shell .home-prog-track {
  flex: 1 1 auto;
  min-width: 52px;
  height: 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.maw-shell .home-prog-fill {
  display: block;
  height: 100%;
  background: #1976d2;
  border-radius: 999px;
  /* No transition: the bar is a snapshot of the list fetch, not a live meter.
     Animating it would imply tracking the list does not do. */
}
.maw-shell .home-prog-fill.is-done   { background: #28a745; }
/* Any failed child keeps the bar amber even at 100% -- "all finished" and
   "all finished, four of them failed" must not look identical. */
.maw-shell .home-prog-fill.has-failed { background: #e0a800; }
.maw-shell .home-prog-num {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  min-width: 30px;
  text-align: right;
}

/* Add to study (P1-5): the panel under the selection bar */
.maw-shell .home-ats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px; margin: 0 0 2px;
  background: var(--panel); border: 1px solid var(--indigo-bd); border-radius: var(--radius-sm);
}
.maw-shell .home-ats-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.maw-shell .home-ats select, .maw-shell .home-ats input[type="text"] {
  height: 28px; padding: 3px 8px; font-size: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--radius-sm); outline: none;
}
.maw-shell .home-ats input[type="text"] { min-width: 220px; }
.maw-shell .home-ats .maw-btn { height: 28px; font-size: 12px; }
.maw-shell .home-ats-msg { font-size: 12px; color: var(--ink-mut); }
.maw-shell .home-ats-msg.is-error { color: var(--red); }

/*
 * dashboard.css - Assembler Workspace Dashboard view styles
 *
 * Scoped to .maw-shell. References tokens declared in shell/tokens.css.
 * No :root block -- reuse var(--token) from .maw-shell.
 * ASCII-only.
 *
 * DB-CSS/TPL packet -- M4 Dashboard view.
 * Selectors target the ACTUAL classes the widget JS emits (maw-dw-*),
 * not the mockup's class names. Visual styling (card chrome, chips,
 * tables, progress bars, stat numbers, badges) is ported from
 * artifacts/page-mockups/dashboard.html, re-pointed at the real classes.
 *
 * CRITICAL layout: each .maw-dw-card is a FIXED-HEIGHT card whose body
 * (.maw-dw-card-body / .maw-dw-body) scrolls internally (overflow:auto)
 * so a long list / 98-row sim table does NOT blow out the grid.
 */

/* ============================================================
   Dashboard page root -- must fill the WorkspaceView pane body
   (mirrors .maw-graph-app / .maw-tasks-app -- the M3 lesson).
   ============================================================ */
.maw-shell .maw-dashboard-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: auto;
}

/* Neutral template root + grid placement */
.maw-shell .dw-root {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ============================================================
   Widget grid -- 12-col; rows get a sensible fixed min height so
   every card is the same size and bodies scroll within.
   ============================================================ */
.maw-shell .dw-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* min-content (NOT a fixed 280px) so group-label rows collapse to their own
     height; card slots carry an explicit 280px height below. A fixed
     grid-auto-rows would force the label into a 280px row -> a large empty gap. */
  grid-auto-rows: min-content;
  gap: 14px;
  padding: 18px;
  align-items: stretch;
}

/* Column span helpers */
.maw-shell .dw-col-4  { grid-column: span 4; }
.maw-shell .dw-col-5  { grid-column: span 5; }
.maw-shell .dw-col-6  { grid-column: span 6; }
.maw-shell .dw-col-7  { grid-column: span 7; }
.maw-shell .dw-col-8  { grid-column: span 8; }
.maw-shell .dw-col-12 { grid-column: span 12; }

/* Group label row -- spans the full grid width, does not occupy a card row */
.maw-shell .dw-group-label {
  grid-column: span 12;
  grid-row: auto;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  min-height: 0;
  height: auto;
}

.maw-shell .dw-group-label span {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--line-hi);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

/* Group labels must not be stretched to the 280px auto-row height */
.maw-shell .dw-grid > .dw-group-label {
  grid-row: span 1;
  align-self: stretch;
  height: 28px;
}

/* ============================================================
   Slot container -- filled by DashboardView widget mounts.
   The slot fills its grid cell; the inner .maw-dw-card fills the slot.
   ============================================================ */
.maw-shell .dw-slot {
  min-width: 0;
  min-height: 0;
  height: 280px;   /* fixed card height (grid-auto-rows is min-content now) */
  display: flex;
}

/* The bare widget root (DashboardView mounts the widget el here) fills the slot */
.maw-shell .dw-slot > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* ============================================================
   Card chrome -- .maw-dw-card is the ACTUAL card the widget JS
   wraps its body in. FIXED-HEIGHT flex column; body scrolls.
   ============================================================ */
.maw-shell .maw-dw-card {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
}

.maw-shell .maw-dw-card:hover {
  box-shadow: 0 2px 4px rgba(60,48,28,.08), 0 8px 22px rgba(60,48,28,.09);
}

/* ---- Card header (convention #1: card-header / card-title / card-count) ----
   ---- Header convention #2 (header / title) aliased to the same look ---- */
.maw-shell .maw-dw-card-header,
.maw-shell .maw-dw-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-dw-card-title,
.maw-shell .maw-dw-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Count pill in the header (e.g. "2 open") */
.maw-shell .maw-dw-card-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-mut);
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  border-radius: 6px;
  padding: 1px 7px;
  flex: none;
}

/* ---- Card body (both conventions) -- THIS is the scroll region ---- */
.maw-shell .maw-dw-card-body,
.maw-shell .maw-dw-body {
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Optional caption line under the body (convention #2 widgets) */
.maw-shell .maw-dw-caption {
  flex: none;
  padding: 6px 12px 10px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-dim);
  border-top: 1px dotted var(--line);
}

/* ============================================================
   State classes -- muted/centered for all three states.
   Error uses clay/orange (red token available if needed).
   ============================================================ */
.maw-shell .maw-dw-loading,
.maw-shell .maw-dw-empty,
.maw-shell .maw-dw-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
  flex: 1;
  min-height: 0;
}

.maw-shell .maw-dw-empty {
  color: var(--ink-mut);
}

.maw-shell .maw-dw-error {
  color: var(--orange-strong);
}

.maw-shell .maw-dw-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
}

.maw-shell .maw-dw-retry:hover {
  background: var(--indigo-soft);
}

/* Inline spinner (My Tasks loading, etc.) */
.maw-shell .maw-dw-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-dw-spin .7s linear infinite;
}

@keyframes maw-dw-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Simulations Status widget (sim-status)
   ============================================================ */
.maw-shell .maw-dw-sim-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
}

.maw-shell .maw-dw-sim-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  flex: 1;
  min-width: 0;
}

.maw-shell .maw-dw-sim-chip-count {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.maw-shell .maw-dw-sim-chip-label {
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Mini sim table -- wrapper scrolls if many rows (sticky header inside body) */
.maw-shell .maw-dw-sim-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.maw-shell .maw-dw-sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.maw-shell .maw-dw-sim-th {
  text-align: left;
  padding: 4px 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 1;
}

.maw-shell .maw-dw-sim-row td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.maw-shell .maw-dw-sim-row:last-child td {
  border-bottom: none;
}

.maw-shell .maw-dw-sim-row:hover td {
  background: var(--panel-hover);
}

.maw-shell .maw-dw-sim-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.maw-shell .maw-dw-sim-status-cell {
  white-space: nowrap;
}

/* Status badge -- colored by status modifier the JS adds inline or via class */
.maw-shell .maw-dw-sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
  white-space: nowrap;
}

.maw-shell .maw-dw-sim-badge.ok,
.maw-shell .maw-dw-sim-badge.complete {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(63,125,79,.2);
}

.maw-shell .maw-dw-sim-badge.run,
.maw-shell .maw-dw-sim-badge.running {
  background: var(--orange-soft);
  color: var(--orange-strong);
  border-color: var(--orange-bd);
}

.maw-shell .maw-dw-sim-badge.queued {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-dw-sim-badge.failed,
.maw-shell .maw-dw-sim-badge.error {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

.maw-shell .maw-dw-sim-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Footer link ("View all in Home") */
.maw-shell .maw-dw-sim-footer {
  flex: none;
  font-size: 11.5px;
  color: var(--indigo);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  padding-top: 2px;
}

.maw-shell .maw-dw-sim-footer:hover {
  color: var(--indigo-2);
}

.maw-shell .maw-dw-sim-footer svg {
  width: 11px;
  height: 11px;
}

/* "View tasks" footer link in My Tasks widget */
.maw-shell .maw-dw-task-view-all {
  flex: none;
  font-size: 11.5px;
  color: var(--indigo);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  padding-top: 2px;
}

.maw-shell .maw-dw-task-view-all:hover {
  color: var(--indigo-2);
}

/* ============================================================
   Tracked System Models widget (tracked-sm)
   ============================================================ */
.maw-shell .maw-dw-sm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .maw-dw-sm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  transition: .13s;
  flex: none;
}

.maw-shell .maw-dw-sm-row:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
}

.maw-shell .maw-dw-sm-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  /* No flex:1 here -- the parent .maw-dw-sm-info owns the stretch */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Schema-version badge */
.maw-shell .maw-dw-sm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  white-space: nowrap;
  flex: none;
}

.maw-shell .maw-dw-sm-badge--v2 {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-dw-sm-badge--v1 {
  background: var(--panel-soft);
  color: var(--ink-dim);
  border-color: var(--line-hi);
}

/* assembly_count + simulation_count row */
.maw-shell .maw-dw-sm-counts {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
  width: 100%;
}

.maw-shell .maw-dw-sm-count {
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-shell .maw-dw-sm-count b {
  color: var(--ink-mut);
  font-weight: 600;
  font-family: var(--font-mono);
}

/* ============================================================
   My Tasks widget (my-tasks)
   ============================================================ */
.maw-shell .maw-dw-task-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  transition: .13s;
  flex: none;
}

.maw-shell .maw-dw-task-row:hover {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
}

.maw-shell .maw-dw-task-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.maw-shell .maw-dw-task-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.maw-shell .maw-dw-task-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .maw-dw-objective {
  font-size: 11px;
  color: var(--ink-mut);
  line-height: 1.35;
}

.maw-shell .maw-dw-due {
  font-size: 10.5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
  flex: none;
}

.maw-shell .maw-dw-due--soon {
  color: var(--orange);
  font-weight: 600;
}

/* "+N more" affordance */
.maw-shell .maw-dw-task-more {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--indigo);
  cursor: pointer;
  padding-top: 2px;
}

.maw-shell .maw-dw-task-more:hover {
  color: var(--indigo-2);
}

/* ratio_completed progress bar -- base (overridden per-view in widget Tasks section below) */
.maw-shell .maw-dw-progress-bar {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}

/* JS emits an inner <span> for the fill strip */
.maw-shell .maw-dw-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--green);
  transition: width .3s;
}

.maw-shell .maw-dw-progress-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mut);
  white-space: nowrap;
  flex: none;
}

/* ============================================================
   Ontology Snapshot widget (ontology)
   ============================================================ */
.maw-shell .maw-dw-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  flex: none;
}

.maw-shell .maw-dw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.maw-shell .maw-dw-stat-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.maw-shell .maw-dw-stat-lbl {
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Per-type count breakdown list */
.maw-shell .maw-dw-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.maw-shell .maw-dw-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  flex: none;
}

.maw-shell .maw-dw-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.maw-shell .maw-dw-type-lbl {
  flex: 1;
  min-width: 0;
  color: var(--ink-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-dw-type-cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  flex: none;
}

/* "Open Graph" link/button */
.maw-shell .maw-dw-open-graph {
  flex: none;
  align-self: center;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  transition: .15s;
  font-weight: 500;
}

.maw-shell .maw-dw-open-graph:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* Neutralize global svg max-width reset for any inline ontology sketch */
.maw-shell .maw-dw-card-body svg,
.maw-shell .maw-dw-body svg {
  max-width: none;
}

/* ============================================================
   Upcoming Deadlines widget (deadlines)
   ============================================================ */
.maw-shell .maw-dw-deadlines-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.maw-shell .maw-dw-deadlines-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .maw-dw-deadlines-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  cursor: pointer;
  transition: .13s;
  flex: none;
}

.maw-shell .maw-dw-deadlines-row:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover);
}

.maw-shell .maw-dw-deadlines-info {
  flex: 1;
  min-width: 0;
}

.maw-shell .maw-dw-deadlines-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-dw-deadlines-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 1px;
}

/* days-until badge */
.maw-shell .maw-dw-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
}

.maw-shell .maw-dw-badge-overdue {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

.maw-shell .maw-dw-badge-soon {
  background: var(--orange-soft);
  color: var(--orange-strong);
  border-color: var(--orange-bd);
}

.maw-shell .maw-dw-badge-later {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(63,125,79,.2);
}

/* ============================================================
   Widget card header icon + menu (whead atoms, used across all 8 widgets)
   The mockup shows a small colored rounded square left of the title.
   ============================================================ */
.maw-shell .maw-dw-whead-ic {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex: none;
}
.maw-shell .maw-dw-whead-ic svg {
  width: 11px;
  height: 11px;
}

/* Background variants (one per widget icon type) */
.maw-shell .maw-dw-whead-ic--blue    { background: var(--blue-soft); }
.maw-shell .maw-dw-whead-ic--indigo  { background: var(--indigo-soft); }
.maw-shell .maw-dw-whead-ic--task    { background: rgba(180,83,9,.12); }
.maw-shell .maw-dw-whead-ic--green   { background: var(--green-soft); }
.maw-shell .maw-dw-whead-ic--agent   { background: rgba(124,58,237,.1); }
.maw-shell .maw-dw-whead-ic--neutral { background: var(--panel-soft); }

/* 3-dot menu (right-aligned, appears on hover) */
.maw-shell .maw-dw-whead-menu {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  transition: .13s;
  flex: none;
  margin-left: auto;
}
.maw-shell .maw-dw-whead-menu:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

/* ============================================================
   Simulations widget: status dot in chip (W1)
   ============================================================ */
.maw-shell .maw-dw-sim-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

/* ID cell in mini sim table */
.maw-shell .maw-dw-sim-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Sim badge: failed/error uses red token (defined in tokens.css) */
.maw-shell .maw-dw-sim-badge.failed,
.maw-shell .maw-dw-sim-badge.error {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

/* ============================================================
   Tracked System Models widget: dot + info column layout (W2)
   ============================================================ */
.maw-shell .maw-dw-sm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 3px;
  flex: none;
}

.maw-shell .maw-dw-sm-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.maw-shell .maw-dw-sm-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.maw-shell .maw-dw-sm-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* SM row layout: flex row; name left, dot left, badge right */
.maw-shell .maw-dw-sm-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* ============================================================
   My Tasks widget: task dot + progress bar fix (W3)
   ============================================================ */
.maw-shell .maw-dw-task-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t-task);
  flex: none;
  margin-top: 4px;
}

/* progress-wrap becomes a flex row (label right of bar) */
.maw-shell .maw-dw-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}

/* ============================================================
   Ontology Snapshot widget: divider + footer (W6)
   ============================================================ */
.maw-shell .maw-dw-stat-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  flex: none;
}

/* Ontology card body: column direction with no extra gap (type-list fills space) */
.maw-shell .maw-dw-onto-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

/* Ontology footer: Open Graph button row, centered */
.maw-shell .maw-dw-onto-footer {
  padding: 8px 12px 12px;
  display: flex;
  justify-content: center;
  flex: none;
  border-top: 1px dotted var(--line);
}

/* ============================================================
   Upcoming Deadlines widget: date column + bar strip (W8)
   ============================================================ */
.maw-shell .maw-dw-deadlines-date-col {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  min-width: 52px;
  flex: none;
}
.maw-shell .maw-dw-deadlines-date-col--near {
  color: var(--orange);
  font-weight: 700;
}

/* Colored left-bar strip (3px, 28px tall) */
.maw-shell .maw-dw-deadlines-bar {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  flex: none;
}

/* sub line under deadline name */
.maw-shell .maw-dw-deadlines-sub {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 1px;
}

/* ============================================================
   Placeholder widgets (my-agents / kpi / activity)
   Honest "coming soon" cards -- header from card chrome above.
   ============================================================ */
.maw-shell .maw-dw-placeholder-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
  padding: 24px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.maw-shell .maw-dw-placeholder-icon {
  font-size: 22px;
  color: var(--line-hi);
  display: block;
}

.maw-shell .maw-dw-placeholder-sub {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* ==========================================================================
   Launch revamp (2026-09-08): configurable widget grid -- header bar,
   Customize tray (vertical reorder list + hidden-widget chips), per-slot
   edit overlay (width cycle + hide). Appended so nothing above re-cascades.
   ========================================================================== */
.maw-shell .dw-header {
    display: flex;
    align-items: center;
    padding: 10px 14px 0;
}
.maw-shell .dw-header-spacer { flex: 1 1 auto; }
.maw-shell .dw-customize-btn {
    border: 1px solid var(--line);
    background: var(--panel, #fff);
    border-radius: 7px;
    font-size: 11.5px;
    padding: 4px 12px;
    cursor: pointer;
    color: inherit;
}
.maw-shell .dw-customize-btn:hover { border-color: var(--accent, #2f6fed); color: var(--accent, #2f6fed); }
.maw-shell .dw-customize-btn.dw-customize-on {
    background: var(--accent, #2f6fed);
    border-color: var(--accent, #2f6fed);
    color: #fff;
}

.maw-shell .dw-tray {
    display: flex;
    gap: 18px;
    margin: 10px 14px 0;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
}
.maw-shell .dw-tray-col { flex: 1 1 50%; min-width: 0; }
.maw-shell .dw-tray-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim, #7a7a7a);
    margin-bottom: 7px;
}
.maw-shell .dw-tray-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel, #fff);
    padding: 5px 9px;
    margin-bottom: 5px;
    font-size: 12px;
}
.maw-shell .dw-tray-grip { cursor: grab; color: var(--ink-dim, #9a9a9a); user-select: none; }
.maw-shell .dw-tray-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .dw-tray-size {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-dim, #7a7a7a);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
}
.maw-shell .dw-tray-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.maw-shell .dw-tray-add-chip {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel, #fff);
    font-size: 11.5px;
    padding: 4px 10px;
    cursor: pointer;
    color: inherit;
}
.maw-shell .dw-tray-add-chip:hover { border-color: var(--accent, #2f6fed); color: var(--accent, #2f6fed); }
.maw-shell .dw-tray-none { font-size: 11.5px; color: var(--ink-dim, #7a7a7a); }
.maw-shell .dw-tray-reset {
    margin-top: 10px;
    border: none;
    background: none;
    font-size: 11px;
    color: var(--ink-dim, #7a7a7a);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.maw-shell .dw-slot { position: relative; }
.maw-shell .dw-editing .dw-slot > .maw-dw { opacity: .8; }
.maw-shell .dw-slot-tools {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 3;
}
.maw-shell .dw-slot-tools button {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel, #fff);
    font-size: 10.5px;
    font-weight: 700;
    min-width: 24px;
    padding: 2px 6px;
    cursor: pointer;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.maw-shell .dw-slot-tools button:hover { border-color: var(--accent, #2f6fed); color: var(--accent, #2f6fed); }
.maw-shell .dw-empty-note {
    grid-column: span 12;
    padding: 28px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-dim, #7a7a7a);
}

/* --- Recent Activity widget --- */
.maw-shell .maw-dw-act-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.maw-shell .maw-dw-act-row:last-child { border-bottom: none; }
.maw-shell .maw-dw-act-avatar {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink-dim, #7a7a7a);
}
.maw-shell .maw-dw-act-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.maw-shell .maw-dw-act-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-dw-act-meta { font-size: 10.5px; color: var(--ink-dim, #7a7a7a); }
.maw-shell .maw-dw-act-time { flex: none; font-size: 10.5px; color: var(--ink-dim, #7a7a7a); }

/* --- My Agents widget --- */
.maw-shell .maw-dw-agent-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.maw-shell .maw-dw-agent-row:last-child { border-bottom: none; }
.maw-shell .maw-dw-agent-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-dw-agent-kind {
    font-size: 10px;
    color: var(--ink-dim, #7a7a7a);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
}
.maw-shell .maw-dw-agent-kind--custom { color: var(--accent, #2f6fed); border-color: var(--accent, #2f6fed); }

/* --- KPI Tracker widget --- */
.maw-shell .maw-dw-kpi-lc { padding: 7px 0; border-bottom: 1px solid var(--line); }
.maw-shell .maw-dw-kpi-lc:last-of-type { border-bottom: none; }
.maw-shell .maw-dw-kpi-lc-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.maw-shell .maw-dw-kpi-lc-name { flex: 1 1 auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-dw-kpi-compute { font-size: 11px; }
.maw-shell .maw-dw-kpi-busy { font-size: 11px; color: var(--ink-dim, #7a7a7a); font-style: italic; }
.maw-shell .maw-dw-kpi-meta { font-size: 10.5px; color: var(--ink-dim, #7a7a7a); margin: 2px 0 4px; }
.maw-shell .maw-dw-kpi-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.maw-shell .maw-dw-kpi-rank {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-dim, #7a7a7a);
}
.maw-shell .maw-dw-kpi-sim { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-dw-kpi-score { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   ROOT
   ============================================================ */
.maw-shell .maw-calendar-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.maw-shell .cal-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}

/* ---- Left: nav group ---- */
.maw-shell .cal-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.maw-shell .cal-month-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  min-width: 110px;
  text-align: center;
}

/* Prev / Next arrow buttons + Today button share .cal-nav-btn */
.maw-shell .cal-nav-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .12s;
  line-height: 1;
}
.maw-shell .cal-nav-btn:hover {
  background: var(--panel-hover);
  color: var(--ink);
  border-color: var(--line-hi);
}

/* "Today" gets a slightly different label style, but inherits .cal-nav-btn */
.maw-shell .cal-today-btn {
  font-size: 12px;
  margin-left: 4px;
  padding: 0 11px;
}

/* ---- Center: view-mode toggle (segmented) ---- */
.maw-shell .cal-toolbar-modes {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-soft);
  flex: none;
}

.maw-shell .cal-mode-btn {
  height: 28px;
  padding: 0 11px;
  border: none;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: .12s;
}
.maw-shell .cal-mode-btn:last-child { border-right: none; }
.maw-shell .cal-mode-btn:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .cal-mode-btn.active {
  background: var(--panel);
  color: var(--navy);
  font-weight: 700;
}

/* ---- Right: type-filter chips ---- */
.maw-shell .cal-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
}

.maw-shell .cal-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mut);
  cursor: pointer;
  transition: .12s;
  user-select: none;
}
.maw-shell .cal-type-chip .cal-fchip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.maw-shell .cal-type-chip:hover { border-color: var(--line-hi); color: var(--ink); }
.maw-shell .cal-type-chip.active {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line-hi);
  font-weight: 600;
}
/* ============================================================
   BODY: grid + right panel
   ============================================================ */
.maw-shell .cal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Main calendar area (MonthGridView slot) */
.maw-shell .cal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

/* Right panel (UpcomingPanelView slot) */
.maw-shell .cal-right {
  width: 302px;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
}

/* ============================================================
   MONTH GRID -- class names match MonthGridView JS output
   ============================================================ */

/* Weekday header row (.cal-weekdays / .cal-weekday-hdr) */
.maw-shell .cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .cal-weekday-hdr {
  padding: 6px 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Grid body (.cal-grid) */
.maw-shell .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  overflow: auto;
  min-height: 0;
  align-content: start;
}

/* Day cell (.cal-cell) */
.maw-shell .cal-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 90px;
  padding: 5px 5px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background: var(--panel);
  transition: background .1s;
}
.maw-shell .cal-cell:nth-child(7n) { border-right: none; }
.maw-shell .cal-cell:hover { background: var(--panel-hover); }

/* Other-month padding cells (dimmed) */
.maw-shell .cal-cell.cal-cell--other-month {
  background: var(--bg);
  opacity: .65;
}

/* Today cell: indigo top bar + soft indigo background */
.maw-shell .cal-cell.cal-cell--today {
  background: rgba(79, 70, 229, .04);
}
.maw-shell .cal-cell.cal-cell--today::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--indigo);
  border-radius: 0 0 2px 2px;
}

/* Day number (.cal-cell-num) */
.maw-shell .cal-cell-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
  line-height: 1;
  margin-bottom: 1px;
  /* default: plain number. Today wraps in a circle (see below). */
}

/* Today: the .cal-cell-num itself becomes the indigo circle via a wrapper span.
   The JS doesn't add a span, so we use the parent state to style the num directly. */
.maw-shell .cal-cell.cal-cell--today .cal-cell-num {
  color: var(--indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--indigo);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

/* Event chips container */
.maw-shell .cal-cell-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---- Event chip (.cal-chip) ---- */
.maw-shell .cal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .12s;
}
.maw-shell .cal-chip:hover { opacity: .8; }

/* Deadline chip: clay / terracotta (matches mockup) */
.maw-shell .cal-chip.cal-chip--deadline {
  background: var(--orange-soft);
  border: 1px solid var(--orange-bd);
  color: var(--orange-strong);
  font-weight: 700;
}

/* Before-text: deadline star glyph (JS renders a star character via data attr -- no pseudo needed;
   keep this rule for if JS adds a .cal-chip-star span in future) */
.maw-shell .cal-chip-star {
  font-size: 9px;
  flex: none;
}

/* Selected state */
.maw-shell .cal-chip.cal-chip--selected {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

/* Overflow indicator (+N more) */
.maw-shell .cal-cell-overflow {
  font-size: 9.5px;
  color: var(--ink-dim);
  padding-left: 2px;
  cursor: default;
  flex: none;
}

/* ---- Loading / error state ---- */
.maw-shell .cal-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--ink-dim);
  font-size: 13px;
  flex: 1;
}
.maw-shell .cal-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--orange-strong);
  font-size: 13px;
  flex: 1;
}
.maw-shell .cal-retry-btn {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.maw-shell .cal-retry-btn:hover { background: var(--indigo-soft); }

/* ============================================================
   PANEL VIEW ROOTS (el class names emitted by JS)
   ============================================================ */
.maw-shell .cal-month-grid-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.maw-shell .cal-upcoming-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   LEGEND STRIP (below the month grid, above nothing)
   ============================================================ */
.maw-shell .cal-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 14px;
  border-top: 1px solid var(--line);
  flex: none;
  flex-wrap: wrap;
  background: var(--panel);
}
.maw-shell .cal-legend-label {
  font-size: 10px;
  color: var(--ink-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-right: 4px;
}
.maw-shell .cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--ink-dim);
}
.maw-shell .cal-legend-swatch {
  width: 10px;
  height: 6px;
  border-radius: 3px;
  flex: none;
}

/* ============================================================
   POPOVER (chip click popover)
   ============================================================ */
.maw-shell .cal-popover {
  position: absolute;
  z-index: 200;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
}
.maw-shell .cal-popover-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .cal-popover-type-bar {
  width: 3px;
  min-height: 32px;
  border-radius: 3px;
  flex: none;
  margin-top: 2px;
  background: var(--orange);
}
.maw-shell .cal-popover-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  flex: 1;
}
.maw-shell .cal-popover-close {
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex: none;
}
.maw-shell .cal-popover-close:hover { color: var(--ink); }
.maw-shell .cal-popover-meta {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.maw-shell .cal-popover-row {
  font-size: 11.5px;
  color: var(--ink-mut);
}
.maw-shell .cal-popover-status {
  font-size: 11.5px;
  color: var(--ink-mut);
  font-weight: 500;
  padding: 0 12px 8px;
}
/* Popover action row -- "View task" navigation button */
.maw-shell .cal-popover-actions {
  padding: 6px 12px 10px;
  border-top: 1px solid var(--line);
}
.maw-shell .cal-popover-view-btn {
  background: none;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background .12s, color .12s;
}
.maw-shell .cal-popover-view-btn:hover {
  background: var(--accent-soft, rgba(30,90,220,.08));
  border-color: var(--accent);
}

/* ============================================================
   RIGHT PANEL: UPCOMING
   class names emitted by UpcomingPanelView HTML builders
   ============================================================ */

/* Panel header */
.maw-shell .cal-up-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .cal-up-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}
/* "View all" button in panel header */
.maw-shell .cal-up-view-all-btn {
  background: none;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-dim);
  cursor: pointer;
  flex: none;
  margin-left: auto;
  transition: color .12s, border-color .12s;
}
.maw-shell .cal-up-view-all-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Upcoming rows are clickable */
.maw-shell .cal-up-row {
  cursor: pointer;
}

/* Section labels within the scroll area */
.maw-shell .cal-up-section-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  color: var(--ink-dim);
  padding: 11px 14px 6px;
  border-bottom: 1px dotted var(--line);
}

/* Scrollable list */
.maw-shell .cal-up-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Upcoming item row */
.maw-shell .cal-up-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: .12s;
}
.maw-shell .cal-up-row:last-child { border-bottom: none; }
.maw-shell .cal-up-row:hover { background: var(--panel-hover); }

/* Color dot */
.maw-shell .cal-up-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
  margin-top: 4px;
}

/* Info block */
.maw-shell .cal-up-info { flex: 1; min-width: 0; }
.maw-shell .cal-up-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .cal-up-name.cal-up-name--deadline { color: var(--orange-strong); }
.maw-shell .cal-up-sub {
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-top: 1px;
}

/* Date badge */
.maw-shell .cal-up-due {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
  flex: none;
  margin-top: 2px;
}
.maw-shell .cal-up-due.cal-up-due--near { color: var(--orange); font-weight: 700; }
.maw-shell .cal-up-due.cal-up-due--overdue { color: var(--orange-strong); font-weight: 700; }
.maw-shell .cal-up-due.cal-up-due--today { color: var(--t-task); font-weight: 700; }

/* Empty / loading / error states */
.maw-shell .cal-up-empty,
.maw-shell .cal-up-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  font-style: italic;
}
.maw-shell .cal-up-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--orange-strong);
  font-size: 12.5px;
}

/* ============================================================
   SHARED d3ViewCalendar SKIN
   The plugin remains source-untouched; all adaptation is scoped here.
   ============================================================ */
.maw-shell .cal-month-grid-wrap,
.maw-shell .cal-plugin-mount,
.maw-shell .cal-plugin-surface,
.maw-shell .cal-plugin-surface > .calendar-view {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.maw-shell .cal-month-grid-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.maw-shell .cal-plugin-mount {
  display: flex;
  flex-direction: column;
}

.maw-shell .cal-plugin-surface {
  flex: 1;
  height: auto;
  overflow: hidden;
}

.maw-shell .cal-plugin-surface > .calendar-view {
  aspect-ratio: auto !important;
  display: block;
  background: var(--panel);
}

/* Outer maw toolbar is canonical; suppress the plugin's duplicate toolbar. */
.maw-shell .cal-plugin-surface .calendar-nav {
  display: none !important;
}

.maw-shell .cal-plugin-surface .calendar-body,
.maw-shell .cal-plugin-surface .month-container,
.maw-shell .cal-plugin-surface .weekly-container {
  height: 100%;
  min-height: 0;
  background: var(--panel);
}

.maw-shell .cal-plugin-surface ul.calendar-week-header {
  border-color: var(--line);
  background: var(--panel-soft);
}

.maw-shell .cal-plugin-surface ul.calendar-week-header > li {
  padding: 7px 8px;
  border-color: var(--line);
  color: var(--ink-dim) !important;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .45px;
}

.maw-shell .cal-plugin-surface .week-row {
  min-height: 104px;
  border-color: var(--line);
}

.maw-shell .cal-plugin-surface .week-row > .weekday {
  border-color: var(--line) !important;
  background: var(--panel);
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

.maw-shell .cal-plugin-surface .week-row > .weekday:hover {
  background: var(--panel-hover);
}

.maw-shell .cal-plugin-surface .week-row > .weekday:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.maw-shell .cal-plugin-surface .week-row > .weekday.maw-cal-day-selected {
  background: rgba(51, 122, 183, .12);
  box-shadow: inset 0 0 0 2px #337ab7;
}

/* The shared calendar marks today on the date badge; carry that state to the full cell. */
.maw-shell .cal-plugin-surface .week-row > .weekday:has(> .date-label .label-primary) {
  background: #337ab7;
}

.maw-shell .cal-plugin-surface .week-row > .weekday.maw-cal-day-selected:has(> .date-label .label-primary) {
  background: #337ab7;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
}

.maw-shell .cal-plugin-surface .week-row > .weekday:has(> .date-label .label-primary):hover {
  background: #2d6da3;
}

.maw-shell .cal-plugin-surface .week-row > .weekday:has(> .date-label .label-primary) > .date-label .label-primary {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  color: #fff !important;
}

.maw-shell .cal-plugin-surface .date-label,
.maw-shell .cal-plugin-surface .date-label > span {
  color: var(--ink-dim) !important;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
}

.maw-shell .cal-plugin-surface .event-label.maw-cal-event {
  min-height: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--ink);
  font-family: inherit;
  font-size: 9.5px;
  line-height: 1.1;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
}

.maw-shell .cal-plugin-surface .maw-cal-event-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 4px;
  background: rgba(100, 116, 139, .12);
  font-size: 8px;
}

.maw-shell .cal-plugin-surface .maw-cal-event-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.maw-shell .cal-plugin-surface .maw-cal-event-title,
.maw-shell .cal-plugin-surface .maw-cal-event-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .cal-plugin-surface .maw-cal-event-title {
  font-size: 9px;
  font-weight: 700;
}

.maw-shell .cal-plugin-surface .maw-cal-event-meta {
  font-size: 7.5px;
  font-weight: 500;
  opacity: .78;
}

.maw-shell .cal-plugin-surface .show-more-events {
  pointer-events: none;
}

.maw-shell .cal-plugin-surface .maw-cal-event--deadline {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .cal-plugin-surface .maw-cal-event--deadline .maw-cal-event-icon {
  background: rgba(234, 88, 12, .13);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-started {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-started .maw-cal-event-icon {
  background: rgba(79, 70, 229, .13);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-completed {
  border-color: rgba(37, 99, 235, .22);
  background: rgba(37, 99, 235, .08);
  color: var(--blue);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-completed .maw-cal-event-icon {
  background: rgba(37, 99, 235, .13);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-status {
  border-color: var(--line-hi);
  background: var(--panel-hover);
  color: var(--ink-mut);
}
.maw-shell .cal-plugin-surface .maw-cal-event--task-status .maw-cal-event-icon {
  background: rgba(100, 116, 139, .14);
}
.maw-shell .cal-plugin-surface .maw-cal-event--activity,
.maw-shell .cal-plugin-surface .maw-cal-event--activity-density {
  border-color: rgba(79, 70, 229, .22);
  background: rgba(79, 70, 229, .08);
  color: var(--t-agent);
}
.maw-shell .cal-plugin-surface .maw-cal-event--activity .maw-cal-event-icon,
.maw-shell .cal-plugin-surface .maw-cal-event--activity-density .maw-cal-event-icon {
  background: rgba(79, 70, 229, .13);
}

.maw-shell .cal-source-warning {
  flex: none;
  padding: 5px 10px;
  border-bottom: 1px solid var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 10.5px;
}

.maw-shell .cal-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-dim);
  font-size: 12px;
  font-style: italic;
}

.maw-shell .cal-refresh-state {
  color: var(--ink-dim);
  font-size: 10px;
  white-space: nowrap;
}
.maw-shell .cal-refresh-state.active { color: var(--indigo); }

.maw-shell .cal-day-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.maw-shell .cal-day-back-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.maw-shell .cal-day-items {
  display: flex;
  flex-direction: column;
}

.maw-shell .cal-day-event-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.maw-shell .cal-day-event-row--link {
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}

.maw-shell .cal-day-event-row--link:hover {
  background: var(--blue-soft);
}

.maw-shell .cal-day-event-row--link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.maw-shell .cal-day-event-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 10px;
}

.maw-shell .cal-day-event-row--task .cal-day-event-icon {
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.maw-shell .cal-day-event-info { min-width: 0; flex: 1; }
.maw-shell .cal-day-event-name {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.maw-shell .cal-day-event-meta {
  margin-top: 2px;
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.maw-shell .cal-day-event-action {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--ink-mut);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
}

.maw-shell .cal-day-event-action--create {
  background: var(--green-soft);
  color: var(--green);
}

.maw-shell .cal-day-event-action--edit {
  background: var(--blue-soft);
  color: var(--blue);
}

.maw-shell .cal-day-event-action--delete {
  background: var(--red-soft);
  color: var(--red);
}

.maw-shell .cal-day-event-open {
  align-self: center;
  flex: none;
  color: var(--ink-dim);
  font-size: 9px;
}

.maw-shell .cal-day-event-row--link:hover .cal-day-event-open {
  color: var(--blue);
}

.maw-shell .cal-unscheduled-label {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.maw-shell .cal-up-row--unscheduled .cal-up-dot { background: var(--ink-dim); }
.maw-shell .cal-up-row--unscheduled .cal-up-due { color: var(--ink-dim); }

/* ======================================================================== *
 * Phase 40 polish -- skeleton loading + event interactivity
 * ======================================================================== */

/* Skeleton month grid (MonthGridView.showLoading) */
.maw-shell .cal-skel-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
  padding: 10px 12px;
  gap: 8px;
}
.maw-shell .cal-skel-head {
  height: 22px;
  border-radius: 6px;
  background: var(--line-hi);
  opacity: 0.6;
}
.maw-shell .cal-skel-cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(48px, 1fr);
  gap: 4px;
}
.maw-shell .cal-skel-cell {
  position: relative;
  border-radius: 6px;
  background: var(--line-hi);
  opacity: 0.4;
  overflow: hidden;
}
.maw-shell .cal-skel-row {
  position: relative;
  height: 42px;
  border-radius: 6px;
  background: var(--line-hi);
  opacity: 0.5;
  overflow: hidden;
  margin-bottom: 8px;
}
.maw-shell .cal-skel-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%);
  animation: calSkelSweep 1.2s ease-in-out infinite;
}
@keyframes calSkelSweep { to { transform: translateX(100%); } }

/* Event chips: hover lift + pointer so the grid reads as interactive */
.maw-shell .cal-plugin-surface .event-label.maw-cal-event {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.maw-shell .cal-plugin-surface .event-label.maw-cal-event:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* Day cells: hover tint (they are click targets for the day panel) */
.maw-shell .cal-plugin-surface .week-row > .weekday[data-date-key] {
  cursor: pointer;
  transition: background 0.15s ease;
}
.maw-shell .cal-plugin-surface .week-row > .weekday[data-date-key]:hover {
  background: var(--panel-soft);
}

/* Refresh pill: pulse while active so background refreshes are visible */
.maw-shell .cal-refresh-state.active { animation: calRefreshPulse 1.1s ease-in-out infinite; }
@keyframes calRefreshPulse { 50% { opacity: 0.45; } }

.maw-shell .maw-studio-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
  color: var(--ink);
}

.maw-shell .studio-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.maw-shell .studio-hero {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 46px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(22, 35, 61, .05), rgba(47, 95, 196, .03) 56%, rgba(194, 86, 47, .06)),
    var(--panel);
}

.maw-shell .studio-kicker,
.maw-shell .studio-card-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Slim toolbar hero (2026-07-19, Rahul): the hero is one regular-height row
   like the other views’ toolbars — kicker › tab title inline, subtitle hidden
   (the JS keeps writing it on tab switch; nothing renders it). */
/* The hero NEVER wraps or truncates: when the title and tools do not fit, this
   row scrolls horizontally. The tools are pushed right with margin-left:auto
   rather than justify-content:space-between -- on an OVERFLOWING flex scroller,
   space-between/flex-end can shove the leading content into negative scroll
   space that no scrollbar can reach, whereas an auto margin consumes free space
   when it exists and collapses to zero when it does not. */
.maw-shell .studio-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hi) transparent;
}
.maw-shell .studio-hero-row::-webkit-scrollbar { height: 6px; }
.maw-shell .studio-hero-row::-webkit-scrollbar-track { background: transparent; }
.maw-shell .studio-hero-row::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 999px; }
.maw-shell .studio-hero-row::-webkit-scrollbar-thumb:hover { background: var(--ink-dim); }

.maw-shell .studio-hero-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.maw-shell .studio-hero-sep {
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1;
}

.maw-shell .studio-title {
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.maw-shell .studio-subtitle { display: none; }

.maw-shell .studio-hero-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .studio-mode-tabs {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  background: rgba(251, 248, 242, .82);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.maw-shell .studio-mode,
.maw-shell .studio-refresh,
.maw-shell .studio-generate,
.maw-shell .studio-train-model,
.maw-shell .studio-submit-candidate {
  border: 0;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}

.maw-shell .studio-train-model,
.maw-shell .studio-submit-candidate {
  width: 100%;
  height: 32px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.maw-shell .studio-mode.is-active {
  background: var(--navy);
  color: #fff;
}

.maw-shell .studio-refresh {
  width: 30px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: color .2s, border-color .2s, background .2s;
}
.maw-shell .studio-refresh.is-spinning { cursor: default; }
.maw-shell .studio-refresh.is-spinning .fa { animation: mawstudio-rcspin .7s linear infinite; color: var(--indigo, #5560b8); }
.maw-shell .studio-refresh[disabled] { opacity: .8; cursor: default; }
.maw-shell .studio-refresh.is-done { color: #2e8f5e; border-color: #2e8f5e; background: rgba(46,143,94,.08); }
.maw-shell .studio-refresh.is-done .fa { color: #2e8f5e; }

/* Stale-while-revalidate note: shown while cached numbers are on screen and
   the live scorer/dataset fetches are still running. */
.maw-shell .studio-fresh-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mut, #6b6559);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.maw-shell .studio-fresh-note.is-hidden { display: none; }

/* ---- Live load strip -------------------------------------------------------
   One chip per in-flight fetch of load(), with a ticking elapsed time. The bar
   is deliberately INDETERMINATE: the scorer is a single synchronous request, so
   the client cannot know a real percentage, and a bar that animates toward a
   guessed finish would be a lie the moment a large loadcase runs long. */
.maw-shell .studio-load-strip {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 7px 0 2px;
}
.maw-shell .studio-load-strip.is-hidden { display: none; }

.maw-shell .studio-load-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.maw-shell .studio-load-bar i {
  display: block;
  height: 100%;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
  animation: studio-load-sweep 1.4s ease-in-out infinite;
}
.maw-shell .studio-load-strip.is-done .studio-load-bar,
.maw-shell .studio-load-strip.is-failed .studio-load-bar { background: transparent; }
.maw-shell .studio-load-strip.is-done .studio-load-bar i,
.maw-shell .studio-load-strip.is-failed .studio-load-bar i { animation: none; background: transparent; }

@keyframes studio-load-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@keyframes studio-load-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .28; }
}

.maw-shell .studio-load-tasks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
}
.maw-shell .studio-load-task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mut);
  white-space: nowrap;
}
.maw-shell .studio-load-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-hi);
}
.maw-shell .studio-load-task.is-run .studio-load-dot {
  background: var(--indigo);
  animation: studio-load-pulse 1.1s ease-in-out infinite;
}
.maw-shell .studio-load-task.is-ok   .studio-load-dot { background: var(--green); }
.maw-shell .studio-load-task.is-fail .studio-load-dot { background: var(--orange-strong); }
.maw-shell .studio-load-task.is-ok   { opacity: .68; }
.maw-shell .studio-load-task.is-fail { color: var(--orange-strong); border-color: var(--orange-strong); }
.maw-shell .studio-load-task .studio-load-note { font-style: normal; font-weight: 500; opacity: .78; }
.maw-shell .studio-load-task b { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .8; }

.maw-shell .studio-load-hint {
  flex: 1 1 100%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-mut);
  opacity: .9;
}
.maw-shell .studio-load-hint.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .maw-shell .studio-load-bar i { animation: none; width: 100%; opacity: .5; }
  .maw-shell .studio-load-task.is-run .studio-load-dot { animation: none; }
}

.maw-shell .studio-workbench {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.maw-shell .studio-lens {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
}

.maw-shell .studio-lens-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.maw-shell .studio-lens-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .studio-lens-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .studio-field {
  display: block;
  margin-bottom: 12px;
}

.maw-shell .studio-field span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mut);
}

.maw-shell .studio-field select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  padding: 0 8px;
}

.maw-shell .studio-status-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.maw-shell .studio-status-strip > div {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(251, 248, 242, .72);
}

.maw-shell .studio-status-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .studio-data-mode,
.maw-shell .studio-coverage,
.maw-shell .studio-model-count {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
}

.maw-shell .studio-warning-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.maw-shell .studio-warning,
.maw-shell .studio-ok {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
}

.maw-shell .studio-warning {
  border: 1px solid var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.maw-shell .studio-ok {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
}

.maw-shell .studio-main {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.maw-shell .studio-pane {
  display: none;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.maw-shell .studio-pane.is-active {
  display: block;
}

.maw-shell .studio-grid {
  display: grid;
  gap: 12px;
}

.maw-shell .studio-grid-top {
  /* leaderboard + heat map: exactly half the available width each */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maw-shell .studio-grid-bottom {
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
  margin-top: 12px;
}

.maw-shell .studio-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.maw-shell .studio-card-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .studio-card-head h3 {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .studio-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.maw-shell .studio-pill-muted {
  background: var(--panel-soft);
  color: var(--ink-dim);
}

.maw-shell .studio-leaderboard,
.maw-shell .studio-heatmap,
.maw-shell .studio-sensitivity,
.maw-shell .studio-timehistory {
  padding: 12px;
}

.maw-shell .studio-loading,
.maw-shell .studio-empty,
.maw-shell .studio-error {
  padding: 20px;
  color: var(--ink-dim);
  font-size: 12px;
  text-align: center;
}

/* ---- loading skeletons (Phase 04) ------------------------------------- */

.maw-shell .studio-skel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 16px 22px;
}

.maw-shell .studio-skel-stage {
  width: 100%;
}

.maw-shell .studio-skel-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.maw-shell .studio-skel-d {
  display: inline-block;
  animation: mawstudio-blink 1.2s ease-in-out infinite both;
}
.maw-shell .studio-skel-d:nth-of-type(2) { animation-delay: .2s; }
.maw-shell .studio-skel-d:nth-of-type(3) { animation-delay: .4s; }

/* shimmering placeholder bars (name lines, score chips, rank dots) */
.maw-shell .studio-skel-rank,
.maw-shell .studio-skel-line,
.maw-shell .studio-skel-chip {
  background: linear-gradient(100deg,
    var(--panel-hover) 38%, var(--panel) 50%, var(--panel-hover) 62%);
  background-size: 200% 100%;
  animation: mawstudio-shimmer 1.6s linear infinite;
  animation-delay: inherit;
}

/* leaderboard: five staggered rows fading in */
.maw-shell .studio-skel-rows .studio-skel-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .studio-skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  animation: mawstudio-fadein .5s ease both;
}

.maw-shell .studio-skel-rank {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.maw-shell .studio-skel-line {
  height: 10px;
  border-radius: 5px;
}

.maw-shell .studio-skel-chip {
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 16px;
  border-radius: 999px;
}

/* heatmap: name column + a wave of pulsing cells */
.maw-shell .studio-skel-grid .studio-skel-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.maw-shell .studio-skel-gridrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .studio-skel-gname {
  flex: none;
  width: 120px;
}

.maw-shell .studio-skel-cell {
  flex: 1 1 0;
  height: 24px;
  border-radius: 4px;
  background: var(--blue-soft);
  animation: mawstudio-pulse 1.5s ease-in-out infinite both;
}
.maw-shell .studio-skel-cell:nth-of-type(3n) { background: var(--orange-soft); }
.maw-shell .studio-skel-cell:nth-of-type(3n+1) { background: var(--green-soft); }

/* kpi performance: a row of small charts with breathing bars */
.maw-shell .studio-skel-charts .studio-skel-stage {
  display: flex;
  gap: 14px;
}

.maw-shell .studio-skel-chart {
  flex: 1 1 0;
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 12px 14px 0;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 10px 10px 0 0;
  background: var(--panel-soft);
}

.maw-shell .studio-skel-bar {
  flex: 1 1 0;
  border-radius: 3px 3px 0 0;
  background: var(--blue-soft);
  transform-origin: bottom;
  animation: mawstudio-rise 1.6s ease-in-out infinite both;
}
.maw-shell .studio-skel-chart .studio-skel-bar:nth-of-type(2n) { background: var(--orange-soft); }

/* parallel coordinates: vertical axes with a bobbing knot each.
   While loading, .is-skel collapses the KPI block + legend so the
   skeleton spans the whole 330px parallel body. */
.maw-shell .studio-parallel-body.is-skel .studio-parallel-block[data-block="kpis"],
.maw-shell .studio-parallel-body.is-skel .studio-parallel-legend {
  display: none;
}

.maw-shell .studio-skel-axes {
  height: 100%;
  padding: 6px 4px 10px;
}

.maw-shell .studio-skel-axes .studio-skel-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: space-between;
  padding: 6px 4%;
}

.maw-shell .studio-skel-axis {
  position: relative;
  width: 2px;
  background: var(--line-hi);
  animation: mawstudio-pulse 1.8s ease-in-out infinite both;
}

.maw-shell .studio-skel-axis:after {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--knot, 40%);
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--navy);
  opacity: .7;
  animation: mawstudio-bob 1.8s ease-in-out infinite both;
  animation-delay: inherit;
}

/* analyze: axis frame + floating dots hinting at the scatter to come */
.maw-shell .studio-skel-scatter {
  min-height: 320px;
  flex: 1 1 auto;
  justify-content: center;
}

.maw-shell .studio-skel-scatter .studio-skel-stage {
  position: relative;
  max-width: 540px;
  height: 210px;
  border-left: 2px solid var(--line-hi);
  border-bottom: 2px solid var(--line-hi);
}

.maw-shell .studio-skel-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--blue);
  animation: mawstudio-float 1.9s ease-in-out infinite both;
}
.maw-shell .studio-skel-dot:nth-of-type(3n) { background: var(--orange); }
.maw-shell .studio-skel-dot:nth-of-type(3n+1) { background: var(--navy2); }

@keyframes mawstudio-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes mawstudio-blink {
  0%, 60%, 100% { opacity: .15; }
  30% { opacity: 1; }
}

@keyframes mawstudio-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mawstudio-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes mawstudio-rise {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}

@keyframes mawstudio-bob {
  0%, 100% { transform: translateY(-7px); }
  50% { transform: translateY(7px); }
}

@keyframes mawstudio-float {
  0%, 100% { transform: translateY(0) scale(.8); opacity: .4; }
  50% { transform: translateY(-10px) scale(1); opacity: .95; }
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .studio-skel *,
  .maw-shell .studio-skel *:after {
    animation: none !important;
  }
}

.maw-shell .studio-lb-filters {
  display: flex;
  gap: 8px;
  padding: 10px 12px 0;
}

.maw-shell .studio-lb-filters select {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--line, #e4ddd2);
  border-radius: 6px;
  background: var(--paper, #fffdf9);
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink, #2c2a26);
}

.maw-shell .studio-lb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* JS caps max-height at 5 rows when more exist — then this scrolls */
  overflow-y: auto;
}

.maw-shell .studio-lb-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 96px 42px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.maw-shell .studio-lb-row.is-active {
  border-color: var(--indigo);
  background: var(--indigo-soft);
}

.maw-shell .studio-rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
}

.maw-shell .studio-lb-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.maw-shell .studio-lb-meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .studio-scorebar {
  height: 7px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.maw-shell .studio-scorebar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.maw-shell .studio-score {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  text-align: right;
}

.maw-shell .studio-heat-table {
  display: grid;
  gap: 4px;
  font-size: 11px;
}

.maw-shell .studio-heat-head,
.maw-shell .studio-heat-row {
  display: grid;
  /* --heat-cols is set inline per render so the tracks always match the
     real KPI column count — no dead-track whitespace */
  grid-template-columns: var(--heat-cols, 150px repeat(5, minmax(70px, 1fr)));
  gap: 4px;
  align-items: stretch;
}

.maw-shell .studio-heat-head span {
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  align-self: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .studio-heat-head span:first-child {
  text-align: left;
}

.maw-shell .studio-heat-sim {
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-heat-cell {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
}

.maw-shell .studio-heat-cell.good {
  background: var(--green-soft);
  color: var(--green);
}

.maw-shell .studio-heat-cell.warn {
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.maw-shell .studio-heat-cell.bad {
  background: var(--red-soft);
  color: var(--red);
}

.maw-shell .studio-card-parallel {
  position: relative;
}

.maw-shell .studio-parallel-body {
  display: flex;
  gap: 12px;
  height: 330px;
  padding: 12px;
}

.maw-shell .studio-parallel-block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.maw-shell .studio-parallel-block + .studio-parallel-block {
  border-left: 1px dashed var(--line-hi);
  padding-left: 12px;
}

.maw-shell .studio-parallel-block-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 4px;
}

.maw-shell .studio-pscale-select {
  border: 1px solid var(--line, #e4ddd2);
  border-radius: 6px;
  background: var(--paper, #fffdf9);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink, #2c2a26);
}

.maw-shell .studio-parallel-chart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.maw-shell .studio-parallel-legend {
  flex: 0 0 190px;
  min-width: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
}

.maw-shell .studio-pl-search {
  flex: none;
  width: 100%;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: transparent;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink);
}

.maw-shell .studio-pl-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.maw-shell .studio-pl-key {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.maw-shell .studio-pl-key:hover,
.maw-shell .studio-pl-key.is-hover {
  background: var(--paper-2, #faf7f2);
  color: var(--ink);
}

.maw-shell .studio-pl-key.is-hover { font-weight: 700; }

.maw-shell .studio-pl-swatch {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.maw-shell .studio-pl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-parallel-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.maw-shell .studio-axis {
  stroke: var(--line-hi);
  stroke-width: 1;
}

.maw-shell .studio-axis-label {
  fill: var(--ink-mut);
  font-size: 11px;
  text-anchor: middle;
  font-family: var(--font-mono);
}

.maw-shell .studio-line {
  fill: none;
  stroke-width: 1.8;
  opacity: .8;
  transition: opacity 120ms ease, stroke-width 120ms ease;
}

.maw-shell .studio-line.is-dim { opacity: .12; }
.maw-shell .studio-line.is-hover { stroke-width: 3; opacity: 1; }

.maw-shell .studio-line-hit {
  fill: none;
  stroke: rgba(0,0,0,0);
  stroke-width: 12;
  pointer-events: stroke;
  cursor: pointer;
}

.maw-shell .studio-dot {
  opacity: .85;
  transition: opacity 120ms ease;
}

.maw-shell .studio-dot.is-dim { opacity: .12; }
.maw-shell .studio-dot.is-hover { opacity: 1; stroke: var(--ink); stroke-width: 1.5; }

.maw-shell .studio-dot-hit {
  fill: rgba(0,0,0,0);
  pointer-events: all;
  cursor: pointer;
}

.maw-shell .studio-pbar {
  opacity: .85;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.maw-shell .studio-pbar.is-dim { opacity: .15; }
.maw-shell .studio-pbar.is-hover { opacity: 1; stroke: var(--ink); stroke-width: 1; }

.maw-shell .studio-scale-line {
  stroke: var(--line-hi);
  stroke-dasharray: 2 3;
}

.maw-shell .studio-scale-label {
  fill: var(--ink-dim);
  font-size: 9px;
  font-family: var(--font-mono);
  text-anchor: end;
}

.maw-shell .studio-axis-minmax {
  fill: var(--ink-dim);
  font-size: 9px;
  font-family: var(--font-mono);
  text-anchor: middle;
}

.maw-shell .studio-axis-notch {
  stroke: var(--line-hi);
  stroke-width: 1;
}

.maw-shell .studio-axis-qval {
  fill: var(--ink-mut);
  font-size: 8px;
  font-family: var(--font-mono);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.maw-shell .studio-axis-label[data-tip] { cursor: help; }

.maw-shell .studio-viz-basis {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .studio-card-model {
  margin-top: 12px;
}

.maw-shell .studio-model-panel {
  min-height: 220px;
  padding: 12px;
}

.maw-shell .studio-time-series {
  fill: none;
  stroke-width: 2;
}

.maw-shell .studio-sens-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
}

.maw-shell .studio-sens-row span {
  color: var(--ink-mut);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .studio-sens-row div {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.maw-shell .studio-sens-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--indigo), var(--orange));
}

.maw-shell .studio-sens-row b {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  text-align: right;
}

.maw-shell .studio-time-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
}

.maw-shell .studio-time-svg {
  width: 100%;
  height: 165px;
}

.maw-shell .studio-time-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.maw-shell .studio-time-a,
.maw-shell .studio-time-b {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.maw-shell .studio-time-a {
  stroke: var(--blue);
}

.maw-shell .studio-time-b {
  stroke: var(--orange);
}

.maw-shell .studio-time-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-mut);
}

.maw-shell .studio-time-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.maw-shell .studio-time-legend i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
}

.maw-shell .studio-time-legend .a {
  background: var(--blue);
}

.maw-shell .studio-time-legend .b {
  background: var(--orange);
}

.maw-shell .studio-experiment-layout {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(380px, 1.05fr);
  gap: 12px;
}

.maw-shell .studio-generate {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.maw-shell .studio-experiment-copy {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-mut);
}

.maw-shell .studio-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.maw-shell .studio-candidate {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  text-align: left;
}

.maw-shell .studio-candidate.is-active {
  border-color: var(--indigo);
  background: var(--indigo-soft);
}

.maw-shell .studio-candidate span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-shell .studio-candidate b {
  font-size: 12px;
}

.maw-shell .studio-candidate em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .studio-candidate strong {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--navy);
}

.maw-shell .studio-submit-empty {
  padding: 18px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-mut);
}

.maw-shell .studio-submit-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .studio-submit-score {
  margin: 3px 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-shell .studio-param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
}

.maw-shell .studio-submit-disabled,
.maw-shell .studio-submit-candidate {
  width: 100%;
  height: 34px;
  margin-top: 14px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  font-size: 12px;
}

.maw-shell .studio-submit-disabled {
  background: var(--panel-soft);
  color: var(--ink-dim);
}

.maw-shell .studio-submit-candidate {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

@media (max-width: 1180px) {
  .maw-shell .studio-workbench {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .maw-shell .studio-grid-bottom,
  .maw-shell .studio-experiment-layout {
    grid-template-columns: 1fr;
  }
}

/* The 50/50 leaderboard + heat map split holds until genuinely narrow —
   both cards handle shrink (list scrolls, heat table scrolls). */
@media (max-width: 900px) {
  .maw-shell .studio-grid-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  /* .studio-hero deliberately NOT reset to display:block here -- the hero row
     scrolls horizontally at any width, which is what a narrow screen needs. */
  .maw-shell .studio-workbench {
    display: block;
  }

  .maw-shell .studio-lens {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .maw-shell .studio-main {
    height: calc(100vh - 300px);
  }

  .maw-shell .studio-time-wrap {
    grid-template-columns: 1fr;
  }
}

/* ==================== KPI Performance (loadcase-driven charts) ==================== */
/** Added by rahul.suri on 07/17/2026 - Phase 04 Design Studio KPI analysis - custom interactive charts **/

.maw-shell .studio-card-kpiperf { position: relative; }

.maw-shell .studio-kpim-grid {
    /* one row always — few charts grow to fill it, many-target loadcases
       scroll horizontally instead of wrapping */
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.maw-shell .studio-kpim-chart {
    flex: 1 0 300px;
    min-width: 300px;
    background: var(--paper-2, #faf7f2);
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 8px;
    padding: 10px 10px 4px;
}
.maw-shell .studio-kpim-chart svg { width: 100%; height: auto; display: block; }

.maw-shell .studio-kpim-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink, #2c2a26);
    margin: 0 0 4px 2px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-transform: capitalize;
}
.maw-shell .studio-kpim-limit {
    font-size: 11px;
    font-weight: 600;
    color: #b2452e;
    text-transform: none;
}
.maw-shell .studio-kpim-rel {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--navy, #16233d);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.72;
}
.maw-shell .studio-kpim-title .studio-kpim-rel + .studio-kpim-limit {
    color: #2e8f5e;
}

.maw-shell .studio-kpi-grid { stroke: rgba(0,0,0,0.07); stroke-width: 1; }
.maw-shell .studio-kpi-tick { font-size: 10px; fill: var(--ink-mut, #8a8579); }
.maw-shell .studio-kpi-axis-name { font-size: 11px; font-weight: 600; fill: var(--ink-mut, #8a8579); }

.maw-shell .studio-kpib { cursor: pointer; transition: opacity 120ms ease; }
.maw-shell .studio-kpib:hover { opacity: 0.75; }
.maw-shell .studio-kpib-pass { fill: #2e8f5e; }
.maw-shell .studio-kpib-warn { fill: #d99a2b; }
.maw-shell .studio-kpib-crit { fill: #c04a33; }
.maw-shell .studio-kpib-none { fill: #9a938a; }

.maw-shell .studio-kpi-limitline { stroke: #c04a33; stroke-width: 1.6; }
.maw-shell .studio-kpi-warnline { stroke: #d99a2b; stroke-width: 1.2; stroke-dasharray: 5 4; }

.maw-shell .studio-kpiscatter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 8px;
    font-size: 12px;
    color: var(--ink-mut, #8a8579);
}
.maw-shell .studio-kpiscatter-bar label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.maw-shell .studio-kpiscatter-bar select {
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 6px;
    background: var(--paper, #fffdf9);
    padding: 4px 8px;
    font-size: 12px;
    color: var(--ink, #2c2a26);
}
.maw-shell .studio-kpiscatter-r { font-weight: 700; color: var(--ink, #2c2a26); }

.maw-shell .studio-kpiscatter-svg {
    width: 100%;
    height: auto;
    display: block;
    background: var(--paper-2, #faf7f2);
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 8px;
}
.maw-shell .studio-kpip { cursor: pointer; stroke: rgba(255,255,255,0.85); stroke-width: 1.4; transition: opacity 120ms ease; }
.maw-shell .studio-kpip:hover { opacity: 0.75; }

/* ==================== Analyze: left rail + live 2D/3D scatter ==================== */
/** Added by rahul.suri on 07/18/2026 - Phase 04 - Analyze redesign (rail + animated 2D/3D) **/

/* Fit the analyze card to the window: the pane has a definite height and
   scrolls, so a flex column lets the chart claim every spare pixel; below
   the 420px floor the pane scrollbar takes over. */
.maw-shell .studio-pane[data-pane="analyze"].is-active {
    display: flex;
    flex-direction: column;
}

.maw-shell .studio-card-analyze {
    flex: 1 1 auto;
    min-height: 440px;
    display: flex;
    flex-direction: column;
}

.maw-shell .studio-card-analyze .studio-card-head {
    flex: 0 0 auto;
}

.maw-shell .studio-analyze-layout,
.maw-shell .studio-surface-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 14px;
    padding: 12px 14px 14px;
    align-items: stretch;
}

.maw-shell .studio-an-rail {
    flex: 0 0 230px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--paper-2, #faf7f2);
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 8px;
    overflow-y: auto;
}

.maw-shell .studio-an-rels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maw-shell .studio-an-rels-title {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mut, #8a8579);
    font-weight: 600;
    margin-bottom: 2px;
}

.maw-shell .studio-an-rel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 6px;
    background: var(--paper, #fffdf9);
    color: var(--ink, #2c2a26);
    font-size: 11px;
    text-align: left;
    cursor: pointer;
}

.maw-shell .studio-an-rel:hover { border-color: var(--indigo, #5560b8); }

.maw-shell .studio-an-rel.is-active {
    border-color: var(--indigo, #5560b8);
    background: var(--indigo-soft, #eef0fb);
}

.maw-shell .studio-an-rel-r {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-dim);
    white-space: nowrap;
}

.maw-shell .studio-an-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mut, #8a8579);
    font-weight: 600;
}

.maw-shell .studio-an-field select {
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 6px;
    background: var(--paper, #fffdf9);
    padding: 5px 8px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink, #2c2a26);
    width: 100%;
}

.maw-shell .studio-an-legend,
.maw-shell .studio-rs-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-dim);
}

.maw-shell .studio-an-legend .studio-an-ramp {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, hsl(0,52%,46%), hsl(60,52%,46%), hsl(120,52%,46%));
}

.maw-shell .studio-an-stats,
.maw-shell .studio-rs-stats {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-dim);
    line-height: 1.6;
}

.maw-shell .studio-an-hint,
.maw-shell .studio-rs-hint {
    margin-top: auto;
    font-size: 11px;
    color: var(--ink-mut, #8a8579);
    font-style: italic;
}

.maw-shell .studio-an-chart,
.maw-shell .studio-rs-chart {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.maw-shell .studio-an-reset {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 6px;
    background: var(--paper, #fffdf9);
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink, #2c2a26);
    cursor: pointer;
}

.maw-shell .studio-an-reset:hover { border-color: var(--indigo, #5560b8); }

.maw-shell .studio-an-svg {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--paper-2, #faf7f2);
    border: 1px solid var(--line, #e4ddd2);
    border-radius: 8px;
    cursor: grab;
}

.maw-shell .studio-an-svg.is-dragging { cursor: grabbing; }

.maw-shell .studio-an-frame line { stroke: rgba(0,0,0,0.10); stroke-width: 1; }
.maw-shell .studio-an-frame .studio-an-wallgrid { stroke: rgba(0,0,0,0.06); }
.maw-shell .studio-an-frame text { font-size: 10px; fill: var(--ink-mut, #8a8579); }
.maw-shell .studio-an-frame .studio-an-axisname { font-size: 11px; font-weight: 600; }
.maw-shell .studio-an-frame .studio-an-3dtick { font-size: 8.5px; }
.maw-shell .studio-an-frame .studio-an-datum {
    stroke: #c04a33;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
}
.maw-shell .studio-an-frame .studio-an-datum-label {
    fill: #c04a33;
    font-size: 9.5px;
    font-weight: 700;
}

/* hover halo -- modern Chrome animates r as a CSS geometry property */
.maw-shell .studio-an-svg .studio-kpip { transition: r 120ms ease, opacity 120ms ease; }
.maw-shell .studio-an-svg .studio-kpip:hover { r: 8.5px; opacity: 1; }

.maw-shell .studio-kpiperf-tip {
    /* fixed -> escapes the maw-shell/maw-pane overflow:hidden clipping */
    position: fixed;
    z-index: 200;
    pointer-events: none;
    background: var(--ink, #2c2a26);
    color: #fdfbf7;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 12px;
    line-height: 1.45;
    max-width: 280px;
    /* sim names are long unbroken tokens — break them rather than overflow */
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.maw-shell .studio-kpitip-title { font-weight: 700; margin-bottom: 3px; }
.maw-shell .studio-kpitip-line { opacity: 0.9; }

/* ==================== Loadcase multi-select lens + per-LC sections ==================== */
/** Added by rahul.suri on 07/17/2026 - Phase 04 - loadcases as the primary judger **/

.maw-shell .studio-loadcase-multi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
    max-height: 260px;
    overflow-y: auto;
}
.maw-shell .studio-lc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink, #2c2a26);
    margin: 0;
    font-weight: 500;
}
.maw-shell .studio-lc-row:hover { background: var(--paper-2, #faf7f2); }
.maw-shell .studio-lc-row.is-checked {
    background: var(--paper-2, #faf7f2);
    border-color: var(--line, #e4ddd2);
    font-weight: 700;
}
.maw-shell .studio-lc-row input { margin: 0; flex: none; }
.maw-shell .studio-lc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.maw-shell .studio-kpiperf-lc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #2c2a26);
    border-top: 1px solid var(--line, #e4ddd2);
    padding-top: 12px;
    margin: 16px 0 10px;
}
.maw-shell .studio-kpiperf-lc-head span {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-mut, #8a8579);
}

/* Heat map shows every subset sim + KPI column — scroll both ways, never
   truncate (2026-07-17; x-scroll for many-KPI loadcases 2026-07-18).
   The card grid-stretches to the leaderboard card's height; flex-basis 0
   keeps the table from driving the row height while letting the scroll
   area fill every pixel down to the card's bottom edge. */
.maw-shell .studio-card-heatmap {
  display: flex;
  flex-direction: column;
}

.maw-shell .studio-card-heatmap .studio-card-head {
  flex: 0 0 auto;
}

.maw-shell .studio-heatmap {
  flex: 1 1 0;
  min-height: 180px;
  overflow: auto;
}

/* ==================== 3-tab hero (Overview | Analyze | Explore) ==================== */
/** Added by rahul.suri on 07/17/2026 - Phase 04 - 3-tab Design Studio **/

.maw-shell .studio-hero-tools { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }

/* ---- Loadcase picker (dropdown in the hero) ---- */
.maw-shell .studio-lc-picker { position: relative; }
.maw-shell .studio-lc-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
}
.maw-shell .studio-lc-btn:hover { background: var(--panel-hover); }
.maw-shell .studio-lc-btn .fa { font-size: 12px; color: var(--ink-mut); }
.maw-shell .studio-lc-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .studio-lc-caret { font-size: 10px; color: var(--ink-dim); }
.maw-shell .studio-lc-picker.is-open .studio-lc-caret { transform: rotate(180deg); }
/* position:fixed, NOT absolute: .studio-hero-row is an overflow scroller, and
   overflow-x:auto with overflow-y:visible does not exist (the visible axis
   computes to auto), so an absolutely positioned menu would be clipped on both
   axes. top/left are assigned by _positionLcMenu() from the button's rect.
   box-sizing + max-width keep the 300px body inside a narrow viewport. */
.maw-shell .studio-lc-menu {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  width: 300px;
  max-width: calc(100vw - 16px);
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(30, 26, 18, .18);
}
.maw-shell .studio-lc-menu .studio-loadcase-multi { max-height: 260px; overflow-y: auto; }

/* ---- Tab selector (segmented, active = the primary indigo gradient) ---- */
.maw-shell .studio-tabbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  background: var(--panel-soft);
}
.maw-shell .studio-tab-btn {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mut);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.maw-shell .studio-tab-btn:hover { color: var(--ink); background: var(--panel-hover); }
.maw-shell .studio-tab-btn.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  box-shadow: 0 2px 8px rgba(79, 70, 229, .3);
}

/* ---- Panes ---- */
/* studio-main is now a direct flex child of studio-shell (the old workbench
   grid + lens sidebar are gone) — panes keep their own padding + scroll. */
.maw-shell .studio-main { flex: 1 1 auto; }
.maw-shell .studio-pane .studio-card + .studio-card,
.maw-shell .studio-pane .studio-grid + .studio-card,
.maw-shell .studio-pane .studio-card + .studio-grid { margin-top: 12px; }
/* Side-by-side cards inside a grid space via the grid gap — the stacked-card
   margin above would offset them 12px down inside their stretched cell.
   (Must match the 4-class specificity of the sibling rule above.) */
.maw-shell .studio-pane .studio-grid > .studio-card { margin-top: 0; }
.maw-shell .studio-shell > .studio-warning-list { flex: none; padding: 10px 22px 0; }

/* Analyze card hosts the shared tooltip -> needs its own offset context */
.maw-shell .studio-card-analyze { position: relative; }
.maw-shell .studio-card-analyze .studio-kpiscatter-svg { max-height: 420px; }

/* ---- Explore: controls bar ---- */
.maw-shell .studio-ex-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 4px 0 12px;
}
.maw-shell .studio-ex-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mut);
}
.maw-shell .studio-ex-bar select,
.maw-shell .studio-ex-bar input[type="number"] {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
}
.maw-shell .studio-ex-bar input[type="number"] { width: 74px; }
.maw-shell .studio-ex-weightlab {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 6px;
}
.maw-shell .studio-ex-weightlab input[type="range"] { width: 130px; margin: 0; }

/* ---- Explore: convergence strip + notes ---- */
.maw-shell .studio-ex-conv {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper-2, #faf7f2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.maw-shell .studio-ex-conv > div { display: flex; flex-direction: column; gap: 2px; }
.maw-shell .studio-ex-note {
  margin-top: 14px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mut);
  background: var(--surface-2, #faf7f0);
  border-left: 3px solid var(--line-hi, #d4c9b3);
  border-radius: 0 7px 7px 0;
}
.maw-shell .studio-ex-hint { font-size: 11px; font-weight: 500; color: var(--ink-dim); }

/* ---- Explore: suggestions table ---- */
.maw-shell .studio-ex-table { margin-top: 12px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
.maw-shell .studio-ex-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.maw-shell .studio-ex-table th,
.maw-shell .studio-ex-table td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.maw-shell .studio-ex-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel-soft);
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-mut);
  z-index: 1;
}
.maw-shell .studio-ex-table tbody tr:last-child td { border-bottom: none; }
.maw-shell .studio-ex-table tbody tr.is-picked { background: var(--indigo-soft); }
.maw-shell .studio-ex-name { font-weight: 700; color: var(--navy); }
.maw-shell .studio-ex-table input[type="checkbox"] { margin: 0; }
.maw-shell .studio-ex-foot { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-mut); }

/* ---- Explore: DOE setup + submit ---- */
.maw-shell .studio-doesetup { padding: 14px; }
.maw-shell .studio-ex-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: end;
}
@media (max-width: 720px) { .maw-shell .studio-ex-setup-grid { grid-template-columns: 1fr; } }
.maw-shell .studio-ex-setup-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
}
.maw-shell .studio-ex-setup-grid select,
.maw-shell .studio-ex-setup-grid input[type="text"] {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12.5px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.maw-shell .studio-ex-fixed {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 1px dashed var(--line-hi);
  border-radius: 7px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .studio-ex-review { margin-top: 14px; padding: 11px 13px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 9px; background: var(--surface-2, #faf7f0); }
.maw-shell .studio-ex-review-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--indigo, #5560b8); margin-bottom: 6px; }
.maw-shell .studio-ex-review-line { font-size: 12.5px; line-height: 1.55; color: var(--ink, #2a251d); }
.maw-shell .studio-ex-review-line.is-warn { color: #b3452a; }
.maw-shell .studio-ex-review-hint { margin-top: 6px; font-size: 11px; color: var(--ink-dim, #9c9480); font-style: italic; }
.maw-shell .studio-ex-success-warn { color: #b3452a; }
.maw-shell .studio-ex-submitrow { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.maw-shell .studio-ex-success { padding: 6px 2px; }
.maw-shell .studio-ex-success-title { font-size: 15px; font-weight: 800; color: var(--green, #2e8f5e); }
.maw-shell .studio-ex-success-line { margin-top: 6px; font-size: 12.5px; color: var(--ink); }
.maw-shell .studio-ex-success .maw-btn { margin-top: 12px; }

/* ==================== Explore v2: Design Advisor ==================== */

/* ---- Evidence panel ---- */
.maw-shell .studio-adv-evidence {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgba(47, 95, 196, .035), rgba(194, 86, 47, .025)),
    var(--panel);
}

.maw-shell .studio-adv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 11px;
}

.maw-shell .studio-adv-target {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.maw-shell .studio-adv-target select {
  min-width: 190px;
  max-width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.maw-shell .studio-adv-target select:hover { border-color: var(--blue); }
.maw-shell .studio-adv-target select:focus {
  border-color: var(--blue);
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
}

.maw-shell .studio-adv-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px;
}

.maw-shell .studio-adv-param {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}

.maw-shell .studio-adv-param:hover {
  border-color: var(--line-hi);
  background: var(--panel-hover);
}

.maw-shell .studio-adv-param:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-soft);
}

.maw-shell .studio-adv-param input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
}

.maw-shell .studio-adv-param input[type="checkbox"]:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.maw-shell .studio-adv-param input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.maw-shell .studio-adv-param[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

.maw-shell .studio-adv-param-main {
  flex: 1 1 auto;
  min-width: 0;
}

.maw-shell .studio-adv-param-name {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-adv-param-meta {
  display: block;
  margin-top: 3px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.25;
}

.maw-shell .studio-adv-tier {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 47px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.maw-shell .studio-adv-tier-high {
  border-color: rgba(46, 143, 94, .28);
  background: rgba(46, 143, 94, .11);
  color: var(--green, #2e8f5e);
}

.maw-shell .studio-adv-tier-medium {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}

.maw-shell .studio-adv-tier-low {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink-dim);
}

.maw-shell .studio-adv-tier-untested {
  border-color: rgba(47, 95, 196, .22);
  background: var(--blue-soft);
  color: var(--blue);
}

.maw-shell .studio-adv-unexplored {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-hi);
}

.maw-shell .studio-adv-unexplored > .studio-card-kicker { margin-bottom: 7px; }

.maw-shell .studio-adv-caption,
.maw-shell .studio-adv-note {
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}

.maw-shell .studio-adv-caption { margin-top: 9px; }

.maw-shell .studio-adv-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.maw-shell .studio-adv-actions .maw-btn:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: 2px;
}

.maw-shell .studio-adv-actions .maw-btn:disabled {
  cursor: not-allowed;
  opacity: .52;
}

/* ---- Assessment verdict and regime override ---- */
.maw-shell .studio-adv-verdict {
  margin: 12px 14px 0;
  padding: 13px 14px;
  border: 1px solid rgba(47, 95, 196, .2);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: linear-gradient(105deg, var(--blue-soft), var(--panel) 72%);
}

.maw-shell .studio-adv-verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.maw-shell .studio-adv-regime {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.maw-shell .studio-adv-why {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.maw-shell .studio-adv-diagnostic {
  margin-top: 7px;
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
}

/* ---- Advanced manual controls ---- */
.maw-shell .studio-adv-advanced {
  margin: 10px 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.maw-shell .studio-adv-advanced:empty { display: none; }

/* Inline disclosure at the end of the provenance line (mock has no standalone row). */
.maw-shell .studio-adv-advanced-toggle {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}

.maw-shell .studio-adv-advanced-toggle:hover {
  background: var(--panel-soft);
  color: var(--navy);
}

.maw-shell .studio-adv-advanced-toggle:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
}

.maw-shell .studio-adv-advanced .studio-ex-bar {
  padding: 10px 12px 12px;
}

.maw-shell .studio-adv-note { margin: 8px 14px 0; }

/* ---- Candidate dossier ---- */
.maw-shell .studio-ex-table tbody tr.is-muted {
  background: var(--panel-soft);
  color: var(--ink-dim);
  opacity: .68;
}

.maw-shell .studio-ex-table tbody tr.is-muted .studio-ex-name {
  color: var(--ink-mut);
  text-decoration: line-through;
}

.maw-shell .studio-ex-gain {
  color: var(--green, #2e8f5e);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.maw-shell .studio-ex-novelty {
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.maw-shell .studio-ex-reuse {
  max-width: 250px;
  overflow: hidden;
  color: var(--orange-strong);
  font-size: 11px;
  text-overflow: ellipsis;
}

@media (max-width: 760px) {
  .maw-shell .studio-adv-head,
  .maw-shell .studio-adv-verdict-head {
    align-items: stretch;
    flex-direction: column;
  }

  .maw-shell .studio-adv-target {
    align-items: stretch;
    flex-direction: column;
  }

  .maw-shell .studio-adv-target select { width: 100%; }
  .maw-shell .studio-adv-params { grid-template-columns: 1fr; }
  .maw-shell .studio-adv-actions { align-items: stretch; flex-direction: column; }
  .maw-shell .studio-adv-actions .maw-btn { width: 100%; }
}

.maw-shell .studio-adv-head h4 { margin: 3px 0 0; color: var(--navy); font-size: 14px; }
.maw-shell .studio-adv-assessment,
.maw-shell .studio-suggest-out { padding: 0 14px 14px; }
.maw-shell .studio-suggest-controls > .studio-suggest-btn { margin: 12px 14px 0; }
.maw-shell .studio-adv-param.is-disabled { cursor: not-allowed; opacity: .58; }

/* advisor model provenance line */
.maw-shell .studio-adv-model {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-mut);
}

.maw-shell .studio-adv-retrain {
  margin-left: 8px;
  border: 1px solid var(--line-hi);
  background: var(--paper, #fffdf9);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--ink-mut);
  cursor: pointer;
}

.maw-shell .studio-adv-retrain:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* ==================== Explore v2: integrated advisor layout ==================== */

/* The pane already owns the viewport fit (height: 100% + overflow: auto), so
   the card fills the pane's content box instead of re-deriving 100vh offsets. */
.maw-shell .studio-pane[data-pane="explore"] .studio-card-suggest {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
}

.maw-shell .studio-card-suggest > .studio-card-head {
  flex: none;
  min-height: 56px;
}

/* ---- Assessment strip ---- */
.maw-shell .studio-adv-assess {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-soft);
}

.maw-shell .studio-adv-assessleft {
  flex: 1 1 300px;
  min-width: 0;
}

.maw-shell .studio-adv-line1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.maw-shell .studio-adv-line2 {
  margin-top: 5px;
  color: var(--ink-mut);
  font-size: 11px;
  line-height: 1.35;
}

.maw-shell .studio-adv-assessright {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.maw-shell .studio-adv-assess .studio-adv-target {
  flex: none;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.maw-shell .studio-adv-assess .studio-adv-target select {
  min-width: 156px;
  max-width: 190px;
  height: 28px;
}

.maw-shell .studio-adv-assess .studio-adv-why {
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 500;
}

.maw-shell .studio-adv-assess .studio-adv-model {
  display: inline;
  margin-top: 0;
}

.maw-shell .studio-adv-assess .studio-adv-retrain {
  background: var(--panel);
}

.maw-shell .studio-adv-assess .studio-adv-regime {
  min-height: 20px;
  padding: 1px 8px;
  border-radius: 5px;
}

.maw-shell .studio-adv-regime.regime-foundation {
  background: var(--blue);
}

.maw-shell .studio-adv-regime.regime-refine {
  background: var(--navy);
}

.maw-shell .studio-adv-regime.regime-pinpoint {
  background: var(--orange);
}

.maw-shell .studio-adv-strategy {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 252px;
  min-width: 252px;
}

.maw-shell .studio-adv-strategyends {
  display: flex;
  justify-content: space-between;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.maw-shell .studio-adv-strategytrack {
  position: relative;
  height: 22px;
}

.maw-shell .studio-adv-strategytrack input[type="range"] {
  width: 100%;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

.maw-shell .studio-adv-advised {
  position: absolute;
  top: 15px;
  color: var(--orange);
  font-size: 8px;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
}

.maw-shell .studio-adv-strategyread {
  overflow: hidden;
  margin-top: 1px;
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-adv-strategytrack input[type="range"]:focus-visible,
.maw-shell .studio-adv-railsearch:focus-visible,
.maw-shell .studio-adv-railtab:focus-visible,
.maw-shell .studio-adv-vizmode:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Advanced remains in the strip but consumes its own compact row when open. */
.maw-shell .studio-adv-assess > .studio-adv-advanced,
.maw-shell .studio-adv-assess .studio-adv-assessadvanced {
  flex: 1 0 100%;
  width: 100%;
  margin: 0;
}

.maw-shell .studio-adv-assess .studio-adv-advanced-toggle {
  min-height: 27px;
}

.maw-shell .studio-adv-assess .studio-adv-advanced .studio-ex-bar {
  padding: 8px 10px 10px;
}

/* ---- Advisor body: parameter rail + simulator ---- */
.maw-shell .studio-adv-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 12px 14px 14px;
}

.maw-shell .studio-adv-rail {
  flex: 0 0 218px;
  min-width: 190px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

/* Override the former full-width evidence panel now that it lives in the rail. */
.maw-shell .studio-adv-rail > .studio-adv-evidence {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: var(--panel);
}

.maw-shell .studio-adv-railhead {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 9px 8px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .studio-adv-railsearch {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

.maw-shell .studio-adv-railsearch::placeholder {
  color: var(--ink-dim);
}

.maw-shell .studio-adv-railtabs {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}

.maw-shell .studio-adv-railtab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 25px;
  padding: 3px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.maw-shell .studio-adv-railtab + .studio-adv-railtab {
  border-left: 1px solid var(--line);
}

.maw-shell .studio-adv-railtab:hover {
  background: var(--panel-hover);
  color: var(--navy);
}

.maw-shell .studio-adv-railtab.is-active,
.maw-shell .studio-adv-railtab[aria-selected="true"],
.maw-shell .studio-adv-railtab[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}

.maw-shell .studio-adv-raillist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 7px;
}

.maw-shell .studio-adv-raillist .studio-adv-params {
  display: block;
}

.maw-shell .studio-adv-raillist .studio-adv-param {
  align-items: flex-start;
  min-height: 0;
  margin-bottom: 6px;
  padding: 6px 7px;
}

.maw-shell .studio-adv-raillist .studio-adv-param:last-child {
  margin-bottom: 0;
}

.maw-shell .studio-adv-raillist .studio-adv-param.is-off {
  opacity: .62;
}

.maw-shell .studio-adv-raillist .studio-adv-param-name {
  font-size: 12px;
}

.maw-shell .studio-adv-raillist .studio-adv-param-meta {
  margin-top: 2px;
  white-space: normal;
}

.maw-shell .studio-adv-raillist .studio-adv-tier {
  min-width: 0;
  height: 17px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 8.5px;
}

.maw-shell .studio-adv-param.is-hidden,
.maw-shell .studio-adv-param[hidden] {
  display: none;
}

.maw-shell .studio-adv-railfoot {
  flex: none;
  padding: 7px 10px 9px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.35;
}

/* ---- Simulator surface ---- */
.maw-shell .studio-adv-sim {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.maw-shell .studio-adv-sim > .studio-suggest-controls {
  flex: none;
}

.maw-shell .studio-adv-simhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .studio-adv-simtitle {
  min-width: 0;
  margin-top: 1px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.maw-shell .studio-adv-simtitle h4,
.maw-shell .studio-adv-simtitle strong {
  display: block;
  margin: 1px 0 0;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.maw-shell .studio-adv-simactions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.maw-shell .studio-adv-vizmode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.maw-shell .studio-adv-vizmode .is-active,
.maw-shell .studio-adv-vizmode [aria-current="true"] {
  color: var(--navy);
  font-weight: 700;
}

.maw-shell .studio-adv-switchtrack {
  flex: none;
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: var(--line-hi);
  transition: background .15s;
}

.maw-shell .studio-adv-switchknob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(22, 35, 61, .25);
  transition: left .15s;
}

.maw-shell .studio-adv-vizmode[aria-checked="true"] .studio-adv-switchtrack,
.maw-shell .studio-adv-vizmode.is-viz .studio-adv-switchtrack {
  background: var(--navy);
}

.maw-shell .studio-adv-vizmode[aria-checked="true"] .studio-adv-switchknob,
.maw-shell .studio-adv-vizmode.is-viz .studio-adv-switchknob {
  left: 16px;
}

.maw-shell .studio-adv-sim .studio-suggest-btn {
  margin: 0;
  white-space: nowrap;
}

.maw-shell .studio-adv-simscroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.maw-shell .studio-adv-simscroll > .studio-suggest-out {
  min-height: 100%;
  padding: 0;
}

.maw-shell .studio-adv-simscroll .studio-loading,
.maw-shell .studio-adv-simscroll .studio-empty,
.maw-shell .studio-adv-simscroll .studio-error {
  padding: 28px 18px;
}

.maw-shell .studio-adv-simscroll .studio-ex-table {
  max-height: none;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.maw-shell .studio-adv-simscroll .studio-ex-table thead th {
  top: 0;
  z-index: 2;
  padding: 7px 9px;
  background: var(--panel-soft);
}

.maw-shell .studio-adv-simscroll .studio-ex-table td {
  padding: 7px 9px;
  font-variant-numeric: tabular-nums;
}

.maw-shell .studio-adv-simscroll .studio-ex-table tbody tr.is-picked {
  background: transparent;
}

.maw-shell .studio-adv-simscroll .studio-ex-table tbody tr.is-picked .studio-ex-name::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 7px;
}

/* ---- Parallel-lines mode ---- */
.maw-shell .studio-adv-simviz {
  flex: 1 1 auto;
  min-height: 0;
  display: none;
  overflow: hidden;
  padding: 8px 10px 5px;
}

.maw-shell .studio-adv-sim.is-viz .studio-adv-simscroll,
.maw-shell .studio-adv-sim.viz-mode .studio-adv-simscroll,
.maw-shell .studio-adv-sim[data-viz-mode="viz"] .studio-adv-simscroll {
  display: none;
}

.maw-shell .studio-adv-sim.is-viz .studio-adv-simviz,
.maw-shell .studio-adv-sim.viz-mode .studio-adv-simviz,
.maw-shell .studio-adv-sim[data-viz-mode="viz"] .studio-adv-simviz,
.maw-shell .studio-adv-simviz.is-active {
  display: flex;
}

.maw-shell .studio-adv-vizmain,
.maw-shell .studio-adv-vizchart {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.maw-shell .studio-adv-vizmain {
  display: flex;
  flex-direction: column;
}

.maw-shell .studio-adv-vizchart {
  display: flex;
  flex-direction: column;
}

.maw-shell .studio-adv-vizchart svg {
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
}

.maw-shell .studio-adv-vizhint {
  flex: none;
  padding: 2px 4px 5px;
  color: var(--ink-dim);
  font-size: 10.5px;
}

.maw-shell .studio-adv-vizchart .studio-axis-label.studio-adv-axis-predicted,
.maw-shell .studio-adv-vizchart .studio-axis-label.is-predicted {
  fill: var(--blue);
  font-weight: 700;
}

.maw-shell .studio-adv-vizlegend {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 15px;
  padding: 4px 2px 6px;
  color: var(--ink-mut);
  font-size: 10px;
}

.maw-shell .studio-adv-vizthin,
.maw-shell .studio-adv-vizbold,
.maw-shell .studio-adv-vizdash {
  display: inline-block;
  width: 18px;
  margin-right: 5px;
  border-top: 2px solid var(--ink-dim);
  vertical-align: middle;
}

.maw-shell .studio-adv-vizbold {
  border-top-width: 4px;
  border-top-color: var(--navy);
}

.maw-shell .studio-adv-vizdash {
  border-top: 3px dashed var(--indigo, #5560b8);
}

.maw-shell .studio-adv-viznames {
  flex: 0 0 168px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 10px;
  padding: 2px 0 2px 10px;
  border-left: 1px dashed var(--line-hi);
}

.maw-shell .studio-adv-vizname {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--ink-mut);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-adv-vizname.is-suggested,
.maw-shell .studio-adv-vizname.suggested {
  color: var(--ink);
  font-weight: 700;
}

.maw-shell .studio-adv-vizswatch {
  flex: none;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-dim);
}

.maw-shell .studio-adv-vizname.is-suggested .studio-adv-vizswatch,
.maw-shell .studio-adv-vizname.suggested .studio-adv-vizswatch {
  height: 5px;
}

.maw-shell .studio-adv-vizscore {
  flex: none;
  margin-left: auto;
  padding-left: 5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 9px;
}

/* ---- Pinned submit action ---- */
.maw-shell .studio-adv-submitbar {
  flex: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}

.maw-shell .studio-adv-submitsummary {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-mut);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .studio-adv-submitbar .maw-btn {
  flex: none;
  white-space: nowrap;
}

.maw-shell .studio-adv-submitbar .maw-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

@media (max-width: 1180px) {
  .maw-shell .studio-adv-assessleft {
    flex-basis: 100%;
  }

  .maw-shell .studio-adv-assessright {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 880px) {
  .maw-shell .studio-adv-body {
    flex-direction: column;
    overflow-y: auto;
  }

  .maw-shell .studio-adv-rail {
    flex: none;
    width: 100%;
    max-height: 240px;
  }

  .maw-shell .studio-adv-sim {
    flex: none;
    min-height: 340px;
  }
}

@media (max-width: 680px) {
  .maw-shell .studio-adv-assessright {
    align-items: stretch;
    flex-direction: column;
  }

  .maw-shell .studio-adv-assess .studio-adv-target,
  .maw-shell .studio-adv-assess .studio-adv-target select {
    width: 100%;
    max-width: none;
  }

  .maw-shell .studio-adv-strategy {
    align-self: center;
  }

  .maw-shell .studio-adv-simhead,
  .maw-shell .studio-adv-submitbar {
    align-items: stretch;
    flex-direction: column;
  }

  .maw-shell .studio-adv-simactions {
    justify-content: space-between;
  }

  .maw-shell .studio-adv-submitsummary {
    white-space: normal;
  }

  .maw-shell .studio-adv-viznames {
    flex-basis: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .studio-adv-switchtrack,
  .maw-shell .studio-adv-switchknob {
    transition: none;
  }
}

/* Explore v2 polish (sol design-QA pass): mock-navy primaries, novel/reuse flag colors. */
.maw-shell .studio-card-suggest .maw-btn.maw-primary {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.maw-shell .studio-card-suggest .maw-btn.maw-primary:hover:not(:disabled),
.maw-shell .studio-card-suggest .maw-btn.maw-primary:focus:not(:disabled) {
  border-color: #22335a;
  background: #22335a;
}

.maw-shell .studio-adv-simscroll .studio-ex-table td.studio-ex-reuse { color: var(--green); }

.maw-shell .studio-adv-simscroll .studio-ex-table tr.is-muted td.studio-ex-reuse { color: var(--orange-strong); }

/* Explore loading composition (strip + parameter-card shimmers, 2026-07-19). */
.maw-shell .studio-skel-striprow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
}

.maw-shell .studio-skel-strip .studio-skel-chip {
  flex: none;
  width: 58px;
  height: 18px;
  border-radius: 5px;
}

.maw-shell .studio-skel-spacer { flex: 1 1 auto; }

.maw-shell .studio-skel-block {
  flex: none;
  width: 92px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(100deg,
    var(--panel-hover) 38%, var(--panel) 50%, var(--panel-hover) 62%);
  background-size: 200% 100%;
  animation: mawstudio-shimmer 1.6s linear infinite;
  animation-delay: inherit;
}

.maw-shell .studio-skel-block-wide { width: 180px; }

.maw-shell .studio-skel-strip .studio-skel-cap { display: none; }

.maw-shell .studio-skel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  animation: mawstudio-fadein .5s ease both;
  animation-delay: inherit;
}

.maw-shell .studio-skel-card .studio-skel-rank {
  width: 15px;
  height: 15px;
  border-radius: 4px;
}

.maw-shell .studio-skel-cardlines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.maw-shell .studio-skel-thin { height: 6px; }

/* ===== Design Studies (Screen / Optimize / Solve / Augment) ===== */
.maw-shell .studio-card-study { display: flex; flex-direction: column; }
.maw-shell .studio-study-body { padding: 4px 2px 2px; }
.maw-shell .studio-study-intro {
    max-width: 640px;
    padding: 18px 20px;
    border: 1px dashed var(--line, #d9d2c4);
    border-radius: 10px;
    background: var(--surface-2, #faf7f0);
}
.maw-shell .studio-study-intro p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-mut, #6b6559);
}

/* Explore run controls — inline DOE size (replaced the Advanced toggle/panel) */
.maw-shell .studio-adv-count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mut, #6b6559); white-space: nowrap; }
.maw-shell .studio-adv-count input[type="number"] { width: 56px; padding: 3px 6px; border: 1px solid var(--line, #d9d2c4); border-radius: 6px; font-size: 12px; }
.maw-shell .studio-adv-runopts { display: flex; gap: 12px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-adv-runopts select { padding: 3px 6px; border: 1px solid var(--line, #d9d2c4); border-radius: 6px; font-size: 12px; }

/* ===== Solve (Simulated Annealing) tab ===== */
.maw-shell .studio-solve-controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.maw-shell .studio-solve-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mut, #8a8579); }
.maw-shell .studio-solve-controls select { padding: 6px 8px; border: 1px solid var(--line, #d9d2c4); border-radius: 7px; font-size: 13px; min-width: 200px; text-transform: none; font-weight: 400; }
.maw-shell .studio-solve-result { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
.maw-shell .studio-solve-optimum { padding: 16px 18px; border-radius: 12px; background: var(--surface-2, #faf7f0); border: 1px solid var(--line, #d9d2c4); }
.maw-shell .studio-solve-optimum.is-beat { border-color: #2e8f5e; background: rgba(46,143,94,0.06); }
.maw-shell .studio-solve-optlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mut, #8a8579); }
.maw-shell .studio-solve-optval { font-size: 30px; font-weight: 700; color: var(--navy, #16233d); font-variant-numeric: tabular-nums; margin: 4px 0; }
.maw-shell .studio-solve-optimum.is-beat .studio-solve-optval { color: #2e8f5e; }
.maw-shell .studio-solve-optdelta { font-size: 12.5px; color: var(--ink-mut, #6b6559); line-height: 1.4; }
.maw-shell .studio-solve-params { border-collapse: collapse; width: 100%; font-size: 13px; }
.maw-shell .studio-solve-params th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-mut, #8a8579); padding: 4px 10px; border-bottom: 1px solid var(--line, #d9d2c4); }
.maw-shell .studio-solve-params td { padding: 5px 10px; border-bottom: 1px solid var(--line-soft, #ece7dc); font-variant-numeric: tabular-nums; }
.maw-shell .studio-solve-params td:first-child { color: var(--ink-mut, #6b6559); }
.maw-shell .studio-solve-actions { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.maw-shell .studio-solve-submitok { font-size: 12.5px; color: #2e8f5e; }

/* ===== Optimize (Pareto front) tab ===== */
.maw-shell .studio-opt-summary { font-size: 13px; color: var(--ink-mut, #6b6559); margin: 10px 2px; }
.maw-shell .studio-pareto-viz { min-height: 380px; }
/* Drive objectives from the studio-level controls, not the widget's own. */
.maw-shell .studio-pareto-viz .pareto-explorer-controls { display: none; }
.maw-shell .studio-pareto-viz .pareto-explorer-body { display: flex; gap: 18px; align-items: flex-start; }
.maw-shell .studio-pareto-viz .pareto-explorer-chart { flex: 1 1 auto; min-width: 0; }
.maw-shell .studio-pareto-viz .pareto-explorer-detail { flex: 0 0 240px; font-size: 12.5px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-pareto-viz svg { max-width: 100%; }

/* ===== Screen (Taguchi factor screening) tab ===== */
.maw-shell .studio-screen-note { font-size: 12.5px; color: var(--ink-mut, #6b6559); margin: 10px 2px 14px; }
.maw-shell .studio-screen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.maw-shell .studio-screen-factor { border: 1px solid var(--line, #d9d2c4); border-radius: 10px; padding: 8px 8px 4px; background: var(--surface-2, #faf7f0); }
.maw-shell .studio-screen-factitle { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--navy, #16233d); margin-bottom: 2px; }
.maw-shell .studio-screen-delta { font-size: 11px; font-weight: 600; color: #c2562f; font-variant-numeric: tabular-nums; }
.maw-shell .studio-screen-optimum { margin-top: 20px; max-width: 380px; }
.maw-shell .studio-screen-optlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mut, #8a8579); margin-bottom: 6px; }

/* ===== Augment (Meta-Model) tab ===== */
.maw-shell .studio-augment-steps { list-style: none; margin: 14px 0; padding: 0; }
.maw-shell .studio-augment-steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--ink-mut, #8a8579); }
.maw-shell .studio-augment-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line, #d9d2c4); background: transparent; flex: 0 0 auto; }
.maw-shell .studio-augment-steps li.is-active { color: var(--navy, #16233d); font-weight: 600; }
.maw-shell .studio-augment-steps li.is-active .studio-augment-dot { border-color: #c2562f; background: #c2562f; animation: mawstudio-shimmer 1.2s ease-in-out infinite; }
.maw-shell .studio-augment-steps li.is-done { color: var(--ink, #2a251d); }
.maw-shell .studio-augment-steps li.is-done .studio-augment-dot { border-color: #2e8f5e; background: #2e8f5e; }
.maw-shell .studio-augment-panel { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin: 10px 0; }
.maw-shell .studio-augment-model { padding: 16px 18px; border-radius: 12px; background: var(--surface-2, #faf7f0); border: 1px solid var(--line, #d9d2c4); min-width: 200px; }
.maw-shell .studio-augment-mlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mut, #8a8579); }
.maw-shell .studio-augment-mval { font-size: 28px; font-weight: 700; color: var(--navy, #16233d); font-variant-numeric: tabular-nums; margin: 4px 0; }
.maw-shell .studio-augment-mmeta { font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-augment-clabel { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mut, #8a8579); margin-bottom: 4px; }
.maw-shell .studio-augment-noscatter { font-size: 12.5px; color: var(--ink-mut, #8a8579); font-style: italic; align-self: center; }
.maw-shell .studio-augment-algos { max-width: 340px; margin-bottom: 14px; }
.maw-shell .studio-augment-expand { font-size: 13px; color: var(--ink-mut, #6b6559); padding: 12px 14px; border-left: 3px solid #2e8f5e; background: rgba(46,143,94,0.05); border-radius: 0 8px 8px 0; }

.maw-shell .studio-augment-bars { display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.maw-shell .studio-augment-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.maw-shell .studio-augment-barname { flex: 0 0 100px; color: var(--ink-mut, #6b6559); text-align: right; font-variant-numeric: tabular-nums; }
.maw-shell .studio-augment-bartrack { flex: 1 1 auto; height: 10px; background: var(--line-soft, #ece7dc); border-radius: 5px; overflow: hidden; }
.maw-shell .studio-augment-barfill { display: block; height: 100%; background: var(--navy, #16233d); border-radius: 5px; }

/* ================= Lifecycle restructure (2026-07-20) — spine ================= */
/* Stage-number badge in the tab buttons */
.maw-shell .studio-tab-num { font-family: var(--font-mono); font-size: 9.5px; opacity: .7; margin-right: 1px; }
.maw-shell .studio-tab-btn.is-active .studio-tab-num { opacity: .9; }

/* Explore strategy selector (Adaptive Infill | Pareto | SA | Meta-model) */
.maw-shell .studio-strategy-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 14px; }
.maw-shell .studio-strategy-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-strategy-select { flex: 1 1 auto; max-width: 460px; padding: 7px 11px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 8px; background: var(--paper, #fffdf9); color: var(--navy, #16233d); font-size: 12.5px; font-weight: 600; }
.maw-shell .studio-strategy-panel { display: block; }

/* ---- Root Cause stage ---- */
/* Root Cause pane scrolls as one page: the leaders strip, setup, evidence and the handoff card stay in flow, so the handoff never covers the load path / contacts cards. */
.maw-shell .studio-rc-setup { padding: 12px 14px; margin-bottom: 14px; flex: none; }
.maw-shell .studio-rc-setup-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.maw-shell .studio-rc-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-rc-field select { margin-top: 2px; min-width: 220px; padding: 6px 10px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 7px; background: var(--paper, #fffdf9); color: var(--navy, #16233d); font-family: inherit; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.maw-shell .studio-rc-run { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; background: linear-gradient(100deg, var(--indigo, #5560b8), var(--orange, #c2562f)); color: #fff; font-size: 12.5px; font-weight: 700; }
.maw-shell .studio-rc-run[disabled] { opacity: .5; cursor: default; }
.maw-shell .studio-rc-status { font-size: 11.5px; color: var(--ink-mut, #6b6559); margin-left: auto; }
.maw-shell .studio-rc-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; align-items: start; }
@media (max-width: 1040px) { .maw-shell .studio-rc-body { grid-template-columns: 1fr; } }
.maw-shell .studio-rc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.maw-shell .studio-rc-card { padding: 14px 15px; }
.maw-shell .studio-rc-panel { min-height: 8px; }
.maw-shell .studio-rc-bridge { border: 1.5px solid var(--indigo, #5560b8); margin-top: 14px; }
.maw-shell .studio-rc-bridge .studio-card-kicker { color: var(--indigo, #5560b8); }
/* The bridge card is a plain .studio-card (not .studio-rc-card), so its body panel
   gets no padding from the card — inset the content so text + button clear the edge. */
.maw-shell .studio-rc-bridge .studio-rc-panel { padding: 14px 15px; }
.maw-shell .studio-rc-spin { display: inline-flex; align-items: center; gap: 7px; color: var(--indigo, #5560b8); font-weight: 600; }
.maw-shell .studio-rc-spin::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-hi, #d4c9b3); border-top-color: var(--indigo, #5560b8); animation: mawstudio-rcspin .7s linear infinite; }
@keyframes mawstudio-rcspin { to { transform: rotate(360deg); } }
.maw-shell .studio-rc-err { color: #b3452a; font-weight: 600; }

/* physics panels — ranked peak bars (matsum / secforc / rcforc) */
.maw-shell .studio-rc-bars { display: flex; flex-direction: column; gap: 5px; }
.maw-shell .studio-rc-bar-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.maw-shell .studio-rc-bar-row.is-top .studio-rc-bar-name { font-weight: 700; color: var(--navy, #16233d); }
.maw-shell .studio-rc-bar-name { flex: 0 0 92px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rc-bar-track { flex: 1 1 auto; height: 11px; background: var(--line-soft, #ece7dc); border-radius: 6px; overflow: hidden; }
.maw-shell .studio-rc-bar-fill { display: block; height: 100%; border-radius: 6px; opacity: .55; }
.maw-shell .studio-rc-bar-row.is-top .studio-rc-bar-fill { opacity: 1; }
.maw-shell .studio-rc-bar-val { flex: 0 0 118px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink, #2a251d); }
.maw-shell .studio-rc-bar-unit { color: var(--ink-dim, #9c9480); font-size: 10.5px; }
.maw-shell .studio-rc-bar-pct { color: var(--indigo, #5560b8); font-weight: 700; margin-left: 3px; }

/* diagnosis panel */
.maw-shell .studio-rc-diag { display: flex; flex-direction: column; gap: 8px; }
.maw-shell .studio-rc-diag-badge { align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.maw-shell .studio-rc-diag-dominant .studio-rc-diag-badge { background: rgba(179,69,42,.12); color: #b3452a; }
.maw-shell .studio-rc-diag-moderate .studio-rc-diag-badge { background: rgba(194,86,47,.12); color: #c2562f; }
.maw-shell .studio-rc-diag-distributed .studio-rc-diag-badge { background: rgba(46,143,94,.14); color: #2e8f5e; }
.maw-shell .studio-rc-diag-lead { font-size: 14px; line-height: 1.5; color: var(--ink, #2a251d); }
.maw-shell .studio-rc-diag-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rc-diag-sub { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line, #d9d2c4); }
.maw-shell .studio-rc-diag-subhead { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim, #9c9480); margin-bottom: 4px; }
.maw-shell .studio-rc-diag-subbody { font-size: 12.5px; line-height: 1.55; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rc-diag-subbody code { font-family: var(--font-mono); font-size: 11px; background: var(--line-soft, #ece7dc); padding: 1px 5px; border-radius: 4px; }

.maw-shell .studio-rc-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.maw-shell .studio-rc-chip-sens { background: rgba(85,96,184,.1); color: var(--indigo, #5560b8); }
.maw-shell .studio-rc-launch { background: linear-gradient(100deg, var(--indigo, #5560b8), var(--orange, #c2562f)); color: #fff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.maw-shell .studio-rc-launch:hover { filter: brightness(1.05); }


/* ---- Survey stage ---- */
.maw-shell .studio-card-survey { padding: 14px 15px; }
.maw-shell .studio-survey-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.maw-shell .studio-survey-body { min-height: 120px; }
.maw-shell .studio-survey-field { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-survey-response { padding: 6px 10px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 7px; background: var(--paper, #fffdf9); color: var(--navy, #16233d); font-family: inherit; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.maw-shell .studio-survey-svg { display: block; width: 100%; height: auto; max-height: 420px; }
.maw-shell .studio-survey-grid { stroke: var(--line-soft, #ece7dc); stroke-width: 1; }
.maw-shell .studio-survey-ytick, .maw-shell .studio-survey-xtick, .maw-shell .studio-survey-xnum { fill: var(--ink-mut, #8a8579); font-size: 10px; font-family: var(--font-mono); }
.maw-shell .studio-survey-xnum { fill: var(--ink-dim, #9c9480); font-size: 9px; }
.maw-shell .studio-survey-target { stroke: #b3452a; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.maw-shell .studio-survey-targetlbl { fill: #b3452a; font-size: 10px; font-weight: 600; font-family: var(--font-mono); }
.maw-shell .studio-survey-sofar { stroke: #2e8f5e; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.maw-shell .studio-survey-line { stroke: var(--navy, #16233d); stroke-width: 2.4; }
/* All-KPIs view: one line per KPI on the relative axis + legend chips. */
.maw-shell .studio-survey-kline { stroke-width: 2; opacity: .85; transition: opacity .15s, stroke-width .15s; }
.maw-shell .studio-survey-kdot { opacity: .9; transition: opacity .15s; cursor: pointer; }
.maw-shell .studio-survey-kline.is-hover { stroke-width: 3.2; opacity: 1; }
.maw-shell .studio-survey-kline.is-dim { opacity: .12; }
.maw-shell .studio-survey-kdot.is-hover { opacity: 1; }
.maw-shell .studio-survey-kdot.is-dim { opacity: .1; }
.maw-shell .studio-survey-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.maw-shell .studio-survey-xnotch { stroke: var(--line-hi, #d4c9b3); stroke-width: 1; }
.maw-shell .studio-survey-xtick.studio-survey-tipel { cursor: default; }
.maw-shell .studio-survey-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 10px; }
.maw-shell .studio-survey-legchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-mut, #6b6559); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; cursor: pointer; transition: border-color .15s, background .15s, opacity .15s; }
.maw-shell .studio-survey-legchip:hover, .maw-shell .studio-survey-legchip.is-hover { border-color: var(--line-hi, #d4c9b3); background: var(--surface-2, #faf7f0); color: var(--ink, #2a251d); }
.maw-shell .studio-survey-legchip.is-off { opacity: .42; }
.maw-shell .studio-survey-legchip.is-off .studio-survey-legdot { background: var(--ink-dim, #9c9480) !important; }
.maw-shell .studio-survey-legdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.maw-shell .studio-survey-legchip b { font-variant-numeric: tabular-nums; }
.maw-shell .studio-survey-legchip b.is-up { color: #2e8f5e; }
.maw-shell .studio-survey-legchip b.is-down { color: #b3452a; }
.maw-shell .studio-survey-worse { color: #b3452a; font-weight: 700; }
.maw-shell .studio-survey-dot { fill: var(--orange, #c2562f); stroke: var(--paper, #fffdf9); stroke-width: 1.5; }
.maw-shell .studio-survey-legend { display: flex; gap: 16px; margin: 8px 0 4px; font-size: 11px; color: var(--ink-mut, #6b6559); flex-wrap: wrap; }
.maw-shell .studio-survey-lg { display: inline-flex; align-items: center; gap: 6px; }
.maw-shell .studio-survey-lg::before { content: ''; width: 16px; height: 0; border-top-width: 2.4px; border-top-style: solid; }
.maw-shell .studio-survey-lg-line::before { border-top-color: var(--navy, #16233d); }
.maw-shell .studio-survey-lg-sofar::before { border-top-color: #2e8f5e; border-top-style: dashed; }
.maw-shell .studio-survey-lg-target::before { border-top-color: #b3452a; border-top-style: dashed; }

.maw-shell .studio-survey-verdict { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.maw-shell .studio-survey-verdict-good { background: rgba(46,143,94,.09); border-left: 3px solid #2e8f5e; color: var(--ink, #2a251d); }
.maw-shell .studio-survey-verdict-warn { background: rgba(194,86,47,.09); border-left: 3px solid #c2562f; color: var(--ink, #2a251d); }
.maw-shell .studio-survey-verdict-single { background: var(--surface-2, #faf7f0); border-left: 3px solid var(--line-hi, #d4c9b3); color: var(--ink-mut, #6b6559); }
.maw-shell .studio-survey-goto { margin-left: auto; background: var(--paper, #fffdf9); border: 1px solid var(--line-hi, #d4c9b3); color: var(--navy, #16233d); padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.maw-shell .studio-survey-goto:hover { border-color: var(--indigo, #5560b8); color: var(--indigo, #5560b8); }

/* Survey metric cards: contributor + pacing stats under the trend card. */
.maw-shell .studio-survey-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.maw-shell .studio-svm-card { background: var(--panel, #fffefb); border: 1px solid var(--line, #e2dbcc); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 14px 16px; min-height: 108px; }
.maw-shell .studio-svm-big { font-size: 24px; font-weight: 700; color: var(--navy, #16233d); font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.2; }
.maw-shell .studio-svm-big-sm { font-size: 16.5px; }
.maw-shell .studio-svm-sub { font-size: 11.5px; color: var(--ink-mut, #6b6559); margin-top: 4px; line-height: 1.45; }
.maw-shell .studio-svm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.maw-shell .studio-svm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-mut, #6b6559); background: var(--surface-2, #faf7f0); border: 1px solid var(--line, #e2dbcc); border-radius: 999px; padding: 2px 9px; }
.maw-shell .studio-svm-chip b { color: var(--navy, #16233d); font-weight: 600; }
.maw-shell .studio-svm-chip.studio-svm-more { opacity: .7; }

/* ---- Register stage (the on-ramp) ---- */
/* Tab badge — count of finished sims not yet registered/scored. */
.maw-shell .studio-tab-btn { position: relative; }
.maw-shell .studio-tab-badge { display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 5px; height: 16px; line-height: 16px; border-radius: 8px; background: var(--orange, #c2562f); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-align: center; vertical-align: middle; }
.maw-shell .studio-tab-btn.is-active .studio-tab-badge { background: rgba(255,255,255,.28); }
.maw-shell .studio-tab-badge.is-hidden { display: none; }

/* Register pane: pinned header card + scrollable candidate list (mirrors RC). */
.maw-shell .studio-pane[data-pane="register"].is-active { display: flex; flex-direction: column; overflow: hidden; }
.maw-shell .studio-reg-head { padding: 14px 16px; margin-bottom: 14px; flex: none; }
.maw-shell .studio-reg-head-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.maw-shell .studio-reg-target { min-width: 0; flex: 1 1 auto; }
.maw-shell .studio-reg-target h3 { margin: 2px 0 0; font-size: 16px; color: var(--navy, #16233d); font-weight: 700; }
.maw-shell .studio-reg-sub { font-size: 11.5px; color: var(--ink-mut, #6b6559); margin-top: 3px; }
.maw-shell .studio-reg-warn { color: #b3452a; font-weight: 600; }
.maw-shell .studio-reg-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.maw-shell .studio-reg-scope { padding: 7px 11px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 8px; background: var(--paper, #fffdf9); color: var(--navy, #16233d); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.maw-shell .studio-reg-refresh { display: inline-flex; align-items: center; gap: 6px; }
.maw-shell .studio-reg-refresh[disabled], .maw-shell .studio-reg-all[disabled] { opacity: .5; cursor: default; }
.maw-shell .studio-reg-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-reg-summary b { color: var(--navy, #16233d); font-family: var(--font-mono); }
.maw-shell .studio-reg-checking { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--indigo, #5560b8); }
.maw-shell .studio-reg-act-wait { color: var(--ink-mut, #6b6559); opacity: .55; }
.maw-shell .studio-reg-pending b { color: var(--orange, #c2562f); }
.maw-shell .studio-reg-dot { color: var(--line-hi, #d4c9b3); }
.maw-shell .studio-reg-notice { margin-top: 11px; padding: 8px 12px; border-radius: 8px; background: rgba(46,143,94,.09); border-left: 3px solid #2e8f5e; color: #23694a; font-size: 12.5px; font-weight: 600; }
.maw-shell .studio-reg-notice-err { background: rgba(179,69,42,.09); border-left-color: #b3452a; color: #8f341f; }
.maw-shell .studio-reg-stale-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; background: var(--orange-soft, rgba(194,86,47,.09)); border-left: 3px solid var(--orange, #c2562f); color: var(--ink, #2a251d); font-size: 12px; line-height: 1.45; }
.maw-shell .studio-reg-stale-text { flex: 1 1 auto; min-width: 0; }
.maw-shell .studio-reg-reall-stale { flex: none; border-color: var(--orange, #c2562f); color: var(--orange-strong, #a8461f); white-space: nowrap; }
.maw-shell .studio-reg-reall-stale:hover:not(:disabled) { background: var(--orange-soft, rgba(194,86,47,.09)); }
.maw-shell .studio-reg-reall-stale:disabled { opacity: .5; cursor: not-allowed; }

.maw-shell .studio-reg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; display: flex; flex-direction: column; gap: 7px; }
.maw-shell .studio-reg-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line, #e4dcc9); border-radius: 9px; background: var(--panel, #fffdf9); box-shadow: var(--shadow-sm); }
.maw-shell .studio-reg-row.is-scored-row { opacity: .72; }
.maw-shell .studio-reg-simcol { flex: 1 1 auto; min-width: 0; }
.maw-shell .studio-reg-simname { font-size: 12.5px; font-weight: 600; color: var(--navy, #16233d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .studio-reg-simmeta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim, #9c9480); margin-top: 2px; }
.maw-shell .studio-reg-badge { flex: none; padding: 3px 9px; border-radius: 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.maw-shell .studio-reg-badge.is-bound { background: rgba(79,70,229,.1); color: var(--indigo, #4f46e5); }
.maw-shell .studio-reg-badge.is-unbound { background: rgba(194,86,47,.12); color: var(--orange, #c2562f); }
.maw-shell .studio-reg-badge.is-scored { background: rgba(46,143,94,.12); color: #2e8f5e; }
.maw-shell .studio-reg-act { flex: none; display: flex; align-items: center; }
.maw-shell .studio-reg-act .maw-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.maw-shell .studio-reg-done { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #2e8f5e; }
.maw-shell .studio-reg-allset { display: flex; align-items: center; gap: 9px; padding: 20px; border: 1px dashed #7bbf9c; border-radius: 10px; background: rgba(46,143,94,.05); color: #23694a; font-size: 13px; font-weight: 600; }
.maw-shell .studio-reg-allset .fa { font-size: 17px; color: #2e8f5e; }

/* ---- Register B5: primary buttons, progress, selection, per-sim reasons ---- */
/* Primary-action treatment for the header buttons (they now carry maw-btn maw-primary,
   which the base .studio-reg-all was missing -> it rendered unstyled). Mirrors the
   Explore navy primaries. */
.maw-shell .studio-reg-actions .maw-btn.maw-primary { border-color: var(--navy); background: var(--navy); color: #fff; }
.maw-shell .studio-reg-actions .maw-btn.maw-primary:hover:not(:disabled),
.maw-shell .studio-reg-actions .maw-btn.maw-primary:focus:not(:disabled) { border-color: #22335a; background: #22335a; }
.maw-shell .studio-reg-actions .maw-btn:disabled { opacity: .5; cursor: not-allowed; }
.maw-shell .studio-reg-stop { border-color: #b3452a; color: #b3452a; }
.maw-shell .studio-reg-stop:hover:not(:disabled) { background: rgba(179,69,42,.08); border-color: #8f341f; }

/* Live progress bar (width tracks SETTLED items, not just successes). */
.maw-shell .studio-reg-progress { margin-top: 12px; }
.maw-shell .studio-reg-progress-track { height: 7px; border-radius: 5px; background: rgba(0,0,0,.07); overflow: hidden; }
.maw-shell .studio-reg-progress-track span { display: block; height: 100%; border-radius: 5px; background: var(--navy, #16233d); transition: width .25s ease; }
.maw-shell .studio-reg-progress.is-running .studio-reg-progress-track span { background: var(--indigo, #4f46e5); }
/* Terminal state: ink (near-black) bar + explicit headline, distinct from both
   the indigo running fill and the navy default even when some sims failed. */
.maw-shell .studio-reg-progress.is-done .studio-reg-progress-track span { background: var(--ink, #34302a); }
.maw-shell .studio-reg-progress-txt { margin-top: 6px; font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-reg-progress-txt b { color: var(--navy, #16233d); font-family: var(--font-mono); }
.maw-shell .reg-c-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ink, #34302a); }
.maw-shell .reg-c-done .fa { color: #2e8f5e; }
.maw-shell .studio-reg-progress.is-done .reg-c-done .fa-stop-circle { color: var(--orange, #c2562f); }
.maw-shell .reg-c-scored { color: #2e8f5e; font-weight: 600; }
.maw-shell .reg-c-partial { color: var(--orange, #c2562f); font-weight: 600; }
.maw-shell .reg-c-failed { color: #b3452a; font-weight: 600; }

/* Selection toolbar + row checkboxes. */
.maw-shell .studio-reg-selbar { display: flex; align-items: center; gap: 12px; padding: 2px 4px 11px; font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-reg-selall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; font-weight: 600; }
.maw-shell .studio-reg-clearsel { border: none; background: none; color: var(--indigo, #4f46e5); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.maw-shell .studio-reg-clearsel:disabled { opacity: .5; cursor: not-allowed; }
.maw-shell .studio-reg-checkcell { flex: none; display: flex; align-items: center; margin: 0; cursor: pointer; }
.maw-shell .studio-reg-check { cursor: pointer; width: 15px; height: 15px; }
.maw-shell .studio-reg-check:disabled { cursor: not-allowed; }
.maw-shell .studio-reg-simcol { flex: 1 1 auto; min-width: 0; }
.maw-shell .studio-reg-row.is-selected { border-color: var(--indigo, #4f46e5); box-shadow: 0 0 0 1px var(--indigo, #4f46e5) inset, var(--shadow-sm); }

/* Outcome badges + per-sim reason line (the "why it can't register" surface). */
.maw-shell .studio-reg-badge.is-rerun { background: rgba(179,69,42,.12); color: #b3452a; }
.maw-shell .studio-reg-badge.is-partial { background: rgba(194,86,47,.14); color: var(--orange-strong, #a8461f); }
.maw-shell .studio-reg-badge.is-error { background: rgba(179,69,42,.14); color: #8f341f; }
.maw-shell .studio-reg-reason { margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--ink-mut, #6b6559); max-width: 660px; }
.maw-shell .studio-reg-reason.is-rerun { color: #b3452a; }
.maw-shell .studio-reg-reason.is-partial { color: var(--orange-strong, #a8461f); }
.maw-shell .studio-reg-reason.is-error { color: #8f341f; }
.maw-shell .studio-reg-plan { display: inline-block; padding: 2px 7px; border: 1px solid var(--line-hi, #d4c9b3); border-radius: 10px; background: var(--surface-2, #faf7f0); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }

/* ==== Root Cause — holistic per-KPI layer (P39/P2) ======================= */
/* Winners strip */
.maw-shell .studio-rcw-body { display: flex; flex-direction: column; gap: 4px; }
.maw-shell .studio-rcw-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--d3v-border, #e3e6ec); border-radius: 8px; cursor: pointer; }
.maw-shell .studio-rcw-row:hover { background: rgba(60, 80, 140, 0.05); }
.maw-shell .studio-rcw-row.is-sel { border-color: #16233d; background: rgba(22, 35, 61, 0.06); }
.maw-shell .studio-rcw-kpi { font-weight: 600; font-size: 12.5px; min-width: 160px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .studio-rcw-score { min-width: 34px; text-align: center; border-radius: 6px; font-weight: 700; font-size: 12px; padding: 2px 0; }
.maw-shell .studio-rcw-score--good { background: #e2f2e6; color: #2e6b3f; }
.maw-shell .studio-rcw-score--warn { background: #fdf1dc; color: #8a6116; }
.maw-shell .studio-rcw-score--bad { background: #fbe4e1; color: #a03428; }
.maw-shell .studio-rcw-sim { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #2a3550; }
.maw-shell .studio-rcw-sm { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #45536f; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .studio-rcw-n { font-size: 11px; color: #7a849b; white-space: nowrap; }
.maw-shell .studio-rcw-diag { font-size: 11.5px; padding: 3px 10px; }

/* Explain row: association + relationship side by side */
.maw-shell .studio-rc-explain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .maw-shell .studio-rc-explain { grid-template-columns: 1fr; } }
.maw-shell .studio-rc-explain .is-hidden { display: none; }

/* Association table */
.maw-shell .studio-assoc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.maw-shell .studio-assoc-table th { text-align: left; font-size: 11px; color: #7a849b; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--d3v-border, #e3e6ec); }
.maw-shell .studio-assoc-table td { padding: 5px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.maw-shell .studio-assoc-table tr.is-top td { font-weight: 600; }
.maw-shell .studio-assoc-sm { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .studio-assoc-trackcell { width: 30%; }
.maw-shell .studio-assoc-track { display: block; height: 6px; border-radius: 3px; background: #eef1f6; overflow: hidden; }
.maw-shell .studio-assoc-fill { display: block; height: 100%; background: #16233d; border-radius: 3px; }
.maw-shell .studio-assoc-note { margin-top: 8px; font-size: 11.5px; color: #7a849b; line-height: 1.45; }

/* Relationship panel */
.maw-shell .studio-rel-intro { font-size: 12.5px; color: #2a3550; margin-bottom: 10px; line-height: 1.5; }
.maw-shell .studio-rel-chip { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #eef1f6; color: #45536f; margin: 0 2px; }
.maw-shell .studio-rel-meta { font-size: 12px; color: #45536f; margin-bottom: 10px; line-height: 1.5; }
.maw-shell .studio-rel-sliderrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.maw-shell .studio-rel-pname { min-width: 120px; font-size: 12px; color: #2a3550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .studio-rel-slider { flex: 1; }
.maw-shell .studio-rel-pval { min-width: 70px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: #16233d; }
.maw-shell .studio-rel-pred { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--d3v-border, #e3e6ec); font-size: 13px; color: #2a3550; }
.maw-shell .studio-rel-predval { font-weight: 700; font-size: 15px; }
.maw-shell .studio-rel-predval--pass { color: #2e6b3f; }
.maw-shell .studio-rel-predval--warn { color: #8a6116; }
.maw-shell .studio-rel-predval--crit { color: #a03428; }
.maw-shell .studio-rel-limit { font-size: 11.5px; color: #7a849b; }
.maw-shell .studio-rel-busy { padding: 10px 0; }

/* ==== Explore — Generate strategy (P39/P3) =============================== */
.maw-shell .studio-gen-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.maw-shell .studio-gen-controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #45536f; }
.maw-shell .studio-gen-controls select { max-width: 320px; }
.maw-shell .studio-gen-n { width: 58px; }
.maw-shell .studio-gen-advice { font-size: 12px; color: #2e6b3f; background: #e9f4ec; border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; }
.maw-shell .studio-gen-advice.is-warn { color: #8a6116; background: #fdf1dc; }
.maw-shell .studio-gen-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.maw-shell .studio-gen-card { border: 1px solid var(--d3v-border, #e3e6ec); border-radius: 8px; padding: 10px; }
.maw-shell .studio-gen-cardhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.maw-shell .studio-gen-cardname { font-weight: 600; font-size: 12.5px; flex: 1; }
.maw-shell .studio-gen-params { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.maw-shell .studio-gen-params td { padding: 2px 4px; border-bottom: 1px solid rgba(0,0,0,.04); }
.maw-shell .studio-gen-params td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.maw-shell .studio-gen-resp { margin-top: 6px; font-size: 11.5px; color: #45536f; }

/* Sensor sanity flag (Benchmark leaderboard + Register rows): a KPI value 10x off the cohort median. */
.maw-shell .studio-sensor-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border-radius: 10px; background: rgba(194,86,47,.12); color: var(--orange-strong, #a8461f); font-size: 10.5px; font-weight: 700; cursor: help; }

/* Survey: runs without a KPI row yet (solving / pending / failed), per submitted round. */
.maw-shell .studio-survey-states { margin-top: 12px; font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-survey-states-head { font-weight: 700; margin-bottom: 4px; }
.maw-shell .studio-survey-state { padding: 4px 0; }
.maw-shell .studio-survey-state-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 8px; background: var(--panel-soft, #f3efe7); }
.maw-shell .studio-survey-state.is-failed { color: #8f341f; }
.maw-shell .studio-survey-state.is-failed .studio-survey-state-tag { background: rgba(179,69,42,.14); }

/* ---- Phase 49: Root Cause cohort cards, Send to Explore, Candidates board, Survey rounds ---- */
.maw-shell .studio-rcsep-card, .maw-shell .studio-rcdrv-card, .maw-shell .studio-rccons-card { margin-top: 14px; }
.maw-shell .studio-rcsep-body, .maw-shell .studio-rcdrv-body, .maw-shell .studio-rccons-body { padding: 0 15px 14px; display: flex; flex-direction: column; gap: 12px; }
.maw-shell .studio-rcsep { border-left: 3px solid var(--indigo, #5560b8); padding: 8px 0 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.maw-shell .studio-rcsep-head { font-size: 13px; color: var(--navy, #16233d); }
.maw-shell .studio-rcsep-unit, .maw-shell .studio-rcsep-limit, .maw-shell .studio-rcsep-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-rcsep-leaders { font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rcsep-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.4fr) 220px; gap: 12px; align-items: center; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--line-soft, #ece7dc); }
.maw-shell .studio-rcsep-ent { display: flex; flex-direction: column; min-width: 0; }
.maw-shell .studio-rcsep-ent b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy, #16233d); }
.maw-shell .studio-rcsep-ent span { font-size: 10.5px; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-rcsep-vals { font-variant-numeric: tabular-nums; color: var(--ink, #2a251d); line-height: 1.5; }
.maw-shell .studio-rcsep-svg { width: 220px; height: 58px; display: block; background: var(--panel-soft, #f3efe7); border-radius: 6px; }
.maw-shell .studio-rcsep-zero { stroke: var(--line-hi, #d4c9b3); stroke-width: 1; }
.maw-shell .studio-rcsep-nochart { font-size: 11px; color: var(--ink-dim, #9c9480); }
@media (max-width: 900px) { .maw-shell .studio-rcsep-row { grid-template-columns: 1fr; } }
.maw-shell .studio-rcdrv-table td, .maw-shell .studio-rccons-table td { white-space: normal; }
.maw-shell .studio-rcdrv-table .fa, .maw-shell .studio-rccons-cell .fa { font-size: 11px; }
.maw-shell .studio-rcdrv-none { color: var(--ink-dim, #9c9480); text-align: center; }
.maw-shell .studio-rcdrv-unlinked { font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rcdrv-unlinked summary { cursor: pointer; font-weight: 600; }
.maw-shell .studio-rccons-cell { text-align: center; font-variant-numeric: tabular-nums; color: var(--navy, #16233d); }
.maw-shell .studio-rccons-corr { font-size: 12px; color: var(--ink-mut, #6b6559); line-height: 1.5; }
.maw-shell .studio-rcx-list { display: flex; flex-direction: column; gap: 8px; }
.maw-shell .studio-rcx-sug { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.maw-shell .studio-rcx-line b { color: var(--navy, #16233d); }
.maw-shell .studio-rcx-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim, #9c9480); margin-left: 6px; }
.maw-shell .studio-rcx-ev { font-size: 11.5px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-rcx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.maw-shell .studio-rcx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.maw-shell .studio-rcx-note { font-size: 11.5px; color: var(--ink-dim, #9c9480); }
.maw-shell .studio-eng-body { padding: 0 15px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.maw-shell .studio-eng-dropped { font-size: 12px; color: #8f341f; }
.maw-shell .studio-cand-card { margin-top: 14px; }
.maw-shell .studio-cand-body { padding: 0 15px 14px; display: flex; flex-direction: column; gap: 12px; }
.maw-shell .studio-cand-row.is-submitted td { color: var(--ink-dim, #9c9480); }
.maw-shell .studio-cand-deltas { white-space: normal; font-variant-numeric: tabular-nums; }
.maw-shell .studio-cand-actions { text-align: right; }
.maw-shell .studio-cand-actions .fa-info-circle { color: var(--indigo, #5560b8); cursor: help; }
.maw-shell .studio-cand-remove { background: none; border: none; color: var(--ink-dim, #9c9480); cursor: pointer; padding: 0 4px; }
.maw-shell .studio-cand-remove:hover { color: #b3452a; }
.maw-shell .studio-cand-sub td { font-size: 12px; color: var(--ink-mut, #6b6559); white-space: normal; }
.maw-shell .studio-cand-sub.is-failed td { color: #8f341f; }
.maw-shell .studio-cand-state { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 8px; background: var(--panel-soft, #f3efe7); }
.maw-shell .studio-cand-diff { margin-top: 4px; border-collapse: collapse; font-size: 11.5px; }
.maw-shell .studio-cand-diff th, .maw-shell .studio-cand-diff td { padding: 2px 10px 2px 0; text-align: left; position: static; background: none; }
.maw-shell .studio-cand-diff tr.is-bad td { color: #b3452a; font-weight: 600; }
.maw-shell .studio-cand-compare { display: flex; flex-direction: column; gap: 10px; }
.maw-shell .studio-cand-legend { display: flex; gap: 14px; font-size: 11px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-cand-legend i { display: inline-block; width: 14px; height: 9px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.maw-shell .studio-cand-legend i.is-run { background: #c9c2b3; }
.maw-shell .studio-cand-legend i.is-champ { background: var(--orange, #c2562f); }
.maw-shell .studio-cand-legend i.is-cand { border: 1.5px dashed var(--indigo, #5560b8); }
.maw-shell .studio-cand-kpihead { font-size: 12px; font-weight: 600; color: var(--navy, #16233d); }
.maw-shell .studio-cand-svg { width: 100%; max-width: 560px; display: block; }
.maw-shell .studio-cand-bar.is-run { fill: #c9c2b3; }
.maw-shell .studio-cand-bar.is-champ { fill: var(--orange, #c2562f); }
.maw-shell .studio-cand-bar.is-cand { fill: none; stroke: var(--indigo, #5560b8); stroke-width: 1.5; stroke-dasharray: 4 3; }
.maw-shell .studio-cand-spread { stroke: var(--indigo, #5560b8); stroke-width: 1; }
.maw-shell .studio-cand-lbl, .maw-shell .studio-cand-val, .maw-shell .studio-cand-limlbl { font-size: 10px; fill: var(--ink-mut, #6b6559); }
.maw-shell .studio-cand-limit { stroke: #b3452a; stroke-width: 1.2; stroke-dasharray: 5 3; }
.maw-shell .studio-cand-limlbl { fill: #b3452a; }
.maw-shell .studio-cand-submitrow { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.maw-shell .studio-survey-rounds { margin-top: 12px; }
.maw-shell .studio-svr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 6px; color: var(--navy, #16233d); }
.maw-shell .studio-svr-note { font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-svr-kpi th { text-align: left; background: var(--panel-soft, #f3efe7); font-size: 12px; position: static; }
.maw-shell .studio-svr-verdict { font-weight: 500; font-size: 11.5px; margin-left: 8px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-svr-verdict.is-met { color: #2e6b45; }
.maw-shell .studio-svr-verdict.is-miss { color: #8f341f; }
.maw-shell .studio-svr-row[data-round]:not([data-round=""]) { cursor: pointer; }
.maw-shell .studio-svr-row.is-sel td { background: rgba(85,96,184,.08); font-weight: 600; }
.maw-shell .studio-svr-table td { font-variant-numeric: tabular-nums; }
.maw-shell .studio-acc { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.maw-shell .studio-acc-table td { font-variant-numeric: tabular-nums; }
.maw-shell .studio-acc-plots { display: flex; flex-wrap: wrap; gap: 14px; }
.maw-shell .studio-acc-svg { width: 180px; height: 180px; display: block; }
.maw-shell .studio-acc-diag { stroke: #b3452a; stroke-width: 1; stroke-dasharray: 4 3; }
.maw-shell .studio-acc-pt { fill: var(--indigo, #5560b8); fill-opacity: .75; }
.maw-shell .studio-acc-ax { font-size: 9.5px; fill: var(--ink-mut, #6b6559); }
.maw-shell .studio-acc-verdict { font-size: 12.5px; color: var(--navy, #16233d); }
.maw-shell .studio-acc-round { font-size: 12.5px; color: var(--navy, #16233d); margin-top: 6px; }
.maw-shell .studio-acc-arms { font-size: 12px; color: var(--ink-mut, #6b6559); }
.maw-shell .studio-acc-dir.is-hit { color: #2e6b45; }
.maw-shell .studio-acc-dir.is-miss { color: #8f341f; }
.maw-shell .studio-acc-band { stroke: #b3452a; stroke-width: 1; stroke-dasharray: 2 3; stroke-opacity: .55; }
.maw-shell .studio-acc-pt.is-outlier { fill: #b3452a; fill-opacity: 1; }
.maw-shell .studio-acc-outl { font-size: 12px; color: #8f341f; }
.maw-shell .studio-acc-err.is-within { color: #2e6b45; }
.maw-shell .studio-acc-err.is-beyond { color: #8f341f; font-weight: 600; }
.maw-shell .studio-acc-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; }
.maw-shell .studio-acc-picktitle { font-weight: 600; color: var(--navy, #16233d); }
.maw-shell .studio-acc-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* New studio tables flow with the page: no nested vertical scroll that swallows wheel events. */
.maw-shell .studio-ex-table.studio-ex-table--flow { max-height: none; overflow-x: auto; overflow-y: visible; }
.maw-shell .studio-ex-table.studio-ex-table--flow thead th { position: static; }
.maw-shell .studio-cand-add { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line-hi, #d4c9b3); border-radius: 9px; }
.maw-shell .studio-cand-addrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.maw-shell .studio-cand-addsel { max-width: 320px; }
.maw-shell .studio-cand-addval { width: 120px; }


/** Added by rahul.suri on 09/25/2026 - Honda Assembler Phase 56 - response surface card **/
.maw-shell .studio-rs-legend .studio-rs-ramp {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #30123b, #4686fb, #1be5b5, #a4fc3c, #fbb938, #e4460a, #7a0403);
}
.maw-shell .studio-card-surface .studio-rs-chart { min-height: 560px; }
.maw-shell .studio-rs-quad { fill-opacity: 0.78; stroke: rgba(255,255,255,0.18); stroke-width: 0.5; }
.maw-shell .studio-rs-stem { stroke: #8a8579; stroke-width: 1.4; stroke-opacity: 0.8; }
.maw-shell .studio-rs-stem.is-beats { stroke: #3f7f3d; }
.maw-shell .studio-rs-stem.is-worse { stroke: #c04a33; }

/** Updated by rahul.suri on 06/18/2026 - Honda Assembler detailing pass - mockup fidelity **/

/*
 * library.css - Assembler Workspace Library view styles
 *
 * Scoped to .maw-shell. References tokens from shell/tokens.css.
 * Atoms (.maw-chip, .maw-pill, .maw-btn) come from atoms.css.
 * No :root block. ASCII-only.
 *
 * Class inventory emitted by JS/TPL (self-check):
 *
 * Root:        .maw-library-app
 * Layout:      .lib-body, .lib-toolbar-slot, .lib-content,
 *              .lib-catalog-slot, .lib-right-slot
 *
 * Toolbar:     .lib-toolbar, .lib-type-tabs, .lib-ttab, .lib-ttab--active,
 *              .lib-ttab-dot, .lib-ttab-cnt,
 *              .lib-toolbar-right, .lib-search-wrap, .lib-search-input,
 *              .lib-cart-btn, .lib-cart-badge
 *
 * Catalog:     .lib-catalog, .lib-catalog-header, .lib-catalog-title,
 *              .lib-catalog-count, .lib-grid-container, .lib-grid, .lib-card,
 *              .lib-card--selected, .lib-card--incart,
 *              .lib-card-head, .lib-card-ic, .lib-card-meta,
 *              .lib-card-name, .lib-card-desc, .lib-src-chip,
 *              .lib-card-agent-badge,
 *              .lib-card-includes, .lib-inc-label, .lib-inc-pill, .lib-inc-has,
 *              .lib-card-footer, .lib-addcart-btn, .lib-addcart--incart,
 *              .lib-state, .lib-state--error, .lib-loading, .lib-empty,
 *              .lib-error-msg, .lib-retry, .lib-error
 *
 * Right panel: .lib-right, .lib-right-head, .lib-seg, .lib-seg-btn,
 *              .lib-seg-btn--active, .lib-seg-badge,
 *              .lib-tab-panel, .lib-tab-panel--active,
 *              .lib-tab-panel--preview, .lib-tab-panel--cart
 *
 * Preview tab: .lib-preview-body, .lib-pv-head, .lib-pv-ic, .lib-pv-name,
 *              .lib-pv-src, .lib-section, .lib-section-title, .lib-sec-cnt,
 *              .lib-def-note, .lib-rt-row, .lib-rt-name, .lib-rt-desc,
 *              .lib-rt-unit, .lib-rt-more,
 *              .lib-pv-discipline-row, .lib-pv-discipline-chip,
 *              .lib-pv-tags-row, .lib-pv-links-row,
 *              .lib-pv-link-btn, .lib-pv-btn-doc, .lib-pv-btn-ppt, .lib-pv-btn-vid,
 *              .lib-pv-add-btn, .lib-preview-footer,
 *              .lib-pv-empty, .lib-pv-empty-text
 *
 * Cart tab:    .lib-cart-body, .lib-cart-header-row, .lib-ch-title, .lib-ch-cnt,
 *              .lib-cart-items, .lib-cart-items--empty, .lib-cart-item,
 *              .lib-ci-top, .lib-ci-typedot, .lib-ci-type, .lib-ci-name,
 *              .lib-ci-remove, .lib-ci-note,
 *              .lib-cart-footer, .lib-cart-total, .lib-checkout-btn,
 *              .lib-traceable-note
 */

/* ============================================================
   Library page root
   ============================================================ */

.maw-shell .maw-library-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  min-height: 0;
}

/* ============================================================
   .lib-body -- full-height column (toolbar + content)
   ============================================================ */

.maw-shell .lib-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Toolbar slot -- LibraryView renders the type-tab bar here */
.maw-shell .lib-toolbar-slot {
  flex: none;
}

/* Two-column content area below the toolbar */
.maw-shell .lib-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left catalog column */
.maw-shell .lib-catalog-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  min-width: 0;
}

/* Right panel column */
.maw-shell .lib-right-slot {
  width: 360px;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  min-height: 0;
}

/* ============================================================
   TOOLBAR (type-tabs + search + cart button)
   ============================================================ */

.maw-shell .lib-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  height: 44px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  flex: none;
}

/* Type tabs row */
.maw-shell .lib-type-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

/* Individual type tab */
.maw-shell .lib-ttab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--ink-mut);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: .13s;
  white-space: nowrap;
  user-select: none;
}
.maw-shell .lib-ttab:hover {
  background: var(--panel-hover);
  color: var(--ink);
}
.maw-shell .lib-ttab--active {
  background: var(--orange-soft);
  border-color: var(--orange-bd);
  color: var(--orange-strong);
  font-weight: 600;
}

/* Color dot inside a tab */
.maw-shell .lib-ttab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

/* Count badge inside a tab */
.maw-shell .lib-ttab-cnt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--line);
  color: var(--ink-dim);
  font-weight: 600;
}
.maw-shell .lib-ttab--active .lib-ttab-cnt {
  background: var(--orange-bd);
  color: var(--orange-strong);
}

/* Right side: search + cart */
.maw-shell .lib-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.maw-shell .lib-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 180px;
}
.maw-shell .lib-search-wrap:focus-within {
  border-color: var(--indigo-bd);
}

.maw-shell .lib-search-input {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.maw-shell .lib-search-input::placeholder { color: var(--ink-dim); }

/* Cart button */
.maw-shell .lib-cart-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: .13s;
  user-select: none;
}
.maw-shell .lib-cart-btn:hover {
  background: #e0e7ff;
  border-color: var(--indigo);
}

/* Cart count badge inside the toolbar cart button */
.maw-shell .lib-cart-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  background: var(--indigo);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* ============================================================
   CATALOG GRID (CatalogGridView -- .lib-catalog root)
   ============================================================ */

.maw-shell .lib-catalog {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Catalog header (title + count) */
.maw-shell .lib-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 10px;
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.maw-shell .lib-model-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

.maw-shell .lib-model-subtab {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 22px;
}

.maw-shell .lib-model-subtab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.maw-shell .lib-catalog-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .lib-catalog-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

/* Scrollable grid container */
.maw-shell .lib-grid-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

/* Card grid layout -- two columns */
.maw-shell .lib-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   WORKFLOW CARD
   ============================================================ */

.maw-shell .lib-card {
  width: calc(50% - 6px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.maw-shell .lib-card:hover {
  border-color: var(--line-hi);
  box-shadow: var(--shadow);
}
.maw-shell .lib-card--selected {
  border-color: var(--indigo-bd);
  box-shadow: var(--shadow-sm);
}
.maw-shell .lib-card--incart {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
}

/* Card head: icon + meta */
.maw-shell .lib-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px 8px;
}

/* Entity icon block */
.maw-shell .lib-card-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
}

/* Meta: name + desc + chip */
.maw-shell .lib-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Card workflow name */
.maw-shell .lib-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Agent badge (inline in card name) */
.maw-shell .lib-card-agent-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--t-agent);
  color: #fff;
  white-space: nowrap;
  flex: none;
}

/* Truncated description */
.maw-shell .lib-card-desc {
  font-size: 11.5px;
  color: var(--ink-mut);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Source / category chip */
.maw-shell .lib-src-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-dim);
  margin-top: 3px;
  white-space: nowrap;
  align-self: flex-start;
}

/* Includes strip */
.maw-shell .lib-card-includes {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  flex-wrap: wrap;
}

.maw-shell .lib-inc-label {
  font-size: 10.5px;
  color: var(--ink-dim);
  font-weight: 600;
  letter-spacing: .2px;
  margin-right: 2px;
  white-space: nowrap;
}

/* Includes pill -- default = absent (dimmed border) */
.maw-shell .lib-inc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-dim);
  white-space: nowrap;
}
/* Present state */
.maw-shell .lib-inc-pill.lib-inc-has {
  border-color: var(--green-soft);
  background: var(--green-soft);
  color: var(--green);
}

/* Card footer: add-to-cart */
.maw-shell .lib-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 13px;
}

/* "Add to cart" / "In cart" button */
.maw-shell .lib-addcart-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 11px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
  user-select: none;
}
.maw-shell .lib-addcart-btn:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .lib-addcart-btn.lib-addcart--incart {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* ---- State containers (loading / empty / error) ---- */
.maw-shell .lib-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
  min-height: 200px;
}
.maw-shell .lib-state--error { color: var(--orange-strong); }
.maw-shell .lib-loading { color: var(--ink-dim); font-size: 13px; }
.maw-shell .lib-empty   { color: var(--ink-mut); font-size: 13px; }
.maw-shell .lib-error-msg {
  font-size: 11.5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  word-break: break-word;
  max-width: 320px;
}
.maw-shell .lib-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 14px;
  cursor: pointer;
}
.maw-shell .lib-retry:hover { background: var(--indigo-soft); }
.maw-shell .lib-error { padding: 20px; color: var(--orange); font-size: 13px; }

/* ============================================================
   RIGHT PANEL (PreviewPanelView -- .lib-right root)
   ============================================================ */

.maw-shell .lib-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

/* Segmented control header */
.maw-shell .lib-right-head {
  display: flex;
  align-items: center;
  padding: 10px 12px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--panel-soft);
}

.maw-shell .lib-seg {
  display: flex;
  gap: 0;
  background: var(--line);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: 10px;
  width: 100%;
}

.maw-shell .lib-seg-btn {
  flex: 1;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: .12s;
  white-space: nowrap;
  padding: 0 10px;
  user-select: none;
}
.maw-shell .lib-seg-btn:hover { color: var(--ink); }
.maw-shell .lib-seg-btn--active {
  background: var(--panel);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(60,48,28,.10);
}

/* Cart count badge inside segment button */
.maw-shell .lib-seg-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--indigo);
  color: #fff;
  border-radius: 8px;
  padding: 1px 5px;
  font-weight: 700;
}

/* Tab content panels */
.maw-shell .lib-tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.maw-shell .lib-tab-panel--active {
  display: flex;
}

/* ============================================================
   PREVIEW TAB
   ============================================================ */

.maw-shell .lib-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Entity header */
.maw-shell .lib-pv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .lib-pv-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}

.maw-shell .lib-pv-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.maw-shell .lib-pv-src {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* Section block */
.maw-shell .lib-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maw-shell .lib-section-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--ink-dim);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
}

.maw-shell .lib-sec-cnt {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-mut);
  background: var(--line);
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Callout note (definition / fidelity gap note) */
.maw-shell .lib-def-note {
  font-size: 11.5px;
  color: var(--ink-mut);
  line-height: 1.5;
  padding: 7px 9px;
  background: var(--panel-soft);
  border-left: 3px solid var(--orange-bd);
  border-radius: 4px;
}

/* Response template row */
.maw-shell .lib-rt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 12px;
  color: var(--ink-mut);
}
.maw-shell .lib-rt-row:last-child { border-bottom: none; }
.maw-shell .lib-rt-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}
.maw-shell .lib-rt-desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.maw-shell .lib-rt-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  white-space: nowrap;
  margin-left: auto;
}
.maw-shell .lib-rt-more {
  font-size: 11px;
  color: var(--ink-dim);
  font-style: italic;
  padding: 3px 0;
}

/* Disciplines pill row */
.maw-shell .lib-pv-discipline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.maw-shell .lib-pv-discipline-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-hi);
  background: var(--blue-soft);
  color: var(--blue);
}

/* Tags row */
.maw-shell .lib-pv-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Resource links row */
.maw-shell .lib-pv-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.maw-shell .lib-pv-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mut);
  cursor: pointer;
  transition: .12s;
  outline: none;
}
.maw-shell .lib-pv-link-btn:hover {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* Preview footer: Add to cart button */
.maw-shell .lib-preview-footer {
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  flex: none;
}
.maw-shell .lib-pv-add-btn {
  width: 100%;
  justify-content: center;
}

/* Empty state (no selection in preview tab) */
.maw-shell .lib-pv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
}
.maw-shell .lib-pv-empty-text {
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ============================================================
   CART TAB
   ============================================================ */

.maw-shell .lib-cart-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Cart header row (title + item count) */
.maw-shell .lib-cart-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .lib-ch-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
}
.maw-shell .lib-ch-cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 8px;
  padding: 1px 6px;
}

/* Cart items scroll list */
.maw-shell .lib-cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Individual cart item */
.maw-shell .lib-cart-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.maw-shell .lib-cart-item:hover { background: var(--panel-hover); }

/* Item top row: typedot + type + name + src + remove */
.maw-shell .lib-ci-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.maw-shell .lib-ci-typedot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.maw-shell .lib-ci-type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-dim);
  font-weight: 600;
  min-width: 64px;
  white-space: nowrap;
}
.maw-shell .lib-ci-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .lib-ci-state {
  flex: none;
  border-radius: 999px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
.maw-shell .lib-ci-state--done {
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .lib-ci-state--error {
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .lib-ci-remove {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex: none;
  transition: .1s;
}
.maw-shell .lib-ci-remove:hover {
  background: var(--orange-soft);
  color: var(--orange-strong);
}

/* Item description snippet */
.maw-shell .lib-ci-note {
  font-size: 11px;
  color: var(--ink-dim);
  font-style: italic;
  padding-left: 18px;
}
.maw-shell .lib-ci-note--error {
  color: var(--orange-strong);
  font-style: normal;
}

/* Import progress */
.maw-shell .lib-import-progress {
  flex: none;
  margin: 11px 13px 0;
  padding: 11px;
  border: 1px solid var(--indigo-bd);
  border-radius: 8px;
  background: var(--indigo-soft);
}
.maw-shell .lib-import-progress--complete {
  border-color: rgba(22, 163, 74, .28);
  background: var(--green-soft);
}
.maw-shell .lib-import-progress--error {
  border-color: rgba(194, 86, 47, .32);
  background: var(--orange-soft);
}
.maw-shell .lib-import-progress-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.maw-shell .lib-import-progress-title {
  min-width: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .lib-import-progress-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.maw-shell .lib-import-progress-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
}
.maw-shell .lib-import-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--indigo-2), var(--indigo));
  transition: width .18s ease;
}
.maw-shell .lib-import-progress--complete .lib-import-progress-fill {
  background: var(--green);
}
.maw-shell .lib-import-progress--error .lib-import-progress-fill {
  background: var(--orange-strong);
}
.maw-shell .lib-import-progress-current {
  margin-top: 7px;
  color: var(--ink-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cart footer: total + checkout + traceable note */
.maw-shell .lib-cart-footer {
  padding: 13px 13px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maw-shell .lib-cart-total {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mut);
}
.maw-shell .lib-cart-total b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  background: var(--line);
  border-radius: 8px;
  padding: 1px 7px;
}

/* Checkout (import) button */
.maw-shell .lib-checkout-btn {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(79,70,229,.32);
  transition: .15s;
  letter-spacing: -.1px;
}
.maw-shell .lib-checkout-btn:hover:not(:disabled) {
  box-shadow: 0 4px 18px rgba(79,70,229,.42);
  transform: translateY(-1px);
}
.maw-shell .lib-checkout-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* "imports are traceable" note */
.maw-shell .lib-traceable-note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  text-align: center;
  letter-spacing: .1px;
}
.lib-addcart--imported {
  color: var(--green);
  cursor: default;
  opacity: .85;
}

/** Updated by rahul.suri on 06/18/2026 - Honda Assembler detailing pass - raised to mockup fidelity **/
/** Updated by rahul.suri on 07/10/2026 - Honda Assembler Phase 05 - report-kind/source chips, kind-routed preview content (Simlytiks mount / markdown / attachment card), New Report picker modal **/
/** Updated by rahul.suri on 07/11/2026 - Honda Assembler Phase 05F - full-space Report Detail mode + OneDrive/PPTX gallery tile restyle **/
/** Updated by rahul.suri on 07/11/2026 - Honda Assembler Reports - full-width recent shelf + searchable/filterable document table; filter rail retired from the default layout **/

/*
 * reports.css - Assembler Workspace Reports view styles
 *
 * Scoped to .maw-shell. References tokens declared in shell/tokens.css.
 * Shared atoms (.maw-chip, .maw-pill, .maw-btn, .maw-stat, .maw-metric) from atoms.css.
 * No :root block -- consume var(--token) from .maw-shell.
 * ASCII-only.
 *
 * CSS class-drift self-check (every layout-relevant class emitted by JS/TPL has a rule here):
 *
 *   LAYOUT -- two modes toggled via .rep-mode-detail on .rep-layout:
 *     default: full-width library visible, .rep-preview hidden.
 *     detail:  library hidden, .rep-preview full-bleed.
 *   maw-reports-app              YES (root)
 *   rep-layout                   YES
 *   rep-mode-detail (modifier)    YES (Phase 05F -- toggled by ReportsView)
 *   rep-gallery (slot)           YES
 *   rep-preview (slot)           YES
 *   rep-preview-view (el)        YES
 *
 *   LIBRARY (GalleryView):
 *   rep-gallery-inner            YES
 *   rep-toolbar                  YES
 *   rep-breadcrumb               YES
 *   rep-bc-icon                  YES
 *   rep-bc-proj                  YES
 *   rep-bc-sep                   YES
 *   rep-bc-cur                   YES
 *   rep-bc-count                 YES
 *   rep-tb-gap                   YES
 *   rep-search / rep-search-input YES
 *   rep-filter-select            YES
 *   rep-sort-select              YES
 *   rep-clear-filters            YES
 *   rep-gen-btn (maw-btn maw-primary)  YES (via maw-btn in atoms.css)
 *   rep-gallery-body             YES
 *   rep-recent-section           YES
 *   rep-section-heading/title/help YES
 *   rep-recent-row               YES
 *   rep-recent-card              YES
 *   rep-recent-thumb             YES
 *   rep-rc-info                  YES
 *   rep-rc-title                 YES
 *   rep-rc-meta / rep-rc-when    YES
 *   rep-recent-empty             YES
 *   rep-table-section            YES
 *   rep-library-controls         YES
 *   rep-result-count             YES
 *   rep-table-wrap / rep-table   YES
 *   rep-report-row               YES
 *   rep-report-row--selected     YES
 *   rep-name-cell / rep-name-copy YES
 *   rep-row-open                 YES
 *   rep-doc-icon                 YES
 *   rep-row-name/subtitle        YES
 *   rep-owner/modified-cell      YES
 *   rep-card-thumb-img            YES (Phase 05F -- real row.thumbnail image, replaces rep-thumb-svg)
 *   rep-card-thumb-art            YES (Phase 05F -- kind-tinted placeholder, replaces rep-thumb-svg fallback)
 *   rep-card-thumb-glyph          YES (Phase 05F -- glyph inside the placeholder art)
 *   rep-card-thumb-label          YES (Phase 05F -- kind label inside the placeholder art)
 *   rep-chip-sm                   YES (compact maw-chip size modifier)
 *   rep-state-msg                YES
 *   rep-loading                  YES
 *   rep-empty                    YES
 *   rep-error                    YES
 *   rep-retry                    YES
 *   rep-empty-new-btn             YES (maw-btn via atoms.css; New report CTA in the empty state)
 *
 *   REPORT DETAIL (ReportPreviewView, repurposed Phase 05F from a side-preview
 *   panel to the full-space detail view) -- a slim header (back/title/chips/
 *   meta/Export) above a full-bleed kind-routed content mount. The old
 *   metadata-rows section + footer action bar + close-X are retired; Export
 *   moved into the header.
 *   rep-preview-empty            YES
 *   rep-preview-empty-ic         YES
 *   rep-preview-empty-icon       YES
 *   rep-preview-empty-text       YES
 *   rep-preview-empty-hint       YES
 *   rep-preview-pane             YES
 *   rep-prev-head                YES
 *   rep-prev-back                  YES (Phase 05F -- chevron + "Reports" back button, replaces rep-prev-head-ic + rep-preview-close)
 *   rep-prev-head-info            YES (wraps title-row + meta line)
 *   rep-prev-head-title-row       YES (Phase 05F -- title + chips, one line)
 *   rep-prev-head-title          YES
 *   rep-prev-chips                YES (kind + source chips, inline in title-row)
 *   rep-prev-head-meta            YES (Phase 05F -- "Created <date> [Updated <date>] <middot> <user_name>")
 *   rep-prev-head-actions         YES (Phase 05F -- wraps Export, right-aligned in header)
 *   rep-prev-body                YES
 *   rep-prev-content              YES (full-bleed kind-routed content slot)
 *   rep-prev-loading              YES
 *   rep-prev-error               YES
 *   rep-prev-mount                 YES (Simlytiks manager mount -- dataset/simlytiks kinds; fills rep-prev-content, no fixed height)
 *   rep-prev-md                    YES (scrubHtml sandbox root class -- markdown kind)
 *   rep-prev-pre                   YES (fallback escaped markdown when marked.js is unavailable)
 *   rep-prev-attachment            YES (attachment kind info card)
 *   rep-prev-attachment-icon       YES
 *   rep-prev-attachment-name       YES
 *   rep-prev-attachment-dl         YES (maw-btn via atoms.css)
 *
 *   NEW REPORT PICKER (NewReportPickerView) -- body-appended overlay, mirrors
 *   the Tasks entity-picker (mtp-*) structure with rep-picker-* naming:
 *   rep-picker-root (className, carries maw-shell)  YES
 *   rep-picker-panel               YES
 *   rep-picker-head                YES
 *   rep-picker-title               YES
 *   rep-picker-sub                 YES
 *   rep-picker-search-wrap         YES
 *   rep-picker-search-ic           YES
 *   rep-picker-search              YES
 *   rep-picker-body                YES
 *   rep-picker-loading             YES
 *   rep-picker-spin                YES
 *   rep-picker-empty               YES
 *   rep-picker-opt                 YES
 *   rep-picker-opt--sel            YES
 *   rep-picker-opt-badge           YES
 *   rep-picker-opt-name            YES
 *   rep-picker-error               YES
 *   rep-picker-foot                YES (maw-btn buttons via atoms.css)
 */

/* ============================================================
   Backbone view el wrappers
   ============================================================ */
.maw-shell .rep-preview-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   Root -- fills WorkspaceView pane body
   ============================================================ */
.maw-shell .maw-reports-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ============================================================
   Layout -- full-width library or full-bleed detail.
   Detail (.rep-mode-detail on .rep-layout) hides the library. Toggled by ReportsView; see
   _enterDetailMode/_exitDetailMode.
   ============================================================ */
.maw-shell .rep-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

.maw-shell .rep-layout.rep-mode-detail {
  grid-template-columns: 1fr;
}

.maw-shell .rep-layout.rep-mode-detail .rep-gallery {
  display: none;
}

/* Slot containers */
.maw-shell .rep-gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--panel);
}

.maw-shell .rep-preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  min-height: 0;
}

.maw-shell .rep-layout:not(.rep-mode-detail) .rep-preview {
  display: none;
}

/* ============================================================
   A. Report library  (GalleryView)
   ============================================================ */

.maw-shell .rep-gallery-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* --- Toolbar --- */
.maw-shell .rep-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--panel);
}

.maw-shell .rep-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink-mut);
  flex: none;
}

.maw-shell .rep-breadcrumb .maw-ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}

.maw-shell .rep-breadcrumb .maw-ic svg {
  width: 14px;
  height: 14px;
}

.maw-shell .rep-bc-icon {
  width: 13px;
  height: 13px;
  color: var(--ink-dim);
  flex: none;
}

.maw-shell .rep-bc-sep {
  color: var(--ink-dim);
  font-size: 14px;
}

.maw-shell .rep-bc-cur {
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .rep-bc-count {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: 3px;
}

.maw-shell .rep-tb-gap {
  flex: 1;
}

/* Inline search box (Phase 05F: made more prominent -- wider, taller, larger
   type -- a report library lives or dies on search). */
.maw-shell .rep-search {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-width: 260px;
  flex: 1 1 340px;
  max-width: 480px;
  transition: border-color .13s, background .13s;
}

.maw-shell .rep-search:focus-within {
  border-color: var(--indigo-bd);
  background: var(--panel);
}

.maw-shell .rep-search svg {
  width: 14px;
  height: 14px;
  color: var(--ink-dim);
  flex: none;
}

.maw-shell .rep-search-input {
  flex: 1;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: normal;
  background: none;
  border: none;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}

.maw-shell .rep-search-input::placeholder {
  color: var(--ink-dim);
}

/* Generate button override -- size for toolbar */
.maw-shell .rep-gen-btn {
  height: 30px;
  font-size: 12px;
  flex: none;
}

/* --- Gallery scrollable body --- */
.maw-shell .rep-gallery-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* --- Recently opened strip --- */
.maw-shell .rep-recent-section {
  margin-bottom: 24px;
}

.maw-shell .rep-recent-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.maw-shell .rep-recent-card {
  flex: none;
  width: 148px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .14s, box-shadow .14s;
}

.maw-shell .rep-recent-card:hover {
  border-color: var(--indigo-bd);
  box-shadow: 0 2px 10px rgba(79, 70, 229, .1);
}

.maw-shell .rep-recent-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.maw-shell .rep-rc-info {
  padding: 6px 8px 7px;
}

.maw-shell .rep-rc-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .rep-rc-when {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-dim);
}

.maw-shell .rep-recent-empty {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 4px 0;
}

/* Real thumbnail image (row.thumbnail, Phase 05F) */
.maw-shell .rep-card-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kind-tinted placeholder art block (row.thumbnail empty, Phase 05F) */
.maw-shell .rep-card-thumb-art {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.maw-shell .rep-card-thumb-glyph {
  width: 40px;
  height: 40px;
  opacity: .85;
}

.maw-shell .rep-card-thumb-glyph svg {
  width: 100%;
  height: 100%;
}

.maw-shell .rep-card-thumb-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .6px;
  font-weight: 700;
  opacity: .75;
}

/* Compact placeholder art inside the recently-opened shelf. */
.maw-shell .rep-recent-thumb .rep-card-thumb-glyph {
  width: 22px;
  height: 22px;
}

.maw-shell .rep-recent-thumb .rep-card-thumb-label {
  font-size: 8.5px;
}

.maw-shell .rep-chip-sm {
  font-size: 9.5px;
  padding: 1px 6px;
  gap: 4px;
}

/* State views */
.maw-shell .rep-state-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  height: 200px;
}

.maw-shell .rep-loading { color: var(--ink-dim); }
.maw-shell .rep-empty   { color: var(--ink-mut); }
.maw-shell .rep-error   { color: var(--orange-strong); }

.maw-shell .rep-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  text-decoration: none;
}

.maw-shell .rep-retry:hover {
  background: var(--indigo-soft);
}

.maw-shell .rep-state-msg .rep-empty-new-btn {
  margin-top: 4px;
}

/* ============================================================
   C. Preview pane  (ReportPreviewView)
   ============================================================ */

/* Empty state */
.maw-shell .rep-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--ink-dim);
  padding: 40px 24px;
  text-align: center;
}

.maw-shell .rep-preview-empty-ic {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--orange-soft);
  display: grid;
  place-items: center;
  flex: none;
}

.maw-shell .rep-preview-empty-icon {
  width: 22px;
  height: 22px;
  color: var(--orange-strong);
}

.maw-shell .rep-preview-empty-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .rep-preview-empty-hint {
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.45;
  max-width: 220px;
}

/* Loaded pane wrapper */
.maw-shell .rep-preview-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Slim detail header: back button | title+chips+meta | Export (Phase 05F).
   No icon badge, no metadata-rows section, no footer action bar -- the
   report itself (rendered full-bleed below) carries the content. */
.maw-shell .rep-prev-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .rep-prev-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink-mut);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  transition: background .12s, color .12s;
}

.maw-shell .rep-prev-back svg {
  width: 15px;
  height: 15px;
}

.maw-shell .rep-prev-back:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .rep-prev-head-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.maw-shell .rep-prev-head-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.maw-shell .rep-prev-head-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-width: 0;
}

.maw-shell .rep-prev-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: none;
}

.maw-shell .rep-prev-head-meta {
  font-size: 11.5px;
  color: var(--ink-dim);
}

.maw-shell .rep-prev-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* Full-bleed body -- the content mount owns its own scrolling (Simlytiks
   mount) or is padded per-kind below (markdown/attachment/loading/error). */
.maw-shell .rep-prev-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.maw-shell .rep-prev-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Loading / error inline states -- content area has no outer padding
   anymore (full-bleed), so these carry their own. */
.maw-shell .rep-prev-loading {
  font-size: 13px;
  color: var(--ink-dim);
  padding: 40px 20px;
  text-align: center;
}

.maw-shell .rep-prev-error {
  font-size: 13px;
  color: var(--orange-strong);
  padding: 20px;
}

/* Simlytiks manager mount (dataset/simlytiks kinds) -- fills the remaining
   body height edge-to-edge; the mount ships its own Enter-Full-Screen
   control, so no custom fullscreen chrome is added here. */
.maw-shell .rep-prev-mount {
  flex: 1;
  min-height: 0;
  background: var(--panel);
  overflow: hidden;
}

/* Markdown content (kind=markdown) -- own padding since the body is edge-to-edge */
.maw-shell .rep-prev-md {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  padding: 20px 24px;
}

.maw-shell .rep-prev-pre {
  white-space: pre-wrap;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--ink);
  margin: 0;
  padding: 20px 24px;
}

/* Attachment info card (kind=attachment, v1 minimal) */
.maw-shell .rep-prev-attachment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 32px 20px;
  text-align: center;
}

.maw-shell .rep-prev-attachment-icon {
  width: 30px;
  height: 30px;
  color: var(--ink-dim);
}

.maw-shell .rep-prev-attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

/* ============================================================
   D. New Report picker (NewReportPickerView) -- body-appended
   overlay. Root className carries maw-shell so the tokens
   cascade. Mirrors the Tasks entity-picker (mtp-*) structure.
   ============================================================ */
.maw-shell.rep-picker-root {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 26, 20, .42);
}

.maw-shell .rep-picker-panel {
  width: 460px; max-width: calc(100vw - 40px);
  max-height: 72vh;
  display: flex; flex-direction: column;
  background: var(--panel); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(30, 26, 20, .30);
  border: 1px solid var(--line);
  overflow: hidden;
}

.maw-shell .rep-picker-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .rep-picker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.maw-shell .rep-picker-sub {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
  margin-bottom: 10px;
}

.maw-shell .rep-picker-search-wrap {
  position: relative;
}

.maw-shell .rep-picker-search-ic {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-dim);
}

.maw-shell .rep-picker-search {
  width: 100%; height: 32px; padding: 0 10px 0 30px;
  border: 1px solid var(--line-hi); border-radius: 8px;
  background: var(--panel-soft); color: var(--ink); font-size: 12.5px; outline: none;
  box-sizing: border-box;
}

.maw-shell .rep-picker-search:focus {
  border-color: var(--indigo);
  background: var(--panel);
}

.maw-shell .rep-picker-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
}

.maw-shell .rep-picker-loading {
  padding: 26px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
}

.maw-shell .rep-picker-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid var(--line-hi); border-top-color: var(--ink-mut);
  border-radius: 50%; animation: rep-picker-spin .7s linear infinite;
}

@keyframes rep-picker-spin { to { transform: rotate(360deg); } }

.maw-shell .rep-picker-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.maw-shell .rep-picker-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
}

.maw-shell .rep-picker-opt:hover {
  background: var(--panel-hover);
}

.maw-shell .rep-picker-opt--sel {
  background: var(--indigo-soft);
  outline: 1px solid var(--indigo-bd);
}

.maw-shell .rep-picker-opt-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-mut);
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  padding: 1px 6px;
  border-radius: 5px;
  flex: none;
}

.maw-shell .rep-picker-opt-name {
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .rep-picker-error {
  padding: 8px 18px 0;
  font-size: 12px;
  color: var(--orange-strong);
}

.maw-shell .rep-picker-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  flex: none;
}

/* ============================================================
   E. OneDrive/PPTX report library (2026-07-11)
   Full-width recent history shelf plus searchable document table.
   ============================================================ */
.maw-shell .rep-toolbar {
  min-height: 48px;
  padding: 9px 20px;
}

.maw-shell .rep-gallery-body {
  padding: 20px 22px 28px;
  gap: 24px;
}

.maw-shell .rep-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.maw-shell .rep-section-title {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.maw-shell .rep-section-help,
.maw-shell .rep-result-count {
  color: var(--ink-dim);
  font-size: 11.5px;
  margin-top: 2px;
}

.maw-shell .rep-recent-section {
  margin: 0;
  flex: none;
}

.maw-shell .rep-recent-section[hidden] {
  display: none !important;
}

.maw-shell .rep-recent-row {
  gap: 14px;
  overflow-x: auto;
  padding: 1px 1px 10px;
  scroll-snap-type: x proximity;
}

.maw-shell .rep-recent-card {
  width: 250px;
  padding: 0;
  border-radius: 9px;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  scroll-snap-align: start;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}

.maw-shell .rep-recent-card:hover {
  transform: translateY(-1px);
}

.maw-shell .rep-recent-card:focus-visible,
.maw-shell .rep-row-open:focus-visible,
.maw-shell .rep-search:focus-within,
.maw-shell .rep-filter-select:focus,
.maw-shell .rep-sort-select:focus,
.maw-shell .rep-clear-filters:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.maw-shell .rep-recent-thumb {
  aspect-ratio: 16 / 9;
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}

.maw-shell .rep-rc-info {
  min-height: 67px;
  padding: 9px 11px 10px;
}

.maw-shell .rep-rc-title {
  font-size: 12.5px;
  margin-bottom: 3px;
}

.maw-shell .rep-rc-meta {
  color: var(--ink-mut);
  font-size: 10.5px;
  margin-bottom: 3px;
}

.maw-shell .rep-rc-when {
  font-size: 9.5px;
}

.maw-shell .rep-recent-thumb .rep-card-thumb-glyph {
  width: 38px;
  height: 38px;
}

.maw-shell .rep-recent-thumb .rep-card-thumb-label {
  font-size: 9.5px;
}

.maw-shell .rep-table-section {
  min-width: 0;
}

.maw-shell .rep-all-heading {
  margin-bottom: 9px;
}

.maw-shell .rep-library-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}

.maw-shell .rep-library-controls .rep-search {
  flex: 1 1 380px;
  min-width: 240px;
  max-width: none;
  box-sizing: border-box;
}

.maw-shell .rep-filter-select,
.maw-shell .rep-sort-select {
  height: 34px;
  max-width: 160px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink-mut);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  outline: none;
}

.maw-shell .rep-filter-select:hover,
.maw-shell .rep-sort-select:hover {
  border-color: var(--line-hi);
  color: var(--ink);
}

.maw-shell .rep-clear-filters {
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--indigo);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.maw-shell .rep-clear-filters:hover {
  background: var(--indigo-soft);
}

.maw-shell .rep-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.maw-shell .rep-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.maw-shell .rep-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  table-layout: fixed;
}

.maw-shell .rep-table th {
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .45px;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle !important;
  line-height: 1.1;
}

/* Table-shaped loading state: the geometry stays stable while the worker runs. */
.maw-shell .rep-skeleton {
  display: block;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--panel-soft) 20%,
    var(--panel-hover) 42%,
    var(--panel-soft) 64%);
  background-size: 240% 100%;
  animation: rep-skeleton-shine 1.25s ease-in-out infinite;
}

@keyframes rep-skeleton-shine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.maw-shell .rep-table-skeleton th {
  height: 34px;
}

.maw-shell .rep-skeleton-head { width: 46%; height: 7px; }
.maw-shell .rep-skeleton-row td { height: 52px; padding: 7px 12px; }
.maw-shell .rep-skeleton-name { display: flex; align-items: center; gap: 10px; }
.maw-shell .rep-skeleton-icon { width: 30px; height: 34px; border-radius: 6px; flex: none; }
.maw-shell .rep-skeleton-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 7px; }
.maw-shell .rep-skeleton-title { width: 72%; height: 10px; }
.maw-shell .rep-skeleton-subtitle { width: 48%; height: 7px; }
.maw-shell .rep-skeleton-chip { width: 64px; height: 18px; border-radius: 9px; }
.maw-shell .rep-skeleton-owner { width: 70px; height: 9px; }
.maw-shell .rep-skeleton-date { width: 76px; height: 9px; }

.maw-shell .rep-table th:first-child { width: 43%; }
.maw-shell .rep-table th:nth-child(2) { width: 13%; }
.maw-shell .rep-table th:nth-child(3) { width: 14%; }
.maw-shell .rep-table th:nth-child(4) { width: 16%; }
.maw-shell .rep-table th:nth-child(5) { width: 14%; }

.maw-shell .rep-report-row {
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}

.maw-shell .rep-report-row + .rep-report-row td {
  border-top: 1px solid var(--line);
}

.maw-shell .rep-report-row:hover,
.maw-shell .rep-report-row:focus-within {
  background: var(--panel-hover);
}

.maw-shell .rep-report-row--selected {
  background: var(--indigo-soft);
}

.maw-shell .rep-report-row td {
  height: 52px;
  padding: 7px 12px;
  color: var(--ink-mut);
  font-size: 11.5px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .rep-name-cell {
  box-sizing: border-box;
}

.maw-shell .rep-row-open {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.maw-shell .rep-doc-icon {
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: var(--panel);
}

.maw-shell .rep-doc-icon svg {
  width: 17px;
  height: 17px;
}

.maw-shell .rep-name-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maw-shell .rep-row-name,
.maw-shell .rep-row-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .rep-row-name {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.maw-shell .rep-row-subtitle {
  color: var(--ink-dim);
  font-size: 10.5px;
  line-height: 1.35;
}

.maw-shell .rep-owner-cell,
.maw-shell .rep-modified-cell {
  color: var(--ink-dim);
}

.maw-shell .rep-table-wrap > .rep-state-msg {
  height: 170px;
  margin: 0;
}

@media (max-width: 1050px) {
  .maw-shell .rep-library-controls {
    flex-wrap: wrap;
  }

  .maw-shell .rep-library-controls .rep-search {
    flex-basis: 100%;
    min-width: 100%;
  }

  .maw-shell .rep-filter-select,
  .maw-shell .rep-sort-select {
    flex: 1 1 140px;
    max-width: none;
  }
}

@media (max-width: 700px) {
  .maw-shell .rep-toolbar,
  .maw-shell .rep-gallery-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .maw-shell .rep-recent-card {
    width: 220px;
  }

  .maw-shell .rep-filter-select,
  .maw-shell .rep-sort-select {
    flex-basis: calc(50% - 4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .rep-recent-card,
  .maw-shell .rep-report-row,
  .maw-shell .rep-search,
  .maw-shell .rep-filter-select,
  .maw-shell .rep-sort-select {
    transition: none;
  }

  .maw-shell .rep-skeleton {
    animation: none;
  }

  .maw-shell .rep-recent-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   CS-576 -- New-report kind menu + Loadcase report picker
   All scoped under .maw-shell so nothing can leak into the legacy IndexView.
   ========================================================================== */

.maw-shell .rep-gen-wrap { position: relative; display: inline-block; }

.maw-shell .rep-gen-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 288px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(30, 26, 20, .22);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.maw-shell .rep-gen-menu[hidden] { display: none; }

.maw-shell .rep-gen-menu-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
}
.maw-shell .rep-gen-menu-item:hover,
.maw-shell .rep-gen-menu-item:focus-visible { background: var(--hover); outline: none; }
.maw-shell .rep-gen-menu-name { font-size: 13px; font-weight: 650; color: var(--navy); }
.maw-shell .rep-gen-menu-sub  { font-size: 11.5px; color: var(--ink-dim); line-height: 1.35; }

/* -- picker panel: wider than the simulation picker, rows carry badges ----- */
.maw-shell .rep-lcr-panel { width: 620px; max-height: 78vh; }

.maw-shell .rep-lcr-scope-tabs,
.maw-shell .rep-lcr-tmpl-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
}
.maw-shell .rep-lcr-scope-tab,
.maw-shell .rep-lcr-tmpl-tab {
  flex: 1; padding: 6px 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink-dim); cursor: pointer;
}
.maw-shell .rep-lcr-scope-tab.is-active,
.maw-shell .rep-lcr-tmpl-tab.is-active {
  background: var(--hover); color: var(--navy); border-color: var(--navy);
}

.maw-shell .rep-lcr-showdoe-wrap {
  display: flex; align-items: center; gap: 6px;
  margin-top: 9px; font-size: 11.5px; color: var(--ink-dim); cursor: pointer;
}
.maw-shell .rep-lcr-showdoe-wrap[hidden] { display: none; }

.maw-shell .rep-lcr-body { flex: 1; overflow-y: auto; padding: 8px; }

.maw-shell .rep-lcr-row {
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; margin-bottom: 3px;
}
.maw-shell .rep-lcr-row:hover { background: var(--hover); }
.maw-shell .rep-lcr-row--sel  { background: var(--hover); border-color: var(--navy); }
/* Blocked rows stay selectable so their reason is readable -- only the action
   is withheld, in _syncFoot(). Dimming alone would hide the explanation. */
.maw-shell .rep-lcr-row--blocked .rep-lcr-name { color: var(--ink-dim); }

.maw-shell .rep-lcr-row-main { display: flex; align-items: center; gap: 8px; }
.maw-shell .rep-lcr-kind {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px;
  background: var(--hover); color: var(--ink-dim);
}
.maw-shell .rep-lcr-kind--study { background: rgba(120, 90, 200, .13); color: var(--t-doe); }
.maw-shell .rep-lcr-name {
  font-size: 13px; font-weight: 600; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .rep-lcr-existing {
  flex: none; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(190, 150, 40, .14); color: #8a6d1f;
}
.maw-shell .rep-lcr-sub { font-size: 11px; color: var(--ink-dim); margin: 2px 0 0 2px; }

.maw-shell .rep-lcr-badges {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.maw-shell .rep-lcr-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-dim); background: var(--panel);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .rep-lcr-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor;
}
.maw-shell .rep-lcr-badge--ok   { color: #2f7a44; border-color: rgba(47, 122, 68, .30); }
.maw-shell .rep-lcr-badge--warn { color: #8a6d1f; border-color: rgba(138, 109, 31, .30); }
.maw-shell .rep-lcr-badge--bad  { color: #a33a30; border-color: rgba(163, 58, 48, .30); }

.maw-shell .rep-lcr-blocker,
.maw-shell .rep-lcr-note {
  font-size: 11px; line-height: 1.4; margin-top: 5px;
  padding: 5px 8px; border-radius: 7px;
}
.maw-shell .rep-lcr-blocker { color: #a33a30; background: rgba(163, 58, 48, .07); }
.maw-shell .rep-lcr-note    { color: var(--ink-dim); background: var(--hover); }

/* -- template pane -------------------------------------------------------- */
.maw-shell .rep-lcr-tmpl-pane { flex: 1; overflow-y: auto; padding: 12px 14px; }
.maw-shell .rep-lcr-tmpl-pane[hidden] { display: none; }
.maw-shell .rep-lcr-tmpl-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.maw-shell .rep-lcr-tmpl-title { font-size: 13px; font-weight: 650; color: var(--navy); }
.maw-shell .rep-lcr-tmpl-search { width: 100%; margin-bottom: 8px; }
.maw-shell .rep-lcr-tmpl-list { display: flex; flex-direction: column; gap: 2px; }
.maw-shell .rep-lcr-tmpl-opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.maw-shell .rep-lcr-tmpl-opt:hover { background: var(--hover); }
.maw-shell .rep-lcr-tmpl-name { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.maw-shell .rep-lcr-tmpl-sub  { font-size: 11px; color: var(--ink-dim); }

/* -- status + footer ------------------------------------------------------ */
.maw-shell .rep-lcr-status {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 12px; color: var(--ink-dim);
  border-top: 1px solid var(--line); background: var(--hover);
}
.maw-shell .rep-lcr-status[hidden] { display: none; }

.maw-shell .rep-lcr-foot-note {
  flex: 1; font-size: 11.5px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis;
}
.maw-shell .rep-lcr-foot-warn { color: #8a6d1f; }

/* "there are more than this" footer -- reads as a note, not as another row */
.maw-shell .rep-lcr-more {
    padding: 10px 14px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    border-top: 1px dashed #d7dbe0;
}

/* -- Associated-with column (clickable entity chip -> detail tab) ---------- */
.maw-shell .rep-assoc-cell { max-width: 220px; }
.maw-shell .rep-assoc-chip {
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.maw-shell .rep-assoc-chip:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.14);
    transform: translateY(-1px);
}
.maw-shell .rep-assoc-none { color: var(--ink-dim); }

/** Updated by rahul.suri on 06/18/2026 - Honda Assembler detailing pass - raised to mockup fidelity **/

/*
 * activities.css - Assembler Workspace Activities view styles
 *
 * Scoped to .maw-shell. References tokens from shell/tokens.css.
 * Atoms (.maw-chip, .maw-btn, .maw-card, .maw-sg) come from atoms.css -- DO NOT re-declare them.
 * No :root block. All rules under .maw-shell. ASCII-only.
 *
 * Class inventory (emitted by JS / TPL, styled here):
 *   Layout:    .maw-activities-app, .act-layout, .act-feed-col, .act-detail-slot
 *   Scope bar: .act-scope-bar, .act-scope-btn, .act-scope-btn--active, .act-scope-count,
 *              .act-scope-sep
 *   Filters:   .act-filters-row, .act-filter-pill, .act-filter-arrow,
 *              .act-search-box, .act-search-input
 *   Digest:    .act-digest-wrap, .act-digest-card, .act-digest-msg, .act-digest-av,
 *              .act-digest-bubble, .act-digest-who, .act-digest-text, .act-digest-footer,
 *              .act-digest-cta
 *   Feed:      .maw-act-feed, .act-feed-inner, .act-feed-slot
 *   Day group: .act-day-group, .act-day-hd, .act-day-label, .act-day-rule, .act-day-count,
 *              .act-day-rows
 *   Row:       .act-feed-row, .act-actor-col, .act-av, .act-av--{sim,task,system},
 *              .act-actor-info, .act-actor-name, .act-event-col,
 *              .act-verb, .v-create, .v-update, .v-submit, .v-complete, .v-delete,
 *              .act-chip, .act-chip-{sim,task,system}, .act-cd, .act-cd--{sim,task,system},
 *              .act-entity-name, .act-ts
 *   States:    .act-loading, .act-empty, .act-error, .act-retry, .act-mine-stub
 *   Detail:    .maw-act-detail, .act-dp-pane, .act-dp-empty, .act-dp-empty-text,
 *              .act-dp-head, .act-dp-av, .act-dp-av--{sim,task,system},
 *              .act-dp-head-meta, .act-dp-head-name, .act-dp-head-sub, .act-dp-close,
 *              .act-dp-scroll,
 *              .act-dp-title-block, .act-dp-verb, .act-dp-verb--{created,updated},
 *              .act-dp-entity-name, .act-dp-when,
 *              .act-dp-section, .act-dp-section-title,
 *              .act-dp-entity-row, .act-dp-entity-type-label, .act-dp-open-link,
 *              .act-dp-stub-row, .act-dp-stub-ic, .act-dp-stub-msg,
 *              .act-dp-actions, .act-dp-act-btn
 *   Panel roots: .maw-act-feed, .maw-act-detail (flex-fill wrappers for slots)
 */

/* ============================================================
   Root -- fills the WorkspaceView pane body
   ============================================================ */
.maw-shell .maw-activities-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Panel root els mounted into the feed/detail slots -- fill their slot */
.maw-shell .maw-act-feed,
.maw-shell .maw-act-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.maw-shell .maw-act-feed {
  flex: 1;
  height: auto;
}

/* ============================================================
   Two-column interior layout
   Left feed (flex-1) + right detail (320px fixed)
   ============================================================ */
.maw-shell .act-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Feed column -- flex column so bars stay fixed, feed scrolls */
.maw-shell .act-feed-col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  overflow: hidden;
  min-height: 0;
  background: var(--panel);
}

/* Detail column -- flex fill */
.maw-shell .act-detail-slot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  min-height: 0;
}

/* ============================================================
   Scope bar (Project / Mine) -- underline-tab style per mockup
   ============================================================ */
.maw-shell .act-scope-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}

.maw-shell .act-scope-btn {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mut);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  transition: color .12s;
  white-space: nowrap;
  font: inherit;
}
.maw-shell .act-scope-btn:hover {
  color: var(--ink);
}
.maw-shell .act-scope-btn--active {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
  font-weight: 600;
}

.maw-shell .act-scope-count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--line-hi);
  color: var(--ink-dim);
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 600;
}
.maw-shell .act-scope-btn--active .act-scope-count {
  background: var(--indigo-bd);
  color: var(--indigo);
}

.maw-shell .act-scope-sep {
  flex: 1;
}

/* ============================================================
   Filters row -- live project facets and search
   ============================================================ */
.maw-shell .act-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--panel-soft);
}

.maw-shell .act-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.maw-shell .act-filter-pill:focus-within {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}

.maw-shell .act-filter-select {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  max-width: 150px;
  padding: 0;
}

.maw-shell .act-filter-arrow {
  color: var(--ink-dim);
  margin-left: 2px;
}

.maw-shell .act-search-box {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  margin-left: auto;
  min-width: 160px;
}

.maw-shell .act-search-input {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
  cursor: text;
}
.maw-shell .act-search-input::placeholder {
  color: var(--ink-dim);
}

/* ============================================================
   Fora AI digest card (faithful look, inert stub)
   FIDELITY-GAP: AI narrative deferred; no backend beyond 2 list workers
   ============================================================ */
.maw-shell .act-digest-wrap {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex: none;
}

/* .act-digest-card uses .maw-card from atoms.css */

.maw-shell .act-digest-msg {
  display: flex;
  gap: 11px;
  padding: 12px 14px 0;
}

.maw-shell .act-digest-av {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--indigo-2), var(--indigo));
  color: #fff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, .25);
}

.maw-shell .act-digest-bubble {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}

.maw-shell .act-digest-who {
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-mut);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.maw-shell .act-digest-who b {
  color: var(--indigo);
  font-weight: 700;
  font-style: normal;
}

.maw-shell .act-digest-text {
  font-size: 12.5px;
  color: var(--ink-mut);
  font-style: italic;
}

.maw-shell .act-digest-footer {
  padding: 10px 14px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .act-digest-cta uses .maw-sg from atoms.css */
.maw-shell .act-digest-cta {
  font-size: 11.5px;
  padding: 5px 11px;
}

/* ============================================================
   Feed slot -- scrollable feed container
   ============================================================ */
.maw-shell .act-feed-slot {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.maw-shell .act-feed-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   "Mine" scope stub
   ============================================================ */
.maw-shell .act-mine-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  font-style: italic;
  height: 100%;
}

/* ============================================================
   Day group header -- mockup style: label + rule + count
   ============================================================ */
.maw-shell .act-day-group {
  display: flex;
  flex-direction: column;
}

.maw-shell .act-day-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 6px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}

.maw-shell .act-day-label {
  font-size: 10px;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
  white-space: nowrap;
}

.maw-shell .act-day-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.maw-shell .act-day-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
}

.maw-shell .act-day-rows {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.maw-shell .act-day-group-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 14px 10px;
}

/* ============================================================
   Activity feed row -- discrete card style per mockup
   ============================================================ */
.maw-shell .act-feed-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.maw-shell .act-feed-row:hover {
  background: var(--panel-hover);
  border-color: var(--line-hi);
}
.maw-shell .act-feed-row.selected {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}
.maw-shell .act-feed-row.selected::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--indigo);
}

/* Actor column: avatar + name label */
.maw-shell .act-actor-col {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 140px;
  min-width: 0;
  flex: none;
}

/* Actor avatar: initials + gradient bg per entity type */
.maw-shell .act-av {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #334155, var(--navy));
  flex: none;
}
.maw-shell .act-av--sim    { background: linear-gradient(145deg, #1a4a9b, var(--blue)); }
.maw-shell .act-av--task   { background: linear-gradient(145deg, #92400e, var(--t-task)); }
.maw-shell .act-av--system { background: linear-gradient(145deg, #475569, #334155); }

.maw-shell .act-actor-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.maw-shell .act-actor-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .act-feed-row.selected .act-actor-name {
  color: var(--indigo);
}

/* Event column: verb + chip + entity name */
.maw-shell .act-event-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 2px;
  padding-top: 5px;
}

/* First line of the event column: verb + chip + entity name in a row */
.maw-shell .act-event-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 5px;
  min-width: 0;
}

/* Optional secondary detail line (only when it adds to the entity name) */
.maw-shell .act-row-desc {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Verb -- color-coded per action */
.maw-shell .act-verb {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-mut);
  white-space: nowrap;
}
.maw-shell .act-verb.v-create   { color: var(--green); }
.maw-shell .act-verb.v-update   { color: var(--ink-mut); }
.maw-shell .act-verb.v-submit   { color: var(--blue); }
.maw-shell .act-verb.v-complete { color: var(--green); }
.maw-shell .act-verb.v-delete   { color: var(--orange-strong); }

/* Entity chip -- type-colored, local to feed rows */
.maw-shell .act-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  white-space: nowrap;
  flex: none;
}
.maw-shell .act-chip-sim {
  border-color: rgba(47, 95, 196, .25);
  background: var(--blue-soft);
  color: var(--blue);
}
.maw-shell .act-chip-task {
  border-color: rgba(180, 83, 9, .25);
  background: rgba(180, 83, 9, .07);
  color: var(--t-task);
}
.maw-shell .act-chip-system {
  border-color: var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink-mut);
}

/* Activity chips use the same canonical entity tokens as Graph, Notes, and Tasks. */
.maw-shell .act-chip-simulation,
.maw-shell .act-chip-srs,
.maw-shell .act-chip-solverresultset { --act-type-color: var(--t-sim); }
.maw-shell .act-chip-systemmodel { --act-type-color: var(--t-sm); }
.maw-shell .act-chip-assembly,
.maw-shell .act-chip-assembly_systemmodel,
.maw-shell .act-chip-assembly_simulation,
.maw-shell .act-chip-simulation_systemmodel { --act-type-color: var(--t-asm); }
.maw-shell .act-chip-loadcase { --act-type-color: var(--t-lc); }
.maw-shell .act-chip-study,
.maw-shell .act-chip-study_target { --act-type-color: var(--t-doe); }
.maw-shell .act-chip-responsetemplate { --act-type-color: var(--t-rt); }
.maw-shell .act-chip-designstep { --act-type-color: var(--t-ds); }
.maw-shell .act-chip-task { --act-type-color: var(--t-task); }
.maw-shell .act-chip-note { --act-type-color: var(--t-note); }

.maw-shell .act-chip[style*="--act-type-color"],
.maw-shell .act-chip-simulation,
.maw-shell .act-chip-srs,
.maw-shell .act-chip-solverresultset,
.maw-shell .act-chip-systemmodel,
.maw-shell .act-chip-assembly,
.maw-shell .act-chip-assembly_systemmodel,
.maw-shell .act-chip-assembly_simulation,
.maw-shell .act-chip-simulation_systemmodel,
.maw-shell .act-chip-loadcase,
.maw-shell .act-chip-study,
.maw-shell .act-chip-study_target,
.maw-shell .act-chip-responsetemplate,
.maw-shell .act-chip-designstep,
.maw-shell .act-chip-task,
.maw-shell .act-chip-note {
  color: var(--act-type-color);
  border-color: color-mix(in srgb, var(--act-type-color) 28%, transparent);
  background: color-mix(in srgb, var(--act-type-color) 9%, var(--panel));
}

/* Color dot inside chip */
.maw-shell .act-cd {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.maw-shell .act-cd--sim    { background: var(--t-sim); }
.maw-shell .act-cd--task   { background: var(--t-task); }
.maw-shell .act-cd--system { background: var(--ink-dim); }
.maw-shell .act-chip .act-cd { background: currentColor; }

/* Entity name (truncated) */
.maw-shell .act-entity-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

/* Timestamp column */
.maw-shell .act-ts {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  margin-left: auto;
  padding-top: 6px;
  flex: none;
  min-width: 44px;
  text-align: right;
}

/* ============================================================
   Loading / empty / error states
   ============================================================ */
.maw-shell .act-loading,
.maw-shell .act-empty,
.maw-shell .act-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
  min-height: 160px;
}
.maw-shell .act-error {
  color: var(--orange-strong);
}
.maw-shell .act-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
  background: none;
  border: 1px solid var(--indigo-bd);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  text-decoration: none;
}
.maw-shell .act-retry:hover {
  background: var(--indigo-soft);
}

/* ============================================================
   Activity detail pane (ActivityDetailView -> .act-dp-*)
   Fixed head + scrollable body + fixed footer actions
   ============================================================ */

/* Root pane */
.maw-shell .act-dp-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}

/* Empty state */
.maw-shell .act-dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-dim);
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.maw-shell .act-dp-empty-text {
  font-size: 13px;
  color: var(--ink-dim);
}

/* Header: actor initials + meta + close button */
.maw-shell .act-dp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 11px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

/* Actor avatar in detail pane (larger) */
.maw-shell .act-dp-av {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #334155, var(--navy));
  flex: none;
}
.maw-shell .act-dp-av--sim    { background: linear-gradient(145deg, #1a4a9b, var(--blue)); }
.maw-shell .act-dp-av--task   { background: linear-gradient(145deg, #92400e, var(--t-task)); }
.maw-shell .act-dp-av--system { background: linear-gradient(145deg, #475569, #334155); }

.maw-shell .act-dp-head-meta {
  line-height: 1.25;
  min-width: 0;
}
.maw-shell .act-dp-head-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.maw-shell .act-dp-head-sub {
  font-size: 10.5px;
  color: var(--ink-dim);
}

.maw-shell .act-dp-close {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex: none;
  transition: .12s;
}
.maw-shell .act-dp-close:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

/* Scrollable body */
.maw-shell .act-dp-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Action title block */
.maw-shell .act-dp-title-block {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.maw-shell .act-dp-verb {
  font-size: 15px;
  font-weight: 700;
}
.maw-shell .act-dp-verb--created { color: var(--green); }
.maw-shell .act-dp-verb--updated { color: var(--ink-mut); }
.maw-shell .act-dp-verb--created,
.maw-shell .act-dp-verb--submitted { color: var(--blue); }

.maw-shell .act-dp-entity-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* When line (clock icon + timestamp + relative) */
.maw-shell .act-dp-when {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

/* Section */
.maw-shell .act-dp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .act-dp-section-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 700;
  color: var(--ink-dim);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

/* Entity row with Open link */
.maw-shell .act-dp-entity-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .act-dp-entity-type-label {
  font-size: 12px;
  color: var(--ink-mut);
}

.maw-shell .act-dp-open-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--indigo);
  cursor: pointer;
  white-space: nowrap;
  opacity: 1;
  transition: opacity .12s;
}
.maw-shell .act-dp-open-link:hover {
  opacity: .75;
}

/* Stub rows (what-changed + related) */
.maw-shell .act-dp-stub-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.maw-shell .act-dp-stub-ic {
  color: var(--ink-dim);
  flex: none;
  margin-top: 1px;
}

.maw-shell .act-dp-stub-msg {
  font-size: 12.5px;
  color: var(--ink-dim);
  font-style: italic;
  line-height: 1.5;
}

/* Footer actions */
.maw-shell .act-dp-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: none;
  background: var(--panel-soft);
}

/* .act-dp-act-btn uses .maw-btn .maw-stub from atoms.css */

/* ======================================================================== *
 * AI summary (Phase 40 -- generic_llm_worker over the loaded feed rows)
 * ======================================================================== */

.maw-shell .act-summarize-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  font-size: 11px;
  white-space: nowrap;
}
.maw-shell .act-summarize-btn:disabled { opacity: 0.6; pointer-events: none; }

.maw-shell .act-summary-slot { margin: 0 14px; }
.maw-shell .act-summary-slot:empty { display: none; }

.maw-shell .act-summary-card {
  position: relative;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
  font-size: 12px;
  color: var(--ink);
  animation: actSummaryIn 0.25s ease both;
}
@keyframes actSummaryIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.maw-shell .act-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--indigo, #5048c6);
}
.maw-shell .act-summary-title {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.maw-shell .act-summary-scope { font-size: 11px; color: var(--ink-dim); }
.maw-shell .act-summary-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.maw-shell .act-summary-close:hover { color: var(--ink); }
.maw-shell .act-summary-body { line-height: 1.5; }

.maw-shell .act-summary-card--loading,
.maw-shell .act-summary-card--empty,
.maw-shell .act-summary-card--error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-dim);
}
.maw-shell .act-summary-card--error { border-left-color: var(--clay, #c2562f); color: var(--clay, #c2562f); }
.maw-shell .act-summary-card--loading .act-summary-spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--indigo, #5048c6);
  border-radius: 50%;
  animation: actSummarySpin 0.7s linear infinite;
}
@keyframes actSummarySpin { to { transform: rotate(360deg); } }

/* Feed row hover lift -- makes the rows feel clickable */
.maw-shell .act-feed-row { transition: background 0.15s ease, box-shadow 0.15s ease; }
.maw-shell .act-feed-row:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
}

/* Filter pills already carry a :focus-within ring above; add the hover cue */
.maw-shell .act-filter-pill { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.maw-shell .act-filter-pill:hover { border-color: var(--indigo-bd); }

/** Rewritten 2026-09-21 - Phase 40: Reports-style library (nts-*); editor styles retired with the clone --
    the note DETAIL TAB now renders the REAL notes application editor, styled by spa/notes.css. **/

/*
 * notes.css - Assembler Workspace Notes view styles
 *
 * Scoped to .maw-shell (except the body-appended graph note modal guards).
 * Atoms (.maw-chip, .maw-btn, .maw-card) come from atoms.css -- DO NOT re-declare.
 *
 * Class inventory:
 *   NotesView.js     : .maw-notes-app, .nts-layout, .nts-library-slot
 *   NotesListView.js : .nts-library, .nts-toolbar, .nts-breadcrumb, .nts-bc-*, .nts-new-btn,
 *                      .nts-body, .nts-recent-section, .nts-recent-row, .nts-recent-card,
 *                      .nts-rc-*, .nts-section-heading, .nts-section-title, .nts-section-help,
 *                      .nts-table-section, .nts-result-count, .nts-controls, .nts-search,
 *                      .nts-search-input, .nts-type-filter, .nts-sort-select, .nts-table-wrap,
 *                      .nts-table, .nts-note-row, .nts-name-cell, .nts-doc-icon, .nts-row-name,
 *                      .nts-entity-chip, .nts-ec-dot, .nts-access-cell, .nts-author-cell,
 *                      .nts-modified-cell, .nts-none, .nts-state-msg, .nts-empty, .nts-error,
 *                      .nts-retry, .nts-skel-row, .nts-skel-shimmer
 *   NoteEditorView.js: .maw-note-detail-tab, .nts-tab-wrap, .nts-tab-loading, .nts-tab-spinner,
 *                      .nts-note-tab-host, .nts-popout-btn, .nts-sheet-tab, .nts-sheet-head,
 *                      .nts-sheet-title, .nts-sheet-actions, .note-sheet-card, .note-sheet-icon
 *   Shared (external consumers -- keep):
 *     .notes-entity-chip / .notes-ec-dot   (GraphDetailView, detailed views)
 *     .maw-note-modal-body guards          (graph note modal, body-appended)
 */

/* ============================================================
   Root -- fills the WorkspaceView pane body
   ============================================================ */
.maw-shell .maw-notes-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.maw-shell .nts-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
}
.maw-shell .nts-library-slot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.maw-shell .nts-library {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ============================================================
   Toolbar (breadcrumb + New note)
   ============================================================ */
.maw-shell .nts-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .nts-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ink-mut);
}
.maw-shell .nts-breadcrumb .maw-ic svg { width: 14px; height: 14px; }
.maw-shell .nts-bc-proj { font-weight: 600; color: var(--ink); }
.maw-shell .nts-bc-sep { color: var(--ink-dim); }
.maw-shell .nts-bc-count { color: var(--ink-dim); margin-left: 4px; }
.maw-shell .nts-tb-gap { flex: 1; }
.maw-shell .nts-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.maw-shell .nts-new-btn svg { width: 12px; height: 12px; }

/* ============================================================
   Body (scrolls): recently opened + table
   ============================================================ */
.maw-shell .nts-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 24px;
}

.maw-shell .nts-section-heading { margin: 6px 0 10px; }
.maw-shell .nts-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-mut);
}
.maw-shell .nts-section-help,
.maw-shell .nts-result-count {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* Recently opened shelf */
.maw-shell .nts-recent-section { margin-bottom: 18px; }
.maw-shell .nts-recent-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.maw-shell .nts-recent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 230px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.maw-shell .nts-recent-card:hover {
  border-color: var(--indigo-bd);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.maw-shell .nts-rc-glyph {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .nts-rc-glyph svg { width: 17px; height: 17px; }
.maw-shell .nts-rc-info { min-width: 0; }
.maw-shell .nts-rc-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .nts-rc-meta { margin-top: 2px; }
.maw-shell .nts-rc-when {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--ink-dim);
}

/* Controls row */
.maw-shell .nts-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.maw-shell .nts-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 160px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.maw-shell .nts-search:focus-within {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-shell .nts-search svg { width: 13px; height: 13px; color: var(--ink-dim); flex: none; }
.maw-shell .nts-search-input {
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}
.maw-shell .nts-search-input::placeholder { color: var(--ink-dim); }
.maw-shell .nts-type-filter,
.maw-shell .nts-sort-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink-mut);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* Notes table */
.maw-shell .nts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.maw-shell .nts-table thead th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-dim);
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.maw-shell .nts-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.maw-shell .nts-table tbody .nts-note-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.maw-shell .nts-table tbody .nts-note-row:hover { background: var(--panel-soft); }
.maw-shell .nts-name-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.maw-shell .nts-doc-icon {
  flex: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .nts-doc-icon svg { width: 14px; height: 14px; }
.maw-shell .nts-row-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.maw-shell .nts-access-cell,
.maw-shell .nts-author-cell,
.maw-shell .nts-modified-cell {
  color: var(--ink-mut);
  white-space: nowrap;
}
.maw-shell .nts-none { color: var(--ink-dim); }

/* Entity chip (nts- variant; navigable ones get the pointer + lift) */
.maw-shell .nts-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: Menlo, Monaco, Consolas, monospace;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}
.maw-shell .nts-entity-chip--nav {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.maw-shell .nts-entity-chip--nav:hover {
  box-shadow: 0 1px 4px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}
.maw-shell .nts-ec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

/* States + skeleton */
.maw-shell .nts-state-msg {
  padding: 26px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}
.maw-shell .nts-state-msg.nts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.maw-shell .nts-state-msg.nts-error { color: var(--clay, #c2562f); }
.maw-shell .nts-retry { color: var(--blue, #2f6fb0); }
.maw-shell .nts-skel-row {
  position: relative;
  height: 40px;
  border-radius: 7px;
  background: var(--line-hi);
  opacity: 0.5;
  overflow: hidden;
  margin-bottom: 8px;
}
.maw-shell .nts-skel-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%);
  animation: ntsSkelSweep 1.2s ease-in-out infinite;
}
@keyframes ntsSkelSweep { to { transform: translateX(100%); } }

/* ============================================================
   Note DETAIL TAB host (renders the REAL notes app editor)
   ============================================================ */
.maw-shell .maw-note-detail-tab {
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.maw-shell .maw-note-detail-tab .nts-tab-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.maw-shell .nts-tab-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--ink-dim);
  font-size: 12px;
}
.maw-shell .nts-tab-spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: ntsTabSpin 0.7s linear infinite;
}
@keyframes ntsTabSpin { to { transform: rotate(360deg); } }

/* The real editor renders .note-editor (styled by spa/notes.css) inside our
   pane; give it the pane's full height, its own scroll and some breathing room. */
.maw-shell .nts-note-tab-host { overflow-y: auto; background: var(--panel); }
.maw-shell .nts-note-tab-host .note-editor { padding: 14px 18px 20px; }
.maw-shell .nts-popout-btn { text-decoration: none; }

/* ============================================================
   Sheet notes (workbook-pinned; assembler-specific)
   ============================================================ */
.maw-shell .nts-sheet-tab {
  padding: 16px 18px;
  overflow-y: auto;
}
.maw-shell .nts-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.maw-shell .nts-sheet-title {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.maw-shell .nts-sheet-actions { display: flex; gap: 8px; }
.maw-shell .note-sheet-card { display:flex; align-items:center; gap:12px; margin:16px 0; padding:14px; border:1px solid var(--indigo-bd); border-radius:9px; background:var(--indigo-soft); }
.maw-shell .note-sheet-card > div:nth-child(2) { flex:1; min-width:0; }
.maw-shell .note-sheet-card strong, .maw-shell .note-sheet-card small { display:block; color:var(--ink); }
.maw-shell .note-sheet-card small { margin-top:4px; color:var(--ink-dim); font-size:10.5px; }
.maw-shell .note-sheet-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--panel);
  color: var(--indigo);
}

/* ============================================================
   Shared blocks kept for EXTERNAL consumers -- do not retire with the clone
   ============================================================ */

/* Entity chip used by GraphDetailView + detailed views' note lists */
.maw-shell .notes-entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: Menlo, Monaco, Consolas, monospace;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 999px;
  white-space: nowrap;
}
.maw-shell .notes-entity-chip .notes-ec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

/* Rich note HTML rendered in-shell (GraphDetailView's note pane) */
.maw-shell .note-detail-rich {
  white-space: normal;
}
.maw-shell .note-detail-rich img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line, #e5e0d3);
}
.maw-shell .note-detail-rich p { margin: 0 0 10px; }
.maw-shell .note-detail-rich ul,
.maw-shell .note-detail-rich ol { margin: 0 0 10px; padding-left: 22px; }
.maw-shell .note-detail-rich h1,
.maw-shell .note-detail-rich h2,
.maw-shell .note-detail-rich h3 { margin: 12px 0 6px; line-height: 1.25; }
.maw-shell .note-detail-rich table {
  border-collapse: collapse;
  max-width: 100%;
}
.maw-shell .note-detail-rich table td,
.maw-shell .note-detail-rich table th {
  border: 1px solid var(--line, #e5e0d3);
  padding: 4px 8px;
}
.maw-shell .note-detail-rich a { color: var(--blue, #2f6fb0); }

/* Graph note modal renders into document.body (OUTSIDE .maw-shell), so its rich
   content needs un-scoped guards to keep images/tables in-bounds. */
.maw-note-modal-body img { max-width: 100%; height: auto; border-radius: 6px; }
.maw-note-modal-body table { border-collapse: collapse; max-width: 100%; }
.maw-note-modal-body table td,
.maw-note-modal-body table th { border: 1px solid #e5e0d3; padding: 4px 8px; }
.maw-note-modal-body p { margin: 0 0 10px; }

.maw-shell .maw-artifacts-app { display:flex; flex-direction:column; height:100%; min-height:0; min-width:0; }
.maw-shell .maw-artifacts-layout { display:grid; grid-template-columns:360px minmax(0, 1fr); height:100%; min-width:0; overflow:hidden; }
.maw-shell .maw-artifacts-list-slot { display:flex; min-width:0; min-height:0; border-right:1px solid var(--line); background:var(--panel-soft); }
.maw-shell .maw-artifacts-detail-slot { display:flex; min-width:0; min-height:0; overflow:hidden; background:var(--panel); }
.maw-shell .maw-artifacts-right { display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.maw-shell .maw-artifacts-operations-slot { flex:0 1 auto; max-height:48%; overflow:auto; border-bottom:1px solid var(--line); background:var(--panel-soft); }
.maw-shell .maw-artifacts-preview-slot { display:flex; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
.maw-shell .maw-artifacts-list { display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; }
.maw-shell .maw-artifacts-toolbar { display:grid; grid-template-columns:1fr; gap:7px; padding:12px; border-bottom:1px solid var(--line); background:var(--panel-soft); }
.maw-shell .maw-artifacts-toolbar-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.maw-shell .maw-artifacts-toolbar-title { color:var(--ink); font-size:13px; font-weight:650; }
.maw-shell .maw-artifacts-toolbar-actions { display:flex; gap:6px; }
.maw-shell .maw-artifacts-import-controls { display:flex; gap:6px; }
.maw-shell .maw-artifacts-import-file { display:none; }

/* Per-file import review reuses the shared workspace modal shell. */
.maw-shell.maw-artifact-import-modal .maw-artifact-import-panel { width:min(760px, 94vw); }
.maw-shell .maw-artifact-import-head { padding:22px 24px 16px; border-bottom:1px solid var(--line); }
.maw-shell .maw-artifact-import-head h2 { margin:0 0 5px; color:var(--navy); font-size:19px; }
.maw-shell .maw-artifact-import-head p { margin:0; color:var(--ink-mut); font-size:12px; line-height:1.5; }
.maw-shell .maw-artifact-import-rows { overflow:auto; min-height:0; max-height:56vh; padding:8px 16px; background:var(--panel); }
.maw-shell .maw-artifact-import-row { display:grid; grid-template-columns:34px minmax(0, 1fr) 150px 160px; align-items:center; gap:10px; padding:11px 8px; border-bottom:1px solid var(--line); }
.maw-shell .maw-artifact-import-row:last-child { border-bottom:0; }
.maw-shell .maw-artifact-import-file-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:var(--indigo-soft); color:var(--indigo); }
.maw-shell .maw-artifact-import-file { display:flex; flex-direction:column; min-width:0; }
.maw-shell .maw-artifact-import-file strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; }
.maw-shell .maw-artifact-import-file small { margin-top:3px; color:var(--ink-mut); font-size:10px; }
.maw-shell .maw-artifact-import-kind { width:100%; min-width:0; height:30px; border:1px solid var(--line-hi); border-radius:6px; background:var(--panel-soft); color:var(--ink); font-size:11px; padding:0 8px; }
.maw-shell .maw-artifact-import-kind:focus { outline:2px solid var(--indigo-bd); outline-offset:1px; }
.maw-shell .maw-artifact-import-state { text-align:right; color:var(--ink-mut); font-size:10.5px; white-space:nowrap; }
.maw-shell .maw-artifact-import-row.is-success .maw-artifact-import-state { color:#2f7a55; }
.maw-shell .maw-artifact-import-row.is-error .maw-artifact-import-state { color:var(--orange-strong); }
.maw-shell .maw-artifact-import-error { display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:normal; }
.maw-shell .maw-artifact-import-error small { max-width:160px; color:var(--ink-mut); font-size:9.5px; line-height:1.25; overflow-wrap:anywhere; }
.maw-shell .maw-artifact-import-summary { min-height:17px; padding:8px 24px 0; color:var(--ink-mut); font-size:11px; }
.maw-shell .maw-artifact-import-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 24px 18px; }
@media (max-width:680px) {
  .maw-shell .maw-artifact-import-row { grid-template-columns:30px minmax(0, 1fr); }
  .maw-shell .maw-artifact-import-row label, .maw-shell .maw-artifact-import-state { grid-column:2; text-align:left; }
}
.maw-shell .maw-artifacts-toolbar input, .maw-shell .maw-artifacts-toolbar select { box-sizing:border-box; width:100%; height:30px; padding:0 9px; border:1px solid var(--line-hi); border-radius:7px; outline:0; background:var(--panel); color:var(--ink); font:inherit; font-size:12px; }
.maw-shell .maw-artifacts-rows { flex:1; min-width:0; overflow:auto; padding:6px 0; }
.maw-shell .maw-artifacts-row { min-width:0; margin:1px 6px; padding:10px 11px; border:1px solid transparent; border-radius:8px; cursor:pointer; }
.maw-shell .maw-artifacts-row:hover { background:var(--panel-hover); }
.maw-shell .maw-artifacts-row--selected { border-color:var(--indigo-bd); background:var(--indigo-soft); }
.maw-shell .maw-artifacts-row--checked { border-color:var(--mint-bd, #9bd9c7); box-shadow:inset 3px 0 var(--mint, #2f8a68); }
.maw-shell .maw-artifacts-check { flex:none; margin:0; }
.maw-shell .maw-artifacts-row-top, .maw-shell .maw-artifacts-row-line { display:flex; align-items:center; min-width:0; gap:7px; }
.maw-shell .maw-artifacts-row-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-size:12px; font-weight:600; }
.maw-shell .maw-artifacts-type-badge { display:inline-flex; flex:none; padding:2px 6px; border:1px solid var(--indigo-bd); border-radius:10px; background:var(--indigo-soft); color:var(--indigo); font-size:9.5px; font-weight:650; text-transform:uppercase; }
.maw-shell .maw-artifacts-row-line { justify-content:space-between; margin-top:6px; color:var(--ink-dim); font-size:10.5px; }
.maw-shell .maw-artifacts-worker { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maw-shell .maw-artifacts-storage { flex:none; padding:1px 5px; border-radius:8px; background:var(--line); color:var(--ink-mut); }
.maw-shell .maw-artifacts-row-created { margin-top:5px; overflow:hidden; color:var(--ink-dim); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.maw-shell .maw-artifacts-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid var(--line); background:var(--panel-soft); }
.maw-shell .maw-artifacts-page-label { color:var(--ink-dim); font-size:10.5px; text-align:center; }
.maw-shell .maw-artifacts-empty, .maw-shell .maw-artifacts-detail-empty { padding:22px; color:var(--ink-dim); font-size:12px; }
.maw-shell .maw-artifacts-detail-empty { display:flex; flex:1; align-items:center; justify-content:center; flex-direction:column; gap:7px; text-align:center; }
.maw-shell .maw-artifacts-detail-empty small { max-width:300px; color:var(--ink-dim); }
.maw-shell .maw-artifacts-empty-icon { font-size:28px; }
.maw-shell .maw-artifacts-detail { flex:1; min-width:0; min-height:0; overflow:auto; }
.maw-shell .maw-artifacts-detail-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 26px 18px; border-bottom:1px solid var(--line); }
.maw-shell .maw-artifacts-detail-heading { min-width:0; }
.maw-shell .maw-artifacts-detail-kicker { display:flex; align-items:center; gap:7px; color:var(--indigo); font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.maw-shell .maw-artifacts-detail-header h2 { margin:7px 0 0; overflow-wrap:anywhere; color:var(--ink); font-size:19px; font-weight:650; }
.maw-shell .maw-artifacts-actions { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.maw-shell .maw-artifacts-download { text-decoration:none; }
.maw-shell .maw-artifacts-metadata { padding:14px 26px; border-bottom:1px solid var(--line); }
.maw-shell .maw-artifacts-metadata dl { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 18px; margin:0; }
.maw-shell .maw-artifacts-metadata dl > div { min-width:0; }
.maw-shell .maw-artifacts-metadata dt { margin-bottom:3px; color:var(--ink-dim); font-size:10px; font-weight:600; text-transform:uppercase; }
.maw-shell .maw-artifacts-metadata dd { margin:0; overflow-wrap:anywhere; color:var(--ink-mut); font-size:11.5px; }
.maw-shell .maw-artifacts-viewer { min-width:0; padding:18px 26px 26px; }
.maw-shell .maw-artifacts-viewer-body { min-width:0; }
.maw-shell .maw-artifacts-viewer-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:11px; }
.maw-shell .maw-artifacts-viewer-heading h3 { margin:0 0 4px; color:var(--ink); font-size:12px; font-weight:650; }
.maw-shell .maw-artifacts-viewer-heading p { margin:0; color:var(--ink-dim); font-size:11px; }
.maw-shell .maw-artifacts-content-state, .maw-shell .maw-artifacts-viewer-message { padding:13px; border:1px solid var(--line); border-radius:7px; background:var(--panel-soft); color:var(--ink-dim); font-size:11.5px; }
.maw-shell .maw-artifacts-text-preview { box-sizing:border-box; max-width:100%; max-height:520px; margin:0; padding:13px; overflow:auto; border:1px solid var(--line); border-radius:7px; background:var(--panel-soft); color:var(--ink-mut); font:11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.maw-shell .maw-artifacts-image { display:none; max-width:100%; max-height:600px; object-fit:contain; }
.maw-shell .maw-artifacts-image--loaded { display:block; }
.maw-shell .maw-artifacts-table-wrap { max-width:100%; max-height:500px; overflow:auto; border:1px solid var(--line); border-radius:7px; }
.maw-shell .maw-artifacts-table-wrap table { width:max-content; min-width:100%; border-collapse:collapse; background:var(--panel); font-size:11px; }
.maw-shell .maw-artifacts-table-wrap th, .maw-shell .maw-artifacts-table-wrap td { max-width:320px; padding:7px 9px; overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink-mut); text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.maw-shell .maw-artifacts-table-wrap th { position:sticky; top:0; z-index:1; background:var(--panel-soft); color:var(--ink); font-weight:650; }
.maw-shell .maw-artifacts-table-note { margin-top:7px; color:var(--ink-dim); font-size:10.5px; }
.maw-shell .maw-artifacts-chart-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.maw-shell .maw-artifacts-chart { display:block; width:100%; min-width:520px; height:auto; color:var(--ink-dim); }
.maw-shell .maw-artifacts-chart text { fill:currentColor; font-size:10px; }
.maw-shell .maw-artifacts-chart line, .maw-shell .maw-artifacts-chart .domain { stroke:var(--line-hi); }
.maw-shell .maw-artifacts-error { color:var(--clay, #c2562f); }

/* Phase 22 project workbench. */
.maw-shell .maw-artifacts-workbench { padding:13px 16px; }
.maw-shell .maw-artifacts-workbench-head, .maw-shell .maw-artifacts-worker-card-head, .maw-shell .maw-artifacts-stage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.maw-shell .maw-artifacts-workbench-head strong, .maw-shell .maw-artifacts-worker-card-head strong, .maw-shell .maw-artifacts-stage-head strong { display:block; color:var(--ink); font-size:12px; }
.maw-shell .maw-artifacts-workbench-head small, .maw-shell .maw-artifacts-worker-card-head small, .maw-shell .maw-artifacts-stage-head small { display:block; margin-top:3px; color:var(--ink-dim); font-size:10.5px; }
.maw-shell .maw-artifacts-quick-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.maw-shell .maw-artifacts-selection-rail { display:flex; gap:6px; margin:10px 0; overflow:auto; }
.maw-shell .maw-artifacts-selection-rail > span { display:grid; grid-template-columns:20px minmax(90px,auto); flex:none; min-width:165px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); font-size:10.5px; }
.maw-shell .maw-artifacts-selection-rail b { grid-row:1/3; align-self:center; color:var(--indigo); }
.maw-shell .maw-artifacts-selection-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maw-shell .maw-artifacts-selection-rail small { display:block; color:var(--ink-dim); }
.maw-shell .maw-artifacts-selection-actions { display:flex; grid-column:2; gap:3px; margin-top:5px; }
.maw-shell .maw-artifacts-selection-actions button { width:22px; height:20px; padding:0; border:1px solid var(--line); border-radius:4px; background:var(--panel-soft); color:var(--ink-dim); font-size:9px; }
.maw-shell .maw-artifacts-selection-actions button:hover:not(:disabled) { border-color:var(--indigo-bd); color:var(--indigo); }
.maw-shell .maw-artifacts-catalog-bar { display:flex; gap:6px; margin-top:10px; }
.maw-shell .maw-artifacts-catalog-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
.maw-shell .maw-artifacts-catalog-tools select { height:28px; padding:0 7px; border:1px solid var(--line-hi); border-radius:6px; background:var(--panel); color:var(--ink); font:inherit; font-size:10.5px; }
.maw-shell .maw-artifacts-compatible-toggle { display:inline-flex; align-items:center; gap:4px; color:var(--ink-dim); font-size:10.5px; }
.maw-shell .maw-artifacts-compatible-toggle input { margin:0; }
.maw-shell .maw-artifacts-catalog-bar input, .maw-shell .maw-artifacts-input-row input, .maw-shell .maw-artifacts-input-row select, .maw-shell .maw-artifacts-input-row textarea, .maw-shell .maw-artifacts-stage-row input, .maw-shell .maw-artifacts-stage-row select { box-sizing:border-box; min-width:0; height:30px; padding:0 8px; border:1px solid var(--line-hi); border-radius:6px; background:var(--panel); color:var(--ink); font:inherit; font-size:11px; }
.maw-shell .maw-artifacts-input-row textarea { height:54px; padding-top:6px; resize:vertical; }
.maw-shell .maw-artifacts-catalog-bar input { flex:1; }
.maw-shell .maw-artifacts-catalog-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; max-height:170px; margin-top:7px; overflow:auto; }
.maw-shell .maw-artifacts-worker-row { min-width:0; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); text-align:left; }
.maw-shell .maw-artifacts-worker-row:hover { border-color:var(--indigo-bd); }
.maw-shell .maw-artifacts-worker-row strong, .maw-shell .maw-artifacts-worker-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.maw-shell .maw-artifacts-worker-row small { margin-top:2px; color:var(--ink-dim); }
.maw-shell .maw-artifacts-worker-card, .maw-shell .maw-artifacts-stage-card { margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.maw-shell .maw-artifacts-side-effect, .maw-shell .maw-artifacts-readonly { padding:3px 7px; border-radius:9px; font-size:9.5px; font-weight:650; }
.maw-shell .maw-artifacts-worker-badges { display:flex; align-items:center; gap:6px; }
.maw-shell .maw-artifacts-worker-favorite { width:25px; height:25px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--panel-soft); color:#c59024; }
.maw-shell .maw-artifacts-side-effect { background:#fff1e8; color:#a74d1b; }
.maw-shell .maw-artifacts-readonly { background:var(--mint-soft, #e8f7f1); color:var(--mint, #2f8a68); }
.maw-shell .maw-artifacts-input-row { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(180px,1.3fr); align-items:center; gap:8px; margin-top:7px; color:var(--ink); font-size:10.5px; }
.maw-shell .maw-artifacts-input-row small { display:block; color:var(--ink-dim); }
.maw-shell .maw-artifacts-input-warning { grid-column:2; color:var(--clay, #c2562f)!important; }
.maw-shell .maw-artifacts-run-worker { margin-top:9px; }
.maw-shell .maw-artifacts-stage-row { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(140px,1fr) minmax(150px,1fr) auto; align-items:center; gap:7px; margin-top:7px; padding-top:7px; border-top:1px solid var(--line); }
.maw-shell .maw-artifacts-stage-row strong, .maw-shell .maw-artifacts-stage-row small { display:block; color:var(--ink); font-size:10.5px; }
.maw-shell .maw-artifacts-stage-row small { color:var(--ink-dim); }
.maw-shell .maw-artifacts-stage-notice { margin-top:7px; padding:7px 9px; border:1px solid var(--indigo-bd); border-radius:6px; background:var(--indigo-soft); color:var(--ink-mut); font-size:10.5px; }
.maw-shell .maw-artifacts-stage-summary { min-width:0; }
.maw-shell .maw-artifacts-stage-summary pre { max-height:120px; margin:5px 0 0; padding:6px; overflow:auto; border:1px solid var(--line); border-radius:5px; background:var(--panel-soft); color:var(--ink-dim); font:9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre; }
.maw-shell .is-saved { background:var(--mint-soft, #e8f7f1)!important; color:var(--mint, #2f8a68)!important; }

/* Bounded workbook editor used by sheet-format notes. */
.maw-shell .maw-artifacts-workbook-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.maw-shell .maw-artifacts-workbook-tabs, .maw-shell .maw-artifacts-workbook-actions { display:flex; align-items:center; gap:5px; min-width:0; }
.maw-shell .maw-artifacts-workbook-tabs { overflow:auto; }
.maw-shell .maw-artifacts-workbook-tab, .maw-shell .maw-artifacts-workbook-add { padding:5px 8px; border:1px solid var(--line); border-radius:6px; background:var(--panel-soft); color:var(--ink-dim); font-size:10.5px; white-space:nowrap; }
.maw-shell .maw-artifacts-workbook-tab.is-active { border-color:var(--indigo-bd); background:var(--indigo-soft); color:var(--indigo); }
.maw-shell .maw-artifacts-sheet-name { width:130px; height:29px; padding:0 7px; border:1px solid var(--line-hi); border-radius:6px; background:var(--panel); color:var(--ink); }
.maw-shell .maw-artifacts-sheet-wrap { max-height:520px; overflow:auto; border:1px solid var(--line); }
.maw-shell .maw-artifacts-sheet-wrap table { border-collapse:collapse; min-width:100%; }
.maw-shell .maw-artifacts-sheet-wrap th { min-width:72px; height:24px; border:1px solid var(--line); background:var(--panel-soft); color:var(--ink-dim); font-size:10px; }
.maw-shell .maw-artifacts-sheet-wrap th:first-child { min-width:34px; }
.maw-shell .maw-artifacts-sheet-wrap td { padding:0; border:1px solid var(--line); }
.maw-shell .maw-artifacts-cell { box-sizing:border-box; width:100%; min-width:90px; height:26px; padding:2px 5px; border:0; outline:0; background:var(--panel); color:var(--ink); font-size:10.5px; }
.maw-shell .maw-artifacts-cell:focus { box-shadow:inset 0 0 0 2px var(--indigo-bd); }
.maw-shell .maw-artifacts-workbook-status { margin-top:7px; font-size:10.5px; }
@media (max-width: 900px) { .maw-shell .maw-artifacts-layout { grid-template-columns:300px minmax(0, 1fr); } .maw-shell .maw-artifacts-detail-header, .maw-shell .maw-artifacts-metadata, .maw-shell .maw-artifacts-viewer { padding-left:16px; padding-right:16px; } .maw-shell .maw-artifacts-metadata dl { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Loading spinner (detail load + every content fetch). */
.maw-shell .maw-artifacts-spinner { display:inline-block; width:14px; height:14px; margin-right:8px; border:2px solid var(--line-hi); border-top-color:var(--indigo); border-radius:50%; vertical-align:-2px; animation:maw-artifacts-spin 0.7s linear infinite; }
@keyframes maw-artifacts-spin { to { transform:rotate(360deg); } }

/* Image viewer: framed backdrop, dimension caption, pixel-upscale for tiny probes. */
.maw-shell .maw-artifacts-image-frame { display:flex; align-items:center; justify-content:center; min-height:120px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.maw-shell .maw-artifacts-image { max-width:100%; opacity:0; transition:opacity 0.15s ease; }
.maw-shell .maw-artifacts-image--loaded { opacity:1; }
.maw-shell .maw-artifacts-image--tiny { width:96px; image-rendering:pixelated; }
.maw-shell .maw-artifacts-image-caption { margin-top:6px; color:var(--ink-dim); font-size:10.5px; text-align:center; }

/* AgentsView body-only wrapper (mounts into pane body, no pane chrome) */
.maw-shell .maw-agents-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Two-region interior layout */
.maw-shell .agents-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  /* minmax(0,1fr) row bounds the grid to its parent's height so each pane
     (list, chat) scrolls internally instead of growing past the viewport. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Grid items must allow shrink (min-height/width:0) so their height:100%
   children become scroll containers rather than overflowing the row. */
.maw-shell .maw-agents-list-slot {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- LEFT: agent list panel ---- */
.maw-shell .maw-agent-list-panel {
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.maw-shell .agents-list-wrap {
  flex: 1;
  overflow: auto;
  padding: 6px 0 10px;
}

/* ---- List toolbar: Prebuilt/Custom segmented toggle + the one
       context-matched action button (Import Agent / Build Agent).
       Replaced the two stacked section headers (Rahul 2026-07-09). ---- */
.maw-shell .agents-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px 14px;
}
/* Equal-width halves so the sliding thumb is a simple 50% translate. */
.maw-shell .agents-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--line);
  border-radius: 999px;
  padding: 2px;
}
/* The active-state background lives on THIS element (not the buttons) so a
   tab flip SLIDES it across instead of jumping (Rahul 2026-07-09). */
.maw-shell .agents-seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  background: var(--panel);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.maw-shell .agents-seg--custom .agents-seg-thumb { transform: translateX(100%); }
.maw-shell .agents-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: color .15s;
}
.maw-shell .agents-seg-btn:hover { color: var(--ink); }
.maw-shell .agents-seg-btn.is-active { color: var(--navy); }
.maw-shell .agents-seg-btn.is-active .agents-group-count {
  background: var(--indigo-soft);
  color: var(--indigo);
}

/* ---- Loading skeleton rows (reuses agent-chat.css's .maw-skel-avatar /
       .maw-skel-bar shimmer atoms; widths staggered here so the tpl stays
       free of inline styles). ---- */
.maw-shell .agents-skel-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  margin: 1px 6px;
}
.maw-shell .agents-skel-row .maw-skel-avatar { width: 26px; height: 26px; }
.maw-shell .agents-skel-body { flex: 1; min-width: 0; }
.maw-shell .agents-skel-body .maw-skel-bar { width: 55%; }
.maw-shell .agents-skel-body .maw-skel-bar--dim { width: 82%; }
.maw-shell .agents-skel-row:nth-child(odd) .maw-skel-bar { width: 42%; }
.maw-shell .agents-skel-row:nth-child(odd) .maw-skel-bar--dim { width: 68%; }

/* Section header (Built-in / Custom) */
.maw-shell .agents-group-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px 4px;
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-dim);
}
.maw-shell .agents-group-count {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 10px;
  padding: 1px 6px;
}
.maw-shell .maw-agents-group-empty {
  padding: 4px 14px 10px;
  font-size: 11.5px;
  color: var(--ink-dim);
  font-style: italic;
}

/* Agent row */
.maw-shell .maw-agents-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  border-radius: 8px;
  margin: 1px 6px;
  cursor: pointer;
  transition: background .1s;
  border: 1px solid transparent;
  position: relative;
}
.maw-shell .maw-agents-row:hover { background: var(--panel-hover); }
.maw-shell .maw-agents-row.selected {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}
.maw-shell .maw-agents-row.selected::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--indigo);
}

/* Row avatar (agent glyph, mirrors the Fora rail icon) */
.maw-shell .agents-row-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #6d45c9, var(--t-agent));
  color: #fff;
  flex: none;
  margin-top: 1px;
}
.maw-shell .agents-row-avatar svg { width: 14px; height: 14px; }
.maw-shell .agents-row-avatar-custom {
  background: linear-gradient(145deg, #3b6ea5, var(--blue));
}

.maw-shell .agents-row-body { flex: 1; min-width: 0; }
.maw-shell .agents-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.maw-shell .maw-agents-row.selected .agents-row-title { color: var(--indigo); }

/* Built-in / Custom badge (extends the shared .maw-chip atom) */
.maw-shell .agents-badge {
  font-size: 9.5px;
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-weight: 700;
}
.maw-shell .agents-badge-built-in {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .agents-badge-custom {
  border-color: var(--blue-bd, var(--line-hi));
  background: var(--blue-soft, var(--panel));
  color: var(--blue, var(--ink-mut));
}

/* Introduction summary (short, 1-2 lines, clamped) */
.maw-shell .agents-row-intro {
  font-size: 11.5px;
  color: var(--ink-mut);
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.maw-shell .agents-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.maw-shell .agents-tool-count {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

/* ---- Loading / empty / error states (mirrors tasks.css M2 conventions) ---- */
.maw-shell .maw-agents-loading,
.maw-shell .maw-agents-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}
.maw-shell .maw-agents-error { color: var(--orange-strong); }
.maw-shell .maw-agents-retry {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--indigo);
}

/* ---- RIGHT: testing panel slot (empty state until an agent is picked) ---- */
.maw-shell .maw-agents-detail-slot {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.maw-shell .maw-agents-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- RIGHT: live chat testing panel (Phase B) ----
   Header is fixed height; the chat container is flex:1/min-height:0 so the
   mounted ForaView child (height:100% internally) fills the remainder and
   its own composer sits pinned at the bottom, same pattern as
   notes-editor-slot / maw-pane-body hosting a full-height content view. */
.maw-shell .agents-detail-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.maw-shell .agents-detail-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.maw-shell .agents-detail-hd-main {
  min-width: 0;
  flex: 1;
}
.maw-shell .agents-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.maw-shell .agents-detail-sub {
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.maw-shell .agents-detail-newconv {
  height: 30px;
  font-size: 12px;
  flex: none;
  margin-top: 1px;
}
.maw-shell .agents-detail-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =====================================================================
 * Agent Builder drawer (Agents Page build spec, Phase C)
 * A right-side overlay mounted at the AgentsView root. Scoped to .maw-shell,
 * tokens from shell/tokens.css. ASCII-only.
 * ===================================================================== */

/* Make the app the positioning context for the overlay. */
.maw-shell .maw-agents-app,
.maw-shell .agents-fullview { position: relative; }

.maw-shell .maw-agent-builder { position: absolute; inset: 0; z-index: 40; }

.maw-shell .agent-builder-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 32, 18, .34);
  animation: maw-ab-fade .14s ease-out;
}

.maw-shell .agent-builder-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: maw-ab-slide .18s ease-out;
}

@keyframes maw-ab-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes maw-ab-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---- header ---- */
.maw-shell .agent-builder-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.maw-shell .agent-builder-hd-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.maw-shell .maw-agent-builder-close {
  border: 0;
  background: transparent;
  color: var(--ink-mut);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  line-height: 0;
  transition: var(--t-agent);
}
.maw-shell .maw-agent-builder-close svg { width: 18px; height: 18px; }
.maw-shell .maw-agent-builder-close:hover { background: var(--panel-hover); color: var(--ink); }

/* ---- flash ---- */
.maw-shell .agent-builder-flash {
  display: none;
  margin: 10px 18px 0;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--indigo-soft);
  color: var(--navy);
  border: 1px solid var(--indigo-bd);
}
.maw-shell .agent-builder-flash.is-shown  { display: block; }
.maw-shell .agent-builder-flash.is-error  { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.maw-shell .agent-builder-warnings {
  display: none;
  margin: 10px 18px 0;
  padding: 9px 11px;
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
}
.maw-shell .agent-builder-warnings.is-shown { display: block; }
.maw-shell .agent-builder-warnings strong { display: block; margin-bottom: 3px; }
.maw-shell .agent-builder-warnings ul { margin: 0; padding-left: 17px; }

.maw-shell .agent-builder-loading { padding: 30px 18px; color: var(--ink-mut); font-size: 13px; }

/* ---- body (scrolls) ---- */
.maw-shell .agent-builder-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 4px;
}

.maw-shell .agent-builder-field { display: block; margin-bottom: 15px; }
.maw-shell .agent-builder-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mut);
  margin-bottom: 5px;
}
.maw-shell .agent-builder-opt { font-weight: 400; color: var(--ink-dim); }

.maw-shell .agent-builder-input,
.maw-shell .agent-builder-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-hi);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  transition: var(--t-agent);
}
.maw-shell .agent-builder-textarea { resize: vertical; line-height: 1.5; }
.maw-shell .maw-agent-builder-prompt { font-family: var(--font-mono); font-size: 12px; }
.maw-shell .agent-builder-input:focus,
.maw-shell .agent-builder-textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

.maw-shell .agent-builder-linkbtn {
  border: 0;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
}
.maw-shell .agent-builder-linkbtn:hover { text-decoration: underline; }
.maw-shell .agent-builder-help {
  display: block;
  margin: -1px 0 7px;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.4;
}

.maw-shell .agent-builder-template-list,
.maw-shell .agent-builder-agent-list {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  max-height: 230px;
  overflow-y: auto;
  padding: 4px;
}
.maw-shell .agent-builder-template-group { margin-bottom: 5px; }
.maw-shell .agent-builder-template-summary {
  display: block;
  margin: 5px 0 7px;
  color: var(--ink-mut);
  font-size: 10.5px;
}
.maw-shell .agent-builder-template-row,
.maw-shell .agent-builder-child-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.maw-shell .agent-builder-template-row:hover,
.maw-shell .agent-builder-child-row:hover { background: var(--panel-hover); }
.maw-shell .agent-builder-template-row.is-blocked { cursor: not-allowed; opacity: .72; }
.maw-shell .agent-builder-template-row.is-blocked:hover { background: transparent; }
.maw-shell .agent-builder-child-row.is-blocked { cursor: not-allowed; opacity: .72; }
.maw-shell .agent-builder-child-row.is-blocked:hover { background: transparent; }
.maw-shell .agent-builder-template-row input,
.maw-shell .agent-builder-child-row input { margin: 2px 0 0; }
.maw-shell .agent-builder-template-row span,
.maw-shell .agent-builder-child-row span { min-width: 0; }
.maw-shell .agent-builder-template-row strong,
.maw-shell .agent-builder-child-row strong { display: block; color: var(--ink); font-size: 12px; font-weight: 600; }
.maw-shell .agent-builder-template-row small,
.maw-shell .agent-builder-child-row small { display: block; color: var(--ink-dim); font-size: 10.5px; line-height: 1.35; margin-top: 2px; }
.maw-shell small.agent-builder-template-blocked-reason { color: var(--red); }
.maw-shell .agent-builder-blocked-templates,
.maw-shell .agent-builder-blocked-agents {
  display: none;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  color: var(--ink);
  font-size: 10.5px;
}
.maw-shell .agent-builder-blocked-templates.is-shown,
.maw-shell .agent-builder-blocked-agents.is-shown { display: block; }
.maw-shell .agent-builder-blocked-row { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.maw-shell .agent-builder-blocked-row span { flex: 1; min-width: 0; }
.maw-shell .agent-builder-blocked-row button { flex: none; }
.maw-shell .agent-builder-required-tools { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.maw-shell .agent-builder-required-chip {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid var(--indigo-bd);
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--navy);
  font-size: 10.5px;
}
.maw-shell .agent-builder-empty-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  padding: 11px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--radius-sm);
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .agent-builder-empty-card small { grid-column: 1 / -1; color: var(--ink-dim); }
.maw-shell .agent-builder-empty-card button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- tool picker ---- */
.maw-shell .agent-builder-toolsearch { margin-bottom: 8px; }
.maw-shell .agent-builder-toollist {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.maw-shell .agent-builder-tool-group { margin-bottom: 4px; }
.maw-shell .agent-builder-tool-group.is-empty { display: none; }
.maw-shell .agent-builder-tool-grouphd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
  position: sticky;
  top: -4px;
  background: var(--panel-soft);
}
.maw-shell .agent-builder-group-actions { display: inline-flex; gap: 6px; }
.maw-shell .agent-builder-group-toggle {
  border: 0;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0 2px;
  text-transform: none;
  letter-spacing: 0;
}
.maw-shell .agent-builder-group-toggle:hover { text-decoration: underline; }

.maw-shell .agent-builder-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--t-agent);
}
.maw-shell .agent-builder-tool-row:hover { background: var(--panel-hover); }
.maw-shell .agent-builder-tool-row .maw-agent-tool-cb { margin: 0; flex: 0 0 auto; }
.maw-shell .agent-builder-tool-name { font-size: 12.5px; color: var(--ink); flex: 0 0 auto; }
.maw-shell .agent-builder-tool-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-dim);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .agent-builder-extra { margin-top: 10px; }

/* ---- footer ---- */
.maw-shell .agent-builder-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.maw-shell .agent-builder-ft-spacer { flex: 1 1 auto; }
.maw-shell .agent-builder-delete { color: var(--red); border-color: var(--red-soft); }
.maw-shell .agent-builder-delete:hover { background: var(--red-soft); }
.maw-shell .agent-builder-delete.is-confirming { background: var(--red); color: #fff; border-color: var(--red); }
.maw-shell .maw-btn.is-busy { opacity: .6; pointer-events: none; }

/* ---- Custom section header: "+ New Agent" + per-row edit (Phase C) ---- */
.maw-shell .agents-group-hd-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.maw-shell .agents-group-hd-label { display: inline-flex; align-items: center; gap: 6px; }
.maw-shell .maw-agents-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px 3px 6px;
  cursor: pointer;
  transition: var(--t-agent);
}
.maw-shell .maw-agents-new svg { width: 13px; height: 13px; }
.maw-shell .maw-agents-new:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* custom rows are a positioning context for the hover-revealed edit pencil */
.maw-shell .maw-agents-row[data-agent-source="custom"] { position: relative; }
.maw-shell .maw-agents-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  line-height: 0;
  opacity: 0;
  transition: var(--t-agent);
}
.maw-shell .maw-agents-edit svg { width: 14px; height: 14px; }
.maw-shell .maw-agents-row[data-agent-source="custom"]:hover .maw-agents-edit { opacity: 1; }
.maw-shell .maw-agents-edit:hover { background: var(--panel-hover); color: var(--indigo); }

/* ==========================================================================
   Phase 13.2/13.3 -- Add Agents button + agent detail (full) view
   ========================================================================== */

/* "Add Agents" (Prebuilt section header) -- same treatment as New Agent */
.maw-shell .maw-agents-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--navy);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px 3px 6px;
  cursor: pointer;
  transition: var(--t-agent);
}
.maw-shell .maw-agents-add svg { width: 13px; height: 13px; }
.maw-shell .maw-agents-add:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* Testing-panel header: Open Agent Page button sits before New Conversation */
.maw-shell .agents-detail-openfull { margin-right: 8px; }
.maw-shell .agents-detail-openfull svg { width: 13px; height: 13px; margin-right: 4px; }

/* Agent detail tab (detail:agent): header + chat filling the tab pane body.
   .maw-page-body is a plain flex:1 overflow:auto box, so the view pins its
   own height and manages internal scroll (the chat scroller). */
.maw-shell .agents-fullview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
}
.maw-shell .agents-fullview-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.maw-shell .agents-fullview-hd .agents-detail-hd-main { flex: 1 1 auto; min-width: 0; }
.maw-shell .agents-fullview-hist svg,
.maw-shell .agents-fullview-newconv svg { width: 13px; height: 13px; margin-right: 4px; }

/* The chat area is the positioning context for the (absolute, inset:0)
   shared .maw-fora-history overlay promoted into AgentChatView. */
.maw-shell .agents-fullview-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.maw-shell .agents-fullview-chat > .maw-agent-app {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.maw-shell .maw-peacock3d-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
}

.maw-shell .maw-peacock3d-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.maw-shell .maw-peacock3d-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.maw-shell .maw-peacock3d-sidebar-hd {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-peacock3d-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 750;
  color: var(--navy);
}

.maw-shell .maw-peacock3d-source-label {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-peacock3d-source-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-peacock3d-source-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}

.maw-shell .maw-peacock3d-source-btn:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-shell .maw-peacock3d-source-btn.active {
  background: #fff;
  border-color: var(--line-hi);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(18, 28, 45, .05);
}

.maw-shell .maw-peacock3d-source-dot,
.maw-shell .maw-peacock3d-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.maw-shell .maw-peacock3d-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink-dim);
  flex: none;
}

.maw-shell .maw-peacock3d-search-wrap svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.maw-shell .maw-peacock3d-search {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink);
}

.maw-shell .maw-peacock3d-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 6px 10px;
}

.maw-shell .maw-peacock3d-row {
  width: calc(100% - 4px);
  margin: 2px;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-peacock3d-row:hover {
  background: var(--panel-hover);
}

.maw-shell .maw-peacock3d-row.selected {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}

.maw-shell .maw-peacock3d-row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-shell .maw-peacock3d-row-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 650;
}

.maw-shell .maw-peacock3d-row-sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.25;
}

.maw-shell .maw-peacock3d-chip {
  flex: none;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
}

.maw-shell .maw-peacock3d-chip.ok {
  border-color: rgba(38, 134, 81, .25);
  background: rgba(38, 134, 81, .08);
  color: #22714a;
}

.maw-shell .maw-peacock3d-list-state {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 22px 16px;
  color: var(--ink-dim);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
}

.maw-shell .maw-peacock3d-list-error {
  color: var(--orange-strong);
}

.maw-shell .maw-peacock3d-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f9fafc;
}

.maw-shell .maw-peacock3d-detail-stage {
  width: 100%;
  height: 100%;
}

.maw-shell .maw-peacock3d-toolbar {
  flex: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.maw-shell .maw-peacock3d-selected {
  min-width: 0;
  flex: 1;
}

.maw-shell .maw-peacock3d-detail .maw-peacock3d-selected-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .maw-peacock3d-selected-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 750;
}

.maw-shell .maw-peacock3d-detail .maw-peacock3d-selected-title > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-peacock3d-selected-sub {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.25;
}

.maw-shell .maw-peacock3d-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.maw-shell .maw-peacock3d-actions .maw-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
}

.maw-shell .maw-peacock3d-actions svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.maw-shell .maw-peacock3d-canvas-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: #f4f6f9;
}

.maw-shell .maw-peacock3d-canvas-body > * {
  width: 100%;
  height: 100%;
}

.maw-shell .maw-peacock3d-canvas-body > .data-viewer,
.maw-shell .maw-peacock3d-canvas-body > .dv-container,
.maw-shell .maw-peacock3d-canvas-body canvas {
  max-width: 100%;
}

.maw-shell .maw-peacock3d-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--ink-dim);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  padding: 26px;
}

.maw-shell .maw-peacock3d-empty svg {
  width: 42px;
  height: 42px;
  color: var(--ink-dim);
  opacity: .45;
}

.maw-shell .maw-peacock3d-error {
  padding: 24px;
  color: var(--orange-strong);
}

@media (max-width: 860px) {
  .maw-shell .maw-peacock3d-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .maw-shell .maw-peacock3d-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 260px;
  }

  .maw-shell .maw-peacock3d-source-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .maw-shell .maw-peacock3d-source-btn {
    justify-content: center;
  }

  .maw-shell .maw-peacock3d-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .maw-shell .maw-peacock3d-actions {
    justify-content: flex-end;
  }
}

.maw-shell .maw-wfs-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--panel);
}

.maw-shell .maw-wfs-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ---- sidebar -------------------------------------------------------- */

.maw-shell .maw-wfs-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel-soft);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.maw-shell .maw-wfs-sidebar-hd {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.maw-shell .maw-wfs-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.maw-shell .maw-wfs-subtitle {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.maw-shell .maw-wfs-search-wrap {
  position: relative;
  padding: 10px 12px;
  flex: none;
}

.maw-shell .maw-wfs-search-wrap svg {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-dim);
  pointer-events: none;
}

.maw-shell .maw-wfs-search {
  width: 100%;
  padding: 7px 10px 7px 30px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.maw-shell .maw-wfs-search:focus {
  border-color: var(--orange-strong);
}

.maw-shell .maw-wfs-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.maw-shell .maw-wfs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin: 2px 0;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.maw-shell .maw-wfs-row:hover {
  background: var(--panel);
  border-color: var(--line);
}

.maw-shell .maw-wfs-row.selected {
  background: var(--panel);
  border-color: var(--orange-strong);
}

.maw-shell .maw-wfs-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maw-shell .maw-wfs-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-shell .maw-wfs-row-sub {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- stage ----------------------------------------------------------- */

.maw-shell .maw-wfs-stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.maw-shell .maw-wfs-stage-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 40px;
}

.maw-shell .maw-wfs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: var(--ink-dim);
  text-align: center;
}

.maw-shell .maw-wfs-empty svg {
  width: 44px;
  height: 44px;
  opacity: 0.5;
}

.maw-shell .maw-wfs-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .maw-wfs-empty-sub {
  font-size: 12.5px;
  max-width: 340px;
}

/* ---- detail header --------------------------------------------------- */

.maw-shell .maw-wfs-detail-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.maw-shell .maw-wfs-detail-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.maw-shell .maw-wfs-detail-sub {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.maw-shell .maw-wfs-detail-desc {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 8px;
  max-width: 760px;
}

/* ---- cards ------------------------------------------------------------ */

.maw-shell .maw-wfs-cards {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .maw-shell .maw-wfs-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.maw-shell .maw-wfs-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  min-width: 0;
}

.maw-shell .maw-wfs-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.maw-shell .maw-wfs-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- inputs card ------------------------------------------------------ */

.maw-shell .maw-wfs-inputs-table {
  display: flex;
  flex-direction: column;
}

.maw-shell .maw-wfs-input-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(70px, 0.5fr) minmax(0, 1.6fr);
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  align-items: baseline;
}

.maw-shell .maw-wfs-input-row:last-child {
  border-bottom: none;
}

.maw-shell .maw-wfs-input-label {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-wfs-input-type {
  color: var(--ink-dim);
  font-size: 11px;
}

.maw-shell .maw-wfs-input-value {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
}

.maw-shell .maw-wfs-input-unset {
  color: var(--ink-dim);
  font-style: italic;
}

/* ---- submit card ------------------------------------------------------ */

.maw-shell .maw-wfs-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.maw-shell .maw-wfs-hpc-select {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

.maw-shell .maw-wfs-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.maw-shell .maw-wfs-submit-note {
  font-size: 12px;
  color: var(--ink-dim);
}

/* ---- runs card --------------------------------------------------------- */

.maw-shell .maw-wfs-runs-card {
  margin-top: 14px;
}

.maw-shell .maw-wfs-run-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin: 2px 0;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.maw-shell .maw-wfs-run-row:hover {
  border-color: var(--orange-strong);
}

.maw-shell .maw-wfs-run-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.maw-shell .maw-wfs-run-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .maw-wfs-run-kind {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

.maw-shell .maw-wfs-run-sub {
  font-size: 11px;
  color: var(--ink-dim);
}

/* ---- chips ------------------------------------------------------------- */

.maw-shell .maw-wfs-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: var(--panel);
  flex: none;
}

.maw-shell .maw-wfs-chip-success,
.maw-shell .maw-wfs-chip-finished,
.maw-shell .maw-wfs-chip-completed {
  color: var(--green);
  border-color: currentColor;
}

.maw-shell .maw-wfs-chip-failed,
.maw-shell .maw-wfs-chip-error {
  color: var(--red);
  border-color: currentColor;
}

.maw-shell .maw-wfs-chip-solving,
.maw-shell .maw-wfs-chip-running,
.maw-shell .maw-wfs-chip-queued,
.maw-shell .maw-wfs-chip-pending,
.maw-shell .maw-wfs-chip-loading {
  color: var(--orange-strong);
  border-color: currentColor;
}

/* ---- monitor ------------------------------------------------------------ */

.maw-shell .maw-wfs-monitor-card {
  margin-top: 14px;
}

.maw-shell .maw-wfs-monitor-hd-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.maw-shell .maw-wfs-monitor-elapsed {
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-shell .maw-wfs-monitor-meta {
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.maw-shell .maw-wfs-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--orange-strong);
  cursor: pointer;
  text-decoration: underline;
}

.maw-shell .maw-wfs-report-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--orange-strong);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
}

.maw-shell .maw-wfs-workers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maw-shell .maw-wfs-worker {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.maw-shell .maw-wfs-worker-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.maw-shell .maw-wfs-worker-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .maw-wfs-worker-empty {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 4px;
}

.maw-shell .maw-wfs-worker-outs {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}

.maw-shell .maw-wfs-out-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}

.maw-shell .maw-wfs-out-row:last-child {
  border-bottom: none;
}

.maw-shell .maw-wfs-out-label {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-wfs-out-value {
  color: var(--ink-dim);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-wfs-monitor-logs {
  margin-top: 10px;
}

.maw-shell .maw-wfs-logs-pre {
  margin-top: 8px;
  max-height: 320px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- simlytiks mount ----------------------------------------------------- */

.maw-shell .maw-wfs-monitor-simlytiks {
  margin-top: 12px;
}

.maw-shell .maw-wfs-sl-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.maw-shell .maw-wfs-sl-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.maw-shell .maw-wfs-sl-count {
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-shell .maw-wfs-sl-body {
  height: 70vh;
  min-height: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* ---- shared states -------------------------------------------------------- */

.maw-shell .maw-wfs-state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-wfs-state-error {
  color: var(--red);
}

/* Browser-run live progress strip (Phase 3A/3B) */
.maw-shell .maw-wfs-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 4px;
}

.maw-shell .maw-wfs-progress-track {
  height: 8px;
  border-radius: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.maw-shell .maw-wfs-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--orange-strong);
  transition: width 0.4s ease;
}

.maw-shell .maw-wfs-progress-text {
  font-size: 12px;
  color: var(--ink-dim);
}

.maw-shell .maw-wfs-progress-pct {
  font-weight: 600;
  color: var(--ink);
}

/* Runs-list row actions (Phase 3D): cancel / rerun / delete */
.maw-shell .maw-wfs-run-row {
  cursor: pointer;
}

.maw-shell .maw-wfs-run-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.maw-shell .maw-wfs-run-row:hover .maw-wfs-run-actions,
.maw-shell .maw-wfs-run-row:focus-within .maw-wfs-run-actions {
  opacity: 1;
}

.maw-shell .maw-wfs-run-act {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  cursor: pointer;
}

.maw-shell .maw-wfs-run-act:hover {
  color: var(--ink);
  border-color: var(--ink-dim);
}

.maw-shell .maw-wfs-run-delete:hover,
.maw-shell .maw-wfs-run-cancel:hover {
  color: var(--red);
  border-color: var(--red);
}

/* Runs-list multi-select (Phase 3D): cmd/shift-click + selection bar */
.maw-shell .maw-wfs-run-row {
  user-select: none;
  -webkit-user-select: none;
}

.maw-shell .maw-wfs-run-row.is-selected {
  border-color: var(--orange-strong);
  background: var(--panel-soft);
  box-shadow: inset 2px 0 0 var(--orange-strong);
}

.maw-shell .maw-wfs-runs-selbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 8px;
}

.maw-shell .maw-wfs-runs-selcount {
  font-size: 12px;
  color: var(--ink-dim);
  font-weight: 600;
}

/* Assembler-styled confirm modal (replaces bootstrap AlertBox) */
.maw-shell.maw-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 12, 8, 0.45);
}

.maw-shell .maw-confirm-box {
  width: min(440px, calc(100vw - 48px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}

.maw-shell .maw-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.maw-shell .maw-confirm-text {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.5;
  margin-bottom: 16px;
}

.maw-shell .maw-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =====================================================================
 * Mine/Project/Library segmented toggle (mirrors agents.css .agents-seg,
 * lines ~66-111) -- renamed to workflows-scoped classes so there is
 * ZERO coupling to the agents view. Mine is the LEFT/default tab here
 * (unlike agents, where prebuilt is left), so the modifiers that slide
 * the thumb are --project (middle) and --prebuilt (right).
 *
 * CS-577 widened this from two segments to three; the thumb translate is
 * expressed in multiples of its OWN width, so the arithmetic stays a
 * plain 100%/200% and does not depend on the container width.
 * ===================================================================== */

.maw-shell .maw-wfs-seg-wrap {
  padding: 10px 12px 4px;
}

/* Equal-width thirds so the sliding thumb is a simple 1x/2x translate. */
.maw-shell .maw-wfs-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--line);
  border-radius: 999px;
  padding: 2px;
}

/* The active-state background lives on THIS element (not the buttons) so a
   tab flip SLIDES it across instead of jumping. */
.maw-shell .maw-wfs-seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(33.3333% - 1.334px);
  background: var(--panel);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.maw-shell .maw-wfs-seg--project  .maw-wfs-seg-thumb { transform: translateX(100%); }
.maw-shell .maw-wfs-seg--prebuilt .maw-wfs-seg-thumb { transform: translateX(200%); }

/* Three segments in a narrow sidebar: tighter padding + nowrap so a long
   count badge cannot wrap a label onto a second line and grow the pill. */
.maw-shell .maw-wfs-seg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: color .15s;
}

.maw-shell .maw-wfs-seg-btn:hover { color: var(--ink); }
.maw-shell .maw-wfs-seg-btn.is-active { color: var(--navy); }
.maw-shell .maw-wfs-seg-btn.is-active .maw-wfs-seg-count {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .maw-wfs-seg-count {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-dim);
  background: var(--line);
  border-radius: 10px;
  padding: 1px 6px;
}

/* ---- Prebuilt (library) preview stage ---------------------------------- */

.maw-shell .maw-wfs-prebuilt-detail {
  max-width: 760px;
}

.maw-shell .maw-wfs-lib-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
}

.maw-shell .maw-wfs-prebuilt-meta {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 10px;
}

.maw-shell .maw-wfs-prebuilt-use-card {
  margin-top: 16px;
}

.maw-shell .maw-wfs-use-help {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 8px;
}

/* =====================================================================
 * Project Workflows (CS-577)
 *
 * The Project tab lists workflows every member of the active project can
 * see, so two facts need to be legible at a glance that the Mine tab
 * never had to show: WHO owns a row, and HOW it got attached.
 * ===================================================================== */

/* Owner / attachment badges on a sidebar row. Pushed to the right edge and
   never allowed to squeeze the title, which owns the flexible space. */
.maw-shell .maw-wfs-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
}

.maw-shell .maw-wfs-row-badge {
  display: inline-block;
  max-width: 92px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--indigo-bd);
  color: var(--indigo);
  background: var(--indigo-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A loadcase attachment is a different KIND of link (it lives on the
   loadcase, not on the workflow), so it reads as neutral rather than as an
   owner name. */
.maw-shell .maw-wfs-row-badge-lc {
  border-color: var(--line-hi);
  color: var(--ink-mut);
  background: var(--panel-soft);
}

.maw-shell .maw-wfs-chip-project {
  border-color: var(--indigo-bd);
  color: var(--indigo);
  background: var(--indigo-soft);
}

.maw-shell .maw-wfs-owner {
  color: var(--ink-mut);
  font-style: italic;
}

/* Shown instead of silently dead Run buttons when the caller's project role
   has no execute permission on workflows. */
.maw-shell .maw-wfs-noexec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 12px;
  /* --amber is not a declared token; the literal fallback is the convention
     the other maw-* warning styles use (submit.css, import.css). */
  border: 1px solid var(--line-hi);
  border-left: 3px solid var(--amber, #b8860b);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 1.45;
}

/* The header can now carry three actions; let them wrap on a narrow pane
   instead of pushing the title out of the row. */
.maw-shell .maw-wfs-detail-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.maw-shell .maw-settings-app {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* Light page header (2026-08-20, Rahul) -- the home toolbar's box, minus its
   home-layout margin hack; the breadcrumb pieces inside (.home-list-bc,
   .hbc-ic, .home-list-count) come straight from home.css. */
.maw-shell .maw-settings-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 51px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
  background: var(--panel);
}

.maw-shell .maw-settings-layout {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.maw-shell .maw-settings-nav {
  padding: 28px 17px;
  border-right: 1px solid var(--line);
  background: rgba(251, 248, 242, .58);
}

.maw-shell .maw-settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  margin: 0 0 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: var(--ink-mut);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-settings-nav-btn svg { width: 18px; height: 18px; flex: none; }
.maw-shell .maw-settings-nav-btn:hover { color: var(--navy); background: var(--panel-soft); }
.maw-shell .maw-settings-nav-btn.is-active {
  color: var(--navy);
  background: var(--panel);
  box-shadow: inset 3px 0 var(--green);
  font-weight: 650;
}

.maw-shell .maw-settings-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 30px clamp(24px, 4vw, 58px) 52px;
}

.maw-shell .maw-settings-page {
  display: none;
  width: min(960px, 100%);
  margin: 0 auto;
}
.maw-shell .maw-settings-page.is-active { display: block; }

.maw-shell .maw-settings-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.maw-shell .maw-settings-project-label {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.maw-shell .maw-settings-page-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -.02em;
}

.maw-shell .maw-settings-page-head > div > p:last-child {
  max-width: 650px;
  margin: 7px 0 0;
  color: var(--ink-mut);
  font-size: 13px;
  line-height: 1.5;
}

.maw-shell .maw-settings-panel {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.maw-shell .maw-settings-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}

.maw-shell .maw-settings-panel-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  font-weight: 670;
}

.maw-shell .maw-settings-panel-head p {
  margin: 3px 0 0;
  color: var(--ink-mut);
  font-size: 11.5px;
}

.maw-shell .maw-settings-panel-body { padding: 4px 20px 16px; }

.maw-shell .maw-settings-state {
  min-height: 78px;
  display: grid;
  place-items: center;
  color: var(--ink-mut);
  font-size: 12.5px;
  text-align: center;
}

.maw-shell .maw-settings-state.is-error { color: var(--red); }

.maw-shell .maw-settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 62px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-settings-switch-row:last-child { border-bottom: 0; }

.maw-shell .maw-settings-switch-copy strong {
  display: block;
  color: var(--navy);
  font-size: 13px;
  font-weight: 630;
}

.maw-shell .maw-settings-switch-copy span {
  display: block;
  margin-top: 3px;
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.35;
}

.maw-shell .maw-settings-switch {
  position: relative;
  width: 34px;
  height: 19px;
  flex: none;
}

.maw-shell .maw-settings-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.maw-shell .maw-settings-switch span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  background: var(--panel-hover);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.maw-shell .maw-settings-switch span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 35, 61, .22);
  content: "";
  transition: transform .12s;
}

.maw-shell .maw-settings-switch input:checked + span { border-color: var(--green); background: var(--green); }
.maw-shell .maw-settings-switch input:checked + span::after { transform: translateX(15px); }
.maw-shell .maw-settings-switch input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.maw-shell .maw-settings-switch input:disabled + span { cursor: not-allowed; opacity: .55; }

.maw-shell .maw-settings-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 52px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-shell .maw-settings-savebar[hidden] { display: none; }
.maw-shell .maw-settings-savebar > span { margin-right: auto; color: var(--ink-mut); font-size: 11.5px; }

.maw-shell .maw-settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding-top: 15px;
}

.maw-shell .maw-settings-field label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 650;
}

.maw-shell .maw-settings-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  color: var(--ink);
  background: #fffdf9;
  font: inherit;
  font-size: 12.5px;
}
.maw-shell .maw-settings-input:disabled { color: var(--ink-mut); background: var(--panel-soft); }
.maw-shell .maw-settings-input:focus-visible { outline: 2px solid var(--indigo-bd); outline-offset: 1px; }

.maw-shell .maw-settings-field-note {
  display: block;
  margin-top: 6px;
  color: var(--ink-mut);
  font-size: 11px;
  line-height: 1.4;
}

.maw-shell .maw-settings-access-mode {
  margin: 0 0 12px;
  color: var(--ink-mut);
  font-size: 11.5px;
}

.maw-shell .maw-settings-admin-note,
.maw-shell .maw-settings-migration-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-mut);
  background: var(--panel-soft);
  font-size: 11.5px;
  line-height: 1.45;
}

.maw-shell .maw-settings-feedback {
  position: sticky;
  top: -22px;
  z-index: 4;
  display: none;
  min-height: 36px;
  margin: -8px auto 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 12px;
}
.maw-shell .maw-settings-feedback.is-visible { display: block; }
.maw-shell .maw-settings-feedback.is-error { border-color: #e2bbb4; color: var(--red); background: #fff8f6; }
.maw-shell .maw-settings-feedback.is-success { border-color: #bfd0be; color: #294f38; background: #f2f7ef; }

.maw-shell .maw-settings-repo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.maw-shell .maw-settings-repo-step {
  min-height: 62px;
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}
.maw-shell .maw-settings-repo-step:last-child { border-right: 0; }
.maw-shell .maw-settings-repo-step strong { display: block; color: var(--navy); font-size: 12px; }
.maw-shell .maw-settings-repo-step span { display: block; margin-top: 4px; color: var(--ink-mut); font-size: 11.5px; }
.maw-shell .maw-settings-repo-step.is-ready { box-shadow: inset 0 3px var(--green); }
.maw-shell .maw-settings-repo-step.is-current { box-shadow: inset 0 3px var(--indigo); }

.maw-shell .maw-settings-repo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.maw-shell .maw-settings-repo-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 650;
}

.maw-shell .maw-settings-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-dim);
}
.maw-shell .maw-settings-status-dot.is-ok { background: var(--green); }
.maw-shell .maw-settings-status-dot.is-warn { background: var(--orange); }
.maw-shell .maw-settings-status-dot.is-error { background: var(--red); }

.maw-shell .maw-settings-repo-copy { margin: 8px 0 16px; color: var(--ink-mut); font-size: 12px; line-height: 1.45; }

.maw-shell .maw-settings-facts,
.maw-shell .maw-settings-inventory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.maw-shell .maw-settings-fact,
.maw-shell .maw-settings-inventory > div {
  min-height: 62px;
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-shell .maw-settings-fact:nth-child(3n),
.maw-shell .maw-settings-inventory > div:last-child { border-right: 0; }
.maw-shell .maw-settings-fact:nth-last-child(-n+3) { border-bottom: 0; }
.maw-shell .maw-settings-fact span,
.maw-shell .maw-settings-inventory span { display: block; color: var(--ink-mut); font-size: 10.5px; }
.maw-shell .maw-settings-fact strong,
.maw-shell .maw-settings-inventory strong { display: block; margin-top: 5px; color: var(--navy); font-size: 12.5px; overflow-wrap: anywhere; }

.maw-shell .maw-settings-fix { margin: 8px 0 16px; color: var(--ink); font-size: 12px; line-height: 1.45; }
.maw-shell .maw-settings-fix p { margin: 0 0 4px; }
.maw-shell .maw-settings-fix-who { color: var(--ink-mut); }
.maw-shell .maw-settings-problem { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 7px; }
.maw-shell .maw-settings-problem.is-warn { border-left-color: var(--orange); }
.maw-shell .maw-settings-problem > strong { display: block; color: var(--navy); font-size: 12.5px; }
.maw-shell .maw-settings-problem .maw-settings-fix { margin-bottom: 6px; }
.maw-shell .maw-settings-problem summary { cursor: pointer; color: var(--ink-mut); font-size: 11.5px; }
.maw-shell .maw-settings-problem ul { margin: 6px 0 0; padding-left: 18px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.maw-shell .maw-settings-history { margin-top: 16px; }
.maw-shell .maw-settings-project-table td { vertical-align: top; }
.maw-shell .maw-settings-project-table td:first-child { width: 26%; }
.maw-shell .maw-settings-project-help { display: block; margin-top: 4px; color: var(--ink-mut); font-size: 11px; line-height: 1.4; }
.maw-shell .maw-settings-project-value { color: var(--ink-mut); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; }
.maw-shell .maw-settings-project-input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; resize: vertical; }
.maw-shell .maw-settings-project-input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
.maw-shell .maw-settings-project-input:disabled { background: var(--panel-soft); color: var(--ink-mut); }
.maw-shell .maw-settings-limit-cell { white-space: nowrap; }
.maw-shell .maw-settings-limit-cell .maw-settings-limit-input { width: calc(100% - 44px); font-variant-numeric: tabular-nums; }
.maw-shell .maw-settings-limit-unit { display: inline-block; width: 38px; margin-left: 6px; color: var(--ink-mut); font-size: 11.5px; }
.maw-shell .maw-settings-history-when,
.maw-shell .maw-settings-history-rev { white-space: nowrap; color: var(--ink-mut); }
.maw-shell .maw-settings-history-rev { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.maw-shell .maw-settings-history-source { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-mut); font-size: 10.5px; }

.maw-shell .maw-settings-analysis { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.maw-shell .maw-settings-analysis h4 { margin: 0 0 10px; color: var(--navy); font-size: 12px; }
.maw-shell .maw-settings-analysis-note { margin: 10px 0 0; color: var(--green); font-size: 11.5px; }

.maw-shell .maw-settings-subnav {
  display: flex;
  min-height: 45px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-settings-subnav button {
  position: relative;
  padding: 0 14px;
  border: 0;
  color: var(--ink-mut);
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.maw-shell .maw-settings-subnav button.is-active { color: var(--navy); font-weight: 650; }
.maw-shell .maw-settings-subnav button.is-active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: var(--green);
  content: "";
}

.maw-shell .maw-settings-access { min-height: 150px; padding: 0 20px 18px; }
.maw-shell .maw-settings-access-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mut);
  font-size: 11.5px;
}
.maw-shell .maw-settings-table-wrap { overflow-x: auto; }
.maw-shell .maw-settings-table { width: 100%; border-collapse: collapse; }
.maw-shell .maw-settings-table th,
.maw-shell .maw-settings-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
.maw-shell .maw-settings-table th { color: var(--ink-mut); font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.maw-shell .maw-settings-table td { color: var(--ink); }
.maw-shell .maw-settings-person { display: flex; align-items: center; gap: 9px; min-width: 170px; }
.maw-shell .maw-settings-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  color: var(--navy);
  background: var(--green-soft);
  font-size: 10.5px;
  font-weight: 700;
}
.maw-shell .maw-settings-person strong { display: block; color: var(--navy); font-weight: 650; }
.maw-shell .maw-settings-person small { display: block; margin-top: 2px; color: var(--ink-mut); }
.maw-shell .maw-settings-access-table th:last-child,
.maw-shell .maw-settings-access-table td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.maw-shell .maw-settings-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 16px;
}
.maw-shell .maw-settings-role-card {
  min-height: 150px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}
.maw-shell .maw-settings-role-card h3 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
}
.maw-shell .maw-settings-role-card p {
  min-height: 34px;
  margin: 6px 0 12px;
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.45;
}
.maw-shell .maw-settings-role-card ul {
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.75;
}

.maw-shell .maw-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 35, 61, .36);
}
.maw-shell .maw-settings-modal[hidden] { display: none; }
.maw-shell .maw-settings-modal-card {
  width: min(470px, 100%);
  overflow: hidden;
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(22, 35, 61, .24);
}
.maw-shell .maw-settings-modal-body { padding: 22px; }
.maw-shell .maw-settings-modal-body h3 { margin: 0; color: var(--navy); font-size: 18px; }
.maw-shell .maw-settings-modal-body p { margin: 8px 0 0; color: var(--ink-mut); font-size: 12.5px; line-height: 1.5; }
.maw-shell .maw-settings-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--line); }
.maw-shell .maw-settings-modal-label {
  display: block;
  margin: 18px 0 6px;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 650;
}
.maw-shell .maw-settings-access-results {
  max-height: 168px;
  margin-top: 6px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.maw-shell .maw-settings-access-results:empty { display: none; }
.maw-shell .maw-settings-access-result {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: #fffdf9;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.maw-shell .maw-settings-access-result:last-child { border-bottom: 0; }
.maw-shell .maw-settings-access-result:hover,
.maw-shell .maw-settings-access-result:focus-visible {
  background: var(--panel-soft);
  outline: 0;
}
.maw-shell .maw-settings-access-result:disabled {
  cursor: not-allowed;
  opacity: .58;
}
.maw-shell .maw-settings-access-result strong {
  display: block;
  color: var(--navy);
  font-size: 12px;
}
.maw-shell .maw-settings-access-result span {
  display: block;
  margin-top: 2px;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-settings-access-search-state {
  padding: 12px;
  color: var(--ink-mut);
  font-size: 11.5px;
  text-align: center;
}
.maw-shell .maw-settings-access-search-state.is-error { color: var(--red); }
.maw-shell .maw-settings-access-selected {
  margin-top: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  color: var(--navy);
  background: var(--green-soft);
  font-size: 12px;
  font-weight: 650;
}
.maw-shell .maw-settings-access-selected[hidden],
.maw-shell .maw-settings-access-search-block[hidden] { display: none; }
.maw-shell .maw-settings-access-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.maw-shell .maw-settings-access-modal-actions .maw-settings-access-suspend {
  color: var(--red);
}
.maw-shell .maw-settings-modal-spacer { flex: 1; }

@media (max-width: 800px) {
  .maw-shell .maw-settings-layout { grid-template-columns: 164px minmax(0, 1fr); }
  .maw-shell .maw-settings-main { padding: 24px 20px 44px; }
  .maw-shell .maw-settings-form-grid { grid-template-columns: 1fr; }
  .maw-shell .maw-settings-role-grid { grid-template-columns: 1fr; }
  .maw-shell .maw-settings-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maw-shell .maw-settings-fact:nth-child(3n) { border-right: 1px solid var(--line); }
  .maw-shell .maw-settings-fact:nth-child(2n) { border-right: 0; }
  .maw-shell .maw-settings-fact:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .maw-shell .maw-settings-fact:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .maw-shell .maw-settings-layout { display: block; overflow: auto; }
  .maw-shell .maw-settings-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .maw-shell .maw-settings-nav h1 { display: none; }
  .maw-shell .maw-settings-nav-btn { justify-content: center; min-height: 36px; margin: 0; }
  .maw-shell .maw-settings-nav-btn.is-active { box-shadow: inset 0 -2px var(--green); }
  .maw-shell .maw-settings-nav-btn svg { display: none; }
  .maw-shell .maw-settings-main { overflow: visible; padding: 20px 12px 40px; }
  .maw-shell .maw-settings-page-head { display: block; }
  .maw-shell .maw-settings-page-head > .maw-btn { margin-top: 14px; }
  .maw-shell .maw-settings-repo-strip,
  .maw-shell .maw-settings-facts,
  .maw-shell .maw-settings-inventory { grid-template-columns: 1fr; }
  .maw-shell .maw-settings-repo-step,
  .maw-shell .maw-settings-fact,
  .maw-shell .maw-settings-inventory > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .maw-shell .maw-settings-fact:last-child,
  .maw-shell .maw-settings-inventory > div:last-child { border-bottom: 0; }
  .maw-shell .maw-settings-access-toolbar { align-items: flex-start; }
  .maw-shell .maw-settings-access-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .maw-settings-switch span,
  .maw-shell .maw-settings-switch span::after { transition: none; }
}

/* V1 -> V2 migration card (2026-09-17): the CLI handoff line */
.maw-shell .maw-settings-cli {
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    font-family: var(--mono, Menlo, Consolas, monospace);
    font-size: 12px;
    overflow-x: auto;
    user-select: all;
}

/* Workspace interface card (2026-09-17): per-user V1/V2 radio rows */
.maw-shell .maw-settings-interface-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
}
.maw-shell .maw-settings-interface-row:last-child { border-bottom: 0; }
.maw-shell .maw-settings-interface-row input[type="radio"] {
    margin: 3px 0 0;
    accent-color: var(--blue);
    flex-shrink: 0;
}
.maw-shell .maw-settings-interface-copy strong {
    display: block;
    color: var(--navy);
    font-size: 13px;
    font-weight: 630;
}
.maw-shell .maw-settings-interface-copy span {
    display: block;
    color: var(--ink-soft, var(--muted));
    font-size: 12px;
    margin-top: 2px;
}
.maw-shell .maw-settings-interface-retry { margin-top: 10px; }

/* The detail view is edge-to-edge inside the tab pane body (it owns its padding). */
.maw-shell .maw-page-body:has(> .maw-detail) { padding: 0; }

.maw-shell .maw-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg, var(--panel));
}

/* ===== Hero header ===== */
.maw-shell .maw-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}
.maw-shell .maw-detail-hero-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  flex: none;
}
.maw-shell .maw-detail-hero-ic svg { width: 22px; height: 22px; }
.maw-shell .maw-detail-hero-main { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  /* Single-line ellipsis (full name on hover via title attr). The JS layout
     pass (_layoutHeroActions) reserves ~160px for this block before letting
     action buttons claim width. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-shell .maw-detail-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  flex-wrap: wrap;
}
.maw-shell .maw-detail-idtag {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-dim);
}
.maw-shell .maw-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  position: relative;
}
.maw-shell .maw-detail-actions .maw-btn {
  height: 30px;
  font-size: 12px;
  white-space: nowrap;
  flex: none;
}

/* Manual refresh chip (2026-08-20, Rahul) -- icon-only square, leftmost in
   the actions cluster (and re-declared in the DesignStep/File hero
   overrides). .is-refreshing (toggled by _setDetailRefreshing) spins the
   icon while a refetch is in flight; content stays painted until it lands. */
.maw-shell .maw-detail-actions .maw-detail-refresh,
.maw-shell .maw-file-actions .maw-detail-refresh {
  width: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.maw-shell .maw-detail-refresh.is-refreshing {
  color: var(--blue);
  cursor: default;
}
.maw-shell .maw-detail-refresh.is-refreshing svg {
  animation: maw-detail-refresh-spin 0.9s linear infinite;
}
@keyframes maw-detail-refresh-spin { to { transform: rotate(360deg); } }

/* Stale-edit conflict notice in the inline edit form (multi-user MVP,
   2026-08-20): the save was refused server-side; message + Refresh. */
.maw-shell .maw-conflict-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--orange-strong, #b45309);
  background: var(--orange-soft, #fff3e6);
  border-radius: 0 6px 6px 0;
}
.maw-shell .maw-conflict-note .maw-conflict-msg {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: var(--ink);
}
.maw-shell .maw-conflict-note .maw-conflict-refresh { flex: none; }

/* ===== Responsive hero (collapse pass -- _layoutHeroActions) ===== */
/* Buttons moved into the overflow menu by the layout pass stay in the DOM
   (their menu rows re-dispatch clicks to them) but render nothing. */
.maw-shell .maw-detail-actions .maw-hero-collapsed { display: none !important; }
/* The ... button is always rendered; hidden while the menu has no rows. */
.maw-shell .maw-detail-actions-more.maw-more-hidden { display: none; }
/* Pathological width -- even title floor + ... cannot fit: scroll as last resort. */
.maw-shell .maw-detail-hero.maw-hero-tight { overflow-x: auto; }
.maw-shell .maw-btn.maw-detail-danger {
  border-color: var(--orange-bd);
  color: var(--orange-strong);
  background: var(--orange-soft);
}
.maw-shell .maw-btn.maw-detail-danger:hover { filter: brightness(0.98); }

/* Overflow (more) button */
.maw-shell .maw-detail-actions-more {
  height: 30px;
  width: 30px;
  min-width: 0;
  padding: 0;
  font-size: 17px;
  letter-spacing: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  color: var(--ink-mut);
  cursor: pointer;
  flex: none;
  transition: background .12s, color .12s;
}
.maw-shell .maw-detail-actions-more:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

/* Overflow dropdown panel */
.maw-shell .maw-detail-actions-menu {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 190px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
}
.maw-shell .maw-detail-actions-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.maw-shell .maw-detail-menu-icon {
  width: 14px;
  height: 14px;
  flex: none;
  color: currentColor;
}
.maw-shell .maw-detail-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.maw-shell .maw-detail-actions-menu-item:hover {
  background: var(--panel-soft);
}
.maw-shell .maw-detail-actions-menu-item.maw-detail-menu-danger {
  color: var(--orange-strong);
}
.maw-shell .maw-detail-actions-menu-item.maw-detail-menu-danger:hover {
  background: var(--orange-soft);
}

/* ===== Scroll body + two-column layout ===== */
.maw-shell .maw-detail-scroll {
  flex: 1 1 0%;
  overflow: auto;
  padding: 20px 24px 32px;
  background: var(--panel-soft, #f4efe4);
}

/* Two-column grid: wide main + fixed 340px rail. */
.maw-shell .maw-detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .maw-shell .maw-detail-cols {
    grid-template-columns: 1fr;
  }
}
/* Sections mode: no right rail -- .maw-detail-main (with its own sub-rail
   of tabs) takes the full width. Details/Relationships/Activity live inside
   a section instead (conventionally 'overview'). */
.maw-shell .maw-detail-cols.maw-detail-cols-full {
  grid-template-columns: minmax(0, 1fr);
}
.maw-shell .maw-detail-main,
.maw-shell .maw-detail-rail {
  min-width: 0;
}

/* Rail: stack label above value (tight 340px column) */
.maw-shell .maw-detail-rail .maw-dm-row {
  grid-template-columns: 1fr;
  gap: 3px;
}
.maw-shell .maw-detail-rail .maw-dm-lbl {
  color: var(--ink-dim);
  font-size: 11px;
}
.maw-shell .maw-detail-sec {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.maw-shell .maw-detail-sec-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-detail-error {
  padding: 28px;
  color: var(--orange-strong);
  font-size: 13px;
}

/* ===== Sections mode: left sub-rail of tabs inside .maw-detail-main ===== */
.maw-shell .maw-detail-tabbed {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.maw-shell .maw-detail-subrail {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
}
.maw-shell .maw-detail-subrail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-mut);
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-shell .maw-detail-subrail-ic { width: 15px; height: 15px; flex: none; }
.maw-shell .maw-detail-subrail-item:hover {
  background: var(--panel-soft);
  color: var(--ink);
}
.maw-shell .maw-detail-subrail-item.active {
  background: var(--panel);
  color: var(--indigo);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.maw-shell .maw-detail-subpanel {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 760px) {
  .maw-shell .maw-detail-tabbed { flex-direction: column; }
  .maw-shell .maw-detail-subrail {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    flex: none;
    width: 100%;
  }
}

/* ===== Sections mode: VIEWPORT LOCK =====
   The page never scrolls -- the height chain runs hero -> scroll(locked) ->
   cols -> main -> tabbed -> subpanel, and each tab's root card fills the
   remaining height, scrolling internally where its content needs it. */
.maw-shell .maw-detail-scroll.maw-detail-scroll-locked {
  /* MINIMIZATION FLOOR (2026-08-23, Rahul). This was overflow:hidden, which is
     what made a narrowed pane "almost unusable": the height chain squeezed the
     subpanel toward zero on BOTH axes and simply clipped whatever no longer
     fitted -- toolbars, sub-tab strips, the Overview sidebar -- with no way to
     scroll to them.

     Now the viewport lock still holds at a comfortable size, but below the
     floor set on .maw-detail-subpanel this box SCROLLS instead of clipping.
     The two numbers live here as custom properties so the panel floor and the
     .maw-detail-tabbed width that has to contain it cannot drift apart.

     720px is the Overview tab's real requirement -- its 400px center floor
     (below) + the 16px gap + the fixed 300px sidebar = 716 -- so the tab that
     needs the most horizontal room is exactly what sets the number. The
     Include Structure deck asks for more (820px, measured) and keeps its OWN
     overflow-x, so between 720 and 852 the deck scrolls rather than the page:
     one scrollbar, on the thing that is actually too wide. */
  --d3v-detail-panel-min-w: 720px;
  --d3v-detail-panel-min-h: 480px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}
.maw-shell .maw-detail-scroll-locked .maw-detail-cols {
  flex: 1 1 0%;
  min-height: 0;
  align-items: stretch;
}
.maw-shell .maw-detail-scroll-locked .maw-detail-main {
  height: 100%;
  min-height: 0;
}
.maw-shell .maw-detail-scroll-locked .maw-detail-tabbed {
  height: 100%;
  align-items: stretch;
  /* 176px = the 160px sub-rail (.maw-detail-subrail flex-basis) + the 16px
     row gap. Without this the rail itself is what gives way first and the tab
     labels collapse before the panel does. */
  min-width: calc(var(--d3v-detail-panel-min-w) + 176px);
}
.maw-shell .maw-detail-scroll-locked .maw-detail-subrail {
  position: static;
  align-content: flex-start;
}
.maw-shell .maw-detail-scroll-locked .maw-detail-subpanel {
  display: flex;
  flex-direction: column;
  /* The floor, on both axes. min-height matters as much as min-width: a short
     window used to leave a tab card a few dozen pixels tall -- a scrolling
     sliver showing one row of a table. Past these the locked scroll box above
     takes over. */
  min-width: var(--d3v-detail-panel-min-w);
  min-height: var(--d3v-detail-panel-min-h);
  overflow: hidden;
}

/* Full-height tab card: fills the subpanel, children manage their own scroll. */
.maw-shell .maw-detail-sec-fill {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Generic scrollable flex-fill area inside a fill card (tables/lists). */
.maw-shell .maw-detail-fillscroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* Centered idle/busy/message state inside a fill card -- messages, loading
   spinners and primary action buttons all sit in the middle of the card. */
.maw-shell .maw-detail-state {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.maw-shell .maw-detail-state .maw-detail-sm-empty {
  max-width: 560px;
  margin: 0;
}
.maw-shell .maw-detail-spin {
  width: 26px;
  height: 26px;
  border: 3px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-detail-spin .8s linear infinite;
}
@keyframes maw-detail-spin { to { transform: rotate(360deg); } }

/* ===== Shared LOADING + EMPTY states (2026-08-23, Rahul) =================
   Both are emitted by DetailedViewBase._loadStateHtml / ._emptyStateHtml and
   ride the existing centred .maw-detail-state box, so a panel only has to
   supply its own words. Sized to read as one calm block rather than a wall:
   the copy is capped at 420px so a long body wraps to a few short lines
   instead of one very wide one. */
.maw-shell .maw-detail-loadstate,
.maw-shell .maw-detail-emptystate {
  gap: 10px;
}
.maw-shell .maw-detail-loadstate-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.maw-shell .maw-detail-loadstate .maw-detail-loadstate-hint,
.maw-shell .maw-detail-emptystate .maw-detail-emptystate-body {
  font-size: 12px;
  color: var(--ink-dim);
  max-width: 420px;
  margin: 0;
  line-height: 1.5;
  /* .maw-detail-sm-empty (which the body reuses for its color and size) is
     italic, which reads as an aside. Here the sentence IS the content of the
     panel, so it is set upright.
     The selector carries the parent class deliberately: at a flat
     `.maw-shell .maw-detail-emptystate-body` this ties on specificity with
     `.maw-shell .maw-detail-sm-empty`, and systemmodel.css lands LATER in the
     grunt concat -- so the tie went to italic. Measured, not assumed. */
  font-style: normal;
}
/* The skeleton bars are decoration for the wait, not content -- they must not
   be read out, and they must not widen the box on a narrow pane. */
.maw-shell .maw-detail-loadstate-bars {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.maw-shell .maw-detail-loadstate-bar {
  height: 10px;
  display: block;
  border-radius: 5px;
}
.maw-shell .maw-detail-emptystate-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-hover);
  color: var(--ink-dim);
}
.maw-shell .maw-detail-emptystate-ic svg { width: 22px; height: 22px; }
.maw-shell .maw-detail-emptystate.is-error .maw-detail-emptystate-ic {
  color: var(--danger, #b4462f);
}
.maw-shell .maw-detail-emptystate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
/* The empty state's CTA repeats a toolbar button's class so the delegated
   handler already covers it; give it a little air from the copy. */
.maw-shell .maw-detail-emptystate .maw-btn { margin-top: 2px; }

/* ===== Overview tab: scrollable detail cards + right meta sidebar ===== */
.maw-shell .maw-detail-ov {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
}
.maw-shell .maw-detail-ov-center {
  flex: 1 1 auto;
  /* Was min-width:0, so this column crushed toward nothing while the sidebar
     kept its fixed 300px -- the detail rows (.maw-dm-row is a 150px label + a
     value column) ended up with a value column too narrow to read. The stacking
     media query below could not save it: that keys on the WINDOW, and the
     broken case is a narrow PANE inside a wide window (rail expanded, or a
     split). 400px leaves the value column ~198px after the 150px label, the
     12px gap and the card's own padding. */
  min-width: 400px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.maw-shell .maw-detail-ov-center > .maw-detail-sec:last-child { margin-bottom: 0; }
.maw-shell .maw-detail-ov-side {
  flex: 0 0 300px;
  min-height: 0;
  overflow-y: auto;
}
.maw-shell .maw-detail-ov-side > .maw-detail-sec:last-child { margin-bottom: 0; }
/* Sidebar meta rows: stacked label-over-value (tight column). */
.maw-shell .maw-detail-ov-side .maw-dm-row {
  grid-template-columns: 1fr;
  gap: 3px;
}
.maw-shell .maw-detail-ov-side .maw-dm-lbl {
  color: var(--ink-dim);
  font-size: 11px;
}
@media (max-width: 1080px) {
  .maw-shell .maw-detail-ov {
    flex-direction: column;
    overflow-y: auto;
  }
  .maw-shell .maw-detail-ov-center { overflow-y: visible; }
  .maw-shell .maw-detail-ov-side { flex: none; overflow-y: visible; }
}

/* ===== Details metadata grid ===== */
.maw-shell .maw-detail-grid { display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-dm-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-dm-row:last-child { border-bottom: none; }
.maw-shell .maw-dm-lbl { font-size: 12.5px; color: var(--ink-mut); }
.maw-shell .maw-dm-val {
  font-size: 12.5px;
  color: var(--ink);
  font-family: Menlo, Monaco, Consolas, monospace;
  word-break: break-word;
}
.maw-shell .maw-dm-val.maw-dm-text {
  font-family: inherit;
  line-height: 1.5;
}
.maw-shell .maw-dm-val.maw-ok { color: var(--green); }

/* ===== Persisted Overview thumbnail ===== */
.maw-shell .maw-detail-thumbnail-card {
  position: relative;
}
.maw-shell .maw-detail-thumbnail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.maw-shell .maw-detail-thumbnail-head .maw-detail-sec-title {
  margin-bottom: 0;
}
.maw-shell .maw-detail-thumbnail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  min-width: 92px;
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
}
.maw-shell .maw-detail-thumbnail-action svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.maw-shell .maw-detail-thumbnail-card.is-loading .maw-detail-thumbnail-action svg {
  animation: maw-spin .8s linear infinite;
}
/* The capture is produced at exactly 16:9 (Peacock3DLoader.THUMBNAIL_ASPECT).
   A full-width frame with a fixed 280px height is roughly 6:1 on a wide detail
   page, so object-fit: contain shrank the model into a thin centred strip with
   large white bars. Cap the width and match the capture's aspect instead. */
.maw-shell .maw-detail-thumbnail-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f7f5;
}
.maw-shell .maw-detail-thumbnail-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.maw-shell .maw-detail-thumbnail-card.has-image .maw-detail-thumbnail-image {
  display: block;
}
.maw-shell .maw-detail-thumbnail-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  color: var(--ink-dim);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
.maw-shell .maw-detail-thumbnail-card.has-image .maw-detail-thumbnail-placeholder {
  display: none;
}
.maw-shell .maw-detail-thumbnail-card.is-rendering .maw-detail-thumbnail-image {
  display: none;
}
.maw-shell .maw-detail-thumbnail-card.is-rendering .maw-detail-thumbnail-placeholder {
  display: flex;
}
.maw-shell .maw-detail-thumbnail-placeholder svg {
  width: 34px;
  height: 34px;
  opacity: .45;
}
.maw-shell .maw-detail-thumbnail-spinner {
  display: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-spin .8s linear infinite;
}
.maw-shell .maw-detail-thumbnail-card.is-loading .maw-detail-thumbnail-spinner {
  display: block;
}
.maw-shell .maw-detail-thumbnail-card.is-loading .maw-detail-thumbnail-placeholder svg {
  display: none;
}
.maw-shell .maw-detail-thumbnail-status {
  min-height: 17px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.maw-shell .maw-detail-thumbnail-status.is-ready {
  color: var(--green, #2d7a3f);
}
.maw-shell .maw-detail-thumbnail-status.is-stale,
.maw-shell .maw-detail-thumbnail-status.is-error {
  color: var(--orange-strong);
}
.maw-shell .maw-detail-thumbnail-render-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1600px;
  height: 900px;
  display: none;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
}
.maw-shell .maw-detail-thumbnail-card.is-rendering .maw-detail-thumbnail-render-host {
  display: block;
}
.maw-shell .maw-detail-thumbnail-render-host > .row {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* ===== Relationships ===== */
.maw-shell .maw-rel-group { margin-bottom: 12px; }
.maw-shell .maw-rel-group:last-child { margin-bottom: 0; }
.maw-shell .maw-rel-group-lbl {
  font-size: 11px;
  color: var(--ink-mut);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}
.maw-shell .maw-rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* Relationship count pill */
.maw-shell .maw-rel-count {
  font-size: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--ink-mut);
  margin-left: 6px;
}

/* Relationship "Show all" toggle button */
.maw-shell .maw-rel-more {
  margin-top: 8px;
  font-size: 11px;
  color: var(--indigo);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: block;
}
.maw-shell .maw-rel-more:hover { text-decoration: underline; }

/* Chip label truncation with tooltip (title attr on the chip provides native tooltip) */
.maw-shell .maw-rel-chip-lbl {
  display: block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Capped group: clip to ~2 rows (72px), expand on toggle */
.maw-shell .maw-rel-capped .maw-rel-chips {
  max-height: 72px;
  overflow: hidden;
}
.maw-shell .maw-rel-capped.maw-rel-expanded .maw-rel-chips {
  max-height: none;
}

/* ===== Activity feed ===== */
.maw-shell .maw-detail-feed { display: flex; flex-direction: column; gap: 9px; }
.maw-shell .maw-feed-item { display: flex; align-items: center; gap: 9px; }
.maw-shell .maw-feed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-hi); flex: none;
}
.maw-shell .maw-feed-dot.hi { background: var(--indigo); }
.maw-shell .maw-feed-text { font-size: 12.5px; color: var(--ink); flex: 1 1 auto; }
.maw-shell .maw-feed-time {
  font-size: 11px; color: var(--ink-dim);
  font-family: Menlo, Monaco, Consolas, monospace;
}

/* ===== Edit form ===== */
.maw-shell .maw-detail-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.maw-shell .maw-df-row { display: flex; flex-direction: column; gap: 5px; }
.maw-shell .maw-df-lbl { font-size: 11.5px; font-weight: 600; color: var(--ink-mut); }
.maw-shell .maw-df-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  background: var(--panel);
  width: 100%;
}
.maw-shell .maw-df-input:focus {
  outline: none;
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-shell .maw-df-textarea { resize: vertical; min-height: 64px; }
.maw-shell .maw-df-check { width: 16px; height: 16px; }
.maw-shell .maw-detail-form-actions { display: flex; gap: 8px; margin-top: 18px; }
.maw-shell .maw-detail-formerr {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-bd);
  color: var(--orange-strong);
  font-size: 12px;
}

/* ===== Tab-pane head bits (rendered by WorkspaceView for mode A) ===== */
.maw-shell .maw-tabpane-dot {
  width: 8px; height: 8px; border-radius: 2px; flex: none; margin-right: 2px;
}
.maw-shell .maw-tabpane-kind {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: lowercase;
}
.maw-shell .maw-tabpane-label { font-weight: 600; color: var(--ink); }
.maw-detail-actions { position: relative; }
.maw-agent-launch-toggle svg { width: 14px; height: 14px; }
.maw-agent-launch-caret { font-size: 10px; opacity: .65; }
.maw-agent-launch-portal {
  --panel: #fbf8f2;
  --line: #e5ddcd;
  --ink: #34302a;
  --ink-dim: #9c9480;
  --indigo-soft: #edecfb;
  position: fixed;
  z-index: 1000;
  width: 280px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 12px 34px rgba(27, 24, 18, .16);
  box-sizing: border-box;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.maw-agent-launch-portal.is-flipped { transform: translateY(4px); }
.maw-agent-launch-portal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear 0s;
}
.maw-agent-launch-portal .maw-agent-launch-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.maw-agent-launch-portal .maw-agent-launch-item:hover:not(:disabled) { background: var(--indigo-soft); }
.maw-agent-launch-portal .maw-agent-launch-item:disabled { opacity: .5; cursor: default; }
.maw-agent-launch-portal .maw-agent-launch-item-name { display: block; color: var(--ink); font-weight: 650; font-size: 12px; }
.maw-agent-launch-portal .maw-agent-launch-item-desc { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 10px; line-height: 1.35; }
.maw-agent-launch-portal .maw-agent-launch-empty { padding: 10px; color: var(--ink-dim); font-size: 11px; }
.maw-agent-context-chip { margin-top: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.maw-agent-context-chip summary { cursor: pointer; color: var(--ink-dim); font-size: 11px; font-weight: 650; }
@media (prefers-reduced-motion: reduce) {
  .maw-agent-launch-portal,
  .maw-agent-launch-portal.is-open { transition: none; }
}
.maw-agent-context-chip pre { margin-top: 7px; max-height: 240px; overflow: auto; }

/* ======================================================================
   Named load steps (DetailedViewBase._stepsListHtml)

   Deliberately NOT a progress bar. The rationale lives with the code in
   DetailedViewBase; the short version is that two parallel fetches of very
   unequal duration reach "1 of 2" at a third of the wait, so a fraction
   would predict half the real total.
   ====================================================================== */
.maw-shell .maw-detail-steps {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    /* Capped. The section panel is ~1080px wide, which pushed the elapsed time
       about 500px from the label it belongs to -- both numbers correct, and
       nobody reads them as one row at that separation. */
    max-width: 520px;
}
.maw-shell .maw-detail-steps-note { max-width: 520px; }
.maw-shell .maw-detail-step {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    font-size: 12px;
    color: var(--ink-mut, #6d6759);
    border-bottom: 1px solid var(--line, #e5ddcd);
}
.maw-shell .maw-detail-step:last-child { border-bottom: 0; }

.maw-shell .maw-detail-step-label { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-detail-step-time {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-dim, #9c9480);
    /* Tabular figures: without this the row jitters horizontally every tenth
       of a second as the digits change width, which reads as a glitch. */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

.maw-shell .maw-detail-step-mark {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}
/* Pending: an open ring with one solid quadrant, rotating. The gap is what
   makes the rotation legible -- a uniform ring looks static however fast it
   spins, which is exactly the wrong signal for "still working". */
.maw-shell .maw-detail-step.is-pending .maw-detail-step-mark {
    border: 2px solid var(--line-hi, #d4c9b3);
    border-top-color: var(--ink-mut, #6d6759);
    animation: maw-step-spin .7s linear infinite;
}
@keyframes maw-step-spin { to { transform: rotate(360deg); } }

.maw-shell .maw-detail-step.is-done .maw-detail-step-mark {
    border: 2px solid var(--green, #3f7d4f);
    background: var(--green, #3f7d4f);
}
/* The tick is drawn, not typed: a glyph would inherit the row's font and sit
   off-centre at this size in every fallback face. */
.maw-shell .maw-detail-step.is-done .maw-detail-step-mark::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.maw-shell .maw-detail-step.is-done .maw-detail-step-label { color: var(--ink, #34302a); }

.maw-shell .maw-detail-step.is-failed .maw-detail-step-mark {
    border: 2px solid var(--red, #c0392b);
    background: var(--red-soft, #f7e3e0);
}
.maw-shell .maw-detail-step.is-failed .maw-detail-step-mark::after,
.maw-shell .maw-detail-step.is-failed .maw-detail-step-mark::before {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 4px;
    width: 6px;
    height: 1.5px;
    background: var(--red, #c0392b);
}
.maw-shell .maw-detail-step.is-failed .maw-detail-step-mark::after  { transform: rotate(45deg); }
.maw-shell .maw-detail-step.is-failed .maw-detail-step-mark::before { transform: rotate(-45deg); }
/* A failed step keeps its row and its reason (title=), because this section
   renders on a PARTIAL result -- the catalog can fail while the matrix loads
   fine, and the panel is still worth showing. Silence would misreport that. */
.maw-shell .maw-detail-step.is-failed .maw-detail-step-label { color: var(--red, #c0392b); }

.maw-shell .maw-detail-steps-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--ink-dim, #9c9480);
}
.maw-shell .maw-detail-steps-note:empty { display: none; }

/* ===================================================================
   HERO ACTIONS -- SM-specific extra buttons
   =================================================================== */
.maw-shell .maw-detail-sm-act-submit {
    background: var(--indigo);
    border-color: var(--indigo-bd, var(--indigo));
    color: #fff;
    font-weight: 600;
}
.maw-shell .maw-detail-sm-act-submit:hover {
    filter: brightness(0.93);
}
.maw-shell .maw-detail-sm-act-download,
.maw-shell .maw-detail-sm-act-3d {
    background: var(--panel-soft);
    border-color: var(--line-hi);
    color: var(--ink);
}
.maw-shell .maw-detail-sm-act-lock {
    border-color: var(--line-hi);
    color: var(--ink-mut);
    background: var(--panel-soft);
    font-size: 11.5px;
}
.maw-shell .maw-detail-sm-act-lock.maw-detail-sm-locked {
    border-color: var(--orange-bd);
    color: var(--orange-strong);
    background: var(--orange-soft);
}

/* ===================================================================
   OVERVIEW TAB -- loadcase binding + summary
   =================================================================== */
.maw-shell .maw-detail-sm-overview-lc {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.maw-shell .maw-detail-sm-lc-picker {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.maw-shell .maw-detail-sm-lc-picker select {
    max-width: 420px;
}
.maw-shell .maw-detail-sm-locked-val {
    color: var(--orange-strong);
    font-weight: 600;
}

/* ===================================================================
   INCLUDE STRUCTURE SECTION -- vivid, CAE-friendly assembly/file browser.
   The list sits inside a .maw-detail-sec card which already has
   16px 18px padding. Each assembly is its own card with a left accent
   bar in the assembly token color; expanding reveals its files with
   type-coded icons (keyword deck / results / image / document / other)
   and a click-to-reveal size+upload-date+download detail strip.
   =================================================================== */
.maw-shell .maw-detail-sm-incl-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.maw-shell .maw-detail-sm-incl-card {
    border: 1px solid var(--line);
    border-left: 3px solid var(--t-asm);
    border-radius: 9px;
    background: var(--panel);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.maw-shell .maw-detail-sm-incl-card-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.maw-shell .maw-detail-sm-incl-asm-check,
.maw-shell .maw-detail-sm-incl-entity-check {
    flex: none;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-incl-desc {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    color: var(--ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-incl-count {
    flex: none;
    font-size: 10.5px;
    color: var(--ink-mut);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2px 9px;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-incl-count:empty {
    display: none;
}
.maw-shell .maw-detail-sm-incl-expand-btn {
    flex: none;
    width: 26px;
    height: 26px;
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--panel-soft);
    border-color: var(--line-hi);
    color: var(--ink-mut);
}
.maw-shell .maw-detail-sm-incl-expand-btn svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
}
.maw-shell .maw-detail-sm-incl-expand-btn:hover {
    background: var(--panel-hover);
    color: var(--ink);
}
.maw-shell .maw-detail-sm-incl-expand-btn.maw-detail-sm-incl-chevron-open svg {
    transform: rotate(180deg);
}
.maw-shell .maw-detail-sm-incl-files {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--panel-soft);
    border-top: 1px solid var(--line);
}
/* The Assembly view's OWN files render bare on the deck page -- no card wrap
   labeled with the assembly's own name (it read as the assembly including
   itself; Rahul 2026-08-21). The container keeps .maw-detail-sm-incl-files
   for the flex layout; this modifier strips the card-body chrome and boxes
   each row like the nested-card file rows so they stay first-class lines. */
.maw-shell .maw-detail-sm-incl-files.maw-detail-asm-ownfiles {
    background: transparent;
    border-top: none;
    padding: 0;
}
.maw-shell .maw-detail-asm-ownfiles > .maw-detail-sm-incl-file {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
}

.maw-shell .maw-detail-sm-incl-files-loading,
.maw-shell .maw-detail-sm-incl-files-error,
.maw-shell .maw-detail-sm-incl-empty {
    font-size: 12px;
    color: var(--ink-dim);
    padding: 10px 2px 2px;
}
.maw-shell .maw-detail-sm-incl-files-error {
    color: var(--orange-strong);
}
.maw-shell .maw-detail-sm-incl-file {
    border-radius: 7px;
    background: var(--panel);
    border: 1px solid var(--line);
    margin-top: 6px;
}
.maw-shell .maw-detail-sm-incl-file-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
}
.maw-shell .maw-detail-sm-incl-file-check {
    flex: none;
    width: 13px;
    height: 13px;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-incl-file-ic {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-incl-file-ic svg {
    width: 14px;
    height: 14px;
}
.maw-shell .maw-detail-sm-incl-file-name {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--ink);
    font-family: Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
    min-width: 0;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-incl-file-name:hover {
    color: var(--indigo);
    text-decoration: underline;
}
.maw-shell .maw-detail-sm-incl-file-size {
    flex: none;
    font-size: 11px;
    color: var(--ink-mut);
    font-family: Menlo, Monaco, Consolas, monospace;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-incl-file-size:hover {
    color: var(--indigo);
}
/* Added by rahul.suri on 08/04/2026 - Phase 24. Per-row include-keyword select,
   emitted by the shared row renderer only when a host declares includeType
   editable (today the Assembly page; the System Model and submit wizard never
   render it). Box metrics carried over from the retired
   .maw-detail-asm-incl-type rule so the row layout is unchanged. */
.maw-shell .maw-incl-type-select {
    flex: none;
    width: 190px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
}
.maw-shell .maw-detail-sm-incl-file-reorder {
    display: flex;
    gap: 3px;
    flex: none;
}
.maw-shell .maw-detail-sm-incl-file-reorder .maw-btn {
    height: 22px;
    width: 22px;
    min-width: 0;
    padding: 0;
    font-size: 12px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: var(--panel-soft);
    border-color: var(--line);
    color: var(--ink-mut);
}
.maw-shell .maw-detail-sm-incl-file-reorder .maw-btn:hover {
    background: var(--panel);
    color: var(--ink);
}
.maw-shell .maw-detail-sm-incl-file-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 7px 12px 9px 42px;
    border-top: 1px dashed var(--line);
    font-size: 11px;
    color: var(--ink-dim);
}
.maw-shell .maw-detail-sm-incl-file-dl {
    color: var(--indigo);
    font-weight: 600;
    text-decoration: none;
}
.maw-shell .maw-detail-sm-incl-file-dl:hover {
    text-decoration: underline;
}
.maw-shell .maw-detail-sm-incl-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.maw-shell .maw-detail-sm-incl-hint {
    font-size: 11px;
    color: var(--ink-dim);
}

/* ===================================================================
   EXTRACTION META BANNER -- shared by Parameters + BOM (cached, blob-
   backed extractions). Quiet "Extracted <when>" line normally; a
   prominent warning banner when the backend flags the cache stale.
   Re-extraction is always user-initiated via the button here.
   =================================================================== */
.maw-shell .maw-detail-sm-extract-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--ink-mut);
}
.maw-shell .maw-detail-sm-extract-banner span {
    flex: 1 1 auto;
}
.maw-shell .maw-detail-sm-extract-banner .maw-btn-link {
    flex: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--indigo);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-extract-banner .maw-btn-link:hover {
    text-decoration: underline;
}
.maw-shell .maw-detail-sm-extract-banner.maw-detail-sm-extract-stale {
    background: var(--orange-soft);
    border-color: var(--orange-bd);
    color: var(--orange-strong);
}
.maw-shell .maw-detail-sm-extract-ic {
    flex: none;
    width: 16px;
    height: 16px;
}
.maw-shell .maw-detail-sm-extract-stale .maw-btn.maw-primary {
    height: 24px;
    font-size: 11px;
    padding: 0 10px;
}

/* ===================================================================
   PARAMETERS SECTION
   Table sits flush inside the card -- no extra wrapper padding.
   The card's 16px 18px padding already provides breathing room.
   =================================================================== */
.maw-shell .maw-detail-sm-params-table-wrap {
    overflow-x: auto;
    /* Negative margin lets table extend edge-to-edge inside the card */
    margin: 0 -2px;
}
/* Parameter composition tree: the entity "folder" row is a boxed panel-soft
   bar, and the WHOLE line opens the entity (the chevron stops propagation;
   see ParametersRenderers._prmOnNodeOpen). Hover darkens for affordance. */
.maw-shell .maw-prm-node-hdr {
    background: var(--panel-soft);
    border: 1px solid var(--line-hi);
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}
.maw-shell .maw-prm-node-hdr:hover {
    background: rgba(127, 127, 127, .16);
}

/* Boxed + slightly darker than the card (Rahul, 2026-08-20): each table is a
   self-contained panel-soft box, so the levels of the parameter composition
   tree separate visually. border-collapse must be SEPARATE -- collapse
   discards the table's own border-radius. */
.maw-shell .maw-detail-sm-params-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    background: var(--panel-soft);
    border: 1px solid var(--line-hi);
    border-radius: 8px;
}
.maw-shell .maw-detail-sm-params-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-dim);
    border-bottom: 2px solid var(--line-hi);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-params-table th:first-child {
    border-top-left-radius: 8px;
}
.maw-shell .maw-detail-sm-params-table th:last-child {
    border-top-right-radius: 8px;
}
.maw-shell .maw-detail-sm-params-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink);
}
.maw-shell .maw-detail-sm-params-table tr:last-child td {
    border-bottom: none;
}
.maw-shell .maw-detail-sm-params-table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.maw-shell .maw-detail-sm-params-table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}
/* The old hover tint was --panel-soft, which the box background now equals --
   a translucent overlay stays visible in both themes. */
.maw-shell .maw-detail-sm-params-table tr:hover td {
    background: rgba(127, 127, 127, .08);
}
.maw-shell .maw-detail-sm-param-name {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--navy);
}
.maw-shell .maw-detail-sm-param-ref {
    font-size: 11px;
    color: var(--ink-dim);
    font-family: Menlo, Monaco, Consolas, monospace;
}
.maw-shell .maw-detail-sm-param-conflict-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange-strong);
    vertical-align: middle;
    margin-left: 2px;
    cursor: help;
}

/* ---- Files-parsed / conflicts summary strip (above the params table) ---- */
.maw-shell .maw-detail-sm-params-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 11.5px;
}
.maw-shell .maw-detail-sm-params-summary-item {
    color: var(--ink-mut);
}
.maw-shell .maw-detail-sm-conflicts-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--orange-bd);
    background: var(--orange-soft);
    color: var(--orange-strong);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-basis: 100%;
}
.maw-shell .maw-detail-sm-conflicts-toggle svg {
    width: 13px;
    height: 13px;
    flex: none;
}
.maw-shell .maw-detail-sm-conflicts-toggle-open {
    border-radius: 10px 10px 0 0;
}
.maw-shell .maw-detail-sm-conflicts-table {
    flex-basis: 100%;
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    border: 1px solid var(--orange-bd);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.maw-shell .maw-detail-sm-conflicts-table th {
    padding: 5px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--orange-strong);
    background: var(--orange-soft);
}
.maw-shell .maw-detail-sm-conflicts-table td {
    padding: 5px 10px;
    border-top: 1px solid var(--orange-bd);
    color: var(--ink);
}

/* ===================================================================
   BOM SECTION
   Scrollable sub-container within the card. Sticky headers use
   --panel-soft so they float visually above the card body.
   =================================================================== */
.maw-shell .maw-detail-sm-bom-table-scroll {
    overflow-x: auto;
    max-height: 320px;
    overflow-y: auto;
    /* Slight inset rounding to match card interior */
    border-radius: 6px;
    border: 1px solid var(--line);
}
.maw-shell .maw-detail-sm-bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.maw-shell .maw-detail-sm-bom-table th {
    padding: 5px 9px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ink-dim);
    border-bottom: 2px solid var(--line-hi);
    white-space: nowrap;
    position: sticky;
    top: 0;
    /* Use panel-soft so sticky header is visually elevated inside the card */
    background: var(--panel-soft);
    z-index: 1;
}
.maw-shell .maw-detail-sm-bom-table td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-bom-table tr:last-child td {
    border-bottom: none;
}

/* Pin the first column (Part ID) so it's always visible while the wider
   columns scroll horizontally underneath it. The header's first cell is a
   corner (sticky top AND left) -- give it the higher z-index. Body first
   cells need a solid background so scrolling columns pass BEHIND them. */
.maw-shell .maw-detail-sm-bom-table th:first-child,
.maw-shell .maw-detail-sm-bom-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
}
.maw-shell .maw-detail-sm-bom-table td:first-child {
    background: var(--panel);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    color: var(--navy);
    box-shadow: 1px 0 0 var(--line);
}
.maw-shell .maw-detail-sm-bom-table th:first-child {
    z-index: 2;               /* above both sticky axes */
    box-shadow: 1px 0 0 var(--line-hi);
}
.maw-shell .maw-detail-sm-bom-table tr:hover td:first-child {
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-bom-table tr:hover td {
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-bom-nomatch {
    padding: 18px 12px !important;
    text-align: center;
    color: var(--ink-dim);
    font-style: italic;
    white-space: normal !important;
}
.maw-shell .maw-detail-sm-bom-total {
    font-size: 11px;
    color: var(--ink-dim);
    align-self: center;
}

/* ===================================================================
   SHARED TABLE TOOLBAR -- search box + result count (Params + BOM)
   =================================================================== */
.maw-shell .maw-detail-sm-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.maw-shell .maw-detail-sm-search {
    position: relative;
    flex: 0 1 320px;
    min-width: 180px;
}
.maw-shell .maw-detail-sm-search-ic {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--ink-dim);
    pointer-events: none;
}
.maw-shell .maw-detail-sm-search input {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 30px;
    font-size: 12.5px;
    box-sizing: border-box;
}
.maw-shell .maw-detail-sm-table-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-dim);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-row-hidden {
    display: none !important;
}

/* ===================================================================
   NOTES SECTION (stub)
   =================================================================== */
.maw-shell .maw-detail-sm-notes-stub-banner {
    font-size: 12px;
    color: var(--ink-mut);
    background: var(--indigo-soft, rgba(80,90,200,.07));
    border: 1px solid var(--indigo-bd, rgba(80,90,200,.25));
    border-radius: 7px;
    padding: 9px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.maw-shell .maw-detail-sm-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.maw-shell .maw-detail-sm-note-item {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 12px;
}
.maw-shell .maw-detail-sm-note-meta {
    font-size: 10.5px;
    color: var(--ink-dim);
    font-family: Menlo, Monaco, Consolas, monospace;
    margin-bottom: 4px;
}
.maw-shell .maw-detail-sm-note-text {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
    white-space: pre-wrap;
}
.maw-shell .maw-detail-sm-notes-compose {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.maw-shell .maw-detail-sm-notes-compose .maw-df-textarea {
    flex: 1 1 auto;
}
.maw-shell .maw-detail-sm-notes-compose .maw-btn {
    flex: none;
    align-self: flex-end;
}

/* ===================================================================
   SUBMIT MODAL INTERNALS (shared with SubmitSimulation.js modal body)
   =================================================================== */
.maw-detail-sm-submit-ctx {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}
.maw-detail-sm-submit-ctx-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.maw-detail-sm-submit-ctx-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-dim);
    min-width: 100px;
    flex: none;
}
.maw-detail-sm-submit-ctx-val {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
}
.maw-detail-sm-submit-ctx-lc {
    color: var(--t-lc, var(--indigo));
}
.maw-detail-sm-submit-hint {
    font-size: 10.5px;
    color: var(--ink-dim);
    margin-top: 2px;
}
.maw-detail-sm-submit-todo-note {
    margin-top: 6px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 12px;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}
.maw-detail-sm-submit-todo-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-dim);
    white-space: nowrap;
    padding-top: 1px;
}
.maw-detail-sm-submit-todo-list {
    margin: 0;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--ink-dim);
    line-height: 1.7;
}

/* ===================================================================
   WIDE MAIN COLUMN FIT
   All tabs (including Overview, which now also renders Details/
   Relationships/Activity -- see DetailedViewBase sections-mode, no
   separate rail) live in the full-width .maw-detail-main column.
   Ensure table-heavy sections don't overflow the wide card.
   =================================================================== */

/* Make params/BOM tables fill the card edge-to-edge (card is already
   padded 16px 18px; tables use negative margin to reach the edges). */
.maw-shell .maw-detail-main .maw-detail-sm-params-table-wrap {
    margin: 0 -18px;
    padding: 0 0;
}
.maw-shell .maw-detail-main .maw-detail-sm-bom-table-scroll {
    border-radius: 0;
    border-left: none;
    /* Do NOT overhang the card's left edge: the sticky Part ID column pins to
       this container's left:0, and a negative left margin would push it under
       the card edge (overflow:hidden on the wrap) and clip it. Overhang the
       RIGHT only so the table still bleeds to the card's right edge. */
    margin: 0 -18px 0 0;
}

/* Parameters table: remove 2px negative inset (was fine in single col;
   the wider main column has no crush risk). */
.maw-shell .maw-detail-main .maw-detail-sm-params-table-wrap {
    margin: 0 -18px;
}

/* BOM: allow a taller scroll viewport in the wider main column. */
.maw-shell .maw-detail-main .maw-detail-sm-bom-table-scroll {
    max-height: 440px;
}

/* ===================================================================
   GENERIC EMPTIES / MISC
   =================================================================== */
.maw-shell .maw-detail-sm-empty {
    font-size: 12.5px;
    color: var(--ink-dim);
    font-style: italic;
    margin-bottom: 8px;
}
.maw-shell .maw-detail-sm-table-empty-cell {
    height: 220px;
    text-align: center;
    vertical-align: middle;
    color: var(--ink-dim);
    font-size: 12.5px;
    font-style: italic;
}


/* ===================================================================
   FULL-HEIGHT (viewport-locked) TAB CARDS -- per-tab scroll adjustments.
   The card fills the window (maw-detail-sec-fill); these rules make each
   tab's TABLE/LIST the internal scroller instead of the page.
   =================================================================== */
/* BOM: the inner bordered scroll box becomes the flex-fill scroller (its
   sticky headers keep working); the outer wrap stops double-scrolling. */
.maw-shell .maw-detail-sec-fill .maw-detail-sm-bom-table-wrap {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.maw-shell .maw-detail-sec-fill .maw-detail-sm-bom-table-scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}
/* Parameters: sticky header row while the table scrolls in the card. */
.maw-shell .maw-detail-sec-fill .maw-detail-sm-params-table th {
    position: sticky;
    top: 0;
    background: var(--panel);
    z-index: 1;
}

/* ===================================================================
   OVERVIEW -- Structure card rows (assembly chip + description)
   =================================================================== */
.maw-shell .maw-detail-sm-ov-asm {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.maw-shell .maw-detail-sm-ov-asm:last-child { border-bottom: none; }
.maw-shell .maw-detail-sm-ov-asm .maw-chip { flex: none; max-width: 55%; }
.maw-shell .maw-detail-sm-ov-asm-desc {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================================================================
   NOTES TAB -- real notes (Phase 22 backend), scoped to this entity.
   =================================================================== */
.maw-shell .maw-detail-sm-notes-toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
}
.maw-shell .maw-detail-sm-notes-list-wrap {
    display: flex;
    flex-direction: column;
}
.maw-shell .maw-detail-sm-notes-list-wrap > .maw-detail-sm-empty {
    margin: auto;
    text-align: center;
}
.maw-shell .maw-detail-sm-notes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.maw-shell .maw-detail-sm-note-row {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.maw-shell .maw-detail-sm-note-row:hover {
    background: var(--panel);
    border-color: var(--line-hi);
}
.maw-shell .maw-detail-sm-note-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.maw-shell .maw-detail-sm-note-row-meta {
    font-size: 11px;
    color: var(--ink-dim);
    margin-top: 2px;
}
.maw-shell .maw-detail-sm-notes-compose-wrap {
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}
.maw-shell .maw-detail-sm-note-compose {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.maw-shell .maw-detail-sm-note-rte {
    min-height: 260px;
    border: 1px solid var(--line-hi);
    border-radius: 8px;
    overflow: hidden;
}
.maw-shell .maw-detail-sm-note-rte-fallback {
    min-height: 140px;
    resize: vertical;
}
.maw-shell .maw-detail-sm-note-viewer-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
}
.maw-shell .maw-detail-sm-note-viewer-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink);
    max-height: 420px;
    overflow: auto;
}
.maw-shell .maw-detail-sm-note-viewer-body img {
    max-width: 100%;
    border-radius: 6px;
}

/* ===================================================================
   INCLUDE STRUCTURE -- BLOCKS | MAIN FILE dual mode (2026-07-02).
   Blocks renders the composition AS the .key deck it generates: a
   paper-like monospace canvas with *KEYWORD header, the centralized
   *PARAMETER summary, draggable per-assembly blocks whose rows are
   literal *INCLUDE cards, and *END. Main File shows the stored
   main_input_content (or a client preview of unsaved edits) with a
   hand-edit -> custom-freeze flow.
   =================================================================== */
/* overflow-x:auto (2026-08-21, same treatment as the import manager / home
   toolbars): in a narrow pane the buttons used to SHRINK and their text
   wrapped mid-word. flex:none on every child stops the shrink (the inline
   flex:1 spacer still wins -- inline style beats a stylesheet rule) and the
   toolbar scrolls sideways instead. */
.maw-shell .maw-detail-sm-incl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    scrollbar-width: thin;
}
.maw-shell .maw-detail-sm-incl-toolbar > * { flex: none; }
.maw-shell .maw-detail-sm-incl-toolbar .maw-btn { white-space: nowrap; }
.maw-shell .maw-detail-sm-incl-toolbar::-webkit-scrollbar { height: 6px; }
.maw-shell .maw-detail-sm-incl-toolbar::-webkit-scrollbar-track { background: transparent; }
.maw-shell .maw-detail-sm-incl-toolbar::-webkit-scrollbar-thumb {
    background: var(--line-hi);
    border-radius: 3px;
}
.maw-shell .maw-detail-sm-incl-modes {
    display: inline-flex;
    border: 1px solid var(--line-hi);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-incl-mode-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ink-mut);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 14px;
    min-width: 0;
    box-shadow: none;
}
.maw-shell .maw-detail-sm-incl-mode-btn + .maw-detail-sm-incl-mode-btn {
    border-left: 1px solid var(--line-hi);
}
.maw-shell .maw-detail-sm-incl-mode-btn:hover {
    background: var(--panel-hover);
    color: var(--ink);
}
.maw-shell .maw-detail-sm-incl-mode-btn.maw-detail-sm-incl-mode-on {
    background: var(--panel);
    color: var(--indigo);
    box-shadow: inset 0 -2px 0 var(--indigo);
}

/* ---- the deck canvas ------------------------------------------------ */
.maw-shell .maw-detail-sm-deck {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    /* See the min-width contract on .maw-detail-sm-deck-page below. */
    overflow-x: auto;
}
/* Horizontal overflow contract (2026-08-22, Rahul) -- shared by the System
   Model deck AND the Assembly include structure, which render the same
   .maw-detail-sm-deck / -deck-page markup.

   The failure it fixes: header rows are flex rows whose children all shrink by
   default, and .maw-incl-ncard sets overflow:hidden -- so on a narrow pane the
   right-edge controls (Swap / Un-nest / Transform / the expand chevron) were
   squeezed past the card edge and CLIPPED AWAY, with no scrollbar to reach
   them. Measured at a 760px pane: Swap overhung its card by 14px, Un-nest by
   79px, the chevron by 109px, and .maw-detail-sm-deck could not scroll in x.

   Three rules, and all three are needed:
     * a MIN-WIDTH floor here -- measured: this deck wants 810px at max-content,
       so 820 clears the widest real header and still leaves a ~900px pane
       scrollbar-free;
     * overflow-x:auto on .maw-detail-sm-deck, so below the floor the deck
       SCROLLS rather than hiding controls (the fillscroll overflow-y already
       computes overflow-x to auto, but state it -- it is load-bearing now);
     * flex:none on every control + ellipsis on the prose, below, so nothing is
       ever squeezed narrower than its own text on the way down to the floor. */
.maw-shell .maw-detail-sm-deck-page {
    max-width: 1040px;
    min-width: 820px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 20px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: Menlo, Monaco, Consolas, monospace;
}
/* Part 3 of the min-width contract above. Every header control is flex:none so
   it can never be squeezed narrower than its own text, and the two PROSE bits
   are the ones that give way -- with an ellipsis -- when a long entity name
   would otherwise push the row past the card's overflow:hidden edge. Without a
   shrinkable member the row simply overflows and is clipped, which is the whole
   defect; the floor alone would fix today's names and not tomorrow's. */
.maw-shell .maw-detail-sm-incl-card-hdr > .maw-btn,
.maw-shell .maw-detail-sm-incl-nnode-hdr > .maw-btn,
.maw-shell .maw-detail-sm-incl-nfile > .maw-btn,
.maw-shell .maw-detail-sm-incl-swap-btn,
.maw-shell .maw-detail-sm-incl-unnest-btn,
.maw-shell .maw-detail-sm-incl-tf-btn,
.maw-shell .maw-detail-sm-deck-grip,
.maw-shell .maw-detail-sm-incl-entity-check {
    flex: none;
}
.maw-shell .maw-detail-sm-incl-card-hdr > .maw-detail-sm-deck-block-label,
.maw-shell .maw-detail-sm-incl-nnode-hdr > .maw-detail-sm-deck-block-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-incl-card-hdr > .maw-chip,
.maw-shell .maw-detail-sm-incl-nnode-hdr > .maw-chip {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The *INCLUDE path is the file row's own give-way member. */
.maw-shell .maw-detail-sm-incl-nfile > .maw-detail-sm-deck-inc-lines {
    min-width: 0;
}
.maw-shell .maw-detail-sm-deck-inc-lines > .maw-detail-sm-deck-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-deck-kw {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--indigo);
    letter-spacing: .01em;
}
.maw-shell .maw-detail-sm-deck-kw2 {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--indigo);
}
.maw-shell .maw-detail-sm-deck-cmt {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: var(--ink-mut);
}
.maw-shell .maw-detail-sm-deck-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.maw-shell .maw-detail-sm-deck-end {
    margin-top: 2px;
}
/* Sortable container for the entry blocks -- keeps the same 10px inter-block
   rhythm the blocks had as direct flex children of the deck page. */
.maw-shell .maw-detail-sm-editor-blocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- centralized *PARAMETER block (static, jumps to Parameters) ----- */
.maw-shell .maw-detail-sm-deck-params {
    border: 1px dashed var(--line-hi);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.maw-shell .maw-detail-sm-deck-params:hover {
    background: var(--panel-hover);
    border-color: var(--indigo);
}
.maw-shell .maw-detail-sm-deck-kw2-line {
    display: flex;
    align-items: center;
    gap: 10px;
}
.maw-shell .maw-detail-sm-deck-params-count {
    font-size: 10.5px;
    color: var(--ink-mut);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1px 9px;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-deck-params-jump {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--indigo);
}

/* ---- draggable assembly blocks -------------------------------------- */
.maw-shell .maw-detail-sm-deck-block {
    cursor: grab;
}
.maw-shell .maw-detail-sm-deck-block:active {
    cursor: grabbing;
}
.maw-shell .maw-detail-sm-deck-block-hdr {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.maw-shell .maw-detail-sm-deck-grip {
    flex: none;
    font-size: 12px;
    letter-spacing: -2px;
    color: var(--ink-mut);
    cursor: grab;
    line-height: 1;
    padding-right: 2px;
}
.maw-shell .maw-detail-sm-deck-block-label {
    flex: none;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-deck-block .maw-detail-sm-incl-count {
    margin-left: auto;
}
.maw-shell .maw-detail-sm-deck-dragging {
    opacity: 0.4;
}
.maw-shell .maw-detail-sm-deck-drop-before {
    box-shadow: 0 -3px 0 0 var(--indigo);
}
.maw-shell .maw-detail-sm-deck-drop-after {
    box-shadow: 0 3px 0 0 var(--indigo);
}

/* ---- excluded (unchecked) blocks / rows ------------------------------ */
.maw-shell .maw-detail-sm-deck-block.maw-detail-sm-deck-excluded {
    opacity: 0.6;
    border-left-color: var(--line-hi);
}
.maw-shell .maw-detail-sm-deck-excl-tag {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    color: var(--orange-strong);
    border: 1px solid var(--orange-strong);
    border-radius: 9px;
    padding: 1px 8px;
}
.maw-shell .maw-detail-sm-deck-inc.maw-detail-sm-deck-excluded {
    opacity: 0.55;
}
.maw-shell .maw-detail-sm-deck-inc.maw-detail-sm-deck-excluded .maw-detail-sm-deck-path,
.maw-shell .maw-detail-sm-deck-inc.maw-detail-sm-deck-excluded .maw-detail-sm-deck-kw2 {
    text-decoration: line-through;
}

/* ---- the *INCLUDE card rows ------------------------------------------ */
.maw-shell .maw-detail-sm-deck-inc-lines {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.maw-shell .maw-detail-sm-deck-path {
    font-size: 11.5px;
    color: var(--ink);
    font-family: Menlo, Monaco, Consolas, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-deck-path:hover {
    color: var(--indigo);
    text-decoration: underline;
}

/* ---- Main File mode --------------------------------------------------- */
.maw-shell .maw-detail-sm-mif-pre {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre;
    overflow: auto;
}
.maw-shell .maw-detail-sm-incl-toolbar + .maw-detail-sm-extract-banner {
    margin-bottom: 10px;
}

/* ---- comment blocks (annotations living IN the composition) ---------- */
.maw-shell .maw-detail-sm-deck-cblock {
    border-left: 3px solid var(--line-hi);
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-deck-cblock-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
}
.maw-shell .maw-detail-sm-deck-cblock-row .maw-detail-sm-deck-grip {
    padding-top: 2px;
}
.maw-shell .maw-detail-sm-cmt-body {
    flex: 1 1 auto;
    min-width: 0;
    cursor: text;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.maw-shell .maw-detail-sm-cmt-body:hover .maw-detail-sm-deck-cmt {
    color: var(--ink);
}
.maw-shell .maw-detail-sm-cmt-text {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--indigo);
    border-radius: 7px;
    padding: 8px 10px;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink);
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.maw-shell .maw-detail-sm-cmt-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}
.maw-shell .maw-detail-sm-cmt-btns .maw-btn {
    font-size: 11px;
    padding: 4px 10px;
    min-width: 0;
}
.maw-shell .maw-detail-sm-deck-cblock > .maw-detail-sm-deck-cblock-row > .maw-detail-sm-cmt-remove-btn {
    flex: none;
    width: 22px;
    height: 22px;
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: transparent;
    border-color: transparent;
    color: var(--ink-mut);
    font-size: 13px;
}
.maw-shell .maw-detail-sm-deck-cblock > .maw-detail-sm-deck-cblock-row > .maw-detail-sm-cmt-remove-btn:hover {
    color: var(--orange-strong);
    background: var(--panel);
    border-color: var(--line);
}
.maw-shell .maw-detail-sm-deck-addcmt-btn {
    font-size: 11.5px;
}

/* ===== + Assembly picker (Phase 28 P4) =====
   Lightweight overlay opened from the blocks canvas actions bar: link an
   existing project assembly into the SM, or jump to the Create Assembly form. */
.maw-shell .maw-detail-sm-asmpick-overlay {
    /* Fixed: .maw-detail is not a positioned ancestor, and a viewport-dim
       modal is the intent anyway. */
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.maw-shell .maw-detail-sm-asmpick {
    width: 460px;
    max-width: calc(100% - 40px);
    max-height: 70%;
    background: var(--panel);
    border: 1px solid var(--line-hi);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    padding: 14px;
    gap: 10px;
}
.maw-shell .maw-detail-sm-asmpick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--navy);
    font-size: 14px;
}
.maw-shell .maw-detail-sm-asmpick-close {
    width: 26px;
    height: 26px;
    min-width: 0;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
    border-radius: 6px;
}
.maw-shell .maw-detail-sm-asmpick-list {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px;
}
.maw-shell .maw-detail-sm-asmpick-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink);
}
.maw-shell .maw-detail-sm-asmpick-row:hover { background: var(--panel-soft); }
.maw-shell .maw-detail-sm-asmpick-row.sel {
    background: var(--indigo-soft, rgba(79, 70, 229, 0.08));
    outline: 1px solid var(--indigo, #4f46e5);
}
.maw-shell .maw-detail-sm-asmpick-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-asmpick-id {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    color: var(--ink-dim);
    flex: none;
}
.maw-shell .maw-detail-sm-asmpick-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}
.maw-shell .maw-detail-sm-deck-addasm-btn {
    font-size: 11.5px;
}

/* ===================================================================
   INCLUDE STRUCTURE -- read-only preview (tab) + Edit Structure button
   The tab is a compact summary; all editing is in the floating editor.
   =================================================================== */
.maw-shell .maw-detail-sm-incl-edit-btn {
    flex: none;
    font-size: 12px;
    height: 30px;
    padding: 0 14px;
}
.maw-shell .maw-detail-state .maw-detail-sm-incl-edit-btn {
    margin-top: 12px;
}
.maw-shell .maw-detail-sm-prev {
    padding: 2px;
}
.maw-shell .maw-detail-sm-prev-summary {
    font-size: 11.5px;
    color: var(--ink-dim);
    padding: 4px 4px 10px;
    letter-spacing: .2px;
}
.maw-shell .maw-detail-sm-prev-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.maw-shell .maw-detail-sm-prev-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.maw-shell .maw-detail-sm-prev-row.maw-detail-sm-prev-excluded {
    opacity: .55;
}
.maw-shell .maw-detail-sm-prev-num {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-mut);
    background: var(--panel-soft);
    border-radius: 6px;
}
.maw-shell .maw-detail-sm-prev-meta {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    color: var(--ink-mut);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-prev-loading {
    font-style: italic;
    color: var(--ink-dim);
}
.maw-shell .maw-detail-sm-prev-cmt {
    background: var(--panel-soft);
    border-style: dashed;
}
.maw-shell .maw-detail-sm-prev-cmt-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* (The floating Include Structure editor modal was retired 2026-07-17 --
   Blocks editing is inline in the tab. The +Assembly picker keeps its high
   z-index so it stacks above any tab content.) */
.maw-shell .maw-detail-sm-asmpick-overlay {
    z-index: 1010;
}

/* ===================================================================
   SORTABLE (pointer-based drag-to-reorder) -- ghost + placeholder
   =================================================================== */
.maw-shell .maw-detail-sm-deck-grip,
.maw-shell .maw-detail-sm-incl-file-grip {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.maw-shell .maw-detail-sm-incl-file-grip {
    flex: none;
    font-size: 11px;
    letter-spacing: -2px;
    color: var(--ink-mut);
    line-height: 1;
}
body.maw-sortable-dragging,
body.maw-sortable-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}
.maw-shell .maw-sortable-placeholder {
    opacity: .4;
    outline: 2px dashed var(--indigo, #6366f1);
    outline-offset: -2px;
}
/* The floating clone that follows the pointer. Appended to .maw-shell (keeps
   its scoped styling) with position:fixed so it escapes the modal's
   overflow:hidden and tracks the viewport. */
.maw-shell .maw-sortable-ghost {
    box-shadow: 0 12px 34px rgba(0,0,0,0.3);
    border-radius: 8px;
    opacity: .96;
    transform: scale(1.01);
    background: var(--panel, #fff);
}

/* Main Deck source toggle (Overview) -- opt-in choice between the auto-generated
   wrapper and the user's preserved uploaded main deck. Only rendered when an
   uploaded main was preserved (data.uploaded_main_attachment_id). */
.maw-shell .maw-detail-sm-mainsrc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border, #e5e7eb);
}
.maw-shell .maw-detail-sm-mainsrc-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink, #1f2937);
    cursor: pointer;
    margin: 0;
}
.maw-shell .maw-detail-sm-mainsrc-opt input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* "Set as main deck" per-file control in the Include Structure. */
.maw-shell .maw-detail-sm-setmain-btn {
    font-size: 11px;
    padding: 2px 8px;
    margin: 0 6px;
    white-space: nowrap;
    border: 1px solid var(--border, #d1d5db);
    background: var(--panel, #fff);
    color: var(--ink-dim, #6b7280);
    border-radius: 5px;
    cursor: pointer;
    flex: none;
}
.maw-shell .maw-detail-sm-setmain-btn:hover {
    color: var(--indigo, #6366f1);
    border-color: var(--indigo, #6366f1);
}
.maw-shell .maw-detail-sm-setmain-btn.maw-detail-sm-mainmark {
    color: #fff;
    background: var(--d3v-status-success, #16a34a);
    border-color: var(--d3v-status-success, #16a34a);
    font-weight: 600;
}
.maw-shell .maw-detail-sm-deck-ismain {
    outline: 1px solid var(--d3v-status-success, #16a34a);
    outline-offset: -1px;
    border-radius: 6px;
}
.maw-shell .maw-detail-sm-deck-ismain .maw-detail-sm-deck-kw2 {
    color: var(--d3v-status-success, #16a34a);
    font-weight: 700;
}

/* ---- Dependency graph annotations (Rahul 2026-07-17: root-only mains) ---- */
/* Non-root row in the Blocks preview: its parent's file pulls it in. */
.maw-shell .maw-detail-sm-prev-incby {
    flex: 0 0 auto;
    max-width: 40%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px;
    color: var(--d3v-text-muted, #8a8578);
    border: 1px solid var(--d3v-border-soft, rgba(127,127,127,.3));
    border-radius: 9px;
    padding: 1px 7px;
    line-height: 15px;
}
.maw-shell .maw-detail-sm-prev-nested .maw-detail-sm-incl-asm-chip { opacity: .75; }

/* Parameters tab: Source column + conflicts call-to-action */
.maw-shell .maw-detail-sm-param-src {
    font-size: 11px;
    color: var(--d3v-text-muted, #8a8578);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-param-src-infile { color: var(--d3v-status-warning, #b8860b); }
.maw-shell .maw-detail-sm-param-src-main   { font-style: italic; }

/* Parameters tab: Affects column -- part traceability (phase 09 I4) */
.maw-shell .maw-detail-sm-param-affects {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
    font-size: 11px;
}
.maw-shell .maw-detail-sm-param-attr {
    font-weight: 600;
    color: var(--ink);
}
.maw-shell .maw-detail-sm-param-part { white-space: nowrap; }
.maw-shell .maw-detail-sm-param-part-ids {
    color: var(--d3v-text-muted, #8a8578);
    font-size: 10px;
}
.maw-shell .maw-detail-sm-param-more {
    color: var(--d3v-text-muted, #8a8578);
    cursor: help;
}
.maw-shell .maw-detail-sm-param-affects-dim {
    color: var(--d3v-text-muted, #8a8578);
    font-size: 11px;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-conflicts-cta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--d3v-text-muted, #8a8578);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ===================================================================
   INCLUDE STRUCTURE v2 (2026-07-17) -- 3 tabs: Blocks | Main File | Graph
   =================================================================== */

/* Main File tab: refresh + last-updated meta row above the deck */
.maw-shell .maw-detail-sm-mif-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0 8px;
}
.maw-shell .maw-detail-sm-mif-stamp {
    font-size: 11.5px;
    color: var(--ink-dim);
}

/* Blocks tab: nested (included_by) block mirrors the generator -- staged
   but not *INCLUDEd directly, so it reads like a provenance comment. */
.maw-shell .maw-detail-sm-deck-block.maw-detail-sm-deck-nested {
    border-left: 2px dotted var(--line-hi);
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-deck-nested .maw-detail-sm-incl-asm-chip { opacity: .8; }

/* A nested-ENTITY card is NOT that provenance case: its slot file IS
   *INCLUDEd directly by the generated main, so it gets the same first-class
   chrome as a flat assembly card (Rahul, 2026-08-18) -- solid type-colored
   left highlight, normal panel background, full-strength chip. The dotted
   provenance look stays for the included_by blocks above. */
.maw-shell .maw-detail-sm-deck-block.maw-detail-sm-deck-nested.maw-detail-sm-deck-entity {
    border-left: 3px solid var(--t-asm);
    background: var(--panel);
}
.maw-shell .maw-detail-sm-deck-entity[data-child-type="systemmodel"] {
    border-left-color: var(--t-sm);
}
/* The 4-class rule above outranks the 3-class excluded rule -- restate the
   muted highlight so a DISABLED entity card still reads as excluded. */
.maw-shell .maw-detail-sm-deck-block.maw-detail-sm-deck-entity.maw-detail-sm-deck-excluded {
    border-left-color: var(--line-hi);
}
.maw-shell .maw-detail-sm-deck-entity .maw-detail-sm-incl-asm-chip { opacity: 1; }
/* Its body matches the flat card's files section (.maw-detail-sm-incl-files):
   soft band under a separator, stacked with the same gap. Direct children
   only -- nested regions deeper inside keep their tree look. */
.maw-shell .maw-detail-sm-deck-entity > .maw-detail-sm-incl-nbody {
    padding: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--panel-soft);
    border-top: 1px solid var(--line);
}
/* The entity's OWN file rows box up like flat file rows ("color blocks").
   Deeper rows (inside the nested region's tree) are untouched. */
.maw-shell .maw-detail-sm-deck-entity > .maw-detail-sm-incl-nbody > .maw-detail-sm-incl-nfile {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 9px;
    gap: 9px;
    font-size: 11.5px;
}
.maw-shell .maw-detail-sm-deck-entity > .maw-detail-sm-incl-nbody > .maw-detail-sm-incl-nfile:hover {
    background: var(--panel);
}
.maw-shell .maw-detail-sm-deck-kw2-nested {
    color: var(--ink-dim);
    font-weight: 500;
    font-style: italic;
}

/* Graph tab */
.maw-shell .maw-detail-sm-graph {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.maw-shell .maw-detail-sm-graph-legend {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--ink-dim);
    padding: 6px 2px 10px;
}
.maw-shell .maw-detail-sm-graph-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.maw-shell .maw-detail-sm-graph-sw {
    width: 14px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid var(--line-hi);
    background: var(--panel);
}
.maw-shell .maw-detail-sm-graph-sw-main   { background: var(--navy); border-color: var(--navy); }
.maw-shell .maw-detail-sm-graph-sw-root   { border-color: var(--t-asm); }
.maw-shell .maw-detail-sm-graph-sw-nested { border-style: dotted; background: var(--panel-soft); }
.maw-shell .maw-detail-sm-graph-sw-excl   { border-style: dashed; opacity: .55; }
/* Pan/zoom viewport (2026-08-22, Rahul). The canvas no longer SCROLLS the DAG
   at its natural size -- the svg fills it and the viewBox moves instead (see
   _mountGraphPanZoom). overflow:hidden is what makes it a viewport; without it
   a zoomed-in graph would grow the pane instead of being panned. */
.maw-shell .maw-detail-sm-graph-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    display: flex;
    cursor: grab;
}
.maw-shell .maw-detail-sm-graph-canvas.is-panning { cursor: grabbing; }
.maw-shell .maw-detail-sm-graph-svg {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100%;
}
/* A pan drag must not leave the graph's text selected behind it. */
.maw-shell .maw-detail-sm-graph-canvas.is-panning .maw-detail-sm-graph-svg text {
    -webkit-user-select: none;
    user-select: none;
}
.maw-shell .maw-detail-sm-graph-zoomctl {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    cursor: default;
}
.maw-shell .maw-detail-sm-graph-zoomctl button {
    border: none;
    background: none;
    color: var(--ink-mut);
    font-size: 12px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 5px;
    cursor: pointer;
}
.maw-shell .maw-detail-sm-graph-zoomctl button:hover {
    background: var(--panel-hover);
    color: var(--navy);
}
.maw-shell .maw-detail-sm-graph-zoompct {
    font-size: 10.5px;
    color: var(--ink-dim);
    min-width: 38px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.maw-shell .maw-detail-sm-graph-node rect,
.maw-shell .maw-detail-sm-graph-mainnode rect {
    fill: var(--panel);
    stroke: var(--t-asm);
    stroke-width: 1.2;
}
.maw-shell .maw-detail-sm-graph-node circle { fill: var(--t-asm); }
.maw-shell .maw-detail-sm-graph-node text,
.maw-shell .maw-detail-sm-graph-mainnode text {
    font-size: 11.5px;
    fill: var(--navy);
    font-weight: 600;
}
.maw-shell .maw-detail-sm-graph-node,
.maw-shell .maw-detail-sm-graph-mainnode { cursor: pointer; }
.maw-shell .maw-detail-sm-graph-node:hover rect { stroke-width: 2; }
.maw-shell .maw-detail-sm-graph-mainnode rect { fill: var(--navy); stroke: var(--navy); }
.maw-shell .maw-detail-sm-graph-mainnode text { fill: var(--panel); }
.maw-shell .maw-detail-sm-graph-mainnode:hover rect { opacity: .88; }
.maw-shell .maw-detail-sm-graph-node.is-nested rect {
    stroke-dasharray: 3 3;
    fill: var(--panel-soft);
}
.maw-shell .maw-detail-sm-graph-node.is-excluded rect {
    stroke: var(--ink-dim);
    stroke-dasharray: 5 4;
    fill: var(--panel-soft);
}
.maw-shell .maw-detail-sm-graph-node.is-excluded text,
.maw-shell .maw-detail-sm-graph-exclhdr { fill: var(--ink-dim); }
.maw-shell .maw-detail-sm-graph-node.is-excluded circle { fill: var(--ink-dim); }
.maw-shell .maw-detail-sm-graph-exclhdr {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.maw-shell .maw-detail-sm-graph-edge path {
    fill: none;
    stroke: var(--line-hi);
    stroke-width: 1.4;
}
.maw-shell .maw-detail-sm-graph-edge.is-transform path { stroke-dasharray: 6 4; }
.maw-shell .maw-detail-sm-graph-edge.is-nestededge path { stroke-dasharray: 3 3; }
.maw-shell .maw-detail-sm-graph-arrowhead { fill: var(--line-hi); }

/* Type colors (Rahul, 2026-08-21): a System Model node reads indigo, an
   Assembly stays green, a staged file steel. is-excluded's grey override
   below stays the stronger statement for disabled rows. */
.maw-shell .maw-detail-sm-graph-sw-sm   { border-color: var(--t-sm); }
.maw-shell .maw-detail-sm-graph-sw-file { border-color: var(--t-file); border-style: solid; }
.maw-shell .maw-detail-sm-graph-node.is-sm rect   { stroke: var(--t-sm); }
.maw-shell .maw-detail-sm-graph-node.is-sm circle { fill: var(--t-sm); }
.maw-shell .maw-detail-sm-graph-node.is-excluded.is-sm rect   { stroke: var(--ink-dim); }
.maw-shell .maw-detail-sm-graph-node.is-excluded.is-sm circle { fill: var(--ink-dim); }

/* File leaves. Deliberately NOT .maw-detail-sm-graph-node -- that class means
   "open this ENTITY", and a file is not one.

   The original note here said a file "has nowhere to navigate". That was only
   true of the graph: the Blocks rows have always opened a file detail view via
   the shared _onInclFileOpen, and since 2026-08-22 the leaf carries the same
   data-file-id/-name/-owner-id trio and routes to that identical handler. So
   the affordance is now .is-openable, which the renderer sets ONLY when the row
   really has a file id -- the "+N more files" summary and any id-less row stay
   inert, which is what the no-dead-click-target rule was protecting. */
.maw-shell .maw-detail-sm-graph-filenode.is-openable { cursor: pointer; }
.maw-shell .maw-detail-sm-graph-filenode.is-openable:hover rect {
    stroke-width: 2;
    fill: var(--panel);
}
.maw-shell .maw-detail-sm-graph-filenode.is-openable:hover text {
    fill: var(--navy);
}
.maw-shell .maw-detail-sm-graph-filenode rect {
    fill: var(--panel-soft);
    stroke: var(--t-file);
    stroke-width: 1;
}
.maw-shell .maw-detail-sm-graph-filenode text {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 10.5px;
    fill: var(--ink);
}
.maw-shell .maw-detail-sm-graph-filenode.is-more rect { stroke-dasharray: 4 3; }
.maw-shell .maw-detail-sm-graph-filenode.is-more text { fill: var(--ink-dim); font-style: italic; }
.maw-shell .maw-detail-sm-graph-edge.is-fileedge path { stroke-width: 1.1; opacity: .75; }

/* ---- include loading affordances (Rahul, 2026-08-21) ----------------------
   The shimmer keyframes (maw-skel-shimmer) ship app-wide from home.css; the
   strip composes them with a spinner + label so "not final yet" is stated,
   not implied. Every consumer gates on a LIVE in-flight flag, never on a
   "kicked" latch -- a failed load must clear these, not strand them. */
.maw-shell .maw-incl-spin {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    display: inline-block;
    border: 2px solid var(--line-hi);
    border-top-color: var(--t-sm);
    animation: maw-incl-spin-rot .8s linear infinite;
}
@keyframes maw-incl-spin-rot { to { transform: rotate(360deg); } }
.maw-shell .maw-incl-loading-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px dashed var(--line-hi);
    border-radius: 7px;
    color: var(--ink-dim);
    font-size: 11.5px;
    background-color: var(--panel-hover);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0)    0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0)    100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: maw-skel-shimmer 1.25s ease-in-out infinite;
}
.maw-shell .maw-incl-resolving {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-dim);
}

/* A file NAME that opens the file's detail view (nested include rows --
   Rahul, 2026-08-21). Same affordance as .maw-detail-sm-incl-file-name. */
.maw-shell .maw-incl-open-file {
    cursor: pointer;
}
.maw-shell .maw-incl-open-file:hover {
    color: var(--indigo);
    text-decoration: underline;
}

/* Parameters tab: *PARAMETER_EXPRESSION rows (phase 09 I5) */
.maw-shell .maw-detail-sm-param-exprtag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--d3v-text-muted, #8a8578);
    border: 1px solid var(--line, #d8d2c4);
    border-radius: 8px;
    padding: 0 5px;
    cursor: help;
}
.maw-shell .maw-detail-sm-param-exprbad { color: var(--d3v-status-danger, #b4443c); font-weight: 600; }
.maw-shell .maw-detail-sm-param-exprinput {
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    padding: 4px 8px;
    min-width: 190px;
}
.maw-shell .maw-detail-sm-param-exprcalc {
    font-size: 10px;
    color: var(--d3v-text-muted, #8a8578);
    margin-top: 2px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-param-exprcell.is-invalid .maw-detail-sm-param-exprinput {
    border-color: var(--d3v-status-danger, #b4443c);
    color: var(--d3v-status-danger, #b4443c);
}
.maw-shell .maw-detail-sm-param-exprcell.is-invalid .maw-detail-sm-param-exprcalc {
    color: var(--d3v-status-danger, #b4443c);
}

/* ---------------------------------------------------------------------------
   File transform visibility (Item 1, 2026-08-03).

   Two badges, never merged into one verdict: `A` is the transform the owning
   ASSEMBLY declares in its include manifest, `SM` is the override THIS System
   Model layers over it. The override wins for rendering but does not remove
   the assembly value -- clearing it reveals the assembly's again -- so a
   single badge could not say what is actually true about the row.
   --------------------------------------------------------------------------- */
.maw-shell .maw-detail-sm-incl-tfbadge {
    display: inline-block;
    flex: none;
    min-width: 20px;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.3px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: help;
}
.maw-shell .maw-tfbadge-asm {
    color: var(--ink-dim, #6b7280);
    border-color: var(--border, #d1d5db);
    background: var(--panel-2, #f3f4f6);
}
.maw-shell .maw-tfbadge-sm {
    color: #fff;
    border-color: var(--indigo, #6366f1);
    background: var(--indigo, #6366f1);
}
.maw-shell .maw-detail-sm-incl-tf-btn {
    font-size: 11px;
    padding: 2px 8px;
    margin: 0 2px 0 6px;
    white-space: nowrap;
    border: 1px solid var(--border, #d1d5db);
    background: var(--panel, #fff);
    color: var(--ink-dim, #6b7280);
    border-radius: 5px;
    cursor: pointer;
    flex: none;
}
.maw-shell .maw-detail-sm-incl-tf-btn:hover {
    color: var(--indigo, #6366f1);
    border-color: var(--indigo, #6366f1);
}
.maw-shell .maw-detail-sm-incl-tf-btn[disabled] { opacity: 0.5; cursor: default; }

.maw-shell .maw-detail-sm-incl-tfline {
    color: var(--ink-dim, #6b7280);
    font-size: 11px;
}
.maw-shell .maw-detail-sm-incl-tfline-sm { color: var(--indigo, #6366f1); }

/* ---------------------------------------------------------------------------
   Merged nested include structure (2026-08-03)

   A card's dropdown shows its own files first, then the structures included
   WITHIN it, recursively -- what used to live behind a separate Tree tab.
   Everything below depth 1 comes from assembler_resolve_include_structure and
   is read-only: the modify worker only ever writes this model's own carrier.
   --------------------------------------------------------------------------- */

.maw-shell .maw-detail-sm-incl-nested-region {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line, #e5ddcd);
}
.maw-shell .maw-detail-sm-incl-nested-hd {
    font-size: 11px;
    color: var(--ink-dim, #9c9480);
    padding: 2px 8px 4px;
    letter-spacing: .02em;
}

.maw-shell .maw-detail-sm-incl-nnode {
    border-left: 2px solid var(--line, #e5ddcd);
    padding-left: 6px;
    margin-bottom: 2px;
}
.maw-shell .maw-detail-sm-incl-nnode.is-sealed {
    border-left-color: var(--t-sm, #5048c6);
}
.maw-shell .maw-detail-sm-incl-nnode-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: var(--radius-sm, 9px);
}
.maw-shell .maw-detail-sm-incl-nnode-hdr:hover {
    background: var(--panel-hover, #ece5d6);
}

/* ---- nested nodes as first-class cards (Rahul, 2026-08-21) -----------------
   .maw-incl-ncard gives every RESOLVED nested entity the same bordered-card
   chrome as the top-level blocks: type-colored left highlight, panel header,
   soft body band, boxed file rows. It is a NEW class on purpose -- the
   sortable's itemSelector and the closest('.maw-detail-sm-incl-card') lookups
   key on the top-level card classes, and the Parameters tree shares
   .maw-detail-sm-incl-nnode-hdr with its own .maw-prm-node-hdr look -- so the
   card chrome must not ride either of those. Scoped here with > so deeper
   levels restate nothing. */
.maw-shell .maw-incl-ncard {
    border: 1px solid var(--line);
    border-left: 3px solid var(--t-asm);
    border-radius: 9px;
    background: var(--panel);
    overflow: hidden;
    padding-left: 0;      /* cancels the plain nnode tree indent */
    margin: 6px 0 6px 0;
}
.maw-shell .maw-incl-ncard[data-ntype="systemmodel"],
.maw-shell .maw-incl-ncard.is-sealed {
    border-left-color: var(--t-sm);
}
.maw-shell .maw-incl-ncard > .maw-detail-sm-incl-nnode-hdr {
    gap: 10px;
    padding: 8px 10px;
    border-radius: 0;
}
.maw-shell .maw-incl-ncard > .maw-detail-sm-incl-nbody {
    padding: 4px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--panel-soft);
    border-top: 1px solid var(--line);
}
.maw-shell .maw-incl-ncard > .maw-detail-sm-incl-nbody > .maw-detail-sm-incl-nfile {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 6px 9px;
    gap: 9px;
    font-size: 11.5px;
}
.maw-shell .maw-incl-ncard > .maw-detail-sm-incl-nbody > .maw-detail-sm-incl-nfile:hover {
    background: var(--panel);
}

.maw-shell .maw-detail-sm-incl-nexpand-btn {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--ink-dim, #9c9480);
    cursor: pointer;
    transition: transform .15s ease;
}
.maw-shell .maw-detail-sm-incl-nexpand-btn svg { width: 13px; height: 13px; }
.maw-shell .maw-detail-sm-incl-nexpand-btn.is-open { transform: rotate(180deg); }
.maw-shell .maw-detail-sm-incl-nexpand-spacer {
    flex: none;
    width: 20px;
    height: 20px;
}

.maw-shell .maw-detail-sm-incl-nbody { padding: 2px 0 4px; }

.maw-shell .maw-detail-sm-incl-nfile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 9px);
    font-size: 11px;
}
.maw-shell .maw-detail-sm-incl-nfile:hover { background: var(--panel-soft, #f4efe4); }
.maw-shell .maw-detail-sm-incl-nfile.is-wrapper { opacity: .78; }

.maw-shell .maw-detail-sm-incl-nbadge {
    flex: none;
    font-size: 10px;
    line-height: 1.5;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--line-hi, #d4c9b3);
    color: var(--ink-mut, #6d6759);
    background: var(--panel-soft, #f4efe4);
    white-space: nowrap;
}
.maw-shell .maw-detail-sm-incl-nbadge.is-sealed {
    color: var(--t-sm, #5048c6);
    border-color: var(--indigo-bd, #c9c8f0);
    background: var(--indigo-soft, #edecfb);
}
.maw-shell .maw-detail-sm-incl-nbadge.is-pinned {
    font-family: var(--font-mono, Menlo, monospace);
}
.maw-shell .maw-detail-sm-incl-nbadge.is-problem {
    color: var(--red, #c0392b);
    border-color: var(--red, #c0392b);
    background: var(--red-soft, #f7e3e0);
}

.maw-shell .maw-detail-sm-incl-nproblems { padding: 2px 6px 4px 26px; }
.maw-shell .maw-detail-sm-incl-nproblem {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
}
.maw-shell .maw-detail-sm-incl-nproblem code {
    font-family: var(--font-mono, Menlo, monospace);
    font-size: 10px;
    opacity: .8;
}
.maw-shell .maw-detail-sm-incl-nproblem.is-error {
    color: var(--red, #c0392b);
    background: var(--red-soft, #f7e3e0);
}
.maw-shell .maw-detail-sm-incl-nproblem.is-warn {
    color: var(--orange-strong, #a8431f);
    background: var(--orange-soft, #f6e6d8);
}

/* ---------------------------------------------------------------------------
   Transform button states.

   `is-set` carries a count -- "Transform (3)" -- and reads as a live control.
   `is-empty` is the clickable dashed ghost: a file with no transform still
   offers the door, it just does not claim a number (Rahul, 2026-08-03).
   `is-none` is that same nothing-to-see state when it is also not this model's
   to change, so it stays a flat placeholder rather than an invitation.
   --------------------------------------------------------------------------- */

.maw-shell .maw-detail-sm-incl-tf-btn.is-set {
    color: var(--green, #3f7d4f);
    border-color: var(--green, #3f7d4f);
    background: var(--green-soft, #e9efdf);
    font-weight: 600;
}
.maw-shell .maw-detail-sm-incl-tf-btn.is-empty {
    border-style: dashed;
    color: var(--ink-dim, #9c9480);
    background: transparent;
}
.maw-shell .maw-detail-sm-incl-tf-btn.is-empty:hover {
    border-style: solid;
    color: var(--indigo, #4f46e5);
    border-color: var(--indigo, #4f46e5);
}
.maw-shell .maw-detail-sm-incl-tf-btn.is-locked {
    cursor: default;
    background: var(--panel-soft, #f4efe4);
}
/* *INCLUDE_STAMPED_PART settings chip beside the keyword select: green once the
   row has a PID, amber while it has none (submit refuses such a row). */
.maw-shell .maw-incl-stamped-btn.is-set {
    color: var(--green, #3f7d4f);
    border-color: var(--green, #3f7d4f);
    background: var(--green-soft, #e9efdf);
    font-weight: 600;
}
.maw-shell .maw-incl-stamped-btn.is-missing {
    color: #8a6116;
    border-color: var(--amber, #b8860b);
    background: #fdf1dc;
    font-weight: 600;
}
.maw-shell .maw-detail-sm-incl-tf-btn.is-locked:hover {
    color: var(--ink-dim, #9c9480);
    border-color: var(--line-hi, #d4c9b3);
}
.maw-shell .maw-detail-sm-incl-tf-btn.is-none {
    border-color: transparent;
    background: transparent;
    color: var(--ink-dim, #9c9480);
    opacity: .5;
}
/* A stamped part takes no transform (stamped-row policy, 2026-09-25): inert
 * without a layer, amber when a stored layer waits to be switched off. */
.maw-shell .maw-detail-sm-incl-tf-btn.is-stamped { cursor: not-allowed; }
.maw-shell .maw-detail-sm-incl-tf-btn.is-stamped.is-set {
    cursor: pointer;
    background: transparent;
    color: #b45309;
    border-color: #b45309;
}
.maw-shell .maw-mif-fchip.is-stamped { opacity: .35; cursor: not-allowed; }
.maw-shell .maw-mif-fchip-btn.is-stamped { color: #b45309; }

/** Added by rahul.suri on 08/03/2026 - Multi - Transform select mode.
 *  Shared by the System Model and Assembly include structures -- this file
 *  concats ahead of assembly.css, so one copy styles both pages.
 *
 *  The !important on .maw-incl-sel is LOAD-BEARING, not cargo cult: d3VIEW's
 *  core stylesheet carries an unscoped `label { display: block !important; }`,
 *  which outranks any non-important author rule regardless of specificity.
 *  Without it this label stacks as a block and breaks the file row's flex line
 *  (and jQuery .hide()/.show() on it would silently do nothing). **/
.maw-shell .maw-incl-sel {
    display: inline-flex !important;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0 2px;
    cursor: pointer;
}
.maw-shell .maw-incl-sel-check {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--indigo);
}
/** Why the file cannot be picked, stated on the row itself rather than as a
 *  silent absence -- an unexplained missing checkbox reads as a broken UI. **/
.maw-shell .maw-incl-sel-tagged {
    flex: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--red);
    background: var(--red-soft);
    border: 1px solid var(--red);
    cursor: help;
}
.maw-shell .maw-incl-sel-hint {
    color: var(--ink-dim, #9c9480);
    margin-right: 4px;
}

/* ============================================================
   Parameters: per-file grouping inside each entity node
   (34d ask 1). A header row per defining file; the chip opens
   the file via the shared .maw-incl-open-file delegation.
   ============================================================ */
.maw-shell .maw-prm-file-hdr td {
  padding: 8px 6px 4px;
  border-bottom: none;
  background: transparent;
}
.maw-shell .maw-prm-file-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft, rgba(127, 127, 127, 0.06));
  font-family: Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft, #5a6172);
}
.maw-shell .maw-prm-file-chip.maw-incl-open-file { cursor: pointer; }
.maw-shell .maw-prm-file-chip.maw-incl-open-file:hover {
  color: var(--t-sm, #5048c6);
  border-color: var(--t-sm, #5048c6);
  text-decoration: none;
}
.maw-shell .maw-prm-file-chip.is-central {
  font-family: inherit;
  font-style: italic;
  font-weight: 500;
}
.maw-shell .maw-prm-file-count {
  margin-left: 8px;
  font-size: 10.5px;
  color: var(--ink-soft, #5a6172);
  opacity: 0.8;
}
.maw-shell .maw-prm-file-src {
  font-family: Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-soft, #5a6172);
  opacity: 0.85;
}

/* ============================================================
   Parameters: ONE unified table (34e, Rahul 2026-08-23).
   Entity super-header bars and file subsections live as rows in
   a single table; nesting renders as the include-structure
   guide rails (2px line per level), drawn as continuous
   vertical stripes on each row's lead cell.
   ============================================================ */
.maw-shell .maw-prm-unitable tr.maw-prm-asm-row > td.maw-prm-lead {
    padding-top: 8px;
    padding-bottom: 8px;
}
.maw-shell .maw-prm-unitable .maw-prm-node-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
}
.maw-shell .maw-prm-unitable tr.maw-prm-note-row td {
    border-bottom: 1px solid var(--line);
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud1 > td.maw-prm-lead {
    padding-left: 35px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: 9px 0;
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud2 > td.maw-prm-lead {
    padding-left: 60px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%;
    background-position: 9px 0, 34px 0;
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud3 > td.maw-prm-lead {
    padding-left: 85px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%, 2px 100%;
    background-position: 9px 0, 34px 0, 59px 0;
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud4 > td.maw-prm-lead {
    padding-left: 110px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%, 2px 100%, 2px 100%;
    background-position: 9px 0, 34px 0, 59px 0, 84px 0;
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud5 > td.maw-prm-lead {
    padding-left: 135px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%;
    background-position: 9px 0, 34px 0, 59px 0, 84px 0, 109px 0;
}

.maw-shell .maw-prm-unitable tr.maw-prm-ud6 > td.maw-prm-lead {
    padding-left: 160px;
    background-image: linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25)), linear-gradient(rgba(127,127,127,.25), rgba(127,127,127,.25));
    background-repeat: no-repeat;
    background-size: 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%;
    background-position: 9px 0, 34px 0, 59px 0, 84px 0, 109px 0, 134px 0;
}

/* ==========================================================================
   Phase 35 Packet B (2026-08-26, rahul.suri) -- the merged Main File editor.
   The mockup contract (artifact 9b37ecb0): full deck text, line-numbered;
   each contributing entity's lines encapsulated in a colored block -- green
   ASM, indigo SM -- full width at every depth, nesting by containment alone;
   excluded blocks faded with their $-commented lines present; minimized
   blocks keep their real line range; manual raw-text lines get the orange
   gutter. Appended at the end so nothing above re-cascades.
   ========================================================================== */
.maw-shell .maw-mif-wrap {
    display: flex;
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}
.maw-shell .maw-mif-pal {
    flex: 0 0 190px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
    padding: 10px;
    overflow-y: auto;
    align-self: flex-start;
    max-height: 100%;
    position: sticky;
    top: 0;
}
.maw-shell .maw-mif-pallab {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim, #7a7a7a);
    margin-bottom: 8px;
}
.maw-shell .maw-mif-palchip {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(34,139,84,.45);
    background: rgba(34,139,84,.07);
    border-radius: 7px;
    padding: 4px 8px;
    margin-bottom: 5px;
    font-size: 11.5px;
}
.maw-shell .maw-mif-palchip-sm {
    border-color: rgba(79,70,229,.45);
    background: rgba(79,70,229,.07);
}
.maw-shell .maw-mif-palchip .maw-mif-palname {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-mif-palchip .maw-mif-palct {
    font-size: 10px;
    color: var(--ink-dim, #7a7a7a);
}
.maw-shell .maw-mif-palchip-off { opacity: .55; }
.maw-shell .maw-mif-palchip-file {
    border-color: rgba(180,83,9,.45);
    background: rgba(180,83,9,.07);
}
.maw-shell .maw-mif-ty-file { background: rgba(180,83,9,.85); }
/* a host's block-header add-ons (assembly: include keyword + transform) */
.maw-shell .maw-mif-hdrx { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.maw-shell .maw-mif-hdrx .maw-incl-type-select { font-size: 10.5px; padding: 2px 4px; height: auto; }
.maw-shell .maw-mif-hdrx .maw-btn { font-size: 10px; padding: 2px 7px; }
.maw-shell .maw-mif-fchip-btn { cursor: pointer; border: 1px solid transparent; background: transparent; padding: 0 3px; border-radius: 4px; opacity: .35; }
.maw-shell .maw-mif-fchip-btn.is-set { opacity: 1; }
.maw-shell .maw-mif-fchip-btn:hover { opacity: 1; border-color: var(--accent, #2f6fed); }
/* Multi - Transform: the tick on a file span's first line */
.maw-shell .maw-mif-ln .maw-incl-sel { flex: none; margin: 0 6px 0 2px; display: inline-flex; align-items: center; }
.maw-shell .maw-mif-ln .maw-incl-sel-tagged { flex: none; margin: 0 6px 0 2px; font-size: 9.5px; color: var(--ink-dim, #7a7a7a); }
.maw-shell .maw-mif-paladd { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.maw-shell .maw-mif-paladd .maw-btn { width: 100%; text-align: center; }
.maw-shell .maw-mif-palhint {
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--ink-dim, #7a7a7a);
}

.maw-shell .maw-mif-ed {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-soft);
    padding: 12px 14px;
    font-family: var(--mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 12px;
    line-height: 1.5;
    overflow: auto;
}
.maw-shell .maw-mif-ln { display: flex; align-items: baseline; white-space: pre; }
.maw-shell .maw-mif-no {
    flex: none;
    width: 40px;
    text-align: right;
    padding-right: 12px;
    color: var(--ink-dim, #9a9a9a);
    font-size: 10px;
    font-weight: 700;
    user-select: none;
}
.maw-shell .maw-mif-tx { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-mif-tx.kw { font-weight: 700; }
.maw-shell .maw-mif-tx.cm { color: var(--ink-dim, #8a8a8a); }

/* the block boxes: full width at every depth, containment only */
.maw-shell .maw-mif-ablock {
    border: 1.5px solid rgba(34,139,84,.55);
    background: rgba(34,139,84,.05);
    border-radius: 9px;
    margin: 4px 0;
    overflow: hidden;
}
.maw-shell .maw-mif-smk {
    border-color: rgba(79,70,229,.55);
    background: rgba(79,70,229,.05);
    border-left: 4px solid rgba(79,70,229,.75);
}
.maw-shell .maw-mif-subblock { margin: 3px 0; }
.maw-shell .maw-mif-pk {
    border-color: rgba(180,120,20,.5);
    background: rgba(180,120,20,.05);
}
.maw-shell .maw-mif-off { opacity: .55; }
.maw-shell .maw-mif-off .maw-mif-abhead { text-decoration: none; }

.maw-shell .maw-mif-abhead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 11px;
    background: rgba(127,127,127,.06);
    border-bottom: 1px solid rgba(127,127,127,.15);
}
.maw-shell .maw-mif-folded .maw-mif-abhead { border-bottom: none; }
.maw-shell .maw-mif-ty {
    flex: none;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 1px 6px;
    border-radius: 5px;
    color: #fff;
    background: rgba(34,139,84,.85);
}
.maw-shell .maw-mif-ty-sm { background: rgba(79,70,229,.85); }
.maw-shell .maw-mif-ty-pk { background: rgba(180,120,20,.85); }
.maw-shell .maw-mif-nm { font-weight: 700; }
.maw-shell .maw-mif-meta2 { color: var(--ink-dim, #7a7a7a); font-size: 10.5px; }
.maw-shell .maw-mif-norange {
    flex: none;
    width: 44px;
    text-align: right;
    padding-right: 8px;
    color: var(--ink-dim, #9a9a9a);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono, Menlo, monospace);
}
.maw-shell .maw-mif-grip { cursor: grab; color: var(--ink-dim, #9a9a9a); user-select: none; }
.maw-shell .maw-mif-acts { margin-left: auto; display: flex; gap: 4px; }
.maw-shell .maw-mif-acts button,
.maw-shell .maw-mif-child-btn {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 5px;
    font-size: 10.5px;
    padding: 1px 6px;
    cursor: pointer;
    color: inherit;
}
.maw-shell .maw-mif-child-btn { margin-left: 4px; }
.maw-shell .maw-mif-lock {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 5px;
}
.maw-shell .maw-mif-lock-open { color: #2f8a57; background: rgba(47,138,87,.1); }
.maw-shell .maw-mif-lock-shut { color: #b3423a; background: rgba(179,66,58,.12); }
.maw-shell .maw-mif-abbody { padding: 4px 8px 6px; }
.maw-shell .maw-mif-childdeck {
    border: 1px dashed rgba(79,70,229,.45);
    border-radius: 6px;
    margin-top: 4px;
    padding: 4px 6px;
    background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(79,70,229,.045) 8px 16px);
}
.maw-shell .maw-mif-ghostcap {
    font-size: 10px;
    font-style: italic;
    color: var(--ink-dim, #7a7a7a);
    padding: 1px 0 4px 40px;
}
.maw-shell .maw-mif-ghostln { opacity: .72; }
.maw-shell .maw-mif-ghostln .maw-mif-no { color: rgba(79,70,229,.55); }

/* manual raw-text lines: the orange gutter */
.maw-shell .maw-mif-manual { position: relative; background: rgba(217,119,6,.06); }
.maw-shell .maw-mif-manual .maw-mif-no { color: #b45309; }
.maw-shell .maw-mif-manualwrap { border-left: 3px solid rgba(217,119,6,.6); margin: 2px 0; cursor: text; }
.maw-shell .maw-mif-manual-editing { padding: 6px 8px; background: rgba(217,119,6,.05); border-radius: 6px; }
.maw-shell .maw-mif-text-area {
    width: 100%;
    box-sizing: border-box;
    min-height: 70px;
    border: 1px solid rgba(217,119,6,.5);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--panel, #fff);
    color: inherit;
    resize: vertical;
}
.maw-shell .maw-mif-pending { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 4px; }
.maw-shell .maw-mif-pendingrow { opacity: .8; }

/* Edit | Review segmented toggle in the meta strip */
.maw-shell .maw-mif-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-right: 8px; }
.maw-shell .maw-mif-viewtoggle .maw-btn { border: none; border-radius: 0; }
.maw-shell .maw-mif-view-on { background: var(--accent, #2563eb); color: #fff; }
.maw-shell .maw-mif-review .maw-mif-ln:hover { background: rgba(127,127,127,.05); }
.maw-shell .maw-mif-fchip {
    flex: none;
    margin-left: 8px;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124,58,237,.1);
    border-radius: 4px;
    padding: 0 5px;
}
.maw-shell .maw-detail-sm-deck-txtline { color: inherit; }
.maw-shell .maw-detail-sm-deck-txtblock { border-left: 3px solid rgba(217,119,6,.6); }

/* ==========================================================================
   Phase 35 iteration 2 (Rahul 2026-08-27): the editor's chrome moves into a
   RIGHT rail -- palette chips with include/exclude, the add buttons, and
   Save pinned at the bottom. Chips drag into the file to place blocks.
   ========================================================================== */
.maw-shell .maw-mif-side {
    flex: 0 0 216px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.maw-shell .maw-mif-side .maw-mif-pal {
    flex: 1 1 auto;
    position: static;
    align-self: stretch;
    max-height: none;
    overflow-y: auto;
}
.maw-shell .maw-mif-side-save { flex: none; display: flex; gap: 6px; }
.maw-shell .maw-mif-side-save .maw-btn { flex: 1 1 0; text-align: center; }
.maw-shell .maw-mif-side-save .maw-detail-sm-incl-save-btn { flex: 2 1 0; }
.maw-shell .maw-mif-palchip[data-eidx] { cursor: grab; }
.maw-shell .maw-mif-palchip .maw-mif-palact {
    flex: none;
    font-size: 9.5px;
    line-height: 1;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel, #fff);
    color: inherit;
    cursor: pointer;
}
.maw-shell .maw-mif-palchip .maw-mif-palact:hover { border-color: var(--accent, #2f6fed); color: var(--accent, #2f6fed); }
.maw-shell .maw-mif-palchip .maw-mif-palrm {
    flex: none; width: 16px; height: 16px; line-height: 14px; padding: 0; text-align: center;
    border: 1px solid transparent; border-radius: 4px; background: transparent;
    color: var(--ink-dim, #7a7a7a); font-size: 13px; cursor: pointer;
}
.maw-shell .maw-mif-palchip .maw-mif-palrm:hover { border-color: #c0392b; color: #c0392b; }
.maw-shell .maw-mif-pendrm { opacity: .45; }
/* the labeled include/exclude control in a block header */
.maw-shell .maw-mif-acts .maw-mif-eye-btn { font-size: 10px; letter-spacing: .02em; }
/* comment blocks: hover affordance + inline editor spacing */
.maw-shell .maw-mif-cmtwrap { cursor: pointer; border-radius: 4px; }
.maw-shell .maw-mif-cmtwrap:hover { background: rgba(47,111,237,.06); }
.maw-shell .maw-mif-ed .maw-detail-sm-deck-cblock { margin: 6px 0 6px 40px; }
.maw-shell .maw-mif-ed .maw-detail-sm-cmt-text { width: 100%; box-sizing: border-box; }

/* Iteration 3 (Rahul 2026-08-27): the rail's top holds Edit|Review + Refresh
   (the file body takes the old meta bar's height), and every live action
   arms a busy gate -- acting button spins, everything else disables. */
.maw-shell .maw-mif-side-meta {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.maw-shell .maw-mif-side-meta .maw-mif-viewtoggle { flex: none; display: inline-flex; margin-right: 0; }
.maw-shell .maw-mif-side-meta .maw-mif-viewtoggle .maw-btn { flex: none; }
.maw-shell .maw-mif-side-meta .maw-detail-sm-mif-stamp {
    width: 100%;
    font-size: 10px;
    color: var(--ink-dim, #7a7a7a);
}
.maw-shell .maw-mif-side-busy {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}
.maw-shell .maw-mif-spinner {
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(127,127,127,.25);
    border-top-color: var(--accent, #2f6fed);
    border-radius: 50%;
    display: inline-block;
    animation: mawMifSpin .7s linear infinite;
}
.maw-shell .maw-mif-spinner-sm { width: 9px; height: 9px; border-width: 1.5px; vertical-align: middle; }
@keyframes mawMifSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .maw-shell .maw-mif-spinner { animation-duration: 1.6s; }
}
.maw-shell .maw-mif-acts button[disabled],
.maw-shell .maw-mif-palact[disabled],
.maw-shell .maw-mif-paladd .maw-btn[disabled] { opacity: .45; cursor: default; }

/* Text and comment rows reorder like blocks: grip pinned in the gutter */
.maw-shell .maw-mif-manualwrap, .maw-shell .maw-mif-cmtwrap { position: relative; }
.maw-shell .maw-mif-rowgrip { position: absolute; left: 2px; top: 1px; z-index: 2; font-size: 10px; line-height: 1.5; }

/* Include Structure full screen: the card pins over the window (below the
   assembly picker's 1000 and the sortable ghost's 100050). */
/* The card lives inside two stacking contexts -- #main_container (fixed,
   so a context regardless of z) and #main_content (relative, z 1) -- which
   trap it under the shell rail (1200) and agent dock (1100); lift both only
   while the card is pinned. */
#main_container:has(.maw-incl-fullscreen),
#main_content:has(.maw-incl-fullscreen) { z-index: 1300; }
.maw-shell .maw-incl-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 900;
    margin: 0;
    border-radius: 0;
    padding: 12px 16px;
}

/* Save in flight: veil the whole card (toolbar included) until the fresh paint */
.maw-shell .maw-detail-sec-fill { position: relative; }
.maw-shell .maw-mif-saving {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127,127,127,.18);
    cursor: wait;
}
.maw-shell .maw-mif-saving-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel, #fff);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    font-size: 13px;
}
/* A transform edit waiting for Save */
.maw-shell .maw-mif-fchip-btn.is-pending { opacity: 1; border-style: dashed; border-color: #7c3aed; }

/* Open in a tab: block names and the file-span arrow */
.maw-shell button.maw-mif-open-btn { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.maw-shell button.maw-mif-nm:hover { text-decoration: underline; color: var(--accent, #2f6fed); }
.maw-shell .maw-mif-fopen { flex: none; margin-left: 6px; font-size: 11px; opacity: .35; }
.maw-shell .maw-mif-ln:hover .maw-mif-fopen, .maw-shell .maw-mif-fopen:hover { opacity: 1; color: var(--accent, #2f6fed); }

/**
 * assembly.css -- Assembly entity detail view styles.
 * All classes prefixed maw-detail-asm-, scoped under .maw-shell.
 * Reuses atoms from detailed.css (maw-detail-*, maw-dm-*, maw-df-*, maw-btn*, maw-chip*).
 * Build: concatenated into assembler.css via Gruntfile explicit list -- orchestrator must wire.
 */

/* ===== Files panel ===== */
.maw-shell .maw-detail-asm-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.maw-shell .maw-detail-asm-files-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-dim);
}
.maw-shell .maw-detail-asm-files-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Files table */
.maw-shell .maw-detail-asm-files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.maw-shell .maw-detail-asm-files-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-detail-asm-files-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.maw-shell .maw-detail-asm-files-table tr:last-child td { border-bottom: none; }
.maw-shell .maw-detail-asm-files-table tr:hover td { background: var(--panel-soft); }

/* Filename chip-style cell */
.maw-shell .maw-detail-asm-file-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}
.maw-shell .maw-detail-asm-file-chip {
  display: inline-flex;
  align-items: center;
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--indigo);
  cursor: pointer;
  padding: 2px 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.maw-shell .maw-detail-asm-file-chip:hover { text-decoration: underline; }
.maw-shell .maw-detail-asm-file-chip-icon { width: 13px; height: 13px; flex: none; }

/* Version sub-row */
.maw-shell .maw-detail-asm-file-version-row td { background: var(--bg); }
.maw-shell .maw-detail-asm-file-version-indent {
  display: inline-flex;
  align-items: center;
  margin-left: 18px;
  max-width: calc(100% - 18px);
}
.maw-shell .maw-detail-asm-ver-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--indigo-soft);
  color: var(--indigo);
  border: 1px solid var(--indigo-bd);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  font-family: Menlo, Monaco, Consolas, monospace;
  letter-spacing: .3px;
}

/* Empty state */
.maw-shell .maw-detail-asm-empty {
  font-size: 12.5px;
  color: var(--ink-dim);
  padding: 10px 0;
  font-style: italic;
}

/* Upload input (hidden) */
.maw-shell .maw-detail-asm-upload-input { display: none; }

/* Upload feedback */
.maw-shell .maw-detail-asm-upload-msg {
  font-size: 12px;
  color: var(--indigo);
  margin-top: 6px;
}
.maw-shell .maw-detail-asm-upload-err {
  font-size: 12px;
  color: var(--orange-strong);
  margin-top: 6px;
}

/* ===== Parameters panel ===== */
.maw-shell .maw-detail-asm-params-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.maw-shell .maw-detail-asm-params-load {
  text-align: center;
  padding: 16px;
}

/* Parameters table -- reuses dm-row grid for row items */
.maw-shell .maw-detail-asm-param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.maw-shell .maw-detail-asm-param-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-detail-asm-param-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.maw-shell .maw-detail-asm-param-table tr:last-child td { border-bottom: none; }
.maw-shell .maw-detail-asm-param-type-badge {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-mut);
}
.maw-shell .maw-detail-asm-param-source {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--ink-dim);
}

/* ===== BOM panel ===== */
.maw-shell .maw-detail-asm-bom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.maw-shell .maw-detail-asm-bom-mount {
  min-height: 80px;
}

/* ===== Derived-from lineage panel ===== */
.maw-shell .maw-detail-asm-lineage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maw-shell .maw-detail-asm-lineage-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.maw-shell .maw-detail-asm-lineage-arrow {
  font-size: 14px;
  color: var(--ink-dim);
  flex: none;
}
.maw-shell .maw-detail-asm-lineage-self {
  font-weight: 700;
  color: var(--navy);
  font-size: 12.5px;
}

/* ===== Lock status badge ===== */
.maw-shell .maw-detail-asm-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}
.maw-shell .maw-detail-asm-lock-badge.locked {
  background: var(--orange-soft);
  color: var(--orange-strong);
  border: 1px solid var(--orange-bd);
}
.maw-shell .maw-detail-asm-lock-badge.unlocked {
  background: var(--green-soft, #f0faf2);
  color: var(--green, #2d7a3f);
  border: 1px solid var(--green-bd, #b2d9b8);
}
.maw-shell .maw-detail-asm-lock-icon { width: 12px; height: 12px; flex: none; }

/* ===== Action buttons in hero (Download ZIP) ===== */
.maw-shell .maw-detail-asm-download { }

/* Params body container */
.maw-shell .maw-detail-asm-params-body { }

/* BOM section container */
.maw-shell .maw-detail-asm-bom-sec { }

/* Params section container */
.maw-shell .maw-detail-asm-params-sec { }

/* Params load button (distinct from generic maw-btn) */
.maw-shell .maw-detail-asm-params-load-btn { }

/* BOM load button */
.maw-shell .maw-detail-asm-bom-load-btn { }

/* Clone button (active, not stub) */
.maw-shell .maw-detail-asm-clone-btn { }

/* Section-level action row */
.maw-shell .maw-detail-asm-sec-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* Clone / Derived-copy CTA -- prominent stub */
.maw-shell .maw-detail-asm-clone-stub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--indigo-bd, #b3bfea);
  border-radius: 10px;
  background: var(--indigo-soft, #f0f2fd);
  color: var(--indigo, #3b4fb8);
  font-size: 12.5px;
}
.maw-shell .maw-detail-asm-clone-stub-icon { width: 16px; height: 16px; flex: none; }
.maw-shell .maw-detail-asm-clone-stub-flag {
  font-size: 10px;
  font-style: italic;
  opacity: .75;
  margin-left: 4px;
}

/* Loading spinner reuse (inline) */
.maw-shell .maw-detail-asm-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-spin 0.75s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}

@keyframes maw-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Include Structure (section 'files') -- the Assembly twin of the System
   Model include page. Added 2026-07-26.

   The rows themselves deliberately carry the .maw-detail-sm-deck-* /
   .maw-detail-sm-incl-file-* classes from systemmodel.css (which concats
   BEFORE this file and is scoped to the same .maw-shell), so the two pages
   share one visual vocabulary instead of two drifting copies. Only what is
   genuinely new to this page lives here.
   ===================================================================== */
.maw-shell .maw-detail-asm-incl-sec {
    /* toolbar is flex:none; whichever sub-tab body follows takes the rest */
    gap: 0;
}
.maw-shell .maw-detail-asm-incl-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Updated by rahul.suri on 08/04/2026 - Phase 24. The size cell now toggles the
   row's inline detail pane on this page too (_onInclFileDetailToggle) -- the
   name cell keeps its open-the-file affordance -- so it inherits the shared
   pointer/hover affordance instead of suppressing it. Layout overrides stay. */
.maw-shell .maw-detail-asm-incl-row .maw-detail-sm-incl-file-size {
    flex: none;
    min-width: 62px;
    text-align: right;
}
.maw-shell .maw-detail-asm-incl-type {
    flex: none;
    width: 190px;
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
}
.maw-shell .maw-detail-asm-incl-row .maw-detail-sm-deck-path {
    cursor: pointer;
}

/* Per-file *INCLUDE_TRANSFORM editor trigger. Quiet until a transform is
   actually configured, then it carries the accent so a row that will emit a
   transform card is identifiable without opening the dialog. */
.maw-shell .maw-detail-asm-incl-transform-btn {
    flex: none;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
}
.maw-shell .maw-detail-asm-incl-transform-btn.is-set {
    border-color: var(--indigo-bd);
    background: var(--indigo-soft);
    color: var(--indigo);
    font-weight: 600;
}
/* Read-only viewers get the fact, not the control. */
.maw-shell .maw-detail-asm-incl-transform-tag {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--indigo-bd);
    border-radius: 999px;
    background: var(--indigo-soft);
    color: var(--indigo);
    font-size: 10.5px;
    white-space: nowrap;
}

/* Explanatory footnote under the editable list (default-order notice). */
.maw-shell .maw-detail-asm-incl-note {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    color: var(--ink-mut);
    font-size: 11.5px;
    line-height: 1.5;
}
/* The Block tab is showing the SAVED block while edits are pending -- this
   has to read as a warning, not as a neutral hint. */
.maw-shell .maw-detail-asm-incl-stale {
    margin-top: 0;
    margin-bottom: 8px;
    border-color: var(--warn, #b7791f);
    color: var(--ink);
}

/* Block tab header: one-line explanation + Copy. */
.maw-shell .maw-detail-asm-incl-blockhdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--ink-mut);
}
.maw-shell .maw-detail-asm-incl-blockhdr > span {
    flex: 1 1 auto;
    min-width: 0;
}
.maw-shell .maw-detail-asm-incl-blockhdr .maw-detail-asm-incl-copy-btn {
    flex: none;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
}
.maw-shell .maw-detail-asm-incl-blockline {
    white-space: pre;
}

/* ===== Section title row with inline action button ===== */
.maw-shell .maw-lc-sec-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Stub / future-action buttons inside section headers */
.maw-shell .maw-lc-action-stub {
  font-size: 11px;
  height: 24px;
  padding: 0 9px;
  opacity: 0.7;
  color: var(--ink-mut);
  border-color: var(--line-hi);
  background: transparent;
}
.maw-shell .maw-lc-action-stub:hover { opacity: 1; }

/* ===== Hero bar: extra LC buttons ===== */
.maw-shell .maw-detail-act-duplicate,
.maw-shell .maw-detail-act-submit {
  height: 30px;
  font-size: 12px;
}
.maw-shell .maw-detail-act-submit {
  color: var(--indigo);
  border-color: var(--indigo);
  background: color-mix(in srgb, var(--indigo) 7%, transparent);
}
.maw-shell .maw-detail-act-submit:hover {
  background: color-mix(in srgb, var(--indigo) 13%, transparent);
}

/* ===== Files panel ===== */
.maw-shell .maw-lc-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.maw-shell .maw-lc-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.1s;
}
.maw-shell .maw-lc-file-chip:hover {
  background: var(--panel-soft);
}

/* Skeleton for async file load */
.maw-shell .maw-lc-files-skeleton { padding: 4px 0; }

/* ===== Transforms table ===== */
.maw-shell .maw-lc-tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
}

.maw-shell .maw-lc-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.maw-shell .maw-lc-tbl-hdr {
  padding: 7px 12px;
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.maw-shell .maw-lc-tbl-cell {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.maw-shell .maw-lc-tbl tr:last-child .maw-lc-tbl-cell { border-bottom: none; }
.maw-shell .maw-lc-tbl-varname {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.maw-shell .maw-lc-tbl-mono {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink-mut);
}

/* Assembly-level override summary */
.maw-shell .maw-lc-overrides-wrap {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--panel-soft);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.maw-shell .maw-lc-override-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  margin-bottom: 7px;
}
.maw-shell .maw-lc-override-row {
  font-size: 12px;
  color: var(--ink-mut);
  padding: 3px 0;
}

/* ===== Library Origin panel ===== */
.maw-shell .maw-lc-bc-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}

.maw-shell .maw-lc-bc-standard {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}

.maw-shell .maw-lc-bc-meta {
  font-size: 12px;
  color: var(--ink-mut);
  margin-bottom: 4px;
}

.maw-shell .maw-lc-bc-row {
  margin-top: 10px;
}
.maw-shell .maw-lc-bc-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.maw-shell .maw-lc-bc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ===== Shared utils ===== */
.maw-shell .maw-lc-empty-note {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 6px 0;
}
.maw-shell .maw-lc-loading {
  padding: 6px 0;
}
.maw-shell .maw-lc-dim {
  color: var(--ink-dim);
  font-size: 11px;
}

/* ===== Status pill ===== */
.maw-shell .maw-detail-sim-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .3px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.maw-shell .maw-detail-sim-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Status variants */
.maw-shell .maw-detail-sim-status--new {
  background: var(--panel-soft);
  color: var(--ink-dim);
  border-color: var(--line);
}
.maw-shell .maw-detail-sim-status--queued {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.maw-shell .maw-detail-sim-status--running {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.maw-shell .maw-detail-sim-status--finished {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.maw-shell .maw-detail-sim-status--error {
  background: var(--orange-soft);
  color: var(--orange-strong);
  border-color: var(--orange-bd);
}

/* Pulse animation for live statuses */
.maw-shell .maw-detail-sim-status--pulse::before {
  animation: maw-sim-pulse 1.4s ease-in-out infinite;
}
@keyframes maw-sim-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Section title row with an inline action cluster. */
.maw-shell .maw-detail-sec-title {
  display: flex;
  align-items: center;
}

/* ===== Empty / hint text ===== */
.maw-shell .maw-detail-sim-empty {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 14px 0 4px;
  line-height: 1.5;
}

/* =========================================================================
   RESULTS page -- full-bleed host for the srs DataTypeView.
   No border, no min-height, no card chrome: the embed brings its own header,
   Compare and Options, and must own the whole panel height. The old 260px
   min-height + border belonged to the era when Results was one card among
   several on a scrolling page.
   ========================================================================= */
/* This host is the SCROLL CONTAINER for the embedded results view.
   It must not be overflow:hidden. The DataTypeView renders sub-pages (HPC job,
   task, dataset) that are routinely taller than the panel -- measured on sim
   5940462, the host was 705px tall around 1157px of content, so 452px of the
   HPC job page was unreachable with no scrollable ancestor anywhere above it.
   overflow-x stays hidden so a wide table scrolls in its own wrapper rather
   than dragging the whole panel sideways. */
.maw-shell .maw-detail-sim-results-embed {
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: var(--panel);
}
/* The DataTypeView's own root must fill the host rather than size to content.
   height (not min-height) is deliberate: the dataset and 3D branches mount
   children that size themselves off a DEFINITE parent height and collapse
   without one. Taller content still overflows visibly and is reached by the
   host's scrollbar above -- so this stays as it is. */
.maw-shell .maw-detail-sim-results-embed > .wf-data-type-view {
  height: 100%;
  min-height: 0;
}

/* =========================================================================
   EXTRACTOR page -- host for d3VIEW.Plugins.ResponseExtractor.MainView.
   .rx is `position:fixed; inset:0; z-index:1500` by default because the
   extractor normally IS the page. Un-fix it so it lays out inside the panel.
   Mirrors the proven .rx--peacock-embedded override in peacock.workbench.css.
   ========================================================================= */
.maw-shell .maw-detail-sim-rx-host {
  overflow: hidden;
  position: relative;
  background: var(--panel);
}
.maw-shell .maw-detail-sim-rx-host .rx {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100% !important;
  height: 100% !important;
}
.maw-shell .maw-detail-sim-rx-host .rx [data-role="rx-side"],
.maw-shell .maw-detail-sim-rx-host .rx [data-role="rx-side2"] {
  flex: 0 0 auto;
}
.maw-shell .maw-detail-sim-rx-host .rx [data-role="rx-content"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* =========================================================================
   LOGS page -- file list on the left, the selected file's content on the
   right. Replaces the old three-tab strip: the run attaches far more than
   three log files (preview.log, error_messages, ALL_MESSAGES.txt, messag,
   d3hsp, ...) and a fixed strip could never show them.
   ========================================================================= */
.maw-shell .maw-detail-sim-log-split {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 12px;
}
.maw-shell .maw-detail-sim-log-list {
  flex: 0 0 210px;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 6px;
}
.maw-shell .maw-detail-sim-log-file {
  font-size: 12px;
  font-family: Menlo, Monaco, Consolas, monospace;
  color: var(--ink-dim);
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.maw-shell .maw-detail-sim-log-file:hover {
  background: var(--panel);
  color: var(--ink);
}
.maw-shell .maw-detail-sim-log-file--active,
.maw-shell .maw-detail-sim-log-file--active:hover {
  background: var(--panel);
  color: var(--navy);
  font-weight: 600;
}
.maw-shell .maw-detail-sim-log-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.maw-shell .maw-detail-sim-log-pre {
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink);
  padding: 12px 14px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}
.maw-shell .maw-detail-sim-log-loading {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 16px 14px;
  font-style: italic;
}
.maw-shell .maw-detail-sim-log-err {
  color: var(--orange-strong);
  padding: 10px 14px;
}

/* =========================================================================
   KPIs page -- the loadcase scorecard for this simulation.
   ========================================================================= */
.maw-shell .maw-detail-sim-kpi-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.maw-shell .maw-detail-sim-kpi-score {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  flex: none;
}
.maw-shell .maw-detail-sim-kpi-score-max {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
}
.maw-shell .maw-detail-sim-kpi-hero-meta {
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
  min-width: 0;
}
.maw-shell .maw-detail-sim-kpi-hero-lc {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .maw-detail-sim-kpi-set {
  margin-bottom: 18px;
}
.maw-shell .maw-detail-sim-kpi-set-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.maw-shell .maw-detail-sim-kpi-set-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.maw-shell .maw-detail-sim-kpi-set-score {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
}
.maw-shell .maw-detail-sim-kpi-set-cov {
  font-size: 11.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-detail-sim-kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.maw-shell .maw-detail-sim-kpi-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.maw-shell .maw-detail-sim-kpi-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.maw-shell .maw-detail-sim-kpi-table tbody tr:last-child td {
  border-bottom: none;
}
/* Severity is carried by a left edge, not a full-row wash -- the table stays
   readable when most rows are fine and only one or two breach. */
.maw-shell .maw-detail-sim-kpi-row--ok td:first-child {
  box-shadow: inset 3px 0 0 #bbf7d0;
}
.maw-shell .maw-detail-sim-kpi-row--warn td:first-child {
  box-shadow: inset 3px 0 0 #fde68a;
}
.maw-shell .maw-detail-sim-kpi-row--crit td:first-child {
  box-shadow: inset 3px 0 0 var(--orange-strong);
}
.maw-shell .maw-detail-sim-kpi-row--crit td {
  color: var(--orange-strong);
}

.maw-shell .maw-detail-sim-kpi-warn {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* =========================================================================
   OVERVIEW cards
   ========================================================================= */

/* Responses: extract-from-template picker. Inline panel above the chips,
   opened by the Apply template button. */
.maw-shell .maw-detail-sim-rt-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.maw-shell .maw-detail-sim-rt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.maw-shell .maw-detail-sim-rt-select {
  flex: 1 1 220px;
  min-width: 0;
  height: 28px;
  font-size: 12px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}
.maw-shell .maw-detail-sim-rt-msg:not(:empty) {
  margin-top: 8px;
  font-size: 12px;
}

/* Reports card: one clickable row per report generated from this simulation. */
.maw-shell .maw-detail-sim-rpt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maw-shell .maw-detail-sim-rpt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s;
}
.maw-shell .maw-detail-sim-rpt-row:hover {
  background: var(--panel-soft);
}
.maw-shell .maw-detail-sim-rpt-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.maw-shell .maw-detail-sim-rpt-kind {
  flex: none;
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Notes card inside Overview. The base's notes markup normally carries
   .maw-detail-fillscroll (it owns a whole tab there); inside a scrolling
   Overview column that collapses to zero height, so the list gets its own
   bounded scroll instead. */
.maw-shell .maw-detail-sim-ov-scroll {
  max-height: 420px;
  overflow-y: auto;
}

/**
 * StudyDetailedView -- Results / Experiments / Compare / KPIs.
 *
 * Everything here is scoped under .maw-shell and prefixed maw-study-*, so the
 * warm-editorial theme cannot leak into the legacy IndexView.
 *
 * Deliberately NOT redefined here (they come from detailed.css / simulation.css,
 * which both concat before this file -- see Gruntfile concat:css order):
 *   .maw-detail-sec / -sec-fill / -fillscroll / -state   (viewport lock)
 *   .maw-detail-sim-status--*                            (status pill variants)
 *   .maw-detail-sim-empty                                (empty/hint text)
 *   .maw-detail-ov / -ov-center / -ov-side, .maw-dm-*    (Overview two-column)
 */

/* =========================================================================
   RESULTS -- the counts strip
   One tile per lifecycle phase. Tiles wrap rather than shrink, so a narrow
   pane stacks them instead of squeezing five numbers into an unreadable row.
   ========================================================================= */
.maw-shell .maw-study-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.maw-shell .maw-study-stat {
  flex: 1 1 84px;
  min-width: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  background: var(--panel-soft);
}
.maw-shell .maw-study-stat-n {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.maw-shell .maw-study-stat-l {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Only the left edge is tinted. A fully coloured tile competes with the status
   pills in the table below for the same "this is the state" signal. */
.maw-shell .maw-study-stat--total   { border-left-color: var(--ink-mut); }
.maw-shell .maw-study-stat--done    { border-left-color: var(--green); }
.maw-shell .maw-study-stat--running { border-left-color: var(--blue); }
.maw-shell .maw-study-stat--pending { border-left-color: var(--line-hi); }
.maw-shell .maw-study-stat--failed  { border-left-color: var(--red); }
.maw-shell .maw-study-stat--unknown { border-left-color: var(--orange); }

/* One bar across the runs, in the same colours as the tiles. Segments are
   inline-block rather than flex children so a 0% segment collapses to nothing
   instead of holding a flex-basis sliver of the wrong colour. */
.maw-shell .maw-study-bar {
  margin-top: 10px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--panel-hover);
  font-size: 0;
  white-space: nowrap;
}
.maw-shell .maw-study-bar > span {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}
.maw-shell .maw-study-bar-done    { background: var(--green); }
.maw-shell .maw-study-bar-running { background: var(--blue); }
.maw-shell .maw-study-bar-failed  { background: var(--red); }
.maw-shell .maw-study-bar-unknown { background: var(--orange); }

/* =========================================================================
   RESULTS -- cohort card (side column)
   ========================================================================= */
.maw-shell .maw-study-cohort-lc {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
}

/* =========================================================================
   OVERVIEW -- pipeline stages strip (side column)
   ========================================================================= */
.maw-shell .maw-study-stages {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.maw-shell .maw-study-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
}
.maw-shell .maw-study-stage-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   Tables -- Simulations, Design, Analysis
   The wrapper owns the horizontal scroll so a wide matrix never forces the
   subpanel (or the shell) to scroll sideways.
   ========================================================================= */
.maw-shell .maw-study-tablewrap {
  overflow-x: auto;
  max-width: 100%;
}

.maw-shell .maw-study-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.maw-shell .maw-study-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.maw-shell .maw-study-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.maw-shell .maw-study-table tbody tr:last-child td {
  border-bottom: none;
}

/* Every row opens its simulation. */
.maw-shell .maw-study-sim-row {
  cursor: pointer;
}
.maw-shell .maw-study-sim-row:hover td {
  background: var(--panel-hover);
}

.maw-shell .maw-study-sim-name {
  font-weight: 600;
  white-space: nowrap;
}

/* =========================================================================
   Design / Analysis matrix
   Numeric columns are tabular so the decimal points line up down a column --
   the whole point of looking at a DOE matrix.
   ========================================================================= */
.maw-shell .maw-study-matrix td {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.maw-shell .maw-study-idcol {
  font-weight: 600;
  color: var(--ink-dim);
  white-space: nowrap;
}
/* Factors read as input, responses as output -- a tint on the response half
   is what makes "what drives what" legible at a glance. */
.maw-shell .maw-study-out {
  background: var(--indigo-soft);
}
.maw-shell .maw-study-table th.maw-study-out {
  color: var(--indigo);
  border-bottom-color: var(--indigo-bd);
}
.maw-shell .maw-study-sim-row:hover td.maw-study-out {
  background: var(--indigo-soft);
}

/* A curve cannot be shown as a number -- it is labelled, not faked. */
.maw-shell .maw-study-curve {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.maw-shell .maw-study-na {
  color: var(--ink-mut);
}

/* =========================================================================
   Warnings -- lossy matrix + row truncation
   Both say "what you see is not the whole study", so they share one look and
   sit above the table where they cannot be scrolled past unnoticed.
   ========================================================================= */
.maw-shell .maw-study-warn {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--orange-bd);
  border-radius: 6px;
  background: var(--orange-soft);
  color: var(--orange-strong);
  font-size: 11.5px;
  line-height: 1.5;
}

/* A neutral note -- "this is the shape your data has", NOT "something was lost".
   Deliberately not orange: reusing the warning look for a non-loss would train
   people to ignore the real exclusion banner. */
.maw-shell .maw-study-note {
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

.maw-shell .maw-study-count {
  font-size: 11.5px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   RESULTS -- the run list
   Bounded height so the list cannot push the cards below it off the page in a
   study with hundreds of runs; the wrapper scrolls, the panel does not.
   ========================================================================= */
.maw-shell .maw-study-runlist {
  max-height: 360px;
  overflow-y: auto;
}
/* The chevron is affordance only -- the whole row is the click target. */
.maw-shell .maw-study-openc {
  width: 1%;
  text-align: right;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1;
}

/* =========================================================================
   KPIs -- cohort leaderboard
   The cohort is the LOADCASE, which can hold runs this study never submitted.
   Those rows stay visible (removing them would change what rank means) but are
   dimmed, and only this study's rows are clickable.
   ========================================================================= */
.maw-shell .maw-study-kpi-board td {
  font-variant-numeric: tabular-nums;
}
.maw-shell .maw-study-kpi-mine td {
  background: var(--green-soft);
}
.maw-shell .maw-study-kpi-mine:hover td {
  background: var(--panel-hover);
}
.maw-shell .maw-study-kpi-other {
  cursor: default;
}
.maw-shell .maw-study-kpi-other td {
  color: var(--ink-mut);
}

/* Coverage warnings arrive as a list, so the shared warn box needs list chrome
   here without inheriting a browser default indent that overhangs the box. */
.maw-shell .maw-study-warn ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.maw-shell .maw-study-warn li {
  margin: 2px 0;
}

/* Compute card (Results side column) + the Simulation page's HPC card share
   this note style: it carries the WHY behind an absent number (an unpriced
   queue, a derivation basis), so it must read as secondary annotation next to
   the value, never as a value itself. */
.maw-shell .maw-hpc-note {
  color: var(--ink-mut);
  font-size: 11px;
  font-style: italic;
}

/* A cost or core-hours cell whose whole content is a reason sentence wraps to
   several lines; the default row is a single-line grid cell and would clip it. */
.maw-shell .maw-study-hpc-wrap .maw-dm-val,
.maw-shell .maw-detail-sim-hpc-slot .maw-dm-val {
  white-space: normal;
  line-height: 1.45;
}

/* =========================================================================
   COMPARE -- Data | Chart
   The matrix stays the default view; the chart is a second lens on the SAME
   rows (both read matrix.chartRows), reached through a segmented switch in
   the card header. The surface itself is styled in stylesheets/viz/viz.css.
   ========================================================================= */
/** Added by rahul.suri on 07/31/2026 - Assembler Visualization Surface (AVS) P1 - Compare chart toggle **/

.maw-shell .maw-study-cmp-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.maw-shell .maw-study-cmp-tab {
  border: 0;
  background: transparent;
  padding: 0 11px;
  height: 24px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-mut);
  cursor: pointer;
}

.maw-shell .maw-study-cmp-tab + .maw-study-cmp-tab {
  border-left: 1px solid var(--line);
}

.maw-shell .maw-study-cmp-tab:hover { background: var(--panel-hover); }

.maw-shell .maw-study-cmp-tab.is-active {
  background: var(--indigo-soft);
  color: var(--navy);
  font-weight: 600;
}

/* One pane visible at a time, each filling the card.
   These were two stacked CARDS -- a fill card plus a content-sized card -- and
   inside the scroll-locked subpanel the content-sized one took whatever height
   it wanted and squeezed the matrix down to its title bar. Two siblings
   competing for one flex column cannot be fixed by sizing either of them. */
.maw-shell .maw-study-cmp-view {
  height: 100%;
  min-height: 0;
}

/* The chart and curve panes need a RESOLVED height: both renderers measure
   their host once at render time and neither watches for a resize, so a pane
   that is briefly collapsed produces a permanently wrong-sized chart.
   min-height is the belt to height:100%'s braces. */
.maw-shell .maw-study-cmp-view-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 420px;
}

.maw-shell .maw-study-cmp-chart-host {
  flex: 1 1 auto;
  min-height: 380px;
  min-width: 0;
}

/* The header row holds counts + switch + export. Let it wrap rather
   than overflow the card on a narrow pane. */
.maw-shell .maw-detail-sec .maw-detail-sec-title > span:last-child {
  flex-wrap: wrap;
  align-items: center;
}

/* ===== Hero icon -- use the DS color token as a tint ===== */
.maw-shell .maw-ds-hero-ic {
  color: var(--t-ds, #9c9480);
}

/* ===== DS chip -- terracotta-flavored variant (phase labels) ===== */
.maw-shell .maw-ds-chip {
  background: color-mix(in srgb, var(--t-ds, #9c9480) 12%, transparent);
  border-color: color-mix(in srgb, var(--t-ds, #9c9480) 30%, transparent);
  color: var(--ink);
}

/* Chip color dot for design-step entries */
.maw-shell .maw-ds-cd {
  background: var(--t-ds, #9c9480);
}

/* ===== Clone action button ===== */
.maw-shell .maw-ds-act-clone {
  border-color: var(--line-hi);
  color: var(--ink-mut);
  background: var(--panel-soft);
}
.maw-shell .maw-ds-act-clone:hover {
  border-color: var(--indigo-bd);
  color: var(--indigo);
  background: var(--indigo-soft);
}
.maw-shell .maw-ds-act-clone svg {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* ===== Summary / stats section ===== */
.maw-shell .maw-ds-stats-sec { }

.maw-shell .maw-ds-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.maw-shell .maw-ds-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 80px;
}

.maw-shell .maw-ds-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  font-family: Menlo, Monaco, Consolas, monospace;
}

.maw-shell .maw-ds-stat-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-dim);
  font-weight: 600;
}

/* ===== Notes stub section ===== */
.maw-shell .maw-ds-notes-sec { }

.maw-shell .maw-ds-stub-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-bd);
  color: var(--orange-strong);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  vertical-align: 1px;
}

.maw-shell .maw-ds-notes-stub {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px dashed var(--line-hi);
}

.maw-shell .maw-ds-notes-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-dim);
  margin-top: 1px;
}

.maw-shell .maw-ds-notes-msg {
  font-size: 12px;
  color: var(--ink-mut);
  line-height: 1.5;
}

.maw-shell .maw-file-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--ink);
  background: #f5f1e8;
}

.maw-shell .maw-file-loading,
.maw-shell .maw-file-error {
  margin: auto;
  padding: 32px;
  color: var(--ink-dim);
}

.maw-shell .maw-file-loading {
  display: flex;
  align-items: center;
}

/* Shared spinner for the file page: content load, window load, history. */
.maw-shell .maw-file-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid var(--line-hi, #d8d0bf);
  border-top-color: var(--indigo, #4f46e5);
  border-radius: 50%;
  vertical-align: -2px;
  animation: maw-file-spin 0.7s linear infinite;
}

.maw-shell .maw-file-spinner-sm {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
}

@keyframes maw-file-spin { to { transform: rotate(360deg); } }

.maw-shell .maw-file-history-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.maw-shell .maw-file-notice {
  padding: 9px 20px;
  border-bottom: 1px solid var(--orange-bd, #e7c8a8);
  background: var(--orange-soft, #fff8ef);
  color: var(--orange-strong, #8f4c16);
  font-size: 12px;
}

.maw-shell .maw-file-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.maw-shell .maw-file-kind {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border: 1px solid #bfd2b8;
  border-radius: 9px;
  color: #2f754c;
  background: #edf4e9;
  font: 600 12px/1 Menlo, Monaco, Consolas, monospace;
}

.maw-shell .maw-file-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.maw-shell .maw-file-parent-btn {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #357d51;
  font-size: 10.5px;
  cursor: pointer;
}

.maw-shell .maw-file-title {
  margin: 0;
  overflow: hidden;
  font: 600 15px/1.25 Menlo, Monaco, Consolas, monospace;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-file-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.maw-shell .maw-file-actions .maw-btn {
  text-decoration: none;
}

.maw-shell .maw-file-save-btn:disabled {
  border-color: #ded7ca;
  color: #a49c8e;
  background: #eee8dc;
  opacity: 1;
}

.maw-shell .maw-file-meta {
  display: flex;
  min-height: 35px;
  padding: 0 20px;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
  box-sizing: border-box;
}

.maw-shell .maw-file-meta-item {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.maw-shell .maw-file-meta-item span {
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-meta-item strong {
  overflow: hidden;
  max-width: 220px;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.maw-shell .maw-file-status {
  min-height: 38px;
  padding: 12px 18px;
  color: var(--ink-dim);
  font-size: 10.5px;
  box-sizing: border-box;
}

.maw-shell .maw-file-status::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green, #2f8052);
  content: "";
  vertical-align: 1px;
}

.maw-shell .maw-file-page.is-dirty .maw-file-status::before {
  background: var(--orange-strong, #9b551d);
}

.maw-shell .maw-file-status.is-error::before {
  background: var(--red, #a13d3d);
}

.maw-shell .maw-file-unsaved { color: var(--orange-strong, #9b551d); }
.maw-shell .maw-file-saved { color: var(--green, #24724b); }
.maw-shell .maw-file-error-inline { color: var(--red, #a13d3d); }

.maw-shell .maw-file-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  flex: 1 1 auto;
  min-height: 0;
}

.maw-shell .maw-file-editor-shell {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.maw-shell .maw-file-findbar {
  display: flex;
  min-height: 38px;
  margin: 14px 16px 0;
  align-items: center;
  border: 1px solid #ddd5c7;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #fbfaf7;
  box-sizing: border-box;
}

.maw-shell .maw-file-find-input {
  width: 220px;
  height: 30px;
  margin-left: 10px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #d8cdb9;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}

.maw-shell .maw-file-find-input:focus {
  border-bottom-color: var(--indigo);
  box-shadow: 0 1px 0 var(--indigo);
}

.maw-shell .maw-file-find-previous,
.maw-shell .maw-file-find-next {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--indigo);
  background: transparent;
  cursor: pointer;
}

.maw-shell .maw-file-find-previous:hover,
.maw-shell .maw-file-find-next:hover {
  background: var(--indigo-soft);
}

.maw-shell .maw-file-window-nav {
  display: flex;
  min-width: 260px;
  margin-left: 10px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-window-nav button {
  height: 26px;
  padding: 0 8px;
  border: 1px solid #d8d0c3;
  border-radius: 4px;
  color: var(--indigo);
  background: #fff;
  font-size: 9.5px;
  cursor: pointer;
}

.maw-shell .maw-file-window-nav button:disabled {
  color: #aaa297;
  background: #f3efe7;
  cursor: default;
}

.maw-shell .maw-file-format {
  margin-left: auto;
  padding-right: 12px;
  color: #a49c8e;
  font-size: 9.5px;
}

.maw-shell .maw-file-editor-panel {
  position: relative; /* anchors the .maw-file-editor-loading overlay */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 16px;
  overflow: hidden;
  border: 1px solid #ddd5c7;
  background: #fff;
}

/* Overlay spinner while file contents (a large-file window) load. */
.maw-shell .maw-file-editor-loading {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink-dim);
  font-size: 12px;
}

.maw-shell .maw-file-editor,
.maw-shell .maw-file-ace {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: 18px 22px 40px;
  border: 0;
  outline: 0;
  resize: none;
  box-sizing: border-box;
  color: #252522;
  background: #fff;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.62;
  tab-size: 4;
  white-space: pre;
}

.maw-shell .maw-file-ace {
  padding: 0;
}

.maw-shell .maw-file-editor[readonly] {
  color: var(--ink-mut);
  background: var(--panel-soft);
}

.maw-shell .maw-file-history {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: var(--panel);
}

.maw-shell .maw-file-history-head {
  display: flex;
  justify-content: space-between;
  min-height: 51px;
  padding: 17px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  box-sizing: border-box;
}

.maw-shell .maw-file-history-head span {
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-history-filters {
  display: grid;
  gap: 8px;
  padding: 11px 13px 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
}

.maw-shell .maw-file-history-search,
.maw-shell .maw-file-history-user,
.maw-shell .maw-file-history-dates input,
.maw-shell .maw-file-save-message {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0 9px;
  border: 1px solid #d8d0c3;
  border-radius: 4px;
  outline: 0;
  box-sizing: border-box;
  color: var(--ink);
  background: #fff;
  font-size: 10.5px;
}

.maw-shell .maw-file-history-search:focus,
.maw-shell .maw-file-history-user:focus,
.maw-shell .maw-file-history-dates input:focus,
.maw-shell .maw-file-save-message:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}

.maw-shell .maw-file-history-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.maw-shell .maw-file-history-dates label {
  min-width: 0;
}

.maw-shell .maw-file-history-dates label span {
  display: block;
  margin: 0 0 4px;
  color: var(--ink-dim);
  font-size: 9px;
}

.maw-shell .maw-file-history-reset {
  justify-self: start;
  padding: 0;
  border: 0;
  color: var(--indigo);
  background: transparent;
  font-size: 9.5px;
  cursor: pointer;
}

.maw-shell .maw-file-history-row {
  position: relative;
  display: grid;
  width: 100%;
  padding: 12px 14px 12px 30px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.maw-shell .maw-file-history-row::before {
  position: absolute;
  top: 17px;
  left: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #beb7aa;
  content: "";
}

.maw-shell .maw-file-history-row:hover,
.maw-shell .maw-file-history-row.is-selected {
  background: var(--indigo-soft);
}

.maw-shell .maw-file-history-row.is-latest {
  background: #edf4e9;
}

.maw-shell .maw-file-history-row.is-latest::before {
  background: var(--green, #2f8052);
}

.maw-shell .maw-file-history-row strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-file-history-row span {
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-history-row small {
  margin-top: 3px;
  color: #9a9286;
  font-size: 8.5px;
}

.maw-shell .maw-file-diff-shell {
  min-width: 0;
  min-height: 0;
  margin: 14px 16px 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8d0c3;
  background: #fff;
}

.maw-shell .maw-file-diff-loading,
.maw-shell .maw-file-diff-identical {
  margin: auto;
  padding: 24px;
  color: var(--ink-dim);
  font-size: 11px;
}

.maw-shell .maw-file-diff-head,
.maw-shell .maw-file-diff-columns {
  display: grid;
  flex: none;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fbfaf7;
}

.maw-shell .maw-file-diff-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 52px;
  padding: 9px 12px;
  box-sizing: border-box;
}

.maw-shell .maw-file-diff-head strong,
.maw-shell .maw-file-diff-head span {
  display: block;
}

.maw-shell .maw-file-diff-head strong {
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-file-diff-head span {
  margin-top: 3px;
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-diff-actions {
  display: flex;
  gap: 7px;
}

.maw-shell .maw-file-diff-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maw-shell .maw-file-diff-columns > div {
  display: flex;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 10px;
}

.maw-shell .maw-file-diff-columns > div:first-child {
  border-right: 1px solid var(--line);
}

.maw-shell .maw-file-diff-columns span {
  color: var(--ink-dim);
  font-family: Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
}

.maw-shell .maw-file-diff-table {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.maw-shell .maw-file-diff-spacer {
  position: relative;
  min-width: 760px;
}

.maw-shell .maw-file-diff-window {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-width: 760px;
}

.maw-shell .maw-file-diff-row {
  display: grid;
  height: 19px;
  min-width: 760px;
  overflow: hidden;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.maw-shell .maw-file-diff-cell {
  display: grid;
  height: 19px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  grid-template-columns: 44px minmax(0, 1fr);
  border-bottom: 1px solid #f0ece5;
  font: 10.5px/1.55 Menlo, Monaco, Consolas, monospace;
}

.maw-shell .maw-file-diff-cell.left {
  border-right: 1px solid var(--line);
}

.maw-shell .maw-file-diff-cell > span {
  padding: 1px 7px;
  color: #a39b8f;
  text-align: right;
  background: #f8f6f1;
  user-select: none;
}

.maw-shell .maw-file-diff-cell code {
  display: block;
  min-height: 18px;
  padding: 1px 8px;
  overflow: visible;
  color: #292824;
  background: transparent;
  font: inherit;
  white-space: pre;
}

.maw-shell .maw-file-diff-cell code i {
  display: inline-block;
  width: 14px;
  color: #a39b8f;
  font-style: normal;
}

.maw-shell .maw-file-diff-cell.is-removed,
.maw-shell .maw-file-diff-cell.is-removed code {
  background: #fbe9e6;
}

.maw-shell .maw-file-diff-cell.is-removed > span {
  color: #8b4239;
  background: #f5d7d2;
}

.maw-shell .maw-file-diff-cell.is-added,
.maw-shell .maw-file-diff-cell.is-added code {
  background: #e7f3e8;
}

.maw-shell .maw-file-diff-cell.is-added > span {
  color: #2e7047;
  background: #d2e8d5;
}

.maw-shell .maw-file-diff-cell.is-empty {
  background: #f6f3ed;
}

.maw-shell .maw-file-history-preview {
  padding: 14px;
}

.maw-shell .maw-file-history-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
}

.maw-shell .maw-file-history-preview pre {
  max-height: 280px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fbfaf7;
  font: 10.5px/1.5 Menlo, Monaco, Consolas, monospace;
  white-space: pre;
}

.maw-shell .maw-file-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(29, 29, 27, 0.32);
  box-sizing: border-box;
}

.maw-shell .maw-file-modal {
  width: min(1040px, 96%);
  max-height: 92%;
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(36, 33, 29, 0.18);
}

.maw-shell .maw-file-exit-modal {
  width: min(430px, 94%);
}

.maw-shell .maw-file-message-modal {
  width: min(520px, 94%);
}

.maw-shell .maw-file-message-label {
  display: block;
  margin: 18px 0 6px;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 600;
}

.maw-shell .maw-file-message-meta {
  display: flex;
  justify-content: space-between;
  min-height: 18px;
  margin-top: 5px;
  color: var(--ink-dim);
  font-size: 9.5px;
}

.maw-shell .maw-file-message-error {
  color: var(--red, #a13d3d);
}

.maw-shell .maw-file-modal h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.maw-shell .maw-file-modal p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 12px;
}

.maw-shell .maw-file-modal-title,
.maw-shell .maw-file-modal-actions,
.maw-shell .maw-file-conflict-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.maw-shell .maw-file-modal-title {
  justify-content: space-between;
  margin-bottom: 16px;
}

.maw-shell .maw-file-modal-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.maw-shell .maw-file-conflict-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.maw-shell .maw-file-conflict-grid h4,
.maw-shell .maw-file-result-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-dim);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.maw-shell .maw-file-conflict-grid pre {
  height: 210px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fbfaf7;
  font: 10.5px/1.5 Menlo, Monaco, Consolas, monospace;
  white-space: pre;
}

.maw-shell .maw-file-conflict-tools {
  margin: 12px 0;
}

.maw-shell .maw-file-conflict-result {
  width: 100%;
  height: 210px;
  padding: 10px;
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  outline: 0;
  resize: vertical;
  box-sizing: border-box;
  background: #fbfaf7;
  font: 11px/1.5 Menlo, Monaco, Consolas, monospace;
}

.maw-shell .maw-file-conflict-error {
  flex: 1 1 auto;
  color: var(--red, #a13d3d);
  font-size: 11px;
}

@media (max-width: 900px) {
  .maw-shell .maw-file-header { align-items: flex-start; }
  .maw-shell .maw-file-actions { flex-wrap: wrap; justify-content: flex-end; }
  .maw-shell .maw-file-meta { flex-wrap: wrap; gap: 5px 18px; padding: 8px 20px; }
  .maw-shell .maw-file-work { grid-template-columns: 1fr; }
  .maw-shell .maw-file-history { max-height: 260px; }
  .maw-shell .maw-file-history { border-left: 0; border-top: 1px solid var(--line); }
  .maw-shell .maw-file-conflict-grid { grid-template-columns: 1fr; }
}

/* File header identity line: back-to-parent + lock badge side by side,
   left-aligned under the title (Rahul, 2026-08-23). */
.maw-shell .maw-file-title-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.maw-shell .maw-compare {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: var(--ink);
  background: #f5f1e8;
}

.maw-shell .maw-compare-loading,
.maw-shell .maw-compare-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: auto;
  padding: 32px;
  color: var(--ink-dim);
}

.maw-shell .maw-compare-loading {
  flex-direction: row;
}

.maw-shell .maw-compare-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 12px 16px 0;
}

.maw-shell .maw-compare-side {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d8d0c3;
  border-radius: 6px;
  background: #fff;
}

.maw-shell .maw-compare-side-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.maw-shell .maw-compare-side-id {
  letter-spacing: 0;
  text-transform: none;
}

.maw-shell .maw-compare-side-name {
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.maw-shell .maw-compare-side-rev {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
}

.maw-shell .maw-compare-rev {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fbfaf7;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink);
}

.maw-shell .maw-compare-absent {
  margin-top: 6px;
  font-size: 11px;
  color: #b45309;
}

.maw-shell .maw-compare-swap {
  align-self: center;
  justify-self: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.maw-shell .maw-compare-search {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 12px;
}

.maw-shell .maw-compare-hits {
  max-height: 180px;
  margin-top: 6px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.maw-shell .maw-compare-hit {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid #f0ece5;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-compare-hit:hover {
  background: #f3efe6;
}

.maw-shell .maw-compare-hit-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.maw-shell .maw-compare-hit-meta {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.maw-shell .maw-compare-hint {
  padding: 8px 4px;
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-shell .maw-compare-hint.is-error {
  color: #b91c1c;
}

.maw-shell .maw-compare-cancel {
  margin-top: 6px;
}

.maw-shell .maw-compare-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-compare-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #ece7dc;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.maw-shell .maw-compare-chip.is-modified,
.maw-shell .maw-compare-row.is-modified .maw-compare-badge { background: #fde68a; }
.maw-shell .maw-compare-chip.is-renamed,
.maw-shell .maw-compare-row.is-renamed .maw-compare-badge { background: #c7d2fe; }
.maw-shell .maw-compare-chip.is-added,
.maw-shell .maw-compare-row.is-added .maw-compare-badge { background: #bbf7d0; }
.maw-shell .maw-compare-chip.is-removed,
.maw-shell .maw-compare-row.is-removed .maw-compare-badge { background: #fecaca; }
.maw-shell .maw-compare-chip.is-unchanged,
.maw-shell .maw-compare-row.is-unchanged .maw-compare-badge { background: #e7e5e4; }

.maw-shell .maw-compare-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.maw-shell .maw-compare-note {
  flex: 1 1 100%;
  font-size: 11px;
}

.maw-shell .maw-compare-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 16px 16px;
  border: 1px solid #d8d0c3;
  background: #fff;
}

.maw-shell .maw-compare-list {
  flex: 0 0 340px;
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #fbfaf7;
}

.maw-shell .maw-compare-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid #f0ece5;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.maw-shell .maw-compare-row:hover {
  background: #f3efe6;
}

.maw-shell .maw-compare-row.is-selected {
  background: #e8e4f8;
  box-shadow: inset 3px 0 0 var(--indigo, #4f46e5);
}

.maw-shell .maw-compare-row.is-unavailable .maw-compare-file {
  color: var(--ink-dim);
}

.maw-shell .maw-compare-badge {
  padding: 2px 0;
  border-radius: 4px;
  background: #ece7dc;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
}

.maw-shell .maw-compare-file {
  min-width: 0;
  overflow: hidden;
  font: 11px/1.4 Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.maw-shell .maw-compare-file small {
  display: block;
  font: inherit;
  font-size: 10px;
  color: var(--ink-dim);
}

.maw-shell .maw-compare-size {
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
}

.maw-shell .maw-compare-empty {
  padding: 24px 16px;
  font-size: 11.5px;
  color: var(--ink-dim);
}

.maw-shell .maw-compare .maw-file-diff-shell {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  border: 0;
}

.maw-shell .maw-compare .maw-file-diff-identical.is-error {
  color: #b91c1c;
}

.maw-shell .maw-itree {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* ===================================================================
   TOOLBAR
   =================================================================== */
.maw-shell .maw-itree-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-soft);
}
.maw-shell .maw-itree-summary {
    font-size: 11.5px;
    color: var(--ink-mut);
}

/* ===================================================================
   STATES
   =================================================================== */
.maw-shell .maw-itree-state {
    padding: 22px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-dim);
}
.maw-shell .maw-itree-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
    padding: 10px 12px;
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    background: var(--red-soft);
    color: var(--red);
    font-size: 12.5px;
}

/* ===================================================================
   PROBLEM BANNER (root summary)
   =================================================================== */
.maw-shell .maw-itree-banner {
    flex: none;
    margin: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-hi);
    background: var(--panel-soft);
    font-size: 12px;
}
.maw-shell .maw-itree-banner.is-error {
    border-color: var(--red);
    background: var(--red-soft);
}
.maw-shell .maw-itree-banner.is-warn {
    border-color: var(--orange-bd);
    background: var(--orange-soft);
}
.maw-shell .maw-itree-banner-head {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ink);
}
.maw-shell .maw-itree-banner-list {
    margin: 0;
    padding-left: 18px;
    max-height: 130px;
    overflow-y: auto;
}
.maw-shell .maw-itree-banner-list li {
    margin: 2px 0;
    color: var(--ink-mut);
}
.maw-shell .maw-itree-banner-list code,
.maw-shell .maw-itree-problem code {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .05);
    color: var(--ink);
}

/* ===================================================================
   SCROLL BODY + ROWS
   =================================================================== */
.maw-shell .maw-itree-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 6px 12px;
}

.maw-shell .maw-itree-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding-right: 8px;
    border-radius: var(--radius-sm);
}
.maw-shell .maw-itree-row:hover {
    background: var(--panel-hover);
}

.maw-shell .maw-itree-row-entity {
    font-weight: 500;
}
.maw-shell .maw-itree-row-file {
    color: var(--ink-mut);
}
.maw-shell .maw-itree-row-file.is-wrapper .maw-itree-path {
    font-style: italic;
}

.maw-shell .maw-itree-node.is-busy {
    opacity: .55;
    pointer-events: none;
}

/* A sealed subtree reads as a closed unit: one tinted left rule down its
   whole body, so "nothing above can reach inside" is visible rather than
   only stated in a badge tooltip. */
.maw-shell .maw-itree-node.is-sealed > .maw-itree-body {
    border-left: 2px solid var(--t-sm);
    margin-left: 4px;
}

/* ===================================================================
   TWISTY
   =================================================================== */
.maw-shell .maw-itree-twisty {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: transform .12s ease;
}
.maw-shell .maw-itree-twisty.is-open {
    transform: rotate(0deg);
}
.maw-shell .maw-itree-twisty svg {
    width: 13px;
    height: 13px;
}
.maw-shell .maw-itree-twisty-spacer {
    flex: none;
    width: 18px;
}

.maw-shell .maw-itree-dot {
    flex: none;
}

/* ===================================================================
   FILE LINES (deck vocabulary, kept local so nothing here edits
   the shared maw-detail-sm-deck-* rules)
   =================================================================== */
.maw-shell .maw-itree-file-lines {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.maw-shell .maw-itree-kw {
    flex: none;
    font-size: 11px;
    color: var(--blue);
    font-weight: 600;
}
.maw-shell .maw-itree-path {
    font-size: 12px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46ch;
}
.maw-shell .maw-itree-type {
    font-size: 10.5px;
    color: var(--ink-dim);
}
.maw-shell .maw-itree-count {
    flex: none;
    font-size: 11px;
    color: var(--ink-dim);
}

/* ===================================================================
   BADGES + PROVENANCE TAGS
   =================================================================== */
.maw-shell .maw-itree-badge {
    flex: none;
    font-size: 10px;
    line-height: 1.5;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--line-hi);
    background: var(--panel);
    color: var(--ink-mut);
    white-space: nowrap;
}
.maw-shell .maw-itree-badge.is-sealed {
    border-color: var(--t-sm);
    color: var(--t-sm);
    background: var(--indigo-soft);
}
.maw-shell .maw-itree-badge.is-pinned {
    font-family: var(--font-mono);
}
.maw-shell .maw-itree-badge.is-problem {
    border-color: var(--red);
    background: var(--red-soft);
    color: var(--red);
    font-weight: 600;
}
.maw-shell .maw-itree-badge.is-wrapper {
    border-style: dashed;
}

.maw-shell .maw-itree-incby,
.maw-shell .maw-itree-src-tag {
    flex: none;
    font-size: 10.5px;
    color: var(--ink-dim);
    white-space: nowrap;
}
.maw-shell .maw-itree-src-tag {
    cursor: pointer;
    text-decoration: underline dotted;
}
.maw-shell .maw-itree-src-tag:hover {
    color: var(--indigo);
}

/* ===================================================================
   PER-NODE PROBLEMS
   =================================================================== */
.maw-shell .maw-itree-node-problems {
    margin-right: 8px;
    margin-bottom: 4px;
}
.maw-shell .maw-itree-problem {
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 2px;
}
.maw-shell .maw-itree-problem.is-error {
    background: var(--red-soft);
    color: var(--red);
}
.maw-shell .maw-itree-problem.is-warn {
    background: var(--orange-soft);
    color: var(--orange-strong);
}

/* ===================================================================
   ROW ACTIONS -- transform affordance + remove
   =================================================================== */
.maw-shell .maw-itree-tf-btn,
.maw-shell .maw-itree-remove-btn {
    flex: none;
    font-size: 11px;
    padding: 2px 8px;
}
.maw-shell .maw-itree-tf-btn.is-set {
    border-color: var(--indigo-bd);
    background: var(--indigo-soft);
    color: var(--indigo);
    font-weight: 600;
}
.maw-shell .maw-itree-remove-btn {
    color: var(--red);
    border-color: var(--line-hi);
}
.maw-shell .maw-itree-remove-btn:hover {
    border-color: var(--red);
    background: var(--red-soft);
}

/* The view-only twin of the Transform button. It is a span, not a disabled
   button, because it IS clickable -- it navigates to the entity that owns
   the transform. Styling it as a tag says "not editable here" without
   implying "does nothing". */
.maw-shell .maw-itree-tf-tag {
    flex: none;
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px dashed var(--indigo-bd);
    background: var(--panel);
    color: var(--indigo);
    cursor: pointer;
    white-space: nowrap;
}
.maw-shell .maw-itree-tf-tag:hover {
    background: var(--indigo-soft);
}

/* ===================================================================
   HOST: the tree mounted inside a detail pane
   =================================================================== */
.maw-shell .maw-itree-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The Editor|Tree segmented switch in the System Model Blocks toolbar, and the
   System-Model picker's explanatory note.
   These carry host class names (maw-detail-sm-incl-bview-btn /
   maw-detail-sm-asmpick-note) but live HERE rather than in
   stylesheets/detailed/systemmodel.css because that file belongs to another
   lane in this build round. Move them there when the lanes merge -- they are
   host chrome, not tree styling. */
.maw-shell .maw-itree-surfaces {
    display: inline-flex;
    border: 1px solid var(--line-hi);
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel-soft);
}
.maw-shell .maw-detail-sm-incl-bview-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ink-mut);
    font-size: 11.5px;
    padding: 3px 10px;
}
.maw-shell .maw-detail-sm-incl-bview-btn.is-on {
    background: var(--panel);
    color: var(--ink);
    font-weight: 600;
}
.maw-shell .maw-detail-sm-asmpick-note {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-mut);
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
}

/* ===== Backdrop (dims the app behind the modal) ===== */
.maw-launcher-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow: auto;
  animation: maw-launcher-fade .16s ease-out;
}

/* Floating panel -- the modal card. overflow:hidden so the rounded corners
   clip the inner scroll's scrollbar (it never overlaps the radius). */
.maw-launcher-root .maw-launcher-inner {
  width: min(880px, 94vw);
  max-height: 84vh;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  position: relative;
  animation: maw-launcher-float .2s cubic-bezier(.2, .7, .3, 1);
}

/* Inner scroll region -- the scrollbar lives here, inset from the panel edge
   via a transparent thumb border so it never sits on the rounded corner. */
.maw-launcher-root .maw-launcher-scroll {
  min-height: 380px;    /* floor: stays substantial (never collapses to tiny) */
  max-height: 84vh;     /* but resizes dynamically with results between these */
  overflow-y: auto;
  padding: 28px 30px 32px;
  box-sizing: border-box;
}
/* scrollbar styling comes from the project-wide .maw-shell rule in shell.css */

@keyframes maw-launcher-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes maw-launcher-float {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Header ===== */
.maw-launcher-root .maw-launcher-header {
  margin-bottom: 28px;
}

.maw-launcher-root .maw-launcher-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.maw-launcher-root .maw-launcher-subtitle {
  font-size: 13.5px;
  color: var(--ink-mut);
  margin: 0 0 18px 0;
  line-height: 1.5;
}

/* Search input */
.maw-launcher-root .maw-launcher-search {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 9px 14px;
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  display: block;
}
.maw-launcher-root .maw-launcher-search:focus {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-launcher-root .maw-launcher-search::placeholder {
  color: var(--ink-dim);
}

/* ===== Close button (shown when allowCancel=true) ===== */
/* No outline by default -- just the glyph; a darker fill appears on hover to
   signal it is a button. Inset from the panel's top/right edges. */
.maw-launcher-root .maw-launcher-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-mut);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.maw-launcher-root .maw-launcher-close:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

/* ===== Card grid ===== */
/* min-height keeps the modal a stable size when a search filters out every
   card (so the window does not collapse on a no-results query). */
.maw-launcher-root .maw-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  min-height: 160px;
  align-content: start;
}

/* ===== No-match note (search yielded no existing projects) ===== */
.maw-launcher-root .maw-launcher-nomatch {
  grid-column: 1 / -1;
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-mut);
  font-size: 13px;
}

/* ===== Pagination footer (2026-08-19, Rahul: the picker capped at the
   server's first 50 rows) -- "Showing X of Y" + Load more. Sits AFTER the
   grid, never inside it, so it is not a grid cell. Empty (no children)
   collapses to nothing. ===== */
.maw-launcher-root .maw-launcher-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
}
.maw-launcher-root .maw-launcher-footer:empty {
  padding-top: 0;
}
.maw-launcher-root .maw-launcher-count {
  color: var(--ink-mut);
  font-size: 12px;
}
.maw-launcher-root .maw-launcher-loadmore {
  display: inline-block;
  padding: 6px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.maw-launcher-root .maw-launcher-loadmore:hover {
  background: var(--panel-soft);
}
.maw-launcher-root .maw-launcher-loadmore:disabled {
  opacity: .6;
  cursor: default;
}

/* ===== Select mode (2026-09-25, Rahul: select several projects and delete them together).
   The bar sticks to the bottom of the scrolling panel; its negative margins cover the
   scroll box's side and bottom padding so it spans the panel. The tick box is drawn in CSS. ===== */
.maw-launcher-root .maw-launcher-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.maw-launcher-root .maw-launcher-select-toggle,
.maw-launcher-root .maw-launcher-selbar button {
  font: inherit;
  font-size: 12.5px;
  padding: 7px 14px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, filter .12s;
}
.maw-launcher-root .maw-launcher-select-toggle:hover,
.maw-launcher-root .maw-launcher-selbar button:hover { background: var(--panel-soft); }
.maw-launcher-root .maw-launcher-selbar { display: none; }
.maw-launcher-root.is-selecting .maw-launcher-selbar {
  display: flex;
  align-items: center;
  gap: 8px;
  position: sticky;
  bottom: -32px;             /* the scroll box's bottom padding: sticky stops at its content edge */
  z-index: 6;
  margin: 16px -30px -32px;
  padding: 12px 30px;
  background: var(--panel-soft);
  border-top: 1px solid var(--line);
}
.maw-launcher-root .maw-launcher-sel-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}
.maw-launcher-root .maw-launcher-sel-gap { flex: 1; }
.maw-launcher-root .maw-launcher-selbar .maw-launcher-sel-delete {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-weight: 600;
}
.maw-launcher-root .maw-launcher-selbar .maw-launcher-sel-delete:hover { background: var(--red); filter: brightness(1.08); }
.maw-launcher-root .maw-launcher-selbar .maw-launcher-sel-delete:disabled { opacity: .45; cursor: default; filter: none; }
.maw-launcher-root.is-selecting .maw-launcher-card-menu-btn { display: none; }
.maw-launcher-root.is-selecting .maw-launcher-card-new { opacity: .45; pointer-events: none; }
.maw-launcher-root.is-selecting .maw-launcher-card:not(.maw-launcher-card-new)::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--line-hi);
  border-radius: 5px;
  background: var(--panel);
}
.maw-launcher-root.is-selecting .maw-launcher-card.is-selected {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-launcher-root.is-selecting .maw-launcher-card.is-selected::after {
  border-color: var(--indigo);
  background: var(--indigo);
}
.maw-launcher-root.is-selecting .maw-launcher-card.is-selected::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 18px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 1;
}
/* The projects named in a several-project delete confirmation. */
.maw-confirm-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.maw-confirm-list li { margin: 2px 0; }

/* ===== Base card ===== */
.maw-launcher-root .maw-launcher-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
.maw-launcher-root .maw-launcher-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--indigo-bd);
}

/* Hide filtered-out cards via _onSearch */
.maw-launcher-root .maw-launcher-card.hidden {
  display: none;
}

/* ===== Per-card overflow (kebab) menu ===== */
.maw-launcher-root .maw-launcher-card-menu-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-mut);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.maw-launcher-root .maw-launcher-card:hover .maw-launcher-card-menu-btn { opacity: 1; }
.maw-launcher-root .maw-launcher-card-menu-btn:hover {
  background: var(--panel-hover);
  color: var(--ink);
}

.maw-launcher-root .maw-launcher-card-menu {
  display: none;
  position: absolute;
  top: 32px;
  right: 8px;
  z-index: 5;
  min-width: 120px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.maw-launcher-root .maw-launcher-card-menu.is-open { display: block; }
.maw-launcher-root .maw-launcher-card-menu-action {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.maw-launcher-root .maw-launcher-card-menu-action:hover { background: var(--panel-hover); }
.maw-launcher-root .maw-launcher-card-menu-danger { color: var(--orange-strong); }
.maw-launcher-root .maw-launcher-card-menu-danger:hover {
  background: rgba(194, 86, 47, 0.10);
  color: var(--orange-strong);
}

/* ===== Delete-confirm dialog (mounted beside the launcher with .maw-shell for tokens) ===== */
.maw-confirm-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1100;
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.maw-confirm-panel {
  width: min(420px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  padding: 22px 24px 18px;
  box-sizing: border-box;
}

/* Deletion progress state (the confirm panel morphs into this while the
   cascade runs -- see ProjectLauncherView._runProjectDelete). */
.maw-confirm-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.maw-confirm-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-top-color: var(--indigo, #4f46e5);
  border-radius: 50%;
  animation: maw-confirm-spin 0.7s linear infinite;
}
@keyframes maw-confirm-spin {
  to { transform: rotate(360deg); }
}
.maw-confirm-progress-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-mut, #8a8577);
  line-height: 1.5;
}
.maw-confirm-error {
  color: var(--danger, #b3261e);
  word-break: break-word;
}
.maw-confirm-modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
}
.maw-confirm-mode {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-mut);
  line-height: 1.45;
  cursor: pointer;
}
.maw-confirm-mode input[type="radio"] {
  flex: 0 0 auto;
  margin-top: 2px;
}
.maw-confirm-mode b { color: var(--ink); }
.maw-confirm-migrate-target {
  margin-left: 24px;
  padding: 5px 8px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  max-width: calc(100% - 24px);
}
.maw-confirm-migrate-target:disabled {
  opacity: 0.5;
}
.maw-confirm-mode-warn {
  margin-left: 24px;
  font-size: 12px;
  color: var(--danger, #b3261e);
}
.maw-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.maw-confirm-body {
  font-size: 13px;
  color: var(--ink-mut);
  line-height: 1.5;
  margin-bottom: 18px;
}
.maw-confirm-body b { color: var(--ink); font-weight: 600; }
.maw-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.maw-confirm-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, filter .12s;
}
.maw-confirm-cancel:hover { background: var(--panel-hover); }
.maw-confirm-ok {
  background: var(--orange-strong);
  border-color: var(--orange-strong);
  color: #fff;
}
.maw-confirm-ok:hover { filter: brightness(1.06); }

/* ===== "New Project" card ===== */
.maw-launcher-root .maw-launcher-card.maw-launcher-card-new {
  border: 1.5px dashed var(--line-hi);
  background: transparent;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-mut);
  min-height: 110px;
}
.maw-launcher-root .maw-launcher-card.maw-launcher-card-new:hover {
  border-color: var(--indigo);
  color: var(--indigo);
  background: var(--indigo-soft);
}

.maw-launcher-root .maw-launcher-card-plus {
  font-size: 32px;
  font-weight: 200;
  line-height: 1;
  color: inherit;
  transition: color .13s;
}

.maw-launcher-root .maw-launcher-card-new-label {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  transition: color .13s;
}

/* ===== Logo chip ===== */
.maw-launcher-root .maw-launcher-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  flex: none;
  letter-spacing: 0;
  /* background set inline by JS (_logoStyle) */
}

/* Card body: stacks name / id / meta */
.maw-launcher-root .maw-launcher-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Card typography */
.maw-launcher-root .maw-launcher-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}
.maw-launcher-root .maw-launcher-card-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-dim);
  margin-left: 5px;
}
.maw-launcher-root .maw-launcher-card-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.maw-launcher-root .maw-launcher-card-meta {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
}

/* ===== Empty account state (no projects) -- centered New Project card ===== */
.maw-launcher-root .maw-launcher-empty-state {
  grid-column: 1 / -1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}
.maw-launcher-root .maw-launcher-empty-state .maw-launcher-card-new {
  width: 220px;
}
.maw-launcher-root .maw-launcher-empty-text {
  text-align: center;
  color: var(--ink-mut);
  font-size: 13px;
}

/* ===== Loading state ===== */
.maw-launcher-root .maw-launcher-loading {
  grid-column: 1 / -1;
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
}

/* ===== Error + retry ===== */
.maw-launcher-root .maw-launcher-error {
  grid-column: 1 / -1;
  padding: 28px 20px;
  text-align: center;
  color: var(--orange-strong);
  font-size: 13px;
}

.maw-launcher-root .maw-launcher-retry {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.maw-launcher-root .maw-launcher-retry:hover {
  background: var(--panel-hover);
}

/* ===== Responsive: tighter panel padding on narrow viewports ===== */
@media (max-width: 540px) {
  .maw-launcher-root {
    padding: 16px 10px;
  }
  .maw-launcher-root .maw-launcher-scroll {
    padding: 20px 16px 24px;
  }
  .maw-launcher-root .maw-launcher-title {
    font-size: 18px;
  }
}

/* ===================================================================== */
/* Modal host (floating, dimmed backdrop)                                */
/* ===================================================================== */
.maw-wf-modal-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow: auto;
  animation: maw-wf-fade .16s ease-out;
}

.maw-wf-modal-panel {
  width: min(620px, 94vw);
  max-height: 86vh;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  overflow: hidden;            /* the .maw-wf inside owns scrolling */
  display: flex;
  flex-direction: column;
  animation: maw-wf-float .2s cubic-bezier(.2, .7, .3, 1);
}

.maw-wf-modal-err {
  padding: 28px;
  color: var(--orange-strong);
  font-size: 13px;
}

@keyframes maw-wf-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes maw-wf-float { from { opacity: 0; transform: translateY(14px) scale(.985); }
                          to   { opacity: 1; transform: translateY(0) scale(1); } }

/* ===================================================================== */
/* Form shell (engine)                                                   */
/* ===================================================================== */
.maw-wf {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 86vh;            /* inside the modal panel */
  box-sizing: border-box;
}

/* ---- Header (fixed) ---- */
.maw-wf-header {
  flex: none;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line);
}
.maw-wf-title {
  margin: 0 0 5px 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.maw-wf-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mut);
  line-height: 1.5;
}

/* ---- Wizard stepper (clickable progress rail) ---- */
.maw-wf-stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 14px 28px 4px;
}
.maw-wf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--ink-mut);
  border-radius: var(--radius-sm);
  transition: color .15s;
}
.maw-wf-step:hover { color: var(--ink); }
.maw-wf-step-dot {
  position: relative;
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--panel);
  border: 1.5px solid var(--line-hi);
  color: var(--ink-mut);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.maw-wf-step-tick { display: none; width: 6px; height: 10px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.maw-wf-step-label { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.maw-wf-step-sep {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1.5px;
  background: var(--line);
  border-radius: 1px;
  transition: background .18s;
}
.maw-wf-step.is-active { color: var(--navy); }
.maw-wf-step.is-active .maw-wf-step-dot {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-wf-step.is-done .maw-wf-step-dot {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.maw-wf-step.is-done .maw-wf-step-num { display: none; }
.maw-wf-step.is-done .maw-wf-step-tick { display: block; }
.maw-wf-step.is-done + .maw-wf-step-sep { background: var(--indigo-bd); }

/* ---- Stages (scroll) ---- */
.maw-wf-stages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 28px 8px;
}

.maw-wf-stage { margin-bottom: 18px; }
.maw-wf-stage.is-hidden { display: none; }     /* wizard step hiding */

/* Wizard slide-in: a hidden stage is display:none, so un-hiding it restarts
   these animations fresh (forward = enters from the right, back = from left). */
.maw-wf-stage.maw-wf-slide-fwd  { animation: maw-wf-slide-in-r .26s cubic-bezier(.22,.61,.36,1); }
.maw-wf-stage.maw-wf-slide-back { animation: maw-wf-slide-in-l .26s cubic-bezier(.22,.61,.36,1); }
@keyframes maw-wf-slide-in-r {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes maw-wf-slide-in-l {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .maw-wf-stage.maw-wf-slide-fwd,
  .maw-wf-stage.maw-wf-slide-back { animation: none; }
}

.maw-wf-stage-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.maw-wf-stage.is-collapsible .maw-wf-stage-head {
  cursor: pointer;
  user-select: none;
}
.maw-wf-stage-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.maw-wf-stage-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.maw-wf-stage-hint {
  font-size: 12px;
  color: var(--ink-dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Collapse caret */
.maw-wf-stage-caret {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  position: relative;
  transition: transform .15s ease;
}
.maw-wf-stage-caret::before {
  content: "";
  position: absolute;
  top: 3px; left: 4px;
  width: 7px; height: 7px;
  border-right: 2px solid var(--ink-dim);
  border-bottom: 2px solid var(--ink-dim);
  transform: rotate(45deg);
}
.maw-wf-stage.is-collapsed .maw-wf-stage-caret { transform: rotate(-90deg); }
/* Resting collapsed state = zero height (the JS toggle animates the height). */
.maw-wf-stage.is-collapsed .maw-wf-stage-body { height: 0; overflow: hidden; }

/* ---- Field grid ---- */
.maw-wf-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.maw-wf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.maw-wf-field.maw-wf-field-wide { grid-column: 1 / -1; }

.maw-wf-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.maw-wf-req { color: var(--orange-strong); margin-left: 3px; }
/* "* Required" flag: the asterisk is always shown; the " Required" text reveals
   (red) only when a required field is empty at a progress/validate attempt. */
.maw-wf-req-flag { display: none; font-size: 11px; font-weight: 600; }
.maw-wf-field.is-req-missing .maw-wf-req-flag { display: inline; }

.maw-wf-hint {
  font-size: 11.5px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.maw-wf-error {
  font-size: 11.5px;
  color: var(--orange-strong);
  line-height: 1.4;
  min-height: 0;
}
.maw-wf-field.has-error .maw-wf-input,
.maw-wf-field.has-error .maw-wf-input-color,
.maw-wf-field.has-error .maw-wf-iconpick-btn,
.maw-wf-field.has-error .maw-wf-tags,
.maw-wf-field.is-req-missing .maw-wf-input {
  border-color: var(--orange-strong);
}

/* ---- Footer (fixed) ---- */
.maw-wf-foot-error {
  flex: none;
  display: none;
  padding: 8px 28px 0;
  font-size: 12px;
  color: var(--orange-strong);
}
.maw-wf-foot-error.is-shown { display: block; }

.maw-wf-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px 20px;
  border-top: 1px solid var(--line);
}
.maw-wf-foot-left  { display: flex; gap: 8px; }
.maw-wf-foot-right { display: flex; gap: 8px; margin-left: auto; }

/* ===================================================================== */
/* Buttons                                                               */
/* ===================================================================== */
.maw-wf-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s;
}
.maw-wf-btn:hover { background: var(--panel-hover); }
.maw-wf-btn:disabled { opacity: .55; cursor: default; }
.maw-wf-btn.is-hidden { display: none; }

.maw-wf-btn.maw-wf-primary {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.maw-wf-btn.maw-wf-primary:hover { filter: brightness(1.06); background: var(--indigo); }
.maw-wf-btn.maw-wf-primary.is-loading { opacity: .8; }

/* ===================================================================== */
/* Inputs (WorkerFormInputs registry)                                    */
/* ===================================================================== */
.maw-wf-input {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-input:focus {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-wf-input::placeholder { color: var(--ink-dim); }

.maw-wf-input-textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.maw-wf-input-select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---- Color: native picker swatch + read-only hex label (no manual typing) ---- */
.maw-wf-color { display: flex; align-items: center; gap: 10px; }
.maw-wf-input-color {
  width: 46px; height: 32px;
  padding: 0;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: none;
  flex: none;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-input-color:hover { border-color: var(--indigo-bd); }
.maw-wf-input-color:focus { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-wf-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
.maw-wf-input-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.maw-wf-color-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-mut);
}

/* ---- Icon picker: click-to-open FontAwesome panel ---- */
.maw-wf-iconpick { position: relative; }
.maw-wf-iconpick-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-iconpick-btn:hover { border-color: var(--indigo-bd); }
.maw-wf-iconpick.is-open .maw-wf-iconpick-btn {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-wf-iconpick-preview {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 14px;
}
.maw-wf-iconpick-label {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-wf-iconpick-caret {
  flex: none;
  width: 0; height: 0;
  margin-right: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-dim);
}
.maw-wf-iconpick-panel {
  display: none;                 /* JS toggles via .show()/.hide() */
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 8px;
}
.maw-wf-iconpick-search {
  font: inherit; font-size: 12.5px;
  width: 100%; box-sizing: border-box;
  padding: 7px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  outline: none;
}
.maw-wf-iconpick-search:focus { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-wf-iconpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 208px;
  overflow-y: auto;
}
.maw-wf-iconpick-item {
  height: 34px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-mut);
  font-size: 15px;
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.maw-wf-iconpick-item:hover {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}
.maw-wf-iconpick-item.hidden { display: none; }

/* ---- Toggle (switch) ---- */
.maw-wf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.maw-wf-input-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.maw-wf-toggle-track {
  position: relative;
  width: 38px; height: 22px;
  border-radius: 11px;
  background: var(--line-hi);
  transition: background .15s;
  flex: none;
}
.maw-wf-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .15s;
}
.maw-wf-input-toggle:checked + .maw-wf-toggle-track { background: var(--indigo); }
.maw-wf-input-toggle:checked + .maw-wf-toggle-track .maw-wf-toggle-knob { transform: translateX(16px); }
.maw-wf-input-toggle:focus + .maw-wf-toggle-track { box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-wf-toggle-label { font-size: 12.5px; color: var(--ink-mut); }

/* ---- Tags: chip editor ---- */
/* ONE row: chips and the text entry sit side by side (2026-08-21, Rahul).
   They used to be stacked block siblings, so the first tag pushed the input
   onto a second line and the whole control grew taller. The row's height is set
   by the tallest child -- the add button -- and a chip is shorter than it, so
   this box is the SAME height with 0 tags or 20. */
.maw-wf-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 5px 6px;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-tags:focus-within { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
/* ONE row that scrolls sideways, not a wrapping block (2026-08-21, Rahul).
   With flex-wrap:wrap a narrow host -- the import-manager composer is capped at
   340px -- put roughly one chip per line, so adding tags grew the editor
   downward and read as a vertical stack. nowrap + overflow-x keeps the control
   a fixed height however many tags it holds. */
/* `flex: 0 1 auto` + `min-width: 0` = take only what the chips need, and give
   room back to the input by scrolling rather than by wrapping or growing.
   The scrollbar is deliberately GIVEN NO HEIGHT: a laid-out scrollbar would
   make this div taller than the add button the moment it overflows, i.e. the
   box would still change height on adding a tag. Wheel/trackpad scrolling and
   keyboard focus scrolling both still work. */
.maw-wf-tags-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.maw-wf-tags-chips::-webkit-scrollbar { height: 0; width: 0; }
.maw-wf-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 9px;
  border-radius: 12px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 12px;
  font-weight: 600;
  /* A flex item shrinks by default; without this a long tag would be squeezed
     to min-content instead of pushing the row into its scroll. */
  flex: none;
}
.maw-wf-tag-label { line-height: 1; white-space: nowrap; }
.maw-wf-tag-x {
  border: none;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: .7;
  transition: opacity .1s, background .1s;
}
.maw-wf-tag-x:hover { opacity: 1; background: rgba(79, 70, 229, 0.16); }
/* Keeps its own width so the input never collapses as chips accumulate --
   the chips row is what gives way (it scrolls). */
.maw-wf-tags-entry { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.maw-wf-tags-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  border: none;
  background: none;
  outline: none;
  padding: 3px 4px;
  min-width: 80px;
}
.maw-wf-tags-input::placeholder { color: var(--ink-dim); }
.maw-wf-tags-add {
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .1s, color .1s, border-color .1s;
}
.maw-wf-tags-add:hover { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo-bd); }

/* ---- Unsupported-type fallback note ---- */
.maw-wf-unsupported-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-dim);
  font-style: italic;
}

/* ===================================================================== */
/* Result card (default success rendering)                               */
/* ===================================================================== */
.maw-wf-result {
  padding: 40px 28px;
  text-align: center;
}
.maw-wf-result-icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-wf-result.is-error .maw-wf-result-icon {
  background: rgba(194, 86, 47, 0.12);
  color: var(--orange-strong);
}
.maw-wf-result-msg {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 18px;
}
.maw-wf-result-actions { display: flex; justify-content: center; gap: 10px; }

/* ===================================================================== */
/* Responsive: single-column fields on narrow viewports                  */
/* ===================================================================== */
@media (max-width: 540px) {
  .maw-wf-modal-root { padding: 14px 10px; }
  .maw-wf-fields { grid-template-columns: minmax(0, 1fr); }
  .maw-wf-header, .maw-wf-stages, .maw-wf-footer, .maw-wf-foot-error { padding-left: 18px; padding-right: 18px; }
}

/* ===================================================================== */
/* Loading / skeleton state                                              */
/* The modal opens INSTANTLY -- labels + field boxes render from the      */
/* spec; only the value area shimmers until async data (e.g.             */
/* assembler_get_project) streams in via setData().                      */
/* ===================================================================== */
.maw-wf-is-loading .maw-wf-control { position: relative; }

/* keep the real (empty) control in the layout so the skeleton inherits   */
/* each field's true height (textarea taller than a text input, etc.),    */
/* but hide it until its value arrives.                                    */
.maw-wf-is-loading .maw-wf-control > * { visibility: hidden; }

.maw-wf-is-loading .maw-wf-control::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background-color: rgba(28, 24, 18, 0.07);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 180% 100%;
  background-repeat: no-repeat;
  animation: maw-wf-shimmer 1.25s ease-in-out infinite;
  pointer-events: none;
}

/* dim + lock the submit while values are still streaming in */
.maw-wf-is-loading .maw-wf-submit { opacity: 0.55; pointer-events: none; }

@keyframes maw-wf-shimmer {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* In-flight submit: a spinner (replaces the old static "Working..." text) */
.maw-wf-submit.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.maw-wf-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: maw-wf-spin 0.6s linear infinite;
}
@keyframes maw-wf-spin { to { transform: rotate(360deg); } }

/* ---- File: dropzone + browse + selected-file list (multi-file upload) ---- */
.maw-wf-file { display: block; }
.maw-wf-file-dz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 20px 16px;
  border: 1.5px dashed var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  cursor: pointer;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.maw-wf-file-dz:hover { border-color: var(--indigo-bd); background: var(--panel-hover); }
.maw-wf-file-dz:focus { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-wf-file-dz.is-drag { border-color: var(--indigo); background: var(--indigo-soft); color: var(--ink); }
.maw-wf-file-ic { width: 26px; height: 26px; color: var(--ink-dim); margin-bottom: 2px; }
.maw-wf-file-dz.is-drag .maw-wf-file-ic { color: var(--indigo); }
.maw-wf-file-dz-main { font-size: 13px; color: var(--ink); }
.maw-wf-file-dz-link { color: var(--indigo); font-weight: 600; }
.maw-wf-file-dz-sub { font-size: 11.5px; color: var(--ink-dim); }
.maw-wf-field.has-error .maw-wf-file-dz { border-color: var(--orange-strong); }

.maw-wf-file-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.maw-wf-file-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-wf-file-row-ic {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--indigo);
}
.maw-wf-file-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-wf-file-row-size {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.maw-wf-file-row-x {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color .15s;
}
.maw-wf-file-row-x:hover { color: var(--orange-strong); }

/* ---- Entity picker: async searchable multi-select (existing assemblies) ---- */
.maw-wf-picker {
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}
.maw-wf-field.has-error .maw-wf-picker { border-color: var(--orange-strong); }
.maw-wf-picker-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.maw-wf-picker-search-wrap svg {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--ink-dim);
  pointer-events: none;
}
.maw-wf-picker-search {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 11px 8px 32px;
}
.maw-wf-picker-search::placeholder { color: var(--ink-dim); }
.maw-wf-picker-list { max-height: 220px; overflow-y: auto; padding: 4px; }
.maw-wf-picker-loading,
.maw-wf-picker-empty,
.maw-wf-picker-error {
  padding: 18px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.maw-wf-picker-error { color: var(--orange-strong); }
.maw-wf-picker-spin {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-wf-spin 0.6s linear infinite;
}
.maw-wf-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 7px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: background .12s;
}
.maw-wf-picker-row:hover { background: var(--panel-hover); }
.maw-wf-picker-row.is-sel { background: var(--indigo-soft); }
.maw-wf-picker-check {
  flex: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  position: relative;
  transition: border-color .12s, background .12s;
}
.maw-wf-picker-row.is-sel .maw-wf-picker-check {
  border-color: var(--indigo);
  background: var(--indigo);
}
.maw-wf-picker-row.is-sel .maw-wf-picker-check::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.maw-wf-picker-row-main { display: flex; flex-direction: column; min-width: 0; }
.maw-wf-picker-row-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-wf-picker-row-sub { font-size: 11px; color: var(--ink-dim); }
.maw-wf-picker-foot {
  padding: 6px 11px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-wf-picker-count { font-size: 11.5px; color: var(--ink-mut); }
.maw-wf-input-select.is-loading { opacity: 0.6; cursor: progress; }

/* ===================================================================== */
/* Split layout (spec.layout === 'split')                                */
/* Metadata column left, one browse-sized field (pane:'right') right.    */
/* ===================================================================== */
.maw-wf-modal-panel.is-wide {
  width: min(1180px, 96vw);
  height: min(760px, 100%);
  max-height: 100%;
}
.maw-wf-modal-panel.is-wide .maw-wf {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.maw-wf-split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}
.maw-wf-split-main {
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 12px;
  border-right: 1px solid var(--line);
  background: var(--panel-soft);
}
/* One field per row on the left -- the column is already narrow, and a
   2-up grid there produces half-width color/select controls. */
.maw-wf-split-main .maw-wf-fields { grid-template-columns: minmax(0, 1fr); }
.maw-wf-split-main .maw-wf-stage:last-child { margin-bottom: 0; }

.maw-wf-split-side {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 22px 12px;
}
/* The browse field owns the remaining height, so the table grows with the
   modal instead of scrolling inside a fixed 220px box. */
.maw-wf-split-side > .maw-wf-field { min-height: 0; }
.maw-wf-split-side > .maw-wf-field:last-child { flex: 1 1 auto; }
.maw-wf-split-side > .maw-wf-field:last-child > .maw-wf-control {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.maw-wf-split-side > .maw-wf-field:last-child > .maw-wf-control > .maw-wf-et {
  flex: 1 1 auto;
  min-height: 0;
}

/* Narrow viewport: stack, and give the table a workable fixed height. */
@media (max-width: 900px) {
  .maw-wf-modal-panel.is-wide { height: auto; }
  .maw-wf-split { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .maw-wf-split-main { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .maw-wf-split-side > .maw-wf-field:last-child { flex: none; }
  /* 380 not 340: the filter dropdown is capped at 300px and must fit inside
     this box, which is overflow:hidden. */
  .maw-wf-split-side > .maw-wf-field:last-child > .maw-wf-control > .maw-wf-et { height: 380px; }
}

/* ===================================================================== */
/* entitytable (input type 'entitytable')                                */
/* A browse table with metadata columns -- the entitypicker's full-      */
/* surface sibling, for choosing from a long, near-homonymous list.      */
/* ===================================================================== */
.maw-wf-et {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  overflow: hidden;
}
.maw-wf-field.has-error .maw-wf-et,
.maw-wf-field.is-req-missing .maw-wf-et { border-color: var(--orange-strong); }

/* ---- Toolbar: search + bulk actions ---- */
.maw-wf-et-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-wf-et-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.maw-wf-et-search-wrap svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 10px;
  color: var(--ink-dim);
}
.maw-wf-et-search {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 9px 4px;
  outline: none;
}
.maw-wf-et-search::placeholder { color: var(--ink-dim); }
.maw-wf-et-act {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.maw-wf-et-act:hover { color: var(--indigo); border-color: var(--indigo); }

/* ---- Filter (hamburger) button + dropdown -- mirrors the Home toolbar ---- */
.maw-wf-et-filter { position: relative; flex: none; }
.maw-wf-et-filter-btn {
  position: relative;
  height: 26px;
  width: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.maw-wf-et-filter-btn svg { width: 13px; height: 13px; }
.maw-wf-et-filter-btn:hover { color: var(--indigo); border-color: var(--indigo); }
.maw-wf-et-filter-btn.is-active,
.maw-wf-et-filter-btn.is-open {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: var(--indigo-bd);
}
.maw-wf-et-filter-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--indigo);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}
/* Anchored to the button, but capped so it always fits inside .maw-wf-et --
   that container is overflow:hidden, so anything taller is silently clipped. */
.maw-wf-et-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 50;
  min-width: 190px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 5px;
  text-align: left;
}
.maw-wf-et-menu-sec { padding: 3px 0; }
.maw-wf-et-menu-sec + .maw-wf-et-menu-sec { border-top: 1px solid var(--line); margin-top: 3px; }
.maw-wf-et-menu-h {
  padding: 5px 9px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
.maw-wf-et-menu-empty { padding: 4px 9px 7px; font-size: 11.5px; color: var(--ink-dim); }
.maw-wf-et-menu-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  padding: 5px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  transition: background .12s;
}
.maw-wf-et-menu-opt:hover { background: var(--panel-hover); }
.maw-wf-et-menu-opt.is-on { color: var(--ink); font-weight: 600; }
.maw-wf-et-menu-check { flex: none; width: 13px; color: var(--indigo); font-size: 11px; }
.maw-wf-et-menu-cb {
  flex: none;
  position: relative;
  width: 14px; height: 14px;
  border: 1.5px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  transition: border-color .12s, background .12s;
}
.maw-wf-et-menu-cb.checked { border-color: var(--indigo); background: var(--indigo); }
.maw-wf-et-menu-cb.checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 3px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.maw-wf-et-menu-foot {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding: 5px 4px 2px;
}
.maw-wf-et-clear {
  width: 100%;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-mut);
  background: none;
  border: none;
  padding: 5px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.maw-wf-et-clear:hover:not([disabled]) { background: var(--panel-hover); color: var(--ink); }
.maw-wf-et-clear[disabled] { opacity: .4; cursor: default; }

/* ---- Scroll body ---- */
.maw-wf-et-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
}
.maw-wf-et-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.maw-wf-et-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
  padding: 7px 10px;
  white-space: nowrap;
}
.maw-wf-et-th-check { width: 30px; padding-left: 12px !important; }
.maw-wf-et-th-name  { min-width: 180px; }
.maw-wf-et-c-num  { width: 58px;  text-align: right; }
.maw-wf-et-c-tags { width: 150px; }
.maw-wf-et-c-by   { width: 120px; }
.maw-wf-et-c-when { width: 96px; }

.maw-wf-et-row { cursor: pointer; transition: background .12s; }
.maw-wf-et-row > td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.maw-wf-et-row:hover > td { background: var(--panel-hover); }
.maw-wf-et-row.is-sel > td { background: var(--indigo-soft); }
.maw-wf-et-td-check { width: 30px; padding-left: 12px !important; }
.maw-wf-et-td-name {
  font-weight: 600;
  color: var(--navy);
  word-break: break-word;
}
.maw-wf-et-c-num  { text-align: right; }

.maw-wf-et-check {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  vertical-align: middle;
  transition: background .14s, border-color .14s;
}
.maw-wf-et-row.is-sel .maw-wf-et-check {
  background: var(--indigo);
  border-color: var(--indigo);
}
.maw-wf-et-row.is-sel .maw-wf-et-check::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ---- Cell atoms ---- */
.maw-wf-et-dim { color: var(--ink-dim); }
.maw-wf-et-num { font-variant-numeric: tabular-nums; }
.maw-wf-et-stamp { display: flex; flex-direction: column; line-height: 1.25; }
.maw-wf-et-stamp-d { font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.maw-wf-et-stamp-t { font-size: 10.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.maw-wf-et-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.maw-wf-et-tag {
  display: inline-block;
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  padding: 1px 6px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  color: var(--ink-mut);
  background: var(--panel-soft);
}
.maw-wf-et-tag-more { font-size: 10.5px; color: var(--ink-dim); align-self: center; }

/* ---- Message rows (loading / empty / error) ---- */
.maw-wf-et-msg > td {
  padding: 22px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-dim);
}
.maw-wf-et-msg.is-err > td { color: var(--orange-strong); }
.maw-wf-et-spin {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-wf-et-spin .7s linear infinite;
}
@keyframes maw-wf-et-spin { to { transform: rotate(360deg); } }

/* ---- Footer: selected count + freshness ---- */
.maw-wf-et-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 11px;
  border-top: 1px solid var(--line);
  background: var(--panel-soft);
}
.maw-wf-et-count  { font-size: 11.5px; font-weight: 600; color: var(--ink-mut); }
.maw-wf-et-status { font-size: 11px; color: var(--ink-dim); }

/* ===================================================================== */
/* Response Template builder (input type 'responsetemplate')             */
/* Stage 3 of Create Loadcase: create-new (name + criteria rows) OR pick */
/* an existing template. Scoped under .maw-shell via the shared tokens.  */
/* ===================================================================== */
.maw-wf-rt { display: flex; flex-direction: column; gap: 12px; }
.maw-wf-rt-pane.is-hidden,
.maw-wf-rt-empty.is-hidden { display: none; }

/* ---- Segmented mode switch (Create new | Use existing) ---- */
.maw-wf-rt-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  gap: 3px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.maw-wf-rt-segbtn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.maw-wf-rt-segbtn:hover { color: var(--ink); }
.maw-wf-rt-segbtn.is-active {
  background: var(--panel);
  color: var(--indigo);
  border-color: var(--line-hi);
  box-shadow: var(--shadow-sm);
}

/* ---- Create-new pane ---- */
.maw-wf-rt-pane-new { display: flex; flex-direction: column; gap: 10px; }

.maw-wf-rt-rows-head,
.maw-wf-rt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 0.85fr) 26px;
  gap: 8px;
  align-items: center;
}
.maw-wf-rt-rows-head { padding: 0 2px; }
.maw-wf-rt-col {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.maw-wf-rt-rows { display: flex; flex-direction: column; gap: 7px; }

.maw-wf-rt-r-name,
.maw-wf-rt-r-sel {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-rt-r-sel { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 8px; }
.maw-wf-rt-r-name:focus,
.maw-wf-rt-r-sel:focus {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}
.maw-wf-rt-r-name::placeholder { color: var(--ink-dim); }

.maw-wf-rt-r-del {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-wf-rt-r-del:hover { background: var(--panel-hover); color: var(--orange-strong); border-color: var(--line); }

.maw-wf-rt-empty {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 10px 12px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-wf-rt-addrow {
  align-self: flex-start;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border: 1px dashed var(--indigo-bd);
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.maw-wf-rt-addrow:hover { background: var(--panel); border-style: solid; }

/* ---- Use-existing pane (searchable single-select) ---- */
.maw-wf-rt-pane-existing { display: flex; flex-direction: column; gap: 8px; }
.maw-wf-rt-search-wrap { position: relative; display: flex; align-items: center; }
.maw-wf-rt-search-wrap svg {
  position: absolute; left: 10px;
  width: 15px; height: 15px;
  color: var(--ink-dim);
  pointer-events: none;
}
.maw-wf-rt-search {
  font: inherit; font-size: 13px; color: var(--ink);
  width: 100%; box-sizing: border-box;
  padding: 8px 11px 8px 32px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.maw-wf-rt-search:focus { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-wf-rt-search::placeholder { color: var(--ink-dim); }

.maw-wf-rt-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  display: flex; flex-direction: column;
}
.maw-wf-rt-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .1s;
}
.maw-wf-rt-opt:last-child { border-bottom: none; }
.maw-wf-rt-opt:hover { background: var(--panel-hover); }
.maw-wf-rt-opt-check {
  flex: none;
  width: 16px; height: 16px;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--panel);
  position: relative;
  transition: border-color .12s, background .12s;
}
.maw-wf-rt-opt.is-sel .maw-wf-rt-opt-check { border-color: var(--indigo); background: var(--indigo); }
.maw-wf-rt-opt.is-sel .maw-wf-rt-opt-check::after {
  content: ""; position: absolute;
  top: 4px; left: 4px; width: 6px; height: 6px;
  border-radius: 50%; background: #fff;
}
.maw-wf-rt-opt-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.maw-wf-rt-opt-name { font-size: 13px; font-weight: 600; }
.maw-wf-rt-opt-sub  { font-size: 11px; color: var(--ink-dim); }
.maw-wf-rt-opt.is-sel .maw-wf-rt-opt-name { color: var(--indigo); }

.maw-wf-rt-loading,
.maw-wf-rt-listempty,
.maw-wf-rt-listerr {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px;
  font-size: 12px;
  color: var(--ink-dim);
}
.maw-wf-rt-listerr { color: var(--orange-strong); }
.maw-wf-rt-spin {
  width: 13px; height: 13px;
  border: 2px solid var(--line-hi);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: maw-wf-rt-spin .7s linear infinite;
}
@keyframes maw-wf-rt-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .maw-wf-rt-rows-head { display: none; }
  .maw-wf-rt-row {
    grid-template-columns: minmax(0, 1fr) 26px;
    grid-template-areas: "name del" "branch del" "comp del" "reduce del";
    align-items: center;
  }
  .maw-wf-rt-row .maw-wf-rt-r-name   { grid-area: name; }
  .maw-wf-rt-row .maw-wf-rt-r-branch { grid-area: branch; }
  .maw-wf-rt-row .maw-wf-rt-r-comp   { grid-area: comp; }
  .maw-wf-rt-row .maw-wf-rt-r-reduce { grid-area: reduce; }
  .maw-wf-rt-row .maw-wf-rt-r-del    { grid-area: del; align-self: start; }
}

/* ---- RT builder: section sub-titles + Targets sub-section ---- */
.maw-wf-rt-sub-title {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mut);
}
.maw-wf-rt-sub-hint {
  font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-dim);
}

.maw-wf-rt-trows-head,
.maw-wf-rt-trow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.7fr) 26px;
  gap: 8px;
  align-items: center;
}
.maw-wf-rt-trows-head { padding: 0 2px; }
.maw-wf-rt-trows { display: flex; flex-direction: column; gap: 7px; }

.maw-wf-rt-t-del {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-wf-rt-t-del:hover { background: var(--panel-hover); color: var(--orange-strong); border-color: var(--line); }

.maw-wf-rt-tempty {
  font-size: 12px;
  color: var(--ink-dim);
  padding: 10px 12px;
  border: 1px dashed var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-wf-rt-tempty.is-hidden { display: none; }
.maw-wf-rt-addtarget {
  align-self: flex-start;
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 13px;
  border: 1px dashed var(--indigo-bd);
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--indigo);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.maw-wf-rt-addtarget:hover { background: var(--panel); border-style: solid; }

@media (max-width: 560px) {
  .maw-wf-rt-trows-head { display: none; }
  .maw-wf-rt-trow {
    grid-template-columns: minmax(0, 1fr) 26px;
    grid-template-areas: "channel del" "metric del" "value del";
    align-items: center;
  }
  .maw-wf-rt-trow .maw-wf-rt-t-channel { grid-area: channel; }
  .maw-wf-rt-trow .maw-wf-rt-t-metric  { grid-area: metric; }
  .maw-wf-rt-trow .maw-wf-rt-t-value   { grid-area: value; }
  .maw-wf-rt-trow .maw-wf-rt-t-del     { grid-area: del; align-self: start; }
}

/* ---- RT builder: Add-target guard message ---- */
.maw-wf-rt-addtarget-row { display: flex; align-items: center; gap: 10px; }
.maw-wf-rt-tmsg {
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-strong);
}
.maw-wf-rt-tmsg.is-hidden { display: none; }

/* ===================================================================== */
/* Entity table: opt-in role column (field.roles) and loading rows       */
/* Added by rahul.suri on 09/25/2026 - Phase 55 - New Project people.    */
/* ===================================================================== */
.maw-wf-et-th-role, .maw-wf-et-td-role { width: 128px; }
.maw-wf-et-role {
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line-hi);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.maw-wf-et-role:disabled { opacity: .45; cursor: default; }
.maw-wf-et-skel td { padding: 10px 12px; }
.maw-wf-et-skel span {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 20%, var(--panel-soft) 50%, var(--line) 80%);
  background-size: 200% 100%;
  animation: maw-wf-shimmer 1.3s linear infinite;
}
@keyframes maw-wf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .maw-wf-et-skel span { animation: none; } }

/* ===================================================================== */
/* Shared overlay backdrop                                               */
/* ===================================================================== */
.maw-cmp-root,
.maw-lock4-root,
.maw-cfl-root,
.maw-nec-root,
.maw-smp-root,
.maw-swap-root,
.maw-pksave-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1010;                 /* above the workerform modal, below toasts */
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  box-sizing: border-box;
  overflow: auto;
}

/* Fullscreen-takeover contract (d3v-rail-width-takeover-contract): the
   compose surface is a full-workspace takeover, so it yields the pinned
   app rail via --d3v-rail-w (0px fallback keeps rail-less pages
   byte-identical). The other roots above are centered DIALOGS whose shaded
   backdrop legitimately covers the whole viewport -- their left:0 stays. */
.maw-cmp-root {
  left: var(--d3v-rail-w, 0px);
}

.maw-cmp-root.is-busy,
.maw-lock4-root.is-busy,
.maw-swap-root.is-busy,
.maw-pksave-root.is-busy { cursor: progress; }

.maw-cmp-panel,
.maw-lock4-panel,
.maw-cfl-panel,
.maw-nec-panel,
.maw-smp-panel,
.maw-swap-panel,
.maw-pksave-panel {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
}

/* Stale-revision conflict dialog (LockedEditFlow._openRevisionConflictDialog,
   multi-user MVP 2026-08-20): reuses the shared overlay/panel + wf header
   chrome above; only the body/foot are its own. */
.maw-cfl-panel { width: min(520px, 92vw); }
.maw-cfl-body {
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--ink-mut);
  line-height: 1.5;
}
.maw-cfl-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

/* ===================================================================== */
/* ComposeEntityView -- three columns                                    */
/* ===================================================================== */
.maw-cmp-panel { width: min(1180px, 96vw); }

.maw-cmp-originnote {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--indigo);
  background: var(--indigo-soft);
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--navy);
}

.maw-cmp-body {
  display: grid;
  grid-template-columns: 300px minmax(240px, 1fr) minmax(340px, 1.25fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--line);
}

.maw-cmp-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 14px;
}
.maw-cmp-col-mid,
.maw-cmp-col-right { border-left: 1px solid var(--line); }

.maw-cmp-colhd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.maw-cmp-rowcount { font-weight: 600; letter-spacing: 0; text-transform: none; }

.maw-cmp-left-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.maw-cmp-desc { resize: vertical; font-family: inherit; }
.maw-cmp-project { color: var(--ink-dim); cursor: default; }
.maw-cmp-upload-field .maw-wf-btn { align-self: flex-start; }

/* ---- middle: search + tabs + grouped list ---- */
.maw-cmp-pick-tabs { display: flex; gap: 4px; margin: 8px 0 4px; flex: 0 0 auto; }
/* Phase 37 Packet E: sort + hide-added controls under the tabs */
.maw-cmp-pick-ctl { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; flex: 0 0 auto; }
.maw-cmp-pick-sort {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11.5px;
}
.maw-cmp-pick-hide {
  /* !important is load-bearing: the core stylesheet's unscoped
     `label { display: block !important }` beats any non-important rule. */
  display: inline-flex !important;
  align-items: center; gap: 5px;
  color: var(--ink-dim); font-size: 11.5px; font-weight: 600;
  cursor: pointer; margin: 0;
}
.maw-cmp-pick-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.maw-cmp-pick-tab:hover { background: var(--panel-hover); color: var(--ink); }
.maw-cmp-pick-tab.is-active {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
  color: var(--navy);
}

.maw-cmp-pick-list {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px;
}
.maw-cmp-pick-group + .maw-cmp-pick-group { margin-top: 6px; }
.maw-cmp-pick-grouphd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 8px 4px;
}
.maw-cmp-pick-row { cursor: pointer; align-items: center; gap: 8px; }
.maw-cmp-pick-row.is-added { opacity: .55; cursor: default; }
.maw-cmp-pick-badge { font-size: 10.5px; color: var(--ink-dim); }
.maw-cmp-pick-add {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo);
  flex: 0 0 auto;
}
.maw-cmp-pick-row.is-added .maw-cmp-pick-add { color: var(--ink-dim); font-weight: 600; }

/* ---- right: branch bar + canvas ---- */
.maw-cmp-branchbar { flex: 0 0 auto; margin-bottom: 8px; }
.maw-cmp-branchbar-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--navy);
}
.maw-cmp-branchkind {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--indigo);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
}
.maw-cmp-branchtot { font-weight: 600; }
.maw-cmp-branchsrc { color: var(--ink-dim); margin-left: auto; }

.maw-cmp-canvas {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 6px;
}
.maw-cmp-canvas-empty,
.maw-cmp-pick-list .maw-wf-picker-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}

.maw-cmp-row {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  margin-bottom: 5px;
}
.maw-cmp-row.is-off { opacity: .58; }
.maw-cmp-row.has-problem { border-color: var(--orange-strong); }

.maw-cmp-row-main {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  min-width: 0;
}
.maw-cmp-row-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-cmp-row-sub { font-size: 10.5px; color: var(--ink-dim); flex: 0 0 auto; }
.maw-cmp-row-meta { font-size: 10.5px; color: var(--ink-dim); flex: 0 0 auto; }
.maw-cmp-row-spacer { flex: 1 1 auto; }

.maw-cmp-row-up,
.maw-cmp-row-down,
.maw-cmp-row-remove {
  border: 1px solid transparent;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.maw-cmp-row-up:hover,
.maw-cmp-row-down:hover { background: var(--panel-hover); color: var(--ink); }
.maw-cmp-row-remove:hover { background: var(--panel-hover); color: var(--orange-strong); }
.maw-cmp-row-up:disabled,
.maw-cmp-row-down:disabled { opacity: .3; cursor: default; }

.maw-cmp-row-frontier {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  flex: 0 0 auto;
}
.maw-cmp-row-frontier.is-copy {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.maw-cmp-row-frontier.is-share {
  background: var(--panel);
  color: var(--ink-dim);
}
.maw-cmp-row-frontier:hover { filter: brightness(1.04); }

/* C-5: the per-row refusal strip. Always visible when present -- a guard
   refusal that only reaches the console is a test failure, not a style. */
.maw-cmp-row-problem {
  border-top: 1px solid var(--line);
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--orange-strong);
  background: rgba(168, 67, 31, 0.06);
  border-radius: 0 0 6px 6px;
}

/* The page-level fallback strip LockedEditFlow.surfaceProblems renders into. */
.maw-probrow {
  border: 1px solid var(--orange-strong);
  background: rgba(168, 67, 31, 0.06);
  color: var(--orange-strong);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 5px;
}
.maw-probrow.is-warn {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--navy);
}

/* ===================================================================== */
/* LockedAncestorsDialogView -- the 4 options                            */
/* ===================================================================== */
.maw-lock4-panel { width: min(560px, 94vw); }

.maw-lock4-body {
  padding: 14px 18px 4px;
  overflow-y: auto;
  min-height: 0;
}

.maw-lock4-ancs {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px;
}
.maw-lock4-anc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  min-width: 0;
}
.maw-lock4-anc + .maw-lock4-anc { border-top: 1px solid var(--line); }
.maw-lock4-anc-name {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-lock4-anc-id { font-size: 10.5px; color: var(--ink-dim); flex: 0 0 auto; }
.maw-lock4-anc-reason { font-size: 11px; color: var(--ink-dim); margin-left: auto; }
.maw-lock4-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--panel-hover);
  color: var(--ink-dim);
  flex: 0 0 auto;
}
.maw-lock4-tag.is-direct { background: var(--indigo-soft); color: var(--navy); }

.maw-lock4-empty,
.maw-lock4-msg {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: 10px;
}

.maw-lock4-srcpick { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.maw-lock4-srclabel {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

.maw-lock4-err {
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid var(--orange-strong);
  border-radius: 6px;
  background: rgba(168, 67, 31, 0.06);
  color: var(--orange-strong);
  font-size: 12px;
  line-height: 1.45;
}

.maw-lock4-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}
.maw-lock4-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 9px 12px;
  height: auto;
  white-space: normal;
}
.maw-lock4-opt-label { font-size: 13px; font-weight: 600; }
.maw-lock4-opt-hint { font-size: 11.5px; font-weight: 400; opacity: .8; line-height: 1.4; }

/* ===================================================================== */
/* EntitySwapPickerView                                                  */
/* ===================================================================== */
.maw-swap-panel { width: min(520px, 94vw); }
.maw-swap-panel .maw-wf-picker-search-wrap { margin: 0 18px; }
.maw-swap-list {
  margin: 10px 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px;
  overflow-y: auto;
  min-height: 0;
  max-height: 46vh;
}
.maw-swap-row { cursor: pointer; align-items: center; gap: 8px; }
.maw-swap-error { margin: 8px 18px 0; }

/* ===================================================================== */
/* Entity-card actions on the System Model detail page (P4)              */
/* ===================================================================== */
.maw-detail-sm-incl-unnest-btn,
.maw-detail-sm-incl-swap-btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}
.maw-detail-sm-incl-unnest-btn:hover { background: var(--panel-hover); color: var(--orange-strong); }
.maw-detail-sm-incl-swap-btn:hover   { background: var(--panel-hover); color: var(--navy); }
.maw-detail-sm-incl-unnest-btn:disabled,
.maw-detail-sm-incl-swap-btn:disabled { opacity: .4; cursor: default; }

/* ===================================================================== */
/* Provenance badge (P3 F-2) -- SM + Assembly detail headers             */
/* ===================================================================== */
.maw-detail-branch-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--navy);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}
.maw-detail-branch-badge .maw-detail-branch-rev {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  opacity: .85;
}

/* Narrow viewports: the three columns stack rather than crush. */
@media (max-width: 1080px) {
  .maw-cmp-body { grid-template-columns: 1fr; }
  .maw-cmp-col-mid,
  .maw-cmp-col-right { border-left: none; border-top: 1px solid var(--line); }
  .maw-cmp-pick-list { max-height: 220px; }
  .maw-cmp-canvas { max-height: 300px; }
}

/* ===================================================================== */
/* NewEntityChooserView (.maw-nec-*) -- the All Items "New" chooser      */
/* (2026-08-20, Rahul). Shares the overlay/panel + wf header/row chrome; */
/* below are only its own refinements.                                   */
/* ===================================================================== */
.maw-nec-panel { width: min(460px, 94vw); }

.maw-nec-list {
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maw-nec-row { cursor: pointer; }

/* The entity color dot (the .maw-cd chip atom is only styled inside
   .maw-chip, so picker rows size their own). */
.maw-nec-row .maw-cd,
.maw-smp-row .maw-cd {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.maw-nec-hint {
  font-size: 11px;
  color: var(--ink-dim);
}

.maw-nec-enter {
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 12px;
  opacity: 0;
  transition: opacity .12s ease;
}
.maw-nec-row:hover .maw-nec-enter { opacity: 1; }

/* ===================================================================== */
/* SystemModelPickerView (.maw-smp-*) -- choose the system model for a   */
/* Simulation / DOE Study submission (2026-08-20, Rahul).                */
/* ===================================================================== */
.maw-smp-panel {
  width: min(860px, 94vw);
  height: min(640px, 86vh);
}

/* Toolbar: search grows, the two menu buttons sit right. */
.maw-smp-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 10px;
}
.maw-smp-search-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }

/* The Filter + Sort controls ARE the home list's (.home-filter / .home-sort
   / .home-menu -- home.css styles them; this root carries maw-shell). Only
   the badge slot inside the picker's filter chip is local. */
.maw-smp-filter-badge-slot { display: contents; }

/* The list: rich two-line rows with a right meta column and a selection
   check. Fills the panel between toolbar and footer. */
.maw-smp-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 2px 14px 10px;
}

.maw-smp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.maw-smp-row:hover { background: var(--panel-hover); }
.maw-smp-row.is-selected {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
}

.maw-smp-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.maw-smp-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.maw-smp-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.maw-smp-row-desc {
  font-size: 11.5px;
  color: var(--ink-mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maw-smp-row-meta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.maw-smp-meta-line { font-size: 11px; color: var(--ink-mut); white-space: nowrap; }
.maw-smp-meta-dim  { color: var(--ink-dim); }

/* Selection check: reserved space so rows do not reflow on select. */
.maw-smp-row-check {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--indigo);
  opacity: 0;
  transition: opacity .12s ease;
}
.maw-smp-row-check svg { width: 18px; height: 18px; }
.maw-smp-row.is-selected .maw-smp-row-check { opacity: 1; }

.maw-smp-count { font-size: 11.5px; color: var(--ink-dim); align-self: center; }


/* ===================================================================== */
/* PeacockSaveConfirmView -- Save back from an embedded Peacock session  */
/* Shares the backdrop/panel chrome above; only its own rows below.      */
/* ===================================================================== */
.maw-pksave-panel { width: min(600px, 94vw); }

.maw-pksave-body {
  padding: 14px 18px 4px;
  overflow-y: auto;
  min-height: 0;
}

.maw-pksave-sec { margin-bottom: 14px; }
.maw-pksave-sec-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.maw-pksave-file,
.maw-pksave-consumer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  padding: 4px 6px;
}
.maw-pksave-consumers,
.maw-pksave-refusals {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 4px;
}

.maw-pksave-slot,
.maw-pksave-cname { font-weight: 600; }
.maw-pksave-owner,
.maw-pksave-cid { color: var(--ink-soft); font-size: 11px; }

.maw-pksave-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.maw-pksave-unchanged,
.maw-pksave-empty {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 4px 6px;
}

.maw-pksave-refusal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}
.maw-pksave-code {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--danger-soft, rgba(190, 60, 40, 0.12));
  color: var(--danger, #a33a26);
}
.maw-pksave-rmsg { font-size: 12px; line-height: 1.5; }
.maw-pksave-hint { font-size: 11px; color: var(--ink-soft); }

.maw-pksave-err {
  border: 1px solid var(--danger, #a33a26);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--danger, #a33a26);
}

.maw-pksave-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
}

/* ================================================================== */
/* Phase 37 C -- the edit-mode NESTING TREE canvas + DnD affordances   */
/* ================================================================== */

.maw-cmp-node {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  margin-bottom: 5px;
  margin-left: calc(var(--cmp-depth, 0) * 18px);
}
.maw-cmp-node.is-root {
  background: var(--panel);
  border-color: var(--indigo);
}
.maw-cmp-node.is-off { opacity: .58; }
.maw-cmp-node.has-problem { border-color: var(--orange-strong); }
.maw-cmp-node.is-inert { background: var(--panel); }
.maw-cmp-node.is-inert .maw-cmp-row-label { color: var(--ink-dim); }
.maw-cmp-node.is-dragging,
.maw-cmp-row.is-dragging,
.maw-cmp-pick-row.is-dragging { opacity: .45; }

.maw-cmp-node-main {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  min-width: 0;
}
.maw-cmp-node[draggable="true"] .maw-cmp-node-main { cursor: grab; }

.maw-cmp-node-grip {
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: -2px;
  flex: 0 0 auto;
  user-select: none;
}

.maw-cmp-node-lock {
  border: 1px solid var(--orange-strong);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--orange-strong);
  flex: 0 0 auto;
  white-space: nowrap;
}
.maw-cmp-node-ro {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  color: var(--ink-dim);
  flex: 0 0 auto;
  white-space: nowrap;
}

.maw-cmp-node-promote,
.maw-cmp-node-remove {
  border: 1px solid transparent;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.4;
  flex: 0 0 auto;
}
.maw-cmp-node-promote:hover { background: var(--panel-hover); color: var(--ink); }
.maw-cmp-node-remove:hover { background: var(--panel-hover); color: var(--orange-strong); }

/* Drop affordances: a 25/50/25 zone split -- edge bars say "between",  */
/* the filled outline says "nest under me".                             */
.maw-cmp-node.is-drop-before,
.maw-cmp-row.is-drop-before { box-shadow: 0 -2px 0 0 var(--indigo); }
.maw-cmp-node.is-drop-after,
.maw-cmp-row.is-drop-after { box-shadow: 0 2px 0 0 var(--indigo); }
.maw-cmp-node.is-drop-into {
  border-color: var(--indigo);
  background: var(--panel-hover);
}
.maw-cmp-canvas.is-drop-append { outline: 2px dashed var(--indigo); outline-offset: -3px; }
.maw-cmp-node.is-nodrop,
.maw-cmp-row.is-nodrop { border-color: var(--orange-strong); }

/* The read-only subtree preview under a picked entity row (create).    */
.maw-cmp-row-preview {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 8px 2px calc(26px + var(--cmp-depth, 1) * 14px);
  font-size: 11.5px;
  color: var(--ink-dim);
}
.maw-cmp-row-preview .maw-cmp-row-label { font-weight: 400; color: var(--ink-dim); }
.maw-cmp-row-preview .maw-cmp-node-lock { padding: 0 6px; font-size: 10px; }

.maw-cmp-pending {
  font-size: 11.5px;
  color: var(--ink-dim);
  align-self: center;
  margin-right: 10px;
}

/* Phase 37 D (astra R1): the whole editing surface freezes while a save or
   its reload is in flight -- a gesture between the compiler's ledger capture
   and the outcome would stage ops on stale truth.                            */
.maw-cmp-root.is-busy .maw-cmp-canvas,
.maw-cmp-root.is-busy .maw-cmp-pick-list,
.maw-cmp-root.is-busy .maw-cmp-left-body {
  pointer-events: none;
  opacity: .65;
}

/* Import Manager is a full-bleed staged app -- drop the shared .maw-page-body
   20px inset (mirrors Home / detail views). */
.maw-shell .maw-page-body:has(> .maw-import-app) { padding: 0; }

.maw-shell .maw-import-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.maw-shell .maw-import-modebar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.maw-shell .maw-import-mode-seg {
  display: inline-flex;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.maw-shell .maw-import-mode-btn {
  border: 0;
  border-right: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 650;
  padding: 6px 12px;
  cursor: pointer;
}
.maw-shell .maw-import-mode-btn:last-child { border-right: 0; }
.maw-shell .maw-import-mode-btn.is-active {
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .maw-import-mode-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-dim);
  font-size: 12px;
}

.maw-shell .maw-import-shell {
  display: grid;
  /* col 1 width is drag-resizable (--maw-import-files-w, set inline by the splitter) */
  grid-template-columns: var(--maw-import-files-w, 264px) 6px minmax(0, 1fr) 280px;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}

/* Files <-> canvas drag splitter (the Files pane draws no right border; the
   splitter carries the divider line + the grab area). */
.maw-shell .maw-import-files { border-right: none; }
.maw-shell .maw-import-splitter {
  cursor: col-resize;
  background: var(--panel);
  border-right: 1px solid var(--line);
  transition: background .12s, border-color .12s;
}
.maw-shell .maw-import-splitter:hover,
.maw-shell .maw-import-shell.is-resizing .maw-import-splitter {
  background: var(--panel-hover);
  border-right-color: var(--indigo-bd);
}
.maw-shell .maw-import-shell.is-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }

.maw-shell .maw-import-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.maw-shell .maw-import-inspector { border-right: none; }
.maw-shell .maw-import-canvas { background: var(--panel-soft); }

/* ---- pane head ---- */
.maw-shell .maw-import-pane-head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.maw-shell .maw-import-pane-head > * { flex-shrink: 0; white-space: nowrap; }
.maw-shell .maw-import-pane-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.maw-shell .maw-import-pane-hint { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }

/* ---- upload button ---- */
.maw-shell .maw-import-upload-btn,
.maw-shell .maw-import-addfiles-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.maw-shell .maw-import-addfiles-btn { margin-left: auto; }   /* pushes the pair to the right */
.maw-shell .maw-import-upload-btn   { margin-left: 6px; }
.maw-shell .maw-import-upload-btn:hover,
.maw-shell .maw-import-addfiles-btn:hover { background: #e4e2fa; }
.maw-shell .maw-import-upload-ic { font-weight: 700; }

/* ---- scroll regions ---- */
.maw-shell .maw-import-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ---- file tree (VS-Code-style: nested, collapsible, indent guides) ---- */
.maw-shell .maw-import-tree { padding: 4px 0 14px; font-size: 12.5px; }
.maw-shell .maw-import-tree-count { font-size: 11px; color: var(--ink-dim); padding: 6px 12px; }
.maw-shell .maw-import-tree-more { font-size: 11px; color: var(--ink-dim); padding: 8px 12px; font-style: italic; }

/* nested children + indent guide line */
.maw-shell .maw-import-children { margin-left: 15px; border-left: 1px solid var(--line); }
.maw-shell .maw-import-dir-node.is-collapsed > .maw-import-children { display: none; }

.maw-shell .maw-import-row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 4px;
  color: var(--ink);
}
.maw-shell .maw-import-row-name { overflow: hidden; text-overflow: ellipsis; }
.maw-shell .maw-import-dir-row { cursor: pointer; color: var(--ink-mut); font-weight: 600; }
.maw-shell .maw-import-dir-row:hover,
.maw-shell .maw-import-file:hover { background: var(--panel-hover); }

/* chevron (twist) -- CSS triangle that rotates with collapsed state */
.maw-shell .maw-import-twist {
  width: 12px; height: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
}
.maw-shell .maw-import-twist::before {
  content: ''; width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .12s;
}
.maw-shell .maw-import-twist-empty::before { border: 0; }
.maw-shell .maw-import-dir-row .maw-import-twist::before { transform: rotate(90deg); }
.maw-shell .maw-import-dir-node.is-collapsed > .maw-import-dir-row .maw-import-twist::before { transform: rotate(0deg); }

/* monochrome folder/file glyphs */
.maw-shell .maw-import-svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-dim); }

/* draggable file rows */
.maw-shell .maw-import-file { cursor: grab; color: var(--ink); }
.maw-shell .maw-import-file:active { cursor: grabbing; }
.maw-shell .maw-import-file.is-grouped { color: var(--ink-mut); }
/* multi-selection (shift/cmd-click); drag any selected row to move them all */
.maw-shell .maw-import-row { -webkit-user-select: none; user-select: none; }
.maw-shell .maw-import-file.is-selected {
  background: var(--indigo-soft);
  box-shadow: inset 0 0 0 1px var(--indigo-bd);
  color: var(--ink);
}
.maw-shell .maw-import-file.is-selected:hover { background: var(--indigo-soft); }

/* legacy diamond glyph -- still used in assembly cards + inspector file lists */
.maw-shell .maw-import-ic { flex: 0 0 auto; color: var(--ink-dim); font-size: 12px; }
.maw-shell .maw-import-ic-file { color: var(--indigo); }

/* ---- empty states ---- */
.maw-shell .maw-import-empty {
  color: var(--ink-dim);
  font-size: 12.5px;
  text-align: center;
}
.maw-shell .maw-import-inspector-body > .maw-import-empty { padding: 24px 18px; line-height: 1.5; }

.maw-shell .maw-import-tree-empty,
.maw-shell .maw-import-canvas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 40px 22px;
}
/* Empty state center-fills the scroll viewport; cards flow top-down (has-cards). */
.maw-shell .maw-import-canvas-empty { min-height: 100%; }
.maw-shell .maw-import-empty-ic { font-size: 30px; color: var(--line-hi); margin-bottom: 4px; }
.maw-shell .maw-import-empty-title { font-size: 14px; font-weight: 650; color: var(--ink-mut); }
.maw-shell .maw-import-empty-sub { font-size: 12.5px; color: var(--ink-dim); max-width: 320px; line-height: 1.5; }

/* Force-hide the native folder input -- a global d3VIEW rule overrides the
   HTML `hidden` attribute, so the OS "Choose Files" control leaks in next to
   our custom Upload-folder button without this. */
.maw-shell .maw-import-folder-input,
.maw-shell .maw-import-files-input { display: none !important; }

/* ============================================================
   Assisted mode
   ============================================================ */
.maw-shell .maw-import-assisted-source {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.maw-shell .maw-import-assisted-choice {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  color: var(--ink-mut);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}
.maw-shell .maw-import-assisted-choice input[type="radio"],
.maw-shell .maw-import-assisted-choice input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  transform: translateY(0);
}
.maw-shell .maw-import-assisted-scan-btn,
.maw-shell .maw-import-assisted-open-btn,
.maw-shell .maw-import-assisted-commit-btn,
.maw-shell .maw-import-simulation-approve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 650;
  padding: 6px 10px;
  cursor: pointer;
}
.maw-shell .maw-import-assisted-scan-btn,
.maw-shell .maw-import-assisted-commit-btn {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-assisted-open-btn:hover { background: var(--panel-hover); }
.maw-shell .maw-import-simulation-approve-btn:hover { background: var(--panel-hover); }
.maw-shell .maw-import-assisted-scan-btn:hover,
.maw-shell .maw-import-assisted-commit-btn:hover { filter: brightness(1.07); }
.maw-shell .maw-import-assisted-file-name {
  color: var(--ink-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-assisted-server-path {
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
}
.maw-shell .maw-import-selected-root-label {
  align-items: stretch;
  flex-direction: column;
}
.maw-shell .maw-import-selected-root {
  width: 100%;
  min-height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--line-hi);
  background: var(--panel-soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/** Added by rahul.suri on 07/26/2026 - the ONE error block every import stage
    renders. Replaces three uneven inline treatments (assisted-error,
    assisted-outlier, and a bare inspector list) so a blocking issue reads the
    same in Analyze, Import, Review and the review detail pane. **/
.maw-shell .maw-import-issues {
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
  line-height: 1.45;
  /* Long issue/warning lists scroll instead of growing the page. */
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.maw-shell .maw-import-issues.is-warning {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
/* The inspector body has no padding of its own, so issue blocks sat flush
   against the pane's left/right/bottom edges (only the top margin showed).
   Inset them here rather than padding the body -- other inspector renderings
   (trees, cards) manage their own edges. */
.maw-shell .maw-import-inspector-body > .maw-import-issues { margin: 10px; }
.maw-shell .maw-import-issues-title {
  font-weight: 750;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.maw-shell .maw-import-issue {
  padding: 3px 0 3px 12px;
  position: relative;
  overflow-wrap: break-word;
  word-break: break-word;
}
.maw-shell .maw-import-issue::before {
  content: '\2022';
  position: absolute;
  left: 2px;
}
.maw-shell .maw-import-issues-more {
  margin-top: 6px;
  padding-left: 12px;
  font-style: italic;
  opacity: 0.85;
}
.maw-shell .maw-import-assisted-proposal {
  padding: 16px;
}
.maw-shell .maw-import-assisted-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.maw-shell .maw-import-assisted-kpi {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 10px;
  color: var(--ink-dim);
  font-size: 11.5px;
}
.maw-shell .maw-import-assisted-kpi-v {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 3px;
}
.maw-shell .maw-import-assisted-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.maw-shell .maw-import-assisted-note {
  color: var(--ink-dim);
  font-size: 12px;
  margin-bottom: 14px;
}
.maw-shell .maw-import-assisted-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.maw-shell .maw-import-assisted-section-title {
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.maw-shell .maw-import-assisted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  gap: 10px;
  color: var(--ink);
  font-size: 12.5px;
}
.maw-shell .maw-import-assisted-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-assisted-row-conf,
.maw-shell .maw-import-assisted-more {
  color: var(--ink-dim);
  font-size: 11.5px;
}
.maw-shell .maw-import-assisted-outlier {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 10px;
  margin: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  scrollbar-width: thin;
}

/* Assisted proposals carry server-signed structure. Keep that authority
   visible while names, selection, previews, and workflow navigation remain
   available to the reviewer. */
.maw-shell .maw-import-authority-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
  margin: 12px 14px 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid var(--indigo-bd);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--ink-mut);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  line-height: 1.4;
}
.maw-shell .maw-import-authority-banner > :not(.maw-import-authority-actions) {
  min-width: 0;
}
.maw-shell .maw-import-authority-banner strong {
  color: var(--ink);
  font-weight: 700;
}
.maw-shell .maw-import-authority-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
}
.maw-shell .maw-import-authority-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.maw-shell .maw-import-authority-actions button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.maw-shell .maw-import-authority-actions .maw-import-authority-return {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-authority-actions button:hover:not(:disabled) {
  border-color: var(--indigo-bd);
  background: var(--panel-hover);
  color: var(--ink);
}
.maw-shell .maw-import-authority-actions .maw-import-authority-return:hover:not(:disabled) {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
  filter: brightness(1.07);
}
.maw-shell .maw-import-authority-actions button:focus-visible,
.maw-shell .is-assisted-structure-locked .maw-import-chip-view:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.maw-shell .maw-import-authority-actions button:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
  cursor: not-allowed;
  opacity: .65;
}

/* Locked structure is subdued, not disabled wholesale: cards can still be
   selected and files can still be previewed. */
.maw-shell .is-assisted-structure-locked .maw-import-asm,
.maw-shell .is-assisted-structure-locked .maw-import-sm,
.maw-shell .is-assisted-structure-locked .maw-import-lc,
.maw-shell .is-assisted-structure-locked .maw-import-sim {
  background-color: var(--panel-soft);
}
.maw-shell .is-assisted-structure-locked .maw-import-asm-file,
.maw-shell .is-assisted-structure-locked .maw-import-sm-asm,
.maw-shell .is-assisted-structure-locked .maw-import-lc-asm,
.maw-shell .is-assisted-structure-locked .maw-import-sim-card-file {
  box-shadow: inset 0 0 0 1px var(--line);
}
.maw-shell .is-assisted-structure-locked .maw-import-file[draggable="false"] {
  cursor: default;
}
.maw-shell .is-assisted-structure-locked .maw-import-asm-chip.is-locked {
  background: var(--panel-soft);
  opacity: .82;
}
.maw-shell .is-assisted-structure-locked .maw-import-chip-view {
  opacity: .72;
}

/* Display names are the deliberate editable exception to the structural
   lock, so they retain a clear input affordance. */
.maw-shell .is-assisted-structure-locked .maw-import-asm-name:not([readonly]),
.maw-shell .is-assisted-structure-locked .maw-import-sm-name:not([readonly]),
.maw-shell .is-assisted-structure-locked .maw-import-lc-name:not([readonly]) {
  border: 1px solid var(--indigo-bd);
  background: var(--panel);
  cursor: text;
}
.maw-shell .is-assisted-structure-locked .maw-import-asm-name:not([readonly]):focus,
.maw-shell .is-assisted-structure-locked .maw-import-sm-name:not([readonly]):focus,
.maw-shell .is-assisted-structure-locked .maw-import-lc-name:not([readonly]):focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}

.maw-shell .is-assisted-structure-locked .maw-import-new-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-newsm-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-importall-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-selsm-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-selmerge-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-seldel-btn:disabled,
.maw-shell .is-assisted-structure-locked .maw-import-skip-btn:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
  cursor: not-allowed;
  filter: none;
  opacity: .55;
}

/* ============================================================
   Slice 2 -- assembly cards (client-side grouping)
   ============================================================ */

/* Flex spacer in the canvas head: right-groups every trailing button. */
.maw-shell .maw-import-head-spacer { margin-left: auto; flex: 1 0 0; min-width: 0; }

/* ---- "New ..." button (canvas pane head; stage-aware label) ---- */
.maw-shell .maw-import-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.maw-shell .maw-import-new-btn:hover {
  background: var(--panel-hover);
  border-color: var(--ink-dim);
  color: var(--ink);
}
.maw-shell .maw-import-new-ic { font-weight: 700; font-size: 13px; }

/* ---- staged workflow primary continue action ---- */
.maw-shell .maw-import-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter .12s, opacity .12s;
}
.maw-shell .maw-import-continue-btn:hover { filter: brightness(1.07); }
.maw-shell .maw-import-continue-btn[disabled] {
  background: var(--panel-hover);
  border-color: var(--line);
  color: var(--ink-dim);
  cursor: not-allowed;
  filter: none;
}
.maw-shell .maw-import-continue-btn.is-busy { opacity: .8; cursor: default; }
.maw-shell .maw-import-continue-ic { font-weight: 700; font-size: 14px; }

/* ---- drag source state ---- */
.maw-shell .maw-import-file.is-dragging { opacity: .45; }
.maw-shell .maw-import-file.is-grouped { color: var(--ink-mut); }
.maw-shell .maw-import-file.is-disabled {
  opacity: .48;
  cursor: default;
}
.maw-shell .maw-import-row-tag {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-left: auto;
  background: transparent;
}

/* ---- drop-target highlights ---- */
.maw-shell .maw-import-canvas-body.is-drop-target {
  outline: 2px dashed var(--indigo-bd);
  outline-offset: -8px;
  background: var(--indigo-soft);
}
.maw-shell .maw-import-asm.is-drop-target,
.maw-shell .maw-import-sm.is-drop-target,
.maw-shell .maw-import-nest-row.is-drop-target,
.maw-shell .maw-import-sim.is-drop-target {
  border-color: var(--indigo);
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--indigo-bd);
  background: var(--indigo-soft);
}

/* ---- canvas card grid ---- */
.maw-shell .maw-import-canvas-body.has-cards { padding: 14px; }
.maw-shell .maw-import-asm-grid {
  display: grid;
  gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
}

/* Compositions alone can contain arbitrarily deep mixed trees. Each root card
   carries a depth-derived basis, so every 18 px rail is paid for by a wider
   card instead of squeezing the deepest row. Other Import Manager grids keep
   their existing fixed-track layout. */
.maw-shell .maw-import-combo-build-body { overflow-x: auto; }
.maw-shell .maw-import-combo-build-body > .maw-import-asm-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.maw-shell .maw-import-combo-build-body > .maw-import-asm-grid > .maw-import-asm,
.maw-shell .maw-import-combo-build-body > .maw-import-asm-grid > .maw-import-sm {
  flex: 0 0 var(--nest-card-min, 260px);
  min-width: var(--nest-card-min, 260px);
}

/* ---- assembly + system-model card ---- */
.maw-shell .maw-import-asm,
.maw-shell .maw-import-sm,
.maw-shell .maw-import-sim {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--asm, var(--t-asm));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 11px 11px;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.maw-shell .maw-import-asm:hover,
.maw-shell .maw-import-sm:hover,
.maw-shell .maw-import-sim:hover { box-shadow: var(--shadow); }
.maw-shell .maw-import-asm.is-selected,
.maw-shell .maw-import-sm.is-selected,
.maw-shell .maw-import-sim.is-selected {
  border-color: var(--asm, var(--t-asm));
  box-shadow: 0 0 0 2px var(--asm, var(--t-asm)), var(--shadow-sm);
}

.maw-shell .maw-import-asm-head { display: flex; align-items: center; gap: 8px; }
.maw-shell .maw-import-asm-dot,
.maw-shell .maw-import-sm-dot {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--asm, var(--t-asm));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.maw-shell .maw-import-asm-name,
.maw-shell .maw-import-sm-name {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  padding: 2px 5px;
  border-radius: 6px;
  transition: background .12s, border-color .12s;
}
.maw-shell .maw-import-asm-name:hover,
.maw-shell .maw-import-sm-name:hover { background: var(--panel-soft); }
.maw-shell .maw-import-asm-name:focus,
.maw-shell .maw-import-sm-name:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--indigo-bd);
}
.maw-shell .maw-import-asm-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-dim);
}
.maw-shell .maw-import-asm-del,
.maw-shell .maw-import-sm-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.maw-shell .maw-import-asm-del:hover,
.maw-shell .maw-import-sm-del:hover { background: var(--red-soft); color: var(--red); }

/* ---- color palette popover ---- */
.maw-shell .maw-import-asm-palette,
.maw-shell .maw-import-sm-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 4px;
  padding: 7px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.maw-shell .maw-import-asm-palette.hidden,
.maw-shell .maw-import-sm-palette.hidden { display: none; }
.maw-shell .maw-import-asm-swatch,
.maw-shell .maw-import-sm-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .1s;
}
.maw-shell .maw-import-asm-swatch:hover,
.maw-shell .maw-import-sm-swatch:hover { transform: scale(1.12); }
.maw-shell .maw-import-asm-swatch[aria-current="true"],
.maw-shell .maw-import-sm-swatch[aria-current="true"] { border-color: var(--ink); }

/* ---- card file list + empty drop hint ---- */
.maw-shell .maw-import-asm-files { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-import-asm-file {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 4px;
  font-size: 12px;
  color: var(--ink);
  border-radius: 5px;
}
.maw-shell .maw-import-asm-file:hover { background: var(--panel-soft); }
.maw-shell .maw-import-asm-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-import-asm-fdel,
.maw-shell .maw-import-nest-fdel {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s, background .12s, color .12s;
}
.maw-shell .maw-import-asm-file:hover .maw-import-asm-fdel,
.maw-shell .maw-import-asm-file:hover .maw-import-nest-fdel { opacity: 1; }
.maw-shell .maw-import-asm-fdel:hover,
.maw-shell .maw-import-nest-fdel:hover { background: var(--red-soft); color: var(--red); }
.maw-shell .maw-import-asm-drop {
  margin-top: 9px;
  padding: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-dim);
  border: 1px dashed var(--line-hi);
  border-radius: 7px;
}

/* ---- inspector card ---- */
.maw-shell .maw-import-insp-summary {
  font-size: 11.5px;
  color: var(--ink-dim);
  padding: 14px 16px 0;
}
.maw-shell .maw-import-insp-card {
  margin: 14px 16px 0;
  padding: 11px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.maw-shell .maw-import-insp-title { display: flex; align-items: center; gap: 8px; }
.maw-shell .maw-import-insp-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.maw-shell .maw-import-insp-name { font-size: 14px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-import-insp-meta { font-size: 11.5px; color: var(--ink-dim); margin-top: 5px; }
.maw-shell .maw-import-insp-fields {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px 16px 2px;
}
.maw-shell .maw-import-insp-field {
  /* Override the classic app's global label { display:block !important; }. */
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-mut);
}
.maw-shell .maw-import-insp-field input,
.maw-shell .maw-import-insp-field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  padding: 7px 9px;
  outline: none;
}
.maw-shell .maw-import-insp-field textarea { resize: vertical; min-height: 64px; }
.maw-shell .maw-import-insp-field input:focus,
.maw-shell .maw-import-insp-field textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-shell .maw-import-insp-field input[readonly],
.maw-shell .maw-import-insp-field textarea[readonly] {
  background: var(--panel-soft);
  color: var(--ink-dim);
}
.maw-shell .maw-import-insp-field small { font-size: 10.5px; font-weight: 400; color: var(--ink-dim); }
.maw-shell .maw-import-insp-section {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
  padding: 16px 16px 6px;
}
.maw-shell .maw-import-insp-file {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 16px;
  font-size: 12.5px;
  color: var(--ink);
}

/* ============================================================
   Slice 3 -- persist (Create assembly) + topbar Import button
   ============================================================ */

/* ---- topbar "Import" button (right of the search bar) ---- */
.maw-shell .maw-import-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
  color: var(--indigo);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.maw-shell .maw-import-open:hover { background: #e4e2fa; border-color: var(--indigo); }
.maw-shell .maw-import-open svg { width: 16px; height: 16px; flex: none; }
.maw-shell .maw-import-open-label { line-height: 1; }

/* ---- card footer + Create button (assembly + system model) ---- */
.maw-shell .maw-import-asm-foot { margin-top: 11px; }
.maw-shell .maw-import-asm-create,
.maw-shell .maw-import-sm-create {
  width: 100%;
  height: 32px;
  border: 1px solid var(--asm, var(--t-asm));
  background: var(--asm, var(--t-asm));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: filter .12s, opacity .12s;
}
.maw-shell .maw-import-asm-create:hover,
.maw-shell .maw-import-sm-create:hover { filter: brightness(1.06); }
.maw-shell .maw-import-asm-create[disabled],
.maw-shell .maw-import-sm-create[disabled] {
  background: var(--panel-hover);
  border-color: var(--line);
  color: var(--ink-dim);
  cursor: not-allowed;
  filter: none;
}
.maw-shell .maw-import-asm-create.is-busy,
.maw-shell .maw-import-sm-create.is-busy { opacity: .9; cursor: default; }

.maw-shell .maw-import-asm-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-hi);
  border-top-color: var(--ink-mut);
  display: inline-block;
  animation: maw-import-spin .7s linear infinite;
}
@keyframes maw-import-spin { to { transform: rotate(360deg); } }

/* footer "Creating..." state during final Review commit */
.maw-shell .maw-import-asm-creating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mut);
}

.maw-shell .maw-import-asm-err {
  font-size: 11.5px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ---- saved (persisted) state ---- */
.maw-shell .maw-import-asm.is-saved,
.maw-shell .maw-import-sm.is-saved { background: var(--green-soft); }
.maw-shell .maw-import-asm.is-busy,
.maw-shell .maw-import-sm.is-busy { opacity: .85; }
.maw-shell .maw-import-asm-dot-static {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--asm, var(--t-asm));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.maw-shell .maw-import-asm-name[readonly],
.maw-shell .maw-import-sm-name[readonly] { background: transparent; cursor: default; }
.maw-shell .maw-import-asm-name[readonly]:hover,
.maw-shell .maw-import-sm-name[readonly]:hover { background: transparent; }
.maw-shell .maw-import-asm-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}

/* Post-create parameter-surfacing badge (Phase 09 import finalization) */
.maw-shell .maw-import-sm-params {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
}
.maw-shell .maw-import-sm-params.is-done { color: var(--green); }
.maw-shell .maw-import-sm-params.is-warn { color: var(--amber, #b8860b); }

/* ============================================================
   Slice 4 -- stages (stepper) + System Models stage
   ============================================================ */

/* ---- stage stepper ---- */
.maw-shell .maw-import-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 46px;
  padding: 8px 16px;
  box-sizing: border-box;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-import-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-shell .maw-import-stage:hover:not(.is-upcoming):not(.is-active) { background: var(--panel-soft); color: var(--ink); }
.maw-shell .maw-import-stage.is-active {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
  color: var(--indigo);
}
.maw-shell .maw-import-stage.is-upcoming { color: var(--ink-dim); cursor: default; opacity: .7; }
.maw-shell .maw-import-stage-n {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--line-hi);
  color: #fff;
}
.maw-shell .maw-import-stage.is-active .maw-import-stage-n { background: var(--indigo); }
.maw-shell .maw-import-stage.is-upcoming .maw-import-stage-n { background: var(--line-hi); }
.maw-shell .maw-import-stage-conn { width: 20px; height: 1px; background: var(--line-hi); flex: 0 0 auto; }

/* ---- assembly palette (stage-2 left source) ---- */
.maw-shell .maw-import-palette { padding: 6px 10px 14px; }
.maw-shell .maw-import-asm-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--asm, var(--t-asm));
  border-radius: 8px;
  background: var(--panel-soft);
  cursor: grab;
  font-size: 12.5px;
  transition: background .12s, box-shadow .12s;
}
.maw-shell .maw-import-asm-chip:hover { background: var(--panel-hover); box-shadow: var(--shadow-sm); }
.maw-shell .maw-import-asm-chip:active { cursor: grabbing; }
.maw-shell .maw-import-asm-chip.is-dragging { opacity: .45; }
.maw-shell .maw-import-asm-chip.is-selected {
  background: var(--indigo-soft);
  box-shadow: 0 0 0 2px var(--indigo-bd) inset;
}
.maw-shell .maw-import-asm-chip.is-locked { cursor: not-allowed; opacity: .6; background: transparent; }
.maw-shell .maw-import-chip-dot {
  width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  background: var(--asm, var(--t-asm));
}
.maw-shell .maw-import-chip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.maw-shell .maw-import-chip-meta { flex: 0 0 auto; font-size: 11px; color: var(--ink-dim); }
.maw-shell .maw-import-chip-view {
  flex: 0 0 auto; border: none; background: transparent; color: var(--ink-dim);
  font-size: 12px; line-height: 1; width: 18px; height: 18px; border-radius: 4px;
  cursor: pointer; opacity: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .1s, background .12s, color .12s;
}
.maw-shell .maw-import-asm-chip:hover .maw-import-chip-view { opacity: .7; }
.maw-shell .maw-import-chip-view:hover { opacity: 1 !important; background: var(--indigo-soft, #eeeffe); color: var(--indigo, #5b5ef4); }
.maw-shell .maw-import-chip-used {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--indigo);
  background: var(--indigo-soft); border-radius: 10px; padding: 1px 6px;
}
.maw-shell .maw-import-chip-lock { flex: 0 0 auto; color: var(--orange); font-size: 12px; }

/* ---- system-model member chips (assemblies inside an SM card) ---- */
.maw-shell .maw-import-sm-asms { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.maw-shell .maw-import-sm-asm {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--asm, var(--t-asm));
  border-radius: 7px;
  background: var(--panel-soft);
  font-size: 12px;
}
.maw-shell .maw-import-sm-asm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.maw-shell .maw-import-sm-asm-meta { flex: 0 0 auto; font-size: 10.5px; color: var(--ink-dim); }
/* Nested member: its file is *INCLUDEd by another assembly's file, so the
   generated main does not include it directly -- the chip says who does. */
.maw-shell .maw-import-sm-asm.is-nested .maw-import-sm-asm-name { color: var(--ink-dim); }
.maw-shell .maw-import-nest {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 9px;
  min-width: 0;
}
.maw-shell .maw-import-nest-branch {
  position: relative;
  min-width: 0;
  padding-left: 18px;
}
.maw-shell .maw-import-nest-branch::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-hi);
}
.maw-shell .maw-import-nest-depth {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 9px;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-dim);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.maw-shell .maw-import-nest-children {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 3px;
}
.maw-shell .maw-import-nest-branch.is-closed > .maw-import-nest-children { display: none; }
.maw-shell .maw-import-nest-row {
  position: relative;
  min-width: 0;
  margin-left: 0;
}
.maw-shell button.maw-import-nest-twisty {
  flex: 0 0 auto;
  width: 12px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  appearance: none;
}
.maw-shell button.maw-import-nest-twisty:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-radius: 3px;
}
.maw-shell .maw-import-nest-row.is-hover-opening::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--indigo);
  transform: scaleX(0);
  transform-origin: left center;
  animation: maw-import-hover-open 900ms linear forwards;
  pointer-events: none;
}
@keyframes maw-import-hover-open {
  to { transform: scaleX(1); }
}
.maw-shell .maw-import-nest-file {
  min-width: 0;
  margin-left: 0;
}
.maw-shell .maw-import-nest-kind {
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-dim);
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .045em;
  line-height: 1.35;
}
.maw-shell .maw-import-nest-kind.is-systemmodel {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .maw-import-sm-asm-incby {
  flex: 0 0 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; color: var(--ink-dim);
  border: 1px solid var(--line, rgba(127,127,127,.35)); border-radius: 8px;
  padding: 0 6px; line-height: 15px;
}
.maw-shell .maw-import-sm-adel {
  flex: 0 0 auto; border: none; background: transparent; color: var(--ink-dim);
  font-size: 14px; line-height: 1; width: 18px; height: 18px; border-radius: 4px;
  cursor: pointer; opacity: 0; transition: opacity .1s, background .12s, color .12s;
}
.maw-shell .maw-import-sm-asm:hover .maw-import-sm-adel { opacity: 1; }
.maw-shell .maw-import-sm-adel:focus-visible { opacity: 1; outline: 2px solid var(--indigo); }
.maw-shell .maw-import-sm-adel:hover { background: var(--red-soft); color: var(--red); }

/* ============================================================
   Review stage browser
   ============================================================ */
.maw-shell .maw-import-review { padding: 18px; max-width: 720px; }
.maw-shell .maw-import-review-browser {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.maw-shell .maw-import-review-search {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  font-size: 12px;
}
.maw-shell .maw-import-review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.maw-shell .maw-import-review-filter {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-mut);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.maw-shell .maw-import-review-filter.is-active {
  border-color: var(--indigo);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .maw-import-review-filter span { color: var(--ink-dim); margin-left: 3px; }
.maw-shell .maw-import-review-group-title {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-mut);
  padding: 8px 2px 5px;
}
.maw-shell .maw-import-review-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 8px 9px;
  margin-bottom: 6px;
  cursor: pointer;
}
.maw-shell .maw-import-review-row.is-selected {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px var(--indigo-bd);
}
.maw-shell .maw-import-review-row.has-issues { border-color: rgba(176, 76, 76, .45); }
.maw-shell .maw-import-review-row-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.maw-shell .maw-import-review-row-meta {
  grid-column: 1 / 2;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-import-review-row-badge {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}
.maw-shell .maw-import-review-detail {
  max-width: 860px;
  padding: 18px;
}
.maw-shell .maw-import-simulation-review {
  max-width: 860px;
  margin: 18px 18px 0;
  padding: 16px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-simulation-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.maw-shell .maw-import-simulation-review-head > div { min-width: 0; }
.maw-shell .maw-import-simulation-review-head span:first-child {
  display: block;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.maw-shell .maw-import-simulation-review-head strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 16px;
}
.maw-shell .maw-import-simulation-review-state {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 750;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.maw-shell .maw-import-simulation-review-state.is-approved {
  border: 1px solid var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .maw-import-simulation-review-state.is-needs-review,
.maw-shell .maw-import-review-ready.is-pending {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .maw-import-simulation-review-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.maw-shell .maw-import-simulation-review-hash {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-import-simulation-review-hash code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 10.5px;
}
.maw-shell .maw-import-simulation-review-note {
  margin-top: 12px;
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 1.45;
}
.maw-shell .maw-import-projection-preview { margin-top: 14px; }
.maw-shell .maw-import-projection-row {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(150px, 1.2fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.maw-shell .maw-import-projection-row span,
.maw-shell .maw-import-projection-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-projection-row em {
  color: var(--ink-mut);
  font-style: normal;
}
.maw-shell .maw-import-projection-row small { color: var(--ink-dim); }
.maw-shell .maw-import-simulation-review-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.maw-shell .maw-import-simulation-review-actions button { width: 100%; }
.maw-shell .maw-import-simulation-review-actions > div {
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.4;
}
.maw-shell .maw-import-decomposition-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-import-decomposition-panel.is-transformed {
  border-color: var(--green);
  background: var(--green-soft);
}
.maw-shell .maw-import-decomposition-panel.is-unsupported {
  border-color: var(--line);
  background: var(--panel-muted, var(--panel));
}
.maw-shell .maw-import-decomposition-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.maw-shell .maw-import-decomposition-choice-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  cursor: pointer;
}
.maw-shell .maw-import-decomposition-choice-row input { margin-top: 2px; }
.maw-shell .maw-import-decomposition-choice-row span,
.maw-shell .maw-import-decomposition-choice-row small { display: block; }
.maw-shell .maw-import-decomposition-choice-row strong {
  color: var(--ink);
  font-size: 12px;
}
.maw-shell .maw-import-decomposition-choice-row small {
  margin-top: 2px;
  color: var(--ink-mut);
  font-size: 10.5px;
}
.maw-shell .maw-import-decomposition-build-btn {
  width: 100%;
  border: 1px solid var(--indigo);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: var(--indigo);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.maw-shell .maw-import-decomposition-build-btn:disabled {
  opacity: .45;
  cursor: default;
}
.maw-shell .maw-import-decomposition-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 11px;
}
.maw-shell .maw-import-decomposition-row em {
  color: var(--ink-mut);
  font-style: normal;
}
.maw-shell .maw-import-decomposition-row small { color: var(--ink-dim); }
.maw-shell .maw-import-review-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-import-review-detail-type {
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.maw-shell .maw-import-review-detail-title {
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
}
.maw-shell .maw-import-review-detail-title span { color: var(--ink-dim); font-size: 12px; }
.maw-shell .maw-import-review-detail-meta {
  margin-top: 8px;
  color: var(--ink-mut);
  font-size: 12px;
}
.maw-shell .maw-import-review-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  margin-bottom: 6px;
}
.maw-shell .maw-import-review-file span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12px;
}
.maw-shell .maw-import-review-file em {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: 11px;
  font-style: normal;
}
.maw-shell .maw-import-review-summary {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 8px;
}
.maw-shell .maw-import-review-ready {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
}
.maw-shell .maw-import-review-warning {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 12px 0;
  padding: 9px 10px;
  border: 1px solid #e4c66f;
  border-radius: var(--radius-sm);
  background: #fff8df;
  color: #6e5718;
  font-size: 11px;
  line-height: 1.4;
}
.maw-shell .maw-import-review-warning strong { font-size: 11.5px; }
.maw-shell .maw-import-review-commit-wrap {
  margin-top: auto;
  padding-top: 12px;
}
.maw-shell .maw-import-review-commit-wrap .maw-import-assisted-commit-btn {
  width: 100%;
  justify-content: center;
}
.maw-shell .maw-import-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.maw-shell .maw-import-review-check {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 15px; font-weight: 700;
}
.maw-shell .maw-import-review-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.maw-shell .maw-import-review-sub { font-size: 12.5px; color: var(--ink-mut); margin-top: 2px; }
.maw-shell .maw-import-review-section {
  font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mut); padding: 18px 2px 8px;
}
.maw-shell .maw-import-review-sm {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-bottom: 7px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.maw-shell .maw-import-review-sm-name { font-size: 13px; font-weight: 650; color: var(--ink); flex: 0 0 auto; }
.maw-shell .maw-import-review-id { font-size: 11px; font-weight: 600; color: var(--ink-dim); }
.maw-shell .maw-import-review-sm-asms { font-size: 12px; color: var(--ink-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-import-review-note {
  margin-top: 14px; padding: 11px 13px;
  font-size: 12.5px; color: var(--ink-mut); line-height: 1.5;
  background: var(--indigo-soft); border: 1px solid var(--indigo-bd); border-radius: var(--radius-sm);
}

/* ============================================================
   Files dropzone + blocking progress modal
   ============================================================ */

/* dropzone highlight when dragging OS files over the Files pane */
.maw-shell .maw-import-files.is-files-drop {
  outline: 2px dashed var(--indigo-bd);
  outline-offset: -6px;
  background: var(--indigo-soft);
}
.maw-shell .maw-import-dropzone { cursor: default; }
.maw-shell .maw-import-dropzone-browse {
  border: none;
  background: none;
  color: var(--indigo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* blocking progress modal -- dims + disables the whole surface during creation */
.maw-shell .maw-import-progress {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maw-shell .maw-import-progress-backdrop { position: absolute; inset: 0; background: rgba(28,24,18,.55); }
.maw-shell .maw-import-progress-panel {
  position: relative;
  width: min(340px, 88vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.maw-shell .maw-import-progress-layered .maw-import-progress-panel { width: min(520px, 92vw); }
.maw-shell .maw-import-progress-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.maw-shell .maw-import-progress-title { font-size: 14px; font-weight: 650; color: var(--ink); }
.maw-shell .maw-import-progress-spinner {
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--indigo-bd);
  border-top-color: var(--indigo);
  display: inline-block;
  animation: maw-import-spin .7s linear infinite;
}
.maw-shell .maw-import-progress-bar { height: 8px; border-radius: 6px; background: var(--panel-hover); overflow: hidden; }
.maw-shell .maw-import-progress-fill {
  height: 100%;
  border-radius: 6px;
  background-color: var(--indigo);
  /* moving barber-pole stripe so the filled portion stays visibly active */
  background-image: linear-gradient(135deg,
    rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%);
  background-size: 16px 16px;
  transition: width .2s ease;
  animation: maw-import-stripe .6s linear infinite;
}
@keyframes maw-import-stripe { from { background-position: 0 0; } to { background-position: 16px 0; } }
.maw-shell .maw-import-progress-count { margin-top: 9px; font-size: 12px; color: var(--ink-mut); text-align: right; }
.maw-shell .maw-import-progress-layers { display: flex; flex-direction: column; gap: 12px; }
.maw-shell .maw-import-progress-layer {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-progress-layer-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.maw-shell .maw-import-progress-layer-label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}
.maw-shell .maw-import-progress-layer-status {
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 700;
}
.maw-shell .maw-import-progress-layer.is-complete .maw-import-progress-fill { animation: none; background-image: none; background-color: var(--green); }
.maw-shell .maw-import-progress-layer.is-error .maw-import-progress-fill { animation: none; background-image: none; background-color: var(--red); }
.maw-shell .maw-import-progress-layer.is-error .maw-import-progress-layer-status { color: var(--red); }

/* ---- responsive (placed last so it wins source-order over .maw-import-pane) ----
   Narrow workspace: drop the (empty in slice 1) inspector so the file tree + the
   build canvas keep usable width. The inspector returns as a collapsible drawer
   in a later slice, once entity selection exists. */
@media (max-width: 1180px) {
  .maw-shell .maw-import-shell { grid-template-columns: 248px minmax(0, 1fr); }
  .maw-shell .maw-import-inspector { display: none; }
}

/* ================================================================
   STAGE 2 -- Loadcase cards (.maw-import-lc)
   Mirror of .maw-import-sm cards; uses --asm CSS var for accent.
   ================================================================ */
.maw-shell .maw-import-lc {
  border: 1px solid var(--border);
  border-radius: var(--d3v-r-md, 8px);
  background: var(--panel);
  /* Match the assembly / system-model card box model: uniform card padding
     with the head inset, body using margin-top (was a full-bleed sectioned
     card with the head flush to the edge). */
  padding: 10px 11px 11px;
  cursor: default;
  transition: box-shadow .15s, border-color .15s;
}
.maw-shell .maw-import-lc:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.maw-shell .maw-import-lc.is-selected {
  border-color: var(--asm, var(--indigo));
  box-shadow: 0 0 0 2px var(--asm, var(--indigo));
}
.maw-shell .maw-import-lc.is-saved { background: var(--green-soft, #f0faf0); }
.maw-shell .maw-import-lc.is-busy  { opacity: .7; pointer-events: none; }
.maw-shell .maw-import-lc.is-drop-target { border-color: var(--asm, var(--indigo)); }

/* Loadcase inner: assembly member chips */
.maw-shell .maw-import-lc-asms { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.maw-shell .maw-import-lc-asm {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  border-radius: var(--d3v-r-sm, 5px);
  background: rgba(0,0,0,.03);
  font-size: 12px;
}
.maw-shell .maw-import-lc-asm .maw-import-chip-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--asm, var(--ink-dim));
}
.maw-shell .maw-import-lc-asm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-import-lc-asm-meta { font-size: 11px; color: var(--ink-mut); flex: 0 0 auto; }
.maw-shell .maw-import-lc-adel {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--ink-mut); font-size: 14px; line-height: 1; padding: 0 2px;
}
.maw-shell .maw-import-lc-adel:hover { color: var(--danger, #c0392b); }

/* Loadcase card controls */
.maw-shell .maw-import-lc-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; cursor: pointer;
  border: 2px solid var(--border); background: var(--asm, var(--ink-dim));
  padding: 0; appearance: none;
}
.maw-shell .maw-import-lc-name {
  flex: 1; min-width: 0; border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .maw-import-lc-name:focus { outline: none; }
.maw-shell .maw-import-lc-del {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--ink-mut); font-size: 16px; line-height: 1; padding: 0 4px;
}
.maw-shell .maw-import-lc-del:hover { color: var(--danger, #c0392b); }

/* Loadcase color palette */
.maw-shell .maw-import-lc-palette {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 9px 0 4px; padding: 7px;
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: 7px;
}
.maw-shell .maw-import-lc-palette.hidden { display: none; }
.maw-shell .maw-import-lc-swatch {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent;
  padding: 0; cursor: pointer; appearance: none;
}
.maw-shell .maw-import-lc-swatch[aria-current="true"] { border-color: var(--ink); }

/* ================================================================
   STAGE 3 -- Loadcase config read-only cards (.maw-import-lcc)
   ================================================================ */
.maw-shell .maw-import-lcc {
  border: 1px solid var(--border);
  border-radius: var(--d3v-r-md, 8px);
  background: var(--panel);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.maw-shell .maw-import-lcc:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.maw-shell .maw-import-lcc.is-selected {
  border-color: var(--asm, var(--indigo));
  box-shadow: 0 0 0 2px var(--asm, var(--indigo));
}
.maw-shell .maw-import-lcc.is-configured { background: var(--green-soft, #f0faf0); }
.maw-shell .maw-import-lcc-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.maw-shell .maw-import-lcc-cfg-ic {
  font-size: 13px; color: var(--green, #27ae60); margin-left: 6px; flex: 0 0 auto;
}

/* ================================================================
   Q2a -- file sizes in tree rows + card file lists
   ================================================================ */

/* ensure the row name can shrink so size/view remain visible */
.maw-shell .maw-import-row-name { flex: 1 1 auto; min-width: 0; }

/* size label (tree rows + card file lists) */
.maw-shell .maw-import-file-size {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--ink-dim);
  white-space: nowrap;
  padding: 0 2px;
}

/* view-file eye button (appears on row hover) */
.maw-shell .maw-import-file-view {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s, background .12s, color .12s;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.maw-shell .maw-import-file:hover .maw-import-file-view { opacity: .7; }
.maw-shell .maw-import-file-view:hover { opacity: 1 !important; background: var(--indigo-soft, #eeeffe); color: var(--indigo, #5b5ef4); }

/* ================================================================
   Q2b -- FileViewer modal overlay
   ================================================================ */

.maw-fv-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maw-fv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.maw-fv-panel {
  position: relative;
  width: min(840px, 92vw);
  height: min(620px, 85vh);
  display: flex;
  flex-direction: column;
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e0e0e0);
  border-radius: var(--radius, 8px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.maw-fv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--line, #e0e0e0);
  background: var(--panel, #fff);
}
.maw-fv-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-fv-meta {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-dim, #888);
}
.maw-fv-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-mut, #666);
  font-size: 18px;
  line-height: 1;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.maw-fv-close:hover { background: var(--red-soft, #fee); color: var(--red, #c0392b); }
.maw-fv-banner {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--ink-mut, #666);
  background: var(--indigo-soft, #eeeffe);
  border-bottom: 1px solid var(--indigo-bd, #c7c4fa);
}

/* Multi-file tab strip (shown only when previewing an assembly with >1 file) */
.maw-fv-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line, #e0e0e0);
  background: var(--panel-soft, #f7f7f9);
}
.maw-fv-tab {
  flex: 0 0 auto;
  max-width: 220px;
  border: 1px solid var(--line, #e0e0e0);
  background: var(--panel, #fff);
  color: var(--ink-mut, #666);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.maw-fv-tab:hover { background: var(--panel-hover, #eee); color: var(--ink, #1a1a1a); }
.maw-fv-tab.is-active {
  background: var(--indigo-soft, #eeeffe);
  border-color: var(--indigo-bd, #c7c4fa);
  color: var(--indigo, #4f46e5);
}
.maw-fv-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 14px;
  background: var(--panel-soft, #fafafa);
}
.maw-fv-pre {
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink, #1a1a1a);
  white-space: pre;
  tab-size: 4;
}

/* ================================================================
   Q4 -- lcconfig 3-pane layout: needs list (left) + ready list (right)
   ================================================================ */

/* needs list and ready list containers */
.maw-shell .maw-import-lcc-needs,
.maw-shell .maw-import-lcc-ready { padding: 4px 0 14px; }

/* clickable loadcase rows in both lists */
.maw-shell .maw-import-lcc-need-row,
.maw-shell .maw-import-lcc-ready-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-left: 3px solid var(--asm, var(--indigo, #5b5ef4));
  margin: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s;
}
.maw-shell .maw-import-lcc-need-row:hover,
.maw-shell .maw-import-lcc-ready-row:hover { background: var(--panel-hover, rgba(0,0,0,.04)); }
.maw-shell .maw-import-lcc-need-row.is-selected,
.maw-shell .maw-import-lcc-ready-row.is-selected {
  background: var(--indigo-soft, #eeeffe);
}
.maw-shell .maw-import-lcc-need-name,
.maw-shell .maw-import-lcc-ready-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 12.5px;
}
/* checkmark icon on ready rows */
.maw-shell .maw-import-lcc-ready-row .maw-import-lcc-cfg-ic {
  flex: 0 0 auto;
  color: var(--green, #27ae60);
  font-size: 11px;
}

/* Form wrapper in the center canvas during lcconfig stage -- centered so the
   columns sit in the middle of the canvas rather than hugging the left edge. */
.maw-shell .maw-import-lcc-canvas-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 18px;
}

/* Skip button (loadcase-forming + configure stages; sits left of Continue). */
.maw-shell .maw-import-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.maw-shell .maw-import-skip-btn:hover {
  background: var(--panel-hover);
  border-color: var(--ink-dim);
  color: var(--ink);
}

/* =====================================================================
   Phase 25 refinements -- import-all / bulk-select (delete + merge) /
   rubber-band marquee. All scoped under .maw-shell.
   ===================================================================== */

/* Secondary toolbar buttons share the neutral "New Assembly" look.
   .maw-import-asmtags-clear was shipped with NO rule at all (2026-08-21) and
   rendered as a bare UA button next to these -- it belongs to this group. */
.maw-shell .maw-import-importall-btn,
.maw-shell .maw-import-selmerge-btn,
.maw-shell .maw-import-asmtags-clear,
.maw-shell .maw-import-seldel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.maw-shell .maw-import-importall-btn:hover,
.maw-shell .maw-import-asmtags-clear:hover,
.maw-shell .maw-import-selmerge-btn:hover {
  background: var(--panel-hover);
  border-color: var(--ink-dim);
  color: var(--ink);
}
.maw-shell .maw-import-importall-ic,
.maw-shell .maw-import-selmerge-ic,
.maw-shell .maw-import-asmtags-clear-ic,
.maw-shell .maw-import-seldel-ic { font-weight: 700; font-size: 13px; }
/* jQuery .toggle() writes an inline display (observed: block) on this button,
   which outranks the group's inline-flex -- so the icon/label spacing cannot
   come from `gap` here. The markup carries a literal space between the two
   spans; this keeps them on one line whichever display wins. */
.maw-shell .maw-import-asmtags-clear { white-space: nowrap; }
.maw-shell .maw-import-asmtags-clear-label { line-height: 1; }

/* CS-574 / R2026-63: the assembly tag composer on the stage toolbar. It hosts
   the shared maw-wf-tags chip editor, compacted to sit inline with the buttons
   (the create-view default is a full-width form control). */
/* Says which assemblies the chips are about to affect -- the same box means
   "tags for new assemblies" or "tagging the 3 selected" depending on selection. */
.maw-shell .maw-import-asmtags-scope {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-mut);
  white-space: nowrap;
  align-self: center;
}
.maw-shell .maw-import-asmtags {
  min-width: 220px;
  max-width: 340px;
}
.maw-shell .maw-import-asmtags .maw-wf-tags { padding: 3px 5px; }
.maw-shell .maw-import-asmtags .maw-wf-tags-chips { gap: 4px; }
/* No margin-bottom on a non-empty chip row: chips and the entry share ONE line
   now, so any vertical margin here re-introduces the height jump on first tag. */
.maw-shell .maw-import-asmtags .maw-wf-tag { font-size: 11px; padding: 2px 3px 2px 8px; }
.maw-shell .maw-import-asmtags .maw-wf-tags-input { font-size: 12px; padding: 2px 3px; min-width: 70px; }
.maw-shell .maw-import-asmtags .maw-wf-tags-add { width: 22px; height: 22px; font-size: 14px; }

/* Tags stamped on an assembly card, so a mixed import is readable at a glance. */
.maw-shell .maw-import-asm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
}
.maw-shell .maw-import-asm-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px 2px 8px;
  border-radius: 10px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 100%;
}
.maw-shell .maw-import-asm-tag-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-asm-tag-x {
  flex: none;
  border: none;
  background: transparent;
  color: var(--indigo);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: .65;
  transition: opacity .1s, background .1s;
}
.maw-shell .maw-import-asm-tag-x:hover { opacity: 1; background: rgba(79, 70, 229, 0.18); }
/* Saved cards render their tags read-only -- no x, and muted to match. */
.maw-shell .maw-import-asm.is-saved .maw-import-asm-tag {
  background: var(--chip, rgba(127, 127, 127, 0.14));
  color: var(--ink-mut);
}

/* Delete-selected reads as a danger action. */
.maw-shell .maw-import-seldel-btn {
  border-color: var(--red);
  color: var(--red);
  background: var(--panel);
}
.maw-shell .maw-import-seldel-btn:hover {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

/* Rubber-band marquee drawn inside the (scrolling) canvas body. */
.maw-shell .maw-import-canvas-body { position: relative; }
.maw-shell .maw-import-marquee {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  border: 1px solid var(--indigo);
  background: var(--indigo-soft);
  opacity: .55;
  border-radius: 2px;
}

/* =====================================================================
   Assisted Import v1.2 -- unified Import stage + historical simulations.
   ===================================================================== */
.maw-shell .maw-import-source-panel,
.maw-shell .maw-import-start,
.maw-shell .maw-import-server-browser {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.maw-shell .maw-import-source-panel { padding: 10px; }

/* Import source selector: one compact control for the three mutually exclusive
   intake paths. The active inset bar keeps the selected source legible without
   adding another card treatment to the narrow Files pane. */
.maw-shell .maw-import-source-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode {
  position: relative;
  min-width: 0;
  min-height: 40px;
  padding: 6px 5px 8px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--ink-mut);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode:hover:not(:disabled) {
  border-color: var(--line-hi);
  background: var(--panel);
  color: var(--ink);
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode.is-active {
  border-color: var(--indigo-bd);
  background: var(--panel);
  color: var(--indigo);
  box-shadow: inset 0 -3px 0 var(--indigo), var(--shadow-sm);
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode:focus-visible {
  z-index: 1;
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode:disabled {
  opacity: .45;
  color: var(--ink-dim);
  cursor: not-allowed;
  box-shadow: none;
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode > strong,
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode > span {
  display: block;
}
.maw-shell .maw-import-source-switcher > button.maw-import-source-mode > span {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 500;
  opacity: .72;
}
.maw-shell .maw-import-source-section[hidden] { display: none !important; }

.maw-shell .maw-import-source-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}
.maw-shell .maw-import-source-section.is-active {
  border-color: rgba(156, 148, 128, .46);
  background: linear-gradient(180deg, rgba(156, 148, 128, .12), var(--panel) 72%);
}
.maw-shell .maw-import-source-section.is-disabled {
  opacity: .56;
  background: var(--panel-muted, var(--panel));
}
.maw-shell .maw-import-source-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.maw-shell .maw-import-source-note {
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.35;
}
.maw-shell .maw-import-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
}
.maw-shell .maw-import-source-actions .maw-import-addfiles-btn,
.maw-shell .maw-import-source-actions .maw-import-upload-btn {
  flex: 0 0 auto;
  margin-left: 0;
}
.maw-shell .maw-import-source-section button,
.maw-shell button.maw-import-go-analyze-btn,
.maw-shell button.maw-import-assisted-scan-btn,
.maw-shell button.maw-import-assisted-commit-btn {
  border: 1px solid #9c9480;
  background: #9c9480;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease, transform .14s ease;
}
.maw-shell .maw-import-source-section button:hover {
  border-color: #8d856f;
  background: #8d856f;
}
.maw-shell .maw-import-source-section button:active { transform: translateY(1px); }
.maw-shell .maw-import-source-section button:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}
.maw-shell .maw-import-source-section button.maw-import-assisted-scan-btn,
.maw-shell button.maw-import-go-analyze-btn,
.maw-shell button.maw-import-assisted-scan-btn,
.maw-shell button.maw-import-assisted-commit-btn {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-source-section button.maw-import-assisted-scan-btn:hover,
.maw-shell button.maw-import-go-analyze-btn:hover,
.maw-shell button.maw-import-assisted-scan-btn:hover,
.maw-shell button.maw-import-assisted-commit-btn:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  filter: brightness(1.07);
}
.maw-shell .maw-import-source-section button:disabled:hover {
  background: #9c9480;
  filter: none;
}
.maw-shell .maw-import-source-section button.maw-import-assisted-scan-btn:disabled:hover,
.maw-shell button.maw-import-go-analyze-btn:disabled:hover,
.maw-shell button.maw-import-assisted-scan-btn:disabled:hover,
.maw-shell button.maw-import-assisted-commit-btn:disabled:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  filter: none;
}
.maw-shell .maw-import-assisted-server-path,
.maw-shell .maw-import-assisted-depth {
  width: 100%;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
}
.maw-shell .maw-import-server-actions {
  display: flex;
  gap: 8px;
}
.maw-shell .maw-import-server-selected-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.maw-shell .maw-import-server-selected-list.is-empty {
  border: 1px dashed var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 9px;
  background: var(--panel-hi);
}
.maw-shell .maw-import-server-selected-empty {
  color: var(--ink-mut);
  font-size: 12px;
}
.maw-shell .maw-import-server-selected-card {
  position: relative;
  min-width: 0;
  padding: 8px 30px 8px 9px;
  border: 1px solid rgba(91, 94, 244, .28);
  border-radius: var(--radius-sm);
  background: var(--indigo-soft);
  color: var(--ink);
}
.maw-shell .maw-import-server-selected-card-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-server-selected-card-path {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-mut);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-server-selected-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  padding: 0 !important;
  border-color: rgba(91, 94, 244, .22) !important;
  background: #fff !important;
  color: var(--indigo) !important;
  line-height: 18px;
}
.maw-shell .maw-import-server-selected-remove:hover {
  background: var(--indigo) !important;
  color: #fff !important;
}
.maw-shell .maw-import-start { padding: 14px; }
.maw-shell .maw-import-start-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}
.maw-shell .maw-import-start-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.maw-shell .maw-import-start-status-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.maw-shell .maw-import-start-status-main span {
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.maw-shell .maw-import-start-status-main strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-start-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--indigo-soft);
}
.maw-shell .maw-import-start-loading span {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--indigo);
  animation: mawImportSweep 1.2s ease-in-out infinite;
}
.maw-shell .maw-import-manual-continue-btn,
.maw-shell .maw-import-accept-continue-btn {
  align-items: center;
  gap: 6px;
  border: 1px solid #9c9480;
  border-radius: var(--radius-sm);
  background: #9c9480;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  transition: background .14s ease, border-color .14s ease, opacity .14s ease, transform .14s ease;
}
.maw-shell .maw-import-manual-continue-btn:hover {
  border-color: #8d856f;
  background: #8d856f;
}
.maw-shell .maw-import-manual-continue-btn:active,
.maw-shell .maw-import-accept-continue-btn:active { transform: translateY(1px); }
.maw-shell .maw-import-accept-continue-btn {
  border-color: var(--indigo);
  background: var(--indigo);
}
.maw-shell .maw-import-accept-continue-btn:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  filter: brightness(1.07);
}
.maw-shell .maw-import-manual-continue-btn:disabled,
.maw-shell .maw-import-manual-continue-btn:disabled:hover,
.maw-shell .maw-import-accept-continue-btn:disabled,
.maw-shell .maw-import-accept-continue-btn:disabled:hover {
  opacity: .45;
  cursor: default;
  filter: none;
  transform: none;
}
.maw-shell .maw-import-include-requests {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(91, 94, 244, .24);
  border-radius: var(--radius-sm);
  background: rgba(91, 94, 244, .045);
  padding: 10px;
}
.maw-shell .maw-import-include-requests-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.maw-shell .maw-import-include-requests-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}
.maw-shell .maw-import-include-requests-sub {
  margin-top: 2px;
  color: var(--ink-mut);
  font-size: 11.5px;
}
.maw-shell .maw-import-include-requests-head > span,
.maw-shell .maw-import-include-request-stats span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
}
.maw-shell .maw-import-include-request {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 9px;
}
.maw-shell .maw-import-include-request-main {
  min-width: 0;
}
.maw-shell .maw-import-include-request-title {
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-include-request-path {
  overflow-x: auto;
  color: var(--ink-mut);
  font-size: 11.5px;
  white-space: nowrap;
  scrollbar-width: thin;
}
.maw-shell .maw-import-include-request-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.maw-shell .maw-import-include-request-stats span.is-pending {
  background: var(--yellow-soft);
  color: var(--yellow);
}
.maw-shell .maw-import-include-request-stats span.is-approved {
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .maw-import-include-request-stats span.is-skipped {
  background: var(--panel-hi);
  color: var(--ink-mut);
}
.maw-shell .maw-import-include-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.maw-shell .maw-import-include-request-actions button {
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}
.maw-shell .maw-import-include-request-actions .maw-import-include-approve {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-include-request-actions .maw-import-include-skip,
.maw-shell .maw-import-include-request-actions .maw-import-include-undo {
  background: var(--panel-soft);
  color: var(--ink-mut);
}
.maw-shell .maw-import-include-paths {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.maw-shell .maw-import-include-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: 6px 8px;
}
.maw-shell .maw-import-include-path-row span {
  overflow-x: auto;
  color: var(--ink);
  font-size: 11.5px;
  white-space: nowrap;
  scrollbar-width: thin;
}
.maw-shell .maw-import-include-path-row em {
  color: var(--ink-mut);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
@keyframes mawImportSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.maw-shell .maw-import-server-modal,
.maw-shell .maw-import-existing-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.maw-shell .maw-import-server-modal-backdrop,
.maw-shell .maw-import-existing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 24, 38, .42);
  animation: mawImportFadeIn .14s ease-out;
}
.maw-shell .maw-import-server-modal-panel,
.maw-shell .maw-import-existing-modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(920px, calc(100vw - 48px));
  height: min(680px, calc(100vh - 64px));
  transform: translate(-50%, -48%);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 70px rgba(14, 20, 34, .28);
  overflow: hidden;
  animation: mawImportModalIn .16s ease-out forwards;
}
@keyframes mawImportFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mawImportModalIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.985); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.maw-shell .maw-import-server-modal-head,
.maw-shell .maw-import-existing-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-hi);
}
.maw-shell .maw-import-server-modal-head > div:first-child,
.maw-shell .maw-import-existing-modal-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.maw-shell .maw-import-server-modal-title,
.maw-shell .maw-import-existing-modal-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.maw-shell .maw-import-server-modal-path {
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  max-width: 720px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-server-modal-selected,
.maw-shell .maw-import-existing-modal-selected {
  flex: 0 0 auto;
  border: 1px solid var(--indigo);
  background: var(--indigo-soft);
  color: var(--indigo);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.maw-shell .maw-import-server-modal-close,
.maw-shell .maw-import-existing-modal-close {
  border: 1px solid #c81e1e;
  background: #c81e1e;
  color: #fff;
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.maw-shell .maw-import-server-modal-close:hover,
.maw-shell .maw-import-existing-modal-close:hover {
  background: #a91616;
  border-color: #a91616;
}
.maw-shell .maw-import-server-modal-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-import-server-sort {
  height: 32px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.maw-shell .maw-import-server-modal-toolbar button,
.maw-shell .maw-import-server-choose-btn {
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.maw-shell .maw-import-server-up-btn,
.maw-shell .maw-import-server-modal-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.maw-shell .maw-import-server-modal-toolbar button:disabled {
  opacity: .22;
  cursor: default;
}
.maw-shell .maw-import-server-choose-btn {
  border-color: #9c9480;
  background: #9c9480;
  color: #fff;
}
.maw-shell .maw-import-server-choose-btn:hover {
  border-color: #8d856f;
  background: #8d856f;
}
.maw-shell .maw-import-server-modal-search {
  min-width: 0;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: var(--ink);
  font-size: 12px;
}
.maw-shell .maw-import-server-modal-status {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
}
.maw-shell .maw-import-server-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
}
.maw-shell .maw-import-server-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.maw-shell .maw-import-server-entry:hover {
  background: var(--panel-hover);
  transform: translateX(2px);
}
.maw-shell .maw-import-server-entry.is-selected-dir,
.maw-shell .maw-import-server-entry.is-covered-dir {
  background: var(--indigo-soft);
  border-left: 3px solid var(--indigo);
  padding-left: 9px;
}
.maw-shell .maw-import-server-entry.is-selected-dir:hover,
.maw-shell .maw-import-server-entry.is-covered-dir:hover {
  background: var(--indigo-soft);
}
.maw-shell .maw-import-server-entry.is-file {
  cursor: default;
  opacity: .72;
}
.maw-shell .maw-import-server-entry.is-covered-dir.is-file {
  opacity: 1;
}
.maw-shell .maw-import-server-entry-kind {
  flex: 0 0 auto;
  color: var(--ink-mut);
}
.maw-shell .maw-import-server-entry-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.maw-shell .maw-import-server-entry-meta {
  flex: 0 0 auto;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-import-server-selected-chip {
  flex: 0 0 auto;
  border-radius: 3px;
  background: var(--indigo);
  color: #fff;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 800;
}
.maw-shell .maw-import-server-d3hsp,
.maw-shell .maw-import-server-warning {
  flex: 0 0 auto;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
}
.maw-shell .maw-import-server-d3hsp { background: var(--green-soft); color: var(--green); }
.maw-shell .maw-import-server-warning { background: var(--yellow-soft); color: var(--yellow); }
.maw-shell .maw-import-server-loading,
.maw-shell .maw-import-server-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-mut);
  font-size: 13px;
}
.maw-shell .maw-import-server-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--line-hi);
  border-top-color: var(--indigo);
  animation: mawImportSpin .8s linear infinite;
}
@keyframes mawImportSpin {
  to { transform: rotate(360deg); }
}

.maw-shell .maw-import-sim {
  --asm: var(--indigo);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 10px;
}
.maw-shell .maw-import-sim-card-file:hover .maw-import-sim-fdel { opacity: 1; }
.maw-shell .maw-import-sim-fdel {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s, background .12s, color .12s;
}
.maw-shell .maw-import-sim-fdel:hover { background: var(--red-soft); color: var(--red); }
.maw-shell .maw-import-sim.is-selected {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px var(--indigo-soft);
}
.maw-shell .maw-import-sim-head,
.maw-shell .maw-import-sim-controls,
.maw-shell .maw-import-sim-counts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.maw-shell .maw-import-sim-head input,
.maw-shell .maw-import-sim-controls select {
  width: 100%;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  font-size: 12px;
}
.maw-shell .maw-import-sim-controls label {
  flex: 1 1 0;
  min-width: 0;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 700;
}
.maw-shell .maw-import-sim-del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--red);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
}
.maw-shell .maw-import-sim-meta,
.maw-shell .maw-import-sim-counts {
  color: var(--ink-mut);
  font-size: 11.5px;
}
.maw-shell .maw-import-sim-counts { flex-wrap: wrap; }
.maw-shell .maw-import-sim-counts span,
.maw-shell .maw-import-sim-warnings span {
  border-radius: 3px;
  background: var(--panel-hi);
  padding: 2px 5px;
}
.maw-shell .maw-import-sim-warnings {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--yellow);
  font-size: 11px;
}
.maw-shell .maw-import-sim-folder {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.maw-shell .maw-import-sim-folder:last-child { border-bottom: 0; }
.maw-shell .maw-import-sim-folder-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 0 2px 4px;
}
.maw-shell .maw-import-sim-folder-title > span {
  color: var(--ink-mut);
  background: var(--panel-hi);
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 650;
}
/* The full file list scrolls inside the rail instead of growing the page. */
.maw-shell .maw-import-sim-filelist {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 2px 8px;
  margin-top: 6px;
}
.maw-shell .maw-import-sim-file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink-mut);
  font-family: var(--mono, monospace);
  font-size: 11px;
  padding: 3px 2px;
  border-radius: 3px;
}
.maw-shell .maw-import-sim-file:hover { background: var(--panel-hi); }
.maw-shell .maw-import-sim-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-sim-file-size {
  flex: 0 0 auto;
  color: var(--ink-mut);
  font-size: 10px;
  opacity: 0.8;
}
.maw-shell .maw-import-sim-file-del {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line-hi);
  border-radius: 50%;
  background: var(--panel);
  color: var(--red);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.maw-shell .maw-import-sim-file-del:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.maw-shell .maw-import-insp-count {
  color: var(--ink-mut);
  background: var(--panel-hi);
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 650;
  margin-left: 6px;
}
/* Warning lists never grow the page -- they cap and scroll (2026-08-17). */
.maw-shell .maw-import-sim-warnings {
  max-height: 96px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.maw-shell .maw-import-result-warnscroll {
  max-height: 150px;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

/* ================================================================
   Combined System Models stage (assemblies + models on one canvas)
   ================================================================ */

.maw-shell .maw-import-combo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.maw-shell .maw-import-combo-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.maw-shell .maw-import-combo-section:last-child { flex: 1 0 auto; }
.maw-shell .maw-import-combo-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.maw-shell .maw-import-combo-divider {
  border-top: 1px dashed var(--line-hi);
  margin: 2px 0;
}
.maw-shell .maw-import-combo-asm-body,
.maw-shell .maw-import-combo-sm-body { min-height: 120px; }
.maw-shell .maw-import-combo .maw-import-canvas-empty { padding: 18px 12px; }

/* Assembly and System Model cards are drag sources here. */
.maw-shell .maw-import-combo .maw-import-asm[draggable="true"],
.maw-shell .maw-import-combo .maw-import-sm[draggable="true"] { cursor: grab; }
.maw-shell .maw-import-combo .maw-import-asm.is-dragging,
.maw-shell .maw-import-combo .maw-import-sm.is-dragging { opacity: .45; }

/* Illegal composition drop target. */
.maw-shell .maw-import-sm.is-nodrop,
.maw-shell .maw-import-asm.is-nodrop,
.maw-shell .maw-import-nest-row.is-nodrop {
  outline: 2px dashed var(--red);
  outline-offset: 2px;
  cursor: not-allowed;
}

/* *INCLUDE dependency badges (advisory scan). */
.maw-shell .maw-import-inc-badge {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}
.maw-shell .maw-import-inc-missing {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--red);
}

/* Create-System-Model selection action (styled like Merge). */
.maw-shell .maw-import-selsm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.maw-shell .maw-import-selsm-btn:hover {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-selsm-ic { font-weight: 700; font-size: 13px; }

/* Existing-d3VIEW import source pickers. */
.maw-shell .maw-import-existing-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.maw-shell .maw-import-existing-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.maw-shell .maw-import-existing-picker-head strong {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
}
.maw-shell .maw-import-existing-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  padding: 7px 8px;
  outline: none;
}
.maw-shell .maw-import-existing-search:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-shell .maw-import-existing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.maw-shell .maw-import-existing-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--indigo-bd);
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 10px;
  padding: 2px 3px 2px 7px;
}
.maw-shell .maw-import-existing-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-source-section button.maw-import-existing-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  min-width: 18px;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}
.maw-shell .maw-import-existing-options {
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-import-source-section button.maw-import-existing-option,
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 7px;
  padding: 7px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.maw-shell .maw-import-source-section button.maw-import-existing-option:last-child,
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-option:last-child { border-bottom: 0; }
.maw-shell .maw-import-source-section button.maw-import-existing-option:hover,
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-option:hover { background: var(--panel-soft); }
.maw-shell .maw-import-source-section button.maw-import-existing-option.is-selected,
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-option.is-selected { background: var(--indigo-soft); }
.maw-shell .maw-import-existing-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
}
.maw-shell .maw-import-existing-option.is-selected .maw-import-existing-check {
  border-color: var(--indigo);
  background: var(--indigo);
}
.maw-shell .maw-import-existing-option-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-import-existing-option-main strong,
.maw-shell .maw-import-existing-option-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-import-existing-option-main strong { font-size: 11px; font-weight: 600; }
.maw-shell .maw-import-existing-option-main small { color: var(--ink-dim); font-size: 9px; font-weight: 400; }
.maw-shell .maw-import-existing-empty,
.maw-shell .maw-import-existing-error { padding: 10px; color: var(--ink-dim); font-size: 10px; line-height: 1.4; }
.maw-shell .maw-import-existing-error { color: var(--red); }
.maw-shell .maw-import-source-section button.maw-import-existing-more,
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-more {
  align-self: flex-start;
  padding: 4px 8px;
  font-size: 10px;
}

/* ===== Existing-source picker modal (chrome shared with the server-browse
   modal above via the comma-extended rules) + the compact tab summary that
   replaced the old inline pickers. */
.maw-shell .maw-import-existing-modal-panel {
  width: min(620px, calc(100vw - 48px));
  height: min(600px, calc(100vh - 64px));
}
.maw-shell .maw-import-existing-modal-sub {
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.maw-shell .maw-import-existing-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  overflow: hidden;
}
.maw-shell .maw-import-existing-modal-body .maw-import-existing-picker {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.maw-shell .maw-import-existing-modal-body .maw-import-existing-options {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.maw-shell .maw-import-existing-filters {
  display: flex;
  gap: 8px;
}
.maw-shell .maw-import-existing-filters .maw-import-existing-search {
  flex: 1 1 60%;
}
.maw-shell .maw-import-existing-filters select.maw-import-existing-filter {
  flex: 1 1 40%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  padding: 6px 8px;
  outline: none;
}
.maw-shell .maw-import-existing-filters select.maw-import-existing-filter:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-shell .maw-import-existing-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.maw-shell button.maw-import-existing-modal-cancel {
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.maw-shell button.maw-import-existing-modal-use {
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.maw-shell button.maw-import-existing-modal-use:hover {
  filter: brightness(1.06);
}
.maw-shell .maw-import-existing-summary {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.maw-shell .maw-import-source-section button.maw-import-existing-open {
  align-self: flex-start;
  border: 1px solid var(--indigo);
  background: var(--panel);
  color: var(--indigo);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.maw-shell .maw-import-source-section button.maw-import-existing-open:hover {
  background: var(--indigo-soft);
}
.maw-shell .maw-import-source-section button.maw-import-existing-open:disabled {
  opacity: .4;
  cursor: default;
}
.maw-shell .maw-import-already-imported {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
}
.maw-shell .maw-import-already-imported strong { flex: 0 0 auto; }
.maw-shell .maw-import-already-imported span { color: var(--ink-mut); }

/* ============================================================
   Assisted import result -- searchable outcomes, evidence, and handoff
   ============================================================ */
.maw-shell .maw-import-result,
.maw-shell .maw-import-result-browser,
.maw-shell .maw-import-result-detail,
.maw-shell .maw-import-result-summary {
  min-width: 0;
  box-sizing: border-box;
}
.maw-shell .maw-import-result {
  height: 100%;
  color: var(--ink);
}
.maw-shell .maw-import-result-browser {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
}
.maw-shell .maw-import-result-search {
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  padding: 6px 8px;
  font-size: 12px;
}
.maw-shell .maw-import-result-search::placeholder { color: var(--ink-dim); }
.maw-shell .maw-import-result-search:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
  border-color: var(--indigo);
}
.maw-shell .maw-import-result-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.maw-shell .maw-import-result-filter:hover { border-color: var(--indigo-bd); color: var(--ink); }
.maw-shell .maw-import-result-filter.is-active {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .maw-import-result-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.maw-shell .maw-import-result-filter span {
  margin-left: 4px;
  color: var(--ink-dim);
  font-size: 10px;
}
.maw-shell .maw-import-result-filter.is-active span { color: inherit; }
.maw-shell .maw-import-result-filter:focus-visible,
.maw-shell .maw-import-result-row:focus-visible,
.maw-shell .maw-import-result-actions button:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.maw-shell .maw-import-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name status" "meta status";
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.maw-shell .maw-import-result-row:hover {
  border-color: var(--line-hi);
  background: var(--panel-soft);
}
.maw-shell .maw-import-result-row.is-selected {
  border-color: var(--indigo);
  background: var(--indigo-soft);
  box-shadow: inset 3px 0 0 var(--indigo);
}
.maw-shell .maw-import-result-row-main {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-result-row-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-result-row .maw-import-result-status {
  grid-area: status;
  align-self: center;
}

.maw-shell .maw-import-result-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 19px;
  box-sizing: border-box;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}
.maw-shell .maw-import-result-status.is-created {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .maw-import-result-status.is-reused {
  border-color: var(--indigo-bd);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.maw-shell .maw-import-result-status.is-skipped {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .maw-import-result-status.is-blocked {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .maw-import-result-status.is-error {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}
.maw-shell .maw-import-result-status.is-no_changes {
  border-color: var(--line-hi);
  background: var(--panel-hover);
  color: var(--ink-mut);
}

.maw-shell .maw-import-result-detail {
  min-height: 100%;
  padding: 18px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.maw-shell .maw-import-result-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-import-result-detail-head > div { min-width: 0; }
.maw-shell .maw-import-result-detail-head span:not(.maw-import-result-status) {
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.maw-shell .maw-import-result-detail-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}
.maw-shell .maw-import-result-detail .maw-import-result-status { margin: 1px 0 0; }
.maw-shell .maw-import-result-metadata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.maw-shell .maw-import-result-metadata .maw-import-result-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-result-metadata .maw-import-result-meta span {
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.maw-shell .maw-import-result-metadata .maw-import-result-meta strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 650;
}
.maw-shell .maw-import-result-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.maw-shell .maw-import-result-section > strong {
  color: var(--ink-mut);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.maw-shell .maw-import-result-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}
.maw-shell .maw-import-result-summary-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-import-result-summary-head strong {
  color: var(--ink);
  font-size: 14px;
}
.maw-shell .maw-import-result-summary-head span {
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.4;
}
.maw-shell .maw-import-result-summary-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.maw-shell .maw-import-result-summary-total {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-result-summary-total strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.1;
}
.maw-shell .maw-import-result-summary-total span {
  overflow: hidden;
  color: var(--ink-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-result-summary-total.is-created { border-left-color: var(--green); }
.maw-shell .maw-import-result-summary-total.is-reused { border-left-color: var(--indigo); }
.maw-shell .maw-import-result-summary-total.is-skipped,
.maw-shell .maw-import-result-summary-total.is-blocked { border-left-color: var(--orange); }
.maw-shell .maw-import-result-summary-total.is-error { border-left-color: var(--red); }
.maw-shell .maw-import-result-summary-total.is-no_changes { border-left-color: var(--ink-dim); }
.maw-shell .maw-import-result-meta {
  min-width: 0;
  color: var(--ink-dim);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.maw-shell .maw-import-result-reason,
.maw-shell .maw-import-result-warning {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.maw-shell .maw-import-result-reason { border-left: 3px solid var(--line-hi); }
.maw-shell .maw-import-result-warning {
  border-color: var(--orange-bd);
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  color: var(--orange-strong);
}
.maw-shell .maw-import-result-warning.is-receipt { font-weight: 650; }
.maw-shell .maw-import-result-repo-note {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo, var(--line-hi));
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.maw-shell .maw-import-result-fingerprint {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  padding: 7px 8px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--ink-mut);
  overflow-wrap: anywhere;
  user-select: text;
}
.maw-shell .maw-import-result-fingerprint span {
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.maw-shell .maw-import-result-fingerprint code {
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}
.maw-shell .maw-import-publication-repair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--orange-bd);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
}
.maw-shell .maw-import-publication-repair-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.maw-shell .maw-import-publication-repair-head strong {
  color: var(--orange-strong);
  font-size: 12px;
}
.maw-shell .maw-import-publication-repair-head span {
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, .55);
  color: var(--orange-strong);
  font-size: 10px;
  font-weight: 750;
}
.maw-shell .maw-import-publication-repair .maw-import-result-section {
  margin-top: 4px;
}
.maw-shell .maw-import-publication-revision {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(180, 125, 28, .28);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .45);
}
.maw-shell .maw-import-publication-revision strong {
  color: var(--ink-mut);
  font-size: 10px;
}
.maw-shell .maw-import-publication-revision code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
}
.maw-shell .maw-import-publication-guidance {
  color: var(--orange-strong);
  font-size: 11.5px;
  line-height: 1.45;
}
.maw-shell .maw-import-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 2px;
}
.maw-shell .maw-import-result-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 120px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.maw-shell .maw-import-result-actions button:hover {
  border-color: var(--indigo-bd);
  background: var(--panel-hover);
  color: var(--ink);
}
.maw-shell .maw-import-result-actions .maw-import-result-open-project {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-result-actions .maw-import-result-import-more {
  border-color: var(--indigo-bd);
  background: var(--panel);
  color: var(--indigo);
}
.maw-shell .maw-import-result-actions .maw-import-result-open-project:hover {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
  filter: brightness(1.07);
}
.maw-shell .maw-import-result-actions button:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
  cursor: not-allowed;
  filter: none;
  opacity: .65;
}
.maw-shell .maw-import-history-activation {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--indigo-bd);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-history-activation > strong { color: var(--ink); }
.maw-shell .maw-import-history-activation > span {
  color: var(--ink-mut);
  font-size: 12px;
  line-height: 1.45;
}
.maw-shell .maw-import-history-activation > code {
  overflow-wrap: anywhere;
  color: var(--ink-mut);
  font-family: var(--font-mono);
  font-size: 10px;
}
.maw-shell .maw-import-history-activation button {
  justify-self: start;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--indigo);
  border-radius: var(--radius-sm);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 650;
}
.maw-shell .maw-import-history-activation.is-historical_complete,
.maw-shell .maw-import-history-activation.is-running {
  border-color: var(--green);
  background: var(--green-soft);
}
.maw-shell .maw-import-history-activation.is-historical_incomplete,
.maw-shell .maw-import-history-activation.is-model_only,
.maw-shell .maw-import-history-activation.is-attention {
  border-color: var(--orange-bd);
  background: var(--orange-soft);
}
.maw-shell .maw-import-history-activation.is-repair_required {
  border-color: var(--red);
  background: var(--red-soft);
}

/* ================================================================
   Pre-create validation modal (.maw-import-preflight)
   Shown on Create reviewed import (manual path) BEFORE anything is
   committed: blockers (Continue disabled), warnings (Continue anyway),
   per-item suggested stage revisits. Mirrors .maw-import-progress.
   ================================================================ */
.maw-shell .maw-import-preflight {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.maw-shell .maw-import-preflight-backdrop { position: absolute; inset: 0; background: rgba(28,24,18,.55); }
.maw-shell .maw-import-preflight-panel {
  position: relative;
  width: min(560px, 92vw);
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.maw-shell .maw-import-preflight-head {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 4px;
}
.maw-shell .maw-import-preflight-counts {
  font-size: 12px;
  color: var(--ink-mut);
  margin-bottom: 12px;
}
.maw-shell .maw-import-preflight-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maw-shell .maw-import-preflight-section {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-mut);
  margin-top: 4px;
}
.maw-shell .maw-import-preflight-section.is-blockers { color: var(--red); }
.maw-shell .maw-import-preflight-section.is-warnings { color: var(--amber, #b8860b); }
.maw-shell .maw-import-preflight-item {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.maw-shell .maw-import-preflight-item.is-blocker { border-left-color: var(--red); background: var(--red-soft); }
.maw-shell .maw-import-preflight-item.is-warning { border-left-color: var(--amber, #b8860b); }
.maw-shell .maw-import-preflight-item.is-info { border-left-color: var(--line); color: var(--ink-mut); }
.maw-shell .maw-import-preflight-item.is-ready {
  border-left-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
  font-weight: 650;
}
.maw-shell .maw-import-preflight-msg { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.maw-shell .maw-import-preflight-item.is-info .maw-import-preflight-msg { color: var(--ink-mut); }
.maw-shell .maw-import-preflight-suggest {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-mut);
  line-height: 1.4;
}
.maw-shell .maw-import-preflight-goto {
  border: none;
  background: none;
  padding: 0;
  margin-left: 4px;
  font: inherit;
  font-weight: 650;
  color: var(--indigo);
  cursor: pointer;
  text-decoration: underline;
}
.maw-shell .maw-import-preflight-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.maw-shell .maw-import-preflight-actions button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.maw-shell .maw-import-preflight-actions .maw-import-preflight-continue {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-shell .maw-import-preflight-actions .maw-import-preflight-continue:hover:not(:disabled) { filter: brightness(1.07); }
.maw-shell .maw-import-preflight-actions button:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--ink-dim);
  cursor: not-allowed;
  filter: none;
  opacity: .65;
}

/* ===== Incoming load cases (existing d3VIEW source, canvas preview) =====
   Shows the Load Cases the selected runs ACTUALLY executed under -- resolved by
   the same server-side resolver the proposal builder uses, so the canvas cannot
   promise something the commit would not create. */
.maw-shell .maw-import-lcctx {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-import-lcctx-head {
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.maw-shell .maw-import-lcctx-head strong {
  color: var(--indigo);
  font-size: 12px;
}
.maw-shell .maw-import-lcctx-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maw-shell .maw-import-lcctx-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: 9px 11px;
}
.maw-shell .maw-import-lcctx-name {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-lcctx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-import-lcctx-badge {
  border: 1px solid var(--indigo-bd);
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  padding: 2px 8px;
  font-weight: 700;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-lcctx-badge.is-reuse {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .maw-import-lcctx-action {
  font-weight: 600;
}
.maw-shell .maw-import-lcctx-empty,
.maw-shell .maw-import-lcctx-note {
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1.45;
}
.maw-shell .maw-import-lcctx-note { margin-top: 8px; }
.maw-shell .maw-import-lcctx-error {
  color: var(--red);
  font-size: 11px;
  line-height: 1.45;
}

/* ===== Picker rows the project already holds =====
   Rendered disabled with a tag rather than hidden: an engineer looking for a
   simulation needs to SEE that it is already here, otherwise its absence from
   the list reads as "not found". */
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-option.is-held,
.maw-shell .maw-import-source-section button.maw-import-existing-option.is-held {
  opacity: .55;
  cursor: default;
  background: var(--panel-soft);
}
.maw-shell button.maw-import-existing-option.is-held:hover {
  background: var(--panel-soft);
}
.maw-shell .maw-import-existing-option.is-held .maw-import-existing-check {
  border-style: dashed;
  background: transparent;
}
.maw-shell .maw-import-existing-held-tag {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-mut);
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.maw-shell .maw-import-existing-more-status {
  padding: 8px 10px;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.maw-shell .maw-import-existing-scan-note {
  color: var(--ink-dim);
  font-size: 10px;
  line-height: 1.4;
  padding-top: 4px;
}

/* ===== Searchable project filter (combobox) =====
   Replaces a native <select>: the live fleet has ~113 projects, which a select
   can only scroll, not narrow. */
.maw-shell .maw-import-existing-projfilter {
  position: relative;
  flex: 1 1 40%;
  min-width: 0;
}
.maw-shell input.maw-import-existing-projinput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  padding: 7px 8px;
  outline: none;
  cursor: pointer;
}
.maw-shell input.maw-import-existing-projinput:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-soft);
  cursor: text;
}
.maw-shell .maw-import-existing-projlist {
  display: none;
}
.maw-shell .maw-import-existing-projlist.is-open {
  display: block;
  position: absolute;
  z-index: 30;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(14, 20, 34, .18);
}
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-projopt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 7px 9px;
  font-size: 11px;
  cursor: pointer;
}
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-projopt:last-child { border-bottom: 0; }
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-projopt:hover { background: var(--panel-soft); }
.maw-shell .maw-import-existing-modal-panel button.maw-import-existing-projopt.is-selected {
  background: var(--indigo-soft);
  color: var(--indigo);
  font-weight: 700;
}
.maw-shell .maw-import-existing-projopt small {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: 9px;
  font-weight: 400;
}
.maw-shell .maw-import-existing-projempty {
  padding: 10px;
  color: var(--ink-dim);
  font-size: 10px;
}

/* Incoming-study cards share the loadcase card chrome; the accent tells them apart. */
.maw-shell .maw-import-lcctx-card.is-study {
  border-left-color: var(--green);
}

/* ===== Existing-source picker (Phase 55, 2026-09-25): its own styles, keyed on the view's root so they hold wherever it mounts ===== */
.maw-shell .maw-import-existing-picker {
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* [hidden] loses to any author display rule, so it is restated with !important */
.maw-shell .maw-import-existing-picker [hidden] { display: none !important; }
.maw-shell .maw-import-existing-picker .maw-import-existing-filters {
  flex-wrap: wrap;
  gap: 6px;
}
/* input./select.<class> outrank import-stages.css's search margin and d3view.css's global select height */
.maw-shell .maw-import-existing-picker .maw-import-existing-filters input.maw-import-existing-search,
.maw-shell .maw-import-existing-picker .maw-import-existing-filters select.maw-import-existing-filter {
  height: 30px;
  margin: 0;
  line-height: normal;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-filters input.maw-import-existing-search {
  flex: 1 1 100%;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-list {
  max-height: min(360px, 45vh);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row,
.maw-shell .maw-import-existing-picker .maw-import-existing-skel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-list > :last-child { border-bottom: 0; }
.maw-shell .maw-import-existing-picker .maw-import-existing-row { cursor: pointer; }
.maw-shell .maw-import-existing-picker .maw-import-existing-row:hover { background: var(--panel-hover); }
.maw-shell .maw-import-existing-picker .maw-import-existing-row:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: -2px;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row.is-selected { background: var(--indigo-soft); }
.maw-shell .maw-import-existing-picker .maw-import-existing-row.is-held {
  background: var(--panel-soft);
  cursor: default;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  background: var(--panel);
  color: #fff;
}
.maw-shell .maw-import-existing-picker .is-selected .maw-import-existing-row-check {
  border-color: var(--indigo);
  background: var(--indigo);
}
.maw-shell .maw-import-existing-picker .is-held .maw-import-existing-row-check {
  border-style: dashed;
  background: transparent;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.maw-shell .maw-import-existing-picker .is-held .maw-import-existing-row-body { opacity: .6; }
.maw-shell .maw-import-existing-picker .maw-import-existing-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink-mut);
  font-size: 10.5px;
  line-height: 1.3;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-status,
.maw-shell .maw-import-existing-picker .maw-import-existing-row-tag {
  flex: none;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  color: var(--ink-mut);
  font-size: 9.5px;
  white-space: nowrap;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-status {
  padding: 0 6px;
  background: var(--panel-soft);
  font-weight: 600;
  line-height: 15px;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-status.is-ok {
  border-color: transparent;
  background: var(--green-soft);
  color: var(--green);
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-status.is-bad {
  border-color: transparent;
  background: var(--red-soft);
  color: var(--red);
}
.maw-shell .maw-import-existing-picker .maw-import-existing-row-tag {
  padding: 1px 7px;
  background: var(--panel);
  font-weight: 700;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-empty,
.maw-shell .maw-import-existing-picker .maw-import-existing-error {
  padding: 14px 10px;
  font-size: 11px;
  text-align: center;
}
/* skeleton bars reuse the shell's .maw-skel shimmer (home.css) */
.maw-shell .maw-import-existing-picker .maw-import-existing-skel-check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-skel-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.maw-shell .maw-import-existing-picker .maw-import-existing-skel-name { display: block; width: 72%; height: 11px; }
.maw-shell .maw-import-existing-picker .maw-import-existing-skel-sub { display: block; width: 46%; height: 8px; }
@media (prefers-reduced-motion: reduce) {
  .maw-shell .maw-import-existing-picker .maw-skel { animation: none; }
}

.maw-imps {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--bg);
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.maw-imps button { font: inherit; color: inherit; cursor: pointer; }
.maw-imps input { font: inherit; color: inherit; }
/* bootstrap's input[type=file] { display: block } would beat the hidden attribute */
.maw-imps input[type=file][hidden] { display: none !important; }

.maw-imps-ic { width: 14px; height: 14px; vertical-align: -2px; }
.maw-imps-ic.is-dim { opacity: .45; }

/* ---------------------------------------------------------------- stepper */

.maw-imps-top {
    flex: none;
    background: var(--panel);
    border-bottom: 1px solid var(--line-hi);
}

.maw-imps-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
}

.maw-imps-stage {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    padding: 5px 10px;
    color: var(--ink-mut);
}

.maw-imps-stage .n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--line);
    color: var(--ink-mut);
}

.maw-imps-stage .n .maw-imps-ic { width: 9px; height: 9px; vertical-align: 0; }
.maw-imps-stage.is-active { background: var(--blue-soft); border-color: #c3d0ee; color: #274fa3; }
.maw-imps-stage.is-active .n { background: var(--blue); color: #fff; }
.maw-imps-stage.is-done .n { background: var(--green); color: #fff; }
.maw-imps-stage:not(.is-active):not([disabled]):hover { background: var(--panel-soft); }
.maw-imps-stage[disabled] { opacity: .45; cursor: default; }

.maw-imps-conn { width: 18px; height: 1px; background: var(--line-hi); }

/* ---------------------------------------------------------- 3-pane shell */

.maw-imps-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 10px 14px 12px;
}

.maw-imps-pane {
    background: var(--panel);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.maw-imps-left   { width: 292px; flex: none; }
.maw-imps-canvas { flex: 1; position: relative; }
.maw-imps-right  { width: 280px; flex: none; }

/* everything past Import is a single full-width canvas */
.maw-imps.is-fullcanvas .maw-imps-left,
.maw-imps.is-fullcanvas .maw-imps-right { display: none; }

/* the right-hand drawer (notes, creation status): slides in and pushes the canvas;
   the inner pane keeps its width so nothing reflows while it moves */
.maw-imps-drawer {
    flex: none;
    width: 0;
    margin-left: -10px;             /* cancels the shell gap while closed */
    overflow: hidden;
    display: flex;
    transition: width .24s ease, margin-left .24s ease;
}
.maw-imps-drawer.is-open { width: 380px; margin-left: 0; }
.maw-imps-drawer-in { width: 380px; flex: none; }
.maw-imps-drawer-close {
    border: 0; background: none; padding: 3px; border-radius: 5px; color: var(--ink-dim); line-height: 1; display: inline-flex;
}
.maw-imps-drawer-close:hover { background: var(--panel-soft); color: var(--ink); }
.maw-imps-drawer-foot { flex: none; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel-soft); }

.maw-imps-pane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ink);
    min-height: 37px;
}

.maw-imps-pane-head .sub { font-weight: 400; color: var(--ink-dim); font-size: 11.5px; }

.maw-imps-pane-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

/* room for the persistent footer */
.maw-imps-canvas .maw-imps-pane-body { padding-bottom: 66px; }

/* ------------------------------------------------------------------ footer
 * Persistent continue footer, always bottom-right of the canvas:
 * [note][spacer][buttons], trailing arrow on the primary. */

.maw-imps-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to top, var(--panel) 78%, rgba(255, 255, 255, 0));
    border-top: 1px solid var(--line);
}

.maw-imps-footnote {
    font-size: 11.5px;
    color: var(--ink-dim);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maw-imps-spacer { flex: 1; }

/* ----------------------------------------------------------------- buttons */

.maw-imps-btn {
    border: 1px solid var(--line-hi);
    background: var(--panel);
    color: var(--ink);
    border-radius: 7px;
    padding: 7px 14px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.45;
}

.maw-imps-btn:hover { background: var(--panel-soft); }
.maw-imps-btn:disabled { opacity: .45; cursor: default; }
.maw-imps-btn:disabled:hover { background: var(--panel); }

.maw-imps-btn.is-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    font-weight: 600;
}

.maw-imps-btn.is-primary:hover { background: #274fa3; }
.maw-imps-btn.is-primary:disabled,
.maw-imps-btn.is-primary:disabled:hover { background: var(--blue); }

.maw-imps-btn.is-danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.maw-imps-btn.is-danger:hover { background: #a63024; border-color: #a63024; }

/* reject carries a red tinge */
.maw-imps-btn.is-reject { background: #fbeeea; border-color: #e6c3b8; color: #a4462c; }
.maw-imps-btn.is-reject:hover { background: #f6e0d9; border-color: #d9ab9c; }

.maw-imps-btn.is-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.maw-imps-btn.is-block { display: block; width: 100%; }

/* --------------------------------------------- source switcher (segmented) */

.maw-imps-switch {
    display: flex;
    background: var(--bg);
    border: 1px solid var(--line-hi);
    border-radius: 7px;
    padding: 2px;
    margin-bottom: 10px;
}

.maw-imps-switch.is-sub { margin-bottom: 8px; }

.maw-imps-switch button {
    flex: 1;
    border: 0;
    background: transparent;
    border-radius: 5px;
    padding: 5px 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-mut);
    white-space: nowrap;
}

.maw-imps-switch button.is-active {
    background: var(--panel);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-hi);
    font-weight: 600;
}

.maw-imps-switch button:not(.is-active):hover { color: var(--ink); }
.maw-imps-switch button[disabled] { cursor: default; }
.maw-imps-switch .cnt { color: var(--blue); font-weight: 600; margin-left: 3px; }

/* --------------------------------------------------------------- dropzone */

.maw-imps-drop {
    border: 2px dashed var(--line-hi);
    border-radius: var(--radius);
    padding: 26px 14px;
    text-align: center;
    color: var(--ink-mut);
    background: var(--panel-soft);
}

.maw-imps-drop .maw-imps-ic { width: 22px; height: 22px; display: block; margin: 0 auto 6px; color: var(--ink-dim); }
.maw-imps-drop b { color: var(--ink); }
.maw-imps-drop .browse { color: var(--blue); font-weight: 600; text-decoration: underline; cursor: pointer; }
.maw-imps-drop.is-over { border-color: var(--blue); background: var(--blue-soft); }
.maw-imps-badge.is-up { background: var(--orange-soft); color: var(--orange); }
.maw-imps-upstatus { display: block; margin: 4px 0; font-size: 12px; color: var(--ink-mut); }
.maw-imps-drop .fine { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-dim); }

.maw-imps-srcnote { margin-top: 10px; font-size: 11.5px; color: var(--ink-dim); }
.maw-imps-srcnote.is-off { color: #7a4d1e; }

/* --------------------------------------------------------- server fields */

.maw-imps-field { margin-bottom: 10px; }
.maw-imps-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-mut); margin-bottom: 4px; }

.maw-imps-field input[type=text],
.maw-imps-field input[type=number],
.maw-imps-field input[type=search] {
    width: 100%;
    border: 1px solid var(--line-hi);
    border-radius: 6px;
    padding: 6px 9px;
    background: var(--panel);
    box-sizing: border-box;
}

.maw-imps-field input[disabled] { opacity: .6; }
/* the configured import roots, read-only where the path box used to be */
.maw-imps-rootpath {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    word-break: break-all;
}
.maw-imps-rootpath > div { font-family: ui-monospace, Menlo, Consolas, monospace; }
.maw-imps-field .desc { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.maw-imps-stagedlist { margin-top: 10px; }

.maw-imps-exrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--panel);
}

.maw-imps-exrow:hover { border-color: var(--line-hi); }
.maw-imps-exrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-imps-exrow .k { font-size: 10.5px; color: var(--ink-dim); }

/* ----------------------------------------------------- staged items canvas */

.maw-imps-empty {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    margin: 26px auto 0;
    max-width: 460px;
    padding: 34px 24px;
    text-align: center;
    color: var(--ink-mut);
}

.maw-imps-empty .maw-imps-ic { width: 26px; height: 26px; display: block; margin: 0 auto 8px; color: var(--ink-dim); }
.maw-imps-empty .fine { font-size: 11.5px; color: var(--ink-dim); }

.maw-imps-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.maw-imps-controls input[type=search] {
    flex: 1;
    min-width: 160px;
    border: 1px solid var(--line-hi);
    border-radius: 6px;
    padding: 6px 9px;
    background: var(--panel);
}

.maw-imps-group { margin-bottom: 14px; }

.maw-imps-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: 2px 0 6px;
}

.maw-imps-item {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel);
    padding: 7px 9px;
    margin-bottom: 5px;
    cursor: pointer;
}

.maw-imps-item:hover { border-color: var(--line-hi); }
.maw-imps-item.is-selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.maw-imps-item.is-child { background: var(--panel-soft); }
.maw-imps-item .fic { width: 20px; text-align: center; color: var(--ink-dim); flex: none; }
.maw-imps-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.maw-imps-item .meta { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }

.maw-imps-item .rm {
    border: 0;
    background: none;
    color: var(--ink-dim);
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    flex: none;
}

.maw-imps-item .rm:hover { color: var(--red); background: var(--red-soft); }

.maw-imps-badge {
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 1.5px 6px;
    white-space: nowrap;
    background: var(--line);
    color: var(--ink-mut);
}

.maw-imps-badge.is-srv    { background: #eef7f0; color: var(--green); }
.maw-imps-badge.is-warn   { background: var(--orange-soft); color: var(--orange); }
.maw-imps-badge.is-lock   { background: #ece5d6; color: #6d5c33; display: inline-flex; align-items: center; gap: 3px; }
.maw-imps-badge.is-warnb  { background: var(--orange-soft); color: var(--orange); display: inline-flex; align-items: center; gap: 3px; }
.maw-imps-badge.is-orphan { background: var(--orange-soft); color: #8a5a2b; }
.maw-imps-badge.is-needs  { background: var(--red-soft); color: var(--red); font-weight: 700; }
.maw-imps-badge.is-tag    { background: var(--panel-soft); color: var(--ink-mut); border: 1px solid var(--line); font-weight: 400; }

/* tree chevron; a file row keeps the slot so names line up */
.maw-imps-item .tw {
    flex: none;
    width: 14px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink-dim);
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

.maw-imps-item button.tw:hover { color: var(--ink); }

/* the lifted server browser: any row is addable, files are no longer greyed out */
.maw-shell .maw-imps .maw-import-server-entry.is-file { cursor: default; opacity: 1; }

.maw-shell .maw-imps .maw-import-server-entry-add {
    flex: none;
    border: 1px solid var(--line-hi);
    background: var(--panel);
    color: #274fa3;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
}

.maw-shell .maw-imps .maw-import-server-entry:hover .maw-import-server-entry-add,
.maw-shell .maw-imps .maw-import-server-entry-add:focus { opacity: 1; }
.maw-shell .maw-imps .maw-import-server-entry-add:hover { background: var(--blue-soft); }

.maw-imps-badge.is-d3v { background: var(--blue-soft); color: #274fa3; }

/* ------------------------------------------------------- detail / inspector */

.maw-imps-detail-empty { color: var(--ink-dim); font-size: 12px; padding: 12px 4px; text-align: center; }

.maw-imps-kv { margin-bottom: 10px; }
.maw-imps-kv .k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.maw-imps-kv .v { margin-top: 2px; word-break: break-word; }

.maw-imps-issues { margin-top: 12px; }

.maw-imps-issue {
    border-left: 3px solid var(--orange);
    background: var(--orange-soft);
    border-radius: 0 6px 6px 0;
    padding: 7px 9px;
    font-size: 12px;
    margin-bottom: 6px;
    color: #8a3d20;
}

.maw-imps-issue.is-info { border-left-color: var(--blue); background: var(--blue-soft); color: #26468f; }

/* the analysis' notes: counted in the toolbar, grouped here by what they are about --
   a wall of them above the table pushed the table itself off the screen */
.maw-imps-isspanel { padding: 2px 0; }
.maw-imps-issgroup + .maw-imps-issgroup { margin-top: 10px; }
.maw-imps-issgroup > .h {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 5px;
}
.maw-imps-isslink {
    background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim);
}
.maw-imps-isslink:hover { color: var(--accent); text-decoration: underline; }
.maw-imps-btn.maw-imps-issbtn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.maw-imps-btn.maw-imps-issbtn .maw-imps-ic { flex: none; vertical-align: 0; color: var(--orange); }
.maw-imps-btn.maw-imps-issbtn.is-on { background: var(--blue-soft); border-color: #c3d0ee; color: #274fa3; }
.maw-imps-badge.is-note { background: var(--blue-soft); color: #26468f; }

/* attach a supporting file the source carried to the entity it belongs with */
.maw-imps-attachbtn {
    font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
    border: 1px solid var(--line); background: #fff; color: var(--ink-mut);
    border-radius: 5px; padding: 4px 8px; flex: none;
}
.maw-imps-attachbtn:hover { border-color: var(--accent); color: var(--accent); }
.maw-imps-attachbtn.is-on { background: var(--blue-soft); border-color: #cfe0f5; color: #26468f; font-weight: 600; }

.maw-imps-ok {
    border-left: 3px solid var(--green);
    background: var(--green-soft);
    border-radius: 0 6px 6px 0;
    padding: 7px 9px;
    font-size: 12px;
    color: #33623f;
}

/* ------------------------------------------------- analyzing / analysis error */

.maw-imps-analyzing { text-align: center; padding: 60px 20px; font-size: 13px; color: var(--ink-mut); }
.maw-imps-analyzing .fine { font-size: 11.5px; color: var(--ink-dim); }

/* what the analysis is doing, step by step -- it polls while the one synchronous
   worker call runs, so the wait says something instead of spinning */
.maw-imps-trace { display: inline-block; text-align: left; margin: 18px auto 0; }
.maw-imps-tstep {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--ink-dim); padding: 3px 0;
}
.maw-imps-tstep > .d { width: 14px; height: 14px; flex: none; display: inline-flex; }
.maw-imps-tstep > .d .maw-imps-ic { width: 14px; height: 14px; }
.maw-imps-tstep > .x { font-size: 11.5px; color: var(--ink-dim); }
.maw-imps-tstep.is-done { color: var(--ink-mut); }
.maw-imps-tstep.is-done > .d { color: var(--green); }
.maw-imps-tstep.is-now { color: var(--ink); font-weight: 600; }
.maw-imps-tstep.is-now > .d::before {
    content: ''; width: 7px; height: 7px; margin: 3px; border-radius: 50%;
    background: var(--accent); animation: maw-imps-tpulse 1s ease-in-out infinite;
}
@keyframes maw-imps-tpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.maw-imps-spin {
    width: 26px;
    height: 26px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 3px solid var(--line-hi);
    border-top-color: var(--blue);
    animation: maw-imps-spin .8s linear infinite;
}

@keyframes maw-imps-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .maw-imps-spin, .maw-imps-rowspin { animation: none; }
    .maw-imps-drawer, .maw-imps-modal-rail { transition: none; }
}

.maw-imps-analysis-err {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 560px;
    margin: 40px auto;
    border: 1px solid var(--orange);
    background: var(--orange-soft);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 12.5px;
    color: var(--ink);
}

.maw-imps-analysis-err > .maw-imps-ic { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.maw-imps-analysis-err div { flex: 1; }

/* ------------------------------------------------------------ entity table */

.maw-imps-etable { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.maw-imps-etable th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 6px 8px;
    border-bottom: 1px solid var(--line-hi);
    position: sticky;
    top: 0;
    background: var(--panel);
}

.maw-imps-etable td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.maw-imps-etr:hover td { background: var(--blue-soft); }
.maw-imps-etr.is-rejected td { opacity: .45; }
.maw-imps-etr.is-rejected td.c-act { opacity: 1; }

/* height:1px lets the inner flex take the full row height (the table-cell height trick),
   so a tree row's guide lines join the rows above and below */
.maw-imps-etable td.c-name { padding: 0 8px; height: 1px; }
.maw-imps-tcell { display: flex; height: 100%; min-height: 34px; }
.maw-imps-tcell > .tg { display: flex; flex: none; align-self: stretch; }
.maw-imps-tcell > .tc { flex: 1; min-width: 0; padding: 7px 0; align-self: center; }
.maw-imps-etable .c-name .nm { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
/* a system model shown on Loadcases & Simulations only as the parent of its runs */
.maw-imps-etr.is-context td { background: var(--panel-soft); }
.maw-imps-etr.is-context:hover td { background: var(--blue-soft); }
.maw-imps-ctxnote { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.maw-imps-etable .c-name .maw-imps-badge { margin-right: 4px; }
.maw-imps-etable .c-files { text-align: center; font-variant-numeric: tabular-nums; }
.maw-imps-etable .c-rel { max-width: 340px; }
.maw-imps-etable .c-cfg { text-align: center; }
.maw-imps-etable .c-new { text-align: center; white-space: nowrap; }

/* New / recycled: green New or blue Recycled; on the entity stages the pill is a button */
.maw-imps-recycle {
    display: inline-block;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #eef7f0;
    color: var(--green);
}
.maw-imps-recycle.is-recycled { background: var(--blue-soft); color: #274fa3; }
button.maw-imps-recycle { cursor: pointer; }
button.maw-imps-recycle:hover { border-color: var(--accent); }
.maw-imps-etable .c-act { white-space: nowrap; text-align: right; }

.maw-imps-cfg .maw-imps-ic { width: 15px; height: 15px; }
.maw-imps-cfg.is-ok  { color: var(--green); }
.maw-imps-cfg.is-bad { color: var(--red); }
.maw-imps-cfg.is-off { color: var(--ink-dim); }

.maw-imps-chip {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    background: var(--blue-soft);
    color: #274fa3;
    margin: 1px 3px 1px 0;
}

.maw-imps-chip.is-warn { background: var(--orange-soft); color: var(--orange); }

/* pastel kind pills carry the body weight -- the NAME reads first */
.maw-imps-kind {
    font-size: 10.5px;
    font-weight: 400;
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: .03em;
    flex: none;
}

.maw-imps-kind.is-sm  { background: #e7edf8; color: #4a648f; border: 1px solid #d8e2f1; }
.maw-imps-kind.is-asm { background: #e8f1e8; color: #4f7555; border: 1px solid #d8e7da; }
.maw-imps-kind.is-lc  { background: #f7ede2; color: #8f6240; border: 1px solid #eddecd; }
.maw-imps-kind.is-sim { background: #e5eff4; color: #4a7382; border: 1px solid #d5e5ec; }

/* ------------------------------------------------------------------ review */

.maw-imps-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.maw-imps-stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    background: var(--panel-soft);
}

.maw-imps-stat .n { font-size: 22px; font-weight: 700; color: #274fa3; }
.maw-imps-stat .l { font-size: 11.5px; color: var(--ink-mut); }

/* sources, bytes read and the notes button, under the totals */
.maw-imps-srcline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: -4px 0 12px; font-size: 12px; color: var(--ink-mut); }
.maw-imps-srcline .kv .k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); margin-right: 6px; }

/* while Create runs: what the server is doing, and a bar that fills as the rows are written */
.maw-imps-createline {
    margin: 0 0 10px; padding: 8px 12px 10px;
    border: 1px solid #c3d0ee; background: var(--blue-soft); border-radius: var(--radius-sm); color: #26468f; font-size: 12.5px;
}
.maw-imps-createline[hidden] { display: none; }
.maw-imps-createtext { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.maw-imps-createtext .t { flex: 1; min-width: 0; }
.maw-imps-createtext .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.maw-imps-createbar { height: 6px; border-radius: 99px; background: #c3d0ee; overflow: hidden; }
.maw-imps-createbar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width .45s ease; }
/* nothing written yet: a segment slides along the track instead of an empty bar */
.maw-imps-createbar.is-waiting > span { width: 28%; animation: maw-imps-createwait 1.3s ease-in-out infinite; }
@keyframes maw-imps-createwait { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
/* after the bar rules, or the equal-specificity rules above would win */
@media (prefers-reduced-motion: reduce) {
    .maw-imps-createbar > span { transition: none; }
    .maw-imps-createbar.is-waiting > span { animation: none; width: 100%; opacity: .35; }
}

/* Review: the totals and the progress stay put and only the table scrolls, under its sticky header */
.maw-imps.is-review .maw-imps-canvasbody { display: flex; flex-direction: column; overflow: hidden; }
.maw-imps.is-review .maw-imps-canvasbody > * { flex: none; }
.maw-imps.is-review .maw-imps-canvasbody > .maw-imps-entlist { flex: 1; min-height: 0; overflow-y: auto; }

.maw-imps-etable .c-size { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-mut); }
.maw-imps-etable .c-status { white-space: nowrap; }
.maw-imps-cst { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.maw-imps-cst .maw-imps-ic { width: 14px; height: 14px; vertical-align: 0; }
.maw-imps-cst .id { font-weight: 400; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.maw-imps-cst.is-ok    { color: var(--green); }
.maw-imps-cst.is-bad   { color: var(--red); }
.maw-imps-cst.is-run   { color: #274fa3; }
.maw-imps-cst.is-ready { color: var(--ink-mut); font-weight: 500; }
.maw-imps-cst.is-off   { color: var(--ink-dim); font-weight: 500; }

.maw-imps-rowspin {
    width: 13px; height: 13px; flex: none; border-radius: 50%;
    border: 2px solid #c3d0ee; border-top-color: var(--blue);
    animation: maw-imps-spin .8s linear infinite;
}

/* the status drawer's headline */
.maw-imps-cstatus {
    display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 14px;
}
.maw-imps-cstatus > .maw-imps-ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.maw-imps-cstatus .sub { font-size: 12px; font-weight: 400; margin-top: 2px; }
.maw-imps-cstatus.is-ok   { background: var(--green-soft); border: 1px solid #c4dfca; color: #33623f; }
.maw-imps-cstatus.is-warn { background: var(--orange-soft); border: 1px solid #e3cdb4; color: #7a4d1e; }
.maw-imps-cstatus.is-bad  { background: var(--red-soft); border: 1px solid #ecc3bb; color: #8a2f22; }
.maw-imps-kv .fine { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }

/* ------------------------------------------------- configure panel (modal) */

.maw-imps-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(37, 32, 24, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.maw-imps-modal {
    background: var(--panel);
    border: 1px solid var(--line-hi);
    border-radius: var(--radius);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
    width: 980px;
    max-width: 96vw;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.maw-imps-modal-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.maw-imps-modal-head .t { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-imps-modal-cols { display: flex; flex: 1; min-height: 0; }
.maw-imps-modal-body { flex: 1; overflow-y: auto; padding: 14px; }

.maw-imps-modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--panel-soft);
}

/* rail -- collapsed until Edit; its inner column keeps 300px so it slides, not reflows */
.maw-imps-modal-rail {
    width: 0;
    flex: none;
    overflow: hidden;
    border-right: 0 solid var(--line);
    display: flex;
    min-height: 0;
    background: var(--panel-soft);
    transition: width .24s ease;
}
.maw-imps-modal.is-railopen .maw-imps-modal-rail { width: 300px; border-right-width: 1px; }
.maw-imps-rail-in { width: 300px; flex: none; display: flex; flex-direction: column; min-height: 0; }

.maw-imps-btn.maw-imps-modal-edit { display: inline-flex; align-items: center; gap: 5px; }
.maw-imps-btn.maw-imps-modal-edit .maw-imps-ic { vertical-align: 0; }
.maw-imps-btn.maw-imps-modal-edit.is-on { background: var(--blue-soft); border-color: #c3d0ee; color: #274fa3; }

/* read-only metadata and the extraction's Details */
.maw-imps-metabox.is-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; padding: 10px 12px 2px; }
.maw-imps .none { color: var(--ink-dim); }
.maw-imps-swatchdot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-hi); vertical-align: -2px; }
.maw-imps-roval { padding: 5px 0; min-height: 28px; box-sizing: border-box; }
.maw-imps-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 4px 0 12px; }
.maw-imps-fact .k { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.maw-imps-fact .v { margin-top: 2px; word-break: break-word; font-variant-numeric: tabular-nums; }

.maw-imps-rail-head { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
.maw-imps-rail-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); padding: 3px 4px; }

.maw-imps-rail-tab {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-dim);
    padding: 4px 8px;
}

.maw-imps-rail-tab.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.maw-imps-rail-searchbox { padding: 0 8px 8px; border-bottom: 1px solid var(--line); }

.maw-imps-rail-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line-hi);
    border-radius: 6px;
    padding: 5px 8px;
    background: var(--panel);
    font-size: 12px;
}

.maw-imps-rail-body { flex: 1; overflow-y: auto; padding: 6px 0; }

.maw-imps-rail-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--ink-mut);
    min-height: 24px;
}

.maw-imps-rail-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-imps-rail-row .maw-imps-ic { width: 13px; height: 13px; flex: none; }
.maw-imps-rail-row.in-ent { background: var(--blue-soft); color: var(--ink); font-weight: 600; border-radius: 5px; }
.maw-imps-rail-row .in-mark { color: var(--green); display: inline-flex; }
.maw-imps-rail-row.is-focus { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 5px; }

/* metadata box, form rows, swatches, lock note */
.maw-imps-metabox {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    padding: 10px 12px 1px;
    margin: 0 0 12px;
}

.maw-imps-frow { margin-bottom: 9px; }
.maw-imps-frow label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-mut); margin-bottom: 3px; }
.maw-imps-frow .req { color: var(--red); }

.maw-imps-frow input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line-hi);
    border-radius: 6px;
    padding: 5px 8px;
    background: var(--panel);
}

.maw-imps-frow input.missing { border-color: var(--red); background: #fdf3f1; }
.maw-imps-swatches { display: flex; gap: 6px; }

.maw-imps-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line-hi);
    color: var(--ink-dim);
    font-size: 12px;
    line-height: 1;
    padding: 0;
}

.maw-imps-swatch.is-on { outline: 2px solid var(--blue); outline-offset: 1px; }

.maw-imps-locknote {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    color: #6d5c33;
    background: #f4eee0;
    border: 1px solid #e3d7bb;
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    margin-bottom: 12px;
}

.maw-imps-locknote .maw-imps-ic { flex: none; margin-top: 1px; }
.maw-imps-cardsec { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-dim); margin: 12px 0 4px; }
.maw-imps-fhint { font-size: 11px; color: var(--ink-dim); margin: 4px 0 8px; }
.maw-imps-fhint .maw-imps-ic { display: inline-block; }   /* the app's reset makes every svg a block */

.maw-imps-filerow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 8px;
    margin-bottom: 4px;
}

.maw-imps-treefile {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 8px;
    margin-bottom: 3px;
    color: var(--ink-mut);
    cursor: pointer;
}

.maw-imps-treefile:hover { background: var(--blue-soft); }
.maw-imps-treefile.is-focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.maw-imps-treefile .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink); }
.maw-imps-treefile .meta { font-size: 10.5px; color: var(--ink-dim); flex: none; }

/* the include structure as a `tree` listing */
.maw-imps-fs-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    padding: 0 6px;
    min-height: 26px;
    color: var(--ink-mut);
    cursor: pointer;
    border-bottom: 1px solid var(--line);
}

.maw-imps-fs-row:hover { background: var(--blue-soft); }
.maw-imps-fs-row.is-focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.maw-imps-fs-row > .maw-imps-ic { width: 13px; height: 13px; flex: none; color: var(--ink-dim); }

.maw-imps-fs-row .tg { display: flex; flex: none; align-self: stretch; }

.maw-imps-fs-row .g, .maw-imps-tcell .g {
    flex: none;
    width: 22px;
    align-self: stretch;
    position: relative;
    display: block;
}

.maw-imps-fs-row .g::before, .maw-imps-tcell .g::before,
.maw-imps-fs-row .g::after, .maw-imps-tcell .g::after { content: ''; position: absolute; border-color: #c3b49a; border-style: solid; border-width: 0; }
.maw-imps-fs-row .g-pipe::before, .maw-imps-tcell .g-pipe::before { left: 8px; top: 0; bottom: 0; border-left-width: 1px; }
.maw-imps-fs-row .g-branch::before, .maw-imps-tcell .g-branch::before { left: 8px; top: 0; bottom: 0; border-left-width: 1px; }
.maw-imps-fs-row .g-branch::after, .maw-imps-tcell .g-branch::after { left: 8px; right: 2px; top: 50%; border-top-width: 1px; }
.maw-imps-fs-row .g-last::before, .maw-imps-tcell .g-last::before { left: 8px; top: 0; height: 50%; border-left-width: 1px; }
.maw-imps-fs-row .g-last::after, .maw-imps-tcell .g-last::after { left: 8px; right: 2px; top: 50%; border-top-width: 1px; }

.maw-imps-fs-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 15px; }
.maw-imps-fs-row .nm.empty { color: var(--ink-dim); font-style: italic; }
.maw-imps-fs-row .sz { flex: none; width: 66px; text-align: right; font-size: 10.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.maw-imps-entpill {
    font-size: 11px;
    font-weight: 400;
    border-radius: 99px;
    padding: 1px 8px;
    flex: none;
    letter-spacing: .01em;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maw-imps-entpill.is-sm  { background: #e7edf8; color: #4a648f; border: 1px solid #d8e2f1; }
.maw-imps-entpill.is-asm { background: #e8f1e8; color: #4f7555; border: 1px solid #d8e7da; }
.maw-imps-entpill.is-lc  { background: #f7ede2; color: #8f6240; border: 1px solid #eddecd; }
.maw-imps-entpill.is-sim { background: #e5eff4; color: #4a7382; border: 1px solid #d5e5ec; }

/* loadcase form: fieldsets and the mini stepper; it fills the panel like every other entity's form */
.maw-imps-form fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    padding: 10px 12px;
    margin: 0 0 12px;
}

.maw-imps-form legend { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mut); padding: 0 4px; }
.maw-imps-form legend .opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* the six details in two rows of three, the required ones first */
.maw-imps-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.maw-imps-stepper.is-mini { padding: 2px 0 10px; }
.maw-imps-stepper.is-mini .maw-imps-stage { font-size: 12px; padding: 4px 9px; }
.maw-imps-stepper.is-mini .maw-imps-stage .n { width: 16px; height: 16px; font-size: 10px; }
.maw-imps-stepper.is-mini .maw-imps-conn { width: 14px; }
.maw-imps-etr { cursor: pointer; }

/* eye / cube actions on file rows; quiet until hover inside the panel */
.maw-imps-item .acts, .maw-imps-fs-row .acts { flex: none; display: inline-flex; gap: 2px; }
.maw-imps .vbtn {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-mut);
    padding: 2px 5px;
    border-radius: 5px;
    flex: none;
    line-height: 1;
    display: inline-flex;
}
.maw-imps .vbtn:hover { border-color: var(--blue); color: var(--blue); }
.maw-imps-modal .vbtn { opacity: .3; border-color: transparent; }
.maw-imps-modal .maw-imps-fs-row:hover .vbtn, .maw-imps-modal .maw-imps-treefile:hover .vbtn,
.maw-imps-modal .maw-imps-rail-row:hover .vbtn, .maw-imps-modal .vbtn:focus { opacity: 1; }

/* ------------------------------------------------------------ file viewer */
.maw-imps-fv { display: flex; flex-direction: column; height: 100%; min-height: 420px; }
.maw-imps-fv-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.maw-imps-fv-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-imps-fv-find { border: 1px solid var(--line-hi); border-radius: 6px; padding: 5px 9px; background: var(--panel); font-size: 12px; width: 200px; }
.maw-imps-switch.is-fv { margin: 0; width: auto; }
.maw-imps-switch.is-fv button { flex: none; padding: 4px 10px; }
.maw-imps-fv-body { flex: 1; min-height: 380px; position: relative; }
.maw-imps-fv-ace { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; }
.maw-imps-fv-pre {
    position: absolute; inset: 0; margin: 0; overflow: auto;
    font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
    background: #16233d; color: #cbd5e1; border-radius: var(--radius-sm); padding: 12px 14px; white-space: pre;
}
.maw-imps-fv-3d { position: absolute; inset: 0; border-radius: var(--radius-sm); overflow: hidden; background: #16233d; }
.maw-imps-fv-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 20px; color: var(--ink-mut); font-size: 12.5px; }
.maw-imps-fv-wait .maw-imps-spin { margin: 0; }
.maw-imps-modal-body .maw-imps-fv { min-height: 60vh; }

/* -------------------------------------------- sample models (source column footer)
 * Added by rahul.suri on 09/25/2026 - Phase 55: always drawn under whichever source is
 * open, looking first (shimmer), then one button per sample, or a note when none. */
.maw-imps-leftfoot { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--panel-soft); }
.maw-imps-samples { display: grid; gap: 7px; }
.maw-imps-samples label { font-size: 11.5px; font-weight: 600; color: var(--ink-mut); }
.maw-imps-samples-desc, .maw-imps-samples-note { font-size: 11.5px; color: var(--ink-dim); }
.maw-imps-samples-skel {
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(90deg, var(--line) 20%, var(--panel) 50%, var(--line) 80%);
    background-size: 200% 100%;
    animation: maw-imps-shimmer 1.3s linear infinite;
}
.maw-imps-btn.is-staged,
.maw-imps-btn.is-staged:disabled { background: var(--green-soft); color: var(--green); border-color: transparent; opacity: 1; cursor: default; }
@keyframes maw-imps-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .maw-imps-samples-skel { animation: none; } }

/* ===== roots ===== */
.maw-shell.maw-onb {
  position: absolute;
  inset: 0;
  z-index: 8000;
  display: block;
  height: auto;
  overflow: auto;
  background: var(--bg);
  animation: maw-onb-in .2s ease-out;
  transition: opacity .2s ease;
}
.maw-shell.maw-onb.is-leaving { opacity: 0; pointer-events: none; }
/* The same page as a workspace view at /user/assemblers/onboarding (Phase 57): in the pane, under the top bar. */
.maw-shell.maw-onb.is-pane { position: relative; inset: auto; z-index: auto; height: 100%; animation: none; }
.maw-shell.maw-tour {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.maw-shell.maw-tour-card-wrap {
  position: absolute;
  inset: 0;
  z-index: 9500;
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 24, 18, .62);
  animation: maw-onb-in .2s ease-out;
}
@keyframes maw-onb-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== shared ===== */
/* Global author rules (input[type=file], display:flex cards) outrank the UA [hidden] rule. */
.maw-shell.maw-onb [hidden], .maw-shell.maw-tour [hidden] { display: none !important; }
.maw-shell .maw-btn.maw-onb-lg { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 10px; text-decoration: none; }
.maw-shell .maw-btn.maw-onb-lg svg { width: 16px; height: 16px; }

/* ===== landing (Phase 57: three bands, each centred in its row) ===== */
.maw-shell .maw-onb-land {
  position: relative;
  min-height: 100%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: 24px 64px;
}
.maw-shell .maw-onb-band { display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.maw-shell .maw-onb-welcome { margin: 0; font-size: 46px; line-height: 1.08; font-weight: 700; color: #111; letter-spacing: -.015em; text-align: center; }
.maw-shell .maw-onb-land h2 em { font-style: normal; color: var(--indigo); }
.maw-shell .maw-onb-mid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.maw-shell .maw-onb-land h2 { margin: 0 0 14px; font-size: 32px; line-height: 1.12; font-weight: 700; color: var(--navy); text-wrap: balance; }
.maw-shell .maw-onb-lede { font-size: 17px; color: var(--ink-mut); max-width: 56ch; margin: 0; }
.maw-shell .maw-onb-bottom { flex-direction: column; gap: 18px; }
.maw-shell .maw-onb-choices { display: flex; gap: 28px; align-items: flex-end; }
.maw-shell .maw-onb-choice { display: flex; flex-direction: column; gap: 10px; width: 340px; }
.maw-shell .maw-onb-ask { margin: 0; font-size: 14px; color: var(--ink-mut); text-align: center; }
.maw-shell .maw-onb-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.maw-shell .maw-onb-card:hover { border-color: var(--indigo-bd); background: var(--indigo-soft); }
.maw-shell .maw-onb-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--indigo-soft), 0 0 0 3px var(--indigo-bd); }
.maw-shell .maw-onb-card.is-primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.maw-shell .maw-onb-card.is-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.maw-shell .maw-onb-card svg { width: 18px; height: 18px; }
.maw-shell .maw-onb-card:disabled { opacity: .5; cursor: not-allowed; }
.maw-shell .maw-onb-setup { max-width: 708px; padding: 12px 16px; border: 1px solid var(--orange-bd); border-radius: 10px; background: var(--orange-soft); color: var(--ink); font-size: 13.5px; }
.maw-shell .maw-onb-setup ol { margin: 8px 0 8px 20px; padding: 0; }
.maw-shell .maw-onb-setup li { margin: 3px 0; }
.maw-shell .maw-onb-setup p { margin: 0; color: var(--ink-mut); }
.maw-shell .maw-onb-setup a { color: var(--indigo); font-weight: 600; }

.maw-shell .maw-onb-anim { width: 100%; max-width: 480px; justify-self: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 12px; }
.maw-shell .maw-onb-anim svg { width: 100%; height: auto; display: block; }
.maw-shell .maw-onb-cap { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-dim); margin-top: 8px; padding: 0 4px; font-family: var(--font-mono); }
.maw-shell .maw-onb-edge { fill: none; stroke: var(--line-hi); stroke-width: 1.6; stroke-dasharray: 5 6; animation: maw-onb-flow 1.6s linear infinite; }
.maw-shell .maw-onb-edge.is-on { stroke: var(--indigo-2); }
.maw-shell .maw-onb-node { transform-box: fill-box; transform-origin: center; animation: maw-onb-pulse 8s ease-in-out infinite; }
.maw-shell .maw-onb-node.d1 { animation-delay: .25s; } .maw-shell .maw-onb-node.d2 { animation-delay: .5s; } .maw-shell .maw-onb-node.d3 { animation-delay: .75s; }
.maw-shell .maw-onb-node.d4 { animation-delay: 1.4s; } .maw-shell .maw-onb-node.d5 { animation-delay: 1.7s; }
.maw-shell .maw-onb-node.d6 { animation-delay: 2.8s; } .maw-shell .maw-onb-node.d7 { animation-delay: 3.4s; } .maw-shell .maw-onb-node.d8 { animation-delay: 4.3s; }
.maw-shell .maw-onb-curve { fill: none; stroke: var(--t-sim); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: maw-onb-draw 8s ease-out infinite; }
.maw-shell .maw-onb-lbl { font: 600 11px 'Source Sans 3', system-ui, sans-serif; fill: #fff; }
.maw-shell .maw-onb-lbl.is-dark { fill: var(--ink); }
.maw-shell .maw-onb-lbl.is-soft { font-weight: 500; opacity: .82; }
.maw-shell .maw-onb-sub { font: 500 10px var(--font-mono); fill: var(--ink-dim); }
@keyframes maw-onb-flow { to { stroke-dashoffset: -22; } }
@keyframes maw-onb-pulse { 0%, 100% { transform: scale(1); } 6% { transform: scale(1.08); } 12% { transform: scale(1); } }
@keyframes maw-onb-draw { 0%, 58% { stroke-dashoffset: 260; } 78%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Entrance: the page builds in reading order and the diagram assembles itself, step by step
   (--in per step, set in OnboardingView). The cards wait paused until the server check has placed
   its notice (.is-ready), so nothing moves after it appears. */
.maw-shell .maw-onb-welcome,
.maw-shell .maw-onb-land h2,
.maw-shell .maw-onb-lede,
.maw-shell .maw-onb-anim { animation: maw-onb-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.maw-shell .maw-onb-land h2 { animation-delay: .12s; }
.maw-shell .maw-onb-lede { animation-delay: .2s; }
.maw-shell .maw-onb-anim { animation-delay: .28s; }
.maw-shell .maw-onb-setup,
.maw-shell .maw-onb-choice { animation: maw-onb-rise .5s cubic-bezier(.2, .7, .2, 1) both paused; }
.maw-shell .maw-onb-choice + .maw-onb-choice { animation-delay: .08s; }
.maw-shell.maw-onb.is-ready .maw-onb-setup,
.maw-shell.maw-onb.is-ready .maw-onb-choice { animation-play-state: running; }
.maw-shell .maw-onb-in { transform-box: fill-box; transform-origin: center; animation: maw-onb-pop .45s cubic-bezier(.3, 1.3, .5, 1) var(--in, 0s) both; }
@keyframes maw-onb-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes maw-onb-pop { from { opacity: 0; transform: scale(.85); } }

/* ===== fields in the tour's sample panels ===== */
.maw-shell .maw-onb-field { display: grid; gap: 5px; margin-bottom: 14px; }
.maw-shell .maw-onb-field label { font-size: 12px; font-weight: 600; color: var(--ink-mut); letter-spacing: .02em; }

/* ===== tour layer ===== */
.maw-shell .maw-tour-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; }
.maw-shell .maw-tour-dim path { fill: rgba(28, 24, 18, .62); pointer-events: visiblePainted; }
.maw-shell .maw-tour-ring { position: fixed; z-index: 9001; border: 3px solid var(--indigo); border-radius: 12px; box-shadow: 0 0 0 6px rgba(79, 70, 229, .22); animation: maw-tour-ring 1.6s ease-in-out infinite; pointer-events: none; }
/* a step fades out, re-lays out, fades in; while hidden (and during a settle) the dim takes no clicks */
.maw-shell .maw-tour-dim, .maw-shell .maw-tour-ring, .maw-shell .maw-tour-panel, .maw-shell .maw-tour-pop { opacity: 0; transition: opacity .2s ease; }
.maw-shell.maw-tour.is-shown .maw-tour-dim, .maw-shell.maw-tour.is-shown .maw-tour-ring,
.maw-shell.maw-tour.is-shown .maw-tour-panel, .maw-shell.maw-tour.is-shown .maw-tour-pop { opacity: 1; }
.maw-shell.maw-tour:not(.is-shown) .maw-tour-dim path, .maw-shell.maw-tour:not(.is-shown) .maw-tour-pop,
.maw-shell.maw-tour:not(.is-shown) .maw-tour-panel { pointer-events: none; }
/* an inert step shows its spotlight but takes no clicks anywhere on the page (the popover stays usable) */
.maw-shell.maw-tour.is-inert.is-shown .maw-tour-dim { pointer-events: auto; }
@keyframes maw-tour-ring { 50% { box-shadow: 0 0 0 12px rgba(79, 70, 229, .08); } }
.maw-shell .maw-tour-pop { position: fixed; z-index: 9003; width: 370px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); padding: 16px 18px 14px; pointer-events: auto; }
.maw-shell .maw-tour-pop.is-top { z-index: 10030; }
.maw-shell .maw-tour-pop h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.maw-shell .maw-tour-body { color: var(--ink-mut); font-size: 13.5px; margin: 0 0 12px; }
.maw-shell .maw-tour-body p + p { margin-top: 8px; }
.maw-shell .maw-tour-body b { color: var(--ink); }
.maw-shell .maw-tour-acts { display: flex; justify-content: flex-end; gap: 6px; }
.maw-shell .maw-tour-arrow { position: absolute; width: 14px; height: 14px; background: var(--panel); border-left: 1px solid var(--line-hi); border-top: 1px solid var(--line-hi); display: none; }
.maw-shell .maw-tour-pop[data-place="below"] .maw-tour-arrow { display: block; top: -8px; left: 30px; transform: rotate(45deg); }
.maw-shell .maw-tour-pop[data-place="above"] .maw-tour-arrow { display: block; bottom: -8px; left: 30px; transform: rotate(225deg); }
.maw-shell .maw-tour-pop[data-place="left"] .maw-tour-arrow { display: block; right: -8px; top: 26px; transform: rotate(135deg); }
.maw-shell .maw-tour-pop[data-place="right"] .maw-tour-arrow { display: block; left: -8px; top: 26px; transform: rotate(-45deg); }

/* chrome: the step pill (top centre) and Cancel tour (top right), above in-page modals */
.maw-shell.maw-tour-chrome { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 10050; display: block; overflow: visible; background: transparent; }
.maw-shell .maw-tour-pill { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-hi); box-shadow: 0 12px 30px rgba(28, 24, 18, .26), 0 2px 6px rgba(28, 24, 18, .14); font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; pointer-events: none; animation: maw-onb-in .2s ease-out; }
.maw-shell .maw-tour-cancel { position: absolute; top: 10px; right: 16px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 8px 22px rgba(28, 24, 18, .24); cursor: pointer; }
.maw-shell .maw-tour-cancel:hover { filter: brightness(.92); }
.maw-shell .maw-tour-cancel:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.maw-shell .maw-tour-cancel svg { width: 13px; height: 13px; }

/* sample panels: nothing in them is live */
.maw-shell .maw-tour-panel { position: absolute; z-index: 9002; top: 50%; left: 58%; transform: translate(-50%, -50%); width: 480px; max-width: calc(100% - 376px); max-height: calc(100% - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); pointer-events: auto; }
.maw-shell .maw-tour-panel:has(.maw-tour-graph) { width: 620px; }
.maw-shell .maw-tour-cfg-head { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.maw-shell .maw-tour-cfg-head b { font-size: 15px; color: var(--navy); }
.maw-shell .maw-tour-ex { margin-left: auto; font: 600 10.5px var(--font-mono); color: var(--orange); background: var(--orange-soft); padding: 3px 8px; border-radius: 6px; letter-spacing: .04em; }
.maw-shell .maw-tour-cfg-body { padding: 14px 16px 6px; }
.maw-shell .maw-tour-cfg-body .maw-onb-field { margin-bottom: 11px; }
.maw-shell .maw-tour-fake { border: 1px solid var(--line-hi); background: var(--panel-soft); border-radius: 8px; padding: 7px 10px; font-size: 13px; color: var(--ink-mut); min-height: 34px; }
.maw-shell .maw-tour-fake.mono { font-family: var(--font-mono); font-size: 12.5px; }
.maw-shell .maw-tour-files { display: grid; gap: 5px; }
.maw-shell .maw-tour-files div { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; color: var(--ink); }
.maw-shell .maw-tour-files div span { color: var(--ink-dim); }
.maw-shell .maw-tour-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.maw-shell .maw-tour-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.maw-shell .maw-tour-chip { font-size: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
.maw-shell .maw-tour-kind { display: inline-block; font: 600 10.5px var(--font-mono); padding: 2px 7px; border-radius: 6px; color: #fff; }
.maw-shell .maw-tour-kind.sm { background: var(--t-sm); } .maw-shell .maw-tour-kind.asm { background: var(--t-asm); }
.maw-shell .maw-tour-kind.lc { background: var(--t-lc); } .maw-shell .maw-tour-kind.sim { background: var(--t-sim); }
.maw-shell .maw-tour-cfg-foot { padding: 10px 16px 14px; display: flex; justify-content: flex-end; gap: 8px; }
.maw-shell .maw-tour-graph { padding: 12px 14px 10px; }
.maw-shell .maw-tour-graph svg { width: 100%; height: auto; display: block; }
.maw-shell .maw-tour-graph .gedge { stroke: var(--line-hi); stroke-width: 1.4; fill: none; }
.maw-shell .maw-tour-graph .gedge.is-new { stroke: var(--indigo-2); stroke-dasharray: 5 5; animation: maw-onb-flow 1.6s linear infinite; }
.maw-shell .maw-tour-graph .glbl { font: 600 10.5px 'Source Sans 3', system-ui, sans-serif; fill: var(--ink); }
.maw-shell .maw-tour-graph .gsub { font: 500 9.5px var(--font-mono); fill: var(--ink-dim); }
.maw-shell .maw-tour-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-mut); padding: 6px 4px 2px; }
.maw-shell .maw-tour-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* ===== closing card ===== */
.maw-shell .maw-tour-card { width: 540px; max-width: 100%; background: var(--panel); border-radius: 14px; border: 1px solid var(--line-hi); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); padding: 26px 28px 22px; text-align: center; }
.maw-shell .maw-tour-card-ok { width: 46px; height: 46px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 10px; }
.maw-shell .maw-tour-card-ok svg { width: 22px; height: 22px; }
.maw-shell .maw-tour-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--navy); }
.maw-shell .maw-tour-card p { margin: 0 auto 16px; color: var(--ink-mut); max-width: 46ch; font-size: 14px; }
.maw-shell .maw-tour-card-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===== the Tours chooser (Phase 57): a card per tour over a dim ===== */
.maw-shell.maw-tours-layer {
  position: absolute;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 24, 18, .5);
  animation: maw-onb-in .2s ease-out;
}
.maw-shell .maw-tours { width: 520px; max-width: 100%; max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px 22px 22px; }
.maw-shell .maw-tours-head { display: flex; align-items: center; justify-content: space-between; }
.maw-shell .maw-tours-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--navy); }
.maw-shell .maw-tours-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-mut); font-size: 22px; line-height: 1; cursor: pointer; }
.maw-shell .maw-tours-close:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .maw-tours-sub { margin: 6px 0 16px; font-size: 13.5px; color: var(--ink-mut); }
.maw-shell .maw-tours-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* A card is one button: its picture, then the title and what the tour covers. */
.maw-shell .maw-tours-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.maw-shell .maw-tours-card:hover { border-color: var(--indigo-bd); box-shadow: 0 8px 22px rgba(15, 23, 42, .12); transform: translateY(-1px); }
.maw-shell .maw-tours-card:focus-visible { outline: 2px solid var(--indigo-bd); outline-offset: 2px; }
.maw-shell .maw-tours-card:disabled { cursor: default; opacity: .6; border-color: var(--line); box-shadow: none; transform: none; }
.maw-shell .maw-tours-art { display: block; background: var(--indigo-soft); border-bottom: 1px solid var(--line); }
.maw-shell .maw-tours-art svg { display: block; width: 100%; height: auto; }
.maw-shell .maw-tours-art text { font-size: 11px; font-weight: 600; fill: var(--ink-mut); text-anchor: middle; }
.maw-shell .maw-tours-route { fill: none; stroke: var(--indigo-bd); stroke-width: 2; stroke-dasharray: 6 3; stroke-linecap: round; }
.maw-shell .maw-tours-card:hover .maw-tours-route { animation: maw-tours-march 1.2s linear infinite; }
.maw-shell .maw-tours-stop { fill: #fff; stroke-width: 2; }
.maw-shell .maw-tours-txt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.maw-shell .maw-tours-txt strong { font-size: 15px; color: var(--navy); }
.maw-shell .maw-tours-txt span { font-size: 13px; line-height: 1.45; color: var(--ink-mut); }
@keyframes maw-tours-march { to { stroke-dashoffset: -18; } }

@media (max-width: 1100px) {
  .maw-shell .maw-onb-land { padding: 24px; }
  .maw-shell .maw-onb-mid { grid-template-columns: 1fr; }
  .maw-shell .maw-onb-choices { flex-direction: column; align-items: center; }
  .maw-shell .maw-tour-panel { left: 50%; max-width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .maw-shell .maw-onb-welcome,
  .maw-shell .maw-onb-land h2,
  .maw-shell .maw-onb-lede,
  .maw-shell .maw-onb-anim,
  .maw-shell .maw-onb-setup,
  .maw-shell .maw-onb-choice,
  .maw-shell .maw-onb-in,
  .maw-shell .maw-onb-edge,
  .maw-shell .maw-onb-node,
  .maw-shell .maw-onb-curve,
  .maw-shell .maw-tour-ring,
  .maw-shell .maw-tour-graph .gedge.is-new,
  .maw-shell.maw-onb,
  .maw-shell.maw-tour-card-wrap,
  .maw-shell.maw-tours-layer,
  .maw-shell .maw-tours-card:hover .maw-tours-route,
  .maw-shell .maw-tour-pill { animation: none; }
  .maw-shell .maw-tours-card { transition: none; }
  .maw-shell .maw-tours-card:hover { transform: none; }
  .maw-shell .maw-onb-curve { stroke-dashoffset: 0; }
  .maw-shell.maw-onb, .maw-shell .maw-tour-dim, .maw-shell .maw-tour-ring,
  .maw-shell .maw-tour-panel, .maw-shell .maw-tour-pop { transition: none; }
}

/* ================================================================
   LoadcaseCreateView -- modal chrome (wider than the default
   .maw-wf-modal-root/.maw-wf-modal-panel -- needs room for the panel's
   two-column Details|RT+KPI layout).
   ================================================================ */
.maw-lcp-modal-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow: auto;
  animation: maw-wf-fade .16s ease-out;
}
.maw-lcp-modal-panel {
  width: min(1040px, 96vw);
  max-height: 100%;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: maw-wf-float .2s cubic-bezier(.2, .7, .3, 1);
}
.maw-lcp-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 28px 24px;
}
@media (max-width: 640px) {
  .maw-lcp-modal-root { padding: 14px 10px; }
  .maw-lcp-modal-body { padding: 14px 18px 18px; }
}

/* Name + Assemblies picker, stacked above the panel. */
.maw-lcp-basics {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}
.maw-lcp-name-input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13.5px;
  box-sizing: border-box;
}
.maw-lcp-name-input:focus { outline: none; border-color: var(--indigo); }

/* Divider between the basics block and the hosted config panel. */
.maw-lcp-panel-divider {
  height: 1px;
  background: var(--line);
  margin: 18px 0 14px;
}

/* ================================================================
   LoadcaseConfigPanel -- identity header (shown only when
   options.showIdentity !== false).
   ================================================================ */
.maw-shell .maw-lcp-identity {
  border-left: 3px solid var(--t-lc, var(--orange));
  background: var(--panel);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.maw-shell .maw-lcp-identity-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.maw-shell .maw-lcp-identity-meta {
  font-size: 11.5px;
  color: var(--ink-mut);
  margin-top: 2px;
}
.maw-shell .maw-lcp-badge-row { margin-top: 8px; }
.maw-shell .maw-lcp-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
}
.maw-shell .maw-lcp-badge.is-usable { background: var(--green-soft); color: var(--green); }
.maw-shell .maw-lcp-badge.is-pending { background: rgba(0, 0, 0, .05); color: var(--ink-mut); }

/* ================================================================
   LoadcaseConfigPanel -- two-column layout (Details | RT + KPIs).
   ================================================================ */
.maw-shell .maw-lcp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 18px 24px;
  align-items: start;
}
.maw-shell .maw-lcp-col { min-width: 0; }
@media (max-width: 820px) {
  .maw-shell .maw-lcp-cols { grid-template-columns: 1fr; }
}

.maw-shell .maw-lcp-section {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mut);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 14px 0 6px;
}
.maw-shell .maw-lcp-col > .maw-lcp-section:first-child { margin-top: 0; }
.maw-shell .maw-lcp-opt {
  font-size: 10px;
  color: var(--ink-mut);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* Details field grid (collapses to 1 column when narrow). */
.maw-shell .maw-lcp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-items: start;
}
.maw-shell .maw-lcp-field-full { grid-column: 1 / -1; }
.maw-shell .maw-lcp-field { margin-bottom: 0; }
.maw-shell .maw-lcp-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mut);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.maw-shell .maw-lcp-req-star {
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}
.maw-shell .maw-lcp-select {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  appearance: none;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-select:focus { outline: none; border-color: var(--indigo); }

/* ---- Taxonomy / Product searchable comboboxes (loading + custom + search) ---- */
.maw-shell .maw-lcp-combo { position: relative; }
.maw-shell .maw-lcp-combo-control {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-sizing: border-box;
}
.maw-shell .maw-lcp-combo.is-open .maw-lcp-combo-control { border-color: var(--indigo); }
.maw-shell .maw-lcp-combo-input {
  flex: 1;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-combo-input:focus { outline: none; }
.maw-shell .maw-lcp-combo-caret {
  flex: 0 0 auto;
  width: 26px;
  border: 0;
  background: transparent;
  color: var(--ink-mut);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.maw-shell .maw-lcp-combo.is-open .maw-lcp-combo-caret { color: var(--indigo); }
.maw-shell .maw-lcp-combo-pop {
  display: none;
  position: absolute;
  z-index: 40;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.maw-shell .maw-lcp-combo.is-open .maw-lcp-combo-pop { display: block; }
.maw-shell .maw-lcp-combo-opt,
.maw-shell .maw-lcp-combo-custom {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-combo-opt:hover,
.maw-shell .maw-lcp-combo-custom:hover { background: var(--hover, rgba(99, 102, 241, 0.08)); }
.maw-shell .maw-lcp-combo-opt.is-sel { background: rgba(99, 102, 241, 0.12); font-weight: 600; }
.maw-shell .maw-lcp-combo-custom {
  color: var(--indigo);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
}
.maw-shell .maw-lcp-combo-loading,
.maw-shell .maw-lcp-combo-empty {
  padding: 8px 9px;
  color: var(--ink-mut);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.maw-shell .maw-lcp-combo-spin {
  width: 12px;
  height: 12px;
  border: 2px solid var(--line);
  border-top-color: var(--indigo);
  border-radius: 50%;
  display: inline-block;
  animation: maw-lcp-spin 0.7s linear infinite;
}
@keyframes maw-lcp-spin { to { transform: rotate(360deg); } }
.maw-shell .maw-lcp-code {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-code:focus { outline: none; border-color: var(--indigo); }
.maw-shell .maw-lcp-desc {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-desc:focus { outline: none; border-color: var(--indigo); }

.maw-shell .maw-lcp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  grid-column: 1 / -1;
}
.maw-shell .maw-lcp-save-btn {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--indigo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.maw-shell .maw-lcp-save-btn:hover { opacity: .85; }
.maw-shell .maw-lcp-saved-ic { font-size: 12px; color: var(--green); font-weight: 600; }

/* ================================================================
   Response Template + KPI sections (status line + open-editor button).
   ================================================================ */
.maw-shell .maw-lcp-rt-none,
.maw-shell .maw-lcp-rt-set,
.maw-shell .maw-lcp-kpi-count {
  font-size: 12px;
  color: var(--ink-mut);
  margin-bottom: 8px;
  line-height: 1.4;
}
.maw-shell .maw-lcp-rt-set { color: var(--green); font-weight: 600; }

.maw-shell .maw-lcp-rt-preview,
.maw-shell .maw-lcp-kpi-preview {
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-lcp-rt-preview-title,
.maw-shell .maw-lcp-kpi-preview-title {
  margin-bottom: 6px;
  color: var(--ink-mut);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.maw-shell .maw-lcp-rt-preview-list,
.maw-shell .maw-lcp-kpi-preview-list {
  max-height: 118px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}
.maw-shell .maw-lcp-rt-preview-row,
.maw-shell .maw-lcp-kpi-preview-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  box-sizing: border-box;
}
.maw-shell .maw-lcp-rt-preview-name,
.maw-shell .maw-lcp-kpi-preview-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.maw-shell .maw-lcp-rt-preview-meta,
.maw-shell .maw-lcp-rt-preview-note,
.maw-shell .maw-lcp-kpi-preview-meta {
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.4;
}
.maw-shell .maw-lcp-rt-preview-meta,
.maw-shell .maw-lcp-kpi-preview-meta {
  flex: 0 0 auto;
  max-width: 56%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maw-shell .maw-lcp-rt-btn {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.maw-shell .maw-lcp-rt-btn:hover { border-color: var(--indigo); background: var(--panel-hover); }

/* ================================================================
   Inline RT + KPI editors (expand-in-place, NOT modals).
   ================================================================ */
.maw-shell .maw-lcp-rt-editor,
.maw-shell .maw-lcp-kpi-editor {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-hover);
}

/* segmented mode toggle (RT: build vs. existing) */
.maw-shell .maw-lcp-seg {
  display: flex;
  gap: 0;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.maw-shell .maw-lcp-rt-seg {
  flex: 1;
  padding: 5px 8px;
  border: none;
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.maw-shell .maw-lcp-rt-seg.is-active { background: var(--indigo); color: #fff; }

/* shared editor field styling */
.maw-shell .maw-lcp-rt-name,
.maw-shell .maw-lcp-kpi-name,
.maw-shell .maw-lcp-kpi-desc {
  width: 100%;
  padding: 5px 7px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-kpi-desc {
  resize: vertical;
  line-height: 1.35;
}
.maw-shell .maw-lcp-rt-name:focus,
.maw-shell .maw-lcp-kpi-name:focus,
.maw-shell .maw-lcp-kpi-desc:focus { outline: none; border-color: var(--indigo); }

/* KPI response mapper: left response palette -> right target canvas. */
.maw-shell .maw-lcp-kpi-mapper {
  display: grid;
  grid-template-columns: minmax(170px, .9fr) minmax(0, 1.35fr);
  gap: 10px;
  margin-top: 8px;
}
.maw-shell .maw-lcp-kpi-source,
.maw-shell .maw-lcp-kpi-canvas {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 8px;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-kpi-canvas {
  background: var(--panel-soft);
  transition: background .15s, outline-color .15s;
}
.maw-shell .maw-lcp-kpi-canvas.is-drop-target {
  outline: 2px dashed var(--indigo-bd);
  outline-offset: -6px;
  background: var(--indigo-soft);
}
.maw-shell .maw-lcp-kpi-map-title {
  color: var(--ink-mut);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 7px;
}
.maw-shell .maw-lcp-kpi-source-list {
  max-height: 268px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 2px;
}
.maw-shell .maw-lcp-kpi-source-row {
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-soft);
  cursor: grab;
  transition: border-color .12s, box-shadow .12s, opacity .12s;
}
.maw-shell .maw-lcp-kpi-source-row:hover {
  border-color: var(--indigo-bd);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.maw-shell .maw-lcp-kpi-source-row.is-dragging {
  opacity: .45;
  cursor: grabbing;
}
.maw-shell .maw-lcp-kpi-source-main {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-lcp-kpi-source-meta,
.maw-shell .maw-lcp-kpi-source-empty,
.maw-shell .maw-lcp-kpi-canvas-empty {
  color: var(--ink-mut);
  font-size: 11.5px;
  line-height: 1.35;
}
.maw-shell .maw-lcp-kpi-source-meta {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.maw-shell .maw-lcp-kpi-canvas-empty {
  padding: 18px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  text-align: center;
  background: var(--panel);
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .maw-shell .maw-lcp-kpi-mapper { grid-template-columns: 1fr; }
}

/* RT channel rows */
.maw-shell .maw-lcp-rt-rows,
.maw-shell .maw-lcp-kpi-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.maw-shell .maw-lcp-rt-row { display: flex; gap: 4px; align-items: center; }
.maw-shell .maw-lcp-rt-row .maw-lcp-rt-role { flex: 1.2; min-width: 0; }
.maw-shell .maw-lcp-rt-row .maw-lcp-select { flex: 1; min-width: 0; }

/* KPI target rows (wrap to keep usable in the narrower right column) */
.maw-shell .maw-lcp-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.maw-shell .maw-lcp-kpi-row.is-focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px var(--indigo-bd);
}
.maw-shell .maw-lcp-kpi-trace {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-lcp-kpi-trace-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}
.maw-shell .maw-lcp-kpi-trace-meta {
  flex: 0 0 auto;
  max-width: 54%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-label { flex: 1 1 100%; min-width: 0; }

/* B6.2 objective rows: label + badge/direction/weight on one line, channel meta
   + split action below. Threshold source fields don't render for these rows. */
.maw-shell .maw-lcp-kpi-row-objective .maw-lcp-kpi-label { flex: 1 1 40%; }
.maw-shell .maw-lcp-kpi-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-bd);
  border-radius: 20px;
  padding: 2px 8px;
}
.maw-shell .maw-lcp-kpi-row-objective .maw-lcp-kpi-dir { flex: 0 1 110px; min-width: 0; }
.maw-shell .maw-lcp-kpi-obj-unit {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--ink-mut);
}
.maw-shell .maw-lcp-kpi-row-objective .maw-lcp-kpi-weight-in { flex: 0 0 52px; }
.maw-shell .maw-lcp-kpi-obj-meta {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 3px;
  border-top: 1px dashed var(--line);
}
.maw-shell .maw-lcp-kpi-obj-channels {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-mut);
  font-size: 11px;
}
.maw-shell .maw-lcp-kpi-split {
  flex: 0 0 auto;
  border: 1px solid var(--indigo);
  border-radius: 4px;
  background: transparent;
  color: var(--indigo);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
}
.maw-shell .maw-lcp-kpi-split:hover { background: var(--indigo-bd); }
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-branch,
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-op,
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-stat { flex: 1 1 31%; min-width: 0; }
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-entity,
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-metric,
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-unit,
.maw-shell .maw-lcp-kpi-row .maw-lcp-kpi-val { flex: 1 1 31%; min-width: 0; }

/* small text inputs inside editor rows */
.maw-shell .maw-lcp-rt-row input,
.maw-shell .maw-lcp-kpi-row input {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  box-sizing: border-box;
}
.maw-shell .maw-lcp-rt-row input:focus,
.maw-shell .maw-lcp-kpi-row input:focus { outline: none; border-color: var(--indigo); }
.maw-shell .maw-lcp-rt-row .maw-lcp-select,
.maw-shell .maw-lcp-kpi-row .maw-lcp-select {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  appearance: none;
}

/* row remove buttons */
.maw-shell .maw-lcp-rt-rdel,
.maw-shell .maw-lcp-kpi-tdel {
  flex: 0 0 auto;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-mut);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
}
.maw-shell .maw-lcp-rt-rdel:hover,
.maw-shell .maw-lcp-kpi-tdel:hover { color: var(--red); }

/* add-row buttons */
.maw-shell .maw-lcp-rt-addrow,
.maw-shell .maw-lcp-kpi-addrow {
  border: 1px dashed var(--line);
  background: none;
  color: var(--indigo);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  width: 100%;
}
.maw-shell .maw-lcp-rt-addrow:hover,
.maw-shell .maw-lcp-kpi-addrow:hover { border-color: var(--indigo); }

/* editor footer (save / cancel) */
.maw-shell .maw-lcp-rt-foot,
.maw-shell .maw-lcp-kpi-foot { display: flex; gap: 8px; margin-top: 10px; }
.maw-shell .maw-lcp-rt-save,
.maw-shell .maw-lcp-kpi-save {
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--indigo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.maw-shell .maw-lcp-rt-save:hover,
.maw-shell .maw-lcp-kpi-save:hover { opacity: .85; }
.maw-shell .maw-lcp-rt-cancel {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.maw-shell .maw-lcp-rt-cancel:hover { border-color: var(--indigo); }

/* Very narrow canvas -> details fields stack to a single column too. */
@media (max-width: 480px) {
  .maw-shell .maw-lcp-form { grid-template-columns: 1fr; }
}

/* ================================================================
   Phase 27 Packet C -- 3-stage Create Loadcase wizard
   (LoadcaseCreateView). Stepper + solo (single-section) layout +
   RT source-tabs picker + KPI quick-picks. Visual language borrows
   from import.css's .maw-import-stage* stepper, reimplemented under
   this file's own .maw-lcp-* prefix (see file header).
   ================================================================ */

/* ---- stage stepper ---- */
.maw-shell .maw-lcp-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 10px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.maw-shell .maw-lcp-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mut);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-shell .maw-lcp-stage:hover:not(.is-upcoming):not(.is-active) { background: var(--panel-soft); color: var(--ink); }
.maw-shell .maw-lcp-stage.is-active {
  background: var(--indigo-soft);
  border-color: var(--indigo-bd);
  color: var(--indigo);
}
.maw-shell .maw-lcp-stage.is-upcoming { color: var(--ink-dim); cursor: default; opacity: .7; }
.maw-shell .maw-lcp-stage-n {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--line-hi);
  color: #fff;
}
.maw-shell .maw-lcp-stage.is-active .maw-lcp-stage-n { background: var(--indigo); }
.maw-shell .maw-lcp-stage.is-upcoming .maw-lcp-stage-n { background: var(--line-hi); }
.maw-shell .maw-lcp-stage-conn { width: 18px; height: 1px; background: var(--line-hi); flex: 0 0 auto; }

/* ---- solo (single-section) layout -- one stage's section at a time ---- */
.maw-shell .maw-lcp-solo { display: flex; flex-direction: column; gap: 4px; }
.maw-shell .maw-lcp-solo .maw-lcp-section:first-child { margin-top: 0; }

/* ---- footer: Back / Skip (ghost) ---- */
.maw-shell .maw-lcp-skip-btn {
  background: none;
  border: 1px dashed var(--line-hi);
  color: var(--ink-mut);
}
.maw-shell .maw-lcp-skip-btn:hover {
  border-color: var(--ink-dim);
  color: var(--ink);
  background: var(--panel-hover);
}

/* ---- RT "pick existing": source tabs (Master / My templates / This project) ---- */
.maw-shell .maw-lcp-rt-source-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.maw-shell .maw-lcp-rt-source-tab {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-mut);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.maw-shell .maw-lcp-rt-source-tab:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .maw-lcp-rt-source-tab.is-active { background: var(--indigo-soft); border-color: var(--indigo-bd); color: var(--indigo); }
.maw-shell .maw-lcp-rt-picker { margin-top: 2px; }

/* ---- KPI set strip: one chip per staged set, the canvas edits the active one (D16) ---- */
.maw-shell .maw-lcp-kpi-sets { display: flex; gap: 6px; margin: 4px 0 8px; flex-wrap: wrap; align-items: center; }
.maw-shell .maw-lcp-kpi-set { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-mut); font-size: 11.5px; font-weight: 600; }
.maw-shell .maw-lcp-kpi-set.is-active { background: var(--indigo-soft); border-color: var(--indigo-bd); color: var(--indigo); }
.maw-shell .maw-lcp-kpi-set-pick,
.maw-shell .maw-lcp-kpi-set-del,
.maw-shell .maw-lcp-kpi-set-add { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.maw-shell .maw-lcp-kpi-set-pick { padding: 4px 4px 4px 10px; }
.maw-shell .maw-lcp-kpi-set-pick small { font-weight: 400; opacity: .75; }
.maw-shell .maw-lcp-kpi-set-del { padding: 4px 9px 4px 2px; font-size: 13px; }
.maw-shell .maw-lcp-kpi-set-add { padding: 4px 10px; border: 1px dashed var(--line); border-radius: 999px; color: var(--ink-mut); font-size: 11.5px; font-weight: 600; }
.maw-shell .maw-lcp-kpi-set-add:hover, .maw-shell .maw-lcp-kpi-set:hover { background: var(--panel-hover); color: var(--ink); }

/* Row head wraps name + the Master badge on one line (the picker row's own
   name span uses white-space:nowrap/ellipsis and needs min-width:0 to
   shrink correctly once it's a flex child rather than the row's only child --
   scoped to this wrapper only, doesn't touch the assemblies/other pickers). */
.maw-shell .maw-lcp-rt-row-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.maw-shell .maw-lcp-rt-row-head .maw-wf-picker-row-name { min-width: 0; }

/* Master-template badge (a third .maw-lcp-badge variant alongside is-usable/is-pending). */
.maw-shell .maw-lcp-badge.is-master-tpl { background: var(--orange-soft); color: var(--orange); }

/* ---- KPI: source-optional fields ---- */
.maw-shell .maw-lcp-kpi-source-field { opacity: .75; }
.maw-shell .maw-lcp-kpi-source-field:focus { opacity: 1; }

/* Fill .maw-page-body exactly, then become a full-height flex column.
 *
 * This used to be margin:-20px + calc(100% + 40px) on both axes, to bleed past
 * .maw-page-body's 20px padding. That padding is GONE -- shell.css line ~1650
 * carries it commented out as `/\* padding: 20px; *\/` -- so the bleed had
 * nothing to bleed into: the view sat 20px above and left of its container and
 * measured 40px wider and taller than it, which put a horizontal AND vertical
 * scrollbar on .maw-page-body and pushed the header row up under the tab strip.
 * That is the "top is cut off and scrolling" report (2026-08-23, Rahul);
 * measured 2014px container vs 2054px view, 725 vs 745 high.
 *
 * If .maw-page-body ever gets its padding back, do NOT restore the negative
 * margin -- give .maw-sub the same `:has(> ...) { padding: 0 }` override the
 * home / detail / import apps already use, which is the pattern that replaced
 * this one everywhere else. */
.maw-shell .maw-sub {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.maw-shell .maw-sub * { box-sizing: border-box; }

/* ---- steps timeline (top, centered) ------------------------------------- */

/* Header bar: ONE row -- the system model being submitted for on the left, the
   step timeline pushed to the right, both centred on the row's vertical axis.
   The 32px left gutter is the page's alignment spine, shared with .maw-sub-left
   below (they must be changed together). It was a stacked column with the
   stepper under the title, and before that justify-content:center, which parked
   the stepper 364px in from the left and lined it up with nothing. */
.maw-shell .maw-sub-stepper-wrap {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px 12px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
/* flex:0 1 auto + the ellipsis so a long system-model name gives way to the
   stepper rather than shoving it off the right edge. */
.maw-shell .maw-sub-stepper-title {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .2px;
}
.maw-shell .maw-sub-stepper-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}
.maw-shell .maw-sub-stepper-id {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  letter-spacing: .3px;
}
/* Eight steps do not fit 760px. Let the row take the width it needs and scroll
   itself on a narrow window rather than crushing the labels. */
.maw-shell .maw-sub-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  /* margin-left:auto keeps the row right-aligned even when the title is short;
     min-width:0 lets the row shrink to its own scroller instead of pushing the
     title out of the header. */
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.maw-shell .maw-sub-step {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-family: inherit;
  color: var(--ink-mut);
  border-radius: var(--radius-sm);
  transition: color .15s ease;
}
.maw-shell .maw-sub-step:hover { color: var(--ink); }
.maw-shell .maw-sub-step-dot {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-soft);
  border: 1.5px solid var(--line-hi);
  font-size: 12px; font-weight: 700;
  color: var(--ink-mut);
  transition: all .18s ease;
}
.maw-shell .maw-sub-step-tick { display: none; font-size: 12px; line-height: 1; }
.maw-shell .maw-sub-step-label {
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.maw-shell .maw-sub-step-sep {
  width: 26px; height: 1.5px; flex: none;
  background: var(--line-hi); border-radius: 1px;
}
/* active */
.maw-shell .maw-sub-step.is-active { color: var(--ink); }
.maw-shell .maw-sub-step.is-active .maw-sub-step-dot {
  background: var(--indigo); border-color: var(--indigo); color: #fff;
  box-shadow: 0 0 0 4px var(--indigo-soft);
}
/* done */
.maw-shell .maw-sub-step.is-done .maw-sub-step-dot {
  background: var(--green-soft); border-color: var(--green); color: var(--green);
}
.maw-shell .maw-sub-step.is-done .maw-sub-step-num { display: none; }
.maw-shell .maw-sub-step.is-done .maw-sub-step-tick { display: block; color: var(--green); }
.maw-shell .maw-sub-step.is-done .maw-sub-step-label { color: var(--ink-mut); }
/* skipped: dashed + dimmed, distinct from a green "done" tick */
.maw-shell .maw-sub-step.is-skipped .maw-sub-step-dot {
  background: var(--panel); border-style: dashed; border-color: var(--line-hi);
  color: var(--ink-dim); opacity: .65;
}
.maw-shell .maw-sub-step.is-skipped .maw-sub-step-label { color: var(--ink-dim); opacity: .75; }

/* ---- two-column body ---------------------------------------------------- */

.maw-shell .maw-sub-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* 2:1. The left column is where the work happens -- the system model, the
     include structure, the fields being filled in -- while the right is a
     read-only reflection of it (overview, scenario, deck check, tracking), so
     it does not need half the page. It was 1fr / 1.05fr, i.e. the reflection
     was the WIDER of the two.
     Nothing here can clip as a result: .maw-sub-right already carries
     overflow:auto, so a panel that genuinely needs more room scrolls itself,
     and under 860px the grid collapses to a single column anyway. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
/* One 24px gutter on all four sides, matching the header bar's 24px, so the
   title, the stepper and both columns share a single left spine. It used to be
   22px/26px, which read as uneven and lined up with nothing above it. */
.maw-shell .maw-sub-left,
.maw-shell .maw-sub-right {
  min-width: 0; min-height: 0;
  overflow: auto;
  padding: 24px;
}
/* The left column butts straight against the dark app rail, with no panel edge
   of its own, so a 24px gutter reads tighter there than the same 24px does
   inside the soft-panelled right column. 32px on the left evens the two up --
   and it is the same spine as .maw-sub-stepper-wrap's padding-left above, so
   the header title and this column still start on one vertical line. */
.maw-shell .maw-sub-left { padding-left: 32px; }
.maw-shell .maw-sub-right {
  border-left: 1px solid var(--line);
  background: var(--panel-soft);
}
@media (max-width: 860px) {
  .maw-shell .maw-sub-main { grid-template-columns: 1fr; }
  .maw-shell .maw-sub-right { border-left: none; border-top: 1px solid var(--line); }
  /* Eight steps and a name do not share one row this narrow -- stack them back
     up rather than let the stepper's scroller eat the title. */
  .maw-shell .maw-sub-stepper-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 24px 14px 32px;
  }
  .maw-shell .maw-sub-stepper { margin-left: 0; }
}

.maw-shell .maw-sub-intro { margin-bottom: 20px; }
.maw-shell .maw-sub-h1 {
  font-size: 20px; font-weight: 800; color: var(--navy);
  margin: 0 0 4px;
}
.maw-shell .maw-sub-sub {
  font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin: 0;
}

/* per-step heading inside the left body */
.maw-shell .maw-sub-step-head { margin-bottom: 16px; }
.maw-shell .maw-sub-step-title {
  display: block; font-size: 15px; font-weight: 700; color: var(--ink);
}
.maw-shell .maw-sub-step-hint {
  display: block; font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.5; margin-top: 3px;
}

/* right detail header + empty state */
.maw-shell .maw-sub-detail-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-mut); margin-bottom: 12px;
}
.maw-shell .maw-sub-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; height: 100%; min-height: 200px;
  color: var(--ink-dim); font-size: 13px;
}
.maw-shell .maw-sub-detail-empty-ic { font-size: 26px; color: var(--line-hi); }

/* compact assembly / file roll-up list on the right */
.maw-shell .maw-sub-ov-asm { margin-top: 12px; }
.maw-shell .maw-sub-ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.maw-shell .maw-sub-ov-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.maw-shell .maw-sub-ov-list li.is-excluded .maw-sub-ov-name { text-decoration: line-through; color: var(--ink-mut); }
.maw-shell .maw-sub-ov-name { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-sub-ov-tag {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-dim); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 7px;
}
.maw-shell .maw-sub-ov-muted { color: var(--ink-dim); }
.maw-shell .maw-sub-deckprev { display: flex; flex-direction: column; gap: 12px; }
.maw-shell .maw-sub-deckprev .maw-sub-card { box-shadow: none; }

/* directional fade when the step changes */
@keyframes maw-sub-in-fwd  { from { opacity: 0; transform: translateX(10px); }  to { opacity: 1; transform: none; } }
@keyframes maw-sub-in-back { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.maw-shell .maw-sub-anim-fwd  { animation: maw-sub-in-fwd  .22s ease both; }
.maw-shell .maw-sub-anim-back { animation: maw-sub-in-back .22s ease both; }

/* ---- footer (bottom, buttons right) ------------------------------------- */

.maw-shell .maw-sub-foot-error {
  flex: none;
  display: none;
  padding: 0 26px;
  color: var(--red); font-size: 13px; font-weight: 600;
}
.maw-shell .maw-sub-foot-error.is-shown { display: block; padding: 10px 26px 0; }

.maw-shell .maw-sub-foot {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.maw-shell .maw-sub-foot-l { flex: none; }
.maw-shell .maw-sub-foot-r { margin-left: auto; display: flex; gap: 10px; }

.maw-shell .maw-sub-btn {
  height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-hi); border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.maw-shell .maw-sub-btn:hover { background: var(--panel-hover); border-color: var(--ink-dim); }
.maw-shell .maw-sub-btn:disabled { opacity: .5; cursor: default; }
.maw-shell .maw-sub-btn.maw-sub-primary {
  color: #fff; background: var(--indigo); border-color: var(--indigo);
}
.maw-shell .maw-sub-btn.maw-sub-primary:hover { background: var(--indigo-bd); border-color: var(--indigo-bd); }
.maw-shell .maw-sub-btn.is-hidden { display: none; }
.maw-shell .maw-sub-btn.is-loading { opacity: .85; }
.maw-shell .maw-sub-btn-label { line-height: 1; }
/* Skip = quieter than Next: muted text, no fill until hover. */
.maw-shell .maw-sub-btn.maw-sub-ghost {
  color: var(--ink-mut); background: transparent; border-color: var(--line-hi);
}
.maw-shell .maw-sub-btn.maw-sub-ghost:hover { color: var(--ink); background: var(--panel-hover); }

/* ---- shared atoms (fields, cards, notes) -------------------------------- */

.maw-shell .maw-sub-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.maw-shell .maw-sub-label {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-mut);
}
.maw-shell .maw-sub-input {
  width: 100%; padding: 10px 12px;
  font-size: 14px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.maw-shell .maw-sub-input:focus {
  border-color: var(--indigo-bd);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

/* ---- HPC target: deck-only row + config card grid ----------------------- */

.maw-shell .maw-sub-hpc-grouplabel {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mut); margin: 16px 2px 8px;
}
.maw-shell .maw-sub-hpc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
/* base card (deck-only row + config cards). The deck-only one is full width. */
.maw-shell .maw-sub-hpc-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left;
  padding: 12px 14px; min-height: 76px;
  background: var(--panel); border: 1px solid var(--line-hi);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; color: var(--ink);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.maw-shell .maw-sub-hpc-card.maw-sub-hpc-deckonly { width: 100%; min-height: 0; align-items: center; }
.maw-shell .maw-sub-hpc-card:hover { border-color: var(--ink-dim); background: var(--panel-hover); }
.maw-shell .maw-sub-hpc-card-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.maw-shell .maw-sub-hpc-card-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.maw-shell .maw-sub-hpc-card-line {
  font-size: 12px; color: var(--ink-mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.maw-shell .maw-sub-hpc-card-flag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--amber, #b06b00);
}
.maw-shell .maw-sub-hpc-card-tick {
  position: absolute; top: 10px; right: 12px;
  font-size: 13px; color: var(--indigo);
  opacity: 0; transition: opacity .12s ease;
}
.maw-shell .maw-sub-hpc-card.is-active {
  border-color: var(--indigo); background: var(--indigo-soft);
  box-shadow: 0 0 0 1px var(--indigo) inset;
}
.maw-shell .maw-sub-hpc-card.is-active .maw-sub-hpc-card-tick { opacity: 1; }
.maw-shell .maw-sub-hpc-card.is-disabled { opacity: .55; cursor: default; }
.maw-shell .maw-sub-hpc-card.is-disabled:hover { border-color: var(--line-hi); background: var(--panel); }

/* the dashed "+ New configuration" card */
.maw-shell .maw-sub-hpc-addcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; padding: 12px;
  background: transparent; border: 1.5px dashed var(--line-hi);
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; color: var(--ink-mut);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.maw-shell .maw-sub-hpc-addcard:hover {
  border-color: var(--indigo); color: var(--indigo); background: var(--indigo-soft);
}
.maw-shell .maw-sub-hpc-add-plus { font-size: 22px; line-height: 1; font-weight: 400; }
.maw-shell .maw-sub-hpc-add-label { font-size: 12.5px; font-weight: 600; }

/* ---- Review (terminal success page) ------------------------------------- */

.maw-shell .maw-sub-review-hero {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; margin-bottom: 16px;
  background: var(--green-soft); border: 1px solid var(--green);
  border-radius: var(--radius-sm);
}
.maw-shell .maw-sub-review-check {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff; font-size: 17px; font-weight: 700;
}
.maw-shell .maw-sub-review-herotext { min-width: 0; }
.maw-shell .maw-sub-review-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.maw-shell .maw-sub-review-sub { font-size: 13px; color: var(--ink-mut); }
.maw-shell .maw-sub-review-actions { display: flex; flex-direction: column; gap: 12px; }
.maw-shell .maw-sub-review-actionrow { display: flex; align-items: center; gap: 14px; }
.maw-shell .maw-sub-review-newtab {
  font-size: 12.5px; font-weight: 600; color: var(--indigo);
  text-decoration: none; cursor: pointer;
}
.maw-shell .maw-sub-review-newtab:hover { text-decoration: underline; }

.maw-shell .maw-sub-loading {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-dim); font-size: 13px; padding: 14px 2px;
}
.maw-shell .maw-sub-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-hi); border-top-color: var(--indigo);
  display: inline-block; animation: maw-sub-spin .7s linear infinite;
}
@keyframes maw-sub-spin { to { transform: rotate(360deg); } }

.maw-shell .maw-sub-empty {
  padding: 18px; border: 1px dashed var(--line-hi); border-radius: var(--radius);
  color: var(--ink-dim); font-size: 13px; background: var(--panel-soft);
}
.maw-shell .maw-sub-empty.is-error { color: var(--red); border-color: var(--red-soft); background: var(--red-soft); }

.maw-shell .maw-sub-note {
  font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin-top: 10px;
}

/* ---- Revision: read-only include-structure preview ---------------------- */

/* The panel itself is rendered by the SHARED
   Utils.IncludeStructureRenderers, so it carries .maw-detail-sm-* classes and
   is styled by the System Model page's own stylesheet -- only the host box and
   the read-only include dot live here. */
.maw-shell .maw-sub-incl-preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.maw-shell .maw-sub-incl-preview:empty { min-height: 0; }
/* The deck page carries a 820px min-width floor (see the horizontal overflow
   contract in detailed/systemmodel.css) sized for the EDITABLE views, whose
   header rows end in Swap / Un-nest / an enabled Transform. This preview is
   read-only -- none of those render -- and it lives in the submit page's LEFT
   COLUMN, roughly half the width the detail views get. So the floor was wider
   than the pane at every realistic window size and the deck sat permanently
   scrolled sideways: that is what made the structure look shoved up against
   its left edge with a scrollbar it never needed.
   min-content is the same no-clipping guarantee derived from the content
   instead of hardcoded -- every flex:none control still gets its own width, the
   prose still ellipsises (measured: 650px for a 3-deep tree here vs the 820
   floor, and 0 escaped controls from 3127px down to 760px). The deck keeps its
   own overflow-x, which now engages only on real overflow.
   Do NOT relax this to min-width:0 -- measured at 1000px and below that lets
   .maw-incl-ncard's overflow:hidden clip the count chips and chevrons away
   (up to 136px past the card edge) with no scrollbar to reach them. */
.maw-shell .maw-sub-incl-preview .maw-detail-sm-deck-page { min-width: min-content; }

/* Static stand-in for the include checkbox when the structure is read-only. */
.maw-shell .maw-detail-sm-incl-ro-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line-hi);
}
.maw-shell .maw-detail-sm-incl-ro-dot.is-on { background: var(--green); border-color: var(--green); }

/* ---- summary card + key/values (stages 2 & 5) --------------------------- */

.maw-shell .maw-sub-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.maw-shell .maw-sub-card-title {
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
}
.maw-shell .maw-sub-kvs { display: flex; flex-direction: column; gap: 9px; }
.maw-shell .maw-sub-kv { display: flex; gap: 14px; align-items: baseline; }
.maw-shell .maw-sub-k {
  flex: 0 0 150px; font-size: 12px; font-weight: 600; color: var(--ink-mut);
  text-transform: uppercase; letter-spacing: .02em;
}
.maw-shell .maw-sub-v { font-size: 14px; color: var(--ink); min-width: 0; }
.maw-shell .maw-sub-v.is-dim { color: var(--ink-mut); }

/* ---- "coming soon / next" framing band ---------------------------------- */

.maw-shell .maw-sub-soon {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-mut); line-height: 1.55;
  background: var(--indigo-soft); border: 1px solid var(--indigo-bd);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
.maw-shell .maw-sub-soon-badge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: var(--indigo);
  border-radius: 999px; padding: 2px 9px;
}

/* ---- sections (sensor mapping / transforms) ----------------------------- */

.maw-shell .maw-sub-sec {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.maw-shell .maw-sub-sec-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--ink-mut); margin: 0 0 10px;
}
.maw-shell .maw-sub-filelist, .maw-shell .maw-sub-chlist {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px;
}
.maw-shell .maw-sub-filelist li {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink);
}
.maw-shell .maw-sub-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-dim); }
.maw-shell .maw-sub-dot.t-asm { background: var(--t-asm); }

.maw-shell .maw-sub-chlist li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--panel-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.maw-shell .maw-sub-ch-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.maw-shell .maw-sub-ch-meta { font-size: 12px; color: var(--ink-mut); }
.maw-shell .maw-sub-ch-bind {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--t-lc); background: var(--panel);
  border: 1px solid var(--line-hi); border-radius: 999px; padding: 1px 8px;
}

/* ---- stage 5: deck check + validation report ---------------------------- */

.maw-shell .maw-sub-deckcheck { margin: 16px 0; }
.maw-shell .maw-sub-sec-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.maw-shell .maw-sub-sec-row .maw-sub-sec-h { margin: 0; }
.maw-shell .maw-sub-validate-btn { flex: none; }

.maw-shell .maw-sub-report:empty { display: none; }
.maw-shell .maw-sub-report { display: flex; flex-direction: column; gap: 10px; }

.maw-shell .maw-sub-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
}
.maw-shell .maw-sub-banner.is-ok  { background: var(--green-soft); color: var(--green); border: 1px solid var(--green); }
.maw-shell .maw-sub-banner.is-bad { background: var(--red-soft);   color: var(--red);   border: 1px solid var(--red); }
.maw-shell .maw-sub-banner-icon { font-size: 15px; line-height: 1; }

.maw-shell .maw-sub-rgroup { display: flex; flex-direction: column; gap: 5px; }
.maw-shell .maw-sub-rgroup-h {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-mut);
}
.maw-shell .maw-sub-rgroup-h.is-err  { color: var(--red); }
.maw-shell .maw-sub-rgroup-h.is-warn { color: #b8791f; }
.maw-shell .maw-sub-rlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.maw-shell .maw-sub-rlist li {
  font-size: 13px; color: var(--ink); padding: 7px 10px;
  border-radius: 6px; border: 1px solid var(--line);
}
.maw-shell .maw-sub-rlist.is-err  li { background: var(--red-soft);   border-color: var(--red-soft); }
.maw-shell .maw-sub-rlist.is-warn li { background: #faf3e2;           border-color: #efe2c4; }

/* ---- stage 3: sensor mapping (prefilled, overridable) ------------------- */

.maw-shell .maw-sub-binds-head { font-size: 13px; color: var(--ink-mut); margin-bottom: 12px; }
.maw-shell .maw-sub-bind-list { display: flex; flex-direction: column; gap: 8px; }
.maw-shell .maw-sub-bind-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.maw-shell .maw-sub-bind-meta { flex: 0 0 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-sub-bind-ch { font-size: 13px; font-weight: 600; color: var(--ink); }
.maw-shell .maw-sub-bind-branch { font-size: 11px; color: var(--ink-dim); }
.maw-shell .maw-sub-bind-select { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-sub-conf {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.maw-shell .maw-sub-conf.is-high   { color: var(--green);  background: var(--green-soft); }
.maw-shell .maw-sub-conf.is-medium { color: var(--green);  background: var(--green-soft); }
.maw-shell .maw-sub-conf.is-low    { color: #b8791f;       background: #faf3e2; }
.maw-shell .maw-sub-conf.is-none   { color: var(--red);    background: var(--red-soft); }
.maw-shell .maw-sub-conf.is-manual { color: var(--indigo); background: var(--indigo-soft); }
.maw-shell .maw-sub-conf.is-configured { color: var(--green); background: var(--green-soft); }
/* R2026-65: an EMPTY selection is the healthy default (extract every applicable
   sensor), so it must not read as a warning. Neutral, not red. */
.maw-shell .maw-sub-conf.is-open   { color: var(--ink-dim); background: var(--panel-soft); }
.maw-shell .maw-sub-conf.is-auto   { color: var(--green);  background: var(--green-soft); }
.maw-shell .maw-sub-conf.is-llm    { color: var(--indigo); background: var(--indigo-soft); }

/* On-demand matcher buttons above the channel list. */
.maw-shell .maw-sub-binds-acts {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.maw-shell .maw-sub-binds-acts .maw-btn { font-size: 11px; padding: 4px 10px; }
.maw-shell .maw-sub-binds-acts .maw-btn[disabled] { opacity: .5; cursor: default; }
.maw-shell .maw-sub-bind-actnote { font-size: 11px; color: var(--ink-dim); }
.maw-shell .maw-sub-bind-actnote.is-error { color: var(--red); }

/* ---- stage 3: KPI-to-template-channel mapping ------------------------- */

.maw-shell .maw-sub-kpi-set {
  margin-top: 10px; padding: 12px;
  background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.maw-shell .maw-sub-kpi-set-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.maw-shell .maw-sub-kpi-set-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.maw-shell .maw-sub-kpi-count { flex: none; color: var(--ink-dim); font-size: 11px; }
.maw-shell .maw-sub-kpi-save { flex: none; height: 28px; font-size: 12px; }
.maw-shell .maw-sub-kpi-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.maw-shell .maw-sub-kpi-meta { flex: 0 0 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-sub-kpi-label { color: var(--ink); font-size: 13px; font-weight: 600; }
.maw-shell .maw-sub-kpi-summary { color: var(--ink-dim); font-size: 11px; }
.maw-shell .maw-sub-kpi-msel { flex: 1 1 auto; min-width: 0; }

/* R2026-67: the .maw-sub-tf-* per-file transform card styles lived here and were
   removed with the UI. Transforms are authored in the System Model's Include
   Structure and reach the deck through data.composition. */

/* section spacing when several stack in the deck stage */
.maw-shell .maw-sub-binds .maw-sub-sec { margin-bottom: 16px; }

/* ---- stage 4: parameter extraction + override --------------------------- */

.maw-shell .maw-sub-param-list { display: flex; flex-direction: column; gap: 7px; }
.maw-shell .maw-sub-param-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .12s ease, background .12s ease;
}
.maw-shell .maw-sub-param-row.is-changed { border-color: var(--indigo-bd); background: var(--indigo-soft); }
.maw-shell .maw-sub-param-row.is-readonly { background: var(--panel-soft); }
.maw-shell .maw-sub-param-meta { flex: 0 0 38%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.maw-shell .maw-sub-param-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maw-shell .maw-sub-param-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-dim);
}
.maw-shell .maw-sub-param-where { font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-sub-param-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 4px 8px; font-size: 13px; }
.maw-shell .maw-sub-param-val {
  flex: 1 1 auto; min-width: 0; text-align: right; font-size: 13px; color: var(--ink-mut);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.maw-shell .maw-sub-param-reset {
  flex: none; font-size: 11px; font-weight: 600; color: var(--indigo);
  background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.maw-shell .maw-sub-param-reset:hover { background: var(--indigo-soft); }
.maw-shell .maw-sub-param-spacer { flex: none; width: 44px; }

/* ---- shared multi-select (MultiSelectView) ----------------------------- */

.maw-shell .maw-msel {
  position: relative;
  min-width: 0;
  color: var(--ink);
}
.maw-shell .maw-msel * { box-sizing: border-box; }
.maw-shell .maw-msel-field {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.maw-shell .maw-msel-field:focus,
.maw-shell .maw-msel-field:hover {
  border-color: var(--indigo-bd);
}
.maw-shell .maw-msel-field:focus { box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-shell .maw-msel-chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.maw-shell .maw-msel-placeholder { flex: 1 1 auto; color: var(--ink-dim); font-size: 13px; }
.maw-shell .maw-msel-chevron { flex: none; color: var(--ink-mut); font-size: 16px; line-height: 1; }
.maw-shell .maw-msel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 6px 3px 8px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
}
.maw-shell .maw-msel-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-msel-chip-remove {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-mut);
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 14px;
}
.maw-shell .maw-msel-chip-remove:hover { color: var(--ink); background: var(--panel-hover); }
.maw-shell .maw-msel-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.maw-shell .maw-msel-search-wrap { padding: 8px; border-bottom: 1px solid var(--line); }
.maw-shell .maw-msel-search {
  width: 100%;
  height: 32px;
  padding: 6px 9px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  outline: none;
  font: inherit;
  font-size: 13px;
}
.maw-shell .maw-msel-search:focus { border-color: var(--indigo-bd); box-shadow: 0 0 0 3px var(--indigo-soft); }
.maw-shell .maw-msel-options { max-height: 240px; overflow-y: auto; padding: 4px; }
.maw-shell .maw-msel-group {
  padding: 7px 7px 4px;
  color: var(--ink-mut);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.maw-shell .maw-msel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
}
.maw-shell .maw-msel-option:hover,
.maw-shell .maw-msel-option.maw-msel-is-highlighted { background: var(--panel-hover); }
.maw-shell .maw-msel-check { flex: none; margin: 0; accent-color: var(--indigo); }
.maw-shell .maw-msel-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-msel-empty { padding: 18px 10px; color: var(--ink-dim); font-size: 13px; text-align: center; }

/* ---- KPI per-sensor subset rows (S7) ------------------------------------ */
.maw-shell .maw-sub-kpi-sensors { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px 12px; }
.maw-shell .maw-sub-kpi-sensor-row { display: flex; align-items: flex-start; gap: 10px; }
.maw-shell .maw-sub-kpi-sensor-ch { flex: 0 0 auto; min-width: 150px; font-size: 12px; color: var(--ink-mut); padding-top: 7px; }
.maw-shell .maw-sub-kpi-sensor-slot { flex: 1 1 auto; min-width: 0; }

/* ---- DOE mode + experiments -------------------------------------------- */

/* The row-layout override that used to live here (gap:16px; align-items:center)
   existed to sit .maw-sub-mode beside the stepper. Nothing renders .maw-sub-mode
   any more, and being later in the cascade it silently re-centred the bar. */
.maw-shell .maw-sub-mode {
  display: inline-flex; flex: none; overflow: hidden;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel-soft);
}
.maw-shell .maw-sub-mode-btn {
  border: 0; padding: 5px 10px; background: transparent; color: var(--ink-mut);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 700;
}
.maw-shell .maw-sub-mode-btn.is-active { background: var(--indigo); color: #fff; }
.maw-shell .maw-sub-doe-vars, .maw-shell .maw-sub-doe-controls {
  margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft);
}
.maw-shell .maw-sub-doe-var {
  display: grid; grid-template-columns: 68px minmax(90px, 1fr) 80px 76px 76px 112px;
  gap: 7px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line);
}
.maw-shell .maw-sub-doe-var:first-of-type { border-top: 0; }
.maw-shell .maw-sub-doe-check { font-size: 11px; color: var(--ink-mut); white-space: nowrap; }
.maw-shell .maw-sub-doe-name, .maw-shell .maw-sub-doe-value {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--ink);
}
.maw-shell .maw-sub-doe-value { color: var(--ink-mut); text-align: right; }
.maw-shell .maw-sub-doe-var .maw-sub-input { height: 29px; min-width: 0; padding: 4px 6px; font-size: 12px; }
.maw-shell .maw-sub-doe-note { grid-column: 2 / -1; color: var(--ink-dim); font-size: 11px; }
.maw-shell .maw-sub-doe-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.maw-shell .maw-sub-doe-controls .maw-sub-sec-h { grid-column: 1 / -1; }
.maw-shell .maw-sub-doe-controls label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-mut); font-size: 11px; font-weight: 600; }
/* The compact padding is load-bearing, not cosmetic. .maw-sub-input's base rule
   is padding:10px 12px, sized for a full-height field; these controls are
   border-box and pinned to height:30px, so inheriting that padding left
   30 - 20 - 2 = 8px of CONTENT box for a 12px font and sheared the bottom off
   every value ("Latin Hypercube" clipped mid-glyph). Shrink the padding
   whenever you shrink the height -- .maw-sub-doe-var's rule below already does,
   which is why its fields never showed the bug. Measured after: 20px content
   box, same as that sibling. */
.maw-shell .maw-sub-doe-controls .maw-sub-input { min-width: 0; height: 30px; padding: 4px 6px; font-size: 12px; }
.maw-shell .maw-sub-doe-advanced { grid-column: 1 / -1; color: var(--ink-mut); font-size: 12px; }
.maw-shell .maw-sub-doe-advanced[open] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.maw-shell .maw-sub-doe-advanced summary { grid-column: 1 / -1; cursor: pointer; color: var(--indigo); font-weight: 700; }
.maw-shell .maw-sub-doe-matrix { max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.maw-shell .maw-sub-doe-matrix table { width: 100%; border-collapse: collapse; font-size: 12px; }
.maw-shell .maw-sub-doe-matrix th, .maw-shell .maw-sub-doe-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.maw-shell .maw-sub-doe-matrix th { position: sticky; top: 0; background: var(--panel-soft); color: var(--ink-mut); font-size: 11px; text-transform: uppercase; }
.maw-shell .maw-sub-doe-baseline { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.maw-shell .maw-sub-doe-stale { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #efe2c4; border-radius: var(--radius-sm); background: #faf3e2; color: #b8791f; font-size: 12px; font-weight: 700; }
.maw-shell .maw-sub-doe-submit-note { margin: 0 0 14px; color: var(--ink); font-size: 13px; font-weight: 600; }
.maw-shell .maw-sub-doe-go-params { border: 0; padding: 0; color: var(--indigo); background: none; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 980px) {
  /* the wrap is column/flex-start at every width now -- no override needed here */
  .maw-shell .maw-sub-doe-var { grid-template-columns: 68px minmax(80px, 1fr) 70px 70px; }
  .maw-shell .maw-sub-doe-var .maw-sub-doe-kind { grid-column: 2 / span 2; }
}

/* *PARAMETER_EXPRESSION rows (phase 09 I5) */
.maw-shell .maw-sub-param-row.is-expr .maw-sub-param-exprinput {
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    min-width: 150px;
}
.maw-shell .maw-sub-param-calc {
    font-size: 11px;
    color: var(--d3v-text-muted, #8a8578);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.maw-shell .maw-sub-param-row.is-invalid { border-color: var(--d3v-status-danger, #b4443c); }
.maw-shell .maw-sub-param-row.is-invalid .maw-sub-param-exprinput {
    border-color: var(--d3v-status-danger, #b4443c);
    color: var(--d3v-status-danger, #b4443c);
}
.maw-shell .maw-sub-param-row.is-invalid .maw-sub-param-calc { color: var(--d3v-status-danger, #b4443c); }

/* ---------------------------------------------------------------------------
   CS-573 assembly-swap DOE. The DOE stage is one stage with two halves
   (Parametric | Assembly swaps) on the left and a persistent run plan on the
   right, so the user always sees how many simulations a Submit will queue.
   --------------------------------------------------------------------------- */

.maw-shell .maw-sub-doe-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.maw-shell .maw-sub-doe-tab {
    flex: 1 1 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--panel-soft); color: var(--ink-mut);
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.maw-shell .maw-sub-doe-tab:hover { background: var(--panel-hover); color: var(--ink); }
.maw-shell .maw-sub-doe-tab.is-active {
    background: var(--indigo-soft); border-color: var(--indigo-bd); color: var(--indigo);
}
.maw-shell .maw-sub-doe-tab-badge {
    display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
    border-radius: 8px; background: var(--indigo); color: #fff; font-size: 10px; line-height: 16px;
}
.maw-shell .maw-sub-doe-tab-link {
    border: 0; background: none; padding: 0; color: var(--indigo);
    font: inherit; text-decoration: underline; cursor: pointer;
}
.maw-shell .maw-sub-doe-empty-alt { margin-top: 8px; color: var(--ink-mut); font-size: 12px; }

/* --- swap sets (left) --- */
.maw-shell .maw-sub-doe-swaps { display: flex; flex-direction: column; gap: 10px; }
.maw-shell .maw-sub-swap-set {
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft);
}
.maw-shell .maw-sub-swap-set-head {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-bottom: 1px solid var(--line);
}
.maw-shell .maw-sub-swap-name { flex: 1 1 auto; min-width: 0; height: 28px; font-size: 12px; font-weight: 600; }
.maw-shell .maw-sub-swap-count { color: var(--ink-mut); font-size: 11px; white-space: nowrap; }
.maw-shell .maw-sub-swap-all,
.maw-shell .maw-sub-swap-none {
    border: 0; background: none; padding: 0; color: var(--indigo);
    font-size: 11px; text-decoration: underline; cursor: pointer; white-space: nowrap;
}
.maw-shell .maw-sub-swap-remove {
    border: 0; background: none; padding: 0 2px; color: var(--ink-dim);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.maw-shell .maw-sub-swap-remove:hover { color: var(--red, #b4443c); }
.maw-shell .maw-sub-swap-items {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px 10px; padding: 8px;
}
.maw-shell .maw-sub-swap-item {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 0; color: var(--ink); font-size: 12px; cursor: pointer;
}
.maw-shell .maw-sub-swap-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maw-shell .maw-sub-swap-item.is-taken { color: var(--ink-dim); cursor: not-allowed; }
.maw-shell .maw-sub-swap-item-note { color: var(--ink-dim); font-size: 10px; font-style: italic; }

/* --- run plan (right, always visible) --- */
.maw-shell .maw-sub-doe-plan {
    padding: 10px; margin-bottom: 12px;
    border: 1px solid var(--line); border-left: 3px solid var(--indigo);
    border-radius: var(--radius-sm); background: var(--panel-soft);
}
.maw-shell .maw-sub-doe-plan.is-warn  { border-left-color: var(--amber, #b8860b); }
.maw-shell .maw-sub-doe-plan.is-danger { border-left-color: var(--red, #b4443c); }
.maw-shell .maw-sub-doe-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.maw-shell .maw-sub-doe-chain-term {
    padding: 2px 7px; border: 1px solid var(--line-hi); border-radius: 10px;
    background: var(--panel); color: var(--ink-mut); font-size: 11px;
}
.maw-shell .maw-sub-doe-chain-term b { color: var(--ink); }
.maw-shell .maw-sub-doe-chain-term.is-empty { font-style: italic; color: var(--ink-dim); }
.maw-shell .maw-sub-doe-chain-x { color: var(--ink-dim); font-size: 11px; }
.maw-shell .maw-sub-doe-total { margin-top: 8px; color: var(--ink); font-size: 13px; }
.maw-shell .maw-sub-doe-total b { font-size: 20px; font-weight: 700; }
.maw-shell .maw-sub-doe-grouping { margin-top: 2px; color: var(--ink-mut); font-size: 11px; }
.maw-shell .maw-sub-doe-plan-warn { margin-top: 6px; color: var(--amber, #b8860b); font-size: 11px; font-weight: 600; }
.maw-shell .maw-sub-doe-plan.is-danger .maw-sub-doe-plan-warn { color: var(--red, #b4443c); }

.maw-shell .maw-sub-doe-combos,
.maw-shell .maw-sub-doe-studies { width: 100%; border-collapse: collapse; font-size: 11px; }
.maw-shell .maw-sub-doe-combos th, .maw-shell .maw-sub-doe-studies th {
    text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line);
    color: var(--ink-mut); font-weight: 600;
}
.maw-shell .maw-sub-doe-combos td, .maw-shell .maw-sub-doe-studies td {
    padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.maw-shell .maw-sub-doe-combos-more { padding: 4px 6px; color: var(--ink-dim); font-size: 11px; font-style: italic; }

.maw-shell .maw-sub-doe-submit-sub { margin-top: 3px; color: var(--ink-mut); font-size: 11px; }
.maw-shell .maw-sub-doe-submit-warn { margin-top: 5px; color: var(--amber, #b8860b); font-size: 11px; font-weight: 600; }

/* ---- Phase 34d: Revision stage + resolved chip ------------------------ */
.maw-shell .maw-sub-rev-preview-wrap {
  min-height: 420px;
  display: flex;
}
.maw-shell .maw-sub-rev-preview-wrap .maw-sub-incl-preview { flex: 1 1 auto; min-width: 0; }
.maw-shell .maw-sub-revision-controls { max-width: 100%; }
.maw-shell .maw-sub-revision-sm-field { margin-bottom: 14px; }
.maw-shell .maw-sub-revision-controls .maw-sub-sec { padding: 12px; }
.maw-shell .maw-sub-revision-controls .maw-sub-bind-row {
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 10px;
}
.maw-shell .maw-sub-revision-controls .maw-sub-bind-meta { flex: 1 1 100%; }
.maw-shell .maw-sub-revision-controls .maw-sub-bind-select { flex: 1 1 100%; }
.maw-shell .maw-sub-revision-controls .maw-sub-bind-select .maw-sub-input { width: 100%; }
.maw-shell .maw-sub-resolved-chip { cursor: pointer; margin-left: 8px; vertical-align: middle; font-weight: 500; }
.maw-shell .maw-sub-resolved-chip:hover { filter: brightness(0.96); }
.maw-shell .maw-sub-dropped-note { margin: 8px 0 4px; }
.maw-shell .maw-sub-pinned-note { margin: 0 0 8px; }

/* ---- P1-5: name tokens, description, add to study, batch runs ------------ */

.maw-shell textarea.maw-sub-input { resize: vertical; min-height: 56px; font-family: inherit; line-height: 1.4; }
.maw-shell .maw-sub-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.maw-shell .maw-sub-token {
  border: 1px solid var(--line-hi); border-radius: 999px; padding: 2px 9px;
  background: var(--panel-soft); color: var(--ink-mut); cursor: pointer;
  font: inherit; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.maw-shell .maw-sub-token:hover { color: var(--ink); border-color: var(--indigo-bd); }
.maw-shell .maw-sub-name-preview { min-height: 16px; font-size: 12px; color: var(--ink-mut); }
.maw-shell .maw-sub-name-preview b { color: var(--ink); font-weight: 600; }
.maw-shell .maw-sub-study-new.is-hidden { display: none; }

.maw-shell .maw-sub-lc-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--ink-mut); }
.maw-shell .maw-sub-lc-tools button { border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.maw-shell .maw-sub-lc-list { display: flex; flex-direction: column; gap: 6px; }
.maw-shell .maw-sub-lc-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
}
.maw-shell .maw-sub-lc-item.is-on { border-color: var(--indigo-bd); background: var(--indigo-soft); }
.maw-shell .maw-sub-lc-item-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.maw-shell .maw-sub-lc-item-note { margin-left: auto; font-size: 11px; color: var(--ink-mut); }

.maw-shell .maw-sub-batch-table { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.maw-shell .maw-sub-batch { width: 100%; border-collapse: collapse; font-size: 12px; }
.maw-shell .maw-sub-batch th, .maw-shell .maw-sub-batch td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.maw-shell .maw-sub-batch th { position: sticky; top: 0; background: var(--panel-soft); color: var(--ink-mut); font-size: 11px; text-transform: uppercase; }
.maw-shell .maw-sub-batch tr.is-off td { opacity: .55; }
.maw-shell .maw-sub-batch .maw-sub-input { height: 28px; min-width: 0; padding: 3px 6px; font-size: 12px; }
.maw-shell .maw-sub-batch-namecell { min-width: 180px; }
.maw-shell .maw-sub-batch-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--panel-soft); color: var(--ink-mut); font-size: 11px; font-weight: 600;
}
.maw-shell .maw-sub-batch-pill.is-ok    { background: var(--green-soft); color: var(--green); }
.maw-shell .maw-sub-batch-pill.is-warn  { background: #faf3e2; color: #b8791f; }
.maw-shell .maw-sub-batch-pill.is-error { background: var(--red-soft); color: var(--red); }
.maw-shell .maw-sub-batch-err { margin-top: 4px; max-width: 260px; font-size: 11px; color: var(--red); white-space: normal; }
.maw-shell .maw-sub-batch-links { display: flex; gap: 8px; margin-top: 4px; }
.maw-shell .maw-sub-batch-links button { border: 0; background: none; padding: 0; color: var(--indigo); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.maw-shell .maw-sub-batch-act .maw-sub-btn { height: 28px; padding: 0 10px; font-size: 12px; }

.maw-tfx-modal-root {
    position: fixed;
    /* Yield the pin-left app rail (--d3v-rail-w, 0 when it is hidden) and sit
       above the include card's full-screen lift (1300). */
    top: 0; left: var(--d3v-rail-w, 0px); right: 0; bottom: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
    overflow: auto;
    background: rgba(28, 24, 18, 0.55);
    animation: maw-wf-fade .16s ease-out;
}
.maw-tfx-modal-panel {
    display: flex;
    flex-direction: column;
    /* Wider than the lcp/wf defaults on purpose: the preview column has to fit
       a full-width LS-DYNA keyword card without wrapping (see .maw-tfx-preview),
       and the editor column still needs room for a 4-across offsets grid. */
    width: min(1340px, 96vw);
    max-height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
    overflow: hidden;
    animation: maw-wf-float .2s cubic-bezier(.2, .7, .3, 1);
}
.maw-tfx-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;       /* the two columns inside own their own scrolling */
    display: flex;
}
.maw-tfx-modal-body > .maw-tfx { flex: 1 1 auto; min-width: 0; display: flex; }
/* The file being edited, called out in the subtitle. */
.maw-tfx-subject { color: var(--ink); font-family: var(--font-mono); }

/* Inline host (render_in_modal:false) -- no backdrop, no panel. */
.maw-tfx-inline .maw-tfx-modal-body { display: block; overflow: visible; }

/* ---------------------------------------------------------------- layout */
.maw-tfx-wrap {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.maw-tfx-main {
    flex: 1 1 auto;
    /* A real floor, not 0: with the preview on a fixed basis the editor is the
       column that gives, and below ~460px the operation cards start wrapping
       their axis inputs one per line. */
    min-width: 460px;
    overflow-y: auto;
    padding: 14px 16px 18px;
}
/* The preview is a peer column, not an overlay: it must never cover the field
   the user is typing into, which is the whole reason it can stay open.

   Its width is DERIVED, not chosen. A *INCLUDE_TRANSFORM card is eight
   ten-column fields, so a full line is 80 characters; at the 11.5px monospace
   below that is ~552px of glyphs plus 28px of padding. Anything narrower makes
   every card wrap or scroll horizontally, which defeats the point of showing
   the deck output at all -- a wrapped fixed-format card reads as though the
   columns are wrong. Sized as a fixed basis rather than a percentage so it does
   not shrink back under 80 columns when the panel is narrowed. */
.maw-tfx-preview {
    flex: 0 0 auto;
    width: 596px;
    max-width: 52%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--panel-soft);
}
.maw-tfx-preview-head {
    padding: 10px 14px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mut);
    border-bottom: 1px solid var(--line);
}
.maw-tfx-preview-body {
    flex: 1 1 auto;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre;
}
.maw-tfx-preview-foot {
    padding: 8px 14px 10px;
    border-top: 1px solid var(--line);
    color: var(--ink-dim);
    font-size: 10.5px;
}

/* ---------------------------------------------------------------- file bar */
.maw-tfx-filebar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.maw-tfx-filename {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.maw-tfx-filelabel {
    margin-right: 6px;
    color: var(--ink-dim);
    font-family: inherit;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.maw-tfx-filebar-actions { display: flex; gap: 6px; flex: none; }
.maw-tfx-preview-toggle.is-on {
    border-color: var(--indigo-bd);
    background: var(--indigo-soft);
    color: var(--indigo);
}
.maw-tfx-file-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}
.maw-tfx-file-tab {
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--ink-mut);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
}
.maw-tfx-file-tab:hover { background: var(--panel-hover); color: var(--ink); }
.maw-tfx-file-tab.is-active {
    border-color: var(--indigo-bd);
    background: var(--indigo-soft);
    color: var(--indigo);
    font-weight: 600;
}
.maw-tfx-dot {
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--indigo);
    vertical-align: middle;
}

/* ---------------------------------------------------------------- sections */
.maw-tfx-section { margin-bottom: 10px; }
.maw-tfx-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
    cursor: pointer;
    user-select: none;
}
.maw-tfx-section-head:hover { background: var(--panel-hover); }
.maw-tfx-section-head.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.maw-tfx-caret { color: var(--ink-dim); font-size: 10px; }
.maw-tfx-section-title {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.maw-tfx-count {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--indigo-soft);
    color: var(--indigo);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}
.maw-tfx-section-note { color: var(--ink-dim); font-size: 11px; }
.maw-tfx-section-body {
    padding: 12px 12px 14px;
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    background: var(--panel-soft);
}
.maw-tfx-hint {
    margin-bottom: 10px;
    color: var(--ink-mut);
    font-size: 11.5px;
    line-height: 1.5;
}
.maw-tfx-empty {
    padding: 14px;
    border: 1px dashed var(--line-hi);
    border-radius: var(--radius-sm);
    color: var(--ink-dim);
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
}

/* ---------------------------------------------------------------- operations */
.maw-tfx-op-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.maw-tfx-glyph { font-size: 13px; line-height: 1; }
.maw-tfx-op-list { display: flex; flex-direction: column; gap: 8px; }
.maw-tfx-op-card {
    border: 1px solid var(--line);
    border-left: 3px solid var(--indigo);
    border-radius: var(--radius-sm);
    background: var(--panel);
}
.maw-tfx-op-card.is-unknown { border-left-color: var(--orange); }
.maw-tfx-op-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
}
.maw-tfx-op-verb { color: var(--ink); font-size: 12px; font-weight: 600; }
.maw-tfx-op-unknown { color: var(--orange-strong); font-size: 11px; }
.maw-tfx-op-seq { margin-left: auto; color: var(--ink-dim); font-size: 10.5px; }
.maw-tfx-op-tools { display: flex; gap: 2px; flex: none; }
.maw-tfx-op-tools button {
    width: 22px; height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-mut);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.maw-tfx-op-tools button:hover:not(:disabled) {
    border-color: var(--line);
    background: var(--panel-hover);
    color: var(--ink);
}
.maw-tfx-op-tools button:disabled { opacity: .3; cursor: default; }
.maw-tfx-op-remove:hover:not(:disabled) { color: var(--red) !important; }

.maw-tfx-op-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 10px;
}
.maw-tfx-op-group-label {
    margin-bottom: 5px;
    color: var(--ink-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.maw-tfx-op-fields { display: flex; gap: 6px; }
.maw-tfx-op-field-wrap { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.maw-tfx-op-field-label {
    color: var(--ink-mut);
    font-size: 10.5px;
    font-weight: 500;
    text-align: center;
}
.maw-tfx-op-field { width: 88px; }

/* ---------------------------------------------------------------- inputs */
.maw-tfx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}
.maw-tfx-grid-wide { margin-top: 10px; }
.maw-tfx-num { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.maw-tfx-num-grow { grid-column: span 2; }
.maw-tfx-num-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-mut);
    font-size: 11.5px;
    font-weight: 500;
}
/* The LS-DYNA keyword rides along as a chip so the field is searchable by the
   name in the manual without the label leading with jargon. */
.maw-tfx-kw {
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--bg);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .03em;
}

.maw-tfx input[type="number"],
.maw-tfx input[type="text"],
.maw-tfx select {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    box-shadow: none;
}
.maw-tfx input[type="number"]:focus,
.maw-tfx input[type="text"]:focus,
.maw-tfx select:focus {
    border-color: var(--indigo);
    outline: none;
    box-shadow: 0 0 0 2px var(--indigo-soft);
}
.maw-tfx input::placeholder { color: var(--ink-dim); }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 640px) {
    .maw-tfx-modal-root { padding: 14px 10px; }
}
/* Stacked: the preview is no longer a column, so drop the 80-column basis and
   let it use the full panel width -- it still shows a whole card, just above
   the editor instead of beside it. */
@media (max-width: 1100px) {
    .maw-tfx-wrap { flex-direction: column; }
    .maw-tfx-main { min-width: 0; }
    .maw-tfx-preview {
        flex: none;
        width: auto;
        max-width: none;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid var(--line);
        max-height: 240px;
    }
}

/* ---------------------------------------------------------------------------
   Scope note (Item 1, 2026-08-03).

   This dialog is shared: from an Assembly it edits the only transform there
   is, from a System Model it edits an OVERRIDE layered over the assembly's.
   Nothing else on the dialog distinguishes those, so the caller passes a
   one-liner and it renders here, under the subtitle.
   --------------------------------------------------------------------------- */
.maw-shell .maw-tfx-scopenote {
    margin: 6px 0 0;
    padding: 6px 9px;
    border-left: 2px solid var(--indigo, #6366f1);
    border-radius: 0 4px 4px 0;
    background: var(--indigo-soft, #eef2ff);
    color: var(--ink-mut, #5b6478);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ==========================================================================
   TransformationManagerView -- the levels ladder wrapped around the editor.

   Three columns: Levels | Editor | Deck output. The last two are
   TransformEditorView embedded inline (its own .maw-tfx-wrap already lays
   main + preview side by side), so only the ladder and the chrome are new.
   Below ~1080px the editor's own breakpoint drops the preview under it; below
   ~780px the ladder goes on top of everything.
   ========================================================================== */

.maw-tfm-modal-root {
    position: fixed;
    /* Yield the pin-left app rail (--d3v-rail-w, 0 when it is hidden) and sit
       above the include card's full-screen lift (1300). */
    top: 0; left: var(--d3v-rail-w, 0px); right: 0; bottom: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    box-sizing: border-box;
    overflow: auto;
    background: rgba(28, 24, 18, 0.55);
    animation: maw-wf-fade .16s ease-out;
}
.maw-tfm-panel {
    display: flex;
    flex-direction: column;
    /* Wider than the editor alone: the ladder is a fourth of the dialog and the
       preview still has to hold a full-width LS-DYNA keyword card. */
    width: min(1560px, 97vw);
    max-height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-soft);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
    overflow: hidden;
    animation: maw-wf-float .2s cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- header */
.maw-tfm-hd {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.maw-tfm-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.maw-tfm-file {
    font-family: var(--font-mono, Menlo, monospace);
    font-size: 12px;
    color: var(--ink-mut);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40%;
}
.maw-tfm-hd-spacer { flex: 1 1 auto; }

/* The readout REPORTS the derived mode. It is deliberately not a control --
   the level toggles are the only thing that selects it. */
.maw-tfm-readout {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--indigo-bd, #c9c8f0);
    background: var(--indigo-soft, #edecfb);
    color: var(--indigo, #4f46e5);
    white-space: nowrap;
}
.maw-tfm-readout .sub { color: var(--ink-mut); font-weight: 400; }

/* ------------------------------------------------------------------ body */
.maw-tfm-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(212px, 252px) minmax(0, 1fr);
    overflow: hidden;
}
.maw-tfm-editor-host {
    min-width: 0;
    min-height: 0;
    display: flex;
    /* Column so the manager's own scope banner can sit ABOVE the editor: the
       editor renders body-only when embedded, so its header -- and the scope
       note in it -- never paints, and nothing else here says whose value this
       is. */
    flex-direction: column;
    overflow: hidden;
}
.maw-tfm-note {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-mut);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}
/* A level this model cannot author. The fields are disabled either way; this is
   what tells the reader WHY, instead of leaving them clicking a dead input. */
.maw-tfm-note.is-locked {
    color: var(--orange-strong, #a8431f);
    background: var(--orange-soft, #f6e6d8);
    border-bottom-color: var(--orange-bd, #e7c3a6);
}
.maw-tfm-editor-host.is-readonly input:disabled,
.maw-tfm-editor-host.is-readonly select:disabled,
.maw-tfm-editor-host.is-readonly textarea:disabled {
    background: var(--panel-soft);
    color: var(--ink-mut);
    cursor: not-allowed;
}
.maw-tfm-editor-host.is-readonly button:disabled {
    opacity: .5;
    cursor: not-allowed;
}
/* Make the embedded inline editor fill the cell and own its own scrolling,
   the same way it does inside its own modal. */
.maw-tfm-editor-host .maw-tfx-inline { flex: 1 1 auto; min-width: 0; display: flex; }
.maw-tfm-editor-host .maw-tfx-inline .maw-tfx-modal-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.maw-tfm-editor-host.is-readonly { opacity: .92; }
.maw-tfm-editor-missing {
    padding: 18px;
    color: var(--ink-mut);
    font-size: 13px;
}

/* ---------------------------------------------------------------- ladder */
.maw-tfm-ladder {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 10px 14px;
    border-right: 1px solid var(--line);
    background: var(--panel);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.maw-tfm-lad-hd {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-dim);
    padding: 0 2px 2px;
}
.maw-tfm-lad-foot {
    margin-top: auto;
    padding: 8px 2px 0;
    font-size: 10px;
    line-height: 1.5;
    color: var(--ink-dim);
}
.maw-tfm-lad-foot code {
    font-family: var(--font-mono, Menlo, monospace);
    background: var(--panel-hover);
    padding: 0 3px;
    border-radius: 3px;
}

.maw-tfm-lv {
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-hi);
    border-radius: 7px;
    background: var(--panel-soft);
    padding: 6px 8px;
    cursor: pointer;
}
.maw-tfm-lv:hover { background: var(--panel-hover); }
.maw-tfm-lv.is-sm  { border-left-color: var(--t-sm, #5048c6); }
.maw-tfm-lv.is-asm { border-left-color: var(--t-asm, #3f7d4f); }
.maw-tfm-lv.is-sel {
    border-color: var(--indigo, #4f46e5);
    box-shadow: 0 0 0 2px var(--indigo-soft, #edecfb);
}
/* Off is stated twice -- dimmed AND struck through -- because a level that
   contributes nothing must not read as one that merely has a small value. */
.maw-tfm-lv.is-off .maw-tfm-lv-name,
.maw-tfm-lv.is-off .maw-tfm-lv-sum { opacity: .45; }
.maw-tfm-lv.is-off .maw-tfm-lv-sum { text-decoration: line-through; }
.maw-tfm-lv.is-unreachable { cursor: default; border-left-color: var(--line-hi); }

.maw-tfm-lv-top { display: flex; align-items: center; gap: 6px; }
.maw-tfm-lv-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-tfm-lv-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.maw-tfm-lv-sum {
    margin-top: 3px;
    font-family: var(--font-mono, Menlo, monospace);
    font-size: 10.5px;
    color: var(--ink-mut);
    word-break: break-word;
}
.maw-tfm-lv-sum.is-empty { font-family: inherit; font-style: italic; color: var(--ink-dim); }

/* The applied-order badge. `-` is not "unknown", it is "off" -- an off level
   has no position in the stack, and a number there would be a lie. */
.maw-tfm-ord {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--indigo, #4f46e5);
}
.maw-tfm-ord.is-none {
    background: transparent;
    border: 1px dashed var(--line-hi);
    color: var(--ink-dim);
    font-weight: 400;
}

.maw-tfm-ent {
    flex: none;
    font-family: var(--font-mono, Menlo, monospace);
    font-size: 10px;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--line-hi);
    color: var(--ink-mut);
    background: var(--panel);
}
.maw-tfm-ent.is-sm  { color: var(--t-sm, #5048c6); border-color: var(--indigo-bd, #c9c8f0); }
.maw-tfm-ent.is-asm { color: var(--t-asm, #3f7d4f); }

/* Only the manifest base is labelled. Every other level's scope is implied by
   the row it sits on, so a chip there was noise. */
.maw-tfm-basetag,
.maw-tfm-reach {
    font-size: 10px;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--line-hi);
    color: var(--ink-mut);
    background: var(--panel);
    white-space: nowrap;
}
.maw-tfm-basetag {
    color: var(--t-asm, #3f7d4f);
    border-color: var(--green-bd, #b9d8c2);
}
/* Editing the base reaches every System Model that uses this assembly, and
   that edit is not undoable from this dialog -- so once it is more than one,
   the count is a warning rather than a label. */
.maw-tfm-reach.is-wide {
    color: var(--orange-strong, #a8431f);
    border-color: var(--orange-bd, #e7c3a6);
    background: var(--orange-soft, #f6e6d8);
}

/* Toggle switch. */
.maw-tfm-lv-toggle {
    flex: none;
    width: 30px; height: 17px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.maw-tfm-lv-toggle .track {
    display: block;
    width: 30px; height: 17px;
    border-radius: 999px;
    background: var(--line-hi);
    position: relative;
    transition: background .15s ease;
}
.maw-tfm-lv-toggle .track i {
    position: absolute;
    top: 2px; left: 2px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.maw-tfm-lv-toggle.is-on .track { background: var(--indigo, #4f46e5); }
.maw-tfm-lv-toggle.is-on .track i { transform: translateX(13px); }

/* ------------------------------------------------------------------ foot */
.maw-tfm-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: var(--panel);
}
.maw-tfm-foot-spacer { flex: 1 1 auto; }
/* Both write targets, every time. Naming only the one being edited is exactly
   how the two get conflated. */
.maw-tfm-foothint {
    font-size: 11px;
    color: var(--ink-dim);
    line-height: 1.5;
    max-width: 62%;
}
.maw-tfm-foothint strong { color: var(--ink-mut); }

@media (max-width: 780px) {
    .maw-tfm-modal-root { padding: 14px 10px; }
    .maw-tfm-body { grid-template-columns: 1fr; overflow-y: auto; }
    .maw-tfm-ladder { border-right: none; border-bottom: 1px solid var(--line); }
    .maw-tfm-foothint { max-width: 100%; }
}

/** Added by rahul.suri on 07/31/2026 - Assembler Visualization Surface (AVS) P1 **/

.maw-shell .maw-viz {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* height:100% fills a host that HAS a definite height; min-height is what
       makes the component safe to drop anywhere else.
       `height:100%` silently resolves to `auto` whenever the parent's own
       height is indefinite -- a grid area, a plain block, a flex item without
       min-height:0 -- and the surface then collapses to its content. Measured
       at 56px: the rail shows one control, the chart is a strip, and nothing
       errors. The renderer cannot rescue it either; AnalyzeScatter measures
       once and there is no resize event coming, because the container never
       actually changes size.
       A consumer that wants it shorter overrides with its own prefix. */
    height: 100%;
    min-height: 320px;
}

.maw-shell .maw-viz-layout {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

/* ---------------------------------------------------------------- rail --- */

.maw-shell .maw-viz-rail {
    flex: 0 0 226px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--panel-soft, #f4efe4);
    border: 1px solid var(--line, #e5ddcd);
    border-radius: var(--radius-sm, 9px);
    overflow-y: auto;
}

/* `!important` here is not defensive style -- it is required.
   d3VIEW's core stylesheet carries a global `label { display: block !important }`,
   which beats BOTH a plain rule (whatever its specificity) and an inline style.
   Without it this rule silently loses and every field renders as a block, and
   -- far worse -- jQuery .hide() on one of these labels is a SILENT NO-OP,
   because .hide() writes an inline `display:none` that the global !important
   overrides. That is why the dynamic field below is hidden by CLASS and not by
   .hide(). Measured 2026-07-31: inline display=none, computed display=block. */
.maw-shell .maw-viz-field {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mut, #6d6759);
    font-weight: 600;
}

.maw-shell .maw-viz-field select {
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 6px;
    background: var(--panel, #fbf8f2);
    padding: 5px 8px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink, #34302a);
    width: 100%;
    /* Column labels are long ("Head acceleration resultant [g]"). Let the
       select shrink instead of forcing the rail wider than its flex basis. */
    min-width: 0;
    text-overflow: ellipsis;
}

/* The only way to hide a field -- see the !important note above. */
.maw-shell .maw-viz-field.is-hidden {
    display: none !important;
}

/** Added by rahul.suri on 08/04/2026 - Assembler Visualization Surface (AVS) P1 - multi-value slots + suggest chip **/

/* ------------------------------------------- multi-value slot (P1) --- */

/* The slot's own label line. The wrapper carries `.maw-viz-field`, so it
   inherits that rule's uppercase/tracked treatment -- which is what we want
   for the label and emphatically not for the column names below. */
.maw-shell .maw-viz-multi-hint {
    margin-left: 6px;
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 500;
    color: var(--ink-dim, #9c9480);
}

/* ~8 rows visible; past that the list scrolls inside itself rather than
   pushing the notes/stats off the bottom of the rail. A slot offering 20
   responses is normal on a real study. */
.maw-shell .maw-viz-multi-list {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 6px;
    background: var(--panel, #fbf8f2);
    padding: 3px 5px;
    min-width: 0;
}

/* `!important` here is load-bearing, for exactly the reason spelled out on
   .maw-viz-field above: d3VIEW's core stylesheet carries a global
   `label { display: block !important }`, which beats a plain rule whatever its
   specificity AND beats an inline style. These rows ARE labels (one input
   each, so a click on the column name toggles its own checkbox), so without
   this the `align-items` and `gap` below never apply and every checkbox
   renders on its own line above its text. It is not defensive style -- delete
   it and the layout silently reverts. */
.maw-shell .maw-viz-check {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    /* Inherited from .maw-viz-field, which is styled for a LABEL. A column
       name is neither uppercase nor tracked. */
    letter-spacing: normal;
    text-transform: none;
    font-weight: 500;
    color: var(--ink, #34302a);
    cursor: pointer;
    min-width: 0;
}

.maw-shell .maw-viz-check:hover {
    color: var(--indigo, #4f46e5);
}

.maw-shell .maw-viz-check input {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

/* Column labels are long ("Head Resultant Acceleration Filtered [g]") and can
   be a single unbroken token. Wrap inside the row instead of widening the
   rail -- same reasoning as .maw-viz-note. */
.maw-shell .maw-viz-check span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.maw-shell .maw-viz-field select:focus {
    outline: none;
    border-color: var(--indigo, #4f46e5);
}

.maw-shell .maw-viz-field select option:disabled {
    color: var(--ink-dim, #9c9480);
}

/* Notes = what did NOT make it onto the chart. Deliberately prominent: a
   silently-dropped run is the whole failure mode this surface exists to
   avoid, so this must not read as decorative fine print. */
.maw-shell .maw-viz-notes {
    display: none;
    font-size: 11px;
    line-height: 1.5;
    color: var(--orange-strong, #a8431f);
    background: var(--orange-soft, #f6e6d8);
    border: 1px solid var(--orange-bd, #e7c3a6);
    border-radius: 6px;
    padding: 7px 9px;
}

/* The header of a collapsible notes panel. Carries the panel's own colours so
   a COLLAPSED panel still reads as a warning rather than as a disclosure
   widget nobody opens. */
.maw-shell .maw-viz-notes-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.maw-shell .maw-viz-notes-caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform 120ms ease;
}
.maw-shell .maw-viz-notes.is-open .maw-viz-notes-caret { transform: rotate(90deg); }

/* Collapsed by default; `is-bare` is the single-note case, which has no toggle
   and so must never be hidden. */
.maw-shell .maw-viz-notes-body { display: none; margin-top: 6px; }
.maw-shell .maw-viz-notes.is-open .maw-viz-notes-body,
.maw-shell .maw-viz-notes-body.is-bare { display: block; margin-top: 0; }
.maw-shell .maw-viz-notes.is-open .maw-viz-notes-body {
    margin-top: 6px;
    max-height: 220px;
    overflow-y: auto;
}

/* `overflow-wrap: anywhere` is the actual overflow fix, not the collapse. A
   run name like DOE_ECONOLINE_PEDPRO_20260727_PedShot_A_9_0_2026-07-27-10-49-24
   is one 60-character word with no break opportunity, so normal wrapping
   leaves it to run straight out through the panel border. `break-word` is not
   enough on its own here -- it will not break a word that has already started
   a line it cannot fit. */
.maw-shell .maw-viz-note {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.maw-shell .maw-viz-note + .maw-viz-note { margin-top: 4px; }

/* The rail's bottom block: Reset above the run count. The auto margin lives on
   the WRAPPER, not on .maw-viz-stats -- with it on the stats line alone the
   space opened up BETWEEN the two and left Reset stranded mid-rail.

   Sticky because .maw-viz-rail scrolls: on a chart with many slots the footer
   would otherwise sit below the fold, which is exactly the "where did Reset
   go?" problem this move was supposed to end. It needs its own background or
   the fields scroll through it. */
.maw-shell .maw-viz-railfoot {
    margin-top: auto;
    position: sticky;
    bottom: -12px;              /* cancels the rail's 12px bottom padding */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 12px;
    background: var(--panel-soft, #f4efe4);
}

.maw-shell .maw-viz-stats {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--ink-dim, #9c9480);
    line-height: 1.6;
}

/* --------------------------------------------------------------- chart --- */

.maw-shell .maw-viz-chart {
    flex: 1 1 auto;
    min-width: 0;
    /* Its own floor, for the same reason as .maw-viz above -- and so the rail
       growing tall (many slots, a long note) cannot squeeze the plot away. */
    min-height: 260px;
    position: relative;
}

/* An ordinary rail control -- NOT absolutely positioned over the plot, which is
   where it used to be (top:10px right:10px inside .maw-viz-chart). Floating it
   there put it on top of whatever the chart drew in that corner: the curve
   grid's first cell, and the single-run detail panel's own Close button. Two
   nudges had already accreted around it (`right:186px` for side-legend charts,
   and a 96px right padding on .maw-vgrid-detail-head) and both are gone now.
   A third would have arrived with the next chart. */
.maw-shell .maw-viz-reset {
    flex: 0 0 auto;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 6px;
    background: var(--panel, #fbf8f2);
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink, #34302a);
    cursor: pointer;
}

.maw-shell .maw-viz-reset:hover { border-color: var(--indigo, #4f46e5); }

/* The curve renderer's mount slot, created lazily by CurveChart.
   ABSOLUTE, not a block in flow, for two reasons. It gives the renderer a
   definite height without turning .maw-viz-chart into a flex column -- which
   would change how AnalyzeScatter's svg lays out, for a chart that has nothing
   to do with curves. And it keeps the slot out of the way of the Reset button,
   which is a sibling: CurveChart empties this element on mount, so it must own
   nothing but its own chart.
   (.maw-viz-chart is already position:relative, for the Reset button.) */
.maw-shell .maw-viz-curve-host {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 0;
}

/* ------------------------------------------- chart empty state (P29) --- */

/* "Nothing is drawn, and here is why", in the middle of the plot instead of
   only in the rail's notes panel. A blank rectangle reads as a chart that
   failed to load rather than as a control the reader has not set yet.

   OPAQUE, and z-index 5 -- above .maw-vgrid-detail (4) and above anything a
   renderer leaves behind. Not every refusal tears its renderer down (BubbleChart
   and BarChart both return failed:true with the previous plot still mounted), so
   a translucent panel here would caption a STALE chart with the reason the new
   one could not be drawn. Below .maw-viz-loading (6), which legitimately
   supersedes it.

   pointer-events:none so it never swallows a gesture aimed at a chart that is
   still mounted underneath it. */
.maw-shell .maw-viz-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    pointer-events: none;
    background: var(--panel, #fbf8f2);
}

.maw-shell .maw-viz-empty-text {
    max-width: 34em;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-mut, #6d6759);
}

/* ----------------------------------------------- chart loading (P26) --- */

/* ONE overlay, absolutely positioned over the whole plot host. That single
   geometry covers both situations with no mode flag:

     - a CHART SWITCH has already re-run render(), which replaced the shell
       before the new chart mounts, so the host is EMPTY for the length of the
       fetch and this is the only thing on screen. It has to read as
       intentional on a blank host, not as a chart that failed;
     - a SAME-CHART redraw (a slot change on a chart that fetches) keeps the
       previous pixels, and the translucent panel-coloured backdrop dims them
       so the outgoing chart cannot be mistaken for the incoming one.

   z-index 6 sits above `.maw-viz-reset` (5) and above `.maw-viz-curve-host`,
   which CurveChart creates lazily DURING the fetch and therefore appends after
   this element. Without the explicit z-index, DOM order would decide -- and it
   decides wrongly for exactly the chart this overlay exists for.

   `pointer-events: none` is deliberate. This is a status indicator, not a
   modal, and for the first ~120ms it is fully transparent -- an invisible
   element that swallows clicks is the same class of silent trap as a `.hide()`
   that does nothing. Nothing underneath needs guarding: Reset is `.hide()`n on
   the promise branch, and hovering the outgoing chart during a redraw is
   harmless. */
.maw-shell .maw-viz-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* var(--panel) #fbf8f2 at 72%. Written as a literal because a hex custom
       property cannot be fed to rgba(); `background: var(--panel)` + `opacity`
       would fade the box and the spinner along with the backdrop. */
    background: rgba(251, 248, 242, 0.72);

    /* THE ANTI-FLASH, and there is no JS timer behind it anywhere. The element
       mounts the instant the fetch starts but is transparent, so a fetch that
       returns inside 120ms is never seen. `forwards` holds the end state --
       without it a slow fetch would blink back out at 280ms. */
    opacity: 0;
    animation: maw-viz-loading-in 160ms ease 120ms forwards;
}

.maw-shell .maw-viz-loading-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 999px;
    background: var(--panel, #fbf8f2);
    box-shadow: 0 1px 3px rgba(52, 48, 42, 0.08);
}

/* A ring with one darker arc. The ring itself carries the shape, so switching
   the rotation off below leaves a legible glyph rather than an empty gap. */
.maw-shell .maw-viz-loading-spin {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--line, #e5ddcd);
    border-top-color: var(--indigo, #4f46e5);
    animation: maw-viz-spin 700ms linear infinite;
}

.maw-shell .maw-viz-loading-text {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mut, #6d6759);
    /* A long chart label must not run out through the pill on a narrow pane. */
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyframes cannot be scoped to `.maw-shell` -- the `maw-viz-` prefix is what
   keeps them collision-free. `maw-spin` (unprefixed) is already taken by
   tasks.css, and `maw-home-spin` / `mawstudio-rcspin` by their own views. */
@keyframes maw-viz-loading-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes maw-viz-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* The rotation goes; the fade STAYS. The fade is the anti-flash, and
       dropping it would make every sub-120ms fetch pop a spinner at exactly
       the people who asked for less movement. */
    .maw-shell .maw-viz-loading-spin { animation: none; }
}

/* ------------------------------------------------- cohort curve chart --- */

.maw-shell .maw-curve {
    display: flex;
    height: 100%;
    min-height: 0;
    min-width: 0;
    gap: 8px;
}

/* min-width:0 is load-bearing on a flex CHILD: without it the plot refuses to
   shrink below its content and pushes the legend off the right edge. */
.maw-shell .maw-curve-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.maw-shell .maw-curve-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* The whole plot is a hover target for the crosshair, and a drag pans it. */
    cursor: crosshair;
    /* A drag that starts on the plot must not select the tick labels. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.maw-shell .maw-curve-gridline {
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-curve-axis {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-curve-tick {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

.maw-shell .maw-curve-axislabel {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: var(--ink-dim, #9c9480);
}

/* The cohort band sits UNDER every run line (it is painted into an earlier
   group), so it must be quiet enough to read through. */
.maw-shell .maw-curve-band-area {
    fill: var(--ink-mut, #6d6759);
    fill-opacity: 0.12;
    stroke: none;
}

.maw-shell .maw-curve-band-mean {
    fill: none;
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
    opacity: 0.75;
}

/* Stroke colour and width are set per-path by the renderer -- they carry the
   run's identity and its baseline status, so they cannot live here. */
.maw-shell .maw-curve-line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.maw-shell .maw-curve-crossline {
    stroke: var(--ink, #34302a);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.55;
    pointer-events: none;
}

.maw-shell .maw-curve-crossdot {
    stroke: var(--panel, #fbf8f2);
    stroke-width: 1.2;
    pointer-events: none;
}

.maw-shell .maw-curve-crossdot.is-baseline {
    stroke: var(--ink, #34302a);
    stroke-width: 1.6;
}

/* ------ legend: HTML, because 31 runs must scroll and names must ellipsis - */

.maw-shell .maw-curve-legend {
    flex: 0 0 168px;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 11px;
    padding-right: 2px;
    /* No top reservation needed: Reset lives in the rail now, so nothing floats
       over this column. (It used to be nudged left of the legend instead --
       reserving height here was correct only while the legend head held one
       button, and silently wrong the moment it held two.) */
    padding-top: 2px;
}

.maw-shell .maw-curve-legend-head {
    display: flex;
    /* COLUMN, not row. The legend column is 168px and the two buttons take
       ~130px of it, which left the run count ellipsized to a literal `31 ...`
       -- present in the DOM, unreadable on screen. A textContent assertion
       cannot see that; compare scrollWidth to clientWidth instead. */
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim, #9c9480);
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--line, #e5ddcd);
    margin-bottom: 4px;
    /* The head stays put while the run list scrolls -- with 31 runs the
       Show all button would otherwise be unreachable from the bottom. */
    position: sticky;
    top: 0;
    background: var(--panel, #fbf8f2);
    z-index: 1;
}

.maw-shell .maw-curve-legend-btns {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}
/* Split the row evenly so neither verb is the cramped one, and so the pair
   reads as one control rather than as a button plus an afterthought. */
.maw-shell .maw-curve-legend-btns > button { flex: 1 1 0; min-width: 0; }

/* The count must be allowed to shrink; the buttons must not. Without this the
   count pushes the buttons out of the column at narrow widths. */
.maw-shell .maw-curve-legend-count {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maw-shell .maw-curve-legend-none,
.maw-shell .maw-curve-legend-all {
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 5px;
    background: var(--panel, #fbf8f2);
    padding: 1px 6px;
    font-family: inherit;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink, #34302a);
    cursor: pointer;
    white-space: nowrap;
}

.maw-shell .maw-curve-legend-none:hover,
.maw-shell .maw-curve-legend-all:hover { border-color: var(--indigo, #4f46e5); }

/* Disabled = the action is already satisfied. Shown, not hidden: a button that
   vanishes when everything is visible makes the pair jump around as you click. */
.maw-shell .maw-curve-legend-none[disabled],
.maw-shell .maw-curve-legend-all[disabled] {
    opacity: .38;
    cursor: default;
    border-color: var(--line, #e5ddcd);
}

/* The dot for a SINGLE hovered curve. Ringed so it stays findable against a
   line of its own colour, which a plain filled dot does not. */
.maw-shell .maw-curve-crossdot.is-focus {
    stroke: var(--panel, #fbf8f2);
    stroke-width: 2;
}

/* The full run name under a focused readout -- secondary to the short name
   above it, and allowed to wrap, since it is the one thing that cannot be
   shortened without losing the identity the tip exists to give. */
.maw-shell .maw-viz-tip-note {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--line, #e5ddcd);
    font-size: 9.5px;
    color: var(--ink-dim, #9c9480);
    overflow-wrap: anywhere;
}

.maw-shell .maw-curve-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 3px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 0;
}

.maw-shell .maw-curve-legend-row:hover { background: var(--panel-soft, #f4efe4); }

/* Muted = still listed, visibly off. Removing the row instead would make the
   run unrecoverable without the Show all button, and would silently change
   the "31 runs" count into a lie. */
.maw-shell .maw-curve-legend-row.is-muted { opacity: 0.42; }
.maw-shell .maw-curve-legend-row.is-muted .maw-curve-legend-name {
    text-decoration: line-through;
}

.maw-shell .maw-curve-legend-row.is-baseline .maw-curve-legend-name {
    font-weight: 700;
}

.maw-shell .maw-curve-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink, #34302a);
}

.maw-shell .maw-curve-legend-tag {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-dim, #9c9480);
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 3px;
    padding: 0 3px;
}

/* Shared by the legend and the crosshair readout inside the tooltip -- the
   swatch IS the colour key, so the two must be the same shape. */
.maw-shell .maw-curve-swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    vertical-align: baseline;
    margin-right: 4px;
}

.maw-shell .maw-viz-tip .maw-curve-delta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    opacity: 0.75;
}


/* The chart's own slot. It scrolls: 36 cells at six columns is taller than the
   pane, and the alternative -- shrinking cells to fit -- is the exact failure
   the 36-cell cap exists to prevent. */
.maw-shell .maw-viz-grid-host {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 2px 6px 2px;
}

/* ------------------------------------- single-run detail panel (P29) --- */

/* A SIBLING of .maw-viz-grid-host, never a child. That host scrolls, so a
   panel inside it would be clipped to the scrolled viewport and would slide
   with the grid underneath. Same absolute geometry as .maw-viz-curve-host,
   for the same reason: the renderer needs a definite height without turning
   .maw-viz-chart into a flex column.

   z-index sits BELOW the Reset button's 5 on purpose -- while the panel is
   open, Reset is what resets the detail's zoom (the adapter forwards it), so
   it has to stay reachable. */
.maw-shell .maw-vgrid-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--panel, #fbf8f2);
}

.maw-shell .maw-vgrid-detail-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 6px 2px;
    border-bottom: 1px solid var(--line, #e5ddcd);
}

/* The FULL run name here, not the short one. The grid's cells carry the short
   label because 31 runs share a 44-character prefix and a cell is 100px wide;
   this panel is the whole plot area and is where a reader confirms which run
   they actually opened. */
.maw-shell .maw-vgrid-detail-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink, #34302a);
}

.maw-shell .maw-vgrid-detail-close {
    flex: 0 0 auto;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 6px;
    background: var(--panel, #fbf8f2);
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink, #34302a);
    cursor: pointer;
}

.maw-shell .maw-vgrid-detail-close:hover { border-color: var(--indigo, #4f46e5); }

/* min-height:0 is load-bearing on a flex child that holds a measured renderer:
   without it the plot cannot shrink below its content and the panel overflows
   its own host. */
.maw-shell .maw-vgrid-detail-plot {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    min-width: 0;
}

.maw-shell .maw-vgrid-detail-empty {
    padding: 18px 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-dim, #9c9480);
}

/* `grid-template-columns` is written INLINE by the chart, from
   CurveGrid.layout().grid.cols -- the column count is a computed fact about
   the cohort, not a breakpoint, so CSS cannot know it. Everything else about
   the grid lives here. */
.maw-shell .maw-vgrid {
    display: grid;
    gap: 10px 8px;
    align-content: start;
}

.maw-shell .maw-vgrid-cell {
    min-width: 0;              /* or a long run name blows the column out */
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Every cell opens, including an empty one -- which says why it is empty
       rather than being silently inert. So the cursor is unconditional. */
    cursor: pointer;
}

.maw-shell .maw-vgrid-cell:hover .maw-vgrid-frame {
    stroke: var(--indigo, #4f46e5);
}

/* --------------------------------------------------------------- label --- */

/* A DIV, deliberately not a <label>. d3VIEW's core stylesheet carries a global
   `label { display: block !important }` that beats an inline style, so a
   <label> here could not be hidden, could not be flexed, and could not carry a
   gap -- silently, in all three cases.
   (rules/jquery-hide-does-not-work-on-a-label.md) */
.maw-shell .maw-vgrid-name {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 10px;
    line-height: 1.3;
    color: var(--ink-mut, #6d6759);
}

/* The short name -- the affix every run in a cohort shares is already stripped
   by CurveCohort.shortNames, so this ellipsis truncates a name that is ALREADY
   the distinguishing part. Without that strip, 31 cells would all read
   `DOE_ECONOLINE_PEDP...`. The full name is on the cell's title attribute and
   in the hover tip. */
.maw-shell .maw-vgrid-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maw-shell .maw-vgrid-cell.is-baseline .maw-vgrid-name-text {
    font-weight: 700;
    color: var(--ink, #34302a);
}

.maw-shell .maw-vgrid-tag {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-dim, #9c9480);
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 3px;
    padding: 0 3px;
}

/* ---------------------------------------------------------------- plot --- */

/* padding-bottom is a PERCENTAGE OF THE CELL WIDTH, and 62% is exactly the
   svg's 100x62 viewBox. That equality is load-bearing: it means
   preserveAspectRatio="none" never actually distorts anything, so the geometry
   is uniform at every pane size with no measurement step, no resize handler
   and a relayout() that is genuinely a no-op.

   Change one of the two numbers and you must change the other -- VW/VH live at
   the top of CurveMultiplesChart.js. */
.maw-shell .maw-vgrid-plot {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 62%;
    background: var(--panel, #fbf8f2);
    border-radius: 4px;
}

.maw-shell .maw-vgrid-svg {
    position: absolute;
    inset: 0;
    top: 0; left: 0;           /* `inset` shorthand fallback */
    width: 100%;
    height: 100%;
    display: block;
}

/* Belt and braces against the ratio above being broken by a future min-width
   on the cell: with preserveAspectRatio="none" an unequal stretch would draw a
   stroke thicker on one axis than the other. Costs nothing while the ratio
   holds. */
.maw-shell .maw-vgrid-frame,
.maw-shell .maw-vgrid-grid,
.maw-shell .maw-vgrid-line { vector-effect: non-scaling-stroke; }

/* Interior quarter-lines (P29). Lighter than the frame and well under the
   trace: the cell's job is still to show the SHAPE, and a grid that competes
   with the curve for attention would undo the whole point of the small
   multiple. Geometry is the GRID_PATH constant in CurveMultiplesChart.js. */
.maw-shell .maw-vgrid-grid {
    fill: none;
    stroke: var(--line, #e5ddcd);
    stroke-width: 0.5;
    opacity: 0.65;
}

.maw-shell .maw-vgrid-frame {
    fill: none;
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
}

/* 1.4px, matching the overlay's cohort stroke -- a run must not look like a
   different measurement in the two charts. `stroke` is written inline, from
   the SAME CurveCohort rank colour the overlay uses. */
.maw-shell .maw-vgrid-line {
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.maw-shell .maw-vgrid-cell:hover .maw-vgrid-plot {
    background: var(--panel-soft, #f4efe4);
}
.maw-shell .maw-vgrid-cell:hover .maw-vgrid-frame {
    stroke: var(--line-hi, #d4c9b3);
}

/* ------------------------------------------------------- cell readouts --- */

/* The cell's OWN y bounds, printed only under 'independent' -- under 'shared'
   they would be the same two numbers 36 times. HTML rather than svg <text>:
   text inside a preserveAspectRatio="none" svg is stretched with the geometry.

   pointer-events:none so they never swallow the hover the tooltip needs. */
.maw-shell .maw-vgrid-ymax,
.maw-shell .maw-vgrid-ymin {
    position: absolute;
    right: 3px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    line-height: 1;
    color: var(--ink-dim, #9c9480);
    background: var(--panel, #fbf8f2);
    padding: 0 1px;
    pointer-events: none;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.maw-shell .maw-vgrid-ymax { top: 2px; }
.maw-shell .maw-vgrid-ymin { bottom: 2px; }

/* A run whose y never changed. Said in words, because on a padded axis it
   draws as a horizontal line through the middle -- which looks like a run that
   varied a little. */
.maw-shell .maw-vgrid-flag {
    position: absolute;
    left: 3px;
    bottom: 2px;
    font-size: 8.5px;
    line-height: 1;
    font-style: italic;
    color: var(--ink-dim, #9c9480);
    pointer-events: none;
}

/* A run that produced no usable point. It keeps its cell -- a missing cell
   would read as a run that is not in the study -- and says so instead of
   drawing a fabricated flat line, which is indistinguishable from a run that
   genuinely solved to zero. */
.maw-shell .maw-vgrid-cell.is-empty .maw-vgrid-plot {
    background: repeating-linear-gradient(
        45deg,
        var(--panel, #fbf8f2), var(--panel, #fbf8f2) 5px,
        var(--panel-soft, #f4efe4) 5px, var(--panel-soft, #f4efe4) 10px);
    border: 1px solid var(--line, #e5ddcd);
}
.maw-shell .maw-vgrid-cell.is-empty .maw-vgrid-name { opacity: .55; }

.maw-shell .maw-vgrid-nodata {
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 9.5px;
    font-style: italic;
    color: var(--ink-dim, #9c9480);
    pointer-events: none;
}

/* ------------------------------------------------------- narrow layout --- */

/* Below ~720px the surface already stacks its rail (see the existing media
   query). Six columns in what is left is ~40px per cell, which is smaller than
   the label above it -- so cap the columns by overriding the inline
   grid-template-columns. !important is required and is not defensive style:
   the chart writes that property inline, and an inline declaration outranks
   any author rule without it. */
@media (max-width: 720px) {
    .maw-shell .maw-vgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 721px) and (max-width: 980px) {
    .maw-shell .maw-vgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ------------------------------------------- parallel coordinates chart --- */

/* The renderer's mount slot, created lazily by ParallelChart. ABSOLUTE for the
   same two reasons as .maw-viz-curve-host: it gives the renderer a definite
   height without turning .maw-viz-chart into a flex column (which would change
   how AnalyzeScatter lays out, for a chart that has nothing to do with it), and
   it keeps the slot clear of the Reset button, which is a SIBLING -- the
   adapter empties this element on mount, so it must own nothing but its chart. */
.maw-shell .maw-viz-parallel-host {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 0;
}

.maw-shell .maw-pc {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    gap: 6px;
}

/* min-width/min-height:0 are load-bearing on a flex CHILD: without them the
   plot refuses to shrink below its content and the host scrolls instead of the
   svg re-measuring. */
.maw-shell .maw-pc-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.maw-shell .maw-pc-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* The whole plot is a hover target -- pointing at a line is how a reader
       asks which run it is. */
    cursor: crosshair;
    /* A hover that drifts must not start selecting the axis labels. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Quartile guides span the full width because every axis is normalized onto the
   same pixel range. They are deliberately faint: they orient the eye across
   eight axes without competing with the data. */
.maw-shell .maw-pc-guide {
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-pc-axis {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-pc-notch {
    stroke: var(--ink-dim, #9c9480);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-pc-minmax {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-dim, #9c9480);
    text-anchor: middle;
}

.maw-shell .maw-pc-axislabel {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    fill: var(--ink-mut, #6d6759);
    text-anchor: middle;
}

/* stroke-opacity and stroke-width are set as ATTRIBUTES by the renderer, per
   line, so they are not repeated here -- a CSS value would silently win or lose
   against the attribute depending on which side carries !important, and the
   hover state has to be exact. Only the properties CSS alone owns live here. */
.maw-shell .maw-pc-line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Emphasis is a fade, never a display toggle: hiding the other lines would
       change how many elements are on the canvas, so a count of drawn lines
       would depend on where the pointer happens to be. */
    transition: stroke-opacity 90ms linear, stroke-width 90ms linear;
    pointer-events: none;
}

/* Hit testing is done in the pure module against the model, not by the browser
   against fat invisible paths -- so nothing in the svg needs pointer events and
   the whole plot can be one mousemove target. */
.maw-shell .maw-pc-dot {
    pointer-events: none;
}

.maw-shell .maw-pc-message {
    font-family: var(--font-ui, inherit);
    font-size: 12px;
    fill: var(--ink-mut, #6d6759);
    text-anchor: middle;
}

/* ----------------------------------------------------- colour key (HTML) --- */

/* HTML rather than an svg group: it wraps, it carries a real text label, and it
   cannot overlap an axis label the way an absolutely-placed group can. Empty
   when nothing is bound to colour -- :empty collapses it so an unbound chart
   does not reserve a strip of nothing. */
.maw-shell .maw-pc-key {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-dim, #9c9480);
    min-height: 0;
}

.maw-shell .maw-pc-key:empty { display: none; }

.maw-shell .maw-pc-key-label {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mut, #6d6759);
}

.maw-shell .maw-pc-key-ramp {
    flex: 0 1 160px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid var(--line, #e5ddcd);
}

.maw-shell .maw-pc-key-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--ink, #34302a);
}

/* Colour-by-Simulation: one row per run, so this legend is a LIST where the
   number/categorical ones are a strip. It scrolls rather than capping -- a run
   that is not listed is a run the reader cannot lift out of the bundle, and
   hunting one run is the whole reason to colour by identity. Bounded to ~4
   rows so a 31-run cohort cannot eat the chart it is a legend for. */
.maw-shell .maw-pc-key-sims {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px 10px;
    max-height: 96px;
    overflow-y: auto;
    min-width: 0;
}

/* Each row is a handle on its line (see _drawIdentityKey), so it has to look
   like one. The hover tint is the only affordance saying so -- the raise
   happens on the chart, which the reader is not looking at yet. */
.maw-shell .maw-pc-key-sim {
    cursor: pointer;
    padding: 0 2px;
    border-radius: 2px;
}

.maw-shell .maw-pc-key-sim:hover {
    background: var(--panel-soft, #f2ece0);
    color: var(--ink, #34302a);
}

/* Same shape as .maw-curve-swatch, deliberately: a swatch IS the colour key,
   and two charts in one surface must not draw it two ways. */
.maw-shell .maw-pc-key-swatch,
.maw-shell .maw-pc-swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    vertical-align: baseline;
    margin-right: 4px;
}

/* The axis the cursor is nearest, inside the shared tooltip. The tip element is
   the surface's ONE tooltip (position:fixed, see .maw-viz-tip) -- this chart
   borrows it through ctx.tip and never grows one of its own, because
   .maw-shell / .maw-pane clip absolutely-positioned children at exactly the
   chart edges where the data is. */
.maw-shell .maw-viz-tip .maw-viz-tip-line.is-focus {
    font-weight: 700;
    opacity: 1;
}

/* --------------------------------------------------------------- state --- */

.maw-shell .maw-viz-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    padding: 24px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-mut, #6d6759);
}

/* ------------------------------------------------------------- tooltip --- */

/* position:FIXED is load-bearing, not a preference -- .maw-shell and .maw-pane
   clip absolutely-positioned children with overflow:hidden, so an absolute tip
   disappears at exactly the chart edges. VizSurfaceView._onTipEnter therefore
   positions it in raw viewport coordinates. */
.maw-shell .maw-viz-tip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    background: var(--ink, #34302a);
    color: #fdfbf7;
    border-radius: 7px;
    padding: 8px 11px;
    font-size: 12px;
    line-height: 1.45;
    max-width: 280px;
    /* Simulation names are long unbroken tokens -- break them rather than
       let the tip run off-screen. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.maw-shell .maw-viz-tip-title { font-weight: 700; margin-bottom: 3px; }
.maw-shell .maw-viz-tip-line  { opacity: 0.9; }

/* ------------------------------------------------------- narrow layout --- */

/* Below ~720px the side rail starves the chart. Stack instead, and let the
   rail lay its controls out in a row so it stays two lines tall. */
@media (max-width: 720px) {
    .maw-shell .maw-viz-layout { flex-direction: column; }

    /* P1: multi-value slot + suggest chip in the row-layout rail. */
    .maw-shell .maw-viz-multi { flex: 1 1 220px; }
    .maw-shell .maw-viz-multi-list { max-height: 120px; }
    .maw-shell .maw-viz-suggest-host { flex: 1 1 100%; }

    .maw-shell .maw-viz-rail {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        overflow-y: visible;
    }

    .maw-shell .maw-viz-field { flex: 1 1 150px; }
    .maw-shell .maw-viz-notes,
    .maw-shell .maw-viz-stats { flex: 1 1 100%; margin-top: 0; }

    /* The rail is a wrapping ROW here, so the footer is just another item in
       it -- neither pushed to a bottom that no longer exists nor stuck to it.
       Reset and the run count sit side by side rather than stacked. */
    .maw-shell .maw-viz-railfoot {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 0;
        position: static;
        padding: 0;
        background: none;
    }
    .maw-shell .maw-viz-chart { min-height: 300px; }

    /* A 168px legend beside a ~250px plot leaves no chart. Stack it under
       instead and cap its height so it cannot eat the plot either. */
    .maw-shell .maw-curve { flex-direction: column; }
    .maw-shell .maw-curve-legend {
        flex: 0 0 auto;
        max-height: 92px;
        border-top: 1px solid var(--line, #e5ddcd);
        padding-top: 4px;
    }
}

/* A readout row whose run has no data at the crosshair x. Dimmed and italic so
   it reads as an absence rather than as a measurement sitting beside the real
   ones -- it used to be printed as an ordinary value at an x it never reached. */
.maw-shell .maw-viz-tip-line.is-out { opacity: 0.72; }
.maw-shell .maw-curve-out {
    font-style: italic;
    font-size: 11px;
    color: var(--d3v-text-muted, #8a8580);
}

/* ----------------------------------------------- main-effects bar chart --- */

.maw-shell .maw-bar {
    display: flex;
    height: 100%;
    min-height: 0;
    min-width: 0;
    gap: 8px;
}

/* min-width:0 on the flex CHILD -- same reason as the curve plot: without it
   the plot refuses to shrink below its content and shoves the legend off. */
.maw-shell .maw-bar-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.maw-shell .maw-bar-svg {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.maw-shell .maw-bar-gridline {
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Zero is not just another gridline. Bar LENGTH is the encoding, so the line
   the lengths are measured from has to be findable at a glance -- otherwise a
   downward bar reads as a short upward one. */
.maw-shell .maw-bar-gridline.is-zero,
.maw-shell .maw-bar-baseline {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1.25;
    shape-rendering: crispEdges;
}

.maw-shell .maw-bar-tick-y,
.maw-shell .maw-bar-tick-x {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

.maw-shell .maw-bar-axislabel {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: var(--ink-dim, #9c9480);
}

.maw-shell .maw-bar-rect {
    stroke: rgba(0, 0, 0, 0.18);
    stroke-width: 0.5;
    cursor: pointer;
}

.maw-shell .maw-bar-rect.is-hover {
    stroke: var(--ink, #2f2b24);
    stroke-width: 1.5;
}

/* A bar built from a single run is drawn hatched, not solid: it sits at exactly
   the height a thirty-run average would, and nothing else on the chart
   distinguishes them. */
.maw-shell .maw-bar-hatch-bg   { fill: var(--panel-soft, #f4efe4); }
.maw-shell .maw-bar-hatch-line { stroke: var(--ink-mut, #6d6759); stroke-width: 2; }

.maw-shell .maw-bar-thin-mark {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-mut, #6d6759);
}

/* An absent group is an EMPTY SLOT, never a zero-height bar. The hit area
   spans the plot so the tooltip can explain the gap; it must stay invisible. */
.maw-shell .maw-bar-empty {
    fill: transparent;
    cursor: help;
}

.maw-shell .maw-bar-empty-mark {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-dim, #9c9480);
    font-style: italic;
}

.maw-shell .maw-bar-whisker,
.maw-shell .maw-bar-whisker-cap {
    stroke: var(--ink, #2f2b24);
    stroke-width: 1;
    stroke-opacity: 0.55;
    shape-rendering: crispEdges;
}

.maw-shell .maw-bar-median {
    stroke: #fff;
    stroke-width: 1.75;
    shape-rendering: crispEdges;
}

.maw-shell .maw-bar-legend {
    flex: 0 0 150px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 4px;
}

.maw-shell .maw-bar-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 11px;
}

.maw-shell .maw-bar-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.maw-shell .maw-bar-legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maw-shell .maw-bar-out {
    color: var(--ink-dim, #9c9480);
    font-style: italic;
}

@media (max-width: 900px) {
    .maw-shell .maw-bar { flex-direction: column; }
    .maw-shell .maw-bar-legend {
        flex: 0 0 auto;
        max-height: 90px;
        display: flex;
        flex-wrap: wrap;
    }
}

/* --------------------------------------------- 3D bar field (Z by (3D)) --- */

/* No legend column, deliberately: the depth axis is labelled on the floor
   rail, which names each series exactly where its row of boxes sits. A legend
   would ask the reader to match a colour to a row instead of just reading it. */
.maw-shell .maw-bar3d {
    height: 100%;
    min-height: 0;
    min-width: 0;
    position: relative;
    cursor: -webkit-grab;
    cursor: grab;
}

.maw-shell .maw-bar3d.is-rotating {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.maw-shell .maw-bar3d-svg {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* The floor plane is the only reference the boxes have -- without it a
   projected quad floats with no indication of where its base sits. */
.maw-shell .maw-bar3d-plane {
    fill: var(--panel-soft, #f4efe4);
    fill-opacity: 0.55;
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
}

.maw-shell .maw-bar3d-gridline {
    fill: none;
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
}

/* Only drawn when the data straddles zero, and then it IS the baseline the
   heights are read from -- same reasoning as .maw-bar-baseline in 2D. */
.maw-shell .maw-bar3d-zero {
    fill: none;
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1.25;
}

.maw-shell .maw-bar3d-axis {
    fill: none;
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
}

.maw-shell .maw-bar3d-tick {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

.maw-shell .maw-bar3d-cat {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

.maw-shell .maw-bar3d-axis-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: var(--ink-dim, #9c9480);
}

/* `fill` is set per-face inline (the shade depends on which face of the box it
   is), so this rule owns only the edge. */
.maw-shell .maw-bar3d-face {
    stroke: rgba(0, 0, 0, 0.22);
    stroke-width: 0.5;
    cursor: pointer;
}

/* The 2D chart hatches a thin bar. A hatch pattern cannot follow a projected
   quad, so the 3D field dashes the edge instead -- same claim, different
   vocabulary: this box rests on very few runs. */
.maw-shell .maw-bar3d-face.is-thin {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

/* An absent group is a hole in the floor, never a zero-height box. It keeps a
   hit area so the tooltip can say the combination was never run. */
.maw-shell .maw-bar3d-hole {
    fill: var(--bg, #f1ece2);
    fill-opacity: 0.9;
    stroke: var(--line-hi, #d4c9b3);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    cursor: help;
}

.maw-shell .maw-bar3d-whisker {
    fill: none;
    stroke: var(--ink, #2f2b24);
    stroke-width: 1;
    stroke-opacity: 0.6;
}


.maw-shell .maw-hist {
    display: flex;
    height: 100%;
    min-height: 0;
    min-width: 0;
    gap: 8px;
}

/* min-width:0 on the flex CHILD -- same reason as the bar and curve plots:
   without it the plot refuses to shrink below its content and shoves the legend
   off the pane. */
.maw-shell .maw-hist-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.maw-shell .maw-hist-svg {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* The refusal panel. It replaces the chart rather than sitting beside it: an
   axis left standing with nothing under it reads as a study with no runs, when
   the truth is a question this data cannot answer.

   Both states are declared here because the renderer toggles `is-hidden` rather
   than calling .hide()/.show(). jQuery caches the display it saw at hide time,
   and a chart mounted in a display:none pane measures as hidden -- so .show()
   would write an inline `display:block` that beats this `display:flex` and
   silently kills the centring. Do not "simplify" this back to .hide(). */
.maw-shell .maw-hist-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-mut, #6d6759);
    font-style: italic;
}

.maw-shell .maw-hist-empty.is-hidden {
    display: none;
}

.maw-shell .maw-hist-gridline {
    stroke: var(--line, #e5ddcd);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Zero is not just another gridline. Bin LENGTH is the encoding, so the line the
   lengths are measured from has to be findable at a glance. */
.maw-shell .maw-hist-gridline.is-zero {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1.25;
}

/* Contiguous by construction -- the renderer draws each rect from _px(x0) to
   _px(x1) with no padding. The hairline stroke separates neighbours without
   opening a gap, because a gap between bins asserts that no value fell there. */
.maw-shell .maw-hist-bar {
    fill: var(--t-doe, #0f857b);
    fill-opacity: 0.78;
    stroke: var(--panel, #fbf8f2);
    stroke-width: 0.75;
}

/* Split mode: outline only. Four filled histograms hide each other, and
   whichever is drawn last wins an argument it should not be in. */
.maw-shell .maw-hist-outline {
    fill: none;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-opacity: 0.9;
}

/* q1 / q3 / median. The three numbers the shape is a poor estimator of -- a long
   tail drags the eye toward a median that is not there. The median is stronger
   because it is the one being read; the quartiles are context. */
.maw-shell .maw-hist-quart {
    stroke: var(--ink, #34302a);
    stroke-width: 1;
    stroke-opacity: 0.4;
    stroke-dasharray: 3 3;
    shape-rendering: crispEdges;
}

.maw-shell .maw-hist-quart.is-median {
    stroke-width: 1.75;
    stroke-opacity: 0.85;
    stroke-dasharray: none;
}

.maw-shell .maw-hist-quart-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-mut, #6d6759);
}

/* Full height on purpose: it has to be findable over an EMPTY bin too, because
   "nothing landed here" is a readout the reader needs as much as a count. */
.maw-shell .maw-hist-hoverband {
    fill: var(--ink, #34302a);
    fill-opacity: 0.07;
    pointer-events: none;
}

.maw-shell .maw-hist-axis {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-hist-tickmark {
    stroke: var(--ink-mut, #6d6759);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.maw-shell .maw-hist-tick-x,
.maw-shell .maw-hist-tick-y {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

.maw-shell .maw-hist-axislabel {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    fill: var(--ink-dim, #9c9480);
}

/* The legend exists only in split mode. Collapse it when empty, or an unsplit
   histogram loses 140px of plot to a blank column. */
.maw-shell .maw-hist-legend {
    flex: 0 0 140px;
    overflow-y: auto;
    min-height: 0;
    padding-top: 4px;
}

.maw-shell .maw-hist-legend:empty {
    flex: 0 0 0;
    padding-top: 0;
    display: none;
}

.maw-shell .maw-hist-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    font-size: 11px;
}

.maw-shell .maw-hist-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.maw-shell .maw-hist-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The run count per level. A level of one run draws as a spike, and the number
   is what tells the reader the spike is the whole level rather than a mode. */
.maw-shell .maw-hist-legend-n {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-dim, #9c9480);
}

.maw-shell .maw-hist-out {
    color: var(--ink-dim, #9c9480);
    font-style: italic;
}

@media (max-width: 900px) {
    .maw-shell .maw-hist { flex-direction: column; }
    .maw-shell .maw-hist-legend {
        flex: 0 0 auto;
        max-height: 78px;
        display: flex;
        flex-wrap: wrap;
    }
    .maw-shell .maw-hist-legend:empty { display: none; }
}


.maw-shell .maw-heat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.maw-shell .maw-heat-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
}

.maw-shell .maw-heat-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Every cell is a readout, so the whole grid is a hover target. */
    cursor: crosshair;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* The hairline between cells is the PANEL colour, not a line colour: it reads
   as a gap rather than as a border, so the diverging ramp stays continuous
   across a block of similar cells instead of being cut into tiles. */
.maw-shell .maw-heat-cell {
    stroke: var(--panel, #fbf8f2);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Blank ON PURPOSE. The diagonal is a column against itself -- r = 1 by
   definition -- so colouring it at full strength would put the loudest band in
   the picture on the one thing that carries no information. */
.maw-shell .maw-heat-cell.is-self {
    fill: var(--panel, #fbf8f2);
    stroke: var(--line, #e5ddcd);
}

/* Not measurable. A neutral tone that belongs to NEITHER end of the diverging
   ramp: anything tinted would read as a weak correlation, which is exactly the
   claim these cells must not make. */
.maw-shell .maw-heat-cell.is-na {
    fill: var(--panel-soft, #f4efe4);
}

/* A restatement is already the strongest colour on the grid, so the mark has to
   be a different CHANNEL to be visible at all -- hence a corner notch rather
   than a tint. The cell keeps its fill and its value: the matrix SHOWS
   redundancy, it never suppresses it. */
.maw-shell .maw-heat-notch {
    fill: var(--ink, #34302a);
    opacity: 0.72;
    pointer-events: none;
}

.maw-shell .maw-heat-val {
    font-family: var(--font-mono);
    font-size: 9.5px;
    pointer-events: none;
}

/* n/a is deliberately quiet: it is a statement about the DATA, not a value, and
   it must not compete with the numbers around it for attention. */
.maw-shell .maw-heat-val.is-na {
    fill: var(--ink-dim, #9c9480);
    font-style: italic;
}

.maw-shell .maw-heat-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

/* The hovered cell's outline. Parked off-canvas until a cell is under the
   pointer, so there is nothing to create or destroy on a mousemove. */
.maw-shell .maw-heat-focus {
    fill: none;
    stroke: var(--ink, #34302a);
    stroke-width: 2;
    pointer-events: none;
}

/* ------------------------------------------------------------- legend --- */

.maw-shell .maw-heat-legend {
    flex: 0 0 auto;
    padding: 6px 4px 0;
    font-size: 10.5px;
    color: var(--ink-mut, #6d6759);
}

.maw-shell .maw-heat-ramp {
    display: flex;
    height: 8px;
    max-width: 240px;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 2px;
    overflow: hidden;
}

.maw-shell .maw-heat-ramp-step { flex: 1 1 auto; }

.maw-shell .maw-heat-ramp-axis {
    display: flex;
    justify-content: space-between;
    max-width: 240px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-dim, #9c9480);
    margin-top: 1px;
}

.maw-shell .maw-heat-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
    font-size: 10px;
    color: var(--ink-dim, #9c9480);
}

.maw-shell .maw-heat-key {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The same triangle the grid draws, so the key and the mark are the same shape
   rather than two things a reader has to connect. */
.maw-shell .maw-heat-key-notch {
    width: 9px;
    height: 9px;
    border-left: 9px solid var(--ink, #34302a);
    border-bottom: 9px solid transparent;
    opacity: 0.72;
}

.maw-shell .maw-heat-key-na {
    width: 9px;
    height: 9px;
    background: var(--panel-soft, #f4efe4);
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 2px;
}

/* The headline the matrix is allowed to make: the strongest pair that is NOT a
   restatement. Given its own line because it is the one sentence a reader who
   does not hover will take away. */
.maw-shell .maw-heat-strongest {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink, #34302a);
}

.maw-shell .maw-heat-strongest b { font-weight: 600; }

/* ----------------------------------- heatmap: runs x columns (P26) --- */

.maw-shell .maw-hgrid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* The one rule that makes 31 runs readable. The renderer enforces a 13px row
   floor and hands the svg its TRUE pixel height when the rows will not fit, so
   the pane has to give way rather than the rows -- at 6px a row every number is
   correct and nothing can be read. Overflow is opened only on the class the
   renderer sets, so a grid that does fit never shows a scrollbar. */
.maw-shell .maw-hgrid-plot {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.maw-shell .maw-hgrid-plot.is-scrolling {
    overflow-y: auto;
    /* Never horizontally: the renderer sizes the svg to the pane width and has
       already paid for this scrollbar out of that width. */
    overflow-x: hidden;
}

/* DELIBERATELY NO width/height HERE.
   `.maw-heat-svg` sets `width:100%; height:100%`, which is right for a matrix
   that always fits its pane. It would be wrong here: this svg carries explicit
   width/height attributes matching its viewBox precisely so the scrolling case
   has no scaling ambiguity, and a 100% height would collapse it back to the
   pane and undo the row floor. Do not "tidy" this by copying the heat rule. */
.maw-shell .maw-hgrid-svg {
    display: block;
    /* Every cell is a readout, so the whole grid is a hover target. */
    cursor: crosshair;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* The hairline between cells is the PANEL colour, not a line colour: it reads
   as a gap rather than as a border, so the sequential ramp stays continuous
   across a block of similar cells instead of being cut into tiles. */
.maw-shell .maw-hgrid-cell {
    stroke: var(--panel, #fbf8f2);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Not measured. A neutral that belongs to NO point on the ramp -- the ramp is
   light at the column minimum, so any tint at all would read as "this run
   scored lowest", which on a lower-is-better response is the picture of the
   best run in the study. The renderer emits no fill attribute on these cells
   precisely so this rule wins. */
.maw-shell .maw-hgrid-cell.is-na {
    fill: var(--panel-soft, #f4efe4);
}

.maw-shell .maw-hgrid-val {
    font-family: var(--font-mono);
    font-size: 9.5px;
    pointer-events: none;
}

/* n/a is deliberately quiet: it is a statement about the DATA, not a value, and
   it must not compete with the numbers around it for attention. */
.maw-shell .maw-hgrid-val.is-na {
    fill: var(--ink-dim, #9c9480);
    font-style: italic;
}

.maw-shell .maw-hgrid-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--ink-mut, #6d6759);
}

/* A column one outlier owns, where 30 runs share nearly one shade. The note
   names it, but a name is a lookup: without a mark on the column itself the
   reader has to map a string onto a position in the header band. Dotted, not
   solid, so it reads as a caveat rather than as a link -- and the
   `text-decoration-style` is split out so an engine that ignores it still
   underlines rather than dropping the mark entirely. */
.maw-shell .maw-hgrid-label.is-compressed {
    fill: var(--ink, #34302a);
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* The hovered cell's outline. Parked off-canvas until a cell is under the
   pointer, so there is nothing to create or destroy on a mousemove. */
.maw-shell .maw-hgrid-focus {
    fill: none;
    stroke: var(--ink, #34302a);
    stroke-width: 2;
    pointer-events: none;
}

/* ---------------------------------------------------------------- legend --- */

.maw-shell .maw-hgrid-legend {
    flex: 0 0 auto;
    padding: 6px 4px 0;
    font-size: 10.5px;
    color: var(--ink-mut, #6d6759);
}

/* Pivot mode only: which column each of the three chosen slots is. In matrix
   mode the axes are self-evident (runs down, columns across); here the whole
   grid means nothing without this line, so it leads the legend. */
.maw-shell .maw-hgrid-axes {
    margin-bottom: 4px;
    color: var(--ink, #34302a);
}

.maw-shell .maw-hgrid-ramp {
    display: flex;
    height: 8px;
    max-width: 240px;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 2px;
    overflow: hidden;
}

.maw-shell .maw-hgrid-ramp-step { flex: 1 1 auto; }

.maw-shell .maw-hgrid-ramp-axis {
    display: flex;
    justify-content: space-between;
    max-width: 240px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-dim, #9c9480);
    margin-top: 1px;
}

.maw-shell .maw-hgrid-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
    font-size: 10px;
    color: var(--ink-dim, #9c9480);
}

.maw-shell .maw-hgrid-key {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* The per-column-scale caveat lives in the LEGEND, not only in a note: the
   notes panel collapses behind a count as soon as there are two notes, and this
   sentence governs how every cell on the chart is read. It is allowed to wrap
   and to take the full width, because it is a sentence rather than a key. */
.maw-shell .maw-hgrid-key.is-scale {
    flex: 1 1 100%;
    color: var(--ink-mut, #6d6759);
    font-style: italic;
}

/* The same neutral the grid uses for an unmeasured cell, so the key and the
   mark are the same colour rather than two things a reader has to connect. */
.maw-shell .maw-hgrid-key-na {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--panel-soft, #f4efe4);
    border: 1px solid var(--line, #e5ddcd);
}


/* ------------------------------------------------- why this chart (P8) --- */

/* Ruling 1: every recommendation states a reason. This block is load-bearing,
   not decoration -- a chart that appears without saying why is the unexplained
   magic the deterministic engine was chosen over. */
.maw-shell .maw-viz-why {
    border: 1px solid var(--line, #e5ddcd);
    border-left: 3px solid var(--ink-mut, #6d6759);
    background: var(--panel-soft, #f4efe4);
    border-radius: 3px;
    padding: 7px 9px;
    margin-bottom: 10px;
}

.maw-shell .maw-viz-why-head {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim, #9c9480);
    margin-bottom: 3px;
}

.maw-shell .maw-viz-why-line {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink, #2f2b24);
}

.maw-shell .maw-viz-alts {
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.maw-shell .maw-viz-alts-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-dim, #9c9480);
    margin-right: 2px;
}

.maw-shell .maw-viz-alt {
    font-size: 10.5px;
    padding: 2px 7px;
    border: 1px solid var(--line, #e5ddcd);
    border-radius: 10px;
    background: #fff;
    color: var(--ink, #2f2b24);
    cursor: pointer;
    white-space: nowrap;
}

.maw-shell .maw-viz-alt:hover {
    border-color: var(--ink-mut, #6d6759);
    background: var(--panel-soft, #f4efe4);
}

.maw-shell .maw-viz-alt-best {
    margin-top: 6px;
    border-radius: 3px;
    font-weight: 600;
}

/* ------------------------------------------------- suggest chip (P1) --- */

/* An empty host is still a flex ITEM of the rail, so it would contribute the
   rail's 10px gap on every chart that never suggests anything. `:empty`
   removes it from layout entirely. */
.maw-shell .maw-viz-suggest-host:empty {
    display: none;
}

/* Deliberately NOT styled like .maw-viz-note. A note is what the chart could
   not do (warning ground, orange); this is something better it CAN do, so it
   takes the accent instead. Two messages that look alike get read as one. */
.maw-shell .maw-viz-suggest {
    border: 1px solid var(--indigo-bd, #c9c8f0);
    border-left: 3px solid var(--indigo, #4f46e5);
    background: var(--indigo-soft, #edecfb);
    border-radius: 3px;
    padding: 7px 9px;
    /* No margin: the rail is a flex column with its own gap. */
}

.maw-shell .maw-viz-suggest-head {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--indigo, #4f46e5);
    margin-bottom: 3px;
}

/* The reason IS the chip -- a truncated one asks the user to accept a switch
   they cannot evaluate. It wraps; it never ellipses. */
.maw-shell .maw-viz-suggest-line {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink, #2f2b24);
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.maw-shell .maw-viz-suggest-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.maw-shell .maw-viz-suggest-switch,
.maw-shell .maw-viz-suggest-dismiss {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.maw-shell .maw-viz-suggest-switch {
    border: 1px solid var(--indigo, #4f46e5);
    background: var(--indigo, #4f46e5);
    color: #fff;
    font-weight: 600;
}

.maw-shell .maw-viz-suggest-switch:hover {
    background: var(--indigo-2, #667eea);
    border-color: var(--indigo-2, #667eea);
}

.maw-shell .maw-viz-suggest-dismiss {
    border: 1px solid var(--line, #e5ddcd);
    background: #fff;
    color: var(--ink-mut, #6d6759);
}

.maw-shell .maw-viz-suggest-dismiss:hover {
    background: var(--panel-soft, #f4efe4);
    color: var(--ink, #2f2b24);
}

.maw-prmmod-root {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1010;
  background: rgba(28, 24, 18, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  box-sizing: border-box;
  overflow: auto;
}

.maw-prmmod-panel {
  background: var(--panel-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 100%;
  width: min(860px, 94vw);
  font-size: 13px;
}

/* ---- header -------------------------------------------------------- */
.maw-prmmod-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.maw-prmmod-title {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--navy);
  letter-spacing: .01em;
}

.maw-prmmod-count {
  font-size: 11.5px;
  color: var(--ink-mut);
  white-space: nowrap;
}

.maw-prmmod-x {
  border: 0;
  background: transparent;
  color: var(--ink-mut);
  font-size: 19px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 6px;
}
.maw-prmmod-x:hover { color: var(--ink); background: var(--panel-hover); }

/* The Clear-selections button rides .maw-prmmod-btn chrome, sized down to
   sit in the head bar. */
.maw-prmmod-clear {
  flex: none;
  padding: 5px 12px;
  font-size: 11.5px;
  white-space: nowrap;
}

/* ---- tools row (34a: search + source-file filter) ------------------- */
.maw-prmmod-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 0;
  flex: none;
}

.maw-prmmod-searchbox {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}
.maw-prmmod-searchbox:focus { border-color: var(--indigo); }
.maw-prmmod-searchbox::placeholder { color: var(--ink-mut); }

.maw-prmmod-filefilter {
  flex: none;
  max-width: 46%;
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
}

/* A filtered-out row keeps its checkbox state; only its visibility goes. */
.maw-prmmod-hidden { display: none; }

.maw-prmmod-nomatch {
  padding: 18px 0 22px;
  text-align: center;
  color: var(--ink-mut);
}

/* ---- body / table -------------------------------------------------- */
.maw-prmmod-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 16px;
}

.maw-prmmod-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 12px;
}

.maw-prmmod-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mut);
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line-hi);
  padding: 8px 10px 6px;
  white-space: nowrap;
}

.maw-prmmod-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.maw-prmmod-table tbody tr:hover { background: var(--panel-hover); }
.maw-prmmod-table tbody tr:last-child td { border-bottom: 0; }

.maw-prmmod-name {
  font-weight: 650;
  color: var(--navy);
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
}

.maw-prmmod-val {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 12.5px;
  white-space: nowrap;
}

.maw-prmmod-src { color: var(--ink-mut); font-size: 12px; }

.maw-prmmod-check,
.maw-prmmod-all {
  width: 15px;
  height: 15px;
  accent-color: var(--indigo);
  cursor: pointer;
}

/* ---- warning strip -------------------------------------------------- */
.maw-prmmod-warn {
  margin: 0 16px 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  border-radius: 0 6px 6px 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
  flex: none;
}

/* ---- footer --------------------------------------------------------- */
.maw-prmmod-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  flex: none;
}

.maw-prmmod-btn {
  border: 1px solid var(--line-hi);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.maw-prmmod-btn:hover { background: var(--panel-hover); }

.maw-prmmod-btn-primary {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.maw-prmmod-btn-primary:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.maw-prmmod-btn-primary[disabled] {
  opacity: .55;
  cursor: default;
}

/* ---- empty state ---------------------------------------------------- */
.maw-prmmod-empty {
  padding: 26px 0 30px;
  text-align: center;
  color: var(--ink-mut);
}

/* ---- Parameters PANEL empty state (34a ask 5) ------------------------
   These live in the page (SM / Assembly detail Parameters section), not in
   the overlay, so they are .maw-shell-scoped like the rest of the panel.
   The wrap modifier turns the fillscroll region into a centering flexbox;
   the message is deliberately NOT italic (maw-detail-sm-empty is). */
.maw-shell .maw-prm-emptywrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.maw-shell .maw-prm-emptystate {
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-mut);
  text-align: center;
  max-width: 460px;
  line-height: 1.55;
  padding: 20px;
}

.d3view-modelassembler {
    padding: 0;
    background: #f5f5f5;
}

.d3view-modelassembler .d3view-modelassembler-main-container {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.d3view-modelassembler .d3view-modelassembler-main-container > .plugin-tabs .pl-tabs-vertical-outer .pl-tab-item-label {
    font-variant: small-caps;
    font-size: 75%;
}

.d3view-modelassembler .d3view-modelassembler-main-container > .plugin-tabs .pl-tabs-vertical-outer li.list-group-item {
    border: none;
}

.d3view-modelassembler .d3view-modelassembler-header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-header h2 {
    margin: 0 0 5px 0;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-content {
    display: flex;
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-left-panel {
    width: 30%;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.d3view-modelassembler .d3view-modelassembler-left-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: white;
}

.d3view-modelassembler .d3view-modelassembler-left-header h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.d3view-modelassembler .d3view-modelassembler-subsystem-tree {
    overflow-y: auto;
    padding: 10px;
    flex: 1;
}

.d3view-modelassembler .d3view-modelassembler-subsystem-item {
    margin-bottom: 15px;
}

.d3view-modelassembler .d3view-modelassembler-subsystem-header {
    padding: 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px;
}

.d3view-modelassembler .d3view-modelassembler-subsystem-header i {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-subsystem-files {
    margin-left: 20px;
}

.d3view-modelassembler .d3view-modelassembler-file-item {
    padding: 5px;
    cursor: pointer;
    border-left: 2px solid #337ab7;
    margin: 3px 0;
    padding-left: 10px;
    background: white;
    border-radius: 3px;
    transition: background 0.2s;
}

.d3view-modelassembler .d3view-modelassembler-file-item:hover {
    background: #e7f3ff;
}

.d3view-modelassembler .d3view-modelassembler-file-item.d3view-modelassembler-file-selected,
.d3view-modelassembler .d3view-modelassembler-file-version.d3view-modelassembler-file-selected {
    background-color: #e7f3ff !important;
    border-left-width: 3px;
    font-weight: 500;
}

.d3view-modelassembler .d3view-modelassembler-file-version {
    padding: 5px;
    cursor: pointer;
    border-left: 2px solid #5cb85c;
    margin: 3px 0;
    margin-left: 30px;
    padding-left: 10px;
    background: white;
    border-radius: 3px;
    transition: background 0.2s;
}

.d3view-modelassembler .d3view-modelassembler-file-version:hover {
    background: #e7f7e7;
}

.d3view-modelassembler .d3view-modelassembler-right-panel {
    width: 70%;
    display: flex;
    flex-direction: column;
    background: white;
}

.d3view-modelassembler .d3view-modelassembler-right-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-right-header h3 {
    margin: 0;
    font-size: 18px;
}

.d3view-modelassembler .d3view-modelassembler-content-area {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.d3view-modelassembler-assembly-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-editor-area {
    flex: 1;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px;
}

.d3view-modelassembler .d3view-modelassembler-selected-files {
    margin-top: 10px;
}

.d3view-modelassembler .d3view-modelassembler-selected-files .alert {
    margin: 0;
    padding: 10px 15px;
}

.d3view-modelassembler .d3view-modelassembler-file-viewer {
    height: 100%;
}

/** Added by shashank2104 on 11/18/2025 at 10:06 PM - DVFIV-1854 - Make btn-danger icon color white **/
.d3view-modelassembler .d3view-modelassembler-remove-subsystem.btn-danger i,
.d3view-modelassembler .d3view-modelassembler-remove-version.btn-danger i {
    color: white;
}

/** Added by shashank2104 on 11/18/2025 at 10:06 PM - DVFIV-1854 - Selected file item styling **/
.d3view-modelassembler .d3view-modelassembler-file-item.selected,
.d3view-modelassembler .d3view-modelassembler-file-version.selected {
    background: #d4edda;
    border-left-color: #28a745;
}

.d3view-modelassembler .d3view-modelassembler-file-item.selected:hover,
.d3view-modelassembler .d3view-modelassembler-file-version.selected:hover {
    background: #c3e6cb;
}

/** Added by shashank2104 on 11/18/2025 at 10:06 PM - DVFIV-1854 - File viewer container and footer **/
.d3view-modelassembler .d3view-modelassembler-file-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-file-viewer {
    flex: 1;
    overflow: auto;
}

.d3view-modelassembler .d3view-modelassembler-file-viewer-footer {
    padding: 15px;
    border-top: 1px solid #ddd;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/** Added by shashank2104 on 11/18/2025 at 10:06 PM - DVFIV-1854 - Editor area full width **/
.d3view-modelassembler .d3view-modelassembler-editor-area {
    width: 100%;
}

/** Added by shashank2104 on 11/18/2025 at 10:06 PM - DVFIV-1854 - Name input styling **/
.d3view-modelassembler .d3view-modelassembler-name-input {
    display: inline-block;
    width: auto;
    padding: 2px 5px;
    height: auto;
}

/** Added by shashank2104 on 11/19/2025 at 05:05 PM - DVFIV-1854 - Card styles for assemblies and system models **/
.d3view-modelassembler .d3view-modelassembler-assembly-card,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card,
.d3view-modelassembler .d3view-modelassembler-loadcase-card {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s;
    cursor: pointer;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-assembly-card:hover,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card:hover,
.d3view-modelassembler .d3view-modelassembler-loadcase-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #337ab7;    
    transform: translateY(-3px);
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-header,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-header,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    /* background: #f8f9fa; */
    /* border-bottom: 1px solid #ddd; */
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-header-left,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-header-left,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-assembly-name,
.d3view-modelassembler .d3view-modelassembler-systemmodel-name,
.d3view-modelassembler .d3view-modelassembler-loadcase-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    margin-bottom: 0;
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-actions,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-actions,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-body,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-body,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-body {
    padding: 15px;
    flex: 1 1 auto;
}

/** Added by shashank2104 on 12/19/2025 at 05:05 PM - DVFIV-1854 - Card body content structure matching rbac.js **/
.d3view-modelassembler .d3view-modelassembler-assembly-card-body-content,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-body-content,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-body-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-icon,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-icon,
.d3view-modelassembler .d3view-modelassembler-loadcase-card-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-wrapper,
.d3view-modelassembler .d3view-modelassembler-systemmodel-info-wrapper,
.d3view-modelassembler .d3view-modelassembler-loadcase-info-wrapper {
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-count-container {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-count-container.clickable:hover {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-count-container i {
    margin-right: 5px;
    color: #999;
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-list {
    font-size: 12px;
    color: #666;
    margin-top: 8px;
}

.d3view-modelassembler .d3view-modelassembler-assembly-card-footer,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card-footer {
    padding: 10px 15px;
    /* border-top: 1px solid #eee; */
    /* background: #f8f9fa; */
    font-size: 12px;
    color: #666;
}

.d3view-modelassembler .d3view-modelassembler-assembly-created,
.d3view-modelassembler .d3view-modelassembler-systemmodel-created {
    display: flex;
    align-items: center;
    gap: 5px;
}

/** Added by shashank2104 on 11/19/2025 at 05:05 PM - DVFIV-1854 - Selectable styles **/
.d3view-modelassembler .d3view-modelassembler-assemblies-grid.ui-selectable,
.d3view-modelassembler .d3view-modelassembler-systemmodels-grid.ui-selectable {
    position: relative;
}

.d3view-modelassembler .d3view-modelassembler-assemblies-grid .ui-selectee,
.d3view-modelassembler .d3view-modelassembler-systemmodels-grid .ui-selectee {
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-assemblies-grid .ui-selecting,
.d3view-modelassembler .d3view-modelassembler-systemmodels-grid .ui-selecting {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

.d3view-modelassembler .d3view-modelassembler-assemblies-grid .ui-selected,
.d3view-modelassembler .d3view-modelassembler-systemmodels-grid .ui-selected {
    background-color: #bbdefb;
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.d3view-modelassembler .d3view-modelassembler-assembly-card.ui-selected,
.d3view-modelassembler .d3view-modelassembler-systemmodel-card.ui-selected {
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

/** Added by shashank2104 on 12/04/2025 at 03:29 PM - DVFIV-1858 - Floating bulk actions bar for GraphView selection **/
.d3view-modelassembler-floating-bulk-actions-bar {
    height: 45px;
    width: calc(100% - 80px);
    margin: 0 auto;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #FFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.d3view-modelassembler-floating-bulk-actions-bar[data-position="top"] {
    top: 80px;
    bottom: unset;
}

.d3view-modelassembler-floating-bulk-actions-bar .pl-ribbon-menu>div {
    display: flex;
    align-items: center;
}

.d3view-modelassembler-floating-bulk-actions-bar .pl-ribbon-menu>div>button {
    flex-grow: 1;
}

.d3view-modelassembler-floating-bulk-actions-bar .pl-ribbon-menu>div>button .d3view-flex-v {
    justify-content: center;
}

.d3view-modelassembler-floating-bulk-actions-bar.overflowing .pl-ribbon-menu>div>button {
    flex-grow: 0;
    margin: 2px;
}

.d3view-modelassembler-floating-bulk-actions-bar.overflowing {
    height: auto;
}

.d3view-modelassembler-floating-bulk-actions-bar .selected-objects-count {
    white-space: nowrap;
}

.d3view-modelassembler-floating-bulk-actions-bar .close-bar {
    flex: 0 0 auto;
}

/** Added by shashank2104 on 11/19/2025 at 05:05 PM - DVFIV-1854 - Floating actions bar styles **/
.d3view-modelassembler .d3view-modelassembler-floating-actions-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/** Added by shashank2104 on 11/19/2025 at 05:05 PM - DVFIV-1854 - TabManager container styles **/
.d3view-modelassembler .d3view-modelassembler-tabmanager-container,
.d3view-modelassembler .d3view-modelassembler-systemmodels-tabmanager-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/** Added by shashank2104 on 12/19/2025 at 05:05 PM - DVFIV-1854 - Content container padding for floating bar **/
.d3view-modelassembler .d3view-modelassembler-assemblies-content-container,
.d3view-modelassembler .d3view-modelassembler-systemmodels-content-container {
    padding-top: 0;
}

.d3view-modelassembler .d3view-modelassembler-assemblies-content-container:has(.d3view-modelassembler-floating-actions-bar),
.d3view-modelassembler .d3view-modelassembler-systemmodels-content-container:has(.d3view-modelassembler-floating-actions-bar) {
    padding-top: 50px;
}

/** Added by shashank2104 on 11/19/2025 at 05:05 PM - DVFIV-1854 - Checkbox styles in card headers **/
.d3view-modelassembler .d3view-modelassembler-assembly-select-checkbox,
.d3view-modelassembler .d3view-modelassembler-systemmodel-select-checkbox {
    margin-right: 8px;
    cursor: pointer;
}

.d3view-modelassembler .d3view-tab-manager {
    border-bottom: none;
}
.d3view-modelassembler .d3view-modelassembler-main-container .tab-name {
    display: inline-block;
}
.d3view-modelassembler .d3view-modelassembler-main-container .fb-tab-item > a {
    display: flex;
    gap: 8px;
    align-items: center;
}

/** Added by shashank2104 on 11/20/2025 at 04:41 PM - DVFIV-1854 - Selectable highlighting styles for detail view **/
.d3view-modelassembler .d3view-modelassembler-detail-list.ui-selectable .ui-selecting,
.d3view-modelassembler .d3view-modelassembler-detail-list.ui-selectable .ui-selected {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
}

.d3view-modelassembler .d3view-modelassembler-detail-list.ui-selectable .ui-selected {
    background-color: #bbdefb !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}

/** Added by shashank2104 on 11/20/2025 at 04:47 PM - DVFIV-1854 - Detail view item name truncation and layout improvements **/
.d3view-modelassembler .d3view-modelassembler-detail-list .row-key {
    display: flex;
    align-items: center;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-detail-list .d3view-modelassembler-detail-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-detail-list .row-id {
    display: block;
    margin-top: 5px;
}

.d3view-modelassembler .d3view-modelassembler-detail-list .row-meta {
    display: block;
    margin-top: 3px;
}

/** Added by shashank2104 on 11/20/2025 at 06:03 PM - DVFIV-1854 - File row hover styles for showing buttons on hover **/
.d3view-modelassembler-file-row-hover {
    transition: background-color 0.2s ease;
}

.d3view-modelassembler-file-row-hover:hover {
    background-color: #f0f0f0;
}

.d3view-modelassembler-file-actions-hover {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.d3view-modelassembler-file-row-hover:hover .d3view-modelassembler-file-actions-hover {
    opacity: 1;
}

.d3view-modelassembler-file-name-truncate {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    transition: all 0.2s ease;
}

.d3view-modelassembler-file-row-hover:hover .d3view-modelassembler-file-name-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

@media (max-width: 768px) {
    .d3view-modelassembler-file-row-hover:hover .d3view-modelassembler-file-name-truncate {
        max-width: 120px;
    }
    
    .d3view-modelassembler-file-actions-hover {
        flex-wrap: wrap;
        gap: 3px;
    }
    
    .d3view-modelassembler-file-actions-hover .btn {
        padding: 2px 6px;
        font-size: 11px;
    }
}




.d3view-modelassembler  .tv-ext-filters .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.d3view-modelassembler .tv-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.d3view-modelassembler .tv-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.d3view-modelassembler .tv-ext-filters input[data-search-input] {
    height: 40px;
}
.d3view-modelassembler .tv-ext-filters .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.d3view-modelassembler .tv-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.d3view-modelassembler .tv-ext-filters .d3view-filter-button button.toggle-fc {
    height: 30px;
}

.d3view-modelassembler .tv-ext-filters .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.d3view-modelassembler .tv-ext-filters .d3view-filter-button span.clear-search:hover {
    color: red;
}
.d3view-modelassembler .tv-ext-filters .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}
.d3view-modelassembler-file-viewer .viz-container {
    min-height: 300px;
}

.d3view-modelassembler-loadcase-select-dropdown .select2-results .select2-highlighted .lc-info * {
    color: #FFF!important;
}

/** Added by shashank2104 on 01/02/2026 at 12:00 PM - DVFIV-1854 - Graph view layout styles **/
/** Updated by shashank2104 on 01/02/2026 at 12:00 PM - DVFIV-1854 - Left panel 100% by default, 70% when right panel open **/

.d3view-modelassembler-graph-legend-container > .legends-wrapper {
    position: relative;
}
.d3view-modelassembler-graph-legend-container > .legends-wrapper .legend-header {
    display: none;
}
.d3view-modelassembler-graph-left-container {
    flex: 1 1 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: flex-basis 0.3s ease;
}

.d3view-modelassembler-graph-left-container.d3view-modelassembler-graph-left-squeezed {
    flex: 0 0 70%;
}

.d3view-modelassembler-graph-right-container {
    flex: 0 0 30%;
    border-left: 1px solid #ddd;
    background: #fafafa;
    overflow-y: auto;
}

.d3view-modelassembler-graph-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    border-radius: 4px;
    padding: 5px 10px;
}

.d3view-modelassembler-graph-canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.d3view-modelassembler-graph-canvas-container.d3view-modelassembler-graph-dropping {
    background-color: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007bff;
}

.d3view-modelassembler-graph-actions-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-modelassembler-graph-actions-header {
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: white;
}

.d3view-modelassembler-graph-actions-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.d3view-modelassembler-graph-actions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.d3view-modelassembler-graph-action-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: move;
    background: white;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.d3view-modelassembler-graph-action-item:hover {
    background-color: #f0f0f0;
}

.d3view-modelassembler-graph-action-item i {
    color: #007bff;
    width: 20px;
    text-align: center;
}

.d3view-modelassembler-graph-action-item span {
    flex: 1;
    color: #333;
}

/** Added by shashank2104 on 12/06/2025 at 09:51 AM - DVFIV-1854 - Graph depth toggle button styles for progressive disclosure **/
.d3view-modelassembler-graph-depth-toggle-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.d3view-modelassembler-graph-depth-toggles .btn {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.d3view-modelassembler-graph-depth-toggles .btn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.d3view-modelassembler-graph-depth-toggles .btn:hover:not(.active) {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/** Added by shashank2104 on 12/11/2025 - DVFIV-1864 - Process | Data mode toggle styles **/
.d3view-modelassembler-graph-mode-toggle {
    z-index: 10;
    flex-shrink: 0;
}

.d3view-modelassembler-graph-mode-toggle .btn {
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.d3view-modelassembler-graph-mode-toggle .btn.btn-primary {
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.d3view-modelassembler-graph-mode-toggle .btn.btn-default:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.d3view-modelassembler-timeline-toggle-container {
    flex-shrink: 0;
}

/** Added by shashank2104 on 12/11/2025 - DVFIV-1864 - Workflow container styles for Process mode **/
.d3view-modelassembler-graph-workflow-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fafafa;
}

.d3view-modelassembler-graph-stats {
    display: flex;
    gap: 15px;
    align-items: center;
}

.d3view-modelassembler-graph-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.d3view-modelassembler-graph-stats .stat-count {
    font-weight: 600;
    color: #495057;
}

.d3view-modelassembler-graph-stats .stat-label {
    color: #6c757d;
}

/** Show more button node styles **/
.d3view-modelassembler-graph-show-more-node {
    cursor: pointer;
}

/** Added by shashank2104 on 12/17/2025 - SIM-984 - Graph Quick Sidebar Styles **/
/** Updated by shashank2104 on 01/04/2026 at 01:05 AM - Use absolute positioning to prevent canvas resize **/
.d3view-modelassembler-graph-sidebar {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #ddd;
    transition: width 0.3s ease;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.d3view-modelassembler-graph-sidebar.expanded {
    width: 50%;
    min-width: 400px;
    max-width: 800px;
}

.d3view-modelassembler-graph-sidebar-header {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-modelassembler-graph-sidebar-title {
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler-graph-sidebar-title i {
    color: #007bff;
}

.d3view-modelassembler-graph-sidebar-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.d3view-modelassembler-graph-sidebar-content .d3view-modelassembler-systemmodel-item-view,
.d3view-modelassembler-graph-sidebar-content .d3view-modelassembler-assembly-item-view {
    height: 100%;
}

/** Sidebar mode adjustments for nested views **/
.d3view-modelassembler-graph-sidebar.expanded .d3view-modelassembler-systemmodel-item-view .d3view-modelassembler-tab-content,
.d3view-modelassembler-graph-sidebar.expanded .d3view-modelassembler-assembly-item-view .d3view-modelassembler-assembly-tab-content {
    padding: 15px;
}

/** Ensure canvas container maintains full height when sidebar is open **/
.d3view-modelassembler-graph-main-content {
    height: 100%;
    min-height: 0;
    align-items: stretch !important; /* Force all children to stretch to full height */
    overflow: hidden; /* Prevent overflow during sidebar transition */
    position: relative; /* Added by shashank2104 on 01/04/2026 - For absolute positioned sidebar */
}

.d3view-modelassembler-graph-main-content > * {
    height: 100% !important; /* All direct children must be full height */
    min-height: 0;
}

.d3view-modelassembler-graph-left-container {
    height: 100% !important;
    min-height: 0;
    flex: 1 1 auto !important; /* Allow flexible sizing while maintaining height */
}

.d3view-modelassembler-graph-canvas-container {
    height: 100% !important;
    min-height: 0;
}

/** Added by shashank2104 on 11/26/2025 at 01:28 PM - DVFIV-1854 - Compare View Styles **/
.d3view-modelassembler-compare-view {
    background: #fff;
}

.d3view-modelassembler-compare-view-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler-compare-header {
    flex-shrink: 0;
}

.d3view-modelassembler-compare-content {
    flex: 1;
    min-height: 0;
    display: flex;
}

.d3view-modelassembler-compare-file-list {
    overflow-y: auto;
}

.d3view-modelassembler-compare-item-section {
    margin-bottom: 20px;
}

.d3view-modelassembler-compare-item-header {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 10;
}

.d3view-modelassembler-compare-item-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.d3view-modelassembler-compare-item-files {
    padding: 5px 0;
}

.d3view-modelassembler-compare-file-item {
    transition: background-color 0.2s, border-left 0.2s;
}

.d3view-modelassembler-compare-file-item:hover {
    background-color: #f0f0f0;
}

.d3view-modelassembler-compare-file-item.selected {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
    padding-left: 9px;
}

.d3view-modelassembler-compare-file-item.selected .fa-check-circle {
    display: inline-block !important;
}

.d3view-modelassembler-compare-file-item .fa-check-circle {
    display: none;
}

.d3view-modelassembler-compare-file-item.highlighted {
    background-color: #fff3cd;
    animation: highlightPulse 0.5s ease-in-out;
}

@keyframes highlightPulse {
    0%, 100% {
        background-color: #fff3cd;
    }
    50% {
        background-color: #ffc107;
    }
}

.d3view-modelassembler-compare-changes {
    padding: 0;
}

.d3view-modelassembler-compare-changes-content {
    height: 100%;
    overflow-y: auto;
}

.d3view-modelassembler-compare-changes-stats {
    margin-bottom: 20px;
}

.d3view-modelassembler-compare-stat-item {
    font-size: 13px;
}

.d3view-modelassembler-compare-changes-section {
    margin-bottom: 15px;
}

.d3view-modelassembler-compare-changes-section h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.d3view-modelassembler-compare-changes-item {
    transition: background-color 0.2s;
    font-size: 12px;
}

.d3view-modelassembler-compare-changes-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.d3view-modelassembler-compare-viewer {
    padding: 0;
}

.d3view-modelassembler-compare-file-viewer-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler-compare-file-viewer-header {
    flex-shrink: 0;
}

.d3view-modelassembler-compare-file-viewer-editor {
    flex: 1;
    min-height: 0;
}

.d3view-modelassembler-compare-file-btn:disabled,
.d3view-modelassembler-compare-view-file-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/** Added by shashank2104 on 12/15/2025 at 11:02 PM - DVFIV-1868 - Matrix view styles **/
/** Updated by shashank2104 on 12/15/2025 at 11:55 PM - DVFIV-1868 - Simplified to match app defaults **/
.d3view-modelassembler-compare-matrix-container {
    height: 100%;
    display: flex;
    padding: 15px;
    background: #fafafa;
}

.d3view-modelassembler-compare-matrix-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.d3view-modelassembler-compare-matrix-body {
    flex: 1;
    overflow: auto;
}

.d3view-modelassembler-compare-matrix-corner-cell {
    position: sticky;
    left: 0;
    z-index: 11;
    background: #f8f9fa;
    min-width: 200px;
    padding: 12px 15px;
}

.d3view-modelassembler-compare-matrix-filename-cell {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    max-width: 280px;
    padding: 12px 15px;
}

.d3view-modelassembler-compare-matrix-cell {
    text-align: left;
    padding: 8px 10px;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - New cell layout styles **/
.d3view-modelassembler-compare-matrix-cell-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d3view-modelassembler-compare-matrix-cell-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - Status icon and filename layout **/
.d3view-modelassembler-compare-matrix-cell-status-filename {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler-compare-matrix-cell-body {
    padding: 6px 0;
}

.d3view-modelassembler-compare-matrix-cell-filename {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler-compare-matrix-cell-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.d3view-modelassembler-compare-matrix-cell-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.d3view-modelassembler-compare-matrix-cell-reference {
    padding: 8px 0;
    color: #666;
}

.d3view-modelassembler-compare-matrix-cell-summary {
    padding: 6px 0;
}

.d3view-modelassembler-compare-matrix-cell-identical,
.d3view-modelassembler-compare-matrix-cell-unchanged,
.d3view-modelassembler-compare-matrix-cell-modified {
    padding: 4px 0;
}

.d3view-modelassembler-compare-matrix-cell-missing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    justify-content: center;
}

.d3view-modelassembler-compare-matrix-category-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-modelassembler-compare-matrix-category-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.d3view-modelassembler-compare-matrix-category-check {
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.d3view-modelassembler-compare-matrix-category-check.changed {
    color: #28a745;
}

.d3view-modelassembler-compare-matrix-category-label {
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/** Added by shashank2104 on 12/16/2025 at 05:07 PM - DVFIV-1871 - Inline category badges **/
.d3view-modelassembler-compare-matrix-category-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.d3view-modelassembler-compare-matrix-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 3px;
    background: #f5f5f5;
    color: #888;
    cursor: help;
    white-space: nowrap;
}

.d3view-modelassembler-compare-matrix-category-badge.changed {
    background: #e8f5e9;
    color: #28a745;
}

/** Assembly thumbnail in matrix header **/
.d3view-modelassembler-compare-matrix-assembly-thumbnail {
    display: flex;
    justify-content: center;
}

.d3view-modelassembler-compare-matrix-view-details {
    padding-top: 6px;
    border-top: 1px solid #eee;
    margin-top: 6px;
}

.d3view-modelassembler-compare-matrix-view-details-link {
    color: #667eea;
    text-decoration: none;
}

.d3view-modelassembler-compare-matrix-view-details-link:hover {
    text-decoration: underline;
}

/** Detail panel styles **/
.d3view-modelassembler-compare-detail-panel {
    padding: 15px;
}

.d3view-modelassembler-compare-detail-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
}

.d3view-modelassembler-compare-detail-files {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.d3view-modelassembler-compare-detail-file {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler-compare-detail-arrow {
    color: #999;
}

.d3view-modelassembler-compare-detail-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.d3view-modelassembler-compare-detail-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
}

.d3view-modelassembler-compare-detail-legend-item i.changed {
    color: #28a745;
}

.d3view-modelassembler-compare-detail-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.d3view-modelassembler-compare-detail-category {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

.d3view-modelassembler-compare-detail-category.has-changes {
    border-color: #ddd;
}

.d3view-modelassembler-compare-detail-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    cursor: pointer;
}

.d3view-modelassembler-compare-detail-category-header:hover {
    background: #f1f3f5;
}

.d3view-modelassembler-compare-detail-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - Info icon styles **/
.d3view-modelassembler-compare-detail-category-info,
.d3view-modelassembler-compare-matrix-category-info {
    color: #aaa;
    cursor: help;
    margin-left: 4px;
}

.d3view-modelassembler-compare-detail-category-info:hover,
.d3view-modelassembler-compare-matrix-category-info:hover {
    color: #666;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - Open category state **/
.d3view-modelassembler-compare-detail-category.open .d3view-modelassembler-compare-detail-category-header::after {
    content: '';
}

.d3view-modelassembler-compare-detail-category-check {
    color: #ccc;
}

.d3view-modelassembler-compare-detail-category.has-changes .d3view-modelassembler-compare-detail-category-check {
    color: #28a745;
}

.d3view-modelassembler-compare-detail-category-badges {
    display: flex;
    gap: 5px;
}

.d3view-modelassembler-compare-detail-category-badges .badge {
    padding: 3px 6px;
    border-radius: 10px;
}

.d3view-modelassembler-compare-detail-category-badges .badge-success {
    background: #28a745;
    color: #fff;
}

.d3view-modelassembler-compare-detail-category-badges .badge-danger {
    background: #dc3545;
    color: #fff;
}

.d3view-modelassembler-compare-detail-category-badges .badge-warning {
    background: #d69e2e;
    color: #fff;
}

.d3view-modelassembler-compare-detail-category-content {
    padding: 10px;
    border-top: 1px solid #eee;
}

.d3view-modelassembler-compare-detail-keyword-card {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.d3view-modelassembler-compare-detail-keyword-card:last-child {
    margin-bottom: 0;
}

.d3view-modelassembler-compare-detail-keyword-card:hover {
    border-color: #ddd;
}

.d3view-modelassembler-compare-detail-keyword-card.expanded {
    border-color: #667eea;
}

.d3view-modelassembler-compare-detail-keyword-card.added {
    border-left: 3px solid #28a745;
}

.d3view-modelassembler-compare-detail-keyword-card.removed {
    border-left: 3px solid #dc3545;
}

.d3view-modelassembler-compare-detail-keyword-card.modified {
    border-left: 3px solid #d69e2e;
}

.d3view-modelassembler-compare-detail-keyword-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fafbfc;
}

.d3view-modelassembler-compare-detail-keyword-card.added .d3view-modelassembler-compare-detail-keyword-header i {
    color: #28a745;
}

.d3view-modelassembler-compare-detail-keyword-card.removed .d3view-modelassembler-compare-detail-keyword-header i {
    color: #dc3545;
}

.d3view-modelassembler-compare-detail-keyword-card.modified .d3view-modelassembler-compare-detail-keyword-header i {
    color: #d69e2e;
}

.d3view-modelassembler-compare-detail-keyword-header code {
    background: transparent;
    padding: 0;
    flex: 1;
}

.d3view-modelassembler-compare-detail-keyword-lines {
    color: #888;
}

.d3view-modelassembler-compare-detail-keyword-status {
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.d3view-modelassembler-compare-detail-keyword-card.added .d3view-modelassembler-compare-detail-keyword-status {
    background: #d4edda;
    color: #155724;
}

.d3view-modelassembler-compare-detail-keyword-card.removed .d3view-modelassembler-compare-detail-keyword-status {
    background: #f8d7da;
    color: #721c24;
}

.d3view-modelassembler-compare-detail-keyword-card.modified .d3view-modelassembler-compare-detail-keyword-status {
    background: #fff3cd;
    color: #856404;
}

.d3view-modelassembler-compare-detail-keyword-body {
    border-top: 1px solid #eee;
    padding: 10px;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - Active cell viewing details **/
.d3view-modelassembler-compare-matrix-cell.viewing-details {
    background-color: #fff3e0 !important;
    box-shadow: inset 0 0 0 2px #ff9800;
}

/** Added by shashank2104 on 12/16/2025 - DVFIV-1871 - Empty diff message **/
.d3view-modelassembler-kw-diff-empty {
    padding: 15px;
    text-align: center;
    color: #666;
    background: #f5f5f5;
    border-radius: 4px;
}

.d3view-modelassembler-compare-matrix-cell.missing {
    background-color: transparent;
}

.d3view-modelassembler-compare-matrix-cell.modified {
    background-color: transparent;
}

.d3view-modelassembler-compare-matrix-cell.unchanged {
    background-color: transparent;
}

/** Status Icons - Minimalist Design **/
.d3view-modelassembler-compare-matrix-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.d3view-modelassembler-compare-matrix-status-icon.present {
    background: #e8f5e9;
    color: #43a047;
}

.d3view-modelassembler-compare-matrix-status-icon.same {
    background: #e8f5e9;
    color: #2e7d32;
}

.d3view-modelassembler-compare-matrix-status-icon.modified {
    background: #fff3e0;
    color: #f57c00;
}

.d3view-modelassembler-compare-matrix-status-icon.missing {
    background: transparent;
    color: #ccc;
    border: 1px dashed #ddd;
}

.d3view-modelassembler-compare-matrix-cell.selectable:hover .d3view-modelassembler-compare-matrix-status-icon {
    transform: scale(1.15);
}

.d3view-modelassembler-compare-matrix-cell.selectable:hover .d3view-modelassembler-compare-matrix-status-icon.present,
.d3view-modelassembler-compare-matrix-cell.selectable:hover .d3view-modelassembler-compare-matrix-status-icon.same {
    background: #c8e6c9;
}

.d3view-modelassembler-compare-matrix-cell.selectable:hover .d3view-modelassembler-compare-matrix-status-icon.modified {
    background: #ffe0b2;
}

/** Version label under status icon - shows version number when different from base **/
.d3view-modelassembler-compare-matrix-version-label {
    color: #888;
    margin-top: 3px;
}

/** Summary Details - Better formatting for comparison results **/
.d3view-modelassembler-compare-matrix-summary-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d3view-modelassembler-compare-matrix-summary-details.d3view-modelassembler-compare-matrix-summary-clickable:hover {
    background-color: #f5f5f5;
    border-radius: 4px;
    margin: -4px;
    padding: 4px;
}

.d3view-modelassembler-compare-matrix-summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.d3view-modelassembler-compare-matrix-summary-row i {
    width: 16px;
    text-align: center;
}

.d3view-modelassembler-compare-matrix-summary-label {
    color: #555;
    min-width: 70px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.d3view-modelassembler-compare-matrix-summary-values {
    color: #333;
}

.d3view-modelassembler-compare-matrix-summary-values span {
    margin-left: 4px;
}

/** Auto-enabled action buttons - highlight when comparison is available **/
.d3view-modelassembler-compare-matrix-row-text-diff-btn.auto-enabled,
.d3view-modelassembler-compare-matrix-row-3d-diff-btn.auto-enabled {
    color: #337ab7;
}

.d3view-modelassembler-compare-matrix-row-text-diff-btn.auto-enabled:hover,
.d3view-modelassembler-compare-matrix-row-3d-diff-btn.auto-enabled:hover {
    color: #23527c;
    background-color: #f5f5f5;
}

.d3view-modelassembler-compare-matrix-cell.reference {
    background-color: transparent;
}
.d3view-modelassembler-compare-matrix-cell.reference .d3view-modelassembler-compare-matrix-cell-header {
    border-bottom: none;
}


.d3view-modelassembler-compare-matrix-cell-actions {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.d3view-modelassembler-compare-matrix-cell:hover .d3view-modelassembler-compare-matrix-cell-actions {
    opacity: 1;
}

.d3view-modelassembler-compare-matrix-right {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.3s ease, margin-left 0.3s ease;
    margin-left: 0;
}

.d3view-modelassembler-compare-matrix-right.expanded {
    margin-left: 15px;
}

.d3view-modelassembler-compare-matrix-right .ui-resizable-w {
    width: 5px;
    left: 0;
    background: transparent;
    cursor: ew-resize;
}

.d3view-modelassembler-compare-matrix-right .ui-resizable-w:hover {
    background: #e0e0e0;
}

.d3view-modelassembler-compare-matrix-right-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.d3view-modelassembler-compare-matrix-row.filtered-out {
    display: none;
}

.d3view-modelassembler-compare-matrix-row:hover .d3view-modelassembler-compare-matrix-filename-cell {
    background-color: #f5f5f5;
}

/** Added by shashank2104 on 12/16/2025 at 09:19 AM - DVFIV-1868 - Row selection styles **/
.d3view-modelassembler-compare-matrix-cell.row-selected {
    background-color: #fff3cd !important;
    box-shadow: inset 0 0 0 2px #ffc107;
}

.d3view-modelassembler-compare-matrix-cell.selectable {
    cursor: pointer;
}

.d3view-modelassembler-compare-matrix-cell.selectable:hover {
    background-color: #f8f9fa;
}

.d3view-modelassembler-compare-matrix-file-link {
    color: #337ab7;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

.d3view-modelassembler-compare-matrix-file-link:hover {
    text-decoration: underline;
    color: #23527c;
}

.d3view-modelassembler-compare-matrix-assembly-link {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.d3view-modelassembler-compare-matrix-assembly-link:hover {
    text-decoration: underline;
    color: #337ab7;
}

.d3view-modelassembler-compare-matrix-summary-cell {
    font-size: 11px;
    padding: 12px 10px;
    min-width: 160px;
}

.d3view-modelassembler-compare-matrix-actions-cell {
    padding: 12px 10px;
    min-width: 80px;
}

.d3view-modelassembler-compare-matrix-table th,
.d3view-modelassembler-compare-matrix-table td {
    vertical-align: middle;
    line-height: 1.5;
}

.d3view-modelassembler-compare-matrix-table th {
    padding: 12px 10px;
}

.d3view-modelassembler-compare-matrix-row {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s ease;
}

.d3view-modelassembler-compare-matrix-row:hover {
    background-color: #fafbfc;
}

.d3view-modelassembler-compare-matrix-row:hover .d3view-modelassembler-compare-matrix-filename-cell {
    background-color: #fafbfc;
}

/** Zebra striping for better readability **/
.d3view-modelassembler-compare-matrix-row:nth-child(even) {
    background-color: #fcfcfc;
}

.d3view-modelassembler-compare-matrix-row:nth-child(even) .d3view-modelassembler-compare-matrix-filename-cell {
    background-color: #fcfcfc;
}

.d3view-modelassembler-compare-matrix-peacock-compare {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* Text truncate utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/** Added by shashank2104 on 12/03/2025 at 10:16 PM - DVFIV-1854 - Styles for file list item hover buttons **/
.d3view-modelassembler-assembly-files-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    position: relative;
}

.d3view-modelassembler-assembly-files-list-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.d3view-modelassembler-assembly-files-list-item-actions {
    visibility: hidden;
    opacity: 0;
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.d3view-modelassembler-assembly-files-list-item:hover .d3view-modelassembler-assembly-files-list-item-actions {
    visibility: visible;
    opacity: 1;
}

.d3view-modelassembler-assembly-files-list-item-actions button {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Main TabManager in header styles **/
.d3view-modelassembler .d3view-modelassembler-main-tabmanager-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    min-width: 0;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Left navigation tabs styles **/
.d3view-modelassembler .pl-tabs-vertical {
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-left-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-left-nav-btn:hover {
    background-color: #f5f5f5;
}

.d3view-modelassembler .pl-tabs-vertical li.active .d3view-modelassembler-left-nav-btn {
    background-color: #e7f3ff;
    color: #2196f3;
    font-weight: 500;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Main content area styles **/
.d3view-modelassembler .d3view-modelassembler-main-content {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Dashboard summary cards styles **/
.d3view-modelassembler .d3view-modelassembler-dashboard-header {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    flex-wrap: wrap;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-header .card {
    flex: 1;
    min-width: 200px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s;
    height: 60px;
    margin-bottom: 3px;
    padding: 4px 15px !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-header .card a {
    text-decoration: none;
    color: inherit;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Dashboard table styles **/
.d3view-modelassembler .d3view-modelassembler-dashboard-table-container {
    overflow: auto;
    padding: 20px;
    background: #fff;
}

.d3view-modelassembler .d3view-modelassembler-table-group-header {
    background: #e9ecef !important;
    font-weight: bold;
}

.d3view-modelassembler .d3view-modelassembler-table-row {
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-table-row:hover {
    background-color: #f5f5f5;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Nested table row styles **/
.d3view-modelassembler .d3view-modelassembler-table-row[data-level="1"] {
    background-color: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-table-row[data-level="2"] {
    background-color: #ffffff;
}

.d3view-modelassembler .d3view-modelassembler-table-row[data-level="3"] {
    background-color: #fafafa;
}

.d3view-modelassembler .d3view-modelassembler-table-row[data-level="4"] {
    background-color: #ffffff;
}

.d3view-modelassembler .d3view-modelassembler-table-expand-btn {
    color: #666;
    transition: transform 0.2s;
}

.d3view-modelassembler .d3view-modelassembler-table-expand-btn:hover {
    color: #333;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Modern table row styles with better visual hierarchy **/
.d3view-modelassembler .d3view-modelassembler-table-systemmodel-row {
    border-left: 3px solid #337ab7;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-table-systemmodel-row:hover {
    background-color: #e8f4f8 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.d3view-modelassembler .d3view-modelassembler-table-assembly-row {
    border-left: 3px solid #f0ad4e;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-table-assembly-row:hover {
    background-color: #fef9e7 !important;
}

.d3view-modelassembler .d3view-modelassembler-table-file-row {
    border-left: 2px solid #777;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-table-file-row:hover {
    background-color: #f5f5f5 !important;
}

.d3view-modelassembler .d3view-modelassembler-table-version-row {
    border-left: 1px solid #ddd;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-table-version-row:hover {
    background-color: #f9f9f9 !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper {
    border-radius: 4px;
    overflow: auto;
}

/** Added by shashank2104 on 2026-04-14 - DVFIV-1995 - Neutralize embedded workflow's fixed positioning + high z-index when rendered as Home view type **/
.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper .workflow,
.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper div.workflow#workflow_modal,
.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper div.workflow.show.fullscreen {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
    transition: none !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper table {
    border-collapse: separate;
    border-spacing: 0;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #555;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Modern card/panel UI styles **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card {
    transition: all 0.2s ease;
    border-radius: 4px;
    overflow: hidden;
    background-color: #FFF !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.panel-default {
    background: #FFF !important;
    border: none!important;
    box-shadow: none!important;
    overflow: visible;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card .panel-heading {
    background: #FFF !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-systemmodel {
    border-left-width: 4px !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-assembly {
    border-left-width: 4px !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-file {
    border-left-width: 3px !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-version {
    border-left-width: 2px !important;
}

.d3view-modelassembler .d3view-modelassembler-card-children {
    padding: 10px !important;
}

.d3view-modelassembler .d3view-modelassembler-card-collapse-btn {
    transition: transform 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-card-collapse-btn:hover {
    transform: scale(1.1);
}

.d3view-modelassembler .d3view-modelassembler-dashboard-cards-container {
    max-width: 100%;
}

.d3view-modelassembler .d3view-modelassembler-table-expand-btn i {
    font-size: 12px;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Data view panel styles **/
.d3view-modelassembler .d3view-modelassembler-data-view {
    overflow: auto;
    background: #fff;
}


.d3view-modelassembler .d3view-modelassembler-data-panel {
    border-bottom: 1px solid #ddd;
}

.d3view-modelassembler .d3view-modelassembler-data-panel:last-child {
    border-bottom: none;
}

.d3view-modelassembler .d3view-modelassembler-data-panel-header {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

.d3view-modelassembler .d3view-modelassembler-data-panel-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-data-panel-content {
    padding: 15px;
    background: #fff;
}

.d3view-modelassembler .d3view-modelassembler-data-panel-table-container {
    overflow-x: auto;
    height: 300px;
}

/** Added by shashank2104 on 01/XX/2026 - DVFIV-1858 - Home dashboard container styles **/
.d3view-modelassembler .d3view-modelassembler-home-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/** Added by shashank2104 on 12/04/2025 at 10:27 AM - DVFIV-1858 - ID label styles for different types **/
.d3view-modelassembler .designstep-id-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .systemmodel-id-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .assembly-id-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .file-id-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

/** Added by shashank2104 on 12/17/2025 - DVFIV-1871 - Comparison category pill labels (S, G, M, B, O) **/
.d3view-modelassembler .compare-cat-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
    min-width: 20px;
    text-align: center;
}

.d3view-modelassembler .compare-cat-size-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .compare-cat-shape-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .compare-cat-material-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .compare-cat-bcl-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

.d3view-modelassembler .compare-cat-others-label {
    font-variant: small-caps;
    color: #000000;
    font-weight: 300;
}

/** Comparison category inline display in matrix cells **/
.d3view-modelassembler .d3view-modelassembler-compare-matrix-category-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-compare-matrix-category-inline .label {
    font-size: 10px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
}

/** Legend header for right panel **/
.d3view-modelassembler .d3view-modelassembler-compare-detail-legend-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-compare-detail-legend-header .label {
    font-size: 10px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    margin-right: 2px;
}

.d3view-modelassembler .d3view-modelassembler-compare-detail-legend-header .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 10px;
}

/** Added by shashank2104 on 12/05/2025 at 11:07 PM - DVFIV-1859 - Generic item-row class for dashboard cards - reduces whitespace and modern look **/
/** Updated by shashank2104 on 12/06/2025 at 12:05 AM - DVFIV-1859 - Always-visible tree lines with proper indentation **/

/** Tree container **/
.d3view-modelassembler .d3view-modelassembler-dashboard-cards-container {
    position: relative;
}

/** Item row with consistent grid columns **/
/** Updated by shashank2104 on 01/06/2026 at 12:59 PM - DVFIV-1880 - Added 3rd badge column for simulations, reduced badge widths **/
.d3view-modelassembler .d3view-modelassembler-item-row {
    display: grid;
    grid-template-columns: 25% 142px 68px 68px 68px 130px 100px auto;
    align-items: center;
    gap: 8px;
    padding: 10px 5px 10px 5px;
    transition: background-color 0.15s ease;
    min-height: 44px;
    position: relative;
}

.d3view-modelassembler .d3view-modelassembler-item-row[data-only-files="true"] {
    grid-template-columns: 25% 142px 20% 68px 68px 130px 100px 68px auto;
}
.d3view-modelassembler .d3view-modelassembler-item-row:hover {
    background-color: rgba(51, 122, 183, 0.04);
}

.d3view-modelassembler .d3view-modelassembler-item-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/** Tree column - contains collapse button/node **/
.d3view-modelassembler .d3view-modelassembler-item-row-tree {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
}

/** Collapse button **/
.d3view-modelassembler .d3view-modelassembler-item-row-collapse {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
    z-index: 3;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-item-row-collapse:hover {
    background: #e4e6ea;
    border-color: #0969da;
}

.d3view-modelassembler .d3view-modelassembler-item-row-collapse i {
    font-size: 10px;
    color: #57606a;
    transition: transform 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-item-row-collapse:hover i {
    color: #0969da;
}

.d3view-modelassembler .d3view-modelassembler-item-row-collapse.expanded i {
    transform: rotate(90deg);
}

/** Tree node (circle dot for leaf nodes) **/
.d3view-modelassembler .d3view-modelassembler-tree-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 22px;
    height: 22px;
}

.d3view-modelassembler .d3view-modelassembler-tree-node::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d0d7de;
    transition: all 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-item-row:hover .d3view-modelassembler-tree-node::before {
    border-color: #0969da;
    background: #ddf4ff;
}

/** Item row icon container **/
.d3view-modelassembler .d3view-modelassembler-item-row-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/** Added by shashank2104 on 12/06/2025 at 11:45 PM - DVFIV-1859 - Design step icon styling **/
.d3view-modelassembler .d3view-modelassembler-item-row-icon.designstep-icon {
    background: linear-gradient(135deg, #5bc0de 0%, #31b0d5 100%);
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-item-row-icon.systemmodel-icon {
    background: linear-gradient(135deg, #4a90d9 0%, #2d6ca6 100%);
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-item-row-icon.assembly-icon {
    background: linear-gradient(135deg, #6bcf6b 0%, #3da33d 100%);
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-item-row-icon.file-icon {
    background: linear-gradient(135deg, #8a8a8a 0%, #5a5a5a 100%);
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-item-row-icon.version-icon {
    background: linear-gradient(135deg, #a0a0a0 0%, #707070 100%);
    color: #fff;
    width: 26px;
    height: 26px;
    font-size: 11px;
}

/** Item row name section **/
.d3view-modelassembler .d3view-modelassembler-item-row-name {
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-item-row-name a {
    font-weight: 600;
    color: #24292f;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-item-row-name a:hover {
    color: #0969da;
}

/** Item row ID tag **/
.d3view-modelassembler .d3view-modelassembler-item-row-id .label {
    font-size: 10px;
    padding: 3px 8px;
    font-weight: 500;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    border-radius: 6px;
}

/** Item row badges section - assemblies, simulations, and files **/
/** Updated by shashank2104 on 01/06/2026 at 12:59 PM - DVFIV-1880 - Made badges more compact for 3-badge layout **/
.d3view-modelassembler .d3view-modelassembler-item-row-badge .badge {
    font-size: 10px;
    padding: 3px 6px;
    font-weight: 500;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/** Item row date **/
.d3view-modelassembler .d3view-modelassembler-item-row-date {
    font-size: 12px;
    color: #57606a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-modelassembler .d3view-modelassembler-item-row-date i {
    color: #8b949e;
}

/** Item row owner **/
.d3view-modelassembler .d3view-modelassembler-item-row-owner {
    font-size: 12px;
    color: #57606a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-modelassembler .d3view-modelassembler-item-row-owner i {
    color: #8b949e;
    margin-right: 4px;
}

/** Item row actions - shown only on hover **/
.d3view-modelassembler .d3view-modelassembler-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-item-row:hover .d3view-modelassembler-item-actions {
    opacity: 1;
    visibility: visible;
}

/** Ensure nested rows only show their own actions on hover **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card:hover > .panel-heading .d3view-modelassembler-item-actions,
.d3view-modelassembler .d3view-modelassembler-dashboard-card:hover > .panel-body .d3view-modelassembler-item-actions {
    opacity: 1;
    visibility: visible;
}

.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-item-actions {
    opacity: 0;
    visibility: hidden;
}

.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-item-row:hover .d3view-modelassembler-item-actions {
    opacity: 1;
    visibility: visible;
}

.d3view-modelassembler .d3view-modelassembler-item-actions .btn {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 6px;
    border: 1px solid #d0d7de;
    background: #f6f8fa;
    color: #24292f;
    transition: all 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-item-actions .btn:hover {
    background: #f3f4f6;
    border-color: #1b1f2326;
}

.d3view-modelassembler .d3view-modelassembler-item-actions .btn i {
    margin-right: 3px;
}

/** Added by shashank2104 on 12/07/2025 at 02:30 AM - DVFIV-1859 - Actions dropdown styling **/
.d3view-modelassembler .d3view-modelassembler-item-actions .d3view-modelassembler-actions-dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.d3view-modelassembler .d3view-modelassembler-item-actions .d3view-modelassembler-actions-dropdown .dropdown-toggle {
    padding: 4px 8px;
}

.d3view-modelassembler .d3view-modelassembler-item-actions .d3view-modelassembler-actions-dropdown .dropdown-toggle i {
    margin-right: 0;
}

/** Dropdown menu styling - also target body-appended dropdowns **/
.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu,
body > .dropdown-menu.d3view-modelassembler-actions-menu {
    min-width: 160px;
    padding: 5px 0;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(27, 31, 36, 0.15);
    border: 1px solid #d0d7de;
    z-index: 1050;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    color: #24292f;
    text-decoration: none;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a:hover,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a:hover {
    background-color: #f6f8fa;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a i,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a i {
    width: 16px;
    margin-right: 8px;
    text-align: center;
    color: #57606a;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a.text-danger,
.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a.text-danger i,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a.text-danger,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a.text-danger i {
    color: #cf222e;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu li a.text-danger:hover,
body > .dropdown-menu.d3view-modelassembler-actions-menu li a.text-danger:hover {
    background-color: #ffebe9;
}

.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu .divider,
body > .dropdown-menu.d3view-modelassembler-actions-menu .divider {
    margin: 5px 0;
    border-top: 1px solid #d0d7de;
}

/** Fixed positioned dropdown styling **/
.d3view-modelassembler .d3view-modelassembler-actions-dropdown .dropdown-menu.d3view-modelassembler-dropdown-body-positioned {
    z-index: 10000;
}

/** Added by shashank2104 on 12/07/2025 at 02:30 AM - DVFIV-1859 - Parent labels for files filter view **/
.d3view-modelassembler .d3view-modelassembler-item-row-parent-labels {
    /* display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 8px; */
}

.d3view-modelassembler .d3view-modelassembler-item-row-parent-labels .label {
    font-size: 10px;
    padding: 3px 6px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-item-row-parent-labels .label i {
    margin-right: 4px;
}

/** Card styles - clean, no borders **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card.panel-default {
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card .panel-heading {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card .panel-body {
    padding: 0 !important;
    background: transparent !important;
}

/** Row separator - subtle bottom border **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card {
    border-bottom: 1px solid #eaecef !important;
}

.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-dashboard-card {
    border-bottom: 1px solid #f0f2f4 !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card:last-child {
    border-bottom: none !important;
}

/** Card type specific icon styles **/
/** Added by shashank2104 on 12/06/2025 at 11:45 PM - DVFIV-1859 - Design step card icon styling **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card-designstep .d3view-modelassembler-item-row-icon {
    box-shadow: 0 2px 4px rgba(91, 192, 222, 0.25);
}

.d3view-modelassembler-import-mme-modal button[data-operation="save"] {
    display: none !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-systemmodel .d3view-modelassembler-item-row-icon {
    box-shadow: 0 2px 4px rgba(51, 122, 183, 0.25);
}
.d3view-modelassembler .d3view-modelassembler-dashboard-card-systemmodel .d3view-modelassembler-item-row-icon.d3view-modelassembler-sm-badge {
    background: none;
    box-shadow: none;
}
.d3view-modelassembler .d3view-modelassembler-dashboard-card-assembly .d3view-modelassembler-item-row-icon {
    box-shadow: 0 2px 4px rgba(92, 184, 92, 0.25);
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-file .d3view-modelassembler-item-row-icon {
    box-shadow: 0 2px 4px rgba(119, 119, 119, 0.25);
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-version {
    background-color: transparent !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card-version .d3view-modelassembler-item-row {
    min-height: 38px;
}

/** ===========================================
   TREE LINES - ALWAYS VISIBLE BRANCH STRUCTURE
   Updated by shashank2104 on 12/06/2025 - Approach B: Grid-aligned indentation
   =========================================== **/

/** Children container - NO padding to keep grid aligned **/
.d3view-modelassembler .d3view-modelassembler-card-children {
    padding: 0 !important;
    background: transparent;
    position: relative;
}

/** Each nested card **/
.d3view-modelassembler .d3view-modelassembler-card-children > .d3view-modelassembler-dashboard-card {
    position: relative;
}

/** ============================================
   LEVEL 1 NESTING - Children of System Model
   ============================================ **/

/** Tree column indentation for Level 1 children **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree {
    padding-left: 35px;
    position: relative;
}

/** Vertical tree line for Level 1 - runs along left side of tree column **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::before {
    content: '';
    position: absolute;
    left: 20px;
    top: -50%;
    bottom: -50%;
    width: 1px;
    background: #d0d7de;
    z-index: 1;
}

/** Horizontal L-branch connecting to each child at Level 1 **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::after {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 15px;
    height: 1px;
    background: #d0d7de;
    z-index: 1;
}

/** Last child at Level 1 - cut off vertical line below (L-shape) **/
.d3view-modelassembler .d3view-modelassembler-card-children > .d3view-modelassembler-dashboard-card:last-child .d3view-modelassembler-item-row-tree::before {
    bottom: 50%;
}

/** ============================================
   LEVEL 2 NESTING - Children of Assembly (Files)
   ============================================ **/

/** Tree column indentation for Level 2 children **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree {
    padding-left: 70px;
}

/** Vertical tree line for Level 2 **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::before {
    left: 55px;
}

/** Horizontal L-branch for Level 2 **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::after {
    left: 55px;
}

/** Last child at Level 2 - L-shape **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children > .d3view-modelassembler-dashboard-card:last-child .d3view-modelassembler-item-row-tree::before {
    bottom: 50%;
}

/** ============================================
   LEVEL 3 NESTING - Children of Files (Versions)
   ============================================ **/

/** Tree column indentation for Level 3 children **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree {
    padding-left: 105px;
}

/** Vertical tree line for Level 3 **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::before {
    left: 90px;
}

/** Horizontal L-branch for Level 3 **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-item-row-tree::after {
    left: 90px;
}

/** Last child at Level 3 - L-shape **/
.d3view-modelassembler .d3view-modelassembler-card-children .d3view-modelassembler-card-children .d3view-modelassembler-card-children > .d3view-modelassembler-dashboard-card:last-child .d3view-modelassembler-item-row-tree::before {
    bottom: 50%;
}

/** ============================================
   GRAPH VIEW - Category Toggle Buttons (Legends)
   Added by shashank2104 on 12/06/2025 at 04:23 PM - DVFIV-1854
   ============================================ **/

/** Updated by shashank2104 on 12/06/2025 at 10:19 PM - DVFIV-1859 - Redesigned toggle buttons with btn-group style **/
.d3view-modelassembler .d3view-modelassembler-graph-legend-toggles-container {
    user-select: none;
}

.d3view-modelassembler .d3view-modelassembler-graph-summary {
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-graph-summary-text {
    font-size: 12px;
}


.d3view-modelassembler .d3view-modelassembler-graph-stats {
    font-size: 11px;
    color: #666;
}

.d3view-modelassembler .d3view-modelassembler-graph-stats .stat-item {
    display: inline-block;
    margin-right: 15px;
}

.d3view-modelassembler .d3view-modelassembler-graph-stats .stat-count {
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-graph-stats .stat-label {
    color: #666;
}

/** Added by shashank2104 on 12/07/2025 - DVFIV-1859 - Canvas legend styling **/
.d3view-modelassembler .d3view-modelassembler-graph-legend {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.d3view-modelassembler .d3view-modelassembler-legend-item {
    white-space: nowrap;
}

/** Added by shashank2104 on 12/07/2025 - DVFIV-1859 - Unified breadcrumb with counts and colors **/
.d3view-modelassembler .d3view-modelassembler-graph-breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 8px;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: all 0.2s ease;
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-color:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-count {
    font-weight: 600;
    font-size: 11px;
    color: #999;
    min-width: 16px;
    text-align: center;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-label {
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item:hover {
    background: rgba(51, 122, 183, 0.2);
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.active {
    /* background: #337ab7; */
    /* color: #fff; */
    background: rgba(51, 122, 183, 0.2);
    color: #555;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.active .d3view-modelassembler-breadcrumb-color {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.active .d3view-modelassembler-breadcrumb-count {
    /* color: rgba(255,255,255,0.9); */
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.included {
    background: rgba(51, 122, 183, 0.2);
    color: #555;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.included .d3view-modelassembler-breadcrumb-color {
    opacity: 1;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.included .d3view-modelassembler-breadcrumb-count {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-item.included:hover {
    background: rgba(51, 122, 183, 0.15);
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-arrow {
    color: #ccc;
    font-size: 9px;
    padding: 0 2px;
    user-select: none;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-arrow.active {
    color: #337ab7;
}

/** Added by shashank2104 on 12/10/2025 at 10:13 PM - DVFIV-1861 - View mode toggle button group styles **/
/** Updated by shashank2104 on 01/06/2026 at 01:42 PM - DVFIV-1881 - Changed to switch toggle style **/
.d3view-modelassembler .d3view-modelassembler-view-mode-toggle {
    display: inline-flex;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    margin: 0;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-weight: normal;
    line-height: 1;
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch:hover {
    background: #f0f2f4;
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.d3view-modelassembler .d3view-modelassembler-switch-slider {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    background: #ccc;
    border-radius: 18px;
    transition: background 0.3s ease;
    flex-shrink: 0;
    vertical-align: middle;
}

.d3view-modelassembler .d3view-modelassembler-switch-slider:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch input[type="checkbox"]:checked + .d3view-modelassembler-switch-slider {
    background: #5cb85c;
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch input[type="checkbox"]:checked + .d3view-modelassembler-switch-slider:before {
    transform: translateX(16px);
}

.d3view-modelassembler .d3view-modelassembler-switch-label {
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

.d3view-modelassembler .d3view-modelassembler-view-mode-toggle .d3view-modelassembler-view-mode-count {
    font-size: 10px;
    padding: 2px 6px;
    min-width: 18px;
    background: #777;
    color: #fff;
    border-radius: 10px;
    vertical-align: middle;
}

.d3view-modelassembler .d3view-modelassembler-ungrouped-switch input[type="checkbox"]:checked ~ .d3view-modelassembler-view-mode-count {
    background: #5cb85c;
}

/** Added by shashank2104 on 12/07/2025 at 01:54 AM - DVFIV-1859 - Section header styles for grouping items like Standalone Assemblies **/
.d3view-modelassembler .d3view-modelassembler-dashboard-section-header {
    padding: 12px 15px;
    margin: 15px 0 5px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f4 100%);
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-section-header:first-child {
    margin-top: 0;
}

.d3view-modelassembler .d3view-modelassembler-section-header-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.d3view-modelassembler .d3view-modelassembler-section-title {
    font-weight: 600;
    font-size: 14px;
    color: #24292f;
}

.d3view-modelassembler .d3view-modelassembler-section-subtitle {
    color: #57606a;
    font-style: italic;
}

/** Added by shashank2104 on 12/07/2025 at 01:54 AM - DVFIV-1859 - Highlight animation for newly created items **/
@keyframes d3view-modelassembler-highlight-pulse {
    0% {
        background-color: rgba(92, 184, 92, 0.4);
        box-shadow: 0 0 0 0 rgba(92, 184, 92, 0.4);
    }
    50% {
        background-color: rgba(92, 184, 92, 0.2);
        box-shadow: 0 0 15px 5px rgba(92, 184, 92, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.d3view-modelassembler-highlight-new {
    animation: d3view-modelassembler-highlight-pulse 2s ease-out;
    border-left: 3px solid #5cb85c !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.d3view-modelassembler-highlight-new .d3view-modelassembler-item-row {
    background: rgba(92, 184, 92, 0.1);
}

/** Added by shashank2104 on 12/07/2025 at 10:30 AM - DVFIV-1859 - AI search suggestion chips **/
.d3view-modelassembler .d3view-modelassembler-ai-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}

.d3view-modelassembler .d3view-modelassembler-ai-suggestion {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    font-size: 11px;
    color: #555;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-ai-suggestion:hover {
    background: #337ab7;
    border-color: #337ab7;
    color: #fff;
}

/** Added by shashank2104 on 12/08/2025 at 11:28 PM - DVFIV-XXXX - Workspace selector styles **/
.d3view-modelassembler .d3view-modelassembler-workspace-selector-container {
    display: flex;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-main-content.d3view-modelassembler-workspace-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.d3view-modelassembler .d3view-modelassembler-workspace-loading-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 100;
    font-size: 14px;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-workspace-loading-overlay i {
    color: #337ab7;
    margin-right: 8px;
}

/** Added by shashank2104 on 12/10/2025 - DVFIV-1861 - Thumbnail styles for dashboard cards and data tables **/
.d3view-modelassembler .d3view-modelassembler-item-row-thumbnail {
    flex-shrink: 0;
    margin-right: 8px;
}

.d3view-modelassembler .d3view-modelassembler-thumbnail-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.d3view-modelassembler .d3view-modelassembler-table-thumbnail {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 4px;
}

/** Added by shashank2104 on 12/10/2025 at 04:03 PM - DVFIV-1861 - jQuery UI Selectable styles for dashboard cards **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selecting {
    background: var(--dt-selection-color-light) !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected {
    background: var(--dt-selection-color) !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected > .panel-heading {
    background: var(--dt-selection-color) !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected > .panel-body {
    background: var(--dt-selection-color) !important;
}

/** Added by shashank2104 on 12/12/2025 - DVFIV-1865 - Temporary selection border for context menu **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected-temp {
    border: 2px dashed #2196f3 !important;
    background: var(--dt-selection-color-light, #e3f2fd) !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected-temp > .panel-heading {
    background: var(--dt-selection-color-light, #e3f2fd) !important;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-card.ui-selected-temp > .panel-body {
    background: var(--dt-selection-color-light, #e3f2fd) !important;
}

/** Added by shashank2104 on 12/10/2025 at 04:03 PM - DVFIV-1861 - Floating bulk actions bar styles for dashboard **/
/** Updated by shashank2104 on 01/28/2026 - DVFIV-1909 - Generic floating bar for dashboard and include structure **/
/** Updated by shashank2104 on 03/19/2026 - CS-262 - Added multiple-mode floating bar **/
.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar,
.d3view-modelassembler .d3view-modelassembler-include-structure-floating-bar,
.d3view-modelassembler .d3view-modelassembler-input-mapping-floating-bar,
.d3view-modelassembler .d3view-modelassembler-db-wf-floating-bar,
.d3view-modelassembler .d3view-modelassembler-multiple-floating-bar {
    position: absolute;
    top: 10px;
    width: calc(100% - 30px);
    z-index: 100;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 11px 15px;
    margin: 0 0 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: d3view-modelassembler-slideDown 0.2s ease-out;
}

.d3view-modelassembler .d3view-modelassembler-include-structure-floating-bar,
.d3view-modelassembler .d3view-modelassembler-input-mapping-floating-bar,
.d3view-modelassembler .d3view-modelassembler-db-wf-floating-bar,
.d3view-modelassembler .d3view-modelassembler-multiple-floating-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/** CS-262 - Multiple mode table bulk selection styles **/
.d3view-modelassembler .d3view-modelassembler-multiple-tbody tr.d3view-modelassembler-multiple-table-row {
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-multiple-tbody tr.d3view-modelassembler-multiple-table-row.ui-selected {
    background: var(--dt-selection-color-light, #e3f2fd) !important;
    outline: none;
}

.d3view-modelassembler .d3view-modelassembler-multiple-tbody tr.d3view-modelassembler-multiple-table-row.ui-selected td {
    background: transparent !important;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-row-selectable.ui-selected {
    background: var(--dt-selection-color-light, #e3f2fd) !important;
}

@keyframes d3view-modelassembler-slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .d3view-modelassembler-selection-count {
    font-size: 14px;
    font-weight: 600;
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .ribbon-outer {
    padding: 0 10px;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .ribbon-buttons .ribbon-item {
    margin: 0 2px;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .ribbon-buttons .btn {
    padding: 4px 8px;
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .d3view-modelassembler-clear-selection-btn {
    color: #999;
}

.d3view-modelassembler .d3view-modelassembler-dashboard-floating-bar .d3view-modelassembler-clear-selection-btn:hover {
    color: #d9534f;
}

/** jQuery UI selection helper rectangle **/
.d3view-modelassembler .ui-selectable-helper {
    background: rgba(51, 122, 183, 0.1);
    border: 1px dashed #337ab7;
    z-index: 1000;
}

/** Added by shashank2104 on 12/10/2025 at 05:35 PM - DVFIV-1861 - Breadcrumb styling for file viewer **/
.d3view-modelassembler .d3view-modelassembler-file-viewer-breadcrumb {
    font-size: 13px;
}

.d3view-modelassembler .d3view-modelassembler-file-viewer-breadcrumb a {
    color: #495057;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-file-viewer-breadcrumb a:hover {
    background: #e9ecef;
    color: #007bff;
    text-decoration: none;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-file {
    color: #333;
    font-weight: 500;
    padding: 4px 8px;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-separator {
    margin: 0 2px;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-version-dropdown .select2-container {
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-version-dropdown .select2-choice {
    height: 26px;
    line-height: 24px;
    padding: 0 8px;
    border-color: #ced4da;
}

.d3view-modelassembler .d3view-modelassembler-breadcrumb-version-dropdown .select2-arrow {
    width: 20px;
}

/** Added by shashank2104 on 12/11/2025 at 02:38 PM - DVFIV-1864 - Timeline filter styles **/
/** Updated by shashank2104 on 12/12/2025 - DVFIV-1864 - Simplified to use Bootstrap btn styling like Enable Relationships **/

/* Timeline Toggle Button - now uses Bootstrap btn classes, minimal override needed */
.d3view-modelassembler .d3view-modelassembler-timeline-toggle-label {
    display: inline-flex;
    align-items: center;
}

/* Timeline Slider Container */
.d3view-modelassembler .d3view-modelassembler-timeline-slider-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 18px 28px 14px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 450px;
    max-width: 600px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Timeline Close Button */
.d3view-modelassembler .d3view-modelassembler-timeline-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.d3view-modelassembler .d3view-modelassembler-timeline-close-btn:hover {
    background: #e9ecef;
    color: #dc3545;
    border-color: #dc3545;
}

.d3view-modelassembler .d3view-modelassembler-timeline-close-btn i {
    font-size: 12px;
}

/* Timeline Header */
.d3view-modelassembler .d3view-modelassembler-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.d3view-modelassembler .d3view-modelassembler-timeline-min-date,
.d3view-modelassembler .d3view-modelassembler-timeline-max-date {
    font-size: 11px;
    color: #868e96;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-title {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-title .fa {
    color: #007bff;
}

/* Timeline Slider Wrapper */
.d3view-modelassembler .d3view-modelassembler-timeline-slider-wrapper {
    padding: 0 8px;
    margin-bottom: 20px;
}

/* noUiSlider Customization */
.d3view-modelassembler .d3view-modelassembler-timeline-slider {
    height: 8px;
    background: linear-gradient(90deg, #e9ecef 0%, #dee2e6 100%);
    border-radius: 4px;
    border: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-connect {
    background: linear-gradient(90deg, #007bff 0%, #28a745 50%, #17a2b8 100%);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,123,255,0.3);
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #007bff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    cursor: grab;
    top: -8px;
    right: -11px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle:before,
.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle:after {
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle:active {
    cursor: grabbing;
    transform: scale(1.15);
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-handle:focus {
    outline: none;
}

/* Tooltips */
.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-tooltip {
    background: #343a40;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    white-space: nowrap;
}

/* Pips (scale markers) */
.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-pips {
    padding: 8px 0 0;
    height: auto;
    top: 100%;
    color: #adb5bd;
    font-size: 9px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-marker-horizontal.noUi-marker-large {
    height: 8px;
    background: #ced4da;
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-marker-horizontal.noUi-marker {
    background: #dee2e6;
    width: 1px;
    height: 5px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider .noUi-value {
    padding-top: 3px;
    font-size: 9px;
    color: #868e96;
}

/* Range Display */
.d3view-modelassembler .d3view-modelassembler-timeline-range-display {
    text-align: center;
    margin-bottom: 10px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.d3view-modelassembler .d3view-modelassembler-timeline-from-date,
.d3view-modelassembler .d3view-modelassembler-timeline-to-date {
    font-size: 13px;
    font-weight: 600;
    color: #007bff;
    letter-spacing: 0.2px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-to-label {
    font-size: 11px;
    color: #868e96;
    font-weight: 400;
}

/* Stats Display */
.d3view-modelassembler .d3view-modelassembler-timeline-stats {
    text-align: center;
    font-size: 11px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.d3view-modelassembler .d3view-modelassembler-timeline-visible-count {
    font-size: 14px;
    font-weight: 700;
    color: #28a745;
}

.d3view-modelassembler .d3view-modelassembler-timeline-total-count {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

.d3view-modelassembler .d3view-modelassembler-timeline-stats-label {
    color: #868e96;
}

.d3view-modelassembler .d3view-modelassembler-timeline-no-date-info {
    color: #adb5bd;
    font-size: 10px;
    margin-left: 4px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-no-date-count {
    color: #868e96;
}

/* Animation for slider container */
@keyframes timeline-slide-up {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.d3view-modelassembler .d3view-modelassembler-timeline-slider-container.show {
    animation: timeline-slide-up 0.3s ease-out forwards;
}

/** ============================================
   RELATIONSHIPS EXPLORER STYLES
   Added by shashank2104 on 12/11/2025 - DVFIV-1864
   ============================================ **/

/* Main container */
.d3view-modelassembler .d3view-modelassembler-relationships-explorer {
    background: #fff;
    height: 100%;
}

/* Header */
.d3view-modelassembler .d3view-modelassembler-relationships-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.d3view-modelassembler .d3view-modelassembler-relationships-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.d3view-modelassembler .d3view-modelassembler-relationships-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-relationships-title i {
    color: #007bff;
}

.d3view-modelassembler .d3view-modelassembler-relationships-mode-tabs {
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dee2e6;
}

.d3view-modelassembler .d3view-modelassembler-rel-mode-btn {
    border: none;
    border-radius: 0;
    padding: 8px 16px;
    background: transparent;
    color: #6c757d;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler .d3view-modelassembler-rel-mode-btn:not(:last-child) {
    border-right: 1px solid #dee2e6;
}

.d3view-modelassembler .d3view-modelassembler-rel-mode-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.d3view-modelassembler .d3view-modelassembler-rel-mode-btn.active {
    background: #007bff;
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-relationships-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.d3view-modelassembler .d3view-modelassembler-relationships-search {
    position: relative;
    display: flex;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-relationships-search i {
    position: absolute;
    left: 12px;
    color: #adb5bd;
}

.d3view-modelassembler .d3view-modelassembler-relationships-search-input {
    padding: 8px 12px 8px 36px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    font-size: 13px;
    width: 200px;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-relationships-search-input:focus {
    outline: none;
    border-color: #007bff;
    width: 250px;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Filter bar */
.d3view-modelassembler .d3view-modelassembler-relationships-filters {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.d3view-modelassembler .d3view-modelassembler-relationships-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-relationships-filter-group > label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    margin: 0;
}

.d3view-modelassembler .d3view-modelassembler-entity-type-checkboxes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.d3view-modelassembler .d3view-modelassembler-entity-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #495057;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 16px;
    transition: all 0.2s ease;
    margin: 0;
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-entity-checkbox:hover {
    background: #e9ecef;
}

.d3view-modelassembler .d3view-modelassembler-entity-checkbox input {
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-entity-checkbox input:checked + .d3view-modelassembler-entity-color {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
}

.d3view-modelassembler .d3view-modelassembler-entity-checkbox input:not(:checked) ~ span:last-child {
    opacity: 0.5;
}

.d3view-modelassembler .d3view-modelassembler-entity-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Content area */
.d3view-modelassembler .d3view-modelassembler-relationships-content {
    overflow: auto;
    min-height: 0;
}

/* Footer */
.d3view-modelassembler .d3view-modelassembler-relationships-footer {
    padding: 12px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid #dee2e6;
}

.d3view-modelassembler .d3view-modelassembler-relationships-summary {
    display: flex;
    align-items: center;
    gap: 24px;
}

.d3view-modelassembler .d3view-modelassembler-summary-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-summary-stat i {
    color: #adb5bd;
}

.d3view-modelassembler .d3view-modelassembler-summary-stat span:last-child {
    font-weight: 600;
    color: #495057;
}

/* ============================================
   TIMELINE VIEW STYLES
   ============================================ */

.d3view-modelassembler .d3view-modelassembler-rel-timeline {
    padding: 20px;
    overflow: auto;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-main {
    max-width: 800px;
    margin: 0 auto;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-play-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-play-btn.playing i::before {
    content: "\f04c";
}

.d3view-modelassembler .d3view-modelassembler-timeline-speed-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-speed-control label {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-events {
    position: relative;
    padding-left: 30px;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-events::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #007bff 0%, #28a745 50%, #17a2b8 100%);
    border-radius: 2px;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-date-group {
    margin-bottom: 24px;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-date-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.d3view-modelassembler .d3view-modelassembler-rel-timeline-date-header::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: #007bff;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #007bff;
}

/* Timeline event card */
.d3view-modelassembler .d3view-modelassembler-timeline-event {
    position: relative;
    margin-bottom: 12px;
    margin-left: 20px;
    margin-right: 20px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-marker {
    position: absolute;
    left: -30px;
    top: 16px;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #007bff;
    border-radius: 50%;
    z-index: 2;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-content {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 4px solid #007bff;
    border-radius: 8px;
    padding: 14px 16px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-content:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateX(4px);
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-icon {
    font-size: 16px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-title {
    font-weight: 600;
    color: #333;
    flex: 1;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-type {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    color: #fff;
    text-transform: uppercase;
}

/* Relationship visual in timeline */
.d3view-modelassembler .d3view-modelassembler-timeline-relationship-visual {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-entity {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-left-width: 3px;
    border-radius: 6px;
    font-size: 13px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-entity i {
    font-size: 14px;
}

.d3view-modelassembler .d3view-modelassembler-timeline-relationship-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-timeline-rel-label {
    font-size: 10px;
    color: #adb5bd;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event-meta i {
    margin-right: 4px;
    color: #adb5bd;
}

/* ============================================
   GRAPH VIEW STYLES
   ============================================ */

.d3view-modelassembler .d3view-modelassembler-rel-graph {
    height: 100%;
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-canvas {
    position: relative;
    background: linear-gradient(135deg, #fafbfc 0%, #f0f2f4 100%);
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-container {
    width: 100%;
    height: 100%;
}

/* Graph controls */
.d3view-modelassembler .d3view-modelassembler-rel-graph-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-controls .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-controls .btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

/* Time slider overlay */
.d3view-modelassembler .d3view-modelassembler-rel-graph-time-slider {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 400px;
    z-index: 100;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-time-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.d3view-modelassembler .d3view-modelassembler-time-slider-label {
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-time-slider-date {
    font-weight: 600;
    color: #007bff;
}

.d3view-modelassembler .d3view-modelassembler-time-slider-track {
    margin-bottom: 12px;
}

.d3view-modelassembler .d3view-modelassembler-time-slider-input {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: linear-gradient(90deg, #007bff, #28a745);
    border-radius: 3px;
    outline: none;
}

.d3view-modelassembler .d3view-modelassembler-time-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid #007bff;
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.d3view-modelassembler .d3view-modelassembler-time-slider-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* Graph legend */
.d3view-modelassembler .d3view-modelassembler-rel-graph-legend {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    z-index: 100;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-edges {
    padding-top: 8px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-edge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-line {
    width: 20px;
    height: 2px;
    border-radius: 1px;
}

/* Graph sidebar */
.d3view-modelassembler .d3view-modelassembler-rel-graph-sidebar {
    width: 320px;
    background: #fff;
    border-left: 1px solid #dee2e6;
    overflow-y: auto;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-rel-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-rel-sidebar-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-rel-sidebar-content {
    padding: 16px;
}

/* Node details in sidebar */
.d3view-modelassembler .d3view-modelassembler-rel-node-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    border-radius: 6px;
    margin-bottom: 16px;
}

.d3view-modelassembler .d3view-modelassembler-rel-node-icon {
    font-size: 24px;
}

.d3view-modelassembler .d3view-modelassembler-rel-node-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.d3view-modelassembler .d3view-modelassembler-rel-node-type {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
}

.d3view-modelassembler .d3view-modelassembler-rel-node-meta {
    margin-bottom: 16px;
}

.d3view-modelassembler .d3view-modelassembler-rel-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6c757d;
    padding: 4px 0;
}

.d3view-modelassembler .d3view-modelassembler-rel-meta-item i {
    width: 16px;
    color: #adb5bd;
}

.d3view-modelassembler .d3view-modelassembler-rel-connections-title,
.d3view-modelassembler .d3view-modelassembler-rel-history-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler .d3view-modelassembler-rel-connections-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d3view-modelassembler .d3view-modelassembler-rel-connection-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-rel-connection-item:hover {
    background: #e9ecef;
}

.d3view-modelassembler .d3view-modelassembler-rel-conn-direction {
    color: #28a745;
}

.d3view-modelassembler .d3view-modelassembler-rel-conn-direction.incoming {
    color: #007bff;
}

.d3view-modelassembler .d3view-modelassembler-rel-conn-type {
    color: #6c757d;
    font-size: 10px;
}

.d3view-modelassembler .d3view-modelassembler-rel-conn-name {
    color: #333;
    flex: 1;
}

.d3view-modelassembler .d3view-modelassembler-rel-conn-since {
    color: #adb5bd;
    font-size: 10px;
}

.d3view-modelassembler .d3view-modelassembler-rel-node-history {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.d3view-modelassembler .d3view-modelassembler-rel-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.d3view-modelassembler .d3view-modelassembler-rel-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #6c757d;
    padding: 4px 0;
}

.d3view-modelassembler .d3view-modelassembler-rel-history-date {
    color: #adb5bd;
    flex-shrink: 0;
}

/* ============================================
   MATRIX VIEW STYLES
   ============================================ */

.d3view-modelassembler .d3view-modelassembler-rel-matrix {
    padding: 20px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-view-selector,
.d3view-modelassembler .d3view-modelassembler-rel-matrix-date-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-view-selector label,
.d3view-modelassembler .d3view-modelassembler-rel-matrix-date-selector label {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    margin: 0;
}

/* Matrix table container with sticky header */
/** Updated by shashank2104 on 12/12/2025 - DVFIV-1864 - Added min-height to prevent collapsed table with long header names **/
.d3view-modelassembler .d3view-modelassembler-rel-matrix-container {
    overflow: auto;
    min-height: 250px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table-wrapper {
    min-width: 100%;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead th {
    background: #f8f9fa;
    padding: 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    text-align: center;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 11;
    text-align: left;
    min-width: 180px;
}

/** Updated by shashank2104 on 12/12/2025 - DVFIV-1864 - Fixed rotated labels with long names **/
.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead th.d3view-modelassembler-matrix-col-header {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    height: 140px;
    min-height: 140px;
    max-width: 45px;
    padding: 8px 4px;
    vertical-align: bottom;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead th.d3view-modelassembler-matrix-col-header span {
    display: block;
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 5;
    text-align: left;
    font-weight: 500;
    color: #333;
    border-right: 1px solid #eee;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table tbody tr:hover td {
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table tbody tr:hover td:first-child {
    background: #f0f2f4;
}

/* Matrix cells */
.d3view-modelassembler .d3view-modelassembler-matrix-cell {
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-matrix-cell.connected {
    background: #d4edda;
}

.d3view-modelassembler .d3view-modelassembler-matrix-cell.connected:hover {
    background: #c3e6cb;
}

.d3view-modelassembler .d3view-modelassembler-matrix-cell.removed {
    background: #f8d7da;
}

.d3view-modelassembler .d3view-modelassembler-matrix-cell .fa-check {
    color: #28a745;
}

.d3view-modelassembler .d3view-modelassembler-matrix-cell .text-muted {
    color: #ccc;
}

/* Matrix row total */
.d3view-modelassembler .d3view-modelassembler-matrix-row-total {
    font-weight: 600;
    color: #495057;
    background: #f8f9fa;
}

/* Matrix insights */
.d3view-modelassembler .d3view-modelassembler-rel-matrix-insights {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d4edda 100%);
    border-radius: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-insights-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-insights-title i {
    color: #ffc107;
}

.d3view-modelassembler .d3view-modelassembler-rel-insights-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #495057;
}

.d3view-modelassembler .d3view-modelassembler-rel-insight-item::before {
    content: '•';
    color: #28a745;
    font-weight: bold;
}

/* Matrix cell tooltip */
.d3view-modelassembler .d3view-modelassembler-matrix-tooltip {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    z-index: 1000;
    pointer-events: none;
    max-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.d3view-modelassembler .d3view-modelassembler-matrix-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
}

/** Added by shashank2104 on 12/12/2025 - DVFIV-1864 - New relationships header styles **/
.d3view-modelassembler .d3view-modelassembler-rel-header {
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-rel-summary {
    font-size: 12px;
    color: #495057;
}

.d3view-modelassembler .d3view-modelassembler-rel-count {
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 4px;
    transition: background 0.2s;
}

.d3view-modelassembler .d3view-modelassembler-rel-count:hover {
    background: #e9ecef;
}

.d3view-modelassembler .d3view-modelassembler-rel-count strong {
    margin-left: 4px;
}

/** Timeline animation active state **/
.d3view-modelassembler .d3view-modelassembler-timeline-event-active .d3view-modelassembler-timeline-event-content {
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
    border-left-color: #007bff;
}

/** Matrix responsive styles **/
.d3view-modelassembler .d3view-modelassembler-rel-matrix-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 400px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table th,
.d3view-modelassembler .d3view-modelassembler-rel-matrix-table td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    font-weight: 600;
    font-size: 11px;
    z-index: 2;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-table tbody td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    font-weight: 500;
    z-index: 1;
}

.d3view-modelassembler .d3view-modelassembler-matrix-col-header span {
    display: block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-modelassembler .d3view-modelassembler-matrix-col-header:hover span {
    white-space: normal;
    max-width: none;
}

/** Matrix insights sidebar **/
.d3view-modelassembler .d3view-modelassembler-rel-insight-item {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.4;
}

.d3view-modelassembler .d3view-modelassembler-rel-insight-item:last-child {
    border-bottom: none;
}

/** Matrix info label - prominent styling - Added by shashank2104 on 12/12/2025 - DVFIV-1864 **/
.d3view-modelassembler .d3view-modelassembler-rel-matrix-info {
    transition: all 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-info-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-rel-matrix-info-text strong {
    font-weight: 600;
}

/** Timeline legend sidebar - Added by shashank2104 on 12/12/2025 - DVFIV-1864 **/
.d3view-modelassembler .d3view-modelassembler-rel-timeline-legend {
    border-left: 1px solid #eee;
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-rel-legend-content {
    margin-top: 10px;
}

/** Graph legend bar - Added by shashank2104 on 12/12/2025 - DVFIV-1864 **/
.d3view-modelassembler .d3view-modelassembler-rel-graph-legend {
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 11px;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-legend span {
    cursor: default;
}

/** Timeline event improvements - Added by shashank2104 on 12/12/2025 - DVFIV-1864 **/
.d3view-modelassembler .d3view-modelassembler-timeline-event {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-timeline-event:hover {
    transform: translateX(4px);
}

.d3view-modelassembler .d3view-modelassembler-timeline-event:hover .d3view-modelassembler-timeline-event-content {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/** Node type colors for graph **/
.d3view-modelassembler .d3view-modelassembler-rel-graph-container svg .node circle {
    stroke-width: 2;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-container svg .node text {
    font-size: 10px;
    font-weight: 500;
    fill: #333;
}

.d3view-modelassembler .d3view-modelassembler-rel-graph-container svg .link {
    stroke-opacity: 0.6;
}

/** Responsive adjustments **/
@media (max-width: 768px) {
    .d3view-modelassembler .d3view-modelassembler-rel-header {
        flex-direction: column;
        gap: 10px;
    }

    .d3view-modelassembler .d3view-modelassembler-rel-summary {
        justify-content: center;
    }

    .d3view-modelassembler .d3view-modelassembler-rel-filters {
        justify-content: center;
    }

    .d3view-modelassembler .d3view-modelassembler-rel-matrix {
        flex-direction: column;
    }

    .d3view-modelassembler .d3view-modelassembler-rel-matrix-insights {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
    }
    
    .d3view-modelassembler .d3view-modelassembler-rel-timeline {
        flex-direction: column;
    }
    
    .d3view-modelassembler .d3view-modelassembler-rel-timeline-legend {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eee;
    }
}

/** ===========================================
   ANCESTRY POPOVER STYLES
   Added by shashank2104 on 12/16/2025 at 09:31 AM - DVFIV-1871
   Design D - Pyramid/Tier style ancestry view
   =========================================== **/

/** Ancestry Popover Container **/
.d3view-modelassembler-ancestry-popover {
    min-width: 350px;
    max-width: 500px;
    font-size: 13px;
}

/** Ancestry Header **/
.d3view-modelassembler-ancestry-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 4px 4px 0 0;
    margin: -9px -14px 10px -14px;
}

.d3view-modelassembler-ancestry-header i {
    margin-right: 8px;
    font-size: 14px;
}

.d3view-modelassembler-ancestry-header span {
    flex: 1;
    font-weight: 600;
}

.d3view-modelassembler-ancestry-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 18px;
    line-height: 1;
}

.d3view-modelassembler-ancestry-header .close:hover {
    opacity: 1;
}

/** Ancestry Content **/
.d3view-modelassembler-ancestry-content {
    padding: 5px 0;
}

/** Ancestry Level (Tier) **/
.d3view-modelassembler-ancestry-level {
    margin-bottom: 5px;
}

.d3view-modelassembler-ancestry-level-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.d3view-modelassembler-ancestry-level-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    max-height: 180px;
    overflow-y: auto;
    padding: 5px;
}

/** Ancestry Item **/
.d3view-modelassembler-ancestry-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 4px;
    min-width: 120px;
    max-width: 160px;
    flex-shrink: 0;
    text-align: center;
}

.d3view-modelassembler-ancestry-item:hover {
    background: #e9ecef;
    border-color: #dee2e6;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.d3view-modelassembler-ancestry-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 12px;
    margin-bottom: 2px;
}

.d3view-modelassembler-ancestry-item-icon.designstep-icon {
    background: #d9edf7;
    color: #5bc0de;
}

.d3view-modelassembler-ancestry-item-icon.systemmodel-icon {
    background: #dff0d8;
    color: #337ab7;
}

.d3view-modelassembler-ancestry-item-icon.assembly-icon {
    background: #dff0d8;
    color: #5cb85c;
}

.d3view-modelassembler-ancestry-item-icon.file-icon,
.d3view-modelassembler-ancestry-item-icon.version-icon {
    background: #f5f5f5;
    color: #777;
}

.d3view-modelassembler-ancestry-item-name {
    font-weight: 500;
    color: #333;
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
    text-align: center;
    max-height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.d3view-modelassembler-ancestry-item .label {
    font-size: 9px;
    flex-shrink: 0;
    margin-top: 2px;
}

/** Ancestry Connector (Arrow between levels) **/
.d3view-modelassembler-ancestry-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    color: #adb5bd;
}

.d3view-modelassembler-ancestry-connector .d3view-modelassembler-ancestry-line {
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, #dee2e6, #adb5bd);
}

.d3view-modelassembler-ancestry-connector i {
    font-size: 14px;
    margin-top: 2px;
}

/** Current Item - Highlighted **/
.d3view-modelassembler-ancestry-current-level {
    margin-top: 5px;
    position: relative;
}

.d3view-modelassembler-ancestry-current-level .d3view-modelassembler-ancestry-level-label {
    color: #667eea;
    font-weight: 600;
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid #667eea;
    color: #fff;
    cursor: default;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
    position: relative;
    min-width: 140px;
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current::before {
    content: '◀';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #667eea;
    font-size: 14px;
    animation: ancestry-pulse 1.5s ease-in-out infinite;
}

@keyframes ancestry-pulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.5; transform: translateY(-50%) translateX(-3px); }
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current:hover {
    transform: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current .d3view-modelassembler-ancestry-item-icon {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current .d3view-modelassembler-ancestry-item-name {
    color: #fff;
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-current .label {
    background: rgba(255,255,255,0.3) !important;
    color: #fff;
}

/** Hide the badge text, replaced with arrow **/
.d3view-modelassembler-ancestry-current-badge {
    display: none;
}

/** Ancestry Empty State **/
.d3view-modelassembler-ancestry-empty {
    text-align: center;
    padding: 20px;
    color: #999;
}

.d3view-modelassembler-ancestry-empty i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

/** Ancestry Footer (Summary) **/
.d3view-modelassembler-ancestry-footer {
    margin-top: 10px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 11px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler-ancestry-footer i {
    color: #5bc0de;
}

/** Bootstrap Popover Override for Ancestry **/
.popover.d3view-modelassembler-ancestry-popover-container {
    max-width: 520px;
}

.popover.d3view-modelassembler-ancestry-popover-container .popover-content {
    padding: 9px 14px;
}

/** Ancestry button rotation **/
.d3view-modelassembler .d3view-modelassembler-card-ancestry-btn .fa-sitemap {
    transform: rotate(180deg);
    display: inline-block;
}

/** Keep action buttons visible when popover/dropdown is open **/
.d3view-modelassembler .d3view-modelassembler-dashboard-card.has-popover-open .d3view-modelassembler-item-actions,
.d3view-modelassembler .d3view-modelassembler-dashboard-card.has-dropdown-open .d3view-modelassembler-item-actions {
    opacity: 1 !important;
    visibility: visible !important;
}

/** Ancestry level overflow indicator **/
.d3view-modelassembler-ancestry-level-items::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.d3view-modelassembler-ancestry-level-items::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.d3view-modelassembler-ancestry-level-items::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.d3view-modelassembler-ancestry-level-items::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/** Show more link **/
.d3view-modelassembler-ancestry-show-more {
    display: block;
    text-align: center;
    padding: 5px;
    font-size: 11px;
    color: #667eea;
    cursor: pointer;
    margin-top: 5px;
}

.d3view-modelassembler-ancestry-show-more:hover {
    text-decoration: underline;
}

/** More button item **/
.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-more {
    background: #f0f0f0;
    border: 1px dashed #ccc;
    cursor: pointer;
}

.d3view-modelassembler-ancestry-item.d3view-modelassembler-ancestry-more:hover {
    background: #e8e8e8;
    border-color: #999;
}

/** Overflow items container **/
.d3view-modelassembler-ancestry-overflow-items {
    display: none;
}

/** Added by shashank2104 on 12/16/2025 at 12:06 PM - DVFIV-1871 - Keyword comparison panel styles (LS-PrePost style) **/

.d3view-modelassembler-compare-matrix-summary-wrapper {
    position: relative;
}

.d3view-modelassembler-compare-matrix-summary-expand-hint {
    font-size: 10px;
    color: #667eea;
    margin-top: 6px;
    text-align: center;
    cursor: pointer;
}

.d3view-modelassembler-compare-matrix-summary-expand-hint:hover {
    color: #5a67d8;
    text-decoration: underline;
}

.d3view-modelassembler-compare-matrix-summary-expanded {
    display: none;
}

/** Keyword Comparison Panel - LS-PrePost Style **/
.d3view-modelassembler-kw-comparison-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
}

.d3view-modelassembler-kw-comparison-header {
    padding: 15px 20px;
    flex-shrink: 0;
}

.d3view-modelassembler-kw-comparison-files {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 13px;
}

.d3view-modelassembler-kw-file-ref,
.d3view-modelassembler-kw-file-cmp {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler-kw-file-ref .label {
    background: #28a745;
}

.d3view-modelassembler-kw-file-cmp .label {
    background: #17a2b8;
}

.d3view-modelassembler-kw-file-arrow {
    color: #667eea;
    font-size: 16px;
}

.d3view-modelassembler-kw-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    font-size: 12px;
}

.d3view-modelassembler-kw-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-modelassembler-kw-stat strong {
    font-size: 14px;
}

.d3view-modelassembler-kw-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.d3view-modelassembler-kw-legend-item {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-modelassembler-kw-legend-item.added {
    color: #28a745;
}

.d3view-modelassembler-kw-legend-item.removed {
    color: #dc3545;
}

.d3view-modelassembler-kw-legend-item.modified {
    color: #d69e2e;
}

.d3view-modelassembler-kw-changes-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
}

/** Category Sections **/
.d3view-modelassembler-kw-category {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow: hidden;
}

.d3view-modelassembler-kw-category:last-child {
    margin-bottom: 0;
}

.d3view-modelassembler-kw-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    cursor: pointer;
    transition: background 0.15s ease;
}

.d3view-modelassembler-kw-category-header:hover {
    background: #f1f3f5;
}

.d3view-modelassembler-kw-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler-kw-category-title i {
    font-size: 14px;
}

.d3view-modelassembler-kw-category-badges {
    display: flex;
    gap: 6px;
}

.d3view-modelassembler-kw-category-badges .badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.d3view-modelassembler-kw-category-badges .badge-success {
    background: #28a745;
    color: #fff;
}

.d3view-modelassembler-kw-category-badges .badge-danger {
    background: #dc3545;
    color: #fff;
}

.d3view-modelassembler-kw-category-badges .badge-warning {
    background: #d69e2e;
    color: #fff;
}

.d3view-modelassembler-kw-category-content {
    padding: 10px 15px;
    overflow: visible;
}

/** Keyword Cards **/
.d3view-modelassembler-kw-card {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
    transition: all 0.2s ease;
    overflow: hidden;
}

.d3view-modelassembler-kw-card:last-child {
    margin-bottom: 0;
}

.d3view-modelassembler-kw-card:hover {
    border-color: #cbd5e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.d3view-modelassembler-kw-card.expanded {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102,126,234,0.15);
}

.d3view-modelassembler-kw-card.added {
    border-left: 3px solid #28a745;
}

.d3view-modelassembler-kw-card.removed {
    border-left: 3px solid #dc3545;
}

.d3view-modelassembler-kw-card.modified {
    border-left: 3px solid #d69e2e;
}

.d3view-modelassembler-kw-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    background: #fafbfc;
}

.d3view-modelassembler-kw-card.expanded .d3view-modelassembler-kw-card-header {
    background: #f1f3f5;
}

.d3view-modelassembler-kw-card-keyword {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.d3view-modelassembler-kw-card-keyword code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    padding: 0;
    color: #333;
}

.d3view-modelassembler-kw-card.added .d3view-modelassembler-kw-card-keyword i {
    color: #28a745;
}

.d3view-modelassembler-kw-card.removed .d3view-modelassembler-kw-card-keyword i {
    color: #dc3545;
}

.d3view-modelassembler-kw-card.modified .d3view-modelassembler-kw-card-keyword i {
    color: #d69e2e;
}

.d3view-modelassembler-kw-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
}

.d3view-modelassembler-kw-card-lines {
    color: #666;
}

.d3view-modelassembler-kw-card-changes {
    color: #d69e2e;
    font-weight: 500;
}

.d3view-modelassembler-kw-card-type {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.d3view-modelassembler-kw-card.added .d3view-modelassembler-kw-card-type {
    background: #d4edda;
    color: #155724;
}

.d3view-modelassembler-kw-card.removed .d3view-modelassembler-kw-card-type {
    background: #f8d7da;
    color: #721c24;
}

.d3view-modelassembler-kw-card.modified .d3view-modelassembler-kw-card-type {
    background: #fff3cd;
    color: #856404;
}

.d3view-modelassembler-kw-card-body {
    border-top: 1px solid #e9ecef;
    background: #fafbfc;
    padding: 12px;
}

.d3view-modelassembler-kw-card-content {
    padding: 0;
}

.d3view-modelassembler-kw-no-data {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}

/** Side-by-side Diff View - LS-PrePost Style **/
.d3view-modelassembler-kw-diff-view {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.d3view-modelassembler-kw-diff-header {
    display: flex;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #ddd;
}

.d3view-modelassembler-kw-diff-col-header {
    flex: 1;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.d3view-modelassembler-kw-diff-col-header.ref {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe082 100%);
    color: #5d4037;
    border-right: 2px solid #ddd;
}

.d3view-modelassembler-kw-diff-col-header.cmp {
    background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%);
    color: #1b5e20;
}

.d3view-modelassembler-kw-diff-body {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.d3view-modelassembler-kw-diff-row {
    display: flex;
    border-bottom: 1px solid #eee;
    min-height: 24px;
}

.d3view-modelassembler-kw-diff-row:last-child {
    border-bottom: none;
}

.d3view-modelassembler-kw-diff-row:hover {
    background: rgba(0,0,0,0.02);
}

.d3view-modelassembler-kw-diff-line-num {
    width: 40px;
    min-width: 40px;
    padding: 3px 8px;
    text-align: right;
    color: #888;
    background: #f5f5f5;
    border-right: 1px solid #ddd;
    font-size: 10px;
    user-select: none;
}

.d3view-modelassembler-kw-diff-col {
    flex: 1;
    padding: 3px 10px;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.d3view-modelassembler-kw-diff-col.ref {
    background: #fff;
    border-right: 2px solid #ddd;
}

.d3view-modelassembler-kw-diff-col.cmp {
    background: #fff;
}

.d3view-modelassembler-kw-diff-col.empty {
    background: #f9f9f9;
}

.d3view-modelassembler-kw-diff-col .no-content {
    color: #ccc;
    font-style: italic;
}

.d3view-modelassembler-kw-diff-col code {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    padding: 0;
    color: #333;
    display: inline;
}

.d3view-modelassembler-kw-diff-row.unchanged .d3view-modelassembler-kw-diff-col {
    color: #666;
}

.d3view-modelassembler-kw-diff-row.modified .d3view-modelassembler-kw-diff-col.ref {
    background: #fff8e1;
}

.d3view-modelassembler-kw-diff-row.modified .d3view-modelassembler-kw-diff-col.cmp {
    background: #e8f5e9;
}

.d3view-modelassembler-kw-diff-row.added .d3view-modelassembler-kw-diff-col.cmp {
    background: #c8e6c9;
}

.d3view-modelassembler-kw-diff-row.removed .d3view-modelassembler-kw-diff-col.ref {
    background: #ffcdd2;
}

mark.diff-old {
    background: #ffab91;
    color: #b71c1c;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
}

mark.diff-new {
    background: #a5d6a7;
    color: #1b5e20;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
}

code.highlight-removed {
    background: #ffcdd2;
    color: #b71c1c;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
}

code.highlight-added {
    background: #c8e6c9;
    color: #1b5e20;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
}

.d3view-modelassembler-kw-diff-truncated {
    padding: 12px;
    text-align: center;
    color: #666;
    font-size: 11px;
    background: #f5f5f5;
    border-top: 1px solid #ddd;
}

.d3view-modelassembler-kw-no-changes {
    padding: 20px;
    text-align: center;
    color: #28a745;
    font-size: 13px;
    background: #f8fff8;
}

/** Single View (Added/Removed) **/
.d3view-modelassembler-kw-single-view {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.d3view-modelassembler-kw-single-header {
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.d3view-modelassembler-kw-single-view.added .d3view-modelassembler-kw-single-header {
    background: linear-gradient(135deg, #e8f5e9 0%, #a5d6a7 100%);
    color: #1b5e20;
}

.d3view-modelassembler-kw-single-view.removed .d3view-modelassembler-kw-single-header {
    background: linear-gradient(135deg, #ffebee 0%, #ef9a9a 100%);
    color: #b71c1c;
}

.d3view-modelassembler-kw-single-content {
    max-height: 300px;
    overflow-y: auto;
}

.d3view-modelassembler-kw-single-line {
    display: flex;
    border-bottom: 1px solid #eee;
}

.d3view-modelassembler-kw-single-line:last-child {
    border-bottom: none;
}

.d3view-modelassembler-kw-single-line .line-num {
    width: 40px;
    min-width: 40px;
    padding: 3px 8px;
    text-align: right;
    color: #888;
    background: #f5f5f5;
    border-right: 1px solid #ddd;
    user-select: none;
}

.d3view-modelassembler-kw-single-line code {
    flex: 1;
    padding: 3px 10px;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-modelassembler-kw-single-line code.added {
    background: #e8f5e9;
    color: #1b5e20;
}

.d3view-modelassembler-kw-single-line code.removed {
    background: #ffebee;
    color: #b71c1c;
}

/** Added by shashank2104 on 12/16/2025 at 02:29 PM - DVFIV-1871 - Timeline graph layout styles **/

/* Timeline Layout Toggle Button Group */
.d3view-modelassembler .d3view-modelassembler-graph-layout-toggle {
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-graph-layout-toggle .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.d3view-modelassembler .d3view-modelassembler-graph-layout-toggle .btn i {
    font-size: 14px;
}

/* Time Axis Container */
.d3view-modelassembler .d3view-modelassembler-graph-timeaxis-container {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-right: 2px solid #e9ecef;
    overflow-y: auto;
    overflow-x: visible;
}

.d3view-modelassembler .d3view-modelassembler-graph-timeaxis-container svg {
    overflow: visible;
}

/* Timeline layout - containers need scrolling support */
.d3view-modelassembler .d3view-modelassembler-graph-canvas-container.timeline-mode {
    overflow: visible;
}

.d3view-modelassembler .d3view-modelassembler-graph-row.timeline-mode {
    overflow: auto;
}

/* D3 Time Axis Styling */
.d3view-modelassembler .d3view-modelassembler-timeline-axis .tick line {
    stroke: #dee2e6;
    stroke-width: 1;
}

.d3view-modelassembler .d3view-modelassembler-timeline-axis .tick text {
    font-size: 10px;
    fill: #6c757d;
    font-weight: 500;
}

.d3view-modelassembler .d3view-modelassembler-timeline-axis .domain {
    stroke: #adb5bd;
    stroke-width: 2;
}

/* Right Controls Container */
.d3view-modelassembler .d3view-modelassembler-graph-right-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Timeline layout active state indicator */
.d3view-modelassembler .d3view-modelassembler-graph-layout-btn.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-graph-layout-btn.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* DVFIV-1871 - Timeline Graph Renderer Container */
.d3view-modelassembler .d3view-modelassembler-timeline-container {
    flex: 1;
    width: 100%;
    min-height: 400px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-timeline-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Timeline node hover effects */
.d3view-modelassembler .d3view-modelassembler-timeline-svg .node {
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-timeline-svg .node:hover .node-bg {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/** Added by shashank2104 on 12/16/2025 at 05:04 PM - DVFIV-1871 - Horizontal bottom timeline with D3 brush **/
.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid #dee2e6;
    z-index: 100;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline svg {
    display: block;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .timeline-x-axis path,
.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .timeline-x-axis line {
    stroke: #dee2e6;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .timeline-brush .selection {
    fill: #007bff;
    fill-opacity: 0.3;
    stroke: #007bff;
    stroke-width: 1;
    rx: 4;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .timeline-brush .handle {
    fill: #007bff;
    rx: 3;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .data-dots circle {
    transition: opacity 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-graph-bottom-timeline .data-dots circle:hover {
    opacity: 1 !important;
    r: 6;
}

/* Adjust canvas container when timeline is visible */
.d3view-modelassembler .d3view-modelassembler-graph-left-container.timeline-active .d3view-modelassembler-graph-canvas-container {
    height: calc(100% - 80px);
}

/* ==================== Import Folder Wizard Styles ==================== */
/* Added by shashank2104 on 12/17/2025 at 02:00 PM - SIM-984 */

.d3view-modelassembler-import-folder-wizard-view {
    height: 100%;
}

.d3view-modelassembler-import-folder-select-area {
    transition: all 0.3s ease;
    cursor: pointer;
}

.d3view-modelassembler-import-folder-select-area:hover {
    border-color: #007bff;
    background: #f8f9ff;
}


.d3view-modelassembler-import-folder-sim-row.selected {
    background-color: #e3f2fd;
}

.d3view-modelassembler-import-folder-files-list {
    border-top: 1px solid #eee;
}

.d3view-modelassembler-import-folder-config-table .table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.d3view-modelassembler-import-folder-summary > div {
    transition: transform 0.2s ease;
}

.d3view-modelassembler-import-folder-summary > div:hover {
    transform: translateY(-2px);
}

.d3view-modelassembler-import-folder-review-list > div:last-child {
    border-bottom: none;
}

.d3view-modelassembler-import-folder-progress .progress {
    border-radius: 4px;
    overflow: hidden;
}

.d3view-modelassembler-import-folder-progress .progress-bar {
    transition: width 0.3s ease;
}
.d3view-modelassembler-import-folder-fe-container .file_explorer {
    height: 100%!important;
    width: 100%!important;
    box-shadow: none;
    padding: 10px;
    border: none;
}
.d3view-modelassembler-import-folder-fe-container .confirm-selection,
.d3view-modelassembler-import-folder-fe-container .close_fe,
.d3view-modelassembler-import-folder-fe-container .select_all {
    display: none;
}

/** Added by shashank2104 on 12/18/2025 - DVFIV-1854 - Responsive Update Current Version button in footer **/
/* Show standalone button when there's enough space (wider screens) */
.d3view-modelassembler .d3view-modelassembler-update-btn-standalone {
    display: inline-block;
}
.d3view-modelassembler .d3view-modelassembler-update-btn-dropdown-item {
    display: none;
}

/* Hide standalone button and show dropdown item on narrower screens */
@media (max-width: 900px) {
    .d3view-modelassembler .d3view-modelassembler-update-btn-standalone {
        display: none;
    }
    .d3view-modelassembler .d3view-modelassembler-update-btn-dropdown-item {
        display: block;
    }
}

/** Added by shashank2104 on 12/18/2025 at 03:30 PM - DVFIV-1873 - Collapsible dashboard search input **/
/** Updated by shashank2104 on 12/18/2025 at 05:19 PM - DVFIV-1873 - Keep type dropdown visible, grouped/ungrouped on right **/
.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed {
    width: 40%!important;
    flex: 0 0 30% !important;
    transition: width 0.3s ease, flex 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-expanded {
    width: 100% !important;
    flex: 1 !important;
    transition: width 0.3s ease, flex 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-search-input-container {
    transition: width 0.3s ease, flex 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed .d3view-modelassembler-dashboard-search-input {
    width: 100%;
}

/* Keep type dropdown always visible, just make button smaller when collapsed */
.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed .d3view-modelassembler-search-type-btn {
    width: 32px !important;
    padding: 3px 5px;
}

.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed .d3view-modelassembler-search-type-label {
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed .d3view-modelassembler-search-type-btn .fa-caret-down {
    margin-left: 0;
}

/* Hide filter icon when expanded (show label instead) */
.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-expanded .d3view-modelassembler-search-type-icon {
    display: none;
}

/* Show filter icon when collapsed (hide label) - !important to override inline style */
.d3view-modelassembler .d3view-modelassembler-search-input-container.d3view-modelassembler-search-collapsed .d3view-modelassembler-search-type-icon {
    display: inline-block !important;
    margin-right: 0;
}

/* Ensure grouped/ungrouped toggle stays on the right */
.d3view-modelassembler .d3view-modelassembler-view-mode-toggle {
    margin-left: auto !important;
    flex-shrink: 0;
}

/** Added by shashank2104 on 12/19/2025 at 11:51 AM - DVFIV-1873 - System Model Item View Tree-First Layout Styles **/

/* Main Container */
.d3view-modelassembler .d3view-modelassembler-systemmodel-item-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

/* Header Bar */
.d3view-modelassembler .d3view-modelassembler-smi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-header-icon {
    font-size: 18px;
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-smi-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-smi-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Body - Tree + Content */
.d3view-modelassembler .d3view-modelassembler-smi-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Tree Panel */
.d3view-modelassembler .d3view-modelassembler-smi-tree-panel {
    width: 280px;
    min-width: 200px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    background: #fafbfc;
    border-right: 1px solid #e1e4e8;
    flex-shrink: 0;
}

/* Tree Search */
.d3view-modelassembler .d3view-modelassembler-smi-tree-search {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e1e4e8;
    background: #fff;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-search i {
    color: #6c757d;
    margin-right: 8px;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-search-input::placeholder {
    color: #adb5bd;
}

/* Tree Container */
.d3view-modelassembler .d3view-modelassembler-smi-tree-container {
    flex: 1;
    overflow: auto;
    padding: 8px 0;
}

/* Tree Structure */
.d3view-modelassembler .d3view-modelassembler-smi-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 20px;
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.expanded > .d3view-modelassembler-smi-tree-children {
    display: block;
}

.d3view-modelassembler .custom-editor .ce-container-2 {
    border-left: 1px solid #DDD;
}
/* Tree Node */
.d3view-modelassembler .d3view-modelassembler-smi-tree-node-content {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    margin: 1px 8px;
    transition: background-color 0.15s ease;
    user-select: none;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node-content:hover {
    background: #e9ecef;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.active > .d3view-modelassembler-smi-tree-node-content {
    background: #428bca;
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.active > .d3view-modelassembler-smi-tree-node-content .d3view-modelassembler-smi-tree-node-icon,
.d3view-modelassembler .d3view-modelassembler-smi-tree-node.active > .d3view-modelassembler-smi-tree-node-content .d3view-modelassembler-smi-tree-toggle {
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.active > .d3view-modelassembler-smi-tree-node-content .d3view-modelassembler-smi-tree-badge {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Tree Toggle */
.d3view-modelassembler .d3view-modelassembler-smi-tree-toggle {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 10px;
    margin-right: 4px;
    transition: transform 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.expanded > .d3view-modelassembler-smi-tree-node-content .d3view-modelassembler-smi-tree-toggle {
    transform: rotate(90deg);
}

/* Tree Node Icon */
.d3view-modelassembler .d3view-modelassembler-smi-tree-node-icon {
    width: 20px;
    text-align: center;
    color: #6c757d;
    margin-right: 8px;
    font-size: 14px;
}

/* Tree Node Label */
.d3view-modelassembler .d3view-modelassembler-smi-tree-node-label {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tree Badge */
.d3view-modelassembler .d3view-modelassembler-smi-tree-badge {
    background: #e9ecef;
    color: #495057;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Tree Used Badge (checkmark) */
.d3view-modelassembler .d3view-modelassembler-smi-tree-used-badge {
    color: #28a745;
    margin-left: 6px;
    font-size: 11px;
}

/* Tree Leaf Styling */
.d3view-modelassembler .d3view-modelassembler-smi-tree-leaf > .d3view-modelassembler-smi-tree-node-content {
    padding-left: 32px;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-leaf.is-used > .d3view-modelassembler-smi-tree-node-content {
    font-weight: 500;
}

/* Resize Handle */
.d3view-modelassembler .d3view-modelassembler-smi-resize-handle {
    width: 6px;
    cursor: ew-resize;
    background: #e1e4e8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-smi-resize-handle:hover {
    background: #d0d7de;
}

.d3view-modelassembler .d3view-modelassembler-smi-resize-handle:active,
.d3view-modelassembler .d3view-modelassembler-smi-resize-handle.resizing {
    background: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-smi-resize-handle-bar {
    width: 2px;
    height: 30px;
    background: #adb5bd;
    border-radius: 2px;
}

.d3view-modelassembler .d3view-modelassembler-smi-resize-handle:hover .d3view-modelassembler-smi-resize-handle-bar,
.d3view-modelassembler .d3view-modelassembler-smi-resize-handle.resizing .d3view-modelassembler-smi-resize-handle-bar {
    background: #fff;
}

/* Content Panel */
.d3view-modelassembler .d3view-modelassembler-smi-content-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

/* Content Header */
.d3view-modelassembler .d3view-modelassembler-smi-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e1e4e8;
    background: #fff;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-content-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-smi-breadcrumb-separator {
    color: #adb5bd;
}

.d3view-modelassembler .d3view-modelassembler-smi-content-actions {
    display: flex;
    gap: 8px;
}

/* Content Body */
.d3view-modelassembler .d3view-modelassembler-smi-content-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    position: relative;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-sim-item {
    display: flex;
    justify-content: space-between;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-sim-item .d3view-modelassembler-smi-reporter-sim-remove {
    opacity: 0;
    pointer-events: none;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-sim-item:hover {
    background-color: #f5f5f5;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-sim-item:hover .d3view-modelassembler-smi-reporter-sim-remove {
    opacity: 1;
    pointer-events: all;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporters-list .editable-inline + .d3view-modelassembler-smi-reporter-name-edit-btn {
    display: none;
}

/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - Materials view tab and databases cards **/
.d3view-modelassembler .d3view-modelassembler-materials-tab {
    min-height: 0;
    overflow: hidden;
}
.d3view-modelassembler .d3view-modelassembler-materials-databases-cards {
    overflow-y: auto;
}

/** DVFIV-1926 - Materials placeholder (no database configured) **/
.d3view-modelassembler .d3view-modelassembler-materials-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 24px;
}
.d3view-modelassembler .d3view-modelassembler-materials-placeholder-inner {
    text-align: center;
    max-width: 360px;
}
.d3view-modelassembler .d3view-modelassembler-materials-placeholder-icon {
    font-size: 48px;
    color: #adb5bd;
    margin-bottom: 16px;
}
.d3view-modelassembler .d3view-modelassembler-materials-placeholder-message {
    color: #6c757d;
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.5;
}
.d3view-modelassembler .d3view-modelassembler-materials-placeholder-start-btn {
    margin-top: 8px;
}

/** DVFIV-1926 - Materials schema form (create new database) **/
.d3view-modelassembler .d3view-modelassembler-materials-schema-form {
    min-height: 0;
    overflow: hidden;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-subtitle {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #6c757d;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-name-row {
    margin-bottom: 16px;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-name-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-body {
    min-height: 0;
    overflow-y: auto;
}
.d3view-modelassembler .d3view-modelassembler-materials-schema-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-materials-database-view {
    min-height: 0;
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-assembly-files-content li.ui-selected {
    background-color: var(--dt-selection-color) !important;
    border-left: 3px solid #2196f3;   
}

/** Updated by shashank2104 on 01/28/2026 - DVFIV-1909 - Use var(--dt-selection-color) for consistency **/
.d3view-modelassembler .d3view-modelassembler-smi-directfiles-overview tr.ui-selected {
    background-color: var(--dt-selection-color) !important;
    border-left: 3px solid #2196f3;
}


/* Footer Bar */
.d3view-modelassembler .d3view-modelassembler-smi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-footer-left,
.d3view-modelassembler .d3view-modelassembler-smi-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* About Content Styles */

.d3view-modelassembler .d3view-modelassembler-smi-about-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1e4e8;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-title i {
    color: #337ab7;
}

/* Title row wrapper for About tabs - swatch alongside title */
.d3view-modelassembler .d3view-modelassembler-smi-about-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-modelassembler .d3view-modelassembler-smi-about-title-row .d3view-modelassembler-smi-about-title {
    flex: 1;
    min-width: 0;
}

/* Node Color Swatch - inline in meta row */
.d3view-modelassembler .d3view-modelassembler-node-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: var(--d3v-t-fast, 0.12s);
}
.d3view-modelassembler .d3view-modelassembler-node-color-swatch:hover .d3view-modelassembler-node-color-rect {
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(0,0,0,0.05));
    transform: scale(1.1);
}
.d3view-modelassembler .d3view-modelassembler-node-color-rect {
    width: 16px;
    height: 16px;
    border-radius: var(--d3v-r-sm, 4px);
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
    transition: var(--d3v-t-fast, 0.12s);
}
/* DesignStep sidebar color swatch */
.d3view-modelassembler .d3view-modelassembler-designstep-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.d3view-modelassembler .d3view-modelassembler-designstep-color-row .d3view-modelassembler-node-color-swatch {
    margin-left: 0;
    padding: 3px 8px;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-desc {
    color: #666;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}

/* Stats Cards */
.d3view-modelassembler .d3view-modelassembler-smi-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.d3view-modelassembler .d3view-modelassembler-smi-stat-card {
    background: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-smi-stat-card:hover {
    border-color: #337ab7;
    box-shadow: 0 2px 8px rgba(51, 122, 183, 0.15);
    transform: translateY(-2px);
}

.d3view-modelassembler .d3view-modelassembler-smi-stat-icon {
    font-size: 24px;
    color: #337ab7;
    margin-bottom: 8px;
}

.d3view-modelassembler .d3view-modelassembler-smi-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.d3view-modelassembler .d3view-modelassembler-smi-stat-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* About Panels */
.d3view-modelassembler .d3view-modelassembler-smi-about-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-panel {
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-panel-header i {
    margin-right: 8px;
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-panel-body {
    padding: 16px;
    max-height: 250px;
    overflow: auto;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-list li:last-child {
    border-bottom: none;
}

.d3view-modelassembler .d3view-modelassembler-smi-about-list li i {
    color: #337ab7;
}

/* File Content View */
.d3view-modelassembler .d3view-modelassembler-smi-file-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler .d3view-modelassembler-smi-file-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-smi-file-view-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-smi-file-view-title i {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-smi-file-view-body {
    flex: 1;
    overflow: hidden;
}

/* Search Highlight */
.d3view-modelassembler .d3view-modelassembler-smi-tree-node.search-match > .d3view-modelassembler-smi-tree-node-content {
    background: #fff3cd;
}

.d3view-modelassembler .d3view-modelassembler-smi-tree-node.search-hidden {
    display: none;
}

/* Placeholder Content */
.d3view-modelassembler .d3view-modelassembler-smi-content-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    text-align: center;
}

.d3view-modelassembler .d3view-modelassembler-smi-content-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.d3view-modelassembler .d3view-modelassembler-smi-content-placeholder p {
    font-size: 16px;
    margin: 0;
}

/** Added by shashank2104 on 12/19/2025 at 02:38 PM - DVFIV-1873 - Compare Simlytiks View Styles **/
/** Updated by shashank2104 on 12/19/2025 at 04:45 PM - DVFIV-1873 - Added full width styles **/
.d3view-modelassembler-compare-simlytiks-view {
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

.d3view-modelassembler-compare-simlytiks-modal .modal-dialog {
    width: 95%;
    max-width: 1800px;
    height: 90vh;
}

.d3view-modelassembler-compare-simlytiks-modal .modal-content {
    height: 100%;
}

.d3view-modelassembler-compare-simlytiks-modal .modal-body {
    padding: 0;
    height: calc(100% - 60px);
    overflow: hidden;
}

.d3view-modelassembler-compare-simlytiks-toolbar {
    background: #f8f9fa;
    flex-shrink: 0;
}

.d3view-modelassembler-compare-simlytiks-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100% !important;
}

.d3view-modelassembler-compare-simlytiks-loading,
.d3view-modelassembler-compare-simlytiks-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.d3view-modelassembler-compare-simlytiks-tab-view {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

/** Quick Compare View Styles **/
.d3view-modelassembler-compare-quick-view {
    width: 100% !important;
    background: #fff;
}

/** Simlytiks Only View Styles **/
.d3view-modelassembler-compare-simlytiks-only-view {
    width: 100% !important;
    background: #fff;
}

/** Added by shashank2104 on 12/19/2025 at 03:45 PM - DVFIV-1873 - Inline Panel + Combined View Styles **/

/* Combined View Layout */
.d3view-modelassembler-compare-combined-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Toolbar Gradient Header */
.d3view-modelassembler-compare-toolbar {
    flex-shrink: 0;
}

.d3view-modelassembler-compare-toolbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Summary Panel */
.d3view-modelassembler-compare-summary-panel {
    flex-shrink: 0;
    max-height: 45%;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.d3view-modelassembler-compare-summary-panel.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

/* Entity Cards Grid */
.d3view-compare-entity-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

/* Entity Card Styling */
.d3view-compare-entity-card {
    transition: all 0.2s ease;
}

.d3view-compare-entity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.d3view-compare-entity-card[data-entity-id]:first-child {
    border-width: 2px !important;
}

/* Category Pills */
.d3view-compare-category-pill {
    transition: all 0.2s ease;
    font-weight: 500;
}

.d3view-compare-category-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Change Categories Container */
.d3view-compare-change-categories {
    flex-wrap: wrap;
}

/* Delta Indicators */
.d3view-compare-entity-card .fa-arrow-up,
.d3view-compare-entity-card .fa-arrow-down,
.d3view-compare-entity-card .fa-check {
    font-size: 10px;
}

/* Simlytiks Container */
.d3view-modelassembler-compare-simlytiks-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    transition: flex 0.3s ease;
}

.d3view-modelassembler-compare-simlytiks-container.collapsed {
    flex: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
}

/* Badge Styles */
.d3view-modelassembler-compare-combined-view .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .d3view-compare-entity-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .d3view-compare-entity-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .d3view-modelassembler-compare-toolbar {
        flex-direction: column !important;
        gap: 10px;
    }
    
    .d3view-modelassembler-compare-toolbar > div {
        width: 100%;
        justify-content: center !important;
    }
}

/** Added by shashank2104 on 12/20/2025 at 12:13 AM - DVFIV-1873 - Item View Wrapper consistent header styles **/

/* Wrapper Container */
.d3view-modelassembler-item-view-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

/* Header Bar */
/* Updated by shashank2104 on 01/05/2026 at 03:22 PM - DVFIV-1880 - Removed display:none to show header for simulation tabs */
.d3view-modelassembler-ivw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #f8f9fa, #f0f1f2);
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    min-height: 44px;
}

.d3view-modelassembler-ivw-header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.d3view-modelassembler-ivw-header-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    margin-left: 15px;
}

/* Step Indicator - Added by shashank2104 on 01/05/2026 at 05:58 PM - DVFIV-1880 */
.d3view-modelassembler-ivw-step-indicator {
    padding: 4px 12px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 10px;
}

.d3view-modelassembler-ivw-step-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Hide FlowModal stepper when wrapped in ItemViewWrapper - Added by shashank2104 on 01/05/2026 at 05:58 PM - DVFIV-1880 */
.d3view-modelassembler-item-view-wrapper .gi-stepper-nav {
    display: none !important;
}

/* Breadcrumbs */
.d3view-modelassembler-ivw-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 0;
}

.d3view-modelassembler-ivw-breadcrumbs-dynamic {
    display: flex;
    align-items: center;
}

.d3view-modelassembler-ivw-breadcrumb-separator {
    color: #999;
    font-size: 10px;
    margin: 0 8px;
}

.d3view-modelassembler-ivw-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.d3view-modelassembler-ivw-breadcrumb-item i {
    font-size: 12px;
}

.d3view-modelassembler-ivw-breadcrumb-home {
    color: #666;
}

.d3view-modelassembler-ivw-breadcrumb-home:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
    text-decoration: none;
}

.d3view-modelassembler-ivw-breadcrumb-link {
    color: #337ab7;
}

.d3view-modelassembler-ivw-breadcrumb-link:hover {
    background: rgba(51, 122, 183, 0.1);
    color: #23527c;
    text-decoration: none;
}

.d3view-modelassembler-ivw-breadcrumb-current {
    background: #e8f4fc;
    color: #337ab7;
    font-weight: 500;
    cursor: default;
}

/* Breadcrumb type-specific colors */
.d3view-modelassembler-ivw-breadcrumb-item[data-type="systemmodel"] i {
    color: #337ab7;
}

.d3view-modelassembler-ivw-breadcrumb-item[data-type="assembly"] i {
    color: #5cb85c;
}

.d3view-modelassembler-ivw-breadcrumb-item[data-type="file"] i {
    color: #f0ad4e;
}

.d3view-modelassembler-ivw-breadcrumb-item[data-type="designstep"] i {
    color: #5bc0de;
}

/* Actions */
.d3view-modelassembler-ivw-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.d3view-modelassembler-ivw-actions .btn {
    padding: 5px 10px;
}

.d3view-modelassembler-ivw-actions .btn-group {
    margin-left: 3px;
}

/* Body */
.d3view-modelassembler-ivw-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.d3view-modelassembler-ivw-body .d3view-modelassembler-doe-flowmodal-container > .generic-input-template > .gi-main-container .gi-body > .tab-content {
    padding: 0;
}
.d3view-modelassembler-ivw-body > div {
    flex: 1;
    min-height: 0;
}
.d3view-modelassembler .d3view-modelassembler-assembly-item-view .d3view-modelassembler-assembly-content-body .d3view-modelassembler-close-viewer-btn,
.d3view-modelassembler .d3view-modelassembler-assembly-item-view .d3view-modelassembler-assembly-content-body .d3view-modelassembler-done-btn {
    display: none;
}

/** ============================================================================
 *  SIMULATIONS SIDEBAR - Added by shashank2104 on 01/06/2026 at 12:15 AM - DVFIV-1880
 *  Updated by shashank2104 on 01/06/2026 at 12:25 AM - DVFIV-1880 - Cleaner UI, resizable
 *  Split view sidebar showing all simulations grouped by System Model
 *  ============================================================================ */

/* Sidebar Container - 40% default, max 70% */
/* Updated by shashank2104 on 01/06/2026 at 12:45 AM - DVFIV-1880 - 60-40 split, resizable up to 30-70 */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-container {
    width: 40%;
    min-width: 25%;
    max-width: 70%;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    position: relative;
}

/* Resize Handle */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e0e0e0;
    cursor: ew-resize;
    z-index: 10;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-resize-handle:hover,
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-resize-handle.resizing {
    background: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    margin-left: 4px;
}

/* Sidebar Header */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-title {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    display: flex;
    align-items: center;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-title i {
    margin-right: 6px;
    color: #6c757d;
    font-size: 11px;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-actions .btn {
    color: #6c757d;
    padding: 3px 6px;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-highlight-btn:hover {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-highlight-btn.active {
    color: #337ab7;
    background: rgba(51, 122, 183, 0.1);
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-close-btn:hover {
    color: #d9534f;
}

/* Sidebar Body */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    background: #fff;
}

/* Sidebar Table - 3 Column Layout */
/* Updated by shashank2104 on 01/06/2026 at 12:32 AM - DVFIV-1880 - Simple table layout */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table {
    margin: 0;
    font-size: 12px;
    table-layout: fixed;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table thead th {
    background: #f8f9fa;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
    padding: 8px 10px;
    border-bottom: 1px solid #e9ecef;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table thead th:first-child {
    width: 45%;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table thead th:nth-child(2) {
    width: 35%;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table thead th:nth-child(3) {
    width: 20%;
    text-align: center;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-row:hover {
    background: #f8f9fa;
}

/* Name Cell */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-name-cell {
    max-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-name-cell a {
    display: block;
    color: #337ab7;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-name-cell a:hover {
    color: #23527c;
    text-decoration: underline;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-id-text {
    font-size: 10px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SM Cell */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-sm-cell {
    font-size: 11px;
    color: #666;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-sm-cell i {
    margin-right: 5px;
    color: #999;
    font-size: 10px;
}

/* SM Header for hover highlight */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-sm-header {
    cursor: default;
}

/* When highlight mode is enabled */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar.highlight-enabled .d3view-modelassembler-simulations-sidebar-sm-header {
    cursor: pointer;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar.highlight-enabled .d3view-modelassembler-simulations-sidebar-sm-header:hover {
    background: #e8f4fc;
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar.highlight-enabled .d3view-modelassembler-simulations-sidebar-sm-header:hover i {
    color: #337ab7;
}

/* Status Cell */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-status-cell {
    text-align: center;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-table .sim-status-cell .label {
    font-size: 9px;
    padding: 2px 6px;
    text-transform: capitalize;
}

/* Simulation Item Link (for click handler) */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-item {
    cursor: pointer;
}

/* Sidebar Footer */
.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-footer {
    padding: 8px 12px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 11px;
    color: #6c757d;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-simulations-sidebar-footer span:first-child {
    font-weight: 600;
    color: #495057;
}

/* Card Highlight for Cross-Panel Hover */
.d3view-modelassembler .d3view-modelassembler-card-highlighted {
    box-shadow: 0 0 0 3px #337ab7 !important;
    border-color: #337ab7 !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.d3view-modelassembler .d3view-modelassembler-card-highlighted > .panel-heading {
    background: rgba(51, 122, 183, 0.1) !important;
}

/** Added by shashank2104 on 01/06/2026 at 11:45 AM - External filters overrides for cleaner UI **/
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filters[data-mode="ai"] {
    width: 60%;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filters {
    height: auto;
    min-height: unset !important;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters-container .d3view-filters {
    height: 40px;
    min-height: unset!important;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters-container .d3view-filters .advanced-filters {
    height: 40px!important;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters input[data-search-input] {
    height: 40px;
    /** Updated by shashank2104 on 05/05/2026 - DVFIV-2028 - Padding-left set dynamically by DashboardTableView._updateSearchInputPadding() based on premium-dropdown trigger width; this is the fallback when JS hasn't run **/
    padding-left: 160px;
}
.d3view-modelassembler .d3view-modelassembler-filtered-tab .d3view-modelassembler-ext-filters input[data-search-input] {
    padding-left: 30px;
}
.d3view-modelassembler .d3view-modelassembler-filtered-tab .d3view-modelassembler-ext-filters .d3view-filter-button {
    position: relative;
}
.d3view-modelassembler .d3view-modelassembler-filtered-tab .d3view-modelassembler-ext-filters .d3view-filter-button:before {
    content: '\f002';
    color: grey;
    font-family: FontAwesome;
    position: absolute;
    top: 9px;
    left: 11px;
    z-index: 10;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button {
    margin: 0;
    height: auto;
    width: auto;
    padding: 0;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button .flex-l {
    display: none;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button button.toggle-fc {
    height: 30px;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button span.clear-search {
    position: absolute;
    right: 46px;
    top: 10px;
    z-index: 10;
    cursor: pointer;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button span.clear-search:hover {
    color: red;
}
.d3view-modelassembler .d3view-modelassembler-ext-filters .d3view-filter-button .toggle-fc.btn-primary > i {
    color: #FFF;
}

/** Pagination styles **/
.d3view-modelassembler .d3view-modelassembler-pagination .paginationArea {
    margin: 0;
}

.d3view-modelassembler .d3view-modelassembler-pagination .paginationInputContainer {
    margin: 0;
}

.d3view-modelassembler .d3view-modelassembler-pagination .pagenav {
    padding: 4px 8px;
}

.d3view-modelassembler .d3view-modelassembler-pagination .target-page-num {
    width: 50px !important;
    height: 28px !important;
    padding: 2px 4px;
    text-align: center;
}

.d3view-modelassembler .d3view-modelassembler-pagination .maxPageIndicator,
.d3view-modelassembler .d3view-modelassembler-pagination .totalRecordsIndicator {
    padding: 4px 8px !important;
    font-size: 12px;
    background: #f8f9fa;
}

/** =========================================== **/
/** Badge Sidebar Styles - Added by shashank2104 on 01/06/2026 at 04:19 PM - DVFIV-1881 **/
/** =========================================== **/

/* Badge Sidebar Container - Floating from right */
/** Updated by shashank2104 on 01/06/2026 at 05:30 PM - DVFIV-1881 - Fixed height to be relative to parent **/
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 800px;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-container.d3view-modelassembler-badge-sidebar-visible {
    transform: translateX(0);
}

/* Overlay - Hidden for now */
/** Updated by shashank2104 on 01/06/2026 at 06:30 PM - DVFIV-1881 - Removed backdrop overlay per user request **/
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-overlay {
    display: none;
}

/* Resize Handle */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-resize-handle:hover,
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-resize-handle.resizing {
    background: #337ab7;
}

/* Main Sidebar */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Sidebar Header */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* Breadcrumbs */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #495057;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #337ab7;
    text-decoration: none;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-item.d3view-modelassembler-badge-sidebar-current {
    font-weight: 600;
    color: #333;
    cursor: default;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-item.d3view-modelassembler-badge-sidebar-current:hover {
    background: transparent;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-item i {
    font-size: 12px;
    opacity: 0.7;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-breadcrumb-separator {
    color: #adb5bd;
    font-size: 11px;
}

/* Sidebar Actions */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-actions .btn {
    padding: 4px 8px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-actions .btn:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

/* Sidebar Body */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Split Layout */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split {
    display: flex;
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-left {
    width: 280px;
    min-width: 200px;
    max-width: 350px;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-left-header {
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-left-count {
    color: #6c757d;
    font-weight: 400;
    margin-left: 5px;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-left-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* List Items */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    border: 1px solid transparent;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item:hover {
    background: #f0f4f8;
    border-color: #e0e4e8;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item.active {
    background: #e3f2fd;
    border-color: #2196f3;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #e9ecef;
    color: #6c757d;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item.active .d3view-modelassembler-badge-sidebar-list-item-icon {
    background: #2196f3;
    color: #fff;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item-content {
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item-name {
    font-weight: 500;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item-meta {
    font-size: 11px;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-list-item-meta i {
    margin-right: 3px;
}

/* Split Right Panel */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-right {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-split-right-content {
    height: 100%;
    overflow: auto;
}

/* Files Container */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-files {
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-files-container {
    height: 100%;
}

/* Simulations Container */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-simulations {
    height: 100%;
}

.d3view-modelassembler .d3view-modelassembler-badge-sidebar-simulations-container {
    height: 100%;
    overflow: auto;
}

/* Empty State */
.d3view-modelassembler .d3view-modelassembler-badge-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
}

.d3view-modelassembler div.workflow .enableFMView .fm-view {
    top: 75px;
    height: calc(100% - 75px);
}

/** Added by shashank2104 on 01/08/2026 at 12:16 AM - DVFIV-1882 - DOE overlay styling **/
.d3view-modelassembler-doe-overlay {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.d3view-modelassembler-doe-overlay-header {
    flex-shrink: 0;
}

.d3view-modelassembler-doe-overlay-body {
    flex: 1;
    min-height: 0;
}

/** Added by shashank2104 on 01/08/2026 at 03:02 PM - DVFIV-1883 - DOE Handsontable Styling **/
/** Updated by shashank2104 on 01/08/2026 at 03:02 PM - DVFIV-1883 - Simplified styling, removed fancy effects **/

/* Row Type Coloring - Constant (White/Default) */
.d3view-modelassembler-doe-handsontable .d3view-ma-doe-row-constant td {
    background-color: lightgray !important;
}

/* Row Type Coloring - Continuous (Light Blue) */
.d3view-modelassembler-doe-handsontable .d3view-ma-doe-row-continuous td {
    background-color: lightblue !important;
}

/* Row Type Coloring - Discrete (Light Green) */
.d3view-modelassembler-doe-handsontable .d3view-ma-doe-row-discrete td {
    background-color: lightgreen !important;
}

/* Selection Checkbox Column - Updated by shashank2104 on 01/13/2026 - DVFIV-1889 - Fixed checkbox alignment */
.d3view-modelassembler-doe-handsontable .d3view-ma-doe-col-select {
    text-align: center !important;
    vertical-align: middle !important;
    width: 45px !important;
}

.d3view-modelassembler-doe-handsontable tr input[type="checkbox"] {
    margin: 0 auto !important;
    display: block !important;
    vertical-align: middle !important;
}

/** Added by shashank2104 on 01/12/2026 at 11:25 AM - DVFIV-1886 - Fix dropdown visibility for last rows in DOE parameters table **/
.d3view-modelassembler-doe-handsontable {
    overflow: visible !important;
}

.d3view-modelassembler-doe-handsontable .wtHolder {
    overflow: visible !important;
}

/* Ensure dropdown editor is rendered above other elements */
.d3view-modelassembler-doe-handsontable .htDropdownMenu,
.d3view-modelassembler-doe-handsontable .htAutocompleteList,
.d3view-modelassembler-doe-handsontable .listbox {
    z-index: 9999 !important;
}

/* Make the handsontable container allow dropdown overflow */
.d3view-modelassembler-doe-step1-container {
    overflow: visible !important;
}

.d3view-modelassembler-doe-step1-container .d3view-modelassembler-doe-handsontable-container {
    overflow: auto;
    position: relative;
}

/** Added by shashank2104 on 01/09/2026 at 10:26 AM - DVFIV-1885 - INCLUDE_STRUCTURE tab sortable styles **/

/* Include Structure Container */
/** Added by shashank2104 on 01/28/2026 - DVFIV-1909 - position relative for floating bar **/
.d3view-modelassembler-smi-include-structure {
    background: #fff;
    position: relative;
}

/* Section Headers */
.d3view-modelassembler-smi-include-section {
    margin-bottom: 20px;
}

.d3view-modelassembler-smi-include-section-header h5 {
    font-size: 14px;
}

/* Include Table Styling */
.d3view-modelassembler-smi-include-table {
    background: #fff;
}

.d3view-modelassembler-smi-include-table tbody tr {
    transition: background-color 0.15s ease;
}

.d3view-modelassembler-smi-include-table tbody tr:hover {
    background-color: #f5f5f5;
}

/** Added by shashank2104 on 01/28/2026 - DVFIV-1909 - Selected file row (jQuery selectable ui-selected) **/
/** Updated by shashank2104 on 01/28/2026 - DVFIV-1909 - Use var(--dt-selection-color) for consistency **/
.d3view-modelassembler-smi-include-structure .d3view-modelassembler-smi-sortable-row.ui-selected {
    background-color: var(--dt-selection-color) !important;
    border-left: 3px solid #2196f3;
}

/** Added by shashank2104 on 02/20/2026 - DVFIV-1926 - Saved workflows table: title and selectable row **/
.d3view-modelassembler-database-workflows-title {
    margin-top: 0;
    margin-bottom: 12px;
}

.d3view-modelassembler-database-workflows-table-wrap {
    position: relative;
}

.d3view-modelassembler-database-workflows-table .d3view-modelassembler-db-wf-row.ui-selected {
    background-color: var(--dt-selection-color, #e3f2fd) !important;
    border-left: 3px solid #2196f3;
}

/* Drag Handle */
.d3view-modelassembler-smi-drag-handle {
    cursor: move;
    color: #999;
    transition: color 0.15s ease;
}

.d3view-modelassembler-smi-drag-handle:hover {
    color: #333;
}

/* Sortable Row Active State */
.d3view-modelassembler-smi-sortable-row.ui-sortable-helper {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #007bff;
}

/* Sortable Placeholder */
.d3view-modelassembler-smi-sortable-placeholder {
    background: #e3f2fd !important;
    border: 2px dashed #007bff !important;
    height: 45px;
}

/* For table rows */
tr.d3view-modelassembler-smi-sortable-placeholder {
    display: table-row;
}

tr.d3view-modelassembler-smi-sortable-placeholder td {
    background: transparent;
    border: none;
}

/* Assembly Group */
.d3view-modelassembler-smi-assembly-group {
    transition: box-shadow 0.15s ease;
}

.d3view-modelassembler-smi-assembly-group:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.d3view-modelassembler-smi-assembly-group.ui-sortable-helper {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-color: #28a745;
}

/* Assembly Group Header (Drag Handle Area) */
.d3view-modelassembler-smi-assembly-drag-handle {
    cursor: move;
}

.d3view-modelassembler-smi-assembly-drag-handle:hover {
    background: #e9ecef !important;
}

/* Assembly Group Body */
.d3view-modelassembler-smi-assembly-group-body {
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Assembly Toggle Button */
.d3view-modelassembler-smi-assembly-toggle {
    transition: transform 0.2s ease;
}

/* Group Placeholder for assemblies */
.d3view-modelassembler-smi-sortable-assemblies .d3view-modelassembler-smi-sortable-placeholder {
    height: 60px;
    margin-bottom: 15px;
    border-radius: 4px;
    background: #d4edda !important;
    border: 2px dashed #28a745 !important;
}

/** Added by shashank2104 on 01/13/2026 at 10:11 PM - DVFIV-1889 - Files table sortable styles **/
/* Files Table Sortable Styles */
.d3view-modelassembler-file-drag-handle {
    cursor: move;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.d3view-modelassembler-file-drag-handle:hover {
    opacity: 1;
    color: #007bff !important;
}

.d3view-modelassembler-file-row.ui-sortable-helper {
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #007bff;
    z-index: 1000;
}

.d3view-modelassembler-files-sortable-placeholder {
    background: #e3f2fd !important;
    border: 2px dashed #007bff !important;
    height: 60px;
    margin-bottom: 2px;
    border-radius: 4px;
    list-style: none;
}

.d3view-modelassembler-file-row.ui-sortable-helper .d3view-modelassembler-file-drag-handle {
    opacity: 1;
    color: #007bff !important;
}

/* Action Buttons in Table */
.d3view-modelassembler-smi-include-table .btn-xs {
    padding: 2px 6px;
    margin: 0 2px;
}

/* Delete Button Styling - Fixed by shashank2104 on 01/09/2026 at 10:26 AM - DVFIV-1885 */
.d3view-modelassembler-smi-include-delete-btn {
    color: #d9534f;
}

.d3view-modelassembler-smi-include-delete-btn:hover {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .d3view-modelassembler-smi-include-structure-body {
        padding: 10px;
    }
    
    .d3view-modelassembler-smi-assembly-group-header {
        flex-wrap: wrap;
    }
}

/** ============================================================================
 *  SAVED LOADCASE CARD STYLES - Added by shashank2104 on 01/12/2026 at 05:02 PM - DVFIV-1887
 *  Expandable card for saved loadcases with LC_FOLDER and LC_FILES children
 *  ============================================================================ */

.d3view-modelassembler .d3view-ma-loadcase-card {
    margin: 5px 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.d3view-modelassembler .d3view-ma-lc-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fa;
    cursor: move;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-ma-lc-main:hover {
    background: #e9ecef;
}

.d3view-modelassembler .d3view-ma-lc-main-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.d3view-modelassembler .d3view-ma-lc-icon {
    color: #6f42c1;
    margin-right: 10px;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-ma-lc-label {
    font-weight: 500;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler .d3view-ma-lc-main-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-ma-lc-folder-icon {
    color: #28a745;
    font-size: 11px;
}

.d3view-modelassembler .d3view-ma-lc-file-count {
    color: #17a2b8;
    font-size: 11px;
}

.d3view-modelassembler .d3view-ma-lc-expand-toggle {
    color: #999;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s ease, color 0.15s ease;
}

.d3view-modelassembler .d3view-ma-lc-expand-toggle:hover {
    color: #666;
}

.d3view-modelassembler .d3view-ma-lc-expand-toggle.fa-chevron-up {
    transform: rotate(180deg);
}

.d3view-modelassembler .d3view-ma-lc-children {
    display: none;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid #eee;
}

.d3view-modelassembler .d3view-ma-lc-child {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 3px;
    cursor: move;
    font-size: 11px;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-ma-lc-child:hover {
    background: #f5f5f5;
}

.d3view-modelassembler .d3view-ma-lc-child-folder-icon {
    color: #28a745;
    margin-right: 8px;
}

.d3view-modelassembler .d3view-ma-lc-child-files-icon {
    color: #007bff;
    margin-right: 8px;
}

.d3view-modelassembler .d3view-ma-lc-child-path,
.d3view-modelassembler .d3view-ma-lc-child-count {
    margin-left: auto;
    color: #999;
    font-size: 10px;
}

.d3view-modelassembler .d3view-ma-lc-child[data-id*="LC_FOLDER"] {
    border: 1px dashed #d4edda;
    background: #f8fff9;
}

.d3view-modelassembler .d3view-ma-lc-child[data-id*="LC_FILES"] {
    border: 1px dashed #cce5ff;
    background: #f0f7ff;
}

/** Added by shashank2104 on 01/13/2026 - DVFIV-1889 - Resizer handle for DOE experiments sidebar **/
.d3view-ma-sampling-resizer {
    background: #e0e0e0;
    transition: background 0.2s;
}

.d3view-ma-sampling-resizer:hover {
    background: #337ab7;
}

.d3view-ma-sampling-resizer.d3view-ma-resizing {
    background: #337ab7;
}

/** Added by shashank2104 on 01/13/2026 at 03:52 PM - DVFIV-1888 - Operation cards for DEFINE_TRANSFORMATION **/
.d3view-modelassembler-operation-card {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.d3view-modelassembler-operation-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.d3view-modelassembler-operation-header {
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px 4px 0 0;
}

.d3view-modelassembler-operation-title {
    font-weight: 600;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.d3view-modelassembler-operation-actions {
    display: flex;
    gap: 4px;
}

.d3view-modelassembler-operation-actions .btn {
    padding: 2px 6px;
}

.d3view-modelassembler-operation-body {
    padding: 12px;
}

.d3view-modelassembler-param-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin: 10px 0 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px dotted #ddd;
}

.d3view-modelassembler-param-group-label:first-child {
    margin-top: 0;
}

.d3view-modelassembler-param-row {
    margin-bottom: 5px;
}

.d3view-modelassembler-no-operations {
    text-align: center;
    padding: 30px 20px;
    color: #999;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    border-radius: 4px;
}

.d3view-modelassembler-preview-content {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    margin: 10px 0 0 0;
    white-space: pre;
    overflow-x: auto;
    max-height: 250px;
}

.d3view-modelassembler-transform-config-form .form-group {
    margin-bottom: 10px;
}

.d3view-modelassembler-transform-config-form .form-control.has-error {
    border-color: #d9534f;
    background-color: #fff5f5;
}

.d3view-modelassembler-transform-config-form .form-control.has-success {
    border-color: #5cb85c;
}

/** Added by shashank2104 on 01/14/2026 at 11:44 AM - DVFIV-1890 - LoadCase Detail View Styles **/
/** Updated by shashank2104 on 01/14/2026 at 12:47 PM - DVFIV-1890 - Added header bar styles **/

/* Header Bar - similar to SystemModelItemView */
.d3view-modelassembler-lcd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.d3view-modelassembler-lcd-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.d3view-modelassembler-lcd-header-icon {
    font-size: 18px;
    color: #17a2b8;
}

.d3view-modelassembler-lcd-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.d3view-modelassembler-lcd-header-right {
    display: flex;
    gap: 8px;
}

/* Main Container */
.d3view-modelassembler .d3view-modelassembler-loadcase-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.d3view-modelassembler-lcd-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Tree Panel */
.d3view-modelassembler-lcd-tree-panel {
    position: relative;
    background: #fafbfc;
    border-right: 1px solid #e1e4e8;
    flex-shrink: 0;
}

.d3view-modelassembler-lcd-tree-container {
    padding: 10px;
}

/* Tree Nodes */
.d3view-modelassembler-lcd-tree-node {
    margin-bottom: 2px;
}

.d3view-modelassembler-lcd-tree-node-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    user-select: none;
    word-break: break-all;
}

.d3view-modelassembler-lcd-tree-node-content:hover {
    background-color: #e9ecef;
}

.d3view-modelassembler-lcd-tree-node.active > .d3view-modelassembler-lcd-tree-node-content {
    background-color: #428bca;
    color: #fff;
}

.d3view-modelassembler-lcd-tree-node.active > .d3view-modelassembler-lcd-tree-node-content .d3view-modelassembler-lcd-tree-node-icon,
.d3view-modelassembler-lcd-tree-node.active > .d3view-modelassembler-lcd-tree-node-content .d3view-modelassembler-lcd-tree-node-label,
.d3view-modelassembler-lcd-tree-node.active > .d3view-modelassembler-lcd-tree-node-content .d3view-modelassembler-lcd-tree-toggle {
    color: #fff;
}

.d3view-modelassembler-lcd-tree-node-icon {
    margin-right: 8px;
    color: #6c757d;
    width: 16px;
    text-align: center;
}

.d3view-modelassembler-lcd-tree-node-label {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler-lcd-tree-node-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e9ecef;
    color: #495057;
    margin-left: 5px;
}

.d3view-modelassembler-lcd-tree-node.active > .d3view-modelassembler-lcd-tree-node-content .d3view-modelassembler-lcd-tree-node-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Tree Toggle */
.d3view-modelassembler-lcd-tree-toggle {
    margin-right: 6px;
    color: #6c757d;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.d3view-modelassembler-lcd-tree-node.expanded > .d3view-modelassembler-lcd-tree-node-content .d3view-modelassembler-lcd-tree-toggle i {
    transform: rotate(90deg);
}

.d3view-modelassembler-lcd-tree-node.expanded > .d3view-modelassembler-lcd-tree-children {
    display: block !important;
}

/* Tree Children */
.d3view-modelassembler-lcd-tree-children {
    padding-left: 20px;
}

/* Resize Handle */
.d3view-modelassembler-lcd-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s ease;
    z-index: 10;
}

.d3view-modelassembler-lcd-resize-handle:hover {
    background: #007bff;
}

/* Content Panel */
.d3view-modelassembler-lcd-content-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.d3view-modelassembler-lcd-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e1e4e8;
    flex-shrink: 0;
}

.d3view-modelassembler-lcd-content-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler-lcd-content-body {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* About Section */
/* Updated by shashank2104 on 01/16/2026 at 11:20 AM - DVFIV-1890 - Removed max-width to allow full-width layout */
.d3view-modelassembler-lcd-about {
}

.d3view-modelassembler-lcd-about-header h4 {
    color: #333;
    font-size: 18px;
}

.d3view-modelassembler-lcd-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.d3view-modelassembler-lcd-stat-card {
    flex: 1;
    min-width: 150px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.d3view-modelassembler-lcd-counts {
    display: flex;
    gap: 20px;
}

/* Files Section */
.d3view-modelassembler-lcd-files-list {
    max-width: 800px;
}

.d3view-modelassembler-lcd-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

.d3view-modelassembler-lcd-file-item:hover {
    border-color: #007bff;
}

/* Simulations Section */
.d3view-modelassembler-lcd-simulations {
    height: 100%;
}

.d3view-modelassembler-lcd-simulations-list {
    min-height: 300px;
}

/* Tab View Container */
.d3view-modelassembler-loadcase-tab-view {
    height: 100%;
    overflow: hidden;
}

/* ============================================
   DOE PROGRESS PANEL STYLES
   Added by shashank2104 on 01/14/2026 - DVFIV-1890
   ============================================ */

/* Progress bar shimmer animation */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* DOE Progress Panel */
.d3view-modelassembler-doe-progress-panel {
    min-height: 500px;
}

.d3view-modelassembler-doe-progress-bar-fill {
    position: relative;
    overflow: hidden;
}

.d3view-modelassembler-doe-progress-step-icon {
    transition: all 0.3s ease;
}

.d3view-modelassembler-doe-progress-step-icon.active {
    transform: scale(1.1);
}

.d3view-modelassembler-doe-progress-log {
    scrollbar-width: thin;
    scrollbar-color: #555 #2d2d2d;
}

.d3view-modelassembler-doe-progress-log::-webkit-scrollbar {
    width: 8px;
}

.d3view-modelassembler-doe-progress-log::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.d3view-modelassembler-doe-progress-log::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.d3view-modelassembler-doe-progress-log::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Row highlight animation for DOE studies */
@keyframes highlightPulse {
    0% { background-color: transparent; }
    25% { background-color: rgba(102, 126, 234, 0.3); }
    50% { background-color: rgba(102, 126, 234, 0.15); }
    75% { background-color: rgba(102, 126, 234, 0.3); }
    100% { background-color: transparent; }
}

.d3view-ma-highlight-row {
    animation: highlightPulse 1s ease-in-out 3;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
}

/* DOE Progress Overlay */
.d3view-modelassembler-doe-progress-overlay {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Progress connectors */
.d3view-modelassembler-doe-progress-connector {
    transition: background 0.3s ease;
}

.d3view-modelassembler-doe-progress-connector.completed {
    background: #5cb85c;
}

/** =========================================== **/
/** Include Structure Sidebar Styles - Added by shashank2104 on 01/16/2026 at 11:31 AM - DVFIV-1890 **/
/** =========================================== **/

/* Include Structure Sidebar Container */
.d3view-modelassembler-include-structure-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 700px;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.d3view-modelassembler-include-structure-sidebar-container.d3view-modelassembler-include-structure-sidebar-visible {
    transform: translateX(0);
}

/* Overlay */
.d3view-modelassembler-include-structure-sidebar-overlay {
    display: none;
}

/* Resize Handle */
.d3view-modelassembler-include-structure-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}

.d3view-modelassembler-include-structure-sidebar-resize-handle:hover,
.d3view-modelassembler-include-structure-sidebar-resize-handle.resizing {
    background: #337ab7;
}

/* Main Sidebar */
.d3view-modelassembler-include-structure-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Sidebar Header */
.d3view-modelassembler-include-structure-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.d3view-modelassembler-include-structure-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler-include-structure-sidebar-title i {
    color: #007bff;
}

/* Sidebar Body */
.d3view-modelassembler-include-structure-sidebar-body {
    flex: 1;
    overflow: auto;
    padding: 0;
}

/** =========================================== **/
/** Disabled Row/Assembly Styles - Added by shashank2104 on 01/16/2026 at 11:31 AM - DVFIV-1890 **/
/** =========================================== **/

/* Disabled row in include structure table */
.d3view-modelassembler-smi-disabled-row {
    opacity: 0.5;
    background: #f5f5f5 !important;
}

.d3view-modelassembler-smi-disabled-row td {
    color: #999 !important;
}

.d3view-modelassembler-smi-disabled-row a {
    color: #999 !important;
    text-decoration: line-through;
}

/* Disabled assembly in include structure */
.d3view-modelassembler-smi-disabled-assembly {
    opacity: 0.5;
}

.d3view-modelassembler-smi-disabled-assembly .d3view-modelassembler-smi-assembly-group-header {
    background: #f5f5f5 !important;
}

.d3view-modelassembler-smi-disabled-assembly .d3view-modelassembler-smi-assembly-group-header span {
    text-decoration: line-through;
    color: #999;
}

/* Checkbox styling in include structure */
.d3view-modelassembler-smi-file-enable-checkbox,
.d3view-modelassembler-smi-assembly-enable-checkbox {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/** =========================================== **/
/** Peacock Include Sidebar Styles - Added by shashank2104 on 01/20/2026 at 10:50 AM - DVFIV-1893 **/
/** =========================================== **/

/* Peacock Include Sidebar Container */
/* Updated by shashank2104 on 01/20/2026 at 05:30 PM - DVFIV-1893 - Fixed visibility toggle using transform */
.d3view-modelassembler-peacock-include-sidebar-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s ease, width 0.3s ease;
    pointer-events: none;
}

.d3view-modelassembler-peacock-include-sidebar-container.d3view-modelassembler-peacock-include-sidebar-visible {
    transform: translateX(0);
    pointer-events: auto;
}

.d3view-modelassembler-peacock-include-sidebar-container.d3view-modelassembler-peacock-include-sidebar-collapsed {
    width: 50px;
}

/* Main Sidebar */
.d3view-modelassembler-peacock-include-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    border-left: 1px solid #e0e0e0;
    pointer-events: auto;
}

/* Sidebar Header */
.d3view-modelassembler-peacock-include-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.d3view-modelassembler-peacock-include-sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.d3view-modelassembler-peacock-include-sidebar-title i {
    color: #17a2b8;
}

.d3view-modelassembler-peacock-include-sidebar-header-actions {
    display: flex;
    gap: 5px;
}

/* Sidebar Body */
.d3view-modelassembler-peacock-include-sidebar-body {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Actions Bar */
.d3view-modelassembler-peacock-include-sidebar-actions {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.d3view-modelassembler-peacock-include-sidebar-actions .btn {
    font-size: 11px;
    padding: 3px 8px;
}

/* File List */
.d3view-modelassembler-peacock-include-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* File Item */
.d3view-modelassembler-peacock-include-file-item {
    display: flex;
    flex-direction: column;
    padding: 6px 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s ease;
}

.d3view-modelassembler-peacock-include-file-item:hover {
    background: #f5f9ff;
}

.d3view-modelassembler-peacock-include-file-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.d3view-modelassembler-peacock-include-file-checkbox {
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.d3view-modelassembler-peacock-include-file-name {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.d3view-modelassembler-peacock-include-file-assembly {
    font-size: 10px;
    margin-left: 22px;
    color: #888;
}

/* Empty State */
.d3view-modelassembler-peacock-include-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    color: #999;
    text-align: center;
}

.d3view-modelassembler-peacock-include-empty i {
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* Sidebar Footer */
.d3view-modelassembler-peacock-include-sidebar-footer {
    padding: 10px 12px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.d3view-modelassembler-peacock-include-apply-btn {
    width: 100%;
}

/* Collapsed Sidebar */
.d3view-modelassembler-peacock-include-sidebar-collapsed {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: auto;
}

.d3view-modelassembler-peacock-include-sidebar-expand-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.d3view-modelassembler-peacock-include-sidebar-expand-btn i {
    color: #17a2b8;
}

.d3view-modelassembler-peacock-include-sidebar-collapsed-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #17a2b8;
    border-radius: 9px;
}

/* 3D View Container with Sidebar */
.d3view-modelassembler-peacock-3d-container {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
}

.d3view-modelassembler-peacock-3d-viewer {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

/* ==================================================================================== */
/* Added by shashank2104 on 01/20/2026 at 03:39 PM - DVFIV-1893 - ParameterizeManager Styles */
/* ==================================================================================== */

.d3view-parameterize-manager-view {
    height: 100%;
}

.d3view-parameterize-manager-view .pm-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-parameterize-manager-view .pm-header {
    flex-shrink: 0;
}

.d3view-parameterize-manager-view .pm-content-area {
    flex: 1;
    overflow-y: auto;
}

.d3view-parameterize-manager-view .pm-footer {
    flex-shrink: 0;
}

/* Wizard Steps */
.d3view-parameterize-manager-view .pm-wizard-step {
    max-width: 800px;
    margin: 0 auto;
}

.d3view-parameterize-manager-view .pm-scanning-step,
.d3view-parameterize-manager-view .pm-complete-step {
    padding: 40px 20px;
}

/* Stats Cards */
.d3view-parameterize-manager-view .pm-stat-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.d3view-parameterize-manager-view .pm-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* File Sidebar */
.d3view-parameterize-manager-view .pm-file-sidebar {
    border-right: 1px solid #e0e0e0;
    background: #fafbfc;
}

.d3view-parameterize-manager-view .pm-file-item {
    cursor: pointer;
    transition: background 0.2s;
}

.d3view-parameterize-manager-view .pm-file-item:hover {
    background: #f0f4f8;
}

.d3view-parameterize-manager-view .pm-file-item.selected {
    background: #e8f4fd;
    border-left: 3px solid #007bff;
}

/* Dashboard Layout */
.d3view-parameterize-manager-view .pm-dashboard {
    display: flex;
    height: 100%;
}

.d3view-parameterize-manager-view .pm-main-content {
    flex: 1;
    overflow-y: auto;
}

/* Migration Preview */
.d3view-parameterize-manager-view .pm-migration-preview {
    max-width: 800px;
    margin: 0 auto;
}

/* File Editor */
.d3view-parameterize-manager-view .pm-file-editor-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.d3view-parameterize-manager-view .pm-file-editor-container {
    flex: 1;
    overflow: hidden;
}

/* Scan Progress */
.d3view-parameterize-manager-view .pm-scan-progress .progress {
    height: 20px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.d3view-parameterize-manager-view .pm-scan-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Template Options */
.d3view-parameterize-manager-view .pm-template-option {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.d3view-parameterize-manager-view .pm-template-option:hover {
    border-color: #007bff;
    background: #f8f9fa;
}

.d3view-parameterize-manager-view .pm-template-option.selected {
    border-color: #007bff;
    background: #e8f4fd;
}

/* Parameters Table */
.d3view-parameterize-manager-view table.table {
    margin-bottom: 0;
}

.d3view-parameterize-manager-view table.table thead th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #666;
}

.d3view-parameterize-manager-view table.table tbody td {
    vertical-align: middle;
}

.d3view-parameterize-manager-view table.table code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* File Parameters Group */
.d3view-parameterize-manager-view .pm-file-params-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ==========================================
   Added by shashank2104 on 01/20/2026 - DVFIV-1893
   Active Project Dropdown Styles
   ========================================== */

.d3view-modelassembler-active-project-container {
    position: relative;
    display: inline-block;
}

.d3view-modelassembler-active-project-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.d3view-modelassembler-active-project-btn:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    border-color: #ced4da;
}

.d3view-modelassembler-active-project-btn i.fa-folder-open {
    color: #f39c12;
}

.d3view-modelassembler-active-project-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    font-variant: small-caps;
}

.d3view-modelassembler-project-dropdown {
    animation: fadeInDown 0.2s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.d3view-modelassembler-project-dropdown-content {
    min-height: 60px;
}

.d3view-modelassembler-project-dropdown-content .pl-generic-fb {
    margin: 0;
    padding: 0;
}

/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - 70-30 input mapping layout, resizable sidebar, column list **/
.d3view-modelassembler-input-mapping-split-container {
    display: flex;
    flex-direction: row;
    min-height: 0;
    gap: 0;
}

.d3view-modelassembler-input-mapping-left {
    flex: 1 1 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler-input-mapping-formbuilder-wrap {
    min-height: 200px;
    overflow: auto;
    position: relative;
}

/** DVFIV-1933 - AI mapping loader overlay **/
.d3view-modelassembler-input-mapping-ai-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

.d3view-modelassembler-input-mapping-ai-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 14px;
}

.d3view-modelassembler-input-mapping-ai-loader-content .fa-spinner {
    font-size: 28px;
    color: #5a9bd5;
}

.d3view-modelassembler-input-mapping-sidebar {
    flex: 0 0 30%;
    width: 30%;
    min-width: 200px;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #dee2e6;
    background: #f8f9fa;
    position: relative;
}

.d3view-modelassembler-input-mapping-sidebar-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1;
}

.d3view-modelassembler-input-mapping-sidebar-resize-handle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.d3view-modelassembler-input-mapping-sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.d3view-modelassembler-input-mapping-sidebar-title {
    font-weight: 600;
    color: #333;
}

/** Added by shashank2104 on 02/20/2026 - DVFIV-1926 - Search and mapped/unmapped filter side by side **/
.d3view-modelassembler-input-mapping-sidebar-search-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
    width: 100%;
}

.d3view-modelassembler-input-mapping-sidebar-search-filter-wrap .d3view-modelassembler-input-mapping-column-search {
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-modelassembler-input-mapping-sidebar-search-filter-wrap .d3view-modelassembler-input-mapping-column-map-filter {
    flex: 0 0 auto;
    max-width: 120px;
}

/** DVFIV-1926 - Clear mapping / Auto mapping buttons below search **/
.d3view-modelassembler-input-mapping-schema-buttons-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-modelassembler-input-mapping-show-values-toggle {
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler-input-mapping-column-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.d3view-modelassembler-input-mapping-column-list-empty-msg {
    padding: 12px;
}

/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - Hide column rows that do not match sidebar search **/
.d3view-modelassembler-column-search-hidden {
    display: none !important;
}

.d3view-modelassembler-input-mapping-column-row {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: move;
}

.d3view-modelassembler-input-mapping-column-row:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.d3view-modelassembler-input-mapping-column-row-label {
    font-size: 13px;
    color: #495057;
}

/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - Mapped database column indicator (right sidebar) **/
.d3view-ma-db-column-item-mapped {
    border-left: 3px solid #28a745;
    background: #f1f9f1;
}

.d3view-ma-db-column-mapped-icon {
    margin-left: 6px;
}

.d3view-ma-db-column-mapped-icon .fa-link {
    color: #28a745;
}

.d3view-modelassembler-input-mapping-column-row-value-wrap {
    margin-top: 8px;
    min-height: 24px;
}

.d3view-modelassembler-input-mapping-value-hidden {
    display: none !important;
}

.d3view-modelassembler-input-mapping-value-hidden.d3view-modelassembler-input-mapping-value-visible {
    display: block !important;
}

.d3view-modelassembler-input-mapping-mapped-info {
    font-size: 12px;
}

/** Added by shashank2104 on 02/18/2026 at 10:41 AM - DVFIV-1926 - Output mapping step (mirrored layout: left = columns, right = outputs) **/
.d3view-modelassembler-output-mapping-step {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.d3view-modelassembler-output-mapping-header {
    flex-shrink: 0;
    margin-bottom: 10px;
}

.d3view-modelassembler-output-mapping-title {
    margin: 0 0 4px 0;
    font-size: 14px;
}

.d3view-modelassembler-output-mapping-stats {
    margin: 0;
    font-size: 12px;
    color: #6c757d;
}

/** DVFIV-1926 - 100% width so split is not capped **/
.d3view-modelassembler-output-mapping-split-container {
    display: flex;
    flex-direction: row;
    min-height: 0;
    min-width: 0;
    width: 100%;
    gap: 0;
}

/** DVFIV-1926 - Left panel (db columns): same space as Input view left (70%). No resize handle here. **/
.d3view-modelassembler-output-mapping-sidebar.d3view-modelassembler-output-mapping-left {
    flex: 1 1 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.d3view-modelassembler-output-mapping-sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.d3view-modelassembler-output-mapping-sidebar-title {
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler-output-mapping-schema-search-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
    width: 100%;
}

.d3view-modelassembler-output-mapping-schema-search-filter-wrap .d3view-modelassembler-output-mapping-column-search {
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-modelassembler-output-mapping-schema-search-filter-wrap .d3view-modelassembler-output-mapping-column-map-filter {
    flex: 0 0 auto;
    max-width: 120px;
}

/** DVFIV-1926 - Clear mapping / Auto mapping buttons below schema search **/
.d3view-modelassembler-output-mapping-schema-buttons-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-modelassembler-output-mapping-schema-empty-msg {
    padding: 12px;
}

.d3view-modelassembler-output-mapping-output-search-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
    width: 100%;
}

.d3view-modelassembler-output-mapping-output-search-filter-wrap .d3view-modelassembler-output-mapping-output-search {
    flex: 1 1 auto;
    min-width: 0;
}

.d3view-modelassembler-output-mapping-output-search-filter-wrap .d3view-modelassembler-output-mapping-output-source-filter {
    flex: 0 0 auto;
    max-width: 160px;
}

.d3view-modelassembler-output-mapping-show-all-toggle {
    margin: 0;
    font-weight: normal;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler-output-mapping-show-values-toggle {
    margin: 0;
    font-weight: normal;
    font-size: 13px;
}

.d3view-modelassembler-output-mapping-column-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/** DVFIV-1926 - Right panel (workflow outputs): 30% resizable sidebar, same as Input view right. **/
.d3view-modelassembler-output-mapping-right {
    flex: 0 0 30%;
    width: 30%;
    min-width: 200px;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid #dee2e6;
    background: #f8f9fa;
    min-height: 0;
}

.d3view-modelassembler-output-mapping-right-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1;
}

.d3view-modelassembler-output-mapping-right-resize-handle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.d3view-modelassembler-output-mapping-right .d3view-modelassembler-output-mapping-output-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.d3view-modelassembler-output-mapping-table {
    margin-bottom: 0;
}

.d3view-modelassembler-output-mapping-row-drop {
    min-height: 32px;
}

.d3view-modelassembler-output-mapping-row-drop.ui-droppable-hover {
    background: #e7f3ff;
}

/** DVFIV-1926 - Left: output list (draggable items) **/
.d3view-modelassembler-output-mapping-output-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.d3view-modelassembler-output-mapping-output-row {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: move;
}

.d3view-modelassembler-output-mapping-output-row:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.d3view-modelassembler-output-mapping-output-label {
    font-size: 13px;
    color: #495057;
}

/** DVFIV-1926 - Right: schema list (drop targets + Clear) **/
.d3view-modelassembler-output-mapping-schema-header {
    padding: 10px 12px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.d3view-modelassembler-output-mapping-schema-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.d3view-modelassembler-output-mapping-schema-row {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    min-height: 44px;
}

.d3view-modelassembler-output-mapping-schema-row.ui-droppable-hover {
    background: #e7f3ff;
    border-color: #0d6efd;
}

.d3view-modelassembler-output-mapping-schema-row-label {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.d3view-modelassembler-output-mapping-schema-row-mapped {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.d3view-modelassembler-output-mapping-mapped-label {
    font-size: 12px;
    color: #28a745;
}

.d3view-modelassembler-output-mapping-schema-value-wrap {
    margin-top: 8px;
    min-height: 24px;
}

.d3view-modelassembler-input-mapping-mapped-info .d3view-ma-clear-map {
    margin-left: 8px;
}

/** DVFIV-1933 - Output mapping view: table + FilterView header (modern UI) **/
.d3view-modelassembler-output-mapping-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-table-search {
    flex: 0 0 auto;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-pick-overlay {
    border-radius: 8px;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-pick-overlay-header {
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-pick-overlay-body {
    background: #fff;
    margin: 0 12px 12px 12px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-pick-workflow-body {
    background: #fafafa;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-desc {
    flex-shrink: 0;
    margin: 0 0 10px 0;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-table-wrap {
    flex: 0 1 auto;
    min-height: 120px;
    overflow: auto;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-table {
    margin-bottom: 0;
    background: #fff;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-table thead th {
    background: #f0f0f0;
    font-weight: 600;
    color: #333;
    padding: 10px 12px;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-row:hover {
    background: #f8f9fa;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-no-items td {
    padding: 24px 16px;
    color: #6c757d;
    font-size: 13px;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-toolbar {
    flex-shrink: 0;
    padding-top: 10px;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-worker-select,
.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-output-select,
.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-record-select {
    width: 100%;
}

.d3view-modelassembler-output-mapping-view .select2-container {
    width: 100% !important;
    max-width: 100%;
}

.d3view-modelassembler-output-mapping-view .d3view-modelassembler-output-mapping-remove-row {
    padding: 4px 8px;
}

/** Added by shashank2104 on 02/17/2026 - DVFIV-1926 - Inputs with mappedKey indicator (left panel) **/
.workflow-modal .field-item.has-mapped-key {
    border-left: 3px solid #28a745;
    background-color: #f1f9f1;
}

/* ==========================================
   Tools Page Styles
   ========================================== */

.d3view-modelassembler-tools-page {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

.d3view-modelassembler-tools-header h4 {
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler-tools-header h4 i {
    color: #6c757d;
}

.d3view-modelassembler-tools-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.d3view-modelassembler-tools-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #bbb;
}

.d3view-modelassembler-tools-card[data-tool="migration-assistant"]:hover {
    border-color: #1976d2;
}

.d3view-modelassembler-tools-card[data-tool="cleanup"]:hover,
.d3view-modelassembler-tools-card[data-tool="reorganize"]:hover,
.d3view-modelassembler-tools-card[data-tool="bulk-export"]:hover {
    cursor: not-allowed;
}

.d3view-modelassembler-tools-tab {
    background: #fff;
}

/* Comments Panel - Added by shashank2104 on 01/20/2026 at 11:55 PM - DVFIV-1893 */
.d3view-modelassembler .d3view-modelassembler-comments-panel-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 600px;
    max-width: 90%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-container.d3view-modelassembler-comments-panel-visible {
    transform: translateX(0);
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-overlay {
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-resize-handle:hover,
.d3view-modelassembler .d3view-modelassembler-comments-panel-resize-handle.resizing {
    background: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-header {
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-header > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-header-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-header-title i {
    color: #337ab7;
}

.d3view-modelassembler .d3view-modelassembler-comments-count {
    color: #6c757d;
    font-weight: normal;
    font-size: 14px;
}

.d3view-modelassembler .d3view-modelassembler-comments-panel-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler .d3view-modelassembler-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.d3view-modelassembler .d3view-modelassembler-comment-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.d3view-modelassembler .d3view-modelassembler-comment-item:hover {
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-comments-add-form {
    padding: 0;
    background: transparent;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-comments-textarea {
    resize: vertical;
    min-height: 60px;
    font-size: 13px;
}


/* ==================================================================================== */
/* Added by shashank2104 on 01/21/2026 - DVFIV-1896 - Parameterize FlowModal View Styles */
/* ==================================================================================== */

/* Step 1: File Selection */
.d3view-parameterize-flowmodal-view .pm-step1-container {
    height: 100%;
}

.d3view-parameterize-flowmodal-view .pm-step1-header {
    border-radius: 0;
}

.d3view-parameterize-flowmodal-view .pm-file-item {
    transition: all 0.2s ease;
}

.d3view-parameterize-flowmodal-view .pm-file-item:hover {
    background: #f0f4f8 !important;
}

.d3view-parameterize-flowmodal-view .pm-file-item.selected {
    background: #e8f4fd !important;
    border-left: 3px solid #007bff;
}

.d3view-parameterize-flowmodal-view .pm-file-sidebar {
    transition: right 0.3s ease;
}

.d3view-parameterize-flowmodal-view .pm-toggle-sidebar-btn:hover {
    transform: scale(1.05);
}

.d3view-parameterize-flowmodal-view .pm-empty-state {
    animation: pm-fadeIn 0.5s ease;
}

@keyframes pm-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Step 2: Action Selection */
.d3view-parameterize-flowmodal-view .pm-action-container {
    animation: pm-fadeIn 0.3s ease;
}

.d3view-parameterize-flowmodal-view .pm-action-option {
    transition: all 0.3s ease;
}

.d3view-parameterize-flowmodal-view .pm-action-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Step 3: Complete Summary */
.d3view-parameterize-flowmodal-view .pm-complete-container {
    animation: pm-fadeIn 0.5s ease;
}

.d3view-parameterize-flowmodal-view .pm-success-header {
    animation: pm-successPulse 0.6s ease;
}

@keyframes pm-successPulse {
    0% { transform: scale(0.95); opacity: 0; }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

.d3view-parameterize-flowmodal-view .pm-stats-section > div > div {
    transition: transform 0.2s ease;
}

.d3view-parameterize-flowmodal-view .pm-stats-section > div > div:hover {
    transform: translateY(-3px);
}

/* Parameters Table */
.d3view-parameterize-flowmodal-view .pm-param-row {
    transition: background 0.2s ease;
}

.d3view-parameterize-flowmodal-view .pm-param-row:hover {
    background: #e8f4fd !important;
}

/* Sidebar Scrollbar */
.d3view-parameterize-flowmodal-view .pm-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.d3view-parameterize-flowmodal-view .pm-sidebar-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.d3view-parameterize-flowmodal-view .pm-sidebar-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.d3view-parameterize-flowmodal-view .pm-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Assembly Group Toggle */
.d3view-parameterize-flowmodal-view .pm-assembly-header:hover {
    background: #e9ecef !important;
}

.d3view-parameterize-flowmodal-view .pm-assembly-header .fa-chevron-down {
    transition: transform 0.2s ease;
}

.d3view-parameterize-flowmodal-view .pm-assembly-header.collapsed .fa-chevron-down {
    transform: rotate(-90deg);
}

/* TextParameterization Simple Mode */
.d3view-modelassembler .text-parameterization .tp-simple-mode-hidden {
    position: absolute;
    right: -350px;
    transition: right 0.3s ease;
    display: none;
}
.d3view-modelassembler .text-parameterization {
    min-height: unset;
}
.d3view-modelassembler .text-parameterization .tp-body {
    height: calc(100% - 20px) !important;
}

.d3view-modelassembler .text-parameterization .tp-simple-mode-toggle {
    transition: all 0.2s ease;
}

.d3view-modelassembler .text-parameterization .tp-simple-mode-toggle:hover {
    transform: translateY(-50%) scale(1.05);
}
/* Assembly Item View - Tree-first layout with resizable panels (Cursor Agent) */
.d3view-modelassembler-assembly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    flex-shrink: 0;
}
.d3view-modelassembler-assembly-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler-assembly-header-icon { margin-right: 5px; }
.d3view-modelassembler-assembly-header-title { font-weight: 500; }
.d3view-modelassembler-assembly-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.d3view-modelassembler-assembly-tree-panel {
    border-left: 3px solid #337ab7;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    width: 300px;
    min-width: 200px;
    max-width: 500px;
    border-right: 1px solid #ddd;
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.d3view-modelassembler-assembly-tree-search {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler-assembly-tree-search input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
}
.d3view-modelassembler-assembly-tree-container { flex: 1; overflow-y: auto; padding: 5px 0; }
.d3view-modelassembler-assembly-tree { list-style: none; margin: 0; padding: 0; }
.d3view-modelassembler-assembly-tree-node { cursor: pointer; }
.d3view-modelassembler-assembly-tree-node-content {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    gap: 8px;
}
.d3view-modelassembler-assembly-tree-node-content:hover { background: #f5f5f5; }
.d3view-modelassembler-assembly-tree-node.active .d3view-modelassembler-assembly-tree-node-content { background: #f0f0f0; }
.d3view-modelassembler-assembly-tree-toggle { margin-right: 4px; }
.d3view-modelassembler-assembly-tree-node.expanded .d3view-modelassembler-assembly-tree-toggle i { transform: rotate(90deg); }
.d3view-modelassembler-assembly-tree-node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-modelassembler-assembly-tree-badge { font-size: 11px; color: #666; }
.d3view-modelassembler-assembly-tree-node.has-children:not(.expanded) > .d3view-modelassembler-assembly-tree-children { display: none; }
.d3view-modelassembler-assembly-tree-children { list-style: none; margin: 0; padding-left: 16px; }
.d3view-modelassembler-assembly-tree-node.search-hidden { display: none; }
.d3view-modelassembler-assembly-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: ew-resize;
    background: transparent;
    position: relative;
}
.d3view-modelassembler-assembly-resize-handle:hover,
.d3view-modelassembler-assembly-resize-handle.resizing { background: #e0e0e0; }
.d3view-modelassembler-assembly-resize-handle-bar {
    position: absolute;
    left: 2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ccc;
}
.d3view-modelassembler-assembly-resize-handle:hover .d3view-modelassembler-assembly-resize-handle-bar,
.d3view-modelassembler-assembly-resize-handle.resizing .d3view-modelassembler-assembly-resize-handle-bar { background: #337ab7; }

/* SMI message paragraph default margin - used by d3view-modelassembler-smi-message-tpl */
.d3view-modelassembler-smi-message-p { margin: 0; }

/* DVFIV-1913 - Reporters tab: compact row with Show/Hide; detail row hidden by default */
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-detail-wrap.d3view-modelassembler-smi-reporter-detail-wrap-hidden {
    display: none;
}
.d3view-modelassembler .d3view-modelassembler-smi-content-body .d3view-modelassembler-smi-reporter-sim-toggle {
    padding: 0 5px;
}

/* DVFIV-1923 - Active project select2 styled like button (single-click to choose project) */
.d3view-modelassembler-active-project-container .select2-container {
    display: inline-block;
    min-width: 200px;
}
.d3view-modelassembler-active-project-container .select2-container .select2-arrow {
    background: #FFF;
    padding: 4px 12px;
}
.d3view-modelassembler-active-project-container .select2-choice,
.d3view-modelassembler-active-project-container .select2-selection__rendered {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 10px;
    background: #fff;
    font-size: 12px;
    line-height: 1.5;
    min-height: 28px;
    display: flex;
    align-items: center;
}
.d3view-modelassembler-active-project-container .select2-choice:hover,
.d3view-modelassembler-active-project-container .select2-container--default .select2-selection--single:hover {
    border-color: #66afe9;
    outline: 0;
}
.d3view-modelassembler-active-project-container .select2-arrow,
.d3view-modelassembler-active-project-container .select2-selection__arrow {
    margin-left: 4px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-step {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-header {
    margin-bottom: 12px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-title {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-stats {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-save-setup {
    margin-top: 10px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filter-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-search-wrap {
    flex: 0 0 25%;
    min-width: 140px;
    position: relative;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-search-wrap input.d3view-modelassembler-input-mapping-search {
    padding-right: 28px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-search-wrap .d3view-modelassembler-input-mapping-clear-search {
    position: absolute;
    right: 44px;
    cursor: pointer;
    color: #999;
    z-index: 10;
    top: 9px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-search-wrap .d3view-modelassembler-input-mapping-clear-search:hover {
    color: #333;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filters-wrap {
    flex: 1 1 70%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-input-mapping-filters-wrap .advanced-filters {
    height: 34px!important;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filters-wrap .d3view-modelassembler-input-mapping-toggle-filters {
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filter-view-container.d3view-modelassembler-filters-collapsed {
    display: none;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filter-view-container:not(.d3view-modelassembler-filters-collapsed) {
    display: block;
    width: 100%;
    flex: 1 1 100%;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-filter {
    padding: 12px 0;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap {
    margin-top: 16px;
    padding: 0 2px;
    min-height: 200px;
    position: relative;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 0;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table thead th {
    font-weight: 600;
    color: #444;
    padding: 10px 12px;
    border-bottom: 2px solid #dee2e6;
    background: #f8f9fa;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table thead th:first-child {
    width: 28%;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table thead th:nth-child(2) {
    width: 28%;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table thead th:nth-child(3) {
    width: 44%;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-table-wrap .d3view-modelassembler-input-mapping-table tbody td:first-child i {
    margin-right: 8px;
    color: #6c757d;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-value-cell {
    min-height: 32px;
}

.d3view-modelassembler .d3view-modelassembler-input-mapping-value-fixed {
    color: #555;
}

.d3view-modelassembler .d3view-modelassembler-database-workflows-compare .btn {
    margin-right: 8px;
}

/** Added by shashank2104 on 02/24/2026 - DVFIV-1933 - Compare Workflows in Simlytiks step1 option cards **/
.d3view-modelassembler .d3view-modelassembler-compare-wfs-option-card:hover {
    border-color: #5bc0de !important;
    background-color: #f5f5f5;
}
.d3view-modelassembler .d3view-modelassembler-compare-wfs-option-card-selected {
    border-color: #337ab7 !important;
    background-color: #e8f4fc;
}
.d3view-modelassembler .d3view-modelassembler-compare-wfs-flowmodal-container {
    min-height: 0;
}
.d3view-modelassembler .d3view-modelassembler-compare-wfs-wf-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.d3view-modelassembler div.d3view-inputsBuilder div.inputs-list ul.field-items li.field-item .input-desc-outer {
    color: grey;
}

/* CS-262 - Loop with Assemblies picker */
.d3view-modelassembler .d3view-ma-loop-assembly-row {
    display: flex!important;
    align-items: center!important;
    padding: 8px 10px;
    margin: 3px 0;
    border: 1px solid #e8ecf0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-weight: normal;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    gap: 10px;
}
.d3view-modelassembler .d3view-ma-loop-assembly-row:hover {
    background: #f0f7ff;
    border-color: #b8d4f0;
    box-shadow: 0 1px 4px rgba(0,120,212,0.08);
}
.d3view-modelassembler .d3view-ma-loop-assembly-row input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.d3view-modelassembler .d3view-ma-loop-asm-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e8f4fd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1a8cd8;
    font-size: 13px;
}
.d3view-modelassembler .d3view-ma-loop-asm-info {
    flex: 1;
    min-width: 0;
}
.d3view-modelassembler .d3view-ma-loop-asm-name {
    font-size: 13px;
    font-weight: 500;
    color: #1a2a3a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-modelassembler .d3view-ma-loop-asm-secondary {
    font-size: 11px;
    color: #6c8aa0;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-modelassembler .d3view-ma-loop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 20px;
    color: #aab8c2;
    font-size: 13px;
}
/** Added by shashank2104 on 04/14/2026 - DVFIV-XXXX - Ontology add-data-source sidebar list **/
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-list {
    gap: 8px;
    padding: 12px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.04));
    cursor: pointer;
    transition: all 0.15s ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item:hover {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-md, 0 2px 6px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-subtle, #f3f4f6);
    color: var(--d3v-accent-primary, #3b82f6);
    font-size: 16px;
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-meta {
    flex: 1;
    min-width: 0;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.3;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-sub {
    font-size: 11px;
    color: var(--d3v-text-secondary, #6b7280);
    margin-top: 2px;
    font-family: var(--d3v-font-mono, monospace);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-btn {
    flex: 0 0 auto;
}
/** Added by shashank2104 on 04/17/2026 - DVFIV-2001 - Search, loading, and wrapper styling for remote-lookup picker **/
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-wrap {
    gap: 0;
    height: 100%;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-search-wrap {
    position: relative;
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--d3v-border-muted, #e5e7eb);
    background: var(--d3v-bg-primary, #fff);
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-search-wrap .fa-search {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d3v-text-secondary, #6b7280);
    font-size: 12px;
    pointer-events: none;
}
.d3view-modelassembler-ontology-add-sidebar input.d3view-modelassembler-ontology-add-search {
    padding-left: 28px;
    height: 32px;
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.d3view-modelassembler-ontology-add-sidebar input.d3view-modelassembler-ontology-add-search:focus {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    outline: none;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-loading {
    color: var(--d3v-text-secondary, #6b7280);
    font-size: 13px;
    padding: 28px 20px;
    text-align: center;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-btn:disabled {
    opacity: 0.7;
    cursor: progress;
}

/** Added by shashank2104 on 04/18/2026 - DVFIV-2001 - Multi-step "Add Datasource" sidebar (cards + footer + worker form) **/
.d3view-modelassembler-ontology-add-sidebar .content-wrapper {
    padding: 0;
    overflow: hidden;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-shell {
    gap: 0;
    height: 100%;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-body {
    padding: 12px;
    background: var(--d3v-bg-subtle, #f8fafc);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary, #fff);
    border-top: 1px solid var(--d3v-border-muted, #e5e7eb);
    box-shadow: 0 -1px 3px rgba(15,23,42,0.04);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-apply-btn,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-cancel-btn {
    min-width: 88px;
    transition: all var(--d3v-t-fast, 0.15s) ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-apply-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 3-card chooser */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    border-radius: var(--d3v-r-lg, 10px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.04));
    cursor: pointer;
    transition: all var(--d3v-t-fast, 0.15s) ease;
    position: relative;
    overflow: hidden;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--d3v-accent-primary, #3b82f6);
    opacity: 0;
    transition: opacity var(--d3v-t-fast, 0.15s) ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card:hover {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: var(--d3v-sh-md, 0 4px 12px rgba(0,0,0,0.08));
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card:hover::before {
    opacity: 1;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--d3v-r-md, 8px);
    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.05));
    color: var(--d3v-accent-primary, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card-meta {
    flex: 1;
    min-width: 0;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    line-height: 1.3;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card-sub {
    font-size: 12px;
    color: var(--d3v-text-secondary, #6b7280);
    margin-top: 3px;
    line-height: 1.35;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card-chevron {
    flex: 0 0 auto;
    color: var(--d3v-text-secondary, #9ca3af);
    font-size: 12px;
    transition: transform var(--d3v-t-fast, 0.15s) ease, color var(--d3v-t-fast, 0.15s) ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-card:hover .d3view-modelassembler-ontology-add-card-chevron {
    color: var(--d3v-accent-primary, #3b82f6);
    transform: translateX(2px);
}

/* Back-bar above lookups / worker-form */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-back {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--d3v-border-muted, #e5e7eb);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-back-btn {
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-back-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
}

/* Remote-lookup item: click to toggle selection (no checkbox/radio) */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item {
    position: relative;
    margin-bottom: 8px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item .d3view-modelassembler-ontology-add-check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d3v-bg-subtle, #f3f4f6);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all var(--d3v-t-fast, 0.15s) ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item.selected {
    border-color: var(--d3v-accent-primary, #3b82f6);
    background: linear-gradient(135deg, rgba(59,130,246,0.04), rgba(59,130,246,0.01));
    box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-item.selected .d3view-modelassembler-ontology-add-check {
    background: var(--d3v-accent-primary, #3b82f6);
    border-color: var(--d3v-accent-primary, #3b82f6);
    color: #fff;
}

/* Search wrapper refinements when nested inside the stepped body */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-body .d3view-modelassembler-ontology-add-search-wrap {
    padding: 0 0 10px;
    border-bottom: none;
    background: transparent;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-body .d3view-modelassembler-ontology-add-search-wrap .fa-search {
    left: 10px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-body input.d3view-modelassembler-ontology-add-search {
    padding-left: 28px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-body .d3view-modelassembler-ontology-add-list {
    padding: 0;
}

/* Worker-form step */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-wrap {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(0,0,0,0.04));
    padding: 12px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form .wf-input-label,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #111827);
    margin-bottom: 4px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form .form-control,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form input.form-control,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form textarea.form-control {
    border-radius: var(--d3v-r-md, 6px);
    border: 1px solid var(--d3v-border-muted, #e5e7eb);
    transition: border-color var(--d3v-t-fast, 0.15s) ease, box-shadow var(--d3v-t-fast, 0.15s) ease;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form .form-control:focus {
    border-color: var(--d3v-accent-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
    outline: none;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-add-worker-form textarea.form-control {
    min-height: 90px;
}

/** Added by shashank2104 on 04/17/2026 - DVFIV-2001 - Ontology schema view header actions **/
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-header {
    padding: 10px 16px;
    background: var(--d3v-bg-primary, #fff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15,23,42,0.04));
    flex: 0 0 auto;
    gap: 12px;
    border-radius: var(--d3v-r-md, 8px) var(--d3v-r-md, 8px) 0 0;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-stats {
    gap: 12px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-divider {
    width: 1px;
    height: 14px;
    background: var(--d3v-border, #E2E8F0);
    display: inline-block;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions {
    gap: 10px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-hint {
    font-size: 11px;
    color: var(--d3v-text-muted, #94A3B8);
    margin-right: 4px;
}
.d3view-modelassembler-ontology-schema-view .js-ontology-save,
.d3view-modelassembler-ontology-schema-view .js-ontology-upload {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--d3v-r-md, 8px);
    font-size: 12px;
    font-weight: 500;
    transition: all var(--d3v-t-fast, 0.12s);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-save {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-text-inverse, #fff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15,23,42,0.05));
}
.d3view-modelassembler-ontology-schema-view .js-ontology-save:hover {
    background: var(--d3v-accent-hover, #2563EB);
    border-color: var(--d3v-accent-hover, #2563EB);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(59,130,246,0.25));
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-save:disabled {
    opacity: 0.75;
    cursor: progress;
    transform: none;
}
.d3view-modelassembler-ontology-schema-view .js-ontology-upload {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border, #E2E8F0);
    color: var(--d3v-text-primary, #1E293B);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-upload:hover {
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-accent, #3B82F6);
    background: var(--d3v-bg-secondary, #F8FAFC);
}

/** Added by shashank2104 on 04/18/2026 - DVFIV-2001 - Primary "Add Datasource" header shortcut **/
.d3view-modelassembler-ontology-schema-view .js-ontology-add-ds {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--d3v-r-md, 8px);
    font-size: 12px;
    font-weight: 500;
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: var(--d3v-text-inverse, #fff);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15,23,42,0.05));
    transition: all var(--d3v-t-fast, 0.12s);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-add-ds:hover {
    background: var(--d3v-accent-hover, #2563EB);
    border-color: var(--d3v-accent-hover, #2563EB);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(59,130,246,0.25));
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-add-ds:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none;
}

/** Added by shashank2104 on 04/18/2026 - DVFIV-2001 - Unified header-action
 *  button sizing so the 5 buttons (add-ds, AI suggest, clear, upload, save)
 *  all sit at the same height/alignment regardless of their custom background
 *  colors. Without this the Bootstrap-scaled `.btn-sm` base + per-button paddings
 *  rendered each pill at a slightly different height, especially in icon-only mode. */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions .btn {
    height: 30px;
    line-height: 1;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--d3v-r-md, 8px);
    box-sizing: border-box;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions .btn i.fa {
    font-size: 12px;
    line-height: 1;
    margin: 0;
}

/** Responsive header: collapse action buttons to icon-only on narrow
 *  viewports so the row doesn't wrap. Labels are preserved in the markup
 *  inside `.btn-label` spans; the buttons keep their `title` attribute so
 *  hover tooltips still surface the label. */
@media (max-width: 1460px) {
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-hint {
        display: none;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions .btn .btn-label {
        display: none;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions .btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
        gap: 0;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-actions {
        gap: 6px;
    }
}

/** Added by shashank2104 on 04/17/2026 - DVFIV-2001 - Connected column row hover tint **/
.d3view-modelassembler-ontology-schema-view .rb-col-row.rb-col-connected:hover {
    background: color-mix(in srgb, var(--rb-col-connected, #3B82F6) 8%, transparent);
}

/** Added by shashank2104 on 04/17/2026 - DVFIV-2001 - Relationships source badge **/
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--d3v-r-full, 999px);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    background: var(--d3v-bg-secondary, #F8FAFC);
    color: var(--d3v-text-secondary, #475569);
    transition: all var(--d3v-t-fast, 0.12s);
    cursor: help;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-badge i {
    font-size: 10px;
    opacity: 0.85;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-json {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: var(--d3v-accent, #3B82F6);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-api {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: var(--d3v-success, #10B981);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-upload {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
    color: #8B5CF6;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-manual {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.2);
    color: var(--d3v-text-secondary, #475569);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-default {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--d3v-text-muted, #94A3B8);
    font-style: italic;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-schema-source-ai {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--d3v-warning, #F59E0B);
}

/** ====================================================================
 *  Added by shashank2104 on 04/18/2026 - DVFIV-2001
 *  AI suggestion preview flow — iOS-style progress overlay, accept/cancel
 *  bar, and bounce-in animation for newly-drawn AI edges.
 *  ==================================================================== */

/* Progress overlay — sits over the RelationshipBuilder panel while the AI
 * is inferring. Backdrop-blur + frosted glass card, in keeping with modern
 * iOS / macOS presentation sheets. */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.55);
    backdrop-filter: blur(6px) saturate(1.1);
    -webkit-backdrop-filter: blur(6px) saturate(1.1);
    animation: d3v-ma-ai-overlay-fade 0.25s ease-out;
}
@keyframes d3v-ma-ai-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-overlay-card {
    min-width: 340px;
    max-width: 480px;
    padding: 24px 28px;
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-lg, 14px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.06);
    text-align: center;
    animation: d3v-ma-ai-card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes d3v-ma-ai-card-pop {
    0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Three-dot pulsing spinner (iOS style) */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-spinner {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 14px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-spinner span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B5CF6, #3B82F6);
    animation: d3v-ma-ai-dot-pulse 1.1s infinite ease-in-out;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-spinner span:nth-child(2) { animation-delay: 0.15s; }
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-spinner span:nth-child(3) { animation-delay: 0.30s; }
@keyframes d3v-ma-ai-dot-pulse {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.45; }
    40%           { transform: scale(1);   opacity: 1; }
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0F172A);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-title i {
    color: #8B5CF6;
    font-size: 14px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-progress-msg {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    margin-bottom: 14px;
    min-height: 16px;
    transition: opacity 0.2s ease-out;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    overflow: hidden;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-progress-bar-fill {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #8B5CF6, #3B82F6, transparent);
    border-radius: 999px;
    animation: d3v-ma-ai-progress-slide 1.4s infinite ease-in-out;
}
@keyframes d3v-ma-ai-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Accept/Cancel toolbar — floats at the top of the schema panel after the
 * AI responds. Stays until the user decides. */
/* DVFIV-2006 — AI accept bar: two-row floating card (top: identity + actions,
 * bottom: hint + optional reasoning). Redesigned 04/20/2026 to replace the
 * single-row pill that collapsed awkwardly at narrow widths. */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 35;
    display: flex;
    flex-direction: column;
    min-width: 460px;
    max-width: calc(100% - 40px);
    background: var(--d3v-bg-primary, #fff);
    border-radius: var(--d3v-r-lg, 14px);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 -12px 36px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(15, 23, 42, 0.06);
    overflow: hidden;
    animation: d3v-ma-ai-bar-rise 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes d3v-ma-ai-bar-rise {
    0%   { opacity: 0; transform: translate(-50%, 18px) scale(0.94); }
    100% { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-row-main {
    padding: 10px 12px 10px 14px;
    justify-content: space-between;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-row-meta {
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.04), rgba(59, 130, 246, 0.04));
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    gap: 14px;
    min-height: 32px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    background: linear-gradient(135deg, #8B5CF6, #3B82F6);
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-badge i {
    font-size: 12px;
    opacity: 0.95;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-badge-count {
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-badge-label {
    opacity: 0.92;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-hint {
    display: block;
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-hint > i:first-child {
    color: #8B5CF6;
    font-size: 11px;
    margin-right: 6px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-hint i.fa-times-circle {
    color: var(--d3v-status-danger, #EF4444);
    margin: 0 2px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-reason {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--d3v-text-muted, #64748B);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    padding-left: 12px;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    flex: 0 1 auto;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-reason i {
    color: #8B5CF6;
    font-style: normal;
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 14px;
    transition: all var(--d3v-t-fast, 0.15s);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn i {
    font-size: 11px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn-default {
    background: var(--d3v-bg-secondary, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid transparent;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn-default:hover {
    background: var(--d3v-bg-tertiary, #E2E8F0);
    color: var(--d3v-text-primary, #0F172A);
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn-primary {
    background: linear-gradient(135deg, #8B5CF6, #3B82F6);
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn-primary:hover,
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn-primary:focus {
    background: linear-gradient(135deg, #7C3AED, #2563EB);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
    transform: translateY(-1px);
}
/* Narrow-viewport fallback: stack bottom row contents, hide button labels */
@media (max-width: 720px) {
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar {
        min-width: 0;
        width: calc(100% - 24px);
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-row-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-reason {
        padding-left: 0;
        border-left: none;
        max-width: 100%;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-actions .btn span {
        display: none;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-badge-label {
        display: none;
    }
}

/* AI edge persistent identity — ATTRIBUTE-based (not class-based) so it
 * survives RelationshipBuilder redraws on node drag. RB destroys + recreates
 * <path> elements inside requestAnimationFrame when the user moves a node,
 * which wipes any JS-applied class. The `data-edge-id` attribute is set
 * from `rbData.edges[i].id` ("ai-0", "ai-1", …) every redraw, so targeting
 * it directly means the violet+dashed look persists through drags.          */
.d3view-modelassembler-ontology-schema-view .rb-edge-path[data-edge-id^="ai-"] {
    stroke: #8B5CF6 !important;
    stroke-width: 2.2 !important;
    stroke-dasharray: 6 4 !important;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.45));
    animation: d3v-ma-ai-edge-dash 3s linear infinite;
}
/* First-draw one-shot — bounce-in + shake. Class is added right after the
 * initial render via _markAiEdges(), then naturally lost on subsequent
 * drag-triggered redraws so the animation does NOT replay every drag.
 * `--rb-ai-delay` is set per-edge in JS for the staggered iOS-style entry. */
.d3view-modelassembler-ontology-schema-view .rb-edge-path.rb-edge-ai-new {
    animation:
        d3v-ma-ai-edge-draw  0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--rb-ai-delay, 0ms) both,
        d3v-ma-ai-edge-shake 0.9s  ease-in-out var(--rb-ai-delay, 0ms),
        d3v-ma-ai-edge-dash  3s    linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes d3v-ma-ai-edge-draw {
    0%   { opacity: 0; stroke-width: 0.5; transform: scale(0.6); }
    60%  { opacity: 1; stroke-width: 3.2; transform: scale(1.08); }
    100% { opacity: 1; stroke-width: 2.2; transform: scale(1);   }
}
@keyframes d3v-ma-ai-edge-shake {
    0%, 100% { transform: translate(0,     0); }
    15%      { transform: translate(-1.5px, 1px); }
    30%      { transform: translate(2px,   -1px); }
    45%      { transform: translate(-2px,  -0.5px); }
    60%      { transform: translate(1.5px,  1.5px); }
    75%      { transform: translate(-1px,   0.5px); }
}
@keyframes d3v-ma-ai-edge-dash {
    to { stroke-dashoffset: -60; }
}

/* "AI suggest" header button — always present so the user can re-run
 * inference at any time (after accept/cancel, or even mid-session). */
.d3view-modelassembler-ontology-schema-view .js-ai-suggest {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #7C3AED;
    border-radius: var(--d3v-r-md, 8px);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--d3v-t-fast, 0.15s);
    cursor: pointer;
}
.d3view-modelassembler-ontology-schema-view .js-ai-suggest:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(59, 130, 246, 0.18));
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}
.d3view-modelassembler-ontology-schema-view .js-ai-suggest:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.d3view-modelassembler-ontology-schema-view .js-ai-suggest i {
    font-size: 11px;
}

/* Clear edges button — muted warning tint so it's visually distinct from
 * safer actions (AI suggest, Upload, Save) without being alarming. */
.d3view-modelassembler-ontology-schema-view .js-ontology-clear {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #DC2626;
    border-radius: var(--d3v-r-md, 8px);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--d3v-t-fast, 0.15s);
    cursor: pointer;
}
.d3view-modelassembler-ontology-schema-view .js-ontology-clear:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.18);
}
.d3view-modelassembler-ontology-schema-view .js-ontology-clear i {
    font-size: 11px;
}

/* ───────────────────────────────────────────────────────────────────────────
 * DVFIV-2006 — AI batch curation (drag-to-reconnect, dim active edges,
 * user-edit / user-add visual modifiers, live counter chips)
 * Added by shashank2104 on 2026-04-20
 * ─────────────────────────────────────────────────────────────────────────── */

/* Pre-existing active edges fade while a pending AI batch is on the canvas
 * so they don't compete visually with the bouncing AI suggestions. The
 * `[data-edge-id]:not([data-edge-id^="ai-"])` covers both `ai-edit-` and
 * `ai-user-` (both start with `ai-`) → those stay full opacity. */
.d3view-modelassembler-ontology-schema-view .rb-edge-path.rb-edge-dimmed-during-ai {
    opacity: 0.22;
    transition: opacity var(--d3v-t-fast, 0.18s) ease-out;
}
.d3view-modelassembler-ontology-schema-view .rb-edge-path.rb-edge-dimmed-during-ai:hover {
    opacity: 0.55;
}

/* User-touched AI edges (reconnected endpoints OR freshly drawn during the
 * pending session). Blue stroke replaces the AI purple — keeps the dashed +
 * glow look so the user-touched edges still read as "pending", just clearly
 * distinguished from the original AI suggestions. Order matters: this rule
 * follows `[data-edge-id^="ai-"]` so equal-specificity ties resolve to us. */
.d3view-modelassembler-ontology-schema-view .rb-edge-path[data-edge-id^="ai-edit-"],
.d3view-modelassembler-ontology-schema-view .rb-edge-path[data-edge-id^="ai-user-"] {
    stroke: var(--d3v-status-info, #3B82F6) !important;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.45));
}

/* Count chips inside the AI bar — small numeric pills next to the main badge.
 * Each variant uses a status-token tinted background so the meaning reads at
 * a glance: edited (blue) / removed (red) / added (green). */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: all var(--d3v-t-fast, 0.15s);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-chip-edited {
    background: rgba(59, 130, 246, 0.12);
    color: var(--d3v-status-info, #2563EB);
    border-color: rgba(59, 130, 246, 0.25);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-chip-removed {
    background: rgba(239, 68, 68, 0.10);
    color: var(--d3v-status-danger, #DC2626);
    border-color: rgba(239, 68, 68, 0.25);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-ai-bar-chip-added {
    background: rgba(16, 185, 129, 0.12);
    color: var(--d3v-status-success, #059669);
    border-color: rgba(16, 185, 129, 0.25);
}

/* Reconnect cue — added to the two endpoint ports of a selected ai-* edge.
 * RB sets the class only when allowReconnect is on, so other plugins that
 * use RelationshipBuilder don't see the pulse. The animation calls out the
 * exact targets the user should click next to start a reconnect. */
.d3view-modelassembler-ontology-schema-view .rb-port.rb-port-reconnectable {
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.35),
        0 0 0 7px rgba(139, 92, 246, 0.18);
    animation: d3v-ma-rb-port-pulse 1.4s ease-in-out infinite;
    cursor: pointer;
    z-index: 5;
    position: relative;
}
@keyframes d3v-ma-rb-port-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(139, 92, 246, 0.35),
            0 0 0 7px rgba(139, 92, 246, 0.18);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(139, 92, 246, 0.55),
            0 0 0 11px rgba(139, 92, 246, 0.10);
    }
}

/* ===================================================================
 * Added by shashank2104 on 2026-04-20 - DVFIV-2006
 * File Upload flow (Add Data Source sidebar + LS-DYNA two-step modal)
 * =================================================================== */

/* --- Dropzone in the Add Data Source sidebar --- */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-upload-wrap {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop {
    border: 2px dashed var(--d3v-border-subtle, #CBD5E1);
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-subtle, #F8FAFC);
    padding: 28px 16px;
    text-align: center;
    transition: var(--d3v-t-base, all 0.18s ease);
    cursor: pointer;
    outline: none;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop:hover,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop:focus {
    border-color: var(--d3v-accent-primary, #2563EB);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop.is-dragover {
    border-color: var(--d3v-accent-primary, #2563EB);
    background: rgba(37, 99, 235, 0.06);
    transform: scale(1.01);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop-icon {
    font-size: 28px;
    color: var(--d3v-accent-primary, #2563EB);
    margin-bottom: 6px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0F172A);
    margin-bottom: 2px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop-sub {
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748B);
    margin-bottom: 10px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-drop-browse {
    border-radius: var(--d3v-r-md, 8px);
    font-weight: 500;
}

/* --- Staged file list --- */
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d3v-text-tertiary, #94A3B8);
    padding: 4px 2px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--d3v-border-subtle, #E2E8F0);
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    transition: var(--d3v-t-base, all 0.18s ease);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-item:hover {
    border-color: var(--d3v-border-strong, #CBD5E1);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.08));
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-icon {
    color: var(--d3v-accent-primary, #2563EB);
    font-size: 16px;
    flex: 0 0 20px;
    text-align: center;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--d3v-text-primary, #0F172A);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-kind {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-subtle, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-size,
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-warn {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #94A3B8);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-warn {
    color: var(--d3v-status-warning, #D97706);
    font-weight: 600;
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-remove {
    color: var(--d3v-text-tertiary, #94A3B8);
    padding: 2px 6px;
    border: none;
    background: transparent;
    transition: var(--d3v-t-base, all 0.18s ease);
}
.d3view-modelassembler-ontology-add-sidebar .d3view-modelassembler-ontology-file-staged-remove:hover {
    color: var(--d3v-status-danger, #DC2626);
}

/* --- LS-DYNA two-step modal --- */
.d3view-modelassembler-ontology-file-upload-modal .modal-dialog { max-width: 90%; }
.d3view-modelassembler-ontology-file-upload-modal .modal-body {
    height: 80vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-stage {
    height: 100%;
    width: 100%;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-parser-mount {
    background: var(--d3v-bg-subtle, #F8FAFC);
}

/* --- Step 2: Combined vs Split choice --- */
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-body {
    padding: 20px 28px 16px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-intro h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0F172A);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-intro p {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--d3v-text-secondary, #64748B);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-grid-single {
    grid-template-columns: 1fr;
    max-width: 560px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-nosplit-hint {
    padding: 10px 14px;
    margin: 4px 0 16px;
    border-radius: var(--d3v-r-md, 8px);
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    line-height: 1.5;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-nosplit-hint i {
    color: var(--d3v-accent-primary, #2563EB);
    margin-right: 6px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 2px solid var(--d3v-border-subtle, #E2E8F0);
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: var(--d3v-t-base, all 0.18s ease);
    position: relative;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card:hover {
    border-color: var(--d3v-border-strong, #94A3B8);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.08));
    transform: translateY(-1px);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card.selected {
    border-color: var(--d3v-accent-primary, #2563EB);
    background: rgba(37, 99, 235, 0.04);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d3v-r-md, 10px);
    background: var(--d3v-bg-subtle, #F1F5F9);
    color: var(--d3v-accent-primary, #2563EB);
    font-size: 18px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card.selected .d3view-modelassembler-ontology-file-choice-card-icon {
    background: var(--d3v-accent-primary, #2563EB);
    color: #fff;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0F172A);
    margin-bottom: 2px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-sub {
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748B);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-hint {
    font-size: 11px;
    color: var(--d3v-text-tertiary, #94A3B8);
    margin-top: 6px;
    line-height: 1.4;
    word-break: break-all;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card-check {
    flex: 0 0 20px;
    color: var(--d3v-border-subtle, #CBD5E1);
    font-size: 18px;
    transition: var(--d3v-t-base, all 0.18s ease);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-card.selected .d3view-modelassembler-ontology-file-choice-card-check {
    color: var(--d3v-accent-primary, #2563EB);
}

/* --- Step 2 preview list --- */
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview h5 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d3v-text-tertiary, #94A3B8);
    margin: 8px 0 10px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-bg-subtle, #F8FAFC);
    font-size: 12px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--d3v-r-sm, 6px);
    background: var(--d3v-accent-primary, #2563EB);
    color: #fff;
    text-transform: uppercase;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-badge-neutral {
    background: var(--d3v-bg-subtle, #F1F5F9);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border-subtle, #CBD5E1);
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-name {
    flex: 1 1 auto;
    font-weight: 500;
    color: var(--d3v-text-primary, #0F172A);
    font-family: var(--d3v-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
}
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-choice-preview-count {
    color: var(--d3v-text-tertiary, #94A3B8);
    font-size: 11px;
}

/* --- Step 2 footer --- */
.d3view-modelassembler-ontology-file-upload-modal .d3view-modelassembler-ontology-file-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--d3v-border-subtle, #E2E8F0);
    background: var(--d3v-bg-primary, #FFFFFF);
    box-shadow: var(--d3v-sh-sm-up, 0 -1px 2px rgba(15, 23, 42, 0.04));
}

/** ====================================================================
 *  Added by shashank2104 on 2026-04-20 - DVFIV-2001
 *  Empty-state placeholder — shown in the RB container when the ontology
 *  is initialized with `ontologyDataSources: []`. Replaces the legacy
 *  `alert alert-info` with a modern card, primary CTA, and next-step hints.
 *  ==================================================================== */
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 320px;
    padding: 32px;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.06), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05), transparent 45%),
        var(--d3v-bg-secondary, #F8FAFC);
    animation: d3v-ma-ontology-empty-fade 0.32s ease-out;
}
@keyframes d3v-ma-ontology-empty-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 520px;
    width: 100%;
    padding: 40px 44px 36px;
    background: var(--d3v-bg-primary, #FFFFFF);
    border: 1px solid var(--d3v-border, #E2E8F0);
    border-radius: var(--d3v-r-lg, 14px);
    box-shadow: var(--d3v-sh-md, 0 10px 24px rgba(15, 23, 42, 0.08));
    text-align: center;
    transition: var(--d3v-t-smooth, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(139, 92, 246, 0.12));
    color: var(--d3v-accent, #3B82F6);
    font-size: 32px;
    box-shadow:
        0 0 0 6px rgba(59, 130, 246, 0.06),
        0 0 0 12px rgba(59, 130, 246, 0.03);
    animation: d3v-ma-ontology-empty-pulse 2.6s ease-in-out infinite;
}
@keyframes d3v-ma-ontology-empty-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px rgba(59, 130, 246, 0.06),
            0 0 0 12px rgba(59, 130, 246, 0.03);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(59, 130, 246, 0.10),
            0 0 0 20px rgba(59, 130, 246, 0.00);
    }
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--d3v-text-primary, #1E293B);
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-subtitle {
    margin: 0 0 24px;
    max-width: 400px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #475569);
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--d3v-r-md, 8px);
    transition: var(--d3v-t-fast, all 0.15s ease);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn i.fa {
    font-size: 14px;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn-primary {
    background: linear-gradient(135deg, var(--d3v-accent, #3B82F6), var(--d3v-accent-hover, #2563EB));
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.32);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn-default {
    background: var(--d3v-bg-primary, #FFFFFF);
    color: var(--d3v-text-primary, #1E293B);
    border: 1px solid var(--d3v-border-strong, #CBD5E1);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn-default:hover {
    background: var(--d3v-bg-hover, #E2E8F0);
    border-color: var(--d3v-border-strong, #CBD5E1);
    transform: translateY(-1px);
}

.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-hints {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--d3v-border, #E2E8F0);
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-hints li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--d3v-text-secondary, #475569);
    text-align: left;
}
.d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-hints li i.fa {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 12px;
    color: var(--d3v-accent, #3B82F6);
    opacity: 0.85;
}

@media (max-width: 540px) {
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-card {
        padding: 28px 20px 24px;
    }
    .d3view-modelassembler-ontology-schema-view .d3view-modelassembler-ontology-empty-actions .btn {
        width: 100%;
    }
}

/* ======================================================================
 * Modern Empty States (per-section card + project-empty landing)
 * Added by shashank2104 on 05/05/2026 - DVFIV - Replaces legacy
 * "No system models available" stub with a modern card pattern, plus a
 * full landing takeover when the project has no entities yet.
 * Scoped under .d3view-modelassembler. Uses --d3v-* foundation tokens.
 * ====================================================================== */

/* ---- Per-section empty card (used by dashboard-table-no-data-tpl) ---- */
.d3view-modelassembler .d3view-modelassembler-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 28px 52px;
    margin: 16px auto;
    max-width: 520px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 14px);
    box-shadow: var(--d3v-sh-xs, 0 1px 3px rgba(15, 23, 42, 0.05));
}
.d3view-modelassembler .d3view-modelassembler-empty-icon-tile {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
    background: rgba(59, 130, 246, 0.10);
    color: var(--d3v-accent, #3b82f6);
}
.d3view-modelassembler .d3view-modelassembler-empty-icon-sm    { background: rgba(59, 130, 246, 0.10);  color: #3b82f6; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-am    { background: rgba(16, 185, 129, 0.10); color: #10b981; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-ds    { background: rgba(99, 102, 241, 0.10); color: #6366f1; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-fl    { background: rgba(100, 116, 139, 0.12); color: #475569; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-sim   { background: rgba(253, 126, 20, 0.12); color: #fd7e14; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-lc    { background: rgba(32, 201, 151, 0.12); color: #20c997; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-pt    { background: rgba(232, 62, 140, 0.12); color: #e83e8c; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-db    { background: rgba(23, 162, 184, 0.12); color: #17a2b8; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-search{ background: rgba(139, 92, 246, 0.10); color: #8b5cf6; }
.d3view-modelassembler .d3view-modelassembler-empty-icon-error { background: rgba(239, 68, 68, 0.10);  color: #ef4444; }
.d3view-modelassembler .d3view-modelassembler-empty-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-modelassembler .d3view-modelassembler-empty-sub {
    margin: 0 0 22px;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-modelassembler .d3view-modelassembler-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    border: none;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.d3view-modelassembler .d3view-modelassembler-empty-cta:hover,
.d3view-modelassembler .d3view-modelassembler-empty-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.35);
}
.d3view-modelassembler .d3view-modelassembler-empty-cta i { font-size: 14px; }
.d3view-modelassembler .d3view-modelassembler-empty-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--d3v-bg-subtle, #f3f4f6);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: var(--d3v-r-md, 10px);
    transition: background 160ms ease, color 160ms ease;
}
.d3view-modelassembler .d3view-modelassembler-empty-cta-secondary:hover,
.d3view-modelassembler .d3view-modelassembler-empty-cta-secondary:focus {
    background: var(--d3v-bg-muted, #e5e7eb);
    color: var(--d3v-text-primary, #0f172a);
}

/* ---- Full project-empty takeover: hide the dashboard chrome (KPI strip + filter toolbar) AND the global app shell (top header + left nav rail) so the landing owns the whole viewport ---- */
/* Per-element marker class — kept for the initial-render path. */
.d3view-modelassembler .d3view-modelassembler-dashboard-header-hidden {
    display: none !important;
}
/* DESCENDANT-scoped rules under `.d3view-modelassembler-shell-hidden` — these survive any re-render of the KPI strip or toolbar by IndexView/DashboardTableView, because the rule fires from the takeover class on the ancestor (main container), not from a class on the dynamic element itself. */
.d3view-modelassembler .d3view-modelassembler-main-container.d3view-modelassembler-shell-hidden .d3view-modelassembler-dashboard-header,
.d3view-modelassembler .d3view-modelassembler-main-container.d3view-modelassembler-shell-hidden .d3view-modelassembler-dashboard-toolbar {
    display: none !important;
}
.d3view-modelassembler .d3view-modelassembler-dashboard-table-wrapper.d3view-modelassembler-project-empty-takeover > .d3view-modelassembler-dashboard-toolbar {
    display: none !important;
}
/* Hide the top header bar (project select + tabmanager + action buttons) when the landing is taking over */
.d3view-modelassembler .d3view-modelassembler-main-container.d3view-modelassembler-shell-hidden > .d3view-modelassembler-header {
    display: none !important;
}
/* Hide the left navigation rail (Home/Graph/Data/Actions/Ontology/Logs/Tools/Settings) when the landing is taking over */
.d3view-modelassembler .d3view-modelassembler-main-container.d3view-modelassembler-shell-hidden > .plugin-tabs > .pl-tabs-vertical-outer {
    display: none !important;
}

/* ---- Full project-empty landing page ---- */
.d3view-modelassembler .d3view-modelassembler-project-empty {
    overflow-y: auto;
    background:
        radial-gradient(ellipse 620px 360px at 12% -8%,  rgba(59, 130, 246, 0.07), transparent 55%),
        radial-gradient(ellipse 520px 320px at 95% 110%, rgba(139, 92, 246, 0.05), transparent 60%),
        transparent;
}

/* Top bar: project chip (left) + corner kebab (right) — only visible during takeover */
.d3view-modelassembler .d3view-modelassembler-project-empty-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    flex-shrink: 0;
}
/* Wrap that anchors the chip + its own hidden select2 input. The input is positioned at the bottom edge of the chip so select2's dropdown opens directly below the chip. */
.d3view-modelassembler .d3view-modelassembler-project-chip-wrap {
    position: relative;
    display: inline-block;
}
.d3view-modelassembler .d3view-modelassembler-project-chip-wrap .d3view-modelassembler-empty-project-select {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}
/* The select2-container the v3 widget creates next to our hidden input — keep it invisible; we render our own chip button. */
.d3view-modelassembler .d3view-modelassembler-project-chip-wrap .select2-container {
    position: absolute !important;
    left: 0;
    bottom: 0;
    width: 100% !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}
.d3view-modelassembler .d3view-modelassembler-project-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    outline: none;
    line-height: 1;
}
.d3view-modelassembler .d3view-modelassembler-project-chip:hover,
.d3view-modelassembler .d3view-modelassembler-project-chip:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.d3view-modelassembler .d3view-modelassembler-project-chip-icon {
    color: var(--d3v-accent, #3b82f6);
    font-size: 13px;
}
.d3view-modelassembler .d3view-modelassembler-project-chip-label {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-modelassembler .d3view-modelassembler-project-chip-caret {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 11px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-migrate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
    line-height: 1;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-migrate-btn:hover,
.d3view-modelassembler .d3view-modelassembler-project-empty-migrate-btn:focus-visible {
    transform: translateY(-1px);
    color: var(--d3v-accent, #3b82f6);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    outline: none;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-migrate-btn i { font-size: 13px; }

.d3view-modelassembler .d3view-modelassembler-project-empty-wrap {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 20px 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Hero card */
.d3view-modelassembler .d3view-modelassembler-project-empty-hero {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 32px;
    align-items: center;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 14px);
    padding: 28px 30px;
    box-shadow: var(--d3v-sh-xs, 0 1px 3px rgba(15, 23, 42, 0.05));
}
.d3view-modelassembler .d3view-modelassembler-project-empty-preview {
    height: 220px;
    border-radius: var(--d3v-r-md, 10px);
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(139, 92, 246, 0.04)),
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(15, 23, 42, 0.04) 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, rgba(15, 23, 42, 0.04) 19px 20px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
}
.d3view-modelassembler .d3view-modelassembler-mini-edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: d3v-ma-edge-pulse 3.2s ease-in-out infinite;
}
@keyframes d3v-ma-edge-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}
.d3view-modelassembler .d3view-modelassembler-mini-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.d3view-modelassembler .d3view-modelassembler-mini-node i { font-size: 12px; color: var(--d3v-accent, #3b82f6); }
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-ds {
    top: 22px; left: 18px;
    animation: d3v-ma-node-float 3.8s ease-in-out infinite;
}
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-ds i { color: #6366f1; }
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-am {
    top: 142px; left: 18px;
    animation: d3v-ma-node-float 3.8s ease-in-out infinite 0.6s;
}
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-am i { color: #10b981; }
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-sm {
    top: 80px; right: 16px;
    animation: d3v-ma-node-float 3.8s ease-in-out infinite 1.2s;
}
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-sm i { color: #3b82f6; }
@keyframes d3v-ma-node-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-hint {
    top: 92px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border-color: transparent;
    font-size: 10px;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
    padding: 4px 8px;
}
.d3view-modelassembler .d3view-modelassembler-mini-node.mini-node-hint i { color: #fff; }

.d3view-modelassembler .d3view-modelassembler-project-empty-copy { text-align: left; }
.d3view-modelassembler .d3view-modelassembler-project-empty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-eyebrow i { font-size: 10px; }
.d3view-modelassembler .d3view-modelassembler-project-empty-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--d3v-text-primary, #0f172a);
    margin: 0 0 10px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-title-accent {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--d3v-text-secondary, #475569);
    margin: 0 0 18px;
    max-width: 520px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-desc strong {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 600;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-cta {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-cta:hover,
.d3view-modelassembler .d3view-modelassembler-project-empty-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.35);
}
.d3view-modelassembler .d3view-modelassembler-project-empty-cta i { font-size: 15px; }
.d3view-modelassembler .d3view-modelassembler-project-empty-learn {
    color: var(--d3v-text-secondary, #64748b);
    font-size: 12.5px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--d3v-r-md, 10px);
    transition: color 160ms ease, background 160ms ease;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-learn:hover,
.d3view-modelassembler .d3view-modelassembler-project-empty-learn:focus {
    color: var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
    text-decoration: none;
}

/* Quick-start tile grid */
.d3view-modelassembler .d3view-modelassembler-project-empty-quickstart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    outline: none;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile:hover,
.d3view-modelassembler .d3view-modelassembler-project-empty-tile:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-icon.empty-ico-ds { background: rgba(99, 102, 241, 0.10); color: #6366f1; }
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-icon.empty-ico-sm { background: rgba(59, 130, 246, 0.10); color: #3b82f6; }
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-icon.empty-ico-am { background: rgba(16, 185, 129, 0.10); color: #10b981; }
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-icon.empty-ico-lc { background: rgba(32, 201, 151, 0.12); color: #20c997; }
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-body { flex: 1; min-width: 0; text-align: left; }
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 2px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-sub {
    font-size: 12px;
    color: var(--d3v-text-muted, #64748b);
    line-height: 1.4;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile-arrow {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    transition: transform 180ms ease, color 180ms ease;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-tile:hover .d3view-modelassembler-project-empty-tile-arrow {
    transform: translateX(3px);
    color: var(--d3v-accent, #3b82f6);
}

/* 3-step starter strip */
.d3view-modelassembler .d3view-modelassembler-project-empty-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border: 1px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.1));
    border-radius: var(--d3v-r-md, 10px);
    font-size: 12.5px;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-modelassembler .d3view-modelassembler-project-empty-step strong {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 600;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-project-empty-step-sep {
    color: var(--d3v-text-muted, #cbd5e1);
    font-size: 10px;
}

/* Responsive: stack hero on narrow widths */
@media (max-width: 820px) {
    .d3view-modelassembler .d3view-modelassembler-project-empty-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .d3view-modelassembler .d3view-modelassembler-project-empty-preview { height: 180px; }
    .d3view-modelassembler .d3view-modelassembler-project-empty-title { font-size: 22px; }
}
@media (max-width: 540px) {
    .d3view-modelassembler .d3view-modelassembler-empty-card { padding: 40px 20px 36px; }
    .d3view-modelassembler .d3view-modelassembler-empty-icon-tile { width: 56px; height: 56px; font-size: 22px; }
}

/** Added by shashank2104 on 05/05/2026 - DVFIV-2028 - Premium type-filter dropdown (replaces legacy All ▼) **/
.d3view-modelassembler .d3view-modelassembler-search-type-dd {
    position: relative;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    transition: background-color 120ms cubic-bezier(.2,.8,.2,1), color 120ms cubic-bezier(.2,.8,.2,1);
    box-shadow: none;
    outline: none;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger:hover {
    background: #eef2f7;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger.is-open {
    background: #dbeafe;
    color: #1d4ed8;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger .d3view-modelassembler-search-type-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-lead-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge {
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-DS  { background: #2563eb; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-SM  { background: #6366f1; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-SMS { background: #d97706; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-AM  { background: #059669; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-F   { background: #64748b; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-SIM { background: #fd7e14; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-LC  { background: #14b8a6; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-PT  { background: #e83e8c; }
.d3view-modelassembler .d3view-modelassembler-pdd-lead-badge.tag-DB  { background: #0ea5e9; }
.d3view-modelassembler .d3view-modelassembler-pdd-lab {
    font-weight: 600;
    color: #0f172a;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger.is-selected .d3view-modelassembler-pdd-lab {
    color: #4338ca;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger.is-selected {
    background: #ede9fe;
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger.is-selected:hover {
    background: #ddd6fe;
}
.d3view-modelassembler .d3view-modelassembler-pdd-total {
    margin-left: 2px;
    background: #eef2f7;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.d3view-modelassembler .d3view-modelassembler-pdd-caret {
    color: #94a3b8;
    font-size: 10px;
    margin-left: 2px;
    transition: transform 120ms cubic-bezier(.2,.8,.2,1), color 120ms cubic-bezier(.2,.8,.2,1);
}
.d3view-modelassembler .d3view-modelassembler-pdd-trigger.is-open .d3view-modelassembler-pdd-caret {
    transform: rotate(180deg);
    color: #2563eb;
}

/* Menu */
.d3view-modelassembler .d3view-modelassembler-pdd-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 12px 32px -8px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.08);
    padding: 6px;
    z-index: 1080;
    display: none;
}
.d3view-modelassembler .d3view-modelassembler-pdd-menu.is-open {
    display: block;
    animation: pdd-fade-in 160ms cubic-bezier(.2,.8,.2,1);
}
@keyframes pdd-fade-in {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.d3view-modelassembler .d3view-modelassembler-pdd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
    margin: -6px -6px 6px;
    border-radius: 10px 10px 0 0;
    background: #f8fafc;
}
.d3view-modelassembler .d3view-modelassembler-pdd-search i {
    color: #94a3b8;
    font-size: 12px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1;
    font-size: 13px;
    color: #0f172a;
    min-width: 0;
    box-shadow: none;
    padding: 0;
}
.d3view-modelassembler .d3view-modelassembler-pdd-search input::placeholder {
    color: #94a3b8;
}

.d3view-modelassembler .d3view-modelassembler-pdd-section {
    padding: 8px 10px 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.d3view-modelassembler .d3view-modelassembler-pdd-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 4px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    padding-right: 36px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 120ms cubic-bezier(.2,.8,.2,1);
    text-decoration: none;
    color: inherit;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item:hover,
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-focused {
    background: #f8fafc;
    text-decoration: none;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-active {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-active .d3view-modelassembler-pdd-item-lab,
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-active .d3view-modelassembler-pdd-item-cnt {
    color: #1d4ed8;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-active .d3view-modelassembler-pdd-item-lab {
    font-weight: 600;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-active::after {
    content: '\f00c';
    font-family: 'FontAwesome';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #2563eb;
    font-size: 11px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-zero {
    cursor: not-allowed;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-zero .d3view-modelassembler-pdd-item-lab,
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-zero .d3view-modelassembler-pdd-item-cnt {
    color: #94a3b8;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-zero .d3view-modelassembler-pdd-item-ico { opacity: .55; }
.d3view-modelassembler .d3view-modelassembler-pdd-item.is-hidden { display: none; }

.d3view-modelassembler .d3view-modelassembler-pdd-item-ico {
    width: 26px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item-ico .label {
    min-width: 26px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item-ico .fa { color: #2563eb; }
.d3view-modelassembler .d3view-modelassembler-pdd-item-lab {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item-sub {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
}
.d3view-modelassembler .d3view-modelassembler-pdd-item-cnt {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.d3view-modelassembler .d3view-modelassembler-pdd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px 6px;
    border-top: 1px solid #e2e8f0;
    margin: 6px -6px -6px;
    border-radius: 0 0 10px 10px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 11px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-kbd-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-pdd-kbd {
    font-family: SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    padding: 1px 5px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    color: #475569;
}
.d3view-modelassembler .d3view-modelassembler-pdd-clear {
    color: #1d4ed8;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.d3view-modelassembler .d3view-modelassembler-pdd-clear:hover { text-decoration: underline; }

.d3view-modelassembler .d3view-modelassembler-pdd-empty {
    padding: 18px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}
/** R0-3372 - Simulation association modal styles **/
.d3view-modelassembler-sim-assoc-modal { max-height: 400px; overflow-y: auto; }
.d3view-modelassembler-sim-assoc-item { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #eee; cursor: pointer; }
.d3view-modelassembler-sim-assoc-item:hover { background: #f5f5f5; }
.d3view-modelassembler-sim-assoc-item .status-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.d3view-modelassembler-sim-assoc-item .sim-name { flex: 1; }
.d3view-modelassembler-sim-assoc-item .sim-date { color: #999; font-size: 12px; }

/* -----------------------------------------------------------------------
 * Loadcase Library page — Slice 1 (2026-06-13)
 * All rules are parent-scoped under .d3view-modelassembler, consistent
 * with sibling .d3view-modelassembler-loadcase-card rules at line 231.
 * ----------------------------------------------------------------------- */

/* Page header bar */
.d3view-modelassembler .d3view-modelassembler-lc-library-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--d3v-border-muted, #e0e0e0);
    background: var(--d3v-bg-primary, #fff);
    flex-shrink: 0;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-title {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--d3v-text-primary, #333);
}
.d3view-modelassembler .d3view-modelassembler-lc-library-subtitle {
    margin: 0;
    font-size: 12px;
    color: var(--d3v-text-secondary, #888);
}
.d3view-modelassembler .d3view-modelassembler-lc-library-filter {
    width: 260px;
    font-size: 13px;
}

/* Loading / error states */
.d3view-modelassembler .d3view-modelassembler-lc-library-loading {
    padding: 40px;
    text-align: center;
    color: var(--d3v-text-secondary, #888);
    font-size: 14px;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-error {
    margin: 20px;
    padding: 12px 16px;
    background: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: var(--d3v-r-sm, 4px);
    color: #721c24;
    font-size: 13px;
}

/* Card grid — reuses the same auto-fill grid as LoadCasesView */
.d3view-modelassembler .d3view-modelassembler-lc-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
    overflow-y: auto;
    align-content: start;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-empty {
    grid-column: 1 / -1;
    padding: 40px;
    color: var(--d3v-text-muted, #aaa);
}

/* Library card — extends existing .d3view-modelassembler-loadcase-card */
.d3view-modelassembler .d3view-modelassembler-lc-library-card {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-muted, #dde1e6);
    border-radius: var(--d3v-r-md, 6px);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card:hover {
    box-shadow: var(--d3v-sh-md, 0 3px 10px rgba(0,0,0,0.09));
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--d3v-border-subtle, #f0f0f0);
    gap: 8px;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--d3v-text-primary, #222);
    flex: 1;
    word-break: break-word;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-badge {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-body {
    padding: 10px 14px;
    flex: 1;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #666);
    margin-bottom: 4px;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-meta i {
    width: 14px;
    text-align: center;
    color: var(--d3v-text-muted, #aaa);
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-desc {
    font-size: 12px;
    color: var(--d3v-text-secondary, #888);
    margin: 8px 0 0;
    line-height: 1.5;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-card-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--d3v-border-subtle, #f0f0f0);
    display: flex;
    justify-content: flex-end;
}

/* Add-to-project dialog */
.d3view-modelassembler .d3view-modelassembler-lc-library-add-form {
    padding: 4px 0;
}
.d3view-modelassembler .d3view-modelassembler-lc-library-add-summary {
    padding: 10px 14px;
    background: var(--d3v-bg-subtle, #f8f9fa);
    border: 1px solid var(--d3v-border-muted, #e9ecef);
    border-radius: var(--d3v-r-sm, 4px);
    margin-bottom: 16px;
}
.d3view-modelassembler-smi-header,
.d3view-modelassembler-database-header.d3view-modelassembler-smi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    flex-shrink: 0;
}

.d3view-modelassembler-smi-header-left,
.d3view-modelassembler-database-header-left.d3view-modelassembler-smi-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.d3view-modelassembler-smi-header-icon,
.d3view-modelassembler-database-header-icon.d3view-modelassembler-smi-header-icon {
    flex-shrink: 0;
    color: #333;
}

.d3view-modelassembler-smi-header-title,
.d3view-modelassembler-database-header-title.d3view-modelassembler-smi-header-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-modelassembler-smi-header-right,
.d3view-modelassembler-database-header-right.d3view-modelassembler-smi-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.d3view-modelassembler-smi-body,
.d3view-modelassembler-database-body.d3view-modelassembler-smi-body {
    min-height: 0;
    overflow: hidden;
}

.d3view-modelassembler-smi-tree-panel {
    width: 280px;
    min-width: 150px;
    max-width: 500px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    background: #fff;
    overflow: hidden;
}

.d3view-modelassembler-smi-tree-search {
    flex-shrink: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fafafa;
}

.d3view-modelassembler-smi-tree-search .fa-search {
    color: #999;
    font-size: 12px;
}

.d3view-modelassembler-smi-tree-search-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
}

.d3view-modelassembler-smi-tree-search-input:focus {
    outline: none;
    border-color: #428bca;
}

.d3view-modelassembler-smi-tree-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.d3view-modelassembler-smi-tree {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.d3view-modelassembler-smi-tree-node {
    margin: 0;
    padding: 0;
    border: none;
}

.d3view-modelassembler-smi-tree-node-content {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
    min-height: 32px;
}

.d3view-modelassembler-smi-tree-node-content:hover {
    background: #f5f5f5;
}

.d3view-modelassembler-smi-tree-node.active .d3view-modelassembler-smi-tree-node-content {
    background: #428bca;
    color: #fff;
    border-left-color: #357ebd;
}

.d3view-modelassembler-smi-tree-node.active .d3view-modelassembler-smi-tree-node-content .d3view-modelassembler-smi-tree-node-icon {
    color: #fff;
}

.d3view-modelassembler-smi-tree-node-icon {
    flex-shrink: 0;
    width: 20px;
    margin-right: 8px;
    color: #666;
    text-align: center;
}

.d3view-modelassembler-smi-tree-node-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.d3view-modelassembler-smi-resize-handle {
    width: 6px;
    flex-shrink: 0;
    cursor: col-resize;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d3view-modelassembler-smi-resize-handle:hover,
.d3view-modelassembler-smi-resize-handle:active {
    background: #e9ecef;
}

.d3view-modelassembler-smi-resize-handle-bar {
    width: 2px;
    height: 24px;
    background: #dee2e6;
    border-radius: 1px;
}

.d3view-modelassembler-smi-content-panel {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.d3view-modelassembler-smi-content-header {
    flex-shrink: 0;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.d3view-modelassembler-smi-content-breadcrumb {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 13px;
}

.d3view-modelassembler-smi-content-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.d3view-modelassembler-smi-content-body {
    flex: 1;
    overflow: auto;
    padding: 20px;
    min-height: 0;
    background: #fff;
}

.d3view-modelassembler-smi-tree-node.search-hidden {
    display: none;
}

/**
 * DVFIV-1920 - SMI About card-style layout (stat cards + sectional panels)
 * Shared by SystemModelItemView, AssemblyItemView, DatabaseItemView About content.
 */
.d3view-modelassembler-smi-about,
.d3view-modelassembler-database-about.d3view-modelassembler-smi-about {
    padding: 0;
}

.d3view-modelassembler-smi-about-header,
.d3view-modelassembler-database-about-header.d3view-modelassembler-smi-about-header {
    margin-bottom: 20px;
}

.d3view-modelassembler-smi-about-title,
.d3view-modelassembler-database-about-title.d3view-modelassembler-smi-about-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.d3view-modelassembler-smi-about-title .fa,
.d3view-modelassembler-database-about-title.d3view-modelassembler-smi-about-title .fa {
    margin-right: 8px;
    color: #428bca;
}

.d3view-modelassembler-smi-about-desc,
.d3view-modelassembler-database-about-desc.d3view-modelassembler-smi-about-desc {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 13px;
}

.d3view-modelassembler-smi-about-meta,
.d3view-modelassembler-database-about-meta.d3view-modelassembler-smi-about-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 12px;
    color: #777;
}

.d3view-modelassembler-smi-about-meta span,
.d3view-modelassembler-database-about-meta.d3view-modelassembler-smi-about-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.d3view-modelassembler-smi-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

.d3view-modelassembler-smi-stat-card {
    flex: 1;
    min-width: 120px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.d3view-modelassembler-smi-stat-icon {
    margin-bottom: 8px;
    font-size: 24px;
    color: #428bca;
}

.d3view-modelassembler-smi-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.d3view-modelassembler-smi-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}

.d3view-modelassembler-smi-stat-value.d3view-modelassembler-smi-stat-value-sm {
    font-size: 14px;
}

.d3view-modelassembler-smi-about-panels,
.d3view-modelassembler-database-about-panels.d3view-modelassembler-smi-about-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.d3view-modelassembler-smi-about-panel,
.d3view-modelassembler-database-about-panel.d3view-modelassembler-smi-about-panel {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.d3view-modelassembler-smi-about-panel-header,
.d3view-modelassembler-database-about-panel-header.d3view-modelassembler-smi-about-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 13px;
}

.d3view-modelassembler-smi-about-panel-header span:first-child,
.d3view-modelassembler-database-about-panel-header.d3view-modelassembler-smi-about-panel-header span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.d3view-modelassembler-smi-about-panel-header .fa,
.d3view-modelassembler-database-about-panel-header.d3view-modelassembler-smi-about-panel-header .fa {
    color: #428bca;
}

.d3view-modelassembler-smi-about-panel-body,
.d3view-modelassembler-database-about-panel-body.d3view-modelassembler-smi-about-panel-body {
    padding: 12px 14px;
    font-size: 13px;
}

.d3view-modelassembler-smi-about-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.d3view-modelassembler-smi-about-list li {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* /javascripts/plugins_src/ontology/ontology.css */
/** DVFIV-2007 - Flash-highlight animation for a newly-created ontology row **/
.d3view-ontology-app .d3view-ontology-home-table tr.is-newly-added {
    animation: d3view-ontology-row-flash 2.2s ease-out;
    position: relative;
}
@keyframes d3view-ontology-row-flash {
    0%   { background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.18)); box-shadow: inset 3px 0 0 var(--d3v-accent, #3b82f6); }
    70%  { background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.08)); box-shadow: inset 3px 0 0 var(--d3v-accent, #3b82f6); }
    100% { background: transparent; box-shadow: none; }
}


.d3view-ontology-app .d3view-ontology-panel[data-tab-id="home-nav"] { padding: 20px 24px; }
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="data-nav"] { padding: 20px 24px; }
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="graph-nav"],
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="actions-nav"],
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="logs-nav"],
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="tools-nav"],
.d3view-ontology-app .d3view-ontology-panel[data-tab-id="settings-nav"] { padding: 20px 24px; }

/* Empty state */
.d3view-ontology-app .d3view-ontology-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
}
.d3view-ontology-app .d3view-ontology-empty-inner {
    text-align: center;
    max-width: 520px;
    padding: 32px 24px;
    color: #555;
}
.d3view-ontology-app .d3view-ontology-empty-icon {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: #f0f4fa;
    color: #5b7fb1;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}
.d3view-ontology-app .d3view-ontology-empty-icon i { font-size: 32px; }
.d3view-ontology-app .d3view-ontology-empty-title {
    font-size: 18px; font-weight: 600;
    margin: 0 0 8px;
    color: #333;
}
.d3view-ontology-app .d3view-ontology-empty-desc {
    font-size: 13px; line-height: 1.55;
    margin: 0 0 18px;
}
.d3view-ontology-app .d3view-ontology-empty-hint {
    margin-top: 22px;
    padding: 10px 14px;
    border-radius: 6px;
    background: #f8f9fa;
    color: #666;
    font-size: 11px;
    line-height: 1.55;
}
.d3view-ontology-app .d3view-ontology-empty-hint code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    color: #333;
    border: 1px solid #e2e8f0;
}

/* ======================================================================
 * Empty state v2 — richer "workspace preview" layout.
 * Distinct from the full landing takeover (which hides all chrome) —
 * this sits inside the regular Home panel and keeps top bar + left nav.
 * Schematic ER-preview + hero copy + 3 quick-start tiles + stepper.
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-empty-v2 {
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 620px 360px at 15% -5%,  rgba(59, 130, 246, 0.07), transparent 55%),
        radial-gradient(ellipse 520px 320px at 95% 110%, rgba(139, 92, 246, 0.05), transparent 60%),
        transparent;
}
.d3view-ontology-app .d3view-ontology-empty-v2-wrap {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---- Hero block: preview + copy, side-by-side ---- */
.d3view-ontology-app .d3view-ontology-empty-v2-hero {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 32px;
    align-items: center;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 14px);
    padding: 28px 32px;
    box-shadow: var(--d3v-sh-xs, 0 1px 3px rgba(15, 23, 42, 0.05));
}

/* Schematic preview */
.d3view-ontology-app .d3view-ontology-empty-v2-preview {
    height: 220px;
    border-radius: var(--d3v-r-md, 10px);
    background:
        linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(139, 92, 246, 0.04)),
        repeating-linear-gradient(0deg, transparent 0 19px, rgba(15, 23, 42, 0.04) 19px 20px),
        repeating-linear-gradient(90deg, transparent 0 19px, rgba(15, 23, 42, 0.04) 19px 20px);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
}
.d3view-ontology-app .d3v-ont-mini-graph {
    position: absolute;
    inset: 0;
}
.d3view-ontology-app .d3v-ont-mini-graph-edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: d3v-ont-edge-pulse 3.2s ease-in-out infinite;
}
@keyframes d3v-ont-edge-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
.d3view-ontology-app .d3v-ont-mini-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.d3view-ontology-app .d3v-ont-mini-node i {
    color: var(--d3v-accent, #3b82f6);
    font-size: 12px;
}
.d3view-ontology-app .d3v-ont-mini-node.is-a {
    top: 22px; left: 18px;
    animation: d3v-ont-node-float 3.8s ease-in-out infinite;
}
.d3view-ontology-app .d3v-ont-mini-node.is-b {
    top: 138px; left: 18px;
    animation: d3v-ont-node-float 3.8s ease-in-out infinite 0.6s;
}
.d3view-ontology-app .d3v-ont-mini-node.is-c {
    top: 80px; right: 16px;
    animation: d3v-ont-node-float 3.8s ease-in-out infinite 1.2s;
}
@keyframes d3v-ont-node-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.d3view-ontology-app .d3v-ont-mini-node.is-hint {
    top: 92px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    border-color: transparent;
    font-size: 10px;
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.35);
    padding: 4px 8px;
}
.d3view-ontology-app .d3v-ont-mini-node.is-hint i { color: #fff; }

/* Hero copy */
.d3view-ontology-app .d3view-ontology-empty-v2-copy {
    text-align: left;
}
.d3view-ontology-app .d3view-ontology-empty-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.08);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-eyebrow i { font-size: 10px; }
.d3view-ontology-app .d3view-ontology-empty-v2-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--d3v-text-primary, #0f172a);
    margin: 0 0 10px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-title-accent {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.d3view-ontology-app .d3view-ontology-empty-v2-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--d3v-text-secondary, #475569);
    margin: 0 0 18px;
    max-width: 480px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-cta {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-cta:hover,
.d3view-ontology-app .d3view-ontology-empty-v2-cta:focus {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.35);
}
.d3view-ontology-app .d3view-ontology-empty-v2-cta i { font-size: 15px; }
.d3view-ontology-app .d3view-ontology-empty-v2-learn {
    color: var(--d3v-text-muted, #64748b);
    font-size: 12.5px;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--d3v-r-md, 10px);
    transition: color 160ms ease, background 160ms ease;
}
.d3view-ontology-app .d3view-ontology-empty-v2-learn:hover,
.d3view-ontology-app .d3view-ontology-empty-v2-learn:focus {
    color: var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.06);
    text-decoration: none;
}

/* ---- Quick-start tiles ---- */
.d3view-ontology-app .d3view-ontology-empty-v2-quickstart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-md, 10px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    outline: none;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile:hover,
.d3view-ontology-app .d3view-ontology-empty-v2-tile:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-icon.tile-ico-blank {
    background: rgba(59, 130, 246, 0.1); color: #3b82f6;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-icon.tile-ico-import {
    background: rgba(139, 92, 246, 0.1); color: #8b5cf6;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-icon.tile-ico-browse {
    background: rgba(16, 185, 129, 0.1); color: #10b981;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-body { flex: 1; min-width: 0; }
.d3view-ontology-app .d3view-ontology-empty-v2-tile-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 2px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-sub {
    font-size: 12px;
    color: var(--d3v-text-muted, #64748b);
    line-height: 1.4;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-sub code {
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile-arrow {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
    transition: transform 180ms ease, color 180ms ease;
}
.d3view-ontology-app .d3view-ontology-empty-v2-tile:hover .d3view-ontology-empty-v2-tile-arrow {
    transform: translateX(3px);
    color: var(--d3v-accent, #3b82f6);
}

/* ---- 3-step mini-stepper ---- */
.d3view-ontology-app .d3view-ontology-empty-v2-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    border: 1px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.1));
    border-radius: var(--d3v-r-md, 10px);
    font-size: 12.5px;
}
.d3view-ontology-app .d3view-ontology-empty-v2-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-ontology-app .d3view-ontology-empty-v2-step strong {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 600;
}
.d3view-ontology-app .d3view-ontology-empty-v2-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-empty-v2-step-sep {
    color: var(--d3v-text-muted, #cbd5e1);
    font-size: 10px;
}

/* ---- Footer hint ---- */
.d3view-ontology-app .d3view-ontology-empty-v2-hint {
    text-align: center;
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 11.5px;
    line-height: 1.55;
}
.d3view-ontology-app .d3view-ontology-empty-v2-hint code {
    background: rgba(15, 23, 42, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 11px;
}

/* Responsive: stack hero on narrow screens */
@media (max-width: 820px) {
    .d3view-ontology-app .d3view-ontology-empty-v2-hero {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .d3view-ontology-app .d3view-ontology-empty-v2-preview { height: 180px; }
    .d3view-ontology-app .d3view-ontology-empty-v2-title { font-size: 22px; }
}

/* Saved list */
.d3view-ontology-app .d3view-ontology-home-page { padding: 0; }
.d3view-ontology-app .d3view-ontology-home-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.d3view-ontology-app .d3view-ontology-home-heading h2 {
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.d3view-ontology-app .d3view-ontology-home-count {
    font-size: 12px; color: #888;
}
.d3view-ontology-app .d3view-ontology-home-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.d3view-ontology-app .d3view-ontology-home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-home-table thead th {
    background: #f8f9fa;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
}
.d3view-ontology-app .d3view-ontology-home-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
    color: #333;
}
.d3view-ontology-app .d3view-ontology-home-table tbody tr:hover { background: #fafbfc; }
.d3view-ontology-app .d3view-ontology-home-table tbody tr:last-child td { border-bottom: 0; }
.d3view-ontology-app .d3view-ontology-home-link {
    color: #2c6ab5;
    text-decoration: none;
    font-weight: 500;
}
.d3view-ontology-app .d3view-ontology-home-link i { margin-right: 6px; opacity: 0.8; }
.d3view-ontology-app .d3view-ontology-home-link:hover { text-decoration: underline; }
.d3view-ontology-app .d3view-ontology-home-updated,
.d3view-ontology-app .d3view-ontology-home-by { color: #888; font-size: 12px; }
.d3view-ontology-app .d3view-ontology-home-actions {
    text-align: right; white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-home-actions .btn { margin-left: 4px; }

/* ===========================================================
 * Bulk selection — checkbox column + selected row
 * Added by shashank2104 on 2026-04-20 - Home list bulk actions.
 * =========================================================== */
.d3view-ontology-app .d3view-ontology-home-table .d3view-ontology-home-th-check,
.d3view-ontology-app .d3view-ontology-home-table .d3view-ontology-home-td-check {
    width: 38px;
    padding-left: 14px;
    padding-right: 4px;
    text-align: center;
}
.d3view-ontology-app .d3view-ontology-home-table .d3v-ont-row {
    user-select: none;
    transition: background var(--d3v-t-fast, 0.12s) ease, box-shadow var(--d3v-t-fast, 0.12s) ease;
}
.d3view-ontology-app .d3view-ontology-home-table .d3v-ont-row.ui-selected,
.d3view-ontology-app .d3view-ontology-home-table .d3v-ont-row.is-selected {
    background: rgba(59, 130, 246, 0.08);
    box-shadow: inset 3px 0 0 var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-home-table .d3v-ont-row.ui-selected:hover,
.d3view-ontology-app .d3view-ontology-home-table .d3v-ont-row.is-selected:hover {
    background: rgba(59, 130, 246, 0.12);
}
/* jQuery UI lasso box */
.d3view-ontology-app .d3view-ontology-home-table .ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px solid var(--d3v-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
    border-radius: 4px;
}

/* Custom checkbox — scoped, modern, matches design tokens */
.d3view-ontology-app .d3view-ontology-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    vertical-align: middle;
}
.d3view-ontology-app .d3view-ontology-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.d3view-ontology-app .d3view-ontology-check > span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1.5px solid var(--d3v-border-strong, #cbd5e1);
    transition: border-color var(--d3v-t-fast, 0.12s) ease, background var(--d3v-t-fast, 0.12s) ease, box-shadow var(--d3v-t-fast, 0.12s) ease;
    position: relative;
}
.d3view-ontology-app .d3view-ontology-check:hover > span {
    border-color: var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-check input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    border-color: var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-check input:checked + span {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-check input:checked + span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.d3view-ontology-app .d3view-ontology-check input:indeterminate + span {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-check input:indeterminate + span::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* ===========================================================
 * Floating actions bar — anchors to the Home page container.
 * =========================================================== */
.d3view-ontology-app .d3view-ontology-home-page { position: relative; }

.d3view-ontology-app .d3v-ont-fab {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 200;
    height: 52px;
    min-width: 360px;
    max-width: calc(100% - 40px);
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-xl, 16px);
    box-shadow: var(--d3v-sh-lg, 0 10px 25px rgba(15, 23, 42, 0.12));
    padding: 0 14px;
    display: flex;
    align-items: center;
    animation: d3v-ont-fab-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(6px);
}
@keyframes d3v-ont-fab-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.d3view-ontology-app .d3v-ont-fab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--d3v-r-full, 999px);
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.28);
}
.d3view-ontology-app .d3v-ont-fab-chip i { font-size: 11px; }
.d3view-ontology-app .d3v-ont-fab-label {
    font-size: 12px;
    color: var(--d3v-text-secondary, #475569);
    font-weight: 500;
}
.d3view-ontology-app .d3v-ont-fab-actions .btn {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--d3v-r-md, 8px);
    padding: 5px 12px;
    transition: all var(--d3v-t-fast, 0.12s) ease;
}
.d3view-ontology-app .d3v-ont-fab-actions .btn i { font-size: 11px; }
.d3view-ontology-app .d3v-ont-fab-actions .btn-outline-on-hover {
    background: transparent;
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid transparent;
}
.d3view-ontology-app .d3v-ont-fab-actions .btn-outline-on-hover:hover {
    background: var(--d3v-bg-hover, #e2e8f0);
    color: var(--d3v-text-primary, #1e293b);
    border-color: var(--d3v-border, #e2e8f0);
}
.d3view-ontology-app .d3v-ont-fab-actions .btn-danger-outline {
    background: transparent;
    color: var(--d3v-danger, #ef4444);
    border: 1px solid transparent;
}
.d3view-ontology-app .d3v-ont-fab-actions .btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--d3v-danger, #ef4444);
}
.d3view-ontology-app .d3v-ont-fab-dismiss {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--d3v-r-md, 8px);
    color: var(--d3v-text-muted, #94a3b8);
    background: transparent;
    border: 1px solid transparent;
    opacity: 0.7;
    transition: all var(--d3v-t-fast, 0.12s) ease;
}
.d3view-ontology-app .d3v-ont-fab-dismiss:hover {
    opacity: 1;
    color: var(--d3v-text-primary, #1e293b);
    background: var(--d3v-bg-hover, #e2e8f0);
}

.d3view-ontology-app .d3view-ontology-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #556;
    font-size: 11px;
    font-weight: 600;
}

/* Stub pages for Graph/Actions/Logs/Tools/Settings */
.d3view-ontology-app .d3view-ontology-stub {
    display: flex; align-items: center; justify-content: center;
    padding: 60px 20px;
}
.d3view-ontology-app .d3view-ontology-stub-inner { text-align: center; color: #888; }
.d3view-ontology-app .d3view-ontology-stub-inner i { font-size: 32px; opacity: 0.4; margin-bottom: 10px; }
.d3view-ontology-app .d3view-ontology-stub-inner h3 { margin: 0 0 6px; color: #666; font-weight: 600; font-size: 15px; }
.d3view-ontology-app .d3view-ontology-stub-inner p { margin: 0; font-size: 12px; }

.d3view-ontology-app .d3view-ontology-data-page { padding: 20px 24px; }
.d3view-ontology-app .d3view-ontology-data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.d3view-ontology-app .d3view-ontology-data-heading h2 {
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.d3view-ontology-app .d3view-ontology-data-count { font-size: 12px; color: #888; }
.d3view-ontology-app .d3view-ontology-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.d3view-ontology-app .d3view-ontology-data-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: border-color 0.15s;
}
.d3view-ontology-app .d3view-ontology-data-card:hover {
    border-color: #c0d5ef;
}
.d3view-ontology-app .d3view-ontology-data-card-icon {
    width: 40px; height: 40px;
    border-radius: 6px;
    background: #f0f4fa;
    color: #5b7fb1;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-data-card-body { flex: 1; min-width: 0; }
.d3view-ontology-app .d3view-ontology-data-card-title {
    font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-data-card-sub {
    font-size: 11px; color: #888;
    display: flex; align-items: center; gap: 6px;
}
.d3view-ontology-app .d3view-ontology-data-card-sub code {
    background: #f5f7fa; color: #556; padding: 1px 5px; border-radius: 3px; font-size: 10px;
}
.d3view-ontology-app .d3view-ontology-data-card-key { color: #2c6ab5; font-weight: 600; }
.d3view-ontology-app .d3view-ontology-data-card-used { text-align: center; }
.d3view-ontology-app .d3view-ontology-data-card-used-label {
    display: block; font-size: 10px; color: #888; margin-top: 2px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.d3view-ontology-app .d3view-ontology-data-empty {
    background: #fff;
    border: 1px dashed #e2e8f0;
    border-radius: 6px;
    padding: 40px 20px;
    text-align: center;
    color: #888;
}
.d3view-ontology-app .d3view-ontology-data-empty i { font-size: 28px; opacity: 0.4; margin-bottom: 8px; }
.d3view-ontology-app .d3view-ontology-data-empty h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #666; }
.d3view-ontology-app .d3view-ontology-data-empty p { margin: 0; font-size: 12px; }

/* ============================================================
 * DVFIV-2008 — Ontology Item tabbed layout (About / Data / Rels)
 * Tree-first layout, shared OntologyView, reactive cross-tab state.
 * All tokens come from --d3v-* foundation.
 * ============================================================ */
.d3view-ontology-app .d3view-ontology-item {
    background: var(--d3v-bg-canvas, #f6f8fb);
}
/* Removed on 2026-04-21 - Toolbar rules (heading / name input / Save spinner)
   were eliminated when the toolbar itself was dropped. Header now owns all
   item actions via .d3view-ontology-header-actions. */

/* --- Tree panel -------------------------------------------- */
.d3view-ontology-app .d3view-ontology-item-body { min-height: 0; }
.d3view-ontology-app .d3view-ontology-item-tree-panel {
    width: 220px;
    flex-shrink: 0;
    background: var(--d3v-bg-primary, #fff);
    border-right: 1px solid var(--d3v-border-subtle, #e2e8f0);
    padding: 12px 8px;
    overflow-y: auto;
}
.d3view-ontology-app .d3view-ontology-item-tree { list-style: none; padding: 0; margin: 0; }
.d3view-ontology-app .d3view-ontology-item-tree-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--d3v-r-md, 6px);
    cursor: pointer;
    color: var(--d3v-text-secondary, #4b5563);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--d3v-t-fast, 0.15s), color var(--d3v-t-fast, 0.15s);
    position: relative;
    margin-bottom: 2px;
}
.d3view-ontology-app .d3view-ontology-item-tree-node:hover {
    background: var(--d3v-bg-hover, #f1f5f9);
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-item-tree-node.active {
    background: rgba(91, 127, 177, 0.12);
    color: var(--d3v-accent-primary, #5b7fb1);
}
.d3view-ontology-app .d3view-ontology-item-tree-node.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--d3v-accent-primary, #5b7fb1);
    border-radius: 2px;
}
.d3view-ontology-app .d3view-ontology-item-tree-icon {
    width: 16px; text-align: center;
    font-size: 13px;
    opacity: 0.85;
}
.d3view-ontology-app .d3view-ontology-item-tree-label { flex: 1; }
.d3view-ontology-app .d3view-ontology-item-tree-badge {
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    background: var(--d3v-bg-muted, #eef2f7);
    border-radius: 999px;
    line-height: 16px;
}
.d3view-ontology-app .d3view-ontology-item-tree-node.active .d3view-ontology-item-tree-badge {
    background: #fff;
    color: var(--d3v-accent-primary, #5b7fb1);
}

/* --- Content panel ---------------------------------------- */
.d3view-ontology-app .d3view-ontology-item-content-panel {
    min-width: 0;
    background: var(--d3v-bg-canvas, #f6f8fb);
}
.d3view-ontology-app .d3view-ontology-item-content-header {
    padding: 10px 16px;
    background: var(--d3v-bg-primary, #fff);
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-item-breadcrumb-item {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-ontology-app .d3view-ontology-item-content-body { padding: 16px; min-height: 0; }
.d3view-ontology-app .d3view-ontology-item-tab-body[data-tab-id="relationships"] { padding: 0; }
/** AI tab body fills its container — workflow has its own chrome. */
.d3view-ontology-app .d3view-ontology-item-tab-body[data-tab-id="ai"] { padding: 0; margin: -16px; }
.d3view-ontology-app .d3view-ontology-item-tab-body.is-embedded { padding: 0; margin: 0; }

/* --- About tab -------------------------------------------- */
.d3view-ontology-app .d3view-ontology-item-about { width: 100%; }
.d3view-ontology-app .d3view-ontology-item-about-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    margin-bottom: 14px;
}
.d3view-ontology-app .d3view-ontology-item-about-hero-icon {
    width: 44px; height: 44px;
    border-radius: var(--d3v-r-md, 6px);
    background: linear-gradient(135deg, #5b7fb1 0%, #7699c9 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(91, 127, 177, 0.28);
}
.d3view-ontology-app .d3view-ontology-item-about-hero-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-item-about-hero-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-item-about-hero-sub i { margin-right: 4px; }

.d3view-ontology-app .d3view-ontology-item-about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.d3view-ontology-app .d3view-ontology-item-about-stat {
    padding: 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    text-align: center;
    transition: border-color var(--d3v-t-fast, 0.15s), box-shadow var(--d3v-t-fast, 0.15s), transform var(--d3v-t-fast, 0.15s);
}
.d3view-ontology-app .d3view-ontology-item-about-stat[data-tab-link] { cursor: pointer; }
.d3view-ontology-app .d3view-ontology-item-about-stat[data-tab-link]:hover {
    border-color: var(--d3v-accent-primary, #5b7fb1);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.06));
    transform: translateY(-1px);
}
.d3view-ontology-app .d3view-ontology-item-about-stat-icon {
    width: 32px; height: 32px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(91, 127, 177, 0.12);
    color: var(--d3v-accent-primary, #5b7fb1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-bottom: 8px;
}
.d3view-ontology-app .d3view-ontology-item-about-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
    line-height: 1;
    margin-bottom: 4px;
}
.d3view-ontology-app .d3view-ontology-item-about-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.d3view-ontology-app .d3view-ontology-item-about-section { margin-bottom: 16px; }
.d3view-ontology-app .d3view-ontology-item-about-section-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.d3view-ontology-app .d3view-ontology-item-about-section-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-item-about-section-header h4 i {
    margin-right: 6px;
    color: var(--d3v-accent-primary, #5b7fb1);
}
.d3view-ontology-app .d3view-ontology-item-about-section-count {
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    background: var(--d3v-bg-muted, #eef2f7);
    border-radius: 999px;
}
.d3view-ontology-app .d3view-ontology-item-about-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.d3view-ontology-app .d3view-ontology-item-about-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    transition: border-color var(--d3v-t-fast, 0.15s), box-shadow var(--d3v-t-fast, 0.15s);
}
.d3view-ontology-app .d3view-ontology-item-about-card:hover {
    border-color: var(--d3v-accent-primary, #c0d5ef);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.06));
}
.d3view-ontology-app .d3view-ontology-item-about-card-icon {
    width: 36px; height: 36px;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(91, 127, 177, 0.10);
    color: var(--d3v-accent-primary, #5b7fb1);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-item-about-card-body { flex: 1; min-width: 0; }
.d3view-ontology-app .d3view-ontology-item-about-card-title {
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-item-about-card-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-item-about-card-meta code {
    background: var(--d3v-bg-muted, #f5f7fa);
    color: var(--d3v-text-secondary, #556);
    padding: 1px 5px; border-radius: 3px;
    font-size: 10px;
}
.d3view-ontology-app .d3view-ontology-item-about-card-pk {
    color: #2c6ab5;
    font-weight: 600;
}
.d3view-ontology-app .d3view-ontology-item-about-card-pk i { margin-right: 3px; opacity: 0.7; }
.d3view-ontology-app .d3view-ontology-item-about-card-type {
    padding: 1px 6px;
    background: rgba(91, 127, 177, 0.1);
    color: var(--d3v-accent-primary, #5b7fb1);
    border-radius: 3px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.d3view-ontology-app .d3view-ontology-item-about-card-aside { text-align: center; }
.d3view-ontology-app .d3view-ontology-item-about-card-aside-val {
    font-size: 16px; font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
    line-height: 1;
}
.d3view-ontology-app .d3view-ontology-item-about-card-aside-lbl {
    font-size: 10px; color: var(--d3v-text-secondary, #6b7280);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 3px;
}

.d3view-ontology-app .d3view-ontology-item-about-rels {
    display: flex; flex-direction: column; gap: 6px;
}
.d3view-ontology-app .d3view-ontology-item-about-rel {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-item-about-rel-from,
.d3view-ontology-app .d3view-ontology-item-about-rel-to {
    padding: 3px 10px;
    background: var(--d3v-bg-muted, #eef2f7);
    border-radius: var(--d3v-r-sm, 4px);
    color: var(--d3v-text-primary, #1f2937);
    font-size: 12px; font-weight: 600;
}
.d3view-ontology-app .d3view-ontology-item-about-rel-arrow {
    color: var(--d3v-accent-primary, #5b7fb1);
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-item-about-rel-arrow small {
    color: var(--d3v-text-secondary, #6b7280);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.d3view-ontology-app .d3view-ontology-item-about-empty {
    padding: 28px 20px;
    text-align: center;
    background: var(--d3v-bg-primary, #fff);
    border: 1px dashed var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-secondary, #888);
}
.d3view-ontology-app .d3view-ontology-item-about-empty i {
    font-size: 22px; opacity: 0.4; margin-bottom: 6px;
}
.d3view-ontology-app .d3view-ontology-item-about-empty p {
    margin: 0; font-size: 12px;
}

/* --- Data tab --------------------------------------------- */
.d3view-ontology-app .d3view-ontology-item-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget {
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    display: flex;
    flex-direction: column;
    min-height: 240px;
    transition: border-color var(--d3v-t-fast, 0.15s), box-shadow var(--d3v-t-fast, 0.15s);
}
.d3view-ontology-app .d3view-ontology-item-data-widget:hover {
    border-color: var(--d3v-accent-primary, #c0d5ef);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.06));
}
.d3view-ontology-app .d3view-ontology-item-data-widget-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d3v-border-subtle, #e2e8f0);
    background: var(--d3v-bg-canvas, #f9fafb);
    border-radius: var(--d3v-r-md, 6px) var(--d3v-r-md, 6px) 0 0;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-icon {
    width: 26px; height: 26px;
    background: rgba(91, 127, 177, 0.12);
    color: var(--d3v-accent-primary, #5b7fb1);
    border-radius: var(--d3v-r-sm, 4px);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-title {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-sub {
    font-size: 11px;
    color: #2c6ab5;
    font-weight: 600;
    background: rgba(44, 106, 181, 0.08);
    padding: 2px 6px;
    border-radius: 3px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-sub i { margin-right: 3px; opacity: 0.7; }
.d3view-ontology-app .d3view-ontology-item-data-widget-body {
    flex: 1;
    padding: 12px 14px;
    overflow: auto;
    min-height: 0;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-missing {
    padding: 20px;
    text-align: center;
    color: var(--d3v-text-secondary, #888);
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-hd {
    font-size: 11px; font-weight: 600;
    color: var(--d3v-text-secondary, #6b7280);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-hd i { margin-right: 4px; }
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-cols {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 12px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-col {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 8px;
    background: var(--d3v-bg-canvas, #f9fafb);
    border-radius: var(--d3v-r-sm, 4px);
    font-size: 11px;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-col code {
    color: var(--d3v-text-primary, #1f2937);
    font-weight: 600;
    background: transparent;
    padding: 0;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-schema-col-type {
    color: var(--d3v-accent-primary, #5b7fb1);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d3view-ontology-app .d3view-ontology-item-data-widget-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--d3v-border-subtle, #eef2f7);
    font-size: 11px;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-item-data-widget-meta i { margin-right: 4px; opacity: 0.7; }
.d3view-ontology-app .d3view-ontology-item-data-widget-type {
    padding: 1px 8px;
    background: rgba(91, 127, 177, 0.1);
    color: var(--d3v-accent-primary, #5b7fb1);
    border-radius: 3px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.d3view-ontology-app .d3view-ontology-item-data-empty {
    padding: 40px 20px;
    text-align: center;
    background: var(--d3v-bg-primary, #fff);
    border: 1px dashed var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    color: var(--d3v-text-secondary, #888);
}
.d3view-ontology-app .d3view-ontology-item-data-empty i {
    font-size: 28px; opacity: 0.4; margin-bottom: 8px;
}
.d3view-ontology-app .d3view-ontology-item-data-empty h3 {
    margin: 0 0 4px; font-size: 14px; font-weight: 600;
    color: var(--d3v-text-secondary, #666);
}
.d3view-ontology-app .d3view-ontology-item-data-empty p {
    margin: 0; font-size: 12px;
}

/* --- Relationships tab mount -------------------------------- */
.d3view-ontology-app .d3view-ontology-item-rels-missing {
    padding: 40px; text-align: center; color: #888;
}
.d3view-ontology-app .d3view-ontology-item-rels-missing i {
    font-size: 28px; color: #d19a4d; margin-bottom: 10px;
}

/* AI panel frame */
.d3view-ontology-app .d3view-ontology-ai-page { padding: 14px 18px; }
.d3view-ontology-app .d3view-ontology-ai-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.d3view-ontology-app .d3view-ontology-ai-heading h2 {
    display: inline-block; margin: 0;
    font-size: 16px; font-weight: 600; color: #333;
}
.d3view-ontology-app .d3view-ontology-ai-badge {
    padding: 2px 8px; border-radius: 999px;
    background: #eef2f7; color: #667;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.d3view-ontology-app .d3view-ontology-ai-mount {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
    min-height: 340px;
    overflow: auto;
}

/** Embedded mode (per-item AI tab): drop the redundant picker-mode chrome
 *  (Ontology AI heading + Beta badge + Change chip). Mount fills the body.
 *  The is-embedded flag is set on this.$el which IS the tab body, so we
 *  match on the body element's class rather than the inner page root. */
.d3view-ontology-app .d3view-ontology-item-tab-body.is-embedded .d3view-ontology-ai-toolbar {
    display: none;
}
.d3view-ontology-app .d3view-ontology-item-tab-body.is-embedded .d3view-ontology-ai-mount {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
/** Drop the AI page's own toolbar padding too — workflow fills the body. */
.d3view-ontology-app .d3view-ontology-item-tab-body.is-embedded .d3view-ontology-ai-page {
    padding: 0;
}
.d3view-ontology-app .d3view-ontology-ai-shell { text-align: center; padding: 40px 20px; color: #888; }
.d3view-ontology-app .d3view-ontology-ai-shell i { font-size: 32px; color: #5b7fb1; margin-bottom: 10px; }
.d3view-ontology-app .d3view-ontology-ai-shell h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #666; }
.d3view-ontology-app .d3view-ontology-ai-shell p { margin: 0 0 12px; font-size: 12px; }

/* Single-scope intro card — shown when AI tab opens for a pinned ontology. */
.d3view-ontology-app .d3view-ontology-ai-intro {
    text-align: center;
    padding: 56px 24px;
    color: var(--d3v-text-secondary, #475569);
    max-width: 480px;
    margin: 0 auto;
}
.d3view-ontology-app .d3view-ontology-ai-intro-icon {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(59,130,246,0.15));
    display: flex; align-items: center; justify-content: center;
}
.d3view-ontology-app .d3view-ontology-ai-intro-icon i {
    font-size: 26px;
    color: #6366F1;
}
.d3view-ontology-app .d3view-ontology-ai-intro-empty .d3view-ontology-ai-intro-icon {
    background: rgba(245,158,11,0.12);
}
.d3view-ontology-app .d3view-ontology-ai-intro-empty .d3view-ontology-ai-intro-icon i {
    color: #d97706;
}
.d3view-ontology-app .d3view-ontology-ai-intro h3 {
    font-size: 18px; font-weight: 700;
    color: var(--d3v-text-primary, #0f172a);
    margin: 0 0 8px;
}
.d3view-ontology-app .d3view-ontology-ai-intro p {
    font-size: 13px; line-height: 1.5;
    margin: 0 0 8px;
}
.d3view-ontology-app .d3view-ontology-ai-intro-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-ontology-app .d3view-ontology-ai-intro-summary {
    display: inline-flex; gap: 8px; align-items: center;
    font-size: 12px; color: var(--d3v-text-secondary, #475569);
    margin: 4px 0 24px !important;
}
.d3view-ontology-app .d3view-ontology-ai-intro-summary i {
    margin-right: 4px; opacity: 0.7;
}
.d3view-ontology-app .d3view-ontology-ai-intro-sep { opacity: 0.4; }
.d3view-ontology-app .d3view-ontology-ai-intro .btn-primary {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    border: none;
    padding: 10px 24px;
    box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}
.d3view-ontology-app .d3view-ontology-ai-intro .btn-primary:hover {
    background: linear-gradient(135deg, #2563EB, #4F46E5);
}

/* ============================================================
 * DVFIV-2007 — Ontology AI picker (step 1 before AI agent mount)
 * Lets the user choose which saved ontology to run the AI on, and
 * handles the empty state when nothing is saved yet.
 * ============================================================ */
.d3view-ontology-app .d3view-ontology-ai-header-actions {
    display: flex; align-items: center; gap: 8px;
}
.d3view-ontology-app .d3view-ontology-ai-selected-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(91, 127, 177, 0.10);
    color: var(--d3v-accent-primary, #5b7fb1);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    max-width: 220px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.d3view-ontology-app .d3view-ontology-ai-selected-chip i { font-size: 11px; opacity: 0.8; }

/* --- Picker: empty state --------------------------------- */
.d3view-ontology-app .d3view-ontology-ai-picker-empty {
    padding: 40px 20px;
}
.d3view-ontology-app .d3view-ontology-ai-picker-empty-inner {
    max-width: 520px; text-align: center;
    background: var(--d3v-bg-primary, #fff);
    border: 1px dashed var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 36px 28px;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-ai-picker-empty-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5b7fb1 0%, #7699c9 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(91, 127, 177, 0.28);
    margin-bottom: 14px;
}
.d3view-ontology-app .d3view-ontology-ai-picker-empty h2 {
    margin: 0 0 8px;
    font-size: 18px; font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-ai-picker-empty p {
    margin: 0 0 18px;
    font-size: 13px; line-height: 1.55;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-ai-picker-empty-actions {
    display: inline-flex; gap: 8px;
}

/* --- Picker: list ---------------------------------------- */
.d3view-ontology-app .d3view-ontology-ai-picker-header {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    margin-bottom: 14px;
}
.d3view-ontology-app .d3view-ontology-ai-picker-header-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: var(--d3v-r-md, 6px);
    background: linear-gradient(135deg, #5b7fb1 0%, #7699c9 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(91, 127, 177, 0.28);
}
.d3view-ontology-app .d3view-ontology-ai-picker-header-text h3 {
    margin: 0 0 3px;
    font-size: 14px; font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-ai-picker-header-text p {
    margin: 0;
    font-size: 12px;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-ai-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 10px;
    align-content: start;
    padding: 2px;
}
.d3view-ontology-app .d3view-ontology-ai-picker-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    cursor: pointer;
    transition: border-color var(--d3v-t-fast, 0.15s),
                box-shadow    var(--d3v-t-fast, 0.15s),
                transform     var(--d3v-t-fast, 0.15s);
}
.d3view-ontology-app .d3view-ontology-ai-picker-card:hover {
    border-color: var(--d3v-accent-primary, #5b7fb1);
    box-shadow: var(--d3v-sh-md, 0 4px 10px rgba(15, 23, 42, 0.08));
    transform: translateY(-1px);
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: var(--d3v-r-sm, 4px);
    background: rgba(91, 127, 177, 0.12);
    color: var(--d3v-accent-primary, #5b7fb1);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-body { flex: 1; min-width: 0; }
.d3view-ontology-app .d3view-ontology-ai-picker-card-title {
    font-size: 13px; font-weight: 600;
    color: var(--d3v-text-primary, #1f2937);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-meta {
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    font-size: 11px;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-meta i {
    margin-right: 3px; opacity: 0.75;
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-type {
    padding: 1px 6px;
    background: rgba(91, 127, 177, 0.1);
    color: var(--d3v-accent-primary, #5b7fb1);
    border-radius: 3px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.d3view-ontology-app .d3view-ontology-ai-picker-card-action {
    color: var(--d3v-text-secondary, #a0aab8);
    flex-shrink: 0;
    transition: color var(--d3v-t-fast, 0.15s), transform var(--d3v-t-fast, 0.15s);
}
.d3view-ontology-app .d3view-ontology-ai-picker-card:hover .d3view-ontology-ai-picker-card-action {
    color: var(--d3v-accent-primary, #5b7fb1);
    transform: translateX(2px);
}
.d3view-ontology-app .d3view-ontology-ai-picker-footer {
    padding: 12px 2px 2px;
    border-top: 1px solid var(--d3v-border-subtle, #eef2f7);
    margin-top: 10px;
    flex-shrink: 0;
}

/* --- Preparing + error states --------------------------- */
.d3view-ontology-app .d3view-ontology-ai-preparing { padding: 40px 20px; }
.d3view-ontology-app .d3view-ontology-ai-preparing-inner {
    max-width: 480px; text-align: center;
    background: var(--d3v-bg-primary, #fff);
    border: 1px solid var(--d3v-border-subtle, #e2e8f0);
    border-radius: var(--d3v-r-md, 6px);
    padding: 36px 28px;
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-ai-preparing-spinner {
    font-size: 30px;
    color: var(--d3v-accent-primary, #5b7fb1);
    margin-bottom: 12px;
}
.d3view-ontology-app .d3view-ontology-ai-preparing-error-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(217, 119, 6, 0.14);
    color: #d97706;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    margin-bottom: 10px;
}
.d3view-ontology-app .d3view-ontology-ai-preparing h3 {
    margin: 0 0 6px;
    font-size: 15px; font-weight: 700;
    color: var(--d3v-text-primary, #1f2937);
}
.d3view-ontology-app .d3view-ontology-ai-preparing p {
    margin: 0 0 16px;
    font-size: 12px; line-height: 1.55;
    color: var(--d3v-text-secondary, #6b7280);
}
.d3view-ontology-app .d3view-ontology-ai-preparing-actions {
    display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}

/* ======================================================================
 * LANDING TAKEOVER MODE
 * When the app is in landing-mode, hide the top bar + left nav entirely.
 * Classic onboarding pattern — remove distractions for first-time users.
 * ====================================================================== */
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-header,
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-vtabs {
    display: none !important;
}
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-main-content-wrapper,
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-main-content {
    width: 100% !important;
    max-width: 100% !important;
}
.d3view-ontology-app.d3view-ontology-landing-mode .plugin-tabs {
    padding: 0 !important;
    margin: 0 !important;
}
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-panel[data-tab-id="landing-nav"] {
    min-height: 100vh;
}

.d3view-ontology-app .d3view-ontology-landing {
    overflow-y: auto;
    background:
        radial-gradient(ellipse 800px 500px at 20% -10%, rgba(59, 130, 246, 0.08), transparent 50%),
        radial-gradient(ellipse 600px 400px at 85% 110%, rgba(139, 92, 246, 0.06), transparent 55%),
        var(--d3v-bg-secondary, #f7f9fc);
}

.d3view-ontology-app .d3view-ontology-landing-wrap {
    padding: 0 24px 64px;
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
}

/* Minimal takeover top bar — brand + skip link only */
.d3view-ontology-app .d3view-ontology-landing-topbar {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.d3view-ontology-app .d3view-ontology-landing-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-ontology-app .d3view-ontology-landing-brand i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.d3view-ontology-app .d3view-ontology-landing-skip {
    background: transparent;
    border: none;
    color: var(--d3v-text-muted, #64748b);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: var(--d3v-r-md, 8px);
    transition: background 160ms ease, color 160ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.d3view-ontology-app .d3view-ontology-landing-skip:hover,
.d3view-ontology-app .d3view-ontology-landing-skip:focus {
    color: var(--d3v-accent, #3b82f6);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.08));
}
.d3view-ontology-app .d3view-ontology-landing-skip i {
    transition: transform 200ms ease;
}
.d3view-ontology-app .d3view-ontology-landing-skip:hover i {
    transform: translateX(3px);
}

.d3view-ontology-app .d3view-ontology-landing-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 28px;
}

.d3view-ontology-app .d3view-ontology-landing-inner {
    width: 100%;
}

/* Hero */
.d3view-ontology-app .d3view-ontology-landing-hero {
    text-align: center;
    padding: 32px 24px 40px;
}

.d3view-ontology-app .d3view-ontology-landing-hero-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    box-shadow: 0 14px 32px rgba(59, 130, 246, 0.35);
}

.d3view-ontology-app .d3view-ontology-landing-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 auto 14px;
    max-width: 760px;
    color: var(--d3v-text-primary, #0f172a);
    letter-spacing: -0.02em;
}

.d3view-ontology-app .d3view-ontology-landing-accent {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.d3view-ontology-app .d3view-ontology-landing-subtitle {
    font-size: 17px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #475569);
    max-width: 620px;
    margin: 0 auto 32px;
}

.d3view-ontology-app .d3view-ontology-landing-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.d3view-ontology-app .d3view-ontology-landing-cta {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border: none;
    color: #fff;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.d3view-ontology-app .d3view-ontology-landing-cta:hover,
.d3view-ontology-app .d3view-ontology-landing-cta:focus {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 16px 32px rgba(59, 130, 246, 0.35);
}

.d3view-ontology-app .d3view-ontology-landing-cta i {
    font-size: 18px;
}

.d3view-ontology-app .d3view-ontology-landing-learn {
    color: var(--d3v-text-muted, #64748b);
    text-decoration: none;
    font-size: 13px;
}

.d3view-ontology-app .d3view-ontology-landing-learn:hover,
.d3view-ontology-app .d3view-ontology-landing-learn:focus {
    color: var(--d3v-accent, #3b82f6);
    text-decoration: none;
}

.d3view-ontology-app .d3view-ontology-landing-learn .fa-chevron-down {
    margin-left: 6px;
    transition: transform 220ms ease;
}

.d3view-ontology-app .d3view-ontology-landing-learn .fa-chevron-down.is-open {
    transform: rotate(180deg);
}

/* Feature grid */
.d3view-ontology-app .d3view-ontology-landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
    padding: 0 8px;
}

.d3view-ontology-app .d3view-ontology-landing-feature {
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 12px);
    padding: 20px 18px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.d3view-ontology-app .d3view-ontology-landing-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--d3v-sh-md, 0 8px 18px rgba(15, 23, 42, 0.08));
    border-color: var(--d3v-border-strong, rgba(59, 130, 246, 0.2));
}

.d3view-ontology-app .d3view-ontology-landing-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--d3v-accent, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
}

.d3view-ontology-app .d3view-ontology-landing-feature-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 6px;
}

.d3view-ontology-app .d3view-ontology-landing-feature-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--d3v-text-secondary, #64748b);
}

/* Details expand */
.d3view-ontology-app .d3view-ontology-landing-details {
    margin-top: 32px;
    padding: 24px 28px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 12px);
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.d3view-ontology-app .d3view-ontology-landing-details h3 {
    margin-top: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}

.d3view-ontology-app .d3view-ontology-landing-details h3 + h3 {
    margin-top: 20px;
}

.d3view-ontology-app .d3view-ontology-landing-details ul {
    padding-left: 20px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 14px;
    line-height: 1.6;
}

.d3view-ontology-app .d3view-ontology-landing-details code {
    background: var(--d3v-bg-code, rgba(15, 23, 42, 0.06));
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Responsive */
@media (max-width: 640px) {
    .d3view-ontology-app .d3view-ontology-landing-title { font-size: 28px; }
    .d3view-ontology-app .d3view-ontology-landing-subtitle { font-size: 15px; }
    .d3view-ontology-app .d3view-ontology-landing-cta { padding: 12px 20px; font-size: 14px; }
}

/* ======================================================================
 * WIZARD TAKEOVER MODE — hide app top bar + left nav while in the wizard.
 * Wizard has its own top bar + stepper + footer; showing the app chrome
 * behind it is noisy and distracting.
 * ====================================================================== */
.d3view-ontology-app.d3view-ontology-wizard-mode .d3view-ontology-header,
.d3view-ontology-app.d3view-ontology-wizard-mode .d3view-ontology-vtabs {
    display: none !important;
}
.d3view-ontology-app.d3view-ontology-wizard-mode .d3view-ontology-main-content-wrapper,
.d3view-ontology-app.d3view-ontology-wizard-mode .d3view-ontology-main-content {
    width: 100% !important;
    max-width: 100% !important;
}
.d3view-ontology-app.d3view-ontology-wizard-mode .plugin-tabs {
    padding: 0 !important;
    margin: 0 !important;
}

/* ======================================================================
 * Shell
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wizard {
    background: var(--d3v-bg-secondary, #f7f9fc);
}

.d3view-ontology-app .d3view-ontology-wizard-shell {
    background: var(--d3v-bg-secondary, #f7f9fc);
}

/* Top bar */
.d3view-ontology-app .d3view-ontology-wizard-top {
    height: 56px;
    padding: 0 24px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    flex: 0 0 56px;
}
.d3view-ontology-app .d3view-ontology-wizard-top-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-ontology-app .d3view-ontology-wizard-top-title i {
    color: var(--d3v-accent, #3b82f6);
}

/* Body wrap = stepper (left) + body (right) */
.d3view-ontology-app .d3view-ontology-wizard-body-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

/* Stepper */
.d3view-ontology-app .d3view-ontology-wizard-stepper {
    flex: 0 0 240px;
    padding: 28px 20px;
    background: var(--d3v-bg-primary, #ffffff);
    border-right: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: var(--d3v-r-md, 8px);
    cursor: pointer;
    color: var(--d3v-text-secondary, #475569);
    transition: background 150ms ease, color 150ms ease;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item:hover {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-current {
    color: var(--d3v-text-primary, #0f172a);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.08));
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-done {
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-bullet {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1.5px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.1));
    color: var(--d3v-text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 32px;
    transition: all 180ms ease;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-current .d3view-ontology-wizard-stepper-bullet {
    background: var(--d3v-accent, #3b82f6);
    border-color: var(--d3v-accent, #3b82f6);
    color: #fff;
    box-shadow: 0 0 0 4px var(--d3v-accent-subtle, rgba(59, 130, 246, 0.12));
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-done .d3view-ontology-wizard-stepper-bullet {
    background: var(--d3v-status-success, #10b981);
    border-color: var(--d3v-status-success, #10b981);
    color: #fff;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-label {
    flex: 1;
    min-width: 0;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-key {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-key i {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-current .d3view-ontology-wizard-stepper-key i,
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-done .d3view-ontology-wizard-stepper-key i {
    color: inherit;
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-line {
    position: absolute;
    left: 26px;
    top: 44px;
    width: 2px;
    height: calc(100% - 36px);
    background: var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}
.d3view-ontology-app .d3view-ontology-wizard-stepper-item.is-done .d3view-ontology-wizard-stepper-line {
    background: var(--d3v-status-success, #10b981);
}

/* Body */
.d3view-ontology-app .d3view-ontology-wizard-body {
    padding: 32px 40px 28px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}
/* Step 3 takes full remaining height (no scroll — OntologyView scrolls itself) */
.d3view-ontology-app .d3view-ontology-wizard-body:has(.d3view-ontology-wiz-step-rel) {
    overflow: hidden;
}

/* Footer */
.d3view-ontology-app .d3view-ontology-wizard-footer {
    height: 64px;
    padding: 0 24px;
    background: var(--d3v-bg-primary, #ffffff);
    border-top: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    flex: 0 0 64px;
}
.d3view-ontology-app .d3view-ontology-wizard-footer .btn {
    font-weight: 500;
}

/* ======================================================================
 * Step: shared
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wiz-step-inner {
    max-width: 880px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}
.d3view-ontology-app .d3view-ontology-wiz-step-ds-inner,
.d3view-ontology-app .d3view-ontology-wiz-step-rel > .d3view-ontology-wiz-step-inner {
    max-width: 1100px;
}
.d3view-ontology-app .d3view-ontology-wiz-step-header {
    margin-bottom: 24px;
}
.d3view-ontology-app .d3view-ontology-wiz-step-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.d3view-ontology-app .d3view-ontology-wiz-step-header h2 i {
    color: var(--d3v-accent, #3b82f6);
}
.d3view-ontology-app .d3view-ontology-wiz-step-sub {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #475569);
    margin: 0;
    max-width: 720px;
}

/* ======================================================================
 * Step 1: Name
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wiz-form-card {
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 12px);
    padding: 28px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-wiz-field {
    margin-bottom: 20px;
}
.d3view-ontology-app .d3view-ontology-wiz-field:last-child {
    margin-bottom: 0;
}
.d3view-ontology-app .d3view-ontology-wiz-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 6px;
}
.d3view-ontology-app .d3view-ontology-wiz-req {
    color: var(--d3v-status-danger, #ef4444);
}
.d3view-ontology-app .d3view-ontology-wiz-optional {
    color: var(--d3v-text-muted, #94a3b8);
    font-weight: 400;
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-wiz-field .form-control {
    border-radius: var(--d3v-r-md, 8px);
    border: 1.5px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.1));
    padding: 10px 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    width: 100%;
    box-sizing: border-box;
}
.d3view-ontology-app .d3view-ontology-wiz-field .form-control:focus {
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: 0 0 0 3px var(--d3v-accent-subtle, rgba(59, 130, 246, 0.15));
    outline: none;
}
.d3view-ontology-app .d3view-ontology-wiz-field .form-control.is-invalid {
    border-color: var(--d3v-status-danger, #ef4444);
}
.d3view-ontology-app .d3view-ontology-wiz-inline-error {
    margin-top: 8px;
    font-size: 13px;
    color: var(--d3v-status-danger, #ef4444);
    display: flex;
    align-items: center;
    gap: 6px;
}
.d3view-ontology-app .d3view-ontology-wiz-tips {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}
.d3view-ontology-app .d3view-ontology-wiz-tip {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-ontology-app .d3view-ontology-wiz-tip i {
    color: var(--d3v-accent, #3b82f6);
}

/* ======================================================================
 * Step 2: Data sources
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wiz-ds-meta {
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.d3view-ontology-app .d3view-ontology-wiz-ds-count-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-wiz-ds-count {
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    min-width: 22px;
    text-align: center;
}
.d3view-ontology-app .d3view-ontology-wiz-ds-search-wrap {
    position: relative;
    flex: 1;
    max-width: 320px;
}
.d3view-ontology-app .d3view-ontology-wiz-ds-search-wrap i.fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d3v-text-muted, #94a3b8);
    pointer-events: none;
}
.d3view-ontology-app .d3view-ontology-wiz-ds-search-wrap .form-control {
    padding-left: 34px;
    border-radius: var(--d3v-r-md, 8px);
}

/* Cards grid */
.d3view-ontology-app .d3view-ontology-wiz-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.d3view-ontology-app .d3view-ontology-wiz-cards-extra {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}

/* Card */
.d3view-ontology-app .d3view-ontology-wiz-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--d3v-bg-primary, #ffffff);
    border: 1.5px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-lg, 12px);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    user-select: none;
}
.d3view-ontology-app .d3view-ontology-wiz-card:hover {
    transform: translateY(-1px);
    border-color: var(--d3v-accent, #3b82f6);
    box-shadow: var(--d3v-sh-sm, 0 4px 8px rgba(15, 23, 42, 0.06));
}
.d3view-ontology-app .d3view-ontology-wiz-card.is-selected {
    border-color: var(--d3v-accent, #3b82f6);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.06));
    box-shadow: 0 0 0 3px var(--d3v-accent-subtle, rgba(59, 130, 246, 0.15));
}
.d3view-ontology-app .d3view-ontology-wiz-card-tick {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}
.d3view-ontology-app .d3view-ontology-wiz-card.is-selected .d3view-ontology-wiz-card-tick {
    opacity: 1;
    transform: scale(1);
}
.d3view-ontology-app .d3view-ontology-wiz-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-accent, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 40px;
}
.d3view-ontology-app .d3view-ontology-wiz-card-icon-upload {
    background: rgba(16, 185, 129, 0.1);
    color: var(--d3v-status-success, #10b981);
}
.d3view-ontology-app .d3view-ontology-wiz-card-icon-sql {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}
.d3view-ontology-app .d3view-ontology-wiz-card-icon-rest {
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
}
.d3view-ontology-app .d3view-ontology-wiz-card-body {
    flex: 1;
    min-width: 0;
}
.d3view-ontology-app .d3view-ontology-wiz-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-wiz-card-sub {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-wiz-card-badge {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.1));
    color: var(--d3v-accent, #3b82f6);
    font-size: 11px;
    font-weight: 500;
}
.d3view-ontology-app .d3view-ontology-wiz-card-chevron {
    color: var(--d3v-text-muted, #94a3b8);
    flex: 0 0 auto;
}
.d3view-ontology-app .d3view-ontology-wiz-card-filter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 26px;
    height: 26px;
    border-radius: var(--d3v-r-sm, 6px);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.1));
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-muted, #64748b);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-wiz-card:hover .d3view-ontology-wiz-card-filter,
.d3view-ontology-app .d3view-ontology-wiz-card.is-selected .d3view-ontology-wiz-card-filter {
    opacity: 1;
    transform: scale(1);
}
.d3view-ontology-app .d3view-ontology-wiz-card-filter:hover {
    border-color: var(--d3v-accent, #3b82f6);
    color: var(--d3v-accent, #3b82f6);
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.08));
}

.d3view-ontology-app .d3view-ontology-wiz-show-more-wrap {
    text-align: center;
    margin-top: 18px;
}
.d3view-ontology-app .d3view-ontology-wiz-show-more-wrap .btn-link {
    color: var(--d3v-text-secondary, #475569);
    text-decoration: none;
    font-weight: 500;
}
.d3view-ontology-app .d3view-ontology-wiz-show-more-wrap .btn-link:hover {
    color: var(--d3v-accent, #3b82f6);
    text-decoration: none;
}
.d3view-ontology-app .d3view-ontology-wiz-show-more-wrap .fa {
    margin-left: 6px;
    transition: transform 200ms ease;
}

.d3view-ontology-app .d3view-ontology-wiz-lookups-error {
    margin: 12px 0;
}

/* ======================================================================
 * Step 3: Relationships wrapper (OntologyView lives inside)
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wiz-step-rel {
    min-height: 0;
}
.d3view-ontology-app .d3view-ontology-wiz-step-rel .d3view-ontology-wiz-step-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.d3view-ontology-app .d3view-ontology-wiz-relationships-mount {
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-lg, 12px);
    margin-top: 16px;
    overflow: hidden;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    flex: 1 1 auto;
    min-height: 500px;
}
.d3view-ontology-app .d3view-ontology-wiz-relationships-mount > div {
    height: 100%;
}

/* Coach-mark styles (render inside mounted OntologyView) */
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach {
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.06));
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--d3v-text-primary, #0f172a);
    max-width: 900px;
    margin: 0 auto;
}
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach-inner > i.fa-lightbulb-o {
    color: #d97706;
    font-size: 15px;
    flex: 0 0 auto;
}
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach-inner > span {
    flex: 1;
    line-height: 1.4;
}
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--d3v-text-muted, #64748b);
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 4px);
    transition: background 150ms ease, color 150ms ease;
}
.d3view-ontology-app .d3view-modelassembler-ontology-schema-coach-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--d3v-text-primary, #0f172a);
}

/* ======================================================================
 * Step 4: Review
 * ====================================================================== */
.d3view-ontology-app .d3view-ontology-wiz-review-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-section {
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-lg, 12px);
    padding: 20px 24px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.d3view-ontology-app .d3view-ontology-wiz-review-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-section-title i {
    color: var(--d3v-accent, #3b82f6);
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-count {
    margin-left: auto;
    background: var(--d3v-bg-secondary, #f1f5f9);
    color: var(--d3v-text-primary, #0f172a);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.d3view-ontology-app .d3view-ontology-wiz-review-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 4px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-ontology-app .d3view-ontology-wiz-review-empty {
    font-size: 13px;
    color: var(--d3v-text-muted, #94a3b8);
    font-style: italic;
}
.d3view-ontology-app .d3view-ontology-wiz-review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d3v-bg-secondary, #f1f5f9);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.06));
    border-radius: 999px;
    font-size: 13px;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-ontology-app .d3view-ontology-wiz-review-chip i {
    color: var(--d3v-accent, #3b82f6);
    font-size: 12px;
}
.d3view-ontology-app .d3view-ontology-wiz-review-chip-filters {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    background: var(--d3v-accent, #3b82f6);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}
.d3view-ontology-app .d3view-ontology-wiz-review-chip-filters i {
    color: #fff;
    font-size: 9px;
}

/* ======================================================================
 * Remote Lookup Filter Sidebar (body-mounted — NOT scoped under .d3view-ontology-app)
 * Updated 2026-04-20 - DVFIV-2007 - FilterView + TableDataViewer preview layout
 * ====================================================================== */
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-topbar {
    flex: 0 0 auto;
    padding: 14px 20px 8px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .pl-inline-filters {
    gap: 8px;
    align-items: center;
    margin: 0;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-ext-filters {
    flex: 0 0 240px;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-ext-filters-container {
    flex: 1 1 auto;
    min-width: 0;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    color: var(--d3v-text-secondary, #64748b);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--d3v-text-primary, #0f172a);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-count i {
    color: var(--d3v-accent, #3b82f6);
    font-size: 12px;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-preview {
    padding: 12px 16px;
    background: var(--d3v-bg-secondary, #f8fafc);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-preview > div,
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-preview > .TVContainer,
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-preview > table {
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: var(--d3v-sh-sm, 0 1px 2px rgba(15, 23, 42, 0.04));
    overflow: hidden;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-fallback {
    margin: 0;
    font-size: 12px;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-loading {
    color: var(--d3v-text-muted, #94a3b8);
    font-size: 13px;
    padding: 60px 20px;
    text-align: center;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-footer {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--d3v-bg-primary, #ffffff);
    border-top: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    flex: 0 0 auto;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-status {
    font-size: 12px;
    color: var(--d3v-text-muted, #94a3b8);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--d3v-text-muted, #64748b);
    background: var(--d3v-bg-primary, #ffffff);
    border: 1px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: var(--d3v-r-md, 8px);
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--d3v-accent-subtle, rgba(59, 130, 246, 0.1));
    color: var(--d3v-accent, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 4px;
}
.d3view-plugins-sidebar.d3view-ontology-filter-sidebar .d3view-ontology-filter-empty-sub {
    font-size: 13px;
    color: var(--d3v-text-secondary, #64748b);
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ======================================================================
 * Responsive
 * ====================================================================== */
@media (max-width: 768px) {
    .d3view-ontology-app .d3view-ontology-wizard-stepper {
        flex: 0 0 80px;
        padding: 20px 8px;
    }
    .d3view-ontology-app .d3view-ontology-wizard-stepper-label { display: none; }
    .d3view-ontology-app .d3view-ontology-wizard-body { padding: 20px; }
}

.d3view-ontology-item .d3view-ontology-item-vtabs {
    position: relative;
    height: 100%;
    width: 56px;
    background: var(--d3v-bg-primary, #ffffff);
    border-right: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 140ms cubic-bezier(.2,.9,.3,1);
}

.d3view-ontology-item .d3view-ontology-item-vtabs.is-dragging {
    transition: none;
}

.d3view-ontology-item .d3view-ontology-item-vtabs .pl-tabs-vertical {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item {
    padding: 0;
    margin: 2px 4px;
    border: none;
    border-radius: var(--d3v-r-sm, 6px);
    background: transparent;
    list-style: none;
    transition: background 150ms ease;
    cursor: pointer;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item.active {
    background: rgba(59, 130, 246, 0.10);
    border-left: 3px solid var(--d3v-accent, #3B82F6);
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item:hover:not(.active) {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04));
}

/* Matches d3viewdashboard's db-vertical-page-sidebar — always stacked
 * (icon above label), expansion just reveals the label below. Override the
 * global .pl-tabs-vertical > li > a flex-wrap:wrap which would otherwise
 * force icon and label onto separate lines unexpectedly at narrow widths. */
.d3view-ontology-item .pl-tabs-vertical > li > .d3view-ontology-item-vtabs-btn,
.d3view-ontology-item .d3view-ontology-item-vtabs-btn {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 6px;
    color: var(--d3v-text-secondary, #475569);
    text-decoration: none;
    width: 100%;
    cursor: pointer;
    transition: color 150ms ease;
    position: relative;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-btn:hover,
.d3view-ontology-item .d3view-ontology-item-vtabs-btn:focus {
    color: var(--d3v-text-primary, #0f172a);
    text-decoration: none;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item.active .d3view-ontology-item-vtabs-btn {
    color: var(--d3v-accent, #3B82F6);
}

.d3view-ontology-item .d3view-ontology-item-vtabs-btn > i {
    font-size: 16px;
    line-height: 1;
    color: var(--d3v-text-tertiary, #94a3b8);
    width: auto;
    transition: color 0.15s ease;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item.active .d3view-ontology-item-vtabs-btn > i {
    color: var(--d3v-accent, #3B82F6);
}

/* Labels — always below icon; hidden when collapsed, revealed when expanded. */
.d3view-ontology-item .d3view-ontology-item-vtabs-btn .pl-tab-item-label {
    font-size: 10px;
    line-height: 1.2;
    color: var(--d3v-text-tertiary, #94a3b8);
    margin-top: 2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    transition: opacity 0.15s ease, max-width 0.15s ease;
}

.d3view-ontology-item .d3view-ontology-item-vtabs.is-expanded .d3view-ontology-item-vtabs-btn .pl-tab-item-label {
    max-width: 200px;
    opacity: 1;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-item.active .d3view-ontology-item-vtabs-btn .pl-tab-item-label {
    color: var(--d3v-text-primary, #0f172a);
    font-weight: 500;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--d3v-bg-muted, rgba(15, 23, 42, 0.06));
    color: var(--d3v-text-secondary, #475569);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.d3view-ontology-item .d3view-ontology-item-vtabs.is-expanded .d3view-ontology-item-vtabs-badge {
    opacity: 1;
}

/* ======================================================================
 * Resize handle (3px grip line on right edge — d3viewdashboard pattern)
 * ====================================================================== */
.d3view-ontology-item .d3view-ontology-item-vtabs-resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-resize-grip {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: #CBD5E1;
    transition: background 120ms ease, height 120ms ease;
}

.d3view-ontology-item .d3view-ontology-item-vtabs-resize:hover .d3view-ontology-item-vtabs-resize-grip,
.d3view-ontology-item .d3view-ontology-item-vtabs.is-dragging .d3view-ontology-item-vtabs-resize-grip {
    background: var(--d3v-accent, #3B82F6);
    height: 40px;
}

body.is-vtabs-dragging {
    user-select: none;
    cursor: col-resize !important;
}
body.is-vtabs-dragging * {
    cursor: col-resize !important;
}

/* Old item tree-panel: hide if any leftover markup is rendered. */
.d3view-ontology-item .d3view-ontology-item-tree-panel { display: none; }

/* ----------------------------------------------------------------------
 * Slim header
 * ---------------------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    background: var(--d3v-bg-primary, #ffffff);
    flex-shrink: 0;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.d3view-ontology-app .d3view-ontology-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    border-radius: var(--d3v-r-sm, 6px);
    transition: background 150ms ease;
}

.d3view-ontology-app .d3view-ontology-header-brand:hover {
    background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04));
}

.d3view-ontology-app .d3view-ontology-header-logo {
    font-size: 22px;
    color: var(--d3v-accent, #3B82F6);
    line-height: 1;
}

.d3view-ontology-app .d3view-ontology-header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

.d3view-ontology-app .d3view-ontology-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* TabManager — sits between brand + actions; tabs scroll horizontally if needed */
.d3view-ontology-app .d3view-ontology-tabmanager {
    margin: 0 16px;
    min-width: 0;
    overflow: hidden;
}

/* Landing / wizard takeover hides the app header. */
.d3view-ontology-app.d3view-ontology-landing-mode .d3view-ontology-header,
.d3view-ontology-app.d3view-ontology-wizard-mode  .d3view-ontology-header {
    display: none;
}

/* ----------------------------------------------------------------------
 * Header action buttons — context-aware [New Ontology | + New ▼] + [Tour]
 * Added by shashank2104 on 2026-04-21 — replaces the old FAB pill.
 * ---------------------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-primary, #0f172a);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms ease;
}

.d3view-ontology-app .d3view-ontology-header-btn > i {
    font-size: 12px;
    line-height: 1;
}

.d3view-ontology-app .d3view-ontology-header-btn:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: var(--d3v-bg-hover, rgba(59, 130, 246, 0.06));
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.d3view-ontology-app .d3view-ontology-header-btn-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #ffffff;
}

.d3view-ontology-app .d3view-ontology-header-btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    color: #ffffff;
    background: linear-gradient(135deg, #2563EB, #4F46E5);
}

.d3view-ontology-app .d3view-ontology-header-btn-ghost {
    background: transparent;
    border-color: var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}

/* Bootstrap's .dropdown-toggle caret spacing */
.d3view-ontology-app .d3view-ontology-header-btn .caret { margin-left: 4px; }

.d3view-ontology-app .d3view-ontology-header-new-group .dropdown-menu { margin-top: 4px; }

/* When the tour forces the dropdown open (step 2), push the menu above the
 * tour overlay (99998) but below the tour card (99999) so it's visible inside
 * the cutout without covering the step card itself. The card is appended to
 * <body> after the overlay, so at the same z-index the card still wins. */
body:has(.plugins-tour-overlay) .d3view-ontology-app .d3view-ontology-header-new-group.open .dropdown-menu {
    z-index: 99998;
}
/* Belt-and-suspenders: bump the tour card above the dropdown regardless of
 * DOM order. */
body:has(.d3view-ontology-header-new-group.open) .plugins-tour-card {
    z-index: 100001 !important;
}

.d3view-ontology-app .d3view-ontology-header-new-menu {
    min-width: 260px;
    padding: 6px 0;
    border-radius: var(--d3v-r-md, 8px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.06);
}

.d3view-ontology-app .d3view-ontology-header-new-menu .dropdown-header {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d3v-text-secondary, #475569);
}

.d3view-ontology-app .d3view-ontology-header-new-menu > li > a {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--d3v-text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.d3view-ontology-app .d3view-ontology-header-new-menu > li > a:hover {
    background: var(--d3v-bg-hover, rgba(59, 130, 246, 0.08));
    color: var(--d3v-accent, #3B82F6);
}

/* ----------------------------------------------------------------------
 * Record-count drill-down sidebar — appended to <body> by
 * GenericSidebarView, scoped via the sidebar's outer class plus our
 * customClass instead of nesting under .d3view-ontology-app.
 * ---------------------------------------------------------------------- */
.d3view-plugins-sidebar.d3v-ont-records-sidebar .d3v-ont-records-body {
    height: 100%;
    padding: 12px 14px;
}
.d3view-plugins-sidebar.d3v-ont-records-sidebar .d3v-ont-records-status {
    color: var(--d3v-text-secondary, #475569);
    font-size: 13px;
}
.d3view-plugins-sidebar.d3v-ont-records-sidebar .d3v-ont-records-table {
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #ffffff);
    overflow: hidden;
}


.d3view-ontology-app div.d3view-tab-manager {
    border-bottom: none;
}

/* ----------------------------------------------------------------------
 * Split-button — primary "New Ontology" + caret on item view. Both halves
 * share the gradient; caret has a soft white divider + rounded only on
 * the right; zero gap so they read as one pill.
 * ---------------------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-header-new-group {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
    border-radius: var(--d3v-r-md, 6px);
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn {
    height: 32px;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn:first-child {
    border-top-left-radius: var(--d3v-r-md, 6px);
    border-bottom-left-radius: var(--d3v-r-md, 6px);
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn.dropdown-toggle {
    border-top-right-radius: var(--d3v-r-md, 6px);
    border-bottom-right-radius: var(--d3v-r-md, 6px);
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn-primary,
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn-primary:hover,
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn-primary:focus,
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn-primary:active,
.d3view-ontology-app .d3view-ontology-header-new-group.open .d3view-ontology-header-btn-primary {
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
    outline: none;
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn-primary:hover {
    filter: brightness(1.08);
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn.dropdown-toggle {
    padding: 0 10px;
    position: relative;
}
/* White separator between the two halves */
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn.dropdown-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.d3view-ontology-app .d3view-ontology-header-new-group .d3view-ontology-header-btn .caret {
    margin: 0;
    border-top-color: #ffffff;
}

/* ----------------------------------------------------------------------
 * Tour FAB — body-mounted, bottom-right. Scoped by its own class only
 * (NOT under .d3view-ontology-app) since it's appended to <body>.
 * ---------------------------------------------------------------------- */
.d3view-ontology-tour-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06);
    transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease, border-color 150ms ease;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.d3view-ontology-tour-fab:hover {
    color: #3B82F6;
    border-color: #3B82F6;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14), 0 3px 6px rgba(15, 23, 42, 0.08);
}
.d3view-ontology-tour-fab:active { transform: translateY(0); }
.d3view-ontology-app .d3view-ontology-home-dashboard {
    background: var(--d3v-bg-secondary, #f8fafc);
}

/* -----------------------------------------------------------
 * Stat cards (mirrors modelassembler's home-dashboard header)
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-home-stats-wrap {
    padding: 10px 16px 2px;
    background: var(--d3v-bg-primary, #ffffff);
}
.d3view-ontology-app .d3view-ontology-home-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.d3view-ontology-app .d3view-ontology-home-stat-card {
    flex: 1;
    min-width: 200px;
    padding: 14px 16px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.10));
    border-radius: var(--d3v-r-md, 6px);
    background: var(--d3v-bg-primary, #ffffff);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    display: flex;
    align-items: center;
    gap: 12px;
}
.d3view-ontology-app .d3view-ontology-home-stat-card:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(15, 23, 42, 0.08));
    transform: translateY(-1px);
}
.d3view-ontology-app .d3view-ontology-home-stat-card.is-active {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}
.d3view-ontology-app .d3view-ontology-home-stat-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-home-stat-icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(59, 130, 246, 0.10);
    color: var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-sm, 4px);
    flex-shrink: 0;
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-home-stat-count {
    font-weight: 700;
    font-size: 18px;
    color: var(--d3v-text-primary, #0f172a);
    margin-right: 4px;
}
.d3view-ontology-app .d3view-ontology-home-stat-card .lead {
    font-size: 14px;
    line-height: 1.3;
}
.d3view-ontology-app .d3view-ontology-home-stat-chips {
    flex-wrap: nowrap;
    margin: 0;
    overflow: hidden;
    min-width: 0;
    flex: 1;
    gap: 4px;
    display: flex;
}
.d3view-ontology-app .d3view-ontology-home-stat-chip {
    margin: 0;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d3view-ontology-app .d3view-ontology-home-stat-chip.is-parent {
    color: var(--d3v-text-tertiary, #94a3b8);
}

/* -----------------------------------------------------------
 * Toolbar
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-home-toolbar {
    padding: 10px 16px 10px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    box-shadow: var(--d3v-sh-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    flex-shrink: 0;
}

.d3view-ontology-app .d3view-ontology-home-toolbar .pl-inline-filters {
    margin: 0;
}

.d3view-ontology-app .d3view-ontology-home-type-btn {
    min-width: 140px;
    text-align: left;
}

.d3view-ontology-app .d3view-ontology-home-type-btn > i { margin-right: 6px; color: var(--d3v-accent, #3B82F6); }
.d3view-ontology-app .d3view-ontology-home-type-btn .caret { margin-left: 10px; }

.d3view-ontology-app .d3view-ontology-home-type-menu > li > a {
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-home-type-menu > li.active > a {
    background: var(--d3v-bg-hover, rgba(59, 130, 246, 0.08));
    color: var(--d3v-accent, #3B82F6);
}

.d3view-ontology-app .d3view-ontology-home-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 220px;
}
.d3view-ontology-app .d3view-ontology-home-search-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 12px;
    pointer-events: none;
}
.d3view-ontology-app .d3view-ontology-home-search {
    padding-left: 28px;
    padding-right: 26px;
    height: 30px;
}
.d3view-ontology-app .d3view-ontology-home-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--d3v-text-tertiary, #94a3b8);
    padding: 2px 6px;
    cursor: pointer;
}
.d3view-ontology-app .d3view-ontology-home-search-clear:hover { color: var(--d3v-text-primary, #0f172a); }

.d3view-ontology-app .d3view-ontology-home-view-mode-group {
    display: inline-flex;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: var(--d3v-r-md, 6px);
    overflow: hidden;
}
.d3view-ontology-app .d3view-ontology-home-view-mode-btn {
    border: none;
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-secondary, #475569);
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-home-view-mode-btn:hover { background: var(--d3v-bg-hover, rgba(15, 23, 42, 0.04)); }
.d3view-ontology-app .d3view-ontology-home-view-mode-btn.is-active {
    background: var(--d3v-accent, #3B82F6);
    color: #ffffff;
}

.d3view-ontology-app .d3view-ontology-home-refresh {
    width: 30px;
    height: 30px;
    padding: 0;
}

/* Filter mini container — minimum sensible width so the entry button renders */
.d3view-ontology-app .d3view-ontology-home-ext-filters {
    min-width: 160px;
}
.d3view-ontology-app .d3view-ontology-home-ext-filters-container {
    min-width: 0;
}

/* -----------------------------------------------------------
 * Cards body
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-home-cards {
    padding: 16px 20px 24px;
}

.d3view-ontology-app .d3view-ontology-home-source-section {
    margin-bottom: 18px;
}

.d3view-ontology-app .d3view-ontology-home-source-section[data-depth="1"] {
    margin: 4px 0 4px 28px;
    padding: 8px 10px;
    background: var(--d3v-bg-tertiary, #f1f5f9);
    border-left: 3px solid var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-md, 6px);
}

.d3view-ontology-app .d3view-ontology-home-source-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-ontology-app .d3view-ontology-home-source-header > i {
    color: var(--d3v-accent, #3B82F6);
    font-size: 13px;
}
.d3view-ontology-app .d3view-ontology-home-source-badge {
    margin-left: auto;
    background: var(--d3v-accent, #3B82F6);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
}

/* Added by shashank2104 on 2026-04-23 - DVFIV pagination.
 * Compact prev/next pager in the section header (mirrors
 * d3viewdashboard's .db-widget-pagination pattern). */
.d3view-ontology-app .d3view-ontology-home-source-pager {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.d3view-ontology-app .d3view-ontology-home-source-pager:empty {
    display: none;
}
.d3view-ontology-app .d3view-ontology-home-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--d3v-border, #e2e8f0);
    border-radius: var(--d3v-r-sm, 4px);
    background: var(--d3v-bg-primary, #ffffff);
    color: var(--d3v-text-secondary, #475569);
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
    outline: none;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.d3view-ontology-app .d3view-ontology-home-pager-btn:hover:not([disabled]) {
    background: var(--d3v-accent, #3B82F6);
    border-color: var(--d3v-accent, #3B82F6);
    color: #ffffff;
}
.d3view-ontology-app .d3view-ontology-home-pager-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.d3view-ontology-app .d3view-ontology-home-pager-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3v-text-secondary, #475569);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    user-select: none;
}
.d3view-ontology-app .d3view-ontology-home-pager-sep {
    color: var(--d3v-text-muted, #94A3B8);
    margin: 0 2px;
    font-weight: 500;
}

/* -----------------------------------------------------------
 * Entity card
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-home-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    border-radius: var(--d3v-r-md, 8px);
    background: var(--d3v-bg-primary, #ffffff);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.d3view-ontology-app .d3view-ontology-home-card:hover {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: var(--d3v-sh-sm, 0 2px 6px rgba(15, 23, 42, 0.08));
    transform: translateY(-1px);
}

.d3view-ontology-app .d3view-ontology-home-card-collapse {
    border: none;
    background: transparent;
    color: var(--d3v-text-tertiary, #94a3b8);
    padding: 4px 6px;
    cursor: pointer;
    transition: transform 140ms ease, color 140ms ease;
    visibility: hidden;
}
.d3view-ontology-app .d3view-ontology-home-card-has-children .d3view-ontology-home-card-collapse { visibility: visible; }
.d3view-ontology-app .d3view-ontology-home-card.is-expanded .d3view-ontology-home-card-collapse { transform: rotate(90deg); color: var(--d3v-accent, #3B82F6); }

.d3view-ontology-app .d3view-ontology-home-card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    color: var(--d3v-accent, #3B82F6);
    border-radius: var(--d3v-r-sm, 4px);
}

.d3view-ontology-app .d3view-ontology-home-card-body {
    flex: 1;
    min-width: 0;
}

.d3view-ontology-app .d3view-ontology-home-card-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.d3view-ontology-app .d3view-ontology-home-card-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--d3v-text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.d3view-ontology-app .d3view-ontology-home-card-id {
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 11.5px;
    font-family: monospace;
}

.d3view-ontology-app .d3view-ontology-home-card-desc {
    color: var(--d3v-text-secondary, #475569);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.d3view-ontology-app .d3view-ontology-home-card-meta {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.d3view-ontology-app .d3view-ontology-home-card-meta-chip {
    background: var(--d3v-bg-secondary, #f8fafc);
    color: var(--d3v-text-secondary, #475569);
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10.5px;
}

.d3view-ontology-app .d3view-ontology-home-card-actions button {
    height: 28px;
}

/* Child mount (collapsible) */
.d3view-ontology-app .d3view-ontology-home-card-children {
    margin-left: 40px;
    padding: 4px 0 4px 4px;
    border-left: 2px dotted var(--d3v-border-subtle, rgba(15, 23, 42, 0.10));
}

/* -----------------------------------------------------------
 * Empty + loading states
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-home-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--d3v-text-secondary, #475569);
}
.d3view-ontology-app .d3view-ontology-home-empty > i {
    font-size: 32px;
    color: var(--d3v-text-tertiary, #94a3b8);
    margin-bottom: 8px;
}
.d3view-ontology-app .d3view-ontology-home-empty > h3 {
    font-size: 15px;
    margin: 6px 0 4px;
}
.d3view-ontology-app .d3view-ontology-home-empty > p {
    font-size: 13px;
    margin: 0;
}

.d3view-ontology-app .d3view-ontology-home-empty-inline {
    padding: 8px 12px;
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 12.5px;
    font-style: italic;
}

.d3view-ontology-app .d3view-ontology-home-loading {
    padding: 14px;
    color: var(--d3v-text-secondary, #475569);
    font-size: 12.5px;
}
.d3view-ontology-app .d3view-ontology-home-loading > i {
    color: var(--d3v-accent, #3B82F6);
    margin-right: 6px;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-loading {
    padding: 48px;
    text-align: center;
    font-size: 13px;
    color: var(--d3v-text-secondary, #475569);
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-loading i {
    margin-right: 6px;
    color: var(--d3v-accent, #3B82F6);
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-desc {
    color: var(--d3v-text-secondary, #475569);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-workflow {
    background: var(--d3v-bg-secondary, #f8fafc);
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-form .form-group {
    margin-bottom: 14px;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-form label {
    font-size: 12px;
    font-weight: 600;
    color: var(--d3v-text-primary, #0f172a);
    margin-bottom: 4px;
    display: block;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-form .form-control {
    border: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: var(--d3v-r-md, 6px);
    padding: 8px 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-form .form-control:focus {
    border-color: var(--d3v-accent, #3B82F6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-upload input[type="file"] {
    padding: 12px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border: 2px dashed var(--d3v-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: var(--d3v-r-md, 8px);
    width: 100%;
    font-size: 13px;
    cursor: pointer;
}

.d3view-ontology-new-entity-modal .d3view-ontology-new-entity-upload input[type="file"]:hover {
    border-color: var(--d3v-accent, #3B82F6);
    background: rgba(59, 130, 246, 0.04);
}

.d3view-ontology-app .d3view-ontology-inner-wrapper {
    background: var(--d3v-bg-secondary, #f8fafc);
    min-height: 0;
}

.d3view-ontology-app .d3view-ontology-inner-tabmanager {
    flex-shrink: 0;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
}

.d3view-ontology-app .d3view-ontology-inner-content {
    min-height: 0;
}

.d3view-ontology-app .d3view-ontology-inner-panel {
    display: none;
    min-height: 0;
}

/* -----------------------------------------------------------
 * Entity detail header
 * ----------------------------------------------------------- */
.d3view-ontology-app .d3view-ontology-entity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--d3v-bg-primary, #ffffff);
    border-bottom: 1px solid var(--d3v-border-subtle, rgba(15, 23, 42, 0.08));
    flex-shrink: 0;
}

.d3view-ontology-app .d3view-ontology-entity-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.d3view-ontology-app .d3view-ontology-entity-header-title > i {
    color: var(--d3v-accent, #3B82F6);
    font-size: 15px;
}

.d3view-ontology-app .d3view-ontology-entity-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--d3v-text-primary, #0f172a);
}

.d3view-ontology-app .d3view-ontology-entity-id {
    color: var(--d3v-text-tertiary, #94a3b8);
    font-size: 12px;
    font-family: monospace;
}

.d3view-ontology-app .d3view-ontology-entity-header-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    background: var(--d3v-bg-secondary, #f8fafc);
    border-radius: 10px;
    color: var(--d3v-text-secondary, #475569);
    font-weight: 600;
}

/* /javascripts/plugins_src/agents/agents.css */
/*
 * agents.css -- the Agents app (LLM nodes).
 *
 * Scope: every selector is prefixed .d3agents-* and, where it can be, scoped
 * under .d3agents-app so nothing here can leak into another plugin. The modal
 * is the one exception -- it is appended to <body>, so it is scoped by its own
 * .d3agents-dialog-overlay class instead.
 *
 * Colours/radii/shadows come from the --d3v-* foundation tokens in
 * plugins/plugins.css. Nothing is redefined here.
 *
 * TWO THINGS THAT LOOK LIKE CRUFT AND ARE NOT:
 *
 * 1. `!important` on .d3agents-adv-body / .d3agents-field visibility.
 *    d3VIEW's core stylesheet ships an unscoped `label { display: block
 *    !important; }`. An author !important outranks an inline style, so
 *    jQuery's .hide() (which writes style="display:none") is a SILENT NO-OP on
 *    a <label> and on any container whose visibility a rule of that strength
 *    reaches. Visibility here is therefore toggled by CLASS, and the class
 *    rules carry !important so they win. Do not "simplify" these to .hide().
 *
 * 2. `left: var(--d3v-rail-w, 0px)` on the fixed overlay. d3VIEW pins an app
 *    rail to the left edge; a fixed surface at left:0 would sit under it. The
 *    0px fallback keeps this correct on a host with no rail.
 */
/** Added by rahul.suri on 2026-08-16 - Agents app (LLM nodes) **/

/* ------------------------------------------------------------------ */
/* App frame: rail + surface                                          */
/* ------------------------------------------------------------------ */

.d3agents-app {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-height: 0;
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 13px;
}

.d3agents-app .d3agents-rail {
    flex: 0 0 auto;
    width: 84px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px;
    border-right: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
}

.d3agents-app .d3agents-rail-brand {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
    padding: 2px 4px 10px;
}

.d3agents-app .d3agents-rail-tabs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    overflow-y: auto;
}

.d3agents-app .d3agents-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    border: 1px solid transparent;
    border-radius: var(--d3v-r-md);
    background: transparent;
    color: var(--d3v-text-secondary);
    cursor: pointer;
    transition: var(--d3v-t-fast);
}

.d3agents-app .d3agents-tab:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

.d3agents-app .d3agents-tab.is-active {
    background: var(--d3v-bg-primary);
    border-color: var(--d3v-border-strong);
    color: var(--d3v-accent);
    box-shadow: var(--d3v-sh-xs);
}

.d3agents-app .d3agents-tab-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.d3agents-app .d3agents-tab-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.d3agents-app .d3agents-surface {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3agents-app .d3agents-missing {
    padding: 24px;
    color: var(--d3v-text-muted);
}

/* ------------------------------------------------------------------ */
/* Nodes tab: split layout (list left, chat pane right)               */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-nodes {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3agents-app .d3agents-nodes-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.d3agents-app .d3agents-nodes-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3agents-app .d3agents-chat-slot {
    flex: 0 0 auto;
    width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
    border-left: 1px solid transparent;
    transition: width .18s ease;
}

.d3agents-app .d3agents-nodes-body.has-chat .d3agents-chat-slot {
    width: 420px;
    border-left-color: var(--d3v-border);
}

@media (max-width: 1100px) {
    .d3agents-app .d3agents-nodes-body.has-chat .d3agents-chat-slot { width: 340px; }
}

/* ------------------------------------------------------------------ */
/* Toolbar                                                            */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--d3v-border);
}

.d3agents-app .d3agents-toolbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--d3v-text-primary);
}

.d3agents-app .d3agents-toolbar-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--d3v-text-muted);
}

.d3agents-app .d3agents-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.d3agents-app .d3agents-counts {
    font-size: 12px;
    color: var(--d3v-text-muted);
    white-space: nowrap;
    margin-right: 4px;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */

.d3agents-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--d3v-border-strong);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--d3v-t-fast);
}

.d3agents-btn:hover:not(:disabled) {
    background: var(--d3v-bg-hover);
}

.d3agents-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.d3agents-btn-primary {
    background: var(--d3v-accent);
    border-color: var(--d3v-accent);
    color: var(--d3v-text-inverse);
}

.d3agents-btn-primary:hover:not(:disabled) {
    background: var(--d3v-accent-hover);
    border-color: var(--d3v-accent-hover);
}

.d3agents-btn-danger {
    background: var(--d3v-danger);
    border-color: var(--d3v-danger);
    color: var(--d3v-text-inverse);
}

.d3agents-btn-danger:hover:not(:disabled) {
    filter: brightness(.94);
}

.d3agents-btn-ghost-danger {
    border-color: var(--d3v-border);
    color: var(--d3v-danger);
}

.d3agents-btn-ghost-danger:hover:not(:disabled) {
    background: var(--d3v-bg-tertiary);
    border-color: var(--d3v-danger);
}

.d3agents-btn-sm {
    padding: 3px 9px;
    font-size: 11px;
}

.d3agents-app .d3agents-refresh-btn.is-loading {
    opacity: .6;
    pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Status line                                                        */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-status {
    display: none;
    flex: 0 0 auto;
    margin: 10px 20px 0;
    padding: 8px 12px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-secondary);
    font-size: 12px;
    color: var(--d3v-text-secondary);
}

.d3agents-app .d3agents-status.is-shown { display: block; }

.d3agents-app .d3agents-status.is-ok {
    border-color: var(--d3v-success);
    color: var(--d3v-success);
    background: var(--d3v-bg-primary);
}

.d3agents-app .d3agents-status.is-err {
    border-color: var(--d3v-danger);
    color: var(--d3v-danger);
    background: var(--d3v-bg-primary);
}

/* ------------------------------------------------------------------ */
/* Table                                                              */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 20px 20px;
}

.d3agents-app .d3agents-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

.d3agents-app .d3agents-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 8px 10px;
    background: var(--d3v-bg-secondary);
    border-bottom: 1px solid var(--d3v-border-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
    white-space: nowrap;
}

.d3agents-app .d3agents-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--d3v-border);
    vertical-align: middle;
    color: var(--d3v-text-secondary);
}

.d3agents-app .d3agents-table tbody tr:hover td {
    background: var(--d3v-bg-secondary);
}

.d3agents-app .d3agents-table tbody tr.is-chatting td {
    background: var(--d3v-bg-tertiary);
}

.d3agents-app .d3agents-model {
    font-weight: 650;
    color: var(--d3v-text-primary);
    word-break: break-all;
}

.d3agents-app .d3agents-c-when { white-space: nowrap; }

.d3agents-app .d3agents-col-act,
.d3agents-app .d3agents-c-act {
    text-align: right;
    white-space: nowrap;
}

.d3agents-app .d3agents-c-act .d3agents-btn + .d3agents-btn { margin-left: 6px; }

.d3agents-app .d3agents-ep {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    padding: 2px 6px;
    border-radius: var(--d3v-r-sm);
    background: var(--d3v-bg-tertiary);
    color: var(--d3v-text-secondary);
    word-break: break-all;
}

.d3agents-app .d3agents-dim { color: var(--d3v-text-muted); }

.d3agents-app .d3agents-empty-row td {
    padding: 28px 10px;
    text-align: center;
    color: var(--d3v-text-muted);
}

/* Status pills: live green, pending amber, ended grey. */
.d3agents-app .d3agents-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--d3v-r-full);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.6;
    text-transform: lowercase;
    white-space: nowrap;
}

.d3agents-app .d3agents-pill-live {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .35);
    color: var(--d3v-success);
}

.d3agents-app .d3agents-pill-pending {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .38);
    color: #B45309;
}

.d3agents-app .d3agents-pill-terminal {
    background: var(--d3v-bg-tertiary);
    border-color: var(--d3v-border);
    color: var(--d3v-text-muted);
}

/* ------------------------------------------------------------------ */
/* Chat pane                                                          */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-chatpane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary);
}

.d3agents-app .d3agents-chatpane-hd {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--d3v-border);
}

.d3agents-app .d3agents-chatpane-hd-main {
    flex: 1 1 auto;
    min-width: 0;
}

.d3agents-app .d3agents-chatpane-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--d3v-text-primary);
    word-break: break-all;
}

.d3agents-app .d3agents-chatpane-sub {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
}

.d3agents-app .d3agents-chatpane-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--d3v-r-sm);
    background: transparent;
    color: var(--d3v-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.d3agents-app .d3agents-chatpane-close:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

.d3agents-app .d3agents-chatpane-meta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-bottom: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: var(--d3v-text-muted);
    word-break: break-all;
}

/* The AgentChat widget is a flex column with height:100% -- it needs a parent
   that resolves to a real height, or it collapses to nothing. flex:1 plus
   min-height:0 is what gives it one inside this column. */
.d3agents-app .d3agents-chatpane-host {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.d3agents-app .d3agents-chatpane-host > .agentchat-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.d3agents-app .d3agents-chatpane-missing {
    padding: 20px 14px;
    font-size: 12px;
    color: var(--d3v-text-muted);
}

/* ------------------------------------------------------------------ */
/* Dialog (appended to <body>, so scoped by its own class)            */
/* ------------------------------------------------------------------ */

.d3agents-dialog-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Yield the d3VIEW pin-left app rail -- see the header note. */
    left: var(--d3v-rail-w, 0px);
    z-index: 10600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .42);
}

.d3agents-dialog-overlay .d3agents-dialog {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--d3v-bg-primary);
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-lg);
    box-shadow: var(--d3v-sh-xl);
    font-size: 13px;
    color: var(--d3v-text-primary);
}

.d3agents-dialog-overlay .d3agents-dialog-hd {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d3v-border);
}

.d3agents-dialog-overlay .d3agents-dialog-title {
    font-size: 14px;
    font-weight: 700;
}

.d3agents-dialog-overlay .d3agents-dialog-x {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: var(--d3v-r-sm);
    background: transparent;
    color: var(--d3v-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.d3agents-dialog-overlay .d3agents-dialog-x:hover {
    background: var(--d3v-bg-hover);
    color: var(--d3v-text-primary);
}

.d3agents-dialog-overlay .d3agents-dialog-bd {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.d3agents-dialog-overlay .d3agents-dialog-ft {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--d3v-border);
    background: var(--d3v-bg-secondary);
    border-radius: 0 0 var(--d3v-r-lg) var(--d3v-r-lg);
}

.d3agents-dialog-overlay .d3agents-dialog-err {
    display: none;
    margin: 0 16px 12px;
    padding: 8px 10px;
    border: 1px solid var(--d3v-danger);
    border-radius: var(--d3v-r-md);
    font-size: 12px;
    color: var(--d3v-danger);
}

.d3agents-dialog-overlay .d3agents-dialog-err.is-shown { display: block; }

.d3agents-dialog-overlay.is-busy { cursor: progress; }

.d3agents-dialog-overlay .d3agents-confirm-lead {
    margin: 0 0 8px;
    font-size: 13px;
}

.d3agents-dialog-overlay .d3agents-confirm-sub {
    margin: 0;
    font-size: 12px;
    color: var(--d3v-text-muted);
}

/* ------------------------------------------------------------------ */
/* Form fields                                                        */
/* ------------------------------------------------------------------ */

/* Class-driven visibility -- NOT .hide(). See note 1 in the file header. */
.d3agents-dialog-overlay .d3agents-field { display: block !important; }
.d3agents-dialog-overlay .d3agents-field.is-hidden { display: none !important; }

.d3agents-dialog-overlay .d3agents-field + .d3agents-field { margin-top: 14px; }

.d3agents-dialog-overlay .d3agents-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
    margin-bottom: 5px;
}

.d3agents-dialog-overlay .d3agents-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid var(--d3v-border-strong);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 13px;
    line-height: 1.4;
}

.d3agents-dialog-overlay .d3agents-input:focus {
    outline: none;
    border-color: var(--d3v-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.d3agents-dialog-overlay .d3agents-help {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
}

.d3agents-dialog-overlay .d3agents-help code {
    padding: 0 3px;
    border-radius: var(--d3v-r-sm);
    background: var(--d3v-bg-tertiary);
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

.d3agents-dialog-overlay .d3agents-adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--d3v-accent);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.d3agents-dialog-overlay .d3agents-adv-toggle:before {
    content: '\25B8';
    font-size: 10px;
    transition: var(--d3v-t-fast);
}

.d3agents-dialog-overlay .d3agents-adv-toggle.is-open:before {
    content: '\25BE';
}

/* Class-driven visibility -- NOT .hide(). See note 1 in the file header. */
.d3agents-dialog-overlay .d3agents-adv-body {
    display: block !important;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--d3v-border);
}

.d3agents-dialog-overlay .d3agents-adv-body.is-collapsed { display: none !important; }

/* ------------------------------------------------------------------ */
/* Generic tab pane (Conversations / Artifacts / Jobs)                */
/* ------------------------------------------------------------------ */

/* Every table tab is the same shape as the Nodes tab's main column: a
   full-height flex column whose table-wrap is the only scroller. */
.d3agents-app .d3agents-convs,
.d3agents-app .d3agents-artifacts,
.d3agents-app .d3agents-jobs,
.d3agents-app .d3agents-agents {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3agents-app .d3agents-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.d3agents-app .d3agents-status.is-info {
    border-color: var(--d3v-accent);
    color: var(--d3v-text-secondary);
    background: var(--d3v-bg-primary);
}

/* A standing caveat about the data below it (a truncated list, a row
   ceiling) -- distinct from the transient status line, which reports what
   just happened. */
.d3agents-app .d3agents-note {
    display: none;
    flex: 0 0 auto;
    margin: 10px 20px 0;
    padding: 7px 11px;
    border-left: 3px solid rgba(245, 158, 11, .55);
    background: rgba(245, 158, 11, .08);
    border-radius: var(--d3v-r-sm);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--d3v-text-secondary);
}

.d3agents-app .d3agents-note.is-shown { display: block; }

/* The counts read as a summary line under the toolbar rather than a chip
   inside it when there are per-status breakdowns to show. */
.d3agents-app .d3agents-counts-block {
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 20px 0;
    white-space: normal;
}

/* ------------------------------------------------------------------ */
/* Toolbar controls: search, select, scope toggle                     */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-search-input {
    width: 200px;
    padding: 5px 10px;
    border: 1px solid var(--d3v-border-strong);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 12px;
    line-height: 1.4;
}

.d3agents-app .d3agents-search-input:focus {
    outline: none;
    border-color: var(--d3v-accent);
}

.d3agents-app .d3agents-select {
    max-width: 170px;
    padding: 5px 8px;
    border: 1px solid var(--d3v-border-strong);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    color: var(--d3v-text-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.d3agents-app .d3agents-select:focus {
    outline: none;
    border-color: var(--d3v-accent);
}

.d3agents-app .d3agents-scope {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-tertiary);
}

.d3agents-app .d3agents-scope-btn {
    border: 0;
    background: transparent;
    color: var(--d3v-text-muted);
    padding: 4px 11px;
    border-radius: var(--d3v-r-sm);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--d3v-t-fast);
}

.d3agents-app .d3agents-scope-btn:hover { color: var(--d3v-text-primary); }

.d3agents-app .d3agents-scope-btn.is-active {
    background: var(--d3v-bg-primary);
    color: var(--d3v-accent);
    box-shadow: var(--d3v-sh-sm, 0 1px 3px rgba(0, 0, 0, .1));
}

/* ------------------------------------------------------------------ */
/* Table cell atoms shared by the new tabs                            */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-strong {
    font-weight: 650;
    color: var(--d3v-text-primary);
    word-break: break-word;
}

/* The second line of a two-line cell (a target's name under its ref, a
   job's source under its agent). */
.d3agents-app .d3agents-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--d3v-text-muted);
    word-break: break-word;
}

.d3agents-app .d3agents-mono {
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    color: var(--d3v-text-primary);
}

.d3agents-app .d3agents-err-text {
    color: var(--d3v-danger);
    word-break: break-word;
}

.d3agents-app .d3agents-c-size,
.d3agents-app .d3agents-col-size,
.d3agents-app .d3agents-c-attempts,
.d3agents-app .d3agents-col-attempts {
    white-space: nowrap;
    text-align: right;
}

.d3agents-app .d3agents-col-error,
.d3agents-app .d3agents-c-error { max-width: 320px; }

.d3agents-app .d3agents-col-title,
.d3agents-app .d3agents-col-name { min-width: 200px; }

/* aria-disabled rather than the disabled attribute: a disabled control gets
   no mouse events, so the title explaining WHY it is unavailable never
   appears. The class carries the look; the handler carries the refusal. */
.d3agents-app .d3agents-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

.d3agents-app .d3agents-btn.is-disabled:hover { background: var(--d3v-bg-primary); }

/* Off-screen rather than display:none -- a hidden iframe must still be
   navigable for the download it carries to start. */
.d3agents-app .d3agents-dl-frame {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    left: -9999px;
    top: -9999px;
}

/* ------------------------------------------------------------------ */
/* Job status pills (on top of the shared .d3agents-pill base)        */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-pill-done {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .35);
    color: var(--d3v-success);
}

.d3agents-app .d3agents-pill-running {
    background: rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .38);
    color: #1D4ED8;
}

.d3agents-app .d3agents-pill-queued {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .38);
    color: #B45309;
}

.d3agents-app .d3agents-pill-failed {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .38);
    color: var(--d3v-danger);
}

.d3agents-app .d3agents-pill-other {
    background: var(--d3v-bg-tertiary);
    border-color: var(--d3v-border);
    color: var(--d3v-text-muted);
}

/* ------------------------------------------------------------------ */
/* Agents tab: roster left, persistent chat right                     */
/* ------------------------------------------------------------------ */

.d3agents-app .d3agents-agents-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.d3agents-app .d3agents-roster {
    flex: 0 0 auto;
    width: 320px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--d3v-border);
}

.d3agents-app .d3agents-roster-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px 16px;
}

.d3agents-app .d3agents-roster-item {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    padding: 9px 11px;
    border: 1px solid var(--d3v-border);
    border-radius: var(--d3v-r-md);
    background: var(--d3v-bg-primary);
    cursor: pointer;
    transition: var(--d3v-t-fast);
}

.d3agents-app .d3agents-roster-item:hover { background: var(--d3v-bg-hover); }

.d3agents-app .d3agents-roster-item.is-selected {
    border-color: var(--d3v-accent);
    background: var(--d3v-bg-tertiary);
}

.d3agents-app .d3agents-roster-item.is-disabled {
    opacity: .6;
    cursor: not-allowed;
}

.d3agents-app .d3agents-roster-item.is-disabled:hover { background: var(--d3v-bg-primary); }

.d3agents-app .d3agents-roster-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--d3v-text-primary);
    word-break: break-word;
}

.d3agents-app .d3agents-roster-tagline {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--d3v-text-muted);
}

.d3agents-app .d3agents-roster-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.d3agents-app .d3agents-roster-tools {
    font-size: 10.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--d3v-text-muted);
}

.d3agents-app .d3agents-roster-flag {
    padding: 1px 7px;
    border-radius: var(--d3v-r-full);
    background: var(--d3v-bg-tertiary);
    border: 1px solid var(--d3v-border);
    font-size: 10px;
    font-weight: 650;
    color: var(--d3v-text-muted);
    white-space: nowrap;
}

.d3agents-app .d3agents-roster-empty {
    padding: 24px 6px;
    text-align: center;
    font-size: 12px;
    color: var(--d3v-text-muted);
}

/* The chat host has to resolve to a real height or the widget -- a flex
   column at height:100% -- collapses to nothing. Same reasoning as
   .d3agents-chatpane-host above. */
.d3agents-app .d3agents-agent-chat {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--d3v-bg-primary);
}

.d3agents-app .d3agents-agent-chat > .agentchat-shell {
    flex: 1 1 auto;
    min-height: 0;
}

.d3agents-app .d3agents-agent-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-size: 12.5px;
    color: var(--d3v-text-muted);
}

@media (max-width: 1100px) {
    .d3agents-app .d3agents-roster { width: 250px; }
    .d3agents-app .d3agents-search-input { width: 150px; }
}

/* The roster is a 320px column, not a full-width surface: the shared toolbar
   and status line are re-laid-out for it rather than given their own markup,
   so both stay one implementation. */
.d3agents-app .d3agents-roster .d3agents-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 12px 10px;
}

.d3agents-app .d3agents-roster .d3agents-toolbar-actions {
    justify-content: space-between;
}

.d3agents-app .d3agents-roster .d3agents-counts { margin-right: 0; }

.d3agents-app .d3agents-roster .d3agents-status { margin: 8px 12px 0; }

/* /javascripts/plugins_src/text_diff_checker/text_diff_checker.css */
.text-diff-checker {
    height: 100%;
    position: relative;
    margin: 0px !important;
    display: flex;
    flex-direction: column;
}

.text-diff-checker .left-div {
    height: 100%;
    position: relative;
    padding: 0px;
}

.text-diff-checker .right-div {
    height: 100%;
    position: relative;
    padding: 0px ;
}

.text-diff-checker .text-editor-title {
    width: 100%;
    border: 0.5px solid #eee;
    position: relative;
}

.text-diff-checker .text-editor-body {
    width: 100%;
    height: 90%;
}

.text-diff-checker .left-line-changed {
    background-color: rgb(245, 224, 212);
}

.text-diff-checker .word-removed {
    background-color: rgb(247, 195, 165);
    color: #2c2c2c;
    position: absolute;
}

.text-diff-checker .right-line-changed {
    background-color: rgb(217, 252, 237);
}

.text-diff-checker .word-added {
    background-color: rgb(169, 252, 217);
    color: #2c2c2c;
    position: absolute;
}

.text-diff-checker ul.legends {
    padding: 0px;
    margin-bottom: 0px;

}

.text-diff-checker li.legends-item {
    display: inline-flex;
    list-style: none;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    flex-wrap: wrap;
}

.text-diff-checker li.legends-item:hover {
    cursor: pointer;
}

.text-diff-checker .back-to-top {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #333;
    color: #fff;
    z-index: 9999;
}

.text-diff-checker .td-header {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

.text-diff-checker .search-container {
    margin-right: 15px;
}

.text-diff-checker .search-container .form-control {
    padding: 8px 12px;
    height: auto;
}

.text-diff-checker .settings-dropdown {
    margin-left: 10px;
}

.text-diff-checker .settings-dropdown .dropdown-menu {
    min-width: 220px;
    padding: 15px;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.text-diff-checker .settings-dropdown .form-group {
    margin-bottom: 10px;
}

.text-diff-checker .settings-dropdown .form-group:last-child {
    margin-bottom: 0;
}

.text-diff-checker .settings-dropdown .checkbox-inline {
    display: block;
    margin: 0;
    width: 100%;
    padding: 5px 0;
}

.text-diff-checker .settings-dropdown .checkbox-inline input[type="checkbox"] {
    margin-right: 8px;
}

/** Added by shashank2104 on 12/16/2025 at 02:58 PM - DVFIV-1871 - Centered line numbers and gutter indicator styles **/

/** Hide Ace gutters completely in centered line numbers mode **/
.text-diff-checker.centered-line-numbers-mode .ace_gutter {
    display: none !important;
}

.text-diff-checker .diff-editors-row {
    display: flex;
    flex: 1;
    height: calc(100% - 100px);
}

.text-diff-checker .left-gutter-indicator,
.text-diff-checker .right-gutter-indicator {
    width: 14px;
    background: #f5f5f5;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.text-diff-checker .left-gutter-indicator {
    border-right: 1px solid #ddd;
}

.text-diff-checker .right-gutter-indicator {
    border-left: 1px solid #ddd;
}

.text-diff-checker .gutter-marker {
    position: absolute;
    width: 100%;
    height: 3px;
    cursor: pointer;
    transition: height 0.1s ease, opacity 0.1s ease;
    opacity: 0.9;
    z-index: 2;
}

.text-diff-checker .gutter-marker:hover {
    height: 5px;
    opacity: 1;
}

.text-diff-checker .gutter-viewport-indicator {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    z-index: 1;
    pointer-events: none;
    min-height: 10px;
}

.text-diff-checker .center-line-numbers {
    width: 50px;
    background: #f8f8f8;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}

.text-diff-checker .center-line-nums-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: monospace;
    font-size: 12px;
    color: #999;
}

.text-diff-checker .center-line-num {
    padding: 0 5px;
    box-sizing: border-box;
}

.text-diff-checker .diff-titles-row {
    display: flex;
}

.text-diff-checker .left-title-section,
.text-diff-checker .right-title-section {
    flex: 1;
    padding: 0 10px;
}

/** Added by shashank2104 on 12/19/2025 at 10:27 AM - DVFIV-1873 - VCS Merge Mode Styles **/
/** Updated by shashank2104 on 12/19/2025 at 01:55 PM - DVFIV-1873 - Improved toolbar with navigation **/

/** VCS Merge Mode Container **/
.text-diff-checker.vcs-merge-mode {
    border: 2px solid #4a90d9;
}

.text-diff-checker.vcs-merge-mode .merge-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    gap: 15px;
}

/** Navigation Section **/
.text-diff-checker.vcs-merge-mode .merge-toolbar .merge-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.text-diff-checker.vcs-merge-mode .merge-toolbar .merge-nav-counter {
    font-size: 13px;
    font-weight: 500;
    padding: 0 8px;
    min-width: 60px;
    text-align: center;
}

.text-diff-checker.vcs-merge-mode .merge-toolbar .merge-nav-counter .current-diff {
    color: #337ab7;
    font-weight: bold;
}

/** Stats Section **/
.text-diff-checker.vcs-merge-mode .merge-toolbar .merge-stats {
    display: flex;
    gap: 12px;
    align-items: center;
}

.text-diff-checker.vcs-merge-mode .merge-toolbar .stat-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/** Actions Section **/
.text-diff-checker.vcs-merge-mode .merge-toolbar .merge-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/** Merge Buttons in Center Gutter - IntelliJ Style **/
/** Updated by shashank2104 on 12/19/2025 at 01:55 PM - DVFIV-1873 - Fixed positioning, added highlight **/
.text-diff-checker .center-line-num {
    position: relative;
}

.text-diff-checker.vcs-merge-mode .center-line-nums-content {
    position: relative;
}

.text-diff-checker.vcs-merge-mode .merge-button {
    position: absolute;
    right: 2px !important;
    left: auto !important;
    background: #4a90d9;
    color: white;
    border: none;
    border-radius: 2px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    opacity: 1;
    display: block;
    z-index: 10;
    line-height: 14px;
    height: 14px;
    font-family: monospace;
    box-sizing: border-box;
}

.text-diff-checker.vcs-merge-mode .merge-button:hover {
    background: #357abd;
    transform: scale(1.1);
}

.text-diff-checker.vcs-merge-mode .merge-button.highlight {
    background: #ffc66d;
    color: #2b2b2b;
    box-shadow: 0 0 8px rgba(255, 198, 109, 0.8);
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/** Updated by shashank2104 on 12/19/2025 at 04:25 PM - DVFIV-1873 - Merged buttons now clickable to revert **/
.text-diff-checker.vcs-merge-mode .merge-button.merged {
    background: #5cb85c;
    cursor: pointer;
}

.text-diff-checker.vcs-merge-mode .merge-button.merged:hover {
    background: #d9534f;
    transform: scale(1.1);
}

/** Merge button for removed lines (insert from left) - bootstrap warning color **/
.text-diff-checker.vcs-merge-mode .merge-button[data-type="removed"] {
    background: #f0ad4e;
}

.text-diff-checker.vcs-merge-mode .merge-button[data-type="removed"]:hover {
    background: #ec971f;
}

/** Merge button for modified lines - bootstrap primary color **/
.text-diff-checker.vcs-merge-mode .merge-button[data-type="modified"] {
    background: #337ab7;
}

.text-diff-checker.vcs-merge-mode .merge-button[data-type="modified"]:hover {
    background: #286090;
}

/** Make right editor editable appearance **/
.text-diff-checker.vcs-merge-mode .next-text-editor {
    border: 2px solid #28a745;
    border-radius: 4px;
}

.text-diff-checker.vcs-merge-mode .next-text-editor .ace_cursor {
    border-left-color: #28a745 !important;
}

/** Editable indicator **/
.text-diff-checker.vcs-merge-mode .right-title-section .text-editor-title::after {
    content: '(Editable)';
    position: absolute;
    top: 5px;
    right: 10px;
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}


.text-diff-checker .merge-all-button.disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/** Center line numbers in merge mode - make wider for buttons **/
.text-diff-checker.vcs-merge-mode .center-line-numbers {
    width: 45px;
    position: relative;
    overflow: visible;
}

.text-diff-checker.vcs-merge-mode .center-line-nums-content {
    position: relative;
}

/** Highlight merged lines in center gutter **/
.text-diff-checker .center-line-num.merged {
    background: rgba(40, 167, 69, 0.1);
}

/** Animation for merge button click **/
@keyframes mergeSuccess {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.3); }
    100% { transform: translateY(-50%) scale(1); }
}

.text-diff-checker .merge-button.merged {
    animation: mergeSuccess 0.3s ease;
}

/** Modified line indicator enhancement in merge mode **/
.text-diff-checker.vcs-merge-mode .left-line-changed {
    background-color: rgba(245, 224, 212, 0.8);
    border-left: 3px solid #f7c3a5;
}

.text-diff-checker.vcs-merge-mode .right-line-changed {
    background-color: rgba(217, 252, 237, 0.8);
    border-left: 3px solid #a9fcd9;
}

/** Added by shashank2104 on 12/19/2025 at 11:12 AM - DVFIV-1873 - Merge button container styles **/
.text-diff-checker .merge-button-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.text-diff-checker .btn-merge {
    position: absolute;
    right: 2px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
    line-height: 1;
    pointer-events: auto;
    font-weight: bold;
}

.text-diff-checker .btn-merge:hover {
    background: #218838;
    transform: scale(1.1);
}

.text-diff-checker .btn-merge.merged {
    background: #6c757d;
    cursor: default;
    pointer-events: none;
}

.text-diff-checker .btn-merge.merged:hover {
    transform: none;
}

/** Enable merge mode button style **/
.text-diff-checker .enable-merge-mode-btn {
    margin-right: 10px;
    color: #5bc0de;
    border-color: #5bc0de;
}

.text-diff-checker .enable-merge-mode-btn:hover {
    background: #5bc0de;
    color: white;
}

/** Exit merge button style **/
.text-diff-checker .disable-merge-mode-btn {
    color: #666;
    border-color: #ccc;
}

.text-diff-checker .disable-merge-mode-btn:hover {
    background: #f5f5f5;
}
/* /javascripts/plugins_src/template_configurator/template_configurator.css */

div.d3view-pl-template-sensors div.d3view-inputsBuilder {
    min-height: unset;
}
div.d3view-pl-template-sensors div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item > div.row,
div.d3view-pl-template-sensors div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item > div.row > * {
    padding: 0;
}
div.d3view-pl-template-sensors div.d3view-inputsBuilder li.field-item .input-name .field-name {
    font-size: unset;
}
div.d3view-pl-template-sensors div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items li.field-item .ip-values,
div.d3view-pl-template-sensors div.d3view-inputsBuilder .inputs-view-content[data-id="simple"] ul.field-items .field-group-item {
    display: none!important;
}

div.d3view-pl-template-sensors .loadcases-list, div.d3view-pl-template-sensors .templates-list {
    height: 250px;
}
div.d3view-pl-template-sensors .loadcases-list .lc-item {
    height: 200px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid #DDD;
    box-shadow: var(--plugin-box-shadow-lightest);
}
div.d3view-pl-template-sensors .loadcases-list .lc-item.selected,
div.d3view-pl-template-sensors .templates-list .tl-item.selected .tl-contents {
    border-color: steelblue;
    border-width: 3px;
}

div.d3view-pl-template-sensors .templates-list .tl-item {
    height: 200px;
    margin: 10px;
}
div.d3view-pl-template-sensors .templates-list .tl-contents {
    border: 1px solid #DDD;
    box-shadow: var(--plugin-box-shadow-lightest);

}
div.d3view-pl-template-sensors .templates-list .tl-contents label {
    padding: 10px 10px 0 10px;
}

div.d3view-plugins-sidebar .pl-generic-selections .items-list > .list-container {
    height: calc(100% - 52px);
    overflow: auto;
}

div.pl-configure-template-wrapper .match-maker thead .btn-txt {
    display: none;
}

/* Step1 template styles */
.step1-container .template-selection-methods {
    margin-bottom: 20px;
}

.step1-container .selection-method {
    padding: 20px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    margin: 10px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    position: relative;
}

.step1-container .selection-method:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.step1-container .selection-method.active {
    border-color: #28a745;
    background: #f0fff0;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.2);
}

.step1-container .selection-method::before {
    content: "OR";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 10px;
    font-weight: bold;
    color: #6c757d;
    font-size: 12px;
}

.step1-container .selection-method:first-child::before {
    content: "";
}

.step1-container .loadcase-template-section {
    margin-top: 20px;
}

.step1-container .alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}

/* Input field styles for editable names and IDs */
.name-input, .id-input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}

.name-input:focus, .id-input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* Download dropdown styles */
.export-dd .dropdown-header,
.import-dd .dropdown-header {
    font-weight: bold;
    color: #666;
    padding: 8px 15px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.export-dd .divider,
.import-dd .divider {
    height: 1px;
    background-color: #e9ecef;
    margin: 5px 0;
}

.export-dd li a,
.import-dd li a {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.export-dd li a i,
.import-dd li a i {
    width: 16px;
    text-align: center;
}

/* Button group spacing */
.btn-group .dropdown {
    margin-right: 5px;
}

.btn-group .dropdown:last-child {
    margin-right: 0;
}
/* /javascripts/plugins_src/response_extractor/response_extractor.css */
:root{
    --primary:#2c5282;--primary-tint:#e0ecf8;--primary-soft:#eef4fb;
    --border:#e6e8eb;--border-strong:#cbd5e1;--text:#222;--text-muted:#6b7280;--text-dim:#9ca3af;
    --ok:#155724;--ok-bg:#d4edda;--bad:#721c24;--bad-bg:#f8d7da;--info:#004085;--info-bg:#cce5ff;
    --radius:8px;--radius-sm:6px;--radius-xs:4px;--shadow:0 2px 8px rgba(0,0,0,0.06);
  }
  .rx *{box-sizing:border-box;}
  .rx{position:fixed;inset:0;z-index:1500;display:flex;flex-direction:column;margin:0;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--text);background:#f4f6f8;}
  body.app-menu-pos-pin-left .rx{left:44px;width:calc(100% - 44px) !important;}
  body.app-menu-pos-pin-right .rx{left:auto;right:44px;width:calc(100% - 44px) !important;}
  body.app-menu-pos-pin-top .rx{top:calc(var(--d3view-header-height, 46px) + 44px);height:calc(100% - var(--d3view-header-height, 46px) - 44px) !important;}
  .rx-top{display:flex;align-items:center;gap:12px;padding:9px 16px;background:#fff;border-bottom:1px solid var(--border);}
  .rx-brand{font-weight:700;color:var(--primary);}.rx-brand i{margin-right:6px;}
  .rx-top .spacer{flex:1;}
  .rx-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#f3f4f6;color:var(--text-muted);border:1px solid #e5e7eb;}
  .rx-pill.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent;}
  .rx-pill.mock{background:#fef3cd;color:#856404;border-color:transparent;}
  .rx-logpill{cursor:pointer;} .rx-logpill:hover{border-color:var(--primary);color:var(--primary);}
  .rx-classic{cursor:pointer;} .rx-classic:hover{border-color:var(--primary);color:var(--primary);}
  /* Close (X) -- sits to the right of Classic view. Quiet until hovered so it
     reads as an exit, not as a destructive action on the extracted responses. */
  .rx-close{cursor:pointer;gap:0;padding:3px 9px;color:var(--bad);background:var(--bad-bg);border-color:transparent;}
  .rx-close i{font-size:12px;line-height:1;}
  .rx-close:hover{background:var(--bad);color:#fff;}
  .rx-body{flex:1;min-height:0;display:flex;}

  /* primary + secondary side panels */
  .rx-side{width:258px;flex:0 0 258px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;}
  .rx-side2{width:320px;flex:0 0 320px;background:#fbfcfd;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;}
  .rx-side-head{padding:11px 13px 12px;border-bottom:1px solid var(--border);}
  .eyebrow{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px;display:flex;align-items:center;gap:6px;}
  .rx-origin{display:flex;gap:3px;background:#f1f3f5;padding:3px;border-radius:var(--radius-sm);}
  .rx-origin button{flex:1;border:none;background:transparent;color:var(--text-muted);font:inherit;font-size:10.5px;font-weight:700;padding:7px 3px;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;}
  .rx-origin button.is-active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1);}
  .rx-ref{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;width:100%;text-align:left;background:#fff;margin-top:10px;}
  .rx-ref:hover{border-color:var(--primary);background:var(--primary-soft);}
  .rx-ref .ico{width:32px;height:32px;flex:0 0 32px;border-radius:var(--radius-sm);background:var(--primary-tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;}
  .rx-ref .meta{flex:1;min-width:0;}
  .rx-ref .name{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-ref .name.ph{color:var(--text-dim);}
  .rx-ref .sub{font-size:10.5px;color:var(--text-muted);font-family:'SF Mono',Menlo,monospace;}
  .rx-ref .chev{color:var(--text-dim);font-size:10px;}
  .rx-badge{font-size:9px;padding:1px 6px;border-radius:999px;font-weight:700;text-transform:uppercase;background:var(--ok-bg);color:var(--ok);}
  .rx-badge.running{background:var(--info-bg);color:var(--info);}.rx-badge.failed{background:var(--bad-bg);color:var(--bad);}

  .rx-panel-tabs{display:flex;gap:2px;padding:0 6px;border-bottom:1px solid var(--border);}
  .rx-panel-tabs button{flex:1;border:none;background:transparent;color:var(--text-muted);font:inherit;font-size:10.5px;font-weight:700;padding:10px 2px;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px;}
  .rx-panel-tabs button i{font-size:10px;}
  .rx-panel-tabs button.is-active{color:var(--primary);border-bottom-color:var(--primary);}
  .rx-panel-body{flex:1;min-height:0;display:flex;flex-direction:column;}

  /* generic rows */
  .rx-rows{overflow-y:auto;min-height:0;padding:0 7px 7px;position:relative;}
  /* the response's name, shown on the Canvas that was plotted from it */
  .rx-plot-named{margin-left:10px;padding:2px 9px;border-radius:3px;background:#eef2f7;border:1px solid #d3d9e0;font-size:12px;font-weight:600;color:#1e293b;max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-find-help{font-size:10px;color:#94a3b8;line-height:1.4;margin-top:3px;}
  .rx-find-help b{color:#64748b;font-weight:600;}
  .rx-find-note{font-size:10px;line-height:1.45;color:#475569;background:#f1f5f9;border-left:2px solid #94a3b8;border-radius:0 3px 3px 0;padding:6px 8px;margin:0 13px 6px;}
  .rx-find-note b{color:#1e293b;font-weight:600;}
  .rx-find-warn{font-size:10px;line-height:1.45;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:3px;padding:6px 8px;margin:0 13px 6px;}
  .rx-find-more{width:calc(100% - 26px);margin:0 13px;text-align:left;}
  /* Drag-a-box over the component or id list. The rectangle is drawn inside
     the scrolling list, not the viewport, so it stays put over the rows it
     covers while the list is scrolled mid-drag. */
  .rx-marquee{position:absolute;pointer-events:none;z-index:6;border:1px solid #2c5282;background:rgba(44,82,130,.12);border-radius:2px;}
  .rx-rows.is-marquee{user-select:none;-webkit-user-select:none;cursor:crosshair;}
  /* cross-platform visible sliders (LP scrub, spatial scrub, gantt etc.) */
  .rx input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:#dbe3ec;border-radius:4px;outline:none;accent-color:#2c5282;vertical-align:middle;cursor:pointer;}
  .rx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#2c5282;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);cursor:pointer;}
  .rx input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#2c5282;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.25);cursor:pointer;}
  /* vertical-center FontAwesome icons that default to baseline (e.g. sitemap lead) */
  .fa-sitemap{vertical-align:middle;}
  /* Flow Analyzer load-path heatmap grid */
  .rx-lp-hm{display:grid;gap:1px;background:var(--border);border-radius:6px;overflow:auto;max-height:600px;}
  .rx-lp-cell{background:#fff;padding:4px 6px;font-size:10px;text-align:center;font-family:'SF Mono',Menlo,monospace;display:flex;align-items:center;justify-content:center;min-height:22px;white-space:nowrap;}
  /* Row-header column of the heatmap. It used to be a hard 220px track with
     ellipsis, so contact/part names — which are long and share long prefixes
     (*CONTACT_AUTOMATIC_SURFACE_TO_SURFACE_...) — were cut at exactly the point
     that distinguishes them, making rows impossible to tell apart. The track is
     now content-sized up to a cap (see the grid-template-columns in
     rx_flow_dash) and each cell scrolls for anything past that cap. */
  .rx-lp-rowh{justify-content:flex-start;text-align:left;font-family:inherit;font-weight:600;color:#374151;overflow-x:auto;overflow-y:hidden;text-overflow:clip;}

  /* Shared guard for the bar-chart labels in Leaders / Share & activation and
     the per-column lists. Each sits in a fixed grid track and was
     overflow:hidden + ellipsis, i.e. truncated with no way to read the rest.
     Scroll instead of truncating: these are identifiers whose tail is the part
     that distinguishes them. Kept nowrap on purpose — these are single-line rows
     in a grid, so wrapping would break the row rhythm; horizontal scroll is the
     only honest option here. */
  .rx-flow-lbl{white-space:nowrap;overflow-x:auto;overflow-y:hidden;text-overflow:clip;}
  .rx-lp-rowh::-webkit-scrollbar,.rx-flow-lbl::-webkit-scrollbar{height:5px;}
  .rx-lp-rowh::-webkit-scrollbar-thumb,.rx-flow-lbl::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
  .rx-lp-rowh::-webkit-scrollbar-track,.rx-flow-lbl::-webkit-scrollbar-track{background:transparent;}
  .rx-lp-h{background:#f9fafb;font-weight:600;color:#64748b;font-size:9px;text-transform:uppercase;letter-spacing:.3px;position:sticky;top:0;z-index:1;}
  .rx-flow-sec-t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;color:#374151;margin:0 0 8px;}
  .rx-flow-sec-s{font-weight:400;font-size:11px;color:#94a3b8;}
  .rx-flow-canvas{width:100%;max-width:900px;height:clamp(340px,50vh,520px);margin:0 auto;}
  .rx-log-host{height:clamp(380px,62vh,720px);display:flex;flex-direction:column;min-height:0;}
  .rx-log-host > *{flex:1 1 0;min-height:0;}
  .rx-tab-x{margin-left:7px;font-size:10px;color:#cbd5e1;border-radius:3px;padding:1px 2px;}
  .rx-tab-x:hover{color:#b91c1c;background:#fde8e8;}
  .rx-tab:hover .rx-tab-x{color:#94a3b8;}
  .rx-tab-add{border:1px dashed var(--border-strong);background:#fff;color:var(--text-muted);border-radius:6px;font-size:12px;font-weight:700;padding:4px 6px;cursor:pointer;margin-left:4px;align-self:center;}
  .rx-row-btn{margin-left:auto;border:1px solid var(--border);background:#fff;color:var(--primary);border-radius:4px;font-size:10px;width:20px;height:18px;line-height:1;cursor:pointer;flex:0 0 auto;padding:0;}
  .rx-row-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
  .rx-d3hsp-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;}
  .rx-d3hsp-chip{padding:5px 11px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#555;font-size:11px;font-weight:600;cursor:pointer;}
  .rx-d3hsp-chip:hover{background:#f3f4f6;color:#333;}
  .rx-d3hsp-chip.is-active{background:#6c3483;border-color:#6c3483;color:#fff;}
  .rx-d3hsp-item{border:1px solid var(--border);border-radius:6px;margin-bottom:7px;overflow:hidden;background:#fff;}
  .rx-d3hsp-item-h{display:flex;align-items:center;gap:7px;padding:8px 11px;cursor:pointer;font-size:12px;}
  .rx-d3hsp-item-h:hover{background:#faf7fc;}
  .rx-d3hsp-prev{padding:0 11px 8px 28px;font-size:10px;color:#94a3b8;font-family:'SF Mono',Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-d3hsp-body{margin:0;padding:8px 12px;background:#0f172a;color:#e2e8f0;font-size:11px;font-family:'SF Mono',Menlo,monospace;max-height:360px;overflow:auto;white-space:pre;border-top:1px solid var(--border);}
  .rx-d3hsp-tools{display:flex;align-items:center;gap:6px;padding:6px 11px;border-top:1px solid var(--border);background:#faf7fc;color:#94a3b8;font-size:11px;}
  .rx-d3hsp-tools input{flex:1;border:1px solid var(--border);border-radius:4px;padding:3px 7px;font-size:11px;color:#374151;background:#fff;}
  .rx-d3hsp-tblwrap{max-height:420px;overflow:auto;border-top:1px solid var(--border);}
  .rx-d3hsp-tblwrap .rx-slot-tbl td{white-space:nowrap;font-family:'SF Mono',Menlo,monospace;font-size:10px;}
  .rx-d3hsp-tblfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 11px;border-top:1px solid var(--border);background:#fafbfc;font-size:10px;color:#94a3b8;}
  .rx-d3hsp-none{padding:12px;border-top:1px solid var(--border);font-size:11px;color:#94a3b8;}
  /* .rx-legend inside rx_plot_svg is position:absolute -- it needs this to anchor. */
  .rx-d3hsp-curve{position:relative;height:200px;border-top:1px solid var(--border);padding:6px 10px 0;box-sizing:border-box;}
  .rx-rw-grid{display:grid;gap:4px;}
  .rx-rw-cell{position:relative;border:1px solid #d0d3d8;border-radius:4px;background:#fff;cursor:pointer;overflow:hidden;transition:box-shadow .12s ease,border-color .12s ease;}
  .rx-rw-cell:hover{box-shadow:0 0 0 2px #90b4e0 !important;}
  .rx-rw-id{position:absolute;left:4px;top:2px;font:600 9px 'SF Mono',Menlo,monospace;color:#374151;background:rgba(255,255,255,.85);padding:1px 4px;border-radius:2px;pointer-events:none;}
  .rx-flash{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);background:#fff;border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.16);border-radius:8px;padding:9px 16px;font-size:12px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px;z-index:10002;opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;}
  .rx-flash.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .rx-tab-ct{display:inline-block;margin-left:5px;background:#e5e7eb;color:#475569;font-size:9px;font-weight:700;border-radius:999px;padding:1px 6px;vertical-align:middle;}
  .rx-tab.is-active .rx-tab-ct{background:#e0ecf8;color:#2c5282;}
  .rx-ws-wrap{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:3px 10px 3px 11px;}
  .rx-ws-select{border:none;background:transparent;font-size:11px;font-weight:600;color:var(--text-muted);max-width:240px;cursor:pointer;outline:none;}
  .rx-gm-back{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10001;display:flex;align-items:center;justify-content:center;}
  .rx-gm{background:#fff;border-radius:8px;width:560px;max-width:94vw;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.25);}
  .rx-gm-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;}
  .rx-gm-body{padding:14px 16px;overflow:auto;}
  .rx-gm-list{max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:6px;padding:4px;margin-bottom:6px;}
  .rx-gm-row{display:flex;align-items:center;gap:8px;padding:4px 7px;border-radius:4px;cursor:pointer;font-size:11px;}
  .rx-gm-row:hover{background:#f1f5f9;}
  .rx-gm-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--border);}
  .rx-set-grp{margin-bottom:14px;}
  .rx-set-grp-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#475569;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:10px;}
  .rx-set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 16px;}
  .rx-set-field{display:flex;flex-direction:column;gap:4px;}
  .rx-set-field label{font-size:11px;color:#64748b;font-weight:600;}
  .rx-set-field select,.rx-set-field input[type=number]{padding:5px 8px;border:1px solid var(--border-strong);border-radius:4px;font-size:11px;}
  .rx-switch{position:relative;display:inline-block;width:38px;height:20px;}
  .rx-switch input{opacity:0;width:0;height:0;}
  .rx-switch span{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s;cursor:pointer;}
  .rx-switch span:before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
  .rx-switch input:checked + span{background:var(--primary);}
  .rx-switch input:checked + span:before{transform:translateX(18px);}
  .rx-occ-trace{display:flex;align-items:center;gap:6px;padding:2px 4px;border:1px solid transparent;border-radius:4px;background:transparent;cursor:pointer;}
  .rx-occ-trace:hover{border-color:var(--line,#d3dae0);background:rgba(44,82,130,0.06);}
  .rx-occ-trace-unit{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:#94a3b8;}

  .rx-foot-name{padding:0 10px 6px;}
  .rx-foot-name input{width:100%;}

  .rx-occ-stages{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .rx-occ-stage{display:flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid transparent;border-radius:7px;}
  .rx-occ-stage.is-here{border-color:var(--line,#d3dae0);background:rgba(44,82,130,0.05);}
  .rx-occ-stage-n{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#cbd5e1;color:#fff;font-size:10px;font-weight:700;}
  .rx-occ-stage.is-here .rx-occ-stage-n{background:#2c5282;}
  .rx-occ-stage-l{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:#64748b;font-weight:700;}
  .rx-occ-stage-arrow{color:#cbd5e1;font-size:16px;}

  .rx-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--radius-xs);cursor:pointer;-webkit-user-select:none;user-select:none;}
  .rx-row:hover{background:#f5f8ff;}
  .rx-row.is-active{background:var(--primary-tint);}
  .rx-row.is-active .r-name{color:var(--primary);font-weight:700;}
  .rx-row.is-on{background:var(--ok-bg);}
  .rx-row .r-chk{width:14px;height:14px;flex:0 0 14px;border:1.5px solid var(--border-strong);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;}
  .rx-row.is-on .r-chk{background:var(--ok);border-color:var(--ok);}
  .rx-row .r-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;}
  .rx-row .r-name .r-code{font-family:'SF Mono',Menlo,monospace;color:var(--primary);}
  .rx-row .r-sub{font-size:10px;color:var(--text-dim);white-space:nowrap;}
  .rx-row .r-icon{color:var(--text-dim);font-size:11px;width:14px;text-align:center;}
  .ds-row .r-sub{text-transform:uppercase;letter-spacing:.3px;font-size:9.5px;}
  .ds-row.is-active{background:var(--primary-tint);}
  .ds-row.is-active .r-name{color:var(--primary);font-weight:700;}.ds-row.is-active .r-icon{color:var(--primary);}
  .rx-row.is-absent{opacity:.4;cursor:not-allowed;}.rx-row.is-absent:hover{background:transparent;}

  /* transform list */
  .rx-tmode{display:flex;gap:3px;background:#f1f3f5;padding:3px;border-radius:var(--radius-sm);margin:10px 11px 6px;}
  .rx-tmode button{flex:1;border:none;background:transparent;color:var(--text-muted);font:inherit;font-size:11px;font-weight:700;padding:6px;border-radius:var(--radius-xs);cursor:pointer;}
  .rx-tmode button.is-active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1);}
  .rx-filter{margin:0 11px 6px;padding:5px 9px;font-size:11px;border:1px solid var(--border-strong);border-radius:var(--radius-xs);width:calc(100% - 22px);outline:none;}
  .rx-filter:focus{border-color:var(--primary);}
  .tx-row .r-name{font-size:11.5px;}
  .tx-row .r-grp{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--primary);background:var(--primary-tint);border-radius:6px;padding:1px 6px;}
  .tx-row.is-active{background:var(--primary-tint);}
  .rx-tx-count{font-size:10px;color:var(--text-dim);padding:4px 11px;}
  .rx-tpl .r-name{font-size:12px;font-weight:600;}
  .rx-tpl .r-meta{font-size:10px;color:var(--text-dim);}

  /* file-type detail menu */
  .rx-menu-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px 18px 6px;font-size:12px;font-weight:700;line-height:1.35;}
  .rx-menu-title .t{flex:1 1 100%;min-width:0;color:#1f2937;}
  .rx-menu-title .chip{flex:0 0 auto;font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--primary);background:var(--primary-tint);border-radius:6px;padding:2px 7px;letter-spacing:.3px;}
  .rx-sec{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;border-top:1px solid var(--border);}
  .rx-sec.grow{flex:1 1 auto;min-height:150px;}
  .rx-sec.grow .rx-rows{flex:1 1 auto;}
  /* The finder REPLACES the id list inside the same section, so it needs the
     same treatment: scroll within the space the section has. Left to grow it
     overflowed a 171px section by 320px and painted its own controls over the
     response name box and the footer buttons. */
  .rx-sec.grow .rx-finder{flex:1 1 auto;overflow-y:auto;min-height:0;}
  .rx-sec-head{display:flex;align-items:center;gap:6px;padding:8px 13px 5px;}
  .rx-sec-head .lbl{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);}
  .rx-count{font-size:10px;font-weight:700;color:var(--primary);background:var(--primary-tint);border-radius:8px;padding:0 6px;}
  .rx-count.sel{background:var(--ok-bg);color:var(--ok);}
  .rx-sec-head .spacer{flex:1;}
  .rx-mini{border:1px solid var(--border);background:#fff;border-radius:var(--radius-xs);color:var(--text-muted);font-size:10px;padding:2px 7px;cursor:pointer;}
  .rx-mini:hover{border-color:var(--primary);color:var(--primary);}
  .rx-fields{padding:14px 18px 18px;overflow-y:auto;}
  .rx-field{margin-bottom:14px;}
  .rx-field label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);margin-bottom:3px;}
  .rx-field input,.rx-field select,.rx-expr{width:100%;padding:6px 8px;font:inherit;font-size:12px;border:1px solid var(--border-strong);border-radius:var(--radius-xs);outline:none;background:#fff;}
  .rx-field input:focus,.rx-field select:focus,.rx-expr:focus{border-color:var(--primary);}
  .rx-expr{margin:10px 13px;width:calc(100% - 26px);font-family:'SF Mono',Menlo,monospace;font-size:12px;min-height:160px;resize:vertical;}
  .rx-empty{padding:22px 16px;text-align:center;color:var(--text-dim);font-size:11.5px;}
  .rx-empty i{font-size:20px;display:block;margin-bottom:7px;color:#d1d5db;}
  .rx-drop{margin:11px 13px;border:2px dashed var(--border-strong);border-radius:var(--radius);padding:20px 16px;text-align:center;color:var(--text-muted);cursor:pointer;}
  .rx-drop:hover{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);}
  .rx-drop i{font-size:24px;display:block;margin-bottom:8px;}
  .rx-drop .t{font-weight:700;font-size:12.5px;}.rx-drop .s{font-size:11px;margin-top:4px;}
  .rx-tplcard{padding:13px;}
  .rx-tplcard .nm{font-size:14px;font-weight:700;}
  .rx-tplcard .row{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:8px;padding:6px 0;border-bottom:1px solid var(--border);}

  /* secondary header + footer */
  .rx-detail-head{padding:10px 13px;border-bottom:1px solid var(--border);font-weight:700;font-size:12px;color:var(--text);display:flex;align-items:center;gap:8px;}
  .rx-detail-head .eyebrow2{font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-dim);}
  .rx-detail-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  .rx.rx-no-detail .rx-side2{display:none;}
  .rx-side-foot{border-top:1px solid var(--border);padding:9px 13px;background:#fafbfc;}
  .rx-selsum{font-size:11px;color:var(--text-muted);margin-bottom:7px;}.rx-selsum b{color:var(--text);}
  .rx-foot-actions{display:flex;gap:6px;}
  .rx-btn{flex:1;border:1px solid var(--border-strong);background:#fff;border-radius:var(--radius-xs);font:inherit;font-size:11px;font-weight:600;color:var(--text);padding:6px 8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
  .rx-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}

  /* Workspace visibility filter (Explorer head) */
  .rx-wsfilter{position:relative;display:inline-flex;}
  .rx-wsfilter .rx-btn{flex:0 0 auto;}
  .rx-wsfilter-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:240px;max-width:300px;max-height:340px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;}
  .rx-wsf-head{display:flex;align-items:center;gap:8px;padding:5px 8px 7px;border-bottom:1px solid var(--border);margin-bottom:4px;}
  .rx-wsf-eyebrow{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);}
  .rx-wsf-head a{font-size:10.5px;font-weight:600;color:var(--primary);cursor:pointer;text-decoration:none;margin-left:8px;}
  .rx-wsf-head a:hover{text-decoration:underline;}
  .rx-wsf-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--radius-xs);cursor:pointer;}
  .rx-wsf-row:hover{background:#f8fafc;}
  .rx-wsf-row input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer;flex:0 0 auto;}
  .rx-wsf-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.12);}
  .rx-wsf-meta{flex:1;min-width:0;display:flex;flex-direction:column;}
  .rx-wsf-name{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-wsf-sub{font-size:10.5px;color:var(--text-muted);}
  .rx-wsf-count{font-size:10px;font-weight:700;color:#475569;background:#eef2f6;border-radius:999px;padding:1px 7px;flex:0 0 auto;}
  .rx-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
  .rx-btn:disabled{opacity:.5;cursor:not-allowed;}

  /* content */
  .rx-content{flex:1;min-width:0;display:flex;flex-direction:column;}
  .rx-tabs{display:flex;gap:2px;padding:0 12px;background:#fff;border-bottom:1px solid var(--border);overflow-x:auto;}
  .rx-tab{border:none;background:transparent;padding:11px 13px;font:inherit;font-weight:600;font-size:12px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
  .rx-tab i{margin-right:5px;}
  .rx-tab.is-active{color:var(--primary);border-bottom-color:var(--primary);}
  .rx-tab.dep{color:#9a6b1a;}.rx-tab.dep.is-active{color:#b45309;border-bottom-color:#b45309;}
  .rx-panes{flex:1;min-height:0;position:relative;}
  .rx-pane{position:absolute;inset:0;overflow:auto;padding:16px;}
  .rx-plot-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);height:100%;display:flex;flex-direction:column;}
  .rx-plot-head{padding:11px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;}
  .rx-plot-body{flex:1;min-height:0;position:relative;padding:14px;}
  svg.rx-svg{width:100%;height:100%;display:block;}
  .rx-legend{position:absolute;top:18px;right:20px;background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;font-size:11px;max-width:240px;}
  .rx-legend .li{display:flex;align-items:center;gap:7px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-legend .sw{width:11px;height:3px;border-radius:2px;flex:0 0 11px;}
  .rx-cempty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--text-dim);text-align:center;}
  .rx-cempty i{font-size:36px;color:#d1d5db;margin-bottom:12px;}.rx-cempty .t{font-size:15px;font-weight:700;color:#6b7280;}.rx-cempty .s{font-size:12px;margin-top:5px;max-width:380px;}
  .rx-stub{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--text-dim);text-align:center;}
  .rx-stub i{font-size:32px;color:#d1d5db;margin-bottom:10px;}.rx-stub .t{font-size:15px;font-weight:700;color:#6b7280;}.rx-stub .s{font-size:12px;margin-top:5px;}

  .rx-modal-bd{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:9990;display:flex;align-items:center;justify-content:center;}
  .rx-modal{background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.2);width:760px;max-width:94vw;max-height:84vh;display:flex;flex-direction:column;overflow:hidden;}
  .rx-drawer-bd{justify-content:flex-end;align-items:stretch;}
  .rx-drawer-bd .rx-drawer{width:520px;max-width:94vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.18);animation:rxDrawerIn .24s cubic-bezier(.2,.7,.3,1);}
  @keyframes rxDrawerIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
  .rx-modal-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
  .rx-modal-head h3{margin:0;font-size:15px;font-weight:700;flex:1;}
  .rx-modal-close{background:transparent;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;}
  .rx-filter-host{padding:14px 18px;border-bottom:1px solid var(--border);background:#f8fafc;}
  .rx-filter-host.rx-filter-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 18px;}
  .rx-filter-inline .hfp-section{margin-bottom:0 !important;display:flex;align-items:center;gap:8px;}
  .rx-filter-inline .hfp-section label,.rx-filter-inline .hfp-active-chips{margin-bottom:0 !important;}
  .rx-filter-inline .hfp-nl-input{width:240px !important;}
  .rx-filter-inline .hfp-active-chips{display:inline-flex !important;}
  .rx-view-toggle{background:transparent;border:1px solid var(--border-strong);border-radius:4px;color:var(--text-muted);cursor:pointer;padding:3px 8px;margin-right:6px;font-size:12px;}
  .rx-view-toggle:hover{border-color:var(--primary);color:var(--primary);}
  .rx-modal-filters{padding:10px 18px;border-bottom:1px solid var(--border);background:#f8fafc;display:flex;gap:8px 12px;align-items:flex-end;flex-wrap:wrap;}
  .rx-flt-controls,.rx-flt-add-wrap{display:contents;}
  .rx-flt-search{flex:1 1 220px;min-width:180px;padding:6px 10px;border:1px solid var(--border-strong);border-radius:4px;font:inherit;font-size:12px;align-self:stretch;}
  .rx-flt{display:flex;flex-direction:column;gap:3px;}
  .rx-flt-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
  .rx-flt-x{color:var(--text-dim);cursor:pointer;font-size:11px;}
  .rx-flt-x:hover{color:var(--bad);}
  .rx-flt-ctl{padding:6px 8px;border:1px solid var(--border-strong);border-radius:4px;font:inherit;font-size:12px;min-width:120px;max-width:190px;}
  .rx-flt-add{color:var(--primary);border-color:var(--primary);font-weight:600;min-width:90px;}
  .rx-pick-count{font-size:11px;color:var(--text-muted);font-weight:600;margin-right:6px;}
  .rx-modal-list tr.rx-more td{text-align:center;color:#9ca3af;padding:12px;font-size:11px;}
  .rx-modal-list{flex:1 1 auto;overflow-y:auto;min-height:200px;}
  .rx-modal-list table{width:100%;border-collapse:collapse;font-size:12px;}
  .rx-modal-list th{position:sticky;top:0;background:#f3f4f6;padding:8px 14px;text-align:left;font-weight:600;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);}
  .rx-modal-list td{padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
  .rx-modal-list tr:hover td{background:#eff6ff;}
  .rx-modal-list tr.is-selected td{background:var(--primary-soft);color:var(--primary);font-weight:600;}
  .rx-modal-list .id{font-family:'SF Mono',Menlo,monospace;color:var(--primary);font-weight:600;}
  .rx-modal-list .st{font-size:10px;padding:1px 8px;border-radius:999px;font-weight:700;text-transform:uppercase;}
  .rx-modal-list .st.done{background:var(--ok-bg);color:var(--ok);}.rx-modal-list .st.running{background:var(--info-bg);color:var(--info);}.rx-modal-list .st.failed{background:var(--bad-bg);color:var(--bad);}

  /* persistent footer action bar (mirrors binout.draft .be-action-bar) */
  .rx-actionbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 18px;border-top:1px solid var(--border);background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:4;}
  .rx-ab-stats{font-size:11px;color:var(--text-muted);}
  .rx-ab-spacer{flex:1 1 auto;}
  .rx-ab-btn{border:1px solid var(--border-strong);background:#fff;border-radius:var(--radius-xs);font:inherit;font-size:11px;font-weight:600;color:var(--text);padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
  .rx-ab-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
  .rx-ab-btn:disabled{opacity:.5;cursor:not-allowed;}
  .rx-ab-ai{background:linear-gradient(135deg,#6c3483 0%,#1e40af 100%);color:#fff;border-color:transparent;}
  .rx-ab-ai:hover:not(:disabled){color:#fff;filter:brightness(1.08);}
  .rx-ab-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
  .rx-ab-primary:hover:not(:disabled){background:#244569;color:#fff;}
  .rx-ab-pill{background:rgba(255,255,255,0.25);color:#fff;border-radius:8px;font-size:10px;font-weight:700;padding:0 7px;}
  .rx-rm{width:920px;} .rx-rm .rx-modal-head .rx-btn{margin-right:6px;}
  .rx-drawer-bd .rx-drawer.rx-rm{width:min(1100px,94vw);}
  .rx-rm .rx-modal-list td{font-size:12px;} .rx-rm-del:hover{color:var(--bad)!important;}

  /* analyzer tabs */
  .rx-an{height:100%;display:flex;flex-direction:column;}
  .rx-an-head{font-weight:700;font-size:13px;color:var(--text);padding:0 0 12px;}
  .rx-an-head i{color:var(--primary);margin-right:6px;}
  .rx-an-body{flex:1;min-height:0;overflow:auto;}
  .rx-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:14px;}
  .rx-card-h{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:#555;margin-bottom:12px;display:flex;align-items:center;gap:8px;}

  /* Stat cards -- a small label over a big value, laid out in a wrapping flex row.
     The value is very often a single UNBREAKABLE token: a contact name like
     *CONTACT_AUTOMATIC_SURFACE_TO_SURFACE, a part or file name, an id list. The
     card is `flex:1 1 0` with a small min-width, so it shrinks to that min-width
     and a token with no spaces in it has nothing to wrap on -- it spilled straight
     out of the card and across the page.
     Deliberately NOT `nowrap` / NOT `ellipsis`: text that CAN wrap should still
     wrap (it reads better and needs no interaction), and these values are
     identifiers whose tail is the part you actually need, so truncating them
     hides the answer. Only the unwrappable case scrolls.
     Note `overflow-x:auto` makes the block's overflow-y compute to auto as well,
     which would clip an escaping tooltip or dropdown -- keep these cards to plain
     text, and do not put this class on a card that hosts a chart or a menu. */
  .rx-statcard{flex:1 1 0;min-width:130px;border:1px solid var(--border);border-radius:6px;padding:8px 12px;overflow-x:auto;}
  .rx-statcard-l{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:#888;}
  .rx-statcard-v{font-size:16px;font-weight:700;color:#222;}
  /* same guard for stat cards that are built on .rx-card rather than .rx-statcard */
  .rx-card-stat{overflow-x:auto;}
  .rx-statcard::-webkit-scrollbar,.rx-card-stat::-webkit-scrollbar{height:6px;}
  .rx-statcard::-webkit-scrollbar-thumb,.rx-card-stat::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
  .rx-log-t{color:var(--text-dim);font-size:10px;}
  .rx-sub2{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:11px;margin-left:6px;}
  .rx-tbl{width:100%;border-collapse:collapse;font-size:12px;}
  .rx-tbl th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);padding:6px 10px;border-bottom:1px solid var(--border);}
  .rx-tbl td{padding:7px 10px;border-bottom:1px solid var(--border);}
  .rx-tag{font-size:10px;font-weight:700;padding:1px 8px;border-radius:999px;text-transform:uppercase;}
  .rx-tag.bolt{background:#e0ecf8;color:#2c5282;} .rx-tag.struct{background:#e8f5e9;color:#2e7d32;}
  .rx-tag.pass,.rx-tag.ok{background:var(--ok-bg);color:var(--ok);} .rx-tag.warn{background:#fff3cd;color:#856404;} .rx-tag.fail{background:var(--bad-bg);color:var(--bad);}
  .rx-tag.ext{background:#e8daef;color:#6c3483;} .rx-tag.grp{background:#e0ecf8;color:#2c5282;}
  .chip.rx-tx-id{font:600 10px 'SF Mono',Menlo,monospace;background:#eef4fb;color:#2c5282;border:1px solid #cfe0f3;letter-spacing:.2px;text-transform:none;}
  .rx-rm-spark svg{display:block;}
  .rx-tag.srv{background:#e2e8f0;color:#475569;}
  /* the state/canvas cells hold 1-2 pills each -- wrap rather than widen the
     column, and never let a long parent title stretch the table. */
  /* ── Extracted Responses table ───────────────────────────────────────────
     `table-layout:fixed` is the whole fix. Under the default `auto` layout a
     long capture name or value widens its column until the table exceeds the
     panel, and the columns that carry the ACTIONS -- State, Canvas, delete --
     get pushed off the right edge behind a thin horizontal scrollbar nobody
     sees. Fixed layout honours the declared <th> widths, Name absorbs the
     remainder, and every cell truncates instead of pushing.
     Scoped to .rx-rm so other modals using .rx-modal-list are untouched. */
  .rx-rm .rx-modal-list table{table-layout:fixed;}
  .rx-rm .rx-modal-list td,.rx-rm .rx-modal-list th{padding:9px 10px;}
  .rx-rm .rx-modal-list td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-rm-name{font-weight:500;}
  /* ── Inline rename (R2026-175) ───────────────────────────────────────────
     Two children per Name cell, one of which is always hidden: the display
     span and a real <input>. The alternative -- swapping DOM in and out --
     loses the row's pills and fights the table's own re-render, and
     contenteditable would carry pasted markup into a stored name.
     The pencil is always painted, never hover-only: two people on the call
     that raised this looked for a rename control and neither found one, so
     an affordance that only appears once you are on top of it is exactly the
     failure being fixed. */
  .rx-rm-nm{display:inline-flex;align-items:center;gap:6px;max-width:100%;vertical-align:bottom;
    cursor:text;border-radius:3px;padding:1px 5px;margin:-1px -5px;border:1px solid transparent;}
  .rx-rm-nm:hover{background:#eef5ff;border-color:var(--border-strong);}
  .rx-rm-nmtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-rm-nm .fa-pencil{flex:none;font-size:10px;color:#b6bdc6;}
  .rx-rm-nm:hover .fa-pencil{color:var(--primary);}
  .rx-rm-nmin{display:none;width:100%;box-sizing:border-box;font:inherit;font-weight:500;
    padding:2px 6px;border:1px solid var(--primary);border-radius:3px;background:#fff;outline:none;}
  /* the pills are hidden with the label so a long name gets the whole cell */
  .rx-rm-name.is-editing .rx-rm-nm,.rx-rm-name.is-editing .rx-tag{display:none;}
  .rx-rm-name.is-editing .rx-rm-nmin{display:block;}
  .rx-rm-name.is-busy{opacity:.55;}
  .rx-tag.nm{background:#dcfce7;color:#166534;}
  /* these two hold 1-2 pills each and must WRAP rather than truncate --
     the width is already bounded by the fixed column. */
  .rx-rm-state,.rx-rm-canvas{white-space:normal!important;overflow:visible!important;}
  .rx-rm-state .rx-tag,.rx-rm-canvas .rx-tag{display:inline-block;margin:1px 2px 1px 0;}
  .rx-rm-thumb{display:block;width:92px;height:52px;object-fit:cover;border:1px solid var(--border);border-radius:3px;background:#fff;}
  .rx-btn-xs{font-size:10px;padding:3px 8px;}
  .rx-rm-note{font-size:11px;color:var(--text-dim,#6b7280);margin-right:8px;white-space:nowrap;}

  /* ── Per-surface capture button ──────────────────────────────────────────
     Two placements from one class: inline inside an analyzer header, or
     floating over a surface that has no header to sit in. */
  .rx-capbtn{border:1px solid var(--border-strong);background:#fff;border-radius:var(--radius-xs,4px);
    font:inherit;font-size:10px;font-weight:600;color:var(--text);padding:3px 8px;cursor:pointer;
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;margin-left:auto;}
  .rx-capbtn:hover:not(:disabled){border-color:var(--primary);color:var(--primary);}
  .rx-capbtn.is-busy{opacity:.75;cursor:progress;}
  /* `margin-left:auto` pushes it right in a flex header; a header that already
     carries a flex spacer is unaffected. */
  .rx-capbtn-float{position:absolute;top:8px;right:10px;z-index:5;margin-left:0;
    background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(0,0,0,.12);}
  /* Never rasterize the button into its own capture. */
  .d3view-rx-capturing .rx-capbtn{visibility:hidden;}
  .rx-rm-scalar{font:600 12px 'SF Mono',Menlo,monospace;color:#2c5282;}
  .rx-rm-loading{color:#94a3b8;font-size:11px;}
  .rx-bar-row{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12px;}
  .rx-bar-lbl{width:160px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;} .rx-bar{flex:1;height:10px;background:#eef1f4;border-radius:5px;overflow:hidden;}
  .rx-bar-fill{display:block;height:100%;background:var(--primary);border-radius:5px;} .rx-bar-val{width:46px;text-align:right;color:var(--text-muted);}
  .rx-metrics{display:flex;flex-wrap:wrap;gap:12px;}
  .rx-metric{flex:1 1 120px;background:#f8fafc;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center;}
  .rx-metric-v{font-size:18px;font-weight:700;color:var(--text);} .rx-metric-l{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);margin-top:4px;}
  .rx-logrows{font-family:'SF Mono',Menlo,monospace;font-size:11px;} .rx-logrow{padding:4px 0;border-bottom:1px solid #f1f3f5;}
  .rx-an-host{height:100%;display:flex;flex-direction:column;min-height:0;}
  .rx-an-loading{display:flex;align-items:center;justify-content:center;gap:8px;height:200px;color:var(--text-muted);font-size:12px;}
  .rx-mono{font-family:'SF Mono',Menlo,monospace;}
  .rx-sec-tbl td{font-size:11px;} .rx-sec-tbl td svg{vertical-align:middle;}
  .rx-sec-tbl tr.is-sel td{background:#eef5ff;}
  /* Force Analyzer — sub-tabs / source toggle / filters / groups */
  .rx-fa{height:100%;display:flex;flex-direction:column;min-height:0;}
  .rx-fa-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px;}
  .rx-fa-panel{flex:1;min-height:0;overflow:auto;}
  .rx-seg{display:inline-flex;background:#f0f0f0;border-radius:8px;padding:3px;gap:2px;}
  .rx-seg button{border:none;background:transparent;color:#888;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;}
  .rx-seg button:hover{color:#555;background:#e6e6e6;} .rx-seg button.is-active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.12);}
  .rx-fa-param{font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);font-weight:600;display:inline-flex;align-items:center;gap:5px;}
  .rx-fa-param input{width:54px;padding:4px 6px;border:1px solid var(--border-strong);border-radius:4px;font-size:11px;}
  .rx-fa-filter{padding:5px 9px;border:1px solid var(--border-strong);border-radius:4px;font-size:11px;min-width:170px;}
  .rx-fa-filter-wrap{position:relative;display:inline-flex;align-items:center;}
  .rx-fa-clear{position:absolute;right:5px;border:none;background:transparent;color:#94a3b8;font-size:15px;line-height:1;cursor:pointer;padding:0 3px;}
  .rx-fa-clear:hover{color:#b91c1c;}
  /* truncation / provenance note in a generic force-table header. min-width:0 +
     ellipsis so a long message shrinks instead of shoving the filter and the
     all/none buttons off the right edge of the card header. */
  .rx-fa-note{font-size:10px;color:var(--text-muted);font-style:italic;display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;}
  .rx-mini-go{background:var(--primary);color:#fff;border-color:var(--primary);} .rx-mini-go:disabled{background:#e5e7eb;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;}
  .rx-flow-side{width:218px;flex:0 0 218px;background:#fff;border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;max-height:640px;overflow:hidden;}
  .rx-flow-side-h{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#374151;}
  .rx-flow-plist{overflow-y:auto;flex:1;padding:4px 6px 8px;}
  .rx-flow-part{padding:6px 7px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:background .12s ease,border-color .12s ease;}
  .rx-flow-part:hover{background:#f1f5f9;}
  .rx-flow-part.is-sel{background:#e0ecf8;border-color:#90b4e0;}
  .rx-skel{background:#e9ecef;border-radius:5px;position:relative;overflow:hidden;}
  .rx-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:rxShimmer 1.2s infinite;}
  @keyframes rxShimmer{100%{transform:translateX(100%);}}
  .rx-grp{border:1px solid var(--border);border-radius:6px;margin-bottom:10px;overflow:hidden;}
  .rx-grp-h{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f8fafc;border-bottom:1px solid var(--border);flex-wrap:wrap;}
  .rx-grp-dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
  .rx-grp-body{padding:8px 10px;display:flex;flex-wrap:wrap;gap:4px;}
  .rx-grp-chip{font-family:'SF Mono',Menlo,monospace;font-size:10px;background:#eef2f7;border:1px solid var(--border);border-radius:3px;padding:2px 6px;color:var(--text);}
  .rx-grp-foot{padding:5px 10px;font-size:10px;color:var(--text-muted);border-top:1px solid var(--border);background:#fcfcfd;}
  .rx-gantt-row{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:11px;}
  .rx-gantt-track{flex:1;height:14px;position:relative;background:#eef2f7;border-radius:3px;}
  .rx-gantt-dot{position:absolute;top:2px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);}
  /* PageLayoutManager */
  .rx-plot-body{display:flex;flex-direction:column;}
  .rx-explorer-body{position:relative;flex:1;min-height:0;overflow:hidden;}
  .rx-plot-host{position:absolute;inset:0;display:flex;flex-direction:column;}
  /* HG-style plot browser — slides in from the left */
  .plm-lead{width:28px;height:26px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);border-radius:4px;cursor:pointer;margin-right:4px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;vertical-align:middle;}
  .plm-lead i{line-height:1;display:block;}
  .plm-lead:hover{border-color:var(--primary);color:var(--primary);}
  .rx-pbrowser{position:absolute;left:0;top:0;bottom:0;width:280px;background:#fff;border-right:1px solid var(--border);z-index:6;overflow:auto;transform:translateX(-100%);transition:transform .2s ease;box-shadow:3px 0 12px rgba(0,0,0,.10);}
  .pb-open .rx-pbrowser{transform:translateX(0);}
  .pb-open .rx-plot-host{left:280px;}
  .pb{font-size:12px;}
  .pb-head{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--border);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:#555;position:sticky;top:0;background:#fff;}
  .pb-head i.fa-sitemap{color:var(--primary);}
  .pb-close{border:none;background:transparent;color:var(--text-muted);font-size:18px;cursor:pointer;line-height:1;}
  .pb-tree{padding:6px 0;}
  .pb-row{display:flex;align-items:center;gap:7px;padding:4px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pb-row:hover{background:#f5f8ff;}
  .pb-row i.fa{color:var(--text-dim);width:13px;text-align:center;}
  .pb-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
  .pb-meta{font-size:10px;color:var(--text-dim);}
  .pb-page-row{font-weight:700;color:var(--text);}
  .pb-page.is-active>.pb-page-row{color:var(--primary);} .pb-page.is-active>.pb-page-row i.fa{color:var(--primary);}
  .pb-window-row{padding-left:26px;font-weight:600;color:#555;}
  .pb-window-row.is-active{background:var(--primary-tint);} .pb-window-row.is-active .pb-label{color:var(--primary);}
  .pb-curve-row{padding-left:44px;cursor:default;color:var(--text-muted);}
  .pb-curve-row:hover{background:transparent;}
  .pb-sw{width:10px;height:3px;border-radius:2px;flex:0 0 10px;}
  .plm{display:flex;flex-direction:column;height:100%;min-height:0;}
  .plm-strip{display:flex;align-items:center;gap:6px;padding:6px 4px 10px;flex:0 0 auto;flex-wrap:wrap;}
  .plm-spacer{flex:1;}
  .plm-tab{padding:4px 11px;font-size:11px;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:4px;cursor:pointer;font-weight:600;}
  .plm-tab.is-active{border-color:var(--primary);background:var(--primary);color:#fff;}
  .plm-tab-lay{opacity:.7;font-weight:400;}
  /* delete-page x, inline in the tab */
  /* Two declarations here are load-bearing, not styling. Delete either and the
     x silently stops being clickable.

     pointer-events:auto -- a GLOBAL `button * { pointer-events: none }` rule
     applies to everything inside a <button>, so without this the x never
     receives a click at all: hit-testing retargets to the tab, which matches
     [data-plm-page] and merely ACTIVATES the page. Specificity is enough
     (.plm-tab-x is 0,1,0 vs 0,0,1) so no !important is needed -- verified by
     reading the computed value, not by assuming.

     -webkit-user-drag:none -- the x sits inside a draggable tab, and per the
     HTML5 drag model the drag source resolves to the nearest draggable
     ANCESTOR, so draggable="false" on the x alone does not stop a press there
     from arming a page drag and eating the click. */
  .plm-tab-x{pointer-events:auto;display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;font-size:13px;line-height:1;opacity:.45;cursor:pointer;vertical-align:baseline;-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none;}
  .plm-tab-x:hover{opacity:1;background:var(--bad-bg);color:var(--bad);}
  .plm-tab.is-active .plm-tab-x:hover{background:rgba(255,255,255,.25);color:#fff;}
  /* tab reorder feedback */
  .plm-tab[draggable="true"]{cursor:grab;}
  .plm-tab.is-dragging{opacity:.45;cursor:grabbing;}
  .plm-tab.is-drag-over{box-shadow:-2px 0 0 0 var(--primary);}
  /* per-window clear, appended over the host's own slot content */
  .plm-slot-clear{position:absolute;top:6px;right:6px;z-index:4;width:22px;height:22px;padding:0;border:1px solid var(--border);border-radius:4px;background:rgba(255,255,255,.88);color:var(--text-dim);font-size:11px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;}
  .plm-slot:hover .plm-slot-clear{display:inline-flex;}
  .plm-slot-clear:hover{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);}
  .plm-add{padding:4px 9px;font-size:11px;border:1px dashed var(--border-strong);background:#fff;color:var(--text-muted);border-radius:4px;cursor:pointer;}
  .plm-add:hover{border-color:var(--primary);color:var(--primary);}
  .plm-lay-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;}
  .plm-layout{font-size:11px;padding:4px 6px;border:1px solid var(--border-strong);border-radius:4px;}
  .plm-grid-host{flex:1 1 auto;min-height:0;}
  .plm-grid{display:grid;gap:10px;height:100%;min-height:0;}
  .plm-slot{border:1px solid var(--border);border-radius:6px;background:#fff;min-width:0;min-height:0;overflow:hidden;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .12s ease;cursor:pointer;position:relative;}
  .plm-slot.is-active-slot{outline-color:var(--primary);}
  .rx-slot-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-dim);font-size:11px;border:1px dashed transparent;}
  .rx-slot-typed{height:100%;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  .rx-slot-cap{flex:0 0 auto;padding:6px 10px;font-size:11px;font-weight:600;color:#374151;border-bottom:1px solid var(--border);background:#f9fafb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-slot-image{align-items:center;justify-content:center;}
  .rx-slot-image img{max-width:100%;max-height:100%;object-fit:contain;}
  .rx-slot-tablewrap{flex:1;min-height:0;overflow:auto;}
  .rx-slot-tbl{width:100%;border-collapse:collapse;font-size:11px;}
  .rx-slot-tbl th{position:sticky;top:0;background:#f3f4f6;text-align:left;padding:5px 9px;font-weight:600;color:#64748b;border-bottom:1px solid var(--border);white-space:nowrap;}
  .rx-slot-tbl td{padding:4px 9px;border-bottom:1px solid #eef1f5;color:#374151;}
  .rx-slot-tbl tr:nth-child(even) td{background:#fafbfc;}
  .rx-slot-pre{flex:1;min-height:0;overflow:auto;margin:0;padding:10px 12px;font:11px/1.5 'SF Mono',Menlo,monospace;color:#374151;white-space:pre-wrap;}
  .rx-mn-seg{display:inline-flex;background:#f0f0f0;border-radius:6px;padding:3px;gap:2px;}
  .rx-mn-segbtn{border:none;background:transparent;color:#888;padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;}
  .rx-mn-segbtn.is-active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.1);}
  .rx-mn-area{width:100%;min-height:120px;resize:vertical;border:1px solid var(--border);border-radius:4px;padding:7px 9px;font:11px/1.5 'SF Mono',Menlo,monospace;color:#374151;}
  .rx-slot-carousel{height:100%;display:flex;flex-direction:column;min-height:0;}
  .rx-car-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:5px 8px;border-bottom:1px solid var(--border);background:#f9fafb;}
  .rx-car-btn{border:1px solid var(--border);background:#fff;color:#374151;width:24px;height:22px;border-radius:4px;cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .rx-car-btn:hover{border-color:var(--primary);color:var(--primary);}
  .rx-car-meta{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;}
  .rx-car-name{font-size:12px;font-weight:600;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-car-kind{flex:0 0 auto;font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:#64748b;background:#eef2f7;border-radius:3px;padding:1px 6px;}
  .rx-car-count{flex:0 0 auto;font-size:11px;font-weight:600;color:#64748b;}
  .rx-car-body{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;}
  .rx-expr-pal{margin-top:10px;}
  .rx-expr-pal-h{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:#64748b;margin:10px 0 5px;display:flex;align-items:center;gap:8px;}
  .rx-expr-pal-hint{font-weight:400;text-transform:none;letter-spacing:0;color:#9ca3af;font-size:10px;}
  .rx-expr-pal-rows{display:flex;flex-wrap:wrap;gap:5px;}
  .rx-expr-pal-empty{font-size:11px;color:#9ca3af;padding:3px 0;}
  .rx-expr-tok{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);background:#fff;color:#374151;border-radius:13px;padding:3px 10px;font-size:11px;cursor:grab;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-expr-tok i{color:var(--primary);font-size:10px;}
  .rx-expr-tok:hover{border-color:var(--primary);color:var(--primary);background:#f5f9ff;}
  .rx-expr-fn{border:1px solid var(--border);background:#f9fafb;color:#475569;border-radius:4px;padding:3px 9px;font:11px 'SF Mono',Menlo,monospace;cursor:pointer;}
  .rx-expr-fn:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
  .rx-slot-empty i{font-size:22px;color:#d1d5db;}
  .d3view-newton[data-theme="compact"]{height:100%;}
  .rx-find-chk{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#475569;cursor:pointer;margin:0 6px 0 0;}
  .rx-find-chk input{margin:0;cursor:pointer;}
  .rx-finder{padding:6px 13px 10px;border-top:1px dashed var(--border);background:#fafbfd;}
  .rx-finder-row{display:flex;flex-direction:column;gap:3px;margin-top:6px;}
  .rx-finder-row label{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.4px;}
  .rx-finder-row input, .rx-finder-row select{border:1px solid var(--border);border-radius:4px;padding:5px 7px;font-size:12px;background:#fff;}
  .rx-finder-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;}
  .rx-finder-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .rx-finder-grid2 > div, .rx-finder-grid3 > div{display:flex;flex-direction:column;gap:3px;}
  .rx-finder-hint{font-size:11px;color:#475569;align-self:end;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-bottom:5px;}
  .rx-finder-tok{display:inline-block;font:10px 'SF Mono',Menlo,monospace;background:#fff;border:1px solid var(--border);border-radius:3px;padding:1px 5px;color:#475569;}
  .rx-modal.rx-tm{width:920px;max-width:96vw;}
  .rx-tm-info{padding:10px 18px;background:#fef9e8;border-bottom:1px solid #fcebab;color:#7a5a16;font-size:12px;line-height:1.45;display:flex;gap:8px;align-items:flex-start;}
  .rx-tm-info i{color:#d4a318;margin-top:1px;}
  .rx-tm-info .chip{display:inline-block;font:10px 'SF Mono',Menlo,monospace;background:#fff;border:1px solid #e6d7a7;border-radius:3px;padding:1px 5px;color:#7a5a16;}
  .rx-tm-host{flex:1 1 auto;overflow-y:auto;min-height:300px;max-height:60vh;padding:8px 18px;}
  .rx-modal-foot{padding:12px 18px;border-top:1px solid var(--border);background:#f9fafb;display:flex;gap:8px;align-items:center;}
  .rx-modal-foot .rx-btn{padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:12px;font-weight:500;cursor:pointer;}
  .rx-modal-foot .rx-btn:hover{background:#f5f8ff;border-color:var(--primary);color:var(--primary);}
  .rx-modal-foot .rx-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
  .rx-modal-foot .rx-btn.primary:hover{background:#1d3a64;border-color:#1d3a64;color:#fff;}
  .rx-rp{position:absolute;z-index:10000;background:#fff;border:1px solid var(--border-strong,#cfd6dc);border-radius:8px;box-shadow:0 10px 32px rgba(15,23,42,.18);display:flex;flex-direction:column;min-width:280px;max-width:480px;max-height:360px;overflow:hidden;font-size:12px;}
  .rx-rp-h{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border,#e0e6ec);background:#f9fafb;flex:0 0 auto;}
  .rx-rp-sicon{color:#94a3b8;font-size:11px;width:18px;text-align:center;}
  .rx-rp-search{flex:1;border:none;background:transparent;padding:4px 2px;font-size:12px;color:#1f2937;outline:none;}
  .rx-rp-sort{border:1px solid var(--border,#e0e6ec);background:#fff;border-radius:5px;padding:3px 7px;font-size:10px;color:#475569;cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-transform:capitalize;}
  .rx-rp-sort:hover{border-color:var(--primary,#2c5282);color:var(--primary,#2c5282);}
  .rx-rp-body{flex:1 1 auto;overflow-y:auto;padding:4px 0;}
  .rx-rp-item{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;padding:7px 12px;text-align:left;cursor:pointer;font-size:12px;color:#1f2937;border-radius:0;}
  .rx-rp-item:hover{background:#eff6ff;color:var(--primary,#2c5282);}
  .rx-rp-ico{width:18px;text-align:center;color:#64748b;font-size:11px;flex:0 0 auto;}
  .rx-rp-item:hover .rx-rp-ico{color:var(--primary,#2c5282);}
  .rx-rp-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
  .rx-rp-src{color:#94a3b8;font-size:10px;font-family:'SF Mono',Menlo,monospace;padding:1px 6px;background:#f3f4f6;border-radius:3px;flex:0 0 auto;}
  .rx-rp-saved{color:#16a34a;font-size:11px;flex:0 0 auto;}
  /* Saved vs unsaved is stated on BOTH states, not just the saved one: an
     unsaved response is still a usable transformation input (its definition
     rides along with the expression), so its absence of a tick must not read
     as "unavailable". */
  .rx-rp-state{font-size:10px;flex:0 0 auto;padding:1px 6px;border-radius:3px;letter-spacing:.2px;}
  .rx-rp-state.is-saved{color:#16a34a;background:#f0fdf4;}
  .rx-rp-state.is-unsaved{color:#92400e;background:#fffbeb;}
  /* The Response name sits above whichever transform editor is mounted. */
  .rx-tx-namewrap{border-bottom:1px solid #eef0f3;padding-bottom:8px;margin-bottom:8px;}
  .rx-tx-namewrap input::placeholder{color:#9aa4b2;font-style:italic;}
  .rx-tx-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
  .rx-rp-empty{padding:18px 14px;color:#94a3b8;font-size:11px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;}
  .rx-rp-empty i{font-size:18px;color:#cbd5e1;}
  .rx-tx2-count{flex:0 0 auto;font-size:11px;color:#888;padding:8px 14px 4px;}
  .rx-tx2-row{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 9px;border-bottom:1px solid #f3f4f6;border-left:3px solid var(--cat,#5d6d7e);cursor:pointer;background:#fff;}
  .rx-tx2-row:hover{background:#f6f8fb;}
  .rx-tx2-row.is-active{background:#eef4fb;}
  .rx-tx2-row:hover .rx-tx2-pick{opacity:1;}
  .rx-tx2-ic{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;background:var(--cat,#5d6d7e);}
  .rx-tx2-meta{flex:1;min-width:0;}
  .rx-tx2-nmrow{display:flex;align-items:baseline;gap:8px;}
  .rx-tx2-nm{flex:1;min-width:0;font-size:13px;font-weight:600;color:#2b2b2b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-tx2-io{flex:0 0 auto;font-size:10px;color:#aab1ba;font-weight:600;white-space:nowrap;}
  .rx-tx2-io b{color:#7a828c;font-weight:700;}
  .rx-tx2-kw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#525a62;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;text-transform:lowercase;font-variant:small-caps;}
  .rx-tx2-pick{flex:0 0 auto;border:1px solid #c6d9ec;background:#fff;color:#2c5282;border-radius:6px;width:24px;height:24px;font-size:15px;line-height:1;padding:0;cursor:pointer;opacity:0;transition:opacity .12s;display:inline-flex;align-items:center;justify-content:center;}
  .rx-tx2-pick:hover{background:#eaf2fb;}
  .rx-em-host{padding:8px 0;min-height:280px;}
  .rx-em-host .expressionmakerview{min-height:280px;}
  .rx-time-analysis { padding: 12px; height: 100%; overflow-y: auto; }
  /* Landing card — no data yet */
  .rx-time-analysis .ta-landing { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
  .rx-time-analysis .ta-landing-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 12px; padding: 36px 44px; max-width: 560px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .rx-time-analysis .ta-landing-icon { font-size: 44px; color: #2c5282; background: #e0ecf8; width: 80px; height: 80px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
  .rx-time-analysis .ta-landing-h { font-size: 18px; color: #1f3a5f; margin: 0 0 10px; font-weight: 700; }
  .rx-time-analysis .ta-landing-sub { font-size: 13px; color: #555; line-height: 1.55; margin: 0 0 18px; }
  .rx-time-analysis .ta-landing-cta { font-size: 14px; padding: 9px 22px; }
  .rx-time-analysis .ta-landing-foot { font-size: 11px; color: #888; margin: 14px 0 0; }
  /* Running card — worker in progress */
  .rx-time-analysis .ta-running { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
  .rx-time-analysis .ta-running-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 12px; padding: 28px 32px; max-width: 640px; width: 100%; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .rx-time-analysis .ta-running-h { font-size: 16px; color: #1f3a5f; margin: 0 0 16px; font-weight: 700; }
  .rx-time-analysis .ta-running-h .fa-spinner { color: #2c5282; margin-right: 6px; }
  .rx-time-analysis .ta-progress-bar { height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
  .rx-time-analysis .ta-progress-fill { height: 100%; background: linear-gradient(90deg, #2c5282, #4a7bb7); border-radius: 4px; transition: width 0.4s ease; }
  .rx-time-analysis .ta-progress-strip { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; }
  .rx-time-analysis .ta-progress-step { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #999; }
  .rx-time-analysis .ta-progress-step.ta-done { color: #155724; }
  .rx-time-analysis .ta-progress-step.ta-active { color: #2c5282; font-weight: 600; }
  .rx-time-analysis .ta-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; flex: 0 0 10px; }
  .rx-time-analysis .ta-progress-step.ta-done .ta-progress-dot { background: #28a745; }
  .rx-time-analysis .ta-progress-step.ta-active .ta-progress-dot { background: #2c5282; box-shadow: 0 0 0 3px rgba(44,82,130,0.15); animation: ta-pulse 1.4s ease infinite; }
  @keyframes ta-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(44,82,130,0.15);} 50% { box-shadow: 0 0 0 6px rgba(44,82,130,0.05);} }
  .rx-time-analysis .ta-running-sub { font-size: 12px; color: #555; margin: 0; }
  /* Error card */
  .rx-time-analysis .ta-err { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
  .rx-time-analysis .ta-err-card { background: #fff; border: 1px solid #f5c6cb; border-radius: 12px; padding: 28px 32px; max-width: 640px; }
  .rx-time-analysis .ta-err-icon { font-size: 36px; color: #c0392b; margin-bottom: 14px; }
  .rx-time-analysis .ta-err-h { font-size: 16px; color: #721c24; margin: 0 0 10px; font-weight: 700; }
  .rx-time-analysis .ta-err-pre { background: #f8d7da; color: #721c24; padding: 10px 12px; border-radius: 6px; font-size: 11px; max-height: 200px; overflow: auto; white-space: pre-wrap; margin: 0 0 14px; }
  /* Product map controls */
  .rx-time-analysis .ta-pm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid #c3d5e8; background: #e0ecf8; color: #1f3a5f; border-radius: 6px; font-size: 12px; font-weight: 500; }
  .rx-time-analysis .ta-pm-chip .ta-pm-name { font-weight: 600; }
  .rx-time-analysis .ta-pm-chip .ta-pm-meta { color: #555; font-weight: 400; }
  .rx-time-analysis .ta-pm-chip .ta-pm-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
  .rx-time-analysis .ta-pm-chip .ta-pm-clear { padding: 2px 6px; background: transparent; border: none; color: #1f3a5f; cursor: pointer; }
  .rx-time-analysis .ta-pm-chip.ta-pm-loading { background: #fef3cd; border-color: #f7d77a; color: #856404; }
  .rx-time-analysis .ta-pm-apply { background: #fff; border: 1px dashed #4a7bb7; color: #2c5282; }
  .rx-time-analysis .ta-pm-apply:hover { background: #e0ecf8; }
  .rx-time-analysis .ta-ctrls { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
  .rx-time-analysis .ta-ctrls-l { display: flex; gap: 6px; flex: 1 1 0; min-width: 0; }
  .rx-time-analysis .ta-ctrls-r { display: flex; gap: 6px; }
  .rx-time-analysis .ta-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid #e0e0e0; background: #fff; color: #555; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.2s ease, color 0.2s ease; }
  .rx-time-analysis .ta-btn:hover { background: #f0f0f0; color: #2c5282; }
  .rx-time-analysis .ta-btn-primary { background: #2c5282; color: #fff; border-color: #2c5282; }
  .rx-time-analysis .ta-btn-primary:hover { background: #1f3c66; color: #fff; }
  .rx-time-analysis .ta-mode-grp { display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
  .rx-time-analysis .ta-mode-btn, .rx-time-analysis .ta-layout-btn { border: none; background: transparent; padding: 4px 9px; }
  .rx-time-analysis .ta-mode-btn.ta-on, .rx-time-analysis .ta-layout-btn.ta-on { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .rx-time-analysis .ta-mode-btn.ta-disabled { color: #d1d5db; cursor: not-allowed; }
  .rx-time-analysis .ta-mode-btn.ta-disabled:hover { color: #d1d5db; background: transparent; }
  .rx-time-analysis .ta-layout-grp { margin-right: 8px; }
  .rx-time-analysis .ta-time-card { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
  .rx-time-analysis .ta-time-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .rx-time-analysis .ta-time-h .t-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6b7280; letter-spacing: 0.4px; }
  .rx-time-analysis .ta-time-h .t-val { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; color: #2c5282; }
  .rx-time-analysis .ta-time-h .t-range { font-size: 11px; color: #6b7280; }
  .rx-time-analysis .ta-time-h .spacer { flex: 1 1 0; }
  .rx-time-analysis .ta-tmode-grp { background: #f0f0f0; border-radius: 6px; padding: 2px; gap: 2px; }
  .rx-time-analysis .ta-slider-wrap { position: relative; height: 30px; margin: 6px 0 8px; }
  .rx-time-analysis .ta-slider-track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
  .rx-time-analysis .ta-slider-fill { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #2c5282, #5b8def); border-radius: 4px; transition: left 0.15s ease, width 0.15s ease; }
  .rx-time-analysis .ta-slider-input { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; margin: 0; }
  .rx-time-analysis .ta-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2c5282; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
  .rx-time-analysis .ta-slider-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #2c5282; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; }
  .rx-time-analysis .ta-slider-input::-webkit-slider-runnable-track { background: transparent; }
  .rx-time-analysis .ta-slider-input::-moz-range-track { background: transparent; }
  .rx-time-analysis .ta-segments-grid { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 10px; }
  .rx-time-analysis .ta-seg-btn { position: relative; flex: 1 1 0; border: 1px solid #e6e8eb; background: #fff; color: #6b7280; font: inherit; font-size: 10px; font-weight: 600; padding: 5px 4px; border-radius: 5px; cursor: pointer; text-align: center; transition: all 0.12s; min-width: 56px; overflow: hidden; }
  .rx-time-analysis .ta-seg-btn:hover { border-color: #2c5282; color: #2c5282; }
  .rx-time-analysis .ta-seg-btn.ta-on { background: #2c5282; color: #fff; border-color: #2c5282; }
  .rx-time-analysis .ta-seg-btn.ta-in-range { background: #eef4fb; border-color: #90b4e0; color: #2c5282; }
  .rx-time-analysis .ta-seg-btn-act { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(220,38,38,0.0), rgba(220,38,38,0.20) 60%, rgba(220,38,38,0.32)); pointer-events: none; transition: height 0.25s ease; }
  .rx-time-analysis .ta-seg-btn.ta-on .ta-seg-btn-act { background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.18) 60%, rgba(255,255,255,0.32)); }
  .rx-time-analysis .ta-seg-btn-range { position: relative; z-index: 1; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 9px; display: block; color: inherit; opacity: 0.7; }
  .rx-time-analysis .ta-seg-btn-idx   { position: relative; z-index: 1; display: block; font-size: 11px; font-weight: 700; color: inherit; }

  .rx-time-analysis .ta-grid-ctrls { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f8fbfe; border-radius: 6px; margin-bottom: 10px; }
  .rx-time-analysis .ta-grid-ctrls-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #6b7280; font-weight: 700; }
  .rx-time-analysis .ta-grid-ctrls-lbl i { margin-right: 5px; color: #2c5282; }
  .rx-time-analysis .ta-grid-search { flex: 1 1 0; min-width: 160px; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 5px; font-size: 12px; background: #fff; }
  .rx-time-analysis .ta-grid-search:focus { border-color: #2c5282; outline: none; }
  .rx-time-analysis .ta-grid-sort-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; }
  .rx-time-analysis .ta-grid-sort { padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 5px; font-size: 12px; background: #fff; color: #333; }

  .rx-time-analysis .ta-filter-sort-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; margin-left: 8px; }
  .rx-time-analysis .ta-filter-sort { padding: 5px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; background: #fff; color: #333; }

  .rx-time-analysis .ta-card-body-scroll { max-height: 220px; overflow-y: auto; padding-right: 4px; }
  .rx-time-analysis .ta-card-body-scroll::-webkit-scrollbar { width: 6px; }
  .rx-time-analysis .ta-card-body-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  .rx-time-analysis .ta-card-more { display: block; width: 100%; margin-top: 8px; padding: 4px 8px; border: none; background: transparent; color: #6b7280; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 4px; transition: background 0.15s ease, color 0.15s ease; }
  .rx-time-analysis .ta-card-more:hover { background: var(--ta-accent-tint, #e0ecf8); color: var(--ta-accent, #2c5282); }
  .rx-time-analysis .ta-card-more i { margin-right: 4px; font-size: 10px; }
  .rx-time-analysis .ta-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; }
  .rx-time-analysis .ta-card { background: #fff; border: 1px solid #e6e8eb; border-left: 4px solid var(--ta-accent, #2c5282); border-radius: 8px; padding: 12px 14px; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease; }
  .rx-time-analysis .ta-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-left-width: 5px; }
  .rx-time-analysis .ta-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed #e6e8eb; }
  .rx-time-analysis .ta-card-icon { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--ta-accent-tint, #e0ecf8); color: var(--ta-accent, #2c5282); font-size: 13px; flex: 0 0 28px; }
  .rx-time-analysis .ta-card-t { font-size: 13px; font-weight: 700; color: #222; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-time-analysis .ta-card-slug { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; color: #9ca3af; background: #f3f4f6; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.3px; flex: 0 0 auto; }
  .rx-time-analysis .ta-card-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e6e8eb; display: flex; gap: 6px; font-size: 10px; color: #6b7280; align-items: center; }
  .rx-time-analysis .ta-ent-n { margin-right: auto; }
  .rx-time-analysis .ta-pill { padding: 1px 7px; border-radius: 3px; font-weight: 700; letter-spacing: 0.3px; }
  .rx-time-analysis .ta-pill-pass { background: #d4edda; color: #155724; }
  .rx-time-analysis .ta-pill-warn { background: #fef3cd; color: #856404; }
  .rx-time-analysis .ta-pill-fail { background: #f8d7da; color: #721c24; }
  .rx-time-analysis .ta-mini-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
  .rx-time-analysis .ta-mini-tbl th { text-align: left; color: #888; font-weight: 600; padding: 4px 6px; text-transform: uppercase; font-size: 9px; letter-spacing: 0.3px; }
  .rx-time-analysis .ta-mini-tbl td { padding: 4px 6px; border-top: 1px solid #f5f5f5; }
  .rx-time-analysis .ta-tar { text-align: right; }
  .rx-time-analysis .ta-muted { color: #999; }
  .rx-time-analysis .ta-num-pass { color: #15803d; font-weight: 700; }
  .rx-time-analysis .ta-num-warn { color: #d46b08; font-weight: 700; }
  .rx-time-analysis .ta-num-fail { color: #dc2626; font-weight: 700; }
  .rx-time-analysis .ta-num-na   { color: #555; }
  .rx-time-analysis .ta-st { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; }
  .rx-time-analysis .ta-st-pass { background: #d4edda; color: #155724; }
  .rx-time-analysis .ta-st-warn { background: #fef3cd; color: #856404; }
  .rx-time-analysis .ta-st-fail { background: #f8d7da; color: #721c24; }
  .rx-time-analysis .ta-st-na   { background: #f0f0f0; color: #999; }
  .rx-time-analysis .ta-bullets, .rx-time-analysis .ta-strips { display: flex; flex-direction: column; gap: 6px; }
  .rx-time-analysis .ta-bullet-row, .rx-time-analysis .ta-strip-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
  .rx-time-analysis .ta-bullet-lbl, .rx-time-analysis .ta-strip-lbl { flex: 0 0 110px; color: #555; }
  .rx-time-analysis .ta-bullet-bar, .rx-time-analysis .ta-strip-bar { position: relative; flex: 1 1 0; height: 12px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
  .rx-time-analysis .ta-bullet-zone { position: absolute; top: 0; bottom: 0; }
  .rx-time-analysis .ta-bullet-fill { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 2px; }
  .rx-time-analysis .ta-bullet-pass { background: #15803d; }
  .rx-time-analysis .ta-bullet-warn { background: #d46b08; }
  .rx-time-analysis .ta-bullet-fail { background: #dc2626; }
  .rx-time-analysis .ta-bullet-na   { background: #888; }
  .rx-time-analysis .ta-bullet-val { flex: 0 0 80px; text-align: right; font-size: 11px; }
  .rx-time-analysis .ta-strip-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #1f3c66; box-shadow: 0 0 0 1px #fff; }
  .rx-time-analysis .ta-gauges { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .rx-time-analysis .ta-gauge { background: #fafbfc; border-radius: 6px; padding: 8px; text-align: center; }
  .rx-time-analysis .ta-gauge-arc { width: 90px; height: 45px; margin: 0 auto; border-radius: 45px 45px 0 0; background: conic-gradient(from 270deg, #15803d 0deg, #fbbf24 90deg, #dc2626 180deg, transparent 180deg); position: relative; overflow: hidden; }
  .rx-time-analysis .ta-gauge-arc::after { content: ''; position: absolute; top: 0; left: 50%; bottom: 0; width: 2px; background: #1f3c66; transform-origin: bottom center; transform: translateX(-50%) rotate(calc(var(--deg, 0deg) - 90deg)); box-shadow: 0 0 0 1px #fff; }
  .rx-time-analysis .ta-gauge-val { font-size: 14px; font-weight: 700; margin-top: 4px; }
  .rx-time-analysis .ta-gauge-unit { font-size: 10px; color: #888; font-weight: 500; margin-left: 2px; }
  .rx-time-analysis .ta-gauge-lbl { font-size: 10px; color: #555; margin-top: 2px; }

  .rx-time-analysis .ta-modal-bd, .ta-modal-bd { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; }
  .ta-modal-bd .ta-modal { background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); width: 760px; max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column; }
  .ta-modal-bd .ta-modal-h { padding: 12px 14px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
  .ta-modal-bd .ta-modal-h h3 { margin: 0; font-size: 14px; font-weight: 700; flex: 1 1 0; }
  .ta-modal-bd .ta-modal-x { border: none; background: transparent; font-size: 22px; line-height: 1; color: #888; cursor: pointer; }
  .ta-modal-bd .ta-modal-body { padding: 14px; overflow: auto; }
  .ta-modal-bd .ta-modal-foot { padding: 10px 14px; border-top: 1px solid #e0e0e0; display: flex; gap: 8px; align-items: center; }
  .ta-modal-bd .ta-modal-foot .spacer { flex: 1 1 0; }
  .ta-pick-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
  .ta-pick-tbl th { text-align: left; color: #555; font-weight: 700; padding: 6px 8px; background: #f8f8f8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
  .ta-pick-tbl td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }
  .ta-pick-row { cursor: pointer; }
  .ta-pick-row:hover { background: #e0ecf8; }
  .ta-empty { padding: 30px; text-align: center; color: #888; font-size: 12px; }
  .ta-sys-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; background: #f0f0f0; color: #555; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; margin-left: 4px; }

  .rx-time-analysis .ta-pill-na { background: #f0f0f0; color: #6b7280; }

  .rx-time-analysis .ta-segments { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; overflow: hidden; }
  .rx-time-analysis .ta-seg-h    { display: grid; grid-template-columns: 38px 140px 140px 1fr 32px; gap: 12px; padding: 8px 12px; background: #f8fbfe; border-bottom: 1px solid #e6e8eb; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; font-weight: 700; }
  .rx-time-analysis .ta-seg-row  { display: grid; grid-template-columns: 38px 140px 140px 1fr 32px; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; align-items: center; transition: background 0.15s ease; }
  .rx-time-analysis .ta-seg-row:hover { background: #fafbfc; }
  .rx-time-analysis .ta-seg-row.ta-seg-on { background: #f0f6fc; border-bottom: 1px solid transparent; }
  .rx-time-analysis .ta-seg-num  { font-size: 16px; font-weight: 700; color: #2c5282; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
  .rx-time-analysis .ta-seg-time { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
  .rx-time-analysis .ta-seg-spark{ display: inline-flex; height: 8px; border-radius: 3px; overflow: hidden; background: #f0f0f0; width: 140px; }
  .rx-time-analysis .ta-seg-spark-zone { display: block; height: 100%; }
  .rx-time-analysis .ta-seg-spark-pass { background: #15803d; }
  .rx-time-analysis .ta-seg-spark-warn { background: #d46b08; }
  .rx-time-analysis .ta-seg-spark-fail { background: #dc2626; }
  .rx-time-analysis .ta-seg-spark-na   { background: #d1d5db; }
  .rx-time-analysis .ta-seg-summary { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10px; }
  .rx-time-analysis .ta-seg-tot  { margin-left: auto; color: #6b7280; font-size: 11px; }
  .rx-time-analysis .ta-seg-chev { color: #9ca3af; text-align: center; transition: color 0.15s ease, transform 0.15s ease; }
  .rx-time-analysis .ta-seg-on .ta-seg-chev { color: #2c5282; }

  .rx-time-analysis .ta-seg-body { padding: 12px 16px 16px; background: #fafbfc; border-bottom: 1px solid #e6e8eb; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
  .rx-time-analysis .ta-seg-branch { background: #fff; border: 1px solid #e6e8eb; border-left: 4px solid var(--ta-accent, #2c5282); border-radius: 6px; padding: 8px 10px; }
  .rx-time-analysis .ta-seg-branch-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #e6e8eb; }

  .ta-add-row { display: flex; gap: 10px; margin-bottom: 12px; }
  .ta-add-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; flex: 1 1 100px; }
  .ta-add-lbl input, .ta-add-lbl select { padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; color: #333; font-weight: 400; text-transform: none; letter-spacing: 0; background: #fff; }
  .ta-add-lbl input:focus, .ta-add-lbl select:focus { border-color: #2c5282; outline: none; }
  .ta-add-narrow { flex: 0 1 90px; }

  .rx-time-analysis [data-role="ta-card-open"] { cursor: pointer; }

  .rx-time-analysis .ta-focus { background: #fff; border: 1px solid #e6e8eb; border-left: 4px solid var(--ta-accent, #2c5282); border-radius: 8px; padding: 14px 18px; }
  .rx-time-analysis .ta-focus-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e6e8eb; }
  .rx-time-analysis .ta-focus-back { background: #f0f0f0; color: #555; border-color: #f0f0f0; }
  .rx-time-analysis .ta-focus-back:hover { background: #e0ecf8; color: #2c5282; }
  .rx-time-analysis .ta-focus-title { font-size: 15px; font-weight: 700; color: #222; }
  .rx-time-analysis .ta-focus-count-cap { margin-left: auto; font-size: 11px; color: #6b7280; font-weight: 600; }
  .rx-time-analysis .ta-focus-count-cap b { color: var(--ta-accent, #2c5282); }

  .rx-time-analysis .ta-focus-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 10px; background: #f8fbfe; border-radius: 6px; }
  .rx-time-analysis .ta-focus-filter-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; }
  .rx-time-analysis .ta-focus-filter-lbl i { margin-right: 4px; }
  .rx-time-analysis .ta-filter-q { flex: 1 1 0; min-width: 140px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; }
  .rx-time-analysis .ta-filter-q:focus { border-color: #2c5282; outline: none; }
  .rx-time-analysis .ta-filter-num { width: 90px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; }
  .rx-time-analysis .ta-filter-num:focus { border-color: #2c5282; outline: none; }
  .rx-time-analysis .ta-filter-sep { color: #9ca3af; font-size: 11px; }
  .rx-time-analysis .ta-filter-stgrp { display: inline-flex; gap: 4px; margin-left: 8px; }
  .rx-time-analysis .ta-fst-btn { border: 1px solid #e0e0e0; background: #fff; padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; color: #6b7280; transition: all 0.15s ease; }
  .rx-time-analysis .ta-fst-btn:hover { border-color: #cbd5e1; color: #222; }
  .rx-time-analysis .ta-fst-pass.ta-on { background: #d4edda; color: #155724; border-color: #15803d; }
  .rx-time-analysis .ta-fst-warn.ta-on { background: #fef3cd; color: #856404; border-color: #d46b08; }
  .rx-time-analysis .ta-fst-fail.ta-on { background: #f8d7da; color: #721c24; border-color: #dc2626; }
  .rx-time-analysis .ta-fst-btn i { margin-right: 3px; font-size: 10px; }

  .rx-time-analysis .ta-focus-rows { display: flex; flex-direction: column; gap: 4px; }
  .rx-time-analysis .ta-focus-row { display: grid; grid-template-columns: 200px 1fr 110px 56px 130px; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 4px; transition: background 0.15s ease; font-size: 11px; }
  .rx-time-analysis .ta-focus-row:hover { background: #fafbfc; }
  .rx-time-analysis .ta-focus-name { color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-time-analysis .ta-focus-bar { position: relative; height: 12px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
  .rx-time-analysis .ta-focus-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
  .rx-time-analysis .ta-focus-tgt { color: #6b7280; font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

  .rx-time-analysis .ta-play-btn { background: #15803d; color: #fff; border-color: #15803d; }
  .rx-time-analysis .ta-play-btn:hover { background: #0f6230; color: #fff; }
  .rx-time-analysis .ta-play-btn.ta-playing { background: #d46b08; border-color: #d46b08; }
  .rx-time-analysis .ta-play-btn.ta-playing:hover { background: #b35906; color: #fff; }
  .rx-time-analysis .ta-play-btn i { margin-right: 4px; }

  .rx-time-analysis .ta-loop-btn { background: #fff; color: #6b7280; border-color: #e0e0e0; }
  .rx-time-analysis .ta-loop-btn:hover { color: #2c5282; border-color: #2c5282; }
  .rx-time-analysis .ta-loop-btn.ta-on { background: #2c5282; color: #fff; border-color: #2c5282; }
  .rx-time-analysis .ta-loop-btn i { margin-right: 4px; }
  .rx-time-analysis .ta-mini-grp { display: inline-flex; align-items: center; gap: 4px; }
  .rx-time-analysis .ta-mini-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; }
  .rx-time-analysis .ta-mini-sel { padding: 4px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; background: #fff; color: #333; }

  /* ── Theme: Light (default) — already inherited ── */

  /* ── Theme: Dim — soft blue tint ── */
  .rx-time-analysis.ta-theme-dim { background: #eef2f7; }
  .rx-time-analysis.ta-theme-dim .ta-time-card,
  .rx-time-analysis.ta-theme-dim .ta-card,
  .rx-time-analysis.ta-theme-dim .ta-segments,
  .rx-time-analysis.ta-theme-dim .ta-focus,
  .rx-time-analysis.ta-theme-dim .ta-grid-ctrls { background: #fafbfc; }

  /* ── Theme: Dark — slate ── */
  .rx-time-analysis.ta-theme-dark { background: #0f172a; color: #e5e7eb; }
  .rx-time-analysis.ta-theme-dark .ta-banner { background: #2a2a18; color: #fbe9a8; }
  .rx-time-analysis.ta-theme-dark .ta-time-card,
  .rx-time-analysis.ta-theme-dark .ta-card,
  .rx-time-analysis.ta-theme-dark .ta-segments,
  .rx-time-analysis.ta-theme-dark .ta-focus,
  .rx-time-analysis.ta-theme-dark .ta-grid-ctrls { background: #1e293b; border-color: #334155; color: #e5e7eb; }
  .rx-time-analysis.ta-theme-dark .ta-card-h { border-bottom-color: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-card-t { color: #f1f5f9; }
  .rx-time-analysis.ta-theme-dark .ta-card-slug { background: #334155; color: #cbd5e1; }
  .rx-time-analysis.ta-theme-dark .ta-card-foot { border-top-color: #334155; color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-mini-tbl th { color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-mini-tbl td { border-top-color: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-mode-btn { color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-mode-btn.ta-on { background: #334155; color: #f1f5f9; }
  .rx-time-analysis.ta-theme-dark .ta-mode-grp { background: #0f172a; }
  .rx-time-analysis.ta-theme-dark .ta-tslider-track,
  .rx-time-analysis.ta-theme-dark .ta-slider-track { background: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-seg-btn { background: #0f172a; border-color: #334155; color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-seg-btn:hover { color: #93c5fd; border-color: #5b8def; }
  .rx-time-analysis.ta-theme-dark .ta-seg-btn.ta-in-range { background: #1e293b; color: #93c5fd; border-color: #5b8def; }
  .rx-time-analysis.ta-theme-dark .ta-grid-ctrls-lbl,
  .rx-time-analysis.ta-theme-dark .ta-grid-sort-lbl,
  .rx-time-analysis.ta-theme-dark .ta-mini-lbl { color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-grid-search,
  .rx-time-analysis.ta-theme-dark .ta-grid-sort,
  .rx-time-analysis.ta-theme-dark .ta-mini-sel { background: #0f172a; color: #e5e7eb; border-color: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-card-more { color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-time-h .t-val { color: #93c5fd; }
  .rx-time-analysis.ta-theme-dark .ta-time-h .t-eyebrow,
  .rx-time-analysis.ta-theme-dark .ta-time-h .t-range { color: #94a3b8; }
  .rx-time-analysis.ta-theme-dark .ta-bullet-bar,
  .rx-time-analysis.ta-theme-dark .ta-strip-bar,
  .rx-time-analysis.ta-theme-dark .ta-focus-bar { background: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-focus-row:hover { background: #334155; }
  .rx-time-analysis.ta-theme-dark .ta-focus-filter { background: #0f172a; }
  .rx-time-analysis.ta-theme-dark .ta-focus-name { color: #e5e7eb; }
  .rx-time-analysis.ta-theme-dark .ta-pill-pass { background: rgba(21,128,61,0.25); color: #86efac; }
  .rx-time-analysis.ta-theme-dark .ta-pill-warn { background: rgba(212,107,8,0.25); color: #fcd34d; }
  .rx-time-analysis.ta-theme-dark .ta-pill-fail { background: rgba(220,38,38,0.25); color: #fca5a5; }

  /* ── Theme: Sepia — warm cream ── */
  .rx-time-analysis.ta-theme-sepia { background: #f5ecd6; }
  .rx-time-analysis.ta-theme-sepia .ta-time-card,
  .rx-time-analysis.ta-theme-sepia .ta-card,
  .rx-time-analysis.ta-theme-sepia .ta-segments,
  .rx-time-analysis.ta-theme-sepia .ta-focus,
  .rx-time-analysis.ta-theme-sepia .ta-grid-ctrls { background: #fdf6e3; border-color: #d6c9a4; }
  .rx-time-analysis.ta-theme-sepia .ta-card-h { border-bottom-color: #d6c9a4; }
  .rx-time-analysis.ta-theme-sepia .ta-card-foot { border-top-color: #d6c9a4; }

  /* ── Root Cause tab + drawer ─────────────────────────────────────── */
  .rx-rca { padding: 12px; height: 100%; overflow-y: auto; }
  .rx-rca .rca-banner { background: #fef3cd; color: #856404; border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }
  .rx-rca .rca-banner i { margin-right: 6px; }
  .rx-rca .rca-empty { color: #6b7280; font-size: 12px; padding: 16px; background: #fff; border: 1px dashed #e6e8eb; border-radius: 6px; }
  .rx-rca .rca-empty i { color: #2c5282; margin-right: 6px; }
  .rx-rca .rca-suggest-h { margin: 14px 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 700; }
  /* ONE scrolling row, not a wrapping grid. With 17 domains the auto-fill grid
     wrapped to four or five rows and ate most of the pane before a single
     diagnosis had been asked for. Cards keep their natural width (flex:0 0 auto)
     and the row scrolls sideways instead of growing downward. */
  .rx-rca .rca-suggest-grid { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; }
  .rx-rca .rca-suggest-grid::-webkit-scrollbar { height: 6px; }
  .rx-rca .rca-suggest-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
  .rx-rca .rca-suggest-grid::-webkit-scrollbar-track { background: transparent; }
  /* label on line 1, branch badge on line 2 -- for EVERY card. Inline, the badge
     only dropped to a second line when the label happened to be long, so the row
     had two different card heights. */
  .rx-rca .rca-suggest-t { white-space: nowrap; }
  .rx-rca .rca-suggest-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
                             background: #fff; border: 1px solid #e6e8eb; padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left; font-size: 12px; color: #333; font-weight: 600; transition: all 0.15s ease; }
  .rx-rca .rca-suggest-btn:hover { border-color: #2c5282; box-shadow: 0 2px 8px rgba(44,82,130,0.10); color: #2c5282; }
  .rx-rca .rca-suggest-btn i { color: #2c5282; margin-right: 6px; }

  /* The diagnosis used to open as a fixed right-hand drawer over the page,
     which covered the app while leaving this pane — already sized for exactly
     this content — empty. It now renders IN the pane: domain buttons pinned at
     the top, result filling the rest. The global NS.Rca drawer (reachable from
     other tabs, which have no pane of their own) is unchanged and still uses
     the overlay form; only the wrapper differs, via RootCauseView.shellOpen. */
  .rx-rca { display: flex; flex-direction: column; overflow: hidden; }
  .rx-rca .rca-shell { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
  .rx-rca .rca-domains { flex: 0 0 auto; }
  .rx-rca .rca-domains-note { font-weight: 600; color: #b45309; text-transform: none; letter-spacing: 0; }
  .rx-rca .rca-result { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* .rx-rca clips (above) so Diagnostics can scroll its own result; the sub-tab
     host is what scrolls, or the Influences result sits unreachable below the fold */
  .rx-rca .rca-sub-host { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .rx-rca .rca-suggest-btn.is-active { border-color: #2c5282; background: #e0ecf8; color: #2c5282; }
  /* a domain whose branch this binout lacks: the backend would answer with a
     fabricated demo analysis, so refuse it here rather than show invented data */
  .rx-rca .rca-suggest-btn[disabled] { opacity: .45; cursor: not-allowed; }
  .rx-rca .rca-suggest-btn[disabled]:hover { border-color: #e6e8eb; box-shadow: none; color: #555; }
  .rx-rca .rca-suggest-br { font-family: ui-monospace, Menlo, monospace; font-size: 9px; color: #9ca3af; background: #f3f4f6; padding: 1px 5px; border-radius: 3px; margin-left: 0; }

  .rx-rca .rca-panel { background: #fff; border: 1px solid #e6e8eb; border-radius: 8px; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
  .rx-rca .rca-panel .rca-h { padding: 12px 16px; }
  .rx-rca .rca-panel .rca-body { padding: 0 16px 16px; }

  .rx-rca .rca-placeholder { height: 100%; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
                             color: #9ca3af; background: #fff; border: 1px dashed #e6e8eb; border-radius: 8px; text-align: center; }
  .rx-rca .rca-placeholder i { font-size: 22px; color: #cbd5e1; }
  .rx-rca .rca-placeholder-t { font-size: 13px; font-weight: 600; color: #6b7280; }
  .rx-rca .rca-placeholder-s { font-size: 11px; color: #9ca3af; }

  .rca-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 99; animation: rcaFadeIn 0.2s ease; }
  .rca-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 540px; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 100; display: flex; flex-direction: column; animation: rcaSlideIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); }
  @keyframes rcaFadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rcaSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .rca-h { padding: 14px 18px; border-bottom: 1px solid #e6e8eb; display: flex; align-items: flex-start; gap: 10px; }
  .rca-h h3 { margin: 0; font-size: 15px; font-weight: 700; color: #222; }
  .rca-h-eyebrow { font-size: 11px; color: #2c5282; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
  .rca-h-eyebrow i { margin-right: 4px; }
  .rca-x { margin-left: auto; border: none; background: transparent; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; padding: 0 4px; }
  .rca-x:hover { color: #222; }
  .rca-body { flex: 1; overflow-y: auto; padding: 0 18px 18px; }
  .rca-loading { padding: 30px 18px; color: #555; font-size: 13px; background: #fafbfc; border-radius: 8px; margin-top: 14px; }
  .rca-loading i { color: #2c5282; margin-right: 6px; }
  .rca-error { padding: 14px; background: #f8d7da; color: #721c24; border-radius: 6px; margin-top: 14px; font-size: 13px; }

  .rca-rsp-card { padding: 14px; margin: 14px 0; background: #fafbfc; border-radius: 8px; border: 1px solid #e6e8eb; }
  .rca-rsp-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .rca-rsp-name { font-size: 13px; font-weight: 700; color: #222; }
  .rca-rsp-branch { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #9ca3af; background: #f3f4f6; padding: 2px 7px; border-radius: 4px; }
  .rca-rsp-val { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 18px; }
  .rca-rsp-val.fail { color: #dc2626; }
  .rca-rsp-val.warn { color: #d46b08; }
  .rca-rsp-val.pass { color: #15803d; }
  .rca-rsp-val.na   { color: #555; }
  .rca-rsp-vs { font-size: 11px; color: #6b7280; margin-left: 4px; }
  .rca-rsp-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
  .rca-rsp-status.fail { background: #f8d7da; color: #721c24; }
  .rca-rsp-status.warn { background: #fef3cd; color: #856404; }
  .rca-rsp-status.pass { background: #d4edda; color: #155724; }
  .rca-rsp-status.na   { background: #f0f0f0; color: #555; }
  .rca-rsp-meta { font-size: 11px; color: #6b7280; margin-top: 6px; }

  .rca-section-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; font-weight: 700; margin: 18px 0 8px; display: flex; align-items: center; gap: 6px; }
  .rca-section-h i { color: #2c5282; }
  .rca-contrib { display: flex; flex-direction: column; gap: 8px; }
  .rca-contrib-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e6e8eb; border-radius: 6px; background: #fff; }
  .rca-contrib-rank { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: #e0ecf8; color: #2c5282; font-weight: 700; font-size: 11px; }
  .rca-contrib-body { flex: 1; font-size: 12px; line-height: 1.5; color: #333; }
  .rca-contrib-body b { color: #222; }
  .rca-contrib-cite { display: block; margin-top: 4px; font-size: 10px; color: #9ca3af; font-family: ui-monospace, Menlo, monospace; }
  .rca-contrib-cite::before { content: '↳ '; color: #2c5282; }

  .rca-diag { padding: 14px; background: #f8fbfe; border: 1px solid #c8d5e7; border-radius: 8px; font-size: 13px; line-height: 1.6; color: #333; }
  .rca-diag-lbl { display: inline-block; padding: 1px 7px; border-radius: 3px; background: #2c5282; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-right: 6px; vertical-align: middle; }

  .rca-presc { display: flex; flex-direction: column; gap: 10px; }
  .rca-presc-row { padding: 12px 14px; border: 1px solid #e6e8eb; border-radius: 8px; background: #fff; }
  .rca-presc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .rca-presc-rank { font-weight: 700; color: #222; font-size: 13px; }
  .rca-presc-conf { margin-left: auto; display: inline-flex; padding: 2px 7px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
  .rca-presc-conf.high { background: #d4edda; color: #155724; }
  .rca-presc-conf.med  { background: #fef3cd; color: #856404; }
  .rca-presc-conf.low  { background: #f0f0f0; color: #555; }
  .rca-presc-action { font-size: 13px; color: #222; line-height: 1.5; }
  .rca-presc-action code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11px; color: #2c5282; }
  .rca-presc-delta { margin-top: 6px; font-size: 11px; color: #6b7280; }
  .rca-presc-cite { margin-top: 4px; font-size: 10px; color: #9ca3af; font-family: ui-monospace, Menlo, monospace; }

  .rca-f { padding: 14px 18px; border-top: 1px solid #e6e8eb; display: flex; gap: 8px; align-items: center; background: #fafbfc; }
  .rca-f button { border: 1px solid #e6e8eb; background: #fff; color: #6b7280; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .rca-f button:hover { color: #2c5282; border-color: #2c5282; }
  .rca-f .rca-primary { background: #2c5282; color: #fff; border-color: #2c5282; }
  .rca-f .rca-primary:hover { background: #1f3c66; color: #fff; }
  .rca-spacer { flex: 1; }

  .rca-engine-grp { display: inline-flex; background: #f0f0f0; border-radius: 6px; padding: 2px; gap: 2px; margin-left: auto; }
  .rca-engine-btn { border: none; background: transparent; color: #6b7280; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.15s ease; }
  .rca-engine-btn:hover { color: #2c5282; }
  .rca-engine-btn.rca-on { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .rca-diag-llm { background: #f0fdf4; border-color: #bbf7d0; }
  .rca-diag-lbl-llm { background: #15803d; }

  .rx-time-analysis .ta-card-why { margin-left: 4px; border: none; background: transparent; color: #9ca3af; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; font-size: 11px; }
  .rx-time-analysis .ta-card-why:hover { background: var(--ta-accent-tint, #e0ecf8); color: var(--ta-accent, #2c5282); }
  .rx-time-analysis .ta-card-why i { margin: 0; }

  /* Physical Test response adapter + BMS v1 analysis. Kept under .rx so the
     classic Physical Test and Simulation pages receive no global styling. */
  .rx-pt-cohort{position:relative;z-index:4;flex:0 0 auto;margin:10px 12px 8px;border:1px solid var(--border);border-radius:8px;background:#fff;overflow:visible;}
  .rx-pt-cohort>.rx-sec-head{padding:8px 9px;border-bottom:1px solid var(--border);}
  .rx-pt-cohort-list{display:flex;gap:5px;flex-wrap:wrap;max-height:96px;overflow-y:auto;padding:8px 9px 5px;}
  .rx-pt-cohort-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 6px;border:1px solid #dbe4ee;border-radius:999px;background:#f8fafc;color:#334155;font-size:10px;font-weight:700;}
  .rx-pt-cohort-chip.is-pinned{border-color:#bfdbfe;background:#eff6ff;color:#1e40af;}.rx-pt-cohort-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.rx-pt-cohort-chip button{border:0;background:transparent;color:#94a3b8;line-height:1;padding:0;cursor:pointer;font-size:14px;}.rx-pt-cohort-chip button:hover{color:#b91c1c;}
  .rx-pt-cohort-picker{position:relative;z-index:5;}.rx-pt-cohort-search{margin:3px 9px 7px;display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--border-strong);border-radius:5px;background:#fff;color:#94a3b8;}.rx-pt-cohort-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:11px;color:#334155;}
  .rx-pt-cohort-results{position:absolute;top:calc(100% - 5px);left:9px;right:9px;z-index:12;max-height:148px;overflow:auto;border:1px solid var(--border);border-radius:5px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.16);}.rx-pt-cohort-results button{width:100%;display:grid;grid-template-columns:16px 1fr auto;gap:5px;align-items:center;border:0;border-bottom:1px solid var(--border);padding:6px 7px;text-align:left;background:#fff;color:#334155;font-size:10.5px;cursor:pointer;}.rx-pt-cohort-results button:last-child{border-bottom:0;}.rx-pt-cohort-results button:hover{background:#eff6ff;color:#1e40af;}.rx-pt-cohort-results small{color:#94a3b8;font-family:'SF Mono',Menlo,monospace;}
  .rx-pt-cohort-state{padding:5px 9px 8px;font-size:10px;color:#64748b;}.rx-pt-cohort-state.is-error{color:#b91c1c;}
  .rx-pt-source-strategy{margin:0 9px 7px;display:flex;align-items:center;gap:8px;color:#64748b;font-size:10px;font-weight:700;}.rx-pt-source-strategy select{flex:1;min-width:0;padding:5px 7px;border:1px solid var(--border-strong);border-radius:4px;background:#fff;font-size:10px;}
  .rx-pt-readonly{display:flex;gap:6px;padding:7px 9px;border-top:1px solid #dbeafe;background:#eff6ff;color:#1e40af;font-size:9.5px;line-height:1.35;}
  .rx-pt-mode{margin:10px 12px 8px;padding:10px;border:1px solid var(--border);border-radius:7px;background:#f8fafc;display:flex;flex-direction:column;gap:6px;}
  .rx-pt-mode.is-bms{background:#f0fdf4;border-color:#bbf7d0;}
  .rx-pt-mode>div:first-child{display:flex;align-items:center;gap:7px;}
  .rx-pt-mode-label{font-weight:800;color:#334155;}.rx-pt-mode.is-bms .rx-pt-mode-label{color:#166534;}
  .rx-pt-confidence{margin-left:auto;padding:1px 6px;border-radius:999px;background:#fff;border:1px solid var(--border);font-size:9px;font-weight:700;text-transform:uppercase;color:#64748b;}
  .rx-pt-evidence{font-size:10px;color:#64748b;}
  .rx-pt-mode label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:#64748b;}
  .rx-pt-mode select,.rx-pt-filters select{min-width:0;flex:1;padding:5px 7px;border:1px solid var(--border-strong);border-radius:4px;background:#fff;font:inherit;font-size:11px;}
  .rx-pt-presets{padding:0 12px 8px;display:flex;gap:5px;flex-wrap:wrap;}
  .rx-pt-filters{padding:0 12px 9px;display:grid;grid-template-columns:1fr;gap:6px;}
  .rx-pt-filters .rx-filter{margin:0;width:100%;}
  .rx-pt-selection{border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .rx-pt-rows{flex:1 1 auto;min-height:180px;padding-top:6px;}
  .rx-pt-row{align-items:flex-start;min-height:42px;}.rx-pt-row .r-name{line-height:1.25;}.rx-pt-row .r-meta{display:block;margin-top:3px;color:#94a3b8;font-size:9px;text-transform:capitalize;}
  .rx-pt-cap-note{padding:7px 12px;border-top:1px solid var(--border);font-size:9.5px;line-height:1.35;color:#94a3b8;background:#fafbfc;}

  .rx-pt-analysis{height:100%;overflow:auto;padding:14px;background:#f4f6f8;}
  .rx-pt-analysis-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .rx-pt-analysis-head>div:first-child{flex:1;min-width:0;}
  .rx-pt-analysis-title{font-size:16px;font-weight:800;color:#1e293b;}.rx-pt-analysis-title i{color:#15803d;margin-right:5px;}
  .rx-pt-analysis-sub{font-size:11px;color:#64748b;margin-top:2px;}
  .rx-pt-loading{min-height:320px;border:1px dashed var(--border-strong);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#64748b;}
  .rx-pt-loading i{font-size:22px;color:var(--primary);}
  .rx-pt-kpis{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;margin-bottom:10px;}
  .rx-pt-kpi{padding:12px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);}
  .rx-pt-kpi-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:#64748b;font-weight:800;}
  .rx-pt-kpi-value{font-size:19px;font-weight:800;color:#1e293b;margin:4px 0 2px;font-family:'SF Mono',Menlo,monospace;}
  .rx-pt-kpi-detail{font-size:10px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rx-pt-chart-card{padding:10px;margin-bottom:10px;overflow:hidden;}
  .rx-pt-chart{display:block;width:100%;height:auto;max-height:240px;background:linear-gradient(#fff,#f8fafc);border-radius:6px;}
  .rx-pt-chart text{font:10px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:#64748b;}
  .rx-pt-empty-chart{min-height:120px;display:flex;align-items:center;justify-content:center;color:#94a3b8;}
  .rx-pt-analysis-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10px;}
  .rx-pt-issues{display:flex;flex-direction:column;gap:7px;}
  .rx-pt-issue{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:6px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;}
  .rx-pt-issue.critical{background:#fef2f2;border-color:#fecaca;color:#991b1b;}.rx-pt-issue.ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
  .rx-pt-issue>i{margin-top:2px;}.rx-pt-issue div{display:flex;flex-direction:column;gap:2px;}.rx-pt-issue b{font-size:11px;}.rx-pt-issue span{font-size:10px;line-height:1.4;}
  .rx-pt-evidence-list{display:flex;flex-direction:column;}
  .rx-pt-evidence-list>div{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(120px,1fr);gap:3px 10px;padding:7px 0;border-bottom:1px solid var(--border);}
  .rx-pt-evidence-list>div:last-child{border-bottom:0;}.rx-pt-evidence-list span{font-size:10px;color:#64748b;}.rx-pt-evidence-list b{font-size:11px;color:#334155;}.rx-pt-evidence-list small{grid-column:2;font-size:9.5px;color:#94a3b8;}
  .rx-pt-method{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border:1px solid #bfdbfe;border-radius:7px;background:#eff6ff;color:#1e40af;font-size:10px;line-height:1.4;}
  .rx-pt-method span{flex:1;}.rx-pt-method .rx-btn{white-space:nowrap;}
  .rx-pt-partial{margin-top:8px;padding:7px 10px;border-radius:6px;background:#fffbeb;color:#92400e;font-size:10px;}
  .rx-pt-ml{height:100%;overflow:auto;padding:14px;background:#f4f6f8;}.rx-pt-ml .rx-pt-analysis-title i{color:#2563eb;}
  .rx-pt-ml-notice{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;padding:10px 12px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4;color:#166534;}.rx-pt-ml-notice>i{margin-top:2px;}.rx-pt-ml-notice>div{display:flex;flex-direction:column;gap:2px;}.rx-pt-ml-notice b{font-size:11px;}.rx-pt-ml-notice span{font-size:10px;line-height:1.45;}
  .rx-pt-ml-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px;}.rx-pt-ml-grid .rx-card{margin:0;}
  .rx-pt-ml-cohort{display:flex;flex-wrap:wrap;gap:6px;}.rx-pt-ml-cohort>span{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid #dbe4ee;border-radius:6px;background:#f8fafc;color:#334155;font-size:10px;font-weight:700;}.rx-pt-ml-cohort small{color:#94a3b8;font-weight:500;font-family:'SF Mono',Menlo,monospace;}
  .rx-pt-ml-inline-error{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:7px 8px;border-radius:5px;background:#fffbeb;color:#92400e;font-size:10px;line-height:1.4;}
  .rx-pt-ml-select{width:100%;padding:7px 8px;border:1px solid var(--border-strong);border-radius:5px;background:#fff;color:#334155;font-size:11px;}.rx-pt-ml-help{margin-top:7px;color:#64748b;font-size:10px;line-height:1.4;}
  .rx-pt-ml-responses{margin-bottom:10px;}.rx-pt-ml-responses .rx-pt-loading{min-height:130px;}.rx-pt-ml-response-table{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:6px;}.rx-pt-ml-response-table .rx-tbl{margin:0;}.rx-pt-ml-response-table td small{display:block;margin-top:2px;color:#94a3b8;font-size:9px;}.rx-pt-ml-response-table input[type=checkbox]{width:15px;height:15px;accent-color:#2563eb;}
  .rx-pt-ml-fields{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(5,minmax(90px,.7fr)) minmax(150px,1fr);gap:8px;}.rx-pt-ml-fields label{display:flex;flex-direction:column;gap:4px;color:#64748b;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.25px;}.rx-pt-ml-fields input{min-width:0;padding:6px 7px;border:1px solid var(--border-strong);border-radius:5px;background:#fff;color:#334155;font-size:11px;text-transform:none;letter-spacing:0;font-weight:500;}.rx-pt-ml-fields input[readonly]{background:#f8fafc;color:#64748b;}
  .rx-pt-ml-actions{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--border);}.rx-pt-ml-actions>span{flex:1;color:#64748b;font-size:10px;line-height:1.4;}.rx-pt-ml-actions .rx-btn{white-space:nowrap;}
  .rx-pt-ml-error{display:flex;gap:8px;margin:10px 0;padding:9px 11px;border:1px solid #fecaca;border-radius:7px;background:#fef2f2;color:#991b1b;font-size:10px;line-height:1.4;}.rx-pt-ml-result{margin-top:10px;border-left:4px solid #f59e0b;}.rx-pt-ml-result.is-ready{border-left-color:#16a34a;}.rx-pt-ml-result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:8px;}.rx-pt-ml-result-grid>div{display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid var(--border);border-radius:5px;background:#f8fafc;}.rx-pt-ml-result-grid span{color:#64748b;font-size:9px;text-transform:uppercase;font-weight:800;}.rx-pt-ml-result-grid b{overflow:hidden;text-overflow:ellipsis;color:#334155;font-size:10.5px;white-space:nowrap;}.rx-pt-ml-result details{border-top:1px solid var(--border);padding:7px 0;}.rx-pt-ml-result summary{cursor:pointer;color:#475569;font-size:10px;font-weight:700;}.rx-pt-ml-result pre{max-height:260px;overflow:auto;margin:7px 0 0;padding:9px;border-radius:5px;background:#0f172a;color:#dbeafe;font:9.5px/1.45 'SF Mono',Menlo,monospace;white-space:pre-wrap;word-break:break-word;}
  @media(max-width:1100px){.rx-pt-kpis{grid-template-columns:repeat(2,minmax(140px,1fr));}.rx-pt-analysis-grid{grid-template-columns:1fr;}}
  @media(max-width:1280px){.rx-pt-ml-fields{grid-template-columns:repeat(4,minmax(120px,1fr));}.rx-pt-ml-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
  @media(max-width:900px){.rx-pt-ml-grid{grid-template-columns:1fr;}.rx-pt-ml-fields{grid-template-columns:repeat(2,minmax(120px,1fr));}}

  /* ── ATD channel mapper: per-criterion branch + searchable id picker ── */
  .rx-map-crit{border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-bottom:8px;background:#fff;}
  .rx-map-crit-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;font-size:12px;}
  .rx-map-crit-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
  .rx-map-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
  .rx-map-chip{display:inline-flex;align-items:center;gap:5px;background:#e0ecf8;color:#2c5282;border-radius:4px;padding:2px 5px 2px 8px;font-size:11px;font-family:monospace;}
  .rx-map-chip button{border:none;background:transparent;color:#2c5282;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;}
  .rx-map-chip button:hover{color:#b91c1c;}
  /* bounded height: a nodout branch can list thousands of ids and an unbounded
     list would push every following criterion off the page */
  .rx-map-list{display:flex;flex-wrap:wrap;gap:4px;max-height:132px;overflow:auto;padding:2px;border:1px solid var(--border);border-radius:4px;background:#fafbfc;}
  .rx-map-opt{border:1px solid var(--border-strong);background:#fff;border-radius:4px;padding:3px 7px;font-size:11px;font-family:monospace;cursor:pointer;color:#374151;}
  .rx-map-opt:hover{background:#e8f0fe;}
  .rx-map-opt.is-sel{background:#2c5282;border-color:#2c5282;color:#fff;}
  .rx-map-empty{font-size:11px;color:#94a3b8;padding:6px;}
  .rx-map-more{font-size:10px;color:#94a3b8;margin-top:4px;}

  /* ── Protocols pane ── */
  .rx-proto-list{display:flex;flex-direction:column;gap:5px;}
  .rx-proto-wrap{display:flex;align-items:stretch;gap:6px;}
  .rx-proto-row{flex:1;display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--border);background:#fff;border-radius:6px;padding:7px 10px;cursor:pointer;}
  .rx-proto-row:hover{background:#f8fafc;}
  .rx-proto-row.is-sel{border-color:#2c5282;background:#e8f0fe;box-shadow:inset 3px 0 0 #2c5282;}
  .rx-proto-main{display:flex;flex-direction:column;flex:1;min-width:0;}
  .rx-proto-name{font-size:12px;font-weight:600;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-proto-sub{font-size:10px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rx-proto-up{border:1px solid var(--border);border-radius:6px;padding:10px;background:#fff;}
  .rx-proto-fmt{margin:6px 0 0;padding:7px 9px;background:#f8fafc;border:1px solid var(--border);border-radius:4px;font-size:10.5px;line-height:1.5;color:#475569;overflow-x:auto;}
  .rx-proto-res{margin-top:9px;border-top:1px solid var(--border);padding-top:8px;}
  .rx-proto-res-k{font-size:11px;font-weight:700;color:#374151;margin-top:6px;}
  /* the worker reports EVERY rejected row with a reason — bounded scroll so a
     500-row sheet's report cannot bury the Commit button */
  .rx-proto-res-rows{max-height:180px;overflow:auto;font-family:monospace;font-size:10.5px;color:#475569;background:#f8fafc;border:1px solid var(--border);border-radius:4px;padding:5px 7px;margin-top:3px;}

  /* ── mapping drop zone ── */
  .rx-proto-drop{border:2px dashed var(--border-strong);border-radius:8px;padding:20px 14px;text-align:center;color:#64748b;background:#fafbfc;transition:background .15s ease,border-color .15s ease;}
  .rx-proto-drop.is-over{border-color:#2c5282;background:#e8f0fe;color:#2c5282;}
  .rx-proto-drop .fa{font-size:22px;color:#94a3b8;}
  .rx-proto-drop.is-over .fa{color:#2c5282;}
  .rx-proto-drop-t{font-size:12px;font-weight:600;margin-top:6px;}
  .rx-proto-drop-s{font-size:10.5px;color:#94a3b8;margin-top:3px;}
  /* the real input is hidden but still focusable/clickable through the label */
  .rx-proto-browse{color:#2c5282;text-decoration:underline;cursor:pointer;}
  .rx-proto-browse input{display:none;}

  /* stored (tier-2) protocol binding vs a one-off (tier-1) override */
  .rx-map-chip.is-stored{background:#e8daef;color:#6c3483;}
  .rx-map-chip.is-stored.is-beaten{opacity:.5;text-decoration:line-through;}
  .rx-map-last{font-size:10px;color:#64748b;align-self:center;margin-left:2px;}

  /* ── Root Cause · sub-tabs ───────────────────────────────────────────── */
  .rx-rca .rca-subtabs { display: flex; gap: 4px; padding: 0 0 10px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
  .rx-rca .rca-subtab { border: 1px solid var(--border); background: #fff; color: var(--text-muted); border-radius: var(--radius-xs, 4px);
                        font: inherit; font-size: 11px; font-weight: 600; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .rx-rca .rca-subtab:hover { border-color: var(--primary); color: var(--primary); }
  .rx-rca .rca-subtab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

  /* ── Root Cause · Influences ─────────────────────────────────────────── */
  .rx-infl-panel { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); padding: 10px 12px; margin-bottom: 14px; background: #fcfcfd; }
  .rx-infl-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 9px; }
  .rx-infl-row:last-child { margin-bottom: 0; }
  .rx-infl-row > label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: none; }
  .rx-infl-row select, .rx-infl-row input[type="number"] { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); background: #fff;
                        font: inherit; font-size: 11px; color: var(--text); padding: 4px 6px; max-width: 100%; }
  .rx-infl-row input[type="number"] { width: 72px; }
  .rx-infl-row select { min-width: 120px; }
  .rx-infl-wide { flex: 1 1 260px; min-width: 0; }
  .rx-infl-wide select { width: 100%; min-width: 0; }
  .rx-infl-lab { font-size: 10px; font-weight: 700; color: var(--text-muted); align-self: center; }
  .rx-infl-fams { gap: 6px 8px; }
  /* All / None sit with the label, not adrift at the end of a wrapped chip run */
  .rx-infl-fams .rx-mini { order: -1; }
  .rx-infl-fams .rx-infl-lab { order: -2; }
  .rx-infl-fam { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text); font-weight: 500;
                 border: 1px solid var(--border); border-radius: 12px; padding: 3px 9px 3px 6px; cursor: pointer; background: #fff; }
  .rx-infl-fam input { margin: 0; }
  /* the label is a bare text node, so flex `gap` never applies between it and
     the colour dot -- the dot needs its own margin or they touch */
  .rx-infl-fam .rx-infl-dot { margin-right: 3px; }
  .rx-infl-br { font-family: monospace; font-size: 9px; color: var(--text-dim); margin-left: 4px; }
  .rx-infl-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
  .rx-infl-run { border: 1px solid var(--primary); background: var(--primary); color: #fff; border-radius: var(--radius-xs, 4px);
                 font: inherit; font-size: 11px; font-weight: 700; padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .rx-infl-run:hover { filter: brightness(1.08); }

  .rx-infl-wait, .rx-infl-err { padding: 26px 16px; text-align: center; font-size: 11.5px; color: var(--text-dim); }
  .rx-infl-err { color: #b91c1c; }
  .rx-infl-title { font-size: 13px; font-weight: 700; color: var(--text); }
  .rx-infl-sub { font-size: 10.5px; color: var(--text-dim); margin-bottom: 10px; }
  .rx-infl-fig { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); background: #fff; padding: 6px; position: relative; overflow-x: auto; }
  .rx-infl-modes { display: flex; gap: 5px; flex: 0 0 auto; }
  .rx-infl-modes .rx-mini.is-on, .rx-rci .rx-mini.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
  .rx-rci { outline: none; }
  .rx-rci-bar { display: flex; align-items: center; gap: 5px; padding: 2px 2px 8px; }
  .rx-rci-speed { font-size: 10px; height: 20px; border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); background: #fff; }
  .rx-rci-where { flex: 1 1 auto; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--text); }
  .rx-rci-body { display: flex; gap: 12px; align-items: flex-start; }
  .rx-rci-plot { position: relative; flex: 1 1 auto; min-width: 0; }
  .rx-rci-svg { display: block; width: 100%; height: auto; }
  .rx-rci-svg .rx-rci-axis text { font-size: 10px; fill: #6b7280; }
  .rx-rci-svg .rx-rci-axis path, .rx-rci-svg .rx-rci-axis line { stroke: #d7dce3; }
  .rx-rci-band.is-hover { stroke: #2c5282; stroke-width: 1; }
  .rx-rci-band.is-sel { stroke: #2c5282; stroke-width: 2; }
  .rx-rci-edge { stroke: #d7dce3; stroke-dasharray: 3 3; }
  .rx-rci-hit { fill: transparent; cursor: zoom-in; }
  .rx-rci-hit.is-sel { cursor: zoom-out; }
  .rx-rci-pill rect { fill: #fff; }
  .rx-rci-pill text { font-size: 10px; font-weight: 700; fill: #374151; }
  .rx-rci-resp { fill: none; stroke: #111827; stroke-width: 1.6; }
  .rx-rci-slope { stroke: #c2410c; stroke-width: 1.5; stroke-dasharray: 6 3; opacity: .9; }
  .rx-rci-driver { fill: none; stroke-width: 1.7; opacity: .9; }
  .rx-rci-driver.is-weak { stroke-dasharray: 3 3; opacity: .7; }
  .rx-rci-tip { position: absolute; display: none; pointer-events: none; z-index: 2; max-width: 280px; padding: 7px 9px; border-radius: 6px;
                background: rgba(17, 24, 39, .92); color: #fff; font-size: 11px; line-height: 1.45; }
  .rx-rci-tip-k { margin-top: 3px; color: #cbd5e1; }
  .rx-rci-side { flex: 0 0 280px; max-height: 470px; overflow-y: auto; padding-left: 12px; border-left: 1px solid var(--border); font-size: 11px; color: var(--text); }
  .rx-rci-side-h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
  .rx-rci-side-h span { font-weight: 500; color: var(--text-muted); font-size: 11px; }
  .rx-rci-side-s { color: var(--text-muted); margin-bottom: 8px; }
  .rx-rci-seg, .rx-rci-drv { display: flex; width: 100%; text-align: left; background: #fff; border: 1px solid #eef0f3; border-radius: 6px;
                              padding: 6px 8px; margin-bottom: 5px; cursor: pointer; font: inherit; color: inherit; }
  .rx-rci-seg { align-items: center; gap: 8px; }
  .rx-rci-seg:hover, .rx-rci-drv:hover { border-color: var(--primary); }
  .rx-rci-seg i { color: var(--text-muted); }
  .rx-rci-stats { display: flex; gap: 6px; margin: 6px 0 8px; }
  .rx-rci-stats div { flex: 1 1 0; background: #f8fafc; border-radius: 6px; padding: 5px 7px; }
  .rx-rci-stats span { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
  .rx-rci-stats b { font-size: 12px; font-variant-numeric: tabular-nums; }
  .rx-rci-quiet { margin-bottom: 8px; padding: 6px 8px; border-radius: 6px; background: #f3f4f6; color: #4b5563; line-height: 1.45; }
  .rx-rci-drv { flex-direction: column; gap: 2px; }
  .rx-rci-drv-h { display: flex; align-items: center; gap: 7px; }
  .rx-rci-drv-h span:nth-child(n+3) { color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .rx-rci-drv-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-rci-drv-m { color: var(--text-muted); font-size: 10px; }
  .rx-rci-drv.is-weak { opacity: .6; }
  .rx-rci-drv.is-off { opacity: .45; border-style: dashed; }
  .rx-rci-foot { margin-top: 8px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
  .rx-infl-warn { margin-top: 10px; padding: 7px 10px; border: 1px solid #fde68a; background: #fffbeb; border-radius: var(--radius-xs, 4px);
                  font-size: 10.5px; color: #92400e; line-height: 1.5; }
  .rx-infl-note { margin-top: 8px; font-size: 10px; color: var(--text-dim); line-height: 1.55; }

  .rx-infl-legend { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); padding: 8px 10px; background: #fcfcfd; }
  .rx-infl-leg-h { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
  .rx-infl-leg-row { display: grid; grid-template-columns: 12px 56px 1fr 84px; gap: 8px; align-items: center; padding: 2px 0; font-size: 10.5px; }
  .rx-infl-ab { font-family: monospace; font-weight: 700; color: var(--text); }
  .rx-infl-leg-lbl { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-infl-leg-fam { color: var(--text-dim); font-size: 9.5px; text-align: right; }

  .rx-infl-ch { margin-top: 18px; font-size: 12px; font-weight: 700; color: var(--text); }
  .rx-infl-chsub { font-size: 10px; color: var(--text-dim); margin-bottom: 9px; line-height: 1.5; }
  .rx-infl-clouds { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .rx-infl-cloud { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); padding: 6px; background: #fff; min-width: 0; }
  .rx-infl-cloud-h { display: flex; align-items: center; gap: 5px; font-size: 9.5px; margin-bottom: 3px; }
  .rx-infl-dn { color: var(--text-dim); font-family: monospace; }
  .rx-infl-r { margin-left: auto; font-family: monospace; color: var(--primary); font-weight: 700; }
  .rx-infl-cloud-l { font-size: 9px; color: var(--text-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-infl-cloud-empty { font-size: 9px; color: var(--text-dim); text-align: center; padding: 22px 0; }
  .rx-infl-summary { margin-top: 14px; font-size: 10px; color: var(--text-dim); font-family: monospace; line-height: 1.5; word-break: break-word; }

  @media (max-width: 720px) {
    .rx-infl-row > label { flex: 1 1 100%; }
    .rx-infl-leg-row { grid-template-columns: 12px 48px 1fr; }
    .rx-infl-leg-fam { display: none; }
  }
  .rx-infl-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
  .rx-infl-head > div:first-child { min-width: 0; flex: 1 1 auto; }
  .rx-infl-head .rx-infl-sub { margin-bottom: 0; }
  .rx-infl-exports { display: flex; gap: 5px; flex: 0 0 auto; }

  /* ── Root Cause · Influences, while it computes ──────────────────────── */
  .rx-infl-skeleton { padding: 4px 0; }
  .rx-sk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .rx-sk-head i { color: var(--primary); font-size: 15px; }
  .rx-sk-t { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .rx-sk-s { font-size: 10.5px; color: var(--text-dim); }
  .rx-sk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
  .rx-sk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted);
                border: 1px solid var(--border); border-radius: 12px; padding: 2px 9px; background: #fff; }
  .rx-sk-fig { position: relative; border: 1px solid var(--border); border-radius: var(--radius-xs, 4px);
               background: #fff; padding: 10px; overflow: hidden; }
  .rx-sk-doms { display: flex; gap: 6px; align-items: flex-start; }
  .rx-sk-dom { flex: 1 1 0; min-width: 0; }
  .rx-sk-dom.rx-sk-low { padding-top: 84px; }
  .rx-sk-box { border: 1px solid #eef2f6; border-radius: 3px; padding: 5px 6px; background: #fcfcfd; }
  .rx-sk-tag { display: block; font-size: 8.5px; font-weight: 700; color: #cbd5e1; margin-bottom: 4px; }
  .rx-sk-line { display: block; height: 6px; border-radius: 3px; margin-bottom: 4px;
                background: linear-gradient(90deg, #eef2f6 25%, #e2e8f0 37%, #eef2f6 63%);
                background-size: 400% 100%; animation: rx-sk-shimmer 1.4s ease infinite; }
  .rx-sk-line:last-child { margin-bottom: 0; width: 72%; }
  .rx-sk-curve { height: 120px; margin-top: 10px; border-radius: 3px;
                 background: linear-gradient(90deg, #f8fafc 25%, #eef2f6 37%, #f8fafc 63%);
                 background-size: 400% 100%; animation: rx-sk-shimmer 1.4s ease infinite; }
  .rx-sk-note { font-size: 10px; color: var(--text-dim); margin: 10px 0 12px; line-height: 1.5; }
  .rx-sk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
  .rx-sk-card { height: 96px; border: 1px solid var(--border); border-radius: var(--radius-xs, 4px);
                background: linear-gradient(90deg, #fcfcfd 25%, #f1f5f9 37%, #fcfcfd 63%);
                background-size: 400% 100%; animation: rx-sk-shimmer 1.4s ease infinite; }
  @keyframes rx-sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
  @media (prefers-reduced-motion: reduce) {
    .rx-sk-line, .rx-sk-curve, .rx-sk-card { animation: none; }
    .rx-sk-head i { animation: none; }
  }
  /* title, export buttons and the figure as one block — so a capture of the
     figure carries the title that names it */
  .rx-infl-top { display: block; }
  .rx-infl-leg-also { font-size: 9px; color: var(--text-dim); margin-top: 1px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rx-infl-leg-row { align-items: start; }
  .rx-infl-leg-fam { white-space: nowrap; }

  /* ── Root Cause · the objective ──────────────────────────────────────── */
  .rx-obj { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); padding: 10px 12px; background: #fff; }
  .rx-obj-h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
  .rx-obj-h > div:first-child { flex: 1 1 auto; min-width: 0; }
  .rx-obj-t { font-size: 12px; font-weight: 700; color: var(--text); }
  .rx-obj-s { font-size: 10px; color: var(--text-dim); line-height: 1.5; margin-top: 2px; }
  .rx-obj-meas { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 600; color: var(--text-muted); flex: 0 0 auto; }
  .rx-obj-meas select { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); background: #fff; font: inherit; font-size: 11px; padding: 4px 6px; }
  .rx-obj-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
  .rx-obj-tbl th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
                   color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border); padding: 4px 6px; }
  .rx-obj-tbl td { border-bottom: 1px solid #f1f5f9; padding: 5px 6px; vertical-align: top; }
  .rx-obj-tbl td.num { text-align: right; font-family: monospace; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
  .rx-obj-tbl tr.is-set { background: #f8fbff; }
  .rx-obj-tbl tr.is-focus { background: #eaf2ff; box-shadow: inset 3px 0 0 #2c5282; }
  .rx-obj-d { font-weight: 700; color: var(--text); }
  .rx-obj-tbl select { border: 1px solid var(--border); border-radius: var(--radius-xs, 4px); background: #fff; font: inherit; font-size: 10.5px; padding: 3px 5px; }
  .rx-obj-lev { min-width: 220px; }
  .rx-obj-idle { color: #cbd5e1; }
  .rx-obj-quiet { color: var(--text-dim); font-style: italic; font-size: 10px; }
  .rx-obj-lever { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 10.5px; flex-wrap: wrap; }
  .rx-obj-lever b { font-weight: 700; }
  .rx-obj-reduce b { color: #b45309; }
  .rx-obj-raise b { color: #15803d; }
  .rx-obj-hold b { color: #475569; }
  .rx-obj-ch { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
  .rx-obj-r { font-family: monospace; color: var(--text-dim); font-size: 9.5px; }
  .rx-obj-grp { font-size: 9px; color: var(--text-dim); font-style: italic; }
  .rx-obj-clash { margin-top: 10px; padding: 8px 10px; border: 1px solid #fecaca; background: #fef2f2;
                  border-radius: var(--radius-xs, 4px); font-size: 10.5px; color: #991b1b; line-height: 1.5; }
  .rx-obj-clash ul { margin: 5px 0 5px 16px; padding: 0; }
  .rx-obj-note { font-size: 10px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }
  @media (max-width: 860px) { .rx-obj-tbl th:nth-child(5), .rx-obj-tbl td:nth-child(5) { display: none; } }
  .rx-obj-thin { font-size: 8.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
                 border-radius: 8px; padding: 0 6px; white-space: nowrap; }
  .rx-infl-src { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .rx-src-tab { border: 1px solid var(--border); background: #fff; color: var(--text-muted); border-radius: var(--radius-xs, 4px);
                font: inherit; font-size: 11px; font-weight: 600; padding: 4px 11px; cursor: pointer; }
  .rx-src-tab:hover { border-color: var(--primary); color: var(--primary); }
  .rx-src-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .rx-src-tab.is-off { opacity: .45; cursor: not-allowed; }
  .rx-infl-src-n { font-size: 10px; color: var(--text-dim); }
  .rx-infl-figrow { padding-top: 7px; border-top: 1px dashed var(--border); }
  .rx-infl-figrow .rx-infl-fam { font-weight: 500; }
  .rx-infl-figrow input[type="number"] { width: 78px; }

/* /javascripts/plugins_src/response_extractor/response_extractor.physicaltest.virtual.css */
.rx-vt-shell {
    --rx-vt-ink: #172033;
    --rx-vt-muted: #64748b;
    --rx-vt-line: #dbe3ed;
    --rx-vt-soft: #f5f8fc;
    --rx-vt-blue: #2563eb;
    --rx-vt-teal: #0f766e;
    color: var(--rx-vt-ink);
    min-height: 100%;
    padding: 18px;
    background: linear-gradient(180deg, #f8fbff 0, #f4f7fb 220px, #f7f9fc 100%);
    overflow: auto;
}
.rx-vt-header { display: flex; align-items: flex-start; gap: 20px; justify-content: space-between; margin-bottom: 12px; }
.rx-vt-header h3 { margin: 5px 0 4px; font-size: 21px; line-height: 1.25; color: var(--rx-vt-ink); }
.rx-vt-header p { max-width: 760px; margin: 0; color: var(--rx-vt-muted); font-size: 12px; line-height: 1.5; }
.rx-vt-eyebrow { color: var(--rx-vt-blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rx-vt-eyebrow i { margin-right: 5px; }
.rx-vt-contract { flex: none; padding: 7px 10px; border: 1px solid #bbf7d0; border-radius: 999px; background: #f0fdf4; color: #166534; font-size: 10px; font-weight: 700; }
.rx-vt-contract i { margin-right: 4px; }
.rx-vt-limitation, .rx-vt-error, .rx-vt-disabled, .rx-vt-state { display: flex; align-items: flex-start; gap: 8px; border-radius: 7px; padding: 9px 11px; margin-bottom: 10px; font-size: 11px; line-height: 1.45; }
.rx-vt-limitation { border: 1px solid #bfdbfe; background: #eff6ff; color: #1e40af; }
.rx-vt-error { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.rx-vt-disabled { border: 1px solid #fde68a; background: #fffbeb; color: #92400e; }
.rx-vt-disabled div { display: flex; flex-direction: column; gap: 2px; }
.rx-vt-state { color: var(--rx-vt-muted); background: #fff; border: 1px solid var(--rx-vt-line); }
.rx-vt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
.rx-vt-main { display: grid; gap: 12px; min-width: 0; }
.rx-vt-card, .rx-vt-related { border: 1px solid var(--rx-vt-line); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .035); }
.rx-vt-card { padding: 13px; }
.rx-vt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.rx-vt-section-head > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rx-vt-step { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #e8efff; color: var(--rx-vt-blue); font-size: 10px; font-weight: 800; }
.rx-vt-status, .rx-vt-truth { padding: 3px 7px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rx-vt-truth.has-truth { background: #dcfce7; color: #166534; }
.rx-vt-truth.no-truth { background: #fff7ed; color: #9a3412; }
.rx-vt-model-picker { display: flex; flex-direction: column; gap: 5px; color: var(--rx-vt-muted); font-size: 10px; font-weight: 700; }
.rx-vt-model-picker select { height: 34px; width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 9px; background: #fff; color: var(--rx-vt-ink); font-size: 12px; }
.rx-vt-model-card { display: grid; grid-template-columns: minmax(130px, .5fr) minmax(150px, .5fr); gap: 8px; margin-top: 9px; }
.rx-vt-model-card > div { display: flex; flex-direction: column; gap: 2px; border-radius: 6px; padding: 8px 9px; background: var(--rx-vt-soft); }
.rx-vt-model-card span { color: var(--rx-vt-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.rx-vt-model-card strong { font-size: 12px; }
.rx-vt-model-card p { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 6px; margin: 0; color: #7c2d12; font-size: 10px; line-height: 1.4; }
.rx-vt-input-grid { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 9px; }
.rx-vt-input { display: flex; flex-direction: column; gap: 5px; color: #334155; font-size: 10px; font-weight: 700; }
.rx-vt-number-wrap { display: flex; height: 35px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }
.rx-vt-number-wrap:focus-within { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(37, 99, 235, .1); }
.rx-vt-number-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 9px; color: var(--rx-vt-ink); font-size: 13px; font-weight: 600; }
.rx-vt-number-wrap b { display: grid; place-items: center; min-width: 44px; border-left: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-size: 10px; }
.rx-vt-input small { color: var(--rx-vt-muted); font-size: 9px; font-weight: 400; line-height: 1.35; }
.rx-vt-source { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px; border-radius: 6px; background: #f8fafc; color: #475569; font-size: 10px; line-height: 1.4; }
.rx-vt-source i { color: var(--rx-vt-teal); margin-top: 1px; }
.rx-vt-sign { margin: 8px 0 0; color: var(--rx-vt-muted); font-size: 9px; }
.rx-vt-sign i { margin-right: 5px; color: #d97706; }
.rx-vt-actions { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.rx-vt-actions button { height: 32px; border-radius: 6px; padding: 0 12px; font-size: 10px; font-weight: 700; cursor: pointer; }
.rx-vt-actions button:disabled { cursor: default; opacity: .48; }
.rx-vt-run { border: 1px solid var(--rx-vt-blue); background: var(--rx-vt-blue); color: #fff; }
.rx-vt-save { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.rx-vt-saved { margin-left: auto; color: #166534; font-size: 10px; font-weight: 700; }
.rx-vt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 90px; color: #94a3b8; font-size: 10px; text-align: center; }
.rx-vt-empty i { font-size: 20px; }
.rx-vt-reopened { margin-bottom: 9px; padding: 7px 8px; border-radius: 6px; background: #f0fdf4; color: #166534; font-size: 10px; }
.rx-vt-result-grid { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 7px; }
.rx-vt-result-grid article { display: flex; flex-direction: column; min-height: 70px; padding: 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fafcff; }
.rx-vt-result-grid article.primary { border-color: #bfdbfe; background: #eff6ff; }
.rx-vt-result-grid span { color: var(--rx-vt-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .03em; }
.rx-vt-result-grid strong { margin-top: auto; color: var(--rx-vt-ink); font-size: 17px; line-height: 1.3; }
.rx-vt-result-grid small { color: #94a3b8; font-size: 9px; }
.rx-vt-result-foot { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef2f7; color: var(--rx-vt-muted); font-size: 9px; }
.rx-vt-result-foot strong { color: #334155; }
.rx-vt-related { overflow: hidden; position: sticky; top: 0; }
.rx-vt-related-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 11px 9px; border-bottom: 1px solid #eef2f7; }
.rx-vt-related-head > div { display: flex; flex-direction: column; gap: 1px; }
.rx-vt-related-head span { font-size: 11px; font-weight: 800; }
.rx-vt-related-head small { color: var(--rx-vt-muted); font-size: 9px; }
.rx-vt-related-head button { width: 26px; height: 26px; border: 1px solid #dbe3ed; border-radius: 5px; background: #fff; color: #64748b; cursor: pointer; }
.rx-vt-artifacts { max-height: 420px; overflow: auto; padding: 6px; }
.rx-vt-artifacts > button { display: grid; grid-template-columns: 30px minmax(0, 1fr) 10px; align-items: center; gap: 7px; width: 100%; border: 0; border-radius: 6px; padding: 7px; background: transparent; color: var(--rx-vt-ink); text-align: left; cursor: pointer; }
.rx-vt-artifacts > button:hover { background: #f1f5f9; }
.rx-vt-artifact-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; background: #ecfdf5; color: var(--rx-vt-teal); }
.rx-vt-artifact-meta { display: flex; flex-direction: column; min-width: 0; }
.rx-vt-artifact-meta strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.rx-vt-artifact-meta small { color: var(--rx-vt-muted); font-size: 8px; }
.rx-vt-artifacts > button > i { color: #94a3b8; font-size: 8px; }
.rx-vt-artifact-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 24px 8px; color: #94a3b8; font-size: 9px; text-align: center; }
.rx-vt-related-note { display: flex; align-items: flex-start; gap: 6px; padding: 9px 10px; border-top: 1px solid #eef2f7; background: #f8fafc; color: var(--rx-vt-muted); font-size: 9px; line-height: 1.35; }
.rx-vt-loading { padding: 24px; color: #64748b; font-size: 11px; }
.rx-vt-loading i { margin-right: 5px; }
.rx-vtp-shell { --rx-vt-blue: #155e75; --rx-vt-teal: #0f766e; }
.rx-vtp-header { border-bottom-color: #a5f3fc; background: linear-gradient(110deg, #ecfeff 0%, #f8fafc 64%, #f0fdfa 100%); }
.rx-vtp-header .rx-vt-eyebrow { color: #0e7490; }
.rx-vtp-profile-ledger { display: grid; gap: 10px; }
.rx-vtp-field-group { overflow: hidden; border: 1px solid #dbe7ec; border-radius: 8px; background: #fbfdfe; }
.rx-vtp-field-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 9px; border-bottom: 1px solid #e7eef2; background: #f0f9fa; }
.rx-vtp-field-group-head span { color: #164e63; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.rx-vtp-field-group-head small { color: #64748b; font-size: 9px; }
.rx-vtp-field-group .rx-vt-input-grid { padding: 9px; }
.rx-vtp-model-card { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
@media (max-width: 1050px) {
    .rx-vt-layout { grid-template-columns: 1fr; }
    .rx-vt-related { position: static; }
    .rx-vt-artifacts { max-height: 220px; }
}
@media (max-width: 760px) {
    .rx-vt-shell { padding: 12px; }
    .rx-vt-header { flex-direction: column; }
    .rx-vt-input-grid, .rx-vt-result-grid { grid-template-columns: 1fr; }
    .rx-vt-model-card { grid-template-columns: 1fr; }
    .rx-vtp-field-group-head { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* /javascripts/plugins_src/kpis/kpi.manager.css */
.rxk-manager { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; padding: 12px; }

.rxk-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rxk-title  { font-size: 18px; font-weight: 700; color: #2c5282; flex: 0 0 auto; }
.rxk-title  i { margin-right: 6px; }
.rxk-search-wrap { flex: 1 1 0; }
.rxk-search { width: 100%; max-width: 360px; padding: 7px 10px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px; }
.rxk-search:focus { border-color: #2c5282; outline: none; }
.rxk-header-actions { display: flex; gap: 6px; }

.rxk-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.rxk-btn i { font-size: 12px; }
.rxk-btn-primary   { background: #2c5282; color: #fff; }
.rxk-btn-primary:hover { background: #1f3c66; }
.rxk-btn-secondary { background: #f0f0f0; color: #555; }
.rxk-btn-secondary:hover { background: #e8e8e8; color: #2c5282; }
.rxk-btn-ghost     { background: transparent; color: #888; border-color: #e0e0e0; }
.rxk-btn-ghost:hover { color: #555; background: #f5f5f5; }

.rxk-tabs { display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; margin-bottom: 10px; }
.rxk-tab  { border: none; background: transparent; color: #888; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.rxk-tab:hover { color: #555; background: #e8e8e8; }
.rxk-tab-active { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.rxk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e0e0e0; }
.rxk-chip-grp { display: inline-flex; align-items: center; gap: 4px; }
.rxk-chip-grp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 500; margin-right: 4px; }
.rxk-chip { border: 1px solid #e0e0e0; background: #fff; color: #555; padding: 3px 8px; border-radius: 12px; font-size: 11px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.rxk-chip:hover { border-color: #2c5282; color: #2c5282; }
.rxk-chip-active { background: #e0ecf8; border-color: #2c5282; color: #2c5282; font-weight: 600; }
.rxk-chip-empty  { font-size: 11px; color: #999; font-style: italic; }
.rxk-chip-sep    { width: 1px; height: 14px; background: #e0e0e0; }

.rxk-body { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.rxk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rxk-table th { text-align: left; background: #f8f8f8; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; padding: 8px 10px; border-bottom: 1px solid #e0e0e0; }
.rxk-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.rxk-table tr:last-child td { border-bottom: none; }
.rxk-row { cursor: pointer; transition: background 0.15s ease; }
.rxk-row:hover { background: #f8fbfe; }
.rxk-row.rxk-locked { background: #fff9f0; }
.rxk-row.rxk-recycled { opacity: 0.55; }

.rxk-name { font-weight: 600; color: #222; margin-right: 6px; }
.rxk-pill { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10px; background: #f0f0f0; color: #666; margin-left: 4px; text-transform: lowercase; letter-spacing: 0.2px; }
.rxk-pill.rxk-pill-bkt { background: #e8e0f0; color: #6c3483; }

.rxk-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.rxk-badge-sys  { background: #f0f0f0; color: #555; }
.rxk-badge-prj  { background: #d1ecf1; color: #0c5460; }
.rxk-badge-me   { background: #d4edda; color: #155724; }
.rxk-badge-none { background: #f8d7da; color: #721c24; }

.rxk-branches { color: #666; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }
.rxk-numcol { text-align: center; font-weight: 600; color: #222; }
.rxk-lock-col { text-align: center; color: #d46b08; }
.rxk-lock-col .rxk-lock-unset { color: #ccc; }
.rxk-bucket-marker { margin-left: 4px; color: #6c3483; font-size: 10px; }
.rxk-date  { color: #999; font-size: 11px; }

.rxk-actions { white-space: nowrap; text-align: right; }
.rxk-th-act  { text-align: right; }
.rxk-act     { border: none; background: transparent; color: #888; padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.rxk-act:hover { color: #2c5282; background: #e0ecf8; }
.rxk-act-recycle:hover { color: #721c24; background: #f8d7da; }

.rxk-empty { padding: 30px; text-align: center; color: #888; }
.rxk-empty-msg { font-size: 14px; margin-bottom: 6px; }
.rxk-empty-cta { font-size: 12px; color: #999; }
.rxk-error { padding: 20px; color: #721c24; background: #f8d7da; }
.rxk-error i { margin-right: 6px; }

.rxk-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease; }
.rxk-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.rxk-modal-panel { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); width: 520px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; }
.rxk-modal-wide  { width: 800px; }
.rxk-modal-head  { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: space-between; }
.rxk-modal-title { font-size: 14px; font-weight: 700; color: #222; }
.rxk-modal-close { border: none; background: transparent; font-size: 24px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.rxk-modal-close:hover { color: #555; }
.rxk-modal-body  { padding: 16px; overflow-y: auto; }
.rxk-modal-foot  { padding: 12px 16px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 8px; }

.rxk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e0e0e0; font-size: 11px; color: #555; }
.rxk-meta-item b { color: #333; margin-right: 4px; }
.rxk-desc { font-size: 12px; color: #555; margin: 0 0 14px; }
.rxk-table-detail th { font-size: 9px; }
.rxk-typetag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.rxk-typetag-threshold { background: #fef3cd; color: #856404; }
.rxk-typetag-bucket    { background: #e8e0f0; color: #6c3483; }
.rxk-scoring { margin-top: 12px; font-size: 11px; color: #555; padding: 6px 8px; background: #f8fbfe; border-radius: 4px; }
.rxk-disclaimer { margin-top: 8px; font-size: 11px; color: #856404; background: #fef3cd; padding: 6px 8px; border-radius: 4px; }
.rxk-disclaimer i { margin-right: 6px; }

.rxk-import-scope { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #f8fbfe; border-radius: 6px; margin-bottom: 12px; font-size: 12px; }
.rxk-import-scope label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 500; color: #333; }
.rxk-import-scope-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; }
.rxk-help { font-size: 11px; color: #888; font-style: italic; margin: 0 0 12px; }
.rxk-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rxk-catalog-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; }
.rxk-catalog-card:hover { border-color: #2c5282; box-shadow: 0 2px 8px rgba(44,82,130,0.12); }
.rxk-catalog-card:active { transform: scale(0.99); }
.rxk-catalog-name { font-size: 13px; font-weight: 700; color: #222; margin-bottom: 6px; }
.rxk-catalog-meta { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.rxk-catalog-desc { font-size: 11px; color: #777; line-height: 1.4; max-height: 4em; overflow: hidden; }

.rxk-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; margin-bottom: 10px; }
.rxk-form input, .rxk-form textarea, .rxk-form select { display: block; width: 100%; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; margin-top: 4px; box-sizing: border-box; color: #333; font-weight: 400; text-transform: none; letter-spacing: 0; }
.rxk-form input:focus, .rxk-form textarea:focus, .rxk-form select:focus { border-color: #2c5282; outline: none; }
.rxk-form-row { display: flex; gap: 10px; }
.rxk-form-row label { flex: 1 1 0; min-width: 0; }

.rxk-editor-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid #e0e0e0; }
.rxk-editor-divider span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; color: #555; }
.rxk-editor-divider .rxk-btn { margin-left: auto; }
.rxk-editor-rows { display: flex; flex-direction: column; gap: 8px; }
.rxk-editor-empty { padding: 24px; text-align: center; color: #999; font-size: 12px; background: #fafafa; border: 1px dashed #e0e0e0; border-radius: 6px; }

.rxk-target-row { background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.rxk-target-row:hover { border-color: #c8d5e7; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.rxk-tg-main { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rxk-tg-spec { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e0e0e0; }
.rxk-tg-fld  { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; flex: 1 1 100px; min-width: 80px; }
.rxk-tg-fld input, .rxk-tg-fld select { padding: 5px 7px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; color: #333; font-weight: 400; text-transform: none; letter-spacing: 0; background: #fff; }
.rxk-tg-fld input:focus, .rxk-tg-fld select:focus { border-color: #2c5282; outline: none; }
.rxk-tg-label  { flex: 2 1 140px; }
.rxk-tg-branch { flex: 1 1 90px; }
.rxk-tg-narrow { flex: 0 1 80px; }
.rxk-tg-mini   { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; }
.rxk-tg-mini input, .rxk-tg-mini select { padding: 4px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; color: #333; font-weight: 400; text-transform: none; background: #fff; min-width: 70px; }
.rxk-tg-mini input:focus, .rxk-tg-mini select:focus { border-color: #2c5282; outline: none; }
.rxk-row-delete { border: none; background: transparent; color: #888; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; margin-left: auto; }
.rxk-row-delete:hover { color: #721c24; background: #f8d7da; }

.rxk-band-row { display: inline-flex; gap: 3px; align-items: center; }
.rxk-band-chip { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
.rxk-band-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); flex: 0 0 18px; }

.rxk-modal-sub { z-index: 10000; }
.rxk-buckets-body { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.rxk-bucket-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px; background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 6px; }
.rxk-bucket-row:hover { border-color: #c8d5e7; }
.rxk-bfld-lbl { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; flex: 1 1 80px; min-width: 60px; }
.rxk-bfld-lbl input { padding: 4px 6px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; color: #333; font-weight: 400; text-transform: none; background: #fff; }
.rxk-bfld-lbl input[type="color"] { padding: 0; height: 26px; cursor: pointer; }
.rxk-bfld-narrow { flex: 0 1 70px; }
.rxk-bucket-delete { border: none; background: transparent; color: #888; padding: 6px 8px; border-radius: 4px; cursor: pointer; align-self: center; transition: background 0.2s ease, color 0.2s ease; }
.rxk-bucket-delete:hover { color: #721c24; background: #f8d7da; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* /javascripts/plugins_src/expression_composer/expression_composer.css */
.xc{display:flex;flex-direction:column;gap:0;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#222;}
.xc-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#64748b;margin-bottom:6px;}
.xc-expr{width:100%;min-height:96px;resize:vertical;border:1px solid #cbd5e1;border-radius:6px;padding:9px 11px;font:12px/1.5 'SF Mono',Menlo,monospace;color:#1f2937;background:#fff;}
.xc-expr:focus{outline:none;border-color:#2c5282;box-shadow:0 0 0 2px rgba(44,82,130,.12);}
.xc-sub{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#94a3b8;margin:12px 0 6px;display:flex;align-items:center;gap:8px;}
.xc-hint{font-weight:400;text-transform:none;letter-spacing:0;color:#b6bdc7;}
.xc-refs{display:flex;flex-wrap:wrap;gap:5px;min-height:20px;}
.xc-ref{display:inline-flex;align-items:center;gap:5px;background:#eef4fb;color:#2c5282;border:1px solid #cfe0f3;border-radius:13px;padding:2px 4px 2px 10px;font-size:11px;font-weight:600;}
.xc-ref-x{border:none;background:none;color:#7896bd;cursor:pointer;font-size:14px;line-height:1;padding:0 4px;border-radius:50%;}
.xc-ref-x:hover{color:#fff;background:#b91c1c;}
.xc-empty{font-size:11px;color:#9ca3af;}
.xc-gtabs{display:flex;gap:3px;background:#f1f3f5;padding:3px;border-radius:7px;margin-bottom:7px;}
.xc-gtab{flex:1;border:none;background:transparent;color:#6b7280;font:inherit;font-size:11px;font-weight:600;padding:6px 4px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.xc-gtab i{font-size:10px;}
.xc-gtab.is-active{background:#fff;color:#2c5282;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.xc-search{width:100%;border:1px solid #e6e8eb;border-radius:5px;padding:6px 10px;font-size:12px;margin-bottom:7px;}
.xc-search:focus{outline:none;border-color:#2c5282;}
.xc-items{display:flex;flex-wrap:wrap;gap:5px;max-height:200px;overflow:auto;padding:2px;}
.xc-tok{display:inline-flex;align-items:center;gap:5px;border:1px solid #e6e8eb;background:#fff;color:#374151;border-radius:13px;padding:3px 11px;font-size:11px;cursor:grab;max-width:100%;overflow:hidden;white-space:nowrap;}
.xc-tok i{color:#2c5282;font-size:10px;}
.xc-tok-sub{color:#9ca3af;font-size:10px;margin-left:2px;}
.xc-tok:hover{border-color:#2c5282;color:#2c5282;background:#f5f9ff;}
.xc-tok:active{cursor:grabbing;}
.xc-fns{display:flex;flex-wrap:wrap;gap:5px;}
.xc-fn{border:1px solid #e6e8eb;background:#f9fafb;color:#475569;border-radius:4px;padding:3px 9px;font:11px 'SF Mono',Menlo,monospace;cursor:pointer;}
.xc-fn:hover{border-color:#2c5282;color:#2c5282;background:#fff;}
.xc-preview{margin-top:8px;border:1px solid #e6e8eb;border-radius:6px;background:#fafbfc;padding:8px 10px;min-height:34px;}
.xc-pv-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#94a3b8;margin-bottom:5px;display:flex;align-items:center;gap:7px;}
.xc-pv-n{font-weight:400;color:#b6bdc7;}
.xc-pv-chart svg{display:block;}
.xc-pv-scalar{font:600 22px 'SF Mono',Menlo,monospace;color:#2c5282;}
.xc-pv-err{font-size:11px;color:#b45309;display:flex;align-items:center;gap:6px;}
.xc-pv-empty{font-size:11px;color:#9ca3af;}
.xc-fnform{margin-top:8px;border:1px solid #cfe0f3;background:#f5f9ff;border-radius:6px;padding:8px 10px;}
.xc-fnf-h{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.xc-fnf-name{font:600 12px 'SF Mono',Menlo,monospace;color:#2c5282;}
.xc-fnf-hint{flex:1;font-size:10px;color:#94a3b8;}
.xc-fnf-x{border:none;background:none;color:#94a3b8;cursor:pointer;font-size:16px;line-height:1;padding:0 4px;}
.xc-fnf-x:hover{color:#b91c1c;}
.xc-fnf-args{display:flex;flex-direction:column;gap:5px;}
.xc-fnf-arg{display:flex;align-items:center;gap:7px;font-size:11px;}
.xc-fnf-arg-lbl{flex:0 0 110px;color:#374151;font-weight:600;display:flex;align-items:center;gap:5px;}
.xc-fnf-arg-type{font-size:9px;font-weight:400;text-transform:uppercase;color:#94a3b8;background:#fff;border:1px solid #e6e8eb;border-radius:3px;padding:0 5px;}
.xc-fnf-arg input{flex:1;border:1px solid #e6e8eb;border-radius:4px;padding:4px 8px;font:11px 'SF Mono',Menlo,monospace;}
.xc-fnf-arg input:focus{outline:none;border-color:#2c5282;}
.xc-fnf-foot{display:flex;justify-content:flex-end;margin-top:9px;}
.xc-fnf-insert{border:1px solid #2c5282;background:#2c5282;color:#fff;border-radius:4px;padding:5px 14px;font-size:11px;font-weight:600;cursor:pointer;}
.xc-fnf-insert:hover{background:#1f3d63;}

/* /stylesheets/admin.css */
/* ==========================================================================
   Admin Panel — Modernized Shell & Overview
   Phase 1: Shell + Sidebar + Overview Tab
   Follows hpcsubmit.css (Fora Design System) patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes adminFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes adminSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */

.admin-page-header {
    margin-bottom: 20px;
    padding: 0 4px;
}

.admin-page-header .admin-page-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 3px;
    letter-spacing: -0.3px;
}

.admin-page-header .admin-page-subtitle {
    font-size: 13px;
    color: #8a8fa8;
    margin: 0;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Shell — Flexbox Layout (replaces jQuery UI Layout)
   -------------------------------------------------------------------------- */

#admin-index-container[data-type="admin-index"] {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 500px;
    min-width: 800px;
    width: 100%;
    background: #f5f6f8;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dfe1e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.admin-sidebar {
    width: 230px;
    flex: 0 0 230px;
    background: #fff;
    border-right: 1px solid #ebedf2;
    display: flex;
    flex-direction: column;
}

.admin-sidebar-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f0f1f5;
}

.admin-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
}

.admin-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8edf8, #d4dcf0);
    color: #3b5998;
    font-size: 12px;
    flex: 0 0 30px;
}

/* Navigation list */
#admin-index-container[data-type="admin-index"] #admin_sidebar_menu {
    padding: 10px 10px;
    flex: 1;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li {
    margin: 1px 0;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #5a5f7a;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.3;
    background: none;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li > a:hover {
    background: #f3f4f8;
    color: #2d3250;
    text-decoration: none;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li > a:focus {
    background: #f3f4f8;
    color: #2d3250;
    text-decoration: none;
    outline: none;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li.active > a {
    background: #edf0f7;
    color: #2c5282;
    font-weight: 600;
}

/* Icon squares inside sidebar links */
#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li > a > span.fa,
#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li > a > span.glyphicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: #f0f1f5;
    color: #6b7094;
    flex: 0 0 28px;
    transition: background 0.18s ease, color 0.18s ease;
}

#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li.active > a > span.fa,
#admin-index-container[data-type="admin-index"] #admin_sidebar_menu > ul.nav > li.active > a > span.glyphicon {
    background: #337ab7;
    color: #fff;
}

/* Override Bootstrap pill defaults */
#admin-index-container[data-type="admin-index"] .nav-pills > li > a {
    border-radius: 7px;
    background: none;
    padding: 8px 10px;
}

#admin-index-container[data-type="admin-index"] .nav-pills > li.active > a,
#admin-index-container[data-type="admin-index"] .nav-pills > li.active > a:hover,
#admin-index-container[data-type="admin-index"] .nav-pills > li.active > a:focus {
    background: #edf0f7;
    color: #2c5282;
}

#admin-index-container[data-type="admin-index"] .nav-pills > li > a:hover {
    background: #f3f4f8;
    color: #2d3250;
}

/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    overflow-y: auto;
    background: #f5f6f8;
}

#admin-index-container[data-type="admin-index"] #admin-tab-content {
    animation: adminFadeIn 0.3s ease;
}

#admin-index-container[data-type="admin-index"] #admin-tab-content > .alert-notice {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #8a8fa8;
    text-align: center;
    padding: 60px 20px;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Overview Tab — Stat Cards
   -------------------------------------------------------------------------- */

.admin-stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.admin-stat-card {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #dfe1e8;
    background: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-card:hover {
    border-color: #c8cad5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.admin-stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 40px;
}

.admin-stat-card-icon.icon-db      { background: #e0ecf8; color: #2c5282; }
.admin-stat-card-icon.icon-users   { background: #e8e0f0; color: #6a4c93; }
.admin-stat-card-icon.icon-server  { background: #e0f0e8; color: #276749; }

.admin-stat-info {
    flex: 1;
    min-width: 0;
}

.admin-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #8a8fa8;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.admin-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
}

.admin-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: #8a8fa8;
    margin-left: 3px;
}

/* --------------------------------------------------------------------------
   Overview Tab — Cards
   -------------------------------------------------------------------------- */

.admin-card {
    border-radius: 8px;
    border: 1px solid #dfe1e8;
    background: #fff;
    padding: 0;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
    border-color: #c8cad5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Card header with icon box */
.admin-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f1f5;
}

.admin-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
}

/* Icon color variants — semantic palette from hpcsubmit */
.admin-card-icon.icon-users    { background: #ede7f6; color: #5e35b1; }
.admin-card-icon.icon-server   { background: #e3f2fd; color: #1565c0; }
.admin-card-icon.icon-php      { background: #e8f5e9; color: #2e7d32; }
.admin-card-icon.icon-database { background: #fff3e0; color: #e65100; }

.admin-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
}

.admin-card-subtitle {
    font-size: 11px;
    color: #8a8fa8;
    margin: 2px 0 0;
    font-weight: 400;
}

/* Card body */
.admin-card-body {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Tables inside cards
   -------------------------------------------------------------------------- */

.admin-card-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.admin-card-table thead th {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    color: #8a8fa8;
    letter-spacing: 0.5px;
    background: #fafbfc;
    border-bottom: 1px solid #ebedf2;
    padding: 9px 16px;
    white-space: nowrap;
}

.admin-card-table tbody td {
    padding: 9px 16px;
    border-bottom: 1px solid #f4f5f7;
    vertical-align: middle;
    color: #2d3250;
    line-height: 1.4;
}

.admin-card-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-card-table tbody tr {
    transition: background 0.12s ease;
}

.admin-card-table tbody tr:hover {
    background: #f8f9fb;
}

/* Key-value table variant */
.admin-card-table.admin-kv-table td:first-child {
    font-weight: 500;
    color: #5a5f7a;
    width: 40%;
    font-size: 12px;
}

.admin-card-table.admin-kv-table td:last-child {
    color: #2d3250;
    word-break: break-all;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Status badges (PHP extension loaded/not loaded)
   -------------------------------------------------------------------------- */

.admin-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-status-badge.status-loaded {
    background: #d4edda;
    color: #155724;
}

.admin-status-badge.status-not-loaded {
    background: #f8d7da;
    color: #721c24;
}

/* --------------------------------------------------------------------------
   Overview content wrapper
   -------------------------------------------------------------------------- */

.admin-overview-content {
    animation: adminFadeIn 0.3s ease;
}

.admin-overview-content .navbar {
    display: none;
}

/* ==========================================================================
   Phase 2: Settings Tab
   ========================================================================== */

/* Settings content wrapper */
.admin-settings-content {
    animation: adminFadeIn 0.3s ease;
}

/* Hide Bootstrap navbar if still present */
.admin-settings-content > .navbar {
    display: none;
}

/* --------------------------------------------------------------------------
   Scrollspy — all sections visible, scroll to navigate
   -------------------------------------------------------------------------- */

.admin-settings-scrollspy {
    position: relative;
}

.admin-settings-section {
    margin-bottom: 20px;
    scroll-margin-top: 70px;
}

/* --------------------------------------------------------------------------
   Sticky Pill Navigation Bar
   -------------------------------------------------------------------------- */

.admin-settings-pillbar {
    position: -webkit-sticky;
    position: sticky;
    top: -24px;
    z-index: 20;
    background: #f5f6f8;
    padding: 0;
    margin: -24px 0 20px;
    border-bottom: 1px solid #ebedf2;
    transition: box-shadow 0.2s ease;
}

/* --------------------------------------------------------------------------
   Settings Search Bar
   -------------------------------------------------------------------------- */

.admin-settings-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 12px;
}

.admin-settings-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.admin-settings-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8fa8;
    font-size: 12px;
    pointer-events: none;
}

.admin-settings-search-input {
    width: 100%;
    height: 34px;
    padding: 0 32px 0 32px;
    border: 1px solid #dfe1e8;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #2d3250;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-settings-search-input::placeholder {
    color: #b0b4c8;
    font-weight: 400;
}

.admin-settings-search-input:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
}

.admin-settings-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8fa8;
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
}

.admin-settings-search-clear:hover {
    color: #2d3250;
}

.admin-search-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Export Dropdown
   -------------------------------------------------------------------------- */

.admin-export-dropdown {
    position: relative;
    flex: 0 0 auto;
}

.admin-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #dfe1e8;
    border-radius: 8px;
    background: #fff;
    color: #5a5f7a;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-export-btn:hover {
    border-color: #c8cad5;
    color: #2d3250;
}

.admin-export-btn:focus {
    outline: none;
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
}

.admin-export-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 120px;
    background: #fff;
    border: 1px solid #dfe1e8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 30;
    padding: 4px 0;
    animation: adminFadeIn 0.15s ease;
}

.admin-export-dropdown.open .admin-export-menu {
    display: block;
}

.admin-export-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #2d3250;
    text-decoration: none;
    transition: background 0.12s ease;
}

.admin-export-option:hover {
    background: #f0f1f5;
    text-decoration: none;
    color: #2d3250;
}

.admin-export-option .fa {
    color: #8a8fa8;
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.admin-search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #8a8fa8;
    animation: adminFadeIn 0.2s ease;
}

.admin-search-no-results .fa {
    font-size: 28px;
    display: block;
    margin-bottom: 12px;
    color: #ccd0dc;
}

.admin-search-no-results p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.admin-settings-pillbar.is-pinned {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-pill-track {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: 2px;
    position: relative;
    padding: 0 12px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccd0dc transparent;
}

.admin-pill-track::-webkit-scrollbar {
    height: 4px;
}

.admin-pill-track::-webkit-scrollbar-track {
    background: transparent;
}

.admin-pill-track::-webkit-scrollbar-thumb {
    background: #ccd0dc;
    border-radius: 4px;
}

.admin-pill-track::-webkit-scrollbar-thumb:hover {
    background: #a0a4b8;
}

.admin-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #5a5f7a;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.admin-pill:hover {
    color: #2d3250;
    background: #f0f1f5;
    text-decoration: none;
}

.admin-pill.active {
    color: #fff;
    font-weight: 600;
}

.admin-pill.active:hover {
    background: transparent;
}

/* Sliding bubble indicator behind the active pill */
.admin-pill-indicator {
    position: absolute;
    top: 0;
    height: 30px;
    background: #337ab7;
    border-radius: 20px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Toggle Switch (for boolean variables)
   -------------------------------------------------------------------------- */

.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    user-select: none;
    font-weight: 400;
    position: relative;
}

.admin-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    clip: rect(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.admin-toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #ccd0dc;
    border-radius: 22px;
    transition: background 0.2s ease;
    flex: 0 0 40px;
    vertical-align: middle;
}

.admin-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.admin-toggle input:checked + .admin-toggle-slider {
    background: #337ab7;
}

.admin-toggle input:checked + .admin-toggle-slider::after {
    transform: translateX(18px);
}

.admin-toggle input:focus-visible + .admin-toggle-slider {
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15);
}

.admin-toggle-label {
    font-size: 12px;
    font-weight: 400;
    color: #5a5f7a;
    line-height: 22px;
}

/* --------------------------------------------------------------------------
   Select Dropdown (for future select-type variables)
   -------------------------------------------------------------------------- */

.admin-settings-field select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5f7a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.admin-settings-field select.form-control:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
    outline: none;
}

/* --------------------------------------------------------------------------
   Settings Form Fields (Binaries, Directories, Post Processors)
   -------------------------------------------------------------------------- */

.admin-settings-field {
    padding: 14px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.admin-settings-field:last-of-type {
    border-bottom: none;
}

.admin-settings-field label {
    font-size: 13px;
    font-weight: 500;
    color: #2d3250;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.admin-field-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #f0f1f5;
    color: #6b7094;
    flex: 0 0 22px;
}

.admin-use-default {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: #337ab7;
    text-decoration: none;
}

.admin-use-default:hover {
    text-decoration: underline;
}

.admin-settings-field .form-control {
    border-radius: 6px;
    border: 1px solid #dfe1e8;
    font-size: 13px;
    padding: 7px 12px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
}

.admin-settings-field .form-control:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
    outline: none;
}

.admin-field-desc {
    font-size: 11px;
    color: #8a8fa8;
    margin: 6px 0 0;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Settings Action Bar
   -------------------------------------------------------------------------- */

.admin-settings-actions {
    padding: 14px 18px;
    border-top: 1px solid #f0f1f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    line-height: 1.4;
}

.admin-btn-primary {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.admin-btn-primary:hover {
    background: #2c6aa0;
    border-color: #2c6aa0;
    color: #fff;
}

.admin-btn-outline {
    background: #fff;
    color: #5a5f7a;
    border-color: #dfe1e8;
}

.admin-btn-outline:hover {
    background: #f3f4f8;
    color: #2d3250;
    border-color: #c8cad5;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Card Header Action (e.g. Clear Cache link in Logging)
   -------------------------------------------------------------------------- */

.admin-card-header-action {
    margin-left: auto;
}

.admin-link-action {
    font-size: 12px;
    font-weight: 500;
    color: #337ab7;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.18s ease;
}

.admin-link-action:hover {
    background: #edf0f7;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Card Icon Color Variants — Settings Sections
   -------------------------------------------------------------------------- */

.admin-card-icon.icon-settings  { background: #e8edf8; color: #3b5998; }
.admin-card-icon.icon-logging   { background: #fff8e1; color: #f57f17; }
.admin-card-icon.icon-dirs      { background: #e0f2f1; color: #00695c; }
.admin-card-icon.icon-vault     { background: #fce4ec; color: #c62828; }
.admin-card-icon.icon-binaries  { background: #f3e5f5; color: #7b1fa2; }
.admin-card-icon.icon-postproc  { background: #e3f2fd; color: #1565c0; }
.admin-card-icon.icon-ldap      { background: #fff3e0; color: #e65100; }
.admin-card-icon.icon-memcache  { background: #e8f5e9; color: #2e7d32; }
.admin-card-icon.icon-mail      { background: #e1f5fe; color: #0277bd; }
.admin-card-icon.icon-logger    { background: #f1f8e9; color: #558b2f; }
.admin-card-icon.icon-llm       { background: #ede7f6; color: #5e35b1; }
.admin-card-icon.icon-ssh       { background: #e0f7fa; color: #00838f; }

/* --------------------------------------------------------------------------
   LLM Defaults — Provider Sections
   -------------------------------------------------------------------------- */

.admin-llm-section {
    border-bottom: 1px solid #ebedf2;
}

.admin-llm-section:last-of-type {
    border-bottom: none;
}

.admin-llm-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: -0.1px;
}

.admin-llm-section-icon {
    font-size: 11px;
    color: #f5a623;
}

.admin-llm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 10px;
}

.admin-llm-field {
    padding: 10px 18px 10px 38px;
}

.admin-llm-field label {
    font-size: 12px;
    font-weight: 500;
    color: #5a5f7a;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-llm-test-row {
    padding: 8px 18px 12px 38px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-btn-sm {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 4px;
}

.admin-llm-test-btn {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-llm-test-btn:hover {
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
}

.admin-llm-test-btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.admin-llm-test-result {
    font-size: 12px;
    line-height: 1.4;
}

.admin-field-locked {
    font-size: 13px;
    color: #8a8fa8;
    font-style: italic;
}

/* ==========================================================================
   Phase 3: Test Suite Tab
   ========================================================================== */

/* Content wrapper */
.admin-tests-content {
    animation: adminFadeIn 0.3s ease;
}

.admin-tests-content > .page-header,
.admin-tests-content > .alert {
    display: none;
}

/* Icon color variant */
.admin-card-icon.icon-tests { background: #e8f5e9; color: #2e7d32; }

/* --------------------------------------------------------------------------
   Tests Table
   -------------------------------------------------------------------------- */

.admin-tests-table {
    table-layout: fixed;
}

.admin-tests-col-check {
    width: 44px;
}

.admin-tests-col-status {
    width: 110px;
}

.admin-tests-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.admin-tests-name {
    font-weight: 500;
    color: #1a1a2e;
    white-space: nowrap;
}

.admin-tests-desc {
    font-size: 12px;
    color: #5a5f7a;
    line-height: 1.5;
}

.admin-tests-desc code {
    font-size: 11px;
    background: #f0f1f5;
    padding: 1px 5px;
    border-radius: 3px;
    color: #2d3250;
}

.admin-tests-desc a {
    color: #337ab7;
    text-decoration: none;
}

.admin-tests-desc a:hover {
    text-decoration: underline;
}

.admin-tests-status,
.admin-tests-msg {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
}

/* Test status badges */
.admin-test-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.admin-test-badge.admin-test-pass {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-test-badge.admin-test-fail {
    background: #fce4ec;
    color: #c62828;
}

.admin-test-badge.admin-test-running {
    background: #e3f2fd;
    color: #1565c0;
}

.admin-test-badge.admin-test-cancelled {
    background: #fff3e0;
    color: #e65100;
}

.admin-test-badge.admin-test-timeout {
    background: #fff3e0;
    color: #e65100;
}

/* Row highlight while running */
.admin-test-row-running {
    background: #f8f9ff;
}

/* Test messages */
.admin-test-message {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
}

.admin-test-message.admin-test-fail {
    color: #c62828;
}

.admin-test-message.admin-test-pass {
    color: #2e7d32;
}

/* Summary bar */
.admin-tests-summary {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    color: #1a1a2e;
    margin: 16px 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-tests-summary.admin-test-summary-pass {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-tests-summary.admin-test-summary-fail {
    background: #fce4ec;
    color: #c62828;
}

.admin-tests-summary.admin-test-summary-cancelled {
    background: #fff3e0;
    color: #e65100;
}

/* Cancel button */
.admin-btn.admin-btn-cancel {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
    margin-left: 8px;
    cursor: pointer;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.admin-btn.admin-btn-cancel:hover {
    background: #ffe0b2;
}

/* Progress bar */
.admin-tests-progress {
    margin-top: 16px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-tests-progress-track {
    flex: 1;
    height: 6px;
    background: #e8eaf0;
    border-radius: 3px;
    overflow: hidden;
}

.admin-tests-progress-fill {
    height: 100%;
    width: 0%;
    background: #1565c0;
    border-radius: 3px;
    transition: width 0.3s ease;
}


.admin-tests-progress-label {
    font-size: 12px;
    font-weight: 500;
    color: #5a5f7a;
    white-space: nowrap;
}

/* Running state button */
.admin-btn.admin-btn-running {
    opacity: 0.7;
    cursor: wait;
}

/* Widen message column for error details */
.admin-tests-col-msg {
    width: 220px;
}

/* ==========================================================================
   Phase 3: Logs Tab
   ========================================================================== */

/* Content wrapper */
.admin-logs-content {
    animation: adminFadeIn 0.3s ease;
}

/* Icon color variant */
.admin-card-icon.icon-logs { background: #fff8e1; color: #f57f17; }

/* Loading placeholder */
.admin-logs-loading {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: #8a8fa8;
}

/* --------------------------------------------------------------------------
   Log Table (loaded via AJAX into .admin-logs-body)
   -------------------------------------------------------------------------- */

.admin-logs-body .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    margin: 0;
}

.admin-logs-body .table thead th {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    color: #8a8fa8;
    letter-spacing: 0.5px;
    background: #fafbfc;
    border-bottom: 1px solid #ebedf2;
    padding: 9px 16px;
    white-space: nowrap;
}

.admin-logs-body .table tbody td {
    padding: 8px 16px;
    border-bottom: 1px solid #f4f5f7;
    vertical-align: middle;
    color: #2d3250;
    line-height: 1.4;
}

.admin-logs-body .table tbody tr:last-child td {
    border-bottom: none;
}

.admin-logs-body .table tbody tr {
    transition: background 0.12s ease;
}

.admin-logs-body .table tbody tr:hover {
    background: #f8f9fb;
}

/* Strip Bootstrap striped background */
.admin-logs-body .table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.admin-logs-body .table-striped > tbody > tr:nth-of-type(odd):hover {
    background: #f8f9fb;
}

/* --------------------------------------------------------------------------
   Log Type Badges
   -------------------------------------------------------------------------- */

.admin-logs-body .label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.admin-logs-body .label.log_info {
    background: #e3f2fd;
    color: #1565c0;
}

.admin-logs-body .label.log_error {
    background: #f8d7da;
    color: #721c24;
}

.admin-logs-body .label.log_warning {
    background: #fff3cd;
    color: #856404;
}

.admin-logs-body .label.log_debug {
    background: #f0f1f5;
    color: #5a5f7a;
}

/* No-logs message */
.admin-logs-body .alert_message {
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: #8a8fa8;
}

/* --------------------------------------------------------------------------
   SSH Profiles — Card Grid & Forms
   -------------------------------------------------------------------------- */

.ssh-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px;
}

.ssh-card {
    border: 1px solid #e5e7ed;
    border-radius: 10px;
    padding: 16px 18px;
    width: 310px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ssh-card:hover {
    border-color: #c5cad8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ssh-card-active {
    border-color: #00838f;
    box-shadow: 0 0 0 2px rgba(0,131,143,0.12);
}

.ssh-card-add {
    border: 2px dashed #d0d4de;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 140px;
    color: #8a8fa8;
    font-size: 13px;
    font-weight: 500;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.ssh-card-add .fa {
    font-size: 22px;
}

.ssh-card-add:hover {
    border-color: #00838f;
    color: #00838f;
}

.ssh-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ssh-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}

.ssh-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.ssh-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: #8a8fa8;
    transition: color 0.15s ease;
    padding: 0;
    line-height: 1;
}

.ssh-btn:hover { color: #1a1a2e; }

.ssh-btn-sm {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 13px;
}

.ssh-btn-sm:hover { background: #f0f1f5; }

.ssh-btn-test:hover { color: #00838f; }
.ssh-btn-delete:hover { color: #c62828; }

.ssh-card-meta {
    font-size: 12px;
    color: #6b7080;
    margin-bottom: 6px;
}

.ssh-card-meta .fa { font-size: 11px; color: #a0a5b8; }

.ssh-card-port {
    font-family: monospace;
    font-size: 11px;
    color: #a0a5b8;
}

.ssh-card-desc {
    font-size: 12px;
    color: #8a8fa8;
    margin-bottom: 8px;
    line-height: 1.4;
}

.ssh-card-commands {
    border-top: 1px solid #f0f1f5;
    padding-top: 8px;
    margin-top: 4px;
}

.ssh-card-commands-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a0a5b8;
    margin-bottom: 5px;
}

.ssh-cmd-badge {
    display: inline-block;
    background: #f0f7fa;
    color: #00838f;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    margin: 2px 4px 2px 0;
}

.ssh-cmd-badge small {
    color: #6b9ea6;
    font-weight: 400;
}

.ssh-cmd-none {
    font-size: 11px;
    color: #c0c4d0;
    font-style: italic;
}

/* ---- Edit / Add Form ---- */

.ssh-form {
    border: 1px solid #e5e7ed;
    border-radius: 10px;
    padding: 20px 22px;
    margin: 16px 18px 4px;
    background: #fafbfc;
}

.ssh-form-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebedf2;
}

.ssh-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.ssh-form-field {
    flex: 1 1 100%;
    margin-bottom: 2px;
}

.ssh-form-field-half {
    flex: 1 1 calc(50% - 8px);
}

.ssh-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #5a5f7a;
    margin-bottom: 4px;
}

.ssh-form-field label small {
    font-weight: 400;
    color: #a0a5b8;
}

.ssh-key-auth-note {
    background: #f0f4ff;
    border: 1px solid #d0d8f0;
    border-radius: 5px;
    padding: 10px 12px;
    font-size: 12px;
    color: #4a5580;
    line-height: 1.5;
}
.ssh-key-auth-note .fa-key {
    color: #6b7db3;
    margin-right: 4px;
}
.ssh-key-auth-note code {
    background: #e4eaf8;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
}
.ssh-pubkey-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    background: #e8edf8;
    border-radius: 4px;
    padding: 6px 8px;
}
.ssh-pubkey-value {
    flex: 1;
    font-size: 11px;
    word-break: break-all;
    line-height: 1.4;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.ssh-pubkey-value:hover {
    background: #dce2f4;
    border-radius: 3px;
}
.ssh-pubkey-value.ssh-pubkey-copied {
    text-align: center;
    color: #2e7d32;
    font-weight: 500;
    font-family: inherit;
}
.ssh-pubkey-missing {
    margin-top: 8px;
    color: #b07030;
    font-size: 11px;
}
.ssh-pubkey-missing .fa {
    margin-right: 3px;
}

.ssh-form-field .form-control {
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid #d0d4de;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.ssh-form-field .form-control:focus {
    border-color: #00838f;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,131,143,0.1);
}

.ssh-req { color: #c62828; }

/* ---- Commands sub-form ---- */

.ssh-form-commands {
    margin-top: 16px;
    border-top: 1px solid #ebedf2;
    padding-top: 12px;
}

.ssh-form-commands-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}

.ssh-btn-add-cmd {
    font-size: 12px;
    color: #00838f;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 4px;
    background: none;
    border: 1px solid #b2ebf2;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.ssh-btn-add-cmd:hover { background: #e0f7fa; }

.ssh-cmd-form {
    border: 1px solid #ebedf2;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
}

.ssh-cmd-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ssh-cmd-form-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0f7fa;
    color: #00838f;
    font-size: 11px;
    font-weight: 600;
}

.ssh-btn-remove-cmd {
    color: #c0c4d0;
    font-size: 12px;
}

.ssh-btn-remove-cmd:hover { color: #c62828; }

.ssh-cmd-empty {
    font-size: 12px;
    color: #c0c4d0;
    font-style: italic;
    padding: 12px 0;
    text-align: center;
}

/* Access toggle */
.ssh-access-toggle {
    display: flex;
    gap: 16px;
    margin: 4px 0;
}

.ssh-radio {
    font-size: 13px;
    font-weight: 400;
    color: #5a5f7a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.ssh-radio input[type="radio"] {
    margin: 0;
    vertical-align: middle;
    position: relative;
    top: 0;
}

.ssh-user-ids-wrap {
    margin-top: 6px;
}

.ssh-field-hint {
    font-size: 11px;
    color: #a0a5b8;
    display: block;
    margin-top: 3px;
}

/* ---- Form Actions ---- */

.ssh-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #ebedf2;
}

/* ---- Notices ---- */

.ssh-notice {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    margin: 12px 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.ssh-notice .fa {
    margin-top: 2px;
    flex-shrink: 0;
}

.ssh-notice-text {
    flex: 1;
    white-space: pre-line;
}

.ssh-notice-close {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    font-size: 12px;
}

.ssh-notice-close:hover { opacity: 1; }

.ssh-notice-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.ssh-notice-error {
    background: #fce4ec;
    color: #b71c1c;
    border: 1px solid #f8bbd0;
}

/* --------------------------------------------------------------------------
   Skeleton Loading States
   -------------------------------------------------------------------------- */

@keyframes adminShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.admin-skeleton {
    padding: 24px 0;
    animation: adminFadeIn 0.2s ease;
}

.admin-skeleton-pill-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ebedf2;
}

.admin-skeleton-pill {
    width: 80px;
    height: 28px;
    background: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-pill:nth-child(2) { width: 65px; }
.admin-skeleton-pill:nth-child(3) { width: 110px; }
.admin-skeleton-pill:nth-child(4) { width: 95px; }
.admin-skeleton-pill:nth-child(5) { width: 70px; }
.admin-skeleton-pill:nth-child(6) { width: 100px; }

.admin-skeleton-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    overflow: hidden;
}

.admin-skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.admin-skeleton-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e9ecef;
    flex: 0 0 32px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-title-group {
    flex: 1;
}

.admin-skeleton-title {
    height: 14px;
    width: 140px;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-subtitle {
    height: 10px;
    width: 200px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-subtitle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-field {
    padding: 14px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.admin-skeleton-field:last-child {
    border-bottom: none;
}

.admin-skeleton-label {
    height: 12px;
    width: 120px;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-label::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-input {
    height: 34px;
    width: 100%;
    background: #e9ecef;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-input::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-desc {
    height: 10px;
    width: 60%;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.admin-skeleton-desc::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: adminShimmer 1.6s ease-in-out infinite;
}

.admin-skeleton-field:nth-child(odd) .admin-skeleton-label { width: 150px; }
.admin-skeleton-field:nth-child(odd) .admin-skeleton-desc  { width: 45%; }
.admin-skeleton-field:nth-child(3n)  .admin-skeleton-label { width: 100px; }
.admin-skeleton-field:nth-child(3n)  .admin-skeleton-desc  { width: 70%; }

/* ==================== R0-3576 Organizations vendors ==================== */
/* Per-org "Vendors" section under each parent organization card. Only
   rendered when the parent has at least one child registered. Chips are
   compact rows with name + Edit / Add User actions. */
.admin-org-vendors {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f0f0f0;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
}
.admin-org-vendors-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #2c5282;
    margin-bottom: 6px;
}
.admin-org-vendors-label .fa { margin-right: 4px; }
.admin-org-vendors-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admin-org-vendor-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 12px;
    transition: box-shadow 0.2s ease;
}
.admin-org-vendor-chip:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.admin-org-vendor-name {
    font-weight: 600;
    color: #333;
}
.admin-org-vendor-actions {
    display: inline-flex;
    gap: 8px;
}
.admin-org-vendor-actions a {
    font-size: 11px;
    color: #2c5282;
    text-decoration: none;
}
.admin-org-vendor-actions a:hover {
    text-decoration: underline;
}

/* ==================== R0-3576 Users-tab org filter ==================== */
.admin-users-org-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}
.admin-users-org-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
    white-space: nowrap;
}
.admin-users-org-filter {
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    min-width: 220px;
}
.admin-view-toggle{display:inline-flex;background:#f0f0f0;border-radius:8px;padding:3px;gap:2px;margin-left:auto;}
.admin-view-toggle .avt-btn{border:none;background:transparent;color:#888;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;}
.admin-view-toggle .avt-btn.active{background:#fff;color:#2c5282;box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* ==================== Modern Admin Users surface ==================== */
.admin-users-tab .admin-users-index {
    padding: 0 !important;
    color: #273142;
}
.admin-users-tab .admin-users-index > nav.navbar {
    margin: 0 0 14px;
    min-height: 0;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}
.admin-users-tab .admin-users-index > nav .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}
.admin-users-tab .admin-users-index .navbar-header { float: none; }
.admin-users-tab .admin-users-index .navbar-brand {
    height: auto;
    padding: 7px 10px 7px 2px;
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
}
.admin-users-tab .admin-users-index .navbar-collapse {
    display: flex !important;
    flex: 1 1 720px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    box-shadow: none;
}
.admin-users-tab .admin-users-index .navbar-form,
.admin-users-tab .admin-users-index .navbar-nav,
.admin-users-tab .admin-users-index .navbar-nav > li,
.admin-users-tab .admin-users-index .navbar-nav > li > .btn-nav { margin: 0; }
.admin-users-tab .admin-users-index .navbar-form { padding: 0; }
.admin-users-tab .admin-users-index .user-search,
.admin-users-tab .admin-users-org-filter {
    height: 34px;
    border: 1px solid #cfd7e1;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    font-size: 12px;
}
.admin-users-tab .admin-users-index .user-search:focus,
.admin-users-tab .admin-users-org-filter:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44,82,130,.12);
    outline: 0;
}
.admin-users-tab .admin-users-index .navbar-nav > li > a,
.admin-users-tab .admin-users-index .btn,
.admin-users-tab .admin-users-index .user-bulk-actions {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #cfd7e1;
    border-radius: 6px;
    background: #fff;
    color: #445064;
    box-shadow: none;
    font-size: 12px;
    line-height: 18px;
    text-decoration: none;
}
.admin-users-tab .admin-users-index .navbar-nav > li > a:hover,
.admin-users-tab .admin-users-index .btn:hover,
.admin-users-tab .admin-users-index .user-bulk-actions:hover {
    border-color: #9fb0c3;
    background: #f4f7fa;
    color: #2c5282;
}
.admin-users-tab .admin-users-index .addNewUser {
    border-color: #2c5282;
    background: #2c5282;
    color: #fff;
}
.admin-users-tab .admin-users-index .addNewUser:hover {
    border-color: #234268;
    background: #234268;
    color: #fff;
}
.admin-users-tab .admin-users-index .view-types {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 6px;
    background: #eef2f6;
}
.admin-users-tab .admin-users-index .view-types > li > a { border: 0; background: transparent; }
.admin-users-tab .admin-users-index .view-types > li.active > a {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.admin-users-tab .admin-users-index > section > .row { margin: 0; }
.admin-users-tab .admin-users-index > section > .row > .col-md-4 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 0;
}
.admin-users-tab .admin-users-index > section > .row > .col-md-4:nth-child(2) { justify-content: center; }
.admin-users-tab .admin-users-index > section > .row > .col-md-4:nth-child(3) { justify-content: flex-end; }
.admin-users-tab .admin-users-index .body-container { padding: 0; }
.admin-users-tab .admin-users-index .user-list > .row:first-child { margin: 0; }
.admin-users-tab .admin-users-index .user-list > .row:first-child .panel-body {
    min-height: 0;
    padding: 8px 0 12px;
}
.admin-users-tab .admin-users-index .user-list > .row:first-child h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #394457;
}
.admin-users-tab .admin-users-index .user-list > .row:nth-child(2) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 0;
}
.admin-users-tab .admin-users-index .user-list > .row:nth-child(2)::before,
.admin-users-tab .admin-users-index .user-list > .row:nth-child(2)::after { content: none; }
.admin-users-tab .admin-users-index .user-list > .row:nth-child(2) > .col-xs-3 {
    float: none;
    width: auto;
    padding: 0;
}
.admin-users-tab .admin-users-index .user-list .panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24,39,58,.05);
}
.admin-users-tab .admin-users-index .user-list .panel:hover {
    border-color: #bcc8d5;
    box-shadow: 0 5px 14px rgba(24,39,58,.08);
}
.admin-users-tab .admin-users-index .user-list .panel-heading {
    padding: 12px 12px;
    border: 0;
    border-bottom: 1px solid #e8edf2;
    background: #f8fafc;
    color: #202938;
}
.admin-users-tab .admin-users-index .user-list .panel-title {
    max-width: calc(100% - 142px);
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-users-tab .admin-users-index .user-list .btn-group { display: inline-flex; gap: 3px; }
.admin-users-tab .admin-users-index .user-list .btn-group .btn,
.admin-users-tab .admin-users-index .user-list .panel-footer .delete {
    width: 30px;
    min-height: 30px;
    padding: 0;
    border: 1px solid #d4dce5;
    border-radius: 6px !important;
    background: #fff;
    color: #5f6b7a;
}
.admin-users-tab .admin-users-index .user-list .btn-group .btn:hover {
    border-color: #aebdcb;
    background: #edf3f8;
    color: #2c5282;
}
.admin-users-tab .admin-users-index .user-list .btn-group .btn-success {
    border-color: #2c5282;
    background: #2c5282;
    color: #fff;
}
.admin-users-tab .admin-users-index .user-list .panel > .panel-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 12px 16px;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 210px;
    padding: 14px;
    overflow: visible !important;
    color: #4d5968;
    font-size: 12px;
}
.admin-users-tab .admin-users-index .user-list .panel > .panel-body > .row {
    display: block;
    margin: 0;
    min-width: 0;
}
.admin-users-tab .admin-users-index .user-list .panel > .panel-body > .row > div {
    float: none;
    width: auto;
    padding: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
}
.admin-users-tab .admin-users-index .user-list .panel > .panel-body > .row > div:first-child {
    margin-bottom: 3px;
    color: #7a8696;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
.admin-users-tab .admin-users-index .user-list .panel-body strong { color: inherit; font-weight: 500; }
.admin-users-tab .admin-users-index .user-list .panel-footer {
    padding: 9px 12px;
    border-top: 1px solid #e8edf2;
    background: #f8fafc;
}
.admin-users-tab .admin-users-index .user-list .panel-footer .row { display: flex; align-items: center; margin: 0; }
.admin-users-tab .admin-users-index .user-list .panel-footer .row > div { float: none; padding: 0; }
.admin-users-tab .admin-users-index .user-list .panel-footer .row > .col-xs-10 { flex: 1 1 auto; width: auto; }
.admin-users-tab .admin-users-index .user-list .panel-footer .row > .col-xs-2 { flex: 0 0 auto; width: auto; }
.admin-users-tab .admin-users-index .user-list .panel-footer .label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 3px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #e8f0f8;
    color: #2c5282;
    font-size: 10px;
}
.admin-users-tab .admin-users-index .user-list .panel-footer .delete:hover {
    border-color: #e5b9bd;
    background: #fff1f2;
    color: #b4232f;
}
.admin-users-tab .admin-users-org-filter-row {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-color: #dde3ea;
    background: #fff;
}

@media (max-width: 900px) {
    .admin-users-tab .admin-users-index .navbar-collapse { flex-basis: 100%; }
    .admin-users-tab .admin-users-index > section > .row > .col-md-4 { justify-content: flex-start !important; }
}

/* ==========================================================================
   Doctor tab table — Details is the payload column (long paths, table
   lists, fix commands live there). Fixed-layout column split: compact
   name, capped description, badge-width status, everything else Details.
   Scoped to .admin-doctor-table so the 5-column Test Suite table keeps
   its own proportions.
   ========================================================================== */

.admin-doctor-table thead th:first-child {
    width: 180px;
}

.admin-doctor-table thead th:nth-child(2) {
    width: 34%;
}

.admin-doctor-table thead th.admin-tests-col-msg {
    width: auto;
}

.admin-doctor-table .admin-tests-msg {
    text-align: left;
    word-break: break-word;
}

/* /stylesheets/admin_users.css */
/* ==========================================================================
   Admin > Users — Overview list/grid + Asset drilldown
   Scoped under .admin-users-page and .admin-asset-page only.
   Palette borrowed from admin.css (#337ab7 brand, #1a1a2e text, #8a8fa8 muted).
   ========================================================================== */

/* Toolbar — search grows, view toggle + refresh + last-refreshed pin right */
.admin-users-page .admin-users-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-users-page #admin-users-search { flex: 1 1 auto; min-width: 0; height: 34px; }
.admin-users-page #admin-users-last-refreshed { font-size: 12px; color: #8a8fa8; }

/* Second toolbar row — per-asset-type count-threshold filters. Each
   cell groups type label + op dropdown + (conditionally visible)
   numeric input. Filters AND-combine. */
.admin-users-page .admin-users-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    margin-top: -6px;
    margin-bottom: 16px;
    border-top: 1px solid #ebedf2;
}
.admin-users-page .admin-users-filter-label {
    font-size: 12px;
    color: #5a5f7a;
    font-weight: 500;
    margin-right: 4px;
}
.admin-users-page .admin-users-filter-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #f7f9fa;
    border: 1px solid #ebedf2;
    border-radius: 4px;
    font-size: 12px;
}
.admin-users-page .admin-users-filter-type { color: #2d3250; font-weight: 500; }
.admin-users-page .admin-users-filter-op,
.admin-users-page .admin-users-filter-val {
    height: 24px;
    font-size: 11px;
    padding: 0 4px;
}

/* Shared table look — list view + drilldown rows */
.admin-users-page .admin-users-table,
.admin-asset-page .admin-asset-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13px; background: #fff;
    border: 1px solid #dfe1e8; border-radius: 8px; overflow: hidden;
}
.admin-users-page .admin-users-table thead th,
.admin-asset-page .admin-asset-table thead th {
    background: #fafbfc; border-bottom: 1px solid #ebedf2;
    color: #5a5f7a; font-weight: 600; font-size: 12px;
    padding: 10px 14px; text-align: left; white-space: nowrap;
}
.admin-users-page .admin-users-table thead th { cursor: pointer; }
.admin-users-page .admin-users-table tbody td,
.admin-asset-page .admin-asset-table tbody td {
    padding: 9px 14px; border-bottom: 1px solid #f4f5f7;
    color: #2d3250; vertical-align: middle;
}
.admin-users-page .admin-users-table tbody tr:nth-child(even) td,
.admin-asset-page .admin-asset-table tbody tr:nth-child(even) td { background: #fafbfc; }
.admin-users-page .admin-users-table tbody tr:hover td,
.admin-asset-page .admin-asset-table tbody tr:hover td { background: #f0f4fa; }
.admin-users-page .admin-users-table tbody tr:last-child td,
.admin-asset-page .admin-asset-table tbody tr:last-child td { border-bottom: none; }
.admin-users-page .empty,
.admin-asset-page .empty { text-align: center; color: #8a8fa8; padding: 28px 14px; }
.admin-users-page .admin-users-table th:nth-child(n+4),
.admin-users-page .admin-users-table td:nth-child(n+4) { text-align: right; }

/* Grid view — responsive auto-fill cards */
.admin-users-page .admin-users-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.admin-users-page .admin-user-card {
    background: #fff; border: 1px solid #dfe1e8; border-radius: 8px;
    padding: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.admin-users-page .admin-user-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.admin-users-page .admin-user-avatar {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    background: #e8edf8; color: #337ab7; font-weight: 600; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.admin-users-page .admin-user-meta { flex: 1; min-width: 0; }
.admin-users-page .admin-user-name { display: block; font-weight: 600; color: #1a1a2e; font-size: 14px; text-decoration: none; }
.admin-users-page .admin-user-email { font-size: 12px; color: #8a8fa8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-users-page .admin-user-role {
    display: inline-block; margin-top: 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: #5a5f7a; background: #f0f1f5; padding: 2px 7px; border-radius: 3px;
}
.admin-users-page .admin-user-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-users-page .chip {
    display: inline-block; font-size: 11px; color: #2c5282; background: #edf0f7;
    padding: 3px 9px; border-radius: 12px; text-decoration: none;
}
.admin-users-page .chip:hover { background: #dde4f2; color: #1f3d66; text-decoration: none; }
.admin-users-page .admin-users-grid .empty { grid-column: 1 / -1; }

/* Asset-type iconography -- list headers + grid chips + drilldown
   pills all use the same Font Awesome glyphs (mapped in
   spa/admin/users/views.js + class.adminController.inc). */
.admin-users-page .admin-users-table th i.fa {
    margin-right: 4px; color: #5a5f7a; opacity: 0.7;
}
.admin-users-page .admin-users-chip i.fa,
.admin-users-page .chip i.fa {
    margin-right: 4px; color: #337ab7;
}
.admin-users-page .chip .chip-label { margin-left: 2px; }
.admin-asset-page .admin-asset-pills .pill i.fa { margin-right: 6px; }
.admin-asset-page .admin-asset-pills .pill.active i.fa { color: #fff; }

/* Drilldown — breadcrumb + asset-type pills */
.admin-asset-page .admin-asset-breadcrumb { font-size: 13px; color: #5a5f7a; margin-bottom: 14px; }
.admin-asset-page .admin-asset-breadcrumb a { color: #337ab7; text-decoration: none; }
.admin-asset-page .admin-asset-breadcrumb a:hover { text-decoration: underline; }
.admin-asset-page .admin-asset-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.admin-asset-page .admin-asset-pills .pill {
    font-size: 12px; font-weight: 500; color: #5a5f7a; background: #f0f1f5;
    padding: 6px 14px; border-radius: 20px; text-decoration: none;
}
.admin-asset-page .admin-asset-pills .pill:hover { background: #e3e6ee; color: #2d3250; text-decoration: none; }
.admin-asset-page .admin-asset-pills .pill.active { background: #337ab7; color: #fff; }

/* KPI tiles */
.admin-asset-page .admin-asset-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.admin-asset-page .admin-kpi-tile {
    flex: 0 1 160px; min-width: 120px;
    background: #f7f9fa; border: 1px solid #ebedf2; border-radius: 8px; padding: 12px 14px;
}
.admin-asset-page .admin-kpi-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    color: #8a8fa8; letter-spacing: 0.4px; margin-bottom: 4px;
}
.admin-asset-page .admin-kpi-value { font-size: 22px; font-weight: 700; color: #1a1a2e; line-height: 1.1; }
.admin-asset-page .admin-kpi-sub { font-size: 11px; color: #8a8fa8; margin-top: 2px; }

/* Charts */
.admin-asset-page .admin-asset-charts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.admin-asset-page .admin-asset-chart {
    background: #fff; border: 1px solid #dfe1e8; border-radius: 8px; padding: 14px;
}
.admin-asset-page .admin-chart-title { font-size: 13px; font-weight: 600; color: #1a1a2e; margin-bottom: 8px; }
.admin-asset-page .admin-chart-empty,
.admin-asset-page .admin-chart-error { font-size: 12px; color: #8a8fa8; text-align: center; padding: 40px 12px; }
.admin-asset-page .admin-chart-error { color: #c62828; }

/* ----- Drilldown modal -----
   Replaces the legacy /admin/asset full-page nav. Backdrop covers
   the viewport (z 9999 to clear admin tab chrome / header bars);
   the window is centered, scrollable, and reuses the AdminAsset
   markup verbatim inside .admin-users-drilldown-body. */
.admin-users-drilldown-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.admin-users-drilldown-window {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    width: 100%; max-width: 1100px;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.admin-users-drilldown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #ebedf2;
}
.admin-users-drilldown-header h3 { margin: 0; font-size: 16px; color: #1a1a2e; }
.admin-users-drilldown-sep { color: #8a8fa8; margin: 0 6px; }
.admin-users-drilldown-close {
    background: none; border: none; font-size: 22px; line-height: 1;
    color: #8a8fa8; cursor: pointer; padding: 0 4px;
}
.admin-users-drilldown-close:hover { color: #1a1a2e; }
.admin-users-drilldown-body {
    padding: 16px 20px; overflow-y: auto; flex: 1;
}
.admin-users-drilldown-loading,
.admin-users-drilldown-error {
    text-align: center;
    padding: 40px 12px;
    font-size: 13px;
    color: #8a8fa8;
}
.admin-users-drilldown-error { color: #c62828; }

/* Inside the modal, the asset breadcrumb's "← Users" link is
   redundant (modal IS over the listing) -- hide it. */
.admin-users-drilldown-body .admin-asset-breadcrumb a[href="#users"] { display: none; }

/* Count-cell + chip buttons -- replace the old <a> styling with
   button-shaped affordances that look like links in the table and
   pills in the grid. Native <button> defaults are stripped. */
.admin-users-page .admin-users-count-cell,
.admin-users-page .admin-users-name-cell {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #337ab7;
    font: inherit;
}
.admin-users-page .admin-users-name-cell { font-weight: 600; }
.admin-users-page .admin-users-count-cell:hover,
.admin-users-page .admin-users-name-cell:hover { text-decoration: underline; }
.admin-users-page .admin-users-count-zero { color: #8a8fa8; }

/* Grid chip buttons: keep the existing pill look (color/bg/radius
   already cover .chip / .admin-user-name) but strip native button
   chrome so they don't render as 3D OS buttons. */
.admin-users-page button.chip,
.admin-users-page button.admin-user-name {
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.admin-users-page button.chip { line-height: 1.3; }

/* Signed-in state on the Users cards -- the card header turns green when the
   user currently holds a live browser session (drives the impersonation
   logout warning too). Palette per the frontend style guide. The ancestor
   chain mirrors the base `.admin-users-tab .admin-users-index .user-list
   .panel-heading` rule so this wins on specificity rather than !important. */
.admin-users-tab .admin-users-index .user-list .panel-heading.user-card-signedin {
    background: #d4edda;
    color: #155724;
    border-color: #b7dfc2;
}
.admin-users-tab .admin-users-index .user-list .panel-heading.user-card-signedin .panel-title {
    color: #155724;
}

/* User card body -- replaces the Bootstrap .row/.col-xs grid (whose negative
   margins left a dead gap at the card's top-left and forced an always-on
   scrollbar) with a clean label/value flex list. Consistent key styling;
   empty values render an em dash instead of a confusing blank. */
/* Override the 2-column `.panel > .panel-body` grid for the user cards --
   the `.panel >` prefix beats that base rule's specificity so these rows
   stack in a single clean column instead of flowing into two. */
.admin-users-tab .admin-users-index .user-list .panel > .panel-body.admin-user-card-meta {
    display: block;
    height: 148px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
}
.admin-user-card-meta .admin-user-card-meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.35;
}
.admin-user-card-meta .admin-user-card-meta-row .k {
    flex: 0 0 38%;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.admin-user-card-meta .admin-user-card-meta-row .v {
    flex: 1 1 62%;
    min-width: 0;
    color: #333;
    font-size: 12px;
    word-break: break-word;
}
.admin-user-card-meta .admin-user-card-meta-row .v:empty::after {
    content: "\2014";
    color: #bbb;
}

/* /stylesheets/admin_cronjobs.css */
/* ==========================================================================
   Admin > Cronjobs — list table, status pills, add/edit modal
   Scoped under .admin-cronjobs-page and .admin-cronjobs-modal-backdrop only.
   Palette borrowed from admin.css (#337ab7 brand, #1a1a2e text, #8a8fa8 muted).
   ========================================================================== */

/* Page container */
.admin-cronjobs-page { padding: 18px 20px; color: #1a1a2e; }

/* Toolbar — title flex-grows left, "+ Add cronjob" pinned right */
.admin-cronjobs-page .admin-cronjobs-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-cronjobs-page .admin-cronjobs-title { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 600; color: #1a1a2e; }

/* Table */
.admin-cronjobs-page .admin-cronjobs-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13px; background: #fff;
    border: 1px solid #dfe1e8; border-radius: 8px; overflow: hidden;
}
.admin-cronjobs-page .admin-cronjobs-table thead th {
    background: #fafbfc; border-bottom: 1px solid #ebedf2;
    color: #5a5f7a; font-weight: 600; font-size: 12px;
    padding: 10px 12px; text-align: left; white-space: nowrap;
}
.admin-cronjobs-page .admin-cronjobs-table tbody td {
    padding: 9px 12px; border-bottom: 1px solid #f4f5f7;
    color: #2d3250; vertical-align: middle;
}
.admin-cronjobs-page .admin-cronjobs-table tbody tr:nth-child(even) td { background: #fafbfc; }
.admin-cronjobs-page .admin-cronjobs-table tbody tr:hover td { background: #f0f4fa; }
.admin-cronjobs-page .admin-cronjobs-table tbody tr:last-child td { border-bottom: none; }
.admin-cronjobs-page .admin-cronjobs-table td.empty { text-align: center; color: #8a8fa8; font-style: italic; padding: 28px 14px; }
.admin-cronjobs-page .admin-cronjobs-table td.admin-cronjob-actions { white-space: nowrap; text-align: right; }
.admin-cronjobs-page .admin-cronjobs-table td code { font-size: 12px; color: #2d3250; background: #f4f5f7; padding: 2px 6px; border-radius: 3px; }

/* Endpoint cell — bold label + small muted url */
.admin-cronjobs-page .admin-cronjob-endpoint { font-weight: 600; color: #1a1a2e; }
.admin-cronjobs-page .admin-cronjob-url { font-family: Menlo, Consolas, monospace; font-size: 11px; color: #8a8fa8; margin-top: 2px; word-break: break-all; }

/* Description under name */
.admin-cronjobs-page .admin-cronjob-desc { font-size: 11px; color: #8a8fa8; line-height: 1.3; margin-top: 2px; }

/* Status pills */
.admin-cronjobs-page .admin-cronjob-status {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 12px; text-transform: capitalize;
    color: #5a5f7a; background: #f0f1f5;
}
.admin-cronjobs-page .admin-cronjob-status-success { color: #1f7a3a; background: #e6f4ea; }
.admin-cronjobs-page .admin-cronjob-status-failure { color: #b3261e; background: #fdeceb; }
.admin-cronjobs-page .admin-cronjob-status-running {
    color: #8a5a00; background: #fff4d6;
    animation: admin-cronjobs-pulse 1.6s ease-in-out infinite;
}

@keyframes admin-cronjobs-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Modal — backdrop + window
   Note: the modal mount lives inside .admin-cronjobs-page in the page shell,
   but the backdrop class itself is the unambiguous outer scope so we anchor
   modal rules there for safety. */
.admin-cronjobs-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.admin-cronjobs-modal-backdrop .admin-cronjobs-modal-window {
    background: #fff; border-radius: 6px; padding: 24px;
    width: 520px; max-width: 90vw;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    color: #1a1a2e;
}
.admin-cronjobs-modal-backdrop .admin-cronjobs-modal-header { margin-bottom: 14px; border-bottom: 1px solid #ebedf2; padding-bottom: 10px; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #1a1a2e; }

/* Form */
.admin-cronjobs-modal-backdrop .admin-cronjobs-form .form-group { margin-bottom: 14px; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-form label { display: block; font-weight: 500; font-size: 13px; color: #2d3250; margin-bottom: 4px; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-form .form-control { width: 100%; box-sizing: border-box; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-form .endpoint-description { display: block; margin-top: 4px; font-size: 11px; color: #8a8fa8; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-advanced-toggle { margin-top: 6px; font-size: 12px; color: #5a5f7a; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-advanced-toggle label { display: inline; font-weight: 400; }
.admin-cronjobs-modal-backdrop .admin-cronjobs-preview { margin-top: 6px; font-size: 11px; font-style: italic; color: #8a8fa8; }

/* Modal footer — buttons right-aligned */
.admin-cronjobs-modal-backdrop .admin-cronjobs-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #ebedf2;
}

/* Form error */
.admin-cronjobs-modal-backdrop .admin-cronjobs-form-error {
    margin-top: 12px; padding: 8px 12px; border-radius: 4px;
    background: #fdeceb; color: #b3261e; font-size: 12px;
    border: 1px solid #f5c2c0;
}

/* Sync panel — sits above the cronjobs table; shows mode toggle,
   crontab health pill, push/pull/refresh actions, and (in 1:1 mode)
   the drift table. Visual style mirrors the segmented-pill toggle
   pattern from frontend-style.md. */
.admin-cronjobs-sync                       { margin: 0 0 18px 0; padding: 14px 16px; background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 8px; }
.admin-cronjobs-sync-row                   { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.admin-cronjobs-sync-mode                  { display: flex; align-items: center; gap: 10px; }
.admin-cronjobs-sync-label                 { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.3px; margin: 0; }
.admin-cronjobs-sync-toggle                { display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
.admin-cronjobs-sync-tab                   { border: none; background: transparent; color: #888; padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.admin-cronjobs-sync-tab:hover             { color: #555; background: #e8e8e8; }
.admin-cronjobs-sync-tab.is-active         { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.admin-cronjobs-sync-health                { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-cronjobs-sync-pill                  { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.admin-cronjobs-sync-pill.is-ok            { background: #d4edda; color: #155724; }
.admin-cronjobs-sync-pill.is-warn          { background: #fef3cd; color: #856404; }
.admin-cronjobs-sync-pill.is-info          { background: #d1ecf1; color: #0c5460; }

.admin-cronjobs-sync-actions               { margin-left: auto; display: flex; gap: 6px; }

.admin-cronjobs-sync-line                  { margin-top: 12px; padding: 8px 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 11px; color: #4b5563; }
.admin-cronjobs-sync-line-label            { font-weight: 600; color: #6b7280; margin-right: 6px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px; }
.admin-cronjobs-sync-line code             { font-size: 11px; }

.admin-cronjobs-sync-drift                 { margin-top: 12px; }
.admin-cronjobs-sync-drift-empty           { padding: 12px; font-size: 12px; color: #6b7280; text-align: center; font-style: italic; }
.admin-cronjobs-sync-drift-clean           { padding: 12px; font-size: 12px; color: #155724; text-align: center; }
.admin-cronjobs-sync-drift-clean i         { margin-right: 6px; }
.admin-cronjobs-sync-drift-table           { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-cronjobs-sync-drift-table th        { text-align: left; padding: 6px 8px; background: #f3f4f6; color: #555; border-bottom: 1px solid #e5e7eb; font-weight: 600; }
.admin-cronjobs-sync-drift-table td        { padding: 6px 8px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.admin-cronjobs-sync-drift-table code      { background: #f8f9fa; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.admin-cronjobs-sync-drift-table .muted    { color: #9ca3af; font-style: italic; }
.admin-cronjobs-sync-drift-row.admin-cronjobs-sync-drift-expr-mismatch        td:nth-child(4) { background: #fff3cd; }
.admin-cronjobs-sync-drift-row.admin-cronjobs-sync-drift-missing-from-cron    td:nth-child(4) { background: #f8d7da; }
.admin-cronjobs-sync-drift-row.admin-cronjobs-sync-drift-orphan-in-cron       { background: #fef3cd; }
.admin-cronjobs-sync-drift-row.admin-cronjobs-sync-drift-in-cron-but-disabled { background: #f0f4f8; color: #6b7280; }

/* Status cell — now a clickable button. Reuses the existing colour
   palette via the `.admin-cronjob-status-{success|failure|running}`
   classes, but adds a button-like affordance + the http_code chip. */
.admin-cronjob-status-btn                          { background: transparent; border: 1px solid transparent; cursor: pointer; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; transition: border-color 0.15s ease, transform 0.05s ease; display: inline-flex; align-items: center; gap: 6px; }
.admin-cronjob-status-btn:hover                    { border-color: rgba(0,0,0,0.15); }
.admin-cronjob-status-btn:active                   { transform: translateY(1px); }
.admin-cronjob-status-code                         { display: inline-block; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,0.08); font-family: monospace; font-size: 10px; }

/* Output viewer modal — wider than the edit modal so a multi-KB body
   stays readable. Content is rendered inside a <pre> so JSON, stack
   traces, etc. preserve their formatting. */
.admin-cronjobs-output-window                      { width: 720px; max-width: 92vw; }
.admin-cronjobs-output-meta                        { padding: 10px 18px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 11px; color: #4b5563; }
.admin-cronjobs-output-meta-pill                   { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-cronjobs-output-meta-success                { background: #d4edda; color: #155724; }
.admin-cronjobs-output-meta-failure                { background: #f8d7da; color: #721c24; }
.admin-cronjobs-output-meta-running                { background: #d1ecf1; color: #0c5460; }
.admin-cronjobs-output-meta-unknown                { background: #f3f4f6; color: #6b7280; }
.admin-cronjobs-output-meta-item                   { font-family: monospace; }
.admin-cronjobs-output-body                        { margin: 0; padding: 14px 18px; max-height: 50vh; overflow: auto; background: #ffffff; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.5; color: #111827; white-space: pre-wrap; word-break: break-word; }

/* /stylesheets/admin_product_maps.css */
/* Admin > Product Maps */
.admin-product-maps { padding: 18px 22px; color: #1a1a2e; }
.admin-product-maps .admin-pm-h { margin-bottom: 14px; }
.admin-product-maps .admin-pm-h h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #1f3a5f; }
.admin-product-maps .admin-pm-h h3 i { color: #2c5282; margin-right: 6px; }
.admin-product-maps .admin-pm-sub { font-size: 12px; color: #555; line-height: 1.5; margin: 0; max-width: 880px; }
.admin-product-maps .admin-pm-sub code { background: #eef2f6; padding: 1px 5px; border-radius: 3px; font-size: 11px; }

.admin-product-maps .admin-pm-toolbar { display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; }
.admin-product-maps .apm-filter-input { flex: 1 1 0; max-width: 420px; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px; }
.admin-product-maps .apm-stats { font-size: 12px; color: #888; }

.admin-product-maps .admin-pm-body { display: flex; flex-direction: column; gap: 10px; }
.admin-product-maps .apm-loading,
.admin-product-maps .apm-empty,
.admin-product-maps .apm-err { padding: 30px; text-align: center; color: #888; font-size: 13px; background: #f8f9fa; border-radius: 8px; }
.admin-product-maps .apm-err { color: #721c24; background: #f8d7da; }

.admin-product-maps .apm-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.admin-product-maps .apm-card.is-open { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.admin-product-maps .apm-card-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; }
.admin-product-maps .apm-card-h:hover { background: #f7f9fc; }
.admin-product-maps .apm-industry-chip { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; background: #e0ecf8; color: #2c5282; }
.admin-product-maps .apm-industry-automotive { background: #e0ecf8; color: #2c5282; }
.admin-product-maps .apm-industry-aerospace  { background: #d1ecf1; color: #0c5460; }
.admin-product-maps .apm-industry-biomechanical { background: #fce7f3; color: #be185d; }
.admin-product-maps .apm-industry-civil_structures { background: #fff3cd; color: #856404; }
.admin-product-maps .apm-industry-marine { background: #cffafe; color: #0e7490; }
.admin-product-maps .apm-industry-electronics_battery { background: #e8daef; color: #6c3483; }
.admin-product-maps .apm-card-label { flex: 1 1 0; font-size: 13px; font-weight: 600; color: #333; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-product-maps .apm-card-version { font-size: 11px; color: #999; }
.admin-product-maps .apm-card-meta { font-size: 11px; color: #888; }
.admin-product-maps .apm-btn { border: 1px solid #e0e0e0; background: #fff; color: #555; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.admin-product-maps .apm-btn:hover { background: #f0f0f0; color: #2c5282; }
.admin-product-maps .apm-card-desc { padding: 0 14px 10px 14px; font-size: 12px; color: #555; margin: 0; }
.admin-product-maps .apm-card-detail { border-top: 1px solid #eef2f6; padding: 14px; background: #fafbfc; }

.admin-product-maps .apm-section { margin-bottom: 14px; }
.admin-product-maps .apm-section h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #555; margin: 0 0 6px; }
.admin-product-maps .apm-hint-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-product-maps .apm-hint { background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; padding: 2px 6px; font-size: 11px; color: #555; }

.admin-product-maps .apm-group { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.admin-product-maps .apm-group-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-product-maps .apm-group-id { background: #e0ecf8; color: #2c5282; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.admin-product-maps .apm-group-lbl { font-size: 13px; font-weight: 600; color: #333; }
.admin-product-maps .apm-group-rat { flex: 1 1 0; font-size: 11px; color: #888; font-style: italic; }
.admin-product-maps .apm-mem-tbl { width: 100%; font-size: 12px; border-collapse: collapse; }
.admin-product-maps .apm-mem-tbl th, .admin-product-maps .apm-mem-tbl td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.admin-product-maps .apm-mem-tbl th { background: #f8f9fa; color: #555; font-weight: 600; }
.admin-product-maps .apm-aliases { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-product-maps .apm-alias { background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; padding: 1px 6px; font-size: 11px; color: #666; }

/* Toolbar actions + source chip + row buttons */
.admin-product-maps .apm-toolbar-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.admin-product-maps .apm-btn-primary { background: #2c5282; color: #fff; border-color: #2c5282; }
.admin-product-maps .apm-btn-primary:hover { background: #1f3a5f; color: #fff; }
.admin-product-maps .apm-btn-icon { padding: 4px 7px; }
.admin-product-maps .apm-btn-danger { color: #c0392b; }
.admin-product-maps .apm-btn-danger:hover { background: #f8d7da; color: #721c24; }
.admin-product-maps .apm-card-src { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.admin-product-maps .apm-src-file { background: #f0f0f0; color: #555; }
.admin-product-maps .apm-src-db   { background: #d4edda; color: #155724; }

/* Drawer — mounted on <body>, so these rules must NOT be prefixed with .admin-product-maps */
.apm-drawer-bd { position: fixed; inset: 0; background: rgba(20,30,50,0.5); z-index: 9999; display: flex; align-items: stretch; justify-content: flex-end; }
.apm-drawer    { background: #fff; width: 720px; max-width: 90vw; display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0,0,0,0.15); }
.apm-drawer-h  { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid #e0e0e0; background: #f8f9fa; }
.apm-drawer-h h3 { flex: 0 0 auto; margin: 0; font-size: 16px; color: #1f3a5f; }
.apm-drawer-h .spacer { flex: 1 1 0; }
.apm-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

/* Drawer-internal form rules — also un-prefixed because the drawer mounts on <body> */
.apm-drawer .apm-form-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.apm-drawer .apm-form-row label { flex: 0 0 130px; font-size: 12px; font-weight: 600; color: #555; padding-top: 6px; }
.apm-drawer .apm-form-row input[type="text"], .apm-drawer .apm-form-row textarea { flex: 1 1 0; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; }
.apm-drawer .apm-form-row textarea { font-family: inherit; resize: vertical; min-height: 120px; box-sizing: border-box; line-height: 1.4; }
.apm-drawer .apm-form-row-full { flex-direction: column; align-items: stretch; }
.apm-drawer .apm-form-row-full label { flex: 0 0 auto; padding: 0 0 6px; }
.apm-drawer .apm-required { color: #c0392b; }
.apm-drawer .apm-btn-small { font-size: 11px; padding: 2px 7px; margin-left: 6px; }
.apm-drawer .apm-x { background: transparent; border: none; color: #999; cursor: pointer; padding: 2px 6px; font-size: 16px; line-height: 1; }
.apm-drawer .apm-x:hover { color: #c0392b; }

.apm-drawer .apm-hint-list { display: flex; flex-wrap: wrap; gap: 4px; }
.apm-drawer .apm-hint-item { display: inline-flex; align-items: center; background: #f0f0f0; border-radius: 3px; padding: 1px 2px 1px 6px; }
.apm-drawer .apm-hint-item input { border: none; background: transparent; font-size: 12px; padding: 2px 4px; width: 120px; }

.apm-drawer .apm-form-groups { display: flex; flex-direction: column; gap: 14px; }
.apm-drawer .apm-form-group { background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 6px; padding: 10px 12px; }
.apm-drawer .apm-form-group-h { display: flex; gap: 6px; margin-bottom: 8px; }
.apm-drawer .apm-fg-id  { flex: 0 0 140px; }
.apm-drawer .apm-fg-lbl { flex: 0 0 180px; }
.apm-drawer .apm-fg-rat { flex: 1 1 0; }

.apm-drawer .apm-form-members { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.apm-drawer .apm-form-member  { display: flex; gap: 6px; align-items: center; }
.apm-drawer .apm-fm-lbl  { flex: 0 0 160px; padding: 4px 7px; font-size: 12px; }
.apm-drawer .apm-fm-side { flex: 0 0 110px; padding: 4px 7px; font-size: 12px; }
.apm-drawer .apm-fm-al   { flex: 1 1 0;     padding: 4px 7px; font-size: 12px; }
.apm-drawer .apm-form-member input { border: 1px solid #e0e0e0; border-radius: 4px; }

/* /stylesheets/admin_fx_rates.css */
.admin-fx-rates { font-size: 13px; color: #555; }
.admin-fx-rates h3 { margin: 0 0 14px 0; font-size: 16px; font-weight: 600; color: #333; }
.admin-fx-rates .fx-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px 0; border-bottom: 1px solid #e0e0e0; margin-bottom: 14px; }
.admin-fx-rates .fx-toolbar .spacer { flex: 1; }
.admin-fx-rates table.fx-table { width: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; border-collapse: collapse; }
.admin-fx-rates table.fx-table th { background: #f6f7f9; padding: 8px 12px; text-align: left; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; border-bottom: 1px solid #e0e0e0; }
.admin-fx-rates table.fx-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #222; }
.admin-fx-rates table.fx-table td input[type="text"], .admin-fx-rates table.fx-table td input[type="number"], .admin-fx-rates table.fx-table td input[type="date"] { font-size: 12px; padding: 3px 6px; border: 1px solid #d0d0d0; border-radius: 3px; width: 100%; box-sizing: border-box; }
.admin-fx-rates .fx-btn { padding: 5px 12px; font-size: 11px; border-radius: 4px; border: 1px solid #d0d0d0; background: #fff; cursor: pointer; }
.admin-fx-rates .fx-btn-primary { background: #2c5282; color: #fff; border-color: #2c5282; font-weight: 600; }
.admin-fx-rates .fx-btn-danger { color: #c0392b; }
.admin-fx-rates .fx-empty { padding: 24px; text-align: center; color: #888; font-style: italic; }
.admin-fx-rates .fx-banner { padding: 10px 14px; background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; border-radius: 4px; margin-bottom: 14px; font-size: 12px; }

/* /stylesheets/admin_hpc_governance.css */
.hpc-panel-root {
    min-height: 560px;
    color: #555;
}

.hpc-panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 12px 0;
    border-bottom: 1px solid #e2e8ee;
    background: #fff;
}

.hpc-panel-title {
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.hpc-panel-title .fa {
    color: #2c5282;
    margin-right: 6px;
}

.hpc-panel-subtitle {
    margin-top: 3px;
    padding-bottom: 10px;
    color: #8a98a8;
    font-size: 12px;
}

.hpc-panel-tabs {
    border-bottom: 0;
    flex: 0 0 auto;
}

.hpc-panel-tabs > li > a {
    padding: 7px 14px;
    color: #5a6b7b;
    font-size: 13px;
}

.hpc-panel-tabs > li.active > a {
    color: #2c5282;
    font-weight: 600;
}

.hpc-panel-body {
    padding: 12px;
}

.hpc-panel-pane.hidden {
    display: none;
}

.hpc-panel-pane[data-hpc-panel-pane="servers"] #admin-hpcserver {
    min-height: 440px;
}

.hpc-panel-root #admin-hpcserver .pageTabsContainer > #tabsList {
    display: none;
}

.hpc-costmgmt-root {
    min-height: 480px;
}

.hpc-costmgmt-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 4px 12px;
}

.hpc-costmgmt-heading {
    min-width: 0;
}

.hpc-costmgmt-title {
    color: #2c3e50;
    font-size: 15px;
    font-weight: 600;
}

.hpc-costmgmt-title .fa {
    color: #2c5282;
    margin-right: 5px;
}

.hpc-costmgmt-description {
    margin-top: 3px;
    color: #8a98a8;
    font-size: 12px;
}

.hpc-costmgmt-server-label {
    min-width: 280px;
    margin: 0;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hpc-costmgmt-server-label .form-control {
    margin-top: 3px;
    width: 100%;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.hpc-costmgmt-estimate-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 12px;
    padding: 9px 12px;
    border: 1px solid #ffe0a3;
    border-radius: 8px;
    background: #fff7e6;
    color: #856404;
    font-size: 12px;
    line-height: 1.45;
}

.hpc-costmgmt-estimate-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fef3cd;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.hpc-costmgmt-tabs {
    margin: 0 4px 12px;
}

.hpc-costmgmt-tabs > li > a {
    padding: 6px 12px;
    color: #5a6b7b;
    font-size: 13px;
}

.hpc-costmgmt-tabs > li.active > a {
    color: #2c5282;
    font-weight: 600;
}

.hpc-costmgmt-body {
    min-height: 360px;
    padding: 0 4px 12px;
}

.hpc-costmgmt-empty {
    padding: 60px 20px;
    color: #9aa7b4;
    text-align: center;
}

.hpc-costmgmt-empty .fa {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
    opacity: .55;
}

.v2-tab-cost .v2-cost-filterbar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #f8fafc;
}

.v2-tab-cost .v2-cost-filter-heading {
    min-width: 210px;
    margin-right: auto;
}

.v2-tab-cost .v2-cost-filter-heading h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-filter-heading h3 .fa {
    margin-right: 5px;
    color: #2c5282;
}

.v2-tab-cost .v2-cost-filter-heading span {
    display: block;
    margin-top: 3px;
    color: #8a98a8;
    font-size: 11px;
}

.v2-tab-cost .v2-cost-filterbar > label {
    margin: 0;
    color: #697b8d;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.v2-tab-cost .v2-cost-filterbar > label .form-control {
    min-width: 125px;
    margin-top: 3px;
    color: #333;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.v2-tab-cost .v2-cost-metric-toggle {
    display: inline-flex;
    padding: 2px;
    border-radius: 6px;
    background: #e8edf3;
}

.v2-tab-cost .v2-cost-view-toggle {
    padding: 5px 9px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #718096;
    font-size: 11px;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-view-toggle.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(44, 82, 130, .18);
}

.v2-tab-cost .v2-cost-loading {
    min-width: 58px;
    color: #8a98a8;
    font-size: 10px;
}

.v2-tab-cost .v2-cost-validation .alert {
    margin: 10px 0 0;
    padding: 7px 10px;
    font-size: 11px;
}

.v2-tab-cost .v2-cost-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.v2-tab-cost .v2-cost-kpi {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e0e6ed;
    border-radius: 7px;
    background: #fff;
}

.v2-tab-cost .v2-cost-kpi-label {
    color: #8795a5;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.v2-tab-cost .v2-cost-kpi-value {
    overflow: hidden;
    margin-top: 4px;
    color: #233142;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-tab-cost .v2-cost-kpi-sub {
    min-height: 14px;
    margin-top: 3px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-tab-cost .v2-cost-coverage {
    margin: -4px 0 12px;
    padding: 7px 10px;
    border: 1px solid #ffe0a3;
    border-radius: 6px;
    background: #fff8e5;
    color: #856404;
    font-size: 10px;
}

.v2-tab-cost .v2-cost-chart-card {
    padding: 15px 16px 12px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35, 49, 66, .04);
}

.v2-tab-cost .v2-cost-chart-heading h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 12px;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-chart-heading span {
    display: block;
    margin-top: 3px;
    color: #8a98a8;
    font-size: 10px;
}

.v2-tab-cost .v2-cost-chart-host {
    min-height: 310px;
    margin-top: 8px;
}

.v2-tab-cost .v2-cost-chart-svg {
    display: block;
    overflow: visible;
}

.v2-tab-cost .v2-cost-x-label,
.v2-tab-cost .v2-cost-y-label {
    fill: #788898;
    font-size: 9px;
}

.v2-tab-cost .v2-cost-axis-line {
    stroke: #cbd5df;
}

.v2-tab-cost .v2-cost-gridline {
    stroke: #edf1f5;
}

.v2-tab-cost .v2-cost-bar-segment {
    cursor: pointer;
    opacity: .92;
    transition: opacity .12s ease, filter .12s ease;
}

.v2-tab-cost .v2-cost-bar-segment:hover,
.v2-tab-cost .v2-cost-bar-segment.is-highlighted {
    filter: brightness(1.08);
    opacity: 1;
}

.v2-tab-cost .v2-cost-bar-segment.is-muted,
.v2-tab-cost .v2-cost-legend-item.is-muted {
    opacity: .16;
}

.v2-tab-cost .v2-cost-no-data {
    fill: #9aa7b4;
    font-size: 11px;
}

.v2-tab-cost .v2-cost-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    padding-top: 8px;
    border-top: 1px solid #eef2f6;
}

.v2-tab-cost .v2-cost-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #5f6f7f;
    font-size: 9px;
    transition: opacity .12s ease, background .12s ease;
}

.v2-tab-cost .v2-cost-legend-item:hover,
.v2-tab-cost .v2-cost-legend-item:focus,
.v2-tab-cost .v2-cost-legend-item.is-highlighted {
    background: #f0f4f8;
    color: #2c3e50;
}

.v2-tab-cost .v2-cost-legend-item:focus {
    outline: 2px solid rgba(44, 82, 130, .55);
    outline-offset: 1px;
}

.v2-tab-cost .v2-cost-legend-swatch {
    display: block;
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(44, 62, 80, .18);
    border-radius: 2px;
}

.v2-tab-cost .v2-cost-user-card {
    margin-top: 12px;
    padding: 15px 16px 10px;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(35, 49, 66, .04);
}

.v2-tab-cost .v2-cost-user-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.v2-tab-cost .v2-cost-user-heading h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 12px;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-user-heading span {
    display: block;
    margin-top: 3px;
    color: #8a98a8;
    font-size: 10px;
}

.v2-tab-cost .v2-cost-user-table-scroll {
    overflow-x: auto;
}

.v2-tab-cost .v2-cost-user-table {
    min-width: 880px;
    margin-bottom: 0;
    font-size: 11px;
}

.v2-tab-cost .v2-cost-user-table thead th {
    padding: 7px 8px;
    border-bottom: 2px solid #e2e8ee;
    color: #8795a5;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v2-tab-cost .v2-cost-user-table tbody td {
    padding: 8px;
    border-top-color: #eef2f6;
    color: #4f6071;
    vertical-align: middle;
    white-space: nowrap;
}

.v2-tab-cost .v2-cost-user-table .v2-cost-number {
    text-align: right;
}

.v2-tab-cost .v2-cost-user-color-col {
    width: 26px;
    min-width: 26px;
    padding-right: 3px !important;
    padding-left: 5px !important;
    text-align: center;
}

.v2-tab-cost .v2-cost-user-swatch {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(44, 62, 80, .18);
    border-radius: 2px;
    vertical-align: middle;
}

.v2-tab-cost .v2-cost-user-name {
    color: #2c3e50 !important;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-user-primary {
    color: #233142 !important;
    font-weight: 700;
}

.v2-tab-cost .v2-cost-user-coverage strong {
    display: block;
    color: #4f6071;
    font-size: 11px;
    font-weight: 600;
}

.v2-tab-cost .v2-cost-user-coverage span {
    display: block;
    margin-top: 1px;
    color: #8a98a8;
    font-size: 9px;
}

.v2-tab-cost .v2-cost-user-row {
    transition: opacity .14s ease, background-color .14s ease;
}

.v2-tab-cost .v2-cost-user-row.is-muted {
    opacity: .38;
}

.v2-tab-cost .v2-cost-user-row.is-highlighted td {
    background: #f3f7fb;
}

.v2-tab-cost .v2-cost-user-table tfoot th,
.v2-tab-cost .v2-cost-user-table tfoot td {
    padding: 8px;
    border-top: 2px solid #dfe6ee;
    background: #f8fafc;
    color: #2c3e50;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.v2-tab-cost .v2-cost-user-empty {
    padding: 24px 10px;
    color: #9aa7b4;
    font-size: 11px;
    text-align: center;
}

.v2-tab-cost .v2-cost-user-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 9px;
    color: #7b8998;
    font-size: 10px;
}

.v2-tab-cost .v2-cost-user-pagination > div {
    display: flex;
    gap: 5px;
}

.v2-tab-cost .v2-cost-empty {
    padding: 90px 20px;
    color: #9aa7b4;
    text-align: center;
}

@media (max-width: 900px) {
    .hpc-panel-header,
    .hpc-costmgmt-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .hpc-panel-tabs {
        align-self: stretch;
    }

    .hpc-costmgmt-server-label {
        min-width: 0;
        width: 100%;
    }

    .hpc-costmgmt-estimate-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .v2-tab-cost .v2-cost-filterbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .v2-tab-cost .v2-cost-filter-heading {
        flex: 1 0 100%;
        min-width: 0;
    }

    .v2-tab-cost .v2-cost-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* /stylesheets/cart.css */
/* d3VIEW global cart — header icon + slide-in drawer.
   Visual style follows the d3VIEW frontend-style.md conventions:
   8px outer radius, 6px inner, neutral greys, accent #2c5282. */

/* === Header icon ===================================================== */

.d3view-cart-icon                      { position: relative; background: transparent; border: none; padding: 0; cursor: pointer; color: inherit; display: inline-flex; align-items: center; transition: transform 0.2s ease; }
.d3view-cart-icon .header-icon         { font-size: 16px; color: #ffffff; }
.d3view-cart-icon:hover .header-icon   { color: #ffffff; opacity: 0.85; }

/* === Header badge unification ============================================
   Notification + Sharings counts get the same corner-pill treatment as
   the basket badge so the three sit in the header as a consistent set.
   The badges are anchored to a tight `.header-icon-wrap` span around
   just the icon — anchoring to the parent <a> doesn't work because the
   anchor extends past the icon to include the chevron / dropdown arrow,
   which sends the badge flying to the right edge of the anchor.
   Position uses translate(50%,-50%) anchored at top:0 right:0 so the
   badge centers on the icon's top-right corner regardless of glyph
   width (fa-bell is wider than fa-share-alt, fixed-pixel offsets don't
   land in the same spot). */
#header .header-icon-wrap      { position: relative; display: inline-block; line-height: 1; }
.unread_notifications_badge,
.sharings_count_badge          { position: absolute !important; top: 0 !important; right: -4px !important; transform: translate(45%, -45%); background: #d46b08 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 700 !important; min-width: 16px; height: 16px; padding: 0 5px !important; border-radius: 999px !important; line-height: 16px !important; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.2); margin: 0 !important; box-sizing: border-box; pointer-events: none; }
.unread_notifications_badge.unread_exists { background: #cc0000 !important; }
.unread_notifications_badge .fa,
.sharings_count_badge .fa      { font-size: 8px !important; }

/* Spread the four right-hand header icons (notifications / share /
   basket / recycle) evenly with consistent margins on both sides so
   the badges have breathing room and the icon row reads cleanly. The
   dropdown items (Docs, user, app) are intentionally not touched. */
#header .navbar-right > li > #my_notifications,
#header .navbar-right > li > #my_sharings,
#header .navbar-right > li > #my_recycled,
#header #cart-icon-mount       { margin: 0 12px !important; padding-left: 10px !important; padding-right: 10px !important; }
.d3view-cart-icon.is-bouncing          { animation: d3view-cart-bounce 0.6s ease; }
@keyframes d3view-cart-bounce {
    0%   { transform: translateY(0)    scale(1); }
    25%  { transform: translateY(-6px) scale(1.15); }
    50%  { transform: translateY(0)    scale(0.95); }
    70%  { transform: translateY(-3px) scale(1.07); }
    100% { transform: translateY(0)    scale(1); }
}
.d3view-cart-badge                     { position: absolute; top: -6px; right: -10px; background: #d46b08; color: #ffffff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; line-height: 16px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* The count itself is the confirmation that something landed: it flashes
   yellow and settles back to its own orange. The text goes dark for the
   yellow part of the sweep, since white on yellow is unreadable. */
.d3view-cart-badge.is-flashing         { animation: d3view-cart-badge-flash 0.8s ease-out; }
@keyframes d3view-cart-badge-flash {
    0%   { background: #fadb14; color: #856404; transform: scale(1.25); }
    35%  { background: #fadb14; color: #856404; transform: scale(1.15); }
    100% { background: #d46b08; color: #ffffff; transform: scale(1); }
}

/* === Drawer ========================================================== */

.d3view-cart-root                      { position: fixed; inset: 0; pointer-events: none; z-index: 1051; }
.d3view-cart-scrim                     { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; }
.d3view-cart-shell                     { position: absolute; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw; background: #ffffff; box-shadow: -4px 0 18px rgba(15,23,42,0.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s ease; pointer-events: auto; }
.d3view-cart-root.is-open              { pointer-events: auto; }
.d3view-cart-root.is-open .d3view-cart-scrim { opacity: 1; pointer-events: auto; }
.d3view-cart-root.is-open .d3view-cart-shell { transform: translateX(0); }

.d3view-cart-head                      { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px 18px; border-bottom: 1px solid #e5e7eb; }
.d3view-cart-title                     { font-size: 15px; font-weight: 600; color: #111827; }
.d3view-cart-title i                   { margin-right: 8px; color: #2c5282; }
.d3view-cart-close                     { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.d3view-cart-close:hover               { color: #111827; }

.d3view-cart-body                      { flex: 1 1 auto; overflow: auto; padding: 6px 0; }
.d3view-cart-empty                     { padding: 60px 24px; text-align: center; color: #6b7280; font-size: 13px; }
.d3view-cart-empty[hidden]             { display: none; }
.d3view-cart-empty i                   { display: block; font-size: 32px; margin-bottom: 12px; color: #9ca3af; }
.d3view-cart-empty-hint                { margin-top: 8px; font-size: 11px; color: #9ca3af; line-height: 1.5; }

.d3view-cart-foot                      { padding: 10px 18px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; }

/* === Section per asset_type =========================================== */

.d3view-cart-sections                  { display: flex; flex-direction: column; }
.d3view-cart-section                   { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.d3view-cart-section:last-child        { border-bottom: none; }
.d3view-cart-section-head              { display: flex; align-items: center; gap: 8px; padding: 4px 18px 6px 18px; }
.d3view-cart-section-icon              { color: #2c5282; font-size: 13px; width: 18px; text-align: center; }
.d3view-cart-section-label             { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: #1f2937; text-transform: uppercase; letter-spacing: 0.3px; }
.d3view-cart-section-count             { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #e0ecf8; color: #2c5282; font-size: 10px; font-weight: 700; }
.d3view-cart-section-list              { list-style: none; margin: 0; padding: 0; }
.d3view-cart-section-actions           { padding: 8px 18px 4px 18px; }

/* === Pills =========================================================== */

.d3view-cart-pill                      { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid transparent; transition: background 0.15s ease; }
.d3view-cart-pill:hover                { background: #f9fafb; }
.d3view-cart-pill-handle               { color: #c4c4c4; font-size: 11px; cursor: grab; flex-shrink: 0; }
.d3view-cart-pill-handle:active        { cursor: grabbing; color: #6b7280; }
.d3view-cart-pill-body                 { flex: 1 1 auto; min-width: 0; font-size: 12px; color: #1f2937; word-break: break-word; }
.d3view-cart-pill-label                { font-weight: 600; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }
.d3view-cart-pill-sub                  { font-size: 10px; color: #6b7280; margin-top: 2px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.d3view-cart-build-btn                 { width: 100%; }

/* === Workflow builder modal ========================================= */

.d3view-cart-builder-scrim             { position: fixed; inset: 0; background: rgba(15,23,42,0.65); display: flex; align-items: center; justify-content: center; z-index: 1051; }
.d3view-cart-builder-shell             { background: #ffffff; width: 92vw; height: 88vh; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
.d3view-cart-builder-head              { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; }
.d3view-cart-builder-title             { font-size: 14px; font-weight: 600; color: #111827; }
.d3view-cart-builder-title i           { margin-right: 8px; color: #2c5282; }
.d3view-cart-builder-close             { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.d3view-cart-builder-close:hover       { color: #111827; }
.d3view-cart-builder-body              { flex: 1 1 auto; min-height: 0; position: relative; }
.d3view-cart-builder-canvas            { width: 100%; height: 100%; }
.d3view-cart-builder-loading           { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,0.94); color: #4b5563; font-size: 13px; z-index: 1; }
.d3view-cart-builder-loading i         { font-size: 24px; color: #2c5282; }
.d3view-cart-builder-error             { padding: 24px; text-align: center; color: #b91c1c; background: #fef2f2; border-bottom: 1px solid #fecaca; font-size: 13px; }
.d3view-cart-pill-remove               { background: transparent; border: none; cursor: pointer; color: #9ca3af; padding: 2px 6px; border-radius: 4px; font-size: 12px; transition: background 0.15s ease, color 0.15s ease; }
.d3view-cart-pill-remove:hover         { background: #fef0ef; color: #b91c1c; }

/* === Sortable placeholder + drag state =================================
   Matches the dashed-blue drop zone documented in frontend-style.md and
   gives the dragged pill a subtle lift so it's obviously the active
   item. */
.d3view-cart-pill-placeholder          { background: #e8f0fe; border: 2px dashed #90b4e0; border-radius: 6px; margin: 4px 12px; height: 38px; }
.d3view-cart-pill.ui-sortable-helper   { background: #ffffff; box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: scale(1.02); opacity: 0.95; border-radius: 6px; }

/* === Generic header side drawer ========================================
   Reused by SharingsDrawer + RecycledDrawer. Visual language follows
   the cart drawer (380px shell, scrim, 0.22s slide-in). The external-
   link icon at the top right escapes to the dedicated controller page
   when the user wants the full UI. */

.d3view-side-drawer-root               { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.d3view-side-drawer-scrim              { position: absolute; inset: 0; background: rgba(15,23,42,0.45); opacity: 0; transition: opacity 0.22s ease; pointer-events: none; }
.d3view-side-drawer-shell              { position: absolute; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw; background: #ffffff; box-shadow: -4px 0 18px rgba(15,23,42,0.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s ease; pointer-events: auto; }
.d3view-side-drawer-root.is-open       { pointer-events: auto; }
.d3view-side-drawer-root.is-open .d3view-side-drawer-scrim { opacity: 1; pointer-events: auto; }
.d3view-side-drawer-root.is-open .d3view-side-drawer-shell { transform: translateX(0); }

.d3view-side-drawer-head               { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px 18px; border-bottom: 1px solid #e5e7eb; }
.d3view-side-drawer-title              { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-side-drawer-title i            { margin-right: 8px; color: #2c5282; }
.d3view-side-drawer-actions            { display: flex; align-items: center; gap: 4px; }
.d3view-side-drawer-icon-btn,
.d3view-side-drawer-external           { background: none; border: none; cursor: pointer; color: #6b7280; padding: 4px 6px; border-radius: 4px; font-size: 13px; line-height: 1; transition: background 0.15s ease, color 0.15s ease; text-decoration: none; }
.d3view-side-drawer-icon-btn:hover,
.d3view-side-drawer-external:hover     { background: #f3f4f6; color: #2c5282; text-decoration: none; }
.d3view-side-drawer-close              { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.d3view-side-drawer-close:hover        { color: #111827; }

.d3view-side-drawer-body               { flex: 1 1 auto; overflow: auto; padding: 6px 0; position: relative; }
.d3view-side-drawer-loading            { padding: 24px; text-align: center; color: #6b7280; font-size: 12px; }
.d3view-side-drawer-loading i          { margin-right: 6px; color: #2c5282; }
.d3view-side-drawer-empty              { padding: 60px 24px; text-align: center; color: #6b7280; font-size: 13px; }
.d3view-side-drawer-error              { padding: 24px; text-align: center; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; margin: 12px 18px; font-size: 12px; }

.d3view-side-drawer-pill               { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f3f4f6; color: #1f2937; text-decoration: none; transition: background 0.15s ease; }
.d3view-side-drawer-pill:last-child    { border-bottom: none; }
.d3view-side-drawer-pill:hover         { background: #f9fafb; text-decoration: none; }
.d3view-side-drawer-pill-icon          { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #e0ecf8; color: #2c5282; font-size: 12px; flex-shrink: 0; }
.d3view-side-drawer-pill-body          { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d3view-side-drawer-pill-label         { font-size: 12px; font-weight: 600; color: #111827; word-break: break-word; }
.d3view-side-drawer-pill-meta          { font-size: 10px; color: #6b7280; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.d3view-side-drawer-pill-tag           { display: inline-block; padding: 1px 6px; background: #f3f4f6; color: #6b7280; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; font-size: 9px; }
.d3view-side-drawer-pill-when          { color: #9ca3af; }
.d3view-side-drawer-pill-badge         { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; align-self: center; text-transform: uppercase; letter-spacing: 0.3px; }
.d3view-side-drawer-pill-badge--warning { background: #fef3cd; color: #856404; }
.d3view-side-drawer-pill-badge--success { background: #d4edda; color: #155724; }
.d3view-side-drawer-pill-badge--danger  { background: #f8d7da; color: #721c24; }
.d3view-side-drawer-pill-person        { font-size: 11px; color: #555; display: inline-flex; align-items: center; gap: 6px; }
.d3view-side-drawer-pill-person i      { color: #2c5282; font-size: 10px; }

/* Clickable variant — used by the recycle drawer where each pill opens
   the in-page #/<type>/view/:id route and exposes a restore button on
   hover. The pill stays visually flat at rest; hover lifts it to signal
   the affordance and reveals the restore action. */
.d3view-side-drawer-pill--clickable    { cursor: pointer; position: relative; }
.d3view-side-drawer-pill--clickable:hover { background: #f3f4f6; }
.d3view-side-drawer-pill-restore       { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 6px; border: 1px solid #d1d5db; background: #ffffff; color: #2c5282; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; }
.d3view-side-drawer-pill--clickable:hover .d3view-side-drawer-pill-restore { opacity: 1; }
.d3view-side-drawer-pill-restore:hover { background: #2c5282; color: #ffffff; border-color: #2c5282; }
.d3view-side-drawer-pill-restore:focus { outline: 2px solid #93c5fd; outline-offset: 1px; opacity: 1; }
.d3view-side-drawer-pill-restore[disabled] { opacity: 1; cursor: progress; }

/* Pagination footer used by the recycle drawer. Sticky so it stays at
   the bottom of the drawer body while the user scrolls through the
   current page's rows. Compact two-button + status label layout. */
.d3view-side-drawer-paging             { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #f9fafb; border-top: 1px solid #e5e7eb; gap: 8px; font-size: 11px; color: #4b5563; }
.d3view-side-drawer-paging-status      { flex: 1 1 auto; text-align: center; font-weight: 600; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d3view-side-drawer-paging-btn         { padding: 4px 10px; border: 1px solid #d1d5db; background: #ffffff; color: #2c5282; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.d3view-side-drawer-paging-btn:hover:not([disabled]) { background: #2c5282; color: #ffffff; border-color: #2c5282; }
.d3view-side-drawer-paging-btn[disabled] { opacity: 0.45; cursor: not-allowed; color: #9ca3af; }

/* Tab toggle inside a side drawer (used by the Sharings drawer's
   With me / By me switcher). Same look as the standard pill toggles
   in frontend-style.md. */
.d3view-side-drawer-tabs               { display: flex; gap: 2px; padding: 8px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.d3view-side-drawer-tab                { flex: 1 1 auto; border: none; background: transparent; color: #888; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.d3view-side-drawer-tab:hover          { color: #555; background: #f0f0f0; }
.d3view-side-drawer-tab.is-active      { background: #ffffff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* /stylesheets/recycled.css */
/* d3VIEW Recycled SPA — /user/recycled.
   Visual conventions follow .claude/rules/frontend-style.md:
   8px outer radius / 6px inner / accent #2c5282 / neutral greys. */

.recycled-page                       { padding: 16px 22px 40px 22px; max-width: 1480px; margin: 0 auto; }
.recycled-page-head                  { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.recycled-page-title                 { font-size: 20px; font-weight: 600; color: #222; margin: 0; }
.recycled-page-title i               { color: #2c5282; margin-right: 8px; }
.recycled-page-hint                  { font-size: 12px; color: #888; }
.recycled-page-hint b                { color: #555; }

/* === Summary strip ===================================================== */
.recycled-summary-strip              { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.recycled-summary-card               { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; transition: box-shadow 0.2s ease; }
.recycled-summary-card:hover         { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.recycled-summary-card.is-warning    { border-color: #fde68a; background: #fff7e6; }
.recycled-summary-value              { font-size: 22px; font-weight: 700; color: #222; line-height: 1.1; }
.recycled-summary-label              { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; color: #888; margin-top: 4px; white-space: nowrap; }
.recycled-summary-sub                { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* === Calendar strip ==================================================== */
.recycled-calendar                   { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.recycled-calendar-label             { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; color: #888; margin-bottom: 8px; }
.recycled-calendar-grid              { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; }
.recycled-cal-cell                   { aspect-ratio: 1 / 1; min-height: 22px; border-radius: 4px; cursor: pointer; position: relative; transition: transform 0.1s ease, box-shadow 0.15s ease; display: flex; align-items: center; justify-content: center; }
.recycled-cal-cell:hover             { transform: scale(1.1); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.recycled-cal-cell.is-active         { outline: 2px solid #2c5282; outline-offset: 1px; }
.recycled-cal-cell-count             { font-size: 9px; font-weight: 700; color: #ffffff; text-shadow: 0 0 2px rgba(0,0,0,0.4); pointer-events: none; }

/* === Body layout ======================================================= */
.recycled-page-body                  { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }

.recycled-rail                       { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; height: fit-content; position: sticky; top: 16px; }
.recycled-rail-section               { margin-bottom: 10px; }
.recycled-rail-section-title         { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; color: #888; margin-bottom: 6px; }
.recycled-rail-type-list             { display: flex; flex-direction: column; gap: 2px; }
.recycled-rail-type                  { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: none; background: transparent; border-radius: 6px; text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; color: #555; font-size: 12px; }
.recycled-rail-type:hover            { background: #f9fafb; }
.recycled-rail-type.is-active        { background: #e0ecf8; color: #2c5282; font-weight: 600; }
.recycled-rail-type i                { width: 16px; text-align: center; font-size: 13px; }
.recycled-rail-type-label            { flex: 1 1 auto; }
.recycled-rail-type-count            { font-size: 11px; color: #888; background: #f3f4f6; padding: 1px 6px; border-radius: 999px; min-width: 20px; text-align: center; }
.recycled-rail-type.is-active .recycled-rail-type-count { background: #ffffff; color: #2c5282; }
.recycled-rail-reset                 { width: 100%; margin-top: 8px; padding: 6px 8px; border: 1px solid #e0e0e0; background: #ffffff; border-radius: 6px; font-size: 11px; color: #6b7280; cursor: pointer; }
.recycled-rail-reset:hover           { background: #f9fafb; color: #b91c1c; border-color: #fecaca; }

.recycled-main                       { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; min-width: 0; }

/* === Filter pills + search ============================================ */
.recycled-toolbar                    { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.recycled-pills                      { display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
.recycled-pill                       { border: none; background: transparent; color: #888; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.recycled-pill:hover                 { color: #555; background: #e8e8e8; }
.recycled-pill.is-active             { background: #ffffff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.recycled-search                     { display: flex; align-items: center; gap: 6px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 10px; min-width: 240px; }
.recycled-search i                   { color: #9ca3af; }
.recycled-search input               { border: none; outline: none; background: transparent; font-size: 12px; flex: 1 1 auto; min-width: 0; }

/* === Bulk action bar =================================================== */
.recycled-bulk-bar                   { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #e0ecf8; border: 1px solid #b3cde6; border-radius: 6px; margin-bottom: 10px; }
.recycled-bulk-count                 { font-size: 12px; color: #2c5282; font-weight: 600; }
.recycled-bulk-actions               { display: flex; gap: 6px; }

/* === Table ============================================================= */
.recycled-table-wrap                 { overflow-x: auto; }
.recycled-table                      { width: 100%; border-collapse: collapse; font-size: 12px; }
.recycled-table thead th             { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid #e5e7eb; }
.recycled-table tbody td             { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.recycled-table tbody tr:hover       { background: #f9fafb; }
.recycled-table tbody tr.is-selected { background: #e0ecf8; }
.recycled-table tbody tr.is-selected:hover { background: #cfdfee; }
.recycled-col-check                  { width: 32px; }
.recycled-col-icon                   { width: 160px; }
.recycled-col-when, .recycled-col-purge { white-space: nowrap; width: 100px; }
.recycled-col-actions                { width: 80px; text-align: right; white-space: nowrap; }
.recycled-col-actions .btn           { margin-left: 4px; }
.recycled-col-name a                 { color: #2c5282; font-weight: 600; }
.recycled-col-name a:hover           { text-decoration: underline; }
.recycled-type-chip                  { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px; font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.recycled-purge-badge                { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.recycled-purge-badge.is-ok         { background: #d4edda; color: #155724; }
.recycled-purge-badge.is-warning     { background: #fff3cd; color: #856404; }
.recycled-purge-badge.is-danger      { background: #f8d7da; color: #721c24; }

/* === Empty state ====================================================== */
.recycled-empty                      { padding: 60px 24px; text-align: center; color: #6b7280; }
.recycled-empty i                    { display: block; font-size: 36px; margin-bottom: 12px; color: #9ca3af; }
.recycled-empty-hint                 { font-size: 11px; color: #9ca3af; margin-top: 8px; line-height: 1.5; max-width: 420px; margin-left: auto; margin-right: auto; }

/* Responsive: collapse the rail on narrow screens. */
@media (max-width: 900px) {
    .recycled-page-body              { grid-template-columns: 1fr; }
    .recycled-rail                   { position: static; }
    .recycled-summary-strip          { grid-template-columns: repeat(2, 1fr); }
    .recycled-calendar-grid          { grid-template-columns: repeat(15, 1fr); }
    .recycled-calendar-grid .recycled-cal-cell:nth-child(-n+15) { display: none; }
}

/* /stylesheets/account.css */
/* ==========================================================================
   Account Panel — Shell, Sidebar, Content Tabs
   Follows admin.css (Fora Design System) patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes accountFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes accountSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   Page Header
   -------------------------------------------------------------------------- */

.account-page-header {
    padding: 10px 10px;
}

.account-page-header .account-page-title {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 3px;
    letter-spacing: -0.3px;
}

.account-page-header .account-page-subtitle {
    font-size: 13px;
    color: #8a8fa8;
    margin: 0;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Shell — Flexbox Layout
   -------------------------------------------------------------------------- */

#account-index-container[data-type="account-index"] {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 500px;
    min-width: 800px;
    width: 100%;
    background: #f5f6f8;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dfe1e8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.account-sidebar {
    width: 230px;
    flex: 0 0 230px;
    background: #fff;
    border-right: 1px solid #ebedf2;
    display: flex;
    flex-direction: column;
}

.account-sidebar-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f0f1f5;
}

.account-sidebar-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
}

.account-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8edf8, #d4dcf0);
    color: #3b5998;
    font-size: 12px;
    flex: 0 0 30px;
}

/* Navigation list */
#account-index-container[data-type="account-index"] #account_sidebar_menu {
    padding: 10px 10px;
    flex: 1;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li {
    margin: 1px 0;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #5a5f7a;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
    line-height: 1.3;
    background: none;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li > a:hover {
    background: #f3f4f8;
    color: #2d3250;
    text-decoration: none;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li > a:focus {
    background: #f3f4f8;
    color: #2d3250;
    text-decoration: none;
    outline: none;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li.active > a {
    background: #edf0f7;
    color: #2c5282;
    font-weight: 600;
}

/* Icon squares inside sidebar links */
#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li > a > span.fa,
#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li > a > span.glyphicon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: #f0f1f5;
    color: #6b7094;
    flex: 0 0 28px;
    transition: background 0.18s ease, color 0.18s ease;
}

#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li.active > a > span.fa,
#account-index-container[data-type="account-index"] #account_sidebar_menu > ul.nav > li.active > a > span.glyphicon {
    background: #337ab7;
    color: #fff;
}

/* Override Bootstrap pill defaults */
#account-index-container[data-type="account-index"] .nav-pills > li > a {
    border-radius: 7px;
    background: none;
    padding: 8px 10px;
}

#account-index-container[data-type="account-index"] .nav-pills > li.active > a,
#account-index-container[data-type="account-index"] .nav-pills > li.active > a:hover,
#account-index-container[data-type="account-index"] .nav-pills > li.active > a:focus {
    background: #edf0f7;
    color: #2c5282;
}

#account-index-container[data-type="account-index"] .nav-pills > li > a:hover {
    background: #f3f4f8;
    color: #2d3250;
}

/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */

.account-content {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    overflow-y: auto;
    background: #f5f6f8;
}

#account-index-container[data-type="account-index"] #account-tab-content {
    animation: accountFadeIn 0.3s ease;
}

/* --------------------------------------------------------------------------
   Stat Cards
   -------------------------------------------------------------------------- */

.account-stat-row {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
}

.account-stat-card {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #dfe1e8;
    background: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-stat-card:hover {
    border-color: #c8cad5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.account-stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: 0 0 40px;
}

.account-stat-card-icon.icon-db     { background: #e0ecf8; color: #2c5282; }
.account-stat-card-icon.icon-users  { background: #e8e0f0; color: #6a4c93; }
.account-stat-card-icon.icon-server { background: #e0f0e8; color: #276749; }

.account-stat-info {
    flex: 1;
    min-width: 0;
}

.account-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #8a8fa8;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.account-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
}

.account-stat-unit {
    font-size: 13px;
    font-weight: 500;
    color: #8a8fa8;
    margin-left: 3px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.account-card {
    border-radius: 8px;
    border: 1px solid #dfe1e8;
    background: #fff;
    padding: 0;
    margin-bottom: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-card:hover {
    border-color: #c8cad5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Card header with icon box */
.account-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f0f1f5;
}

.account-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
}

.account-card-subtitle {
    font-size: 11px;
    color: #8a8fa8;
    margin: 2px 0 0;
    font-weight: 400;
}

.account-card-body {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Card Icon Badges
   -------------------------------------------------------------------------- */

.account-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: 0 0 36px;
}

.account-card-icon.icon-blue   { background: #e0ecf8; color: #2c5282; }
.account-card-icon.icon-purple { background: #e8e0f0; color: #6a4c93; }
.account-card-icon.icon-green  { background: #e0f0e8; color: #276749; }
.account-card-icon.icon-orange { background: #fff7e6; color: #d46b08; }
.account-card-icon.icon-red    { background: #f8d7da; color: #721c24; }

/* --------------------------------------------------------------------------
   Key-Value Table
   -------------------------------------------------------------------------- */

.account-kv-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.account-kv-table td {
    padding: 9px 16px;
    border-bottom: 1px solid #f4f5f7;
    vertical-align: middle;
    line-height: 1.4;
}

.account-kv-table tr:last-child td {
    border-bottom: none;
}

.account-kv-table tr {
    transition: background 0.12s ease;
}

.account-kv-table tr:hover {
    background: #f8f9fb;
}

.account-kv-table td:first-child {
    font-weight: 500;
    color: #5a5f7a;
    width: 40%;
    font-size: 12px;
}

.account-kv-table td:last-child {
    color: #2d3250;
    word-break: break-all;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

/* Div-based KV rows (used in tab_api.tpl) */
.account-kv-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #f4f5f7;
    font-size: 13px;
}

.account-kv-row:last-child {
    border-bottom: none;
}

.account-kv-label {
    font-weight: 500;
    color: #5a5f7a;
    font-size: 12px;
    min-width: 120px;
    flex: 0 0 120px;
}

.account-kv-value {
    color: #2d3250;
    word-break: break-all;
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Form Styling
   -------------------------------------------------------------------------- */

.account-form-group {
    padding: 14px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.account-form-group:last-of-type {
    border-bottom: none;
}

.account-mfa-management-section {
    padding: 16px 18px 18px;
    border-top: 1px solid #f0f1f5;
}

.account-mfa-management-section .account-form-group {
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 0;
}

.account-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: #2d3250;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.account-form-group input,
.account-form-group select {
    border-radius: 6px;
    border: 1px solid #dfe1e8;
    font-size: 13px;
    padding: 7px 12px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fff;
    color: #2d3250;
    outline: none;
}

.account-form-group input:focus,
.account-form-group select:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
    outline: none;
}

.account-form-group input[readonly],
.account-form-group input.readonly {
    background: #f5f6f8;
    color: #8a8fa8;
    cursor: not-allowed;
    border-color: #ebedf2;
}

.account-form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5f7a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Card Footer
   -------------------------------------------------------------------------- */

.account-card-footer {
    padding: 14px 18px;
    border-top: 1px solid #f0f1f5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.account-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    line-height: 1.4;
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
}

.account-btn-primary:hover {
    background: #2c6aa0;
    border-color: #2c6aa0;
    color: #fff;
    text-decoration: none;
}

.account-btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.2);
    color: #fff;
    text-decoration: none;
}

.account-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    line-height: 1.4;
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.account-btn-danger:hover {
    background: #a93226;
    border-color: #a93226;
    color: #fff;
    text-decoration: none;
}

.account-btn-danger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
    color: #fff;
    text-decoration: none;
}

.account-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #dfe1e8;
    cursor: pointer;
    transition: all 0.18s ease;
    text-decoration: none;
    line-height: 1.4;
    background: #fff;
    color: #5a5f7a;
}

.account-btn-secondary:hover {
    background: #f3f4f8;
    color: #2d3250;
    border-color: #c8cad5;
    text-decoration: none;
}

.account-btn-secondary:focus {
    outline: none;
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.1);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Status Badges
   -------------------------------------------------------------------------- */

.account-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.account-badge.badge-active {
    background: #d4edda;
    color: #155724;
}

.account-badge.badge-warning {
    background: #fff3cd;
    color: #856404;
}

.account-badge.badge-danger {
    background: #f8d7da;
    color: #721c24;
}

/* --------------------------------------------------------------------------
   Toggle Switches
   -------------------------------------------------------------------------- */

.account-session-policy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #e7eaf0;
}

.account-session-policy-copy {
    min-width: 0;
}

.account-session-policy-title {
    color: #2d3250;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.account-session-policy-subtitle {
    margin-top: 3px;
    color: #687080;
    font-size: 12px;
    line-height: 1.45;
}

.account-session-step-up {
    padding: 14px 18px 4px;
}

.account-session-step-up label {
    display: block;
    margin: 0 0 7px;
    color: #4f566b;
    font-size: 12px;
    font-weight: 500;
}

.account-session-step-up input {
    width: 100%;
    max-width: 360px;
    height: 36px;
    padding: 7px 10px;
    border: 1px solid #ccd2dc;
    border-radius: 4px;
    background: #fff;
    color: #2d3250;
    font-size: 13px;
}

.account-session-step-up input:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.12);
    outline: 0;
}

.account-session-policy-message {
    min-height: 18px;
    padding: 8px 18px 0;
    color: #687080;
    font-size: 12px;
}

.account-session-list-heading {
    margin: 10px 18px 6px;
    color: #4f566b;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

#account-sessions-card [data-session-message]:not(:empty) {
    padding: 0 18px 12px;
}

#account-sessions-card .account-session-row {
    padding-right: 18px;
    padding-left: 18px;
}

@media (max-width: 560px) {
    .account-session-policy {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

.account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    user-select: none;
    font-weight: 400;
    position: relative;
}

.account-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    clip: rect(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.account-toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background: #ccd0dc;
    border-radius: 22px;
    transition: background 0.2s ease;
    flex: 0 0 40px;
    vertical-align: middle;
}

.account-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.account-toggle input:checked + .account-toggle-slider {
    background: #337ab7;
}

.account-toggle input:checked + .account-toggle-slider::after {
    transform: translateX(18px);
}

.account-toggle input:focus-visible + .account-toggle-slider {
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15);
}

.account-toggle-label {
    font-size: 12px;
    font-weight: 400;
    color: #5a5f7a;
    line-height: 22px;
}

/* --------------------------------------------------------------------------
   Sub-cards (nested cards, e.g. individual HPC configs inside HPC card)
   -------------------------------------------------------------------------- */

.account-sub-card {
    border: 1px solid #ebedf2;
    border-radius: 8px;
    background: #fafbfc;
    margin: 0 18px 14px;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.account-sub-card:first-of-type {
    margin-top: 14px;
}

.account-sub-card:last-of-type {
    margin-bottom: 18px;
}

.account-sub-card:hover {
    border-color: #d0d3de;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.account-sub-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #ebedf2;
    background: #fff;
}

.account-sub-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
}

.account-sub-card-body {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Skeleton Loading States
   -------------------------------------------------------------------------- */

@keyframes accountShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.account-skeleton {
    padding: 24px 0;
    animation: accountFadeIn 0.2s ease;
}

.account-skeleton-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    overflow: hidden;
}

.account-skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.account-skeleton-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #e9ecef;
    flex: 0 0 32px;
    overflow: hidden;
    position: relative;
}

.account-skeleton-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: accountShimmer 1.6s ease-in-out infinite;
}

.account-skeleton-title-group {
    flex: 1;
}

.account-skeleton-title {
    height: 14px;
    width: 140px;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 6px;
    overflow: hidden;
    position: relative;
}

.account-skeleton-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: accountShimmer 1.6s ease-in-out infinite;
}

.account-skeleton-subtitle {
    height: 10px;
    width: 200px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.account-skeleton-subtitle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: accountShimmer 1.6s ease-in-out infinite;
}

.account-skeleton-field {
    padding: 14px 18px;
    border-bottom: 1px solid #f4f5f7;
}

.account-skeleton-field:last-child {
    border-bottom: none;
}

.account-skeleton-label {
    height: 12px;
    width: 120px;
    background: #e9ecef;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
}

.account-skeleton-label::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: accountShimmer 1.6s ease-in-out infinite;
}

.account-skeleton-input {
    height: 34px;
    width: 100%;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.account-skeleton-input::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: accountShimmer 1.6s ease-in-out infinite;
}

.account-skeleton-field:nth-child(odd) .account-skeleton-label { width: 150px; }
.account-skeleton-field:nth-child(3n)  .account-skeleton-label { width: 100px; }

/* /stylesheets/admin_spa.css */
/*
 * Admin SPA — shell chrome only.
 * Tab-specific styling lives in admin.css / per-tab CSS files. This
 * file is intentionally short: layout (sidebar + main pane), pill
 * states, loading / error blocks, and the legacy-toggle link.
 *
 * Tokens follow .claude/rules/frontend-style.md:
 *   8px outer radius, 6px inner; #2c5282 accent; neutral greys.
 */

/* ---------- Page-header opt-in/out links ---------- */
.admin-spa-preview-link,
.admin-spa-legacy-link {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    border: 1px solid #c6d9ec;
    border-radius: 6px;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.admin-spa-preview-link:hover,
.admin-spa-legacy-link:hover { background: #c6d9ec; color: #1a365d; }
.admin-spa-preview-link i,
.admin-spa-legacy-link i { margin-right: 4px; }

/* ---------- Shell layout ---------- */
.admin-spa-root,
.admin-spa,
.admin-spa-shell {
    height: 100%;
    min-height: 0;
}
.admin-spa-root,
.admin-spa-shell { overflow: hidden; }
.admin-spa-shell { display: flex; gap: 16px; align-items: stretch; }
.admin-spa-sidebar-mount {
    flex: 0 0 220px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.admin-spa-main {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.admin-spa-tab-host,
.admin-spa-tab-mount {
    height: 100%;
    min-height: 0;
}
.admin-spa-tab-mount {
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.admin-llm-and-ai-host {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* The shared Settings pillbar compensates for the legacy page's 24px
   content padding. The SPA main pane has no such padding, so that negative
   offset otherwise collapses through the tab mount and clips the toolbar. */
.admin-spa-main .admin-settings-pillbar { top: 0; margin-top: 0; }
.admin-spa-main .admin-settings-section { scroll-margin-top: 116px; }
.admin-spa-main .admin-settings-section:nth-last-child(2),
.admin-spa-main .admin-settings-section:nth-last-child(2) > .admin-card { margin-bottom: 0; }

/* ---------- Sidebar ---------- */
.admin-spa-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.admin-spa-sidebar-header {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 12px 6px; margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.admin-spa-sidebar-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e0ecf8; color: #2c5282; border-radius: 6px;
}
.admin-spa-sidebar-title {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px; color: #333;
}

.admin-spa-sidebar-search {
    position: relative;
    flex: 0 0 auto;
    margin: 0 0 10px;
}
.admin-spa-sidebar-search-input {
    width: 100%;
    height: 34px;
    box-sizing: border-box;
    padding: 6px 30px 6px 30px;
    border: 1px solid #cbd2da;
    border-radius: 6px;
    background: #f8fafc;
    color: #333;
    font-size: 12px;
}
.admin-spa-sidebar-search-input::-webkit-search-cancel-button { display: none; }
.admin-spa-sidebar-search-input:focus {
    outline: none;
    border-color: #2c5282;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.14);
}
.admin-spa-sidebar-search-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
    color: #7a8796;
    font-size: 12px;
    pointer-events: none;
}
.admin-spa-sidebar-search-clear {
    display: none;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7a8796;
    cursor: pointer;
}
.admin-spa-sidebar-search-clear.is-visible { display: inline-flex; align-items: center; justify-content: center; }
.admin-spa-sidebar-search-clear:hover { color: #2c5282; }

.admin-spa-pills {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
}
.admin-spa-pills li { margin: 0 0 4px 0; }
.admin-spa-pills li.admin-spa-search-hidden { display: none; }
.admin-spa-search-empty {
    display: none;
    padding: 16px 10px;
    color: #7a8796;
    font-size: 12px;
    text-align: center;
}
.admin-spa-search-empty.is-visible { display: block; }
.admin-spa-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px;
    font-size: 13px; font-weight: 500; color: #555;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.admin-spa-pill:hover { background: #f0f0f0; color: #333; text-decoration: none; }
.admin-spa-pill.active {
    background: #e0ecf8; color: #2c5282; font-weight: 600;
}
.admin-spa-pill .fa { width: 16px; text-align: center; color: #888; }
.admin-spa-pill.active .fa { color: #2c5282; }

.admin-spa-legacy-toggle {
    margin-top: 12px; padding-top: 8px;
    border-top: 1px solid #f0f0f0; text-align: center;
}
.admin-spa-legacy-toggle a {
    color: #888; font-size: 11px; text-decoration: none;
}
.admin-spa-legacy-toggle a:hover { color: #2c5282; }

/* ---------- Main pane / tab states ---------- */
.admin-spa-tab { animation: adminSpaFadeIn 0.25s ease both; }
.admin-spa-tab-loading,
.admin-spa-tab-error {
    padding: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #555;
    font-size: 13px;
}
.admin-spa-tab-loading .fa-spinner { color: #2c5282; margin-right: 6px; }
.admin-spa-tab-error {
    border-color: #f5c6cb; background: #f8d7da; color: #721c24;
}
.admin-spa-tab-error .fa { margin-right: 6px; }

.admin-license-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.admin-license-metric { padding: 16px 18px; background: #fff; min-width: 0; }
.admin-license-metric + .admin-license-metric { border-left: 1px solid #e0e0e0; }
.admin-license-metric-label { color: #777; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.admin-license-metric-value { margin-top: 4px; color: #222; font-size: 24px; font-weight: 600; line-height: 1.2; }
.admin-license-metric-date { font-size: 16px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .admin-spa-shell { gap: 10px; }
    .admin-spa-sidebar-mount { flex-basis: 190px; }
    .admin-license-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-license-metric + .admin-license-metric { border-left: 0; }
    .admin-license-metric:nth-child(even) { border-left: 1px solid #e0e0e0; }
    .admin-license-metric:nth-child(n+3) { border-top: 1px solid #e0e0e0; }
}

@keyframes adminSpaFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Tab loading skeleton =============================================
   Lives inside a tab's content host until its real view (RBAC, Logs,
   etc.) replaces the host's innerHTML. Mirrors the project's frontend
   style guide skeleton pattern: light grey blocks with a soft
   left-to-right shimmer sweep. */
.admin-tab-skeleton                     { padding: 16px 0; }
.admin-tab-skeleton-header              { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.admin-tab-skeleton-bar                 { background: #e9ecef; border-radius: 6px; height: 14px; position: relative; overflow: hidden; }
.admin-tab-skeleton-bar-title           { width: 220px; height: 22px; }
.admin-tab-skeleton-bar-action          { width: 110px; height: 32px; border-radius: 8px; }
.admin-tab-skeleton-cards               { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-tab-skeleton-card                { background: #e9ecef; border-radius: 8px; height: 96px; position: relative; overflow: hidden; }
.admin-tab-skeleton-bar::after,
.admin-tab-skeleton-card::after         { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); transform: translateX(-100%); animation: adminTabSkeletonShimmer 1.4s ease-in-out infinite; }
@keyframes adminTabSkeletonShimmer {
    100% { transform: translateX(100%); }
}

/* === Inline modal — used by the Organizations tab's Create / Edit /
   Register Vendor / Add User flows. Self-contained so we don't depend
   on Bootstrap's modal-positioning JS or the legacy d3VIEW popup
   chrome. */
.admin-org-modal                  { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; }
.admin-org-modal-scrim            { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); animation: adminOrgModalFadeIn 0.15s ease-out; }
.admin-org-modal-panel            { position: relative; width: 520px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #ffffff; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); animation: adminOrgModalSlideIn 0.18s ease-out; }
.admin-org-modal-head             { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e0e0e0; }
.admin-org-modal-title            { font-size: 14px; font-weight: 600; color: #1a1a2e; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-org-modal-close            { background: transparent; border: none; font-size: 22px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.admin-org-modal-close:hover      { color: #1a1a2e; }
.admin-org-modal-body             { padding: 18px; overflow-y: auto; flex: 1 1 auto; }
.admin-org-modal-body .form-group { margin-bottom: 12px; }
.admin-org-modal-body label       { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-org-modal-body input[type=text],
.admin-org-modal-body input[type=password],
.admin-org-modal-body input[type=email],
.admin-org-modal-body select,
.admin-org-modal-body textarea    { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid #cbd2da; border-radius: 6px; background: #fff; box-sizing: border-box; }
.admin-org-modal-body input:focus,
.admin-org-modal-body select:focus,
.admin-org-modal-body textarea:focus { outline: none; border-color: #2c5282; box-shadow: 0 0 0 2px rgba(44,82,130,0.15); }
.admin-org-modal-body textarea    { min-height: 60px; resize: vertical; }

/* Field affordances — required marker, per-field hint, live character
   counter, and the vendor-parent note. The counters and hints exist because
   the underlying columns are narrow (name is varchar(40)) and MySQL is not
   in strict mode here, so an over-long value would be silently TRUNCATED
   rather than rejected. */
.admin-org-modal-body .admin-org-req      { color: #c00; margin-left: 2px; }
.admin-org-modal-body .admin-org-legend   { font-size: 11px; color: #888; margin: 0 0 14px 0; }
.admin-org-modal-body .admin-org-hint     { display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: #888; }
.admin-org-modal-body .admin-org-hint code { font-size: 11px; padding: 0 3px; background: #f0f0f0; border-radius: 3px; color: #555; }
.admin-org-modal-body .admin-org-counter  { float: right; font-size: 11px; font-weight: 500; color: #999; letter-spacing: 0; text-transform: none; }
.admin-org-modal-body .admin-org-counter.is-near { color: #d46b08; }
.admin-org-modal-body .admin-org-counter.is-max  { color: #c00; font-weight: 600; }
.admin-org-modal-body .admin-org-parent-note {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px 0; padding: 8px 10px;
    font-size: 12px; color: #2c5282; background: #e0ecf8; border-radius: 6px;
}
.admin-org-modal-body .admin-org-parent-note .fa { color: #2c5282; }

/* Invalid styling is gated behind .is-validated, which config.js adds only
   after the first failed submit — otherwise the required Name field paints
   red the instant the modal opens, before the user has typed anything. */
.admin-org-form.is-validated input:invalid,
.admin-org-form.is-validated textarea:invalid  { border-color: #e0a3a9; background: #fffafa; }
.admin-org-form.is-validated input:invalid:focus,
.admin-org-form.is-validated textarea:invalid:focus { border-color: #c9515f; box-shadow: 0 0 0 2px rgba(201,81,95,0.15); }

.admin-org-modal-foot             { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e0e0e0; background: #f7f8fa; border-radius: 0 0 8px 8px; }
.admin-org-modal-error            { flex: 1 1 auto; color: #721c24; background: #f8d7da; padding: 6px 10px; border-radius: 6px; font-size: 12px; margin: 0; }
.admin-org-modal-cancel,
.admin-org-modal-submit           { font-size: 12px; padding: 6px 14px; }
.admin-org-modal-submit:disabled  { opacity: 0.6; cursor: not-allowed; }

/* === Organization user-management panel (data-org-action="manage_users") ===
   Wider than the form modals because it holds a 5-column table. */
.admin-org-modal-panel.is-wide     { width: 860px; }
.admin-org-users-toolbar           { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-org-users-search            { flex: 1 1 auto; padding: 6px 10px; font-size: 13px; border: 1px solid #cbd2da; border-radius: 6px; box-sizing: border-box; }
.admin-org-users-search:focus      { outline: none; border-color: #2c5282; box-shadow: 0 0 0 2px rgba(44,82,130,0.15); }
.admin-org-users-count             { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.admin-org-users-body              { max-height: 420px; overflow-y: auto; }
.admin-org-users-loading           { padding: 24px; text-align: center; font-size: 12px; color: #999; }
.admin-org-users-error             { padding: 10px 12px; font-size: 12px; color: #721c24; background: #f8d7da; border-radius: 6px; }
.admin-org-users-table             { width: 100%; }
.admin-org-users-table th          { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; }
.admin-org-users-table td          { font-size: 13px; vertical-align: middle; }
.admin-org-users-name              { display: block; font-weight: 600; color: #333; }
.admin-org-users-fullname          { display: block; font-size: 11px; color: #999; }
.admin-org-users-role              { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; background: #e0ecf8; color: #2c5282; border-radius: 4px; }
.admin-org-users-role.is-none      { background: #fff3cd; color: #856404; font-style: italic; }
.admin-org-users-badge             { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.admin-org-users-badge.is-active   { background: #d4edda; color: #155724; }
.admin-org-users-badge.is-inactive { background: #f8d7da; color: #721c24; }
.admin-org-users-empty             { padding: 32px 16px; text-align: center; color: #999; }
.admin-org-users-empty .fa         { font-size: 28px; color: #cbd2da; margin-bottom: 10px; display: block; }
.admin-org-users-empty p           { margin: 0 0 4px; font-size: 13px; }
.admin-org-users-empty-hint        { font-size: 11px !important; color: #aaa; }

/* --- Two-pane stage (list <-> delete/relocate), slides in place --- */
/* Both panes stay mounted so the transform can animate between them. The
   stage's height is set from JS on every switch: with both mounted the
   natural height is always the TALLER pane, which would pad the shorter one
   with dead space. Height transitions alongside the slide. */
.admin-org-stage                   { position: relative; overflow: hidden; transition: height 0.28s ease; }
.admin-org-stage-track             { display: flex; align-items: flex-start; width: 200%; transition: transform 0.28s ease; }
.admin-org-stage-view              { flex: 0 0 50%; width: 50%; }
.admin-org-stage.is-detail .admin-org-stage-track { transform: translateX(-50%); }
/* The off-screen pane must not be reachable by Tab -- but hiding it the
   instant the switch starts would blank it mid-slide, so the hide is delayed
   by the slide duration while the reveal stays immediate. */
.admin-org-stage-view                     { visibility: visible; transition: visibility 0s linear 0s; }
.admin-org-stage-view[aria-hidden="true"] { visibility: hidden;  transition: visibility 0s linear 0.28s; }
.admin-org-modal-submit-danger     { background: #c0392b !important; border-color: #a93226 !important; }
.admin-org-modal-submit-danger:hover { background: #a93226 !important; }

/* --- Row selection (click / cmd-click / shift-click) --- */
.admin-org-users-table tbody tr    { cursor: pointer; }
.admin-org-users-selcol            { width: 28px; text-align: center; }
.admin-org-users-row.is-selected            { background: #e8f0fb; }
.admin-org-users-row.is-selected td         { border-color: #c9dbf3; }
.admin-org-users-row.is-selected .admin-org-users-name { color: #1a4480; }
/* Shift-click paints the browser's own text selection across the rows, which
   reads as a rendering bug. The JS clears the range; this stops the flash. */
.admin-org-users-table             { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

/* --- Bottom action bar (visible only with a selection) --- */
.admin-org-users-actionbar         { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; background: #f4f7fb; border: 1px solid #dbe4ef; border-radius: 6px; }
.admin-org-users-selcount          { font-size: 12px; font-weight: 600; color: #2c5282; white-space: nowrap; }
.admin-org-users-actions           { display: flex; align-items: center; gap: 8px; }
.admin-org-btn                     { padding: 6px 12px; font-size: 12px; font-weight: 600; color: #333; background: #ffffff; border: 1px solid #cbd2da; border-radius: 6px; cursor: pointer; }
.admin-org-btn:hover               { background: #f0f3f7; }
.admin-org-btn.is-danger           { color: #ffffff; background: #c0392b; border-color: #a93226; }
.admin-org-btn.is-danger:hover     { background: #a93226; }
.admin-org-btn.is-quiet            { color: #777; background: transparent; border-color: transparent; }
.admin-org-btn.is-quiet:hover      { color: #333; background: #e7ecf3; }

/* --- Delete mapper / relocate --- */
.admin-org-mapper-lead             { margin: 0 0 12px; font-size: 13px; color: #444; }
.admin-org-mapper-warn             { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.5; color: #856404; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 6px; }
.admin-org-mapper-table            { width: 100%; }
.admin-org-mapper-table th         { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: #888; }
.admin-org-mapper-table td         { font-size: 13px; vertical-align: middle; }
/* Explicit widths: left to auto-layout, the "Transfer assets" and
   "Transfer to" headers sit shoulder to shoulder and read as one phrase. */
.admin-org-mapper-table th:first-child,
.admin-org-mapper-table td:first-child { width: 34%; }
.admin-org-mapper-togglecol        { width: 150px; text-align: center; }
.admin-org-mapper-target           { width: 100%; max-width: 320px; padding: 5px 8px; font-size: 12px; border: 1px solid #cbd2da; border-radius: 6px; box-sizing: border-box; }
.admin-org-mapper-target:disabled  { background: #f2f4f7; color: #aaa; }
.admin-org-mapper-note             { display: block; margin-top: 3px; font-size: 11px; color: #b06a00; }
.admin-org-mapper-row.is-transferring .admin-org-mapper-note { color: #1e7e34; }
.admin-org-mapper-userlist         { margin: 0 0 14px; padding-left: 18px; max-height: 180px; overflow-y: auto; }
.admin-org-mapper-userlist li      { margin-bottom: 4px; }

/* Toggle switch. A bare checkbox reads as "tick to confirm"; this reads as a
   two-state choice, which is what the column is. */
.admin-org-switch                  { position: relative; display: inline-block; cursor: pointer; }
.admin-org-switch.is-disabled      { cursor: not-allowed; opacity: 0.45; }
.admin-org-switch input            { position: absolute; opacity: 0; width: 0; height: 0; }
.admin-org-switch-track            { display: block; width: 38px; height: 20px; background: #cbd2da; border-radius: 10px; transition: background 0.15s ease; }
.admin-org-switch-thumb            { display: block; width: 16px; height: 16px; margin: 2px; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.admin-org-switch input:checked + .admin-org-switch-track { background: #2e7d32; }
.admin-org-switch input:checked + .admin-org-switch-track .admin-org-switch-thumb { transform: translateX(18px); }
.admin-org-switch input:focus + .admin-org-switch-track   { box-shadow: 0 0 0 2px rgba(44,82,130,0.25); }

/* The shared user-creation modal (#admin-user-add) is a Bootstrap modal that
   appends to <body>. It must sit ABOVE this panel's z-index 1080, or it opens
   behind the panel that launched it and reads as a dead button. */
.admin-org-modal ~ .modal          { z-index: 1090; }
.admin-org-modal ~ .modal-backdrop { z-index: 1085; }

@keyframes adminOrgModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes adminOrgModalSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* === Vendor (child org) chip list shown under each parent org card === */
.admin-org-vendors                { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e0e0e0; }
.admin-org-vendors-label          { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.admin-org-vendors-label .fa      { margin-right: 4px; color: #2c5282; }
.admin-org-vendors-list           { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-org-vendor-chip            { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; background: #e0ecf8; color: #2c5282; border-radius: 999px; }
.admin-org-vendor-name            { font-weight: 600; }
.admin-org-vendor-actions         { display: inline-flex; gap: 6px; }
.admin-org-vendor-actions a       { font-size: 11px; color: #2c5282; text-decoration: underline; cursor: pointer; }
.admin-org-vendor-actions a:hover { color: #1a365d; }

/* === Organizations tab — toolbar + Table view ====================
   Sits inside the Organizations tab's .admin-card-body. The toolbar
   row holds a search input on the left and a Table/Card pill toggle
   on the right (toggle reuses the .workflows-app-tab[-toggle] classes
   the Users tab established). The table shows parent rows at the top
   level with vendor (child) rows nested below as muted, indented
   rows. */
.admin-orgs-toolbar               { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.admin-orgs-search                { flex: 1 1 auto; max-width: 320px; padding: 6px 10px; font-size: 13px; border: 1px solid #cbd2da; border-radius: 6px; }
.admin-orgs-search:focus          { outline: none; border-color: #2c5282; box-shadow: 0 0 0 2px rgba(44,82,130,0.15); }
.admin-orgs-view-toggle           { margin-left: auto; }
.admin-orgs-table-pane            { overflow-x: auto; }
.admin-orgs-table                 { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-orgs-table thead th        { position: sticky; top: 0; background: #f7f8fa; padding: 8px 12px; text-align: left; border-bottom: 2px solid #e0e0e0; font-weight: 600; color: #333; z-index: 1; }
.admin-orgs-table tbody td        { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; color: #333; }
.admin-orgs-table tbody tr:hover td { background: #fafbfd; }
.admin-orgs-table tbody tr.is-vendor td { background: #f9fafb; color: #555; }
.admin-orgs-table tbody tr.is-vendor td:first-child { padding-left: 28px; }
.admin-orgs-table tbody tr.is-vendor td:first-child::before { content: '↳ '; color: #888; margin-right: 4px; }
.admin-orgs-table .admin-orgs-row-name { color: #2c5282; cursor: pointer; }
.admin-orgs-table .admin-orgs-row-name:hover { text-decoration: underline; }
.admin-orgs-table .admin-orgs-count-chip { display: inline-block; min-width: 22px; padding: 1px 8px; background: #e5e7eb; color: #4b5563; border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center; }
.admin-orgs-table .admin-orgs-count-chip.is-zero { background: transparent; color: #aaa; }
.admin-orgs-table .admin-orgs-actions { display: inline-flex; gap: 6px; }
.admin-orgs-table .admin-orgs-actions a { color: #555; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.admin-orgs-table .admin-orgs-actions a:hover { background: #eef2f7; color: #2c5282; }

/* === Organizations — Card view ===
   Stacked card list. Mirrors the pre-redesign visual: one card per
   org with a clear outline, padding, and a flex header that puts the
   name on the left + actions on the right. */
.admin-orgs-card-pane                                                     { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.admin-orgs-card-pane .admin-organization-card                            { background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow 0.18s ease; }
.admin-orgs-card-pane .admin-organization-card:hover                      { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.admin-orgs-card-pane .admin-organization-card .page_header               { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-orgs-card-pane .admin-organization-card .page_header .fl,
.admin-orgs-card-pane .admin-organization-card .page_header .fr           { float: none; }
.admin-orgs-card-pane .admin-organization-card .page_header h2            { margin: 0; font-size: 15px; font-weight: 600; color: #1a1a2e; }
.admin-orgs-card-pane .admin-organization-card .page_header .slogan       { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: normal; color: #888; }

.admin-orgs-card-pane .admin-organization-card .page_header ul.inline     { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.admin-orgs-card-pane .admin-organization-card .page_header ul.inline li  { margin: 0; padding: 0; }
.admin-orgs-card-pane .admin-organization-card .page_header ul.inline a   { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #2c5282; background: #e0ecf8; border: 1px solid #c6d9ec; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.admin-orgs-card-pane .admin-organization-card .page_header ul.inline a:hover { background: #c6d9ec; color: #1a365d; text-decoration: none; }
.admin-orgs-card-pane .admin-organization-card .page_header ul.inline a .fa { margin-right: 2px; }

.admin-orgs-card-pane .admin-organization-card table.admin-card-table     { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-orgs-card-pane .admin-organization-card table.admin-card-table th  { width: 110px; padding: 4px 8px 4px 0; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; text-align: left; vertical-align: top; }
.admin-orgs-card-pane .admin-organization-card table.admin-card-table td  { padding: 4px 0; color: #333; vertical-align: top; }

/* === Organizations — true card grid view ===
   Used when the toolbar's "Cards" pill is active. Auto-fits multiple
   cards per row; each card has a header (icon + name + sub), a stats
   row (Users / Vendors), an info column, optional vendor chip list,
   and a footer with action buttons. */
.admin-orgs-card-pane                                     { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding-top: 4px; }
.admin-org-card                                           { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); overflow: hidden; transition: box-shadow 0.18s ease, transform 0.18s ease; }
.admin-org-card:hover                                     { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-1px); }
.admin-org-card-head                                      { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f0f0f0; }
.admin-org-card-icon                                      { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; background: #e0ecf8; color: #2c5282; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.admin-org-card-titles                                    { flex: 1 1 auto; min-width: 0; }
.admin-org-card-name                                      { font-size: 14px; font-weight: 600; color: #1a1a2e; line-height: 1.3; word-break: break-word; }
.admin-org-card-sub                                       { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 11px; color: #888; }
.admin-org-card-industry                                  { display: inline-block; padding: 1px 8px; background: #f0f4f9; color: #555; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-org-card-slogan                                    { font-style: italic; color: #888; }

.admin-org-card-stats                                     { display: flex; padding: 10px 16px; border-bottom: 1px solid #f0f0f0; gap: 24px; }
.admin-org-card-stat                                      { display: flex; flex-direction: column; align-items: flex-start; }
.admin-org-card-stat-value                                { font-size: 18px; font-weight: 700; color: #1a1a2e; line-height: 1; }
.admin-org-card-stat-label                                { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

.admin-org-card-info                                      { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.admin-org-card-info-row                                  { font-size: 12px; color: #555; line-height: 1.5; word-break: break-word; }
.admin-org-card-info-row + .admin-org-card-info-row       { margin-top: 4px; }
.admin-org-card-info-row .fa                              { width: 14px; color: #888; margin-right: 4px; }
.admin-org-card-info-row a                                { color: #2c5282; text-decoration: none; }
.admin-org-card-info-row a:hover                          { text-decoration: underline; }

.admin-org-card-vendors                                   { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; }
.admin-org-card-vendors-label                             { font-size: 10px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.admin-org-card-vendors-list                              { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.admin-org-card-vendor-chip                               { display: inline-block; padding: 2px 8px; background: #e0ecf8; border-radius: 999px; font-size: 11px; }
.admin-org-card-vendor-chip a                             { color: #2c5282; text-decoration: none; font-weight: 600; }
.admin-org-card-vendor-chip a:hover                       { color: #1a365d; text-decoration: underline; }

.admin-org-card-actions                                   { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; background: #f7f8fa; margin-top: auto; }
.admin-org-card-action                                    { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: #2c5282; background: #ffffff; border: 1px solid #c6d9ec; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; text-decoration: none; }
.admin-org-card-action:hover                              { background: #e0ecf8; color: #1a365d; text-decoration: none; }

/* === User activity (.ua-*) ==========================================
   Two surfaces share this block:
     1. the Users grid cells (status dot + last-active), rendered by
        spa/users/config.js formatters straight into slickgrid; and
     2. the Activity tab of the user-details modal, which Bootstrap
        appends to <body> - so nothing here may be scoped under
        .admin-spa-*, or the modal would lose every style.
   Deliberately no <label> elements anywhere in this feature: a global
   `label { display: block !important }` in the core stylesheet defeats
   both inline display and non-important rules on them. See
   .claude/rules/jquery-hide-does-not-work-on-a-label.md */

/* ---- Grid cells ---- */
.ua-muted                         { color: #bbb; }
.ua-status                        { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ua-status-label                  { font-size: 11px; color: #555; }
.ua-dot                           { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c8ccd2; flex: 0 0 9px; }
.ua-dot-online                    { background: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,0.16); }
.ua-dot-away                      { background: #e0a800; box-shadow: 0 0 0 3px rgba(224,168,0,0.16); }
.ua-dot-offline                   { background: #c8ccd2; }
.ua-last-active                   { font-size: 11px; color: #555; white-space: nowrap; }

/* ---- Activity tab shell ---- */
.ua-activity                      { font-size: 13px; color: #333; }

.ua-toolbar                       { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ua-toolbar-label                 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #333; }
.ua-range                         { margin-left: auto; display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
.ua-range-btn                     { border: none; background: transparent; color: #888; padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ua-range-btn:hover               { color: #555; background: #e8e8e8; }
.ua-range-btn.active              { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ---- Panels (loading / empty / error) ---- */
.ua-panel                         { padding: 28px 24px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; text-align: center; color: #555; }
.ua-panel-loading                 { color: #888; font-size: 13px; }
.ua-panel-loading .fa-spinner     { color: #2c5282; margin-right: 6px; }
.ua-panel-icon                    { font-size: 22px; color: #c6d9ec; }
.ua-panel-title                   { margin-top: 8px; font-size: 14px; font-weight: 600; color: #333; }
.ua-panel-text                    { margin-top: 6px; font-size: 12px; color: #888; }
.ua-panel-text a                  { color: #2c5282; text-decoration: none; }
.ua-panel-text a:hover            { text-decoration: underline; }
.ua-empty-inline                  { padding: 14px 0; font-size: 12px; color: #999; }

/* ---- Summary cards ---- */
.ua-cards                         { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.ua-card                          { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; min-width: 0; transition: box-shadow 0.2s ease; }
.ua-card:hover                    { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ua-card-icon                     { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ua-card-icon-blue                { background: #e0ecf8; color: #2c5282; }
.ua-card-icon-green               { background: #d4edda; color: #155724; }
.ua-card-icon-teal                { background: #d1ecf1; color: #0c5460; }
.ua-card-icon-purple              { background: #e8daef; color: #6c3483; }
.ua-card-body                     { min-width: 0; }
.ua-card-label                    { font-size: 11px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
.ua-card-value                    { margin-top: 2px; font-size: 18px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-card-value-sm                 { font-size: 14px; }

/* ---- Sections ---- */
.ua-section                       { margin-top: 20px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.ua-section:first-child           { margin-top: 0; padding-top: 0; border-top: 0; }
.ua-section-title                 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #333; margin-bottom: 10px; }
.ua-section-note                  { margin-left: 8px; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #888; }
.ua-note                          { margin-top: 8px; padding: 8px 10px; background: #fff7e6; color: #856404; border-radius: 6px; font-size: 11px; }
.ua-note .fa                      { margin-right: 4px; }

/* ---- Heatmap ---- */
.ua-heatmap-host                  { overflow-x: auto; }
.ua-heatmap                       { display: block; width: 100%; min-width: 520px; height: auto; }
.ua-heatmap-cell                  { stroke: #fff; stroke-width: 1; }
.ua-heatmap-cell.is-empty         { stroke: #fafbfc; }
.ua-heatmap-day,
.ua-heatmap-hour                  { font-size: 9px; fill: #888; }

/* ---- Application bars ---- */
.ua-bars                          { display: flex; flex-direction: column; gap: 8px; }
.ua-bar-row                       { display: flex; align-items: center; gap: 10px; }
.ua-bar-label                     { flex: 0 0 130px; font-size: 12px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-bar-track                     { flex: 1 1 auto; height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.ua-bar-fill                      { height: 100%; background: #2c5282; border-radius: 4px; transition: width 0.3s ease; }
.ua-bar-value                     { flex: 0 0 110px; text-align: right; font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; }
.ua-bar-sub                       { margin-left: 6px; font-weight: 500; color: #999; }

/* ---- Tables ---- */
.ua-table                         { width: 100%; border-collapse: collapse; font-size: 12px; }
.ua-table thead th                { padding: 6px 10px; text-align: left; background: #f7f8fa; border-bottom: 2px solid #e0e0e0; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.3px; font-size: 11px; }
.ua-table tbody td                { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; color: #333; vertical-align: middle; }
.ua-table tbody tr:hover td       { background: #fafbfd; }
.ua-table .ua-num                 { text-align: right; font-variant-numeric: tabular-nums; }
.ua-truncate                      { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Recent operations feed ---- */
.ua-feed                          { margin-top: 12px; display: flex; flex-direction: column; }
.ua-feed-row                      { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 12px; }
.ua-feed-row:last-child           { border-bottom: 0; }
.ua-feed-type                     { color: #888; flex: 0 0 auto; }
.ua-feed-title                    { flex: 1 1 auto; min-width: 0; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ua-feed-title                   { color: #2c5282; text-decoration: none; }
a.ua-feed-title:hover             { text-decoration: underline; }
.ua-feed-title.is-removed         { color: #999; text-decoration: line-through; }
.ua-feed-when                     { flex: 0 0 auto; color: #999; white-space: nowrap; }
.ua-chip                          { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; background: #f0f0f0; color: #555; flex: 0 0 auto; }
.ua-chip-create                   { background: #d4edda; color: #155724; }
.ua-chip-update                   { background: #e0ecf8; color: #2c5282; }
.ua-chip-delete                   { background: #f8d7da; color: #721c24; }
.ua-chip-removed                  { background: #f8d7da; color: #721c24; }

@media (max-width: 700px) {
    .ua-bar-label                 { flex-basis: 90px; }
    .ua-bar-value                 { flex-basis: 84px; }
}

/* ================= Phase 14b — merged Overview modal (.uad-*) ============= */

/* Asset-count strip under the toolbar; values backfill when the details
   endpoint answers, so the dash placeholder must not jiggle the layout. */
.uad-assets                       { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 2px 2px; }
.uad-asset                        { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; color: #555; }
.uad-asset .fa                    { color: #8a94a6; }
.uad-asset-val                    { font-size: 16px; font-weight: 700; color: #2d3748; min-width: 18px; text-align: right; }
.uad-asset-label                  { color: #98a1b0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }

/* Stacked daily bars (shared renderer: users.Config.stackedDailyBars) */
.uad-stack-host                   { width: 100%; }
.ua-stack-svg                     { width: 100%; height: auto; display: block; }
.ua-stack-axis text               { font-size: 9px; fill: #718096; }
.ua-stack-axis path,
.ua-stack-axis line               { stroke: #cbd5e0; }
.ua-stack-seg:hover               { opacity: 0.85; }
.ua-stack-legend                  { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 2px 0; }
.ua-stack-legend-item             { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #4a5568; }
.ua-stack-legend-dot              { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ================= Phase 14b — Users tab: User Activity pane (.uaa-*) ===== */
.uaa-host                         { padding: 4px 2px; }
.uaa-pane .ua-toolbar             { margin-top: 2px; }
.uaa-loading                      { padding: 28px 4px; color: #999; font-size: 13px; }
.uaa-away-note                    { font-size: 12px; font-weight: 500; color: #98a1b0; }
.uaa-stack-host                   { width: 100%; }
.uaa-table tbody tr               { cursor: pointer; transition: background 0.15s ease; }
.uaa-table tbody tr:hover         { background: #f5f8fc; }
.uaa-user-name                    { font-weight: 600; color: #2c5282; }

/* ── DVFIV-2067 Task 4 — organization Library Access panel ───────────────── */

.admin-org-access-head {
    padding: 0 0 12px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
}
.admin-org-access-sub { font-size: 12px; color: #888; }

.admin-org-access-note {
    display: flex; align-items: flex-start; gap: 8px;
    background: #e0ecf8; color: #2c5282;
    border-radius: 6px; padding: 9px 12px;
    font-size: 12px; line-height: 1.45; margin-bottom: 12px;
}
.admin-org-access-note.is-locked { background: #fef3cd; color: #856404; }
.admin-org-access-note .fa { margin-top: 2px; }

.admin-org-access-lib {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 10px 12px; margin-bottom: 8px;
    transition: box-shadow 0.2s ease;
}
.admin-org-access-lib:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.admin-org-access-lib-main { flex: 1 1 0; min-width: 0; }
.admin-org-access-lib-name { font-size: 13px; font-weight: 600; color: #333; }
.admin-org-access-lib-src {
    font-size: 11px; color: #999; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-org-access-lib-state {
    font-size: 11px; font-weight: 600; margin-top: 4px; color: #155724;
}
.admin-org-access-lib.is-none  .admin-org-access-lib-state { color: #721c24; }
.admin-org-access-lib.is-some  .admin-org-access-lib-state { color: #856404; }
.admin-org-access-lib.is-busy  { opacity: 0.6; pointer-events: none; }

/* Segmented toggle — matches the house pill pattern. */
.admin-org-access-seg {
    display: inline-flex; background: #f0f0f0;
    border-radius: 8px; padding: 3px; gap: 2px; flex: 0 0 auto;
}
.admin-org-access-segbtn {
    border: none; background: transparent; color: #888;
    padding: 5px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.admin-org-access-segbtn:hover:not(:disabled) { color: #555; background: #e8e8e8; }
.admin-org-access-segbtn.is-active {
    background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.admin-org-access-segbtn:disabled { opacity: 0.5; cursor: not-allowed; }

.admin-org-access-entities {
    border: 1px solid #e0e0e0; border-top: none;
    border-radius: 0 0 8px 8px;
    margin: -12px 0 8px 0; padding: 10px 12px; background: #fafafa;
}
.admin-org-access-ent-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.admin-org-access-ent-count { font-size: 11px; color: #888; font-weight: 600; }
.admin-org-access-ent-search {
    flex: 1 1 140px; min-width: 120px;
    border: 1px solid #e0e0e0; border-radius: 4px; padding: 4px 8px; font-size: 12px;
}
.admin-org-access-ent-list { max-height: 260px; overflow-y: auto; }
.admin-org-access-ent {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.admin-org-access-ent:hover { background: #f0f0f0; }
.admin-org-access-ent-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-org-access-empty { font-size: 12px; color: #999; padding: 10px 2px; }

/* ── DVFIV-2067 Task 5 — delete organization panel ───────────────────────── */

.admin-org-popup-link.is-danger { color: #999; }
.admin-org-popup-link.is-danger:hover { color: #721c24; }
.admin-org-card-action.is-danger:hover { color: #721c24; border-color: #f5c6cb; }

.admin-org-del-lead { font-size: 13px; color: #333; margin-bottom: 10px; }
.admin-org-del-count {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: #555; margin-bottom: 6px;
}
.admin-org-del-users { max-height: 150px; overflow-y: auto; margin-bottom: 12px; }

.admin-org-del-choice { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.admin-org-del-option {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    text-align: left; background: #fff; cursor: pointer;
    border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.admin-org-del-option:hover { background: #f7f9fc; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.admin-org-del-option.is-danger:hover { background: #fdf6f6; border-color: #f5c6cb; }
.admin-org-del-option-icon {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #e0ecf8; color: #2c5282;
}
.admin-org-del-option.is-danger .admin-org-del-option-icon { background: #f8d7da; color: #721c24; }
.admin-org-del-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-org-del-option-title { font-size: 13px; font-weight: 600; color: #333; }
.admin-org-del-option-sub { font-size: 11px; color: #888; }

.admin-org-del-residue {
    border-top: 1px solid #e0e0e0; padding-top: 10px; margin-top: 4px;
    font-size: 11px; color: #888; display: flex; flex-direction: column; gap: 4px;
}
.admin-org-del-residue-kept { color: #856404; }

/* Sidebar families. Twenty-three flat pills gave no sense of what belonged with what;
   these group them, with Connectors first because that is what an administrator comes
   here to change most often. */
.admin-spa-family { margin: 0 0 4px 0; }

.admin-spa-family-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #888;
    padding: 12px 10px 5px;
    white-space: nowrap;
}

.admin-spa-family:first-child .admin-spa-family-name,
.admin-spa-pills > li:first-child .admin-spa-family-name { padding-top: 4px; }

.admin-spa-pills-family {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-spa-pills-family li { margin: 0 0 2px 0; }
.admin-spa-pills-family li.admin-spa-search-hidden { display: none; }

/* A heading with nothing left under it after a search is noise. */
.admin-spa-family.admin-spa-search-hidden { display: none; }

/* /stylesheets/home.v2.css */
:root {
    --od-primary:      #2c5282;
    --od-primary-hover:#1e4d8a;
    --od-primary-soft: #e0ecf8;
    --od-bg-soft:      #faf9f8;
    --od-bg-row:       #f3f2f1;
    --od-border:       #edebe9;
    --od-border-strong:#d2d0ce;
    --od-text:         #242424;
    --od-text-soft:    #605e5c;
    --od-text-muted:   #a19f9d;
    --od-folder:       #4a90e2;
    --od-folder-shade: #3478f6;
    --od-shadow-card:  0 2px 8px rgba(0,0,0,0.06);
    --od-shadow-modal: 0 8px 32px rgba(0,0,0,0.18);
}

.home-shell {
    display: flex; flex-direction: column; height: 100vh;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 14px; color: var(--od-text); background: var(--od-bg-soft);
}

/* App bar */
.od-appbar { display: flex; align-items: center; height: 48px; background: var(--od-primary);
    color: #fff; padding: 0 20px; gap: 16px; flex-shrink: 0; }
.od-appbar .od-logo { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; min-width: 120px; }
.od-appbar .od-search { flex: 1; max-width: 480px; position: relative; }
.od-appbar .od-search input { width: 100%; padding: 6px 14px 6px 36px; border: none; border-radius: 4px;
    background: rgba(255,255,255,0.15); color: #fff; font-size: 13px; height: 32px; }
.od-appbar .od-search input::placeholder { color: rgba(255,255,255,0.7); }
.od-appbar .od-search input:focus { background: #fff; color: var(--od-text); outline: 2px solid #fff; }
.od-appbar .od-search .fa-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,0.7); pointer-events: none; }
.od-appbar .od-spacer { flex: 1; }
.od-appbar .od-icon-btn { background: transparent; border: none; color: #fff; padding: 8px; cursor: pointer; border-radius: 4px; }
.od-appbar .od-icon-btn:hover { background: rgba(255,255,255,0.15); }
.od-appbar .od-account { position: relative; display: flex; align-items: center; }
.od-appbar .od-avatar { width: 32px; height: 32px; border-radius: 50%;
    background: #c9a3d9; color: #4b2e5b; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px; cursor: pointer; border: none; padding: 0; line-height: 1;
    position: relative; }
.od-appbar .od-avatar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
.od-appbar .od-avatar-initials { line-height: 1; display: inline-block; transform: translateY(-1px); }
.od-appbar .od-account-caret { position: absolute; right: -6px; bottom: -2px; font-size: 10px;
    background: #fff; color: #4b2e5b; border-radius: 50%; width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.od-account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18); padding: 4px 0; margin: 0; list-style: none;
    z-index: 200; display: none; }
.od-account-menu.visible { display: block; }
.od-account-menu .od-account-header { padding: 10px 16px; border-bottom: 1px solid var(--od-border);
    margin-bottom: 4px; }
.od-account-menu .od-account-name { font-weight: 600; font-size: 13px; color: var(--od-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-account-menu .od-menu-item { padding: 8px 16px; cursor: pointer; font-size: 13px; color: var(--od-text);
    display: flex; align-items: center; gap: 10px; }
.od-account-menu .od-menu-item:hover { background: var(--od-bg-row); }
.od-account-menu .od-menu-item .fa { color: var(--od-text-soft); width: 14px; text-align: center; }
.od-account-menu .od-menu-item:hover .fa { color: var(--od-primary); }
.od-account-menu .od-menu-divider { height: 1px; background: var(--od-border); margin: 4px 0;
    list-style: none; padding: 0; }

/* Command bar */
.od-cmdbar { display: flex; align-items: center; background: #fff; border-bottom: 1px solid var(--od-border);
    padding: 4px 16px; min-height: 44px; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.od-cmdbar .od-cmd { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: transparent; border: none; cursor: pointer; font-size: 13px; color: var(--od-text); border-radius: 4px; }
.od-cmdbar .od-cmd:hover:not(:disabled) { background: var(--od-bg-row); }
.od-cmdbar .od-cmd:disabled { color: var(--od-text-muted); cursor: default; }
.od-cmdbar .od-cmd .fa { color: var(--od-primary); font-size: 14px; }
.od-cmdbar .od-cmd:disabled .fa { color: var(--od-text-muted); }
.od-cmdbar .od-cmd-divider { width: 1px; height: 20px; background: var(--od-border); margin: 0 6px; }
.od-cmdbar .od-cmd-spacer { flex: 1; }
.od-cmdbar .od-cmd-search { display: inline-flex; align-items: center; position: relative;
    width: 260px; max-width: 32vw; margin-right: 12px; }
.od-cmdbar .od-cmd-search .od-cmd-search-icon { position: absolute; left: 10px; color: var(--od-text-muted); font-size: 12px; }
.od-cmdbar .od-cmd-search-input { width: 100%; padding: 6px 30px 6px 28px; border: 1px solid var(--od-border-strong);
    border-radius: 4px; font-size: 13px; font-family: inherit; background: #fff; }
.od-cmdbar .od-cmd-search-input:focus { outline: 2px solid var(--od-primary); border-color: var(--od-primary); }
.od-cmdbar .od-cmd-search-clear { position: absolute; right: 4px; background: transparent; border: none;
    cursor: pointer; color: var(--od-text-muted); padding: 4px 6px; font-size: 11px; }
.od-cmdbar .od-cmd-search-clear:hover { color: var(--od-text); }
.od-cmdbar .od-view-toggle { display: inline-flex; border: 1px solid var(--od-border); border-radius: 4px; overflow: hidden; }
.od-cmdbar .od-view-toggle button { padding: 6px 12px; background: transparent; border: none; cursor: pointer; font-size: 13px; }
.od-cmdbar .od-view-toggle button.active { background: var(--od-bg-row); color: var(--od-primary); }
.od-cmdbar .od-view-toggle button:hover:not(:disabled) { background: var(--od-bg-row); }
.od-cmdbar .od-view-toggle button:disabled { color: var(--od-text-muted); cursor: default; }

/* Body */
.od-body { display: flex; flex: 1; min-height: 0; }

/* Rail */
.od-rail { width: 220px; background: #fff; border-right: 1px solid var(--od-border);
    padding: 12px 0; flex-shrink: 0; overflow-y: auto; }
.od-rail .od-rail-section { padding: 6px 0; }
.od-rail .od-rail-header { font-size: 11px; font-weight: 600; color: var(--od-text-soft);
    text-transform: uppercase; letter-spacing: 0.4px; padding: 6px 16px;
    display: flex; align-items: center; justify-content: space-between; }
.od-rail-fav-clear { background: transparent; border: none; cursor: pointer;
    color: var(--od-text-muted); padding: 2px 4px; font-size: 12px; }
.od-rail-fav-clear:hover { color: #a4262c; }
.od-rail-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer;
    font-size: 14px; color: var(--od-text); border-left: 3px solid transparent; }
.od-rail-item:hover { background: var(--od-bg-row); }
.od-rail-item.active { background: var(--od-bg-row); border-left-color: var(--od-primary); font-weight: 600; }
.od-rail-item .fa { color: var(--od-text-soft); width: 16px; text-align: center; font-size: 14px; }
.od-rail-item.active .fa { color: var(--od-primary); }
.od-rail-tree { padding: 0; list-style: none; margin: 0; }
.od-rail-tree .od-tree-node { display: flex; align-items: center; gap: 6px; padding: 5px 16px 5px 36px;
    cursor: pointer; font-size: 13px; color: var(--od-text); }
.od-rail-tree .od-tree-node:hover { background: var(--od-bg-row); }
.od-rail-tree .od-tree-node.active { background: var(--od-primary-soft); color: var(--od-primary); font-weight: 600; }
.od-rail-tree .od-tree-node.depth-2 { padding-left: 52px; }
.od-rail-tree .od-tree-node.depth-3 { padding-left: 68px; }
.od-rail-tree .od-tree-toggle { color: var(--od-text-soft); width: 10px; font-size: 9px; }
.od-rail-tree .od-tree-icon { color: var(--od-folder); width: 14px; }

/* Flat Favorites list */
.od-rail-favorites { padding: 0; list-style: none; margin: 0; }
.od-rail-favorites .od-fav-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 16px;
    cursor: pointer; font-size: 13px; color: var(--od-text); position: relative; }
.od-rail-favorites .od-fav-item:hover { background: var(--od-bg-row); }
.od-rail-favorites .od-fav-icon { color: var(--od-folder); width: 16px; text-align: center; flex-shrink: 0; }
.od-rail-favorites .od-fav-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-rail-favorites .od-fav-remove { color: var(--od-text-muted); cursor: pointer; padding: 0 4px;
    font-size: 14px; line-height: 1; visibility: hidden; }
.od-rail-favorites .od-fav-item:hover .od-fav-remove { visibility: visible; }
.od-rail-favorites .od-fav-remove:hover { color: #c0392b; }
.od-rail-favorites .od-fav-empty { padding: 12px 16px; font-size: 11px; color: var(--od-text-muted);
    font-style: italic; line-height: 1.4; cursor: default; }
.od-rail-favorites .od-fav-item.tree-node-drophover { background: var(--od-primary-soft); outline: 2px dashed var(--od-primary); }

/* Center */
.od-center, .od-shell-center { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--od-bg-soft); }
.od-breadcrumbs { padding: 12px 24px 8px; font-size: 14px; color: var(--od-text-soft);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.od-breadcrumbs a { color: var(--od-primary); text-decoration: none; cursor: pointer; }
.od-breadcrumbs a:hover { text-decoration: underline; }
.od-breadcrumbs .od-crumb-current { color: var(--od-text); font-weight: 600; }
.od-breadcrumbs .od-crumb-sep { color: var(--od-text-muted); }
.od-main { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }

/* List view */
.od-list { width: 100%; border-collapse: collapse; }
.od-list thead th { text-align: left; font-weight: 600; font-size: 12px; color: var(--od-text-soft);
    padding: 10px 12px; border-bottom: 1px solid var(--od-border); background: var(--od-bg-soft);
    position: sticky; top: 0; z-index: 1; }
.od-list tbody td { padding: 8px 12px; border-bottom: 1px solid var(--od-bg-row); font-size: 13px; color: var(--od-text); }
.od-list tbody tr { cursor: pointer; }
.od-list tbody tr:hover { background: #fff; }
.od-list tbody tr.selected { background: var(--od-primary-soft); }
/* Override the global yellow .selected rule from style.css for anything inside home-shell */
.home-shell .selected,
.home-shell .od-row.selected,
.home-shell .od-tile.selected,
.home-shell .od-list tbody tr.selected,
.home-shell .od-aaw-avail-row.selected,
.home-shell .od-aaw-card.selected,
.home-shell .od-aaw-node.selected,
.home-shell .od-folder-picker .od-pick-node.selected,
.home-shell .od-color-palette .od-swatch.selected,
.home-shell .od-rail-tree .od-tree-node.active { background-color: var(--od-primary-soft, #e0ecf8) !important; color: var(--od-primary, #2c5282) !important; }
.home-shell .od-main { padding: 0; }
.home-shell .od-shell-details { flex-shrink: 0; }
.home-shell .od-shell-details .od-details.collapsed { display: none; }
/* Padding around the center area */
.home-shell .od-shell-center { padding: 12px 20px 16px; }
.home-shell .od-shell-center .od-main { padding-top: 8px; }
/* Hide the tab strip while modal is the open-asset UX */
.home-shell .od-tabstrip { display: none !important; }
.home-shell .od-shell-center .od-tab-content { display: none !important; }
/* Expand spinner aligns with caret */
.od-expand-loading { font-size: 10px; color: var(--od-text-soft, #888); }
/* Asset modal styling */
.od-asset-modal .od-asset-modal-dialog { width: 96vw; max-width: none; margin: 16px auto; }
.od-asset-modal .od-asset-modal-content { height: 92vh; display: flex; flex-direction: column; }
.od-asset-modal .od-asset-modal-body { padding: 0; flex: 1; min-height: 0; overflow: hidden; }
.od-asset-modal .od-asset-iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.od-asset-modal .modal-header { padding: 12px 18px; }
.od-asset-modal .modal-header h4 { display: flex; align-items: center; gap: 8px; margin: 0; }
.od-asset-modal .modal-header h4 .fa { color: var(--od-primary, #2c5282); }
.od-asset-modal .modal-footer { padding: 8px 18px; }
.od-list .od-checkbox { width: 28px; }
.od-list .od-name-cell .od-expand-toggle { color: var(--od-text-soft); cursor: pointer; font-size: 12px;
    width: 14px; text-align: center; flex-shrink: 0; padding: 2px 0;
    border-radius: 2px; transition: background 0.15s ease; }
.od-list .od-name-cell .od-expand-toggle:hover { color: var(--od-primary); background: var(--od-bg-row); }
.od-list .od-name-cell .od-expand-spacer { width: 14px; flex-shrink: 0; }
.od-list .od-name-cell .od-icon { margin-left: 2px; }
.od-list .od-name-cell .od-count-badge { display: inline-block; background: var(--od-bg-row);
    color: var(--od-text-soft); font-size: 11px; font-weight: 500; padding: 1px 8px;
    border-radius: 10px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.od-list .od-name { cursor: text; }
.od-list .od-row[data-is-container="1"] .od-name { color: var(--od-primary); cursor: pointer; }
.od-list .od-row[data-is-container="1"] .od-name:hover { text-decoration: underline; }
.od-list .od-row-tags { display: inline-flex; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
.od-list .od-tag-chip { display: inline-block; background: var(--od-primary-soft); color: var(--od-primary);
    font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 8px; }
.od-list .od-tag-chip.od-tag-extra { background: var(--od-bg-row); color: var(--od-text-soft); }
.od-list tbody tr { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

.od-details-contents-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--od-border); border-radius: 4px; padding: 4px; background: var(--od-bg-soft); }
.od-details-content-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
    border-radius: 3px; font-size: 12px; cursor: pointer; }
.od-details-content-row:hover { background: #fff; }
.od-details-content-icon { width: 16px; text-align: center; flex-shrink: 0; }
.od-details-content-icon.kind-folder { color: var(--od-folder); }
.od-details-content-icon.kind-program { color: var(--od-primary); }
.od-details-content-icon.kind-project { color: #6c3483; }
.od-details-content-icon.kind-simulation { color: #d46b08; }
.od-details-content-icon.kind-physicaltest, .od-details-content-icon.kind-material { color: #155724; }
.od-details-content-icon.kind-assembly { color: #856404; }
.od-details-content-icon.kind-systemmodel { color: #4a4a4a; }
.od-details-content-icon.kind-dataset { color: var(--od-primary); }
.od-details-content-icon.kind-link { color: #6c757d; }
.od-details-content-name { color: var(--od-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-details-empty { padding: 6px 8px; color: var(--od-text-soft); font-size: 12px; }

/* Tile view */
.od-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 4px; }
.od-tile { background: #fff; border: 1px solid var(--od-border); border-radius: 6px; padding: 12px;
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; user-select: none; }
.od-tile:hover { border-color: var(--od-primary); box-shadow: var(--od-shadow-card); }
.od-tile.selected { border-color: var(--od-primary); background: var(--od-primary-soft); }
.od-tile-thumb { height: 96px; background: var(--od-bg-soft); border-radius: 4px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 44px; overflow: hidden; }
.od-tile-thumb img { width: 100%; height: 100%; object-fit: cover; }
.od-tile-thumb.kind-folder { color: var(--od-folder); }
.od-tile-thumb.kind-program { color: var(--od-primary); }
.od-tile-thumb.kind-project { color: #6c3483; }
.od-tile-thumb.kind-simulation { color: #d46b08; }
.od-tile-thumb.kind-physicaltest, .od-tile-thumb.kind-material { color: #155724; }
.od-tile-thumb.kind-assembly { color: #856404; }
.od-tile-thumb.kind-systemmodel { color: #4a4a4a; }
.od-tile-thumb.kind-dataset { color: var(--od-primary); }
.od-tile-thumb.kind-workflow { color: #4b2e83; }
.od-tile-thumb.kind-study { color: #607d8b; }
.od-tile-thumb.kind-responsetemplate { color: var(--od-primary); }
.od-tile-thumb.kind-link { color: #6c757d; }
.od-tile-name { font-weight: 600; font-size: 13px; color: var(--od-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-tile-meta { font-size: 11px; color: var(--od-text-soft); margin-top: 3px; }
.od-tile-tags { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }

/* Carousel view */
.od-carousel { display: flex; gap: 12px; padding: 4px 4px 12px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.od-carousel .od-tile { flex: 0 0 200px; scroll-snap-align: start; }

/* Group view */
.od-list .od-group-header td { background: var(--od-bg-soft); padding: 12px 12px 6px;
    border-bottom: 1px solid var(--od-border); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--od-text-soft); }
.od-list .od-group-header .fa { margin-right: 6px; color: var(--od-folder); }
.od-list .od-group-count { background: var(--od-bg-row); color: var(--od-text-soft);
    padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 500;
    text-transform: none; letter-spacing: 0; margin-left: 8px; font-variant-numeric: tabular-nums; }

/* Row context menu */
.od-context-menu { position: fixed; z-index: 9999; min-width: 200px; padding: 4px 0; margin: 0;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 8px;
    box-shadow: var(--od-shadow-modal); list-style: none; font-size: 13px;
    max-height: calc(100vh - 24px); overflow-y: auto; }
.od-context-menu li { padding: 7px 14px; cursor: pointer; color: var(--od-text);
    display: flex; align-items: center; gap: 10px; transition: background 0.12s ease; }
.od-context-menu li:hover { background: var(--od-bg-row); }
.od-context-menu li .fa { color: var(--od-text-soft); width: 14px; text-align: center; }
.od-context-menu li:hover .fa { color: var(--od-primary); }
.od-context-menu li.ctx-divider { padding: 0; height: 1px; background: var(--od-border); margin: 4px 0;
    cursor: default; pointer-events: none; }
.od-context-menu li.ctx-danger { color: #a4262c; }
.od-context-menu li.ctx-danger:hover { background: #fde7e9; }
.od-context-menu li.ctx-danger .fa { color: #a4262c; }
.od-context-menu li.ctx-danger:hover .fa { color: #a4262c; }
.od-context-menu.od-add-menu { min-width: 240px; }

/* Add-asset wizard — d3VIEW GenericModalView body */
.od-aaw-body { padding: 4px 0; }
.od-aaw-field { margin-bottom: 16px; }
.od-aaw-field:last-child { margin-bottom: 0; }
.od-aaw-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px; color: #605e5c; margin-bottom: 6px; }
.od-aaw-hint { font-size: 11px; color: #888; margin: 6px 0 0; }
.od-aaw-pulled-list { list-style: none; padding: 6px; margin: 0; min-height: 60px;
    border: 1px solid #d2d0ce; border-radius: 4px; background: #faf9f8; max-height: 240px; overflow-y: auto; }
.od-aaw-pulled-empty { color: #888; font-size: 12px; padding: 8px; text-align: center; }
.od-aaw-pulled-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: #fff; border: 1px solid #edebe9; border-radius: 4px; margin-bottom: 4px; font-size: 13px; }
.od-aaw-pulled-row:last-child { margin-bottom: 0; }
.od-aaw-pulled-icon { width: 14px; text-align: center; flex-shrink: 0; }
.od-aaw-pulled-icon.kind-simulation { color: #d46b08; }
.od-aaw-pulled-icon.kind-physicaltest, .od-aaw-pulled-icon.kind-material { color: #155724; }
.od-aaw-pulled-icon.kind-assembly { color: #856404; }
.od-aaw-pulled-icon.kind-systemmodel { color: #4a4a4a; }
.od-aaw-pulled-icon.kind-dataset, .od-aaw-pulled-icon.kind-responsetemplate { color: #2c5282; }
.od-aaw-pulled-icon.kind-workflow { color: #4b2e83; }
.od-aaw-pulled-icon.kind-study { color: #607d8b; }
.od-aaw-pulled-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-aaw-pulled-meta { font-size: 11px; color: #888; }
.od-aaw-pulled-remove { background: transparent; border: none; cursor: pointer; padding: 4px 8px;
    border-radius: 50%; color: #888; font-size: 12px; }
.od-aaw-pulled-remove:hover { background: #f3f2f1; color: #a4262c; }
.od-aaw-opt { display: inline-flex; align-items: center; gap: 8px; }
.od-aaw-opt-icon { width: 14px; text-align: center; }
.od-aaw-opt-icon.kind-simulation { color: #d46b08; }
.od-aaw-opt-icon.kind-physicaltest, .od-aaw-opt-icon.kind-material { color: #155724; }
.od-aaw-opt-icon.kind-assembly { color: #856404; }
.od-aaw-opt-icon.kind-systemmodel { color: #4a4a4a; }
.od-aaw-opt-icon.kind-dataset, .od-aaw-opt-icon.kind-responsetemplate { color: #2c5282; }
.od-aaw-opt-icon.kind-workflow { color: #4b2e83; }
.od-aaw-opt-icon.kind-study { color: #607d8b; }
.od-aaw-opt-meta { font-size: 11px; color: #888; margin-left: auto; }

/* Destination dropdown + overlay */
.od-aaw-dest-row { display: flex; gap: 6px; align-items: stretch; }
.od-aaw-dest-row .od-aaw-dest-select { flex: 1; }
.od-aaw-dest-pick-btn { padding: 6px 12px; background: #fff; border: 1px solid #d2d0ce; border-radius: 4px;
    cursor: pointer; color: #2c5282; }
.od-aaw-dest-pick-btn:hover { background: #f3f2f1; }
.od-aaw-dest-overlay { position: relative; margin-top: 6px; border: 1px solid #d2d0ce; border-radius: 4px;
    background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; z-index: 100; }
.od-aaw-dest-overlay-head { padding: 8px 12px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px; color: #605e5c; border-bottom: 1px solid #edebe9;
    background: #faf9f8; }
.od-aaw-dest-tree { padding: 4px; }
.od-aaw-tree-node { padding: 6px 10px; cursor: pointer; border-radius: 3px; font-size: 13px;
    display: flex; align-items: center; gap: 8px; color: #242424; }
.od-aaw-tree-node:hover { background: #f0f4fa; color: #2c5282; }
.od-aaw-tree-node .fa { color: #4a90e2; width: 14px; }
.od-aaw-tree-node.depth-2 { padding-left: 26px; }
.od-aaw-tree-node.depth-3 { padding-left: 42px; }
.od-aaw-tree-node.depth-4 { padding-left: 58px; }
.od-aaw-tree-node.depth-5 { padding-left: 74px; }

/* Available assets list */
.od-aaw-avail-count { font-size: 11px; font-weight: normal; color: #888; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.od-aaw-avail-list { list-style: none; padding: 4px; margin: 0; max-height: 280px; overflow-y: auto;
    border: 1px solid #d2d0ce; border-radius: 4px; background: #faf9f8; }
.od-aaw-avail-empty { padding: 12px; color: #888; font-size: 12px; text-align: center; }
.od-aaw-avail-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px;
    cursor: pointer; font-size: 13px; background: #fff; margin-bottom: 3px; border: 1px solid #edebe9; position: relative; }
.od-aaw-avail-row:last-child { margin-bottom: 0; }
.od-aaw-avail-row:hover { border-color: #2c5282; }
.od-aaw-avail-row.selected { background: #e0ecf8; border-color: #2c5282; }
.od-aaw-avail-icon { width: 14px; text-align: center; flex-shrink: 0; }
.od-aaw-avail-icon.kind-simulation { color: #d46b08; }
.od-aaw-avail-icon.kind-physicaltest, .od-aaw-avail-icon.kind-material { color: #155724; }
.od-aaw-avail-icon.kind-assembly { color: #856404; }
.od-aaw-avail-icon.kind-systemmodel { color: #4a4a4a; }
.od-aaw-avail-icon.kind-dataset, .od-aaw-avail-icon.kind-responsetemplate { color: #2c5282; }
.od-aaw-avail-icon.kind-workflow { color: #4b2e83; }
.od-aaw-avail-icon.kind-study { color: #607d8b; }
.od-aaw-avail-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-aaw-avail-meta { font-size: 11px; color: #888; }
.od-aaw-avail-tick { color: #2c5282; }

/* All view */
.od-all-view { padding: 8px 0; }
.od-all-header { margin-bottom: 16px; }
.od-all-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--od-text); }
.od-all-count { font-size: 13px; font-weight: 400; color: var(--od-text-soft); margin-left: 8px; }
.od-all-subtitle { font-size: 13px; color: var(--od-text-soft); margin: 4px 0 0; }
.od-all-toolbar { margin-bottom: 12px; }
.od-all-search-wrap { display: flex; align-items: stretch; border: 1px solid var(--od-border-strong);
    border-radius: 6px; background: #fff; max-width: 720px; overflow: hidden; }
.od-all-search-wrap:focus-within { border-color: var(--od-primary); box-shadow: 0 0 0 2px rgba(44,82,130,0.15); }
.od-all-kind-prepend { border: none; border-right: 1px solid var(--od-border); background: var(--od-bg-soft);
    color: var(--od-text); font-size: 13px; padding: 0 12px; font-weight: 500; outline: none;
    min-width: 160px; cursor: pointer; }
.od-all-kind-prepend:hover { background: var(--od-bg-row); }
.od-all-search { flex: 1; border: none; padding: 8px 12px; font-size: 13px; outline: none; font-family: inherit; }
.od-all-filter-btn { background: transparent; border: none; border-left: 1px solid var(--od-border);
    padding: 0 14px; cursor: pointer; color: var(--od-primary); display: inline-flex; align-items: center;
    gap: 6px; font-size: 13px; }
.od-all-filter-btn:hover { background: var(--od-bg-row); }
.od-all-filter-count { font-size: 11px; color: var(--od-primary); font-weight: 500; }
.od-all-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.od-all-filter-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* All-view filter drawer (right side, non-modal, slide-in) */
.od-all-filter-drawer { position: fixed; top: 92px; right: 0; bottom: 0; width: 360px; z-index: 100;
    background: #fff; border-left: 1px solid var(--od-border); box-shadow: -8px 0 24px rgba(0,0,0,0.10);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); }
.od-all-filter-drawer.open { transform: translateX(0); }
.od-all-filter-drawer-head { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--od-border); flex-shrink: 0; }
.od-all-filter-drawer-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--od-text);
    display: flex; align-items: center; gap: 8px; }
.od-all-filter-drawer-kind { color: var(--od-text-soft); font-weight: 400; font-size: 13px; }
.od-all-filter-close { background: transparent; border: none; cursor: pointer; color: var(--od-text-soft);
    padding: 6px; font-size: 14px; border-radius: 4px; }
.od-all-filter-close:hover { background: var(--od-bg-row); color: var(--od-text); }
.od-all-filter-drawer-body { flex: 1 1 auto; overflow: hidden; padding: 16px 20px;
    display: flex; flex-direction: column; min-height: 0; }
.od-all-filter-drawer-body .od-aaw-filter-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.od-all-filter-drawer-body .od-all-filter-grid { display: flex; flex: 1 1 auto; min-height: 0; }
.od-all-filter-drawer-body .od-all-filter-grid > .d3view-filters-container { flex: 1 1 auto; height: 100%; min-height: 0; }
.od-all-filter-drawer-body .od-all-filter-grid .d3view-filters-iv { height: 100%; }
.od-all-filter-drawer-body .od-all-filter-grid .filters-list { height: 100%; overflow: hidden; }
.od-all-filter-drawer-body .od-all-filter-grid div.d3view-filters-container div.filters-list[data-groupsviewtype="accordion"] ul.filter-items,
.od-all-filter-drawer-body .od-all-filter-grid div.d3view-filters-container ul.filter-items { max-height: none !important;
    height: 100%; overflow-y: auto; padding: 4px 0; }

/* Each filter row: full width, vertically centered, no click-collapse */
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item { display: block !important; width: 100%;
    padding: 8px 12px; margin: 0; border-radius: 6px; transition: background 0.12s ease; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item:hover { background: #d6e6fb; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item.active,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item:focus-within { background: #c9defa; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item > a { display: flex !important;
    align-items: center; justify-content: flex-start; gap: 8px;
    padding: 0 0 6px 0; margin: 0 !important; pointer-events: none; cursor: default; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-left { display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-name { font-size: 12px;
    color: var(--od-text-soft, #6b7280); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
    margin: 0 !important; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .sortable-handle,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-stat,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .remove-filter,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-operators-dropdown { display: none !important; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-container { display: block !important;
    width: 100% !important; padding: 0 !important; margin: 0 !important; }
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-container > .select2-container,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-container > input[type="text"],
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-container > input.typeahead,
.od-all-filter-drawer-body .od-all-filter-grid li.filter-item .filter-item-container > .input-group { width: 100% !important; }
.od-all-filter-drawer-foot { padding: 12px 20px; border-top: 1px solid var(--od-border);
    display: flex; gap: 8px; justify-content: space-between; flex-shrink: 0; background: var(--od-bg-soft); }
.od-all-filter-drawer-foot .btn { padding: 6px 14px; font-size: 13px; }
.od-all-bulkbar { display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; margin: 8px 0 6px; background: var(--od-primary-soft, #e0ecf8);
    border: 1px solid var(--od-primary, #2c5282); border-radius: 6px; }
.od-all-bulkbar .od-all-bulk-count { font-size: 13px; color: var(--od-primary, #2c5282); font-weight: 600; }
.od-all-bulkbar .od-all-bulk-actions { display: flex; gap: 6px; }
.od-all-select-cell { text-align: center; }
.od-all-row.od-all-row-selected td { background: var(--od-primary-soft, #e0ecf8); }
/* OneDrive-like skeleton placeholders */
@keyframes odSkelShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.od-skeleton { padding: 16px 12px; }
.od-skel-block { display: inline-block; height: 12px; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, #eef0f3 0px, #f6f7f8 200px, #eef0f3 400px);
    background-size: 800px 100%;
    animation: odSkelShimmer 1.2s linear infinite; }
.od-skel-icon { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle;
    background: linear-gradient(90deg, #e9ecef 0px, #f1f3f5 200px, #e9ecef 400px);
    background-size: 800px 100%;
    animation: odSkelShimmer 1.2s linear infinite; }
.od-skel-w-60   { width: 60px; }
.od-skel-w-80   { width: 80px; }
.od-skel-w-90   { width: 90px; }
.od-skel-w-100  { width: 100px; }
.od-skel-w-120  { width: 120px; }
.od-skel-w-200  { width: 200px; }
.od-skel-w-name { width: 240px; max-width: 35%; }
.od-skel-right  { float: right; }
.od-skeleton-toolbar { padding: 8px 8px 16px; border-bottom: 1px solid var(--od-border, #ececec); margin-bottom: 8px; }
.od-skel-row { display: grid; grid-template-columns: 28px 1fr 80px 100px 110px 100px; gap: 12px;
    align-items: center; padding: 10px 8px; border-bottom: 1px solid #f3f4f6; }
.od-skeleton-rail { padding: 12px 8px; }
.od-skel-rail-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.od-skel-rail-sep  { height: 1px; background: var(--od-border, #ececec); margin: 10px 8px; }
.od-skeleton-cmdbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.home-shell-bootstub .od-shell-cmdbar { border-bottom: 1px solid var(--od-border, #ececec); }
.home-shell-bootstub .od-shell-rail { border-right: 1px solid var(--od-border, #ececec); }

/* Outlook-style asset tab strip pinned at the bottom */
.home-shell { display: flex; flex-direction: column; height: 100vh; }
.home-shell .od-body { flex: 1 1 auto; min-height: 0; }
.od-shell-center { display: flex; flex-direction: column; min-height: 0; }
.od-shell-center .od-main { flex: 1 1 auto; min-height: 0; overflow: auto; }
.od-shell-center .od-tab-content { display: none; flex: 1 1 auto; min-height: 0; }
.od-shell-center .od-tab-content.active { display: flex; flex-direction: column; }
.od-shell-center .od-tab-content iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #fff; }
.od-shell-center.tab-mode .od-main { display: none; }
.od-shell-center.tab-mode .od-breadcrumbs { display: none; }
.home-shell.tab-mode .od-shell-rail { display: none; }
.home-shell.tab-mode .od-shell-details { display: none; }
.home-shell.tab-mode .od-shell-cmdbar { display: none; }

.od-tabstrip { flex: 0 0 auto; min-height: 36px; max-height: 40px;
    background: var(--od-bg-soft, #f5f6f8); border-top: 1px solid var(--od-border, #e0e0e0);
    padding: 4px 12px; display: flex; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden; }
.od-tabstrip-empty { color: var(--od-text-soft, #888); font-size: 12px; font-style: italic; }
.od-tabstrip-row { display: flex; align-items: center; gap: 4px; }
.od-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; max-width: 200px;
    border: 1px solid var(--od-border, #e0e0e0); background: #fff; color: var(--od-text, #333);
    border-radius: 4px 4px 0 0; font-size: 12px; cursor: pointer; transition: background 0.12s ease; }
.od-tab:hover { background: #eef0f3; }
.od-tab.active { background: #fff; border-bottom-color: #fff; border-top: 2px solid var(--od-primary, #2c5282);
    padding-top: 4px; font-weight: 600; }
.od-tab-home { padding: 5px 10px; }
.od-tab .od-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.od-tab .od-tab-close { margin-left: 4px; color: var(--od-text-soft, #888); cursor: pointer; padding: 0 4px;
    border-radius: 2px; font-size: 14px; line-height: 1; }
.od-tab .od-tab-close:hover { color: #c0392b; background: #ffeae6; }

.od-all-list { width: 100%; }
.od-all-empty { padding: 24px 12px !important; text-align: center; color: var(--od-text-soft); }
.od-all-attached { color: var(--od-primary); font-size: 14px; }
.od-all-in-tree { font-size: 11px; color: var(--od-text-soft); font-style: italic; }
.od-all-attach-here-btn { font-size: 11px; padding: 4px 10px; background: var(--od-primary-soft);
    color: var(--od-primary); border: 1px solid var(--od-primary); border-radius: 4px; cursor: pointer; }
.od-all-attach-here-btn:hover { background: var(--od-primary); color: #fff; }

/* Filter button + panel — filter button inline inside the search input */
.od-aaw-search-wrap { position: relative; margin-bottom: 6px; }
.od-aaw-search-wrap .od-aaw-avail-search { width: 100%; padding-right: 64px; box-sizing: border-box; }
.od-aaw-filter-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    padding: 4px 10px; background: transparent; border: none; border-left: 1px solid #d2d0ce;
    cursor: pointer; color: #2c5282; display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
    height: 26px; border-radius: 0; }
.od-aaw-filter-btn:hover:not(:disabled) { background: #f3f2f1; }
.od-aaw-filter-btn:disabled { color: #a19f9d; cursor: default; }
.od-aaw-filter-count { font-size: 11px; color: #2c5282; font-weight: 500; }
.od-aaw-filter-panel { border: 1px solid #d2d0ce; border-radius: 4px; background: #fff;
    padding: 12px; margin-bottom: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.od-aaw-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 10px; }
.od-aaw-filter-row { display: flex; flex-direction: column; gap: 4px; }
.od-aaw-filter-label { font-size: 11px; color: #605e5c; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px; }
.od-aaw-filter-label .fa { color: #2c5282; width: 12px; }
.od-aaw-filter-input { padding: 5px 8px; font-size: 12px; border: 1px solid #d2d0ce; border-radius: 4px;
    width: 100%; box-sizing: border-box; font-family: inherit; }
.od-aaw-filter-input:focus { outline: 2px solid #2c5282; border-color: #2c5282; }
.od-aaw-filter-empty { grid-column: 1 / -1; color: #888; font-size: 12px; text-align: center; padding: 12px; }
.od-aaw-filter-actions { display: flex; gap: 6px; justify-content: flex-end; }
.od-aaw-filter-actions button { padding: 5px 14px; font-size: 12px; border-radius: 4px; }

/* Add-asset wizard (sidebar) */
.od-aaw { display: flex; flex-direction: column; }
.od-aaw-block { border-bottom: 1px solid var(--od-border); padding: 0; }
.od-aaw-block[open] .od-aaw-chev { transform: rotate(180deg); }
.od-aaw-block-head { display: flex; align-items: center; gap: 10px; padding: 14px 24px;
    cursor: pointer; list-style: none; user-select: none; }
.od-aaw-block-head.static { cursor: default; }
.od-aaw-block-head::-webkit-details-marker { display: none; }
.od-aaw-block-head:hover:not(.static) { background: var(--od-bg-soft); }
.od-aaw-block-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--od-text-soft); flex-shrink: 0; }
.od-aaw-block-value { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--od-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; text-align: right; }
.od-aaw-chev { color: var(--od-text-muted); font-size: 11px; transition: transform 0.18s ease; margin-left: 8px; }
.od-aaw-block-body { padding: 0 24px 14px; }
.od-aaw-block-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.od-aaw-block-chips { background: var(--od-bg-soft); }

/* Destination tree */
.od-aaw-tree { max-height: 220px; overflow-y: auto; border: 1px solid var(--od-border);
    border-radius: 6px; padding: 4px; background: #fff; }
.od-aaw-node { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px;
    cursor: pointer; font-size: 13px; color: var(--od-text); }
.od-aaw-node:hover { background: var(--od-bg-row); }
.od-aaw-node.selected { background: var(--od-primary-soft); color: var(--od-primary); font-weight: 600; }
.od-aaw-node.selected .od-aaw-node-icon { color: var(--od-primary); }
.od-aaw-node-icon { color: var(--od-folder); width: 14px; flex-shrink: 0; }
.od-aaw-node.depth-2 { padding-left: 22px; }
.od-aaw-node.depth-3 { padding-left: 38px; }
.od-aaw-node.depth-4 { padding-left: 54px; }
.od-aaw-node-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kind chips */
.od-aaw-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 14px; }
.od-aaw-kind { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 20px;
    font-size: 12px; cursor: pointer; color: var(--od-text); transition: all 0.12s ease; }
.od-aaw-kind:hover { background: var(--od-bg-row); border-color: var(--od-primary); }
.od-aaw-kind.active { background: var(--od-primary); color: #fff; border-color: var(--od-primary);
    box-shadow: 0 2px 8px rgba(44,82,130,0.25); }
.od-aaw-kind.active .fa { color: #fff; }
.od-aaw-kind .fa { color: var(--od-primary); font-size: 12px; }

/* Search */
.od-aaw-search-wrap { position: relative; margin: 0 24px 12px; }
.od-aaw-search-wrap .fa-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--od-text-muted); font-size: 13px; pointer-events: none; }
.od-aaw-search { width: 100%; padding: 9px 12px 9px 38px; border: 1px solid var(--od-border-strong);
    border-radius: 8px; font-size: 13px; font-family: inherit; box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s; }
.od-aaw-search:focus { outline: none; border-color: var(--od-primary);
    box-shadow: 0 0 0 3px rgba(44,82,130,0.15); }
.od-aaw-search:disabled { background: var(--od-bg-row); color: var(--od-text-muted); cursor: not-allowed; }
.od-aaw-result-count { font-size: 11px; color: var(--od-text-soft); white-space: nowrap; }

/* Result cards */
.od-aaw-asset-list { flex: 1; overflow-y: auto; padding: 0 24px 14px;
    display: flex; flex-direction: column; gap: 6px; }
.od-aaw-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    background: #fff; border: 1px solid var(--od-border); border-radius: 8px; cursor: pointer;
    transition: all 0.12s ease; outline: none; position: relative; }
.od-aaw-card:hover { border-color: var(--od-primary); transform: translateX(-2px);
    box-shadow: 2px 2px 0 var(--od-primary-soft); }
.od-aaw-card.selected { border-color: var(--od-primary); background: var(--od-primary-soft); }
.od-aaw-card-thumb { width: 36px; height: 36px; border-radius: 6px; background: var(--od-bg-soft);
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.od-aaw-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.od-aaw-card-thumb.kind-simulation { color: #d46b08; }
.od-aaw-card-thumb.kind-physicaltest, .od-aaw-card-thumb.kind-material { color: #155724; }
.od-aaw-card-thumb.kind-assembly { color: #856404; }
.od-aaw-card-thumb.kind-systemmodel { color: #4a4a4a; }
.od-aaw-card-thumb.kind-dataset, .od-aaw-card-thumb.kind-responsetemplate { color: var(--od-primary); }
.od-aaw-card-thumb.kind-workflow { color: #4b2e83; }
.od-aaw-card-thumb.kind-study { color: #607d8b; }
.od-aaw-card-body { flex: 1; min-width: 0; }
.od-aaw-card-name { font-weight: 500; font-size: 13px; color: var(--od-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-aaw-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.od-aaw-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10px; font-weight: 500;
    background: var(--od-bg-row); color: var(--od-text-soft); }
.od-aaw-tag.tag-completed { background: #dff6dd; color: #107c10; }
.od-aaw-tag.tag-running { background: #fff4ce; color: #8a6116; }
.od-aaw-tag.tag-failed { background: #fde7e9; color: #a4262c; }
.od-aaw-pill { font-size: 10px; color: var(--od-text-soft); padding: 1px 6px;
    border: 1px solid var(--od-border); border-radius: 4px; background: var(--od-bg-soft); }
.od-aaw-muted { font-size: 11px; color: var(--od-text-muted); }
.od-aaw-card-tick { position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%; background: var(--od-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
.od-aaw-card.selected .od-aaw-card-tick { opacity: 1; }

/* Placeholder + empty */
.od-aaw-placeholder { padding: 32px 16px; text-align: center; color: var(--od-text-soft); }
.od-aaw-placeholder-icon { font-size: 36px; color: var(--od-text-muted); margin-bottom: 12px; display: block; }
.od-aaw-placeholder-title { font-weight: 600; color: var(--od-text); font-size: 13px; margin-bottom: 4px; }
.od-aaw-placeholder-sub { font-size: 12px; color: var(--od-text-soft); }
.od-aaw-empty { padding: 12px; color: var(--od-text-soft); font-size: 12px; text-align: center; }
.od-aaw-empty-tight { padding: 8px; text-align: left; }

/* Selection chips */
.od-aaw-chip-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 14px; }
.od-aaw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 16px;
    font-size: 12px; max-width: 100%; }
.od-aaw-chip-icon { width: 14px; text-align: center; font-size: 11px; }
.od-aaw-chip-icon.kind-simulation { color: #d46b08; }
.od-aaw-chip-icon.kind-physicaltest, .od-aaw-chip-icon.kind-material { color: #155724; }
.od-aaw-chip-icon.kind-assembly { color: #856404; }
.od-aaw-chip-icon.kind-systemmodel { color: #4a4a4a; }
.od-aaw-chip-icon.kind-dataset, .od-aaw-chip-icon.kind-responsetemplate { color: var(--od-primary); }
.od-aaw-chip-icon.kind-workflow { color: #4b2e83; }
.od-aaw-chip-icon.kind-study { color: #607d8b; }
.od-aaw-chip-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-aaw-chip-remove { background: transparent; border: none; cursor: pointer; padding: 2px 6px;
    border-radius: 50%; color: var(--od-text-soft); font-size: 11px; }
.od-aaw-chip-remove:hover { background: var(--od-bg-row); color: #a4262c; }
.od-list .od-name-cell { display: flex; align-items: center; gap: 12px; }
.od-list .od-name-cell .od-icon { width: 22px; height: 22px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 16px; flex-shrink: 0; }
.od-list .od-icon.kind-folder { color: var(--od-folder); }
.od-list .od-icon.kind-program { color: var(--od-primary); }
.od-list .od-icon.kind-project { color: #6c3483; }
.od-list .od-icon.kind-simulation { color: #d46b08; }
.od-list .od-icon.kind-physicaltest { color: #155724; }
.od-list .od-icon.kind-material { color: #0c5460; }
.od-list .od-icon.kind-assembly { color: #856404; }
.od-list .od-icon.kind-systemmodel { color: #4a4a4a; }
.od-list .od-icon.kind-dataset { color: var(--od-primary); }
.od-list .od-icon.kind-link { color: #6c757d; }
.od-list .od-name { font-weight: 500; }
.od-list .od-star { color: var(--od-folder); cursor: pointer; }
.od-list .od-star.unstarred { color: var(--od-text-muted); }
.od-list .od-star.unstarred:hover { color: var(--od-folder); }
.od-list .od-rename-input { width: 100%; padding: 2px 6px; border: 1px solid var(--od-primary);
    border-radius: 3px; font-size: 13px; font-family: inherit; }

/* Drag-drop */
.od-rail-tree .od-tree-node.tree-node-drophover { background: var(--od-primary-soft); outline: 2px dashed var(--od-primary); }
.od-drag-helper { box-shadow: 0 8px 24px rgba(0,0,0,0.15); transform: scale(1.02); opacity: 0.8;
    background: #fff; padding: 6px 10px; border: 1px solid var(--od-border); border-radius: 6px; font-size: 13px; }

/* Details rail */
.od-details { width: 320px; background: #fff; border-left: 1px solid var(--od-border);
    flex-shrink: 0; overflow-y: auto; transition: width 0.2s ease; }
.od-details.collapsed { width: 0; padding: 0; border: none; overflow: hidden; }
.od-details-header { padding: 16px 20px; border-bottom: 1px solid var(--od-border);
    display: flex; align-items: center; justify-content: space-between; }
.od-details-header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.od-details-header .od-close { background: transparent; border: none; cursor: pointer;
    color: var(--od-text-soft); padding: 4px; }
.od-details-body { padding: 16px 20px; }
.od-details-body .od-section { margin-bottom: 24px; }
.od-details-body .od-section h4 { font-size: 11px; font-weight: 600; color: var(--od-text-soft);
    text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 8px; }
.od-details-body .od-prop { display: flex; padding: 6px 0; font-size: 13px; }
.od-details-body .od-prop .od-prop-key { color: var(--od-text-soft); width: 110px; flex-shrink: 0; }
.od-details-body .od-prop .od-prop-val { color: var(--od-text); }
.od-details-body .od-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.od-details-body .od-actions button { padding: 6px 14px; border: 1px solid var(--od-border-strong);
    border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; }
.od-details-body .od-actions button:hover { background: var(--od-bg-row); }
.od-details-body .od-actions .od-primary { background: var(--od-primary); color: #fff; border-color: var(--od-primary); }
.od-details-body .od-actions .od-primary:hover { background: var(--od-primary-hover); }

/* Empty state (replaces old home.empty.tpl) */
.od-empty-state { max-width: 520px; margin: 80px auto; text-align: center; padding: 40px 28px;
    background: #fff; border: 1px solid var(--od-border); border-radius: 12px; box-shadow: var(--od-shadow-card); }
.od-empty-state h2 { color: var(--od-primary); margin: 0 0 12px; font-size: 22px; }
.od-empty-state p { color: var(--od-text-soft); line-height: 1.5; }
.od-empty-state .od-import-btn { background: var(--od-primary); color: #fff; border: none;
    padding: 10px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; margin: 16px 0 8px; }
.od-empty-state .od-import-btn:hover { background: var(--od-primary-hover); }
.od-empty-hint { font-size: 12px; color: var(--od-text-muted); }

/* Modal */
.od-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9000;
    display: flex; align-items: center; justify-content: center; }

/* R0-3602 #2: a plugin embedded inside the OneDrive viewer (DataViewer, Newton,
   etc.) sometimes pops its own Bootstrap modal/popover for confirmations. The
   default Bootstrap z-index (1050) puts them BEHIND the OneDrive backdrop. When
   a viewer modal is open, elevate every Bootstrap-shaped popover above the
   OneDrive layer so the user can actually click them. */
body.od-creator-active .modal,
body.od-creator-active .modal-backdrop,
.od-modal-viewer .modal,
.od-modal-viewer .modal-backdrop,
.od-modal-viewer .popover,
.od-modal-viewer .bootstrap-dialog { z-index: 9500 !important; }
.od-modal { background: #fff; border-radius: 8px; box-shadow: var(--od-shadow-modal);
    min-width: 420px; max-width: 640px; max-height: 80vh; display: flex; flex-direction: column; }
.od-modal.od-modal-viewer { min-width: 80vw; max-width: 95vw; width: 95vw;
    min-height: 70vh; max-height: 92vh; height: 92vh; }
.od-modal.od-modal-viewer .od-modal-body { padding: 0; }
.od-modal.od-modal-viewer .od-viewer-host { width: 100%; height: 100%; min-height: 60vh; overflow: auto; }

.od-creator-layout { display: flex; height: 100%; }
.od-creator-sidebar { width: 100px; flex-shrink: 0; background: var(--od-bg-soft);
    border-right: 1px solid var(--od-border); padding: 8px 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px; }
.od-creator-vchip { display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; padding: 12px 8px; background: transparent; border: none;
    border-left: 3px solid transparent; cursor: pointer; color: var(--od-text);
    transition: background 0.15s ease; }
.od-creator-vchip .fa { font-size: 22px; }
.od-creator-vchip[data-kind="simulation"]   .fa { color: #d46b08; }
.od-creator-vchip[data-kind="physicaltest"] .fa { color: #155724; }
.od-creator-vchip[data-kind="material"]     .fa { color: #0c5460; }
.od-creator-vchip[data-kind="assembly"]     .fa { color: #856404; }
.od-creator-vchip[data-kind="systemmodel"]  .fa { color: #4a4a4a; }
.od-creator-vchip[data-kind="dataset"]      .fa { color: var(--od-primary); }
.od-creator-vchip[data-kind="workflow"]     .fa { color: #4b2e83; }
.od-creator-vchip[data-kind="study"]        .fa { color: #607d8b; }
.od-creator-vchip[data-kind="responsetemplate"] .fa { color: var(--od-primary); }
.od-creator-vchip[data-kind="project"]      .fa { color: #6c3483; }
.od-creator-vchip[data-kind="program"]      .fa { color: var(--od-primary); }
.od-creator-vchip-label { font-size: 11px; text-align: center; line-height: 1.2; word-break: break-word; }
.od-creator-vchip:hover:not(.disabled) { background: rgba(44, 82, 130, 0.06); }
.od-creator-vchip.active { background: var(--od-primary-soft); border-left-color: currentColor; }
.od-creator-vchip[data-kind="simulation"].active   { border-left-color: #d46b08; }
.od-creator-vchip[data-kind="physicaltest"].active { border-left-color: #155724; }
.od-creator-vchip[data-kind="workflow"].active     { border-left-color: #4b2e83; }
.od-creator-vchip.disabled { opacity: 0.4; cursor: default; }
.od-creator-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.od-creator-body { flex: 1; padding: 24px; overflow-y: auto; min-height: 280px; }
.od-creator-dest-wrap { position: relative; display: inline-block; margin-left: 16px; }
.od-creator-dest-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 16px;
    font-size: 12px; cursor: pointer; color: var(--od-text); }
.od-creator-dest-btn .fa { color: var(--od-primary); }
.od-creator-dest-btn:hover { background: var(--od-bg-row); }
.od-creator-dest-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-creator-dest-menu { position: absolute; top: 32px; left: 0; min-width: 280px; max-width: 360px;
    max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--od-border);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 100; padding: 4px 0; }
.od-creator-dest-item { padding: 6px 12px; cursor: pointer; font-size: 13px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.od-creator-dest-item .fa { color: var(--od-folder); margin-right: 6px; }
.od-creator-dest-item:hover { background: var(--od-bg-row); }
.od-creator-dest-item.active { background: var(--od-primary-soft); color: var(--od-primary); }
.od-creator-dest-item.depth-1 { padding-left: 28px; }
.od-creator-dest-item.depth-2 { padding-left: 44px; }
.od-creator-dest-item.depth-3 { padding-left: 60px; }
.od-creator-dest-item.depth-4 { padding-left: 76px; }
.od-creator-dest-item.depth-5 { padding-left: 92px; }
.od-creator-dest-item.depth-6 { padding-left: 108px; }
.od-modal-header h2 { display: inline-block; vertical-align: middle; }
.od-creator-body.od-creator-embed { padding: 0; }
.od-creator-body.od-embed-host > .modal-content { box-shadow: none; border: none; border-radius: 0; }
.od-creator-body.od-embed-host > .modal-content > .modal-header { display: none; }
.od-creator-body.od-embed-host > .modal-content > .modal-body { padding: 16px 24px;
    max-height: none !important; height: auto !important; overflow-y: visible !important; }
.od-creator-body.od-embed-host > .modal-content > .modal-footer { padding: 12px 24px;
    border-top: 1px solid var(--od-border); background: #fff; }
.od-creator-loading { padding: 40px 24px; text-align: center; color: var(--od-text-soft); font-size: 14px; }
.od-creator-loading .fa { margin-right: 8px; }
.od-recycle-header { padding: 8px 16px; display: flex; justify-content: flex-end;
    border-bottom: 1px solid var(--od-border); background: var(--od-bg-soft); }
.od-recycle-empty-btn { padding: 5px 14px; font-size: 13px; }
.od-recycle-empty-btn:hover { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }

.od-rail-pending-badge:empty { display: none; }
.od-rail-pending-badge { display: inline-block; background: #d46b08; color: #fff;
    font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 6px; }

.od-pending-shares { padding: 24px; }
.od-pending-shares-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; color: var(--od-text); }
.od-pending-list { display: flex; flex-direction: column; gap: 6px; }
.od-pending-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: #fff; border: 1px solid var(--od-border); border-radius: 6px; }
.od-pending-icon .fa { color: var(--od-primary); }
.od-pending-name { flex: 0 0 auto; font-weight: 600; }
.od-pending-from { flex: 1; font-size: 12px; color: var(--od-text-soft); }
.od-pending-perm { font-size: 12px; padding: 2px 8px; background: var(--od-bg-row); border-radius: 10px; }
.od-pending-approve, .od-pending-reject { padding: 4px 12px; font-size: 12px; }

.od-share-list { display: flex; flex-direction: column; gap: 4px; }
.od-share-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--od-bg-soft); border-radius: 4px; font-size: 13px; }
.od-share-row-icon .fa { color: var(--od-primary); }
.od-share-row-target { flex: 1; }
.od-share-row-perm { font-size: 11px; color: var(--od-text-soft); }
.od-share-row-status { font-size: 11px; padding: 1px 8px; border-radius: 10px; text-transform: uppercase; }
.od-share-row-status.status-pending  { background: #fff3cd; color: #856404; }
.od-share-row-status.status-approved { background: #d4edda; color: #155724; }
.od-share-row-status.status-revoked, .od-share-row-status.status-rejected { background: #f8d7da; color: #721c24; }
.od-share-copylink, .od-share-revoke { background: transparent; border: none; cursor: pointer; padding: 4px 6px; color: var(--od-text-muted); }
.od-share-copylink:hover { color: var(--od-primary); }
.od-share-revoke:hover { color: #a4262c; }
.od-asset-creator-host, .od-asset-creator-host * { visibility: hidden !important; }
.od-asset-creator-host { position: absolute !important; left: -99999px !important; top: 0 !important;
    width: 1200px !important; height: 800px !important; overflow: hidden !important;
    pointer-events: none !important; }
body.od-creator-active > .modal-backdrop { display: none !important; }
.od-workflow-host { width: 100%; height: 100%; min-height: 60vh; position: relative; }
.od-workflow-host .modal, .od-workflow-host .modal-backdrop { position: static !important; display: block !important; }
.od-creator-placeholder { color: var(--od-text-soft); font-size: 14px; line-height: 1.5; }
.od-creator-placeholder.od-creator-none { color: #a4262c; }
.od-creator-footer { padding: 10px 24px; border-top: 1px solid var(--od-border); color: var(--od-text-soft); font-size: 12px; }
.od-modal-header { padding: 16px 24px; border-bottom: 1px solid var(--od-border);
    display: flex; align-items: center; justify-content: space-between; }
.od-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; }
.od-modal-header .od-close { background: transparent; border: none; cursor: pointer;
    color: var(--od-text-soft); padding: 4px; font-size: 16px; }
.od-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.od-modal-body label { display: block; margin-top: 12px; font-size: 12px; font-weight: 600;
    color: var(--od-text-soft); text-transform: uppercase; letter-spacing: 0.3px; }
.od-modal-body label:first-child { margin-top: 0; }
.od-modal-body input[type=text], .od-modal-body textarea, .od-modal-body select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--od-border-strong); border-radius: 4px;
    font-size: 13px; font-family: inherit; margin-top: 4px; box-sizing: border-box; }
.od-modal-body textarea { min-height: 70px; resize: vertical; }
.od-modal-body input:focus, .od-modal-body textarea:focus, .od-modal-body select:focus {
    outline: 2px solid var(--od-primary); border-color: var(--od-primary); }
.od-modal-footer { padding: 12px 24px; border-top: 1px solid var(--od-border);
    display: flex; gap: 8px; justify-content: flex-end; }
.od-modal-footer button { padding: 8px 18px; border: 1px solid var(--od-border-strong);
    border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; }
.od-modal-footer button:hover { background: var(--od-bg-row); }
.od-modal-footer .od-primary { background: var(--od-primary); color: #fff; border-color: var(--od-primary); }
.od-modal-footer .od-primary:hover { background: var(--od-primary-hover); }
.od-modal-footer .od-primary:disabled { background: var(--od-text-muted); border-color: var(--od-text-muted); cursor: default; }

.od-edit-thumb-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.od-edit-thumb { max-width: 240px; max-height: 160px; border-radius: 8px; border: 1px solid var(--od-border);
    box-shadow: var(--od-shadow-card); object-fit: cover; background: var(--od-bg-soft); }
.od-edit-thumb-fallback { width: 120px; height: 120px; border-radius: 12px; background: var(--od-bg-soft);
    border: 1px solid var(--od-border); display: flex; align-items: center; justify-content: center; font-size: 56px; }
.od-edit-thumb-fallback.kind-folder { color: var(--od-folder); }
.od-edit-thumb-fallback.kind-program { color: var(--od-primary); }
.od-edit-thumb-fallback.kind-project { color: #6c3483; }
.od-edit-thumb-fallback.kind-simulation { color: #d46b08; }
.od-edit-thumb-fallback.kind-physicaltest { color: #155724; }
.od-edit-thumb-fallback.kind-material { color: #0c5460; }
.od-edit-thumb-fallback.kind-assembly { color: #856404; }
.od-edit-thumb-fallback.kind-systemmodel { color: #4a4a4a; }
.od-edit-thumb-fallback.kind-dataset { color: var(--od-primary); }
.od-edit-thumb-fallback.kind-workflow { color: #4b2e83; }
.od-edit-thumb-fallback.kind-study { color: #607d8b; }
.od-edit-thumb-fallback.kind-responsetemplate { color: var(--od-primary); }
.od-edit-thumb-fallback.kind-link { color: #6c757d; }
.od-form-hint { font-size: 12px; color: var(--od-text-soft); margin: 4px 0 0; line-height: 1.4; }
.od-color-palette { display: flex; gap: 6px; margin-top: 6px; }
.od-color-palette .od-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; transition: border-color 0.15s; }
.od-color-palette .od-swatch.selected { border-color: var(--od-text); }

.od-folder-picker { max-height: 320px; overflow-y: auto; border: 1px solid var(--od-border);
    border-radius: 4px; padding: 4px; }
.od-folder-picker .od-pick-node { padding: 6px 10px; cursor: pointer; border-radius: 3px;
    display: flex; align-items: center; gap: 8px; font-size: 13px; }
.od-folder-picker .od-pick-node:hover { background: var(--od-bg-row); }
.od-folder-picker .od-pick-node.selected { background: var(--od-primary-soft); color: var(--od-primary); font-weight: 600; }
.od-folder-picker .od-pick-node .fa { color: var(--od-folder); }
.od-folder-picker .od-pick-node.depth-2 { padding-left: 26px; }
.od-folder-picker .od-pick-node.depth-3 { padding-left: 42px; }

/* Dropdown menu (for + New ▾) */
.od-menu { position: absolute; background: #fff; border: 1px solid var(--od-border-strong);
    border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px 0; min-width: 220px;
    z-index: 200; display: none; }
.od-menu.visible { display: block; }
.od-menu-item { padding: 8px 16px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.od-menu-item:hover { background: var(--od-bg-row); }
.od-menu-item .fa { color: var(--od-primary); width: 14px; text-align: center; }
.od-menu-divider { height: 1px; background: var(--od-border); margin: 4px 0; }

/* Tags / status pills */
.od-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.od-tag.completed { background: #dff6dd; color: #107c10; }
.od-tag.running { background: #fff4ce; color: #8a6116; }
.od-tag.failed { background: #fde7e9; color: #a4262c; }

/* Downloads — cmdbar badge */
.od-downloads-badge { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px;
    text-align: center; border-radius: 9px; background: var(--od-primary); color: #fff; font-size: 11px;
    font-weight: 600; margin-left: 6px; }

/* Downloads — preflight modal */
.od-dl-preflight { width: 460px; max-width: 92vw; }
.od-dl-preflight .od-dl-pre-loading { color: #555; font-size: 13px; padding: 18px 4px; }
.od-dl-preflight .od-dl-pre-stats { padding: 8px 4px 0; }
.od-dl-preflight .od-dl-pre-row { display: flex; justify-content: space-between; padding: 6px 0;
    border-bottom: 1px solid var(--od-border); font-size: 13px; }
.od-dl-preflight .od-dl-pre-row:last-child { border-bottom: 0; }
.od-dl-preflight .od-dl-pre-lbl { color: #888; }
.od-dl-preflight .od-dl-pre-val { color: #222; font-weight: 600; }
.od-dl-preflight .od-dl-pre-warn { margin-top: 12px; padding: 10px 12px; background: #fef3cd;
    color: #856404; border-radius: 6px; font-size: 12px; }

/* Downloads — slide-in panel */
.od-dl-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 1100;
    display: flex; justify-content: flex-end; }
.od-dl-panel { width: 420px; max-width: 92vw; height: 100%; background: #fff; box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; }
.od-dl-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
    border-bottom: 1px solid var(--od-border); }
.od-dl-panel-header h3 { margin: 0; font-size: 14px; font-weight: 600; color: #333; text-transform: uppercase;
    letter-spacing: 0.3px; display: flex; align-items: center; gap: 8px; }
.od-dl-panel-close { background: none; border: none; cursor: pointer; color: #888; font-size: 16px; }
.od-dl-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
.od-dl-panel-empty { color: #888; font-size: 12px; padding: 18px; text-align: center; }
.od-dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.od-dl-row { background: #fff; border: 1px solid var(--od-border); border-radius: 6px; padding: 10px 12px; }
.od-dl-row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.od-dl-row-name { font-weight: 600; color: #333; font-size: 13px; word-break: break-all; }
.od-dl-row-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
    font-weight: 600; text-transform: uppercase; }
.od-dl-pill-pending,
.od-dl-pill-estimating,
.od-dl-pill-running   { background: #fff3cd; color: #856404; }
.od-dl-pill-completed { background: #d4edda; color: #155724; }
.od-dl-pill-failed    { background: #f8d7da; color: #721c24; }
.od-dl-pill-cancelled { background: #e9ecef; color: #555; }
.od-dl-row-progress { margin: 8px 0 6px; }
.od-dl-bar { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; }
.od-dl-bar-fill { height: 100%; background: var(--od-primary); transition: width 0.3s ease; }
.od-dl-row-meta { display: flex; gap: 12px; margin-top: 4px; color: #888; font-size: 11px; }
.od-dl-row-error { margin-top: 4px; color: #721c24; font-size: 11px; }
.od-dl-row-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.od-dl-row-actions .od-btn-sm { padding: 4px 10px; font-size: 12px; }

/* Unified Uploads widget (corner, collapsible) */
.od-up-widget { position: fixed; right: 20px; bottom: 20px; width: 340px; max-width: 90vw;
    background: #fff; border: 1px solid var(--od-border-strong); border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18); z-index: 1200; overflow: hidden; }
.od-up-widget-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
    background: #f9fafb; border-bottom: 1px solid var(--od-border); }
.od-up-widget-icon { color: var(--od-primary); }
.od-up-widget.od-up-active .od-up-widget-icon { animation: od-up-pulse 1.4s ease-in-out infinite; }
@keyframes od-up-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.od-up-widget-title { font-size: 13px; font-weight: 600; color: #333; }
.od-up-widget-summary { flex: 1; font-size: 11px; color: #888; text-align: right; }
.od-up-widget-toggle, .od-up-widget-close { background: none; border: none; cursor: pointer;
    color: #888; font-size: 12px; padding: 2px 4px; }
.od-up-widget-toggle:hover, .od-up-widget-close:hover { color: #333; }
.od-up-widget-progress { height: 3px; background: #e9ecef; }
.od-up-widget-progress-fill { height: 100%; background: var(--od-primary); width: 0;
    transition: width 0.3s ease; }
.od-up-widget.od-up-has-failed .od-up-widget-progress-fill { background: #a4262c; }
.od-up-widget-body { max-height: 320px; overflow-y: auto; padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px; }
.od-up-widget.od-up-collapsed .od-up-widget-body { display: none; }
.od-up-widget .od-ul-list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px; }
.od-up-widget .od-ul-panel-empty { color: #888; font-size: 12px; text-align: center; padding: 12px; }

/* Downloads — loading skeleton */
.od-dl-panel-loading { display: flex; flex-direction: column; gap: 8px; }
.od-dl-skel-row { background: #fff; border: 1px solid var(--od-border); border-radius: 6px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.od-dl-skel { position: relative; overflow: hidden; background: #e9ecef; border-radius: 4px; }
.od-dl-skel::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: od-dl-shimmer 1.2s infinite; }
.od-dl-skel-line { height: 12px; }
.od-dl-skel-line.lg { width: 60%; }
.od-dl-skel-line.sm { width: 35%; height: 10px; }
.od-dl-skel-bar { height: 6px; }
@keyframes od-dl-shimmer { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

/* Assets — row skeletons */
.od-all-skel-row td { padding: 10px 12px; vertical-align: middle; }
.od-all-skel-row .od-skel { position: relative; overflow: hidden; background: #e9ecef; border-radius: 4px;
    display: inline-block; vertical-align: middle; }
.od-all-skel-row .od-skel::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: od-dl-shimmer 1.2s infinite; }
.od-all-skel-row .od-skel-box  { width: 16px; height: 16px; }
.od-all-skel-row .od-skel-icon { width: 18px; height: 18px; border-radius: 4px; margin-right: 8px; }
.od-all-skel-row .od-skel-line { height: 12px; }
.od-all-skel-row .od-skel-w-name { width: 220px; max-width: 60%; }
.od-all-skel-row .od-skel-w-60   { width: 60px; }
.od-all-skel-row .od-skel-w-80   { width: 80px; }
.od-all-skel-row .od-skel-w-100  { width: 100px; }

/* Empty-state cards (Import / Quick start) */
.od-empty-options { display: flex; gap: 16px; margin: 18px 0 12px; flex-wrap: wrap; }
.od-empty-card { flex: 1 1 320px; min-width: 280px; border: 1px solid var(--od-border); border-radius: 8px;
    padding: 14px 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); text-align: left; }
.od-empty-card h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    color: #333; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.od-empty-card h3 .fa { color: var(--od-primary); }
.od-empty-card p { color: #555; font-size: 12px; margin: 0 0 10px; }
.od-empty-card .od-import-btn,
.od-empty-card .od-quick-start-btn { display: inline-block; padding: 6px 14px; background: var(--od-primary);
    color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; margin-top: 6px; }
.od-empty-card .od-import-btn:hover,
.od-empty-card .od-quick-start-btn:hover { background: #1f3f63; }
.od-quick-kinds { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; color: #333; }
.od-quick-kinds label { font-weight: 500; cursor: pointer; }
.od-quick-range { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; color: #333; }
.od-quick-range input[type="number"] { width: 60px; margin: 0 4px; padding: 2px 4px; }
.od-quick-status { margin-top: 8px; font-size: 12px; color: #555; }

/* Assets — pill filter bar */
.od-all-pillbar { display: flex; align-items: center; gap: 6px; padding: 6px 0 10px; flex-wrap: wrap; }
.od-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px;
    border: 1px solid var(--od-border); background: #fff; color: #555; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.od-pill:hover { background: #f0f0f0; color: #333; }
.od-pill.active { background: var(--od-primary); color: #fff; border-color: var(--od-primary); }
.od-pill .fa { font-size: 12px; }
.od-pill-divider { width: 1px; height: 20px; background: var(--od-border); margin: 0 4px; }
.od-pill-more { padding: 4px 8px; border-radius: 16px; border: 1px solid var(--od-border);
    background: #fff; color: #555; font-size: 12px; }
.od-pill-count { background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 6px; font-size: 11px;
    color: inherit; }
.od-pill.active .od-pill-count { background: rgba(255,255,255,0.25); }
.od-all-subpillbar { display: flex; align-items: center; gap: 8px; padding: 4px 0 10px;
    border-top: 1px dashed var(--od-border); }
.od-subpill-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.3px;
    font-weight: 600; }
.od-subpill-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* Upload dropzone */
.od-dropzone { border: 2px dashed #90b4e0; border-radius: 8px; background: #fafcff; padding: 26px 16px;
    text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.od-dropzone:hover,
.od-dropzone:focus { background: #e8f0fe; border-color: var(--od-primary); outline: none; }
.od-dropzone.drag-over { background: #d4e3fb; border-color: var(--od-primary); }
.od-dropzone-icon { font-size: 32px; color: var(--od-primary); margin-bottom: 6px; }
.od-dropzone-title { font-size: 14px; font-weight: 600; color: #333; margin: 4px 0; }
.od-dropzone-hint { font-size: 12px; color: #555; margin: 0; }
.od-dropzone-browse-link { color: var(--od-primary); text-decoration: underline; cursor: pointer; }
.od-dropzone-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
.od-dropzone-actions .od-btn { flex: 1; }

/* New file modal: tab strip (Upload / Author) */
.od-newfile-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e0e0e0; margin: 0 0 14px; }
.od-newfile-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 13px; color: #555; cursor: pointer; }
.od-newfile-tab:hover { color: #333; }
.od-newfile-tab.is-active { color: var(--od-primary); border-bottom-color: var(--od-primary); font-weight: 600; }
.od-newfile-tab i { margin-right: 6px; }

/* Author cards (one per app) */
.od-author-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 10px; }
.od-author-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.od-author-card:hover:not(.is-disabled) { background: #fafcff; border-color: var(--od-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.od-author-card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.od-author-card > i { font-size: 22px; color: var(--od-primary); width: 28px; flex: 0 0 auto; text-align: center; }
.od-author-card > div { display: flex; flex-direction: column; }
.od-author-card strong { font-size: 13px; color: #333; }
.od-author-card span { font-size: 11px; color: #888; }

/* Author editor modal — ACE / textarea host */
.od-aed-header { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 8px; }
.od-aed-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 4px; min-width: 200px; }
.od-aed-mode { font-size: 12px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; }
.od-aed-status { font-size: 11px; color: #888; min-width: 70px; }
.od-aed-host { position: relative; height: 460px; max-height: 60vh; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.od-aed-textarea { width: 100%; height: 100%; resize: none; padding: 10px 12px; border: 0; outline: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
.od-aed-host .ace_editor { width: 100% !important; height: 100% !important; }
.od-uploads-badge { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px;
    text-align: center; border-radius: 9px; background: var(--od-primary); color: #fff; font-size: 11px;
    font-weight: 600; margin-left: 6px; }

/* Tile thumbnail — corner icon badge so the kind is visible even when a thumbnail is shown */
.od-tile-thumb { position: relative; }
.od-tile-badge { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px;
    border-radius: 11px; background: rgba(255,255,255,0.95); color: var(--od-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;
    font-size: 11px; }

/* Assets inline count next to pills */
.od-all-count-inline { color: #888; font-size: 12px; padding-right: 4px; }

/* Sortable list headers */
.od-list thead th.od-sortable { cursor: pointer; user-select: none; }
.od-list thead th.od-sortable:hover { background: var(--od-bg-row); }
.od-list thead .od-sort-ind { margin-left: 4px; color: var(--od-primary); font-weight: 600; }
.od-sort-current-label { color: #888; font-size: 11px; margin-left: 4px; }

/* Breadcrumb icons */
.od-breadcrumbs a .fa, .od-breadcrumbs .od-crumb-current .fa { margin-right: 4px; color: var(--od-primary); }

/* Search result — show containing folder */
.od-row-path { margin-left: 10px; color: #888; font-size: 11px; font-style: italic; }
.od-row-path .fa { margin-right: 3px; color: #888; }
.od-row-path a { color: var(--od-primary); text-decoration: none; }
.od-row-path a:hover { text-decoration: underline; }

/* Share modal — public link options */
.od-share-public-opts { background: #f8f9fa; border: 1px solid var(--od-border); border-radius: 6px;
    padding: 8px 12px; margin-top: 8px; }
.od-share-public-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.od-share-public-row label { width: 110px; color: #555; margin: 0; }
.od-share-public-row select,
.od-share-public-row input { flex: 1; padding: 4px 6px; }

/* Share row meta */
.od-share-row-meta { font-size: 11px; color: #888; flex: 1; padding-left: 8px; }
.od-share-row-expired { color: #a4262c; font-weight: 600; }

/* Context menu — folder color submenu */
.od-context-menu .od-has-submenu { position: relative; }
.od-context-menu .od-submenu-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--od-text-muted); }
.od-context-submenu { display: none; position: absolute; left: 100%; top: -4px; background: #fff;
    border: 1px solid var(--od-border-strong); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px 0; min-width: 160px; list-style: none; margin: 0; z-index: 210; }
.od-context-menu .od-has-submenu:hover .od-context-submenu { display: block; }
.od-color-swatch { padding: 6px 14px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.od-color-swatch:hover { background: var(--od-bg-row); }
.od-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,0.15); }
.od-swatch-none { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #ddd 3px, #ddd 6px); }

/* Link settings modal (OneDrive-style) */
.od-linkset-sub { font-size: 12px; color: #888; margin: 0 0 14px; }
.od-linkset-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    color: #888; margin: 14px 0 6px; }
.od-linkset-scope { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 2px solid var(--od-primary); border-radius: 8px; cursor: default; }
.od-linkset-scope-icon { width: 32px; height: 32px; border-radius: 16px; background: #e0ecf8;
    color: var(--od-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.od-linkset-scope-text { display: flex; flex-direction: column; flex: 1; }
.od-linkset-scope-title { font-size: 13px; font-weight: 600; color: #333; }
.od-linkset-scope-desc { font-size: 11px; color: #888; }
.od-linkset-scope-check { color: var(--od-primary); font-size: 18px; }
.od-linkset-scope-alt { font-size: 11px; color: #888; margin: 6px 2px 0; }
.od-linkset-scope-alt a { color: var(--od-primary); }
.od-linkset-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px;
    border-bottom: 1px solid var(--od-border); }
.od-linkset-row:last-of-type { border-bottom: 0; }
.od-linkset-row-icon { width: 20px; text-align: center; color: #888; flex-shrink: 0; }
.od-linkset-row-label { flex: 1; font-size: 13px; color: #333; }
.od-linkset-row select, .od-linkset-row input { width: 160px; padding: 4px 6px; font-size: 12px; }
.od-linkset-result { margin-top: 14px; }
.od-linkset-link-row { display: flex; gap: 6px; }
.od-linkset-link-input { flex: 1; padding: 6px 8px; font-size: 12px; border: 1px solid var(--od-border-strong);
    border-radius: 4px; background: #f8f9fa; }

.od-iad-locked { overflow: hidden; }
.od-iad-host { position: fixed; inset: 0; z-index: 10000; }
.od-iad-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35);
    opacity: 0; transition: opacity .22s ease; }
.od-iad-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; max-width: 92vw;
    background: #fff; box-shadow: var(--od-shadow-modal); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s ease; }
.od-iad-host.is-open .od-iad-backdrop { opacity: 1; }
.od-iad-host.is-open .od-iad-drawer { transform: translateX(0); }
.od-iad-head { display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 22px 14px; border-bottom: 1px solid var(--od-border); }
.od-iad-title { display: flex; align-items: center; gap: 12px; }
.od-iad-title .fa { font-size: 18px; color: var(--od-primary); }
.od-iad-title h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--od-text); }
.od-iad-dest { margin: 2px 0 0; font-size: 12px; color: var(--od-text-soft); }
.od-iad-close { background: none; border: none; font-size: 24px; line-height: 1;
    color: var(--od-text-soft); cursor: pointer; padding: 0 6px; }
.od-iad-close:hover { color: var(--od-text); }
.od-iad-steps { display: flex; gap: 6px; padding: 12px 22px; border-bottom: 1px solid var(--od-border);
    background: var(--od-bg-soft); font-size: 12px; color: var(--od-text-muted); }
.od-iad-step { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; }
.od-iad-step.is-active { background: var(--od-primary-soft); color: var(--od-primary); }
.od-iad-step-num { display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: var(--od-border-strong);
    color: #fff; font-size: 11px; font-weight: 600; }
.od-iad-step.is-active .od-iad-step-num { background: var(--od-primary); }
.od-iad-body { flex: 1 1 auto; overflow: auto; padding: 16px 22px; }
.od-iad-lede { margin: 0 0 12px; font-size: 13px; color: var(--od-text-soft); }
.od-iad-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.od-iad-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px;
    background: #fff; border: 1px solid var(--od-border); border-radius: 8px; cursor: pointer;
    text-align: left; font-size: 13px; color: var(--od-text); transition: border-color .12s, background .12s; }
.od-iad-kind:hover { border-color: var(--od-primary); background: var(--od-primary-soft); }
.od-iad-kind .fa { font-size: 18px; color: var(--od-primary); }
.od-iad-pick-head { display: flex; gap: 8px; margin-bottom: 12px; }
.od-iad-back { background: none; border: 1px solid var(--od-border-strong); border-radius: 6px;
    padding: 6px 10px; cursor: pointer; color: var(--od-text-soft); }
.od-iad-back:hover { color: var(--od-primary); border-color: var(--od-primary); }
.od-iad-search { flex: 1; padding: 7px 10px; border: 1px solid var(--od-border-strong);
    border-radius: 6px; font-size: 13px; }
.od-iad-list { display: flex; flex-direction: column; gap: 4px; }
.od-iad-loading { padding: 24px 0; text-align: center; color: var(--od-text-muted); }
.od-iad-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 13px; }
.od-iad-row:hover { background: var(--od-bg-row); }
.od-iad-row .fa { color: var(--od-text-soft); }
.od-iad-row-name { flex: 1; color: var(--od-text); }
.od-iad-row-sub { font-size: 11px; color: var(--od-text-muted); }
.od-iad-foot { display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid var(--od-border); background: var(--od-bg-soft); }
.od-iad-cancel, .od-iad-action { padding: 7px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.od-iad-cancel { background: #fff; color: var(--od-text); border: 1px solid var(--od-border-strong); }
.od-iad-cancel:hover { background: var(--od-bg-row); }
.od-iad-action-primary { background: var(--od-primary); color: #fff; border: 1px solid var(--od-primary); }
.od-iad-action-primary:hover:not([disabled]) { background: var(--od-primary-hover); }
.od-iad-action[disabled] { opacity: 0.5; cursor: not-allowed; }

.od-scroll-sentinel { height: 0; border: none; padding: 0; margin: 0; visibility: hidden; }
.od-load-more td { text-align: center; padding: 12px 0; color: #999; font-size: 12px; }
.od-load-more .fa-spinner { margin-right: 6px; }
.od-load-more-click td { text-align: center; padding: 8px 0; }
.od-load-more-click a { color: var(--od-primary, #2c5282); font-size: 12px; cursor: pointer; text-decoration: none; }
.od-load-more-click a:hover { text-decoration: underline; }
.od-pagination-hint { font-size: 11px; color: #999; margin-left: 8px; font-weight: 400; }

/* /stylesheets/files.v2.css */
.fl2 {
    --fl2-text: #1f2630;
    --fl2-soft: #5b6b7b;
    --fl2-muted: #94a0ad;
    --fl2-border: #e6eaf0;
    --fl2-row-hover: #eef2f8;
    --fl2-accent: #2c5282;
    --fl2-accent-soft: #e0ecf8;
    --fl2-accent-strong: #1e4d8a;
    --fl2-bg: #fff;
    position: relative;
    font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--fl2-text);
    width: 100%;
    overflow: hidden;
}

.fl2-list {
    background: var(--fl2-bg);
    border: 1px solid var(--fl2-border);
    border-radius: 10px;
    transition: margin-right .26s ease;
}
.fl2.preview-open .fl2-list { margin-right: 416px; }

.fl2-section {
    padding: 8px 16px 4px;
    color: var(--fl2-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #fbfcfd;
    border-top: 1px solid var(--fl2-border);
}
.fl2-section:first-child { border-top: 0; }

.fl2-row {
    display: grid;
    grid-template-columns: 24px 1fr 120px 96px 116px 116px 152px;
    align-items: center;
    gap: 12px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--fl2-border);
    cursor: pointer;
    position: relative;
}
.fl2-row:hover { background: var(--fl2-row-hover); }
.fl2-row.sel { background: var(--fl2-accent-soft); }
.fl2-row.sel .fl2-name { color: var(--fl2-accent-strong); }

.fl2-cb {
    width: 17px; height: 17px;
    border: 1.5px solid #d6dde6;
    border-radius: 4px;
    background: #fff;
    display: inline-block;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
.fl2-cb:hover { border-color: var(--fl2-accent); }
.fl2-row.sel .fl2-cb { background: var(--fl2-accent); border-color: var(--fl2-accent); position: relative; }
.fl2-row.sel .fl2-cb::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 4px; height: 9px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}
.fl2-type-cell { display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.fl2-type-cell .fl2-ft { width: 22px; height: 22px; font-size: 11px; border-radius: 5px; }
.fl2-type-text { font-size: 11.5px; color: var(--fl2-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fl2-ft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    font-size: 13px;
    flex-shrink: 0;
}
.fl2-ft-log     { background: #e0ecf8; color: #2c5282; }
.fl2-ft-err     { background: #fce4e4; color: #c53030; }
.fl2-ft-text    { background: #eef0f3; color: #5b6b7b; }
.fl2-ft-image   { background: #e7f3ec; color: #1f9d55; }
.fl2-ft-cfile   { background: #fff3cd; color: #856404; }
.fl2-ft-input   { background: #e8e0f0; color: #6c3483; }
.fl2-ft-output  { background: #d1ecf1; color: #0c5460; }
.fl2-ft-archive { background: #fef3cd; color: #856404; }
.fl2-ft-pdf     { background: #fce4e4; color: #c53030; }
.fl2-ft-other   { background: #eef0f3; color: #5b6b7b; }

.fl2-name-block { display: flex; flex-direction: column; min-width: 0; }
.fl2-name {
    font-weight: 500;
    color: var(--fl2-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.fl2-name:hover { color: var(--fl2-accent); text-decoration: underline; }
.fl2-pv-title { cursor: pointer; }
.fl2-pv-title:hover { color: var(--fl2-accent); text-decoration: underline; }

.fl2-listhd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fbfcfd;
    border-bottom: 1px solid var(--fl2-border);
}
.fl2-vmodes {
    display: inline-flex;
    border: 1px solid #d6dde6;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}
.fl2-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    font-size: 12px;
    color: var(--fl2-soft);
    cursor: pointer;
    user-select: none;
    border-right: 1px solid #d6dde6;
}
.fl2-vmodes .fl2-group-toggle:last-child { border-right: 0; }
.fl2-group-toggle:hover { color: var(--fl2-accent); background: var(--fl2-accent-soft); }
.fl2-group-toggle.on { background: var(--fl2-accent); color: #fff; }
.fl2-group-toggle.on:hover { background: var(--fl2-accent-strong); color: #fff; }
.fl2-listhd-meta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--fl2-muted);
}
.fl2-colhd {
    display: grid;
    grid-template-columns: 24px 1fr 120px 96px 116px 116px 152px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--fl2-border);
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fl2-soft);
    height: 34px;
}
.fl2-col-static {
    color: var(--fl2-soft);
    text-align: right;
    padding-right: 4px;
}

.fl2-bulkbar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 3px 14px;
    background: var(--fl2-accent);
    color: #fff;
    border-bottom: 1px solid var(--fl2-accent-strong);
    min-height: 34px;
    height: 34px;
}
.fl2.has-selection .fl2-bulkbar { display: flex; }
.fl2.has-selection .fl2-colhd { display: none; }
.fl2-bulkbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.fl2-bulkbar-meta .fa { font-size: 13px; }
.fl2-bulkbar-actions { display: inline-flex; gap: 4px; }
.fl2-bulk-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    font-size: 11.5px;
    cursor: pointer;
}
.fl2-bulk-act:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.32); }
.fl2-bulk-act.fl2-bulk-danger:hover { background: #c53030; border-color: #c53030; }
.fl2-bulk-clear {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11.5px;
}
.fl2-bulk-clear:hover { color: #fff; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }
.fl2-col {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
}
.fl2-col:hover { color: var(--fl2-accent); }
.fl2-col.on { color: var(--fl2-accent); }
.fl2-col .fa { font-size: 10px; opacity: .35; }
.fl2-col.on .fa { opacity: 1; }
.fl2-list { position: relative; user-select: none; }
.fl2-rubber {
    position: absolute;
    background: rgba(44, 82, 130, 0.12);
    border: 1px solid var(--fl2-accent);
    border-radius: 2px;
    pointer-events: none;
    z-index: 5;
}
.fl2-sub { font-size: 11px; color: var(--fl2-muted); }

.fl2-meta {
    font-size: 11.5px;
    color: var(--fl2-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl2-actions {
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.fl2-row:hover .fl2-iconbtn { color: var(--fl2-soft); }

.fl2-iconbtn {
    width: 26px; height: 26px;
    border: 1px solid #d6dde6;
    background: #fff;
    border-radius: 7px;
    color: var(--fl2-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.fl2-iconbtn:hover { color: var(--fl2-accent); border-color: var(--fl2-accent); }

.fl2-preview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 90vw;
    background: var(--fl2-bg);
    border: 1px solid var(--fl2-border);
    border-radius: 10px;
    box-shadow: -6px 0 20px rgba(20, 30, 50, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 24px));
    transition: transform .26s ease;
    z-index: 10;
    overflow: hidden;
}
.fl2.preview-open .fl2-preview {
    transform: translateX(0);
}
.fl2-pv-hd {
    padding: 14px 16px;
    border-bottom: 1px solid var(--fl2-border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fl2-pv-hd .fl2-ft { width: 36px; height: 36px; font-size: 16px; }
.fl2-pv-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.3;
}
.fl2-pv-sub { color: var(--fl2-soft); font-size: 12px; margin-top: 4px; }
.fl2-pv-close {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--fl2-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}
.fl2-pv-close:hover { color: var(--fl2-text); }
.fl2-pv-body {
    flex: 1 1 auto;
    padding: 14px 16px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fl2-pv-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #cdd5df, #e6eaf0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b6b7b;
    font-size: 32px;
    overflow: hidden;
}
.fl2-pv-thumb.fl2-pv-thumb-img {
    background: #1e2530;
    padding: 6px;
}
.fl2-pv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.fl2-pv-thumb.fl2-pv-thumb-text {
    background: #1e2530;
    color: #cdd5df;
    font: 11px/1.4 "IBM Plex Mono", Menlo, Consolas, monospace;
    padding: 10px 12px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    aspect-ratio: auto;
    max-height: 220px;
    overflow: auto;
}
.fl2-pv-kv {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px 12px;
    font-size: 12.5px;
    margin: 0;
}
.fl2-pv-kv dt { color: var(--fl2-soft); }
.fl2-pv-kv dd { margin: 0; color: var(--fl2-text); word-break: break-word; }
.fl2-pv-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--fl2-border);
    padding: 12px 16px;
}
.fl2-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--fl2-accent);
    background: var(--fl2-accent);
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
}
.fl2-btn:hover { background: var(--fl2-accent-strong); border-color: var(--fl2-accent-strong); }
.fl2-btn.fl2-btn-ghost { background: #fff; color: var(--fl2-text); border-color: #d6dde6; }
.fl2-btn.fl2-btn-ghost:hover { color: var(--fl2-accent); border-color: var(--fl2-accent); background: #fff; }

.fl2-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--fl2-muted);
    font-size: 13px;
}
.fl2-loading {
    padding: 60px 16px;
    text-align: center;
    color: var(--fl2-muted);
    font-size: 13px;
}
.fl2-loading .fa { margin-right: 8px; color: var(--fl2-accent); }
.fl2-host { position: relative; }

@media (max-width: 1100px) {
    .fl2-preview { width: 360px; }
    .fl2.preview-open .fl2-list { margin-right: 376px; }
}
@media (max-width: 760px) {
    .fl2-preview { width: 100%; }
    .fl2.preview-open .fl2-list { margin-right: 0; visibility: hidden; }
}

/* /stylesheets/responses.v2.css */
/* Responses dense list — Files-V2 list pattern + FilterPanel bar + existing Responses header */

.rsp-dense {
    --rsp-border:        #e5e7eb;
    --rsp-border-strong: #d1d5db;
    --rsp-text:          #1f2328;
    --rsp-muted:         #6b7280;
    --rsp-muted-2:       #9ca3af;
    --rsp-primary:       #2c5282;
    --rsp-primary-bg:    #e0ecf8;
    --rsp-row-hover:     #f3f4f6;
    background: #fff;
    border-top: 1px solid var(--rsp-border);
}

.rsp-dense .rsp-qf {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-bottom: 1px solid var(--rsp-border); background: #fcfcfd;
    overflow-x: auto;
}
.rsp-dense .rsp-qf-lbl {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--rsp-muted); font-weight: 700; margin-right: 4px;
}
.rsp-dense .rsp-chip {
    border: 1px solid var(--rsp-border); background: #fff; color: var(--rsp-muted);
    padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: all 0.12s;
}
.rsp-dense .rsp-chip:hover { border-color: var(--rsp-primary); color: var(--rsp-primary); }
.rsp-dense .rsp-chip.on { background: var(--rsp-primary); color: #fff; border-color: var(--rsp-primary); }

.rsp-dense .rsp-bulkbar {
    display: none; align-items: center; gap: 10px; padding: 0 14px;
    height: 36px; background: var(--rsp-primary); color: #fff; font-size: 12px;
    border-bottom: 1px solid var(--rsp-primary);
}
.rsp-dense.has-selection .rsp-bulkbar { display: flex; }
.rsp-dense .rsp-bulkbar .count { font-weight: 700; }
.rsp-dense .rsp-bulkbar button {
    background: rgba(255,255,255,0.15); border: 0; color: #fff;
    padding: 5px 10px; border-radius: 5px; font: 600 12px -apple-system, sans-serif;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.rsp-dense .rsp-bulkbar button:hover { background: rgba(255,255,255,0.28); }
.rsp-dense .rsp-bulkbar .grow { flex: 1; }
.rsp-dense .rsp-bulkbar .clear { background: transparent; }

.rsp-dense .rsp-listhd {
    display: grid; gap: 10px; padding: 0 14px; height: 36px; align-items: center;
    border-bottom: 1px solid var(--rsp-border); background: #fafbfc;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--rsp-muted); font-weight: 600;
    grid-template-columns: 22px minmax(0,2.2fr) 90px minmax(0,1.2fr) 110px 120px 140px 80px;
}
.rsp-dense.has-selection .rsp-listhd { display: none; }
.rsp-dense .rsp-listhd .rsp-colhd {
    display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
}
.rsp-dense .rsp-listhd .rsp-colhd:hover { color: var(--rsp-primary); }
.rsp-dense .rsp-listhd .rsp-colhd .fa { font-size: 9px; opacity: 0.6; }

.rsp-dense .rsp-row {
    display: grid; gap: 10px; padding: 0 14px; min-height: 38px; align-items: center;
    border-bottom: 1px solid #f1f3f5; cursor: default; transition: background 0.12s;
    grid-template-columns: 22px minmax(0,2.2fr) 90px minmax(0,1.2fr) 110px 120px 140px 80px;
}
.rsp-dense .rsp-row:hover { background: var(--rsp-row-hover); }
.rsp-dense .rsp-row.sel { background: var(--rsp-primary-bg); }
.rsp-dense .rsp-row.sel .rsp-name a { color: var(--rsp-primary); }

.rsp-dense .rsp-cb, .rsp-dense .rsp-cbhd {
    width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--rsp-border-strong);
    background: #fff; cursor: pointer; display: inline-block; position: relative;
    transition: border-color 0.12s, background 0.12s;
}
.rsp-dense .rsp-cb:hover, .rsp-dense .rsp-cbhd:hover { border-color: var(--rsp-primary); }
.rsp-dense .rsp-row.sel .rsp-cb {
    background: var(--rsp-primary); border-color: var(--rsp-primary);
}
.rsp-dense .rsp-row.sel .rsp-cb::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.rsp-dense .rsp-cbhd.all {
    background: var(--rsp-primary); border-color: var(--rsp-primary);
}
.rsp-dense .rsp-cbhd.all::after {
    content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 2px;
    background: #fff; border-radius: 1px;
}

.rsp-dense .rsp-name {
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.rsp-dense .rsp-name .rsp-ti { flex: 0 0 18px; text-align: center; font-size: 14px; }
.rsp-dense .rsp-name a {
    font-weight: 600; color: var(--rsp-text); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-decoration: none;
}
.rsp-dense .rsp-name a:hover { color: var(--rsp-primary); text-decoration: underline; }
.rsp-dense .rsp-name .rsp-desc {
    color: var(--rsp-muted-2); font-weight: 400; font-size: 11px; margin-left: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rsp-dense .rsp-meas {
    font-family: 'SF Mono','Menlo',monospace; font-size: 11px; color: var(--rsp-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rsp-dense .rsp-units, .rsp-dense .rsp-when, .rsp-dense .rsp-by {
    color: var(--rsp-muted); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rsp-dense .rsp-act {
    display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity 0.15s;
}
.rsp-dense .rsp-row:hover .rsp-act { opacity: 1; }
.rsp-dense .rsp-act button {
    border: 0; background: transparent; padding: 4px 6px; cursor: pointer;
    color: var(--rsp-muted); border-radius: 4px;
}
.rsp-dense .rsp-act button:hover { background: var(--rsp-border); color: var(--rsp-text); }

.rsp-dense .rsp-empty {
    padding: 40px; text-align: center; color: var(--rsp-muted);
}

/* type chips */
.rsp-tchip {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.rsp-tchip.rsp-t-view   { background: #fef3cd; color: #856404; }
.rsp-tchip.rsp-t-curve  { background: #e0ecf8; color: #2c5282; }
.rsp-tchip.rsp-t-scalar { background: #d4edda; color: #155724; }
.rsp-tchip.rsp-t-table  { background: #fde2e1; color: #9a2c25; }
.rsp-tchip.rsp-t-comp   { background: #e8daef; color: #6c3483; }
.rsp-tchip.rsp-t-text   { background: #d1ecf1; color: #0c5460; }
.rsp-tchip.rsp-t-other  { background: #f0f0f0; color: #6b7280; }

.rsp-ti.rsp-t-view   { color: #a16207; }
.rsp-ti.rsp-t-curve  { color: #2c5282; }
.rsp-ti.rsp-t-scalar { color: #155724; }
.rsp-ti.rsp-t-table  { color: #9a2c25; }
.rsp-ti.rsp-t-comp   { color: #6c3483; }
.rsp-ti.rsp-t-text   { color: #0c5460; }
.rsp-ti.rsp-t-other  { color: #9ca3af; }

/* ─────────────────────────────────────────────────────────────
   Card-grid modernization (Phase 4)
   Scoped under .responseItemsRenderingArea so it only affects the
   responses tab cards, not other places that use .col-md-6.
   ───────────────────────────────────────────────────────────── */

.responseItemsRenderingArea {
    display: grid;
    /* minmax(0,1fr) lets columns shrink below their content min-width so
       a wide card child (chart canvas, long unbreakable name) can't push
       the whole grid past the parent's width and produce an x-scroll. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 4px;
    min-width: 0;
}
@media (max-width: 1100px) { .responseItemsRenderingArea { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .responseItemsRenderingArea { grid-template-columns: minmax(0, 1fr); } }
/* Card child elements must also opt-in to shrink (long titles / canvases). */
.responseItemsRenderingArea > * { min-width: 0; }
.responseItemsRenderingArea .rspc2,
.responseItemsRenderingArea .rspc2-wrap { min-width: 0; max-width: 100%; }

/* Empty responses state: centered in the content canvas without presenting
   another card or panel around the message. */
.responseItemsRenderingArea .responses-empty-state {
    grid-column: 1 / -1;
    min-height: 320px;
    min-height: clamp(320px, 48vh, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    color: #64748b;
}
.responseItemsRenderingArea .responses-empty-state-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    background: #edf4fa;
    color: #2c5282;
    font-size: 22px;
}
.responseItemsRenderingArea .responses-empty-state h3 {
    margin: 0 0 8px;
    color: #243447;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}
.responseItemsRenderingArea .responses-empty-state p {
    max-width: 420px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}
/* Bootstrap's .row adds ::before / ::after for clearfix; in a grid
   container those become grid items and steal cells (col 1 / last col),
   pushing real cards off-grid. Hide them. */
.responseItemsRenderingArea::before,
.responseItemsRenderingArea::after {
    display: none !important;
}
/* Legacy ResponseItemsView sometimes wraps cards in two .dataCol columns;
   display:contents collapses them so cards become direct grid children. */
.responseItemsRenderingArea .dataCol {
    display: contents;
}

/* Cancel Bootstrap grid widths — let CSS Grid drive the layout */
.responseItemsRenderingArea > .col-md-6,
.responseItemsRenderingArea .col-md-6.p20 {
    width: 100%;
    float: none;
    padding: 0;
    margin: 0;
    min-height: 0;
}

/* The card shell — replaces the legacy panel-default look */
.responseItemsRenderingArea > .col-md-6 {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.06s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    min-height: 340px;
}
/* Give the value container enough height so curves / images render cleanly
   (the legacy plot inherits parent height; a 60px container squashed curves). */
.responseItemsRenderingArea .respContent {
    min-height: 260px;
}
.responseItemsRenderingArea .respContent .curveArea,
.responseItemsRenderingArea .respContent .imageArea,
.responseItemsRenderingArea .respContent .videoArea,
.responseItemsRenderingArea .respContent .v_render_content {
    min-height: 220px;
}
.responseItemsRenderingArea .respContent .curveArea > * {
    width: 100%; height: 100%; min-height: 220px;
}
.responseItemsRenderingArea > .col-md-6:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.responseItemsRenderingArea > .col-md-6 .responseItemView {
    border: 0; box-shadow: none; background: transparent;
}

/* Wipe Bootstrap panel chrome inside the cards */
.responseItemsRenderingArea .panel,
.responseItemsRenderingArea .panel-default,
.responseItemsRenderingArea .panel-heading,
.responseItemsRenderingArea .panel-footer,
.responseItemsRenderingArea .panel-body {
    background: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   Modern card header (flat row, no Bootstrap col-md-8/col-md-4)
   ───────────────────────────────────────────────────────────── */
.responseItemsRenderingArea .respTitle.rsp-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid #f1f3f5;
    min-height: 0;
}
.responseItemsRenderingArea .rsp-head-select {
    flex: 0 0 auto; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px;
    border: 1.5px solid #d1d5db; background: #fff;
    color: transparent; font-size: 11px; cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.responseItemsRenderingArea .rsp-head-select:hover { border-color: #2c5282; }
.responseItemsRenderingArea .responseItem.is-selected .rsp-head-select,
.responseItemsRenderingArea .rsp-head-select.is-on {
    background: #2c5282; border-color: #2c5282; color: #fff;
}
.responseItemsRenderingArea .rsp-head-icon {
    flex: 0 0 18px; text-align: center; font-size: 14px; color: #2c5282;
}
.responseItemsRenderingArea .rsp-head-name {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 600; color: #1f2328;
    text-decoration: none; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.responseItemsRenderingArea .rsp-head-name:hover { color: #2c5282; text-decoration: underline; }
.responseItemsRenderingArea .rsp-head-acts {
    display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
}
.responseItemsRenderingArea .rsp-head-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 5px;
    color: #6b7280; background: transparent; border: 0;
    cursor: pointer; text-decoration: none; font-size: 12px;
    transition: background 0.12s, color 0.12s;
}
.responseItemsRenderingArea .rsp-head-btn:hover {
    background: #f1f3f5; color: #2c5282; text-decoration: none;
}
.responseItemsRenderingArea .rsp-head-btn-warn { color: #b91c1c; }
.responseItemsRenderingArea .rsp-head-btn-warn:hover { background: #fef2f2; color: #991b1b; }
.responseItemsRenderingArea .rsp-head-menu { position: relative; }
.responseItemsRenderingArea .rsp-head-menu .dropdown-menu { right: 0; left: auto; }
.responseItemsRenderingArea .rsp-head-fullscreen-crumb {
    flex: 0 0 100%;
    margin-top: 4px;
    font-size: 11px; color: #6b7280;
}

/* When the List (dense) view is active, let it span every grid column
   so the dense table takes the full width of the panel. */
.responseItemsRenderingArea > .rsp-dense,
.responseItemsRenderingArea .rsp-dense {
    grid-column: 1 / -1;
    width: 100%;
}
.responseItemsRenderingArea .respTitle h3 {
    flex: 1; margin: 0; font-size: 12.5px; font-weight: 600;
    color: #1f2328; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.responseItemsRenderingArea .respTitle .respActionIcons {
    display: inline-flex; align-items: center; gap: 2px;
}
/* enlarge + info icons are always visible; only the kebab menu is hover-only */
.responseItemsRenderingArea .respTitle .responseAction.rsp-enlarge,
.responseItemsRenderingArea .respTitle .responseAction.rsp-info {
    opacity: 1;
}
.responseItemsRenderingArea .respTitle .btn-group {
    opacity: 0.55; transition: opacity 0.15s;
}
.responseItemsRenderingArea > .col-md-6:hover .respTitle .btn-group { opacity: 1; }
.responseItemsRenderingArea .respTitle .responseAction,
.responseItemsRenderingArea .respTitle .responseOperationToggle {
    padding: 4px 7px !important; margin: 0 !important;
    border: 0 !important; background: transparent !important;
    color: #6b7280 !important; font-size: 12px;
    border-radius: 4px; cursor: pointer;
}
.responseItemsRenderingArea .respTitle .responseAction:hover,
.responseItemsRenderingArea .respTitle .responseOperationToggle:hover {
    background: #f1f3f5 !important; color: #2c5282 !important;
}

/* Body */
.responseItemsRenderingArea .respContent {
    flex: 1 1 auto; padding: 12px;
    overflow: hidden;
}
.responseItemsRenderingArea .respContent hr {
    margin: 10px 0 6px; border-color: #f1f3f5;
}
.responseItemsRenderingArea .respContent .lead {
    font-size: 22px; font-weight: 700; color: #2c5282; margin: 4px 0 0;
}
.responseItemsRenderingArea .respContent .small {
    font-size: 11px; color: #6b7280;
}
.responseItemsRenderingArea .respContent .icomoon {
    color: #9ca3af; margin-right: 3px;
}

/* ─────────────────────────────────────────────────────────────
   Modern meta strip (between header and value container)
   ───────────────────────────────────────────────────────────── */
.responseItemsRenderingArea .rsp-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 8px 14px; font-size: 11px;
    border-bottom: 1px solid #f1f3f5;
    color: #1f2328;
    line-height: 1.4;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-item {
    display: inline-flex; align-items: baseline; gap: 5px;
    max-width: 100%; overflow: hidden;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-k {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: #94a3b8;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-v {
    color: #1f2328; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-sep {
    width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; flex: 0 0 3px;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-spacer { flex: 1; }
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-when {
    color: #94a3b8; font-size: 11px; white-space: nowrap;
}
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-when .fa { font-size: 10px; margin-right: 3px; }

/* type-value gets a chip-ish accent so the most-scanned field stands out */
.responseItemsRenderingArea .rsp-card-meta .rsp-meta-type .rsp-meta-v {
    background: #e0ecf8; color: #2c5282; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    padding: 1px 6px; border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
   Modern footer (replaces the bootstrap col-md-4 row)
   ───────────────────────────────────────────────────────────── */
.responseItemsRenderingArea .panel-footer.rsp-card-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px !important;
    background: #fff !important;
    border-top: 1px solid #f1f3f5 !important;
    font-size: 11px; color: #6b7280;
}
.responseItemsRenderingArea .rsp-foot-id {
    font-family: 'SF Mono','Menlo',monospace; font-size: 10.5px;
    color: #6b7280; background: #f6f8fa;
    padding: 2px 7px; border-radius: 4px; flex: 0 0 auto;
}
.responseItemsRenderingArea .rsp-foot-time {
    color: #94a3b8; font-size: 11px; flex: 0 0 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.responseItemsRenderingArea .rsp-foot-time .fa { font-size: 10px; margin-right: 3px; }
.responseItemsRenderingArea .rsp-foot-spacer { flex: 1; }
.responseItemsRenderingArea .rsp-foot-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; background: transparent; color: #6b7280;
    padding: 4px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.responseItemsRenderingArea .rsp-foot-btn:hover {
    background: #f1f3f5; color: #2c5282; text-decoration: none;
}
.responseItemsRenderingArea .rsp-foot-btn .fa { font-size: 11px; }

/* Image area — fit nicely inside the card */
.responseItemsRenderingArea .imageArea img,
.responseItemsRenderingArea .gif_anim_toggle img {
    width: 100%; height: auto; border-radius: 6px; display: block;
}

/* Selection state */
.responseItemsRenderingArea > .col-md-6:has(.bookmarked) {
    border-color: #f59e0b;
}

/* View-type icon row in the Responses tab header */
.rsp-vm-icons {
    display: inline-flex; align-items: center; gap: 2px;
    background: #f0f0f0; border-radius: 6px; padding: 2px; margin-right: 6px;
}
.rsp-vm-icons .rsp-vm-icon {
    border: 0; background: transparent; color: #6b7280;
    padding: 4px 9px; border-radius: 4px; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.rsp-vm-icons .rsp-vm-icon:hover { color: #2c5282; background: #e8eef6; }
.rsp-vm-icons .rsp-vm-icon.on {
    background: #fff; color: #2c5282;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ─────────────────────────────────────────────────────────────
   Card-2 — clean card grid that wraps ResponseValueView
   ───────────────────────────────────────────────────────────── */
.rspc2-grid {
    display: grid;
    /* Container-driven: as many ~320px columns as fit; reflows as the
       sim viewer's main pane resizes. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px; padding: 4px;
    container-type: inline-size;  /* future-proof for container queries */
}

.rspc2-grid::before, .rspc2-grid::after { display: none !important; }

.rspc2-grid > .rspc2-wrap { display: contents; }

.rspc2 {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    display: flex; flex-direction: column;
    overflow: hidden; min-height: 340px;
    /* position:relative (not transform) so the :hover lift below doesn't turn this card into a
       containing block for its chart's position:fixed Chart Type submenu -- see the :hover rule.
       Do NOT give this a z-index: doing so makes the card its own stacking context, which traps
       the chart's position:fixed dropdown flyout inside it -- the flyout can then no longer float
       above OTHER cards later in the grid (same z-index as a trapped context, DOM order wins, so
       a later sibling card paints over an earlier card's still-open flyout). Tried 2026-07-01,
       reverted same day. */
    position: relative; top: 0;
    transition: box-shadow 0.18s, border-color 0.18s, top 0.06s;
}
/* R0-3900 #1 (card side): the newton chart's settings dropdown (Chart Type / Reset / Export
   as code / ...) is taller than a minimized curve card, so the card's own overflow:hidden
   (.rspc2 + .rspc2-body/.respContent) clipped its options and the user had to enlarge the
   response to use them. Paired with the newton-side fix (main_container un-clip), un-clip the
   card chain ONLY while a chart settings dropdown is open so the menu shows in full; the chart
   SVG still clips its own content, so only the floating menu escapes. Re-clips on close. */
.rspc2:has(.newton-simple-settings-header .dropdown.open),
.rspc2:has(.newton-simple-settings-header .dropdown.open) .rspc2-body,
.rspc2:has(.newton-simple-settings-header .dropdown.open) .respContent {
    overflow: visible;
}
/* The grouped Card-2 action submenu is a header child, but the rounded card
   clips it by default. Release only this card while its Bootstrap menu is open. */
.rspc2:has(.rspc2-menuwrap.open) {
    overflow: visible;
}
/* DW-3195: a grid of ~50 rendered charts makes EVERY style-invalidating write
   (the header notification flash, badge updates, any animation frame) pay a
   full-page style recalc — measured 370-1500 ms per toggle on a loaded grid,
   which is what froze scrolling. content-visibility scopes recalc/paint to
   on-screen cards: the same toggle measured 14 ms with this rule (53 ms
   median without). Off-screen cards keep their DOM and last size
   (contain-intrinsic-size auto + the card's own min-height), so the
   scrollbar stays stable.
   The bypasses matter: content-visibility implies paint+layout containment,
   which would trap/clip a card's position:fixed Chart Type flyout — the
   exact R0-3900 regression documented above — so containment is released
   while either dropdown is open (same :has() conditions as the un-clip
   rules). `.rspc2-cvbypass` is the JS escape hatch: the render scheduler
   sets it while painting INTO a render-skipped card, whose contents would
   otherwise measure width 0 and build a zero-size chart. */
.rspc2 { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.rspc2:has(.newton-simple-settings-header .dropdown.open),
.rspc2:has(.rspc2-menuwrap.open),
.rspc2.rspc2-cvbypass {
    content-visibility: visible;
}
/* R0-3900 #1 (submenu-position regression): translateY() here used to establish a new
   containing block for position:fixed descendants (CSS transforms do this per spec), so the
   newton chart's Chart Type flyout -- positioned in JS via viewport-relative getBoundingClientRect
   math -- rendered hundreds of px off from the trigger (offset by this card's own on-screen
   position) instead of next to it, making it unreachable/impossible to hover. `top` gives the
   same 1px lift with no containing-block side effect (same fix pattern as the newton-premium
   toolbar pill, SIM-1002, shashank2104 2026-06-05 -- see newton.v2.css). */
.rspc2:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(0,0,0,0.06); top: -1px; }
.rspc2.is-selected { border-color: #2c5282; box-shadow: 0 0 0 2px #e0ecf8; }

/* ── header ── */
.rspc2-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f3f5;
}
.rspc2-select {
    width: 18px; height: 18px; border-radius: 4px;
    border: 1.5px solid #d1d5db; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent; font-size: 10px; cursor: pointer; flex: 0 0 18px;
}
.rspc2-select:hover { border-color: #2c5282; }
.rspc2.is-selected .rspc2-select { background: #2c5282; border-color: #2c5282; color: #fff; }
.rspc2-icon { flex: 0 0 18px; color: #6b7280; font-size: 13px; text-align: center; }
.rspc2.rspc2-t-view   .rspc2-icon { color: #a16207; }
.rspc2.rspc2-t-curve  .rspc2-icon { color: #2c5282; }
.rspc2.rspc2-t-scalar .rspc2-icon { color: #155724; }
.rspc2.rspc2-t-table  .rspc2-icon { color: #9a2c25; }
.rspc2.rspc2-t-comp   .rspc2-icon { color: #6c3483; }
.rspc2.rspc2-t-text   .rspc2-icon { color: #0c5460; }
.rspc2-name {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1f2328;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; cursor: pointer;
}
.rspc2-name:hover { color: #2c5282; text-decoration: underline; }
.rspc2-chip {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    background: #f0f0f0; color: #6b7280; flex: 0 0 auto;
}
.rspc2.rspc2-t-view   .rspc2-chip { background: #fef3cd; color: #a16207; }
.rspc2.rspc2-t-curve  .rspc2-chip { background: #e0ecf8; color: #2c5282; }
.rspc2.rspc2-t-scalar .rspc2-chip { background: #d4edda; color: #155724; }
.rspc2.rspc2-t-table  .rspc2-chip { background: #fde2e1; color: #9a2c25; }
.rspc2.rspc2-t-comp   .rspc2-chip { background: #e8daef; color: #6c3483; }
.rspc2.rspc2-t-text   .rspc2-chip { background: #d1ecf1; color: #0c5460; }
.rspc2-acts { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.rspc2-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 5px;
    color: #6b7280; background: transparent; border: 0; cursor: pointer;
    text-decoration: none; font-size: 12px;
    transition: background 0.12s, color 0.12s;
}
.rspc2-iconbtn:hover { background: #f1f3f5; color: #2c5282; text-decoration: none; }
.rspc2-menuwrap { position: relative; }
.rspc2-menuwrap .dropdown-menu { right: 0; left: auto; }

/* ── meta strip ── */
.rspc2-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 7px 12px; font-size: 11px; color: #1f2328;
    border-bottom: 1px solid #f1f3f5;
}
.rspc2-mi { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; overflow: hidden; }
.rspc2-mk { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #94a3b8; }
.rspc2-mv {
    color: #1f2328; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}
.rspc2-dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; flex: 0 0 3px; }
.rspc2-spacer { flex: 1; }
.rspc2-when { color: #94a3b8; font-size: 11px; white-space: nowrap; }
.rspc2-when .fa { font-size: 10px; margin-right: 3px; }

/* ── body (value view mounts inside) ── */
.rspc2-body {
    flex: 1 1 auto; padding: 12px;
    overflow: hidden; min-height: 220px;
}
.rspc2-body .curveArea,
.rspc2-body .imageArea,
.rspc2-body .videoArea,
.rspc2-body .v_response_content { min-height: 200px; }
.rspc2-body .curveArea > * { width: 100%; height: 100%; min-height: 200px; }
.rspc2-vverr {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 120px; padding: 20px;
    background: #fef2f2; border: 1px dashed #fca5a5; border-radius: 8px;
    color: #991b1b; text-align: center; gap: 6px;
}
.rspc2-vverr .rspc2-vverr-icon { font-size: 28px; color: #dc2626; margin-bottom: 2px; }
.rspc2-vverr .rspc2-vverr-title { font-size: 13px; font-weight: 600; color: #991b1b; }
.rspc2-vverr .rspc2-vverr-detail {
    font-size: 11px; color: #b91c1c; max-width: 300px;
    word-break: break-word; line-height: 1.4;
}

/* ── footer ── */
.rspc2-ft {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-top: 1px solid #f1f3f5;
    font-size: 11px; color: #6b7280;
    /* This is a semantic <footer>, so the global `footer { z-index: 100 !important }` rule
       (style.css, meant for the site-wide page footer bar) matches it too -- but it had no
       effect here since this element was position:static (z-index is a no-op on non-positioned
       elements). That let the card's own chart flyouts (Chart Type submenu etc., position:fixed,
       z-index 1000) render on top of this ID/Alt Views/Info detail bar. Make it positioned and
       out-z-index those flyouts so the detail bar always stays in front. */
    position: relative;
    z-index: 1001 !important;
}
.rspc2-id {
    font-family: 'SF Mono','Menlo',monospace; font-size: 10.5px;
    color: #6b7280; background: #f6f8fa;
    padding: 2px 7px; border-radius: 4px;
}
.rspc2-ftbtn {
    display: inline-flex; align-items: center; gap: 5px;
    color: #6b7280; background: transparent; border: 0;
    padding: 4px 8px; border-radius: 5px; font-size: 11px; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.rspc2-ftbtn:hover { background: #f1f3f5; color: #2c5282; text-decoration: none; }
.rspc2-ftbtn .fa { font-size: 11px; }

.rspc2-empty { padding: 40px; text-align: center; color: #6b7280; }

/* ─────────────────────────────────────────────────────────────
   In-place fullscreen — matches how the legacy card did Enlarge.
   Toggling .is-fullscreen on the card root + calling
   valueView.refresh() lets the existing chart / image renderer
   re-paint at the larger size, no modal hop needed.
   ───────────────────────────────────────────────────────────── */
body.rspc2-fs-open { overflow: hidden; }
body.rspc2-fs-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55); z-index: var(--rspc2-fs-backdrop-z, 1095);
}
.rspc2.is-fullscreen {
    /* Fixed takeovers must leave the pinned app rail clickable. The 0px
       fallback keeps rail-less pages byte-for-byte aligned with the old inset. */
    position: fixed; top: 32px; right: 32px; bottom: 32px;
    left: calc(32px + var(--d3v-rail-w, 0px));
    z-index: var(--rspc2-fs-card-z, 1100);
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    border-radius: 12px;
    min-height: 0;
}
/* R0-3826: while a response card is fullscreen (card z-index 1100, body::after dim at 1095),
   bootstrap dialogs opened from its ellipsis menu (Edit Details / Export / Pin View /
   Import from File, etc.) default to z-index 1050/1040 and so render BEHIND the fullscreen
   view. JS tags only response-originated action modals and newly-created backdrops; existing
   physical-test canvases and backdrops must remain below the enlarged card. The fullscreen-active
   scope leaves normal pages unchanged. */
body.rspc2-fs-open .rspc2-fs-action-backdrop { z-index: var(--rspc2-fs-modal-backdrop-z, 1110) !important; }
body.rspc2-fs-open .rspc2-fs-action-modal { z-index: var(--rspc2-fs-modal-z, 1120) !important; }
/* Responses such as tall charts, tables, and rendered text keep their natural
   content size. Scroll the content pane rather than clipping it or allowing
   the browser page behind the fullscreen card to scroll. */
.rspc2.is-fullscreen .rspc2-body {
    min-height: 0; flex: 1 1 auto;
    overflow: auto; overscroll-behavior: contain;
}
.rspc2.is-fullscreen .rspc2-body .curveArea,
.rspc2.is-fullscreen .rspc2-body .imageArea,
.rspc2.is-fullscreen .rspc2-body .videoArea,
.rspc2.is-fullscreen .rspc2-body .v_response_content {
    min-height: 0; height: 100%;
}
.rspc2.is-fullscreen .rspc2-body .curveArea > * {
    width: 100%; height: 100%; min-height: 0;
}
/* Image in fullscreen: fit the whole image inside the body box, centered
   (letterboxed) — not forced to width:100% which overflows vertically and
   shows only a clipped slice. Scope the body→flex to image bodies only
   (via :has) so curve/video fullscreen layout is untouched. */
.rspc2.is-fullscreen .rspc2-body:has(.imageArea) {
    display: flex; flex-direction: column;
}
.rspc2.is-fullscreen .rspc2-body .imageArea {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 auto; height: 100%; min-height: 0; overflow: hidden;
}
.rspc2.is-fullscreen .rspc2-body .imageArea .magnify {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.rspc2.is-fullscreen .rspc2-body .imageArea .magnify img {
    width: auto !important; height: auto !important;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
/* swap the enlarge icon for a compress icon while fullscreen */
.rspc2.is-fullscreen .rsp-enlarge .fa-expand::before { content: '\f066'; }   /* fa-compress */

/* ─────────────────────────────────────────────────────────────
   Quieter "Fetching data" indicator inside any response card body.
   The legacy code renders a bulky <div class="alert alert-info">
   Fetching data. Please wait...</div> while LazyLoad fires. Strip
   the alert chrome down to a small centered spinner.
   ───────────────────────────────────────────────────────────── */
.responseItemsRenderingArea .respContent > .alert-info,
.responseItemsRenderingArea .respContent .v_response_content > .alert-info,
.rspc2-body > .alert-info,
.rspc2-body .v_response_content > .alert-info {
    background: transparent !important;
    border: 0 !important;
    color: #94a3b8 !important;
    font-size: 0;            /* hide the "Fetching data. Please wait..." text */
    text-align: center;
    padding: 24px 12px;
    margin: 0;
    box-shadow: none;
    position: relative;
    min-height: 60px;
}
.responseItemsRenderingArea .respContent > .alert-info::before,
.responseItemsRenderingArea .respContent .v_response_content > .alert-info::before,
.rspc2-body > .alert-info::before,
.rspc2-body .v_response_content > .alert-info::before {
    content: '\f110';                /* fa-spinner */
    font-family: 'FontAwesome';
    font-size: 14px;
    color: #94a3b8;
    display: inline-block;
    animation: rspc2Spin 0.9s linear infinite;
}
/* hide the legacy fa-refresh icon the alert ships with */
.responseItemsRenderingArea .respContent > .alert-info .fa,
.rspc2-body > .alert-info .fa { display: none; }

@keyframes rspc2Spin { to { transform: rotate(360deg); } }

/* Refresh icon spinning while data loads (filter / sort / refresh / initial fetch) */
.rsp-spinning .fa, .rsp-spinning > i, .rsp-spinning {
    animation: rspc2Spin 0.9s linear infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}

/* Make sure the grouped dropdown menu sits above legacy bootstrap modals / tables */
.responseItemsRenderingArea .responseOperationsList,
.rspc2 .responseOperationsList { z-index: 1080 !important; }

/* ── Cascading submenu for the card's grouped actions menu ── */
.rspc2-menu { min-width: 180px; padding: 4px 0; }
.rspc2-menu .rspc2-mgrp { position: relative; }
.rspc2-menu .rspc2-mgrp > .rspc2-mgrp-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; font-size: 12.5px; color: #1f2328;
    cursor: pointer; text-decoration: none;
}
.rspc2-menu .rspc2-mgrp > .rspc2-mgrp-toggle .fa { color: #94a3b8; font-size: 11px; }
.rspc2-menu .rspc2-mgrp:hover > .rspc2-mgrp-toggle,
.rspc2-menu .rspc2-mgrp.open > .rspc2-mgrp-toggle {
    background: #f3f4f6; color: #2c5282;
}
.rspc2-menu .rspc2-mgrp:hover > .rspc2-mgrp-toggle .fa,
.rspc2-menu .rspc2-mgrp.open > .rspc2-mgrp-toggle .fa { color: #2c5282; }

.rspc2-menu .rspc2-submenu {
    display: none;
    position: absolute; top: -4px; right: 100%;
    min-width: 220px; padding: 4px 0; margin: 0;
    background: #fff; list-style: none;
    border: 1px solid #e5e7eb; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 1090;
}
.rspc2-menu .rspc2-mgrp:hover > .rspc2-submenu,
.rspc2-menu .rspc2-mgrp.open  > .rspc2-submenu { display: block; }
.rspc2-menu .rspc2-submenu li { list-style: none; }
.rspc2-menu .rspc2-submenu li a {
    display: block; padding: 6px 14px; font-size: 12.5px; color: #1f2328;
    text-decoration: none; cursor: pointer;
}
.rspc2-menu .rspc2-submenu li a:hover { background: #f3f4f6; color: #2c5282; }
/* Hide icons in submenu items — the group name already gives context,
   and the icons clutter the cascade. Top-level promoted items (Edit /
   Share / Delete) keep their icons. */
.rspc2-menu .rspc2-submenu li a .fa,
.rspc2-menu .rspc2-submenu li a > span[class^="fa"],
.rspc2-menu .rspc2-submenu li a > i,
.rspc2-menu .rspc2-submenu li a .icomoon {
    display: none !important;
}
.rspc2-menu .rspc2-submenu li.rsp-menu-danger a { color: #b91c1c; }
.rspc2-menu .rspc2-submenu li.rsp-menu-danger a:hover { background: #fef2f2; color: #991b1b; }

.rspc2-menu .rspc2-mgrp-danger > .rspc2-mgrp-toggle { color: #b91c1c; }
.rspc2-menu .rspc2-mgrp-danger > .rspc2-mgrp-toggle:hover { background: #fef2f2; }

/* Top-level (promoted) items in the menu */
.rspc2-menu > li > a:not(.rspc2-mgrp-toggle) {
    display: block; padding: 7px 12px; font-size: 12.5px; color: #1f2328;
    text-decoration: none; cursor: pointer;
}
.rspc2-menu > li > a:not(.rspc2-mgrp-toggle):hover { background: #f3f4f6; color: #2c5282; }
.rspc2-menu > li.rsp-menu-danger > a:not(.rspc2-mgrp-toggle) { color: #b91c1c; }
.rspc2-menu > li.rsp-menu-danger > a:not(.rspc2-mgrp-toggle):hover { background: #fef2f2; color: #991b1b; }
.rspc2-menu > li.divider {
    height: 1px; margin: 4px 0; background: #f1f3f5; padding: 0;
}

/* ── Skeleton placeholders shown while initial fetch is in flight ── */
.rspc2-loading { pointer-events: none; }
.rspc2.rspc2-skel { border-color: #eef1f4; }
.rspc2-skel-line, .rspc2-skel-block {
    display: inline-block; background: #eef1f4; border-radius: 4px;
    position: relative; overflow: hidden;
}
.rspc2-skel-line { height: 12px; width: 60%; }
.rspc2-skel-line.short { width: 40%; }
.rspc2-skel-line.tiny  { width: 30%; height: 10px; }
.rspc2-skel-block { display: block; width: 100%; height: 180px; }
.rspc2-skel-line::after, .rspc2-skel-block::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
    animation: rspc2Shimmer 1.4s linear infinite;
}
@keyframes rspc2Shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Bulk-selection bar (appears at top of grid when ≥1 selected) ── */
.rspc2-selbar {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px; margin-bottom: 4px;
    background: #2c5282; color: #fff;
    border-radius: 8px; font-size: 12px;
}
.rspc2-selbar .count { font-weight: 700; }
.rspc2-selbar button {
    background: rgba(255,255,255,0.15); border: 0; color: #fff;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    font: 600 11.5px -apple-system, sans-serif;
    display: inline-flex; align-items: center; gap: 5px;
}
.rspc2-selbar button:hover  { background: rgba(255,255,255,0.28); }
.rspc2-selbar .grow         { flex: 1; }
.rspc2-selbar .clear        { background: transparent; }
.rspc2-selbar .selectall    { background: rgba(255,255,255,0.12); }

/* ─────────────────────────────────────────────────────────────
   Grouped dropdown menu (matches simulation bulk-action grouping)
   ───────────────────────────────────────────────────────────── */
.responseItemsRenderingArea .responseOperationsList {
    padding: 4px 0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border: 1px solid #e5e7eb;
    min-width: 220px;
}
.responseItemsRenderingArea .responseOperationsList .dropdown-header.rsp-menu-group {
    padding: 8px 14px 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: #94a3b8; background: transparent;
}
.responseItemsRenderingArea .responseOperationsList li:not(.dropdown-header) + .dropdown-header.rsp-menu-group {
    border-top: 1px solid #f1f3f5; margin-top: 4px;
}
.responseItemsRenderingArea .responseOperationsList li:not(.dropdown-header) a {
    padding: 6px 14px; font-size: 12.5px; color: #1f2328;
}
.responseItemsRenderingArea .responseOperationsList li:not(.dropdown-header) a:hover {
    background: #f3f4f6; color: #2c5282;
}
.responseItemsRenderingArea .responseOperationsList li.rsp-menu-danger a {
    color: #b91c1c;
}
.responseItemsRenderingArea .responseOperationsList li.rsp-menu-danger a:hover {
    background: #fef2f2; color: #991b1b;
}

/* ─────────────────────────────────────────────────────────────
   Info side-drawer
   ───────────────────────────────────────────────────────────── */
.rsp-info-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35);
    z-index: 1090; opacity: 0; transition: opacity 0.18s;
}
.rsp-info-drawer ~ .rsp-info-drawer-backdrop,
.rsp-info-drawer-backdrop { opacity: 1; }

.rsp-info-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px; max-width: 100vw;
    background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    z-index: 1100;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
}
.rsp-info-drawer.open { transform: translateX(0); }

.rsp-info-drawer .rsp-info-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
}
.rsp-info-drawer .rsp-info-hd h3 {
    flex: 1; margin: 0; font-size: 14px; font-weight: 700; color: #1f2328;
}
.rsp-info-drawer .rsp-info-close {
    border: 0; background: transparent; color: #6b7280; font-size: 22px;
    line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px;
}
.rsp-info-drawer .rsp-info-close:hover { background: #f1f3f5; color: #1f2328; }

.rsp-info-drawer .rsp-info-body {
    flex: 1; overflow: auto; padding: 14px 18px;
}
.rsp-info-drawer .rsp-info-row {
    display: grid; grid-template-columns: 110px 1fr; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #f1f3f5;
    font-size: 12.5px;
}
.rsp-info-drawer .rsp-info-row:last-child { border-bottom: 0; }
.rsp-info-drawer .rsp-info-k {
    color: #6b7280; font-weight: 600;
    text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.4px;
    padding-top: 2px;
}
.rsp-info-drawer .rsp-info-v {
    color: #1f2328; word-break: break-word;
}
.rsp-info-drawer .rsp-info-chip {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #e0ecf8; color: #2c5282;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}

.rsp-info-drawer .rsp-info-ft {
    display: flex; align-items: center; gap: 8px; padding: 12px 18px;
    border-top: 1px solid #e5e7eb; background: #fafbfc;
}
.rsp-info-drawer .rsp-info-edit {
    border: 1px solid #d1d5db; background: #fff; color: #1f2328;
    padding: 7px 14px; border-radius: 6px; cursor: pointer;
    font: 600 12px -apple-system, sans-serif;
    display: inline-flex; align-items: center; gap: 6px;
}
.rsp-info-drawer .rsp-info-edit:hover { border-color: #2c5282; color: #2c5282; }

.rsp-info-drawer .rsp-info-section { margin-top: 14px; }
.rsp-info-drawer .rsp-info-section-hd {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
    font-weight: 700; color: #2c5282;
    padding: 8px 18px 6px; border-top: 1px solid #e5e7eb; background: #fafbfc;
}
.rsp-info-drawer .rsp-info-v-mono {
    font-family: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;
    font-size: 11.5px; color: #1f2328; word-break: break-all;
}

/* Fallback when an image-response value won't decode (corrupt upload,
   mislabelled file type, 404, etc.). The native broken-image glyph is
   16x16 in a 300-px container, which reads as an empty pane. Replace
   it with a labeled card + download link so the user knows the file
   exists but can't be previewed inline. */
.rspc2-imgfail {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 240px; padding: 24px;
    background: #f9fafb; border: 1px dashed #d1d5db; border-radius: 8px;
    color: #6b7280; text-align: center; gap: 8px;
}
.rspc2-imgfail .rspc2-imgfail-glyph { font-size: 36px; color: #9ca3af; margin-bottom: 4px; }
.rspc2-imgfail .rspc2-imgfail-msg   { font-size: 13px; font-weight: 600; color: #374151; }
.rspc2-imgfail .rspc2-imgfail-name  {
    font-family: "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;
    font-size: 11.5px; color: #6b7280; word-break: break-all;
}
.rspc2-imgfail .rspc2-imgfail-dl {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; padding: 6px 12px;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    font-size: 12px; font-weight: 600; color: #2c5282; text-decoration: none;
}
.rspc2-imgfail .rspc2-imgfail-dl:hover { border-color: #2c5282; background: #e0ecf8; }

/* ── ResponsesTabWithHat: legacy ResponsesTab body + ResponsesHeaderV2 hat ──
   Lifted from the SimulationViewV2 `.svx .nsec-*` rules in sim.view.v2.tpl
   and re-scoped under .rspv2-hatwrap so the same chrome reaches the OLD
   simulation + physicaltest record-views without pulling in the rest of
   the SimulationViewV2 shell. */

.rspv2-nsec{
    --svx-blue:#2c5282;--svx-blue-dk:#1d3a5f;--svx-ink:#111827;
    --svx-muted:#6b7280;--svx-line:#e5e7eb;
    display:flex;flex-direction:column;min-height:0;height:100%;
    background:#f3f4f6;color:var(--svx-ink);font-size:13px;
}
.rspv2-nsec{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;background:#fff;overflow:visible;}
.rspv2-nsec > .nsec-bd{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;}
.rspv2-nsec > .nsec-bd .optionsAndFunctions{display:none!important;}
.rspv2-nsec > .nsec-bd > .subtab{display:block!important;}

.rspv2-nsec > .nsec-hd .n-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--svx-line);background:#fff;flex-wrap:wrap;}
.rspv2-nsec > .nsec-hd .n-search{display:flex;align-items:center;gap:7px;border:1px solid var(--svx-line);border-radius:8px;padding:0 11px;height:34px;min-width:230px;flex:1 1 260px;max-width:380px;color:var(--svx-muted);box-sizing:border-box;flex-wrap:nowrap;overflow:hidden;}
.rspv2-nsec > .nsec-hd .n-search > .fa{flex:0 0 auto;line-height:34px;}
.rspv2-nsec > .nsec-hd .n-search input{border:none;outline:none;font-size:12.5px;flex:1 1 auto;min-width:0;width:auto;height:34px;line-height:34px;padding:0;font-family:inherit;color:var(--svx-ink);background:transparent;box-shadow:none;}
.rspv2-nsec > .nsec-hd .n-fp{flex:1 1 320px;min-width:280px;display:flex;align-items:center;}
.rspv2-nsec > .nsec-hd .n-fp .hfp-bar{flex:1 1 auto;width:100%;}
.rspv2-nsec > .nsec-hd .n-vmbar{display:inline-flex;align-items:center;gap:2px;background:#f0f0f0;border-radius:8px;padding:3px;height:34px;box-sizing:border-box;}
.rspv2-nsec > .nsec-hd .n-vmbar .n-vmbtn{border:0;background:transparent;color:#6b7280;padding:0 10px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;font-size:13px;transition:background 0.12s,color 0.12s;}
.rspv2-nsec > .nsec-hd .n-vmbar .n-vmbtn:hover{color:var(--svx-blue);background:#e8eef6;}
.rspv2-nsec > .nsec-hd .n-vmbar .n-vmbtn.on{background:#fff;color:var(--svx-blue);box-shadow:0 1px 2px rgba(0,0,0,0.08);}
.rspv2-nsec > .nsec-hd .n-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--svx-line);background:#fff;color:var(--svx-ink);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.rspv2-nsec > .nsec-hd .n-btn:hover,.rspv2-nsec > .nsec-hd .n-btn.on{border-color:var(--svx-blue);color:var(--svx-blue);}
.rspv2-nsec > .nsec-hd .n-btn.n-primary{background:var(--svx-blue);border-color:var(--svx-blue);color:#fff;}
.rspv2-nsec > .nsec-hd .n-btn.n-primary:hover{background:var(--svx-blue-dk);color:#fff;}
.rspv2-nsec > .nsec-hd .n-icbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--svx-line);border-radius:8px;background:#fff;color:var(--svx-muted);cursor:pointer;}
.rspv2-nsec > .nsec-hd .n-icbtn:hover{border-color:var(--svx-blue);color:var(--svx-blue);}
.rspv2-nsec > .nsec-hd .n-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.rspv2-nsec > .nsec-hd .n-pw{position:relative;}
.rspv2-nsec > .nsec-hd .n-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--svx-line);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:200px;padding:6px;display:none;z-index:1050;}
.rspv2-nsec > .nsec-hd .n-menu.open{display:block;}
.rspv2-nsec > .nsec-hd .n-mi{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:#374151;}
.rspv2-nsec > .nsec-hd .n-mi:hover{background:#e0ecf8;color:var(--svx-blue);}
.rspv2-nsec > .nsec-hd .n-mi i{width:15px;text-align:center;color:var(--svx-blue);}
.rspv2-nsec > .nsec-hd .n-pager-top{padding:8px 12px;border-bottom:1px solid var(--svx-line);background:#fafbfc;font-size:12px;color:var(--svx-muted);}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pager{display:flex;align-items:center;gap:10px;width:100%;flex-wrap:wrap;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pleft{display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-start;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pcenter{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pright{display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-end;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pbtns{display:inline-flex;gap:4px;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-ps{display:inline-flex;align-items:center;gap:6px;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pw{position:relative;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-btn.n-summarize{padding:5px 10px;font-size:12px;font-weight:600;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-summenu{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--svx-line);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:300px;max-width:380px;padding:10px;display:none;z-index:1050;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-summenu.open{display:block;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pg{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--svx-line);border-radius:7px;background:#fff;color:var(--svx-muted);cursor:pointer;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-pg:hover{border-color:var(--svx-blue);color:var(--svx-blue);}
.rspv2-nsec > .nsec-hd .n-pager-top .n-limit{border:1px solid var(--svx-line);border-radius:6px;padding:3px 6px;font-size:12px;}
.rspv2-nsec > .nsec-hd .n-pager-top .n-fcount,
.rspv2-nsec > .nsec-hd .n-pager-top .n-pginfo{color:var(--svx-ink);}
.rspv2-nsec > .nsec-hd .n-pager-top .n-fcount b,
.rspv2-nsec > .nsec-hd .n-pager-top .n-pginfo b{color:var(--svx-blue);font-weight:700;}
.rspv2-nsec > .nsec-hd .n-bulkn{font-weight:700;color:var(--svx-blue);}
.rspv2-nsec > .nsec-ft .n-pager{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--svx-line);background:#fafbfc;font-size:12px;color:var(--svx-muted);}
.rspv2-nsec > .nsec-ft .n-pleft{display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-start;}
.rspv2-nsec > .nsec-ft .n-pcenter{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.rspv2-nsec > .nsec-ft .n-pright{display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-end;}
.rspv2-nsec > .nsec-ft .n-fcount{color:var(--svx-ink);} .rspv2-nsec > .nsec-ft .n-fcount b{color:var(--svx-blue);font-weight:700;}

/* ── Searching indicator ─────────────────────────────────────────────────────
   ResponsesTab.updateData flags `.rspv2-searching` on the section root while any
   fetch is outstanding. Both search boxes already position a magnifier INSIDE
   the field -- FilterPanel's `.hfp-nl-wrap i` and the fallback `.n-search > .fa`
   -- so the indicator swaps that glyph for a spinner rather than adding an
   element: no layout shift, no reflow, and it appears exactly where the user is
   already looking. The pager spinner and the refresh icon stay as they are; they
   are simply too far from the caret to be noticed while typing.
   Own keyframes rather than Font Awesome's `.fa-spin`, so this does not break if
   the icon set is swapped. */
@keyframes rspv2-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.rspv2-nsec.rspv2-searching .hfp-nl-wrap i.fa-search:before,
.rspv2-nsec.rspv2-searching > .nsec-hd .n-search > .fa-search:before { content: "\f1ce"; }

.rspv2-nsec.rspv2-searching > .nsec-hd .n-search > .fa-search {
    animation: rspv2-spin 0.9s linear infinite;
    color: var(--svx-blue);
}

/* FilterPanel centres its icon with `transform: translateY(-50%)`, and an
   animation's transform would REPLACE that and drop the glyph out of the field.
   Spin an inline-block wrapper's content instead by animating around the already
   translated position -- the keyframes below re-apply the translate every frame. */
@keyframes rspv2-spin-centred {
    0%   { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}
.rspv2-nsec.rspv2-searching .hfp-nl-wrap i.fa-search {
    animation: rspv2-spin-centred 0.9s linear infinite;
    color: var(--svx-blue);
}

/* /stylesheets/style.css */

:root {

    --foreground-color: #666;
    --neutralLight: #fefefe;
    --blackTranslucent10: #f7f7f7;

    --blue-50-a20: rgba(112, 181, 249, 0.2);

    --grey-001: #232F3E;
    --grey-002: #004891;


    --indigo-blue-light: #30487f;
    --indigo-blue-dark: #172144;
    --indigo-blue-medium: #1c305a;
    --app-dash-color: #426463;
    --app-pt-color: #ed981d;
    --app-sim-color: #f97c6b;
    --app-wf-color: #94cc19;
    --app-db-color: #c18767;
    --app-sl-color: #32487a;
    --btn-primary-bg:  #ff6200;
    --btn-primary-bg-hover:  #d14900;
    --btn-primary-color:  #fff;

    --pill0-tab-active: rgba(51, 122, 183, 1);

    --pill0-tab-hover: rgba(51, 122, 183, 0.8);
    --pill0-tab-clicked: rgba(51, 122, 183, 0.5);

    --pill1-tab-active: rgba(0, 82, 204, 0.4);
    --pill1-tab-hover: rgba(0, 82, 204, 0.2);
    --pill1-tab-focus: rgba(0, 82, 204, 0.1);
    --c-default-tab-active: rgba(0, 0, 0, 0.1);
    --c-default-tab-hover: rgba(0, 0, 0, 0.1);
    --c-default-tab-focus: rgba(100, 100, 100, 0.1);

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

}

html {
    font-size: 14px;
}


@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Normal'), url('/fonts//open-sans-normal.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'),
    local('OpenSans-Normal'),
    url('/fonts//open-sans-normal.woff') format('woff') ;
}

@font-face {
    font-family: 'Entypo Glyphicons';
    src: url('/stylesheets/spa/entypo/entypo.eot');
    src: url('/stylesheets/spa/entypo/entypo.eot?#iefix') format('embedded-opentype'),
    url('/stylesheets/spa/entypo/entypo.woff') format('woff'),
    url('/stylesheets/spa/entypo/entypo.ttf') format('truetype'),
    url('/stylesheets/spa/entypo/entypo.svg#entypo-glyphicons') format('svg');
}

@font-face {
    font-family: 'Icomoon';
    src: url('/stylesheets/spa/icomoon/icomoon.eot');
    src: url('/stylesheets/spa/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
    url('/stylesheets/spa/icomoon/icomoon.woff') format('woff'),
    url('/stylesheets/spa/icomoon/icomoon.ttf') format('truetype'),
    url('/stylesheets/spa/icomoon/icomoon.svg#icomoon') format('svg');
}

body {
    font-size: var(--base-font-size, 1rem);
    font-weight: 400;
    color: var(--foreground-color, #000);
    background: var(--background, #fff);
    font-family: var(--font-family, 'Roboto', 'Segoe UI', Arial, 'Noto Sans', sans-serif);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Modernized: Uses CSS variables for color, background, font-family, and font-size */
}

pre {
    background-color: var(--background, #fff);
    color: var(--foreground-color, #000);
    font-size: 1.2em;
    /* Modernized: Uses CSS variables for color and background */
}

@keyframes afocus {
    from {
        color: var(--foreground-color, #000);
        color: var(--foreground-color,#000);
    }
    to {
        color: var(--indigo-blue-medium);
    }
}

a:not(.clickable, .btn, .label) {
    color: var(--link-color, var(--foreground-color, #000));
    /* Modernized: Uses CSS variable for link color */
}

.nav-tabs a, .nav-tabs li.active a {
    color: var(--tab-color, var(--foreground-color, #000)) !important;
    /* Modernized: Uses CSS variable for tab color */
}

ul, menu, dir {
    padding: 0px;
}

ol {
    margin: 0px !important;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !important;
    color: var(--heading-color, var(--foreground-color, #000));
    font-weight: 400;
    margin: 0px;
    margin-bottom: 12px;
    /* Modernized: Uses CSS variables for font-family and color; fixed typo in margin-bottom */
}

h1 {
    font-size: 1.2em;
    margin-bottom: 6px;
    font-weight: 550;
}

h2 {
    font-size: 1.1em;
    margin-bottom: 4px;
    font-weight: 450;
}

h3 {
    font-size: 1.1em;
    margin-bottom: 2px;
    font-weight: 350;
}

h4 {
    font-size: 1.0em;
}


h5 {
    font-size: 0.9em;
}

h1 > a:hover, h2 > a:hover, h3 a:hover, h4:hover > a {
    background-color: var(--heading-hover-bg, var(--indigo-blue-light));
    color: var(--heading-hover-color, #fff);
    text-decoration: none;
    /* Modernized: Uses CSS variables for hover background and color */
}

h1 > a:active, h2 > a:active, h3 a:active, h4:active > a {
    filter: brightness(1.5);
}

h1 > a:focus, h2 > a:focus, h3 a:focus, h4:focus > a {
    background-color: var(--heading-focus-bg, var(--indigo-blue-dark));
    color: var(--heading-focus-color, #fff);
    text-decoration: none;
    /* Modernized: Uses CSS variables for focus background and color */
}

hr {
    color: var(--hr-color, #ddd);
    margin: 8px 0px;
    /* Modernized: Uses CSS variable for hr color */
}

label {
    display: block !important;
}


/*
.progress-bar-striped {
	background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}

.progress-bar.active,.progress.active .progress-bar {
	-webkit-animation: progress-bar-stripes 1s linear infinite;
	-o-animation: progress-bar-stripes 1s linear infinite;
	animation: progress-bar-stripes 1s linear infinite;
}
*/

.navbar-no-border {
    border: 0px;
    background: none;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 6px;
}

.navbar-no-border-no-margin {
    border-radius: 0px;
    box-shadow: none;
    background-color: #eef9ff !important;
    margin-bottom: 8px;
    -webkit-box-shadow: none;
    color: var(--foreground-color,#000);
    border-bottom: 1px solid #ddd;
}

.navbar-no-border-no-margin .nav-brand {
    color: #000 !important;
}

.app-icon {

    width: 60%;
    height: 50px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;

}

.dashboard-app-icon {
    background-image: url('/svgs/apps/app_dashboard.svg');
}

.dashboard-app-icon:hover {
    background-image: url('/svgs/apps/app_dashboard_hover.svg');
}

.pts-app-icon, .physicaltests-app-icon {
    background-image: url('/svgs/apps/app_physicaltests.svg');
}

.pts-app-icon:hover, .physicaltests-app-icon {
    background-image: url('/svgs/apps/app_physicaltests_hover.svg');
}


.pts-app-icon-inner, .physicaltests-app-icon-inner {
    background-image: url('/svgs/apps/app_physicaltests_inner_gs.svg');
}

.pts-app-icon-inner:hover, li.active .pts-app-icon-inner, .physicaltests-app-icon-inner:hover {
    background-image: url('/svgs/apps/app_physicaltests_inner.svg');
}


.templates-app-icon-inner, .responsetemplates-app-icon-inner {
    background-image: url('/svgs/apps/app_templates_inner_gs.svg');
}

.templates-app-icon-inner:hover, li.active .templates-app-icon-inner {
    background-image: url('/svgs/apps/app_templates_inner.svg');
}

.templates-app-icon, .responsetemplates-app-icon {
    background-image: url('/svgs/apps/app_templates.svg');
}

.templates-app-icon:hover, .responsetemplates-app-icon:hover {
    background-image: url('/svgs/apps/app_templates_hover.svg');
}


.simulations-app-icon {
    background-image: url('/svgs/apps/app_simulations.svg');
}

.simulations-app-icon:hover {
    background-image: url('/svgs/apps/app_simulations_hover.svg');
}

.simulations-app-icon-inner {
    background-image: url('/svgs/apps/app_simulations_inner_gs.svg');
}

.simulations-app-icon-inner:hover, li.active .simulations-app-icon-inner {
    background-image: url('/svgs/apps/app_simulations_inner.svg');
}

.projects-app-icon {
    background-image: url('/svgs/apps/app_projects.svg');
}

.projects-app-icon:hover {
    background-image: url('/svgs/apps/app_projects_hover.svg');
}

.projects-app-icon-inner {
    background-image: url('/svgs/apps/app_projects_inner_gs.svg');
}

.projects-app-icon-inner:hover, li.active .projects-app-icon-inner {
    background-image: url('/svgs/apps/app_projects_inner.svg');
}

.workflows-app-icon {
    background-image: url('/svgs/apps/app_workflows.svg');
}

.workflows-app-icon:hover {
    background-image: url('/svgs/apps/app_workflows_hover.svg');
}

.workflows-app-icon-inner {
    background-image: url('/svgs/apps/app_workflows_inner_gs.svg');
}

.workflows-app-icon-inner:hover, li.active .workflows-app-icon-inner {
    background-image: url('/svgs/apps/app_workflows_inner.svg');
}


.workorders-app-icon {
    background-image: url('/svgs/apps/app_workorders.svg');
}

.workorders-app-icon:hover {
    background-image: url('/svgs/apps/app_workorders_hover.svg');
}

.databases-app-icon, .datarecords-app-icon {
    background-image: url('/svgs/apps/app_databases.svg');
}

.databases-app-icon:hover, .datarecords-app-icon:hover {
    background-image: url('/svgs/apps/app_databases_hover.svg');
}

.databases-app-icon-inner, .datarecords-app-icon-inner {
    background-image: url('/svgs/apps/app_databases_inner_gs.svg');
}

.databases-app-icon-inner:hover, li.active .databases-app-icon-inner {
    background-image: url('/svgs/apps/app_databases_inner.svg');
}


.hpcjobs-app-icon {
    background-image: url('/svgs/apps/app_hpcjobs.svg');
}

.hpcjobs-app-icon:hover {
    background-image: url('/svgs/apps/app_hpcjobs_hover.svg');
}

.hpcjobs-app-icon-inner {
    background-image: url('/svgs/apps/app_hpcjobs_inner_gs.svg');
}

.hpcjobs-app-icon-inner:hover, li.active .hpcjobs-app-icon-inner {
    background-image: url('/svgs/apps/app_hpcjobs_inner.svg');
}

.tasks-app-icon {
    background-image: url('/svgs/apps/app_task.svg');
}

.tasks-app-icon:hover {
    background-image: url('/svgs/apps/app_task_hover.svg');
}

.tasks-app-icon-inner {
    background-image: url('/svgs/apps/app_task_inner_gs.svg');
}

.tasks-app-icon-inner:hover, li.active .tasks-app-icon-inner {
    background-image: url('/svgs/apps/app_task_inner.svg');
}

.simlytiks-app-icon {
    background-image: url('/svgs/apps/app_simlytiks.svg');
}

.simlytiks-app-icon:hover {
    background-image: url('/svgs/apps/app_simlytiks_hover.svg');
}

.simlytiks-app-icon-inner {
    background-image: url('/svgs/apps/app_simlytiks_inner_gs.svg');
}

.simlytiks-app-icon-inner:hover, li.active .simlytiks-app-icon-inner {
    background-image: url('/svgs/apps/app_simlytiks_inner.svg');
}

.studies-app-icon, .studies-app-icon-inner {
    background-image: url('/svgs/apps/app_studies.svg');
}

.studies-app-icon:hover {
    background-image: url('/svgs/apps/app_studies_hover.svg');
}

.notes-app-icon {
    background-image: url('/svgs/apps/app_notes.svg');
}

.notes-app-icon:hover {
    background-image: url('/svgs/apps/app_notes_hover.svg');
}

.mathmodels-app-icon, .mathmodels-app-icon-inner {
    background-image: url('/svgs/apps/app_mathmodels.svg');
    background-position: center;
    height: 10px !important;
}

.mathmodels-app-icon:hover {
    background-image: url('/svgs/apps/app_mathmodels.svg');
}

.files-app-icon {
    background-image: url('/svgs/apps/app_files.svg');
}

.files-app-icon:hover {
    background-image: url('/svgs/apps/app_files_hover.svg');
}

.files-app-icon-inner {
    background-image: url('/svgs/apps/app_files_inner_gs.svg');
}

.files-app-icon-inner:hover, li.active .files-app-icon-inner {
    background-image: url('/svgs/apps/app_files_inner.svg');
}

.notes-app-icon-inner {
    background-image: url('/svgs/apps/app_notes_inner_gs.svg');
}

.notes-app-icon-inner:hover, li.active .notes-app-icon-inner {
    background-image: url('/svgs/apps/app_notes_inner.svg');
}

.targets-app-icon {
    background-image: url('/svgs/apps/app_targets.svg');
}

.targets-app-icon:hover {
    background-image: url('/svgs/apps/app_targets_hover.svg');
}

.sharing-app-icon {
    background-image: url('/svgs/apps/app_sharing.svg');
}

.sharing-app-icon:hover {
    background-image: url('/svgs/apps/app_sharing_hover.svg');
}

.notifications-app-icon {
    background-image: url('/svgs/apps/app_notifications.svg');
}

.notifications-app-icon:hover {
    background-image: url('/svgs/apps/app_notifications_hover.svg');
}

.user-groups-app-icon {
    background-image: url('/svgs/apps/app_user_groups.svg');
}

.user-groups-app-icon:hover {
    background-image: url('/svgs/apps/app_user_groups.svg');
}

.fora-app-icon {
    background-image: url('/svgs/apps/app_fora.svg');
}

.fora-app-icon:hover {
    background-image: url('/svgs/apps/app_fora_hover.svg');
}

.peacock-app-icon, .peacocks-app-icon, .peacocks-app-icon-inner {
    background-image: url('/svgs/apps/app_peacock.svg');
}
.peacock-app-icon:hover, .peaocks-app-icon:hover {
    background-image: url('/svgs/apps/app_peacock_hover.svg');
    font-size: 0.8em;
}

.reporter-app-icon, .reporters-app-icon, .reporters-app-icon-inner {
    background-image: url('/svgs/apps/app_reporter.svg');
}

.reporter-app-icon:hover, .reporters-app-icon:hover {
    background-image: url('/svgs/apps/app_reporter_hover.svg');
    font-size: 0.8em;
}

.assemblers-app-icon, .assemblers-app-icon, .assemblers-app-icon-inner {
    background-image: url('/svgs/apps/app_assembler.svg');
    background-size: 60%;
}

.assembler-app-icon:hover, .assembler-app-icon:hover {
    background-image: url('/svgs/apps/app_assembler.svg');
    font-size: 0.6em;
}

.ontologies-app-icon-inner {
    background-image: url('/svgs/apps/app_ontologies_inner_gs.svg');
}

.ontologies-app-icon-inner:hover, li.active .ontologies-app-icon-inner {
    background-image: url('/svgs/apps/app_ontologies_inner.svg');
}

.agents-app-icon, .agents-app-icon-inner {
    background-image: url('/svgs/apps/app_fora.svg');
    background-size: 60%;
}

.agents-app-icon:hover, li.active .agents-app-icon, .agents-app-icon-inner:hover, li.active .agents-app-icon-inner {
    background-image: url('/svgs/apps/app_fora_hover.svg');
}



@media (max-height: 268px) {

    .app-icon {
        display: none;
        margin: 0px;
    }

    #application-list li a {
        font-size: 0.8em;
    }

}


@media (max-height: 400px) {

    .app-icon {
        width: 20px;
        margin: 0px;
    }

    #application-list li a {
        font-size: 0.8em;
    }


}

@media only screen and ( max-width: 1200px) {

    html, .btn {
        font-size: 0.8em;
        padding: 0.8em;
    }


}


@media (min-width: 768px) {


    .navbar-sm {
        min-height: 28px !important;
    }

    .navbar-sm .navbar-brand {
        padding: 8px 12px !important;
        height: 32px;
        line-height: 4px;
    }

    .navbar-sm .navbar-brand a {
        padding: 5px 0px !important;
        line-height: 4px !important;
        height: 28px !important;
        margin: 0px;
    }

    .navbar-sm .navbar-nav {
        margin-top: 3px;
    }

    .navbar-sm .navbar-nav a {
        padding: 4px 12px !important;
    }
}


@media screen and (max-resolution: 110dpi) {
    body {
        font-family: var(--font-family);
    }
}

.glyphicon-db:before {
    font-family: 'Entypo Glyphicons';
    content: "📸";
    font-size: 2em;
    line-height: 10px;
}

.glyphicon-model::before {
    font-family: 'Entypo Glyphicons';
    content: "💡";
    font-size: 2em;
    line-height: 10px;
}

.glyphicon-hourglass::before {
    font-family: 'Entypo Glyphicons';
    content: "⏳";
    font-size: 2em;
    line-height: 10px;
}

.glyphicon-tasks::before {
    font-family: 'Entypo Glyphicons';
    content: "📋";
    font-size: 2em;
    line-height: 10px;
}

.entypo-glyphicon {
    font-family: 'Entypo Glyphicons';
}

#main_container {
    min-width: 900px;
}

/* Sticky footer for the document-flow (non-frozen) shell. When a page's
   content is shorter than the viewport — e.g. the universal app loading
   skeleton/spinner — the footer drops to the bottom of the screen instead of
   floating mid-page under the short content. Tall pages still scroll normally
   (the panel grows past the viewport). Frozen pages use their own fixed
   layout, which overrides this (higher specificity + min-height:0 reset). */
#main_container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#main_container > .main-content-panel {
    flex: 1 0 auto;
}
#main_container > footer,
#main_container > #footer {
    flex: 0 0 auto;
}

/* App menu list - pushes content down with animated open/close */
#main_container .app-menu-list {
    display: block;
    width: 100%;
    background-color: white;
    border-bottom: 2px solid var(--indigo-blue-light);
    overflow: hidden;
    max-height: 200px;
    padding: 20px 0 0 0;
    opacity: 1;
    position: relative;
    transition: max-height 250ms ease-out,
                padding 250ms ease-out,
                opacity 200ms ease-out,
                border-bottom-width 250ms ease-out;
}

#main_container .app-menu-list ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0 40px;
    list-style: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#main_container .app-menu-list ul::-webkit-scrollbar {
    display: none;
}

/* Carousel arrows for app menu */
.app-menu-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.app-menu-arrow:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    color: #333;
}

.app-menu-arrow-left {
    left: 8px;
}

.app-menu-arrow-right {
    right: 8px;
}

.app-menu-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
}

#main_container.docked .app-menu-list {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-width: 0;
    transition: max-height 200ms ease-in,
                padding 200ms ease-in,
                opacity 150ms ease-in,
                border-bottom-width 200ms ease-in;
}

/* App icon slide-in animation */
.app-menu-list ul li {
    flex: 0 0 auto;
    margin-right: 12px;
    margin-bottom: 32px;
    width: 109px;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

#main_container:not(.docked) .app-menu-list ul li {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger icon entrance */
#main_container:not(.docked) .app-menu-list ul li:nth-child(1)  { transition-delay: 30ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(2)  { transition-delay: 50ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(3)  { transition-delay: 70ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(4)  { transition-delay: 90ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(5)  { transition-delay: 110ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(6)  { transition-delay: 130ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(7)  { transition-delay: 150ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(8)  { transition-delay: 170ms; }
#main_container:not(.docked) .app-menu-list ul li:nth-child(n+9) { transition-delay: 190ms; }

.app-menu-list ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.app-menu-list ul li a .app-icon {
    width: 40px;
    height: 50px;
    background-size: contain;
}

.app-menu-list ul li a .fa {
    height: 50px;
    line-height: 50px;
    padding-bottom: 0;
    font-size: 2em;
}

.app-menu-list ul li a div {
    font-weight: bold;
}

/* ---- Application menu position modes ------------------------------------ */
/* Driven by class on #main_container: app-menu-pos-top (default, unchanged),
   app-menu-pos-bottom-left, app-menu-pos-right, or app-menu-pos-bottom.
   Side modes use CSS grid on `.content` to dock a 60px-wide icon column
   in-flow next to the main content area, right below the header. Bottom mode
   pins a floating macOS-style dock at the foot of the viewport. Icons keep
   their existing sizing/rendering — only the container layout changes.
   Labels auto-hide (tooltip via `title=`). */

/* Suppress ALL transitions and animations on the docked menu and its children
   in side/bottom modes. The top-bar has animated max-height/padding/opacity
   on .app-menu-list and a staggered opacity/translate on li that trigger on
   any ancestor class toggle (including the docked toggle that fires on route
   changes), making the permanently-docked menu flicker / "grow" into view. */
#main_container.app-menu-pos-bottom-left .app-menu-list,
#main_container.app-menu-pos-right .app-menu-list,
#main_container.app-menu-pos-bottom .app-menu-list,
#main_container.app-menu-pos-bottom-left .app-menu-list ul,
#main_container.app-menu-pos-right .app-menu-list ul,
#main_container.app-menu-pos-bottom .app-menu-list ul,
#main_container.app-menu-pos-bottom-left .app-menu-list ul li,
#main_container.app-menu-pos-right .app-menu-list ul li,
#main_container.app-menu-pos-bottom .app-menu-list ul li {
    transition: none !important;
    animation: none !important;
}

#main_container.app-menu-pos-bottom-left > .main-content-panel > .content,
#main_container.app-menu-pos-right > .main-content-panel > .content,
#main_container.app-menu-pos-bottom-left .content,
#main_container.app-menu-pos-right .content {
    display: grid;
    grid-template-columns: var(--d3view-app-menu-width, 60px) 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "header  header"
        "apps    main"
        "apps    main";
    column-gap: 4px;
}

#main_container.app-menu-pos-right .content {
    grid-template-columns: 1fr var(--d3view-app-menu-width, 60px);
    grid-template-areas:
        "header  header"
        "main    apps"
        "main    apps";
}

#main_container.app-menu-pos-bottom-left .content > #header,
#main_container.app-menu-pos-right .content > #header {
    grid-area: header;
}

#main_container.app-menu-pos-bottom-left .content > .app-menu-list,
#main_container.app-menu-pos-right .content > .app-menu-list {
    grid-area: apps;
    width: var(--d3view-app-menu-width, 60px);
    max-width: var(--d3view-app-menu-width, 60px);
    max-height: calc(100vh - var(--d3view-header-height, 60px) - 8px);
    padding: 6px 0;
    border-bottom: 0;
    border-right: 1px solid #4b5563;
    overflow: hidden;
    position: relative; /* anchor for .app-menu-resize-handle */
}

#main_container.app-menu-pos-right .content > .app-menu-list {
    border-right: 0;
    border-left: 1px solid #4b5563;
}

/* Draggable resize handle on the inner edge of the side strip */
.app-menu-resize-handle {
    display: none;
}

#main_container.app-menu-pos-bottom-left .app-menu-list .app-menu-resize-handle,
#main_container.app-menu-pos-right .app-menu-list .app-menu-resize-handle {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 5;
    transition: background-color 120ms ease;
}

#main_container.app-menu-pos-bottom-left .app-menu-list .app-menu-resize-handle {
    right: -3px;
}

#main_container.app-menu-pos-right .app-menu-list .app-menu-resize-handle {
    left: -3px;
}

#main_container.app-menu-pos-bottom-left .app-menu-list .app-menu-resize-handle:hover,
#main_container.app-menu-pos-right .app-menu-list .app-menu-resize-handle:hover,
#main_container.app-menu-pos-bottom-left .app-menu-list .app-menu-resize-handle.dragging,
#main_container.app-menu-pos-right .app-menu-list .app-menu-resize-handle.dragging {
    background-color: rgba(75, 85, 99, 0.35);
}

/* When the strip is wide enough, un-hide the labels */
#main_container.app-menu-pos-bottom-left.app-menu-wide .app-menu-list ul li a,
#main_container.app-menu-pos-right.app-menu-wide .app-menu-list ul li a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 8px;
}

#main_container.app-menu-pos-bottom-left.app-menu-wide .app-menu-list ul li a div,
#main_container.app-menu-pos-right.app-menu-wide .app-menu-list ul li a div {
    display: block !important;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.app-menu-resizing,
body.app-menu-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
body.app-menu-resizing.resizing-row,
body.app-menu-resizing.resizing-row * {
    cursor: row-resize !important;
}

/* ---- Bottom position: floating macOS-style dock ------------------------ */
/* The dock floats over content (position: fixed), centered at the bottom,
   content-sized with a frosted-glass look and a bouncy icon-magnify on hover. */

#main_container.app-menu-pos-bottom .content > .app-menu-list {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 40px);
    /* Dock height = icon height (50px) + ~2px breathing room. Height is pinned
       via three properties (height, min-height, max-height) all with
       !important so no inherited rule / transition / layout reflow can grow
       the dock container. The CSS var keeps handle-drag resize working. */
    height: var(--d3view-app-menu-width, 52px) !important;
    min-height: var(--d3view-app-menu-width, 52px) !important;
    max-height: var(--d3view-app-menu-width, 52px) !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid rgba(75, 85, 99, 0.22);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.20),
                0 2px 8px rgba(0, 0, 0, 0.10);
    overflow: visible; /* let magnified icons + hover tooltips spill above */
    z-index: 900;
    contain: layout style;
}

/* Ensure the fluid footer stays clear of the floating dock on short pages
   and when scrolled to the bottom of long pages. */
#main_container.app-menu-pos-bottom footer {
    margin-bottom: calc(var(--d3view-app-menu-width, 52px) + 28px);
}

/* horizontal ul; centered; don't scroll (dock sizes to content) */
#main_container.app-menu-pos-bottom .app-menu-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
    gap: 4px;
}

#main_container.app-menu-pos-bottom .app-menu-list ul li {
    flex: 0 0 auto;
    width: auto;
    /* override base .app-menu-list ul li hide-when-docked fade */
    opacity: 1 !important;
    transform: none !important;
    margin: 0;
}

/* Magnify on hover — macOS dock feel. Transform origin at bottom so the icon
   lifts out of the dock instead of shifting sideways. */
#main_container.app-menu-pos-bottom .app-menu-list ul li a {
    position: relative;
    padding: 1px 4px;
    border-radius: 10px;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 150ms ease;
    transform-origin: bottom center;
}

#main_container.app-menu-pos-bottom .app-menu-list ul li a:hover {
    transform: translateY(-10px) scale(1.22);
    background-color: rgba(75, 85, 99, 0.08);
}

/* App-name tooltip bubble above the icon on hover (macOS dock style).
   Reuses the existing label <div> so no HTML change is needed. */
#main_container.app-menu-pos-bottom .app-menu-list ul li a > div {
    display: block !important;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(0.9);
    transform-origin: bottom center;
    background: rgba(20, 22, 30, 0.92);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

/* Little tail on the tooltip pointing at the icon */
#main_container.app-menu-pos-bottom .app-menu-list ul li a > div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(20, 22, 30, 0.92);
}

#main_container.app-menu-pos-bottom .app-menu-list ul li a:hover > div {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Resize handle on the TOP edge (row-resize). Sits slightly above the dock
   so it's clickable without covering the hover magnify target. */
#main_container.app-menu-pos-bottom .app-menu-list .app-menu-resize-handle {
    display: block;
    position: absolute;
    top: -4px;
    left: 20px;
    right: 20px;
    bottom: auto;
    height: 8px;
    width: auto;
    cursor: row-resize;
    z-index: 5;
    border-radius: 4px;
    transition: background-color 120ms ease;
}
#main_container.app-menu-pos-bottom .app-menu-list .app-menu-resize-handle:hover,
#main_container.app-menu-pos-bottom .app-menu-list .app-menu-resize-handle.dragging {
    background-color: rgba(75, 85, 99, 0.25);
}

/* docked state has no effect on the floating dock */
#main_container.app-menu-pos-bottom.docked .app-menu-list {
    opacity: 1;
    border-bottom-width: 0;
}

/* Everything inside .content that isn't the header or the app-menu goes into
   the `main` area. min-width:0 prevents grid from forcing a huge intrinsic
   min width based on long text inside. */
#main_container.app-menu-pos-bottom-left .content > *:not(#header):not(.app-menu-list),
#main_container.app-menu-pos-right .content > *:not(#header):not(.app-menu-list) {
    grid-area: main;
    min-width: 0;
}

/* Rework the UL to stack vertically and scroll on overflow */
#main_container.app-menu-pos-bottom-left .app-menu-list ul,
#main_container.app-menu-pos-right .app-menu-list ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    max-height: calc(100vh - var(--d3view-header-height, 60px) - 24px);
    padding: 0 2px;
    gap: 2px;
}

#main_container.app-menu-pos-bottom-left .app-menu-list ul li,
#main_container.app-menu-pos-right .app-menu-list ul li {
    flex: 0 0 auto;
    width: 100%;
    /* Base rule keeps li at opacity:0 when #main_container is .docked (top-bar
       collapsed animation). In side modes .docked is always present, so force
       visibility and clear the top-bar layout margins. */
    opacity: 1 !important;
    transform: none !important;
    margin: 0 0 6px 0;
}

/* auto-hide labels in side modes; tooltip still works via `title=` on the span */
#main_container.app-menu-pos-bottom-left .app-menu-list ul li a div,
#main_container.app-menu-pos-right .app-menu-list ul li a div {
    display: none !important;
}

/* carousel arrows aren't useful in a vertical strip */
#main_container.app-menu-pos-bottom-left .app-menu-arrow,
#main_container.app-menu-pos-right .app-menu-arrow {
    display: none !important;
}

/* keep side menu visible when docked (the cookie normally collapses it) */
#main_container.app-menu-pos-bottom-left.docked .app-menu-list,
#main_container.app-menu-pos-right.docked .app-menu-list {
    max-height: calc(100vh - var(--d3view-header-height, 60px) - 8px);
    padding: 6px 0;
    opacity: 1;
    border-bottom-width: 0;
}

/* ------------------------------------------------------------------------- */


#main_container .app-panel {
    display: none!important;
}

.inner {
    margin: 0 6%;
    padding: 0px;
}

.inner_max {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.select2-choices {

    border-radius: 4px;
}


#banner {
    padding: 6px;
    border-bottom: 1px solid #f6f6f6;
    text-align: center;
    background-color: #ffffcc;
    color: var(--foreground-color,#000);
    width: 100%;
    display: block;
}


.app-panel {
    position: fixed;
    box-shadow: 4px 4px 8px -4px #222;
    animation-duration: 200ms;
    z-index: 3000;
    height: 100%;
    background-color: #fff;
    min-height: 600px;
    left: 0px;
    top: 60px;
    width: 280px;
    text-align: center;
}


header {
    margin-bottom: 0px;
    z-index: 10 !important;
}

/* Fixed navbar — stays at top when scrolling */
header.navbar-d3view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--indigo-blue-light, #30487f) !important;
}
/* Push content below the fixed navbar */
.main-content-panel {
    padding-top: 46px;
}
/* Vertically center items in the panel sub-heading row */
.panel-sub-heading > .col-md-12 {
    display: flex;
    align-items: center;
}

/* Hide bottom pagination row while loading */
.panel-contents.loading ~ .row {
    display: none;
}

/* ── Collection Skeleton Loader ── */
@keyframes collectionShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.collection-skeleton-loader {
    padding: 0 8px;
}
.skeleton-header-row,
.skeleton-body-row {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    align-items: center;
}
.skeleton-header-row {
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2px;
}
.skeleton-body-row {
    border-bottom: 1px solid #f0f0f0;
}
.skeleton-body-row:nth-child(2) .skeleton-block { animation-delay: 0.05s; }
.skeleton-body-row:nth-child(3) .skeleton-block { animation-delay: 0.10s; }
.skeleton-body-row:nth-child(4) .skeleton-block { animation-delay: 0.15s; }
.skeleton-body-row:nth-child(5) .skeleton-block { animation-delay: 0.20s; }
.skeleton-body-row:nth-child(6) .skeleton-block { animation-delay: 0.25s; }
.skeleton-body-row:nth-child(7) .skeleton-block { animation-delay: 0.30s; }
.skeleton-block {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8ecf1 25%, #f4f6f9 50%, #e8ecf1 75%);
    background-size: 200% 100%;
    animation: collectionShimmer 1.5s ease-in-out infinite;
}
.skeleton-header-row .skeleton-block {
    height: 12px;
    background: linear-gradient(90deg, #d0d8e4 25%, #e4e9f0 50%, #d0d8e4 75%);
    background-size: 200% 100%;
    animation: collectionShimmer 1.5s ease-in-out infinite;
}
.skeleton-cell-sm { flex: 0 0 60px; }
.skeleton-cell-md { flex: 0 0 120px; }
.skeleton-cell-lg { flex: 1 1 200px; }

/* ── App Loading Screen ── */
@keyframes appLoadPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
@keyframes appLoadSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.app-loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 24px;
}
.app-loading-screen img {
    width: 120px;
    opacity: 0.5;
    animation: appLoadPulse 2s ease-in-out infinite;
}
.app-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #337ab7;
    border-radius: 50%;
    animation: appLoadSpin 0.8s linear infinite;
}
.app-loading-text {
    font-size: 13px;
    color: #a0aec0;
    font-weight: 500;
    letter-spacing: 0.3px;
}
/* Cap table header z-index below the fixed navbar */
#main_content {
    position: relative;
    z-index: 1;
}

header.navbar {
    border-radius: 0px;
    margin-bottom: 0px
}

header .navbar-nav > li > a {
    line-height: 19px;
}


header.app-dashboard {
    border-bottom: 3px solid #426463 !important;
}

header.app-physicaltests {
    border-bottom: 3px solid #ed981d !important;
}

header.app-simulations {
    border-bottom: 3px solid #f97c6b !important;
}

header.app-workflows {
    border-bottom: 3px solid #94cc19 !important;
}

header.app-databases {
    border-bottom: 3px solid #c18767 !important;
}

header.app-simlytiks {
    border-bottom: 3px solid #32487a !important;
}

header.app-projects, header.app-Projects {
    border-bottom: 3px solid #e2b80a !important;
}

header.app-hpcjobs {
    border-bottom: 3px solid #fc1310 !important;
}

header.app-templates, header.app-responsetemplates {
    border-bottom: 3px solid #2b9cf9 !important;
}

header ul.header-menu:not(.dropdown) > li.dropdown.open > a, header ul.header-menu:not(.dropdown) > li > a:focus {
    color: #fff !important;
    background-color: var(--indigo-blue-light);
}


header.navbar-d3view {
    padding: 0px 1px;
}

header.navbar-d3view ul.header-menu.nav.navbar-nav li {
    margin: 0 !important
}

header.navbar-d3view ul.header-menu.nav.navbar-nav li > a {
    font-size: inherit;
}

/* The global `.app-name { margin-top:-4px }` (used by the home menu) nudges
   the active app button up out of line with its flex-centered nav siblings.
   Neutralize it inside the header only — the home menu keeps its own offset. */
header.navbar-d3view ul.header-menu.nav.navbar-nav li > a.app-name {
    margin-top: 0;
}

.d3v-fora-app-mark {
    display: inline-block !important;
    width: 14px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    fill: currentColor;
}

header.navbar-d3view ul.header-menu.nav.navbar-nav {
    display: flex;
    align-items: center;
}

header ul.header-menu:not(.dropdown) > li > a:not(.app-docker) {
    font-weight: 600;
    text-shadow: none;
    color: #fff !important;
    transition: background-color 0.18s ease;
}

header ul.header-menu:not(.dropdown) > li > a:not(.app-docker):hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.1);
    border-radius: 0px !important;
}

header ul.header-menu:not(.dropdown) > li.active > a:not(.app-docker) {
    border-radius: 0px !important;
}

header .container-fluid {
    padding: 0px 0px;
}

header ul.dropdown-menu a {
    font-weight: normal;
    font-size: 1.0em;
}

header ul.dropdown-menu a:hover {
    color: #1a1a2e !important;
}

header ul.header-menu a.app-docker {
    font-size: 1.2em;
    color: #fff !important;
}

.main-breadcrumbs {
    border-bottom: 1px solid #dedede !important;
    margin-bottom: 4px;
}

.main-breadcrumbs .breadcrumb {
    padding: 8px;
}

a.app-docker:hover {
    filter: brightness(0.9);
    background-color: var(--indigo-blue-light) !important;
    color: #fff !important;
}

a.app-docker:active, a.app-docker:focus {
    filter: brightness(1.5);
    background-color: var(--indigo-blue-light) !important;
    color: var(--foreground-color,#000) !important;
}

/*
.dropdown-menu > li > a:hover {
	cursor: pointer;
	text-decoration: none;
	background-color: #0081c2;
	background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
	background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
	background-image: -o-linear-gradient(top, #0088cc, #0077b3);
	background-image: linear-gradient(to bottom, #0088cc, #0077b3);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
*/


#navbar-brand span.version_info {
    font-size: 0.5em;
    font-weight: 400;
    letter-spacing: 0.1em;
    position: absolute;
    top: 6px;
    left: 80px;
}

#header {
    display: block;
    background-color: var(--indigo-blue-light);
    z-index: 10 !important;
}

#header .navbar-default {
    z-index: 10;
    /*
	background: #003471 -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.49, rgba(255,255,255,0.2)),
			color-stop(0.50, rgba(255,255,255,0.1)),
			color-stop(1, rgba(255,255,255,0.1))
	);
	background: #003471 -moz-linear-gradient(
			270deg,
			rgba(255,255,255,0.2) 49%,
			rgba(255,255,255,0.1) 50%,
			rgba(255,255,255,0.1) 100%
	);
	background: #003471 -ms-linear-gradient(
			270deg,
			rgba(255,255,255,0.2) 49%,
			rgba(255,255,255,0.1) 50%,
			rgba(255,255,255,0.1) 100%
	);
	*/
    border: none;
}

#header nav.navbar-collapse {
    padding: 0px !important;
}


.toggle-applications {
    color: var(--foreground-color, #000) !important;
}

.toggle-applications:hover {
    color: var(--foreground-color, #000) !important;
    text-decoration: none !important;
}


ul.app-menu a {
    padding: 4px 2px;
}

.app-name {
    color: var(--foreground-color, #000) !important;
    margin-top: -4px;
}

.app-name:hover {
    text-decoration: none;
    color: #fff !important;
}

#application-list {
    overflow-y: scroll; /* Fixed typo: was 'overlflow-y' */
}

#application-list a {
    text-decoration: none;
    color: var(--foreground-color, #000) !important;
}

#application-list a:hover {
    text-decoration: none;
    border-radius: 0px;
    color: var(--foreground-color, #000) !important;
}

#application-list div.col-md-6 {
    padding: 12px 2px;
}

#application-list li:not(.active) a:hover img {
    transform: scale(1.3);
    animation-duration: 100ms;
    font-weight: 800;
}


#application-list li.active a, #application-list li a:focus {
    border-radius: 0px;
    font-weight: 800;
    background-color: #232f3e !important;
    color: #fff !important;
}

.app-item-name {
    font-size: 0.9em;
    display: block;
    font-weight: 400;
    color: var(--foreground-color, #000) !important;
}

#header .navbar-toggle {
    border-color: #999;
    background-color: #666;
    margin-right: 5px;
}

@media screen and (max-width: 400px) {


    header.navbar-default .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }

    header.navbar-default .navbar-toggle {
        display: block !important;
    }

    header.navbar-default .navbar-header {
        float: none !important;
    }

}

#site-search-results a {
    color: var(--foreground-color, #000);
    text-transform: uppercase;
}


#header .navbar-toggle .icon-bar {
    background-color: #fff;
}

/*

#header ul.nav >  li > a {
 	color: #fff;
}

#header .navbar-nav a {
 font-size:1.1em;
}

#header .navbar-nav li.active a {
background-color:#fff;
    color:#000!important;
}

*/

#header .header-icon {
    display: block;
    text-align: center;
}

#header .header-text {
    display: block;
    text-align: center;
}

/*
#header ul.nav > li.active >  a {
	background: transparent;
	color: #fff;
    border-bottom:4px solid #fff;
}

#header .navbar-nav > li > a {
	 padding:10px 16px!important;
}
*/

#header .navbar-default .navbar-nav > .open > a {
    background-image: none;
    background-color: #002756;
}

#header .top-menu ._header-text {
    display: block;
    text-align: center;
}

#header .version-info {
    font-size: 0.6em !important;
}


#header .navbar-toggle {
    padding: 6px !important;
}

#header .navbar-toggle .icon-bar {
    width: 11px !important;
    height: 2px !important;
}

.header-icon {
    display: inline !important;
}

.header-text {
    display: inline !important;
}

/* Header home-logo: the SAME pie symbol + d3VIEW wordmark used by the left
   rail brand, so the two read as one identity. On hover the pie slice turns
   blue (mirrors the rail brand's expand behaviour) instead of swapping a
   raster image — no reflow, crisp at any DPI. */
.header-logo-d3view {
    /* Force the flex row + reset Bootstrap's `.nav > li > a` block display
       and 15px link padding (higher specificity) — otherwise the pie + word
       stack vertically and the nav padding bloats the box. */
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    height: 36px;
    padding: 0 !important;
    vertical-align: middle;
    text-decoration: none;
    margin-top: 0px !important;
}
.header-logo-d3view .d3v-header-brand-pie {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
}
.header-logo-d3view .d3v-header-brand-pie .d3v-pie-body { fill: #aeb4bb; }
.header-logo-d3view .d3v-header-brand-pie .d3v-pie-slice {
    fill: #ffffff;
    transition: fill 0.18s ease;
}
.header-logo-d3view .d3v-header-brand-word {
    height: 26px;
    width: auto;
    display: block;
    /* tuck the wordmark up against the pie, mirroring the left rail's
       negative-margin nudge (scaled to the smaller header pie). */
    margin-left: -3px;
}

.header-logo-d3view:hover, .header-logo-d3view:active, .header-logo-d3view:focus {
    background-color: transparent !important;
    text-decoration: none;
}
.header-logo-d3view:hover .d3v-header-brand-pie .d3v-pie-slice,
.header-logo-d3view:focus .d3v-header-brand-pie .d3v-pie-slice {
    fill: #29abe2;
}


@media only screen and (max-width: 600px) {
    .header-text {
        display: none;
    }
}

#top_header {
    display: block;
}

#bottom_header {
    background-color: var(--header-footer-bg, #f8f8f8);
    /* Modernized: Uses CSS variable for background color */
}

/* Removed empty ruleset: #account_menu */

.main-content-panel {
    margin-bottom: 0px;
}

footer {
    display: block;
    z-index:100!important;
}
/* Removed empty ruleset above if present */

#footer {
    /* Light brand bar: white background with the rail indigo as the text +
       top-border accent, so it reads as part of the brand without the heavy
       fill colliding with the dark top nav. Same 36px height as the launcher. */
    font-size: 13px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    display: block;
    background-color: #fff;
    text-align: center;
    border-radius: 0px;
    border-top: 1px solid var(--indigo-blue-light, #30487f);
    z-index: 100 !important;
    position: static;
}

#footer p {
    padding: 0px;
    margin-bottom: 2px;
}

/* Single-row footer: utility links (Take Screenshot / Logs) on the left, the
   build/copyright text centered, info links (Release Notes / Docs / EULSA) on
   the right. Three equal flex zones so the centered text sits at the true
   viewport midpoint regardless of how wide each link group is. */
#footer {
    display: flex;
    align-items: center;
    gap: 16px;
}
/* the {clear} clearfix div is meaningless inside a flex row — drop it */
#footer > .clearfix {
    display: none;
}

#footer .footer-links,
#footer .footer-copyright {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

#footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 0;
}
#footer .footer-links-left  { justify-content: flex-start; }
#footer .footer-links-right { justify-content: flex-end; }

#footer .footer-links a {
    color: var(--indigo-blue-light, #30487f);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    transition: color 120ms ease;
}

#footer .footer-links a:hover {
    color: var(--indigo-blue-dark, #172144);
    text-decoration: underline;
}

#footer .footer-links a .fa {
    margin-right: 4px;
    opacity: 0.9;
}

#footer .footer-copyright {
    text-align: center;
    color: var(--indigo-blue-light, #30487f);
    font-size: 13px;
    /* single-row: no row-separator border / vertical margins */
    border-top: none;
    padding-top: 0;
    white-space: nowrap;
}

#footer .footer-copyright p {
    margin: 0;
}

#home_tabs.collapsed span.app-name {
}


#home_tabs.nav > li > a {
    border-radius: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

#home_tabs.nav > li > a > span.badge {
    font-size: 0.8em;
}

.footer_sitemap {
    margin: 12px auto;
    font-size: 0.8em;
    text-align: left;
    padding: 20px;
    width: 900px;
    margin-bottom: 30px;
}

.footer_sitemap > li {
    float: left;
    display: inline;
    min-width: 120px;
    padding: 8px;
    margin-right: 12px;
}

.footer_sitemap a {
    color: var(--foreground-color, #aaa);
}

.footer_sitemap a:hover {
    text-decoration: underline;
}

.footer_sitemap h3 {
    color: var(--foreground-color, #aaa);
}

.dock {
    padding: 4px 0px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-size: 0.9em;
    border-top: 1px solid #eee;
    display: block;
    background-color: #fff;
    min-height: 20px;
    box-shadow: inset #aaa 0px -2px 4px;
    -moz-box-shadow: inset #aaa 0px -2px 4px;
    -webkit-box-shadow: inset #aaa 0px -2px 4px;
}

.dock a {
    color: var(--foreground-color, #333) !important;
}

.dock .toggle {
    position: absolute;
    right: 5px;
    top: 4px;
}

.flow-content-wrapper {
    min-height: 100%;
    display: flex;
    z-index: 10;
    align-items: flex-start;
    justify-content: flex-start;
    align-content:space-between;
    width:100%;
}

.rail {
    width: 90px;
    min-height: 100%;
    bottom: 0px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    background-color: #fcfcfc;
    -ms-flex-pack: justify;
    border-right: 1px solid #ddd;
    -ms-flex-flow: column;
    flex-flow: column;
    justify-content: space-between;
}


.right-content {
    flex-flow: column;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    flex-grow: 1;
    padding-left:12px;
    width: calc(100% - 20%);
}

ul.project-menu {

}

ul.project-menu li {
    padding:12px;
}
ul.project-menu li a  {
    text-align:center;
}

ul.project-menu li a .fa {
    font-size: 1.2em;
    width:100%;
}

ul.project-menu li a .app-icon {
    height:30px;
    text-align:center!important;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.left-content {
    flex-flow: column;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    flex-grow: 1;
    width: calc(100% - 52px);
}


/* .main_content, #main_content {
    padding: 14px 14px;
    margin-bottom: 0px;
} */


#ajax_status {
    bottom: 0px;
    left: 46%;
    padding: 2px 12px;
    font-size: 0.8em;
    z-index: 200;
    background-color: #FFF7CA;
    border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    color: #fff;
    width: 100px;
    font-weight: bold;
    border: 1px solid #eee;
}

#flash {
    z-index: 1000;
    position: fixed;
    width: 400px;
    color: #fff;
    bottom: 0px;
    right: 0px;
}

#flash_contents {
    margin-top: -3px;
}

.flash_message {
}

#flash_close {
    position: absolute;
    float: right;
    right: 12px;
    top: 12px;
    height: 24px;
    width: 24px;
    margin-left: 12px;
    margin-top: -6px;
    color: var(--foreground-color, #333) !important;
}

#flash_close a {
    color: #0064ae !important;
}

#flash_close a:hover {
    text-decoration: underline;
}


html#simple_html_not_used {

    background: url(/images/path_to_d3_compressed.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

html#simple_html body {
    background-color: transparent;
}

#welcome_box {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    -webkit-box-shadow: #ddd 0px 0px 14px;
    -moz-box-shadow: #ddd 0px 0px 14px;
    box-shadow: #ddd 0px 0px 14px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    margin-top: 6%;
    background-color: #fff;
}

.gradient {
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.6)));
    background: transparent -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
}

.no_border {
    border: 0px !important;
}

.alert_message {
    background: #fff url('/images/alert.png') no-repeat scroll 10px center;
    padding: 20px;
    padding-left: 60px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.with_border {
    border: 1px solid #bbb;
    -webkit-box-shadow: 0px 0px 2px 2px #eee;
    -moz-box-shadow: 0px 0px 2px 2px #eee;
    box-shadow: 0px 0px 2px 2px #eee;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.lgray {
    color: #ccc !important;
}

.lyellow {
    color: #ffc !important;
}

.lorange {
    color: #ffa500 !important;
}

.lpurple {
    color: #edf3fe !important;
}

.lred {
    color: #c90000 !important;
}

.highlight {
    background-color: #ffffcc;
    padding: 8px;
    margin: 10px 0px;
    border: 1px solid #fff380;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.suggest {
    background-color: #EDF2CB;
    padding: 4px 8px;
    margin: 10px 0px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    color: var(--foreground-color, #333);
}

.notice {
    background-color: #fff9d0;
    border: 1px solid #ffe661;
    color: var(--foreground-color, #333);
    font-weight: normal;
    margin-bottom: 10px;
    padding: 6px;
    margin: 6px 0px;
    padding-left: 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.hint, .mild_notice {
    background-color: #f7f7f7;
    border: 1px solid #eee;
    line-height: 2em;
    padding: 8px 4px;
}

.notice > p {
    border: 1px solid #fff;
}

.rsep {
    border-right: 2px solid #ccc;
    height: 100%;
}


.notification_status {
    border: 1px solid #eee;
    background-color: #fff;
}

.notification_on {
    color: red;
}

.notification_off {
    color: var(--foreground-color, #333);
}

.icon {
    background-repeat: no-repeat;
    background-position-y: center;
    width: 24px;
    height: 24px;
    display: inline-block
}


.scalar, .scalar_composite, .scalar_composite, .number {
    background-image: url(/images/black_dot_16.png);
    background-position: 0px center !important;
}

.scalar_group {
    background-image: url(/images/scalar_group_16.png);
}


.-expression {
    background-image: url(/images/expression_16.png);
}

.vector, .vector_composite, .vector_group {
    background-image: url('/images/vector_16.png');
}

.view {
    background-image: url('/images/camera_16.png');
}

.view_more {
    background-image: url('/images/view_more.png');
    padding: 6px;
}

.user_defined {
    background-image: url('/images/user_defined.png');
}

.set, .set_composite {
    background-image: url('/images/set_16.png');
}
}

.matrix {
    background-image: url('/images/table_16.png');
}

.text {

}

.inline {
    display: inline;
}

.border {
    border: 1px solid #eee;
}

.center {
    text-align: center;
}

.f_input {
    margin: 5px 0em;
}

.f_help {
    color: gray;
}

.f_msg {
    padding: 0.4em;
    border: 1px solid #b2b2b2;
    color: white;
    background-color: red;
}


.dd_table {
    border: 1px solid rgb(255, 0, 0);
    display: block;
}

.dd_table ul {
    float: left;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid silver;
}

.dd_table ul li {
    width: 80px;
    text-align: center;
    margin: 0px;
    padding: 4px 2px;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    vertical-align: middle;
    color: rgb(140, 140, 140);
}

.dd_table .dd_table_label li {
    width: 100px;
    text-align: left;
    vertical-align: middle;
    color: rgb(40, 40, 40);
}

#ascii_plotter_canvas {
    padding: 0px;
}

#ascii_plot_window {
    width: 100%;
    border-top: 1px solid #ccc;
    overflow: auto;
}

.ascii_list {
    height: 200px;
    overflow: auto;
    border: 1px solid #eee;
    padding: 8px;
}

.ascii_list li {
    line-height: 1.6em;
    border-bottom: 1px solid #fff;
}

.ascii_list li label:hover {
    display: block;
    cursor: pointer;
}

.ascii_list li > input {
    margin-right: 8px;
}


.tab_content {
    padding: 4px;
}

.large {
    font-size: 1.4em;
}

.medlg {
    font-size: 1.2em;
}

.med {
    font-size: 1.1em;
}

.small, .small * {
    font-size: 11px;
}

.xs *, .xsmall * {
    font-size: 10px;
}

.xxs *, .xxsmall * {
    font-size: 8px;
}

.lrg {
    font-size: 1.1em;
}

.xlrg, .xl {
    font-size: 1.2em;
}

.xxl {
    font-size: 1.4em;
}

.scaps {
    font-variant: small-caps;
}

.blue {
    color: #001999;
}

.blue_bg {
    background-color: rgb(90, 143, 255);
}

.orange_bg {
    background-color: #ffa500;
}

.green_bg {
    background-color: green;
}

.grey {
    color: #666;
}

.greybg {
    background-color: rgb(246, 246, 246);
}

.bd {
    font-weight: 500 !important;
}

.normal {
    font-weight: normal;
}

.margin20 {
    padding: 15px 20px 15px 20px;
}

.drop {
    vertical-align: -15%;
}

.hleft {
    text-align: left;
}

.hright {
    text-align: right;
}

.block {
    display: block;
}

.mb0 {
    margin-bottom: 0px;
}

.m0 {
    margin: 0px;
}

.p0 {
    padding: 0px;
}

.m10 {
    margin: 10px;
}

.m20 {
    margin: 20px;
}

.m40 {
    margin: 40px;
}

.mt20 {
    margin-top: 20px;
}

.ml20 {
    margin-left: 20px;
}

.mlr10 {
    margin-left: 10px;
    margin-right: 10px;
}

.ml40 {
    margin-left: 40px;
}

.mtb10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mt10 {
    margin-top: 10px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ptop20 {
    padding-top: 20px;
}

.border_bottom {
    border-bottom: 1px solid #ccc;
}

.p2 {
    padding: 2px;
}

.p4 {
    padding: 4px;
}

.p10 {
    padding: 10px;
}

.p20 {
    padding: 20px;
}

.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr20 {
    padding-right: 20px;
}

.pr40 {
    padding-right: 40px;
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pl10 {
    padding-left: 20px;
}

.pl20 {
    padding-left: 20px;
}

.pl40 {
    padding-left: 40px;
}

.w200 {
    width: 200px;
}

.w400 {
    width: 400px;
}

.no_margins {
    margin: 0px;
}

.spacer {
    margin: 0px 3px 0px 0px;
}

.cb {
    clear: both;
    display: block;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.vmiddle {
    vertical-align: middle;
}

.vbottom {
    vertical-align: bottom;
}

.pipe {
    padding: 0px 2px;
}

.bg_blue {
    background-color: #dfebf7;
}

.upper_case {
    text-transform: uppercase !important;
}

.capitalize {
    text-transform: uppercase;
}

.align_left {
    text-align: left !important;
}

.align_right {
    text-align: right !important;
}

.align_center {
    text-align: center !important;
}

.smallcaps {
    font-variant: small-caps;
    font-size: 1.2em;
}

.normal_weight {
    font-weight: normal !important;
}

.col3 {
    width: 31%;
    float: left;
    padding: 0.1em 0.0em;
    margin-right: 0.5em;
}

.col2 {
    float: left;
    padding: 0.1em 0em;
    margin-right: 0.5em;
    width: 48%;
}

.plain {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}


.odd {
    background-color: #efefef;
}

.green {
    color: #8fcb4b;
}

.orange {
    color: orange;
}

.yellow {
    color: #ffffcc;
    background-color: #fbffcc;
}

.tag_list {
}

.tag_list li {
    float: left;
}

.tag_cloud {
    padding: 0px;
}

.tag_cloud ul li {
    float: left;
}

.tag_cloud ul li a {
    padding: 1px 10px;
}

h1 span.project, h1 span.simulation, h1 span.simgroup {
    color: #fff;
    width: 200px;
    font-weight: normal;
}

.keyword_viewer {
}

.keyword_viewer p {
    text-align: center;
    padding: 4px 0px;
}

.keyword_viewer .console {
    border: 1px solid rgb(220, 220, 220);
    padding: 10px;
    overflow: auto;
    height: 600px;
    max-height: 600px;
    overflow: auto;
}

.keyword_viewer .keyword {
}

.keyword_viewer .keyword h2 {
    border: 0px;
    color: #2786c2;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    line-height: 1em;
    font-size: 0.8em;
}

.keyword_viewer .keyword div.title {
    color: rgb(120, 120, 120);
    text-align: left;
    margin: 0px;
    padding: 0px;
}

.keyword_viewer .keyword img {
    margin-bottom: 5px;
    padding: 0px 10px;
    cursor: pointer;
}

.keyword_viewer .keyword ul {
    padding: 0px;
    margin: 0px;
}

.keyword_viewer .keyword_column {
    color: #ccc;
    background-color: #eee;
}

.keyword_viewer .update_options {
    text-align: center;
    background-color: rgb(240, 240, 240);
    left: auto;
    right: auto;
}

.keyword_viewer .console .keyword pre {
    padding: 0px;
    margin: 0px;
    line-height: 1.1em;
    border: 0px;
    background-color: #fff;
    color: rgb(120, 120, 120);
}

#welcome_screen {
    background: #404040 url(/images/banner.png) no-repeat scroll top center;
    width: 100%;
    height: 400px;
    width: 100%;
}

#welcome_message {
    float: right;
    margin-top: 60px;
    width: 300px;
    color: #fff;
}

div.banner_intro ul li {
    color: #fff;
}

div.banner_intro ul li h3 {
    color: #fff;
    font-weight: normal;
}

ul.controls {
    display: block;
    background-color: whitesmoke;
    text-align: right;
}

ul.controls li {
    display: inline;
    margin-right: 10px;
}


div.response {
    overflow: auto;
}

div.response h2 {
    border-bottom: 1px solid red;
}

div.response embed {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

div.response p {
    background-color: #eff7ff;
    padding: 4px 0px;
}

ul.tree {
}

ul.tree ul {
    padding-left: 20px;
}

ul.tree li.folder span {
    padding-left: 20px;
}

ul.tree li.active {
    background-color: #1e83f2 !important;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .2)), to(rgba(255, 255, 255, 0.1)));
    background: transparent -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    padding: 4px 0px 4px 6px;
    border: 1px solid transparent;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

ul.tree li.active a {
    color: #fff !important;
}

ul.tree li.folder > span.close {
    background: transparent url('/images/folder_close.png') no-repeat scroll left center;
    cursor: pointer;
}

ul.tree li.folder > span.open {
    background: transparent url('/images/folder_open.png') no-repeat scroll left center;
}

ul.tree li.folder span a {
    font-weight: 500;
}

ul.tree li.node span {
    padding: 8px;
    padding-left: 20px;
    height: 24px;
    background: transparent url('/images/text.png') no-repeat scroll left center;
}

ul.tree div.description {
    padding-left: 24px;
}

.left {
    float: left;
}

.right {
    margin-left: 20px;
    float: right;
}

p.desc {
}

div.company, div.organization {
    margin-bottom: 10px;
}

div.organization h3 {
    border-bottom: 4px solid #dfdfdf;
}

.company_slogan {
    font-size: 9px;
    color: #666;
    font-weight: normal;
}

.people {
}

.person {
    margin-bottom: 12px;
}

ul.attachmentset > li {
    margin-bottom: 10px;
    width: 200px;
    overflow: hidden;
}

div.message {
    margin-bottom: 20px;
    padding: 12px;
}

div.message div.body {
    color: #333;
    background-color: #eef9ff;
    padding: 12px;
    line-height: 1.4em;
    font-size: 1.0em;
}

div.message div.body pre {
    line-height: 1.1em;
    font-size: 10px;
}

div.message ul li {
    float: left;
    display: inline;
    margin-right: 10px;
}

div.banner {
    background-color: #f8fafb;
}

div.banner ul.announcement > li {
    float: left;
    width: 33%;
}

.sr {
    padding: 16px;
    padding-left: 90px;
    margin-bottom: 4px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
    background: transparent -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
    background-color: transparent;
    color: #666;
}

div.solverresultset {
    margin-bottom: 10px;
}

div.simulation {
    padding: 12px 0px 10px 0px;
    margin-bottom: 12px;
    border-bottom: 2px solid #eaeaee;
}

div.simulation p.description {
    padding: 4px 0px;
    vertical-align: 0px;
}

.sorter {
    background-repeat: no-repeat;
    background-position: 10px center;
    background-color: #eee;
    display: block;
    margin-top: 12px;
    padding: 12px;
    margin-bottom: 12px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-transition: color 1s ease-in;
}

.sorter .sorter_contents {
    width: 98%;
    margin: 0px auto;
}

.sorter .sorter_drawer {
    text-indent: -9999px;
    background: transparent url(/images/drawer_24.png) no-repeat scroll left center;
    position: relative;
    display: inline-block;
    left: 48%;
    top: -10px;
}

.sorter .advanced_options {
    margin-top: 14px;
}

div.page_header {
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    padding: 0.4em 0px;
    margin-bottom: 12px;
}

div.page_header .page_title, div.page_header h1, div.page_header h3, div.page_header h2 {
    float: left;
    color: var(--foreground-color,#000);
    margin-bottom: 0px;
}

.page_header .button, .page_header .ddb {
    margin: 0px;
}

div.page_header h3 {
    color: #333;
}

div.page_header .page_options, div.page_header > ul, div.page_header .page_options .ddb, div.page_header .crud {
    float: right;
    margin: 0px;
    margin-left: 32px;
    font-size: 0.9em;
}

div.page_header.right_options .page_options {
    float: right;
}

div.page_header > ul > li {
    margin-top: 0px !important;
    margin-top: 0px !important;
    margin-right: 8px;
}

div.sidebar_wrapper {
    margin-bottom: 20px;
}

div.sidebar_header {
    display: block;
    padding-right: 8px;
    color: var(--foreground-color,#000);
    font-weight: 500;
    margin-bottom: 8px;
    border-bottom: 1px solid #aaa;
    padding-bottom: 12px;
}

div.sidebar_header h2, div.sidebar_header h1, div.sidebar_header h3, div.sidebar_header .sidebar_title {
    display: inline;
    padding: 0px;
    margin: 0px;
    padding-left: 0px;
}

div.sidebar_content {
    padding: 6px;
}

ul.btn_list li {
    width: 400px;
    height: 200px;
    float: left;
    background: transparent url(/images/round_box.png) no-repeat scroll left center;
}

ul.btn_list li a {
    padding-top: 80px;
    text-align: center;
    display: block;
}

ul.btn_list li a:hover {
    font-weight: 500;
}

ul.col3 {
    width: 100%;
}

ul.col3 li {
    min-height: 200px;
    float: left;
    width: 30%;
    border-right: 2px solid #dfdfdf;
    margin-right: 20px;
}

ul.col3 li h2 {
    margin-bottom: 6px;
}

ul.col3 li.last {
    border-right: 0px;
}

.vtop {
    vertical-align: top;
}

.vbot {
    vertical-align: bottom;
}

.vtop td {
    vertical-align: top;
}

.vbot td, .vbot th {
    vertical-align: bottom;
}

table.vmiddle td, table.vmiddle th {
    vertical-align: middle;
}

table.p0 td {
    padding: 0px;
}

div.page_block {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 10px;
}

div.tm {
}

div.tm.header {
    padding: 10px;
    background-color: #efefef;
    display: block;
}

div.tm h2 {
    float: left;
    border: 0px;
    margin: 0px;
    margin-top: 4px;
}

div.tm ul {
    float: right;
}

div.tm ul li {
    float: left;
}

div.graph {
    padding: 4px;
    width: 100%;
}

div.bar_bg {
    background-color: red;
    width: 100%;
}

div.bar_bg div.title {
    width: 60px;
    float: left;
}

div.bar_bg div.bar {
    height: 20px;
    float: left;
    background-color: green;
}

.w100 {
    width: 100px;
    min-width: 100px;
}

.graph {
    padding: 10px;
    background-color: transparent;
}

.graph .horizontal {
    height: 20px;
    width: 100%;
}

.graph .horizontal .title {
    float: left;
    margin-right: 4px;
    margin-top: 8px;
    text-transform: uppercase;
}

.graph .horizontal .bar {
    float: left;
    color: #fff;
    padding: 4px;
    text-align: right;
}

.binout_selector {
    border: 1px solid #cccccc;
    padding-right: 20px;
}

.binout_selector h3 {
    padding: 2px;
}

.edit_task_main {
    background: #C1CDCD;
    width: 30%;
    height: 200px;
    padding: 10px 10px 10px 10px;
}

.edit_task_main div {
    margin-top: 20px;
    width: 50%;
    float: left;
}

div.comment {
    font-weight: 500;
}

div.comment div.author_info {
    float: left;
    width: 100px;
    padding-right: 10px;
}

div.comment div.txt {
    float: left;
    padding-right: 10px;
    white-space: pre-wrap;
    overflow: hidden;
}

div.comment div.at_time {
    float: left;
    width: 100px;
    padding-right: 10px;
    font-size: 0.9em;
    color: #222222;
}

div.comment div.opt {
    float: right;
    width: 100px;
}

.has_comment, .has_comment:hover {
    background: transparent url(/images/comment_blue.png) no-repeat scroll center center;
    color: #fff !important;
    padding: 4px 6px;
    font-size: 0.9em;
}

.no_comment, .no_comment:hover {
    background: transparent url(/images/comment_white.png) no-repeat scroll left center;
    padding-left: 20px !important;
    color: transparent !important;
    padding-top: 6px;
}

.opaque {
    background-color: rgba(255, 255, 255, 0.6);
}

#message {
    width: 350px;
    float: right;
    height: 35px;
    padding: 1em;
    background-color: #ffc;
    border: 1px solid #dda;
}

.notification {
    background: transparent url(/images/notification_16.png) no-repeat scroll left center;
    padding-left: 20px;
}

.new {
    font-weight: 500;
}

.notification .message {
    padding: 10px;
}

.unread_notifications_badge {
    padding: 2px 8px;
    border-radius: 30px;
    background-color: #ccc;
    color: white;
    font-size: 0.8em;
}

.unread_notifications_badge.unread_exists {
    background-color: #CC0000;
    font-weight: bold;
}


#notification-center-wrapper {
    position: fixed;
    z-index: 10000;
    /* Slide out the full viewport height so long lists scroll inside
       the panel instead of bleeding past the bottom of the screen.
       The 56px top offset matches the page header so the panel sits
       flush below it; the calc() reserves only that height for the
       header, the rest is the panel. */
    width: 360px;
    top: 56px;
    right: 0px;
    bottom: 0px;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 10px -6px;
    border: 1px solid #ccc;
    background-color: #fff;
    overflow: hidden;
}

#notification-center-wrapper .notification_center_container {
    flex: 1 1 auto;
    overflow-y: auto;
}

#notification-center-wrapper .panel-footer {
    flex: 0 0 auto;
}

.notification_center_container, .d3view_apps_dropdown_container {
    padding: 10px;
}

.notification_center_container a {
    color: black !important;
}

.notification_center_contentview {
    padding: 10px;
    width: 100%;
}

.notification_center_container .noti_controls {
    margin-bottom: 10px;
    font-size: 0.95em;
}

.notification_center_container .noti_area {
    min-height: 200px;
    overflow-y: auto;
}

.notification_center_container .arrowcontainer, .d3view_apps_dropdown_container .arrowcontainer {
    position: absolute;
    top: -10px;
}

.notification_center_container .arrowcontainer .arrow_outer, .d3view_apps_dropdown_container .arrowcontainer .arrow_outer {
    float: left;
    position: relative;
    left: 20px;
    border-bottom: 10px solid #ddd;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.notification_center_container .arrowcontainer .arrow_inner, .d3view_apps_dropdown_container .arrowcontainer .arrow_inner {
    float: left;
    position: relative;
    left: 1px;
    top: 1px;
    border-bottom: 9px solid white;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}

#notification-center-wrapper .panel-footer i {
    cursor: pointer;
}


.d3view_apps_dropdown_container .app_btn {
    padding: 5px 15px;
}

.d3view_apps_dropdown_container .app_btn:hover {
    background-color: #efefef;
}

.d3view_apps_dropdown_container .app_btn:active {
    background-color: #428bca;
}

.d3view_apps_dropdown_container .app_btn a {
    display: inline-block;
    color: black !important;
    width: 100%;
}

.d3view_apps_dropdown_container .app_btn:active a {
    color: white !important;
}

.mw100 {
    width: 100px;
}

.inplaceeditor-saving {
    background: url("images/spinner.gif") no-repeat scroll center center;
}

ul.thead {
    font-weight: 500;
}

.open_icon {
    background: transparent url('/images/arrow_right.png') no-repeat scroll 0 0;
    padding-left: 20px;
}

.close {
    background: transparent url('/images/arrow_down.gif') no-repeat scroll 0 0;
    padding-left: 20px;
}

.hor_bar {
    background: transparent url('/images/bar.gif') repeat-x scroll 0 0;
}

.movie {
    background: transparent url(/images/black_play.png) no-repeat scroll center center;
}

.gradient_header {
    background: transparent url(/images/gradient_header.png) repeat-x scroll left top;
}

.simlyzer {
    background-image: url('/images/simlyzer_16.png') !important;
}

.job_status {
    padding: 8px;
}

.job_new {
    background: transparent url('/images/incoming_16.png') no-repeat scroll left center;
    padding: 4px;
}

.job_submitted, .job_launched {
    background: transparent url(/images/rocket_12.png) no-repeat scroll left center;
}

.job_failed_to_submit, .job_error {
    background: transparent url('/images/error_20.png') no-repeat scroll left center;
}

.job_queued, .job_q {
    background: transparent url('/images/waiting_16.png') no-repeat scroll left center;
}

.job_staging_down {
    background: transparent url('/images/blue_arrow_down_16.png') no-repeat scroll left center;
}

.job_running, .job_r, .job_solving {
    background: transparent url('/images/spinner.gif') no-repeat scroll left center;
}

.job_staging_up {
    background: transparent url('/images/blue_arrow_up_16.png') no-repeat scroll left center;
}

.job_simlyzing, .job_simlyzing_templates, .job_simlyzing_graphics {
    background: transparent url('/images/simlyzing.gif') no-repeat scroll left center;
    padding: 4px;
}

.job_completed, .job_finished, .job_complete, .job_c {
    background: transparent url('/images/status_completed_16.png') no-repeat scroll left center;
}

.job_exiting {
    background: transparent url('/images/png') no-repeat scroll left center;
}

.job_unknown {
    background: transparent url('/images/unknown_status_16.png') no-repeat scroll left center;
}

.job_hanging {
    background-image: url("/images/hanger_16.png");
}

.user_name {
    text-transform: smallcaps;
    font-weight: 500;
}

.attachmentset_li {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 10px;
}

.nipple {
    border-color: #424242 transparent -moz-use-text-color;
    border-style: solid solid none;
    border-width: 6px 6px 0;
    position: absolute;
    margin-left: 10px;
    height: 0;
    width: 0;
    border: 2px solid #ddd;
}

.sim_deswrapper {
    margin-left: 210px;
}

.sidepod {
    padding: 10px;
    background-color: #f4f4ee;
    margin-bottom: 20px;
}

.sidepod ul.menu li {
    padding: 10px 0px;
}

.softcorner {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.mildcorner {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.d3hsp_menu {
    padding: 10px;
    background-color: #f6f6ea;
    margin-bottom: 10px;
}

div.object_create_info {
    padding: 20px;
    margin-top: 60px;
    width: 400px;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
    background: transparent -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
    background-color: #eee;
    color: #fff !important;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

div.object_create_info .title {
    text-align: center;
    border: 0px;
}

.number_box {
    padding: 10px;
    text-align: center;
    width: 100px;
    margin-bottom: 10px;
    line-height: 14px;
    font-size: 1.4em;
    color: #fff;
    background-color: #aaa;
}

.number_box .var {
    line-height: 24px;
}

.center_align {
    margin-left: auto;
    margin-right: auto;
}

.double_arrow {
    color: #fff;
}

.delta {
    font-weight: 500;
    font-size: 1.4em;
    background-color: #dddddd;
    padding: 10px;
}

.positive {
    color: #fc575e;
}

.negative {
    color: #ddd;
}

.symbol {
    font-size: 1.4em;
    font-weight: 500;
    color: #4ebaff;
}

.symbol:hover {
    color: #fc575e;
}

.more_wrapper {
    display: block;
    text-align: right;
    border-top: 1px solid #dddddd;
}

.more_button {
    -moz-border-radius: 0px 0px 5px 5px;
    background-color: #dddddd;
    color: #fff;
    padding: 4px 8px;
}

div.control_slider {
    width: 256px;
    margin: 10px 0;
    background-color: #ccc;
    height: 10px;
    position: relative;
}

div.control_slider div.control_handle {
    width: 10px;
    height: 15px;
    background-color: #f00;
    cursor: move;
    position: absolute;
}

table.srs_compare_grid td {
    max-width: 100px;
    overflow: hidden;
}

tr

.500
_values td {
    font-weight: 500;
}

.bar_chart {
    width: 100%;
}

.bar_chart td {
    border: 0px;
    margin: 0px;
}

.bar_chart td:first-child {
    padding-right: 6px;
    width: 10%;
    border-right: 2px solid #ccc;
    width: 20%;
}

.user_status {
    padding-left: 20px !important;
    margin-bottom: 4px;
    color: rgb(160, 160, 160);
}

.user_online_status {
    padding-left: 16px;
}

.user_offline {
    background: transparent url(/images/circles_sprite.png) no-repeat scroll left -27px;
}

.user_idle {
    background: transparent url(/images/circles_sprite.png) no-repeat scroll left -49.5px;
}

.user_online {
    background: transparent url(/images/circles_sprite.png) no-repeat scroll left -93px;
}

.meta_data {
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 2px;
    color: #888;
}

.processing {
    background: transparent url(/images/loading_hor.gif) no-repeat scroll left center;
    margin-left: -2000px;
    overflow: hidden;
}

.search_field {
    -moz-border-radius: 10px;
    background: transparent url(/images/search.gif) no-repeat scroll right top;
}

.lbg {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.8)), color-stop(1, transparent));
    background-repeat: repeat-x;
}

span.play {
    background: url(/images/play_hue0_24px.png) no-repeat scroll 0 0 transparent;
    height: 24px !important;
    display: none;
    left: 2%;
    position: absolute;
    top: 2%;
    width: 24px;
}

a:hover span.play {
    background-position: 0 100%;
    display: block;
}

span.enlarge {
    background: transparent url(/images/button_plus.png) no-repeat scroll 0 0;
    position: absolute;
    display: none;
    top: 0%;
    right: 60px;
    width: 24px;
    height: 24px;
}

a:hover span.enlarge {
    background-position: 0 100%;
    display: block;
}

span.count_num {
    background: transparent url(/images/count_bg_sprite2.png) no-repeat scroll 5px 0;
    position: absolute;
    font-size: 9px;
    color: #fff;
    padding-top: 2px;
    height: 30px;
    width: 44px;
    text-align: center;
    vertical-align: center;
    margin-top: -24px;
    margin-left: -14px;
}

.ddbutton {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8) url(/images/drop_down.png) no-repeat scroll right center;
    padding-right: 20px !important;
    padding-left: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.red {
    color: red;
}

.gray {
    color: rgba(0, 0, 0, 0.4);
}

.back_button {
    background: transparent url(/images/bc_bg_sprite.png) no-repeat scroll 0 -26px;
    padding: 4px;
    padding-left: 14px !important;
    color: #fff !important;
}

table.two_columns, table.two_columns tbody {
    border: 0px;
}

table.two_columns tr:nth-child(odd) td {
    font-weight: 500;
    background-color: transparent;
}

table.two_columns td:first-child {
    font-weight: 500;
    color: #333;
}

table.two_columns td:last-child {
    text-align: right;
}

.elapsed_time {
    padding: 2px 12px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #f7f7f7;
    color: #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.total_mass {
    padding: 2px 12px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: orange;
    color: #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.part_mass {
    padding: 2px 12px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #11ccff;
    color: #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.normal_termination {
    color: #00bb44;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 500;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.hover_pill {
    color: var(--foreground-color,#000) !important;
    padding: 2px 4px;
}

.hover_pill:hover {
    background-color: #000;
    color: #fff !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    text-decoration: none;
}


._header {
    margin-bottom: 6px;
    background-color: #555;
    border-bottom: 1px solid #ddd;
    color: #fff;
    padding: 4px;
}

.sep_r {
    border-right: 1px dashed #ddd;
    padding-right: 20px;
    margin-right: 20px;
}

.meter {
    background-color: transparent;
}

.info_box {
    padding: 12px;
    background: rgba(0, 0, 0, 0.4) -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.5)));
    background: rgba(0, 0, 0, 0.4) -moz-linear-gradient(top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0));
}

.show_more_content {
    padding: 6px;
    border: 1px solid #ddd;
    border-bottom: 0px;
}

.show_more_button_wrapper {
    border-top: 1px solid #ddd;
    display: block;
}

.show_more_button {
    background-color: #aaa;
    color: #fff !important;
    font-size: 0.9em;
    text-transform: uppercase;
    font-variant: small-caps;
    padding: 2px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
}


.tree-browser {
    border-top: 1px solid #D8D8D8;
    border-left: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    font-size: 90%;
    margin: 0;
    margin-bottom: 1em;
}

.tree-browser th {
    background-color: #EAEAEA;
    color: #999;
    padding: 0.5em .3em;
    font-family: var(--font-family-mono);
    border-bottom: 1px solid #D8D8D8;
    font-weight: normal;
}

.tree-browser td {
    background: #F8F8F8 url(/images/row_bg.png) 0 100% repeat-x;
    padding: .5em .3em;
    color: #484848;
    border-bottom: 1px solid #E1E1E1;
}

.view_status {
}

.not_viewed {
    padding: 4px;
    position: relative;
    left: 0px;
    top: 20px;
    width: 20px;
    padding: 12px;
    background: transparent url(/images/new.png) no-repeat scroll 0 0;
}

.viewed {
    padding: 0px;
    margin: 0px;
    width: 0px;
    height: 0px;
    display: none;
}

.line_num {
    color: #222;
    background-color: #ddd;
    padding: 6px;
}

.blue_box {
    border: 1px solid #daeaff;
    background-color: #f6faff;
    padding: 12px;
}

.green_box {
    border: 1px solid #accbac;
    background-color: honeydew;
    padding: 12px;
}

.nipple_nw {
    background-image: url('/images/nipple/nipple_arrow_top.png') scroll top 10px;
}

.response_create_form {
    padding: 20px;
    border-radius: 6px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid #eee;
}

.settings_container {
    color: #fff;
    background-color: #e6eaed;
    border: 1px solid #98a7b3;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin: 20px 0px;
    padding: 18px;
}

div.autocomplete {
    position: absolute;
    width: 250px;
    background-color: white;
    border: 1px solid #888;
    margin: 0;
    padding: 0;
}

div.autocomplete ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

div.autocomplete ul li.selected {
    background-color: #ffe8a6;
}

div.autocomplete ul li {
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 8px 14px;
    height: 32px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}

.scalar_row:hover {
    background-color: #f3f6f9;
    font-weight: 500;
    border: 1px solid #000;
}

.scalar_name, .scalar_name a {
    text-transform: capitalize;
    font-weight: 500;
}

.scalar_value {
    text-align: right;
    color: #222;
}

.panel_window {
    padding: 4px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.panel_window .panel_scroll_bar {
    padding-left: 8px;
}

.panel_window .panel_console {
}

.full_screen {
    position: absolute;
    background-color: #fff;
    left: 0px;
    top: 0px;
    width: 100%;
    min-height: 100%;
}

img.reflect {
    -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottombottom, from(transparent), color-stop(.7, transparent), to(white));
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 3px solid #666;
}

.unit_label {
    color: #bbb;
    font-weight: normal;
}

.description {
    color: #222;
    line-height: 1.9em;
}

.search_results {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 4px;
    max-height: 200px;
    overflow: scroll;
}

.obj_selector {
    padding: 4px 8px;
    background-color: #eee;
    border: 1px solid #ddd;
    max-width: 120px;
}

span.code {
    font-size: 9px;
    background-color: #eee;
    color: #333;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}

.drag_handle {
    cursor: move;
}

.dock_right {
    position: fixed;
    right: 0px;
    width: 80px;
    background-color: #fff;
    border: 1px solid #bbb;
    border-right: 0px;
    -moz-border-radius: 6px 0px 0px 6px;
    -webkit-border-radius: 6px 0px 0px 6px;
    padding: 12px;
}

.dock_right ul li {
    display: block;
}

.dock_right ul li a {
    text-indent: -9999px;
}

.guide_curtain {
    background-color: #eee;
    opacity: 0.2;
    top: 0px;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
}

.guide_wrapper {
    z-index: 100;
    width: 200px;
    margin-top: 34px;
    background-color: #fff;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -webkit-box-shadow: 0 0 8px #333;
    -moz-box-shadow: 0 0 8px #333;
}

.guide_title {
    font-size: 18px;
}

.guide_body {
    display: block;
    padding: 12px;
}

.guide_arrow {
    background: transparent url(/images/guide_arrows.png) no-repeat scroll left -130px;
    width: 42px;
    height: 42px;
    position: absolute;
    left: 20px;
    top: -38px;
}

.guide_nav {
    padding: 12px;
    text-align: right;
    clear: both;
    display: block;
}

.guide_nav_button {
    background: -moz-linear-gradient(top, #5CA9FF 0, #3D79C3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CA9FF), color-stop(100%, #3D79C3));
    background-color: #4A95E0;
    border: solid 1px #4B5D7E;
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 75%;
    font-weight: 500;
    margin-left: 6px;
    min-width: 40px;
    padding: 3px 5px;
    text-align: center;
    text-decoration: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.guide_next {
    font-weight: 500;
    margin-left: 12px;
}

.guide_prev {
    font-weight: 500;
}

.guide_stop {
    border: 1px solid #f75d59 !important;
}

.border_radius {
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.park_ne {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 1px solid #fff;
    padding: 6px;
    width: 60px;
    margin-right: -90px;
    right: 0px;
    -moz-border-radius: 0px 6px 6px 0px;
    -webkit-border-radius: 0px 6px 6px 0px;
}

.slash {
    text-indent: -999px;
    font-weight: 500;
    margin-right: 4px;
    margin-left: 4px;
}

.slash::after {
    content: " /";
}

.hspacer {
    margin-left: 8px;
}

.fslash {
    padding-left: 4px;
    padding-right: 4px;
}

.fslash:before {
    content: "/";
}

.disable {
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 12px;
}

.mini_ddb {
    border: 1px solid #bbb;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #eee;
    padding: 4px;
    text-decoration: none;
    color: #333 !important;
}

.mini_ddb:hover {
    background-color: #ddd;
    border: 1px solid #ddd;
    text-decoration: none;
}

.mini_ddb:active {
    background-color: #f2f2f2;
}

.mini_ddb > span {
    width: 20px;
    background: transparent url("/images/mini_switcher.png") no-repeat scroll right center !important;
    border-left: 2px solid transparent;
}

div.page_navigation {
    padding: 8px 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    text-align: right;
    background-color: #eee;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ddd;
    clear: both;
    text-align: center;
}

.load_more {
    width: 100%;
    margin: 12px 0px !important;
    line-height: 2em;
    padding: 12px 4px;
    text-align: center;
    margin-bottom: 40px;
}

ul.page_links {
    clear: both;
}

ul.page_links li {
    float: left;
    display: inline;
    margin-right: 4px;
}

ul.page_links li a {
}

ul.page_links li.active a {
    border: 1px solid #888;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    font-weight: 500;
    padding: 2px;
}

.action_button {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #444 !important;
    border: 1px solid #ddd;
    padding: 4px 12px;
    background-color: #eee;
}

.action_button:hover {
    border: 1px solid #bbbb;
}

.action_button:active {
    background-color: #fff;
    border: 1px solid #ddd;
}

.paper_shadow:before, .paper_shadow:after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: '';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.paper_shadow:after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

.simgroup_flat_view li {
    padding: 8px;
    border: 2px solid transparent;
}

.simgroup_flat_view li .tn {
    width: 80px;
    float: left;
    display: inline;
    margin-right: 6px;
}

.simgroup_flat_view li .desc {
    float: left;
}

.simgroup_flat_view li.active, .simgroup_flat_view li.active:hover {
    border: 2px solid #666;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.simgroup_flat_view li:hover {
    border: 2px solid #ddd;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

input.search_input {
    background: transparent url("/images/search.gif") no-repeat scroll right center;
}

.transparent_inputs input {
    border: 0px;
}

.transparent_inpts input:focus {
    border: 1px solid #ddd;
}

.hover_tip span {
    font-size: 0.9em;
    position: absolute;
    display: none;
    margin-top: 3em;
    padding: 6px;
    color: #fff;
    z-index: 2;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #000 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
    background: #000 -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
}

.hover_tip:hover span {
    display: inline;
}

fieldset.divider, tbody.divider {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #f7f7f7;
    border: 1px solid #EEE;
    margin-bottom: 1em;
    padding: 8px;
}

fieldset.divider .legend {
    border-bottom: 1px solid #ddd;
    margin: 8px 0px;
    color: #333;
    padding-bottom: 6px;
    font-size: 1.4em;
}

fieldset.form_block {
    background-color: #ddd;
    padding: 0px;
    margin: 8px 0px;
    background: transparent -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
    background: transparent -moz-linear-gradient(top bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
}

.strong {
    font-weight: 500;
}

.transition {
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
}


.solution_list_header {
    background-color: #444;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.layout_widget {
    border: 2px solid red;
}

.layout_column {
    padding-right: 10px;
}

.widget {
    margin-bottom: 20px;
}

.widget_header {
    background-color: #666;
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
    background: #bbb -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
    background: #bbb -moz-linear-gradient(top bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
    padding-left: 6px;
    line-height: 2em;
}

.widget_title {
    color: #444;
    font-size: 1em;
}

.widget_content {
    padding: 8px;
    border: 1px solid #ddd;
    border-top: 0px;
    -moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    max-height: 400px;
    overflow: auto;
    font-size: 0.9em;
}

table.data_table {
    font-size: 1.1em;
}

table.data_table td {
    text-align: right;
}

ul.icons_only > li {
    margin: 0px;
}

ul.icons_only > li > a {
    text-indent: -200000px;
    padding-left: 0px !important;
    min-width: 0px !important;
}

ul.grid > li.grid {
    width: 24px;
    text-indent: -200000px;
    display: inline-block;
}

.wider_gap > li {
    margin-right: 20px !important;
}

.draggable:hover {
    cursor: "move";
}

.srs_row {
    border: 0px;
    background-color: #eee;
}

.srs_row + .srs_details {
    display: block;
    border-bottom: 1px dotted #eee;
}

.simlytiks_content {
    background-color: #ddd;
}

.blurb {
    padding: 22px;
    border: 1px solid #f7f7f7;
    margin-bottom: 8px;
    background-color: #f0f8ff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.pill_button {
    color: #555 !important;
    padding-left: 4px;
    padding-right: 4px;
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

svg line {
    shape-rendering: crispEdges;
}

table.two_bar {
}

table.two_bar td:first-child {
    width: 80px;
    font-weight: 500;
    text-align: right;
    padding-right: 20px;
}

.sol_cluster {
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.window {
    padding: 12px;
    border: 1px solid #eee;
}

.section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.section p {
    line-height: 2em;
}

.menu_header {
    font-size: 1.2em;
    color: var(--foreground-color,#000);
    margin-top: 22px !important;
}

.menu_header.no_margin {
    margin-top: 0px !important;
}

.inline_links a {
    color: #555;
}

.inline_links a:hover {
    color: #0064ae;
    text-decoration: underline;
}

.linen_pattern {
    background: #fff url('/images/linen_pattern.png') repeat scroll 0 0;
}

.linen_pattern_dark {
    background: #fff url('/images/linen_pattern_2.png') repeat scroll 0 0;
}

.wood_pattern {
    background: #fff url('/images/wood_pattern.png') repeat scroll 0 0;
}

.dotted_pattern {
    background: #fff url('/images/bg_3.png') repeat scroll 0 0;
}

.options_bar {
    background-color: #888;
    color: var(--foreground-color,#000);
    padding: 12px 20px;
    opacity: 0.8;
    filter: alpha(opacity=8);
    -moz-opacity: 0.8;
}

.options_bar > ul > li > a {
    color: #fff !important;
}

.light_border {
    border: 2px solid #eee;
}

ul.check_list li {
    padding: 6px 2px;
}

ul.check_list li label {
    display: block;
}

ul.check_list li input {
    margin-right: 8px;
}

ul.check_list li:hover {
    background-color: #f7f7f7;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.bulk_actions {
    animation-name: fadeInDown;
    animation-duration: 0.5s;
    -webkit-animation-name: fadeInDown;
    -webkit-animation-duration: 0.5s;
    position: fixed;
    min-width: 600px;
    border: 1px solid #f2f2f2;
    background-color: #444;
    background-image: -webkit-linear-gradient(left top, from(rgba(255, 255, 255, 1.0)), to(rgba(255, 255, 255, 0.1)));
    background-image: -moz-linear-gradient(top bottom, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.1));
    padding: 12px 16px;
    border-radius: 6px;
}

.bulk_actions a.bulk_action, .bulk_actions a.multiple_select_action, .bulk_actions a.bulk_action_drop_down_list {
    color: #fff;
}

.image_thumbnails {
    margin: 20px 0px;
}

.image_thumbnails li {
    padding: 12px;
    border: 2px solid #eee;
    margin-right: 20px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

.image_thumnails li img {
    width: 200px;
    height: 200px;
}

.image_thumbnails li .caption {
    display: block;
    font-size: 0.9em;
    margin-bottom: 12px;
}

.appear {
}

.laptop_screen {
    float: left;
    padding: 2.5%;
    padding-bottom: 3%;
    background-color: rgba(85, 85, 85, 0.019999999999999976);
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(105deg, rgba(85, 85, 85, 0.19999999999999998), rgba(85, 85, 85, 0.019999999999999976));
    background-image: -ms-linear-gradient(105deg, rgba(85, 85, 85, 0.19999999999999998), rgba(85, 85, 85, 0.019999999999999976));
    background-image: -webkit-linear-gradient(105deg, rgba(85, 85, 85, 0.19999999999999998), rgba(85, 85, 85, 0.019999999999999976));
    background-image: -o-linear-gradient(105deg, rgba(85, 85, 85, 0.19999999999999998), rgba(85, 85, 85, 0.019999999999999976));
    background-image: linear-gradient(105deg, rgba(85, 85, 85, 0.19999999999999998), rgba(85, 85, 85, 0.019999999999999976));
    -webkit-border-radius: 15px 15px 8px 8px;
    -moz-border-radius: 15px 15px 8px 8px;
    border-radius: 15px 15px 8px 8px;
    position: relative;
    border: 2px solid #6F6F6F;
    -webkit-box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.09999999999999998);
    -moz-box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.09999999999999998);
    box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.09999999999999998);
    overflow: visible;
    margin: 12px 80px 12px 20px;
}

.laptop_screen .laptop_texture {
    width: 100%;
    height: 100%;
    position: relative;
}

.laptop_screen .laptop_bottom {
    left: -10%;
    right: -10%;
    top: 100%;
    margin-top: 1px;
    height: 3.5%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#555555', GradientType=0);
    background-color: #9C9C9C;
    background-image: -moz-linear-gradient(top, #CCC, #555);
    background-image: -ms-linear-gradient(top, #CCC, #555);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC), to(#555));
    background-image: -webkit-linear-gradient(top, #CCC, #555);
    background-image: -o-linear-gradient(top, #CCC, #555);
    background-image: linear-gradient(top, #CCC, #555);
    background-repeat: repeat-x;
    border-color: #555 #555 #2F2F2F;
    border-bottom-left-radius: 160px 18px;
    border-bottom-right-radius: 160px 18px;
    border-top: 3px solid #E1E1E1;
    position: absolute;
}

.caption {
    text-align: center;
    padding: 8px;
    background-color: #fff;
    font-weight: 500;
    font-size: 10px;
}

.search_input {
    border: 1px solid #fff;
    background-color: red;
    line-height: 2em;
}

.search_input label {
    float: left;
    width: 18%;
    background-color: #ddd;
}

.search_input input {
    float: right;
    border: 0px;
    background: transparent;
}

.hover_highlight {
    border: 1px solid transparent;
}

.hover_highlight:hover {
    background-color: #eee;
    border: 1px solid #ccc;
}

.requesting {
    border: 2px dotted #ddd;
}

.dark_border {
    border: 2px solid #ddd;
}

.blue_border {
    border: 2px solid #00ADEE;
}

.drop-down-button {
    -webkit-transition: background-color 0.3s ease-in;
    padding: 4px;
    padding-right: 20px;
    background-image: url(/images/option_arrow.gif);
    background-repeat: no-repeat;
    background-position: 94% center;
    background-color: #eee;
    border: 1px solid #888;
    color: var(--foreground-color,#000);
}

.drop-down-button span {
    border-right: 1px solid #888;
    padding-left: 8px;
    padding-right: 6px;
}

.drop-down-button:hover {
    background-color: #888;
    border: 1px solid #888;
    color: #fff;
}

.show-hide-trigger {
}

.show-hide-trigger:hover {
}

.show-hide-trigger .show-hide {
    opacity: 0.0;
    height: auto;
    -webkit-transition-property: opacity,
    height: -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear, ease-in;
}

.show-hide-trigger:hover .show-hide {
    opacity: 1;
    z-index: 120;
    height: auto;
}

.show-hide-trigger .hide-show {
    opacity: 1.0;
    height: auto;
    -webkit-transition: opacity 0.2s ease-in;
    -webkit-transition-property: opacity,
    height: -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear, ease-in;
}

.show-hide-trigger:hover .hide-show {
    opacity: 0.0;
    height: 0px;
}

.no-csstransforms .show-hide-trigger .show-hide, .no-csstransforms .show-hide-trigger:hover .hide-show {
    display: none;
}

.no-csstransforms .show-hide-trigger .hide-show, .no-csstransforms .show-hide-trigger:hover .show-hide {
    display: block;
}

.page {
    background-color: #fff;
    padding: 14px;
}

.auto_complete_list {
    background-color: #fff;
    padding: 8px;
    position: absolute;
    max-height: 400px;
    overflow: scroll;
    min-width: 200px;
}

.auto_complete_list ul li {
    padding: 4px 2px;
}

.auto_complete_list ul li:hover {
    background-color: #eee;
}

.ghost_text {
    color: #999;
}

.task_row:hover, .task_row:hover .user_options {
    background-color: #f3f6f9;
    border: 1px solid #eee;
}

.log_row {
}

.log_error {
    background-color: #ffbfbf;
    color: #444;
}

.log_notice {
    background-color: #eee;
    color: #444;
}

.log_warning {
    background-color: #ffcc33;
    color: #444;
}


.info_blurb {
    font-size: 1.0em;
    color: #666;
    background-color: #eee;
    border: 1px solid #0099ff;
    box-shadow: #555 0 0 8px;
    box-shadow: 0 0 8px #888;
    margin: 8px 0px;
    padding: 8px;
    border-radius: 4px;
}

.srs_checkbox {
    width: 40px;
    min-width: 40px;
    text-align: center;
}

.srs_thumbnail {
    width: 80px;
    min-width: 80px;
    text-align: center;
    padding: 12px;
}

.srs_name {
    text-align: left;
}

.srs_status {
    width: 80px;
    min-width: 80px;
    text-align: center !important;
}

.srs_created_by {
    width: 80px;
    min-width: 80px;
}

.beta {
    background-color: #999;
    color: #fff;
    width: 40px;
    padding: 2px 6px;
    font-size: 0.9em;
}

.file_type {
    width: 80px;
    background-color: #888;
    color: #fff;
    font-size: 0.9em;
    padding: 2px 6px;
}


/* Simlytiks */


.border-right {
    border-right: 1px solid #eee;
}


/* File Explorer */


.file_explorer {
    padding-top: 8px;
    width: 90%;
    margin: auto;
    background-color: white;
    box-shadow: 0px 3px 6px;
}


.file_explorer.browsing-only {
    width: 100% !important;
    box-shadow: none !important;
}

.file_browser.browsing-only .fe-body {
    border-left: none !important;
}

.file_browser .fe-body {
    border-left: 1px solid #ddd;
}

.file_explorer .breadcrumb {
    margin-bottom: 7px;
    border: 1px solid #dedede;
    background: none;
    padding: 5px 10px;
    margin-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    min-width: 500px;
}

.file_explorer .fe-body-header {
    border-bottom: 1px solid #ccc;
}

.file_explorer .fe-body-header-breadcrumbs .btn {
    vertical-align: top;
}

.file_explorer .fe-body-content-wrapper {
}

.file_explorer .fe-body-content-wrapper .col-xs-10 {
    background-color: white;
    border-left: 1px solid #ddd;
}


.file_explorer .fe-body-content-wrapper tr td:first-of-type a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    display: inline-block;
    max-width: 400px;
}

.file_explorer .fe-body-content-wrapper .col-xs-2 {
    max-height: 500px;
    overflow-y: auto;
}

.file_explorer .fe-body-content-wrapper .col-xs-2 label {
    padding-top: 5px;
}

.file_explorer .fe-body-content-wrapper .col-xs-2 .favoritesList, .file_explorer .fe-body-content-wrapper .col-xs-2 .recentList {
    padding: 0px 10px 10px 10px;
    font-size: 0.8em;
}

.file_explorer .fe-body-content-wrapper .col-xs-2 .favoritesList .clickable, .file_explorer .fe-body-content-wrapper .col-xs-2 .recentList .clickable {
    padding: 5px 5px 0px 5px;
}

.file_explorer .fe-body-content-wrapper .col-xs-2 .favoritesList .clickable:hover, .file_explorer .fe-body-content-wrapper .col-xs-2 .recentList .clickable:hover {
    font-weight: bold;
}

.file_explorer .fe-body-content-wrapper .fav_list_wrapper {
}

.file_explorer .fe-body-content-wrapper .recent_list_wrapper .clearRecentList {
    font-size: 10px;
    cursor: pointer;
    color: #888;
}

.file_explorer .fe-body {
    display: block;
    clear: both;
}

.file_explorer .fe-body-content-wrapper .fe-body-content {
    min-height: 310px;
    max-height: 610px;
    overflow-y: auto;
}

.file_explorer .fe-footer {
    border-top: 1px solid #ddd;
    padding: 10px;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}

.file_explorer .fe-footer .filesselectedindicator {
    font-size: 12px;
    font-weight: bold;
}

.file_explorer .fe-footer .selectedFilesList li {
    padding: 5px 10px;
}

.file_explorer .fe-footer .selectedFilesList li:hover {
    background-color: #efefef;
}


.tablesorter thead tr .tablesorter-header {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

.tablesorter thead tr .tablesorter-headerUnSorted {
    background-image: url(/images/tablesorter_bg.gif);
}

.tablesorter thead tr .tablesorter-headerAsc {
    background-image: url(/images/tablesorter_desc.gif);
}

.tablesorter thead tr .tablesorter-headerDesc {
    background-image: url(/images/tablesorter_asc.gif);
}

table.border-less td {
    border: 0px !important;
}

ul.list-group.border-less ul, ul.list-group.border-less li {
    border: 0px !important;
}


.modal-dialog-fullscreen {
    /* Rail-aware: clears the pin-left app rail via --d3v-rail-w (0 when no
       rail), so the rail stays visible instead of overlapping the modal's
       left edge (previously the rail was display:none'd for this case). */
    width: calc(99% - var(--d3v-rail-w, 0px)) !important;
    top: 6px;
    left: calc(6px + var(--d3v-rail-w, 0px));
    right: -6px;
    height: 98vh;
    bottom: 6px;
    padding: 0px;
    border-radius: 0px !important;
    margin: 0px !important;
    position: fixed;
}

.modal-dialog-fullscreen-inset {
    width: 98.5% !important;
    top: 20px;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 900px;
    border-radius: 0px !important;
}

.modal-dialog-halfscreen {
    width: 49% !important;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 900px;
    top: 12px;
    left: 8px;
    height: 100%;
    border-radius: 0px !important;
}

.modal-dialog-80screen {
    width: 79% !important;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 900px;
    top: 12px;
    left: 8px;
    height: 100%;
    border-radius: 0px !important;
}

.modal-dialog-70screen {
    width: 69% !important;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 900px;
    top: 12px;
    left: 8px;
    height: 100%;
    border-radius: 0px !important;
}

.modal-dialog-60screen {
    width: 69% !important;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 900px;
    top: 12px;
    left: 8px;
    height: 100%;
    border-radius: 0px !important;
}

.modal-dialog-right-sidebar {
    width: 260px;
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0px;
    height: 100%;
    margin: 0px;
}

.modal-dialog-left-sidebar {
    width: 260px !important;
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 0px;
    height: 100%;
    margin: 0px;
}

.modal-dialog-fullscreen .modal-title {
    line-height: 1.3;
}

.modal-dialog-fullscreen .modal-header {
    padding: 16px;
    border-radius: 0px;
}


.modal-flat {
}

.modal-flat .modal-header {
    background: none;
    padding: 12px;
}

.modal-flat .modal-title {
    color: var(--foreground-color,#000) !important;
}

.modal-flat .modal-content {
    box-shadow: none;
    border: 0px;
    border-radius: 0px
}


.modal-dialog-reader {
    width: 70% !important;
    min-width: 600px;
    margin: 0px !important;
    border-radius: 0px;
}

.modal-dialog-reader .modal-body {
    padding: 2px !important;
}

.modal-dialog-reader .modal-title {
    line-height: 1.8;
}

.modal-dialog-reader .modal-header {
    padding: 14px;
    border-radius: 0px;
}


table.vertical-borders {
    border-collapse: collapse;
}

table.vertical-borders tr {
    border: none;
}

table.vertical-borders td {
    border-right: solid 1px #f00;
    border-left: solid 1px #f00;
}


div.modal .row .selectpicker a span.text {
    background: none;
}

.axis text, #simlytiks .axis text, .simlytiks .axis text {
    font-weight: 400;
}

.ui-layout-container .ui-layout-center {
    padding: 10px !important;
    border: 0px !important;
}

.ui-layout-container .ui-layout-west {
    padding: 8px !important;
    border: 0px !important;
    border-right: 1px solid #ddd !important;
    background-color: #f5f5f5 !important;
    box-shadow: 2px 2px 6px 2px #eee;
}

.ui-layout-toggler {
    display: none !important;
}

/* The resizer is draggable by default, but background:none left it invisible, so
   nobody could tell the sidebar resizes. Give it a divider a user can see and aim at. */
.ui-layout-resizer {
    background: #e0e0e0 !important;
    cursor: col-resize !important;
    transition: background 0.2s ease;
}

.ui-layout-resizer:hover,
.ui-layout-resizer-dragging {
    background: #2c5282 !important;
}

.ui-layout-resizer-west:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ui-layout-resizer-west:hover:after,
.ui-layout-resizer-west.ui-layout-resizer-dragging:after {
    opacity: 0.9;
}

.ui-widget.content {
    background: none !important;
}

.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

.ui-sortable-placeholder {
    display: inline !important;
    height: 1em;
    min-width: 1em;
}

.ui-state-highlight {
    min-height: 40px;
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
}

#newlayout {
    clear: both;
}

.glyphicon.spinner {
    -animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}


@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

div.pageContainer {
    padding-left: 12px;
    padding-top:12px;
}

div.pageContainer .newBtnContainer a, div#admin_page .page_header .newBtnContainer a {
    padding-top: 5px;
    padding-bottom: 5px;
}

div.pageContainer .newBtnContainer a.btn:hover {
    color: #fff;
    background-color: #3276b1;
    border-color: #285e8e;
}

div.pageTabsContainer {
}

div.pageTabsContainer ul#tabsList {
    margin-bottom: 15px;
}

div.pageTabsContainer ul#tabsList li.lastopened {
    color: mediumvioletred;
    border-bottom: 1px solid;
}

div.pageTabsContainer ul#tabsList li.lastopened a, div.pageTabsContainer ul#tabsList li.lastopened span.glyphicon-remove {
    color: mediumvioletred !important;
}

div.pageTabsContainer .basicTxtInput {
    height: 30px;
}

div.pageTabsContainer .paginationArea {
}

div.pageTabsContainer .paginationArea .maxPageIndicator, div.paginationArea .maxPageIndicator {
    font-size: 0.9em;
    text-align: center;
    padding: 5px 10px;
    border-left: none;
}

div.pageTabsContainer .paginationArea .maxPageIndicator #targetPageNumber {
    padding: 5px 10px;
}

div.pageTabsContainer .paginationArea .paginationInputContainer {
    max-width: 240px;
}

.paginationArea button.btn-default {
    color: #888 !important;
}

.paginationArea button.btn-default:hover {
    color: #444 !important;
}

div#user-simmodel table tbody tr {
    cursor: pointer;
}

div.subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer .row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
}

ul.viewModeList li, ul.typesofInfoTab li {
    display: inline-block;
    border-radius: 30px;
}

ul.viewModeList li a, ul.typesofInfoTab li a {
    display: inline-block;
    padding: 5px 10px;
}

ul.viewModeList li:hover, ul.typesofInfoTab li:hover {
    background-color: #ddd;
}

ul.viewModeList li.active, ul.typesofInfoTab li.active {
    background-color: #428bca;
    color: white;
}

ul.viewModeList li.active a, ul.typesofInfoTab li.active a {
    color: white;
}

div.recordTab .headerRow {
    display: block;
    height: 30px;
    float: right;
}

div.recordTab hr {
    margin-top: 0px;
    margin-bottom: 15px;
}

div.recordTab .headerRow span.toolbarBtn span, div.tabContent .headerRow span.toolbarBtn span {
    padding: 7px;
    cursor: pointer;
    border: 1px #aaa solid;
    margin-left: 5px;
    border-radius: 30px;
}

div.recordTab .headerRow span.toolbarBtn span.threeD, div.tabContent .headerRow span.toolbarBtn span.threeD {
    height: 28px;
    line-height: 15px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    text-indent: -1px;
    border: 1px solid transparent;
}

div.recordTab .headerRow .toolbarBtn .popover li.threeDmodelItem, div.tabContent .headerRow .toolbarBtn .popover li.threeDmodelItem, div.tabContent .headerRow .toolbarBtn.threeD + .popover li.threeDmodelItem {
    list-style: none;
    display: inline-block;
    width: 100%;
    padding: 5px;
    cursor: pointer;
}

div.tabContent .headerRow .toolbarBtn.threeD {
    font-size: 11px;
    border-radius: 30px;
}

div.recordTab .headerRow .toolbarBtn .popover li.threeDmodelItem:hover, div.tabContent .headerRow .toolbarBtn .popover li.threeDmodelItem:hover, div.tabContent .headerRow .toolbarBtn.threeD + .popover li.threeDmodelItem:hover {
    background-color: #efefef;
}

div.recordTab .headerRow span.toolbarBtn span:not(.threeD):hover, div.tabContent .headerRow span.toolbarBtn span:not(.threeD):hover {
    background-color: #428bca;
    border: 1px #428bca solid;
    color: white;
}

div.recordTab .headerRow div.dropdown {
    display: inline-block;
    top: -2px;
}

div.recordTab .headerRow div.dropdown button {
    border-radius: 30px;
}

div.recordTab .tablePagination {
    width: 150px;
}

div.recordTab input.form-control, div.tabContent input.form-control {
    font-size: 0.9em;
}

div.subtabsRenderingArea div#responses .row, div.subtabsRenderingArea div#files .row, div.subtabsRenderingArea div#parts .row, div.subtabsRenderingArea div#comments .row {
    margin-bottom: 10px;
}

div.subtabsRenderingArea div#responses .row.optionsAndFunctions, div.subtabsRenderingArea div#files .row.optionsAndFunctions, div.subtabsRenderingArea div#parts .row.optionsAndFunctions {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: white;
    z-index: 1000;
    margin-right: 0px;
}

div.subtabsRenderingArea div#responses .row.optionsAndFunctions.floatmode, div.subtabsRenderingArea div#files .row.optionsAndFunctions.floatmode, div.subtabsRenderingArea div#parts .row.optionsAndFunctions.floatmode {
    box-shadow: 0 3px 5px -5px;
}

div.subtabsRenderingArea div#responses .row.optionsAndFunctions.floatmode.floatOnTop, div.subtabsRenderingArea div#files .row.optionsAndFunctions.floatmode.floatOnTop, div.subtabsRenderingArea div#parts .row.optionsAndFunctions.floatmode.floatOnTop {
    position: fixed;
    top: 72px;
    width: 80%;
}

div.subtabsRenderingArea div#responses .row.optionsAndFunctions .caretContainer, div.subtabsRenderingArea div#files .row.optionsAndFunctions .caretContainer, div.subtabsRenderingArea div#parts .row.optionsAndFunctions .caretContainer {
    position: relative;
    padding: 2px 14px 5px 10px;
    z-index: 1;
}

div.subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer, div.subtabsRenderingArea div#files .filesListContainer .filesMenuContainer, div.subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer {
    position: relative;
    float: right;
    width: 100%;
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
}

div.subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer h3, div.subtabsRenderingArea div#files .filesListContainer .filesMenuContainer h3, div.subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer h3 {
    padding-bottom: 5px;
}

div.subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer button, div.subtabsRenderingArea div#files .filesListContainer .filesMenuContainer button, div.subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer button {
    font-size: 0.9em;
}

div.subtabsRenderingArea div#responses .responsesListContainer .respMenuContainer ul.selectpicker a span.text, div.subtabsRenderingArea div#files .filesListContainer .filesMenuContainer ul.selectpicker a span.text, div.subtabsRenderingArea div#parts .partsListContainer .partsMenuContainer ul.selectpicker a span.text {
    background: none;
    font-size: 0.9em;
}

div.subtabsRenderingArea div#responses .responsesListHeader {
    padding-bottom: 55px;
}

div.subtabsRenderingArea div#responses .responsesListHeader input, div.subtabsRenderingArea div#files .filesListHeader input, div.subtabsRenderingArea div#parts .partsListHeader input {
    padding: 5px 10px;
}

div.subtabsRenderingArea div#responses .responsesListBody #pageSlider {
    width: 76%;
    margin: 0 auto;
    margin-bottom: 30px;
    height: 10px;
    top: 45px;
}

div.subtabsRenderingArea div#files .filesListBody #pageSlider, div.subtabsRenderingArea div#parts .partsListBody #pageSlider {
    width: 76%;
    margin: 0 auto;
    margin-bottom: 35px;
    height: 10px;
    top: 15px;
}

div.subtabsRenderingArea div#responses .recordTools.floatOnTop .responsesListBody #pageSlider {
    top: 54px;
}

div.subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle, div.subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle, div.subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle {
    top: -5px;
    height: 18px;
}

div.subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle:after, div.subtabsRenderingArea div#responses .responsesListBody #pageSlider .noUi-handle:before, div.subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle:after, div.subtabsRenderingArea div#files .filesListBody #pageSlider .noUi-handle:before, div.subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle:after, div.subtabsRenderingArea div#parts .partsListBody #pageSlider .noUi-handle:before {
    top: 1px;
}

div.subtabsRenderingArea div#responses .responsesListBody input, div.subtabsRenderingArea div#files .filesListBody input, div.subtabsRenderingArea div#parts .partsListBody input {
    padding: 5px 10px;
}

div.subtabsRenderingArea div#responses .responsesListBody ul.responsesList li, div.subtabsRenderingArea div#files .filesListBody ul.filesList li, div.subtabsRenderingArea div#parts .partsListBody ul.partsList li {
    margin-bottom: 1px;
}

div.subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a, div.subtabsRenderingArea div#files .filesListBody ul.filesList li a, div.subtabsRenderingArea div#parts .partsListBody ul.partsList li a {
    padding: 5px 10px;
    display: block;
}

div.subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a.selected, div.subtabsRenderingArea div#files .filesListBody ul.filesList li a.selected, div.subtabsRenderingArea div#parts .partsListBody ul.partsList li a.selected {
    background-color: #d9edf7;
    border: 1px solid #4b70bf;
}

div.subtabsRenderingArea div#responses .responsesListBody ul.responsesList li a:hover, div.subtabsRenderingArea div#files .filesListBody ul.filesList li a:hover, div.subtabsRenderingArea div#parts .partsListBody ul.partsList li a:hover {
    background-color: #eee;
}

div.subtabsRenderingArea div#responses .col-lg-9, div.subtabsRenderingArea div#files .col-lg-9, div.subtabsRenderingArea div#parts .col-lg-9 {
    padding-right: 0;
}

div.subtabsRenderingArea div#responses .responseItemsRenderingArea .dataCol {
    width: 49.5%;
    display: inline-block;
    vertical-align: top;
    overflow-x: scroll;
    overflow-y: scroll;
}

@keyframes flashborder {
    0% {
        border-color: #ddd;
    }
    50% {
        border-color: red;
    }
    100% {
        border-color: #ddd;
    }
}


@keyframes flashborder {
    0% {
        border-color: #ddd;
    }
    50% {
        border-color: red;
    }
    100% {
        border-color: #ddd;
    }
}

.flashborder {
    -webkit-animation-name: flashborder;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-name: flashborder;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

div.subtabsRenderingArea div#responses .responseItem {
}

div.responseItem.bookmarked, div.studyItem.bookmarked, table.responsesList tbody tr.bookmarked, .fileItemsRenderingArea table tbody tr.bookmarked, .tabContent table tbody tr.bookmarked {
    border-left: 3px solid #428bca !important;
}

div.responseItem.selected {
    border: 3px solid green !important;
}


.toolbarBtn .glyphicon.bookmarked {
    background-color: #428bca;
    color: white;
}

.responseItem.justbeencreated {
    box-shadow: 0px 0px 6px 0px #9dd2ff;
    border: 1px solid #428bca !important;
}

div.subtabsRenderingArea div#responses .responseItem.highlighted {
    border: 1px solid orange;
}

div.subtabsRenderingArea div#responses .responseItem.selected {
    border: 1px solid #4b70bf;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle {
    cursor: pointer;
    padding: 4px;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f3;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle h3 {
    float: left;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle.highlighted {
    background-color: orange;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle .respActionIcons {
    float: right;
    height: 0;
    position: relative;
    top: -6px;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle span.entypoGlyphicon {
    font-family: 'Entypo Glyphicons';
    font-size: 2.1em;
    padding: 2px 4px;
    cursor: pointer;
    text-shadow: 1px 1px white;
}

.responseItem .respTitle span.respactionbtn-icomoon {
    padding-top: 9px;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 8px;
    cursor: pointer;
    position: relative;
    top: -1px;
    text-shadow: 1px 1px white;
}

.responseItem .respTitle span.respactionbtn-icomoon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle span.entypoGlyphicon.commentExists {
    color: indianred;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle span.entypoGlyphicon.tbi {
    color: red;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle span.entypoGlyphicon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

div.responseItem .respTitle span.glyphicon {
    padding: 10px 4px;
}

div.respTitle span.glyphicon:hover {
    background-color: black;
    color: #f3f3f3;
    text-shadow: none;
}

.jqstooltip {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

div.subtabsRenderingArea div#responses .responseItem .respContent p.lead {
    margin-bottom: 2px;
    word-break: break-all;
}

div.subtabsRenderingArea div#responses .responseItem .respContent p.small {
    margin-bottom: 0px;
    color: #666;
}

div.subtabsRenderingArea div#responses .responseItem .respContent hr {
    margin: 5px 0;
}

div.subtabsRenderingArea div#responses .responseItem .respTitle.selected {
    background-color: #d9edf7;
}

div.subtabsRenderingArea div#responses .responseItem .respContent {
    padding: 10px;
}

.responseItem .respContent pre {
    max-height: 300px;
    background-color: #fff;
    color: var(--foreground-color,#000);
    font-size: 1.2em;
}

div.subtabsRenderingArea div#responses .responseItem .respContent .curveArea {
    padding-bottom: 10px;
    width: 100%;
    position: relative;
    height: 300px;
    display: inline-block;
}

div.subtabsRenderingArea div#files table, div.subtabsRenderingArea div#parts table {
    width: 100%;
    font-size: 0.9em;
}

div.subtabsRenderingArea div#files table tr, div.subtabsRenderingArea div#parts table tr, div#user-templates table tr {
    cursor: pointer;
}

div.subtabsRenderingArea div#files .contextMenuContainer, div.subtabsRenderingArea div#parts .contextMenuContainer {
    position: fixed;
    float: left;
}

div.pageTabsContainer ul#tabsList li:not(:first-child) a:not(.nonremovable), div.pageTabsContainer ul#recordTabs li:not(:first-child) a:not(.nonremovable) {
    padding-right: 30px;
}

div.pageTabsContainer ul#recordTabs li.lastopened {
    border-bottom: 1px solid;
    color: mediumvioletred;
}

div.pageTabsContainer ul#recordTabs li.lastopened a, div.pageTabsContainer ul#recordTabs li.lastopened span.glyphicon-remove {
    color: mediumvioletred !important;
}

div.pageTabsContainer .nav-tabs {
    margin-bottom: 15px;
}

div.pageContainer .contextMenuContainer {
    position: fixed;
    min-width: 190px;
    border: 1px solid #ddd;
    z-index: 100;
}

div.pageContainer .contextMenuContainer ul {
    background: white;
    padding: 2px;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
    -moz-box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;
    z-index: 99999;
}

div.pageContainer .contextMenuContainer ul li {
    padding: 4px 14px 4px 14px;
    list-style: none;
    cursor: pointer;
}

div.pageContainer .contextMenuContainer ul li.dangerous {
    background-color: #F2DEDE;
    color: #A74444;
}

div.pageContainer .contextMenuContainer ul li.dangerous:hover {
    background: #428bca;
    background: -webkit-linear-gradient(#0088cc, #0077b3);
    background: -o-linear-gradient(#0088cc, #0077b3);
    background: -moz-linear-gradient(#0088cc, #0077b3);
    background: linear-gradient(#0088cc, #0077b3);
    color: white;
}

div.pageContainer .contextMenuContainer ul li.highlighted {
    background-color: #DFf0D9;
    color: #588958;
}

div.pageContainer .contextMenuContainer ul li.highlighted:hover {
    background-color: #D0E9C6;
    color: white;
}

div.pageContainer .contextMenuContainer ul li:hover {
    background: #428bca;
    background: -webkit-linear-gradient(#0088cc, #0077b3);
    background: -o-linear-gradient(#0088cc, #0077b3);
    background: -moz-linear-gradient(#0088cc, #0077b3);
    background: linear-gradient(#0088cc, #0077b3);
    color: white;
}

span#bulkactionBtnsContainer.iteminlist {
}

div#main_container .bulkActionsView {
    z-index: 2000;
    display: none;
    width: 80%;
    border: 1px solid #ddd;
    padding: 10px;
    position: fixed;
    bottom: -20px;
    background-color: #fff;
    box-shadow: 0 10px 15px 0px rgb(80, 80, 80);
    left: 10%;
}

div#main_container .bulkActionsView.highlighted {
    box-shadow: 0px 0px 17px 2px #9dd2ff;
    border-color: #428bca;
}

div#main_container .bulkActionsView p.lead {
    padding-left: 10px;
}

div.pageContainer #bulkActionsView.floatOnTop {
    position: fixed;
    left: 0px;
    top: -11px;
    box-shadow: 0 1px 20px 0px #999;
}

div.pageContainer #bulkActionsView h3 {
    padding-bottom: 10px;
}

span#bulkActionsView .col-lg-7 {
    padding-left: 20px;
}

span#bulkActionsView h3 {
    margin-bottom: 5px;
}

span#bulkActionsView .row:first-of-type {
    margin-bottom: 10px;
}

div.pageContainer .tabContent .subtabs_tabs ul li {
    display: inline-block;
    border-radius: 30px;
}

div.pageContainer .tabContent .subtabs_tabs ul li a {
    display: inline-block;
    padding: 5px 10px;
}

div.pageContainer .tabContent .subtabs_tabs ul li:hover {
    background-color: #ddd;
}

div.pageContainer .tabContent .subtabs_tabs ul li.active {
    background-color: #428bca;
    color: white;
}

div.pageContainer .tabContent .subtabs_tabs ul li.active a {
    color: white;
}

div.pageContainer .tabContent .headerRow .dropdown {
    display: inline-block;
}

div.pageContainer .tabContent .headerRow span.toolbarBtn span {
    padding: 7px;
    cursor: pointer;
    border: 1px #aaa solid;
    margin-left: 5px;
    border-radius: 30px;
}

div.pageContainer .tabContent .headerRow span.toolbarBtn span:hover {
    background-color: #428bca;
    border: 1px #428bca solid;
    color: white;
}

.bs-searchbox input {
    margin-left: 3px !important;
    margin-bottom: 0px !important;
}

div.modalContainer ul.nav-tabs {
    margin-bottom: 10px;
}


/* ui-layout-pane */

.badge-sm {
    font-size: 0.8em;
}


div.pageContainer tr .previewToggleBtn {
    font-size: 0.8em;
}

div.pageContainer tr .previewToggleBtn:hover {
    background-color: #555;
    color: #ddd;
}

div.pageContainer .popover .popover-content {
    height: auto;
    max-height: 190px;
    overflow-y: auto;
}

div.pageContainer .rightsidebar h3, div.pageContainer .rightsidebar h4 {
    margin-bottom: 10px;
}

div.pageContainer .rightsidebar #list a {
    display: inline-block;
    cursor: move;
    padding: 3px;
    width: 100%;
    border: 1px solid white;
}

div.pageContainer .rightsidebar #list a .entypo-glyphicon {
    padding-right: 10px;
}

div.pageContainer .rightsidebar #list a:hover {
    background-color: #ddd;
    border: 1px solid #ddd;
}

div.pageContainer ul.selectpicker span {
    background: none;
}

/*
div.modalContainer .recordSelector input {
	width: 120px;
	padding-top: 5px;
	display: inline-block;
}

div.modalContainer .recordSelector .selectorContainer .col-lg-6 {
	margin-top: 10px;
	padding-left: 0;
	padding-right: 0;
}
div.modalContainer .recordSelector .boxContainer {
	margin-bottom: 10px;
	border: 1px solid #ccc;
    padding:12px;
}
div.modalContainer .recordSelector .boxContainer ul {
	padding: 10px;
	min-height: 288px;
	height: 300px;
	overflow-y: auto;
}

div.modalContainer .recordSelector .boxContainer li {
	display: table;
	padding: 5px 10px;
	margin-bottom: 3px;
	border-bottom: 1px solid #ddd;
	cursor: move;
}

div.modalContainer .recordSelector .boxContainer li.notsortable {
	background-color: #ebebeb;
}
div.modalContainer .recordSelector .boxContainer li:hover {
	background-color: #efefef;
}
div.modalContainer .recordSelector .boxContainer li .respTitle {
	display: table-cell;
	vertical-align: middle;
}

.modalContainer .modal .row .selectpicker a span.text {
	background: none;
}
.modalContainer .modal .row .selectedModels {
	display: inline-block;
	width: 100%;
}
.modalContainer .modal .row .selectedModels .selectedModel {
	padding: 2px 8px;
	font-size: 0.8em;
	margin-right: 4px;
	display: inline-block;
	padding-right: 0;
	border: 1px solid #ccc;
	margin-bottom: 3px;
}
.modalContainer .modal .row .selectedModels .selectedModel .fparent_type_indicator {
	font-size: 0.9em;
	padding: 5px 5px;
	margin-right: 5px;
}
.modalContainer .modal .row .selectedModels .selectedModel .fparent_type_indicator.srs {
	background-color: lightgreen;
}
.modalContainer .modal .row .selectedModels .selectedModel .fparent_type_indicator.physicaltest {
	background-color: orange;
}
.modalContainer .modal .row .selectedModels .selectedModel.nonremovable {
	padding-right: 8px;
	background-color: #ebebeb;
}
.modalContainer .modal .row .selectedModels .showMoreOptions {
	padding: 0px 8px;
	display: inline-block;
	border: 1px solid #ccc;
	cursor: pointer;
}
.modalContainer .modal .row .selectedModels .showMoreOptions:hover {
	background-color: #ccc;
}
.modalContainer .modal .row .selectedModels .selectedModel .removeThis {
	padding: 4px 6px;
	background-color: #ccc;
	margin-left: 10px;
	cursor: pointer;
}
.modalContainer .modal .row .selectedModels .selectedModel .removeThis:hover {
	background-color: red;
	color: white;
}
.modalContainer .modal .row .noUi-target.off {
	background-color: #3276b1;
}
.modalContainer .modal .row .select2-container-multi .select2-choices {
	border: 1px solid #ccc;
}
.modalContainer .modal .row .select2-container-multi.select2-container-active .select2-choices {
	border: 1px solid #5897fb;
}
.modalContainer .modal .row .noUiSlider {

	margin-left: 25px;
}
.modalContainer .modal .modelSwitcher {
	float: right;
	margin-top: -22px;
}
.modalContainer.loadfilterview .row input#searchFilter {
	margin-left: 0;
	width: 100%;
	margin-bottom: 10px;
	height: 30px;
}
.modalContainer.loadfilterview .list-group {
	max-height: 300px;
	overflow-y: auto;
}
.modalContainer.loadfilterview .list-group .list-group-item.selected {
	background-color: #428bca;
	color: white;
}
.modalContainer.loadfilterview .col-lg-8 h6 {
	margin-bottom: 2px;
}
*/


svg g.brush rect {
    fill: rgba(0, 0, 0, 0.9);
}

svg.bar-chart .bar {
    stroke-width: 0;
    stroke: none;
}

svg.bar-chart .line {
    stroke-width: 1;
    fill: none;
}

svg.bar-chart .line.dimmed {
    stroke: #bbb !important;
    stroke-opacity: 0.5 !important;
}

svg.bar-chart .line.highlighted {
    stroke-width: 3px !important;
}

svg.bar-chart .bar_title {
    font: bold 13px sans-serif;
    text-anchor: middle;
}

svg.bar-chart .chart-border {
    stroke: #AAA;
    shape-rendering: crispEdges;
    fill: none;
    opacity: 1 !important;
}

svg.bar-chart .bar.highlighted {
    stroke: black !important;
    stroke-width: 3px !important;
}

svg.bar-chart .area.highlighted {
    stroke: black !important;
    stroke-width: 3px !important;
}

svg.bar-chart .bar.dimmed {
    stroke: none;
    fill: #bbb !important;
    fill-opacity: 0.5 !important;
}

svg.bar-chart .area.dimmed {
    stroke: none;
    fill: #bbb !important;
    fill-opacity: 0.5 !important;
}

svg.bar-chart .extent {
    stroke: #f09f8c;
    fill-opacity: .5;
    fill: #ccc;
    shape-rendering: crispEdges;
}

div.floatingBulkViewContainer {
    width: 80%;
    border: 1px solid #ddd;
    padding: 10px;
    position: fixed;
    z-index: 10000;
    bottom: -60px;
    background-color: #fff;
    box-shadow: 0 10px 15px 0px rgb(80, 80, 80);
    left: 10%;
}

div.floatingBulkViewContainer.highlighted {
    box-shadow: 0px 0px 17px 2px #9dd2ff;
    border-color: #428bca;
}

div.floatingBulkViewContainer p.lead {
    margin-bottom: 0px;
    margin-left: 5px;
}

.dropz .filesListHeader {
    text-align: left;
    margin-bottom: 10px;
}

.dz-clickable {
    cursor: auto;
}

.dz-preview {
    border-bottom: 1px solid #eee;
    padding-top: 3px;
    padding-bottom: 3px;
}

.dz-preview:last-child {
    margin-bottom: 15px;
}

.dz-preview:hover {
    background-color: #ddd;
    cursor: pointer;
}

.dz-preview .dz-filename, .dz-preview .dz-size {
    display: inline-block;
    text-align: left;
}

.dz-preview .dz-filename {
    text-overflow: ellipsis;
}

.dz-preview .dz-size {
    width: auto !important;
}

.dz-preview .dz-success-mark, .dz-preview .dz-error-mark {
    display: none;
}

.dropz form.dropzoneReceiver, .dropz #msgArea, .dropz .msgArea {
    display: block;
    vertical-align: top;
    min-height: 80px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px dashed #ffcc66;
    background: url(/images/dropzone.png) no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    max-height: 220px;
    overflow-y: scroll;
}

.createresponsemodalview h4 {
    margin-bottom: 10px;
}

.createresponsemodalview ul, .modalContainer.createresponsemodalview ul li {
    list-style: none;
    margin: 0;
}

.createresponsemodalview #dataSourceSidebar.notyetloaded::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'FontAwesome';
    content: "\f110";
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6FFFFFF, endColorstr=#E6FFFFFF);
    text-align: center;
}

.createresponsemodalview #dataSourceSidebar ul li {
    display: block;
    padding: 3px;
    padding-left: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.createresponsemodalview #dataSourceSidebar ul li a {
    display: block;
}

.createresponsemodalview #dataSourceSidebar ul li:hover {
    border: 1px solid #428bca;
}

.createresponsemodalview #dataSourceSidebar ul li.selected {
    color: white;
    background-color: #428bca !important;
}

.createresponsemodalview #dataSourceSidebar ul li.lvl1 {
    background-color: #dfdfdf;
    margin-bottom: 3px;
}

.createresponsemodalview #dataSourceSidebar ul li.lvl2 {
    margin-left: 5px;
    margin-bottom: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    cursor: pointer;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 label {
    padding-left: 0;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 #searchIdComponent .row {
    margin-left: 0;
    margin-right: 0;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 #searchIdComponent label {
    font-weight: normal;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 #plotting_container {
    height: 150px;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 #plotting_container ul.inline li {
    margin-right: 5px;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 #plotting_container label {
    display: block;
    padding-left: 5px;
    margin-bottom: 0;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 button.selectpicker, .createresponsemodalview #mainRenderingArea .col-lg-8 input[type=text] {
    margin-bottom: 0;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 input[type=radio] {
    margin-right: 5px;
}

.createresponsemodalview #mainRenderingArea .col-lg-8 .row {
    margin-bottom: 10px;
}

.modalContainer.createresponsemodalview #inputsRenderingArea .row {
    margin-left: 0;
    margin-right: 0;
}

.createresponsemodalview #inputsRenderingArea .row textarea {
    margin-left: 0;
}

.createresponsemodalview #inputsRenderingArea {
    margin-top: 10px;
}

.createresponsemodalview #inputsRenderingArea input.ui-droppable.droppable, .createresponsemodalview #inputsRenderingArea .btn.droppable {
    border: 1px solid #4b70bf !important;
}

.createresponsemodalview #inputsRenderingArea input.dragdropHelper, .createresponsemodalview #inputsRenderingArea textarea.dragdropHelper, .modalContainer.createresponsemodalview #inputsRenderingArea .bootstrap-select.dragdropHelper button {
    background-image: none;
    background-color: lightskyblue;
}

.createresponsemodalview #inputsRenderingArea h4 {
    margin-bottom: 0;
}

.createresponsemodalview #inputsRenderingArea input, .createresponsemodalview #inputsRenderingArea button {
    margin-left: 0;
}

.createresponsemodalview .sidebarSection {
    border-left: 1px solid #ddd;
}

.createresponsemodalview .sidebarSection li a.response-item {
    display: block;
    padding: 12px;
    margin-left: 3px;
    margin-right: 3px;
    border: 2px solid transparent;
}

.createresponsemodalview .sidebarSection li a.response-item:hover {
    border-right: 2px solid #ddd;
    -moz-box-shadow: inset 0 0 10px #eee;
    -webkit-box-shadow: inset 0 0 10px #eee;
    box-shadow: inset 0 0 10px #eee;
    padding: 12px;
}


li.genericSidebarItem a {
    display: block;
    padding: 3px;
    margin-left: 3px;
    margin-right: 3px;
    border: 1px solid #ffffff;
}

li.genericSidebarItem.parent_record a {
    padding-left: 10px;
    font-weight: bold;
}

li.genericSidebarItem.in_overlay_list, li.genericSidebarItem.in_overlay_list.active {
    background-color: #457fca;
}

li.genericSidebarItem.in_overlay_list a {
    color: white !important;
}

li.genericSidebarItem a:hover {
    border: 1px solid #428bca;
}

li.genericSidebarItem.active a, li.genericSidebarItem.active span {
    color: white;
}

li.genericSidebarItem.active a {
    background-color: #428bca;
}

li.genericSidebarItem.in_overlay_list.active a {
    background-color: #457fca;
}

.createresponsemodalview ul li.draftResponse {
    background-color: #efefef;
}

.createresponsemodalview .sidebarSection li.draftResponse a {
    padding-left: 25px;
    margin-left: 3px;
}

.createresponsemodalview .sidebarSection li.draftResponse a span {
    padding-left: 5px;
    padding-right: 8px;
}

.createresponsemodalview .sidebarSection li.draftResponse a div.removeFromQueue {
    color: #ccc;
}

.createresponsemodalview .sidebarSection li.draftResponse a div.removeFromQueue:hover {
    color: red;
}

.createresponsemodalview .sidebarSection li a:hover {
    border: 1px solid #428bca;
}

.createresponsemodalview .sidebarSection #existingResponsesRenderingArea, .modalContainer.createresponsemodalview .sidebarSection #queuedResponsesRenderingArea {
    margin-bottom: 15px;
}

.createresponsemodalview #function_list .scrollable {
    max-height: 500px;
    overflow-y: auto;
}

.createresponsemodalview #function_list .col1, .modalContainer.createresponsemodalview #function_list .col2 {
    width: 48%;
    display: inline-block;
}

.createresponsemodalview .fnItem {
    border: 1px solid #ddd;
    width: 100%;
    margin-left: 5px;
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 4px;
    min-height: 140px;

}

.createresponsemodalview .fnItem:not(.selected):hover {
    box-shadow: 0px 0px 6px 0px #9dd2ff;
    border-color: #428bca;
    cursor: pointer;
}

.createresponsemodalview .fnItem.selected {
    border: 1px solid #428BCA;
}

.createresponsemodalview .fnItem .title {
    padding: 6px;
    display: inline-block;
    width: 100%;
    border-radius: 4px 4px 0px 0px;
}

.createresponsemodalview .fnItem.selected .title {
    background-color: #d9edf7;
}

.createresponsemodalview .fnItem .detail {
    padding: 10px;
    font-size: 0.9em;
}

.modalContainer.flowModal .indicatorsRenderingArea {
    background-color: #efefef;
    padding: 12px 20px;
}

.modalContainer.flowModal .progressBarBase {
    width: 100%;
    height: 10px;
    background-color: #ccc;
}

.modalContainer.flowModal .progressBarBase .stepBar {
    background-color: #ccc;
    border-left: 1px solid white;
    height: 10px;
    display: inline-block;
    float: left;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.modalContainer.flowModal .progressBarBase .stepBar.active {
    background-color: #5cb85c;
}

.modalContainer.flowModal .progressBarBase .stepBar.error {
    background-color: #d9534f;
}

.modalContainer.flowModal .progressBarBase .stepBar.done {
    background-color: #86EE86;
}

.modalContainer.flowModal .progressBarBase .stepBar:nth-child(1) {
    border-left: none;
}

.modalContainer.flowModal .indicatorsRenderingArea h1.step_title {
    font-size: 1.8em;
}

.modalContainer.flowModal .indicatorsRenderingArea p.lead {
    font-size: 18px;
}

.modalContainer.flowModal .welcome h1 {
    width: 100%;
    font-size: 2.3em;
    text-align: center;
}

.modalContainer.flowModal .welcome p.lead {
    font-size: 18px;
    width: 100%;
    text-align: center;
}

div.inline-block {
    display: inline-block;
}

.fe_floatOutsideModal {
    right: -100%;
    top: 0px;
    position: fixed;
}

.fe_floatOutsideModal.larger {
    width: 900px;
    z-index: 10;
}

.fe_floatOutsideModal.larger #fileexplorer, .fe_floatOutsideModal.larger #simmodel_fileexplorer, .fe {
    box-shadow: 0 0 6px 0 #999;
}

.floatingDivContainer {
    width: 0;
    height: 0;
    top: -140px;
    left: 175px;
    position: relative;
}

.-pageContainer .popover, #-body .popover {
    max-width: none !important;
    width: 377px;
}


div#admin_page .newBtnContainer {
    position: relative;
    top: -5px;
}

#sharingModeSelector {
    cursor: pointer;
    border: 1px solid transparent;
    padding-bottom: 3px;
    padding-right: 5px;
}

#sharingModeSelector:hover {
    box-shadow: 0px 0px 6px 0px #9dd2ff;
    border: 1px solid #428bca;
}

.sharingModesContainer {
    position: absolute;
    width: 200px;
    border: 1px solid #ddd;
    padding: 5px 0px;
    background-color: white;
    top: 30px;
    z-index: 3;
}

.sharingModesContainer .sharingMode {
    padding: 5px 10px;
    cursor: pointer;
}

.sharingModesContainer .sharingMode.active {
    background-color: #007dbc;
    color: white;
}

.sharingModesContainer .sharingMode:not(.active):hover {
    background-color: #efefef;
}

span.glyphicon-sharing {
    padding: 5px;
}

span.glyphicon-sharing::before {
    font-family: 'Entypo Glyphicons';
    content: "👥";
    font-size: 2em;
    line-height: 10px;
}

.modalContainer #existingResponsesRenderingArea ul {
    overflow-y: hidden;
    max-height: 500px;
    min-height: 50px;
    position: relative;
}

@media (max-width: 1200px) {

    .modalContainer #existingResponsesRenderingArea ul {
        max-height: 300px;
    }
}

div.d3view_guide .d3view_guide_curtain {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 30000;
    float: left;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div.d3view_guide .popover {
    z-index: 30002;
    display: block;
}

.d3view_guide_el_highlighted {
    z-index: 30001;
    position: relative;
    background-color: orange !important;
    color: white !important;
}

.left-inner-addon, .right-inner-addon {
    position: relative;
}

.left-inner-addon input {
    padding-left: 30px !important;
}

.right-inner-addon input {
    padding-right: 30px;
}

.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    color: #666;
    pointer-events: none;
}

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 8px 12px;
    color: #666;
    pointer-events: none;
}

input.roundedBorders, input.rounded-corners {
    border-radius: 22px;
    padding: 0 20px;
}

.clickable {
    cursor: pointer;
}

.toggleBtnContainer #quickAddResponseBtn, .toggleBtnContainer #quickAddFileBtn {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

@media (max-width: 1200px) {

    .modal .modal-body {
        max-height: inherit;
    }
}

.modal .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.modal .itemToExtract {
    border: 1px solid #ddd;
    display: inline-block;
    width: 48.5%;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.modal .itemToExtract .respTitle {
    padding: 10px;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f3;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.modal .itemToExtract .respTitle h4 {
    float: left;
}

.modal .itemToExtract .respTitle .respActionIcons {
    float: right;
    height: 0;
    position: relative;
}

.modal .itemToExtract .respTitle .respActionIcons .glyphicon {
    cursor: pointer;
}

.modal .itemToExtract .total_responses_num
.modal .itemToExtract .available_responses_num, .modal .itemToExtract .stale_responses_num {
    font-weight: 300;
}

.modal .itemToExtract .available_responses_num {
    color: #73C173;
}

.modal .itemToExtract .stale_responses_num {
    color: #ED9E2F;
}

div#files .gridFileItem, .filesExplorer .gridFileItem {
    border: 1px solid #ddd;
    display: inline-block;
    width: 99%;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: white;
    -moz-transition: border 0.1s linear;
    -o-transition: border 0.1s linear;
    -webkit-transition: border 0.1s linear;
    transition: border 0.1s linear;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div#files .gridFileItem:active, .filesExplorer .gridFileItem:active {
    background-color: #efefef;
}

div#files .gridFileItem.folder, div#files .gridFileItem.toParentFolder, .filesExplorer .gridFileItem.folder, .filesExplorer .gridFileItem.toParentFolder {
    cursor: pointer;
}

div#files .gridFileItem.folder.targetSelected, .filesExplorer .gridFileItem.folder.targetSelected {
    background-color: #428BCA;
}

div#files .gridFileItem:not(.active):hover, .filesExplorer .gridFileItem:not(.active):hover {
    border-color: #666;
}

div#files .gridFileItem.newlycreated, div#files .gridFileItem.active, .filesExplorer .gridFileItem.newlycreated, .filesExplorer .gridFileItem.active {
    box-shadow: 0px 0px 6px 0px #9dd2ff;
    border-color: #428bca;
}

div#files .gridFileItem .txtarea, .filesExplorer .gridFileItem .txtarea {
    display: inline-block;
    width: 93%;
}

div#files .gridFileItem .filetype, .filesExplorer .gridFileItem .filetype {
    float: left;
    padding-right: 15px;
    font-size: 2em;
}

div#files .gridFileItem .filename, .filesExplorer .gridFileItem .filename {
    font-weight: 500;
    display: inline-block;
    width: 40%;
}

div#files .gridFileItem .metainfo, .filesExplorer .gridFileItem .metainfo {
    font-weight: 300;
    color: #666;
    display: inline-block;
    width: 19%;
}

ul#foldersList {
    list-style: none;
}

ul#foldersList a {
    width: 100%;
    display: inline-block;
    padding: 5px;
    color: black;
    font-weight: 300;
}

ul#foldersList a span.icomoon-folder {
    color: #66ccff;
    padding-right: 5px;
}

ul#foldersList li {
    border: 1px solid transparent;
}

ul#foldersList li:not(.active):hover a, ul#foldersList li.active a {
    font-weight: bold;
}

ul#foldersList li.active {
    border-color: #66ccff;
}

ul#foldersList li.lvl1 {
    padding-left: 15px;
}

ul#foldersList li.lvl2 {
    padding-left: 30px;
}

ul#foldersList li.lvl3 {
    padding-left: 45px;
}

.peacock-logo {
    background-image: url("/images/peacock.bird.png");
    display: block;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}


.notes .commentsRenderingArea {
    margin-top: 10px;
    margin-bottom: 15px;
}

.notes .commentsView {
    position: relative;
    overflow-y: hidden;
}

.notecontent, .pre_like_div {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
}

.notecontent ul {
    list-style: square;
    list-style-position: inside;
}

notecontent ol {
    list-style: decimal;
    list-style-position: inside;
}

.notes .commentsRenderingArea .noteCommentItem, #notes .commentsRenderingArea .noteCommentItem .panel {
    margin-bottom: 5px;
}

.notes .commentsRenderingArea .noteCommentItem hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.notes .commentsRenderingArea .noteCommentItem a.attachment {
    padding-right: 10px;
}

.notes .commentsRenderingArea #commentSubmitForm {
    margin-bottom: 15px;
}


div#targets .targetGroupItem, div#targets .detailedTargetItem {
    display: inline-block;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    width: 100%;
}

div#targets .targetGroupItem .titleArea, div#targets .detailedTargetItem .titleArea {
    padding: 10px;
    font-weight: 600;
}

div#targets .targetGroupItem .titleArea .pull-right {
    margin-top: 2px;
    margin-right: 5px;
}

div#targets .targetGroupItem .titleArea .pull-right .fa {
    margin-right: 5px;
    cursor: pointer;
}

div#targets .targetGroupItem .titleArea .pull-right .fa:hover {
    color: #428BCA;
}

div#targets .targetGroupItem .titleArea span.title, div#targets .detailedTargetItem .titleArea span.title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    display: inline-block;
    margin-bottom: 5px;
}

div#targets .targetGroupItem .titleArea span.tg_meta {
    font-size: 0.9em;
    font-weight: 300;
}

div#targets .targetGroupItem .titleArea span.tg_meta .meta_label {
    min-width: 120px;
    display: inline-block;
}

div#targets .targetGroupItem .targetsArea {
    padding: 1%;
}

div#targets .targetGroupItem .targetsArea .targetItem {
    width: 100%;
}

div#targets .targetGroupItem .sectionDivider, div#targets .detailedTargetItem .sectionDivider {
    width: 100%;
    margin-bottom: 5px;
    padding: 5px 10px;
    background-color: #ededed;
    clear: both;
}

div#targets .targetGroupItem .targetsArea .targetItem .name, div#targets .targetGroupItem .sectionDivider .name {
    width: 24%;
    font-size: .9em;
    font-weight: 300;
    vertical-align: middle;
    display: inline-block;
}

div#targets .targetGroupItem .targetsArea .targetItem .operator, div#targets .targetGroupItem .sectionDivider .operator {
    width: 18%;
    font-size: .9em;
    font-weight: 300;
    vertical-align: middle;
    display: inline-block;
}

div#targets .targetGroupItem .targetsArea .targetItem .operand, div#targets .targetGroupItem .sectionDivider .operand {
    width: 18%;
    font-size: .9em;
    font-weight: 300;
    vertical-align: middle;
    display: inline-block;
}

div#targets .targetGroupItem .targetsArea .targetItem .recordsNum, div#targets .targetGroupItem .sectionDivider .recordsNum {
    width: 12%;
    font-size: .9em;
    font-weight: 300;
    vertical-align: middle;
    display: inline-block;
}

div#targets .targetGroupItem .targetsArea .targetItem .quickstats, div#targets .targetGroupItem .sectionDivider .quickstats {
    width: 25%;
    font-size: .9em;
    font-weight: 300;
    vertical-align: middle;
    display: inline-block;
}

div#targets .targetGroupItem .sectionDivider .name, div#targets .targetGroupItem .sectionDivider .operator, div#targets .targetGroupItem .sectionDivider .operand, div#targets .targetGroupItem .sectionDivider .recordsNum, div#targets .targetGroupItem .sectionDivider .quickstats {
    font-weight: bold;
    color: #666;
}

div.filetransfer_view {
    float: right;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 500px;
    z-index: 10000;
    border: 1px solid #666;
    background-color: white;
}

div.filetransfer_view .filetransfer_view_title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    width: 100%;
    padding: 10px;
    display: inline-block;
    margin-bottom: 5px;
    border-bottom: 2px solid;
}

div.filetransfer_view .filetransfer_view_content ul.filesList {
    list-style: none;
    max-height: 150px;
    overflow-y: auto;
}

div.filetransfer_view .filetransfer_view_content ul.filesList li.fileitem {
    display: inline-block;
    width: 100%;
    padding: 3px 10px;
}

div.filetransfer_view .filetransfer_view_content ul.filesList li.fileitem .filenameArea {
    width: 40%;
    font-weight: 300;
    display: inline-block;
    vertical-align: middle;
}

div.filetransfer_view .filetransfer_view_content ul.filesList li.fileitem .progressArea, div.filetransfer_view .filetransfer_view_content ul.filesList li.fileitem .filesizeArea {
    width: 29%;
    font-weight: 300;
    display: inline-block;
    vertical-align: middle;
}

div.filetransfer_view .filetransfer_view_content ul.filesList li.fileitem .progressArea .progress {
    margin-bottom: 0;
}

div#targets .distributionChartArea .description .records-container {
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    max-height: 85px;
    overflow-y: auto;
}

.modalContainer #record_thumbnail:hover {
    background-color: #efefef;
}

div#targets .targetsSelector .targetsSelectorItemsContainer {
    border: 1px solid #ddd;
    padding-bottom: 5px;
    box-shadow: 0px 1px 3px 0px #ddd;
}

div#targets .targetsSelector .targetsSelectorItemsContainer.floatOnTop {
    position: fixed;
    top: 80px;
    width: 16.4%;
}

div#targets .targetsSelector .tg_meta, div#targets .targetsSelector .targetobjItem {
    padding: 5px 10px;
    font-size: 0.9em;
}

div#targets .targetsSelector .targetobjItem.disabled {
    color: #ccc;
    cursor: not-allowed;
}

div#targets .targetsSelector .targetobjItem.selected {
    color: #428BCA;
    background-color: #d9edf7;
}

div#targets .targetsSelector .targetobjItem:not(.selected,.disabled):hover {
    background-color: #efefef;
}

.modalContainer.excelresponseparser .sidebarArea .enqueued {
    max-height: 100px;
    overflow-y: auto;
}

.modalContainer.excelresponseparser .sidebarArea .excelparser_response_item {
    font-size: 0.9em;
    padding: 5px 10px;
    margin-bottom: 5px;
    border: 1px solid #eee;
}

.modalContainer.excelresponseparser .sidebarArea .excelparser_response_item.emptyqueue {
    color: #aaa;
}

.modalContainer.excelresponseparser .sidebarArea .excelparser_response_item.showEditor:hover {
    background-color: #dff0d8;
    border: 1px solid #3c763d;
    color: #2b542c;
}

.modalContainer.excelresponseparser .sidebarArea .saveTemplateContainer, .modalContainer.excelresponseparser .sidebarArea .loadTemplateContainer {
    margin-bottom: 10px;
}

.modalContainer.excelresponseparser .sidebarArea .saveTemplateContainer #autoextraction_pattern_container {
    margin-top: 7px;
}

.modalContainer.excelresponseparser .sidebarArea .responseEditor {
    font-size: 0.9em;
}

.modalContainer.excelresponseparser .sidebarArea .responseEditor .row {
    margin-bottom: 10px;
}

.modalContainer.excelresponseparser .sidebarArea .responseEditor .row label {
    margin-bottom: 0;
}

.modalContainer.excelresponseparser .sidebarArea .responseEditor #name.waitingForInteraction, .modalContainer.excelresponseparser .sidebarArea .responseEditor #value.waitingForInteraction, .modalContainer.excelresponseparser .sidebarArea .responseEditor #range_x.waitingForInteraction, .modalContainer.excelresponseparser .sidebarArea .responseEditor #range_y.waitingForInteraction {
    background-color: #428bca;
}

.modalContainer.excelresponseparser .twitter-typeahead {
    width: 100%;
}

.tt-menu {
    border: 1px solid #ccc;
    background-color: white;
    padding: 5px 0;
    width: 100%;
    overflow-y: auto;
    max-height: 150px;
}

.tt-dataset .tt-suggestion {
    padding: 3px 15px;
}

.tt-dataset .tt-suggestion:hover, .tt-dataset .tt-suggestion.tt-cursor {
    background-color: #428bca;
    color: white;
    cursor: pointer;
}

.notification_center_container .notification_item {
    padding: 12px;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
}

.notification_center_container .notification_item .notiaction {
    width: 0;
    height: 0;
    margin-right: 1.2em;
}

.notification_center_container .notification_item .notiaction:hover {
    color: #cc0000;
}

.notification_center_container.panel-body {
    padding: 0px !important;
}

.notification_center_container .notification_item:hover {

}

.notification_center_container .notification_item.unread {
    background-color: var(--blue-50-a20);
}

.notification_center_container .noti_pagination {
    box-shadow: 0 -5px 8px -7px;
    padding-top: 5px;
    text-align: right;
}

.notification_center_container .noti_pagination .glyphicon {
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

.notification_center_container .noti_pagination input {
    width: 40px;
    height: 20px;
}

.pageContainer#tags .tagsVisualizerContainer {
}

.pageContainer#tags .tagsVisualizerContainer .selectedTags .queryItem, .pageContainer#tags .tagsVisualizerContainer .tagsInBin .queryItem {
    margin: 2px;
    font-size: 0.9em;
    font-weight: 300;
    cursor: pointer;
    display: inline-block;
}

.pageContainer#tags .tagsVisualizerContainer .selectedTags .queryItem:hover {
    background-color: red;
}

.pageContainer#tags .tagsVisualizerContainer .tv_body {
}

.pageContainer#tags .tagsVisualizerContainer .tv_header {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.pageContainer#tags .vizsidebararea {
    position: fixed;
    right: 30px;
    top: 160px;
}

.sidebar_container {
    border: 1px solid #ddd;
    padding-bottom: 5px;
    box-shadow: 0px 1px 3px 0px #ddd;
}

.sidebar_container .sidebarsection {
    padding: 10px;
}

.sidebar_container .sidebarsection span.sectionheader {
    font-weight: 600;
    border-bottom: 1px #666;
}

.sidebar_container .sidebarsection .sectionbody .noitem {
    color: #aaa;
    text-align: center;
    padding: 5px;
    border: 1px solid #ddd;
}

.sidebar_container .sidebarsection .sectionbody .bin_droppable_area {
    display: table;
    width: 100%;
    border: 1px dashed #ccc;
    min-height: 80px;
    padding: 7px;
}

.sidebar_container .sidebarsection .sectionbody .bin_droppable_area .noitem {
    display: table-cell;
    vertical-align: middle;
    border: none;
}

.solver_arrowcontainer {
    position: relative;
    left: 5px;
    top: -9px;
    height: 0;
}

.solver_arrowcontainer .outer_arrow {
    position: absolute;
    left: 5px;
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-bottom: solid #cccccc 10px;
}

.solver_arrowcontainer .inner_arrow {
    position: absolute;
    left: 6px;
    top: 1px;
    border-left: solid transparent 9px;
    border-right: solid transparent 9px;
    border-bottom: solid #fcfcfc 9px;
}

.project_overview_item {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
}

.project_overview_item .menuscontainer {
    display: inline-block;
    position: relative;
    height: 0;
    top: 0px;
    left: 0px;
    min-width: 80px;
}

.project_overview_item .menuscontainer i {
    padding: 7px;
    background-color: #428bca;
    color: white;
}

.project_overview_item .project_header {
    width: 150px;
    height: 128px;
    display: table-cell;
    background: url(/images/project_logo_128.png) no-repeat;
    vertical-align: bottom;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 37px;
    color: white;
}

.project_overview_item .project_header span.lead {
    font-size: 1.35em;
    word-break: break-all;
}

.project_overview_item:active span.lead {
    color: lightblue;
}

.project_overview_item .project_info {
    color: var(--foreground-color,#000);
    padding-left: 10px;
    padding-right: 10px;
}

.project_activity_comment_item {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px dashed #cdcdcd;
}

.project_activity_comment_item:last-of-type {
    border-bottom: none;
}

.project_activity_comment_item .namedisplay {
    width: 150px;
    white-space: nowrap;
    display: inline-block;
}

.project_activity_comment_item .comment_time {
    float: right;
    font-size: 0.9em;
    color: #888;
}

.project_navbar {
    min-height: 26px !important;
}

.project_navbar .navbar-collapse li a {
    line-height: 0;
}

.project_navbar .navbar-collapse li.dropdown ul a {
    line-height: inherit;
}

.pageContainer#projects .contentpane[data-id="simulations"] .morefilters, .pageContainer#projects .contentpane[data-id="physical_tests"] .morefilters, .pageContainer#projects .contentpane[data-id="simulation_models"] .morefilters {
    padding: 12px;
    border: #ddd;
    background-color: #efefef;
}

.pageContainer#projects .contentpane[data-id="simulations"] .navcontrols, .pageContainer#projects .contentpane[data-id="physical_tests"] .navcontrols, .pageContainer#projects .contentpane[data-id="simulation_models"] .navcontrols {
    padding-right: 5px;
    top: -2px;
    position: relative;
}

.vrow.highlighted {
    background-color: yellow;
}

table td.td_nowrap {
    max-width: 500px;
}

table td.td_nowrap span, table td.td_nowrap h3, table td.td_nowrap h4 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

div.inlineItem {
    padding: 5px 10px;
    border: 1px solid #ddd;
}

.slick-columnpicker {
    border: 0px;
    background-color: transparent;
    z-index: 2000;
}

.slick-columnpicker li {
    padding: 6px;
    margin: 0px;
}

.slick-row {
    font-weight: 400;
}

.slick-cell.cell-reorder {
    font: normal normal normal 14px/1 Roboto, "DejaVu Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;;
    font-size: inherit;
    text-rendering: auto;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.slick-cell.cell-reorder::before {
    content: '\f0c9';
}

.slick-cell .editor-text {
    height: auto;
    color: var(--foreground-color,#000);
}

.slick-cell-defaultheight {
    height: 25px !important;
}

.slick-cell-rownumber {
    height: 25px !important;
    background-color: #efefef;
}

.slick-cell.noteditable {
    background-color: #ededed;
}

.slick-cell {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    font-size: 12px;
    line-height: 20px;
}

.slick-cell.selected {
    background-color: #428bca;
    background-image: linear-gradient(to bottom, #428bca 0, #2d6ca2 100%);
    background-image: -webkit-linear-gradient(top, #428bca 0, #2d6ca2 100%);
    color: #fff !important;
}

.slick-cell.selected a {
    color: #fff !important;
}

.slickgrid_rendering_area .slick-row.highlighted .slick-cell {
    background-color: #428bca;
    background-image: linear-gradient(to bottom, #428bca 0, #2d6ca2 100%);
    background-image: -webkit-linear-gradient(top, #428bca 0, #2d6ca2 100%);
    color: #fff !important;
}

.slickgrid_rendering_area .slick-row.tablejs-secondary-highlight .slick-cell {
    background: #56ab2f; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff !important;
}


.slickgrid_rendering_area .slick-header-column {
    font-weight: bold;
    margin-bottom: 12px;
    border: 0px;
    border-bottom: 1px solid #eee;
    height: 17px !important;
    box-sizing: initial;
    text-align: left;
}

.slickgrid_rendering_area .slick-header-column:first-child {
}

.slickgrid_rendering_area .slick-header-column:last-child {
}

.slick-header, .ui-state-default {
    background: #fff;
}

.font-italic {
    font-style: italic;
}


.slick-viewport {
}

.slickgrid_rendering_area .slick-row .slick-cell:not(:last-of-type) {
    border-right: inherit;
    border-right: none;
    margin: 0px;
}


.slickgrid_rendering_area .slick-row.success .slick-cell {
    border-bottom: 1px solid #c1e2b3;
}

.slickgrid_rendering_area .slick-row.fail .slick-cell {
    border-bottom: 1px solid #e4b9b9;
}

.slickgrid_rendering_area .slick-cell::after {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
}

.slickgrid_rendering_area .slick-cell.text-align-center {
    text-align: center;
}


.slickgrid_rendering_area .sg-cell-title {
    font-weight: bold;
}


.slick-row.success, .slickgrid_rendering_area .slick-row.success {
    background: none;
    background-color: #dff0d8;
}

.slickgrid_rendering_area .slick-row.success:hover {
    background: none;
    background-color: #c1e2b3;
    font-weight: bold;
}

.slick-row.warning {
    background: none;
    background-color: #fcf8e3;
}

.slick-row.fail, .slickgrid_rendering_area .slick-row.fail {
    background: none;
    background-color: #f2dede;
}

.slickgrid_rendering_area .slick-row.fail:hover {
    background: none;
    background-color: #e4b9b9;
}

.slickgrid_rendering_area .slick-row:hover {
    background-color: #ededed;
}


.slickgrid_rendering_area .slick-row .slick-cell span.label {
    font-weight: normal;
}

.slickgrid_rendering_area .slick-row .slick-cell:not(.selected) {
    background-color: inherit;
}

.sg-context-menu, .sg-contextMenu {
    background: white;
    border: 1px solid #cdcdcd;
    padding: 2px;
    display: inline-block;
    min-width: 100px;
    border-radius: 4px;
    -moz-box-shadow: 2px 2px 2px silver;
    -webkit-box-shadow: 2px 2px 2px silver;
    z-index: 99999;
}

/*
.sg-context-menu li, .sg-contextMenu li {
	padding: 4px 14px 4px 14px;
	list-style: none;
	cursor: pointer;
}
.sg-context-menu li:hover, .sg-contextMenu li:hover {
	background: #428bca;
	background: -webkit-linear-gradient(#0088cc, #0077b3);
	background: -o-linear-gradient(#0088cc, #0077b3);
	background: -moz-linear-gradient(#0088cc, #0077b3);
	background: linear-gradient(#0088cc, #0077b3);
	color: white;
}
*/


.filterInputs input.srchInputArea {
    border-radius: 0px 4px 4px 0px !important;
}

.filterInputs input.srchInputArea + ul.ui-autocomplete {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
}

.filterInputs div.badgesList {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}

.filterInputs div.badgesList .label {
    margin-right: 5px;
    font-weight: 300;
}

.filterInputs div.badgesList .label.cancelFilterBtn:hover {
    background-color: #900000;
}

.bootstrap-switch-container input[type="checkbox"] {
    display: none;
}


input.required {

    border-left: 8px solid orange;
}

.nav-stacked-thin li {
    padding: 2px 2px;
}

.nav-stacked-thin li a {
    padding: 4px 6px;
}


.list-group-item.nowrap {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-group-item.smallertext {
    font-size: 0.9em;
    padding-top: 4px;
    padding-bottom: 4px;
}


.list-group-item.active a {
    color: #fff;
}


.bootstrap-switch-rs_toggle_switch {
    margin-bottom: 10px;
    float: right;
    z-index: 1050;
}

.metaextractionruleeditor .col-xs-2, .metaextractionruleeditor .col-xs-3, .metaextractionruleeditor .col-xs-4, .metaextractionruleeditor .col-xs-5, .metaextractionruleeditor .col-xs-6, .metaextractionruleeditor .col-xs-7, .metaextractionruleeditor .col-xs-12 {
    padding-left: 10px;
    padding-right: 10px;
}

.modal-footer ul.queuedjobs {
    width: 250px;
}

.modal-footer ul.queuedjobs li a {
    text-align: left;
    font-size: 0.8em;
}

.modal-footer ul.queuedjobs li a span.queue_name {
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 190px;
    display: inline-block;
}

.key-value-key {
    font-size: 0.9em;
    color: #666;
    display: block;
}

.key-value-value {
    font-size: 1.1em;
    font-weight: 900;
}


/* workflows */

.workflow-thumbnail-view {

    min-height: 120px;
    text-decoration: none;

}

.workflow-thumbnail-view .wf-title {
    margin-bottom: 8px;
    padding: 10px 8px;
    border-bottom: 1px solid #ddd;
}

.workflow-thumbnail-view .wf-name {
    font-weight: bold;
}

.workflow-thumbnail-view .wf-description {
    height: 80px;
    overflow-y: auto;
}

.workflow-thumbnail-view .wf-description pre {
    border: 0px;
    background: transparent;
    color: #444;
}

/* Workflow action buttons */
.wf-action-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 8px;
}

.wf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.wf-action-btn i {
    font-size: 12px;
}

.wf-action-btn--primary,
.wf-action-btn--primary:visited {
    background: #3a9f6b;
    color: #e2f4ea !important;
    border-color: #3a9f6b;
    box-shadow: 0 1px 3px rgba(58, 159, 107, 0.25);
}

.wf-action-btn--primary:hover,
.wf-action-btn--primary:focus {
    background: #2d8057;
    border-color: #2d8057;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(58, 159, 107, 0.35);
    transform: translateY(-1px);
}

.wf-action-btn--secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}

.wf-action-btn--secondary:hover,
.wf-action-btn--secondary:focus {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Roles */
/* workflows */

.role-thumbnail-view {

    min-height: 120px;
    padding: 12px;
    text-decoration: none;
    color: #eee;
    border-radius: 4px;
    margin-bottom: 8px;

    background: #485563; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #29323c, #485563); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    box-shadow: 12px 12px 8px -6px #000;

}

.role-thumbnail-view .wf-title {
    margin-bottom: 8px;
}

.role-thumbnail-view .wf-name {
    color: #fff;
    font-weight: bold;
}

/* ui-layout */


.responseItemsRenderingArea {
    margin-top: 12px;
}


.table-success th, .table-success th {
    background-color: #5cb85c;
}

.table-danger th, .table-danger th {
    background-color: #d9534f;
}

.table-warning th, .table-warning th {
    background-color: #ffeeba;
}

.table-info th, .table-info th {
    background-color: #bee5eb;
}

/* d3-tip */
.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
    pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
    content: "\25B2";
    margin: 0 0 1px 0;
    top: -8px;
    left: 0;
    text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
}

.btn-round {
    border-radius: 20px;
}


/* Simlytiks APP */


.simlytiksContainer .metaInfoContainer {
    width: 100%;
    height: 0;
    position: absolute;
    margin-top: -2px;
    text-align: center;
    z-index: 5;
}

.simlytiksContainer .metaInfoContainer.atTop {
    position: absolute;
    top: -20px;
}


.simlytiksContainer .metaInfoContainer.float {
    top: 95px;
}

.simlytiksContainer .metaInfoContainer .metaInfo {
    text-align: center;
    cursor: pointer;
    -o-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
    margin-left: 20%;
    margin-right: 20%;
    background-color: #D9EDF7;
    color: #428BCA;
}

.simlytiksContainer .metaInfoContainer .metaInfo .leftT {
    border-bottom: 20px solid transparent;
    border-right: 20px solid #D9EDF7;
    border-left: 20px solid transparent;
    float: left;
    position: relative;
    left: -40px;
}

.simlytiksContainer .metaInfoContainer .metaInfo .rightT {
    float: right;
    position: relative;
    left: 40px;
    border-bottom: 20px solid transparent;
    border-right: 20px solid transparent;
    border-left: 20px solid #D9EDF7;
}

.simlytiksContainer .metaInfoContainer .infoRow span.header {
    display: inline-block;
    width: 75px;
}

.simlytiksContainer .metaInfoContainer .divider {
    display: inline-block;
    width: 23px;
}

.simlytiksContainer .metaInfoContainer .infoRow span.numInd {
    width: 40px;
    text-align: right;
    font-weight: bold;
}

/*.sl-main-window {*/
/*padding:2px !important;*/
/*}*/


/* new index */

div#simlytiks {

}

div#simlytiks .console {
    margin-top: 90px;
}

div#simlytiks .console.atTop {
    margin-top: 0px;
}

div.simlytiksContainer {
    width: 100%;
    height: 100%;
}

div.slTopHeader {
    margin-left: 0;
    margin-right: 0;
    height: 30px;
    background-color: #333;
    color: white;
}

nav.slTopHeader.navbar {
    margin: 0px !important;
}

div.slTopHeader.floatAtTop {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0px;
    z-index: 5;
}

div.slTopHeader.atTop {
    position: absolute;
}

div.slTopHeader .menuContainer {
    position: relative;
    background-color: #333;
    padding-left: 10px;
    height: 30px;
    display: table;
    top: 0;
    left: 15px;
}

div.slTopHeader .menuContainer .dropdown {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

div.slTopHeader .menuContainer .dropdown:hover {
    background-color: #007fa3;
}

div.slTopHeader .menu ul {
    position: absolute;
}

div.slTopHeader .menu {
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

div.slTopHeader .menu a.dropdown-toggle {
    color: white;
}


div.slFooter {
    margin-left: 0;
    margin-right: 0;
    background-color: #333;
    text-align: center;
    color: white;
    margin-top: 30px;
    padding: 10px 0;
}

span.slTopMenu {
    height: 100%;
    display: table;
    padding-left: 20px;
    padding-right: 10px;
    cursor: pointer;
}

span.slTopMenu.togglePageSettings a {
    color: white;
}

span.slTopMenu:hover {
    background-color: #007fa3;
}

/*span.slTopMenu a {*/
/*color: white;*/
/*}*/

span.slTopMenu.goBackToDashboard,
span.slTopMenu.goBackHome {
    position: relative;
}

span.slTopMenu.goBackHome {
    /*left: -60px;*/
}

span.slTopMenu .tablecell-vertical-middle {
    display: table-cell;
    vertical-align: middle;
}

span.slTopMenu.lm5 {
    margin-left: 5px;
}

span.slTopMenu.lm10 {
    margin-left: 10px;
}

span.slTopMenu.rm5 {
    margin-right: 5px;
}

span.slTopMenu.rm10 {
    margin-right: 10px;
}

span.slTopMenu.autosaveToggle {
    background-color: #dddddd;
    color: #666666;
}

span.slTopMenu.autosaveToggle.active {
    background-color: #007fa3;
    color: white;
}

div.slBody {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

div.slBody.mainPanel {
}

div.slBody .slLogo {
    margin-bottom: 40px;
}

div.slBody .slLogo .lead {
    font-size: 18px;
}

div.slBody .menu li a {
    padding-bottom: 5px;
    padding-top: 5px;
}


div.slBody .slIdxPane {
    border: 1px solid #ddd;
}

div.slBody .slIdxPane #datasetsList .btn-group {
    padding: 10px;
}

div.slBody .slIdxPane .slIdxPaneTitle {
    font-size: 1.3em;
    padding: 10px;
    padding-left: 20px;
    color: #333;
    font-weight: bold;
    border-bottom: 2px solid #007fa3;
}

div.slBody .slIdxPane .glyphicon-trash {
    cursor: pointer;
}

div.slBody #recentComparisons a.slComparisonListItem {
    display: inline-block;
    width: 100%;
    padding: 12px;
}

div.slBody #recentComparisons a.slComparisonListItem:hover {
    background-color: #eee;
}

div.slBody #datasetsList a.slDatasetsListItem {
    display: inline-block;
    width: 100%;
    padding: 5px;
    border-bottom: 1px solid #eee;
}

div.slBody #datasetsList a.slDatasetsListItem.top {
    border-top: 1px solid #eee;
}

div.slBody #datasetsList a.slDatasetsListItem:hover {
    background-color: #eee;
}

div.slBody #datasetsList a.slDatasetsListItem div {
    display: inline-block;
}

div.slBody #datasetsList a.slDatasetsListItem div.dataType {
    display: inline-block;
    width: 45px;
    height: 33px;
}

div.slBody #datasetsList a.slDatasetsListItem div.textArea {
    display: inline-block;
    height: 33px;
}

div.slBody #datasetsList a.slDatasetsListItem .pull-right {
    display: none;
    margin-top: 12px;
    margin-right: 10px;
}


div.slBody #datasetsList a.slDatasetsListItem span.small {
    color: var(--foreground-color,#000);
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-3 {
    display: inline-block;
    font-size: 0.9em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-3.selected {
    border-bottom: 1px solid #007FA3;
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-3:hover {
    background-color: #eee;
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-3:last-child {
    padding: 0;
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-3:last-child input {
    border: 0;
    padding: 10px;
    width: 100%;
    height: 38px;
}

div.slBody .slIdxPane .slIdxPaneToolbar div.col-lg-4:last-child {
    border-right: none;
}

div.slBody .slIdxPane .slIdxPaneSearchbar .col-lg-12 {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

div.slBody .slIdxPane .slIdxPaneSearchbar input {
    border-color: #eee;
}

div.slBody .slIdxPane .dataFormatsList {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 5px;
}

div.slBody .slIdxPane .dataFormatsList h3 {
    display: inline;
    padding-right: 5px;
}

div.slBody .slIdxPane .dataFormat {
    padding: 5px;
    display: inline-block;
}

div.slBody .slIdxPane .dataFormat:active {
    background-color: #007fa3;
}

div.slBody .slIdxPane .dataFormat.selected {
    border: 1px solid #007fa3;
}

div.slBody .slIdxPaneBody.newdataset .row {
    margin: 0;
    margin-bottom: 15px;
}

div.slBody .slIdxPane .dataEntry textarea#newDataEntry {
    resize: vertical;
    width: 100%;
    height: 212px;
}

div.slBody .slIdxPane .newDatasetCreationDivider {
    margin-top: 12px;
}


div.slBody .slIdxPane .dropzoneArea, .dropzoneArea {
    margin-top: 10px;
    border: 1px dashed #ffcc66;
    height: 361px;
    background-image: url('/images/dropzone.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

div.modal .row .selectpicker a span.text {
    background: none;
}


div.bootstrap-tagsinput {
    width: 100%;
    height: 30px !important;
}

.nav-thin-pills li a {
    padding: 6px 12px;
}


.blurb-small {
    padding: 12px;
}


.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 2px;
    pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    position: absolute;
    pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
    content: "\25B2";
    margin: 0 0 1px 0;
    top: -8px;
    left: 0;
    text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
}

.panel-plain .panel-heading, .panel-plain .panel-footer {
    background-color: #fff !important;

}

/* turingssubmit css */

.no-overflow {

    overflow: none !important;

}

.ui-layout-center {
    overflow: visible !important;
}


.dropdown-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}


.label-xs {
    font-size: 0.8em !important;
    padding: 4px;
}

.label-xm {
    font-size: 0.9em !important;
    padding: 4px;
}

.navbar-d3view {

    background: none !important;
    border: 0px !important;
    border-bottom: 1px solid #ddd !important;
    padding: 6px;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;

}

.btn-grp-plain .btn {
    background: transparent !important;
    text-shadow: none;
    color: #666 !important;
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none !important;
    margin-right: 4px;
    font-weight: normal;
}

.btn-grp-plain .btn:hover {
    color: #222 !important;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

ul.list-items li {
    margin-right: 20px;
    display: inline;
}

.release-note-thumbnail {
    padding: 20px;
    border: 4px dashed #eee;
    border-radius: 2px;
}

.blink {
    animation: blinker 1.0s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.dz-preview {
    font-size: 1.2em;
}

.dz-filename {
    font-weight: bold;
}

.btn {
    font-weight: 500;
}

.btn-default {
    background-color: #fcfcfc;
}

.btn-default:hover {
    background-color: #eee;
}

.modal {
    overflow-y: auto;
}


.table-expanded td {
    padding-top: 12px;
    padding-bottom: 12px;
    vertical-align: middle;
}

.form-field, .inline-form-field {
    margin-bottom: 12px;
}

.inline-form-field label {
    display: inline;
    width: 120px;
}

.inline-form-field text, .inline-form-field input, .inline-form-field select {
    display: inline-block;
}

.d3view-filters .label-default {
    background-color: hsl(203, 97%, 86%);
    color: #333;
}

.d3view-filters .filter-value {
    color: #333 !important;
    font-weight: bold;
}

.form-control-sm {
    font-size: 0.9em;
    padding: 2px 4px !important;
    height: 24px;
}

.left-inner-addon-sm {
    padding: 6px 12px;
}

.left-inner-addon-sm i {
    padding: 6px 12px;
}

.label {
    font-size: 100%;
}


.nav li .tab-active {
    display: none;
}

.nav li.active .tab-active {
    display: inline-block !important;
}

.nav-pills-default li.active a,
.nav-pills-default li.active a:hover,
.nav-pills-default li.active a:focus {
    background-color: var(--c-default-tab-active);
    color: var(--foreground-color, #000);
}

.nav-pills-default li a:hover {
    background-color: var(--c-default-tab-active);
    color: #fff;
    cursor: pointer;
}

.modal-header {
    padding: 10px 20px;
    border-radius: 4px 4px 0 0;
    font-weight: 800;
}

.modal-header h1, .modal-header h2 {
    font-size: 1.4em;
}

.modal-header h3, .modal-header h4 {
    font-size: 1.2em;
}

.modal-content {
    border-radius: 0px;
}

/* .form-control { height:28px;} */

.d3view-filters.form-control {
    font-size: 1em;
    height: 28px;
}

.side-bar {
    position: absolute;
    border-right: 1px solid #ddd;
    height: 100%;
    background-color: #fff;
    min-height: 600px;
    left: 0px;
    padding: 8px 24px 8px 8px;
    width: 180px;
}

.side-bar-right {
    position: absolute;
    border-left: 1px solid #ddd;
    height: 100%;
    background-color: #fff;
    min-height: 600px;
    right: -200px;
    padding: 8px 8px 8px 24px;
    width: 180px;
}

.center-panel {
    left: 190px;
    position: absolute;
    right: 0px;
    padding-left: 24px;
}

.side-bar-lg {
    position: absolute;
    box-shadow: 5px 0 25px -20px #444;
    height: 100%;
    background-color: #fff;
    min-height: 600px;
    left: 0px;
    padding: 16px;
    width: 240px;
}


.center-panel-lg {
    font-size: 0.9em;
    left: 242px;
    position: absolute;
    right: 0px;
    padding-left: 24px;
}

.side-bar-xlg {
    position: absolute;
    box-shadow: 5px 0 25px -20px #444;
    height: 100%;
    background-color: #fff;
    min-height: 600px;
    left: 0px;
    padding: 16px;
    width: 300px;
}

.side-bar-xlg-40 {
    width: 40%;
}

.center-panel-xlg {
    left: 302px;
    position: absolute;
    right: 0px;
    padding-left: 20px;
}

.center-panel-xlg-60 {
    left: 42%;
}

.row-no-padding, .row-no-padding > div {
    padding: 0px;
}

.row-no-margin, .row-no-margin > div {
    margin: 0px;
}

.row-no-margin-no-padding {
    margin: 0px;
    padding: 0px;
}

.row-no-margin-bottom-padding, .row-no-margin-bottom-padding > div {
    margin: 0px;
    margin-bottom: 12px;
}

.no-padding {
    padding: 0px !important;
}

.thin-progress-container {

}

.thin-progress-container .progress {
    margin-bottom: 0 !important;
    height: auto !important;
    box-shadow: none !Important;
}

.thin-progress-container .progress-bar {
    height: 0.25em !important;
}

.input-edit-on-hover {
    border: 0px;
    box-shadow: none;
    font-weight: bold;
    background-color: transparent;
}

.input-edit-on-hover:hover, .input-edit-on-hover:focus {
    background-color: #fff;
}

.htCore thead th {
    text-align: left;
    font-weight: bold;
}

.progress-d3view {

    background-color: var(--indigo-blue-light);
    background-image: none !important;

}

.progress-bar-d3view {
    -webkit-animation: progress-bar-stripes 1ms !important;
    animation: progress-bar-stripes 1ms !important;
    background-color: var(--indigo-blue-dark) !important;
    background-image: none !important;
}

.nav-grey li.active a {
    background-color: rgba(0, 0, 0, 0.2);
}


.nav-grey li.active a:hover, .nav-grey li.active a:focus {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--foreground-color, #000);
}

ul.inline-tabs li {
    float: left;
    margin-right: 12px;
}

.page-header-thin {
    margin: 4px 4px;

}

.table-hover tr:hover {
    background-color: #cae8f5 !important;
}

.sidebar-nav {
    font-size: 0.9em;
}

.sidebar-nav li:hover a {
    border-radius: 24px;
}

.sidebar-nav li.active a {
    border-radius: 24px;
}

.table-borderless td, .table-borderless th {
    border: none !important;
}

.rightside-bar {
    width: 240px;
    position: fixed;
    padding: 8px;
    z-index: 10000;
    top: 0px;
    right: 0px;
    left: 100%;
    bottom: 0px;
    margin-left: -240px;
    height: 100%;
    box-shadow: -4px 0px 8px 8px #222;
}

.select2-drop {
    z-index: 99999 !important;
}

.list-group-sm .list-group-item {
    padding: 2px 4px;
}

.list-group-md .list-group-item {
    padding: 4px 8px;
}

label {
    font-weight: 600;
    margin-top: 8px;
}

label.optional {
    font-weight: 400;
}

.panel-heading {
    text-align: left;
}


.editable-click {
    border-bottom: 1px solid transparent !important;
}

.editable-click:hover {
    border-bottom: 1px dashed #eee !important;
}

.border-nav li {
    margin-right: 12px;
}

.border-nav li a {
    font-variant: small-caps;
    font-weight: normal;
    padding: 4px 8px;
    padding-bottom: 12px;
}

.border-nav li.active a {
    background-color: transparent !important;
    font-weight: 600;
    border-radius: 0px !important;
    color: var(--foreground-color, #000);
    border-bottom: 2px solid #333;
}


.panel-title {
    font-weight: 600;
}

.blurb {
    font-weight: normal;
}

.droppablehover {
    background-color: #f0f8ff;
    border: 1px dashed orange;
}

.list-group.plain .list-group-item {
    border: 0px;
    border-bottom: 1px solid #efefef;
    border-radius: 0px;
}

.form-input-name {
    text-align: right;
}

.simple-list li {
    padding: 12px;
}

.simple-list.inline li {
    display: inline-block;
    margin-right: 2px;
}

.blurb-sm {
    padding: 8px;
}

.blurb-plain {
    background-color: transparent;
    border: 0px;
}

.thumbnail-missing {
    width: 80%;
    background-image: url(/images/missing_thumbnail.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: center;
}

.well-mini {
    padding: 6px 12px;
}

.d3view-filters {
    min-height: 40px !important;
}

.svg text, svg text {
    font-weight: bold;
}

.d3view-newton.large svg text, .d3view-newton .svg text {
    font-size: 1.2em;
}

.d3view-newton.large .d3view-legends-container .curve-name {
    font-size: 1.2em;
}

.d3view-newton.large .focus {
    font-size: 18px;
}


.d3view-full-screen, .d3-fs, .d3view-fullscreen, .d3view-fs {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2000;
    margin: 0 !important;
}

/* Tint Sim tab badges (Files / Responses / Errors&Warnings) when there are
   items added since the user's last visit on that tab. Click on the tab marks
   it seen and removes the tint. The total count remains the badge text. */
.badge.tab-badge-new {
    background-color: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

/* When the AppViewer TabBar is mounted (v=2 path on /user/simulations) the
   legacy SPA tab strip is redundant; hide just the <ul id="tabsList"> child so
   the sibling #tabsContent (which hosts the AppViewer) stays visible. */
.pageTabsContainer.av-legacy-tabs-hidden > ul#tabsList { display: none !important; }

/* Hover-expand opt-in for info-widget rows. A wrapping container sets
   data-hover-expand="yes" and its child widgets (legacy .panel.panel-primary
   or modern .dv-widget) peek open on hover (snap back on mouseleave). The
   Enlarge button still pins via .d3view-full-screen above; the two states
   don't conflict. */
[data-hover-expand="yes"] .panel.panel-primary,
[data-hover-expand="yes"] .dv-widget {
    transition: max-height 0.25s ease, box-shadow 0.25s ease, z-index 0s linear 0.25s;
    position: relative;
    z-index: 1;
}
[data-hover-expand="yes"] .panel.panel-primary:hover,
[data-hover-expand="yes"] .dv-widget:hover {
    max-height: 80vh !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 5;
    transition: max-height 0.25s ease 0.15s, box-shadow 0.25s ease 0.15s, z-index 0s linear 0s;
}
[data-hover-expand="yes"] .panel.panel-primary:hover > .panel-body,
[data-hover-expand="yes"] .dv-widget:hover .dv-widget-body,
[data-hover-expand="yes"] .dv-widget:hover .dv-widget-content {
    max-height: calc(80vh - 60px);
    overflow: auto;
}

.modal-dialog-right-sidebar {
    position: fixed;
    transform: translate3d(0%, 0, 0) !important;
    -webkit-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    -moz-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    -o-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    transition: opacity 0.3s linear, right 0.5s ease-out !important;
}

.modal-dialog-right-sidebar .modal-body {
   height:100vh!important;
}


.modal-dialog-right-sidebar-md {
    position: fixed;
    width: 400px !important;
    margin: 0px !important;
    right: 0;
}

.modal-dialog-right-sidebar-half {
    position: fixed;
    width: 50% !important;
    margin: 0px !important;
    right: 0;
}

.modal-dialog-right-sidebar-sm {
    position: fixed;
    width:200px;
    right: 0px !important;
    height: 100% !important;
    transform: translate3d(0%, 0, 0) !important;
    -webkit-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    -moz-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    -o-transition: opacity 0.3s linear, right 0.5s ease-out !important;
    transition: opacity 0.3s linear, right 0.5s ease-out !important;
}

.modal.fade.in .modal-dialog-right-sidebar {
    right: 0;
}

.modal.fade .modal-dialog-right-sidebar {
    right: -800px;
}

.nav-pills-sm li > a {
    padding: 4px 8px !important;
}

.nav-tabs-pull-up li {
    margin-bottom: -2px !important;
}

.d3v-popover {
    position: absolute;
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #fff;
}

.input-row {
    margin-bottom: 12px;
}

label.input-divider {
    margin-top: 12px !important;
    font-size: 1.4em;
}

.form-control-sm {
    font-size: 0.9em;
    height: 28px;
    padding: 8px;
}

.form-control-xs {
    font-size: 0.8em;
    height: 22px;
    padding: 4px;
}

.btn-xxs {
    font-size: 0.8em;
    padding: 2px 4px;
}

.label-sm {
    font-size: 0.8em;
    padding: 2px 4px;
}

a.btn-simple {
    color: #333;
    padding: 4px 6px;
    font-size: 0.9em;
    border: 2px solid transparent;
}

a.btn-simple:hover {
    background-color: #eee;
    border: 2px solid #999;
    border-radius: 4px;
    text-decoration: none !important;
}

.bs_datatable_wrapper {
    padding: 0px !important;
}

.app-wrap {
    margin-bottom: 14px;
}

.d3view-full-screen .close-modal-btn {
    display: block !important;
}

.close-modal-btn {
    display: none;
}

.light {
    color: #666;
}

.panel-simple > .panel-heading, .panel-simple > .panel-footer {
    background: none !important;
}

.grid-stack-item-content {
    inset: 12px 0 12 0 !important;
}

.no-overflows {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.response-content {
    padding: 4px;
}


.inset-shadow {
    -moz-box-shadow: inset 0 0 10px #eee;
    -webkit-box-shadow: inset 0 0 10px #eee;
    box-shadow: inset 0 0 10px #eee;
}

.move-cursor {
    cursor: move;
}

.small-size {
    font-size: 0.8em;
}

.dz-filename {
    font-weight: normal !important;
}

.mainModel .dz-filename {
    font-weight: 800 !important;
}


.simlytiks-layout-editor {
    padding: 6px;
    border: 1px solid orange;
    font-size: 0.8em;

}

.scroll_tabs_container .scroll_tab_left_button {
    background-color: #fff !important;
}

.scroll_tabs_container .scroll_tab_right_button {
    background-color: #fff !important;
}

.scroll_tabs_container .scroll_tab_inner span,
.scroll_tabs_container .scroll_tab_inner li {
    background-color: #fff !important;
    padding: 6px !important;
    color: #337ab7 !important;
}

.well-bordered {
    background-color: #fff !important;
    backgrond-image: none !important;
}

button.link, a.link {
    padding: 6px 8px;
}

button.link:hover, a.link:hover {
    padding: 6px 8px;
    background-color: rgba(222, 235, 255, 0.6);
}


.d3view-full-screen .show-in-full-screen {
    display: block !important;
}

.modal {
    backdrop-filter: blur(1px);
}

.nav-tabs li.active a {
    font-weight: 600;
}

ul.item-list li {
    margin-bottom: 8px;
}

ul.inline-list {
    margin-top: 12px;
    margin-bottom: 6px;
}

ul.inline-list li {
    display: inline-block;
    margin-right: 1.2em;
}

table.table-list thead tr th {
    border: none !important;
}

table.table-list tbody tr td {
    padding: 20px 30px 20px 10px !important;
    border-bottom: 1px solid #eee;
}

strong.mild {
    font-weight: 500;
    color: #444;
}

.badge-default {
    background-color: #eee !important;
    color: #666;
}

.table-hover tr .on-hover {
    display: none;
}

.table-hover tr:hover .on-hover {
    display: block;
}

.dock_ribbon {

    border: 1px solid #ddd;
    border-left: 6px solid orange;
    border-radius: 2px;
    margin-right: 12px;

}

.nav-pills-sm a {
    padding: 2px 6px !important;
    font-size: 0.9em;
}

.modal {
    overflow-y: hidden !important;
}

.app-box {
    border: 2px solid transparent;
    padding-top: 6px;
    display: inline-block;
    width: 80%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.app-box:hover {
    border-radius: 6px !important;
    border: 2px solid #999;
    background-color: #e0e0e0;
}

.bookmarked {
    border-left: 2px solid orange !important;
}

.label-default-light {
    background-color: rgba(119, 119, 119, 0.5);
    color: #fcfcfc;
    padding: 4px 8px;
}


.app-collection.vtop table.dataTable tbody td {
    vertical-align: top !important;
}

.app-collection table.dataTable tbody tr input[type=checkbox] {
    font-size: 2em !important;
    padding: 8px !important;
}

.app-collection table.dataTable tbody tr .show-on-hover {
    visibility: hidden;
}

.app-collection table.dataTable tbody tr:hover .show-on-hover {
    visibility: visible;
}

#global-drop-file {

    width: 200px;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    border: 1px dashed #eee;
    border-radius: 4px;
    margin-top: 8px;
    background-color: #eee;

}

.nav-pills-stretch li {
    width: 100%;
    margin-bottom: 8px;
}

.dark-mode {
    background-color: grey !important;
    color: #fff !important;
}

.modal-cancel {
    background-color: transparent !important;
}

.btn-outline {
    background-color: transparent !important;
    border: 1px solid #ddd;
    background-image: none !important;
    color: var(--foreground-color, #000);
    font-weight: 500;
}

.btn-outline-on-hover {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 1px solid transparent;
    background-image: none !important;
}

.btn-outline:hover, .btn-outline-on-hover:hover {
    background-color: #eee !important;
}

.btn-outline:active, .btn-outline-on-hover:active {
    background-color: #eee;
    border: 1px solid #ddd !important;
}

.btn-outline:focus, .btn-outline-on-hover:focus {
    background-color: #fefefe;
    border: 1px solid #ddd !important;
}


.configuring .app-box {
    border: 2px dashed #eee;
}

/* card definitions */
.card {
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    height: 240px;
}

.card .card-footer {
    position: absolute;
    bottom: 40px;
    text-align: right;
}

.card:hover {
    background-color: #eee;
}

.card.active {
    border: 1px solid blue;
}

span.app-icon.jiggle {

    animation-name: keyframes2;

    animation-iteration-count: infinite;

    animation-delay: -.5s;

    animation-duration: .3s;

}

@keyframes keyframes2 {

    0% {

        transform: rotate(5deg);

        animation-timing-function: ease-in;

    }

    50% {

        transform: rotate(-5deg);

        animation-timing-function: ease-out;

    }

}

.row {
    margin-left: -6px;
    margin-right: -6px;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 6px;
    padding-right: 6px;
}


.panel-no-border {
    border: 1px solid transparent !important;
}

.panel-no-border .panel-heading {
    border: 1px solid transparent !important;
}

.panel-no-border:hover {
    border: 1px solid #ddd !important;
}

.panel-no-border:hover .panel-heading {
    border-bottom: 1px solid #ddd !important;
}

.modal-body {
    padding: 25px;
}

.list-group-item a.active {
    color: #fff !important;
}

.panel-primary h3 {
    color: #fff !important;
}

.list-group a.active h2, .list-group a.active h3, .list-group a.active h1, .list-group a.active h4 {
    color: #fff !important;
}

.input-group-addon-simple {
    background-color: transparent !important;
}

.form-control {
    color: var(--foreground-color, #000) !important;
}


td.checkbox_selection {
    cursor: pointer;
    padding: 20px !important;
}

.row-striped :nth-child(odd) {
    background-color: #f9f9f9;
}


.two-col-flex {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.two-col-flex .left-col {
    flex-basis: 180px !important;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-right: 1px solid #ddd;
    padding: 8px 14px 8px 0px;
    background-color: #fff;
}

.two-col-flex .content-col {
    padding: 8px 18px;
    flex: 1 1 auto;
}

.two-col-flex .right-col {
    flex-basis: 140px !important;
    flex-grow: 0;
    flex-shrink: 0;
    flex-wrap: wrap;
    border-left: 1px solid #ddd;
    padding: 8px 18px 8px 18px;
    background-color: #fff;
}

.two-col-flex .right-col-md, .two-col-flex .left-col-md {
    flex-basis:240px!important;
}

.two-col-flex .right-col-lg, .two-col-flex .left-col-lg {
    flex-basis:30%!important;
}

.navbar-app-header {
    margin: 0px !important;
    border: 0px !important;
    background-color: #fff !important;
    border-bottom: 2px solid #888 !important;
    margin-bottom: 12px !important;
}

.navbar-app-header .navbar-brand {
    color: var(--foreground-color, #000);
}

.panel-sm {
    padding: 2px !important;
}

.panel-sm .panel-heading, .panel-sm .panel-body, .panel-sm panel-footer {
    padding: 4px !important;
}

.flex-thumbnail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex-thumbnail .flex-thumbnail-item {
    flex-basis: 240px;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 20px;
    width: 20%;
}

.removeThis {
    cursor: pointer;
}

ul.inline li {
    display: inline-block;
    margin-right: 12px;
}

.d3view-user-initials {
    background: #dbd1bf;
    border: 1px solid #DDD;
    border-radius: 50%;
    padding: 15px;
    font-size: 2em;
    color: #726e6e;
    font-weight: 600;
    text-align: center;
    width: 80px !important;
    font-family: var(--font-family);
}

.btn-group-compact.btn-group.btn-group-justified > .btn {
    white-space: normal;
}


.alert-default {
    background-image: -webkit-linear-gradient(top, #eee 0, #ccc 100%);
    background-image: -o-linear-gradient(top, #eee 0, #ccc 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
    background-image: linear-gradient(to bottom, #eee 0, #ccc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0);
    background-repeat: repeat-x;
    border-color: #ddd;
    font-weight: bold;
}

.newly_created {
    border: 2px dashed orange;
}


.modal-content {
    border-radius: 6px;
}

.modal-dialog-right-sidebar .modal-content {
    border-radius: 0px !important;
}

.count-container {

    display: flex;
    justify-content: space-between;

}

.count-item {
    border-radius: 4px;
    margin-right: 8px;
    padding: 8px;
}

.count-item .count {
    font-size: 2em;
}

.count-item .what {
    font-size: 1.2em;
}

.menu-level1 {
    font-size: 1.2em;
    font-weight: bold;
}

.menu-level2 {
    font-size: 1.1em;
    font-weight: bold;
}

.menu-level3 {
    font-size: 1.0em;
}

.menu-level4 {
    font-size: 0.9em;
}

.button-level1 {
    font-size: 1.2em;
}

.button-level2 {
    font-size: 1.1em;
}

.button-level3 {
    font-size: 1.0em;
}

.button-level4 {
    font-size: 0.9em;
}

button, .btn:not(.dropdown-toggle), .btn-group .btn:not(.dropdown-toggle) {
    border-radius: 18px;
    padding: 6px 12px;
}

.btn-sm:not(.dropdown-toggle), .btn-group .btn-sm:not(.dropdown-toggle) {
    border-radius: 18px;
    padding: 4px 12px;
}

.btn-xs:not(.dropdown-toggle), .btn-group .btn-xs:not(.dropdown-toggle) {
    font-size: 0.9em;
    border-radius: 14px;
    padding: 3px 8px;
}

.btn-group-justified .btn {
    border-radius:2px!important;
}

.btn-group-justified .btn:first-child {
    border-radius-topleft:14px!important;
    border-radius-bottomleft:14px!important;
}

.btn-group-justified .btn:last-child {
    border-radius-topright:14px!important;
    border-radius-bottomright:14px!important;
}

.modal-header .btn:not(.dropdown-toggle) {
    border-radius: 24px;
    padding: 4px 12px;
}

.modal-footer .btn:not(.dropdown-toggle) {
    padding: 6px 24px;
}


.tabContent {
    padding: 4px 12px;
}

.physicaltest-non-modal-header {
    padding: 20px;
}

.twitter-typeahead {
    width: 100%;
}


.responseItemsRenderingArea > .d3view-carousel .curveArea {
     height: 100% !important;
}

.responseItemsRenderingArea > .d3view-carousel {
     height: 700px !important;
}

.responseItemsRenderingArea > .d3view-carousel .profile-viz .response-container {
     height: 100%;
     margin-bottom: 0;
}

.responseItemsRenderingArea > .d3view-carousel .profile-viz .response-container .respContent {
     height: calc(100% - 115px);
     margin-bottom: 0;
}

.user-profile-initial_s {
    border: 1px solid black;
    padding: 14px;
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    border-radius: 60px;
}

.navbar-right {
    padding-right: 20px !important;
}


.grad_background {
    border-radius: 0.5em;
    background: linear-gradient(180deg, #44474a, #2f3132);
    box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, .25), inset 1px 1px 1px 0 hsla(0, 0%, 100%, .1);

}


.dropdown-menu > li > a {
    padding: 8px 20px
}

.selected .toggle_selection.fa-check {
    background-color: green;
}

simlytiks.fa {
    font-size: 0.8em;
}

.htCore th {
    padding: 6px !important;
    vertical-align: middle;
}

.htCore td {
    padding: 6px !important;
    vertical-align: middle;
    text-align: left !important;
}

#user-dashboard .d3view-tab-manager .nav-tabs .nav-tab-item a {
    text-transform: capitalize;
    text-align: left !important;
}

#user-dashboard .d3view-tab-manager .nav-tabs .nav-tab-item a span.fa {
    font-size: 0.9em !important;
    margin-right: 4px;
}

.panel .on-hover {
    visibility: hidden;
}

.panel:hover .on-hover {
    visibility: visible;
}

.hover-parent .on-hover {
    display: inline !important;
    visibility: hidden;
}

.hover-parent:hover .on-hover {
    display: inline !important;
    visibility: visible;
}

.nav a.nav-link {
    padding: 4px !important;
    margin-left: 6px !important;
    font-size: 0.8em;
    display: inline !important;
}

.nav a.nav-link:hover {
    background-color: lightblue !important;
}

.label-default-light {
    backgrond-color: #fafafa !important;
}

.item-tabs {
    font-size: 0.9em;
}

table.vmiddle td {
    vertical-align: middle !important;
}

.nav-simple li.active {
    font-weight: bold;
    background-color: #eee;
}

.fora-main-container {
    padding: 20px;
}

.superscript {
    color: var(--foreground-color,#000);
    position: relative;
    top: -0.5em;
    font-size: 80%;
}

.small {
    font-size: 0.8em;
}

* > i, * > span.fa {
    font-size: 0.8 !important;
}

* > i:after, * > span.fa {
    content: " ";
}

.box-display {
    padding: 30px;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

.box-display:hover {
    background-color: var(--box-hover-bg, #eee);
    /* Modernized: Uses CSS variable for box hover background */
}

.box-display:hover a {
    text-transform: none;
}

.selectable-list li {
    margin: 12px 0px;
}

.selectable-list li > a {
    -webkit-transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out;
    -moz-transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out;
    -o-transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out;
    transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out;
    display: block;
    text-decoration: none;
    padding: 8px;
    background-color: var(--panel-bg, #fff);
    border-radius: 4px;
    /* Modernized: Uses CSS variable for panel background */
}

.selectable-list li > a:hover {
    background-color: var(--panel-hover-bg, var(--indigo-blue-medium));
    color: var(--panel-hover-color, #fff);
    /* Modernized: Uses CSS variables for panel hover */
}

.lead {
    font-weight: 400;
}

h1 small {
    color: #222;
}

.table td {
    vertical-align: middle !important;
}

.row-compact div {
    padding: 0px;
}

.selected {
    background-color: var(--selected-bg, #efe24b) !important;
    /* Modernized: Uses CSS variable for selected background */
}

.server-availability h2 {
    margin-top: 12px !important;
}

#server-availability  .row .col-md-4,
#server-availability  .row .col-md-12
{ margin-bottom:12px; }



.navbar-brand {
    color: var(--navbar-color, #000) !important;
    /* Modernized: Uses CSS variable for navbar brand color */
}

.navbar-nav li:not(.ignore).active a {
    color: var(--navbar-active-color, #000) !important;
    background-color: var(--navbar-active-bg, #eee);
    border-radius: 6px 6px 0px 0px;
    border-bottom: 1px solid var(--navbar-active-bg, #eee) !important;
    margin-bottom: -2px;
    /* Modernized: Uses CSS variables for nav active colors */
}

.navbar-bottom-border {
    border-bottom: 1px solid var(--navbar-border, #eee);
    /* Modernized: Uses CSS variable for navbar border */
}

.dropdown-menu.span-links li span {
    display:block;
    padding:12px 12px!important;
}


.status-solving { border-left:6px solid blue;}
.status-waiting { border-left:6px solid orange;}
.status-failed_to_submit, .status-failed { border-left:4px solid red;}
.status-finished {
    border-left:4px solid green;
}

.solver-attributes-new-input .row {
    margin-bottom:18px!important;
}

.kanban-view {
    display:flex;
}

.kanban-group {

    flex-basis: 100%;
    width:300px;
    margin-left:20px;

}

.kanban-group-title {
    font-size: 1.2em;
    background-color: var(--kanban-title-bg, #444);
    padding: 12px;
    color: var(--kanban-title-color, #fff);
    text-align: center;
    /* Modernized: Uses CSS variables for kanban group title */
}

.kanban-item {
    border: 2px solid var(--kanban-item-border, #eee);
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    /* Modernized: Uses CSS variable for kanban item border */
}

input.editable {
    cursor:text;
    border:1px solid transparent;
    width:inherit;
}

.editable:hover {
    background-color:yellow;
    color:#000;
    border:1px solid transparent;
}


.workflow-library-item:hover .panel {

    box-shadow: 0 0 .2rem #fff,
    0 0 2px #fff,
    0 0 5px blue,
    0 0 5px blue,
    0 0 5px blue,
    inset 0 0 5px blue;
    cursor:pointer;

}

.btn-square {
    border-radius:2px !important;
}


.footer-options-left .btn {

    display:inline-block;

}

.list-group-flush, .list-group-flush .list-group-item {
    border:0px!important;
    display:block;
    padding:0px !important;
    box-shadow: transparent 0 0 0 !important;
    -webkit-box-shadow: transparent 0 0 0 !important;
}

.list-group-flush .list-group-item a {
    display:block;
    padding:9px 0px;
}

.list-group-flush .list-group-item a:hover {
    text-decoration:none;
    background-color:lightgrey;
}

.list-group-flush .list-group-item a.inline {
    display:inline!important;
}

.lead-sm { font-size: 0.9em; }
.lead-xs { font-size: 0.8em; }
.lead-xxs { font-size: 0.7em; }
/* Modernized: Font sizes for lead text */

.badge-light, .label-light {
    background-color: var(--badge-bg, #f9f9f9) !important;
    color: var(--badge-color, #333);
    /* Modernized: Uses CSS variables for badge background and color */
}

.fa-xs { font-size:0.8em;!important}

.btn-group-justified .btn:first-child {
    border-radius: 24px 0px 0px 24px !important;
}

.btn-group-justified .btn:last-child {
    border-radius: 0px 20px 20px 0px !important;
}


.popover-content {
    max-height: 200px;
    max-width: 400px;
    overflow-y: scroll;
    overflow-x: scroll;
}

.visible_on_hover {
    margin-left:4px;
    visibility: hidden;
}

.table-view .vrow:hover .visible_on_hover {
    visibility: visible;
}

.btn-primary-main {
    background-color: var(--btn-primary-bg, #000)!important;
    background-image: none!important;
    color: var(--btn-primary-color, #000)!important;
    font-weight:normal!important;
}

.btn-primary-main:hover {
    background-color: var(--btn-primary-bg-hover, #000)!important;
    background-image: none!important;
    color: var(--btn-primary-color, #000)!important;
    font-weight:normal!important;
}

/* =============================================
   Notification Panel — Redesign
   ============================================= */
@keyframes notifSlideIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.unread_notifications_badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1px 6px;
	border-radius: 10px;
	background-color: transparent;
	color: #8a8fa8;
	font-size: 11px;
	font-weight: 500;
	min-width: 18px;
	text-align: center;
	transition: all 0.2s ease;
}
.unread_notifications_badge.unread_exists {
	background-color: #dc3545;
	color: #fff;
	font-weight: 600;
}
#notification-center-wrapper {
	position: fixed;
	top: 56px;
	bottom: 36px;
	right: 0;
	width: 380px;
	height: auto;
	max-height: calc(100vh - 92px);
	background: #fff;
	border-radius: 0 0 0 8px;
	border: 1px solid #dfe1e8;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	z-index: 1050;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	animation: notifSlideIn 0.25s ease;
	min-height: auto;
}
#notification-center-wrapper .notification_center_contentview,
#notification-center-wrapper .notification_center_container {
	position: static;
	width: auto;
	min-height: 0;
	border: none;
	box-shadow: none;
}
/* --- Panel Header --- */
#notification-center-wrapper .notification_center_contentview {
	padding: 14px 18px 12px;
	background: #f5f6f8;
	border-bottom: 1px solid #ebedf2;
}
#notification-center-wrapper .noti-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
#notification-center-wrapper .noti-panel-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
	letter-spacing: -0.01em;
}
#notification-center-wrapper .noti-panel-actions i {
	font-size: 13px;
	color: #8a8fa8;
	cursor: pointer;
	padding: 5px 7px;
	border-radius: 6px;
	transition: all 0.18s ease;
	margin-left: 2px;
}
#notification-center-wrapper .noti-panel-actions i:hover {
	color: #2d3250;
	background: #ebedf2;
}
/* Filter select */
#notification-center-wrapper #notification_item_type {
	width: 100%;
	padding: 7px 28px 7px 10px;
	font-size: 12px;
	color: #2d3250;
	background: #fff;
	border: 1px solid #dfe1e8;
	border-radius: 6px;
	outline: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a8fa8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#notification-center-wrapper #notification_item_type:focus {
	border-color: #337ab7;
	box-shadow: 0 0 0 3px rgba(51,122,183,0.1);
}
/* --- Panel Body --- */
#notification-center-wrapper .notification_center_container {
	padding: 0;
	background: #fff;
	flex: 1 1 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* --- Notification List --- */
#notification-center-wrapper .noti_area {
	flex: 1 1 0;
	max-height: none;
	overflow-y: auto;
	padding: 4px 0;
	position: static;
	min-height: auto;
}
#notification-center-wrapper .noti_area::-webkit-scrollbar {
	width: 4px;
}
#notification-center-wrapper .noti_area::-webkit-scrollbar-track {
	background: transparent;
}
#notification-center-wrapper .noti_area::-webkit-scrollbar-thumb {
	background: #dfe1e8;
	border-radius: 4px;
}
/* --- Notification Item --- */
#notification-center-wrapper .notification_item {
	padding: 12px 18px;
	margin: 0;
	border: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid #f0f1f5;
	box-shadow: none;
	cursor: pointer;
	transition: all 0.15s ease;
	display: flex;
	align-items: flex-start;
	font-size: 13px;
	font-weight: 400;
	color: #5a5f7a;
}
#notification-center-wrapper .notification_item:last-child {
	border-bottom: none;
}
#notification-center-wrapper .notification_item:hover {
	background: #f5f6f8;
}
#notification-center-wrapper .notification_item.unread {
	border-left-color: #337ab7;
	background: #f0f5fb;
	color: #1a1a2e;
	box-shadow: none;
}
#notification-center-wrapper .notification_item.unread:hover {
	background: #e5eef7;
}
/* Item icon */
#notification-center-wrapper .noti-item-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #ebedf2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	font-size: 13px;
	color: #5a5f7a;
	flex: 0 0 36px;
}
#notification-center-wrapper .notification_item.unread .noti-item-icon {
	background: #e3f2fd;
	color: #1565c0;
}
/* Item content */
#notification-center-wrapper .noti-item-content {
	flex: 1;
	min-width: 0;
}
#notification-center-wrapper .notification-subject {
	display: block;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.4;
	max-width: none;
	color: inherit;
}
#notification-center-wrapper .notification_item.unread .notification-subject {
	font-weight: 500;
	color: #1a1a2e;
}
#notification-center-wrapper .notification-time {
	display: block;
	font-size: 11px;
	color: #8a8fa8;
	margin-top: 3px;
	line-height: 1;
}
/* Action buttons */
#notification-center-wrapper .notiaction-btns {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 8px;
	float: none;
}
#notification-center-wrapper .notiaction-btns .notiaction {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: 12px;
	color: #8a8fa8;
	margin: 0;
	transition: all 0.18s ease;
}
#notification-center-wrapper .notiaction-btns .notiaction:hover {
	background: #fef2f2;
	color: #dc3545;
}
#notification-center-wrapper .notiaction-btns .notiaction#markasreadtoggle:hover {
	background: #e3f2fd;
	color: #337ab7;
}
/* --- Controls --- */
#notification-center-wrapper .noti_controls {
	display: flex;
	border-top: 1px solid #ebedf2;
	margin: 0;
	font-size: 12px;
}
#notification-center-wrapper .noti_controls .mark_all_as_read,
#notification-center-wrapper .noti_controls .clear_read {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	cursor: pointer;
	color: #5a5f7a;
	transition: all 0.18s ease;
	font-weight: 500;
	border: none;
	background: none;
	border-radius: 0;
	box-shadow: none;
}
#notification-center-wrapper .noti_controls .mark_all_as_read {
	border-right: 1px solid #ebedf2;
}
#notification-center-wrapper .noti_controls .mark_all_as_read:hover {
	background: #f0f5fb;
	color: #337ab7;
}
#notification-center-wrapper .noti_controls .clear_read:hover {
	background: #fef2f2;
	color: #dc3545;
}
#notification-center-wrapper .noti_controls i {
	margin-right: 4px;
}
/* --- Pagination --- */
#notification-center-wrapper .panel-footer {
	background: #f5f6f8;
	border-top: 1px solid #ebedf2;
	padding: 8px 18px;
}
#notification-center-wrapper .noti_pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-shadow: none;
	padding: 0;
	text-align: center;
}
#notification-center-wrapper .noti_pagination .glyphicon {
	font-size: 10px;
	padding: 4px 6px;
	color: #5a5f7a;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.18s ease;
}
#notification-center-wrapper .noti_pagination .glyphicon:hover {
	background: #ebedf2;
	color: #1a1a2e;
}
#notification-center-wrapper .noti_pagination input {
	width: 36px;
	height: 26px;
	text-align: center;
	font-size: 12px;
	border: 1px solid #dfe1e8;
	border-radius: 6px;
	color: #2d3250;
	outline: none;
	-moz-appearance: textfield;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#notification-center-wrapper .noti_pagination input::-webkit-inner-spin-button,
#notification-center-wrapper .noti_pagination input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
#notification-center-wrapper .noti_pagination input:focus {
	border-color: #337ab7;
	box-shadow: 0 0 0 3px rgba(51,122,183,0.1);
}
/* --- Empty State --- */
#notification-center-wrapper .noti_empty_state {
	text-align: center;
	padding: 48px 20px;
	color: #8a8fa8;
}
#notification-center-wrapper .noti_empty_state i {
	font-size: 32px;
	display: block;
	margin-bottom: 12px;
	color: #dfe1e8;
}
#notification-center-wrapper .noti_empty_state p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: #8a8fa8;
}

/* =============================================
   Header Dropdown Menus — Modernized
   ============================================= */
@keyframes headerDropSlide {
	from { opacity: 0; }
	to { opacity: 1; }
}
header .navbar-right > li.dropdown > .dropdown-menu {
	border: 1px solid #dfe1e8;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	padding: 6px 0;
	margin: 0;
	min-width: 200px;
	animation: headerDropSlide 0.2s ease;
	font-family: var(--font-family);
	background: #fff;
	border-top: none;
}
header .navbar-right > li.dropdown > .dropdown-menu > li > a {
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 400;
	color: #2d3250;
	transition: background-color 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
header .navbar-right > li.dropdown > .dropdown-menu > li > a:hover,
header .navbar-right > li.dropdown > .dropdown-menu > li > a:focus {
	background-color: #f0f5fb;
	color: #1a1a2e !important;
}
header .navbar-right > li.dropdown > .dropdown-menu > li > a .fa,
header .navbar-right > li.dropdown > .dropdown-menu > li > a .header-icon {
	width: 16px;
	text-align: center;
	font-size: 13px;
	color: #5a5f7a;
	flex-shrink: 0;
	transition: color 0.15s ease;
}
header .navbar-right > li.dropdown > .dropdown-menu > li > a:hover .fa,
header .navbar-right > li.dropdown > .dropdown-menu > li > a:hover .header-icon {
	color: #337ab7;
}
/* Dividers */
header .navbar-right > li.dropdown > .dropdown-menu > .dropdown-divider {
	margin: 4px 12px;
	border-top: 1px solid #ebedf2;
	height: 0;
	overflow: hidden;
}
/* Logout — subtle red accent on hover */
header .navbar-right > li.dropdown > .dropdown-menu > li > a[href*="logout"]:hover {
	background-color: #fef2f2;
	color: #dc3545 !important;
}
header .navbar-right > li.dropdown > .dropdown-menu > li > a[href*="logout"]:hover .fa {
	color: #dc3545;
}

/* =============================================
   Global Search Panel
   ============================================= */
@keyframes searchSlideIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
/* --- Navbar panels — positioned below header --- */
/* --- Search Input Wrapper --- */
header .global-search-wrapper {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	margin: 0 8px;
}
header .global-search-wrapper .search-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.5);
	font-size: 12px;
	pointer-events: none;
	z-index: 2;
	transition: color 0.18s ease;
}
header .global-search-wrapper input#site-search {
	display: inline-block !important;
	padding-left: 32px !important;
	padding-right: 34px !important;
	height: 32px !important;
	font-size: 13px !important;
	background: rgba(255,255,255,0.1) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	color: #fff !important;
	width: 220px !important;
	border-radius: 22px !important;
	box-shadow: none !important;
	transition: all 0.25s ease;
	line-height: 32px;
}
header .global-search-wrapper input#site-search::placeholder {
	color: rgba(255,255,255,0.45);
}
header .global-search-wrapper input#site-search:focus {
	background: rgba(255,255,255,0.18) !important;
	border-color: rgba(255,255,255,0.3) !important;
	outline: none;
	width: 280px !important;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.06) !important;
}
header .global-search-wrapper .search-filter-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.45);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	transition: all 0.18s ease;
	text-decoration: none !important;
	z-index: 2;
}
header .global-search-wrapper .search-filter-toggle:hover {
	color: #fff;
	background: rgba(255,255,255,0.12);
}
header .global-search-wrapper .global-search-spinner {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.7);
	font-size: 12px;
	z-index: 2;
}
/* --- Results Panel --- */
#search-panel-wrapper {
	position: fixed;
	top: 56px;
	right: 0;
	width: 400px;
	max-height: calc(100vh - 70px);
	background: #fff;
	border-radius: 8px;
	border: 1px solid #dfe1e8;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	z-index: 1050;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-family: var(--font-family);
	animation: searchSlideIn 0.25s ease;
}
#search-panel-wrapper .search-panel-header {
	padding: 14px 18px 12px;
	background: #f5f6f8;
	border-bottom: 1px solid #ebedf2;
}
#search-panel-wrapper .search-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#search-panel-wrapper .search-panel-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
	letter-spacing: -0.01em;
}
#search-panel-wrapper .search-panel-count {
	font-weight: 400;
	color: #8a8fa8;
	font-size: 12px;
	margin-left: 6px;
}
#search-panel-wrapper .search-panel-actions i {
	font-size: 13px;
	color: #8a8fa8;
	cursor: pointer;
	padding: 5px 7px;
	border-radius: 6px;
	transition: all 0.18s ease;
	margin-left: 2px;
}
#search-panel-wrapper .search-panel-actions i:hover {
	color: #2d3250;
	background: #ebedf2;
}
/* --- Results List --- */
#search-panel-wrapper .search-results-area {
	flex: 1;
	max-height: 400px;
	overflow-y: scroll;
	padding: 4px 0;
}
#search-panel-wrapper .search-results-area::-webkit-scrollbar {
	width: 4px;
}
#search-panel-wrapper .search-results-area::-webkit-scrollbar-track {
	background: transparent;
}
#search-panel-wrapper .search-results-area::-webkit-scrollbar-thumb {
	background: #dfe1e8;
	border-radius: 4px;
}
/* --- Result Item --- */
#search-panel-wrapper .search-result-item {
	display: flex;
	align-items: center;
	padding: 10px 18px;
	border-bottom: 1px solid #f0f1f5;
	cursor: pointer;
	transition: background 0.15s ease;
	text-decoration: none;
	color: inherit;
}
#search-panel-wrapper .search-result-item:last-child {
	border-bottom: none;
}
#search-panel-wrapper .search-result-item:hover {
	background: #f5f6f8;
	text-decoration: none;
	color: inherit;
}
#search-panel-wrapper .search-result-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #ebedf2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	font-size: 14px;
	color: #5a5f7a;
}
#search-panel-wrapper .search-result-icon.type-simulation { background: #e3f2fd; color: #1565c0; }
#search-panel-wrapper .search-result-icon.type-physicaltest { background: #f3e5f5; color: #7b1fa2; }
#search-panel-wrapper .search-result-icon.type-file { background: #fff3e0; color: #e65100; }
#search-panel-wrapper .search-result-icon.type-workflow { background: #e8f5e9; color: #2e7d32; }
#search-panel-wrapper .search-result-icon.type-database,
#search-panel-wrapper .search-result-icon.type-datarecord { background: #fce4ec; color: #c62828; }
#search-panel-wrapper .search-result-icon.type-study { background: #e0f2f1; color: #00695c; }
#search-panel-wrapper .search-result-icon.type-dataset { background: #f1f8e9; color: #558b2f; }
#search-panel-wrapper .search-result-icon.type-hpcjob { background: #fff8e1; color: #f57f17; }
#search-panel-wrapper .search-result-icon.type-project { background: #e8eaf6; color: #283593; }
#search-panel-wrapper .search-result-icon.type-responsetemplate { background: #e0f7fa; color: #00838f; }
#search-panel-wrapper .search-result-content {
	flex: 1;
	min-width: 0;
}
#search-panel-wrapper .search-result-name {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
	line-height: 1.4;
	color: #2d3250;
	font-weight: 500;
}
#search-panel-wrapper .search-result-type {
	display: block;
	font-size: 11px;
	color: #8a8fa8;
	margin-top: 2px;
	text-transform: capitalize;
}
/* --- Empty State --- */
#search-panel-wrapper .search-empty-state {
	text-align: center;
	padding: 48px 20px;
	color: #8a8fa8;
}
#search-panel-wrapper .search-empty-state i {
	font-size: 32px;
	display: block;
	margin-bottom: 12px;
	color: #dfe1e8;
}
#search-panel-wrapper .search-empty-state p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: #8a8fa8;
}
/* --- Loading State --- */
#search-panel-wrapper .search-loading {
	text-align: center;
	padding: 40px 20px;
	color: #8a8fa8;
}
#search-panel-wrapper .search-loading i {
	font-size: 20px;
	display: block;
	margin-bottom: 10px;
	color: #337ab7;
}
#search-panel-wrapper .search-loading p {
	margin: 0;
	font-size: 13px;
}
/* --- Advanced Options Panel --- */
#search-options-panel {
	position: fixed;
	top: 56px;
	right: 0;
	width: 320px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #dfe1e8;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	z-index: 1049;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: var(--font-family);
	animation: searchSlideIn 0.25s ease;
}
#search-options-panel .search-panel-header {
	padding: 14px 18px 12px;
	background: #f5f6f8;
	border-bottom: 1px solid #ebedf2;
}
#search-options-panel .search-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#search-options-panel .search-panel-title {
	font-size: 14px;
	font-weight: 600;
	color: #1a1a2e;
}
#search-options-panel .search-options-body {
	padding: 16px 18px;
}
#search-options-panel .search-option-row {
	margin-bottom: 12px;
}
#search-options-panel .search-option-row:last-child {
	margin-bottom: 0;
}
#search-options-panel .search-option-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #5a5f7a;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
#search-options-panel .search-option-input {
	width: 100%;
	padding: 7px 10px;
	font-size: 13px;
	color: #2d3250;
	background: #fff;
	border: 1px solid #dfe1e8;
	border-radius: 6px;
	outline: none;
	-webkit-appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#search-options-panel select.search-option-input {
	padding-right: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238a8fa8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
#search-options-panel .search-option-input:focus {
	border-color: #337ab7;
	box-shadow: 0 0 0 3px rgba(51,122,183,0.1);
}
#search-options-panel .search-panel-footer {
	display: flex;
	border-top: 1px solid #ebedf2;
}
#search-options-panel .search-panel-footer span {
	flex: 1;
	text-align: center;
	padding: 10px 0;
	cursor: pointer;
	color: #5a5f7a;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.18s ease;
	border: none;
	background: none;
}
#search-options-panel .search-panel-footer .do-advanced-search {
	border-left: 1px solid #ebedf2;
}
#search-options-panel .search-panel-footer .do-advanced-search:hover {
	background: #f0f5fb;
	color: #337ab7;
}
#search-options-panel .search-panel-footer .cancel-advanced-search:hover {
	background: #f5f6f8;
	color: #2d3250;
}

/* ── Library Workflows Panel ─────────────────────────────────────── */
.lib-workflows-panel {
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}
.lib-workflows-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}
.lib-workflows-header .lib-source-toggle {
    width: 100%;
    margin-bottom: 0 !important;
}
.lib-workflows-header .lib-category-filter {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    line-height: 1.7;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
}
.lib-workflows-header .lib-category-filter.is-open {
    display: flex !important;
}
.lib-workflows-header .lib-category-filter::-webkit-scrollbar {
    width: 6px;
}
.lib-workflows-header .lib-category-filter::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}
/* Filter toggle is now an input-group-btn append on the search row.
   Visual states layer on top of bootstrap btn styling. */
.lib-filter-toggle {
    position: relative;
    color: #6b7280;
}
.lib-filter-toggle:hover {
    color: #2c5282;
}
.lib-filter-toggle.is-open {
    background: #e0ecf8 !important;
    color: #2c5282 !important;
    border-color: #b7d3ee !important;
}
.lib-filter-toggle.is-active {
    color: #2c5282 !important;
}
.lib-filter-toggle .lib-filter-active-dot {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d46b08;
    border: 1px solid #fff;
}
/* Reset the legacy absolute search icon styling — the new layout puts
   the search glyph inside an .input-group-addon so it no longer needs
   to float over the input. */
.lib-workflows-search .lib-search-icon { display: none; }
.lib-workflows-search .lib-search-input {
    padding-left: 10px !important;
}
.lib-workflows-search .input-group-addon {
    background: #f7fafc;
    border-color: #e2e8f0;
    color: #a0aec0;
    font-size: 12px;
}
.lib-workflows-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2d3748;
}
.lib-workflows-title .fa { color: #337ab7; font-size: 14px; }
.lib-workflows-title small { color: #a0aec0; font-size: 11px; font-weight: 400; }
.lib-workflows-search {
    position: relative;
    padding: 10px 12px 6px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.lib-workflows-search .lib-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 12px;
    pointer-events: none;
    margin-top: 2px;
}
.lib-workflows-search .lib-search-input {
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #f7fafc;
    padding: 6px 10px 6px 28px;
    height: auto;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lib-workflows-search .lib-search-input:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51,122,183,0.1);
    background: #fff;
    outline: none;
}
.lib-workflows-list {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    overflow-y: auto;
    flex: 1 1 auto;
}
.lib-wf-item { border: none; }
.lib-wf-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    text-decoration: none;
    transition: background 0.12s;
    border-left: 3px solid transparent;
}
.lib-wf-link:hover {
    background: #ebf4ff;
    border-left-color: #337ab7;
    text-decoration: none;
}
.lib-wf-number {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    color: #a0aec0;
    background: #edf2f7;
    border-radius: 4px;
    padding: 1px 5px;
    min-width: 32px;
    text-align: center;
    letter-spacing: 0.3px;
}
.lib-wf-link:hover .lib-wf-number { background: #bee3f8; color: #2b6cb0; }
.lib-wf-name {
    flex: 1 1 auto;
    font-size: 12px;
    color: #4a5568;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.lib-wf-link:hover .lib-wf-name { color: #2b6cb0; }
.lib-wf-doc { flex-shrink: 0; font-size: 11px; color: #e53e3e; opacity: 0.6; transition: opacity 0.15s; }
.lib-wf-link:hover .lib-wf-doc { opacity: 1; }

/* ── Library Workflows Panel — Size Override ─────────────────────── */
.lib-wf-link { padding: 10px 16px; gap: 10px; }
.lib-wf-number { font-size: 11px; min-width: 36px; padding: 2px 6px; }
.lib-wf-name { font-size: 14px; }
.lib-wf-doc { font-size: 14px; }
.lib-workflows-title { font-size: 14px; }
.lib-workflows-title .fa { font-size: 15px; }


/* The legacy `#main_container .app-panel { display: none !important; }`
   rule earlier in this file hard-hid the app-menu while it sat empty.
   Re-enable it when the user opens the launcher (the .app-docker click
   handler removes the .docked class) so the layout toggle and any future
   menu items surface. */
#main_container:not(.docked) .app-panel {
    display: block !important;
}


/* ===== d3VIEW side rail (app launcher) =====================================
   ONE pinned column on the far left (pin-left is the only position). Collapsed
   it's a 44px icon strip; hovering expands it to 200px — a floating overlay,
   body padding stays 44px — to reveal each app's name beside its icon, Apple-
   dock style. Two looks, switched by a body class; they differ ONLY in color,
   never in structure:
     <body>                              -> Dark rail (default)
     <body class="app-rail-theme-light"> -> Light rail
   Scoped under .d3v-side-rail to beat the global
   `a:not(.clickable, .btn, .label) { color: #e7dada }` rule. */

/* ----- shell ----- */
.d3v-side-rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 44px;
    background: #1e2a38; color: #f1f5f9;
    /* position:fixed makes this its own stacking context. Keep a base z-index
       above page content (sticky table headers z:100, navbar z:10) so the rail
       never dips behind content while it collapses — z-index can't animate, so
       on mouseleave it snaps back to this base for the whole 0.18s collapse. */
    z-index: 1200;
    display: flex; flex-direction: column; align-items: center;
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: width 0.18s ease 0s, box-shadow 0.18s ease 0s;
}
/* Full-screen takeovers are RAIL-AWARE, not rail-hiding (Rahul 2026-07-11;
   reverses the earlier drop-the-rail treatment). Every known takeover surface
   now offsets itself by --d3v-rail-w instead of the rail being display:none'd:
     - workflow editor takeover (div.workflow.workflow / .shown.fullscreen --
       PLUGINS wf-workflow-main-modal-tpl.css)
     - Simlytiks fullscreen modal (.modal-dialog-fullscreen via #simlytiks_modal)
       + the generic .modal-dialog-fullscreen rule above (Mathmodels preview etc.)
     - Simlytiks enlarged viz (.viewContent.fixed -- PLUGINS simlytiks-main.css)
   The old body.wf-modal-open / body.simlytiks-open /
   body:has(.modal.in .modal-dialog-fullscreen) rail hides are intentionally
   GONE: the rail (z:1200) stays visible and clickable beside the takeover.
   New takeover surfaces must adopt left: var(--d3v-rail-w, 0px) +
   width: calc(100% - var(--d3v-rail-w, 0px)) -- see the pin-left gutter block
   below for the contract. */

/* Expanded: above app overlays too (toasts z:10000, dropdowns z:3001), below
   the rail's own tooltip (z:2147483000, hidden while expanded). */
.d3v-side-rail:hover { z-index: 100000; }
/* The app list is the ONLY scroll region: the brand stays pinned at the top and
   the Utilities launcher pinned at the bottom; when there are more apps than fit
   the screen, this list scrolls between them (the launcher never overlaps). */
.d3v-rail-inner {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 4px 0; flex: 1 1 auto; min-height: 0; width: 100%;
    overflow-y: auto; overflow-x: hidden;
}
.d3v-rail-inner::-webkit-scrollbar { width: 4px; }
.d3v-rail-inner::-webkit-scrollbar-thumb { background: #2c3a4f; border-radius: 2px; }

/* ----- "more apps" scroll affordance -----
   When the app list overflows, fade its top/bottom edge into the rail and show
   a chevron so it's obvious more apps are hidden. The classes rail-more-above /
   rail-more-below are toggled from JS based on the list's scroll position; the
   bands sit between the brand (top 50px) and the rail's docked footer, and are
   click-through.

   The bottom band must clear the WHOLE footer, not just part of it. Utilities is
   the only docked button again now that FORA owns the top band, so the chevron
   sits directly above Utilities at 36px. --d3v-rail-footer-h stays a variable
   rather than a literal so docking another button below the list is a one-line
   change here instead of a silent overlap on top of it. */
.d3v-side-rail { --d3v-rail-footer-h: 36px; }
.d3v-side-rail::before,
.d3v-side-rail::after {
    content: "\f077";                 /* fa-chevron-up (top) */
    font-family: FontAwesome; font-weight: normal;
    position: absolute; left: 0; right: 0; z-index: 3;
    height: 26px; display: flex; justify-content: center;
    color: rgba(255,255,255,0.9); font-size: 13px;
    pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.d3v-side-rail::before {
    top: 50px; align-items: flex-start; padding-top: 3px;
    background: linear-gradient(to top, rgba(30,42,56,0), rgba(30,42,56,0.95));
}
.d3v-side-rail::after {
    content: "\f078";                 /* fa-chevron-down (bottom) */
    bottom: var(--d3v-rail-footer-h, 36px); align-items: flex-end; padding-bottom: 4px;
    background: linear-gradient(to bottom, rgba(30,42,56,0), rgba(30,42,56,0.95));
}
.d3v-side-rail.rail-more-above::before { opacity: 1; }
.d3v-side-rail.rail-more-below::after { opacity: 1; }
/* light theme: fade into the light rail bg with a darker chevron */
body.app-rail-theme-light .d3v-side-rail::before { background: linear-gradient(to top, rgba(243,242,241,0), rgba(243,242,241,0.96)); color: #4a4a4a; }
body.app-rail-theme-light .d3v-side-rail::after  { background: linear-gradient(to bottom, rgba(243,242,241,0), rgba(243,242,241,0.96)); color: #4a4a4a; }

/* ----- app items (structure + dark colors are the shared default) -----
   Row layout + a fixed 44px icon column keeps the icon from shifting as the
   rail widens; the label lives to its right, clipped while collapsed. */
.d3v-side-rail .d3v-rail-item,
.d3v-side-rail a.d3v-rail-item {
    color: rgba(255, 255, 255, 0.66); cursor: pointer; text-decoration: none;
    width: 100%; height: 32px; min-height: 32px; padding: 0;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    border-radius: 6px; position: relative; overflow: hidden;
    transition: color 0.18s ease, background 0.18s ease;
}
.d3v-side-rail .d3v-rail-item::before {  /* active-app accent bar */
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 2px 2px 0; background: transparent;
    transition: background 0.18s ease;
}
.d3v-side-rail .d3v-rail-item .fa,
.d3v-side-rail a.d3v-rail-item .fa {
    width: 44px; flex: 0 0 44px; text-align: center;
    font-size: 14px; color: inherit;
    transition: color 0.18s ease;
}
.d3v-side-rail .d3v-rail-item::after {  /* app name, revealed on expand */
    content: attr(data-label);
    flex: 1 1 auto; padding-right: 14px;
    font-size: 13px; font-weight: 500; line-height: 1.2; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: inherit;
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
/* on hover the whole item — icon + label — transitions to the d3VIEW blue */
.d3v-side-rail .d3v-rail-item:hover,
.d3v-side-rail a.d3v-rail-item:hover { color: #29abe2; background: rgba(255,255,255,0.06); text-decoration: none; }
.d3v-side-rail .d3v-rail-item.is-active,
.d3v-side-rail a.d3v-rail-item.is-active { color: #fff; background: rgba(255,255,255,0.14); }
.d3v-side-rail .d3v-rail-item.is-active::before { background: #29abe2; }

/* The rail's 50px top band belongs to the FORA launcher; its styling lives with
   the rest of the agent-dock rules further down. The d3VIEW brand that used to
   occupy it (pie symbol + wordmark) was removed along with its markup -- Home
   is still reachable as the first entry in the hydrated app list. */

/* ----- launcher (Utilities) ----- */
/* Utilities launcher — pinned flush in the bottom-left corner of the rail with
   its icon centered. Transparent fill so it blends into the rail body (a subtle
   white-overlay on hover); expands with the rail to reveal its "Utilities" label. */
.d3v-side-rail .d3v-rail-launcher,
.d3v-side-rail a.d3v-rail-launcher {
    color: #fff; cursor: pointer; text-decoration: none;
    width: 100%; height: 36px; min-height: 36px; margin: 0; padding: 0;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    border-radius: 0; position: relative; overflow: hidden;
    transition: background 0.18s ease;
    flex: 0 0 auto;
    background: transparent;
}
.d3v-side-rail .d3v-rail-launcher .fa,
.d3v-side-rail a.d3v-rail-launcher .fa {
    width: 44px; flex: 0 0 44px; text-align: center;
    font-size: 15px; color: #fff;
}
.d3v-side-rail .d3v-rail-launcher::after {
    content: 'Utilities';
    flex: 1 1 auto; padding-right: 14px;
    font-size: 13px; font-weight: 600; line-height: 1.2; text-align: left;
    white-space: nowrap; color: #fff;
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.d3v-side-rail .d3v-rail-launcher:hover,
.d3v-side-rail a.d3v-rail-launcher:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
.d3v-side-rail .d3v-rail-launcher.is-open,
.d3v-side-rail a.d3v-rail-launcher.is-open { background: rgba(255,255,255,0.12); color: #fff; }

/* ----- expand-on-hover (Apple-dock; BOTH themes) -----
   A 120ms intent delay debounces accidental cursor passes; collapse on
   mouseleave is immediate, and every part reverts in lockstep over 0.18s.
   Width is hardcoded to fit the longest app label ("Simulations", measured
   ~72px at the item's 500/13px font) rather than computed at runtime: 44px
   icon column + ~78px text allowance + 14px right padding + a 26px favorite-star
   column. History: 140px -> 158px (favorite star) -> 178px (to clear the header
   "ARTIFICIAL INTELLIGENCE") -> 158px again once that category was renamed
   "Intelligence". The binding constraint is whichever is longer: the longest APP
   label ("Simulations", ~72px against 86px usable) or the longest GROUP header
   ("SIMULATION & TEST", ~112px against 136px usable at 10px/700/0.4px).
   Recompute by hand if a longer app label lands in d3VIEW::$D3V_APPS
   (class.d3VIEW.inc) or a longer category label in SideRail.categories
   (views.common.js). A header that outgrows the space degrades to an ellipsis
   rather than clipping mid-word -- see the text-overflow on .d3v-rail-group::after.
   Recompute by hand if a longer app label lands in d3VIEW::$D3V_APPS
   (class.d3VIEW.inc) or a longer category label in SideRail.categories
   (views.common.js) -- the group header, not the app label, is now the binding
   constraint.
   :focus-within is paired with :hover throughout so the rail expands for
   keyboard users too -- the favorite stars are only reachable while expanded. */
body.app-menu-pos-pin-left .d3v-side-rail:hover,
body.app-menu-pos-pin-left .d3v-side-rail:focus-within {
    width: 158px; box-shadow: 6px 0 24px rgba(0,0,0,0.30); transition-delay: 120ms;
}
body.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-item::after,
body.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-launcher::after,
body.app-menu-pos-pin-left .d3v-side-rail:focus-within .d3v-rail-item::after,
body.app-menu-pos-pin-left .d3v-side-rail:focus-within .d3v-rail-launcher::after {
    opacity: 1; transform: translateX(0); transition-delay: 160ms;
}
/* expanded -> names are inline, so the floating hover tooltip is redundant */
body.app-menu-pos-pin-left .d3v-side-rail:hover ~ .d3v-rail-tooltip { display: none !important; }

/* ----- group headers + favorite stars -----
   Rail order is: Home/Projects (pinned, no header) -> FAVORITES -> the role
   categories -> OTHER. Grouping is built in views.common.js
   (module.SideRail.buildGroups); a favorited app MOVES out of its category, and
   a category left with no members emits no markup at all -- so there is never an
   orphan header to style around.

   IMPORTANT: everything below keys off `.d3v-side-rail.is-expanded`, NOT off
   `:hover`. The width transition carries `transition-delay:120ms` (see the
   expand-on-hover block above), so a control revealed by the bare :hover state
   becomes visible -- and clickable -- while the rail is still 44px wide, sitting
   directly on top of the icon column. is-expanded is applied on the same
   160ms beat as the labels. */

/* A pure positioning context for the star. Deliberately carries no color or
   spacing, so every existing .d3v-rail-item rule (accent bar, ::after label,
   :hover, .is-active) keeps applying exactly as before. */
.d3v-side-rail .d3v-rail-row {
    position: relative; width: 100%;
    display: flex; align-items: center;
    flex: 0 0 auto;
}

/* Collapsed: a hairline rule standing in for the group name. Expanded: the name
   itself, via ::after -- `content` on the div would not render. */
.d3v-side-rail .d3v-rail-group {
    width: 100%; flex: 0 0 auto;
    height: 9px; margin: 3px 0 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex; align-items: center;
    overflow: hidden;
    transition: height 0.18s ease, margin 0.18s ease, border-color 0.18s ease;
}
.d3v-side-rail .d3v-rail-group::after {
    content: attr(data-label);
    padding-left: 12px; padding-right: 10px;
    /* 0.4px rather than 0.6px: "ARTIFICIAL INTELLIGENCE" is the longest header and
       measured 150px against 136px of usable width at 0.6px tracking, i.e. it
       CLIPPED. Tightening the tracking plus the wider expand below buys real
       margin. text-overflow is the backstop -- a future header longer still
       degrades to an ellipsis instead of being silently chopped mid-word. */
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0; transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.d3v-side-rail.is-expanded .d3v-rail-group {
    height: 20px; margin: 8px 0 2px; border-top-color: transparent;
}
.d3v-side-rail.is-expanded .d3v-rail-group::after {
    opacity: 1; transform: translateX(0); transition-delay: 160ms;
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-group { border-top-color: rgba(0, 0, 0, 0.10); }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-group::after { color: rgba(0, 0, 0, 0.45); }

/* The star. A real <button> sibling of the <a>, absolutely positioned over the
   row's right edge -- never nested inside the anchor (that would inherit
   `.d3v-rail-item .fa { width:44px; flex:0 0 44px }` above and be clipped by the
   anchor's overflow:hidden, besides being invalid inside a link).
   pointer-events is gated with opacity so a collapsed, invisible star can never
   be clicked, and the button is taken out of the tab order while collapsed so it
   cannot be focused invisibly either. */
.d3v-side-rail .d3v-rail-star {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 26px; padding: 0; margin: 0;
    background: transparent; border: 0; outline: none;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer; z-index: 2;
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, color 0.18s ease;
}
/* Reset the 44px icon column the shared .fa rule would otherwise impose. */
.d3v-side-rail .d3v-rail-star .fa {
    width: auto; flex: 0 0 auto; font-size: 12px; line-height: 1;
}
.d3v-side-rail.is-expanded .d3v-rail-star { pointer-events: auto; }
/* Favorited: always legible while expanded. Not favorited: only on row hover,
   so the expanded rail stays quiet. */
/* Favorited stars carry the SAME light blue as the FORA wordmark. FORA's label is
   #29abe2 at rest and #5fc8f0 once the rail expands (see the agent-launcher block
   below) -- and a star is only ever visible while the rail is expanded, so #5fc8f0
   is the shade that actually sits beside it. Light theme mirrors FORA's own
   light-theme expanded color (#29abe2). Change these together with the launcher,
   never on their own. */
.d3v-side-rail.is-expanded .d3v-rail-star.is-fav { opacity: 1; color: #5fc8f0; }
.d3v-side-rail.is-expanded .d3v-rail-row:hover .d3v-rail-star { opacity: 1; }
.d3v-side-rail.is-expanded .d3v-rail-star:hover { color: #5fc8f0; }
/* hovering an already-favorited star means "remove", so it brightens to white
   rather than restating the same blue */
.d3v-side-rail.is-expanded .d3v-rail-star.is-fav:hover { color: #fff; }
/* Keyboard parity: a focused star must be visible even without a pointer. */
.d3v-side-rail.is-expanded .d3v-rail-star:focus-visible {
    opacity: 1; color: #5fc8f0;
    box-shadow: inset 0 0 0 2px rgba(41, 171, 226, 0.9); border-radius: 4px;
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-star { color: rgba(0, 0, 0, 0.30); }
body.app-rail-theme-light .d3v-side-rail.is-expanded .d3v-rail-star.is-fav,
body.app-rail-theme-light .d3v-side-rail.is-expanded .d3v-rail-star:hover,
body.app-rail-theme-light .d3v-side-rail.is-expanded .d3v-rail-star:focus-visible { color: #29abe2; }
body.app-rail-theme-light .d3v-side-rail.is-expanded .d3v-rail-star.is-fav:hover { color: #1f8fc0; }

/* Keep the app name clear of the star column. Pinned rows carry no star and
   keep the original 14px -- hence an explicit class rather than :has(). */
.d3v-side-rail .d3v-rail-item.has-star::after { padding-right: 28px; }

/* ----- floating tooltip (collapsed-state hover hint) ----- */
.d3v-rail-tooltip {
    position: fixed; display: none;
    background: #1e2a38; color: #fff;
    border-radius: 6px; padding: 10px 14px;
    max-width: 280px; min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.d3v-rail-tooltip.is-visible { opacity: 1; }
.d3v-rail-tt-label {
    font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
    margin-bottom: 4px; color: #fff;
}
.d3v-rail-tt-desc {
    font-size: 12px; line-height: 1.4; color: #b6c2d2;
}

/* ----- loading skeleton -----
   Skeleton rows share .d3v-rail-item's row layout + hover-reveal transitions
   (icon column, ::after opacity/transform) instead of being bare fixed-size
   squares, so they expand and collapse in lockstep with the rail on hover
   rather than sitting static while everything else around them animates. */
.d3v-side-rail .d3v-rail-item.d3v-rail-skel { cursor: default; }
.d3v-side-rail .d3v-rail-item.d3v-rail-skel:hover { background: transparent; }
.d3v-rail-skel-icon {
    width: 44px; flex: 0 0 44px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}
.d3v-rail-skel-icon::before {
    content: ''; width: 20px; height: 20px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: d3vRailShimmer 1.4s linear infinite;
}
.d3v-side-rail .d3v-rail-item.d3v-rail-skel::after {
    content: ''; flex: 0 0 auto; width: 70px; height: 12px; padding-right: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: d3vRailShimmer 1.4s linear infinite;
}
@keyframes d3vRailShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- LIGHT theme: COLOR overrides only (structure shared with dark) -------
   The brand band stays dark (header look) so the white d3VIEW logo reads; only
   the nav body turns light. Hover/active still resolve to the same d3VIEW blue
   so the interactions match the dark rail exactly. */
body.app-rail-theme-light .d3v-side-rail {
    background: #f3f2f1; color: #323130;
    box-shadow: 1px 0 0 #e1dfdd;
}
body.app-rail-theme-light .d3v-rail-inner::-webkit-scrollbar-thumb { background: #d2d0ce; }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-item,
body.app-rail-theme-light .d3v-side-rail a.d3v-rail-item { color: #5b5b5b; }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-item:hover,
body.app-rail-theme-light .d3v-side-rail a.d3v-rail-item:hover { color: #29abe2; background: rgba(0,0,0,0.05); }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-item.is-active,
body.app-rail-theme-light .d3v-side-rail a.d3v-rail-item.is-active { color: #2c5282; background: #eaf2fb; }
/* On the dark rail the launcher is transparent so it blends into the rail body
   (#1e2a38). On the LIGHT rail that would leave the white launcher glyph
   unreadable, so give it the light-rail item treatment (dark glyph, subtle
   hover) instead. */
body.app-rail-theme-light .d3v-side-rail .d3v-rail-launcher,
body.app-rail-theme-light .d3v-side-rail a.d3v-rail-launcher { color: #5b5b5b; }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-launcher .fa,
body.app-rail-theme-light .d3v-side-rail .d3v-rail-launcher::after { color: #5b5b5b; }
body.app-rail-theme-light .d3v-side-rail .d3v-rail-launcher:hover,
body.app-rail-theme-light .d3v-side-rail a.d3v-rail-launcher:hover { background: rgba(0,0,0,0.05); }
body.app-rail-theme-light .d3v-rail-skel-icon::before,
body.app-rail-theme-light .d3v-side-rail .d3v-rail-item.d3v-rail-skel::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%);
    background-size: 200% 100%;
}

/* ----- pin-left layout: reserve the 44px gutter so content clears the rail.
   --d3v-rail-w is the EXPORTED CONTRACT for every position:fixed takeover
   surface (fullscreen modals, enlarged vizs, editor takeovers): use
   left: var(--d3v-rail-w, 0px) + width: calc(100% - var(--d3v-rail-w, 0px))
   and the surface yields the rail on pin-left pages while staying full-bleed
   everywhere else (the var only exists under body.app-menu-pos-pin-left).
   Rahul 2026-07-11: rail-aware offsets REPLACE the old drop-the-rail
   (display:none) treatment -- the rail stays visible and usable during
   takeovers. */
:root { --d3v-rail-w: 0px; }
body.app-menu-pos-pin-left { --d3v-rail-w: 44px; padding-left: 44px; }
body.app-menu-pos-pin-left header.navbar-d3view { left: 44px !important; }
body.app-menu-pos-pin-left header.navbar-d3view .navbar-left .app-docker { display: none !important; }
body.app-menu-pos-pin-left .app-panel,
body.app-menu-pos-pin-left #main_container.docked .app-panel { left: 44px; }

/* ===== d3VIEW-wide FORA dock ==============================================
   The FORA launcher is a sibling of Utilities in the global rail. Opening it
   reserves a real column between the rail and the application content; the
   rail itself still expands over the dock on hover. */
:root {
    --d3v-agent-dock-open-w: 460px;
    --d3v-agent-dock-w: 0px;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open {
    --d3v-agent-dock-w: min(var(--d3v-agent-dock-open-w, 460px), 50vw);
    padding-left: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w));
    transition: padding-left .22s ease;
}
body.app-menu-pos-pin-left.d3v-agent-dock-closed {
    --d3v-agent-dock-w: 0px;
    padding-left: var(--d3v-rail-w, 44px);
    transition: padding-left .22s ease;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open header.navbar-d3view {
    left: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w)) !important;
    transition: left .22s ease;
}
body.app-shell-frozen.app-menu-pos-pin-left.d3v-agent-dock-open #main_container {
    left: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w));
    transition: left .22s ease;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .app-panel,
body.app-menu-pos-pin-left.d3v-agent-dock-open #main_container.docked .app-panel {
    left: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w));
    transition: left .22s ease;
}

.d3v-agent-dock {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: var(--d3v-rail-w, 0px);
    width: var(--d3v-agent-dock-w, 0px);
    min-width: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    background: #1e2a38;
    border-left: 1px solid rgba(241, 245, 249, .09);
    border-right: 1px solid rgba(41, 171, 226, .42);
    box-shadow: 8px 0 28px rgba(8, 15, 24, .22);
    transition: width .22s ease;
}
.d3v-agent-dock[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
    transition: width .22s ease, visibility 0s linear .22s;
}
.d3v-agent-dock-chat {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: #1e2a38;
}
.d3v-agent-dock-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
    outline: 0;
}
.d3v-agent-dock-resizer::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    content: '';
    background: rgba(41, 171, 226, .42);
    transition: width .14s ease, background .14s ease;
}
.d3v-agent-dock-resizer:hover::after,
.d3v-agent-dock-resizer:focus-visible::after,
body.d3v-agent-dock-resizing .d3v-agent-dock-resizer::after {
    width: 4px;
    background: #29abe2;
}
body.d3v-agent-dock-resizing,
body.d3v-agent-dock-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}
body.d3v-agent-dock-resizing,
body.d3v-agent-dock-resizing header.navbar-d3view,
body.d3v-agent-dock-resizing #main_container,
body.d3v-agent-dock-resizing .app-panel,
body.d3v-agent-dock-resizing .d3v-agent-dock,
body.d3v-agent-dock-resizing .d3v-rail-agent-launcher {
    transition: none !important;
}
.d3v-agent-dock-error {
    margin: 16px;
    padding: 12px;
    color: #fda4af;
    background: rgba(253, 164, 175, .08);
    border: 1px solid rgba(253, 164, 175, .28);
    border-radius: 6px;
    font-size: 12px;
}

/* The dedicated route reuses the dock's visual scope without its fixed-panel
   geometry. The standard app shell still owns the global rail and navigation. */
.d3v-fora-page.d3v-agent-dock {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    flex-direction: row;
    width: 100%;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid rgba(241, 245, 249, .09);
    border-right: 0;
    box-shadow: none;
    transition: none;
}
.d3v-fora-page-chat {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}
.d3v-fora-page.has-workflow-canvas > .d3v-fora-page-chat {
    flex: 0 0 36%;
    min-width: 360px;
    max-width: 560px;
}
.d3v-fora-canvas {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid rgba(241, 245, 249, .15);
    background: #fff;
}
.d3v-fora-canvas[hidden] { display: none; }
.d3v-fora-canvas-toolbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #1e2a38;
    color: #f1f5f9;
}
.d3v-fora-canvas-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3v-fora-canvas-close { flex-shrink: 0; color: inherit; background: transparent; border: 1px solid #64748b; border-radius: 4px; }
.d3v-fora-canvas-root { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; }
.d3v-fora-workflow-mount { width: 100%; height: 100%; }
.d3v-fora-canvas div.workflow .wf-main-container:not([data-header-view="ribbon"]) .header-left-compact,
body.d3v-agent-dock-open #user-workflow div.workflow .wf-main-container:not([data-header-view="ribbon"]) .header-left-compact {
    display: inline-block !important;
}
.d3v-fora-canvas div.workflow .wf-main-container:not([data-header-view="ribbon"]) .plugin-settings-line > .wf-dropdowns,
body.d3v-agent-dock-open #user-workflow div.workflow .wf-main-container:not([data-header-view="ribbon"]) .plugin-settings-line > .wf-dropdowns {
    display: none !important;
}
.d3v-fora-canvas div.workflow .wf-main-container:not([data-header-view="ribbon"]) .wf-main-content > .top-settings-container,
body.d3v-agent-dock-open #user-workflow div.workflow .wf-main-container:not([data-header-view="ribbon"]) .wf-main-content > .top-settings-container {
    height: auto !important;
    min-height: var(--wf-header-h, 80px);
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .d3v-fora-page.has-workflow-canvas { overflow-x: auto; }
    .d3v-fora-page.has-workflow-canvas > .d3v-fora-canvas { min-width: 540px; }
}
body.d3v-fora-fullscreen-page #main_content {
    padding: 0;
    background: #1e2a38;
    overflow: hidden;
}
body.d3v-fora-fullscreen-page #main_content > .main-breadcrumbs {
    display: none;
}
body.d3v-fora-fullscreen-page #main_content > div,
body.d3v-fora-fullscreen-page #main_content .d3v-fora-page {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
}
body.d3v-fora-fullscreen-page #main_container > footer,
body.d3v-fora-fullscreen-page #main_container > #footer {
    display: none;
}

/* FORA is visually part of the application rail, so its app-wide mount
   inherits the rail's surface language instead of the shared AgentChat
   widget's white card theme. Keep every override dock-scoped: AgentChat is
   also embedded in the Agents app and ModelAssembler. */
.d3v-agent-dock .agentchat-shell {
    --panel: #1e2a38;
    --panel-soft: #182431;
    --navy: #29abe2;
    --indigo: #29abe2;
    --indigo-2: #1f8fc0;
    --indigo-soft: rgba(41, 171, 226, .10);
    --indigo-bd: rgba(95, 200, 240, .32);
    --ink: #f1f5f9;
    --ink-mut: #c0cad5;
    --ink-dim: #9aa8b8;
    --line: rgba(241, 245, 249, .08);
    --line-hi: rgba(241, 245, 249, .15);
    --green: #6ee7b7;
    --red: #fda4af;
    --orange-soft: rgba(253, 164, 175, .08);
    --orange-bd: rgba(253, 164, 175, .28);
    --orange-strong: #fda4af;
    --radius: 6px;
    --radius-sm: 5px;
    --shadow-sm: none;
    --token: #29abe2;
    color: var(--ink);
}
.d3v-agent-dock .agentchat-toolbar {
    gap: 4px;
    padding: 6px 8px;
}
.d3v-agent-dock .agentchat-tb-btn {
    gap: 5px;
    padding: 5px 8px;
    border-color: transparent;
    background: transparent;
    color: var(--ink-dim);
    font-size: 11px;
    font-weight: 600;
}
.d3v-agent-dock .agentchat-tb-btn:hover {
    border-color: var(--line);
    background: rgba(241, 245, 249, .06);
    color: var(--ink);
}
.d3v-agent-dock .agentchat-tb-new {
    color: var(--indigo);
}
.d3v-agent-dock .agentchat-chat {
    gap: 12px;
    padding: 14px 12px;
    background: var(--panel);
}
.d3v-agent-dock .agentchat-msg {
    gap: 8px;
    max-width: 98%;
}
.d3v-agent-dock .agentchat-avatar {
    width: 27px;
    height: 27px;
    border: 1px solid var(--line-hi);
    border-radius: 6px;
}
.d3v-agent-dock .agentchat-avatar--user,
.d3v-agent-dock .agentchat-avatar--agent {
    background: var(--panel-soft);
    color: var(--indigo);
    box-shadow: none;
}
.d3v-agent-dock .agentchat-bubble {
    padding: 9px 11px;
    border-radius: 7px;
    box-shadow: none;
}
.d3v-agent-dock .agentchat-welcome {
    max-width: 360px;
    padding: 20px 18px;
}
.d3v-agent-dock .agentchat-welcome-avatar {
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border: 1px solid var(--indigo-bd);
    border-radius: 8px;
    background: var(--indigo-soft);
    box-shadow: none;
    color: var(--indigo);
}
.d3v-agent-dock .agentchat-welcome-title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}
.d3v-agent-dock .agentchat-welcome-sub {
    max-width: 300px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.55;
}
.d3v-agent-dock .agentchat-composer {
    padding: 10px 11px 9px;
    background: var(--panel);
}
.d3v-agent-dock .agentchat-composer-box {
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border-color: var(--line-hi);
    border-radius: 7px;
    background: var(--panel-soft);
    box-shadow: none;
}
.d3v-agent-dock .agentchat-composer-box:focus-within {
    border-color: var(--indigo);
    background: var(--panel-soft);
    box-shadow: 0 0 0 2px rgba(41, 171, 226, .18);
}
.d3v-agent-dock .agentchat-input {
    color: var(--ink);
    font-size: 12.5px;
}
.d3v-agent-dock .agentchat-send-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--indigo);
    box-shadow: none;
    color: #10202d;
}
.d3v-agent-dock .agentchat-send-btn:hover {
    background: #5fc8f0;
}
.d3v-agent-dock .agentchat-composer-ctx {
    gap: 5px;
    margin-top: 6px;
}
.d3v-agent-dock .agentchat-ctx-pill {
    padding: 2px 5px;
    border-color: transparent;
    background: transparent;
    color: var(--ink-dim);
    font-size: 9.5px;
}
.d3v-agent-dock .agentchat-trace-group,
.d3v-agent-dock .agentchat-todocard,
.d3v-agent-dock .agentchat-ask,
.d3v-agent-dock .agentchat-errorrow {
    margin-left: 0;
    border-radius: 7px;
    box-shadow: none;
}
.d3v-agent-dock .agentchat-ask-min:hover,
.d3v-agent-dock .agentchat-ask-dismiss:hover,
.d3v-agent-dock .agentchat-ask-row:hover,
.d3v-agent-dock .agentchat-ask-row.active {
    background: var(--indigo-soft);
}
.d3v-agent-dock .agentchat-fora-history-head,
.d3v-agent-dock .agentchat-artpanel-head {
    padding: 10px 12px;
}
.d3v-agent-dock .agentchat-fora-history-list,
.d3v-agent-dock .agentchat-artpanel-list {
    gap: 5px;
    padding: 8px;
}
.d3v-agent-dock .agentchat-fora-history-item,
.d3v-agent-dock .agentchat-artpanel-item {
    border-radius: 6px;
}
.d3v-agent-dock .agentchat-artpanel-tools {
    gap: 6px;
    padding: 8px;
}
.d3v-agent-dock .agentchat-artpanel-scope {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-soft);
}
.d3v-agent-dock .agentchat-artpanel-scope-btn.agentchat-active {
    box-shadow: none;
}
.d3v-agent-dock .agentchat-artpanel-type {
    border: 1px solid var(--line-hi);
    background: var(--indigo-soft);
    color: var(--indigo);
}
.d3v-agent-dock .agentchat-artpanel-type[data-type="image"] { background: rgba(192, 132, 252, .12); color: #d8b4fe; }
.d3v-agent-dock .agentchat-artpanel-type[data-type="report"],
.d3v-agent-dock .agentchat-artpanel-type[data-type="file"] { background: rgba(251, 191, 36, .11); color: #fde68a; }
.d3v-agent-dock .agentchat-artpanel-type[data-type="dataset"],
.d3v-agent-dock .agentchat-artpanel-type[data-type="json"] { background: rgba(34, 211, 238, .10); color: #a5f3fc; }
.d3v-agent-dock .agentchat-artpanel-type[data-type="curve"] { background: rgba(52, 211, 153, .10); color: #a7f3d0; }
.d3v-agent-dock .agentchat-refpicker {
    border-radius: 7px;
    box-shadow: 0 12px 30px rgba(8, 15, 24, .34);
}
.d3v-agent-dock .agentchat-refchip {
    border-radius: 6px;
    background: var(--panel-soft);
}
.d3v-agent-dock .agentchat-refchip-glyph {
    border-radius: 4px;
}
.d3v-agent-dock .agentchat-shell * {
    scrollbar-color: rgba(154, 168, 184, .42) transparent;
    scrollbar-width: thin;
}
.d3v-agent-dock .agentchat-shell *::-webkit-scrollbar { width: 5px; height: 5px; }
.d3v-agent-dock .agentchat-shell *::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(154, 168, 184, .42);
}
.d3v-agent-dock .agentchat-shell *::-webkit-scrollbar-track,
.d3v-agent-dock .agentchat-shell *::-webkit-scrollbar-corner { background: transparent; }

/* Keyboard focus is deliberately brighter than the decorative cyan seam. */
.d3v-agent-dock .agentchat-tb-btn:focus-visible,
.d3v-agent-dock .agentchat-send-btn:focus-visible,
.d3v-agent-dock .agentchat-fora-history-close:focus-visible,
.d3v-agent-dock .agentchat-artpanel-close:focus-visible,
.d3v-agent-dock .agentchat-artpanel-scope-btn:focus-visible,
.d3v-agent-dock .agentchat-artpanel-search:focus-visible,
.d3v-agent-dock .agentchat-artpanel-filter-btn:focus-visible,
.d3v-agent-dock .agentchat-artpanel-menu-opt:focus-visible,
.d3v-agent-dock .agentchat-refpicker-item:focus-visible,
.d3v-agent-dock .agentchat-refchip-x:focus-visible {
    outline: 2px solid #5fc8f0;
    outline-offset: 2px;
}

/* The rail supports a light preference. FORA follows it with the same warm
   neutral shell and blue identity, while preserving the minimal geometry. */
body.app-rail-theme-light .d3v-agent-dock,
body.app-rail-theme-light .d3v-agent-dock-chat {
    background: #f3f2f1;
}
body.app-rail-theme-light .d3v-agent-dock {
    border-left-color: rgba(0, 0, 0, .12);
    border-right-color: rgba(31, 143, 192, .36);
    box-shadow: 8px 0 24px rgba(30, 42, 56, .12);
}
body.app-rail-theme-light .d3v-agent-dock-error {
    color: #b8324a;
    background: rgba(184, 50, 74, .07);
    border-color: rgba(184, 50, 74, .24);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-shell {
    --panel: #f3f2f1;
    --panel-soft: #eae8e6;
    --navy: #176f96;
    --indigo: #176f96;
    --indigo-2: #14698f;
    --indigo-soft: rgba(41, 171, 226, .10);
    --indigo-bd: rgba(31, 143, 192, .32);
    --ink: #30353a;
    --ink-mut: #565d64;
    --ink-dim: #626970;
    --line: rgba(0, 0, 0, .09);
    --line-hi: rgba(0, 0, 0, .16);
    --green: #237a57;
    --red: #b8324a;
    --orange-soft: rgba(184, 50, 74, .07);
    --orange-bd: rgba(184, 50, 74, .24);
    --orange-strong: #b8324a;
    --token: #176f96;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-tb-btn:hover {
    background: rgba(0, 0, 0, .05);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-tb-btn:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-send-btn:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-fora-history-close:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-close:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-scope-btn:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-search:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-filter-btn:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-menu-opt:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-refpicker-item:focus-visible,
body.app-rail-theme-light .d3v-agent-dock .agentchat-refchip-x:focus-visible {
    outline-color: #176f96;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-send-btn { color: #fff; }
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker {
    color: #30353a;
    background: #f3f2f1;
    border-color: rgba(0, 0, 0, .16);
    box-shadow: 0 14px 32px rgba(30, 42, 56, .14);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-item:hover,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-item.is-active {
    background: #e5e2df;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-glyph,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillchip-mark {
    color: #176f96;
    background: rgba(41, 171, 226, .10);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-glyph {
    border-color: rgba(31, 143, 192, .30);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-name,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillchip,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult-head,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult-body {
    color: #30353a;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-desc,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-mode,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-msg,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillpicker-needs,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillrequirements,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillchip-mode,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillchip-x,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult-head small {
    color: #626970;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillchip {
    background: #eae8e6;
    border-color: rgba(0, 0, 0, .15);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillrequirements:hover,
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult-head span {
    color: #176f96;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillfield {
    color: #565d64;
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillfield-input {
    color: #30353a;
    background: #fff;
    border-color: rgba(0, 0, 0, .16);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult {
    background: #f3f2f1;
    border-color: rgba(0, 0, 0, .16);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult-head {
    border-bottom-color: rgba(0, 0, 0, .12);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-skillresult--failed {
    border-color: rgba(184, 50, 74, .45);
}
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="image"] { background: rgba(108, 52, 131, .10); color: #6c3483; }
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="report"],
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="file"] { background: rgba(111, 87, 8, .10); color: #6f5708; }
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="dataset"],
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="json"] { background: rgba(12, 84, 96, .09); color: #0c5460; }
body.app-rail-theme-light .d3v-agent-dock .agentchat-artpanel-type[data-type="curve"] { background: rgba(21, 87, 36, .09); color: #155724; }
/* ----- FORA: the rail's top band -----
   FORA is not one of the permitted apps, so it is deliberately NOT styled like
   .d3v-rail-item: the app icons stay monochrome white and only turn blue on
   hover, while FORA carries the d3VIEW blue at rest. On expand the mark lifts to
   a brighter blue and picks up a soft glow -- the same "wakes up when the rail
   opens" cue the d3VIEW pie slice used to give from this slot.

   The 50px height is load-bearing: .d3v-side-rail::before anchors the top
   scroll-hint band at top: 50px, so this band and that offset must move
   together. */
.d3v-side-rail .d3v-rail-agent-launcher {
    width: 100%;
    height: 50px;
    min-height: 50px;
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    overflow: hidden;
    background: transparent;
    z-index: 2;
    color: #29abe2;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: width .22s ease, background .18s ease, color .18s ease,
        border-color .18s ease, box-shadow .22s ease;
}
.d3v-side-rail .d3v-rail-agent-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 50px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 1;
    transform: none;
    transition: color .18s ease, opacity .14s ease;
}
.d3v-side-rail .d3v-rail-agent-mark svg {
    width: 20px;
    height: 20px;
    display: block;
}
.d3v-side-rail .d3v-rail-agent-title {
    position: absolute;
    top: 0;
    left: 44px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .9px;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: left .22s ease, opacity .16s ease, transform .22s ease;
}
.d3v-side-rail .d3v-rail-agent-return {
    position: absolute;
    top: 9px;
    right: 49px;
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 245, 249, .18);
    border-radius: 6px;
    background: rgba(241, 245, 249, .04);
    color: #f1f5f9;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: translateX(7px);
    pointer-events: none;
    transition: opacity .16s ease, transform .22s ease, background .18s ease,
        border-color .18s ease;
}
.d3v-side-rail .d3v-rail-agent-fullscreen {
    display: none;
}
body.app-menu-pos-pin-left .d3v-side-rail .d3v-rail-agent-launcher {
    width: 44px;
}
body.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-agent-launcher:not(.is-open),
body.app-menu-pos-pin-left .d3v-side-rail:focus-within .d3v-rail-agent-launcher:not(.is-open) {
    width: 158px;
}
.d3v-side-rail .d3v-rail-agent-launcher:hover {
    color: #5fc8f0;
    background: rgba(41,171,226,.14);
}
body.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-agent-launcher:not(.is-open) .d3v-rail-agent-title,
body.app-menu-pos-pin-left .d3v-side-rail:focus-within .d3v-rail-agent-launcher:not(.is-open) .d3v-rail-agent-title {
    opacity: 1;
    transform: translateX(0);
}
body.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-agent-launcher {
    color: #5fc8f0;
}
/* The rail control becomes FORA's only header. The dock starts beneath this
   band, so there is no second window header competing with the source rail. */
body.app-menu-pos-pin-left .d3v-side-rail .d3v-rail-agent-launcher.is-open {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w, 460px));
    z-index: 1202;
    color: #29abe2;
    background: #1e2a38;
    border-bottom-color: rgba(241, 245, 249, .09);
    box-shadow: 8px 0 28px rgba(8, 15, 24, .16);
}
body.app-menu-pos-pin-left .d3v-side-rail .d3v-rail-agent-launcher.is-open:hover {
    color: #29abe2;
    background: #1e2a38;
}
.d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-mark {
    color: #29abe2;
    opacity: 1;
    transform: none;
    filter: none;
}
.d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-title {
    left: 44px;
    color: #29abe2;
    opacity: 1;
    transform: translateX(0);
}
.d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-return {
    opacity: 1;
    transform: translateX(0);
}
.d3v-side-rail .d3v-rail-agent-launcher.is-open:hover .d3v-rail-agent-return {
    background: rgba(241, 245, 249, .09);
    border-color: rgba(241, 245, 249, .28);
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail .d3v-rail-agent-fullscreen {
    position: fixed;
    top: 9px;
    left: calc(var(--d3v-rail-w, 44px) + var(--d3v-agent-dock-w, 460px) - 41px);
    z-index: 1203;
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 245, 249, .18);
    border-radius: 6px;
    background: rgba(241, 245, 249, .04);
    color: #f1f5f9;
    transition: left .22s ease, background .18s ease, border-color .18s ease;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail .d3v-rail-agent-fullscreen svg {
    width: 15px;
    height: 15px;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail .d3v-rail-agent-fullscreen:hover {
    background: rgba(241, 245, 249, .09);
    border-color: rgba(241, 245, 249, .28);
    color: #fff;
}
.d3v-side-rail .d3v-rail-agent-fullscreen:focus-visible {
    outline: 2px solid #5fc8f0;
    outline-offset: 2px;
}
/* The open launcher is a fixed descendant of the rail, so its 504px header
   still makes the rail match :hover. In that state only SideRail's explicit
   is-expanded class may widen/reveal the application column; the launcher is
   deliberately not an expansion target. */
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:hover,
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:focus-within {
    width: 44px;
    box-shadow: 2px 0 4px rgba(0,0,0,0.06);
    transition-delay: 0s;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail.is-expanded {
    width: 158px;
    box-shadow: 6px 0 24px rgba(0,0,0,0.30);
    transition-delay: 120ms;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:hover .d3v-rail-item::after,
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:hover .d3v-rail-launcher::after,
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:focus-within .d3v-rail-item::after,
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail:focus-within .d3v-rail-launcher::after {
    opacity: 0;
    transform: translateX(-4px);
    transition-delay: 0s;
}
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail.is-expanded .d3v-rail-item::after,
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail.is-expanded .d3v-rail-launcher::after {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 160ms;
}
/* Fixed positioning removes the open launcher from the rail's flex flow.
   Reserve its original band so Home and the Workspace list begin beneath it. */
body.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail .d3v-rail-inner {
    margin-top: 50px;
}
.d3v-side-rail .d3v-rail-agent-launcher:focus-visible {
    outline: 2px solid #5fc8f0;
    outline-offset: -3px;
}

/* Light preference still follows its source rail; geometry and minimal chrome
   remain identical. */
body.app-rail-theme-light .d3v-side-rail .d3v-rail-agent-launcher {
    color: #1f8fc0;
    border-bottom: 1px solid #e1dfdd;
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-agent-launcher:hover,
body.app-rail-theme-light.app-menu-pos-pin-left .d3v-side-rail:hover .d3v-rail-agent-launcher {
    color: #29abe2;
    background: rgba(41,171,226,.10);
}
body.app-rail-theme-light.app-menu-pos-pin-left .d3v-side-rail .d3v-rail-agent-launcher.is-open,
body.app-rail-theme-light.app-menu-pos-pin-left .d3v-side-rail .d3v-rail-agent-launcher.is-open:hover {
    color: #1f8fc0;
    background: #f3f2f1;
    border-bottom-color: rgba(0, 0, 0, .10);
    box-shadow: 8px 0 24px rgba(30, 42, 56, .10);
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-return {
    color: #30353a;
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-title {
    color: #1f8fc0;
}
body.app-rail-theme-light .d3v-side-rail .d3v-rail-agent-launcher.is-open .d3v-rail-agent-return {
    border-color: rgba(0, 0, 0, .15);
    background: rgba(0, 0, 0, .03);
}
body.app-rail-theme-light.app-menu-pos-pin-left.d3v-agent-dock-open .d3v-side-rail .d3v-rail-agent-fullscreen {
    color: #30353a;
    border-color: rgba(0, 0, 0, .15);
    background: rgba(0, 0, 0, .03);
}
body.app-rail-theme-light.d3v-fora-fullscreen-page #main_content {
    background: #f3f2f1;
}
@media (prefers-reduced-motion: reduce) {
    body.app-menu-pos-pin-left.d3v-agent-dock-open,
    body.app-menu-pos-pin-left.d3v-agent-dock-closed,
    body.app-menu-pos-pin-left.d3v-agent-dock-open header.navbar-d3view,
    body.app-shell-frozen.app-menu-pos-pin-left.d3v-agent-dock-open #main_container,
    body.app-menu-pos-pin-left.d3v-agent-dock-open .app-panel,
    body.app-menu-pos-pin-left.d3v-agent-dock-open #main_container.docked .app-panel,
    .d3v-agent-dock,
    .d3v-side-rail .d3v-rail-agent-launcher,
    .d3v-side-rail .d3v-rail-agent-mark,
    .d3v-side-rail .d3v-rail-agent-title,
    .d3v-side-rail .d3v-rail-agent-return,
    .d3v-side-rail .d3v-rail-agent-fullscreen {
        transition: none !important;
    }
}


/* Viz.ImageAnalyzer plugin support when embedded as a utility page. The
   plugin's template uses <h2 class="heading"> and an ia-body / ia-plugin
   flex layout whose height is set in JS from the parent's height — without
   these rules the default h2 margin pushes the heading down and the body
   collapses. */
#utl-img-host > .image-analyzer { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
#utl-img-host .image-analyzer .heading { margin: 0 0 8px 0; font-size: 15px; font-weight: 600; color: #1e293b; padding: 6px 14px; display: flex; align-items: center; gap: 8px; }
#utl-img-host .image-analyzer .heading img { width: 22px; height: auto; }
#utl-img-host .image-analyzer .ia-body { flex: 1 1 auto; min-height: 240px; }
#utl-img-host .image-analyzer .ia-plugin { flex: 1 1 auto; min-height: 240px; }
#utl-img-host .image-analyzer .image-comparer { width: 100%; height: 100%; position: relative; }
#utl-img-host .image-analyzer .dropzoneArea { background: #faf9f8; border: 2px dashed #c8c6c4; border-radius: 6px; min-height: 200px; height: 100%; display: flex; align-items: center; justify-content: center; }
#utl-img-host .image-analyzer .img-container { padding: 6px; background: #fff; }
#utl-img-host .image-analyzer .img-container img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
body :not(i):not(.fa):not([class*="fa-"]):not([class*="icon"]):not([class*="glyph"]):not([class*="Icon"]):not(code):not(pre):not(kbd):not(samp):not(.mono):not(.monospace):not(.ace_editor):not(.ace_editor *) {
    font-family: inherit !important;
}

.input-edit-on-hover { font-size: 14px !important; font-weight: 600 !important; }

/* ─────────────────────────────────────────────────────────────
   InfoWidgets — scrollable bodies inside the (height-capped)
   widget grid cell.
   ResponseBuilder lays out widget cells with a fixed pixel
   height computed from the layout JSON's `height: 45%`. Without
   the rules below, the `.panel-body` inside each widget renders
   at its content's natural height and overflows the cell — so
   tables like "Mass summary" pushed past the cell and broke the
   uniform-row grid. Flexing the panel + clamping the body with
   overflow-y:auto keeps each widget visually capped while its
   content scrolls within. Scoped to .constrain-height so this
   only affects the Summary-style read-only grids, not the
   editable response builder. ───────────────────────────────── */
.d3view-responsebuilder.constrain-height .rb-rsp-panel,
.d3view-responsebuilder.constrain-height > .row > [class*="col-"] .panel.panel-default {
    display: flex; flex-direction: column;
}
.d3view-responsebuilder.constrain-height .panel.panel-default {
    flex: 1 1 auto; min-height: 0; max-height: 100%;
}
.d3view-responsebuilder.constrain-height .panel.panel-default > .panel-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
/* When a widget is in fullscreen (toggleEnlarge), the body should still
   scroll if content overflows — but use most of the viewport height. */
.panel.panel-default.d3view-full-screen { display: flex; flex-direction: column; }
.panel.panel-default.d3view-full-screen > .panel-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}

/* ============================================================
   Unit System view — "Flow" template (R0-3760 follow-up)
   Lives in style.css (not workflow.css) because the plugin-sync
   reverts plugins_src/workflow/workflow.css from PLUGINS source.
   Scoped under .wf-unit-systems. Uses app font + mono vars.
   ============================================================ */
.wf-unit-systems{
  --us-ink:#26303a; --us-ink-2:#4a5560; --us-ink-3:#8a949e;
  --us-line:#e3e6ea; --us-line-2:#eef1f4;
  --us-accent:#2c5282; --us-accent-soft:#e7eef7;
  --us-scale:#147a5b; --us-scale-soft:#e2f3ec;
  --us-paper:#f8fafc; --us-card:#fff;
  --us-radius:8px; --us-radius-sm:6px;
  font-family:var(--font-family);
  color:var(--us-ink);
}
.wf-unit-systems .us-mono{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums;}
.wf-unit-systems .us-lbl{
  display:block;font-family:var(--font-family-mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--us-ink-3);margin-bottom:7px;font-weight:600;
}
.wf-unit-systems label{font-weight:600;color:var(--us-ink-2);}

.wf-unit-systems .us-flow{
  display:flex;align-items:stretch;gap:0;margin-bottom:22px;
  border:1px solid var(--us-line);border-radius:var(--us-radius);overflow:hidden;background:var(--us-paper);
}
.wf-unit-systems .us-flow .us-leg{flex:1 1 0;min-width:120px;padding:14px 16px;}
.wf-unit-systems .us-flow .us-arrow{
  display:flex;align-items:center;justify-content:center;flex:0 0 46px;
  background:var(--us-ink);color:#fff;font-family:var(--font-family-mono);font-size:18px;position:relative;
}
.wf-unit-systems .us-flow .us-arrow:after{
  content:'CONVERT';position:absolute;bottom:7px;font-size:7.5px;letter-spacing:.16em;color:#9aa6b2;
}
.wf-unit-systems .us-flow .convert-to.hidden{display:none;}

.wf-unit-systems .us-section{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 12px;}
.wf-unit-systems .us-section h3{font-size:15px;font-weight:700;margin:0;color:var(--us-ink);letter-spacing:-.01em;}
.wf-unit-systems .us-section .us-count{font-family:var(--font-family-mono);font-size:11px;color:var(--us-ink-3);}

.wf-unit-systems .unit-system-items{list-style:none;padding:0;margin:0;}
.wf-unit-systems .io-card{
  border:1px solid var(--us-line);border-radius:var(--us-radius);background:var(--us-card);
  margin-bottom:12px;overflow:hidden;box-shadow:0 1px 2px rgba(38,48,58,.04);
  transition:box-shadow .18s ease;animation:usRise .3s ease both;
}
.wf-unit-systems .io-card:hover{box-shadow:0 2px 10px rgba(38,48,58,.08);}
.wf-unit-systems .io-card .io-top{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--us-line-2);background:var(--us-paper);
}
.wf-unit-systems .io-card .io-idx{font-family:var(--font-family-mono);font-size:11px;color:var(--us-ink-3);min-width:20px;}
.wf-unit-systems .io-card .io-route{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:center;}
.wf-unit-systems .io-card .io-body{padding:13px 14px;}
.wf-unit-systems .io-card .qline{display:flex;align-items:center;gap:11px;}
.wf-unit-systems .io-card .qline .us-lbl{margin:0;min-width:62px;}
.wf-unit-systems .io-card .qline .qsel{flex:1;}

.wf-unit-systems .wf-dcu-inline{margin-top:2px;}
.wf-unit-systems .coltable{width:100%;border-collapse:collapse;}
.wf-unit-systems .coltable th{
  font-family:var(--font-family-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--us-ink-3);text-align:left;padding:6px 8px;font-weight:600;border-bottom:1px solid var(--us-line-2);
}
.wf-unit-systems .coltable td{padding:7px 8px;border-bottom:1px solid var(--us-line-2);vertical-align:middle;}
.wf-unit-systems .coltable tr:last-child td{border-bottom:0;}
.wf-unit-systems .coltable .cname{font-weight:600;font-size:12.5px;}
.wf-unit-systems .coltable .ctag{font-family:var(--font-family-mono);font-size:9px;color:var(--us-ink-3);margin-left:5px;}
.wf-unit-systems .coltable .us-xy{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.wf-unit-systems .coltable .us-xy .us-axis{font-family:var(--font-family-mono);font-size:9px;color:var(--us-ink-3);display:block;margin-bottom:2px;}

.wf-unit-systems .row-value:empty{display:none;}
.wf-unit-systems .row-value{
  margin-top:11px;padding-top:11px;border-top:1px dashed var(--us-line);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}

.wf-unit-systems .io-meta{display:flex;align-items:center;gap:14px;margin-top:11px;padding-top:10px;border-top:1px solid var(--us-line-2);}
.wf-unit-systems .io-meta .io-field{flex:1;}
.wf-unit-systems .io-meta .io-already{display:flex;align-items:center;gap:7px;}
.wf-unit-systems .io-meta input.form-control{font-family:var(--font-family-mono);font-size:12px;}

.wf-unit-systems .us-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--us-line-2);}

.wf-unit-systems .empty-hint{font-family:var(--font-family-mono);font-size:11px;color:var(--us-ink-3);padding:8px 0;display:flex;gap:7px;align-items:center;}

.wf-unit-systems .io-top .remove-item{
  border:1px solid var(--us-line);background:transparent;color:var(--us-ink-3);
  width:30px;height:30px;border-radius:var(--us-radius-sm);cursor:pointer;transition:all .15s ease;
}
.wf-unit-systems .io-top .remove-item:hover{border-color:#b42318;color:#b42318;background:#fbe7e4;}

@keyframes usRise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ============================================================================
   FROZEN APP SHELL  (gated, opt-in via body.app-shell-frozen)
   ----------------------------------------------------------------------------
   Locks the app to the viewport so the document never scrolls: the side rail
   (#d3v-side-rail, fixed) and topbar (header.navbar-d3view, fixed) stay put,
   #main_container fills the remaining box as a flex column, the <footer> pins
   to the bottom, and the ONLY thing that scrolls is whatever subcomponent on
   the page opts into overflow (e.g. the simulations table).

   This block is INERT until <body class="app-shell-frozen"> is set. Without the
   class, every page renders in the legacy document-flow model unchanged.
   Rollout: applied per-page first (simulations), then globally in index*.tpl.
   Kill switch: remove the body class. Covers pin-left / pin-right; pin-top is
   handled in a later phase.
   ============================================================================ */

html:has(> body.app-shell-frozen),
body.app-shell-frozen {
    height: 100%;
    overflow: hidden;
}

/* #main_container becomes the viewport-height flex column. Offsets clear the
   44px fixed rail and the 52px fixed topbar. */
body.app-shell-frozen #main_container {
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 44px;
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* neutralize the global sticky-footer min-height:100vh */
    overflow: hidden;
}
body.app-shell-frozen.app-menu-pos-pin-right #main_container {
    left: 0;
    right: 44px;
}

/* The legacy 46px top padding was topbar clearance for the document-flow
   layout; the frozen #main_container already starts below the fixed topbar
   (top:52px), so that padding is now a dead gap — drop it. */
body.app-shell-frozen #main_container > .main-content-panel {
    padding-top: 0;
}

/* The content stack: every shell wrapper between #main_container and the page
   becomes a min-height:0 flex column so a deeply-nested scroll region can size
   itself against the frozen height instead of growing the document. */
body.app-shell-frozen #main_container > .main-content-panel,
body.app-shell-frozen #content_wrapper,
body.app-shell-frozen #content_wrapper > .content,
body.app-shell-frozen .content > .inner_max,
body.app-shell-frozen .content > .inner_min,
body.app-shell-frozen #main_content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Footer pinned at the bottom of the frozen column, always visible. */
body.app-shell-frozen #main_container > footer,
body.app-shell-frozen #main_container > #footer {
    flex: 0 0 auto;
}

/* GENERIC PAGE FALLBACK (un-adapted pages)
   The wrapper-chain rule above sets #main_content overflow:hidden, which is
   correct only when a descendant opts into scrolling (e.g. the simulations
   table adapter below). On every OTHER application page there is no inner
   scroller, so content taller than the frozen height would be clipped and
   unreachable. Make #main_content itself the scroll region: the document
   never scrolls, the footer stays pinned, and the page content scrolls inside
   the frozen box. The simulations adapter threads the scroll down to the table
   instead, and its children fill #main_content exactly, so #main_content there
   never overflows and this rule shows no scrollbar (verified live). */
body.app-shell-frozen #main_content {
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
   SIMULATIONS PAGE ADAPTER (frozen shell)
   Threads the bounded height from #main_content down to the simulations table
   so the table — and ONLY the table — scrolls. Header bands (open-tabs strip,
   summary cards, panel heading, table toolbar) stay fixed; the fast_datatable
   virtual scroller fills whatever vertical space is left.
   NOTE: .two-col-flex deliberately keeps its row direction (rail | content).
   ---------------------------------------------------------------------------- */

/* fill chain: layout-body wrapper -> sim app root -> content column */
body.app-shell-frozen #main_content > div,
body.app-shell-frozen #user-simulations {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* the server-rendered breadcrumb band is a div child too: keep it at its own height */
body.app-shell-frozen #main_content > .main-breadcrumbs {
    flex: 0 0 auto;
    display: block;
}
body.app-shell-frozen #user-simulations > .two-col-flex {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #simulations,
body.app-shell-frozen #simulations > .pageTabsContainer,
body.app-shell-frozen #simulations #tabsContent,
body.app-shell-frozen #simulations #tabsContent > .main-content-view,
body.app-shell-frozen #simulations #widget-simulations,
body.app-shell-frozen #simulations .widget-view.panel,
body.app-shell-frozen #simulations .panel-body.mc-parent-modern-card,
body.app-shell-frozen #simulations .panel-contents.app-collection,
body.app-shell-frozen #simulations .new-dt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) header bands inside the sim content column */
body.app-shell-frozen #simulations #tabsList,
body.app-shell-frozen #simulations #tabsContent > .sim-summary-cards-container,
body.app-shell-frozen #simulations .panel-body > .panel-sub-heading,
body.app-shell-frozen #simulations .table-view > .table-viewer-header {
    flex: 0 0 auto;
}

/* drop the document-flow min-height reservations that created the whitespace */
body.app-shell-frozen #simulations .panel-contents.app-collection,
body.app-shell-frozen #simulations .new-dt {
    min-height: 0 !important;
}

/* fast_datatable fills its bounded region; the renderer is the only scroller.
   .table-viewer-body / .virtual-table are display:block by default, so they
   must become flex columns or the JS-sized renderer height leaks through. */
body.app-shell-frozen #simulations .table-view {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #simulations .table-viewer-body,
body.app-shell-frozen #simulations .virtual-table {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}
body.app-shell-frozen #simulations .virtual-table-renderer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    overflow: auto;
}

/* ============================================================================
   PHYSICALTESTS PAGE ADAPTER (frozen shell + chrome tab strip)
   ----------------------------------------------------------------------------
   Physical Tests uses the SAME app skeleton + fast_datatable component as
   Simulations (#user-physicaltests > .two-col-flex > [rail | #physicaltests]
   > .pageTabsContainer > #tabsList + #tabsContent > .main-content-view >
   #widget-physicaltests > ... > .new-dt > .table-view > virtual-table-renderer).
   This block mirrors the SIMULATIONS adapter so the table — and only the table
   — scrolls, then adds the Chrome-style tab strip scoped to #physicaltests.
   Scoped to #physicaltests / #user-physicaltests so nothing else is affected.
   ---------------------------------------------------------------------------- */

/* fill chain: layout-body wrapper -> pt app root -> content column */
body.app-shell-frozen #user-physicaltests {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.app-shell-frozen #user-physicaltests > .two-col-flex {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #physicaltests,
body.app-shell-frozen #physicaltests > .pageTabsContainer,
body.app-shell-frozen #physicaltests #tabsContent,
body.app-shell-frozen #physicaltests #tabsContent > .main-content-view,
body.app-shell-frozen #physicaltests #widget-physicaltests,
body.app-shell-frozen #physicaltests .widget-view.panel,
body.app-shell-frozen #physicaltests .panel-body.mc-parent-modern-card,
body.app-shell-frozen #physicaltests .panel-contents.app-collection,
body.app-shell-frozen #physicaltests .new-dt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* min-width:0 lets the content column shrink below the table's intrinsic
       (fixed-column) width instead of ballooning the whole subtree past the
       viewport — without it the right columns get clipped with no scrollbar. */
    min-width: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) header bands inside the pt content column */
body.app-shell-frozen #physicaltests #tabsList,
body.app-shell-frozen #physicaltests .panel-body > .panel-sub-heading,
body.app-shell-frozen #physicaltests .table-view > .table-viewer-header {
    flex: 0 0 auto;
}

/* drop the document-flow min-height reservations that created whitespace */
body.app-shell-frozen #physicaltests .panel-contents.app-collection,
body.app-shell-frozen #physicaltests .new-dt {
    min-height: 0 !important;
}

/* fast_datatable fills its bounded region; the renderer is the only scroller */
body.app-shell-frozen #physicaltests .table-view {
    flex: 1 1 auto;
    min-height: 0;
    /* the table keeps its intrinsic (fixed-column) width; scroll it horizontally
       here so the header band + body move together (stay column-aligned) and the
       rightmost columns stay reachable on narrower viewports. */
    min-width: 0;
    overflow-x: auto;
}
body.app-shell-frozen #physicaltests .table-viewer-body,
body.app-shell-frozen #physicaltests .virtual-table {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}
body.app-shell-frozen #physicaltests .virtual-table-renderer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    overflow: auto;
}

/* ── Chrome-style tab strip (physicaltests) ──────────────────────────────────
   Mirrors the #simulations strip (see spa/simulation.css) but scoped to
   #physicaltests and adapted to PT's tab markup (.pt-tab-name / .remove-pt-tab).
   Unlike sims, the "All Physical Tests" home tab (li.Table_view) stays VISIBLE
   — PT has no back-to-table button yet. */
#physicaltests #tabsList,
#databases #tabsList {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding-left: 0;
    margin-bottom: 0;
    background: #e9ecf0;
    border-bottom: none;
}
#physicaltests #tabsList > li,
#databases #tabsList > li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    max-width: max-content;
    margin: 0;
    position: relative;
    transition: flex-grow .18s ease;
}
/* lighter divider between adjacent tabs; hidden next to active/hovered tab */
#physicaltests #tabsList > li + li::before,
#databases #tabsList > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background: #f9fbfd;
    z-index: 3;
    transition: opacity .12s ease;
}
#physicaltests #tabsList > li.active::before,
#databases #tabsList > li.active::before,
#physicaltests #tabsList > li.active + li::before,
#databases #tabsList > li.active + li::before,
#physicaltests #tabsList > li:hover::before,
#databases #tabsList > li:hover::before,
#physicaltests #tabsList > li:hover + li::before,
#databases #tabsList > li:hover + li::before {
    opacity: 0;
}
/* tab link: [icon] [name] [close] on one line */
#physicaltests #tabsList > li > a,
#databases #tabsList > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 12px;
    position: relative;
    z-index: 0;
    background: #e9ecf0;
    color: #3c4043 !important;
    border: none;
    border-radius: 0;
    margin: 0;
    transition: color .15s ease;
}
#physicaltests #tabsList > li > a::after,
#databases #tabsList > li > a::after {
    content: "";
    position: absolute;
    inset: 4px 4px;
    border-radius: 8px;
    background: transparent;
    transition: background .15s ease;
    z-index: -1;
    pointer-events: none;
}
#physicaltests #tabsList > li:not(.active) > a:hover,
#databases #tabsList > li:not(.active) > a:hover {
    color: #202124 !important;
}
#physicaltests #tabsList > li:not(.active) > a:hover::after,
#databases #tabsList > li:not(.active) > a:hover::after {
    background: #d6dae0;
}
/* active tab: white + connected to the content below */
#physicaltests #tabsList > li.active,
#databases #tabsList > li.active {
    background: #e9ecf0;
}
#physicaltests #tabsList > li.active > a,
#databases #tabsList > li.active > a {
    background: #fff;
    color: #202124 !important;
    border: none;
    border-radius: 8px 8px 0 0;
    margin: 3px 0 0 0;
    font-weight: 600;
}
/* name truncates with ellipsis based on the tab's available width */
#physicaltests #tabsList .pt-tab-name,
#databases #tabsList .db-tab-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#physicaltests #tabsList .remove-pt-tab,
#databases #tabsList .remove-db-tab {
    flex: 0 0 auto;
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity .15s ease;
}
#physicaltests #tabsList .remove-pt-tab:hover { opacity: 1; }
#databases #tabsList .remove-db-tab:hover { opacity: 1; }
/* the loading spinner on the home tab shouldn't force the icon gap */
#physicaltests #tabsList .loading-simulation-data.hidden { display: none; }
#databases #tabsList .loading-simulation-data.hidden { display: none; }

/* ============================================================================
   TEMPLATES PAGE ADAPTER (frozen shell + chrome tab strip)
   ----------------------------------------------------------------------------
   Mirror of the #physicaltests adapter above, scoped to
   #responsetemplates / #user-responsetemplates.
   Templates uses the same app skeleton + fast_datatable component.
   DOM path: #user-responsetemplates > .two-col-flex > [rail | #responsetemplates]
   > .pageTabsContainer > #tabsList + #tabsContent > .main-content-view >
   #widget-responsetemplates > ... > .new-dt > .table-view > virtual-table-renderer.
   Tab markup comes from GenericTabContents (views.common.js) — detail tabs use
   .closeBtn (glyphicon-remove) rather than PT's .remove-pt-tab / .pt-tab-name.
   ---------------------------------------------------------------------------- */

/* fill chain: layout-body wrapper -> templates app root -> content column */
body.app-shell-frozen #user-responsetemplates {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.app-shell-frozen #user-responsetemplates > .two-col-flex {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #responsetemplates,
body.app-shell-frozen #responsetemplates > .pageTabsContainer,
body.app-shell-frozen #responsetemplates #tabsContent,
body.app-shell-frozen #responsetemplates #tabsContent > .main-content-view,
body.app-shell-frozen #responsetemplates #widget-responsetemplates,
body.app-shell-frozen #responsetemplates .widget-view.panel,
body.app-shell-frozen #responsetemplates .panel-body.mc-parent-modern-card,
body.app-shell-frozen #responsetemplates .panel-contents.app-collection,
body.app-shell-frozen #responsetemplates .new-dt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* min-width:0 lets the content column shrink below the table's intrinsic
       (fixed-column) width instead of ballooning the whole subtree past the
       viewport — without it the right columns get clipped with no scrollbar. */
    min-width: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) header bands inside the templates content column */
body.app-shell-frozen #responsetemplates #tabsList,
body.app-shell-frozen #responsetemplates .panel-body > .panel-sub-heading,
body.app-shell-frozen #responsetemplates .table-view > .table-viewer-header {
    flex: 0 0 auto;
}

/* drop the document-flow min-height reservations that created whitespace */
body.app-shell-frozen #responsetemplates .panel-contents.app-collection,
body.app-shell-frozen #responsetemplates .new-dt {
    min-height: 0 !important;
}

/* fast_datatable fills its bounded region; the renderer is the only scroller */
body.app-shell-frozen #responsetemplates .table-view {
    flex: 1 1 auto;
    min-height: 0;
    /* the table keeps its intrinsic (fixed-column) width; scroll it horizontally
       here so the header band + body move together (stay column-aligned) and the
       rightmost columns stay reachable on narrower viewports. */
    min-width: 0;
    overflow-x: auto;
}
body.app-shell-frozen #responsetemplates .table-viewer-body,
body.app-shell-frozen #responsetemplates .virtual-table {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}
body.app-shell-frozen #responsetemplates .virtual-table-renderer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    overflow: auto;
}

/* -- Chrome-style tab strip (responsetemplates + studies) --------------------
   Mirrors the #physicaltests strip above.

   SHARED by two pages on purpose. Both get their tab markup from
   GenericTabContents (views.common.js:2758 addToNavbar), which emits
   `<li><a>[icon] title</a><span class="closeBtn glyphicon-remove"></span></li>`
   — the close button is a SIBLING of the anchor, not a child of it, and there
   is no .pt-tab-name / .remove-pt-tab / .pt-table-overview-icon /
   .loading-simulation-data. That shape is what these rules are written against,
   so it is the same block, not a copy: adding #studies here was a selector-list
   change with zero new declarations.

   Do NOT fold #simulations or #physicaltests in — those pages emit the close
   INSIDE the anchor (.remove-sim-tab / .remove-pt-tab) and need the flex-item
   treatment, not the absolute one below.

   The home tab ("All Templates" / "All Studies") stays visible on both. */
#responsetemplates #tabsList,
#studies #tabsList {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding-left: 0;
    margin-bottom: 0;
    background: #e9ecf0;
    border-bottom: none;
}
#responsetemplates #tabsList > li,
#studies #tabsList > li {
    float: none;
    flex: 1 1 0;
    min-width: 0;
    max-width: max-content;
    margin: 0;
    position: relative;
    transition: flex-grow .18s ease;
}
/* lighter divider between adjacent tabs; hidden next to active/hovered tab */
#responsetemplates #tabsList > li + li::before,
#studies #tabsList > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background: #f9fbfd;
    z-index: 3;
    transition: opacity .12s ease;
}
#responsetemplates #tabsList > li.active::before,
#studies #tabsList > li.active::before,
#responsetemplates #tabsList > li.active + li::before,
#studies #tabsList > li.active + li::before,
#responsetemplates #tabsList > li:hover::before,
#studies #tabsList > li:hover::before,
#responsetemplates #tabsList > li:hover + li::before,
#studies #tabsList > li:hover + li::before {
    opacity: 0;
}
/* tab link: [icon] [name] on one line; the close button (.closeBtn, a sibling of
   <a>) is absolutely positioned over the right edge — so reserve right padding so
   the name ellipsizes before it (the close span isn't a child of <a> like PT's
   .remove-pt-tab, so it can't be a flex item inside the link). */
#responsetemplates #tabsList > li > a,
#studies #tabsList > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 8px 26px 8px 12px;
    position: relative;
    z-index: 0;
    background: #e9ecf0;
    color: #3c4043 !important;
    border: none;
    border-radius: 0;
    margin: 0;
    transition: color .15s ease;
}
#responsetemplates #tabsList > li > a::after,
#studies #tabsList > li > a::after {
    content: "";
    position: absolute;
    inset: 4px 4px;
    border-radius: 8px;
    background: transparent;
    transition: background .15s ease;
    z-index: -1;
    pointer-events: none;
}
#responsetemplates #tabsList > li:not(.active) > a:hover,
#studies #tabsList > li:not(.active) > a:hover {
    color: #202124 !important;
}
#responsetemplates #tabsList > li:not(.active) > a:hover::after,
#studies #tabsList > li:not(.active) > a:hover::after {
    background: #d6dae0;
}
/* active tab: white + connected to the content below */
#responsetemplates #tabsList > li.active,
#studies #tabsList > li.active {
    background: #e9ecf0;
}
#responsetemplates #tabsList > li.active > a,
#studies #tabsList > li.active > a {
    background: #fff;
    color: #202124 !important;
    border: none;
    border-radius: 8px 8px 0 0;
    margin: 3px 0 0 0;
    font-weight: 600;
}
/* close button on GenericTabContents detail tabs (.closeBtn = glyphicon-remove).
   The shared tab markup ships legacy INLINE positioning (float:right;
   position:relative; top:-25px; right:12px; height:0) meant for the old taller
   nav-tabs — in the Chrome tab it lands on top of the tab name. !important is
   required to beat those inline styles. Reset it and pin it at the right edge,
   vertically centered, in the space reserved by the <a>'s right padding. */
#responsetemplates #tabsList .closeBtn,
#studies #tabsList .closeBtn {
    position: absolute !important;
    top: 50% !important;
    right: 9px !important;
    left: auto !important;
    bottom: auto !important;
    height: auto !important;
    width: auto !important;
    float: none !important;
    transform: translateY(-50%);
    margin: 0 !important;
    z-index: 2;
    font-size: 11px;
    line-height: 1;
    color: #5f6368 !important;
    opacity: 0.5;
    transition: opacity .15s ease;
}
#responsetemplates #tabsList .closeBtn:hover,
#studies #tabsList .closeBtn:hover { opacity: 1; color: #202124 !important; }
/* Match the Simulations / Physical Tests tab close glyph. Those use <i class="fa
   fa-times">; the shared GenericTabContents markup uses glyphicon-remove (a heavier,
   different ×). Override the pseudo-element to render FontAwesome's fa-times (\f00d,
   FA6 solid) so the close button looks identical across all three pages. */
#responsetemplates #tabsList .closeBtn::before,
#studies #tabsList .closeBtn::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f00d" !important;
    font-size: 12px;
}

/* ============================================================================
   MATH MODELS PAGE ADAPTER (frozen shell + bounded rail)
   ----------------------------------------------------------------------------
   Mirror of the #responsetemplates / #physicaltests adapters, scoped to
   #user-mathmodels. Mathmodels reuses the OLDER .two-col-flex (.left-col rail +
   .content-col) shell with the fast_datatable component, but has NO tab strip:
   DOM path: #user-mathmodels > .two-col-flex.user-mathmodels-index-view >
   [.left-col (dropzone + Library) | .content-col > (.advanced-filter + h1.lead +
   .mathmodel-collection > #widget-mathmodels > .widget-view.panel >
   .panel-body.mc-parent-modern-card > [.panel-sub-heading | .panel-contents
   .app-collection > .new-dt > .table-view > virtual-table-renderer])].
   Without this block .two-col-flex grows to its content height and overflows
   #main_content, so the rail's full-height divider runs past the fold (the
   "rail taking over the left side" report) instead of the table being the only
   scroller. ---------------------------------------------------------------- */

/* fill chain: layout-body wrapper -> mathmodels app root -> .two-col-flex */
body.app-shell-frozen #user-mathmodels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.app-shell-frozen #user-mathmodels > .two-col-flex {
    flex: 1 1 auto;
    min-height: 0;
}

/* bound the rail to the viewport; a long Library list scrolls INSIDE the rail
   instead of stretching the whole page (so the divider stops at the fold). */
body.app-shell-frozen #user-mathmodels .left-col {
    min-height: 0;
    overflow-y: auto;
}

/* content column becomes a flex column so the collection fills + scrolls;
   min-width:0 lets it shrink below the table's fixed-column width. */
body.app-shell-frozen #user-mathmodels .content-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
}

/* the (empty) filter row + the "ML/AI Models" heading are fixed bands */
body.app-shell-frozen #user-mathmodels .content-col > .advanced-filter,
body.app-shell-frozen #user-mathmodels .content-col > h1.lead {
    flex: 0 0 auto;
}

/* the fast_datatable subtree fills the remaining height */
body.app-shell-frozen #user-mathmodels .mathmodel-collection,
body.app-shell-frozen #user-mathmodels #widget-mathmodels,
body.app-shell-frozen #user-mathmodels .widget-view.panel,
body.app-shell-frozen #user-mathmodels .panel-body.mc-parent-modern-card,
body.app-shell-frozen #user-mathmodels .panel-contents.app-collection,
body.app-shell-frozen #user-mathmodels .new-dt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) bands inside the content column */
body.app-shell-frozen #user-mathmodels .panel-body > .panel-sub-heading,
body.app-shell-frozen #user-mathmodels .table-view > .table-viewer-header {
    flex: 0 0 auto;
}

/* drop document-flow min-height reservations that created whitespace */
body.app-shell-frozen #user-mathmodels .panel-contents.app-collection,
body.app-shell-frozen #user-mathmodels .new-dt {
    min-height: 0 !important;
}

/* fast_datatable fills its bounded region; the renderer is the only scroller */
body.app-shell-frozen #user-mathmodels .table-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
}
body.app-shell-frozen #user-mathmodels .table-viewer-body,
body.app-shell-frozen #user-mathmodels .virtual-table {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}
body.app-shell-frozen #user-mathmodels .virtual-table-renderer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    overflow: auto;
}

/* -- Math Models modern rail (mirror the .sim-left-col treatment) ------------
   The page keeps its legacy .left-col markup (dropzone + Library sample list);
   these rules give it the modern rail look. The legacy padding was
   `8px 14px 8px 0px` (ZERO left padding) so the dropzone + Library text hugged
   the app-nav edge — the "too close to the edge" report. Inset to 12px (matches
   .sim-left-col), tidy the dropzone into a dashed upload card, render "Library"
   as an uppercase section label (.sim-filter-label), and style the sample rows
   like .sim-filter-list with the fa-brain as a 28px icon badge. */
#user-mathmodels .two-col-flex > .left-col {
    padding: 12px !important;
    background: #fff;
}

/* dropzone → modern dashed upload card */
#user-mathmodels #mathmodels-dropz {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    background: #f7fafc;
    transition: border-color .2s ease, background .2s ease;
}
#user-mathmodels #mathmodels-dropz:hover {
    border-color: #90b4e0;
    background: #eef4fb;
}

/* "Library" → uppercase section label (matches .sim-filter-label) */
#user-mathmodels .left-col h2.lead {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin: 6px 0 8px 4px;
}

/* sample model list → clean rows w/ icon badges (matches .sim-filter-list) */
#user-mathmodels .sample-mathmodels {
    list-style: none;
    padding: 0;
    margin: 0;
}
#user-mathmodels .sample-mathmodels li { margin-bottom: 2px; }
#user-mathmodels .sample-mathmodels li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #555;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
    line-height: 1.3;
}
#user-mathmodels .sample-mathmodels li a:hover {
    background: #f0f0f0;
    color: #333;
}
/* the inline fa-brain → 28px icon badge (purple accent, like the app icon) */
#user-mathmodels .sample-mathmodels li a i.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e8daef;
    color: #6c3483;
    font-size: 13px;
    flex-shrink: 0;
}

/* content heading "ML/AI Models" → house heading (the bootstrap .lead is
   oversized + light); tighten the column's top padding so the records-count
   band sits closer under it. */
#user-mathmodels .content-col {
    padding: 14px 18px !important;
}
#user-mathmodels .content-col > h1.lead {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px;
}

/* ----------------------------------------------------------------------------
   WORKFLOWS PAGE ADAPTER (frozen shell)
   Same intent as the simulations adapter: lock the page chrome to the viewport
   and let ONLY the inner list scroll. The workflows page nests the SAME
   fast_datatable component (.new-dt > .table-view > .virtual-table-renderer) as
   simulations, so the inner half is identical — only the OUTER wrapper chain is
   workflows-specific: #user-workflows > .workflows-app > [tab-shell] >
   .workflows-app-tabs > .workflows-app-tab-body > .workflows-app-tab-pane >
   .workflow-collection > #widget-workflows.
   The active tab-pane is also made a fallback scroller so the non-table tabs
   (Library / Examples / All Workers) scroll inside the frozen box instead of
   growing the document; on the My-Workflows tab the chain threads all the way to
   the table renderer, so the pane fills exactly and shows no scrollbar.
   ---------------------------------------------------------------------------- */

/* outer fill chain → flex columns that pass the bounded height down */
body.app-shell-frozen #user-workflows > .workflows-app,
body.app-shell-frozen .workflows-app > [data-role="tab-shell"],
body.app-shell-frozen .workflows-app-tabs,
body.app-shell-frozen .workflows-app-tab-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) bands: the empty page-header slot + the tab bar row
   (segmented toggle on the left, the page action buttons inline on the right) */
body.app-shell-frozen .workflows-app > [data-role="page-header"],
body.app-shell-frozen .workflows-app-tabs > .workflows-app-tabbar {
    flex: 0 0 auto;
}

/* the active tab pane fills the body and clips — every tab threads the scroll
   to its own inner region (My: the table; Library/Examples: the card grid;
   Workers: the sidebar group-list + the card grid), so the pane itself never
   scrolls and the page chrome above it stays pinned. */
body.app-shell-frozen .workflows-app-tab-body > .workflows-app-tab-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* --- Library + Examples tabs: pin the filter row (search + chips + count),
   scroll ONLY the card grid. Both panes carry .workflows-app-library-page. --- */
body.app-shell-frozen .workflows-app-library-page > [data-role="filter"] {
    flex: 0 0 auto;
}
body.app-shell-frozen .workflows-app-library-page > [data-role="grid"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Workers tab: pin the left rail (mode toggle + group list) AND the filter
   row; scroll the group list and the card grid independently. The bootstrap
   .row shell becomes a flex row so both columns fill the bounded height. --- */
body.app-shell-frozen .workflows-app-tab-pane[data-tab="workers"] > .workflows-app-workers-shell {
    display: flex;
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
}
/* Bound each column to the shell's (definite) height rather than its own tall
   content — align-items:stretch alone won't shrink a flex item below its
   content in the cross axis, so the card column would overflow and clip. */
body.app-shell-frozen .workflows-app-workers-shell > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
body.app-shell-frozen .workflows-app-workers-sidebar,
body.app-shell-frozen .workflows-app-workers-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
/* left rail: mode toggle pinned, group list scrolls */
body.app-shell-frozen .workflows-app-workers-sidebar > .workflows-app-workers-modebar {
    flex: 0 0 auto;
}
body.app-shell-frozen .workflows-app-workers-sidebar > .workflows-app-workers-grouplist {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* main column: filter row pinned, card grid scrolls */
body.app-shell-frozen .workflows-app-workers-main > [data-role="filter"] {
    flex: 0 0 auto;
}
body.app-shell-frozen .workflows-app-workers-main > [data-role="grid"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* My-Workflows table path: thread the height down to the renderer so the table
   — and only the table — scrolls (mirrors the simulations inner adapter, scoped
   to #widget-workflows so the simulations rules are untouched) */
body.app-shell-frozen .workflows-app-tab-pane > .workflow-collection,
body.app-shell-frozen #widget-workflows,
body.app-shell-frozen #widget-workflows .widget-view.panel,
body.app-shell-frozen #widget-workflows .panel-body.mc-parent-modern-card,
body.app-shell-frozen #widget-workflows .panel-contents.app-collection,
body.app-shell-frozen #widget-workflows .new-dt {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
body.app-shell-frozen #widget-workflows .panel-contents.app-collection,
body.app-shell-frozen #widget-workflows .new-dt {
    min-height: 0 !important;
}
/* fixed header bands inside the table card */
body.app-shell-frozen #widget-workflows .panel-body > .panel-sub-heading,
body.app-shell-frozen #widget-workflows .table-view > .table-viewer-header {
    flex: 0 0 auto;
}
/* the renderer is the only scroller */
body.app-shell-frozen #widget-workflows .table-view {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #widget-workflows .table-viewer-body,
body.app-shell-frozen #widget-workflows .virtual-table {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    height: auto !important;
    flex: 1 1 auto;
}
body.app-shell-frozen #widget-workflows .virtual-table-renderer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: none !important;
    overflow: auto;
}

/* ============================================================================
   PROJECTS PAGE ADAPTER (frozen shell)
   ----------------------------------------------------------------------------
   Locks /user/projects to the viewport like the simulations / workflows pages.
   The page wrapper (#user-projects > #projects.projects-page) is display:block
   and grows to content, so nothing filled the frozen shell — the card grid
   spilled the document and the Tree view (a simlytiks DynamicTreeViz) sat in a
   short, borderless box with a big dead margin below it.

   Thread the bounded height down: the 4 header bands stay fixed; the visible
   .view-panes fills the rest. The card grid scrolls internally. The tree pane
   hosts a bordered, rounded canvas that fills to the footer — the viz measures
   its container's height to size the svg (tree.js:366 `m.$el.height()`), so the
   pane just needs a real flex height (projects/views.js renderTreeView2 no
   longer forces an inline $(window).height(), which would override the flex).

   Every tree-internal rule is scoped to `#projects .treePane` so the shared
   simlytiks viz framework is untouched everywhere else in the app.
   ---------------------------------------------------------------------------- */

/* outer fill chain → flex columns that pass the bounded height down */
body.app-shell-frozen #user-projects,
body.app-shell-frozen #user-projects > #projects.projects-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* fixed (non-growing) header bands: title row, bookmarked strip, toolbar,
   and the "All Projects" label */
body.app-shell-frozen #projects > .projects-page-header,
body.app-shell-frozen #projects > .projects-bookmarked-section,
body.app-shell-frozen #projects > .projects-toolbar,
body.app-shell-frozen #projects > .projects-all-section-label {
    flex: 0 0 auto;
}

/* the visible pane fills the remaining height */
body.app-shell-frozen #projects > .view-panes {
    flex: 1 1 auto;
    min-height: 0;
}

/* card grid scrolls inside the frozen box (instead of growing the document) */
body.app-shell-frozen #projects > .view-panes.projects-card-grid {
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Tree pane: a bordered, rounded canvas that fills to the bottom. The
   DynamicTreeViz builds .dynamic-tree (toolbar + .viz-container ...) inside the
   pane; bound that chain so the widget card fills the pane and the svg fills
   the card. Scoped to #projects .treePane — the simlytiks viz is shared. --- */
body.app-shell-frozen #projects > .treePane {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}
body.app-shell-frozen #projects .treePane .dynamic-tree {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
body.app-shell-frozen #projects .treePane .dynamic-tree > .viz-container {
    flex: 1 1 auto;
    min-height: 0;
}
body.app-shell-frozen #projects .treePane .d3view-viz {
    flex: 1 1 auto;
    min-height: 0;
}

/* ============================================================================
   SIM DETAIL VIEW (classic) — tab-content height threading + Files tab listing
   ----------------------------------------------------------------------------
   (1) ADAPTER: the all-sims table adapter above threads the frozen height to
       the LIST view. The per-sim DETAIL view (.tabContent.simulation-tab-view-*)
       is display:block and grows to content, so a tab body that has its own
       internal scroller (the Files tab's `.nsec > .nsec-bd`, which already sets
       overflow:auto) never gets a bounded height and the whole view spills,
       carrying the tab strip / toolbar out of reach. Thread flex + min-height:0
       from the bounded #tabsContent down to the active tab content so the
       inner `.nsec-bd` scrolls and the tab strip stays put.
   (2) FILES TABLE: sticky column header + cleaner OneDrive-style rows. Scoped
       to `.fsv2-nsec` so the shared Responses (.rspv2-nsec) tab is untouched.
   ============================================================================ */

/* --- (1) thread height to the active detail-tab content ---
   Shared ancestors become flex columns so the bounded height can pass through;
   only the FILES tab claims the height + bounds its inner scroller, so the
   other detail tabs (AI-Agent / Summary / ...) keep their natural sizing. */
body.app-shell-frozen #simulations #tabsContent > .tabContent[class*="simulation-tab-view-"],
body.app-shell-frozen #simulations .simulation-view-body,
body.app-shell-frozen #simulations .simulation-tab-contents {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
/* the files tab grows to fill + releases its inline min-height:600 floor so the
   inner `.nsec > .nsec-bd` (overflow:auto) gets a bounded height and scrolls */
body.app-shell-frozen #simulations .sim-tab-content.files-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0 !important;
}
/* the HPC Job tab has no inner scroller of its own, so under the frozen shell its
   content (a long detail page) was clipped past the bounded pane with no way to
   reach it. Claim the height like Files does and let the tab content scroll. */
body.app-shell-frozen #simulations .sim-tab-content.hpcjob-tab-content {
    flex: 1 1 auto;
    min-height: 0 !important;      /* releases the inline minHeight:600 floor */
    overflow-y: auto;
}
/* keep the inner tab strip (Files / AI-Agent / ...) pinned above the content */
body.app-shell-frozen #simulations .simulation-view-body > ul.item-tabs {
    flex: 0 0 auto;
}

/* --- (2) Files tab table: sticky header + OneDrive-style rows --- */
.fsv2-nsec .fileItemsRenderingArea table.table {
    margin-bottom: 0;
    border: none;
}
/* sticky column header — stays visible while .nsec-bd scrolls */
.fsv2-nsec .fileItemsRenderingArea table.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f9fb;
    border-bottom: 1px solid #e3e7ec;
    border-top: none;
    color: #5b6b7f;
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 8px 10px;
}
/* rows: separators instead of stripes, soft hover, comfortable height */
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem > td {
    padding: 7px 10px;
    border-top: none;
    border-bottom: 1px solid #eef1f4;
    vertical-align: middle;
}
.fsv2-nsec .fileItemsRenderingArea table.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}
.fsv2-nsec .fileItemsRenderingArea table.table-hover > tbody > tr.fileItem:hover > td {
    background: #f3f7fc;
}
.fsv2-nsec .fileItemsRenderingArea .file-name .filetem-attr-name-tpl {
    font-weight: 500;
    color: #1f2937;
}
.fsv2-nsec .fileItemsRenderingArea .fileitem-attr-created_by-tpl,
.fsv2-nsec .fileItemsRenderingArea .fileitem-attr-modified_on-content,
.fsv2-nsec .fileItemsRenderingArea .fileitem-attr-size-tpl {
    color: #6b7280;
    font-size: 12.5px;
}
/* soften the type chip from a saturated badge to a quiet pill */
.fsv2-nsec .fileItemsRenderingArea .fileitem-attr-type-content.label {
    background: #eef2f7;
    color: #42526e;
    font-weight: 600;
    border-radius: 4px;
    padding: 3px 8px;
}

/* drop the redundant bottom pager — the top pager (.nsec-hd .n-pager-top) is
   the styled, working one */
.fsv2-nsec > .nsec-ft {
    display: none;
}

/* SELECTION: slight-blue row highlight + blue checkbox, replacing the global
   yellow `.selected` (#efe24b). Driven off BOTH the jQuery-UI selection class
   (live drag feedback) AND the checkbox's :checked state (the source of truth
   that the row-select JS and a direct checkbox click both set), so every path
   highlights consistently. The blue is set on the <td> so it paints over the
   global `.selected { background: ... !important }` that sits on the <tr>. */
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem.selected > td,
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem.ui-selected > td,
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem:has(.file-item-select:checked) > td {
    background: #e7f0fb;
}
/* keep selected rows blue even on hover (a touch darker for feedback) */
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem.selected:hover > td,
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem.ui-selected:hover > td,
.fsv2-nsec .fileItemsRenderingArea table.table > tbody > tr.fileItem:has(.file-item-select:checked):hover > td {
    background: #dbe8f8;
}
/* blue checkmark for the row + select-all checkboxes */
.fsv2-nsec .fileItemsRenderingArea .file-item-select,
.fsv2-nsec .fileItemsRenderingArea .file-item-select-all {
    accent-color: #2c5282;
    cursor: pointer;
}

/* Impersonation banner in the top navbar -- always visible while an admin
   is impersonating; the whole pill links to /account/restore_session. */
.impersonation-banner-item .impersonation-banner-pill {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #f1e0a6;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.impersonation-banner-item a { padding-top: 10px; padding-bottom: 10px; }
.impersonation-banner-item a:hover .impersonation-banner-pill {
    background: #ffe9a8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.impersonation-banner-item .impersonation-banner-switch {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #e6d492;
    font-weight: 700;
}

/* ============================================================================
   Share modal (.modalContainer.shareview -> d3VIEW.Views.ShareModalView)
   ----------------------------------------------------------------------------
   House modal treatment: centered rounded card, flat buttons, tamed select2,
   real field labels instead of the legacy <h2>-inside-<label> rendering that
   GenericInputTemplatesView emits.

   Scoped to .modalContainer.shareview throughout -- this dialog reuses the
   shared GenericInputTemplatesView + select2 v3, both of which are used
   app-wide, so nothing here may leak past the share modal.
   ========================================================================== */

/* -- the card ------------------------------------------------------------- */
.modalContainer.shareview .modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    /* bootstrap's `.modal.in .modal-dialog { transform: translate(0,0) }` ties on
       specificity, so the centering transform has to win with !important. */
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    /* overrides the inline width:70% from the #spa_generic_modal template */
    width: 760px !important;
    max-width: calc(100vw - 40px);
    margin: 0;
}

.modalContainer.shareview .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.modalContainer.shareview .modal-header {
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.modalContainer.shareview .modal-body {
    padding: 18px 22px 6px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.modalContainer.shareview .modal-footer {
    border-top: 1px solid #ececec;
    background: #fff;
}

/* -- field rows ----------------------------------------------------------- */
/* the template emits inline `width:99%; display:inline-block` on every
   container; reflow to full-width blocks with real vertical rhythm.
   :not(.hidden) is REQUIRED -- display:block !important would otherwise beat the
   .hidden rule and force every conditional field (team picker, share link,
   custom message) permanently visible. */
.modalContainer.shareview .modal-body .mb10:not(.hidden) {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px;
}

.modalContainer.shareview .modal-body .mb10.hidden {
    display: none !important;
}

.modalContainer.shareview .modal-body .mb10:not(.hidden):last-child {
    margin-bottom: 12px;
}

/* GenericInputTemplatesView renders labels as <label><h2>Name</h2></label>.
   Demote the h2 to a field label rather than a section heading. */
.modalContainer.shareview .modal-body label > h2 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.modalContainer.shareview .modal-body label > h2 i {
    color: #9aa5b1;
    margin-right: 2px;
}

.modalContainer.shareview .blurb {
    margin-top: 6px;
    font-size: 12px;
    color: #7a8592;
    line-height: 1.45;
}

/* -- inputs --------------------------------------------------------------- */
.modalContainer.shareview .modal-body input[type="text"],
.modalContainer.shareview .modal-body textarea {
    width: 100% !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modalContainer.shareview .modal-body input[type="text"]:focus,
.modalContainer.shareview .modal-body textarea:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
    outline: none;
}

.modalContainer.shareview .modal-body textarea {
    resize: vertical;
    min-height: 76px;
}

/* -- "Type of Share" (bootstrap-select) ----------------------------------- */
.modalContainer.shareview .bootstrap-select {
    width: 100% !important;
}

.modalContainer.shareview .bootstrap-select > .btn.dropdown-toggle {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    font-size: 13px;
    padding: 7px 10px;
    color: #333;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modalContainer.shareview .bootstrap-select.open > .btn.dropdown-toggle,
.modalContainer.shareview .bootstrap-select > .btn.dropdown-toggle:focus {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
    outline: none !important;
}

.modalContainer.shareview .bootstrap-select .dropdown-menu {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 4px;
}

.modalContainer.shareview .bootstrap-select .dropdown-menu li a {
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
}

.modalContainer.shareview .bootstrap-select .dropdown-menu li.selected a,
.modalContainer.shareview .bootstrap-select .dropdown-menu li a:hover {
    background: #eef3f9;
    color: #2c5282;
}

/* -- select2 v3 (User / Team pickers) ------------------------------------- */
/* the widget carries an inline width:96%; min-width:200px */
.modalContainer.shareview .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}

.modalContainer.shareview .select2-container .select2-choices {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    background-image: none;
    box-shadow: none;
    min-height: 36px;
    padding: 3px 4px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modalContainer.shareview .select2-container-active .select2-choices {
    border-color: #2c5282;
    box-shadow: 0 0 0 2px rgba(44, 82, 130, 0.1);
}

/* the generic input rule above would otherwise double-border the inner field */
.modalContainer.shareview .select2-container .select2-input {
    border: none !important;
    box-shadow: none !important;
    padding: 4px 6px;
    font-size: 13px;
    min-height: 26px;
}

/* chips -- same language as the Selected pills below */
.modalContainer.shareview .select2-container .select2-search-choice {
    background: #e8f0fe;
    background-image: none;
    border: 1px solid #d3e0f7;
    border-radius: 999px;
    color: #2c5282;
    font-size: 12px;
    line-height: 1.6;
    padding: 2px 9px 2px 22px;
    margin: 3px 4px 3px 0;
    box-shadow: none;
}

.modalContainer.shareview .select2-container .select2-search-choice-close {
    left: 6px;
    top: 5px;
}

.modalContainer.shareview .select2-drop {
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.modalContainer.shareview .select2-results .select2-highlighted {
    background: #2c5282;
}

.modalContainer.shareview .select2-results .select2-no-results {
    font-size: 12px;
    color: #8a939e;
    background: #fff;
}

/* -- Selected items ------------------------------------------------------- */
.modalContainer.shareview .selectedModels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafbfc;
    max-height: 132px;
    overflow-y: auto;
}

.modalContainer.shareview .selectedModels:empty {
    display: none;
}

.modalContainer.shareview .selectedModel.label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e8f0fe;
    border: 1px solid #d3e0f7;
    border-radius: 999px;
    color: #2c5282;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 11px;
    max-width: 100%;
}

.modalContainer.shareview .selectedModel.label strong {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modalContainer.shareview .selectedModel .removeThis {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.modalContainer.shareview .selectedModel .removeThis:hover {
    opacity: 1;
}

/* -- Share link ----------------------------------------------------------- */
.modalContainer.shareview .share_link-container.alert {
    padding: 12px 14px;
    border: 1px solid #cfe6d4;
    border-radius: 8px;
    background: #f2f9f4;
    margin-bottom: 18px;
}

.modalContainer.shareview .share_link-container .input-group-addon.link-input {
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: #f4f6f8;
    color: #6b7480;
}

.modalContainer.shareview .share_link-container input[type="text"] {
    border-radius: 0 6px 6px 0;
    font-family: Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    cursor: pointer;
}

/* -- buttons -------------------------------------------------------------- */
.modalContainer.shareview .modal-footer .btn {
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    border-radius: 6px;
    font-size: 13px;
    padding: 7px 18px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.modalContainer.shareview .modal-footer .btn-primary {
    background: #2c5282;
    border: 1px solid #2c5282;
    color: #fff;
}

.modalContainer.shareview .modal-footer .btn-primary:hover,
.modalContainer.shareview .modal-footer .btn-primary:focus {
    background: #24446c;
    border-color: #24446c;
}

.modalContainer.shareview .modal-footer .btn-default {
    background: #fff;
    border: 1px solid #ddd;
    color: #555;
}

.modalContainer.shareview .modal-footer .btn-default:hover {
    background: #f6f7f9;
    border-color: #ccc;
}

.modalContainer.shareview .modal-footer .btn.disabled,
.modalContainer.shareview .modal-footer .btn[disabled] {
    pointer-events: none;
    opacity: 0.6;
}

/* Submit dialog -- the Files section toolbar and empty state.
   Scoped to #input-files-container: #msgArea is a name half a dozen other
   screens use, and the generic .dropz rules above still serve them. */
#input-files-container .ts-input-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px 0;
}

#input-files-container .ts-input-tools-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
}

#input-files-container .ts-input-tools-aside {
    margin-left: auto;
}

#input-files-container .ts-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #d7dde5;
    border-radius: 4px;
    background-color: #fff;
    color: #3d4a5c;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

#input-files-container .ts-tool-btn:hover,
#input-files-container .ts-tool-btn:focus {
    border-color: #3f8fd4;
    background-color: #f2f8fd;
    color: #1c5c96;
    text-decoration: none;
}

#input-files-container .ts-tool-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 143, 212, 0.25);
}

#input-files-container .ts-tool-btn > i {
    width: 13px;
    font-size: 12px;
    text-align: center;
    color: #8a97a8;
}

#input-files-container .ts-tool-btn:hover > i,
#input-files-container .ts-tool-btn:focus > i {
    color: #3f8fd4;
}

#input-files-container .ts-tool-btn.active,
#input-files-container .ts-tool-btn.is-on {
    border-color: #3f8fd4;
    background-color: #3f8fd4;
    color: #fff;
}

#input-files-container .ts-tool-btn.active > i,
#input-files-container .ts-tool-btn.is-on > i {
    color: #fff;
}

#input-files-container .dropz {
    min-height: 0;
}

#input-files-container .dropz form#msgArea {
    position: relative;
    display: block;
    min-height: 140px;
    max-height: 280px;
    padding: 14px;
    margin-bottom: 0;
    border: 1px dashed #cdd6e0;
    border-radius: 6px;
    background: #fbfcfe;
    overflow-y: auto;
    -webkit-transition: border-color .12s ease, background-color .12s ease;
    transition: border-color .12s ease, background-color .12s ease;
}

#input-files-container .dropz form#msgArea:hover {
    border-color: #a8c1da;
    background: #f7fafe;
}

#input-files-container .dropz form#msgArea.dz-drag-hover {
    border-style: solid;
    border-color: #3f8fd4;
    background: #eef6fd;
}

#input-files-container .ts-dropz-empty {
    display: block;
    padding: 24px 12px 26px 12px;
    text-align: center;
}

#input-files-container .ts-dropz-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 26px;
    color: #b3c0d0;
}

#input-files-container .ts-dropz-title {
    color: #43546a;
    font-size: 14px;
    font-weight: 600;
}

#input-files-container .ts-dropz-hint {
    margin-top: 4px;
    color: #8593a5;
    font-size: 12px;
}

#input-files-container .dropz form#msgArea.dz-started .ts-dropz-empty {
    display: none;
}

#input-files-container .dropz .ts-dropz-server-only {
    display: none;
}

#input-files-container .dropz.ts-no-upload .ts-dropz-upload-only {
    display: none;
}

#input-files-container .dropz.ts-no-upload .ts-dropz-server-only {
    display: block;
}

/* A server-path solver should not answer a click with an upload dialog the API
   would refuse; only the browse link inside it stays live. */
#input-files-container .dropz.ts-no-upload form#msgArea {
    cursor: default;
    pointer-events: none;
}

#input-files-container .dropz.ts-no-upload .ts-dropz-hint a {
    pointer-events: auto;
    color: #2e7cc4;
    font-weight: 500;
    text-decoration: underline;
}

/* File rows in the submit dialog. `.dz-preview .makeMain` is 20% wide, from
   when the chip sat in a full-width row; the template later wrapped it in a
   col-md-2, so 20% of that collapsed it to a 30px circle with the label
   spilling out of it. */
#input-files-container .dz-preview {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    margin: 0;
    border-bottom: 1px solid #eef1f5;
    border-radius: 4px;
}

#input-files-container .dz-preview:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

#input-files-container .dz-preview:hover {
    background-color: #f2f7fd;
}

#input-files-container .dz-preview .dz-filename {
    color: #2f3d4f;
    font-size: 13px;
    font-weight: 600;
}

#input-files-container .dz-preview .fa-upload,
#input-files-container .dz-preview .fa-server {
    margin-right: 6px;
    color: #9aa7b8;
}

#input-files-container .dz-preview .dz-size {
    color: #7b8798;
    font-size: 12px;
}

#input-files-container .dz-preview .col-md-1 {
    color: #7b8798;
    font-size: 12px;
    text-align: right;
}

#input-files-container .dz-preview .makeMain {
    width: auto;
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #d7dde5;
    border-radius: 4px;
    background-color: #fff;
    background-image: none;
    color: #5b6a7d;
    font-size: 11px;
    font-weight: 500;
    line-height: 22px;
    text-shadow: none;
    text-overflow: ellipsis;
    overflow: hidden;
}

#input-files-container .dz-preview .makeMain:hover {
    border-color: #3f8fd4;
    background-color: #f2f8fd;
    color: #1c5c96;
}

#input-files-container .dz-preview .makeMain.main {
    border-color: #3f8fd4;
    background-color: #3f8fd4;
    color: #fff;
}

#input-files-container .dz-preview .remove-file,
#input-files-container .dz-preview .remove {
    color: #a3b0c0;
    cursor: pointer;
}

#input-files-container .dz-preview .remove-file:hover,
#input-files-container .dz-preview .remove:hover {
    color: #c0392b;
}

/* --- The compute-node file view: a job's working directory while it still exists --- */

.cfv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 10px;
    padding: 3px 10px 3px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 11px;
    background: #f7f9fc;
    font-size: 11px;
    font-weight: 600;
    color: #2c5282;
    cursor: pointer;
    white-space: nowrap;
}

.cfv-toggle input { margin: 0; }

.cfv-toggle .cfv-toggle-node {
    margin-left: 5px;
    color: #888;
    font-weight: 500;
    font-family: monospace;
}

.cfv-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c5282;
    border-radius: 6px;
    background: #f7f9fc;
    font-size: 12px;
    margin-bottom: 10px;
}

.cfv-bar .cfv-node { font-weight: 600; color: #2c5282; }
.cfv-bar .cfv-path { background: none; color: #555; padding: 0; }
.cfv-bar .cfv-count { color: #888; }

/* Says plainly that what is listed does not survive the job. */
.cfv-bar .cfv-live {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 11px;
    background: #fff7e6;
    color: #856404;
    font-size: 11px;
    font-weight: 600;
}

.cfv-table td { font-size: 12px; vertical-align: middle; }
.cfv-table .cfv-size,
.cfv-table .cfv-when { color: #888; white-space: nowrap; width: 1%; }
.cfv-table .fa-folder { color: #2c5282; }
.cfv-table .fa-file-o { color: #999; }

.cfv-msg { padding: 14px; color: #555; font-size: 12px; }

.cfv-msg.cfv-problem {
    border: 1px solid #e0e0e0;
    border-left: 3px solid #856404;
    border-radius: 6px;
    background: #fff7e6;
    color: #856404;
}

.cfv-msg .cfv-hint {
    margin-top: 6px;
    color: #777;
    font-weight: 400;
}

.cfv-bar .cfv-refresh { color: #2c5282; text-decoration: none; }
.cfv-bar .cfv-refresh:hover { color: #1a365d; }

.cfv-bar .cfv-auto-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
}

.cfv-bar .cfv-auto-lbl input { margin: 0; }
.cfv-bar .cfv-at { color: #aaa; font-size: 11px; }

/* /stylesheets/workflow-ai-builder.css */
/** Added by shashank2104 on 06/15/2026 at 10:09 AM - prod CSS parity - strip workflow-ai-builder.css from style-prod.css **/

/* AI-65 | Workflow Builder | d3VIEW-side styles for the chat-first AI Workflow UI.
   Scope: anything that lives in d3VIEW templates (not the plugin views). The
   PLUGINS workflow plugin's own AI-builder styles live in
   PLUGINS/.../stylesheets/modular/builder/wfb-ai/wfb-ai.css. This file is for
   d3VIEW-level chrome — the workflows landing button, future header bars,
   shared layout for the new_workflow_ai shell, etc. */


/* ----- Build Workflow with AI button (workflows landing page) ----- */

/* Purple-to-blue gradient with a one-shot border shine on initial render to
   draw the eye, then settles to a static gradient. Single-shot via
   animation-iteration-count: 1 + animation-fill-mode: both. */
/* Gradient mirrors the fora chat user-message bubble (indigo -> purple),
   so the entry-point button visually previews the AI conversation
   surface the user is about to enter. */
.wf-action-btn--ai,
.wf-action-btn--ai:visited {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(118, 75, 162, 0.3);
    position: relative;
    z-index: 0;
}

.wf-action-btn--ai:hover,
.wf-action-btn--ai:focus {
    background: linear-gradient(135deg, #5568d3 0%, #5e3a82 100%);
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(118, 75, 162, 0.45);
    transform: translateY(-1px);
}

/* Conic gradient clipped to a 2px ring around the button via the
   mask-composite "border-only gradient" trick. The ring SHAPE stays fixed
   (no transform: rotate — that spins the whole pill outline, which looks
   wrong on a non-circular button). Instead we animate the conic's start
   angle via a registered @property custom property: only the highlight
   colors travel around the perimeter, while the rounded-pill ring itself
   sits still. After one full revolution the shine fades to opacity 0 and
   animation-fill-mode: both holds it faded for the rest of the session. */
@property --wfb-ai-shine-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.wf-action-btn--ai::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 23px;
    padding: 3px;
    --wfb-ai-shine-angle: 0deg;
    background: conic-gradient(
        from var(--wfb-ai-shine-angle),
        transparent 0deg 25deg,
        rgba(196, 181, 253, 0.9) 45deg,
        rgba(253, 230, 138, 1) 60deg,
        rgba(196, 181, 253, 0.9) 75deg,
        transparent 95deg 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
    animation: wf-action-btn-ai-shine 1.4s ease-out 1 both;
    z-index: -1;
}

@keyframes wf-action-btn-ai-shine {
    0%   { --wfb-ai-shine-angle: 0deg;   opacity: 1; }
    85%  { --wfb-ai-shine-angle: 360deg; opacity: 1; }
    100% { --wfb-ai-shine-angle: 360deg; opacity: 0; }
}


/* /stylesheets/workflows_app.css */
.workflows-app                            { padding: 16px 20px; }
.workflows-app-tabs                       { display: flex; flex-direction: column; gap: 16px; }
/* Tab bar row: the segmented tab toggle on the left, the page action buttons
   (Sandbox / Build Workflow / Build-with-AI) pushed to the right, inline. */
.workflows-app-tabbar                     { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.workflows-app-tabbar .wf-action-buttons  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.workflows-app-tab-toggle                 { display: inline-flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; align-self: flex-start; }
/* The My-Workflows pane is a Dropzone drop target (dz-clickable), which paints a
   global 1px dashed #ddd border — drop it here for a clean, borderless list. */
.workflows-app-tab-pane.dz-clickable      { border: none; }
/* Tabs animate their background + text colour on hover. The
   pseudo-element sweep gives a left-to-right gradient highlight that
   plays once each time the cursor enters — softer than an instant
   colour swap, but still snaps when the user leaves. */
.workflows-app-tab                        { position: relative; padding: 8px 18px; border: none; background: #ffffff; color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; transition: color 0.2s ease, background 0.25s ease; }
.workflows-app-tab + .workflows-app-tab   { border-left: 1px solid #d1d5db; }
.workflows-app-tab::before                { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,182,255,0) 0%, rgba(2,182,255,0.18) 50%, rgba(2,182,255,0) 100%); transform: translateX(-100%); transition: transform 0.45s ease; pointer-events: none; }
.workflows-app-tab:hover                  { color: #1f2937; background: #f0f9ff; }
.workflows-app-tab:hover::before          { transform: translateX(100%); }
.workflows-app-tab.is-active::before      { display: none; }
.workflows-app-tab.is-active              { background: #337ab7; color: #ffffff; }
/* When the first or last tab is the active one, round its outer
   corners to match the toggle container's 8px radius — without this
   the active background clips against the parent's rounded corner
   and leaves a thin square seam on the outside edge. */
.workflows-app-tab:first-child.is-active  { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.workflows-app-tab:last-child.is-active   { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.workflows-app-tab-count                  { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 6px; background: #e5e7eb; color: #4b5563; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; text-align: center; vertical-align: middle; }
.workflows-app-tab-count:empty            { display: none; }
.workflows-app-tab.is-active .workflows-app-tab-count { background: rgba(255,255,255,0.25); color: #ffffff; }
.workflows-app-tab-body                   { width: 100%; }
.workflows-app-tab-body .workflows-app-placeholder { padding: 80px 20px; text-align: center; color: #6b7280; font-size: 14px; }

/* Filter rail — single-row layout: narrow search input + chips inline + result count on the right */
.workflows-app-filter-rail        { margin-bottom: 12px; }
.workflows-app-filter-row         { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.workflows-app-search-group       { display: flex; align-items: stretch; flex: 0 0 280px; max-width: 320px; min-width: 200px; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; background: #ffffff; }
.workflows-app-search-group:focus-within { border-color: #337ab7; box-shadow: 0 0 0 2px rgba(51,122,183,0.15); }
.workflows-app-search-icon        { display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; background: #f3f4f6; color: #6b7280; font-size: 12px; border-right: 1px solid #d1d5db; }
.workflows-app-search             { flex: 1; min-width: 0; padding: 6px 10px; border: none; outline: none; font-size: 13px; background: #ffffff; color: #111827; }
/* Chip cluster takes the middle of the row; chips wrap to a second line if too many */
.workflows-app-filter-chips       { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.workflows-app-chip-rail-icon     { color: #9ca3af; font-size: 12px; padding: 0 4px; display: inline-flex; align-items: center; }
.workflows-app-result-count       { font-size: 12px; color: #6b7280; white-space: nowrap; margin-left: auto; }
.workflows-app-chip-rail          { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Match the search-input group's 6px radius (above) so chips and the
   search field read as one consistent filter row instead of mixing
   pill-shaped chips with rounded-rectangle inputs. */
.workflows-app-chip               { padding: 3px 10px; border: 1px solid #d1d5db; background: #ffffff; border-radius: 6px; font-size: 12px; cursor: pointer; color: #374151; line-height: 1.3; }
.workflows-app-chip:hover         { background: #f3f4f6; }
.workflows-app-chip.is-active     { background: #337ab7; color: #ffffff; border-color: #337ab7; }
/* Tag chips read as secondary — smaller, subdued by default, but still stand out when active */
.workflows-app-chip-rail--tags .workflows-app-chip            { padding: 1px 8px; font-size: 10px; color: #6b7280; background: #fafafa; }
.workflows-app-chip-rail--tags .workflows-app-chip:hover      { background: #f3f4f6; color: #111827; }
.workflows-app-chip-rail--tags .workflows-app-chip.is-active  { background: #4b5563; color: #ffffff; border-color: #4b5563; }

.workflows-app-chip-more                          { position: relative; display: inline-block; }
.workflows-app-chip-more-toggle                   { list-style: none; cursor: pointer; padding: 3px 10px; border: 1px dashed #9ca3af; background: #ffffff; border-radius: 6px; font-size: 12px; color: #4b5563; line-height: 1.3; user-select: none; }
.workflows-app-chip-more-toggle::-webkit-details-marker { display: none; }
.workflows-app-chip-more-toggle:hover             { background: #f3f4f6; border-color: #6b7280; color: #111827; }
.workflows-app-chip-more[open] .workflows-app-chip-more-toggle { background: #eff6ff; border-style: solid; border-color: #337ab7; color: #1e40af; }
.workflows-app-chip-more-panel                    { position: absolute; left: 0; top: calc(100% + 6px); display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 20; max-width: 480px; min-width: 200px; }
/* Single-value boolean rail rendered as a checkbox (e.g. All Workers'
   "With examples" toggle). Sits inline with the chip rail so it lines up
   with the search input + other rails. */
.workflows-app-rail-check         { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #374151; cursor: pointer; user-select: none; padding: 3px 4px; }
.workflows-app-rail-check input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Card grid */
.workflows-app-card-grid          { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1280px) { .workflows-app-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px)  { .workflows-app-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .workflows-app-card-grid { grid-template-columns: 1fr; } }
/* Card hover animates four ways without changing layout: border
   colour, sky-blue outer glow, a subtle upward lift via translateY,
   and a left-to-right gradient sweep over the surface. The sweep
   uses a pseudo-element clipped to the rounded card so it never
   spills past the corners. */
.workflows-app-card               { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 2px 6px rgba(15,23,42,0.04); transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease; }
.workflows-app-card::before       { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(2,182,255,0) 0%, rgba(2,182,255,0.10) 50%, rgba(2,182,255,0) 100%); transform: translateX(-110%); transition: transform 0.6s ease; pointer-events: none; z-index: 0; }
.workflows-app-card:hover         { border-color: #02B6FF; background: linear-gradient(135deg, #ffffff 0%, #f7fbff 60%, #eff7ff 100%); box-shadow: 0 0 0 1px #02B6FF, 0 6px 16px rgba(2,182,255,0.18); transform: translateY(-2px); }
.workflows-app-card:hover::before { transform: translateX(110%); }
.workflows-app-card > *           { position: relative; z-index: 1; }
/* Cart membership — visual feedback when a card has been toggled
   into the global cart. The check-circle in the top-right corner
   stays out of the way of the action buttons. */
.workflows-app-card.is-in-cart    { border-color: #02B6FF; box-shadow: 0 0 0 1px #02B6FF inset, 0 1px 4px rgba(2,182,255,0.15); }
.workflows-app-card-cart-tick     { position: absolute; top: 6px; right: 8px; color: #02B6FF; font-size: 16px; line-height: 1; pointer-events: none; z-index: 2; }
.workflows-app-card-name          { font-size: 12px; font-weight: 600; color: #111827; }
.workflows-app-card-desc          { font-size: 12px; line-height: 1.4; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.workflows-app-card-meta          { display: flex; gap: 4px; flex-wrap: wrap; }
.workflows-app-card-chip          { padding: 1px 6px; font-size: 9px; border-radius: 4px; text-transform: uppercase; }
.workflows-app-card-chip--cat     { background: #e0f2fe; color: #075985; }
.workflows-app-card-chip--tag     { background: #f3f4f6; color: #374151; }

/* Card head — id badge beside the name. The id is how every internal
   reference to a library workflow is keyed, so the badge is sized to
   match the d3VIEW status-badge convention (frontend-style.md): primary
   blue on a tinted background, slightly larger and chunkier than the
   muted grey chip it replaced. */
.workflows-app-card-head          { display: flex; align-items: center; gap: 8px; }
.workflows-app-card-cid           { font-size: 11px; font-weight: 700; color: #2c5282; background: #e0ecf8; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; letter-spacing: 0.3px; font-family: 'SF Mono', Menlo, Consolas, monospace; border: 1px solid #c6d9ec; }

/* Card stats + footer combine into a panel-footer band at the bottom of
   each card (border-top, shared muted bg). Stats sit above the date row
   so the visual order is "what's in this workflow" -> "when last touched."
   margin-top: auto on the first of the two pushes the band to the bottom
   regardless of how short the description is. */
.workflows-app-card-stats         { margin-top: auto; padding: 6px 0 4px; border-top: 1px solid #f3f4f6; display: flex; gap: 10px; font-size: 10px; color: #4b5563; flex-wrap: wrap; }
.workflows-app-card-stat         { display: inline-flex; align-items: center; gap: 4px; }
.workflows-app-card-stat .fa     { color: #9ca3af; }

/* Card footer — last-modified date + attachment icons. When stats are
   present above, the footer drops its top margin/border so the two render
   as one continuous band. The :first-child guard handles cards without
   stats (legacy callers) — they still get the original bottom-pinned
   layout. */
/* One-line footer — workers count, inputs count, "Updated DATE".
   The old separate stats row + footer is collapsed into this. Text
   is dark so the date is legible at a glance instead of fading into
   the card background. */
.workflows-app-card-footer        { font-size: 11px; color: #1f2937; display: flex; align-items: center; gap: 12px; padding-top: 6px; margin-top: auto; border-top: 1px solid #f3f4f6; }
.workflows-app-card-foot-stat     { display: inline-flex; align-items: center; gap: 4px; color: #1f2937; }
.workflows-app-card-foot-stat .fa { color: #6b7280; }
.workflows-app-card-footer-text   { flex: 1 1 auto; min-width: 0; text-align: right; color: #1f2937; }
/* Footer attachment icons — small clickable PDF / PPT / Video / Info row.
   Each icon stops click propagation so the whole-card primary action does
   not also fire. The info icon opens the metadata Inspect modal. */
.workflows-app-card-attachments              { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.workflows-app-card-attachment               { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #d1d5db; border-radius: 4px; background: #ffffff; color: #4b5563; font-size: 11px; cursor: pointer; padding: 0; text-decoration: none; }
.workflows-app-card-attachment:hover         { background: #f3f4f6; color: #111827; border-color: #9ca3af; }
.workflows-app-card-attachment:focus         { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* Action button cluster — date on the left, buttons on the right. The
   right-aligned buttons cluster lets the eye scan multiple cards down
   the action column without the cluster shifting per-card based on
   action count. The date in `.workflows-app-card-actions-date` replaces
   the old separate footer band; cards with no Updated value show an
   empty span so the buttons stay right-aligned regardless. */
.workflows-app-card-actions               { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-top: 4px; border-top: 1px solid #f3f4f6; min-width: 0; }
.workflows-app-card-filename              { font-size: 10px; color: #6b7280; font-family: 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.2px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflows-app-card-actions-date          { font-size: 11px; color: #6b7280; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflows-app-card-actions-buttons       { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.workflows-app-card-actions-buttons:empty { display: none; }
.workflows-app-card-actions:empty         { display: none; }
.workflows-app-card-chip--discipline      { padding: 1px 6px; font-size: 9px; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; }

/* Body row — thumbnail on the left (40%), description on the right (60%).
   When only one of the two is present the body still renders cleanly
   because the lone child takes the full row. */
.workflows-app-card-body                  { display: flex; align-items: flex-start; gap: 10px; }
.workflows-app-card-body .workflows-app-card-thumb-wrap { flex: 0 0 40%; min-width: 0; }
.workflows-app-card-body .workflows-app-card-desc       { flex: 1 1 60%; min-width: 0; }
.workflows-app-card-body .workflows-app-card-thumb      { width: 100%; height: auto; display: block; }

/* PDF doc icon next to the card name. Stops click propagation in the
   template so opening the doc does not also fire the card-click handler. */
.workflows-app-card-head-doc              { margin-left: auto; color: #b91c1c; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px; text-decoration: none; flex-shrink: 0; }
.workflows-app-card-head-doc:hover        { background: #fee2e2; color: #7f1d1d; }
/* Card action buttons start subdued — visible enough that users see
   they exist, but not visually noisy. The full bordered+filled look
   kicks in when the card is hovered, so the buttons "wake up" when
   the user is actually engaging with that card. Per-button hover then
   takes one extra step toward the active state. */
.workflows-app-card-action        { padding: 4px 8px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-size: 11px; cursor: pointer; color: #6b7280; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; opacity: 0.8; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.workflows-app-card:hover .workflows-app-card-action { border-color: #d1d5db; background: #ffffff; color: #374151; opacity: 1; }
.workflows-app-card-action:hover  { background: #f3f4f6; border-color: #9ca3af; color: #111827; text-decoration: none; }

/* Card thumbnail — most workers carry a small SVG/PNG icon in the worker
   JSON. Render it in the body just under the title; clicking opens a
   bigger preview in the inline thumb modal. */
.workflows-app-card-thumb-wrap    { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.workflows-app-card-thumb         { max-width: 100%; max-height: 64px; object-fit: contain; cursor: zoom-in; opacity: 0.92; transition: opacity 0.15s ease, transform 0.15s ease; }
.workflows-app-card-thumb:hover   { opacity: 1; transform: scale(1.04); }

/* Lightweight image-viewer modal (used for worker thumbnails) — fills
   most of the viewport so the SVG is comfortably readable. */
.workflows-app-thumb-scrim        { position: fixed; inset: 0; background: rgba(15,23,42,0.75); display: flex; align-items: center; justify-content: center; z-index: 9050; }
.workflows-app-thumb-shell        { background: #ffffff; border-radius: 10px; width: 95vw; height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.workflows-app-thumb-head         { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.workflows-app-thumb-title        { font-size: 14px; font-weight: 600; color: #111827; }
.workflows-app-thumb-close        { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.workflows-app-thumb-close:hover  { color: #111827; }
.workflows-app-thumb-body         { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; min-height: 0; }
.workflows-app-thumb-large        { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Primary action uses Bootstrap's classic btn-primary blue */
.workflows-app-card-action.is-primary       { background: #337ab7; color: #ffffff; border-color: #2e6da4; }
.workflows-app-card-action.is-primary:hover { background: #286090; border-color: #204d74; }
.workflows-app-empty              { padding: 60px 20px; text-align: center; color: #6b7280; }
.workflows-app-card-grid-sentinel { grid-column: 1 / -1; padding: 20px; text-align: center; color: #6b7280; font-size: 12px; }

/* Viewer modal — z-index 1029 sits ABOVE page chrome and Bootstrap
   fixed-top (1030) but BELOW Bootstrap modal-backdrop (1040) and
   modal (1050). Without this, the canvas's Edit / Export modals
   that open inside the shell would render BEHIND the scrim,
   invisible and unclickable (DW-2901). Shell + content render in
   the same stacking context as the scrim, so they show above page
   chrome regardless. */
.workflows-app-viewer-scrim       { position: fixed; inset: 0; background: rgba(15,23,42,0.6); display: flex; align-items: center; justify-content: center; z-index: 1029; }
.workflows-app-viewer-shell       { background: #ffffff; width: 90vw; height: 85vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.workflows-app-viewer-head        { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.workflows-app-viewer-title       { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflows-app-viewer-head-attachments { display: flex; gap: 6px; flex-wrap: nowrap; }
/* Three-button header toolbar — Meta / Canvas / Import. Sits between
   the attachment shortcuts and the close button. Visible only after the
   metadata resolves (head-actions opens with hidden=true). */
.workflows-app-viewer-head-actions { display: flex; gap: 4px; padding: 0 6px 0 0; }
.workflows-app-viewer-head-actions[hidden] { display: none; }
.workflows-app-viewer-head-btn    { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #d1d5db; background: #ffffff; border-radius: 4px; font-size: 11px; font-weight: 600; color: #374151; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.workflows-app-viewer-head-btn:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; }
.workflows-app-viewer-head-btn:focus { outline: 2px solid #93c5fd; outline-offset: 1px; }
.workflows-app-viewer-head-btn.is-active { background: #2c5282; color: #ffffff; border-color: #2c5282; }
.workflows-app-viewer-head-btn.is-active:hover { background: #1e3a5f; border-color: #1e3a5f; }
.workflows-app-viewer-head-btn[disabled] { opacity: 0.65; cursor: progress; }
.workflows-app-viewer-close       { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.workflows-app-viewer-body        { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px; }
/* Canvas-loading placeholder — shown inside the canvas pane while the
   workflow zip downloads and d3VIEW.WorkFlow mounts. The spinner sits
   centred so the user knows the click registered even on slow zips. */
.workflows-app-viewer-canvas-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 30px; color: #6b7280; font-size: 13px; }
.workflows-app-viewer-canvas-loading .fa { font-size: 18px; color: #2c5282; }

/* Central full-screen loader shown while the worker run modal is fetching
   its config. z-index sits just below Bootstrap's modal-backdrop (1040) so
   the moment the worker modal mounts, the backdrop visually replaces the
   loader; the JS .then() handler removes the loader DOM right after. The
   small white card carries the spinner so the user gets clear "the click
   landed" feedback rather than a faint scrim alone. */
.workflows-app-worker-loader { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; z-index: 1039; animation: workflowsAppLoaderFade 0.15s ease both; }
.workflows-app-worker-loader-card { background: #ffffff; padding: 14px 22px; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.22); display: flex; align-items: center; gap: 12px; color: #2c5282; font-size: 13px; font-weight: 600; }
.workflows-app-worker-loader-card .fa { font-size: 18px; }
@keyframes workflowsAppLoaderFade { from { opacity: 0; } to { opacity: 1; } }
.workflows-app-viewer-foot        { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #e5e7eb; background: #fafafa; }
/* [hidden] is a UA stylesheet rule (display:none) — class rules with
   display:flex/grid have equal specificity and outrank it (author over
   UA), so we re-assert display:none here for the elements that use the
   hidden attribute as a runtime show/hide signal. */
.workflows-app-viewer-foot[hidden],
.workflows-app-viewer-foot [hidden] { display: none; }
.workflows-app-viewer-attachment  { display: inline-flex; align-items: center; gap: 6px; }

/* START inputs block — section header with title + Required/Optional
   toggle, then a flex-row list. Rows hide via the [hidden] attribute
   driven by the toggle; CSS gives them comfortable spacing and keeps
   the option pills wrapping inside the row's right cell. */
.workflows-app-viewer-inputs                     { margin-bottom: 14px; }
.workflows-app-viewer-inputs-head                { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
.workflows-app-viewer-inputs-title               { font-size: 11px; font-weight: 600; color: #1e4d8a; text-transform: uppercase; letter-spacing: 0.3px; }
.workflows-app-viewer-inputs-title i             { margin-right: 4px; }
.workflows-app-viewer-inputs-toggle              { display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 3px; gap: 2px; }
.workflows-app-viewer-inputs-toggle button       { border: none; background: transparent; color: #888; padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.workflows-app-viewer-inputs-toggle button:hover { color: #555; background: #e8e8e8; }
.workflows-app-viewer-inputs-toggle button.is-active { background: #fff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.workflows-app-viewer-inputs-list                { display: flex; flex-direction: column; }
.workflows-app-viewer-input-row                  { display: grid; grid-template-columns: 22px minmax(180px, 1.2fr) minmax(120px, 0.8fr) minmax(0, 1.5fr); align-items: start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f3f4f6; }
.workflows-app-viewer-input-row[hidden]          { display: none; }
.workflows-app-viewer-input-row:last-child       { border-bottom: none; }
.workflows-app-viewer-input-icon                 { color: #6b7280; font-size: 13px; padding-top: 2px; }
.workflows-app-viewer-input-main                 { min-width: 0; }
.workflows-app-viewer-input-label                { font-size: 13px; font-weight: 700; color: #111827; word-break: break-word; }
.workflows-app-viewer-input-type                 { font-size: 11px; font-family: monospace; color: #6b7280; margin-top: 2px; }
.workflows-app-viewer-input-default              { font-size: 12px; color: #374151; display: flex; align-items: center; gap: 6px; min-width: 0; }
.workflows-app-viewer-input-default-tag          { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; background: #f3f4f6; padding: 1px 6px; border-radius: 999px; flex-shrink: 0; }
.workflows-app-viewer-input-default-value        { font-family: monospace; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflows-app-viewer-input-options              { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.workflows-app-viewer-input-pill                 { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: #e0ecf8; color: #2c5282; border: 1px solid #b8d4f0; line-height: 1.4; }
.workflows-app-viewer-inputs-empty               { padding: 16px 4px; font-size: 12px; color: #6b7280; font-style: italic; }

/* Three-tab btn-justified row at the top of the profile panel —
   START Inputs / Reporters / Worker Family. Built on the segmented
   pill pattern from frontend-style.md, stretched full-width via
   flex: 1. The required/optional sub-toggle inside the inputs panel
   is the same pattern at smaller scale. */
.workflows-app-viewer-tabs                       { margin-bottom: 14px; }
.workflows-app-viewer-tabbar                     { display: flex; gap: 4px; padding: 4px; background: #f0f0f0; border-radius: 8px; margin-bottom: 14px; }
.workflows-app-viewer-tab                        { flex: 1 1 0; min-width: 0; padding: 8px 12px; border: none; background: transparent; color: #555; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.workflows-app-viewer-tab:hover                  { background: #e8e8e8; color: #333; }
.workflows-app-viewer-tab.is-active              { background: #ffffff; color: #2c5282; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.workflows-app-viewer-tab[disabled]              { color: #c4c4c4; cursor: not-allowed; }
.workflows-app-viewer-tab[disabled]:hover        { background: transparent; color: #c4c4c4; }
.workflows-app-viewer-tab-count                  { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(44,82,130,0.12); color: #2c5282; font-size: 10px; font-weight: 700; }
.workflows-app-viewer-tab[disabled] .workflows-app-viewer-tab-count { background: #e8e8e8; color: #c4c4c4; }
.workflows-app-viewer-tab.is-active .workflows-app-viewer-tab-count { background: #e0ecf8; }
.workflows-app-viewer-tabpanel                   { /* visibility driven by [hidden] */ }
.workflows-app-viewer-tabpanel[hidden]           { display: none; }
.workflows-app-viewer-tabs-empty                 { padding: 28px 8px; text-align: center; color: #6b7280; font-size: 12px; font-style: italic; }

/* Reporter rows — same icon+main layout as inputs but with a single
   bold title and the underlying type as monospace subtitle. */
.workflows-app-viewer-report-list                { display: flex; flex-direction: column; }
.workflows-app-viewer-report-row                 { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f3f4f6; align-items: start; }
.workflows-app-viewer-report-row:last-child      { border-bottom: none; }
.workflows-app-viewer-report-icon                { color: #d46b08; font-size: 13px; padding-top: 2px; }
.workflows-app-viewer-report-title               { font-size: 13px; font-weight: 700; color: #111827; word-break: break-word; }
.workflows-app-viewer-report-type                { font-size: 11px; font-family: monospace; color: #6b7280; margin-top: 2px; }

/* Worker family — flex-wrap of monospace pills, one per unique type. */
.workflows-app-viewer-workers-grid               { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.workflows-app-viewer-worker-pill                { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-family: monospace; background: #f0f4f8; color: #1e4d8a; border: 1px solid #b8d4f0; }

/* Sparkline pill — replaces the default-value text for vector/curve
   inputs. Click opens the full curve viewer overlay. */
.workflows-app-viewer-input-spark                { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; background: transparent; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.workflows-app-viewer-input-spark:hover          { background: #f3f4f6; border-color: #b8d4f0; }
.workflows-app-viewer-input-sparkline            { width: 80px; height: 20px; color: #2c5282; }
.workflows-app-viewer-input-sparkline polyline   { fill: none; stroke: currentColor; stroke-width: 1; }
.workflows-app-viewer-input-spark-count          { font-size: 10px; color: #6b7280; font-family: monospace; }

/* Full curve viewer — overlay on top of the modal (z-index above
   modal scrim) so users can drill into a single curve without losing
   the workflow context. */
.workflows-app-curve-scrim                       { position: fixed; inset: 0; background: rgba(15,23,42,0.65); display: flex; align-items: center; justify-content: center; z-index: 1500; }
.workflows-app-curve-shell                       { background: #ffffff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); width: 720px; max-width: 92vw; }
.workflows-app-curve-head                        { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.workflows-app-curve-title                       { font-size: 14px; font-weight: 600; color: #111827; }
.workflows-app-curve-close                       { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.workflows-app-curve-close:hover                 { color: #111827; }
.workflows-app-curve-body                        { padding: 16px; }
.workflows-app-curve-svg                         { width: 100%; height: 380px; display: block; }
.workflows-app-curve-meta                        { margin-top: 8px; font-size: 11px; color: #6b7280; font-family: monospace; }
.workflows-app-viewer-error       { padding: 40px 24px; text-align: center; color: #b91c1c; }

/* Workflow count badges — the small clickable pills next to each
   workflow's name on My Workflows. Two flavours, identical chrome:
   executions (fa-play-circle) and reports (fa-file-text-o). */
.workflow-counts                  { display: inline-block; font-size: 11px; padding: 1px 6px; margin-left: 6px; background: #f3f4f6; border-radius: 999px; color: #4b5563; text-decoration: none; line-height: 1.6; vertical-align: middle; cursor: pointer; user-select: none; }
.workflow-counts:hover            { background: #e5e7eb; color: #111827; text-decoration: none; }
.workflow-counts:focus            { outline: 2px solid #2c5282; outline-offset: 1px; }
.workflow-counts i                { margin-right: 3px; font-size: 10px; }

/* Slide-in sidebar (right edge) — drilldown for execution / report rows. */
.workflows-app-sidebar-scrim      { position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 9000; }
.workflows-app-sidebar-panel      { position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 90vw; background: #ffffff; z-index: 9001; display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 200ms ease-out; }
.workflows-app-sidebar-panel.is-open { transform: translateX(0); }
.workflows-app-sidebar-head       { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 6px 18px; border-bottom: 1px solid #e5e7eb; }
.workflows-app-sidebar-title      { font-size: 16px; font-weight: 600; color: #111827; }
.workflows-app-sidebar-close      { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.workflows-app-sidebar-close:hover { color: #111827; }
.workflows-app-sidebar-subtitle   { padding: 6px 18px 12px 18px; font-size: 12px; color: #6b7280; border-bottom: 1px solid #e5e7eb; word-break: break-word; }
.workflows-app-sidebar-body       { flex: 1 1 auto; overflow: auto; padding: 8px 0; }
.workflows-app-sidebar-loading    { padding: 40px 20px; text-align: center; color: #6b7280; font-size: 13px; }
.workflows-app-sidebar-empty      { padding: 60px 20px; text-align: center; color: #6b7280; font-size: 13px; }
.workflows-app-sidebar-empty i    { display: block; font-size: 28px; margin-bottom: 10px; color: #9ca3af; }
.workflows-app-sidebar-error      { padding: 40px 20px; text-align: center; color: #b91c1c; font-size: 13px; }
.workflows-app-sidebar-error i    { display: block; font-size: 24px; margin-bottom: 10px; }
.workflows-app-sidebar-row        { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid #f3f4f6; }
.workflows-app-sidebar-row:hover  { background: #f9fafb; }
.workflows-app-sidebar-row-main   { flex: 1 1 auto; min-width: 0; }
.workflows-app-sidebar-row-title  { font-size: 13px; font-weight: 600; color: #111827; word-break: break-word; }
.workflows-app-sidebar-row-title i { margin-right: 6px; color: #6b7280; }
.workflows-app-sidebar-row-meta   { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; font-size: 11px; color: #6b7280; }
.workflows-app-sidebar-row-meta i { margin-right: 3px; }
.workflows-app-sidebar-row-actions { flex: 0 0 auto; }
.workflows-app-sidebar-row-link   { font-size: 11px; padding: 2px 10px; background: #337ab7; color: #ffffff; border-radius: 4px; text-decoration: none; }
.workflows-app-sidebar-row-link:hover { background: #2e6da4; color: #ffffff; text-decoration: none; }
.workflows-app-sidebar-status     { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 500; border-radius: 4px; background: #e5e7eb; color: #374151; text-transform: uppercase; }
.workflows-app-sidebar-status-finished { background: #d1fae5; color: #065f46; }
.workflows-app-sidebar-status-failed   { background: #fee2e2; color: #991b1b; }
.workflows-app-sidebar-status-running  { background: #dbeafe; color: #1e40af; }
.workflows-app-sidebar-chip       { display: inline-block; padding: 1px 6px; background: #e5e7eb; color: #4b5563; border-radius: 999px; font-size: 10px; }

/* All Workers two-pane shell — slim group sidebar + main card grid */
.workflows-app-workers-shell        { display: flex; gap: 16px; align-items: flex-start; }
.workflows-app-workers-sidebar      { max-height: calc(100vh - 200px); overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; background: #ffffff; position: sticky; top: 16px; }
.workflows-app-workers-main         { min-width: 0; }
.workflows-app-workers-group        { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 10px; border: none; background: transparent; border-radius: 4px; font-size: 12px; color: #374151; cursor: pointer; text-align: left; }
.workflows-app-workers-group + .workflows-app-workers-group { margin-top: 2px; }
.workflows-app-workers-group:hover  { background: #f3f4f6; }
.workflows-app-workers-group.is-active { background: #337ab7; color: #ffffff; }
.workflows-app-workers-group-swatch { display: inline-block; width: 4px; height: 14px; border-radius: 2px; flex-shrink: 0; margin-right: 8px; background: #9ca3af; }
.workflows-app-workers-group-name   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.workflows-app-workers-group-count  { font-size: 11px; color: #6b7280; margin-left: 8px; flex-shrink: 0; }
.workflows-app-workers-group.is-active .workflows-app-workers-group-count { color: rgba(255,255,255,0.85); }

/* Sidebar — "Nested" checkbox (toggles flat ↔ nested grouping). */
.workflows-app-workers-modebar         { display: flex; padding: 4px 4px 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 6px; }
.workflows-app-workers-mode-checkbox   { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: #374151; cursor: pointer; user-select: none; }
.workflows-app-workers-mode-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Sidebar — discipline-tree rows (Nested mode). The chevron toggle and
   the label-row sit side-by-side; depth-N indents the whole row.
   Depth 0 = top-level group, depth 1 = leaf. Selecting the label uses
   the same .is-active blue as the flat groups. */
.workflows-app-workers-grouplist    { display: flex; flex-direction: column; }
.workflows-app-workers-tree-row     { display: flex; align-items: center; }
.workflows-app-workers-tree-row + .workflows-app-workers-tree-row { margin-top: 2px; }
.workflows-app-workers-tree-row--depth-1 { padding-left: 14px; }
.workflows-app-workers-tree-toggle  { width: 18px; height: 22px; border: none; background: transparent; color: #6b7280; padding: 0; cursor: pointer; flex-shrink: 0; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.workflows-app-workers-tree-toggle:hover { color: #1f2937; }
.workflows-app-workers-tree-spacer  { display: inline-block; width: 18px; flex-shrink: 0; }
.workflows-app-workers-tree-label   { flex: 1 1 auto; min-width: 0; }

/* Worker card with a colored left-edge accent — workers tab only.
   The 4px accent is rendered via the inline `box-shadow: inset 4px 0 0
   <color>` from the card template, so the card's regular border / padding
   / hover transitions stay untouched. The class is here mostly to hide
   the empty meta div that workers cards always emit. */
.workflows-app-card--accent .workflows-app-card-meta:empty { display: none; }
.workflows-app-card--accent .workflows-app-card-name       { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.2px; }
/* Worker-card action buttons are explicit, all-caps for visual rhythm
   with the upper-snake reference name in the header. */
.workflows-app-card--accent .workflows-app-card-action     { text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* Library Inspect modal — structured detail panel for a library workflow.
   Centered overlay; smaller than the canvas viewer modal. */
.workflows-app-inspect-scrim       { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 9100; }
.workflows-app-inspect-panel       { position: fixed; top: 5vh; left: 50%; transform: translateX(-50%); width: min(720px, 92vw); max-height: 90vh; background: #ffffff; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); display: flex; flex-direction: column; overflow: hidden; z-index: 9101; }
.workflows-app-inspect-head        { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.workflows-app-inspect-title       { font-size: 14px; font-weight: 600; color: #111827; }
.workflows-app-inspect-close       { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; }
.workflows-app-inspect-body        { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.workflows-app-inspect-loading     { padding: 28px 8px; text-align: center; color: #6b7280; font-size: 13px; }
.workflows-app-inspect-error       { padding: 28px 8px; text-align: center; color: #b91c1c; font-size: 13px; }
.workflows-app-inspect-desc        { font-size: 13px; color: #374151; line-height: 1.5; margin: 0 0 12px; }
.workflows-app-inspect-stats       { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 12px; background: #f9fafb; border-radius: 6px; font-size: 12px; color: #4b5563; margin-bottom: 14px; }
.workflows-app-inspect-stat .fa    { color: #9ca3af; margin-right: 4px; }
.workflows-app-inspect-section     { margin-top: 16px; }
.workflows-app-inspect-section-title { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px; }
.workflows-app-inspect-table       { width: 100%; border-collapse: collapse; font-size: 12px; }
.workflows-app-inspect-table th    { text-align: left; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb; padding: 4px 6px; }
.workflows-app-inspect-table td    { padding: 4px 6px; border-bottom: 1px solid #f3f4f6; color: #111827; }
.workflows-app-inspect-table code  { font-size: 11px; color: #6b7280; }
.workflows-app-inspect-select      { padding: 8px 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 8px; }
.workflows-app-inspect-select-label { font-size: 12px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.workflows-app-inspect-select-meta { font-weight: 400; color: #6b7280; margin-left: 8px; }
.workflows-app-inspect-options     { margin: 4px 0 0 18px; font-size: 12px; color: #4b5563; }
.workflows-app-inspect-list        { margin: 0; padding-left: 18px; font-size: 12px; color: #111827; }
.workflows-app-inspect-list-meta   { color: #6b7280; margin-left: 6px; }
.workflows-app-inspect-tags        { display: flex; flex-wrap: wrap; gap: 4px; }
.workflows-app-inspect-worker-tag  { font-size: 11px; padding: 1px 6px; background: #e0f2fe; color: #075985; border-radius: 3px; }
.workflows-app-inspect-foot        { margin-top: 14px; padding-top: 8px; border-top: 1px solid #f3f4f6; font-size: 10px; color: #9ca3af; text-align: right; }

/* My Workflows drill-in modal — opened from the # Executions / # Reports
 * cells. Centered ~720px panel, simple header + table body + close X.
 * Mirrors the look of inspect / sidebar but as a centered overlay. */
.wf-drill-modal-root            { position: fixed; inset: 0; z-index: 9100; display: block; }
.wf-drill-modal-scrim           { position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 9100; }
/* Full-height right-side drawer (was a centered ~720px card). */
.wf-drill-modal-panel           { position: fixed; top: 0; right: 0; height: 100vh; width: 1180px; max-width: 96vw; background: #ffffff; z-index: 9101; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0,0,0,0.18); border-radius: 0; overflow: hidden; }
.wf-drill-modal-head            { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.wf-drill-modal-title           { font-size: 14px; font-weight: 600; color: #111827; flex: 1 1 auto; min-width: 0; word-break: break-word; }
.wf-drill-modal-title-sep       { color: #9ca3af; margin: 0 6px; font-weight: 400; }
.wf-drill-modal-count           { color: #6b7280; font-weight: 500; margin-left: 6px; }
.wf-drill-modal-close           { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.wf-drill-modal-close:hover     { color: #111827; }
.wf-drill-modal-body            { flex: 1 1 auto; overflow: auto; padding: 0; }

.wf-drill-modal-loading         { padding: 48px 20px; text-align: center; color: #6b7280; font-size: 13px; }
.wf-drill-modal-loading i       { margin-right: 6px; color: #9ca3af; }
.wf-drill-modal-empty           { padding: 60px 20px; text-align: center; color: #6b7280; font-size: 13px; }
.wf-drill-modal-empty i         { display: block; font-size: 28px; margin-bottom: 10px; color: #9ca3af; }
.wf-drill-modal-error           { padding: 40px 20px; text-align: center; color: #b91c1c; font-size: 13px; }
.wf-drill-modal-error i         { margin-right: 6px; }

.wf-drill-modal-table           { width: 100%; border-collapse: collapse; font-size: 12px; }
.wf-drill-modal-table thead th  { background: #f9fafb; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.wf-drill-modal-table tbody td  { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; color: #111827; vertical-align: middle; }
.wf-drill-modal-table tbody tr:hover { background: #f9fafb; }
.wf-drill-modal-table tbody tr:last-child td { border-bottom: none; }
.wf-drill-modal-actions-col     { text-align: right; width: 1%; white-space: nowrap; }

.wf-drill-modal-status          { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; background: #f3f4f6; color: #4b5563; }
.wf-drill-modal-status-completed,
.wf-drill-modal-status-success,
.wf-drill-modal-status-done     { background: #d4edda; color: #155724; }
.wf-drill-modal-status-failed,
.wf-drill-modal-status-error    { background: #f8d7da; color: #721c24; }
.wf-drill-modal-status-running,
.wf-drill-modal-status-pending,
.wf-drill-modal-status-queued   { background: #fff3cd; color: #856404; }

.wf-drill-modal-view-btn        { display: inline-block; padding: 4px 12px; font-size: 11px; font-weight: 600; color: #ffffff; background: #2c5282; border-radius: 4px; text-decoration: none; transition: background 0.2s ease; cursor: pointer; border: none; }
.wf-drill-modal-view-btn:hover  { background: #1f3d68; color: #ffffff; text-decoration: none; }
.wf-drill-modal-view-btn.is-active { background: #155f34; }
.wf-drill-modal-view-btn i      { margin-right: 4px; }

/* Per-row Share button (secondary action; sits next to View). */
.wf-drill-modal-share-btn       { display: inline-block; padding: 4px 10px; font-size: 11px; font-weight: 600; color: #2c5282; background: #ffffff; border: 1px solid #c6d9ec; border-radius: 4px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin-left: 6px; }
.wf-drill-modal-share-btn:hover { background: #e0ecf8; border-color: #90b4e0; }
.wf-drill-modal-share-btn i     { margin-right: 4px; }
/* "shared with me" badge — read-only marker on rows the user doesn't own. */
.wf-drill-modal-shared-badge    { display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 600; color: #6c3483; background: #e8daef; border-radius: 4px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.3px; vertical-align: middle; }
.wf-drill-modal-shared-badge i  { margin-right: 4px; }

/* Share dialog (per-execution share). Centered overlay with a small
   typeahead, recipient chips, optional message. */
.wf-drill-modal-share-dialog                { position: fixed; inset: 0; z-index: 9300; }
.wf-drill-modal-share-dialog-scrim          { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.wf-drill-modal-share-dialog-shell          { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); width: 480px; max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.wf-drill-modal-share-dialog-head           { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.wf-drill-modal-share-dialog-title          { font-size: 13px; font-weight: 600; color: #111827; }
.wf-drill-modal-share-dialog-close          { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.wf-drill-modal-share-dialog-close:hover    { color: #111827; }
.wf-drill-modal-share-dialog-body           { flex: 1 1 auto; padding: 14px 16px; overflow: auto; }
.wf-drill-modal-share-dialog-foot           { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid #e5e7eb; background: #f9fafb; }
.wf-drill-modal-share-dialog-label          { display: block; font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; }

.wf-drill-modal-share-recipients            { display: flex; flex-wrap: wrap; gap: 4px; min-height: 24px; margin-bottom: 6px; }
.wf-drill-modal-share-chip                  { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; background: #e0ecf8; color: #2c5282; border-radius: 12px; font-size: 11px; font-weight: 500; }
.wf-drill-modal-share-chip-x                { background: none; border: none; padding: 0 4px; cursor: pointer; color: #2c5282; font-size: 14px; line-height: 1; border-radius: 50%; }
.wf-drill-modal-share-chip-x:hover          { background: #c6d9ec; }

.wf-drill-modal-share-typeahead-wrap        { position: relative; }
.wf-drill-modal-share-input                 { width: 100%; padding: 6px 10px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 4px; outline: none; }
.wf-drill-modal-share-input:focus           { border-color: #2c5282; box-shadow: 0 0 0 1px rgba(44,82,130,0.2); }
.wf-drill-modal-share-results               { position: absolute; left: 0; right: 0; top: calc(100% + 2px); max-height: 200px; overflow: auto; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 1; }
.wf-drill-modal-share-result                { padding: 6px 10px; font-size: 12px; cursor: pointer; }
.wf-drill-modal-share-result:hover          { background: #e0ecf8; color: #2c5282; }
.wf-drill-modal-share-result i              { margin-right: 6px; color: #888; }
.wf-drill-modal-share-noresults             { padding: 6px 10px; font-size: 12px; color: #9ca3af; font-style: italic; }

.wf-drill-modal-share-message               { width: 100%; padding: 6px 10px; font-size: 12px; border: 1px solid #d1d5db; border-radius: 4px; outline: none; resize: vertical; min-height: 48px; }
.wf-drill-modal-share-message:focus         { border-color: #2c5282; box-shadow: 0 0 0 1px rgba(44,82,130,0.2); }

/* Inline detail expansion under an executions row: renders the
   start_inputs key/value table + a pretty-printed JSON of any other
   fields the run worker stamped onto execution.data. */
.wf-drill-modal-exec-detail-cell  { background: #f9fafb; padding: 10px 16px; border-bottom: 1px solid #e5e7eb !important; }
.wf-drill-modal-exec-detail-section { margin-bottom: 12px; }
.wf-drill-modal-exec-detail-section:last-child { margin-bottom: 0; }
.wf-drill-modal-exec-detail-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #6b7280; margin-bottom: 6px; }
.wf-drill-modal-exec-kv           { width: 100%; border-collapse: collapse; font-size: 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.wf-drill-modal-exec-kv thead th  { background: #f3f4f6; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; padding: 6px 10px; text-align: left; }
.wf-drill-modal-exec-kv tbody td  { padding: 6px 10px; border-top: 1px solid #f3f4f6; vertical-align: top; }
.wf-drill-modal-exec-kv-name      { font-weight: 600; color: #111827; white-space: nowrap; width: 25%; }
.wf-drill-modal-exec-kv-type      { color: #6b7280; font-size: 11px; white-space: nowrap; width: 15%; }
.wf-drill-modal-exec-kv-value     { color: #1f2937; word-break: break-word; }
.wf-drill-modal-exec-kv-value pre { margin: 0; padding: 6px 8px; background: #f3f4f6; border-radius: 4px; font-size: 11px; max-height: 240px; overflow: auto; white-space: pre-wrap; }
.wf-drill-modal-exec-meta         { margin: 0; padding: 8px 10px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 11px; max-height: 180px; overflow: auto; white-space: pre-wrap; color: #4b5563; }
.wf-drill-modal-exec-empty        { color: #9ca3af; font-size: 12px; padding: 12px; text-align: center; }
.wf-drill-modal-id-col            { width: 70px; }
.wf-drill-modal-exec-id           { display: inline-block; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }

/* Phase 1 — exec-detail bar (mode badge, clipped indicator, re-run btn) */
.wf-drill-modal-exec-detail-bar    { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 8px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; }
.wf-drill-modal-exec-detail-spacer { flex: 1 1 auto; }
.wf-drill-modal-exec-mode-badge    { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; background: #e0ecf8; color: #2c5282; }
.wf-drill-modal-exec-mode-summary  { background: #f3f4f6; color: #6b7280; }
.wf-drill-modal-exec-mode-compact  { background: #e0ecf8; color: #2c5282; }
.wf-drill-modal-exec-mode-full     { background: #d4edda; color: #155724; }
.wf-drill-modal-exec-clipped-badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; background: #fef3cd; color: #856404; }
.wf-drill-modal-exec-rerun-btn     { font-size: 11px; }
.wf-drill-modal-exec-rerun-btn i   { margin-right: 4px; }

/* Per-row mode tag inside the kv table (next to Type) */
.wf-drill-modal-exec-kv-type .wf-drill-modal-exec-mode-badge { font-size: 8px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }

/* Curve cell — clickable sparkline. Click → opens enlarged modal. */
.wf-drill-modal-exec-curve         { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin-right: 8px; cursor: zoom-in; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; }
.wf-drill-modal-exec-curve:hover   { background: #f3f4f6; }
.wf-drill-modal-exec-curve:focus   { outline: 2px solid #2c5282; outline-offset: 1px; }

/* Centered modal overlay for the enlarged curve plot. */
.wf-drill-modal-curve-enlarge          { position: fixed; inset: 0; z-index: 9200; }
.wf-drill-modal-curve-enlarge-scrim    { position: absolute; inset: 0; background: rgba(15,23,42,0.45); }
.wf-drill-modal-curve-enlarge-shell    { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); width: 1320px; height: 86vh; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.wf-drill-modal-curve-enlarge-head     { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.wf-drill-modal-curve-enlarge-title    { font-size: 14px; font-weight: 600; color: #111827; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-drill-modal-curve-enlarge-close    { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 4px; }
.wf-drill-modal-curve-enlarge-close:hover { color: #111827; }
.wf-drill-modal-curve-enlarge-body     { display: flex; flex: 1 1 auto; min-height: 0; }
.wf-drill-modal-curve-enlarge-sidebar  { width: 240px; border-right: 1px solid #e5e7eb; background: #f9fafb; padding: 10px 8px; overflow: auto; }
.wf-drill-modal-curve-enlarge-plot     { flex: 1 1 auto; padding: 16px; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.wf-drill-modal-curve-enlarge-svg      { background: #ffffff; max-width: 100%; height: auto; }
/* Newton-rendered chart host: stretches to fill the plot pane and gives
   Newton's computeDimensions() a measurable min-height so the canvas has
   non-zero size on first render. */
.wf-drill-modal-curve-enlarge-newton   { flex: 1 1 auto; align-self: stretch; width: 100%; min-height: 540px; min-width: 0; }
.wf-drill-modal-curve-enlarge-foot     { padding: 8px 18px; border-top: 1px solid #e5e7eb; background: #f9fafb; font-size: 11px; color: #6b7280; }

/* Sidebar overlay rows */
.wf-drill-modal-curve-overlay-row      { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; color: #1f2937; transition: background 0.15s ease; margin-bottom: 2px; }
.wf-drill-modal-curve-overlay-row:hover { background: #ffffff; }
.wf-drill-modal-curve-overlay-row.is-primary { background: #ffffff; cursor: default; }
.wf-drill-modal-curve-overlay-row input { margin: 0; }
.wf-drill-modal-curve-overlay-swatch   { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.wf-drill-modal-curve-overlay-name     { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sparkline + curve bounds */
.wf-drill-modal-exec-sparkline     { display: inline-block; vertical-align: middle; margin-right: 6px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 3px; }
.wf-drill-modal-exec-kv-meta       { font-size: 10px; color: #6b7280; }
.wf-drill-modal-exec-kv-empty      { color: #9ca3af; font-style: italic; }

/* Dataset summary — column chips + first-N-rows preview */
.wf-drill-modal-exec-ds            { display: flex; flex-direction: column; gap: 4px; }
.wf-drill-modal-exec-ds-cols       { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wf-drill-modal-exec-ds-col        { display: inline-block; padding: 2px 6px; background: #f3f4f6; border-radius: 4px; font-size: 10px; color: #1f2937; font-family: 'SF Mono', Menlo, Consolas, monospace; }
.wf-drill-modal-exec-ds-coltype    { color: #9ca3af; font-size: 9px; }
.wf-drill-modal-exec-ds-head       { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 4px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 4px; }
.wf-drill-modal-exec-ds-head th    { background: #f9fafb; color: #6b7280; font-weight: 600; padding: 4px 6px; text-align: left; font-size: 9px; text-transform: uppercase; }
.wf-drill-modal-exec-ds-head td    { padding: 3px 6px; border-top: 1px solid #f3f4f6; color: #1f2937; font-family: 'SF Mono', Menlo, Consolas, monospace; }

/* File pill */
.wf-drill-modal-exec-file-pill     { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #f3f4f6; border-radius: 999px; font-size: 11px; color: #1f2937; }
.wf-drill-modal-exec-file-pill i   { color: #2c5282; }

/* Inline pre block for long text / json */
.wf-drill-modal-exec-kv-pre        { margin: 0; padding: 6px 8px; background: #f3f4f6; border-radius: 4px; font-size: 11px; max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; color: #1f2937; }

/* Nested keyvalue list */
.wf-drill-modal-exec-kv-nested     { margin: 0; padding-left: 16px; font-size: 11px; }
.wf-drill-modal-exec-kv-nested li  { margin-bottom: 2px; }
.wf-drill-modal-exec-kv-nested code { font-size: 11px; background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }

/* ----- Per-case workflow diagrams (graphs) carousel ----- */
.workflows-app-card-graphs-btn .fa { margin-right: 4px; }

.workflows-app-graphs-scrim   { position: fixed; inset: 0; background: rgba(15,23,42,0.78); display: flex; align-items: center; justify-content: center; z-index: 9050; }
.workflows-app-graphs-shell   { background: #fff; border-radius: 10px; width: 96vw; height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.workflows-app-graphs-head    { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; gap: 12px; }
.workflows-app-graphs-title   { font-size: 14px; font-weight: 600; color: #111827; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflows-app-graphs-counter { color: #6b7280; font-weight: 400; font-size: 12px; margin-left: 6px; }
.workflows-app-graphs-zoom-controls { display: inline-flex; gap: 4px; flex-shrink: 0; }
.workflows-app-graphs-close   { font-size: 16px; line-height: 1; padding: 2px 8px !important; }

.workflows-app-graphs-body    { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; position: relative; background: #f8fafc; }
.workflows-app-graphs-body .carousel,
.workflows-app-graphs-body .carousel-inner,
.workflows-app-graphs-body .carousel-inner > .item { height: 100%; }

/* Each slide: a viewport. Image is positioned center and transformed. */
.workflows-app-graphs-stage   { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; }
.workflows-app-graphs-stage:active { cursor: grabbing; }
.workflows-app-graphs-img     { max-width: 90%; max-height: 90%; object-fit: contain; transform-origin: center center; transition: transform 0.05s linear; user-select: none; -webkit-user-drag: none; }

/* Caption overlay at the bottom of each slide */
.workflows-app-graphs-caption { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(15,23,42,0.7); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; pointer-events: none; max-width: 80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* Carousel chrome — recolor for dark backdrop */
.workflows-app-graphs-body .carousel-control { background: rgba(15,23,42,0.4); width: 6%; opacity: 0.85; transition: opacity 0.2s ease, background 0.2s ease; }
.workflows-app-graphs-body .carousel-control:hover { opacity: 1; background: rgba(15,23,42,0.6); }
.workflows-app-graphs-body .carousel-control .fa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #fff; }
.workflows-app-graphs-body .carousel-indicators { bottom: 50px; }
.workflows-app-graphs-body .carousel-indicators li { background: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.6); }
.workflows-app-graphs-body .carousel-indicators li.active { background: #fff; }

/* Examples tab — source badge + worker pills row above the description.
   Curated and per-worker demos use distinct accent colors to set them
   apart at a glance, mirroring the `source` chip rail in the filter. */
.workflows-app-example-source { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-right: 6px; vertical-align: middle; }
.workflows-app-example-source--curated     { background: #d6f0ee; color: #1f6e6a; }
.workflows-app-example-source--worker_demo { background: #e4e8ed; color: #4a5566; }
.workflows-app-example-workers { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px 0; }
.workflows-app-example-worker-pill { display: inline-block; padding: 1px 7px; border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; color: #334155; font-size: 11px; font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.workflows-app-example-worker-pill:hover, .workflows-app-example-worker-pill:focus { background: #2c5282; border-color: #2c5282; color: #ffffff; text-decoration: none; }
.workflows-app-examples-subtitle { padding: 0 0 10px 0; font-size: 12px; color: #6b7280; line-height: 1.5; }
.workflows-app-examples-tip { padding: 0 0 12px 0; font-size: 11px; font-style: italic; color: #9ca3af; line-height: 1.5; }

/* Library page filter row — search 30% / disciplines 70%. Scoped to
   the library page so the workers tab keeps its existing search +
   chip-cluster layout. */
.workflows-app-library-page .workflows-app-filter-row { flex-wrap: nowrap; gap: 14px; align-items: stretch; }
.workflows-app-library-page .workflows-app-search-group { flex: 0 0 30%; max-width: none; min-width: 0; }
.workflows-app-library-page .workflows-app-filter-chips { flex: 1 1 70%; gap: 8px; flex-wrap: wrap; min-width: 0; }
.workflows-app-library-page .workflows-app-filter-chips > .workflows-app-chip-rail { flex: 1 1 100%; min-width: 0; }
.workflows-app-library-page .workflows-app-result-count { flex: 0 0 auto; }

/* Examples page filter row — keep Search, Sort and Source on a single
   line with generous spacing between the three groups. Scoped to the
   examples page so other tabs keep their own layout. */
.workflows-app-examples-page .workflows-app-filter-row { flex-wrap: nowrap; gap: 24px; align-items: center; }
.workflows-app-examples-page .workflows-app-search-group { flex: 0 0 300px; max-width: 340px; }
.workflows-app-examples-page .workflows-app-filter-chips { flex: 0 1 auto; flex-wrap: nowrap; gap: 32px; }
.workflows-app-examples-page .workflows-app-filter-chips > .workflows-app-chip-rail { flex: 0 0 auto; flex-wrap: nowrap; }
/* Keep chip labels (e.g. "Per-Worker Demo") on one line at full width. */
.workflows-app-examples-page .workflows-app-chip { white-space: nowrap; }
.workflows-app-examples-page .workflows-app-result-count { flex: 0 0 auto; margin-left: auto; }

/* /stylesheets/admin_userworkers.css */
/* Admin -> Workflow: user-defined workers. Follows .claude/rules/frontend-style.md */

.udw-admin                { display: flex; flex-direction: column; gap: 12px; }
.udw-admin-bar            { display: flex; align-items: center; gap: 12px; }
.udw-admin-runtime        { font-size: 11px; color: #856404; background: #fef3cd; padding: 4px 10px; border-radius: 4px; }
.udw-admin-runtime:empty  { display: none; }
.udw-admin-body           { display: flex; gap: 16px; align-items: flex-start; }

.udw-admin-list           { flex: 0 0 280px; display: flex; flex-direction: column; gap: 6px; }
.udw-empty                { font-size: 12px; color: #999; padding: 10px; }
.udw-row                  { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; }
.udw-row:hover            { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.udw-row.is-active        { border-color: #2c5282; background: #e0ecf8; }
.udw-row-name             { font-family: Menlo, Consolas, monospace; font-size: 12px; color: #2c5282; font-weight: 600; }
.udw-row-meta             { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.3px; }
.udw-row-label            { font-size: 11px; color: #555; }

.udw-badge                { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
.udw-badge--draft         { background: #fff3cd; color: #856404; }
.udw-badge--published     { background: #d4edda; color: #155724; }
.udw-badge--disabled      { background: #f8d7da; color: #721c24; }

.udw-admin-editor         { flex: 1 1 0; min-width: 0; }
.udw-form                 { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.udw-form-head            { display: flex; align-items: center; gap: 10px; }
.udw-form-head h4         { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: #333; }
.udw-field-row            { display: flex; gap: 12px; flex-wrap: wrap; }
.udw-field-row > label    { flex: 1 1 180px; }
.udw-form label           { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; color: #888; }
.udw-form label.udw-block { width: 100%; }
.udw-form input,
.udw-form select,
.udw-form textarea        { border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 13px; color: #111827; text-transform: none; letter-spacing: normal; font-weight: 400; }
.udw-form input:focus,
.udw-form select:focus,
.udw-form textarea:focus  { outline: none; border-color: #337ab7; box-shadow: 0 0 0 2px rgba(51,122,183,0.15); }
.udw-code                 { font-family: Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.udw-req                  { color: #c14b6a; margin-left: 2px; }
.udw-hint                 { font-size: 10px; color: #999; text-transform: none; letter-spacing: normal; font-weight: 400; }

.udw-actions              { display: flex; gap: 8px; align-items: center; padding-top: 4px; border-top: 1px solid #f0f0f0; }
.udw-actions .udw-right   { margin-left: auto; }
.udw-result               { font-size: 12px; padding: 8px 10px; border-radius: 6px; background: #d4edda; color: #155724; }
.udw-result.is-error      { background: #f8d7da; color: #721c24; }

/* /stylesheets/d3view.chart-typography.css */
/* d3VIEW unified chart typography
 *
 * Single source of truth for text inside every chart in the platform —
 * Newton, Simlytiks (vBar, hBar, scatter), native SVG renderers in
 * BINOUT Explorer, Reporter, and any future visualizer.
 *
 * Loaded once via stylesheets/style.json so axis labels, tick numerals,
 * and legend text all render with the same Inter family + size scale
 * regardless of which engine drew the SVG.
 *
 * Per-chart themes (e.g. simlytiks/themes/compact.css) can still
 * override individual rules under their own scope.
 */

/* Tick numerals (Newton, vBar, hBar, native, anywhere d3.axis renders) */
svg .axis text,
svg g.x.axis text,
svg g.y.axis text,
svg g.x_axis_group text,
svg g.y_axis_group text,
svg .tick text,
.tick text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 10px;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    fill: #555 !important;
}

/* Axis labels (xLabel / yLabel / yLabel2 / yLabel3 / yLowerLabel / xLabel2) */
svg text.xLabel,
svg text.yLabel,
svg text.yLabel2,
svg text.yLabel3,
svg text.xLabel2,
svg text.yLowerLabel,
.be-lp-axis-label,
.be-lp-chart text.be-lp-axis-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 10px;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    fill: #333 !important;
}

/* Legend text — chip labels in Newton + Simlytiks share class names */
.legend-item .curve-name,
.legend-item .legend-text,
.legend-item text,
.legends-list .legend-item,
.legends-wrapper .legend-item {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 10px;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
}

/* Tooltip text inside chart SVGs */
svg .chart-tooltip text,
svg .be-tooltip text,
.viz-tooltip,
.simlytiks-tooltip {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 11px !important;
}

/* In-canvas annotations / data labels */
svg text.data-label,
svg text.bar-label,
svg text.value-label,
.be-lp-axis-tick {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 10px !important;
    fill: #555;
}

/* /stylesheets/appviewer/tabbar-base.css */
.av-tabs-host {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.av-tabs-bar {
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    user-select: none;
    border-bottom: 1px solid #e5e7eb;
    background: #ebeef2;
}

.av-tabs-strip {
    display: flex;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.av-tabs-strip::-webkit-scrollbar { display: none; }

.av-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 32px;
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    border: none;
    background: transparent;
    font-family: inherit;
    min-width: 60px;
    max-width: 240px;
}
.av-tab .av-tab-icon { font-size: 11px; flex: 0 0 auto; }
.av-tab .av-tab-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.av-tab .av-tab-dirty {
    color: #d97757;
    font-size: 10px;
    display: none;
}
.av-tab.av-dirty .av-tab-dirty { display: inline; }
.av-tab.av-dirty .av-tab-close { display: none; }
.av-tab .av-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #9ca3af;
    font-size: 11px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.av-tab:hover .av-tab-close { opacity: 1; }
.av-tab .av-tab-close:hover { background: rgba(0,0,0,0.08); color: #111827; }
.av-tab.av-pinned .av-tab-close { display: none; }
.av-tab.av-pinned { padding: 0 10px; min-width: auto; }
.av-tab.av-pinned .av-tab-label { display: none; }
.av-tab.av-pinned .av-tab-icon { font-size: 13px; }

.av-tab.av-dragging { opacity: 0.4; }
.av-tab.av-drop-before { box-shadow: inset 2px 0 0 #2c5282; }
.av-tab.av-drop-after  { box-shadow: inset -2px 0 0 #2c5282; }

.av-tabs-overflow {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-left: 1px solid #e5e7eb;
    cursor: pointer;
    color: #6b7280;
    position: relative;
    background: #ebeef2;
}
.av-tabs-overflow.av-active { display: inline-flex; }
.av-tabs-overflow:hover { color: #2c5282; }
.av-tabs-overflow .av-count-pill {
    position: absolute;
    top: 4px;
    right: 2px;
    background: #dc2626;
    color: #fff;
    border-radius: 10px;
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.av-tabs-actions {
    display: flex;
    align-items: center;
    border-left: 1px solid #e5e7eb;
    background: #ebeef2;
}
.av-tabs-actions .av-ta-btn {
    background: transparent;
    border: none;
    padding: 0 10px;
    height: 32px;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
}
.av-tabs-actions .av-ta-btn:hover { color: #2c5282; background: rgba(0,0,0,0.04); }

.av-overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 320px;
    max-width: 420px;
    max-height: 420px;
    display: none;
    z-index: 100;
    flex-direction: column;
    overflow: hidden;
}
.av-overflow-menu.open { display: flex; }
.av-overflow-menu .av-om-search {
    padding: 8px;
    border-bottom: 1px solid #e5e7eb;
}
.av-overflow-menu .av-om-search input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
}
.av-overflow-menu .av-om-list {
    overflow-y: auto;
    padding: 4px 0;
}
.av-overflow-menu .av-om-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #111827;
}
.av-overflow-menu .av-om-item:hover { background: #e0ecf8; }
.av-overflow-menu .av-om-item.av-active { background: #e0ecf8; color: #2c5282; font-weight: 600; }
.av-overflow-menu .av-om-item .av-om-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-overflow-menu .av-om-item .av-om-x { color: #9ca3af; font-size: 10px; padding: 2px 4px; border-radius: 3px; }
.av-overflow-menu .av-om-item .av-om-x:hover { background: rgba(0,0,0,0.08); color: #111827; }
.av-overflow-menu .av-om-empty { padding: 20px; text-align: center; color: #6b7280; font-size: 12px; }

.av-ctx-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 200px;
    z-index: 200;
    padding: 4px 0;
    font-size: 12px;
    display: none;
}
.av-ctx-menu.open { display: block; }
.av-ctx-menu .av-ctx-item {
    padding: 6px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111827;
}
.av-ctx-menu .av-ctx-item:hover { background: #e0ecf8; }
.av-ctx-menu .av-ctx-item.av-ctx-disabled { color: #9ca3af; pointer-events: none; }
.av-ctx-menu .av-ctx-shortcut { color: #9ca3af; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.av-ctx-menu .av-ctx-divider { height: 1px; background: #e5e7eb; margin: 4px 0; }

.av-switcher-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    z-index: 500;
}
.av-switcher-backdrop.open { display: flex; }
.av-switcher {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    min-width: 520px;
    max-width: 640px;
    width: 90%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.av-switcher .av-sw-search {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}
.av-switcher .av-sw-search i { color: #9ca3af; margin-right: 10px; }
.av-switcher .av-sw-search input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
}
.av-switcher .av-sw-kbd {
    font-size: 10px;
    color: #9ca3af;
    padding: 2px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}
.av-switcher .av-sw-list { max-height: 50vh; overflow-y: auto; padding: 6px 0; }
.av-switcher .av-sw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}
.av-switcher .av-sw-item:hover, .av-switcher .av-sw-item.av-active { background: #e0ecf8; }
.av-switcher .av-sw-item .av-sw-icon { color: #6b7280; font-size: 12px; width: 16px; text-align: center; }
.av-switcher .av-sw-item .av-sw-name { flex: 1 1 auto; font-weight: 500; color: #111827; }
.av-switcher .av-sw-item .av-sw-route { color: #6b7280; font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.av-switcher .av-sw-item mark { background: #fef08a; color: #111827; border-radius: 2px; padding: 0 1px; }
.av-switcher .av-sw-empty { padding: 30px; text-align: center; color: #6b7280; font-size: 13px; }

/* /stylesheets/appviewer/apptable.css */
.av-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow: hidden;
    background: #fff;
}

.av-toolbar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    gap: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.av-toolbar-left {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    max-width: 720px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.av-toolbar-left:focus-within { border-color: #2c5282; box-shadow: 0 0 0 2px #e0ecf8; }

.av-search-ai-toggle,
.av-search-filter-toggle {
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.3px;
}
.av-search-ai-toggle { border-right: 1px solid #e5e7eb; }
.av-search-filter-toggle { border-left: 1px solid #e5e7eb; position: relative; }
.av-search-ai-toggle:hover,
.av-search-filter-toggle:hover { background: #e8e8e8; color: #111827; }
.av-search-ai-toggle.av-active {
    background: linear-gradient(135deg, #6c3483 0%, #2c5282 100%);
    color: #fff;
}

.av-search-filter-badge {
    background: #2c5282;
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 700;
}

.av-search-input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #111827;
    min-width: 0;
}

.av-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.av-toolbar-summary {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.av-analytics-toggle {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.av-analytics-toggle:hover { background: #f3f4f6; }

.av-cols-toggle {
    border: 1px solid #d1d5db; background: #fff; color: #6b7280;
    padding: 5px 9px; border-radius: 5px; font-size: 12px; cursor: pointer;
}
.av-cols-toggle:hover { background: #f3f4f6; color: #111827; }

/* ── column config panel ── */
.av-colcfg-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.25); z-index: 1060; }
.av-table.av-colcfg-open .av-colcfg-backdrop { display: block; }
.av-colcfg {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 460px; max-width: 94vw; max-height: 80vh; z-index: 1061;
    background: #fff; border: 1px solid #d1d5db; border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22); flex-direction: column; overflow: hidden;
}
.av-table.av-colcfg-open .av-colcfg { display: flex; }
.av-colcfg-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; font-size: 13px; font-weight: 600; color: #111827; }
.av-colcfg-close { background: none; border: none; color: #888; cursor: pointer; font-size: 15px; }
.av-colcfg-close:hover { color: #111827; }
.av-colcfg-body { flex: 1 1 auto; overflow: auto; padding: 6px 0; }
.av-cc-row { display: grid; grid-template-columns: 1fr 78px 84px; align-items: center; padding: 5px 16px; font-size: 12.5px; }
.av-cc-row:hover { background: #f9fafb; }
.av-cc-label { color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-cc-cb { font-size: 11px; color: #6b7280; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.av-colcfg-foot { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid #e5e7eb; }
.av-colcfg-reset { background: none; border: 1px solid #d1d5db; color: #6b7280; padding: 6px 12px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.av-colcfg-save { background: #2c5282; border: 1px solid #2c5282; color: #fff; padding: 6px 16px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.av-colcfg-save:hover { background: #24456e; }

.av-table[data-tabs-theme="vscode"] .av-colcfg { background: #252526; border-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-colcfg-head { color: #d4d4d4; border-bottom-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-cc-row:hover { background: #2a2d2e; }
.av-table[data-tabs-theme="vscode"] .av-cc-label { color: #d4d4d4; }
.av-table[data-tabs-theme="vscode"] .av-colcfg-foot { border-top-color: #3c3c3c; }

.av-analytics-panel {
    border-bottom: 1px solid #e5e7eb;
    padding: 14px 16px;
    background: #f9fafb;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.av-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.av-analytics-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
}
.av-analytics-card-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
    margin-bottom: 6px;
}
.av-analytics-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.av-analytics-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #e0ecf8;
    color: #2c5282;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.av-analytics-chip:hover { background: #d0deef; }
.av-analytics-chip strong { font-weight: 700; }

.av-grid {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}
.av-grid-placeholder {
    padding: 40px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
}

.av-fb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.av-fb-table thead th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
    color: #6b7280;
    position: sticky;
    top: 0;
    z-index: 2;
}
.av-fb-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
    vertical-align: middle;
}
.av-fb-table tbody tr { cursor: pointer; }
.av-fb-table tbody tr:hover { background: #f3f4f6; }
.av-fb-id { color: #9ca3af; font-family: 'JetBrains Mono', monospace; font-size: 11px; width: 60px; }
.av-fb-name a { color: #2c5282; text-decoration: none; font-weight: 500; }
.av-fb-name a:hover { text-decoration: underline; }
.av-fb-empty { color: #d1d5db; }
.av-fb-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #e5e7eb;
    color: #6b7280;
}
.av-fb-status-finished       { background: #d4edda; color: #155724; }
.av-fb-status-failed         { background: #f8d7da; color: #721c24; }
.av-fb-status-failed_to_submit { background: #f8d7da; color: #721c24; }
.av-fb-status-new            { background: #e0ecf8; color: #2c5282; }
.av-fb-status-solving        { background: #fff3cd; color: #856404; }
.av-fb-status-applying_templates { background: #fff3cd; color: #856404; }
.av-fb-status-unfinished     { background: #f3f4f6; color: #6b7280; }

.av-table[data-tabs-theme="vscode"] { background: #1e1e1e; }
.av-table[data-tabs-theme="vscode"] .av-toolbar { background: #252526; border-bottom-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-toolbar-left { background: #3c3c3c; border-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-search-input { background: #3c3c3c; color: #d4d4d4; }
.av-table[data-tabs-theme="vscode"] .av-search-input::placeholder { color: #8a8a8a; }
.av-table[data-tabs-theme="vscode"] .av-search-ai-toggle,
.av-table[data-tabs-theme="vscode"] .av-search-filter-toggle { background: #2d2d30; color: #cccccc; border-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-toolbar-summary { color: #9da5b4; }
.av-table[data-tabs-theme="vscode"] .av-analytics-toggle { background: #2d2d30; color: #d4d4d4; border-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-analytics-panel { background: #252526; border-bottom-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-analytics-card { background: #2d2d30; border-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-analytics-card-lbl { color: #9da5b4; }
.av-table[data-tabs-theme="vscode"] .av-fb-table thead th { background: #2d2d30; color: #9da5b4; border-bottom-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-fb-table tbody td { color: #d4d4d4; border-bottom-color: #2a2a2a; }
.av-table[data-tabs-theme="vscode"] .av-fb-table tbody tr:hover { background: #2a2d2e; }
.av-table[data-tabs-theme="vscode"] .av-fb-name a { color: #4daafc; }
.av-table[data-tabs-theme="vscode"] .av-fb-id { color: #6a737d; }

.av-table[data-tabs-theme="compact"] .av-toolbar { padding: 4px 8px; gap: 8px; }
.av-table[data-tabs-theme="compact"] .av-search-input { padding: 3px 8px; font-size: 12px; }
.av-table[data-tabs-theme="compact"] .av-search-ai-toggle,
.av-table[data-tabs-theme="compact"] .av-search-filter-toggle { padding: 0 7px; font-size: 10px; }
.av-table[data-tabs-theme="compact"] .av-fb-table { font-size: 11.5px; }
.av-table[data-tabs-theme="compact"] .av-fb-table thead th { padding: 4px 8px; font-size: 10px; }
.av-table[data-tabs-theme="compact"] .av-fb-table tbody td { padding: 2px 8px; }

.av-table[data-tabs-theme="pill"] .av-toolbar-left { border-radius: 999px; }
.av-table[data-tabs-theme="pill"] .av-analytics-toggle { border-radius: 999px; }
.av-table[data-tabs-theme="pill"] .av-fb-status-badge { border-radius: 999px; }

.av-table[data-tabs-theme="fluent"] .av-toolbar { background: #faf9f8; border-bottom-color: #edebe9; }
.av-table[data-tabs-theme="fluent"] .av-toolbar-left { border-radius: 2px; border-color: #8a8886; }
.av-table[data-tabs-theme="fluent"] .av-fb-table thead th { background: #faf9f8; }

/* ── Tabulator theme — match the d3VIEW / SlickGrid look ── */
.av-table .tabulator {
    border: none;
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12.5px;
}
.av-table .tabulator .tabulator-header {
    background: #f9fafb;
    border-bottom: 1px solid #d1d5db;
    color: #6b7280;
    font-weight: 700;
}
.av-table .tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: none;
}
.av-table .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 8px 12px;
}
.av-table .tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6b7280;
}
.av-table .tabulator .tabulator-row {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    min-height: 38px;
}
.av-table .tabulator .tabulator-row.tabulator-row-even { background: #fff; }
.av-table .tabulator .tabulator-row:hover { background: #f3f4f6; }
.av-table .tabulator .tabulator-row.tabulator-selected { background: #e0ecf8; }
.av-table .tabulator .tabulator-row.tabulator-selected:hover { background: #d0deef; }
.av-table .tabulator .tabulator-cell {
    border-right: none;
    padding: 6px 12px;
    color: #111827;
}
.av-table .tabulator .tabulator-row .tabulator-cell .av-fb-name-link { color: #2c5282; text-decoration: none; font-weight: 500; cursor: pointer; }
.av-table .tabulator .tabulator-row .tabulator-cell .av-fb-name-link:hover { text-decoration: underline; }
.av-table .tabulator .tabulator-cell .av-fb-empty { color: #d1d5db; }
.av-table .tabulator .tabulator-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; }

.av-table[data-tabs-theme="compact"] .tabulator .tabulator-row { min-height: 28px; }
.av-table[data-tabs-theme="compact"] .tabulator .tabulator-cell { padding: 2px 8px; }
.av-table[data-tabs-theme="compact"] .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 4px 8px; }

.av-table[data-tabs-theme="pill"] .tabulator .tabulator-row .av-fb-status-badge { border-radius: 999px; }

.av-table[data-tabs-theme="vscode"] .tabulator { background: #1e1e1e; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-header { background: #252526; border-bottom-color: #3c3c3c; color: #9da5b4; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-header .tabulator-col .tabulator-col-title { color: #9da5b4; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row { background: #1e1e1e; border-bottom-color: #2a2a2a; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row.tabulator-row-even { background: #1e1e1e; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row:hover { background: #2a2d2e; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row.tabulator-selected { background: #094771; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-cell { color: #d4d4d4; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row .tabulator-cell .av-fb-name-link { color: #4daafc; }

/* ── detail drawer (right slide-out, hpcjobs inspector pattern) ── */
.av-table { position: relative; }
.av-drawer-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.18); z-index: 1040;
}
.av-table.av-drawer-open .av-drawer-backdrop { display: block; }
.av-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: 30%; min-width: 360px; max-width: 92vw;
    background: #f8f9fc; border-left: 1px solid #d0d0d0;
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
    display: flex; flex-direction: column; overflow: hidden;
    z-index: 1050; transform: translateX(100%);
    transition: transform 0.22s ease-out;
}
.av-table.av-drawer-open .av-drawer { transform: translateX(0); }
.av-drawer-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.av-drawer-title { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-drawer-close { background: none; border: none; color: #888; cursor: pointer; font-size: 15px; padding: 2px 6px; }
.av-drawer-close:hover { color: #111827; }
.av-drawer-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; }

.av-detail-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.av-detail-opentab { background: #fff; border: 1px solid #2c5282; color: #2c5282; padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.av-detail-opentab:hover { background: #2c5282; color: #fff; }
.av-detail-group { margin-bottom: 14px; }
.av-detail-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #2c5282; margin: 0 0 6px 2px; padding-bottom: 4px; border-bottom: 2px solid #e0ecf8; }
.av-detail-grid { display: flex; flex-direction: column; gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.av-detail-row { display: grid; grid-template-columns: 150px 1fr; gap: 0; background: #fff; }
.av-detail-k { padding: 6px 10px; background: #f9fafb; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #6b7280; word-break: break-word; }
.av-detail-v { padding: 6px 10px; font-size: 12.5px; color: #111827; word-break: break-word; }

/* ── inline expand ── */
.av-expand-ico { color: #9ca3af; font-size: 11px; cursor: pointer; }
.av-table .tabulator .tabulator-row .av-inline-detail {
    padding: 12px 14px; background: #f9fafb; border-top: 1px solid #e5e7eb; width: 100%;
}
.av-table .tabulator .tabulator-row .av-inline-detail .av-detail-grid { max-width: 900px; }

.av-table[data-tabs-theme="vscode"] .av-drawer { background: #1e1e1e; border-left-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-drawer-head { background: #252526; border-bottom-color: #3c3c3c; }
.av-table[data-tabs-theme="vscode"] .av-drawer-title { color: #d4d4d4; }
.av-table[data-tabs-theme="vscode"] .av-detail-row { background: #2d2d30; }
.av-table[data-tabs-theme="vscode"] .av-detail-k { background: #252526; color: #9da5b4; }
.av-table[data-tabs-theme="vscode"] .av-detail-v { color: #d4d4d4; }
.av-table[data-tabs-theme="vscode"] .tabulator .tabulator-row .av-inline-detail { background: #252526; border-top-color: #3c3c3c; }

/* /stylesheets/appviewer/themes/chrome.css */
.av-tabs-host[data-tabs-theme="chrome"] .av-tabs-bar { background: #dee1e6; padding-top: 6px; }
.av-tabs-host[data-tabs-theme="chrome"] .av-tabs-strip { padding-left: 8px; gap: 1px; }
.av-tabs-host[data-tabs-theme="chrome"] .av-tab {
    background: #c8ccd1;
    color: #4b5563;
    border-radius: 10px 10px 0 0;
    margin-right: -1px;
    border: 1px solid transparent;
    border-bottom: none;
    height: 30px;
}
.av-tabs-host[data-tabs-theme="chrome"] .av-tab:hover { background: #d4d8de; }
.av-tabs-host[data-tabs-theme="chrome"] .av-tab.av-active {
    background: #ffffff;
    color: #111827;
    border-color: #cfd3d8;
    z-index: 2;
}

/* /stylesheets/appviewer/themes/vscode.css */
.av-tabs-host[data-tabs-theme="vscode"] .av-tabs-bar {
    background: #2d2d30;
    border-bottom-color: #1e1e1e;
}
.av-tabs-host[data-tabs-theme="vscode"] .av-tab {
    background: #2d2d30;
    color: #969696;
    border-right: 1px solid #1e1e1e;
    position: relative;
}
.av-tabs-host[data-tabs-theme="vscode"] .av-tab:hover { background: #383838; color: #ccc; }
.av-tabs-host[data-tabs-theme="vscode"] .av-tab.av-active {
    background: #1e1e1e;
    color: #ffffff;
}
.av-tabs-host[data-tabs-theme="vscode"] .av-tab.av-active::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: #0078d4;
}
.av-tabs-host[data-tabs-theme="vscode"] .av-tab .av-tab-close:hover { background: #5a5d5e; color: #fff; }
.av-tabs-host[data-tabs-theme="vscode"] .av-tabs-overflow,
.av-tabs-host[data-tabs-theme="vscode"] .av-tabs-actions { background: #2d2d30; color: #969696; border-color: #1e1e1e; }
.av-tabs-host[data-tabs-theme="vscode"] .av-tabs-actions .av-ta-btn { color: #969696; }
.av-tabs-host[data-tabs-theme="vscode"] .av-tabs-actions .av-ta-btn:hover { color: #fff; background: #383838; }

/* /stylesheets/appviewer/themes/fluent.css */
.av-tabs-host[data-tabs-theme="fluent"] .av-tabs-bar { background: #ffffff; padding: 0 12px; border-bottom: 1px solid #e5e7eb; }
.av-tabs-host[data-tabs-theme="fluent"] .av-tabs-strip { gap: 4px; }
.av-tabs-host[data-tabs-theme="fluent"] .av-tab {
    background: transparent;
    color: #6b7280;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid transparent;
    padding: 0 8px;
    height: 40px;
}
.av-tabs-host[data-tabs-theme="fluent"] .av-tab:hover { color: #111827; }
.av-tabs-host[data-tabs-theme="fluent"] .av-tab.av-active {
    color: #2c5282;
    border-bottom-color: #2c5282;
}
.av-tabs-host[data-tabs-theme="fluent"] .av-tabs-bar,
.av-tabs-host[data-tabs-theme="fluent"] .av-tabs-overflow,
.av-tabs-host[data-tabs-theme="fluent"] .av-tabs-actions { background: #fff; }

/* /stylesheets/appviewer/themes/pill.css */
.av-tabs-host[data-tabs-theme="pill"] .av-tabs-bar { background: #f3f2f1; padding: 6px 10px; border-bottom: none; gap: 4px; }
.av-tabs-host[data-tabs-theme="pill"] .av-tabs-strip { gap: 4px; }
.av-tabs-host[data-tabs-theme="pill"] .av-tab {
    background: transparent;
    color: #6b7280;
    border-radius: 999px;
    height: 28px;
    padding: 0 14px;
    font-weight: 500;
}
.av-tabs-host[data-tabs-theme="pill"] .av-tab:hover { background: rgba(0,0,0,0.04); color: #111827; }
.av-tabs-host[data-tabs-theme="pill"] .av-tab.av-active {
    background: #2c5282;
    color: #fff;
    font-weight: 600;
}
.av-tabs-host[data-tabs-theme="pill"] .av-tab.av-active .av-tab-close { color: rgba(255,255,255,0.7); }
.av-tabs-host[data-tabs-theme="pill"] .av-tab.av-active .av-tab-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.av-tabs-host[data-tabs-theme="pill"] .av-tabs-overflow,
.av-tabs-host[data-tabs-theme="pill"] .av-tabs-actions { background: #f3f2f1; border-color: transparent; }

/* /stylesheets/appviewer/themes/compact.css */
.av-tabs-host[data-tabs-theme="compact"] .av-tabs-bar { background: #f9fafb; }
.av-tabs-host[data-tabs-theme="compact"] .av-tab {
    height: 24px;
    font-size: 11px;
    padding: 0 8px;
    border-right: 1px solid #e5e7eb;
    color: #6b7280;
    min-width: 50px;
    max-width: 180px;
}
.av-tabs-host[data-tabs-theme="compact"] .av-tab:hover { background: #f3f4f6; color: #111827; }
.av-tabs-host[data-tabs-theme="compact"] .av-tab.av-active {
    background: #fff;
    color: #2c5282;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #2c5282;
}
.av-tabs-host[data-tabs-theme="compact"] .av-tab .av-tab-icon { font-size: 10px; }
.av-tabs-host[data-tabs-theme="compact"] .av-tabs-overflow { padding: 0 6px; }
.av-tabs-host[data-tabs-theme="compact"] .av-tabs-actions .av-ta-btn { height: 24px; padding: 0 6px; font-size: 11px; }

/* /stylesheets/d3view-theme.css */
/* d3VIEW Modern theme — opt-in app-wide typography matching the Settings panel.
   Inert unless body.d3-theme-modern is present. */

body.d3-theme-modern {
    --d3-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --d3-fs-base: 13px;
    --d3-fs-sm: 12px;
    --d3-fs-xs: 11px;
    --d3-lh: 1.45;
    --d3-text: #555;
    --d3-head: #333;
    --d3-muted: #888;
    --d3-border: #e0e0e0;
    --d3-blue: #2c5282;
    --d3-blue-bg: #e0ecf8;
    --d3-radius: 8px;

    font-family: var(--d3-font);
    font-size: var(--d3-fs-base);
    line-height: var(--d3-lh);
    color: var(--d3-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.d3-theme-modern button,
body.d3-theme-modern input,
body.d3-theme-modern select,
body.d3-theme-modern textarea,
body.d3-theme-modern .btn {
    font-family: var(--d3-font);
    font-size: var(--d3-fs-sm);
}

body.d3-theme-modern h1,
body.d3-theme-modern h2,
body.d3-theme-modern h3,
body.d3-theme-modern h4,
body.d3-theme-modern h5 {
    font-family: var(--d3-font);
    color: var(--d3-head);
    font-weight: 600;
}

body.d3-theme-modern label {
    font-weight: 600;
    color: var(--d3-head);
}

body.d3-theme-modern .text-muted,
body.d3-theme-modern small {
    color: var(--d3-muted);
}

body.d3-theme-modern .panel,
body.d3-theme-modern .account-card {
    border-radius: var(--d3-radius);
    border-color: var(--d3-border);
}

/* /stylesheets/workflow-nav.css */
/** Added by shashank2104 on 06/15/2026 at 10:09 AM - prod CSS parity - strip workflow-nav.css from style-prod.css **/
/** Moved by shashank2104 on 06/19/2026 - into modular/builder/navigation/ and registered LAST in
    workflow.concat-order.json so Grunt folds it into workflow.css (kept last to preserve cascade). **/

/* d3VIEW Classic workflow left-nav modernization.
   Scoped to body:not(.wf-design-modern) so Modern is never affected. Loaded after workflow.css. */

/* ---------- Worker list: compact, scannable (preview via the Quick View button) ---------- */

body:not(.wf-design-modern) div.workflow .wf-nav-tab-body .worker-panel .thumbnail,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .thumbnail {
    display: none !important;
}

body:not(.wf-design-modern) div.workflow .workers-list .worker-panel {
    padding: 4px 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s ease;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:hover {
    background: #f5f7fa;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-name .worker-type {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.1px;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-asterisk {
    color: #2c5282;
    margin-right: 2px;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .worker-description,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .description {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .label,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .badge {
    font-weight: 500;
}

/* row action buttons reveal on hover for a cleaner default list */
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel .add_buttons {
    opacity: 0;
    transition: opacity 0.12s ease;
}
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:hover .add_buttons,
body:not(.wf-design-modern) div.workflow .workers-list .worker-panel:focus-within .add_buttons {
    opacity: 1;
}

/* ---------- Nav panel shell polish (Classic) ---------- */

body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper {
    border-color: #e0e0e0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04);
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-header {
    border-bottom: 1px solid #e0e0e0;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body input.search_by_name,
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body .wf-search-input {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* visible thin scrollbar in the panel body */
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body,
body:not(.wf-design-modern) div.workflow .workers-list {
    scrollbar-width: thin;
    scrollbar-color: #c2cdd9 #eef1f5;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar-thumb,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar-thumb {
    background: #c2cdd9;
    border-radius: 5px;
}
body:not(.wf-design-modern) div.workflow .wf-nav-tab-body::-webkit-scrollbar-track,
body:not(.wf-design-modern) div.workflow .workers-list::-webkit-scrollbar-track {
    background: #eef1f5;
}

/* R0-3561 - classic view: the Worker-Inputs palette scroll viewport (.wl2-body) needs a definite-height
   ancestor. The tab-body's inline height:calc(100% - 50px) collapses because the classic-view nav wrapper
   has no definite height, so the long input list scrolls inconsistently. Pin the scroll container to the
   viewport directly (header + tab-header offset) so .wl2-panel height:100% resolves and .wl2-body scrolls. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body {
    overflow-y: auto;
}

/* icon rail: remove the browser focus-outline box (the "distortion" on the focused tab) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li:focus,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li:focus-visible,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li a:focus,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li a:focus-visible,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li button:focus {
    outline: none !important;
}

/* active (selected) tab — subtle accent only; icons untouched (no recolor/resize) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.open,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.clicked {
    background: #e0ecf8;
    box-shadow: inset 3px 0 0 #2c5282;
}

/* per-tab width transition (width is set per active tab in JS) */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper {
    transition: width 0.15s ease;
}

body:not(.wf-design-modern) {
    --wf-rail-w: 150px;
}

/* Header-band height, scoped to the workflow container (NOT body) so it tracks the active
   header mode. .wf-main-container holds the data-header-view attr, and every offset consumer
   below it (nav menu, io/basic/widget views, AI fora) inherits this var.
   R0-3335 - the :not(.wf-design-modern) scope was dropped so MODERN uses the SAME header height
   as classic (modern now renders the classic header). This is the single source of --wf-header-h
   for both designs; the old fixed-48px modern token override was removed. */
div.workflow .wf-main-container {
    --wf-header-h: 80px;
}
/* Ribbon header mode — taller header. The attr-qualified rule is more specific, so it wins. */
div.workflow .wf-main-container[data-header-view="ribbon"] {
    --wf-header-h: 100px;
}

/* R0-3171 - when worker shapes are shown in the header the band grows ~40px (the shapes strip). Bump
   --wf-header-h to match so EVERY offset consumer (nav rail, tabs, io/basic/widget views, AI fora, modal)
   tracks the taller header instead of being overlapped. Previously only a few hardcoded 120px rules existed
   and --wf-header-h stayed 80px. */
div.workflow .workflow-index-container.hasShapesInHeader .wf-main-container {
    --wf-header-h: 120px;
}
div.workflow .workflow-index-container.hasShapesInHeader .wf-main-container[data-header-view="ribbon"] {
    --wf-header-h: 140px;
}

/* Size the header band itself to match the ribbon var so the header is tall enough for the
   ribbon. Loaded last, so it wins the cascade. Applies to both designs now. */
div.workflow .wf-main-container[data-header-view="ribbon"] .top-settings-container,
div.workflow .wf-main-container[data-header-view="ribbon"] .d3view-wf-header {
    height: var(--wf-header-h) !important;
    min-height: var(--wf-header-h) !important;
    max-height: var(--wf-header-h) !important;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu {
    top: 0;
    height: 100% !important;
    width: var(--wf-rail-w) !important;
}

/* The fullscreen workflow shell yields the pinned app rail, but its classic
   fixed nav remains viewport-relative. Carry the offset onto that escaped
   child during the takeover. Embedded page-mode workflows mark themselves
   data-in-modal="false" and keep an absolute nav inside the already-offset
   shell, so excluding them avoids a second rail-width shift. */
/* 2026-08-20: same element-gate union as the shell rule -- see the note in
   wf-workflow-main-modal-tpl.css. Without it, minimizing any modal left the
   workflow's fixed nav under the rail even while the shell itself was correct. */
body.wf-modal-open:not(.wf-design-modern) div.workflow:not([data-in-modal="false"]) .wf-nav-menu,
body:not(.wf-design-modern) div.workflow.wf-rail-aware:not([data-in-modal="false"]) .wf-nav-menu {
    left: var(--d3v-rail-w, 0px);
}

/* ============================================================
   Side-nav design B — horizontal mini-menu, header typography
   - icon left, label right, grouped by section
   - typography matches the workflow header (13px / 400 / #555,
     -apple-system font stack, no uppercase on item labels)
   - active item gets the same #e0ecf8 / #2c5282 accent the
     workflow header search uses
   ============================================================ */

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups > ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.wf-rail-section {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 12px 10px 4px;
    margin: 0;
    list-style: none;
    pointer-events: none;
    text-align: left;
    display: block;
}

/* Nav menu items restyled to match the modern header menu (muted icons,
   secondary labels, rounded bg-hover pill on hover, accent pill on active). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item {
    border: none !important;
    border-left: none !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 4px !important;
    padding: 8px 10px !important;
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-radius: var(--d3v-r-md) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: var(--d3v-t-fast);
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a > i {
    color: var(--d3v-text-muted) !important;
    font-size: 14px !important;
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
    margin: 0 !important;
    transition: var(--d3v-t-fast);
}

body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item > a > .nav-menu-item-label {
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: inherit !important;
    margin: 0 !important;
}

/* Hover — rounded bg-hover pill, darker label */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover {
    background: transparent !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover > a {
    background: var(--d3v-bg-hover) !important;
    color: var(--d3v-text-primary) !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item:hover > a > i {
    color: var(--d3v-text-secondary) !important;
}

/* Active (panel open) — accent pill, matches the header's active chip */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active {
    background: transparent !important;
    border-left: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open > a,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked > a,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active > a {
    background: var(--d3v-bg-hover) !important;
    color: var(--d3v-accent) !important;
    font-weight: 500 !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.open > a > i,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.clicked > a > i,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups li.list-group-item.active > a > i {
    color: var(--d3v-accent) !important;
}

/* Drop the chunky .plugin-logo-container (40px W logo + border) from the
   workflow editor header. The header gets a small app_workflows.svg
   inlined right before the workflow name via ::before below — same
   identity cue at a fraction of the visual weight. */
body:not(.wf-design-modern) div.workflow .d3view-wf-header > .plugin-logo-container {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .top-settings-container,
body:not(.wf-design-modern) div.workflow .top-settings-container .plugin-header-right,
body:not(.wf-design-modern) div.workflow .top-settings-container .plugin-header-left {
    padding-left: 3px !important;
    margin-left: 0 !important;
}
body:not(.wf-design-modern) div.workflow .d3view-wf-header .wf-name-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
body:not(.wf-design-modern) div.workflow .d3view-wf-header .wf-name-container::before {
    content: '';
    display: inline-block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url('/svgs/apps/app_workflows.svg') no-repeat center / contain;
}

/* sections stack naturally from the top; rail itself scrolls internally
   if it ever outgrows the viewport, instead of pushing the document down.
   Override the legacy `justify-content: space-between` that splits the
   two ULs to the top and bottom of the rail container (and consequently
   pushes the second UL below the viewport when the rail's parent is
   sized to 100% of a taller-than-viewport box). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu .wf-nav-menu-groups {
    justify-content: flex-start !important;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-groups > ul:last-child {
    margin-top: 0;
}

/* Hide the expand/collapse chevron unless a side-panel is open. The
   chevron lives inside .wf-nav-menu but only makes sense once a panel
   has been triggered (rail item gets .open / .clicked class). */
body:not(.wf-design-modern) div.workflow .pl-toggle-sidebar {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu:has(li.list-group-item.open) .pl-toggle-sidebar,
body:not(.wf-design-modern) div.workflow .wf-nav-menu:has(li.list-group-item.clicked) .pl-toggle-sidebar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
}

/* ---- Reflow only the elements that today are positioned at left: 75px to
       track the wider rail. Do NOT add padding-left to ancestors of the
       rail — the rail itself is position: absolute; left: 0 relative to
       those ancestors, and padding-left would push the rail right too. ---- */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper { left: var(--wf-rail-w) !important; }
body:not(.wf-design-modern) div.workflow #workflow-logs-container { left: var(--wf-rail-w) !important; width: calc(100% - var(--wf-rail-w)) !important; }
body:not(.wf-design-modern) div.workflow div.wf-main-container div#birds-eye-view { left: var(--wf-rail-w) !important; }
body:not(.wf-design-modern) div.workflow div.wf-main-container div.chart-view .wf-exec-complete,
body:not(.wf-design-modern) div.workflow div.wf-main-container .wf-top-alert { left: var(--wf-rail-w) !important; width: calc(100% - var(--wf-rail-w)) !important; }
/* the Data view's main container (and its sibling timeline / ancestry
   views) are absolutely positioned at left: 75px in the legacy CSS —
   re-pin to the rail width so the body doesn't end up offset by the
   old 75px and overlapped by the wider rail. */
body:not(.wf-design-modern) div.workflow .wf-main-container.dataEnabled .wf-data-container,
body:not(.wf-design-modern) div.workflow .wf-main-container.timelineEnabled .wf-timeline-container,
body:not(.wf-design-modern) div.workflow .wf-main-container.ancestryEnabled .wf-ancestry-container {
    left: var(--wf-rail-w) !important;
    width: calc(100% - var(--wf-rail-w)) !important;
}

/* ---- Canvas / Timeline / Data view-toggle: keep at top-left just past
       the rail, but flatten to a compact icon-only grouped pill. The
       inline `style="top:10px; left:95px"` in the template still wins
       on top: keeping its 10px; left tracks the rail width via the var. ---- */
body:not(.wf-design-modern) div.workflow .wf-view-toggle {
    left: calc(var(--wf-rail-w) + 10px) !important;
    top: 10px !important;
    z-index: 5;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .btn-group {
    display: inline-flex !important;
    gap: 2px !important;
    background: #f0f0f0 !important;
    border-radius: 8px !important;
    padding: 3px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn {
    font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #555 !important;
    background: transparent !important;
    border: none !important;
    padding: 5px 9px !important;
    border-radius: 6px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    line-height: 1 !important;
    min-width: 0 !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn > i {
    font-size: 13px !important;
    margin: 0 !important;
}
/* icon-only: hide the text label, keep tooltip via the existing `title` attr */
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn .btn-txt {
    display: none !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn:hover {
    color: #333 !important;
    background: #e8e8e8 !important;
}
body:not(.wf-design-modern) div.workflow .wf-view-toggle .wf-view-btn.active {
    background: #fff !important;
    color: #2c5282 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10) !important;
}

/* R0-3744 + R0-3745 — the position: fixed overlay we tried here clashed
   with the workflow's internal coordinate assumptions (the JS sets
   inline `position: relative; min-height: 900px` for the in-document
   flow, plus rail / side-panel positions are computed against the
   relative parent). Reverted to the natural positioning; the library
   peek-through that motivated the overlay was itself a regression from
   the earlier `height: calc(100vh - 103px)` clamp, so leaving the
   workflow alone here keeps everything working. */

body:not(.wf-design-modern) .workflow-modal div.workflow .wf-nav-menu,
body:not(.wf-design-modern) div.workflow.workflow-modal .wf-nav-menu,
body:not(.wf-design-modern) .workflows-app-viewer-root div.workflow .wf-nav-menu {
    top: 0 !important;
    height: 100% !important;
}

body:not(.wf-design-modern) div.workflow.modalPresent .wf-nav-menu {
    top: var(--wf-header-h, 80px) !important;
    height: calc(100% - var(--wf-header-h, 80px)) !important;
}

/* canvas push: the panel shifts the canvas right by exactly (rail + panel width)
   via padding-left on .full-view (set in JS), so the canvas fills the remaining
   space precisely — no overlay, no horizontal scroll */
body:not(.wf-design-modern) div.workflow .full-view {
    transition: padding-left 0.15s ease;
}

/* docked panel content fills the wrapper (sized per-tab in JS). The template marks
   Settings/Logs/Predict tab-panes with .full-width (calc(100vw-80px)) and AI Models
   gets a fixed 800px — both overflow the docked wrapper and pushed the form controls
   off-screen with an x-scroll. Pin these to 100% of the wrapper in Classic. Only the
   per-tab-sized tabs are targeted; unmapped tabs keep their fixed width (the wrapper
   auto-sizes to it). */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Settings"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Settings"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="AI Models"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="AI Models"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Logs"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Logs"].full-width,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"],
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"].full-width {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-nav-tab-body > .full-h,
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper .wf-settings-tree {
    max-width: 100%;
    box-sizing: border-box;
}

/* R0-3770 - Predict from Historical must size to the viewport minus the rail width, not the
   shared 100% cap above (which lumps it with AI Models/Logs). Without this the long workflow
   names in step 1 and the dataset table in step 2 get clipped. Classic view only; AI Models /
   Logs are untouched. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper div.tab-pane[data-app="Predict from Historical"].full-width {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
    max-width: unset !important;
}

/* R0-3651 - Enlarge/Compress for the per-tab nav panels (Settings, Logs, AI Models, Info, ...).
   The per-tab inline width on the wrapper is the compressed default; the .enlarged class (toggled by
   the Enlarge button) overrides it to a rail-aware near-full width. !important beats the inline per-tab
   width; removing the class falls back to it. Classic view only. */
body:not(.wf-design-modern) div.workflow .wf-nav-menu-wrapper.enlarged {
    width: calc(100cqw - var(--wf-rail-w, var(--wf-sidebar-w, 80px)) - 5px) !important;
    max-width: unset !important;
}

/* /stylesheets/recorder.widget.css */
/** Added by shashank2104 on 2026-06-19 - R0-3693 - anchor the recorder widget bottom-LEFT (clear of the rail) so it no longer overlaps and blocks the worker-config panel Save button **/
.wf-recorder-widget-wrap {
    position: fixed;
    /* R0-3693 - anchor to the bottom-LEFT (clear of the rail) instead of bottom-right, where the
       fixed widget overlapped the worker-config panel Save button and blocked it. */
    left: calc(var(--wf-rail-w, var(--wf-sidebar-w, 80px)) + 16px);
    bottom: 16px;
    z-index: 1080;
}
.wf-recorder-widget {
    position: relative;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 11px;
    color: #555;
    min-width: 140px;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.wf-recorder-widget:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.wf-recorder-widget[data-state="recording"] {
    border-color: #f8d7da;
    background: #fff7f7;
}
.wf-recorder-widget[data-state="stopped"] {
    border-color: #d4edda;
    background: #f7fff8;
}
.wf-rec-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #2c5282;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-rec-btn:hover {
    background: #e0ecf8;
    border-color: #c6d9ec;
}
.wf-rec-start i { color: #d46b08; }
.wf-rec-stop  i { color: #721c24; }
.wf-rec-import i, .wf-rec-export i { color: #2c5282; }
.wf-rec-discard i { color: #999; }
.wf-rec-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #721c24;
}
.wf-rec-status-done {
    color: #155724;
}
.wf-rec-status-done i {
    color: #155724;
}
.wf-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0392b;
    animation: wf-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes wf-rec-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
.wf-rec-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wf-rec-last {
    font-size: 10px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wf-rec-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}
.wf-rec-name-input {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    width: 100%;
}

/* R0-3887 - "Record New Automation" modal: the import-a-recipe dropzone under the name/description
   fields. Unscoped because the GenericModalView body is mounted outside the plugin root. */
.wf-rec-or-divider {
    text-align: center;
    margin: 18px 0 12px;
    border-top: 1px solid var(--d3v-border-subtle, #eee);
}
.wf-rec-or-divider span {
    position: relative;
    top: -9px;
    background: var(--d3v-bg-primary, #fff);
    padding: 0 10px;
    color: #999;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wf-rec-dropzone {
    border: 2px dashed var(--d3v-border-strong, #cfd6dd);
    border-radius: 8px;
    background: var(--d3v-bg-subtle, #fafbfc);
    padding: 20px;
    min-height: 96px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wf-rec-dropzone:hover,
.wf-rec-dropzone.dz-drag-hover {
    border-color: var(--d3v-accent, #2c5282);
    background: var(--d3v-bg-accent-subtle, #f0f6ff);
}
.wf-rec-dropzone .dz-message {
    margin: 0;
    color: #666;
}
.wf-rec-dropzone .dz-message i {
    display: block;
    font-size: 22px;
    color: #9aa4ae;
    margin-bottom: 6px;
}
.wf-rec-dz-title {
    font-weight: 600;
    color: #444;
}

/* /stylesheets/recipe.drawer.css */
.wf-recipe-drawer-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.wf-recipe-drawer-wrap.open {
    transform: translateX(0);
    pointer-events: auto;
}
.wf-recipe-drawer {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e0e0e0;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08);
}
.wf-recipe-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}
.wf-recipe-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}
.wf-recipe-drawer-title i {
    color: #2c5282;
    margin-right: 6px;
}
.wf-recipe-drawer-close {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.wf-recipe-drawer-close:hover {
    background: #f0f0f0;
    color: #333;
}
.wf-recipe-tabs {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin: 10px 16px 4px;
    align-self: flex-start;
}
.wf-recipe-tab {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-tab:hover {
    color: #555;
}
.wf-recipe-tab.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.wf-recipe-filters {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wf-recipe-search-input,
.wf-recipe-category-filter {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    outline: none;
}
.wf-recipe-search-input { flex: 1 1 0; }
.wf-recipe-category-filter { flex: 0 0 140px; }
.wf-recipe-search-input:focus,
.wf-recipe-category-filter:focus {
    border-color: #c6d9ec;
    box-shadow: 0 0 0 3px rgba(44,82,130,0.08);
}
.wf-recipe-drawer-body {
    flex: 1 1 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.wf-recipe-list-pane {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 200px;
}
.wf-recipe-list-loading,
.wf-recipe-list-empty,
.wf-recipe-detail-empty {
    font-size: 12px;
    color: #888;
    padding: 24px 12px;
    text-align: center;
    font-style: italic;
}
.wf-recipe-list-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-list-item:hover {
    background: #fafbfc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-recipe-list-item.selected {
    border-color: #2c5282;
    background: #f3f8fd;
}
.wf-recipe-list-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.wf-recipe-cat-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}
.wf-recipe-list-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-recipe-list-count {
    font-size: 11px;
    color: #888;
    flex: 0 0 auto;
}
.wf-recipe-list-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    margin-top: 2px;
}
.wf-recipe-list-tags {
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}
.wf-recipe-list-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-pane {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
}
.wf-recipe-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.wf-recipe-detail-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0;
}
.wf-recipe-detail-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.wf-recipe-detail-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 6px;
}
.wf-recipe-detail-tags {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}
.wf-recipe-detail-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-recipe-detail-actions button {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #2c5282;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-recipe-apply-btn {
    background: #e0ecf8 !important;
    border-color: #c6d9ec !important;
}
.wf-recipe-apply-btn:hover {
    background: #c6d9ec !important;
}
.wf-recipe-share-btn:hover { background: #e8daef; border-color: #d2b4de; }
.wf-recipe-delete-btn:hover { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }

/* ============================================================
   R0-3718 — ribbon header layout.
   The worker search is mounted inline on the ribbon's tab row
   (placeRibbonHeaderControls() in SettingsView appends it after
   the tabs <ul>, which survives tab switches since only the
   level-2 row re-renders), and the run status + tracked-input
   are moved next to the execution controls in JS. These rules
   only lay them out; scoped to ribbon mode + classic design so
   the classic header is untouched.
   ============================================================ */

/* Let the ribbon band span the full header width so the inline
   search can be pushed to the far right of the tab row. */
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-header-level-2 .plugin-settings-line {
    flex: 1 1 auto;
    width: 100%;
}
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .plugin-settings-line .wf-ribbon-menu {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ribbon tab row is a flex row so the inline search sits centred
   next to the tabs; margin-left:auto pushes it to the right end. */
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 {
    display: flex;
    align-items: center;
}
body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 > .wf-search-container {
    flex: 0 0 auto;
    max-width: 340px;
}

/* R0-3718 - on small screens the ribbon's level-2 actions already collapse to icon-only
   (.pl-ribbon-item .item-label hidden at <=1500px in plugins.css). Match that for the level-1
   TABS too: their label is a bare text node (icon + "File"), so collapse the anchor's font-size
   to hide the text and restore the icon glyph size. Scoped to the workflow ribbon header. */
@media screen and (max-width: 1500px) {
    body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 .pl-ribbon-list > li > a {
        font-size: 0;
    }
    body:not(.wf-design-modern) div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-level-1 .pl-ribbon-list > li > a > i {
        font-size: 14px;
        margin: 0;
    }
}

/* R0-3335 - the modern-specific --wf-header-h overrides (and the duplicate band-sizing) were
   removed. Modern now inherits the single shared header-height rule near the top of this file
   (div.workflow .wf-main-container, no :not(.wf-design-modern) scope), so there is one source
   of truth for both designs. Keep only the ribbon-menu overflow guard below. */
div.workflow.wf-design-modern .wf-main-container[data-header-view="ribbon"] .wf-ribbon-menu {
    overflow: visible;
}

/* ============================================================
   R0-3335 (PART 2) — Dark Mode + Ribbon View: ribbon label/icon color.
   Once the ribbon shows, the shared ribbon CSS hardcodes label color
   #333 (plugins.css :8614 hover !important, :8625 li[data-is-button=
   false]>a). The classic ribbon rules above are scoped
   body:not(.wf-design-modern), so under Modern Dark nothing re-colors
   the ribbon and the #333 labels/icons sit invisible on the dark
   header band. Re-color them with the modern dark text token.
   ============================================================ */
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list li[data-is-button="false"] > a,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list li[data-is-button="false"] > a,
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .item-label,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .item-label,
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .pl-icon,
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-item > .pl-icon {
    color: var(--wf-text-primary) !important;
}

/* hover beats the #333!important hover rule in plugins.css:8614 */
div.workflow.wf-design-modern.wf-dark .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list > li:hover > a:not(.btn),
body.wf-design-modern.wf-dark div.workflow .wf-main-container[data-header-view="ribbon"] .pl-ribbon-list > li:hover > a:not(.btn) {
    color: var(--wf-text-primary) !important;
}

/* /stylesheets/recorder.widget.css */
.wf-recorder-widget-wrap {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
}
.wf-recorder-widget {
    position: relative;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 11px;
    color: #555;
    min-width: 140px;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.wf-recorder-widget:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.wf-recorder-widget[data-state="recording"] {
    border-color: #f8d7da;
    background: #fff7f7;
}
.wf-recorder-widget[data-state="stopped"] {
    border-color: #d4edda;
    background: #f7fff8;
}
.wf-rec-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #2c5282;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-rec-btn:hover {
    background: #e0ecf8;
    border-color: #c6d9ec;
}
.wf-rec-start i { color: #d46b08; }
.wf-rec-stop  i { color: #721c24; }
.wf-rec-import i, .wf-rec-export i { color: #2c5282; }
.wf-rec-discard i { color: #999; }
.wf-rec-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #721c24;
}
.wf-rec-status-done {
    color: #155724;
}
.wf-rec-status-done i {
    color: #155724;
}
.wf-rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c0392b;
    animation: wf-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes wf-rec-pulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
.wf-rec-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wf-rec-last {
    font-size: 10px;
    color: #888;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wf-rec-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}
.wf-rec-name-input {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    width: 100%;
}

/* /stylesheets/recipe.drawer.css */
.wf-recipe-drawer-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 90vw;
    height: 100vh;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.wf-recipe-drawer-wrap.open {
    transform: translateX(0);
    pointer-events: auto;
}
.wf-recipe-drawer {
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e0e0e0;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08);
}
.wf-recipe-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
}
.wf-recipe-drawer-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.3px;
}
.wf-recipe-drawer-title i {
    color: #2c5282;
    margin-right: 6px;
}
.wf-recipe-drawer-close {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}
.wf-recipe-drawer-close:hover {
    background: #f0f0f0;
    color: #333;
}
.wf-recipe-tabs {
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin: 10px 16px 4px;
    align-self: flex-start;
}
.wf-recipe-tab {
    border: none;
    background: transparent;
    color: #888;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-tab:hover {
    color: #555;
}
.wf-recipe-tab.active {
    background: #fff;
    color: #2c5282;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}
.wf-recipe-filters {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.wf-recipe-search-input,
.wf-recipe-category-filter {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #333;
    outline: none;
}
.wf-recipe-search-input { flex: 1 1 0; }
.wf-recipe-category-filter { flex: 0 0 140px; }
.wf-recipe-search-input:focus,
.wf-recipe-category-filter:focus {
    border-color: #c6d9ec;
    box-shadow: 0 0 0 3px rgba(44,82,130,0.08);
}
.wf-recipe-drawer-body {
    flex: 1 1 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.wf-recipe-list-pane {
    padding: 8px 12px;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 200px;
}
.wf-recipe-list-loading,
.wf-recipe-list-empty,
.wf-recipe-detail-empty {
    font-size: 12px;
    color: #888;
    padding: 24px 12px;
    text-align: center;
    font-style: italic;
}
.wf-recipe-list-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wf-recipe-list-item:hover {
    background: #fafbfc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wf-recipe-list-item.selected {
    border-color: #2c5282;
    background: #f3f8fd;
}
.wf-recipe-list-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.wf-recipe-cat-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}
.wf-recipe-list-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-recipe-list-count {
    font-size: 11px;
    color: #888;
    flex: 0 0 auto;
}
.wf-recipe-list-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
    margin-top: 2px;
}
.wf-recipe-list-tags {
    font-size: 10px;
    color: #888;
    margin-top: 4px;
}
.wf-recipe-list-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-pane {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fafbfc;
    flex: 0 0 auto;
    max-height: 40vh;
    overflow-y: auto;
}
.wf-recipe-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.wf-recipe-detail-name {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    margin: 0;
}
.wf-recipe-detail-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}
.wf-recipe-detail-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 6px;
}
.wf-recipe-detail-tags {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}
.wf-recipe-detail-tags i { margin-right: 4px; color: #999; }
.wf-recipe-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wf-recipe-detail-actions button {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #2c5282;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wf-recipe-apply-btn {
    background: #e0ecf8 !important;
    border-color: #c6d9ec !important;
}
.wf-recipe-apply-btn:hover {
    background: #c6d9ec !important;
}
.wf-recipe-share-btn:hover { background: #e8daef; border-color: #d2b4de; }
.wf-recipe-delete-btn:hover { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }

/* /javascripts/plugins_src/jsonscientific/jsonscientific.css */
/** R2026-357 - JSON Scientific. Always prefix classes with d3view-jsonscientific- to avoid scoping issues; tokens live on the container. Light theme only. **/
.d3view-jsonscientific-container {
    --jss-ground: #f4f5f7; --jss-dots: #d5dae2; --jss-surface: #ffffff; --jss-surface-2: #f7f8fa;
    --jss-line: #e6e9ee; --jss-line-strong: #cfd4dc;
    --jss-ink: #16181d; --jss-ink-2: #4a505c; --jss-muted: #858b97;
    --jss-key: #2f5db3; --jss-num: #c2410c; --jss-bool: #6d3fc0; --jss-str: #1d2330; --jss-null: #9aa0ab;
    --jss-accent: #2a78d6; --jss-accent-wash: #e7f0fc; --jss-hit: #fff0b3; --jss-hit-ink: #5c4300;
    --jss-edge: #b7bfcb; --jss-edge-hi: #2a78d6;
    --jss-ok: #0f7f39; --jss-err: #c62f2f; --jss-err-wash: #fdeaea;
    --jss-s1: #2a78d6; --jss-s2: #eb6834; --jss-s3: #1baf7a; --jss-s4: #eda100; --jss-s5: #e87ba4; --jss-s6: #008300; --jss-s7: #4a3aa7; --jss-s8: #e34948;
    --jss-grid: #e8eaef; --jss-axis: #c3c7cf;
    --jss-chip: #eef1f5; --jss-chip-ink: #4b5463;
    --jss-band: #e6effc; --jss-band-err: #fde3e3;
    --jss-shadow: 0 1px 2px rgba(20, 24, 33, .06), 0 2px 6px rgba(20, 24, 33, .04);
    --jss-shadow-lg: 0 10px 30px rgba(20, 24, 33, .12), 0 2px 6px rgba(20, 24, 33, .06);
    --jss-h0b: #ece6f7; --jss-h0i: #4a3a73; --jss-h1b: #f7e3e8; --jss-h1i: #74384a; --jss-h2b: #dff2e7; --jss-h2i: #2b5e45; --jss-h3b: #f6ecd9; --jss-h3i: #6b4f22;
    --jss-h4b: #e0ecf9; --jss-h4i: #2b4e74; --jss-h5b: #dcf1f1; --jss-h5i: #245d5d; --jss-h6b: #fbe6da; --jss-h6i: #7a4428; --jss-h7b: #edf0da; --jss-h7i: #525a24;
    --jss-seq0: #cde2fb; --jss-seq1: #0d366b; --jss-div-mid: #f0efec; --jss-div-neg: #2a78d6; --jss-div-pos: #e34948;
    --jss-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --jss-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    position: relative; height: 100%; min-height: 480px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0 12px; background: #eceef2; color: var(--jss-ink); font: 13px/1.4 var(--jss-sans); text-align: left;
}
.d3view-jsonscientific-container [hidden] { display: none !important; }
.d3view-jsonscientific-container button, .d3view-jsonscientific-container input { font: inherit; color: inherit; }
.d3view-jsonscientific-container button { cursor: pointer; }
.d3view-jsonscientific-container label { font-weight: normal; margin: 0; }
.d3view-jsonscientific-container :focus-visible { outline: 2px solid var(--jss-accent); outline-offset: 2px; }
.d3view-jsonscientific-grow { flex: 1; }

/* top bar */
.d3view-jsonscientific-bar { display: flex; align-items: center; gap: 10px; min-height: 50px; flex-wrap: wrap; padding: 6px 0; }
.d3view-jsonscientific-file { display: flex; align-items: center; gap: 6px; height: 30px; max-width: 320px; padding: 0 10px 0 8px; border: 1px solid var(--jss-line-strong); border-radius: 7px; background: var(--jss-surface); font-weight: 500; }
.d3view-jsonscientific-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-jsonscientific-tag { font: 500 9.5px/1 var(--jss-mono); letter-spacing: .06em; color: var(--jss-num); border: 1px solid currentColor; border-radius: 3px; padding: 2px 3px; }
.d3view-jsonscientific-search { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid var(--jss-line-strong); border-radius: 7px; background: var(--jss-surface); min-width: 200px; flex: 0 1 300px; color: var(--jss-ink-2); }
.d3view-jsonscientific-search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; height: 26px; padding: 0; box-shadow: none; }
.d3view-jsonscientific-search .d3view-jsonscientific-cnt { font: 11px var(--jss-mono); white-space: nowrap; }
.d3view-jsonscientific-seg { display: inline-flex; border: 1px solid var(--jss-line-strong); border-radius: 7px; background: var(--jss-surface); padding: 2px; gap: 2px; height: 30px; }
.d3view-jsonscientific-seg button { border: 0; background: transparent; border-radius: 5px; padding: 0 9px; font-size: 12px; color: var(--jss-ink-2); }
.d3view-jsonscientific-seg button[aria-pressed="true"] { background: var(--jss-accent-wash); color: var(--jss-accent); font-weight: 500; }
.d3view-jsonscientific-lbl { font-size: 11px; color: var(--jss-muted); text-transform: uppercase; letter-spacing: .07em; }
/* !important: the core stylesheet sets label { display: block !important } */
.d3view-jsonscientific-chk { display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--jss-line-strong); border-radius: 7px; background: var(--jss-surface); font-size: 12px; color: var(--jss-ink-2); cursor: pointer; user-select: none; }
.d3view-jsonscientific-chk input { accent-color: var(--jss-accent); margin: 0; }
.d3view-jsonscientific-ibtn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--jss-line-strong); border-radius: 7px; background: var(--jss-surface); color: var(--jss-ink-2); }
.d3view-jsonscientific-ibtn:hover, .d3view-jsonscientific-seg button:hover, .d3view-jsonscientific-chk:hover { color: var(--jss-ink); }
.d3view-jsonscientific-ibtn[aria-pressed="true"] { color: var(--jss-accent); background: var(--jss-accent-wash); }

/* workspace: source pane, splitter, canvas */
.d3view-jsonscientific-work { position: relative; display: grid; grid-template-columns: var(--jss-srcw, 31%) 5px minmax(0, 1fr); border: 1px solid var(--jss-line-strong); border-radius: 10px; overflow: hidden; background: var(--jss-surface); min-height: 0; }
.d3view-jsonscientific-work.d3view-jsonscientific-nosrc { grid-template-columns: 0 0 minmax(0, 1fr); }
.d3view-jsonscientific-nosrc .d3view-jsonscientific-src, .d3view-jsonscientific-nosrc .d3view-jsonscientific-split { visibility: hidden; }
.d3view-jsonscientific-src { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fbfbfc; }
.d3view-jsonscientific-src-head { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--jss-line); font-size: 12px; color: var(--jss-ink-2); }
.d3view-jsonscientific-fn { font: 500 12px var(--jss-mono); color: var(--jss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-jsonscientific-ro { font-size: 11px; color: var(--jss-muted); }
.d3view-jsonscientific-ace { flex: 1; min-height: 0; }
.d3view-jsonscientific-ace .d3view-jsonscientific-band { position: absolute; background: var(--jss-band); }
.d3view-jsonscientific-ace .d3view-jsonscientific-band-err { position: absolute; background: var(--jss-band-err); }
.d3view-jsonscientific-split { cursor: col-resize; background: var(--jss-line); transition: background .15s; touch-action: none; }
.d3view-jsonscientific-split:hover, .d3view-jsonscientific-split.d3view-jsonscientific-drag { background: var(--jss-accent); }

/* canvas and cards */
.d3view-jsonscientific-canvas { position: relative; overflow: hidden; background-color: var(--jss-ground); background-image: radial-gradient(circle, var(--jss-dots) 1px, transparent 1.3px); background-size: 22px 22px; cursor: grab; touch-action: none; min-height: 0; }
.d3view-jsonscientific-canvas.d3view-jsonscientific-panning { cursor: grabbing; }
.d3view-jsonscientific-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.d3view-jsonscientific-anim .d3view-jsonscientific-world { transition: transform .38s cubic-bezier(.2, .7, .2, 1); }
/* two classes deep: the app's normalize.css sets svg:not(:root) { overflow: hidden }, which would clip every edge to a 300 x 150 box */
.d3view-jsonscientific-container svg.d3view-jsonscientific-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.d3view-jsonscientific-edges path { fill: none; stroke: var(--jss-edge); stroke-width: 1.4; }
.d3view-jsonscientific-edges path.d3view-jsonscientific-hi { stroke: var(--jss-edge-hi); stroke-width: 2; }
.d3view-jsonscientific-card { position: absolute; width: max-content; min-width: 170px; max-width: 400px; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 7px; box-shadow: var(--jss-shadow); font: 12.5px/1 var(--jss-mono); color: var(--jss-str); cursor: default; transition: opacity .2s; }
.d3view-jsonscientific-card.d3view-jsonscientific-wide { max-width: none; }
.d3view-jsonscientific-hd { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--jss-hbg); color: var(--jss-hink); border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--jss-line); cursor: pointer; white-space: nowrap; }
.d3view-jsonscientific-hd .d3view-jsonscientific-t { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.d3view-jsonscientific-hd .d3view-jsonscientific-bd { margin-left: auto; font-size: 10.5px; opacity: .75; padding-left: 10px; }
.d3view-jsonscientific-hd svg { flex: none; opacity: .85; }
.d3view-jsonscientific-hc0 { --jss-hbg: var(--jss-h0b); --jss-hink: var(--jss-h0i); } .d3view-jsonscientific-hc1 { --jss-hbg: var(--jss-h1b); --jss-hink: var(--jss-h1i); }
.d3view-jsonscientific-hc2 { --jss-hbg: var(--jss-h2b); --jss-hink: var(--jss-h2i); } .d3view-jsonscientific-hc3 { --jss-hbg: var(--jss-h3b); --jss-hink: var(--jss-h3i); }
.d3view-jsonscientific-hc4 { --jss-hbg: var(--jss-h4b); --jss-hink: var(--jss-h4i); } .d3view-jsonscientific-hc5 { --jss-hbg: var(--jss-h5b); --jss-hink: var(--jss-h5i); }
.d3view-jsonscientific-hc6 { --jss-hbg: var(--jss-h6b); --jss-hink: var(--jss-h6i); } .d3view-jsonscientific-hc7 { --jss-hbg: var(--jss-h7b); --jss-hink: var(--jss-h7i); }
.d3view-jsonscientific-row { position: relative; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-top: 1px solid var(--jss-line); white-space: nowrap; cursor: pointer; }
.d3view-jsonscientific-hd + .d3view-jsonscientific-row { border-top: 0; }
.d3view-jsonscientific-row:hover { background: var(--jss-surface-2); }
.d3view-jsonscientific-k { color: var(--jss-key); flex: none; }
.d3view-jsonscientific-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.d3view-jsonscientific-v > span.d3view-jsonscientific-x { overflow: hidden; text-overflow: ellipsis; }
.d3view-jsonscientific-num { color: var(--jss-num); font-variant-numeric: tabular-nums; }
.d3view-jsonscientific-num sup { font-size: .72em; line-height: 0; vertical-align: .5em; }
.d3view-jsonscientific-bool { color: var(--jss-bool); }
.d3view-jsonscientific-nul { color: var(--jss-null); font-style: italic; }
.d3view-jsonscientific-cnt { color: var(--jss-muted); }
.d3view-jsonscientific-unit { flex: none; font: 500 10px/1 var(--jss-sans); color: var(--jss-chip-ink); background: var(--jss-chip); border-radius: 3px; padding: 3px 4px; letter-spacing: .02em; }
.d3view-jsonscientific-unit.d3view-jsonscientific-warn { color: #8a5a00; background: #fdf1d8; }
.d3view-jsonscientific-sw { flex: none; width: 11px; height: 11px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .18); }
.d3view-jsonscientific-sw.d3view-jsonscientific-clear { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, #fff 25%, #fff 75%, #ccc 75%); background-size: 6px 6px; background-position: 0 0, 3px 3px; }
.d3view-jsonscientific-spark { flex: none; color: var(--jss-accent); }
.d3view-jsonscientific-ref { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--jss-sans); color: var(--jss-accent); background: var(--jss-accent-wash); border-radius: 3px; padding: 3px 6px 3px 4px; }
.d3view-jsonscientific-tog { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border: 1px solid var(--jss-line-strong); border-radius: 4px; background: var(--jss-surface-2); color: var(--jss-ink-2); font: 13px/1 var(--jss-mono); padding: 0; }
.d3view-jsonscientific-tog:hover { color: var(--jss-accent); border-color: var(--jss-accent); }
.d3view-jsonscientific-port { position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--jss-surface); border: 1.5px solid var(--jss-edge); }
.d3view-jsonscientific-more { height: 26px; display: flex; align-items: center; padding: 0 10px; border-top: 1px solid var(--jss-line); color: var(--jss-muted); font: 11.5px var(--jss-sans); }
.d3view-jsonscientific-card.d3view-jsonscientific-sel { border-color: var(--jss-accent); box-shadow: 0 0 0 1px var(--jss-accent), var(--jss-shadow); }
.d3view-jsonscientific-row.d3view-jsonscientific-sel, tr.d3view-jsonscientific-sel td { background: var(--jss-accent-wash); }
.d3view-jsonscientific-row.d3view-jsonscientific-hit, tr.d3view-jsonscientific-hit td { background: var(--jss-hit); }
.d3view-jsonscientific-row.d3view-jsonscientific-hit .d3view-jsonscientific-k, .d3view-jsonscientific-row.d3view-jsonscientific-hit .d3view-jsonscientific-v { color: var(--jss-hit-ink); }
.d3view-jsonscientific-card.d3view-jsonscientific-dim { opacity: .32; }

/* plots, heatmaps, tables */
.d3view-jsonscientific-plot { display: block; padding: 6px 8px 8px; border-top: 1px solid var(--jss-line); }
.d3view-jsonscientific-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 4px 4px; font: 11px var(--jss-sans); color: var(--jss-ink-2); }
.d3view-jsonscientific-lg i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: 5px; }
.d3view-jsonscientific-container svg text { font-family: var(--jss-sans); }
.d3view-jsonscientific-ax text { fill: var(--jss-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.d3view-jsonscientific-ax .d3view-jsonscientific-ttl { fill: var(--jss-ink-2); font-size: 10.5px; }
.d3view-jsonscientific-gl { stroke: var(--jss-grid); stroke-width: 1; }
.d3view-jsonscientific-bl { stroke: var(--jss-axis); stroke-width: 1; }
table.d3view-jsonscientific-tb { border-collapse: collapse; font-size: 12px; }
.d3view-jsonscientific-tb th { text-align: left; color: var(--jss-key); font-weight: 500; padding: 7px 10px 6px; white-space: nowrap; }
.d3view-jsonscientific-tb th .d3view-jsonscientific-unit { margin-left: 4px; }
.d3view-jsonscientific-tb td { padding: 5px 10px; border-top: 1px solid var(--jss-line); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.d3view-jsonscientific-tb td.d3view-jsonscientific-n { text-align: right; color: var(--jss-num); font-variant-numeric: tabular-nums; }
.d3view-jsonscientific-tb td.d3view-jsonscientific-cv { cursor: pointer; color: var(--jss-muted); }
.d3view-jsonscientific-tb td .d3view-jsonscientific-spark { vertical-align: middle; }
.d3view-jsonscientific-tb tr { cursor: pointer; }
.d3view-jsonscientific-mx { display: block; padding: 8px 10px 6px; }
.d3view-jsonscientific-mx rect.d3view-jsonscientific-c:hover { stroke: var(--jss-ink); stroke-width: 1.5; }
.d3view-jsonscientific-foot { display: flex; gap: 10px; padding: 5px 10px 7px; border-top: 1px solid var(--jss-line); font: 11px var(--jss-sans); color: var(--jss-muted); }

/* overlays on the canvas */
.d3view-jsonscientific-crumb { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 330px); display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 7px; box-shadow: var(--jss-shadow); font: 12px var(--jss-mono); color: var(--jss-ink-2); }
.d3view-jsonscientific-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-jsonscientific-zoombar { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 8px; box-shadow: var(--jss-shadow); }
.d3view-jsonscientific-zoombar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--jss-ink-2); }
.d3view-jsonscientific-zoombar button:hover { background: var(--jss-surface-2); color: var(--jss-ink); }
.d3view-jsonscientific-z { font: 11px var(--jss-mono); color: var(--jss-muted); min-width: 44px; text-align: center; }
.d3view-jsonscientific-sep { width: 1px; height: 18px; background: var(--jss-line); margin: 0 3px; }
.d3view-jsonscientific-legend { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 12px; align-items: center; padding: 6px 10px; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 8px; box-shadow: var(--jss-shadow); font-size: 11px; color: var(--jss-ink-2); }
.d3view-jsonscientific-legend span { display: inline-flex; align-items: center; gap: 5px; }
.d3view-jsonscientific-canvas.d3view-jsonscientific-inspecting .d3view-jsonscientific-legend { right: 324px; }
.d3view-jsonscientific-stale { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: 70%; padding: 6px 12px; border-radius: 7px; background: var(--jss-err-wash); color: var(--jss-err); border: 1px solid var(--jss-err); font-size: 12px; font-weight: 500; }

/* side panel (inspector) */
.d3view-jsonscientific-insp { position: absolute; top: 12px; right: 12px; width: 300px; max-height: calc(100% - 24px); display: flex; flex-direction: column; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 10px; box-shadow: var(--jss-shadow-lg); overflow: hidden; cursor: default; }
.d3view-jsonscientific-insp-h { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 12px; border-bottom: 1px solid var(--jss-line); }
.d3view-jsonscientific-insp-t { min-width: 0; flex: 1; }
.d3view-jsonscientific-ty { font: 500 11px var(--jss-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--jss-muted); }
.d3view-jsonscientific-nm { font: 500 13px var(--jss-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3view-jsonscientific-insp-b { overflow: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.d3view-jsonscientific-sec h4 { margin: 0 0 6px; font: 600 11px var(--jss-sans); text-transform: uppercase; letter-spacing: .07em; color: var(--jss-muted); }
.d3view-jsonscientific-pathrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.d3view-jsonscientific-pathrow code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11.5px var(--jss-mono); color: var(--jss-ink); background: var(--jss-surface-2); border: 1px solid var(--jss-line); border-radius: 5px; padding: 4px 6px; }
.d3view-jsonscientific-pl { width: 40px; flex: none; font-size: 10.5px; color: var(--jss-muted); }
.d3view-jsonscientific-copy { flex: none; height: 23px; padding: 0 7px; border: 1px solid var(--jss-line-strong); border-radius: 5px; background: var(--jss-surface); font-size: 11px; color: var(--jss-ink-2); }
.d3view-jsonscientific-copy.d3view-jsonscientific-done { color: var(--jss-ok); border-color: var(--jss-ok); }
.d3view-jsonscientific-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12px; }
.d3view-jsonscientific-kv dt { color: var(--jss-muted); font-weight: normal; }
.d3view-jsonscientific-kv dd { margin: 0; font: 12px var(--jss-mono); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.d3view-jsonscientific-fullv { font: 12.5px/1.5 var(--jss-mono); background: var(--jss-surface-2); border: 1px solid var(--jss-line); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.d3view-jsonscientific-bigplot { border: 1px solid var(--jss-line); border-radius: 8px; background: var(--jss-surface); padding: 6px 4px 2px; }
.d3view-jsonscientific-tip { position: absolute; pointer-events: none; background: var(--jss-surface); border: 1px solid var(--jss-line-strong); border-radius: 6px; box-shadow: var(--jss-shadow); padding: 6px 8px; font: 11.5px var(--jss-sans); color: var(--jss-ink-2); white-space: nowrap; z-index: 5; }
.d3view-jsonscientific-tip b { font: 500 12px var(--jss-mono); color: var(--jss-ink); }
.d3view-jsonscientific-tip .d3view-jsonscientific-r { display: flex; align-items: center; gap: 6px; }
.d3view-jsonscientific-tip .d3view-jsonscientific-r i { width: 10px; height: 2px; border-radius: 1px; }
.d3view-jsonscientific-note { font-size: 11.5px; color: var(--jss-ink-2); background: var(--jss-surface-2); border: 1px solid var(--jss-line); border-radius: 6px; padding: 7px 9px; line-height: 1.45; }

/* status line */
.d3view-jsonscientific-status { display: flex; align-items: center; gap: 16px; min-height: 32px; font-size: 12px; color: var(--jss-muted); flex-wrap: wrap; padding: 4px 0; }
.d3view-jsonscientific-ok { color: var(--jss-ok); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.d3view-jsonscientific-bad { color: var(--jss-err); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.d3view-jsonscientific-mono { font-family: var(--jss-mono); font-size: 11.5px; }
.d3view-jsonscientific-linkbtn { border: 0; background: none; padding: 0; color: var(--jss-accent); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
    .d3view-jsonscientific-work { grid-template-columns: minmax(0, 1fr); }
    .d3view-jsonscientific-split, .d3view-jsonscientific-legend { display: none; }
    .d3view-jsonscientific-src { position: absolute; inset: 0; z-index: 6; display: none; }
    .d3view-jsonscientific-work.d3view-jsonscientific-showsrc .d3view-jsonscientific-src { display: flex; }
    .d3view-jsonscientific-work.d3view-jsonscientific-nosrc { grid-template-columns: minmax(0, 1fr); }
    .d3view-jsonscientific-insp { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 58%; }
    .d3view-jsonscientific-crumb { max-width: calc(100% - 24px); }
    .d3view-jsonscientific-search { flex: 1 1 100%; order: 5; }
}
@media (prefers-reduced-motion: reduce) {
    .d3view-jsonscientific-anim .d3view-jsonscientific-world, .d3view-jsonscientific-card, .d3view-jsonscientific-split { transition: none; }
}